diff --git a/frontend/src/components/common/Preloader.jsx b/frontend/src/components/common/Preloader.jsx
index 1128de2..bf86013 100644
--- a/frontend/src/components/common/Preloader.jsx
+++ b/frontend/src/components/common/Preloader.jsx
@@ -3,23 +3,35 @@ import logo from "../../assets/header.png";
 
 const Preloader = () => {
     return (
-        <div id="preloader">
-            <div className="st-perloader">
-                <div className="st-perloader-in">
-                    <div className="st-wave-second">
-                        <svg enableBackground="new 0 0 300.08 300.08" viewBox="0 0 300.08 300.08" xmlns="http://www.w3.org/2000/svg">
-                            <g>
-                                <path d="m293.26 184.14h-82.877l-12.692-76.138c-.546-3.287-3.396-5.701-6.718-5.701-.034 0-.061 0-.089 0-3.369.027-6.199 2.523-6.677 5.845l-12.507 87.602-14.874-148.69c-.355-3.43-3.205-6.056-6.643-6.138-.048 0-.096 0-.143 0-3.39 0-6.274 2.489-6.752 5.852l-19.621 137.368h-9.405l-12.221-42.782c-.866-3.028-3.812-5.149-6.8-4.944-3.13.109-5.777 2.332-6.431 5.395l-8.941 42.332h-73.049c-3.771 0-6.82 3.049-6.82 6.82 0 3.778 3.049 6.82 6.82 6.82h78.566c3.219 0 6.002-2.251 6.67-5.408l4.406-20.856 6.09 21.313c.839 2.939 3.526 4.951 6.568 4.951h20.46c3.396 0 6.274-2.489 6.752-5.845l12.508-87.596 14.874 148.683c.355 3.437 3.205 6.056 6.643 6.138h.143c3.39 0 6.274-2.489 6.752-5.845l14.227-99.599 6.397 38.362c.546 3.287 3.396 5.702 6.725 5.702h88.66c3.771 0 6.82-3.049 6.82-6.82-.001-3.772-3.05-6.821-6.821-6.821z"></path>
-                            </g>
-                        </svg>
-                    </div>
-                    <div className="preloader-image">
-                        <img src={logo} alt="TelMedSphere Logo" />
-                    </div>
-                </div>
-            </div>
+      <div
+        id="preloader"
+        className="fixed top-0 left-0 w-full h-full z-[99999] bg-white-1 flex items-center justify-center"
+      >
+        <div className="relative text-center">
+          {/* Wave Animation */}
+          <div className="relative top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-[110px] overflow-hidden animate-spark">
+            <svg
+              viewBox="0 0 300.08 300.08"
+              xmlns="http://www.w3.org/2000/svg"
+              className="w-[110px] h-[110px] fill-[#f00] max-sm:w-[90px] max-sm:h-[90px] "
+            >
+              <g>
+                <path d="m293.26 184.14h-82.877l-12.692-76.138c-.546-3.287-3.396-5.701-6.718-5.701-.034 0-.061 0-.089 0-3.369.027-6.199 2.523-6.677 5.845l-12.507 87.602-14.874-148.69c-.355-3.43-3.205-6.056-6.643-6.138-.048 0-.096 0-.143 0-3.39 0-6.274 2.489-6.752 5.852l-19.621 137.368h-9.405l-12.221-42.782c-.866-3.028-3.812-5.149-6.8-4.944-3.13.109-5.777 2.332-6.431 5.395l-8.941 42.332h-73.049c-3.771 0-6.82 3.049-6.82 6.82 0 3.778 3.049 6.82 6.82 6.82h78.566c3.219 0 6.002-2.251 6.67-5.408l4.406-20.856 6.09 21.313c.839 2.939 3.526 4.951 6.568 4.951h20.46c3.396 0 6.274-2.489 6.752-5.845l12.508-87.596 14.874 148.683c.355 3.437 3.205 6.056 6.643 6.138h.143c3.39 0 6.274-2.489 6.752-5.845l14.227-99.599 6.397 38.362c.546 3.287 3.396 5.702 6.725 5.702h88.66c3.771 0 6.82-3.049 6.82-6.82-.001-3.772-3.05-6.821-6.821-6.821z"></path>
+              </g>
+            </svg>
+          </div>
+  
+          {/* Logo with Pulse Animation */}
+          <div className="">
+            <img
+              src={logo}
+              alt="TelMedSphere Logo"
+              className="h-[75px] max-sm:h-[57px] animate-pulse-custom object-contain transform transition-none duration-200 ease-in-out scale-100 hover:scale-110"
+            />
+          </div>
         </div>
+      </div>
     );
-};
-
-export default Preloader;
+  };
+  
+  export default Preloader;
\ No newline at end of file
diff --git a/frontend/src/styles/components/_preloader.scss b/frontend/src/styles/components/_preloader.scss
deleted file mode 100644
index 955f824..0000000
--- a/frontend/src/styles/components/_preloader.scss
+++ /dev/null
@@ -1,72 +0,0 @@
-.st-perloader {
-    position: fixed;
-    height: 100vh;
-    width: 100vw;
-    z-index: 99999;
-    left: 0;
-    top: 0;
-    background-color: #fff;
-    display: flex;
-    align-items: center;
-    justify-content: center; 
-}
-
-.st-perloader .st-perloader-in {
-    position: relative;
-    text-align: center;
-}
-
-.st-perloader .st-perloader-in svg {
-    width: 110px;
-    height: 110px; 
-}
-
-.st-perloader .st-wave-second {
-    position: relative;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 110px;
-    overflow: hidden;
-    animation: spark 1.25s linear infinite; 
-}
-
-.st-perloader .st-wave-second svg {
-    fill: red; 
-}
-
-.st-perloader.st-color1 .st-wave-second svg,
-.st-perloader.st-color2 .st-wave-second svg {
-    fill: red; 
-}
-
-@keyframes spark {
-    0% {
-      max-width: 0; 
-    }
-    100% {
-      max-width: 100%; 
-    } 
-}
-
-.preloader-text h1 {
-    font-size: 3rem;
-    margin-top: 30px;
-    color: rgb(255, 55, 0);
-    animation: pulse 2s infinite;
-}
-
-@keyframes pulse {
-    0%, 100% {
-        transform: scale(1);
-    }
-    50% {
-        transform: scale(1.1);
-    }
-}
-
-.preloader-image img {
-    height: 75px;
-    margin-top: 0px;
-    animation: pulse 2s infinite;
-}
diff --git a/frontend/src/styles/style.scss b/frontend/src/styles/style.scss
index 1584a69..a5e1bb1 100644
--- a/frontend/src/styles/style.scss
+++ b/frontend/src/styles/style.scss
@@ -10,7 +10,6 @@
 @import "./components/form";
 @import "./components/filterbar";
 @import "./components/searchbar";
-@import "./components/preloader";
 
 // Pages
 @import "./pages/home";
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 0557cd2..7e86ddf 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -72,6 +72,29 @@ module.exports = {
         xs: "480px",
         xxs: "400px",
       },
+      animation: {
+        spark: "spark 1.5s linear infinite",
+        "pulse-custom": "pulse 2s infinite",
+      },
+      keyframes: {
+        spark: {
+          "0%": {
+            maxWidth: "0%",
+          },
+          "100%": {
+            maxWidth: "100%",
+          },
+        },
+        pulse: {
+          "0%, 100%": {
+            transform: "scale(1)",
+          },
+          "50%": {
+            transform: "scale(1.1)",
+            opacity: "1",
+          },
+        },
+      },
     },
   },
   plugins: [],