diff --git a/app/create-location/page.tsx b/app/create-location/page.tsx
index 7ca5669..9bc1640 100644
--- a/app/create-location/page.tsx
+++ b/app/create-location/page.tsx
@@ -192,20 +192,46 @@ export default function CreateLocationPage() {
             header: "Package",
             render: (location: Location) => getPackageName(location.package_id)
         },
+        {
+            key: "project",
+            header: "Project",
+            render: (location: Location) => {
+                const pkg = allPackages.find(p => p.id === location.package_id)
+                const project = projects.find(p => p.id === pkg?.project_id)
+                return project?.name || "—"
+            }
+        },
         {
             key: "chainage",
             header: "Chainage (km)",
             render: (location: Location) => {
-                if (location.chainage_start_km && location.chainage_end_km) {
-                    return `${location.chainage_start_km} - ${location.chainage_end_km}`
+                if (location.chainage_start_km !== null && location.chainage_end_km !== null) {
+                    return (
+                        <span className="px-2 py-0.5 rounded-full bg-amber-50 dark:bg-amber-900/30 text-amber-700 dark:text-amber-300 text-[10px] font-semibold border border-amber-100 dark:border-amber-800 whitespace-nowrap">
+                            {location.chainage_start_km} - {location.chainage_end_km}
+                        </span>
+                    )
                 }
                 return "—"
             }
         },
         {
-            key: "created_at",
-            header: "Created",
-            render: (location: Location) => new Date(location.created_at).toLocaleDateString()
+            key: "start_gps",
+            header: "Start GPS",
+            render: (location: Location) => (
+                <span className="px-2 py-0.5 rounded-full bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 text-[10px] font-mono border border-blue-100 dark:border-blue-800 whitespace-nowrap">
+                    {location.start_lat.toFixed(4)}, {location.start_lng.toFixed(4)}
+                </span>
+            )
+        },
+        {
+            key: "end_gps",
+            header: "End GPS",
+            render: (location: Location) => (
+                <span className="px-2 py-0.5 rounded-full bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 text-[10px] font-mono border border-blue-100 dark:border-blue-800 whitespace-nowrap">
+                    {location.end_lat.toFixed(4)}, {location.end_lng.toFixed(4)}
+                </span>
+            )
         },
     ]
 
