diff --git a/components/tracks/TrackList.tsx b/components/tracks/TrackList.tsx
index 45c05c8..91eedac 100644
--- a/components/tracks/TrackList.tsx
+++ b/components/tracks/TrackList.tsx
@@ -51,6 +51,14 @@ export function TrackList({
 }: TrackListProps) {
   const [importDialogOpen, setImportDialogOpen] = React.useState(false);
   const waveformScrollRef = React.useRef<HTMLDivElement>(null);
+  const controlsScrollRef = React.useRef<HTMLDivElement>(null);
+
+  // Synchronize vertical scroll between controls and waveforms
+  const handleWaveformScroll = React.useCallback(() => {
+    if (waveformScrollRef.current && controlsScrollRef.current) {
+      controlsScrollRef.current.scrollTop = waveformScrollRef.current.scrollTop;
+    }
+  }, []);
 
   const handleImportTrack = (buffer: AudioBuffer, name: string) => {
     if (onImportTrack) {
@@ -91,8 +99,8 @@ export function TrackList({
     <div className="flex-1 flex flex-col overflow-hidden">
       {/* Track List - Two Column Layout */}
       <div className="flex-1 flex overflow-hidden">
-        {/* Left Column: Track Controls (Fixed Width, Vertical Scroll) */}
-        <div className="w-48 flex-shrink-0 overflow-y-auto custom-scrollbar">
+        {/* Left Column: Track Controls (Fixed Width, No Scroll - synced with waveforms) */}
+        <div ref={controlsScrollRef} className="w-48 flex-shrink-0 overflow-hidden">
           {tracks.map((track) => (
             <Track
               key={track.id}
@@ -182,9 +190,10 @@ export function TrackList({
           ))}
         </div>
 
-        {/* Right Column: Waveforms (Flexible Width, Shared Horizontal Scroll) */}
+        {/* Right Column: Waveforms (Flexible Width, Shared Horizontal & Vertical Scroll) */}
         <div
           ref={waveformScrollRef}
+          onScroll={handleWaveformScroll}
           className="flex-1 overflow-auto custom-scrollbar"
         >
           {tracks.map((track) => (