diff --git a/.gitignore b/.gitignore
index 38adffa6..de86b8a6 100644
--- a/.gitignore
+++ b/.gitignore
@@ -13,6 +13,7 @@ dist
 dist-ssr
 coverage
 *.local
+.nuxt
 
 /cypress/videos/
 /cypress/screenshots/
diff --git a/.nuxt-guide/README.md b/.nuxt-guide/README.md
index bd8848ca..c3c37ff2 100644
--- a/.nuxt-guide/README.md
+++ b/.nuxt-guide/README.md
@@ -2,7 +2,7 @@
 
 This guide will help you integrate your Nuxt.js 3.x application with [Admin One - free Vue 3 Tailwind 3 Admin Dashboard with dark mode](https://github.com/justboil/admin-one-vue-tailwind).
 
-**Please note:** this document is work in progress and Nuxt 3 is in Release Candidate state, so some things can be missing and warnings may occur.
+> **Important**: For a working version (so you don't need to go though all the steps below) please check [This Forked Repository](https://github.com/leogargioni/admin-one-nuxt-tailwind-template). Please note it may not be up to date with the latest version.
 
 ## Table of contents
 
@@ -12,9 +12,8 @@ This guide will help you integrate your Nuxt.js 3.x application with [Admin One
 
 Check [Nuxt installation guide](https://v3.nuxtjs.org/getting-started/quick-start) for more information.
 
-- Run `npx nuxi init sample-app`
-- then `cd sample-app`
-- and `npm install`
+* Run `npx nuxi init sample-app`
+* then `cd sample-app`
 
 Then, let's install TailwindCSS. Check [Tailwind Nuxt installation guide](https://tailwindcss.com/docs/guides/nuxtjs) for more information.
 
@@ -25,8 +24,8 @@ npm install -D @nuxtjs/tailwindcss @tailwindcss/forms
 # Install other required packages
 npm i @mdi/js chart.js numeral
 
-# Install Pinia (official Vuex 5). --legacy-peer-deps is required because of the package dependencies issue
-npm install --legacy-peer-deps pinia @pinia/nuxt
+# Install Pinia (official Vuex 5).
+npm install @pinia/nuxt
 ```
 
 ### Copy styles, components and scripts
@@ -48,11 +47,12 @@ Next, copy these files **from justboil/admin-one-vue-tailwind project** director
 #### In nuxt.config.ts
 
 ```javascript
-import { defineNuxtConfig } from 'nuxt'
-
-// https://v3.nuxtjs.org/api/configuration/nuxt.config
+// https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
-  buildModules: ['@pinia/nuxt'],
+  devtools: { enabled: true },
+  modules: [
+    '@pinia/nuxt',
+  ],
   postcss: {
     plugins: {
       tailwindcss: {},
@@ -72,16 +72,18 @@ module.exports = {
   content: [
     './composables/**/*.{js,vue,ts}',
     './components/**/*.{js,vue,ts}',
+    './configs/**/*.{js,ts}',
     './layouts/**/*.vue',
     './pages/**/*.vue',
     './plugins/**/*.{js,ts}',
+    './stores/**/*.{js,ts}',
     'app.vue'
   ]
   // ...
 }
 ```
 
-#### In App.vue
+#### In app.vue
 
 ```vue
 <script setup>
@@ -125,100 +127,121 @@ useHead({
 Remove `axios`, as you'll likely going to use Nuxt's `useFetch`. Then add some sample data for `clients` and `history`.
 
 ```javascript
+import { defineStore } from 'pinia'
+import { ref, computed } from 'vue'
 // import axios from 'axios'
 
-export const useMainStore = defineStore('main', {
-  state: () => ({
-    // ...
-
-    clients: [
-      {
-        id: 19,
-        avatar: 'https://avatars.dicebear.com/v2/gridy/Howell-Hand.svg',
-        login: 'percy64',
-        name: 'Howell Hand',
-        company: 'Kiehn-Green',
-        city: 'Emelyside',
-        progress: 70,
-        created: 'Mar 3, 2021'
-      },
-      {
-        id: 11,
-        avatar: 'https://avatars.dicebear.com/v2/gridy/Hope-Howe.svg',
-        login: 'dare.concepcion',
-        name: 'Hope Howe',
-        company: 'Nolan Inc',
-        city: 'Paristown',
-        progress: 68,
-        created: 'Dec 1, 2021'
-      },
-      {
-        id: 32,
-        avatar: 'https://avatars.dicebear.com/v2/gridy/Nelson-Jerde.svg',
-        login: 'geovanni.kessler',
-        name: 'Nelson Jerde',
-        company: 'Nitzsche LLC',
-        city: 'Jailynbury',
-        progress: 49,
-        created: 'May 18, 2021'
-      },
-      {
-        id: 22,
-        avatar: 'https://avatars.dicebear.com/v2/gridy/Kim-Weimann.svg',
-        login: 'macejkovic.dashawn',
-        name: 'Kim Weimann',
-        company: 'Brown-Lueilwitz',
-        city: 'New Emie',
-        progress: 38,
-        created: 'May 4, 2021'
-      }
-    ],
-    history: [
-      {
-        amount: 375.53,
-        name: 'Home Loan Account',
-        date: '3 days ago',
-        type: 'deposit',
-        business: 'Turcotte'
-      },
-      {
-        amount: 470.26,
-        name: 'Savings Account',
-        date: '3 days ago',
-        type: 'payment',
-        business: 'Murazik - Graham'
-      },
-      {
-        amount: 971.34,
-        name: 'Checking Account',
-        date: '5 days ago',
-        type: 'invoice',
-        business: 'Fahey - Keebler'
-      },
-      {
-        amount: 374.63,
-        name: 'Auto Loan Account',
-        date: '7 days ago',
-        type: 'withdrawal',
-        business: 'Collier - Hintz'
-      }
-    ]
-  }),
-  actions: {
-    // ...
-
-    fetch(sampleDataKey) {
-      // axios
-      //   .get(`data-sources/${sampleDataKey}.json`)
-      //   .then(r => {
-      //     if (r.data && r.data.data) {
-      //       this[sampleDataKey] = r.data.data
-      //     }
-      //   })
-      //   .catch(error => {
-      //     alert(error.message)
-      //   })
+export const useMainStore = defineStore('main', () => {
+// ...
+  const clients = ref([
+    {
+      id: 19,
+      avatar: 'https://avatars.dicebear.com/v2/gridy/Howell-Hand.svg',
+      login: 'percy64',
+      name: 'Howell Hand',
+      company: 'Kiehn-Green',
+      city: 'Emelyside',
+      progress: 70,
+      created: 'Mar 3, 2021'
+    },
+    {
+      id: 11,
+      avatar: 'https://avatars.dicebear.com/v2/gridy/Hope-Howe.svg',
+      login: 'dare.concepcion',
+      name: 'Hope Howe',
+      company: 'Nolan Inc',
+      city: 'Paristown',
+      progress: 68,
+      created: 'Dec 1, 2021'
+    },
+    {
+      id: 32,
+      avatar: 'https://avatars.dicebear.com/v2/gridy/Nelson-Jerde.svg',
+      login: 'geovanni.kessler',
+      name: 'Nelson Jerde',
+      company: 'Nitzsche LLC',
+      city: 'Jailynbury',
+      progress: 49,
+      created: 'May 18, 2021'
+    },
+    {
+      id: 22,
+      avatar: 'https://avatars.dicebear.com/v2/gridy/Kim-Weimann.svg',
+      login: 'macejkovic.dashawn',
+      name: 'Kim Weimann',
+      company: 'Brown-Lueilwitz',
+      city: 'New Emie',
+      progress: 38,
+      created: 'May 4, 2021'
     }
+  ])
+  const history = ref([
+    {
+      amount: 375.53,
+      name: 'Home Loan Account',
+      date: '3 days ago',
+      type: 'deposit',
+      business: 'Turcotte',
+      account: "1"
+    },
+    {
+      amount: 470.26,
+      name: 'Savings Account',
+      date: '3 days ago',
+      type: 'payment',
+      business: 'Murazik - Graham',
+      account: "2"
+    },
+    {
+      amount: 971.34,
+      name: 'Checking Account',
+      date: '5 days ago',
+      type: 'invoice',
+      business: 'Fahey - Keebler',
+      account: "3"
+    },
+    {
+      amount: 374.63,
+      name: 'Auto Loan Account',
+      date: '7 days ago',
+      type: 'withdrawal',
+      business: 'Collier - Hintz',
+      account: "4"
+    }
+  ])
+
+  // ...
+
+  // function fetchSampleClients() {
+  //   axios
+  //     .get(`data-sources/clients.json?v=3`)
+  //     .then((result) => {
+  //       clients.value = result?.data?.data
+  //     })
+  //     .catch((error) => {
+  //       alert(error.message)
+  //     })
+  // }
+
+  // function fetchSampleHistory() {
+  //   axios
+  //     .get(`data-sources/history.json`)
+  //     .then((result) => {
+  //       history.value = result?.data?.data
+  //     })
+  //     .catch((error) => {
+  //       alert(error.message)
+  //     })
+  // }
+
+  return {
+    userName,
+    userEmail,
+    userAvatar,
+    isFieldFocusRegistered,
+    clients,
+    history,
+    setUser
   }
 })
 ```
@@ -230,24 +253,19 @@ export const useMainStore = defineStore('main', {
 
 ## Copy pages
 
-Let's copy `views/LoginView.vue` with a guest layout and `views/HomeView.vue` with an authenticated layout.
+Let's copy `src/views/LoginView.vue` with a guest layout and `src/views/HomeView.vue` with an authenticated layout.
 
-These pages will then be available under `/` and `/dashboard` url paths.
+These pages will then be available under `/` and `/HomeView` url paths.
 
 #### LoginView.vue
 
-Copy `views/LoginView.vue` to `pages/index.vue`
+Copy `src/views/LoginView.vue` and rename to `pages/index.vue`
 
 Then, wrap the entire template with `<div>` and replace `<LayoutGuest>` with `<NuxtLayout>`
 
 **Why we need a div wrapper?** If you use `<NuxtLayout>` within your pages, make sure it is not the root element (or disable layout/page transitions) &mdash; [Info](https://v3.nuxtjs.org/guide/directory-structure/layouts#overriding-a-layout-on-a-per-page-basis)
 
 ```vue
-<script setup>
-// import LayoutGuest from '@/layouts/LayoutGuest.vue'
-// ...
-</script>
-
 <template>
   <div>
     <NuxtLayout>
@@ -259,16 +277,11 @@ Then, wrap the entire template with `<div>` and replace `<LayoutGuest>` with `<N
 
 #### HomeView.vue
 
-Copy `views/HomeView.vue` to `pages/dashboard.vue`
+Copy `src/views/HomeView.vue` to `pages/dashboard.vue`
 
-Then, wrap the entire template with `<div>` and replace `<LayoutGuest>` with `<NuxtLayout>` with a `name` prop.
+Then, wrap the entire template with `<div>` and replace `<LayoutAuthenticated>` with `<NuxtLayout>` with a `name` prop. 
 
 ```vue
-<script setup>
-// import LayoutAuthenticated from '@/layouts/LayoutAuthenticated.vue'
-// ...
-</script>
-
 <template>
   <div>
     <NuxtLayout name="authenticated">
@@ -278,14 +291,120 @@ Then, wrap the entire template with `<div>` and replace `<LayoutGuest>` with `<N
 </template>
 ```
 
-## Replace `<RouterLink>` with `<NuxtLink>`
+## Copy other pages
+
+Copy the pages from `src/views/` (except `LoginView.vue` and `HomeView.vue`) to to `pages/` and remove the `View` from the file names
+
+Now for each page wrap the entire template with `<div>` and replace `<LayoutAuthenticated>` with `<NuxtLayout>` with a `name` prop just like you did for `dashboard.vue` before.
+
+Note: For the `Error.vue` and `Style.vue` pages, use the `<NuxtLayout>` without the  `name` prop.
+
+## Update `configs/menuAside.js`
+
+Update `Styles` and `Login` links:
+```js
+// ...
+  {
+    // to: "/",
+    to: "/style",
+    label: "Styles",
+    icon: mdiPalette,
+  },
+  // ...
+  {
+    to: "/login",
+    to: "/",
+    label: "Login",
+    icon: mdiLock,
+  },
+// ...
+```
+
+## Replace `RouterLink` with `NuxtLink`
+
+Search all files for `RouterLink` and replace import statements and references to `RouterLink` as per below example:
+
+```vue
+<script setup>
+// import { RouterLink } from 'vue-router'
+import { NuxtLink } from '#components'
+
+// ...
 
-Details are coming soon...
+const componentClass = computed(() => {
+  if (props.item.to) {
+    // return RouterLink
+    return NuxtLink
+  }
+})
+</script>
+```
 
 ## Remove/update imports
 
-Nuxt automatically imports any components in your `components/` directory. So, you may safely remove that imports from `<script setup>`. The only exception is for `components/Charts`, so charts import should be left as is.
+#### Update Imports
+
+Search and Replace all `from '@/config.js'` by `from '@/configs/config'`
+
+Search and Replace all `from '@/menuAside.js'` by `from '@/configs/menuAside'`
+
+Search and Replace all `from '@/menuNavBar.js'` by `from '@/configs/menuNavBar'`
+
+Search and Replace all `from '@/colors.js'` and `from '@/colors'` by `from '@/configs/colors'`
+
+#### Remove Imports
+
+Nuxt automatically imports any components in your `components/` and `layouts/` directories. So, you may safely remove that imports from `<script setup>`. The only exception is for `components/Charts`, so charts import should be left as is.
+
+Also remove `import { useRouter } from 'vue-router'` from all files
+
+## Update `assets/css/main.css`
+
+*Remove* the following lines from `assets/css/main.css`:
+
+```css
+/* @import 'styles/_basic.css';
+@import 'styles/_white.css'; */
+```
+
+## Update `components/CardBoxModal.vue`
+
+Add `onMounted` to load `window` only on client side when ready
+
+```vue
+<script setup>
+import { computed, onMounted } from 'vue';
+// ...
+onMounted(() => {
+  window.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape' && value.value) {
+      cancel()
+    }
+  })
+})
+</script>
+```
+
+## Remove href
+
+Remove `href` from props that already have a `to` prop from `components/AsideMenuItem.vue` and `components/NavBarItem.vue`
+
+Example from`components/AsideMenuItem.vue`:
+```vue
+<template>
+  <li>
+    <component
+      :is="item.to ? NuxtLink : 'a'"
+      v-slot="vSlot"
+      :to="item.to ?? null"
+      :target="item.target ?? null"
+      class="flex cursor-pointer"
+      :class="componentClass"
+      @click="menuClick"
+    >
+    <!-- ... -->
+```
 
-## Contributions open
+## Delete `assets/css/styles` Folder
 
-WIP - work in progress. Some things are missing. Contributions open.
+Delete `assets/css/styles` folder to avoid conflicts
\ No newline at end of file