diff --git a/frontend/src/components/CinePromptStudio.jsx b/frontend/src/components/CinePromptStudio.jsx
index 964ec19..a1f9287 100644
--- a/frontend/src/components/CinePromptStudio.jsx
+++ b/frontend/src/components/CinePromptStudio.jsx
@@ -1586,7 +1586,7 @@ Return ONLY the final prompt text. No markdown, no preamble, no "Here is your pr
                       onClick={() => setAspectRatio(ratio)}
                       className={`px-4 py-2 rounded font-normal transition-all ${
                         aspectRatio === ratio
-                          ? 'bg-cinema-gold text-slate-950'
+                          ? 'bg-slate-200 text-slate-950'
                           : 'bg-slate-800 text-slate-400 hover:bg-slate-700'
                       }`}
                     >
@@ -1858,7 +1858,7 @@ Return ONLY the final prompt text. No markdown, no preamble, no "Here is your pr
                       onClick={() => setImageModelType(opt.value)}
                       className={`flex-1 px-3 py-2 rounded font-normal transition-all text-sm ${
                         imageModelType === opt.value
-                          ? 'bg-cinema-gold text-slate-950'
+                          ? 'bg-slate-200 text-slate-950'
                           : 'bg-slate-800 text-slate-400 hover:bg-slate-700'
                       }`}
                     >
@@ -1879,7 +1879,7 @@ Return ONLY the final prompt text. No markdown, no preamble, no "Here is your pr
                       onClick={() => setImageResolution(res)}
                       className={`px-4 py-2 rounded text-sm font-normal transition-all ${
                         imageResolution === res
-                          ? 'bg-cinema-gold text-slate-950'
+                          ? 'bg-slate-200 text-slate-950'
                           : 'bg-slate-800 text-slate-400 hover:bg-slate-700'
                       }`}
                     >
diff --git a/frontend/src/components/ProjectsTab.jsx b/frontend/src/components/ProjectsTab.jsx
index 49bc8c7..823dae8 100644
--- a/frontend/src/components/ProjectsTab.jsx
+++ b/frontend/src/components/ProjectsTab.jsx
@@ -788,7 +788,7 @@ const ProjectsTab = ({ onProjectSelect, activeProjectId, onRerunVideo, onEditInI
                       }}
                       className={`flex items-center gap-2 px-3 py-1.5 rounded text-sm transition-all ${
                         isSelecting
-                          ? 'bg-cinema-gold text-slate-950'
+                          ? 'bg-slate-200 text-slate-950'
                           : 'bg-slate-800 text-slate-400 hover:bg-slate-700'
                       }`}
                     >
