diff --git a/src/components/Dashboard.tsx b/src/components/Dashboard.tsx
index 7f9ec13..bfa382a 100644
--- a/src/components/Dashboard.tsx
+++ b/src/components/Dashboard.tsx
@@ -1,104 +1,110 @@
 import React from 'react';
-import { TrendingUp, Users, Calendar, BarChart3 } from 'lucide-react';
+import { BarChart3, Users, TrendingUp, DollarSign, Calendar, Bell, Search, Settings, Menu } from 'lucide-react';
 
 const Dashboard: React.FC = () => {
   return (
     <div className="min-h-screen bg-gray-50">
       {/* Header */}
-      <header className="bg-white shadow-sm border-b">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="flex justify-between items-center h-16">
-            <div className="flex items-center">
-              <img className="h-8 w-8" src="/images/placeholder.webp" alt="Logo" />
-              <span className="ml-2 text-xl font-semibold text-gray-900">Dashboard</span>
-            </div>
-            <div className="flex items-center space-x-4">
-              <button className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium">
-                New Report
-              </button>
-            </div>
+      <header className="bg-white border-b border-gray-200 px-6 py-4">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center space-x-4">
+            <Menu className="h-6 w-6 text-gray-600" />
+            <h1 className="text-2xl font-bold text-gray-900">Dashboard</h1>
+          </div>
+          <div className="flex items-center space-x-4">
+            <Search className="h-5 w-5 text-gray-600" />
+            <Bell className="h-5 w-5 text-gray-600" />
+            <Settings className="h-5 w-5 text-gray-600" />
           </div>
         </div>
       </header>
 
       {/* Main Content */}
-      <main className="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
-        {/* Stats Grid */}
+      <main className="px-6 py-8">
+        {/* Stats Cards */}
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
-          <div className="bg-white rounded-lg shadow p-6">
-            <div className="flex items-center">
-              <div className="flex-shrink-0">
-                <TrendingUp className="h-8 w-8 text-green-600" />
+          <div className="bg-white rounded-lg p-6 shadow-sm border border-gray-200">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm font-medium text-gray-600">Total Users</p>
+                <p className="text-3xl font-bold text-gray-900">2,543</p>
               </div>
-              <div className="ml-4">
-                <p className="text-sm font-medium text-gray-500">Total Revenue</p>
-                <p className="text-2xl font-semibold text-gray-900">$45,231</p>
+              <Users className="h-8 w-8 text-blue-500" />
+            </div>
+            <p className="text-sm text-green-600 mt-2">+12% from last month</p>
+          </div>
+
+          <div className="bg-white rounded-lg p-6 shadow-sm border border-gray-200">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm font-medium text-gray-600">Revenue</p>
+                <p className="text-3xl font-bold text-gray-900">$45,231</p>
               </div>
+              <DollarSign className="h-8 w-8 text-green-500" />
+            </div>
+            <p className="text-sm text-green-600 mt-2">+8% from last month</p>
+          </div>
+
+          <div className="bg-white rounded-lg p-6 shadow-sm border border-gray-200">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm font-medium text-gray-600">Growth</p>
+                <p className="text-3xl font-bold text-gray-900">+24%</p>
+              </div>
+              <TrendingUp className="h-8 w-8 text-purple-500" />
+            </div>
+            <p className="text-sm text-green-600 mt-2">+3% from last month</p>
+          </div>
+
+          <div className="bg-white rounded-lg p-6 shadow-sm border border-gray-200">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm font-medium text-gray-600">Analytics</p>
+                <p className="text-3xl font-bold text-gray-900">98.5%</p>
+              </div>
+              <BarChart3 className="h-8 w-8 text-orange-500" />
+            </div>
+            <p className="text-sm text-green-600 mt-2">+2% from last month</p>
+          </div>
+        </div>
+
+        {/* Charts Section */}
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
+          <div className="bg-white rounded-lg p-6 shadow-sm border border-gray-200">
+            <h3 className="text-lg font-semibold text-gray-900 mb-4">Revenue Overview</h3>
+            <div className="h-64 bg-gray-50 rounded-lg flex items-center justify-center">
+              <BarChart3 className="h-16 w-16 text-gray-400" />
+              <p className="text-gray-500 ml-4">Chart visualization would go here</p>
             </div>
           </div>
 
-          <div className="bg-white rounded-lg shadow p-6">
-            <div className="flex items-center">
-              <div className="flex-shrink-0">
-                <Users className="h-8 w-8 text-blue-600" />
-              </div>
-              <div className="ml-4">
-                <p className="text-sm font-medium text-gray-500">Active Users</p>
-                <p className="text-2xl font-semibold text-gray-900">2,451</p>
-              </div>
-            </div>
-          </div>
-
-          <div className="bg-white rounded-lg shadow p-6">
-            <div className="flex items-center">
-              <div className="flex-shrink-0">
-                <Calendar className="h-8 w-8 text-purple-600" />
-              </div>
-              <div className="ml-4">
-                <p className="text-sm font-medium text-gray-500">Events</p>
-                <p className="text-2xl font-semibold text-gray-900">12</p>
-              </div>
-            </div>
-          </div>
-
-          <div className="bg-white rounded-lg shadow p-6">
-            <div className="flex items-center">
-              <div className="flex-shrink-0">
-                <BarChart3 className="h-8 w-8 text-orange-600" />
-              </div>
-              <div className="ml-4">
-                <p className="text-sm font-medium text-gray-500">Conversion</p>
-                <p className="text-2xl font-semibold text-gray-900">3.24%</p>
-              </div>
+          <div className="bg-white rounded-lg p-6 shadow-sm border border-gray-200">
+            <h3 className="text-lg font-semibold text-gray-900 mb-4">User Activity</h3>
+            <div className="h-64 bg-gray-50 rounded-lg flex items-center justify-center">
+              <TrendingUp className="h-16 w-16 text-gray-400" />
+              <p className="text-gray-500 ml-4">Activity chart would go here</p>
             </div>
           </div>
         </div>
 
-        {/* Chart Section */}
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-          <div className="bg-white rounded-lg shadow p-6">
-            <h3 className="text-lg font-medium text-gray-900 mb-4">Analytics Overview</h3>
-            <div className="h-64 bg-gray-100 rounded flex items-center justify-center">
-              <p className="text-gray-500">Chart placeholder</p>
-            </div>
-          </div>
-
-          <div className="bg-white rounded-lg shadow p-6">
-            <h3 className="text-lg font-medium text-gray-900 mb-4">Recent Activity</h3>
-            <div className="space-y-3">
-              <div className="flex items-center space-x-3">
-                <div className="w-2 h-2 bg-green-500 rounded-full"></div>
-                <span className="text-sm text-gray-600">User registered</span>
+        {/* Recent Activity */}
+        <div className="bg-white rounded-lg p-6 shadow-sm border border-gray-200">
+          <h3 className="text-lg font-semibold text-gray-900 mb-4">Recent Activity</h3>
+          <div className="space-y-4">
+            {[1, 2, 3, 4].map((item) => (
+              <div key={item} className="flex items-center space-x-4 p-3 bg-gray-50 rounded-lg">
+                <img 
+                  src="/images/placeholder.webp" 
+                  alt="User avatar" 
+                  className="h-10 w-10 rounded-full"
+                />
+                <div className="flex-1">
+                  <p className="text-sm font-medium text-gray-900">User {item} completed an action</p>
+                  <p className="text-xs text-gray-500">2 hours ago</p>
+                </div>
+                <Calendar className="h-5 w-5 text-gray-400" />
               </div>
-              <div className="flex items-center space-x-3">
-                <div className="w-2 h-2 bg-blue-500 rounded-full"></div>
-                <span className="text-sm text-gray-600">New order received</span>
-              </div>
-              <div className="flex items-center space-x-3">
-                <div className="w-2 h-2 bg-yellow-500 rounded-full"></div>
-                <span className="text-sm text-gray-600">Payment processed</span>
-              </div>
-            </div>
+            ))}
           </div>
         </div>
       </main>