diff --git a/aircox/static/aircox/css/admin.css b/aircox/static/aircox/css/admin.css
index 1d29be6..78f8d92 100644
--- a/aircox/static/aircox/css/admin.css
+++ b/aircox/static/aircox/css/admin.css
@@ -20,6 +20,7 @@
   --preview-wide-content-sz: 1.6rem;
   --header-height: var(--preview-cover-size);
   --a-carousel-p: 1.4rem;
+  --a-carousel-ml: calc(1.2rem - 0.5rem);
   --a-carousel-gap: 1.2rem;
   --a-carousel-nav-x: -0.6em;
   --a-progress-bg: transparent;
@@ -38,6 +39,7 @@
   --a-sound-text-sz: 1rem;
   --a-player-url-fg: var(--highlight-color-2);
   --a-player-panel-bg: var(--highlight-color);
+  --a-player-bar-height: var(--nav-primary-height);
   --a-player-bar-bg: var(--highlight-color);
   --a-player-bar-title-alone-sz: 1.4rem;
   --button-fg: var(--highlight-color-2);
@@ -286,8 +288,12 @@ preview-header:not(.no-cover) .card-headings .heading, preview-header:not(.no-co
   gap: 1.2rem;
 }
 
+.a-carousel {
+  margin-left: calc(0rem - var(--a-carousel-ml));
+}
 .a-carousel .a-carousel-viewport {
   padding: var(--a-carousel-p) 0;
+  padding-left: var(--a-carousel-ml);
 }
 
 .a-carousel-container {
@@ -451,7 +457,7 @@ preview-header:not(.no-cover) .card-headings .heading, preview-header:not(.no-co
   display: flex;
   flex-direction: row;
   justify-content: center;
-  height: 3.75em !important;
+  height: var(--a-player-bar-height);
   border-top: 1px #ddd solid;
   background: var(--a-player-bar-bg);
 }
@@ -471,7 +477,7 @@ preview-header:not(.no-cover) .card-headings .heading, preview-header:not(.no-co
 .a-player-bar .button {
   font-size: 1.6rem;
   height: 100%;
-  padding: auto 0.2em !important;
+  padding: 0.2em !important;
   min-width: 3em;
   border-radius: 0px;
   transition: background-color 0.5s;
diff --git a/aircox/static/aircox/css/public.css b/aircox/static/aircox/css/public.css
index f889315..4675bcd 100644
--- a/aircox/static/aircox/css/public.css
+++ b/aircox/static/aircox/css/public.css
@@ -20,6 +20,7 @@
   --preview-wide-content-sz: 1.6rem;
   --header-height: var(--preview-cover-size);
   --a-carousel-p: 1.4rem;
+  --a-carousel-ml: calc(1.2rem - 0.5rem);
   --a-carousel-gap: 1.2rem;
   --a-carousel-nav-x: -0.6em;
   --a-progress-bg: transparent;
@@ -38,6 +39,7 @@
   --a-sound-text-sz: 1rem;
   --a-player-url-fg: var(--highlight-color-2);
   --a-player-panel-bg: var(--highlight-color);
+  --a-player-bar-height: var(--nav-primary-height);
   --a-player-bar-bg: var(--highlight-color);
   --a-player-bar-title-alone-sz: 1.4rem;
   --button-fg: var(--highlight-color-2);
@@ -286,8 +288,12 @@ preview-header:not(.no-cover) .card-headings .heading, preview-header:not(.no-co
   gap: 1.2rem;
 }
 
+.a-carousel {
+  margin-left: calc(0rem - var(--a-carousel-ml));
+}
 .a-carousel .a-carousel-viewport {
   padding: var(--a-carousel-p) 0;
+  padding-left: var(--a-carousel-ml);
 }
 
 .a-carousel-container {
@@ -451,7 +457,7 @@ preview-header:not(.no-cover) .card-headings .heading, preview-header:not(.no-co
   display: flex;
   flex-direction: row;
   justify-content: center;
-  height: 3.75em !important;
+  height: var(--a-player-bar-height);
   border-top: 1px #ddd solid;
   background: var(--a-player-bar-bg);
 }
@@ -471,7 +477,7 @@ preview-header:not(.no-cover) .card-headings .heading, preview-header:not(.no-co
 .a-player-bar .button {
   font-size: 1.6rem;
   height: 100%;
-  padding: auto 0.2em !important;
+  padding: 0.2em !important;
   min-width: 3em;
   border-radius: 0px;
   transition: background-color 0.5s;
diff --git a/assets/src/assets/components.scss b/assets/src/assets/components.scss
index f3b0b32..1cb3a51 100644
--- a/assets/src/assets/components.scss
+++ b/assets/src/assets/components.scss
@@ -22,6 +22,7 @@
     --header-height: var(--preview-cover-size);
 
     --a-carousel-p: #{v.$text-size-medium};
+    --a-carousel-ml: calc(#{v.$mp-4} - 0.5rem);
     --a-carousel-gap: #{v.$mp-4};
     --a-carousel-nav-x: -#{v.$mp-3e};
 
@@ -44,6 +45,7 @@
 
     --a-player-url-fg: var(--highlight-color-2);
     --a-player-panel-bg: var(--highlight-color);
+    --a-player-bar-height: var(--nav-primary-height);
     --a-player-bar-bg: var(--highlight-color);
     --a-player-bar-title-alone-sz: #{v.$text-size-medium};
 
@@ -425,9 +427,11 @@
 
 // ---- ---- Carousel
 .a-carousel {
+    margin-left: calc( 0rem - var(--a-carousel-ml));
 
     .a-carousel-viewport {
         padding: var(--a-carousel-p) 0;
+        padding-left: var(--a-carousel-ml);
     }
 }
 
@@ -618,7 +622,7 @@
     display: flex;
     flex-direction: row;
     justify-content: center;
-    height: 3.75em !important;
+    height: var(--a-player-bar-height);
 
     border-top: 1px v.$grey-light solid;
     background: var(--a-player-bar-bg);
@@ -638,7 +642,7 @@
     .button {
         font-size: v.$text-size-bigger;
         height: 100%;
-        padding: auto 0.2em !important;
+        padding: 0.2em !important;
         min-width: 3em;
         border-radius: 0px;
         transition: background-color 0.5s;