diff --git a/.editorconfig b/.editorconfig
deleted file mode 100644
index 7f5b23f..0000000
--- a/.editorconfig
+++ /dev/null
@@ -1,9 +0,0 @@
-[*.{js,jsx,mjs,cjs,ts,tsx,mts,cts,vue}]
-charset = utf-8
-indent_size = 2
-indent_style = space
-insert_final_newline = true
-trim_trailing_whitespace = true
-
-end_of_line = lf
-max_line_length = 100
diff --git a/.prettierrc.json b/.prettierrc.json
deleted file mode 100644
index e4bac4d..0000000
--- a/.prettierrc.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "$schema": "https://json.schemastore.org/prettierrc",
-  "semi": false,
-  "singleQuote": true,
-  "printWidth": 100,
-  "endOfLine": "lf"
-}
diff --git a/eslint.config.ts b/eslint.config.ts
index 294e1ee..9406804 100644
--- a/eslint.config.ts
+++ b/eslint.config.ts
@@ -1,6 +1,9 @@
-import pluginVue from 'eslint-plugin-vue'
-import { defineConfigWithVueTs, vueTsConfigs } from '@vue/eslint-config-typescript'
-import skipFormatting from '@vue/eslint-config-prettier/skip-formatting'
+import pluginVue from "eslint-plugin-vue";
+import {
+  defineConfigWithVueTs,
+  vueTsConfigs,
+} from "@vue/eslint-config-typescript";
+import prettierConfig from "@vue/eslint-config-prettier";
 
 // To allow more languages other than `ts` in `.vue` files, uncomment the following lines:
 // import { configureVueProject } from '@vue/eslint-config-typescript'
@@ -9,17 +12,21 @@ import skipFormatting from '@vue/eslint-config-prettier/skip-formatting'
 
 export default defineConfigWithVueTs(
   {
-    name: 'app/files-to-lint',
-    files: ['**/*.{ts,mts,tsx,vue}'],
+    name: "app/files-to-lint",
+    files: ["**/*.{ts,mts,tsx,vue}"],
   },
 
   {
-    name: 'app/files-to-ignore',
+    name: "app/files-to-ignore",
     // todo: change or remove assets/js
-    ignores: ['src/assets/js', '**/dist/**', '**/dist-ssr/**', '**/coverage/**'],
+    ignores: [
+      "src/assets/js",
+      "**/dist/**", 
+      "**/dist-ssr/**",
+      "**/coverage/**"]
   },
 
-  pluginVue.configs['flat/essential'],
+  pluginVue.configs["flat/essential"],
   vueTsConfigs.recommended,
-  skipFormatting,
-)
+  prettierConfig,
+)
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
index ec64b1e..dc2c113 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { RouterView } from 'vue-router'
+import { RouterView } from "vue-router";
 
-document.body.setAttribute('data-pc-theme', 'light')
-document.body.setAttribute('data-pc-direction', 'ltr')
-document.body.setAttribute('data-pc-preset', 'preset-1')
+document.body.setAttribute("data-pc-theme", "light");
+document.body.setAttribute("data-pc-direction", "ltr");
+document.body.setAttribute("data-pc-preset", "preset-1");
 </script>
 
 <template>
diff --git a/src/components/shared/AuthLayout.vue b/src/components/shared/AuthLayout.vue
index 8f8364f..e419107 100644
--- a/src/components/shared/AuthLayout.vue
+++ b/src/components/shared/AuthLayout.vue
@@ -9,10 +9,10 @@
  */
 
 // third party
-import { BCard, BImg } from 'bootstrap-vue-next'
+import { BCard, BImg } from "bootstrap-vue-next";
 
 // assets
-import darkLight from '@/assets/images/logo-dark.svg'
+import darkLight from "@/assets/images/logo-dark.svg";
 </script>
 
 <template>
diff --git a/src/components/shared/BaseBreadcrumb.vue b/src/components/shared/BaseBreadcrumb.vue
index d4eaf42..5dba87a 100644
--- a/src/components/shared/BaseBreadcrumb.vue
+++ b/src/components/shared/BaseBreadcrumb.vue
@@ -11,23 +11,23 @@
  * @computed {BreadcrumbItem[]} computedBreadcrumbs - Ensures the Home link is always included before rendering the breadcrumb list.
  */
 
-import { computed } from 'vue'
+import { computed } from "vue";
 
 // third party
-import { BBreadcrumb, BRow, BCol } from 'bootstrap-vue-next'
-import { type BreadcrumbItem } from 'bootstrap-vue-next'
+import { BBreadcrumb, BRow, BCol } from "bootstrap-vue-next";
+import { type BreadcrumbItem } from "bootstrap-vue-next";
 
 // Define Props
 const props = defineProps<{
-  title: string
-  breadcrumbs: BreadcrumbItem[]
-}>()
+  title: string;
+  breadcrumbs: BreadcrumbItem[];
+}>();
 
 // Ensure Home link is always present
 const computedBreadcrumbs = computed<BreadcrumbItem[]>(() => [
-  { text: 'Home', to: '/' },
+  { text: "Home", to: "/" },
   ...props.breadcrumbs,
-])
+]);
 </script>
 
 <template>
diff --git a/src/components/shared/BorderStyleCard.vue b/src/components/shared/BorderStyleCard.vue
index 428f8b7..41f044f 100644
--- a/src/components/shared/BorderStyleCard.vue
+++ b/src/components/shared/BorderStyleCard.vue
@@ -10,7 +10,7 @@
 
 const props = defineProps({
   title: String,
-})
+});
 </script>
 
 <template>
diff --git a/src/components/shared/CardHeader.vue b/src/components/shared/CardHeader.vue
index ad759c9..9ac6d61 100644
--- a/src/components/shared/CardHeader.vue
+++ b/src/components/shared/CardHeader.vue
@@ -10,12 +10,12 @@
  */
 
 // third party
-import { BCard } from 'bootstrap-vue-next'
+import { BCard } from "bootstrap-vue-next";
 
 const props = defineProps({
   title: String,
   caption: String,
-})
+});
 </script>
 
 <template>
diff --git a/src/components/shared/CardHeaderFooter.vue b/src/components/shared/CardHeaderFooter.vue
index 65f1877..f445dc9 100644
--- a/src/components/shared/CardHeaderFooter.vue
+++ b/src/components/shared/CardHeaderFooter.vue
@@ -11,12 +11,12 @@
  */
 
 // third party
-import { BCard } from 'bootstrap-vue-next'
+import { BCard } from "bootstrap-vue-next";
 
 const props = defineProps({
   title: String,
   caption: String,
-})
+});
 </script>
 
 <template>
diff --git a/src/components/shared/ComponentContent.vue b/src/components/shared/ComponentContent.vue
index c52fea6..c3ad237 100644
--- a/src/components/shared/ComponentContent.vue
+++ b/src/components/shared/ComponentContent.vue
@@ -10,13 +10,13 @@
  */
 
 // third party
-import { BRow, BCol, BButton } from 'bootstrap-vue-next'
+import { BRow, BCol, BButton } from "bootstrap-vue-next";
 
 // Define Props with default values
 const props = defineProps({
   content: String,
   link: String,
-})
+});
 </script>
 
 <template>
diff --git a/src/components/shared/SvgSprite.vue b/src/components/shared/SvgSprite.vue
index d0bed23..bff6cf5 100644
--- a/src/components/shared/SvgSprite.vue
+++ b/src/components/shared/SvgSprite.vue
@@ -10,22 +10,23 @@
  *
  */
 
-import { ref, onMounted } from 'vue'
+import { ref, onMounted } from "vue";
 
 const props = defineProps({
   name: String,
-})
+});
 
-const spritePath = ref<string | null>(null)
+const spritePath = ref<string | null>(null);
 
 onMounted(async () => {
   try {
     // Load the SVG sprite dynamically with an absolute path
-    spritePath.value = (await import.meta.env.BASE_URL) + 'assets/svg/sprite.svg'
+    spritePath.value =
+      (await import.meta.env.BASE_URL) + "assets/svg/sprite.svg";
   } catch (error) {
-    console.error('Error loading SVG sprite:', error)
+    console.error("Error loading SVG sprite:", error);
   }
-})
+});
 </script>
 
 <template>
diff --git a/src/config.ts b/src/config.ts
index b5ddb56..bf44fac 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -1,9 +1,9 @@
 export type ConfigProps = {
-  sidebarCollapse: boolean
-}
+  sidebarCollapse: boolean;
+};
 
 const config: ConfigProps = {
   sidebarCollapse: true,
-}
+};
 
-export default config
+export default config;
diff --git a/src/layouts/LoaderWrapper.vue b/src/layouts/LoaderWrapper.vue
index 9f8a704..290dddb 100644
--- a/src/layouts/LoaderWrapper.vue
+++ b/src/layouts/LoaderWrapper.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { storeToRefs } from 'pinia'
+import { storeToRefs } from "pinia";
 
 // files
-import { useUIStore } from '@/stores/ui'
+import { useUIStore } from "@/stores/ui";
 
-const uiStore = useUIStore()
-const { isLoading } = storeToRefs(uiStore)
+const uiStore = useUIStore();
+const { isLoading } = storeToRefs(uiStore);
 </script>
 
 <template>
diff --git a/src/layouts/blank/BlankLayout.vue b/src/layouts/blank/BlankLayout.vue
index 8f7ca31..1f7b766 100644
--- a/src/layouts/blank/BlankLayout.vue
+++ b/src/layouts/blank/BlankLayout.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { RouterView } from 'vue-router'
+import { RouterView } from "vue-router";
 
 // components
-import LoaderWrapper from '../LoaderWrapper.vue'
+import LoaderWrapper from "../LoaderWrapper.vue";
 </script>
 
 <template>
diff --git a/src/layouts/dashboard/DashboardLayout.vue b/src/layouts/dashboard/DashboardLayout.vue
index 280b494..b90f1d1 100644
--- a/src/layouts/dashboard/DashboardLayout.vue
+++ b/src/layouts/dashboard/DashboardLayout.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { RouterView } from 'vue-router'
+import { RouterView } from "vue-router";
 
 // components
-import VerticalSidebar from './vertical-sidebar/VerticalSidebar.vue'
-import VerticalHeader from './vertical-header/VerticalHeader.vue'
-import Footer from './FooterBlock.vue'
-import LoaderWrapper from '../LoaderWrapper.vue'
+import VerticalSidebar from "./vertical-sidebar/VerticalSidebar.vue";
+import VerticalHeader from "./vertical-header/VerticalHeader.vue";
+import Footer from "./FooterBlock.vue";
+import LoaderWrapper from "../LoaderWrapper.vue";
 </script>
 
 <template>
diff --git a/src/layouts/dashboard/FooterBlock.vue b/src/layouts/dashboard/FooterBlock.vue
index c3eea10..07f1201 100644
--- a/src/layouts/dashboard/FooterBlock.vue
+++ b/src/layouts/dashboard/FooterBlock.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 // third party
-import { BContainer, BRow, BCol } from 'bootstrap-vue-next'
+import { BContainer, BRow, BCol } from "bootstrap-vue-next";
 </script>
 
 <template>
@@ -10,19 +10,31 @@ import { BContainer, BRow, BCol } from 'bootstrap-vue-next'
         <BCol cols="auto" class="footer-title my-1">
           <p class="m-0">
             Datta able &#9829; crafted by Team
