diff --git a/eslint.config.js b/eslint.config.js
index dd777ec..d6d1738 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -1,99 +1 @@
-import stylistic from '@stylistic/eslint-plugin';
-import { defineConfigWithVueTs, vueTsConfigs } from '@vue/eslint-config-typescript';
-import prettier from 'eslint-config-prettier/flat';
-import importPlugin from 'eslint-plugin-import';
-import vue from 'eslint-plugin-vue';
-
-const controlStatements = [
-    'if',
-    'return',
-    'for',
-    'while',
-    'do',
-    'switch',
-    'try',
-    'throw',
-];
-const paddingAroundControl = [
-    ...controlStatements.flatMap((stmt) => [
-        { blankLine: 'always', prev: '*', next: stmt },
-        { blankLine: 'always', prev: stmt, next: '*' },
-    ]),
-];
-
-export default defineConfigWithVueTs(
-    vue.configs['flat/essential'],
-    vueTsConfigs.recommended,
-    {
-        plugins: {
-            import: importPlugin,
-        },
-        settings: {
-            'import/resolver': {
-                typescript: {
-                    alwaysTryTypes: true,
-                    project: './tsconfig.json',
-                },
-                node: true,
-            },
-        },
-        rules: {
-            'vue/multi-word-component-names': 'off',
-            '@typescript-eslint/no-explicit-any': 'off',
-            '@typescript-eslint/consistent-type-imports': [
-                'error',
-                {
-                    prefer: 'type-imports',
-                    fixStyle: 'separate-type-imports',
-                },
-            ],
-            'import/order': [
-                'error',
-                {
-                    groups: ['builtin', 'external', 'internal', 'parent', 'sibling', 'index'],
-                    alphabetize: { order: 'asc', caseInsensitive: true },
-                },
-            ],
-            'import/consistent-type-specifier-style': [
-                'error',
-                'prefer-top-level',
-            ],
-        },
-    },
-    {
-        plugins: {
-            '@stylistic': stylistic,
-        },
-        rules: {
-            '@stylistic/brace-style': ['error', '1tbs', { allowSingleLine: false }],
-            '@stylistic/padding-line-between-statements': [
-                'error',
-                ...paddingAroundControl,
-            ],
-        },
-    },
-    {
-        ignores: [
-            'vendor',
-            'node_modules',
-            'public',
-            'bootstrap/ssr',
-            'tailwind.config.js',
-            'vite.config.ts',
-            'resources/js/actions/**',
-            'resources/js/components/ui/*',
-            'resources/js/routes/**',
-            'resources/js/wayfinder/**',
-        ],
-    },
-    prettier,
-    {
-        plugins: {
-            '@stylistic': stylistic,
-        },
-        rules: {
-            curly: ['error', 'all'],
-            '@stylistic/brace-style': ['error', '1tbs', { allowSingleLine: false }],
-        },
-    },
-);
+export default [];
diff --git a/package-lock.json b/package-lock.json
index 1215cba..6a29845 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
                 "@inertiajs/vue3": "^3.0.0",
                 "@laravel/passkeys": "^0.2.0",
                 "@lucide/vue": "^1.17.0",
+                "@mdi/font": "^7.4.47",
                 "@vueuse/core": "^12.8.2",
                 "class-variance-authority": "^0.7.1",
                 "clsx": "^2.1.1",
@@ -17,9 +18,11 @@
                 "tailwind-merge": "^3.2.0",
                 "tailwindcss": "^4.1.1",
                 "tw-animate-css": "^1.2.5",
+                "vite-plugin-vuetify": "^2.1.3",
                 "vue": "^3.5.13",
                 "vue-input-otp": "^0.3.2",
-                "vue-sonner": "^2.0.0"
+                "vue-sonner": "^2.0.0",
+                "vuetify": "^4.1.2"
             },
             "devDependencies": {
                 "@eslint/js": "^9.19.0",
@@ -37,6 +40,7 @@
                 "eslint-plugin-vue": "^9.32.0",
                 "prettier": "^3.4.2",
                 "prettier-plugin-tailwindcss": "^0.6.11",
+                "sass-embedded": "^1.100.0",
                 "typescript": "^5.2.2",
                 "typescript-eslint": "^8.23.0",
                 "vite": "^8.0.0",
@@ -97,6 +101,13 @@
                 "node": ">=6.9.0"
             }
         },
+        "node_modules/@bufbuild/protobuf": {
+            "version": "2.12.0",
+            "resolved": "https://registry.npmjs.org/@bufbuild/protobuf/-/protobuf-2.12.0.tgz",
+            "integrity": "sha512-B/XlCaFIP8LOwzo+bz5uFzATYokcwCKQcghqnlfwSmM5eX/qTkvDBnDPs+gXtX/RyjxJ4DRikECcPJbyALA8FA==",
+            "devOptional": true,
+            "license": "(Apache-2.0 AND BSD-3-Clause)"
+        },
         "node_modules/@emnapi/core": {
             "version": "1.10.0",
             "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.10.0.tgz",
@@ -617,6 +628,12 @@
                 "vue": ">=3.0.1"
             }
         },
+        "node_modules/@mdi/font": {
+            "version": "7.4.47",
+            "resolved": "https://registry.npmjs.org/@mdi/font/-/font-7.4.47.tgz",
+            "integrity": "sha512-43MtGpd585SNzHZPcYowu/84Vz2a2g31TvPMTm9uTiCSWzaheQySUcSyUH/46fPnuPQWof2yd0pGBtzee/IQWw==",
+            "license": "Apache-2.0"
+        },
         "node_modules/@napi-rs/wasm-runtime": {
             "version": "1.1.5",
             "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-1.1.5.tgz",
@@ -682,6 +699,320 @@
                 "url": "https://github.com/sponsors/Boshen"
             }
         },
+        "node_modules/@parcel/watcher": {
+            "version": "2.5.6",
+            "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.6.tgz",
+            "integrity": "sha512-tmmZ3lQxAe/k/+rNnXQRawJ4NjxO2hqiOLTHvWchtGZULp4RyFeh6aU4XdOYBFe2KE1oShQTv4AblOs2iOrNnQ==",
+            "hasInstallScript": true,
+            "license": "MIT",
+            "optional": true,
+            "dependencies": {
+                "detect-libc": "^2.0.3",
+                "is-glob": "^4.0.3",
+                "node-addon-api": "^7.0.0",
+                "picomatch": "^4.0.3"
+            },
+            "engines": {
+                "node": ">= 10.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/parcel"
+            },
+            "optionalDependencies": {
+                "@parcel/watcher-android-arm64": "2.5.6",
+                "@parcel/watcher-darwin-arm64": "2.5.6",
+                "@parcel/watcher-darwin-x64": "2.5.6",
+                "@parcel/watcher-freebsd-x64": "2.5.6",
+                "@parcel/watcher-linux-arm-glibc": "2.5.6",
+                "@parcel/watcher-linux-arm-musl": "2.5.6",
+                "@parcel/watcher-linux-arm64-glibc": "2.5.6",
+                "@parcel/watcher-linux-arm64-musl": "2.5.6",
+                "@parcel/watcher-linux-x64-glibc": "2.5.6",
+                "@parcel/watcher-linux-x64-musl": "2.5.6",
+                "@parcel/watcher-win32-arm64": "2.5.6",
+                "@parcel/watcher-win32-ia32": "2.5.6",
+                "@parcel/watcher-win32-x64": "2.5.6"
+            }
+        },
+        "node_modules/@parcel/watcher-android-arm64": {
+            "version": "2.5.6",
+            "resolved": "https://registry.npmjs.org/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.5.6.tgz",
+            "integrity": "sha512-YQxSS34tPF/6ZG7r/Ih9xy+kP/WwediEUsqmtf0cuCV5TPPKw/PQHRhueUo6JdeFJaqV3pyjm0GdYjZotbRt/A==",
+            "cpu": [
+                "arm64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "android"
+            ],
+            "engines": {
+                "node": ">= 10.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/parcel"
+            }
+        },
+        "node_modules/@parcel/watcher-darwin-arm64": {
+            "version": "2.5.6",
+            "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.5.6.tgz",
+            "integrity": "sha512-Z2ZdrnwyXvvvdtRHLmM4knydIdU9adO3D4n/0cVipF3rRiwP+3/sfzpAwA/qKFL6i1ModaabkU7IbpeMBgiVEA==",
+            "cpu": [
+                "arm64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "darwin"
+            ],
+            "engines": {
+                "node": ">= 10.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/parcel"
+            }
+        },
+        "node_modules/@parcel/watcher-darwin-x64": {
+            "version": "2.5.6",
+            "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.5.6.tgz",
+            "integrity": "sha512-HgvOf3W9dhithcwOWX9uDZyn1lW9R+7tPZ4sug+NGrGIo4Rk1hAXLEbcH1TQSqxts0NYXXlOWqVpvS1SFS4fRg==",
+            "cpu": [
+                "x64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "darwin"
+            ],
+            "engines": {
+                "node": ">= 10.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/parcel"
+            }
+        },
+        "node_modules/@parcel/watcher-freebsd-x64": {
+            "version": "2.5.6",
+            "resolved": "https://registry.npmjs.org/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.5.6.tgz",
+            "integrity": "sha512-vJVi8yd/qzJxEKHkeemh7w3YAn6RJCtYlE4HPMoVnCpIXEzSrxErBW5SJBgKLbXU3WdIpkjBTeUNtyBVn8TRng==",
+            "cpu": [
+                "x64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "freebsd"
+            ],
+            "engines": {
+                "node": ">= 10.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/parcel"
+            }
+        },
+        "node_modules/@parcel/watcher-linux-arm-glibc": {
+            "version": "2.5.6",
+            "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.5.6.tgz",
+            "integrity": "sha512-9JiYfB6h6BgV50CCfasfLf/uvOcJskMSwcdH1PHH9rvS1IrNy8zad6IUVPVUfmXr+u+Km9IxcfMLzgdOudz9EQ==",
+            "cpu": [
+                "arm"
+            ],
+            "libc": [
+                "glibc"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">= 10.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/parcel"
+            }
+        },
+        "node_modules/@parcel/watcher-linux-arm-musl": {
+            "version": "2.5.6",
+            "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-musl/-/watcher-linux-arm-musl-2.5.6.tgz",
+            "integrity": "sha512-Ve3gUCG57nuUUSyjBq/MAM0CzArtuIOxsBdQ+ftz6ho8n7s1i9E1Nmk/xmP323r2YL0SONs1EuwqBp2u1k5fxg==",
+            "cpu": [
+                "arm"
+            ],
+            "libc": [
+                "musl"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">= 10.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/parcel"
+            }
+        },
+        "node_modules/@parcel/watcher-linux-arm64-glibc": {
+            "version": "2.5.6",
+            "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.5.6.tgz",
+            "integrity": "sha512-f2g/DT3NhGPdBmMWYoxixqYr3v/UXcmLOYy16Bx0TM20Tchduwr4EaCbmxh1321TABqPGDpS8D/ggOTaljijOA==",
+            "cpu": [
+                "arm64"
+            ],
+            "libc": [
+                "glibc"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">= 10.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/parcel"
+            }
+        },
+        "node_modules/@parcel/watcher-linux-arm64-musl": {
+            "version": "2.5.6",
+            "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.5.6.tgz",
+            "integrity": "sha512-qb6naMDGlbCwdhLj6hgoVKJl2odL34z2sqkC7Z6kzir8b5W65WYDpLB6R06KabvZdgoHI/zxke4b3zR0wAbDTA==",
+            "cpu": [
+                "arm64"
+            ],
+            "libc": [
+                "musl"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">= 10.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/parcel"
+            }
+        },
+        "node_modules/@parcel/watcher-linux-x64-glibc": {
+            "version": "2.5.6",
+            "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.5.6.tgz",
+            "integrity": "sha512-kbT5wvNQlx7NaGjzPFu8nVIW1rWqV780O7ZtkjuWaPUgpv2NMFpjYERVi0UYj1msZNyCzGlaCWEtzc+exjMGbQ==",
+            "cpu": [
+                "x64"
+            ],
+            "libc": [
+                "glibc"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">= 10.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/parcel"
+            }
+        },
+        "node_modules/@parcel/watcher-linux-x64-musl": {
+            "version": "2.5.6",
+            "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.5.6.tgz",
+            "integrity": "sha512-1JRFeC+h7RdXwldHzTsmdtYR/Ku8SylLgTU/reMuqdVD7CtLwf0VR1FqeprZ0eHQkO0vqsbvFLXUmYm/uNKJBg==",
+            "cpu": [
+                "x64"
+            ],
+            "libc": [
+                "musl"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">= 10.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/parcel"
+            }
+        },
+        "node_modules/@parcel/watcher-win32-arm64": {
+            "version": "2.5.6",
+            "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.5.6.tgz",
+            "integrity": "sha512-3ukyebjc6eGlw9yRt678DxVF7rjXatWiHvTXqphZLvo7aC5NdEgFufVwjFfY51ijYEWpXbqF5jtrK275z52D4Q==",
+            "cpu": [
+                "arm64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "win32"
+            ],
+            "engines": {
+                "node": ">= 10.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/parcel"
+            }
+        },
+        "node_modules/@parcel/watcher-win32-ia32": {
+            "version": "2.5.6",
+            "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.5.6.tgz",
+            "integrity": "sha512-k35yLp1ZMwwee3Ez/pxBi5cf4AoBKYXj00CZ80jUz5h8prpiaQsiRPKQMxoLstNuqe2vR4RNPEAEcjEFzhEz/g==",
+            "cpu": [
+                "ia32"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "win32"
+            ],
+            "engines": {
+                "node": ">= 10.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/parcel"
+            }
+        },
+        "node_modules/@parcel/watcher-win32-x64": {
+            "version": "2.5.6",
+            "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.5.6.tgz",
+            "integrity": "sha512-hbQlYcCq5dlAX9Qx+kFb0FHue6vbjlf0FrNzSKdYK2APUf7tGfGxQCk2ihEREmbR6ZMc0MVAD5RIX/41gpUzTw==",
+            "cpu": [
+                "x64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "win32"
+            ],
+            "engines": {
+                "node": ">= 10.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/parcel"
+            }
+        },
         "node_modules/@rolldown/binding-android-arm64": {
             "version": "1.0.3",
             "resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm64/-/binding-android-arm64-1.0.3.tgz",
@@ -2205,6 +2536,19 @@
             "integrity": "sha512-FTW0AFZNaK5/mOqvGBwVfUlNLU38TiQn4+DQgIFUnrBBJQ1crMJ82yeGQLV5jyKFsO8yRukpbuP7x+nRbH6aug==",
             "license": "MIT"
         },
+        "node_modules/@vuetify/loader-shared": {
+            "version": "2.1.2",
+            "resolved": "https://registry.npmjs.org/@vuetify/loader-shared/-/loader-shared-2.1.2.tgz",
+            "integrity": "sha512-X+1jBLmXHkpQEnC0vyOb4rtX2QSkBiFhaFXz8yhQqN2A4vQ6k2nChxN4Ol7VAY5KoqMdFoRMnmNdp/1qYXDQig==",
+            "license": "MIT",
+            "dependencies": {
+                "upath": "^2.0.1"
+            },
+            "peerDependencies": {
+                "vue": "^3.0.0",
+                "vuetify": ">=3"
+            }
+        },
         "node_modules/@vueuse/core": {
             "version": "12.8.2",
             "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-12.8.2.tgz",
@@ -2614,6 +2958,22 @@
                 "node": ">=8"
             }
         },
+        "node_modules/chokidar": {
+            "version": "5.0.0",
+            "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-5.0.0.tgz",
+            "integrity": "sha512-TQMmc3w+5AxjpL8iIiwebF73dRDF4fBIieAqGn9RGCWaEVwQ6Fb2cGe31Yns0RRIzii5goJ1Y7xbMwo1TxMplw==",
+            "license": "MIT",
+            "optional": true,
+            "dependencies": {
+                "readdirp": "^5.0.0"
+            },
+            "engines": {
+                "node": ">= 20.19.0"
+            },
+            "funding": {
+                "url": "https://paulmillr.com/funding/"
+            }
+        },
         "node_modules/class-variance-authority": {
             "version": "0.7.1",
             "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.1.tgz",
@@ -2670,6 +3030,13 @@
             "dev": true,
             "license": "MIT"
         },
+        "node_modules/colorjs.io": {
+            "version": "0.5.2",
+            "resolved": "https://registry.npmjs.org/colorjs.io/-/colorjs.io-0.5.2.tgz",
+            "integrity": "sha512-twmVoizEW7ylZSN32OgKdXRmo1qg+wT5/6C3xu5b9QsWzSFAhHLn2xd8ro0diCsKfCj1RdaTP/nrcW+vAoQPIw==",
+            "devOptional": true,
+            "license": "MIT"
+        },
         "node_modules/concat-map": {
             "version": "0.0.1",
             "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -2801,7 +3168,6 @@
             "version": "4.4.3",
             "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
             "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "ms": "^2.1.3"
@@ -4037,7 +4403,7 @@
             "version": "4.0.0",
             "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
             "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-            "dev": true,
+            "devOptional": true,
             "license": "MIT",
             "engines": {
                 "node": ">=8"
@@ -4134,6 +4500,13 @@
                 "node": ">= 4"
             }
         },
+        "node_modules/immutable": {
+            "version": "5.1.6",
+            "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.6.tgz",
+            "integrity": "sha512-q1swsS8K7L8usSHuOqF2TAoCCkonYz0SG38wLAggaa4Wml70zixIvt2ql4coQ2C2B3hTjltJry4r6bULwgAXLQ==",
+            "devOptional": true,
+            "license": "MIT"
+        },
         "node_modules/import-fresh": {
             "version": "3.3.1",
             "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
@@ -4341,7 +4714,7 @@
             "version": "2.1.1",
             "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
             "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
-            "dev": true,
+            "devOptional": true,
             "license": "MIT",
             "engines": {
                 "node": ">=0.10.0"
@@ -4397,7 +4770,7 @@
             "version": "4.0.3",
             "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
             "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-            "dev": true,
+            "devOptional": true,
             "license": "MIT",
             "dependencies": {
                 "is-extglob": "^2.1.1"
@@ -5129,7 +5502,6 @@
             "version": "2.1.3",
             "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
             "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-            "dev": true,
             "license": "MIT"
         },
         "node_modules/muggle-string": {
@@ -5180,6 +5552,13 @@
             "dev": true,
             "license": "MIT"
         },
+        "node_modules/node-addon-api": {
+            "version": "7.1.1",
+            "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz",
+            "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==",
+            "license": "MIT",
+            "optional": true
+        },
         "node_modules/node-exports-info": {
             "version": "1.6.0",
             "resolved": "https://registry.npmjs.org/node-exports-info/-/node-exports-info-1.6.0.tgz",
@@ -5670,6 +6049,20 @@
             ],
             "license": "MIT"
         },
+        "node_modules/readdirp": {
+            "version": "5.0.0",
+            "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-5.0.0.tgz",
+            "integrity": "sha512-9u/XQ1pvrQtYyMpZe7DXKv2p5CNvyVwzUB6uhLAnQwHMSgKMBR62lc7AHljaeteeHXn11XTAaLLUVZYVZyuRBQ==",
+            "license": "MIT",
+            "optional": true,
+            "engines": {
+                "node": ">= 20.19.0"
+            },
+            "funding": {
+                "type": "individual",
+                "url": "https://paulmillr.com/funding/"
+            }
+        },
         "node_modules/reflect.getprototypeof": {
             "version": "1.0.10",
             "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",
@@ -5903,7 +6296,7 @@
             "version": "7.8.2",
             "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.2.tgz",
             "integrity": "sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==",
-            "dev": true,
+            "devOptional": true,
             "license": "Apache-2.0",
             "dependencies": {
                 "tslib": "^2.1.0"
@@ -5964,6 +6357,365 @@
                 "url": "https://github.com/sponsors/ljharb"
             }
         },
+        "node_modules/sass": {
+            "version": "1.100.0",
+            "resolved": "https://registry.npmjs.org/sass/-/sass-1.100.0.tgz",
+            "integrity": "sha512-B5j0rYMlinhhOo9tjQebMVVn0TfyXAF+wB3b2ggZUuJ/is/Y+7+JGjirAMxHZ9Z3hIP98NPfamlAkBHa1lAaXQ==",
+            "license": "MIT",
+            "optional": true,
+            "dependencies": {
+                "chokidar": "^5.0.0",
+                "immutable": "^5.1.5",
+                "source-map-js": ">=0.6.2 <2.0.0"
+            },
+            "bin": {
+                "sass": "sass.js"
+            },
+            "engines": {
+                "node": ">=20.19.0"
+            },
+            "optionalDependencies": {
+                "@parcel/watcher": "^2.4.1"
+            }
+        },
+        "node_modules/sass-embedded": {
+            "version": "1.100.0",
+            "resolved": "https://registry.npmjs.org/sass-embedded/-/sass-embedded-1.100.0.tgz",
+            "integrity": "sha512-Ut8wlQSk19tm7jMK6mz6cF1+e+E7tUnW2tM02zQDPnOTcVbV8qCQG8UWxZkkNlY50+hV3hqP24OOkUlMz8xBpw==",
+            "devOptional": true,
+            "license": "MIT",
+            "dependencies": {
+                "@bufbuild/protobuf": "^2.5.0",
+                "colorjs.io": "^0.5.0",
+                "immutable": "^5.1.5",
+                "rxjs": "^7.4.0",
+                "supports-color": "^8.1.1",
+                "sync-child-process": "^1.0.2",
+                "varint": "^6.0.0"
+            },
+            "bin": {
+                "sass": "dist/bin/sass.js"
+            },
+            "engines": {
+                "node": ">=16.0.0"
+            },
+            "optionalDependencies": {
+                "sass-embedded-all-unknown": "1.100.0",
+                "sass-embedded-android-arm": "1.100.0",
+                "sass-embedded-android-arm64": "1.100.0",
+                "sass-embedded-android-riscv64": "1.100.0",
+                "sass-embedded-android-x64": "1.100.0",
+                "sass-embedded-darwin-arm64": "1.100.0",
+                "sass-embedded-darwin-x64": "1.100.0",
+                "sass-embedded-linux-arm": "1.100.0",
+                "sass-embedded-linux-arm64": "1.100.0",
+                "sass-embedded-linux-musl-arm": "1.100.0",
+                "sass-embedded-linux-musl-arm64": "1.100.0",
+                "sass-embedded-linux-musl-riscv64": "1.100.0",
+                "sass-embedded-linux-musl-x64": "1.100.0",
+                "sass-embedded-linux-riscv64": "1.100.0",
+                "sass-embedded-linux-x64": "1.100.0",
+                "sass-embedded-unknown-all": "1.100.0",
+                "sass-embedded-win32-arm64": "1.100.0",
+                "sass-embedded-win32-x64": "1.100.0"
+            }
+        },
+        "node_modules/sass-embedded-all-unknown": {
+            "version": "1.100.0",
+            "resolved": "https://registry.npmjs.org/sass-embedded-all-unknown/-/sass-embedded-all-unknown-1.100.0.tgz",
+            "integrity": "sha512-auFtXY/kwYILmSVjtBDwyj0axcLbYYiffOKWoaXHnI5bsYwiRbBh3EneR1rpbX2ZIZCrwX93i5pxKLTZF/662Q==",
+            "cpu": [
+                "!arm",
+                "!arm64",
+                "!riscv64",
+                "!x64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "dependencies": {
+                "sass": "1.100.0"
+            }
+        },
+        "node_modules/sass-embedded-android-arm": {
+            "version": "1.100.0",
+            "resolved": "https://registry.npmjs.org/sass-embedded-android-arm/-/sass-embedded-android-arm-1.100.0.tgz",
+            "integrity": "sha512-70f3HgX2pFNmzpGQ86n5e6QfWn2fP4QUQGfFQK0P1XH73ZLIzLo2YqygrGKGKeeqtc5eU2Wl1/xQzhzuKnO4kw==",
+            "cpu": [
+                "arm"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "android"
+            ],
+            "engines": {
+                "node": ">=14.0.0"
+            }
+        },
+        "node_modules/sass-embedded-android-arm64": {
+            "version": "1.100.0",
+            "resolved": "https://registry.npmjs.org/sass-embedded-android-arm64/-/sass-embedded-android-arm64-1.100.0.tgz",
+            "integrity": "sha512-W+Ru9JwTnfU0UX3jSZcbqFdtKFMcYdfFwytc57h2DgnqCOIiAqI2E06mABZBZC+r3LwXCBuS5GbXAGeVgvVDkA==",
+            "cpu": [
+                "arm64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "android"
+            ],
+            "engines": {
+                "node": ">=14.0.0"
+            }
+        },
+        "node_modules/sass-embedded-android-riscv64": {
+            "version": "1.100.0",
+            "resolved": "https://registry.npmjs.org/sass-embedded-android-riscv64/-/sass-embedded-android-riscv64-1.100.0.tgz",
+            "integrity": "sha512-icU3o0V/uCSytSpf+tX5Lf51BvyQEbLzDUJfUi9etSauYBGHpPKkdtdZH0si4v98phq11Kl8rSV1SggksxF1Hg==",
+            "cpu": [
+                "riscv64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "android"
+            ],
+            "engines": {
+                "node": ">=14.0.0"
+            }
+        },
+        "node_modules/sass-embedded-android-x64": {
+            "version": "1.100.0",
+            "resolved": "https://registry.npmjs.org/sass-embedded-android-x64/-/sass-embedded-android-x64-1.100.0.tgz",
+            "integrity": "sha512-mevF9VQk6gEYByy8+jusaHGmd7Usb2ytX/DsEOd0JtOGCtcf1kh575xJ6OUBDIcJ15uLnbau/0iy1eP6WVBvWA==",
+            "cpu": [
+                "x64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "android"
+            ],
+            "engines": {
+                "node": ">=14.0.0"
+            }
+        },
+        "node_modules/sass-embedded-darwin-arm64": {
+            "version": "1.100.0",
+            "resolved": "https://registry.npmjs.org/sass-embedded-darwin-arm64/-/sass-embedded-darwin-arm64-1.100.0.tgz",
+            "integrity": "sha512-1PVlYi61POo93IT/FfrG1mc1tAHxeSTyUALF2aOFmXGWjVXr3bQzEQiBGCOvQbj/ix+5hNyXFXcEMEyKvtUJJA==",
+            "cpu": [
+                "arm64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "darwin"
+            ],
+            "engines": {
+                "node": ">=14.0.0"
+            }
+        },
+        "node_modules/sass-embedded-darwin-x64": {
+            "version": "1.100.0",
+            "resolved": "https://registry.npmjs.org/sass-embedded-darwin-x64/-/sass-embedded-darwin-x64-1.100.0.tgz",
+            "integrity": "sha512-x97o3JnGyImZNCIVs9wQHJUE5QCvmVIKaH1cwrz/5dK7OT1FpeNiW+u9TUomP9hG6Ekjd8EL8NBHpxTfIhdjmg==",
+            "cpu": [
+                "x64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "darwin"
+            ],
+            "engines": {
+                "node": ">=14.0.0"
+            }
+        },
+        "node_modules/sass-embedded-linux-arm": {
+            "version": "1.100.0",
+            "resolved": "https://registry.npmjs.org/sass-embedded-linux-arm/-/sass-embedded-linux-arm-1.100.0.tgz",
+            "integrity": "sha512-9Ul7O1eKrc5YlhwWjkp8tZPSe3UEwSZ1uwUZOQom1HL0pRlBA6F/IlGZYFTLwnHMIP1fc77MMNaBRfc05mKMpw==",
+            "cpu": [
+                "arm"
+            ],
+            "libc": "glibc",
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">=14.0.0"
+            }
+        },
+        "node_modules/sass-embedded-linux-arm64": {
+            "version": "1.100.0",
+            "resolved": "https://registry.npmjs.org/sass-embedded-linux-arm64/-/sass-embedded-linux-arm64-1.100.0.tgz",
+            "integrity": "sha512-Dwjmj8Z6VRy7rAi53JAdEwIyUjpfl7PhpSc2/LpQPQx+aO5Dp7Spaipkax0ufJl1SoDUdchCsM4y/88YaluorQ==",
+            "cpu": [
+                "arm64"
+            ],
+            "libc": "glibc",
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">=14.0.0"
+            }
+        },
+        "node_modules/sass-embedded-linux-musl-arm": {
+            "version": "1.100.0",
+            "resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-arm/-/sass-embedded-linux-musl-arm-1.100.0.tgz",
+            "integrity": "sha512-sl0JgbGloPyJg66XXx5UDSDScZ0oU85DpMQU4JU/sCUCFj1Z8zZ69SJWKTCNE4/jwnce7WI2zPCV5AG+RHOZJw==",
+            "cpu": [
+                "arm"
+            ],
+            "libc": "musl",
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">=14.0.0"
+            }
+        },
+        "node_modules/sass-embedded-linux-musl-arm64": {
+            "version": "1.100.0",
+            "resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-arm64/-/sass-embedded-linux-musl-arm64-1.100.0.tgz",
+            "integrity": "sha512-XpACJB2KjSLjf2e9uuvGVdOURsoNrFqgRiihhXyUHK9W0t3LIHb7z5MA/7XGPIT9bWSOO2zyw+rH/FHtDV/Yrg==",
+            "cpu": [
+                "arm64"
+            ],
+            "libc": "musl",
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">=14.0.0"
+            }
+        },
+        "node_modules/sass-embedded-linux-musl-riscv64": {
+            "version": "1.100.0",
+            "resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-riscv64/-/sass-embedded-linux-musl-riscv64-1.100.0.tgz",
+            "integrity": "sha512-ShvI0Kx04mwoCARwZ0UjiT97isQvzO80tAt91zmFyHLN9kelc/IrQi940farSm2xQVPCKdeVyeG0ekBsokSpYQ==",
+            "cpu": [
+                "riscv64"
+            ],
+            "libc": "musl",
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">=14.0.0"
+            }
+        },
+        "node_modules/sass-embedded-linux-musl-x64": {
+            "version": "1.100.0",
+            "resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-x64/-/sass-embedded-linux-musl-x64-1.100.0.tgz",
+            "integrity": "sha512-TDBCRWNuS4RDLQXvRc1gjZlWiWTWaWGp0Bwu/IKwJxov81lsvrCs3TihTyNXtW7V5aoN4Ky3r0QOkNb3mwmBnA==",
+            "cpu": [
+                "x64"
+            ],
+            "libc": "musl",
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">=14.0.0"
+            }
+        },
+        "node_modules/sass-embedded-linux-riscv64": {
+            "version": "1.100.0",
+            "resolved": "https://registry.npmjs.org/sass-embedded-linux-riscv64/-/sass-embedded-linux-riscv64-1.100.0.tgz",
+            "integrity": "sha512-j4ENJGOheO+fm3j/yorLxCjBP6/XskrZx7dTLlT+lXYwN/qqCqoA/gsNLI0McS3DFM6GBwPiffzWsdWS8t6sEQ==",
+            "cpu": [
+                "riscv64"
+            ],
+            "libc": "glibc",
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">=14.0.0"
+            }
+        },
+        "node_modules/sass-embedded-linux-x64": {
+            "version": "1.100.0",
+            "resolved": "https://registry.npmjs.org/sass-embedded-linux-x64/-/sass-embedded-linux-x64-1.100.0.tgz",
+            "integrity": "sha512-0vUSN8j0WGtCJIOPh//EmUvYGHW0QOe5iul8qyhPk50MAcw49MA0r34AhftjDdx94ILPF6vApFs0gwHPQRlpVA==",
+            "cpu": [
+                "x64"
+            ],
+            "libc": "glibc",
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">=14.0.0"
+            }
+        },
+        "node_modules/sass-embedded-unknown-all": {
+            "version": "1.100.0",
+            "resolved": "https://registry.npmjs.org/sass-embedded-unknown-all/-/sass-embedded-unknown-all-1.100.0.tgz",
+            "integrity": "sha512-c+naBgWId4MIpToXcI0DgqetjdAkwTTAxFAuOaBz7HUXLdyG1oZRrEvSsbe41nEdQOKH0vgofVFCeSQgoXOG9A==",
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "!android",
+                "!darwin",
+                "!linux",
+                "!win32"
+            ],
+            "dependencies": {
+                "sass": "1.100.0"
+            }
+        },
+        "node_modules/sass-embedded-win32-arm64": {
+            "version": "1.100.0",
+            "resolved": "https://registry.npmjs.org/sass-embedded-win32-arm64/-/sass-embedded-win32-arm64-1.100.0.tgz",
+            "integrity": "sha512-iE+yxj+hUXwwbqpHkXxgAWTzeRfcWxJ7SSTQEPMk48lwq3oCrWLlz5sQuWHbuTK/i0GKQfROdP+hOmPi89yjUg==",
+            "cpu": [
+                "arm64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "win32"
+            ],
+            "engines": {
+                "node": ">=14.0.0"
+            }
+        },
+        "node_modules/sass-embedded-win32-x64": {
+            "version": "1.100.0",
+            "resolved": "https://registry.npmjs.org/sass-embedded-win32-x64/-/sass-embedded-win32-x64-1.100.0.tgz",
+            "integrity": "sha512-qI4F8MI7/KYoy9NdjJfhSspG42WPkADSNDvwEV7qWvCSFC83koJssRsKO2/PfY+niZz6BG65Ic/D+A11h959hw==",
+            "cpu": [
+                "x64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "win32"
+            ],
+            "engines": {
+                "node": ">=14.0.0"
+            }
+        },
         "node_modules/semver": {
             "version": "7.8.5",
             "resolved": "https://registry.npmjs.org/semver/-/semver-7.8.5.tgz",
@@ -6286,7 +7038,7 @@
             "version": "8.1.1",
             "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
             "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
-            "dev": true,
+            "devOptional": true,
             "license": "MIT",
             "dependencies": {
                 "has-flag": "^4.0.0"
@@ -6311,6 +7063,29 @@
                 "url": "https://github.com/sponsors/ljharb"
             }
         },
+        "node_modules/sync-child-process": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/sync-child-process/-/sync-child-process-1.0.2.tgz",
+            "integrity": "sha512-8lD+t2KrrScJ/7KXCSyfhT3/hRq78rC0wBFqNJXv3mZyn6hW2ypM05JmlSvtqRbeq6jqA94oHbxAr2vYsJ8vDA==",
+            "devOptional": true,
+            "license": "MIT",
+            "dependencies": {
+                "sync-message-port": "^1.0.0"
+            },
+            "engines": {
+                "node": ">=16.0.0"
+            }
+        },
+        "node_modules/sync-message-port": {
+            "version": "1.2.0",
+            "resolved": "https://registry.npmjs.org/sync-message-port/-/sync-message-port-1.2.0.tgz",
+            "integrity": "sha512-gAQ9qrUN/UCypHtGFbbe7Rc/f9bzO88IwrG8TDo/aMKAApKyD6E3W4Cm0EfhfBb6Z6SKt59tTCTfD+n1xmAvMg==",
+            "devOptional": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=16.0.0"
+            }
+        },
         "node_modules/tailwind-merge": {
             "version": "3.6.0",
             "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.6.0.tgz",
@@ -6627,6 +7402,16 @@
                 "@unrs/resolver-binding-win32-x64-msvc": "1.12.2"
             }
         },
+        "node_modules/upath": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/upath/-/upath-2.0.1.tgz",
+            "integrity": "sha512-1uEe95xksV1O0CYKXo8vQvN1JEbtJp7lb7C5U9HMsIp6IVwntkH/oNUzyVNQSd4S1sYk2FpSSW44FqMc8qee5w==",
+            "license": "MIT",
+            "engines": {
+                "node": ">=4",
+                "yarn": "*"
+            }
+        },
         "node_modules/uri-js": {
             "version": "4.4.1",
             "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
@@ -6644,6 +7429,13 @@
             "dev": true,
             "license": "MIT"
         },
+        "node_modules/varint": {
+            "version": "6.0.0",
+            "resolved": "https://registry.npmjs.org/varint/-/varint-6.0.0.tgz",
+            "integrity": "sha512-cXEIW6cfr15lFv563k4GuVuW/fiwjknytD37jIOLSdSWuOI6WnO/oKwmP2FQTU2l01LP8/M5TSAJpzUaGe3uWg==",
+            "devOptional": true,
+            "license": "MIT"
+        },
         "node_modules/vite": {
             "version": "8.0.16",
             "resolved": "https://registry.npmjs.org/vite/-/vite-8.0.16.tgz",
@@ -6743,6 +7535,25 @@
                 "url": "https://github.com/sponsors/jonschlinkert"
             }
         },
+        "node_modules/vite-plugin-vuetify": {
+            "version": "2.1.3",
+            "resolved": "https://registry.npmjs.org/vite-plugin-vuetify/-/vite-plugin-vuetify-2.1.3.tgz",
+            "integrity": "sha512-Q4SC/4TqbNvaZIFb9YsfBqkGlYHbJJJ6uU3CnRBZqLUF3s5eCMVZAaV4GkTbehIH/bhSj42lMXztOwc71u6rVw==",
+            "license": "MIT",
+            "dependencies": {
+                "@vuetify/loader-shared": "^2.1.2",
+                "debug": "^4.3.3",
+                "upath": "^2.0.1"
+            },
+            "engines": {
+                "node": "^18.0.0 || >=20.0.0"
+            },
+            "peerDependencies": {
+                "vite": ">=5",
+                "vue": "^3.0.0",
+                "vuetify": ">=3"
+            }
+        },
         "node_modules/vscode-uri": {
             "version": "3.1.0",
             "resolved": "https://registry.npmjs.org/vscode-uri/-/vscode-uri-3.1.0.tgz",
@@ -6847,6 +7658,33 @@
                 "typescript": ">=5.0.0"
             }
         },
+        "node_modules/vuetify": {
+            "version": "4.1.2",
+            "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-4.1.2.tgz",
+            "integrity": "sha512-2SUzXt2Q71/cVmSZhU6kOmAo1ev3NZaI/ynj55TTcu6jXAc9kezoqZKY+Xm+0STnAOcCoTseF0qPSs01LjUaaA==",
+            "license": "MIT",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/johnleider"
+            },
+            "peerDependencies": {
+                "typescript": ">=4.7",
+                "vite-plugin-vuetify": ">=2.1.0",
+                "vue": "^3.5.0",
+                "webpack-plugin-vuetify": ">=3.1.0"
+            },
+            "peerDependenciesMeta": {
+                "typescript": {
+                    "optional": true
+                },
+                "vite-plugin-vuetify": {
+                    "optional": true
+                },
+                "webpack-plugin-vuetify": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/which": {
             "version": "2.0.2",
             "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
diff --git a/package.json b/package.json
index 88004d6..bf3402d 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
         "eslint-plugin-vue": "^9.32.0",
         "prettier": "^3.4.2",
         "prettier-plugin-tailwindcss": "^0.6.11",
+        "sass-embedded": "^1.100.0",
         "typescript": "^5.2.2",
         "typescript-eslint": "^8.23.0",
         "vite": "^8.0.0",
@@ -38,6 +39,7 @@
         "@inertiajs/vue3": "^3.0.0",
         "@laravel/passkeys": "^0.2.0",
         "@lucide/vue": "^1.17.0",
+        "@mdi/font": "^7.4.47",
         "@vueuse/core": "^12.8.2",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
@@ -46,9 +48,11 @@
         "tailwind-merge": "^3.2.0",
         "tailwindcss": "^4.1.1",
         "tw-animate-css": "^1.2.5",
+        "vite-plugin-vuetify": "^2.1.3",
         "vue": "^3.5.13",
         "vue-input-otp": "^0.3.2",
-        "vue-sonner": "^2.0.0"
+        "vue-sonner": "^2.0.0",
+        "vuetify": "^4.1.2"
     },
     "optionalDependencies": {
         "@rollup/rollup-linux-x64-gnu": "4.9.5",
diff --git a/resources/js/app.ts b/resources/js/app.ts
index 2ed2760..565ac85 100644
--- a/resources/js/app.ts
+++ b/resources/js/app.ts
@@ -1,33 +1,37 @@
+import '../css/app.css';
+
 import { createInertiaApp } from '@inertiajs/vue3';
-import { initializeTheme } from '@/composables/useAppearance';
-import AppLayout from '@/layouts/AppLayout.vue';
-import AuthLayout from '@/layouts/AuthLayout.vue';
-import SettingsLayout from '@/layouts/settings/Layout.vue';
-import { initializeFlashToast } from '@/lib/flashToast';
+import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
+import { createApp, h  } from 'vue';
+import type {DefineComponent} from 'vue';
+import MainLayout from '@/layouts/MainLayout.vue';
+import vuetify from '@/plugins/vuetify';
 
 const appName = import.meta.env.VITE_APP_NAME || 'Laravel';
 
 createInertiaApp({
     title: (title) => (title ? `${title} - ${appName}` : appName),
-    layout: (name) => {
-        switch (true) {
-            case name === 'Welcome':
-                return null;
-            case name.startsWith('auth/'):
-                return AuthLayout;
-            case name.startsWith('settings/'):
-                return [AppLayout, SettingsLayout];
-            default:
-                return AppLayout;
-        }
+
+    resolve: (name) => {
+        const page = resolvePageComponent(
+            `./pages/${name}.vue`,
+            import.meta.glob<DefineComponent>('./pages/**/*.vue'),
+        );
+        page.then((module) => {
+            module.default.layout ??= MainLayout;
+        });
+
+        return page;
     },
+
+    setup({ el, App, props, plugin }) {
+        return createApp({ render: () => h(App, props) })
+            .use(plugin)
+            .use(vuetify)
+            .mount(el);
+    },
+
     progress: {
-        color: '#4B5563',
+        color: '#C0392B',
     },
 });
-
-// This will set light / dark mode on page load...
-initializeTheme();
-
-// This will listen for flash toast data from the server...
-initializeFlashToast();
diff --git a/resources/js/components/AlertError.vue b/resources/js/components/AlertError.vue
deleted file mode 100644
index b2de005..0000000
--- a/resources/js/components/AlertError.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<script setup lang="ts">
-import { AlertCircle } from '@lucide/vue';
-import { computed } from 'vue';
-import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
-
-type Props = {
-    errors: string[];
-    title?: string;
-};
-
-const props = withDefaults(defineProps<Props>(), {
-    title: 'Something went wrong.',
-});
-
-const uniqueErrors = computed(() => Array.from(new Set(props.errors)));
-</script>
-
-<template>
-    <Alert variant="destructive">
-        <AlertCircle class="size-4" />
-        <AlertTitle>{{ title }}</AlertTitle>
-        <AlertDescription>
-            <ul class="list-inside list-disc text-sm">
-                <li v-for="(error, index) in uniqueErrors" :key="index">
-                    {{ error }}
-                </li>
-            </ul>
-        </AlertDescription>
-    </Alert>
-</template>
diff --git a/resources/js/components/AppContent.vue b/resources/js/components/AppContent.vue
deleted file mode 100644
index 555a1a6..0000000
--- a/resources/js/components/AppContent.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue';
-import { SidebarInset } from '@/components/ui/sidebar';
-import type { AppVariant } from '@/types';
-
-type Props = {
-    variant?: AppVariant;
-    class?: string;
-};
-
-const props = withDefaults(defineProps<Props>(), {
-    variant: 'sidebar',
-});
-const className = computed(() => props.class);
-</script>
-
-<template>
-    <SidebarInset v-if="props.variant === 'sidebar'" :class="className">
-        <slot />
-    </SidebarInset>
-    <main
-        v-else
-        class="mx-auto flex h-full w-full max-w-7xl flex-1 flex-col gap-4 rounded-xl"
-        :class="className"
-    >
-        <slot />
-    </main>
-</template>
diff --git a/resources/js/components/AppHeader.vue b/resources/js/components/AppHeader.vue
deleted file mode 100644
index ea0df0e..0000000
--- a/resources/js/components/AppHeader.vue
+++ /dev/null
@@ -1,283 +0,0 @@
-<script setup lang="ts">
-import { Link, usePage } from '@inertiajs/vue3';
-import { BookOpen, Folder, LayoutGrid, Menu, Search } from '@lucide/vue';
-import { computed } from 'vue';
-import AppLogo from '@/components/AppLogo.vue';
-import AppLogoIcon from '@/components/AppLogoIcon.vue';
-import Breadcrumbs from '@/components/Breadcrumbs.vue';
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
-import { Button } from '@/components/ui/button';
-import {
-    DropdownMenu,
-    DropdownMenuContent,
-    DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
-import {
-    NavigationMenu,
-    NavigationMenuItem,
-    NavigationMenuList,
-    navigationMenuTriggerStyle,
-} from '@/components/ui/navigation-menu';
-import {
-    Sheet,
-    SheetContent,
-    SheetHeader,
-    SheetTitle,
-    SheetTrigger,
-} from '@/components/ui/sheet';
-import {
-    Tooltip,
-    TooltipContent,
-    TooltipProvider,
-    TooltipTrigger,
-} from '@/components/ui/tooltip';
-import UserMenuContent from '@/components/UserMenuContent.vue';
-import { useCurrentUrl } from '@/composables/useCurrentUrl';
-import { getInitials } from '@/composables/useInitials';
-import { toUrl } from '@/lib/utils';
-import { dashboard } from '@/routes';
-import type { BreadcrumbItem, NavItem } from '@/types';
-
-type Props = {
-    breadcrumbs?: BreadcrumbItem[];
-};
-
-const props = withDefaults(defineProps<Props>(), {
-    breadcrumbs: () => [],
-});
-
-const page = usePage();
-const auth = computed(() => page.props.auth);
-const { isCurrentUrl, whenCurrentUrl } = useCurrentUrl();
-
-const activeItemStyles =
-    'text-neutral-900 dark:bg-neutral-800 dark:text-neutral-100';
-
-const mainNavItems: NavItem[] = [
-    {
-        title: 'Dashboard',
-        href: dashboard(),
-        icon: LayoutGrid,
-    },
-];
-
-const rightNavItems: NavItem[] = [
-    {
-        title: 'Repository',
-        href: 'https://github.com/laravel/vue-starter-kit',
-        icon: Folder,
-    },
-    {
-        title: 'Documentation',
-        href: 'https://laravel.com/docs/starter-kits#vue',
-        icon: BookOpen,
-    },
-];
-</script>
-
-<template>
-    <div>
-        <div class="border-b border-sidebar-border/80">
-            <div class="mx-auto flex h-16 items-center px-4 md:max-w-7xl">
-                <!-- Mobile Menu -->
-                <div class="lg:hidden">
-                    <Sheet>
-                        <SheetTrigger :as-child="true">
-                            <Button
-                                variant="ghost"
-                                size="icon"
-                                class="mr-2 h-9 w-9"
-                            >
-                                <Menu class="h-5 w-5" />
-                            </Button>
-                        </SheetTrigger>
-                        <SheetContent side="left" class="w-[300px] p-6">
-                            <SheetTitle class="sr-only"
-                                >Navigation menu</SheetTitle
-                            >
-                            <SheetHeader class="flex justify-start text-left">
-                                <AppLogoIcon
-                                    class="size-6 fill-current text-black dark:text-white"
-                                />
-                            </SheetHeader>
-                            <div
-                                class="flex h-full flex-1 flex-col justify-between space-y-4 py-6"
-                            >
-                                <nav class="-mx-3 space-y-1">
-                                    <Link
-                                        v-for="item in mainNavItems"
-                                        :key="item.title"
-                                        :href="item.href"
-                                        class="flex items-center gap-x-3 rounded-lg px-3 py-2 text-sm font-medium hover:bg-accent"
-                                        :class="
-                                            whenCurrentUrl(
-                                                item.href,
-                                                activeItemStyles,
-                                            )
-                                        "
-                                    >
-                                        <component
-                                            v-if="item.icon"
-                                            :is="item.icon"
-                                            class="h-5 w-5"
-                                        />
-                                        {{ item.title }}
-                                    </Link>
-                                </nav>
-                                <div class="flex flex-col space-y-4">
-                                    <a
-                                        v-for="item in rightNavItems"
-                                        :key="item.title"
-                                        :href="toUrl(item.href)"
-                                        target="_blank"
-                                        rel="noopener noreferrer"
-                                        class="flex items-center space-x-2 text-sm font-medium"
-                                    >
-                                        <component
-                                            v-if="item.icon"
-                                            :is="item.icon"
-                                            class="h-5 w-5"
-                                        />
-                                        <span>{{ item.title }}</span>
-                                    </a>
-                                </div>
-                            </div>
-                        </SheetContent>
-                    </Sheet>
-                </div>
-
-                <Link :href="dashboard()" class="flex items-center gap-x-2">
-                    <AppLogo />
-                </Link>
-
-                <!-- Desktop Menu -->
-                <div class="hidden h-full lg:flex lg:flex-1">
-                    <NavigationMenu class="ml-10 flex h-full items-stretch">
-                        <NavigationMenuList
-                            class="flex h-full items-stretch space-x-2"
-                        >
-                            <NavigationMenuItem
-                                v-for="(item, index) in mainNavItems"
-                                :key="index"
-                                class="relative flex h-full items-center"
-                            >
-                                <Link
-                                    :class="[
-                                        navigationMenuTriggerStyle(),
-                                        whenCurrentUrl(
-                                            item.href,
-                                            activeItemStyles,
-                                        ),
-                                        'h-9 cursor-pointer px-3',
-                                    ]"
-                                    :href="item.href"
-                                >
-                                    <component
-                                        v-if="item.icon"
-                                        :is="item.icon"
-                                        class="mr-2 h-4 w-4"
-                                    />
-                                    {{ item.title }}
-                                </Link>
-                                <div
-                                    v-if="isCurrentUrl(item.href)"
-                                    class="absolute bottom-0 left-0 h-0.5 w-full translate-y-px bg-black dark:bg-white"
-                                ></div>
-                            </NavigationMenuItem>
-                        </NavigationMenuList>
-                    </NavigationMenu>
-                </div>
-
-                <div class="ml-auto flex items-center space-x-2">
-                    <div class="relative flex items-center space-x-1">
-                        <Button
-                            variant="ghost"
-                            size="icon"
-                            class="group h-9 w-9 cursor-pointer"
-                        >
-                            <Search
-                                class="size-5 opacity-80 group-hover:opacity-100"
-                            />
-                        </Button>
-
-                        <div class="hidden space-x-1 lg:flex">
-                            <template
-                                v-for="item in rightNavItems"
-                                :key="item.title"
-                            >
-                                <TooltipProvider :delay-duration="0">
-                                    <Tooltip>
-                                        <TooltipTrigger>
-                                            <Button
-                                                variant="ghost"
-                                                size="icon"
-                                                as-child
-                                                class="group h-9 w-9 cursor-pointer"
-                                            >
-                                                <a
-                                                    :href="toUrl(item.href)"
-                                                    target="_blank"
-                                                    rel="noopener noreferrer"
-                                                >
-                                                    <span class="sr-only">{{
-                                                        item.title
-                                                    }}</span>
-                                                    <component
-                                                        :is="item.icon"
-                                                        class="size-5 opacity-80 group-hover:opacity-100"
-                                                    />
-                                                </a>
-                                            </Button>
-                                        </TooltipTrigger>
-                                        <TooltipContent>
-                                            <p>{{ item.title }}</p>
-                                        </TooltipContent>
-                                    </Tooltip>
-                                </TooltipProvider>
-                            </template>
-                        </div>
-                    </div>
-
-                    <DropdownMenu>
-                        <DropdownMenuTrigger :as-child="true">
-                            <Button
-                                variant="ghost"
-                                size="icon"
-                                class="relative size-10 w-auto rounded-full p-1 focus-within:ring-2 focus-within:ring-primary"
-                            >
-                                <Avatar
-                                    class="size-8 overflow-hidden rounded-full"
-                                >
-                                    <AvatarImage
-                                        v-if="auth.user.avatar"
-                                        :src="auth.user.avatar"
-                                        :alt="auth.user.name"
-                                    />
-                                    <AvatarFallback
-                                        class="rounded-lg bg-neutral-200 font-semibold text-black dark:bg-neutral-700 dark:text-white"
-                                    >
-                                        {{ getInitials(auth.user?.name) }}
-                                    </AvatarFallback>
-                                </Avatar>
-                            </Button>
-                        </DropdownMenuTrigger>
-                        <DropdownMenuContent align="end" class="w-56">
-                            <UserMenuContent :user="auth.user" />
-                        </DropdownMenuContent>
-                    </DropdownMenu>
-                </div>
-            </div>
-        </div>
-
-        <div
-            v-if="props.breadcrumbs.length > 1"
-            class="flex w-full border-b border-sidebar-border/70"
-        >
-            <div
-                class="mx-auto flex h-12 w-full items-center justify-start px-4 text-neutral-500 md:max-w-7xl"
-            >
-                <Breadcrumbs :breadcrumbs="breadcrumbs" />
-            </div>
-        </div>
-    </div>
-</template>
diff --git a/resources/js/components/AppLogo.vue b/resources/js/components/AppLogo.vue
deleted file mode 100644
index bc79527..0000000
--- a/resources/js/components/AppLogo.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<script setup lang="ts">
-import AppLogoIcon from '@/components/AppLogoIcon.vue';
-</script>
-
-<template>
-    <div
-        class="flex aspect-square size-8 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground"
-    >
-        <AppLogoIcon class="size-5 fill-current text-white dark:text-black" />
-    </div>
-    <div class="ml-1 grid flex-1 text-left text-sm">
-        <span class="mb-0.5 truncate leading-tight font-semibold"
-            >Laravel Starter Kit</span
-        >
-    </div>
-</template>
diff --git a/resources/js/components/AppLogoIcon.vue b/resources/js/components/AppLogoIcon.vue
deleted file mode 100644
index 9a26231..0000000
--- a/resources/js/components/AppLogoIcon.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue';
-
-defineOptions({
-    inheritAttrs: false,
-});
-
-type Props = {
-    className?: HTMLAttributes['class'];
-};
-
-defineProps<Props>();
-</script>
-
-<template>
-    <svg
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 40 42"
-        :class="className"
-        v-bind="$attrs"
-    >
-        <path
-            fill="currentColor"
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M17.2 5.633 8.6.855 0 5.633v26.51l16.2 9 16.2-9v-8.442l7.6-4.223V9.856l-8.6-4.777-8.6 4.777V18.3l-5.6 3.111V5.633ZM38 18.301l-5.6 3.11v-6.157l5.6-3.11V18.3Zm-1.06-7.856-5.54 3.078-5.54-3.079 5.54-3.078 5.54 3.079ZM24.8 18.3v-6.157l5.6 3.111v6.158L24.8 18.3Zm-1 1.732 5.54 3.078-13.14 7.302-5.54-3.078 13.14-7.3v-.002Zm-16.2 7.89 7.6 4.222V38.3L2 30.966V7.92l5.6 3.111v16.892ZM8.6 9.3 3.06 6.222 8.6 3.143l5.54 3.08L8.6 9.3Zm21.8 15.51-13.2 7.334V38.3l13.2-7.334v-6.156ZM9.6 11.034l5.6-3.11v14.6l-5.6 3.11v-14.6Z"
-        />
-    </svg>
-</template>
diff --git a/resources/js/components/AppShell.vue b/resources/js/components/AppShell.vue
deleted file mode 100644
index e76af0b..0000000
--- a/resources/js/components/AppShell.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<script setup lang="ts">
-import { usePage } from '@inertiajs/vue3';
-import { SidebarProvider } from '@/components/ui/sidebar';
-import type { AppVariant } from '@/types';
-
-type Props = {
-    variant?: AppVariant;
-};
-
-withDefaults(defineProps<Props>(), {
-    variant: 'sidebar',
-});
-
-const isOpen = usePage().props.sidebarOpen;
-</script>
-
-<template>
-    <div v-if="variant === 'header'" class="flex min-h-screen w-full flex-col">
-        <slot />
-    </div>
-    <SidebarProvider v-else :default-open="isOpen">
-        <slot />
-    </SidebarProvider>
-</template>
diff --git a/resources/js/components/AppSidebar.vue b/resources/js/components/AppSidebar.vue
deleted file mode 100644
index a65f9d0..0000000
--- a/resources/js/components/AppSidebar.vue
+++ /dev/null
@@ -1,66 +0,0 @@
-<script setup lang="ts">
-import { Link } from '@inertiajs/vue3';
-import { BookOpen, FolderGit2, LayoutGrid } from '@lucide/vue';
-import AppLogo from '@/components/AppLogo.vue';
-import NavFooter from '@/components/NavFooter.vue';
-import NavMain from '@/components/NavMain.vue';
-import NavUser from '@/components/NavUser.vue';
-import {
-    Sidebar,
-    SidebarContent,
-    SidebarFooter,
-    SidebarHeader,
-    SidebarMenu,
-    SidebarMenuButton,
-    SidebarMenuItem,
-} from '@/components/ui/sidebar';
-import { dashboard } from '@/routes';
-import type { NavItem } from '@/types';
-
-const mainNavItems: NavItem[] = [
-    {
-        title: 'Dashboard',
-        href: dashboard(),
-        icon: LayoutGrid,
-    },
-];
-
-const footerNavItems: NavItem[] = [
-    {
-        title: 'Repository',
-        href: 'https://github.com/laravel/vue-starter-kit',
-        icon: FolderGit2,
-    },
-    {
-        title: 'Documentation',
-        href: 'https://laravel.com/docs/starter-kits#vue',
-        icon: BookOpen,
-    },
-];
-</script>
-
-<template>
-    <Sidebar collapsible="icon" variant="inset">
-        <SidebarHeader>
-            <SidebarMenu>
-                <SidebarMenuItem>
-                    <SidebarMenuButton size="lg" as-child>
-                        <Link :href="dashboard()">
-                            <AppLogo />
-                        </Link>
-                    </SidebarMenuButton>
-                </SidebarMenuItem>
-            </SidebarMenu>
-        </SidebarHeader>
-
-        <SidebarContent>
-            <NavMain :items="mainNavItems" />
-        </SidebarContent>
-
-        <SidebarFooter>
-            <NavFooter :items="footerNavItems" />
-            <NavUser />
-        </SidebarFooter>
-    </Sidebar>
-    <slot />
-</template>
diff --git a/resources/js/components/AppSidebarHeader.vue b/resources/js/components/AppSidebarHeader.vue
deleted file mode 100644
index db6c0c8..0000000
--- a/resources/js/components/AppSidebarHeader.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<script setup lang="ts">
-import Breadcrumbs from '@/components/Breadcrumbs.vue';
-import { SidebarTrigger } from '@/components/ui/sidebar';
-import type { BreadcrumbItem } from '@/types';
-
-withDefaults(
-    defineProps<{
-        breadcrumbs?: BreadcrumbItem[];
-    }>(),
-    {
-        breadcrumbs: () => [],
-    },
-);
-</script>
-
-<template>
-    <header
-        class="flex h-16 shrink-0 items-center gap-2 border-b border-sidebar-border/70 px-6 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12 md:px-4"
-    >
-        <div class="flex items-center gap-2">
-            <SidebarTrigger class="-ml-1" />
-            <template v-if="breadcrumbs && breadcrumbs.length > 0">
-                <Breadcrumbs :breadcrumbs="breadcrumbs" />
-            </template>
-        </div>
-    </header>
-</template>
diff --git a/resources/js/components/AppearanceTabs.vue b/resources/js/components/AppearanceTabs.vue
deleted file mode 100644
index 1b0f9ef..0000000
--- a/resources/js/components/AppearanceTabs.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<script setup lang="ts">
-import { Monitor, Moon, Sun } from '@lucide/vue';
-import { useAppearance } from '@/composables/useAppearance';
-
-const { appearance, updateAppearance } = useAppearance();
-
-const tabs = [
-    { value: 'light', Icon: Sun, label: 'Light' },
-    { value: 'dark', Icon: Moon, label: 'Dark' },
-    { value: 'system', Icon: Monitor, label: 'System' },
-] as const;
-</script>
-
-<template>
-    <div
-        class="inline-flex gap-1 rounded-lg bg-neutral-100 p-1 dark:bg-neutral-800"
-    >
-        <button
-            v-for="{ value, Icon, label } in tabs"
-            :key="value"
-            @click="updateAppearance(value)"
-            :class="[
-                'flex items-center rounded-md px-3.5 py-1.5 transition-colors',
-                appearance === value
-                    ? 'bg-white shadow-xs dark:bg-neutral-700 dark:text-neutral-100'
-                    : 'text-neutral-500 hover:bg-neutral-200/60 hover:text-black dark:text-neutral-400 dark:hover:bg-neutral-700/60',
-            ]"
-        >
-            <component :is="Icon" class="-ml-1 h-4 w-4" />
-            <span class="ml-1.5 text-sm">{{ label }}</span>
-        </button>
-    </div>
-</template>
diff --git a/resources/js/components/Breadcrumbs.vue b/resources/js/components/Breadcrumbs.vue
deleted file mode 100644
index 0f96ff4..0000000
--- a/resources/js/components/Breadcrumbs.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<script setup lang="ts">
-import { Link } from '@inertiajs/vue3';
-import {
-    Breadcrumb,
-    BreadcrumbItem,
-    BreadcrumbLink,
-    BreadcrumbList,
-    BreadcrumbPage,
-    BreadcrumbSeparator,
-} from '@/components/ui/breadcrumb';
-import type { BreadcrumbItem as BreadcrumbItemType } from '@/types';
-
-type Props = {
-    breadcrumbs: BreadcrumbItemType[];
-};
-
-defineProps<Props>();
-</script>
-
-<template>
-    <Breadcrumb>
-        <BreadcrumbList>
-            <template v-for="(item, index) in breadcrumbs" :key="index">
-                <BreadcrumbItem>
-                    <template v-if="index === breadcrumbs.length - 1">
-                        <BreadcrumbPage>{{ item.title }}</BreadcrumbPage>
-                    </template>
-                    <template v-else>
-                        <BreadcrumbLink as-child>
-                            <Link :href="item.href">{{ item.title }}</Link>
-                        </BreadcrumbLink>
-                    </template>
-                </BreadcrumbItem>
-                <BreadcrumbSeparator v-if="index !== breadcrumbs.length - 1" />
-            </template>
-        </BreadcrumbList>
-    </Breadcrumb>
-</template>
diff --git a/resources/js/components/DeleteUser.vue b/resources/js/components/DeleteUser.vue
deleted file mode 100644
index 871fb5e..0000000
--- a/resources/js/components/DeleteUser.vue
+++ /dev/null
@@ -1,113 +0,0 @@
-<script setup lang="ts">
-import { Form } from '@inertiajs/vue3';
-import { useTemplateRef } from 'vue';
-import ProfileController from '@/actions/App/Http/Controllers/Settings/ProfileController';
-import Heading from '@/components/Heading.vue';
-import InputError from '@/components/InputError.vue';
-import PasswordInput from '@/components/PasswordInput.vue';
-import { Button } from '@/components/ui/button';
-import {
-    Dialog,
-    DialogClose,
-    DialogContent,
-    DialogDescription,
-    DialogFooter,
-    DialogHeader,
-    DialogTitle,
-    DialogTrigger,
-} from '@/components/ui/dialog';
-import { Label } from '@/components/ui/label';
-
-const passwordInput = useTemplateRef('passwordInput');
-</script>
-
-<template>
-    <div class="space-y-6">
-        <Heading
-            variant="small"
-            title="Delete account"
-            description="Delete your account and all of its resources"
-        />
-        <div
-            class="space-y-4 rounded-lg border border-red-100 bg-red-50 p-4 dark:border-red-200/10 dark:bg-red-700/10"
-        >
-            <div class="relative space-y-0.5 text-red-600 dark:text-red-100">
-                <p class="font-medium">Warning</p>
-                <p class="text-sm">
-                    Please proceed with caution, this cannot be undone.
-                </p>
-            </div>
-            <Dialog>
-                <DialogTrigger as-child>
-                    <Button variant="destructive" data-test="delete-user-button"
-                        >Delete account</Button
-                    >
-                </DialogTrigger>
-                <DialogContent>
-                    <Form
-                        v-bind="ProfileController.destroy.form()"
-                        reset-on-success
-                        @error="() => passwordInput?.focus()"
-                        :options="{
-                            preserveScroll: true,
-                        }"
-                        class="space-y-6"
-                        v-slot="{ errors, processing, reset, clearErrors }"
-                    >
-                        <DialogHeader class="space-y-3">
-                            <DialogTitle
-                                >Are you sure you want to delete your
-                                account?</DialogTitle
-                            >
-                            <DialogDescription>
-                                Once your account is deleted, all of its
-                                resources and data will also be permanently
-                                deleted. Please enter your password to confirm
-                                you would like to permanently delete your
-                                account.
-                            </DialogDescription>
-                        </DialogHeader>
-
-                        <div class="grid gap-2">
-                            <Label for="password" class="sr-only"
-                                >Password</Label
-                            >
-                            <PasswordInput
-                                id="password"
-                                name="password"
-                                ref="passwordInput"
-                                placeholder="Password"
-                            />
-                            <InputError :message="errors.password" />
-                        </div>
-
-                        <DialogFooter class="gap-2">
-                            <DialogClose as-child>
-                                <Button
-                                    variant="secondary"
-                                    @click="
-                                        () => {
-                                            clearErrors();
-                                            reset();
-                                        }
-                                    "
-                                >
-                                    Cancel
-                                </Button>
-                            </DialogClose>
-
-                            <Button
-                                type="submit"
-                                variant="destructive"
-                                :disabled="processing"
-                                data-test="confirm-delete-user-button"
-                            >
-                                Delete account
-                            </Button>
-                        </DialogFooter>
-                    </Form>
-                </DialogContent>
-            </Dialog>
-        </div>
-    </div>
-</template>
diff --git a/resources/js/components/Heading.vue b/resources/js/components/Heading.vue
deleted file mode 100644
index 3ed2044..0000000
--- a/resources/js/components/Heading.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<script setup lang="ts">
-type Props = {
-    title: string;
-    description?: string;
-    variant?: 'default' | 'small';
-};
-
-withDefaults(defineProps<Props>(), {
-    variant: 'default',
-});
-</script>
-
-<template>
-    <header :class="variant === 'small' ? '' : 'mb-8 space-y-0.5'">
-        <h2
-            :class="
-                variant === 'small'
-                    ? 'mb-0.5 text-base font-medium'
-                    : 'text-xl font-semibold tracking-tight'
-            "
-        >
-            {{ title }}
-        </h2>
-        <p v-if="description" class="text-sm text-muted-foreground">
-            {{ description }}
-        </p>
-    </header>
-</template>
diff --git a/resources/js/components/InputError.vue b/resources/js/components/InputError.vue
deleted file mode 100644
index 3db9519..0000000
--- a/resources/js/components/InputError.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<script setup lang="ts">
-defineProps<{
-    message?: string;
-}>();
-</script>
-
-<template>
-    <div v-show="message">
-        <p class="text-sm text-red-600 dark:text-red-500">
-            {{ message }}
-        </p>
-    </div>
-</template>
diff --git a/resources/js/components/ManagePasskeys.vue b/resources/js/components/ManagePasskeys.vue
deleted file mode 100644
index 44cf635..0000000
--- a/resources/js/components/ManagePasskeys.vue
+++ /dev/null
@@ -1,65 +0,0 @@
-<script setup lang="ts">
-import { router } from '@inertiajs/vue3';
-import { KeyRound } from '@lucide/vue';
-import { destroy } from '@/actions/Laravel/Passkeys/Http/Controllers/PasskeyRegistrationController';
-import Heading from '@/components/Heading.vue';
-import PasskeyItem from '@/components/PasskeyItem.vue';
-import PasskeyRegister from '@/components/PasskeyRegister.vue';
-import type { Passkey } from '@/types/auth';
-
-export type Props = {
-    canManagePasskeys?: boolean;
-    passkeys?: Passkey[];
-};
-
-withDefaults(defineProps<Props>(), {
-    canManagePasskeys: false,
-    passkeys: () => [],
-});
-
-const handleDelete = (id: number, onError: () => void) => {
-    router.delete(destroy.url(id), {
-        preserveScroll: true,
-        onError,
-    });
-};
-
-const handleRegisterSuccess = () => {
-    router.reload();
-};
-</script>
-
-<template>
-    <div v-if="canManagePasskeys" class="space-y-6">
-        <Heading
-            variant="small"
-            title="Passkeys"
-            description="Manage your passkeys for passwordless sign-in"
-        />
-
-        <div class="overflow-hidden rounded-lg border border-border">
-            <template v-if="passkeys.length">
-                <PasskeyItem
-                    v-for="passkey in passkeys"
-                    :key="passkey.id"
-                    :passkey="passkey"
-                    @remove="handleDelete"
-                />
-            </template>
-
-            <div v-else class="p-8 text-center">
-                <div
-                    class="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-2xl bg-muted"
-                >
-                    <KeyRound class="h-7 w-7 text-muted-foreground" />
-                </div>
-                <p class="font-medium">No passkeys yet</p>
-                <p class="mt-1 text-sm text-muted-foreground">
-                    Add a passkey to sign in without a password
-                </p>
-            </div>
-        </div>
-
-        <PasskeyRegister @success="handleRegisterSuccess" />
-    </div>
-</template>
diff --git a/resources/js/components/ManageTwoFactor.vue b/resources/js/components/ManageTwoFactor.vue
deleted file mode 100644
index fd176dd..0000000
--- a/resources/js/components/ManageTwoFactor.vue
+++ /dev/null
@@ -1,93 +0,0 @@
-<script setup lang="ts">
-import { Form } from '@inertiajs/vue3';
-import { ShieldCheck } from '@lucide/vue';
-import { onUnmounted, ref } from 'vue';
-import Heading from '@/components/Heading.vue';
-import TwoFactorRecoveryCodes from '@/components/TwoFactorRecoveryCodes.vue';
-import TwoFactorSetupModal from '@/components/TwoFactorSetupModal.vue';
-import { Button } from '@/components/ui/button';
-import { useTwoFactorAuth } from '@/composables/useTwoFactorAuth';
-import { disable, enable } from '@/routes/two-factor';
-
-export type Props = {
-    canManageTwoFactor?: boolean;
-    requiresConfirmation?: boolean;
-    twoFactorEnabled?: boolean;
-};
-
-withDefaults(defineProps<Props>(), {
-    canManageTwoFactor: false,
-    requiresConfirmation: false,
-    twoFactorEnabled: false,
-});
-
-const { hasSetupData, clearTwoFactorAuthData } = useTwoFactorAuth();
-const showSetupModal = ref<boolean>(false);
-
-onUnmounted(() => clearTwoFactorAuthData());
-</script>
-
-<template>
-    <div v-if="canManageTwoFactor" class="space-y-6">
-        <Heading
-            variant="small"
-            title="Two-factor authentication"
-            description="Manage your two-factor authentication settings"
-        />
-
-        <div
-            v-if="!twoFactorEnabled"
-            class="flex flex-col items-start justify-start space-y-4"
-        >
-            <p class="text-sm text-muted-foreground">
-                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>
-                <Button v-if="hasSetupData" @click="showSetupModal = true">
-                    <ShieldCheck />Continue setup
-                </Button>
-                <Form
-                    v-else
-                    v-bind="enable.form()"
-                    @success="showSetupModal = true"
-                    #default="{ processing }"
-                >
-                    <Button type="submit" :disabled="processing">
-                        Enable 2FA
-                    </Button>
-                </Form>
-            </div>
-        </div>
-
-        <div v-else class="flex flex-col items-start justify-start space-y-4">
-            <p class="text-sm text-muted-foreground">
-                You will be prompted for a secure, random pin during login,
-                which you can retrieve from the TOTP-supported application on
-                your phone.
-            </p>
-
-            <div class="relative inline">
-                <Form v-bind="disable.form()" #default="{ processing }">
-                    <Button
-                        variant="destructive"
-                        type="submit"
-                        :disabled="processing"
-                    >
-                        Disable 2FA
-                    </Button>
-                </Form>
-            </div>
-
-            <TwoFactorRecoveryCodes />
-        </div>
-
-        <TwoFactorSetupModal
-            v-model:isOpen="showSetupModal"
-            :requiresConfirmation="requiresConfirmation"
-            :twoFactorEnabled="twoFactorEnabled"
-        />
-    </div>
-</template>
diff --git a/resources/js/components/Masthead.vue b/resources/js/components/Masthead.vue
new file mode 100644
index 0000000..7699794
--- /dev/null
+++ b/resources/js/components/Masthead.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+defineProps<{
+    light?: boolean;
+    small?: boolean;
+}>();
+</script>
+
+<template>
+    <span :class="['masthead', small && 'masthead-sm', light && 'masthead-light', !light && 'masthead-dark']">
+        Dredge<span class="masthead-accent">News</span>
+    </span>
+</template>
+
+<style scoped lang="sass">
+@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&display=swap')
+
+.masthead
+    font-family: 'Playfair Display', serif
+    font-weight: 700
+    font-size: 22px
+    letter-spacing: -0.5px
+
+.masthead-sm
+    font-size: 16px
+
+.masthead-light
+    color: #FFFFFF
+
+.masthead-dark
+    color: #111111
+
+.masthead-accent
+    color: #C0392B
+</style>
diff --git a/resources/js/components/NavFooter.vue b/resources/js/components/NavFooter.vue
deleted file mode 100644
index 4827492..0000000
--- a/resources/js/components/NavFooter.vue
+++ /dev/null
@@ -1,44 +0,0 @@
-<script setup lang="ts">
-import {
-    SidebarGroup,
-    SidebarGroupContent,
-    SidebarMenu,
-    SidebarMenuButton,
-    SidebarMenuItem,
-} from '@/components/ui/sidebar';
-import { toUrl } from '@/lib/utils';
-import type { NavItem } from '@/types';
-
-type Props = {
-    items: NavItem[];
-    class?: string;
-};
-
-defineProps<Props>();
-</script>
-
-<template>
-    <SidebarGroup
-        :class="`group-data-[collapsible=icon]:p-0 ${$props.class || ''}`"
-    >
-        <SidebarGroupContent>
-            <SidebarMenu>
-                <SidebarMenuItem v-for="item in items" :key="item.title">
-                    <SidebarMenuButton
-                        class="text-neutral-600 hover:text-neutral-800 dark:text-neutral-300 dark:hover:text-neutral-100"
-                        as-child
-                    >
-                        <a
-                            :href="toUrl(item.href)"
-                            target="_blank"
-                            rel="noopener noreferrer"
-                        >
-                            <component :is="item.icon" />
-                            <span>{{ item.title }}</span>
-                        </a>
-                    </SidebarMenuButton>
-                </SidebarMenuItem>
-            </SidebarMenu>
-        </SidebarGroupContent>
-    </SidebarGroup>
-</template>
diff --git a/resources/js/components/NavMain.vue b/resources/js/components/NavMain.vue
deleted file mode 100644
index cf2a635..0000000
--- a/resources/js/components/NavMain.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<script setup lang="ts">
-import { Link } from '@inertiajs/vue3';
-import {
-    SidebarGroup,
-    SidebarGroupLabel,
-    SidebarMenu,
-    SidebarMenuButton,
-    SidebarMenuItem,
-} from '@/components/ui/sidebar';
-import { useCurrentUrl } from '@/composables/useCurrentUrl';
-import type { NavItem } from '@/types';
-
-defineProps<{
-    items: NavItem[];
-}>();
-
-const { isCurrentUrl } = useCurrentUrl();
-</script>
-
-<template>
-    <SidebarGroup class="px-2 py-0">
-        <SidebarGroupLabel>Platform</SidebarGroupLabel>
-        <SidebarMenu>
-            <SidebarMenuItem v-for="item in items" :key="item.title">
-                <SidebarMenuButton
-                    as-child
-                    :is-active="isCurrentUrl(item.href)"
-                    :tooltip="item.title"
-                >
-                    <Link :href="item.href">
-                        <component :is="item.icon" />
-                        <span>{{ item.title }}</span>
-                    </Link>
-                </SidebarMenuButton>
-            </SidebarMenuItem>
-        </SidebarMenu>
-    </SidebarGroup>
-</template>
diff --git a/resources/js/components/NavUser.vue b/resources/js/components/NavUser.vue
deleted file mode 100644
index 6ab6723..0000000
--- a/resources/js/components/NavUser.vue
+++ /dev/null
@@ -1,55 +0,0 @@
-<script setup lang="ts">
-import { usePage } from '@inertiajs/vue3';
-import { ChevronsUpDown } from '@lucide/vue';
-import { computed } from 'vue';
-import {
-    DropdownMenu,
-    DropdownMenuContent,
-    DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
-import {
-    SidebarMenu,
-    SidebarMenuButton,
-    SidebarMenuItem,
-    useSidebar,
-} from '@/components/ui/sidebar';
-import UserInfo from '@/components/UserInfo.vue';
-import UserMenuContent from '@/components/UserMenuContent.vue';
-
-const page = usePage();
-const user = computed(() => page.props.auth.user);
-const { isMobile, state } = useSidebar();
-</script>
-
-<template>
-    <SidebarMenu>
-        <SidebarMenuItem>
-            <DropdownMenu>
-                <DropdownMenuTrigger as-child>
-                    <SidebarMenuButton
-                        size="lg"
-                        class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
-                        data-test="sidebar-menu-button"
-                    >
-                        <UserInfo :user="user" />
-                        <ChevronsUpDown class="ml-auto size-4" />
-                    </SidebarMenuButton>
-                </DropdownMenuTrigger>
-                <DropdownMenuContent
-                    class="w-(--reka-dropdown-menu-trigger-width) min-w-56 rounded-lg"
-                    :side="
-                        isMobile
-                            ? 'bottom'
-                            : state === 'collapsed'
-                              ? 'left'
-                              : 'bottom'
-                    "
-                    align="end"
-                    :side-offset="4"
-                >
-                    <UserMenuContent :user="user" />
-                </DropdownMenuContent>
-            </DropdownMenu>
-        </SidebarMenuItem>
-    </SidebarMenu>
-</template>
diff --git a/resources/js/components/PasskeyItem.vue b/resources/js/components/PasskeyItem.vue
deleted file mode 100644
index efe32a3..0000000
--- a/resources/js/components/PasskeyItem.vue
+++ /dev/null
@@ -1,95 +0,0 @@
-<script setup lang="ts">
-import { KeyRound, Trash2 } from '@lucide/vue';
-import { ref } from 'vue';
-import { Button } from '@/components/ui/button';
-import {
-    Dialog,
-    DialogClose,
-    DialogContent,
-    DialogDescription,
-    DialogFooter,
-    DialogTitle,
-    DialogTrigger,
-} from '@/components/ui/dialog';
-import type { Passkey } from '@/types/auth';
-
-const props = defineProps<{
-    passkey: Passkey;
-}>();
-
-const emit = defineEmits<{
-    remove: [id: number, onError: () => void];
-}>();
-
-const isDeleting = ref(false);
-
-const handleDelete = () => {
-    isDeleting.value = true;
-    emit('remove', props.passkey.id, () => {
-        isDeleting.value = false;
-    });
-};
-</script>
-
-<template>
-    <div class="flex items-center justify-between border-b p-4 last:border-b-0">
-        <div class="flex items-center gap-4">
-            <div
-                class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-muted"
-            >
-                <KeyRound class="h-5 w-5 text-muted-foreground" />
-            </div>
-            <div class="space-y-1">
-                <div class="flex items-center gap-2.5">
-                    <p class="font-medium tracking-tight">{{ passkey.name }}</p>
-                    <span
-                        v-if="passkey.authenticator"
-                        class="inline-flex items-center gap-1 rounded-md bg-muted px-2 py-0.5 text-[11px] font-medium tracking-wide text-muted-foreground uppercase ring-1 ring-border ring-inset"
-                    >
-                        {{ passkey.authenticator }}
-                    </span>
-                </div>
-                <p class="text-sm text-muted-foreground">
-                    Added {{ passkey.created_at_diff }}
-                    <template v-if="passkey.last_used_at_diff">
-                        <span class="mx-1 text-muted-foreground/50">/</span>
-                        Last used {{ passkey.last_used_at_diff }}
-                    </template>
-                </p>
-            </div>
-        </div>
-
-        <Dialog>
-            <DialogTrigger as-child>
-                <Button
-                    variant="ghost"
-                    size="sm"
-                    class="text-destructive hover:bg-destructive/10 hover:text-destructive"
-                >
-                    <Trash2 class="h-4 w-4" />
-                    <span class="sr-only">Remove</span>
-                </Button>
-            </DialogTrigger>
-
-            <DialogContent>
-                <DialogTitle>Remove passkey</DialogTitle>
-                <DialogDescription>
-                    Are you sure you want to remove the "{{ passkey.name }}"
-                    passkey? You will no longer be able to use it to sign in.
-                </DialogDescription>
-                <DialogFooter class="gap-2">
-                    <DialogClose as-child>
-                        <Button variant="secondary">Cancel</Button>
-                    </DialogClose>
-                    <Button
-                        variant="destructive"
-                        :disabled="isDeleting"
-                        @click="handleDelete"
-                    >
-                        {{ isDeleting ? 'Removing...' : 'Remove passkey' }}
-                    </Button>
-                </DialogFooter>
-            </DialogContent>
-        </Dialog>
-    </div>
-</template>
diff --git a/resources/js/components/PasskeyRegister.vue b/resources/js/components/PasskeyRegister.vue
deleted file mode 100644
index bcec8e4..0000000
--- a/resources/js/components/PasskeyRegister.vue
+++ /dev/null
@@ -1,94 +0,0 @@
-<script setup lang="ts">
-import { usePasskeyRegister } from '@laravel/passkeys/vue';
-import { ref } from 'vue';
-import InputError from '@/components/InputError.vue';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-
-const emit = defineEmits<{
-    success: [];
-}>();
-
-const getDefaultPasskeyName = () => {
-    const ua = navigator.userAgent;
-
-    const browser = ['Chrome', 'Firefox', 'Safari', 'Edge', 'Opera'].find(
-        (browser) => new RegExp(browser).test(ua),
-    );
-
-    const os = ['iPhone', 'iPad', 'Android', 'Mac', 'Windows'].find((os) =>
-        new RegExp(os).test(ua),
-    );
-
-    return [browser, os].filter(Boolean).join(' on ') || '';
-};
-
-const name = ref(getDefaultPasskeyName());
-const showForm = ref(false);
-
-const { register, isLoading, error, isSupported } = usePasskeyRegister({
-    onSuccess: () => {
-        name.value = '';
-        showForm.value = false;
-        emit('success');
-    },
-});
-
-const handleSubmit = async (event: Event) => {
-    event.preventDefault();
-
-    if (!name.value.trim()) {
-        return;
-    }
-
-    await register(name.value);
-};
-
-const handleCancel = () => {
-    showForm.value = false;
-    name.value = '';
-};
-</script>
-
-<template>
-    <div v-if="!isSupported" class="text-sm text-muted-foreground">
-        Passkeys are not supported in this browser.
-    </div>
-
-    <Button v-else-if="!showForm" variant="outline" @click="showForm = true">
-        Add passkey
-    </Button>
-
-    <form
-        v-else
-        @submit="handleSubmit"
-        class="space-y-4 rounded-lg border border-border bg-muted/50 p-4"
-    >
-        <div class="grid gap-2">
-            <Label for="passkey-name">Passkey name</Label>
-            <Input
-                id="passkey-name"
-                type="text"
-                v-model="name"
-                placeholder="e.g., MacBook Pro, iPhone"
-                class="mt-1 block w-full border-foreground/20"
-                autofocus
-            />
-            <p class="text-xs text-muted-foreground">
-                A name helps you identify this passkey later.
-            </p>
-        </div>
-
-        <InputError v-if="error" :message="error" />
-
-        <div class="flex gap-2">
-            <Button type="submit" :disabled="isLoading || !name.trim()">
-                {{ isLoading ? 'Registering...' : 'Register passkey' }}
-            </Button>
-            <Button type="button" variant="ghost" @click="handleCancel">
-                Cancel
-            </Button>
-        </div>
-    </form>
-</template>
diff --git a/resources/js/components/PasskeyVerify.vue b/resources/js/components/PasskeyVerify.vue
deleted file mode 100644
index 95502bc..0000000
--- a/resources/js/components/PasskeyVerify.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-<script setup lang="ts">
-import type { UrlMethodPair } from '@inertiajs/core';
-import { router } from '@inertiajs/vue3';
-import { usePasskeyVerify } from '@laravel/passkeys/vue';
-import { KeyRound } from '@lucide/vue';
-import InputError from '@/components/InputError.vue';
-import { Button } from '@/components/ui/button';
-import { Separator } from '@/components/ui/separator';
-import { Spinner } from '@/components/ui/spinner';
-
-type Props = {
-    routes?: {
-        options: UrlMethodPair;
-        submit: UrlMethodPair;
-    };
-    label?: string;
-    loadingLabel?: string;
-    separator?: string;
-};
-
-const props = defineProps<Props>();
-
-const { verify, isLoading, error, isSupported } = usePasskeyVerify({
-    ...(props.routes
-        ? {
-              routes: {
-                  options: props.routes.options.url,
-                  submit: props.routes.submit.url,
-              },
-          }
-        : {}),
-    onSuccess: (response) => {
-        router.visit(response.redirect ?? '/dashboard');
-    },
-});
-</script>
-
-<template>
-    <div v-if="isSupported">
-        <div class="grid gap-2">
-            <Button
-                type="button"
-                variant="outline"
-                class="w-full"
-                @click="verify"
-                :disabled="isLoading"
-            >
-                <Spinner v-if="isLoading" />
-                <KeyRound v-else class="h-4 w-4" />
-                {{
-                    isLoading
-                        ? (props.loadingLabel ?? 'Authenticating...')
-                        : (props.label ?? 'Sign in with a passkey')
-                }}
-            </Button>
-
-            <div v-if="error" class="text-center">
-                <InputError :message="error" />
-            </div>
-        </div>
-
-        <div class="relative my-6">
-            <div class="absolute inset-0 flex items-center">
-                <Separator class="w-full" />
-            </div>
-            <div class="relative flex justify-center text-xs uppercase">
-                <span class="bg-background px-2 text-muted-foreground">
-                    {{ props.separator ?? 'Or continue with email' }}
-                </span>
-            </div>
-        </div>
-    </div>
-</template>
diff --git a/resources/js/components/PasswordInput.vue b/resources/js/components/PasswordInput.vue
deleted file mode 100644
index f1a19b9..0000000
--- a/resources/js/components/PasswordInput.vue
+++ /dev/null
@@ -1,46 +0,0 @@
-<script setup lang="ts">
-import { Eye, EyeOff } from '@lucide/vue';
-import { ref, useTemplateRef } from 'vue';
-import type { HTMLAttributes } from 'vue';
-import { Input } from '@/components/ui/input';
-import { cn } from '@/lib/utils';
-
-defineOptions({ inheritAttrs: false });
-
-const props = defineProps<{
-    class?: HTMLAttributes['class'];
-}>();
-
-const showPassword = ref(false);
-const inputRef = useTemplateRef('inputRef');
-
-defineExpose({
-    $el: inputRef,
-    focus: () => inputRef.value?.$el?.focus(),
-});
-</script>
-
-<template>
-    <div class="relative">
-        <Input
-            ref="inputRef"
-            :type="showPassword ? 'text' : 'password'"
-            :class="cn('pr-10', props.class)"
-            v-bind="$attrs"
-        />
-        <button
-            type="button"
-            @click="showPassword = !showPassword"
-            :class="
-                cn(
-                    'absolute inset-y-0 right-0 flex items-center rounded-r-md px-3 text-muted-foreground hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring focus-visible:outline-none',
-                )
-            "
-            :aria-label="showPassword ? 'Hide password' : 'Show password'"
-            :tabindex="-1"
-        >
-            <EyeOff v-if="showPassword" class="size-4" />
-            <Eye v-else class="size-4" />
-        </button>
-    </div>
-</template>
diff --git a/resources/js/components/PlaceholderPattern.vue b/resources/js/components/PlaceholderPattern.vue
deleted file mode 100644
index 19ea375..0000000
--- a/resources/js/components/PlaceholderPattern.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<script setup lang="ts">
-import { useId } from 'vue';
-
-const patternId = `pattern-${useId()}`;
-</script>
-
-<template>
-    <svg
-        class="absolute inset-0 size-full stroke-neutral-900/20 dark:stroke-neutral-100/20"
-        fill="none"
-    >
-        <defs>
-            <pattern
-                :id="patternId"
-                x="0"
-                y="0"
-                width="8"
-                height="8"
-                patternUnits="userSpaceOnUse"
-            >
-                <path d="M-1 5L5 -1M3 9L8.5 3.5" stroke-width="0.5"></path>
-            </pattern>
-        </defs>
-        <rect
-            stroke="none"
-            :fill="`url(#${patternId})`"
-            width="100%"
-            height="100%"
-        ></rect>
-    </svg>
-</template>
diff --git a/resources/js/components/TextLink.vue b/resources/js/components/TextLink.vue
deleted file mode 100644
index 06fdfcb..0000000
--- a/resources/js/components/TextLink.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<script setup lang="ts">
-import type { LinkComponentBaseProps, Method } from '@inertiajs/core';
-import { Link } from '@inertiajs/vue3';
-
-type Props = {
-    href: LinkComponentBaseProps['href'];
-    tabindex?: number;
-    method?: Method;
-    as?: string;
-};
-
-defineProps<Props>();
-</script>
-
-<template>
-    <Link
-        :href="href"
-        :tabindex="tabindex"
-        :method="method"
-        :as="as"
-        class="text-foreground underline decoration-neutral-300 underline-offset-4 transition-colors duration-300 ease-out hover:decoration-current! dark:decoration-neutral-500"
-    >
-        <slot />
-    </Link>
-</template>
diff --git a/resources/js/components/TwoFactorRecoveryCodes.vue b/resources/js/components/TwoFactorRecoveryCodes.vue
deleted file mode 100644
index 152fbbd..0000000
--- a/resources/js/components/TwoFactorRecoveryCodes.vue
+++ /dev/null
@@ -1,123 +0,0 @@
-<script setup lang="ts">
-import { Form } from '@inertiajs/vue3';
-import { Eye, EyeOff, LockKeyhole, RefreshCw } from '@lucide/vue';
-import { nextTick, onMounted, ref, useTemplateRef } from 'vue';
-import AlertError from '@/components/AlertError.vue';
-import { Button } from '@/components/ui/button';
-import {
-    Card,
-    CardContent,
-    CardDescription,
-    CardHeader,
-    CardTitle,
-} from '@/components/ui/card';
-import { useTwoFactorAuth } from '@/composables/useTwoFactorAuth';
-import { regenerateRecoveryCodes } from '@/routes/two-factor';
-
-const { recoveryCodesList, fetchRecoveryCodes, errors } = useTwoFactorAuth();
-const isRecoveryCodesVisible = ref<boolean>(false);
-const recoveryCodeSectionRef = useTemplateRef('recoveryCodeSectionRef');
-
-const toggleRecoveryCodesVisibility = async () => {
-    if (!isRecoveryCodesVisible.value && !recoveryCodesList.value.length) {
-        await fetchRecoveryCodes();
-    }
-
-    isRecoveryCodesVisible.value = !isRecoveryCodesVisible.value;
-
-    if (isRecoveryCodesVisible.value) {
-        await nextTick();
-        recoveryCodeSectionRef.value?.scrollIntoView({ behavior: 'smooth' });
-    }
-};
-
-onMounted(async () => {
-    if (!recoveryCodesList.value.length) {
-        await fetchRecoveryCodes();
-    }
-});
-</script>
-
-<template>
-    <Card class="w-full">
-        <CardHeader>
-            <CardTitle class="flex gap-3">
-                <LockKeyhole class="size-4" />2FA recovery codes
-            </CardTitle>
-            <CardDescription>
-                Recovery codes let you regain access if you lose your 2FA
-                device. Store them in a secure password manager.
-            </CardDescription>
-        </CardHeader>
-        <CardContent>
-            <div
-                class="flex flex-col gap-3 select-none sm:flex-row sm:items-center sm:justify-between"
-            >
-                <Button @click="toggleRecoveryCodesVisibility" class="w-fit">
-                    <component
-                        :is="isRecoveryCodesVisible ? EyeOff : Eye"
-                        class="size-4"
-                    />
-                    {{ isRecoveryCodesVisible ? 'Hide' : 'View' }} recovery
-                    codes
-                </Button>
-
-                <Form
-                    v-if="isRecoveryCodesVisible && recoveryCodesList.length"
-                    v-bind="regenerateRecoveryCodes.form()"
-                    method="post"
-                    :options="{ preserveScroll: true }"
-                    @success="fetchRecoveryCodes"
-                    #default="{ processing }"
-                >
-                    <Button
-                        variant="secondary"
-                        type="submit"
-                        :disabled="processing"
-                    >
-                        <RefreshCw /> Regenerate codes
-                    </Button>
-                </Form>
-            </div>
-            <div
-                :class="[
-                    'relative overflow-hidden transition-all duration-300',
-                    isRecoveryCodesVisible
-                        ? 'h-auto opacity-100'
-                        : 'h-0 opacity-0',
-                ]"
-            >
-                <div v-if="errors?.length" class="mt-6">
-                    <AlertError :errors="errors" />
-                </div>
-                <div v-else class="mt-3 space-y-3">
-                    <div
-                        ref="recoveryCodeSectionRef"
-                        class="grid gap-1 rounded-lg bg-muted p-4 font-mono text-sm"
-                    >
-                        <div v-if="!recoveryCodesList.length" class="space-y-2">
-                            <div
-                                v-for="n in 8"
-                                :key="n"
-                                class="h-4 animate-pulse rounded bg-muted-foreground/20"
-                            ></div>
-                        </div>
-                        <div
-                            v-else
-                            v-for="(code, index) in recoveryCodesList"
-                            :key="index"
-                        >
-                            {{ code }}
-                        </div>
-                    </div>
-                    <p class="text-xs text-muted-foreground select-none">
-                        Each recovery code can be used once to access your
-                        account and will be removed after use. If you need more,
-                        click
-                        <span class="font-bold">Regenerate codes</span> above.
-                    </p>
-                </div>
-            </div>
-        </CardContent>
-    </Card>
-</template>
diff --git a/resources/js/components/TwoFactorSetupModal.vue b/resources/js/components/TwoFactorSetupModal.vue
deleted file mode 100644
index 0105945..0000000
--- a/resources/js/components/TwoFactorSetupModal.vue
+++ /dev/null
@@ -1,298 +0,0 @@
-<script setup lang="ts">
-import { Form } from '@inertiajs/vue3';
-import { Check, Copy, ScanLine } from '@lucide/vue';
-import { useClipboard } from '@vueuse/core';
-import { computed, nextTick, ref, useTemplateRef, watch } from 'vue';
-import AlertError from '@/components/AlertError.vue';
-import InputError from '@/components/InputError.vue';
-import { Button } from '@/components/ui/button';
-import {
-    Dialog,
-    DialogContent,
-    DialogDescription,
-    DialogHeader,
-    DialogTitle,
-} from '@/components/ui/dialog';
-import {
-    InputOTP,
-    InputOTPGroup,
-    InputOTPSlot,
-} from '@/components/ui/input-otp';
-import { Spinner } from '@/components/ui/spinner';
-import { useAppearance } from '@/composables/useAppearance';
-import { useTwoFactorAuth } from '@/composables/useTwoFactorAuth';
-import { confirm } from '@/routes/two-factor';
-import type { TwoFactorConfigContent } from '@/types';
-
-type Props = {
-    requiresConfirmation: boolean;
-    twoFactorEnabled: boolean;
-};
-
-const { resolvedAppearance } = useAppearance();
-
-const props = defineProps<Props>();
-const isOpen = defineModel<boolean>('isOpen');
-
-const { copy, copied } = useClipboard();
-const { qrCodeSvg, manualSetupKey, clearSetupData, fetchSetupData, errors } =
-    useTwoFactorAuth();
-
-const showVerificationStep = ref(false);
-const code = ref<string>('');
-
-const pinInputContainerRef = useTemplateRef('pinInputContainerRef');
-
-const modalConfig = computed<TwoFactorConfigContent>(() => {
-    if (props.twoFactorEnabled) {
-        return {
-            title: 'Two-factor authentication enabled',
-            description:
-                'Two-factor authentication is now enabled. Scan the QR code or enter the setup key in your authenticator app.',
-            buttonText: 'Close',
-        };
-    }
-
-    if (showVerificationStep.value) {
-        return {
-            title: 'Verify authentication code',
-            description: 'Enter the 6-digit code from your authenticator app',
-            buttonText: 'Continue',
-        };
-    }
-
-    return {
-        title: 'Enable two-factor authentication',
-        description:
-            'To finish enabling two-factor authentication, scan the QR code or enter the setup key in your authenticator app',
-        buttonText: 'Continue',
-    };
-});
-
-const handleModalNextStep = () => {
-    if (props.requiresConfirmation) {
-        showVerificationStep.value = true;
-
-        nextTick(() => {
-            pinInputContainerRef.value?.querySelector('input')?.focus();
-        });
-
-        return;
-    }
-
-    clearSetupData();
-    isOpen.value = false;
-};
-
-const resetModalState = () => {
-    if (props.twoFactorEnabled) {
-        clearSetupData();
-    }
-
-    showVerificationStep.value = false;
-    code.value = '';
-};
-
-watch(
-    () => isOpen.value,
-    async (isOpen) => {
-        if (!isOpen) {
-            resetModalState();
-
-            return;
-        }
-
-        if (!qrCodeSvg.value) {
-            await fetchSetupData();
-        }
-    },
-);
-</script>
-
-<template>
-    <Dialog :open="isOpen" @update:open="isOpen = $event">
-        <DialogContent class="sm:max-w-md">
-            <DialogHeader class="flex items-center justify-center">
-                <div
-                    class="mb-3 w-auto rounded-full border border-border bg-card p-0.5 shadow-sm"
-                >
-                    <div
-                        class="relative overflow-hidden rounded-full border border-border bg-muted p-2.5"
-                    >
-                        <div
-                            class="absolute inset-0 grid grid-cols-5 opacity-50"
-                        >
-                            <div
-                                v-for="i in 5"
-                                :key="`col-${i}`"
-                                class="border-r border-border last:border-r-0"
-                            />
-                        </div>
-                        <div
-                            class="absolute inset-0 grid grid-rows-5 opacity-50"
-                        >
-                            <div
-                                v-for="i in 5"
-                                :key="`row-${i}`"
-                                class="border-b border-border last:border-b-0"
-                            />
-                        </div>
-                        <ScanLine
-                            class="relative z-20 size-6 text-foreground"
-                        />
-                    </div>
-                </div>
-                <DialogTitle>{{ modalConfig.title }}</DialogTitle>
-                <DialogDescription class="text-center">
-                    {{ modalConfig.description }}
-                </DialogDescription>
-            </DialogHeader>
-
-            <div
-                class="relative flex w-auto flex-col items-center justify-center space-y-5"
-            >
-                <template v-if="!showVerificationStep">
-                    <AlertError v-if="errors?.length" :errors="errors" />
-                    <template v-else>
-                        <div
-                            class="relative mx-auto flex max-w-md items-center overflow-hidden"
-                        >
-                            <div
-                                class="relative mx-auto aspect-square w-64 overflow-hidden rounded-lg border border-border"
-                            >
-                                <div
-                                    v-if="!qrCodeSvg"
-                                    class="absolute inset-0 z-10 flex aspect-square h-auto w-full animate-pulse items-center justify-center bg-background"
-                                >
-                                    <Spinner class="size-6" />
-                                </div>
-                                <div
-                                    v-else
-                                    class="relative z-10 overflow-hidden border p-5"
-                                >
-                                    <div
-                                        v-html="qrCodeSvg"
-                                        class="flex aspect-square size-full items-center justify-center"
-                                        :style="{
-                                            filter:
-                                                resolvedAppearance === 'dark'
-                                                    ? 'invert(1) brightness(1.5)'
-                                                    : undefined,
-                                        }"
-                                    />
-                                </div>
-                            </div>
-                        </div>
-
-                        <div class="flex w-full items-center space-x-5">
-                            <Button class="w-full" @click="handleModalNextStep">
-                                {{ modalConfig.buttonText }}
-                            </Button>
-                        </div>
-
-                        <div
-                            class="relative flex w-full items-center justify-center"
-                        >
-                            <div
-                                class="absolute inset-0 top-1/2 h-px w-full bg-border"
-                            />
-                            <span class="relative bg-card px-2 py-1"
-                                >or, enter the code manually</span
-                            >
-                        </div>
-
-                        <div
-                            class="flex w-full items-center justify-center space-x-2"
-                        >
-                            <div
-                                class="flex w-full items-stretch overflow-hidden rounded-xl border border-border"
-                            >
-                                <div
-                                    v-if="!manualSetupKey"
-                                    class="flex h-full w-full items-center justify-center bg-muted p-3"
-                                >
-                                    <Spinner />
-                                </div>
-                                <template v-else>
-                                    <input
-                                        type="text"
-                                        readonly
-                                        :value="manualSetupKey"
-                                        class="h-full w-full bg-background p-3 text-foreground"
-                                    />
-                                    <button
-                                        @click="copy(manualSetupKey || '')"
-                                        class="relative block h-auto border-l border-border px-3 hover:bg-muted"
-                                    >
-                                        <Check
-                                            v-if="copied"
-                                            class="w-4 text-green-500"
-                                        />
-                                        <Copy v-else class="w-4" />
-                                    </button>
-                                </template>
-                            </div>
-                        </div>
-                    </template>
-                </template>
-
-                <template v-else>
-                    <Form
-                        v-bind="confirm.form()"
-                        error-bag="confirmTwoFactorAuthentication"
-                        reset-on-error
-                        @finish="code = ''"
-                        @success="isOpen = false"
-                        v-slot="{ errors, processing }"
-                    >
-                        <input type="hidden" name="code" :value="code" />
-                        <div
-                            ref="pinInputContainerRef"
-                            class="relative w-full space-y-3"
-                        >
-                            <div
-                                class="flex w-full flex-col items-center justify-center space-y-3 py-2"
-                            >
-                                <InputOTP
-                                    id="otp"
-                                    v-model="code"
-                                    :maxlength="6"
-                                    :disabled="processing"
-                                    autofocus
-                                >
-                                    <InputOTPGroup>
-                                        <InputOTPSlot
-                                            v-for="index in 6"
-                                            :key="index"
-                                            :index="index - 1"
-                                        />
-                                    </InputOTPGroup>
-                                </InputOTP>
-                                <InputError :message="errors?.code" />
-                            </div>
-
-                            <div class="flex w-full items-center space-x-5">
-                                <Button
-                                    type="button"
-                                    variant="outline"
-                                    class="w-auto flex-1"
-                                    @click="showVerificationStep = false"
-                                    :disabled="processing"
-                                >
-                                    Back
-                                </Button>
-                                <Button
-                                    type="submit"
-                                    class="w-auto flex-1"
-                                    :disabled="processing || code.length < 6"
-                                >
-                                    Confirm
-                                </Button>
-                            </div>
-                        </div>
-                    </Form>
-                </template>
-            </div>
-        </DialogContent>
-    </Dialog>
-</template>
diff --git a/resources/js/components/UserInfo.vue b/resources/js/components/UserInfo.vue
deleted file mode 100644
index 0bd0494..0000000
--- a/resources/js/components/UserInfo.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue';
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
-import { useInitials } from '@/composables/useInitials';
-import type { User } from '@/types';
-
-type Props = {
-    user: User;
-    showEmail?: boolean;
-};
-
-const props = withDefaults(defineProps<Props>(), {
-    showEmail: false,
-});
-
-const { getInitials } = useInitials();
-
-// Compute whether we should show the avatar image
-const showAvatar = computed(
-    () => props.user.avatar && props.user.avatar !== '',
-);
-</script>
-
-<template>
-    <Avatar class="h-8 w-8 overflow-hidden rounded-lg">
-        <AvatarImage v-if="showAvatar" :src="user.avatar!" :alt="user.name" />
-        <AvatarFallback class="rounded-lg text-black dark:text-white">
-            {{ getInitials(user.name) }}
-        </AvatarFallback>
-    </Avatar>
-
-    <div class="grid flex-1 text-left text-sm leading-tight">
-        <span class="truncate font-medium">{{ user.name }}</span>
-        <span v-if="showEmail" class="truncate text-xs text-muted-foreground">{{
-            user.email
-        }}</span>
-    </div>
-</template>
diff --git a/resources/js/components/UserMenuContent.vue b/resources/js/components/UserMenuContent.vue
deleted file mode 100644
index ddd51db..0000000
--- a/resources/js/components/UserMenuContent.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<script setup lang="ts">
-import { Link, router } from '@inertiajs/vue3';
-import { LogOut, Settings } from '@lucide/vue';
-import {
-    DropdownMenuGroup,
-    DropdownMenuItem,
-    DropdownMenuLabel,
-    DropdownMenuSeparator,
-} from '@/components/ui/dropdown-menu';
-import UserInfo from '@/components/UserInfo.vue';
-import { logout } from '@/routes';
-import { edit } from '@/routes/profile';
-import type { User } from '@/types';
-
-type Props = {
-    user: User;
-};
-
-const handleLogout = () => {
-    router.flushAll();
-};
-
-defineProps<Props>();
-</script>
-
-<template>
-    <DropdownMenuLabel class="p-0 font-normal">
-        <div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
-            <UserInfo :user="user" :show-email="true" />
-        </div>
-    </DropdownMenuLabel>
-    <DropdownMenuSeparator />
-    <DropdownMenuGroup>
-        <DropdownMenuItem :as-child="true">
-            <Link class="block w-full cursor-pointer" :href="edit()" prefetch>
-                <Settings class="mr-2 h-4 w-4" />
-                Settings
-            </Link>
-        </DropdownMenuItem>
-    </DropdownMenuGroup>
-    <DropdownMenuSeparator />
-    <DropdownMenuItem :as-child="true">
-        <Link
-            class="block w-full cursor-pointer"
-            :href="logout()"
-            @click="handleLogout"
-            as="button"
-            data-test="logout-button"
-        >
-            <LogOut class="mr-2 h-4 w-4" />
-            Log out
-        </Link>
-    </DropdownMenuItem>
-</template>
diff --git a/resources/js/components/ui/alert/Alert.vue b/resources/js/components/ui/alert/Alert.vue
deleted file mode 100644
index a9d336f..0000000
--- a/resources/js/components/ui/alert/Alert.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import type { AlertVariants } from "."
-import { cn } from "@/lib/utils"
-import { alertVariants } from "."
-
-const props = defineProps<{
-  class?: HTMLAttributes["class"]
-  variant?: AlertVariants["variant"]
-}>()
-</script>
-
-<template>
-  <div
-    data-slot="alert"
-    :class="cn(alertVariants({ variant }), props.class)"
-    role="alert"
-  >
-    <slot />
-  </div>
-</template>
diff --git a/resources/js/components/ui/alert/AlertDescription.vue b/resources/js/components/ui/alert/AlertDescription.vue
deleted file mode 100644
index 652f332..0000000
--- a/resources/js/components/ui/alert/AlertDescription.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
-</script>
-
-<template>
-  <div
-    data-slot="alert-description"
-    :class="cn('text-muted-foreground col-start-2 text-sm [&_p]:leading-relaxed', props.class)"
-  >
-    <slot />
-  </div>
-</template>
diff --git a/resources/js/components/ui/alert/AlertTitle.vue b/resources/js/components/ui/alert/AlertTitle.vue
deleted file mode 100644
index b218384..0000000
--- a/resources/js/components/ui/alert/AlertTitle.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
-</script>
-
-<template>
-  <div
-    data-slot="alert-title"
-    :class="cn('col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight', props.class)"
-  >
-    <slot />
-  </div>
-</template>
diff --git a/resources/js/components/ui/alert/index.ts b/resources/js/components/ui/alert/index.ts
deleted file mode 100644
index 42d07b6..0000000
--- a/resources/js/components/ui/alert/index.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import type { VariantProps } from "class-variance-authority"
-import { cva } from "class-variance-authority"
-
-export { default as Alert } from "./Alert.vue"
-export { default as AlertDescription } from "./AlertDescription.vue"
-export { default as AlertTitle } from "./AlertTitle.vue"
-
-export const alertVariants = cva(
-  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
-  {
-    variants: {
-      variant: {
-        default: "bg-card text-card-foreground",
-        destructive:
-          "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  },
-)
-
-export type AlertVariants = VariantProps<typeof alertVariants>
diff --git a/resources/js/components/ui/avatar/Avatar.vue b/resources/js/components/ui/avatar/Avatar.vue
deleted file mode 100644
index bb7e669..0000000
--- a/resources/js/components/ui/avatar/Avatar.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { AvatarRoot } from "reka-ui"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
-</script>
-
-<template>
-  <AvatarRoot
-    data-slot="avatar"
-    :class="cn('relative flex size-8 shrink-0 overflow-hidden rounded-full', props.class)"
-  >
-    <slot />
-  </AvatarRoot>
-</template>
diff --git a/resources/js/components/ui/avatar/AvatarFallback.vue b/resources/js/components/ui/avatar/AvatarFallback.vue
deleted file mode 100644
index 16b588a..0000000
--- a/resources/js/components/ui/avatar/AvatarFallback.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<script setup lang="ts">
-import type { AvatarFallbackProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { AvatarFallback } from "reka-ui"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<AvatarFallbackProps & { class?: HTMLAttributes["class"] }>()
-
-const delegatedProps = reactiveOmit(props, "class")
-</script>
-
-<template>
-  <AvatarFallback
-    data-slot="avatar-fallback"
-    v-bind="delegatedProps"
-    :class="cn('bg-muted flex size-full items-center justify-center rounded-full', props.class)"
-  >
-    <slot />
-  </AvatarFallback>
-</template>
diff --git a/resources/js/components/ui/avatar/AvatarImage.vue b/resources/js/components/ui/avatar/AvatarImage.vue
deleted file mode 100644
index 24a8166..0000000
--- a/resources/js/components/ui/avatar/AvatarImage.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<script setup lang="ts">
-import type { AvatarImageProps } from "reka-ui"
-import { AvatarImage } from "reka-ui"
-
-const props = defineProps<AvatarImageProps>()
-</script>
-
-<template>
-  <AvatarImage
-    data-slot="avatar-image"
-    v-bind="props"
-    class="aspect-square size-full"
-  >
-    <slot />
-  </AvatarImage>
-</template>
diff --git a/resources/js/components/ui/avatar/index.ts b/resources/js/components/ui/avatar/index.ts
deleted file mode 100644
index cf0e003..0000000
--- a/resources/js/components/ui/avatar/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export { default as Avatar } from "./Avatar.vue"
-export { default as AvatarFallback } from "./AvatarFallback.vue"
-export { default as AvatarImage } from "./AvatarImage.vue"
diff --git a/resources/js/components/ui/badge/Badge.vue b/resources/js/components/ui/badge/Badge.vue
deleted file mode 100644
index d894dfe..0000000
--- a/resources/js/components/ui/badge/Badge.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<script setup lang="ts">
-import type { PrimitiveProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import type { BadgeVariants } from "."
-import { reactiveOmit } from "@vueuse/core"
-import { Primitive } from "reka-ui"
-import { cn } from "@/lib/utils"
-import { badgeVariants } from "."
-
-const props = defineProps<PrimitiveProps & {
-  variant?: BadgeVariants["variant"]
-  class?: HTMLAttributes["class"]
-}>()
-
-const delegatedProps = reactiveOmit(props, "class")
-</script>
-
-<template>
-  <Primitive
-    data-slot="badge"
-    :class="cn(badgeVariants({ variant }), props.class)"
-    v-bind="delegatedProps"
-  >
-    <slot />
-  </Primitive>
-</template>
diff --git a/resources/js/components/ui/badge/index.ts b/resources/js/components/ui/badge/index.ts
deleted file mode 100644
index bbc0dfa..0000000
--- a/resources/js/components/ui/badge/index.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import type { VariantProps } from "class-variance-authority"
-import { cva } from "class-variance-authority"
-
-export { default as Badge } from "./Badge.vue"
-
-export const badgeVariants = cva(
-  "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
-  {
-    variants: {
-      variant: {
-        default:
-          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
-        secondary:
-          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
-        destructive:
-         "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-        outline:
-          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  },
-)
-export type BadgeVariants = VariantProps<typeof badgeVariants>
diff --git a/resources/js/components/ui/breadcrumb/Breadcrumb.vue b/resources/js/components/ui/breadcrumb/Breadcrumb.vue
deleted file mode 100644
index c5be5f0..0000000
--- a/resources/js/components/ui/breadcrumb/Breadcrumb.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<script lang="ts" setup>
-import type { HTMLAttributes } from "vue"
-
-const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
-</script>
-
-<template>
-  <nav
-    aria-label="breadcrumb"
-    data-slot="breadcrumb"
-    :class="props.class"
-  >
-    <slot />
-  </nav>
-</template>
diff --git a/resources/js/components/ui/breadcrumb/BreadcrumbEllipsis.vue b/resources/js/components/ui/breadcrumb/BreadcrumbEllipsis.vue
deleted file mode 100644
index 9cc3a4f..0000000
--- a/resources/js/components/ui/breadcrumb/BreadcrumbEllipsis.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<script lang="ts" setup>
-import type { HTMLAttributes } from "vue"
-import { MoreHorizontal } from "@lucide/vue"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
-</script>
-
-<template>
-  <span
-    data-slot="breadcrumb-ellipsis"
-    role="presentation"
-    aria-hidden="true"
-    :class="cn('flex size-9 items-center justify-center', props.class)"
-  >
-    <slot>
-      <MoreHorizontal class="size-4" />
-    </slot>
-    <span class="sr-only">More</span>
-  </span>
-</template>
diff --git a/resources/js/components/ui/breadcrumb/BreadcrumbItem.vue b/resources/js/components/ui/breadcrumb/BreadcrumbItem.vue
deleted file mode 100644
index e3dce68..0000000
--- a/resources/js/components/ui/breadcrumb/BreadcrumbItem.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<script lang="ts" setup>
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
-</script>
-
-<template>
-  <li
-    data-slot="breadcrumb-item"
-    :class="cn('inline-flex items-center gap-1.5', props.class)"
-  >
-    <slot />
-  </li>
-</template>
diff --git a/resources/js/components/ui/breadcrumb/BreadcrumbLink.vue b/resources/js/components/ui/breadcrumb/BreadcrumbLink.vue
deleted file mode 100644
index 5d96381..0000000
--- a/resources/js/components/ui/breadcrumb/BreadcrumbLink.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<script lang="ts" setup>
-import type { PrimitiveProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { Primitive } from "reka-ui"
-import { cn } from "@/lib/utils"
-
-const props = withDefaults(defineProps<PrimitiveProps & { class?: HTMLAttributes["class"] }>(), {
-  as: "a",
-})
-</script>
-
-<template>
-  <Primitive
-    data-slot="breadcrumb-link"
-    :as="as"
-    :as-child="asChild"
-    :class="cn('hover:text-foreground transition-colors', props.class)"
-  >
-    <slot />
-  </Primitive>
-</template>
diff --git a/resources/js/components/ui/breadcrumb/BreadcrumbList.vue b/resources/js/components/ui/breadcrumb/BreadcrumbList.vue
deleted file mode 100644
index fc62811..0000000
--- a/resources/js/components/ui/breadcrumb/BreadcrumbList.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<script lang="ts" setup>
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
-</script>
-
-<template>
-  <ol
-    data-slot="breadcrumb-list"
-    :class="cn('text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5', props.class)"
-  >
-    <slot />
-  </ol>
-</template>
diff --git a/resources/js/components/ui/breadcrumb/BreadcrumbPage.vue b/resources/js/components/ui/breadcrumb/BreadcrumbPage.vue
deleted file mode 100644
index b429b20..0000000
--- a/resources/js/components/ui/breadcrumb/BreadcrumbPage.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-<script lang="ts" setup>
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
-</script>
-
-<template>
-  <span
-    data-slot="breadcrumb-page"
-    role="link"
-    aria-disabled="true"
-    aria-current="page"
-    :class="cn('text-foreground font-normal', props.class)"
-  >
-    <slot />
-  </span>
-</template>
diff --git a/resources/js/components/ui/breadcrumb/BreadcrumbSeparator.vue b/resources/js/components/ui/breadcrumb/BreadcrumbSeparator.vue
deleted file mode 100644
index ef16ef0..0000000
--- a/resources/js/components/ui/breadcrumb/BreadcrumbSeparator.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<script lang="ts" setup>
-import type { HTMLAttributes } from "vue"
-import { ChevronRight } from "@lucide/vue"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
-</script>
-
-<template>
-  <li
-    data-slot="breadcrumb-separator"
-    role="presentation"
-    aria-hidden="true"
-    :class="cn('[&>svg]:size-3.5', props.class)"
-  >
-    <slot>
-      <ChevronRight />
-    </slot>
-  </li>
-</template>
diff --git a/resources/js/components/ui/breadcrumb/index.ts b/resources/js/components/ui/breadcrumb/index.ts
deleted file mode 100644
index f4eafdc..0000000
--- a/resources/js/components/ui/breadcrumb/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export { default as Breadcrumb } from "./Breadcrumb.vue"
-export { default as BreadcrumbEllipsis } from "./BreadcrumbEllipsis.vue"
-export { default as BreadcrumbItem } from "./BreadcrumbItem.vue"
-export { default as BreadcrumbLink } from "./BreadcrumbLink.vue"
-export { default as BreadcrumbList } from "./BreadcrumbList.vue"
-export { default as BreadcrumbPage } from "./BreadcrumbPage.vue"
-export { default as BreadcrumbSeparator } from "./BreadcrumbSeparator.vue"
diff --git a/resources/js/components/ui/button/Button.vue b/resources/js/components/ui/button/Button.vue
deleted file mode 100644
index 3763470..0000000
--- a/resources/js/components/ui/button/Button.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<script setup lang="ts">
-import type { PrimitiveProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import type { ButtonVariants } from "."
-import { Primitive } from "reka-ui"
-import { cn } from "@/lib/utils"
-import { buttonVariants } from "."
-
-interface Props extends PrimitiveProps {
-  variant?: ButtonVariants["variant"]
-  size?: ButtonVariants["size"]
-  class?: HTMLAttributes["class"]
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  as: "button",
-})
-</script>
-
-<template>
-  <Primitive
-    data-slot="button"
-    :data-variant="variant"
-    :data-size="size"
-    :as="as"
-    :as-child="asChild"
-    :class="cn(buttonVariants({ variant, size }), props.class)"
-  >
-    <slot />
-  </Primitive>
-</template>
diff --git a/resources/js/components/ui/button/index.ts b/resources/js/components/ui/button/index.ts
deleted file mode 100644
index 26e2c55..0000000
--- a/resources/js/components/ui/button/index.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import type { VariantProps } from "class-variance-authority"
-import { cva } from "class-variance-authority"
-
-export { default as Button } from "./Button.vue"
-
-export const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-  {
-    variants: {
-      variant: {
-        default:
-          "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive:
-          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-        outline:
-          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
-        secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost:
-          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-      size: {
-        "default": "h-9 px-4 py-2 has-[>svg]:px-3",
-        "sm": "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
-        "lg": "h-10 rounded-md px-6 has-[>svg]:px-4",
-        "icon": "size-9",
-        "icon-sm": "size-8",
-        "icon-lg": "size-10",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  },
-)
-export type ButtonVariants = VariantProps<typeof buttonVariants>
diff --git a/resources/js/components/ui/card/Card.vue b/resources/js/components/ui/card/Card.vue
deleted file mode 100644
index f5a0707..0000000
--- a/resources/js/components/ui/card/Card.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
-</script>
-
-<template>
-  <div
-    data-slot="card"
-    :class="
-      cn(
-        'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm',
-        props.class,
-      )
-    "
-  >
-    <slot />
-  </div>
-</template>
diff --git a/resources/js/components/ui/card/CardAction.vue b/resources/js/components/ui/card/CardAction.vue
deleted file mode 100644
index c91638b..0000000
--- a/resources/js/components/ui/card/CardAction.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
-</script>
-
-<template>
-  <div
-    data-slot="card-action"
-    :class="cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end', props.class)"
-  >
-    <slot />
-  </div>
-</template>
diff --git a/resources/js/components/ui/card/CardContent.vue b/resources/js/components/ui/card/CardContent.vue
deleted file mode 100644
index dfbc552..0000000
--- a/resources/js/components/ui/card/CardContent.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
-</script>
-
-<template>
-  <div
-    data-slot="card-content"
-    :class="cn('px-6', props.class)"
-  >
-    <slot />
-  </div>
-</template>
diff --git a/resources/js/components/ui/card/CardDescription.vue b/resources/js/components/ui/card/CardDescription.vue
deleted file mode 100644
index 71c1b8d..0000000
--- a/resources/js/components/ui/card/CardDescription.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
-</script>
-
-<template>
-  <p
-    data-slot="card-description"
-    :class="cn('text-muted-foreground text-sm', props.class)"
-  >
-    <slot />
-  </p>
-</template>
diff --git a/resources/js/components/ui/card/CardFooter.vue b/resources/js/components/ui/card/CardFooter.vue
deleted file mode 100644
index 9e3739e..0000000
--- a/resources/js/components/ui/card/CardFooter.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
-</script>
-
-<template>
-  <div
-    data-slot="card-footer"
-    :class="cn('flex items-center px-6 [.border-t]:pt-6', props.class)"
-  >
-    <slot />
-  </div>
-</template>
diff --git a/resources/js/components/ui/card/CardHeader.vue b/resources/js/components/ui/card/CardHeader.vue
deleted file mode 100644
index 4fe4da4..0000000
--- a/resources/js/components/ui/card/CardHeader.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
-</script>
-
-<template>
-  <div
-    data-slot="card-header"
-    :class="cn('@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6', props.class)"
-  >
-    <slot />
-  </div>
-</template>
diff --git a/resources/js/components/ui/card/CardTitle.vue b/resources/js/components/ui/card/CardTitle.vue
deleted file mode 100644
index 5f479e7..0000000
--- a/resources/js/components/ui/card/CardTitle.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
-</script>
-
-<template>
-  <h3
-    data-slot="card-title"
-    :class="cn('leading-none font-semibold', props.class)"
-  >
-    <slot />
-  </h3>
-</template>
diff --git a/resources/js/components/ui/card/index.ts b/resources/js/components/ui/card/index.ts
deleted file mode 100644
index 1627758..0000000
--- a/resources/js/components/ui/card/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export { default as Card } from "./Card.vue"
-export { default as CardAction } from "./CardAction.vue"
-export { default as CardContent } from "./CardContent.vue"
-export { default as CardDescription } from "./CardDescription.vue"
-export { default as CardFooter } from "./CardFooter.vue"
-export { default as CardHeader } from "./CardHeader.vue"
-export { default as CardTitle } from "./CardTitle.vue"
diff --git a/resources/js/components/ui/checkbox/Checkbox.vue b/resources/js/components/ui/checkbox/Checkbox.vue
deleted file mode 100644
index 476eb0b..0000000
--- a/resources/js/components/ui/checkbox/Checkbox.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<script setup lang="ts">
-import type { CheckboxRootEmits, CheckboxRootProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { Check } from "@lucide/vue"
-import { reactiveOmit } from "@vueuse/core"
-import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from "reka-ui"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<CheckboxRootProps & { class?: HTMLAttributes["class"] }>()
-const emits = defineEmits<CheckboxRootEmits>()
-
-const delegatedProps = reactiveOmit(props, "class")
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
-<template>
-  <CheckboxRoot
-    v-slot="slotProps"
-    data-slot="checkbox"
-    v-bind="forwarded"
-    :class="
-      cn('peer border-input data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
-         props.class)"
-  >
-    <CheckboxIndicator
-      data-slot="checkbox-indicator"
-      class="grid place-content-center text-current transition-none"
-    >
-      <slot v-bind="slotProps">
-        <Check class="size-3.5" />
-      </slot>
-    </CheckboxIndicator>
-  </CheckboxRoot>
-</template>
diff --git a/resources/js/components/ui/checkbox/index.ts b/resources/js/components/ui/checkbox/index.ts
deleted file mode 100644
index 3391a85..0000000
--- a/resources/js/components/ui/checkbox/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as Checkbox } from "./Checkbox.vue"
diff --git a/resources/js/components/ui/collapsible/Collapsible.vue b/resources/js/components/ui/collapsible/Collapsible.vue
deleted file mode 100644
index 70a9497..0000000
--- a/resources/js/components/ui/collapsible/Collapsible.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<script setup lang="ts">
-import type { CollapsibleRootEmits, CollapsibleRootProps } from "reka-ui"
-import { CollapsibleRoot, useForwardPropsEmits } from "reka-ui"
-
-const props = defineProps<CollapsibleRootProps>()
-const emits = defineEmits<CollapsibleRootEmits>()
-
-const forwarded = useForwardPropsEmits(props, emits)
-</script>
-
-<template>
-  <CollapsibleRoot
-    v-slot="slotProps"
-    data-slot="collapsible"
-    v-bind="forwarded"
-  >
-    <slot v-bind="slotProps" />
-  </CollapsibleRoot>
-</template>
diff --git a/resources/js/components/ui/collapsible/CollapsibleContent.vue b/resources/js/components/ui/collapsible/CollapsibleContent.vue
deleted file mode 100644
index 8be0a11..0000000
--- a/resources/js/components/ui/collapsible/CollapsibleContent.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<script setup lang="ts">
-import type { CollapsibleContentProps } from "reka-ui"
-import { CollapsibleContent } from "reka-ui"
-
-const props = defineProps<CollapsibleContentProps>()
-</script>
-
-<template>
-  <CollapsibleContent
-    data-slot="collapsible-content"
-    v-bind="props"
-  >
-    <slot />
-  </CollapsibleContent>
-</template>
diff --git a/resources/js/components/ui/collapsible/CollapsibleTrigger.vue b/resources/js/components/ui/collapsible/CollapsibleTrigger.vue
deleted file mode 100644
index 33bec78..0000000
--- a/resources/js/components/ui/collapsible/CollapsibleTrigger.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<script setup lang="ts">
-import type { CollapsibleTriggerProps } from "reka-ui"
-import { CollapsibleTrigger } from "reka-ui"
-
-const props = defineProps<CollapsibleTriggerProps>()
-</script>
-
-<template>
-  <CollapsibleTrigger
-    data-slot="collapsible-trigger"
-    v-bind="props"
-  >
-    <slot />
-  </CollapsibleTrigger>
-</template>
diff --git a/resources/js/components/ui/collapsible/index.ts b/resources/js/components/ui/collapsible/index.ts
deleted file mode 100644
index 86a031d..0000000
--- a/resources/js/components/ui/collapsible/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export { default as Collapsible } from "./Collapsible.vue"
-export { default as CollapsibleContent } from "./CollapsibleContent.vue"
-export { default as CollapsibleTrigger } from "./CollapsibleTrigger.vue"
diff --git a/resources/js/components/ui/dialog/Dialog.vue b/resources/js/components/ui/dialog/Dialog.vue
deleted file mode 100644
index ade5260..0000000
--- a/resources/js/components/ui/dialog/Dialog.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<script setup lang="ts">
-import type { DialogRootEmits, DialogRootProps } from "reka-ui"
-import { DialogRoot, useForwardPropsEmits } from "reka-ui"
-
-const props = defineProps<DialogRootProps>()
-const emits = defineEmits<DialogRootEmits>()
-
-const forwarded = useForwardPropsEmits(props, emits)
-</script>
-
-<template>
-  <DialogRoot
-    v-slot="slotProps"
-    data-slot="dialog"
-    v-bind="forwarded"
-  >
-    <slot v-bind="slotProps" />
-  </DialogRoot>
-</template>
diff --git a/resources/js/components/ui/dialog/DialogClose.vue b/resources/js/components/ui/dialog/DialogClose.vue
deleted file mode 100644
index c5fae04..0000000
--- a/resources/js/components/ui/dialog/DialogClose.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<script setup lang="ts">
-import type { DialogCloseProps } from "reka-ui"
-import { DialogClose } from "reka-ui"
-
-const props = defineProps<DialogCloseProps>()
-</script>
-
-<template>
-  <DialogClose
-    data-slot="dialog-close"
-    v-bind="props"
-  >
-    <slot />
-  </DialogClose>
-</template>
diff --git a/resources/js/components/ui/dialog/DialogContent.vue b/resources/js/components/ui/dialog/DialogContent.vue
deleted file mode 100644
index 05172f0..0000000
--- a/resources/js/components/ui/dialog/DialogContent.vue
+++ /dev/null
@@ -1,53 +0,0 @@
-<script setup lang="ts">
-import type { DialogContentEmits, DialogContentProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { X } from "@lucide/vue"
-import { reactiveOmit } from "@vueuse/core"
-import {
-  DialogClose,
-  DialogContent,
-  DialogPortal,
-  useForwardPropsEmits,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
-import DialogOverlay from "./DialogOverlay.vue"
-
-defineOptions({
-  inheritAttrs: false,
-})
-
-const props = withDefaults(defineProps<DialogContentProps & { class?: HTMLAttributes["class"], showCloseButton?: boolean }>(), {
-  showCloseButton: true,
-})
-const emits = defineEmits<DialogContentEmits>()
-
-const delegatedProps = reactiveOmit(props, "class")
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
-<template>
-  <DialogPortal>
-    <DialogOverlay />
-    <DialogContent
-      data-slot="dialog-content"
-      v-bind="{ ...$attrs, ...forwarded }"
-      :class="
-        cn(
-          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
-          props.class,
-        )"
-    >
-      <slot />
-
-      <DialogClose
-        v-if="showCloseButton"
-        data-slot="dialog-close"
-        class="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
-      >
-        <X />
-        <span class="sr-only">Close</span>
-      </DialogClose>
-    </DialogContent>
-  </DialogPortal>
-</template>
diff --git a/resources/js/components/ui/dialog/DialogDescription.vue b/resources/js/components/ui/dialog/DialogDescription.vue
deleted file mode 100644
index f52e655..0000000
--- a/resources/js/components/ui/dialog/DialogDescription.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<script setup lang="ts">
-import type { DialogDescriptionProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { DialogDescription, useForwardProps } from "reka-ui"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes["class"] }>()
-
-const delegatedProps = reactiveOmit(props, "class")
-
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <DialogDescription
-    data-slot="dialog-description"
-    v-bind="forwardedProps"
-    :class="cn('text-muted-foreground text-sm', props.class)"
-  >
-    <slot />
-  </DialogDescription>
-</template>
diff --git a/resources/js/components/ui/dialog/DialogFooter.vue b/resources/js/components/ui/dialog/DialogFooter.vue
deleted file mode 100644
index c7500a9..0000000
--- a/resources/js/components/ui/dialog/DialogFooter.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { DialogClose } from "reka-ui"
-import { cn } from "@/lib/utils"
-import { Button } from '@/components/ui/button'
-
-const props = withDefaults(defineProps<{
-  class?: HTMLAttributes["class"]
-  showCloseButton?: boolean
-}>(), {
-  showCloseButton: false,
-})
-</script>
-
-<template>
-  <div
-    data-slot="dialog-footer"
-    :class="cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', props.class)"
-  >
-    <slot />
-    <DialogClose v-if="showCloseButton" as-child>
-      <Button variant="outline">
-        Close
-      </Button>
-    </DialogClose>
-  </div>
-</template>
diff --git a/resources/js/components/ui/dialog/DialogHeader.vue b/resources/js/components/ui/dialog/DialogHeader.vue
deleted file mode 100644
index bfc3c64..0000000
--- a/resources/js/components/ui/dialog/DialogHeader.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
-</script>
-
-<template>
-  <div
-    data-slot="dialog-header"
-    :class="cn('flex flex-col gap-2 text-center sm:text-left', props.class)"
-  >
-    <slot />
-  </div>
-</template>
diff --git a/resources/js/components/ui/dialog/DialogOverlay.vue b/resources/js/components/ui/dialog/DialogOverlay.vue
deleted file mode 100644
index 7790077..0000000
--- a/resources/js/components/ui/dialog/DialogOverlay.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<script setup lang="ts">
-import type { DialogOverlayProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { DialogOverlay } from "reka-ui"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<DialogOverlayProps & { class?: HTMLAttributes["class"] }>()
-
-const delegatedProps = reactiveOmit(props, "class")
-</script>
-
-<template>
-  <DialogOverlay
-    data-slot="dialog-overlay"
-    v-bind="delegatedProps"
-    :class="cn('data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80', props.class)"
-  >
-    <slot />
-  </DialogOverlay>
-</template>
diff --git a/resources/js/components/ui/dialog/DialogScrollContent.vue b/resources/js/components/ui/dialog/DialogScrollContent.vue
deleted file mode 100644
index abfb3a1..0000000
--- a/resources/js/components/ui/dialog/DialogScrollContent.vue
+++ /dev/null
@@ -1,59 +0,0 @@
-<script setup lang="ts">
-import type { DialogContentEmits, DialogContentProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { X } from "@lucide/vue"
-import { reactiveOmit } from "@vueuse/core"
-import {
-  DialogClose,
-  DialogContent,
-  DialogOverlay,
-  DialogPortal,
-  useForwardPropsEmits,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
-
-defineOptions({
-  inheritAttrs: false,
-})
-
-const props = defineProps<DialogContentProps & { class?: HTMLAttributes["class"] }>()
-const emits = defineEmits<DialogContentEmits>()
-
-const delegatedProps = reactiveOmit(props, "class")
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
-<template>
-  <DialogPortal>
-    <DialogOverlay
-      class="fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
-    >
-      <DialogContent
-        :class="
-          cn(
-            'relative z-50 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',
-            props.class,
-          )
-        "
-        v-bind="{ ...$attrs, ...forwarded }"
-        @pointer-down-outside="(event) => {
-          const originalEvent = event.detail.originalEvent;
-          const target = originalEvent.target as HTMLElement;
-          if (originalEvent.offsetX > target.clientWidth || originalEvent.offsetY > target.clientHeight) {
-            event.preventDefault();
-          }
-        }"
-      >
-        <slot />
-
-        <DialogClose
-          class="absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary"
-        >
-          <X class="w-4 h-4" />
-          <span class="sr-only">Close</span>
-        </DialogClose>
-      </DialogContent>
-    </DialogOverlay>
-  </DialogPortal>
-</template>
diff --git a/resources/js/components/ui/dialog/DialogTitle.vue b/resources/js/components/ui/dialog/DialogTitle.vue
deleted file mode 100644
index 860f01a..0000000
--- a/resources/js/components/ui/dialog/DialogTitle.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<script setup lang="ts">
-import type { DialogTitleProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { DialogTitle, useForwardProps } from "reka-ui"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<DialogTitleProps & { class?: HTMLAttributes["class"] }>()
-
-const delegatedProps = reactiveOmit(props, "class")
-
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <DialogTitle
-    data-slot="dialog-title"
-    v-bind="forwardedProps"
-    :class="cn('text-lg leading-none font-semibold', props.class)"
-  >
-    <slot />
-  </DialogTitle>
-</template>
diff --git a/resources/js/components/ui/dialog/DialogTrigger.vue b/resources/js/components/ui/dialog/DialogTrigger.vue
deleted file mode 100644
index 49667e9..0000000
--- a/resources/js/components/ui/dialog/DialogTrigger.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<script setup lang="ts">
-import type { DialogTriggerProps } from "reka-ui"
-import { DialogTrigger } from "reka-ui"
-
-const props = defineProps<DialogTriggerProps>()
-</script>
-
-<template>
-  <DialogTrigger
-    data-slot="dialog-trigger"
-    v-bind="props"
-  >
-    <slot />
-  </DialogTrigger>
-</template>
diff --git a/resources/js/components/ui/dialog/index.ts b/resources/js/components/ui/dialog/index.ts
deleted file mode 100644
index 6768b09..0000000
--- a/resources/js/components/ui/dialog/index.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-export { default as Dialog } from "./Dialog.vue"
-export { default as DialogClose } from "./DialogClose.vue"
-export { default as DialogContent } from "./DialogContent.vue"
-export { default as DialogDescription } from "./DialogDescription.vue"
-export { default as DialogFooter } from "./DialogFooter.vue"
-export { default as DialogHeader } from "./DialogHeader.vue"
-export { default as DialogOverlay } from "./DialogOverlay.vue"
-export { default as DialogScrollContent } from "./DialogScrollContent.vue"
-export { default as DialogTitle } from "./DialogTitle.vue"
-export { default as DialogTrigger } from "./DialogTrigger.vue"
diff --git a/resources/js/components/ui/dropdown-menu/DropdownMenu.vue b/resources/js/components/ui/dropdown-menu/DropdownMenu.vue
deleted file mode 100644
index e1c9ee3..0000000
--- a/resources/js/components/ui/dropdown-menu/DropdownMenu.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<script setup lang="ts">
-import type { DropdownMenuRootEmits, DropdownMenuRootProps } from "reka-ui"
-import { DropdownMenuRoot, useForwardPropsEmits } from "reka-ui"
-
-const props = defineProps<DropdownMenuRootProps>()
-const emits = defineEmits<DropdownMenuRootEmits>()
-
-const forwarded = useForwardPropsEmits(props, emits)
-</script>
-
-<template>
-  <DropdownMenuRoot
-    v-slot="slotProps"
-    data-slot="dropdown-menu"
-    v-bind="forwarded"
-  >
-    <slot v-bind="slotProps" />
-  </DropdownMenuRoot>
-</template>
diff --git a/resources/js/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue b/resources/js/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
deleted file mode 100644
index b73b18d..0000000
--- a/resources/js/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<script setup lang="ts">
-import type { DropdownMenuCheckboxItemEmits, DropdownMenuCheckboxItemProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { Check } from "@lucide/vue"
-import { reactiveOmit } from "@vueuse/core"
-import {
-  DropdownMenuCheckboxItem,
-  DropdownMenuItemIndicator,
-  useForwardPropsEmits,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes["class"] }>()
-const emits = defineEmits<DropdownMenuCheckboxItemEmits>()
-
-const delegatedProps = reactiveOmit(props, "class")
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
-<template>
-  <DropdownMenuCheckboxItem
-    data-slot="dropdown-menu-checkbox-item"
-    v-bind="forwarded"
-    :class=" cn(
-      'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
-      props.class,
-    )"
-  >
-    <span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
-      <DropdownMenuItemIndicator>
-        <slot name="indicator-icon">
-          <Check class="size-4" />
-        </slot>
-      </DropdownMenuItemIndicator>
-    </span>
-    <slot />
-  </DropdownMenuCheckboxItem>
-</template>
diff --git a/resources/js/components/ui/dropdown-menu/DropdownMenuContent.vue b/resources/js/components/ui/dropdown-menu/DropdownMenuContent.vue
deleted file mode 100644
index 7c43014..0000000
--- a/resources/js/components/ui/dropdown-menu/DropdownMenuContent.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<script setup lang="ts">
-import type { DropdownMenuContentEmits, DropdownMenuContentProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import {
-  DropdownMenuContent,
-  DropdownMenuPortal,
-  useForwardPropsEmits,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
-
-defineOptions({
-  inheritAttrs: false,
-})
-
-const props = withDefaults(
-  defineProps<DropdownMenuContentProps & { class?: HTMLAttributes["class"] }>(),
-  {
-    sideOffset: 4,
-  },
-)
-const emits = defineEmits<DropdownMenuContentEmits>()
-
-const delegatedProps = reactiveOmit(props, "class")
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
-<template>
-  <DropdownMenuPortal>
-    <DropdownMenuContent
-      data-slot="dropdown-menu-content"
-      v-bind="{ ...$attrs, ...forwarded }"
-      :class="cn('bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--reka-dropdown-menu-content-available-height) min-w-[8rem] origin-(--reka-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md', props.class)"
-    >
-      <slot />
-    </DropdownMenuContent>
-  </DropdownMenuPortal>
-</template>
diff --git a/resources/js/components/ui/dropdown-menu/DropdownMenuGroup.vue b/resources/js/components/ui/dropdown-menu/DropdownMenuGroup.vue
deleted file mode 100644
index da634ec..0000000
--- a/resources/js/components/ui/dropdown-menu/DropdownMenuGroup.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<script setup lang="ts">
-import type { DropdownMenuGroupProps } from "reka-ui"
-import { DropdownMenuGroup } from "reka-ui"
-
-const props = defineProps<DropdownMenuGroupProps>()
-</script>
-
-<template>
-  <DropdownMenuGroup
-    data-slot="dropdown-menu-group"
-    v-bind="props"
-  >
-    <slot />
-  </DropdownMenuGroup>
-</template>
diff --git a/resources/js/components/ui/dropdown-menu/DropdownMenuItem.vue b/resources/js/components/ui/dropdown-menu/DropdownMenuItem.vue
deleted file mode 100644
index f56cae3..0000000
--- a/resources/js/components/ui/dropdown-menu/DropdownMenuItem.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<script setup lang="ts">
-import type { DropdownMenuItemProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { DropdownMenuItem, useForwardProps } from "reka-ui"
-import { cn } from "@/lib/utils"
-
-const props = withDefaults(defineProps<DropdownMenuItemProps & {
-  class?: HTMLAttributes["class"]
-  inset?: boolean
-  variant?: "default" | "destructive"
-}>(), {
-  variant: "default",
-})
-
-const delegatedProps = reactiveOmit(props, "inset", "variant", "class")
-
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <DropdownMenuItem
-    data-slot="dropdown-menu-item"
-    :data-inset="inset ? '' : undefined"
-    :data-variant="variant"
-    v-bind="forwardedProps"
-    :class="cn('focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*=\'text-\'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4', props.class)"
-  >
-    <slot />
-  </DropdownMenuItem>
-</template>
diff --git a/resources/js/components/ui/dropdown-menu/DropdownMenuLabel.vue b/resources/js/components/ui/dropdown-menu/DropdownMenuLabel.vue
deleted file mode 100644
index 8bca83c..0000000
--- a/resources/js/components/ui/dropdown-menu/DropdownMenuLabel.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<script setup lang="ts">
-import type { DropdownMenuLabelProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { DropdownMenuLabel, useForwardProps } from "reka-ui"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<DropdownMenuLabelProps & { class?: HTMLAttributes["class"], inset?: boolean }>()
-
-const delegatedProps = reactiveOmit(props, "class", "inset")
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <DropdownMenuLabel
-    data-slot="dropdown-menu-label"
-    :data-inset="inset ? '' : undefined"
-    v-bind="forwardedProps"
-    :class="cn('px-2 py-1.5 text-sm font-medium data-[inset]:pl-8', props.class)"
-  >
-    <slot />
-  </DropdownMenuLabel>
-</template>
diff --git a/resources/js/components/ui/dropdown-menu/DropdownMenuRadioGroup.vue b/resources/js/components/ui/dropdown-menu/DropdownMenuRadioGroup.vue
deleted file mode 100644
index fe82cad..0000000
--- a/resources/js/components/ui/dropdown-menu/DropdownMenuRadioGroup.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<script setup lang="ts">
-import type { DropdownMenuRadioGroupEmits, DropdownMenuRadioGroupProps } from "reka-ui"
-import {
-  DropdownMenuRadioGroup,
-  useForwardPropsEmits,
-} from "reka-ui"
-
-const props = defineProps<DropdownMenuRadioGroupProps>()
-const emits = defineEmits<DropdownMenuRadioGroupEmits>()
-
-const forwarded = useForwardPropsEmits(props, emits)
-</script>
-
-<template>
-  <DropdownMenuRadioGroup
-    data-slot="dropdown-menu-radio-group"
-    v-bind="forwarded"
-  >
-    <slot />
-  </DropdownMenuRadioGroup>
-</template>
diff --git a/resources/js/components/ui/dropdown-menu/DropdownMenuRadioItem.vue b/resources/js/components/ui/dropdown-menu/DropdownMenuRadioItem.vue
deleted file mode 100644
index 503fa0c..0000000
--- a/resources/js/components/ui/dropdown-menu/DropdownMenuRadioItem.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<script setup lang="ts">
-import type { DropdownMenuRadioItemEmits, DropdownMenuRadioItemProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { Circle } from "@lucide/vue"
-import { reactiveOmit } from "@vueuse/core"
-import {
-  DropdownMenuItemIndicator,
-  DropdownMenuRadioItem,
-  useForwardPropsEmits,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<DropdownMenuRadioItemProps & { class?: HTMLAttributes["class"] }>()
-
-const emits = defineEmits<DropdownMenuRadioItemEmits>()
-
-const delegatedProps = reactiveOmit(props, "class")
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
-<template>
-  <DropdownMenuRadioItem
-    data-slot="dropdown-menu-radio-item"
-    v-bind="forwarded"
-    :class="cn(
-      'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
-      props.class,
-    )"
-  >
-    <span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
-      <DropdownMenuItemIndicator>
-        <slot name="indicator-icon">
-          <Circle class="size-2 fill-current" />
-        </slot>
-      </DropdownMenuItemIndicator>
-    </span>
-    <slot />
-  </DropdownMenuRadioItem>
-</template>
diff --git a/resources/js/components/ui/dropdown-menu/DropdownMenuSeparator.vue b/resources/js/components/ui/dropdown-menu/DropdownMenuSeparator.vue
deleted file mode 100644
index 1b936c3..0000000
--- a/resources/js/components/ui/dropdown-menu/DropdownMenuSeparator.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<script setup lang="ts">
-import type { DropdownMenuSeparatorProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import {
-  DropdownMenuSeparator,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<DropdownMenuSeparatorProps & {
-  class?: HTMLAttributes["class"]
-}>()
-
-const delegatedProps = reactiveOmit(props, "class")
-</script>
-
-<template>
-  <DropdownMenuSeparator
-    data-slot="dropdown-menu-separator"
-    v-bind="delegatedProps"
-    :class="cn('bg-border -mx-1 my-1 h-px', props.class)"
-  />
-</template>
diff --git a/resources/js/components/ui/dropdown-menu/DropdownMenuShortcut.vue b/resources/js/components/ui/dropdown-menu/DropdownMenuShortcut.vue
deleted file mode 100644
index 60be75c..0000000
--- a/resources/js/components/ui/dropdown-menu/DropdownMenuShortcut.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
-</script>
-
-<template>
-  <span
-    data-slot="dropdown-menu-shortcut"
-    :class="cn('text-muted-foreground ml-auto text-xs tracking-widest', props.class)"
-  >
-    <slot />
-  </span>
-</template>
diff --git a/resources/js/components/ui/dropdown-menu/DropdownMenuSub.vue b/resources/js/components/ui/dropdown-menu/DropdownMenuSub.vue
deleted file mode 100644
index 7472e77..0000000
--- a/resources/js/components/ui/dropdown-menu/DropdownMenuSub.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<script setup lang="ts">
-import type { DropdownMenuSubEmits, DropdownMenuSubProps } from "reka-ui"
-import {
-  DropdownMenuSub,
-  useForwardPropsEmits,
-} from "reka-ui"
-
-const props = defineProps<DropdownMenuSubProps>()
-const emits = defineEmits<DropdownMenuSubEmits>()
-
-const forwarded = useForwardPropsEmits(props, emits)
-</script>
-
-<template>
-  <DropdownMenuSub v-slot="slotProps" data-slot="dropdown-menu-sub" v-bind="forwarded">
-    <slot v-bind="slotProps" />
-  </DropdownMenuSub>
-</template>
diff --git a/resources/js/components/ui/dropdown-menu/DropdownMenuSubContent.vue b/resources/js/components/ui/dropdown-menu/DropdownMenuSubContent.vue
deleted file mode 100644
index d7c6b08..0000000
--- a/resources/js/components/ui/dropdown-menu/DropdownMenuSubContent.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<script setup lang="ts">
-import type { DropdownMenuSubContentEmits, DropdownMenuSubContentProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import {
-  DropdownMenuSubContent,
-  useForwardPropsEmits,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes["class"] }>()
-const emits = defineEmits<DropdownMenuSubContentEmits>()
-
-const delegatedProps = reactiveOmit(props, "class")
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
-<template>
-  <DropdownMenuSubContent
-    data-slot="dropdown-menu-sub-content"
-    v-bind="forwarded"
-    :class="cn('bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--reka-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg', props.class)"
-  >
-    <slot />
-  </DropdownMenuSubContent>
-</template>
diff --git a/resources/js/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue b/resources/js/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue
deleted file mode 100644
index 79a6479..0000000
--- a/resources/js/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<script setup lang="ts">
-import type { DropdownMenuSubTriggerProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { ChevronRight } from "@lucide/vue"
-import { reactiveOmit } from "@vueuse/core"
-import {
-  DropdownMenuSubTrigger,
-  useForwardProps,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<DropdownMenuSubTriggerProps & { class?: HTMLAttributes["class"], inset?: boolean }>()
-
-const delegatedProps = reactiveOmit(props, "class", "inset")
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <DropdownMenuSubTrigger
-    data-slot="dropdown-menu-sub-trigger"
-    v-bind="forwardedProps"
-    :data-inset="inset ? '' : undefined"
-    :class="cn(
-      'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4 data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*=\'text-\'])]:text-muted-foreground',
-      props.class,
-    )"
-  >
-    <slot />
-    <ChevronRight class="ml-auto size-4" />
-  </DropdownMenuSubTrigger>
-</template>
diff --git a/resources/js/components/ui/dropdown-menu/DropdownMenuTrigger.vue b/resources/js/components/ui/dropdown-menu/DropdownMenuTrigger.vue
deleted file mode 100644
index 75cd747..0000000
--- a/resources/js/components/ui/dropdown-menu/DropdownMenuTrigger.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<script setup lang="ts">
-import type { DropdownMenuTriggerProps } from "reka-ui"
-import { DropdownMenuTrigger, useForwardProps } from "reka-ui"
-
-const props = defineProps<DropdownMenuTriggerProps>()
-
-const forwardedProps = useForwardProps(props)
-</script>
-
-<template>
-  <DropdownMenuTrigger
-    data-slot="dropdown-menu-trigger"
-    v-bind="forwardedProps"
-  >
-    <slot />
-  </DropdownMenuTrigger>
-</template>
diff --git a/resources/js/components/ui/dropdown-menu/index.ts b/resources/js/components/ui/dropdown-menu/index.ts
deleted file mode 100644
index 955fe3a..0000000
--- a/resources/js/components/ui/dropdown-menu/index.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-export { default as DropdownMenu } from "./DropdownMenu.vue"
-
-export { default as DropdownMenuCheckboxItem } from "./DropdownMenuCheckboxItem.vue"
-export { default as DropdownMenuContent } from "./DropdownMenuContent.vue"
-export { default as DropdownMenuGroup } from "./DropdownMenuGroup.vue"
-export { default as DropdownMenuItem } from "./DropdownMenuItem.vue"
-export { default as DropdownMenuLabel } from "./DropdownMenuLabel.vue"
-export { default as DropdownMenuRadioGroup } from "./DropdownMenuRadioGroup.vue"
-export { default as DropdownMenuRadioItem } from "./DropdownMenuRadioItem.vue"
-export { default as DropdownMenuSeparator } from "./DropdownMenuSeparator.vue"
-export { default as DropdownMenuShortcut } from "./DropdownMenuShortcut.vue"
-export { default as DropdownMenuSub } from "./DropdownMenuSub.vue"
-export { default as DropdownMenuSubContent } from "./DropdownMenuSubContent.vue"
-export { default as DropdownMenuSubTrigger } from "./DropdownMenuSubTrigger.vue"
-export { default as DropdownMenuTrigger } from "./DropdownMenuTrigger.vue"
-export { DropdownMenuPortal } from "reka-ui"
diff --git a/resources/js/components/ui/input-otp/InputOTP.vue b/resources/js/components/ui/input-otp/InputOTP.vue
deleted file mode 100644
index f34b734..0000000
--- a/resources/js/components/ui/input-otp/InputOTP.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import type { OTPInputEmits, OTPInputProps } from "vue-input-otp"
-import { reactiveOmit } from "@vueuse/core"
-import { useForwardPropsEmits } from "reka-ui"
-import { OTPInput } from "vue-input-otp"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<OTPInputProps & { class?: HTMLAttributes["class"] }>()
-
-const emits = defineEmits<OTPInputEmits>()
-
-const delegatedProps = reactiveOmit(props, "class")
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
-<template>
-  <OTPInput
-    v-slot="slotProps"
-    v-bind="forwarded"
-    :container-class="cn('flex items-center gap-2 has-disabled:opacity-50', props.class)"
-    data-slot="input-otp"
-    class="disabled:cursor-not-allowed"
-  >
-    <slot v-bind="slotProps" />
-  </OTPInput>
-</template>
diff --git a/resources/js/components/ui/input-otp/InputOTPGroup.vue b/resources/js/components/ui/input-otp/InputOTPGroup.vue
deleted file mode 100644
index 1dea2ab..0000000
--- a/resources/js/components/ui/input-otp/InputOTPGroup.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { useForwardProps } from "reka-ui"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<{ class?: HTMLAttributes["class"] }>()
-
-const delegatedProps = reactiveOmit(props, "class")
-
-const forwarded = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <div
-    data-slot="input-otp-group"
-    v-bind="forwarded"
-    :class="cn('flex items-center', props.class)"
-  >
-    <slot />
-  </div>
-</template>
diff --git a/resources/js/components/ui/input-otp/InputOTPSeparator.vue b/resources/js/components/ui/input-otp/InputOTPSeparator.vue
deleted file mode 100644
index 2350e97..0000000
--- a/resources/js/components/ui/input-otp/InputOTPSeparator.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { MinusIcon } from "@lucide/vue"
-import { useForwardProps } from "reka-ui"
-
-const props = defineProps<{ class?: HTMLAttributes["class"] }>()
-
-const forwarded = useForwardProps(props)
-</script>
-
-<template>
-  <div
-    data-slot="input-otp-separator"
-    role="separator"
-    v-bind="forwarded"
-  >
-    <slot>
-      <MinusIcon />
-    </slot>
-  </div>
-</template>
diff --git a/resources/js/components/ui/input-otp/InputOTPSlot.vue b/resources/js/components/ui/input-otp/InputOTPSlot.vue
deleted file mode 100644
index a165799..0000000
--- a/resources/js/components/ui/input-otp/InputOTPSlot.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { useForwardProps } from "reka-ui"
-import { computed } from "vue"
-import { useVueOTPContext } from "vue-input-otp"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<{ index: number, class?: HTMLAttributes["class"] }>()
-
-const delegatedProps = reactiveOmit(props, "class")
-
-const forwarded = useForwardProps(delegatedProps)
-
-const context = useVueOTPContext()
-
-const slot = computed(() => context?.value.slots[props.index])
-</script>
-
-<template>
-  <div
-    v-bind="forwarded"
-    data-slot="input-otp-slot"
-    :data-active="slot?.isActive"
-    :class="cn('data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]', props.class)"
-  >
-    {{ slot?.char }}
-    <div v-if="slot?.hasFakeCaret" class="pointer-events-none absolute inset-0 flex items-center justify-center">
-      <div class="animate-caret-blink bg-foreground h-4 w-px duration-1000" />
-    </div>
-  </div>
-</template>
diff --git a/resources/js/components/ui/input-otp/index.ts b/resources/js/components/ui/input-otp/index.ts
deleted file mode 100644
index d97448a..0000000
--- a/resources/js/components/ui/input-otp/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export { default as InputOTP } from "./InputOTP.vue"
-export { default as InputOTPGroup } from "./InputOTPGroup.vue"
-export { default as InputOTPSeparator } from "./InputOTPSeparator.vue"
-export { default as InputOTPSlot } from "./InputOTPSlot.vue"
diff --git a/resources/js/components/ui/input/Input.vue b/resources/js/components/ui/input/Input.vue
deleted file mode 100644
index e5135c1..0000000
--- a/resources/js/components/ui/input/Input.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { useVModel } from "@vueuse/core"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<{
-  defaultValue?: string | number
-  modelValue?: string | number
-  class?: HTMLAttributes["class"]
-}>()
-
-const emits = defineEmits<{
-  (e: "update:modelValue", payload: string | number): void
-}>()
-
-const modelValue = useVModel(props, "modelValue", emits, {
-  passive: true,
-  defaultValue: props.defaultValue,
-})
-</script>
-
-<template>
-  <input
-    v-model="modelValue"
-    data-slot="input"
-    :class="cn(
-      'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
-      'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
-      'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
-      props.class,
-    )"
-  >
-</template>
diff --git a/resources/js/components/ui/input/index.ts b/resources/js/components/ui/input/index.ts
deleted file mode 100644
index 9976b86..0000000
--- a/resources/js/components/ui/input/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as Input } from "./Input.vue"
diff --git a/resources/js/components/ui/label/Label.vue b/resources/js/components/ui/label/Label.vue
deleted file mode 100644
index ee63970..0000000
--- a/resources/js/components/ui/label/Label.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<script setup lang="ts">
-import type { LabelProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { Label } from "reka-ui"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<LabelProps & { class?: HTMLAttributes["class"] }>()
-
-const delegatedProps = reactiveOmit(props, "class")
-</script>
-
-<template>
-  <Label
-    data-slot="label"
-    v-bind="delegatedProps"
-    :class="
-      cn(
-        'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
-        props.class,
-      )
-    "
-  >
-    <slot />
-  </Label>
-</template>
diff --git a/resources/js/components/ui/label/index.ts b/resources/js/components/ui/label/index.ts
deleted file mode 100644
index 036e35c..0000000
--- a/resources/js/components/ui/label/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as Label } from "./Label.vue"
diff --git a/resources/js/components/ui/navigation-menu/NavigationMenu.vue b/resources/js/components/ui/navigation-menu/NavigationMenu.vue
deleted file mode 100644
index 6042a77..0000000
--- a/resources/js/components/ui/navigation-menu/NavigationMenu.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<script setup lang="ts">
-import type { NavigationMenuRootEmits, NavigationMenuRootProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import {
-  NavigationMenuRoot,
-  useForwardPropsEmits,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
-import NavigationMenuViewport from "./NavigationMenuViewport.vue"
-
-const props = withDefaults(defineProps<NavigationMenuRootProps & {
-  class?: HTMLAttributes["class"]
-  viewport?: boolean
-}>(), {
-  viewport: true,
-})
-const emits = defineEmits<NavigationMenuRootEmits>()
-
-const delegatedProps = reactiveOmit(props, "class", "viewport")
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
-<template>
-  <NavigationMenuRoot
-    v-slot="slotProps"
-    data-slot="navigation-menu"
-    :data-viewport="viewport"
-    v-bind="forwarded"
-    :class="cn('group/navigation-menu relative flex max-w-max flex-1 items-center justify-center', props.class)"
-  >
-    <slot v-bind="slotProps" />
-    <NavigationMenuViewport v-if="viewport" />
-  </NavigationMenuRoot>
-</template>
diff --git a/resources/js/components/ui/navigation-menu/NavigationMenuContent.vue b/resources/js/components/ui/navigation-menu/NavigationMenuContent.vue
deleted file mode 100644
index 395dc2d..0000000
--- a/resources/js/components/ui/navigation-menu/NavigationMenuContent.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<script setup lang="ts">
-import type { NavigationMenuContentEmits, NavigationMenuContentProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import {
-  NavigationMenuContent,
-  useForwardPropsEmits,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<NavigationMenuContentProps & { class?: HTMLAttributes["class"] }>()
-const emits = defineEmits<NavigationMenuContentEmits>()
-
-const delegatedProps = reactiveOmit(props, "class")
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
-<template>
-  <NavigationMenuContent
-    data-slot="navigation-menu-content"
-    v-bind="forwarded"
-    :class="cn(
-      'data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto',
-      'group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none',
-      props.class,
-    )"
-  >
-    <slot />
-  </NavigationMenuContent>
-</template>
diff --git a/resources/js/components/ui/navigation-menu/NavigationMenuIndicator.vue b/resources/js/components/ui/navigation-menu/NavigationMenuIndicator.vue
deleted file mode 100644
index 2558371..0000000
--- a/resources/js/components/ui/navigation-menu/NavigationMenuIndicator.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<script setup lang="ts">
-import type { NavigationMenuIndicatorProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { NavigationMenuIndicator, useForwardProps } from "reka-ui"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<NavigationMenuIndicatorProps & { class?: HTMLAttributes["class"] }>()
-
-const delegatedProps = reactiveOmit(props, "class")
-
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <NavigationMenuIndicator
-    data-slot="navigation-menu-indicator"
-    v-bind="forwardedProps"
-    :class="cn('data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden', props.class)"
-  >
-    <div class="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" />
-  </NavigationMenuIndicator>
-</template>
diff --git a/resources/js/components/ui/navigation-menu/NavigationMenuItem.vue b/resources/js/components/ui/navigation-menu/NavigationMenuItem.vue
deleted file mode 100644
index 1a8595b..0000000
--- a/resources/js/components/ui/navigation-menu/NavigationMenuItem.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<script setup lang="ts">
-import type { NavigationMenuItemProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { NavigationMenuItem } from "reka-ui"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<NavigationMenuItemProps & { class?: HTMLAttributes["class"] }>()
-
-const delegatedProps = reactiveOmit(props, "class")
-</script>
-
-<template>
-  <NavigationMenuItem
-    data-slot="navigation-menu-item"
-    v-bind="delegatedProps"
-    :class="cn('relative', props.class)"
-  >
-    <slot />
-  </NavigationMenuItem>
-</template>
diff --git a/resources/js/components/ui/navigation-menu/NavigationMenuLink.vue b/resources/js/components/ui/navigation-menu/NavigationMenuLink.vue
deleted file mode 100644
index 6620c05..0000000
--- a/resources/js/components/ui/navigation-menu/NavigationMenuLink.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<script setup lang="ts">
-import type { NavigationMenuLinkEmits, NavigationMenuLinkProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import {
-  NavigationMenuLink,
-  useForwardPropsEmits,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<NavigationMenuLinkProps & { class?: HTMLAttributes["class"] }>()
-const emits = defineEmits<NavigationMenuLinkEmits>()
-
-const delegatedProps = reactiveOmit(props, "class")
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
-<template>
-  <NavigationMenuLink
-    data-slot="navigation-menu-link"
-    v-bind="forwarded"
-    :class="cn('data-active:focus:bg-accent data-active:hover:bg-accent data-active:bg-accent/50 data-active:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 [&_svg:not([class*=\'text-\'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-[color,box-shadow] focus-visible:ring-4 focus-visible:outline-1 [&_svg:not([class*=\'size-\'])]:size-4', props.class)"
-  >
-    <slot />
-  </NavigationMenuLink>
-</template>
diff --git a/resources/js/components/ui/navigation-menu/NavigationMenuList.vue b/resources/js/components/ui/navigation-menu/NavigationMenuList.vue
deleted file mode 100644
index a702d70..0000000
--- a/resources/js/components/ui/navigation-menu/NavigationMenuList.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<script setup lang="ts">
-import type { NavigationMenuListProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { NavigationMenuList, useForwardProps } from "reka-ui"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<NavigationMenuListProps & { class?: HTMLAttributes["class"] }>()
-
-const delegatedProps = reactiveOmit(props, "class")
-
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <NavigationMenuList
-    data-slot="navigation-menu-list"
-    v-bind="forwardedProps"
-    :class="
-      cn(
-        'group flex flex-1 list-none items-center justify-center gap-1',
-        props.class,
-      )
-    "
-  >
-    <slot />
-  </NavigationMenuList>
-</template>
diff --git a/resources/js/components/ui/navigation-menu/NavigationMenuTrigger.vue b/resources/js/components/ui/navigation-menu/NavigationMenuTrigger.vue
deleted file mode 100644
index 24c31f4..0000000
--- a/resources/js/components/ui/navigation-menu/NavigationMenuTrigger.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<script setup lang="ts">
-import type { NavigationMenuTriggerProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { ChevronDown } from "@lucide/vue"
-import { reactiveOmit } from "@vueuse/core"
-import {
-  NavigationMenuTrigger,
-  useForwardProps,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
-import { navigationMenuTriggerStyle } from "."
-
-const props = defineProps<NavigationMenuTriggerProps & { class?: HTMLAttributes["class"] }>()
-
-const delegatedProps = reactiveOmit(props, "class")
-
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <NavigationMenuTrigger
-    data-slot="navigation-menu-trigger"
-    v-bind="forwardedProps"
-    :class="cn(navigationMenuTriggerStyle(), 'group', props.class)"
-  >
-    <slot />
-    <ChevronDown
-      class="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
-      aria-hidden="true"
-    />
-  </NavigationMenuTrigger>
-</template>
diff --git a/resources/js/components/ui/navigation-menu/NavigationMenuViewport.vue b/resources/js/components/ui/navigation-menu/NavigationMenuViewport.vue
deleted file mode 100644
index 74edf86..0000000
--- a/resources/js/components/ui/navigation-menu/NavigationMenuViewport.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<script setup lang="ts">
-import type { NavigationMenuViewportProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import {
-  NavigationMenuViewport,
-  useForwardProps,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<NavigationMenuViewportProps & { class?: HTMLAttributes["class"] }>()
-
-const delegatedProps = reactiveOmit(props, "class")
-
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <div class="absolute top-full left-0 isolate z-50 flex justify-center">
-    <NavigationMenuViewport
-      data-slot="navigation-menu-viewport"
-      v-bind="forwardedProps"
-      :class="
-        cn(
-          'origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--reka-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--reka-navigation-menu-viewport-width)] left-[var(--reka-navigation-menu-viewport-left)]',
-          props.class,
-        )
-      "
-    />
-  </div>
-</template>
diff --git a/resources/js/components/ui/navigation-menu/index.ts b/resources/js/components/ui/navigation-menu/index.ts
deleted file mode 100644
index 9005591..0000000
--- a/resources/js/components/ui/navigation-menu/index.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { cva } from "class-variance-authority"
-
-export { default as NavigationMenu } from "./NavigationMenu.vue"
-export { default as NavigationMenuContent } from "./NavigationMenuContent.vue"
-export { default as NavigationMenuIndicator } from "./NavigationMenuIndicator.vue"
-export { default as NavigationMenuItem } from "./NavigationMenuItem.vue"
-export { default as NavigationMenuLink } from "./NavigationMenuLink.vue"
-export { default as NavigationMenuList } from "./NavigationMenuList.vue"
-export { default as NavigationMenuTrigger } from "./NavigationMenuTrigger.vue"
-export { default as NavigationMenuViewport } from "./NavigationMenuViewport.vue"
-
-export const navigationMenuTriggerStyle = cva(
-  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1",
-)
diff --git a/resources/js/components/ui/select/Select.vue b/resources/js/components/ui/select/Select.vue
deleted file mode 100644
index c94bbe8..0000000
--- a/resources/js/components/ui/select/Select.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<script setup lang="ts">
-import type { SelectRootEmits, SelectRootProps } from "reka-ui"
-import { SelectRoot, useForwardPropsEmits } from "reka-ui"
-
-const props = defineProps<SelectRootProps>()
-const emits = defineEmits<SelectRootEmits>()
-
-const forwarded = useForwardPropsEmits(props, emits)
-</script>
-
-<template>
-  <SelectRoot
-    v-slot="slotProps"
-    data-slot="select"
-    v-bind="forwarded"
-  >
-    <slot v-bind="slotProps" />
-  </SelectRoot>
-</template>
diff --git a/resources/js/components/ui/select/SelectContent.vue b/resources/js/components/ui/select/SelectContent.vue
deleted file mode 100644
index adf04ec..0000000
--- a/resources/js/components/ui/select/SelectContent.vue
+++ /dev/null
@@ -1,51 +0,0 @@
-<script setup lang="ts">
-import type { SelectContentEmits, SelectContentProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import {
-  SelectContent,
-  SelectPortal,
-  SelectViewport,
-  useForwardPropsEmits,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
-import { SelectScrollDownButton, SelectScrollUpButton } from "."
-
-defineOptions({
-  inheritAttrs: false,
-})
-
-const props = withDefaults(
-  defineProps<SelectContentProps & { class?: HTMLAttributes["class"] }>(),
-  {
-    position: "popper",
-  },
-)
-const emits = defineEmits<SelectContentEmits>()
-
-const delegatedProps = reactiveOmit(props, "class")
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
-<template>
-  <SelectPortal>
-    <SelectContent
-      data-slot="select-content"
-      v-bind="{ ...$attrs, ...forwarded }"
-      :class="cn(
-        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--reka-select-content-available-height) min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-md border shadow-md',
-        position === 'popper'
-          && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
-        props.class,
-      )
-      "
-    >
-      <SelectScrollUpButton />
-      <SelectViewport :class="cn('p-1', position === 'popper' && 'h-[var(--reka-select-trigger-height)] w-full min-w-[var(--reka-select-trigger-width)] scroll-my-1')">
-        <slot />
-      </SelectViewport>
-      <SelectScrollDownButton />
-    </SelectContent>
-  </SelectPortal>
-</template>
diff --git a/resources/js/components/ui/select/SelectGroup.vue b/resources/js/components/ui/select/SelectGroup.vue
deleted file mode 100644
index e981c6c..0000000
--- a/resources/js/components/ui/select/SelectGroup.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<script setup lang="ts">
-import type { SelectGroupProps } from "reka-ui"
-import { SelectGroup } from "reka-ui"
-
-const props = defineProps<SelectGroupProps>()
-</script>
-
-<template>
-  <SelectGroup
-    data-slot="select-group"
-    v-bind="props"
-  >
-    <slot />
-  </SelectGroup>
-</template>
diff --git a/resources/js/components/ui/select/SelectItem.vue b/resources/js/components/ui/select/SelectItem.vue
deleted file mode 100644
index a6a0dd3..0000000
--- a/resources/js/components/ui/select/SelectItem.vue
+++ /dev/null
@@ -1,44 +0,0 @@
-<script setup lang="ts">
-import type { SelectItemProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { Check } from "@lucide/vue"
-import { reactiveOmit } from "@vueuse/core"
-import {
-  SelectItem,
-  SelectItemIndicator,
-  SelectItemText,
-  useForwardProps,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<SelectItemProps & { class?: HTMLAttributes["class"] }>()
-
-const delegatedProps = reactiveOmit(props, "class")
-
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <SelectItem
-    data-slot="select-item"
-    v-bind="forwardedProps"
-    :class="
-      cn(
-        'focus:bg-accent focus:text-accent-foreground [&_svg:not([class*=\'text-\'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2',
-        props.class,
-      )
-    "
-  >
-    <span class="absolute right-2 flex size-3.5 items-center justify-center">
-      <SelectItemIndicator>
-        <slot name="indicator-icon">
-          <Check class="size-4" />
-        </slot>
-      </SelectItemIndicator>
-    </span>
-
-    <SelectItemText>
-      <slot />
-    </SelectItemText>
-  </SelectItem>
-</template>
diff --git a/resources/js/components/ui/select/SelectItemText.vue b/resources/js/components/ui/select/SelectItemText.vue
deleted file mode 100644
index b6700b1..0000000
--- a/resources/js/components/ui/select/SelectItemText.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<script setup lang="ts">
-import type { SelectItemTextProps } from "reka-ui"
-import { SelectItemText } from "reka-ui"
-
-const props = defineProps<SelectItemTextProps>()
-</script>
-
-<template>
-  <SelectItemText
-    data-slot="select-item-text"
-    v-bind="props"
-  >
-    <slot />
-  </SelectItemText>
-</template>
diff --git a/resources/js/components/ui/select/SelectLabel.vue b/resources/js/components/ui/select/SelectLabel.vue
deleted file mode 100644
index 5b6650c..0000000
--- a/resources/js/components/ui/select/SelectLabel.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<script setup lang="ts">
-import type { SelectLabelProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { SelectLabel } from "reka-ui"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<SelectLabelProps & { class?: HTMLAttributes["class"] }>()
-</script>
-
-<template>
-  <SelectLabel
-    data-slot="select-label"
-    :class="cn('text-muted-foreground px-2 py-1.5 text-xs', props.class)"
-  >
-    <slot />
-  </SelectLabel>
-</template>
diff --git a/resources/js/components/ui/select/SelectScrollDownButton.vue b/resources/js/components/ui/select/SelectScrollDownButton.vue
deleted file mode 100644
index 62c9c9e..0000000
--- a/resources/js/components/ui/select/SelectScrollDownButton.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<script setup lang="ts">
-import type { SelectScrollDownButtonProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { ChevronDown } from "@lucide/vue"
-import { reactiveOmit } from "@vueuse/core"
-import { SelectScrollDownButton, useForwardProps } from "reka-ui"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<SelectScrollDownButtonProps & { class?: HTMLAttributes["class"] }>()
-
-const delegatedProps = reactiveOmit(props, "class")
-
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <SelectScrollDownButton
-    data-slot="select-scroll-down-button"
-    v-bind="forwardedProps"
-    :class="cn('flex cursor-default items-center justify-center py-1', props.class)"
-  >
-    <slot>
-      <ChevronDown class="size-4" />
-    </slot>
-  </SelectScrollDownButton>
-</template>
diff --git a/resources/js/components/ui/select/SelectScrollUpButton.vue b/resources/js/components/ui/select/SelectScrollUpButton.vue
deleted file mode 100644
index b27afe8..0000000
--- a/resources/js/components/ui/select/SelectScrollUpButton.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<script setup lang="ts">
-import type { SelectScrollUpButtonProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { ChevronUp } from "@lucide/vue"
-import { reactiveOmit } from "@vueuse/core"
-import { SelectScrollUpButton, useForwardProps } from "reka-ui"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<SelectScrollUpButtonProps & { class?: HTMLAttributes["class"] }>()
-
-const delegatedProps = reactiveOmit(props, "class")
-
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <SelectScrollUpButton
-    data-slot="select-scroll-up-button"
-    v-bind="forwardedProps"
-    :class="cn('flex cursor-default items-center justify-center py-1', props.class)"
-  >
-    <slot>
-      <ChevronUp class="size-4" />
-    </slot>
-  </SelectScrollUpButton>
-</template>
diff --git a/resources/js/components/ui/select/SelectSeparator.vue b/resources/js/components/ui/select/SelectSeparator.vue
deleted file mode 100644
index 4b5c885..0000000
--- a/resources/js/components/ui/select/SelectSeparator.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<script setup lang="ts">
-import type { SelectSeparatorProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { SelectSeparator } from "reka-ui"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<SelectSeparatorProps & { class?: HTMLAttributes["class"] }>()
-
-const delegatedProps = reactiveOmit(props, "class")
-</script>
-
-<template>
-  <SelectSeparator
-    data-slot="select-separator"
-    v-bind="delegatedProps"
-    :class="cn('bg-border pointer-events-none -mx-1 my-1 h-px', props.class)"
-  />
-</template>
diff --git a/resources/js/components/ui/select/SelectTrigger.vue b/resources/js/components/ui/select/SelectTrigger.vue
deleted file mode 100644
index b6808cd..0000000
--- a/resources/js/components/ui/select/SelectTrigger.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<script setup lang="ts">
-import type { SelectTriggerProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { ChevronDown } from "@lucide/vue"
-import { reactiveOmit } from "@vueuse/core"
-import { SelectIcon, SelectTrigger, useForwardProps } from "reka-ui"
-import { cn } from "@/lib/utils"
-
-const props = withDefaults(
-  defineProps<SelectTriggerProps & { class?: HTMLAttributes["class"], size?: "sm" | "default" }>(),
-  { size: "default" },
-)
-
-const delegatedProps = reactiveOmit(props, "class", "size")
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <SelectTrigger
-    data-slot="select-trigger"
-    :data-size="size"
-    v-bind="forwardedProps"
-    :class="cn(
-      'border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*=\'text-\'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
-      props.class,
-    )"
-  >
-    <slot />
-    <SelectIcon as-child>
-      <ChevronDown class="size-4 opacity-50" />
-    </SelectIcon>
-  </SelectTrigger>
-</template>
diff --git a/resources/js/components/ui/select/SelectValue.vue b/resources/js/components/ui/select/SelectValue.vue
deleted file mode 100644
index d5ce58b..0000000
--- a/resources/js/components/ui/select/SelectValue.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<script setup lang="ts">
-import type { SelectValueProps } from "reka-ui"
-import { SelectValue } from "reka-ui"
-
-const props = defineProps<SelectValueProps>()
-</script>
-
-<template>
-  <SelectValue
-    data-slot="select-value"
-    v-bind="props"
-  >
-    <slot />
-  </SelectValue>
-</template>
diff --git a/resources/js/components/ui/select/index.ts b/resources/js/components/ui/select/index.ts
deleted file mode 100644
index 96eae60..0000000
--- a/resources/js/components/ui/select/index.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export { default as Select } from "./Select.vue"
-export { default as SelectContent } from "./SelectContent.vue"
-export { default as SelectGroup } from "./SelectGroup.vue"
-export { default as SelectItem } from "./SelectItem.vue"
-export { default as SelectItemText } from "./SelectItemText.vue"
-export { default as SelectLabel } from "./SelectLabel.vue"
-export { default as SelectScrollDownButton } from "./SelectScrollDownButton.vue"
-export { default as SelectScrollUpButton } from "./SelectScrollUpButton.vue"
-export { default as SelectSeparator } from "./SelectSeparator.vue"
-export { default as SelectTrigger } from "./SelectTrigger.vue"
-export { default as SelectValue } from "./SelectValue.vue"
diff --git a/resources/js/components/ui/separator/Separator.vue b/resources/js/components/ui/separator/Separator.vue
deleted file mode 100644
index 78d60ec..0000000
--- a/resources/js/components/ui/separator/Separator.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<script setup lang="ts">
-import type { SeparatorProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { Separator } from "reka-ui"
-import { cn } from "@/lib/utils"
-
-const props = withDefaults(defineProps<
-  SeparatorProps & { class?: HTMLAttributes["class"] }
->(), {
-  orientation: "horizontal",
-  decorative: true,
-})
-
-const delegatedProps = reactiveOmit(props, "class")
-</script>
-
-<template>
-  <Separator
-    data-slot="separator"
-    v-bind="delegatedProps"
-    :class="
-      cn(
-        'bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
-        props.class,
-      )
-    "
-  />
-</template>
diff --git a/resources/js/components/ui/separator/index.ts b/resources/js/components/ui/separator/index.ts
deleted file mode 100644
index 4407287..0000000
--- a/resources/js/components/ui/separator/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as Separator } from "./Separator.vue"
diff --git a/resources/js/components/ui/sheet/Sheet.vue b/resources/js/components/ui/sheet/Sheet.vue
deleted file mode 100644
index 8522f84..0000000
--- a/resources/js/components/ui/sheet/Sheet.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<script setup lang="ts">
-import type { DialogRootEmits, DialogRootProps } from "reka-ui"
-import { DialogRoot, useForwardPropsEmits } from "reka-ui"
-
-const props = defineProps<DialogRootProps>()
-const emits = defineEmits<DialogRootEmits>()
-
-const forwarded = useForwardPropsEmits(props, emits)
-</script>
-
-<template>
-  <DialogRoot
-    v-slot="slotProps"
-    data-slot="sheet"
-    v-bind="forwarded"
-  >
-    <slot v-bind="slotProps" />
-  </DialogRoot>
-</template>
diff --git a/resources/js/components/ui/sheet/SheetClose.vue b/resources/js/components/ui/sheet/SheetClose.vue
deleted file mode 100644
index 39a942c..0000000
--- a/resources/js/components/ui/sheet/SheetClose.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<script setup lang="ts">
-import type { DialogCloseProps } from "reka-ui"
-import { DialogClose } from "reka-ui"
-
-const props = defineProps<DialogCloseProps>()
-</script>
-
-<template>
-  <DialogClose
-    data-slot="sheet-close"
-    v-bind="props"
-  >
-    <slot />
-  </DialogClose>
-</template>
diff --git a/resources/js/components/ui/sheet/SheetContent.vue b/resources/js/components/ui/sheet/SheetContent.vue
deleted file mode 100644
index 77fd5d4..0000000
--- a/resources/js/components/ui/sheet/SheetContent.vue
+++ /dev/null
@@ -1,62 +0,0 @@
-<script setup lang="ts">
-import type { DialogContentEmits, DialogContentProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { X } from "@lucide/vue"
-import { reactiveOmit } from "@vueuse/core"
-import {
-  DialogClose,
-  DialogContent,
-  DialogPortal,
-  useForwardPropsEmits,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
-import SheetOverlay from "./SheetOverlay.vue"
-
-interface SheetContentProps extends DialogContentProps {
-  class?: HTMLAttributes["class"]
-  side?: "top" | "right" | "bottom" | "left"
-}
-
-defineOptions({
-  inheritAttrs: false,
-})
-
-const props = withDefaults(defineProps<SheetContentProps>(), {
-  side: "right",
-})
-const emits = defineEmits<DialogContentEmits>()
-
-const delegatedProps = reactiveOmit(props, "class", "side")
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
-<template>
-  <DialogPortal>
-    <SheetOverlay />
-    <DialogContent
-      data-slot="sheet-content"
-      :class="cn(
-        'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
-        side === 'right'
-          && 'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm',
-        side === 'left'
-          && 'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',
-        side === 'top'
-          && 'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b',
-        side === 'bottom'
-          && 'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t',
-        props.class)"
-      v-bind="{ ...$attrs, ...forwarded }"
-    >
-      <slot />
-
-      <DialogClose
-        class="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none"
-      >
-        <X class="size-4" />
-        <span class="sr-only">Close</span>
-      </DialogClose>
-    </DialogContent>
-  </DialogPortal>
-</template>
diff --git a/resources/js/components/ui/sheet/SheetDescription.vue b/resources/js/components/ui/sheet/SheetDescription.vue
deleted file mode 100644
index 6c8ba0a..0000000
--- a/resources/js/components/ui/sheet/SheetDescription.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<script setup lang="ts">
-import type { DialogDescriptionProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { DialogDescription } from "reka-ui"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes["class"] }>()
-
-const delegatedProps = reactiveOmit(props, "class")
-</script>
-
-<template>
-  <DialogDescription
-    data-slot="sheet-description"
-    :class="cn('text-muted-foreground text-sm', props.class)"
-    v-bind="delegatedProps"
-  >
-    <slot />
-  </DialogDescription>
-</template>
diff --git a/resources/js/components/ui/sheet/SheetFooter.vue b/resources/js/components/ui/sheet/SheetFooter.vue
deleted file mode 100644
index 5fcf751..0000000
--- a/resources/js/components/ui/sheet/SheetFooter.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<{ class?: HTMLAttributes["class"] }>()
-</script>
-
-<template>
-  <div
-    data-slot="sheet-footer"
-    :class="cn('mt-auto flex flex-col gap-2 p-4', props.class)
-    "
-  >
-    <slot />
-  </div>
-</template>
diff --git a/resources/js/components/ui/sheet/SheetHeader.vue b/resources/js/components/ui/sheet/SheetHeader.vue
deleted file mode 100644
index b6305ab..0000000
--- a/resources/js/components/ui/sheet/SheetHeader.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<{ class?: HTMLAttributes["class"] }>()
-</script>
-
-<template>
-  <div
-    data-slot="sheet-header"
-    :class="cn('flex flex-col gap-1.5 p-4', props.class)"
-  >
-    <slot />
-  </div>
-</template>
diff --git a/resources/js/components/ui/sheet/SheetOverlay.vue b/resources/js/components/ui/sheet/SheetOverlay.vue
deleted file mode 100644
index 220452a..0000000
--- a/resources/js/components/ui/sheet/SheetOverlay.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<script setup lang="ts">
-import type { DialogOverlayProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { DialogOverlay } from "reka-ui"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<DialogOverlayProps & { class?: HTMLAttributes["class"] }>()
-
-const delegatedProps = reactiveOmit(props, "class")
-</script>
-
-<template>
-  <DialogOverlay
-    data-slot="sheet-overlay"
-    :class="cn('data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80', props.class)"
-    v-bind="delegatedProps"
-  >
-    <slot />
-  </DialogOverlay>
-</template>
diff --git a/resources/js/components/ui/sheet/SheetTitle.vue b/resources/js/components/ui/sheet/SheetTitle.vue
deleted file mode 100644
index 889ae54..0000000
--- a/resources/js/components/ui/sheet/SheetTitle.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<script setup lang="ts">
-import type { DialogTitleProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { DialogTitle } from "reka-ui"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<DialogTitleProps & { class?: HTMLAttributes["class"] }>()
-
-const delegatedProps = reactiveOmit(props, "class")
-</script>
-
-<template>
-  <DialogTitle
-    data-slot="sheet-title"
-    :class="cn('text-foreground font-semibold', props.class)"
-    v-bind="delegatedProps"
-  >
-    <slot />
-  </DialogTitle>
-</template>
diff --git a/resources/js/components/ui/sheet/SheetTrigger.vue b/resources/js/components/ui/sheet/SheetTrigger.vue
deleted file mode 100644
index 41b121d..0000000
--- a/resources/js/components/ui/sheet/SheetTrigger.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<script setup lang="ts">
-import type { DialogTriggerProps } from "reka-ui"
-import { DialogTrigger } from "reka-ui"
-
-const props = defineProps<DialogTriggerProps>()
-</script>
-
-<template>
-  <DialogTrigger
-    data-slot="sheet-trigger"
-    v-bind="props"
-  >
-    <slot />
-  </DialogTrigger>
-</template>
diff --git a/resources/js/components/ui/sheet/index.ts b/resources/js/components/ui/sheet/index.ts
deleted file mode 100644
index 7c70e5d..0000000
--- a/resources/js/components/ui/sheet/index.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export { default as Sheet } from "./Sheet.vue"
-export { default as SheetClose } from "./SheetClose.vue"
-export { default as SheetContent } from "./SheetContent.vue"
-export { default as SheetDescription } from "./SheetDescription.vue"
-export { default as SheetFooter } from "./SheetFooter.vue"
-export { default as SheetHeader } from "./SheetHeader.vue"
-export { default as SheetTitle } from "./SheetTitle.vue"
-export { default as SheetTrigger } from "./SheetTrigger.vue"
diff --git a/resources/js/components/ui/sidebar/Sidebar.vue b/resources/js/components/ui/sidebar/Sidebar.vue
deleted file mode 100644
index b4699f8..0000000
--- a/resources/js/components/ui/sidebar/Sidebar.vue
+++ /dev/null
@@ -1,96 +0,0 @@
-<script setup lang="ts">
-import type { SidebarProps } from "."
-import { cn } from "@/lib/utils"
-import { Sheet, SheetContent } from '@/components/ui/sheet'
-import SheetDescription from '@/components/ui/sheet/SheetDescription.vue'
-import SheetHeader from '@/components/ui/sheet/SheetHeader.vue'
-import SheetTitle from '@/components/ui/sheet/SheetTitle.vue'
-import { SIDEBAR_WIDTH_MOBILE, useSidebar } from "./utils"
-
-defineOptions({
-  inheritAttrs: false,
-})
-
-const props = withDefaults(defineProps<SidebarProps>(), {
-  side: "left",
-  variant: "sidebar",
-  collapsible: "offcanvas",
-})
-
-const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
-</script>
-
-<template>
-  <div
-    v-if="collapsible === 'none'"
-    data-slot="sidebar"
-    :class="cn('bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col', props.class)"
-    v-bind="$attrs"
-  >
-    <slot />
-  </div>
-
-  <Sheet v-else-if="isMobile" :open="openMobile" v-bind="$attrs" @update:open="setOpenMobile">
-    <SheetContent
-      data-sidebar="sidebar"
-      data-slot="sidebar"
-      data-mobile="true"
-      :side="side"
-      class="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
-      :style="{
-        '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
-      }"
-    >
-      <SheetHeader class="sr-only">
-        <SheetTitle>Sidebar</SheetTitle>
-        <SheetDescription>Displays the mobile sidebar.</SheetDescription>
-      </SheetHeader>
-      <div class="flex h-full w-full flex-col">
-        <slot />
-      </div>
-    </SheetContent>
-  </Sheet>
-
-  <div
-    v-else
-    class="group peer text-sidebar-foreground hidden md:block"
-    data-slot="sidebar"
-    :data-state="state"
-    :data-collapsible="state === 'collapsed' ? collapsible : ''"
-    :data-variant="variant"
-    :data-side="side"
-  >
-    <!-- This is what handles the sidebar gap on desktop  -->
-    <div
-      :class="cn(
-        'relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear',
-        'group-data-[collapsible=offcanvas]:w-0',
-        'group-data-[side=right]:rotate-180',
-        variant === 'floating' || variant === 'inset'
-          ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]'
-          : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)',
-      )"
-    />
-    <div
-      :class="cn(
-        'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex',
-        side === 'left'
-          ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
-          : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
-        // Adjust the padding for floating and inset variants.
-        variant === 'floating' || variant === 'inset'
-          ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'
-          : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l',
-        props.class,
-      )"
-      v-bind="$attrs"
-    >
-      <div
-        data-sidebar="sidebar"
-        class="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
-      >
-        <slot />
-      </div>
-    </div>
-  </div>
-</template>
diff --git a/resources/js/components/ui/sidebar/SidebarContent.vue b/resources/js/components/ui/sidebar/SidebarContent.vue
deleted file mode 100644
index bb6d9f1..0000000
--- a/resources/js/components/ui/sidebar/SidebarContent.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
-</script>
-
-<template>
-  <div
-    data-slot="sidebar-content"
-    data-sidebar="content"
-    :class="cn('flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden', props.class)"
-  >
-    <slot />
-  </div>
-</template>
diff --git a/resources/js/components/ui/sidebar/SidebarFooter.vue b/resources/js/components/ui/sidebar/SidebarFooter.vue
deleted file mode 100644
index 20dd72f..0000000
--- a/resources/js/components/ui/sidebar/SidebarFooter.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
-</script>
-
-<template>
-  <div
-    data-slot="sidebar-footer"
-    data-sidebar="footer"
-    :class="cn('flex flex-col gap-2 p-2', props.class)"
-  >
-    <slot />
-  </div>
-</template>
diff --git a/resources/js/components/ui/sidebar/SidebarGroup.vue b/resources/js/components/ui/sidebar/SidebarGroup.vue
deleted file mode 100644
index fbb4887..0000000
--- a/resources/js/components/ui/sidebar/SidebarGroup.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
-</script>
-
-<template>
-  <div
-    data-slot="sidebar-group"
-    data-sidebar="group"
-    :class="cn('relative flex w-full min-w-0 flex-col p-2', props.class)"
-  >
-    <slot />
-  </div>
-</template>
diff --git a/resources/js/components/ui/sidebar/SidebarGroupAction.vue b/resources/js/components/ui/sidebar/SidebarGroupAction.vue
deleted file mode 100644
index f5fa5eb..0000000
--- a/resources/js/components/ui/sidebar/SidebarGroupAction.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<script setup lang="ts">
-import type { PrimitiveProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { Primitive } from "reka-ui"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<PrimitiveProps & {
-  class?: HTMLAttributes["class"]
-}>()
-</script>
-
-<template>
-  <Primitive
-    data-slot="sidebar-group-action"
-    data-sidebar="group-action"
-    :as="as"
-    :as-child="asChild"
-    :class="cn(
-      'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
-      'after:absolute after:-inset-2 md:after:hidden',
-      'group-data-[collapsible=icon]:hidden',
-      props.class,
-    )"
-  >
-    <slot />
-  </Primitive>
-</template>
diff --git a/resources/js/components/ui/sidebar/SidebarGroupContent.vue b/resources/js/components/ui/sidebar/SidebarGroupContent.vue
deleted file mode 100644
index 06e1a92..0000000
--- a/resources/js/components/ui/sidebar/SidebarGroupContent.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
-</script>
-
-<template>
-  <div
-    data-slot="sidebar-group-content"
-    data-sidebar="group-content"
-    :class="cn('w-full text-sm', props.class)"
-  >
-    <slot />
-  </div>
-</template>
diff --git a/resources/js/components/ui/sidebar/SidebarGroupLabel.vue b/resources/js/components/ui/sidebar/SidebarGroupLabel.vue
deleted file mode 100644
index f5da130..0000000
--- a/resources/js/components/ui/sidebar/SidebarGroupLabel.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<script setup lang="ts">
-import type { PrimitiveProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { Primitive } from "reka-ui"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<PrimitiveProps & {
-  class?: HTMLAttributes["class"]
-}>()
-</script>
-
-<template>
-  <Primitive
-    data-slot="sidebar-group-label"
-    data-sidebar="group-label"
-    :as="as"
-    :as-child="asChild"
-    :class="cn(
-      'text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
-      'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',
-      props.class)"
-  >
-    <slot />
-  </Primitive>
-</template>
diff --git a/resources/js/components/ui/sidebar/SidebarHeader.vue b/resources/js/components/ui/sidebar/SidebarHeader.vue
deleted file mode 100644
index 79cf883..0000000
--- a/resources/js/components/ui/sidebar/SidebarHeader.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
-</script>
-
-<template>
-  <div
-    data-slot="sidebar-header"
-    data-sidebar="header"
-    :class="cn('flex flex-col gap-2 p-2', props.class)"
-  >
-    <slot />
-  </div>
-</template>
diff --git a/resources/js/components/ui/sidebar/SidebarInput.vue b/resources/js/components/ui/sidebar/SidebarInput.vue
deleted file mode 100644
index 3afc5da..0000000
--- a/resources/js/components/ui/sidebar/SidebarInput.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
-import { Input } from '@/components/ui/input'
-
-const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
-</script>
-
-<template>
-  <Input
-    data-slot="sidebar-input"
-    data-sidebar="input"
-    :class="cn(
-      'bg-background h-8 w-full shadow-none',
-      props.class,
-    )"
-  >
-    <slot />
-  </Input>
-</template>
diff --git a/resources/js/components/ui/sidebar/SidebarInset.vue b/resources/js/components/ui/sidebar/SidebarInset.vue
deleted file mode 100644
index f46b43a..0000000
--- a/resources/js/components/ui/sidebar/SidebarInset.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
-</script>
-
-<template>
-  <main
-    data-slot="sidebar-inset"
-    :class="cn(
-      'bg-background relative flex w-full flex-1 flex-col',
-      'md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2',
-      props.class,
-    )"
-  >
-    <slot />
-  </main>
-</template>
diff --git a/resources/js/components/ui/sidebar/SidebarMenu.vue b/resources/js/components/ui/sidebar/SidebarMenu.vue
deleted file mode 100644
index e1dd39e..0000000
--- a/resources/js/components/ui/sidebar/SidebarMenu.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
-</script>
-
-<template>
-  <ul
-    data-slot="sidebar-menu"
-    data-sidebar="menu"
-    :class="cn('flex w-full min-w-0 flex-col gap-1', props.class)"
-  >
-    <slot />
-  </ul>
-</template>
diff --git a/resources/js/components/ui/sidebar/SidebarMenuAction.vue b/resources/js/components/ui/sidebar/SidebarMenuAction.vue
deleted file mode 100644
index bdffdb7..0000000
--- a/resources/js/components/ui/sidebar/SidebarMenuAction.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<script setup lang="ts">
-import type { PrimitiveProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { Primitive } from "reka-ui"
-import { cn } from "@/lib/utils"
-
-const props = withDefaults(defineProps<PrimitiveProps & {
-  showOnHover?: boolean
-  class?: HTMLAttributes["class"]
-}>(), {
-  as: "button",
-})
-</script>
-
-<template>
-  <Primitive
-    data-slot="sidebar-menu-action"
-    data-sidebar="menu-action"
-    :class="cn(
-      'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
-      'after:absolute after:-inset-2 md:after:hidden',
-      'peer-data-[size=sm]/menu-button:top-1',
-      'peer-data-[size=default]/menu-button:top-1.5',
-      'peer-data-[size=lg]/menu-button:top-2.5',
-      'group-data-[collapsible=icon]:hidden',
-      showOnHover
-        && 'peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0',
-      props.class,
-    )"
-    :as="as"
-    :as-child="asChild"
-  >
-    <slot />
-  </Primitive>
-</template>
diff --git a/resources/js/components/ui/sidebar/SidebarMenuBadge.vue b/resources/js/components/ui/sidebar/SidebarMenuBadge.vue
deleted file mode 100644
index 4321618..0000000
--- a/resources/js/components/ui/sidebar/SidebarMenuBadge.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
-</script>
-
-<template>
-  <div
-    data-slot="sidebar-menu-badge"
-    data-sidebar="menu-badge"
-    :class="cn(
-      'text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none',
-      'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
-      'peer-data-[size=sm]/menu-button:top-1',
-      'peer-data-[size=default]/menu-button:top-1.5',
-      'peer-data-[size=lg]/menu-button:top-2.5',
-      'group-data-[collapsible=icon]:hidden',
-      props.class,
-    )"
-  >
-    <slot />
-  </div>
-</template>
diff --git a/resources/js/components/ui/sidebar/SidebarMenuButton.vue b/resources/js/components/ui/sidebar/SidebarMenuButton.vue
deleted file mode 100644
index 502d395..0000000
--- a/resources/js/components/ui/sidebar/SidebarMenuButton.vue
+++ /dev/null
@@ -1,48 +0,0 @@
-<script setup lang="ts">
-import type { Component } from "vue"
-import type { SidebarMenuButtonProps } from "./SidebarMenuButtonChild.vue"
-import { reactiveOmit } from "@vueuse/core"
-import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
-import SidebarMenuButtonChild from "./SidebarMenuButtonChild.vue"
-import { useSidebar } from "./utils"
-
-defineOptions({
-  inheritAttrs: false,
-})
-
-const props = withDefaults(defineProps<SidebarMenuButtonProps & {
-  tooltip?: string | Component
-}>(), {
-  as: "button",
-  variant: "default",
-  size: "default",
-})
-
-const { isMobile, state } = useSidebar()
-
-const delegatedProps = reactiveOmit(props, "tooltip")
-</script>
-
-<template>
-  <SidebarMenuButtonChild v-if="!tooltip" v-bind="{ ...delegatedProps, ...$attrs }">
-    <slot />
-  </SidebarMenuButtonChild>
-
-  <Tooltip v-else>
-    <TooltipTrigger as-child>
-      <SidebarMenuButtonChild v-bind="{ ...delegatedProps, ...$attrs }">
-        <slot />
-      </SidebarMenuButtonChild>
-    </TooltipTrigger>
-    <TooltipContent
-      side="right"
-      align="center"
-      :hidden="state !== 'collapsed' || isMobile"
-    >
-      <template v-if="typeof tooltip === 'string'">
-        {{ tooltip }}
-      </template>
-      <component :is="tooltip" v-else />
-    </TooltipContent>
-  </Tooltip>
-</template>
diff --git a/resources/js/components/ui/sidebar/SidebarMenuButtonChild.vue b/resources/js/components/ui/sidebar/SidebarMenuButtonChild.vue
deleted file mode 100644
index 4b4ca3b..0000000
--- a/resources/js/components/ui/sidebar/SidebarMenuButtonChild.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<script setup lang="ts">
-import type { PrimitiveProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import type { SidebarMenuButtonVariants } from "."
-import { Primitive } from "reka-ui"
-import { cn } from "@/lib/utils"
-import { sidebarMenuButtonVariants } from "."
-
-export interface SidebarMenuButtonProps extends PrimitiveProps {
-  variant?: SidebarMenuButtonVariants["variant"]
-  size?: SidebarMenuButtonVariants["size"]
-  isActive?: boolean
-  class?: HTMLAttributes["class"]
-}
-
-const props = withDefaults(defineProps<SidebarMenuButtonProps>(), {
-  as: "button",
-  variant: "default",
-  size: "default",
-})
-</script>
-
-<template>
-  <Primitive
-    data-slot="sidebar-menu-button"
-    data-sidebar="menu-button"
-    :data-size="size"
-    :data-active="isActive"
-    :class="cn(sidebarMenuButtonVariants({ variant, size }), props.class)"
-    :as="as"
-    :as-child="asChild"
-    v-bind="$attrs"
-  >
-    <slot />
-  </Primitive>
-</template>
diff --git a/resources/js/components/ui/sidebar/SidebarMenuItem.vue b/resources/js/components/ui/sidebar/SidebarMenuItem.vue
deleted file mode 100644
index e2fda5b..0000000
--- a/resources/js/components/ui/sidebar/SidebarMenuItem.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
-</script>
-
-<template>
-  <li
-    data-slot="sidebar-menu-item"
-    data-sidebar="menu-item"
-    :class="cn('group/menu-item relative', props.class)"
-  >
-    <slot />
-  </li>
-</template>
diff --git a/resources/js/components/ui/sidebar/SidebarMenuSkeleton.vue b/resources/js/components/ui/sidebar/SidebarMenuSkeleton.vue
deleted file mode 100644
index b33812c..0000000
--- a/resources/js/components/ui/sidebar/SidebarMenuSkeleton.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { computed } from "vue"
-import { cn } from "@/lib/utils"
-import { Skeleton } from '@/components/ui/skeleton'
-
-const props = defineProps<{
-  showIcon?: boolean
-  class?: HTMLAttributes["class"]
-}>()
-
-const width = computed(() => {
-  return `${Math.floor(Math.random() * 40) + 50}%`
-})
-</script>
-
-<template>
-  <div
-    data-slot="sidebar-menu-skeleton"
-    data-sidebar="menu-skeleton"
-    :class="cn('flex h-8 items-center gap-2 rounded-md px-2', props.class)"
-  >
-    <Skeleton
-      v-if="showIcon"
-      class="size-4 rounded-md"
-      data-sidebar="menu-skeleton-icon"
-    />
-
-    <Skeleton
-      class="h-4 max-w-(--skeleton-width) flex-1"
-      data-sidebar="menu-skeleton-text"
-      :style="{ '--skeleton-width': width }"
-    />
-  </div>
-</template>
diff --git a/resources/js/components/ui/sidebar/SidebarMenuSub.vue b/resources/js/components/ui/sidebar/SidebarMenuSub.vue
deleted file mode 100644
index 81c2dab..0000000
--- a/resources/js/components/ui/sidebar/SidebarMenuSub.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
-</script>
-
-<template>
-  <ul
-    data-slot="sidebar-menu-sub"
-    data-sidebar="menu-badge"
-    :class="cn(
-      'border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5',
-      'group-data-[collapsible=icon]:hidden',
-      props.class,
-    )"
-  >
-    <slot />
-  </ul>
-</template>
diff --git a/resources/js/components/ui/sidebar/SidebarMenuSubButton.vue b/resources/js/components/ui/sidebar/SidebarMenuSubButton.vue
deleted file mode 100644
index 457cfb6..0000000
--- a/resources/js/components/ui/sidebar/SidebarMenuSubButton.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<script setup lang="ts">
-import type { PrimitiveProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { Primitive } from "reka-ui"
-import { cn } from "@/lib/utils"
-
-const props = withDefaults(defineProps<PrimitiveProps & {
-  size?: "sm" | "md"
-  isActive?: boolean
-  class?: HTMLAttributes["class"]
-}>(), {
-  as: "a",
-  size: "md",
-})
-</script>
-
-<template>
-  <Primitive
-    data-slot="sidebar-menu-sub-button"
-    data-sidebar="menu-sub-button"
-    :as="as"
-    :as-child="asChild"
-    :data-size="size"
-    :data-active="isActive"
-    :class="cn(
-      'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
-      'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
-      size === 'sm' && 'text-xs',
-      size === 'md' && 'text-sm',
-      'group-data-[collapsible=icon]:hidden',
-      props.class,
-    )"
-  >
-    <slot />
-  </Primitive>
-</template>
diff --git a/resources/js/components/ui/sidebar/SidebarMenuSubItem.vue b/resources/js/components/ui/sidebar/SidebarMenuSubItem.vue
deleted file mode 100644
index d4374f6..0000000
--- a/resources/js/components/ui/sidebar/SidebarMenuSubItem.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
-</script>
-
-<template>
-  <li
-    data-slot="sidebar-menu-sub-item"
-    data-sidebar="menu-sub-item"
-    :class="cn('group/menu-sub-item relative', props.class)"
-  >
-    <slot />
-  </li>
-</template>
diff --git a/resources/js/components/ui/sidebar/SidebarProvider.vue b/resources/js/components/ui/sidebar/SidebarProvider.vue
deleted file mode 100644
index 04ed975..0000000
--- a/resources/js/components/ui/sidebar/SidebarProvider.vue
+++ /dev/null
@@ -1,82 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes, Ref } from "vue"
-import { defaultDocument, useEventListener, useMediaQuery, useVModel } from "@vueuse/core"
-import { TooltipProvider } from "reka-ui"
-import { computed, ref } from "vue"
-import { cn } from "@/lib/utils"
-import { provideSidebarContext, SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON } from "./utils"
-
-const props = withDefaults(defineProps<{
-  defaultOpen?: boolean
-  open?: boolean
-  class?: HTMLAttributes["class"]
-}>(), {
-  defaultOpen: !defaultDocument?.cookie.includes(`${SIDEBAR_COOKIE_NAME}=false`),
-  open: undefined,
-})
-
-const emits = defineEmits<{
-  "update:open": [open: boolean]
-}>()
-
-const isMobile = useMediaQuery("(max-width: 768px)")
-const openMobile = ref(false)
-
-const open = useVModel(props, "open", emits, {
-  defaultValue: props.defaultOpen ?? false,
-  passive: (props.open === undefined) as false,
-}) as Ref<boolean>
-
-function setOpen(value: boolean) {
-  open.value = value // emits('update:open', value)
-
-  // This sets the cookie to keep the sidebar state.
-  document.cookie = `${SIDEBAR_COOKIE_NAME}=${open.value}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
-}
-
-function setOpenMobile(value: boolean) {
-  openMobile.value = value
-}
-
-// Helper to toggle the sidebar.
-function toggleSidebar() {
-  return isMobile.value ? setOpenMobile(!openMobile.value) : setOpen(!open.value)
-}
-
-useEventListener("keydown", (event: KeyboardEvent) => {
-  if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
-    event.preventDefault()
-    toggleSidebar()
-  }
-})
-
-// We add a state so that we can do data-state="expanded" or "collapsed".
-// This makes it easier to style the sidebar with Tailwind classes.
-const state = computed(() => open.value ? "expanded" : "collapsed")
-
-provideSidebarContext({
-  state,
-  open,
-  setOpen,
-  isMobile,
-  openMobile,
-  setOpenMobile,
-  toggleSidebar,
-})
-</script>
-
-<template>
-  <TooltipProvider :delay-duration="0">
-    <div
-      data-slot="sidebar-wrapper"
-      :style="{
-        '--sidebar-width': SIDEBAR_WIDTH,
-        '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
-      }"
-      :class="cn('group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full', props.class)"
-      v-bind="$attrs"
-    >
-      <slot />
-    </div>
-  </TooltipProvider>
-</template>
diff --git a/resources/js/components/ui/sidebar/SidebarRail.vue b/resources/js/components/ui/sidebar/SidebarRail.vue
deleted file mode 100644
index 1045a55..0000000
--- a/resources/js/components/ui/sidebar/SidebarRail.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
-import { useSidebar } from "./utils"
-
-const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
-
-const { toggleSidebar } = useSidebar()
-</script>
-
-<template>
-  <button
-    data-sidebar="rail"
-    data-slot="sidebar-rail"
-    aria-label="Toggle Sidebar"
-    :tabindex="-1"
-    title="Toggle Sidebar"
-    :class="cn(
-      'hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex',
-      'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',
-      '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
-      'hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full',
-      '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
-      '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
-      props.class,
-    )"
-    @click="toggleSidebar"
-  >
-    <slot />
-  </button>
-</template>
diff --git a/resources/js/components/ui/sidebar/SidebarSeparator.vue b/resources/js/components/ui/sidebar/SidebarSeparator.vue
deleted file mode 100644
index 91170bc..0000000
--- a/resources/js/components/ui/sidebar/SidebarSeparator.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
-import { Separator } from '@/components/ui/separator'
-
-const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
-</script>
-
-<template>
-  <Separator
-    data-slot="sidebar-separator"
-    data-sidebar="separator"
-    :class="cn('bg-sidebar-border mx-2 w-auto', props.class)"
-  >
-    <slot />
-  </Separator>
-</template>
diff --git a/resources/js/components/ui/sidebar/SidebarTrigger.vue b/resources/js/components/ui/sidebar/SidebarTrigger.vue
deleted file mode 100644
index e341141..0000000
--- a/resources/js/components/ui/sidebar/SidebarTrigger.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { PanelLeftClose, PanelLeftOpen } from "@lucide/vue"
-import { cn } from "@/lib/utils"
-import { Button } from '@/components/ui/button'
-import { useSidebar } from "./utils"
-
-const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
-
-const { isMobile, state, toggleSidebar } = useSidebar()
-</script>
-
-<template>
-  <Button
-    data-sidebar="trigger"
-    data-slot="sidebar-trigger"
-    variant="ghost"
-    size="icon"
-    :class="cn('h-7 w-7', props.class)"
-    @click="toggleSidebar"
-  >
-    <PanelLeftOpen v-if="isMobile || state === 'collapsed'" />
-    <PanelLeftClose v-else />
-    <span class="sr-only">Toggle sidebar</span>
-  </Button>
-</template>
diff --git a/resources/js/components/ui/sidebar/index.ts b/resources/js/components/ui/sidebar/index.ts
deleted file mode 100644
index c865573..0000000
--- a/resources/js/components/ui/sidebar/index.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-import type { VariantProps } from "class-variance-authority"
-import type { HTMLAttributes } from "vue"
-import { cva } from "class-variance-authority"
-
-export interface SidebarProps {
-  side?: "left" | "right"
-  variant?: "sidebar" | "floating" | "inset"
-  collapsible?: "offcanvas" | "icon" | "none"
-  class?: HTMLAttributes["class"]
-}
-
-export { default as Sidebar } from "./Sidebar.vue"
-export { default as SidebarContent } from "./SidebarContent.vue"
-export { default as SidebarFooter } from "./SidebarFooter.vue"
-export { default as SidebarGroup } from "./SidebarGroup.vue"
-export { default as SidebarGroupAction } from "./SidebarGroupAction.vue"
-export { default as SidebarGroupContent } from "./SidebarGroupContent.vue"
-export { default as SidebarGroupLabel } from "./SidebarGroupLabel.vue"
-export { default as SidebarHeader } from "./SidebarHeader.vue"
-export { default as SidebarInput } from "./SidebarInput.vue"
-export { default as SidebarInset } from "./SidebarInset.vue"
-export { default as SidebarMenu } from "./SidebarMenu.vue"
-export { default as SidebarMenuAction } from "./SidebarMenuAction.vue"
-export { default as SidebarMenuBadge } from "./SidebarMenuBadge.vue"
-export { default as SidebarMenuButton } from "./SidebarMenuButton.vue"
-export { default as SidebarMenuItem } from "./SidebarMenuItem.vue"
-export { default as SidebarMenuSkeleton } from "./SidebarMenuSkeleton.vue"
-export { default as SidebarMenuSub } from "./SidebarMenuSub.vue"
-export { default as SidebarMenuSubButton } from "./SidebarMenuSubButton.vue"
-export { default as SidebarMenuSubItem } from "./SidebarMenuSubItem.vue"
-export { default as SidebarProvider } from "./SidebarProvider.vue"
-export { default as SidebarRail } from "./SidebarRail.vue"
-export { default as SidebarSeparator } from "./SidebarSeparator.vue"
-export { default as SidebarTrigger } from "./SidebarTrigger.vue"
-
-export { useSidebar } from "./utils"
-
-export const sidebarMenuButtonVariants = cva(
-  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
-  {
-    variants: {
-      variant: {
-        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
-        outline:
-          "bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_var(--sidebar-accent)]",
-      },
-      size: {
-        default: "h-8 text-sm",
-        sm: "h-7 text-xs",
-        lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  },
-)
-
-export type SidebarMenuButtonVariants = VariantProps<typeof sidebarMenuButtonVariants>
diff --git a/resources/js/components/ui/sidebar/utils.ts b/resources/js/components/ui/sidebar/utils.ts
deleted file mode 100644
index 6e57eeb..0000000
--- a/resources/js/components/ui/sidebar/utils.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import type { ComputedRef, Ref } from "vue"
-import { createContext } from "reka-ui"
-
-export const SIDEBAR_COOKIE_NAME = "sidebar_state"
-export const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
-export const SIDEBAR_WIDTH = "16rem"
-export const SIDEBAR_WIDTH_MOBILE = "18rem"
-export const SIDEBAR_WIDTH_ICON = "3rem"
-export const SIDEBAR_KEYBOARD_SHORTCUT = "b"
-
-export const [useSidebar, provideSidebarContext] = createContext<{
-  state: ComputedRef<"expanded" | "collapsed">
-  open: Ref<boolean>
-  setOpen: (value: boolean) => void
-  isMobile: Ref<boolean>
-  openMobile: Ref<boolean>
-  setOpenMobile: (value: boolean) => void
-  toggleSidebar: () => void
-}>("Sidebar")
diff --git a/resources/js/components/ui/skeleton/Skeleton.vue b/resources/js/components/ui/skeleton/Skeleton.vue
deleted file mode 100644
index 0dadcef..0000000
--- a/resources/js/components/ui/skeleton/Skeleton.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
-
-interface SkeletonProps {
-  class?: HTMLAttributes["class"]
-}
-
-const props = defineProps<SkeletonProps>()
-</script>
-
-<template>
-  <div
-    data-slot="skeleton"
-    :class="cn('animate-pulse rounded-md bg-primary/10', props.class)"
-  />
-</template>
diff --git a/resources/js/components/ui/skeleton/index.ts b/resources/js/components/ui/skeleton/index.ts
deleted file mode 100644
index e5ce72c..0000000
--- a/resources/js/components/ui/skeleton/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as Skeleton } from "./Skeleton.vue"
diff --git a/resources/js/components/ui/sonner/Sonner.vue b/resources/js/components/ui/sonner/Sonner.vue
deleted file mode 100644
index bfa055b..0000000
--- a/resources/js/components/ui/sonner/Sonner.vue
+++ /dev/null
@@ -1,44 +0,0 @@
-<script lang="ts" setup>
-import type { ToasterProps } from "vue-sonner"
-import { CircleCheckIcon, InfoIcon, Loader2Icon, OctagonXIcon, TriangleAlertIcon, XIcon } from "@lucide/vue"
-import { Toaster as Sonner } from "vue-sonner"
-import { cn } from "@/lib/utils"
-
-import 'vue-sonner/style.css';
-
-const props = defineProps<ToasterProps>()
-</script>
-
-<template>
-  <Sonner
-    :class="cn('toaster group', props.class)"
-    :style="{
-      '--normal-bg': 'var(--popover)',
-      '--normal-text': 'var(--popover-foreground)',
-      '--normal-border': 'var(--border)',
-      '--border-radius': 'var(--radius)',
-    }"
-    v-bind="props"
-  >
-    <template #success-icon>
-      <CircleCheckIcon class="size-4" />
-    </template>
-    <template #info-icon>
-      <InfoIcon class="size-4" />
-    </template>
-    <template #warning-icon>
-      <TriangleAlertIcon class="size-4" />
-    </template>
-    <template #error-icon>
-      <OctagonXIcon class="size-4" />
-    </template>
-    <template #loading-icon>
-      <div>
-        <Loader2Icon class="size-4 animate-spin" />
-      </div>
-    </template>
-    <template #close-icon>
-      <XIcon class="size-4" />
-    </template>
-  </Sonner>
-</template>
diff --git a/resources/js/components/ui/sonner/index.ts b/resources/js/components/ui/sonner/index.ts
deleted file mode 100644
index 6673112..0000000
--- a/resources/js/components/ui/sonner/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as Toaster } from "./Sonner.vue"
diff --git a/resources/js/components/ui/spinner/Spinner.vue b/resources/js/components/ui/spinner/Spinner.vue
deleted file mode 100644
index e8e14d6..0000000
--- a/resources/js/components/ui/spinner/Spinner.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { Loader2Icon } from "@lucide/vue"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
-</script>
-
-<template>
-  <Loader2Icon
-    role="status"
-    aria-label="Loading"
-    :class="cn('size-4 animate-spin', props.class)"
-  />
-</template>
diff --git a/resources/js/components/ui/spinner/index.ts b/resources/js/components/ui/spinner/index.ts
deleted file mode 100644
index aa63007..0000000
--- a/resources/js/components/ui/spinner/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as Spinner } from "./Spinner.vue"
diff --git a/resources/js/components/ui/tooltip/Tooltip.vue b/resources/js/components/ui/tooltip/Tooltip.vue
deleted file mode 100644
index 2a393d6..0000000
--- a/resources/js/components/ui/tooltip/Tooltip.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<script setup lang="ts">
-import type { TooltipRootEmits, TooltipRootProps } from "reka-ui"
-import { TooltipRoot, useForwardPropsEmits } from "reka-ui"
-
-const props = defineProps<TooltipRootProps>()
-const emits = defineEmits<TooltipRootEmits>()
-
-const forwarded = useForwardPropsEmits(props, emits)
-</script>
-
-<template>
-  <TooltipRoot
-    v-slot="slotProps"
-    data-slot="tooltip"
-    v-bind="forwarded"
-  >
-    <slot v-bind="slotProps" />
-  </TooltipRoot>
-</template>
diff --git a/resources/js/components/ui/tooltip/TooltipContent.vue b/resources/js/components/ui/tooltip/TooltipContent.vue
deleted file mode 100644
index c5d2df9..0000000
--- a/resources/js/components/ui/tooltip/TooltipContent.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<script setup lang="ts">
-import type { TooltipContentEmits, TooltipContentProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { TooltipArrow, TooltipContent, TooltipPortal, useForwardPropsEmits } from "reka-ui"
-import { cn } from "@/lib/utils"
-
-defineOptions({
-  inheritAttrs: false,
-})
-
-const props = withDefaults(defineProps<TooltipContentProps & { class?: HTMLAttributes["class"] }>(), {
-  sideOffset: 4,
-})
-
-const emits = defineEmits<TooltipContentEmits>()
-
-const delegatedProps = reactiveOmit(props, "class")
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
-<template>
-  <TooltipPortal>
-    <TooltipContent
-      data-slot="tooltip-content"
-      v-bind="{ ...forwarded, ...$attrs }"
-      :class="cn('bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit rounded-md px-3 py-1.5 text-xs text-balance', props.class)"
-    >
-      <slot />
-
-      <TooltipArrow class="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
-    </TooltipContent>
-  </TooltipPortal>
-</template>
diff --git a/resources/js/components/ui/tooltip/TooltipProvider.vue b/resources/js/components/ui/tooltip/TooltipProvider.vue
deleted file mode 100644
index 395927d..0000000
--- a/resources/js/components/ui/tooltip/TooltipProvider.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<script setup lang="ts">
-import type { TooltipProviderProps } from "reka-ui"
-import { TooltipProvider } from "reka-ui"
-
-const props = withDefaults(defineProps<TooltipProviderProps>(), {
-  delayDuration: 0,
-})
-</script>
-
-<template>
-  <TooltipProvider v-bind="props">
-    <slot />
-  </TooltipProvider>
-</template>
diff --git a/resources/js/components/ui/tooltip/TooltipTrigger.vue b/resources/js/components/ui/tooltip/TooltipTrigger.vue
deleted file mode 100644
index 3332950..0000000
--- a/resources/js/components/ui/tooltip/TooltipTrigger.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<script setup lang="ts">
-import type { TooltipTriggerProps } from "reka-ui"
-import { TooltipTrigger } from "reka-ui"
-
-const props = defineProps<TooltipTriggerProps>()
-</script>
-
-<template>
-  <TooltipTrigger
-    data-slot="tooltip-trigger"
-    v-bind="props"
-  >
-    <slot />
-  </TooltipTrigger>
-</template>
diff --git a/resources/js/components/ui/tooltip/index.ts b/resources/js/components/ui/tooltip/index.ts
deleted file mode 100644
index 8f8d514..0000000
--- a/resources/js/components/ui/tooltip/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export { default as Tooltip } from "./Tooltip.vue"
-export { default as TooltipContent } from "./TooltipContent.vue"
-export { default as TooltipProvider } from "./TooltipProvider.vue"
-export { default as TooltipTrigger } from "./TooltipTrigger.vue"
diff --git a/resources/js/composables/useAppearance.ts b/resources/js/composables/useAppearance.ts
deleted file mode 100644
index 0568774..0000000
--- a/resources/js/composables/useAppearance.ts
+++ /dev/null
@@ -1,124 +0,0 @@
-import type { ComputedRef, Ref } from 'vue';
-import { computed, onMounted, ref } from 'vue';
-import type { Appearance, ResolvedAppearance } from '@/types';
-
-export type { Appearance, ResolvedAppearance };
-
-export type UseAppearanceReturn = {
-    appearance: Ref<Appearance>;
-    resolvedAppearance: ComputedRef<ResolvedAppearance>;
-    updateAppearance: (value: Appearance) => void;
-};
-
-export function updateTheme(value: Appearance): void {
-    if (typeof window === 'undefined') {
-        return;
-    }
-
-    if (value === 'system') {
-        const mediaQueryList = window.matchMedia(
-            '(prefers-color-scheme: dark)',
-        );
-        const systemTheme = mediaQueryList.matches ? 'dark' : 'light';
-
-        document.documentElement.classList.toggle(
-            'dark',
-            systemTheme === 'dark',
-        );
-    } else {
-        document.documentElement.classList.toggle('dark', value === 'dark');
-    }
-}
-
-const setCookie = (name: string, value: string, days = 365) => {
-    if (typeof document === 'undefined') {
-        return;
-    }
-
-    const maxAge = days * 24 * 60 * 60;
-
-    document.cookie = `${name}=${value};path=/;max-age=${maxAge};SameSite=Lax`;
-};
-
-const mediaQuery = () => {
-    if (typeof window === 'undefined') {
-        return null;
-    }
-
-    return window.matchMedia('(prefers-color-scheme: dark)');
-};
-
-const getStoredAppearance = () => {
-    if (typeof window === 'undefined') {
-        return null;
-    }
-
-    return localStorage.getItem('appearance') as Appearance | null;
-};
-
-const prefersDark = (): boolean => {
-    if (typeof window === 'undefined') {
-        return false;
-    }
-
-    return window.matchMedia('(prefers-color-scheme: dark)').matches;
-};
-
-const handleSystemThemeChange = () => {
-    const currentAppearance = getStoredAppearance();
-
-    updateTheme(currentAppearance || 'system');
-};
-
-export function initializeTheme(): void {
-    if (typeof window === 'undefined') {
-        return;
-    }
-
-    // Initialize theme from saved preference or default to system...
-    const savedAppearance = getStoredAppearance();
-    updateTheme(savedAppearance || 'system');
-
-    // Set up system theme change listener...
-    mediaQuery()?.addEventListener('change', handleSystemThemeChange);
-}
-
-const appearance = ref<Appearance>('system');
-
-export function useAppearance(): UseAppearanceReturn {
-    onMounted(() => {
-        const savedAppearance = localStorage.getItem(
-            'appearance',
-        ) as Appearance | null;
-
-        if (savedAppearance) {
-            appearance.value = savedAppearance;
-        }
-    });
-
-    const resolvedAppearance = computed<ResolvedAppearance>(() => {
-        if (appearance.value === 'system') {
-            return prefersDark() ? 'dark' : 'light';
-        }
-
-        return appearance.value;
-    });
-
-    function updateAppearance(value: Appearance) {
-        appearance.value = value;
-
-        // Store in localStorage for client-side persistence...
-        localStorage.setItem('appearance', value);
-
-        // Store in cookie for SSR...
-        setCookie('appearance', value);
-
-        updateTheme(value);
-    }
-
-    return {
-        appearance,
-        resolvedAppearance,
-        updateAppearance,
-    };
-}
diff --git a/resources/js/composables/useCurrentUrl.ts b/resources/js/composables/useCurrentUrl.ts
deleted file mode 100644
index 6e0c310..0000000
--- a/resources/js/composables/useCurrentUrl.ts
+++ /dev/null
@@ -1,82 +0,0 @@
-import type { InertiaLinkProps } from '@inertiajs/vue3';
-import { usePage } from '@inertiajs/vue3';
-import type { ComputedRef, DeepReadonly } from 'vue';
-import { computed, readonly } from 'vue';
-import { toUrl } from '@/lib/utils';
-
-export type UseCurrentUrlReturn = {
-    currentUrl: DeepReadonly<ComputedRef<string>>;
-    isCurrentUrl: (
-        urlToCheck: NonNullable<InertiaLinkProps['href']>,
-        currentUrl?: string,
-        startsWith?: boolean,
-    ) => boolean;
-    isCurrentOrParentUrl: (
-        urlToCheck: NonNullable<InertiaLinkProps['href']>,
-        currentUrl?: string,
-    ) => boolean;
-    whenCurrentUrl: <T, F = null>(
-        urlToCheck: NonNullable<InertiaLinkProps['href']>,
-        ifTrue: T,
-        ifFalse?: F,
-    ) => T | F;
-};
-
-const page = usePage();
-const currentUrlReactive = computed(
-    () =>
-        new URL(
-            page.url,
-            typeof window !== 'undefined'
-                ? window.location.origin
-                : 'http://localhost',
-        ).pathname,
-);
-
-export function useCurrentUrl(): UseCurrentUrlReturn {
-    function isCurrentUrl(
-        urlToCheck: NonNullable<InertiaLinkProps['href']>,
-        currentUrl?: string,
-        startsWith: boolean = false,
-    ) {
-        const urlToCompare = currentUrl ?? currentUrlReactive.value;
-        const urlString = toUrl(urlToCheck);
-
-        const comparePath = (path: string): boolean =>
-            startsWith ? urlToCompare.startsWith(path) : path === urlToCompare;
-
-        if (!urlString.startsWith('http')) {
-            return comparePath(urlString);
-        }
-
-        try {
-            const absoluteUrl = new URL(urlString);
-
-            return comparePath(absoluteUrl.pathname);
-        } catch {
-            return false;
-        }
-    }
-
-    function isCurrentOrParentUrl(
-        urlToCheck: NonNullable<InertiaLinkProps['href']>,
-        currentUrl?: string,
-    ) {
-        return isCurrentUrl(urlToCheck, currentUrl, true);
-    }
-
-    function whenCurrentUrl(
-        urlToCheck: NonNullable<InertiaLinkProps['href']>,
-        ifTrue: any,
-        ifFalse: any = null,
-    ) {
-        return isCurrentUrl(urlToCheck) ? ifTrue : ifFalse;
-    }
-
-    return {
-        currentUrl: readonly(currentUrlReactive),
-        isCurrentUrl,
-        isCurrentOrParentUrl,
-        whenCurrentUrl,
-    };
-}
diff --git a/resources/js/composables/useInitials.ts b/resources/js/composables/useInitials.ts
deleted file mode 100644
index bf2d215..0000000
--- a/resources/js/composables/useInitials.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-export type UseInitialsReturn = {
-    getInitials: (fullName?: string) => string;
-};
-
-export function getInitials(fullName?: string): string {
-    if (!fullName) {
-        return '';
-    }
-
-    const names = fullName.trim().split(' ');
-
-    if (names.length === 0) {
-        return '';
-    }
-
-    if (names.length === 1) {
-        return names[0].charAt(0).toUpperCase();
-    }
-
-    return `${names[0].charAt(0)}${names[names.length - 1].charAt(0)}`.toUpperCase();
-}
-
-export function useInitials(): UseInitialsReturn {
-    return { getInitials };
-}
diff --git a/resources/js/composables/useTwoFactorAuth.ts b/resources/js/composables/useTwoFactorAuth.ts
deleted file mode 100644
index a93b198..0000000
--- a/resources/js/composables/useTwoFactorAuth.ts
+++ /dev/null
@@ -1,112 +0,0 @@
-import { useHttp } from '@inertiajs/vue3';
-import type { ComputedRef, Ref } from 'vue';
-import { computed, ref } from 'vue';
-import { qrCode, recoveryCodes, secretKey } from '@/routes/two-factor';
-
-export type UseTwoFactorAuthReturn = {
-    qrCodeSvg: Ref<string | null>;
-    manualSetupKey: Ref<string | null>;
-    recoveryCodesList: Ref<string[]>;
-    errors: Ref<string[]>;
-    hasSetupData: ComputedRef<boolean>;
-    clearSetupData: () => void;
-    clearErrors: () => void;
-    clearTwoFactorAuthData: () => void;
-    fetchQrCode: () => Promise<void>;
-    fetchSetupKey: () => Promise<void>;
-    fetchSetupData: () => Promise<void>;
-    fetchRecoveryCodes: () => Promise<void>;
-};
-
-const errors = ref<string[]>([]);
-const manualSetupKey = ref<string | null>(null);
-const qrCodeSvg = ref<string | null>(null);
-const recoveryCodesList = ref<string[]>([]);
-
-const hasSetupData = computed<boolean>(
-    () => qrCodeSvg.value !== null && manualSetupKey.value !== null,
-);
-
-export const useTwoFactorAuth = (): UseTwoFactorAuthReturn => {
-    const http = useHttp();
-
-    const fetchQrCode = async (): Promise<void> => {
-        try {
-            const { svg } = (await http.submit(qrCode())) as {
-                svg: string;
-                url: string;
-            };
-
-            qrCodeSvg.value = svg;
-        } catch {
-            errors.value.push('Failed to fetch QR code');
-            qrCodeSvg.value = null;
-        }
-    };
-
-    const fetchSetupKey = async (): Promise<void> => {
-        try {
-            const { secretKey: key } = (await http.submit(secretKey())) as {
-                secretKey: string;
-            };
-
-            manualSetupKey.value = key;
-        } catch {
-            errors.value.push('Failed to fetch a setup key');
-            manualSetupKey.value = null;
-        }
-    };
-
-    const clearSetupData = (): void => {
-        manualSetupKey.value = null;
-        qrCodeSvg.value = null;
-        clearErrors();
-    };
-
-    const clearErrors = (): void => {
-        errors.value = [];
-    };
-
-    const clearTwoFactorAuthData = (): void => {
-        clearSetupData();
-        clearErrors();
-        recoveryCodesList.value = [];
-    };
-
-    const fetchRecoveryCodes = async (): Promise<void> => {
-        try {
-            clearErrors();
-            recoveryCodesList.value = (await http.submit(
-                recoveryCodes(),
-            )) as string[];
-        } catch {
-            errors.value.push('Failed to fetch recovery codes');
-            recoveryCodesList.value = [];
-        }
-    };
-
-    const fetchSetupData = async (): Promise<void> => {
-        try {
-            clearErrors();
-            await Promise.all([fetchQrCode(), fetchSetupKey()]);
-        } catch {
-            qrCodeSvg.value = null;
-            manualSetupKey.value = null;
-        }
-    };
-
-    return {
-        qrCodeSvg,
-        manualSetupKey,
-        recoveryCodesList,
-        errors,
-        hasSetupData,
-        clearSetupData,
-        clearErrors,
-        clearTwoFactorAuthData,
-        fetchQrCode,
-        fetchSetupKey,
-        fetchSetupData,
-        fetchRecoveryCodes,
-    };
-};
diff --git a/resources/js/layouts/AppLayout.vue b/resources/js/layouts/AppLayout.vue
deleted file mode 100644
index 627449c..0000000
--- a/resources/js/layouts/AppLayout.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<script setup lang="ts">
-import AppLayout from '@/layouts/app/AppSidebarLayout.vue';
-import type { BreadcrumbItem } from '@/types';
-
-const { breadcrumbs = [] } = defineProps<{
-    breadcrumbs?: BreadcrumbItem[];
-}>();
-</script>
-
-<template>
-    <AppLayout :breadcrumbs="breadcrumbs">
-        <slot />
-    </AppLayout>
-</template>
diff --git a/resources/js/layouts/AuthLayout.vue b/resources/js/layouts/AuthLayout.vue
deleted file mode 100644
index f496cf0..0000000
--- a/resources/js/layouts/AuthLayout.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<script setup lang="ts">
-import AuthLayout from '@/layouts/auth/AuthSimpleLayout.vue';
-
-const { title = '', description = '' } = defineProps<{
-    title?: string;
-    description?: string;
-}>();
-</script>
-
-<template>
-    <AuthLayout :title="title" :description="description">
-        <slot />
-    </AuthLayout>
-</template>
diff --git a/resources/js/layouts/MainLayout.vue b/resources/js/layouts/MainLayout.vue
new file mode 100644
index 0000000..0c8539c
--- /dev/null
+++ b/resources/js/layouts/MainLayout.vue
@@ -0,0 +1,201 @@
+<script setup lang="ts">
+import { Head } from '@inertiajs/vue3';
+import { ref } from 'vue';
+import { useDisplay } from 'vuetify';
+import Masthead from '@/components/Masthead.vue';
+
+defineProps<{
+    title?: string;
+}>();
+
+const { mobile } = useDisplay();
+const drawer = ref(false);
+
+const navItems = [
+    { label: 'Top Stories', href: '/' },
+    { label: 'World', href: '/world' },
+    { label: 'Technology', href: '/technology' },
+    { label: 'Business', href: '/business' },
+    { label: 'Science', href: '/science' },
+];
+
+const subItems = [
+    'Headlines',
+    'Australia',
+    'UK',
+    'USA',
+    'Politics',
+    'Climate',
+    'Health',
+    'Sport',
+    'Arts',
+];
+</script>
+
+<template>
+    <Head :title="title" />
+
+    <VApp>
+        <!-- Header -->
+        <VAppBar flat height="56" color="surface" border="b">
+            <VAppBarTitle>
+                <Masthead dark />
+            </VAppBarTitle>
+
+            <!-- Desktop nav -->
+            <template v-if="!mobile">
+                <div class="d-flex ga-2 mr-4">
+                    <VBtn variant="text" href="/login" class="nav-btn">
+                        Login
+                    </VBtn>
+                    <VBtn variant="outlined" href="/register" class="nav-btn">
+                        Register
+                    </VBtn>
+                </div>
+            </template>
+
+            <!-- Mobile hamburger -->
+            <VAppBarNavIcon v-else @click="drawer = !drawer" />
+        </VAppBar>
+
+        <VAppBar flat :height="37" color="surface" style="top: 56px">
+            <div class="red-rule" />
+            <div class="subbar">
+                <a
+                    v-for="item in subItems"
+                    :key="item"
+                    href="#"
+                    class="subbar-link"
+                >
+                    {{ item }}
+                </a>
+            </div>
+        </VAppBar>
+
+        <VNavigationDrawer v-model="drawer" temporary>
+            <VList>
+                <VListItem href="/login" title="Login" />
+                <VListItem href="/register" title="Register" />
+            </VList>
+        </VNavigationDrawer>
+
+        <!-- Main content -->
+        <VMain class="bg-background">
+            <VContainer class="content-well pa-6">
+                <slot />
+            </VContainer>
+        </VMain>
+
+        <!-- Footer -->
+        <VFooter app color="#111111" class="footer">
+            <Masthead small light />
+            <VSpacer />
+            <nav class="d-flex ga-4">
+                <a
+                    v-for="link in ['About', 'Donate']"
+                    :key="link"
+                    :href="`/${link.toLowerCase()}`"
+                    class="footer-link"
+                >
+                    {{ link }}
+                </a>
+            </nav>
+            <v-spacer />
+            <span class="footer-copy"
+                >© {{ new Date().getFullYear() }} DredgeNews</span
+            >
+        </VFooter>
+    </VApp>
+</template>
+
+<style scoped lang="sass">
+@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Inter:wght@400;500&display=swap')
+
+.nav-btn
+    font-family: 'Inter', sans-serif
+    font-size: 13px
+    font-weight: 500
+    letter-spacing: 0
+    text-transform: none
+
+
+.nav-link
+    font-family: 'Inter', sans-serif
+    font-size: 13px
+    font-weight: 500
+    color: #444
+    text-decoration: none
+    padding: 0 14px
+    height: 56px
+    display: flex
+    align-items: center
+    border-bottom: 3px solid transparent
+    transition: color 0.15s
+
+    &:hover
+        color: #111
+
+    &.active
+        color: #111
+        border-bottom-color: #C0392B
+
+.red-rule
+    height: 3px
+    background: #C0392B
+    width: 100%
+    position: absolute
+    top: 0
+    left: 0
+    z-index: 1
+
+.subbar
+    width: 100%
+    background: #fff
+    border-bottom: 1px solid #E8E8E8
+    display: flex
+    overflow-x: auto
+    padding: 0 1.5rem
+    position: absolute
+    top: 3px
+    left: 0
+
+    &::-webkit-scrollbar
+        display: none
+
+.subbar-link
+    font-family: 'Inter', sans-serif
+    font-size: 12px
+    color: #666
+    text-decoration: none
+    padding: 8px 12px
+    white-space: nowrap
+    border-bottom: 2px solid transparent
+    flex-shrink: 0
+
+    &:hover
+        color: #111
+
+    &.active
+        color: #111
+        border-bottom-color: #111
+
+.content-well
+    max-width: 1080px
+
+.footer
+    padding: 1.25rem 1.5rem
+    display: flex
+    align-items: center
+
+.footer-link
+    font-size: 12px
+    color: #aaa
+    text-decoration: none
+
+    &:hover
+        color: #fff
+
+.footer-copy
+    font-size: 11px
+    color: #666
+</style>
diff --git a/resources/js/layouts/app/AppHeaderLayout.vue b/resources/js/layouts/app/AppHeaderLayout.vue
deleted file mode 100644
index 6275201..0000000
--- a/resources/js/layouts/app/AppHeaderLayout.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<script setup lang="ts">
-import AppContent from '@/components/AppContent.vue';
-import AppHeader from '@/components/AppHeader.vue';
-import AppShell from '@/components/AppShell.vue';
-import { Toaster } from '@/components/ui/sonner';
-import type { BreadcrumbItem } from '@/types';
-
-type Props = {
-    breadcrumbs?: BreadcrumbItem[];
-};
-
-withDefaults(defineProps<Props>(), {
-    breadcrumbs: () => [],
-});
-</script>
-
-<template>
-    <AppShell variant="header">
-        <AppHeader :breadcrumbs="breadcrumbs" />
-        <AppContent variant="header">
-            <slot />
-        </AppContent>
-        <Toaster />
-    </AppShell>
-</template>
diff --git a/resources/js/layouts/app/AppSidebarLayout.vue b/resources/js/layouts/app/AppSidebarLayout.vue
deleted file mode 100644
index bbcb844..0000000
--- a/resources/js/layouts/app/AppSidebarLayout.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<script setup lang="ts">
-import AppContent from '@/components/AppContent.vue';
-import AppShell from '@/components/AppShell.vue';
-import AppSidebar from '@/components/AppSidebar.vue';
-import AppSidebarHeader from '@/components/AppSidebarHeader.vue';
-import { Toaster } from '@/components/ui/sonner';
-import type { BreadcrumbItem } from '@/types';
-
-type Props = {
-    breadcrumbs?: BreadcrumbItem[];
-};
-
-withDefaults(defineProps<Props>(), {
-    breadcrumbs: () => [],
-});
-</script>
-
-<template>
-    <AppShell variant="sidebar">
-        <AppSidebar />
-        <AppContent variant="sidebar" class="overflow-x-hidden">
-            <AppSidebarHeader :breadcrumbs="breadcrumbs" />
-            <slot />
-        </AppContent>
-        <Toaster />
-    </AppShell>
-</template>
diff --git a/resources/js/layouts/auth/AuthCardLayout.vue b/resources/js/layouts/auth/AuthCardLayout.vue
deleted file mode 100644
index 57afbb5..0000000
--- a/resources/js/layouts/auth/AuthCardLayout.vue
+++ /dev/null
@@ -1,50 +0,0 @@
-<script setup lang="ts">
-import { Link } from '@inertiajs/vue3';
-import AppLogoIcon from '@/components/AppLogoIcon.vue';
-import {
-    Card,
-    CardContent,
-    CardDescription,
-    CardHeader,
-    CardTitle,
-} from '@/components/ui/card';
-import { home } from '@/routes';
-
-defineProps<{
-    title?: string;
-    description?: string;
-}>();
-</script>
-
-<template>
-    <div
-        class="flex min-h-svh flex-col items-center justify-center gap-6 bg-muted p-6 md:p-10"
-    >
-        <div class="flex w-full max-w-md flex-col gap-6">
-            <Link
-                :href="home()"
-                class="flex items-center gap-2 self-center font-medium"
-            >
-                <div class="flex h-9 w-9 items-center justify-center">
-                    <AppLogoIcon
-                        class="size-9 fill-current text-black dark:text-white"
-                    />
-                </div>
-            </Link>
-
-            <div class="flex flex-col gap-6">
-                <Card class="rounded-xl">
-                    <CardHeader class="px-10 pt-8 pb-0 text-center">
-                        <CardTitle class="text-xl">{{ title }}</CardTitle>
-                        <CardDescription>
-                            {{ description }}
-                        </CardDescription>
-                    </CardHeader>
-                    <CardContent class="px-10 py-8">
-                        <slot />
-                    </CardContent>
-                </Card>
-            </div>
-        </div>
-    </div>
-</template>
diff --git a/resources/js/layouts/auth/AuthSimpleLayout.vue b/resources/js/layouts/auth/AuthSimpleLayout.vue
deleted file mode 100644
index b54c094..0000000
--- a/resources/js/layouts/auth/AuthSimpleLayout.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-<script setup lang="ts">
-import { Link } from '@inertiajs/vue3';
-import AppLogoIcon from '@/components/AppLogoIcon.vue';
-import { home } from '@/routes';
-
-defineProps<{
-    title?: string;
-    description?: string;
-}>();
-</script>
-
-<template>
-    <div
-        class="flex min-h-svh flex-col items-center justify-center gap-6 bg-background p-6 md:p-10"
-    >
-        <div class="w-full max-w-sm">
-            <div class="flex flex-col gap-8">
-                <div class="flex flex-col items-center gap-4">
-                    <Link
-                        :href="home()"
-                        class="flex flex-col items-center gap-2 font-medium"
-                    >
-                        <div
-                            class="mb-1 flex h-9 w-9 items-center justify-center rounded-md"
-                        >
-                            <AppLogoIcon
-                                class="size-9 fill-current text-[var(--foreground)] dark:text-white"
-                            />
-                        </div>
-                        <span class="sr-only">{{ title }}</span>
-                    </Link>
-                    <div class="space-y-2 text-center">
-                        <h1 class="text-xl font-medium">{{ title }}</h1>
-                        <p class="text-center text-sm text-muted-foreground">
-                            {{ description }}
-                        </p>
-                    </div>
-                </div>
-                <slot />
-            </div>
-        </div>
-    </div>
-</template>
diff --git a/resources/js/layouts/auth/AuthSplitLayout.vue b/resources/js/layouts/auth/AuthSplitLayout.vue
deleted file mode 100644
index 2d21dfc..0000000
--- a/resources/js/layouts/auth/AuthSplitLayout.vue
+++ /dev/null
@@ -1,47 +0,0 @@
-<script setup lang="ts">
-import { Link, usePage } from '@inertiajs/vue3';
-import AppLogoIcon from '@/components/AppLogoIcon.vue';
-import { home } from '@/routes';
-
-const page = usePage();
-const name = page.props.name;
-
-defineProps<{
-    title?: string;
-    description?: string;
-}>();
-</script>
-
-<template>
-    <div
-        class="relative grid h-dvh flex-col items-center justify-center px-8 sm:px-0 lg:max-w-none lg:grid-cols-2 lg:px-0"
-    >
-        <div
-            class="relative hidden h-full flex-col bg-muted p-10 text-white lg:flex dark:border-r"
-        >
-            <div class="absolute inset-0 bg-zinc-900" />
-            <Link
-                :href="home()"
-                class="relative z-20 flex items-center text-lg font-medium"
-            >
-                <AppLogoIcon class="mr-2 size-8 fill-current text-white" />
-                {{ name }}
-            </Link>
-        </div>
-        <div class="lg:p-8">
-            <div
-                class="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]"
-            >
-                <div class="flex flex-col space-y-2 text-center">
-                    <h1 class="text-xl font-medium tracking-tight" v-if="title">
-                        {{ title }}
-                    </h1>
-                    <p class="text-sm text-muted-foreground" v-if="description">
-                        {{ description }}
-                    </p>
-                </div>
-                <slot />
-            </div>
-        </div>
-    </div>
-</template>
diff --git a/resources/js/layouts/settings/Layout.vue b/resources/js/layouts/settings/Layout.vue
deleted file mode 100644
index ff4e1af..0000000
--- a/resources/js/layouts/settings/Layout.vue
+++ /dev/null
@@ -1,71 +0,0 @@
-<script setup lang="ts">
-import { Link } from '@inertiajs/vue3';
-import Heading from '@/components/Heading.vue';
-import { Button } from '@/components/ui/button';
-import { Separator } from '@/components/ui/separator';
-import { useCurrentUrl } from '@/composables/useCurrentUrl';
-import { toUrl } from '@/lib/utils';
-import { edit as editAppearance } from '@/routes/appearance';
-import { edit as editProfile } from '@/routes/profile';
-import { edit as editSecurity } from '@/routes/security';
-import type { NavItem } from '@/types';
-
-const sidebarNavItems: NavItem[] = [
-    {
-        title: 'Profile',
-        href: editProfile(),
-    },
-    {
-        title: 'Security',
-        href: editSecurity(),
-    },
-    {
-        title: 'Appearance',
-        href: editAppearance(),
-    },
-];
-
-const { isCurrentOrParentUrl } = useCurrentUrl();
-</script>
-
-<template>
-    <div class="px-4 py-6">
-        <Heading
-            title="Settings"
-            description="Manage your profile and account settings"
-        />
-
-        <div class="flex flex-col lg:flex-row lg:space-x-12">
-            <aside class="w-full max-w-xl lg:w-48">
-                <nav
-                    class="flex flex-col space-y-1 space-x-0"
-                    aria-label="Settings"
-                >
-                    <Button
-                        v-for="item in sidebarNavItems"
-                        :key="toUrl(item.href)"
-                        variant="ghost"
-                        :class="[
-                            'w-full justify-start',
-                            { 'bg-muted': isCurrentOrParentUrl(item.href) },
-                        ]"
-                        as-child
-                    >
-                        <Link :href="item.href">
-                            <component :is="item.icon" class="h-4 w-4" />
-                            {{ item.title }}
-                        </Link>
-                    </Button>
-                </nav>
-            </aside>
-
-            <Separator class="my-6 lg:hidden" />
-
-            <div class="flex-1 md:max-w-2xl">
-                <section class="max-w-xl space-y-12">
-                    <slot />
-                </section>
-            </div>
-        </div>
-    </div>
-</template>
diff --git a/resources/js/lib/flashToast.ts b/resources/js/lib/flashToast.ts
deleted file mode 100644
index a9e61ac..0000000
--- a/resources/js/lib/flashToast.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { router } from '@inertiajs/vue3';
-import { toast } from 'vue-sonner';
-import type { FlashToast } from '@/types/ui';
-
-export function initializeFlashToast(): void {
-    router.on('flash', (event) => {
-        const flash = (event as CustomEvent).detail?.flash;
-        const data = flash?.toast as FlashToast | undefined;
-
-        if (!data) {
-            return;
-        }
-
-        toast[data.type](data.message);
-    });
-}
diff --git a/resources/js/lib/utils.ts b/resources/js/lib/utils.ts
deleted file mode 100644
index c6249d3..0000000
--- a/resources/js/lib/utils.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import type { InertiaLinkProps } from '@inertiajs/vue3';
-import { clsx } from 'clsx';
-import type { ClassValue } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-
-export function cn(...inputs: ClassValue[]) {
-    return twMerge(clsx(inputs));
-}
-
-export function toUrl(href: NonNullable<InertiaLinkProps['href']>) {
-    return typeof href === 'string' ? href : href?.url;
-}
diff --git a/resources/js/pages/Dashboard.vue b/resources/js/pages/Dashboard.vue
deleted file mode 100644
index 449cfcf..0000000
--- a/resources/js/pages/Dashboard.vue
+++ /dev/null
@@ -1,47 +0,0 @@
-<script setup lang="ts">
-import { Head } from '@inertiajs/vue3';
-import PlaceholderPattern from '@/components/PlaceholderPattern.vue';
-import { dashboard } from '@/routes';
-
-defineOptions({
-    layout: {
-        breadcrumbs: [
-            {
-                title: 'Dashboard',
-                href: dashboard(),
-            },
-        ],
-    },
-});
-</script>
-
-<template>
-    <Head title="Dashboard" />
-
-    <div
-        class="flex h-full flex-1 flex-col gap-4 overflow-x-auto rounded-xl p-4"
-    >
-        <div class="grid auto-rows-min gap-4 md:grid-cols-3">
-            <div
-                class="relative aspect-video overflow-hidden rounded-xl border border-sidebar-border/70 dark:border-sidebar-border"
-            >
-                <PlaceholderPattern />
-            </div>
-            <div
-                class="relative aspect-video overflow-hidden rounded-xl border border-sidebar-border/70 dark:border-sidebar-border"
-            >
-                <PlaceholderPattern />
-            </div>
-            <div
-                class="relative aspect-video overflow-hidden rounded-xl border border-sidebar-border/70 dark:border-sidebar-border"
-            >
-                <PlaceholderPattern />
-            </div>
-        </div>
-        <div
-            class="relative min-h-[100vh] flex-1 rounded-xl border border-sidebar-border/70 md:min-h-min dark:border-sidebar-border"
-        >
-            <PlaceholderPattern />
-        </div>
-    </div>
-</template>
diff --git a/resources/js/pages/Index.vue b/resources/js/pages/Index.vue
new file mode 100644
index 0000000..c138aac
--- /dev/null
+++ b/resources/js/pages/Index.vue
@@ -0,0 +1,282 @@
+<script setup lang="ts">
+import MainLayout from '@/layouts/MainLayout.vue';
+
+defineOptions({
+    layout: MainLayout,
+});
+
+interface Story {
+    source: string;
+    time: string;
+    headline: string;
+    deck?: string;
+}
+
+interface Category {
+    label: string;
+    hero: boolean;
+    items: Story[];
+}
+
+const categories: Category[] = [
+    {
+        label: 'Headlines',
+        hero: true,
+        items: [
+            { source: 'Reuters', time: '42 minutes ago', headline: 'Leaders gather in Brussels as ceasefire talks enter critical third day', deck: 'Negotiators signalled cautious progress overnight, with both delegations agreeing to extend the informal moratorium on strikes.' },
+            { source: 'Financial Times', time: '1 hour ago', headline: 'Markets edge higher on softer-than-expected inflation print', deck: 'Central banks signal caution as core inflation falls for the second consecutive month across G7 economies.' },
+            { source: 'BBC News', time: '30 minutes ago', headline: 'Record heat across southern Europe for third week running' },
+            { source: 'AP News', time: '55 minutes ago', headline: 'Congress reaches last-minute deal to avert government shutdown' },
+            { source: 'The Guardian', time: '1 hour ago', headline: 'Tech giants face fresh scrutiny over data sharing practices' },
+        ],
+    },
+    {
+        label: 'Australia',
+        hero: false,
+        items: [
+            { source: 'ABC News', time: '8 minutes ago', headline: 'Treasurer signals pre-election budget revision in August' },
+            { source: 'Sydney Morning Herald', time: '1 hour ago', headline: 'East coast housing approvals fall for third consecutive quarter' },
+            { source: 'The Australian', time: '3 hours ago', headline: 'Queensland floods ease but thousands remain displaced' },
+        ],
+    },
+    {
+        label: 'UK',
+        hero: false,
+        items: [
+            { source: 'The Guardian', time: '20 minutes ago', headline: 'Prime Minister faces backbench revolt over public sector pay offer' },
+            { source: 'BBC News', time: '1 hour ago', headline: 'London rents rise for twelfth consecutive month as supply tightens' },
+            { source: 'The Times', time: '2 hours ago', headline: 'NHS waiting lists fall slightly but remain at historic highs' },
+        ],
+    },
+    {
+        label: 'USA',
+        hero: false,
+        items: [
+            { source: 'AP News', time: '15 minutes ago', headline: 'Congress reaches last-minute deal to avert government shutdown' },
+            { source: 'Washington Post', time: '50 minutes ago', headline: 'Federal Reserve signals caution on further rate adjustments' },
+            { source: 'New York Times', time: '2 hours ago', headline: 'Midwest storms leave hundreds of thousands without power' },
+        ],
+    },
+    {
+        label: 'Politics',
+        hero: false,
+        items: [
+            { source: 'Politico', time: '18 minutes ago', headline: 'Senate committee advances sweeping electoral reform bill' },
+            { source: 'The Hill', time: '55 minutes ago', headline: 'Opposition leader calls for early election amid polling slump' },
+            { source: 'AP News', time: '2 hours ago', headline: 'Foreign ministers meet in Geneva over disputed border region' },
+        ],
+    },
+    {
+        label: 'Climate',
+        hero: false,
+        items: [
+            { source: 'BBC News', time: '30 minutes ago', headline: 'Record heat across southern Europe for third week running' },
+            { source: 'The Guardian', time: '1 hour ago', headline: 'Arctic sea ice extent hits lowest July measurement on record' },
+            { source: 'Nature', time: '4 hours ago', headline: 'New modelling suggests 2°C target may be breached by 2031' },
+        ],
+    },
+    {
+        label: 'Health',
+        hero: false,
+        items: [
+            { source: 'Reuters', time: '25 minutes ago', headline: 'WHO recommends updated booster schedule ahead of winter' },
+            { source: 'New Scientist', time: '2 hours ago', headline: "Trial drug shows promise in slowing early-onset Alzheimer's" },
+            { source: 'The Lancet', time: '5 hours ago', headline: 'Childhood obesity rates plateau in high-income countries for first time' },
+        ],
+    },
+    {
+        label: 'Sport',
+        hero: false,
+        items: [
+            { source: 'The Guardian', time: '10 minutes ago', headline: 'Australian side advances after dramatic penalty shootout' },
+            { source: 'ESPN', time: '1 hour ago', headline: 'Transfer window: three clubs circle record-breaking midfielder' },
+            { source: 'Reuters', time: '3 hours ago', headline: 'Athletics world championships draw record television audience' },
+        ],
+    },
+    {
+        label: 'Arts',
+        hero: false,
+        items: [
+            { source: 'The New Yorker', time: '40 minutes ago', headline: 'Booker Prize longlist announced, debut novelists dominate' },
+            { source: 'Pitchfork', time: '2 hours ago', headline: 'Acclaimed composer releases first album in seven years' },
+            { source: 'Artforum', time: '6 hours ago', headline: 'Venice Biennale attendance surpasses pre-pandemic figures' },
+        ],
+    },
+];
+</script>
+
+<template>
+    <div class="feed">
+        <section v-for="category in categories" :key="category.label" class="category">
+            <div class="category-header">
+                <span class="category-label">{{ category.label }}</span>
+                <a href="#" class="category-more">More</a>
+            </div>
+
+            <!-- Hero layout for flagged categories -->
+            <template v-if="category.hero">
+                <div class="hero-grid">
+
+                    <a v-for="item in category.items.slice(0, 2)"
+                    :key="item.headline"
+                    href="#"
+                    class="hero-story"
+                    >
+                    <div class="story-img story-img--hero" />
+                    <div class="story-body">
+                        <div class="story-source">{{ item.source }}</div>
+                        <div class="story-headline story-headline--hero">{{ item.headline }}</div>
+                        <div v-if="item.deck" class="story-deck">{{ item.deck }}</div>
+                        <div class="story-time">{{ item.time }}</div>
+                    </div>
+                    </a>
+                </div>
+                <div class="story-grid">
+                    <a v-for="item in category.items.slice(2)"
+                    :key="item.headline"
+                    href="#"
+                    class="story"
+                    >
+                    <div class="story-img" />
+                    <div class="story-body">
+                        <div class="story-source">{{ item.source }}</div>
+                        <div class="story-headline">{{ item.headline }}</div>
+                        <div class="story-time">{{ item.time }}</div>
+                    </div>
+                    </a>
+                </div>
+            </template>
+
+            <!-- Standard 3-column grid -->
+            <div v-else class="story-grid">
+
+                <a v-for="item in category.items"
+                :key="item.headline"
+                href="#"
+                class="story"
+                >
+                <div class="story-img" />
+                <div class="story-body">
+                    <div class="story-source">{{ item.source }}</div>
+                    <div class="story-headline">{{ item.headline }}</div>
+                    <div class="story-time">{{ item.time }}</div>
+                </div>
+                </a>
+            </div>
+        </section>
+    </div>
+</template>
+
+<style scoped lang="sass">
+.feed
+    display: flex
+    flex-direction: column
+
+.category
+    border-bottom: 1px solid #E8E8E8
+    padding: 1.5rem 0
+
+    &:last-child
+        border-bottom: none
+
+.category-header
+    display: flex
+    align-items: baseline
+    justify-content: space-between
+    margin-bottom: 1rem
+
+.category-label
+    font-size: 10px
+    font-weight: 600
+    letter-spacing: 2px
+    text-transform: uppercase
+    color: #111
+
+.category-more
+    font-size: 12px
+    color: #C0392B
+    text-decoration: none
+
+    &:hover
+        text-decoration: underline
+
+// Hero grid (2 columns)
+.hero-grid
+    display: grid
+    grid-template-columns: 1fr 1fr
+    gap: 1em
+    background: #E8E8E8
+    margin-bottom: 1px
+
+.hero-story
+    background: #F7F7F5
+    text-decoration: none
+    display: flex
+    flex-direction: column
+
+    &:hover
+        background: #fff
+
+// Standard story grid (3 columns)
+.story-grid
+    display: grid
+    grid-template-columns: repeat(3, 1fr)
+    gap: 1px
+    background: #E8E8E8
+
+.story
+    background: #F7F7F5
+    text-decoration: none
+    display: flex
+    flex-direction: column
+
+    &:hover
+        background: #fff
+
+// Image placeholders
+.story-img
+    width: 100%
+    height: 110px
+    background: #DDDDD8
+    flex-shrink: 0
+
+    &--hero
+        height: 200px
+
+// Story body
+.story-body
+    padding: 0.85rem
+    display: flex
+    flex-direction: column
+    gap: 5px
+    flex: 1
+
+.story-source
+    font-size: 10px
+    font-weight: 600
+    letter-spacing: 1px
+    text-transform: uppercase
+    color: #C0392B
+
+.story-headline
+    font-family: Georgia, serif
+    font-size: 13px
+    font-weight: 700
+    color: #111
+    line-height: 1.35
+
+    &--hero
+        font-size: 18px
+        line-height: 1.25
+
+.story-deck
+    font-size: 12px
+    color: #555
+    line-height: 1.5
+
+.story-time
+    font-size: 10px
+    color: #999
+    margin-top: auto
+    padding-top: 4px
+</style>
diff --git a/resources/js/pages/Welcome.vue b/resources/js/pages/Welcome.vue
deleted file mode 100644
index e345578..0000000
--- a/resources/js/pages/Welcome.vue
+++ /dev/null
@@ -1,443 +0,0 @@
-<script setup lang="ts">
-import { Head, Link } from '@inertiajs/vue3';
-import { dashboard, login } from '@/routes';
-import { register } from '@/routes';
-</script>
-
-<template>
-    <Head title="Welcome">
-        <link rel="preconnect" href="https://rsms.me/" />
-        <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
-    </Head>
-    <div
-        class="flex min-h-screen flex-col items-center bg-[#FDFDFC] p-6 text-[#1b1b18] lg:justify-center lg:p-8 dark:bg-[#0a0a0a]"
-    >
-        <header
-            class="mb-6 w-full max-w-[335px] text-sm not-has-[nav]:hidden lg:max-w-4xl"
-        >
-            <nav class="flex items-center justify-end gap-4">
-                <Link
-                    v-if="$page.props.auth.user"
-                    :href="dashboard()"
-                    class="inline-block rounded-sm border border-[#19140035] px-5 py-1.5 text-sm leading-normal text-[#1b1b18] hover:border-[#1915014a] dark:border-[#3E3E3A] dark:text-[#EDEDEC] dark:hover:border-[#62605b]"
-                >
-                    Dashboard
-                </Link>
-                <template v-else>
-                    <Link
-                        :href="login()"
-                        class="inline-block rounded-sm border border-transparent px-5 py-1.5 text-sm leading-normal text-[#1b1b18] hover:border-[#19140035] dark:text-[#EDEDEC] dark:hover:border-[#3E3E3A]"
-                    >
-                        Log in
-                    </Link>
-                    <Link
-                        :href="register()"
-                        class="inline-block rounded-sm border border-[#19140035] px-5 py-1.5 text-sm leading-normal text-[#1b1b18] hover:border-[#1915014a] dark:border-[#3E3E3A] dark:text-[#EDEDEC] dark:hover:border-[#62605b]"
-                    >
-                        Register
-                    </Link>
-                </template>
-            </nav>
-        </header>
-        <div
-            class="flex w-full items-center justify-center opacity-100 transition-opacity duration-750 lg:grow starting:opacity-0"
-        >
-            <main
-                class="flex w-full max-w-[335px] flex-col-reverse overflow-hidden rounded-lg lg:max-w-4xl lg:flex-row"
-            >
-                <div
-                    class="flex-1 rounded-br-lg rounded-bl-lg bg-white p-6 pb-12 text-[13px] leading-[20px] shadow-[inset_0px_0px_0px_1px_rgba(26,26,0,0.16)] lg:rounded-tl-lg lg:rounded-br-none lg:p-20 dark:bg-[#161615] dark:text-[#EDEDEC] dark:shadow-[inset_0px_0px_0px_1px_#fffaed2d]"
-                >
-                    <h1 class="mb-1 font-medium">Let's get started</h1>
-                    <p class="mb-2 text-[#706f6c] dark:text-[#A1A09A]">
-                        Laravel has an incredibly rich ecosystem. <br />We
-                        suggest starting with the following.
-                    </p>
-                    <ul class="mb-4 flex flex-col lg:mb-6">
-                        <li
-                            class="relative flex items-center gap-4 py-2 before:absolute before:top-1/2 before:bottom-0 before:left-[0.4rem] before:border-l before:border-[#e3e3e0] dark:before:border-[#3E3E3A]"
-                        >
-                            <span
-                                class="relative bg-white py-1 dark:bg-[#161615]"
-                            >
-                                <span
-                                    class="flex h-3.5 w-3.5 items-center justify-center rounded-full border border-[#e3e3e0] bg-[#FDFDFC] shadow-[0px_0px_1px_0px_rgba(0,0,0,0.03),0px_1px_2px_0px_rgba(0,0,0,0.06)] dark:border-[#3E3E3A] dark:bg-[#161615]"
-                                >
-                                    <span
-                                        class="h-1.5 w-1.5 rounded-full bg-[#dbdbd7] dark:bg-[#3E3E3A]"
-                                    />
-                                </span>
-                            </span>
-                            <span>
-                                Read the
-                                <a
-                                    href="https://laravel.com/docs"
-                                    target="_blank"
-                                    class="ml-1 inline-flex items-center space-x-1 font-medium text-[#f53003] underline underline-offset-4 dark:text-[#FF4433]"
-                                >
-                                    <span>Documentation</span>
-                                    <svg
-                                        width="10"
-                                        height="11"
-                                        viewBox="0 0 10 11"
-                                        fill="none"
-                                        xmlns="http://www.w3.org/2000/svg"
-                                        class="h-2.5 w-2.5"
-                                    >
-                                        <path
-                                            d="M7.70833 6.95834V2.79167H3.54167M2.5 8L7.5 3.00001"
-                                            stroke="currentColor"
-                                            stroke-linecap="square"
-                                        />
-                                    </svg>
-                                </a>
-                            </span>
-                        </li>
-                        <li
-                            class="relative flex items-center gap-4 py-2 before:absolute before:top-0 before:bottom-1/2 before:left-[0.4rem] before:border-l before:border-[#e3e3e0] dark:before:border-[#3E3E3A]"
-                        >
-                            <span
-                                class="relative bg-white py-1 dark:bg-[#161615]"
-                            >
-                                <span
-                                    class="flex h-3.5 w-3.5 items-center justify-center rounded-full border border-[#e3e3e0] bg-[#FDFDFC] shadow-[0px_0px_1px_0px_rgba(0,0,0,0.03),0px_1px_2px_0px_rgba(0,0,0,0.06)] dark:border-[#3E3E3A] dark:bg-[#161615]"
-                                >
-                                    <span
-                                        class="h-1.5 w-1.5 rounded-full bg-[#dbdbd7] dark:bg-[#3E3E3A]"
-                                    />
-                                </span>
-                            </span>
-                            <span>
-                                Watch video tutorials at
-                                <a
-                                    href="https://laracasts.com"
-                                    target="_blank"
-                                    class="ml-1 inline-flex items-center space-x-1 font-medium text-[#f53003] underline underline-offset-4 dark:text-[#FF4433]"
-                                >
-                                    <span>Laracasts</span>
-                                    <svg
-                                        width="10"
-                                        height="11"
-                                        viewBox="0 0 10 11"
-                                        fill="none"
-                                        xmlns="http://www.w3.org/2000/svg"
-                                        class="h-2.5 w-2.5"
-                                    >
-                                        <path
-                                            d="M7.70833 6.95834V2.79167H3.54167M2.5 8L7.5 3.00001"
-                                            stroke="currentColor"
-                                            stroke-linecap="square"
-                                        />
-                                    </svg>
-                                </a>
-                            </span>
-                        </li>
-                    </ul>
-                    <ul class="flex gap-3 text-sm leading-normal">
-                        <li>
-                            <a
-                                href="https://cloud.laravel.com"
-                                target="_blank"
-                                class="inline-block rounded-sm border border-black bg-[#1b1b18] px-5 py-1.5 text-sm leading-normal text-white hover:border-black hover:bg-black dark:border-[#eeeeec] dark:bg-[#eeeeec] dark:text-[#1C1C1A] dark:hover:border-white dark:hover:bg-white"
-                            >
-                                Deploy now
-                            </a>
-                        </li>
-                    </ul>
-                </div>
-                <div
-                    class="relative -mb-px aspect-[335/364] w-full shrink-0 overflow-hidden rounded-t-lg bg-[#fff2f2] lg:mb-0 lg:-ml-px lg:aspect-auto lg:w-[438px] lg:rounded-t-none lg:rounded-r-lg dark:bg-[#1D0002]"
-                >
-                    <!-- Laravel Logo -->
-                    <svg
-                        class="w-full max-w-none translate-y-0 text-[#F53003] opacity-100 transition-all duration-750 dark:text-[#F61500] starting:opacity-0 motion-safe:starting:translate-y-6"
-                        viewBox="0 0 438 104"
-                        fill="none"
-                        xmlns="http://www.w3.org/2000/svg"
-                    >
-                        <path
-                            d="M17.2036 -3H0V102.197H49.5189V86.7187H17.2036V-3Z"
-                            fill="currentColor"
-                        />
-                        <path
-                            d="M110.256 41.6337C108.061 38.1275 104.945 35.3731 100.905 33.3681C96.8667 31.3647 92.8016 30.3618 88.7131 30.3618C83.4247 30.3618 78.5885 31.3389 74.201 33.2923C69.8111 35.2456 66.0474 37.928 62.9059 41.3333C59.7643 44.7401 57.3198 48.6726 55.5754 53.1293C53.8287 57.589 52.9572 62.274 52.9572 67.1813C52.9572 72.1925 53.8287 76.8995 55.5754 81.3069C57.3191 85.7173 59.7636 89.6241 62.9059 93.0293C66.0474 96.4361 69.8119 99.1155 74.201 101.069C78.5885 103.022 83.4247 103.999 88.7131 103.999C92.8016 103.999 96.8667 102.997 100.905 100.994C104.945 98.9911 108.061 96.2359 110.256 92.7282V102.195H126.563V32.1642H110.256V41.6337ZM108.76 75.7472C107.762 78.4531 106.366 80.8078 104.572 82.8112C102.776 84.8161 100.606 86.4183 98.0637 87.6206C95.5202 88.823 92.7004 89.4238 89.6103 89.4238C86.5178 89.4238 83.7252 88.823 81.2324 87.6206C78.7388 86.4183 76.5949 84.8161 74.7998 82.8112C73.004 80.8078 71.6319 78.4531 70.6856 75.7472C69.7356 73.0421 69.2644 70.1868 69.2644 67.1821C69.2644 64.1758 69.7356 61.3205 70.6856 58.6154C71.6319 55.9102 73.004 53.5571 74.7998 51.5522C76.5949 49.5495 78.738 47.9451 81.2324 46.7427C83.7252 45.5404 86.5178 44.9396 89.6103 44.9396C92.7012 44.9396 95.5202 45.5404 98.0637 46.7427C100.606 47.9451 102.776 49.5487 104.572 51.5522C106.367 53.5571 107.762 55.9102 108.76 58.6154C109.756 61.3205 110.256 64.1758 110.256 67.1821C110.256 70.1868 109.756 73.0421 108.76 75.7472Z"
-                            fill="currentColor"
-                        />
-                        <path
-                            d="M242.805 41.6337C240.611 38.1275 237.494 35.3731 233.455 33.3681C229.416 31.3647 225.351 30.3618 221.262 30.3618C215.974 30.3618 211.138 31.3389 206.75 33.2923C202.36 35.2456 198.597 37.928 195.455 41.3333C192.314 44.7401 189.869 48.6726 188.125 53.1293C186.378 57.589 185.507 62.274 185.507 67.1813C185.507 72.1925 186.378 76.8995 188.125 81.3069C189.868 85.7173 192.313 89.6241 195.455 93.0293C198.597 96.4361 202.361 99.1155 206.75 101.069C211.138 103.022 215.974 103.999 221.262 103.999C225.351 103.999 229.416 102.997 233.455 100.994C237.494 98.9911 240.611 96.2359 242.805 92.7282V102.195H259.112V32.1642H242.805V41.6337ZM241.31 75.7472C240.312 78.4531 238.916 80.8078 237.122 82.8112C235.326 84.8161 233.156 86.4183 230.614 87.6206C228.07 88.823 225.251 89.4238 222.16 89.4238C219.068 89.4238 216.275 88.823 213.782 87.6206C211.289 86.4183 209.145 84.8161 207.35 82.8112C205.554 80.8078 204.182 78.4531 203.236 75.7472C202.286 73.0421 201.814 70.1868 201.814 67.1821C201.814 64.1758 202.286 61.3205 203.236 58.6154C204.182 55.9102 205.554 53.5571 207.35 51.5522C209.145 49.5495 211.288 47.9451 213.782 46.7427C216.275 45.5404 219.068 44.9396 222.16 44.9396C225.251 44.9396 228.07 45.5404 230.614 46.7427C233.156 47.9451 235.326 49.5487 237.122 51.5522C238.917 53.5571 240.312 55.9102 241.31 58.6154C242.306 61.3205 242.806 64.1758 242.806 67.1821C242.805 70.1868 242.305 73.0421 241.31 75.7472Z"
-                            fill="currentColor"
-                        />
-                        <path
-                            d="M438 -3H421.694V102.197H438V-3Z"
-                            fill="currentColor"
-                        />
-                        <path
-                            d="M139.43 102.197H155.735V48.2834H183.712V32.1665H139.43V102.197Z"
-                            fill="currentColor"
-                        />
-                        <path
-                            d="M324.49 32.1665L303.995 85.794L283.498 32.1665H266.983L293.748 102.197H314.242L341.006 32.1665H324.49Z"
-                            fill="currentColor"
-                        />
-                        <path
-                            d="M376.571 30.3656C356.603 30.3656 340.797 46.8497 340.797 67.1828C340.797 89.6597 356.094 104 378.661 104C391.29 104 399.354 99.1488 409.206 88.5848L398.189 80.0226C398.183 80.031 389.874 90.9895 377.468 90.9895C363.048 90.9895 356.977 79.3111 356.977 73.269H411.075C413.917 50.1328 398.775 30.3656 376.571 30.3656ZM357.02 61.0967C357.145 59.7487 359.023 43.3761 376.442 43.3761C393.861 43.3761 395.978 59.7464 396.099 61.0967H357.02Z"
-                            fill="currentColor"
-                        />
-                    </svg>
-
-                    <!-- 13 -->
-                    <svg
-                        class="relative -mt-[6.6rem] -ml-8 w-[438px] max-w-none [--stroke-color:#1B1B18] lg:ml-0 dark:[--stroke-color:#FF750F]"
-                        viewBox="0 0 440 392"
-                        fill="none"
-                        xmlns="http://www.w3.org/2000/svg"
-                    >
-                        <g
-                            class="text-[#1B1B18] opacity-100 mix-blend-darken transition-all delay-300 duration-750 dark:text-black dark:mix-blend-normal starting:opacity-0"
-                        >
-                            <mask
-                                id="path-1-mask"
-                                maskUnits="userSpaceOnUse"
-                                x="-0.328613"
-                                y="103"
-                                width="338"
-                                height="299"
-                                fill="black"
-                            >
-                                <rect
-                                    fill="white"
-                                    x="-0.328613"
-                                    y="103"
-                                    width="338"
-                                    height="299"
-                                />
-                                <path
-                                    d="M234.936 400.8C204.136 400.8 178.936 392.4 159.336 375.6C140.136 358.8 130.536 337 130.536 310.2H200.736C200.736 318.2 203.736 324.8 209.736 330C215.736 335.2 223.736 337.8 233.736 337.8C243.336 337.8 251.136 335 257.136 329.4C263.536 323.8 266.736 316.6 266.736 307.8C266.736 299.8 263.936 293.2 258.336 288C252.736 282.8 245.536 280.2 236.736 280.2H199.536V218.4H236.736C243.536 218.4 249.336 216 254.136 211.2C258.936 206.4 261.336 200.4 261.336 193.2C261.336 184.8 258.736 178.2 253.536 173.4C248.336 168.6 241.736 166.2 233.736 166.2C226.536 166.2 220.336 168.4 215.136 172.8C210.336 177.2 207.936 182.8 207.936 189.6H141.336C141.336 164.8 150.136 144.6 167.736 129C185.336 113 207.936 105 235.536 105C263.136 105 285.536 112.2 302.736 126.6C320.336 141 329.136 160 329.136 183.6C329.136 200.8 324.536 214.8 315.336 225.6C306.136 236 294.336 243.2 279.936 247.2C297.136 252 310.736 260.2 320.736 271.8C331.136 283.4 336.336 298 336.336 315.6C336.336 340.4 326.936 360.8 308.136 376.8C289.336 392.8 264.936 400.8 234.936 400.8Z"
-                                />
-                                <path
-                                    d="M26.8714 167.6H1.67139V105.2H94.6714V400.2H26.8714V167.6Z"
-                                />
-                            </mask>
-                            <path
-                                d="M234.936 400.8C204.136 400.8 178.936 392.4 159.336 375.6C140.136 358.8 130.536 337 130.536 310.2H200.736C200.736 318.2 203.736 324.8 209.736 330C215.736 335.2 223.736 337.8 233.736 337.8C243.336 337.8 251.136 335 257.136 329.4C263.536 323.8 266.736 316.6 266.736 307.8C266.736 299.8 263.936 293.2 258.336 288C252.736 282.8 245.536 280.2 236.736 280.2H199.536V218.4H236.736C243.536 218.4 249.336 216 254.136 211.2C258.936 206.4 261.336 200.4 261.336 193.2C261.336 184.8 258.736 178.2 253.536 173.4C248.336 168.6 241.736 166.2 233.736 166.2C226.536 166.2 220.336 168.4 215.136 172.8C210.336 177.2 207.936 182.8 207.936 189.6H141.336C141.336 164.8 150.136 144.6 167.736 129C185.336 113 207.936 105 235.536 105C263.136 105 285.536 112.2 302.736 126.6C320.336 141 329.136 160 329.136 183.6C329.136 200.8 324.536 214.8 315.336 225.6C306.136 236 294.336 243.2 279.936 247.2C297.136 252 310.736 260.2 320.736 271.8C331.136 283.4 336.336 298 336.336 315.6C336.336 340.4 326.936 360.8 308.136 376.8C289.336 392.8 264.936 400.8 234.936 400.8Z"
-                                fill="currentColor"
-                            />
-                            <path
-                                d="M26.8714 167.6H1.67139V105.2H94.6714V400.2H26.8714V167.6Z"
-                                fill="currentColor"
-                            />
-                            <path
-                                d="M234.936 400.8C204.136 400.8 178.936 392.4 159.336 375.6C140.136 358.8 130.536 337 130.536 310.2H200.736C200.736 318.2 203.736 324.8 209.736 330C215.736 335.2 223.736 337.8 233.736 337.8C243.336 337.8 251.136 335 257.136 329.4C263.536 323.8 266.736 316.6 266.736 307.8C266.736 299.8 263.936 293.2 258.336 288C252.736 282.8 245.536 280.2 236.736 280.2H199.536V218.4H236.736C243.536 218.4 249.336 216 254.136 211.2C258.936 206.4 261.336 200.4 261.336 193.2C261.336 184.8 258.736 178.2 253.536 173.4C248.336 168.6 241.736 166.2 233.736 166.2C226.536 166.2 220.336 168.4 215.136 172.8C210.336 177.2 207.936 182.8 207.936 189.6H141.336C141.336 164.8 150.136 144.6 167.736 129C185.336 113 207.936 105 235.536 105C263.136 105 285.536 112.2 302.736 126.6C320.336 141 329.136 160 329.136 183.6C329.136 200.8 324.536 214.8 315.336 225.6C306.136 236 294.336 243.2 279.936 247.2C297.136 252 310.736 260.2 320.736 271.8C331.136 283.4 336.336 298 336.336 315.6C336.336 340.4 326.936 360.8 308.136 376.8C289.336 392.8 264.936 400.8 234.936 400.8Z"
-                                stroke="var(--stroke-color)"
-                                stroke-width="2.4"
-                                mask="url(#path-1-mask)"
-                            />
-                            <path
-                                d="M26.8714 167.6H1.67139V105.2H94.6714V400.2H26.8714V167.6Z"
-                                stroke="var(--stroke-color)"
-                                stroke-width="2.4"
-                                mask="url(#path-1-mask)"
-                            />
-                        </g>
-
-                        <g
-                            class="text-[#F3BEC7] opacity-100 transition-all delay-400 duration-750 dark:text-[#4B0600] starting:opacity-0 motion-safe:starting:-translate-x-[26px]"
-                        >
-                            <mask
-                                id="path-2-mask"
-                                maskUnits="userSpaceOnUse"
-                                x="25.3357"
-                                y="103"
-                                width="338"
-                                height="299"
-                                fill="black"
-                            >
-                                <rect
-                                    fill="white"
-                                    x="25.3357"
-                                    y="103"
-                                    width="338"
-                                    height="299"
-                                />
-                                <path
-                                    d="M260.6 400.8C229.8 400.8 204.6 392.4 185 375.6C165.8 358.8 156.2 337 156.2 310.2H226.4C226.4 318.2 229.4 324.8 235.4 330C241.4 335.2 249.4 337.8 259.4 337.8C269 337.8 276.8 335 282.8 329.4C289.2 323.8 292.4 316.6 292.4 307.8C292.4 299.8 289.6 293.2 284 288C278.4 282.8 271.2 280.2 262.4 280.2H225.2V218.4H262.4C269.2 218.4 275 216 279.8 211.2C284.6 206.4 287 200.4 287 193.2C287 184.8 284.4 178.2 279.2 173.4C274 168.6 267.4 166.2 259.4 166.2C252.2 166.2 246 168.4 240.8 172.8C236 177.2 233.6 182.8 233.6 189.6H167C167 164.8 175.8 144.6 193.4 129C211 113 233.6 105 261.2 105C288.8 105 311.2 112.2 328.4 126.6C346 141 354.8 160 354.8 183.6C354.8 200.8 350.2 214.8 341 225.6C331.8 236 320 243.2 305.6 247.2C322.8 252 336.4 260.2 346.4 271.8C356.8 283.4 362 298 362 315.6C362 340.4 352.6 360.8 333.8 376.8C315 392.8 290.6 400.8 260.6 400.8Z"
-                                />
-                                <path
-                                    d="M52.5357 167.6H27.3357V105.2H120.336V400.2H52.5357V167.6Z"
-                                />
-                            </mask>
-                            <path
-                                d="M260.6 400.8C229.8 400.8 204.6 392.4 185 375.6C165.8 358.8 156.2 337 156.2 310.2H226.4C226.4 318.2 229.4 324.8 235.4 330C241.4 335.2 249.4 337.8 259.4 337.8C269 337.8 276.8 335 282.8 329.4C289.2 323.8 292.4 316.6 292.4 307.8C292.4 299.8 289.6 293.2 284 288C278.4 282.8 271.2 280.2 262.4 280.2H225.2V218.4H262.4C269.2 218.4 275 216 279.8 211.2C284.6 206.4 287 200.4 287 193.2C287 184.8 284.4 178.2 279.2 173.4C274 168.6 267.4 166.2 259.4 166.2C252.2 166.2 246 168.4 240.8 172.8C236 177.2 233.6 182.8 233.6 189.6H167C167 164.8 175.8 144.6 193.4 129C211 113 233.6 105 261.2 105C288.8 105 311.2 112.2 328.4 126.6C346 141 354.8 160 354.8 183.6C354.8 200.8 350.2 214.8 341 225.6C331.8 236 320 243.2 305.6 247.2C322.8 252 336.4 260.2 346.4 271.8C356.8 283.4 362 298 362 315.6C362 340.4 352.6 360.8 333.8 376.8C315 392.8 290.6 400.8 260.6 400.8Z"
-                                fill="currentColor"
-                            />
-                            <path
-                                d="M52.5357 167.6H27.3357V105.2H120.336V400.2H52.5357V167.6Z"
-                                fill="currentColor"
-                            />
-                            <path
-                                d="M260.6 400.8C229.8 400.8 204.6 392.4 185 375.6C165.8 358.8 156.2 337 156.2 310.2H226.4C226.4 318.2 229.4 324.8 235.4 330C241.4 335.2 249.4 337.8 259.4 337.8C269 337.8 276.8 335 282.8 329.4C289.2 323.8 292.4 316.6 292.4 307.8C292.4 299.8 289.6 293.2 284 288C278.4 282.8 271.2 280.2 262.4 280.2H225.2V218.4H262.4C269.2 218.4 275 216 279.8 211.2C284.6 206.4 287 200.4 287 193.2C287 184.8 284.4 178.2 279.2 173.4C274 168.6 267.4 166.2 259.4 166.2C252.2 166.2 246 168.4 240.8 172.8C236 177.2 233.6 182.8 233.6 189.6H167C167 164.8 175.8 144.6 193.4 129C211 113 233.6 105 261.2 105C288.8 105 311.2 112.2 328.4 126.6C346 141 354.8 160 354.8 183.6C354.8 200.8 350.2 214.8 341 225.6C331.8 236 320 243.2 305.6 247.2C322.8 252 336.4 260.2 346.4 271.8C356.8 283.4 362 298 362 315.6C362 340.4 352.6 360.8 333.8 376.8C315 392.8 290.6 400.8 260.6 400.8Z"
-                                stroke="var(--stroke-color)"
-                                stroke-width="2.4"
-                                mask="url(#path-2-mask)"
-                            />
-                            <path
-                                d="M52.5357 167.6H27.3357V105.2H120.336V400.2H52.5357V167.6Z"
-                                stroke="var(--stroke-color)"
-                                stroke-width="2.4"
-                                mask="url(#path-2-mask)"
-                            />
-                        </g>
-
-                        <g
-                            class="text-[#F8B803] opacity-100 mix-blend-color transition-all delay-400 duration-750 dark:text-[#391800] dark:mix-blend-hard-light starting:opacity-0 motion-safe:starting:-translate-x-[51px]"
-                        >
-                            <mask
-                                id="path-3-mask"
-                                maskUnits="userSpaceOnUse"
-                                x="51"
-                                y="103"
-                                width="338"
-                                height="299"
-                                fill="black"
-                            >
-                                <rect
-                                    fill="white"
-                                    x="51"
-                                    y="103"
-                                    width="338"
-                                    height="299"
-                                />
-                                <path
-                                    d="M286.264 400.8C255.464 400.8 230.264 392.4 210.664 375.6C191.464 358.8 181.864 337 181.864 310.2H252.064C252.064 318.2 255.064 324.8 261.064 330C267.064 335.2 275.064 337.8 285.064 337.8C294.664 337.8 302.464 335 308.464 329.4C314.864 323.8 318.064 316.6 318.064 307.8C318.064 299.8 315.264 293.2 309.664 288C304.064 282.8 296.864 280.2 288.064 280.2H250.864V218.4H288.064C294.864 218.4 300.664 216 305.464 211.2C310.264 206.4 312.664 200.4 312.664 193.2C312.664 184.8 310.064 178.2 304.864 173.4C299.664 168.6 293.064 166.2 285.064 166.2C277.864 166.2 271.664 168.4 266.464 172.8C261.664 177.2 259.264 182.8 259.264 189.6H192.664C192.664 164.8 201.464 144.6 219.064 129C236.664 113 259.264 105 286.864 105C314.464 105 336.864 112.2 354.064 126.6C371.664 141 380.464 160 380.464 183.6C380.464 200.8 375.864 214.8 366.664 225.6C357.464 236 345.664 243.2 331.264 247.2C348.464 252 362.064 260.2 372.064 271.8C382.464 283.4 387.664 298 387.664 315.6C387.664 340.4 378.264 360.8 359.464 376.8C340.664 392.8 316.264 400.8 286.264 400.8Z"
-                                />
-                                <path
-                                    d="M78.2 167.6H53V105.2H146V400.2H78.2V167.6Z"
-                                />
-                            </mask>
-                            <path
-                                d="M286.264 400.8C255.464 400.8 230.264 392.4 210.664 375.6C191.464 358.8 181.864 337 181.864 310.2H252.064C252.064 318.2 255.064 324.8 261.064 330C267.064 335.2 275.064 337.8 285.064 337.8C294.664 337.8 302.464 335 308.464 329.4C314.864 323.8 318.064 316.6 318.064 307.8C318.064 299.8 315.264 293.2 309.664 288C304.064 282.8 296.864 280.2 288.064 280.2H250.864V218.4H288.064C294.864 218.4 300.664 216 305.464 211.2C310.264 206.4 312.664 200.4 312.664 193.2C312.664 184.8 310.064 178.2 304.864 173.4C299.664 168.6 293.064 166.2 285.064 166.2C277.864 166.2 271.664 168.4 266.464 172.8C261.664 177.2 259.264 182.8 259.264 189.6H192.664C192.664 164.8 201.464 144.6 219.064 129C236.664 113 259.264 105 286.864 105C314.464 105 336.864 112.2 354.064 126.6C371.664 141 380.464 160 380.464 183.6C380.464 200.8 375.864 214.8 366.664 225.6C357.464 236 345.664 243.2 331.264 247.2C348.464 252 362.064 260.2 372.064 271.8C382.464 283.4 387.664 298 387.664 315.6C387.664 340.4 378.264 360.8 359.464 376.8C340.664 392.8 316.264 400.8 286.264 400.8Z"
-                                fill="currentColor"
-                            />
-                            <path
-                                d="M78.2 167.6H53V105.2H146V400.2H78.2V167.6Z"
-                                fill="currentColor"
-                            />
-                            <path
-                                d="M286.264 400.8C255.464 400.8 230.264 392.4 210.664 375.6C191.464 358.8 181.864 337 181.864 310.2H252.064C252.064 318.2 255.064 324.8 261.064 330C267.064 335.2 275.064 337.8 285.064 337.8C294.664 337.8 302.464 335 308.464 329.4C314.864 323.8 318.064 316.6 318.064 307.8C318.064 299.8 315.264 293.2 309.664 288C304.064 282.8 296.864 280.2 288.064 280.2H250.864V218.4H288.064C294.864 218.4 300.664 216 305.464 211.2C310.264 206.4 312.664 200.4 312.664 193.2C312.664 184.8 310.064 178.2 304.864 173.4C299.664 168.6 293.064 166.2 285.064 166.2C277.864 166.2 271.664 168.4 266.464 172.8C261.664 177.2 259.264 182.8 259.264 189.6H192.664C192.664 164.8 201.464 144.6 219.064 129C236.664 113 259.264 105 286.864 105C314.464 105 336.864 112.2 354.064 126.6C371.664 141 380.464 160 380.464 183.6C380.464 200.8 375.864 214.8 366.664 225.6C357.464 236 345.664 243.2 331.264 247.2C348.464 252 362.064 260.2 372.064 271.8C382.464 283.4 387.664 298 387.664 315.6C387.664 340.4 378.264 360.8 359.464 376.8C340.664 392.8 316.264 400.8 286.264 400.8Z"
-                                stroke="var(--stroke-color)"
-                                stroke-width="2.4"
-                                mask="url(#path-3-mask)"
-                            />
-                            <path
-                                d="M78.2 167.6H53V105.2H146V400.2H78.2V167.6Z"
-                                stroke="var(--stroke-color)"
-                                stroke-width="2.4"
-                                mask="url(#path-3-mask)"
-                            />
-                        </g>
-
-                        <g
-                            class="text-[#F3BEC7] opacity-100 mix-blend-multiply transition-all delay-400 duration-750 dark:text-[#733000] dark:mix-blend-normal starting:opacity-0 motion-safe:starting:-translate-x-[78px]"
-                        >
-                            <mask
-                                id="path-4-mask"
-                                maskUnits="userSpaceOnUse"
-                                x="76.6643"
-                                y="103"
-                                width="338"
-                                height="299"
-                                fill="black"
-                            >
-                                <rect
-                                    fill="white"
-                                    x="76.6643"
-                                    y="103"
-                                    width="338"
-                                    height="299"
-                                />
-                                <path
-                                    d="M311.929 400.8C281.129 400.8 255.929 392.4 236.329 375.6C217.129 358.8 207.529 337 207.529 310.2H277.729C277.729 318.2 280.729 324.8 286.729 330C292.729 335.2 300.729 337.8 310.729 337.8C320.329 337.8 328.129 335 334.129 329.4C340.529 323.8 343.729 316.6 343.729 307.8C343.729 299.8 340.929 293.2 335.329 288C329.729 282.8 322.529 280.2 313.729 280.2H276.529V218.4H313.729C320.529 218.4 326.329 216 331.129 211.2C335.929 206.4 338.329 200.4 338.329 193.2C338.329 184.8 335.729 178.2 330.529 173.4C325.329 168.6 318.729 166.2 310.729 166.2C303.529 166.2 297.329 168.4 292.129 172.8C287.329 177.2 284.929 182.8 284.929 189.6H218.329C218.329 164.8 227.129 144.6 244.729 129C262.329 113 284.929 105 312.529 105C340.129 105 362.529 112.2 379.729 126.6C397.329 141 406.129 160 406.129 183.6C406.129 200.8 401.529 214.8 392.329 225.6C383.129 236 371.329 243.2 356.929 247.2C374.129 252 387.729 260.2 397.729 271.8C408.129 283.4 413.329 298 413.329 315.6C413.329 340.4 403.929 360.8 385.129 376.8C366.329 392.8 341.929 400.8 311.929 400.8Z"
-                                />
-                                <path
-                                    d="M103.864 167.6H78.6643V105.2H171.664V400.2H103.864V167.6Z"
-                                />
-                            </mask>
-                            <path
-                                d="M311.929 400.8C281.129 400.8 255.929 392.4 236.329 375.6C217.129 358.8 207.529 337 207.529 310.2H277.729C277.729 318.2 280.729 324.8 286.729 330C292.729 335.2 300.729 337.8 310.729 337.8C320.329 337.8 328.129 335 334.129 329.4C340.529 323.8 343.729 316.6 343.729 307.8C343.729 299.8 340.929 293.2 335.329 288C329.729 282.8 322.529 280.2 313.729 280.2H276.529V218.4H313.729C320.529 218.4 326.329 216 331.129 211.2C335.929 206.4 338.329 200.4 338.329 193.2C338.329 184.8 335.729 178.2 330.529 173.4C325.329 168.6 318.729 166.2 310.729 166.2C303.529 166.2 297.329 168.4 292.129 172.8C287.329 177.2 284.929 182.8 284.929 189.6H218.329C218.329 164.8 227.129 144.6 244.729 129C262.329 113 284.929 105 312.529 105C340.129 105 362.529 112.2 379.729 126.6C397.329 141 406.129 160 406.129 183.6C406.129 200.8 401.529 214.8 392.329 225.6C383.129 236 371.329 243.2 356.929 247.2C374.129 252 387.729 260.2 397.729 271.8C408.129 283.4 413.329 298 413.329 315.6C413.329 340.4 403.929 360.8 385.129 376.8C366.329 392.8 341.929 400.8 311.929 400.8Z"
-                                fill="currentColor"
-                            />
-                            <path
-                                d="M103.864 167.6H78.6643V105.2H171.664V400.2H103.864V167.6Z"
-                                fill="currentColor"
-                            />
-                            <path
-                                d="M311.929 400.8C281.129 400.8 255.929 392.4 236.329 375.6C217.129 358.8 207.529 337 207.529 310.2H277.729C277.729 318.2 280.729 324.8 286.729 330C292.729 335.2 300.729 337.8 310.729 337.8C320.329 337.8 328.129 335 334.129 329.4C340.529 323.8 343.729 316.6 343.729 307.8C343.729 299.8 340.929 293.2 335.329 288C329.729 282.8 322.529 280.2 313.729 280.2H276.529V218.4H313.729C320.529 218.4 326.329 216 331.129 211.2C335.929 206.4 338.329 200.4 338.329 193.2C338.329 184.8 335.729 178.2 330.529 173.4C325.329 168.6 318.729 166.2 310.729 166.2C303.529 166.2 297.329 168.4 292.129 172.8C287.329 177.2 284.929 182.8 284.929 189.6H218.329C218.329 164.8 227.129 144.6 244.729 129C262.329 113 284.929 105 312.529 105C340.129 105 362.529 112.2 379.729 126.6C397.329 141 406.129 160 406.129 183.6C406.129 200.8 401.529 214.8 392.329 225.6C383.129 236 371.329 243.2 356.929 247.2C374.129 252 387.729 260.2 397.729 271.8C408.129 283.4 413.329 298 413.329 315.6C413.329 340.4 403.929 360.8 385.129 376.8C366.329 392.8 341.929 400.8 311.929 400.8Z"
-                                stroke="var(--stroke-color)"
-                                stroke-width="2.4"
-                                mask="url(#path-4-mask)"
-                            />
-                            <path
-                                d="M103.864 167.6H78.6643V105.2H171.664V400.2H103.864V167.6Z"
-                                stroke="var(--stroke-color)"
-                                stroke-width="2.4"
-                                mask="url(#path-4-mask)"
-                            />
-                        </g>
-
-                        <g
-                            class="text-[#F3BEC7] opacity-100 mix-blend-hard-light transition-all delay-400 duration-750 dark:text-[#4B0600] starting:opacity-0 motion-safe:starting:-translate-x-[102px]"
-                        >
-                            <mask
-                                id="path-5-mask"
-                                maskUnits="userSpaceOnUse"
-                                x="102.329"
-                                y="103"
-                                width="338"
-                                height="299"
-                                fill="black"
-                            >
-                                <rect
-                                    fill="white"
-                                    x="102.329"
-                                    y="103"
-                                    width="338"
-                                    height="299"
-                                />
-                                <path
-                                    d="M337.593 400.8C306.793 400.8 281.593 392.4 261.993 375.6C242.793 358.8 233.193 337 233.193 310.2H303.393C303.393 318.2 306.393 324.8 312.393 330C318.393 335.2 326.393 337.8 336.393 337.8C345.993 337.8 353.793 335 359.793 329.4C366.193 323.8 369.393 316.6 369.393 307.8C369.393 299.8 366.593 293.2 360.993 288C355.393 282.8 348.193 280.2 339.393 280.2H302.193V218.4H339.393C346.193 218.4 351.993 216 356.793 211.2C361.593 206.4 363.993 200.4 363.993 193.2C363.993 184.8 361.393 178.2 356.193 173.4C350.993 168.6 344.393 166.2 336.393 166.2C329.193 166.2 322.993 168.4 317.793 172.8C312.993 177.2 310.593 182.8 310.593 189.6H243.993C243.993 164.8 252.793 144.6 270.393 129C287.993 113 310.593 105 338.193 105C365.793 105 388.193 112.2 405.393 126.6C422.993 141 431.793 160 431.793 183.6C431.793 200.8 427.193 214.8 417.993 225.6C408.793 236 396.993 243.2 382.593 247.2C399.793 252 413.393 260.2 423.393 271.8C433.793 283.4 438.993 298 438.993 315.6C438.993 340.4 429.593 360.8 410.793 376.8C391.993 392.8 367.593 400.8 337.593 400.8Z"
-                                />
-                                <path
-                                    d="M129.529 167.6H104.329V105.2H197.329V400.2H129.529V167.6Z"
-                                />
-                            </mask>
-                            <path
-                                d="M337.593 400.8C306.793 400.8 281.593 392.4 261.993 375.6C242.793 358.8 233.193 337 233.193 310.2H303.393C303.393 318.2 306.393 324.8 312.393 330C318.393 335.2 326.393 337.8 336.393 337.8C345.993 337.8 353.793 335 359.793 329.4C366.193 323.8 369.393 316.6 369.393 307.8C369.393 299.8 366.593 293.2 360.993 288C355.393 282.8 348.193 280.2 339.393 280.2H302.193V218.4H339.393C346.193 218.4 351.993 216 356.793 211.2C361.593 206.4 363.993 200.4 363.993 193.2C363.993 184.8 361.393 178.2 356.193 173.4C350.993 168.6 344.393 166.2 336.393 166.2C329.193 166.2 322.993 168.4 317.793 172.8C312.993 177.2 310.593 182.8 310.593 189.6H243.993C243.993 164.8 252.793 144.6 270.393 129C287.993 113 310.593 105 338.193 105C365.793 105 388.193 112.2 405.393 126.6C422.993 141 431.793 160 431.793 183.6C431.793 200.8 427.193 214.8 417.993 225.6C408.793 236 396.993 243.2 382.593 247.2C399.793 252 413.393 260.2 423.393 271.8C433.793 283.4 438.993 298 438.993 315.6C438.993 340.4 429.593 360.8 410.793 376.8C391.993 392.8 367.593 400.8 337.593 400.8Z"
-                                fill="currentColor"
-                            />
-                            <path
-                                d="M129.529 167.6H104.329V105.2H197.329V400.2H129.529V167.6Z"
-                                fill="currentColor"
-                            />
-                            <path
-                                d="M337.593 400.8C306.793 400.8 281.593 392.4 261.993 375.6C242.793 358.8 233.193 337 233.193 310.2H303.393C303.393 318.2 306.393 324.8 312.393 330C318.393 335.2 326.393 337.8 336.393 337.8C345.993 337.8 353.793 335 359.793 329.4C366.193 323.8 369.393 316.6 369.393 307.8C369.393 299.8 366.593 293.2 360.993 288C355.393 282.8 348.193 280.2 339.393 280.2H302.193V218.4H339.393C346.193 218.4 351.993 216 356.793 211.2C361.593 206.4 363.993 200.4 363.993 193.2C363.993 184.8 361.393 178.2 356.193 173.4C350.993 168.6 344.393 166.2 336.393 166.2C329.193 166.2 322.993 168.4 317.793 172.8C312.993 177.2 310.593 182.8 310.593 189.6H243.993C243.993 164.8 252.793 144.6 270.393 129C287.993 113 310.593 105 338.193 105C365.793 105 388.193 112.2 405.393 126.6C422.993 141 431.793 160 431.793 183.6C431.793 200.8 427.193 214.8 417.993 225.6C408.793 236 396.993 243.2 382.593 247.2C399.793 252 413.393 260.2 423.393 271.8C433.793 283.4 438.993 298 438.993 315.6C438.993 340.4 429.593 360.8 410.793 376.8C391.993 392.8 367.593 400.8 337.593 400.8Z"
-                                stroke="var(--stroke-color)"
-                                stroke-width="2.4"
-                                mask="url(#path-5-mask)"
-                            />
-                            <path
-                                d="M129.529 167.6H104.329V105.2H197.329V400.2H129.529V167.6Z"
-                                stroke="var(--stroke-color)"
-                                stroke-width="2.4"
-                                mask="url(#path-5-mask)"
-                            />
-                        </g>
-                    </svg>
-                    <div
-                        class="absolute inset-0 rounded-t-lg shadow-[inset_0px_0px_0px_1px_rgba(26,26,0,0.16)] lg:rounded-t-none lg:rounded-r-lg dark:shadow-[inset_0px_0px_0px_1px_#fffaed2d]"
-                    ></div>
-                </div>
-            </main>
-        </div>
-        <div class="hidden h-14.5 lg:block"></div>
-    </div>
-</template>
diff --git a/resources/js/pages/auth/ConfirmPassword.vue b/resources/js/pages/auth/ConfirmPassword.vue
deleted file mode 100644
index 43961ed..0000000
--- a/resources/js/pages/auth/ConfirmPassword.vue
+++ /dev/null
@@ -1,69 +0,0 @@
-<script setup lang="ts">
-import { Form, Head } from '@inertiajs/vue3';
-import {
-    index as confirmOptions,
-    store as confirmStore,
-} from '@/actions/Laravel/Passkeys/Http/Controllers/PasskeyConfirmationController';
-import InputError from '@/components/InputError.vue';
-import PasskeyVerify from '@/components/PasskeyVerify.vue';
-import PasswordInput from '@/components/PasswordInput.vue';
-import { Button } from '@/components/ui/button';
-import { Label } from '@/components/ui/label';
-import { Spinner } from '@/components/ui/spinner';
-import { store } from '@/routes/password/confirm';
-
-defineOptions({
-    layout: {
-        title: 'Confirm password',
-        description:
-            'This is a secure area of the application. Please confirm your password before continuing.',
-    },
-});
-</script>
-
-<template>
-    <Head title="Confirm password" />
-
-    <PasskeyVerify
-        :routes="{
-            options: confirmOptions(),
-            submit: confirmStore(),
-        }"
-        label="Confirm with passkey"
-        loading-label="Confirming..."
-        separator="Or confirm with password"
-    />
-
-    <Form
-        v-bind="store.form()"
-        reset-on-success
-        v-slot="{ errors, processing }"
-    >
-        <div class="space-y-6">
-            <div class="grid gap-2">
-                <Label htmlFor="password">Password</Label>
-                <PasswordInput
-                    id="password"
-                    name="password"
-                    class="mt-1 block w-full"
-                    required
-                    autocomplete="current-password"
-                    autofocus
-                />
-
-                <InputError :message="errors.password" />
-            </div>
-
-            <div class="flex items-center">
-                <Button
-                    class="w-full"
-                    :disabled="processing"
-                    data-test="confirm-password-button"
-                >
-                    <Spinner v-if="processing" />
-                    Confirm password
-                </Button>
-            </div>
-        </div>
-    </Form>
-</template>
diff --git a/resources/js/pages/auth/ForgotPassword.vue b/resources/js/pages/auth/ForgotPassword.vue
deleted file mode 100644
index a39a0e1..0000000
--- a/resources/js/pages/auth/ForgotPassword.vue
+++ /dev/null
@@ -1,66 +0,0 @@
-<script setup lang="ts">
-import { Form, Head } from '@inertiajs/vue3';
-import InputError from '@/components/InputError.vue';
-import TextLink from '@/components/TextLink.vue';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { Spinner } from '@/components/ui/spinner';
-import { login } from '@/routes';
-import { email } from '@/routes/password';
-
-defineOptions({
-    layout: {
-        title: 'Forgot password',
-        description: 'Enter your email to receive a password reset link',
-    },
-});
-
-defineProps<{
-    status?: string;
-}>();
-</script>
-
-<template>
-    <Head title="Forgot password" />
-
-    <div
-        v-if="status"
-        class="mb-4 text-center text-sm font-medium text-green-600"
-    >
-        {{ status }}
-    </div>
-
-    <div class="space-y-6">
-        <Form v-bind="email.form()" v-slot="{ errors, processing }">
-            <div class="grid gap-2">
-                <Label for="email">Email address</Label>
-                <Input
-                    id="email"
-                    type="email"
-                    name="email"
-                    autocomplete="off"
-                    autofocus
-                    placeholder="email@example.com"
-                />
-                <InputError :message="errors.email" />
-            </div>
-
-            <div class="my-6 flex items-center justify-start">
-                <Button
-                    class="w-full"
-                    :disabled="processing"
-                    data-test="email-password-reset-link-button"
-                >
-                    <Spinner v-if="processing" />
-                    Email password reset link
-                </Button>
-            </div>
-        </Form>
-
-        <div class="space-x-1 text-center text-sm text-muted-foreground">
-            <span>Or, return to</span>
-            <TextLink :href="login()">log in</TextLink>
-        </div>
-    </div>
-</template>
diff --git a/resources/js/pages/auth/Login.vue b/resources/js/pages/auth/Login.vue
deleted file mode 100644
index ead9e38..0000000
--- a/resources/js/pages/auth/Login.vue
+++ /dev/null
@@ -1,110 +0,0 @@
-<script setup lang="ts">
-import { Form, Head } from '@inertiajs/vue3';
-import InputError from '@/components/InputError.vue';
-import PasskeyVerify from '@/components/PasskeyVerify.vue';
-import PasswordInput from '@/components/PasswordInput.vue';
-import TextLink from '@/components/TextLink.vue';
-import { Button } from '@/components/ui/button';
-import { Checkbox } from '@/components/ui/checkbox';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { Spinner } from '@/components/ui/spinner';
-import { register } from '@/routes';
-import { store } from '@/routes/login';
-import { request } from '@/routes/password';
-
-defineOptions({
-    layout: {
-        title: 'Log in to your account',
-        description: 'Enter your email and password below to log in',
-    },
-});
-
-defineProps<{
-    status?: string;
-    canResetPassword: boolean;
-}>();
-</script>
-
-<template>
-    <Head title="Log in" />
-
-    <div
-        v-if="status"
-        class="mb-4 text-center text-sm font-medium text-green-600"
-    >
-        {{ status }}
-    </div>
-
-    <PasskeyVerify />
-
-    <Form
-        v-bind="store.form()"
-        :reset-on-success="['password']"
-        v-slot="{ errors, processing }"
-        class="flex flex-col gap-6"
-    >
-        <div class="grid gap-6">
-            <div class="grid gap-2">
-                <Label for="email">Email address</Label>
-                <Input
-                    id="email"
-                    type="email"
-                    name="email"
-                    required
-                    autofocus
-                    :tabindex="1"
-                    autocomplete="email"
-                    placeholder="email@example.com"
-                />
-                <InputError :message="errors.email" />
-            </div>
-
-            <div class="grid gap-2">
-                <div class="flex items-center justify-between">
-                    <Label for="password">Password</Label>
-                    <TextLink
-                        v-if="canResetPassword"
-                        :href="request()"
-                        class="text-sm"
-                        :tabindex="5"
-                    >
-                        Forgot your password?
-                    </TextLink>
-                </div>
-                <PasswordInput
-                    id="password"
-                    name="password"
-                    required
-                    :tabindex="2"
-                    autocomplete="current-password"
-                    placeholder="Password"
-                />
-                <InputError :message="errors.password" />
-            </div>
-
-            <div class="flex items-center justify-between">
-                <Label for="remember" class="flex items-center space-x-3">
-                    <Checkbox id="remember" name="remember" :tabindex="3" />
-                    <span>Remember me</span>
-                </Label>
-            </div>
-
-            <Button
-                type="submit"
-                class="mt-4 w-full"
-                :tabindex="4"
-                :disabled="processing"
-                data-test="login-button"
-            >
-                <Spinner v-if="processing" />
-                Log in
-            </Button>
-        </div>
-
-        <div class="text-center text-sm text-muted-foreground">
-            Don't have an account?
-            <TextLink :href="register()" :tabindex="5">Sign up</TextLink>
-        </div>
-    </Form>
-</template>
diff --git a/resources/js/pages/auth/Register.vue b/resources/js/pages/auth/Register.vue
deleted file mode 100644
index 3ab5341..0000000
--- a/resources/js/pages/auth/Register.vue
+++ /dev/null
@@ -1,114 +0,0 @@
-<script setup lang="ts">
-import { Form, Head } from '@inertiajs/vue3';
-import InputError from '@/components/InputError.vue';
-import PasswordInput from '@/components/PasswordInput.vue';
-import TextLink from '@/components/TextLink.vue';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { Spinner } from '@/components/ui/spinner';
-import { login } from '@/routes';
-import { store } from '@/routes/register';
-
-defineProps<{
-    passwordRules: string;
-}>();
-
-defineOptions({
-    layout: {
-        title: 'Create an account',
-        description: 'Enter your details below to create your account',
-    },
-});
-</script>
-
-<template>
-    <Head title="Register" />
-
-    <Form
-        v-bind="store.form()"
-        :reset-on-success="['password', 'password_confirmation']"
-        v-slot="{ errors, processing }"
-        class="flex flex-col gap-6"
-    >
-        <div class="grid gap-6">
-            <div class="grid gap-2">
-                <Label for="name">Name</Label>
-                <Input
-                    id="name"
-                    type="text"
-                    required
-                    autofocus
-                    :tabindex="1"
-                    autocomplete="name"
-                    name="name"
-                    placeholder="Full name"
-                />
-                <InputError :message="errors.name" />
-            </div>
-
-            <div class="grid gap-2">
-                <Label for="email">Email address</Label>
-                <Input
-                    id="email"
-                    type="email"
-                    required
-                    :tabindex="2"
-                    autocomplete="email"
-                    name="email"
-                    placeholder="email@example.com"
-                />
-                <InputError :message="errors.email" />
-            </div>
-
-            <div class="grid gap-2">
-                <Label for="password">Password</Label>
-                <PasswordInput
-                    id="password"
-                    required
-                    :tabindex="3"
-                    autocomplete="new-password"
-                    name="password"
-                    placeholder="Password"
-                    :passwordrules="passwordRules"
-                />
-                <InputError :message="errors.password" />
-            </div>
-
-            <div class="grid gap-2">
-                <Label for="password_confirmation">Confirm password</Label>
-                <PasswordInput
-                    id="password_confirmation"
-                    required
-                    :tabindex="4"
-                    autocomplete="new-password"
-                    name="password_confirmation"
-                    placeholder="Confirm password"
-                    :passwordrules="passwordRules"
-                />
-                <InputError :message="errors.password_confirmation" />
-            </div>
-
-            <Button
-                type="submit"
-                class="mt-2 w-full"
-                tabindex="5"
-                :disabled="processing"
-                data-test="register-user-button"
-            >
-                <Spinner v-if="processing" />
-                Create account
-            </Button>
-        </div>
-
-        <div class="text-center text-sm text-muted-foreground">
-            Already have an account?
-            <TextLink
-                :href="login()"
-                class="underline underline-offset-4"
-                :tabindex="6"
-                >Log in</TextLink
-            >
-        </div>
-    </Form>
-</template>
diff --git a/resources/js/pages/auth/ResetPassword.vue b/resources/js/pages/auth/ResetPassword.vue
deleted file mode 100644
index 0ae9fd6..0000000
--- a/resources/js/pages/auth/ResetPassword.vue
+++ /dev/null
@@ -1,90 +0,0 @@
-<script setup lang="ts">
-import { Form, Head } from '@inertiajs/vue3';
-import { ref } from 'vue';
-import InputError from '@/components/InputError.vue';
-import PasswordInput from '@/components/PasswordInput.vue';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { Spinner } from '@/components/ui/spinner';
-import { update } from '@/routes/password';
-
-defineOptions({
-    layout: {
-        title: 'Reset password',
-        description: 'Please enter your new password below',
-    },
-});
-
-const props = defineProps<{
-    token: string;
-    email: string;
-    passwordRules: string;
-}>();
-
-const inputEmail = ref(props.email);
-</script>
-
-<template>
-    <Head title="Reset password" />
-
-    <Form
-        v-bind="update.form()"
-        :transform="(data) => ({ ...data, token, email })"
-        :reset-on-success="['password', 'password_confirmation']"
-        v-slot="{ errors, processing }"
-    >
-        <div class="grid gap-6">
-            <div class="grid gap-2">
-                <Label for="email">Email</Label>
-                <Input
-                    id="email"
-                    type="email"
-                    name="email"
-                    autocomplete="email"
-                    v-model="inputEmail"
-                    class="mt-1 block w-full"
-                    readonly
-                />
-                <InputError :message="errors.email" class="mt-2" />
-            </div>
-
-            <div class="grid gap-2">
-                <Label for="password">Password</Label>
-                <PasswordInput
-                    id="password"
-                    name="password"
-                    autocomplete="new-password"
-                    class="mt-1 block w-full"
-                    autofocus
-                    placeholder="Password"
-                    :passwordrules="passwordRules"
-                />
-                <InputError :message="errors.password" />
-            </div>
-
-            <div class="grid gap-2">
-                <Label for="password_confirmation"> Confirm password </Label>
-                <PasswordInput
-                    id="password_confirmation"
-                    name="password_confirmation"
-                    autocomplete="new-password"
-                    class="mt-1 block w-full"
-                    placeholder="Confirm password"
-                    :passwordrules="passwordRules"
-                />
-                <InputError :message="errors.password_confirmation" />
-            </div>
-
-            <Button
-                type="submit"
-                class="mt-4 w-full"
-                :disabled="processing"
-                data-test="reset-password-button"
-            >
-                <Spinner v-if="processing" />
-                Reset password
-            </Button>
-        </div>
-    </Form>
-</template>
diff --git a/resources/js/pages/auth/TwoFactorChallenge.vue b/resources/js/pages/auth/TwoFactorChallenge.vue
deleted file mode 100644
index 92b733d..0000000
--- a/resources/js/pages/auth/TwoFactorChallenge.vue
+++ /dev/null
@@ -1,133 +0,0 @@
-<script setup lang="ts">
-import { Form, Head, setLayoutProps } from '@inertiajs/vue3';
-import { computed, ref, watchEffect } from 'vue';
-import InputError from '@/components/InputError.vue';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import {
-    InputOTP,
-    InputOTPGroup,
-    InputOTPSlot,
-} from '@/components/ui/input-otp';
-import { store } from '@/routes/two-factor/login';
-import type { TwoFactorConfigContent } from '@/types';
-
-const showRecoveryInput = ref<boolean>(false);
-const code = ref<string>('');
-
-const authConfigContent = computed<TwoFactorConfigContent>(() => {
-    if (showRecoveryInput.value) {
-        return {
-            title: 'Recovery code',
-            description:
-                'Please confirm access to your account by entering one of your emergency recovery codes.',
-            buttonText: 'login using an authentication code',
-        };
-    }
-
-    return {
-        title: 'Authentication code',
-        description:
-            'Enter the authentication code provided by your authenticator application.',
-        buttonText: 'login using a recovery code',
-    };
-});
-
-watchEffect(() => {
-    setLayoutProps({
-        title: authConfigContent.value.title,
-        description: authConfigContent.value.description,
-    });
-});
-
-const toggleRecoveryMode = (clearErrors: () => void): void => {
-    showRecoveryInput.value = !showRecoveryInput.value;
-    clearErrors();
-    code.value = '';
-};
-</script>
-
-<template>
-    <Head title="Two-factor authentication" />
-
-    <div class="space-y-6">
-        <template v-if="!showRecoveryInput">
-            <Form
-                v-bind="store.form()"
-                class="space-y-4"
-                reset-on-error
-                @error="code = ''"
-                #default="{ errors, processing, clearErrors }"
-            >
-                <input type="hidden" name="code" :value="code" />
-                <div
-                    class="flex flex-col items-center justify-center space-y-3 text-center"
-                >
-                    <div class="flex w-full items-center justify-center">
-                        <InputOTP
-                            id="otp"
-                            v-model="code"
-                            :maxlength="6"
-                            :disabled="processing"
-                            autofocus
-                        >
-                            <InputOTPGroup>
-                                <InputOTPSlot
-                                    v-for="index in 6"
-                                    :key="index"
-                                    :index="index - 1"
-                                />
-                            </InputOTPGroup>
-                        </InputOTP>
-                    </div>
-                    <InputError :message="errors.code" />
-                </div>
-                <Button type="submit" class="w-full" :disabled="processing"
-                    >Continue</Button
-                >
-                <div class="text-center text-sm text-muted-foreground">
-                    <span>or you can </span>
-                    <button
-                        type="button"
-                        class="text-foreground underline decoration-neutral-300 underline-offset-4 transition-colors duration-300 ease-out hover:decoration-current! dark:decoration-neutral-500"
-                        @click="() => toggleRecoveryMode(clearErrors)"
-                    >
-                        {{ authConfigContent.buttonText }}
-                    </button>
-                </div>
-            </Form>
-        </template>
-
-        <template v-else>
-            <Form
-                v-bind="store.form()"
-                class="space-y-4"
-                reset-on-error
-                #default="{ errors, processing, clearErrors }"
-            >
-                <Input
-                    name="recovery_code"
-                    type="text"
-                    placeholder="Enter recovery code"
-                    :autofocus="showRecoveryInput"
-                    required
-                />
-                <InputError :message="errors.recovery_code" />
-                <Button type="submit" class="w-full" :disabled="processing"
-                    >Continue</Button
-                >
-
-                <div class="text-center text-sm text-muted-foreground">
-                    <span>or you can </span>
-                    <button
-                        type="button"
-                        class="text-foreground underline decoration-neutral-300 underline-offset-4 transition-colors duration-300 ease-out hover:decoration-current! dark:decoration-neutral-500"
-                        @click="() => toggleRecoveryMode(clearErrors)"
-                    >
-                        {{ authConfigContent.buttonText }}
-                    </button>
-                </div>
-            </Form>
-        </template>
-    </div>
-</template>
diff --git a/resources/js/pages/auth/VerifyEmail.vue b/resources/js/pages/auth/VerifyEmail.vue
deleted file mode 100644
index e40b6fd..0000000
--- a/resources/js/pages/auth/VerifyEmail.vue
+++ /dev/null
@@ -1,47 +0,0 @@
-<script setup lang="ts">
-import { Form, Head } from '@inertiajs/vue3';
-import TextLink from '@/components/TextLink.vue';
-import { Button } from '@/components/ui/button';
-import { Spinner } from '@/components/ui/spinner';
-import { logout } from '@/routes';
-import { send } from '@/routes/verification';
-
-defineOptions({
-    layout: {
-        title: 'Email verification',
-        description:
-            'Please verify your email address by clicking on the link we just emailed to you.',
-    },
-});
-
-defineProps<{
-    status?: string;
-}>();
-</script>
-
-<template>
-    <Head title="Email verification" />
-
-    <div
-        v-if="status === 'verification-link-sent'"
-        class="mb-4 text-center text-sm font-medium text-green-600"
-    >
-        A new verification link has been sent to the email address you provided
-        during registration.
-    </div>
-
-    <Form
-        v-bind="send.form()"
-        class="space-y-6 text-center"
-        v-slot="{ processing }"
-    >
-        <Button :disabled="processing" variant="secondary">
-            <Spinner v-if="processing" />
-            Resend verification email
-        </Button>
-
-        <TextLink :href="logout()" as="button" class="mx-auto block text-sm">
-            Log out
-        </TextLink>
-    </Form>
-</template>
diff --git a/resources/js/pages/settings/Appearance.vue b/resources/js/pages/settings/Appearance.vue
deleted file mode 100644
index 8142818..0000000
--- a/resources/js/pages/settings/Appearance.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<script setup lang="ts">
-import { Head } from '@inertiajs/vue3';
-import AppearanceTabs from '@/components/AppearanceTabs.vue';
-import Heading from '@/components/Heading.vue';
-import { edit } from '@/routes/appearance';
-
-defineOptions({
-    layout: {
-        breadcrumbs: [
-            {
-                title: 'Appearance settings',
-                href: edit(),
-            },
-        ],
-    },
-});
-</script>
-
-<template>
-    <Head title="Appearance settings" />
-
-    <h1 class="sr-only">Appearance settings</h1>
-
-    <div class="space-y-6">
-        <Heading
-            variant="small"
-            title="Appearance settings"
-            description="Update the appearance settings for your account"
-        />
-        <AppearanceTabs />
-    </div>
-</template>
diff --git a/resources/js/pages/settings/Profile.vue b/resources/js/pages/settings/Profile.vue
deleted file mode 100644
index 40b5999..0000000
--- a/resources/js/pages/settings/Profile.vue
+++ /dev/null
@@ -1,105 +0,0 @@
-<script setup lang="ts">
-import { Form, Head, usePage } from '@inertiajs/vue3';
-import { Link } from '@inertiajs/vue3';
-import { computed } from 'vue';
-import ProfileController from '@/actions/App/Http/Controllers/Settings/ProfileController';
-import DeleteUser from '@/components/DeleteUser.vue';
-import Heading from '@/components/Heading.vue';
-import InputError from '@/components/InputError.vue';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { edit } from '@/routes/profile';
-import { send } from '@/routes/verification';
-
-defineOptions({
-    layout: {
-        breadcrumbs: [
-            {
-                title: 'Profile settings',
-                href: edit(),
-            },
-        ],
-    },
-});
-
-const page = usePage();
-const user = computed(() => page.props.auth.user);
-</script>
-
-<template>
-    <Head title="Profile settings" />
-
-    <h1 class="sr-only">Profile settings</h1>
-
-    <div class="flex flex-col space-y-6">
-        <Heading
-            variant="small"
-            title="Profile"
-            description="Update your name and email address"
-        />
-
-        <Form
-            v-bind="ProfileController.update.form()"
-            class="space-y-6"
-            v-slot="{ errors, processing }"
-        >
-            <div class="grid gap-2">
-                <Label for="name">Name</Label>
-                <Input
-                    id="name"
-                    class="mt-1 block w-full"
-                    name="name"
-                    :default-value="user.name"
-                    required
-                    autocomplete="name"
-                    placeholder="Full name"
-                />
-                <InputError class="mt-2" :message="errors.name" />
-            </div>
-
-            <div class="grid gap-2">
-                <Label for="email">Email address</Label>
-                <Input
-                    id="email"
-                    type="email"
-                    class="mt-1 block w-full"
-                    name="email"
-                    :default-value="user.email"
-                    required
-                    autocomplete="username"
-                    placeholder="Email address"
-                />
-                <InputError class="mt-2" :message="errors.email" />
-            </div>
-
-            <div v-if="page.props.mustVerifyEmail && !user.email_verified_at">
-                <p class="-mt-4 text-sm text-muted-foreground">
-                    Your email address is unverified.
-                    <Link
-                        :href="send()"
-                        as="button"
-                        class="text-foreground underline decoration-neutral-300 underline-offset-4 transition-colors duration-300 ease-out hover:decoration-current! dark:decoration-neutral-500"
-                    >
-                        Click here to re-send the verification email.
-                    </Link>
-                </p>
-
-                <div
-                    v-if="page.props.status === 'verification-link-sent'"
-                    class="mt-2 text-sm font-medium text-green-600"
-                >
-                    A new verification link has been sent to your email address.
-                </div>
-            </div>
-
-            <div class="flex items-center gap-4">
-                <Button :disabled="processing" data-test="update-profile-button"
-                    >Save</Button
-                >
-            </div>
-        </Form>
-    </div>
-
-    <DeleteUser />
-</template>
diff --git a/resources/js/pages/settings/Security.vue b/resources/js/pages/settings/Security.vue
deleted file mode 100644
index 784e17b..0000000
--- a/resources/js/pages/settings/Security.vue
+++ /dev/null
@@ -1,119 +0,0 @@
-<script setup lang="ts">
-import { Form, Head } from '@inertiajs/vue3';
-import SecurityController from '@/actions/App/Http/Controllers/Settings/SecurityController';
-import Heading from '@/components/Heading.vue';
-import InputError from '@/components/InputError.vue';
-import type { Props as ManagePasskeysProps } from '@/components/ManagePasskeys.vue';
-import ManagePasskeys from '@/components/ManagePasskeys.vue';
-import type { Props as ManageTwoFactorProps } from '@/components/ManageTwoFactor.vue';
-import ManageTwoFactor from '@/components/ManageTwoFactor.vue';
-import PasswordInput from '@/components/PasswordInput.vue';
-import { Button } from '@/components/ui/button';
-import { Label } from '@/components/ui/label';
-import { edit } from '@/routes/security';
-
-type Props = {
-    passwordRules: string;
-} & ManagePasskeysProps &
-    ManageTwoFactorProps;
-
-const props = defineProps<Props>();
-
-defineOptions({
-    layout: {
-        breadcrumbs: [
-            {
-                title: 'Security settings',
-                href: edit(),
-            },
-        ],
-    },
-});
-</script>
-
-<template>
-    <Head title="Security settings" />
-
-    <h1 class="sr-only">Security settings</h1>
-
-    <div class="space-y-6">
-        <Heading
-            variant="small"
-            title="Update password"
-            description="Ensure your account is using a long, random password to stay secure"
-        />
-
-        <Form
-            v-bind="SecurityController.update.form()"
-            :options="{
-                preserveScroll: true,
-            }"
-            reset-on-success
-            :reset-on-error="[
-                'password',
-                'password_confirmation',
-                'current_password',
-            ]"
-            class="space-y-6"
-            v-slot="{ errors, processing }"
-        >
-            <div class="grid gap-2">
-                <Label for="current_password">Current password</Label>
-                <PasswordInput
-                    id="current_password"
-                    name="current_password"
-                    class="mt-1 block w-full"
-                    autocomplete="current-password"
-                    placeholder="Current password"
-                />
-                <InputError :message="errors.current_password" />
-            </div>
-
-            <div class="grid gap-2">
-                <Label for="password">New password</Label>
-                <PasswordInput
-                    id="password"
-                    name="password"
-                    class="mt-1 block w-full"
-                    autocomplete="new-password"
-                    placeholder="New password"
-                    :passwordrules="props.passwordRules"
-                />
-                <InputError :message="errors.password" />
-            </div>
-
-            <div class="grid gap-2">
-                <Label for="password_confirmation">Confirm password</Label>
-                <PasswordInput
-                    id="password_confirmation"
-                    name="password_confirmation"
-                    class="mt-1 block w-full"
-                    autocomplete="new-password"
-                    placeholder="Confirm password"
-                    :passwordrules="props.passwordRules"
-                />
-                <InputError :message="errors.password_confirmation" />
-            </div>
-
-            <div class="flex items-center gap-4">
-                <Button
-                    :disabled="processing"
-                    data-test="update-password-button"
-                >
-                    Save
-                </Button>
-            </div>
-        </Form>
-    </div>
-
-    <ManageTwoFactor
-        :canManageTwoFactor="canManageTwoFactor"
-        :requiresConfirmation="requiresConfirmation"
-        :twoFactorEnabled="twoFactorEnabled"
-    />
-
-    <ManagePasskeys
-        :canManagePasskeys="canManagePasskeys"
-        :passkeys="passkeys"
-    />
-</template>
diff --git a/resources/js/plugins/vuetify.ts b/resources/js/plugins/vuetify.ts
new file mode 100644
index 0000000..6b92c5a
--- /dev/null
+++ b/resources/js/plugins/vuetify.ts
@@ -0,0 +1,24 @@
+import 'vuetify/styles';
+import { createVuetify } from 'vuetify';
+import { md3 } from 'vuetify/blueprints';
+
+export default createVuetify({
+    theme: {
+        defaultTheme: 'light',
+        themes: {
+            light: {
+                dark: false,
+                colors: {
+                    primary: '#C0392B',
+                    background: '#F7F7F5',
+                    surface: '#FFFFFF',
+                },
+            },
+        },
+    },
+    defaults: {
+        global: {
+            rounded: false,
+        },
+    },
+});
diff --git a/resources/js/types/auth.ts b/resources/js/types/auth.ts
deleted file mode 100644
index 24ec534..0000000
--- a/resources/js/types/auth.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-export type User = {
-    id: number;
-    name: string;
-    email: string;
-    avatar?: string;
-    email_verified_at: string | null;
-    two_factor_enabled?: boolean;
-    created_at: string;
-    updated_at: string;
-    [key: string]: unknown;
-};
-
-export type Auth = {
-    user: User;
-};
-
-/* @chisel-passkeys */
-export type Passkey = {
-    id: number;
-    name: string;
-    authenticator: string | null;
-    created_at_diff: string;
-    last_used_at_diff: string | null;
-};
-/* @end-chisel-passkeys */
-
-export type TwoFactorConfigContent = {
-    title: string;
-    description: string;
-    buttonText: string;
-};
diff --git a/resources/js/types/global.d.ts b/resources/js/types/global.d.ts
deleted file mode 100644
index a53aee2..0000000
--- a/resources/js/types/global.d.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import type { Auth } from '@/types/auth';
-
-// Extend ImportMeta interface for Vite...
-declare module 'vite/client' {
-    interface ImportMetaEnv {
-        readonly VITE_APP_NAME: string;
-        [key: string]: string | boolean | undefined;
-    }
-
-    interface ImportMeta {
-        readonly env: ImportMetaEnv;
-        readonly glob: <T>(pattern: string) => Record<string, () => Promise<T>>;
-    }
-}
-
-declare module '@inertiajs/core' {
-    export interface InertiaConfig {
-        sharedPageProps: {
-            name: string;
-            auth: Auth;
-            sidebarOpen: boolean;
-            [key: string]: unknown;
-        };
-    }
-}
-
-declare module 'vue' {
-    interface ComponentCustomProperties {
-        $inertia: typeof Router;
-        $page: Page;
-        $headManager: ReturnType<typeof createHeadManager>;
-    }
-}
diff --git a/resources/js/types/index.ts b/resources/js/types/index.ts
deleted file mode 100644
index afa7f48..0000000
--- a/resources/js/types/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from './auth';
-export * from './navigation';
-export * from './ui';
diff --git a/resources/js/types/navigation.ts b/resources/js/types/navigation.ts
deleted file mode 100644
index b629a40..0000000
--- a/resources/js/types/navigation.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import type { InertiaLinkProps } from '@inertiajs/vue3';
-import type { LucideIcon } from '@lucide/vue';
-
-export type BreadcrumbItem = {
-    title: string;
-    href: NonNullable<InertiaLinkProps['href']>;
-};
-
-export type NavItem = {
-    title: string;
-    href: NonNullable<InertiaLinkProps['href']>;
-    icon?: LucideIcon;
-    isActive?: boolean;
-};
diff --git a/resources/js/types/ui.ts b/resources/js/types/ui.ts
deleted file mode 100644
index 050164b..0000000
--- a/resources/js/types/ui.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export type Appearance = 'light' | 'dark' | 'system';
-export type ResolvedAppearance = 'light' | 'dark';
-
-export type AppVariant = 'header' | 'sidebar';
-
-export type FlashToast = {
-    type: 'success' | 'info' | 'warning' | 'error';
-    message: string;
-};
diff --git a/resources/js/types/vue-shims.d.ts b/resources/js/types/vue-shims.d.ts
deleted file mode 100644
index 3c15be0..0000000
--- a/resources/js/types/vue-shims.d.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-declare module '*.vue' {
-    import type { DefineComponent } from 'vue';
-    const component: DefineComponent;
-    export default component;
-}
diff --git a/routes/web.php b/routes/web.php
index 4f0de56..15ef763 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -2,10 +2,7 @@
 
 use Illuminate\Support\Facades\Route;
 
-Route::inertia('/', 'Welcome')->name('home');
+Route::inertia('/', 'Index')->name('home');
 
-Route::middleware(['auth', 'verified'])->group(function () {
-    Route::inertia('dashboard', 'Dashboard')->name('dashboard');
-});
 
 require __DIR__.'/settings.php';
diff --git a/vite.config.ts b/vite.config.ts
index 51262af..c4dd46a 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,10 +1,11 @@
-import inertia from '@inertiajs/vite';
 import { wayfinder } from '@laravel/vite-plugin-wayfinder';
 import tailwindcss from '@tailwindcss/vite';
 import vue from '@vitejs/plugin-vue';
 import laravel from 'laravel-vite-plugin';
 import { bunny } from 'laravel-vite-plugin/fonts';
 import { defineConfig } from 'vite';
+import vuetify from 'vite-plugin-vuetify';
+import path from 'path';
 
 export default defineConfig({
     plugins: [
@@ -17,7 +18,6 @@ export default defineConfig({
                 }),
             ],
         }),
-        inertia(),
         tailwindcss(),
         vue({
             template: {
@@ -27,8 +27,14 @@ export default defineConfig({
                 },
             },
         }),
+        vuetify({ autoImport: true }),
         wayfinder({
             formVariants: true,
         }),
     ],
+    resolve: {
+        alias: {
+            '@': path.resolve(__dirname, 'resources/js'),
+        },
+    },
 });