diff --git a/app/dashboard/page.tsx b/app/dashboard/page.tsx
new file mode 100644
index 0000000..899a157
--- /dev/null
+++ b/app/dashboard/page.tsx
@@ -0,0 +1,337 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { useRouter } from "next/navigation"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import {
+    Plus,
+    Loader2,
+    AlertCircle,
+    TrendingUp,
+    MapPin as MapPinIcon,
+    BarChart3,
+    AlertTriangle,
+    RectangleHorizontal
+} from "lucide-react"
+import { SidebarNavigation } from "@/components/sidebar-navigation"
+import { GradientStatsCard } from "@/components/dashboard/gradient-stats-card"
+import { CompactProjectSelector } from "@/components/dashboard/compact-project-selector"
+import { DetectionDonutChart } from "@/components/dashboard/detection-donut-chart"
+import { LocationBarChart } from "@/components/dashboard/location-bar-chart"
+import { DashboardMap } from "@/components/dashboard/dashboard-map"
+import {
+    fetchProjects,
+    type Project
+} from "@/lib/api"
+
+const API_URL = process.env.NEXT_PUBLIC_API_URL || "http://127.0.0.1:8000/api/v1"
+
+interface ProjectSummary {
+    project: {
+        id: string
+        name: string
+        corridor_name: string | null
+        state: string | null
+    }
+    packages: {
+        [key: string]: {
+            package_id: string
+            region: string | null
+            locations: {
+                [key: string]: {
+                    location_id: string
+                    chainage: string | null
+                    detection_count: number
+                    detections: Array<{
+                        id: number
+                        type: string
+                        class: string
+                        confidence: number
+                        latitude: number
+                        longitude: number
+                    }>
+                }
+            }
+        }
+    }
+}
+
+interface DetectionStats {
+    totalPotholes: number
+    totalSignboards: number
+    totalDetections: number
+    locationData: Array<{
+        name: string
+        potholes: number
+        signboards: number
+        total: number
+    }>
+}
+
+function calculateStats(summary: ProjectSummary | null): DetectionStats {
+    if (!summary) {
+        return { totalPotholes: 0, totalSignboards: 0, totalDetections: 0, locationData: [] }
+    }
+
+    let totalPotholes = 0
+    let totalSignboards = 0
+    const locationData: DetectionStats["locationData"] = []
+
+    for (const pkg of Object.values(summary.packages || {})) {
+        for (const [locName, loc] of Object.entries(pkg.locations || {})) {
+            let locPotholes = 0
+            let locSignboards = 0
+
+            for (const detection of loc.detections || []) {
+                if (detection.type.toLowerCase().includes("pothole")) {
+                    locPotholes++
+                    totalPotholes++
+                } else {
+                    locSignboards++
+                    totalSignboards++
+                }
+            }
+
+            if (locPotholes > 0 || locSignboards > 0) {
+                const shortName = locName.length > 20 ? locName.substring(0, 20) + "..." : locName
+                locationData.push({
+                    name: shortName,
+                    potholes: locPotholes,
+                    signboards: locSignboards,
+                    total: locPotholes + locSignboards
+                })
+            }
+        }
+    }
+
+    return {
+        totalPotholes,
+        totalSignboards,
+        totalDetections: totalPotholes + totalSignboards,
+        locationData
+    }
+}
+
+export default function DashboardPage() {
+    const router = useRouter()
+    const [isLoading, setIsLoading] = useState(true)
+    const [projects, setProjects] = useState<Project[]>([])
+    const [selectedProjectId, setSelectedProjectId] = useState<string | null>(null)
+    const [projectSummary, setProjectSummary] = useState<ProjectSummary | null>(null)
+    const [stats, setStats] = useState<DetectionStats>({
+        totalPotholes: 0,
+        totalSignboards: 0,
+        totalDetections: 0,
+        locationData: []
+    })
+    const [error, setError] = useState<string | null>(null)
+
+    // Load projects on mount
+    useEffect(() => {
+        const loadProjects = async () => {
+            try {
+                setIsLoading(true)
+                setError(null)
+                const projectsData = await fetchProjects()
+                setProjects(projectsData)
+
+                if (projectsData.length > 0) {
+                    setSelectedProjectId(projectsData[0].id)
+                }
+            } catch (err) {
+                console.error("Failed to load projects:", err)
+                setError("Failed to load projects. Please check if the backend is running.")
+            } finally {
+                setIsLoading(false)
+            }
+        }
+
+        loadProjects()
+    }, [])
+
+    // Load project summary when project changes
+    useEffect(() => {
+        if (!selectedProjectId) {
+            setProjectSummary(null)
+            setStats({ totalPotholes: 0, totalSignboards: 0, totalDetections: 0, locationData: [] })
+            return
+        }
+
+        const loadProjectSummary = async () => {
+            try {
+                setIsLoading(true)
+                setError(null)
+
+                const response = await fetch(`${API_URL}/summary/projects/${selectedProjectId}`, {
+                    headers: {
+                        "Content-Type": "application/json",
+                        "ngrok-skip-browser-warning": "true"
+                    }
+                })
+
+                if (!response.ok) {
+                    throw new Error(`API Error: ${response.status}`)
+                }
+
+                const summary: ProjectSummary = await response.json()
+                setProjectSummary(summary)
+                setStats(calculateStats(summary))
+            } catch (err) {
+                console.error("Failed to load project summary:", err)
+                setError("Failed to load project summary.")
+                setProjectSummary(null)
+                setStats({ totalPotholes: 0, totalSignboards: 0, totalDetections: 0, locationData: [] })
+            } finally {
+                setIsLoading(false)
+            }
+        }
+
+        loadProjectSummary()
+    }, [selectedProjectId])
+
+    const handleNewAnalysis = () => {
+        router.push("/")
+    }
+
+    const selectedProject = projects.find(p => p.id === selectedProjectId)
+
+    return (
+        <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50/30 to-indigo-50/50 dark:from-gray-950 dark:via-gray-900 dark:to-gray-950">
+            {/* Sidebar Navigation */}
+            <SidebarNavigation />
+
+            {/* Main Content - offset by sidebar width */}
+            <main className="ml-16 min-h-screen">
+                <div className="p-6 max-w-[1600px] mx-auto">
+                    {/* Header */}
+                    <div className="mb-6 animate-in fade-in slide-in-from-top duration-500">
+                        <div className="flex items-center justify-between">
+                            <div>
+                                <h1 className="text-2xl font-bold bg-gradient-to-r from-gray-900 via-indigo-800 to-indigo-600 dark:from-white dark:via-indigo-200 dark:to-indigo-400 bg-clip-text text-transparent">
+                                    VisionRoad Analytics Dashboard
+                                </h1>
+                                <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
+                                    A Comprehensive Overview Of Your Road Infrastructure Analysis
+                                </p>
+                            </div>
+                            <Button
+                                onClick={handleNewAnalysis}
+                                className="bg-gradient-to-r from-indigo-500 to-purple-600 hover:from-indigo-600 hover:to-purple-700 text-white shadow-lg shadow-indigo-500/25 hover:shadow-indigo-500/40 transition-all duration-300"
+                            >
+                                <Plus className="h-4 w-4 mr-2" />
+                                New Analysis
+                            </Button>
+                        </div>
+                    </div>
+
+                    {/* Error Display */}
+                    {error && (
+                        <div className="mb-4 flex items-center gap-2 p-3 rounded-xl bg-red-50 dark:bg-red-950/30 border border-red-200 dark:border-red-800 text-red-600 dark:text-red-400 text-sm animate-in fade-in duration-300">
+                            <AlertCircle className="h-4 w-4 flex-shrink-0" />
+                            <p>{error}</p>
+                        </div>
+                    )}
+
+                    {/* Stats Cards - Top Row */}
+                    <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6 animate-in fade-in slide-in-from-bottom duration-500">
+                        <GradientStatsCard
+                            title="Total Detections"
+                            subtitle="All detected objects"
+                            value={stats.totalDetections}
+                            icon={TrendingUp}
+                            gradient="green"
+                            isLoading={isLoading}
+                        />
+                        <GradientStatsCard
+                            title="Potholes"
+                            subtitle="Road surface damage"
+                            value={stats.totalPotholes}
+                            icon={AlertTriangle}
+                            gradient="coral"
+                            isLoading={isLoading}
+                        />
+                        <GradientStatsCard
+                            title="Signboards"
+                            subtitle="Traffic signs detected"
+                            value={stats.totalSignboards}
+                            icon={RectangleHorizontal}
+                            gradient="blue"
+                            isLoading={isLoading}
+                        />
+                    </div>
+
+                    {/* Project Selector - Above main content */}
+                    <div className="mb-6 animate-in fade-in slide-in-from-bottom duration-500 delay-100">
+                        <CompactProjectSelector
+                            projects={projects}
+                            selectedProjectId={selectedProjectId}
+                            onProjectChange={setSelectedProjectId}
+                            selectedProject={selectedProject}
+                            isLoading={isLoading}
+                        />
+                    </div>
+
+                    {/* Main Content Grid - Map Left, Charts Right */}
+                    <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 animate-in fade-in slide-in-from-bottom duration-500 delay-200">
+                        {/* Left Side - Map */}
+                        <div>
+                            <DashboardMap className="h-auto" />
+                        </div>
+
+                        {/* Right Side - Stacked Charts */}
+                        <div className="space-y-4">
+                            {/* Detection Distribution */}
+                            <Card className="bg-white/70 dark:bg-gray-800/70 backdrop-blur-sm border-0 shadow-lg shadow-gray-200/50 dark:shadow-gray-900/50 rounded-xl overflow-hidden">
+                                <CardHeader className="pb-2 bg-gradient-to-r from-green-50 to-emerald-50 dark:from-green-950/30 dark:to-emerald-950/30">
+                                    <CardTitle className="text-base font-bold flex items-center gap-2">
+                                        <div className="p-1.5 rounded-lg bg-gradient-to-br from-emerald-400 to-teal-500 shadow-md shadow-emerald-500/30">
+                                            <BarChart3 className="h-4 w-4 text-white" />
+                                        </div>
+                                        <span className="bg-gradient-to-r from-emerald-600 via-teal-500 to-emerald-600 dark:from-emerald-400 dark:via-teal-400 dark:to-emerald-400 bg-clip-text text-transparent">
+                                            Detection Distribution
+                                        </span>
+                                    </CardTitle>
+                                </CardHeader>
+                                <CardContent className="pt-4">
+                                    <DetectionDonutChart
+                                        potholes={stats.totalPotholes}
+                                        signboards={stats.totalSignboards}
+                                        isLoading={isLoading}
+                                    />
+                                </CardContent>
+                            </Card>
+
+                            {/* Location Bar Chart */}
+                            <Card className="bg-white/70 dark:bg-gray-800/70 backdrop-blur-sm border-0 shadow-lg shadow-gray-200/50 dark:shadow-gray-900/50 rounded-xl overflow-hidden">
+                                <CardHeader className="pb-2 bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-950/30 dark:to-indigo-950/30">
+                                    <CardTitle className="text-base font-bold flex items-center gap-2">
+                                        <div className="p-1.5 rounded-lg bg-gradient-to-br from-blue-400 to-indigo-500 shadow-md shadow-blue-500/30">
+                                            <MapPinIcon className="h-4 w-4 text-white" />
+                                        </div>
+                                        <span className="bg-gradient-to-r from-blue-600 via-indigo-500 to-blue-600 dark:from-blue-400 dark:via-indigo-400 dark:to-blue-400 bg-clip-text text-transparent">
+                                            Detections by Location
+                                        </span>
+                                    </CardTitle>
+                                </CardHeader>
+                                <CardContent className="pt-4">
+                                    <LocationBarChart
+                                        data={stats.locationData}
+                                        isLoading={isLoading}
+                                    />
+                                </CardContent>
+                            </Card>
+                        </div>
+                    </div>
+
+                    {/* Footer */}
+                    <div className="mt-8 text-center animate-in fade-in duration-700 delay-300">
+                        <p className="text-xs text-gray-400 dark:text-gray-500">
+                            Sentient Geeks Pvt. Ltd.
+                        </p>
+                    </div>
+                </div>
+            </main>
+        </div>
+    )
+}
diff --git a/app/globals.css b/app/globals.css
index b815a87..b6b6b13 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -4,79 +4,114 @@
 @custom-variant dark (&:is(.dark *));
 
 :root {
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.145 0 0);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.205 0 0);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.97 0 0);
-  --secondary-foreground: oklch(0.205 0 0);
-  --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.97 0 0);
-  --accent-foreground: oklch(0.205 0 0);
-  --destructive: oklch(0.577 0.245 27.325);
-  --destructive-foreground: oklch(0.577 0.245 27.325);
-  --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
-  --radius: 0.625rem;
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0.205 0 0);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.97 0 0);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
-  --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.708 0 0);
+  /* Primary - Indigo */
+  --primary: oklch(0.55 0.24 264);
+  --primary-foreground: oklch(0.98 0.01 264);
+  
+  /* Background & Surfaces */
+  --background: oklch(0.98 0.01 280);
+  --foreground: oklch(0.15 0.02 280);
+  --card: oklch(0.99 0.005 280);
+  --card-foreground: oklch(0.15 0.02 280);
+  --popover: oklch(0.99 0.005 280);
+  --popover-foreground: oklch(0.15 0.02 280);
+  
+  /* Secondary */
+  --secondary: oklch(0.95 0.02 264);
+  --secondary-foreground: oklch(0.25 0.05 264);
+  
+  /* Muted */
+  --muted: oklch(0.94 0.02 280);
+  --muted-foreground: oklch(0.45 0.03 280);
+  
+  /* Accent - Cyan */
+  --accent: oklch(0.92 0.04 200);
+  --accent-foreground: oklch(0.25 0.08 200);
+  
+  /* Destructive */
+  --destructive: oklch(0.55 0.22 25);
+  --destructive-foreground: oklch(0.98 0.01 25);
+  
+  /* Borders & Inputs */
+  --border: oklch(0.90 0.02 280);
+  --input: oklch(0.92 0.02 280);
+  --ring: oklch(0.55 0.24 264);
+  
+  /* Chart Colors - Vibrant Palette */
+  --chart-1: oklch(0.55 0.24 264);
+  --chart-2: oklch(0.65 0.20 200);
+  --chart-3: oklch(0.60 0.18 160);
+  --chart-4: oklch(0.70 0.20 85);
+  --chart-5: oklch(0.60 0.22 320);
+  
+  --radius: 0.75rem;
+  
+  /* Sidebar */
+  --sidebar: oklch(0.98 0.01 280);
+  --sidebar-foreground: oklch(0.15 0.02 280);
+  --sidebar-primary: oklch(0.55 0.24 264);
+  --sidebar-primary-foreground: oklch(0.98 0.01 264);
+  --sidebar-accent: oklch(0.94 0.03 264);
+  --sidebar-accent-foreground: oklch(0.25 0.05 264);
+  --sidebar-border: oklch(0.90 0.02 280);
+  --sidebar-ring: oklch(0.55 0.24 264);
 }
 
 .dark {
-  --background: oklch(0.145 0 0);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.145 0 0);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.145 0 0);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.985 0 0);
-  --primary-foreground: oklch(0.205 0 0);
-  --secondary: oklch(0.269 0 0);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.269 0 0);
-  --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.269 0 0);
-  --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.396 0.141 25.723);
-  --destructive-foreground: oklch(0.637 0.237 25.331);
-  --border: oklch(0.269 0 0);
-  --input: oklch(0.269 0 0);
-  --ring: oklch(0.439 0 0);
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.205 0 0);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.269 0 0);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(0.269 0 0);
-  --sidebar-ring: oklch(0.439 0 0);
+  /* Primary - Light Indigo */
+  --primary: oklch(0.70 0.20 264);
+  --primary-foreground: oklch(0.15 0.02 264);
+  
+  /* Background & Surfaces */
+  --background: oklch(0.12 0.02 280);
+  --foreground: oklch(0.95 0.01 280);
+  --card: oklch(0.16 0.02 280);
+  --card-foreground: oklch(0.95 0.01 280);
+  --popover: oklch(0.16 0.02 280);
+  --popover-foreground: oklch(0.95 0.01 280);
+  
+  /* Secondary */
+  --secondary: oklch(0.22 0.03 264);
+  --secondary-foreground: oklch(0.90 0.02 264);
+  
+  /* Muted */
+  --muted: oklch(0.20 0.02 280);
+  --muted-foreground: oklch(0.65 0.02 280);
+  
+  /* Accent */
+  --accent: oklch(0.22 0.04 200);
+  --accent-foreground: oklch(0.85 0.08 200);
+  
+  /* Destructive */
+  --destructive: oklch(0.45 0.18 25);
+  --destructive-foreground: oklch(0.90 0.08 25);
+  
+  /* Borders & Inputs */
+  --border: oklch(0.25 0.02 280);
+  --input: oklch(0.22 0.02 280);
+  --ring: oklch(0.70 0.20 264);
+  
+  /* Chart Colors */
+  --chart-1: oklch(0.65 0.22 264);
+  --chart-2: oklch(0.70 0.18 200);
+  --chart-3: oklch(0.65 0.16 160);
+  --chart-4: oklch(0.75 0.18 85);
+  --chart-5: oklch(0.65 0.20 320);
+  
+  /* Sidebar */
+  --sidebar: oklch(0.14 0.02 280);
+  --sidebar-foreground: oklch(0.95 0.01 280);
+  --sidebar-primary: oklch(0.65 0.22 264);
+  --sidebar-primary-foreground: oklch(0.95 0.01 264);
+  --sidebar-accent: oklch(0.22 0.03 264);
+  --sidebar-accent-foreground: oklch(0.90 0.02 264);
+  --sidebar-border: oklch(0.25 0.02 280);
+  --sidebar-ring: oklch(0.70 0.20 264);
 }
 
 @theme inline {
-  --font-sans: 'Geist', 'Geist Fallback';
-  --font-mono: 'Geist Mono', 'Geist Mono Fallback';
+  --font-sans: 'Geist', 'Geist Fallback', system-ui, sans-serif;
+  --font-mono: 'Geist Mono', 'Geist Mono Fallback', monospace;
   --color-background: var(--background);
   --color-foreground: var(--foreground);
   --color-card: var(--card);
@@ -122,4 +157,153 @@
   body {
     @apply bg-background text-foreground;
   }
+}
+
+/* Premium Background with Animated Mesh Gradient */
+@layer utilities {
+  .bg-mesh-gradient {
+    background: 
+      radial-gradient(ellipse 80% 50% at 20% 20%, oklch(0.75 0.15 264 / 0.15), transparent),
+      radial-gradient(ellipse 60% 40% at 80% 80%, oklch(0.70 0.12 200 / 0.12), transparent),
+      radial-gradient(ellipse 50% 30% at 50% 50%, oklch(0.65 0.10 320 / 0.08), transparent),
+      var(--background);
+  }
+  
+  .dark .bg-mesh-gradient {
+    background: 
+      radial-gradient(ellipse 80% 50% at 20% 20%, oklch(0.40 0.18 264 / 0.20), transparent),
+      radial-gradient(ellipse 60% 40% at 80% 80%, oklch(0.35 0.15 200 / 0.15), transparent),
+      radial-gradient(ellipse 50% 30% at 50% 50%, oklch(0.30 0.12 320 / 0.10), transparent),
+      var(--background);
+  }
+  
+  /* Glassmorphism Card */
+  .glass-card {
+    background: oklch(1 0 0 / 0.7);
+    backdrop-filter: blur(16px);
+    -webkit-backdrop-filter: blur(16px);
+    border: 1px solid oklch(1 0 0 / 0.2);
+    box-shadow: 
+      0 4px 6px -1px oklch(0 0 0 / 0.05),
+      0 10px 15px -3px oklch(0 0 0 / 0.08),
+      0 20px 25px -5px oklch(0 0 0 / 0.05),
+      inset 0 1px 0 oklch(1 0 0 / 0.5);
+  }
+  
+  .dark .glass-card {
+    background: oklch(0.18 0.02 280 / 0.7);
+    border: 1px solid oklch(1 0 0 / 0.08);
+    box-shadow: 
+      0 4px 6px -1px oklch(0 0 0 / 0.15),
+      0 10px 15px -3px oklch(0 0 0 / 0.20),
+      0 20px 25px -5px oklch(0 0 0 / 0.15),
+      inset 0 1px 0 oklch(1 0 0 / 0.05);
+  }
+  
+  /* Gradient Text */
+  .text-gradient {
+    background: linear-gradient(135deg, oklch(0.55 0.24 264), oklch(0.60 0.20 200));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+  }
+  
+  .dark .text-gradient {
+    background: linear-gradient(135deg, oklch(0.75 0.20 264), oklch(0.70 0.18 200));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+  }
+  
+  /* Gradient Button */
+  .btn-gradient {
+    background: linear-gradient(135deg, oklch(0.55 0.24 264), oklch(0.50 0.22 280));
+    box-shadow: 
+      0 4px 14px 0 oklch(0.55 0.24 264 / 0.35),
+      inset 0 1px 0 oklch(1 0 0 / 0.15);
+    transition: all 0.3s ease;
+  }
+  
+  .btn-gradient:hover {
+    box-shadow: 
+      0 6px 20px 0 oklch(0.55 0.24 264 / 0.45),
+      inset 0 1px 0 oklch(1 0 0 / 0.2);
+    transform: translateY(-1px);
+  }
+  
+  .btn-gradient:active {
+    transform: translateY(0);
+    box-shadow: 
+      0 2px 8px 0 oklch(0.55 0.24 264 / 0.30),
+      inset 0 1px 0 oklch(1 0 0 / 0.15);
+  }
+  
+  /* Card Glow Border */
+  .card-glow {
+    position: relative;
+  }
+  
+  .card-glow::before {
+    content: '';
+    position: absolute;
+    inset: -1px;
+    background: linear-gradient(135deg, oklch(0.55 0.24 264 / 0.3), oklch(0.60 0.20 200 / 0.3));
+    border-radius: inherit;
+    z-index: -1;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+  }
+  
+  .card-glow:hover::before {
+    opacity: 1;
+  }
+  
+  /* Progress Bar Gradient */
+  .progress-gradient {
+    background: linear-gradient(90deg, oklch(0.55 0.24 264), oklch(0.60 0.20 200), oklch(0.65 0.18 160));
+    background-size: 200% 100%;
+    animation: progress-shimmer 2s ease infinite;
+  }
+  
+  @keyframes progress-shimmer {
+    0% { background-position: 200% 0; }
+    100% { background-position: -200% 0; }
+  }
+  
+  /* Subtle Float Animation */
+  .float-subtle {
+    animation: float-subtle 6s ease-in-out infinite;
+  }
+  
+  @keyframes float-subtle {
+    0%, 100% { transform: translateY(0); }
+    50% { transform: translateY(-5px); }
+  }
+  
+  /* Input Focus Glow */
+  .input-glow:focus-within {
+    box-shadow: 0 0 0 3px oklch(0.55 0.24 264 / 0.15);
+  }
+  
+  /* Step Indicator */
+  .step-active {
+    background: linear-gradient(135deg, oklch(0.55 0.24 264), oklch(0.50 0.22 280));
+    color: white;
+    box-shadow: 0 2px 8px oklch(0.55 0.24 264 / 0.3);
+  }
+  
+  .step-completed {
+    background: oklch(0.65 0.18 160);
+    color: white;
+  }
+  
+  .step-pending {
+    background: oklch(0.90 0.02 280);
+    color: oklch(0.50 0.02 280);
+  }
+  
+  .dark .step-pending {
+    background: oklch(0.25 0.02 280);
+    color: oklch(0.60 0.02 280);
+  }
 }
