diff --git a/Loader/Loader.css b/Loader/Loader.css
index 73aafd5c..478c1b70 100644
--- a/Loader/Loader.css
+++ b/Loader/Loader.css
@@ -1,44 +1,102 @@
+/* Enhanced Loader Styling */
 .loader {
-  width: 120px; /* Adjust size */
-  height: 120px; /* Adjust size */
-  position: fixed; /* Stay fixed in the center */
+  width: 100px;
+  height: 100px;
+  position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: 9999;
+  border: 10px solid rgba(0, 0, 0, 0.1);
+  border-top: 10px solid #3498db; /* Main color for the loader */
+  border-radius: 50%;
+  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3); /* Enhanced shadow for depth */
+  animation: spin 1.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite; /* Smoother, slower animation */
 }
 
-/* Main content styling */
+/* Adding a glowing pulse effect to the loader */
+.loader::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 70px;
+  height: 70px;
+  background: radial-gradient(circle, #f39c12 0%, #e8491d 100%); /* Dynamic gradient */
+  border-radius: 50%;
+  transform: translate(-50%, -50%) scale(0.8);
+  box-shadow: 0 0 20px rgba(255, 105, 180, 0.6), 0 0 40px rgba(255, 105, 180, 0.4); /* Soft glow */
+  animation: pulsate 1.2s ease-in-out infinite, colorChange 3s ease-in-out infinite; /* Add color change effect */
+}
+
+/* Main content styling remains the same */
 .main-content {
   display: none;
   opacity: 0;
+  transition: opacity 0.5s ease;
 }
 
-/* Show content when page is loaded */
+/* Hide loader and show content when the page is loaded */
 body.loaded .loader {
-  display: none; /* Hide loader */
+  display: none;
 }
 
 body.loaded .main-content {
-  display: block; /* Show main content */
-  animation: fadeIn 1s ease-in-out forwards; /* Fade in animation */
-}
-
-body.loaded .popup {
-  display: flex; /* Show popup after loading */
+  display: block;
+  animation: fadeIn 1s ease-in-out forwards;
 }
 
 /* Smooth fade-in effect for content */
 @keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
   to {
     opacity: 1;
   }
 }
 
