diff --git a/src/app/brands/[brand]/page.tsx b/src/app/brands/[brand]/page.tsx
index b524dcb..de9e8fc 100644
--- a/src/app/brands/[brand]/page.tsx
+++ b/src/app/brands/[brand]/page.tsx
@@ -1,140 +1,179 @@
-'use client';
+"use client";
 
-import { useParams } from 'next/navigation';
-import { ThemeProvider } from '@/components/theme/ThemeProvider';
-import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
-import Link from 'next/link';
+import { useParams } from "next/navigation";
+import { MapPin, Award, Users, TrendingUp } from "lucide-react";
 
-const BRAND_DATA: Record<string, any> = {
-  toyota: {
-    name: 'Toyota',
-    description: 'Renowned for reliability and fuel efficiency',
+interface BrandModel {
+  id: string;
+  name: string;
+  year: string;
+  price: string;
+  image: string;
+}
+
+interface BrandInfo {
+  name: string;
+  founded: string;
+  headquarters: string;
+  description: string;
+  history: string;
+  stats: {
+    yearsInBusiness: string;
+    vehiclesSold: string;
+    countries: string;
+    awards: string;
+  };
+  models: BrandModel[];
+}
+
+const mockBrandData: { [key: string]: BrandInfo } = {
+  tesla: {
+    name: "Tesla",    founded: "2003",    headquarters: "Palo Alto, California",    description: "Leading electric vehicle manufacturer revolutionizing sustainable transportation.",    history:
+      "Tesla was founded in 2003 by Martin Eberhard and Marc Tarpenning. Named after inventor Nikola Tesla, the company was established to prove that electric vehicles can be both high-performance and desirable. In 2004, Elon Musk joined as chairman and led Series A funding. Tesla has since become the world's most valuable automaker, pioneering the mass production of electric vehicles and accelerating the global transition to sustainable energy.",    stats: {
+      yearsInBusiness: "21+",      vehiclesSold: "3.5M+",      countries: "100+",      awards: "150+"},
     models: [
-      { name: 'Camry', year: 2023, type: 'Sedan', price: '$28,500' },
-      { name: 'Corolla', year: 2023, type: 'Sedan', price: '$22,000' },
-      { name: 'RAV4', year: 2023, type: 'SUV', price: '$32,000' },
-    ]
-  },
-  honda: {
-    name: 'Honda',
-    description: 'Innovation and performance combined',
-    models: [
-      { name: 'Civic', year: 2023, type: 'Sedan', price: '$24,000' },
-      { name: 'CR-V', year: 2023, type: 'SUV', price: '$32,000' },
-      { name: 'Accord', year: 2023, type: 'Sedan', price: '$32,000' },
-    ]
-  },
-  ford: {
-    name: 'Ford',
-    description: 'Trucks and SUVs for every adventure',
-    models: [
-      { name: 'F-150', year: 2023, type: 'Truck', price: '$52,000' },
-      { name: 'Mustang', year: 2023, type: 'Sports', price: '$40,000' },
-      { name: 'Explorer', year: 2023, type: 'SUV', price: '$36,000' },
-    ]
+      { id: "1", name: "Model S", year: "2024", price: "$89,990", image: "https://images.unsplash.com/photo-1560958089-b8a63dd8b50b?w=600" },
+      { id: "2", name: "Model 3", year: "2024", price: "$43,990", image: "https://images.unsplash.com/photo-1516814050195-3a03d82e059d?w=600" },
+      { id: "3", name: "Model X", year: "2024", price: "$104,990", image: "https://images.unsplash.com/photo-1552820728-8ac41f1ce891?w=600" },
+      { id: "4", name: "Model Y", year: "2024", price: "$52,990", image: "https://images.unsplash.com/photo-1560958089-fcbb3cce6c55?w=600" },
+    ],
   },
   bmw: {
-    name: 'BMW',
-    description: 'Luxury and performance redefined',
+    name: "BMW",    founded: "1916",    headquarters: "Munich, Germany",    description: "Premium German automaker known for innovative design and performance.",    history:
+      "BMW (Bayerische Motoren Werke AG) was founded in 1916 as an aircraft engine manufacturer. The company transitioned to automobile production in 1929, establishing itself as a leader in luxury vehicles. BMW is renowned for its engineering excellence, innovative technology, and the iconic 'Ultimate Driving Machine' philosophy. Today, BMW stands as one of the world's leading premium automakers with a global presence.",    stats: {
+      yearsInBusiness: "108+",      vehiclesSold: "2.5M+",      countries: "140+",      awards: "200+"},
     models: [
-      { name: '3 Series', year: 2023, type: 'Sedan', price: '$45,000' },
-      { name: 'X5', year: 2023, type: 'SUV', price: '$65,000' },
-      { name: 'M440i', year: 2023, type: 'Sedan', price: '$55,000' },
-    ]
+      { id: "1", name: "M440i xDrive", year: "2024", price: "$67,500", image: "https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?w=600" },
+      { id: "2", name: "X5 M", year: "2024", price: "$115,900", image: "https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=600" },
+      { id: "3", name: "i7", year: "2024", price: "$99,650", image: "https://images.unsplash.com/photo-1533473359331-35b3c3f0f038?w=600" },
+      { id: "4", name: "Z4 M440i", year: "2024", price: "$79,500", image: "https://images.unsplash.com/photo-1552820728-8ac41f1ce891?w=600" },
+    ],
   },
 };
 
