diff --git a/src/components/video-editor/timeline/AudioWaveform.tsx b/src/components/video-editor/timeline/AudioWaveform.tsx
index 3c2d20dc..b30af529 100644
--- a/src/components/video-editor/timeline/AudioWaveform.tsx
+++ b/src/components/video-editor/timeline/AudioWaveform.tsx
@@ -74,7 +74,7 @@ export default function AudioWaveform({ peaks }: AudioWaveformProps) {
 			ctx.lineTo(px, midY + barHeight);
 		}
 
-		ctx.strokeStyle = "rgba(6, 182, 212, 0.25)";
+		ctx.strokeStyle = "rgba(59, 130, 246, 0.45)";
 		ctx.lineWidth = dpr;
 		ctx.stroke();
 	}, [peaks, range.start, range.end, resizeKey]);
@@ -83,7 +83,7 @@ export default function AudioWaveform({ peaks }: AudioWaveformProps) {
 		<canvas
 			ref={setCanvasRef}
 			className="absolute inset-0 w-full h-full pointer-events-none"
-			style={{ zIndex: 0, opacity: 0.9 }}
+			style={{ zIndex: 0 }}
 		/>
 	);
 }
diff --git a/src/components/video-editor/timeline/Item.tsx b/src/components/video-editor/timeline/Item.tsx
index 52305c23..a68a38ae 100644
--- a/src/components/video-editor/timeline/Item.tsx
+++ b/src/components/video-editor/timeline/Item.tsx
@@ -61,7 +61,7 @@ export default function Item({
   const isAudio = variant === 'audio';
 
   const glassClass = isZoom
-    ? glassStyles.glassGreen
+    ? glassStyles.glassPurple
     : isTrim
     ? glassStyles.glassRed
     : isClip
@@ -69,11 +69,11 @@ export default function Item({
     : isSpeed
     ? glassStyles.glassAmber
     : isAudio
-    ? glassStyles.glassPurple
+    ? glassStyles.glassDarkGreen
     : glassStyles.glassYellow;
 
   const endCapColor = isZoom
-    ? '#2563EB'
+    ? '#a855f7'
     : isTrim
     ? '#ef4444'
     : isClip
@@ -81,7 +81,7 @@ export default function Item({
     : isSpeed
     ? '#d97706'
     : isAudio
-    ? '#a855f7'
+    ? '#166534'
     : '#B4A046';
 
 	const timeLabel = useMemo(
diff --git a/src/components/video-editor/timeline/ItemGlass.module.css b/src/components/video-editor/timeline/ItemGlass.module.css
index 78ebe232..59516584 100644
--- a/src/components/video-editor/timeline/ItemGlass.module.css
+++ b/src/components/video-editor/timeline/ItemGlass.module.css
@@ -2,7 +2,7 @@
   position: relative;
   border-radius: 8px;
   -corner-smoothing: antialiased;
-  background: rgba(37, 99, 235, 0.15);
+  background: linear-gradient(to bottom, rgba(37, 99, 235, 0.22), rgba(37, 99, 235, 0.08));
   border: 1px solid rgba(37, 99, 235, 0.3);
   box-shadow: 0 2px 12px 0 rgba(37, 99, 235, 0.1) inset;
   margin: 1px 0;
@@ -12,13 +12,13 @@
 }
 
 .glassGreen:hover {
-  background: rgba(37, 99, 235, 0.25);
+  background: linear-gradient(to bottom, rgba(37, 99, 235, 0.32), rgba(37, 99, 235, 0.15));
   border-color: rgba(37, 99, 235, 0.5);
   box-shadow: 0 4px 20px 0 rgba(37, 99, 235, 0.2) inset;
 }
 
 .glassGreen.selected {
-  background: rgba(37, 99, 235, 0.35);
+  background: linear-gradient(to bottom, rgba(37, 99, 235, 0.42), rgba(37, 99, 235, 0.22));
   border-color: #2563EB;
   box-shadow: 0 0 0 1px #2563EB, 0 4px 20px 0 rgba(37, 99, 235, 0.3) inset;
   z-index: 10;
@@ -28,7 +28,7 @@
   position: relative;
   border-radius: 8px;
   -corner-smoothing: antialiased;
-  background: rgba(239, 68, 68, 0.15);
+  background: linear-gradient(to bottom, rgba(239, 68, 68, 0.22), rgba(239, 68, 68, 0.08));
   border: 1px solid rgba(239, 68, 68, 0.3);
   box-shadow: 0 2px 12px 0 rgba(239, 68, 68, 0.1) inset;
   margin: 1px 0;
@@ -38,13 +38,13 @@
 }
 
 .glassRed:hover {
-  background: rgba(239, 68, 68, 0.25);
+  background: linear-gradient(to bottom, rgba(239, 68, 68, 0.32), rgba(239, 68, 68, 0.15));
   border-color: rgba(239, 68, 68, 0.5);
   box-shadow: 0 4px 20px 0 rgba(239, 68, 68, 0.2) inset;
 }
 
 .glassRed.selected {
-  background: rgba(239, 68, 68, 0.35);
+  background: linear-gradient(to bottom, rgba(239, 68, 68, 0.42), rgba(239, 68, 68, 0.22));
   border-color: #ef4444;
   box-shadow: 0 0 0 1px #ef4444, 0 4px 20px 0 rgba(239, 68, 68, 0.3) inset;
   z-index: 10;
@@ -54,7 +54,7 @@
   position: relative;
   border-radius: 8px;
   -corner-smoothing: antialiased;
-  background: rgba(180, 160, 70, 0.15);
+  background: linear-gradient(to bottom, rgba(180, 160, 70, 0.22), rgba(180, 160, 70, 0.08));
   border: 1px solid rgba(180, 160, 70, 0.3);
   box-shadow: 0 2px 12px 0 rgba(180, 160, 70, 0.1) inset;
   margin: 1px 0;
@@ -64,13 +64,13 @@
 }
 
 .glassYellow:hover {
-  background: rgba(180, 160, 70, 0.25);
+  background: linear-gradient(to bottom, rgba(180, 160, 70, 0.32), rgba(180, 160, 70, 0.15));
   border-color: rgba(180, 160, 70, 0.5);
   box-shadow: 0 4px 20px 0 rgba(180, 160, 70, 0.2) inset;
 }
 
 .glassYellow.selected {
-  background: rgba(180, 160, 70, 0.35);
+  background: linear-gradient(to bottom, rgba(180, 160, 70, 0.42), rgba(180, 160, 70, 0.22));
   border-color: #B4A046;
   box-shadow: 0 0 0 1px #B4A046, 0 4px 20px 0 rgba(180, 160, 70, 0.3) inset;
   z-index: 10;
@@ -80,7 +80,7 @@
   position: relative;
   border-radius: 8px;
   -corner-smoothing: antialiased;
-  background: rgba(245, 158, 11, 0.15);
+  background: linear-gradient(to bottom, rgba(245, 158, 11, 0.22), rgba(245, 158, 11, 0.08));
   border: 1px solid rgba(245, 158, 11, 0.3);
   box-shadow: 0 2px 12px 0 rgba(245, 158, 11, 0.1) inset;
   margin: 1px 0;
@@ -90,13 +90,13 @@
 }
 
 .glassAmber:hover {
-  background: rgba(245, 158, 11, 0.25);
+  background: linear-gradient(to bottom, rgba(245, 158, 11, 0.32), rgba(245, 158, 11, 0.15));
   border-color: rgba(245, 158, 11, 0.5);
   box-shadow: 0 4px 20px 0 rgba(245, 158, 11, 0.2) inset;
 }
 
 .glassAmber.selected {
-  background: rgba(245, 158, 11, 0.35);
+  background: linear-gradient(to bottom, rgba(245, 158, 11, 0.42), rgba(245, 158, 11, 0.22));
   border-color: #f59e0b;
   box-shadow: 0 0 0 1px #f59e0b, 0 4px 20px 0 rgba(245, 158, 11, 0.3) inset;
   z-index: 10;
@@ -106,7 +106,7 @@
   position: relative;
   border-radius: 8px;
   -corner-smoothing: antialiased;
-  background: rgba(168, 85, 247, 0.15);
+  background: linear-gradient(to bottom, rgba(168, 85, 247, 0.22), rgba(168, 85, 247, 0.08));
   border: 1px solid rgba(168, 85, 247, 0.3);
   box-shadow: 0 2px 12px 0 rgba(168, 85, 247, 0.1) inset;
   margin: 1px 0;
@@ -116,13 +116,13 @@
 }
 
 .glassPurple:hover {
-  background: rgba(168, 85, 247, 0.25);
+  background: linear-gradient(to bottom, rgba(168, 85, 247, 0.32), rgba(168, 85, 247, 0.15));
   border-color: rgba(168, 85, 247, 0.5);
   box-shadow: 0 4px 20px 0 rgba(168, 85, 247, 0.2) inset;
 }
 
 .glassPurple.selected {
-  background: rgba(168, 85, 247, 0.35);
+  background: linear-gradient(to bottom, rgba(168, 85, 247, 0.42), rgba(168, 85, 247, 0.22));
   border-color: #a855f7;
   box-shadow: 0 0 0 1px #a855f7, 0 4px 20px 0 rgba(168, 85, 247, 0.3) inset;
   z-index: 10;
@@ -132,7 +132,7 @@
   position: relative;
   border-radius: 8px;
   -corner-smoothing: antialiased;
-  background: rgba(6, 182, 212, 0.15);
+  background: linear-gradient(to bottom, rgba(6, 182, 212, 0.22), rgba(6, 182, 212, 0.08));
   border: 1px solid rgba(6, 182, 212, 0.3);
   box-shadow: 0 2px 12px 0 rgba(6, 182, 212, 0.1) inset;
   margin: 1px 0;
@@ -142,18 +142,44 @@
 }
 
 .glassCyan:hover {
-  background: rgba(6, 182, 212, 0.25);
+  background: linear-gradient(to bottom, rgba(6, 182, 212, 0.32), rgba(6, 182, 212, 0.15));
   border-color: rgba(6, 182, 212, 0.5);
   box-shadow: 0 4px 20px 0 rgba(6, 182, 212, 0.2) inset;
 }
 
 .glassCyan.selected {
-  background: rgba(6, 182, 212, 0.35);
+  background: linear-gradient(to bottom, rgba(6, 182, 212, 0.42), rgba(6, 182, 212, 0.22));
   border-color: #06b6d4;
   box-shadow: 0 0 0 1px #06b6d4, 0 4px 20px 0 rgba(6, 182, 212, 0.3) inset;
   z-index: 10;
 }
 
+.glassDarkGreen {
+  position: relative;
+  border-radius: 8px;
+  -corner-smoothing: antialiased;
+  background: linear-gradient(to bottom, rgba(22, 101, 52, 0.22), rgba(22, 101, 52, 0.08));
+  border: 1px solid rgba(22, 101, 52, 0.3);
+  box-shadow: 0 2px 12px 0 rgba(22, 101, 52, 0.1) inset;
+  margin: 1px 0;
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.glassDarkGreen:hover {
+  background: linear-gradient(to bottom, rgba(22, 101, 52, 0.32), rgba(22, 101, 52, 0.15));
+  border-color: rgba(22, 101, 52, 0.5);
+  box-shadow: 0 4px 20px 0 rgba(22, 101, 52, 0.2) inset;
+}
+
+.glassDarkGreen.selected {
+  background: linear-gradient(to bottom, rgba(22, 101, 52, 0.42), rgba(22, 101, 52, 0.22));
+  border-color: #166534;
+  box-shadow: 0 0 0 1px #166534, 0 4px 20px 0 rgba(22, 101, 52, 0.3) inset;
+  z-index: 10;
+}
+
 .zoomEndCap {
   position: absolute;
   top: 0;
@@ -176,7 +202,9 @@
 .glassPurple:hover .zoomEndCap,
 .glassPurple.selected .zoomEndCap,
 .glassCyan:hover .zoomEndCap,
-.glassCyan.selected .zoomEndCap {
+.glassCyan.selected .zoomEndCap,
+.glassDarkGreen:hover .zoomEndCap,
+.glassDarkGreen.selected .zoomEndCap {
   opacity: 1;
 }