diff --git a/.editorconfig b/.editorconfig
index 8f0de65..5d7ab14 100644
--- a/.editorconfig
+++ b/.editorconfig
@@ -11,7 +11,7 @@ trim_trailing_whitespace = true
 [*.md]
 trim_trailing_whitespace = false
 
-[*.{yml,yaml}]
+[*.{yml,yaml,ts,vue}]
 indent_size = 2
 
 [docker-compose.yml]
diff --git a/README.md b/README.md
index f83b8a0..499520a 100644
--- a/README.md
+++ b/README.md
@@ -10,6 +10,9 @@
 
 The goal of the project is to create a template for development on Laravel and Nuxt with maximum API performance, ready-made authorization methods, image uploading with optimization and ready-made user roles.
 
+> [!WARNING]  
+> You are on the dev branch, Nuxt UI version 3 which is used here is in alpha testing.
+
 <!-- TOC -->
 
 - [Features](#features)
@@ -19,7 +22,7 @@ The goal of the project is to create a template for development on Laravel and N
     - [Docker Deploy (Laravel Sail)](#docker-deploy-laravel-sail)
 - [Upgrade](#upgrade)
 - [Usage](#usage)
-    - [Nuxt $fetch](#nuxt-fetch)
+    - [Fetch wrapper](#fetch-wrapper)
     - [Authentication](#authentication)
     - [Nuxt Middleware](#nuxt-middleware)
     - [Laravel Middleware](#laravel-middleware)
@@ -40,19 +43,18 @@ The goal of the project is to create a template for development on Laravel and N
  - [**Laravel Socialite**](https://laravel.com/docs/11.x/socialite) OAuth providers
  - [**Laravel Sail**](https://laravel.com/docs/11.x/sail) Light-weight command-line interface for interacting with Laravel's default Docker development environment.
  - [**Spatie Laravel Permissions**](https://spatie.be/docs/laravel-permission/v6/introduction) This package allows you to manage user permissions and roles in a database.
- - UI library [**Nuxt UI**](https://ui.nuxt.com/) based on [**TailwindCSS**](https://tailwindui.com/) and [**HeadlessUI**](https://headlessui.com/).
+ - UI library [**Nuxt UI 3**](https://ui3.nuxt.dev/) based on [**TailwindCSS 4**](https://tailwindcss.com/) and [**Reka UI**](https://reka-ui.com/).
  - [**Pinia**](https://pinia.vuejs.org/ssr/nuxt.html) The intuitive store for Vue.js
  - Integrated pages: login, registration, password recovery, email confirmation, account information update, password change.
  - Temporary uploads with cropping and optimization of images.
  - Device management
- - [**ofetch**](https://github.com/unjs/ofetch) preset for working with Laravel API, which makes it possible
-use $**fetch** without having to resort to custom $**fetch** wrappers.
+ - Enhanced Fetch Wrappers : Utilizes `$http` and `useHttp`, which extend the capabilities of **Nuxt's** standard `$fetch` and `useFetch`.
 
 ## Requirements
 
  - PHP 8.2+ / Node 20+
  - **Redis** is required for the [**Throttling with Redis**](https://laravel.com/docs/11.x/routing#throttling-with-redis) feature
- - [**Laravel Octane**](https://laravel.com/docs/11.x/octane) supports 2 operating modes: Swoole (php extension) or Roadrunner
+ - [**Laravel Octane**](https://laravel.com/docs/11.x/octane) supports 3 operating modes: Swoole (php extension), Roadrunner and FrankenPHP
 
 ## Installation
 ### Standalone
@@ -106,30 +108,38 @@ sail composer update
 
 ## Usage
 
-### Nuxt $fetch
+### Fetch wrapper
+
+To integrate with the API, enhanced `$http` and `useHttp` wrappers are used, expanding the functionality of Nuxt's standard `$fetch` and `useFetch`. The `$http` wrapper includes custom interceptors to replace the originals:
+- `onFetch` instead of `onRequest`
+- `onFetchError` instead of `onRequestError`
+- `onFetchResponse` instead of `onResponse`
+- `onFetchResponseError` instead of `onResponseError`
 
-To work with the api, the default path is **"/api/v1"**. All requests from **Nuxt** to the **Laravel API** can be executed without wrappers, as described in the **Nuxt.js** documentation. For example, the code for authorizing a user by email and password:
+Additionally, `$http` predefines a base url, authorization headers, and proxy IP for convenient API work in SSR mode.
+For example, the code for authorizing a user by email and password:
 ```vue
 <script lang="ts" setup>
+const nuxtApp = useNuxtApp();
 const router = useRouter();
 const auth = useAuthStore();
-const form = ref();
+const form = templateRef("form");
 const state = reactive({
   email: "",
   password: "",
   remember: false,
 });
 
-const { refresh: onSubmit, status } = useFetch("login", {
+const { refresh: onSubmit, status } = useHttp("login", {
   method: "POST",
   body: state,
   immediate: false,
   watch: false,
-  async onResponse({ response }) {
+  async onFetchResponse({ response }) {
     if (response?.status === 422) {
       form.value.setErrors(response._data?.errors);
     } else if (response._data?.ok) {
-      auth.token = response._data.token;
+      nuxtApp.$token.value = response._data.token;
 
       await auth.fetchUser();
       await router.push("/");
@@ -141,7 +151,7 @@ const loading = computed(() => status.value === "pending");
 </script>
 <template>
   <UForm ref="form" :state="state" @submit="onSubmit" class="space-y-4">
-    <UFormGroup label="Email" name="email" required>
+    <UFormField label="Email" name="email" required>
       <UInput
         v-model="state.email"
         placeholder="you@example.com"
@@ -150,14 +160,14 @@ const loading = computed(() => status.value === "pending");
         type="email"
         autofocus
       />
-    </UFormGroup>
+    </UFormField>
 
-    <UFormGroup label="Password" name="password" required>
-      <UInput v-model="state.password" type="password" />
-    </UFormGroup>
+    <UFormField label="Password" name="password" required>
+      <UInput v-model="state.password" class="w-full" type="password" />
+    </UFormField>
 
-    <UTooltip text="for 1 month" :popper="{ placement: 'right' }">
-      <UCheckbox v-model="state.remember" label="Remember me" />
+    <UTooltip :delay-duration="0" text="for 1 month" :content="{ side: 'right' }">
+      <UCheckbox v-model="state.remember" class="w-full" label="Remember me" />
     </UTooltip>
 
     <div class="flex items-center justify-end space-x-4">
@@ -174,10 +184,10 @@ const loading = computed(() => status.value === "pending");
 
 Data returned by **useAuthStore**:
 * `logged`: Boolean, whether the user is authorized
-* `token`: Cookie, sanctum token
 * `user`: User object, user stored in pinia store
 * `logout`: Function, remove local data and call API to remove token
 * `fetchUser`: Function, fetch user data
+* `hasRole`: Function, checks the role
 
 ### Nuxt Middleware
 
@@ -204,8 +214,8 @@ https://github.com/k2so-dev/laravel-nuxt/assets/15279423/9b134491-1444-4323-a7a3
 
 ## Links
 * [Nuxt 3](https://nuxt.com/)
-* [Nuxt UI](https://ui.nuxt.com/)
-* [Tailwind CSS](https://tailwindcss.com/)
+* [Nuxt UI 3](https://ui3.nuxt.dev/)
+* [Tailwind CSS 4](https://tailwindcss.com/)
 * [Laravel 11x](https://laravel.com/docs/11.x)
 
 ## License
diff --git a/bootstrap/app.php b/bootstrap/app.php
index c51344f..88dd317 100755
--- a/bootstrap/app.php
+++ b/bootstrap/app.php
@@ -20,7 +20,7 @@
         $middleware
             ->throttleApi(redis: true)
             ->trustProxies(at: [
-                '127.0.0.1',
+                '127.0.0.0/8',
                 '10.0.0.0/8',
                 '172.16.0.0/12',
                 '192.168.0.0/16',
@@ -65,7 +65,7 @@
                 'message' => $e->getMessage(),
                 'errors' => array_map(static function (string $field, array $errors): array {
                     return [
-                        'path' => $field,
+                        'name' => $field,
                         'message' => implode(' ', $errors),
                     ];
                 }, array_keys($e->errors()), $e->errors()),
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 6c0ef2d..5d917a4 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -1,6 +1,6 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
-  compatibilityDate: '2024-12-29',
+  compatibilityDate: '2025-01-23',
   rootDir: 'nuxt/',
 
   future: {
@@ -42,9 +42,7 @@ export default defineNuxtConfig({
     'auth/verify': { ssr: false }
   },
 
-  tailwindcss: {
-    cssPath: '@/assets/css/main.css',
-  },
+  css: ['~/assets/css/main.css'],
 
   /**
    * @see https://v3.nuxtjs.org/api/configuration/nuxt.config#modules
@@ -100,7 +98,8 @@ export default defineNuxtConfig({
         google: {
           name: "Google",
           icon: "",
-          color: "gray",
+          color: "neutral",
+          variant: "soft",
         },
       },
     },
diff --git a/nuxt/app/app.config.ts b/nuxt/app/app.config.ts
index 35f2104..15125e3 100644
--- a/nuxt/app/app.config.ts
+++ b/nuxt/app/app.config.ts
@@ -1,14 +1,23 @@
 export default defineAppConfig({
   ui: {
-    primary: 'emerald',
-    strategy: 'override',
-    gray: 'neutral',
     container: {
-      constrained: 'max-w-7xl w-full'
+      base: 'max-w-7xl w-full'
     },
-    avatar: {
-      default: {
-        icon: 'i-heroicons-user',
+    colors: {
+      primary: 'emerald',
+      neutral: 'zinc'
+    },
+    theme: {
+      colors: ['primary', 'secondary', 'tertiary', 'info', 'success', 'warning', 'error']
+    },
+    button: {
+      slots: {
+        base: 'cursor-pointer',
+      }
+    },
+    dropdownMenu: {
+      slots: {
+        item: 'cursor-pointer',
       }
     }
   }
diff --git a/nuxt/app/app.vue b/nuxt/app/app.vue
index 7f2686b..4daf376 100644
--- a/nuxt/app/app.vue
+++ b/nuxt/app/app.vue
@@ -1,24 +1,21 @@
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+const auth = useAuthStore();
 
-<template>
-  <AppHeader />
-
-  <UContainer as="main" class="flex-grow py-4 sm:py-7 flex flex-col">
-    <NuxtPage />
-  </UContainer>
+if (auth.logged) {
+  await auth.fetchUser();
+}
+</script>
 
-  <AppFooter />
+<template>
+  <UApp>
+    <AppHeader />
 
-  <NuxtLoadingIndicator class="!opacity-100" :throttle="0" />
+    <UContainer as="main" class="flex-grow py-4 sm:py-7 flex flex-col">
+      <NuxtPage />
+    </UContainer>
 
-  <UModals />
+    <AppFooter />
 
-  <UNotifications>
-    <template #title="{ title }">
-      <span v-html="title" />
-    </template>
-    <template #description="{ description }">
-      <span v-html="description" />
-    </template>
-  </UNotifications>
+    <NuxtLoadingIndicator class="!opacity-100" :throttle="0" />
+  </UApp>
 </template>
diff --git a/nuxt/app/assets/css/main.css b/nuxt/app/assets/css/main.css
index e90fc35..8470f6d 100644
--- a/nuxt/app/assets/css/main.css
+++ b/nuxt/app/assets/css/main.css
@@ -1,6 +1,23 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+@import "@nuxt/ui";
+
+:root {
+    --ui-radius: var(--radius-sm);
+}
+
+@theme {
+    --color-primary-50: var(--ui-color-primary-50);
+    --color-primary-100: var(--ui-color-primary-100);
+    --color-primary-200: var(--ui-color-primary-200);
+    --color-primary-300: var(--ui-color-primary-300);
+    --color-primary-400: var(--ui-color-primary-400);
+    --color-primary-500: var(--ui-color-primary-500);
+    --color-primary-600: var(--ui-color-primary-600);
+    --color-primary-700: var(--ui-color-primary-700);
+    --color-primary-800: var(--ui-color-primary-800);
+    --color-primary-900: var(--ui-color-primary-900);
+    --color-primary-950: var(--ui-color-primary-950);
+}
 
 @layer base {
   #__nuxt {
@@ -8,11 +25,11 @@
   }
 
   html {
-    @apply text-gray-800 dark:bg-gray-900;
+    @apply text-neutral-800 dark:bg-gray-900;
   }
 
   html.dark {
-    @apply text-gray-50 bg-gray-900;
+    @apply text-neutral-50 bg-gray-900;
   }
 
   button, a, [role="button"] {
diff --git a/nuxt/app/components/account/UpdatePassword.vue b/nuxt/app/components/account/UpdatePassword.vue
index 45f4de9..9fee8a3 100644
--- a/nuxt/app/components/account/UpdatePassword.vue
+++ b/nuxt/app/components/account/UpdatePassword.vue
@@ -1,6 +1,9 @@
 <script lang="ts" setup>
-const form = ref();
+import type { Form } from "#ui/types";
+
+const form = useTemplateRef<Form<any>>('form');
 const auth = useAuthStore();
+const toast = useToast();
 
 const state = reactive({
   current_password: "",
@@ -8,19 +11,19 @@ const state = reactive({
   password_confirmation: "",
 });
 
-const { refresh: onSubmit, status: accountPasswordStatus } = useFetch<any>("account/password", {
+const { refresh: onSubmit, status: accountPasswordStatus } = useHttp<any>("account/password", {
   method: "POST",
   body: state,
   immediate: false,
   watch: false,
-  async onResponse({ response }) {
+  async onFetchResponse({ response }) {
     if (response?.status === 422) {
       form.value.setErrors(response._data?.errors);
     } else if (response._data?.ok) {
-      useToast().add({
+      toast.add({
         icon: "i-heroicons-check-circle-20-solid",
         title: "The password was successfully updated.",
-        color: "emerald",
+        color: "success",
       });
 
       state.current_password = "";
@@ -30,17 +33,17 @@ const { refresh: onSubmit, status: accountPasswordStatus } = useFetch<any>("acco
   }
 });
 
-const { refresh: sendResetPasswordEmail, status: resetPasswordEmailStatus } = useFetch<any>("forgot-password", {
+const { refresh: sendResetPasswordEmail, status: resetPasswordEmailStatus } = useHttp<any>("forgot-password", {
   method: "POST",
   body: { email: auth.user.email },
   immediate: false,
   watch: false,
-  onResponse({ response }) {
+  onFetchResponse({ response }) {
     if (response._data?.ok) {
-      useToast().add({
+      toast.add({
         icon: "i-heroicons-check-circle-20-solid",
         title: "A link to reset your password has been sent to your email.",
-        color: "emerald",
+        color: "success",
       });
     }
   }
@@ -56,27 +59,27 @@ const { refresh: sendResetPasswordEmail, status: resetPasswordEmailStatus } = us
       @submit="onSubmit"
       class="space-y-4"
     >
-      <UFormGroup label="Current Password" name="current_password" required>
-        <UInput v-model="state.current_password" type="password" autocomplete="off" />
-      </UFormGroup>
+      <UFormField label="Current Password" name="current_password" required>
+        <UInput v-model="state.current_password" class="w-full" type="password" autocomplete="off" />
+      </UFormField>
 
-      <UFormGroup
+      <UFormField
         label="New Password"
         name="password"
         hint="min 8 characters"
-        :ui="{ hint: 'text-xs text-gray-500 dark:text-gray-400' }"
         required
       >
-        <UInput v-model="state.password" type="password" autocomplete="off" />
-      </UFormGroup>
+        <UInput v-model="state.password" class="w-full" type="password" autocomplete="off" />
+      </UFormField>
 
-      <UFormGroup label="Repeat Password" name="password_confirmation" required>
+      <UFormField label="Repeat Password" name="password_confirmation" required>
         <UInput
           v-model="state.password_confirmation"
+          class="w-full"
           type="password"
           autocomplete="off"
         />
-      </UFormGroup>
+      </UFormField>
 
       <div class="pt-2">
         <UButton type="submit" label="Save" :loading="accountPasswordStatus === 'pending'" />
@@ -85,16 +88,20 @@ const { refresh: sendResetPasswordEmail, status: resetPasswordEmailStatus } = us
 
     <UAlert
       v-else
+      variant="outline"
+      color="neutral"
       icon="i-heroicons-information-circle-20-solid"
       title="Send a link to your email to reset your password."
       description="To create a password for your account, you must go through the password recovery process."
       :actions="[
         {
           label: 'Send link to Email',
-          variant: 'solid',
-          color: 'gray',
+          variant: 'subtle',
+          color: 'neutral' as const,
           loading: resetPasswordEmailStatus === 'pending',
-          click: sendResetPasswordEmail,
+          onClick(event) {
+            sendResetPasswordEmail();
+          },
         },
       ]"
     />
diff --git a/nuxt/app/components/account/UpdateProfile.vue b/nuxt/app/components/account/UpdateProfile.vue
index a0dbb9e..756b8e0 100644
--- a/nuxt/app/components/account/UpdateProfile.vue
+++ b/nuxt/app/components/account/UpdateProfile.vue
@@ -1,6 +1,9 @@
 <script lang="ts" setup>
-const form = ref();
+import type { Form } from "#ui/types";
+
+const form = useTemplateRef<Form<any>>('form');
 const auth = useAuthStore();
+const toast = useToast();
 
 const state = reactive({
   ...{
@@ -10,35 +13,35 @@ const state = reactive({
   },
 });
 
-const { refresh: sendEmailVerification, status: resendEmailStatus } = useFetch<any>("verification-notification", {
+const { refresh: sendEmailVerification, status: resendEmailStatus } = useHttp<any>("verification-notification", {
   method: "POST",
   body: { email: state.email },
   immediate: false,
   watch: false,
-  onResponse({ response }) {
+  onFetchResponse({ response }) {
     if (response._data?.ok) {
-      useToast().add({
+      toast.add({
         icon: "i-heroicons-check-circle-20-solid",
         title: response._data.message,
-        color: "emerald",
+        color: "success",
       });
     }
   }
 });
 
-const { refresh: onSubmit, status: accountUpdateStatus } = useFetch<any>("account/update", {
+const { refresh: onSubmit, status: accountUpdateStatus } = useHttp<any>("account/update", {
   method: "POST",
   body: state,
   immediate: false,
   watch: false,
-  async onResponse({ response }) {
+  async onFetchResponse({ response }) {
     if (response?.status === 422) {
       form.value.setErrors(response._data?.errors);
     } else if (response._data?.ok) {
-      useToast().add({
+      toast.add({
         icon: "i-heroicons-check-circle-20-solid",
         title: "Account details have been successfully updated.",
-        color: "emerald",
+        color: "success",
       });
 
       await auth.fetchUser();
@@ -53,43 +56,48 @@ const { refresh: onSubmit, status: accountUpdateStatus } = useFetch<any>("accoun
 
 <template>
   <UForm ref="form" :state="state" @submit="onSubmit" class="space-y-4">
-    <UFormGroup label="" name="avatar" class="flex">
+    <UFormField label="" name="avatar" class="flex">
       <InputUploadImage
         v-model="state.avatar"
         accept=".png, .jpg, .jpeg, .webp"
         entity="avatars"
-        max-size="2"
+        max-size="5"
         :width="300"
         :height="300"
       />
-    </UFormGroup>
+    </UFormField>
 
-    <UFormGroup label="Name" name="name" required>
-      <UInput v-model="state.name" type="text" />
-    </UFormGroup>
+    <UFormField label="Name" name="name" required>
+      <UInput v-model="state.name" type="text" class="w-full" />
+    </UFormField>
 
-    <UFormGroup label="Email" name="email" required>
+    <UFormField label="Email" name="email" required>
       <UInput
         v-model="state.email"
         placeholder="you@example.com"
         icon="i-heroicons-envelope"
         trailing
         type="email"
+        class="w-full"
       />
-    </UFormGroup>
+    </UFormField>
 
     <UAlert
       v-if="auth.user.must_verify_email"
+      variant="outline"
+      color="neutral"
       icon="i-heroicons-information-circle-20-solid"
       title="Please confirm your email address."
       description="A confirmation email has been sent to your email address. Please click on the confirmation link in the email to verify your email address."
       :actions="[
         {
           label: 'Resend verification email',
-          variant: 'solid',
-          color: 'gray',
+          variant: 'subtle',
+          color: 'neutral' as const,
           loading: resendEmailStatus === 'pending',
-          click: sendEmailVerification,
+          onClick(event) {
+              sendEmailVerification();
+          },
         },
       ]"
     />
diff --git a/nuxt/app/components/app/Header.vue b/nuxt/app/components/app/Header.vue
index 5de1e22..3bbc9bf 100644
--- a/nuxt/app/components/app/Header.vue
+++ b/nuxt/app/components/app/Header.vue
@@ -5,9 +5,7 @@ const { $storage } = useNuxtApp();
 const userItems = [
   [
     {
-      label: "User",
       slot: "overview",
-      disabled: true,
     },
   ],
   [
@@ -25,47 +23,151 @@ const userItems = [
   [
     {
       label: "Sign out",
-      click: auth.logout,
+      onSelect() {
+        auth.logout();
+      },
+      class: 'cursor-pointer',
       icon: "i-heroicons-arrow-left-on-rectangle",
     },
   ],
 ];
 
-const navItems = [
+const items = [
   {
-    label: "Nuxt.js Docs",
-    to: "https://nuxt.com/docs/getting-started/introduction",
-    target: "_blank",
-    icon: "i-heroicons-link-20-solid",
+    label: 'Guide',
+    icon: 'i-lucide-book-open',
+    active: true,
+    children: [
+      {
+        label: 'Nuxt.js Docs',
+        description: 'Nuxt aims to simplify and optimize web dev with great developer experience.',
+        icon: 'i-simple-icons:nuxt',
+        to: "https://nuxt.com/docs/getting-started/introduction",
+        target: "_blank",
+      },
+      {
+        label: 'Nuxt UI v3 Docs',
+        description: 'Nuxt UI library: Styled, accessible, customizable components for web apps.',
+        icon: 'i-simple-icons:nuxt',
+        to: "https://ui3.nuxt.dev/getting-started",
+        target: "_blank",
+      },
+      {
+        label: 'Laravel 11.x',
+        description: 'Laravel is a web application framework with expressive, elegant syntax.',
+        icon: 'i-simple-icons:laravel',
+        to: "https://laravel.com/docs/11.x",
+        target: "_blank",
+      },
+      {
+        label: 'Tailwind CSS 4',
+        icon: 'i-simple-icons:tailwindcss',
+        description: 'Rapidly build modern websites without ever leaving your HTML.',
+        to: "https://tailwindcss.com/docs/v4-beta",
+        target: "_blank",
+      }
+    ]
   },
   {
-    label: "Nuxt UI",
-    to: "https://ui.nuxt.com/getting-started",
+    label: 'UI Components',
+    icon: 'i-lucide-box',
+    to: 'https://ui3.nuxt.dev/components',
     target: "_blank",
-    icon: "i-heroicons-link-20-solid",
+    children: [
+      {
+        label: 'Link',
+        icon: 'i-lucide-file-text',
+        description: 'Use NuxtLink with superpowers.',
+        to: 'https://ui3.nuxt.dev/components/link',
+        target: "_blank",
+      },
+      {
+        label: 'Modal',
+        icon: 'i-lucide-file-text',
+        description: 'Display a modal within your application.',
+        to: 'https://ui3.nuxt.dev/components/modal',
+        target: "_blank",
+      },
+      {
+        label: 'NavigationMenu',
+        icon: 'i-lucide-file-text',
+        description: 'Display a list of links.',
+        to: 'https://ui3.nuxt.dev/components/navigation-menu',
+        target: "_blank",
+      },
+      {
+        label: 'Pagination',
+        icon: 'i-lucide-file-text',
+        description: 'Display a list of pages.',
+        to: 'https://ui3.nuxt.dev/components/pagination',
+        target: "_blank",
+      },
+      {
+        label: 'Popover',
+        icon: 'i-lucide-file-text',
+        description: 'Display a non-modal dialog that floats around a trigger element.',
+        to: 'https://ui3.nuxt.dev/components/popover',
+        target: "_blank",
+      },
+      {
+        label: 'Progress',
+        icon: 'i-lucide-file-text',
+        description: 'Show a horizontal bar to indicate task progression.',
+        to: 'https://ui3.nuxt.dev/components/progress',
+        target: "_blank",
+      }
+    ]
   },
   {
-    label: "Laravel 11.x",
-    to: "https://laravel.com/docs/11.x",
+    label: 'UI Composables',
+    icon: 'i-lucide-database',
+    to: 'https://ui3.nuxt.dev/composables',
     target: "_blank",
-    icon: "i-heroicons-link-20-solid",
+    children: [
+      {
+        label: 'defineShortcuts',
+        icon: 'i-lucide-file-text',
+        description: 'Define shortcuts for your application.',
+        to: 'https://ui3.nuxt.dev/composables/define-shortcuts',
+        target: "_blank",
+      },
+      {
+        label: 'useModal',
+        icon: 'i-lucide-file-text',
+        description: 'Display a modal within your application.',
+        to: 'https://ui3.nuxt.dev/composables/use-modal',
+        target: "_blank",
+      },
+      {
+        label: 'useSlideover',
+        icon: 'i-lucide-file-text',
+        description: 'Display a slideover within your application.',
+        to: 'https://ui3.nuxt.dev/composables/use-slideover',
+        target: "_blank",
+      },
+      {
+        label: 'useToast',
+        icon: 'i-lucide-file-text',
+        description: 'Display a toast within your application.',
+        to: 'https://ui3.nuxt.dev/composables/use-toast',
+        target: "_blank",
+      }
+    ]
   },
-];
+  {
+    label: 'GitHub',
+    icon: 'i-simple-icons-github',
+    to: 'https://github.com/k2so-dev/laravel-nuxt',
+    target: '_blank'
+  },
+  {
+    label: 'Help',
+    icon: 'i-lucide-circle-help',
+    disabled: true
+  }
+]
 
 const isSideOpen = ref(false);
-const openSide = () => {
-  isSideOpen.value = true;
-};
-
-defineShortcuts({
-  escape: {
-    usingInput: true,
-    whenever: [isSideOpen],
-    handler: () => {
-      isSideOpen.value = false;
-    },
-  },
-});
 </script>
 <template>
   <header
@@ -74,75 +176,68 @@ defineShortcuts({
     <UContainer class="flex items-center justify-between gap-3 h-16 py-2">
       <AppLogo class="lg:flex-1" />
 
-      <nav class="hidden lg:flex">
-        <ul class="flex flex-col items-end lg:flex-row lg:items-center lg:gap-x-8">
-          <li v-for="item in navItems" class="relative">
-            <NuxtLink
-              class="text-sm/6 font-semibold flex items-center gap-1 hover:text-primary"
-              :to="item.to"
-              :target="item.target"
-              >{{ item.label }}</NuxtLink
-            >
-          </li>
-        </ul>
-      </nav>
+      <UNavigationMenu orientation="horizontal" :items="items" class="hidden lg:block" />
 
       <div class="flex items-center justify-end gap-3 lg:flex-1">
         <AppTheme />
 
-        <UDropdown
+        <UDropdownMenu
           v-if="auth.logged"
           :items="userItems"
-          :ui="{ item: { disabled: 'cursor-text select-text' } }"
-          :popper="{ placement: 'bottom-end' }"
+          :content="{ side: 'bottom', align: 'end' }"
         >
-          <UAvatar
-            size="sm"
-            :src="$storage(auth.user.avatar)"
-            :alt="auth.user.name"
-            :ui="{ rounded: 'rounded-md' }"
-          />
+          <ULink class="cursor-pointer">
+            <UAvatar
+              icon="i-heroicons-user"
+              size="md"
+              :src="$storage(auth.user.avatar)"
+              :alt="auth.user.name"
+            />
+          </ULink>
 
           <template #overview>
             <div class="text-left">
               <p>Signed in as</p>
-              <p class="truncate font-medium text-gray-900 dark:text-white">
+              <p class="truncate font-medium text-neutral-900 dark:text-white">
                 {{ auth.user.email }}
               </p>
             </div>
           </template>
-        </UDropdown>
-        <UButton v-else label="Log In" to="/auth/login" variant="ghost" color="gray" />
+        </UDropdownMenu>
+        <UButton v-else label="Log In" to="/auth/login" variant="ghost" color="neutral" />
+
+        <UDrawer
+          v-model:open="isSideOpen"
+          direction="right"
+        >
+          <UButton
+            class="lg:hidden"
+            variant="ghost"
+            color="neutral"
+            icon="i-heroicons-bars-3"
+          />
+          <template #content>
+            <div class="me-5">
+              <div
+                class="flex w-3xs items-center justify-between gap-3 h-16 py-2 border-b border-dashed border-gray-200/80 dark:border-gray-800/80"
+              >
+                <AppLogo />
+                <UButton
+                  variant="ghost"
+                  color="neutral"
+                  icon="i-heroicons-x-mark-20-solid"
+                  @click="isSideOpen = false"
+                />
+              </div>
 
-        <UButton
-          class="lg:hidden"
-          variant="ghost"
-          color="gray"
-          icon="i-heroicons-bars-3"
-          @click="isSideOpen = true"
-        />
+              <div class="flex-1 py-4 sm:py-6">
+                <UNavigationMenu orientation="vertical" :items="items" />
+              </div>
+            </div>
+          </template>
+        </UDrawer>
       </div>
     </UContainer>
   </header>
 
-  <USlideover v-model="isSideOpen" :ui="{ width: 'max-w-xs' }" @close="">
-    <UContainer
-      class="flex items-center justify-between gap-3 h-16 py-2 border-b border-dashed border-gray-200/80 dark:border-gray-800/80"
-    >
-      <AppLogo />
-      <UButton
-        variant="ghost"
-        color="gray"
-        icon="i-heroicons-x-mark-20-solid"
-        @click="isSideOpen = false"
-      />
-    </UContainer>
-    <UContainer class="flex-1 py-4 sm:py-6">
-      <UVerticalNavigation :links="navItems">
-        <template #default="{ link }">
-          <span class="group-hover:text-primary relative">{{ link.label }}</span>
-        </template>
-      </UVerticalNavigation>
-    </UContainer>
-  </USlideover>
 </template>
diff --git a/nuxt/app/components/app/Logo.vue b/nuxt/app/components/app/Logo.vue
index e3a7e1b..c251061 100644
--- a/nuxt/app/components/app/Logo.vue
+++ b/nuxt/app/components/app/Logo.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup></script>
 <template>
   <NuxtLink to="/" class="font-black text-2xl leading-tight tracking-tight">
-    <span class="text-gray-700 dark:text-gray-100">Laravel</span>
+    <span class="text-neutral-700 dark:text-neutral-100">Laravel</span>
     <span class="text-primary-500">Nuxt</span>
   </NuxtLink>
 </template>
diff --git a/nuxt/app/components/app/Theme.vue b/nuxt/app/components/app/Theme.vue
index c3b1c51..b7fb2ea 100644
--- a/nuxt/app/components/app/Theme.vue
+++ b/nuxt/app/components/app/Theme.vue
@@ -13,7 +13,7 @@ const isDark = computed({
   <ClientOnly>
     <UButton
       :icon="isDark ? 'i-heroicons-moon-20-solid' : 'i-heroicons-sun-20-solid'"
-      color="gray"
+      color="neutral"
       variant="ghost"
       aria-label="Theme"
       @click="isDark = !isDark"
diff --git a/nuxt/app/components/auth/ForgotPassword.vue b/nuxt/app/components/auth/ForgotPassword.vue
index 63c73ca..82c56e8 100644
--- a/nuxt/app/components/auth/ForgotPassword.vue
+++ b/nuxt/app/components/auth/ForgotPassword.vue
@@ -1,23 +1,26 @@
 <script lang="ts" setup>
-const form = ref();
+import type { Form } from "#ui/types";
+
+const form = useTemplateRef<Form<any>>('form');
+const toast = useToast();
 
 const state = reactive({
   email: "",
 });
 
-const { refresh: onSubmit, status: forgotStatus } = useFetch<any>("forgot-password", {
+const { refresh: onSubmit, status: forgotStatus } = useHttp<any>("forgot-password", {
   method: "POST",
   body: state,
   immediate: false,
   watch: false,
-  async onResponse({ response }) {
+  async onFetchResponse({ response }) {
     if (response?.status === 422) {
       form.value.setErrors(response._data?.errors);
     } else if (response._data?.ok) {
-      useToast().add({
+      toast.add({
         title: "Success",
         description: response._data.message,
-        color: "emerald",
+        color: "success",
       });
     }
   }
@@ -27,16 +30,17 @@ const { refresh: onSubmit, status: forgotStatus } = useFetch<any>("forgot-passwo
 <template>
   <div class="space-y-4">
     <UForm ref="form" :state="state" @submit="onSubmit" class="space-y-4">
-      <UFormGroup label="Email" name="email" required>
+      <UFormField label="Email" name="email" required>
         <UInput
           v-model="state.email"
+          class="w-full"
           placeholder="you@example.com"
           icon="i-heroicons-envelope"
           trailing
           type="email"
           autofocus
         />
-      </UFormGroup>
+      </UFormField>
 
       <div class="flex items-center justify-end space-x-4">
         <UButton type="submit" label="Send reset link" :loading="forgotStatus === 'pending'" />
diff --git a/nuxt/app/components/auth/Login.vue b/nuxt/app/components/auth/Login.vue
index 49f2141..22c663b 100644
--- a/nuxt/app/components/auth/Login.vue
+++ b/nuxt/app/components/auth/Login.vue
@@ -1,15 +1,13 @@
 <script lang="ts" setup>
+import type { Form, ButtonProps } from "#ui/types";
+import type { AuthProviders } from "~";
+
 const config = useRuntimeConfig();
 const router = useRouter();
 const auth = useAuthStore();
-const form = ref();
-
-type Provider = {
-  name: string;
-  icon: string;
-  color: string;
-  loading?: boolean;
-};
+const form = useTemplateRef<Form<any>>('form');
+const toast = useToast();
+const nuxtApp = useNuxtApp();
 
 const state = reactive({
   email: "",
@@ -17,16 +15,16 @@ const state = reactive({
   remember: false,
 });
 
-const { refresh: onSubmit, status: loginStatus } = useFetch<any>("login", {
+const { refresh: onSubmit, status: loginStatus } = useHttp<any>("login", {
   method: "POST",
   body: state,
   immediate: false,
   watch: false,
-  async onResponse({ response }) {
+  async onFetchResponse({ response }) {
     if (response?.status === 422) {
       form.value.setErrors(response._data?.errors);
     } else if (response._data?.ok) {
-      auth.token = response._data.token;
+      nuxtApp.$token.value = response._data.token;
 
       await auth.fetchUser();
       await router.push("/");
@@ -34,21 +32,21 @@ const { refresh: onSubmit, status: loginStatus } = useFetch<any>("login", {
   }
 });
 
-const providers = ref<{ [key: string]: Provider }>(config.public.providers);
+const providers = ref<AuthProviders>(config.public.providers);
 
 async function handleMessage(event: { data: any }): Promise<void> {
   const provider = event.data.provider as string;
 
   if (Object.keys(providers.value).includes(provider) && event.data.token) {
     providers.value[provider].loading = false;
-    auth.token = event.data.token;
+    nuxtApp.$token.value = event.data.token;
 
     await auth.fetchUser();
     await router.push("/");
   } else if (event.data.message) {
-    useToast().add({
+    toast.add({
       icon: "i-heroicons-exclamation-circle-solid",
-      color: "red",
+      color: "error",
       title: event.data.message,
     });
   }
@@ -88,7 +86,8 @@ onBeforeUnmount(() => window.removeEventListener("message", handleMessage));
         :key="key"
         :loading="provider.loading"
         :icon="provider.icon"
-        :color="provider.color"
+        :color="provider.color as ButtonProps['color']"
+        :variant="provider.variant as ButtonProps['variant']"
         :label="provider.name"
         size="lg"
         class="w-full flex items-center justify-center"
@@ -96,26 +95,27 @@ onBeforeUnmount(() => window.removeEventListener("message", handleMessage));
       />
     </div>
 
-    <UDivider label="OR" />
+    <USeparator label="OR" />
 
     <UForm ref="form" :state="state" @submit="onSubmit" class="space-y-4">
-      <UFormGroup label="Email" name="email" required>
+      <UFormField label="Email" name="email" required>
         <UInput
           v-model="state.email"
+          class="w-full"
           placeholder="you@example.com"
           icon="i-heroicons-envelope"
           trailing
           type="email"
           autofocus
         />
-      </UFormGroup>
+      </UFormField>
 
-      <UFormGroup label="Password" name="password" required>
-        <UInput v-model="state.password" type="password" />
-      </UFormGroup>
+      <UFormField label="Password" name="password" required>
+        <UInput v-model="state.password" type="password" class="w-full" placeholder="••••••••" />
+      </UFormField>
 
-      <UTooltip text="for 1 month" :popper="{ placement: 'right' }">
-        <UCheckbox v-model="state.remember" label="Remember me" />
+      <UTooltip :delay-duration="0" text="for 1 month" :content="{ side: 'right' }">
+        <UCheckbox v-model="state.remember" label="Remember me" class="inline-flex" />
       </UTooltip>
 
       <div class="flex items-center justify-end space-x-4">
diff --git a/nuxt/app/components/auth/Register.vue b/nuxt/app/components/auth/Register.vue
index 6cb4c0d..fbb4808 100644
--- a/nuxt/app/components/auth/Register.vue
+++ b/nuxt/app/components/auth/Register.vue
@@ -1,6 +1,9 @@
 <script lang="ts" setup>
+import type { Form } from "#ui/types";
+
 const router = useRouter();
-const form = ref();
+const form = useTemplateRef<Form<any>>('form');
+const toast = useToast();
 
 const state = reactive({
   name: "",
@@ -9,24 +12,24 @@ const state = reactive({
   password_confirmation: "",
 });
 
-const { refresh: onSubmit, status: registerStatus } = useFetch<any>("register", {
+const { refresh: onSubmit, status: registerStatus } = useHttp<any>("register", {
   method: "POST",
   body: state,
   immediate: false,
   watch: false,
-  async onResponse({ response }) {
+  async onFetchResponse({ response }) {
     if (response?.status === 422) {
       form.value.setErrors(response._data?.errors);
     } else if (response._data?.ok) {
-      useToast().add({
+      toast.add({
         icon: "i-heroicons-check-circle-20-solid",
         title: "You have been registered successfully.",
-        color: "emerald",
+        color: "success",
         actions: [
           {
             label: "Log In now",
             to: "/auth/login",
-            color: "emerald",
+            color: "success",
           },
         ],
       });
@@ -40,37 +43,38 @@ const { refresh: onSubmit, status: registerStatus } = useFetch<any>("register",
 <template>
   <div class="space-y-4">
     <UForm ref="form" :state="state" @submit="onSubmit" class="space-y-4">
-      <UFormGroup label="Name" name="name" required>
-        <UInput v-model="state.name" type="text" autofocus />
-      </UFormGroup>
+      <UFormField label="Name" name="name" required>
+        <UInput v-model="state.name" class="w-full" type="text" autofocus />
+      </UFormField>
 
-      <UFormGroup label="Email" name="email" required>
+      <UFormField label="Email" name="email" required>
         <UInput
           v-model="state.email"
+          class="w-full"
           placeholder="you@example.com"
           icon="i-heroicons-envelope"
           trailing
           type="email"
         />
-      </UFormGroup>
+      </UFormField>
 
-      <UFormGroup
+      <UFormField
         label="Password"
         name="password"
         hint="min 8 characters"
-        :ui="{ hint: 'text-xs text-gray-500 dark:text-gray-400' }"
         required
       >
-        <UInput v-model="state.password" type="password" autocomplete="off" />
-      </UFormGroup>
+        <UInput v-model="state.password" class="w-full" type="password" autocomplete="off" />
+      </UFormField>
 
-      <UFormGroup label="Repeat Password" name="password_confirmation" required>
+      <UFormField label="Repeat Password" name="password_confirmation" required>
         <UInput
           v-model="state.password_confirmation"
+          class="w-full"
           type="password"
           autocomplete="off"
         />
-      </UFormGroup>
+      </UFormField>
 
       <div class="flex items-center justify-end space-x-4">
         <UButton type="submit" label="Sign Up" :loading="registerStatus === 'pending'" />
diff --git a/nuxt/app/components/input/UploadImage.vue b/nuxt/app/components/input/UploadImage.vue
index ed7a63c..8dfe4e1 100644
--- a/nuxt/app/components/input/UploadImage.vue
+++ b/nuxt/app/components/input/UploadImage.vue
@@ -1,8 +1,9 @@
 <script lang="ts" setup>
 const props = defineProps(["modelValue", "entity", "accept", "maxSize", "width", "height"]);
 const emit = defineEmits(["update:modelValue"]);
+const toast = useToast();
 
-const { $storage } = useNuxtApp();
+const { $storage, $http } = useNuxtApp();
 
 const value = computed({
   get() {
@@ -13,7 +14,7 @@ const value = computed({
   },
 });
 
-const inputRef = ref();
+const inputRef = useTemplateRef('inputRef');
 const loading = ref(false);
 
 const onSelect = async (e: any) => {
@@ -21,9 +22,9 @@ const onSelect = async (e: any) => {
   e.target.value = null;
 
   if (file.size > props.maxSize * 1024 * 1024) {
-    return useToast().add({
+    return toast.add({
       title: "File is too large.",
-      color: "red",
+      color: "error",
       icon: "i-heroicons-exclamation-circle-solid",
     });
   }
@@ -33,7 +34,7 @@ const onSelect = async (e: any) => {
   const formData = new FormData();
   formData.append("image", file);
 
-  await $fetch<any>("upload", {
+  await $http("upload", {
     method: "POST",
     body: formData,
     params: {
@@ -42,11 +43,11 @@ const onSelect = async (e: any) => {
       height: props.height ?? null,
     },
     ignoreResponseError: true,
-    onResponse({ response }) {
+    onFetchResponse({ response }) {
       if (response.status !== 200) {
-        useToast().add({
+        toast.add({
           icon: 'i-heroicons-exclamation-circle-solid',
-          color: 'red',
+          color: "error",
           title: response._data?.message ?? response.statusText ?? 'Something went wrong',
         });
       } else if (response._data?.ok) {
@@ -64,22 +65,24 @@ const onSelect = async (e: any) => {
     <div class="relative flex">
       <UAvatar
         :src="$storage(value)"
-        size="3xl"
+        width="80"
+        height="80"
         img-class="object-cover"
-        :ui="{ rounded: 'rounded-lg' }"
+        class="w-20 h-20"
       />
 
       <UTooltip
         text="Upload"
         class="absolute top-0 end-0 -m-2"
-        :popper="{ placement: 'right' }"
+        :content="{ side: 'right' }"
       >
         <UButton
           type="button"
-          color="gray"
+          color="neutral"
           icon="i-heroicons-cloud-arrow-up"
-          size="2xs"
-          :ui="{ rounded: 'rounded-full' }"
+          size="xs"
+          variant="soft"
+          class="rounded-full"
           :loading="loading"
           @click="inputRef.click()"
         />
@@ -87,14 +90,15 @@ const onSelect = async (e: any) => {
       <UTooltip
         text="Delete"
         class="absolute bottom-0 end-0 -m-2"
-        :popper="{ placement: 'right' }"
+        :content="{ side: 'right' }"
       >
         <UButton
           type="button"
-          color="gray"
+          color="neutral"
           icon="i-heroicons-x-mark-20-solid"
-          size="2xs"
-          :ui="{ rounded: 'rounded-full' }"
+          size="xs"
+          variant="soft"
+          class="rounded-full"
           :disabled="loading"
           @click="value = ''"
         />
diff --git a/nuxt/app/components/modal/Demo.vue b/nuxt/app/components/modal/Demo.vue
index 83d7f32..4996de9 100644
--- a/nuxt/app/components/modal/Demo.vue
+++ b/nuxt/app/components/modal/Demo.vue
@@ -2,17 +2,12 @@
 const modal = useModal()
 </script>
 <template>
-  <UModal>
-    <UCard>
-      <template #header>
-        <div class="text-2xl leading-tight font-black">Welcome to LaravelNuxt</div>
-      </template>
-
+  <UModal title="Welcome to LaravelNuxt">
+    <template #body>
       <USkeleton class="w-full h-60" />
-
-      <template #footer>
-        <UButton label="Close" @click="modal.close" color="gray" />
-      </template>
-    </UCard>
+    </template>
+    <template #footer>
+      <UButton label="Close" @click="modal.close" color="neutral" variant="soft" />
+    </template>
   </UModal>
 </template>
diff --git a/nuxt/app/composables/useHttp.ts b/nuxt/app/composables/useHttp.ts
new file mode 100644
index 0000000..9588db1
--- /dev/null
+++ b/nuxt/app/composables/useHttp.ts
@@ -0,0 +1,12 @@
+import type { $Fetch } from 'nitropack/types';
+import type { HttpUseFetchOptions } from '~';
+
+export function useHttp<T>(
+  url: string | (() => string),
+  options?: HttpUseFetchOptions<T>,
+) {
+  return useFetch(url, {
+    ...options,
+    $fetch: useNuxtApp().$http as $Fetch
+  });
+}
\ No newline at end of file
diff --git a/nuxt/app/composables/useLazyHttp.ts b/nuxt/app/composables/useLazyHttp.ts
new file mode 100644
index 0000000..78ef045
--- /dev/null
+++ b/nuxt/app/composables/useLazyHttp.ts
@@ -0,0 +1,12 @@
+import type { $Fetch } from 'nitropack/types';
+import type { HttpUseFetchOptions } from '~';
+
+export function useLazyHttp<T>(
+  url: string | (() => string),
+  options?: HttpUseFetchOptions<T>,
+) {
+  return useLazyFetch(url, {
+    ...options,
+    $fetch: useNuxtApp().$http as $Fetch
+  });
+}
\ No newline at end of file
diff --git a/nuxt/app/error.vue b/nuxt/app/error.vue
index f16bb85..a8e000d 100644
--- a/nuxt/app/error.vue
+++ b/nuxt/app/error.vue
@@ -21,7 +21,7 @@ useSeoMeta({
     <div>
       <UButton
         @click="handleError"
-        color="gray"
+        color="neutral"
         size="xl"
         variant="ghost"
         label="Go back"
diff --git a/nuxt/app/index.d.ts b/nuxt/app/index.d.ts
index b0d4834..de2ba80 100644
--- a/nuxt/app/index.d.ts
+++ b/nuxt/app/index.d.ts
@@ -1,7 +1,59 @@
+import type { NitroFetchRequest, NitroFetchOptions } from 'nitropack/types';
+import type { FetchContext, FetchOptions, FetchResponse, ResolvedFetchOptions } from 'ofetch';
+import type { UseFetchOptions } from 'nuxt/app';
+import type { $Fetch } from 'nitropack/types';
+
 declare module '#app' {
   interface NuxtApp {
-    $storage(msg: string): string
+    $storage(msg: string): string;
+    $http<T = unknown>(
+      request: NitroFetchRequest,
+      opts?: HttpFetchOptions
+    ): Promise<T>;
   }
 }
 
-export { }
\ No newline at end of file
+type AuthProvider = {
+  name: string;
+  icon: string;
+  color: string;
+  variant: string;
+  loading?: boolean;
+};
+
+type AuthProviders = {
+  [key: string]: AuthProvider
+}
+
+type MaybePromise<T> = T | Promise<T>;
+type MaybeArray<T> = T | T[];
+type HttpFetchHook<HttpContext extends HttpFetchContext = HttpFetchContext> = (context: HttpContext) => MaybePromise<void>;
+
+interface HttpFetchOptions extends FetchOptions {
+  onFetch?: MaybeArray<HttpFetchHook<HttpFetchContext>>;
+  onFetchError?: MaybeArray<HttpFetchHook<HttpFetchContext & {
+    error: Error;
+  }>>;
+  onFetchResponse?: MaybeArray<HttpFetchHook<HttpFetchContext & {
+    response: FetchResponse<any>;
+  }>>;
+  onFetchResponseError?: MaybeArray<HttpFetchHook<HttpFetchContext & {
+    response: FetchResponse<any>;
+  }>>;
+}
+
+interface HttpFetchContext extends FetchContext<any, any> {
+  options: ResolvedFetchOptions<any, any> & HttpFetchOptions;
+}
+
+type HttpUseFetchOptions<T> = UseFetchOptions<T> & HttpFetchOptions & {
+  $fetch?: $Fetch
+};
+
+
+export {
+  AuthProviders,
+  HttpFetchContext,
+  HttpFetchOptions,
+  HttpUseFetchOptions,
+}
diff --git a/nuxt/app/middleware/auth.ts b/nuxt/app/middleware/auth.ts
index c87ba9a..6a4b182 100644
--- a/nuxt/app/middleware/auth.ts
+++ b/nuxt/app/middleware/auth.ts
@@ -1,8 +1,7 @@
 export default defineNuxtRouteMiddleware((to, from) => {
-  const nuxtApp = useNuxtApp()
-  const auth = useAuthStore()
+  const auth = useAuthStore();
 
   if (!auth.logged) {
-    return nuxtApp.runWithContext(() => navigateTo('/'))
+    return navigateTo('/');
   }
 })
diff --git a/nuxt/app/middleware/guest.ts b/nuxt/app/middleware/guest.ts
index f6ec202..52e6d83 100644
--- a/nuxt/app/middleware/guest.ts
+++ b/nuxt/app/middleware/guest.ts
@@ -1,8 +1,7 @@
 export default defineNuxtRouteMiddleware((to, from) => {
-  const nuxtApp = useNuxtApp()
   const auth = useAuthStore()
 
   if (auth.logged) {
-    return nuxtApp.runWithContext(() => navigateTo('/'))
+    return navigateTo('/');
   }
 })
diff --git a/nuxt/app/middleware/role-admin.ts b/nuxt/app/middleware/role-admin.ts
index ab36955..c84d652 100644
--- a/nuxt/app/middleware/role-admin.ts
+++ b/nuxt/app/middleware/role-admin.ts
@@ -1,16 +1,15 @@
 export default defineNuxtRouteMiddleware((to, from) => {
-  const nuxtApp = useNuxtApp()
   const auth = useAuthStore()
 
-  if (auth.logged && !auth.user.roles.includes('admin')) {
-    return nuxtApp.runWithContext(() => {
-      useToast().add({
-        icon: "i-heroicons-exclamation-circle-solid",
-        title: "Access denied.",
-        color: "red",
-      });
+  if (auth.logged && !auth.hasRole('admin')) {
+    const toast = useToast()
 
-      return navigateTo('/')
-    })
+    toast.add({
+      icon: "i-heroicons-exclamation-circle-solid",
+      title: "Access denied.",
+      color: "error",
+    });
+
+    return false;
   }
 })
diff --git a/nuxt/app/middleware/role-user.ts b/nuxt/app/middleware/role-user.ts
index 6f850ba..b800c30 100644
--- a/nuxt/app/middleware/role-user.ts
+++ b/nuxt/app/middleware/role-user.ts
@@ -1,16 +1,15 @@
 export default defineNuxtRouteMiddleware((to, from) => {
-  const nuxtApp = useNuxtApp()
   const auth = useAuthStore()
 
-  if (auth.logged && !auth.user.roles.includes('user')) {
-    return nuxtApp.runWithContext(() => {
-      useToast().add({
-        icon: "i-heroicons-exclamation-circle-solid",
-        title: "Access denied.",
-        color: "red",
-      });
+  if (auth.logged && !auth.hasRole('user')) {
+    const toast = useToast()
 
-      return navigateTo('/')
-    })
+    toast.add({
+      icon: "i-heroicons-exclamation-circle-solid",
+      title: "Access denied.",
+      color: "error",
+    });
+
+    return false;
   }
 })
diff --git a/nuxt/app/middleware/verified.ts b/nuxt/app/middleware/verified.ts
index 2841717..057e669 100644
--- a/nuxt/app/middleware/verified.ts
+++ b/nuxt/app/middleware/verified.ts
@@ -1,16 +1,15 @@
 export default defineNuxtRouteMiddleware((to, from) => {
-  const nuxtApp = useNuxtApp()
-  const auth = useAuthStore()
+  const auth = useAuthStore();
 
   if (auth.logged && auth.user.must_verify_email) {
-    return nuxtApp.runWithContext(() => {
-      useToast().add({
-        icon: "i-heroicons-exclamation-circle-solid",
-        title: "Please confirm your email.",
-        color: "red",
-      });
+    const toast = useToast();
 
-      return navigateTo('/account/general')
-    })
+    toast.add({
+      icon: "i-heroicons-exclamation-circle-solid",
+      title: "Please confirm your email.",
+      color: "error",
+    });
+
+    return navigateTo('/account/general');
   }
 })
diff --git a/nuxt/app/pages/account.vue b/nuxt/app/pages/account.vue
index 4873f4e..28ad018 100644
--- a/nuxt/app/pages/account.vue
+++ b/nuxt/app/pages/account.vue
@@ -3,7 +3,7 @@ definePageMeta({
   middleware: ["auth"],
 });
 
-const links = [
+const items = [
   [
     {
       label: "Account",
@@ -20,8 +20,9 @@ const links = [
 </script>
 <template>
   <NuxtLayout>
-    <UHorizontalNavigation
-      :links="links"
+    <UNavigationMenu
+      orientation="horizontal"
+      :items="items"
       class="border-b border-gray-200 dark:border-gray-800 mb-4"
     />
     <NuxtPage class="col-span-10 md:col-span-8" />
diff --git a/nuxt/app/pages/account/devices.vue b/nuxt/app/pages/account/devices.vue
index 13481ba..42f7c09 100644
--- a/nuxt/app/pages/account/devices.vue
+++ b/nuxt/app/pages/account/devices.vue
@@ -1,22 +1,23 @@
 <script lang="ts" setup>
 const dayjs = useDayjs();
 const auth = useAuthStore();
+const { $http } = useNuxtApp();
 
-const { data, status, refresh } = useFetch<any>("devices");
+const { data, status, refresh } = useHttp<any>("devices");
 const loading = computed(() => status.value === 'pending');
 
 const columns = [
   {
-    key: "name",
-    label: "Device",
+    accessorKey: "name",
+    header: "Device",
   },
   {
-    key: "last_used_at",
-    label: "Last used at",
+    accessorKey: "last_used_at",
+    header: "Last used at",
     class: "max-w-[9rem] w-[9rem] min-w-[9rem]",
   },
   {
-    key: "actions",
+    id: "actions",
   },
 ];
 
@@ -25,13 +26,14 @@ const items = (row: any) => [
     {
       label: "Delete",
       icon: "i-heroicons-trash-20-solid",
-      click: async () => {
-        await $fetch<any>("devices/disconnect", {
+      color: 'error' as const,
+      onSelect: async () => {
+        await $http("devices/disconnect", {
           method: "POST",
           body: {
             hash: row.hash,
           },
-          async onResponse({ response }) {
+          async onFetchResponse({ response }) {
             if (response._data?.ok) {
               await refresh();
               await auth.fetchUser();
@@ -48,24 +50,24 @@ useSeoMeta({
 })
 </script>
 <template>
-  <UCard :ui="{ body: { padding: 'p-0' } }">
-    <UTable :rows="data?.devices" :columns="columns" size="lg" :loading="loading">
-      <template #name-data="{ row }">
+  <UCard :ui="{ body: 'sm:p-0 p-0 font-medium' }">
+    <UTable :data="data?.devices" :columns="columns" size="lg" :loading="loading" loading-color="primary" loading-animation="carousel">
+      <template #name-cell="{ row }">
         <div class="font-semibold">
-          {{ row.name }}
-          <UBadge v-if="row.is_current" label="active" color="emerald" variant="soft" size="xs" class="ms-1" />
+          {{ row.original.name }}
+          <UBadge v-if="row.original.is_current as boolean" label="active" color="primary" variant="soft" size="md" class="ms-1" />
         </div>
-        <div class="font-medium text-sm">IP: {{ row.ip }}</div>
+        <div class="font-medium text-sm">IP: {{ row.original.ip }}</div>
       </template>
-      <template #last_used_at-data="{ row }">
-        {{ dayjs(row.last_used_at).fromNow() }}
+      <template #last_used_at-cell="{ row }">
+        {{ dayjs(row.original.last_used_at as string).fromNow() }}
       </template>
-      <template #actions-data="{ row }">
+      <template #actions-cell="{ row }">
         <div class="flex justify-end">
-          <UDropdown :items="items(row)">
-            <UButton :disabled="row.is_current" color="gray" variant="ghost"
+          <UDropdownMenu :items="items(row.original)" :content="{ side: 'bottom', align: 'end' }">
+            <UButton :disabled="row.original.is_current as boolean" color="neutral" variant="ghost"
               icon="i-heroicons-ellipsis-horizontal-20-solid" />
-          </UDropdown>
+          </UDropdownMenu>
         </div>
       </template>
     </UTable>
diff --git a/nuxt/app/pages/account/general.vue b/nuxt/app/pages/account/general.vue
index 07abac9..93a6a8a 100644
--- a/nuxt/app/pages/account/general.vue
+++ b/nuxt/app/pages/account/general.vue
@@ -4,7 +4,7 @@ useSeoMeta({
 })
 </script>
 <template>
-  <UCard :ui="{ body: { base: 'grid grid-cols-12 gap-6 md:gap-8' } }">
+  <UCard :ui="{ body: 'grid grid-cols-12 gap-6 md:gap-8' }">
     <div class="col-span-12 lg:col-span-4">
       <div class="text-lg font-semibold mb-2">Profile information</div>
       <div class="text-sm opacity-80">
@@ -14,7 +14,7 @@ useSeoMeta({
     <div class="col-span-12 lg:col-span-8">
       <AccountUpdateProfile />
     </div>
-    <UDivider class="col-span-12" />
+    <USeparator class="col-span-12" />
     <div class="col-span-12 lg:col-span-4">
       <div class="text-lg font-semibold mb-2">Update Password</div>
       <div class="text-sm opacity-80">
diff --git a/nuxt/app/pages/auth/reset/[token].vue b/nuxt/app/pages/auth/reset/[token].vue
index ab13066..e954763 100644
--- a/nuxt/app/pages/auth/reset/[token].vue
+++ b/nuxt/app/pages/auth/reset/[token].vue
@@ -1,8 +1,11 @@
 <script lang="ts" setup>
+import { type Form } from "#ui/types";
+
 const router = useRouter();
 const route = useRoute();
 const auth = useAuthStore();
-const form = ref();
+const form = useTemplateRef<Form<any>>('form');
+const toast = useToast();
 
 const state = reactive({
   email: route.query.email as string,
@@ -11,19 +14,19 @@ const state = reactive({
   password_confirmation: "",
 });
 
-const { refresh: onSubmit, status: resetStatus } = useFetch<any>("reset-password", {
+const { refresh: onSubmit, status: resetStatus } = useHttp<any>("reset-password", {
   method: "POST",
   body: state,
   immediate: false,
   watch: false,
-  async onResponse({ response }) {
+  async onFetchResponse({ response }) {
     if (response?.status === 422) {
       form.value.setErrors(response._data?.errors);
     } else if (response._data?.ok) {
-      useToast().add({
+      toast.add({
         title: "Success",
         description: response._data.message,
-        color: "emerald",
+        color: "success",
       });
 
       if (auth.logged) {
@@ -46,34 +49,35 @@ useSeoMeta({
 
     <div class="space-y-4">
       <UForm ref="form" :state="state" @submit="onSubmit" class="space-y-4">
-        <UFormGroup label="Email" name="email" required>
+        <UFormField label="Email" name="email" required>
           <UInput
             v-model="state.email"
+            class="w-full"
             placeholder="you@example.com"
             icon="i-heroicons-envelope"
             trailing
             type="email"
             readonly=""
           />
-        </UFormGroup>
+        </UFormField>
 
-        <UFormGroup
+        <UFormField
           label="New Password"
           name="password"
           hint="min 8 characters"
-          :ui="{ hint: 'text-xs text-gray-500 dark:text-gray-400' }"
           required
         >
-          <UInput v-model="state.password" type="password" autocomplete="off" />
-        </UFormGroup>
+          <UInput v-model="state.password" class="w-full" type="password" autocomplete="off" />
+        </UFormField>
 
-        <UFormGroup label="Repeat Password" name="password_confirmation" required>
+        <UFormField label="Repeat Password" name="password_confirmation" required>
           <UInput
             v-model="state.password_confirmation"
+            class="w-full"
             type="password"
             autocomplete="off"
           />
-        </UFormGroup>
+        </UFormField>
 
         <div class="flex items-center justify-end space-x-4">
           <UButton type="submit" label="Reset password" :loading="resetStatus === 'pending'" />
diff --git a/nuxt/app/pages/auth/verify.vue b/nuxt/app/pages/auth/verify.vue
index 2ea19d8..f55c9c3 100644
--- a/nuxt/app/pages/auth/verify.vue
+++ b/nuxt/app/pages/auth/verify.vue
@@ -6,14 +6,16 @@ definePageMeta({
 const route = useRoute();
 const auth = useAuthStore();
 
-const { pending, error } = useLazyFetch<any>(route.query.verify_url as string, {
-  async onResponse({ response }) {
+const { error, status } = useLazyHttp<any>(route.query.verify_url as string, {
+  async onFetchResponse({ response }) {
     if (response._data?.ok) {
       await auth.fetchUser();
     }
   },
 });
 
+const loading = computed(() => status.value === 'pending')
+
 useSeoMeta({
   title: 'Email Verification',
 })
@@ -25,7 +27,7 @@ useSeoMeta({
         class="text-3xl font-black leading-tight tracking-tight flex items-center gap-2"
       >
         Email Verification
-        <UIcon v-if="pending" name="i-heroicons-arrow-path-solid" class="animate-spin" />
+        <UIcon v-if="loading" name="i-heroicons-arrow-path-solid" class="animate-spin" />
         <span v-else-if="error" class="text-red-500">Error</span>
         <span v-else class="text-emerald-500">Done</span>
       </h1>
diff --git a/nuxt/app/pages/index.vue b/nuxt/app/pages/index.vue
index 1f2c69e..bf5bfee 100644
--- a/nuxt/app/pages/index.vue
+++ b/nuxt/app/pages/index.vue
@@ -21,8 +21,8 @@ useSeoMeta({
         <div class="font-bold text-lg leading-tight tracking-tighter mb-4">Demo</div>
 
         <div class="flex gap-3">
-          <UButton label="Modal" @click="openDemoModal" color="gray" />
-          <UButton label="404 page" color="gray" @click="router.push('/404')" />
+          <UButton label="Modal" @click="openDemoModal" color="neutral" variant="soft" />
+          <UButton label="404 page" color="neutral" @click="router.push('/404')" variant="soft" />
         </div>
       </UCard>
     </div>
diff --git a/nuxt/app/plugins/app.ts b/nuxt/app/plugins/app.ts
index a5fbae2..d2fd04a 100644
--- a/nuxt/app/plugins/app.ts
+++ b/nuxt/app/plugins/app.ts
@@ -1,122 +1,131 @@
-import type { FetchOptions } from 'ofetch';
-import { ofetch } from 'ofetch';
-
-export default defineNuxtPlugin({
-  name: 'app',
-  enforce: 'default',
-  parallel: true,
-  async setup(nuxtApp) {
-    const config = useRuntimeConfig()
-    const auth = useAuthStore()
-
-    nuxtApp.provide('storage', (path: string): string => {
-      if (!path) return ''
-
-      return path.startsWith('http://') || path.startsWith('https://') ?
-        path
-        : config.public.storageBase + path
-    })
-
-    function buildHeaders(headers = <HeadersInit>{}): HeadersInit {
-      return {
-        ...headers,
-        ...{
-          'Accept': 'application/json',
-        },
-        ...(
-          import.meta.server ? {
-            'referer': useRequestURL().toString(),
-            ...useRequestHeaders(['x-forwarded-for', 'user-agent', 'referer']),
-          } : {}
-        ),
-        ...(
-          auth.logged ? {
-            'Authorization': `Bearer ${auth.token}`
-          } : {}
-        )
-      };
-    }
-
-    function buildBaseURL(baseURL: string): string {
-      if (baseURL) return baseURL;
-
-      return import.meta.server ?
-        config.apiLocal + config.public.apiPrefix
-        : config.public.apiBase + config.public.apiPrefix;
-    }
-
-    function buildSecureMethod(options: FetchOptions): void {
-      if (import.meta.server) return;
-
-      const method = options.method?.toLowerCase() ?? 'get'
+import type { NitroFetchRequest } from 'nitropack/types';
+import type { HttpFetchOptions, HttpFetchContext } from '~';
 
-      if (options.body instanceof FormData && method === 'put') {
-        options.method = 'POST';
-        options.body.append('_method', 'PUT');
-      }
-    }
-
-    function isRequestWithAuth(baseURL: string, path: string): boolean {
-      return !baseURL
-        && !path.startsWith('/_nuxt')
-        && !path.startsWith('http://')
-        && !path.startsWith('https://');
+async function callHooks(context, hooks) {
+  if (Array.isArray(hooks)) {
+    for (const hook of hooks) {
+      await hook(context);
     }
-
-    globalThis.$fetch = ofetch.create(<FetchOptions>{
-      retry: false,
-
-      onRequest({ request, options }) {
-        if (!isRequestWithAuth(options.baseURL ?? '', request.toString())) return
-
-        options.credentials = 'include';
-
-        options.baseURL = buildBaseURL(options.baseURL ?? '');
-        options.headers = buildHeaders(options.headers);
-
-        buildSecureMethod(options);
-      },
-
-      onRequestError({ error }) {
-        if (import.meta.server) return;
-
-        if (error.name === 'AbortError') return;
-
-        useToast().add({
-          icon: 'i-heroicons-exclamation-circle-solid',
-          color: 'red',
-          title: error.message ?? 'Something went wrong',
-        })
-      },
-
-      onResponseError({ response }) {
-        if (response.status === 401) {
-          if (auth.logged) {
-            auth.token = ''
-            auth.user = <User>{}
-          }
-
-          if (import.meta.client) {
-            useToast().add({
-              title: 'Please log in to continue',
-              icon: 'i-heroicons-exclamation-circle-solid',
-              color: 'primary',
-            })
-          }
-        } else if (response.status !== 422) {
-          if (import.meta.client) {
-            useToast().add({
-              icon: 'i-heroicons-exclamation-circle-solid',
-              color: 'red',
-              title: response._data?.message ?? response.statusText ?? 'Something went wrong',
-            })
+  } else if (hooks) {
+    await hooks(context);
+  }
+}
+
+export default defineNuxtPlugin((nuxtApp) => {
+  const config = useRuntimeConfig();
+  const requestUrl = useRequestURL();
+  const requestHeaders = useRequestHeaders(['x-forwarded-for', 'user-agent']);
+  const toast = useToast();
+  const token = useCookie('token', {
+    path: '/',
+    sameSite: 'strict',
+    secure: config.public.apiBase.startsWith('https://'),
+    maxAge: 60 * 60 * 24 * 365
+  });
+
+  function storage(path: string): string {
+    if (!path) return '';
+    return path.startsWith('http://') || path.startsWith('https://')
+      ? path
+      : config.public.storageBase + path;
+  }
+
+  function buildHeaders(headers: any): Headers {
+    return {
+      Accept: 'application/json',
+      Authorization: token.value ? `Bearer ${token.value}` : undefined,
+      ...headers,
+      ...(
+        import.meta.server
+          ? {
+            referer: requestUrl.toString(),
+            ...requestHeaders
           }
+          : {}
+      )
+    };
+  }
+
+  function buildBaseURL(baseURL: string): string {
+    if (baseURL) return baseURL;
+
+    return import.meta.server
+      ? config.apiLocal + config.public.apiPrefix
+      : config.public.apiBase + config.public.apiPrefix;
+  }
+
+  function buildSecureMethod(options: HttpFetchOptions): void {
+    if (!import.meta.server && options.body instanceof FormData &&
+      (options.method?.toLowerCase() === 'put')) {
+      options.method = 'POST';
+      options.body.append('_method', 'PUT');
+    }
+  }
+
+  function isRequestWithAuth(baseURL: string, path: string): boolean {
+    return !baseURL
+      && !path.startsWith('/_nuxt')
+      && !path.startsWith('http://')
+      && !path.startsWith('https://');
+  }
+
+  const http = $fetch.create<unknown, NitroFetchRequest>(<HttpFetchOptions>{
+    baseURL: '',
+    retry: false,
+    async onRequest(context: HttpFetchContext) {
+      await callHooks(context, context.options.onFetch);
+
+      if (!isRequestWithAuth(context.options.baseURL ?? '', context.request.toString())) return;
+
+      context.options.credentials = 'include';
+      context.options.baseURL = buildBaseURL(context.options.baseURL ?? '');
+      context.options.headers = buildHeaders(context.options.headers);
+
+      buildSecureMethod(context.options);
+    },
+    async onRequestError(context: HttpFetchContext) {
+      await callHooks(context, context.options.onFetchError);
+
+      if (import.meta.server || context.error.name === 'AbortError') return;
+
+      toast.add({
+        icon: 'i-heroicons-exclamation-circle-solid',
+        color: "error",
+        title: context.error.message ?? 'Something went wrong'
+      });
+    },
+    async onResponse(context: HttpFetchContext) {
+      await callHooks(context, context.options.onFetchResponse);
+    },
+    async onResponseError(context: HttpFetchContext) {
+      await callHooks(context, context.options.onFetchResponseError);
+
+      if (context.response.status === 401) {
+        const auth = useAuthStore();
+        auth.reset();
+
+        if (import.meta.client) {
+          toast.add({
+            title: 'Please log in to continue',
+            icon: 'i-heroicons-exclamation-circle-solid',
+            color: 'warning'
+          });
         }
+      } else if (context.response.status !== 422 && import.meta.client) {
+        toast.add({
+          icon: 'i-heroicons-exclamation-circle-solid',
+          color: "error",
+          title: context.response._data?.message ?? context.response.statusText ?? 'Something went wrong'
+        });
       }
-    })
-
-    if (auth.logged) {
-      await auth.fetchUser();
+    },
+  });
+
+  return {
+    provide: {
+      storage,
+      token,
+      http
     }
-  },
+  }
 })
diff --git a/nuxt/app/stores/auth.ts b/nuxt/app/stores/auth.ts
index 7469ce3..6aa047c 100644
--- a/nuxt/app/stores/auth.ts
+++ b/nuxt/app/stores/auth.ts
@@ -12,41 +12,38 @@ export type User = {
 }
 
 export const useAuthStore = defineStore('auth', () => {
-  const config = useRuntimeConfig()
-  const nuxtApp = useNuxtApp()
-
+  const nuxtApp = useNuxtApp();
   const user = ref(<User>{});
-  const token = useCookie('token', {
-    path: '/',
-    sameSite: 'strict',
-    secure: config.public.apiBase.startsWith('https://'),
-    maxAge: 60 * 60 * 24 * 365
-  })
-  const logged = computed(() => !!token.value)
+  const logged = computed(() => !!nuxtApp.$token.value);
 
-  const { refresh: logout } = useFetch<any>('logout', {
+  const { refresh: logout } = useHttp<any>('logout', {
     method: 'POST',
     immediate: false,
-    onResponse({ response }) {
+    onFetchResponse: ({ response }) => {
       if (response.status === 200) {
-        token.value = ''
-        user.value = <User>{}
-
-        nuxtApp.runWithContext(() => {
-          return navigateTo('/');
-        })
+        reset();
+        navigateTo('/');
       }
     }
-  })
+  });
 
-  const { refresh: fetchUser } = useFetch<any>('user', {
+  const { refresh: fetchUser } = useHttp<any>('user', {
     immediate: false,
-    onResponse({ response }) {
+    onFetchResponse({ response }) {
       if (response.status === 200) {
         user.value = response._data.user
       }
     }
-  })
+  });
+
+  function reset(): void {
+    nuxtApp.$token.value = ''
+    user.value = <User>{}
+  }
+
+  function hasRole(name: string): boolean {
+    return user.value.roles?.includes(name);
+  }
 
-  return { user, logged, logout, fetchUser, token }
+  return { user, logged, logout, fetchUser, reset, hasRole }
 })
diff --git a/package.json b/package.json
index d0fc76c..fc54a82 100644
--- a/package.json
+++ b/package.json
@@ -14,17 +14,14 @@
   },
   "devDependencies": {
     "@nuxt/devtools": "^1.7.0",
-    "@nuxt/image": "^1.8.1",
-    "@nuxt/ui": "^2.20.0",
+    "@nuxt/image": "^1.9.0",
+    "@nuxt/ui": "^3.0.0-alpha.11",
     "@pinia/nuxt": "^0.9.0",
     "chokidar": "^4.0.3",
     "dayjs-nuxt": "^2.1.11",
-    "nuxt": "^3.15.0",
+    "nuxt": "^3.15.3",
     "nuxt-security": "^2.1.5",
     "vue": "^3.5.13",
     "vue-router": "^4.5.0"
-  },
-  "overrides": {
-    "vite": "5.4.11"
   }
 }