diff --git a/web/src/lib/components/Shell.svelte b/web/src/lib/components/Shell.svelte
index b37d41fd..fccea0ad 100644
--- a/web/src/lib/components/Shell.svelte
+++ b/web/src/lib/components/Shell.svelte
@@ -2,6 +2,8 @@
   import { page } from '$app/state';
   import { goto } from '$app/navigation';
   import { user, logout } from '$lib/auth/store.svelte';
+  import { player } from '$lib/player/store.svelte';
+  import PlayerBar from './PlayerBar.svelte';
 
   let { children } = $props<{ children: import('svelte').Snippet }>();
 
@@ -27,7 +29,7 @@
 
 <svelte:window onclick={() => (menuOpen = false)} onkeydown={(e) => e.key === 'Escape' && (menuOpen = false)} />
 
-<div class="grid h-screen grid-cols-[auto_1fr] grid-rows-[auto_1fr] bg-background text-text-primary">
+<div class="grid h-screen grid-cols-[auto_1fr] grid-rows-[auto_1fr_auto] bg-background text-text-primary">
   <header class="col-span-2 flex items-center justify-between border-b border-border bg-surface px-4 py-3">
     <div class="font-semibold">Minstrel</div>
     <div class="relative">
@@ -77,4 +79,10 @@
   <main class="overflow-y-auto p-4 md:col-start-2">
     {@render children?.()}
   </main>
+
+  {#if player.current}
+    <div class="col-span-2">
+      <PlayerBar />
+    </div>
+  {/if}
 </div>