diff --git a/components/tracks/Track.tsx b/components/tracks/Track.tsx
index 17cc962..497c6de 100644
--- a/components/tracks/Track.tsx
+++ b/components/tracks/Track.tsx
@@ -112,8 +112,9 @@ export function Track({
     const width = rect.width;
     const height = rect.height;
 
-    // Clear canvas
-    ctx.fillStyle = 'rgb(15, 23, 42)';
+    // Clear canvas with theme color
+    const bgColor = getComputedStyle(canvas).getPropertyValue('--color-waveform-bg') || 'rgb(15, 23, 42)';
+    ctx.fillStyle = bgColor;
     ctx.fillRect(0, 0, width, height);
 
     const buffer = track.audioBuffer;
@@ -396,7 +397,7 @@ export function Track({
 
       {/* Right: Waveform Area (Flexible Width) */}
       <div
-        className="flex-1 relative bg-slate-900 border-b border-border cursor-pointer"
+        className="flex-1 relative bg-waveform-bg border-b border-border cursor-pointer"
         onClick={onSelect}
       >
         {track.audioBuffer ? (
@@ -440,7 +441,7 @@ export function Track({
 
       {/* Bottom: Effects Section (Collapsible, Full Width) */}
       {!track.collapsed && (
-        <div className="bg-slate-900/50 border-b border-border/50">
+        <div className="bg-muted/50 border-b border-border/50">
           {/* Effects Header - clickable to toggle */}
           <div
             className="flex items-center gap-2 px-3 py-1.5 cursor-pointer hover:bg-accent/30 transition-colors"
@@ -491,7 +492,7 @@ export function Track({
 
           {/* Horizontal scrolling device rack - expanded state */}
           {showEffects && (
-            <div className="overflow-x-auto custom-scrollbar px-3 py-3 bg-slate-900/30">
+            <div className="overflow-x-auto custom-scrollbar px-3 py-3 bg-muted/70">
               <div className="flex gap-2">
                 {track.effectChain.effects.length === 0 ? (
                   <div className="text-xs text-muted-foreground text-center py-8 w-full">