\ No newline at end of file
diff --git a/app/map/page.tsx b/app/map/page.tsx
new file mode 100644
index 0000000..4bea2b9
--- /dev/null
+++ b/app/map/page.tsx
@@ -0,0 +1,60 @@
+"use client"
+
+import { NavigationMenu } from "@/components/navigation-menu"
+import { DashboardMap } from "@/components/dashboard/dashboard-map"
+
+export default function MapPage() {
+    return (
+        <div className="min-h-screen bg-mesh-gradient relative overflow-hidden">
+            {/* Navigation Menu */}
+            <NavigationMenu />
+
+            {/* Decorative background elements */}
+            <div className="absolute inset-0 overflow-hidden pointer-events-none">
+                <div className="absolute -top-40 -left-40 w-80 h-80 bg-primary/10 rounded-full blur-3xl float-subtle" />
+                <div className="absolute -bottom-40 -right-40 w-96 h-96 bg-accent/10 rounded-full blur-3xl float-subtle" style={{ animationDelay: '-3s' }} />
+                <div className="absolute top-1/2 left-1/4 w-64 h-64 bg-primary/5 rounded-full blur-3xl" />
+            </div>
+
+            <div className="container mx-auto px-4 py-8 max-w-7xl relative z-10">
+                {/* Header */}
+                <div className="mb-8 animate-in fade-in slide-in-from-top duration-700">
+                    <div className="flex items-center justify-between">
+                        <div>
+                            <h1 className="text-3xl md:text-4xl font-bold text-gradient leading-tight">
+                                Detection Map
+                            </h1>
+                            <p className="text-muted-foreground mt-1">
+                                View all detected potholes and signboards on the map
+                            </p>
+                        </div>
+                    </div>
+                </div>
+
+                {/* Map */}
+                <div className="animate-in fade-in slide-in-from-bottom duration-700 delay-100">
+                    <DashboardMap className="h-[calc(100vh-200px)] min-h-[500px]" />
+                </div>
+
+                {/* Legend */}
+                <div className="mt-6 flex flex-wrap gap-6 animate-in fade-in duration-700 delay-200">
+                    <div className="flex items-center gap-2">
+                        <div className="w-4 h-4 rounded-full bg-red-500 border-2 border-red-600" />
+                        <span className="text-sm text-muted-foreground">Pothole</span>
+                    </div>
+                    <div className="flex items-center gap-2">
+                        <div className="w-4 h-4 rounded-full bg-blue-500 border-2 border-blue-600" />
+                        <span className="text-sm text-muted-foreground">Signboard</span>
+                    </div>
+                </div>
+
+                {/* Footer */}
+                <div className="mt-8 text-center animate-in fade-in duration-700 delay-300">
+                    <p className="text-sm text-muted-foreground">
+                        Sentient Geeks Pvt. Ltd.
+                    </p>
+                </div>
+            </div>
+        </div>
+    )
+}
diff --git a/app/page.tsx b/app/page.tsx
index e6aa0a3..53cd430 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -2,6 +2,7 @@
 
 import { useRouter } from "next/navigation"
 import { ProjectSelectionSection } from "@/components/project-selection-section"
+import { SidebarNavigation } from "@/components/sidebar-navigation"
 import { type SessionContext, saveSession } from "@/lib/api"
 
 export default function SelectionPage() {
@@ -14,23 +15,42 @@ export default function SelectionPage() {
   }
 
   return (
-    <div className="min-h-screen bg-gradient-to-b from-background to-muted/20">
-      <div className="container mx-auto px-4 py-8 max-w-7xl">
-        {/* Header */}
-        <div className="mb-8 animate-in fade-in slide-in-from-top duration-700">
-          <h1 className="text-4xl font-bold mb-2 text-balance bg-gradient-to-r from-foreground to-foreground/70 bg-clip-text text-transparent">
-            VisionRoad Detection System
-          </h1>
-          <p className="text-muted-foreground">
-            Select your project location to begin AI-powered road analysis
-          </p>
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50/30 to-indigo-50/50 dark:from-gray-950 dark:via-gray-900 dark:to-gray-950">
+      {/* Sidebar Navigation */}
+      <SidebarNavigation />
+
+      {/* Main Content */}
+      <main className="ml-16 min-h-screen relative overflow-hidden">
+        {/* Decorative background elements */}
+        <div className="absolute inset-0 overflow-hidden pointer-events-none">
+          <div className="absolute -top-40 -left-40 w-80 h-80 bg-indigo-500/10 rounded-full blur-3xl" />
+          <div className="absolute -bottom-40 -right-40 w-96 h-96 bg-purple-500/10 rounded-full blur-3xl" />
+          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-blue-500/5 rounded-full blur-3xl" />
         </div>
 
-        {/* Project Selection Section */}
-        <div className="animate-in fade-in slide-in-from-bottom duration-700 delay-100">
-          <ProjectSelectionSection onSelectionComplete={handleSelectionComplete} />
+        <div className="container mx-auto px-4 py-12 max-w-5xl relative z-10">
+          {/* Premium Header */}
+          <div className="mb-10 animate-in fade-in slide-in-from-top duration-700">
+            <div className="text-center max-w-2xl mx-auto">
+              <h1 className="text-4xl md:text-5xl font-bold mb-4 bg-gradient-to-r from-gray-900 via-indigo-800 to-indigo-600 dark:from-white dark:via-indigo-200 dark:to-indigo-400 bg-clip-text text-transparent leading-tight">
+                VisionRoad Detection System
+              </h1>
+            </div>
+          </div>
+
+          {/* Project Selection Section */}
+          <div className="animate-in fade-in slide-in-from-bottom duration-700 delay-150">
+            <ProjectSelectionSection onSelectionComplete={handleSelectionComplete} />
+          </div>
+
+          {/* Footer */}
+          <div className="mt-12 text-center animate-in fade-in duration-700 delay-300">
+            <p className="text-sm text-gray-400 dark:text-gray-500">
+              Sentient Geeks Pvt. Ltd.
+            </p>
+          </div>
         </div>
-      </div>
+      </main>
     </div>
   )
 }
diff --git a/app/results/page.tsx b/app/results/page.tsx
index 97ef8f2..eeb89dc 100644
--- a/app/results/page.tsx
+++ b/app/results/page.tsx
@@ -5,6 +5,7 @@ import { useRouter } from "next/navigation"
 import { Button } from "@/components/ui/button"
 import { Loader2, ArrowLeft, MapPin, Package, FolderKanban, RotateCcw } from "lucide-react"
 import VideoPlayerSection from "@/components/video-player-section"
