diff --git a/src/app/brands/page.tsx b/src/app/brands/page.tsx
new file mode 100644
index 0000000..2292035
--- /dev/null
+++ b/src/app/brands/page.tsx
@@ -0,0 +1,91 @@
+'use client';
+
+import { ThemeProvider } from '@/components/theme/ThemeProvider';
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import HeroOverlay from '@/components/sections/hero/HeroOverlay';
+import ProductCardOne from '@/components/sections/product/ProductCardOne';
+import BlurBottomBackground from '@/components/background/BlurBottomBackground';
+import { useState } from 'react';
+
+const navItems = [
+  { name: 'Home', id: '/' },
+  { name: 'Brands', id: '/brands' },
+  { name: 'Search', id: '/search' },
+  { name: 'Browse', id: '/browse' },
+];
+
+const brands = [
+  { id: '1', name: 'Premium Essentials Co', price: 'Featured', imageSrc: '/placeholders/placeholder.jpg', imageAlt: 'Premium Essentials Co' },
+  { id: '2', name: 'Luxury Design Studio', price: 'Featured', imageSrc: '/placeholders/placeholder.jpg', imageAlt: 'Luxury Design Studio' },
+  { id: '3', name: 'TechFlow Innovations', price: 'Featured', imageSrc: '/placeholders/placeholder.jpg', imageAlt: 'TechFlow Innovations' },
+  { id: '4', name: 'Fashion Forward Collective', price: 'Featured', imageSrc: '/placeholders/placeholder.jpg', imageAlt: 'Fashion Forward Collective' },
+  { id: '5', name: 'Eco Conscious Brand', price: 'Featured', imageSrc: '/placeholders/placeholder.jpg', imageAlt: 'Eco Conscious Brand' },
+  { id: '6', name: 'Artisan Marketplace', price: 'Featured', imageSrc: '/placeholders/placeholder.jpg', imageAlt: 'Artisan Marketplace' },
+];
+
+export default function BrandsPage() {
+  const [favorites, setFavorites] = useState<Set<string>>(new Set());
+
+  const handleFavorite = (id: string) => {
+    const newFavorites = new Set(favorites);
+    if (newFavorites.has(id)) {
+      newFavorites.delete(id);
+    } else {
+      newFavorites.add(id);
+    }
+    setFavorites(newFavorites);
+  };
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="hover-magnetic"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="mediumLarge"
+      background="circleGradient"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="bold"
+    >
+      <NavbarLayoutFloatingInline
+        navItems={navItems}
+        brandName="Webild"
+        button={{ text: 'Get Started', href: 'https://example.com' }}
+        animateOnLoad={true}
+      />
+
+      <div id="brands-hero" data-section="brands-hero">
+        <HeroOverlay
+          title="Explore Our Brand Directory"
+          description="Discover curated brands offering premium products and exceptional experiences."
+          tag="Brand Directory"
+          textPosition="center"
+          showBlur={true}
+          buttons={[{ text: 'Back to Home', href: '/' }]}
+        />
+      </div>
+
+      <div id="brands-grid" data-section="brands-grid" className="py-20">
+        <ProductCardOne
+          products={brands.map((brand) => ({
+            ...brand,
+            isFavorited: favorites.has(brand.id),
+            onFavorite: () => handleFavorite(brand.id),
+            onProductClick: () => console.log(`Clicked brand: ${brand.name}`),
+          }))}
+          title="All Brands"
+          description="Browse our complete collection of partner brands"
+          tag="Brands"
+          gridVariant="three-columns-all-equal-width"
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <BlurBottomBackground />
+    </ThemeProvider>
+  );
+}