diff --git a/frontend/src/assets/styles/global.scss b/frontend/src/assets/styles/global.scss
index 7e533d400f..11d30f3322 100644
--- a/frontend/src/assets/styles/global.scss
+++ b/frontend/src/assets/styles/global.scss
@@ -43,6 +43,7 @@
   --light-theme-miscellaneous-interactive: #0073e6;
   --light-theme-background-background-selected: #93939533;
   --light-theme-text-text-disabled: rgba(19, 19, 21, 0.25);
+  --light-theme-text-text-on-color: #FFFFFF;
 
   //Buttons
   --cds-button-disabled: #c6c6c8;
@@ -1006,6 +1007,15 @@ cds-header-global-action {
   background: var(--light-theme-layer-layer-02, #FFF) !important;
 }
 
+cds-header-menu-button::part(svg) {
+  width: 1rem;
+  height: 1rem;
+}
+
+cds-header-menu-button:not([active])::part(svg) {
+  fill: var(--light-theme-text-text-on-color, #FFF);
+}
+
 cds-header-global-action svg {
   fill: var(--dark-theme-focus-focus);
 }
diff --git a/frontend/src/components/MainHeaderComponent.vue b/frontend/src/components/MainHeaderComponent.vue
index 81f63e7d3e..5700723be1 100644
--- a/frontend/src/components/MainHeaderComponent.vue
+++ b/frontend/src/components/MainHeaderComponent.vue
@@ -79,7 +79,9 @@ watchEffect((onCleanup) => {
     <cds-header-menu-button
       v-if="$session?.user?.provider === 'idir'"
       button-label-active="Close menu"
-      button-label-inactive="Open menu">
+      button-label-inactive="Open menu"
+      v-shadow="2"
+    >
     </cds-header-menu-button>
 
     <a href="https://gov.bc.ca" v-if="$session.user?.provider !== 'idir'" class="bclogotop">