diff --git a/resources/themes/backend/views/livewire/settings/appearance.blade.php b/resources/themes/backend/views/livewire/settings/appearance.blade.php
index c1cdd43..70e466c 100755
--- a/resources/themes/backend/views/livewire/settings/appearance.blade.php
+++ b/resources/themes/backend/views/livewire/settings/appearance.blade.php
@@ -3,36 +3,48 @@
 
     <flux:heading class="sr-only">{{ __('Appearance settings') }}</flux:heading>
 
-    <x-settings.layout :heading="__('Appearance')" :subheading=" __('Update the appearance settings for your account')">
-        <div class="hd-appearance-switch" role="group" aria-label="{{ __('Appearance') }}">
-            <button type="button" data-hd-appearance-value="light" onclick="if(window.hdSetAppearance){window.hdSetAppearance('light')}" class="hd-appearance-choice">
-                <i class="fa-regular fa-sun" aria-hidden="true"></i><span>{{ __('Light') }}</span>
+    <x-settings.layout
+        :heading="__('Appearance')"
+        :subheading="__('Update the appearance settings for your account')"
+    >
+        <div
+            class="hd-appearance-switch"
+            role="group"
+            aria-label="{{ __('Appearance') }}"
+            x-data
+        >
+            <button
+                type="button"
+                class="hd-appearance-choice"
+                :class="{ 'is-active': $flux.appearance === 'light' }"
+                :aria-pressed="$flux.appearance === 'light'"
+                @click="$flux.appearance = 'light'"
+            >
+                <i class="fa-regular fa-sun" aria-hidden="true"></i>
+                <span>{{ __('Light') }}</span>
             </button>
-            <button type="button" data-hd-appearance-value="dark" onclick="if(window.hdSetAppearance){window.hdSetAppearance('dark')}" class="hd-appearance-choice">
-                <i class="fa-regular fa-moon" aria-hidden="true"></i><span>{{ __('Dark') }}</span>
+
+            <button
+                type="button"
+                class="hd-appearance-choice"
+                :class="{ 'is-active': $flux.appearance === 'dark' }"
+                :aria-pressed="$flux.appearance === 'dark'"
+                @click="$flux.appearance = 'dark'"
+            >
+                <i class="fa-regular fa-moon" aria-hidden="true"></i>
+                <span>{{ __('Dark') }}</span>
             </button>
-            <button type="button" data-hd-appearance-value="system" onclick="if(window.hdSetAppearance){window.hdSetAppearance('system')}" class="hd-appearance-choice">
-                <i class="fa-solid fa-desktop" aria-hidden="true"></i><span>{{ __('System') }}</span>
+
+            <button
+                type="button"
+                class="hd-appearance-choice"
+                :class="{ 'is-active': $flux.appearance === 'system' }"
+                :aria-pressed="$flux.appearance === 'system'"
+                @click="$flux.appearance = 'system'"
+            >
+                <i class="fa-solid fa-desktop" aria-hidden="true"></i>
+                <span>{{ __('System') }}</span>
             </button>
         </div>
-        <script>
-        (function () {
-            function sync() {
-                var value = document.documentElement.getAttribute('data-hd-appearance') || 'system';
-                var buttons = document.querySelectorAll('[data-hd-appearance-value]');
-                for (var i = 0; i < buttons.length; i++) {
-                    if (buttons[i].getAttribute('data-hd-appearance-value') === value) buttons[i].classList.add('is-active');
-                    else buttons[i].classList.remove('is-active');
-                }
-            }
-            if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', sync, false); else sync();
-            document.addEventListener('click', function (event) {
-                var target = event.target;
-                while (target && target !== document && !target.getAttribute('data-hd-appearance-value')) target = target.parentNode;
-                if (target && target.getAttribute) setTimeout(sync, 0);
-            }, false);
-            document.addEventListener('livewire:navigated', sync, false);
-        }());
-        </script>
     </x-settings.layout>
 </section>
diff --git a/resources/themes/backend/views/partials/head.blade.php b/resources/themes/backend/views/partials/head.blade.php
index 728a3b4..f97538a 100644
--- a/resources/themes/backend/views/partials/head.blade.php
+++ b/resources/themes/backend/views/partials/head.blade.php
@@ -15,30 +15,11 @@
 (function () {
     var ua = navigator.userAgent || '';
     var isIOS12 = /(iPad|iPhone|iPod).*OS 12[_\.]/.test(ua);
+
     if (isIOS12) {
-        document.documentElement.className += (document.documentElement.className ? ' ' : '') + 'hd-ios12';
+        document.documentElement.className +=
+            (document.documentElement.className ? ' ' : '') + 'hd-ios12';
     }
-
-    if (!isIOS12) return;
-
-    function applyAppearance(value) {
-        var dark = value === 'dark' || (value === 'system' && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches);
-        if (dark) document.documentElement.classList.add('dark');
-        else document.documentElement.classList.remove('dark');
-        document.documentElement.setAttribute('data-hd-appearance', value);
-    }
-
-    var stored = 'system';
-    try { stored = localStorage.getItem('flux.appearance') || localStorage.getItem('appearance') || 'system'; } catch (e) {}
-    applyAppearance(stored);
-
-    window.hdSetAppearance = function (value) {
-        try {
-            localStorage.setItem('flux.appearance', value);
-            localStorage.setItem('appearance', value);
-        } catch (e) {}
-        applyAppearance(value);
-    };
 }());
 </script>
 <title>{{ filled($title ?? null) ? $title.' - '.config('app.name', 'Laravel') : config('app.name', 'Laravel') }}</title>