-/* Body styling to prevent scrolling while the loader is visible */
+/* Spin animation for loader */
+@keyframes spin {
+  0% {
+    transform: translate(-50%, -50%) rotate(0deg);
+  }
+  100% {
+    transform: translate(-50%, -50%) rotate(360deg);
+  }
+}
+
+/* Pulsating animation for inner circle */
+@keyframes pulsate {
+  0% {
+    transform: translate(-50%, -50%) scale(0.8);
+  }
+  50% {
+    transform: translate(-50%, -50%) scale(1.1); /* Slightly bigger pulsate */
+  }
+  100% {
+    transform: translate(-50%, -50%) scale(0.8);
+  }
+}
+
+/* Color change animation */
+@keyframes colorChange {
+  0% {
+    background: radial-gradient(circle, #f39c12 0%, #e8491d 100%);
+  }
+  50% {
+    background: radial-gradient(circle, #8e44ad 0%, #3498db 100%);
+  }
+  100% {
+    background: radial-gradient(circle, #f39c12 0%, #e8491d 100%);
+  }
+}
+
+/* Prevent scrolling while the loader is visible */
 body {
   margin: 0;
   padding: 0;
-  overflow: hidden; /* Prevent scrolling while loader is visible */
+  overflow: hidden;
   background-color: #f0f4f8;
-}
+  transition: background-color 0.5s ease;
+}
\ No newline at end of file
diff --git a/aboutus.html b/aboutus.html
index ed8a7b99..46643864 100644
--- a/aboutus.html
+++ b/aboutus.html
@@ -23,7 +23,7 @@
             margin: 0;
             padding: 0;
             background-color: white;
-
+            transition: background-color 0.5s ease; /* Smooth transition for background color */
         }
 
         .container {
@@ -49,11 +49,13 @@
         h1{
             color: rgb(255, 255, 255);
             text-align: center;
-            transition: transform 0.3s ease-in-out;
+            /* transition: transform 0.3s ease-in-out; */
+            transition: transform 0.3s ease-in-out, color 0.3s ease; /* Added color transition */
         }
 
         h1:hover {
             transform: scale(1.2);
+            color: #f4be0c; /* Change color on hover for visual feedback */
         }
 
         h2{
@@ -75,11 +77,15 @@
             box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
             transition: all 0.3s ease;
             text-align: center;
+            position: relative; /* Positioning context for hover effects */
+            overflow: hidden; /* Prevents overflow for scaling effects */
         }
 
         .feature:hover {
-            transform: translateX(-5px);
-            box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.15);
+            /* transform: translateX(-5px); */
+            transform: translateY(-5px); /* Smooth upward shift */
+            /* box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.15); */
+            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); /* Enhanced shadow on hover */
         }
 
         .feature h3 {
@@ -96,7 +102,8 @@
             font-size: 48px;
             color: #e8491d;
             margin-bottom: 15px;
-            transition: all 0.3s ease;
+            /* transition: all 0.3s ease; */
+            transition: transform 0.3s ease; /* Smooth scaling */
         }
 
         .feature:hover .feature-icon {
@@ -110,6 +117,7 @@
             font-size: 18px;
             color: #d0c3df;
             font-weight: 600;
+            transition: color 0.3s ease; /* Smooth color transition */
         }
 
         .rocket {
@@ -283,7 +291,7 @@ <h3>FAQs Section</h3>
         <div class="footer-content">
             <div class="footer-section about">
                 <div class="logo-container">
-                    <img src="images/logo.png" alt="GamingTools Logo" class="footer-logo">
+                    <img src="images/logo.png" alt="GamingTools Logo" class="footer-logo" loading="lazy">
                     <h2 class="logo-text">Collect your GamingTools</h2>
                 </div>
                 <p class="about-text">
diff --git a/index.html b/index.html
index 97a63df1..15fc51c7 100644
--- a/index.html
+++ b/index.html
@@ -110,7 +110,7 @@ <h1 data-aos="fade-down">Welcome to GamingTools</h1>
         <div id="popup" class="popup">
             <div class="popup-content">
                 <div class="popup-left">
-                    <img src="images/popup.png" alt="Gaming Tools Image">
+                    <img src="images/popup.png" alt="Gaming Tools Image" loading="lazy">
                 </div>
 
                 <div class="popup-right">
@@ -159,7 +159,7 @@ <h3>Wireless Controllers for PlayStation 4</h3>
                 </div>
             </div>
             <div class="col-2" data-aos="fade-left">
-                <img src="images/controller1.png" class="controller" alt="Controller">
+                <img src="images/controller1.png" class="controller" alt="Controller" loading="lazy">
                 <div class="color-box"></div>
             </div>
         </div>
@@ -189,7 +189,7 @@ <h3>Controllers for Xbox One and Series X</h3>
                 </div>
             </div>
             <div class="col-2" data-aos="fade-left">
-                <img src="images/newcontroller3.png" class="controller" alt="Controller">
+                <img src="images/newcontroller3.png" class="controller" alt="Controller" loading="lazy">
                 <!-- replaced old blurry image with enhanced image -->
                 <div class="color-box"></div>
 
@@ -222,7 +222,7 @@ <h3>Wireless Controllers for Nintendo Switch</h3>
             </div>
             <div class="col-2" data-aos="fade-left">
                 <img src="images/controller2.png" class="controller"
-                    alt="Controller"><!--changed the image, as it was interchanged with the xbox controller image-->
+                    alt="Controller" loading="lazy"><!--changed the image, as it was interchanged with the xbox controller image-->
                 <div class="color-box"></div>
 
             </div>
@@ -254,7 +254,7 @@ <h3>VR Headset from Meta</h3>
             </div>
             <div class="col-2" data-aos="fade-left">
                 <img src="images/metaquest.jpg" class="controller"
-                    alt="Controller"><!--changed the image, as it was interchanged with the xbox controller image-->
+                    alt="Controller" loading="lazy"><!--changed the image, as it was interchanged with the xbox controller image-->
                 <div class="color-box"></div>
 
             </div>
@@ -286,7 +286,7 @@ <h3>VR Headset from Apple</h3>
             </div>
             <div class="col-2" data-aos="fade-left">
                 <img src="images/visionpro.png" class="controller"
-                    alt="Controller"><!--changed the image, as it was interchanged with the xbox controller image-->
+                    alt="Controller" loading="lazy"><!--changed the image, as it was interchanged with the xbox controller image-->
                 <div class="color-box"></div>
 
             </div>
@@ -317,7 +317,7 @@ <h3>High Performance Gaming Mouse</h3>
                 </div>
             </div>
             <div class="col-2" data-aos="fade-left">
-                <img src="images/mouse.png" class="controller" alt="Gaming Mouse">
+                <img src="images/mouse.png" class="controller" alt="Gaming Mouse" loading="lazy">
                 <div class="color-box"></div>
 
             </div>
@@ -348,7 +348,7 @@ <h3>Mechanical Gaming Keyboard</h3>
                 </div>
             </div>
             <div class="col-2" data-aos="fade-left">
-                <img src="images/keyboard.png" class="controller" alt="Gaming Keyboard">
+                <img src="images/keyboard.png" class="controller" alt="Gaming Keyboard" loading="lazy">
                 <div class="color-box"></div>
 
             </div>
@@ -379,7 +379,7 @@ <h3>Wireless Gaming Headset</h3>
                 </div>
             </div>
             <div class="col-2" data-aos="fade-left">
-                <img src="images/headset.png" class="controller" alt="Gaming Headset">
+                <img src="images/headset.png" class="controller" alt="Gaming Headset" loading="lazy">
                 <div class="color-box"></div>
 
             </div>
@@ -410,7 +410,7 @@ <h3>Ergonomic Gaming Chair</h3>
                 </div>
             </div>
             <div class="col-2" data-aos="fade-left">
-                <img src="images/newchair.png" class="controller" alt="Gaming Chair">
+                <img src="images/newchair.png" class="controller" alt="Gaming Chair" loading="lazy">
                 <div class="color-box"></div>
 
             </div>
@@ -491,7 +491,7 @@ <h4>Sarah malik</h4>
                         <li class="swiper-slide">
                             <div class="wrapper">
                                 <div class="thumbnail">
-                                    <img src="images/boy2.png" alt="">
+                                    <img src="images/boy2.png" alt="" loading="lazy">
                                 </div>
                                 <div class="aside">
                                     <p>Shopping on this website was a breeze! I love how user-friendly the interface is;
@@ -508,7 +508,7 @@ <h4>John Doe</h4>
                         <li class="swiper-slide">
                             <div class="wrapper">
                                 <div class="thumbnail">
-                                    <img src="images/boy1.png" alt="">
+                                    <img src="images/boy1.png" alt="" loading="lazy">
                                 </div>
                                 <div class="aside">
                                     <p>My order arrived much faster than I anticipated, which was a huge plus. The
@@ -525,7 +525,7 @@ <h4>Alex Johnson</h4>
                         <li class="swiper-slide">
                             <div class="wrapper">
                                 <div class="thumbnail">
-                                    <img src="images/girl2.png" alt="">
+                                    <img src="images/girl2.png" alt="" loading="lazy">
                                 </div>
                                 <div class="aside">
                                     <p>As a serious gamer, I always look for high-quality gear that can enhance my
@@ -566,7 +566,7 @@ <h2>Contact Our Customer Support Team</h2>
             </div>
             <div class="card-body">
                 <div class="image-section">
-                    <img src="images/7725176.jpg" alt="Contact Image"
+                    <img src="images/7725176.jpg" alt="Contact Image" loading="lazy"
                         style="max-width: 80%; height: auto; max-height: 500px;">
                 </div>
                 <div class="form-section">
@@ -595,7 +595,7 @@ <h2>Contact Our Customer Support Team</h2>
         <div class="footer-content">
             <div class="footer-section about">
                 <div class="logo-container">
-                    <img src="images/logo.png" alt="GamingTools Logo" class="footer-logo">
+                    <img src="images/logo.png" alt="GamingTools Logo" class="footer-logo" loading="lazy">
                     <h2 class="logo-text">Collect your GamingTools</h2>
                 </div>
                 <p class="about-text">