From 53cc7f6a4fb744bb036e289e87a84d8cda3043ca Mon Sep 17 00:00:00 2001
From: sumona-banerjeee <sumobanerjee2000@gmail.com>
Date: Thu, 12 Feb 2026 10:43:21 +0530
Subject: [PATCH] Implemented all css in single

---
 app/create-location/page.tsx                  | 192 ++++++++----------
 app/create-package/page.tsx                   |  72 ++++---
 app/create-project/page.tsx                   |  85 ++++----
 app/globals.css                               |  11 +
 app/results/page.tsx                          |   8 +-
 app/upload/page.tsx                           |  11 +-
 .../dashboard/recent-analyses-table.tsx       |   7 +-
 components/map-modal.tsx                      |  59 +++---
 components/ui/select.tsx                      |   6 +-
 components/upload-section.tsx                 |   5 +
 components/video-player-section.tsx           | 190 ++++++++---------
 lib/api.ts                                    |   4 +-
 lib/types.ts                                  |  36 ++--
 13 files changed, 343 insertions(+), 343 deletions(-)

diff --git a/app/create-location/page.tsx b/app/create-location/page.tsx
index 9bc1640..07f4d21 100644
--- a/app/create-location/page.tsx
+++ b/app/create-location/page.tsx
@@ -290,7 +290,10 @@ export default function CreateLocationPage() {
 
             {/* Modal Dialog */}
             <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
-                <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
+                <DialogContent
+                    className="max-w-2xl"
+                    onOpenAutoFocus={(e) => e.preventDefault()}
+                >
                     <DialogHeader>
                         <DialogTitle className="flex items-center gap-2">
                             <MapPin className="h-5 w-5 text-blue-500" />
@@ -321,12 +324,12 @@ 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-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-blue-500 to-indigo-600 flex items-center justify-center">
-                                    <span className="text-white text-xs font-bold">1</span>
+                        <div className="p-3 rounded-xl bg-blue-50/80 dark:bg-blue-900/40 border border-blue-200 dark:border-blue-800 shadow-sm">
+                            <div className="flex items-center gap-2 mb-2">
+                                <div className="w-5 h-5 rounded-full bg-blue-600 flex items-center justify-center">
+                                    <span className="text-white text-[10px] font-bold">1</span>
                                 </div>
-                                <p className="text-sm font-bold text-blue-700 dark:text-blue-400">Select Project</p>
+                                <p className="text-xs 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-blue-200 dark:border-blue-800 focus:border-blue-400">
@@ -343,25 +346,19 @@ export default function CreateLocationPage() {
                                     {projects.map(project => (
                                         <SelectItem key={project.id} value={project.id}>
                                             <span className="font-medium">{project.name}</span>
-                                            {project.state && <span className="text-gray-400 ml-2">({project.state})</span>}
                                         </SelectItem>
                                     ))}
                                 </SelectContent>
                             </Select>
-                            {selectedProject && (
-                                <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-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-blue-500 to-indigo-600' : 'bg-gray-300 dark:bg-gray-600'}`}>
-                                    <span className="text-white text-xs font-bold">2</span>
+                        <div className={`p-3 rounded-xl bg-blue-50/80 dark:bg-blue-900/40 border border-blue-200 dark:border-blue-800 shadow-sm transition-opacity duration-300 ${selectedProjectId ? 'opacity-100' : 'opacity-40 pointer-events-none'}`}>
+                            <div className="flex items-center gap-2 mb-2">
+                                <div className={`w-5 h-5 rounded-full flex items-center justify-center ${selectedProjectId ? 'bg-blue-600' : 'bg-gray-300 dark:bg-gray-600'}`}>
+                                    <span className="text-white text-[10px] font-bold">2</span>
                                 </div>
-                                <p className="text-sm font-bold text-blue-700 dark:text-blue-400">Select Package</p>
+                                <p className="text-xs 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-blue-200 dark:border-blue-800 focus:border-blue-400">
@@ -378,116 +375,101 @@ export default function CreateLocationPage() {
                                     {packages.map(pkg => (
                                         <SelectItem key={pkg.id} value={pkg.id}>
                                             <span className="font-medium">{pkg.name}</span>
-                                            {pkg.region && <span className="text-gray-400 ml-2">({pkg.region})</span>}
                                         </SelectItem>
                                     ))}
                                 </SelectContent>
                             </Select>
-                            {selectedPackage && (
-                                <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>
-                            )}
                         </div>
 
                         {/* Step 3: Location Details */}
-                        <div className={`space-y-5 transition-opacity duration-300 ${selectedPackageId ? 'opacity-100' : 'opacity-40 pointer-events-none'}`}>
+                        <div className={`space-y-4 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-blue-500 to-indigo-600' : 'bg-gray-300 dark:bg-gray-600'}`}>
-                                    <span className="text-white text-xs font-bold">3</span>
+                                <div className={`w-5 h-5 rounded-full flex items-center justify-center ${selectedPackageId ? 'bg-blue-600' : 'bg-gray-300 dark:bg-gray-600'}`}>
+                                    <span className="text-white text-[10px] font-bold">3</span>
                                 </div>
-                                <p className="text-sm font-bold text-gray-700 dark:text-gray-300">Location Information</p>
+                                <p className="text-xs font-bold text-gray-700 dark:text-gray-300">Location Information</p>
                             </div>
 
-                            {/* Segment Name */}
-                            <div className="space-y-2">
-                                <Label htmlFor="segment" className="text-sm font-semibold flex items-center gap-1">
-                                    Segment Name <span className="text-red-500">*</span>
-                                </Label>
-                                <Input
-                                    id="segment"
-                                    value={segmentName}
-                                    onChange={(e) => setSegmentName(e.target.value)}
-                                    placeholder="e.g., KM 120 to KM 135"
-                                    className="h-11"
-                                    required
-                                />
-                            </div>
-
-                            {/* Chainage */}
-                            <div className="grid grid-cols-2 gap-4">
-                                <div className="space-y-2">
-                                    <Label htmlFor="ch-start" className="text-sm font-semibold flex items-center gap-1">
-                                        <Milestone className="h-3.5 w-3.5 text-gray-400" />
-                                        Chainage Start (km) <span className="text-gray-400 font-normal text-xs">(Opt)</span>
+                            {/* Segment Name & Chainage Row */}
+                            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                                <div className="space-y-1.5">
+                                    <Label htmlFor="segment" className="text-xs font-semibold flex items-center gap-1">
+                                        Segment Name <span className="text-red-500">*</span>
                                     </Label>
                                     <Input
-                                        id="ch-start"
-                                        type="number"
-                                        step="any"
-                                        min="0"
-                                        value={chainageStartKm}
-                                        onChange={(e) => setChainageStartKm(e.target.value)}
-                                        placeholder="0"
-                                        className="h-10 text-sm"
+                                        id="segment"
+                                        value={segmentName}
+                                        onChange={(e) => setSegmentName(e.target.value)}
+                                        placeholder="Location to Location"
+                                        className="h-9 text-sm"
+                                        required
                                     />
                                 </div>
-                                <div className="space-y-2">
-                                    <Label htmlFor="ch-end" className="text-sm font-semibold flex items-center gap-1">
-                                        <Milestone className="h-3.5 w-3.5 text-gray-400" />
-                                        Chainage End (km) <span className="text-gray-400 font-normal text-xs">(Opt)</span>
-                                    </Label>
-                                    <Input
-                                        id="ch-end"
-                                        type="number"
-                                        step="any"
-                                        min="0"
-                                        value={chainageEndKm}
-                                        onChange={(e) => setChainageEndKm(e.target.value)}
-                                        placeholder="0"
-                                        className="h-10 text-sm"
-                                    />
-                                </div>
-                            </div>
-
-                            {/* 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-blue-400 to-indigo-500 shadow-md shadow-blue-500/20">
-                                        <MapPin className="h-4 w-4 text-white" />
+                                <div className="grid grid-cols-2 gap-2">
+                                    <div className="space-y-1.5">
+                                        <Label htmlFor="ch-start" className="text-[10px] font-semibold flex items-center gap-1">
+                                            Start (km)
+                                        </Label>
+                                        <Input
+                                            id="ch-start"
+                                            type="number"
+                                            step="any"
+                                            min="0"
+                                            value={chainageStartKm}
+                                            onChange={(e) => setChainageStartKm(e.target.value)}
+                                            placeholder="0"
+                                            className="h-9 text-sm"
+                                        />
+                                    </div>
+                                    <div className="space-y-1.5">
+                                        <Label htmlFor="ch-end" className="text-[10px] font-semibold flex items-center gap-1">
+                                            End (km)
+                                        </Label>
+                                        <Input
+                                            id="ch-end"
+                                            type="number"
+                                            step="any"
+                                            min="0"
+                                            value={chainageEndKm}
+                                            onChange={(e) => setChainageEndKm(e.target.value)}
+                                            placeholder="0"
+                                            className="h-9 text-sm"
+                                        />
                                     </div>
-                                    <h3 className="text-sm font-bold text-gray-700 dark:text-gray-300">GPS Coordinates</h3>
-                                    <span className="text-xs text-red-500 font-medium">Required</span>
                                 </div>
+                            </div>
 
+                            {/* GPS Coordinates Grid */}
+                            <div className="grid grid-cols-2 gap-3">
                                 {/* Start Point */}
-                                <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>
+                                <div className="p-3 rounded-xl bg-blue-50/50 dark:bg-blue-900/20 border border-blue-100 dark:border-blue-900/50">
+                                    <p className="text-[10px] font-bold text-blue-600 dark:text-blue-400 mb-2 uppercase tracking-wide flex items-center gap-1">
+                                        <MapPin className="h-3 w-3" /> Start Point
+                                    </p>
+                                    <div className="grid grid-cols-1 gap-2">
+                                        <div className="flex items-center gap-2">
+                                            <Label htmlFor="s-lat" className="text-[10px] text-gray-500 w-8">Lat</Label>
                                             <Input
                                                 id="s-lat"
                                                 type="number"
                                                 step="any"
                                                 value={startLat}
                                                 onChange={(e) => setStartLat(e.target.value)}
-                                                placeholder="-90 to 90"
-                                                className="h-10 text-sm"
+                                                placeholder="Lat"
+                                                className="h-8 text-[11px]"
                                                 required
                                             />
                                         </div>
-                                        <div className="space-y-1.5">
-                                            <Label htmlFor="s-lng" className="text-xs text-gray-500">Longitude *</Label>
+                                        <div className="flex items-center gap-2">
+                                            <Label htmlFor="s-lng" className="text-[10px] text-gray-500 w-8">Lng</Label>
                                             <Input
                                                 id="s-lng"
                                                 type="number"
                                                 step="any"
                                                 value={startLng}
                                                 onChange={(e) => setStartLng(e.target.value)}
-                                                placeholder="-180 to 180"
-                                                className="h-10 text-sm"
+                                                placeholder="Lng"
+                                                className="h-8 text-[11px]"
                                                 required
                                             />
                                         </div>
@@ -495,32 +477,34 @@ export default function CreateLocationPage() {
                                 </div>
 
                                 {/* End Point */}
-                                <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>
+                                <div className="p-3 rounded-xl bg-blue-50/50 dark:bg-blue-900/20 border border-blue-100 dark:border-blue-900/50">
+                                    <p className="text-[10px] font-bold text-blue-600 dark:text-blue-400 mb-2 uppercase tracking-wide flex items-center gap-1">
+                                        <MapPin className="h-3 w-3" /> End Point
+                                    </p>
+                                    <div className="grid grid-cols-1 gap-2">
+                                        <div className="flex items-center gap-2">
+                                            <Label htmlFor="e-lat" className="text-[10px] text-gray-500 w-8">Lat</Label>
                                             <Input
                                                 id="e-lat"
                                                 type="number"
                                                 step="any"
                                                 value={endLat}
                                                 onChange={(e) => setEndLat(e.target.value)}
-                                                placeholder="-90 to 90"
-                                                className="h-10 text-sm"
+                                                placeholder="Lat"
+                                                className="h-8 text-[11px]"
                                                 required
                                             />
                                         </div>
-                                        <div className="space-y-1.5">
-                                            <Label htmlFor="e-lng" className="text-xs text-gray-500">Longitude *</Label>
+                                        <div className="flex items-center gap-2">
+                                            <Label htmlFor="e-lng" className="text-[10px] text-gray-500 w-8">Lng</Label>
                                             <Input
                                                 id="e-lng"
                                                 type="number"
                                                 step="any"
                                                 value={endLng}
                                                 onChange={(e) => setEndLng(e.target.value)}
-                                                placeholder="-180 to 180"
-                                                className="h-10 text-sm"
+                                                placeholder="Lng"
+                                                className="h-8 text-[11px]"
                                                 required
                                             />
                                         </div>
diff --git a/app/create-package/page.tsx b/app/create-package/page.tsx
index b41b19b..1109e74 100644
--- a/app/create-package/page.tsx
+++ b/app/create-package/page.tsx
@@ -211,7 +211,10 @@ export default function CreatePackagePage() {
 
             {/* Modal Dialog */}
             <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
-                <DialogContent className="max-w-2xl">
+                <DialogContent
+                    className="max-w-2xl"
+                    onOpenAutoFocus={(e) => e.preventDefault()}
+                >
                     <DialogHeader>
                         <DialogTitle className="flex items-center gap-2">
                             <Package className="h-5 w-5 text-blue-500" />
@@ -240,11 +243,11 @@ export default function CreatePackagePage() {
                         </div>
                     )}
 
-                    <form onSubmit={handleSubmit} className="space-y-6">
+                    <form onSubmit={handleSubmit} className="space-y-8">
                         {/* Step 1: Select Project */}
-                        <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="p-4 rounded-xl bg-blue-50/80 dark:bg-blue-900/40 border border-blue-200 dark:border-blue-800 shadow-sm">
                             <div className="flex items-center gap-2 mb-3">
-                                <div className="w-6 h-6 rounded-full bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center">
+                                <div className="w-6 h-6 rounded-full bg-blue-600 flex items-center justify-center">
                                     <span className="text-white text-xs font-bold">1</span>
                                 </div>
                                 <p className="text-sm font-bold text-blue-700 dark:text-blue-400">Select Project</p>
@@ -264,54 +267,49 @@ export default function CreatePackagePage() {
                                     {projects.map(project => (
                                         <SelectItem key={project.id} value={project.id}>
                                             <span className="font-medium">{project.name}</span>
-                                            {project.state && <span className="text-gray-400 ml-2">({project.state})</span>}
                                         </SelectItem>
                                     ))}
                                 </SelectContent>
                             </Select>
-                            {selectedProject && (
-                                <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>
-                            )}
                         </div>
 
                         {/* 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-blue-500 to-indigo-600' : 'bg-gray-300 dark:bg-gray-600'}`}>
+                                <div className={`w-6 h-6 rounded-full flex items-center justify-center ${selectedProjectId ? 'bg-blue-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>
                             </div>
 
-                            <div className="space-y-2">
-                                <Label htmlFor="pkg-name" className="text-sm font-semibold flex items-center gap-1">
-                                    Package Name <span className="text-red-500">*</span>
-                                </Label>
-                                <Input
-                                    id="pkg-name"
-                                    value={name}
-                                    onChange={(e) => setName(e.target.value)}
-                                    placeholder="e.g., Package A - Section 1"
-                                    className="h-11"
-                                    required
-                                />
-                            </div>
+                            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                                <div className="space-y-2">
+                                    <Label htmlFor="pkg-name" className="text-sm font-semibold flex items-center gap-1">
+                                        Package Name <span className="text-red-500">*</span>
+                                    </Label>
+                                    <Input
+                                        id="pkg-name"
+                                        value={name}
+                                        onChange={(e) => setName(e.target.value)}
+                                        placeholder="Package Name"
+                                        className="h-10 text-sm"
+                                        required
+                                    />
+                                </div>
 
-                            <div className="space-y-2">
-                                <Label htmlFor="region" className="text-sm font-semibold flex items-center gap-1">
-                                    <Globe className="h-3.5 w-3.5 text-gray-400" />
-                                    Region <span className="text-gray-400 font-normal text-xs">(Optional)</span>
-                                </Label>
-                                <Input
-                                    id="region"
-                                    value={region}
-                                    onChange={(e) => setRegion(e.target.value)}
-                                    placeholder="e.g., Delhi, Haryana, Punjab"
-                                    className="h-11"
-                                />
+                                <div className="space-y-2">
+                                    <Label htmlFor="region" className="text-sm font-semibold flex items-center gap-1">
+                                        <Globe className="h-3.5 w-3.5 text-gray-400" />
+                                        Region <span className="text-gray-400 font-normal text-xs">(Optional)</span>
+                                    </Label>
+                                    <Input
+                                        id="region"
+                                        value={region}
+                                        onChange={(e) => setRegion(e.target.value)}
+                                        placeholder="Region"
+                                        className="h-10 text-sm"
+                                    />
+                                </div>
                             </div>
                         </div>
 
diff --git a/app/create-project/page.tsx b/app/create-project/page.tsx
index b3dbcff..994deb9 100644
--- a/app/create-project/page.tsx
+++ b/app/create-project/page.tsx
@@ -183,8 +183,11 @@ export default function CreateProjectPage() {
             </main>
 
             {/* Modal Dialog */}
-            <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
-                <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
+            <Dialog open={isModalOpen} onOpenChange={(open) => { if (!open) { setIsModalOpen(false); resetForm(); } else { setIsModalOpen(true); } }}>
+                <DialogContent
+                    className="max-w-2xl"
+                    onOpenAutoFocus={(e) => e.preventDefault()}
+                >
                     <DialogHeader>
                         <DialogTitle className="flex items-center gap-2">
                             <FolderPlus className="h-5 w-5 text-blue-500" />
@@ -215,7 +218,7 @@ export default function CreateProjectPage() {
 
                     <form onSubmit={handleSubmit} className="space-y-6">
                         {/* Project Name */}
-                        <div className="space-y-2">
+                        <div className="space-y-1.5">
                             <Label htmlFor="name" className="text-sm font-semibold flex items-center gap-1">
                                 Project Name <span className="text-red-500">*</span>
                             </Label>
@@ -223,15 +226,15 @@ export default function CreateProjectPage() {
                                 id="name"
                                 value={name}
                                 onChange={(e) => setName(e.target.value)}
-                                placeholder="e.g., Delhi-Chandigarh Highway"
-                                className="h-11"
+                                placeholder="Project Name"
+                                className="h-10 text-sm"
                                 required
                             />
                         </div>
 
                         {/* State & Corridor Row */}
                         <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                            <div className="space-y-2">
+                            <div className="space-y-1.5">
                                 <Label htmlFor="state" className="text-sm font-semibold">
                                     State <span className="text-gray-400 font-normal text-xs">(Optional)</span>
                                 </Label>
@@ -239,11 +242,11 @@ export default function CreateProjectPage() {
                                     id="state"
                                     value={state}
                                     onChange={(e) => setState(e.target.value)}
-                                    placeholder="e.g., Haryana"
-                                    className="h-11"
+                                    placeholder="State"
+                                    className="h-10 text-sm"
                                 />
                             </div>
-                            <div className="space-y-2">
+                            <div className="space-y-1.5">
                                 <Label htmlFor="corridor" className="text-sm font-semibold flex items-center gap-1">
                                     <Route className="h-3.5 w-3.5 text-gray-400" />
                                     Corridor Name <span className="text-gray-400 font-normal text-xs">(Optional)</span>
@@ -252,79 +255,75 @@ export default function CreateProjectPage() {
                                     id="corridor"
                                     value={corridorName}
                                     onChange={(e) => setCorridorName(e.target.value)}
-                                    placeholder="e.g., National Highway 44"
-                                    className="h-11"
+                                    placeholder="Corridor Name"
+                                    className="h-10 text-sm"
                                 />
                             </div>
                         </div>
 
-                        {/* GPS Coordinates Section */}
-                        <div className="space-y-4">
-                            <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/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>
-                                <span className="text-xs text-gray-400">(Optional)</span>
-                            </div>
-
+                        {/* GPS Coordinates Grid */}
+                        <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                             {/* Start Point */}
-                            <div className="p-4 rounded-xl bg-gradient-to-r from-blue-50/50 to-indigo-50/50 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="start-lat" className="text-xs text-gray-500">Latitude</Label>
+                            <div className="p-3 rounded-xl bg-blue-50/80 dark:bg-blue-900/40 border border-blue-200 dark:border-blue-800 shadow-sm">
+                                <p className="text-[10px] font-bold text-blue-600 dark:text-blue-400 mb-2 uppercase tracking-wide flex items-center gap-1">
+                                    <MapPin className="h-3 w-3" /> Start Point
+                                </p>
+                                <div className="grid grid-cols-2 gap-2">
+                                    <div className="space-y-1">
+                                        <Label htmlFor="start-lat" className="text-[10px] text-gray-500">Lat</Label>
                                         <Input
                                             id="start-lat"
                                             type="number"
                                             step="any"
                                             value={startLat}
                                             onChange={(e) => setStartLat(e.target.value)}
-                                            placeholder="-90 to 90"
-                                            className="h-10 text-sm"
+                                            placeholder="Lat"
+                                            className="h-8 text-[11px]"
                                         />
                                     </div>
-                                    <div className="space-y-1.5">
-                                        <Label htmlFor="start-lng" className="text-xs text-gray-500">Longitude</Label>
+                                    <div className="space-y-1">
+                                        <Label htmlFor="start-lng" className="text-[10px] text-gray-500">Lng</Label>
                                         <Input
                                             id="start-lng"
                                             type="number"
                                             step="any"
                                             value={startLng}
                                             onChange={(e) => setStartLng(e.target.value)}
-                                            placeholder="-180 to 180"
-                                            className="h-10 text-sm"
+                                            placeholder="Lng"
+                                            className="h-8 text-[11px]"
                                         />
                                     </div>
                                 </div>
                             </div>
 
                             {/* End Point */}
-                            <div className="p-4 rounded-xl bg-gradient-to-r from-blue-50/50 to-indigo-50/50 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="end-lat" className="text-xs text-gray-500">Latitude</Label>
+                            <div className="p-3 rounded-xl bg-blue-50/80 dark:bg-blue-900/40 border border-blue-200 dark:border-blue-800 shadow-sm">
+                                <p className="text-[10px] font-bold text-blue-600 dark:text-blue-400 mb-2 uppercase tracking-wide flex items-center gap-1">
+                                    <MapPin className="h-3 w-3" /> End Point
+                                </p>
+                                <div className="grid grid-cols-2 gap-2">
+                                    <div className="space-y-1">
+                                        <Label htmlFor="end-lat" className="text-[10px] text-gray-500">Lat</Label>
                                         <Input
                                             id="end-lat"
                                             type="number"
                                             step="any"
                                             value={endLat}
                                             onChange={(e) => setEndLat(e.target.value)}
-                                            placeholder="-90 to 90"
-                                            className="h-10 text-sm"
+                                            placeholder="Lat"
+                                            className="h-8 text-[11px]"
                                         />
                                     </div>
-                                    <div className="space-y-1.5">
-                                        <Label htmlFor="end-lng" className="text-xs text-gray-500">Longitude</Label>
+                                    <div className="space-y-1">
+                                        <Label htmlFor="end-lng" className="text-[10px] text-gray-500">Lng</Label>
                                         <Input
                                             id="end-lng"
                                             type="number"
                                             step="any"
                                             value={endLng}
                                             onChange={(e) => setEndLng(e.target.value)}
-                                            placeholder="-180 to 180"
-                                            className="h-10 text-sm"
+                                            placeholder="Lng"
+                                            className="h-8 text-[11px]"
                                         />
                                     </div>
                                 </div>
diff --git a/app/globals.css b/app/globals.css
index 1113553..e7a18c7 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -362,4 +362,15 @@
     animation: logo-spin-reverse-slow 8s linear infinite;
   }
 
+}
+
+/* Prevent layout shift when Dialog locks body scroll */
+html {
+  overflow-y: scroll;
+  /* always show scrollbar to prevent width jump */
+}
+
+body[data-scroll-locked] {
+  overflow: hidden;
+  padding-right: var(--removed-body-scroll-bar-size, 0px) !important;
 }
\ No newline at end of file
diff --git a/app/results/page.tsx b/app/results/page.tsx
index 56596ee..2dcaf25 100644
--- a/app/results/page.tsx
+++ b/app/results/page.tsx
@@ -55,7 +55,7 @@ export default function ResultsPage() {
                 }
 
                 const data = await response.json()
-                setDetectionData(data)
+                setDetectionData(data as any)
 
                 // Retrieve video file from IndexedDB
                 const storedVideoFile = await getVideoFile(videoData.videoId)
@@ -90,9 +90,9 @@ export default function ResultsPage() {
     }
 
     const getTitle = () => {
-        return detectionType === "pothole-detection"
-            ? "Pothole Detection Results"
-            : "Signboard Detection Results"
+        if (detectionType === "pothole-detection") return "Pothole Detection Results"
+        if (detectionType === "sign-board-detection") return "Signboard Detection Results"
+        return "Pothole & Signboard Detection Results"
     }
 
     if (isLoading) {
diff --git a/app/upload/page.tsx b/app/upload/page.tsx
index 2d9ee4b..13ec5be 100644
--- a/app/upload/page.tsx
+++ b/app/upload/page.tsx
@@ -21,7 +21,7 @@ import { storeVideoFile } from "@/lib/video-storage"
 const API_URL = process.env.NEXT_PUBLIC_API_URL || "http://127.0.0.1:8000/api/v1"
 const WS_URL = process.env.NEXT_PUBLIC_WS_URL || "ws://127.0.0.1:8000/api/v1"
 
-type DetectionType = "pothole-detection" | "sign-board-detection"
+type DetectionType = "pothole-detection" | "sign-board-detection" | "pot-sign-detection"
 
 export default function UploadPage() {
     const router = useRouter()
@@ -151,9 +151,9 @@ export default function UploadPage() {
     }
 
     const getTitle = () => {
-        return detectionType === "pothole-detection"
-            ? "Pothole Detection"
-            : "Signboard Detection"
+        if (detectionType === "pothole-detection") return "Pothole Detection"
+        if (detectionType === "sign-board-detection") return "Signboard Detection"
+        return "Pothole & Signboard Detection"
     }
 
     if (isLoading) {
@@ -295,6 +295,9 @@ export default function UploadPage() {
                                             <SelectItem value="sign-board-detection">
                                                 <span className="font-medium">Signboard Detection</span>
                                             </SelectItem>
+                                            <SelectItem value="pot-sign-detection">
+                                                <span className="font-medium">Pothole & Signboard Detection</span>
+                                            </SelectItem>
                                         </SelectContent>
                                     </Select>
                                 </div>
diff --git a/components/dashboard/recent-analyses-table.tsx b/components/dashboard/recent-analyses-table.tsx
index 00a5c8b..ba23925 100644
--- a/components/dashboard/recent-analyses-table.tsx
+++ b/components/dashboard/recent-analyses-table.tsx
@@ -43,6 +43,9 @@ export function RecentAnalysesTable({ videos, isLoading, onViewResults }: Recent
         if (type === "pothole-detection") {
             return <Badge className="bg-orange-500/20 text-orange-600 border-orange-500/30">Pothole</Badge>
         }
+        if (type === "pot-sign-detection") {
+            return <Badge className="bg-purple-500/20 text-purple-600 border-purple-500/30">Pothole & Sign</Badge>
+        }
         return <Badge className="bg-blue-500/20 text-blue-600 border-blue-500/30">Signboard</Badge>
     }
 
@@ -88,7 +91,9 @@ export function RecentAnalysesTable({ videos, isLoading, onViewResults }: Recent
                                         <p className="text-sm font-bold text-foreground">
                                             {video.detection_type === "pothole-detection"
                                                 ? video.unique_potholes ?? 0
-                                                : video.unique_signboards ?? 0}
+                                                : video.detection_type === "pot-sign-detection"
+                                                    ? (video.unique_potholes ?? 0) + (video.unique_signboards ?? 0)
+                                                    : video.unique_signboards ?? 0}
                                         </p>
                                         <p className="text-[10px] text-muted-foreground uppercase">Detections</p>
                                     </div>
diff --git a/components/map-modal.tsx b/components/map-modal.tsx
index 2984eac..b47b3a3 100644
--- a/components/map-modal.tsx
+++ b/components/map-modal.tsx
@@ -20,7 +20,7 @@ type MapModalProps = {
     open: boolean
     onClose: () => void
     detections: Detection[]
-    detectionType: "pothole-detection" | "sign-board-detection"
+    detectionType: "pothole-detection" | "sign-board-detection" | "pot-sign-detection"
 }
 
 // Component to auto-fit map bounds to show all markers
@@ -81,6 +81,7 @@ export default function MapModal({ open, onClose, detections, detectionType }: M
         (bounds.getEast() + bounds.getWest()) / 2
     ]
 
+    const isCombined = detectionType === "pot-sign-detection"
     const isPothole = detectionType === "pothole-detection"
 
     return (
@@ -88,7 +89,7 @@ export default function MapModal({ open, onClose, detections, detectionType }: M
             <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
+                        {isCombined ? "Pothole & Signboard" : isPothole ? "Pothole" : "Signboard"} Detection Map
                     </DialogTitle>
                     <p className="text-sm text-muted-foreground">
                         {validDetections.length} detection{validDetections.length !== 1 ? "s" : ""} with GPS coordinates
@@ -116,31 +117,37 @@ export default function MapModal({ open, onClose, detections, detectionType }: M
                         />
 
                         {/* Detection markers */}
-                        {validDetections.map((detection, idx) => (
-                            <CircleMarker
-                                key={`${detection.id}-${idx}`}
-                                center={[detection.latitude, detection.longitude]}
-                                radius={8}
-                                fillColor="#10b981"
-                                color="#065f46"
-                                weight={2}
-                                opacity={1}
-                                fillOpacity={0.8}
-                            >
-                                <Popup>
-                                    <div className="text-xs space-y-1">
-                                        <div className="font-semibold">
-                                            {isPothole ? "Pothole" : detection.class.replace(/_/g, " ")} #{detection.id}
+                        {validDetections.map((detection, idx) => {
+                            const isDetPothole = detection.type === "pothole"
+                            const markerColor = isDetPothole ? "#ef4444" : "#3b82f6"
+                            const strokeColor = isDetPothole ? "#991b1b" : "#1e40af"
+
+                            return (
+                                <CircleMarker
+                                    key={`${detection.id}-${idx}`}
+                                    center={[detection.latitude, detection.longitude]}
+                                    radius={8}
+                                    fillColor={markerColor}
+                                    color={strokeColor}
+                                    weight={2}
+                                    opacity={1}
+                                    fillOpacity={0.8}
+                                >
+                                    <Popup>
+                                        <div className="text-xs space-y-1">
+                                            <div className="font-semibold">
+                                                {isDetPothole ? "Pothole" : (detection.class || detection.type || "").replace(/_/g, " ")} #{detection.id}
+                                            </div>
+                                            <div>Frame: {detection.frame_number}</div>
+                                            <div>Confidence: {(detection.confidence * 100).toFixed(1)}%</div>
+                                            <div className="font-mono text-[10px]">
+                                                {detection.latitude.toFixed(6)}, {detection.longitude.toFixed(6)}
+                                            </div>
                                         </div>
-                                        <div>Frame: {detection.frame_number}</div>
-                                        <div>Confidence: {(detection.confidence * 100).toFixed(1)}%</div>
-                                        <div className="font-mono text-[10px]">
-                                            {detection.latitude.toFixed(6)}, {detection.longitude.toFixed(6)}
-                                        </div>
-                                    </div>
-                                </Popup>
-                            </CircleMarker>
-                        ))}
+                                    </Popup>
+                                </CircleMarker>
+                            )
+                        })}
 
                         {/* Auto-fit bounds */}
                         <FitBounds bounds={bounds} />
diff --git a/components/ui/select.tsx b/components/ui/select.tsx
index 5db0bca..773b75a 100644
--- a/components/ui/select.tsx
+++ b/components/ui/select.tsx
@@ -37,7 +37,7 @@ function SelectTrigger({
       data-slot="select-trigger"
       data-size={size}
       className={cn(
-        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-full items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm overflow-hidden shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:min-w-0 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className,
       )}
       {...props}
@@ -63,7 +63,7 @@ function SelectContent({
         className={cn(
           'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md',
           position === 'popper' &&
-            'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+          'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
           className,
         )}
         position={position}
@@ -74,7 +74,7 @@ function SelectContent({
           className={cn(
             'p-1',
             position === 'popper' &&
-              'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1',
+            'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1',
           )}
         >
           {children}
diff --git a/components/upload-section.tsx b/components/upload-section.tsx
index d6406c4..2208c03 100644
--- a/components/upload-section.tsx
+++ b/components/upload-section.tsx
@@ -277,6 +277,11 @@ export function UploadSection({ onDetectionComplete, onDetectionTypeChange }: Up
                     <span>Signboard Detection</span>
                   </div>
                 </SelectItem>
+                <SelectItem value="pot-sign-detection">
+                  <div className="flex items-center gap-2">
+                    <span>Pothole & Signboard Detection</span>
+                  </div>
+                </SelectItem>
               </SelectContent>
             </Select>
           </div>
diff --git a/components/video-player-section.tsx b/components/video-player-section.tsx
index 8df6a41..24c0b06 100644
--- a/components/video-player-section.tsx
+++ b/components/video-player-section.tsx
@@ -11,69 +11,11 @@ import { Target, AlertTriangle, Film, Activity, Gauge, Monitor, SignpostBig, Map
 // Dynamically import MapModal with SSR disabled (Leaflet requires window object)
 const MapModal = dynamic(() => import("@/components/map-modal"), { ssr: false })
 
+import { DetectionData, DetectionType } from "@/lib/types"
+
 const API_URL = process.env.NEXT_PUBLIC_API_URL || "http://127.0.0.1:8000/api/v1"
 
-type DetectionType = "pothole-detection" | "sign-board-detection"
 
-type DetectionData = {
-  video_id: string
-  detection_type?: string
-  output_video_path?: string
-  video_info: {
-    fps: number
-    width: number
-    height: number
-    total_frames: number
-  }
-  summary: {
-    unique_potholes?: number
-    unique_signboards?: number
-    total_detections: number
-    total_frames: number
-    detection_rate: number
-  }
-  pothole_list?: Array<{
-    pothole_id: number
-    first_detected_frame: number
-    first_detected_time: number
-    confidence: number
-    lat?: number
-    lng?: number
-  }>
-  signboard_list?: Array<{
-    signboard_id: number
-    type: string
-    first_detected_frame: number
-    first_detected_time: number
-    confidence: number
-    lat?: number
-    lng?: number
-  }>
-  frames: Array<{
-    frame_id: number
-    potholes?: Array<{
-      pothole_id: number
-      bbox: {
-        x1: number
-        y1: number
-        x2: number
-        y2: number
-      }
-      confidence: number
-    }>
-    signboards?: Array<{
-      signboard_id: number
-      type: string
-      bbox: {
-        x1: number
-        y1: number
-        x2: number
-        y2: number
-      }
-      confidence: number
-    }>
-  }>
-}
 
 type VideoPlayerSectionProps = {
   data: DetectionData
@@ -177,7 +119,8 @@ function DetailedSummarySection({
 
   if (!show || loading || !summaryData) return null
 
-  const isPothole = detectionType === "pothole-detection"
+  const isCombined = detectionType === "pot-sign-detection"
+  const isPothole = detectionType === "pothole-detection" || isCombined
 
   // Flatten all detections for the scrollable list
   const allDetections: Array<{
@@ -213,7 +156,7 @@ function DetailedSummarySection({
                   Detection Locations
                 </CardTitle>
                 <CardDescription className="text-xs">
-                  {isPothole ? "Potholes" : "Signboards"} detected across project locations
+                  {isCombined ? "Potholes & Signboards" : isPothole ? "Potholes" : "Signboards"} detected across project locations
                 </CardDescription>
               </div>
             </div>
@@ -258,7 +201,7 @@ function DetailedSummarySection({
                       <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
+                          {locationData.detection_count} detection{locationData.detection_count !== 1 ? "s" : ""} found
                         </div>
                       </div>
                     ))}
@@ -285,7 +228,7 @@ function DetailedSummarySection({
                 All Detections
               </CardTitle>
               <CardDescription className="text-xs">
-                Complete list of {isPothole ? "potholes" : "signboards"} with GPS coordinates
+                Complete list of {isCombined ? "potholes & signboards" : isPothole ? "potholes" : "signboards"} with GPS coordinates
               </CardDescription>
             </div>
           </div>
@@ -301,7 +244,7 @@ function DetailedSummarySection({
                 >
                   <div className="flex items-center justify-between mb-1">
                     <span className="font-semibold">
-                      {isPothole ? "Pothole" : detection.class.replace(/_/g, " ")} #{detection.id}
+                      {detection.type === "pothole" ? "Pothole" : (detection.class || detection.type || "").replace(/_/g, " ")} #{detection.id}
                     </span>
                     <span className="text-[10px] text-muted-foreground">
                       Frame {detection.frame_number}
@@ -335,17 +278,25 @@ function DetailedSummarySection({
 function SummarySection({ data, show, detectionType }: { data: DetectionData; show: boolean; detectionType: DetectionType }) {
   if (!show) return null
 
-  const isPothole = detectionType === "pothole-detection"
-  const isSignboard = detectionType === "sign-board-detection"
+  const isCombined = detectionType === "pot-sign-detection"
+  const isPothole = detectionType === "pothole-detection" || isCombined
+  const isSignboard = detectionType === "sign-board-detection" || isCombined
 
   const stats = [
-    {
-      label: isPothole ? "Unique Potholes" : "Unique Signboards",
-      value: (isPothole ? data.summary.unique_potholes : data.summary.unique_signboards) || 0,
-      icon: isPothole ? AlertTriangle : SignpostBig,
-      color: isPothole ? "text-red-500" : "text-blue-500",
-      bgColor: isPothole ? "bg-red-50 dark:bg-red-950/30" : "bg-blue-50 dark:bg-blue-950/30",
-    },
+    ...(isPothole ? [{
+      label: "Unique Potholes",
+      value: data.summary.unique_potholes || 0,
+      icon: AlertTriangle,
+      color: "text-red-500",
+      bgColor: "bg-red-50 dark:bg-red-950/30",
+    }] : []),
+    ...(isSignboard ? [{
+      label: "Unique Signboards",
+      value: data.summary.unique_signboards || 0,
+      icon: SignpostBig,
+      color: "text-blue-500",
+      bgColor: "bg-blue-50 dark:bg-blue-950/30",
+    }] : []),
     {
       label: "Total Detections",
       value: data.summary.total_detections || 0,
@@ -399,13 +350,13 @@ function SummarySection({ data, show, detectionType }: { data: DetectionData; sh
               Quick Stats
             </CardTitle>
             <CardDescription className="text-xs">
-              Overview of {isPothole ? "pothole" : "signboard"} detection results
+              Overview of {isCombined ? "pothole & signboard" : isPothole ? "pothole" : "signboard"} detection results
             </CardDescription>
           </div>
         </div>
       </CardHeader>
       <CardContent>
-        <div className="grid grid-cols-3 md:grid-cols-6 gap-3">
+        <div className={`grid gap-3 ${isCombined ? 'grid-cols-3 md:grid-cols-7' : 'grid-cols-3 md:grid-cols-6'}`}>
           {stats.map((stat, index) => {
             const Icon = stat.icon
             return (
@@ -445,8 +396,9 @@ export default function VideoPlayerSection({ data, videoId, videoFile, detection
   const loggedFrames = useRef<Set<number>>(new Set())
   const MAX_LOGS = 50
 
-  const isPothole = detectionType === "pothole-detection"
-  const isSignboard = detectionType === "sign-board-detection"
+  const isCombined = detectionType === "pot-sign-detection"
+  const isPothole = detectionType === "pothole-detection" || isCombined
+  const isSignboard = detectionType === "sign-board-detection" || isCombined
 
   // Create GPS coordinate map from signboard_list or pothole_list
   const gpsMap = useRef<Map<number, { lat: number; lng: number }>>(new Map())
@@ -457,14 +409,17 @@ export default function VideoPlayerSection({ data, videoId, videoFile, detection
 
     if (isPothole && data.pothole_list) {
       data.pothole_list.forEach(item => {
-        if (item.lat !== undefined && item.lng !== undefined) {
-          map.set(item.pothole_id, { lat: item.lat, lng: item.lng })
+        const id = (item as any).pothole_id ?? (item as any).detection_id
+        if (item.lat !== undefined && item.lng !== undefined && id !== undefined) {
+          map.set(id, { lat: item.lat, lng: item.lng })
         }
       })
-    } else if (isSignboard && data.signboard_list) {
+    }
+    if (isSignboard && data.signboard_list) {
       data.signboard_list.forEach(item => {
-        if (item.lat !== undefined && item.lng !== undefined) {
-          map.set(item.signboard_id, { lat: item.lat, lng: item.lng })
+        const id = (item as any).signboard_id ?? (item as any).detection_id
+        if (item.lat !== undefined && item.lng !== undefined && id !== undefined) {
+          map.set(id, { lat: item.lat, lng: item.lng })
         }
       })
     }
@@ -509,18 +464,37 @@ export default function VideoPlayerSection({ data, videoId, videoFile, detection
       data.frames.forEach((frameData) => {
         const frameId = frameData.frame_id
 
-        // Handle both pothole and signboard detections
-        const detections = isPothole ? (frameData.potholes || []) : (frameData.signboards || [])
-
-        if (detections.length > 0) {
-          map.set(frameId, detections)
+        // Handle flat detections array format (used by pot-sign-detection API)
+        const flatDetections = (frameData as any).detections
+        if (flatDetections && Array.isArray(flatDetections)) {
+          const tagged = flatDetections.map((d: any) => ({
+            ...d,
+            _detType: d.type === 'pothole' ? 'pothole' : 'signboard',
+            pothole_id: d.type === 'pothole' ? d.detection_id : undefined,
+            signboard_id: d.type !== 'pothole' ? d.detection_id : undefined,
+          }))
+          if (tagged.length > 0) {
+            map.set(frameId, tagged)
+          }
+        } else {
+          // Handle separate potholes/signboards arrays format
+          let detections: any[] = []
+          if (isPothole && frameData.potholes) {
+            detections = [...detections, ...frameData.potholes.map((p: any) => ({ ...p, _detType: 'pothole' }))]
+          }
+          if (isSignboard && frameData.signboards) {
+            detections = [...detections, ...frameData.signboards.map((s: any) => ({ ...s, _detType: 'signboard' }))]
+          }
+          if (detections.length > 0) {
+            map.set(frameId, detections)
+          }
         }
       })
       console.log(`[VideoPlayer] Frame map built: ${map.size} frames with detections`)
     }
 
     frameDetectionMap.current = map
-  }, [data, isPothole])
+  }, [data, isPothole, isSignboard])
 
   // Function to draw bounding boxes on canvas
   const drawBoundingBoxes = useCallback((detections: any[]) => {
@@ -553,9 +527,12 @@ export default function VideoPlayerSection({ data, videoId, videoFile, detection
       const width = x2 - x1
       const height = y2 - y1
 
-      // Set colors based on detection type
-      const boxColor = isPothole ? '#ef4444' : '#3b82f6' // red for potholes, blue for signboards
-      const textBgColor = isPothole ? 'rgba(239, 68, 68, 0.9)' : 'rgba(59, 130, 246, 0.9)'
+      // Determine if this specific detection is a pothole or signboard
+      const isDetPothole = detection._detType === 'pothole' || detection.type === 'pothole' || (detection.pothole_id !== undefined && !detection.signboard_id)
+
+      // Set colors based on individual detection type
+      const boxColor = isDetPothole ? '#ef4444' : '#3b82f6' // red for potholes, blue for signboards
+      const textBgColor = isDetPothole ? 'rgba(239, 68, 68, 0.9)' : 'rgba(59, 130, 246, 0.9)'
 
       // Draw bounding box
       ctx.strokeStyle = boxColor
@@ -563,15 +540,15 @@ export default function VideoPlayerSection({ data, videoId, videoFile, detection
       ctx.strokeRect(x1, y1, width, height)
 
       // Draw semi-transparent fill
-      ctx.fillStyle = isPothole ? 'rgba(239, 68, 68, 0.15)' : 'rgba(59, 130, 246, 0.15)'
+      ctx.fillStyle = isDetPothole ? 'rgba(239, 68, 68, 0.15)' : 'rgba(59, 130, 246, 0.15)'
       ctx.fillRect(x1, y1, width, height)
 
       // Prepare label text
-      const id = isPothole ? detection.pothole_id : detection.signboard_id
+      const id = detection.pothole_id ?? detection.signboard_id ?? detection.detection_id
       const confidence = (detection.confidence * 100).toFixed(1)
-      let labelText = isPothole
+      let labelText = isDetPothole
         ? `Pothole #${id}`
-        : `${detection.type || 'Sign'} #${id}`
+        : `${(detection.type || 'Sign').replace(/_/g, ' ')} #${id}`
       labelText += ` ${confidence}%`
 
       // Draw label background
@@ -587,7 +564,7 @@ export default function VideoPlayerSection({ data, videoId, videoFile, detection
       ctx.fillStyle = '#ffffff'
       ctx.fillText(labelText, x1 + 8, y1 - 8)
     })
-  }, [data.video_info.width, data.video_info.height, isPothole])
+  }, [data.video_info.width, data.video_info.height])
 
   // Resize canvas to match video display size
   const resizeCanvas = useCallback(() => {
@@ -683,7 +660,9 @@ export default function VideoPlayerSection({ data, videoId, videoFile, detection
 
     // Update last detected GPS coordinates if available
     if (detections.length > 0) {
-      const detectionId = isPothole ? detections[0].pothole_id : detections[0].signboard_id
+      const det0 = detections[0]
+      const isDetPothole = det0._detType === 'pothole' || det0.type === 'pothole' || (det0.pothole_id !== undefined && !det0.signboard_id)
+      const detectionId = det0.pothole_id ?? det0.signboard_id ?? det0.detection_id
       const gpsCoords = gpsMap.current.get(detectionId)
 
       if (gpsCoords) {
@@ -696,12 +675,13 @@ export default function VideoPlayerSection({ data, videoId, videoFile, detection
       const newLog: DetectionLog = {
         frame,
         detections: detections.map((det) => {
-          const detectionId = isPothole ? det.pothole_id : det.signboard_id
+          const isDetPothole = det._detType === 'pothole' || det.type === 'pothole' || (det.pothole_id !== undefined && !det.signboard_id)
+          const detectionId = det.pothole_id ?? det.signboard_id ?? det.detection_id
           const gpsCoords = gpsMap.current.get(detectionId)
 
           return {
             id: detectionId,
-            type: isSignboard ? det.type : undefined,
+            type: isDetPothole ? 'pothole' : (det.type || 'signboard'),
             bbox: det.bbox,
             confidence: det.confidence,
             latitude: gpsCoords?.lat,
@@ -806,7 +786,9 @@ export default function VideoPlayerSection({ data, videoId, videoFile, detection
 
       // Update GPS coordinates immediately on seek
       if (detections && detections.length > 0) {
-        const detectionId = isPothole ? detections[0].pothole_id : detections[0].signboard_id
+        const det0 = detections[0]
+        const isDetPothole = det0._detType === 'pothole' || det0.type === 'pothole' || (det0.pothole_id !== undefined && !det0.signboard_id)
+        const detectionId = det0.pothole_id ?? det0.signboard_id ?? det0.detection_id
         const gpsCoords = gpsMap.current.get(detectionId)
 
         if (gpsCoords) {
@@ -855,7 +837,7 @@ export default function VideoPlayerSection({ data, videoId, videoFile, detection
                 Video Playback with Detection
               </CardTitle>
               <CardDescription>
-                Watch the video with real-time {isPothole ? "pothole" : "signboard"} detection overlays
+                Watch the video with real-time {isCombined ? "pothole & signboard" : isPothole ? "pothole" : "signboard"} detection overlays
               </CardDescription>
             </div>
           </div>
@@ -927,7 +909,7 @@ export default function VideoPlayerSection({ data, videoId, videoFile, detection
               <div>
                 <h4 className="text-sm font-semibold mb-2">Detection Logs</h4>
                 <p className="text-xs text-muted-foreground mb-3">
-                  Real-time frame-by-frame {isPothole ? "pothole" : "signboard"} tracking (last {MAX_LOGS})
+                  Real-time frame-by-frame {isCombined ? "pothole & signboard" : isPothole ? "pothole" : "signboard"} tracking (last {MAX_LOGS})
                 </p>
               </div>
               <ScrollArea className="h-[400px] rounded-md border bg-muted/30 p-4">
@@ -956,7 +938,7 @@ export default function VideoPlayerSection({ data, videoId, videoFile, detection
                             {log.detections.map((det, idx) => (
                               <div key={idx} className="space-y-1">
                                 <div className="font-medium text-foreground">
-                                  {isPothole ? (
+                                  {det.type === 'pothole' ? (
                                     <>Pothole ID: {det.id}</>
                                   ) : (
                                     <>{det.type || 'Signboard'} ID: {det.id}</>
diff --git a/lib/api.ts b/lib/api.ts
index 21eeb40..403616a 100644
--- a/lib/api.ts
+++ b/lib/api.ts
@@ -167,7 +167,7 @@ export async function fetchAllLocations(): Promise<Location[]> {
 export interface Video {
     id: string
     filename: string
-    detection_type: "pothole-detection" | "sign-board-detection"
+    detection_type: "pothole-detection" | "sign-board-detection" | "pot-sign-detection"
     status: "pending" | "processing" | "completed" | "failed"
     unique_potholes?: number
     unique_signboards?: number
@@ -186,7 +186,7 @@ export async function fetchVideos(): Promise<Video[]> {
     return response.videos.map(v => ({
         id: v.video_id,
         filename: v.video_id, // Using video_id as filename since backend doesn't provide it
-        detection_type: v.summary?.unique_potholes !== undefined ? "pothole-detection" : "sign-board-detection" as const,
+        detection_type: (v.summary?.unique_potholes !== undefined && v.summary?.unique_signboards !== undefined) ? "pot-sign-detection" as const : v.summary?.unique_potholes !== undefined ? "pothole-detection" as const : "sign-board-detection" as const,
         status: v.status as Video["status"],
         unique_potholes: v.summary?.unique_potholes,
         unique_signboards: v.summary?.unique_signboards,
diff --git a/lib/types.ts b/lib/types.ts
index 7fcf6f4..d1ea4a1 100644
--- a/lib/types.ts
+++ b/lib/types.ts
@@ -1,4 +1,4 @@
-export type DetectionType = "pothole-detection" | "sign-board-detection"
+export type DetectionType = "pothole-detection" | "sign-board-detection" | "pot-sign-detection"
 
 export type DetectionData = {
     video_id: string
@@ -18,44 +18,50 @@ export type DetectionData = {
         detection_rate: number
     }
     pothole_list?: Array<{
-        pothole_id: number
+        pothole_id?: number
+        detection_id?: number
+        type?: string
         first_detected_frame: number
         first_detected_time: number
         confidence: number
+        bbox?: { x1: number; y1: number; x2: number; y2: number }
         lat?: number
         lng?: number
     }>
     signboard_list?: Array<{
-        signboard_id: number
+        signboard_id?: number
+        detection_id?: number
         type: string
         first_detected_frame: number
         first_detected_time: number
         confidence: number
+        bbox?: { x1: number; y1: number; x2: number; y2: number }
         lat?: number
         lng?: number
     }>
     frames: Array<{
         frame_id: number
+        // Legacy format: separate arrays
         potholes?: Array<{
             pothole_id: number
-            bbox: {
-                x1: number
-                y1: number
-                x2: number
-                y2: number
-            }
+            bbox: { x1: number; y1: number; x2: number; y2: number }
             confidence: number
         }>
         signboards?: Array<{
             signboard_id: number
             type: string
-            bbox: {
-                x1: number
-                y1: number
-                x2: number
-                y2: number
-            }
+            bbox: { x1: number; y1: number; x2: number; y2: number }
             confidence: number
         }>
+        // Flat format (pot-sign-detection): unified detections array
+        detections?: Array<{
+            frame_id: number
+            detection_id: number
+            type: string
+            confidence: number
+            bbox: { x1: number; y1: number; x2: number; y2: number }
+            center?: { x: number; y: number }
+            area?: number
+        }>
     }>
 }