diff --git a/app/Http/Controllers/Settings/PasswordController.php b/app/Http/Controllers/Settings/PasswordController.php
index cfa80337c..adcb1cd96 100644
--- a/app/Http/Controllers/Settings/PasswordController.php
+++ b/app/Http/Controllers/Settings/PasswordController.php
@@ -15,17 +15,12 @@ public function __construct()
         $this->middleware(Authenticate::class);
     }
 
-    public function edit()
-    {
-        return view('users.settings.password');
-    }
-
     public function update(UpdatePasswordRequest $request)
     {
         $this->dispatchNow(new UpdatePassword(Auth::user(), $request->newPassword()));
 
         $this->success('settings.password.updated');
 
-        return redirect()->route('settings.password');
+        return redirect()->route('settings.profile');
     }
 }
diff --git a/app/Http/Controllers/Settings/ProfileController.php b/app/Http/Controllers/Settings/ProfileController.php
index 3dd16e7fe..db6ad1479 100644
--- a/app/Http/Controllers/Settings/ProfileController.php
+++ b/app/Http/Controllers/Settings/ProfileController.php
@@ -20,7 +20,7 @@ public function __construct()
 
     public function edit()
     {
-        return view('users.settings.profile');
+        return view('users.settings.settings');
     }
 
     public function update(UpdateProfileRequest $request)
