1 files changed, 9 insertions, 2 deletions
diff --git a/src/App.tsx b/src/App.tsx
index 966e8e1..cf1e6a6 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -3,8 +3,10 @@ import { TimerView } from './components/TimerView';
 import { TaskList } from './components/TaskList';
 import { SettingsPanel } from './components/SettingsPanel';
 import { NotificationOverlay } from './components/NotificationOverlay';
+import { AmbientControl } from './components/AmbientControl';
 import { useTimerEvents } from './hooks/useTimerEvents';
 import { useTaskStore } from './store/taskStore';
+import { useAudioStore } from './store/audioStore';
 import { useSettingsStore } from './store/settingsStore';
 
 function GearIcon() {
@@ -32,12 +34,14 @@ function App() {
 
   const fetchTasks = useTaskStore((s) => s.fetchTasks);
   const fetchSettings = useSettingsStore((s) => s.fetchSettings);
+  const fetchAudioStatus = useAudioStore((s) => s.fetchStatus);
 
   // Bootstrap data on mount
   useEffect(() => {
     fetchTasks();
     fetchSettings();
-  }, [fetchTasks, fetchSettings]);
+    fetchAudioStatus();
+  }, [fetchTasks, fetchSettings, fetchAudioStatus]);
 
   const handleCompleted = useCallback((taskId: string | null) => {
     setNotifTaskId(taskId);
@@ -67,11 +71,14 @@ function App() {
           style={{
             display: 'flex',
             alignItems: 'center',
-            justifyContent: 'flex-end',
+            justifyContent: 'space-between',
+            gap: '16px',
             padding: '12px 16px',
             borderBottom: '1px solid var(--line-1)',
           }}
         >
+          <AmbientControl />
+
           <button
             onClick={() => setSettingsOpen(true)}
             title="Settings"