diff --git a/app/Livewire/Settings/DeleteUserForm.php b/app/Livewire/Settings/DeleteUserForm.php
index 74a2ba2..2906ace 100644
--- a/app/Livewire/Settings/DeleteUserForm.php
+++ b/app/Livewire/Settings/DeleteUserForm.php
@@ -15,6 +15,8 @@ final class DeleteUserForm extends Component
 
     public string $password = '';
 
+    public bool $confirmingUserDeletion = false;
+
     /**
      * Delete the currently authenticated user.
      */
diff --git a/resources/views/components/auth-header.blade.php b/resources/views/components/auth-header.blade.php
index e596a3f..9d38db4 100644
--- a/resources/views/components/auth-header.blade.php
+++ b/resources/views/components/auth-header.blade.php
@@ -4,6 +4,6 @@
 ])
 
 <div class="flex w-full flex-col text-center">
-    <flux:heading size="xl">{{ $title }}</flux:heading>
-    <flux:subheading>{{ $description }}</flux:subheading>
+    <p class="text-2xl font-bold">{{ $title }}</p>
+    <p class="text-sm text-gray-500">{{ $description }}</p>
 </div>
diff --git a/resources/views/components/dashboard-sidebar.blade.php b/resources/views/components/dashboard-sidebar.blade.php
index 721681c..9f6e911 100644
--- a/resources/views/components/dashboard-sidebar.blade.php
+++ b/resources/views/components/dashboard-sidebar.blade.php
@@ -54,17 +54,17 @@ public function navItems(): DataCollection
             new NavItemData(
                 label: 'Settings',
                 icon: 'lucide.settings',
-                active_pattern: 'settings.*',
+                active_pattern: 'settings.*', // Kept as fallback, but handled dynamically in view
                 sub_menu: NavSubItemData::collect([
                     new NavSubItemData(
                         label: 'Profile',
                         route: 'profile.edit',
-                        active_pattern: 'settings.profile',
+                        active_pattern: 'profile.edit',
                     ),
                     new NavSubItemData(
                         label: 'Security',
                         route: 'security.edit',
-                        active_pattern: 'settings.security',
+                        active_pattern: 'security.edit',
                     ),
                 ], DataCollection::class)
             ),
@@ -72,6 +72,7 @@ public function navItems(): DataCollection
     }
 };
 ?>
+
 <aside
     x-data="{ collapsed: @entangle('collapsed') }"
     :class="collapsed ? 'w-12' : 'w-64'"
@@ -114,7 +115,19 @@ class="flex-1 py-3 px-2 space-y-1 overflow-y-auto overflow-x-hidden"
         aria-label="Main navigation"
     >
         @foreach ($this->navItems() as $item)
-            @php $isActive = request()->routeIs($item->active_pattern); @endphp
+            @php
+                $isActive = request()->routeIs($item->active_pattern);
+
+                // Check sub-menu active states without triggering Arrayable casting
+                if (! $isActive && $item->sub_menu) {
+                    foreach ($item->sub_menu as $subItem) {
+                        if (request()->routeIs($subItem->active_pattern)) {
+                            $isActive = true;
+                            break;
+                        }
+                    }
+                }
+            @endphp
 
             @if ($item->sub_menu)
                 {{-- ITEM WITH SUBMENU --}}
@@ -230,7 +243,7 @@ class="group w-full flex items-center gap-3 px-2 py-2.5 rounded-lg
                    focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-teal-400"
             :aria-label="collapsed ? 'Expand sidebar' : 'Collapse sidebar'"
         >
-            <span class="flex-shrink-0 flex items-center justify-center w-5 h-5" aria-hidden="true">
+            <span class="shrink-0 flex items-center justify-center w-5 h-5" aria-hidden="true">
                 <svg :class="collapsed ? 'rotate-180' : 'rotate-0'"
                      class="w-4 h-4 transition-transform duration-300 ease-in-out" fill="none" viewBox="0 0 24 24"
                      stroke-width="2" stroke="currentColor">
diff --git a/resources/views/components/settings/layout.blade.php b/resources/views/components/settings/layout.blade.php
index 3a65247..dd7b348 100644
--- a/resources/views/components/settings/layout.blade.php
+++ b/resources/views/components/settings/layout.blade.php
@@ -1,17 +1,7 @@
 <div class="flex items-start max-md:flex-col">
-    <div class="me-10 w-full pb-4 md:w-[220px]">
-        <flux:navlist aria-label="{{ __('Settings') }}">
-            <flux:navlist.item :href="route('profile.edit')" wire:navigate>{{ __('Profile') }}</flux:navlist.item>
-            <flux:navlist.item :href="route('security.edit')" wire:navigate>{{ __('Security') }}</flux:navlist.item>
-            <flux:navlist.item :href="route('appearance.edit')" wire:navigate>{{ __('Appearance') }}</flux:navlist.item>
-        </flux:navlist>
-    </div>
-
-    <flux:separator class="md:hidden" />
-
-    <div class="flex-1 self-stretch max-md:pt-6">
-        <flux:heading>{{ $heading ?? '' }}</flux:heading>
-        <flux:subheading>{{ $subheading ?? '' }}</flux:subheading>
+    <div class="flex-1 self-stretch pt-6">
+        <p class="text-xl text-gray-700 mb-2 font-medium">{{ $heading ?? '' }}</p>
+        <p class="text-sm text-gray-500">{{ $subheading ?? '' }}</p>
 
         <div class="mt-5 w-full max-w-lg">
             {{ $slot }}
diff --git a/resources/views/layouts/auth/simple.blade.php b/resources/views/layouts/auth/simple.blade.php
index 0a6f894..d360f95 100644
--- a/resources/views/layouts/auth/simple.blade.php
+++ b/resources/views/layouts/auth/simple.blade.php
@@ -1,29 +1,23 @@
 <!DOCTYPE html>
 <html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="dark">