@@ -875,7 +875,7 @@ const ProjectsTab = ({ onProjectSelect, activeProjectId, onRerunVideo, onEditInI
                     <button
                       onClick={() => setViewMode('grid')}
                       className={`p-2 rounded transition-all ${
-                        viewMode === 'grid' ? 'bg-cinema-gold text-slate-950' : 'bg-slate-800 text-slate-400 hover:bg-slate-700'
+                        viewMode === 'grid' ? 'bg-slate-200 text-slate-950' : 'bg-slate-800 text-slate-400 hover:bg-slate-700'
                       }`}
                     >
                       <Grid className="w-4 h-4" />
@@ -883,7 +883,7 @@ const ProjectsTab = ({ onProjectSelect, activeProjectId, onRerunVideo, onEditInI
                     <button
                       onClick={() => setViewMode('list')}
                       className={`p-2 rounded transition-all ${
-                        viewMode === 'list' ? 'bg-cinema-gold text-slate-950' : 'bg-slate-800 text-slate-400 hover:bg-slate-700'
+                        viewMode === 'list' ? 'bg-slate-200 text-slate-950' : 'bg-slate-800 text-slate-400 hover:bg-slate-700'
                       }`}
                     >
                       <List className="w-4 h-4" />
@@ -1114,7 +1114,7 @@ const ProjectsTab = ({ onProjectSelect, activeProjectId, onRerunVideo, onEditInI
                               <div className="absolute top-2 right-2 z-10">
                                 <div className={`w-6 h-6 rounded flex items-center justify-center transition-all ${
                                   selectedImageIds.includes(item.id)
-                                    ? 'bg-cinema-gold text-slate-950'
+                                    ? 'bg-slate-200 text-slate-950'
                                     : 'bg-slate-900/80 border border-slate-600 text-transparent'
                                 }`}>
                                   <Check className="w-4 h-4" />
@@ -1215,7 +1215,7 @@ const ProjectsTab = ({ onProjectSelect, activeProjectId, onRerunVideo, onEditInI
                             {isSelecting && item.type === 'image' && (
                               <div className={`w-6 h-6 rounded flex items-center justify-center flex-shrink-0 transition-all ${
                                 selectedImageIds.includes(item.id)
-                                  ? 'bg-cinema-gold text-slate-950'
+                                  ? 'bg-slate-200 text-slate-950'
                                   : 'bg-slate-900 border border-slate-600 text-transparent'
                               }`}>
                                 <Check className="w-4 h-4" />
@@ -1578,7 +1578,7 @@ const ProjectsTab = ({ onProjectSelect, activeProjectId, onRerunVideo, onEditInI
                           onClick={() => setMovingItemId(movingItemId === previewItem.id ? null : previewItem.id)}
                           className={`flex items-center gap-2 px-3 py-1.5 rounded text-sm font-normal transition-colors ${
                             movingItemId === previewItem.id
-                              ? 'bg-cinema-gold text-slate-950'
+                              ? 'bg-slate-200 text-slate-950'
                               : 'bg-slate-700 hover:bg-slate-600 text-slate-300'
                           }`}
                         >
diff --git a/frontend/src/components/VideoGenTab.jsx b/frontend/src/components/VideoGenTab.jsx
index a2cf514..decd37e 100644
--- a/frontend/src/components/VideoGenTab.jsx
+++ b/frontend/src/components/VideoGenTab.jsx
@@ -1048,7 +1048,7 @@ OUTPUT: Two sections separated by --- only. No explanations or labels.`;
                   onClick={() => setEngine(opt.value)}
                   className={`flex-1 px-3 py-2 rounded font-normal transition-all text-sm ${
                     engine === opt.value
-                      ? 'bg-cinema-gold text-slate-950'
+                      ? 'bg-slate-200 text-slate-950'
                       : 'bg-slate-800 text-slate-400 hover:bg-slate-700'
                   }`}
                 >
@@ -1076,7 +1076,7 @@ OUTPUT: Two sections separated by --- only. No explanations or labels.`;
                       onClick={() => setModelType(opt.value)}
                       className={`flex-1 px-3 py-2 rounded font-normal transition-all text-sm ${
                         modelType === opt.value
-                          ? 'bg-cinema-gold text-slate-950'
+                          ? 'bg-slate-200 text-slate-950'
                           : 'bg-slate-800 text-slate-400 hover:bg-slate-700'
                       }`}
                     >
@@ -1102,7 +1102,7 @@ OUTPUT: Two sections separated by --- only. No explanations or labels.`;
                         disabled={isDisabledByInterpolation}
                         className={`flex-1 px-3 py-2 rounded font-normal transition-all text-sm ${
                           duration === opt.value
-                            ? 'bg-cinema-gold text-slate-950'
+                            ? 'bg-slate-200 text-slate-950'
                             : isDisabledByInterpolation
                             ? 'bg-slate-800/50 text-slate-600 cursor-not-allowed'
                             : 'bg-slate-800 text-slate-400 hover:bg-slate-700'
@@ -1133,7 +1133,7 @@ OUTPUT: Two sections separated by --- only. No explanations or labels.`;
                       onClick={() => setAspectRatio(ratio)}
                       className={`flex-1 px-4 py-2 rounded font-normal transition-all ${
                         aspectRatio === ratio
-                          ? 'bg-cinema-gold text-slate-950'
+                          ? 'bg-slate-200 text-slate-950'
                           : 'bg-slate-800 text-slate-400 hover:bg-slate-700'
                       }`}
                     >
@@ -1158,7 +1158,7 @@ OUTPUT: Two sections separated by --- only. No explanations or labels.`;
                         disabled={isHighResDisabled}
                         className={`flex-1 px-4 py-2 rounded font-normal transition-all ${
                           resolution === res
-                            ? 'bg-cinema-gold text-slate-950'
+                            ? 'bg-slate-200 text-slate-950'
                             : isHighResDisabled
                             ? 'bg-slate-800/50 text-slate-600 cursor-not-allowed'
                             : 'bg-slate-800 text-slate-400 hover:bg-slate-700'
@@ -1218,7 +1218,7 @@ OUTPUT: Two sections separated by --- only. No explanations or labels.`;
                       onClick={() => setKlingWorkflow(opt.value)}
                       className={`flex-1 px-2 py-1.5 rounded font-normal transition-all text-sm ${
                         klingWorkflow === opt.value
-                          ? 'bg-cinema-gold text-slate-950'
+                          ? 'bg-slate-200 text-slate-950'
                           : 'bg-slate-800 text-slate-400 hover:bg-slate-700'
                       }`}
                     >
@@ -1243,7 +1243,7 @@ OUTPUT: Two sections separated by --- only. No explanations or labels.`;
                           onClick={() => setKlingModel(opt.value)}
                           className={`px-2 py-1.5 rounded font-normal transition-all text-sm ${
                             klingModel === opt.value
-                              ? 'bg-cinema-gold text-slate-950'
+                              ? 'bg-slate-200 text-slate-950'
                               : 'bg-slate-800 text-slate-400 hover:bg-slate-700'
                           }`}
                         >
@@ -1264,7 +1264,7 @@ OUTPUT: Two sections separated by --- only. No explanations or labels.`;
                           onClick={() => setDuration(d)}
                           className={`flex-1 px-3 py-2 rounded font-normal transition-all text-sm ${
                             duration === d
-                              ? 'bg-cinema-gold text-slate-950'
+                              ? 'bg-slate-200 text-slate-950'
                               : 'bg-slate-800 text-slate-400 hover:bg-slate-700'
                           }`}
                         >
@@ -1284,7 +1284,7 @@ OUTPUT: Two sections separated by --- only. No explanations or labels.`;
                           onClick={() => setAspectRatio(ratio)}
                           className={`flex-1 px-3 py-2 rounded font-normal transition-all text-sm ${
                             aspectRatio === ratio
-                              ? 'bg-cinema-gold text-slate-950'
+                              ? 'bg-slate-200 text-slate-950'
                               : 'bg-slate-800 text-slate-400 hover:bg-slate-700'
                           }`}
                         >
@@ -1304,7 +1304,7 @@ OUTPUT: Two sections separated by --- only. No explanations or labels.`;
                           onClick={() => setKlingMode(opt.value)}
                           className={`flex-1 px-3 py-2 rounded font-normal transition-all text-sm ${
                             klingMode === opt.value
-                              ? 'bg-cinema-gold text-slate-950'
+                              ? 'bg-slate-200 text-slate-950'
                               : 'bg-slate-800 text-slate-400 hover:bg-slate-700'
                           }`}
                         >
@@ -1364,7 +1364,7 @@ OUTPUT: Two sections separated by --- only. No explanations or labels.`;
                           onClick={() => setKlingCameraControl(preset.value)}
                           className={`px-2 py-1.5 rounded font-normal transition-all text-xs ${
                             klingCameraControl === preset.value
-                              ? 'bg-cinema-gold text-slate-950'
+                              ? 'bg-slate-200 text-slate-950'
                               : 'bg-slate-800 text-slate-400 hover:bg-slate-700'
                           }`}
                         >
@@ -1531,7 +1531,7 @@ OUTPUT: Two sections separated by --- only. No explanations or labels.`;
                           onClick={() => setKlingLipSyncMode(opt.value)}
                           className={`flex-1 px-3 py-2 rounded font-normal transition-all text-sm ${
                             klingLipSyncMode === opt.value
-                              ? 'bg-cinema-gold text-slate-950'
+                              ? 'bg-slate-200 text-slate-950'
                               : 'bg-slate-800 text-slate-400 hover:bg-slate-700'
                           }`}
                         >