diff --git a/src/pages/all-products.astro b/src/pages/all-products.astro
index a342a28..f8e1359 100644
--- a/src/pages/all-products.astro
+++ b/src/pages/all-products.astro
@@ -2,40 +2,54 @@
 import BaseLayout from '@/layouts/BaseLayout.astro';
 
 const products = [
+  // ท่อพีพีอาร์
   { name: "ท่อ PPR ไทยพีพีอาร์", href: "/ท่อ-ppr-thai-ppr", image: "/images/products-cropped/ppr-pipe_000C.jpg", category: "ท่อพีพีอาร์" },
   { name: "ท่อ PPR ตราช้าง", href: "/ท่อ-ppr-scg", image: "/images/products-cropped/ppr-scg.jpg", category: "ท่อพีพีอาร์" },
-  { name: "ท่อ HDPE", href: "/ท่อ-hdpe", image: "/images/products-cropped/hdpe001.png", category: "ท่อพีพีอาร์" },
+  { name: "ท่อ HDPE", href: "/ท่อ-hdpe", image: "/images/products-cropped/hdpe001.jpg", category: "ท่อพีพีอาร์" },
   { name: "ท่อ UPVC", href: "/ท่อ-upvc", image: "/images/products-cropped/upvc-pipe_000C.jpg", category: "ท่อ UPVC" },
-  { name: "ท่อ Syler", href: "/ท่อ-syler", image: "/images/products-cropped/syler-pipe-cold-water.jpg", category: "ท่อ UPVC" },
-  { name: "ท่อ XYLENT", href: "/ท่อ-xy-lent", image: "/images/products-cropped/xylent.svg", category: "ท่อ UPVC" },
-  { name: "เครื่องเชื่อม HDPE", href: "/เครื่องเชื่อม-hdpe", image: "/images/HDPE/welding.svg", category: "เครื่องเชื่อม" },
-  { name: "เครื่องเชื่อม PPR", href: "/เครื่องเชื่อม-ppr", image: "/images/products-misc/ppr-welding-machine-main.jpg", category: "เครื่องเชื่อม" },
+  { name: "ท่อ Syler", href: "/ท่อ-syler", image: "/images/products-misc/SYLER01.jpg", category: "ท่อ UPVC" },
+  { name: "ท่อ XYLENT", href: "/ท่อ-xy-lent", image: "/images/products-cropped/XYLENT_001.png", category: "ท่อ UPVC" },
+  
+  // เครื่องเชื่อม
+  { name: "เครื่องเชื่อม HDPE", href: "/เครื่องเชื่อม-hdpe", image: "/images/products-misc/HDPE2.jpg", category: "เครื่องเชื่อม" },
+  { name: "เครื่องเชื่อม PPR", href: "/เครื่องเชื่อม-ppr", image: "/images/products-misc/ppr0001.jpg", category: "เครื่องเชื่อม" },
   { name: "Pipe Coupling", href: "/pipe-coupling", image: "/images/pipe-coupling/BG-SMC02.png", category: "เครื่องเชื่อม" },
   { name: "เม็กกรู๊ฟ คับปลิ้ง", href: "/เม็กกรู๊ฟ-คับปลิ้ง", image: "/images/products-misc/MECH_001.jpg", category: "เครื่องเชื่อม" },
+  
+  // วาล์ว
   { name: "วาล์ว Valve", href: "/วาล์ว-valve", image: "/images/products-cropped/valve_000C.jpg", category: "วาล์ว" },
   { name: "DURGO วาล์วเติมอากาศ", href: "/durgo-avvs", image: "/images/products-cropped/durgo_000C.jpg", category: "วาล์ว" },
+  
+  // ปั๊มและระบบน้ำ
   { name: "ปั๊มน้ำ Water Pump", href: "/water-pump", image: "/images/products-cropped/water-pump_000C.jpg", category: "ปั๊มและระบบน้ำ" },
   { name: "ระบบกรองน้ำ", href: "/water-treatment", image: "/images/products-cropped/water-treatment_000C.jpg", category: "ปั๊มและระบบน้ำ" },
+  
+  // อุปกรณ์ปรับอากาศ
   { name: "อุปกรณ์ปรับอากาศ", href: "/อุปกรณ์ปรับอากาศ", image: "/images/products-raw/ball-jet/main-ball-jet.jpg", category: "อุปกรณ์ปรับอากาศ" },
   { name: "กริลแอร์", href: "/grilles", image: "/images/products-cropped/grilles_000C.jpg", category: "อุปกรณ์ปรับอากาศ" },
+  
+  // อุปกรณ์ดับเพลิง
   { name: "อุปกรณ์ดับเพลิง", href: "/อุปกรณ์ดับเพลิง", image: "/images/products-cropped/extinguishers_000C.jpg", category: "อุปกรณ์ดับเพลิง" },
+  
+  // ฉนวนและรั้ว
   { name: "Realflex", href: "/realflex", image: "/images/products-cropped/realflex_000C.jpg", category: "ฉนวนและรั้ว" },
-  { name: "Armaflex", href: "/armflex", image: "/images/armflex/armflex-product.jpg", category: "ฉนวนและรั้ว" },
-      { name: "Aeroflex", href: "/aeroflex", image: "/images/aeroflex/aeroflex-product.jpg", category: "ฉนวนและรั้ว" },
-      { name: "Maxflex", href: "/maxflex", image: "/images/maxflex/maxflex-product.jpg", category: "ฉนวนและรั้ว" },
+  { name: "Armaflex", href: "/armflex", image: "/images/armflex/armaflex-sheet-roll.jpg", category: "ฉนวนและรั้ว" },
+  { name: "Aeroflex", href: "/aeroflex", image: "/images/aeroflex/aerocel-d-al-real.jpg", category: "ฉนวนและรั้ว" },
+  { name: "Maxflex", href: "/maxflex", image: "/images/maxflex/maxflex-fsk-foil.jpg", category: "ฉนวนและรั้ว" },
   { name: "เทอร์โมเบรค Thermobreak", href: "/เทอร์โมเบรค-thermobreak", image: "/images/thermobreak/thermobreak-solarblock.png", category: "ฉนวนและรั้ว" },
-  { name: "รั้วเทวดา", href: "/รั้วเทวดา", image: "/images/products-raw/tevada/TEVADA_001-987x1024.png", category: "ฉนวนและรั้ว" },
+  { name: "รั้วเทวดา", href: "/รั้วเทวดา", image: "/images/tevada/LINE_ALBUM_รั้วเทวดา_260522_1.jpg", category: "ฉนวนและรั้ว" },
   { name: "ระบบรั้วไวน์แมน", href: "/ระบบรั้วไวน์แมน", image: "/images/products-cropped/vineman_000C.jpg", category: "ฉนวนและรั้ว" },
 ];
 
 const categories = [
-  { name: "ท่อพีพีอาร์", count: 2 },
-  { name: "ท่อ UPVC", count: 2 },
-  { name: "เครื่องเชื่อม", count: 4 },
-  { name: "วาล์ว", count: 2 },
-  { name: "ปั๊มและระบบน้ำ", count: 2 },
-  { name: "อุปกรณ์ปรับอากาศ", count: 2 },
-  { name: "ฉนวนและรั้ว", count: 6 },
+  { name: "ท่อพีพีอาร์", id: "ppr", count: 3 },
+  { name: "ท่อ UPVC", id: "upvc", count: 3 },
+  { name: "เครื่องเชื่อม", id: "welding", count: 4 },
+  { name: "วาล์ว", id: "valve", count: 2 },
+  { name: "ปั๊มและระบบน้ำ", id: "pump", count: 2 },
+  { name: "อุปกรณ์ปรับอากาศ", id: "ac", count: 2 },
+  { name: "อุปกรณ์ดับเพลิง", id: "fire", count: 1 },
+  { name: "ฉนวนและรั้ว", id: "fence", count: 7 },
 ];
 ---
 
