diff --git a/packages/base/Resources/Private/PageView/Partials/Navigation/Main.html b/packages/base/Resources/Private/PageView/Partials/Navigation/Main.html
index 5031816..d2a2bcf 100644
--- a/packages/base/Resources/Private/PageView/Partials/Navigation/Main.html
+++ b/packages/base/Resources/Private/PageView/Partials/Navigation/Main.html
@@ -4,11 +4,11 @@
             <f:image src="EXT:base/Resources/Public/Images/logo.png" alt="Logo" class="block max-h-[50px] h-auto w-auto" />
         </a>
         <button class="nav-toggle group lg:hidden relative w-[30px] h-[30px] cursor-pointer ml-auto bg-none border-none" id="navToggle" aria-label="Toggle Menu">
-            <span class="nav-toggle-icon block relative w-full h-[2px] bg-primary transition-all duration-300
-                         before:content-[''] before:block before:absolute before:w-full before:h-[2px] before:bg-primary before:left-0 before:-top-[8px] before:transition-all before:duration-300
-                         after:content-[''] after:block after:absolute after:w-full after:h-[2px] after:bg-primary after:left-0 after:top-[8px] after:transition-all after:duration-300
-                         group-[.active]:bg-transparent group-[.active]:before:rotate-45 group-[.active]:before:translate-x-[5px] group-[.active]:before:translate-y-[5px]
-                         group-[.active]:after:-rotate-45 group-[.active]:after:translate-x-[5px] group-[.active]:after:-translate-y-[5px]"></span>
+            <span class="nav-toggle-icon block relative w-full h-[2px] bg-white transition-all duration-300
+                         before:content-[''] before:block before:absolute before:w-full before:h-[2px] before:bg-white before:left-0 before:-top-[8px] before:transition-all before:duration-300
+                         after:content-[''] after:block after:absolute after:w-full after:h-[2px] after:bg-white after:left-0 after:top-[8px] after:transition-all after:duration-300
+                         group-[.active]:bg-transparent group-[.active]:before:rotate-45 group-[.active]:before:translate-y-[8px]
+                         group-[.active]:after:-rotate-45 group-[.active]:after:-translate-y-[8px]"></span>
         </button>
 
         <ul class="nav-links flex items-center list-none mx-auto font-hajime text-primary
diff --git a/packages/base/Resources/Public/Scss/layouts/_home-page.scss b/packages/base/Resources/Public/Scss/layouts/_home-page.scss
index e69e06d..a612a54 100644
--- a/packages/base/Resources/Public/Scss/layouts/_home-page.scss
+++ b/packages/base/Resources/Public/Scss/layouts/_home-page.scss
@@ -9,12 +9,7 @@
 
         // Mobile link/icon colors (on primary background)
         #mainNav .nav-link { // Target links within #mainNav
-            @apply text-white hover:text-gray-200;
-        }
-        #mainNav .nav-toggle-icon,
-        #mainNav .nav-toggle-icon::before,
-        #mainNav .nav-toggle-icon::after {
-             @apply bg-white; // Ensure mobile toggle is visible
+            @apply text-primary lg:text-white lg:hover:text-gray-200;
         }
         // Adjust mobile submenu link colors if needed (depends on dropdown background)
         #mainNav .sub-menu .nav-link {