-            <a href="https://codedthemes.com/" class="text-primary" target="_blank">CodedThemes</a>
+            <a
+              href="https://codedthemes.com/"
+              class="text-primary"
+              target="_blank"
+              >CodedThemes</a
+            >
           </p>
         </BCol>
         <BCol cols="auto" class="my-1">
           <ul class="list-inline footer-link mb-0">
-            <li class="list-inline-item"><router-link to="/">Home</router-link></li>
             <li class="list-inline-item">
-              <a href="https://codedthemes.gitbook.io/datta/datta-able-vue" target="_blank">
+              <router-link to="/">Home</router-link>
+            </li>
+            <li class="list-inline-item">
+              <a
+                href="https://codedthemes.gitbook.io/datta/datta-able-vue"
+                target="_blank"
+              >
                 Documentation
               </a>
             </li>
             <li class="list-inline-item">
-              <a href="https://codedthemes.support-hub.io/" target="_blank"> Support </a>
+              <a href="https://codedthemes.support-hub.io/" target="_blank">
+                Support
+              </a>
             </li>
           </ul>
         </BCol>
diff --git a/src/layouts/dashboard/logo/LogoMain.vue b/src/layouts/dashboard/logo/LogoMain.vue
index 1654e2a..95e2162 100644
--- a/src/layouts/dashboard/logo/LogoMain.vue
+++ b/src/layouts/dashboard/logo/LogoMain.vue
@@ -1,12 +1,16 @@
 <script setup lang="ts">
-import { RouterLink } from 'vue-router'
+import { RouterLink } from "vue-router";
 </script>
 
 <template>
   <div class="m-header">
     <RouterLink to="/" class="b-brand text-primary" aria-label="logo">
       <!-- ========   Change your logo from here   ============ -->
-      <img src="@/assets/images/logo-white.svg" class="img-fluid logo-lg" alt="logo" />
+      <img
+        src="@/assets/images/logo-white.svg"
+        class="img-fluid logo-lg"
+        alt="logo"
+      />
     </RouterLink>
   </div>
 </template>
diff --git a/src/layouts/dashboard/vertical-header/NotificationDD.vue b/src/layouts/dashboard/vertical-header/NotificationDD.vue
index 89fd5e1..3eab83d 100644
--- a/src/layouts/dashboard/vertical-header/NotificationDD.vue
+++ b/src/layouts/dashboard/vertical-header/NotificationDD.vue
@@ -1,7 +1,12 @@
 <script setup lang="ts">
 // third party
-import { BDropdown, BDropdownHeader, BDropdownText, BCard } from 'bootstrap-vue-next'
-import SimpleBar from 'simplebar-vue'
+import {
+  BDropdown,
+  BDropdownHeader,
+  BDropdownText,
+  BCard,
+} from "bootstrap-vue-next";
+import SimpleBar from "simplebar-vue";
 </script>
 
 <template>
@@ -15,13 +20,20 @@ import SimpleBar from 'simplebar-vue'
       aria-label="Notification"
     >
       <template #button-content>
-        <a href="#" class="pc-head-link mx-0 position-static" aria-label="Notification">
+        <a
+          href="#"
+          class="pc-head-link mx-0 position-static"
+          aria-label="Notification"
+        >
           <i class="ph ph-bell"></i>
           <span class="badge bg-success pc-h-badge">3</span>
         </a>
         <span class="visually-hidden">Notification</span>
       </template>
-      <BDropdownHeader tag="h5" header-class="d-flex align-items-center justify-content-between">
+      <BDropdownHeader
+        tag="h5"
+        header-class="d-flex align-items-center justify-content-between"
+      >
         <h5 class="m-0">Notifications</h5>
         <a href="#!" class="btn btn-link btn-sm">Mark all read</a>
       </BDropdownHeader>
@@ -46,8 +58,9 @@ import SimpleBar from 'simplebar-vue'
                   <span class="float-end text-sm text-muted">2 min ago</span>
                   <h5 class="text-body mb-2">UI/UX Design</h5>
                   <p class="mb-0">
-                    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
-                    when an unknown printer took a galley of type and scrambled it to make a type
+                    Lorem Ipsum has been the industry's standard dummy text ever
+                    since the 1500s, when an unknown printer took a galley of
+                    type and scrambled it to make a type
                   </p>
                 </div>
               </div>
@@ -67,7 +80,8 @@ import SimpleBar from 'simplebar-vue'
                   <span class="float-end text-sm text-muted">1 hour ago</span>
                   <h5 class="text-body mb-2">Message</h5>
                   <p class="mb-0">
-                    Lorem Ipsum has been the industry's standard dummy text ever since the 1500.
+                    Lorem Ipsum has been the industry's standard dummy text ever
+                    since the 1500.
                   </p>
                 </div>
               </div>
@@ -88,8 +102,9 @@ import SimpleBar from 'simplebar-vue'
                   <span class="float-end text-sm text-muted">2 hour ago</span>
                   <h5 class="text-body mb-2">Forms</h5>
                   <p class="mb-0">
-                    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
-                    when an unknown printer took a galley of type and scrambled it to make a type
+                    Lorem Ipsum has been the industry's standard dummy text ever
+                    since the 1500s, when an unknown printer took a galley of
+                    type and scrambled it to make a type
                   </p>
                 </div>
               </div>
@@ -109,9 +124,12 @@ import SimpleBar from 'simplebar-vue'
                   <span class="float-end text-sm text-muted">12 hour ago</span>
                   <h5 class="text-body mb-2">Challenge invitation</h5>
                   <p class="mb-2">
-                    <span class="text-dark">Jonny aber</span> invites to join the challenge
+                    <span class="text-dark">Jonny aber</span> invites to join
+                    the challenge
                   </p>
-                  <button class="btn btn-sm btn-outline-secondary me-2">Decline</button>
+                  <button class="btn btn-sm btn-outline-secondary me-2">
+                    Decline
+                  </button>
                   <button class="btn btn-sm btn-primary">Accept</button>
                 </div>
               </div>
@@ -131,8 +149,9 @@ import SimpleBar from 'simplebar-vue'
                   <span class="float-end text-sm text-muted">5 hour ago</span>
                   <h5 class="text-body mb-2">Security</h5>
                   <p class="mb-0">
-                    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
-                    when an unknown printer took a galley of type and scrambled it to make a type
+                    Lorem Ipsum has been the industry's standard dummy text ever
+                    since the 1500s, when an unknown printer took a galley of
+                    type and scrambled it to make a type
                   </p>
                 </div>
               </div>
diff --git a/src/layouts/dashboard/vertical-header/ProfileDD.vue b/src/layouts/dashboard/vertical-header/ProfileDD.vue
index 86ea245..eea7ef5 100644
--- a/src/layouts/dashboard/vertical-header/ProfileDD.vue
+++ b/src/layouts/dashboard/vertical-header/ProfileDD.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 // third party
-import { BDropdown, BDropdownItem, BDropdownHeader } from 'bootstrap-vue-next'
-import SimpleBar from 'simplebar-vue'
+import { BDropdown, BDropdownItem, BDropdownHeader } from "bootstrap-vue-next";
+import SimpleBar from "simplebar-vue";
 
 // common components
-import SvgSprite from '@/components/shared/SvgSprite.vue'
+import SvgSprite from "@/components/shared/SvgSprite.vue";
 </script>
 
 <template>
@@ -18,7 +18,11 @@ import SvgSprite from '@/components/shared/SvgSprite.vue'
       aria-label="Profile"
     >
       <template #button-content>
-        <a href="#" class="pc-head-link mx-0 position-static" aria-label="Profile">
+        <a
+          href="#"
+          class="pc-head-link mx-0 position-static"
+          aria-label="Profile"
+        >
           <i class="ph ph-user-circle"></i>
         </a>
         <span class="visually-hidden">Profile</span>
@@ -37,7 +41,9 @@ import SvgSprite from '@/components/shared/SvgSprite.vue'
           </div>
           <div class="flex-grow-1 ms-3">
             <h6 class="text-white mb-1">Carson Darrin 🖖</h6>
-            <span class="text-white text-opacity-75">carson.darrin@company.io</span>
+            <span class="text-white text-opacity-75"
+              >carson.darrin@company.io</span
+            >
           </div>
         </div>
       </BDropdownHeader>
@@ -48,25 +54,37 @@ import SvgSprite from '@/components/shared/SvgSprite.vue'
         >
           <BDropdownItem href="#">
             <span>
-              <SvgSprite name="custom-setting-outline" class="text-muted me-2 align-text-bottom" />
+              <SvgSprite
+                name="custom-setting-outline"
+                class="text-muted me-2 align-text-bottom"
+              />
               <span>Settings</span>
             </span>
           </BDropdownItem>
           <BDropdownItem href="#">
             <span>
-              <SvgSprite name="custom-share-bold" class="text-muted me-2 align-text-bottom" />
+              <SvgSprite
+                name="custom-share-bold"
+                class="text-muted me-2 align-text-bottom"
+              />
               <span>Share</span>
             </span>
           </BDropdownItem>
           <BDropdownItem href="#">
             <span>
-              <SvgSprite name="custom-lock-outline" class="text-muted me-2 align-text-bottom" />
+              <SvgSprite
+                name="custom-lock-outline"
+                class="text-muted me-2 align-text-bottom"
+              />
               <span>Change Password</span>
             </span>
           </BDropdownItem>
           <div class="d-grid my-2">
             <button class="btn btn-primary">
-              <SvgSprite name="custom-logout-1-outline" class="me-2 align-text-bottom" />
+              <SvgSprite
+                name="custom-logout-1-outline"
+                class="me-2 align-text-bottom"
+              />
               Logout
             </button>
           </div>
diff --git a/src/layouts/dashboard/vertical-header/SearchBar.vue b/src/layouts/dashboard/vertical-header/SearchBar.vue
index a96f89e..cbe11bf 100644
--- a/src/layouts/dashboard/vertical-header/SearchBar.vue
+++ b/src/layouts/dashboard/vertical-header/SearchBar.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 // third party
-import { BDropdown } from 'bootstrap-vue-next'
+import { BDropdown } from "bootstrap-vue-next";
 </script>
 
 <template>
@@ -15,7 +15,8 @@ import { BDropdown } from 'bootstrap-vue-next'
       aria-label="Search"
     >
       <template #button-content>
-        <i class="ph ph-magnifying-glass"></i><span class="visually-hidden">Search</span>
+        <i class="ph ph-magnifying-glass"></i
+        ><span class="visually-hidden">Search</span>
       </template>
       <!-- todo: Use <form> instead of <BDropdownForm> due to styling issues -->
       <form class="px-3 py-2">
diff --git a/src/layouts/dashboard/vertical-header/VerticalHeader.vue b/src/layouts/dashboard/vertical-header/VerticalHeader.vue
index 6b23a61..9a78025 100644
--- a/src/layouts/dashboard/vertical-header/VerticalHeader.vue
+++ b/src/layouts/dashboard/vertical-header/VerticalHeader.vue
@@ -1,27 +1,30 @@
 <script setup lang="ts">
 // components
