diff --git a/app/page.tsx b/app/page.tsx
index ecc7808..d0d7020 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,187 +1,183 @@
-"use client";
-
 import Link from "next/link";
-import { ArrowRight, Shield, Globe, Zap, LineChart, LogIn } from "lucide-react";
+import { ArrowRight, Shield, LineChart, Zap } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { fetchPlatformStats } from "@/lib/stats-service";
+import { HomeNavbar } from "@/components/home-navbar";
+import { Suspense } from "react";
+
+// Format number with commas
+function formatNumber(num: number): string {
+  return new Intl.NumberFormat().format(Math.round(num));
+}
+
+// Format currency
+function formatCurrency(amount: number): string {
+  return new Intl.NumberFormat('en-GB', {
+    style: 'currency',
+    currency: 'GBP',
+    maximumFractionDigits: 0
+  }).format(amount);
+}
+
+// This is a server component
+export default async function Home() {
+  const stats = await fetchPlatformStats();
 
-export default function Home() {
   return (
-    <div className="flex flex-col min-h-screen">
+    <div className="flex flex-col min-h-screen bg-black text-white">
       {/* Header Navigation */}
-      <header className="py-4 px-6 md:px-10 flex items-center justify-between border-b">
-        <div className="flex items-center gap-2">
-          <span className="font-bold text-2xl">Ember</span>
-        </div>
-        <nav className="hidden md:flex gap-6 items-center">
-          <Link href="#features" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
-            Features
-          </Link>
-          <Link href="#benefits" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
-            Benefits
-          </Link>
-          <Link href="/auth/login" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
-            <Button variant="ghost">
-              <LogIn className="h-4 w-4 mr-2" />
-              Log In
-            </Button>
-          </Link>
-          <Link href="/auth/login">
-            <Button>Get Started</Button>
-          </Link>
-        </nav>
-        <div className="md:hidden">
-          <Button variant="ghost" size="icon">
-            <span className="sr-only">Toggle menu</span>
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="24"
-              height="24"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="2"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            >
-              <line x1="4" x2="20" y1="12" y2="12" />
-              <line x1="4" x2="20" y1="6" y2="6" />
-              <line x1="4" x2="20" y1="18" y2="18" />
-            </svg>
-          </Button>
-        </div>
-      </header>
+      <HomeNavbar />
 
       {/* Hero Section */}
-      <section className="flex-1 py-20 md:py-32 px-6 md:px-10 flex flex-col items-center text-center space-y-10">
+      <section className="flex-1 py-20 md:py-32 px-6 md:px-10 flex flex-col items-center text-center space-y-10 bg-black">
         <div className="space-y-4 max-w-3xl">
           <h1 className="text-4xl md:text-6xl font-bold tracking-tighter">
-            Streamlined E-commerce <span className="text-orange-500">Management</span>
+            Streamlined E-commerce <span className="text-[#FF7A00]">Management</span>
           </h1>
-          <p className="text-xl md:text-2xl text-muted-foreground max-w-2xl mx-auto">
+          <p className="text-xl md:text-2xl text-gray-400 max-w-2xl mx-auto">
             Ember provides everything you need to manage your e-commerce business efficiently in one place, with secure cryptocurrency payments.
           </p>
         </div>
         <div className="flex flex-col sm:flex-row gap-4">
           <Link href="/dashboard">
-            <Button size="lg" className="gap-2">
+            <Button size="lg" className="gap-2 bg-[#FF7A00] hover:bg-[#E86A00] text-white border-0">
               Go to Dashboard
               <ArrowRight className="h-4 w-4" />
             </Button>
           </Link>
           <Link href="/auth/register">
-            <Button size="lg" variant="outline">
+            <Button size="lg" variant="outline" className="border-gray-800 text-white hover:bg-gray-900">
               Create Account
             </Button>
           </Link>
         </div>
       </section>
 
+      {/* Statistics Section */}
+      <section className="py-16 px-6 md:px-10 bg-black">
+        <div className="max-w-6xl mx-auto">
+          <Suspense fallback={<div className="text-center">Loading statistics...</div>}>
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+              <div className="flex flex-col items-center text-center p-6 rounded-md bg-[#1C1C1C] border-0">
+                <div className="text-4xl font-bold text-[#FF7A00] mb-2">{formatNumber(stats.orders.completed)}+</div>
+                <div className="text-xl font-semibold text-white mb-1">Orders Processed</div>
+                <p className="text-sm text-gray-400">Successfully delivered to customers worldwide</p>
+              </div>
+              <div className="flex flex-col items-center text-center p-6 rounded-md bg-[#1C1C1C] border-0">
+                <div className="text-4xl font-bold text-[#FF7A00] mb-2">{formatNumber(stats.vendors.total)}+</div>
+                <div className="text-xl font-semibold text-white mb-1">Registered Vendors</div>
+                <p className="text-sm text-gray-400">Trusted merchants selling on our platform</p>
+              </div>
+              <div className="flex flex-col items-center text-center p-6 rounded-md bg-[#1C1C1C] border-0">
+                <div className="text-4xl font-bold text-[#FF7A00] mb-2">{formatCurrency(stats.transactions.volume)}</div>
+                <div className="text-xl font-semibold text-white mb-1">Transaction Volume</div>
+                <p className="text-sm text-gray-400">Securely processed with cryptocurrency</p>
+              </div>
+            </div>
+          </Suspense>
+        </div>
+      </section>
+
       {/* Features Section */}
-      <section id="features" className="py-20 px-6 md:px-10 bg-muted/40">
+      <section id="features" className="py-20 px-6 md:px-10 bg-black">
         <div className="max-w-6xl mx-auto space-y-10">
           <div className="text-center space-y-4">
-            <h2 className="text-3xl md:text-4xl font-bold">Powerful Features</h2>
-            <p className="text-muted-foreground max-w-2xl mx-auto">
+            <h2 className="text-3xl md:text-4xl font-bold text-white">Powerful Features</h2>
+            <p className="text-gray-400 max-w-2xl mx-auto">
               Everything you need to manage orders, track metrics, and grow your business.
             </p>
           </div>
           <div className="grid md:grid-cols-3 gap-6">
-            <Card>
-              <CardHeader>
-                <div className="p-2 w-fit rounded-md bg-primary/10">
-                  <Shield className="h-6 w-6 text-primary" />
+            <div className="p-6 rounded-md bg-[#1C1C1C] border-0">
+              <div className="mb-4">
+                <div className="p-2 w-fit rounded-md bg-[#FF7A00]/10">
+                  <Shield className="h-6 w-6 text-[#FF7A00]" />
                 </div>
-                <CardTitle className="mt-4">Cryptocurrency Payments</CardTitle>
-              </CardHeader>
-              <CardContent>
-                <CardDescription>
-                  Accept payments in various cryptocurrencies with our secure, integrated payment system designed for maximum privacy and security.
-                </CardDescription>
-              </CardContent>
-            </Card>
-            <Card>
-              <CardHeader>
-                <div className="p-2 w-fit rounded-md bg-primary/10">
-                  <LineChart className="h-6 w-6 text-primary" />
+                <h3 className="mt-4 text-xl font-semibold text-white">Cryptocurrency Payments</h3>
+              </div>
+              <p className="text-gray-400 text-sm">
+                Accept payments in various cryptocurrencies with our secure, integrated payment system designed for maximum privacy and security.
+              </p>
+            </div>
+            <div className="p-6 rounded-md bg-[#1C1C1C] border-0">
+              <div className="mb-4">
+                <div className="p-2 w-fit rounded-md bg-[#FF7A00]/10">
+                  <LineChart className="h-6 w-6 text-[#FF7A00]" />
                 </div>
-                <CardTitle className="mt-4">Order Tracking</CardTitle>
-              </CardHeader>
-              <CardContent>
-                <CardDescription>
-                  Manage and track orders from receipt to delivery with our intuitive order management system.
-                </CardDescription>
-              </CardContent>
-            </Card>
-            <Card>
-              <CardHeader>
-                <div className="p-2 w-fit rounded-md bg-primary/10">
-                  <Zap className="h-6 w-6 text-primary" />
+                <h3 className="mt-4 text-xl font-semibold text-white">Order Tracking</h3>
+              </div>
+              <p className="text-gray-400 text-sm">
+                Manage and track orders from receipt to delivery with our intuitive order management system.
+              </p>
+            </div>
+            <div className="p-6 rounded-md bg-[#1C1C1C] border-0">
+              <div className="mb-4">
+                <div className="p-2 w-fit rounded-md bg-[#FF7A00]/10">
+                  <Zap className="h-6 w-6 text-[#FF7A00]" />
                 </div>
-                <CardTitle className="mt-4">Fast Performance</CardTitle>
-              </CardHeader>
-              <CardContent>
-                <CardDescription>
-                  Lightning-fast dashboard with real-time updates gives you the information you need when you need it.
-                </CardDescription>
-              </CardContent>
-            </Card>
+                <h3 className="mt-4 text-xl font-semibold text-white">Fast Performance</h3>
+              </div>
+              <p className="text-gray-400 text-sm">
+                Lightning-fast dashboard with real-time updates gives you the information you need when you need it.
+              </p>
+            </div>
           </div>
         </div>
       </section>
 
       {/* Benefits Section */}
-      <section id="benefits" className="py-20 px-6 md:px-10">
+      <section id="benefits" className="py-20 px-6 md:px-10 bg-black">
         <div className="max-w-6xl mx-auto space-y-10">
           <div className="text-center space-y-4">
-            <h2 className="text-3xl md:text-4xl font-bold">Why Choose Ember</h2>
-            <p className="text-muted-foreground max-w-2xl mx-auto">
+            <h2 className="text-3xl md:text-4xl font-bold text-white">Why Choose Ember</h2>
+            <p className="text-gray-400 max-w-2xl mx-auto">
               Our platform is designed to make e-commerce management simple and efficient.
             </p>
           </div>
           <div className="grid md:grid-cols-2 gap-10">
-            <div className="space-y-4">
-              <h3 className="text-xl font-semibold">Centralized Management</h3>
-              <p className="text-muted-foreground">
+            <div className="space-y-4 p-6 rounded-md bg-[#1C1C1C] border-0">
+              <h3 className="text-xl font-semibold text-white">Centralized Management</h3>
+              <p className="text-gray-400">
                 Manage all aspects of your e-commerce business from a single dashboard.
               </p>
             </div>
-            <div className="space-y-4">
-              <h3 className="text-xl font-semibold">Advanced Analytics</h3>
-              <p className="text-muted-foreground">
+            <div className="space-y-4 p-6 rounded-md bg-[#1C1C1C] border-0">
+              <h3 className="text-xl font-semibold text-white">Advanced Analytics</h3>
+              <p className="text-gray-400">
                 Gain insights into your business with detailed analytics and reporting tools.
               </p>
             </div>
-            <div className="space-y-4">
-              <h3 className="text-xl font-semibold">Customer Management</h3>
-              <p className="text-muted-foreground">
+            <div className="space-y-4 p-6 rounded-md bg-[#1C1C1C] border-0">
+              <h3 className="text-xl font-semibold text-white">Customer Management</h3>
+              <p className="text-gray-400">
                 Keep track of customer information and purchase history to provide better service.
               </p>
             </div>
-            <div className="space-y-4">
-              <h3 className="text-xl font-semibold">Inventory Control</h3>
-              <p className="text-muted-foreground">
+            <div className="space-y-4 p-6 rounded-md bg-[#1C1C1C] border-0">
+              <h3 className="text-xl font-semibold text-white">Inventory Control</h3>
+              <p className="text-gray-400">
                 Manage your inventory with precision to avoid stock-outs and overstocking.
               </p>
             </div>
           </div>
           <div className="flex justify-center mt-10">
             <Link href="/dashboard">
-              <Button size="lg">Start Now</Button>
+              <Button size="lg" className="bg-[#FF7A00] hover:bg-[#E86A00] text-white border-0">Start Now</Button>
             </Link>
           </div>
         </div>
       </section>
 
       {/* Footer */}
-      <footer className="py-10 px-6 md:px-10 border-t">
+      <footer className="py-10 px-6 md:px-10 border-t border-gray-800 bg-black">
         <div className="max-w-6xl mx-auto text-center">
-          <h3 className="font-bold text-lg mb-2">Ember</h3>
-          <p className="text-sm text-muted-foreground">
+          <h3 className="font-bold text-lg mb-2 text-white">Ember</h3>
+          <p className="text-sm text-gray-400">
             The complete e-commerce management solution for modern businesses.
           </p>
         </div>
-        <div className="mt-10 text-center text-sm text-muted-foreground">
+        <div className="mt-10 text-center text-sm text-gray-500">
           <p>© {new Date().getFullYear()} Ember. All rights reserved.</p>
         </div>
       </footer>
diff --git a/components/home-navbar.tsx b/components/home-navbar.tsx
new file mode 100644
index 0000000..bfa3fc6
--- /dev/null
+++ b/components/home-navbar.tsx
@@ -0,0 +1,92 @@
+"use client";
+
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import { LogIn } from "lucide-react";
+import { ThemeSwitcher } from "@/components/theme-switcher";
+import { useState } from "react";
+
+export function HomeNavbar() {
+  const [menuOpen, setMenuOpen] = useState(false);
+
+  return (
+    <header className="py-4 px-6 md:px-10 flex items-center justify-between border-b border-gray-800 bg-black text-white">
+      <div className="flex items-center gap-2">
+        <span className="font-bold text-2xl">Ember</span>
+      </div>
+      <nav className="hidden md:flex gap-6 items-center">
+        <Link href="#features" className="text-sm text-gray-400 hover:text-white transition-colors">
+          Features
+        </Link>
+        <Link href="#benefits" className="text-sm text-gray-400 hover:text-white transition-colors">
+          Benefits
+        </Link>
+        <Link href="/auth/login" className="text-sm text-gray-400 hover:text-white transition-colors">
+          <Button variant="ghost" className="text-gray-400 hover:text-white hover:bg-gray-900">
+            <LogIn className="h-4 w-4 mr-2" />
+            Log In
+          </Button>
+        </Link>
+        <Link href="/auth/login">
+          <Button className="bg-[#FF7A00] hover:bg-[#E86A00] text-white border-0">Get Started</Button>
+        </Link>
+      </nav>
+      <div className="md:hidden">
+        <Button variant="ghost" size="icon" onClick={() => setMenuOpen(!menuOpen)} className="text-white hover:bg-gray-900">
+          <span className="sr-only">Toggle menu</span>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <line x1="4" x2="20" y1="12" y2="12" />
+            <line x1="4" x2="20" y1="6" y2="6" />
+            <line x1="4" x2="20" y1="18" y2="18" />
+          </svg>
+        </Button>
+      </div>
+      
+      {/* Mobile menu */}
+      {menuOpen && (
+        <div className="md:hidden absolute top-16 left-0 right-0 bg-[#1C1C1C] border-b border-gray-800 p-4 z-50">
+          <div className="flex flex-col gap-4">
+            <Link 
+              href="#features" 
+              className="text-sm p-2 hover:bg-gray-900 rounded-md text-gray-300" 
+              onClick={() => setMenuOpen(false)}
+            >
+              Features
+            </Link>
+            <Link 
+              href="#benefits" 
+              className="text-sm p-2 hover:bg-gray-900 rounded-md text-gray-300" 
+              onClick={() => setMenuOpen(false)}
+            >
+              Benefits
+            </Link>
+            <Link 
+              href="/auth/login" 
+              className="text-sm p-2 hover:bg-gray-900 rounded-md text-gray-300" 
+              onClick={() => setMenuOpen(false)}
+            >
+              Log In
+            </Link>
+            <Link 
+              href="/auth/register" 
+              className="text-sm p-2 hover:bg-gray-900 rounded-md text-gray-300" 
+              onClick={() => setMenuOpen(false)}
+            >
+              Create Account
+            </Link>
+          </div>
+        </div>
+      )}
+    </header>
+  );
+} 
\ No newline at end of file
diff --git a/components/theme-switcher.tsx b/components/theme-switcher.tsx
new file mode 100644
index 0000000..9500b86
--- /dev/null
+++ b/components/theme-switcher.tsx
@@ -0,0 +1,30 @@
+"use client";
+
+import { useTheme } from "next-themes";
+import { useEffect, useState } from "react";
+import { Button } from "@/components/ui/button";
+
+export function ThemeSwitcher() {
+  const { theme, setTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+
+  // Required for server-side rendering
+  useEffect(() => setMounted(true), []);
+
+  if (!mounted) return null;
+
+  return (
+    <Button
+      variant="ghost" 
+      size="icon"
+      onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+      className="ml-2"
+    >
+      {theme === "dark" ? (
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-sun"><circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/></svg>
+      ) : (
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-moon"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/></svg>
+      )}
+    </Button>
+  );
+} 
\ No newline at end of file
diff --git a/lib/stats-service.ts b/lib/stats-service.ts
new file mode 100644
index 0000000..d2dac03
--- /dev/null
+++ b/lib/stats-service.ts
@@ -0,0 +1,47 @@
+export interface PlatformStats {
+  orders: {
+    completed: number;
+  };
+  vendors: {
+    total: number;
+  };
+  transactions: {
+    volume: number;
+    averageOrderValue: number;
+  };
+}
+
+export async function fetchPlatformStats(): Promise<PlatformStats> {
+  const BASE_API_URL = process.env.SERVER_API_URL || 'http://localhost:3001/api';
+  
+  try {
+    const response = await fetch(`${BASE_API_URL}/stats/platform`, {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      cache: 'no-store'
+    });
+
+    if (!response.ok) {
+      throw new Error(`API error: ${response.status}`);
+    }
+
+    return await response.json();
+  } catch (error) {
+    console.error('Error fetching platform stats:', error);
+    // Return fallback data if API fails
+    return {
+      orders: {
+        completed: 15800
+      },
+      vendors: {
+        total: 2400
+      },
+      transactions: {
+        volume: 3200000, 
+        averageOrderValue: 220
+      }
+    };
+  }
+} 
\ No newline at end of file