+import { SidebarNavigation } from "@/components/sidebar-navigation"
 import {
     type SessionContext,
     loadSession,
@@ -157,83 +158,99 @@ export default function ResultsPage() {
 
     if (isLoading) {
         return (
-            <div className="min-h-screen flex flex-col items-center justify-center gap-4">
-                <Loader2 className="h-8 w-8 animate-spin text-primary" />
-                <p className="text-muted-foreground">Loading detection results...</p>
+            <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50/30 to-indigo-50/50 dark:from-gray-950 dark:via-gray-900 dark:to-gray-950 flex items-center justify-center">
+                <div className="flex flex-col items-center gap-4 p-8 rounded-2xl bg-white/80 dark:bg-gray-800/80 backdrop-blur-xl shadow-lg">
+                    <Loader2 className="h-8 w-8 animate-spin text-indigo-500" />
+                    <p className="text-gray-500">Loading detection results...</p>
+                </div>
             </div>
         )
     }
 
     if (error) {
         return (
-            <div className="min-h-screen flex flex-col items-center justify-center gap-4">
-                <p className="text-destructive">{error}</p>
-                <Button onClick={handleNewAnalysis}>Start New Analysis</Button>
+            <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50/30 to-indigo-50/50 dark:from-gray-950 dark:via-gray-900 dark:to-gray-950 flex items-center justify-center">
+                <div className="flex flex-col items-center gap-4 p-8 rounded-2xl bg-white/80 dark:bg-gray-800/80 backdrop-blur-xl shadow-lg">
+                    <p className="text-red-500">{error}</p>
+                    <Button onClick={handleNewAnalysis} className="bg-gradient-to-r from-indigo-500 to-purple-600 text-white">Start New Analysis</Button>
+                </div>
             </div>
         )
     }
 
     return (
-        <div className="min-h-screen bg-gradient-to-b from-background to-muted/20">
-            <div className="container mx-auto px-4 py-8 max-w-7xl">
-                {/* Header */}
-                <div className="mb-8 animate-in fade-in slide-in-from-top duration-700">
-                    <h1 className="text-4xl font-bold mb-2 text-balance bg-gradient-to-r from-foreground to-foreground/70 bg-clip-text text-transparent">
-                        {getTitle()}
-                    </h1>
-                    <p className="text-muted-foreground">
-                        View your AI-powered road analysis results
-                    </p>
-                </div>
+        <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50/30 to-indigo-50/50 dark:from-gray-950 dark:via-gray-900 dark:to-gray-950">
+            {/* Sidebar Navigation */}
+            <SidebarNavigation />
 
-                {/* Session Info Bar */}
-                {session && (
-                    <div className="mb-6 animate-in fade-in slide-in-from-top duration-500">
-                        <div className="flex items-center justify-between p-4 rounded-lg bg-gradient-to-r from-primary/10 via-primary/5 to-transparent border border-primary/20">
-                            <div className="flex items-center gap-6 text-sm">
-                                <div className="flex items-center gap-2">
-                                    <FolderKanban className="h-4 w-4 text-primary" />
-                                    <span className="text-muted-foreground">Project:</span>
-                                    <span className="font-medium">{session.projectName}</span>
+            {/* Main Content */}
+            <main className="ml-16 min-h-screen">
+                <div className="container mx-auto px-4 py-8 max-w-7xl">
+                    {/* Header */}
+                    <div className="mb-8 animate-in fade-in slide-in-from-top duration-700">
+                        <h1 className="text-4xl font-bold mb-2 bg-gradient-to-r from-gray-900 via-indigo-800 to-indigo-600 dark:from-white dark:via-indigo-200 dark:to-indigo-400 bg-clip-text text-transparent">
+                            {getTitle()}
+                        </h1>
+                        <p className="text-gray-500 dark:text-gray-400">
+                            View your AI-powered road analysis results
+                        </p>
+                    </div>
+
+                    {/* Session Info Bar */}
+                    {session && (
+                        <div className="mb-6 animate-in fade-in slide-in-from-top duration-500">
+                            <div className="flex items-center justify-between p-4 rounded-xl bg-white/60 dark:bg-gray-800/60 backdrop-blur-sm border border-gray-200/50 dark:border-gray-700/50">
+                                <div className="flex items-center gap-6 text-sm">
+                                    <div className="flex items-center gap-2">
+                                        <div className="p-1.5 rounded-lg bg-gradient-to-br from-indigo-400 to-purple-500 shadow-md shadow-indigo-500/30">
+                                            <FolderKanban className="h-4 w-4 text-white" />
+                                        </div>
+                                        <span className="text-gray-500 dark:text-gray-400 text-xs uppercase font-semibold tracking-wide">Project:</span>
+                                        <span className="font-bold text-gray-900 dark:text-white bg-gradient-to-r from-indigo-600 to-purple-600 dark:from-indigo-400 dark:to-purple-400 bg-clip-text text-transparent">{session.projectName}</span>
+                                    </div>
+                                    <div className="flex items-center gap-2">
+                                        <div className="p-1.5 rounded-lg bg-gradient-to-br from-emerald-400 to-teal-500 shadow-md shadow-emerald-500/30">
+                                            <Package className="h-4 w-4 text-white" />
+                                        </div>
+                                        <span className="text-gray-500 dark:text-gray-400 text-xs uppercase font-semibold tracking-wide">Package:</span>
+                                        <span className="font-bold text-gray-900 dark:text-white bg-gradient-to-r from-emerald-600 to-teal-600 dark:from-emerald-400 dark:to-teal-400 bg-clip-text text-transparent">{session.packageName}</span>
+                                    </div>
+                                    <div className="flex items-center gap-2">
+                                        <div className="p-1.5 rounded-lg bg-gradient-to-br from-purple-400 to-pink-500 shadow-md shadow-purple-500/30">
+                                            <MapPin className="h-4 w-4 text-white" />
+                                        </div>
+                                        <span className="text-gray-500 dark:text-gray-400 text-xs uppercase font-semibold tracking-wide">Location:</span>
+                                        <span className="font-bold text-gray-900 dark:text-white bg-gradient-to-r from-purple-600 to-pink-600 dark:from-purple-400 dark:to-pink-400 bg-clip-text text-transparent">{session.locationName}</span>
+                                    </div>
                                 </div>
-                                <div className="flex items-center gap-2">
-                                    <Package className="h-4 w-4 text-primary" />
-                                    <span className="text-muted-foreground">Package:</span>
-                                    <span className="font-medium">{session.packageName}</span>
+                                <div className="flex gap-2">
+                                    <Button variant="ghost" size="sm" onClick={handleBackToUpload} className="text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">
+                                        <ArrowLeft className="h-4 w-4 mr-2" />
+                                        Back to Upload
+                                    </Button>
+                                    <Button variant="outline" size="sm" onClick={handleNewAnalysis} className="border-indigo-200 dark:border-indigo-800 text-indigo-600 dark:text-indigo-400 hover:bg-indigo-50 dark:hover:bg-indigo-900/50">
+                                        <RotateCcw className="h-4 w-4 mr-2" />
+                                        New Analysis
+                                    </Button>
                                 </div>
-                                <div className="flex items-center gap-2">
-                                    <MapPin className="h-4 w-4 text-primary" />
-                                    <span className="text-muted-foreground">Location:</span>
-                                    <span className="font-medium">{session.locationName}</span>
-                                </div>
-                            </div>
-                            <div className="flex gap-2">
-                                <Button variant="ghost" size="sm" onClick={handleBackToUpload}>
-                                    <ArrowLeft className="h-4 w-4 mr-2" />
-                                    Back to Upload
-                                </Button>
-                                <Button variant="outline" size="sm" onClick={handleNewAnalysis}>
-                                    <RotateCcw className="h-4 w-4 mr-2" />
-                                    New Analysis
-                                </Button>
                             </div>
                         </div>
-                    </div>
-                )}
+                    )}
 
-                {/* Video Player Section */}
-                {detectionData && videoId && (
-                    <div className="animate-in fade-in slide-in-from-bottom duration-700">
-                        <VideoPlayerSection
-                            data={detectionData}
-                            videoId={videoId}
-                            videoFile={videoFile}
-                            detectionType={detectionType}
-                            projectId={session?.projectId || undefined}
-                        />
-                    </div>
-                )}
-            </div>
+                    {/* Video Player Section */}
+                    {detectionData && videoId && (
+                        <div className="animate-in fade-in slide-in-from-bottom duration-700">
+                            <VideoPlayerSection
+                                data={detectionData}
+                                videoId={videoId}
+                                videoFile={videoFile}
+                                detectionType={detectionType}
+                                projectId={session?.projectId || undefined}
+                            />
+                        </div>
+                    )}
+                </div>
+            </main>
         </div>
     )
 }
diff --git a/app/upload/page.tsx b/app/upload/page.tsx
index a411602..04a18bc 100644
--- a/app/upload/page.tsx
+++ b/app/upload/page.tsx
@@ -6,9 +6,9 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/com
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
-import { Progress } from "@/components/ui/progress"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
-import { Upload, Loader2, AlertCircle, ArrowLeft, MapPin, Package, FolderKanban } from "lucide-react"
+import { Loader2 } from "lucide-react"
+import { SidebarNavigation } from "@/components/sidebar-navigation"
 import {
     type SessionContext,
     loadSession,
@@ -71,7 +71,6 @@ export default function UploadPage() {
             if (data.type === "complete" || data.status === "completed") {
                 setStatusMessage("Processing completed! Saving video...")
                 ws.close()
-                // Store video file in IndexedDB for results page
                 if (file) {
                     try {
                         await storeVideoFile(videoId, file)
@@ -79,7 +78,6 @@ export default function UploadPage() {
                         console.error("Failed to store video file:", err)
                     }
                 }
-                // Save video data and navigate to results
                 saveVideoData({ videoId, detectionType })
                 setStatusMessage("Redirecting to results...")
                 setTimeout(() => router.push("/results"), 500)
@@ -154,184 +152,244 @@ export default function UploadPage() {
 
     const getTitle = () => {
         return detectionType === "pothole-detection"
-            ? "Pothole Detection System"
-            : "Signboard Detection System"
+            ? "Pothole Detection"
+            : "Signboard Detection"
     }
 
     if (isLoading) {
         return (
-            <div className="min-h-screen flex items-center justify-center">
-                <Loader2 className="h-8 w-8 animate-spin text-primary" />
+            <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50/30 to-indigo-50/50 dark:from-gray-950 dark:via-gray-900 dark:to-gray-950 flex items-center justify-center">
+                <div className="p-8 rounded-2xl bg-white/80 dark:bg-gray-800/80 backdrop-blur-xl shadow-lg">
+                    <Loader2 className="h-8 w-8 animate-spin text-indigo-500" />
+                </div>
             </div>
         )
     }
 
     return (
-        <div className="min-h-screen bg-gradient-to-b from-background to-muted/20">
-            <div className="container mx-auto px-4 py-8 max-w-7xl">
-                {/* Header */}
-                <div className="mb-8 animate-in fade-in slide-in-from-top duration-700">
-                    <h1 className="text-4xl font-bold mb-2 text-balance bg-gradient-to-r from-foreground to-foreground/70 bg-clip-text text-transparent">
-                        {getTitle()}
-                    </h1>
-                    <p className="text-muted-foreground">
-                        Upload a video to detect and analyze with AI-powered processing
-                    </p>
+        <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50/30 to-indigo-50/50 dark:from-gray-950 dark:via-gray-900 dark:to-gray-950">
+            {/* Sidebar Navigation */}
+            <SidebarNavigation />
+
+            {/* Main Content */}
+            <main className="ml-16 min-h-screen relative overflow-hidden flex flex-col">
+                {/* Decorative background elements */}
+                <div className="absolute inset-0 overflow-hidden pointer-events-none">
+                    <div className="absolute -top-40 -left-40 w-80 h-80 bg-indigo-500/10 rounded-full blur-3xl" />
+                    <div className="absolute -bottom-40 -right-40 w-96 h-96 bg-purple-500/10 rounded-full blur-3xl" />
                 </div>
 
-                {/* Session Info Bar */}
-                {session && (
-                    <div className="mb-6 animate-in fade-in slide-in-from-top duration-500">
-                        <div className="flex items-center justify-between p-4 rounded-lg bg-gradient-to-r from-primary/10 via-primary/5 to-transparent border border-primary/20">
-                            <div className="flex items-center gap-6 text-sm">
-                                <div className="flex items-center gap-2">
-                                    <FolderKanban className="h-4 w-4 text-primary" />
-                                    <span className="text-muted-foreground">Project:</span>
-                                    <span className="font-medium">{session.projectName}</span>
-                                </div>
-                                <div className="flex items-center gap-2">
-                                    <Package className="h-4 w-4 text-primary" />
-                                    <span className="text-muted-foreground">Package:</span>
-                                    <span className="font-medium">{session.packageName}</span>
-                                </div>
-                                <div className="flex items-center gap-2">
-                                    <MapPin className="h-4 w-4 text-primary" />
-                                    <span className="text-muted-foreground">Location:</span>
-                                    <span className="font-medium">{session.locationName}</span>
-                                </div>
-                            </div>
-                            <Button variant="ghost" size="sm" onClick={handleBackToSelection}>
-                                <ArrowLeft className="h-4 w-4 mr-2" />
-                                Change Selection
-                            </Button>
+                <div className="flex-1 container mx-auto px-4 py-6 max-w-6xl relative z-10 flex flex-col">
+                    {/* Compact Header */}
+                    <div className="mb-4 animate-in fade-in slide-in-from-top duration-700">
+                        <div className="text-center">
+                            <h1 className="text-3xl md:text-4xl font-bold bg-gradient-to-r from-gray-900 via-indigo-800 to-indigo-600 dark:from-white dark:via-indigo-200 dark:to-indigo-400 bg-clip-text text-transparent leading-tight">
+                                {getTitle()}
+                            </h1>
                         </div>
                     </div>
-                )}
 
-                {/* Upload Card */}
-                <Card className="transition-all hover:shadow-lg animate-in fade-in slide-in-from-bottom duration-700">
-                    <CardHeader>
-                        <CardTitle>Upload Video</CardTitle>
-                        <CardDescription>
-                            Select a video file, detection type, and vehicle speed to start AI-powered analysis
-                        </CardDescription>
-                    </CardHeader>
-                    <CardContent className="space-y-4">
-                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                            {/* Video File Input */}
-                            <div className="space-y-2">
-                                <Label htmlFor="video-file">Video File</Label>
-                                <Input
-                                    id="video-file"
-                                    type="file"
-                                    accept="video/*"
-                                    onChange={(e) => {
-                                        setFile(e.target.files?.[0] || null)
-                                        setError(null)
-                                    }}
-                                    disabled={uploading}
-                                />
-                                {file && (
-                                    <p className="text-sm text-muted-foreground">
-                                        Selected: {file.name} ({(file.size / 1024 / 1024).toFixed(2)} MB)
-                                    </p>
-                                )}
-                            </div>
-
-                            {/* JSON File Input */}
-                            <div className="space-y-2">
-                                <Label htmlFor="json-file">GPS JSON File</Label>
-                                <Input
-                                    id="json-file"
-                                    type="file"
-                                    accept=".json,application/json"
-                                    onChange={(e) => {
-                                        setJsonFile(e.target.files?.[0] || null)
-                                        setError(null)
-                                    }}
-                                    disabled={uploading}
-                                />
-                                {jsonFile && (
-                                    <p className="text-sm text-muted-foreground">
-                                        Selected: {jsonFile.name} ({(jsonFile.size / 1024).toFixed(2)} KB)
-                                    </p>
-                                )}
-                            </div>
-
-                            {/* Detection Type */}
-                            <div className="space-y-2">
-                                <Label htmlFor="detection-type">Detection Type</Label>
-                                <Select
-                                    value={detectionType}
-                                    onValueChange={(v) => setDetectionType(v as DetectionType)}
-                                    disabled={uploading}
-                                >
-                                    <SelectTrigger id="detection-type">
-                                        <SelectValue placeholder="Select detection type" />
-                                    </SelectTrigger>
-                                    <SelectContent>
-                                        <SelectItem value="pothole-detection">Pothole Detection</SelectItem>
-                                        <SelectItem value="sign-board-detection">Signboard Detection</SelectItem>
-                                    </SelectContent>
-                                </Select>
-                            </div>
-
-                            {/* Speed Input */}
-                            <div className="space-y-2">
-                                <Label htmlFor="speed">Speed (km/h)</Label>
-                                <Input
-                                    id="speed"
-                                    type="number"
-                                    min={1}
-                                    max={200}
-                                    value={speed}
-                                    onChange={(e) => setSpeed(Number(e.target.value))}
-                                    disabled={uploading}
-                                />
-                            </div>
-                        </div>
-
-                        {/* Error Display */}
-                        {error && (
-                            <div className="flex items-start gap-2 p-3 rounded-lg bg-destructive/10 text-destructive">
-                                <AlertCircle className="h-5 w-5 mt-0.5 flex-shrink-0" />
-                                <p className="text-sm whitespace-pre-line">{error}</p>
-                            </div>
-                        )}
-
-                        {/* Upload Button */}
-                        <Button
-                            onClick={handleUpload}
-                            disabled={!file || uploading}
-                            className="w-full"
-                            size="lg"
-                        >
-                            {uploading ? (
-                                <>
-                                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                                    Processing...
-                                </>
-                            ) : (
-                                <>
-                                    <Upload className="mr-2 h-4 w-4" />
-                                    Upload & Process
-                                </>
-                            )}
-                        </Button>
-
-                        {/* Progress Section */}
-                        {uploading && (
-                            <div className="space-y-3 animate-in fade-in slide-in-from-top duration-500">
-                                <Progress value={progress} className="h-3" />
-                                <div className="flex items-center justify-between text-sm">
-                                    <span className="text-muted-foreground">{statusMessage}</span>
-                                    <span className="font-semibold">{progress}%</span>
+                    {/* Compact Session Info Bar */}
+                    {session && (
+                        <div className="mb-4 animate-in fade-in slide-in-from-top duration-500 delay-100">
+                            <div className="rounded-xl px-4 py-3 bg-white/60 dark:bg-gray-800/60 backdrop-blur-sm border border-gray-200/50 dark:border-gray-700/50">
+                                <div className="flex items-center justify-between gap-4">
+                                    <div className="flex items-center gap-6 text-sm">
+                                        <div>
+                                            <p className="text-[10px] font-medium text-gray-500 uppercase tracking-wide">Project</p>
+                                            <p className="font-medium text-gray-900 dark:text-white text-sm">{session.projectName}</p>
+                                        </div>
+                                        <div className="w-px h-8 bg-gray-300 dark:bg-gray-600" />
+                                        <div>
+                                            <p className="text-[10px] font-medium text-gray-500 uppercase tracking-wide">Package</p>
+                                            <p className="font-medium text-gray-900 dark:text-white text-sm">{session.packageName}</p>
+                                        </div>
+                                        <div className="w-px h-8 bg-gray-300 dark:bg-gray-600" />
+                                        <div>
+                                            <p className="text-[10px] font-medium text-gray-500 uppercase tracking-wide">Location</p>
+                                            <p className="font-medium text-gray-900 dark:text-white text-sm">{session.locationName}</p>
+                                        </div>
+                                    </div>
+                                    <Button
+                                        variant="ghost"
+                                        size="sm"
+                                        onClick={handleBackToSelection}
+                                        className="text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 text-xs"
+                                    >
+                                        Change Selection
+                                    </Button>
                                 </div>
                             </div>
-                        )}
-                    </CardContent>
-                </Card>
-            </div>
+                        </div>
+                    )}
+
+                    {/* Upload Card */}
+                    <Card className="bg-white/70 dark:bg-gray-800/70 backdrop-blur-sm border-0 shadow-lg shadow-gray-200/50 dark:shadow-gray-900/50 rounded-xl overflow-hidden animate-in fade-in slide-in-from-bottom duration-700 delay-150 flex-1">
+                        <CardHeader className="pb-4 border-b border-gray-100 dark:border-gray-700 bg-gradient-to-r from-indigo-50 to-purple-50 dark:from-indigo-950/30 dark:to-purple-950/30">
+                            <CardTitle className="text-xl font-bold">
+                                <span className="bg-gradient-to-r from-indigo-600 via-purple-500 to-indigo-600 dark:from-indigo-400 dark:via-purple-400 dark:to-indigo-400 bg-clip-text text-transparent">
+                                    Upload Video
+                                </span>
+                            </CardTitle>
+                            <CardDescription className="text-sm">
+                                Select video file, detection type, and vehicle speed for analysis
+                            </CardDescription>
+                        </CardHeader>
+                        <CardContent className="pt-4 space-y-4">
+                            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                                {/* Video File Input */}
+                                <div className="space-y-2">
+                                    <Label htmlFor="video-file" className="text-sm font-semibold">
+                                        Video File
+                                    </Label>
+                                    <Input
+                                        id="video-file"
+                                        type="file"
+                                        accept="video/*"
+                                        onChange={(e) => {
+                                            setFile(e.target.files?.[0] || null)
+                                            setError(null)
+                                        }}
+                                        disabled={uploading}
+                                        className="h-10 bg-gray-50 dark:bg-gray-800 file:mr-3 file:py-1.5 file:px-3 file:rounded-md file:border-0 file:bg-indigo-100 dark:file:bg-indigo-900/50 file:text-indigo-600 dark:file:text-indigo-400 file:font-medium file:text-xs hover:file:bg-indigo-200"
+                                    />
+                                    {file && (
+                                        <div className="p-2 rounded-lg bg-indigo-50 dark:bg-indigo-900/30 border border-indigo-200 dark:border-indigo-800">
+                                            <p className="text-xs font-medium text-gray-900 dark:text-white">{file.name}</p>
+                                            <p className="text-[10px] text-gray-500">
+                                                {(file.size / 1024 / 1024).toFixed(2)} MB
+                                            </p>
+                                        </div>
+                                    )}
+                                </div>
+
+                                {/* JSON File Input */}
+                                <div className="space-y-2">
+                                    <Label htmlFor="json-file" className="text-sm font-semibold">
+                                        GPS JSON File <span className="text-gray-400 font-normal text-xs">(Optional)</span>
+                                    </Label>
+                                    <Input
+                                        id="json-file"
+                                        type="file"
+                                        accept=".json,application/json"
+                                        onChange={(e) => {
+                                            setJsonFile(e.target.files?.[0] || null)
+                                            setError(null)
+                                        }}
+                                        disabled={uploading}
+                                        className="h-10 bg-gray-50 dark:bg-gray-800 file:mr-3 file:py-1.5 file:px-3 file:rounded-md file:border-0 file:bg-indigo-100 dark:file:bg-indigo-900/50 file:text-indigo-600 dark:file:text-indigo-400 file:font-medium file:text-xs hover:file:bg-indigo-200"
+                                    />
+                                    {jsonFile && (
+                                        <div className="p-2 rounded-lg bg-indigo-50 dark:bg-indigo-900/30 border border-indigo-200 dark:border-indigo-800">
+                                            <p className="text-xs font-medium text-gray-900 dark:text-white">{jsonFile.name}</p>
+                                            <p className="text-[10px] text-gray-500">
+                                                {(jsonFile.size / 1024).toFixed(2)} KB
+                                            </p>
+                                        </div>
+                                    )}
+                                </div>
+
+                                {/* Detection Type */}
+                                <div className="space-y-2">
+                                    <Label htmlFor="detection-type" className="text-sm font-semibold">
+                                        Detection Type
+                                    </Label>
+                                    <Select
+                                        value={detectionType}
+                                        onValueChange={(v) => setDetectionType(v as DetectionType)}
+                                        disabled={uploading}
+                                    >
+                                        <SelectTrigger id="detection-type" className="h-10 bg-gray-50 dark:bg-gray-800">
+                                            <SelectValue placeholder="Select detection type" />
+                                        </SelectTrigger>
+                                        <SelectContent>
+                                            <SelectItem value="pothole-detection">
+                                                <span className="font-medium">Pothole Detection</span>
+                                            </SelectItem>
+                                            <SelectItem value="sign-board-detection">
+                                                <span className="font-medium">Signboard Detection</span>
+                                            </SelectItem>
+                                        </SelectContent>
+                                    </Select>
+                                </div>
+
+                                {/* Speed Input */}
+                                <div className="space-y-2">
+                                    <Label htmlFor="speed" className="text-sm font-semibold">
+                                        Vehicle Speed (km/h)
+                                    </Label>
+                                    <Input
+                                        id="speed"
+                                        type="number"
+                                        min={1}
+                                        max={200}
+                                        value={speed}
+                                        onChange={(e) => setSpeed(Number(e.target.value))}
+                                        disabled={uploading}
+                                        className="h-10 bg-gray-50 dark:bg-gray-800"
+                                    />
+                                </div>
+                            </div>
+
+                            {/* Error Display */}
+                            {error && (
+                                <div className="flex items-start gap-2 p-3 rounded-lg bg-red-50 dark:bg-red-950/30 border border-red-200 dark:border-red-800 animate-in fade-in slide-in-from-top duration-300">
+                                    <div className="w-4 h-4 rounded-full bg-red-100 dark:bg-red-900/50 flex items-center justify-center flex-shrink-0 mt-0.5">
+                                        <span className="text-[10px] font-bold text-red-500">!</span>
+                                    </div>
+                                    <p className="text-xs text-red-600 dark:text-red-400 leading-relaxed whitespace-pre-line">{error}</p>
+                                </div>
+                            )}
+
+                            {/* Upload Button */}
+                            <Button
+                                onClick={handleUpload}
+                                disabled={!file || uploading}
+                                className={`w-full h-12 text-sm font-semibold transition-all rounded-xl ${file && !uploading ? 'bg-gradient-to-r from-indigo-500 to-purple-600 hover:from-indigo-600 hover:to-purple-700 text-white shadow-lg shadow-indigo-500/25' : ''
+                                    }`}
+                                size="lg"
+                            >
+                                {uploading ? (
+                                    <span className="flex items-center gap-2">
+                                        <Loader2 className="h-4 w-4 animate-spin" />
+                                        Processing...
+                                    </span>
+                                ) : (
+                                    "Upload and Process"
+                                )}
+                            </Button>
+
+                            {/* Progress Section */}
+                            {uploading && (
+                                <div className="space-y-3 p-4 rounded-xl bg-indigo-50 dark:bg-indigo-950/30 border border-indigo-200 dark:border-indigo-800 animate-in fade-in slide-in-from-top duration-500">
+                                    <div className="space-y-2">
+                                        <div className="flex items-center justify-between text-sm">
+                                            <span className="font-medium text-gray-700 dark:text-gray-300 text-xs">Processing Progress</span>
+                                            <span className="font-bold text-indigo-600 dark:text-indigo-400 text-xs">{progress}%</span>
+                                        </div>
+                                        <div className="h-2 rounded-full bg-indigo-100 dark:bg-indigo-900/50 overflow-hidden">
+                                            <div
+                                                className="h-full bg-gradient-to-r from-indigo-500 to-purple-600 rounded-full transition-all duration-300"
+                                                style={{ width: `${progress}%` }}
+                                            />
+                                        </div>
+                                    </div>
+                                    {statusMessage && (
+                                        <p className="text-xs text-gray-500">{statusMessage}</p>
+                                    )}
+                                </div>
+                            )}
+                        </CardContent>
+                    </Card>
+
+                    {/* Footer */}
+                    <div className="mt-4 text-center animate-in fade-in duration-700 delay-300">
+                        <p className="text-xs text-gray-400 dark:text-gray-500">
+                            Sentient Geeks Pvt. Ltd.
+                        </p>
+                    </div>
+                </div>
+            </main>
         </div>
     )
 }
diff --git a/components/dashboard/compact-project-selector.tsx b/components/dashboard/compact-project-selector.tsx
new file mode 100644
index 0000000..f444159
--- /dev/null
+++ b/components/dashboard/compact-project-selector.tsx
@@ -0,0 +1,84 @@
+"use client"
+
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from "@/components/ui/select"
+import { FolderOpen, MapPin, Building2 } from "lucide-react"
+import { type Project } from "@/lib/api"
+
+interface CompactProjectSelectorProps {
+    projects: Project[]
+    selectedProjectId: string | null
+    onProjectChange: (projectId: string) => void
+    selectedProject: Project | undefined
+    isLoading?: boolean
+}
+
+export function CompactProjectSelector({
+    projects,
+    selectedProjectId,
+    onProjectChange,
+    selectedProject,
+    isLoading = false
+}: CompactProjectSelectorProps) {
+    return (
+        <div className="flex flex-wrap items-center gap-3 p-3 rounded-xl bg-white/60 dark:bg-gray-800/60 backdrop-blur-sm border border-gray-200/50 dark:border-gray-700/50">
+            {/* Project Dropdown */}
+            <div className="flex items-center gap-2">
+                <div className="p-1.5 rounded-lg bg-indigo-100 dark:bg-indigo-900/50">
+                    <FolderOpen className="h-4 w-4 text-indigo-500" />
+                </div>
+                <Select
+                    value={selectedProjectId || ""}
+                    onValueChange={onProjectChange}
+                    disabled={isLoading || projects.length === 0}
+                >
+                    <SelectTrigger className="w-[220px] h-8 text-sm bg-transparent border-0 shadow-none focus:ring-0 px-1">
+                        <SelectValue placeholder="Select project" />
+                    </SelectTrigger>
+                    <SelectContent>
+                        {projects.map((project) => (
+                            <SelectItem key={project.id} value={project.id}>
+                                {project.name}
+                            </SelectItem>
+                        ))}
+                    </SelectContent>
+                </Select>
+            </div>
+
+            {/* Corridor Badge */}
+            {selectedProject?.corridor_name && (
+                <>
+                    <div className="h-5 w-px bg-gray-300 dark:bg-gray-600" />
+                    <div className="flex items-center gap-2">
+                        <div className="p-1.5 rounded-lg bg-emerald-100 dark:bg-emerald-900/50">
+                            <MapPin className="h-3.5 w-3.5 text-emerald-500" />
+                        </div>
+                        <span className="text-sm text-gray-600 dark:text-gray-300">
+                            {selectedProject.corridor_name}
+                        </span>
+                    </div>
+                </>
+            )}
+
+            {/* State Badge */}
+            {selectedProject?.state && (
+                <>
+                    <div className="h-5 w-px bg-gray-300 dark:bg-gray-600" />
+                    <div className="flex items-center gap-2">
+                        <div className="p-1.5 rounded-lg bg-purple-100 dark:bg-purple-900/50">
+                            <Building2 className="h-3.5 w-3.5 text-purple-500" />
+                        </div>
+                        <span className="text-sm text-gray-600 dark:text-gray-300">
+                            {selectedProject.state}
+                        </span>
+                    </div>
+                </>
+            )}
+        </div>
+    )
+}
diff --git a/components/dashboard/dashboard-map-content.tsx b/components/dashboard/dashboard-map-content.tsx
new file mode 100644
index 0000000..34448b0
--- /dev/null
+++ b/components/dashboard/dashboard-map-content.tsx
@@ -0,0 +1,130 @@
+"use client"
+
+import { useEffect } from "react"
+import { MapContainer, TileLayer, CircleMarker, Popup, useMap } from "react-leaflet"
+import { LatLngBounds, LatLng } from "leaflet"
+import "leaflet/dist/leaflet.css"
+import { type Detection } from "@/lib/api"
+
+interface DashboardMapContentProps {
+    detections: Detection[]
+}
+
+// Component to auto-fit map bounds to show all markers
+function FitBounds({ bounds }: { bounds: LatLngBounds }) {
+    const map = useMap()
+
+    useEffect(() => {
+        if (bounds.isValid()) {
+            map.fitBounds(bounds, { padding: [50, 50] })
+        }
+    }, [bounds, map])
+
+    return null
+}
+
+export default function DashboardMapContent({ detections }: DashboardMapContentProps) {
+    if (detections.length === 0) {
+        return (
+            <div className="h-full w-full flex items-center justify-center bg-muted/20">
+                <p className="text-muted-foreground">No detections to display</p>
+            </div>
+        )
+    }
+
+    // Calculate bounds to fit all markers
+    const firstDetection = detections[0]
+    const bounds = new LatLngBounds(
+        new LatLng(firstDetection.latitude!, firstDetection.longitude!),
+        new LatLng(firstDetection.latitude!, firstDetection.longitude!)
+    )
+
+    detections.forEach(d => {
+        if (d.latitude && d.longitude) {
+            bounds.extend(new LatLng(d.latitude, d.longitude))
+        }
+    })
+
+    // Center point
+    const center: [number, number] = [
+        (bounds.getNorth() + bounds.getSouth()) / 2,
+        (bounds.getEast() + bounds.getWest()) / 2
+    ]
+
+    // Get marker color based on detection type
+    const getMarkerColor = (type: string) => {
+        if (type.toLowerCase().includes("pothole")) {
+            return { fill: "#ef4444", stroke: "#dc2626" } // Red for potholes
+        }
+        return { fill: "#3b82f6", stroke: "#2563eb" } // Blue for signboards
+    }
+
+    // Get display name for detection type
+    const getTypeName = (type: string) => {
+        if (type.toLowerCase().includes("pothole")) {
+            return "Pothole"
+        }
+        return "Signboard"
+    }
+
+    return (
+        <MapContainer
+            center={center}
+            zoom={13}
+            className="h-full w-full"
+            scrollWheelZoom={true}
+        >
+            <TileLayer
+                attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+            />
+
+            {/* Detection markers */}
+            {detections.map((detection, idx) => {
+                const colors = getMarkerColor(detection.type)
+                const typeName = getTypeName(detection.type)
+
+                return (
+                    <CircleMarker
+                        key={`${detection.id}-${idx}`}
+                        center={[detection.latitude!, detection.longitude!]}
+                        radius={10}
+                        fillColor={colors.fill}
+                        color={colors.stroke}
+                        weight={2}
+                        opacity={1}
+                        fillOpacity={0.8}
+                    >
+                        <Popup>
+                            <div className="text-sm space-y-2 min-w-[180px]">
+                                <div className="font-bold text-base border-b pb-1">
+                                    {typeName}
+                                </div>
+                                <div className="space-y-1">
+                                    <div className="flex justify-between">
+                                        <span className="text-muted-foreground">Class:</span>
+                                        <span className="font-medium">{detection.class.replace(/_/g, " ")}</span>
+                                    </div>
+                                    <div className="flex justify-between">
+                                        <span className="text-muted-foreground">Confidence:</span>
+                                        <span className="font-medium">{(detection.confidence * 100).toFixed(1)}%</span>
+                                    </div>
+                                </div>
+                                <div className="pt-2 border-t">
+                                    <div className="text-xs text-muted-foreground mb-1">Coordinates</div>
+                                    <div className="font-mono text-xs bg-muted/30 p-2 rounded">
+                                        <div>Lat: {detection.latitude!.toFixed(6)}</div>
+                                        <div>Lng: {detection.longitude!.toFixed(6)}</div>
+                                    </div>
+                                </div>
+                            </div>
+                        </Popup>
+                    </CircleMarker>
+                )
+            })}
+
+            {/* Auto-fit bounds */}
+            <FitBounds bounds={bounds} />
+        </MapContainer>
+    )
+}
diff --git a/components/dashboard/dashboard-map.tsx b/components/dashboard/dashboard-map.tsx
new file mode 100644
index 0000000..930098f
--- /dev/null
+++ b/components/dashboard/dashboard-map.tsx
@@ -0,0 +1,116 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import dynamic from "next/dynamic"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Loader2, MapPin, AlertTriangle, RectangleHorizontal } from "lucide-react"
+import { fetchAllDetections, type Detection } from "@/lib/api"
+
+// Dynamically import the map to avoid SSR issues with Leaflet
+const DashboardMapContent = dynamic(
+    () => import("./dashboard-map-content"),
+    {
+        ssr: false,
+        loading: () => (
+            <div className="h-full w-full flex items-center justify-center">
+                <Loader2 className="h-8 w-8 animate-spin text-primary" />
+            </div>
+        )
+    }
+)
+
+interface DashboardMapProps {
+    className?: string
+}
+
+export function DashboardMap({ className }: DashboardMapProps) {
+    const [detections, setDetections] = useState<Detection[]>([])
+    const [isLoading, setIsLoading] = useState(true)
+    const [error, setError] = useState<string | null>(null)
+
+    useEffect(() => {
+        const loadDetections = async () => {
+            try {
+                setIsLoading(true)
+                setError(null)
+                const data = await fetchAllDetections()
+                setDetections(data)
+            } catch (err) {
+                console.error("Failed to load detections:", err)
+                setError("Failed to load detection data")
+            } finally {
+                setIsLoading(false)
+            }
+        }
+
+        loadDetections()
+    }, [])
+
+    // Filter detections with valid GPS coordinates
+    const validDetections = detections.filter(d => d.latitude && d.longitude)
+
+    // Count potholes and signboards
+    const potholeCount = validDetections.filter(d =>
+        d.type?.toLowerCase().includes("pothole") ||
+        d.class?.toLowerCase().includes("pothole")
+    ).length
+    const signboardCount = validDetections.length - potholeCount
+
+    return (
+        <Card className={`bg-white/70 dark:bg-gray-800/70 backdrop-blur-sm border-0 shadow-lg shadow-gray-200/50 dark:shadow-gray-900/50 rounded-xl overflow-hidden ${className}`}>
+            <CardHeader className="pb-2 bg-gradient-to-r from-indigo-50 to-purple-50 dark:from-indigo-950/30 dark:to-purple-950/30">
+                <div className="flex items-center justify-between">
+                    <div className="flex items-center gap-2">
+                        <div className="p-1.5 rounded-lg bg-gradient-to-br from-indigo-400 to-purple-500 shadow-md shadow-indigo-500/30">
+                            <MapPin className="h-4 w-4 text-white" />
+                        </div>
+                        <div>
+                            <CardTitle className="text-base font-bold">
+                                <span className="bg-gradient-to-r from-indigo-600 via-purple-500 to-indigo-600 dark:from-indigo-400 dark:via-purple-400 dark:to-indigo-400 bg-clip-text text-transparent">
+                                    Detection Map
+                                </span>
+                            </CardTitle>
+                            <p className="text-xs text-gray-500 dark:text-gray-400">
+                                {isLoading ? "Loading..." : `${validDetections.length} detections with GPS coordinates`}
+                            </p>
+                        </div>
+                    </div>
+
+                    {/* Compact Color Legend */}
+                    <div className="flex items-center gap-4 text-xs">
+                        <div className="flex items-center gap-1.5">
+                            <div className="w-3 h-3 rounded-full bg-red-500 shadow-sm shadow-red-500/50" />
+                            <span className="text-gray-600 dark:text-gray-400 font-medium">Potholes ({potholeCount})</span>
+                        </div>
+                        <div className="flex items-center gap-1.5">
+                            <div className="w-3 h-3 rounded-full bg-blue-500 shadow-sm shadow-blue-500/50" />
+                            <span className="text-gray-600 dark:text-gray-400 font-medium">Signboards ({signboardCount})</span>
+                        </div>
+                    </div>
+                </div>
+            </CardHeader>
+            <CardContent className="p-0">
+                <div className="h-[400px] w-full relative">
+                    {isLoading ? (
+                        <div className="h-full w-full flex items-center justify-center bg-gray-50 dark:bg-gray-900/50">
+                            <Loader2 className="h-8 w-8 animate-spin text-indigo-500" />
+                        </div>
+                    ) : error ? (
+                        <div className="h-full w-full flex items-center justify-center bg-gray-50 dark:bg-gray-900/50">
+                            <p className="text-gray-500">{error}</p>
+                        </div>
+                    ) : validDetections.length === 0 ? (
+                        <div className="h-full w-full flex items-center justify-center bg-gray-50 dark:bg-gray-900/50">
+                            <div className="text-center">
+                                <p className="text-gray-500">No detections with GPS coordinates found</p>
+                                <p className="text-sm text-gray-400 mt-1">Process some videos to see detections on the map</p>
+                            </div>
+                        </div>
+                    ) : (
+                        <DashboardMapContent detections={validDetections} />
+                    )}
+                </div>
+            </CardContent>
+        </Card>
+    )
+}
diff --git a/components/dashboard/detection-chart.tsx b/components/dashboard/detection-chart.tsx
new file mode 100644
index 0000000..d8664cf
--- /dev/null
+++ b/components/dashboard/detection-chart.tsx
@@ -0,0 +1,117 @@
+"use client"
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+
+interface DetectionChartProps {
+    potholes: number
+    signboards: number
+    isLoading?: boolean
+}
+
+export function DetectionChart({ potholes, signboards, isLoading }: DetectionChartProps) {
+    const total = potholes + signboards
+    const potholePercent = total > 0 ? (potholes / total) * 100 : 50
+    const signboardPercent = total > 0 ? (signboards / total) * 100 : 50
+
+    return (
+        <Card className="glass-card card-glow border-0 overflow-hidden">
+            <CardHeader className="pb-2">
+                <CardTitle className="text-lg font-semibold">Detection Distribution</CardTitle>
+            </CardHeader>
+            <CardContent className="pt-0">
+                {isLoading ? (
+                    <div className="flex items-center justify-center h-48">
+                        <div className="w-32 h-32 rounded-full bg-primary/10 animate-pulse" />
+                    </div>
+                ) : total === 0 ? (
+                    <div className="flex items-center justify-center h-48 text-muted-foreground">
+                        No detections yet
+                    </div>
+                ) : (
+                    <div className="flex items-center gap-6">
+                        {/* Donut Chart */}
+                        <div className="relative w-36 h-36 flex-shrink-0">
+                            <svg viewBox="0 0 100 100" className="w-full h-full transform -rotate-90">
+                                {/* Background circle */}
+                                <circle
+                                    cx="50"
+                                    cy="50"
+                                    r="40"
+                                    fill="none"
+                                    stroke="hsl(var(--muted))"
+                                    strokeWidth="16"
+                                    opacity="0.2"
+                                />
+                                {/* Potholes arc */}
+                                <circle
+                                    cx="50"
+                                    cy="50"
+                                    r="40"
+                                    fill="none"
+                                    stroke="url(#potholeGradient)"
+                                    strokeWidth="16"
+                                    strokeDasharray={`${potholePercent * 2.51} 251`}
+                                    strokeLinecap="round"
+                                    className="transition-all duration-700"
+                                />
+                                {/* Signboards arc */}
+                                <circle
+                                    cx="50"
+                                    cy="50"
+                                    r="40"
+                                    fill="none"
+                                    stroke="url(#signboardGradient)"
+                                    strokeWidth="16"
+                                    strokeDasharray={`${signboardPercent * 2.51} 251`}
+                                    strokeDashoffset={`-${potholePercent * 2.51}`}
+                                    strokeLinecap="round"
+                                    className="transition-all duration-700"
+                                />
+                                <defs>
+                                    <linearGradient id="potholeGradient" x1="0%" y1="0%" x2="100%" y2="0%">
+                                        <stop offset="0%" stopColor="#f97316" />
+                                        <stop offset="100%" stopColor="#ea580c" />
+                                    </linearGradient>
+                                    <linearGradient id="signboardGradient" x1="0%" y1="0%" x2="100%" y2="0%">
+                                        <stop offset="0%" stopColor="#06b6d4" />
+                                        <stop offset="100%" stopColor="#0891b2" />
+                                    </linearGradient>
+                                </defs>
+                            </svg>
+                            <div className="absolute inset-0 flex items-center justify-center">
+                                <div className="text-center">
+                                    <p className="text-2xl font-bold text-foreground">{total}</p>
+                                    <p className="text-[10px] text-muted-foreground uppercase">Total</p>
+                                </div>
+                            </div>
+                        </div>
+
+                        {/* Legend */}
+                        <div className="flex flex-col gap-3 flex-1">
+                            <div className="flex items-center justify-between p-3 rounded-lg bg-orange-500/10 border border-orange-500/20">
+                                <div className="flex items-center gap-2">
+                                    <div className="w-3 h-3 rounded-full bg-gradient-to-r from-orange-500 to-orange-600" />
+                                    <span className="text-sm font-medium">Potholes</span>
+                                </div>
+                                <div className="text-right">
+                                    <p className="font-bold text-foreground">{potholes}</p>
+                                    <p className="text-xs text-muted-foreground">{potholePercent.toFixed(0)}%</p>
+                                </div>
+                            </div>
+                            <div className="flex items-center justify-between p-3 rounded-lg bg-cyan-500/10 border border-cyan-500/20">
+                                <div className="flex items-center gap-2">
+                                    <div className="w-3 h-3 rounded-full bg-gradient-to-r from-cyan-500 to-cyan-600" />
+                                    <span className="text-sm font-medium">Signboards</span>
+                                </div>
+                                <div className="text-right">
+                                    <p className="font-bold text-foreground">{signboards}</p>
+                                    <p className="text-xs text-muted-foreground">{signboardPercent.toFixed(0)}%</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                )}
+            </CardContent>
+        </Card>
+    )
+}
diff --git a/components/dashboard/detection-donut-chart.tsx b/components/dashboard/detection-donut-chart.tsx
new file mode 100644
index 0000000..8b48499
--- /dev/null
+++ b/components/dashboard/detection-donut-chart.tsx
@@ -0,0 +1,113 @@
+"use client"
+
+import { PieChart, Pie, Cell, ResponsiveContainer, Legend, Tooltip } from "recharts"
+import { Loader2 } from "lucide-react"
+
+interface DetectionDonutChartProps {
+    potholes: number
+    signboards: number
+    isLoading: boolean
+}
+
+const COLORS = {
+    pothole: "#ef4444",
+    signboard: "#3b82f6"
+}
+
+export function DetectionDonutChart({ potholes, signboards, isLoading }: DetectionDonutChartProps) {
+    if (isLoading) {
+        return (
+            <div className="h-[250px] flex items-center justify-center">
+                <Loader2 className="h-8 w-8 animate-spin text-primary/50" />
+            </div>
+        )
+    }
+
+    const total = potholes + signboards
+
+    if (total === 0) {
+        return (
+            <div className="h-[250px] flex flex-col items-center justify-center text-muted-foreground">
+                <p className="text-sm">No detections found</p>
+                <p className="text-xs mt-1">Process videos to see data</p>
+            </div>
+        )
+    }
+
+    const data = [
+        { name: "Potholes", value: potholes, color: COLORS.pothole },
+        { name: "Signboards", value: signboards, color: COLORS.signboard }
+    ]
+
+    return (
+        <div className="h-[250px]">
+            <ResponsiveContainer width="100%" height="100%">
+                <PieChart>
+                    <Pie
+                        data={data}
+                        cx="50%"
+                        cy="50%"
+                        innerRadius={55}
+                        outerRadius={80}
+                        paddingAngle={3}
+                        dataKey="value"
+                        strokeWidth={0}
+                    >
+                        {data.map((entry, index) => (
+                            <Cell
+                                key={`cell-${index}`}
+                                fill={entry.color}
+                                className="transition-opacity hover:opacity-80"
+                            />
+                        ))}
+                    </Pie>
+                    <Tooltip
+                        content={({ active, payload }) => {
+                            if (active && payload && payload.length) {
+                                const data = payload[0]
+                                return (
+                                    <div className="bg-background/95 backdrop-blur-sm border border-border rounded-lg px-3 py-2 shadow-lg">
+                                        <p className="font-medium text-sm">{data.name}</p>
+                                        <p className="text-sm text-muted-foreground">
+                                            Count: <span className="font-semibold text-foreground">{data.value}</span>
+                                        </p>
+                                        <p className="text-xs text-muted-foreground">
+                                            {((Number(data.value) / total) * 100).toFixed(1)}% of total
+                                        </p>
+                                    </div>
+                                )
+                            }
+                            return null
+                        }}
+                    />
+                    <Legend
+                        verticalAlign="bottom"
+                        height={36}
+                        content={({ payload }) => (
+                            <div className="flex items-center justify-center gap-6 mt-2">
+                                {payload?.map((entry, index) => (
+                                    <div key={`legend-${index}`} className="flex items-center gap-2">
+                                        <div
+                                            className="w-3 h-3 rounded-full"
+                                            style={{ backgroundColor: entry.color }}
+                                        />
+                                        <span className="text-xs text-muted-foreground">
+                                            {entry.value}: {data[index].value}
+                                        </span>
+                                    </div>
+                                ))}
+                            </div>
+                        )}
+                    />
+                </PieChart>
+            </ResponsiveContainer>
+            {/* Center label */}
+            <div className="absolute inset-0 flex items-center justify-center pointer-events-none" style={{ marginTop: '-40px' }}>
+                <div className="text-center">
+                    <p className="text-2xl font-bold">{total}</p>
+                    <p className="text-xs text-muted-foreground">Total</p>
+                </div>
+            </div>
+        </div>
+    )
+}
diff --git a/components/dashboard/gradient-stats-card.tsx b/components/dashboard/gradient-stats-card.tsx
new file mode 100644
index 0000000..ba324af
--- /dev/null
+++ b/components/dashboard/gradient-stats-card.tsx
@@ -0,0 +1,95 @@
+"use client"
+
+import { Card, CardContent } from "@/components/ui/card"
+import { LucideIcon } from "lucide-react"
+
+interface GradientStatsCardProps {
+    title: string
+    subtitle?: string
+    value: number | string
+    icon: LucideIcon
+    gradient: "green" | "coral" | "blue" | "purple"
+    isLoading?: boolean
+}
+
+const gradientStyles = {
+    green: {
+        background: "bg-gradient-to-br from-emerald-50 via-emerald-50 to-teal-100 dark:from-emerald-950/40 dark:via-emerald-950/30 dark:to-teal-950/40",
+        border: "border-l-4 border-l-emerald-500",
+        iconBg: "bg-gradient-to-br from-emerald-400 to-teal-500",
+        iconShadow: "shadow-lg shadow-emerald-500/30",
+        valueGradient: "bg-gradient-to-r from-emerald-600 via-teal-500 to-emerald-600 dark:from-emerald-400 dark:via-teal-400 dark:to-emerald-400"
+    },
+    coral: {
+        background: "bg-gradient-to-br from-red-50 via-red-50 to-orange-100 dark:from-red-950/40 dark:via-red-950/30 dark:to-orange-950/40",
+        border: "border-l-4 border-l-red-500",
+        iconBg: "bg-gradient-to-br from-red-400 to-orange-500",
+        iconShadow: "shadow-lg shadow-red-500/30",
+        valueGradient: "bg-gradient-to-r from-red-600 via-orange-500 to-red-600 dark:from-red-400 dark:via-orange-400 dark:to-red-400"
+    },
+    blue: {
+        background: "bg-gradient-to-br from-blue-50 via-blue-50 to-indigo-100 dark:from-blue-950/40 dark:via-blue-950/30 dark:to-indigo-950/40",
+        border: "border-l-4 border-l-blue-500",
+        iconBg: "bg-gradient-to-br from-blue-400 to-indigo-500",
+        iconShadow: "shadow-lg shadow-blue-500/30",
+        valueGradient: "bg-gradient-to-r from-blue-600 via-indigo-500 to-blue-600 dark:from-blue-400 dark:via-indigo-400 dark:to-blue-400"
+    },
+    purple: {
+        background: "bg-gradient-to-br from-purple-50 via-purple-50 to-pink-100 dark:from-purple-950/40 dark:via-purple-950/30 dark:to-pink-950/40",
+        border: "border-l-4 border-l-purple-500",
+        iconBg: "bg-gradient-to-br from-purple-400 to-pink-500",
+        iconShadow: "shadow-lg shadow-purple-500/30",
+        valueGradient: "bg-gradient-to-r from-purple-600 via-pink-500 to-purple-600 dark:from-purple-400 dark:via-pink-400 dark:to-purple-400"
+    }
+}
+
+export function GradientStatsCard({
+    title,
+    subtitle = "Work level distribution",
+    value,
+    icon: Icon,
+    gradient,
+    isLoading = false
+}: GradientStatsCardProps) {
+    const styles = gradientStyles[gradient]
+
+    return (
+        <Card className={`
+            ${styles.background} ${styles.border}
+            border-0 rounded-xl overflow-hidden
+            shadow-md hover:shadow-lg
+            transition-all duration-300 ease-out
+            hover:-translate-y-1 hover:scale-[1.02]
+        `}>
+            <CardContent className="p-4">
+                <div className="flex items-center gap-4">
+                    {/* Large gradient icon */}
+                    <div className={`
+                        w-14 h-14 rounded-xl flex items-center justify-center
+                        ${styles.iconBg} ${styles.iconShadow}
+                    `}>
+                        <Icon className="h-7 w-7 text-white" />
+                    </div>
+
+                    {/* Content */}
+                    <div className="flex-1 min-w-0">
+                        <h3 className="text-sm font-semibold text-gray-700 dark:text-gray-300 truncate">
+                            {title}
+                        </h3>
+                        <p className="text-xs text-gray-500 dark:text-gray-400 mt-0.5 truncate">
+                            {subtitle}
+                        </p>
+
+                        {isLoading ? (
+                            <div className="h-9 w-20 bg-gray-200 dark:bg-gray-700 rounded mt-1 animate-pulse" />
+                        ) : (
+                            <p className={`text-3xl font-extrabold mt-1 ${styles.valueGradient} bg-clip-text text-transparent`}>
+                                {value}
+                            </p>
+                        )}
+                    </div>
+                </div>
+            </CardContent>
+        </Card>
+    )
+}
diff --git a/components/dashboard/location-bar-chart.tsx b/components/dashboard/location-bar-chart.tsx
new file mode 100644
index 0000000..5f52813
--- /dev/null
+++ b/components/dashboard/location-bar-chart.tsx
@@ -0,0 +1,127 @@
+"use client"
+
+import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend } from "recharts"
+import { Loader2 } from "lucide-react"
+
+interface LocationData {
+    name: string
+    potholes: number
+    signboards: number
+    total: number
+}
+
+interface LocationBarChartProps {
+    data: LocationData[]
+    isLoading: boolean
+}
+
+const COLORS = {
+    pothole: "#ef4444",
+    signboard: "#3b82f6"
+}
+
+export function LocationBarChart({ data, isLoading }: LocationBarChartProps) {
+    if (isLoading) {
+        return (
+            <div className="h-[300px] flex items-center justify-center">
+                <Loader2 className="h-8 w-8 animate-spin text-primary/50" />
+            </div>
+        )
+    }
+
+    if (data.length === 0) {
+        return (
+            <div className="h-[300px] flex flex-col items-center justify-center text-muted-foreground">
+                <p className="text-sm">No location data available</p>
+                <p className="text-xs mt-1">Process videos to see detections by location</p>
+            </div>
+        )
+    }
+
+    return (
+        <div className="h-[300px]">
+            <ResponsiveContainer width="100%" height="100%">
+                <BarChart
+                    data={data}
+                    margin={{ top: 10, right: 10, left: 0, bottom: 40 }}
+                    barCategoryGap="20%"
+                >
+                    <CartesianGrid
+                        strokeDasharray="3 3"
+                        vertical={false}
+                        stroke="hsl(var(--muted-foreground) / 0.1)"
+                    />
+                    <XAxis
+                        dataKey="name"
+                        tick={{ fontSize: 10, fill: 'hsl(var(--muted-foreground))' }}
+                        tickLine={false}
+                        axisLine={false}
+                        angle={-45}
+                        textAnchor="end"
+                        height={60}
+                        interval={0}
+                    />
+                    <YAxis
+                        tick={{ fontSize: 11, fill: 'hsl(var(--muted-foreground))' }}
+                        tickLine={false}
+                        axisLine={false}
+                        width={35}
+                    />
+                    <Tooltip
+                        content={({ active, payload, label }) => {
+                            if (active && payload && payload.length) {
+                                return (
+                                    <div className="bg-background/95 backdrop-blur-sm border border-border rounded-lg px-3 py-2 shadow-lg">
+                                        <p className="font-medium text-sm mb-1">{label}</p>
+                                        {payload.map((entry, index) => (
+                                            <div key={index} className="flex items-center gap-2 text-sm">
+                                                <div
+                                                    className="w-2 h-2 rounded-full"
+                                                    style={{ backgroundColor: entry.color }}
+                                                />
+                                                <span className="text-muted-foreground">{entry.name}:</span>
+                                                <span className="font-semibold">{entry.value}</span>
+                                            </div>
+                                        ))}
+                                    </div>
+                                )
+                            }
+                            return null
+                        }}
+                    />
+                    <Legend
+                        verticalAlign="top"
+                        height={36}
+                        content={({ payload }) => (
+                            <div className="flex items-center justify-center gap-6 mb-2">
+                                {payload?.map((entry, index) => (
+                                    <div key={`legend-${index}`} className="flex items-center gap-2">
+                                        <div
+                                            className="w-3 h-3 rounded"
+                                            style={{ backgroundColor: entry.color }}
+                                        />
+                                        <span className="text-xs text-muted-foreground">
+                                            {entry.value}
+                                        </span>
+                                    </div>
+                                ))}
+                            </div>
+                        )}
+                    />
+                    <Bar
+                        dataKey="potholes"
+                        name="Potholes"
+                        fill={COLORS.pothole}
+                        radius={[4, 4, 0, 0]}
+                    />
+                    <Bar
+                        dataKey="signboards"
+                        name="Signboards"
+                        fill={COLORS.signboard}
+                        radius={[4, 4, 0, 0]}
+                    />
+                </BarChart>
+            </ResponsiveContainer>
+        </div>
+    )
+}
diff --git a/components/dashboard/recent-analyses-table.tsx b/components/dashboard/recent-analyses-table.tsx
new file mode 100644
index 0000000..53725a1
--- /dev/null
+++ b/components/dashboard/recent-analyses-table.tsx
@@ -0,0 +1,114 @@
+"use client"
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Badge } from "@/components/ui/badge"
+import { Eye, AlertCircle } from "lucide-react"
+import { type Video } from "@/lib/api"
+
+interface RecentAnalysesTableProps {
+    videos: Video[]
+    isLoading?: boolean
+    onViewResults?: (videoId: string, detectionType: string) => void
+}
+
+export function RecentAnalysesTable({ videos, isLoading, onViewResults }: RecentAnalysesTableProps) {
+    const formatDate = (dateString: string) => {
+        const date = new Date(dateString)
+        return date.toLocaleDateString("en-IN", {
+            day: "2-digit",
+            month: "short",
+            year: "numeric",
+            hour: "2-digit",
+            minute: "2-digit"
+        })
+    }
+
+    const getStatusBadge = (status: string) => {
+        switch (status) {
+            case "completed":
+                return <Badge className="bg-emerald-500/20 text-emerald-600 border-emerald-500/30 hover:bg-emerald-500/30">Completed</Badge>
+            case "processing":
+                return <Badge className="bg-blue-500/20 text-blue-600 border-blue-500/30 hover:bg-blue-500/30">Processing</Badge>
+            case "pending":
+                return <Badge className="bg-yellow-500/20 text-yellow-600 border-yellow-500/30 hover:bg-yellow-500/30">Pending</Badge>
+            case "failed":
+                return <Badge className="bg-red-500/20 text-red-600 border-red-500/30 hover:bg-red-500/30">Failed</Badge>
+            default:
+                return <Badge variant="secondary">{status}</Badge>
+        }
+    }
+
+    const getDetectionTypeBadge = (type: string) => {
+        if (type === "pothole-detection") {
+            return <Badge className="bg-orange-500/20 text-orange-600 border-orange-500/30">Pothole</Badge>
+        }
+        return <Badge className="bg-cyan-500/20 text-cyan-600 border-cyan-500/30">Signboard</Badge>
+    }
+
+    return (
+        <Card className="glass-card card-glow border-0 overflow-hidden">
+            <CardHeader className="pb-3 border-b border-border/50">
+                <CardTitle className="text-lg font-semibold">Recent Analyses</CardTitle>
+            </CardHeader>
+            <CardContent className="p-0">
+                {isLoading ? (
+                    <div className="p-6 space-y-3">
+                        {[1, 2, 3, 4].map((i) => (
+                            <div key={i} className="h-14 bg-primary/5 rounded-lg animate-pulse" />
+                        ))}
+                    </div>
+                ) : videos.length === 0 ? (
+                    <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
+                        <AlertCircle className="h-10 w-10 mb-3 opacity-50" />
+                        <p className="text-sm">No analyses found</p>
+                        <p className="text-xs mt-1">Start a new analysis to see results here</p>
+                    </div>
+                ) : (
+                    <div className="divide-y divide-border/50">
+                        {videos.slice(0, 8).map((video) => (
+                            <div
+                                key={video.id}
+                                className="flex items-center justify-between p-4 hover:bg-primary/5 transition-colors"
+                            >
+                                <div className="flex items-center gap-4 flex-1 min-w-0">
+                                    <div className="flex-1 min-w-0">
+                                        <p className="text-sm font-medium truncate">
+                                            {video.filename || `Video ${video.id.slice(0, 8)}...`}
+                                        </p>
+                                        <p className="text-xs text-muted-foreground">
+                                            {formatDate(video.created_at)}
+                                        </p>
+                                    </div>
+                                    <div className="flex items-center gap-2 flex-shrink-0">
+                                        {getDetectionTypeBadge(video.detection_type)}
+                                        {getStatusBadge(video.status)}
+                                    </div>
+                                    <div className="text-right flex-shrink-0 w-20">
+                                        <p className="text-sm font-bold text-foreground">
+                                            {video.detection_type === "pothole-detection"
+                                                ? video.unique_potholes ?? 0
+                                                : video.unique_signboards ?? 0}
+                                        </p>
+                                        <p className="text-[10px] text-muted-foreground uppercase">Detections</p>
+                                    </div>
+                                </div>
+                                {video.status === "completed" && onViewResults && (
+                                    <Button
+                                        variant="ghost"
+                                        size="sm"
+                                        onClick={() => onViewResults(video.id, video.detection_type)}
+                                        className="ml-4 flex-shrink-0"
+                                    >
+                                        <Eye className="h-4 w-4 mr-1" />
+                                        View
+                                    </Button>
+                                )}
+                            </div>
+                        ))}
+                    </div>
+                )}
+            </CardContent>
+        </Card>
+    )
+}
diff --git a/components/dashboard/stats-card.tsx b/components/dashboard/stats-card.tsx
new file mode 100644
index 0000000..31728a0
--- /dev/null
+++ b/components/dashboard/stats-card.tsx
@@ -0,0 +1,38 @@
+"use client"
+
+import { Card, CardContent } from "@/components/ui/card"
+import { LucideIcon } from "lucide-react"
+
+interface StatsCardProps {
+    title: string
+    value: string | number
+    icon: LucideIcon
+    gradient: string
+    isLoading?: boolean
+}
+
+export function StatsCard({ title, value, icon: Icon, gradient, isLoading }: StatsCardProps) {
+    return (
+        <Card className="glass-card card-glow border-0 overflow-hidden group hover:scale-[1.02] transition-transform duration-300">
+            <CardContent className="p-5">
+                <div className="flex items-center justify-between">
+                    <div className="space-y-1">
+                        <p className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
+                            {title}
+                        </p>
+                        {isLoading ? (
+                            <div className="h-8 w-16 bg-primary/10 rounded animate-pulse" />
+                        ) : (
+                            <p className="text-3xl font-bold text-foreground">
+                                {value}
+                            </p>
+                        )}
+                    </div>
+                    <div className={`p-3 rounded-xl ${gradient} group-hover:scale-110 transition-transform duration-300`}>
+                        <Icon className="h-6 w-6 text-white" />
+                    </div>
+                </div>
+            </CardContent>
+        </Card>
+    )
+}
diff --git a/components/navigation-menu.tsx b/components/navigation-menu.tsx
new file mode 100644
index 0000000..16d7ebf
--- /dev/null
+++ b/components/navigation-menu.tsx
@@ -0,0 +1,129 @@
+"use client"
+
+import { useState } from "react"
+import { useRouter, usePathname } from "next/navigation"
+import {
+    Sheet,
+    SheetContent,
+    SheetHeader,
+    SheetTitle,
+    SheetTrigger,
+} from "@/components/ui/sheet"
+import { Button } from "@/components/ui/button"
+import {
+    Menu,
+    LayoutDashboard,
+    ChevronRight,
+    Home,
+    Map
+} from "lucide-react"
+
+interface NavItem {
+    title: string
+    description: string
+    href: string
+    icon: React.ElementType
+}
+
+const navItems: NavItem[] = [
+    {
+        title: "Home",
+        description: "Project selection and analysis setup",
+        href: "/",
+        icon: Home
+    },
+    {
+        title: "Dashboard",
+        description: "View analytics, statistics, and recent analyses",
+        href: "/dashboard",
+        icon: LayoutDashboard
+    },
+    {
+        title: "Show Map",
+        description: "View all detections on an interactive map",
+        href: "/map",
+        icon: Map
+    }
+]
+
+export function NavigationMenu() {
+    const [isOpen, setIsOpen] = useState(false)
+    const router = useRouter()
+    const pathname = usePathname()
+
+    const handleNavigation = (href: string) => {
+        setIsOpen(false)
+        router.push(href)
+    }
+
+    return (
+        <Sheet open={isOpen} onOpenChange={setIsOpen}>
+            <SheetTrigger asChild>
+                <Button
+                    variant="ghost"
+                    size="icon"
+                    className="fixed top-4 left-4 z-50 h-11 w-11 rounded-xl glass-card border border-white/20 shadow-lg hover:bg-white/20 hover:scale-105 transition-all duration-300"
+                    aria-label="Open navigation menu"
+                >
+                    <Menu className="h-5 w-5 text-foreground" />
+                </Button>
+            </SheetTrigger>
+            <SheetContent side="left" className="w-[320px] sm:w-[380px] bg-background/95 backdrop-blur-xl border-r border-white/10">
+                <SheetHeader className="pb-6 border-b border-white/10">
+                    <SheetTitle className="text-2xl font-bold text-gradient">
+                        VisionRoad
+                    </SheetTitle>
+                    <p className="text-sm text-muted-foreground">
+                        AI-Powered Road Detection System
+                    </p>
+                </SheetHeader>
+
+                {/* Navigation Items */}
+                <nav className="mt-6 space-y-2">
+                    {navItems.map((item) => {
+                        const isActive = pathname === item.href
+                        const Icon = item.icon
+
+                        return (
+                            <button
+                                key={item.href}
+                                onClick={() => handleNavigation(item.href)}
+                                className={`w-full flex items-center gap-4 p-4 rounded-xl text-left transition-all duration-300 group ${isActive
+                                    ? "bg-primary/15 border border-primary/30"
+                                    : "hover:bg-white/5 border border-transparent hover:border-white/10"
+                                    }`}
+                            >
+                                <div className={`p-2.5 rounded-lg transition-all duration-300 ${isActive
+                                    ? "bg-gradient-to-br from-primary to-accent text-white"
+                                    : "bg-white/5 text-muted-foreground group-hover:bg-primary/10 group-hover:text-primary"
+                                    }`}>
+                                    <Icon className="h-5 w-5" />
+                                </div>
+                                <div className="flex-1 min-w-0">
+                                    <h3 className={`font-semibold text-sm ${isActive ? "text-primary" : "text-foreground"
+                                        }`}>
+                                        {item.title}
+                                    </h3>
+                                    <p className="text-xs text-muted-foreground truncate mt-0.5">
+                                        {item.description}
+                                    </p>
+                                </div>
+                                <ChevronRight className={`h-4 w-4 transition-all duration-300 ${isActive
+                                    ? "text-primary opacity-100"
+                                    : "text-muted-foreground opacity-0 group-hover:opacity-100"
+                                    }`} />
+                            </button>
+                        )
+                    })}
+                </nav>
+
+                {/* Footer */}
+                <div className="absolute bottom-4 left-4 right-4 text-center">
+                    <p className="text-xs text-muted-foreground">
+                        Sentient Geeks Pvt. Ltd.
+                    </p>
+                </div>
+            </SheetContent>
+        </Sheet>
+    )
+}
diff --git a/components/project-selection-section.tsx b/components/project-selection-section.tsx
index 919b739..af94aa8 100644
--- a/components/project-selection-section.tsx
+++ b/components/project-selection-section.tsx
@@ -5,7 +5,7 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/com
 import { Button } from "@/components/ui/button"
 import { Label } from "@/components/ui/label"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
-import { Loader2, MapPin, Package, FolderKanban, ArrowRight, AlertCircle } from "lucide-react"
+import { Loader2 } from "lucide-react"
 import {
     fetchProjects,
     fetchPackagesByProject,
@@ -139,153 +139,176 @@ export function ProjectSelectionSection({ onSelectionComplete }: ProjectSelectio
 
     const isComplete = selectedProject && selectedPackage && selectedLocation
 
+    // Step status helpers
+    const getStepStatus = (step: number) => {
+        if (step === 1) return selectedProject ? 'completed' : 'active'
+        if (step === 2) return selectedPackage ? 'completed' : selectedProject ? 'active' : 'pending'
+        if (step === 3) return selectedLocation ? 'completed' : selectedPackage ? 'active' : 'pending'
+        return 'pending'
+    }
+
     return (
-        <Card className="transition-all hover:shadow-lg border-0 bg-gradient-to-br from-card via-card to-muted/30">
-            <CardHeader className="pb-4">
-                <div className="flex items-center gap-3">
-                    <div className="p-2 rounded-lg bg-gradient-to-br from-primary/20 to-primary/5">
-                        <FolderKanban className="h-6 w-6 text-primary" />
-                    </div>
+        <Card className="glass-card card-glow border-0 overflow-hidden">
+            <CardHeader className="pb-6 border-b border-border/50">
+                <div className="flex flex-col gap-4">
                     <div>
-                        <CardTitle className="text-xl">Select Project Location</CardTitle>
-                        <CardDescription className="mt-1">
-                            Choose your project, package, and location to begin video analysis
+                        <CardTitle className="text-2xl font-semibold">Select Project Location</CardTitle>
+                        <CardDescription className="mt-2 text-base">
+                            Select Project, Package & Location to begin intelligent road analysis with advanced computer vision.
                         </CardDescription>
                     </div>
+
+                    {/* Step Progress Indicator */}
+                    <div className="flex items-center justify-center gap-2 pt-2">
+                        {[1, 2, 3].map((step, index) => {
+                            const status = getStepStatus(step)
+                            const labels = ['Project', 'Package', 'Location']
+                            return (
+                                <div key={step} className="flex items-center">
+                                    <div className="flex flex-col items-center">
+                                        <div
+                                            className={`w-8 h-8 rounded-full flex items-center justify-center text-sm font-semibold transition-all duration-300 ${status === 'completed' ? 'step-completed' :
+                                                status === 'active' ? 'step-active' :
+                                                    'step-pending'
+                                                }`}
+                                        >
+                                            {step}
+                                        </div>
+                                        <span className={`text-xs mt-1.5 font-medium transition-colors ${status === 'pending' ? 'text-muted-foreground/60' : 'text-foreground'
+                                            }`}>
+                                            {labels[index]}
+                                        </span>
+                                    </div>
+                                    {index < 2 && (
+                                        <div className={`w-12 h-0.5 mx-2 mt-[-16px] rounded-full transition-colors duration-300 ${getStepStatus(step + 1) !== 'pending' ? 'bg-primary' : 'bg-border'
+                                            }`} />
+                                    )}
+                                </div>
+                            )
+                        })}
+                    </div>
                 </div>
             </CardHeader>
-            <CardContent className="space-y-6">
+
+            <CardContent className="pt-6 space-y-6">
                 {/* Error Display */}
                 {error && (
-                    <div className="flex items-start gap-2 p-3 rounded-lg bg-destructive/10 text-destructive animate-in fade-in slide-in-from-top duration-300">
-                        <AlertCircle className="h-5 w-5 mt-0.5 flex-shrink-0" />
-                        <p className="text-sm">{error}</p>
+                    <div className="flex items-start gap-3 p-4 rounded-xl bg-destructive/10 border border-destructive/20 text-destructive animate-in fade-in slide-in-from-top duration-300">
+                        <div className="w-5 h-5 rounded-full bg-destructive/20 flex items-center justify-center flex-shrink-0 mt-0.5">
+                            <span className="text-xs font-bold">!</span>
+                        </div>
+                        <p className="text-sm leading-relaxed">{error}</p>
                     </div>
                 )}
 
                 <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                     {/* Project Dropdown */}
-                    <div className="space-y-2">
-                        <Label htmlFor="project" className="flex items-center gap-2 text-sm font-medium">
-                            <FolderKanban className="h-4 w-4 text-muted-foreground" />
+                    <div className="space-y-3">
+                        <Label htmlFor="project" className="text-sm font-semibold text-foreground">
                             Project
                         </Label>
-                        <Select
-                            value={selectedProject?.id || ""}
-                            onValueChange={handleProjectChange}
-                            disabled={loadingProjects}
-                        >
-                            <SelectTrigger id="project" className="h-11">
-                                {loadingProjects ? (
-                                    <div className="flex items-center gap-2">
-                                        <Loader2 className="h-4 w-4 animate-spin" />
-                                        <span>Loading...</span>
-                                    </div>
-                                ) : (
-                                    <SelectValue placeholder="Select a project" />
-                                )}
-                            </SelectTrigger>
-                            <SelectContent>
-                                {projects.map((project) => (
-                                    <SelectItem key={project.id} value={project.id}>
-                                        <div className="flex flex-col">
-                                            <span className="font-medium">{project.name}</span>
-                                            {project.corridor_name && (
-                                                <span className="text-xs text-muted-foreground">{project.corridor_name}</span>
-                                            )}
+                        <div className="input-glow rounded-lg">
+                            <Select
+                                value={selectedProject?.id || ""}
+                                onValueChange={handleProjectChange}
+                                disabled={loadingProjects}
+                            >
+                                <SelectTrigger id="project" className="h-12 bg-background/50 border-border/50 hover:border-primary/50 transition-colors">
+                                    {loadingProjects ? (
+                                        <div className="flex items-center gap-2">
+                                            <Loader2 className="h-4 w-4 animate-spin text-primary" />
+                                            <span className="text-muted-foreground">Loading...</span>
                                         </div>
-                                    </SelectItem>
-                                ))}
-                            </SelectContent>
-                        </Select>
-                        {selectedProject?.state && (
-                            <p className="text-xs text-muted-foreground">
-                                State: {selectedProject.state}
-                            </p>
-                        )}
+                                    ) : (
+                                        <SelectValue placeholder="Select a project" />
+                                    )}
+                                </SelectTrigger>
+                                <SelectContent>
+                                    {projects.map((project) => (
+                                        <SelectItem key={project.id} value={project.id}>
+                                            <span className="font-medium">{project.name}</span>
+                                        </SelectItem>
+                                    ))}
+                                </SelectContent>
+                            </Select>
+                        </div>
                     </div>
 
                     {/* Package Dropdown */}
-                    <div className="space-y-2">
-                        <Label htmlFor="package" className="flex items-center gap-2 text-sm font-medium">
-                            <Package className="h-4 w-4 text-muted-foreground" />
+                    <div className="space-y-3">
+                        <Label htmlFor="package" className="text-sm font-semibold text-foreground">
                             Package
                         </Label>
-                        <Select
-                            value={selectedPackage?.id || ""}
-                            onValueChange={handlePackageChange}
-                            disabled={!selectedProject || loadingPackages}
-                        >
-                            <SelectTrigger id="package" className="h-11">
-                                {loadingPackages ? (
-                                    <div className="flex items-center gap-2">
-                                        <Loader2 className="h-4 w-4 animate-spin" />
-                                        <span>Loading...</span>
-                                    </div>
-                                ) : (
-                                    <SelectValue placeholder={selectedProject ? "Select a package" : "Select project first"} />
-                                )}
-                            </SelectTrigger>
-                            <SelectContent>
-                                {packages.map((pkg) => (
-                                    <SelectItem key={pkg.id} value={pkg.id}>
-                                        <div className="flex flex-col">
-                                            <span className="font-medium">{pkg.name}</span>
-                                            {pkg.region && (
-                                                <span className="text-xs text-muted-foreground">{pkg.region}</span>
-                                            )}
+                        <div className="input-glow rounded-lg">
+                            <Select
+                                value={selectedPackage?.id || ""}
+                                onValueChange={handlePackageChange}
+                                disabled={!selectedProject || loadingPackages}
+                            >
+                                <SelectTrigger id="package" className="h-12 bg-background/50 border-border/50 hover:border-primary/50 transition-colors">
+                                    {loadingPackages ? (
+                                        <div className="flex items-center gap-2">
+                                            <Loader2 className="h-4 w-4 animate-spin text-primary" />
+                                            <span className="text-muted-foreground">Loading...</span>
                                         </div>
-                                    </SelectItem>
-                                ))}
-                            </SelectContent>
-                        </Select>
+                                    ) : (
+                                        <SelectValue placeholder={selectedProject ? "Select a package" : "Select project first"} />
+                                    )}
+                                </SelectTrigger>
+                                <SelectContent>
+                                    {packages.map((pkg) => (
+                                        <SelectItem key={pkg.id} value={pkg.id}>
+                                            <span className="font-medium">{pkg.name}</span>
+                                        </SelectItem>
+                                    ))}
+                                </SelectContent>
+                            </Select>
+                        </div>
                     </div>
 
                     {/* Location Dropdown */}
-                    <div className="space-y-2">
-                        <Label htmlFor="location" className="flex items-center gap-2 text-sm font-medium">
-                            <MapPin className="h-4 w-4 text-muted-foreground" />
+                    <div className="space-y-3">
+                        <Label htmlFor="location" className="text-sm font-semibold text-foreground">
                             Location
                         </Label>
-                        <Select
-                            value={selectedLocation?.id || ""}
-                            onValueChange={handleLocationChange}
-                            disabled={!selectedPackage || loadingLocations}
-                        >
-                            <SelectTrigger id="location" className="h-11">
-                                {loadingLocations ? (
-                                    <div className="flex items-center gap-2">
-                                        <Loader2 className="h-4 w-4 animate-spin" />
-                                        <span>Loading...</span>
-                                    </div>
-                                ) : (
-                                    <SelectValue placeholder={selectedPackage ? "Select a location" : "Select package first"} />
-                                )}
-                            </SelectTrigger>
-                            <SelectContent>
-                                {locations.map((location) => (
-                                    <SelectItem key={location.id} value={location.id}>
-                                        <div className="flex flex-col">
-                                            <span className="font-medium">{location.segment_name}</span>
-                                            {location.chainage_start_km !== null && location.chainage_end_km !== null && (
-                                                <span className="text-xs text-muted-foreground">
-                                                    KM {location.chainage_start_km} - {location.chainage_end_km}
-                                                </span>
-                                            )}
+                        <div className="input-glow rounded-lg">
+                            <Select
+                                value={selectedLocation?.id || ""}
+                                onValueChange={handleLocationChange}
+                                disabled={!selectedPackage || loadingLocations}
+                            >
+                                <SelectTrigger id="location" className="h-12 bg-background/50 border-border/50 hover:border-primary/50 transition-colors">
+                                    {loadingLocations ? (
+                                        <div className="flex items-center gap-2">
+                                            <Loader2 className="h-4 w-4 animate-spin text-primary" />
+                                            <span className="text-muted-foreground">Loading...</span>
                                         </div>
-                                    </SelectItem>
-                                ))}
-                            </SelectContent>
-                        </Select>
+                                    ) : (
+                                        <SelectValue placeholder={selectedPackage ? "Select a location" : "Select package first"} />
+                                    )}
+                                </SelectTrigger>
+                                <SelectContent>
+                                    {locations.map((location) => (
+                                        <SelectItem key={location.id} value={location.id}>
+                                            <span className="font-medium">{location.segment_name}</span>
+                                        </SelectItem>
+                                    ))}
+                                </SelectContent>
+                            </Select>
+                        </div>
                     </div>
                 </div>
 
                 {/* Selected Summary */}
                 {isComplete && (
-                    <div className="p-4 rounded-lg bg-primary/5 border border-primary/20 animate-in fade-in slide-in-from-bottom duration-300">
-                        <p className="text-sm text-muted-foreground mb-1">Selected:</p>
-                        <p className="font-medium">
-                            {selectedProject?.name} → {selectedPackage?.name} → {selectedLocation?.segment_name}
+                    <div className="px-4 py-3 rounded-lg bg-primary/5 border border-primary/15 animate-in fade-in slide-in-from-bottom duration-300">
+                        <p className="text-xs text-muted-foreground flex items-center gap-2 flex-wrap">
+                            <span className="font-medium">Path:</span>
+                            <span className="text-foreground">{selectedProject?.name}</span>
+                            <span>/</span>
+                            <span className="text-foreground">{selectedPackage?.name}</span>
+                            <span>/</span>
+                            <span className="text-foreground">{selectedLocation?.segment_name}</span>
                         </p>
                     </div>
                 )}
@@ -294,14 +317,12 @@ export function ProjectSelectionSection({ onSelectionComplete }: ProjectSelectio
                 <Button
                     onClick={handleProceed}
                     disabled={!isComplete}
-                    className="w-full h-12 text-base font-semibold transition-all"
+                    className={`w-full h-14 text-base font-semibold transition-all rounded-xl ${isComplete ? 'btn-gradient text-white' : ''
+                        }`}
                     size="lg"
                 >
                     {isComplete ? (
-                        <>
-                            Proceed to Upload
-                            <ArrowRight className="ml-2 h-5 w-5" />
-                        </>
+                        "Proceed to Upload"
                     ) : (
                         "Complete all selections to proceed"
                     )}
diff --git a/components/sidebar-navigation.tsx b/components/sidebar-navigation.tsx
new file mode 100644
index 0000000..e169d84
--- /dev/null
+++ b/components/sidebar-navigation.tsx
@@ -0,0 +1,108 @@
+"use client"
+
+import { useRouter, usePathname } from "next/navigation"
+import { Home, LayoutDashboard, User } from "lucide-react"
+
+interface NavItem {
+    title: string
+    href: string
+    icon: React.ElementType
+    gradient: string
+    disabled?: boolean
+}
+
+const navItems: NavItem[] = [
+    {
+        title: "Home",
+        href: "/",
+        icon: Home,
+        gradient: "from-emerald-400 to-teal-500"
+    },
+    {
+        title: "Dashboard",
+        href: "/dashboard",
+        icon: LayoutDashboard,
+        gradient: "from-blue-400 to-indigo-500"
+    },
+    {
+        title: "Account",
+        href: "/account",
+        icon: User,
+        gradient: "from-purple-400 to-pink-500",
+        disabled: true
+    }
+]
+
+export function SidebarNavigation() {
+    const router = useRouter()
+    const pathname = usePathname()
+
+    const handleNavigation = (item: NavItem) => {
+        if (item.disabled) return
+        router.push(item.href)
+    }
+
+    return (
+        <aside className="fixed left-0 top-0 h-screen w-16 bg-white/80 dark:bg-gray-900/80 backdrop-blur-xl border-r border-gray-200/50 dark:border-gray-700/50 z-50 flex flex-col items-center py-6 shadow-lg">
+            {/* Logo */}
+            <div className="mb-8">
+                <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center shadow-lg shadow-indigo-500/30">
+                    <span className="text-white font-bold text-lg">V</span>
+                </div>
+            </div>
+
+            {/* Navigation Items */}
+            <nav className="flex-1 flex flex-col items-center gap-3">
+                {navItems.map((item) => {
+                    const isActive = pathname === item.href
+                    const Icon = item.icon
+
+                    return (
+                        <div key={item.href} className="relative group">
+                            <button
+                                onClick={() => handleNavigation(item)}
+                                disabled={item.disabled}
+                                className={`
+                                    relative w-11 h-11 rounded-xl flex items-center justify-center
+                                    transition-all duration-300 ease-out
+                                    ${item.disabled
+                                        ? "text-gray-300 dark:text-gray-600 cursor-not-allowed opacity-50"
+                                        : isActive
+                                            ? `bg-gradient-to-br ${item.gradient} text-white shadow-lg`
+                                            : "text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-700 dark:hover:text-gray-300"
+                                    }
+                                `}
+                                style={isActive && !item.disabled ? { boxShadow: `0 8px 20px -4px rgba(99, 102, 241, 0.4)` } : {}}
+                            >
+                                <Icon className="h-5 w-5" />
+                            </button>
+
+                            {/* Tooltip */}
+                            <div className="
+                                absolute left-full ml-3 top-1/2 -translate-y-1/2
+                                px-3 py-1.5 rounded-lg
+                                bg-gray-900 dark:bg-gray-700 text-white text-sm font-medium
+                                opacity-0 invisible group-hover:opacity-100 group-hover:visible
+                                transition-all duration-200 ease-out
+                                whitespace-nowrap
+                                shadow-lg
+                                pointer-events-none
+                            ">
+                                {item.title}{item.disabled && " (Coming Soon)"}
+                                {/* Arrow */}
+                                <div className="absolute right-full top-1/2 -translate-y-1/2 border-4 border-transparent border-r-gray-900 dark:border-r-gray-700" />
+                            </div>
+                        </div>
+                    )
+                })}
+            </nav>
+
+            {/* Bottom section */}
+            <div className="mt-auto">
+                <div className="w-10 h-10 rounded-full bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-800 flex items-center justify-center">
+                    <User className="h-5 w-5 text-gray-500 dark:text-gray-400" />
+                </div>
+            </div>
+        </aside>
+    )
+}
diff --git a/components/video-player-section.tsx b/components/video-player-section.tsx
index f4a0896..0bfc47d 100644
--- a/components/video-player-section.tsx
+++ b/components/video-player-section.tsx
@@ -1,12 +1,15 @@
 "use client"
 
 import { useEffect, useRef, useState, useCallback } from "react"
+import dynamic from "next/dynamic"
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
 import { ScrollArea } from "@/components/ui/scroll-area"
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
 import { Target, AlertTriangle, Film, Activity, Gauge, Monitor, SignpostBig, Map as MapIcon } from "lucide-react"
-import MapModal from "@/components/map-modal"
+
+// Dynamically import MapModal with SSR disabled (Leaflet requires window object)
+const MapModal = dynamic(() => import("@/components/map-modal"), { ssr: false })
 
 const API_URL = process.env.NEXT_PUBLIC_API_URL || "http://127.0.0.1:8000/api/v1"
 
@@ -194,22 +197,31 @@ function DetailedSummarySection({
   return (
     <div className="space-y-4">
       {/* Location-based Summary */}
-      <Card>
-        <CardHeader className="pb-3">
+      <Card className="bg-white/70 dark:bg-gray-800/70 backdrop-blur-sm border-0 shadow-lg shadow-gray-200/50 dark:shadow-gray-900/50 rounded-xl overflow-hidden">
+        <CardHeader className="pb-3 bg-gradient-to-r from-cyan-50 to-blue-50 dark:from-cyan-950/30 dark:to-blue-950/30">
           <div className="flex items-center justify-between">
-            <div>
-              <CardTitle className="text-base">Detection Locations</CardTitle>
-              <CardDescription className="text-xs">
-                {isPothole ? "Potholes" : "Signboards"} detected across project locations
-              </CardDescription>
+            <div className="flex items-center gap-2">
+              <div className="p-1.5 rounded-lg bg-gradient-to-br from-cyan-400 to-blue-500 shadow-md shadow-cyan-500/30">
+                <MapIcon className="h-4 w-4 text-white" />
+              </div>
+              <div>
+                <CardTitle className="text-base font-bold">
+                  <span className="bg-gradient-to-r from-cyan-600 via-blue-500 to-cyan-600 dark:from-cyan-400 dark:via-blue-400 dark:to-cyan-400 bg-clip-text text-transparent">
+                    Detection Locations
+                  </span>
+                </CardTitle>
+                <CardDescription className="text-xs">
+                  {isPothole ? "Potholes" : "Signboards"} detected across project locations
+                </CardDescription>
+              </div>
             </div>
             <Button
               variant="outline"
               size="sm"
               onClick={() => setShowMap(true)}
-              className="gap-2"
+              className="gap-2 border-cyan-200 dark:border-cyan-800 hover:bg-cyan-50 dark:hover:bg-cyan-900/50"
             >
-              <MapIcon className="h-4 w-4" />
+              <MapIcon className="h-4 w-4 text-cyan-500" />
               Show Map
             </Button>
           </div>
@@ -245,12 +257,23 @@ function DetailedSummarySection({
       </Card>
 
       {/* All Detections List */}
-      <Card>
-        <CardHeader className="pb-3">
-          <CardTitle className="text-base">All Detections</CardTitle>
-          <CardDescription className="text-xs">
-            Complete list of {isPothole ? "potholes" : "signboards"} with GPS coordinates
-          </CardDescription>
+      <Card className="bg-white/70 dark:bg-gray-800/70 backdrop-blur-sm border-0 shadow-lg shadow-gray-200/50 dark:shadow-gray-900/50 rounded-xl overflow-hidden">
+        <CardHeader className="pb-3 bg-gradient-to-r from-indigo-50 to-purple-50 dark:from-indigo-950/30 dark:to-purple-950/30">
+          <div className="flex items-center gap-2">
+            <div className="p-1.5 rounded-lg bg-gradient-to-br from-indigo-400 to-purple-500 shadow-md shadow-indigo-500/30">
+              <Target className="h-4 w-4 text-white" />
+            </div>
+            <div>
+              <CardTitle className="text-base font-bold">
+                <span className="bg-gradient-to-r from-indigo-600 via-purple-500 to-indigo-600 dark:from-indigo-400 dark:via-purple-400 dark:to-indigo-400 bg-clip-text text-transparent">
+                  All Detections
+                </span>
+              </CardTitle>
+              <CardDescription className="text-xs">
+                Complete list of {isPothole ? "potholes" : "signboards"} with GPS coordinates
+              </CardDescription>
+            </div>
+          </div>
         </CardHeader>
         <CardContent>
           <ScrollArea className="h-[300px] rounded-md border bg-muted/30 p-3">
@@ -345,12 +368,23 @@ function SummarySection({ data, show, detectionType }: { data: DetectionData; sh
   ]
 
   return (
-    <Card className="animate-in fade-in slide-in-from-bottom duration-500">
-      <CardHeader className="pb-3">
-        <CardTitle className="text-base">Quick Stats</CardTitle>
-        <CardDescription className="text-xs">
-          Overview of {isPothole ? "pothole" : "signboard"} detection results
-        </CardDescription>
+    <Card className="animate-in fade-in slide-in-from-bottom duration-500 bg-white/70 dark:bg-gray-800/70 backdrop-blur-sm border-0 shadow-lg shadow-gray-200/50 dark:shadow-gray-900/50 rounded-xl overflow-hidden">
+      <CardHeader className="pb-3 bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-950/30 dark:to-indigo-950/30">
+        <div className="flex items-center gap-2">
+          <div className="p-1.5 rounded-lg bg-gradient-to-br from-blue-400 to-indigo-500 shadow-md shadow-blue-500/30">
+            <Activity className="h-4 w-4 text-white" />
+          </div>
+          <div>
+            <CardTitle className="text-base font-bold">
+              <span className="bg-gradient-to-r from-blue-600 via-indigo-500 to-blue-600 dark:from-blue-400 dark:via-indigo-400 dark:to-blue-400 bg-clip-text text-transparent">
+                Quick Stats
+              </span>
+            </CardTitle>
+            <CardDescription className="text-xs">
+              Overview of {isPothole ? "pothole" : "signboard"} detection results
+            </CardDescription>
+          </div>
+        </div>
       </CardHeader>
       <CardContent>
         <div className="grid grid-cols-3 md:grid-cols-6 gap-3">
@@ -359,14 +393,14 @@ function SummarySection({ data, show, detectionType }: { data: DetectionData; sh
             return (
               <div
                 key={stat.label}
-                className="flex flex-col items-center justify-center p-2 rounded-lg transition-all hover:scale-105 animate-in fade-in slide-in-from-bottom duration-500"
+                className="flex flex-col items-center justify-center p-3 rounded-xl transition-all hover:scale-105 animate-in fade-in slide-in-from-bottom duration-500 border border-gray-100 dark:border-gray-800 bg-gradient-to-br from-white to-gray-50 dark:from-gray-900 dark:to-gray-800 shadow-sm hover:shadow-md"
                 style={{ animationDelay: `${index * 100}ms` }}
               >
-                <div className={`${stat.bgColor} p-1.5 rounded-full mb-1.5 transition-all`}>
-                  <Icon className={`h-3 w-3 ${stat.color}`} />
+                <div className={`${stat.bgColor} p-2 rounded-lg mb-2 transition-all shadow-inner`}>
+                  <Icon className={`h-4 w-4 ${stat.color}`} />
                 </div>
-                <div className={`text-lg font-bold ${stat.color} mb-0.5`}>{stat.value}</div>
-                <div className="text-[10px] text-muted-foreground text-center leading-tight">{stat.label}</div>
+                <div className={`text-xl font-bold ${stat.color} mb-1`}>{stat.value}</div>
+                <div className="text-[10px] text-muted-foreground text-center leading-tight font-medium uppercase tracking-wide">{stat.label}</div>
               </div>
             )
           })}
@@ -792,12 +826,23 @@ export default function VideoPlayerSection({ data, videoId, videoFile, detection
 
   return (
     <div className="space-y-6">
-      <Card>
-        <CardHeader>
-          <CardTitle>Video Playback with Detection</CardTitle>
-          <CardDescription>
-            Watch the video with real-time {isPothole ? "pothole" : "signboard"} detection overlays
-          </CardDescription>
+      <Card className="bg-white/70 dark:bg-gray-800/70 backdrop-blur-sm border-0 shadow-lg shadow-gray-200/50 dark:shadow-gray-900/50 rounded-xl overflow-hidden">
+        <CardHeader className="bg-gradient-to-r from-gray-50 to-slate-100 dark:from-gray-900/50 dark:to-slate-900/50 border-b border-gray-100 dark:border-gray-800">
+          <div className="flex items-center gap-3">
+            <div className="p-2 rounded-xl bg-gradient-to-br from-gray-900 to-slate-700 dark:from-white dark:to-gray-300 shadow-lg shadow-gray-500/20">
+              <Film className="h-5 w-5 text-white dark:text-gray-900" />
+            </div>
+            <div>
+              <CardTitle className="text-lg font-bold">
+                <span className="bg-gradient-to-r from-gray-900 via-slate-700 to-gray-900 dark:from-white dark:via-gray-300 dark:to-white bg-clip-text text-transparent">
+                  Video Playback with Detection
+                </span>
+              </CardTitle>
+              <CardDescription>
+                Watch the video with real-time {isPothole ? "pothole" : "signboard"} detection overlays
+              </CardDescription>
+            </div>
+          </div>
         </CardHeader>
         <CardContent>
           <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
diff --git a/lib/api.ts b/lib/api.ts
index 126b9f3..84fde1a 100644
--- a/lib/api.ts
+++ b/lib/api.ts
@@ -81,6 +81,111 @@ export async function fetchLocationsByPackage(packageId: string): Promise<Locati
     return apiRequest<Location[]>(`/locations/?package_id=${packageId}`)
 }
 
+/**
+ * Fetch all packages (for dashboard)
+ */
+export async function fetchAllPackages(): Promise<Package[]> {
+    return apiRequest<Package[]>("/packages/")
+}
+
+/**
+ * Fetch all locations (for dashboard)
+ */
+export async function fetchAllLocations(): Promise<Location[]> {
+    return apiRequest<Location[]>("/locations/")
+}
+
+// Video type for dashboard
+export interface Video {
+    id: string
+    filename: string
+    detection_type: "pothole-detection" | "sign-board-detection"
+    status: "pending" | "processing" | "completed" | "failed"
+    unique_potholes?: number
+    unique_signboards?: number
+    total_detections?: number
+    created_at: string
+    updated_at: string
+}
+
+/**
+ * Fetch all videos (for dashboard)
+ */
+export async function fetchVideos(): Promise<Video[]> {
+    const response = await apiRequest<{ videos: Array<{ video_id: string; status: string; progress: number; summary?: { unique_potholes?: number; unique_signboards?: number; total_detections?: number } }> }>("/videos")
+
+    // Transform the response to match our Video interface
+    return response.videos.map(v => ({
+        id: v.video_id,
+        filename: v.video_id, // Using video_id as filename since backend doesn't provide it
+        detection_type: v.summary?.unique_potholes !== undefined ? "pothole-detection" : "sign-board-detection" as const,
+        status: v.status as Video["status"],
+        unique_potholes: v.summary?.unique_potholes,
+        unique_signboards: v.summary?.unique_signboards,
+        total_detections: v.summary?.total_detections,
+        created_at: new Date().toISOString(),
+        updated_at: new Date().toISOString()
+    }))
+}
+
+// Detection type for map display
+export interface Detection {
+    id: number
+    video_id: string
+    type: string
+    class: string
+    confidence: number
+    latitude: number | null
+    longitude: number | null
+    frame_number: number
+    timestamp_ms: number
+}
+
+/**
+ * Fetch all detections from completed videos (for dashboard map)
+ * Uses the summary endpoint to get detections for each project
+ */
+export async function fetchAllDetections(): Promise<Detection[]> {
+    try {
+        // First get all projects
+        const projects = await fetchProjects()
+
+        // Then fetch detections for each project
+        const allDetections: Detection[] = []
+
+        for (const project of projects) {
+            try {
+                const summary = await apiRequest<{
+                    packages: {
+                        [key: string]: {
+                            locations: {
+                                [key: string]: {
+                                    detections: Detection[]
+                                }
+                            }
+                        }
+                    }
+                }>(`/summary/projects/${project.id}`)
+
+                // Extract detections from the nested structure
+                for (const pkg of Object.values(summary.packages || {})) {
+                    for (const loc of Object.values(pkg.locations || {})) {
+                        allDetections.push(...(loc.detections || []))
+                    }
+                }
+            } catch (e) {
+                // Skip projects that fail to load
+                console.warn(`Failed to load detections for project ${project.id}:`, e)
+            }
+        }
+
+        return allDetections
+    } catch (e) {
+        console.error("Failed to fetch all detections:", e)
+        return []
+    }
+}
+
 /**
  * Session context type for storing user selections
  */