-import Searchbar from './SearchBar.vue'
-import NotificationDD from './NotificationDD.vue'
-import ProfileDD from './ProfileDD.vue'
+import Searchbar from "./SearchBar.vue";
+import NotificationDD from "./NotificationDD.vue";
+import ProfileDD from "./ProfileDD.vue";
 
 const ToggleSidebar = () => {
-  document.querySelector('.pc-sidebar')?.classList.toggle('pc-sidebar-hide')
-}
+  document.querySelector(".pc-sidebar")?.classList.toggle("pc-sidebar-hide");
+};
 
 const MobileToggleSidebar = () => {
-  const sidebar = document.querySelector('.pc-sidebar')
-  sidebar?.classList.toggle('mob-sidebar-active')
+  const sidebar = document.querySelector(".pc-sidebar");
+  sidebar?.classList.toggle("mob-sidebar-active");
 
-  sidebar?.insertAdjacentHTML('beforeend', '<div class="pc-menu-overlay"></div>')
+  sidebar?.insertAdjacentHTML(
+    "beforeend",
+    '<div class="pc-menu-overlay"></div>',
+  );
 
-  const overlay = document.querySelector('.pc-menu-overlay')
+  const overlay = document.querySelector(".pc-menu-overlay");
   if (overlay) {
-    overlay.addEventListener('click', () => {
-      sidebar?.classList.remove('mob-sidebar-active')
-      overlay.remove()
-    })
+    overlay.addEventListener("click", () => {
+      sidebar?.classList.remove("mob-sidebar-active");
+      overlay.remove();
+    });
   }
-}
+};
 </script>
 
 <template>
diff --git a/src/layouts/dashboard/vertical-sidebar/NavCollapse/NavCollapse.vue b/src/layouts/dashboard/vertical-sidebar/NavCollapse/NavCollapse.vue
index cbcc07b..5b7001c 100644
--- a/src/layouts/dashboard/vertical-sidebar/NavCollapse/NavCollapse.vue
+++ b/src/layouts/dashboard/vertical-sidebar/NavCollapse/NavCollapse.vue
@@ -1,17 +1,17 @@
 <script setup lang="ts">
-import { ref, computed, watch, nextTick } from 'vue'
-import { useRoute } from 'vue-router'
+import { ref, computed, watch, nextTick } from "vue";
+import { useRoute } from "vue-router";
 
 // files
-import NavItem from '../NavItem/NavItem.vue'
-import type { menu } from '../sidebarItem'
+import NavItem from "../NavItem/NavItem.vue";
+import type { menu } from "../sidebarItem";
 
-const props = defineProps({ item: Object, level: Number })
-const route = useRoute()
+const props = defineProps({ item: Object, level: Number });
+const route = useRoute();
 
 // Store expanded states for each menu item (unique key = item title)
-const expandedItem = ref<string | null>(null)
-const submenu = ref<HTMLElement | null>(null)
+const expandedItem = ref<string | null>(null);
+const submenu = ref<HTMLElement | null>(null);
 
 // Check if the current item or any of its children is active
 const isAnyChildActive = (items: menu[]): boolean => {
@@ -19,51 +19,51 @@ const isAnyChildActive = (items: menu[]): boolean => {
     (sub) =>
       sub.to?.toLowerCase() === route.path.toLowerCase() ||
       (sub.children && isAnyChildActive(sub.children)),
-  )
-}
+  );
+};
 
 // Compute active state (either the parent or any child)
 const isActive = computed(() => {
   return (
     props.item?.to?.toLowerCase() === route.path.toLowerCase() ||
     isAnyChildActive(props.item?.children || [])
-  )
-})
+  );
+});
 
 // Keep menu open if it's active on page load
 watch(
   () => route.path,
   async () => {
-    expandedItem.value = isActive.value ? props.item?.title : null
-    await nextTick()
+    expandedItem.value = isActive.value ? props.item?.title : null;
+    await nextTick();
 
     if (submenu.value && isActive.value) {
-      slideDown(submenu.value)
+      slideDown(submenu.value);
     } else if (submenu.value) {
-      slideUp(submenu.value)
+      slideUp(submenu.value);
     }
   },
   { immediate: true },
-)
+);
 
 // Toggle menu expansion independently
 const toggleMenu = async () => {
-  const isExpanded = expandedItem.value === props.item?.title
+  const isExpanded = expandedItem.value === props.item?.title;
 
   // Close all menus and only open the clicked one
-  expandedItem.value = isExpanded ? null : props.item?.title
+  expandedItem.value = isExpanded ? null : props.item?.title;
 
-  await nextTick()
+  await nextTick();
   if (submenu.value) {
     // transition walu ahiya thi add thase ke ??
 
     if (expandedItem.value === props.item?.title) {
-      slideDown(submenu.value)
+      slideDown(submenu.value);
     } else {
-      slideUp(submenu.value)
+      slideUp(submenu.value);
     }
   }
-}
+};
 
 const slideDown = async (el: HTMLElement) => {
   // el.style.removeProperty('display') // Reset display
@@ -71,34 +71,34 @@ const slideDown = async (el: HTMLElement) => {
   // if (display === 'none')
 
   // el.style.height = '0px'
-  await nextTick()
+  await nextTick();
   // el.style.transition= 'all 0.3s ease-in-out'
-  el.style.removeProperty('padding')
-  el.style.display = 'block'
-  el.style.overflow = 'hidden'
+  el.style.removeProperty("padding");
+  el.style.display = "block";
+  el.style.overflow = "hidden";
 
-  const height = el.scrollHeight + 'px' // Get actual height
-  el.style.height = height
+  const height = el.scrollHeight + "px"; // Get actual height
+  el.style.height = height;
   setTimeout(() => {
-    el.style.overflow = 'visible'
-    el.style.height = '100%'
-  }, 301)
-}
+    el.style.overflow = "visible";
+    el.style.height = "100%";
+  }, 301);
+};
 
 const slideUp = async (el: HTMLElement) => {
-  el.style.height = el.scrollHeight + 'px'
-  await nextTick()
+  el.style.height = el.scrollHeight + "px";
+  await nextTick();
   // el.style.transition= 'all 0.3s ease-in-out',
-  el.style.overflow = 'hidden'
-  el.style.display = 'block'
-  el.style.height = '0px'
-  el.style.padding = '0px'
+  el.style.overflow = "hidden";
+  el.style.display = "block";
+  el.style.height = "0px";
+  el.style.padding = "0px";
 
   setTimeout(() => {
     // el.style.display = 'none'
     // el.style.removeProperty('padding')
-  }, 301)
-}
+  }, 301);
+};
 </script>
 
 <template>
@@ -106,7 +106,10 @@ const slideUp = async (el: HTMLElement) => {
     :class="[
       'pc-item',
       'pc-hasmenu',
-      { 'pc-trigger': expandedItem === item?.title, active: expandedItem === item?.title },
+      {
+        'pc-trigger': expandedItem === item?.title,
+        active: expandedItem === item?.title,
+      },
     ]"
   >
     <a href="javascript:void(0)" class="pc-link" @click.prevent="toggleMenu">
@@ -115,13 +118,19 @@ const slideUp = async (el: HTMLElement) => {
       </div>
       <span class="pc-mtext">{{ props.item?.title }}</span>
       <span class="pc-arrow"><i class="ti ti-chevron-right"></i></span>
-      <span class="pc-badge" v-if="props.item?.chip">{{ props.item?.chip }}</span>
+      <span class="pc-badge" v-if="props.item?.chip">{{
+        props.item?.chip
+      }}</span>
     </a>
 
     <!-- Sub-items -->
     <ul ref="submenu" v-if="props.item?.children" class="pc-submenu">
       <template v-for="(subitem, i) in props.item?.children" :key="i">
-        <NavCollapse v-if="subitem.children" :item="subitem" :level="(level ?? 0) + 1" />
+        <NavCollapse
+          v-if="subitem.children"
+          :item="subitem"
+          :level="(level ?? 0) + 1"
+        />
         <NavItem v-else :item="subitem" :level="(level ?? 0) + 1" />
       </template>
     </ul>
diff --git a/src/layouts/dashboard/vertical-sidebar/NavGroup/NavGroup.vue b/src/layouts/dashboard/vertical-sidebar/NavGroup/NavGroup.vue
index eb39413..68765c4 100644
--- a/src/layouts/dashboard/vertical-sidebar/NavGroup/NavGroup.vue
+++ b/src/layouts/dashboard/vertical-sidebar/NavGroup/NavGroup.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const props = defineProps({ item: Object })
+const props = defineProps({ item: Object });
 </script>
 
 <template>
diff --git a/src/layouts/dashboard/vertical-sidebar/NavItem/NavItem.vue b/src/layouts/dashboard/vertical-sidebar/NavItem/NavItem.vue
index c12b100..85765b1 100644
--- a/src/layouts/dashboard/vertical-sidebar/NavItem/NavItem.vue
+++ b/src/layouts/dashboard/vertical-sidebar/NavItem/NavItem.vue
@@ -1,55 +1,55 @@
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue'
+import { computed, onMounted, ref } from "vue";
 
 // third party
-import { useRoute } from 'vue-router'
+import { useRoute } from "vue-router";
 
-const props = defineProps({ item: Object, level: Number })
-const route = useRoute()
-const emit = defineEmits(['childActive'])
+const props = defineProps({ item: Object, level: Number });
+const route = useRoute();
+const emit = defineEmits(["childActive"]);
 
 // Check if this item is active
 const isActive = computed(() => {
-  return route.path.toLowerCase() === props.item?.to.toLowerCase()
-})
+  return route.path.toLowerCase() === props.item?.to.toLowerCase();
+});
 
 // Notify parent if active
 onMounted(() => {
   if (isActive.value) {
-    emit('childActive', props.item?.title) // Send item title to parent
+    emit("childActive", props.item?.title); // Send item title to parent
   }
-})
+});
 
-const relativeURL = ref('')
+const relativeURL = ref("");
 
 onMounted(async () => {
   try {
-    relativeURL.value = await import.meta.env.BASE_URL
+    relativeURL.value = await import.meta.env.BASE_URL;
   } catch (error) {
-    console.error('Error url not found:', error)
+    console.error("Error url not found:", error);
   }
-})
+});
 
 // Computed final link
 const linkTo = computed(() => {
-  if (props.item?.getURL && props.item?.type === 'external') {
-    return '/'
+  if (props.item?.getURL && props.item?.type === "external") {
+    return "/";
   } else if (props.item?.getURL) {
-    return `${relativeURL.value}${props.item?.to}`
+    return `${relativeURL.value}${props.item?.to}`;
   } else {
-    return props.item?.to
+    return props.item?.to;
   }
-})
+});
 
 // Handle click
 const handleClick = (e: Event) => {
-  document.querySelector('.pc-sidebar')?.classList.remove('mob-sidebar-active')
-  document.querySelector('.pc-sidebar .pc-menu-overlay')?.remove()
-  if (props.item?.getURL && props.item?.type === 'external') {
-    e.preventDefault() // stop vue-router
-    window.open(props.item?.to, '_blank')
+  document.querySelector(".pc-sidebar")?.classList.remove("mob-sidebar-active");
+  document.querySelector(".pc-sidebar .pc-menu-overlay")?.remove();
+  if (props.item?.getURL && props.item?.type === "external") {
+    e.preventDefault(); // stop vue-router
+    window.open(props.item?.to, "_blank");
   }
-}
+};
 </script>
 
 <template>