-    <head>
-        @include('partials.head')
-    </head>
-    <body class="min-h-screen bg-white antialiased dark:bg-linear-to-b dark:from-neutral-950 dark:to-neutral-900">
-        <div class="bg-background flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10">
-            <div class="flex w-full max-w-sm flex-col gap-2">
-                <a href="{{ route('home') }}" class="flex flex-col items-center gap-2 font-medium" wire:navigate>
+<head>
+    @include('partials.head')
+</head>
+<body class="min-h-screen bg-gray-10 antialiased">
+<div class="flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10">
+    <div class="flex w-full max-w-sm flex-col gap-2">
+        <a href="{{ route('home') }}" class="flex flex-col items-center gap-2 font-medium" wire:navigate>
                     <span class="flex h-9 w-9 mb-1 items-center justify-center rounded-md">
-                        <x-app-logo-icon class="size-9 fill-current text-black dark:text-white" />
+                        <x-app-logo-icon class="size-9 fill-current text-black"/>
                     </span>
-                    <span class="sr-only">{{ config('app.name', 'Laravel') }}</span>
-                </a>
-                <div class="flex flex-col gap-6">
-                    {{ $slot }}
-                </div>
-            </div>
+            <span class="sr-only">{{ config('app.name', 'Laravel') }}</span>
+        </a>
+        <div class="flex flex-col gap-6 mt-4">
+            {{ $slot }}
         </div>
-
-        @persist('toast')
-            <flux:toast.group>
-                <flux:toast />
-            </flux:toast.group>
-        @endpersist
-
-        @fluxScripts
-    </body>
+    </div>
+    <x-mary-toast/>
+</div>
+@livewireScripts
+</body>
 </html>
diff --git a/resources/views/livewire/auth/confirm-password.blade.php b/resources/views/livewire/auth/confirm-password.blade.php
index 13dd110..f4a4557 100644
--- a/resources/views/livewire/auth/confirm-password.blade.php
+++ b/resources/views/livewire/auth/confirm-password.blade.php
@@ -5,12 +5,12 @@
             :description="__('This is a secure area of the application. Please confirm your password before continuing.')"
         />
 
-        <x-auth-session-status class="text-center" :status="session('status')" />
+        <x-auth-session-status class="text-center" :status="session('status')"/>
 
         <form method="POST" action="{{ route('password.confirm.store') }}" class="flex flex-col gap-6">
             @csrf
 
-            <flux:input
+            <x-mary-input
                 name="password"
                 :label="__('Password')"
                 type="password"
@@ -20,9 +20,9 @@
                 viewable
             />
 
-            <flux:button variant="primary" type="submit" class="w-full" data-test="confirm-password-button">
+            <x-mary-button type="submit" class="w-full btn-primary" data-test="confirm-password-button">
                 {{ __('Confirm') }}
-            </flux:button>
+            </x-mary-button>
         </form>
     </div>
 </x-layouts::auth>
diff --git a/resources/views/livewire/auth/forgot-password.blade.php b/resources/views/livewire/auth/forgot-password.blade.php
index 5f1cdad..391e493 100644
--- a/resources/views/livewire/auth/forgot-password.blade.php
+++ b/resources/views/livewire/auth/forgot-password.blade.php
@@ -1,15 +1,16 @@
 <x-layouts::auth :title="__('Forgot password')">
     <div class="flex flex-col gap-6">
-        <x-auth-header :title="__('Forgot password')" :description="__('Enter your email to receive a password reset link')" />
+        <x-auth-header :title="__('Forgot password')"
+                       :description="__('Enter your email to receive a password reset link')"/>
 
         <!-- Session Status -->
-        <x-auth-session-status class="text-center" :status="session('status')" />
+        <x-auth-session-status class="text-center" :status="session('status')"/>
 
         <form method="POST" action="{{ route('password.email') }}" class="flex flex-col gap-6">
             @csrf
 
             <!-- Email Address -->
-            <flux:input
+            <x-mary-input
                 name="email"
                 :label="__('Email address')"
                 type="email"
@@ -18,14 +19,15 @@
                 placeholder="email@example.com"
             />
 
-            <flux:button variant="primary" type="submit" class="w-full" data-test="email-password-reset-link-button">
+            <x-mary-button type="submit" class="w-full btn-primary" data-test="email-password-reset-link-button">
                 {{ __('Email password reset link') }}
-            </flux:button>
+            </x-mary-button>
         </form>
 
         <div class="space-x-1 rtl:space-x-reverse text-center text-sm text-zinc-400">
             <span>{{ __('Or, return to') }}</span>
-            <flux:link :href="route('login')" wire:navigate>{{ __('log in') }}</flux:link>
+            <a class="font-bold text-gray-900 hover:text-blue-500" href="{{route('login')}}"
+               wire:navigate>{{ __('log in') }}</a>
         </div>
     </div>
 </x-layouts::auth>
diff --git a/resources/views/livewire/auth/login.blade.php b/resources/views/livewire/auth/login.blade.php
index e9167da..6396ecf 100644
--- a/resources/views/livewire/auth/login.blade.php
+++ b/resources/views/livewire/auth/login.blade.php
@@ -1,15 +1,16 @@
 <x-layouts::auth :title="__('Log in')">
     <div class="flex flex-col gap-6">
-        <x-auth-header :title="__('Log in to your account')" :description="__('Enter your email and password below to log in')" />
+        <x-auth-header :title="__('Log in to your account')"
+                       :description="__('Enter your email and password below to log in')"/>
 
         <!-- Session Status -->
-        <x-auth-session-status class="text-center" :status="session('status')" />
+        <x-auth-session-status class="text-center" :status="session('status')"/>
 
         <form method="POST" action="{{ route('login.store') }}" class="flex flex-col gap-6">
             @csrf
 
             <!-- Email Address -->
-            <flux:input
+            <x-mary-input
                 name="email"
                 :label="__('Email address')"
                 :value="old('email')"
@@ -22,7 +23,7 @@
 
             <!-- Password -->
             <div class="relative">
-                <flux:input
+                <x-mary-input
                     name="password"
                     :label="__('Password')"
                     type="password"
@@ -33,26 +34,29 @@
                 />
 
                 @if (Route::has('password.request'))
