diff --git a/web/src/components/sidebar/CobaltLogo.svelte b/web/src/components/sidebar/CobaltLogo.svelte
index 25ef81ba..e4158a69 100644
--- a/web/src/components/sidebar/CobaltLogo.svelte
+++ b/web/src/components/sidebar/CobaltLogo.svelte
@@ -11,10 +11,10 @@
         display: flex;
         justify-content: center;
         align-items: center;
-        padding: calc(var(--padding) * 2);
+        padding: calc(var(--sidebar-tab-padding) * 2);
 
         /* accommodate space for scaling animation */
-        padding-bottom: calc(var(--padding) * 2 - var(--sidebar-inner-padding));
+        padding-bottom: calc(var(--sidebar-tab-padding) * 2 - var(--sidebar-inner-padding));
     }
 
     @media screen and (max-width: 535px) {
diff --git a/web/src/components/sidebar/SidebarTab.svelte b/web/src/components/sidebar/SidebarTab.svelte
index cbc9399b..9307d7a4 100644
--- a/web/src/components/sidebar/SidebarTab.svelte
+++ b/web/src/components/sidebar/SidebarTab.svelte
@@ -58,7 +58,7 @@
         align-items: center;
         text-align: center;
         gap: 3px;
-        padding: 10px 3px;
+        padding: var(--sidebar-tab-padding) 3px;
         color: var(--sidebar-highlight);
         font-size: var(--sidebar-font-size);
         opacity: 0.75;
diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
index 37f0078d..b69182fe 100644
--- a/web/src/routes/+layout.svelte
+++ b/web/src/routes/+layout.svelte
@@ -149,6 +149,7 @@
         --sidebar-width: 80px;
         --sidebar-font-size: 11px;
         --sidebar-inner-padding: 4px;
+        --sidebar-tab-padding: 10px;
 
         /* reduce default inset by 5px if it's not 0 */
         --sidebar-height-mobile: calc(