@@ -66,7 +66,9 @@ const handleClick = (e: Event) => {
         <i :class="['ph ' + props.item?.icon]"></i>
       </div>
       <span class="pc-mtext">{{ item?.title }}</span>
-      <span class="pc-badge" v-if="props.item?.chip">{{ props.item?.chip }}</span>
+      <span class="pc-badge" v-if="props.item?.chip">{{
+        props.item?.chip
+      }}</span>
     </router-link>
   </li>
 </template>
diff --git a/src/layouts/dashboard/vertical-sidebar/VerticalSidebar.vue b/src/layouts/dashboard/vertical-sidebar/VerticalSidebar.vue
index db2733a..ea32761 100644
--- a/src/layouts/dashboard/vertical-sidebar/VerticalSidebar.vue
+++ b/src/layouts/dashboard/vertical-sidebar/VerticalSidebar.vue
@@ -1,39 +1,39 @@
 <script setup lang="ts">
-import { shallowRef, ref, onMounted, onBeforeUnmount } from 'vue'
+import { shallowRef, ref, onMounted, onBeforeUnmount } from "vue";
 
-import { BImg } from 'bootstrap-vue-next'
+import { BImg } from "bootstrap-vue-next";
 
 // third party
-import SimpleBar from 'simplebar-vue'
+import SimpleBar from "simplebar-vue";
 
 // files
-import sidebarItems from './sidebarItem'
+import sidebarItems from "./sidebarItem";
 
 // components
-import Logo from '../logo/LogoMain.vue'
-import NavGroup from './NavGroup/NavGroup.vue'
-import NavItem from './NavItem/NavItem.vue'
-import NavCollapse from './NavCollapse/NavCollapse.vue'
+import Logo from "../logo/LogoMain.vue";
+import NavGroup from "./NavGroup/NavGroup.vue";
+import NavItem from "./NavItem/NavItem.vue";
+import NavCollapse from "./NavCollapse/NavCollapse.vue";
 
-import couponImage from '@/assets/images/img-coupon.png'
+import couponImage from "@/assets/images/img-coupon.png";
 
-const isSmallScreen = ref(window.innerWidth <= 1024)
+const isSmallScreen = ref(window.innerWidth <= 1024);
 
 // Function to update screen size
 const updateScreenSize = () => {
-  isSmallScreen.value = window.innerWidth <= 1024
-}
+  isSmallScreen.value = window.innerWidth <= 1024;
+};
 
 onMounted(() => {
-  updateScreenSize()
-  window.addEventListener('resize', updateScreenSize)
-})
+  updateScreenSize();
+  window.addEventListener("resize", updateScreenSize);
+});
 
 onBeforeUnmount(() => {
-  window.removeEventListener('resize', updateScreenSize)
-})
+  window.removeEventListener("resize", updateScreenSize);
+});
 
-const sidebarMenu = shallowRef(sidebarItems)
+const sidebarMenu = shallowRef(sidebarItems);
 </script>
 
 <template>
@@ -47,7 +47,11 @@ const sidebarMenu = shallowRef(sidebarItems)
             <!---Menu Loop -->
             <template v-for="(item, i) in sidebarMenu" :key="i">
               <!---Item Sub Header -->
-              <NavGroup :item="item" v-if="item.header" :key="item.title ?? i" />
+              <NavGroup
+                :item="item"
+                v-if="item.header"
+                :key="item.title ?? i"
+              />
               <!---If Has Child -->
               <NavCollapse :item="item" :level="0" v-else-if="item.children" />
               <!---Single Item-->
diff --git a/src/layouts/dashboard/vertical-sidebar/sidebarItem.ts b/src/layouts/dashboard/vertical-sidebar/sidebarItem.ts
index a210ba8..ec7496e 100644
--- a/src/layouts/dashboard/vertical-sidebar/sidebarItem.ts
+++ b/src/layouts/dashboard/vertical-sidebar/sidebarItem.ts
@@ -1,126 +1,126 @@
 export interface menu {
-  header?: string
-  title?: string
-  icon?: string
-  to?: string
-  getURL?: boolean
-  chip?: string
-  chipIcon?: string
-  children?: menu[]
-  type?: string
+  header?: string;
+  title?: string;
+  icon?: string;
+  to?: string;
+  getURL?: boolean;
+  chip?: string;
+  chipIcon?: string;
+  children?: menu[];
+  type?: string;
 }
 
 const sidebarItem: menu[] = [
-  { header: 'Navigation' },
+  { header: "Navigation" },
   {
-    title: 'Dashboard',
-    icon: 'ph-house-line',
-    to: '/',
+    title: "Dashboard",
+    icon: "ph-house-line",
+    to: "/",
   },
-  { header: 'Ui Components' },
+  { header: "Ui Components" },
   {
-    title: 'Color',
-    icon: 'ph-palette',
-    to: '/color',
+    title: "Color",
+    icon: "ph-palette",
+    to: "/color",
   },
   {
-    title: 'Typography',
-    icon: 'ph-text-t',
-    to: '/typography',
+    title: "Typography",
+    icon: "ph-text-t",
+    to: "/typography",
   },
   {
-    title: 'Icons',
-    icon: 'ph-feather',
-    to: '#',
+    title: "Icons",
+    icon: "ph-feather",
+    to: "#",
     children: [
       {
-        title: 'Tabler',
-        to: 'https://tabler.io/icons',
+        title: "Tabler",
+        to: "https://tabler.io/icons",
         getURL: true,
-        type: 'external',
+        type: "external",
       },
       {
-        title: 'Phosphor',
-        to: 'https://phosphoricons.com/',
-        type: 'external',
+        title: "Phosphor",
+        to: "https://phosphoricons.com/",
+        type: "external",
         getURL: true,
       },
     ],
   },
-  { header: 'Pages' },
+  { header: "Pages" },
   {
-    title: 'Login',
-    icon: 'ph-lock',
-    to: '/login',
-    type: 'external',
+    title: "Login",
+    icon: "ph-lock",
+    to: "/login",
+    type: "external",
   },
   {
-    title: 'Register',
-    icon: 'ph-user-plus',
-    to: '/register',
-    type: 'external',
+    title: "Register",
+    icon: "ph-user-plus",
+    to: "/register",
+    type: "external",
   },
-  { header: 'Other' },
+  { header: "Other" },
   {
-    title: 'Menu levels',
-    icon: 'ph-tree-structure',
-    to: '#',
+    title: "Menu levels",
+    icon: "ph-tree-structure",
+    to: "#",
     children: [
       {
-        title: 'Level 2.1',
-        to: '#',
+        title: "Level 2.1",
+        to: "#",
       },
       {
-        title: 'Level 2.2',
-        to: '',
+        title: "Level 2.2",
+        to: "",
         children: [
           {
-            title: 'Level 3.1',
-            to: '#',
+            title: "Level 3.1",
+            to: "#",
           },
           {
-            title: 'Level 3.2',
-            to: '#',
+            title: "Level 3.2",
+            to: "#",
           },
           {
-            title: 'Level 3.3',
-            to: '#',
+            title: "Level 3.3",
+            to: "#",
             children: [
               {
-                title: 'Level 4.1',
-                to: '#',
+                title: "Level 4.1",
+                to: "#",
               },
               {
-                title: 'Level 4.2',
-                to: '#',
+                title: "Level 4.2",
+                to: "#",
               },
             ],
           },
         ],
       },
       {
-        title: 'Level 2.3',
-        to: '',
+        title: "Level 2.3",
+        to: "",
         children: [
           {
-            title: 'Level 3.1',
-            to: '#',
+            title: "Level 3.1",
+            to: "#",
           },
           {
-            title: 'Level 3.2',
-            to: '#',
+            title: "Level 3.2",
+            to: "#",
           },
           {
-            title: 'Level 3.3',
-            to: '#',
+            title: "Level 3.3",
+            to: "#",
             children: [
               {
-                title: 'Level 4.1',
-                to: '#',
+                title: "Level 4.1",
+                to: "#",
               },
               {
-                title: 'Level 4.2',
-                to: '#',
+                title: "Level 4.2",
+                to: "#",
               },
             ],
           },
@@ -129,10 +129,10 @@ const sidebarItem: menu[] = [
     ],
   },
   {
-    title: 'Sample Page',
-    icon: 'ph-desktop',
-    to: '/sample-page',
+    title: "Sample Page",
+    icon: "ph-desktop",
+    to: "/sample-page",
   },
-]
+];
 
-export default sidebarItem
+export default sidebarItem;
diff --git a/src/main.ts b/src/main.ts
index 9534aba..f594a3a 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,30 +1,30 @@
-import '@/assets/scss/style.scss'
-import '@/assets/scss/style-preset.scss'
+import "@/assets/scss/style.scss";
+import "@/assets/scss/style-preset.scss";
 
-import { createApp } from 'vue'
-import { createPinia } from 'pinia'
-import { createBootstrap } from 'bootstrap-vue-next'
-import VueApexCharts from 'vue3-apexcharts'
+import { createApp } from "vue";
+import { createPinia } from "pinia";
+import { createBootstrap } from "bootstrap-vue-next";
+import VueApexCharts from "vue3-apexcharts";
 
-import App from './App.vue'
-import router from './router'
+import App from "./App.vue";
+import router from "./router";
 
 // bootstrap vue next css
-import 'bootstrap-vue-next/dist/bootstrap-vue-next.css'
+import "bootstrap-vue-next/dist/bootstrap-vue-next.css";
 
 // bootstrap.bundle.js
-import 'bootstrap/dist/js/bootstrap.bundle.js'
+import "bootstrap/dist/js/bootstrap.bundle.js";
 
 // google-fonts
-import '@fontsource/open-sans/300.css'
-import '@fontsource/open-sans/400.css'
-import '@fontsource/open-sans/500.css'
-import '@fontsource/open-sans/600.css'
+import "@fontsource/open-sans/300.css";
+import "@fontsource/open-sans/400.css";
+import "@fontsource/open-sans/500.css";
+import "@fontsource/open-sans/600.css";
 
-const app = createApp(App)
+const app = createApp(App);
 
-app.use(createPinia())
-app.use(router)
-app.use(createBootstrap())
-app.use(VueApexCharts)
-app.mount('#app')
+app.use(createPinia());
+app.use(router);
+app.use(createBootstrap());
+app.use(VueApexCharts);
+app.mount("#app");
diff --git a/src/router/MainRoutes.ts b/src/router/MainRoutes.ts
index 5ff98f8..b300e44 100644
--- a/src/router/MainRoutes.ts
+++ b/src/router/MainRoutes.ts
@@ -1,35 +1,35 @@
 const MainRoutes = {
-  path: '/',
-  component: () => import('@/layouts/dashboard/DashboardLayout.vue'),
+  path: "/",
+  component: () => import("@/layouts/dashboard/DashboardLayout.vue"),
   // meta: {
   //   requiresAuth: true
   // },
   children: [
     {
-      name: 'dashboard',
-      path: '/',
-      meta: { title: 'Home' },
-      component: () => import('@/views/dashboard/DefaultDashboard.vue'),
+      name: "dashboard",
+      path: "/",
+      meta: { title: "Home" },
+      component: () => import("@/views/dashboard/DefaultDashboard.vue"),
     },
     {
-      name: 'color',
-      path: '/color',
-      meta: { title: 'Home' },
-      component: () => import('@/views/ui-elements/UiColor.vue'),
+      name: "color",
+      path: "/color",
+      meta: { title: "Home" },
+      component: () => import("@/views/ui-elements/UiColor.vue"),
     },
     {
-      name: 'typography',
-      path: '/typography',
-      meta: { title: 'Home' },
-      component: () => import('@/views/ui-elements/UiTypography.vue'),
+      name: "typography",
+      path: "/typography",
+      meta: { title: "Home" },
+      component: () => import("@/views/ui-elements/UiTypography.vue"),
     },
     {
-      name: 'sample-page',
-      path: '/sample-page',
-      meta: { title: 'Home' },
-      component: () => import('@/views/SamplePage.vue'),
+      name: "sample-page",
+      path: "/sample-page",
+      meta: { title: "Home" },
+      component: () => import("@/views/SamplePage.vue"),
     },
   ],
-}
+};
 
-export default MainRoutes
+export default MainRoutes;
diff --git a/src/router/PublicRoutes.ts b/src/router/PublicRoutes.ts
index 8f4a91b..97b88b6 100644
--- a/src/router/PublicRoutes.ts
+++ b/src/router/PublicRoutes.ts
@@ -1,23 +1,25 @@
 const PublicRoutes = {
-  path: '/main',
-  component: () => import('@/layouts/blank/BlankLayout.vue'),
+  path: "/main",
+  component: () => import("@/layouts/blank/BlankLayout.vue"),
   // meta: {
   //   requiresAuth: false
   // },
   children: [
     {
-      name: 'login',
-      path: '/login',
-      meta: { title: 'Login' },
-      component: () => import('@/views/pages/authentication/login/LoginPage.vue'),
+      name: "login",
+      path: "/login",
+      meta: { title: "Login" },
+      component: () =>
+        import("@/views/pages/authentication/login/LoginPage.vue"),
     },
     {
-      name: 'register',
-      path: '/register',
-      meta: { title: 'Register' },
-      component: () => import('@/views/pages/authentication/register/RegisterPage.vue'),
+      name: "register",
+      path: "/register",
+      meta: { title: "Register" },
+      component: () =>
+        import("@/views/pages/authentication/register/RegisterPage.vue"),
     },
   ],
-}
+};
 
