diff --git a/apps/desktop/src/scss/environment.scss b/apps/desktop/src/scss/environment.scss
index e6ea95ef17e..e000927ea88 100644
--- a/apps/desktop/src/scss/environment.scss
+++ b/apps/desktop/src/scss/environment.scss
@@ -1,4 +1,8 @@
-html.os_macos {
+:root {
+  --header-height: 54px;
+}
+
+html.os_macos {
   .vault .header-search {
     -webkit-app-region: drag;
 
@@ -12,7 +16,7 @@
     padding-top: 0;
   }
 
-  --bit-sidenav-macos-extra-top-padding: 28px;
+  --bit-sidenav-extra-top-padding: var(--header-height);
 }
 
 .environment-selector-btn {
diff --git a/apps/desktop/src/scss/header.scss b/apps/desktop/src/scss/header.scss
index e4677d74dfe..6555b2750dd 100644
--- a/apps/desktop/src/scss/header.scss
+++ b/apps/desktop/src/scss/header.scss
@@ -1,7 +1,7 @@
 .header {
   -webkit-app-region: drag;
-  min-height: 54px;
-  max-height: 54px;
+  min-height: var(--header-height);
+  max-height: var(--header-height);
   display: grid;
   grid-template-columns: 25% 1fr 25%;
   grid-column-gap: 5px;
diff --git a/libs/components/src/navigation/nav-logo.component.html b/libs/components/src/navigation/nav-logo.component.html
index 07f46f18038..44183c8d7a6 100644
--- a/libs/components/src/navigation/nav-logo.component.html
+++ b/libs/components/src/navigation/nav-logo.component.html
@@ -1,10 +1,11 @@
 <div
-  class="tw-px-2 tw-pt-[calc(0.5rem_+_var(--bit-sidenav-macos-extra-top-padding,_0px))] tw-bg-bg-sidenav"
-  [class]="
-    sideNavService.open()
-      ? 'tw-sticky tw-top-0 tw-z-50 tw-pb-4'
-      : 'tw-pb-[calc(theme(spacing.8)_+_2px)]'
-  "
+  class="tw-px-2 tw-bg-bg-sidenav"
+  [ngClass]="{
+    'tw-sticky tw-top-0 tw-z-50 tw-pb-4': sideNavService.open(),
+    'tw-pb-[calc(theme(spacing.8)_+_2px)]': !sideNavService.open(),
+    'tw-pt-[calc(0.5rem_+_var(--bit-sidenav-extra-top-padding,_0px))]': sideNavService.isOverlay(),
+    'tw-pt-2': !sideNavService.isOverlay(),
+  }"
 >
   <!-- absolutely position the link svg to avoid shifting layout when sidenav is closed -->
   <a
diff --git a/libs/components/src/navigation/nav-logo.component.ts b/libs/components/src/navigation/nav-logo.component.ts
index 6e802235b2a..63366843882 100644
--- a/libs/components/src/navigation/nav-logo.component.ts
+++ b/libs/components/src/navigation/nav-logo.component.ts
@@ -1,3 +1,4 @@
+import { NgClass } from "@angular/common";
 import { ChangeDetectionStrategy, Component, input, inject } from "@angular/core";
 import { RouterLinkActive, RouterLink } from "@angular/router";
 
@@ -10,7 +11,7 @@ import { SideNavService } from "./side-nav.service";
 @Component({
   selector: "bit-nav-logo",
   templateUrl: "./nav-logo.component.html",
-  imports: [RouterLinkActive, RouterLink, SvgComponent],
+  imports: [NgClass, RouterLinkActive, RouterLink, SvgComponent],
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: { class: "tw-contents" },
 })