diff --git a/Readme.md b/Readme.md
index 0264b06..ab1751e 100644
--- a/Readme.md
+++ b/Readme.md
@@ -163,7 +163,6 @@ if __name__ == "__main__":
 
 **`.env.local`**
 ```bash
-NEXT_PUBLIC_API_URL=http://localhost:8000/api/v1
 NEXT_PUBLIC_WS_URL=ws://localhost:8000/api/v1
 ```
 
diff --git a/app/create-location/page.tsx b/app/create-location/page.tsx
index 07f4d21..90e6a77 100644
--- a/app/create-location/page.tsx
+++ b/app/create-location/page.tsx
@@ -16,11 +16,15 @@ import {
     fetchAllLocations,
     fetchAllPackages,
     createLocation,
+    updateLocation,
+    deleteLocation,
     type Project,
     type Package as PackageType,
     type Location,
-    type LocationCreate
+    type LocationCreate,
+    type LocationUpdate
 } from "@/lib/api"
+import { toast } from "sonner"
 
 export default function CreateLocationPage() {
     const [locations, setLocations] = useState<Location[]>([])
@@ -30,11 +34,14 @@ export default function CreateLocationPage() {
     const [isLoading, setIsLoading] = useState(true)
     const [isModalOpen, setIsModalOpen] = useState(false)
     const [isSubmitting, setIsSubmitting] = useState(false)
-    const [success, setSuccess] = useState(false)
     const [error, setError] = useState<string | null>(null)
     const [loadingProjects, setLoadingProjects] = useState(false)
     const [loadingPackages, setLoadingPackages] = useState(false)
 
+    // Editing state
+    const [isEditing, setIsEditing] = useState(false)
+    const [currentLocation, setCurrentLocation] = useState<Location | null>(null)
+
     // Form fields
     const [selectedProjectId, setSelectedProjectId] = useState("")
     const [selectedPackageId, setSelectedPackageId] = useState("")
@@ -91,14 +98,14 @@ export default function CreateLocationPage() {
     useEffect(() => {
         if (!selectedProjectId) {
             setPackages([])
-            setSelectedPackageId("")
+            if (!isEditing) setSelectedPackageId("")
             return
         }
 
-        const loadPackages = async () => {
+        const loadPackagesForProject = async () => {
             try {
                 setLoadingPackages(true)
-                setSelectedPackageId("")
+                if (!isEditing) setSelectedPackageId("")
                 const data = await fetchPackagesByProject(selectedProjectId)
                 setPackages(data)
             } catch (err) {
@@ -107,8 +114,8 @@ export default function CreateLocationPage() {
                 setLoadingPackages(false)
             }
         }
-        loadPackages()
-    }, [selectedProjectId])
+        loadPackagesForProject()
+    }, [selectedProjectId, isEditing])
 
     const resetForm = () => {
         setSelectedProjectId("")
@@ -121,11 +128,13 @@ export default function CreateLocationPage() {
         setEndLat("")
         setEndLng("")
         setError(null)
+        setIsEditing(false)
+        setCurrentLocation(null)
     }
 
     const handleSubmit = async (e: React.FormEvent) => {
         e.preventDefault()
-        if (!selectedPackageId) {
+        if (!selectedPackageId && !isEditing) {
             setError("Please select a project and package first")
             return
         }
@@ -142,41 +151,86 @@ export default function CreateLocationPage() {
         setError(null)
 
         try {
-            const data: LocationCreate = {
-                package_id: selectedPackageId,
-                segment_name: segmentName.trim(),
-                chainage_start_km: chainageStartKm ? parseFloat(chainageStartKm) : null,
-                chainage_end_km: chainageEndKm ? parseFloat(chainageEndKm) : null,
-                start_lat: parseFloat(startLat),
-                start_lng: parseFloat(startLng),
-                end_lat: parseFloat(endLat),
-                end_lng: parseFloat(endLng),
+            if (isEditing && currentLocation) {
+                const data: LocationUpdate = {
+                    segment_name: segmentName.trim(),
+                    chainage_start_km: chainageStartKm ? parseFloat(chainageStartKm) : null,
+                    chainage_end_km: chainageEndKm ? parseFloat(chainageEndKm) : null,
+                    start_lat: parseFloat(startLat),
+                    start_lng: parseFloat(startLng),
+                    end_lat: parseFloat(endLat),
+                    end_lng: parseFloat(endLng),
+                }
+                await updateLocation(currentLocation.id, data)
+                toast.success("Location updated successfully!")
+            } else {
+                const data: LocationCreate = {
+                    package_id: selectedPackageId,
+                    segment_name: segmentName.trim(),
+                    chainage_start_km: chainageStartKm ? parseFloat(chainageStartKm) : null,
+                    chainage_end_km: chainageEndKm ? parseFloat(chainageEndKm) : null,
+                    start_lat: parseFloat(startLat),
+                    start_lng: parseFloat(startLng),
+                    end_lat: parseFloat(endLat),
+                    end_lng: parseFloat(endLng),
+                }
+                await createLocation(data)
+                toast.success("Location created successfully!")
             }
 
-            await createLocation(data)
-            setSuccess(true)
-
             // Refresh locations list
             await loadLocations()
 
-            setTimeout(() => {
-                resetForm()
-                setSuccess(false)
-                setIsModalOpen(false)
-            }, 2000)
+            // Close modal and reset form immediately
+            setIsModalOpen(false)
+            resetForm()
         } catch (err) {
-            setError(err instanceof Error ? err.message : "Failed to create location")
+            setError(err instanceof Error ? err.message : `Failed to ${isEditing ? 'update' : 'create'} location`)
         } finally {
             setIsSubmitting(false)
         }
     }
 
+    const handleEdit = (location: Location) => {
+        setIsEditing(true)
+        setCurrentLocation(location)
+
+        // Find project for this package
+        const pkg = allPackages.find(p => p.id === location.package_id)
+        if (pkg) {
+            setSelectedProjectId(pkg.project_id)
+            setSelectedPackageId(location.package_id)
+        }
+
+        setSegmentName(location.segment_name || "")
+        setChainageStartKm(location.chainage_start_km?.toString() || "")
+        setChainageEndKm(location.chainage_end_km?.toString() || "")
+        setStartLat(location.start_lat.toString())
+        setStartLng(location.start_lng.toString())
+        setEndLat(location.end_lat.toString())
+        setEndLng(location.end_lng.toString())
+        setIsModalOpen(true)
+    }
+
+    const handleDelete = async (location: Location) => {
+        if (!confirm(`Are you sure you want to delete location "${location.segment_name}"?`)) return
+
+        try {
+            setIsLoading(true)
+            await deleteLocation(location.id)
+            toast.success("Location deleted successfully!")
+            await loadLocations()
+        } catch (err) {
+            setError("Failed to delete location")
+        } finally {
+            setIsLoading(false)
+        }
+    }
+
     const getPackageName = (packageId: string) => {
         return allPackages.find(p => p.id === packageId)?.name || packageId
     }
 
-    const selectedProject = projects.find(p => p.id === selectedProjectId)
-    const selectedPackage = packages.find(p => p.id === selectedPackageId)
     const isFormComplete = selectedPackageId && segmentName.trim() && startLat && startLng && endLat && endLng
 
     const columns = [
@@ -241,7 +295,7 @@ export default function CreateLocationPage() {
             <main className="ml-16 min-h-screen relative overflow-hidden">
                 <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="mb-8">
                         <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" />
@@ -259,28 +313,30 @@ 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 animate-in fade-in slide-in-from-top duration-300">
+                        <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">
                                 <span className="text-xs font-bold text-red-500">!</span>
                             </div>
-                            <p className="text-sm text-red-600 dark:text-red-400">{error}</p>
+                            <p className="text-sm text-red-600 dark:text-red-400 break-all">{error}</p>
                         </div>
                     )}
 
                     {/* Data Table */}
-                    <div className="animate-in fade-in slide-in-from-bottom duration-700 delay-150">
+                    <div>
                         <DataTable
                             title="All Locations"
                             data={locations}
                             columns={columns}
-                            onAddNew={() => setIsModalOpen(true)}
+                            onAddNew={() => { setIsEditing(false); setIsModalOpen(true); }}
+                            onEdit={handleEdit}
+                            onDelete={handleDelete}
                             addButtonText="Add New Location"
                             isLoading={isLoading}
                         />
                     </div>
 
                     {/* Footer */}
-                    <div className="mt-8 text-center animate-in fade-in duration-700 delay-300">
+                    <div className="mt-8 text-center">
                         <p className="text-xs text-gray-400 dark:text-gray-500">
                             Sentient Geeks Pvt. Ltd.
                         </p>
@@ -289,7 +345,7 @@ export default function CreateLocationPage() {
             </main>
 
             {/* Modal Dialog */}
-            <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
+            <Dialog open={isModalOpen} onOpenChange={(open) => { if (!open) { setIsModalOpen(false); resetForm(); } else { setIsModalOpen(true); } }}>
                 <DialogContent
                     className="max-w-2xl"
                     onOpenAutoFocus={(e) => e.preventDefault()}
@@ -297,98 +353,97 @@ export default function CreateLocationPage() {
                     <DialogHeader>
                         <DialogTitle className="flex items-center gap-2">
                             <MapPin className="h-5 w-5 text-blue-500" />
-                            Create New Location
+                            {isEditing ? 'Edit Location' : 'Create New Location'}
                         </DialogTitle>
                         <DialogDescription>
-                            Select project & package, then fill in the location details
+                            {isEditing ? 'Update disclosure details for your road infrastructure segment' : 'Select project & package, then fill in the location details'}
                         </DialogDescription>
                     </DialogHeader>
 
-                    {/* Success Message in Modal */}
-                    {success && (
-                        <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>
-                    )}
 
                     {/* 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 animate-in fade-in slide-in-from-top duration-300">
+                        <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">
                                 <span className="text-xs font-bold text-red-500">!</span>
                             </div>
-                            <p className="text-sm text-red-600 dark:text-red-400">{error}</p>
+                            <p className="text-sm text-red-600 dark:text-red-400 break-all">{error}</p>
                         </div>
                     )}
 
                     <form onSubmit={handleSubmit} className="space-y-6">
                         {/* Step 1: Select Project */}
-                        <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>
+                        {!isEditing && (
+                            <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-xs font-bold text-blue-700 dark:text-blue-400">Select Project</p>
                                 </div>
-                                <p className="text-xs font-bold text-blue-700 dark:text-blue-400">Select Project</p>
+                                <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">
+                                        {loadingProjects ? (
+                                            <div className="flex items-center gap-2">
+                                                <Loader2 className="h-4 w-4 animate-spin text-blue-500" />
+                                                <span className="text-gray-400">Loading projects...</span>
+                                            </div>
+                                        ) : (
+                                            <SelectValue placeholder="Choose a project" />
+                                        )}
+                                    </SelectTrigger>
+                                    <SelectContent>
+                                        {projects.map(project => (
+                                            <SelectItem key={project.id} value={project.id}>
+                                                <span className="font-medium">{project.name}</span>
+                                            </SelectItem>
+                                        ))}
+                                    </SelectContent>
+                                </Select>
                             </div>
-                            <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">
-                                    {loadingProjects ? (
-                                        <div className="flex items-center gap-2">
-                                            <Loader2 className="h-4 w-4 animate-spin text-blue-500" />
-                                            <span className="text-gray-400">Loading projects...</span>
-                                        </div>
-                                    ) : (
-                                        <SelectValue placeholder="Choose a project" />
-                                    )}
-                                </SelectTrigger>
-                                <SelectContent>
-                                    {projects.map(project => (
-                                        <SelectItem key={project.id} value={project.id}>
-                                            <span className="font-medium">{project.name}</span>
-                                        </SelectItem>
-                                    ))}
-                                </SelectContent>
-                            </Select>
-                        </div>
+                        )}
 
                         {/* Step 2: Select Package */}
-                        <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>
+                        {!isEditing && (
+                            <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 ${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-xs font-bold text-blue-700 dark:text-blue-400">Select Package</p>
                                 </div>
-                                <p className="text-xs font-bold text-blue-700 dark:text-blue-400">Select Package</p>
+                                <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">
+                                        {loadingPackages ? (
+                                            <div className="flex items-center gap-2">
+                                                <Loader2 className="h-4 w-4 animate-spin text-blue-500" />
+                                                <span className="text-gray-400">Loading packages...</span>
+                                            </div>
+                                        ) : (
+                                            <SelectValue placeholder={selectedProjectId ? "Choose a package" : "Select project first"} />
+                                        )}
+                                    </SelectTrigger>
+                                    <SelectContent>
+                                        {packages.map(pkg => (
+                                            <SelectItem key={pkg.id} value={pkg.id}>
+                                                <span className="font-medium">{pkg.name}</span>
+                                            </SelectItem>
+                                        ))}
+                                    </SelectContent>
+                                </Select>
                             </div>
-                            <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">
-                                    {loadingPackages ? (
-                                        <div className="flex items-center gap-2">
-                                            <Loader2 className="h-4 w-4 animate-spin text-blue-500" />
-                                            <span className="text-gray-400">Loading packages...</span>
-                                        </div>
-                                    ) : (
-                                        <SelectValue placeholder={selectedProjectId ? "Choose a package" : "Select project first"} />
-                                    )}
-                                </SelectTrigger>
-                                <SelectContent>
-                                    {packages.map(pkg => (
-                                        <SelectItem key={pkg.id} value={pkg.id}>
-                                            <span className="font-medium">{pkg.name}</span>
-                                        </SelectItem>
-                                    ))}
-                                </SelectContent>
-                            </Select>
-                        </div>
+                        )}
 
                         {/* Step 3: Location Details */}
-                        <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-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 className={`space-y-4 ${selectedPackageId || isEditing ? 'opacity-100' : 'opacity-40 pointer-events-none'}`}>
+                            {!isEditing && (
+                                <div className="flex items-center gap-2">
+                                    <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-xs font-bold text-gray-700 dark:text-gray-300">Location Information</p>
                                 </div>
-                                <p className="text-xs font-bold text-gray-700 dark:text-gray-300">Location Information</p>
-                            </div>
+                            )}
 
                             {/* Segment Name & Chainage Row */}
                             <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
@@ -535,12 +590,12 @@ export default function CreateLocationPage() {
                                 {isSubmitting ? (
                                     <span className="flex items-center gap-2">
                                         <Loader2 className="h-4 w-4 animate-spin" />
-                                        Creating...
+                                        {isEditing ? 'Updating...' : 'Creating...'}
                                     </span>
                                 ) : (
                                     <span className="flex items-center gap-2">
-                                        <MapPin className="h-4 w-4" />
-                                        Create Location
+                                        {isEditing ? <CheckCircle2 className="h-4 w-4" /> : <MapPin className="h-4 w-4" />}
+                                        {isEditing ? 'Update Location' : 'Create Location'}
                                     </span>
                                 )}
                             </Button>
diff --git a/app/create-package/page.tsx b/app/create-package/page.tsx
index 1109e74..d986674 100644
--- a/app/create-package/page.tsx
+++ b/app/create-package/page.tsx
@@ -14,10 +14,14 @@ import {
     fetchProjects,
     fetchAllPackages,
     createPackage,
+    updatePackage,
+    deletePackage,
     type Project,
     type Package as PackageType,
-    type PackageCreate
+    type PackageCreate,
+    type PackageUpdate
 } from "@/lib/api"
+import { toast } from "sonner"
 
 export default function CreatePackagePage() {
     const [packages, setPackages] = useState<PackageType[]>([])
@@ -25,10 +29,13 @@ export default function CreatePackagePage() {
     const [isLoading, setIsLoading] = useState(true)
     const [isModalOpen, setIsModalOpen] = useState(false)
     const [isSubmitting, setIsSubmitting] = useState(false)
-    const [success, setSuccess] = useState(false)
     const [error, setError] = useState<string | null>(null)
     const [loadingProjects, setLoadingProjects] = useState(false)
 
+    // Editing state
+    const [isEditing, setIsEditing] = useState(false)
+    const [currentPackage, setCurrentPackage] = useState<PackageType | null>(null)
+
     // Form fields
     const [selectedProjectId, setSelectedProjectId] = useState("")
     const [name, setName] = useState("")
@@ -70,6 +77,8 @@ export default function CreatePackagePage() {
         setName("")
         setRegion("")
         setError(null)
+        setIsEditing(false)
+        setCurrentPackage(null)
     }
 
     const handleSubmit = async (e: React.FormEvent) => {
@@ -87,36 +96,64 @@ export default function CreatePackagePage() {
         setError(null)
 
         try {
-            const data: PackageCreate = {
-                project_id: selectedProjectId,
-                name: name.trim(),
-                region: region.trim() || null,
+            if (isEditing && currentPackage) {
+                const data: PackageUpdate = {
+                    name: name.trim(),
+                    region: region.trim() || null,
+                }
+                await updatePackage(currentPackage.id, data)
+                toast.success("Package updated successfully!")
+            } else {
+                const data: PackageCreate = {
+                    project_id: selectedProjectId,
+                    name: name.trim(),
+                    region: region.trim() || null,
+                }
+                await createPackage(data)
+                toast.success("Package created successfully!")
             }
 
-            await createPackage(data)
-            setSuccess(true)
-
             // Refresh packages list
             await loadPackages()
 
-            setTimeout(() => {
-                resetForm()
-                setSuccess(false)
-                setIsModalOpen(false)
-            }, 2000)
+            // Close modal and reset form immediately
+            setIsModalOpen(false)
+            resetForm()
         } catch (err) {
-            setError(err instanceof Error ? err.message : "Failed to create package")
+            setError(err instanceof Error ? err.message : `Failed to ${isEditing ? 'update' : 'create'} package`)
         } finally {
             setIsSubmitting(false)
         }
     }
 
+    const handleEdit = (pkg: PackageType) => {
+        setIsEditing(true)
+        setCurrentPackage(pkg)
+        setSelectedProjectId(pkg.project_id)
+        setName(pkg.name || "")
+        setRegion(pkg.region || "")
+        setIsModalOpen(true)
+    }
+
+    const handleDelete = async (pkg: PackageType) => {
+        if (!confirm(`Are you sure you want to delete package "${pkg.name}"?`)) return
+
+        try {
+            setIsLoading(true)
+            await deletePackage(pkg.id)
+            toast.success("Package deleted successfully!")
+            await loadPackages()
+        } catch (err) {
+            setError("Failed to delete package")
+        } finally {
+            setIsLoading(false)
+        }
+    }
+
     const getProjectName = (projectId: string) => {
         return projects.find(p => p.id === projectId)?.name || projectId
     }
 
-    const selectedProject = projects.find(p => p.id === selectedProjectId)
-
     const columns = [
         {
             key: "name",
@@ -162,7 +199,7 @@ export default function CreatePackagePage() {
             <main className="ml-16 min-h-screen relative overflow-hidden">
                 <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="mb-8">
                         <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" />
@@ -180,28 +217,30 @@ export default function CreatePackagePage() {
 
                     {/* 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 animate-in fade-in slide-in-from-top duration-300">
+                        <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">
                                 <span className="text-xs font-bold text-red-500">!</span>
                             </div>
-                            <p className="text-sm text-red-600 dark:text-red-400">{error}</p>
+                            <p className="text-sm text-red-600 dark:text-red-400 break-all">{error}</p>
                         </div>
                     )}
 
                     {/* Data Table */}
-                    <div className="animate-in fade-in slide-in-from-bottom duration-700 delay-150">
+                    <div>
                         <DataTable
                             title="All Packages"
                             data={packages}
                             columns={columns}
-                            onAddNew={() => setIsModalOpen(true)}
+                            onAddNew={() => { setIsEditing(false); setIsModalOpen(true); }}
+                            onEdit={handleEdit}
+                            onDelete={handleDelete}
                             addButtonText="Add New Package"
                             isLoading={isLoading}
                         />
                     </div>
 
                     {/* Footer */}
-                    <div className="mt-8 text-center animate-in fade-in duration-700 delay-300">
+                    <div className="mt-8 text-center">
                         <p className="text-xs text-gray-400 dark:text-gray-500">
                             Sentient Geeks Pvt. Ltd.
                         </p>
@@ -210,7 +249,7 @@ export default function CreatePackagePage() {
             </main>
 
             {/* Modal Dialog */}
-            <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
+            <Dialog open={isModalOpen} onOpenChange={(open) => { if (!open) { setIsModalOpen(false); resetForm(); } else { setIsModalOpen(true); } }}>
                 <DialogContent
                     className="max-w-2xl"
                     onOpenAutoFocus={(e) => e.preventDefault()}
@@ -218,69 +257,67 @@ export default function CreatePackagePage() {
                     <DialogHeader>
                         <DialogTitle className="flex items-center gap-2">
                             <Package className="h-5 w-5 text-blue-500" />
-                            Create New Package
+                            {isEditing ? 'Edit Package' : 'Create New Package'}
                         </DialogTitle>
                         <DialogDescription>
-                            Select a project and fill in the package details
+                            {isEditing ? 'Update disclosure details for your road infrastructure package' : 'Select a project and fill in the package details'}
                         </DialogDescription>
                     </DialogHeader>
 
-                    {/* Success Message in Modal */}
-                    {success && (
-                        <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>
-                    )}
 
                     {/* 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 animate-in fade-in slide-in-from-top duration-300">
+                        <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">
                                 <span className="text-xs font-bold text-red-500">!</span>
                             </div>
-                            <p className="text-sm text-red-600 dark:text-red-400">{error}</p>
+                            <p className="text-sm text-red-600 dark:text-red-400 break-all">{error}</p>
                         </div>
                     )}
 
                     <form onSubmit={handleSubmit} className="space-y-8">
                         {/* Step 1: Select Project */}
-                        <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-blue-600 flex items-center justify-center">
-                                    <span className="text-white text-xs font-bold">1</span>
+                        {!isEditing && (
+                            <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-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>
                                 </div>
-                                <p className="text-sm font-bold text-blue-700 dark:text-blue-400">Select Project</p>
+                                <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">
+                                        {loadingProjects ? (
+                                            <div className="flex items-center gap-2">
+                                                <Loader2 className="h-4 w-4 animate-spin text-blue-500" />
+                                                <span className="text-gray-400">Loading projects...</span>
+                                            </div>
+                                        ) : (
+                                            <SelectValue placeholder="Choose a project" />
+                                        )}
+                                    </SelectTrigger>
+                                    <SelectContent>
+                                        {projects.map(project => (
+                                            <SelectItem key={project.id} value={project.id}>
+                                                <span className="font-medium">{project.name}</span>
+                                            </SelectItem>
+                                        ))}
+                                    </SelectContent>
+                                </Select>
                             </div>
-                            <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">
-                                    {loadingProjects ? (
-                                        <div className="flex items-center gap-2">
-                                            <Loader2 className="h-4 w-4 animate-spin text-blue-500" />
-                                            <span className="text-gray-400">Loading projects...</span>
-                                        </div>
-                                    ) : (
-                                        <SelectValue placeholder="Choose a project" />
-                                    )}
-                                </SelectTrigger>
-                                <SelectContent>
-                                    {projects.map(project => (
-                                        <SelectItem key={project.id} value={project.id}>
-                                            <span className="font-medium">{project.name}</span>
-                                        </SelectItem>
-                                    ))}
-                                </SelectContent>
-                            </Select>
-                        </div>
+                        )}
+
 
                         {/* 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-blue-600' : 'bg-gray-300 dark:bg-gray-600'}`}>
-                                    <span className="text-white text-xs font-bold">2</span>
+                        <div className={`space-y-4 ${selectedProjectId || isEditing ? 'opacity-100' : 'opacity-40 pointer-events-none'}`}>
+                            {!isEditing && (
+                                <div className="flex items-center gap-2">
+                                    <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>
-                                <p className="text-sm font-bold text-gray-700 dark:text-gray-300">Package Information</p>
-                            </div>
+                            )}
 
                             <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                                 <div className="space-y-2">
@@ -307,7 +344,7 @@ export default function CreatePackagePage() {
                                         value={region}
                                         onChange={(e) => setRegion(e.target.value)}
                                         placeholder="Region"
-                                        className="h-10 text-sm"
+                                        className="h-10 text-sm focus-visible:ring-blue-500"
                                     />
                                 </div>
                             </div>
@@ -335,12 +372,12 @@ export default function CreatePackagePage() {
                                 {isSubmitting ? (
                                     <span className="flex items-center gap-2">
                                         <Loader2 className="h-4 w-4 animate-spin" />
-                                        Creating...
+                                        {isEditing ? 'Updating...' : 'Creating...'}
                                     </span>
                                 ) : (
                                     <span className="flex items-center gap-2">
-                                        <Package className="h-4 w-4" />
-                                        Create Package
+                                        {isEditing ? <CheckCircle2 className="h-4 w-4" /> : <Package className="h-4 w-4" />}
+                                        {isEditing ? 'Update Package' : 'Create Package'}
                                     </span>
                                 )}
                             </Button>
diff --git a/app/create-project/page.tsx b/app/create-project/page.tsx
index 994deb9..07fc3b6 100644
--- a/app/create-project/page.tsx
+++ b/app/create-project/page.tsx
@@ -9,16 +9,20 @@ import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } f
 import { Loader2, CheckCircle2, FolderPlus, MapPin, Building2, Route, X } from "lucide-react"
 import { SidebarNavigation } from "@/components/sidebar-navigation"
 import { DataTable } from "@/components/data-table"
-import { createProject, fetchProjects, type ProjectCreate, type Project } from "@/lib/api"
+import { createProject, fetchProjects, updateProject, deleteProject, type ProjectCreate, type Project, type ProjectUpdate } from "@/lib/api"
+import { toast } from "sonner"
 
 export default function CreateProjectPage() {
     const [projects, setProjects] = useState<Project[]>([])
     const [isLoading, setIsLoading] = useState(true)
     const [isModalOpen, setIsModalOpen] = useState(false)
     const [isSubmitting, setIsSubmitting] = useState(false)
-    const [success, setSuccess] = useState(false)
     const [error, setError] = useState<string | null>(null)
 
+    // Editing state
+    const [isEditing, setIsEditing] = useState(false)
+    const [currentProject, setCurrentProject] = useState<Project | null>(null)
+
     // Form fields
     const [name, setName] = useState("")
     const [state, setState] = useState("")
@@ -55,6 +59,8 @@ export default function CreateProjectPage() {
         setEndLat("")
         setEndLng("")
         setError(null)
+        setIsEditing(false)
+        setCurrentProject(null)
     }
 
     const handleSubmit = async (e: React.FormEvent) => {
@@ -68,34 +74,73 @@ export default function CreateProjectPage() {
         setError(null)
 
         try {
-            const data: ProjectCreate = {
-                name: name.trim(),
-                state: state.trim() || null,
-                corridor_name: corridorName.trim() || null,
-                start_lat: startLat ? parseFloat(startLat) : null,
-                start_lng: startLng ? parseFloat(startLng) : null,
-                end_lat: endLat ? parseFloat(endLat) : null,
-                end_lng: endLng ? parseFloat(endLng) : null,
+            if (isEditing && currentProject) {
+                const data: ProjectUpdate = {
+                    name: name.trim(),
+                    state: state.trim() || null,
+                    corridor_name: corridorName.trim() || null,
+                    start_lat: startLat ? parseFloat(startLat) : null,
+                    start_lng: startLng ? parseFloat(startLng) : null,
+                    end_lat: endLat ? parseFloat(endLat) : null,
+                    end_lng: endLng ? parseFloat(endLng) : null,
+                }
+                await updateProject(currentProject.id, data)
+                toast.success("Project updated successfully!")
+            } else {
+                const data: ProjectCreate = {
+                    name: name.trim(),
+                    state: state.trim() || null,
+                    corridor_name: corridorName.trim() || null,
+                    start_lat: startLat ? parseFloat(startLat) : null,
+                    start_lng: startLng ? parseFloat(startLng) : null,
+                    end_lat: endLat ? parseFloat(endLat) : null,
+                    end_lng: endLng ? parseFloat(endLng) : null,
+                }
+                await createProject(data)
+                toast.success("Project created successfully!")
             }
 
-            await createProject(data)
-            setSuccess(true)
-
             // Refresh projects list
             await loadProjects()
 
-            setTimeout(() => {
-                resetForm()
-                setSuccess(false)
-                setIsModalOpen(false)
-            }, 2000)
+            // Close modal and reset form immediately
+            setIsModalOpen(false)
+            resetForm()
         } catch (err) {
-            setError(err instanceof Error ? err.message : "Failed to create project")
+            setError(err instanceof Error ? err.message : `Failed to ${isEditing ? 'update' : 'create'} project`)
         } finally {
             setIsSubmitting(false)
         }
     }
 
+    const handleEdit = (project: Project) => {
+        setIsEditing(true)
+        setCurrentProject(project)
+        setName(project.name || "")
+        setState(project.state || "")
+        setCorridorName(project.corridor_name || "")
+        setStartLat(project.start_lat?.toString() || "")
+        setStartLng(project.start_lng?.toString() || "")
+        setEndLat(project.end_lat?.toString() || "")
+        setEndLng(project.end_lng?.toString() || "")
+        setIsModalOpen(true)
+    }
+
+    const handleDelete = async (project: Project) => {
+        if (!confirm(`Are you sure you want to delete project "${project.name}"?`)) return
+
+        try {
+            setIsLoading(true)
+            await deleteProject(project.id)
+            toast.success("Project deleted successfully!")
+            await loadProjects()
+        } catch (err) {
+            setError("Failed to delete project")
+        } finally {
+            setIsLoading(false)
+        }
+    }
+
     const columns = [
         {
             key: "name",
@@ -135,7 +180,7 @@ export default function CreateProjectPage() {
             <main className="ml-16 min-h-screen relative overflow-hidden">
                 <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="mb-8">
                         <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" />
@@ -153,28 +198,30 @@ 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 animate-in fade-in slide-in-from-top duration-300">
+                        <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">
                                 <span className="text-xs font-bold text-red-500">!</span>
                             </div>
-                            <p className="text-sm text-red-600 dark:text-red-400">{error}</p>
+                            <p className="text-sm text-red-600 dark:text-red-400 break-all">{error}</p>
                         </div>
                     )}
 
                     {/* Data Table */}
-                    <div className="animate-in fade-in slide-in-from-bottom duration-700 delay-150">
+                    <div>
                         <DataTable
                             title="All Projects"
                             data={projects}
                             columns={columns}
-                            onAddNew={() => setIsModalOpen(true)}
+                            onAddNew={() => { setIsEditing(false); setIsModalOpen(true); }}
+                            onEdit={handleEdit}
+                            onDelete={handleDelete}
                             addButtonText="Add New Project"
                             isLoading={isLoading}
                         />
                     </div>
 
                     {/* Footer */}
-                    <div className="mt-8 text-center animate-in fade-in duration-700 delay-300">
+                    <div className="mt-8 text-center">
                         <p className="text-xs text-gray-400 dark:text-gray-500">
                             Sentient Geeks Pvt. Ltd.
                         </p>
@@ -191,28 +238,21 @@ export default function CreateProjectPage() {
                     <DialogHeader>
                         <DialogTitle className="flex items-center gap-2">
                             <FolderPlus className="h-5 w-5 text-blue-500" />
-                            Create New Project
+                            {isEditing ? 'Edit Project' : 'Create New Project'}
                         </DialogTitle>
                         <DialogDescription>
-                            Fill in the details for your new road infrastructure project
+                            {isEditing ? 'Update disclosure details for your road infrastructure project' : 'Fill in the details for your new road infrastructure project'}
                         </DialogDescription>
                     </DialogHeader>
 
-                    {/* Success Message in Modal */}
-                    {success && (
-                        <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">Project created successfully!</p>
-                        </div>
-                    )}
 
                     {/* 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 animate-in fade-in slide-in-from-top duration-300">
+                        <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">
                                 <span className="text-xs font-bold text-red-500">!</span>
                             </div>
-                            <p className="text-sm text-red-600 dark:text-red-400">{error}</p>
+                            <p className="text-sm text-red-600 dark:text-red-400 break-all">{error}</p>
                         </div>
                     )}
 
@@ -347,17 +387,17 @@ export default function CreateProjectPage() {
                             <Button
                                 type="submit"
                                 disabled={isSubmitting || !name.trim()}
-                                className="flex-1 bg-gradient-to-r from-blue-500 via-indigo-500 to-blue-700 hover:from-blue-600 hover:via-indigo-600 hover:to-blue-800 text-white"
+                                className="flex-1 bg-gradient-to-r from-blue-500 via-indigo-500 to-blue-700 hover:bg-blue-600 text-white"
                             >
                                 {isSubmitting ? (
                                     <span className="flex items-center gap-2">
                                         <Loader2 className="h-4 w-4 animate-spin" />
-                                        Creating...
+                                        {isEditing ? 'Updating...' : 'Creating...'}
                                     </span>
                                 ) : (
                                     <span className="flex items-center gap-2">
-                                        <FolderPlus className="h-4 w-4" />
-                                        Create Project
+                                        {isEditing ? <CheckCircle2 className="h-4 w-4" /> : <FolderPlus className="h-4 w-4" />}
+                                        {isEditing ? 'Update Project' : 'Create Project'}
                                     </span>
                                 )}
                             </Button>
diff --git a/app/dashboard/page.tsx b/app/dashboard/page.tsx
index 418d9eb..177417a 100644
--- a/app/dashboard/page.tsx
+++ b/app/dashboard/page.tsx
@@ -22,7 +22,7 @@ import {
     type Project
 } from "@/lib/api"
 
-const API_URL = process.env.NEXT_PUBLIC_API_URL || "http://127.0.0.1:8000/api/v1"
+const API_URL = "http://127.0.0.1:8000/api/v1"
 
 interface ProjectSummary {
     project: {
@@ -236,6 +236,8 @@ export default function DashboardPage() {
                 : pkg.locations || {}
 
             for (const [locName, loc] of Object.entries(locationsToProcess)) {
+                if (!loc) continue
+
                 let locPotholes = 0
                 let locSignboards = 0
 
@@ -278,12 +280,12 @@ export default function DashboardPage() {
             <main className="ml-16 min-h-screen">
                 <div className="p-4 px-8 max-w-full mx-auto">
                     {/* Header */}
-                    <div className="mb-8 flex items-center gap-5 animate-in fade-in slide-in-from-top duration-500">
+                    <div className="mb-8 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 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">
+                            {/* Constant orbit animations removed */}
+                            <div className="absolute inset-0 bg-white/20 opacity-50"></div>
+                            <div className="absolute inset-0 border-2 border-white/30 rounded-2xl 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">
                                 <path d="M50 20L85 80H15L50 20Z" stroke="currentColor" strokeWidth="6" strokeLinejoin="round" />
                                 <path d="M40 80L50 55L60 80" stroke="currentColor" strokeWidth="6" />
                             </svg>
@@ -300,14 +302,14 @@ export default function DashboardPage() {
 
                     {/* Error Display */}
                     {error && (
-                        <div className="mb-4 flex items-center gap-2 p-3 rounded-xl bg-red-50 dark:bg-red-950/30 border border-red-200 dark:border-red-800 text-red-600 dark:text-red-400 text-sm animate-in fade-in duration-300">
+                        <div className="mb-4 flex items-center gap-2 p-3 rounded-xl bg-red-50 dark:bg-red-950/30 border border-red-200 dark:border-red-800 text-red-600 dark:text-red-400 text-sm">
                             <AlertCircle className="h-4 w-4 flex-shrink-0" />
                             <p>{error}</p>
                         </div>
                     )}
 
                     {/* Stats Cards - Top Row */}
-                    <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6 animate-in fade-in slide-in-from-bottom duration-500">
+                    <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
                         <GradientStatsCard
                             title="Total Detections"
                             subtitle="All detected objects"
@@ -335,7 +337,7 @@ export default function DashboardPage() {
                     </div>
 
                     {/* Filter Selector - Above main content */}
-                    <div className="mb-6 animate-in fade-in slide-in-from-bottom duration-500 delay-100">
+                    <div className="mb-6">
                         <FilterSelector
                             projects={projects}
                             selectedProjectId={selectedProjectId}
@@ -351,7 +353,7 @@ export default function DashboardPage() {
                     </div>
 
                     {/* Charts Row - Side by Side */}
-                    <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-4 animate-in fade-in slide-in-from-bottom duration-500 delay-200">
+                    <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-4">
                         {/* Left Chart - Detection Distribution */}
                         <Card className="rounded-xl overflow-hidden">
                             <CardHeader className="pb-2 border-b border-[var(--border)]">
@@ -395,7 +397,7 @@ export default function DashboardPage() {
                     </div>
 
                     {/* Map - Full Width Below Charts */}
-                    <div className="animate-in fade-in slide-in-from-bottom duration-500 delay-300">
+                    <div>
                         <DashboardMap
                             selectedProjectId={selectedProjectId}
                             selectedPackageId={selectedPackageId}
@@ -405,7 +407,7 @@ export default function DashboardPage() {
                     </div>
 
                     {/* Footer */}
-                    <div className="mt-8 text-center animate-in fade-in duration-700 delay-300">
+                    <div className="mt-8 text-center">
                         <p className="text-xs text-gray-400 dark:text-gray-500">
                             Sentient Geeks Pvt. Ltd.
                         </p>
diff --git a/app/globals.css b/app/globals.css
index e7a18c7..48c9550 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -154,6 +154,7 @@
   --color-sidebar-ring: var(--sidebar-ring);
 }
 
+/* Base styles */
 @layer base {
   * {
     @apply border-border outline-ring/50;
@@ -164,213 +165,31 @@
   }
 }
 
-/* Premium Background with Animated Mesh Gradient */
-@layer utilities {
-  .bg-mesh-gradient {
-    background: #f8fafc;
-  }
-
-  .dark .bg-mesh-gradient {
-    background: hsla(210, 30%, 15%, 1);
-  }
-
-  /* Glassmorphism Card */
-  .glass-card {
-    background: oklch(1 0 0 / 0.7);
-    backdrop-filter: blur(16px);
-    -webkit-backdrop-filter: blur(16px);
-    border: 1px solid oklch(1 0 0 / 0.2);
-    box-shadow:
-      0 4px 6px -1px oklch(0 0 0 / 0.05),
-      0 10px 15px -3px oklch(0 0 0 / 0.08),
-      0 20px 25px -5px oklch(0 0 0 / 0.05),
-      inset 0 1px 0 oklch(1 0 0 / 0.5);
-  }
-
-  .dark .glass-card {
-    background: oklch(0.18 0.02 280 / 0.7);
-    border: 1px solid oklch(1 0 0 / 0.08);
-    box-shadow:
-      0 4px 6px -1px oklch(0 0 0 / 0.15),
-      0 10px 15px -3px oklch(0 0 0 / 0.20),
-      0 20px 25px -5px oklch(0 0 0 / 0.15),
-      inset 0 1px 0 oklch(1 0 0 / 0.05);
-  }
-
-  /* Gradient Text */
-  .text-gradient {
-    background: linear-gradient(135deg, oklch(0.55 0.24 264), oklch(0.60 0.20 200));
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-  }
-
-  .dark .text-gradient {
-    background: linear-gradient(135deg, oklch(0.75 0.20 264), oklch(0.70 0.18 200));
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-  }
-
-  /* Gradient Button */
-  .btn-gradient {
-    background: linear-gradient(135deg, oklch(0.55 0.24 264), oklch(0.50 0.22 280));
-    box-shadow:
-      0 4px 14px 0 oklch(0.55 0.24 264 / 0.35),
-      inset 0 1px 0 oklch(1 0 0 / 0.15);
-    transition: all 0.3s ease;
-  }
-
-  .btn-gradient:hover {
-    box-shadow:
-      0 6px 20px 0 oklch(0.55 0.24 264 / 0.45),
-      inset 0 1px 0 oklch(1 0 0 / 0.2);
-    transform: translateY(-1px);
-  }
-
-  .btn-gradient:active {
-    transform: translateY(0);
-    box-shadow:
-      0 2px 8px 0 oklch(0.55 0.24 264 / 0.30),
-      inset 0 1px 0 oklch(1 0 0 / 0.15);
-  }
-
-  /* Card Glow Border */
-  .card-glow {
-    position: relative;
-  }
-
-  .card-glow::before {
-    content: '';
-    position: absolute;
-    inset: -1px;
-    background: linear-gradient(135deg, oklch(0.55 0.24 264 / 0.3), oklch(0.60 0.20 200 / 0.3));
-    border-radius: inherit;
-    z-index: -1;
-    opacity: 0;
-    transition: opacity 0.3s ease;
-  }
-
-  .card-glow:hover::before {
-    opacity: 1;
-  }
-
-  /* Progress Bar Gradient */
-  .progress-gradient {
-    background: linear-gradient(90deg, oklch(0.55 0.24 264), oklch(0.60 0.20 200), oklch(0.65 0.18 160));
-    background-size: 200% 100%;
-    animation: progress-shimmer 2s ease infinite;
-  }
-
-  @keyframes progress-shimmer {
-    0% {
-      background-position: 200% 0;
-    }
-
-    100% {
-      background-position: -200% 0;
-    }
-  }
-
-  /* Subtle Float Animation */
-  .float-subtle {
-    animation: float-subtle 6s ease-in-out infinite;
-  }
-
-  @keyframes float-subtle {
-
-    0%,
-    100% {
-      transform: translateY(0);
-    }
-
-    50% {
-      transform: translateY(-5px);
-    }
-  }
-
-  /* Input Focus Glow */
-  .input-glow:focus-within {
-    box-shadow: 0 0 0 3px oklch(0.55 0.24 264 / 0.15);
-  }
-
-  /* Step Indicator */
-  .step-active {
-    background: linear-gradient(135deg, oklch(0.55 0.24 264), oklch(0.50 0.22 280));
-    color: white;
-    box-shadow: 0 2px 8px oklch(0.55 0.24 264 / 0.3);
-  }
-
-  .step-completed {
-    background: oklch(0.65 0.18 160);
-    color: white;
-  }
-
-  .step-pending {
-    background: oklch(0.90 0.02 280);
-    color: oklch(0.50 0.02 280);
-  }
-
-  .dark .step-pending {
-    background: oklch(0.25 0.02 280);
-    color: oklch(0.60 0.02 280);
-  }
+/* 
+  Definitive Layout Stability Reset 
+  Prevents Radix UI / Shadcn from "sliding" content when scroll-locking occurs
+*/
+:root {
+  --removed-body-scroll-bar-size: 0px;
 }
 
-@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;
-  }
-
-}
-
-/* Prevent layout shift when Dialog locks body scroll */
 html {
-  overflow-y: scroll;
-  /* always show scrollbar to prevent width jump */
+  scrollbar-gutter: stable;
 }
 
 body[data-scroll-locked] {
-  overflow: hidden;
-  padding-right: var(--removed-body-scroll-bar-size, 0px) !important;
+  padding-right: 0 !important;
+  margin-right: 0 !important;
+  overflow: hidden !important;
+}
+
+/* Fix for fixed position elements like sidebars/headers */
+[data-radix-scroll-area-viewport] {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.static-immediate {
+  transition: none !important;
+  animation: none !important;
 }
\ No newline at end of file
diff --git a/app/layout.tsx b/app/layout.tsx
index de17178..04b372b 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -31,6 +31,9 @@ export const metadata: Metadata = {
   },
 }
 
+import { Toaster } from "@/components/ui/sonner"
+import { TooltipProvider } from "@/components/ui/tooltip"
+
 export default function RootLayout({
   children,
 }: Readonly<{
@@ -39,7 +42,10 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body className={`font-sans antialiased`} suppressHydrationWarning>
-        {children}
+        <TooltipProvider>
+          {children}
+          <Toaster />
+        </TooltipProvider>
         <Analytics />
       </body>
     </html>
diff --git a/app/map/page.tsx b/app/map/page.tsx
index 568ad7d..0e761a5 100644
--- a/app/map/page.tsx
+++ b/app/map/page.tsx
@@ -11,7 +11,7 @@ export default function MapPage() {
 
             <div className="container mx-auto px-4 py-8 max-w-7xl relative z-10">
                 {/* Header */}
-                <div className="mb-8 animate-in fade-in slide-in-from-top duration-700">
+                <div className="mb-8">
                     <div className="flex items-center justify-between">
                         <div>
                             <h1 className="text-3xl md:text-4xl font-bold text-gradient leading-tight">
@@ -25,12 +25,12 @@ export default function MapPage() {
                 </div>
 
                 {/* Map */}
-                <div className="animate-in fade-in slide-in-from-bottom duration-700 delay-100">
+                <div className="">
                     <DashboardMap className="h-[calc(100vh-200px)] min-h-[500px]" />
                 </div>
 
                 {/* Legend */}
-                <div className="mt-6 flex flex-wrap gap-6 animate-in fade-in duration-700 delay-200">
+                <div className="mt-6 flex flex-wrap gap-6">
                     <div className="flex items-center gap-2">
                         <div className="w-4 h-4 rounded-full bg-red-500 border-2 border-red-600" />
                         <span className="text-sm text-muted-foreground">Pothole</span>
@@ -42,7 +42,7 @@ export default function MapPage() {
                 </div>
 
                 {/* Footer */}
-                <div className="mt-8 text-center animate-in fade-in duration-700 delay-300">
+                <div className="mt-8 text-center">
                     <p className="text-sm text-muted-foreground">
                         Sentient Geeks Pvt. Ltd.
                     </p>
diff --git a/app/new-analysis/page.tsx b/app/new-analysis/page.tsx
index 7e880d6..6c7cd7a 100644
--- a/app/new-analysis/page.tsx
+++ b/app/new-analysis/page.tsx
@@ -25,7 +25,7 @@ export default function NewAnalysisPage() {
 
                 <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="mb-8 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">
                             <TrendingUp className="h-8 w-8 text-white" />
                         </div>
@@ -37,12 +37,12 @@ export default function NewAnalysisPage() {
                     </div>
 
                     {/* Project Selection Section */}
-                    <div className="animate-in fade-in slide-in-from-bottom duration-700 delay-150">
+                    <div>
                         <ProjectSelectionSection onSelectionComplete={handleSelectionComplete} />
                     </div>
 
                     {/* Footer */}
-                    <div className="mt-12 text-center animate-in fade-in duration-700 delay-300">
+                    <div className="mt-12 text-center">
                         <p className="text-sm text-gray-400 dark:text-gray-500">
                             Sentient Geeks Pvt. Ltd.
                         </p>
diff --git a/app/results/page.tsx b/app/results/page.tsx
index 2dcaf25..00bb375 100644
--- a/app/results/page.tsx
+++ b/app/results/page.tsx
@@ -16,7 +16,7 @@ import {
 import { getVideoFile, clearVideoFile } from "@/lib/video-storage"
 import { DetectionData, DetectionType } from "@/lib/types"
 
-const API_URL = process.env.NEXT_PUBLIC_API_URL || "http://127.0.0.1:8000/api/v1"
+const API_URL = "http://127.0.0.1:8000/api/v1"
 
 export default function ResultsPage() {
     const router = useRouter()
@@ -126,7 +126,7 @@ export default function ResultsPage() {
             <main className="ml-16 min-h-screen">
                 <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="mb-8 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">
                             <TrendingUp className="h-8 w-8 text-white" />
                         </div>
@@ -142,7 +142,7 @@ export default function ResultsPage() {
 
                     {/* Session Info Bar */}
                     {session && (
-                        <div className="mb-6 animate-in fade-in slide-in-from-top duration-500">
+                        <div className="mb-6">
                             <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-12">
                                     <div className="flex flex-col">
@@ -170,7 +170,7 @@ export default function ResultsPage() {
 
                     {/* Video Player Section */}
                     {detectionData && videoId && (
-                        <div className="animate-in fade-in slide-in-from-bottom duration-700">
+                        <div>
                             <VideoPlayerSection
                                 data={detectionData}
                                 videoId={videoId}
diff --git a/app/upload/page.tsx b/app/upload/page.tsx
index 13ec5be..b4feee2 100644
--- a/app/upload/page.tsx
+++ b/app/upload/page.tsx
@@ -18,8 +18,8 @@ import {
 } from "@/lib/api"
 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"
+const API_URL = "http://127.0.0.1:8000/api/v1"
+const WS_URL = "ws://127.0.0.1:8000/api/v1"
 
 type DetectionType = "pothole-detection" | "sign-board-detection" | "pot-sign-detection"
 
@@ -176,7 +176,7 @@ export default function UploadPage() {
 
                 <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="mb-6 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">
                             <TrendingUp className="h-8 w-8 text-white" />
                         </div>
@@ -189,7 +189,7 @@ export default function UploadPage() {
 
                     {/* Compact Session Info Bar */}
                     {session && (
-                        <div className="mb-4 animate-in fade-in slide-in-from-top duration-500 delay-100">
+                        <div className="mb-4">
                             <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-12">
@@ -226,7 +226,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">
+                    <Card className="rounded-xl overflow-hidden flex-1">
                         <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-blue-600 via-blue-500 to-blue-600 dark:from-blue-400 dark:via-blue-300 dark:to-blue-400  bg-clip-text text-transparent">
@@ -322,7 +322,7 @@ export default function UploadPage() {
 
                             {/* Error Display */}
                             {error && (
-                                <div className="flex items-start gap-2 p-3 rounded-lg bg-red-50 dark:bg-red-950/30 border border-red-200 dark:border-red-800 animate-in fade-in slide-in-from-top duration-300">
+                                <div className="flex items-start gap-2 p-3 rounded-lg bg-red-50 dark:bg-red-950/30 border border-red-200 dark:border-red-800">
                                     <div className="w-4 h-4 rounded-full bg-red-100 dark:bg-red-900/50 flex items-center justify-center flex-shrink-0 mt-0.5">
                                         <span className="text-[10px] font-bold text-red-500">!</span>
                                     </div>
@@ -352,7 +352,7 @@ export default function UploadPage() {
 
                             {/* Progress Section */}
                             {uploading && (
-                                <div className="space-y-3 p-4 rounded-xl bg-blue-50 dark:bg-blue-950/30 border border-blue-200 dark:border-blue-800 animate-in fade-in slide-in-from-top duration-500">
+                                <div className="space-y-3 p-4 rounded-xl bg-blue-50 dark:bg-blue-950/30 border border-blue-200 dark:border-blue-800">
                                     <div className="space-y-2">
                                         <div className="flex items-center justify-between text-sm">
                                             <span className="font-medium text-gray-700 dark:text-gray-300 text-xs">Processing Progress</span>
@@ -374,7 +374,7 @@ export default function UploadPage() {
                     </Card>
 
                     {/* Footer */}
-                    <div className="mt-4 text-center animate-in fade-in duration-700 delay-300">
+                    <div className="mt-4 text-center">
                         <p className="text-xs text-gray-400 dark:text-gray-500">
                             Sentient Geeks Pvt. Ltd.
                         </p>
diff --git a/components/dashboard/dashboard-map-content.tsx b/components/dashboard/dashboard-map-content.tsx
index 788d131..bb071b2 100644
--- a/components/dashboard/dashboard-map-content.tsx
+++ b/components/dashboard/dashboard-map-content.tsx
@@ -73,6 +73,7 @@ export default function DashboardMapContent({ detections }: DashboardMapContentP
             zoom={13}
             className="h-full w-full"
             scrollWheelZoom={true}
+            zoomAnimation={false}
         >
             <TileLayer
                 attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
diff --git a/components/dashboard/dashboard-map.tsx b/components/dashboard/dashboard-map.tsx
index 63308e3..619cedb 100644
--- a/components/dashboard/dashboard-map.tsx
+++ b/components/dashboard/dashboard-map.tsx
@@ -13,7 +13,7 @@ const DashboardMapContent = dynamic(
         ssr: false,
         loading: () => (
             <div className="h-full w-full flex items-center justify-center">
-                <Loader2 className="h-8 w-8 animate-spin text-primary" />
+                <Loader2 className="h-8 w-8 text-primary" />
             </div>
         )
     }
@@ -61,6 +61,7 @@ export function DashboardMap({
                     : (pkg as any).locations || {}
 
                 for (const [locName, loc] of Object.entries(locationsToProcess)) {
+                    if (!loc) continue
                     const locationDetections = (loc as any).detections || []
                     filteredDetections.push(...locationDetections)
                 }
@@ -90,7 +91,7 @@ export function DashboardMap({
             <CardHeader className="pb-2">
                 <div className="flex items-center justify-between">
                     <div className="flex items-center gap-3">
-                        <div className="w-10 h-10 rounded-lg bg-white flex items-center justify-center shadow-lg border-2 border-[#1e40af] transition-transform duration-300 hover:scale-110">
+                        <div className="w-10 h-10 rounded-lg bg-white flex items-center justify-center shadow-lg border-2 border-[#1e40af]">
                             <MapPin className="h-5 w-5 text-[#2563eb]" />
                         </div>
                         <div>
@@ -120,7 +121,7 @@ export function DashboardMap({
                 <div className="h-[400px] w-full relative">
                     {isLoading ? (
                         <div className="h-full w-full flex items-center justify-center bg-gray-50 dark:bg-gray-900/50">
-                            <Loader2 className="h-8 w-8 animate-spin text-indigo-500" />
+                            <Loader2 className="h-8 w-8 text-indigo-500" />
                         </div>
                     ) : error ? (
                         <div className="h-full w-full flex items-center justify-center bg-gray-50 dark:bg-gray-900/50">
diff --git a/components/dashboard/detection-chart.tsx b/components/dashboard/detection-chart.tsx
index bf97433..05c0f85 100644
--- a/components/dashboard/detection-chart.tsx
+++ b/components/dashboard/detection-chart.tsx
@@ -21,7 +21,7 @@ export function DetectionChart({ potholes, signboards, isLoading }: DetectionCha
             <CardContent className="pt-0">
                 {isLoading ? (
                     <div className="flex items-center justify-center h-48">
-                        <div className="w-32 h-32 rounded-full bg-primary/10 animate-pulse" />
+                        <div className="w-32 h-32 rounded-full bg-primary/10" />
                     </div>
                 ) : total === 0 ? (
                     <div className="flex items-center justify-center h-48 text-muted-foreground">
@@ -52,7 +52,7 @@ export function DetectionChart({ potholes, signboards, isLoading }: DetectionCha
                                     strokeWidth="16"
                                     strokeDasharray={`${potholePercent * 2.51} 251`}
                                     strokeLinecap="round"
-                                    className="transition-all duration-700"
+                                    className=""
                                 />
                                 {/* Signboards arc */}
                                 <circle
@@ -62,10 +62,9 @@ export function DetectionChart({ potholes, signboards, isLoading }: DetectionCha
                                     fill="none"
                                     stroke="url(#signboardGradient)"
                                     strokeWidth="16"
-                                    strokeDasharray={`${signboardPercent * 2.51} 251`}
                                     strokeDashoffset={`-${potholePercent * 2.51}`}
                                     strokeLinecap="round"
-                                    className="transition-all duration-700"
+                                    className=""
                                 />
                                 <defs>
                                     <linearGradient id="potholeGradient" x1="0%" y1="0%" x2="100%" y2="0%">
diff --git a/components/dashboard/detection-donut-chart.tsx b/components/dashboard/detection-donut-chart.tsx
index 92f6f6a..aad9038 100644
--- a/components/dashboard/detection-donut-chart.tsx
+++ b/components/dashboard/detection-donut-chart.tsx
@@ -18,7 +18,7 @@ export function DetectionDonutChart({ potholes, signboards, isLoading }: Detecti
     if (isLoading) {
         return (
             <div className="h-[250px] flex items-center justify-center">
-                <Loader2 className="h-8 w-8 animate-spin text-primary/50" />
+                <Loader2 className="h-8 w-8 text-primary/50" />
             </div>
         )
     }
@@ -52,13 +52,14 @@ export function DetectionDonutChart({ potholes, signboards, isLoading }: Detecti
                         paddingAngle={5}
                         dataKey="value"
                         strokeWidth={0}
+                        isAnimationActive={false}
                     >
                         {data.map((entry, index) => (
                             <Cell
                                 key={`cell-${index}`}
                                 fill={entry.color}
-                                fillOpacity={0.8}
-                                className="transition-all duration-300 hover:fill-opacity-100"
+                                fillOpacity={1}
+                                className="hover:fill-opacity-80"
                             />
                         ))}
                     </Pie>
diff --git a/components/dashboard/gradient-stats-card.tsx b/components/dashboard/gradient-stats-card.tsx
index df444f5..23518eb 100644
--- a/components/dashboard/gradient-stats-card.tsx
+++ b/components/dashboard/gradient-stats-card.tsx
@@ -58,7 +58,7 @@ export function GradientStatsCard({
                     </h3>
                     <div className="flex flex-col">
                         {isLoading ? (
-                            <div className="h-14 w-24 bg-gray-100 dark:bg-gray-800 rounded-xl animate-pulse mt-2" />
+                            <div className="h-14 w-24 bg-gray-100 dark:bg-gray-800 rounded-xl mt-2" />
                         ) : (
                             <>
                                 <p className="text-3xl md:text-4xl font-black tracking-tighter leading-tight text-[#1e3a8a]">
diff --git a/components/dashboard/location-bar-chart.tsx b/components/dashboard/location-bar-chart.tsx
index b3280a3..08c94fb 100644
--- a/components/dashboard/location-bar-chart.tsx
+++ b/components/dashboard/location-bar-chart.tsx
@@ -24,7 +24,7 @@ export function LocationBarChart({ data, isLoading }: LocationBarChartProps) {
     if (isLoading) {
         return (
             <div className="h-[300px] flex items-center justify-center">
-                <Loader2 className="h-8 w-8 animate-spin text-primary/50" />
+                <Loader2 className="h-8 w-8 text-primary/50" />
             </div>
         )
     }
@@ -123,12 +123,14 @@ export function LocationBarChart({ data, isLoading }: LocationBarChartProps) {
                         name="Potholes"
                         fill="url(#barGradientPothole)"
                         radius={[4, 4, 0, 0]}
+                        isAnimationActive={false}
                     />
                     <Bar
                         dataKey="signboards"
                         name="Signboards"
                         fill="url(#barGradientSignboard)"
                         radius={[4, 4, 0, 0]}
+                        isAnimationActive={false}
                     />
                 </BarChart>
             </ResponsiveContainer>
diff --git a/components/dashboard/recent-analyses-table.tsx b/components/dashboard/recent-analyses-table.tsx
index ba23925..28a9dd0 100644
--- a/components/dashboard/recent-analyses-table.tsx
+++ b/components/dashboard/recent-analyses-table.tsx
@@ -58,7 +58,7 @@ export function RecentAnalysesTable({ videos, isLoading, onViewResults }: Recent
                 {isLoading ? (
                     <div className="p-6 space-y-3">
                         {[1, 2, 3, 4].map((i) => (
-                            <div key={i} className="h-14 bg-primary/5 rounded-lg animate-pulse" />
+                            <div key={i} className="h-14 bg-primary/5 rounded-lg" />
                         ))}
                     </div>
                 ) : videos.length === 0 ? (
@@ -72,7 +72,7 @@ export function RecentAnalysesTable({ videos, isLoading, onViewResults }: Recent
                         {videos.slice(0, 8).map((video) => (
                             <div
                                 key={video.id}
-                                className="flex items-center justify-between p-4 hover:bg-primary/5 transition-colors"
+                                className="flex items-center justify-between p-4 hover:bg-primary/5"
                             >
                                 <div className="flex items-center gap-4 flex-1 min-w-0">
                                     <div className="flex-1 min-w-0">
diff --git a/components/dashboard/stats-card.tsx b/components/dashboard/stats-card.tsx
index 31728a0..c525bdb 100644
--- a/components/dashboard/stats-card.tsx
+++ b/components/dashboard/stats-card.tsx
@@ -13,7 +13,7 @@ interface StatsCardProps {
 
 export function StatsCard({ title, value, icon: Icon, gradient, isLoading }: StatsCardProps) {
     return (
-        <Card className="glass-card card-glow border-0 overflow-hidden group hover:scale-[1.02] transition-transform duration-300">
+        <Card className="glass-card card-glow border-0 overflow-hidden group">
             <CardContent className="p-5">
                 <div className="flex items-center justify-between">
                     <div className="space-y-1">
@@ -21,14 +21,14 @@ export function StatsCard({ title, value, icon: Icon, gradient, isLoading }: Sta
                             {title}
                         </p>
                         {isLoading ? (
-                            <div className="h-8 w-16 bg-primary/10 rounded animate-pulse" />
+                            <div className="h-8 w-16 bg-primary/10 rounded" />
                         ) : (
                             <p className="text-3xl font-bold text-foreground">
                                 {value}
                             </p>
                         )}
                     </div>
-                    <div className={`p-3 rounded-xl ${gradient} group-hover:scale-110 transition-transform duration-300`}>
+                    <div className={`p-3 rounded-xl ${gradient}`}>
                         <Icon className="h-6 w-6 text-white" />
                     </div>
                 </div>
diff --git a/components/data-table.tsx b/components/data-table.tsx
index 8093433..9eb99c9 100644
--- a/components/data-table.tsx
+++ b/components/data-table.tsx
@@ -1,7 +1,13 @@
 "use client"
 
-import { Plus } from "lucide-react"
+import { Plus, Edit2, Trash2 } from "lucide-react"
 import { Button } from "@/components/ui/button"
+import {
+    Tooltip,
+    TooltipContent,
+    TooltipProvider,
+    TooltipTrigger,
+} from "@/components/ui/tooltip"
 
 interface Column<T> {
     key: string
@@ -16,6 +22,8 @@ interface DataTableProps<T> {
     onAddNew: () => void
     addButtonText: string
     isLoading?: boolean
+    onEdit?: (item: T) => void
+    onDelete?: (item: T) => void
 }
 
 export function DataTable<T extends Record<string, any>>({
@@ -24,8 +32,13 @@ export function DataTable<T extends Record<string, any>>({
     columns,
     onAddNew,
     addButtonText,
-    isLoading = false
+    isLoading = false,
+    onEdit,
+    onDelete
 }: DataTableProps<T>) {
+    const showActions = !!onEdit || !!onDelete;
+    const totalCols = columns.length + (showActions ? 1 : 0);
+
     return (
         <div>
             {/* Header with Title and Add Button */}
@@ -57,12 +70,17 @@ export function DataTable<T extends Record<string, any>>({
                                         {col.header}
                                     </th>
                                 ))}
+                                {showActions && (
+                                    <th className="px-4 py-3 text-right 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)]">
+                                        Actions
+                                    </th>
+                                )}
                             </tr>
                         </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">
+                                    <td colSpan={totalCols} 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>
@@ -71,7 +89,7 @@ export function DataTable<T extends Record<string, any>>({
                                 </tr>
                             ) : data.length === 0 ? (
                                 <tr>
-                                    <td colSpan={columns.length} className="px-4 py-12 text-center">
+                                    <td colSpan={totalCols} 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" />
@@ -92,6 +110,48 @@ export function DataTable<T extends Record<string, any>>({
                                                 {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>
                                         ))}
+                                        {showActions && (
+                                            <td className="px-4 py-3 text-right">
+                                                <div className="flex justify-end gap-2">
+                                                    <TooltipProvider>
+                                                        {onEdit && (
+                                                            <Tooltip>
+                                                                <TooltipTrigger asChild>
+                                                                    <Button
+                                                                        variant="ghost"
+                                                                        size="icon"
+                                                                        onClick={() => onEdit(item)}
+                                                                        className="h-8 w-8 rounded-full bg-amber-100 text-amber-600 hover:bg-amber-600 hover:text-white dark:bg-amber-900/40 dark:text-amber-400 dark:hover:bg-amber-700"
+                                                                    >
+                                                                        <Edit2 className="h-4 w-4" />
+                                                                    </Button>
+                                                                </TooltipTrigger>
+                                                                <TooltipContent side="top">
+                                                                    <p>Edit</p>
+                                                                </TooltipContent>
+                                                            </Tooltip>
+                                                        )}
+                                                        {onDelete && (
+                                                            <Tooltip>
+                                                                <TooltipTrigger asChild>
+                                                                    <Button
+                                                                        variant="ghost"
+                                                                        size="icon"
+                                                                        onClick={() => onDelete(item)}
+                                                                        className="h-8 w-8 rounded-full bg-rose-100 text-rose-600 hover:bg-rose-600 hover:text-white dark:bg-rose-900/40 dark:text-rose-400 dark:hover:bg-rose-700"
+                                                                    >
+                                                                        <Trash2 className="h-4 w-4" />
+                                                                    </Button>
+                                                                </TooltipTrigger>
+                                                                <TooltipContent side="top">
+                                                                    <p>Delete</p>
+                                                                </TooltipContent>
+                                                            </Tooltip>
+                                                        )}
+                                                    </TooltipProvider>
+                                                </div>
+                                            </td>
+                                        )}
                                     </tr>
                                 ))
                             )}
diff --git a/components/project-selection-section.tsx b/components/project-selection-section.tsx
index 99f4449..14d75f8 100644
--- a/components/project-selection-section.tsx
+++ b/components/project-selection-section.tsx
@@ -167,20 +167,20 @@ export function ProjectSelectionSection({ onSelectionComplete }: ProjectSelectio
                                 <div key={step} className="flex items-center">
                                     <div className="flex flex-col items-center">
                                         <div
-                                            className={`w-8 h-8 rounded-full flex items-center justify-center text-sm font-semibold transition-all duration-300 ${status === 'completed' ? 'step-completed' :
-                                                status === 'active' ? 'step-active' :
-                                                    'step-pending'
+                                            className={`w-8 h-8 rounded-full flex items-center justify-center text-sm font-semibold transition-colors ${status === 'completed' ? 'bg-primary text-primary-foreground' :
+                                                status === 'active' ? 'bg-primary text-primary-foreground ring-4 ring-primary/20' :
+                                                    'bg-muted text-muted-foreground'
                                                 }`}
                                         >
                                             {step}
                                         </div>
-                                        <span className={`text-xs mt-1.5 font-medium transition-colors ${status === 'pending' ? 'text-muted-foreground/60' : 'text-foreground'
+                                        <span className={`text-xs mt-1.5 font-medium ${status === 'pending' ? 'text-muted-foreground/60' : 'text-foreground'
                                             }`}>
                                             {labels[index]}
                                         </span>
                                     </div>
                                     {index < 2 && (
-                                        <div className={`w-12 h-0.5 mx-2 mt-[-16px] rounded-full transition-colors duration-300 ${getStepStatus(step + 1) !== 'pending' ? 'bg-primary' : 'bg-border'
+                                        <div className={`w-12 h-0.5 mx-2 mt-[-16px] rounded-full ${getStepStatus(step + 1) !== 'pending' ? 'bg-primary' : 'bg-border'
                                             }`} />
                                     )}
                                 </div>
@@ -193,7 +193,7 @@ export function ProjectSelectionSection({ onSelectionComplete }: ProjectSelectio
             <CardContent className="pt-6 space-y-6">
                 {/* Error Display */}
                 {error && (
-                    <div className="flex items-start gap-3 p-4 rounded-xl bg-destructive/10 border border-destructive/20 text-destructive animate-in fade-in slide-in-from-top duration-300">
+                    <div className="flex items-start gap-3 p-4 rounded-xl bg-destructive/10 border border-destructive/20 text-destructive">
                         <div className="w-5 h-5 rounded-full bg-destructive/20 flex items-center justify-center flex-shrink-0 mt-0.5">
                             <span className="text-xs font-bold">!</span>
                         </div>
@@ -213,7 +213,7 @@ export function ProjectSelectionSection({ onSelectionComplete }: ProjectSelectio
                                 onValueChange={handleProjectChange}
                                 disabled={loadingProjects}
                             >
-                                <SelectTrigger id="project" className="h-12 bg-background/50 border-border/50 hover:border-primary/50 transition-colors">
+                                <SelectTrigger id="project" className="h-12 bg-background/50 border-border/50 hover:border-primary/50">
                                     {loadingProjects ? (
                                         <div className="flex items-center gap-2">
                                             <Loader2 className="h-4 w-4 animate-spin text-primary" />
@@ -245,7 +245,7 @@ export function ProjectSelectionSection({ onSelectionComplete }: ProjectSelectio
                                 onValueChange={handlePackageChange}
                                 disabled={!selectedProject || loadingPackages}
                             >
-                                <SelectTrigger id="package" className="h-12 bg-background/50 border-border/50 hover:border-primary/50 transition-colors">
+                                <SelectTrigger id="package" className="h-12 bg-background/50 border-border/50 hover:border-primary/50">
                                     {loadingPackages ? (
                                         <div className="flex items-center gap-2">
                                             <Loader2 className="h-4 w-4 animate-spin text-primary" />
@@ -277,7 +277,7 @@ export function ProjectSelectionSection({ onSelectionComplete }: ProjectSelectio
                                 onValueChange={handleLocationChange}
                                 disabled={!selectedPackage || loadingLocations}
                             >
-                                <SelectTrigger id="location" className="h-12 bg-background/50 border-border/50 hover:border-primary/50 transition-colors">
+                                <SelectTrigger id="location" className="h-12 bg-background/50 border-border/50 hover:border-primary/50">
                                     {loadingLocations ? (
                                         <div className="flex items-center gap-2">
                                             <Loader2 className="h-4 w-4 animate-spin text-primary" />
@@ -301,7 +301,7 @@ export function ProjectSelectionSection({ onSelectionComplete }: ProjectSelectio
 
                 {/* Selected Summary */}
                 {isComplete && (
-                    <div className="px-4 py-3 rounded-lg bg-primary/5 border border-primary/15 animate-in fade-in slide-in-from-bottom duration-300">
+                    <div className="px-4 py-3 rounded-lg bg-primary/5 border border-primary/15">
                         <p className="text-xs text-muted-foreground flex items-center gap-2 flex-wrap">
                             <span className="font-medium">Path:</span>
                             <span className="text-foreground">{selectedProject?.name}</span>
@@ -317,7 +317,7 @@ export function ProjectSelectionSection({ onSelectionComplete }: ProjectSelectio
                 <Button
                     onClick={handleProceed}
                     disabled={!isComplete}
-                    className={`w-full h-14 text-base font-semibold transition-all rounded-xl ${isComplete ? 'btn-gradient text-white' : ''
+                    className={`w-full h-14 text-base font-semibold rounded-xl ${isComplete ? 'btn-gradient text-white' : ''
                         }`}
                     size="lg"
                 >
diff --git a/components/sidebar-navigation.tsx b/components/sidebar-navigation.tsx
index 56b31c2..779670e 100644
--- a/components/sidebar-navigation.tsx
+++ b/components/sidebar-navigation.tsx
@@ -71,13 +71,12 @@ export function SidebarNavigation() {
                                 className={`
                                     relative w-12 h-12 rounded-xl flex items-center justify-center
                                     ${isActive ? 'bg-[#2563eb] border-[#2563eb] shadow-md' : 'bg-[#f0fafd] border-slate-100'}
-                                    transition-all duration-300 ease-out
-                                    hover:scale-110 hover:shadow-lg hover:bg-[#2563eb] hover:border-[#2563eb]
-                                    active:scale-95 border
+                                    hover:bg-[#2563eb] hover:border-[#2563eb]
+                                    border
                                 `}
                             >
                                 <Icon
-                                    className={`h-6 w-6 transition-all duration-300 ${isActive ? 'text-white' : 'text-slate-900 group-hover:text-white'} stroke-[2.5]`}
+                                    className={`h-6 w-6 ${isActive ? 'text-white' : 'text-slate-900 group-hover:text-white'} stroke-[2.5]`}
                                 />
                             </button>
                             <div className="
@@ -85,7 +84,6 @@ export function SidebarNavigation() {
                                 px-3 py-1.5 rounded-lg
                                 bg-gray-900 dark:bg-gray-700 text-white text-sm font-medium
                                 opacity-0 invisible group-hover:opacity-100 group-hover:visible
-                                transition-all duration-200 ease-out
                                 whitespace-nowrap shadow-lg pointer-events-none
                             ">
                                 {item.title}
@@ -102,13 +100,12 @@ export function SidebarNavigation() {
                         className={`
                             relative w-12 h-12 rounded-xl flex items-center justify-center
                             ${isNewAnalysisActive ? 'bg-[#2563eb] border-[#2563eb] shadow-md' : 'bg-[#f0fafd] border-slate-100'}
-                            transition-all duration-300 ease-out
-                            hover:scale-110 hover:shadow-lg hover:bg-[#2563eb] hover:border-[#2563eb]
-                            active:scale-95 border
+                            hover:bg-[#2563eb] hover:border-[#2563eb]
+                            border
                         `}
                     >
                         <Plus
-                            className={`h-6 w-6 transition-all duration-300 ${isNewAnalysisActive ? 'text-white' : 'text-slate-900 group-hover:text-white'} stroke-[2.5]`}
+                            className={`h-6 w-6 ${isNewAnalysisActive ? 'text-white' : 'text-slate-900 group-hover:text-white'} stroke-[2.5]`}
                         />
                     </button>
                     <div className="
@@ -116,7 +113,6 @@ export function SidebarNavigation() {
                         px-3 py-1.5 rounded-lg
                         bg-gray-900 dark:bg-gray-700 text-white text-sm font-medium
                         opacity-0 invisible group-hover:opacity-100 group-hover:visible
-                        transition-all duration-200 ease-out
                         whitespace-nowrap shadow-lg pointer-events-none
                     ">
                         Start New Analysis
@@ -138,13 +134,12 @@ export function SidebarNavigation() {
                                 className={`
                                     relative w-12 h-12 rounded-xl flex items-center justify-center
                                     ${isActive ? 'bg-[#2563eb] border-[#2563eb] shadow-md' : 'bg-[#f0fafd] border-slate-100'}
-                                    transition-all duration-300 ease-out
-                                    hover:scale-110 hover:shadow-lg hover:bg-[#2563eb] hover:border-[#2563eb]
-                                    active:scale-95 border
+                                    hover:bg-[#2563eb] hover:border-[#2563eb]
+                                    border
                                 `}
                             >
                                 <Icon
-                                    className={`h-6 w-6 transition-all duration-300 ${isActive ? 'text-white' : 'text-slate-900 group-hover:text-white'} stroke-[2.5]`}
+                                    className={`h-6 w-6 ${isActive ? 'text-white' : 'text-slate-900 group-hover:text-white'} stroke-[2.5]`}
                                 />
                             </button>
                             <div className="
@@ -152,7 +147,6 @@ export function SidebarNavigation() {
                                 px-3 py-1.5 rounded-lg
                                 bg-gray-900 dark:bg-gray-700 text-white text-sm font-medium
                                 opacity-0 invisible group-hover:opacity-100 group-hover:visible
-                                transition-all duration-200 ease-out
                                 whitespace-nowrap shadow-lg pointer-events-none
                             ">
                                 {item.title}
@@ -168,17 +162,16 @@ export function SidebarNavigation() {
                 <div className="relative group">
                     <button
                         onClick={() => { }}
-                        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]"
+                        className="w-12 h-12 rounded-full bg-[#f0fafd] flex items-center justify-center cursor-not-allowed opacity-80 border border-slate-100 hover:bg-[#2563eb] hover:border-[#2563eb]"
                         disabled
                     >
-                        <User className="h-6 w-6 text-slate-900 transition-colors duration-300 group-hover:text-white" />
+                        <User className="h-6 w-6 text-slate-900 group-hover:text-white" />
                     </button>
                     <div className="
                         absolute left-full ml-3 top-1/2 -translate-y-1/2
                         px-3 py-1.5 rounded-lg
                         bg-gray-900 dark:bg-gray-700 text-white text-sm font-medium
                         opacity-0 invisible group-hover:opacity-100 group-hover:visible
-                        transition-all duration-200 ease-out
                         whitespace-nowrap shadow-lg pointer-events-none
                     ">
                         Account (Coming Soon)
diff --git a/components/summary-section.tsx b/components/summary-section.tsx
index 4a191b1..c75698d 100644
--- a/components/summary-section.tsx
+++ b/components/summary-section.tsx
@@ -67,10 +67,9 @@ export function SummarySection({ data }: SummarySectionProps) {
             return (
               <div
                 key={stat.label}
-                className="flex flex-col items-center justify-center p-4 rounded-lg transition-all hover:scale-105 animate-in fade-in slide-in-from-bottom duration-500"
-                style={{ animationDelay: `${index * 100}ms` }}
+                className="flex flex-col items-center justify-center p-4 rounded-lg"
               >
-                <div className={`${stat.bgColor} p-3 rounded-full mb-3 transition-all`}>
+                <div className={`${stat.bgColor} p-3 rounded-full mb-3`}>
                   <Icon className={`h-5 w-5 ${stat.color}`} />
                 </div>
                 <div className={`text-3xl font-bold ${stat.color} mb-1`}>{stat.value}</div>
diff --git a/components/ui/accordion.tsx b/components/ui/accordion.tsx
index e538a33..474cb3e 100644
--- a/components/ui/accordion.tsx
+++ b/components/ui/accordion.tsx
@@ -35,13 +35,13 @@ function AccordionTrigger({
       <AccordionPrimitive.Trigger
         data-slot="accordion-trigger"
         className={cn(
-          'focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180',
+          'focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180',
           className,
         )}
         {...props}
       >
         {children}
-        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
+        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 group-data-[state=open]:rotate-180" />
       </AccordionPrimitive.Trigger>
     </AccordionPrimitive.Header>
   )
@@ -55,7 +55,7 @@ function AccordionContent({
   return (
     <AccordionPrimitive.Content
       data-slot="accordion-content"
-      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+      className="overflow-hidden text-sm"
       {...props}
     >
       <div className={cn('pt-0 pb-4', className)}>{children}</div>
diff --git a/components/ui/alert-dialog.tsx b/components/ui/alert-dialog.tsx
index 9704452..389ccc6 100644
--- a/components/ui/alert-dialog.tsx
+++ b/components/ui/alert-dialog.tsx
@@ -36,7 +36,7 @@ function AlertDialogOverlay({
     <AlertDialogPrimitive.Overlay
       data-slot="alert-dialog-overlay"
       className={cn(
-        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
+        'fixed inset-0 z-50 bg-black/50',
         className,
       )}
       {...props}
@@ -54,7 +54,7 @@ function AlertDialogContent({
       <AlertDialogPrimitive.Content
         data-slot="alert-dialog-content"
         className={cn(
-          'bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
+          'bg-background fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg sm:max-w-lg',
           className,
         )}
         {...props}
diff --git a/components/ui/breadcrumb.tsx b/components/ui/breadcrumb.tsx
index 1750ff2..6af9eae 100644
--- a/components/ui/breadcrumb.tsx
+++ b/components/ui/breadcrumb.tsx
@@ -43,7 +43,7 @@ function BreadcrumbLink({
   return (
     <Comp
       data-slot="breadcrumb-link"
-      className={cn('hover:text-foreground transition-colors', className)}
+      className={cn('hover:text-foreground', className)}
       {...props}
     />
   )
diff --git a/components/ui/button.tsx b/components/ui/button.tsx
index 3166550..5e8cb16 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-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",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-full text-sm font-medium 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: {
diff --git a/components/ui/card.tsx b/components/ui/card.tsx
index 5c564bc..0dcb2c1 100644
--- a/components/ui/card.tsx
+++ b/components/ui/card.tsx
@@ -7,7 +7,7 @@ function Card({ className, ...props }: React.ComponentProps<'div'>) {
     <div
       data-slot="card"
       className={cn(
-        'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm transition-all duration-300 hover:shadow-md hover:border-[var(--card-hover-border)] hover:shadow-[var(--card-glow)] hover:-translate-y-0.5',
+        'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm hover:shadow-md hover:border-[var(--card-hover-border)] hover:shadow-[var(--card-glow)]',
         className,
       )}
       {...props}
diff --git a/components/ui/context-menu.tsx b/components/ui/context-menu.tsx
index 9e536f2..a8c5157 100644
--- a/components/ui/context-menu.tsx
+++ b/components/ui/context-menu.tsx
@@ -85,7 +85,7 @@ function ContextMenuSubContent({
     <ContextMenuPrimitive.SubContent
       data-slot="context-menu-sub-content"
       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 z-50 min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
+        'bg-popover text-popover-foreground z-50 min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
         className,
       )}
       {...props}
@@ -102,7 +102,7 @@ function ContextMenuContent({
       <ContextMenuPrimitive.Content
         data-slot="context-menu-content"
         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 z-50 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
+          'bg-popover text-popover-foreground z-50 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
           className,
         )}
         {...props}
diff --git a/components/ui/dialog.tsx b/components/ui/dialog.tsx
index 243fb19..d0e2f4e 100644
--- a/components/ui/dialog.tsx
+++ b/components/ui/dialog.tsx
@@ -38,7 +38,7 @@ function DialogOverlay({
     <DialogPrimitive.Overlay
       data-slot="dialog-overlay"
       className={cn(
-        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
+        'fixed inset-0 z-50 bg-black/50',
         className,
       )}
       {...props}
@@ -60,7 +60,7 @@ function DialogContent({
       <DialogPrimitive.Content
         data-slot="dialog-content"
         className={cn(
-          'bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
+          'bg-background fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg sm:max-w-lg',
           className,
         )}
         {...props}
@@ -69,7 +69,7 @@ function DialogContent({
         {showCloseButton && (
           <DialogPrimitive.Close
             data-slot="dialog-close"
-            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
           >
             <XIcon />
             <span className="sr-only">Close</span>
diff --git a/components/ui/drawer.tsx b/components/ui/drawer.tsx
index 307bdce..180377a 100644
--- a/components/ui/drawer.tsx
+++ b/components/ui/drawer.tsx
@@ -37,7 +37,7 @@ function DrawerOverlay({
     <DrawerPrimitive.Overlay
       data-slot="drawer-overlay"
       className={cn(
-        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
+        'fixed inset-0 z-50 bg-black/50',
         className,
       )}
       {...props}
diff --git a/components/ui/dropdown-menu.tsx b/components/ui/dropdown-menu.tsx
index a2096fa..2fd588e 100644
--- a/components/ui/dropdown-menu.tsx
+++ b/components/ui/dropdown-menu.tsx
@@ -42,7 +42,7 @@ function DropdownMenuContent({
         data-slot="dropdown-menu-content"
         sideOffset={sideOffset}
         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 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
+          'bg-popover text-popover-foreground z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
           className,
         )}
         {...props}
@@ -230,7 +230,7 @@ function DropdownMenuSubContent({
     <DropdownMenuPrimitive.SubContent
       data-slot="dropdown-menu-sub-content"
       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 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
+        'bg-popover text-popover-foreground z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
         className,
       )}
       {...props}
diff --git a/components/ui/hover-card.tsx b/components/ui/hover-card.tsx
index 55d6f76..b0f253b 100644
--- a/components/ui/hover-card.tsx
+++ b/components/ui/hover-card.tsx
@@ -32,7 +32,7 @@ function HoverCardContent({
         align={align}
         sideOffset={sideOffset}
         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 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden',
+          'bg-popover text-popover-foreground z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden',
           className,
         )}
         {...props}
diff --git a/components/ui/input-otp.tsx b/components/ui/input-otp.tsx
index 3f6c477..a6dac44 100644
--- a/components/ui/input-otp.tsx
+++ b/components/ui/input-otp.tsx
@@ -51,7 +51,7 @@ function InputOTPSlot({
       data-slot="input-otp-slot"
       data-active={isActive}
       className={cn(
-        'data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]',
+        'data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-xs outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]',
         className,
       )}
       {...props}
@@ -59,7 +59,7 @@ function InputOTPSlot({
       {char}
       {hasFakeCaret && (
         <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
-          <div className="animate-caret-blink bg-foreground h-4 w-px duration-1000" />
+          <div className="bg-foreground h-4 w-px" />
         </div>
       )}
     </div>
diff --git a/components/ui/menubar.tsx b/components/ui/menubar.tsx
index 791360c..d692e15 100644
--- a/components/ui/menubar.tsx
+++ b/components/ui/menubar.tsx
@@ -79,7 +79,7 @@ function MenubarContent({
         alignOffset={alignOffset}
         sideOffset={sideOffset}
         className={cn(
-          'bg-popover text-popover-foreground data-[state=open]:animate-in 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 z-50 min-w-[12rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-md',
+          'bg-popover text-popover-foreground z-50 min-w-[12rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-md',
           className,
         )}
         {...props}
@@ -248,7 +248,7 @@ function MenubarSubContent({
     <MenubarPrimitive.SubContent
       data-slot="menubar-sub-content"
       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 z-50 min-w-[8rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
+        'bg-popover text-popover-foreground z-50 min-w-[8rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
         className,
       )}
       {...props}
diff --git a/components/ui/navigation-menu.tsx b/components/ui/navigation-menu.tsx
index 53e7543..a7fd5f6 100644
--- a/components/ui/navigation-menu.tsx
+++ b/components/ui/navigation-menu.tsx
@@ -59,7 +59,7 @@ function NavigationMenuItem({
 }
 
 const navigationMenuTriggerStyle = cva(
-  'group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1',
+  'group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none focus-visible:ring-[3px] focus-visible:outline-1',
 )
 
 function NavigationMenuTrigger({
@@ -75,7 +75,7 @@ function NavigationMenuTrigger({
     >
       {children}{' '}
       <ChevronDownIcon
-        className="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
+        className="relative top-[1px] ml-1 size-3 group-data-[state=open]:rotate-180"
         aria-hidden="true"
       />
     </NavigationMenuPrimitive.Trigger>
@@ -90,8 +90,8 @@ function NavigationMenuContent({
     <NavigationMenuPrimitive.Content
       data-slot="navigation-menu-content"
       className={cn(
-        'data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto',
-        'group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none',
+        'top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto',
+        'group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none',
         className,
       )}
       {...props}
@@ -110,7 +110,7 @@ function NavigationMenuViewport({
       <NavigationMenuPrimitive.Viewport
         data-slot="navigation-menu-viewport"
         className={cn(
-          'origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]',
+          'origin-top-center bg-popover text-popover-foreground relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]',
           className,
         )}
         {...props}
@@ -127,7 +127,7 @@ function NavigationMenuLink({
     <NavigationMenuPrimitive.Link
       data-slot="navigation-menu-link"
       className={cn(
-        "data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
+        "data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
         className,
       )}
       {...props}
@@ -143,7 +143,7 @@ function NavigationMenuIndicator({
     <NavigationMenuPrimitive.Indicator
       data-slot="navigation-menu-indicator"
       className={cn(
-        'data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden',
+        'top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden',
         className,
       )}
       {...props}
diff --git a/components/ui/popover.tsx b/components/ui/popover.tsx
index b4fc827..0a1a378 100644
--- a/components/ui/popover.tsx
+++ b/components/ui/popover.tsx
@@ -30,7 +30,7 @@ function PopoverContent({
         align={align}
         sideOffset={sideOffset}
         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 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden',
+          'bg-popover text-popover-foreground z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden',
           className,
         )}
         {...props}
diff --git a/components/ui/progress.tsx b/components/ui/progress.tsx
index ab38305..7f0c1e7 100644
--- a/components/ui/progress.tsx
+++ b/components/ui/progress.tsx
@@ -21,7 +21,7 @@ function Progress({
     >
       <ProgressPrimitive.Indicator
         data-slot="progress-indicator"
-        className="bg-primary h-full w-full flex-1 transition-all"
+        className="bg-primary h-full w-full flex-1"
         style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
       />
     </ProgressPrimitive.Root>
diff --git a/components/ui/scroll-area.tsx b/components/ui/scroll-area.tsx
index dc98eb0..db7e9c5 100644
--- a/components/ui/scroll-area.tsx
+++ b/components/ui/scroll-area.tsx
@@ -18,7 +18,7 @@ function ScrollArea({
     >
       <ScrollAreaPrimitive.Viewport
         data-slot="scroll-area-viewport"
-        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+        className="focus-visible:ring-ring/50 size-full rounded-[inherit] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
       >
         {children}
       </ScrollAreaPrimitive.Viewport>
@@ -38,11 +38,11 @@ function ScrollBar({
       data-slot="scroll-area-scrollbar"
       orientation={orientation}
       className={cn(
-        'flex touch-none p-px transition-colors select-none',
+        'flex touch-none p-px select-none',
         orientation === 'vertical' &&
-          'h-full w-2.5 border-l border-l-transparent',
+        'h-full w-2.5 border-l border-l-transparent',
         orientation === 'horizontal' &&
-          'h-2.5 flex-col border-t border-t-transparent',
+        'h-2.5 flex-col border-t border-t-transparent',
         className,
       )}
       {...props}
diff --git a/components/ui/select.tsx b/components/ui/select.tsx
index 773b75a..5d1816f 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-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",
+        "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 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}
@@ -61,7 +61,7 @@ function SelectContent({
       <SelectPrimitive.Content
         data-slot="select-content"
         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',
+          'bg-popover text-popover-foreground 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',
           className,
diff --git a/components/ui/sheet.tsx b/components/ui/sheet.tsx
index 51041fa..5122115 100644
--- a/components/ui/sheet.tsx
+++ b/components/ui/sheet.tsx
@@ -36,7 +36,7 @@ function SheetOverlay({
     <SheetPrimitive.Overlay
       data-slot="sheet-overlay"
       className={cn(
-        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
+        'fixed inset-0 z-50 bg-black/50',
         className,
       )}
       {...props}
@@ -58,15 +58,15 @@ function SheetContent({
       <SheetPrimitive.Content
         data-slot="sheet-content"
         className={cn(
-          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
+          'bg-background fixed z-50 flex flex-col gap-4 shadow-lg',
           side === 'right' &&
-            'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm',
+          'inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm',
           side === 'left' &&
-            'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',
+          'inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',
           side === 'top' &&
-            'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b',
+          'inset-x-0 top-0 h-auto border-b',
           side === 'bottom' &&
-            'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t',
+          'inset-x-0 bottom-0 h-auto border-t',
           className,
         )}
         {...props}
diff --git a/components/ui/sidebar.tsx b/components/ui/sidebar.tsx
index ee74343..97086f7 100644
--- a/components/ui/sidebar.tsx
+++ b/components/ui/sidebar.tsx
@@ -218,7 +218,7 @@ function Sidebar({
       <div
         data-slot="sidebar-gap"
         className={cn(
-          'relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear',
+          'relative w-(--sidebar-width) bg-transparent',
           'group-data-[collapsible=offcanvas]:w-0',
           'group-data-[side=right]:rotate-180',
           variant === 'floating' || variant === 'inset'
@@ -229,7 +229,7 @@ function Sidebar({
       <div
         data-slot="sidebar-container"
         className={cn(
-          'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex',
+          'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) md:flex',
           side === 'left'
             ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
             : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
@@ -291,7 +291,7 @@ function SidebarRail({ className, ...props }: React.ComponentProps<'button'>) {
       onClick={toggleSidebar}
       title="Toggle Sidebar"
       className={cn(
-        'hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex',
+        'hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex',
         'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',
         '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
         'hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full',
@@ -405,7 +405,7 @@ function SidebarGroupLabel({
       data-slot="sidebar-group-label"
       data-sidebar="group-label"
       className={cn(
-        'text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+        'text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
         'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',
         className,
       )}
@@ -426,7 +426,7 @@ function SidebarGroupAction({
       data-slot="sidebar-group-action"
       data-sidebar="group-action"
       className={cn(
-        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
         // Increases the hit area of the button on mobile.
         'after:absolute after:-inset-2 md:after:hidden',
         'group-data-[collapsible=icon]:hidden',
@@ -474,7 +474,7 @@ function SidebarMenuItem({ className, ...props }: React.ComponentProps<'li'>) {
 }
 
 const sidebarMenuButtonVariants = cva(
-  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
+  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
   {
     variants: {
       variant: {
@@ -561,7 +561,7 @@ function SidebarMenuAction({
       data-slot="sidebar-menu-action"
       data-sidebar="menu-action"
       className={cn(
-        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
         // Increases the hit area of the button on mobile.
         'after:absolute after:-inset-2 md:after:hidden',
         'peer-data-[size=sm]/menu-button:top-1',
@@ -569,7 +569,7 @@ function SidebarMenuAction({
         'peer-data-[size=lg]/menu-button:top-2.5',
         'group-data-[collapsible=icon]:hidden',
         showOnHover &&
-          'peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0',
+        'peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0',
         className,
       )}
       {...props}
diff --git a/components/ui/switch.tsx b/components/ui/switch.tsx
index 3c4cfa3..32d5cc0 100644
--- a/components/ui/switch.tsx
+++ b/components/ui/switch.tsx
@@ -13,7 +13,7 @@ function Switch({
     <SwitchPrimitive.Root
       data-slot="switch"
       className={cn(
-        'peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+        'peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
         className,
       )}
       {...props}
@@ -21,7 +21,7 @@ function Switch({
       <SwitchPrimitive.Thumb
         data-slot="switch-thumb"
         className={
-          'bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0'
+          'bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0'
         }
       />
     </SwitchPrimitive.Root>
diff --git a/components/ui/table.tsx b/components/ui/table.tsx
index fcdd10c..35f0b76 100644
--- a/components/ui/table.tsx
+++ b/components/ui/table.tsx
@@ -57,7 +57,7 @@ function TableRow({ className, ...props }: React.ComponentProps<'tr'>) {
     <tr
       data-slot="table-row"
       className={cn(
-        'hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors',
+        'hover:bg-muted/50 data-[state=selected]:bg-muted border-b',
         className,
       )}
       {...props}
diff --git a/components/ui/toast.tsx b/components/ui/toast.tsx
index 40eedf5..df47800 100644
--- a/components/ui/toast.tsx
+++ b/components/ui/toast.tsx
@@ -25,7 +25,7 @@ const ToastViewport = React.forwardRef<
 ToastViewport.displayName = ToastPrimitives.Viewport.displayName
 
 const toastVariants = cva(
-  'group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',
+  'group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)]',
   {
     variants: {
       variant: {
@@ -43,7 +43,7 @@ const toastVariants = cva(
 const Toast = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Root>,
   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
-    VariantProps<typeof toastVariants>
+  VariantProps<typeof toastVariants>
 >(({ className, variant, ...props }, ref) => {
   return (
     <ToastPrimitives.Root
diff --git a/components/ui/tooltip.tsx b/components/ui/tooltip.tsx
index 877239c..a91b378 100644
--- a/components/ui/tooltip.tsx
+++ b/components/ui/tooltip.tsx
@@ -46,7 +46,7 @@ function TooltipContent({
         data-slot="tooltip-content"
         sideOffset={sideOffset}
         className={cn(
-          'bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance',
+          'bg-foreground text-background z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance',
           className,
         )}
         {...props}
diff --git a/components/upload-section.tsx b/components/upload-section.tsx
index 2208c03..f3c779b 100644
--- a/components/upload-section.tsx
+++ b/components/upload-section.tsx
@@ -10,8 +10,8 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@
 import { Upload, Loader2, AlertCircle } from "lucide-react"
 import type { DetectionData, DetectionType } from "@/lib/types"
 
-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"
+const API_URL = "http://127.0.0.1:8000/api/v1"
+const WS_URL = "ws://127.0.0.1:8000/api/v1"
 
 
 type UploadSectionProps = {
@@ -198,7 +198,7 @@ export function UploadSection({ onDetectionComplete, onDetectionTypeChange }: Up
   }
 
   return (
-    <Card className="transition-all hover:shadow-lg">
+    <Card className="">
       <CardHeader>
         <CardTitle>Upload Video</CardTitle>
         <CardDescription>
@@ -303,7 +303,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 animate-in fade-in slide-in-from-top duration-300">
+          <div className="flex items-start gap-2 p-3 rounded-lg bg-destructive/10 text-destructive">
             <AlertCircle className="h-5 w-5 mt-0.5 flex-shrink-0" />
             <p className="text-sm whitespace-pre-line">{error}</p>
           </div>
@@ -313,7 +313,7 @@ export function UploadSection({ onDetectionComplete, onDetectionTypeChange }: Up
         <Button
           onClick={handleUpload}
           disabled={!file || uploading}
-          className="w-full transition-all bg-blue-600 hover:bg-blue-700 text-white shadow-lg shadow-blue-500/25"
+          className="w-full bg-blue-600 hover:bg-blue-700 text-white shadow-lg shadow-blue-500/25"
 
           size="lg"
         >
@@ -332,8 +332,8 @@ export function UploadSection({ onDetectionComplete, onDetectionTypeChange }: Up
 
         {/* Progress Section */}
         {uploading && (
-          <div className="space-y-3 animate-in fade-in slide-in-from-top duration-500">
-            <Progress value={progress} className="h-3 transition-all duration-300" />
+          <div className="space-y-3">
+            <Progress value={progress} className="h-3" />
             <div className="flex items-center justify-between text-sm">
               <span className="text-muted-foreground">{statusMessage}</span>
               <span className="font-semibold">{progress}%</span>
diff --git a/components/video-player-section.tsx b/components/video-player-section.tsx
index 24c0b06..56dd8e9 100644
--- a/components/video-player-section.tsx
+++ b/components/video-player-section.tsx
@@ -13,7 +13,7 @@ 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"
+const API_URL = "http://127.0.0.1:8000/api/v1"
 
 
 
@@ -144,9 +144,9 @@ function DetailedSummarySection({
           <div className="flex items-center justify-between">
             <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">
+                <div className="absolute inset-0 bg-white/20 opacity-50"></div>
+                <div className="absolute inset-0 border-2 border-white/30 rounded-xl 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">
                   <path d="M50 20L85 80H15L50 20Z" stroke="currentColor" strokeWidth="6" strokeLinejoin="round" />
                   <path d="M40 80L50 55L60 80" stroke="currentColor" strokeWidth="6" />
                 </svg>
@@ -217,8 +217,8 @@ function DetailedSummarySection({
         <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">
+              <div className="absolute inset-0 bg-white/10 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">
                 <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>
@@ -335,12 +335,12 @@ function SummarySection({ data, show, detectionType }: { data: DetectionData; sh
   ]
 
   return (
-    <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">
+    <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">
       <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">
+            <div className="absolute inset-0 bg-white/10 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">
               <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>
@@ -362,8 +362,7 @@ function SummarySection({ data, show, detectionType }: { data: DetectionData; sh
             return (
               <div
                 key={stat.label}
-                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` }}
+                className="flex flex-col items-center justify-center p-3 rounded-xl 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"
               >
                 <div className={`${stat.bgColor} p-3 rounded-lg mb-2 transition-all shadow-inner`}>
                   <Icon className={`h-6 w-6 ${stat.color}`} />
diff --git a/lib/api.ts b/lib/api.ts
index 403616a..2b9c302 100644
--- a/lib/api.ts
+++ b/lib/api.ts
@@ -3,7 +3,7 @@
  * Provides typed functions for interacting with the backend API
  */
 
-const API_URL = process.env.NEXT_PUBLIC_API_URL || "http://127.0.0.1:8000/api/v1"
+const API_URL = "http://127.0.0.1:8000/api/v1"
 
 // Type definitions
 export interface Project {
@@ -105,6 +105,73 @@ export interface LocationCreate {
     end_lng: number
 }
 
+// Update request body types
+export interface ProjectUpdate {
+    name?: string
+    state?: string | null
+    corridor_name?: string | null
+    start_lat?: number | null
+    start_lng?: number | null
+    end_lat?: number | null
+    end_lng?: number | null
+}
+
+export interface PackageUpdate {
+    name?: string
+    region?: string | null
+}
+
+export interface LocationUpdate {
+    segment_name?: string
+    chainage_start_km?: number | null
+    chainage_end_km?: number | null
+    start_lat?: number
+    start_lng?: number
+    end_lat?: number
+    end_lng?: number
+}
+
+// Helper function for PUT API requests
+async function apiPutRequest<T>(endpoint: string, body: unknown): Promise<T> {
+    const response = await fetch(`${API_URL}${endpoint}`, {
+        method: "PUT",
+        headers: {
+            "Content-Type": "application/json",
+            "ngrok-skip-browser-warning": "true"
+        },
+        body: JSON.stringify(body)
+    })
+
+    if (!response.ok) {
+        const errorText = await response.text()
+        throw new Error(`API Error: ${response.status} - ${errorText}`)
+    }
+
+    return response.json()
+}
+
+// Helper function for DELETE API requests
+async function apiDeleteRequest<T>(endpoint: string): Promise<T> {
+    const response = await fetch(`${API_URL}${endpoint}`, {
+        method: "DELETE",
+        headers: {
+            "Content-Type": "application/json",
+            "ngrok-skip-browser-warning": "true"
+        }
+    })
+
+    if (!response.ok) {
+        const errorText = await response.text()
+        throw new Error(`API Error: ${response.status} - ${errorText}`)
+    }
+
+    if (response.status === 204) {
+        return { message: "Deleted successfully" } as unknown as T
+    }
+
+    return response.json()
+}
+
 /**
  * Create a new project
  */
@@ -126,6 +193,48 @@ export async function createLocation(data: LocationCreate): Promise<Location> {
     return apiPostRequest<Location>("/locations/", data)
 }
 
+/**
+ * Update an existing project
+ */
+export async function updateProject(projectId: string, data: ProjectUpdate): Promise<Project> {
+    return apiPutRequest<Project>(`/projects/${projectId}`, data)
+}
+
+/**
+ * Delete a project
+ */
+export async function deleteProject(projectId: string): Promise<{ message: string }> {
+    return apiDeleteRequest<{ message: string }>(`/projects/${projectId}`)
+}
+
+/**
+ * Update an existing package
+ */
+export async function updatePackage(packageId: string, data: PackageUpdate): Promise<Package> {
+    return apiPutRequest<Package>(`/packages/${packageId}`, data)
+}
+
+/**
+ * Delete a package
+ */
+export async function deletePackage(packageId: string): Promise<{ message: string }> {
+    return apiDeleteRequest<{ message: string }>(`/packages/${packageId}`)
+}
+
+/**
+ * Update an existing location
+ */
+export async function updateLocation(locationId: string, data: LocationUpdate): Promise<Location> {
+    return apiPutRequest<Location>(`/locations/${locationId}`, data)
+}
+
+/**
+ * Delete a location
+ */
+export async function deleteLocation(locationId: string): Promise<{ message: string }> {
+    return apiDeleteRequest<{ message: string }>(`/locations/${locationId}`)
+}
+
 // API Functions
 
 /**