-export default PublicRoutes
+export default PublicRoutes;
diff --git a/src/router/index.ts b/src/router/index.ts
index 3a0bb34..f02f63f 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,31 +1,31 @@
-import { createRouter, createWebHistory } from 'vue-router'
-import MainRoutes from './MainRoutes'
-import PublicRoutes from './PublicRoutes'
-import { useUIStore } from '@/stores/ui'
+import { createRouter, createWebHistory } from "vue-router";
+import MainRoutes from "./MainRoutes";
+import PublicRoutes from "./PublicRoutes";
+import { useUIStore } from "@/stores/ui";
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [PublicRoutes, MainRoutes],
   scrollBehavior() {
-    return { top: 0 }
+    return { top: 0 };
   },
-})
+});
 
 // Navigation Guard to Change Title
 router.beforeEach((to, from, next) => {
-  const appTitle = import.meta.env.VITE_APP_TITLE
-  document.title = to.meta.title ? `${to.meta.title} | ${appTitle}` : appTitle
-  next()
-})
+  const appTitle = import.meta.env.VITE_APP_TITLE;
+  document.title = to.meta.title ? `${to.meta.title} | ${appTitle}` : appTitle;
+  next();
+});
 
 router.beforeEach(() => {
-  const uiStore = useUIStore()
-  uiStore.isLoading = true
-})
+  const uiStore = useUIStore();
+  uiStore.isLoading = true;
+});
 
 router.afterEach(() => {
-  const uiStore = useUIStore()
-  uiStore.isLoading = false
-})
+  const uiStore = useUIStore();
+  uiStore.isLoading = false;
+});
 
-export default router
+export default router;
diff --git a/src/stores/ui.ts b/src/stores/ui.ts
index 1c41c20..105da6b 100644
--- a/src/stores/ui.ts
+++ b/src/stores/ui.ts
@@ -1,10 +1,10 @@
-import { ref } from 'vue'
-import { defineStore } from 'pinia'
+import { ref } from "vue";
+import { defineStore } from "pinia";
 
-export const useUIStore = defineStore('ui', () => {
-  const isLoading = ref(false)
+export const useUIStore = defineStore("ui", () => {
+  const isLoading = ref(false);
 
   return {
     isLoading,
-  }
-})
+  };
+});
diff --git a/src/types/jsvectormap.d.ts b/src/types/jsvectormap.d.ts
index 28786c5..40ad315 100644
--- a/src/types/jsvectormap.d.ts
+++ b/src/types/jsvectormap.d.ts
@@ -1 +1 @@
-declare module 'jsvectormap'
+declare module "jsvectormap";
diff --git a/src/types/vue-apexcharts.d.ts b/src/types/vue-apexcharts.d.ts
index 308ac7c..2a47fdb 100644
--- a/src/types/vue-apexcharts.d.ts
+++ b/src/types/vue-apexcharts.d.ts
@@ -1 +1 @@
-declare module 'vue3-apexcharts'
+declare module "vue3-apexcharts";
diff --git a/src/views/SamplePage.vue b/src/views/SamplePage.vue
index 022e748..baa60dd 100644
--- a/src/views/SamplePage.vue
+++ b/src/views/SamplePage.vue
@@ -1,18 +1,21 @@
 <script setup lang="ts">
-import { ref, shallowRef } from 'vue'
+import { ref, shallowRef } from "vue";
 
 // third party
-import { BCard, BRow, BCol } from 'bootstrap-vue-next'
+import { BCard, BRow, BCol } from "bootstrap-vue-next";
 
 // common components
-import BaseBreadcrumb from '@/components/shared/BaseBreadcrumb.vue'
+import BaseBreadcrumb from "@/components/shared/BaseBreadcrumb.vue";
 
-const page = ref({ title: 'Sample Page' })
-const breadcrumbs = shallowRef([{ text: 'Other' }, { text: 'Sample Page' }])
+const page = ref({ title: "Sample Page" });
+const breadcrumbs = shallowRef([{ text: "Other" }, { text: "Sample Page" }]);
 </script>
 
 <template>
-  <BaseBreadcrumb :title="page.title" :breadcrumbs="breadcrumbs"></BaseBreadcrumb>
+  <BaseBreadcrumb
+    :title="page.title"
+    :breadcrumbs="breadcrumbs"
+  ></BaseBreadcrumb>
   <!-- [ Main Content ] start -->
   <BRow>
     <!-- [ sample-page ] start -->
@@ -21,9 +24,10 @@ const breadcrumbs = shallowRef([{ text: 'Other' }, { text: 'Sample Page' }])
         <template #header>
           <h5>Hello card</h5>
         </template>
-        Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque facilis alias magnam,
-        voluptate maiores fugiat, aliquid totam saepe voluptates quisquam consequatur impedit quos
-        velit reprehenderit nostrum quia non, dolorem explicabo?
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque
+        facilis alias magnam, voluptate maiores fugiat, aliquid totam saepe
+        voluptates quisquam consequatur impedit quos velit reprehenderit nostrum
+        quia non, dolorem explicabo?
       </BCard>
     </BCol>
     <!-- [ sample-page ] end -->
diff --git a/src/views/dashboard/DefaultDashboard.vue b/src/views/dashboard/DefaultDashboard.vue
index 8e889a3..3c79014 100644
--- a/src/views/dashboard/DefaultDashboard.vue
+++ b/src/views/dashboard/DefaultDashboard.vue
@@ -1,23 +1,23 @@
 <script setup lang="ts">
-import { ref, shallowRef } from 'vue'
+import { ref, shallowRef } from "vue";
 
 // third party
-import { BRow, BCol } from 'bootstrap-vue-next'
+import { BRow, BCol } from "bootstrap-vue-next";
 
 // common components
-import BaseBreadcrumb from '@/components/shared/BaseBreadcrumb.vue'
-import CardHeader from '@/components/shared/CardHeader.vue'
+import BaseBreadcrumb from "@/components/shared/BaseBreadcrumb.vue";
+import CardHeader from "@/components/shared/CardHeader.vue";
 
-import ProgressSalesCard from '@/views/dashboard/components/ProgressSalesCard.vue'
-import WorldMap from '@/views/dashboard/components/WorldMap.vue'
-import EarningChart from '@/views/dashboard/components/EarningChart.vue'
-import TotalCard from '@/views/dashboard/components/TotalCard.vue'
-import SocialLikeCard from '@/views/dashboard/components/SocialLikeCard.vue'
-import RatingCard from '@/views/dashboard/components/RatingCard.vue'
-import RecentUser from '@/views/dashboard/components/RecentUser.vue'
+import ProgressSalesCard from "@/views/dashboard/components/ProgressSalesCard.vue";
+import WorldMap from "@/views/dashboard/components/WorldMap.vue";
+import EarningChart from "@/views/dashboard/components/EarningChart.vue";
+import TotalCard from "@/views/dashboard/components/TotalCard.vue";
+import SocialLikeCard from "@/views/dashboard/components/SocialLikeCard.vue";
+import RatingCard from "@/views/dashboard/components/RatingCard.vue";
+import RecentUser from "@/views/dashboard/components/RecentUser.vue";
 
-const page = ref({ title: 'Home' })
-const breadcrumbs = shallowRef([{ text: 'Dashboard' }, { text: 'Home' }])
+const page = ref({ title: "Home" });
+const breadcrumbs = shallowRef([{ text: "Dashboard" }, { text: "Home" }]);
 </script>
 
 <template>
diff --git a/src/views/dashboard/components/EarningChart.vue b/src/views/dashboard/components/EarningChart.vue
index b03c509..bbf0a67 100644
--- a/src/views/dashboard/components/EarningChart.vue
+++ b/src/views/dashboard/components/EarningChart.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed } from "vue";
 
 // third party