-                    <flux:link class="absolute top-0 text-sm end-0" :href="route('password.request')" wire:navigate>
+                    <a class="absolute top-0 text-sm inset-e-0 hover:text-blue-500"
+                       href="{{route('password.request')}}"
+                       wire:navigate>
                         {{ __('Forgot your password?') }}
-                    </flux:link>
+                    </a>
                 @endif
             </div>
 
             <!-- Remember Me -->
-            <flux:checkbox name="remember" :label="__('Remember me')" :checked="old('remember')" />
+            <x-mary-checkbox name="remember" :label="__('Remember me')" :checked="old('remember')"/>
 
             <div class="flex items-center justify-end">
-                <flux:button variant="primary" type="submit" class="w-full" data-test="login-button">
+                <x-mary-button type="submit" class="w-full btn-primary" data-test="login-button">
                     {{ __('Log in') }}
-                </flux:button>
+                </x-mary-button>
             </div>
         </form>
 
         @if (Route::has('register'))
             <div class="space-x-1 text-sm text-center rtl:space-x-reverse text-zinc-600 dark:text-zinc-400">
                 <span>{{ __('Don\'t have an account?') }}</span>
-                <flux:link :href="route('register')" wire:navigate>{{ __('Sign up') }}</flux:link>
+                <a href="{{route('register')}}" class="font-bold text-gray-900 hover:text-blue-500"
+                   wire:navigate>{{ __('Sign up') }}</a>
             </div>
         @endif
     </div>
diff --git a/resources/views/livewire/auth/register.blade.php b/resources/views/livewire/auth/register.blade.php
index 6c12579..dea1691 100644
--- a/resources/views/livewire/auth/register.blade.php
+++ b/resources/views/livewire/auth/register.blade.php
@@ -1,14 +1,15 @@
 <x-layouts::auth :title="__('Register')">
     <div class="flex flex-col gap-6">
-        <x-auth-header :title="__('Create an account')" :description="__('Enter your details below to create your account')" />
+        <x-auth-header :title="__('Create an account')"
+                       :description="__('Enter your details below to create your account')"/>
 
         <!-- Session Status -->
-        <x-auth-session-status class="text-center" :status="session('status')" />
+        <x-auth-session-status class="text-center" :status="session('status')"/>
 
         <form method="POST" action="{{ route('register.store') }}" class="flex flex-col gap-6">
             @csrf
             <!-- Name -->
-            <flux:input
+            <x-mary-input
                 name="name"
                 :label="__('Name')"
                 :value="old('name')"
@@ -20,7 +21,7 @@
             />
 
             <!-- Email Address -->
-            <flux:input
+            <x-mary-input
                 name="email"
                 :label="__('Email address')"
                 :value="old('email')"
@@ -31,7 +32,7 @@
             />
 
             <!-- Password -->
-            <flux:input
+            <x-mary-input
                 name="password"
                 :label="__('Password')"
                 type="password"
@@ -42,7 +43,7 @@
             />
 
             <!-- Confirm Password -->
-            <flux:input
+            <x-mary-input
                 name="password_confirmation"
                 :label="__('Confirm password')"
                 type="password"
@@ -53,15 +54,17 @@
             />
 
             <div class="flex items-center justify-end">
-                <flux:button type="submit" variant="primary" class="w-full" data-test="register-user-button">
+                <x-mary-button type="submit" class="w-full btn-primary" data-test="register-user-button">
                     {{ __('Create account') }}
-                </flux:button>
+                </x-mary-button>
             </div>
         </form>
 
-        <div class="space-x-1 rtl:space-x-reverse text-center text-sm text-zinc-600 dark:text-zinc-400">
-            <span>{{ __('Already have an account?') }}</span>
-            <flux:link :href="route('login')" wire:navigate>{{ __('Log in') }}</flux:link>
+        <div
+            class="space-x-1 rtl:space-x-reverse text-center text-sm text-zinc-600 dark:text-zinc-400">
+            <span>{{ __('Already have an account ?') }}</span>
+            <a href="{{route('login')}}" class="font-bold text-gray-900 hover:text-blue-500"
+               wire:navigate>{{ __('Log in') }}</a>
         </div>
     </div>
 </x-layouts::auth>
diff --git a/resources/views/livewire/auth/reset-password.blade.php b/resources/views/livewire/auth/reset-password.blade.php
index e649471..88d792d 100644
--- a/resources/views/livewire/auth/reset-password.blade.php
+++ b/resources/views/livewire/auth/reset-password.blade.php
@@ -1,9 +1,9 @@
 <x-layouts::auth :title="__('Reset password')">
     <div class="flex flex-col gap-6">
-        <x-auth-header :title="__('Reset password')" :description="__('Please enter your new password below')" />
+        <x-auth-header :title="__('Reset password')" :description="__('Please enter your new password below')"/>
 
         <!-- Session Status -->
-        <x-auth-session-status class="text-center" :status="session('status')" />
+        <x-auth-session-status class="text-center" :status="session('status')"/>
 
         <form method="POST" action="{{ route('password.update') }}" class="flex flex-col gap-6">
             @csrf
@@ -11,7 +11,7 @@
             <input type="hidden" name="token" value="{{ request()->route('token') }}">
 
             <!-- Email Address -->
-            <flux:input
+            <x-mary-input
                 name="email"
                 value="{{ request('email') }}"
                 :label="__('Email')"
@@ -21,7 +21,7 @@
             />
 
             <!-- Password -->
-            <flux:input
+            <x-mary-input
                 name="password"
                 :label="__('Password')"
                 type="password"
@@ -32,7 +32,7 @@
             />
 
             <!-- Confirm Password -->
-            <flux:input
+            <x-mary-input
                 name="password_confirmation"
                 :label="__('Confirm password')"
                 type="password"
@@ -43,9 +43,9 @@
             />
 
             <div class="flex items-center justify-end">
-                <flux:button type="submit" variant="primary" class="w-full" data-test="reset-password-button">
+                <x-mary-button type="submit" class="w-full btn-primary" data-test="reset-password-button">
                     {{ __('Reset password') }}
-                </flux:button>
+                </x-mary-button>
             </div>
         </form>
     </div>
