diff --git a/src/app/browse/page.tsx b/src/app/browse/page.tsx
index 8ede02d..ef89f38 100644
--- a/src/app/browse/page.tsx
+++ b/src/app/browse/page.tsx
@@ -1,39 +1,8 @@
-'use client';
+"use client";
 
-import { useState, useMemo } from 'react';
-import { ThemeProvider } from '@/components/theme/ThemeProvider';
-import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
-
-const CARS_DATABASE = [
-  { id: '1', brand: 'Toyota', name: 'Camry', year: 2023, price: '$28,500', type: 'Sedan', image: '/car-1.jpg' },
-  { id: '2', brand: 'Toyota', name: 'Corolla', year: 2023, price: '$22,000', type: 'Sedan', image: '/car-2.jpg' },
-  { id: '3', brand: 'Honda', name: 'Civic', year: 2023, price: '$24,000', type: 'Sedan', image: '/car-3.jpg' },
-  { id: '4', brand: 'Honda', name: 'CR-V', year: 2023, price: '$32,000', type: 'SUV', image: '/car-4.jpg' },
-  { id: '5', brand: 'Ford', name: 'Mustang', year: 2023, price: '$40,000', type: 'Sports', image: '/car-5.jpg' },
-  { id: '6', brand: 'Ford', name: 'F-150', year: 2023, price: '$52,000', type: 'Truck', image: '/car-6.jpg' },
-  { id: '7', brand: 'BMW', name: '3 Series', year: 2023, price: '$45,000', type: 'Sedan', image: '/car-7.jpg' },
-  { id: '8', brand: 'Mercedes-Benz', name: 'C-Class', year: 2023, price: '$48,000', type: 'Sedan', image: '/car-8.jpg' },
-];
-
-const YEARS = [2023, 2022, 2021, 2020];
-const TYPES = ['Sedan', 'SUV', 'Sports', 'Truck', 'Hatchback'];
-
-export default function BrowsePage() {
-  const [selectedBrand, setSelectedBrand] = useState<string | null>(null);
-  const [selectedYear, setSelectedYear] = useState<number | null>(null);
-  const [selectedType, setSelectedType] = useState<string | null>(null);
-
-  const brands = useMemo(() => [...new Set(CARS_DATABASE.map((car) => car.brand))], []);
-
-  const filteredCars = useMemo(() => {
-    return CARS_DATABASE.filter((car) => {
-      if (selectedBrand && car.brand !== selectedBrand) return false;
-      if (selectedYear && car.year !== selectedYear) return false;
-      if (selectedType && car.type !== selectedType) return false;
-      return true;
-    });
-  }, [selectedBrand, selectedYear, selectedType]);
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 
+const BrowsePage = () => {
   return (
     <ThemeProvider
       defaultButtonVariant="hover-magnetic"
@@ -45,156 +14,12 @@ export default function BrowsePage() {
       cardStyle="glass-elevated"
       primaryButtonStyle="gradient"
       secondaryButtonStyle="glass"
-      headingFontWeight="semibold"
+      headingFontWeight="normal"
     >
-      <NavbarStyleCentered
-        navItems={[
-          { name: 'Home', id: '/' },
-          { name: 'Browse', id: '/browse' },
-          { name: 'Brands', id: '/brands' },
-          { name: 'Compare', id: '/compare' },
-          { name: 'Contact', id: '#contact' },
-        ]}
-        button={{ text: 'Explore Now', href: '/browse' }}
-      />
-
-      <div className="min-h-screen py-20 px-4">
-        <div className="max-w-7xl mx-auto">
-          <h1 className="text-5xl font-bold mb-12 text-center">Browse Cars</h1>
-
-          {/* Filters */}
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12 bg-card rounded-lg p-6 border border-foreground/10">
-            {/* Brand Filter */}
-            <div>
-              <h3 className="font-semibold mb-3">Filter by Brand</h3>
-              <div className="space-y-2 max-h-48 overflow-y-auto">
-                <button
-                  onClick={() => setSelectedBrand(null)}
-                  className={`block w-full text-left px-3 py-2 rounded transition ${
-                    selectedBrand === null
-                      ? 'bg-primary-cta text-white'
-                      : 'hover:bg-foreground/10'
-                  }`}
-                >
-                  All Brands
-                </button>
-                {brands.map((brand) => (
-                  <button
-                    key={brand}
-                    onClick={() => setSelectedBrand(brand)}
-                    className={`block w-full text-left px-3 py-2 rounded transition ${
-                      selectedBrand === brand
-                        ? 'bg-primary-cta text-white'
-                        : 'hover:bg-foreground/10'
-                    }`}
-                  >
-                    {brand}
-                  </button>
-                ))}
-              </div>
-            </div>
-
-            {/* Year Filter */}
-            <div>
-              <h3 className="font-semibold mb-3">Filter by Year</h3>
-              <div className="space-y-2">
-                <button
-                  onClick={() => setSelectedYear(null)}
-                  className={`block w-full text-left px-3 py-2 rounded transition ${
-                    selectedYear === null
-                      ? 'bg-primary-cta text-white'
-                      : 'hover:bg-foreground/10'
-                  }`}
-                >
-                  All Years
-                </button>
-                {YEARS.map((year) => (
-                  <button
-                    key={year}
-                    onClick={() => setSelectedYear(year)}
-                    className={`block w-full text-left px-3 py-2 rounded transition ${
-                      selectedYear === year
-                        ? 'bg-primary-cta text-white'
-                        : 'hover:bg-foreground/10'
-                    }`}
-                  >
-                    {year}
-                  </button>
-                ))}
-              </div>
-            </div>
-
-            {/* Type Filter */}
-            <div>
-              <h3 className="font-semibold mb-3">Filter by Type</h3>
-              <div className="space-y-2 max-h-48 overflow-y-auto">
-                <button
-                  onClick={() => setSelectedType(null)}
-                  className={`block w-full text-left px-3 py-2 rounded transition ${
-                    selectedType === null
-                      ? 'bg-primary-cta text-white'
-                      : 'hover:bg-foreground/10'
-                  }`}
-                >
-                  All Types
-                </button>
-                {TYPES.map((type) => (
-                  <button
-                    key={type}
-                    onClick={() => setSelectedType(type)}
-                    className={`block w-full text-left px-3 py-2 rounded transition ${
-                      selectedType === type
-                        ? 'bg-primary-cta text-white'
-                        : 'hover:bg-foreground/10'
-                    }`}
-                  >
-                    {type}
-                  </button>
-                ))}
-              </div>
-            </div>
-          </div>
-
-          {/* Cars Grid */}
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-            {filteredCars.length > 0 ? (
-              filteredCars.map((car) => (
-                <div key={car.id} className="bg-card rounded-lg overflow-hidden border border-foreground/10 hover:shadow-lg transition">
-                  <div className="h-48 bg-foreground/10 flex items-center justify-center">
-                    <span className="text-foreground/50">Car Image</span>
-                  </div>
-                  <div className="p-4">
-                    <div className="flex justify-between items-start mb-2">
-                      <div>
-                        <h3 className="font-bold text-lg">{car.brand}</h3>
-                        <p className="text-foreground/70">{car.name}</p>
-                      </div>
-                      <span className="px-3 py-1 bg-primary-cta/10 text-primary-cta rounded text-sm">{car.type}</span>
-                    </div>
-                    <div className="flex justify-between items-center mt-4 pt-4 border-t border-foreground/10">
-                      <div>
-                        <p className="text-foreground/70 text-sm">Year</p>
-                        <p className="font-semibold">{car.year}</p>
-                      </div>
-                      <div className="text-right">
-                        <p className="text-foreground/70 text-sm">Starting Price</p>
-                        <p className="font-semibold">{car.price}</p>
-                      </div>
-                    </div>
-                    <button className="w-full mt-4 px-4 py-2 bg-primary-cta text-white rounded hover:opacity-90 transition">
-                      View Details
-                    </button>
-                  </div>
-                </div>
-              ))
-            ) : (
-              <div className="col-span-full text-center py-12">
-                <p className="text-foreground/70 text-lg">No cars found matching your filters</p>
-              </div>
-            )}
-          </div>
-        </div>
-      </div>
+      <div id="nav" data-section="nav" />
+      <div id="browse" data-section="browse" />
     </ThemeProvider>
   );
-}
+};
+
+export default BrowsePage;