-import { BCard } from 'bootstrap-vue-next'
+import { BCard } from "bootstrap-vue-next";
 
 const chartOptions = computed(() => {
   return {
     chart: {
-      type: 'line',
+      type: "line",
       height: 210,
       zoom: {
         enabled: false,
@@ -19,17 +19,17 @@ const chartOptions = computed(() => {
     dataLabels: {
       enabled: false,
     },
-    colors: ['#fff'],
+    colors: ["#fff"],
     fill: {
-      type: 'solid',
+      type: "solid",
     },
     plotOptions: {
       bar: {
-        columnWidth: '30%',
+        columnWidth: "30%",
       },
     },
     xaxis: {
-      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
+      categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
       axisBorder: {
         show: false,
       },
@@ -38,7 +38,7 @@ const chartOptions = computed(() => {
       },
       labels: {
         style: {
-          colors: '#fff',
+          colors: "#fff",
         },
       },
     },
@@ -74,7 +74,7 @@ const chartOptions = computed(() => {
     },
     markers: {
       size: 5,
-      colors: '#fff',
+      colors: "#fff",
       opacity: 0.9,
       strokeWidth: 2,
       hover: {
@@ -91,7 +91,7 @@ const chartOptions = computed(() => {
       y: {
         title: {
           formatter: function () {
-            return 'Statistics :'
+            return "Statistics :";
           },
         },
       },
@@ -99,8 +99,8 @@ const chartOptions = computed(() => {
         show: false,
       },
     },
-  }
-})
+  };
+});
 
 const lineChart = {
   series: [
@@ -108,11 +108,15 @@ const lineChart = {
       data: [10, 60, 45, 72, 45, 86],
     },
   ],
-}
+};
 </script>
 
 <template>
-  <BCard class="bg-primary overflow-hidden" header-class="border-0" body-class="py-0 p-x-25">
+  <BCard
+    class="bg-primary overflow-hidden"
+    header-class="border-0"
+    body-class="py-0 p-x-25"
+  >
     <template #header>
       <h5 class="text-white">Earnings</h5>
     </template>
diff --git a/src/views/dashboard/components/ProgressSalesCard.vue b/src/views/dashboard/components/ProgressSalesCard.vue
index 0c1eb37..91225df 100644
--- a/src/views/dashboard/components/ProgressSalesCard.vue
+++ b/src/views/dashboard/components/ProgressSalesCard.vue
@@ -1,16 +1,16 @@
 <script setup lang="ts">
 // third party
-import { BRow, BCol, BProgress, BProgressBar, BCard } from 'bootstrap-vue-next'
+import { BRow, BCol, BProgress, BProgressBar, BCard } from "bootstrap-vue-next";
 
 const props = defineProps<{
-  title: string
-  icon: string
-  iconVariant: string
-  sales: string
-  percent: number
-  progressValue: number
-  progressClass?: string
-}>()
+  title: string;
+  icon: string;
+  iconVariant: string;
+  sales: string;
+  percent: number;
+  progressValue: number;
+  progressClass?: string;
+}>();
 </script>
 
 <template>
diff --git a/src/views/dashboard/components/RatingCard.vue b/src/views/dashboard/components/RatingCard.vue
index 89e49cc..98c54a6 100644
--- a/src/views/dashboard/components/RatingCard.vue
+++ b/src/views/dashboard/components/RatingCard.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref } from "vue";
 
 // third party
-import { BProgress, BProgressBar, BRow, BCol } from 'bootstrap-vue-next'
+import { BProgress, BProgressBar, BRow, BCol } from "bootstrap-vue-next";
 
 // common components
-import CardHeader from '@/components/shared/CardHeader.vue'
+import CardHeader from "@/components/shared/CardHeader.vue";
 
 const ratingData = ref([
   { star: 5, count: 384, value: 70 },
@@ -13,7 +13,7 @@ const ratingData = ref([
   { star: 3, count: 24, value: 25 },
   { star: 2, count: 1, value: 10 },
   { star: 1, count: 0, value: 0 },
-])
+]);
 </script>
 
 <template>
@@ -28,7 +28,10 @@ const ratingData = ref([
       <BCol cols="6">
         <h6 class="d-flex align-items-center float-end m-0">
           0.4
-          <i class="ti ti-caret-up-filled text-success f-22 m-l-10" style="margin-bottom: -2px"></i>
+          <i
+            class="ti ti-caret-up-filled text-success f-22 m-l-10"
+            style="margin-bottom: -2px"
+          ></i>
         </h6>
       </BCol>
     </BRow>
diff --git a/src/views/dashboard/components/RecentUser.vue b/src/views/dashboard/components/RecentUser.vue
index 36b3680..b63763d 100644
--- a/src/views/dashboard/components/RecentUser.vue
+++ b/src/views/dashboard/components/RecentUser.vue
@@ -1,54 +1,70 @@
 <script setup lang="ts">
 // third party
-import { BImg, BTableSimple, BTbody, BTr, BTd, BBadge } from 'bootstrap-vue-next'
+import {
+  BImg,
+  BTableSimple,
+  BTbody,
+  BTr,
+  BTd,
+  BBadge,
+} from "bootstrap-vue-next";
 
 // common components
-import CardHeader from '@/components/shared/CardHeader.vue'
+import CardHeader from "@/components/shared/CardHeader.vue";
 
 // assets
-import Img1 from '@/assets/images/user/avatar-1.jpg'
-import Img2 from '@/assets/images/user/avatar-2.jpg'
-import Img3 from '@/assets/images/user/avatar-3.jpg'
+import Img1 from "@/assets/images/user/avatar-1.jpg";
+import Img2 from "@/assets/images/user/avatar-2.jpg";
+import Img3 from "@/assets/images/user/avatar-3.jpg";
 
 const users = [
   {
-    name: 'Isabella Christensen',
-    message: 'Lorem Ipsum is simply dummy text of…',
-    status: 'success',
-    date: '11 MAY 12:56',
+    name: "Isabella Christensen",
+    message: "Lorem Ipsum is simply dummy text of…",
+    status: "success",
+    date: "11 MAY 12:56",
     avatar: Img1,
   },
   {
-    name: 'Mathilde Andersen',
-    message: 'Lorem Ipsum is simply dummy text of…',
-    status: 'danger',
-    date: '11 MAY 10:35',
+    name: "Mathilde Andersen",
+    message: "Lorem Ipsum is simply dummy text of…",
+    status: "danger",
+    date: "11 MAY 10:35",
     avatar: Img2,
   },
   {
-    name: 'Karla Sorensen',
-    message: 'Lorem Ipsum is simply dummy text of…',
-    status: 'success',
-    date: '9 MAY 17:38',
+    name: "Karla Sorensen",
+    message: "Lorem Ipsum is simply dummy text of…",
+    status: "success",
+    date: "9 MAY 17:38",
     avatar: Img3,
   },
   {
-    name: 'Ida Jorgensen',
-    message: 'Lorem Ipsum is simply dummy text of…',
-    status: 'danger',
-    date: '19 MAY 12:56',
+    name: "Ida Jorgensen",
+    message: "Lorem Ipsum is simply dummy text of…",
+    status: "danger",
+    date: "19 MAY 12:56",
     avatar: Img1,
   },
-]
+];
 </script>
 
 <template>
-  <CardHeader title="Recent Users" class="Recent-Users" body-class="px-0 py-0 table-body">
+  <CardHeader
+    title="Recent Users"
+    class="Recent-Users"
+    body-class="px-0 py-0 table-body"
+  >
     <BTableSimple class="mb-0" responsive hover>
       <BTbody>
         <BTr v-for="(user, index) in users" :key="index" class="unread">
           <BTd>
-            <BImg :src="user.avatar" rounded="circle" style="width: 40px" alt="activity-user" />
+            <BImg
+              :src="user.avatar"
+              rounded="circle"
+              style="width: 40px"
+              alt="activity-user"
+            />
           </BTd>
           <BTd>
             <h6 class="mb-1">{{ user.name }}</h6>
@@ -63,10 +79,18 @@ const users = [
             </h6>
           </BTd>
           <BTd>
-            <BBadge tag="a" href="#!" :variant="null" class="bg-brand-color-2 text-white f-12 me-2"
+            <BBadge
+              tag="a"
+              href="#!"
+              :variant="null"
+              class="bg-brand-color-2 text-white f-12 me-2"
               >Reject</BBadge
             >
-            <BBadge tag="a" href="#!" :variant="null" class="bg-brand-color-1 text-white f-12"
+            <BBadge
+              tag="a"
+              href="#!"
+              :variant="null"
+              class="bg-brand-color-1 text-white f-12"
               >Approve</BBadge
             >
           </BTd>
diff --git a/src/views/dashboard/components/SocialLikeCard.vue b/src/views/dashboard/components/SocialLikeCard.vue
index 384001c..9e18aad 100644
--- a/src/views/dashboard/components/SocialLikeCard.vue
+++ b/src/views/dashboard/components/SocialLikeCard.vue
@@ -1,20 +1,27 @@
 <script setup lang="ts">
 // third party
-import { BCard, BCardBody, BRow, BCol, BProgress, BProgressBar } from 'bootstrap-vue-next'
+import {
+  BCard,
+  BCardBody,
+  BRow,
+  BCol,
+  BProgress,
+  BProgressBar,
+} from "bootstrap-vue-next";
 
 const props = defineProps<{
-  likes: string
-  icon: string
-  iconVariant: string
-  percent: string
-  percentClass?: string
-  target: string
-  targetProgress: number
-  targetProgressClass?: string
-  duration: string
-  durationProgress: number
-  durationProgressClass?: string
-}>()
+  likes: string;
+  icon: string;
+  iconVariant: string;
+  percent: string;
+  percentClass?: string;
+  target: string;
+  targetProgress: number;
+  targetProgressClass?: string;
+  duration: string;
+  durationProgress: number;
+  durationProgressClass?: string;
+}>();
 </script>
 
 <template>
@@ -41,7 +48,10 @@ const props = defineProps<{
             {{ props.target }}
           </h6>
           <BProgress height="6px" aria-label="target">
-            <BProgressBar :value="props.targetProgress" :class="`${props?.targetProgressClass}`" />
+            <BProgressBar
+              :value="props.targetProgress"
+              :class="`${props?.targetProgressClass}`"
+            />
           </BProgress>
         </BCol>
         <BCol cols="6">
diff --git a/src/views/dashboard/components/TotalCard.vue b/src/views/dashboard/components/TotalCard.vue
index a0d520a..90487da 100644
--- a/src/views/dashboard/components/TotalCard.vue
+++ b/src/views/dashboard/components/TotalCard.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 // third party
-import { BCard, BCardBody, BRow, BCol } from 'bootstrap-vue-next'
+import { BCard, BCardBody, BRow, BCol } from "bootstrap-vue-next";
 </script>
 
 <template>
diff --git a/src/views/dashboard/components/WorldMap.vue b/src/views/dashboard/components/WorldMap.vue
index 0ea950f..fe8dcf0 100644
--- a/src/views/dashboard/components/WorldMap.vue
+++ b/src/views/dashboard/components/WorldMap.vue
@@ -1,30 +1,30 @@
 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount } from 'vue'
+import { ref, onMounted, onBeforeUnmount } from "vue";
 
 // third party
-import jsVectorMap from 'jsvectormap'
-import 'jsvectormap/dist/maps/world'
-import 'jsvectormap/src/scss/jsvectormap.scss'
+import jsVectorMap from "jsvectormap";
+import "jsvectormap/dist/maps/world";
+import "jsvectormap/src/scss/jsvectormap.scss";
 
 // map setup
-const mapWorld = ref<HTMLElement | null>(null)
+const mapWorld = ref<HTMLElement | null>(null);
 interface JsVectorMapInstance {
-  destroy: () => void
-  updateSize: () => void
+  destroy: () => void;
+  updateSize: () => void;
 }
 
-let mapInstance: JsVectorMapInstance | null = null
+let mapInstance: JsVectorMapInstance | null = null;
 
 const resizeHandler = () => {
-  mapInstance?.updateSize()
-}
+  mapInstance?.updateSize();
+};
 
 onMounted(() => {
   if (mapWorld.value) {
-    mapWorld.value.id = 'map-world'
+    mapWorld.value.id = "map-world";
     mapInstance = new jsVectorMap({
-      selector: '#map-world',
-      map: 'world',
+      selector: "#map-world",
+      map: "world",
       zoomButtons: true,
       markersSelectable: true,
       markers: [
@@ -43,10 +43,10 @@ onMounted(() => {
       ],
       markerStyle: {
         initial: {
-          fill: '#3f4d67',
+          fill: "#3f4d67",
         },
         hover: {
-          fill: '#04a9f5',
+          fill: "#04a9f5",
         },
       },
       markerLabelStyle: {
@@ -54,20 +54,20 @@ onMounted(() => {
           fontFamily: "'Inter', sans-serif",
           fontSize: 13,
           fontWeight: 500,
-          fill: '#3f4d67',
+          fill: "#3f4d67",
         },
       },
       // You can customize more options here
-    })
+    });
     // Listen for window resize
-    window.addEventListener('resize', resizeHandler)
+    window.addEventListener("resize", resizeHandler);
   }
-})
+});
 
 onBeforeUnmount(() => {
-  window.removeEventListener('resize', resizeHandler)
-  mapInstance?.destroy()
-})
+  window.removeEventListener("resize", resizeHandler);
+  mapInstance?.destroy();
+});
 </script>
 
 <template>
diff --git a/src/views/pages/authentication/login/AuthLogin.vue b/src/views/pages/authentication/login/AuthLogin.vue
index 6029b84..6067a50 100644
--- a/src/views/pages/authentication/login/AuthLogin.vue
+++ b/src/views/pages/authentication/login/AuthLogin.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { ref, computed } from 'vue'
-import { useRouter } from 'vue-router'
+import { ref, computed } from "vue";
+import { useRouter } from "vue-router";
 
 // third party
 import {
@@ -10,56 +10,65 @@ import {
   BFormCheckbox,
   BButton,
   BInputGroup,
-} from 'bootstrap-vue-next'
+} from "bootstrap-vue-next";
 
-const router = useRouter()
-const status = ref(true)
+const router = useRouter();
+const status = ref(true);
 
 // State object
-const email = ref('info@codedthemes.com')
-const password = ref('admin123')
+const email = ref("info@codedthemes.com");
+const password = ref("admin123");
 
 // Email validation
 const emailError = computed(() => {
-  if (!email.value.trim()) return 'E-mail is required'
-  if (/\s/.test(email.value.trim())) return 'E-mail must not contain spaces'
-  if (!/.+@.+\..+/.test(email.value.trim())) return 'E-mail must be valid'
-  return ''
-})
+  if (!email.value.trim()) return "E-mail is required";
+  if (/\s/.test(email.value.trim())) return "E-mail must not contain spaces";
+  if (!/.+@.+\..+/.test(email.value.trim())) return "E-mail must be valid";
+  return "";
+});
 
 // Password validation
 const passwordError = computed(() => {
-  if (!password.value) return 'Password is required'
-  if (password.value.length > 10) return 'Password must be less than 10 characters'
-  if (password.value !== 'admin123') return 'Invalid password'
-  return ''
-})
-const showPassword = ref(false)
+  if (!password.value) return "Password is required";
+  if (password.value.length > 10)
+    return "Password must be less than 10 characters";
+  if (password.value !== "admin123") return "Invalid password";
+  return "";
+});
+const showPassword = ref(false);
 
 const togglePassword = () => {
-  showPassword.value = !showPassword.value
-}
+  showPassword.value = !showPassword.value;
+};
 
 // Computed validation states
