diff --git a/components/tracks/TrackList.tsx b/components/tracks/TrackList.tsx
index e2f68bb..4034fa9 100644
--- a/components/tracks/TrackList.tsx
+++ b/components/tracks/TrackList.tsx
@@ -15,6 +15,7 @@ import { AutomationHeader } from '@/components/automation/AutomationHeader';
 import type { AutomationPoint as AutomationPointType } from '@/types/automation';
 import { createAutomationPoint } from '@/lib/audio/automation/utils';
 import { EffectDevice } from '@/components/effects/EffectDevice';
+import { EffectBrowser } from '@/components/effects/EffectBrowser';
 
 export interface TrackListProps {
   tracks: TrackType[];
@@ -58,6 +59,7 @@ export function TrackList({
   isPlaying = false,
 }: TrackListProps) {
   const [importDialogOpen, setImportDialogOpen] = React.useState(false);
+  const [effectBrowserTrackId, setEffectBrowserTrackId] = React.useState<string | null>(null);
   const waveformScrollRef = React.useRef<HTMLDivElement>(null);
   const controlsScrollRef = React.useRef<HTMLDivElement>(null);
 
@@ -662,15 +664,8 @@ export function TrackList({
                         <Button
                           variant="ghost"
                           size="icon-sm"
-                          onClick={() => {
-                            const newEffect = createEffect('lowpass', EFFECT_NAMES['lowpass']);
-                            const updatedChain = {
-                              ...track.effectChain,
-                              effects: [...track.effectChain.effects, newEffect],
-                            };
-                            onUpdateTrack(track.id, { effectChain: updatedChain });
-                          }}
-                          title="Add effect (Low-pass filter)"
+                          onClick={() => setEffectBrowserTrackId(track.id)}
+                          title="Add effect"
                           className="h-5 w-5 flex-shrink-0"
                         >
                           <Plus className="h-3 w-3" />
@@ -763,6 +758,25 @@ export function TrackList({
           onImportTrack={handleImportTrack}
         />
       )}
+
+      {/* Effect Browser Dialog */}
+      <EffectBrowser
+        open={effectBrowserTrackId !== null}
+        onClose={() => setEffectBrowserTrackId(null)}
+        onSelectEffect={(effectType) => {
+          if (effectBrowserTrackId) {
+            const track = tracks.find((t) => t.id === effectBrowserTrackId);
+            if (track) {
+              const newEffect = createEffect(effectType, EFFECT_NAMES[effectType]);
+              const updatedChain = {
+                ...track.effectChain,
+                effects: [...track.effectChain.effects, newEffect],
+              };
+              onUpdateTrack(effectBrowserTrackId, { effectChain: updatedChain });
+            }
+          }
+        }}
+      />
     </div>
   );
 }