diff --git a/frontend/src/components/ArtworkGenerationModal.tsx b/frontend/src/components/ArtworkGenerationModal.tsx
index 457e3cd..2a8e2c7 100644
--- a/frontend/src/components/ArtworkGenerationModal.tsx
+++ b/frontend/src/components/ArtworkGenerationModal.tsx
@@ -36,7 +36,7 @@ export default function ArtworkGenerationModal({ isOpen, onClose, onGenerate, tr
     <div className="fixed inset-0 z-50 flex items-center justify-center">
       {/* Backdrop */}
       <div
-        className="absolute inset-0 bg-black/60 backdrop-blur-sm"
+        className="absolute inset-0 bg-black/80 backdrop-blur-md"
         onClick={handleClose}
       />
 
diff --git a/frontend/src/components/SettingsModal.tsx b/frontend/src/components/SettingsModal.tsx
index 2fa7240..8366443 100644
--- a/frontend/src/components/SettingsModal.tsx
+++ b/frontend/src/components/SettingsModal.tsx
@@ -99,7 +99,7 @@ export default function SettingsModal({ isOpen, onClose, onClearWaveforms, onDel
     <div className="fixed inset-0 z-50 flex items-center justify-center">
       {/* Backdrop */}
       <div
-        className="absolute inset-0 bg-black/60 backdrop-blur-sm"
+        className="absolute inset-0 bg-black/80 backdrop-blur-md"
         onClick={onClose}
       />
 
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index a106eea..7dc31f6 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -9,6 +9,7 @@ export default {
       colors: {
         'lyria-dark': '#0a0a0f',
         'lyria-panel': '#12121a',
+        'lyria-surface': '#1a1a24',
         'lyria-accent': '#ff6b35',
         'lyria-text': '#e0e0e0',
         'lyria-muted': '#6b6b7b',