-const isEmailValid = computed(() => !emailError.value)
-const isPasswordValid = computed(() => !passwordError.value)
+const isEmailValid = computed(() => !emailError.value);
+const isPasswordValid = computed(() => !passwordError.value);
 
 // Handle form submission
 const handleSubmit = () => {
   if (isEmailValid.value && isPasswordValid.value) {
-    router.push('/dashboard/default')
+    router.push("/dashboard/default");
   }
-}
+};
 </script>
 
 <template>
   <!-- [ Login Form ] start -->
   <h4 class="text-center f-w-500 mt-4 mb-3">Login</h4>
   <BForm @submit.prevent="handleSubmit">
-    <BFormGroup :state="isEmailValid" :invalid-feedback="emailError" class="mb-3">
+    <BFormGroup
+      :state="isEmailValid"
+      :invalid-feedback="emailError"
+      class="mb-3"
+    >
       <BFormInput type="email" v-model="email" placeholder="Email Address" />
     </BFormGroup>
-    <BFormGroup :state="isPasswordValid" :invalid-feedback="passwordError" class="mb-3">
+    <BFormGroup
+      :state="isPasswordValid"
+      :invalid-feedback="passwordError"
+      class="mb-3"
+    >
       <BInputGroup size="sm">
         <BFormInput
           v-model="password"
@@ -72,7 +81,12 @@ const handleSubmit = () => {
       </BInputGroup>
     </BFormGroup>
     <div class="d-flex mt-1 justify-content-between align-items-center">
-      <BFormCheckbox id="customCheck1" v-model="status" name="customCheck1" class="text-muted mb-0">
+      <BFormCheckbox
+        id="customCheck1"
+        v-model="status"
+        name="customCheck1"
+        class="text-muted mb-0"
+      >
         Remember me?
       </BFormCheckbox>
       <router-link class="text-secondary" to="">Forgot Password?</router-link>
@@ -87,9 +101,13 @@ const handleSubmit = () => {
       >
     </div>
   </BForm>
-  <div class="d-flex justify-content-between align-items-center mt-4 gap-2 text-nowrap">
+  <div
+    class="d-flex justify-content-between align-items-center mt-4 gap-2 text-nowrap"
+  >
     <h6 class="f-w-500 mb-0">Don't have an Account?</h6>
-    <router-link to="/register" class="link-primary">Create Account</router-link>
+    <router-link to="/register" class="link-primary"
+      >Create Account</router-link
+    >
   </div>
   <!-- [ Login Form ] end -->
 </template>
diff --git a/src/views/pages/authentication/login/LoginPage.vue b/src/views/pages/authentication/login/LoginPage.vue
index dbfd6b0..8a8934a 100644
--- a/src/views/pages/authentication/login/LoginPage.vue
+++ b/src/views/pages/authentication/login/LoginPage.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 // components
-import AuthLayout from '@/components/shared/AuthLayout.vue'
-import AuthLogin from './AuthLogin.vue'
+import AuthLayout from "@/components/shared/AuthLayout.vue";
+import AuthLogin from "./AuthLogin.vue";
 </script>
 
 <template>
diff --git a/src/views/pages/authentication/register/AuthRegister.vue b/src/views/pages/authentication/register/AuthRegister.vue
index e281608..dff85da 100644
--- a/src/views/pages/authentication/register/AuthRegister.vue
+++ b/src/views/pages/authentication/register/AuthRegister.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { ref, computed } from 'vue'
-import { useRouter } from 'vue-router'
+import { ref, computed } from "vue";
+import { useRouter } from "vue-router";
 
 // third party
 import {
@@ -11,52 +11,61 @@ import {
   BButton,
   BFormGroup,
   BForm,
-} from 'bootstrap-vue-next'
+} from "bootstrap-vue-next";
 
-const router = useRouter()
+const router = useRouter();
 
 // Form fields
-const firstName = ref('')
-const lastName = ref('')
-const email = ref('')
-const password = ref('')
-const confirmPassword = ref('')
-const termsAccepted = ref(false)
+const firstName = ref("");
+const lastName = ref("");
+const email = ref("");
+const password = ref("");
+const confirmPassword = ref("");
+const termsAccepted = ref(false);
 
 // Validation rules
 const isRequired = (value: string) =>
-  value.trim().length > 0 ? undefined : 'This field is required'
+  value.trim().length > 0 ? undefined : "This field is required";
 const isEmail = (value: string) => {
-  const trimmedEmail = value.trim()
-  if (!trimmedEmail) return 'E-mail is required'
-  if (/\s/.test(trimmedEmail)) return 'E-mail must not contain spaces'
-  if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(trimmedEmail)) return 'Enter a valid email'
-  return undefined
-}
+  const trimmedEmail = value.trim();
+  if (!trimmedEmail) return "E-mail is required";
+  if (/\s/.test(trimmedEmail)) return "E-mail must not contain spaces";
+  if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(trimmedEmail))
+    return "Enter a valid email";
+  return undefined;
+};
 const minLength = (value: string, length: number) =>
-  value.length >= length ? undefined : `Must be at least ${length} characters`
+  value.length >= length ? undefined : `Must be at least ${length} characters`;
 const passwordsMatch = computed(() =>
-  password.value === confirmPassword.value ? undefined : 'Passwords do not match',
-)
+  password.value === confirmPassword.value
+    ? undefined
+    : "Passwords do not match",
+);
 const termsValidation = computed(() =>
-  termsAccepted.value ? undefined : 'You must accept the Terms & Conditions',
-)
+  termsAccepted.value ? undefined : "You must accept the Terms & Conditions",
+);
 
 // Validation errors (must return string | undefined)
-const firstNameError = computed(() => isRequired(firstName.value))
-const lastNameError = computed(() => isRequired(lastName.value))
-const emailError = computed(() => isEmail(email.value))
-const passwordError = computed(() => minLength(password.value, 10))
-const confirmPasswordError = computed(() => passwordsMatch.value)
+const firstNameError = computed(() => isRequired(firstName.value));
+const lastNameError = computed(() => isRequired(lastName.value));
+const emailError = computed(() => isEmail(email.value));
+const passwordError = computed(() => minLength(password.value, 10));
+const confirmPasswordError = computed(() => passwordsMatch.value);
 
 // Bootstrap validation states (null = untouched, true = valid, false = invalid)
-const firstNameState = computed(() => (firstName.value ? !firstNameError.value : null))
-const lastNameState = computed(() => (lastName.value ? !lastNameError.value : null))
-const emailState = computed(() => (email.value ? !emailError.value : null))
-const passwordState = computed(() => (password.value ? !passwordError.value : null))
+const firstNameState = computed(() =>
+  firstName.value ? !firstNameError.value : null,
+);
+const lastNameState = computed(() =>
+  lastName.value ? !lastNameError.value : null,
+);
+const emailState = computed(() => (email.value ? !emailError.value : null));
+const passwordState = computed(() =>
+  password.value ? !passwordError.value : null,
+);
 const confirmPasswordState = computed(() =>
   confirmPassword.value ? !confirmPasswordError.value : null,
-)
+);
 
 // Check if form is valid
 const isFormValid = computed(
@@ -67,15 +76,15 @@ const isFormValid = computed(
     !passwordError.value &&
     !confirmPasswordError.value &&
     termsAccepted.value,
-)
+);
 
 // Form submission
 const handleSubmit = () => {
   if (isFormValid.value) {
-    alert('Signup successful!')
-    router.push('/dashboard/default')
+    alert("Signup successful!");
+    router.push("/dashboard/default");
   }
-}
+};
 </script>
 
 <template>
