diff --git a/src/app/products/page.tsx b/src/app/products/page.tsx
new file mode 100644
index 0000000..de46bf8
--- /dev/null
+++ b/src/app/products/page.tsx
@@ -0,0 +1,209 @@
+"use client";
+
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import FooterCard from '@/components/sections/footer/FooterCard';
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import { Mail, MapPin, Phone } from 'lucide-react';
+import { useState, useMemo } from 'react';
+
+const CATEGORIES = [
+  "Beer",  "Craft Beer",  "Wine",  "Champagne",  "Gin",  "Vodka",  "Rum",  "Whisky",  "Tequila",  "Liqueurs",  "RTDs",  "Premixed Drinks",  "Low Alcohol",  "Mixers",  "Specials"];
+
+const SAMPLE_PRODUCTS = [
+  { id: "1", name: "Corona Extra", category: "Beer", price: "$3.99", rating: 4.5, reviewCount: "256" },
+  { id: "2", name: "Heineken Premium", category: "Beer", price: "$4.49", rating: 4.3, reviewCount: "189" },
+  { id: "3", name: "Tuatara Pale Ale", category: "Craft Beer", price: "$7.99", rating: 4.8, reviewCount: "342" },
+  { id: "4", name: "Hobbiton Brewing IPA", category: "Craft Beer", price: "$8.49", rating: 4.7, reviewCount: "218" },
+  { id: "5", name: "Marlborough Sauvignon Blanc", category: "Wine", price: "$18.99", rating: 4.6, reviewCount: "512" },
+  { id: "6", name: "Penfolds Shiraz", category: "Wine", price: "$22.99", rating: 4.5, reviewCount: "387" },
+  { id: "7", name: "Champagne Moët", category: "Champagne", price: "$54.99", rating: 4.9, reviewCount: "421" },
+  { id: "8", name: "Gordon's Gin", category: "Gin", price: "$29.99", rating: 4.4, reviewCount: "267" },
+  { id: "9", name: "Tanqueray Gin", category: "Gin", price: "$32.99", rating: 4.5, reviewCount: "198" },
+  { id: "10", name: "Vodka Smirnoff", category: "Vodka", price: "$24.99", rating: 4.2, reviewCount: "310" },
+  { id: "11", name: "Bacardi Rum", category: "Rum", price: "$28.99", rating: 4.3, reviewCount: "276" },
+  { id: "12", name: "Johnnie Walker Red", category: "Whisky", price: "$35.99", rating: 4.4, reviewCount: "445" },
+  { id: "13", name: "Jack Daniel's", category: "Whisky", price: "$42.99", rating: 4.6, reviewCount: "678" },
+  { id: "14", name: "José Cuervo Tequila", category: "Tequila", price: "$26.99", rating: 4.2, reviewCount: "156" },
+  { id: "15", name: "Kahlúa Liqueur", category: "Liqueurs", price: "$19.99", rating: 4.5, reviewCount: "203" },
+  { id: "16", name: "Baileys Irish Cream", category: "Liqueurs", price: "$22.99", rating: 4.7, reviewCount: "534" },
+  { id: "17", name: "Pre-mixed Mojito", category: "RTDs", price: "$5.99", rating: 4.1, reviewCount: "89" },
+  { id: "18", name: "Ready-made Margarita", category: "Premixed Drinks", price: "$6.49", rating: 4.2, reviewCount: "112" },
+  { id: "19", name: "Skinny Lemonade", category: "Low Alcohol", price: "$4.99", rating: 4.3, reviewCount: "145" },
+  { id: "20", name: "Fever-Tree Tonic", category: "Mixers", price: "$3.99", rating: 4.6, reviewCount: "267" },
+];
+
+export default function ProductsPage() {
+  const [selectedCategory, setSelectedCategory] = useState("All");
+  const [searchTerm, setSearchTerm] = useState("");
+
+  const filteredProducts = useMemo(() => {
+    return SAMPLE_PRODUCTS.filter(product => {
+      const matchesCategory = selectedCategory === "All" || product.category === selectedCategory;
+      const matchesSearch = product.name.toLowerCase().includes(searchTerm.toLowerCase());
+      return matchesCategory && matchesSearch;
+    });
+  }, [selectedCategory, searchTerm]);
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="elastic-effect"
+      defaultTextAnimation="background-highlight"
+      borderRadius="pill"
+      contentWidth="mediumLarge"
+      sizing="largeSmallSizeMediumTitles"
+      background="grid"
+      cardStyle="layered-gradient"
+      primaryButtonStyle="primary-glow"
+      secondaryButtonStyle="layered"
+      headingFontWeight="bold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingInline
+          brandName="Super Liquor Paihia"
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Shop", id: "/products" },
+            { name: "Specials", id: "/#specials" },
+            { name: "Selection", id: "/#selection" },
+            { name: "Contact", id: "/#contact" },
+          ]}
+          button={{
+            text: "Call Now",            href: "tel:0994558333"
+          }}
+          animateOnLoad={true}
+        />
+      </div>
+
+      <main className="min-h-screen bg-background py-20">
+        <div className="w-full max-w-7xl mx-auto px-4 md:px-6">
+          {/* Page Header */}
+          <div className="mb-12 text-center">
+            <h1 className="text-4xl md:text-5xl font-bold text-foreground mb-3">
+              Product Catalog
+            </h1>
+            <p className="text-lg text-foreground/80">
+              Discover our complete selection of premium beverages
+            </p>
+          </div>
+
+          {/* Search Bar */}
+          <div className="mb-8">
+            <input
+              type="text"
+              placeholder="Search products..."
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+              className="w-full px-4 py-3 rounded-lg bg-card border border-accent/20 text-foreground placeholder-foreground/50 focus:outline-none focus:border-accent"
+            />
+          </div>
+
+          {/* Categories Filter */}
+          <div className="mb-12 flex flex-wrap gap-3">
+            <button
+              onClick={() => setSelectedCategory("All")}
+              className={`px-4 py-2 rounded-full font-medium transition-all ${
+                selectedCategory === "All"
+                  ? "bg-primary-cta text-background"
+                  : "bg-card text-foreground border border-accent/20 hover:border-accent"
+              }`}
+            >
+              All Categories
+            </button>
+            {CATEGORIES.map((category) => (
+              <button
+                key={category}
+                onClick={() => setSelectedCategory(category)}
+                className={`px-4 py-2 rounded-full font-medium transition-all ${
+                  selectedCategory === category
+                    ? "bg-primary-cta text-background"
+                    : "bg-card text-foreground border border-accent/20 hover:border-accent"
+                }`}
+              >
+                {category}
+              </button>
+            ))}
+          </div>
+
+          {/* Products Grid */}
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+            {filteredProducts.map((product) => (
+              <div
+                key={product.id}
+                className="bg-card rounded-lg overflow-hidden border border-accent/10 hover:border-accent/30 transition-all hover:shadow-lg"
+              >
+                <div className="aspect-square bg-gradient-to-br from-accent to-background-accent flex items-center justify-center">
+                  <div className="text-center text-foreground/60">
+                    <p className="text-sm font-medium mb-1">Product Image</p>
+                    <p className="text-xs text-foreground/40">{product.category}</p>
+                  </div>
+                </div>
+                <div className="p-4">
+                  <p className="text-xs text-accent font-semibold mb-1 uppercase">
+                    {product.category}
+                  </p>
+                  <h3 className="text-lg font-semibold text-foreground mb-2 line-clamp-2">
+                    {product.name}
+                  </h3>
+                  <div className="flex items-center justify-between mb-3">
+                    <span className="text-2xl font-bold text-primary-cta">
+                      {product.price}
+                    </span>
+                    <div className="flex items-center gap-1">
+                      <span className="text-sm font-medium text-foreground">
+                        {product.rating}
+                      </span>
+                      <span className="text-sm text-foreground/60">★</span>
+                    </div>
+                  </div>
+                  <p className="text-xs text-foreground/60 mb-3">
+                    {product.reviewCount} reviews
+                  </p>
+                  <button className="w-full py-2 bg-primary-cta text-background rounded-lg font-medium hover:opacity-90 transition-opacity">
+                    View Details
+                  </button>
+                </div>
+              </div>
+            ))}
+          </div>
+
+          {/* No Results */}
+          {filteredProducts.length === 0 && (
+            <div className="text-center py-12">
+              <p className="text-lg text-foreground/60">
+                No products found matching your search.
+              </p>
+            </div>
+          )}
+
+          {/* Results Count */}
+          <div className="mt-8 text-center text-foreground/60">
+            <p className="text-sm">
+              Showing {filteredProducts.length} of {SAMPLE_PRODUCTS.length} products
+            </p>
+          </div>
+        </div>
+      </main>
+
+      <div id="footer" data-section="footer">
+        <FooterCard
+          logoText="Super Liquor Paihia"
+          copyrightText="© 2025 Super Liquor Paihia | 14 Marsden Road, Paihia 0200 | Ph: 09 945 8333"
+          socialLinks={[
+            {
+              icon: Phone,
+              href: "tel:0994558333",              ariaLabel: "Call us"
+            },
+            {
+              icon: MapPin,
+              href: "https://maps.google.com/?q=14+Marsden+Road+Paihia+0200+New+Zealand",              ariaLabel: "Get directions"
+            },
+            {
+              icon: Mail,
+              href: "mailto:info@superliquorpaihia.co.nz",              ariaLabel: "Send email"
+            },
+          ]}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}