diff --git a/app/create-location/page.tsx b/app/create-location/page.tsx
index 05f6e5f..cd61819 100644
--- a/app/create-location/page.tsx
+++ b/app/create-location/page.tsx
@@ -312,7 +312,7 @@ export default function CreateLocationPage() {
                     {/* Error Message */}
                     {error && !isModalOpen && (
                         <div className="mb-6 flex items-center gap-3 p-4 rounded-xl bg-red-50 dark:bg-red-950/30 border border-red-200 dark:border-red-800">
-                            <div className="w-5 h-5 rounded-full bg-red-100 dark:bg-red-900 flex items-center justify-center flex-shrink-0">
+                            <div className="w-5 h-5 rounded-full bg-red-100 dark:bg-red-900 flex items-center justify-center shrink-0">
                                 <span className="text-xs font-bold text-red-500">!</span>
                             </div>
                             <p className="text-sm text-red-600 dark:text-red-400 break-all">{error}</p>
@@ -366,7 +366,7 @@ export default function CreateLocationPage() {
                     {/* Error Message in Modal */}
                     {error && (
                         <div className="flex items-center gap-3 p-4 rounded-xl bg-red-50 dark:bg-red-950/30 border border-red-200 dark:border-red-800">
-                            <div className="w-5 h-5 rounded-full bg-red-100 dark:bg-red-900 flex items-center justify-center flex-shrink-0">
+                            <div className="w-5 h-5 rounded-full bg-red-100 dark:bg-red-900 flex items-center justify-center shrink-0">
                                 <span className="text-xs font-bold text-red-500">!</span>
                             </div>
                             <p className="text-sm text-red-600 dark:text-red-400 break-all">{error}</p>
diff --git a/app/create-project/page.tsx b/app/create-project/page.tsx
index 07a6893..ae4033c 100644
--- a/app/create-project/page.tsx
+++ b/app/create-project/page.tsx
@@ -197,7 +197,7 @@ export default function CreateProjectPage() {
                     {/* Error Message */}
                     {error && !isModalOpen && (
                         <div className="mb-6 flex items-center gap-3 p-4 rounded-xl bg-red-50 dark:bg-red-950/30 border border-red-200 dark:border-red-800">
-                            <div className="w-5 h-5 rounded-full bg-red-100 dark:bg-red-900 flex items-center justify-center flex-shrink-0">
+                            <div className="w-5 h-5 rounded-full bg-red-100 dark:bg-red-900 flex items-center justify-center shrink-0">
                                 <span className="text-xs font-bold text-red-500">!</span>
                             </div>
                             <p className="text-sm text-red-600 dark:text-red-400 break-all">{error}</p>
@@ -251,7 +251,7 @@ export default function CreateProjectPage() {
                     {/* Error Message in Modal */}
                     {error && (
                         <div className="flex items-center gap-3 p-4 rounded-xl bg-red-50 dark:bg-red-950/30 border border-red-200 dark:border-red-800">
-                            <div className="w-5 h-5 rounded-full bg-red-100 dark:bg-red-900 flex items-center justify-center flex-shrink-0">
+                            <div className="w-5 h-5 rounded-full bg-red-100 dark:bg-red-900 flex items-center justify-center shrink-0">
                                 <span className="text-xs font-bold text-red-500">!</span>
                             </div>
                             <p className="text-sm text-red-600 dark:text-red-400 break-all">{error}</p>
diff --git a/app/upload/page.tsx b/app/upload/page.tsx
index 6c60ee0..7f40b36 100644
--- a/app/upload/page.tsx
+++ b/app/upload/page.tsx
@@ -23,6 +23,20 @@ import { storeVideoFile } from "@/lib/video-storage"
 const API_URL = process.env.NEXT_PUBLIC_API_URL
 const WS_URL = API_URL?.replace(/^https:\/\//, "wss://").replace(/^http:\/\//, "ws://")
 
+const DETECTION_TYPES = [
+    { value: "pothole-detection", label: "Pothole Detection" },
+    { value: "sign-board-detection", label: "Signboard Detection" },
+    { value: "pot-sign-detection", label: "Pothole & Signboard Detection" },
+] as const
+
+const DETECTION_METHODS = [
+    { value: "yolo", label: "YOLO Detection Model" },
+    { value: "yolo_vl", label: "YOLO with Vision-Language Model" },
+    { value: "sam3", label: "OpenAI SAM 3 Segmentation Model" },
+    { value: "yoloe", label: "YOLOE Open-Vocabulary Detection" },
+    { value: "yoloe_trained_vl", label: "YOLOE With Vision Language Model" },
+] as const
+
 type DetectionType = "pothole-detection" | "sign-board-detection" | "pot-sign-detection"
 
 
@@ -264,15 +278,11 @@ export default function UploadPage() {
                                             <SelectValue placeholder="Select detection type" />
                                         </SelectTrigger>
                                         <SelectContent>
-                                            <SelectItem value="pothole-detection">
-                                                <span className="font-medium">Pothole Detection</span>
-                                            </SelectItem>
-                                            <SelectItem value="sign-board-detection">
-                                                <span className="font-medium">Signboard Detection</span>
-                                            </SelectItem>
-                                            <SelectItem value="pot-sign-detection">
-                                                <span className="font-medium">Pothole & Signboard Detection</span>
-                                            </SelectItem>
+                                            {DETECTION_TYPES.map((type) => (
+                                                <SelectItem key={type.value} value={type.value}>
+                                                    <span className="font-medium">{type.label}</span>
+                                                </SelectItem>
+                                            ))}
                                         </SelectContent>
                                     </Select>
                                 </div>
@@ -308,21 +318,11 @@ export default function UploadPage() {
                                             <SelectValue placeholder="Select method" />
                                         </SelectTrigger>
                                         <SelectContent>
-                                            <SelectItem value="yolo">
-                                                <span className="font-medium">YOLO Detection Model</span>
-                                            </SelectItem>
-                                            <SelectItem value="yolo_vl">
-                                                <span className="font-medium">YOLO with Vision-Language Model</span>
-                                            </SelectItem>
-                                            <SelectItem value="sam3">
-                                                <span className="font-medium">OpenAI SAM 3 Segmentation Model</span>
-                                            </SelectItem>
-                                            <SelectItem value="yoloe">
-                                                <span className="font-medium">YOLOE Open-Vocabulary Detection</span>
-                                            </SelectItem>
-                                            <SelectItem value="yoloe_trained_vl">
-                                                <span className="font-medium">YOLOE With Vision Language Model</span>
-                                            </SelectItem>
+                                            {DETECTION_METHODS.map((method) => (
+                                                <SelectItem key={method.value} value={method.value}>
+                                                    <span className="font-medium">{method.label}</span>
+                                                </SelectItem>
+                                            ))}
                                         </SelectContent>
                                     </Select>
                                 </div>
diff --git a/components/sidebar-navigation.tsx b/components/sidebar-navigation.tsx
index 481b2b8..2dc3013 100644
--- a/components/sidebar-navigation.tsx
+++ b/components/sidebar-navigation.tsx
@@ -101,7 +101,7 @@ export function SidebarNavigation() {
                                     relative w-12 h-12 rounded-md flex items-center justify-center 
                                     ${isNewAnalysisActive ? 'bg-linear-to-b from-[#3895FF] to-[#86B8F1]' : 'bg-[#f0fafd]/60 border border-slate-100/50'}
                                     hover:bg-linear-to-b hover:from-[#3895FF] hover:to-[#86B8F1] hover:border-none
-                                    transition-all ease-in-out duration-200
+                                     ease-in-out duration-200 transition-all
                                 `}
                             >
                                 <Plus
diff --git a/components/upload-section.tsx b/components/upload-section.tsx
index bad0667..2963f0a 100644
--- a/components/upload-section.tsx
+++ b/components/upload-section.tsx
@@ -13,6 +13,19 @@ import type { DetectionData, DetectionType } from "@/lib/types"
 const API_URL = process.env.NEXT_PUBLIC_API_URL
 const WS_URL = API_URL?.replace(/^https:\/\//, "wss://").replace(/^http:\/\//, "ws://")
 
+const DETECTION_TYPES = [
+  { value: "pothole-detection", label: "Pothole Detection" },
+  { value: "sign-board-detection", label: "Signboard Detection" },
+  { value: "pot-sign-detection", label: "Pothole & Signboard Detection" },
+] as const
+
+const DETECTION_METHODS = [
+  { value: "yolo", label: "YOLO" },
+  { value: "yolo_vl", label: "YOLO with VL" },
+  { value: "sam3", label: "SAM 3" },
+  { value: "yoloe", label: "YOLOE" },
+  { value: "yoloe_trained_vl", label: "YOLOE Trained" },
+] as const
 
 type UploadSectionProps = {
   onDetectionComplete: (data: DetectionData, videoId: string, file: File) => void
@@ -274,21 +287,13 @@ export function UploadSection({ onDetectionComplete, onDetectionTypeChange }: Up
                 <SelectValue placeholder="Select detection type" />
               </SelectTrigger>
               <SelectContent>
-                <SelectItem value="pothole-detection">
-                  <div className="flex items-center gap-2">
-                    <span>Pothole Detection</span>
-                  </div>
-                </SelectItem>
-                <SelectItem value="sign-board-detection">
-                  <div className="flex items-center gap-2">
-                    <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>
+                {DETECTION_TYPES.map((type) => (
+                  <SelectItem key={type.value} value={type.value}>
+                    <div className="flex items-center gap-2">
+                      <span>{type.label}</span>
+                    </div>
+                  </SelectItem>
+                ))}
               </SelectContent>
             </Select>
           </div>
@@ -319,31 +324,13 @@ export function UploadSection({ onDetectionComplete, onDetectionTypeChange }: Up
                 <SelectValue placeholder="Select method" />
               </SelectTrigger>
               <SelectContent>
-                <SelectItem value="yolo">
-                  <div className="flex items-center gap-2">
-                    <span>YOLO</span>
-                  </div>
-                </SelectItem>
-                <SelectItem value="yolo_vl">
-                  <div className="flex items-center gap-2">
-                    <span>YOLO with VL</span>
-                  </div>
-                </SelectItem>
-                <SelectItem value="sam3">
-                  <div className="flex items-center gap-2">
-                    <span>SAM 3</span>
-                  </div>
-                </SelectItem>
-                <SelectItem value="yoloe">
-                  <div className="flex items-center gap-2">
-                    <span>YOLOE</span>
-                  </div>
-                </SelectItem>
-                <SelectItem value="yoloe_trained_vl">
-                  <div className="flex items-center gap-2">
-                    <span>YOLOE Trained</span>
-                  </div>
-                </SelectItem>
+                {DETECTION_METHODS.map((method) => (
+                  <SelectItem key={method.value} value={method.value}>
+                    <div className="flex items-center gap-2">
+                      <span>{method.label}</span>
+                    </div>
+                  </SelectItem>
+                ))}
               </SelectContent>
             </Select>
           </div>
@@ -352,7 +339,7 @@ export function UploadSection({ onDetectionComplete, onDetectionTypeChange }: Up
         {/* Error Display */}
         {error && (
           <div className="flex items-start gap-2 p-3 rounded-lg bg-destructive/10 text-destructive">
-            <AlertCircle className="h-5 w-5 mt-0.5 flex-shrink-0" />
+            <AlertCircle className="h-5 w-5 mt-0.5 shrink-0" />
             <p className="text-sm whitespace-pre-line">{error}</p>
           </div>
         )}