diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 5fdd816..ec96cff 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -3,6 +3,9 @@ require('@rushstack/eslint-patch/modern-module-resolution');
 
 module.exports = {
     root: true,
+    env: {
+        node: true
+    },
     extends: ['plugin:vue/vue3-essential', 'eslint:recommended', '@vue/eslint-config-prettier'],
     parserOptions: {
         ecmaVersion: 'latest'
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 2bc9d36..407f69d 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,8 +1,23 @@
 {
     "editor.codeActionsOnSave": {
-      "source.fixAll": "explicit"
+        "source.fixAll.eslint": "explicit",
+        "source.organizeImports": "explicit"
     },
-    "editor.formatOnSave": true,
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  }
-  
\ No newline at end of file
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "[javascript]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode",
+        "editor.formatOnSave": true
+    },
+    "[vue]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode",
+        "editor.formatOnSave": true
+    },
+    "[typescript]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode",
+        "editor.formatOnSave": true
+    },
+    "[json]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode",
+        "editor.formatOnSave": true
+    }
+}
diff --git a/package.json b/package.json
index 54e834b..98dfab3 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
         "dev": "vite",
         "build": "vite build",
         "preview": "vite preview",
-        "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
+        "lint": "eslint --fix . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
     },
     "dependencies": {
         "@primevue/themes": "^4.0.0",
diff --git a/postcss.config.js b/postcss.config.js
index 33ad091..fe66dd6 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -1,6 +1,6 @@
 module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}
