diff --git a/.eslintignore b/.eslintignore
deleted file mode 100644
index dc70b364..00000000
--- a/.eslintignore
+++ /dev/null
@@ -1,4 +0,0 @@
-node_modules/*
-/dist/**
-.eslintrc.js
-vite.config.mjs
diff --git a/.eslintrc.js b/.eslintrc.js
deleted file mode 100644
index fc9e572a..00000000
--- a/.eslintrc.js
+++ /dev/null
@@ -1,7 +0,0 @@
-module.exports = {
-  extends: ["plugin:vue/vue3-essential", "eslint:recommended"],
-  rules: {
-    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
-    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
-  },
-};
diff --git a/LICENSE b/LICENSE
index eee6fcc1..433069ca 100644
--- a/LICENSE
+++ b/LICENSE
@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2024 creativeLabs Łukasz Holeczek.
+Copyright (c) 2025 creativeLabs Łukasz Holeczek.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
diff --git a/README.md b/README.md
index 0307d814..5cc0eda5 100644
--- a/README.md
+++ b/README.md
@@ -47,6 +47,7 @@ CoreUI is meant to be the UX game changer. Pure & transparent code is devoid of
 
 * 💪  [CoreUI PRO Angular Admin Template](https://coreui.io/product/angular-dashboard-template/)
 * 💪  [CoreUI PRO Bootstrap Admin Template](https://coreui.io/product/bootstrap-dashboard-template/)
+* 💪  [CoreUI PRO Next.js Admin Template](https://coreui.io/product/next-js-dashboard-template/)
 * 💪  [CoreUI PRO React Admin Template](https://coreui.io/product/react-dashboard-template/)
 * 💪  [CoreUI PRO Vue Admin Template](https://coreui.io/product/vue-dashboard-template/)
 
@@ -56,9 +57,9 @@ CoreUI is meant to be the UX game changer. Pure & transparent code is devoid of
 | --- | --- |
 | [![CoreUI PRO Vue Admin Template](https://coreui.io/images/templates/coreui_pro_default_light_dark.webp)](https://coreui.io/product/vue-dashboard-template/?theme=default) | [![CoreUI PRO Vue Admin Template](https://coreui.io/images/templates/coreui_pro_light_light_dark.webp)](https://coreui.io/product/vue-dashboard-template/?theme=light)|
 
-| Default Theme v3 | Light Theme v3 |
+| Modern Theme | Bright Theme |
 | --- | --- |
-| [![CoreUI PRO Vue Admin Template](https://coreui.io/images/templates/coreui_pro_default_v3_light_dark.webp)](https://coreui.io/product/vue-dashboard-template/?theme=default-v3) | [![CoreUI PRO Vue Admin Template](https://coreui.io/images/templates/coreui_pro_light_v3_light_dark.webp)](https://coreui.io/product/vue-dashboard-template/?theme=light)|
+| [![CoreUI PRO Vue Admin Template](https://coreui.io/images/templates/coreui_pro_default_v3_light_dark.webp)](https://coreui.io/product/vue-dashboard-template/?theme=modern) | [![CoreUI PRO Vue Admin Template](https://coreui.io/images/templates/coreui_pro_light_v3_light_dark.webp)](https://coreui.io/product/vue-dashboard-template/?theme=bright)|
 
 ## Quick Start
 
@@ -95,7 +96,7 @@ Navigate to [http://localhost:3000](http://localhost:3000). The app will automat
 
 #### Build
 
-Run `build` to build the project. The build artifacts will be stored in the `build/` directory.
+Run `build` to build the project. The build artifacts will be stored in the `dist/` directory.
 
 ```bash
 # build for production with minification
@@ -122,7 +123,7 @@ coreui-free-vue-admin-template
 │   ├── layouts/     # layout containers
 │   ├── scss/        # scss styles
 │   ├── router       # routes config
-│   ├── store        # template state example 
+│   ├── stores/      # template state example 
 │   ├── views/       # application views
 │   ├── _nav.js      # sidebar navigation config
 │   ├── App.vue
@@ -130,7 +131,7 @@ coreui-free-vue-admin-template
 │   └── main.js
 ├── index.html   # html template
 ├── package.json
-└── vite.config.js
+└── vite.config.mjs
 ```
 
 ## Documentation
@@ -173,6 +174,6 @@ CoreUI is an MIT-licensed open source project and is completely free to use. How
 
 ## Copyright and License
 
-copyright 2024 creativeLabs Łukasz Holeczek.   
+copyright 2025 creativeLabs Łukasz Holeczek.   
 
 Code released under [the MIT license](https://github.com/coreui/coreui-free-react-admin-template/blob/main/LICENSE).
diff --git a/eslint.config.mjs b/eslint.config.mjs
new file mode 100644
index 00000000..5bc1dd17
--- /dev/null
+++ b/eslint.config.mjs
@@ -0,0 +1,23 @@
+import eslintPluginVue from 'eslint-plugin-vue'
+import globals from 'globals'
+
+export default [
+  { ignores: ['dist/', 'eslint.config.mjs'] },
+  ...eslintPluginVue.configs['flat/essential'],
+  {
+    files: ['src/**/*.{js,vue}'],
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+      },
+      ecmaVersion: 'latest',
+      sourceType: 'module',
+    },
+    rules: {
+      'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+      'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+      'vue/multi-word-component-names': 'off',
+    },
+  },
+]
diff --git a/index.html b/index.html
index 1c4aae12..2d8d8ef1 100644
--- a/index.html
+++ b/index.html
@@ -1,9 +1,9 @@
 <!DOCTYPE html>
 <!--
 * CoreUI Free Vue.js Admin Template
-* @version v5.0.0
+* @version v5.3.0
 * @link https://coreui.io/product/free-vue-admin-template/
