diff --git a/app/create-location/page.tsx b/app/create-location/page.tsx
index 3d077ed..f6da14f 100644
--- a/app/create-location/page.tsx
+++ b/app/create-location/page.tsx
@@ -591,7 +591,7 @@ export default function CreateLocationPage() {
                             <Button
                                 type="submit"
                                 disabled={isSubmitting || !isFormComplete}
-                                className="flex-1 bg-gradient-to-r from-blue-500 via-indigo-500 to-blue-600 hover:from-blue-600 hover:via-indigo-600 hover:to-blue-700 text-white"
+                                className="flex-1 btn-blue-gradient"
                             >
                                 {isSubmitting ? (
                                     <span className="flex items-center gap-2">
diff --git a/app/create-package/page.tsx b/app/create-package/page.tsx
index e9d51d4..a9842f8 100644
--- a/app/create-package/page.tsx
+++ b/app/create-package/page.tsx
@@ -373,7 +373,7 @@ export default function CreatePackagePage() {
                             <Button
                                 type="submit"
                                 disabled={isSubmitting || !name.trim() || !selectedProjectId}
-                                className="flex-1 bg-gradient-to-r from-blue-500 via-indigo-500 to-blue-600 hover:from-blue-600 hover:via-indigo-600 hover:to-blue-700 text-white"
+                                className="flex-1 btn-blue-gradient text-white"
                             >
                                 {isSubmitting ? (
                                     <span className="flex items-center gap-2">
diff --git a/app/upload/[videoId]/page.tsx b/app/upload/[videoId]/page.tsx
index 4511aba..c5e5ca3 100644
--- a/app/upload/[videoId]/page.tsx
+++ b/app/upload/[videoId]/page.tsx
@@ -143,7 +143,7 @@ export default function VideoProcessingPage() {
 
                     {session && (
                         <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="rounded-md px-4 py-3 bg-white/60 backdrop-blur-sm">
                                 <div className="flex items-center gap-12">
                                     <div className="flex flex-col">
                                         <span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground leading-none mb-1.5">Project</span>
diff --git a/app/upload/page.tsx b/app/upload/page.tsx
index 955c04d..0218bad 100644
--- a/app/upload/page.tsx
+++ b/app/upload/page.tsx
@@ -161,7 +161,7 @@ export default function UploadPage() {
                     {/* Compact Session Info Bar */}
                     {session && (
                         <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="rounded-md px-4 py-3 bg-white/60 backdrop-blur-sm ">
                                 <div className="flex items-center justify-between gap-4">
                                     <div className="flex items-center gap-12">
                                         <div className="flex flex-col">
@@ -186,7 +186,7 @@ export default function UploadPage() {
                                     <Button
                                         size="sm"
                                         onClick={handleBackToSelection}
-                                        className="bg-blue-600 hover:bg-blue-700 text-white text-xs"
+                                        className="btn-blue-gradient"
                                     >
                                         Change Selection
                                     </Button>
@@ -197,10 +197,10 @@ export default function UploadPage() {
                     )}
 
                     {/* Upload Card */}
-                    <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">
+                    <Card className="bg-white/60 backdrop-blur-md rounded-xl overflow-hidden flex-1">
+                        <CardHeader className="pb-4 ">
                             <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">
+                                <span className="heading-gradient">
                                     Upload Video
                                 </span>
                             </CardTitle>
@@ -338,8 +338,8 @@ export default function UploadPage() {
                             <Button
                                 onClick={handleUpload}
                                 disabled={!file || uploading}
-                                className={`w-full h-12 text-sm font-semibold transition-all rounded-xl ${file && !uploading
-                                    ? 'bg-gradient-to-r from-blue-500 to-blue-700 hover:from-blue-600 hover:to-blue-800 text-white shadow-lg shadow-blue-500/25'
+                                className={`w-full h-12 text-sm font-semibold transition-all rounded-full ${file && !uploading
+                                    ? 'btn-blue-gradient'
                                     : ''
                                     }`}
                                 size="lg"
diff --git a/components/project-selection-section.tsx b/components/project-selection-section.tsx
index 14d75f8..856c9e8 100644
--- a/components/project-selection-section.tsx
+++ b/components/project-selection-section.tsx
@@ -148,8 +148,8 @@ export function ProjectSelectionSection({ onSelectionComplete }: ProjectSelectio
     }
 
     return (
-        <Card className="bg-white dark:bg-gray-900 border border-gray-100 dark:border-gray-800 shadow-xl shadow-blue-500/5 overflow-hidden">
-            <CardHeader className="pb-6 border-b border-gray-100 dark:border-gray-800 bg-white dark:bg-gray-900">
+        <Card className="bg-white/40 backdrop-blur-sm  overflow-hidden">
+            <CardHeader className="pb-6">
                 <div className="flex flex-col gap-4">
                     <div>
                         <CardTitle className="text-2xl font-semibold">Select Project Location</CardTitle>
@@ -167,8 +167,8 @@ 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-colors ${status === 'completed' ? 'bg-primary text-primary-foreground' :
-                                                status === 'active' ? 'bg-primary text-primary-foreground ring-4 ring-primary/20' :
+                                            className={`w-8 h-8 rounded-full flex items-center justify-center text-sm font-semibold transition-colors ${status === 'completed' ? 'bg-linear-to-b from-[#225999] to-[#56A5FF] text-primary-foreground' :
+                                                status === 'active' ? 'bg-linear-to-b from-[#225999] to-[#56A5FF] text-primary-foreground ring-4 ring-primary/20' :
                                                     'bg-muted text-muted-foreground'
                                                 }`}
                                         >
@@ -180,7 +180,7 @@ export function ProjectSelectionSection({ onSelectionComplete }: ProjectSelectio
                                         </span>
                                     </div>
                                     {index < 2 && (
-                                        <div className={`w-12 h-0.5 mx-2 mt-[-16px] rounded-full ${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-linear-to-b from-[#225999] to-[#56A5FF]' : 'bg-border'
                                             }`} />
                                     )}
                                 </div>
@@ -317,7 +317,7 @@ export function ProjectSelectionSection({ onSelectionComplete }: ProjectSelectio
                 <Button
                     onClick={handleProceed}
                     disabled={!isComplete}
-                    className={`w-full h-14 text-base font-semibold rounded-xl ${isComplete ? 'btn-gradient text-white' : ''
+                    className={`w-full h-14 text-base font-semibold ${isComplete ? 'btn-blue-gradient text-white' : ''
                         }`}
                     size="lg"
                 >
diff --git a/components/upload-section.tsx b/components/upload-section.tsx
index 29abc2a..eb1993e 100644
--- a/components/upload-section.tsx
+++ b/components/upload-section.tsx
@@ -200,7 +200,7 @@ export function UploadSection({ onDetectionComplete, onDetectionTypeChange }: Up
   }
 
   return (
-    <Card className="">
+    <Card className="bg-white/20 backdrop-blur-md">
       <CardHeader>
         <CardTitle>Upload Video</CardTitle>
         <CardDescription>
@@ -356,7 +356,7 @@ export function UploadSection({ onDetectionComplete, onDetectionTypeChange }: Up
         <Button
           onClick={handleUpload}
           disabled={!file || uploading}
-          className="w-full bg-blue-600 hover:bg-blue-700 text-white shadow-lg shadow-blue-500/25"
+          className="w-full btn-blue-gradient rounded-full"
 
           size="lg"
         >