+    plugins: {
+        tailwindcss: {},
+        autoprefixer: {}
+    }
+};
diff --git a/src/layout/AppConfigurator.vue b/src/layout/AppConfigurator.vue
index 2f6fd22..c430f2e 100644
--- a/src/layout/AppConfigurator.vue
+++ b/src/layout/AppConfigurator.vue
@@ -246,25 +246,34 @@ const preset = computed(() => {
             <div class="config-panel-colors">
                 <span class="config-panel-label">Primary</span>
                 <div>
-                    <button v-for="primaryColor of primaryColors" :key="primaryColor.name" type="button"
-                        :title="primaryColor.name" @click="updateColors('primary', primaryColor)"
+                    <button
+                        v-for="primaryColor of primaryColors"
+                        :key="primaryColor.name"
+                        type="button"
+                        :title="primaryColor.name"
+                        @click="updateColors('primary', primaryColor)"
                         :class="{ 'active-color': selectedPrimaryColor === primaryColor.name }"
-                        :style="{ backgroundColor: `${primaryColor.name === 'noir' ? 'var(--text-color)' : primaryColor.palette['500']}` }"></button>
+                        :style="{ backgroundColor: `${primaryColor.name === 'noir' ? 'var(--text-color)' : primaryColor.palette['500']}` }"
+                    ></button>
                 </div>
             </div>
             <div class="config-panel-colors">
                 <span class="config-panel-label">Surface</span>
                 <div>
-                    <button v-for="surface of surfaces" :key="surface.name" type="button" :title="surface.name"
+                    <button
+                        v-for="surface of surfaces"
+                        :key="surface.name"
+                        type="button"
+                        :title="surface.name"
                         @click="updateColors('surface', surface)"
                         :class="{ 'active-color': selectedSurfaceColor ? selectedSurfaceColor === surface.name : isDarkTheme ? surface.name === 'zinc' : surface.name === 'slate' }"
-                        :style="{ backgroundColor: `${surface.palette['500']}` }"></button>
+                        :style="{ backgroundColor: `${surface.palette['500']}` }"
+                    ></button>
                 </div>
             </div>
             <div class="config-panel-settings">
                 <span class="config-panel-label">Presets</span>
-                <SelectButton v-model="preset" @update:modelValue="onPresetChange" :options="presetOptions"
-                    :allowEmpty="false" />
+                <SelectButton v-model="preset" @update:modelValue="onPresetChange" :options="presetOptions" :allowEmpty="false" />
             </div>
         </div>
     </div>
diff --git a/src/layout/AppTopbar.vue b/src/layout/AppTopbar.vue
index 99de49f..9347e8c 100644
--- a/src/layout/AppTopbar.vue
+++ b/src/layout/AppTopbar.vue
@@ -91,7 +91,9 @@ const isOutsideClicked = (event) => {
             <div class="relative">
                 <button
                     v-styleclass="{ selector: '@next', enterFromClass: 'hidden', enterActiveClass: 'animate-scalein', leaveToClass: 'hidden', leaveActiveClass: 'animate-fadeout', hideOnOutsideClick: true }"
-                    type="button" class="p-link layout-topbar-button">
+                    type="button"
+                    class="p-link layout-topbar-button"
+                >
                     <i class="pi pi-palette"></i>
                 </button>
                 <AppConfigurator />
diff --git a/src/views/pages/Landing.vue b/src/views/pages/Landing.vue
index bbc73b2..64ae2b8 100644
--- a/src/views/pages/Landing.vue
+++ b/src/views/pages/Landing.vue
@@ -18,63 +18,50 @@ const logoUrl = computed(() => {
 <template>
     <div class="bg-surface-0 dark:bg-surface-900 flex justify-center">
         <div id="home" class="landing-wrapper overflow-hidden">
-            <div
-                class="py-6 px-6 mx-0 md:mx-12 lg:mx-20 lg:px-20 flex items-center justify-between relative lg:static mb-4">
-                <a class="flex items-center" href="#"> <img :src="logoUrl" alt="Sakai Logo" height="50"
-                        class="mr-0 lg:mr-2" /><span
-                        class="text-surface-900 dark:text-surface-0 font-medium text-2xl leading-normal mr-20">SAKAI</span> </a>
-                <a class="cursor-pointer block lg:hidden text-surface-700 dark:text-surface-100 p-ripple" v-ripple
-                    v-styleclass="{ selector: '@next', enterClass: 'hidden', leaveToClass: 'hidden', hideOnOutsideClick: true }">
+            <div class="py-6 px-6 mx-0 md:mx-12 lg:mx-20 lg:px-20 flex items-center justify-between relative lg:static mb-4">
+                <a class="flex items-center" href="#"> <img :src="logoUrl" alt="Sakai Logo" height="50" class="mr-0 lg:mr-2" /><span class="text-surface-900 dark:text-surface-0 font-medium text-2xl leading-normal mr-20">SAKAI</span> </a>
+                <a class="cursor-pointer block lg:hidden text-surface-700 dark:text-surface-100 p-ripple" v-ripple v-styleclass="{ selector: '@next', enterClass: 'hidden', leaveToClass: 'hidden', hideOnOutsideClick: true }">
                     <i class="pi pi-bars text-4xl"></i>
                 </a>
-                <div class="items-center bg-surface-0 dark:bg-surface-900 grow justify-between hidden lg:flex absolute lg:static w-full left-0 px-12 lg:px-0 z-20"
-                    style="top: 120px">
-                    <ul
-                        class="list-none p-0 m-0 flex lg:items-center select-none flex-col lg:flex-row cursor-pointer">
+                <div class="items-center bg-surface-0 dark:bg-surface-900 grow justify-between hidden lg:flex absolute lg:static w-full left-0 px-12 lg:px-0 z-20" style="top: 120px">
+                    <ul class="list-none p-0 m-0 flex lg:items-center select-none flex-col lg:flex-row cursor-pointer">
                         <li>
-                            <a @click="smoothScroll('#hero')"
-                                class="flex m-0 md:ml-8 px-0 py-4 text-surface-900 dark:text-surface-0 font-medium leading-normal p-ripple" v-ripple>
+                            <a @click="smoothScroll('#hero')" class="flex m-0 md:ml-8 px-0 py-4 text-surface-900 dark:text-surface-0 font-medium leading-normal p-ripple" v-ripple>
                                 <span>Home</span>
                             </a>
                         </li>
                         <li>
-                            <a @click="smoothScroll('#features')"
-                                class="flex m-0 md:ml-8 px-0 py-4 text-surface-900 dark:text-surface-0 font-medium leading-normal p-ripple" v-ripple>
+                            <a @click="smoothScroll('#features')" class="flex m-0 md:ml-8 px-0 py-4 text-surface-900 dark:text-surface-0 font-medium leading-normal p-ripple" v-ripple>
                                 <span>Features</span>
                             </a>
                         </li>
                         <li>
-                            <a @click="smoothScroll('#highlights')"
-                                class="flex m-0 md:ml-8 px-0 py-4 text-surface-900 dark:text-surface-0 font-medium leading-normal p-ripple" v-ripple>
+                            <a @click="smoothScroll('#highlights')" class="flex m-0 md:ml-8 px-0 py-4 text-surface-900 dark:text-surface-0 font-medium leading-normal p-ripple" v-ripple>
                                 <span>Highlights</span>
                             </a>
                         </li>
                         <li>
-                            <a @click="smoothScroll('#pricing')"
-                                class="flex m-0 md:ml-8 px-0 py-4 text-surface-900 dark:text-surface-0 font-medium leading-normal p-ripple" v-ripple>
+                            <a @click="smoothScroll('#pricing')" class="flex m-0 md:ml-8 px-0 py-4 text-surface-900 dark:text-surface-0 font-medium leading-normal p-ripple" v-ripple>
                                 <span>Pricing</span>
                             </a>
                         </li>
                     </ul>
-                    <div
-                        class="flex justify-between lg:block border-t lg:border-t-0 border-surface py-4 lg:py-0 mt-4 lg:mt-0">
-                        <Button label="Login"
-                            class="p-button-text p-button-rounded border-0 font-light leading-tight text-blue-500"></Button>
-                        <Button label="Register"
-                            class="p-button-rounded border-0 ml-8 font-light text-white leading-tight bg-blue-500"></Button>
+                    <div class="flex justify-between lg:block border-t lg:border-t-0 border-surface py-4 lg:py-0 mt-4 lg:mt-0">
+                        <Button label="Login" class="p-button-text p-button-rounded border-0 font-light leading-tight text-blue-500"></Button>
+                        <Button label="Register" class="p-button-rounded border-0 ml-8 font-light text-white leading-tight bg-blue-500"></Button>
                     </div>
                 </div>
             </div>
 
-            <div id="hero" class="flex flex-col pt-6 px-6 lg:px-20 overflow-hidden"
-                style="background: linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), radial-gradient(77.36% 256.97% at 77.36% 57.52%, rgb(238, 239, 175) 0%, rgb(195, 227, 250) 100%); clip-path: ellipse(150% 87% at 93% 13%)">
+            <div
+                id="hero"
+                class="flex flex-col pt-6 px-6 lg:px-20 overflow-hidden"
+                style="background: linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), radial-gradient(77.36% 256.97% at 77.36% 57.52%, rgb(238, 239, 175) 0%, rgb(195, 227, 250) 100%); clip-path: ellipse(150% 87% at 93% 13%)"
+            >
                 <div class="mx-6 md:mx-20 mt-0 md:mt-6">
-                    <h1 class="text-6xl font-bold text-gray-900 leading-tight"><span class="font-light block">Eu sem
-                            integer</span>eget magna fermentum</h1>
-                    <p class="font-normal text-2xl leading-normal md:mt-4 text-gray-700">Sed blandit libero volutpat sed
-                        cras. Fames ac turpis egestas integer. Placerat in egestas erat...</p>
-                    <Button label="Get Started"
-                        class="p-button-rounded text-xl border-0 mt-8 bg-blue-500 font-normal text-white leading-normal px-4"></Button>
+                    <h1 class="text-6xl font-bold text-gray-900 leading-tight"><span class="font-light block">Eu sem integer</span>eget magna fermentum</h1>
+                    <p class="font-normal text-2xl leading-normal md:mt-4 text-gray-700">Sed blandit libero volutpat sed cras. Fames ac turpis egestas integer. Placerat in egestas erat...</p>
+                    <Button label="Get Started" class="p-button-rounded text-xl border-0 mt-8 bg-blue-500 font-normal text-white leading-normal px-4"></Button>
                 </div>
                 <div class="flex justify-center md:justify-end">
                     <img src="/demo/images/landing/screen-1.png" alt="Hero Image" class="w-9/12 md:w-auto" />
@@ -90,10 +77,10 @@ const logoUrl = computed(() => {
 
                     <div class="col-span-12 md:col-span-12 lg:col-span-4 p-0 lg:pr-8 lg:pb-8 mt-6 lg:mt-0">
                         <div
-                            style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(253, 228, 165, 0.2), rgba(187, 199, 205, 0.2)), linear-gradient(180deg, rgba(253, 228, 165, 0.2), rgba(187, 199, 205, 0.2))">
+                            style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(253, 228, 165, 0.2), rgba(187, 199, 205, 0.2)), linear-gradient(180deg, rgba(253, 228, 165, 0.2), rgba(187, 199, 205, 0.2))"
+                        >
                             <div class="p-4 bg-surface-0 dark:bg-surface-900 h-full" style="border-radius: 8px">
-                                <div class="flex items-center justify-center bg-yellow-200 mb-4"
-                                    style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
+                                <div class="flex items-center justify-center bg-yellow-200 mb-4" style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
                                     <i class="pi pi-fw pi-users text-2xl text-yellow-700"></i>
                                 </div>
                                 <h5 class="mb-2 text-surface-900 dark:text-surface-0">Easy to Use</h5>
@@ -104,10 +91,10 @@ const logoUrl = computed(() => {
 
                     <div class="col-span-12 md:col-span-12 lg:col-span-4 p-0 lg:pr-8 lg:pb-8 mt-6 lg:mt-0">
                         <div
-                            style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(145, 226, 237, 0.2), rgba(251, 199, 145, 0.2)), linear-gradient(180deg, rgba(253, 228, 165, 0.2), rgba(172, 180, 223, 0.2))">
+                            style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(145, 226, 237, 0.2), rgba(251, 199, 145, 0.2)), linear-gradient(180deg, rgba(253, 228, 165, 0.2), rgba(172, 180, 223, 0.2))"
+                        >
                             <div class="p-4 bg-surface-0 dark:bg-surface-900 h-full" style="border-radius: 8px">
-                                <div class="flex items-center justify-center bg-cyan-200 mb-4"
-                                    style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
+                                <div class="flex items-center justify-center bg-cyan-200 mb-4" style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
                                     <i class="pi pi-fw pi-palette text-2xl text-cyan-700"></i>
                                 </div>
                                 <h5 class="mb-2 text-surface-900 dark:text-surface-0">Fresh Design</h5>
@@ -118,10 +105,10 @@ const logoUrl = computed(() => {
 
                     <div class="col-span-12 md:col-span-12 lg:col-span-4 p-0 lg:pb-8 mt-6 lg:mt-0">
                         <div
-                            style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(145, 226, 237, 0.2), rgba(172, 180, 223, 0.2)), linear-gradient(180deg, rgba(172, 180, 223, 0.2), rgba(246, 158, 188, 0.2))">
+                            style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(145, 226, 237, 0.2), rgba(172, 180, 223, 0.2)), linear-gradient(180deg, rgba(172, 180, 223, 0.2), rgba(246, 158, 188, 0.2))"
+                        >
                             <div class="p-4 bg-surface-0 dark:bg-surface-900 h-full" style="border-radius: 8px">
-                                <div class="flex items-center justify-center bg-indigo-200"
-                                    style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
+                                <div class="flex items-center justify-center bg-indigo-200" style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
                                     <i class="pi pi-fw pi-map text-2xl text-indigo-700"></i>
                                 </div>
                                 <h5 class="mb-2 text-surface-900 dark:text-surface-0">Well Documented</h5>
@@ -132,10 +119,10 @@ const logoUrl = computed(() => {
 
                     <div class="col-span-12 md:col-span-12 lg:col-span-4 p-0 lg:pr-8 lg:pb-8 mt-6 lg:mt-0">
                         <div
-                            style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(187, 199, 205, 0.2), rgba(251, 199, 145, 0.2)), linear-gradient(180deg, rgba(253, 228, 165, 0.2), rgba(145, 210, 204, 0.2))">
+                            style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(187, 199, 205, 0.2), rgba(251, 199, 145, 0.2)), linear-gradient(180deg, rgba(253, 228, 165, 0.2), rgba(145, 210, 204, 0.2))"
+                        >
                             <div class="p-4 bg-surface-0 dark:bg-surface-900 h-full" style="border-radius: 8px">
-                                <div class="flex items-center justify-center bg-slate-200 mb-4"
-                                    style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
+                                <div class="flex items-center justify-center bg-slate-200 mb-4" style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
                                     <i class="pi pi-fw pi-id-card text-2xl text-slate-700"></i>
                                 </div>
                                 <h5 class="mb-2 text-surface-900 dark:text-surface-0">Responsive Layout</h5>
@@ -146,10 +133,10 @@ const logoUrl = computed(() => {
 
                     <div class="col-span-12 md:col-span-12 lg:col-span-4 p-0 lg:pr-8 lg:pb-8 mt-6 lg:mt-0">
                         <div
-                            style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(187, 199, 205, 0.2), rgba(246, 158, 188, 0.2)), linear-gradient(180deg, rgba(145, 226, 237, 0.2), rgba(160, 210, 250, 0.2))">
+                            style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(187, 199, 205, 0.2), rgba(246, 158, 188, 0.2)), linear-gradient(180deg, rgba(145, 226, 237, 0.2), rgba(160, 210, 250, 0.2))"
+                        >
                             <div class="p-4 bg-surface-0 dark:bg-surface-900 h-full" style="border-radius: 8px">
-                                <div class="flex items-center justify-center bg-orange-200 mb-4"
-                                    style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
+                                <div class="flex items-center justify-center bg-orange-200 mb-4" style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
                                     <i class="pi pi-fw pi-star text-2xl text-orange-700"></i>
                                 </div>
                                 <h5 class="mb-2 text-surface-900 dark:text-surface-0">Clean Code</h5>
@@ -160,10 +147,10 @@ const logoUrl = computed(() => {
 
                     <div class="col-span-12 md:col-span-12 lg:col-span-4 p-0 lg:pb-8 mt-6 lg:mt-0">
                         <div
-                            style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(251, 199, 145, 0.2), rgba(246, 158, 188, 0.2)), linear-gradient(180deg, rgba(172, 180, 223, 0.2), rgba(212, 162, 221, 0.2))">
+                            style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(251, 199, 145, 0.2), rgba(246, 158, 188, 0.2)), linear-gradient(180deg, rgba(172, 180, 223, 0.2), rgba(212, 162, 221, 0.2))"
+                        >
                             <div class="p-4 bg-surface-0 dark:bg-surface-900 h-full" style="border-radius: 8px">
-                                <div class="flex items-center justify-center bg-pink-200 mb-4"
-                                    style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
+                                <div class="flex items-center justify-center bg-pink-200 mb-4" style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
                                     <i class="pi pi-fw pi-moon text-2xl text-pink-700"></i>
                                 </div>
                                 <h5 class="mb-2 text-surface-900 dark:text-surface-0">Dark Mode</h5>
@@ -174,10 +161,10 @@ const logoUrl = computed(() => {
 
                     <div class="col-span-12 md:col-span-12 lg:col-span-4 p-0 lg:pr-8 mt-6 lg:mt-0">
                         <div
-                            style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(145, 210, 204, 0.2), rgba(160, 210, 250, 0.2)), linear-gradient(180deg, rgba(187, 199, 205, 0.2), rgba(145, 210, 204, 0.2))">
+                            style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(145, 210, 204, 0.2), rgba(160, 210, 250, 0.2)), linear-gradient(180deg, rgba(187, 199, 205, 0.2), rgba(145, 210, 204, 0.2))"
+                        >
                             <div class="p-4 bg-surface-0 dark:bg-surface-900 h-full" style="border-radius: 8px">
-                                <div class="flex items-center justify-center bg-teal-200 mb-4"
-                                    style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
+                                <div class="flex items-center justify-center bg-teal-200 mb-4" style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
                                     <i class="pi pi-fw pi-shopping-cart text-2xl text-teal-700"></i>
                                 </div>
                                 <h5 class="mb-2 text-surface-900 dark:text-surface-0">Ready to Use</h5>
@@ -188,10 +175,10 @@ const logoUrl = computed(() => {
 
                     <div class="col-span-12 md:col-span-12 lg:col-span-4 p-0 lg:pr-8 mt-6 lg:mt-0">
                         <div
-                            style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(145, 210, 204, 0.2), rgba(212, 162, 221, 0.2)), linear-gradient(180deg, rgba(251, 199, 145, 0.2), rgba(160, 210, 250, 0.2))">
+                            style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(145, 210, 204, 0.2), rgba(212, 162, 221, 0.2)), linear-gradient(180deg, rgba(251, 199, 145, 0.2), rgba(160, 210, 250, 0.2))"
+                        >
                             <div class="p-4 bg-surface-0 dark:bg-surface-900 h-full" style="border-radius: 8px">
-                                <div class="flex items-center justify-center bg-blue-200 mb-4"
-                                    style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
+                                <div class="flex items-center justify-center bg-blue-200 mb-4" style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
                                     <i class="pi pi-fw pi-globe text-2xl text-blue-700"></i>
                                 </div>
                                 <h5 class="mb-2 text-surface-900 dark:text-surface-0">Modern Practices</h5>
@@ -202,10 +189,10 @@ const logoUrl = computed(() => {
 
                     <div class="col-span-12 md:col-span-12 lg:col-span-4 p-0 lg-4 mt-6 lg:mt-0">
                         <div
-                            style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(160, 210, 250, 0.2), rgba(212, 162, 221, 0.2)), linear-gradient(180deg, rgba(246, 158, 188, 0.2), rgba(212, 162, 221, 0.2))">
+                            style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(160, 210, 250, 0.2), rgba(212, 162, 221, 0.2)), linear-gradient(180deg, rgba(246, 158, 188, 0.2), rgba(212, 162, 221, 0.2))"
+                        >
                             <div class="p-4 bg-surface-0 dark:bg-surface-900 h-full" style="border-radius: 8px">
-                                <div class="flex items-center justify-center bg-purple-200 mb-4"
-                                    style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
+                                <div class="flex items-center justify-center bg-purple-200 mb-4" style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
                                     <i class="pi pi-fw pi-eye text-2xl text-purple-700"></i>
                                 </div>
                                 <h5 class="mb-2 text-surface-900 dark:text-surface-0">Privacy</h5>
@@ -214,17 +201,15 @@ const logoUrl = computed(() => {
                         </div>
                     </div>
 
-                    <div class="col-span-12 mt-20 mb-20 p-2 md:p-20"
-                        style="border-radius: 20px; background: linear-gradient(0deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)), radial-gradient(77.36% 256.97% at 77.36% 57.52%, #efe1af 0%, #c3dcfa 100%)">
-                        <div
-                            class="flex flex-col justify-center items-center text-center px-4 py-4 md:py-0">
+                    <div
+                        class="col-span-12 mt-20 mb-20 p-2 md:p-20"
+                        style="border-radius: 20px; background: linear-gradient(0deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)), radial-gradient(77.36% 256.97% at 77.36% 57.52%, #efe1af 0%, #c3dcfa 100%)"
+                    >
+                        <div class="flex flex-col justify-center items-center text-center px-4 py-4 md:py-0">
                             <h3 class="text-gray-900 mb-2">Joséphine Miller</h3>
                             <span class="text-gray-600 text-2xl">Peak Interactive</span>
-                            <p class="text-gray-900 sm:line-height-2 md:line-height-4 text-2xl mt-6"
-                                style="max-width: 800px">
-                                “Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
-                                nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
-                                officia deserunt mollit anim id est laborum.”
+                            <p class="text-gray-900 sm:line-height-2 md:line-height-4 text-2xl mt-6" style="max-width: 800px">
+                                “Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.”
                             </p>
                             <img src="/demo/images/landing/peak-logo.svg" class="mt-6" alt="Company logo" />
                         </div>
@@ -239,38 +224,33 @@ const logoUrl = computed(() => {
                 </div>
 
                 <div class="grid grid-cols-12 gap-4 mt-20 pb-2 md:pb-20">
-                    <div class="flex justify-center col-span-12 lg:col-span-6 bg-purple-100 p-0 order-1 lg:order-none"
-                        style="border-radius: 8px">
+                    <div class="flex justify-center col-span-12 lg:col-span-6 bg-purple-100 p-0 order-1 lg:order-none" style="border-radius: 8px">
                         <img src="/demo/images/landing/mockup.svg" class="w-11/12" alt="mockup mobile" />
                     </div>
 
                     <div class="col-span-12 lg:col-span-6 my-auto flex flex-col lg:items-end text-center lg:text-right">
-                        <div class="flex items-center justify-center bg-purple-200 self-center lg:self-end"
-                            style="width: 4.2rem; height: 4.2rem; border-radius: 10px">
+                        <div class="flex items-center justify-center bg-purple-200 self-center lg:self-end" style="width: 4.2rem; height: 4.2rem; border-radius: 10px">
                             <i class="pi pi-fw pi-mobile text-5xl text-purple-700"></i>
                         </div>
                         <h2 class="leading-none text-surface-900 dark:text-surface-0 text-4xl font-normal">Congue Quisque Egestas</h2>
-                        <span class="text-surface-700 dark:text-surface-100 text-2xl leading-normal ml-0 md:ml-2" style="max-width: 650px">Lectus arcu
-                            bibendum at varius vel pharetra vel turpis nunc. Eget aliquet nibh praesent tristique magna
-                            sit amet purus gravida. Sit amet mattis vulputate enim nulla aliquet.</span>
+                        <span class="text-surface-700 dark:text-surface-100 text-2xl leading-normal ml-0 md:ml-2" style="max-width: 650px"
+                            >Lectus arcu bibendum at varius vel pharetra vel turpis nunc. Eget aliquet nibh praesent tristique magna sit amet purus gravida. Sit amet mattis vulputate enim nulla aliquet.</span
+                        >
                     </div>
                 </div>
 
                 <div class="grid grid-cols-12 gap-4 my-20 pt-2 md:pt-20">
                     <div class="col-span-12 lg:col-span-6 my-auto flex flex-col text-center lg:text-left lg:items-start">
-                        <div class="flex items-center justify-center bg-yellow-200 self-center lg:self-start"
-                            style="width: 4.2rem; height: 4.2rem; border-radius: 10px">
+                        <div class="flex items-center justify-center bg-yellow-200 self-center lg:self-start" style="width: 4.2rem; height: 4.2rem; border-radius: 10px">
                             <i class="pi pi-fw pi-desktop text-5xl text-yellow-700"></i>
                         </div>
                         <h2 class="leading-none text-surface-900 dark:text-surface-0 text-4xl font-normal">Celerisque Eu Ultrices</h2>
-                        <span class="text-surface-700 dark:text-surface-100 text-2xl leading-normal mr-0 md:mr-2" style="max-width: 650px">Adipiscing
-                            commodo elit at imperdiet dui. Viverra nibh cras pulvinar mattis nunc sed blandit libero.
-                            Suspendisse in est ante in. Mauris pharetra et ultrices neque ornare aenean euismod
-                            elementum nisi.</span>
+                        <span class="text-surface-700 dark:text-surface-100 text-2xl leading-normal mr-0 md:mr-2" style="max-width: 650px"
+                            >Adipiscing commodo elit at imperdiet dui. Viverra nibh cras pulvinar mattis nunc sed blandit libero. Suspendisse in est ante in. Mauris pharetra et ultrices neque ornare aenean euismod elementum nisi.</span
+                        >
                     </div>
 
-                    <div class="flex justify-end order-1 sm:order-2 col-span-12 lg:col-span-6 bg-yellow-100 p-0"
-                        style="border-radius: 8px">
+                    <div class="flex justify-end order-1 sm:order-2 col-span-12 lg:col-span-6 bg-yellow-100 p-0" style="border-radius: 8px">
                         <img src="/demo/images/landing/mockup-desktop.svg" class="w-11/12" alt="mockup" />
                     </div>
                 </div>
@@ -284,15 +264,13 @@ const logoUrl = computed(() => {
 
                 <div class="grid grid-cols-12 gap-4 justify-between mt-20 md:mt-0">
                     <div class="col-span-12 lg:col-span-4 p-0 md:p-4">
-                        <div class="p-4 flex flex-col border-surface-200 dark:border-surface-600 pricing-card cursor-pointer border-2 hover:border-primary duration-300 transition-all"
-                            style="border-radius: 10px">
+                        <div class="p-4 flex flex-col border-surface-200 dark:border-surface-600 pricing-card cursor-pointer border-2 hover:border-primary duration-300 transition-all" style="border-radius: 10px">
                             <h3 class="text-surface-900 dark:text-surface-0 text-center my-8">Free</h3>
                             <img src="/demo/images/landing/free.svg" class="w-10/12 h-10 mx-auto" alt="free" />
                             <div class="my-8 text-center">
                                 <span class="text-5xl font-bold mr-2 text-surface-900 dark:text-surface-0">$0</span>
                                 <span class="text-surface-600 dark:text-surface-200">per month</span>
-                                <Button label="Get Started"
-                                    class="block mx-auto mt-6 p-button-rounded border-0 ml-4 font-light leading-tight bg-blue-500 text-white"></Button>
+                                <Button label="Get Started" class="block mx-auto mt-6 p-button-rounded border-0 ml-4 font-light leading-tight bg-blue-500 text-white"></Button>
                             </div>
                             <Divider class="w-full bg-surface-200"></Divider>
                             <ul class="my-8 list-none p-0 flex text-surface-900 dark:text-surface-0 flex-col">
@@ -317,15 +295,13 @@ const logoUrl = computed(() => {
                     </div>
 
                     <div class="col-span-12 lg:col-span-4 p-0 md:p-4 mt-6 md:mt-0">
-                        <div class="p-4 flex flex-col border-surface-200 dark:border-surface-600 pricing-card cursor-pointer border-2 hover:border-primary duration-300 transition-all"
-                            style="border-radius: 10px">
+                        <div class="p-4 flex flex-col border-surface-200 dark:border-surface-600 pricing-card cursor-pointer border-2 hover:border-primary duration-300 transition-all" style="border-radius: 10px">
                             <h3 class="text-surface-900 dark:text-surface-0 text-center my-8">Startup</h3>
                             <img src="/demo/images/landing/startup.svg" class="w-10/12 h-10 mx-auto" alt="startup" />
                             <div class="my-8 text-center">
                                 <span class="text-5xl font-bold mr-2 text-surface-900 dark:text-surface-0">$1</span>
                                 <span class="text-surface-600 dark:text-surface-200">per month</span>
-                                <Button label="Try Free"
-                                    class="block mx-auto mt-6 p-button-rounded border-0 ml-4 font-light leading-tight bg-blue-500 text-white"></Button>
+                                <Button label="Try Free" class="block mx-auto mt-6 p-button-rounded border-0 ml-4 font-light leading-tight bg-blue-500 text-white"></Button>
                             </div>
                             <Divider class="w-full bg-surface-200"></Divider>
                             <ul class="my-8 list-none p-0 flex text-surface-900 dark:text-surface-0 flex-col">
@@ -350,15 +326,13 @@ const logoUrl = computed(() => {
                     </div>
 
                     <div class="col-span-12 lg:col-span-4 p-0 md:p-4 mt-6 md:mt-0">
-                        <div class="p-4 flex flex-col border-surface-200 dark:border-surface-600 pricing-card cursor-pointer border-2 hover:border-primary duration-300 transition-all"
-                            style="border-radius: 10px">
+                        <div class="p-4 flex flex-col border-surface-200 dark:border-surface-600 pricing-card cursor-pointer border-2 hover:border-primary duration-300 transition-all" style="border-radius: 10px">
                             <h3 class="text-surface-900 dark:text-surface-0 text-center my-8">Enterprise</h3>
                             <img src="/demo/images/landing/enterprise.svg" class="w-10/12 h-10 mx-auto" alt="enterprise" />
                             <div class="my-8 text-center">
                                 <span class="text-5xl font-bold mr-2 text-surface-900 dark:text-surface-0">$999</span>
                                 <span class="text-surface-600 dark:text-surface-200">per month</span>
-                                <Button label="Get a Quote"
-                                    class="block mx-auto mt-6 p-button-rounded border-0 ml-4 font-light leading-tight bg-blue-500 text-white"></Button>
+                                <Button label="Get a Quote" class="block mx-auto mt-6 p-button-rounded border-0 ml-4 font-light leading-tight bg-blue-500 text-white"></Button>
                             </div>
                             <Divider class="w-full bg-surface-200"></Divider>
                             <ul class="my-8 list-none p-0 flex text-surface-900 dark:text-surface-0 flex-col">
@@ -387,8 +361,7 @@ const logoUrl = computed(() => {
             <div class="py-6 px-6 mx-0 mt-20 lg:mx-20">
                 <div class="grid grid-cols-12 gap-4 justify-between">
                     <div class="col-span-12 md:col-span-2" style="margin-top: -1.5rem">
-                        <a @click="smoothScroll('#home')"
-                            class="flex flex-wrap items-center justify-center md:justify-start md:mb-0 mb-4 cursor-pointer">
+                        <a @click="smoothScroll('#home')" class="flex flex-wrap items-center justify-center md:justify-start md:mb-0 mb-4 cursor-pointer">
                             <img :src="logoUrl" alt="footer sections" width="50" height="50" class="mr-2" />
                             <h4 class="font-medium text-3xl text-surface-900 dark:text-surface-0">SAKAI</h4>
                         </a>
@@ -400,8 +373,7 @@ const logoUrl = computed(() => {
                                 <h4 class="font-medium text-2xl leading-normal mb-4 text-surface-900 dark:text-surface-0">Company</h4>
                                 <a class="leading-normal text-xl block cursor-pointer mb-2 text-surface-700 dark:text-surface-100">About Us</a>
                                 <a class="leading-normal text-xl block cursor-pointer mb-2 text-surface-700 dark:text-surface-100">News</a>
-                                <a class="leading-normal text-xl block cursor-pointer mb-2 text-surface-700 dark:text-surface-100">Investor
-                                    Relations</a>
+                                <a class="leading-normal text-xl block cursor-pointer mb-2 text-surface-700 dark:text-surface-100">Investor Relations</a>
                                 <a class="leading-normal text-xl block cursor-pointer mb-2 text-surface-700 dark:text-surface-100">Careers</a>
                                 <a class="leading-normal text-xl block cursor-pointer text-surface-700 dark:text-surface-100">Media Kit</a>
                             </div>
@@ -416,8 +388,7 @@ const logoUrl = computed(() => {
                             <div class="col-span-12 md:col-span-3 mt-6 md:mt-0">
                                 <h4 class="font-medium text-2xl leading-normal mb-4 text-surface-900 dark:text-surface-0">Community</h4>
                                 <a class="leading-normal text-xl block cursor-pointer mb-2 text-surface-700 dark:text-surface-100">Discord</a>
-                                <a class="leading-normal text-xl block cursor-pointer mb-2 text-surface-700 dark:text-surface-100">Events<img
-                                        src="/demo/images/landing/new-badge.svg" class="ml-2" /></a>
+                                <a class="leading-normal text-xl block cursor-pointer mb-2 text-surface-700 dark:text-surface-100">Events<img src="/demo/images/landing/new-badge.svg" class="ml-2" /></a>
                                 <a class="leading-normal text-xl block cursor-pointer mb-2 text-surface-700 dark:text-surface-100">FAQ</a>
                                 <a class="leading-normal text-xl block cursor-pointer text-surface-700 dark:text-surface-100">Blog</a>
                             </div>
diff --git a/src/views/pages/NotFound.vue b/src/views/pages/NotFound.vue
index f663f41..4ae26f8 100644
--- a/src/views/pages/NotFound.vue
+++ b/src/views/pages/NotFound.vue
@@ -1,20 +1,16 @@
 <script setup></script>
 
 <template>
-    <div
-        class="bg-surface-50 dark:bg-surface-950 flex items-center justify-center min-h-screen min-w-[100vw] overflow-hidden">
+    <div class="bg-surface-50 dark:bg-surface-950 flex items-center justify-center min-h-screen min-w-[100vw] overflow-hidden">
         <div class="flex flex-col items-center justify-center">
             <img src="/demo/images/notfound/logo-blue.svg" alt="Sakai logo" class="mb-8 w-24 shrink-0" />
-            <div
-                style="border-radius: 56px; padding: 0.3rem; background: linear-gradient(180deg, rgba(33, 150, 243, 0.4) 10%, rgba(33, 150, 243, 0) 30%)">
-                <div class="w-full bg-surface-0 dark:bg-surface-900 py-20 px-8 sm:px-20 flex flex-col items-center"
-                    style="border-radius: 53px">
+            <div style="border-radius: 56px; padding: 0.3rem; background: linear-gradient(180deg, rgba(33, 150, 243, 0.4) 10%, rgba(33, 150, 243, 0) 30%)">
+                <div class="w-full bg-surface-0 dark:bg-surface-900 py-20 px-8 sm:px-20 flex flex-col items-center" style="border-radius: 53px">
                     <span class="text-blue-500 font-bold text-3xl">404</span>
                     <h1 class="text-surface-900 dark:text-surface-0 font-bold text-3xl lg:text-5xl mb-2">Not Found</h1>
                     <div class="text-surface-600 dark:text-surface-200 mb-8">Requested resource is not available.</div>
                     <router-link to="/" class="w-full flex items-center py-8 border-surface-300 dark:border-surface-500 border-b">
-                        <span class="flex justify-center items-center bg-cyan-400 rounded-border"
-                            style="height: 3.5rem; width: 3.5rem">
+                        <span class="flex justify-center items-center bg-cyan-400 rounded-border" style="height: 3.5rem; width: 3.5rem">
                             <i class="text-surface-50 dark:text-surface-800 pi pi-fw pi-table text-2xl"></i>
                         </span>
                         <span class="ml-6 flex flex-col">
@@ -23,8 +19,7 @@
                         </span>
                     </router-link>
                     <router-link to="/" class="w-full flex items-center py-8 border-surface-300 dark:border-surface-500 border-b">
-                        <span class="flex justify-center items-center bg-orange-400 rounded-border"
-                            style="height: 3.5rem; width: 3.5rem">
+                        <span class="flex justify-center items-center bg-orange-400 rounded-border" style="height: 3.5rem; width: 3.5rem">
                             <i class="pi pi-fw pi-question-circle text-surface-50 dark:text-surface-800 text-2xl"></i>
                         </span>
                         <span class="ml-6 flex flex-col">
@@ -33,8 +28,7 @@
                         </span>
                     </router-link>
                     <router-link to="/" class="w-full flex items-center mb-8 py-8 border-surface-300 dark:border-surface-500 border-b">
-                        <span class="flex justify-center items-center bg-indigo-400 rounded-border"
-                            style="height: 3.5rem; width: 3.5rem">
+                        <span class="flex justify-center items-center bg-indigo-400 rounded-border" style="height: 3.5rem; width: 3.5rem">
                             <i class="pi pi-fw pi-unlock text-surface-50 dark:text-surface-800 text-2xl"></i>
                         </span>
                         <span class="ml-6 flex flex-col">
diff --git a/src/views/uikit/MenuDoc.vue b/src/views/uikit/MenuDoc.vue
index 36d5103..bae034d 100644
--- a/src/views/uikit/MenuDoc.vue
+++ b/src/views/uikit/MenuDoc.vue
@@ -82,24 +82,6 @@ const nestedMenuitems = ref([
 ]);
 const breadcrumbHome = ref({ icon: 'pi pi-home', to: '/' });
 const breadcrumbItems = ref([{ label: 'Computer' }, { label: 'Notebook' }, { label: 'Accessories' }, { label: 'Backpacks' }, { label: 'Item' }]);
-const nestedRouteItems = ref([
-    {
-        label: 'Personal',
-        to: '/uikit/menu'
-    },
-    {
-        label: 'Seat',
-        to: '/uikit/menu/seat'
-    },
-    {
-        label: 'Payment',
-        to: '/uikit/menu/payment'
-    },
-    {
-        label: 'Confirmation',
-        to: '/uikit/menu/confirmation'
-    }
-]);
 const tieredMenuItems = ref([
     {
         label: 'Customers',
diff --git a/src/views/utilities/Blocks.vue b/src/views/utilities/Blocks.vue
index d629645..db6ced7 100644
--- a/src/views/utilities/Blocks.vue
+++ b/src/views/utilities/Blocks.vue
@@ -784,7 +784,9 @@ const checked = ref(false);
                     </li>
                     <li class="flex items-center py-4 px-2 border-t border-b border-surface flex-wrap">
                         <div class="text-surface-500 dark:text-surface-300 w-6/12 md:w-2/12 font-medium">Plot</div>
-                        <div class="text-surface-900 dark:text-surface-0 w-full md:w-8/12 md:order-none order-1 leading-normal">A group of professional bank robbers start to feel the heat from police when they unknowingly leave a clue at their latest heist.</div>
+                        <div class="text-surface-900 dark:text-surface-0 w-full md:w-8/12 md:order-none order-1 leading-normal">
+                            A group of professional bank robbers start to feel the heat from police when they unknowingly leave a clue at their latest heist.
+                        </div>
                         <div class="w-6/12 md:w-2/12 flex justify-end">
                             <Button label="Edit" icon="pi pi-pencil" class="p-button-text"></Button>
                         </div>
diff --git a/src/views/utilities/Documentation.vue b/src/views/utilities/Documentation.vue
index 0e46745..b772e79 100644
--- a/src/views/utilities/Documentation.vue
+++ b/src/views/utilities/Documentation.vue
@@ -2,17 +2,12 @@
     <div class="card">
         <h3>Documentation</h3>
         <p class="bg-primary text-primary-contrast rounded-border p-4">
-            This page covers the Vite version, for Nuxt 3 visit the <a href="https://github.com/primefaces/sakai-nuxt"
-                class="font-bold bg-primary text-primary-contrast hover:underline">sakai-nuxt</a> repository instead.
+            This page covers the Vite version, for Nuxt 3 visit the <a href="https://github.com/primefaces/sakai-nuxt" class="font-bold bg-primary text-primary-contrast hover:underline">sakai-nuxt</a> repository instead.
         </p>
         <h5>Getting Started</h5>
         <p>
-            Sakai is an application template for Vue based on the <a href="https://github.com/vuejs/create-vue"
-                class="font-medium text-primary hover:underline">create-vue</a>, the recommended way to start a
-            <strong>Vite-powered</strong> Vue
-            projects. To get started, clone the <a href="https://github.com/primefaces/sakai-vue"
-                class="font-medium text-primary hover:underline">repository</a> from GitHub and install the dependencies
-            with npm or yarn.
+            Sakai is an application template for Vue based on the <a href="https://github.com/vuejs/create-vue" class="font-medium text-primary hover:underline">create-vue</a>, the recommended way to start a <strong>Vite-powered</strong> Vue
+            projects. To get started, clone the <a href="https://github.com/primefaces/sakai-vue" class="font-medium text-primary hover:underline">repository</a> from GitHub and install the dependencies with npm or yarn.
         </p>
         <pre class="app-code"><code> npm install </code></pre>
 
@@ -20,15 +15,12 @@
 
         <pre class="app-code"><code> yarn </code></pre>
 
-        <p>Next step is running the application using the serve script and navigate to <i>http://localhost:5173/</i> to
-            view the application. That is it, you may now start with the development of your application using the Sakai
-            template.</p>
+        <p>Next step is running the application using the serve script and navigate to <i>http://localhost:5173/</i> to view the application. That is it, you may now start with the development of your application using the Sakai template.</p>
 
         <pre class="app-code"><code> npm run dev </code></pre>
 
         <h5>Structure</h5>
-        <p>Sakai consists of a couple folders, demos and layout have been separated so that you can easily remove what
-            is not necessary for your application.</p>
+        <p>Sakai consists of a couple folders, demos and layout have been separated so that you can easily remove what is not necessary for your application.</p>
         <ul class="leading-normal">
             <li><span class="text-primary font-medium">src/layout</span>: Main layout files, needs to be present</li>
             <li><span class="text-primary font-medium">src/views</span>: Demo pages</li>
@@ -42,12 +34,10 @@
         <p>Main menu is defined at <span class="text-primary font-medium">src/layout/AppMenu.vue</span> file.</p>
 
         <h5>Integration with Existing Vite Applications</h5>
-        <p>Only the folders that are related to the layout needs to move in to your project. We've created a short
-            tutorial with details.</p>
+        <p>Only the folders that are related to the layout needs to move in to your project. We've created a short tutorial with details.</p>
 
         <div class="video-container">
-            <iframe className="video" width="560" height="315" src="https://www.youtube.com/embed/AHeSjJFR3ZE"
-                frameborder="0" allowfullscreen></iframe>
+            <iframe className="video" width="560" height="315" src="https://www.youtube.com/embed/AHeSjJFR3ZE" frameborder="0" allowfullscreen></iframe>
         </div>
 
         <h5>PrimeVue Theme</h5>