diff --git a/layouts/partials/navbar.html b/layouts/partials/navbar.html
index 62fff0a1..3e461a41 100644
--- a/layouts/partials/navbar.html
+++ b/layouts/partials/navbar.html
@@ -14,9 +14,9 @@
 {{- end -}}
 
 
-<div class="nav-container hx:sticky hx:top-0 hx:z-20 hx:w-full hx:bg-transparent hx:print:hidden">
+<div class="hextra-nav-container hx:sticky hx:top-0 hx:z-20 hx:w-full hx:bg-transparent hx:print:hidden">
   <div
-    class="nav-container-blur hx:pointer-events-none hx:absolute hx:z-[-1] hx:h-full hx:w-full hx:bg-white hx:dark:bg-dark hx:shadow-[0_2px_4px_rgba(0,0,0,.02),0_1px_0_rgba(0,0,0,.06)] hx:contrast-more:shadow-[0_0_0_1px_#000] hx:dark:shadow-[0_-1px_0_rgba(255,255,255,.1)_inset] hx:contrast-more:dark:shadow-[0_0_0_1px_#fff]"
+    class="hextra-nav-container-blur hx:pointer-events-none hx:absolute hx:z-[-1] hx:h-full hx:w-full hx:bg-white hx:dark:bg-dark hx:shadow-[0_2px_4px_rgba(0,0,0,.02),0_1px_0_rgba(0,0,0,.06)] hx:contrast-more:shadow-[0_0_0_1px_#000] hx:dark:shadow-[0_-1px_0_rgba(255,255,255,.1)_inset] hx:contrast-more:dark:shadow-[0_0_0_1px_#fff]"
   ></div>
 
   <nav class="hextra-max-navbar-width hx:mx-auto hx:flex hx:items-center hx:justify-end hx:gap-2 hx:h-16 hx:px-6">
@@ -116,8 +116,8 @@
     {{- end -}}
 
 
-    <button type="button" aria-label="Menu" class="hamburger-menu hx:cursor-pointer hx:-mr-2 hx:rounded-sm hx:p-2 hx:active:bg-gray-400/20 hx:md:hidden">
+    <button type="button" aria-label="{{ (T "menu") | default "Menu" }}" aria-expanded="false" class="hextra-hamburger-menu hx:cursor-pointer hx:-mr-2 hx:rounded-sm hx:p-2 hx:active:bg-gray-400/20 hx:md:hidden hx:hextra-focus-visible-inset">
       {{- partial "utils/icon.html" (dict "name" "hamburger-menu" "attributes" "height=24") -}}
     </button>
   </nav>
-</div>
\ No newline at end of file
+</div>
diff --git a/layouts/partials/theme-toggle.html b/layouts/partials/theme-toggle.html
index cb09b141..6b0573ce 100644
--- a/layouts/partials/theme-toggle.html
+++ b/layouts/partials/theme-toggle.html
@@ -1,21 +1,58 @@
-{{- $hideLabel := .hideLabel | default false -}}
+{{- $hideLabel := .hideLabel -}}
+{{- $iconHeight := .iconHeight | default 12 -}}
+{{- $class := .class | default "hx:h-7 hx:px-2 hx:text-xs hx:hover:bg-gray-100 hx:hover:text-gray-900 hx:dark:hover:bg-primary-100/5 hx:dark:hover:text-gray-50 hx:font-medium hx:text-gray-600 hx:transition-colors hx:dark:text-gray-400" -}}
+{{- $location := .location | default "bottom" -}}
 
 {{- $changeTheme := (T "changeTheme") | default "Change theme" -}}
 {{- $light := (T "light") | default "Light" -}}
 {{- $dark := (T "dark") | default "Dark" -}}
+{{- $system := (T "system") | default "System" -}}
 