@@ -213,16 +239,16 @@ export default function CreateLocationPage() {
         <div className="min-h-screen bg-mesh-gradient text-gray-900 dark:text-gray-100">
             <SidebarNavigation />
             <main className="ml-16 min-h-screen relative overflow-hidden">
-                <div className="mx-auto px-4 py-8 max-w-6xl relative z-10">
-                    {/* Header */}
+                <div className="mx-auto px-6 py-8 max-w-7xl relative z-10">
+                    {/* Refined Header */}
                     <div className="mb-8 animate-in fade-in slide-in-from-left duration-700">
-                        <div className="flex items-center gap-6">
-                            <div className="flex-shrink-0 w-16 h-16 rounded-2xl bg-white shadow-xl border-2 border-[#1e40af] transition-transform duration-300 hover:scale-110 flex items-center justify-center">
-                                <MapPin className="h-8 w-8 text-[#2563eb]" />
+                        <div className="flex items-center gap-5">
+                            <div className="p-3 rounded-2xl bg-gradient-to-br from-[#9bddeb] to-[#60a5fa] shadow-md flex items-center justify-center">
+                                <MapPin className="h-8 w-8 text-white" />
                             </div>
                             <div className="flex flex-col">
-                                <h1 className="text-3xl md:text-4xl font-extrabold text-[#2563eb] tracking-tight">
-                                    Locations
+                                <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">
+                                    Location Management
                                 </h1>
                                 <p className="text-gray-500 dark:text-gray-400 mt-1 text-sm font-medium italic">
                                     Manage road segment locations
@@ -267,7 +293,7 @@ export default function CreateLocationPage() {
                 <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
                     <DialogHeader>
                         <DialogTitle className="flex items-center gap-2">
-                            <MapPin className="h-5 w-5 text-amber-500" />
+                            <MapPin className="h-5 w-5 text-blue-500" />
                             Create New Location
                         </DialogTitle>
                         <DialogDescription>
@@ -277,9 +303,9 @@ export default function CreateLocationPage() {
 
                     {/* Success Message in Modal */}
                     {success && (
-                        <div className="flex items-center gap-3 p-4 rounded-xl bg-gradient-to-r from-amber-50 to-orange-50 dark:from-amber-950/30 dark:to-orange-950/30 border border-amber-200 dark:border-amber-800 animate-in fade-in slide-in-from-top duration-300">
-                            <CheckCircle2 className="h-5 w-5 text-amber-500 flex-shrink-0" />
-                            <p className="text-sm font-medium text-amber-700 dark:text-amber-400">Location created successfully!</p>
+                        <div className="flex items-center gap-3 p-4 rounded-xl bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-950/30 dark:to-indigo-950/30 border border-blue-200 dark:border-blue-800 animate-in fade-in slide-in-from-top duration-300">
+                            <CheckCircle2 className="h-5 w-5 text-blue-500 flex-shrink-0" />
+                            <p className="text-sm font-medium text-blue-700 dark:text-blue-400">Location created successfully!</p>
                         </div>
                     )}
 
@@ -295,18 +321,18 @@ export default function CreateLocationPage() {
 
                     <form onSubmit={handleSubmit} className="space-y-6">
                         {/* Step 1: Select Project */}
-                        <div className="p-4 rounded-xl bg-gradient-to-r from-amber-50/50 to-orange-50/50 dark:from-amber-950/20 dark:to-orange-950/20 border border-amber-100 dark:border-amber-900/50">
+                        <div className="p-4 rounded-xl bg-gradient-to-r from-blue-50/50 to-indigo-50/40 dark:from-blue-950/20 dark:to-indigo-950/20 border border-blue-100 dark:border-blue-900/50">
                             <div className="flex items-center gap-2 mb-3">
-                                <div className="w-6 h-6 rounded-full bg-gradient-to-br from-amber-500 to-orange-600 flex items-center justify-center">
+                                <div className="w-6 h-6 rounded-full bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center">
                                     <span className="text-white text-xs font-bold">1</span>
                                 </div>
-                                <p className="text-sm font-bold text-amber-700 dark:text-amber-400">Select Project</p>
+                                <p className="text-sm font-bold text-blue-700 dark:text-blue-400">Select Project</p>
                             </div>
                             <Select value={selectedProjectId} onValueChange={setSelectedProjectId}>
-                                <SelectTrigger className="h-11 bg-white dark:bg-gray-800 border-amber-200 dark:border-amber-800 focus:border-amber-400">
+                                <SelectTrigger className="h-11 bg-white dark:bg-gray-800 border-blue-200 dark:border-blue-800 focus:border-blue-400">
                                     {loadingProjects ? (
                                         <div className="flex items-center gap-2">
-                                            <Loader2 className="h-4 w-4 animate-spin text-amber-500" />
+                                            <Loader2 className="h-4 w-4 animate-spin text-blue-500" />
                                             <span className="text-gray-400">Loading projects...</span>
                                         </div>
                                     ) : (
@@ -323,25 +349,25 @@ export default function CreateLocationPage() {
                                 </SelectContent>
                             </Select>
                             {selectedProject && (
-                                <div className="mt-2 px-3 py-1.5 rounded-lg bg-amber-100/50 dark:bg-amber-900/20 text-xs text-amber-600 dark:text-amber-400">
+                                <div className="mt-2 px-3 py-1.5 rounded-lg bg-blue-100/50 dark:bg-blue-900/20 text-xs text-blue-600 dark:text-blue-400">
                                     Selected: <span className="font-semibold">{selectedProject.name}</span>
                                 </div>
                             )}
                         </div>
 
                         {/* Step 2: Select Package */}
-                        <div className={`p-4 rounded-xl bg-gradient-to-r from-orange-50/50 to-rose-50/50 dark:from-orange-950/20 dark:to-rose-950/20 border border-orange-100 dark:border-orange-900/50 transition-opacity duration-300 ${selectedProjectId ? 'opacity-100' : 'opacity-40 pointer-events-none'}`}>
+                        <div className={`p-4 rounded-xl bg-gradient-to-r from-blue-50/50 to-indigo-50/40 dark:from-blue-950/20 dark:to-indigo-950/20 border border-blue-100 dark:border-blue-900/50 transition-opacity duration-300 ${selectedProjectId ? 'opacity-100' : 'opacity-40 pointer-events-none'}`}>
                             <div className="flex items-center gap-2 mb-3">
-                                <div className={`w-6 h-6 rounded-full flex items-center justify-center ${selectedProjectId ? 'bg-gradient-to-br from-orange-500 to-rose-600' : 'bg-gray-300 dark:bg-gray-600'}`}>
+                                <div className={`w-6 h-6 rounded-full flex items-center justify-center ${selectedProjectId ? 'bg-gradient-to-br from-blue-500 to-indigo-600' : 'bg-gray-300 dark:bg-gray-600'}`}>
                                     <span className="text-white text-xs font-bold">2</span>
                                 </div>
-                                <p className="text-sm font-bold text-orange-700 dark:text-orange-400">Select Package</p>
+                                <p className="text-sm font-bold text-blue-700 dark:text-blue-400">Select Package</p>
                             </div>
                             <Select value={selectedPackageId} onValueChange={setSelectedPackageId} disabled={!selectedProjectId}>
-                                <SelectTrigger className="h-11 bg-white dark:bg-gray-800 border-orange-200 dark:border-orange-800 focus:border-orange-400">
+                                <SelectTrigger className="h-11 bg-white dark:bg-gray-800 border-blue-200 dark:border-blue-800 focus:border-blue-400">
                                     {loadingPackages ? (
                                         <div className="flex items-center gap-2">
-                                            <Loader2 className="h-4 w-4 animate-spin text-orange-500" />
+                                            <Loader2 className="h-4 w-4 animate-spin text-blue-500" />
                                             <span className="text-gray-400">Loading packages...</span>
                                         </div>
                                     ) : (
@@ -358,7 +384,7 @@ export default function CreateLocationPage() {
                                 </SelectContent>
                             </Select>
                             {selectedPackage && (
-                                <div className="mt-2 px-3 py-1.5 rounded-lg bg-orange-100/50 dark:bg-orange-900/20 text-xs text-orange-600 dark:text-orange-400">
+                                <div className="mt-2 px-3 py-1.5 rounded-lg bg-blue-100/50 dark:bg-blue-900/20 text-xs text-blue-600 dark:text-blue-400">
                                     Selected: <span className="font-semibold">{selectedPackage.name}</span>
                                     {selectedPackage.region && ` • ${selectedPackage.region}`}
                                 </div>
@@ -368,7 +394,7 @@ export default function CreateLocationPage() {
                         {/* Step 3: Location Details */}
                         <div className={`space-y-5 transition-opacity duration-300 ${selectedPackageId ? 'opacity-100' : 'opacity-40 pointer-events-none'}`}>
                             <div className="flex items-center gap-2">
-                                <div className={`w-6 h-6 rounded-full flex items-center justify-center ${selectedPackageId ? 'bg-gradient-to-br from-rose-500 to-red-600' : 'bg-gray-300 dark:bg-gray-600'}`}>
+                                <div className={`w-6 h-6 rounded-full flex items-center justify-center ${selectedPackageId ? 'bg-gradient-to-br from-blue-500 to-indigo-600' : 'bg-gray-300 dark:bg-gray-600'}`}>
                                     <span className="text-white text-xs font-bold">3</span>
                                 </div>
                                 <p className="text-sm font-bold text-gray-700 dark:text-gray-300">Location Information</p>
@@ -428,7 +454,7 @@ export default function CreateLocationPage() {
                             {/* GPS Coordinates */}
                             <div className="space-y-4">
                                 <div className="flex items-center gap-2">
-                                    <div className="p-1.5 rounded-lg bg-gradient-to-br from-amber-400 to-orange-500 shadow-md shadow-amber-500/20">
+                                    <div className="p-1.5 rounded-lg bg-gradient-to-br from-blue-400 to-indigo-500 shadow-md shadow-blue-500/20">
                                         <MapPin className="h-4 w-4 text-white" />
                                     </div>
                                     <h3 className="text-sm font-bold text-gray-700 dark:text-gray-300">GPS Coordinates</h3>
@@ -436,8 +462,8 @@ export default function CreateLocationPage() {
                                 </div>
 
                                 {/* Start Point */}
-                                <div className="p-4 rounded-xl bg-gradient-to-r from-amber-50/50 to-yellow-50/50 dark:from-amber-950/20 dark:to-yellow-950/20 border border-amber-100 dark:border-amber-900/50">
-                                    <p className="text-xs font-semibold text-amber-600 dark:text-amber-400 mb-3 uppercase tracking-wide">Start Point</p>
+                                <div className="p-4 rounded-xl bg-gradient-to-r from-blue-50/50 to-indigo-50/40 dark:from-blue-950/20 dark:to-indigo-950/20 border border-blue-100 dark:border-blue-900/50">
+                                    <p className="text-xs font-semibold text-blue-600 dark:text-blue-400 mb-3 uppercase tracking-wide">Start Point</p>
                                     <div className="grid grid-cols-2 gap-3">
                                         <div className="space-y-1.5">
                                             <Label htmlFor="s-lat" className="text-xs text-gray-500">Latitude *</Label>
@@ -469,8 +495,8 @@ export default function CreateLocationPage() {
                                 </div>
 
                                 {/* End Point */}
-                                <div className="p-4 rounded-xl bg-gradient-to-r from-orange-50/50 to-red-50/50 dark:from-orange-950/20 dark:to-red-950/20 border border-orange-100 dark:border-orange-900/50">
-                                    <p className="text-xs font-semibold text-orange-600 dark:text-orange-400 mb-3 uppercase tracking-wide">End Point</p>
+                                <div className="p-4 rounded-xl bg-gradient-to-r from-blue-50/50 to-indigo-50/40 dark:from-blue-950/20 dark:to-indigo-950/20 border border-blue-100 dark:border-blue-900/50">
+                                    <p className="text-xs font-semibold text-blue-600 dark:text-blue-400 mb-3 uppercase tracking-wide">End Point</p>
                                     <div className="grid grid-cols-2 gap-3">
                                         <div className="space-y-1.5">
                                             <Label htmlFor="e-lat" className="text-xs text-gray-500">Latitude *</Label>
@@ -520,7 +546,7 @@ export default function CreateLocationPage() {
                             <Button
                                 type="submit"
                                 disabled={isSubmitting || !isFormComplete}
-                                className="flex-1 bg-gradient-to-r from-amber-500 via-orange-500 to-red-600 hover:from-amber-600 hover:via-orange-600 hover:to-red-700 text-white"
+                                className="flex-1 bg-gradient-to-r from-blue-500 via-indigo-500 to-blue-600 hover:from-blue-600 hover:via-indigo-600 hover:to-blue-700 text-white"
                             >
                                 {isSubmitting ? (
                                     <span className="flex items-center gap-2">
diff --git a/app/create-package/page.tsx b/app/create-package/page.tsx
index a6c107a..b41b19b 100644
--- a/app/create-package/page.tsx
+++ b/app/create-package/page.tsx
@@ -131,13 +131,28 @@ export default function CreatePackagePage() {
             render: (pkg: PackageType) => getProjectName(pkg.project_id)
         },
         {
-            key: "region",
-            header: "Region",
+            key: "project_state",
+            header: "Project State",
+            render: (pkg: PackageType) => {
+                const project = projects.find(p => p.id === pkg.project_id)
+                if (!project?.state) return <span className="text-gray-400">—</span>
+                return (
+                    <div className="flex flex-wrap gap-1">
+                        {project.state.split(',').map((item, idx) => (
+                            <span
+                                key={idx}
+                                className="px-2 py-0.5 rounded-full bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 text-[10px] font-semibold border border-blue-100 dark:border-blue-800 shadow-sm"
+                            >
+                                {item.trim()}
+                            </span>
+                        ))}
+                    </div>
+                )
+            }
         },
         {
-            key: "created_at",
-            header: "Created",
-            render: (pkg: PackageType) => new Date(pkg.created_at).toLocaleDateString()
+            key: "region",
+            header: "Region",
         },
     ]
 
@@ -145,16 +160,16 @@ export default function CreatePackagePage() {
         <div className="min-h-screen bg-mesh-gradient text-gray-900 dark:text-gray-100">
             <SidebarNavigation />
             <main className="ml-16 min-h-screen relative overflow-hidden">
-                <div className="mx-auto px-4 py-8 max-w-6xl relative z-10">
-                    {/* Header */}
+                <div className="mx-auto px-6 py-8 max-w-7xl relative z-10">
+                    {/* Refined Header */}
                     <div className="mb-8 animate-in fade-in slide-in-from-left duration-700">
-                        <div className="flex items-center gap-6">
-                            <div className="flex-shrink-0 w-16 h-16 rounded-2xl bg-white shadow-xl border-2 border-[#1e40af] transition-transform duration-300 hover:scale-110 flex items-center justify-center">
-                                <Package className="h-8 w-8 text-[#2563eb]" />
+                        <div className="flex items-center gap-5">
+                            <div className="p-3 rounded-2xl bg-gradient-to-br from-[#9bddeb] to-[#60a5fa] shadow-md flex items-center justify-center">
+                                <Package className="h-8 w-8 text-white" />
                             </div>
                             <div className="flex flex-col">
-                                <h1 className="text-3xl md:text-4xl font-extrabold text-[#2563eb] tracking-tight">
-                                    Packages
+                                <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">
+                                    Package Management
                                 </h1>
                                 <p className="text-gray-500 dark:text-gray-400 mt-1 text-sm font-medium italic">
                                     Manage project packages
@@ -199,7 +214,7 @@ export default function CreatePackagePage() {
                 <DialogContent className="max-w-2xl">
                     <DialogHeader>
                         <DialogTitle className="flex items-center gap-2">
-                            <Package className="h-5 w-5 text-violet-500" />
+                            <Package className="h-5 w-5 text-blue-500" />
                             Create New Package
                         </DialogTitle>
                         <DialogDescription>
@@ -209,9 +224,9 @@ export default function CreatePackagePage() {
 
                     {/* Success Message in Modal */}
                     {success && (
-                        <div className="flex items-center gap-3 p-4 rounded-xl bg-gradient-to-r from-violet-50 to-purple-50 dark:from-violet-950/30 dark:to-purple-950/30 border border-violet-200 dark:border-violet-800 animate-in fade-in slide-in-from-top duration-300">
-                            <CheckCircle2 className="h-5 w-5 text-violet-500 flex-shrink-0" />
-                            <p className="text-sm font-medium text-violet-700 dark:text-violet-400">Package created successfully!</p>
+                        <div className="flex items-center gap-3 p-4 rounded-xl bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-950/30 dark:to-indigo-950/30 border border-blue-200 dark:border-blue-800 animate-in fade-in slide-in-from-top duration-300">
+                            <CheckCircle2 className="h-5 w-5 text-blue-500 flex-shrink-0" />
+                            <p className="text-sm font-medium text-blue-700 dark:text-blue-400">Package created successfully!</p>
                         </div>
                     )}
 
@@ -227,18 +242,18 @@ export default function CreatePackagePage() {
 
                     <form onSubmit={handleSubmit} className="space-y-6">
                         {/* Step 1: Select Project */}
-                        <div className="p-4 rounded-xl bg-gradient-to-r from-violet-50/50 to-purple-50/50 dark:from-violet-950/20 dark:to-purple-950/20 border border-violet-100 dark:border-violet-900/50">
+                        <div className="p-4 rounded-xl bg-gradient-to-r from-blue-50/50 to-indigo-50/40 dark:from-blue-950/20 dark:to-indigo-950/20 border border-blue-100 dark:border-blue-900/50">
                             <div className="flex items-center gap-2 mb-3">
-                                <div className="w-6 h-6 rounded-full bg-gradient-to-br from-violet-500 to-purple-600 flex items-center justify-center">
+                                <div className="w-6 h-6 rounded-full bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center">
                                     <span className="text-white text-xs font-bold">1</span>
                                 </div>
-                                <p className="text-sm font-bold text-violet-700 dark:text-violet-400">Select Project</p>
+                                <p className="text-sm font-bold text-blue-700 dark:text-blue-400">Select Project</p>
                             </div>
                             <Select value={selectedProjectId} onValueChange={setSelectedProjectId}>
-                                <SelectTrigger className="h-11 bg-white dark:bg-gray-800 border-violet-200 dark:border-violet-800 focus:border-violet-400">
+                                <SelectTrigger className="h-11 bg-white dark:bg-gray-800 border-blue-200 dark:border-blue-800 focus:border-blue-400">
                                     {loadingProjects ? (
                                         <div className="flex items-center gap-2">
-                                            <Loader2 className="h-4 w-4 animate-spin text-violet-500" />
+                                            <Loader2 className="h-4 w-4 animate-spin text-blue-500" />
                                             <span className="text-gray-400">Loading projects...</span>
                                         </div>
                                     ) : (
@@ -255,7 +270,7 @@ export default function CreatePackagePage() {
                                 </SelectContent>
                             </Select>
                             {selectedProject && (
-                                <div className="mt-2 px-3 py-1.5 rounded-lg bg-violet-100/50 dark:bg-violet-900/20 text-xs text-violet-600 dark:text-violet-400">
+                                <div className="mt-2 px-3 py-1.5 rounded-lg bg-blue-100/50 dark:bg-blue-900/20 text-xs text-blue-600 dark:text-blue-400">
                                     Selected: <span className="font-semibold">{selectedProject.name}</span>
                                     {selectedProject.corridor_name && ` • ${selectedProject.corridor_name}`}
                                 </div>
@@ -265,7 +280,7 @@ export default function CreatePackagePage() {
                         {/* Step 2: Package Info */}
                         <div className={`space-y-4 transition-opacity duration-300 ${selectedProjectId ? 'opacity-100' : 'opacity-40 pointer-events-none'}`}>
                             <div className="flex items-center gap-2">
-                                <div className={`w-6 h-6 rounded-full flex items-center justify-center ${selectedProjectId ? 'bg-gradient-to-br from-violet-500 to-purple-600' : 'bg-gray-300 dark:bg-gray-600'}`}>
+                                <div className={`w-6 h-6 rounded-full flex items-center justify-center ${selectedProjectId ? 'bg-gradient-to-br from-blue-500 to-indigo-600' : 'bg-gray-300 dark:bg-gray-600'}`}>
                                     <span className="text-white text-xs font-bold">2</span>
                                 </div>
                                 <p className="text-sm font-bold text-gray-700 dark:text-gray-300">Package Information</p>
@@ -317,7 +332,7 @@ export default function CreatePackagePage() {
                             <Button
                                 type="submit"
                                 disabled={isSubmitting || !name.trim() || !selectedProjectId}
-                                className="flex-1 bg-gradient-to-r from-violet-500 via-purple-500 to-fuchsia-600 hover:from-violet-600 hover:via-purple-600 hover:to-fuchsia-700 text-white"
+                                className="flex-1 bg-gradient-to-r from-blue-500 via-indigo-500 to-blue-600 hover:from-blue-600 hover:via-indigo-600 hover:to-blue-700 text-white"
                             >
                                 {isSubmitting ? (
                                     <span className="flex items-center gap-2">
diff --git a/app/create-project/page.tsx b/app/create-project/page.tsx
index 1904525..b3dbcff 100644
--- a/app/create-project/page.tsx
+++ b/app/create-project/page.tsx
@@ -127,27 +127,22 @@ export default function CreateProjectPage() {
             key: "corridor_name",
             header: "Corridor",
         },
-        {
-            key: "created_at",
-            header: "Created",
-            render: (project: Project) => new Date(project.created_at).toLocaleDateString()
-        },
     ]
 
     return (
         <div className="min-h-screen bg-mesh-gradient text-gray-900 dark:text-gray-100">
             <SidebarNavigation />
             <main className="ml-16 min-h-screen relative overflow-hidden">
-                <div className="mx-auto px-4 py-8 max-w-6xl relative z-10">
-                    {/* Header */}
+                <div className="mx-auto px-6 py-8 max-w-7xl relative z-10">
+                    {/* Refined Header */}
                     <div className="mb-8 animate-in fade-in slide-in-from-left duration-700">
-                        <div className="flex items-center gap-6">
-                            <div className="flex-shrink-0 w-16 h-16 rounded-2xl bg-white shadow-xl border-2 border-blue-800 transition-transform duration-300 hover:scale-110 flex items-center justify-center">
-                                <FolderPlus className="h-8 w-8 text-blue-600" />
+                        <div className="flex items-center gap-5">
+                            <div className="p-3 rounded-2xl bg-gradient-to-br from-[#9bddeb] to-[#60a5fa] shadow-md flex items-center justify-center">
+                                <FolderPlus className="h-8 w-8 text-white" />
                             </div>
                             <div className="flex flex-col">
-                                <h1 className="text-3xl md:text-4xl font-extrabold text-blue-600 tracking-tight">
-                                    Projects
+                                <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">
+                                    Project Management
                                 </h1>
                                 <p className="text-gray-500 dark:text-gray-400 mt-1 text-sm font-medium italic">
                                     Manage road infrastructure projects
diff --git a/app/dashboard/page.tsx b/app/dashboard/page.tsx
index c02d274..418d9eb 100644
--- a/app/dashboard/page.tsx
+++ b/app/dashboard/page.tsx
@@ -276,11 +276,20 @@ export default function DashboardPage() {
 
             {/* Main Content - offset by sidebar width */}
             <main className="ml-16 min-h-screen">
-                <div className="p-6 max-w-[1600px] mx-auto">
+                <div className="p-4 px-8 max-w-full mx-auto">
                     {/* Header */}
-                    <div className="mb-6 animate-in fade-in slide-in-from-top duration-500">
+                    <div className="mb-8 flex items-center gap-5 animate-in fade-in slide-in-from-top duration-500">
+                        <div className="p-3 rounded-2xl bg-gradient-to-br from-[#9bddeb] to-[#60a5fa] shadow-md flex items-center justify-center relative overflow-hidden group">
+                            {/* Constant orbit animations */}
+                            <div className="absolute inset-0 bg-white/20 animate-logo-spin-slow opacity-50"></div>
+                            <div className="absolute inset-0 border-2 border-white/30 rounded-2xl animate-logo-spin-reverse-slow opacity-30"></div>
+                            <svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg" className="h-8 w-8 text-white relative z-10 animate-logo-float">
+                                <path d="M50 20L85 80H15L50 20Z" stroke="currentColor" strokeWidth="6" strokeLinejoin="round" />
+                                <path d="M40 80L50 55L60 80" stroke="currentColor" strokeWidth="6" />
+                            </svg>
+                        </div>
                         <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">
+                            <h1 className="text-3xl 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">
@@ -304,7 +313,7 @@ export default function DashboardPage() {
                             subtitle="All detected objects"
                             value={stats.totalDetections}
                             icon={TrendingUp}
-                            gradient="green"
+                            gradient="purple"
                             isLoading={isLoading}
                         />
                         <GradientStatsCard
@@ -312,7 +321,7 @@ export default function DashboardPage() {
                             subtitle="Road surface damage"
                             value={stats.totalPotholes}
                             icon={AlertTriangle}
-                            gradient="coral"
+                            gradient="green"
                             isLoading={isLoading}
                         />
                         <GradientStatsCard
diff --git a/app/globals.css b/app/globals.css
index 1e7d0de..55d2d06 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -9,7 +9,7 @@
   --primary-foreground: oklch(0.98 0.01 264);
 
   /* Background & Surfaces */
-  --background: hsla(210, 100%, 98%, 1);
+  --background: #f8fafc;
   --foreground: oklch(0.15 0.02 280);
   --card: oklch(1 0 0);
   --card-foreground: oklch(0.15 0.02 280);
@@ -51,14 +51,14 @@
   --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);
+  --sidebar: #ffffff;
+  --sidebar-foreground: #64748b;
+  --sidebar-primary: #2563eb;
+  --sidebar-primary-foreground: #ffffff;
+  --sidebar-accent: #f1f5f9;
+  --sidebar-accent-foreground: #0f172a;
+  --sidebar-border: #e2e8f0;
+  --sidebar-ring: #3b82f6;
 }
 
 .dark {
@@ -167,8 +167,7 @@
 /* Premium Background with Animated Mesh Gradient */
 @layer utilities {
   .bg-mesh-gradient {
-    background: hsla(210, 100%, 98%, 1);
-    background: linear-gradient(135deg, hsla(210, 100%, 98%, 1) 0%, hsla(220, 100%, 95%, 1) 100%);
+    background: #f8fafc;
   }
 
   .dark .bg-mesh-gradient {
diff --git a/app/new-analysis/page.tsx b/app/new-analysis/page.tsx
index 5744d1f..7e880d6 100644
--- a/app/new-analysis/page.tsx
+++ b/app/new-analysis/page.tsx
@@ -4,6 +4,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"
+import { TrendingUp } from "lucide-react"
 
 export default function NewAnalysisPage() {
     const router = useRouter()
@@ -22,11 +23,14 @@ export default function NewAnalysisPage() {
             {/* Main Content */}
             <main className="ml-16 min-h-screen relative overflow-hidden">
 
-                <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">
+                <div className="container mx-auto px-6 py-10 max-w-7xl relative z-10">
+                    {/* Refined Left-Aligned Header */}
+                    <div className="mb-8 flex items-center gap-5 animate-in fade-in slide-in-from-top duration-700">
+                        <div className="p-3 rounded-2xl bg-gradient-to-br from-[#9bddeb] to-[#60a5fa] shadow-md flex items-center justify-center">
+                            <TrendingUp className="h-8 w-8 text-white" />
+                        </div>
+                        <div>
+                            <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">
                                 VisionRoad Detection System
                             </h1>
                         </div>
diff --git a/app/results/page.tsx b/app/results/page.tsx
index 9cd62ec..e8e8a47 100644
--- a/app/results/page.tsx
+++ b/app/results/page.tsx
@@ -3,7 +3,7 @@
 import { useState, useEffect } from "react"
 import { useRouter } from "next/navigation"
 import { Button } from "@/components/ui/button"
-import { Loader2, ArrowLeft, MapPin, Package, FolderKanban, RotateCcw } from "lucide-react"
+import { Loader2, ArrowLeft, MapPin, Package, FolderKanban, RotateCcw, TrendingUp } from "lucide-react"
 import VideoPlayerSection from "@/components/video-player-section"
 import { SidebarNavigation } from "@/components/sidebar-navigation"
 import {
@@ -185,54 +185,46 @@ export default function ResultsPage() {
 
             {/* 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 className="container mx-auto px-6 py-8 max-w-full">
+                    {/* Refined Header */}
+                    <div className="mb-8 flex items-center gap-5 animate-in fade-in slide-in-from-top duration-700">
+                        <div className="p-3 rounded-2xl bg-gradient-to-br from-[#9bddeb] to-[#60a5fa] shadow-md flex items-center justify-center">
+                            <TrendingUp className="h-8 w-8 text-white" />
+                        </div>
+                        <div>
+                            <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>
+                            <p className="text-gray-500 dark:text-gray-400 mt-1 text-sm font-medium">
+                                View your AI-powered road analysis results
+                            </p>
+                        </div>
                     </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-card border border-[var(--border)] shadow-sm">
-                                <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 className="flex items-center gap-12">
+                                    <div className="flex flex-col">
+                                        <span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground leading-none mb-1.5">Project</span>
+                                        <span className="text-base font-bold text-gray-900 dark:text-white leading-tight">
+                                            {session.projectName}
+                                        </span>
                                     </div>
-                                    <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">
-                                            <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-blue-600 to-indigo-600 dark:from-blue-400 dark:to-indigo-400 bg-clip-text text-transparent">{session.packageName}</span>
+                                    <div className="flex flex-col">
+                                        <span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground leading-none mb-1.5">Package</span>
+                                        <span className="text-sm font-bold text-gray-700 dark:text-gray-300 leading-tight">
+                                            {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 className="flex flex-col">
+                                        <span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground leading-none mb-1.5">Location</span>
+                                        <span className="text-sm font-bold text-gray-700 dark:text-gray-300 leading-tight">
+                                            {session.locationName}
+                                        </span>
                                     </div>
                                 </div>
-                                <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>
                         </div>
                     )}
diff --git a/app/upload/page.tsx b/app/upload/page.tsx
index 4b2b1bd..96294e5 100644
--- a/app/upload/page.tsx
+++ b/app/upload/page.tsx
@@ -7,7 +7,7 @@ import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
-import { Loader2 } from "lucide-react"
+import { Loader2, TrendingUp } from "lucide-react"
 import { SidebarNavigation } from "@/components/sidebar-navigation"
 import {
     type SessionContext,
@@ -174,10 +174,13 @@ export default function UploadPage() {
             {/* Main Content */}
             <main className="ml-16 min-h-screen relative overflow-hidden flex flex-col">
 
-                <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">
+                <div className="flex-1 container mx-auto px-6 py-6 max-w-7xl relative z-10 flex flex-col">
+                    {/* Refined Header */}
+                    <div className="mb-6 flex items-center gap-5 animate-in fade-in slide-in-from-top duration-700">
+                        <div className="p-3 rounded-2xl bg-gradient-to-br from-[#9bddeb] to-[#60a5fa] shadow-md flex items-center justify-center">
+                            <TrendingUp className="h-8 w-8 text-white" />
+                        </div>
+                        <div>
                             <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>
@@ -189,20 +192,24 @@ export default function UploadPage() {
                         <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 className="flex items-center gap-12">
+                                        <div className="flex flex-col">
+                                            <span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground leading-none mb-1.5">Project</span>
+                                            <span className="text-base font-bold text-gray-900 dark:text-white leading-tight">
+                                                {session.projectName}
+                                            </span>
                                         </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 className="flex flex-col">
+                                            <span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground leading-none mb-1.5">Package</span>
+                                            <span className="text-sm font-bold text-gray-700 dark:text-gray-300 leading-tight">
+                                                {session.packageName}
+                                            </span>
                                         </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 className="flex flex-col">
+                                            <span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground leading-none mb-1.5">Location</span>
+                                            <span className="text-sm font-bold text-gray-700 dark:text-gray-300 leading-tight">
+                                                {session.locationName}
+                                            </span>
                                         </div>
                                     </div>
                                     <Button
@@ -220,7 +227,7 @@ export default function UploadPage() {
 
                     {/* Upload Card */}
                     <Card className="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">
+                        <CardHeader className="pb-4 border-b border-gray-100 dark:border-gray-700 bg-white dark:bg-gray-900">
                             <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
@@ -248,14 +255,6 @@ export default function UploadPage() {
                                         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 */}
@@ -274,14 +273,6 @@ export default function UploadPage() {
                                         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 */}
diff --git a/components/dashboard/compact-project-selector.tsx b/components/dashboard/compact-project-selector.tsx
index f444159..2807d6b 100644
--- a/components/dashboard/compact-project-selector.tsx
+++ b/components/dashboard/compact-project-selector.tsx
@@ -28,16 +28,14 @@ export function CompactProjectSelector({
     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>
+            <div className="flex flex-col min-w-[120px]">
+                <span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground leading-none mb-1">Project</span>
                 <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">
+                    <SelectTrigger className="h-auto p-0 border-0 shadow-none focus:ring-0 text-sm font-bold text-gray-900 dark:text-white bg-transparent text-left">
                         <SelectValue placeholder="Select project" />
                     </SelectTrigger>
                     <SelectContent>
@@ -53,12 +51,10 @@ export function CompactProjectSelector({
             {/* 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">
+                    <div className="h-8 w-px bg-gray-200 dark:bg-gray-700 mx-2" />
+                    <div className="flex flex-col">
+                        <span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground leading-none mb-1">Corridor</span>
+                        <span className="text-xs font-bold text-gray-600 dark:text-gray-400">
                             {selectedProject.corridor_name}
                         </span>
                     </div>
@@ -68,12 +64,10 @@ export function CompactProjectSelector({
             {/* 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">
+                    <div className="h-8 w-px bg-gray-200 dark:bg-gray-700 mx-2" />
+                    <div className="flex flex-col">
+                        <span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground leading-none mb-1">State</span>
+                        <span className="text-xs font-bold text-gray-600 dark:text-gray-400">
                             {selectedProject.state}
                         </span>
                     </div>
diff --git a/components/dashboard/dashboard-map-content.tsx b/components/dashboard/dashboard-map-content.tsx
index 34448b0..788d131 100644
--- a/components/dashboard/dashboard-map-content.tsx
+++ b/components/dashboard/dashboard-map-content.tsx
@@ -54,7 +54,7 @@ export default function DashboardMapContent({ detections }: DashboardMapContentP
     // 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: "#10b981", stroke: "#065f46" } // Green for potholes
         }
         return { fill: "#3b82f6", stroke: "#2563eb" } // Blue for signboards
     }
diff --git a/components/dashboard/dashboard-map.tsx b/components/dashboard/dashboard-map.tsx
index ff71558..63308e3 100644
--- a/components/dashboard/dashboard-map.tsx
+++ b/components/dashboard/dashboard-map.tsx
@@ -106,7 +106,7 @@ export function DashboardMap({
                     {/* 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" />
+                            <div className="w-3 h-3 rounded-full bg-emerald-500 shadow-sm shadow-emerald-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">
diff --git a/components/dashboard/detection-donut-chart.tsx b/components/dashboard/detection-donut-chart.tsx
index da04296..92f6f6a 100644
--- a/components/dashboard/detection-donut-chart.tsx
+++ b/components/dashboard/detection-donut-chart.tsx
@@ -10,7 +10,7 @@ interface DetectionDonutChartProps {
 }
 
 const COLORS = {
-    pothole: "#ef4444",
+    pothole: "#10b981",
     signboard: "#3b82f6"
 }
 
diff --git a/components/dashboard/gradient-stats-card.tsx b/components/dashboard/gradient-stats-card.tsx
index aa9b6a7..df444f5 100644
--- a/components/dashboard/gradient-stats-card.tsx
+++ b/components/dashboard/gradient-stats-card.tsx
@@ -16,30 +16,26 @@ const gradientStyles = {
     green: {
         background: "bg-card",
         border: "border-l-4 border-l-[var(--border)]",
-        iconBg: "bg-[#60a5fa]",
-        iconShadow: "shadow-lg shadow-[#60a5fa]/20",
-        valueGradient: "text-gray-900 dark:text-white"
+        iconBg: "bg-gradient-to-br from-blue-400 to-blue-600",
+        iconShadow: "shadow-lg shadow-blue-500/20"
     },
     coral: {
         background: "bg-card",
         border: "border-l-4 border-l-[var(--border)]",
-        iconBg: "bg-[#60a5fa]",
-        iconShadow: "shadow-lg shadow-[#60a5fa]/20",
-        valueGradient: "text-gray-900 dark:text-white"
+        iconBg: "bg-gradient-to-br from-blue-400 to-blue-600",
+        iconShadow: "shadow-lg shadow-blue-500/20"
     },
     blue: {
         background: "bg-card",
         border: "border-l-4 border-l-[var(--border)]",
-        iconBg: "bg-[#60a5fa]",
-        iconShadow: "shadow-lg shadow-[#60a5fa]/20",
-        valueGradient: "text-gray-900 dark:text-white"
+        iconBg: "bg-gradient-to-br from-blue-400 to-blue-600",
+        iconShadow: "shadow-lg shadow-blue-500/20"
     },
     purple: {
         background: "bg-card",
         border: "border-l-4 border-l-[var(--border)]",
-        iconBg: "bg-[#60a5fa]",
-        iconShadow: "shadow-lg shadow-[#60a5fa]/20",
-        valueGradient: "text-gray-900 dark:text-white"
+        iconBg: "bg-gradient-to-br from-blue-400 to-blue-600",
+        iconShadow: "shadow-lg shadow-blue-500/20"
     }
 }
 
@@ -54,7 +50,7 @@ export function GradientStatsCard({
     const styles = gradientStyles[gradient]
 
     return (
-        <Card className="bg-white dark:bg-gray-900 border-none shadow-xl shadow-blue-500/5 overflow-hidden py-8 px-6 transition-all duration-300 hover:shadow-2xl hover:shadow-blue-500/10 group">
+        <Card className="bg-white dark:bg-gray-900 border-none shadow-xl shadow-blue-500/5 overflow-hidden py-8 px-6">
             <CardContent className="p-0 flex items-center justify-between gap-6">
                 <div className="flex flex-col gap-1 min-w-0">
                     <h3 className="text-sm font-bold text-blue-600/70 dark:text-blue-400/70 uppercase tracking-widest">
@@ -65,7 +61,7 @@ export function GradientStatsCard({
                             <div className="h-14 w-24 bg-gray-100 dark:bg-gray-800 rounded-xl animate-pulse mt-2" />
                         ) : (
                             <>
-                                <p className="text-5xl md:text-6xl font-black tracking-tighter text-gray-900 dark:text-white leading-tight">
+                                <p className="text-3xl md:text-4xl font-black tracking-tighter leading-tight text-[#1e3a8a]">
                                     {value}
                                 </p>
                                 {subtitle && (
@@ -81,7 +77,6 @@ export function GradientStatsCard({
                 <div className={`
                     w-20 h-20 rounded-3xl flex items-center justify-center flex-shrink-0
                     ${styles.iconBg} shadow-[0_10px_30px_rgba(37,99,235,0.2)]
-                    transition-all duration-500 group-hover:scale-110 group-hover:rotate-6
                 `}>
                     <Icon className="h-10 w-10 text-white" />
                 </div>
diff --git a/components/dashboard/location-bar-chart.tsx b/components/dashboard/location-bar-chart.tsx
index 2b9bc26..b3280a3 100644
--- a/components/dashboard/location-bar-chart.tsx
+++ b/components/dashboard/location-bar-chart.tsx
@@ -16,7 +16,7 @@ interface LocationBarChartProps {
 }
 
 const COLORS = {
-    pothole: "#ef4444",
+    pothole: "#10b981",
     signboard: "#3b82f6"
 }
 
@@ -48,8 +48,8 @@ export function LocationBarChart({ data, isLoading }: LocationBarChartProps) {
                 >
                     <defs>
                         <linearGradient id="barGradientPothole" x1="0" y1="0" x2="0" y2="1">
-                            <stop offset="0%" stopColor="#ef4444" stopOpacity={0.8} />
-                            <stop offset="100%" stopColor="#ef4444" stopOpacity={0.4} />
+                            <stop offset="0%" stopColor="#10b981" stopOpacity={0.8} />
+                            <stop offset="100%" stopColor="#10b981" stopOpacity={0.4} />
                         </linearGradient>
                         <linearGradient id="barGradientSignboard" x1="0" y1="0" x2="0" y2="1">
                             <stop offset="0%" stopColor="#3b82f6" stopOpacity={0.8} />
diff --git a/components/data-table.tsx b/components/data-table.tsx
index c8a15c6..6c4de5a 100644
--- a/components/data-table.tsx
+++ b/components/data-table.tsx
@@ -36,7 +36,7 @@ export function DataTable<T extends Record<string, any>>({
                 </div>
                 <Button
                     onClick={onAddNew}
-                    className="bg-blue-600 hover:bg-blue-800 text-white shadow-md transition-all duration-300 hover:scale-105 active:scale-95 border-none h-8 px-4 text-xs font-semibold rounded-lg"
+                    className="bg-blue-600 hover:bg-blue-800 text-white shadow-md transition-all duration-300 hover:scale-105 active:scale-95 border-none h-8 px-4 text-xs font-semibold"
                 >
                     <Plus className="h-3.5 w-3.5 mr-1.5 stroke-[3px]" />
                     {addButtonText}
@@ -44,58 +44,60 @@ export function DataTable<T extends Record<string, any>>({
             </div>
 
             {/* Table */}
-            <div className="overflow-hidden rounded-2xl border border-[var(--border)] bg-card shadow-2xl shadow-black/5">
-                <table className="min-w-full divide-y divide-gray-200/50 dark:divide-gray-700/50 border-collapse">
-                    <thead className="bg-[#f8fafc] dark:bg-gray-900/50">
-                        <tr>
-                            {columns.map((col) => (
-                                <th
-                                    key={col.key}
-                                    className="px-6 py-4 text-left text-[11px] font-black text-gray-500 dark:text-gray-400 uppercase tracking-[0.1em] border-b border-[var(--border)]"
-                                >
-                                    {col.header}
-                                </th>
-                            ))}
-                        </tr>
-                    </thead>
-                    <tbody className="divide-y divide-gray-100/30 dark:divide-gray-800/30">
-                        {isLoading ? (
+            <div className="rounded-2xl border border-[var(--border)] bg-card shadow-2xl shadow-black/5 overflow-hidden">
+                <div className="overflow-auto max-h-[400px]">
+                    <table className="min-w-full divide-y divide-gray-200/50 dark:divide-gray-700/50 border-collapse">
+                        <thead className="bg-[#f8fafc] dark:bg-gray-900/50 sticky top-0 z-10">
                             <tr>
-                                <td colSpan={columns.length} className="px-6 py-16 text-center">
-                                    <div className="flex flex-col items-center justify-center gap-3">
-                                        <div className="h-8 w-8 border-3 border-gray-200 border-t-blue-500 rounded-full animate-spin" />
-                                        <span className="text-sm font-medium text-gray-500 dark:text-gray-400">Loading records...</span>
-                                    </div>
-                                </td>
+                                {columns.map((col) => (
+                                    <th
+                                        key={col.key}
+                                        className="px-4 py-3 text-left text-[10px] font-black text-gray-500 dark:text-gray-400 uppercase tracking-[0.1em] border-b border-[var(--border)] bg-[#f8fafc] dark:bg-gray-900 shadow-[0_1px_0_0_rgba(0,0,0,0.05)]"
+                                    >
+                                        {col.header}
+                                    </th>
+                                ))}
                             </tr>
-                        ) : data.length === 0 ? (
-                            <tr>
-                                <td colSpan={columns.length} className="px-6 py-16 text-center">
-                                    <div className="flex flex-col items-center justify-center gap-2">
-                                        <div className="w-12 h-12 bg-gray-100 dark:bg-gray-800 rounded-full flex items-center justify-center mb-2">
-                                            <Plus className="w-6 h-6 text-gray-400" />
+                        </thead>
+                        <tbody className="divide-y divide-gray-100/30 dark:divide-gray-800/30">
+                            {isLoading ? (
+                                <tr>
+                                    <td colSpan={columns.length} className="px-4 py-12 text-center">
+                                        <div className="flex flex-col items-center justify-center gap-3">
+                                            <div className="h-8 w-8 border-3 border-gray-200 border-t-blue-500 rounded-full animate-spin" />
+                                            <span className="text-sm font-medium text-gray-500 dark:text-gray-400">Loading records...</span>
                                         </div>
-                                        <p className="text-gray-500 dark:text-gray-400 font-medium">No data available</p>
-                                        <p className="text-xs text-gray-400 dark:text-gray-500">Click "{addButtonText}" to get started</p>
-                                    </div>
-                                </td>
-                            </tr>
-                        ) : (
-                            data.map((item, idx) => (
-                                <tr
-                                    key={idx}
-                                    className="hover:bg-blue-50/30 dark:hover:bg-blue-900/10 transition-colors duration-200"
-                                >
-                                    {columns.map((col) => (
-                                        <td key={col.key} className="px-6 py-4 text-sm text-gray-700 dark:text-gray-300 font-medium">
-                                            {col.render ? col.render(item) : item[col.key] || "—"}
-                                        </td>
-                                    ))}
+                                    </td>
                                 </tr>
-                            ))
-                        )}
-                    </tbody>
-                </table>
+                            ) : data.length === 0 ? (
+                                <tr>
+                                    <td colSpan={columns.length} className="px-4 py-12 text-center">
+                                        <div className="flex flex-col items-center justify-center gap-2">
+                                            <div className="w-12 h-12 bg-gray-100 dark:bg-gray-800 rounded-full flex items-center justify-center mb-2">
+                                                <Plus className="w-6 h-6 text-gray-400" />
+                                            </div>
+                                            <p className="text-gray-500 dark:text-gray-400 font-medium">No data available</p>
+                                            <p className="text-xs text-gray-400 dark:text-gray-500">Click "{addButtonText}" to get started</p>
+                                        </div>
+                                    </td>
+                                </tr>
+                            ) : (
+                                data.map((item, idx) => (
+                                    <tr
+                                        key={idx}
+                                        className="hover:bg-blue-50/30 dark:hover:bg-blue-900/10 transition-colors duration-200"
+                                    >
+                                        {columns.map((col) => (
+                                            <td key={col.key} className="px-4 py-3 text-[13px] text-gray-700 dark:text-gray-300 font-medium">
+                                                {col.render ? col.render(item) : (item[col.key as keyof T] !== null && item[col.key as keyof T] !== undefined ? String(item[col.key as keyof T]) : "—")}
+                                            </td>
+                                        ))}
+                                    </tr>
+                                ))
+                            )}
+                        </tbody>
+                    </table>
+                </div>
             </div>
         </div>
     )
diff --git a/components/map-modal.tsx b/components/map-modal.tsx
index 47ae620..2984eac 100644
--- a/components/map-modal.tsx
+++ b/components/map-modal.tsx
@@ -28,9 +28,19 @@ function FitBounds({ bounds }: { bounds: LatLngBounds }) {
     const map = useMap()
 
     useEffect(() => {
-        if (bounds.isValid()) {
-            map.fitBounds(bounds, { padding: [50, 50] })
-        }
+        if (!map || !bounds.isValid()) return
+
+        // Small delay to ensure the container dimensions are fully calculated (prevents _leaflet_pos error)
+        const timer = setTimeout(() => {
+            map.invalidateSize()
+            map.fitBounds(bounds, {
+                padding: [50, 50],
+                maxZoom: 16,
+                animate: true
+            })
+        }, 200)
+
+        return () => clearTimeout(timer)
     }, [bounds, map])
 
     return null
@@ -75,9 +85,9 @@ export default function MapModal({ open, onClose, detections, detectionType }: M
 
     return (
         <Dialog open={open} onOpenChange={onClose}>
-            <DialogContent className="max-w-4xl h-[600px] p-0">
-                <DialogHeader className="px-6 pt-6 pb-2">
-                    <DialogTitle>
+            <DialogContent className="max-w-6xl h-[80vh] p-0 flex flex-col overflow-hidden border-none shadow-2xl">
+                <DialogHeader className="px-6 pt-6 pb-4 bg-white dark:bg-gray-900 border-b border-gray-100 dark:border-gray-800 shrink-0">
+                    <DialogTitle className="text-xl font-bold">
                         {isPothole ? "Pothole" : "Signboard"} Detection Map
                     </DialogTitle>
                     <p className="text-sm text-muted-foreground">
@@ -85,7 +95,7 @@ export default function MapModal({ open, onClose, detections, detectionType }: M
                     </p>
                 </DialogHeader>
 
-                <div className="h-[calc(100%-80px)] w-full">
+                <div className="flex-1 w-full bg-gray-50 dark:bg-gray-950 relative">
                     <MapContainer
                         center={center}
                         zoom={13}
@@ -111,8 +121,8 @@ export default function MapModal({ open, onClose, detections, detectionType }: M
                                 key={`${detection.id}-${idx}`}
                                 center={[detection.latitude, detection.longitude]}
                                 radius={8}
-                                fillColor="#ef4444"
-                                color="#dc2626"
+                                fillColor="#10b981"
+                                color="#065f46"
                                 weight={2}
                                 opacity={1}
                                 fillOpacity={0.8}
diff --git a/components/navigation-menu.tsx b/components/navigation-menu.tsx
index 97102b9..32049f5 100644
--- a/components/navigation-menu.tsx
+++ b/components/navigation-menu.tsx
@@ -89,12 +89,12 @@ export function NavigationMenu() {
                     <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">
+            <SheetContent side="left" className="w-[320px] sm:w-[380px] bg-white backdrop-blur-xl border-r border-slate-200">
+                <SheetHeader className="pb-6 border-b border-slate-100">
+                    <SheetTitle className="text-2xl font-bold text-[#3b82f6]">
                         VisionRoad
                     </SheetTitle>
-                    <p className="text-sm text-muted-foreground">
+                    <p className="text-sm text-gray-500">
                         AI-Powered Road Detection System
                     </p>
                 </SheetHeader>
@@ -110,28 +110,30 @@ export function NavigationMenu() {
                                 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"
+                                    ? "bg-slate-50 border border-slate-200"
+                                    : "hover:bg-slate-50 border border-transparent hover:border-slate-100"
                                     }`}
                             >
-                                <div className={`p-2.5 rounded-lg transition-all duration-300 ${isActive
-                                    ? "bg-[#60a5fa] text-white"
-                                    : "bg-white/5 text-muted-foreground group-hover:bg-[#60a5fa]/10 group-hover:text-[#60a5fa]"
+                                <div className={`p-2.5 rounded-lg transition-all duration-300 border shadow-sm ${isActive
+                                    ? "bg-[#2563eb] text-white border-[#2563eb]"
+                                    : "bg-[#f0fafd] text-slate-900 group-hover:bg-[#2563eb] group-hover:text-white group-hover:border-[#2563eb] border-slate-100"
                                     }`}>
-                                    <Icon className="h-5 w-5" />
+                                    <Icon
+                                        className={`h-5 w-5 ${isActive ? 'stroke-[2.5]' : 'stroke-[2]'}`}
+                                    />
                                 </div>
                                 <div className="flex-1 min-w-0">
-                                    <h3 className={`font-semibold text-sm ${isActive ? "text-primary" : "text-foreground"
+                                    <h3 className={`font-semibold text-sm ${isActive ? "text-[#1e40af]" : "text-gray-700"
                                         }`}>
                                         {item.title}
                                     </h3>
-                                    <p className="text-xs text-muted-foreground truncate mt-0.5">
+                                    <p className="text-xs text-gray-400 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"
+                                    ? "text-[#1e40af] opacity-100"
+                                    : "text-gray-300 opacity-0 group-hover:opacity-100"
                                     }`} />
                             </button>
                         )
@@ -140,7 +142,7 @@ export function NavigationMenu() {
 
                 {/* Footer */}
                 <div className="absolute bottom-4 left-4 right-4 text-center">
-                    <p className="text-xs text-muted-foreground">
+                    <p className="text-xs text-gray-400">
                         Sentient Geeks Pvt. Ltd.
                     </p>
                 </div>
diff --git a/components/project-selection-section.tsx b/components/project-selection-section.tsx
index af94aa8..99f4449 100644
--- a/components/project-selection-section.tsx
+++ b/components/project-selection-section.tsx
@@ -148,8 +148,8 @@ export function ProjectSelectionSection({ onSelectionComplete }: ProjectSelectio
     }
 
     return (
-        <Card className="glass-card card-glow border-0 overflow-hidden">
-            <CardHeader className="pb-6 border-b border-border/50">
+        <Card className="bg-white dark:bg-gray-900 border border-gray-100 dark:border-gray-800 shadow-xl shadow-blue-500/5 overflow-hidden">
+            <CardHeader className="pb-6 border-b border-gray-100 dark:border-gray-800 bg-white dark:bg-gray-900">
                 <div className="flex flex-col gap-4">
                     <div>
                         <CardTitle className="text-2xl font-semibold">Select Project Location</CardTitle>
diff --git a/components/sidebar-navigation.tsx b/components/sidebar-navigation.tsx
index e35bc80..56b31c2 100644
--- a/components/sidebar-navigation.tsx
+++ b/components/sidebar-navigation.tsx
@@ -57,14 +57,7 @@ export function SidebarNavigation() {
     const isNewAnalysisActive = pathname === "/new-analysis"
 
     return (
-        <aside className="fixed left-0 top-0 h-screen w-20 bg-[#2563eb] border-r border-[#2563eb]/20 z-50 flex flex-col items-center py-8 shadow-2xl">
-            {/* Logo */}
-            <div className="mb-6">
-                <div className="w-12 h-12 rounded-xl bg-white flex items-center justify-center shadow-lg border-2 border-[#1e40af] transition-transform duration-300 hover:scale-110">
-                    <span className="text-[#2563eb] font-black text-xl">V</span>
-                </div>
-            </div>
-
+        <aside className="fixed left-0 top-0 h-screen w-20 bg-white border-r border-slate-200 z-50 flex flex-col items-center py-8 shadow-sm">
             {/* Navigation Items */}
             <nav className="flex-1 flex flex-col items-center gap-4">
                 {/* Dashboard - first item */}
@@ -77,14 +70,15 @@ export function SidebarNavigation() {
                                 onClick={() => handleNavigation(item)}
                                 className={`
                                     relative w-12 h-12 rounded-xl flex items-center justify-center
-                                    bg-white text-[#2563eb] shadow-lg border-2
-                                    ${isActive ? 'border-[#2563eb] ring-2 ring-white/30' : 'border-[#1e40af]'}
+                                    ${isActive ? 'bg-[#2563eb] border-[#2563eb] shadow-md' : 'bg-[#f0fafd] border-slate-100'}
                                     transition-all duration-300 ease-out
-                                    hover:scale-110 hover:shadow-xl
-                                    active:scale-95
+                                    hover:scale-110 hover:shadow-lg hover:bg-[#2563eb] hover:border-[#2563eb]
+                                    active:scale-95 border
                                 `}
                             >
-                                <Icon className={`h-6 w-6 ${isActive ? 'stroke-[2.5]' : 'stroke-[2]'}`} />
+                                <Icon
+                                    className={`h-6 w-6 transition-all duration-300 ${isActive ? 'text-white' : 'text-slate-900 group-hover:text-white'} stroke-[2.5]`}
+                                />
                             </button>
                             <div className="
                                 absolute left-full ml-3 top-1/2 -translate-y-1/2
@@ -107,14 +101,15 @@ export function SidebarNavigation() {
                         onClick={() => router.push("/new-analysis")}
                         className={`
                             relative w-12 h-12 rounded-xl flex items-center justify-center
-                            bg-white text-[#2563eb] shadow-lg border-2
-                            ${isNewAnalysisActive ? 'border-[#2563eb] ring-2 ring-white/30' : 'border-[#1e40af]'}
+                            ${isNewAnalysisActive ? 'bg-[#2563eb] border-[#2563eb] shadow-md' : 'bg-[#f0fafd] border-slate-100'}
                             transition-all duration-300 ease-out
-                            hover:scale-110 hover:shadow-xl
-                            active:scale-95
+                            hover:scale-110 hover:shadow-lg hover:bg-[#2563eb] hover:border-[#2563eb]
+                            active:scale-95 border
                         `}
                     >
-                        <Plus className={`h-6 w-6 ${isNewAnalysisActive ? 'stroke-[2.5]' : 'stroke-[2]'}`} />
+                        <Plus
+                            className={`h-6 w-6 transition-all duration-300 ${isNewAnalysisActive ? 'text-white' : 'text-slate-900 group-hover:text-white'} stroke-[2.5]`}
+                        />
                     </button>
                     <div className="
                         absolute left-full ml-3 top-1/2 -translate-y-1/2
@@ -130,7 +125,7 @@ export function SidebarNavigation() {
                 </div>
 
                 {/* Divider */}
-                <div className="w-8 h-px bg-white/20 my-1" />
+                <div className="w-8 h-px bg-slate-200 my-1" />
 
                 {/* Create items */}
                 {navItems.slice(1, 4).map((item) => {
@@ -142,14 +137,15 @@ export function SidebarNavigation() {
                                 onClick={() => handleNavigation(item)}
                                 className={`
                                     relative w-12 h-12 rounded-xl flex items-center justify-center
-                                    bg-white text-[#2563eb] shadow-lg border-2
-                                    ${isActive ? 'border-[#2563eb] ring-2 ring-white/30' : 'border-[#1e40af]'}
+                                    ${isActive ? 'bg-[#2563eb] border-[#2563eb] shadow-md' : 'bg-[#f0fafd] border-slate-100'}
                                     transition-all duration-300 ease-out
-                                    hover:scale-110 hover:shadow-xl
-                                    active:scale-95
+                                    hover:scale-110 hover:shadow-lg hover:bg-[#2563eb] hover:border-[#2563eb]
+                                    active:scale-95 border
                                 `}
                             >
-                                <Icon className={`h-6 w-6 ${isActive ? 'stroke-[2.5]' : 'stroke-[2]'}`} />
+                                <Icon
+                                    className={`h-6 w-6 transition-all duration-300 ${isActive ? 'text-white' : 'text-slate-900 group-hover:text-white'} stroke-[2.5]`}
+                                />
                             </button>
                             <div className="
                                 absolute left-full ml-3 top-1/2 -translate-y-1/2
@@ -172,10 +168,10 @@ export function SidebarNavigation() {
                 <div className="relative group">
                     <button
                         onClick={() => { }}
-                        className="w-12 h-12 rounded-full bg-white flex items-center justify-center cursor-not-allowed opacity-80 border-2 border-[#1e40af] transition-transform duration-300 hover:scale-110"
+                        className="w-12 h-12 rounded-full bg-[#f0fafd] flex items-center justify-center cursor-not-allowed opacity-80 border border-slate-100 transition-all duration-300 hover:scale-110 hover:bg-[#2563eb] hover:border-[#2563eb]"
                         disabled
                     >
-                        <User className="h-6 w-6 text-[#2563eb]" />
+                        <User className="h-6 w-6 text-slate-900 transition-colors duration-300 group-hover:text-white" />
                     </button>
                     <div className="
                         absolute left-full ml-3 top-1/2 -translate-y-1/2
diff --git a/components/ui/button.tsx b/components/ui/button.tsx
index f64632d..3166550 100644
--- a/components/ui/button.tsx
+++ b/components/ui/button.tsx
@@ -5,7 +5,7 @@ import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '@/lib/utils'
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-full text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
   {
     variants: {
       variant: {
@@ -22,8 +22,8 @@ const buttonVariants = cva(
       },
       size: {
         default: 'h-9 px-4 py-2 has-[>svg]:px-3',
-        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
-        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
+        sm: 'h-8 rounded-full gap-1.5 px-3 has-[>svg]:px-2.5',
+        lg: 'h-10 rounded-full px-6 has-[>svg]:px-4',
         icon: 'size-9',
         'icon-sm': 'size-8',
         'icon-lg': 'size-10',
diff --git a/components/video-player-section.tsx b/components/video-player-section.tsx
index c8dccd6..747d4c5 100644
--- a/components/video-player-section.tsx
+++ b/components/video-player-section.tsx
@@ -195,20 +195,22 @@ function DetailedSummarySection({
   })
 
   return (
-    <div className="space-y-4">
-      {/* Location-based Summary */}
-      <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-blue-50 to-indigo-50 dark:from-blue-950/30 dark:to-indigo-950/30">
+    <div className="grid grid-cols-1 lg:grid-cols-5 gap-4">
+      <Card className="bg-white dark:bg-gray-900 border border-gray-100 dark:border-gray-800 shadow-xl shadow-blue-500/5 rounded-xl overflow-hidden flex flex-col lg:col-span-2">
+        <CardHeader className="pb-3 bg-white dark:bg-gray-900 border-b border-gray-100 dark:border-gray-800 shrink-0">
           <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-blue-400 to-indigo-500 shadow-md shadow-blue-500/30">
-                <MapIcon className="h-4 w-4 text-white" />
+            <div className="flex items-center gap-3">
+              <div className="p-2 rounded-xl bg-gradient-to-br from-[#9bddeb] to-[#60a5fa] shadow-md flex items-center justify-center relative overflow-hidden group">
+                <div className="absolute inset-0 bg-white/20 animate-logo-spin-slow opacity-50"></div>
+                <div className="absolute inset-0 border-2 border-white/30 rounded-xl animate-logo-spin-reverse-slow opacity-30"></div>
+                <svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-white relative z-10 animate-logo-float">
+                  <path d="M50 20L85 80H15L50 20Z" stroke="currentColor" strokeWidth="6" strokeLinejoin="round" />
+                  <path d="M40 80L50 55L60 80" stroke="currentColor" strokeWidth="6" />
+                </svg>
               </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">
-                    Detection Locations
-                  </span>
+                <CardTitle className="text-base font-bold text-gray-900 dark:text-white">
+                  Detection Locations
                 </CardTitle>
                 <CardDescription className="text-xs">
                   {isPothole ? "Potholes" : "Signboards"} detected across project locations
@@ -226,48 +228,61 @@ function DetailedSummarySection({
             </Button>
           </div>
         </CardHeader>
-        <CardContent>
-          <div className="space-y-3">
-            {/* Project Info */}
-            <div className="text-xs space-y-1 pb-2 border-b">
-              <div><span className="text-muted-foreground">Project:</span> <span className="font-medium">{summaryData.project.name}</span></div>
-              {summaryData.project.corridor_name && (
-                <div><span className="text-muted-foreground">Corridor:</span> {summaryData.project.corridor_name}</div>
-              )}
-            </div>
-
-            {/* Packages and Locations */}
-            {Object.entries(summaryData.packages).map(([packageName, packageData]) => (
-              <div key={packageData.package_id} className="space-y-2">
-                <div className="text-xs font-medium">{packageName}</div>
-                <div className="pl-3 space-y-2">
-                  {Object.entries(packageData.locations).map(([locationName, locationData]) => (
-                    <div key={locationData.location_id} className="text-xs p-2 rounded bg-muted/30">
-                      <div className="font-medium mb-1">{locationName}</div>
-                      <div className="text-[10px] text-muted-foreground">
-                        {locationData.detection_count} {isPothole ? "pothole" : "signboard"}{locationData.detection_count !== 1 ? "s" : ""} detected
-                      </div>
-                    </div>
-                  ))}
+        <CardContent className="flex-1 p-0 overflow-hidden">
+          <ScrollArea className="h-[300px] p-6 pt-3">
+            <div className="space-y-3">
+              {/* Project Info */}
+              <div className="pb-3 border-b mb-3">
+                <div className="flex flex-col mb-3">
+                  <span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground mb-0.5">Project</span>
+                  <span className="text-base font-bold text-gray-900 dark:text-white">
+                    {summaryData.project.name}
+                  </span>
                 </div>
+                {summaryData.project.corridor_name && (
+                  <div className="flex flex-col">
+                    <span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground mb-0.5">Corridor</span>
+                    <span className="text-sm font-bold text-gray-700 dark:text-gray-300">
+                      {summaryData.project.corridor_name}
+                    </span>
+                  </div>
+                )}
               </div>
-            ))}
-          </div>
+
+              {/* Packages and Locations */}
+              {Object.entries(summaryData.packages).map(([packageName, packageData]) => (
+                <div key={packageData.package_id} className="space-y-2">
+                  <div className="text-xs font-medium">{packageName}</div>
+                  <div className="pl-3 space-y-2">
+                    {Object.entries(packageData.locations).map(([locationName, locationData]) => (
+                      <div key={locationData.location_id} className="text-xs p-2 rounded bg-muted/30 flex items-center justify-between gap-4">
+                        <div className="font-medium truncate">{locationName}</div>
+                        <div className="text-[10px] text-muted-foreground whitespace-nowrap">
+                          {locationData.detection_count} {isPothole ? "pothole" : "signboard"}{locationData.detection_count !== 1 ? "s" : ""} detected
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              ))}
+            </div>
+          </ScrollArea>
         </CardContent>
       </Card>
 
-      {/* All Detections List */}
-      <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" />
+      <Card className="bg-white dark:bg-gray-900 border border-gray-100 dark:border-gray-800 shadow-xl shadow-blue-500/5 rounded-xl overflow-hidden flex flex-col lg:col-span-3">
+        <CardHeader className="pb-3 bg-white dark:bg-gray-900 border-b border-gray-100 dark:border-gray-800 shrink-0">
+          <div className="flex items-center gap-3">
+            <div className="p-2 rounded-xl bg-gradient-to-br from-[#9bddeb] to-[#60a5fa] shadow-md flex items-center justify-center relative overflow-hidden group">
+              <div className="absolute inset-0 bg-white/10 animate-logo-spin-slow opacity-40"></div>
+              <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-white relative z-10 animate-logo-float">
+                <path d="M3 17L9 11L13 15L21 7" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
+                <path d="M15 7H21V13" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
+              </svg>
             </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 className="text-base font-bold text-gray-900 dark:text-white">
+                All Detections
               </CardTitle>
               <CardDescription className="text-xs">
                 Complete list of {isPothole ? "potholes" : "signboards"} with GPS coordinates
@@ -275,8 +290,8 @@ function DetailedSummarySection({
             </div>
           </div>
         </CardHeader>
-        <CardContent>
-          <ScrollArea className="h-[300px] rounded-md border bg-muted/30 p-3">
+        <CardContent className="flex-1 p-0 overflow-hidden">
+          <ScrollArea className="h-[300px] p-4">
             <div className="space-y-2">
               {allDetections.map(({ detection, locationName, packageName }, idx) => (
                 <div
@@ -368,17 +383,19 @@ function SummarySection({ data, show, detectionType }: { data: DetectionData; sh
   ]
 
   return (
-    <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" />
+    <Card className="animate-in fade-in slide-in-from-bottom duration-500 bg-white dark:bg-gray-900 border border-gray-100 dark:border-gray-800 shadow-xl shadow-blue-500/5 rounded-xl overflow-hidden">
+      <CardHeader className="pb-3 bg-white dark:bg-gray-900 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-[#9bddeb] to-[#60a5fa] shadow-md flex items-center justify-center relative overflow-hidden group">
+            <div className="absolute inset-0 bg-white/10 animate-logo-spin-slow opacity-40"></div>
+            <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-white relative z-10 animate-logo-float">
+              <path d="M3 17L9 11L13 15L21 7" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
+              <path d="M15 7H21V13" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
+            </svg>
           </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 className="text-base font-bold text-gray-900 dark:text-white">
+              Quick Stats
             </CardTitle>
             <CardDescription className="text-xs">
               Overview of {isPothole ? "pothole" : "signboard"} detection results
@@ -396,8 +413,8 @@ function SummarySection({ data, show, detectionType }: { data: DetectionData; sh
                 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-2 rounded-lg mb-2 transition-all shadow-inner`}>
-                  <Icon className={`h-4 w-4 ${stat.color}`} />
+                <div className={`${stat.bgColor} p-2.5 rounded-lg mb-2 transition-all shadow-inner`}>
+                  <Icon className={`h-5 w-5 ${stat.color}`} />
                 </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>
@@ -826,17 +843,15 @@ export default function VideoPlayerSection({ data, videoId, videoFile, detection
 
   return (
     <div className="space-y-6">
-      <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">
+      <Card className="bg-white dark:bg-gray-950 border border-gray-100 dark:border-gray-800 shadow-xl shadow-blue-500/5 rounded-xl overflow-hidden">
+        <CardHeader className="bg-white dark:bg-gray-900 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 className="p-2 rounded-xl bg-gradient-to-br from-[#9bddeb] to-[#60a5fa] shadow-lg shadow-[#60a5fa]/20">
+              <Film className="h-5 w-5 text-white" />
             </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 className="text-lg font-bold text-gray-900 dark:text-white">
+                Video Playback with Detection
               </CardTitle>
               <CardDescription>
                 Watch the video with real-time {isPothole ? "pothole" : "signboard"} detection overlays
diff --git a/package-lock.json b/package-lock.json
index f27525d..ec10f27 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3283,9 +3283,9 @@
       }
     },
     "node_modules/lodash": {
-      "version": "4.17.21",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "version": "4.17.23",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.23.tgz",
+      "integrity": "sha512-LgVTMpQtIopCi79SJeDiP0TfWi5CNEc/L/aRdTh3yIvmZXTnheWpKjSZhnvMl8iXbC1tFg9gdHHDMLoV7CnG+w==",
       "license": "MIT"
     },
     "node_modules/loose-envify": {
diff --git a/styles/globals.css b/styles/globals.css
index dc2aea1..8875fe0 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -4,7 +4,7 @@
 @custom-variant dark (&:is(.dark *));
 
 :root {
-  --background: oklch(1 0 0);
+  --background: #f8fafc;
   --foreground: oklch(0.145 0 0);
   --card: oklch(1 0 0);
   --card-foreground: oklch(0.145 0 0);
@@ -29,14 +29,14 @@
   --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);
+  --sidebar: #ffffff;
+  --sidebar-foreground: #64748b;
+  --sidebar-primary: #2563eb;
+  --sidebar-primary-foreground: #ffffff;
+  --sidebar-accent: #f1f5f9;
+  --sidebar-accent-foreground: #0f172a;
+  --sidebar-border: #e2e8f0;
+  --sidebar-ring: #3b82f6;
 }
 
 .dark {
@@ -115,11 +115,64 @@
   --color-sidebar-ring: var(--sidebar-ring);
 }
 
+@layer utilities {
+  @keyframes logo-float {
+
+    0%,
+    100% {
+      transform: translateY(0) scale(1);
+    }
+
+    50% {
+      transform: translateY(-3px) scale(1.02);
+    }
+  }
+
+  @keyframes logo-spin-slow {
+    from {
+      transform: rotate(0deg);
+    }
+
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  @keyframes logo-spin-reverse-slow {
+    from {
+      transform: rotate(360deg);
+    }
+
+    to {
+      transform: rotate(0deg);
+    }
+  }
+
+  .animate-logo-float {
+    animation: logo-float 3s ease-in-out infinite;
+  }
+
+  .animate-logo-spin-slow {
+    animation: logo-spin-slow 12s linear infinite;
+  }
+
+  .animate-logo-spin-reverse-slow {
+    animation: logo-spin-reverse-slow 8s linear infinite;
+  }
+
+}
+
 @layer base {
   * {
     @apply border-border outline-ring/50;
   }
+
   body {
     @apply bg-background text-foreground;
   }
-}
+
+  button:not([role="tab"]),
+  [role="button"] {
+    border-radius: 9999px !important;
+  }
+}
\ No newline at end of file