diff --git a/resources/views/livewire/settings/delete-user-form.blade.php b/resources/views/livewire/settings/delete-user-form.blade.php
index a641407..fed0671 100644
--- a/resources/views/livewire/settings/delete-user-form.blade.php
+++ b/resources/views/livewire/settings/delete-user-form.blade.php
@@ -1,34 +1,48 @@
 <section class="mt-10 space-y-6">
     <div class="relative mb-5">
-        <flux:heading>{{ __('Delete account') }}</flux:heading>
-        <flux:subheading>{{ __('Delete your account and all of its resources') }}</flux:subheading>
+        <x-mary-header
+            title="{{ __('Delete account') }}"
+            subtitle="{{ __('Delete your account and all of its resources') }}"
+        />
     </div>
 
-    <flux:modal.trigger name="confirm-user-deletion">
-        <flux:button variant="danger" x-data="" x-on:click.prevent="$dispatch('open-modal', 'confirm-user-deletion')">
-            {{ __('Delete account') }}
-        </flux:button>
-    </flux:modal.trigger>
+    <x-mary-button
+        class="btn-error"
+        wire:click="$set('confirmingUserDeletion', true)"
+    >
+        {{ __('Delete account') }}
+    </x-mary-button>
 
-    <flux:modal name="confirm-user-deletion" :show="$errors->isNotEmpty()" focusable class="max-w-lg">
+    <x-mary-modal wire:model="confirmingUserDeletion" class="backdrop-blur">
         <form method="POST" wire:submit="deleteUser" class="space-y-6">
+
             <div>
-                <flux:heading size="lg">{{ __('Are you sure you want to delete your account?') }}</flux:heading>
-
-                <flux:subheading>
+                <h2 class="text-lg font-bold text-base-content">
+                    {{ __('Are you sure you want to delete your account?') }}
+                </h2>
+                <p class="mt-1 text-sm text-base-content/70">
                     {{ __('Once your account is deleted, all of its resources and data will be permanently deleted. Please enter your password to confirm you would like to permanently delete your account.') }}
-                </flux:subheading>
+                </p>
             </div>
 
-            <flux:input wire:model="password" :label="__('Password')" type="password" viewable />
+            <x-mary-input
+                wire:model="password"
+                label="{{ __('Password') }}"
+                type="password"
+                icon="o-key"
+            />
 
-            <div class="flex justify-end space-x-2 rtl:space-x-reverse">
-                <flux:modal.close>
-                    <flux:button variant="filled">{{ __('Cancel') }}</flux:button>
-                </flux:modal.close>
+            <x-slot:actions>
+                <div class="flex justify-end space-x-2 rtl:space-x-reverse">
+                    <x-mary-button @click="$wire.confirmingUserDeletion = false">
+                        {{ __('Cancel') }}
+                    </x-mary-button>
 
-                <flux:button variant="danger" type="submit">{{ __('Delete account') }}</flux:button>
-            </div>
+                    <x-mary-button type="submit" class="btn-error" spinner="deleteUser">
+                        {{ __('Delete account') }}
+                    </x-mary-button>
+                </div>
+            </x-slot:actions>
         </form>
-    </flux:modal>
+    </x-mary-modal>
 </section>
diff --git a/resources/views/livewire/settings/profile.blade.php b/resources/views/livewire/settings/profile.blade.php
index 6e9da81..e75d24d 100644
--- a/resources/views/livewire/settings/profile.blade.php
+++ b/resources/views/livewire/settings/profile.blade.php
@@ -1,36 +1,34 @@
 <section class="w-full">
-    @include('partials.settings-heading')
-
-    <flux:heading class="sr-only">{{ __('Profile settings') }}</flux:heading>
-
     <x-settings.layout :heading="__('Profile')" :subheading="__('Update your name and email address')">
         <form wire:submit="updateProfileInformation" class="my-6 w-full space-y-6">
-            <flux:input wire:model="name" :label="__('Name')" type="text" required autofocus autocomplete="name" />
+            <x-mary-input wire:model="name" :label="__('Name')" type="text" required autofocus autocomplete="name"/>
 
             <div>
-                <flux:input wire:model="email" :label="__('Email')" type="email" required autocomplete="email" />
+                <x-mary-input wire:model="email" :label="__('Email')" type="email" required autocomplete="email"/>
 
                 @if ($this->hasUnverifiedEmail)
                     <div>
-                        <flux:text class="mt-4">
+                        <div class="mt-4">
                             {{ __('Your email address is unverified.') }}
 
-                            <flux:link class="text-sm cursor-pointer" wire:click.prevent="resendVerificationNotification">
+                            <div class="text-sm cursor-pointer"
+                                 wire:click.prevent="resendVerificationNotification">
                                 {{ __('Click here to re-send the verification email.') }}
-                            </flux:link>
-                        </flux:text>
+                            </div>
+                        </div>
 
                     </div>
                 @endif
             </div>
 
             <div class="flex items-center gap-4">
-                <flux:button variant="primary" type="submit">{{ __('Save') }}</flux:button>
+                <x-mary-button class="btn-primary" spinner="updateProfileInformation"
+                               type="submit">{{ __('Save') }}</x-mary-button>
             </div>
         </form>
 
         @if ($this->showDeleteUser)
-            <livewire:settings.delete-user-form />
+            <livewire:settings.delete-user-form/>
         @endif
     </x-settings.layout>
 </section>
diff --git a/resources/views/livewire/settings/security.blade.php b/resources/views/livewire/settings/security.blade.php
index 648afeb..af8c111 100644
--- a/resources/views/livewire/settings/security.blade.php
+++ b/resources/views/livewire/settings/security.blade.php
@@ -1,11 +1,7 @@
 <section class="w-full">
-    @include('partials.settings-heading')
-
-    <flux:heading class="sr-only">{{ __('Security settings') }}</flux:heading>
-
-    <x-settings.layout :heading="__('Update password')" :subheading="__('Ensure your account is using a long, random password to stay secure')">
-        <form method="POST" wire:submit="updatePassword" class="mt-6 space-y-6">
-            <flux:input
+    <x-shared.card title="{{ __('Change your password') }}">
+        <x-mary-form method="POST" wire:submit="updatePassword" class="p-4">
+            <x-mary-input
                 wire:model="current_password"
                 :label="__('Current password')"
                 type="password"