-
-<button
-  title="{{ $changeTheme }}"
-  data-theme="light"
-  class="theme-toggle hx:cursor-pointer hx:group hx:h-7 hx:rounded-md hx:px-2 hx:text-left hx:text-xs hx:font-medium hx:text-gray-600 hx:transition-colors hx:dark:text-gray-400 hx:hover:bg-gray-100 hx:hover:text-gray-900 hx:dark:hover:bg-primary-100/5 hx:dark:hover:text-gray-50"
-  type="button"
-  aria-label="{{ $changeTheme }}"
->
-  <div class="hx:flex hx:items-center hx:gap-2 hx:capitalize">
-    {{- partial "utils/icon.html" (dict "name" "sun" "attributes" "height=20 class=\"hx:group-data-[theme=light]:hidden\"") -}}
-    {{- if not $hideLabel }}<span class="hx:group-data-[theme=light]:hidden">{{ $light }}</span>{{ end -}}
-    {{- partial "utils/icon.html" (dict "name" "moon" "attributes" "height=20 class=\"hx:group-data-[theme=dark]:hidden\"") -}}
-    {{- if not $hideLabel }}<span class="hx:group-data-[theme=dark]:hidden">{{ $dark }}</span>{{ end -}}
-  </div>
-</button>
\ No newline at end of file
+<div class="hx:flex hx:justify-items-start hx:group" data-theme="light">
+  <button
+    title="{{ $changeTheme }}"
+    data-state="closed"
+    data-location="{{ $location }}"
+    class="hextra-theme-toggle hx:cursor-pointer hx:rounded-md hx:text-left hx:font-medium {{ $class }} hx:grow"
+    type="button"
+    aria-label="{{ $changeTheme }}"
+    aria-expanded="false"
+    aria-haspopup="menu"
+  >
+    <div class="hx:flex hx:items-center hx:gap-2 hx:capitalize">
+      {{- partial "utils/icon.html" (dict "name" "sun" "attributes" (printf `height=%d class="hx:group-data-[theme=dark]:hidden hx:group-data-[theme=system]:hidden"` $iconHeight)) -}}
+      {{- if not $hideLabel }}<span class="hx:group-data-[theme=dark]:hidden hx:group-data-[theme=system]:hidden">{{ $light }}</span>{{ end -}}
+      {{- partial "utils/icon.html" (dict "name" "moon" "attributes" (printf `height=%d class="hx:group-data-[theme=light]:hidden hx:group-data-[theme=system]:hidden"` $iconHeight)) -}}
+      {{- if not $hideLabel }}<span class="hx:group-data-[theme=light]:hidden hx:group-data-[theme=system]:hidden">{{ $dark }}</span>{{ end -}}
+      {{- partial "utils/icon.html" (dict "name" "contrast" "attributes" (printf `height=%d class="hx:group-data-[theme=dark]:hidden hx:group-data-[theme=light]:hidden"` $iconHeight)) -}}
+      {{- if not $hideLabel }}<span class="hx:group-data-[theme=dark]:hidden hx:group-data-[theme=light]:hidden">{{ $system }}</span>{{ end -}}
+    </div>
+  </button>
+  <ul
+    class="hextra-theme-toggle-options hx:hidden hx:z-20 hx:max-h-64 hx:overflow-auto hx:rounded-lg hx:border hx:border-gray-200 hx:bg-white hx:p-1 hx:text-sm hx:shadow-lg hx:dark:border-neutral-700 hx:dark:bg-neutral-900"
+    style="position: fixed; inset: auto auto 0px 0px; margin: 0px; min-width: 100px;"
+    data-theme="light"
+    role="menu"
+  >
+    {{- range slice (dict "theme" "light" "label" $light) (dict "theme" "dark" "label" $dark) (dict "theme" "system" "label" $system) }}
+      {{- $theme := .theme -}}
+      {{- $label := .label -}}
+      {{- $checkClass := cond (eq $theme "light") "hx:group-data-[theme=dark]:hidden hx:group-data-[theme=system]:hidden" (cond (eq $theme "dark") "hx:group-data-[theme=light]:hidden hx:group-data-[theme=system]:hidden" "hx:group-data-[theme=dark]:hidden hx:group-data-[theme=light]:hidden") -}}
+      <li role="none" class="hx:flex hx:flex-col">
+        <button
+          type="button"
+          role="menuitemradio"
+          aria-checked="{{ if eq $theme "light" }}true{{ else }}false{{ end }}"
+          tabindex="-1"
+          data-item="{{ $theme }}"
+          class="hx:text-gray-700 hx:dark:text-gray-300 hx:hover:bg-gray-100 hx:hover:text-gray-900 hx:dark:hover:bg-neutral-800 hx:dark:hover:text-gray-100 hx:relative hx:cursor-pointer hx:whitespace-nowrap hx:rounded-sm hx:py-1.5 hx:transition-colors hx:ltr:pl-3 hx:ltr:pr-9 hx:rtl:pr-3 hx:rtl:pl-9 hx:text-left hx:w-full hx:bg-transparent hx:border-0"
+        >
+          {{ $label }}
+          <span class="hx:absolute hx:inset-y-0 hx:flex hx:items-center hx:ltr:right-3 hx:rtl:left-3 {{ $checkClass }}">
+            {{- partial "utils/icon" (dict "name" "check" "attributes" "height=1em width=1em") -}}
+          </span>
+        </button>
+      </li>
+    {{- end }}
+  </ul>
+</div>