diff --git a/app/styles/common.css b/app/styles/common.css
index ac9c0d438..8493e5c24 100644
--- a/app/styles/common.css
+++ b/app/styles/common.css
@@ -1152,7 +1152,7 @@ dialog::backdrop {
 
 .top-leaderboard {
   min-height: 110px;
-  margin-block-start: var(--s-16);
+  margin-block-start: var(--leaderboard-top-spacing);
 }
 
 .youtube__container {
diff --git a/app/styles/layout.css b/app/styles/layout.css
index 3f8c7dd82..1ed7675d7 100644
--- a/app/styles/layout.css
+++ b/app/styles/layout.css
@@ -328,7 +328,9 @@ Firefox scrollbar styling is above in .layout__side-nav
   }
 
   .layout__main {
-    padding-block-start: calc(env(safe-area-inset-top) + var(--s-16));
+    padding-block-start: calc(
+      env(safe-area-inset-top) + var(--leaderboard-top-spacing)
+    );
   }
 }
 
diff --git a/app/styles/vars.css b/app/styles/vars.css
index 960838c1d..ed041e015 100644
--- a/app/styles/vars.css
+++ b/app/styles/vars.css
@@ -88,6 +88,7 @@ html {
   --sparse: 0.4px;
   --label-margin: var(--s-1);
   --inactive-image-filter: grayscale(100%) brightness(30%);
+  --leaderboard-top-spacing: var(--s-4);
 }
 
 html.dark {