@@ -45,34 +59,9 @@ const categories = [
     <!-- Animated Background -->
     <div class="absolute inset-0 overflow-hidden pointer-events-none">
       <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-gradient-to-br from-primary-400/30 via-primary-500/15 to-transparent rounded-full blur-[100px] animate-mesh-1"></div>
-      
-      <!-- Floating Particles -->
       <div class="absolute top-1/4 left-1/4 w-2 h-2 bg-white/30 rounded-full animate-float"></div>
       <div class="absolute top-1/3 right-1/4 w-3 h-3 bg-primary-300/20 rounded-full animate-float-delayed-1"></div>
       <div class="absolute top-2/3 left-1/3 w-2 h-2 bg-primary-200/20 rounded-full animate-float-delayed-2"></div>
-      <div class="absolute top-1/2 right-1/3 w-4 h-4 bg-white/15 rounded-full animate-float"></div>
-      <div class="absolute bottom-1/4 left-2/3 w-3 h-3 bg-primary-400/15 rounded-full animate-float-delayed-3"></div>
-      
-      <!-- Water-inspired Waves -->
-      <svg class="absolute bottom-0 left-0 w-full h-[250px] opacity-20" viewBox="0 0 1440 250" preserveAspectRatio="none">
-        <path d="M0,150 Q360,50 720,150 T1440,150 L1440,250 L0,250 Z" fill="none" stroke="url(#water-gradient-hero)" stroke-width="2">
-          <animate attributeName="d" dur="10s" repeatCount="indefinite" values="M0,150 Q360,50 720,150 T1440,150 L1440,250 L0,250 Z;M0,180 Q360,80 720,180 T1440,180 L1440,250 L0,250 Z;M0,150 Q360,50 720,150 T1440,150 L1440,250 L0,250 Z"/>
-        </path>
-        <defs>
-          <linearGradient id="water-gradient-hero" x1="0%" y1="0%" x2="100%" y2="0%">
-            <stop offset="0%" stop-color="#40916c"/>
-            <stop offset="50%" stop-color="#74c69d"/>
-            <stop offset="100%" stop-color="#40916c"/>
-          </linearGradient>
-        </defs>
-      </svg>
-      
-      <!-- Second Wave Layer -->
-      <svg class="absolute bottom-0 left-0 w-full h-[200px] opacity-10" viewBox="0 0 1440 200" preserveAspectRatio="none">
-        <path d="M0,100 Q240,200 480,100 T960,100 T1440,100 L1440,200 L0,200 Z" fill="none" stroke="rgba(255,255,255,0.3)" stroke-width="1">
-          <animate attributeName="d" dur="15s" repeatCount="indefinite" values="M0,100 Q240,200 480,100 T960,100 T1440,100 L1440,200 L0,200 Z;M0,120 Q240,20 480,120 T960,120 T1440,120 L1440,200 L0,200 Z;M0,100 Q240,200 480,100 T960,100 T1440,100 L1440,200 L0,200 Z"/>
-        </path>
-      </svg>
     </div>
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
       <h1 class="text-4xl lg:text-5xl font-bold mb-4">สินค้าทั้งหมด</h1>
@@ -80,15 +69,17 @@ const categories = [
     </div>
   </section>
 
-  <!-- Categories -->
-  <section class="py-8 bg-white border-b border-neutral-200">
+  <!-- Filter Buttons -->
+  <section class="py-8 bg-white border-b border-neutral-200 sticky top-16 z-30">
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
-      <div class="flex flex-wrap gap-3">
-        <a href="#all" class="px-4 py-2 bg-primary-600 text-white rounded-full text-sm font-medium">ทั้งหมด ({products.length})</a>
+      <div class="flex flex-wrap gap-3" id="filter-buttons">
+        <button data-filter="all" class="filter-btn active px-4 py-2 bg-primary-600 text-white rounded-full text-sm font-medium transition-colors">
+          ทั้งหมด ({products.length})
+        </button>
         {categories.map(cat => (
-          <a href={`#${cat.name}`} class="px-4 py-2 bg-neutral-100 text-neutral-700 hover:bg-primary-100 hover:text-primary-700 rounded-full text-sm font-medium transition-colors">
+          <button data-filter={cat.id} class="filter-btn px-4 py-2 bg-neutral-100 text-neutral-700 hover:bg-primary-100 hover:text-primary-700 rounded-full text-sm font-medium transition-colors">
             {cat.name} ({cat.count})
-          </a>
+          </button>
         ))}
       </div>
     </div>
@@ -97,14 +88,27 @@ const categories = [
   <!-- Products Grid -->
   <section class="py-16 lg:py-24 bg-neutral-50">
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
-      <div class="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 stagger-container">
+      <div class="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6" id="products-grid">
         {products.map(product => (
-          <a href={product.href} class="group bg-white rounded-xl overflow-hidden border border-neutral-200 hover:border-primary-300 hover:shadow-lg transition-all">
-            <div class="aspect-square img-hover bg-neutral-100">
+          <a 
+            href={product.href} 
+            class="product-card group bg-white rounded-xl overflow-hidden border border-neutral-200 hover:border-primary-300 hover:shadow-lg transition-all"
+            data-category={
+              product.category === "ท่อพีพีอาร์" ? "ppr" :
+              product.category === "ท่อ UPVC" ? "upvc" :
+              product.category === "เครื่องเชื่อม" ? "welding" :
+              product.category === "วาล์ว" ? "valve" :
+              product.category === "ปั๊มและระบบน้ำ" ? "pump" :
+              product.category === "อุปกรณ์ปรับอากาศ" ? "ac" :
+              product.category === "อุปกรณ์ดับเพลิง" ? "fire" :
+              "fence"
+            }
+          >
+            <div class="aspect-square img-hover bg-neutral-100 overflow-hidden">
               <img
                 src={product.image}
                 alt={product.name}
-                class="w-full h-full object-cover"
+                class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
                 loading="lazy"
               />
             </div>
@@ -129,4 +133,46 @@ const categories = [
       </div>
     </div>
   </section>
-</BaseLayout>
+
+  <script>
+    // Filter functionality
+    document.addEventListener('DOMContentLoaded', () => {
+      const filterBtns = document.querySelectorAll('.filter-btn');
+      const productCards = document.querySelectorAll('.product-card');
+      
+      filterBtns.forEach(btn => {
+        btn.addEventListener('click', () => {
+          const filter = btn.getAttribute('data-filter');
+          
+          // Update active state
+          filterBtns.forEach(b => {
+            b.classList.remove('bg-primary-600', 'text-white', 'active');
+            b.classList.add('bg-neutral-100', 'text-neutral-700');
+          });
+          btn.classList.add('bg-primary-600', 'text-white', 'active');
+          btn.classList.remove('bg-neutral-100', 'text-neutral-700');
+          
+          // Filter products
+          productCards.forEach(card => {
+            if (filter === 'all' || card.getAttribute('data-category') === filter) {
+              card.style.display = 'block';
+              card.classList.add('animate-fade-in');
+            } else {
+              card.style.display = 'none';
+            }
+          });
+        });
+      });
+    });
+  </script>
+
+  <style>
+    .animate-fade-in {
+      animation: fadeIn 0.3s ease-out;
+    }
+    @keyframes fadeIn {
+      from { opacity: 0; transform: translateY(10px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+  </style>
+</BaseLayout>
\ No newline at end of file