@@ -90,7 +99,11 @@ const handleSubmit = () => {
           :state="firstNameState"
           :invalid-feedback="firstNameError ?? ''"
         >
-          <BFormInput id="first-name" v-model="firstName" placeholder="First Name" />
+          <BFormInput
+            id="first-name"
+            v-model="firstName"
+            placeholder="First Name"
+          />
         </BFormGroup>
       </BCol>
       <BCol sm="6">
@@ -100,7 +113,11 @@ const handleSubmit = () => {
           :state="lastNameState"
           :invalid-feedback="lastNameError ?? ''"
         >
-          <BFormInput id="last-name" v-model="lastName" placeholder="Last Name" />
+          <BFormInput
+            id="last-name"
+            v-model="lastName"
+            placeholder="Last Name"
+          />
         </BFormGroup>
       </BCol>
     </BRow>
@@ -110,7 +127,12 @@ const handleSubmit = () => {
       :state="emailState"
       :invalid-feedback="emailError ?? ''"
     >
-      <BFormInput id="email" type="email" v-model="email" placeholder="Email Address" />
+      <BFormInput
+        id="email"
+        type="email"
+        v-model="email"
+        placeholder="Email Address"
+      />
     </BFormGroup>
     <BFormGroup
       class="mb-3"
@@ -118,7 +140,12 @@ const handleSubmit = () => {
       :state="passwordState"
       :invalid-feedback="passwordError ?? ''"
     >
-      <BFormInput id="password" type="password" v-model="password" placeholder="Password" />
+      <BFormInput
+        id="password"
+        type="password"
+        v-model="password"
+        placeholder="Password"
+      />
     </BFormGroup>
     <BFormGroup
       class="mb-3"
@@ -134,18 +161,31 @@ const handleSubmit = () => {
       />
     </BFormGroup>
     <BFormGroup>
-      <BFormCheckbox id="terms" v-model="termsAccepted" class="text-muted mb-0 mt-1">
+      <BFormCheckbox
+        id="terms"
+        v-model="termsAccepted"
+        class="text-muted mb-0 mt-1"
+      >
         I agree to the Terms & Conditions
       </BFormCheckbox>
-      <small v-if="!termsAccepted" class="text-danger">{{ termsValidation }}</small>
+      <small v-if="!termsAccepted" class="text-danger">{{
+        termsValidation
+      }}</small>
     </BFormGroup>
     <div class="text-center mt-4">
-      <BButton variant="primary" type="submit" class="shadow px-sm-4" :disabled="!isFormValid">
+      <BButton
+        variant="primary"
+        type="submit"
+        class="shadow px-sm-4"
+        :disabled="!isFormValid"
+      >
         Sign up
       </BButton>
     </div>
   </BForm>
-  <div class="d-flex justify-content-between align-items-end mt-4 gap-2 text-nowrap">
+  <div
+    class="d-flex justify-content-between align-items-end mt-4 gap-2 text-nowrap"
+  >
     <h6 class="f-w-500 mb-0">Already have an Account?</h6>
     <router-link to="/login" class="link-primary">Login</router-link>
   </div>
diff --git a/src/views/pages/authentication/register/RegisterPage.vue b/src/views/pages/authentication/register/RegisterPage.vue
index 748e7eb..999e357 100644
--- a/src/views/pages/authentication/register/RegisterPage.vue
+++ b/src/views/pages/authentication/register/RegisterPage.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 // components
-import AuthLayout from '@/components/shared/AuthLayout.vue'
-import AuthRegister from './AuthRegister.vue'
+import AuthLayout from "@/components/shared/AuthLayout.vue";
+import AuthRegister from "./AuthRegister.vue";
 </script>
 
 <template>
diff --git a/src/views/ui-elements/UiColor.vue b/src/views/ui-elements/UiColor.vue
index 3cd4c89..5b92a88 100644
--- a/src/views/ui-elements/UiColor.vue
+++ b/src/views/ui-elements/UiColor.vue
@@ -1,40 +1,40 @@
 <script setup lang="ts">
-import { ref, shallowRef } from 'vue'
+import { ref, shallowRef } from "vue";
 
 // third party
-import { BRow, BCol } from 'bootstrap-vue-next'
-import useClipboard from 'vue-clipboard3'
+import { BRow, BCol } from "bootstrap-vue-next";
+import useClipboard from "vue-clipboard3";
 
 // common components
-import BaseBreadcrumb from '@/components/shared/BaseBreadcrumb.vue'
-import CardHeader from '@/components/shared/CardHeader.vue'
-import ComponentContent from '@/components/shared/ComponentContent.vue'
+import BaseBreadcrumb from "@/components/shared/BaseBreadcrumb.vue";
+import CardHeader from "@/components/shared/CardHeader.vue";
+import ComponentContent from "@/components/shared/ComponentContent.vue";
 
-const page = ref({ title: 'Color' })
-const breadcrumbs = shallowRef([{ text: 'Basic UI' }, { text: 'Color' }])
+const page = ref({ title: "Color" });
+const breadcrumbs = shallowRef([{ text: "Basic UI" }, { text: "Color" }]);
 
-const shades = [100, 200, 300, 400, 500, 600, 700, 800, 900]
+const shades = [100, 200, 300, 400, 500, 600, 700, 800, 900];
 
-const { toClipboard } = useClipboard() // Initialize vue-clipboard3
+const { toClipboard } = useClipboard(); // Initialize vue-clipboard3
 
 async function handleCopy(text: string, event: Event) {
   try {
-    await toClipboard(text)
-    showBadge(event.target as HTMLElement, 'Copied', 'bg-success')
+    await toClipboard(text);
+    showBadge(event.target as HTMLElement, "Copied", "bg-success");
   } catch {
-    showBadge(event.target as HTMLElement, 'Error', 'bg-danger')
+    showBadge(event.target as HTMLElement, "Error", "bg-danger");
   }
 }
 
 function showBadge(element: HTMLElement, message: string, badgeClass: string) {
-  const iconBadge = document.createElement('span')
-  iconBadge.setAttribute('class', `ic-badge badge ${badgeClass} float-end`)
-  iconBadge.innerHTML = message
-  element.append(iconBadge)
+  const iconBadge = document.createElement("span");
+  iconBadge.setAttribute("class", `ic-badge badge ${badgeClass} float-end`);
+  iconBadge.innerHTML = message;
+  element.append(iconBadge);
 
   setTimeout(() => {
-    iconBadge.remove()
-  }, 3000)
+    iconBadge.remove();
+  }, 3000);
 }
 </script>
 
diff --git a/src/views/ui-elements/UiTypography.vue b/src/views/ui-elements/UiTypography.vue
index ced5121..e916df2 100644
--- a/src/views/ui-elements/UiTypography.vue
+++ b/src/views/ui-elements/UiTypography.vue
@@ -1,16 +1,16 @@
 <script setup lang="ts">
-import { ref, shallowRef } from 'vue'
+import { ref, shallowRef } from "vue";
 
 // third party
-import { BRow, BCol } from 'bootstrap-vue-next'
+import { BRow, BCol } from "bootstrap-vue-next";
 
 // common components
-import BaseBreadcrumb from '@/components/shared/BaseBreadcrumb.vue'
-import ComponentContent from '@/components/shared/ComponentContent.vue'
-import CardHeader from '@/components/shared/CardHeader.vue'
+import BaseBreadcrumb from "@/components/shared/BaseBreadcrumb.vue";
+import ComponentContent from "@/components/shared/ComponentContent.vue";
+import CardHeader from "@/components/shared/CardHeader.vue";
 
-const page = ref({ title: 'Typography' })
-const breadcrumbs = shallowRef([{ text: 'Basic UI' }, { text: 'Typography' }])
+const page = ref({ title: "Typography" });
+const breadcrumbs = shallowRef([{ text: "Basic UI" }, { text: "Typography" }]);
 </script>
 
 <template>
@@ -52,7 +52,10 @@ const breadcrumbs = shallowRef([{ text: 'Basic UI' }, { text: 'Typography' }])
         <br />
         <del>This line of text is meant to be treated as deleted text.</del>
         <br />
-        <ins>This line of text is meant to be treated as an addition to the document.</ins>
+        <ins
+          >This line of text is meant to be treated as an addition to the
+          document.</ins
+        >
         <br />
         <strong>rendered as bold text</strong>
         <br />
@@ -61,17 +64,27 @@ const breadcrumbs = shallowRef([{ text: 'Basic UI' }, { text: 'Typography' }])
     </BCol>
     <BCol md="6">
       <CardHeader title="Contextual Text Colors">
-        <p class="text-muted mb-1">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
-        <p class="text-primary mb-1">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
+        <p class="text-muted mb-1">
+          Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
+        </p>
+        <p class="text-primary mb-1">
+          Nullam id dolor id nibh ultricies vehicula ut id elit.
+        </p>
         <p class="text-success mb-1">
           Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
         </p>
         <p class="text-info mb-1">
           Maecenas sed diam eget risus varius blandit sit amet non magna.
         </p>
-        <p class="text-warning mb-1">Etiam porta sem malesuada magna mollis euismod.</p>
-        <p class="text-danger mb-1">Donec ullamcorper nulla non metus auctor fringilla.</p>
-        <p class="text-dark mb-1">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
+        <p class="text-warning mb-1">
+          Etiam porta sem malesuada magna mollis euismod.
+        </p>
+        <p class="text-danger mb-1">
+          Donec ullamcorper nulla non metus auctor fringilla.
+        </p>
+        <p class="text-dark mb-1">
+          Nullam id dolor id nibh ultricies vehicula ut id elit.
+        </p>
       </CardHeader>
     </BCol>
     <BCol md="6" lg="4">
@@ -145,18 +158,21 @@ const breadcrumbs = shallowRef([{ text: 'Basic UI' }, { text: 'Typography' }])
         <p class="text-muted mb-1">Your awesome text goes here.</p>
         <blockquote class="blockquote">
           <p class="mb-2">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
+            posuere erat a ante.
           </p>
           <footer class="blockquote-footer">
             Someone famous in <cite title="Source Title">Source Title</cite>
           </footer>
         </blockquote>
         <p class="text-muted m-b-15 m-t-20">
-          Add <code>.text-end</code> for a blockquote with right-aligned content.
+          Add <code>.text-end</code> for a blockquote with right-aligned
+          content.
         </p>
         <blockquote class="blockquote text-end">
           <p class="mb-2">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
+            posuere erat a ante.
           </p>
           <footer class="blockquote-footer">
             Someone famous in <cite title="Source Title">Source Title</cite>
@@ -168,21 +184,28 @@ const breadcrumbs = shallowRef([{ text: 'Basic UI' }, { text: 'Typography' }])
       <CardHeader title="Horizontal Description">
         <dl class="dl-horizontal row">
           <dt class="col-sm-3">Description lists</dt>
-          <dd class="col-sm-9">A description list is perfect for defining terms.</dd>
+          <dd class="col-sm-9">
+            A description list is perfect for defining terms.
+          </dd>
 
           <dt class="col-sm-3">Euismod</dt>
           <dd class="col-sm-9">
-            Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
+            Vestibulum id ligula porta felis euismod semper eget lacinia odio
+            sem nec elit.
+          </dd>
+          <dd class="col-sm-9">
+            Donec id elit non mi porta gravida at eget metus.
           </dd>
-          <dd class="col-sm-9">Donec id elit non mi porta gravida at eget metus.</dd>
 
           <dt class="col-sm-3">Malesuada porta</dt>
-          <dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>
+          <dd class="col-sm-9">
+            Etiam porta sem malesuada magna mollis euismod.
+          </dd>
 
           <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
           <dd class="col-sm-9">
-            Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum
-            massa justo sit amet risus.
+            Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum
+            nibh, ut fermentum massa justo sit amet risus.
           </dd>
         </dl>
       </CardHeader>