-* Copyright (c) 2024 creativeLabs Łukasz Holeczek
+* Copyright (c) 2025 creativeLabs Łukasz Holeczek
 * Licensed under MIT (https://github.com/coreui/coreui-free-vue-admin-template/blob/main/LICENSE)
 -->
 <html>
diff --git a/package.json b/package.json
index 2fe17aea..8870c2b7 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coreui/coreui-free-vue-admin-template",
-  "version": "5.0.0",
+  "version": "5.3.0",
   "description": "CoreUI Free Vue Admin Template",
   "bugs": {
     "url": "https://github.com/coreui/coreui-free-vue-admin-template/issues"
@@ -14,31 +14,32 @@
   "scripts": {
     "dev": "vite --force",
     "build": "vite build",
-    "lint": "eslint \"src/**/*.{js,vue}\"",
+    "lint": "eslint",
     "preview": "vite preview"
   },
   "dependencies": {
-    "@coreui/chartjs": "^4.0.0",
-    "@coreui/coreui": "^5.0.0",
+    "@coreui/chartjs": "^4.1.0",
+    "@coreui/coreui": "^5.3.1",
     "@coreui/icons": "^3.0.1",
-    "@coreui/icons-vue": "2.0.0",
+    "@coreui/icons-vue": "2.2.0",
     "@coreui/utils": "^2.0.2",
-    "@coreui/vue": "^5.0.0",
+    "@coreui/vue": "^5.4.1",
     "@coreui/vue-chartjs": "^3.0.0",
     "@popperjs/core": "^2.11.8",
-    "chart.js": "^4.4.2",
-    "simplebar-vue": "^2.3.3",
-    "vue": "^3.4.21",
-    "vue-router": "^4.3.0",
-    "vuex": "^4.1.0"
+    "chart.js": "^4.4.7",
+    "pinia": "^3.0.1",
+    "simplebar-vue": "^2.4.0",
+    "vue": "^3.5.13",
+    "vue-router": "^4.5.0"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^5.0.4",
-    "autoprefixer": "^10.4.19",
-    "eslint": "^8.57.0",
-    "eslint-plugin-vue": "^9.24.0",
-    "postcss": "^8.4.38",
-    "sass": "^1.72.0",
-    "vite": "^5.2.6"
+    "@vitejs/plugin-vue": "^5.2.1",
+    "autoprefixer": "^10.4.20",
+    "eslint": "^9.20.1",
+    "eslint-plugin-vue": "^9.32.0",
+    "globals": "^15.15.0",
+    "postcss": "^8.5.2",
+    "sass": "^1.85.0",
+    "vite": "^6.1.0"
   }
 }
diff --git a/src/App.vue b/src/App.vue
index 177546e0..a095fda4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,41 +1,42 @@
-<template>
-  <router-view />
-</template>
-<script>
+<script setup>
 import { onBeforeMount } from 'vue'
-import { useStore } from 'vuex'
 import { useColorModes } from '@coreui/vue'
 
-export default {
-  setup() {
-    const { isColorModeSet, setColorMode } = useColorModes(
-      'coreui-free-vue-admin-template-theme',
-    )
-    const store = useStore()
-
-    onBeforeMount(() => {
-      const urlParams = new URLSearchParams(window.location.href.split('?')[1])
-      const theme =
-        urlParams.get('theme') &&
-        urlParams.get('theme').match(/^[A-Za-z0-9\s]+/)[0]
-      if (theme) {
-        setColorMode(theme)
-        return
-      }
-
-      if (isColorModeSet()) {
-        return
-      }
-
-      setColorMode(store.state.theme)
-    })
-  },
-}
+import { useThemeStore } from '@/stores/theme.js'
+
+const { isColorModeSet, setColorMode } = useColorModes(
+  'coreui-free-vue-admin-template-theme',
+)
+const currentTheme = useThemeStore()
+
+onBeforeMount(() => {
+  const urlParams = new URLSearchParams(window.location.href.split('?')[1])
+  let theme = urlParams.get('theme')
+
+  if (theme !== null && theme.match(/^[A-Za-z0-9\s]+/)) {
+    theme = theme.match(/^[A-Za-z0-9\s]+/)[0]
+  }
+
+  if (theme) {
+    setColorMode(theme)
+    return
+  }
+
+  if (isColorModeSet()) {
+    return
+  }
+
+  setColorMode(currentTheme.theme)
+})
 </script>
 
+<template>
+  <router-view />
+</template>
+
 <style lang="scss">
 // Import Main styles for this application
-@import 'styles/style';
+@use 'styles/style';
 // We use those styles to show code examples, you should remove them in your application.
-@import 'styles/examples';
+@use 'styles/examples';
 </style>
diff --git a/src/_nav.js b/src/_nav.js
index 6e7d0eb5..35d9d081 100644
--- a/src/_nav.js
+++ b/src/_nav.js
@@ -50,6 +50,16 @@ export default [
         name: 'Cards',
         to: '/base/cards',
       },
+      {
+        component: 'CNavItem',
+        name: 'Calendar',
+        href: 'https://coreui.io/vue/docs/components/calendar.html',
+        external: true,
+        badge: {
+          color: 'danger',
+          text: 'PRO',
+        },
+      },
       {
         component: 'CNavItem',
         name: 'Carousels',
@@ -90,6 +100,25 @@ export default [
         name: 'Progress',
         to: '/base/progress',
       },
+      {
+        component: 'CNavItem',
+        name: 'Smart Pagination',
+        href: 'https://coreui.io/vue/docs/components/smart-pagination.html',
+        badge: {
+          color: 'danger',
+          text: 'PRO',
+        },
+      },
+      {
+        component: 'CNavItem',
+        name: 'Smart Table',
+        external: true,
+        href: 'https://coreui.io/vue/docs/components/smart-table.html',
+        badge: {
+          color: 'danger',
+          text: 'PRO',
+        },
+      },
       {
         component: 'CNavItem',
         name: 'Spinners',
@@ -100,11 +129,26 @@ export default [
         name: 'Tables',
         to: '/base/tables',
       },
+      {
+        component: 'CNavItem',
+        name: 'Tabs',
+        to: '/base/tabs',
+      },
       {
         component: 'CNavItem',
         name: 'Tooltips',
         to: '/base/tooltips',
       },
+      {
+        component: 'CNavItem',
+        name: 'Virtual Scroller',
+        href: 'https://coreui.io/vue/docs/components/virtual-scroller.html',
+        external: true,
+        badge: {
+          color: 'danger',
+          text: 'PRO',
+        },
+      }
     ],
   },
   {
@@ -123,6 +167,16 @@ export default [
         name: 'Button Groups',
         to: '/buttons/button-groups',
       },
+      {
+        component: 'CNavItem',
+        name: 'Loading Button',
+        href: 'https://coreui.io/vue/docs/components/loading-button.html',
+        external: true,
+        badge: {
+          color: 'danger',
+          text: 'PRO',
+        },
+      },
       {
         component: 'CNavItem',
         name: 'Dropdowns',
@@ -156,6 +210,16 @@ export default [
         name: 'Range',
         to: '/forms/range',
       },
+      {
+        component: 'CNavItem',
+        name: 'Range Slider',
+        href: 'https://coreui.io/vue/docs/forms/range-slider.html',
+        external: true,
+        badge: {
+          color: 'danger',
+          text: 'PRO',
+        },
+      },
       {
         component: 'CNavItem',
         name: 'Input Group',
@@ -166,6 +230,45 @@ export default [
         name: 'Floating Labels',
         to: '/forms/floating-labels',
       },
+      {
+        component: 'CNavItem',
+        name: 'Date Picker',
+        href: 'https://coreui.io/vue/docs/forms/date-picker.html',
+        external: true,
+        badge: {
+          color: 'danger',
+          text: 'PRO',
+        },
+      },
+      {
+        component: 'CNavItem',
+        name: 'Date Range Picker',
+        href: 'https://coreui.io/vue/docs/forms/date-range-picker.html',
+        badge: {
+          color: 'danger',
+          text: 'PRO',
+        },
+      },
+      {
+        component: 'CNavItem',
+        name: 'Rating',
+        href: 'https://coreui.io/vue/docs/forms/rating.html',
+        external: true,
+        badge: {
+          color: 'danger',
+          text: 'PRO',
+        },
+      },
+      {
+        component: 'CNavItem',
+        name: 'Time Picker',
+        href: 'https://coreui.io/vue/docs/forms/time-picker.html',
+        external: true,
+        badge: {
+          color: 'danger',
+          text: 'PRO',
+        },
+      },
       {
         component: 'CNavItem',
         name: 'Layout',
@@ -282,21 +385,4 @@ export default [
       },
     ],
   },
-
-  // {
-  //   component: 'CNavItem',
-  //   name: 'Download CoreUI',
-  //   href: 'http://coreui.io/vue/',
-  //   icon: { name: 'cil-cloud-download', class: 'text-white' },
-  //   _class: 'bg-success text-white',
-  //   target: '_blank'
-  // },
-  // {
-  //   component: 'CNavItem',
-  //   name: 'Try CoreUI PRO',
-  //   href: 'http://coreui.io/pro/vue/',
-  //   icon: { name: 'cil-layers', class: 'text-white' },
-  //   _class: 'bg-danger text-white',
-  //   target: '_blank'
-  // }
 ]
diff --git a/src/assets/icons/index.js b/src/assets/icons/index.js
index 55c6ddf1..cc20da72 100644
--- a/src/assets/icons/index.js
+++ b/src/assets/icons/index.js
@@ -49,6 +49,7 @@ import {
   cilEnvelopeClosed,
   cilEnvelopeOpen,
   cilEuro,
+  cilExternalLink,
   cilGlobeAlt,
   cilGrid,
   cilFile,
@@ -107,6 +108,7 @@ export const iconsSet = Object.assign(
     cilEnvelopeClosed,
     cilEnvelopeOpen,
     cilEuro,
+    cilExternalLink,
     cilGlobeAlt,
     cilGrid,
     cilFile,
diff --git a/src/assets/images/components.webp b/src/assets/images/components.webp
new file mode 100644
index 00000000..dfdee46b
Binary files /dev/null and b/src/assets/images/components.webp differ
diff --git a/src/assets/images/icons.webp b/src/assets/images/icons.webp
new file mode 100644
index 00000000..b5ca82d0
Binary files /dev/null and b/src/assets/images/icons.webp differ
diff --git a/src/components/AppBreadcrumb.vue b/src/components/AppBreadcrumb.vue
index 49ddfc73..be83cad9 100644
--- a/src/components/AppBreadcrumb.vue
+++ b/src/components/AppBreadcrumb.vue
@@ -1,3 +1,28 @@
+<script setup>
+import { onMounted, ref } from 'vue'
+import router from '@/router'
+
+const breadcrumbs = ref()
+
+const getBreadcrumbs = () => {
+  return router.currentRoute.value.matched.map((route) => {
+    return {
+      active: route.path === router.currentRoute.value.fullPath,
+      name: route.name,
+      path: `${router.options.history.base}${route.path}`,
+    }
+  })
+}
+
+router.afterEach(() => {
+  breadcrumbs.value = getBreadcrumbs()
+})
+
+onMounted(() => {
+  breadcrumbs.value = getBreadcrumbs()
+})
+</script>
+
 <template>
   <CBreadcrumb class="my-0">
     <CBreadcrumbItem
@@ -9,38 +34,4 @@
       {{ item.name }}
     </CBreadcrumbItem>
   </CBreadcrumb>
-</template>
-
-<script>
-import { onMounted, ref } from 'vue'
-import router from '@/router'
-
-export default {
-  name: 'AppBreadcrumb',
-  setup() {
-    const breadcrumbs = ref()
-
-    const getBreadcrumbs = () => {
-      return router.currentRoute.value.matched.map((route) => {
-        return {
-          active: route.path === router.currentRoute.value.fullPath,
-          name: route.name,
-          path: `${router.options.history.base}${route.path}`,
-        }
-      })
-    }
-
-    router.afterEach(() => {
-      breadcrumbs.value = getBreadcrumbs()
-    })
-
-    onMounted(() => {
-      breadcrumbs.value = getBreadcrumbs()
-    })
-
-    return {
-      breadcrumbs,
-    }
-  },
-}
-</script>
+</template>
\ No newline at end of file
diff --git a/src/components/AppFooter.vue b/src/components/AppFooter.vue
index 391618c4..b62df395 100644
--- a/src/components/AppFooter.vue
+++ b/src/components/AppFooter.vue
@@ -12,9 +12,3 @@
     </div>
   </CFooter>
 </template>
-
-<script>
-export default {
-  name: 'AppFooter',
-}
-</script>
diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index 043a1ca7..fda96a89 100644
--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@@ -1,7 +1,30 @@
+<script setup>
+import { onMounted, ref } from 'vue'
+import { useColorModes } from '@coreui/vue'
+
+import AppBreadcrumb from '@/components/AppBreadcrumb.vue'
+import AppHeaderDropdownAccnt from '@/components/AppHeaderDropdownAccnt.vue'
+import { useSidebarStore } from '@/stores/sidebar.js'
+
+const headerClassNames = ref('mb-4 p-0')
+const { colorMode, setColorMode } = useColorModes('coreui-free-vue-admin-template-theme')
+const sidebar = useSidebarStore()
+
+onMounted(() => {
+  document.addEventListener('scroll', () => {
+    if (document.documentElement.scrollTop > 0) {
+      headerClassNames.value = 'mb-4 p-0 shadow-sm'
+    } else {
+      headerClassNames.value = 'mb-4 p-0'
+    }
+  })
+})
+</script>
+
 <template>
   <CHeader position="sticky" :class="headerClassNames">
     <CContainer class="border-bottom px-4" fluid>
-      <CHeaderToggler @click="$store.commit('toggleSidebar')" style="margin-inline-start: -14px">
+      <CHeaderToggler @click="sidebar.toggleVisible()" style="margin-inline-start: -14px">
         <CIcon icon="cil-menu" size="lg" />
       </CHeaderToggler>
       <CHeaderNav class="d-none d-md-flex">
@@ -83,37 +106,3 @@
     </CContainer>
   </CHeader>
 </template>
-
-<script>
-import { onMounted, ref } from 'vue'
-import { useColorModes } from '@coreui/vue'
-import AppBreadcrumb from './AppBreadcrumb'
-import AppHeaderDropdownAccnt from './AppHeaderDropdownAccnt'
-export default {
-  name: 'AppHeader',
-  components: {
-    AppBreadcrumb,
-    AppHeaderDropdownAccnt,
-  },
-  setup() {
-    const headerClassNames = ref('mb-4 p-0')
-    const { colorMode, setColorMode } = useColorModes('coreui-free-vue-admin-template-theme')
-
-    onMounted(() => {
-      document.addEventListener('scroll', () => {
-        if (document.documentElement.scrollTop > 0) {
-          headerClassNames.value = 'mb-4 p-0 shadow-sm'
-        } else {
-          headerClassNames.value = 'mb-4 p-0'
-        }
-      })
-    })
-
-    return {
-      headerClassNames,
-      colorMode,
-      setColorMode,
-    }
-  },
-}
-</script>
diff --git a/src/components/AppHeaderDropdownAccnt.vue b/src/components/AppHeaderDropdownAccnt.vue
index f6166fc7..d51d1fe0 100644
--- a/src/components/AppHeaderDropdownAccnt.vue
+++ b/src/components/AppHeaderDropdownAccnt.vue
@@ -1,3 +1,9 @@
+<script setup>
+import avatar from '@/assets/images/avatars/8.jpg'
+
+const itemsCount = 42
+</script>
+
 <template>
   <CDropdown placement="bottom-end" variant="nav-item">
     <CDropdownToggle class="py-0 pe-0" :caret="false">
@@ -32,12 +38,8 @@
       >
         Settings
       </CDropdownHeader>
-      <CDropdownItem>
-        <CIcon icon="cil-user" /> Profile
-      </CDropdownItem>
-      <CDropdownItem>
-        <CIcon icon="cil-settings" /> Settings
-      </CDropdownItem>
+      <CDropdownItem> <CIcon icon="cil-user" /> Profile </CDropdownItem>
+      <CDropdownItem> <CIcon icon="cil-settings" /> Settings </CDropdownItem>
       <CDropdownItem>
         <CIcon icon="cil-dollar" /> Payments
         <CBadge color="secondary" class="ms-auto">{{ itemsCount }}</CBadge>
@@ -47,25 +49,8 @@
         <CBadge color="primary" class="ms-auto">{{ itemsCount }}</CBadge>
       </CDropdownItem>
       <CDropdownDivider />
-      <CDropdownItem>
-        <CIcon icon="cil-shield-alt" /> Lock Account
-      </CDropdownItem>
-      <CDropdownItem>
-        <CIcon icon="cil-lock-locked" /> Logout
-      </CDropdownItem>
+      <CDropdownItem> <CIcon icon="cil-shield-alt" /> Lock Account </CDropdownItem>
+      <CDropdownItem> <CIcon icon="cil-lock-locked" /> Logout </CDropdownItem>
     </CDropdownMenu>
   </CDropdown>
 </template>
-
-<script>
-import avatar from '@/assets/images/avatars/8.jpg'
-export default {
-  name: 'AppHeaderDropdownAccnt',
-  setup() {
-    return {
-      avatar: avatar,
-      itemsCount: 42,
-    }
-  },
-}
-</script>
diff --git a/src/components/AppSidebar.vue b/src/components/AppSidebar.vue
index e4d53528..d3ab2f33 100644
--- a/src/components/AppSidebar.vue
+++ b/src/components/AppSidebar.vue
@@ -1,17 +1,22 @@
+<script setup>
+import { RouterLink } from 'vue-router'
+
+import { logo } from '@/assets/brand/logo'
+import { sygnet } from '@/assets/brand/sygnet'
+import { AppSidebarNav } from '@/components/AppSidebarNav.js'
+import { useSidebarStore } from '@/stores/sidebar.js'
+
+const sidebar = useSidebarStore()
+</script>
+
 <template>
   <CSidebar
     class="border-end"
     colorScheme="dark"
     position="fixed"
-    :unfoldable="sidebarUnfoldable"
-    :visible="sidebarVisible"
-    @visible-change="
-      (event) =>
-        $store.commit({
-          type: 'updateSidebarVisible',
-          value: event,
-        })
-    "
+    :unfoldable="sidebar.unfoldable"
+    :visible="sidebar.visible"
+    @visible-change="(value) => sidebar.toggleVisible(value)"
   >
     <CSidebarHeader class="border-bottom">
       <RouterLink custom to="/" v-slot="{ href, navigate }">
@@ -20,36 +25,11 @@
           <CIcon custom-class-name="sidebar-brand-narrow" :icon="sygnet" :height="32" />
         </CSidebarBrand>
       </RouterLink>
-      <CCloseButton class="d-lg-none" dark @click="$store.commit('toggleSidebar')" />
+      <CCloseButton class="d-lg-none" dark @click="sidebar.toggleVisible()" />
     </CSidebarHeader>
     <AppSidebarNav />
     <CSidebarFooter class="border-top d-none d-lg-flex">
-      <CSidebarToggler @click="$store.commit('toggleUnfoldable')" />
+      <CSidebarToggler @click="sidebar.toggleUnfoldable()" />
     </CSidebarFooter>
   </CSidebar>
 </template>
-
-<script>
-import { computed } from 'vue'
-import { RouterLink } from 'vue-router'
-import { useStore } from 'vuex'
-import { AppSidebarNav } from './AppSidebarNav'
-import { logo } from '@/assets/brand/logo'
-import { sygnet } from '@/assets/brand/sygnet'
-export default {
-  name: 'AppSidebar',
-  components: {
-    AppSidebarNav,
-    RouterLink,
-  },
-  setup() {
-    const store = useStore()
-    return {
-      logo,
-      sygnet,
-      sidebarUnfoldable: computed(() => store.state.sidebarUnfoldable),
-      sidebarVisible: computed(() => store.state.sidebarVisible),
-    }
-  },
-}
-</script>
diff --git a/src/components/AppSidebarNav.js b/src/components/AppSidebarNav.js
index 11092c7d..1006a9c3 100644
--- a/src/components/AppSidebarNav.js
+++ b/src/components/AppSidebarNav.js
@@ -1,6 +1,7 @@
 import { defineComponent, h, onMounted, ref, resolveComponent } from 'vue'
 import { RouterLink, useRoute } from 'vue-router'
 
+import { cilExternalLink } from '@coreui/icons'
 import { CBadge, CSidebarNav, CNavItem, CNavGroup, CNavTitle } from '@coreui/vue'
 import nav from '@/_nav.js'
 
@@ -78,6 +79,45 @@ const AppSidebarNav = defineComponent({
         )
       }
 
+      if (item.href) {
+        return h(
+          resolveComponent(item.component),
+          {
+            href: item.href,
+            target: '_blank',
+            rel: 'noopener noreferrer',
+          },
+          {
+            default: () => [
+              item.icon
+                ? h(resolveComponent('CIcon'), {
+                    customClassName: 'nav-icon',
+                    name: item.icon,
+                  })
+                : h('span', { class: 'nav-icon' }, h('span', { class: 'nav-icon-bullet' })),
+              item.name,
+              item.external && h(resolveComponent('CIcon'), {
+                class: 'ms-2',
+                name: 'cil-external-link',
+                size: 'sm'
+              }),
+              item.badge &&
+                h(
+                  CBadge,
+                  {
+                    class: 'ms-auto',
+                    color: item.badge.color,
+                    size: 'sm',
+                  },
+                  {
+                    default: () => item.badge.text,
+                  },
+                ),
+            ],
+          },
+        )
+      }
+
       return item.to
         ? h(
             RouterLink,
@@ -110,6 +150,7 @@ const AppSidebarNav = defineComponent({
                           {
                             class: 'ms-auto',
                             color: item.badge.color,
+                            size: 'sm',
                           },
                           {
                             default: () => item.badge.text,
@@ -143,4 +184,5 @@ const AppSidebarNav = defineComponent({
       )
   },
 })
+
 export { AppSidebarNav }
diff --git a/src/components/DocsComponents.vue b/src/components/DocsComponents.vue
new file mode 100644
index 00000000..7ebc2351
--- /dev/null
+++ b/src/components/DocsComponents.vue
@@ -0,0 +1,43 @@
+<script setup>
+const props = defineProps({
+  href: String,
+})
+
+import ComponentsImg from '@/assets/images/components.webp'
+</script>
+
+<template>
+  <div class="bg-primary bg-opacity-10 border border-2 border-primary rounded mb-4">
+    <div class="row d-flex align-items-center p-3 px-xl-4 flex-xl-nowrap">
+      <div class="col-xl-auto col-12 d-none d-xl-block p-0">
+        <img
+          class="img-fluid"
+          :src="ComponentsImg"
+          width="160px"
+          height="160px"
+          alt="CoreUI PRO hexagon"
+        />
+      </div>
+      <div class="col-md col-12 px-lg-4">
+        Our Admin Panel isn’t just a mix of third-party components. It’s
+        <strong>
+          the only open-source Vue dashboard built on a professional, enterprise-grade UI Components
+          Library
+        </strong>
+        . This component is part of this library, and we present only the basic usage of it here. To
+        explore extended examples, detailed API documentation, and customization options, refer to
+        our docs.
+      </div>
+      <div class="col-md-auto col-12 mt-3 mt-lg-0">
+        <a
+          class="btn btn-primary text-nowrap text-white"
+          :href="`https://coreui.io/vue/docs/${props.href}`"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Explore Documentation
+        </a>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/components/DocsExample.vue b/src/components/DocsExample.vue
index 5ec26d21..31d46bf0 100644
--- a/src/components/DocsExample.vue
+++ b/src/components/DocsExample.vue
@@ -1,3 +1,13 @@
+<script setup>
+const props = defineProps({
+  href: String,
+  tabContentClass: String,
+})
+
+const url = `https://coreui.io/vue/docs/${props.href}`
+const addClass = props.tabContentClass
+</script>
+
 <template>
   <div class="example">
     <CNav variant="underline-border">
@@ -21,22 +31,3 @@
     </CTabContent>
   </div>
 </template>
-
-<script>
-export default {
-  name: 'DocsExample',
-  props: {
-    href: String,
-    tabContentClass: String,
-  },
-  setup(props) {
-    const url = `https://coreui.io/vue/docs/${props.href}`
-    const addClass = props.tabContentClass
- 
-    return {
-      addClass,
-      url,
-    }
-  },
-}
-</script>
diff --git a/src/components/DocsIcons.vue b/src/components/DocsIcons.vue
new file mode 100644
index 00000000..ffe0e64d
--- /dev/null
+++ b/src/components/DocsIcons.vue
@@ -0,0 +1,29 @@
+<script setup>
+import IconsImg from '@/assets/images/icons.webp'
+</script>
+
+<template>
+  <div class="bg-warning bg-opacity-10 border border-2 border-warning rounded mb-4">
+    <div class="row d-flex align-items-center p-3 px-xl-4 flex-xl-nowrap">
+      <div class="col-xl-auto col-12 d-none d-xl-block p-0">
+        <img class="img-fluid" :src="IconsImg" width="160px" height="160px" alt="CoreUI Icons" />
+      </div>
+      <div class="col-md col-12 px-lg-4">
+        CoreUI Icons package is delivered with more than 1500 icons in multiple formats SVG, PNG,
+        and Webfonts. CoreUI Icons are beautifully crafted symbols for common actions and items. You
+        can use them in your digital products for web or mobile app. For more information please
+        visit our documentation.
+      </div>
+      <div class="col-md-auto col-12 mt-3 mt-lg-0">
+        <a
+          class="btn btn-warning text-nowrap text-white"
+          href="https://coreui.io/vue/docs/components/icon.html"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Explore Documentation
+        </a>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/layouts/DefaultLayout.vue b/src/layouts/DefaultLayout.vue
index 83d249ac..4779d05a 100644
--- a/src/layouts/DefaultLayout.vue
+++ b/src/layouts/DefaultLayout.vue
@@ -1,3 +1,10 @@
+<script setup>
+import { CContainer } from '@coreui/vue'
+import AppFooter from '@/components/AppFooter.vue'
+import AppHeader from '@/components/AppHeader.vue'
+import AppSidebar from '@/components/AppSidebar.vue'
+</script>
+
 <template>
   <div>
     <AppSidebar />
@@ -12,19 +19,3 @@
     </div>
   </div>
 </template>
-<script>
-import { CContainer } from '@coreui/vue'
-import AppFooter from '@/components/AppFooter.vue'
-import AppHeader from '@/components/AppHeader.vue'
-import AppSidebar from '@/components/AppSidebar.vue'
-
-export default {
-  name: 'DefaultLayout',
-  components: {
-    AppFooter,
-    AppHeader,
-    AppSidebar,
-    CContainer,
-  },
-}
-</script>
diff --git a/src/main.js b/src/main.js
index 5afc2d2d..64a416a6 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,19 +1,24 @@
 import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+
 import App from './App.vue'
 import router from './router'
-import store from './store'
 
 import CoreuiVue from '@coreui/vue'
 import CIcon from '@coreui/icons-vue'
 import { iconsSet as icons } from '@/assets/icons'
+import DocsComponents from '@/components/DocsComponents'
 import DocsExample from '@/components/DocsExample'
+import DocsIcons from '@/components/DocsIcons'
 
 const app = createApp(App)
-app.use(store)
+app.use(createPinia())
 app.use(router)
 app.use(CoreuiVue)
 app.provide('icons', icons)
 app.component('CIcon', CIcon)
+app.component('DocsComponents', DocsComponents)
 app.component('DocsExample', DocsExample)
+app.component('DocsIcons', DocsIcons)
 
 app.mount('#app')
diff --git a/src/router/index.js b/src/router/index.js
index f70246f6..342b69aa 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -111,6 +111,11 @@ const routes = [
             name: 'Tables',
             component: () => import('@/views/base/Tables.vue'),
           },
+          {
+            path: '/base/tabs',
+            name: 'Tabs',
+            component: () => import('@/views/base/Tabs.vue'),
+          },
           {
             path: '/base/tooltips',
             name: 'Tooltips',
@@ -130,7 +135,7 @@ const routes = [
         children: [
           {
             path: '/buttons/standard-buttons',
-            name: 'Buttons',
+            name: 'Button Component',
             component: () => import('@/views/buttons/Buttons.vue'),
           },
           {
@@ -303,7 +308,7 @@ const routes = [
 ]
 
 const router = createRouter({
-  history: createWebHashHistory(process.env.BASE_URL),
+  history: createWebHashHistory(import.meta.env.BASE_URL),
   routes,
   scrollBehavior() {
     // always scroll to top
diff --git a/src/store/index.js b/src/store/index.js
deleted file mode 100644
index 1ca85549..00000000
--- a/src/store/index.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import { createStore } from 'vuex'
-
-export default createStore({
-  state: {
-    sidebarVisible: '',
-    sidebarUnfoldable: false,
-    theme: 'light',
-  },
-  mutations: {
-    toggleSidebar(state) {
-      state.sidebarVisible = !state.sidebarVisible
-    },
-    toggleUnfoldable(state) {
-      state.sidebarUnfoldable = !state.sidebarUnfoldable
-    },
-    updateSidebarVisible(state, payload) {
-      state.sidebarVisible = payload.value
-    },
-  },
-  actions: {},
-  modules: {},
-})
diff --git a/src/stores/sidebar.js b/src/stores/sidebar.js
new file mode 100644
index 00000000..28c9a044
--- /dev/null
+++ b/src/stores/sidebar.js
@@ -0,0 +1,17 @@
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+
+export const useSidebarStore = defineStore('sidebar', () => {
+  const visible = ref(undefined)
+  const unfoldable = ref(false)
+
+  const toggleVisible = (value) => {
+    visible.value = value !== undefined ? value : !visible.value
+  }
+
+  const toggleUnfoldable = () => {
+    unfoldable.value = !unfoldable.value
+  }
+
+  return { visible, unfoldable, toggleVisible, toggleUnfoldable }
+})
diff --git a/src/stores/theme.js b/src/stores/theme.js
new file mode 100644
index 00000000..7b1a0fbc
--- /dev/null
+++ b/src/stores/theme.js
@@ -0,0 +1,12 @@
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+
+export const useThemeStore = defineStore('theme', () => {
+  const theme = ref('light')
+
+  const toggleTheme = (_theme) => {
+    theme.value = _theme
+  }
+
+  return { theme, toggleTheme }
+})
diff --git a/src/styles/_custom.scss b/src/styles/_custom.scss
deleted file mode 100644
index 15d367af..00000000
--- a/src/styles/_custom.scss
+++ /dev/null
@@ -1 +0,0 @@
-// Here you can add other styles
diff --git a/src/styles/_theme.scss b/src/styles/_theme.scss
deleted file mode 100644
index 49e1c79e..00000000
--- a/src/styles/_theme.scss
+++ /dev/null
@@ -1,64 +0,0 @@
-body {
-  background-color: var(--cui-tertiary-bg);
-}
-
-.wrapper {
-  width: 100%;
-  @include ltr-rtl("padding-left", var(--cui-sidebar-occupy-start, 0));
-  @include ltr-rtl("padding-right", var(--cui-sidebar-occupy-end, 0));
-  will-change: auto;
-  @include transition(padding .15s);
-}
-
-.header > .container-fluid,
-.sidebar-header {
-  min-height: calc(4rem + 1px); // stylelint-disable-line function-disallowed-list
-}
-
-.sidebar-brand-full {
-  margin-left: 3px;
-}
-
-.sidebar-header {
-  .nav-underline-border {
-    --cui-nav-underline-border-link-padding-x: 1rem;
-    --cui-nav-underline-border-gap: 0;
-  }
-
-  .nav-link {
-    display: flex;
-    align-items: center;
-    min-height: calc(4rem + 1px); // stylelint-disable-line function-disallowed-list
-  }
-}
-
-.sidebar-toggler {
-  @include ltr-rtl("margin-left", auto);
-}
-
-.sidebar-narrow,
-.sidebar-narrow-unfoldable:not(:hover) {
-  .sidebar-toggler {
-    @include ltr-rtl("margin-right", auto);
-  }
-}
-
-.header > .container-fluid + .container-fluid {
-  min-height: 3rem;
-}
-
-.footer {
-  min-height: calc(3rem + 1px); // stylelint-disable-line function-disallowed-list
-}
-
-@if $enable-dark-mode {
-  @include color-mode(dark) {
-    body {
-      background-color: var(--cui-dark-bg-subtle);
-    }
-
-    .footer {
-      --cui-footer-bg: var(--cui-body-bg);
-    }
-  }
-}
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
deleted file mode 100644
index b0f8a52a..00000000
--- a/src/styles/_variables.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-// Variable overrides
-//
-// If you want to customize your project please add your variables below.
-
-$enable-deprecation-messages: false !default;
diff --git a/src/styles/examples.scss b/src/styles/examples.scss
index 375fa9a5..dbfe258f 100644
--- a/src/styles/examples.scss
+++ b/src/styles/examples.scss
@@ -1,10 +1,7 @@
-/* stylelint-disable declaration-no-important, scss/selector-no-redundant-nesting-selector */
-
-$enable-deprecation-messages: false !default;
-
-@import "@coreui/coreui/scss/functions";
-@import "@coreui/coreui/scss/variables";
-@import "@coreui/coreui/scss/mixins";
+/* stylelint-disable scss/selector-no-redundant-nesting-selector */
+@use "@coreui/coreui/scss/variables" as *;
+@use "@coreui/coreui/scss/mixins/breakpoints" as *;
+@use "@coreui/coreui/scss/mixins/color-mode" as *;
 
 .example {
   &:not(:first-child) {
@@ -110,10 +107,8 @@ $enable-deprecation-messages: false !default;
   }
 }
 
-@if $enable-dark-mode {
-  @include color-mode(dark) {
-    .example .tab-content {
-      background-color: var(--#{$prefix}secondary-bg) !important;
-    }
+@include color-mode(dark) {
+  .example .tab-content {
+    background-color: var(--#{$prefix}secondary-bg);
   }
-}
\ No newline at end of file
+}
diff --git a/src/styles/style.scss b/src/styles/style.scss
index 6fbabff0..cf48cfdb 100644
--- a/src/styles/style.scss
+++ b/src/styles/style.scss
@@ -1,14 +1,67 @@
-// If you want to override variables do it here
-@import "variables";
+@use "@coreui/coreui/scss/coreui" as * with (
+  $enable-deprecation-messages: false
+);
+@use "@coreui/chartjs/scss/coreui-chartjs";
+@use "vendors/simplebar";
 
-// Import styles
-@import "@coreui/coreui/scss/coreui";
+body {
+  background-color: var(--cui-tertiary-bg);
+}
 
-// Vendors
-@import "vendors/simplebar";
+.wrapper {
+  width: 100%;
+  padding-inline: var(--cui-sidebar-occupy-start, 0) var(--cui-sidebar-occupy-end, 0);
+  will-change: auto;
+  @include transition(padding .15s);
+}
 
-// Custom styles for this theme
-@import "theme";
+.header > .container-fluid,
+.sidebar-header {
+  min-height: calc(4rem + 1px); // stylelint-disable-line function-disallowed-list
+}
 
-// If you want to add custom CSS you can put it here
-@import "custom";
+.sidebar-brand-full {
+  margin-left: 3px;
+}
+
+.sidebar-header {
+  .nav-underline-border {
+    --cui-nav-underline-border-link-padding-x: 1rem;
+    --cui-nav-underline-border-gap: 0;
+  }
+
+  .nav-link {
+    display: flex;
+    align-items: center;
+    min-height: calc(4rem + 1px); // stylelint-disable-line function-disallowed-list
+  }
+}
+
+.sidebar-toggler {
+  margin-inline-start: auto;
+}
+
+.sidebar-narrow,
+.sidebar-narrow-unfoldable:not(:hover) {
+  .sidebar-toggler {
+    margin-inline-end: auto;
+  }
+}
+
+.header > .container-fluid + .container-fluid {
+  min-height: 3rem;
+}
+
+.footer {
+  min-height: calc(3rem + 1px); // stylelint-disable-line function-disallowed-list
+}
+
+@include color-mode(dark) {
+  body {
+    background-color: var(--cui-dark-bg-subtle);
+  }
+
+  .footer {
+    --cui-footer-bg: var(--cui-body-bg);
+  }
+}
diff --git a/src/views/base/Accordion.vue b/src/views/base/Accordion.vue
index addf3053..98e5b31b 100644
--- a/src/views/base/Accordion.vue
+++ b/src/views/base/Accordion.vue
@@ -1,6 +1,7 @@
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="components/accordion.html" />
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Accordion</strong>
@@ -176,19 +177,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-import { ref } from 'vue'
-export default {
-  name: 'Accordion',
-  setup() {
-    const activeKey = ref(1)
-    const flushActiveKey = ref(1)
-
-    return {
-      activeKey,
-      flushActiveKey,
-    }
-  },
-}
-</script>
diff --git a/src/views/base/Breadcrumbs.vue b/src/views/base/Breadcrumbs.vue
index 1052fca3..c7e214a5 100644
--- a/src/views/base/Breadcrumbs.vue
+++ b/src/views/base/Breadcrumbs.vue
@@ -1,16 +1,16 @@
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="components/breadcrumb.html" />
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Breadcrumb</strong>
         </CCardHeader>
         <CCardBody>
           <p class="text-body-secondary small">
-            The breadcrumb navigation provides links back to each previous page
-            the user navigated through and shows the current location in a
-            website or an application. You don’t have to add separators, because
-            they automatically added in CSS through
+            The breadcrumb navigation provides links back to each previous page the user navigated
+            through and shows the current location in a website or an application. You don’t have to
+            add separators, because they automatically added in CSS through
             <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::before">
               <code>::before</code>
             </a>
@@ -54,9 +54,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-export default {
-  name: 'Breadcrumbs',
-}
-</script>
diff --git a/src/views/base/Cards.vue b/src/views/base/Cards.vue
index cb071768..524cb0f2 100644
--- a/src/views/base/Cards.vue
+++ b/src/views/base/Cards.vue
@@ -1,6 +1,12 @@
+
+<script setup>
+import VueImg from '@/assets/images/vue.jpg'
+</script>
+
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="components/card.html" />
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Card</strong> <small>Example</small>
@@ -227,7 +233,7 @@
           </p>
           <DocsExample href="components/card.html/#header-and-footer">
             <CCard>
-              <CCardHeader component="h5">Header</CCardHeader>
+              <CCardHeader as="h5">Header</CCardHeader>
               <CCardBody>
                 <CCardTitle>Special title treatment</CCardTitle>
                 <CCardText>
@@ -967,16 +973,4 @@
       </CCard>
     </CCol>
   </CRow>
-</template>
-
-<script>
-import VueImg from '@/assets/images/vue.jpg'
-export default {
-  name: 'Cards',
-  setup() {
-    return {
-      VueImg,
-    }
-  },
-}
-</script>
+</template>
\ No newline at end of file
diff --git a/src/views/base/Carousels.vue b/src/views/base/Carousels.vue
index 3433ec1c..af00c03a 100644
--- a/src/views/base/Carousels.vue
+++ b/src/views/base/Carousels.vue
@@ -1,6 +1,13 @@
+<script setup>
+import AngularImg from '@/assets/images/angular.jpg'
+import ReactImg from '@/assets/images/react.jpg'
+import VueImg from '@/assets/images/vue.jpg'
+</script>
+
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="components/carousel.html" />
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Carousels</strong> <small>Slide only</small>
@@ -82,7 +89,7 @@
             <code>&lt;CCarouselCaption&gt;</code> element within any
             <code>&lt;CCarouselItem&gt;</code>. They can be immediately hidden
             on smaller viewports, as shown below, with optional
-            <a href="https://coreui.io/4.0/utilities/display"
+            <a href="https://coreui.io/docs/utilities/display"
               >display utilities</a
             >. We hide them with <code>.d-none</code> and draw them back on
             medium-sized devices with <code>.d-md-block</code>.
@@ -175,19 +182,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-import AngularImg from '@/assets/images/angular.jpg'
-import ReactImg from '@/assets/images/react.jpg'
-import VueImg from '@/assets/images/vue.jpg'
-export default {
-  name: 'Carousels',
-  setup() {
-    return {
-      AngularImg,
-      ReactImg,
-      VueImg,
-    }
-  },
-}
-</script>
diff --git a/src/views/base/Collapses.vue b/src/views/base/Collapses.vue
index 34d00f96..194bfdfd 100644
--- a/src/views/base/Collapses.vue
+++ b/src/views/base/Collapses.vue
@@ -1,28 +1,31 @@
+<script setup>
+import { ref } from 'vue'
+
+const visible = ref(false)
+const visibleA = ref(false)
+const visibleB = ref(false)
+const visibleHorizontal = ref(false)
+</script>
+
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="components/collapse.html" />
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Collapse</strong>
         </CCardHeader>
         <CCardBody>
-          <p class="text-body-secondary small">
-            You can use a link or a button component.
-          </p>
+          <p class="text-body-secondary small">You can use a link or a button component.</p>
           <DocsExample href="components/collapse.html#example">
-            <CButton color="primary" href="#" @click="visible = !visible"
-              >Link</CButton
-            >
-            <CButton color="primary" @click="visible = !visible"
-              >Button</CButton
-            >
+            <CButton color="primary" href="#" @click="visible = !visible">Link</CButton>
+            <CButton color="primary" @click="visible = !visible">Button</CButton>
             <CCollapse :visible="visible">
               <CCard class="mt-3">
                 <CCardBody>
-                  Anim pariatur cliche reprehenderit, enim eiusmod high life
-                  accusamus terry richardson ad squid. Nihil anim keffiyeh
-                  helvetica, craft beer labore wes anderson cred nesciunt
-                  sapiente ea proident.
+                  Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
+                  richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson
+                  cred nesciunt sapiente ea proident.
                 </CCardBody>
               </CCard>
             </CCollapse>
@@ -30,15 +33,12 @@
         </CCardBody>
       </CCard>
       <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Collapse</strong> <small> Horizontal</small>
-        </CCardHeader>
+        <CCardHeader> <strong>Vue Collapse</strong> <small> Horizontal</small> </CCardHeader>
         <CCardBody>
           <p class="text-body-secondary small">
             The collapse plugin also supports horizontal collapsing. Add the
-            <code>horizontal</code> property to transition the
-            <code>width</code> instead of <code>height</code> and set a
-            <code>width</code> on the immediate child element.
+            <code>horizontal</code> property to transition the <code>width</code> instead of
+            <code>height</code> and set a <code>width</code> on the immediate child element.
           </p>
           <DocsExample href="components/collapse.html#horizontal">
             <CButton
@@ -53,8 +53,8 @@
               <CCollapse horizontal :visible="visibleHorizontal">
                 <CCard style="width: 300px">
                   <CCardBody>
-                    This is some placeholder content for a horizontal collapse.
-                    It's hidden by default and shown when triggered.
+                    This is some placeholder content for a horizontal collapse. It's hidden by
+                    default and shown when triggered.
                   </CCardBody>
                 </CCard>
               </CCollapse>
@@ -63,21 +63,15 @@
         </CCardBody>
       </CCard>
       <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Collapse</strong> <small> multi target</small>
-        </CCardHeader>
+        <CCardHeader> <strong>Vue Collapse</strong> <small> multi target</small> </CCardHeader>
         <CCardBody>
           <p class="text-body-secondary small">
             A <code>&lt;CButton&gt;</code> can show and hide multiple elements.
           </p>
           <h4 class="mt-4">Toggle multiple targets</h4>
           <DocsExample href="components/collapse.html#multiple-targets">
-            <CButton color="primary" @click="visibleA = !visibleA"
-              >Toggle first element</CButton
-            >
-            <CButton color="primary" @click="visibleB = !visibleB"
-              >Toggle second element</CButton
-            >
+            <CButton color="primary" @click="visibleA = !visibleA">Toggle first element</CButton>
+            <CButton color="primary" @click="visibleB = !visibleB">Toggle second element</CButton>
             <CButton
               color="primary"
               @click="
@@ -94,10 +88,9 @@
                 <CCollapse :visible="visibleA">
                   <CCard class="mt-3">
                     <CCardBody>
-                      Anim pariatur cliche reprehenderit, enim eiusmod high life
-                      accusamus terry richardson ad squid. Nihil anim keffiyeh
-                      helvetica, craft beer labore wes anderson cred nesciunt
-                      sapiente ea proident.
+                      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
+                      richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes
+                      anderson cred nesciunt sapiente ea proident.
                     </CCardBody>
                   </CCard>
                 </CCollapse>
@@ -106,10 +99,9 @@
                 <CCollapse :visible="visibleB">
                   <CCard class="mt-3">
                     <CCardBody>
-                      Anim pariatur cliche reprehenderit, enim eiusmod high life
-                      accusamus terry richardson ad squid. Nihil anim keffiyeh
-                      helvetica, craft beer labore wes anderson cred nesciunt
-                      sapiente ea proident.
+                      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
+                      richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes
+                      anderson cred nesciunt sapiente ea proident.
                     </CCardBody>
                   </CCard>
                 </CCollapse>
@@ -121,22 +113,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-import { ref } from 'vue'
-export default {
-  name: 'Collapse',
-  setup() {
-    const visible = ref(false)
-    const visibleA = ref(false)
-    const visibleB = ref(false)
-    const visibleHorizontal = ref(false)
-    return {
-      visible,
-      visibleA,
-      visibleB,
-      visibleHorizontal,
-    }
-  },
-}
-</script>
diff --git a/src/views/base/ListGroups.vue b/src/views/base/ListGroups.vue
index 1cf4cfbb..4d6a4c4e 100644
--- a/src/views/base/ListGroups.vue
+++ b/src/views/base/ListGroups.vue
@@ -1,6 +1,7 @@
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="components/list-group.html" />
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue List Group</strong> <small>Basic example</small>
@@ -86,19 +87,19 @@
           </p>
           <DocsExample href="components/list-group.html#links-and-buttons">
             <CListGroup>
-              <CListGroupItem component="a" href="#" active>
+              <CListGroupItem as="a" href="#" active>
                 Cras justo odio
               </CListGroupItem>
-              <CListGroupItem component="a" href="#">
+              <CListGroupItem as="a" href="#">
                 Dapibus ac facilisis in
               </CListGroupItem>
-              <CListGroupItem component="a" href="#">
+              <CListGroupItem as="a" href="#">
                 Morbi leo risus
               </CListGroupItem>
-              <CListGroupItem component="a" href="#">
+              <CListGroupItem as="a" href="#">
                 Porta ac consectetur ac
               </CListGroupItem>
-              <CListGroupItem component="a" href="#" disabled>
+              <CListGroupItem as="a" href="#" disabled>
                 Vestibulum at eros
               </CListGroupItem>
             </CListGroup>
@@ -204,7 +205,7 @@
           </p>
           <DocsExample href="components/list-group.html#contextual-classes">
             <CListGroup>
-              <CListGroupItem component="a" href="#"
+              <CListGroupItem as="a" href="#"
                 >Dapibus ac facilisis in</CListGroupItem
               >
               <CListGroupItem
@@ -219,7 +220,7 @@
                   'dark',
                 ]"
                 :key="item"
-                component="a"
+                as="a"
                 href="#"
                 :color="item"
                 >A simple {{ item }} list group item</CListGroupItem
@@ -279,7 +280,7 @@
           </p>
           <DocsExample href="components/list-group.html#custom-content">
             <CListGroup>
-              <CListGroupItem component="a" href="#" active>
+              <CListGroupItem as="a" href="#" active>
                 <div class="d-flex w-100 justify-content-between">
                   <h5 class="mb-1">List group item heading</h5>
                   <small>3 days ago</small>
@@ -290,7 +291,7 @@
                 </p>
                 <small>Donec id elit non mi porta.</small>
               </CListGroupItem>
-              <CListGroupItem component="a" href="#">
+              <CListGroupItem as="a" href="#">
                 <div class="d-flex w-100 justify-content-between">
                   <h5 class="mb-1">List group item heading</h5>
                   <small class="text-body-secondary">3 days ago</small>
@@ -303,7 +304,7 @@
                   >Donec id elit non mi porta.</small
                 >
               </CListGroupItem>
-              <CListGroupItem component="a" href="#">
+              <CListGroupItem as="a" href="#">
                 <div class="d-flex w-100 justify-content-between">
                   <h5 class="mb-1">List group item heading</h5>
                   <small class="text-body-secondary">3 days ago</small>
@@ -355,9 +356,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-export default {
-  name: 'ListGroups',
-}
-</script>
diff --git a/src/views/base/Navs.vue b/src/views/base/Navs.vue
index 652afd87..2c544f85 100644
--- a/src/views/base/Navs.vue
+++ b/src/views/base/Navs.vue
@@ -1,6 +1,7 @@
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="components/nav.html" />
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Navs</strong> <small>Base navs</small>
@@ -38,7 +39,7 @@
             the extra markup.
           </p>
           <DocsExample href="components/nav.html#base-nav">
-            <CNav component="nav">
+            <CNav as="nav">
               <CNavLink href="#" active> Active </CNavLink>
               <CNavLink href="#">Link</CNavLink>
               <CNavLink href="#">Link</CNavLink>
@@ -265,7 +266,7 @@
           </p>
           <DocsExample href="components/nav.html#working-with-flex-utilities">
             <CNav
-              component="nav"
+              as="nav"
               variant="pills"
               class="flex-column flex-sm-row"
             >
@@ -344,9 +345,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-export default {
-  name: 'Navs',
-}
-</script>
diff --git a/src/views/base/Paginations.vue b/src/views/base/Paginations.vue
index 14c4ecbc..2141769e 100644
--- a/src/views/base/Paginations.vue
+++ b/src/views/base/Paginations.vue
@@ -1,6 +1,7 @@
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="components/pagination.html" />
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Pagination</strong>
@@ -173,9 +174,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-export default {
-  name: 'Paginations',
-}
-</script>
diff --git a/src/views/base/Placeholders.vue b/src/views/base/Placeholders.vue
index 723b68be..597748ff 100644
--- a/src/views/base/Placeholders.vue
+++ b/src/views/base/Placeholders.vue
@@ -1,6 +1,11 @@
+<script setup>
+import VueImg from '@/assets/images/vue.jpg'
+</script>
+
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="components/placeholder.html" />
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Placeholder</strong>
@@ -26,7 +31,7 @@
               </CCard>
               <CCard style="width: 18rem">
                 <CCardImage
-                  component="svg"
+                  as="svg"
                   orientation="top"
                   width="100%"
                   height="162"
@@ -160,11 +165,11 @@
             something being <em>actively</em> loaded.
           </p>
           <DocsExample href="components/placeholder.html#animation">
-            <CPlaceholder component="p" animation="glow">
+            <CPlaceholder as="p" animation="glow">
               <CPlaceholder :xs="12" />
             </CPlaceholder>
 
-            <CPlaceholder component="p" animation="wave">
+            <CPlaceholder as="p" animation="wave">
               <CPlaceholder :xs="12" />
             </CPlaceholder>
           </DocsExample>
@@ -173,15 +178,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-import VueImg from '@/assets/images/vue.jpg'
-export default {
-  name: 'Placeholders',
-  setup() {
-    return {
-      VueImg,
-    }
-  },
-}
-</script>
diff --git a/src/views/base/Popovers.vue b/src/views/base/Popovers.vue
index 1127cf3c..81147e15 100644
--- a/src/views/base/Popovers.vue
+++ b/src/views/base/Popovers.vue
@@ -1,6 +1,7 @@
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="components/popover.html" />
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Popovers</strong> <small>Basic example</small>
@@ -76,9 +77,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-export default {
-  name: 'Popovers',
-}
-</script>
diff --git a/src/views/base/Progress.vue b/src/views/base/Progress.vue
index ff300e5a..68d05fe3 100644
--- a/src/views/base/Progress.vue
+++ b/src/views/base/Progress.vue
@@ -1,6 +1,7 @@
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="components/progress.html" />
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Progress</strong> <small>Basic example</small>
@@ -137,16 +138,32 @@
           </p>
           <DocsExample href="components/progress.html#striped">
             <CProgress class="mb-3">
-              <CProgressBar color="success" variant="striped" :value="25" />
+              <CProgressBar
+                color="success"
+                variant="striped"
+                :value="25"
+              />
             </CProgress>
             <CProgress class="mb-3">
-              <CProgressBar color="info" variant="striped" :value="50" />
+              <CProgressBar
+                color="info"
+                variant="striped"
+                :value="50"
+              />
             </CProgress>
             <CProgress class="mb-3">
-              <CProgressBar color="warning" variant="striped" :value="75" />
+              <CProgressBar
+                color="warning"
+                variant="striped"
+                :value="75"
+              />
             </CProgress>
             <CProgress class="mb-3">
-              <CProgressBar color="danger" variant="striped" :value="100" />
+              <CProgressBar
+                color="danger"
+                variant="striped"
+                :value="100"
+              />
             </CProgress>
           </DocsExample>
         </CCardBody>
@@ -203,10 +220,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-export default {
-  // eslint-disable-next-line
-  name: 'Progress',
-}
-</script>
diff --git a/src/views/base/Spinners.vue b/src/views/base/Spinners.vue
index 8c366349..1f9b6454 100644
--- a/src/views/base/Spinners.vue
+++ b/src/views/base/Spinners.vue
@@ -1,6 +1,7 @@
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="components/spinner.html" />
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Spinner</strong> <small>Border</small>
@@ -91,17 +92,17 @@
           </p>
           <DocsExample href="components/spinner.html#buttons">
             <CButton disabled>
-              <CSpinner component="span" size="sm" aria-hidden="true" />
+              <CSpinner as="span" size="sm" aria-hidden="true" />
             </CButton>
             <CButton disabled>
-              <CSpinner component="span" size="sm" aria-hidden="true" />
+              <CSpinner as="span" size="sm" aria-hidden="true" />
               Loading...
             </CButton>
           </DocsExample>
           <DocsExample href="components/spinner.html#buttons">
             <CButton disabled>
               <CSpinner
-                component="span"
+                as="span"
                 size="sm"
                 variant="grow"
                 aria-hidden="true"
@@ -109,7 +110,7 @@
             </CButton>
             <CButton disabled>
               <CSpinner
-                component="span"
+                as="span"
                 size="sm"
                 variant="grow"
                 aria-hidden="true"
@@ -122,9 +123,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-export default {
-  name: 'Spinners',
-}
-</script>
diff --git a/src/views/base/Tables.vue b/src/views/base/Tables.vue
index 30dde23b..8a4061ff 100644
--- a/src/views/base/Tables.vue
+++ b/src/views/base/Tables.vue
@@ -1,6 +1,7 @@
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="components/table.html" />
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Table</strong> <small>Basic example</small>
@@ -985,9 +986,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-export default {
-  name: 'Tables',
-}
-</script>
diff --git a/src/views/base/Tabs.vue b/src/views/base/Tabs.vue
new file mode 100644
index 00000000..66b6518f
--- /dev/null
+++ b/src/views/base/Tabs.vue
@@ -0,0 +1,163 @@
+<template>
+  <CRow>
+    <CCol :xs="12">
+      <DocsComponents href="components/tabs.html" />
+      <CCard class="mb-4">
+        <CCardHeader>
+          <strong>Vue Tabs</strong>
+        </CCardHeader>
+        <CCardBody>
+          <p class="text-body-secondary small">
+            The basic Vue tabs example uses the <code>variant=&#34;tabs&#34;</code> props to
+            generate a tabbed interface.
+          </p>
+          <DocsExample href="components/tabs.html#example">
+            <CTabs activeItemKey="profile">
+              <CTabList variant="tabs">
+                <CTab itemKey="home">Home</CTab>
+                <CTab itemKey="profile">Profile</CTab>
+                <CTab itemKey="contact">Contact</CTab>
+                <CTab disabled itemKey="disabled"> Disabled </CTab>
+              </CTabList>
+              <CTabContent>
+                <CTabPanel class="p-3" itemKey="home"> Home tab content </CTabPanel>
+                <CTabPanel class="p-3" itemKey="profile"> Profile tab content </CTabPanel>
+                <CTabPanel class="p-3" itemKey="contact"> Contact tab content </CTabPanel>
+                <CTabPanel class="p-3" itemKey="disabled"> Disabled tab content </CTabPanel>
+              </CTabContent>
+            </CTabs>
+          </DocsExample>
+        </CCardBody>
+      </CCard>
+    </CCol>
+    <CCol :xs="12">
+      <CCard class="mb-4">
+        <CCardHeader> <strong>Vue Tabs</strong> <small>Unstyled</small> </CCardHeader>
+        <CCardBody>
+          <p class="text-body-secondary small">
+            If you don’t provide the <code>variant</code> prop, the component will default to a
+            basic style.
+          </p>
+          <DocsExample href="components/tabs.html#unstyled">
+            <CTabs activeItemKey="profile">
+              <CTabList>
+                <CTab itemKey="home">Home</CTab>
+                <CTab itemKey="profile">Profile</CTab>
+                <CTab itemKey="contact">Contact</CTab>
+                <CTab disabled itemKey="disabled"> Disabled </CTab>
+              </CTabList>
+              <CTabContent>
+                <CTabPanel class="p-3" itemKey="home"> Home tab content </CTabPanel>
+                <CTabPanel class="p-3" itemKey="profile"> Profile tab content </CTabPanel>
+                <CTabPanel class="p-3" itemKey="contact"> Contact tab content </CTabPanel>
+                <CTabPanel class="p-3" itemKey="disabled"> Disabled tab content </CTabPanel>
+              </CTabContent>
+            </CTabs>
+          </DocsExample>
+        </CCardBody>
+      </CCard>
+    </CCol>
+    <CCol :xs="12">
+      <CCard class="mb-4">
+        <CCardHeader> <strong>Vue Tabs</strong> <small>Pills</small> </CCardHeader>
+        <CCardBody>
+          <p class="text-body-secondary small">
+            Take that same code, but use <code>variant=&#34;pills&#34;</code> instead:
+          </p>
+          <DocsExample href="components/tabs.html#unstyled">
+            <CTabs :activeItemKey="2">
+              <CTabList variant="pills">
+                <CTab aria-controls="home-tab-pane" :itemKey="1"> Home </CTab>
+                <CTab aria-controls="profile-tab-pane" :itemKey="2"> Profile </CTab>
+                <CTab aria-controls="contact-tab-pane" :itemKey="3"> Contact </CTab>
+                <CTab aria-controls="disabled-tab-pane" disabled :itemKey="4"> Disabled </CTab>
+              </CTabList>
+              <CTabContent>
+                <CTabPanel class="p-3" aria-labelledby="home-tab-pane" :itemKey="1">
+                  Home tab content
+                </CTabPanel>
+                <CTabPanel class="p-3" aria-labelledby="profile-tab-pane" :itemKey="2">
+                  Profile tab content
+                </CTabPanel>
+                <CTabPanel class="p-3" aria-labelledby="contact-tab-pane" :itemKey="3">
+                  Contact tab content
+                </CTabPanel>
+                <CTabPanel class="p-3" aria-labelledby="disabled-tab-pane" :itemKey="4">
+                  Disabled tab content
+                </CTabPanel>
+              </CTabContent>
+            </CTabs>
+          </DocsExample>
+        </CCardBody>
+      </CCard>
+    </CCol>
+    <CCol :xs="12">
+      <CCard class="mb-4">
+        <CCardHeader> <strong>Vue Tabs</strong> <small>Underline</small> </CCardHeader>
+        <CCardBody>
+          <p class="text-body-secondary small">
+            Take that same code, but use <code>variant=&#34;underline&#34;</code> instead:
+          </p>
+          <DocsExample href="components/tabs.html#unstyled">
+            <CTabs :activeItemKey="2">
+              <CTabList variant="underline">
+                <CTab aria-controls="home-tab-pane" :itemKey="1"> Home </CTab>
+                <CTab aria-controls="profile-tab-pane" :itemKey="2"> Profile </CTab>
+                <CTab aria-controls="contact-tab-pane" :itemKey="3"> Contact </CTab>
+                <CTab aria-controls="disabled-tab-pane" disabled :itemKey="4"> Disabled </CTab>
+              </CTabList>
+              <CTabContent>
+                <CTabPanel class="py-3" aria-labelledby="home-tab-pane" :itemKey="1">
+                  Home tab content
+                </CTabPanel>
+                <CTabPanel class="py-3" aria-labelledby="profile-tab-pane" :itemKey="2">
+                  Profile tab content
+                </CTabPanel>
+                <CTabPanel class="py-3" aria-labelledby="contact-tab-pane" :itemKey="3">
+                  Contact tab content
+                </CTabPanel>
+                <CTabPanel class="py-3" aria-labelledby="disabled-tab-pane" :itemKey="4">
+                  Disabled tab content
+                </CTabPanel>
+              </CTabContent>
+            </CTabs>
+          </DocsExample>
+        </CCardBody>
+      </CCard>
+    </CCol>
+    <CCol :xs="12">
+      <CCard class="mb-4">
+        <CCardHeader> <strong>Vue Tabs</strong> <small>Underline border</small> </CCardHeader>
+        <CCardBody>
+          <p class="text-body-secondary small">
+            Take that same code, but use <code>variant=&#34;underline-border&#34;</code> instead:
+          </p>
+          <DocsExample href="components/tabs.html#unstyled">
+            <CTabs :activeItemKey="2">
+              <CTabList variant="underline-border">
+                <CTab aria-controls="home-tab-pane" :itemKey="1"> Home </CTab>
+                <CTab aria-controls="profile-tab-pane" :itemKey="2"> Profile </CTab>
+                <CTab aria-controls="contact-tab-pane" :itemKey="3"> Contact </CTab>
+                <CTab aria-controls="disabled-tab-pane" disabled :itemKey="4"> Disabled </CTab>
+              </CTabList>
+              <CTabContent>
+                <CTabPanel class="py-3" aria-labelledby="home-tab-pane" :itemKey="1">
+                  Home tab content
+                </CTabPanel>
+                <CTabPanel class="py-3" aria-labelledby="profile-tab-pane" :itemKey="2">
+                  Profile tab content
+                </CTabPanel>
+                <CTabPanel class="py-3" aria-labelledby="contact-tab-pane" :itemKey="3">
+                  Contact tab content
+                </CTabPanel>
+                <CTabPanel class="py-3" aria-labelledby="disabled-tab-pane" :itemKey="4">
+                  Disabled tab content
+                </CTabPanel>
+              </CTabContent>
+            </CTabs>
+          </DocsExample>
+        </CCardBody>
+      </CCard>
+    </CCol>
+  </CRow>
+</template>
diff --git a/src/views/base/Tooltips.vue b/src/views/base/Tooltips.vue
index 31bc9841..e98467e4 100644
--- a/src/views/base/Tooltips.vue
+++ b/src/views/base/Tooltips.vue
@@ -1,6 +1,7 @@
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="components/tooltip.html" />
       <CCard>
         <CCardHeader>
           <strong>Vue Tooltips</strong> <small>Basic example</small>
@@ -72,9 +73,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-export default {
-  name: 'Tooltips',
-}
-</script>
diff --git a/src/views/buttons/ButtonGroups.vue b/src/views/buttons/ButtonGroups.vue
index d1b97bf5..21bfd114 100644
--- a/src/views/buttons/ButtonGroups.vue
+++ b/src/views/buttons/ButtonGroups.vue
@@ -1,6 +1,7 @@
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="components/button-group.html" />
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Button Group</strong> <span>Basic example</span>
@@ -415,9 +416,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-export default {
-  name: 'ButtonGroups',
-}
-</script>
diff --git a/src/views/buttons/Buttons.vue b/src/views/buttons/Buttons.vue
index 9d18dcb3..fd26fe88 100644
--- a/src/views/buttons/Buttons.vue
+++ b/src/views/buttons/Buttons.vue
@@ -1,6 +1,7 @@
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="components/button.html" />
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Button</strong>
@@ -122,24 +123,24 @@
             meaning to assistive technologies such as screen readers.
           </p>
           <DocsExample href="components/button.html#button-components">
-            <CButton component="a" color="primary" href="#" role="button">
+            <CButton as="a" color="primary" href="#" role="button">
               Link
             </CButton>
             <CButton type="submit" color="primary"> Button </CButton>
             <CButton
-              component="input"
+              as="input"
               type="button"
               color="primary"
               value="Input"
             />
             <CButton
-              component="input"
+              as="input"
               type="submit"
               color="primary"
               value="Submit"
             />
             <CButton
-              component="input"
+              as="input"
               type="reset"
               color="primary"
               value="Reset"
@@ -359,11 +360,11 @@
             state of the component to assistive technologies.
           </p>
           <DocsExample href="components/button.html#disabled-state">
-            <CButton component="a" href="#" color="primary" size="lg" disabled>
+            <CButton as="a" href="#" color="primary" size="lg" disabled>
               Primary link
             </CButton>
             <CButton
-              component="a"
+              as="a"
               href="#"
               color="secondary"
               size="lg"
@@ -434,9 +435,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-export default {
-  name: 'Buttons',
-}
-</script>
diff --git a/src/views/buttons/Dropdowns.vue b/src/views/buttons/Dropdowns.vue
index 8b0b93b6..4aaa38a9 100644
--- a/src/views/buttons/Dropdowns.vue
+++ b/src/views/buttons/Dropdowns.vue
@@ -1,6 +1,7 @@
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="components/dropdown.html" />
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Dropdown</strong> <small>Single button</small>
@@ -225,7 +226,7 @@
                   class="collapse navbar-collapse"
                 >
                   <ul class="navbar-nav">
-                    <CDropdown dark component="li" variant="nav-item">
+                    <CDropdown dark as="li" variant="nav-item">
                       <CDropdownToggle>Dropdown</CDropdownToggle>
                       <CDropdownMenu>
                         <CDropdownItem href="#">Action</CDropdownItem>
@@ -353,9 +354,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-export default {
-  name: 'Dropdowns',
-}
-</script>
diff --git a/src/views/charts/CChartBarExample.vue b/src/views/charts/CChartBarExample.vue
index 33e927f5..6f735afe 100644
--- a/src/views/charts/CChartBarExample.vue
+++ b/src/views/charts/CChartBarExample.vue
@@ -1,38 +1,31 @@
-<template>
-  <CChartBar :data="defaultData" />
-</template>
-
-<script>
+<script setup>
 import { CChartBar } from '@coreui/vue-chartjs'
-export default {
-  name: 'CChartBarExample',
-  components: { CChartBar },
-  computed: {
-    defaultData() {
-      return {
-        labels: [
-          'January',
-          'February',
-          'March',
-          'April',
-          'May',
-          'June',
-          'July',
-          'August',
-          'September',
-          'October',
-          'November',
-          'December',
-        ],
-        datasets: [
-          {
-            label: 'GitHub Commits',
-            backgroundColor: '#f87979',
-            data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 12],
-          },
-        ],
-      }
+
+const data = {
+  labels: [
+    'January',
+    'February',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December',
+  ],
+  datasets: [
+    {
+      label: 'GitHub Commits',
+      backgroundColor: '#f87979',
+      data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 12],
     },
-  },
+  ],
 }
 </script>
+
+<template>
+  <CChartBar :data="data" />
+</template>
\ No newline at end of file
diff --git a/src/views/charts/CChartDoughnutExample.vue b/src/views/charts/CChartDoughnutExample.vue
index 653c8c89..2a6e75b9 100644
--- a/src/views/charts/CChartDoughnutExample.vue
+++ b/src/views/charts/CChartDoughnutExample.vue
@@ -1,24 +1,17 @@
-<template>
-  <CChartDoughnut :data="defaultData" />
-</template>
-
-<script>
+<script setup>
 import { CChartDoughnut } from '@coreui/vue-chartjs'
-export default {
-  name: 'CChartDoughnutExample',
-  components: { CChartDoughnut },
-  computed: {
-    defaultData() {
-      return {
-        labels: ['VueJs', 'EmberJs', 'VueJs', 'AngularJs'],
-        datasets: [
-          {
-            backgroundColor: ['#41B883', '#E46651', '#00D8FF', '#DD1B16'],
-            data: [40, 20, 80, 10],
-          },
-        ],
-      }
+
+const data = {
+  labels: ['VueJs', 'EmberJs', 'VueJs', 'AngularJs'],
+  datasets: [
+    {
+      backgroundColor: ['#41B883', '#E46651', '#00D8FF', '#DD1B16'],
+      data: [40, 20, 80, 10],
     },
-  },
+  ],
 }
 </script>
+
+<template>
+  <CChartDoughnut :data="data" />
+</template>
diff --git a/src/views/charts/CChartLineExample.vue b/src/views/charts/CChartLineExample.vue
index f1a0cc6a..e1682d0b 100644
--- a/src/views/charts/CChartLineExample.vue
+++ b/src/views/charts/CChartLineExample.vue
@@ -1,30 +1,23 @@
-<template>
-  <CChartLine :data="defaultData" />
-</template>
-
-<script>
+<script setup>
 import { CChartLine } from '@coreui/vue-chartjs'
-export default {
-  name: 'CChartLineExample',
-  components: { CChartLine },
-  computed: {
-    defaultData() {
-      return {
-        labels: ['months', 'a', 'b', 'c', 'd'],
-        datasets: [
-          {
-            label: 'Data One',
-            backgroundColor: 'rgb(228,102,81,0.9)',
-            data: [30, 39, 10, 50, 30, 70, 35],
-          },
-          {
-            label: 'Data Two',
-            backgroundColor: 'rgb(0,216,255,0.9)',
-            data: [39, 80, 40, 35, 40, 20, 45],
-          },
-        ],
-      }
+
+const data = {
+  labels: ['months', 'a', 'b', 'c', 'd'],
+  datasets: [
+    {
+      label: 'Data One',
+      backgroundColor: 'rgb(228,102,81,0.9)',
+      data: [30, 39, 10, 50, 30, 70, 35],
     },
-  },
+    {
+      label: 'Data Two',
+      backgroundColor: 'rgb(0,216,255,0.9)',
+      data: [39, 80, 40, 35, 40, 20, 45],
+    },
+  ],
 }
 </script>
+
+<template>
+  <CChartLine :data="data" />
+</template>
diff --git a/src/views/charts/CChartPieExample.vue b/src/views/charts/CChartPieExample.vue
index b4857377..8819dd43 100644
--- a/src/views/charts/CChartPieExample.vue
+++ b/src/views/charts/CChartPieExample.vue
@@ -1,24 +1,17 @@
-<template>
-  <CChartPie :data="defaultData" />
-</template>
-
-<script>
+<script setup>
 import { CChartPie } from '@coreui/vue-chartjs'
-export default {
-  name: 'CChartPieExample',
-  components: { CChartPie },
-  computed: {
-    defaultData() {
-      return {
-        labels: ['VueJs', 'EmberJs', 'VueJs', 'AngularJs'],
-        datasets: [
-          {
-            backgroundColor: ['#41B883', '#E46651', '#00D8FF', '#DD1B16'],
-            data: [40, 20, 80, 10],
-          },
-        ],
-      }
+
+const data = {
+  labels: ['VueJs', 'EmberJs', 'VueJs', 'AngularJs'],
+  datasets: [
+    {
+      backgroundColor: ['#41B883', '#E46651', '#00D8FF', '#DD1B16'],
+      data: [40, 20, 80, 10],
     },
-  },
+  ],
 }
 </script>
+
+<template>
+  <CChartPie :data="data" />
+</template>
diff --git a/src/views/charts/CChartPolarAreaExample.vue b/src/views/charts/CChartPolarAreaExample.vue
index 192b2e24..7311fae6 100644
--- a/src/views/charts/CChartPolarAreaExample.vue
+++ b/src/views/charts/CChartPolarAreaExample.vue
@@ -1,49 +1,34 @@
-<template>
-  <CChartPolarArea :data="defaultData" />
-</template>
-
-<script>
+<script setup>
 import { CChartPolarArea } from '@coreui/vue-chartjs'
-export default {
-  name: 'CChartPolarAreaExample',
-  components: { CChartPolarArea },
-  computed: {
-    defaultData() {
-      return {
-        labels: [
-          'Eating',
-          'Drinking',
-          'Sleeping',
-          'Designing',
-          'Coding',
-          'Cycling',
-          'Running',
-        ],
-        datasets: [
-          {
-            label: 'My First dataset',
-            backgroundColor: 'rgba(179,181,198,0.5)',
-            pointBackgroundColor: 'rgba(179,181,198,1)',
-            pointBorderColor: '#fff',
-            pointHoverBackgroundColor: 'rgba(179,181,198,1)',
-            pointHoverBorderColor: 'rgba(179,181,198,1)',
-            data: [65, 59, 90, 81, 56, 55, 40],
-          },
-          {
-            label: 'My Second dataset',
-            backgroundColor: 'rgba(255,99,132,0.5)',
-            pointBackgroundColor: 'rgba(255,99,132,1)',
-            pointBorderColor: '#fff',
-            pointHoverBackgroundColor: 'rgba(255,99,132,1)',
-            pointHoverBorderColor: 'rgba(255,99,132,1)',
-            data: [28, 48, 40, 19, 96, 27, 100],
-          },
-        ],
-        options: {
-          aspectRatio: 1.5,
-        },
-      }
+
+const data = {
+  labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
+  datasets: [
+    {
+      label: 'My First dataset',
+      backgroundColor: 'rgba(179,181,198,0.5)',
+      pointBackgroundColor: 'rgba(179,181,198,1)',
+      pointBorderColor: '#fff',
+      pointHoverBackgroundColor: 'rgba(179,181,198,1)',
+      pointHoverBorderColor: 'rgba(179,181,198,1)',
+      data: [65, 59, 90, 81, 56, 55, 40],
     },
+    {
+      label: 'My Second dataset',
+      backgroundColor: 'rgba(255,99,132,0.5)',
+      pointBackgroundColor: 'rgba(255,99,132,1)',
+      pointBorderColor: '#fff',
+      pointHoverBackgroundColor: 'rgba(255,99,132,1)',
+      pointHoverBorderColor: 'rgba(255,99,132,1)',
+      data: [28, 48, 40, 19, 96, 27, 100],
+    },
+  ],
+  options: {
+    aspectRatio: 1.5,
   },
 }
 </script>
+
+<template>
+  <CChartPolarArea :data="data" />
+</template>
diff --git a/src/views/charts/CChartRadarExample.vue b/src/views/charts/CChartRadarExample.vue
index c4513702..79e2e214 100644
--- a/src/views/charts/CChartRadarExample.vue
+++ b/src/views/charts/CChartRadarExample.vue
@@ -1,53 +1,38 @@
 <template>
-  <CChartRadar :data="defaultData" />
+  <CChartRadar :data="data" />
 </template>
 
-<script>
+<script setup>
 import { CChartRadar } from '@coreui/vue-chartjs'
-export default {
-  name: 'CChartRadarExample',
-  components: { CChartRadar },
-  computed: {
-    defaultData() {
-      return {
-        labels: [
-          'Eating',
-          'Drinking',
-          'Sleeping',
-          'Designing',
-          'Coding',
-          'Cycling',
-          'Running',
-        ],
-        datasets: [
-          {
-            label: '2020',
-            backgroundColor: 'rgba(179,181,198,0.2)',
-            borderColor: 'rgba(179,181,198,1)',
-            pointBackgroundColor: 'rgba(179,181,198,1)',
-            pointBorderColor: '#fff',
-            pointHoverBackgroundColor: '#fff',
-            pointHoverBorderColor: 'rgba(179,181,198,1)',
-            tooltipLabelColor: 'rgba(179,181,198,1)',
-            data: [65, 59, 90, 81, 56, 55, 40],
-          },
-          {
-            label: '2021',
-            backgroundColor: 'rgba(255,99,132,0.2)',
-            borderColor: 'rgba(255,99,132,1)',
-            pointBackgroundColor: 'rgba(255,99,132,1)',
-            pointBorderColor: '#fff',
-            pointHoverBackgroundColor: '#fff',
-            pointHoverBorderColor: 'rgba(255,99,132,1)',
-            tooltipLabelColor: 'rgba(255,99,132,1)',
-            data: [28, 48, 40, 19, 96, 27, 100],
-          },
-        ],
-        options: {
-          aspectRatio: 1.5,
-        },
-      }
+
+const data = {
+  labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
+  datasets: [
+    {
+      label: '2020',
+      backgroundColor: 'rgba(179,181,198,0.2)',
+      borderColor: 'rgba(179,181,198,1)',
+      pointBackgroundColor: 'rgba(179,181,198,1)',
+      pointBorderColor: '#fff',
+      pointHoverBackgroundColor: '#fff',
+      pointHoverBorderColor: 'rgba(179,181,198,1)',
+      tooltipLabelColor: 'rgba(179,181,198,1)',
+      data: [65, 59, 90, 81, 56, 55, 40],
+    },
+    {
+      label: '2021',
+      backgroundColor: 'rgba(255,99,132,0.2)',
+      borderColor: 'rgba(255,99,132,1)',
+      pointBackgroundColor: 'rgba(255,99,132,1)',
+      pointBorderColor: '#fff',
+      pointHoverBackgroundColor: '#fff',
+      pointHoverBorderColor: 'rgba(255,99,132,1)',
+      tooltipLabelColor: 'rgba(255,99,132,1)',
+      data: [28, 48, 40, 19, 96, 27, 100],
     },
+  ],
+  options: {
+    aspectRatio: 1.5,
   },
 }
 </script>
diff --git a/src/views/charts/Charts.vue b/src/views/charts/Charts.vue
index eff0304f..9457ec80 100644
--- a/src/views/charts/Charts.vue
+++ b/src/views/charts/Charts.vue
@@ -1,3 +1,14 @@
+<script setup>
+import {
+  CChartLineExample,
+  CChartBarExample,
+  CChartDoughnutExample,
+  CChartRadarExample,
+  CChartPieExample,
+  CChartPolarAreaExample,
+} from './index.js'
+</script>
+
 <template>
   <CRow>
     <CCol :md="6" class="mb-4">
@@ -40,13 +51,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-import * as Charts from './index.js'
-export default {
-  name: 'Charts',
-  components: {
-    ...Charts,
-  },
-}
-</script>
diff --git a/src/views/dashboard/Dashboard.vue b/src/views/dashboard/Dashboard.vue
index fc95f213..644979b9 100644
--- a/src/views/dashboard/Dashboard.vue
+++ b/src/views/dashboard/Dashboard.vue
@@ -1,3 +1,130 @@
+<script setup>
+import avatar1 from '@/assets/images/avatars/1.jpg'
+import avatar2 from '@/assets/images/avatars/2.jpg'
+import avatar3 from '@/assets/images/avatars/3.jpg'
+import avatar4 from '@/assets/images/avatars/4.jpg'
+import avatar5 from '@/assets/images/avatars/5.jpg'
+import avatar6 from '@/assets/images/avatars/6.jpg'
+import MainChart from './MainChart.vue'
+import WidgetsStatsA from './../widgets/WidgetsStatsTypeA.vue'
+import WidgetsStatsD from './../widgets/WidgetsStatsTypeD.vue'
+
+const progressGroupExample1 = [
+  { title: 'Monday', value1: 34, value2: 78 },
+  { title: 'Tuesday', value1: 56, value2: 94 },
+  { title: 'Wednesday', value1: 12, value2: 67 },
+  { title: 'Thursday', value1: 43, value2: 91 },
+  { title: 'Friday', value1: 22, value2: 73 },
+  { title: 'Saturday', value1: 53, value2: 82 },
+  { title: 'Sunday', value1: 9, value2: 69 },
+]
+const progressGroupExample2 = [
+  { title: 'Male', icon: 'cil-user', value: 53 },
+  { title: 'Female', icon: 'cil-user-female', value: 43 },
+]
+const progressGroupExample3 = [
+  {
+    title: 'Organic Search',
+    icon: 'cib-google',
+    percent: 56,
+    value: '191,235',
+  },
+  { title: 'Facebook', icon: 'cib-facebook', percent: 15, value: '51,223' },
+  { title: 'Twitter', icon: 'cib-twitter', percent: 11, value: '37,564' },
+  { title: 'LinkedIn', icon: 'cib-linkedin', percent: 8, value: '27,319' },
+]
+const tableExample = [
+  {
+    avatar: { src: avatar1, status: 'success' },
+    user: {
+      name: 'Yiorgos Avraamu',
+      new: true,
+      registered: 'Jan 1, 2023',
+    },
+    country: { name: 'USA', flag: 'cif-us' },
+    usage: {
+      value: 50,
+      period: 'Jun 11, 2023 - Jul 10, 2023',
+      color: 'success',
+    },
+    payment: { name: 'Mastercard', icon: 'cib-cc-mastercard' },
+    activity: '10 sec ago',
+  },
+  {
+    avatar: { src: avatar2, status: 'danger' },
+    user: {
+      name: 'Avram Tarasios',
+      new: false,
+      registered: 'Jan 1, 2023',
+    },
+    country: { name: 'Brazil', flag: 'cif-br' },
+    usage: {
+      value: 22,
+      period: 'Jun 11, 2023 - Jul 10, 2023',
+      color: 'info',
+    },
+    payment: { name: 'Visa', icon: 'cib-cc-visa' },
+    activity: '5 minutes ago',
+  },
+  {
+    avatar: { src: avatar3, status: 'warning' },
+    user: { name: 'Quintin Ed', new: true, registered: 'Jan 1, 2023' },
+    country: { name: 'India', flag: 'cif-in' },
+    usage: {
+      value: 74,
+      period: 'Jun 11, 2023 - Jul 10, 2023',
+      color: 'warning',
+    },
+    payment: { name: 'Stripe', icon: 'cib-cc-stripe' },
+    activity: '1 hour ago',
+  },
+  {
+    avatar: { src: avatar4, status: 'secondary' },
+    user: { name: 'Enéas Kwadwo', new: true, registered: 'Jan 1, 2023' },
+    country: { name: 'France', flag: 'cif-fr' },
+    usage: {
+      value: 98,
+      period: 'Jun 11, 2023 - Jul 10, 2023',
+      color: 'danger',
+    },
+    payment: { name: 'PayPal', icon: 'cib-cc-paypal' },
+    activity: 'Last month',
+  },
+  {
+    avatar: { src: avatar5, status: 'success' },
+    user: {
+      name: 'Agapetus Tadeáš',
+      new: true,
+      registered: 'Jan 1, 2023',
+    },
+    country: { name: 'Spain', flag: 'cif-es' },
+    usage: {
+      value: 22,
+      period: 'Jun 11, 2023 - Jul 10, 2023',
+      color: 'primary',
+    },
+    payment: { name: 'Google Wallet', icon: 'cib-cc-apple-pay' },
+    activity: 'Last week',
+  },
+  {
+    avatar: { src: avatar6, status: 'danger' },
+    user: {
+      name: 'Friderik Dávid',
+      new: true,
+      registered: 'Jan 1, 2023',
+    },
+    country: { name: 'Poland', flag: 'cif-pl' },
+    usage: {
+      value: 43,
+      period: 'Jun 11, 2023 - Jul 10, 2023',
+      color: 'success',
+    },
+    payment: { name: 'Amex', icon: 'cib-cc-amex' },
+    activity: 'Last week',
+  },
+]
+</script>
+
 <template>
   <div>
     <WidgetsStatsA class="mb-4" />
@@ -208,147 +335,3 @@
     </CRow>
   </div>
 </template>
-
-<script>
-import avatar1 from '@/assets/images/avatars/1.jpg'
-import avatar2 from '@/assets/images/avatars/2.jpg'
-import avatar3 from '@/assets/images/avatars/3.jpg'
-import avatar4 from '@/assets/images/avatars/4.jpg'
-import avatar5 from '@/assets/images/avatars/5.jpg'
-import avatar6 from '@/assets/images/avatars/6.jpg'
-import MainChart from './MainChart'
-import WidgetsStatsA from './../widgets/WidgetsStatsTypeA.vue'
-import WidgetsStatsD from './../widgets/WidgetsStatsTypeD.vue'
-
-export default {
-  name: 'Dashboard',
-  components: {
-    MainChart,
-    WidgetsStatsA,
-    WidgetsStatsD,
-  },
-  setup() {
-    const progressGroupExample1 = [
-      { title: 'Monday', value1: 34, value2: 78 },
-      { title: 'Tuesday', value1: 56, value2: 94 },
-      { title: 'Wednesday', value1: 12, value2: 67 },
-      { title: 'Thursday', value1: 43, value2: 91 },
-      { title: 'Friday', value1: 22, value2: 73 },
-      { title: 'Saturday', value1: 53, value2: 82 },
-      { title: 'Sunday', value1: 9, value2: 69 },
-    ]
-    const progressGroupExample2 = [
-      { title: 'Male', icon: 'cil-user', value: 53 },
-      { title: 'Female', icon: 'cil-user-female', value: 43 },
-    ]
-    const progressGroupExample3 = [
-      {
-        title: 'Organic Search',
-        icon: 'cib-google',
-        percent: 56,
-        value: '191,235',
-      },
-      { title: 'Facebook', icon: 'cib-facebook', percent: 15, value: '51,223' },
-      { title: 'Twitter', icon: 'cib-twitter', percent: 11, value: '37,564' },
-      { title: 'LinkedIn', icon: 'cib-linkedin', percent: 8, value: '27,319' },
-    ]
-    const tableExample = [
-      {
-        avatar: { src: avatar1, status: 'success' },
-        user: {
-          name: 'Yiorgos Avraamu',
-          new: true,
-          registered: 'Jan 1, 2023',
-        },
-        country: { name: 'USA', flag: 'cif-us' },
-        usage: {
-          value: 50,
-          period: 'Jun 11, 2023 - Jul 10, 2023',
-          color: 'success',
-        },
-        payment: { name: 'Mastercard', icon: 'cib-cc-mastercard' },
-        activity: '10 sec ago',
-      },
-      {
-        avatar: { src: avatar2, status: 'danger' },
-        user: {
-          name: 'Avram Tarasios',
-          new: false,
-          registered: 'Jan 1, 2023',
-        },
-        country: { name: 'Brazil', flag: 'cif-br' },
-        usage: {
-          value: 22,
-          period: 'Jun 11, 2023 - Jul 10, 2023',
-          color: 'info',
-        },
-        payment: { name: 'Visa', icon: 'cib-cc-visa' },
-        activity: '5 minutes ago',
-      },
-      {
-        avatar: { src: avatar3, status: 'warning' },
-        user: { name: 'Quintin Ed', new: true, registered: 'Jan 1, 2023' },
-        country: { name: 'India', flag: 'cif-in' },
-        usage: {
-          value: 74,
-          period: 'Jun 11, 2023 - Jul 10, 2023',
-          color: 'warning',
-        },
-        payment: { name: 'Stripe', icon: 'cib-cc-stripe' },
-        activity: '1 hour ago',
-      },
-      {
-        avatar: { src: avatar4, status: 'secondary' },
-        user: { name: 'Enéas Kwadwo', new: true, registered: 'Jan 1, 2023' },
-        country: { name: 'France', flag: 'cif-fr' },
-        usage: {
-          value: 98,
-          period: 'Jun 11, 2023 - Jul 10, 2023',
-          color: 'danger',
-        },
-        payment: { name: 'PayPal', icon: 'cib-cc-paypal' },
-        activity: 'Last month',
-      },
-      {
-        avatar: { src: avatar5, status: 'success' },
-        user: {
-          name: 'Agapetus Tadeáš',
-          new: true,
-          registered: 'Jan 1, 2023',
-        },
-        country: { name: 'Spain', flag: 'cif-es' },
-        usage: {
-          value: 22,
-          period: 'Jun 11, 2023 - Jul 10, 2023',
-          color: 'primary',
-        },
-        payment: { name: 'Google Wallet', icon: 'cib-cc-apple-pay' },
-        activity: 'Last week',
-      },
-      {
-        avatar: { src: avatar6, status: 'danger' },
-        user: {
-          name: 'Friderik Dávid',
-          new: true,
-          registered: 'Jan 1, 2023',
-        },
-        country: { name: 'Poland', flag: 'cif-pl' },
-        usage: {
-          value: 43,
-          period: 'Jun 11, 2023 - Jul 10, 2023',
-          color: 'success',
-        },
-        payment: { name: 'Amex', icon: 'cib-cc-amex' },
-        activity: 'Last week',
-      },
-    ]
-
-    return {
-      tableExample,
-      progressGroupExample1,
-      progressGroupExample2,
-      progressGroupExample3,
-    }
-  },
-}
-</script>
diff --git a/src/views/dashboard/MainChart.vue b/src/views/dashboard/MainChart.vue
index 6df1c977..acadd733 100644
--- a/src/views/dashboard/MainChart.vue
+++ b/src/views/dashboard/MainChart.vue
@@ -1,148 +1,128 @@
-<template>
-  <CChart type="line" :data="data" :options="options" ref="mainChartRef" />
-</template>
-
-<script>
+<script setup>
 import { onMounted, ref } from 'vue'
 import { CChart } from '@coreui/vue-chartjs'
 import { getStyle } from '@coreui/utils'
 
 const random = (min, max) => Math.floor(Math.random() * (max - min + 1) + min)
 
-export default {
-  name: 'MainChartExample',
-  components: {
-    CChart,
-  },
-  setup() {
-    const mainChartRef = ref()
-    const data = {
-      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-      datasets: [
-        {
-          label: 'My First dataset',
-          backgroundColor: `rgba(${getStyle('--cui-info-rgb')}, .1)`,
-          borderColor: getStyle('--cui-info'),
-          pointHoverBackgroundColor: getStyle('--cui-info'),
-          borderWidth: 2,
-          data: [
-            random(50, 200),
-            random(50, 200),
-            random(50, 200),
-            random(50, 200),
-            random(50, 200),
-            random(50, 200),
-            random(50, 200),
-          ],
-          fill: true,
-        },
-        {
-          label: 'My Second dataset',
-          backgroundColor: 'transparent',
-          borderColor: getStyle('--cui-success'),
-          pointHoverBackgroundColor: getStyle('--cui-success'),
-          borderWidth: 2,
-          data: [
-            random(50, 200),
-            random(50, 200),
-            random(50, 200),
-            random(50, 200),
-            random(50, 200),
-            random(50, 200),
-            random(50, 200),
-          ],
-        },
-        {
-          label: 'My Third dataset',
-          backgroundColor: 'transparent',
-          borderColor: getStyle('--cui-danger'),
-          pointHoverBackgroundColor: getStyle('--cui-danger'),
-          borderWidth: 1,
-          borderDash: [8, 5],
-          data: [65, 65, 65, 65, 65, 65, 65],
-        },
+const mainChartRef = ref()
+const data = {
+  labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+  datasets: [
+    {
+      label: 'My First dataset',
+      backgroundColor: `rgba(${getStyle('--cui-info-rgb')}, .1)`,
+      borderColor: getStyle('--cui-info'),
+      pointHoverBackgroundColor: getStyle('--cui-info'),
+      borderWidth: 2,
+      data: [
+        random(50, 200),
+        random(50, 200),
+        random(50, 200),
+        random(50, 200),
+        random(50, 200),
+        random(50, 200),
+        random(50, 200),
       ],
-    }
+      fill: true,
+    },
+    {
+      label: 'My Second dataset',
+      backgroundColor: 'transparent',
+      borderColor: getStyle('--cui-success'),
+      pointHoverBackgroundColor: getStyle('--cui-success'),
+      borderWidth: 2,
+      data: [
+        random(50, 200),
+        random(50, 200),
+        random(50, 200),
+        random(50, 200),
+        random(50, 200),
+        random(50, 200),
+        random(50, 200),
+      ],
+    },
+    {
+      label: 'My Third dataset',
+      backgroundColor: 'transparent',
+      borderColor: getStyle('--cui-danger'),
+      pointHoverBackgroundColor: getStyle('--cui-danger'),
+      borderWidth: 1,
+      borderDash: [8, 5],
+      data: [65, 65, 65, 65, 65, 65, 65],
+    },
+  ],
+}
 
-    const options = {
-      maintainAspectRatio: false,
-      plugins: {
-        legend: {
-          display: false,
-        },
+const options = {
+  maintainAspectRatio: false,
+  plugins: {
+    legend: {
+      display: false,
+    },
+  },
+  scales: {
+    x: {
+      grid: {
+        color: getStyle('--cui-border-color-translucent'),
+        drawOnChartArea: false,
       },
-      scales: {
-        x: {
-          grid: {
-            color: getStyle('--cui-border-color-translucent'),
-            drawOnChartArea: false,
-          },
-          ticks: {
-            color: getStyle('--cui-body-color'),
-          },
-        },
-        y: {
-          beginAtZero: true,
-          border: {
-            color: getStyle('--cui-border-color-translucent'),
-          },
-          grid: {
-            color: getStyle('--cui-border-color-translucent'),
-          },
-          max: 250,
-          ticks: {
-            color: getStyle('--cui-body-color'),
-            maxTicksLimit: 5,
-            stepSize: Math.ceil(250 / 5),
-          },
-        },
+      ticks: {
+        color: getStyle('--cui-body-color'),
       },
-      elements: {
-        line: {
-          tension: 0.4,
-        },
-        point: {
-          radius: 0,
-          hitRadius: 10,
-          hoverRadius: 4,
-          hoverBorderWidth: 3,
-        },
+    },
+    y: {
+      beginAtZero: true,
+      border: {
+        color: getStyle('--cui-border-color-translucent'),
       },
-    }
-
-    onMounted(() => {
-      document.documentElement.addEventListener('ColorSchemeChange', () => {
-        if (mainChartRef.value) {
-          mainChartRef.value.chart,
-            (options.scales.x.grid.borderColor = getStyle(
-              '--cui-border-color-translucent',
-            ))
-          mainChartRef.value.chart,
-            (options.scales.x.grid.color = getStyle(
-              '--cui-border-color-translucent',
-            ))
-          mainChartRef.value.chart,
-            (options.scales.x.ticks.color = getStyle('--cui-body-color'))
-          mainChartRef.value.chart,
-            (options.scales.y.grid.borderColor = getStyle(
-              '--cui-border-color-translucent',
-            ))
-          mainChartRef.value.chart,
-            (options.scales.y.grid.color = getStyle(
-              '--cui-border-color-translucent',
-            ))
-          mainChartRef.value.chart,
-            (options.scales.y.ticks.color = getStyle('--cui-body-color'))
-          mainChartRef.value.chart.update()
-        }
-      })
-    })
-
-    return {
-      data,
-      mainChartRef,
-      options,
-    }
+      grid: {
+        color: getStyle('--cui-border-color-translucent'),
+      },
+      max: 250,
+      ticks: {
+        color: getStyle('--cui-body-color'),
+        maxTicksLimit: 5,
+        stepSize: Math.ceil(250 / 5),
+      },
+    },
+  },
+  elements: {
+    line: {
+      tension: 0.4,
+    },
+    point: {
+      radius: 0,
+      hitRadius: 10,
+      hoverRadius: 4,
+      hoverBorderWidth: 3,
+    },
   },
 }
+
+onMounted(() => {
+  document.documentElement.addEventListener('ColorSchemeChange', () => {
+    if (mainChartRef.value) {
+      mainChartRef.value.chart.options.scales.x.grid.borderColor = getStyle(
+        '--cui-border-color-translucent',
+      )
+      mainChartRef.value.chart.options.scales.x.grid.color = getStyle(
+        '--cui-border-color-translucent',
+      )
+      mainChartRef.value.chart.options.scales.x.ticks.color = getStyle('--cui-body-color')
+      mainChartRef.value.chart.options.scales.y.grid.borderColor = getStyle(
+        '--cui-border-color-translucent',
+      )
+      mainChartRef.value.chart.options.scales.y.grid.color = getStyle(
+        '--cui-border-color-translucent',
+      )
+      mainChartRef.value.chart.options.scales.y.ticks.color = getStyle('--cui-body-color')
+      mainChartRef.value.chart.update()
+    }
+  })
+})
 </script>
+
+<template>
+  <CChart type="line" :data="data" :options="options" ref="mainChartRef" />
+</template>
diff --git a/src/views/forms/ChecksRadios.vue b/src/views/forms/ChecksRadios.vue
index b41d44ca..03dea2e6 100644
--- a/src/views/forms/ChecksRadios.vue
+++ b/src/views/forms/ChecksRadios.vue
@@ -1,6 +1,7 @@
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="forms/checks-radios.html" />
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Checkbox</strong>
@@ -396,9 +397,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-export default {
-  name: 'ChecksRadios',
-}
-</script>
diff --git a/src/views/forms/FloatingLabels.vue b/src/views/forms/FloatingLabels.vue
index 0ecc2ae9..8fbf36ee 100644
--- a/src/views/forms/FloatingLabels.vue
+++ b/src/views/forms/FloatingLabels.vue
@@ -1,6 +1,7 @@
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="forms/floating-labels.html" />
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Floating labels</strong>
@@ -170,9 +171,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-export default {
-  name: 'FloatingLabels',
-}
-</script>
diff --git a/src/views/forms/FormControl.vue b/src/views/forms/FormControl.vue
index c36e6d00..19273921 100644
--- a/src/views/forms/FormControl.vue
+++ b/src/views/forms/FormControl.vue
@@ -1,6 +1,7 @@
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="forms/form-control.html" />
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Form Control</strong>
@@ -242,9 +243,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-export default {
-  name: 'FormControl',
-}
-</script>
diff --git a/src/views/forms/InputGroup.vue b/src/views/forms/InputGroup.vue
index 7322fc69..efd3447e 100644
--- a/src/views/forms/InputGroup.vue
+++ b/src/views/forms/InputGroup.vue
@@ -1,6 +1,7 @@
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="forms/input-group.html" />
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Input group</strong> <small>Basic example</small>
@@ -400,7 +401,7 @@
         <CCardBody>
           <DocsExample href="forms/input-group.html#custom-select">
             <CInputGroup class="mb-3">
-              <CInputGroupText component="label" for="inputGroupSelect01">
+              <CInputGroupText as="label" for="inputGroupSelect01">
                 Options
               </CInputGroupText>
               <CFormSelect id="inputGroupSelect01">
@@ -417,7 +418,7 @@
                 <option value="2">Two</option>
                 <option value="3">Three</option>
               </CFormSelect>
-              <CInputGroupText component="label" for="inputGroupSelect02">
+              <CInputGroupText as="label" for="inputGroupSelect02">
                 Options
               </CInputGroupText>
             </CInputGroup>
@@ -461,14 +462,14 @@
         <CCardBody>
           <DocsExample href="forms/input-group.html#custom-file-input">
             <CInputGroup class="mb-3">
-              <CInputGroupText component="label" for="inputGroupFile01">
+              <CInputGroupText as="label" for="inputGroupFile01">
                 Upload
               </CInputGroupText>
               <CFormInput id="inputGroupFile01" type="file" />
             </CInputGroup>
             <CInputGroup class="mb-3">
               <CFormInput id="inputGroupFile02" type="file" />
-              <CInputGroupText component="label" for="inputGroupFile02">
+              <CInputGroupText as="label" for="inputGroupFile02">
                 Upload
               </CInputGroupText>
             </CInputGroup>
@@ -510,9 +511,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-export default {
-  name: 'InputGroup',
-}
-</script>
diff --git a/src/views/forms/Layout.vue b/src/views/forms/Layout.vue
index aae8cc4f..8d304416 100644
--- a/src/views/forms/Layout.vue
+++ b/src/views/forms/Layout.vue
@@ -1,6 +1,7 @@
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="forms/layout.html" />
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Layout</strong> <small>Form grid</small>
@@ -450,9 +451,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-export default {
-  name: 'Layout',
-}
-</script>
diff --git a/src/views/forms/Range.vue b/src/views/forms/Range.vue
index 58d6b90b..3ac97c2a 100644
--- a/src/views/forms/Range.vue
+++ b/src/views/forms/Range.vue
@@ -1,6 +1,7 @@
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="forms/range.html" />
       <CCard class="mb-4">
         <CCardHeader> <strong>Vue Range</strong> <small></small> </CCardHeader>
         <CCardBody>
@@ -47,7 +48,7 @@
           </p>
           <DocsExample href="forms/range.html#min-and-max">
             <CFormLabel for="customRange2">Example range</CFormLabel>
-            <CFormRange id="customRange2" :min="0" :max="5" value="3" />
+            <CFormRange id="customRange2" :min="0" :max="5" :value="3" />
           </DocsExample>
         </CCardBody>
       </CCard>
@@ -71,7 +72,7 @@
               :min="0"
               :max="5"
               :step="0.5"
-              value="3"
+              :value="3"
             />
           </DocsExample>
         </CCardBody>
@@ -79,9 +80,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-export default {
-  name: 'Range',
-}
-</script>
diff --git a/src/views/forms/Select.vue b/src/views/forms/Select.vue
index 96a75f78..f182c410 100644
--- a/src/views/forms/Select.vue
+++ b/src/views/forms/Select.vue
@@ -1,6 +1,7 @@
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="forms/select.html" />
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Select</strong> <small>Default</small>
@@ -105,10 +106,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-export default {
-  // eslint-disable-next-line
-  name: 'Select',
-}
-</script>
diff --git a/src/views/forms/Validation.vue b/src/views/forms/Validation.vue
index 905325ed..60b727cc 100644
--- a/src/views/forms/Validation.vue
+++ b/src/views/forms/Validation.vue
@@ -1,25 +1,59 @@
+<script setup>
+import { ref } from 'vue'
+const validatedCustom01 = ref(false)
+const validatedDefault01 = ref(false)
+const validatedTooltip01 = ref(false)
+
+const handleSubmitCustom01 = (event) => {
+  const form = event.currentTarget
+  if (form.checkValidity() === false) {
+    event.preventDefault()
+    event.stopPropagation()
+  }
+
+  validatedCustom01.value = true
+}
+
+const handleSubmitDefault01 = (event) => {
+  const form = event.currentTarget
+  if (form.checkValidity() === false) {
+    event.preventDefault()
+    event.stopPropagation()
+  }
+
+  validatedDefault01.value = true
+}
+
+const handleSubmitTooltip01 = (event) => {
+  const form = event.currentTarget
+  if (form.checkValidity() === false) {
+    event.preventDefault()
+    event.stopPropagation()
+  }
+  
+  validatedTooltip01.value = true
+}
+</script>
+
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="forms/validation.html" />
       <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Validation</strong> <small>Custom styles</small>
-        </CCardHeader>
+        <CCardHeader> <strong>Validation</strong> <small>Custom styles</small> </CCardHeader>
         <CCardBody>
           <p class="text-body-secondary small">
-            For custom CoreUI form validation messages, you&#39;ll need to add
-            the
-            <code>novalidate</code> boolean property to your
-            <code>&lt;CForm&gt;</code>. This disables the browser default
-            feedback tooltips, but still provides access to the form validation
-            APIs in JavaScript. Try to submit the form below; our JavaScript
-            will intercept the submit button and relay feedback to you. When
-            attempting to submit, you&#39;ll see the <code>:invalid</code> and
-            <code>:valid</code> styles applied to your form controls.
+            For custom CoreUI form validation messages, you&#39;ll need to add the
+            <code>novalidate</code> boolean property to your <code>&lt;CForm&gt;</code>. This
+            disables the browser default feedback tooltips, but still provides access to the form
+            validation APIs in JavaScript. Try to submit the form below; our JavaScript will
+            intercept the submit button and relay feedback to you. When attempting to submit,
+            you&#39;ll see the <code>:invalid</code> and <code>:valid</code> styles applied to your
+            form controls.
           </p>
           <p class="text-body-secondary small">
-            Custom feedback styles apply custom colors, borders, focus styles,
-            and background icons to better communicate feedback.
+            Custom feedback styles apply custom colors, borders, focus styles, and background icons
+            to better communicate feedback.
           </p>
           <DocsExample href="forms/validation.html">
             <CForm
@@ -48,17 +82,13 @@
                     aria-describedby="inputGroupPrepend"
                     required
                   />
-                  <CFormFeedback invalid>
-                    Please choose a username.
-                  </CFormFeedback>
+                  <CFormFeedback invalid> Please choose a username. </CFormFeedback>
                 </CInputGroup>
               </CCol>
               <CCol :md="6">
                 <CFormLabel for="validationCustom03">City</CFormLabel>
                 <CFormInput id="validationCustom03" required />
-                <CFormFeedback invalid>
-                  Please provide a valid city.
-                </CFormFeedback>
+                <CFormFeedback invalid> Please provide a valid city. </CFormFeedback>
               </CCol>
               <CCol :md="3">
                 <CFormLabel for="validationCustom04">City</CFormLabel>
@@ -66,16 +96,12 @@
                   <option disabled>Choose...</option>
                   <option>...</option>
                 </CFormSelect>
-                <CFormFeedback invalid>
-                  Please provide a valid city.
-                </CFormFeedback>
+                <CFormFeedback invalid> Please provide a valid city. </CFormFeedback>
               </CCol>
               <CCol :md="3">
                 <CFormLabel for="validationCustom05">City</CFormLabel>
                 <CFormInput id="validationCustom05" required />
-                <CFormFeedback invalid>
-                  Please provide a valid zip.
-                </CFormFeedback>
+                <CFormFeedback invalid> Please provide a valid zip. </CFormFeedback>
               </CCol>
               <CCol :xs="12">
                 <CFormCheck
@@ -84,9 +110,7 @@
                   label="Agree to terms and conditions"
                   required
                 />
-                <CFormFeedback invalid>
-                  You must agree before submitting.
-                </CFormFeedback>
+                <CFormFeedback invalid> You must agree before submitting. </CFormFeedback>
               </CCol>
               <CCol :xs="12">
                 <CButton color="primary" type="submit">Submit form</CButton>
@@ -98,20 +122,17 @@
     </CCol>
     <CCol :xs="12">
       <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Validation</strong> <small>Browser defaults</small>
-        </CCardHeader>
+        <CCardHeader> <strong>Validation</strong> <small>Browser defaults</small> </CCardHeader>
         <CCardBody>
           <p class="text-body-secondary small">
-            Not interested in custom validation feedback messages or writing
-            JavaScript to change form behaviors? All good, you can use the
-            browser defaults. Try submitting the form below. Depending on your
-            browser and OS, you&#39;ll see a slightly different style of
+            Not interested in custom validation feedback messages or writing JavaScript to change
+            form behaviors? All good, you can use the browser defaults. Try submitting the form
+            below. Depending on your browser and OS, you&#39;ll see a slightly different style of
             feedback.
           </p>
           <p class="text-body-secondary small">
-            While these feedback styles cannot be styled with CSS, you can still
-            customize the feedback text through JavaScript.
+            While these feedback styles cannot be styled with CSS, you can still customize the
+            feedback text through JavaScript.
           </p>
           <DocsExample href="forms/validation.html#browser-defaults">
             <CForm
@@ -130,9 +151,7 @@
                 <CFormFeedback valid> Looks good! </CFormFeedback>
               </CCol>
               <CCol :md="4">
-                <CFormLabel for="validationDefaultUsername"
-                  >Username</CFormLabel
-                >
+                <CFormLabel for="validationDefaultUsername">Username</CFormLabel>
                 <CInputGroup class="has-validation">
                   <CInputGroupText id="inputGroupPrepend02">@</CInputGroupText>
                   <CFormInput
@@ -141,17 +160,13 @@
                     aria-describedby="inputGroupPrepend02"
                     required
                   />
-                  <CFormFeedback invalid>
-                    Please choose a username.
-                  </CFormFeedback>
+                  <CFormFeedback invalid> Please choose a username. </CFormFeedback>
                 </CInputGroup>
               </CCol>
               <CCol :md="6">
                 <CFormLabel for="validationDefault03">City</CFormLabel>
                 <CFormInput id="validationDefault03" required />
-                <CFormFeedback invalid>
-                  Please provide a valid city.
-                </CFormFeedback>
+                <CFormFeedback invalid> Please provide a valid city. </CFormFeedback>
               </CCol>
               <CCol :md="3">
                 <CFormLabel for="validationDefault04">City</CFormLabel>
@@ -159,16 +174,12 @@
                   <option disabled>Choose...</option>
                   <option>...</option>
                 </CFormSelect>
-                <CFormFeedback invalid>
-                  Please provide a valid city.
-                </CFormFeedback>
+                <CFormFeedback invalid> Please provide a valid city. </CFormFeedback>
               </CCol>
               <CCol :md="3">
                 <CFormLabel for="validationDefault05">City</CFormLabel>
                 <CFormInput id="validationDefault05" required />
-                <CFormFeedback invalid>
-                  Please provide a valid zip.
-                </CFormFeedback>
+                <CFormFeedback invalid> Please provide a valid zip. </CFormFeedback>
               </CCol>
               <CCol :xs="12">
                 <CFormCheck
@@ -177,9 +188,7 @@
                   label="Agree to terms and conditions"
                   required
                 />
-                <CFormFeedback invalid>
-                  You must agree before submitting.
-                </CFormFeedback>
+                <CFormFeedback invalid> You must agree before submitting. </CFormFeedback>
               </CCol>
               <CCol :xs="12">
                 <CButton color="primary" type="submit">Submit form</CButton>
@@ -191,48 +200,33 @@
     </CCol>
     <CCol :xs="12">
       <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Validation</strong> <small>Server side</small>
-        </CCardHeader>
+        <CCardHeader> <strong>Validation</strong> <small>Server side</small> </CCardHeader>
         <CCardBody>
           <p class="text-body-secondary small">
-            We recommend using client-side validation, but in case you require
-            server-side validation, you can indicate invalid and valid form
-            fields with <code>invalid</code> and <code>valid</code> boolean
-            properties.
+            We recommend using client-side validation, but in case you require server-side
+            validation, you can indicate invalid and valid form fields with <code>invalid</code> and
+            <code>valid</code> boolean properties.
           </p>
           <p class="text-body-secondary small">
-            For invalid fields, ensure that the invalid feedback/error message
-            is associated with the relevant form field using
-            <code>aria-describedby</code> (noting that this attribute allows
-            more than one <code>id</code> to be referenced, in case the field
-            already points to additional form text).
+            For invalid fields, ensure that the invalid feedback/error message is associated with
+            the relevant form field using
+            <code>aria-describedby</code> (noting that this attribute allows more than one
+            <code>id</code> to be referenced, in case the field already points to additional form
+            text).
           </p>
           <DocsExample href="forms/validation.html#server-side">
             <CForm class="row g-3 needs-validation">
-              <CCol ::md="4">
+              <CCol :md="4">
                 <CFormLabel for="validationServer01">Email</CFormLabel>
-                <CFormInput
-                  id="validationServer01"
-                  type="text"
-                  value="Mark"
-                  valid
-                  required
-                />
+                <CFormInput id="validationServer01" type="text" value="Mark" valid required />
                 <CFormFeedback valid>Looks good!</CFormFeedback>
               </CCol>
-              <CCol ::md="4">
+              <CCol :md="4">
                 <CFormLabel for="validationServer02">Email</CFormLabel>
-                <CFormInput
-                  id="validationServer02"
-                  type="text"
-                  value="Otto"
-                  valid
-                  required
-                />
+                <CFormInput id="validationServer02" type="text" value="Otto" valid required />
                 <CFormFeedback valid>Looks good!</CFormFeedback>
               </CCol>
-              <CCol ::md="4">
+              <CCol :md="4">
                 <CFormLabel for="validationServerUsername">Username</CFormLabel>
                 <CInputGroup class="has-validation">
                   <CInputGroupText id="inputGroupPrepend03">@</CInputGroupText>
@@ -244,22 +238,13 @@
                     invalid
                     required
                   />
-                  <CFormFeedback invalid
-                    >Please choose a username.</CFormFeedback
-                  >
+                  <CFormFeedback invalid>Please choose a username.</CFormFeedback>
                 </CInputGroup>
               </CCol>
               <CCol :md="6">
                 <CFormLabel for="validationServer03">City</CFormLabel>
-                <CFormInput
-                  id="validationServer03"
-                  type="text"
-                  invalid
-                  required
-                />
-                <CFormFeedback invalid
-                  >Please provide a valid city.</CFormFeedback
-                >
+                <CFormInput id="validationServer03" type="text" invalid required />
+                <CFormFeedback invalid>Please provide a valid city.</CFormFeedback>
               </CCol>
               <CCol :md="3">
                 <CFormLabel for="validationServer04">City</CFormLabel>
@@ -267,21 +252,12 @@
                   <option disabled>Choose...</option>
                   <option>...</option>
                 </CFormSelect>
-                <CFormFeedback invalid
-                  >Please provide a valid city.</CFormFeedback
-                >
+                <CFormFeedback invalid>Please provide a valid city.</CFormFeedback>
               </CCol>
               <CCol :md="3">
                 <CFormLabel for="validationServer05">City</CFormLabel>
-                <CFormInput
-                  id="validationServer05"
-                  type="text"
-                  invalid
-                  required
-                />
-                <CFormFeedback invalid
-                  >Please provide a valid zip.</CFormFeedback
-                >
+                <CFormInput id="validationServer05" type="text" invalid required />
+                <CFormFeedback invalid>Please provide a valid zip.</CFormFeedback>
               </CCol>
               <CCol :xs="12">
                 <CFormCheck
@@ -291,9 +267,7 @@
                   invalid
                   required
                 />
-                <CFormFeedback invalid
-                  >You must agree before submitting.</CFormFeedback
-                >
+                <CFormFeedback invalid>You must agree before submitting.</CFormFeedback>
               </CCol>
               <CCol :xs="12">
                 <CButton color="primary" type="submit"> Submit form </CButton>
@@ -305,13 +279,10 @@
     </CCol>
     <CCol :xs="12">
       <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Validation</strong> <small>Supported elements</small>
-        </CCardHeader>
+        <CCardHeader> <strong>Validation</strong> <small>Supported elements</small> </CCardHeader>
         <CCardBody>
           <p class="text-body-secondary small">
-            Validation styles are available for the following form controls and
-            components:
+            Validation styles are available for the following form controls and components:
           </p>
           <ul>
             <li><code>&lt;CFormInput&gt;</code>s</li>
@@ -321,18 +292,14 @@
           <DocsExample href="forms/validation.html#supported-elements">
             <CForm :validated="true">
               <div class="mb-3">
-                <CFormLabel for="validationTextarea" class="form-label"
-                  >Textarea</CFormLabel
-                >
+                <CFormLabel for="validationTextarea" class="form-label">Textarea</CFormLabel>
                 <CFormTextarea
                   id="validationTextarea"
                   placeholder="Required example textarea"
                   invalid
                   required
                 ></CFormTextarea>
-                <CFormFeedback invalid>
-                  Please enter a message in the textarea.
-                </CFormFeedback>
+                <CFormFeedback invalid> Please enter a message in the textarea. </CFormFeedback>
               </div>
               <CFormCheck
                 id="validationFormCheck1"
@@ -340,9 +307,7 @@
                 label="Check this checkbox"
                 required
               />
-              <CFormFeedback invalid
-                >Example invalid feedback text</CFormFeedback
-              >
+              <CFormFeedback invalid>Example invalid feedback text</CFormFeedback>
               <CFormCheck
                 id="validationFormCheck2"
                 type="radio"
@@ -358,9 +323,7 @@
                 label="Or toggle this other radio"
                 required
               />
-              <CFormFeedback invalid
-                >More example invalid feedback text</CFormFeedback
-              >
+              <CFormFeedback invalid>More example invalid feedback text</CFormFeedback>
               <div class="mb-3">
                 <CFormSelect required aria-label="select example">
                   <option>Open this select menu</option>
@@ -368,9 +331,7 @@
                   <option value="2">Two</option>
                   <option value="3">Three</option>
                 </CFormSelect>
-                <CFormFeedback invalid
-                  >Example invalid select feedback</CFormFeedback
-                >
+                <CFormFeedback invalid>Example invalid select feedback</CFormFeedback>
               </div>
               <div class="mb-3">
                 <CFormInput
@@ -379,14 +340,10 @@
                   aria-label="file example"
                   required
                 />
-                <CFormFeedback invalid
-                  >Example invalid form file feedback</CFormFeedback
-                >
+                <CFormFeedback invalid>Example invalid form file feedback</CFormFeedback>
               </div>
               <div class="mb-3">
-                <CButton type="submit" color="primary" disabled
-                  >Submit form</CButton
-                >
+                <CButton type="submit" color="primary" disabled>Submit form</CButton>
               </div>
             </CForm>
           </DocsExample>
@@ -395,17 +352,13 @@
     </CCol>
     <CCol :xs="12">
       <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Validation</strong> <small>Tooltips</small>
-        </CCardHeader>
+        <CCardHeader> <strong>Validation</strong> <small>Tooltips</small> </CCardHeader>
         <CCardBody>
           <p class="text-body-secondary small">
-            If your form layout allows it, you can swap the text for the tooltip
-            to display validation feedback in a styled tooltip. Be sure to have
-            a parent with
-            <code>position: relative</code> on it for tooltip positioning. In
-            the example below, our column classes have this already, but your
-            project may require an alternative setup.
+            If your form layout allows it, you can swap the text for the tooltip to display
+            validation feedback in a styled tooltip. Be sure to have a parent with
+            <code>position: relative</code> on it for tooltip positioning. In the example below, our
+            column classes have this already, but your project may require an alternative setup.
           </p>
           <DocsExample href="forms/validation.html#tooltips">
             <CForm
@@ -425,9 +378,7 @@
                 <CFormFeedback tooltip valid> Looks good! </CFormFeedback>
               </CCol>
               <CCol :md="4" class="position-relative">
-                <CFormLabel for="validationTooltipUsername"
-                  >Username</CFormLabel
-                >
+                <CFormLabel for="validationTooltipUsername">Username</CFormLabel>
                 <CInputGroup class="has-validation">
                   <CInputGroupText id="inputGroupPrepend">@</CInputGroupText>
                   <CFormInput
@@ -436,17 +387,13 @@
                     aria-describedby="inputGroupPrepend"
                     required
                   />
-                  <CFormFeedback tooltip invalid>
-                    Please choose a username.
-                  </CFormFeedback>
+                  <CFormFeedback tooltip invalid> Please choose a username. </CFormFeedback>
                 </CInputGroup>
               </CCol>
               <CCol :md="6" class="position-relative">
                 <CFormLabel for="validationTooltip03">City</CFormLabel>
                 <CFormInput id="validationTooltip03" required />
-                <CFormFeedback tooltip invalid>
-                  Please provide a valid city.
-                </CFormFeedback>
+                <CFormFeedback tooltip invalid> Please provide a valid city. </CFormFeedback>
               </CCol>
               <CCol :md="3" class="position-relative">
                 <CFormLabel for="validationTooltip04">City</CFormLabel>
@@ -454,16 +401,12 @@
                   <option disabled value="">Choose...</option>
                   <option>...</option>
                 </CFormSelect>
-                <CFormFeedback tooltip invalid>
-                  Please provide a valid city.
-                </CFormFeedback>
+                <CFormFeedback tooltip invalid> Please provide a valid city. </CFormFeedback>
               </CCol>
               <CCol :md="3" class="position-relative">
                 <CFormLabel for="validationTooltip05">City</CFormLabel>
                 <CFormInput id="validationTooltip05" required />
-                <CFormFeedback tooltip invalid>
-                  Please provide a valid zip.
-                </CFormFeedback>
+                <CFormFeedback tooltip invalid> Please provide a valid zip. </CFormFeedback>
               </CCol>
               <CCol :xs="12" class="position-relative">
                 <CButton color="primary" type="submit">Submit form</CButton>
@@ -475,42 +418,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-export default {
-  name: 'Validation',
-  data: () => {
-    return {
-      validatedCustom01: null,
-      validatedDefault01: null,
-      validatedTooltip01: null,
-    }
-  },
-  methods: {
-    handleSubmitCustom01(event) {
-      const form = event.currentTarget
-      if (form.checkValidity() === false) {
-        event.preventDefault()
-        event.stopPropagation()
-      }
-      this.validatedCustom01 = true
-    },
-    handleSubmitDefault01(event) {
-      const form = event.currentTarget
-      if (form.checkValidity() === false) {
-        event.preventDefault()
-        event.stopPropagation()
-      }
-      this.validatedDefault01 = true
-    },
-    handleSubmitTooltip01(event) {
-      const form = event.currentTarget
-      if (form.checkValidity() === false) {
-        event.preventDefault()
-        event.stopPropagation()
-      }
-      this.validatedTooltip01 = true
-    },
-  },
-}
-</script>
diff --git a/src/views/icons/Brands.vue b/src/views/icons/Brands.vue
index df35ed2a..99702483 100644
--- a/src/views/icons/Brands.vue
+++ b/src/views/icons/Brands.vue
@@ -1,36 +1,24 @@
-<template>
-  <CRow>
-    <CCol>
-      <CCard>
-        <CCardHeader>CoreUI Icons - Brand</CCardHeader>
-        <CCardBody>
-          <CRow class="text-center">
-            <template v-for="(icon, iconName) in icons" :key="iconName">
-              <CCol class="mb-5" :xs="3" :sm="2">
-                <CIcon :content="icon" size="xxl" />
-                <div>{{ toKebabCase(iconName) }}</div>
-              </CCol>
-            </template>
-          </CRow>
-        </CCardBody>
-      </CCard>
-    </CCol>
-  </CRow>
-</template>
-
-<script>
+<script setup>
 import { brandSet } from '@coreui/icons'
-export default {
-  name: 'CoreUIIcons',
-  setup() {
-    const toKebabCase = (str) =>
-      str.replace(/([a-z])([A-Z0-9])/g, '$1-$2').toLowerCase()
-    const icons = brandSet
+import DocsIcons from '../../components/DocsIcons.vue';
 
-    return {
-      icons,
-      toKebabCase,
-    }
-  },
-}
+const toKebabCase = (str) => str.replace(/([a-z])([A-Z0-9])/g, '$1-$2').toLowerCase()
+const icons = brandSet
 </script>
+
+<template>
+  <DocsIcons />
+  <CCard>
+    <CCardHeader>CoreUI Icons - Brand</CCardHeader>
+    <CCardBody>
+      <CRow class="text-center">
+        <template v-for="(icon, iconName) in icons" :key="iconName">
+          <CCol class="mb-5" :xs="3" :sm="2">
+            <CIcon :content="icon" size="xxl" />
+            <div>{{ toKebabCase(iconName) }}</div>
+          </CCol>
+        </template>
+      </CRow>
+    </CCardBody>
+  </CCard>
+</template>
diff --git a/src/views/icons/CoreUIIcons.vue b/src/views/icons/CoreUIIcons.vue
index db217630..1d0de1cd 100644
--- a/src/views/icons/CoreUIIcons.vue
+++ b/src/views/icons/CoreUIIcons.vue
@@ -1,36 +1,23 @@
-<template>
-  <CRow>
-    <CCol>
-      <CCard>
-        <CCardHeader>CoreUI Icons Free</CCardHeader>
-        <CCardBody>
-          <CRow class="text-center">
-            <template v-for="(icon, iconName) in icons" :key="iconName">
-              <CCol class="mb-5" :xs="3" :sm="2">
-                <CIcon :content="icon" size="xxl" />
-                <div>{{ toKebabCase(iconName) }}</div>
-              </CCol>
-            </template>
-          </CRow>
-        </CCardBody>
-      </CCard>
-    </CCol>
-  </CRow>
-</template>
-
-<script>
+<script setup>
 import { freeSet } from '@coreui/icons'
-export default {
-  name: 'CoreUIIcons',
-  setup() {
-    const toKebabCase = (str) =>
-      str.replace(/([a-z])([A-Z0-9])/g, '$1-$2').toLowerCase()
-    const icons = freeSet
 
-    return {
-      icons,
-      toKebabCase,
-    }
-  },
-}
+const toKebabCase = (str) => str.replace(/([a-z])([A-Z0-9])/g, '$1-$2').toLowerCase()
+const icons = freeSet
 </script>
+
+<template>
+  <DocsIcons />
+  <CCard>
+    <CCardHeader>CoreUI Icons Free</CCardHeader>
+    <CCardBody>
+      <CRow class="text-center">
+        <template v-for="(icon, iconName) in icons" :key="iconName">
+          <CCol class="mb-5" :xs="3" :sm="2">
+            <CIcon :content="icon" size="xxl" />
+            <div>{{ toKebabCase(iconName) }}</div>
+          </CCol>
+        </template>
+      </CRow>
+    </CCardBody>
+  </CCard>
+</template>
diff --git a/src/views/icons/Flags.vue b/src/views/icons/Flags.vue
index eff0320f..a6004b0b 100644
--- a/src/views/icons/Flags.vue
+++ b/src/views/icons/Flags.vue
@@ -1,36 +1,23 @@
-<template>
-  <CRow>
-    <CCol>
-      <CCard>
-        <CCardHeader>CoreUI Icons - Flag</CCardHeader>
-        <CCardBody>
-          <CRow class="text-center">
-            <template v-for="(icon, iconName) in icons" :key="iconName">
-              <CCol class="mb-5" :xs="3" :sm="2">
-                <CIcon :content="icon" size="xxl" />
-                <div>{{ toKebabCase(iconName) }}</div>
-              </CCol>
-            </template>
-          </CRow>
-        </CCardBody>
-      </CCard>
-    </CCol>
-  </CRow>
-</template>
-
-<script>
+<script setup>
 import { flagSet } from '@coreui/icons'
-export default {
-  name: 'CoreUIIcons',
-  setup() {
-    const toKebabCase = (str) =>
-      str.replace(/([a-z])([A-Z0-9])/g, '$1-$2').toLowerCase()
-    const icons = flagSet
 
-    return {
-      icons,
-      toKebabCase,
-    }
-  },
-}
+const toKebabCase = (str) => str.replace(/([a-z])([A-Z0-9])/g, '$1-$2').toLowerCase()
+const icons = flagSet
 </script>
+
+<template>
+  <DocsIcons />
+  <CCard>
+    <CCardHeader>CoreUI Icons - Flag</CCardHeader>
+    <CCardBody>
+      <CRow class="text-center">
+        <template v-for="(icon, iconName) in icons" :key="iconName">
+          <CCol class="mb-5" :xs="3" :sm="2">
+            <CIcon :content="icon" size="xxl" />
+            <div>{{ toKebabCase(iconName) }}</div>
+          </CCol>
+        </template>
+      </CRow>
+    </CCardBody>
+  </CCard>
+</template>
diff --git a/src/views/notifications/Alerts.vue b/src/views/notifications/Alerts.vue
index e6d12929..1e1a634e 100644
--- a/src/views/notifications/Alerts.vue
+++ b/src/views/notifications/Alerts.vue
@@ -1,6 +1,13 @@
+<script setup>
+const alert = () => {
+  console.log('👋 Well, hi there! Thanks for dismissing me.')
+}
+</script>
+
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="components/alert.html" />
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Alert</strong>
@@ -133,7 +140,7 @@
             <code>dismissible</code> prop.
           </p>
           <DocsExample href="components/alert.html#dismissing">
-            <CAlert color="warning" dismissible @dismiss="alert">
+            <CAlert color="warning" dismissible @close="alert()">
               <strong>Go right ahead</strong> and click that dimiss over there
               on the right.
             </CAlert>
@@ -143,14 +150,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-export default {
-  name: 'Alerts',
-  methods: {
-    alert: function () {
-      alert('👋 Well, hi there! Thanks for dismissing me.')
-    },
-  },
-}
-</script>
diff --git a/src/views/notifications/Badges.vue b/src/views/notifications/Badges.vue
index d50b4e65..28859ffc 100644
--- a/src/views/notifications/Badges.vue
+++ b/src/views/notifications/Badges.vue
@@ -1,5 +1,8 @@
 <template>
   <CRow>
+    <CCol :xs="12">
+      <DocsComponents href="components/badge.html" />
+    </CCol>
     <CCol :lg="6">
       <CCard class="mb-4">
         <CCardHeader>
@@ -54,11 +57,11 @@
             the presentation of a badge.
           </p>
           <DocsExample href="components/badge.html#contextual-variations">
-            <CBadge color="primary">primary</CBadge>
-            <CBadge color="success">success</CBadge>
-            <CBadge color="danger">danger</CBadge>
-            <CBadge color="warning">warning</CBadge>
-            <CBadge color="info">info</CBadge>
+            <CBadge color="primary-gradient">primary</CBadge>
+            <CBadge color="success-gradient">success</CBadge>
+            <CBadge color="danger-gradient">danger</CBadge>
+            <CBadge color="warning-gradient">warning</CBadge>
+            <CBadge color="info-gradient">info</CBadge>
             <CBadge color="light">light</CBadge>
             <CBadge color="dark">dark</CBadge>
           </DocsExample>
@@ -74,11 +77,19 @@
             badges rounded.
           </p>
           <DocsExample href="components/badge.html#pill-badges">
-            <CBadge color="primary" shape="rounded-pill"> primary </CBadge>
-            <CBadge color="success" shape="rounded-pill"> success </CBadge>
-            <CBadge color="danger" shape="rounded-pill"> danger </CBadge>
-            <CBadge color="warning" shape="rounded-pill"> warning </CBadge>
-            <CBadge color="info" shape="rounded-pill"> info </CBadge>
+            <CBadge color="primary-gradient" shape="rounded-pill">
+              primary
+            </CBadge>
+            <CBadge color="success-gradient" shape="rounded-pill">
+              success
+            </CBadge>
+            <CBadge color="danger-gradient" shape="rounded-pill">
+              danger
+            </CBadge>
+            <CBadge color="warning-gradient" shape="rounded-pill">
+              warning
+            </CBadge>
+            <CBadge color="info-gradient" shape="rounded-pill"> info </CBadge>
             <CBadge color="light" shape="rounded-pill"> light </CBadge>
             <CBadge color="dark" shape="rounded-pill"> dark </CBadge>
           </DocsExample>
@@ -87,9 +98,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-export default {
-  name: 'Badges',
-}
-</script>
diff --git a/src/views/notifications/Modals.vue b/src/views/notifications/Modals.vue
index acc0e57f..d1fb745a 100644
--- a/src/views/notifications/Modals.vue
+++ b/src/views/notifications/Modals.vue
@@ -1,6 +1,28 @@
+<script setup>
+import { ref } from 'vue'
+
+const visibleLiveDemo = ref(false)
+const visibleStaticBackdropDemo = ref(false)
+const visibleScrollingLongContentDemo = ref(false)
+const visibleScrollableDemo = ref(false)
+const visibleVerticallyCenteredDemo = ref(false)
+const visibleVerticallyCenteredScrollableDemo = ref(false)
+const tooltipsAndPopoversDemo= ref(false)
+const xlDemo = ref(false)
+const lgDemo = ref(false)
+const smDemo = ref(false)
+const fullscreenDemo = ref(false)
+const fullscreenSmDemo = ref(false)
+const fullscreenMdDemo = ref(false)
+const fullscreenLgDemo = ref(false)
+const fullscreenXlDemo = ref(false)
+const fullscreenXxlDemo = ref(false)
+</script>
+
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="components/modal.html" />
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Modals</strong>
@@ -8,11 +30,10 @@
         <CCardBody>
           <p class="text-body-secondary small">
             Below is a static modal example (meaning its
-            <code>position</code> and <code>display</code> have been
-            overridden). Included are the modal header, modal body (required for
-            <code>padding</code>), and modal footer (optional). We ask that you
-            include modal headers with dismiss actions whenever possible, or
-            provide another explicit dismiss action.
+            <code>position</code> and <code>display</code> have been overridden). Included are the
+            modal header, modal body (required for <code>padding</code>), and modal footer
+            (optional). We ask that you include modal headers with dismiss actions whenever
+            possible, or provide another explicit dismiss action.
           </p>
           <DocsExample href="components/modal.html#modal-components">
             <CModal
@@ -36,13 +57,11 @@
     </CCol>
     <CCol :xs="12">
       <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Modal</strong> <small>Live demo</small>
-        </CCardHeader>
+        <CCardHeader> <strong>Vue Modal</strong> <small>Live demo</small> </CCardHeader>
         <CCardBody>
           <p class="text-body-secondary small">
-            Toggle a working modal demo by clicking the button below. It will
-            slide down and fade in from the top of the page.
+            Toggle a working modal demo by clicking the button below. It will slide down and fade in
+            from the top of the page.
           </p>
           <DocsExample href="components/modal.html#live-demo">
             <CButton
@@ -72,9 +91,7 @@
               >
                 <CModalTitle>Modal title</CModalTitle>
               </CModalHeader>
-              <CModalBody
-                >Woohoo, you're reading this text in a modal!</CModalBody
-              >
+              <CModalBody>Woohoo, you're reading this text in a modal!</CModalBody>
               <CModalFooter>
                 <CButton
                   color="secondary"
@@ -95,15 +112,12 @@
     </CCol>
     <CCol :xs="12">
       <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Modal</strong> <small>Static backdrop</small>
-        </CCardHeader>
+        <CCardHeader> <strong>Vue Modal</strong> <small>Static backdrop</small> </CCardHeader>
         <CCardBody>
           <p class="text-body-secondary small">
-            If you set <code>backdrop</code> property to <code>static</code>,
-            your modal will behave as though the backdrop is static, meaning it
-            will not close when clicking outside it. Click the button below to
-            try it.
+            If you set <code>backdrop</code> property to <code>static</code>, your modal will behave
+            as though the backdrop is static, meaning it will not close when clicking outside it.
+            Click the button below to try it.
           </p>
           <DocsExample href="components/modal.html#static-backdrop">
             <CButton
@@ -134,9 +148,7 @@
               >
                 <CModalTitle>Modal title</CModalTitle>
               </CModalHeader>
-              <CModalBody
-                >Woohoo, you're reading this text in a modal!</CModalBody
-              >
+              <CModalBody>Woohoo, you're reading this text in a modal!</CModalBody>
               <CModalFooter>
                 <CButton
                   color="secondary"
@@ -162,9 +174,8 @@
         </CCardHeader>
         <CCardBody>
           <p class="text-body-secondary small">
-            When modals become too long for the user's viewport or device, they
-            scroll independent of the page itself. Try the demo below to see
-            what we mean.
+            When modals become too long for the user's viewport or device, they scroll independent
+            of the page itself. Try the demo below to see what we mean.
           </p>
           <DocsExample href="components/modal.html#scrolling-long-content">
             <CButton
@@ -196,107 +207,94 @@
               </CModalHeader>
               <CModalBody>
                 <p>
-                  Cras mattis consectetur purus sit amet fermentum. Cras justo
-                  odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
-                  risus, porta ac consectetur ac, vestibulum at eros.
+                  Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
+                  facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
+                  vestibulum at eros.
                 </p>
                 <p>
-                  Praesent commodo cursus magna, vel scelerisque nisl
-                  consectetur et. Vivamus sagittis lacus vel augue laoreet
-                  rutrum faucibus dolor auctor.
+                  Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus
+                  sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
                 </p>
                 <p>
-                  Aenean lacinia bibendum nulla sed consectetur. Praesent
-                  commodo cursus magna, vel scelerisque nisl consectetur et.
-                  Donec sed odio dui. Donec ullamcorper nulla non metus auctor
-                  fringilla.
+                  Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
+                  scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non
+                  metus auctor fringilla.
                 </p>
                 <p>
-                  Cras mattis consectetur purus sit amet fermentum. Cras justo
-                  odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
-                  risus, porta ac consectetur ac, vestibulum at eros.
+                  Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
+                  facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
+                  vestibulum at eros.
                 </p>
                 <p>
-                  Praesent commodo cursus magna, vel scelerisque nisl
-                  consectetur et. Vivamus sagittis lacus vel augue laoreet
-                  rutrum faucibus dolor auctor.
+                  Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus
+                  sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
                 </p>
                 <p>
-                  Aenean lacinia bibendum nulla sed consectetur. Praesent
-                  commodo cursus magna, vel scelerisque nisl consectetur et.
-                  Donec sed odio dui. Donec ullamcorper nulla non metus auctor
-                  fringilla.
+                  Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
+                  scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non
+                  metus auctor fringilla.
                 </p>
                 <p>
-                  Cras mattis consectetur purus sit amet fermentum. Cras justo
-                  odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
-                  risus, porta ac consectetur ac, vestibulum at eros.
+                  Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
+                  facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
+                  vestibulum at eros.
                 </p>
                 <p>
-                  Praesent commodo cursus magna, vel scelerisque nisl
-                  consectetur et. Vivamus sagittis lacus vel augue laoreet
-                  rutrum faucibus dolor auctor.
+                  Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus
+                  sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
                 </p>
                 <p>
-                  Aenean lacinia bibendum nulla sed consectetur. Praesent
-                  commodo cursus magna, vel scelerisque nisl consectetur et.
-                  Donec sed odio dui. Donec ullamcorper nulla non metus auctor
-                  fringilla.
+                  Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
+                  scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non
+                  metus auctor fringilla.
                 </p>
                 <p>
-                  Cras mattis consectetur purus sit amet fermentum. Cras justo
-                  odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
-                  risus, porta ac consectetur ac, vestibulum at eros.
+                  Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
+                  facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
+                  vestibulum at eros.
                 </p>
                 <p>
-                  Praesent commodo cursus magna, vel scelerisque nisl
-                  consectetur et. Vivamus sagittis lacus vel augue laoreet
-                  rutrum faucibus dolor auctor.
+                  Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus
+                  sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
                 </p>
                 <p>
-                  Aenean lacinia bibendum nulla sed consectetur. Praesent
-                  commodo cursus magna, vel scelerisque nisl consectetur et.
-                  Donec sed odio dui. Donec ullamcorper nulla non metus auctor
-                  fringilla.
+                  Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
+                  scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non
+                  metus auctor fringilla.
                 </p>
                 <p>
-                  Cras mattis consectetur purus sit amet fermentum. Cras justo
-                  odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
-                  risus, porta ac consectetur ac, vestibulum at eros.
+                  Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
+                  facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
+                  vestibulum at eros.
                 </p>
                 <p>
-                  Praesent commodo cursus magna, vel scelerisque nisl
-                  consectetur et. Vivamus sagittis lacus vel augue laoreet
-                  rutrum faucibus dolor auctor.
+                  Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus
+                  sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
                 </p>
                 <p>
-                  Aenean lacinia bibendum nulla sed consectetur. Praesent
-                  commodo cursus magna, vel scelerisque nisl consectetur et.
-                  Donec sed odio dui. Donec ullamcorper nulla non metus auctor
-                  fringilla.
+                  Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
+                  scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non
+                  metus auctor fringilla.
                 </p>
                 <p>
-                  Cras mattis consectetur purus sit amet fermentum. Cras justo
-                  odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
-                  risus, porta ac consectetur ac, vestibulum at eros.
+                  Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
+                  facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
+                  vestibulum at eros.
                 </p>
                 <p>
-                  Praesent commodo cursus magna, vel scelerisque nisl
-                  consectetur et. Vivamus sagittis lacus vel augue laoreet
-                  rutrum faucibus dolor auctor.
+                  Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus
+                  sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
                 </p>
                 <p>
-                  Aenean lacinia bibendum nulla sed consectetur. Praesent
-                  commodo cursus magna, vel scelerisque nisl consectetur et.
-                  Donec sed odio dui. Donec ullamcorper nulla non metus auctor
-                  fringilla.
+                  Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
+                  scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non
+                  metus auctor fringilla.
                 </p>
               </CModalBody>
             </CModal>
           </DocsExample>
           <p class="text-body-secondary small">
-            You can also create a scrollable modal that allows scroll the modal
-            body by adding
+            You can also create a scrollable modal that allows scroll the modal body by adding
             <code>scrollable</code> prop.
           </p>
           <DocsExample href="components/modal.html#scrolling-long-content">
@@ -330,100 +328,88 @@
               </CModalHeader>
               <CModalBody>
                 <p>
-                  Cras mattis consectetur purus sit amet fermentum. Cras justo
-                  odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
-                  risus, porta ac consectetur ac, vestibulum at eros.
+                  Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
+                  facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
+                  vestibulum at eros.
                 </p>
                 <p>
-                  Praesent commodo cursus magna, vel scelerisque nisl
-                  consectetur et. Vivamus sagittis lacus vel augue laoreet
-                  rutrum faucibus dolor auctor.
+                  Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus
+                  sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
                 </p>
                 <p>
-                  Aenean lacinia bibendum nulla sed consectetur. Praesent
-                  commodo cursus magna, vel scelerisque nisl consectetur et.
-                  Donec sed odio dui. Donec ullamcorper nulla non metus auctor
-                  fringilla.
+                  Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
+                  scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non
+                  metus auctor fringilla.
                 </p>
                 <p>
-                  Cras mattis consectetur purus sit amet fermentum. Cras justo
-                  odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
-                  risus, porta ac consectetur ac, vestibulum at eros.
+                  Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
+                  facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
+                  vestibulum at eros.
                 </p>
                 <p>
-                  Praesent commodo cursus magna, vel scelerisque nisl
-                  consectetur et. Vivamus sagittis lacus vel augue laoreet
-                  rutrum faucibus dolor auctor.
+                  Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus
+                  sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
                 </p>
                 <p>
-                  Aenean lacinia bibendum nulla sed consectetur. Praesent
-                  commodo cursus magna, vel scelerisque nisl consectetur et.
-                  Donec sed odio dui. Donec ullamcorper nulla non metus auctor
-                  fringilla.
+                  Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
+                  scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non
+                  metus auctor fringilla.
                 </p>
                 <p>
-                  Cras mattis consectetur purus sit amet fermentum. Cras justo
-                  odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
-                  risus, porta ac consectetur ac, vestibulum at eros.
+                  Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
+                  facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
+                  vestibulum at eros.
                 </p>
                 <p>
-                  Praesent commodo cursus magna, vel scelerisque nisl
-                  consectetur et. Vivamus sagittis lacus vel augue laoreet
-                  rutrum faucibus dolor auctor.
+                  Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus
+                  sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
                 </p>
                 <p>
-                  Aenean lacinia bibendum nulla sed consectetur. Praesent
-                  commodo cursus magna, vel scelerisque nisl consectetur et.
-                  Donec sed odio dui. Donec ullamcorper nulla non metus auctor
-                  fringilla.
+                  Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
+                  scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non
+                  metus auctor fringilla.
                 </p>
                 <p>
-                  Cras mattis consectetur purus sit amet fermentum. Cras justo
-                  odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
-                  risus, porta ac consectetur ac, vestibulum at eros.
+                  Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
+                  facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
+                  vestibulum at eros.
                 </p>
                 <p>
-                  Praesent commodo cursus magna, vel scelerisque nisl
-                  consectetur et. Vivamus sagittis lacus vel augue laoreet
-                  rutrum faucibus dolor auctor.
+                  Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus
+                  sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
                 </p>
                 <p>
-                  Aenean lacinia bibendum nulla sed consectetur. Praesent
-                  commodo cursus magna, vel scelerisque nisl consectetur et.
-                  Donec sed odio dui. Donec ullamcorper nulla non metus auctor
-                  fringilla.
+                  Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
+                  scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non
+                  metus auctor fringilla.
                 </p>
                 <p>
-                  Cras mattis consectetur purus sit amet fermentum. Cras justo
-                  odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
-                  risus, porta ac consectetur ac, vestibulum at eros.
+                  Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
+                  facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
+                  vestibulum at eros.
                 </p>
                 <p>
-                  Praesent commodo cursus magna, vel scelerisque nisl
-                  consectetur et. Vivamus sagittis lacus vel augue laoreet
-                  rutrum faucibus dolor auctor.
+                  Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus
+                  sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
                 </p>
                 <p>
-                  Aenean lacinia bibendum nulla sed consectetur. Praesent
-                  commodo cursus magna, vel scelerisque nisl consectetur et.
-                  Donec sed odio dui. Donec ullamcorper nulla non metus auctor
-                  fringilla.
+                  Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
+                  scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non
+                  metus auctor fringilla.
                 </p>
                 <p>
-                  Cras mattis consectetur purus sit amet fermentum. Cras justo
-                  odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
-                  risus, porta ac consectetur ac, vestibulum at eros.
+                  Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
+                  facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
+                  vestibulum at eros.
                 </p>
                 <p>
-                  Praesent commodo cursus magna, vel scelerisque nisl
-                  consectetur et. Vivamus sagittis lacus vel augue laoreet
-                  rutrum faucibus dolor auctor.
+                  Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus
+                  sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
                 </p>
                 <p>
-                  Aenean lacinia bibendum nulla sed consectetur. Praesent
-                  commodo cursus magna, vel scelerisque nisl consectetur et.
-                  Donec sed odio dui. Donec ullamcorper nulla non metus auctor
-                  fringilla.
+                  Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
+                  scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non
+                  metus auctor fringilla.
                 </p>
               </CModalBody>
             </CModal>
@@ -433,13 +419,11 @@
     </CCol>
     <CCol :xs="12">
       <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Modal</strong> <small>Vertically centered</small>
-        </CCardHeader>
+        <CCardHeader> <strong>Vue Modal</strong> <small>Vertically centered</small> </CCardHeader>
         <CCardBody>
           <p class="text-body-secondary small">
-            Add <code>alignment=&#34;center&#34;</code> to
-            <code>&lt;CModal&gt;</code> to vertically center the modal.
+            Add <code>alignment=&#34;center&#34;</code> to <code>&lt;CModal&gt;</code> to vertically
+            center the modal.
           </p>
           <DocsExample href="components/modal.html#vertically-centered">
             <CButton
@@ -471,9 +455,9 @@
                 <CModalTitle>Modal title</CModalTitle>
               </CModalHeader>
               <CModalBody>
-                Cras mattis consectetur purus sit amet fermentum. Cras justo
-                odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
-                risus, porta ac consectetur ac, vestibulum at eros.
+                Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
+                facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
+                vestibulum at eros.
               </CModalBody>
               <CModalFooter>
                 <CButton
@@ -522,9 +506,9 @@
                 <CModalTitle>Modal title</CModalTitle>
               </CModalHeader>
               <CModalBody>
-                Cras mattis consectetur purus sit amet fermentum. Cras justo
-                odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
-                risus, porta ac consectetur ac, vestibulum at eros.
+                Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
+                facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
+                vestibulum at eros.
               </CModalBody>
               <CModalFooter>
                 <CButton
@@ -546,15 +530,12 @@
     </CCol>
     <CCol :xs="12">
       <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Modal</strong> <small>Tooltips and popovers</small>
-        </CCardHeader>
+        <CCardHeader> <strong>Vue Modal</strong> <small>Tooltips and popovers</small> </CCardHeader>
         <CCardBody>
           <p class="text-body-secondary small">
-            <code>&lt;CTooltips&gt;</code> and
-            <code>&lt;CPopovers&gt;</code> can be placed within modals as
-            needed. When modals are closed, any tooltips and popovers within are
-            also automatically dismissed.
+            <code>&lt;CTooltips&gt;</code> and <code>&lt;CPopovers&gt;</code> can be placed within
+            modals as needed. When modals are closed, any tooltips and popovers within are also
+            automatically dismissed.
           </p>
           <DocsExample href="components/modal.html#tooltips-and-popovers">
             <CButton
@@ -601,8 +582,7 @@
                 <h5>Tooltips in a modal</h5>
                 <p>
                   <CLink v-c-tooltip="'Tooltip'">This link</CLink> and
-                  <CLink v-c-tooltip="'Tooltip'">that link</CLink> have tooltips
-                  on hover.
+                  <CLink v-c-tooltip="'Tooltip'">that link</CLink> have tooltips on hover.
                 </p>
               </CModalBody>
               <CModalFooter>
@@ -625,15 +605,12 @@
     </CCol>
     <CCol :xs="12">
       <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Modal</strong> <small>Optional sizes</small>
-        </CCardHeader>
+        <CCardHeader> <strong>Vue Modal</strong> <small>Optional sizes</small> </CCardHeader>
         <CCardBody>
           <p class="text-body-secondary small">
-            Modals have three optional sizes, available via modifier classes to
-            be placed on a
-            <code>&lt;CModal&gt;</code>. These sizes kick in at certain
-            breakpoints to avoid horizontal scrollbars on narrower viewports.
+            Modals have three optional sizes, available via modifier classes to be placed on a
+            <code>&lt;CModal&gt;</code>. These sizes kick in at certain breakpoints to avoid
+            horizontal scrollbars on narrower viewports.
           </p>
           <table class="table">
             <thead>
@@ -777,13 +754,11 @@
     </CCol>
     <CCol :xs="12">
       <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Modal</strong> <small>Fullscreen Modal</small>
-        </CCardHeader>
+        <CCardHeader> <strong>Vue Modal</strong> <small>Fullscreen Modal</small> </CCardHeader>
         <CCardBody>
           <p class="text-body-secondary small">
-            Another override is the option to pop up a modal that covers the
-            user viewport, available via property <code>fullscrean</code>.
+            Another override is the option to pop up a modal that covers the user viewport,
+            available via property <code>fullscrean</code>.
           </p>
           <table class="table">
             <thead>
@@ -1018,45 +993,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-import { ref } from 'vue'
-export default {
-  name: 'Modals',
-  setup() {
-    const visibleLiveDemo = ref(false)
-    const visibleStaticBackdropDemo = ref(false)
-    const visibleScrollingLongContentDemo = ref(false)
-    const visibleScrollableDemo = ref(false)
-    const visibleVerticallyCenteredDemo = ref(false)
-    const visibleVerticallyCenteredScrollableDemo = ref(false)
-    const xlDemo = ref(false)
-    const lgDemo = ref(false)
-    const smDemo = ref(false)
-    const fullscreenDemo = ref(false)
-    const fullscreenSmDemo = ref(false)
-    const fullscreenMdDemo = ref(false)
-    const fullscreenLgDemo = ref(false)
-    const fullscreenXlDemo = ref(false)
-    const fullscreenXxlDemo = ref(false)
-
-    return {
-      visibleLiveDemo,
-      visibleStaticBackdropDemo,
-      visibleScrollingLongContentDemo,
-      visibleScrollableDemo,
-      visibleVerticallyCenteredDemo,
-      visibleVerticallyCenteredScrollableDemo,
-      xlDemo,
-      lgDemo,
-      smDemo,
-      fullscreenDemo,
-      fullscreenSmDemo,
-      fullscreenMdDemo,
-      fullscreenLgDemo,
-      fullscreenXlDemo,
-      fullscreenXxlDemo,
-    }
-  },
-}
-</script>
diff --git a/src/views/notifications/Toasts.vue b/src/views/notifications/Toasts.vue
index 6ecfa627..987c3823 100644
--- a/src/views/notifications/Toasts.vue
+++ b/src/views/notifications/Toasts.vue
@@ -1,6 +1,18 @@
+<script setup>
+const toasts = []
+
+const createToast = () => {
+  toasts.push({
+    title: 'new toast',
+    content: 'Lorem ipsum dolor cet emit',
+  })
+}
+</script>
+
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="components/toast.html" />
       <CCard class="mb-4">
         <CCardHeader> <strong>Vue Toast</strong> <small>Basic</small> </CCardHeader>
         <CCardBody>
@@ -32,7 +44,7 @@
           <DocsExample href="components/toast.html">
             <CButton color="primary" @click="createToast">Send a toast</CButton>
             <CToaster placement="top-end">
-              <CToast v-for="(toast, index) in toasts" visible :key="index">
+              <CToast v-for="(toast, index) in toasts" :visible="true" :key="index">
                 <CToastHeader closeButton>
                   <span class="me-auto fw-bold">{{ toast.title }}</span>
                   <small>7 min ago</small>
@@ -157,7 +169,7 @@
                 Hello, world! This is a toast message.
                 <div class="mt-2 pt-2 border-top">
                   <CButton type="button" color="primary" size="sm"> Take action </CButton>
-                  <CToastClose component="CButton" color="secondary" size="sm" class="ms-1"
+                  <CToastClose as="CButton" color="secondary" size="sm" class="ms-1"
                     >Close</CToastClose
                   >
                 </div>
@@ -174,8 +186,8 @@
           <p class="text-body-secondary small">
             Building on the above example, you can create different toast color schemes with our
             <a href="https://coreui.io/docs/utilities/colors">color</a> and
-            <a href="https://coreui.io/docs/utilities/background">background</a> utilities.
-            Here we&#39;ve set <code>color=&#34;primary&#34;</code> and added
+            <a href="https://coreui.io/docs/utilities/background">background</a> utilities. Here
+            we&#39;ve set <code>color=&#34;primary&#34;</code> and added
             <code>.text-white</code> class to the <code>&lt;Ctoast&gt;</code>, and then set
             <code>white</code> property to our close button. For a crisp edge, we remove the default
             border with <code>.border-0</code>.
@@ -198,22 +210,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-export default {
-  data() {
-    return {
-      toasts: [],
-    }
-  },
-
-  methods: {
-    createToast() {
-      this.toasts.push({
-        title: 'new toast',
-        content: 'Lorem ipsum dolor cet emit',
-      })
-    },
-  },
-}
-</script>
diff --git a/src/views/pages/Login.vue b/src/views/pages/Login.vue
index 11075f06..43386210 100644
--- a/src/views/pages/Login.vue
+++ b/src/views/pages/Login.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-body-tertiary min-vh-100 d-flex flex-row align-items-center">
+  <div class="wrapper min-vh-100 d-flex flex-row align-items-center">
     <CContainer>
       <CRow class="justify-content-center">
         <CCol :md="8">
@@ -62,9 +62,3 @@
     </CContainer>
   </div>
 </template>
-
-<script>
-export default {
-  name: 'Login',
-}
-</script>
diff --git a/src/views/pages/Page404.vue b/src/views/pages/Page404.vue
index d07771a1..95e550a5 100644
--- a/src/views/pages/Page404.vue
+++ b/src/views/pages/Page404.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-body-tertiary min-vh-100 d-flex flex-row align-items-center">
+  <div class="wrapper min-vh-100 d-flex flex-row align-items-center">
     <CContainer>
       <CRow class="justify-content-center">
         <CCol :md="6">
@@ -22,9 +22,3 @@
     </CContainer>
   </div>
 </template>
-
-<script>
-export default {
-  name: 'Page404',
-}
-</script>
diff --git a/src/views/pages/Page500.vue b/src/views/pages/Page500.vue
index 63dd18c6..2dd7881e 100644
--- a/src/views/pages/Page500.vue
+++ b/src/views/pages/Page500.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-body-tertiary min-vh-100 d-flex flex-row align-items-center">
+  <div class="wrapper min-vh-100 d-flex flex-row align-items-center">
     <CContainer>
       <CRow class="justify-content-center">
         <CCol :md="6">
@@ -22,9 +22,3 @@
     </CContainer>
   </div>
 </template>
-
-<script>
-export default {
-  name: 'Page500',
-}
-</script>
diff --git a/src/views/pages/Register.vue b/src/views/pages/Register.vue
index d76232f1..284e3cc1 100644
--- a/src/views/pages/Register.vue
+++ b/src/views/pages/Register.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-body-tertiary min-vh-100 d-flex flex-row align-items-center">
+  <div class="bwrapper min-vh-100 d-flex flex-row align-items-center">
     <CContainer>
       <CRow class="justify-content-center">
         <CCol :md="9" :lg="7" :xl="6">
@@ -49,9 +49,3 @@
     </CContainer>
   </div>
 </template>
-
-<script>
-export default {
-  name: 'Register',
-}
-</script>
diff --git a/src/views/theme/ColorTheme.vue b/src/views/theme/ColorTheme.vue
index 3f57d21e..ae404b81 100644
--- a/src/views/theme/ColorTheme.vue
+++ b/src/views/theme/ColorTheme.vue
@@ -1,21 +1,15 @@
+<script setup>
+const props = defineProps({
+  color: String
+})
+</script>
+
 <template>
   <CCol :xl="2" :md="4" :sm="6" :xs="12" class="mb-4">
     <div
-      :class="['theme-color w-75 rounded mb-3', color]"
+      :class="['theme-color w-75 rounded mb-3', props.color]"
       style="padding-top: 75%"
     ></div>
     <slot></slot>
   </CCol>
 </template>
-
-<script>
-export default {
-  name: 'ColorTheme',
-  props: {
-    color: {
-      type: String,
-      default: undefined,
-    },
-  },
-}
-</script>
diff --git a/src/views/theme/Colors.vue b/src/views/theme/Colors.vue
index 87291bbd..acb34ce7 100644
--- a/src/views/theme/Colors.vue
+++ b/src/views/theme/Colors.vue
@@ -1,3 +1,7 @@
+<script setup>
+import ColorTheme from './ColorTheme.vue'
+</script>
+
 <template>
   <CRow>
     <CCol>
@@ -8,18 +12,10 @@
             <ColorTheme color="bg-primary">
               <h6>Brand Primary Color</h6>
             </ColorTheme>
-            <ColorTheme color="bg-secondary"
-              ><h6>Brand Secondary Color</h6></ColorTheme
-            >
-            <ColorTheme color="bg-success"
-              ><h6>Brand Success Color</h6></ColorTheme
-            >
-            <ColorTheme color="bg-danger"
-              ><h6>Brand Danger Color</h6></ColorTheme
-            >
-            <ColorTheme color="bg-warning"
-              ><h6>Brand Warning Color</h6></ColorTheme
-            >
+            <ColorTheme color="bg-secondary"><h6>Brand Secondary Color</h6></ColorTheme>
+            <ColorTheme color="bg-success"><h6>Brand Success Color</h6></ColorTheme>
+            <ColorTheme color="bg-danger"><h6>Brand Danger Color</h6></ColorTheme>
+            <ColorTheme color="bg-warning"><h6>Brand Warning Color</h6></ColorTheme>
             <ColorTheme color="bg-info"><h6>Brand Info Color</h6></ColorTheme>
             <ColorTheme color="bg-light"><h6>Brand Light Color</h6></ColorTheme>
             <ColorTheme color="bg-dark"><h6>Brand Dark Color</h6></ColorTheme>
@@ -29,11 +25,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-import ColorTheme from './ColorTheme'
-export default {
-  name: 'Colors',
-  components: { ColorTheme },
-}
-</script>
diff --git a/src/views/theme/Typography.vue b/src/views/theme/Typography.vue
index c4cd5d96..306e403b 100644
--- a/src/views/theme/Typography.vue
+++ b/src/views/theme/Typography.vue
@@ -243,9 +243,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-export default {
-  name: 'Typography',
-}
-</script>
diff --git a/src/views/widgets/Widgets.vue b/src/views/widgets/Widgets.vue
index b8d40c4e..906c0712 100644
--- a/src/views/widgets/Widgets.vue
+++ b/src/views/widgets/Widgets.vue
@@ -1,3 +1,55 @@
+<script setup>
+import { getStyle } from '@coreui/utils'
+import { CChart } from '@coreui/vue-chartjs'
+
+import WidgetsStatsA from './WidgetsStatsTypeA.vue'
+import WidgetsStatsD from './WidgetsStatsTypeD.vue'
+
+const widgetStatsE = {
+  labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M'],
+  optionsBar: {
+    maintainAspectRatio: false,
+    plugins: {
+      legend: {
+        display: false,
+      },
+    },
+    scales: {
+      x: {
+        display: false,
+      },
+      y: {
+        display: false,
+      },
+    },
+  },
+  optionsLine: {
+    maintainAspectRatio: false,
+    elements: {
+      line: {
+        tension: 0.4,
+      },
+      point: {
+        radius: 0,
+      },
+    },
+    plugins: {
+      legend: {
+        display: false,
+      },
+    },
+    scales: {
+      x: {
+        display: false,
+      },
+      y: {
+        display: false,
+      },
+    },
+  },
+}
+</script>
+
 <template>
   <CCard class="mb-4">
     <CCardHeader>
@@ -514,75 +566,3 @@
     </CCardBody>
   </CCard>
 </template>
-
-<script>
-import { getStyle } from '@coreui/utils'
-import { CChart } from '@coreui/vue-chartjs'
-import WidgetsStatsA from './WidgetsStatsTypeA.vue'
-import WidgetsStatsD from './WidgetsStatsTypeD.vue'
-export default {
-  name: 'Widgets',
-  components: {
-    CChart,
-    WidgetsStatsA,
-    WidgetsStatsD,
-  },
-  setup() {
-    const widgetStatsE = {
-      labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M'],
-      optionsBar: {
-        maintainAspectRatio: false,
-        plugins: {
-          legend: {
-            display: false,
-          },
-        },
-        scales: {
-          x: {
-            display: false,
-          },
-          y: {
-            display: false,
-          },
-        },
-      },
-      optionsLine: {
-        maintainAspectRatio: false,
-        elements: {
-          line: {
-            tension: 0.4,
-          },
-          point: {
-            radius: 0,
-          },
-        },
-        plugins: {
-          legend: {
-            display: false,
-          },
-        },
-        scales: {
-          x: {
-            display: false,
-          },
-          y: {
-            display: false,
-          },
-        },
-      },
-    }
-
-    return {
-      getStyle,
-      widgetStatsE,
-      widgetProgressIconItems: [
-        { color: 'primary', icon: 'cil-puzzle' },
-        { color: 'success', icon: 'cil-speedometer' },
-        { color: 'danger', icon: 'cil-cursor' },
-        { color: 'info', icon: 'cil-drop' },
-        { color: 'secondary', icon: 'cil-pencil' },
-      ],
-    }
-  },
-}
-</script>
diff --git a/src/views/widgets/WidgetsStatsTypeA.vue b/src/views/widgets/WidgetsStatsTypeA.vue
index 30677ff7..e914b7f2 100644
--- a/src/views/widgets/WidgetsStatsTypeA.vue
+++ b/src/views/widgets/WidgetsStatsTypeA.vue
@@ -1,21 +1,38 @@
+<script setup>
+import { onMounted, ref } from 'vue'
+import { CChart } from '@coreui/vue-chartjs'
+import { getStyle } from '@coreui/utils'
+
+const widgetChartRef1 = ref()
+const widgetChartRef2 = ref()
+
+onMounted(() => {
+  document.documentElement.addEventListener('ColorSchemeChange', () => {
+    if (widgetChartRef1.value) {
+      widgetChartRef1.value.chart.data.datasets[0].pointBackgroundColor = getStyle('--cui-primary')
+      widgetChartRef1.value.chart.update()
+    }
+
+    if (widgetChartRef2.value) {
+      widgetChartRef2.value.chart.data.datasets[0].pointBackgroundColor = getStyle('--cui-info')
+      widgetChartRef2.value.chart.update()
+    }
+  })
+})
+</script>
+
 <template>
   <CRow :xs="{ gutter: 4 }">
     <CCol :sm="6" :xl="4" :xxl="3">
       <CWidgetStatsA color="primary">
         <template #value
           >26K
-          <span class="fs-6 fw-normal">
-            (-12.4% <CIcon icon="cil-arrow-bottom" />)
-          </span>
+          <span class="fs-6 fw-normal"> (-12.4% <CIcon icon="cil-arrow-bottom" />) </span>
         </template>
         <template #title>Users</template>
         <template #action>
           <CDropdown placement="bottom-end">
-            <CDropdownToggle
-              color="transparent"
-              class="p-0 text-white"
-              :caret="false"
-            >
+            <CDropdownToggle color="transparent" class="p-0 text-white" :caret="false">
               <CIcon icon="cil-options" class="text-white" />
             </CDropdownToggle>
             <CDropdownMenu>
@@ -32,15 +49,7 @@
             style="height: 70px"
             ref="widgetChartRef1"
             :data="{
-              labels: [
-                'January',
-                'February',
-                'March',
-                'April',
-                'May',
-                'June',
-                'July',
-              ],
+              labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
               datasets: [
                 {
                   label: 'My First dataset',
@@ -102,18 +111,12 @@
       <CWidgetStatsA color="info">
         <template #value
           >$6.200
-          <span class="fs-6 fw-normal">
-            (40.9% <CIcon icon="cil-arrow-top" />)
-          </span>
+          <span class="fs-6 fw-normal"> (40.9% <CIcon icon="cil-arrow-top" />) </span>
         </template>
         <template #title>Income</template>
         <template #action>
           <CDropdown placement="bottom-end">
-            <CDropdownToggle
-              color="transparent"
-              class="p-0 text-white"
-              :caret="false"
-            >
+            <CDropdownToggle color="transparent" class="p-0 text-white" :caret="false">
               <CIcon icon="cil-options" class="text-white" />
             </CDropdownToggle>
             <CDropdownMenu>
@@ -130,15 +133,7 @@
             style="height: 70px"
             ref="widgetChartRef2"
             :data="{
-              labels: [
-                'January',
-                'February',
-                'March',
-                'April',
-                'May',
-                'June',
-                'July',
-              ],
+              labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
               datasets: [
                 {
                   label: 'My First dataset',
@@ -199,18 +194,12 @@
       <CWidgetStatsA color="warning">
         <template #value
           >2.49%
-          <span class="fs-6 fw-normal">
-            (84.7% <CIcon icon="cil-arrow-top" />)
-          </span>
+          <span class="fs-6 fw-normal"> (84.7% <CIcon icon="cil-arrow-top" />) </span>
         </template>
         <template #title>Conversion Rate</template>
         <template #action>
           <CDropdown placement="bottom-end">
-            <CDropdownToggle
-              color="transparent"
-              class="p-0 text-white"
-              :caret="false"
-            >
+            <CDropdownToggle color="transparent" class="p-0 text-white" :caret="false">
               <CIcon icon="cil-options" class="text-white" />
             </CDropdownToggle>
             <CDropdownMenu>
@@ -226,15 +215,7 @@
             class="mt-3"
             style="height: 70px"
             :data="{
-              labels: [
-                'January',
-                'February',
-                'March',
-                'April',
-                'May',
-                'June',
-                'July',
-              ],
+              labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
               datasets: [
                 {
                   label: 'My First dataset',
@@ -283,18 +264,12 @@
       <CWidgetStatsA color="danger">
         <template #value
           >44K
-          <span class="fs-6 fw-normal">
-            (-23.6% <CIcon icon="cil-arrow-bottom" />)
-          </span>
+          <span class="fs-6 fw-normal"> (-23.6% <CIcon icon="cil-arrow-bottom" />) </span>
         </template>
         <template #title>Sessions</template>
         <template #action>
           <CDropdown placement="bottom-end">
-            <CDropdownToggle
-              color="transparent"
-              class="p-0 text-white"
-              :caret="false"
-            >
+            <CDropdownToggle color="transparent" class="p-0 text-white" :caret="false">
               <CIcon icon="cil-options" class="text-white" />
             </CDropdownToggle>
             <CDropdownMenu>
@@ -333,10 +308,7 @@
                   label: 'My First dataset',
                   backgroundColor: 'rgba(255,255,255,.2)',
                   borderColor: 'rgba(255,255,255,.55)',
-                  data: [
-                    78, 81, 80, 45, 34, 12, 40, 85, 65, 23, 12, 98, 34, 84, 67,
-                    82,
-                  ],
+                  data: [78, 81, 80, 45, 34, 12, 40, 85, 65, 23, 12, 98, 34, 84, 67, 82],
                   barPercentage: 0.6,
                 },
               ],
@@ -378,38 +350,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-import { onMounted, ref } from 'vue'
-import { CChart } from '@coreui/vue-chartjs'
-import { getStyle } from '@coreui/utils'
-
-export default {
-  name: 'WidgetsStatsA',
-  components: {
-    CChart,
-  },
-  setup() {
-    const widgetChartRef1 = ref()
-    const widgetChartRef2 = ref()
-
-    onMounted(() => {
-      document.documentElement.addEventListener('ColorSchemeChange', () => {
-        if (widgetChartRef1.value) {
-          widgetChartRef1.value.chart.data.datasets[0].pointBackgroundColor =
-            getStyle('--cui-primary')
-          widgetChartRef1.value.chart.update()
-        }
-
-        if (widgetChartRef2.value) {
-          widgetChartRef2.value.chart.data.datasets[0].pointBackgroundColor =
-            getStyle('--cui-info')
-          widgetChartRef2.value.chart.update()
-        }
-      })
-    })
-
-    return { getStyle, widgetChartRef1, widgetChartRef2 }
-  },
-}
-</script>
diff --git a/src/views/widgets/WidgetsStatsTypeD.vue b/src/views/widgets/WidgetsStatsTypeD.vue
index 7b0cbaac..d6c756d1 100644
--- a/src/views/widgets/WidgetsStatsTypeD.vue
+++ b/src/views/widgets/WidgetsStatsTypeD.vue
@@ -1,3 +1,35 @@
+<script setup>
+import { CChart } from '@coreui/vue-chartjs'
+
+const options = {
+  elements: {
+    line: {
+      tension: 0.4,
+    },
+    point: {
+      radius: 0,
+      hitRadius: 10,
+      hoverRadius: 4,
+      hoverBorderWidth: 3,
+    },
+  },
+  maintainAspectRatio: false,
+  plugins: {
+    legend: {
+      display: false,
+    },
+  },
+  scales: {
+    x: {
+      display: false,
+    },
+    y: {
+      display: false,
+    },
+  },
+}
+</script>
+
 <template>
   <CRow :xs="{ gutter: 4 }">
     <CCol :sm="6" :xl="4" :xxl="3">
@@ -126,46 +158,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-import { CChart } from '@coreui/vue-chartjs'
-export default {
-  name: 'WidgetsStatsD',
-  components: {
-    CChart,
-  },
-  setup() {
-    const options = {
-      elements: {
-        line: {
-          tension: 0.4,
-        },
-        point: {
-          radius: 0,
-          hitRadius: 10,
-          hoverRadius: 4,
-          hoverBorderWidth: 3,
-        },
-      },
-      maintainAspectRatio: false,
-      plugins: {
-        legend: {
-          display: false,
-        },
-      },
-      scales: {
-        x: {
-          display: false,
-        },
-        y: {
-          display: false,
-        },
-      },
-    }
-
-    return {
-      options,
-    }
-  },
-}
-</script>
diff --git a/vite.config.mjs b/vite.config.mjs
index f5cdf664..7195c8b7 100644
--- a/vite.config.mjs
+++ b/vite.config.mjs
@@ -1,22 +1,18 @@
-import { defineConfig, loadEnv } from 'vite'
+import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import path from 'node:path'
 import autoprefixer from 'autoprefixer'
 
-export default defineConfig(({ mode }) => {
-  // Load .env
-  const env = loadEnv(mode, process.cwd(), '')
-  process.env = { ...process.env, ...env }
-
+export default defineConfig(() => {
   return {
     plugins: [vue()],
     base: './',
     css: {
       postcss: {
         plugins: [
-          autoprefixer({}) // add options if needed
+          autoprefixer({}), // add options if needed
         ],
-      }
+      },
     },
     resolve: {
       alias: [
@@ -34,16 +30,7 @@ export default defineConfig(({ mode }) => {
           replacement: path.resolve(__dirname, '/src'),
         },
       ],
-      extensions: [
-        '.mjs',
-        '.js',
-        '.ts',
-        '.jsx',
-        '.tsx',
-        '.json',
-        '.vue',
-        '.scss',
-      ],
+      extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue', '.scss'],
     },
     server: {
       port: 3000,
@@ -51,9 +38,5 @@ export default defineConfig(({ mode }) => {
         // https://vitejs.dev/config/server-options.html
       },
     },
-    define: {
-      // vitejs does not support process.env so we have to redefine it
-      'process.env': process.env,
-    },
   }
 })