@@ -13,7 +9,7 @@
                 autocomplete="current-password"
                 viewable
             />
-            <flux:input
+            <x-mary-input
                 wire:model="password"
                 :label="__('New password')"
                 type="password"
@@ -21,7 +17,7 @@
                 autocomplete="new-password"
                 viewable
             />
-            <flux:input
+            <x-mary-input
                 wire:model="password_confirmation"
                 :label="__('Confirm password')"
                 type="password"
@@ -30,208 +26,203 @@
                 viewable
             />
 
-            <div class="flex items-center gap-4">
-                <flux:button variant="primary" type="submit" data-test="update-password-button">{{ __('Save') }}</flux:button>
-            </div>
-        </form>
+            <x-slot:actions>
+                <x-mary-button type="submit" class="btn-primary"
+                               data-test="update-password-button">{{ __('Save') }}</x-mary-button>
+            </x-slot:actions>
+        </x-mary-form>
+    </x-shared.card>
 
-        @if ($canManageTwoFactor)
-            <section class="mt-12">
-                <flux:heading>{{ __('Two-factor authentication') }}</flux:heading>
-                <flux:subheading>{{ __('Manage your two-factor authentication settings') }}</flux:subheading>
+    @if ($canManageTwoFactor)
+        <section class="mt-12">
+            <p class="text-xl text-gray-700 mb-2 font-medium">{{ __('Manage your two-factor authentication settings') }}</p>
+            <p class="text-sm text-gray-500">{{ __('Manage your two-factor authentication settings') }}</p>
 
-                <div class="flex flex-col w-full mx-auto space-y-6 text-sm" wire:cloak>
-                    @if ($twoFactorEnabled)
-                        <div class="space-y-4">
-                            <flux:text>
-                                {{ __('You will be prompted for a secure, random pin during login, which you can retrieve from the TOTP-supported application on your phone.') }}
-                            </flux:text>
 
-                            <div class="flex justify-start">
-                                <flux:button
-                                    variant="danger"
-                                    wire:click="disable"
-                                >
-                                    {{ __('Disable 2FA') }}
-                                </flux:button>
-                            </div>
+            <div class="flex flex-col w-full mx-auto space-y-6 text-sm" wire:cloak>
+                @if ($twoFactorEnabled)
+                    <div class="space-y-4">
+                        <p class="text-gray-500 mt-4">
+                            {{ __('You will be prompted for a secure, random pin during login, which you can retrieve from the TOTP-supported application on your phone.') }}
+                        </p>
 
-                            <livewire:settings.two-factor.recovery-codes :$requiresConfirmation/>
-                        </div>
-                    @else
-                        <div class="space-y-4">
-                            <flux:text variant="subtle">
-                                {{ __('When you enable two-factor authentication, you will be prompted for a secure pin during login. This pin can be retrieved from a TOTP-supported application on your phone.') }}
-                            </flux:text>
-
-                            <flux:button
-                                variant="primary"
-                                wire:click="enable"
+                        <div class="flex justify-start">
+                            <x-mary-button
+                                class="btn-error"
+                                wire:click="disable"
                             >
-                                {{ __('Enable 2FA') }}
-                            </flux:button>
+                                {{ __('Disable 2FA') }}
+                            </x-mary-button>
                         </div>
-                    @endif
-                </div>
-            </section>
 
-            <flux:modal
-                name="two-factor-setup-modal"
-                class="max-w-md md:min-w-md"
-                @close="closeModal"
-                wire:model="showModal"
-            >
-                <div class="space-y-6">
-                    <div class="flex flex-col items-center space-y-4">
-                        <div class="p-0.5 w-auto rounded-full border border-stone-100 dark:border-stone-600 bg-white dark:bg-stone-800 shadow-sm">
-                            <div class="p-2.5 rounded-full border border-stone-200 dark:border-stone-600 overflow-hidden bg-stone-100 dark:bg-stone-200 relative">
-                                <div class="flex items-stretch absolute inset-0 w-full h-full divide-x [&>div]:flex-1 divide-stone-200 dark:divide-stone-300 justify-around opacity-50">
-                                    @for ($i = 1; $i <= 5; $i++)
-                                        <div></div>
-                                    @endfor
-                                </div>
+                        <livewire:settings.two-factor.recovery-codes :$requiresConfirmation/>
+                    </div>
+                @else
+                    <div class="space-y-4">
+                        <p class="text-gray-400 mt-4">
+                            {{ __('When you enable two-factor authentication, you will be prompted for a secure pin during login. This pin can be retrieved from a TOTP-supported application on your phone.') }}
+                        </p>
 
-                                <div class="flex flex-col items-stretch absolute w-full h-full divide-y [&>div]:flex-1 inset-0 divide-stone-200 dark:divide-stone-300 justify-around opacity-50">
-                                    @for ($i = 1; $i <= 5; $i++)
-                                        <div></div>
-                                    @endfor
-                                </div>
+                        <x-mary-button
+                            class="btn-secondary"
+                            wire:click="enable"
+                        >
+                            {{ __('Enable 2FA') }}
+                        </x-mary-button>
+                    </div>
+                @endif
+            </div>
+        </section>
 
-                                <flux:icon.qr-code class="relative z-20 dark:text-accent-foreground"/>
+        <x-mary-modal wire:model="showModal" class="backdrop-blur" @close="closeModal">
+            <div class="space-y-6">
+                <div class="flex flex-col items-center space-y-4">
+                    <div
+                        class="p-0.5 w-auto rounded-full border border-base-200 dark:border-base-content/20 bg-base-100 shadow-sm">
+                        <div
+                            class="p-2.5 rounded-full border border-base-200 dark:border-base-content/20 overflow-hidden bg-base-200 relative">
+                            <div
+                                class="flex items-stretch absolute inset-0 w-full h-full divide-x [&>div]:flex-1 divide-base-300 dark:divide-base-content/20 justify-around opacity-50">
+                                @for ($i = 1; $i <= 5; $i++)
+                                    <div></div>
+                                @endfor
+                            </div>
+                            <div
+                                class="flex flex-col items-stretch absolute w-full h-full divide-y [&>div]:flex-1 inset-0 divide-base-300 dark:divide-base-content/20 justify-around opacity-50">
+                                @for ($i = 1; $i <= 5; $i++)
+                                    <div></div>
+                                @endfor
                             </div>