-export default function BrandDetailPage() {
+export default function BrandPage() {
   const params = useParams();
-  const brand = params.brand as string;
-  const brandData = BRAND_DATA[brand];
+  const brandKey = (params.brand as string)?.toLowerCase() || "";
+  const brand = mockBrandData[brandKey];
 
-  if (!brandData) {
+  if (!brand) {
     return (
-      <ThemeProvider
-        defaultButtonVariant="hover-magnetic"
-        defaultTextAnimation="entrance-slide"
-        borderRadius="rounded"
-        contentWidth="medium"
-        sizing="medium"
-        background="circleGradient"
-        cardStyle="glass-elevated"
-        primaryButtonStyle="gradient"
-        secondaryButtonStyle="glass"
-        headingFontWeight="semibold"
-      >
-        <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 flex items-center justify-center">
-          <div className="text-center">
-            <h1 className="text-3xl font-bold mb-4">Brand not found</h1>
-            <Link href="/brands" className="text-primary-cta font-semibold">← Back to Brands</Link>
-          </div>
+      <div className="min-h-screen flex items-center justify-center">
+        <div className="text-center">
+          <h1 className="text-4xl font-bold mb-4">Brand Not Found</h1>
+          <p className="text-gray-600 mb-8">The brand you're looking for doesn't exist.</p>
+          <a href="/" className="px-6 py-3 bg-accent text-white rounded-lg">Back to Home</a>
         </div>
-      </ThemeProvider>
+      </div>
     );
   }
 
   return (
-    <ThemeProvider
-      defaultButtonVariant="hover-magnetic"
-      defaultTextAnimation="entrance-slide"
-      borderRadius="rounded"
-      contentWidth="medium"
-      sizing="medium"
-      background="circleGradient"
-      cardStyle="glass-elevated"
-      primaryButtonStyle="gradient"
-      secondaryButtonStyle="glass"
-      headingFontWeight="semibold"
-    >
-      <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">
-          <Link href="/brands" className="text-primary-cta font-semibold mb-8 inline-block">← Back to Brands</Link>
-          
-          <h1 className="text-5xl font-bold mb-4">{brandData.name}</h1>
-          <p className="text-foreground/70 text-lg mb-12">{brandData.description}</p>
-
-          <h2 className="text-3xl font-bold mb-6">Popular Models</h2>
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-            {brandData.models.map((model: any, idx: number) => (
-              <div key={idx} className="bg-card rounded-lg border border-foreground/10 p-6 hover:shadow-lg transition">
-                <div className="h-32 bg-foreground/10 rounded mb-4 flex items-center justify-center">
-                  <span className="text-foreground/50">Model Image</span>
-                </div>
-                <h3 className="font-bold text-lg mb-2">{model.name}</h3>
-                <div className="space-y-2 text-sm text-foreground/70 mb-4">
-                  <p>Year: {model.year}</p>
-                  <p>Type: {model.type}</p>
-                  <p className="font-semibold text-foreground">Price: {model.price}</p>
-                </div>
-                <button className="w-full px-4 py-2 bg-primary-cta text-white rounded hover:opacity-90 transition">
-                  View Details
-                </button>
-              </div>
-            ))}
+    <div className="min-h-screen bg-background">
+      {/* Brand Header */}
+      <div className="bg-gradient-to-br from-card to-background py-16 px-4">
+        <div className="max-w-6xl mx-auto">
+          <a href="/" className="text-accent hover:underline mb-6 inline-block">← Back</a>
+          <h1 className="text-5xl font-bold mb-4">{brand.name}</h1>
+          <p className="text-xl text-gray-600 mb-8">{brand.description}</p>
+          <div className="flex flex-wrap gap-6 text-sm">
+            <div className="flex items-center gap-2">
+              <Award size={20} className="text-accent" />
+              <span>Founded {brand.founded}</span>
+            </div>
+            <div className="flex items-center gap-2">
+              <MapPin size={20} className="text-accent" />
+              <span>{brand.headquarters}</span>
+            </div>
           </div>
         </div>
       </div>
-    </ThemeProvider>
+
+      {/* Main Content */}
+      <div className="max-w-6xl mx-auto px-4 py-16">
+        {/* Brand History */}
+        <section className="mb-20">
+          <h2 className="text-4xl font-bold mb-8">Our Story</h2>
+          <div className="grid md:grid-cols-3 gap-8 mb-12">
+            <div className="md:col-span-2">
+              <p className="text-lg text-gray-700 leading-relaxed mb-6">{brand.history}</p>
+            </div>
+            <div className="bg-card p-8 rounded-lg h-fit">
+              <h3 className="text-2xl font-bold mb-6">By the Numbers</h3>
+              <div className="space-y-6">
+                <div>
+                  <div className="flex items-center gap-2 mb-2">
+                    <TrendingUp size={20} className="text-accent" />
+                    <span className="text-sm text-gray-600">Years in Business</span>
+                  </div>
+                  <p className="text-3xl font-bold">{brand.stats.yearsInBusiness}</p>
+                </div>
+                <div>
+                  <div className="flex items-center gap-2 mb-2">
+                    <Users size={20} className="text-accent" />
+                    <span className="text-sm text-gray-600">Vehicles Sold</span>
+                  </div>
+                  <p className="text-3xl font-bold">{brand.stats.vehiclesSold}</p>
+                </div>
+                <div>
+                  <div className="flex items-center gap-2 mb-2">
+                    <MapPin size={20} className="text-accent" />
+                    <span className="text-sm text-gray-600">Countries Served</span>
+                  </div>
+                  <p className="text-3xl font-bold">{brand.stats.countries}</p>
+                </div>
+                <div>
+                  <div className="flex items-center gap-2 mb-2">
+                    <Award size={20} className="text-accent" />
+                    <span className="text-sm text-gray-600">Awards Won</span>
+                  </div>
+                  <p className="text-3xl font-bold">{brand.stats.awards}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* All Models */}
+        <section>
+          <h2 className="text-4xl font-bold mb-12">All {brand.name} Models</h2>
+          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
+            {brand.models.map((model) => (
+              <div key={model.id} className="bg-card rounded-lg overflow-hidden hover:shadow-lg transition group cursor-pointer">
+                <div className="aspect-video bg-gray-200 overflow-hidden mb-4">
+                  <img
+                    src={model.image}
+                    alt={model.name}
+                    className="w-full h-full object-cover group-hover:scale-105 transition"
+                  />
+                </div>
+                <div className="p-6">
+                  <p className="text-sm text-accent mb-1">{model.year}</p>
+                  <h3 className="text-xl font-bold mb-2">{model.name}</h3>
+                  <p className="text-lg font-semibold text-accent mb-4">{model.price}</p>
+                  <a
+                    href={`/cars/${model.id}`}
+                    className="block text-accent hover:underline font-semibold"
+                  >
+                    View Details →
+                  </a>
+                </div>
+              </div>
+            ))}
+          </div>
+        </section>
+
+        {/* CTA Section */}
+        <section className="mt-20 bg-card p-12 rounded-lg text-center">
+          <h3 className="text-3xl font-bold mb-4">Ready to Explore?</h3>
+          <p className="text-gray-600 mb-8 max-w-2xl mx-auto">
+            Discover the perfect {brand.name} vehicle for your lifestyle. Our expert team is ready to help you find the right model.
+          </p>
+          <button className="px-8 py-4 bg-accent text-white font-semibold rounded-lg hover:bg-accent/90 transition">
+            Schedule a Test Drive
+          </button>
+        </section>
+      </div>
+    </div>
   );
 }