diff --git a/src/assets/styles/components/cards/AwardCard.css b/src/assets/styles/components/cards/AwardCard.css
index 606c7cd..be4b578 100644
--- a/src/assets/styles/components/cards/AwardCard.css
+++ b/src/assets/styles/components/cards/AwardCard.css
@@ -16,7 +16,6 @@
 
 .award-card .award-image {
   position: relative;
-  z-index: 10;
   max-width: 100%;
   /* Ensure the image scales properly */
   height: auto;
@@ -27,7 +26,6 @@
   inset: 0;
   background: rgba(0, 0, 0, 0.3);
   /* Overlay for text visibility */
-  z-index: 5;
 }
 
 .font-reross{
@@ -38,4 +36,4 @@
 
 .font-sf-pro-display{
   font-family: "SF Pro Display", sans-serif;
-}
\ No newline at end of file
+}
diff --git a/src/assets/styles/index.css b/src/assets/styles/index.css
index 9c8b287..404f34a 100644
--- a/src/assets/styles/index.css
+++ b/src/assets/styles/index.css
@@ -263,18 +263,6 @@
   }
 }
 
-.App {
-  font-family: sans-serif;
-  text-align: center;
-  margin-top: 20px auto;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-.App {
-  font-family: sans-serif;
-  text-align: center;
-  margin-top: 20px auto;
-  padding: 0;
-  box-sizing: border-box;
+.overlay-all {
+  z-index: 1000 !important;
 }
diff --git a/src/assets/styles/pages/layouts/Merch.css b/src/assets/styles/pages/layouts/Merch.css
index 2183fe7..5f664e2 100644
--- a/src/assets/styles/pages/layouts/Merch.css
+++ b/src/assets/styles/pages/layouts/Merch.css
@@ -1,9 +1,8 @@
 /* Default styles for desktop and larger screens */
-
 .merch-container {
     font-family: "t26-carbon", monospace;
-font-weight: 700;
-font-style: normal;
+    font-weight: 700;
+    font-style: normal;
     color: white;
     animation: gradientAnimation 10s ease infinite;
     padding: 5rem 0;
@@ -13,7 +12,7 @@ font-style: normal;
     font-size: 5rem;
     font-weight: 400;
     font-family: "reross-quadratic", sans-serif;
-font-style: normal;
+    font-style: normal;
     margin-top: -50px;
     margin-bottom: 4rem;
     text-align: center;
@@ -53,7 +52,7 @@ font-style: normal;
 
 .merch-price {
     font-weight: bold;
-    font-size:1.25rem;
+    font-size: 1.25rem;
     font-family: 'SF Pro Display', sans-serif;
     margin-top: 0.5rem;
     color: #d7336f;
@@ -70,10 +69,9 @@ font-style: normal;
     display: flex;
     justify-content: center;
     align-items: center;
-    z-index: 1000;
-    /* High z-index to stay on top */
+    z-index: 9999;
+    /* Ensure it is on top of everything else */
     overflow: auto;
-    /* Ensure it can handle overflow content */
 }
 
 .merch-popup {
@@ -89,8 +87,8 @@ font-style: normal;
     height: auto;
     overflow: hidden;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-    z-index: 1001;
-    /* Ensure it is above the overlay */
+    z-index: 10000;
+    /* Ensure it is on top of the overlay */
 }
 
 .merch-popup-close {
@@ -102,11 +100,10 @@ font-style: normal;
     border: none;
     color: white;
     cursor: pointer;
-    z-index: 1002;
-    /* Ensure it is above the popup */
+    z-index: 10001;
+    /* Ensure it is on top of the popup */
 }
 
-
 .merch-popup-content {
     display: flex;
     flex-direction: row;
@@ -199,7 +196,8 @@ font-style: normal;
     opacity: 0.7;
 }
 
-.no-scroll{
+/* Prevent background scroll */
+.no-scroll {
     overflow: hidden;
 }
 
diff --git a/src/pages/MainPage.jsx b/src/pages/MainPage.jsx
index 69217e3..2a11a4c 100644
--- a/src/pages/MainPage.jsx
+++ b/src/pages/MainPage.jsx
@@ -10,7 +10,8 @@ import Merch from "./layouts/Merch";
 import Partners from "./layouts/Partners";
 import Contact from "./layouts/Contact";
 import FooterExport from "./layouts/Footer";
-import AnimatedBackground from "../utils//AnimatedBackground";
+import AnimatedBackground from "../utils/AnimatedBackground";
+import zIndex from "@mui/material/styles/zIndex";
 
 export default function MainPage() {
   const [activeSegment, setActiveSegment] = useState(0);
@@ -39,10 +40,11 @@ export default function MainPage() {
       <AnimatedBackground isActive={activeSegment === 0}>
         <FAQ />
       </AnimatedBackground>
-
-      <AnimatedBackground isActive={activeSegment === 1}>
-        <Merch />
-      </AnimatedBackground>
+      <div style={{ zIndex: 9999 }}>
+        <AnimatedBackground isActive={activeSegment === 1}>
+          <Merch />
+        </AnimatedBackground>
+      </div>
 
       <AnimatedBackground isActive={activeSegment === 2}>
         <Partners />
diff --git a/src/pages/layouts/Footer.jsx b/src/pages/layouts/Footer.jsx
index 48395d7..7afb2d1 100644
--- a/src/pages/layouts/Footer.jsx
+++ b/src/pages/layouts/Footer.jsx
@@ -40,7 +40,7 @@ const FooterExport = () => {
               participants in developing a micro mouse capable of solving a maze
               within a specified timeframe. The main challenge is to design a
               micro mouse capable of solving a maze within a specified time
-              frame.  
+              frame.
             </p>
           </motion.div>
           <motion.div
@@ -66,7 +66,9 @@ const FooterExport = () => {
                 </motion.a>
               ))}
             </div>
-            <p className="footer-email" href="ieeeras@iit.ac.lk">@ieeeras@iit.ac.lk</p>
+            <p className="footer-email" href="ieeeras@iit.ac.lk">
+              @ieeeras@iit.ac.lk
+            </p>
           </motion.div>
         </div>
       </div>
diff --git a/src/pages/layouts/Merch.jsx b/src/pages/layouts/Merch.jsx
index 94aad67..3e891a4 100644
--- a/src/pages/layouts/Merch.jsx
+++ b/src/pages/layouts/Merch.jsx
@@ -10,12 +10,12 @@ export default function Merch() {
   const handleCardClick = (product) => {
     setSelectedProduct(product);
     setCurrentImageIndex(0); // Reset image index
-    document.body.style.overflow = 'hidden'; // Prevent background scroll
+    document.body.classList.add("no-scroll"); // Prevent background scroll
   };
 
   const handleClosePopup = () => {
     setSelectedProduct(null);
-    document.body.style.overflow = 'auto'; // Restore background scroll
+    document.body.classList.remove("no-scroll"); // Restore background scroll
   };
 
   const handleThumbnailClick = (index) => {
@@ -72,14 +72,14 @@ export default function Merch() {
 
         {selectedProduct && (
           <motion.div
-            className="merch-popup-overlay"
+            className="merch-popup-overlay overlay-all"
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
             exit={{ opacity: 0 }}
             onClick={handleOverlayClick}
           >
             <motion.div
-              className="merch-popup"
+              className="merch-popup overlay-all"
               initial={{ y: "-100vh" }}
               animate={{ y: 0 }}
               exit={{ y: "100vh" }}
@@ -103,7 +103,10 @@ export default function Merch() {
                     {selectedProduct.description || "No description available."}
                   </p>
                   <a
-                    href={selectedProduct.buyLink || "https://bit.ly/MicroMaze-Merch"}
+                    href={
+                      selectedProduct.buyLink ||
+                      "https://bit.ly/MicroMaze-Merch"
+                    }
                     target="_blank"
                     rel="noopener noreferrer"
                     className="merch-popup-button"