-                        </div>
 
-                        <div class="space-y-2 text-center">
-                            <flux:heading size="lg">{{ $this->modalConfig['title'] }}</flux:heading>
-                            <flux:text>{{ $this->modalConfig['description'] }}</flux:text>
+                            <x-mary-icon name="o-qr-code" class="relative z-20 w-8 h-8 text-base-content"/>
                         </div>
                     </div>
 
-                    @if ($showVerificationStep)
-                        <div class="space-y-6">
-                            <div
-                                class="flex flex-col items-center space-y-3 justify-center"
-                                x-data
-                                x-init="$nextTick(() => $el.querySelector('input')?.focus())"
-                            >
-                                <flux:otp
-                                    name="code"
-                                    wire:model="code"
-                                    length="6"
-                                    label="OTP Code"
-                                    label:sr-only
-                                    class="mx-auto"
-                                />
-                            </div>
+                    <div class="space-y-2 text-center">
+                        <div class="text-xl font-bold text-base-content">{{ $this->modalConfig['title'] }}</div>
+                        <div class="text-sm text-base-content/70">{{ $this->modalConfig['description'] }}</div>
+                    </div>
+                </div>
 
-                            <div class="flex items-center space-x-3">
-                                <flux:button
-                                    variant="outline"
-                                    class="flex-1"
-                                    wire:click="resetVerification"
-                                >
-                                    {{ __('Back') }}
-                                </flux:button>
-
-                                <flux:button
-                                    variant="primary"
-                                    class="flex-1"
-                                    wire:click="confirmTwoFactor"
-                                    x-bind:disabled="$wire.code.length < 6"
-                                >
-                                    {{ __('Confirm') }}
-                                </flux:button>
-                            </div>
+                @if ($showVerificationStep)
+                    <div class="space-y-6">
+                        <div class="flex flex-col items-center justify-center space-y-3" x-data
+                             x-init="$nextTick(() => $el.querySelector('input')?.focus())">
+                            <x-mary-input
+                                wire:model="code"
+                                maxlength="6"
+                                placeholder="------"
+                                class="mx-auto text-2xl tracking-widest text-center"
+                                aria-label="OTP Code"
+                            />
                         </div>
-                    @else
-                        @error('setupData')
-                            <flux:callout variant="danger" icon="x-circle" heading="{{ $message }}"/>
-                        @enderror
 
-                        <div class="flex justify-center">
-                            <div class="relative w-64 overflow-hidden border rounded-lg border-stone-200 dark:border-stone-700 aspect-square">
-                                @empty($qrCodeSvg)
-                                    <div class="absolute inset-0 flex items-center justify-center bg-white dark:bg-stone-700 animate-pulse">
-                                        <flux:icon.loading/>
-                                    </div>
-                                @else
+                        <div class="flex items-center space-x-3">
+                            <x-mary-button
+                                class="flex-1 btn-outline"
+                                wire:click="resetVerification"
+                            >
+                                {{ __('Back') }}
+                            </x-mary-button>
+
+                            <x-mary-button
+                                class="flex-1 btn-primary"
+                                wire:click="confirmTwoFactor"
+                                x-bind:disabled="$wire.code.length < 6"
+                            >
+                                {{ __('Confirm') }}
+                            </x-mary-button>
+                        </div>
+                    </div>
+                @else
+                    @error('setupData')
+                    <x-mary-alert icon="o-x-circle" class="alert-error">
+                        {{ $message }}
+                    </x-mary-alert>
+                    @enderror
+
+                    <div class="flex justify-center">
+                        <div
+                            class="relative w-64 overflow-hidden border rounded-lg border-base-200 dark:border-base-content/20 aspect-square">
+                            @empty($qrCodeSvg)
+                                <div
+                                    class="absolute inset-0 flex items-center justify-center bg-base-100 animate-pulse">
+                                    <x-mary-loading class="text-primary loading-lg"/>
+                                </div>
+                            @else
                                 <div x-data class="flex items-center justify-center h-full p-4">
                                     <div
-                                        class="bg-white p-3 rounded"
-                                        :style="($flux.appearance === 'dark' || ($flux.appearance === 'system' && $flux.dark)) ? 'filter: invert(1) brightness(1.5)' : ''"
+                                        class="p-3 bg-white rounded"
+                                        :style="(localStorage.getItem('theme') === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) ? 'filter: invert(1) brightness(1.5)' : ''"
                                     >
-                                            {!! $qrCodeSvg !!}
-                                        </div>
+                                        {!! $qrCodeSvg !!}
                                     </div>
