diff --git a/components/tracks/TrackList.tsx b/components/tracks/TrackList.tsx
index 931f247..f926307 100644
--- a/components/tracks/TrackList.tsx
+++ b/components/tracks/TrackList.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { Plus, Upload, ChevronDown } from 'lucide-react';
+import { Plus, Upload, ChevronDown, ChevronRight, X } from 'lucide-react';
 import { Button } from '@/components/ui/Button';
 import { Track } from './Track';
 import { TrackExtensions } from './TrackExtensions';
@@ -292,143 +292,206 @@ export function TrackList({
                     renderWaveformOnly={true}
                   />
 
-                  {/* Automation Lane Overlay */}
+                  {/* Automation Bar - Integrated at top */}
                   {!track.collapsed && track.automation?.showAutomation && (
-                    <div className="absolute inset-0 bg-black/30 backdrop-blur-sm pointer-events-auto z-10">
-                      <div className="h-full p-4 flex flex-col">
-                        <div className="bg-card/95 rounded-lg border border-border shadow-2xl flex flex-col h-full">
-                          {/* Header */}
-                          <div className="flex items-center justify-between px-4 py-3 border-b border-border bg-muted/50">
-                            <div className="flex items-center gap-2">
-                              <span className="text-sm font-medium">Automation</span>
-                              <span className="text-xs text-muted-foreground">
-                                {track.automation.selectedParameterId || 'Volume'}
-                              </span>
-                            </div>
-                            <Button
-                              variant="ghost"
-                              size="icon-sm"
-                              onClick={() => onUpdateTrack(track.id, {
-                                automation: { ...track.automation, showAutomation: false }
-                              })}
-                              title="Close automation"
-                            >
-                              <ChevronDown className="h-4 w-4" />
-                            </Button>
-                          </div>
-
-                          {/* Automation Lane */}
-                          <div className="flex-1 overflow-hidden">
-                            {track.automation.lanes
-                              .filter((lane) => lane.parameterId === track.automation.selectedParameterId)
-                              .map((lane) => (
-                                <AutomationLane
-                                  key={lane.id}
-                                  lane={lane}
-                                  trackId={track.id}
-                                  zoom={zoom}
-                                  currentTime={currentTime}
-                                  duration={duration}
-                                  isPlaying={isPlaying}
-                                  onAddPoint={(time, value) => {
-                                    const newPoint = createAutomationPoint(time, value);
-                                    const updatedLanes = track.automation.lanes.map((l) =>
-                                      l.id === lane.id
-                                        ? { ...l, points: [...l.points, newPoint].sort((a, b) => a.time - b.time) }
-                                        : l
-                                    );
-                                    onUpdateTrack(track.id, {
-                                      automation: { ...track.automation, lanes: updatedLanes },
-                                    });
-                                  }}
-                                  onUpdatePoint={(pointId, updates) => {
-                                    const updatedLanes = track.automation.lanes.map((l) =>
-                                      l.id === lane.id
-                                        ? {
-                                            ...l,
-                                            points: l.points.map((p) =>
-                                              p.id === pointId ? { ...p, ...updates } : p
-                                            ),
-                                          }
-                                        : l
-                                    );
-                                    onUpdateTrack(track.id, {
-                                      automation: { ...track.automation, lanes: updatedLanes },
-                                    });
-                                  }}
-                                  onRemovePoint={(pointId) => {
-                                    const updatedLanes = track.automation.lanes.map((l) =>
-                                      l.id === lane.id
-                                        ? { ...l, points: l.points.filter((p) => p.id !== pointId) }
-                                        : l
-                                    );
-                                    onUpdateTrack(track.id, {
-                                      automation: { ...track.automation, lanes: updatedLanes },
-                                    });
-                                  }}
-                                  onUpdateLane={(updates) => {
-                                    const updatedLanes = track.automation.lanes.map((l) =>
-                                      l.id === lane.id ? { ...l, ...updates } : l
-                                    );
-                                    onUpdateTrack(track.id, {
-                                      automation: { ...track.automation, lanes: updatedLanes },
-                                    });
-                                  }}
-                                  onSeek={onSeek}
-                                />
-                              ))}
-                          </div>
+                    <div className="absolute top-0 left-0 right-0 z-10 pointer-events-auto bg-card/90 backdrop-blur-sm border-b border-border">
+                      {/* Automation Header - Always visible */}
+                      <div
+                        className="flex items-center justify-between px-3 py-1.5 cursor-pointer hover:bg-accent/30 transition-colors border-b border-border"
+                        onClick={() => {
+                          const currentLane = track.automation.lanes.find(
+                            l => l.parameterId === track.automation.selectedParameterId
+                          );
+                          if (currentLane) {
+                            const updatedLanes = track.automation.lanes.map((l) =>
+                              l.id === currentLane.id ? { ...l, visible: !l.visible } : l
+                            );
+                            onUpdateTrack(track.id, {
+                              automation: { ...track.automation, lanes: updatedLanes },
+                            });
+                          }
+                        }}
+                      >
+                        <div className="flex items-center gap-2">
+                          {track.automation.lanes.find(l => l.parameterId === track.automation.selectedParameterId)?.visible ? (
+                            <ChevronDown className="h-3 w-3 text-muted-foreground" />
+                          ) : (
+                            <ChevronRight className="h-3 w-3 text-muted-foreground" />
+                          )}
+                          <span className="text-xs font-medium">Automation</span>
+                          <span className="text-xs text-muted-foreground">
+                            {track.automation.selectedParameterId || 'Volume'}
+                          </span>
                         </div>
+                        <Button
+                          variant="ghost"
+                          size="icon-sm"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            onUpdateTrack(track.id, {
+                              automation: { ...track.automation, showAutomation: false }
+                            });
+                          }}
+                          title="Close automation"
+                          className="h-5 w-5"
+                        >
+                          <X className="h-3 w-3" />
+                        </Button>
                       </div>
+
+                      {/* Automation Lane Content - Collapsible */}
+                      {track.automation.lanes
+                        .filter((lane) => lane.parameterId === track.automation.selectedParameterId && lane.visible)
+                        .map((lane) => (
+                          <div key={lane.id} className="h-32">
+                            <AutomationLane
+                              lane={lane}
+                              trackId={track.id}
+                              zoom={zoom}
+                              currentTime={currentTime}
+                              duration={duration}
+                              isPlaying={isPlaying}
+                              onAddPoint={(time, value) => {
+                                const newPoint = createAutomationPoint(time, value);
+                                const updatedLanes = track.automation.lanes.map((l) =>
+                                  l.id === lane.id
+                                    ? { ...l, points: [...l.points, newPoint].sort((a, b) => a.time - b.time) }
+                                    : l
+                                );
+                                onUpdateTrack(track.id, {
+                                  automation: { ...track.automation, lanes: updatedLanes },
+                                });
+                              }}
+                              onUpdatePoint={(pointId, updates) => {
+                                const updatedLanes = track.automation.lanes.map((l) =>
+                                  l.id === lane.id
+                                    ? {
+                                        ...l,
+                                        points: l.points.map((p) =>
+                                          p.id === pointId ? { ...p, ...updates } : p
+                                        ),
+                                      }
+                                    : l
+                                );
+                                onUpdateTrack(track.id, {
+                                  automation: { ...track.automation, lanes: updatedLanes },
+                                });
+                              }}
+                              onRemovePoint={(pointId) => {
+                                const updatedLanes = track.automation.lanes.map((l) =>
+                                  l.id === lane.id
+                                    ? { ...l, points: l.points.filter((p) => p.id !== pointId) }
+                                    : l
+                                );
+                                onUpdateTrack(track.id, {
+                                  automation: { ...track.automation, lanes: updatedLanes },
+                                });
+                              }}
+                              onUpdateLane={(updates) => {
+                                const updatedLanes = track.automation.lanes.map((l) =>
+                                  l.id === lane.id ? { ...l, ...updates } : l
+                                );
+                                onUpdateTrack(track.id, {
+                                  automation: { ...track.automation, lanes: updatedLanes },
+                                });
+                              }}
+                              onSeek={onSeek}
+                            />
+                          </div>
+                        ))}
                     </div>
                   )}
 
