diff --git a/src/app.html b/src/app.html
index 1c12e15..c703019 100644
--- a/src/app.html
+++ b/src/app.html
@@ -1,14 +1,14 @@
 <!doctype html>
 <html lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		%sveltekit.head%
-	</head>
-	<body
-		data-sveltekit-preload-data="hover"
-		class="flex min-h-screen flex-col items-center gap-8 p-4 max-sm:px-2"
-	>
-		<div style="display: contents">%sveltekit.body%</div>
-	</body>
-</html>
+
+<head>
+	<meta charset="utf-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1" />
+	%sveltekit.head%
+</head>
+
+<body data-sveltekit-preload-data="hover" class="flex min-h-screen flex-col items-center gap-8">
+	<div style="display: contents">%sveltekit.body%</div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/src/lib/components/player/PlayerMobile.svelte b/src/lib/components/player/PlayerMobile.svelte
index fae72c3..bdd3e2c 100644
--- a/src/lib/components/player/PlayerMobile.svelte
+++ b/src/lib/components/player/PlayerMobile.svelte
@@ -11,9 +11,7 @@
 	let open = $state(false);
 </script>
 
-<div
-	class="fixed bottom-0 left-0 right-0 z-50 border-t bg-background/95 backdrop-blur shadow-2xl safe-area-pb"
->
+<div class="z-50 border-t bg-background/95 backdrop-blur shadow-2xl">
 	<div class="px-4 py-2 flex items-center justify-between gap-4 h-16">
 		<!-- Mini Player Info -->
 		<button
@@ -32,9 +30,7 @@
 				<div class="text-sm font-medium truncate leading-tight">
 					{player.currentTrack?.title || "Unknown Title"}
 				</div>
-				<div
-					class="text-xs text-muted-foreground truncate leading-tight"
-				>
+				<div class="text-xs text-muted-foreground truncate leading-tight">
 					{player.currentTrack?.artist || "Unknown Artist"}
 				</div>
 			</div>
@@ -63,9 +59,7 @@
 		<div class="mx-auto w-full max-w-sm flex-1 flex flex-col p-4 gap-6">
 			<!-- Header -->
 			<div class="flex justify-center pt-2">
-				<div
-					class="h-1.5 w-12 rounded-full bg-muted-foreground/20"
-				></div>
+				<div class="h-1.5 w-12 rounded-full bg-muted-foreground/20"></div>
 			</div>
 
 			<!-- Expanded Art -->
@@ -81,14 +75,11 @@
 				<h2 class="text-xl font-bold leading-tight line-clamp-2">
 					{player.currentTrack?.title}
 				</h2>
-				<p
-					class="text-muted-foreground font-medium text-lg line-clamp-1"
-				>
+				<p class="text-muted-foreground font-medium text-lg line-clamp-1">
 					{player.currentTrack?.artist}
 				</p>
 				<p class="text-xs text-muted-foreground/80 mt-1">
-					{player.currentTrack?.album ||
-						player.currentTrack?.animeName}
+					{player.currentTrack?.album || player.currentTrack?.animeName}
 				</p>
 			</div>
 
diff --git a/src/lib/components/player/PlayerRoot.svelte b/src/lib/components/player/PlayerRoot.svelte
index 6c2fd50..2559ede 100644
--- a/src/lib/components/player/PlayerRoot.svelte
+++ b/src/lib/components/player/PlayerRoot.svelte
@@ -89,7 +89,7 @@
 ></audio>
 
 <div class="contents">
-	<div class="lg:hidden">
+	<div class="lg:hidden w-full sticky bottom-0">
 		<PlayerMobile />
 	</div>
 	<div class="hidden lg:block h-full">
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index abf3d31..2573279 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -38,20 +38,20 @@
 		</div>
 	</header>
 
-	<main class="flex flex-col items-center]">
+	<main class="flex flex-col p-4 max-sm:px-2">
 		{@render children()}
 	</main>
 
 	<!-- Desktop sidebar column (in normal flow) -->
 	<!-- PlayerRoot uses contents to inject its children into this grid -->
-	<ClientOnly showFallback={false}>
-		{#snippet children()}
-			<div class="contents">
-				<PlayerRoot />
-			</div>
-		{/snippet}
-	</ClientOnly>
 </div>
+<ClientOnly showFallback={false}>
+	{#snippet children()}
+		<div class="contents">
+			<PlayerRoot />
+		</div>
+	{/snippet}
+</ClientOnly>
 
 <!-- Mobile player UI is rendered via a portal from the single GlobalPlayer instance
      mounted in the desktop sidebar column above. -->