+                                </div>
+                            @endempty
+                        </div>
+                    </div>
+
+                    <div>
+                        <x-mary-button
+                            :disabled="$errors->has('setupData')"
+                            class="w-full btn-primary"
+                            wire:click="showVerificationIfNecessary"
+                        >
+                            {{ $this->modalConfig['buttonText'] }}
+                        </x-mary-button>
+                    </div>
+
+                    <div class="space-y-4">
+                        <div class="relative flex items-center justify-center w-full">
+                            <div class="absolute inset-0 w-full h-px top-1/2 bg-base-200 dark:bg-base-content/20"></div>
+                            <span class="relative px-2 text-sm bg-base-100 text-base-content/60">
+                        {{ __('or, enter the code manually') }}
+                    </span>
+                        </div>
+
+                        <div
+                            class="flex items-center space-x-2"
+                            x-data="{
+                        copied: false,
+                        async copy() {
+                            try {
+                                await navigator.clipboard.writeText('{{ $manualSetupKey }}');
+                                this.copied = true;
+                                setTimeout(() => this.copied = false, 1500);
+                            } catch (e) {
+                                console.warn('Could not copy to clipboard');
+                            }
+                        }
+                    }"
+                        >
+                            <div
+                                class="flex items-stretch w-full border rounded-xl border-base-300 dark:border-base-content/20">
+                                @empty($manualSetupKey)
+                                    <div class="flex items-center justify-center w-full p-3 bg-base-200">
+                                        <x-mary-loading class="loading-sm"/>
+                                    </div>
+                                @else
+                                    <input
+                                        type="text"
+                                        readonly
+                                        value="{{ $manualSetupKey }}"
+                                        class="w-full p-3 bg-transparent outline-none text-base-content"
+                                    />
+
+                                    <button
+                                        @click="copy()"
+                                        class="px-3 transition-colors border-l cursor-pointer border-base-300 dark:border-base-content/20 hover:bg-base-200 dark:hover:bg-base-content/10"
+                                    >
+                                        <x-mary-icon name="o-document-duplicate" x-show="!copied"
+                                                     class="w-5 h-5 text-base-content/70"/>
+                                        <x-mary-icon name="o-check" x-show="copied" class="w-5 h-5 text-success"/>
+                                    </button>
                                 @endempty
                             </div>
                         </div>
-
-                        <div>
-                            <flux:button
-                                :disabled="$errors->has('setupData')"
-                                variant="primary"
-                                class="w-full"
-                                wire:click="showVerificationIfNecessary"
-                            >
-                                {{ $this->modalConfig['buttonText'] }}
-                            </flux:button>
-                        </div>
-
-                        <div class="space-y-4">
-                            <div class="relative flex items-center justify-center w-full">
-                                <div class="absolute inset-0 w-full h-px top-1/2 bg-stone-200 dark:bg-stone-600"></div>
-                                <span class="relative px-2 text-sm bg-white dark:bg-stone-800 text-stone-600 dark:text-stone-400">
-                                    {{ __('or, enter the code manually') }}
-                                </span>
-                            </div>
-
-                            <div
-                                class="flex items-center space-x-2"
-                                x-data="{
-                                    copied: false,
-                                    async copy() {
-                                        try {
-                                            await navigator.clipboard.writeText('{{ $manualSetupKey }}');
-                                            this.copied = true;
-                                            setTimeout(() => this.copied = false, 1500);
-                                        } catch (e) {
-                                            console.warn('Could not copy to clipboard');
-                                        }
-                                    }
-                                }"
-                            >
-                                <div class="flex items-stretch w-full border rounded-xl dark:border-stone-700">
-                                    @empty($manualSetupKey)
-                                        <div class="flex items-center justify-center w-full p-3 bg-stone-100 dark:bg-stone-700">
-                                            <flux:icon.loading variant="mini"/>
-                                        </div>
-                                    @else
-                                        <input
-                                            type="text"
-                                            readonly
-                                            value="{{ $manualSetupKey }}"
-                                            class="w-full p-3 bg-transparent outline-none text-stone-900 dark:text-stone-100"
-                                        />
-
-                                        <button
-                                            @click="copy()"
-                                            class="px-3 transition-colors border-l cursor-pointer border-stone-200 dark:border-stone-600"
-                                        >
-                                            <flux:icon.document-duplicate x-show="!copied" variant="outline"></flux:icon>
-                                            <flux:icon.check
-                                                x-show="copied"
-                                                variant="solid"
-                                                class="text-green-500"
-                                            ></flux:icon>
-                                        </button>
-                                    @endempty
-                                </div>
-                            </div>
-                        </div>
-                    @endif
-                </div>
-            </flux:modal>
-        @endif
-    </x-settings.layout>
+                    </div>
+                @endif
+            </div>
+        </x-mary-modal>
+    @endif
 </section>
diff --git a/resources/views/livewire/settings/two-factor/recovery-codes.blade.php b/resources/views/livewire/settings/two-factor/recovery-codes.blade.php
index 9ed2674..e445ff2 100644
--- a/resources/views/livewire/settings/two-factor/recovery-codes.blade.php
+++ b/resources/views/livewire/settings/two-factor/recovery-codes.blade.php
@@ -1,89 +1,87 @@
-<div
-    class="py-6 space-y-6 border shadow-sm rounded-xl border-zinc-200 dark:border-white/10"
+<x-shared.card
+    title="{{ __('Recovery codes') }}"
+    icon="lucide-key"
     wire:cloak
     x-data="{ showRecoveryCodes: false }"
 >
-    <div class="px-6 space-y-2">
-        <div class="flex items-center gap-2">
-            <flux:icon.lock-closed variant="outline" class="size-4"/>
-            <flux:heading size="lg" level="3">{{ __('2FA recovery codes') }}</flux:heading>
+    <div class="p-4">
+
+        <div class="space-y-2">
+            <p class="text-sm text-gray-400">
+                {{ __('Recovery codes let you regain access if you lose your 2FA device. Store them in a secure password manager.') }}
+            </p>
         </div>
-        <flux:text variant="subtle">
-            {{ __('Recovery codes let you regain access if you lose your 2FA device. Store them in a secure password manager.') }}
-        </flux:text>
-    </div>
 
-    <div class="px-6">
-        <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
-            <flux:button
-                x-show="!showRecoveryCodes"
-                icon="eye"
-                icon:variant="outline"
-                variant="primary"
-                @click="showRecoveryCodes = true;"
-                aria-expanded="false"
-                aria-controls="recovery-codes-section"
-            >
-                {{ __('View recovery codes') }}
-            </flux:button>
-
-            <flux:button
-                x-show="showRecoveryCodes"
-                icon="eye-slash"
-                icon:variant="outline"
-                variant="primary"
-                @click="showRecoveryCodes = false"
-                aria-expanded="true"
-                aria-controls="recovery-codes-section"
-            >
-                {{ __('Hide recovery codes') }}
-            </flux:button>
-
-            @if (filled($recoveryCodes))
-                <flux:button
-                    x-show="showRecoveryCodes"
-                    icon="arrow-path"
-                    variant="filled"
-                    wire:click="regenerateRecoveryCodes"
+        <div class="mt-4">
+            <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+                <x-mary-button
+                    class="btn-neutral"
+                    x-show="!showRecoveryCodes"
+                    icon="lucide.eye"
+                    @click="showRecoveryCodes = true;"
+                    aria-expanded="false"
+                    aria-controls="recovery-codes-section"
                 >
