diff --git a/src/components/merch/FilterBar.css b/src/components/merch/FilterBar.css
index 58555b77..848dc722 100644
--- a/src/components/merch/FilterBar.css
+++ b/src/components/merch/FilterBar.css
@@ -71,18 +71,18 @@
 }
 
 .category-button.active {
-  background: linear-gradient(135deg, #667eea 0%, #5b47d6 100%);
-  border-color: #667eea;
+  background: var(--ifm-color-primary);
+  border-color: var(--ifm-color-primary);
   color: #ffffff !important;
   font-weight: 600;
-  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }
 
 .category-button.active:hover {
-  background: linear-gradient(135deg, #818cf8 0%, #06b6d4 100%);
-  border-color: #818cf8;
+  background: var(--ifm-color-primary-dark);
+  border-color: var(--ifm-color-primary-dark);
   transform: translateX(4px);
-  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
 }
 
 .category-icon {
@@ -124,9 +124,9 @@
 
 .sort-select:focus {
   outline: none;
-  border-color: #667eea;
+  border-color: var(--ifm-color-primary);
   background-color: #ffffff;
-  box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.15), 0 2px 8px rgba(102, 126, 234, 0.2);
+  box-shadow: 0 0 0 4px rgba(46, 133, 85, 0.15), 0 2px 8px rgba(46, 133, 85, 0.2);
 }
 
 /* Responsive Design */
diff --git a/src/components/merch/FilterBar.tsx b/src/components/merch/FilterBar.tsx
index a988656d..d837b8ef 100644
--- a/src/components/merch/FilterBar.tsx
+++ b/src/components/merch/FilterBar.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Filter, SlidersHorizontal } from "lucide-react";
+import { Filter, SlidersHorizontal, ShoppingBag, Shirt, Component, Backpack } from "lucide-react";
 import "./FilterBar.css";
 
 interface FilterBarProps {
@@ -10,10 +10,10 @@ interface FilterBarProps {
 }
 
 const categories = [
-  { id: "all", label: "All Products", icon: "🛍️" },
-  { id: "t-shirts", label: "T-Shirts", icon: "👕" },
-  { id: "hoodies", label: "Hoodies", icon: "🧥" },
-  { id: "accessories", label: "Accessories", icon: "🎒" },
+  { id: "all", label: "All Products", icon: <ShoppingBag size={18} /> },
+  { id: "t-shirts", label: "T-Shirts", icon: <Shirt size={18} /> },
+  { id: "hoodies", label: "Hoodies", icon: <Component size={18} /> },
+  { id: "accessories", label: "Accessories", icon: <Backpack size={18} /> },
 ];
 
 const sortOptions = [
diff --git a/src/components/merch/ProductCard.css b/src/components/merch/ProductCard.css
index 1bbc1eb1..079d3375 100644
--- a/src/components/merch/ProductCard.css
+++ b/src/components/merch/ProductCard.css
@@ -14,8 +14,8 @@
 
 .product-card:hover {
   transform: translateY(-4px);
-  box-shadow: 0 12px 24px rgba(102, 126, 234, 0.15);
-  border-color: rgba(102, 126, 234, 0.3);
+  box-shadow: 0 12px 24px rgba(46, 133, 85, 0.15);
+  border-color: rgba(46, 133, 85, 0.3);
 }
 
 /* Image Section */
@@ -70,13 +70,13 @@
   justify-content: center;
   cursor: pointer;
   transition: all 0.2s ease;
-  color: #667eea;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  color: var(--ifm-color-primary);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }
 
 .overlay-button:hover {
   transform: scale(1.1);
-  background: linear-gradient(135deg, #667eea 0%, #06b6d4 100%);
+  background: var(--ifm-color-primary);
   color: white;
 }
 
@@ -114,7 +114,7 @@
   position: absolute;
   top: 12px;
   left: 12px;
-  background: linear-gradient(135deg, #667eea 0%, #5b47d6 100%);
+  background: var(--ifm-color-primary);
   color: white;
   padding: 4px 10px;
   border-radius: 6px;
@@ -123,7 +123,7 @@
   text-transform: uppercase;
   letter-spacing: 0.5px;
   z-index: 3;
-  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
 }
 
 /* Content Section */
@@ -206,7 +206,7 @@
   display: flex;
   align-items: baseline;
   font-weight: 700;
-  color: #5b47d6;
+  color: var(--ifm-font-color-base);
 }
 
 .price-currency {
@@ -223,7 +223,7 @@
   justify-content: center;
   gap: 0.5rem;
   padding: 0.625rem 1rem;
-  background: linear-gradient(135deg, #667eea 0%, #5b47d6 100%);
+  background: var(--ifm-color-primary);
   color: white;
   border: none;
   border-radius: 8px;
@@ -232,13 +232,13 @@
   cursor: pointer;
   transition: all 0.2s ease;
   white-space: nowrap;
-  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }
 
 .product-card-button:hover {
-  background: linear-gradient(135deg, #818cf8 0%, #06b6d4 100%);
+  background: var(--ifm-color-primary-dark);
   transform: translateY(-1px);
-  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
 }
 
 .product-card-button:active {
diff --git a/src/components/merch/ProductImageViewer.css b/src/components/merch/ProductImageViewer.css
index ebaa36e0..953c2e77 100644
--- a/src/components/merch/ProductImageViewer.css
+++ b/src/components/merch/ProductImageViewer.css
@@ -102,7 +102,7 @@
 }
 
 .control-button {
-  background: linear-gradient(135deg, #667eea 0%, #5b47d6 100%);
+  background: var(--ifm-color-primary);
   border: none;
   color: white;
   border-radius: 8px;
@@ -114,13 +114,13 @@
   justify-content: center;
   min-width: 44px;
   height: 44px;
-  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }
 
 .control-button:hover:not(:disabled) {
-  background: linear-gradient(135deg, #818cf8 0%, #06b6d4 100%);
+  background: var(--ifm-color-primary-dark);
   transform: translateY(-1px);
-  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
 }
 
 .control-button:active:not(:disabled) {
diff --git a/src/components/merch/ShoppingCart.css b/src/components/merch/ShoppingCart.css
index 73386100..2eb0d0d5 100644
--- a/src/components/merch/ShoppingCart.css
+++ b/src/components/merch/ShoppingCart.css
@@ -108,20 +108,20 @@
 
 .cart-continue-button {
   padding: 0.75rem 1.5rem;
-  background: linear-gradient(135deg, #667eea 0%, #5b47d6 100%);
+  background: var(--ifm-color-primary);
   color: white;
   border: none;
   border-radius: 8px;
   font-weight: 600;
   cursor: pointer;
   transition: all 0.2s ease;
-  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }
 
 .cart-continue-button:hover {
-  background: linear-gradient(135deg, #818cf8 0%, #06b6d4 100%);
+  background: var(--ifm-color-primary-dark);
   transform: translateY(-1px);
-  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
 }
 
 /* Cart Items */
@@ -175,7 +175,7 @@
 .cart-item-price {
   font-size: 0.875rem;
   font-weight: 700;
-  color: #5b47d6;
+  color: var(--ifm-font-color-base);
   margin: 0;
 }
 
@@ -211,7 +211,7 @@
 }
 
 .quantity-controls button:hover:not(:disabled) {
-  background: linear-gradient(135deg, #667eea 0%, #5b47d6 100%);
+  background: var(--ifm-color-primary);
   color: white;
 }
 
@@ -300,14 +300,14 @@
   border-top: 2px solid var(--ifm-color-emphasis-200);
   font-size: 1.125rem;
   font-weight: 700;
-  color: #5b47d6;
+  color: var(--ifm-font-color-base);
 }
 
 /* Checkout Button */
 .cart-checkout-button {
   width: 100%;
   padding: 1rem;
-  background: linear-gradient(135deg, #667eea 0%, #5b47d6 100%);
+  background: var(--ifm-color-primary);
   color: white;
   border: none;
   border-radius: 8px;
@@ -320,13 +320,13 @@
   gap: 0.5rem;
   transition: all 0.2s ease;
   margin-bottom: 0.75rem;
-  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }
 
 .cart-checkout-button:hover {
-  background: linear-gradient(135deg, #818cf8 0%, #06b6d4 100%);
+  background: var(--ifm-color-primary-dark);
   transform: translateY(-1px);
-  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
 }
 
 .cart-checkout-button:active {
diff --git a/src/pages/merch/index.tsx b/src/pages/merch/index.tsx
index e1a8de5e..49d94a37 100644
--- a/src/pages/merch/index.tsx
+++ b/src/pages/merch/index.tsx
@@ -5,7 +5,7 @@ import { motion } from "framer-motion";
 import ProductGrid from "../../components/merch/ProductGrid";
 import FilterBar from "../../components/merch/FilterBar";
 import ShoppingCart from "../../components/merch/ShoppingCart";
-import { ShoppingBag } from "lucide-react";
+import { ShoppingBag, Truck, RefreshCw, Leaf, ShieldCheck, Globe, Medal } from "lucide-react";
 import { getProducts, isShopifyConfigured } from "../../lib/shopify";
 import "./merch.css";
 
@@ -83,6 +83,19 @@ const sampleProducts: Product[] = [
   },
 ];
 
+const containerVariants = {
+  hidden: { opacity: 0 },
+  show: {
+    opacity: 1,
+    transition: { staggerChildren: 0.2 }
+  }
+};
+
+const itemVariants = {
+  hidden: { opacity: 0, y: 20 },
+  show: { opacity: 1, y: 0, transition: { duration: 0.5, ease: "easeOut" } }
+};
+
 export default function MerchPage(): ReactNode {
   const [selectedCategory, setSelectedCategory] = useState<string>("all");
   const [sortBy, setSortBy] = useState<string>("featured");
@@ -225,11 +238,11 @@ export default function MerchPage(): ReactNode {
         <section className="merch-hero">
           <motion.div
             className="merch-hero-content"
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.6 }}
+            variants={containerVariants}
+            initial="hidden"
+            animate="show"
           >
-            <div className="hero-left">
+            <motion.div className="hero-left" variants={itemVariants}>
               <h1 className="merch-hero-title">
                 Official Recode Merch
               </h1>
@@ -237,23 +250,40 @@ export default function MerchPage(): ReactNode {
                 Wear your code pride! Premium quality apparel and accessories for
                 developers who love open source.
               </p>
-            </div>
-            <div className="hero-right">
+              <div className="hero-buttons">
+                <button
+                  className="hero-button hero-button-primary"
+                  onClick={() => {
+                    const section = document.querySelector(".merch-products-section");
+                    if (section) section.scrollIntoView({ behavior: "smooth" });
+                  }}
+                >
+                  Shop Collection
+                </button>
+                <button
+                  className="hero-button hero-button-secondary"
+                  onClick={() => setSelectedCategory("accessories")}
+                >
+                  View Accessories
+                </button>
+              </div>
+            </motion.div>
+            <motion.div className="hero-right" variants={itemVariants}>
               <div className="merch-hero-stats">
-                <div className="stat-item stat-item-highlighted">
-                  <span className="stat-number">100%</span>
+                <motion.div className="stat-item stat-item-highlighted" whileHover={{ scale: 1.05 }} variants={itemVariants}>
+                  <Medal className="stat-icon" size={28} color="var(--ifm-color-primary)" />
                   <span className="stat-label">Quality</span>
-                </div>
-                <div className="stat-item stat-item-highlighted">
-                  <span className="stat-number">🌍</span>
+                </motion.div>
+                <motion.div className="stat-item stat-item-highlighted" whileHover={{ scale: 1.05 }} variants={itemVariants}>
+                  <Globe className="stat-icon" size={28} color="var(--ifm-color-primary)" />
                   <span className="stat-label">Worldwide Shipping</span>
-                </div>
-                <div className="stat-item stat-item-highlighted">
-                  <span className="stat-number">🌱</span>
+                </motion.div>
+                <motion.div className="stat-item stat-item-highlighted" whileHover={{ scale: 1.05 }} variants={itemVariants}>
+                  <Leaf className="stat-icon" size={28} color="var(--ifm-color-primary)" />
                   <span className="stat-label">Eco-Friendly</span>
-                </div>
+                </motion.div>
               </div>
-            </div>
+            </motion.div>
           </motion.div>
         </section>
 
@@ -311,48 +341,34 @@ export default function MerchPage(): ReactNode {
 
         {/* Info Section */}
         <section className="merch-info-section">
-          <div className="info-grid">
-            <motion.div
-              className="info-card info-card-highlighted"
-              initial={{ opacity: 0, y: 20 }}
-              whileInView={{ opacity: 1, y: 0 }}
-              viewport={{ once: true }}
-              transition={{ delay: 0.1 }}
-            >
-              <h3>🚚 Free Shipping</h3>
+          <motion.div
+            className="info-grid"
+            variants={containerVariants}
+            initial="hidden"
+            whileInView="show"
+            viewport={{ once: true, margin: "-50px" }}
+          >
+            <motion.div className="info-card info-card-highlighted" variants={itemVariants}>
+              <div className="info-card-icon"><Truck size={32} color="var(--ifm-color-primary)" /></div>
+              <h3>Free Shipping</h3>
               <p>Free shipping on orders over $50</p>
             </motion.div>
-            <motion.div
-              className="info-card info-card-highlighted"
-              initial={{ opacity: 0, y: 20 }}
-              whileInView={{ opacity: 1, y: 0 }}
-              viewport={{ once: true }}
-              transition={{ delay: 0.2 }}
-            >
-              <h3>🔄 Easy Returns</h3>
+            <motion.div className="info-card info-card-highlighted" variants={itemVariants}>
+              <div className="info-card-icon"><RefreshCw size={32} color="var(--ifm-color-primary)" /></div>
+              <h3>Easy Returns</h3>
               <p>30-day return policy, no questions asked</p>
             </motion.div>
-            <motion.div
-              className="info-card info-card-highlighted"
-              initial={{ opacity: 0, y: 20 }}
-              whileInView={{ opacity: 1, y: 0 }}
-              viewport={{ once: true }}
-              transition={{ delay: 0.3 }}
-            >
-              <h3>🌱 Sustainable</h3>
+            <motion.div className="info-card info-card-highlighted" variants={itemVariants}>
+              <div className="info-card-icon"><Leaf size={32} color="var(--ifm-color-primary)" /></div>
+              <h3>Sustainable</h3>
               <p>Eco-friendly materials and ethical production</p>
             </motion.div>
-            <motion.div
-              className="info-card info-card-highlighted"
-              initial={{ opacity: 0, y: 20 }}
-              whileInView={{ opacity: 1, y: 0 }}
-              viewport={{ once: true }}
-              transition={{ delay: 0.4 }}
-            >
-              <h3>💯 Quality Guarantee</h3>
+            <motion.div className="info-card info-card-highlighted" variants={itemVariants}>
+              <div className="info-card-icon"><ShieldCheck size={32} color="var(--ifm-color-primary)" /></div>
+              <h3>Quality Guarantee</h3>
               <p>Premium materials, built to last</p>
             </motion.div>
-          </div>
+          </motion.div>
         </section>
       </div>
     </Layout>
diff --git a/src/pages/merch/merch.css b/src/pages/merch/merch.css
index a3ca1647..2676b27a 100644
--- a/src/pages/merch/merch.css
+++ b/src/pages/merch/merch.css
@@ -11,12 +11,8 @@
 .merch-hero {
   padding: 5rem 2rem 4rem;
   text-align: center;
-  background: linear-gradient(
-    135deg,
-    #667eea 0%,
-    #764ba2 50%,
-    #5b47d6 100%
-  );
+  background: var(--ifm-background-color);
+  border-bottom: 1px solid var(--ifm-color-emphasis-200);
   margin-bottom: 0;
   position: relative;
   overflow: hidden;
@@ -46,12 +42,12 @@
 .merch-hero-content {
   position: relative;
   z-index: 1;
-  max-width: 1400px;
+  max-width: 1100px;
   margin: 0 auto;
   display: flex;
-  justify-content: space-between;
+  justify-content: center;
   align-items: center;
-  gap: 3rem;
+  gap: 6rem;
 }
 
 .hero-left {
@@ -65,26 +61,66 @@
 
 .merch-hero .merch-hero-content .merch-hero-title {
   font-size: 3rem;
-  font-weight: 700;
+  font-weight: 800;
   margin-bottom: 1rem;
   line-height: 1.2;
-  color: #ffffff !important;
+  color: var(--ifm-font-color-base) !important;
   text-shadow: none !important;
   background: none !important;
-  -webkit-text-fill-color: #ffffff !important;
+  -webkit-text-fill-color: var(--ifm-font-color-base) !important;
   letter-spacing: -0.02em;
   text-align: left;
 }
 
 .merch-hero-description {
   font-size: 1.125rem;
-  color: rgba(255, 255, 255, 0.9);
-  margin-bottom: 0;
+  color: var(--ifm-font-color-secondary);
+  margin-bottom: 2rem;
   font-weight: 400;
   line-height: 1.6;
   text-align: left;
 }
 
+.hero-buttons {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.hero-button {
+  padding: 0.75rem 1.5rem;
+  border-radius: 8px;
+  font-weight: 600;
+  font-size: 1rem;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  border: none;
+}
+
+.hero-button-primary {
+  background: var(--ifm-color-primary);
+  color: white;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.hero-button-primary:hover {
+  background: var(--ifm-color-primary-dark);
+  transform: translateY(-2px);
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
+}
+
+.hero-button-secondary {
+  background: transparent;
+  color: var(--ifm-color-primary);
+  border: 2px solid var(--ifm-color-primary);
+}
+
+.hero-button-secondary:hover {
+  background: rgba(var(--ifm-color-primary-rgb), 0.1);
+  transform: translateY(-2px);
+}
+
 .merch-hero-stats {
   display: flex;
   flex-direction: column;
@@ -99,36 +135,37 @@
 }
 
 .stat-item-highlighted {
-  background: rgba(255, 255, 255, 0.1);
-  backdrop-filter: blur(8px);
-  border: 1px solid rgba(255, 255, 255, 0.2);
+  background: var(--ifm-color-emphasis-100);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid var(--ifm-color-emphasis-200);
   border-radius: 12px;
   padding: 1.25rem 1.75rem;
-  transition: all 0.3s ease;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   cursor: default;
 }
 
 .stat-item-highlighted:hover {
-  background: rgba(255, 255, 255, 0.15);
-  border-color: rgba(255, 255, 255, 0.3);
-  transform: translateY(-2px);
-  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
+  background: var(--ifm-color-emphasis-200);
+  border-color: var(--ifm-color-primary);
+  transform: translateY(-4px);
+  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.05);
 }
 
 .merch-hero .merch-hero-stats .stat-item .stat-number {
   font-size: 1.75rem;
-  font-weight: 600;
-  color: #ffffff !important;
+  font-weight: 700;
+  color: var(--ifm-font-color-base) !important;
   text-shadow: none !important;
   background: none !important;
-  -webkit-text-fill-color: #ffffff !important;
+  -webkit-text-fill-color: var(--ifm-color-primary) !important;
 }
 
 .stat-label {
   font-size: 0.875rem;
-  color: #ffffff !important;
+  color: var(--ifm-font-color-secondary) !important;
   font-weight: 600;
-  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
+  text-shadow: none;
   text-transform: uppercase;
   letter-spacing: 0.5px;
 }
@@ -173,39 +210,47 @@
 .info-card {
   padding: 2rem;
   background: var(--ifm-card-background-color);
-  border-radius: 12px;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  border-radius: 16px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
   transition:
-    transform 0.3s ease,
-    box-shadow 0.3s ease;
+    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+    box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   text-align: center;
 }
 
+.info-card-icon {
+  margin-bottom: 1rem;
+  display: flex;
+  justify-content: center;
+}
+
 .info-card-highlighted {
-  background: var(--ifm-card-background-color);
-  border: 1px solid rgba(0, 0, 0, 0.08);
+  background: rgba(255, 255, 255, 0.8);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border: 1px solid rgba(var(--ifm-color-primary), 0.1);
   cursor: default;
 }
 
 .info-card-highlighted:hover {
-  transform: translateY(-4px);
-  box-shadow: 0 8px 16px rgba(102, 126, 234, 0.12);
-  border-color: rgba(102, 126, 234, 0.3);
+  transform: translateY(-6px);
+  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
+  border-color: var(--ifm-color-primary-light);
 }
 
 .info-card-highlighted h3 {
   transition: color 0.2s ease;
-  color: #1f2937;
+  color: var(--ifm-color-primary-dark);
 }
 
 .info-card-highlighted:hover h3 {
-  color: #667eea;
+  color: var(--ifm-color-primary);
 }
 
 .info-card h3 {
   font-size: 1.5rem;
   margin-bottom: 0.5rem;
-  color: #5b47d6;
+  color: var(--ifm-color-primary-dark);
 }
 
 .info-card p {
@@ -219,25 +264,25 @@
   position: fixed;
   bottom: 2rem;
   right: 2rem;
-  width: 56px;
-  height: 56px;
+  width: 60px;
+  height: 60px;
   border-radius: 50%;
-  background: linear-gradient(135deg, #667eea 0%, #5b47d6 100%);
+  background: var(--ifm-color-primary);
   color: white;
   border: none;
-  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 999;
-  transition: all 0.2s ease;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .floating-cart-button:hover {
-  transform: scale(1.1);
-  background: linear-gradient(135deg, #818cf8 0%, #06b6d4 100%);
-  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
+  transform: scale(1.05) translateY(-4px);
+  background: var(--ifm-color-primary-dark);
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
 }
 
 .cart-badge {
@@ -328,40 +373,41 @@
 
 /* Dark mode adjustments */
 [data-theme="dark"] .merch-hero {
-  background: linear-gradient(
-    135deg,
-    #5b47d6 0%,
-    #4338ca 100%
-  ) !important;
+  background: var(--ifm-background-color) !important;
+  border-bottom-color: var(--dark-border);
 }
 
 [data-theme="dark"] .info-card {
-  background: var(--ifm-background-surface-color);
-  border: 1px solid var(--ifm-color-emphasis-200);
+  background: var(--dark-card-bg);
+  border: 1px solid var(--dark-border);
 }
 
 [data-theme="dark"] .info-card-highlighted {
-  background: #1a1a1a;
-  border: 2px solid #333333;
+  background: rgba(17, 24, 39, 0.6);
+  border: 1px solid rgba(255, 255, 255, 0.1);
 }
 
 [data-theme="dark"] .info-card-highlighted:hover {
-  background: #2a2a2a;
-  border-color: #ffffff;
-  box-shadow: 0 12px 24px rgba(255, 255, 255, 0.1);
+  background: rgba(15, 23, 42, 0.8);
+  border-color: var(--ifm-color-primary);
+  box-shadow: 0 12px 24px rgba(37, 194, 160, 0.15);
+}
+
+[data-theme="dark"] .info-card-highlighted h3 {
+  color: var(--dark-text-primary);
 }
 
 [data-theme="dark"] .info-card-highlighted:hover h3 {
-  color: #ffffff;
+  color: var(--ifm-color-primary-light);
 }
 
 [data-theme="dark"] .stat-item-highlighted {
-  background: rgba(255, 255, 255, 0.1);
-  border-color: rgba(255, 255, 255, 0.2);
+  background: var(--ifm-color-emphasis-100);
+  border-color: var(--ifm-color-emphasis-300);
 }
 
 [data-theme="dark"] .stat-item-highlighted:hover {
-  background: rgba(255, 255, 255, 0.2);
-  border-color: rgba(255, 255, 255, 0.4);
-  box-shadow: 0 8px 20px rgba(255, 255, 255, 0.15);
+  background: var(--ifm-color-emphasis-200);
+  border-color: var(--ifm-color-primary);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
 }