diff --git a/config/blade-ui-kit.php b/config/blade-ui-kit.php
new file mode 100644
index 000000000..9f73fdbca
--- /dev/null
+++ b/config/blade-ui-kit.php
@@ -0,0 +1,125 @@
+<?php
+
+use BladeUIKit\Components;
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Components
+    |--------------------------------------------------------------------------
+    |
+    | Below you reference all components that should be loaded for your app.
+    | By default all components from Blade UI Kit are loaded in. You can
+    | disable or overwrite any component class or alias that you want.
+    |
+    */
+
+    'components' => [
+        // 'alert' => Components\Alerts\Alert::class,
+        'avatar' => Components\Support\Avatar::class,
+        // 'carbon' => Components\DateTime\Carbon::class,
+        // 'checkbox' => Components\Forms\Inputs\Checkbox::class,
+        // 'color-picker' => Components\Forms\Inputs\ColorPicker::class,
+        // 'countdown' => Components\DateTime\Countdown::class,
+        // 'cron' => Components\Support\Cron::class,
+        // 'dropdown' => Components\Navigation\Dropdown::class,
+        // 'easy-mde' => Components\Editors\EasyMDE::class,
+        'email' => Components\Forms\Inputs\Email::class,
+        // 'error' => Components\Forms\Error::class,
+        'form' => Components\Forms\Form::class,
+        // 'form-button' => Components\Buttons\FormButton::class,
+        // 'html' => Components\Layouts\Html::class,
+        'input' => Components\Forms\Inputs\Input::class,
+        'label' => Components\Forms\Label::class,
+        // 'logout' => Components\Buttons\Logout::class,
+        // 'mapbox' => Components\Maps\Mapbox::class,
+        // 'markdown' => Components\Markdown\Markdown::class,
+        'password' => Components\Forms\Inputs\Password::class,
+        // 'pikaday' => Components\Forms\Inputs\Pikaday::class,
+        // 'social-meta' => Components\Layouts\SocialMeta::class,
+        'textarea' => Components\Forms\Inputs\Textarea::class,
+        // 'toc' => Components\Markdown\ToC::class,
+        // 'trix' => Components\Editors\Trix::class,
+        // 'unsplash' => Components\Support\Unsplash::class,
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Livewire Components
+    |--------------------------------------------------------------------------
+    |
+    | Below you reference all the Livewire components that should be loaded
+    | for your app. By default all components from Blade UI Kit are loaded in.
+    |
+    */
+
+    'livewire' => [
+        //
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Components Prefix
+    |--------------------------------------------------------------------------
+    |
+    | This value will set a prefix for all Blade UI Kit components.
+    | By default it's empty. This is useful if you want to avoid
+    | collision with components from other libraries.
+    |
+    | If set with "buk", for example, you can reference components like:
+    |
+    | <x-buk-easy-mde />
+    |
+    */
+
+    'prefix' => '',
+
+    /*
+    |--------------------------------------------------------------------------
+    | Third Party Asset Libraries
+    |--------------------------------------------------------------------------
+    |
+    | These settings hold reference to all third party libraries and their
+    | asset files served through a CDN. Individual components can require
+    | these asset files through their static `$assets` property.
+    |
+    */
+
+    'assets' => [
+
+        'alpine' => 'https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.3.5/dist/alpine.min.js',
+
+        'easy-mde' => [
+            'https://unpkg.com/easymde/dist/easymde.min.css',
+            'https://unpkg.com/easymde/dist/easymde.min.js',
+        ],
+
+        'mapbox' => [
+            'https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.css',
+            'https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.js',
+        ],
+
+        'moment' => [
+            'https://cdn.jsdelivr.net/npm/moment@2.26.0/moment.min.js',
+            'https://cdn.jsdelivr.net/npm/moment-timezone@0.5.31/builds/moment-timezone-with-data.min.js',
+        ],
+
+        'pickr' => [
+            'https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/themes/classic.min.css',
+            'https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/pickr.min.js',
+        ],
+
+        'pikaday' => [
+            'https://cdn.jsdelivr.net/npm/pikaday/css/pikaday.css',
+            'https://cdn.jsdelivr.net/npm/pikaday/pikaday.js',
+        ],
+
+        'trix' => [
+            'https://unpkg.com/trix@1.2.3/dist/trix.css',
+            'https://unpkg.com/trix@1.2.3/dist/trix.js',
+        ],
+
+    ],
+
+];
diff --git a/resources/css/forms.css b/resources/css/forms.css
index ddfb0d343..a0867846a 100644
--- a/resources/css/forms.css
+++ b/resources/css/forms.css
@@ -1,104 +1,104 @@
-.form-group {
+.standard .form-group {
     @apply flex flex-col mb-4;
 }
 
-label {
+.standard label {
     @apply mb-1 text-gray-600 block uppercase text-sm;
 }
 
-input[type='text'],
-input[type='password'],
-input[type='email'],
-select {
+.standard input[type='text'],
+.standard input[type='password'],
+.standard input[type='email'],
+.standard select {
     @apply h-12;
 }
 
-input[type='text'],
-input[type='password'],
-input[type='email'],
-textarea,
-select {
+.standard input[type='text'],
+.standard input[type='password'],
+.standard input[type='email'],
+.standard textarea,
+.standard select {
     @apply rounded border-2 p-3 w-full;
 }
 
-select {
+.standard select {
     @apply appearance-none;
 }
 
-input.nav-search {
+.standard input.nav-search {
     @apply pl-10 pr-3 py-2;
 }
 
-input[type='checkbox'] {
+.standard input[type='checkbox'] {
     @apply mr-1;
 }
 
-.help-block {
+.standard .help-block {
     @apply text-red-500 text-sm;
 }
 
 /** Markdown editor **/
-.form-group .editor {
+.standard .form-group .editor {
     @apply rounded-t-none;
 }
 
-.form-group .editor-toolbar {
+.standard .form-group .editor-toolbar {
     @apply border-2 border-b-0 rounded rounded-b-none border-gray-300;
 }
 
-.form-group .CodeMirror {
+.standard .form-group .CodeMirror {
     @apply border-2 rounded rounded-t-none border-gray-300;
 }
 
 /** Choices.js **/
-.choices__input.choices__input--cloned {
+.standard .choices__input.choices__input--cloned {
     @apply hidden;
 }
 
-.choices__inner {
+.standard .choices__inner {
     @apply rounded border-2 border-gray-300 w-full bg-white h-12 p-2 flex items-center !important;
 }
 
-.choices__list--dropdown {
+.standard .choices__list--dropdown {
     @apply border-2 border-gray-300 !important;
 }
 
-.choices__list--single {
+.standard .choices__list--single {
     @apply p-0 !important;
 }
 
-.choices__item {
+.standard .choices__item {
     @apply text-sm bg-gray-200 text-gray-700 cursor-pointer rounded px-2 py-1 my-0 border-0 !important;
 }
 
-.choices__item.choices__item--choice {
+.standard .choices__item.choices__item--choice {
     @apply rounded-none py-2 !important;
 }
 
-.choices__item.choices__item--choice.choices__item--selectable {
+.standard .choices__item.choices__item--choice.choices__item--selectable {
     @apply bg-white rounded-none text-gray-700 p-2 !important;
 }
 
-.choices__item.choices__item--choice.choices__item--selectable:hover {
+.standard .choices__item.choices__item--choice.choices__item--selectable:hover {
     @apply bg-gray-200 !important;
 }
 
-.choices__item.choices__item--selectable {
+.standard .choices__item.choices__item--selectable {
     @apply bg-lio-500 border-lio-500 text-white !important;
 }
 
-.choices__list--single > .choices__item.choices__item--selectable {
+.standard .choices__list--single > .choices__item.choices__item--selectable {
     @apply bg-white text-gray-700 !important;
 }
 
-.choices__item.is-highlighted {
+.standard .choices__item.is-highlighted {
     @apply bg-lio-600 border-lio-600 text-white !important;
 }
 
-.choices[data-type*='select-one']:after {
+.standard .choices[data-type*='select-one']:after {
     border-color: theme('colors.gray.500') transparent transparent transparent !important;
 }
 
-.choices[data-type*='select-one'] .choices__input {
+.standard .choices[data-type*='select-one'] .choices__input {
     @apply rounded-none border-b-2 border-gray-300 !important;
 }
diff --git a/resources/helpers.php b/resources/helpers.php
index bd785d2b2..1601f7c17 100644
--- a/resources/helpers.php
+++ b/resources/helpers.php
@@ -10,6 +10,16 @@ function active($routes, bool $condition = true): string
     }
 }
 
+if (! function_exists('is_active')) {
+    /**
+     * Determines if the given routes are active.
+     */
+    function is_active($routes): string
+    {
+        return call_user_func_array([app('router'), 'is'], (array) $routes);
+    }
+}
+
 if (! function_exists('md_to_html')) {
     /**
      * Convert Markdown to HTML.
diff --git a/resources/views/components/buttons/danger-button.blade.php b/resources/views/components/buttons/danger-button.blade.php
new file mode 100644
index 000000000..ac3ece6fc
--- /dev/null
+++ b/resources/views/components/buttons/danger-button.blade.php
@@ -0,0 +1,7 @@
+@props(['type' => 'button'])
+
+<span class="inline-flex rounded-md shadow-sm">
+    <button type="{{ $type }}" class="bg-red-600 border border-transparent rounded-md py-2 px-4 inline-flex justify-center text-sm leading-5 font-medium text-white hover:bg-red-700 focus:outline-none focus:border-red-900 focus:shadow-outline-red active:bg-red-900 transition duration-150 ease-in-out" {{ $attributes }}>
+        {{ $slot }}
+    </button>
+</span>
\ No newline at end of file
diff --git a/resources/views/components/buttons/primary-button.blade.php b/resources/views/components/buttons/primary-button.blade.php
new file mode 100644
index 000000000..f939eaa0c
--- /dev/null
+++ b/resources/views/components/buttons/primary-button.blade.php
@@ -0,0 +1,7 @@
+@props(['type' => 'button'])
+
+<span class="inline-flex rounded-md shadow-sm">
+    <button type="{{ $type }}" class="bg-lio-600 border border-transparent rounded-md py-2 px-4 inline-flex justify-center text-sm leading-5 font-medium text-white hover:bg-lio-700 focus:outline-none focus:border-lio-900 focus:shadow-outline-lio active:bg-lio-900 transition duration-150 ease-in-out">
+        {{ $slot }}
+    </button>
+</span>
\ No newline at end of file
diff --git a/resources/views/layouts/base.blade.php b/resources/views/layouts/base.blade.php
index 80ec4ddf2..5d7eaaa25 100644
--- a/resources/views/layouts/base.blade.php
+++ b/resources/views/layouts/base.blade.php
@@ -33,7 +33,7 @@
     @livewireStyles
 </head>
 
-<body class="{{ $bodyClass ?? '' }} font-sans bg-white" x-data="{ activeModal: null }">
+<body class="{{ $bodyClass ?? '' }} {{ isset($isTailwindUi) && $isTailwindUi ? '' : 'standard' }} font-sans bg-white" x-data="{ activeModal: null }">
 
 @include('layouts._ads._banner')
 @include('layouts._nav')
diff --git a/resources/views/layouts/settings.blade.php b/resources/views/layouts/settings.blade.php
deleted file mode 100644
index 6d9060894..000000000
--- a/resources/views/layouts/settings.blade.php
+++ /dev/null
@@ -1,31 +0,0 @@
-@extends('layouts.base')
-
-@section('body')
-    <div class="bg-gray-50">
-        <div class="bg-white border-b">
-            <div class="container mx-auto flex justify-between items-center px-4">
-                <h1 class="text-xl py-4 text-gray-900">{{ $title }}</h1>
-            </div>
-        </div>
-
-        @include('layouts._alerts')
-
-        <div class="container mx-auto px-4 pt-4 flex flex-wrap">
-            <div class="w-full md:w-3/4 md:pr-3">
-                @yield('content')
-            </div>
-
-            <div class="w-full md:w-1/4 md:pl-3">
-                <h3 class="text-xs font-bold tracking-wider uppercase text-gray-500 mb-4">Settings</h3>
-                <ul class="tags">
-                    <li class="{{ active('settings.profile') }}">
-                        <a href="{{ route('settings.profile') }}">Profile</a>
-                    </li>
-                    <li class="{{ active('settings.password') }}">
-                        <a href="{{ route('settings.password') }}">Password</a>
-                    </li>
-                </ul>
-            </div>
-        </div>
-    </div>
-@endsection
diff --git a/resources/views/users/settings/password.blade.php b/resources/views/users/settings/password.blade.php
index 7c7c0d363..9c85b4377 100644
--- a/resources/views/users/settings/password.blade.php
+++ b/resources/views/users/settings/password.blade.php
@@ -1,35 +1,41 @@
 @title('Password')
 
-@extends('layouts.settings')
+<section aria-labelledby="password_settings_heading" class="mt-6">
+    <x-form method="PUT" action="{{ route('settings.password.update') }}">
+        <div class="shadow sm:rounded-md sm:overflow-hidden">
+            <div class="bg-white py-6 px-4 space-y-6 sm:p-6">
+                <div>
+                    <h2 id="password_settings_heading" class="text-lg leading-6 font-medium text-gray-900">Password Settings</h2>
+                    <p class="mt-1 text-sm leading-5 text-gray-500">Update the password used for logging into your account.</p>
+                </div>
 
-@section('content')
-    <div class="md:p-4 md:border-2 md:rounded md:bg-gray-100 mb-8">
-        <form action="{{ route('settings.password.update') }}" method="POST">
-            @csrf
-            @method('PUT')
+                <div class="grid grid-cols-12 gap-6">
 
-            @if (Auth::user()->hasPassword())
-                @formGroup('current_password')
-                    <label for="current_password">Current Password</label>
-                    <input type="password" name="current_password" id="current_password" class="form-control" required />
-                    @error('current_password')
-                @endFormGroup
-            @endif
+                    @if (Auth::user()->hasPassword())
+                        <div class="col-span-12">
+                            <x-label for="current_password" />
+                            <x-password type="password" name="current_password" required />
+                        </div>
+                    @endif
 
-            @formGroup('password')
-                <label for="password">New Password</label>
-                <input type="password" name="password" id="password" class="form-control" required />
-                @error('password')
-            @endFormGroup
+                    <div class="col-span-12">
+                        <x-label for="password">New Password</x-label>
+                        <x-password type="password" name="password" required />
+                    </div>
 
-            @formGroup('password_confirmation')
-                <label for="password_confirmation">Confirm New Password</label>
-                <input type="password" name="password_confirmation" id="password_confirmation" class="form-control" required />
-            @endFormGroup
+                    <div class="col-span-12">
+                        <x-label for="password_confirmation">Confirm New Password</x-label>
+                        <x-password type="password" name="password_confirmation" required />
+                    </div>
 
-            <div class="flex justify-end">
-                <button type="submit" class="button button-primary">Save</button>
+                </div>
             </div>
-        </form>
-    </div>
-@endsection
+
+            <div class="px-4 py-3 bg-gray-50 text-right sm:px-6">
+                <x-buttons.primary-button type="submit">
+                    Update Password
+                </x-buttons.primary-button>
+            </div>
+        </div>
+    </x-form>
+</section>
diff --git a/resources/views/users/settings/profile.blade.php b/resources/views/users/settings/profile.blade.php
index bcb6c42d6..80726c18c 100644
--- a/resources/views/users/settings/profile.blade.php
+++ b/resources/views/users/settings/profile.blade.php
@@ -1,80 +1,80 @@
 @title('Profile')
 
-@extends('layouts.settings')
+<section aria-labelledby="profile_settings_heading">
+    <x-form method="PUT" action="{{ route('settings.profile.update') }}">
+        <div class="shadow sm:rounded-md sm:overflow-hidden">
+            <div class="bg-white py-6 px-4 space-y-6 sm:p-6">
 
-@section('content')
-    <div class="md:p-4 md:border-2 md:rounded md:bg-gray-100 mb-8">
-        <form action="{{ route('settings.profile.update') }}" method="POST">
-            @csrf
-            @method('PUT')
-
-            <div class="form-group">
                 <div>
-                    <img class="rounded-full" src="{{ Auth::user()->gravatarUrl(100) }}">
-                    <span class="text-gray-600 text-sm">Change your avatar on <a href="https://gravatar.com/" class="text-lio-700">Gravatar</a>.</span>
+                    <h2 id="profile_settings_heading" class="text-lg leading-6 font-medium text-gray-900">Profile</h2>
+                    <p class="mt-1 text-sm leading-5 text-gray-500">Update your profile information.</p>
                 </div>
-            </div>
-
-            @formGroup('name')
-                <label for="name">Name</label>
-                <input type="text" name="name" id="name" value="{{ Auth::user()->name() }}" required />
-                @error('name')
-            @endFormGroup
-
-            @formGroup('email')
-                <label for="email">Email</label>
-                <input type="email" name="email" id="email" value="{{ Auth::user()->emailAddress() }}" required />
 
-                @unless(Auth::user()->hasVerifiedEmail())
-                    <span class="text-gray-600 text-sm">
-                        This email address is not verified yet.
-                        <a href="{{ route('verification.notice') }}" class="text-lio-500">Resend verification email.</a>
-                    </span>
-                @endunless
+                <div class="flex flex-col space-y-6 lg:flex-row lg:space-y-0 lg:space-x-6">
+                    <div class="flex-grow space-y-6">
+                        <div class="space-y-1">
+                            <x-label for="name"/>
+                            <x-input name="name" :value="Auth::user()->name()" required />
+                        </div>
 
-                @error('email')
-            @endFormGroup
+                        <div class="space-y-1">
+                            <x-label for="bio"/>
+                            <x-textarea name="bio" rows="3" maxlength="160">
+                                {{ Auth::user()->bio() }}
+                            </x-textarea>
+                            <span class="mt-2 text-sm text-gray-500">The user bio is limited to 160 characters.</span>
+                        </div>
+                    </div>
+                    <div class="flex-grow space-y-1 lg:flex-grow-0 lg:flex-shrink-0">
+                        <p class="block text-sm leading-5 font-medium text-gray-700" aria-hidden="true">
+                            Profile Image
+                        </p>
+                        <div class="flex items-center">
+                            <div class="flex-shrink-0 inline-block overflow-hidden" aria-hidden="true">
+                                <x-avatar :search="Auth::user()->emailAddress()" provider="gravatar" class="rounded-full h-32 w-32" />
+                                <span class="mt-2 text-sm text-gray-500">Change your avatar on <a href="https://gravatar.com/" class="text-lio-700">Gravatar</a>.</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
 
-            @formGroup('username')
-                <label for="username">Username</label>
-                <input type="text" name="username" id="username" value="{{ Auth::user()->username() }}" required />
-                @error('username')
-            @endFormGroup
+                <div class="grid grid-cols-12 gap-6">
+                    <div class="col-span-12">
+                        <x-label for="email" />
+                        <x-email name="email" :value="Auth::user()->emailAddress()" required />
 
-            @formGroup('twitter')
-                <label for="twitter">Twitter handle</label>
-                <input type="text" name="twitter" id="twitter" value="{{ Auth::user()->twitter() }}" />
-                @error('twitter_handle')
-            @endFormGroup
+                        @unless(Auth::user()->hasVerifiedEmail())
+                            <span class="mt-2 text-sm text-gray-500">
+                                This email address is not verified yet.
+                                <a href="{{ route('verification.notice') }}" class="text-lio-500">Resend verification email.</a>
+                            </span>
+                        @endunless
+                    </div>
 
-            @formGroup('bio')
-                <label for="bio">Bio</label>
-                <textarea name="bio" rows="3" maxlength="160">{{ Auth::user()->bio() }}</textarea>
-                <span class="text-gray-600 text-sm">The user bio is limited to 160 characters.</span>
-                @error('bio')
-            @endFormGroup
+                    <div class="col-span-12 sm:col-span-6">
+                        <x-label for="username" />
+                        <x-input name="username" :value="Auth::user()->username()" required />
+                    </div>
 
-            <div class="flex justify-end">
-                <button type="submit" class="button button-primary">Save</button>
+                    <div class="col-span-12 sm:col-span-6">
+                        <x-label for="twitter">Twitter handle</x-label>
+                        <x-input name="twitter" :value="Auth::user()->twitter()" prefix-icon="heroicon-o-at-symbol" />
+                        <span class="mt-2 text-sm text-gray-500">
+                            Enter your Twitter handle without the leading @ symbol
+                        </span>
+                    </div>
+                </div>
+                
             </div>
-        </form>
-    </div>
 
-    @unless (Auth::user()->isAdmin())
-        <div class="md:p-4 md:border-2 md:rounded md:bg-gray-100 mb-8">
-            <h3 class="text-red-500 uppercase mb-4">Danger Zone</h3>
-            <p class="mb-8">Please be aware that deleting your account will also remove all of your data, including your threads and replies. This cannot be undone.</p>
-            <div class="flex">
-                <a href="javascript:" class="button button-danger" @click.prevent="activeModal = 'delete-user'">Delete Account</a>
+            <div class="px-4 py-3 bg-gray-50 text-right sm:px-6">
+                <span class="inline-flex rounded-md shadow-sm">
+                    <x-buttons.primary-button type="submit">
+                        Update Profile
+                    </x-buttons.primary-button>
+                </span>
             </div>
-        </div>
 
-        @include('_partials._delete_modal', [
-            'identifier' => 'delete-user',
-            'route' => ['settings.profile.delete'],
-            'title' => 'Delete Account',
-            'submit' => 'Confirm',
-            'body' => '<p>Deleting your account will remove any related content like threads & replies. This cannot be undone.</p>',
-        ])
-    @endunless
-@endsection
+        </div>
+    </x-form>
+</section>
diff --git a/resources/views/users/settings/remove.blade.php b/resources/views/users/settings/remove.blade.php
new file mode 100644
index 000000000..5f4a7d90f
--- /dev/null
+++ b/resources/views/users/settings/remove.blade.php
@@ -0,0 +1,29 @@
+@unless (Auth::user()->isAdmin())
+    <section aria-labelledby="remove_account_heading" class="mt-6">
+        <div class="shadow sm:rounded-md sm:overflow-hidden">
+            <div class="bg-white py-6 px-4 space-y-6 sm:p-6">
+                <div>
+                    <h2 id="remove_account_heading" class="text-lg leading-6 font-medium text-red-500 uppercase">Danger Zone</h2>
+                    <p class="mt-1 text-sm leading-5 text-gray-500">
+                        Please be aware that deleting your account will also remove all of your data, including your threads and replies. This cannot be undone.
+                    </p>
+                </div>
+            </div>
+            <div class="px-4 py-3 bg-gray-50 text-right sm:px-6">
+                <span class="inline-flex rounded-md shadow-sm">
+                    <x-buttons.danger-button @click.prevent="activeModal = 'delete-user'">
+                        Delete Account
+                    </x-buttons.danger-button>
+                </span>
+            </div>
+        </div>
+    </section>
+
+    @include('_partials._delete_modal', [
+        'identifier' => 'delete-user',
+        'route' => ['settings.profile.delete'],
+        'title' => 'Delete Account',
+        'submit' => 'Confirm',
+        'body' => '<p>Deleting your account will remove any related content like threads & replies. This cannot be undone.</p>',
+    ])
+@endunless
\ No newline at end of file
diff --git a/resources/views/users/settings/settings.blade.php b/resources/views/users/settings/settings.blade.php
new file mode 100644
index 000000000..09d115946
--- /dev/null
+++ b/resources/views/users/settings/settings.blade.php
@@ -0,0 +1,25 @@
+@title('Settings')
+
+@extends('layouts.base', ['isTailwindUi' => true])
+
+@section('body')
+    <div class="bg-gray-50">
+        <div class="bg-white border-b">
+            <div class="container mx-auto flex justify-between items-center px-4">
+                <h1 class="text-xl py-4 text-gray-900">Settings</h1>
+            </div>
+        </div>
+
+        @include('layouts._alerts')
+
+        <main class="max-w-4xl mx-auto pt-10 pb-12 px-4 lg:pb-16">
+            <div class="lg:grid lg:gap-x-5">
+                <div class="sm:px-6 lg:px-0 lg:col-span-9">
+                    @include('users.settings.profile')
+                    @include('users.settings.password')
+                    @include('users.settings.remove')
+                </div>
+            </div>
+        </main>
+    </div>
+@endsection
diff --git a/resources/views/vendor/blade-ui-kit/components/forms/inputs/email.blade.php b/resources/views/vendor/blade-ui-kit/components/forms/inputs/email.blade.php
new file mode 100644
index 000000000..ad6def82f
--- /dev/null
+++ b/resources/views/vendor/blade-ui-kit/components/forms/inputs/email.blade.php
@@ -0,0 +1,6 @@
+<x-input 
+    type="email" 
+    name="{{ $name }}"
+    :value="$value"
+    {{ $attributes}} 
+/>
\ No newline at end of file
diff --git a/resources/views/vendor/blade-ui-kit/components/forms/inputs/input.blade.php b/resources/views/vendor/blade-ui-kit/components/forms/inputs/input.blade.php
new file mode 100644
index 000000000..fd5dde18b
--- /dev/null
+++ b/resources/views/vendor/blade-ui-kit/components/forms/inputs/input.blade.php
@@ -0,0 +1,31 @@
+<div>
+    <div class="relative">
+        @if ($attributes->get('prefix-icon'))
+            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                @svg($attributes->get('prefix-icon'), ['class' => 'h-5 w-5 text-gray-400'])
+            </div>
+        @endif
+
+        <input
+            name="{{ $name }}"
+            type="{{ $type }}"
+            id="{{ $id }}"
+            @if ($value)value="{{ $value }}"@endif
+            {{ $attributes->merge([
+                'class' => 'form-input block w-full sm:text-sm sm:leading-5 mt-1' . ($attributes->get('prefix-icon') ? ' pl-10' : '') . ($errors->has($name) ? ' border-red-300 text-red-900 placeholder-red-300 focus:outline-none focus:ring-red-500 focus:border-red-500' : '')
+            ]) }}
+        />
+
+        @if ($errors->has($name))
+            <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
+                <x-heroicon-o-exclamation-circle class="h-5 w-5 text-red-500" />
+            </div>
+        @endif
+    </div>
+    
+    @if ($errors->has($name))
+        @foreach ($errors->get($name) as $error)
+            <p class="mt-2 text-sm text-red-600">{{ $error }}</p>
+        @endforeach
+    @endif
+</div>
\ No newline at end of file
diff --git a/resources/views/vendor/blade-ui-kit/components/forms/inputs/password.blade.php b/resources/views/vendor/blade-ui-kit/components/forms/inputs/password.blade.php
new file mode 100644
index 000000000..32ab49cea
--- /dev/null
+++ b/resources/views/vendor/blade-ui-kit/components/forms/inputs/password.blade.php
@@ -0,0 +1,5 @@
+<x-input 
+    type="password" 
+    name="{{ $name }}" 
+    {{ $attributes}} 
+/>
\ No newline at end of file
diff --git a/resources/views/vendor/blade-ui-kit/components/forms/inputs/textarea.blade.php b/resources/views/vendor/blade-ui-kit/components/forms/inputs/textarea.blade.php
new file mode 100644
index 000000000..d2ff5a481
--- /dev/null
+++ b/resources/views/vendor/blade-ui-kit/components/forms/inputs/textarea.blade.php
@@ -0,0 +1,22 @@
+<div class="relative">
+    <textarea
+        name="{{ $name }}"
+        id="{{ $id }}"
+        rows="{{ $rows }}"
+        {{ $attributes->merge([
+            'class' => 'form-textarea block w-full transition duration-150 ease-in-out sm:text-sm sm:leading-5' . ($errors->has($name) ? ' border-red-300 text-red-900 placeholder-red-300 focus:outline-none focus:ring-red-500 focus:border-red-500' : '')
+        ]) }}
+    >{{ old($name, $slot) }}</textarea>
+
+    @if ($errors->has($name))
+        <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
+            <x-heroicon-o-exclamation-circle class="h-5 w-5 text-red-500" />
+        </div>
+    @endif
+
+    @if ($errors->has($name))
+        @foreach ($errors->get($name) as $error)
+            <p class="mt-2 text-sm text-red-600">{{ $error }}</p>
+        @endforeach
+    @endif
+</div>
diff --git a/resources/views/vendor/blade-ui-kit/components/forms/label.blade.php b/resources/views/vendor/blade-ui-kit/components/forms/label.blade.php
new file mode 100644
index 000000000..fff8dc4f0
--- /dev/null
+++ b/resources/views/vendor/blade-ui-kit/components/forms/label.blade.php
@@ -0,0 +1,3 @@
+<label for="{{ $for }}" {{ $attributes->merge(['class' => 'block text-sm font-medium leading-5 text-gray-700']) }}>
+    {{ $slot->isNotEmpty() ? $slot : $fallback }}
+</label>
diff --git a/routes/web.php b/routes/web.php
index 71dfc011a..b5f779f04 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -73,7 +73,6 @@
 Route::get('settings', [ProfileSettingsController::class, 'edit'])->name('settings.profile');
 Route::put('settings', [ProfileSettingsController::class, 'update'])->name('settings.profile.update');
 Route::delete('settings', [ProfileSettingsController::class, 'destroy'])->name('settings.profile.delete');
-Route::get('settings/password', [PasswordController::class, 'edit'])->name('settings.password');
 Route::put('settings/password', [PasswordController::class, 'update'])->name('settings.password.update');
 
 // Forum
diff --git a/tests/Feature/SettingsTest.php b/tests/Feature/SettingsTest.php
index 2d39fcabe..3823c5f0c 100644
--- a/tests/Feature/SettingsTest.php
+++ b/tests/Feature/SettingsTest.php
@@ -23,7 +23,7 @@ public function users_can_update_their_profile()
         $this->login();
 
         $this->visit('/settings')
-            ->submitForm('Save', [
+            ->submitForm('Update Profile', [
                 'name' => 'Freek Murze',
                 'email' => 'freek@example.com',
                 'username' => 'freekmurze',
@@ -46,7 +46,7 @@ public function users_cannot_choose_duplicate_usernames_or_email_addresses()
         $this->login();
 
         $this->visit('/settings')
-            ->submitForm('Save', [
+            ->submitForm('Update Profile', [
                 'name' => 'Freek Murze',
                 'email' => 'freek@example.com',
                 'username' => 'freekmurze',
@@ -82,13 +82,13 @@ public function users_can_update_their_password()
     {
         $this->login();
 
-        $this->visit('/settings/password')
-            ->submitForm('Save', [
+        $this->visit('/settings')
+            ->submitForm('Update Password', [
                 'current_password' => 'password',
                 'password' => 'newpassword',
                 'password_confirmation' => 'newpassword',
             ])
-            ->seePageIs('/settings/password')
+            ->seePageIs('/settings')
             ->see('Password successfully changed!');
 
         $this->assertPasswordWasHashedAndSaved();
@@ -101,12 +101,12 @@ public function users_can_set_their_password_when_they_have_none_set_yet()
 
         $this->loginAs($user);
 
-        $this->visit('/settings/password')
-            ->submitForm('Save', [
+        $this->visit('/settings')
+            ->submitForm('Update Password', [
                 'password' => 'newpassword',
                 'password_confirmation' => 'newpassword',
             ])
-            ->seePageIs('/settings/password')
+            ->seePageIs('/settings')
             ->see('Password successfully changed!');
 
         $this->assertPasswordWasHashedAndSaved();
@@ -120,7 +120,7 @@ public function twitter_is_optional()
         $this->loginAs($user);
 
         $this->visit('/settings')
-            ->submitForm('Save', [
+            ->submitForm('Update Profile', [
                 'name' => 'Freek Murze',
                 'email' => 'freek@example.com',
                 'username' => 'freekmurze',