diff --git a/apps/mukke/apps/web/src/lib/components/MiniPlayer.svelte b/apps/mukke/apps/web/src/lib/components/MiniPlayer.svelte
index cf981a0eb..012bae65a 100644
--- a/apps/mukke/apps/web/src/lib/components/MiniPlayer.svelte
+++ b/apps/mukke/apps/web/src/lib/components/MiniPlayer.svelte
@@ -13,7 +13,9 @@
 </script>
 
 {#if playerStore.currentSong}
-	<div class="fixed bottom-0 left-0 right-0 z-30 bg-surface border-t border-border">
+	<div
+		class="mini-player fixed left-0 right-0 z-30 bg-surface border-t border-border rounded-t-xl shadow-lg"
+	>
 		<!-- Error toast -->
 		{#if playerStore.error}
 			<div
@@ -113,3 +115,9 @@
 		</div>
 	</div>
 {/if}
+
+<style>
+	.mini-player {
+		bottom: calc(80px + env(safe-area-inset-bottom, 0px));
+	}
+</style>
diff --git a/apps/mukke/apps/web/src/routes/(app)/+layout.svelte b/apps/mukke/apps/web/src/routes/(app)/+layout.svelte
index 6349d65be..5d8fc7cfa 100644
--- a/apps/mukke/apps/web/src/routes/(app)/+layout.svelte
+++ b/apps/mukke/apps/web/src/routes/(app)/+layout.svelte
@@ -181,12 +181,12 @@
 	.main-content {
 		flex: 1;
 		transition: all 300ms ease;
-		padding-bottom: calc(130px + env(safe-area-inset-bottom));
+		padding-bottom: calc(180px + env(safe-area-inset-bottom));
 	}
 
 	@media (max-width: 768px) {
 		.main-content {
-			padding-bottom: calc(140px + env(safe-area-inset-bottom));
+			padding-bottom: calc(190px + env(safe-area-inset-bottom));
 		}
 	}