diff --git a/src/renderer/features/player/components/playerbar.module.css b/src/renderer/features/player/components/playerbar.module.css
index 904933ee5..b18c6a557 100644
--- a/src/renderer/features/player/components/playerbar.module.css
+++ b/src/renderer/features/player/components/playerbar.module.css
@@ -1,7 +1,6 @@
 .container {
-    width: 100vw;
+    width: 100%;
     height: 100%;
-    border-top: 1px solid alpha(var(--theme-colors-border), 0.5);
 }
 
 .controls-grid {
diff --git a/src/renderer/layouts/default-layout.module.css b/src/renderer/layouts/default-layout.module.css
index 883b8e8df..8a4dd07a8 100644
--- a/src/renderer/layouts/default-layout.module.css
+++ b/src/renderer/layouts/default-layout.module.css
@@ -4,8 +4,10 @@
         'window-bar'
         'main-content'
         'player';
-    grid-template-rows: 0 calc(100vh - 90px) 90px;
-    grid-template-rows: 0 calc(100dvh - 90px) 90px;
+    grid-template-rows:
+        0 calc(100vh - 90px - var(--theme-spacing-md)) calc(90px + var(--theme-spacing-md));
+    grid-template-rows:
+        0 calc(100dvh - 90px - var(--theme-spacing-md)) calc(90px + var(--theme-spacing-md));
     grid-template-columns: 1fr;
     gap: 0;
     height: 100%;
@@ -13,11 +15,15 @@
 }
 
 .windows {
-    grid-template-rows: 30px calc(100vh - 120px) 90px;
-    grid-template-rows: 30px calc(100dvh - 120px) 90px;
+    grid-template-rows:
+        30px calc(100vh - 120px - var(--theme-spacing-md)) calc(90px + var(--theme-spacing-md));
+    grid-template-rows:
+        30px calc(100dvh - 120px - var(--theme-spacing-md)) calc(90px + var(--theme-spacing-md));
 }
 
 .macos {
-    grid-template-rows: 30px calc(100vh - 120px) 90px;
-    grid-template-rows: 30px calc(100dvh - 120px) 90px;
+    grid-template-rows:
+        30px calc(100vh - 120px - var(--theme-spacing-md)) calc(90px + var(--theme-spacing-md));
+    grid-template-rows:
+        30px calc(100dvh - 120px - var(--theme-spacing-md)) calc(90px + var(--theme-spacing-md));
 }
diff --git a/src/renderer/layouts/default-layout/player-bar.module.css b/src/renderer/layouts/default-layout/player-bar.module.css
index d2d4558f8..c506d04ed 100644
--- a/src/renderer/layouts/default-layout/player-bar.module.css
+++ b/src/renderer/layouts/default-layout/player-bar.module.css
@@ -1,6 +1,21 @@
-.container {
+.wrapper {
     z-index: 200;
+    box-sizing: border-box;
+    display: flex;
     grid-area: player;
+    height: 100%;
+    padding: 0 var(--theme-spacing-md) var(--theme-spacing-md);
+    background: var(--theme-colors-background);
+}
+
+.bar {
+    display: flex;
+    flex: 1;
+    width: 100%;
+    min-height: 0;
+    overflow: hidden;
+    border-radius: var(--theme-radius-lg);
+    transition: background 0.5s;
 
     @mixin light {
         background: darken(var(--theme-colors-background), 5%);
@@ -9,12 +24,8 @@
     @mixin dark {
         background: darken(var(--theme-colors-background), 10%);
     }
-
-    transition: background 0.5s;
 }
 
-.open-drawer {
-    &:hover {
-        background: darken(var(--theme-colors-background), 20%);
-    }
+.open-drawer .bar:hover {
+    background: darken(var(--theme-colors-background), 20%);
 }
diff --git a/src/renderer/layouts/default-layout/player-bar.tsx b/src/renderer/layouts/default-layout/player-bar.tsx
index 28288647e..e49115d00 100644
--- a/src/renderer/layouts/default-layout/player-bar.tsx
+++ b/src/renderer/layouts/default-layout/player-bar.tsx
@@ -10,13 +10,14 @@ export const PlayerBar = () => {
 
     return (
         <div
-            className={clsx({
-                [styles.container]: true,
+            className={clsx(styles.wrapper, {
                 [styles.openDrawer]: playerbarOpenDrawer,
             })}
             id="player-bar"
         >
-            <Playerbar />
+            <div className={styles.bar}>
+                <Playerbar />
+            </div>
         </div>
     );
 };
diff --git a/src/renderer/layouts/mobile-layout/mobile-layout.module.css b/src/renderer/layouts/mobile-layout/mobile-layout.module.css
index 2614dc750..7cc4df9ca 100644
--- a/src/renderer/layouts/mobile-layout/mobile-layout.module.css
+++ b/src/renderer/layouts/mobile-layout/mobile-layout.module.css
@@ -5,8 +5,10 @@
         'window-bar'
         'main-content'
         'player';
-    grid-template-rows: 0 calc(100vh - 90px) 90px;
-    grid-template-rows: 0 calc(100dvh - 90px) 90px;
+    grid-template-rows:
+        0 calc(100vh - 90px - var(--theme-spacing-md)) calc(90px + var(--theme-spacing-md));
+    grid-template-rows:
+        0 calc(100dvh - 90px - var(--theme-spacing-md)) calc(90px + var(--theme-spacing-md));
     grid-template-columns: 1fr;
     gap: 0;
     width: 100vw;
@@ -18,13 +20,15 @@
 
 .windows,
 .macos {
-    grid-template-rows: 30px calc(100vh - 120px) 90px;
-    grid-template-rows: 30px calc(100dvh - 120px) 90px;
+    grid-template-rows:
+        30px calc(100vh - 120px - var(--theme-spacing-md)) calc(90px + var(--theme-spacing-md));
+    grid-template-rows:
+        30px calc(100dvh - 120px - var(--theme-spacing-md)) calc(90px + var(--theme-spacing-md));
 }
 
 .drawer-button {
     position: absolute;
-    bottom: calc(90px + 0.75rem);
+    bottom: calc(90px + var(--theme-spacing-md) + 0.75rem);
     left: 0.75rem;
     z-index: 100;
     background: color-mix(in srgb, var(--theme-colors-background) 90%, transparent);