diff --git a/assets/css/_core/_header.scss b/assets/css/_core/_header.scss
index 3534c3a6..4de6ed58 100644
--- a/assets/css/_core/_header.scss
+++ b/assets/css/_core/_header.scss
@@ -82,7 +82,7 @@ header {
       }
     }
 
-    &.language,
+    &.language-switch,
     &.theme-switch {
       cursor: pointer;
     }
@@ -221,7 +221,7 @@ header {
           display: block;
           @include transform(translateX(-0.5rem));
         }
-        &.language:hover .sub-menu {
+        &.language-switch:hover .sub-menu {
           @include transform(translateX(calc(1.75rem - 100%)));
         }
       }
@@ -233,16 +233,12 @@ header {
           width: 0;
           margin: 0.125rem 0.25rem;
           padding: 0;
-          border-left: 1px dashed lighten($global-font-secondary-color, 20%);
+          border-left: 1px dashed lighten($global-font-secondary-color, 15%);
 
           [data-theme='dark'] & {
-            border-left-color: darken($global-font-secondary-color-dark, 20%);
+            border-left-color: darken($global-font-secondary-color-dark, 15%);
           }
         }
-
-        &.language {
-          margin-right: 0;
-        }
       }
 
       .sub-menu {
@@ -369,6 +365,14 @@ header {
         box-sizing: border-box;
         padding: ($header-height - 2.5rem) / 2 1rem;
         line-height: 2.5rem;
+        position: sticky;
+        top: 0;
+        z-index: 1;
+        background-color: $header-background-color;
+ 
+        [data-theme='dark'] & {
+          background-color: $header-background-color-dark;
+        }
       }
 
       .search {
@@ -400,7 +404,7 @@ header {
         line-height: 2.5rem;
         padding: 0 1rem;
 
-        &:hover {
+        &:not(.menu-system):hover {
           background-color: lighten($global-font-secondary-color, 24%);
 
           [data-theme='dark'] & {
@@ -425,29 +429,37 @@ header {
             max-width: 80%;
           }
         }
-        
-        &.theme-switch,
-        &.language {
-          text-align: center;
-          position: sticky;
-          background-color: $header-background-color;
+      }
 
-          [data-theme='dark'] & {
-            background-color: $header-background-color-dark;
+      .menu-system {
+        display: flex;
+        justify-content: center;
+        gap: 0.25rem;
+        position: sticky;
+        bottom: 0;
+        line-height: 2.5rem;
+        padding: 0 1rem;
+        background-color: $header-background-color;
+ 
+        [data-theme='dark'] & {
+          background-color: $header-background-color-dark;
+        }
+
+        .menu-system-item {
+          padding-inline: 0.5rem;
+        }
+
+        .language-switch {
+          position: relative;
+
+          .language-select {
+            position: absolute;
+            opacity: 0;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
           }
-          bottom: 0;
-        }
-        &.theme-switch:has(+ .language) {
-          bottom: 2.5rem;
-        }
-
-        .language-select {
-          position: absolute;
-          opacity: 0;
-          left: 0;
-          top: 0;
-          width: 100%;
-          height: 100%;
         }
       }
 
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index dca951fc..7df177b2 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -108,7 +108,7 @@
           {{ dict "Class" "fa-solid fa-adjust fa-fw" | partial "plugin/icon.html" }}
         </li>
         {{- if .Site.IsMultiLingual -}}
-          <li class="menu-item language">
+          <li class="menu-item language-switch">
             <span role="button" aria-label="{{ T "header.selectLanguage" }}" title="{{ T "header.selectLanguage" }}">
               {{- dict "Class" "fa-solid fa-language fa-fw" | partial "plugin/icon.html" -}}
             </span>
@@ -277,35 +277,35 @@
             </li>
           {{- end -}}
         {{- end -}}
-        <li class="menu-item theme-switch" title="{{ T "header.switchTheme" }}">
-          {{ dict "Class" "fa-solid fa-adjust fa-fw" | partial "plugin/icon.html" }}
-        </li>
-        {{- if .Site.IsMultiLingual -}}
-          <li class="menu-item language">
-            <span role="button" aria-label="{{ T "header.selectLanguage" }}" title="{{ T "header.selectLanguage" }}">
-              {{- .Language.LanguageName -}}
-              {{ dict "Class" "dropdown-icon fa-solid fa-chevron-down" | partial "plugin/icon.html" }}
+        <li class="menu-item menu-system">
+          <span class="menu-system-item theme-switch" title="{{ T "header.switchTheme" }}">{{ dict "Class" "fa-solid fa-adjust fa-fw" | partial "plugin/icon.html" }}</span>
+          {{- if .Site.IsMultiLingual -}}
+            <span class="menu-system-item language-switch">
+              <span role="button" aria-label="{{ T "header.selectLanguage" }}" title="{{ T "header.selectLanguage" }}">
+                {{- .Language.LanguageName -}}
+                {{- dict "Class" "dropdown-icon fa-solid fa-chevron-down" | partial "plugin/icon.html" -}}
+              </span>
+              <select class="language-select" onchange="location = this.value;">
+                {{- if eq .Kind "404" -}}
+                  {{- range .Sites -}}
+                    {{- $link := printf "%v/404.html" .LanguagePrefix -}}
+                    <option value="{{ $link }}"{{ if eq . $.Site }} selected disabled{{ end }}>
+                      {{- .Language.LanguageName -}}
+                    </option>
+                  {{- end -}}
+                {{- else if gt (len .AllTranslations) 1 -}}
+                  {{- range .AllTranslations -}}
+                    <option value="{{ .RelPermalink }}"{{ if eq .Lang $.Lang }} selected disabled{{ end }}>
+                      {{- .Language.LanguageName -}}
+                    </option>
+                  {{- end -}}
+                {{- else -}}
+                  <option disabled>{{- T "header.noMoretTranslations" -}}</option>
+                {{- end -}}
+              </select>
             </span>
-            <select class="language-select" onchange="location = this.value;">
-              {{- if eq .Kind "404" -}}
-                {{- range .Sites -}}
-                  {{- $link := printf "%v/404.html" .LanguagePrefix -}}
-                  <option value="{{ $link }}"{{ if eq . $.Site }} selected disabled{{ end }}>
-                    {{- .Language.LanguageName -}}
-                  </option>
-                {{- end -}}
-              {{- else if gt (len .AllTranslations) 1 -}}
-                {{- range .AllTranslations -}}
-                  <option value="{{ .RelPermalink }}"{{ if eq .Lang $.Lang }} selected disabled{{ end }}>
-                    {{- .Language.LanguageName -}}
-                  </option>
-                {{- end -}}
-              {{- else -}}
-                <option disabled>{{- T "header.noMoretTranslations" -}}</option>
-              {{- end -}}
-            </select>
-          </li>
-        {{- end -}}
+          {{- end -}}
+        </li>
       </ul>
     </nav>
   </div>