-                    {{ __('Regenerate codes') }}
-                </flux:button>
-            @endif
-        </div>
+                    {{ __('View recovery codes') }}
+                </x-mary-button>
 
-        <div
-            x-show="showRecoveryCodes"
-            x-transition
-            id="recovery-codes-section"
-            class="relative overflow-hidden"
-            x-bind:aria-hidden="!showRecoveryCodes"
-        >
-            <div class="mt-3 space-y-3">
-                @error('recoveryCodes')
-                    <flux:callout variant="danger" icon="x-circle" heading="{{$message}}"/>
-                @enderror
+                <x-mary-button
+                    class="btn-neutral"
+                    x-show="showRecoveryCodes"
+                    icon="lucide.eye-closed"
+                    @click="showRecoveryCodes = false"
+                    aria-expanded="true"
+                    aria-controls="recovery-codes-section"
+                >
+                    {{ __('Hide recovery codes') }}
+                </x-mary-button>
 
                 @if (filled($recoveryCodes))
-                    <div
-                        class="grid gap-1 p-4 font-mono text-sm rounded-lg bg-zinc-100 dark:bg-white/5"
-                        role="list"
-                        aria-label="{{ __('Recovery codes') }}"
+                    <x-mary-button
+                        x-show="showRecoveryCodes"
+                        icon="lucide.refresh-cw"
+                        class="btn-primary"
+                        wire:click="regenerateRecoveryCodes"
                     >
-                        @foreach($recoveryCodes as $code)
-                            <div
-                                role="listitem"
-                                class="select-text"
-                                wire:loading.class="opacity-50 animate-pulse"
-                            >
-                                {{ $code }}
-                            </div>
-                        @endforeach
-                    </div>
-                    <flux:text variant="subtle" class="text-xs">
-                        {{ __('Each recovery code can be used once to access your account and will be removed after use. If you need more, click Regenerate codes above.') }}
-                    </flux:text>
+                        {{ __('Regenerate codes') }}
+                    </x-mary-button>
                 @endif
             </div>
+
+            <div
+                x-show="showRecoveryCodes"
+                x-transition
+                id="recovery-codes-section"
+                class="relative overflow-hidden"
+                x-bind:aria-hidden="!showRecoveryCodes"
+            >
+                <div class="mt-3 space-y-3">
+                    @error('recoveryCodes')
+                    <x-mary-alert class="alert-error" icon="lucide.x" title="{{$message}}"/>
+                    @enderror
+
+                    @if (filled($recoveryCodes))
+                        <div
+                            class="grid gap-1 p-4 font-mono text-sm rounded-lg bg-zinc-100 dark:bg-white/5"
+                            role="list"
+                            aria-label="{{ __('Recovery codes') }}"
+                        >
+                            @foreach($recoveryCodes as $code)
+                                <div
+                                    role="listitem"
+                                    class="select-text"
+                                    wire:loading.class="opacity-50 animate-pulse"
+                                >
+                                    {{ $code }}
+                                </div>
+                            @endforeach
+                        </div>
+                        <p class="text-xs text-gray-400">
+                            {{ __('Each recovery code can be used once to access your account and will be removed after use. If you need more, click Regenerate codes above.') }}
+                        </p>
+                    @endif
+                </div>
+            </div>
         </div>
     </div>
-</div>
+</x-shared.card>
diff --git a/resources/views/partials/settings-heading.blade.php b/resources/views/partials/settings-heading.blade.php
deleted file mode 100644
index 925ace9..0000000
--- a/resources/views/partials/settings-heading.blade.php
+++ /dev/null
@@ -1,5 +0,0 @@
-<div class="relative mb-6 w-full">
-    <flux:heading size="xl" level="1">{{ __('Settings') }}</flux:heading>
-    <flux:subheading size="lg" class="mb-6">{{ __('Manage your profile and account settings') }}</flux:subheading>
-    <flux:separator variant="subtle" />
-</div>
diff --git a/routes/settings.php b/routes/settings.php
index 3b17b10..4020e94 100644
--- a/routes/settings.php
+++ b/routes/settings.php
@@ -6,23 +6,31 @@
 use Illuminate\Support\Facades\Route;
 use Laravel\Fortify\Features;
 
-Route::middleware(['auth'])->group(function (): void {
-    Route::redirect('settings', 'settings/profile')->name('settings');
+// Grouping by the "Settings" sidebar category
+Route::middleware(['auth'])->prefix('settings')->group(function (): void {
 
-    Route::livewire('settings/profile', Profile::class)->name('profile.edit');
-});
-
-Route::middleware(['auth', 'verified'])->group(function (): void {
-    Route::livewire('settings/appearance', Appearance::class)->name('appearance.edit');
-
-    Route::livewire('settings/security', Security::class)
-        ->middleware(
-            when(
-                Features::canManageTwoFactorAuthentication()
-                && Features::optionEnabled(Features::twoFactorAuthentication(), 'confirmPassword'),
-                ['password.confirm'],
-                [],
-            ),
-        )
-        ->name('security.edit');
+    // Base settings redirect
+    Route::redirect('/', '/settings/profile')->name('settings');
+
+    // Profile Settings
+    Route::livewire('profile', Profile::class)->name('profile.edit');
+
+    // Settings that require email verification
+    Route::middleware(['verified'])->group(function (): void {
+
+        // Appearance Settings
+        Route::livewire('appearance', Appearance::class)->name('appearance.edit');
+
+        // Security Settings
+        Route::livewire('security', Security::class)
+            ->middleware(
+                when(
+                    Features::canManageTwoFactorAuthentication()
+                    && Features::optionEnabled(Features::twoFactorAuthentication(), 'confirmPassword'),
+                    ['password.confirm'],
+                    [],
+                ),
+            )
+            ->name('security.edit');
+    });
 });