-                  {/* Effects Overlay */}
+                  {/* Effects Bar - Integrated below automation or at top */}
                   {!track.collapsed && track.showEffects && (
-                    <div className="absolute inset-0 bg-black/30 backdrop-blur-sm pointer-events-auto z-10">
-                      <div className="h-full p-4">
-                        <TrackExtensions
-                          track={track}
-                          onUpdateTrack={onUpdateTrack}
-                          asOverlay={true}
-                          onToggleEffect={(effectId) => {
-                            const updatedChain = {
-                              ...track.effectChain,
-                              effects: track.effectChain.effects.map((e) =>
-                                e.id === effectId ? { ...e, enabled: !e.enabled } : e
-                              ),
-                            };
-                            onUpdateTrack(track.id, { effectChain: updatedChain });
+                    <div
+                      className="absolute left-0 right-0 z-10 pointer-events-auto bg-card/90 backdrop-blur-sm border-b border-border"
+                      style={{
+                        top: track.automation?.showAutomation && track.automation.lanes.find(l => l.parameterId === track.automation.selectedParameterId)?.visible
+                          ? '164px' // 32px header + 132px automation lane
+                          : track.automation?.showAutomation
+                          ? '32px' // Just header
+                          : '0px'
+                      }}
+                    >
+                      {/* Effects Header - Always visible */}
+                      <div
+                        className="flex items-center justify-between px-3 py-1.5 cursor-pointer hover:bg-accent/30 transition-colors border-b border-border"
+                        onClick={() => {
+                          onUpdateTrack(track.id, { effectsExpanded: !track.effectsExpanded });
+                        }}
+                      >
+                        <div className="flex items-center gap-2">
+                          {track.effectsExpanded ? (
+                            <ChevronDown className="h-3 w-3 text-muted-foreground" />
+                          ) : (
+                            <ChevronRight className="h-3 w-3 text-muted-foreground" />
+                          )}
+                          <span className="text-xs font-medium">Effects</span>
+                          <span className="text-xs text-muted-foreground">
+                            ({track.effectChain.effects.length})
+                          </span>
+                        </div>
+                        <Button
+                          variant="ghost"
+                          size="icon-sm"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            onUpdateTrack(track.id, { showEffects: false });
                           }}
-                          onRemoveEffect={(effectId) => {
-                            const updatedChain = {
-                              ...track.effectChain,
-                              effects: track.effectChain.effects.filter((e) => e.id !== effectId),
-                            };
-                            onUpdateTrack(track.id, { effectChain: updatedChain });
-                          }}
-                          onUpdateEffect={(effectId, parameters) => {
-                            const updatedChain = {
-                              ...track.effectChain,
-                              effects: track.effectChain.effects.map((e) =>
-                                e.id === effectId ? { ...e, parameters } : e
-                              ),
-                            };
-                            onUpdateTrack(track.id, { effectChain: updatedChain });
-                          }}
-                          onAddEffect={(effectType) => {
-                            const newEffect = createEffect(
-                              effectType,
-                              EFFECT_NAMES[effectType]
-                            );
-                            const updatedChain = {
-                              ...track.effectChain,
-                              effects: [...track.effectChain.effects, newEffect],
-                            };
-                            onUpdateTrack(track.id, { effectChain: updatedChain });
-                          }}
-                        />
+                          title="Close effects"
+                          className="h-5 w-5"
+                        >
+                          <X className="h-3 w-3" />
+                        </Button>
                       </div>
+
+                      {/* Effects Content - Collapsible */}
+                      {track.effectsExpanded && (
+                        <div className="h-48">
+                          <TrackExtensions
+                            track={track}
+                            onUpdateTrack={onUpdateTrack}
+                            asOverlay={true}
+                            onToggleEffect={(effectId) => {
+                              const updatedChain = {
+                                ...track.effectChain,
+                                effects: track.effectChain.effects.map((e) =>
+                                  e.id === effectId ? { ...e, enabled: !e.enabled } : e
+                                ),
+                              };
+                              onUpdateTrack(track.id, { effectChain: updatedChain });
+                            }}
+                            onRemoveEffect={(effectId) => {
+                              const updatedChain = {
+                                ...track.effectChain,
+                                effects: track.effectChain.effects.filter((e) => e.id !== effectId),
+                              };
+                              onUpdateTrack(track.id, { effectChain: updatedChain });
+                            }}
+                            onUpdateEffect={(effectId, parameters) => {
+                              const updatedChain = {
+                                ...track.effectChain,
+                                effects: track.effectChain.effects.map((e) =>
+                                  e.id === effectId ? { ...e, parameters } : e
+                                ),
+                              };
+                              onUpdateTrack(track.id, { effectChain: updatedChain });
+                            }}
+                            onAddEffect={(effectType) => {
+                              const newEffect = createEffect(
+                                effectType,
+                                EFFECT_NAMES[effectType]
+                              );
+                              const updatedChain = {
+                                ...track.effectChain,
+                                effects: [...track.effectChain.effects, newEffect],
+                              };
+                              onUpdateTrack(track.id, { effectChain: updatedChain });
+                            }}
+                          />
+                        </div>
+                      )}
                     </div>
                   )}
                 </div>
diff --git a/types/track.ts b/types/track.ts
index a5bc952..d2460d8 100644
--- a/types/track.ts
+++ b/types/track.ts
@@ -34,6 +34,7 @@ export interface Track {
   collapsed: boolean;
   selected: boolean;
   showEffects: boolean; // Show/hide per-track effects panel
+  effectsExpanded?: boolean; // Whether effects bar is expanded (when showEffects is true)
 
   // Selection (for editing operations)
   selection: Selection | null;