diff --git a/.eslintrc.js b/.eslintrc.js
index 3f681ed..a32b94b 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -5,10 +5,11 @@ module.exports = {
   },
   extends: ["plugin:vue/vue3-essential", "eslint:recommended", "@vue/prettier"],
   parserOptions: {
-    parser: "babel-eslint"
+    parser: "@babel/eslint-parser"
   },
   rules: {
     "prettier/prettier": "off",
+    "vue/multi-word-component-names": "off",
     "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
     "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off"
   }
diff --git a/.npmrc b/.npmrc
new file mode 100644
index 0000000..5c6c958
--- /dev/null
+++ b/.npmrc
@@ -0,0 +1,3 @@
+legacy-peer-deps=true
+auto-install-peers=true
+strict-peer-dependencies=false
\ No newline at end of file
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9ace6c1..4dbaaff 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,11 @@
 # Change Log
 
+## [4.0.0] 2023-07-07
+
+- Update dependencies & devDependencies
+- Refactor code from `options api` to `composition api`
+- Add Support for `v-model` to the `SoftInput`
+
 ## [3.0.0] 2022-06-24
 
 - Renamed components name prefix from Vsud to Soft.
diff --git a/README.md b/README.md
index 5bc5a92..2ec8790 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 # [Vue Soft UI Dashboard](http://demos.creative-tim.com/vue-soft-ui-dashboard/?ref=readme-vsud) [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social&logo=twitter)](https://twitter.com/intent/tweet?url=https://www.creative-tim.com/product/vue-soft-ui-dashboard&text=Check%20Vue%20Soft%20UI%20Dashboard%20made%20by%20@CreativeTim%20#webdesign%20#dashboard%20#softdesign%20#vue%20https://www.creative-tim.com/product/vue-soft-ui-dashboard)
 
-![version](https://img.shields.io/badge/version-3.0.0-blue.svg) [![GitHub issues open](https://img.shields.io/github/issues/creativetimofficial/vue-soft-ui-dashboard.svg)](https://github.com/creativetimofficial/vue-soft-ui-dashboard/issues?q=is%3Aopen+is%3Aissue) [![GitHub issues closed](https://img.shields.io/github/issues-closed-raw/creativetimofficial/vue-soft-ui-dashboard.svg)](https://github.com/creativetimofficial/vue-soft-ui-dashboard/issues?q=is%3Aissue+is%3Aclosed)
+![version](https://img.shields.io/badge/version-4.0.0-blue.svg) [![GitHub issues open](https://img.shields.io/github/issues/creativetimofficial/vue-soft-ui-dashboard.svg)](https://github.com/creativetimofficial/vue-soft-ui-dashboard/issues?q=is%3Aopen+is%3Aissue) [![GitHub issues closed](https://img.shields.io/github/issues-closed-raw/creativetimofficial/vue-soft-ui-dashboard.svg)](https://github.com/creativetimofficial/vue-soft-ui-dashboard/issues?q=is%3Aissue+is%3Aclosed)
 
 ![Image](https://s3.amazonaws.com/creativetim_bucket/products/591/original/vue-soft-ui-dashboard.jpg)
 
diff --git a/package.json b/package.json
index 7a11be2..50aea1a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-soft-ui-dashboard",
-  "version": "3.0.0",
+  "version": "4.0.0",
   "private": true,
   "author": "Creative Tim",
   "license": "SEE LICENSE IN <https://www.creative-tim.com/license>",
@@ -19,33 +19,33 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^6.1.1",
-    "@fortawesome/free-brands-svg-icons": "^6.1.1",
-    "@fortawesome/free-solid-svg-icons": "^6.1.1",
-    "@fortawesome/vue-fontawesome": "^3.0.0-5",
-    "@popperjs/core": "2.10.2",
-    "bootstrap": "5.1.3",
-    "chart.js": "3.6.0",
-    "core-js": "3.6.5",
-    "jkanban": "^1.3.1",
-    "vue": "3.2.0",
-    "vue-flatpickr-component": "9.0.5",
-    "vue-router": "^4.0.0-0",
-    "vuex": "^4.0.2"
+    "@fortawesome/fontawesome-svg-core": "6.4.0",
+    "@fortawesome/free-brands-svg-icons": "6.4.0",
+    "@fortawesome/free-solid-svg-icons": "6.4.0",
+    "@fortawesome/vue-fontawesome": "3.0.3",
+    "@popperjs/core": "2.11.8",
+    "bootstrap": "5.3.0",
+    "chart.js": "4.3.0",
+    "core-js": "3.31.1",
+    "jkanban": "1.3.1",
+    "vue": "3.3.4",
+    "vue-flatpickr-component": "11.0.3",
+    "vue-router": "4.2.4",
+    "vuex": "4.1.0"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.5.0",
-    "@vue/cli-plugin-eslint": "~4.5.0",
-    "@vue/cli-plugin-router": "~4.5.0",
-    "@vue/cli-service": "~4.5.0",
-    "@vue/compiler-sfc": "3.2.0",
-    "@vue/eslint-config-prettier": "6.0.0",
-    "babel-eslint": "10.1.0",
-    "eslint": "6.7.2",
-    "eslint-plugin-prettier": "3.3.1",
-    "eslint-plugin-vue": "7.0.0",
-    "prettier": "2.2.1",
-    "sass": "1.43.3",
-    "sass-loader": "10.1.1"
+    "@vue/cli-plugin-babel": "5.0.8",
+    "@vue/cli-plugin-eslint": "5.0.8",
+    "@vue/cli-plugin-router": "5.0.8",
+    "@vue/cli-service": "5.0.8",
+    "@vue/compiler-sfc": "3.3.4",
+    "@vue/eslint-config-prettier": "7.1.0",
+    "@babel/eslint-parser": "7.22.7",
+    "eslint": "8.44.0",
+    "eslint-plugin-prettier": "4.2.1",
+    "eslint-plugin-vue": "9.15.1",
+    "prettier": "3.0.0",
+    "sass": "1.63.6",
+    "sass-loader": "13.3.2"
   }
 }
diff --git a/public/index.html b/public/index.html
index a577d20..41dabcb 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,10 +1,10 @@
 <!--
 =========================================================
-* Vue Soft UI Dashboard - v3.0.0
+* Vue Soft UI Dashboard - v4.0.0
 =========================================================
 
 * Product Page: https://creative-tim.com/product/vue-soft-ui-dashboard
-* Copyright 2022 Creative Tim (https://www.creative-tim.com)
+* Copyright 2023 Creative Tim (https://www.creative-tim.com)
 
 Coded by www.creative-tim.com
 
@@ -12,7 +12,7 @@
 
 * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 -->
-<!DOCTYPE html>
+<!doctype html>
 <html lang="">
   <head>
     <meta charset="utf-8" />
@@ -36,10 +36,14 @@
       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
     />
     <script async defer src="https://buttons.github.io/buttons.js"></script>
-    
+
     <!-- Nepcha Analytics (nepcha.com) -->
     <!-- Nepcha is a easy-to-use web analytics. No cookies and fully compliant with GDPR, CCPA and PECR. -->
-    <script defer data-site="YOUR_DOMAIN_HERE" src="https://api.nepcha.com/js/nepcha-analytics.js"></script>
+    <script
+      defer
+      data-site="YOUR_DOMAIN_HERE"
+      src="https://api.nepcha.com/js/nepcha-analytics.js"
+    ></script>
   </head>
   <body class="bg-gray-100">
     <noscript>
diff --git a/src/App.vue b/src/App.vue
index 4302ea1..ed080cb 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,64 +1,61 @@
+<script setup>
+import { onBeforeMount, computed } from "vue";
+import { useStore } from "vuex";
+
+import Sidenav from "./examples/Sidenav";
+import Configurator from "@/examples/Configurator.vue";
+import Navbar from "@/examples/Navbars/Navbar.vue";
+import AppFooter from "@/examples/Footer.vue";
+
+const store = useStore();
+const isNavFixed = computed(() => store.state.isNavFixed);
+const isAbsolute = computed(() => store.state.isAbsolute);
+
+const navClasses = computed(() => {
+  return {
+    "position-sticky blur shadow-blur mt-4 left-auto top-1 z-index-sticky":
+      isNavFixed.value,
+    "position-absolute px-4 mx-0 w-100 z-index-2": isAbsolute.value,
+    "px-0 mx-4 mt-4": !isAbsolute.value,
+  };
+});
+
+// mutations
+const toggleConfigurator = () => store.commit("toggleConfigurator");
+const navbarMinimize = () => store.commit("navbarMinimize");
+
+onBeforeMount(() => {
+  store.state.isTransparent = "bg-transparent";
+});
+</script>
 <template>
   <sidenav
-    :custom_class="this.$store.state.mcolor"
+    :custom_class="store.state.mcolor"
     :class="[
-      this.$store.state.isTransparent,
-      this.$store.state.isRTL ? 'fixed-end' : 'fixed-start',
+      store.state.isTransparent,
+      store.state.isRTL ? 'fixed-end' : 'fixed-start',
     ]"
-    v-if="this.$store.state.showSidenav"
+    v-if="store.state.showSidenav"
   />
   <main
     class="main-content position-relative max-height-vh-100 h-100 border-radius-lg"
-    :style="this.$store.state.isRTL ? 'overflow-x: hidden' : ''"
+    :style="store.state.isRTL ? 'overflow-x: hidden' : ''"
   >
     <!-- nav -->
     <navbar
       :class="[navClasses]"
-      :textWhite="this.$store.state.isAbsolute ? 'text-white opacity-8' : ''"
+      :textWhite="store.state.isAbsolute ? 'text-white opacity-8' : ''"
       :minNav="navbarMinimize"
-      v-if="this.$store.state.showNavbar"
+      v-if="store.state.showNavbar"
     />
     <router-view />
-    <app-footer v-show="this.$store.state.showFooter" />
+    <app-footer v-show="store.state.showFooter" />
     <configurator
       :toggle="toggleConfigurator"
       :class="[
-        this.$store.state.showConfig ? 'show' : '',
-        this.$store.state.hideConfigButton ? 'd-none' : '',
+        store.state.showConfig ? 'show' : '',
+        store.state.hideConfigButton ? 'd-none' : '',
       ]"
     />
   </main>
 </template>
-<script>
-import Sidenav from "./examples/Sidenav";
-import Configurator from "@/examples/Configurator.vue";
-import Navbar from "@/examples/Navbars/Navbar.vue";
-import AppFooter from "@/examples/Footer.vue";
-import { mapMutations } from "vuex";
-export default {
-  name: "App",
-  components: {
-    Sidenav,
-    Configurator,
-    Navbar,
-    AppFooter,
-  },
-  methods: {
-    ...mapMutations(["toggleConfigurator", "navbarMinimize"]),
-  },
-  computed: {
-    navClasses() {
-      return {
-        "position-sticky blur shadow-blur mt-4 left-auto top-1 z-index-sticky": this
-          .$store.state.isNavFixed,
-        "position-absolute px-4 mx-0 w-100 z-index-2": this.$store.state
-          .isAbsolute,
-        "px-0 mx-4 mt-4": !this.$store.state.isAbsolute,
-      };
-    },
-  },
-  beforeMount() {
-    this.$store.state.isTransparent = "bg-transparent";
-  },
-};
-</script>
diff --git a/src/components/SoftAlert.vue b/src/components/SoftAlert.vue
index 6b9914f..cbed191 100644
--- a/src/components/SoftAlert.vue
+++ b/src/components/SoftAlert.vue
@@ -1,3 +1,29 @@
+<script setup>
+defineProps({
+  color: {
+    type: String,
+    default: "success",
+  },
+  icon: {
+    type: String,
+    default: "",
+  },
+  dismissible: {
+    type: Boolean,
+    default: false,
+  },
+});
+const getClasses = (color, dismissible) => {
+  let colorValue, dismissibleValue;
+
+  colorValue = color ? `alert-${color}` : null;
+
+  dismissibleValue = dismissible ? "alert-dismissible fade show" : null;
+
+  return `${colorValue} ${dismissibleValue}`;
+};
+const getIcon = (icon) => (icon ? icon : null);
+</script>
 <template>
   <div
     class="alert text-white font-weight-bold"
@@ -22,35 +48,3 @@
     </button>
   </div>
 </template>
-
-<script>
-export default {
-  name: "SoftAlert",
-  props: {
-    color: {
-      type: String,
-      default: "success",
-    },
-    icon: {
-      type: String,
-      default: "",
-    },
-    dismissible: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  methods: {
-    getClasses: (color, dismissible) => {
-      let colorValue, dismissibleValue;
-
-      colorValue = color ? `alert-${color}` : null;
-
-      dismissibleValue = dismissible ? "alert-dismissible fade show" : null;
-
-      return `${colorValue} ${dismissibleValue}`;
-    },
-    getIcon: (icon) => (icon ? icon : null),
-  },
-};
-</script>
diff --git a/src/components/SoftAvatar.vue b/src/components/SoftAvatar.vue
index 730a274..fa1633f 100644
--- a/src/components/SoftAvatar.vue
+++ b/src/components/SoftAvatar.vue
@@ -1,3 +1,47 @@
+<script setup>
+defineProps({
+  img: {
+    type: String,
+    required: true,
+  },
+  alt: {
+    type: String,
+    default: "",
+  },
+  size: {
+    type: String,
+    default: null,
+  },
+  shadow: {
+    type: String,
+    default: null,
+  },
+  borderRadius: {
+    type: String,
+    default: null,
+  },
+  circular: Boolean,
+});
+
+function getSize(size) {
+  return size ? `avatar-${size}` : null;
+}
+function getClasses(shadow, circular, borderRadius) {
+  let shadowValue, circularValue, borderRadiusValue;
+
+  if (shadow) {
+    shadowValue = shadow === "regular" ? "shadow" : `shadow-${shadow}`;
+  } else {
+    shadowValue = null;
+  }
+
+  circularValue = circular ? "rounded-circle" : null;
+
+  borderRadiusValue = borderRadius ? `border-radius-${borderRadius}` : null;
+
+  return `${shadowValue} ${circularValue} ${borderRadiusValue}`;
+}
+</script>
 <template>
   <div class="avatar" :class="getSize(size)">
     <img
@@ -7,50 +51,3 @@
     />
   </div>
 </template>
-
-<script>
-export default {
-  name: "SoftAvatar",
-  props: {
-    img: {
-      type: String,
-      required: true,
-    },
-    alt: {
-      type: String,
-      default: "",
-    },
-    size: {
-      type: String,
-      default: null,
-    },
-    shadow: {
-      type: String,
-      default: null,
-    },
-    borderRadius: {
-      type: String,
-      default: null,
-    },
-    circular: Boolean,
-  },
-  methods: {
-    getSize: (size) => (size ? `avatar-${size}` : null),
-    getClasses: (shadow, circular, borderRadius) => {
-      let shadowValue, circularValue, borderRadiusValue;
-
-      if (shadow) {
-        shadowValue = shadow === "regular" ? "shadow" : `shadow-${shadow}`;
-      } else {
-        shadowValue = null;
-      }
-
-      circularValue = circular ? "rounded-circle" : null;
-
-      borderRadiusValue = borderRadius ? `border-radius-${borderRadius}` : null;
-
-      return `${shadowValue} ${circularValue} ${borderRadiusValue}`;
-    },
-  },
-};
-</script>
diff --git a/src/components/SoftBadge.vue b/src/components/SoftBadge.vue
index d6c179d..56083a9 100644
--- a/src/components/SoftBadge.vue
+++ b/src/components/SoftBadge.vue
@@ -1,3 +1,45 @@
+<script setup>
+defineProps({
+  size: {
+    type: String,
+    default: "md",
+  },
+  color: {
+    type: String,
+    default: "success",
+  },
+  variant: {
+    type: String,
+    default: "fill",
+  },
+  circle: {
+    type: Boolean,
+    default: false,
+  },
+  floating: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+function getClasses(variant, color, size, circle, floating) {
+  let colorValue, sizeValue, circleValue, floatingValue;
+
+  if (variant === "gradient") {
+    colorValue = `bg-gradient-${color}`;
+  } else {
+    colorValue = `badge-${color}`;
+  }
+
+  sizeValue = size ? `badge-${size}` : null;
+
+  circleValue = circle ? "badge-circle" : null;
+
+  floatingValue = floating ? "badge-floating" : null;
+
+  return `${colorValue} ${sizeValue} ${circleValue} ${floatingValue}`;
+}
+</script>
 <template>
   <span
     class="badge"
@@ -6,50 +48,3 @@
     <slot />
   </span>
 </template>
-
-<script>
-export default {
-  name: "SoftBadge",
-  props: {
-    size: {
-      type: String,
-      default: "md",
-    },
-    color: {
-      type: String,
-      default: "success",
-    },
-    variant: {
-      type: String,
-      default: "fill",
-    },
-    circle: {
-      type: Boolean,
-      default: false,
-    },
-    floating: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  methods: {
-    getClasses: (variant, color, size, circle, floating) => {
-      let colorValue, sizeValue, circleValue, floatingValue;
-
-      if (variant === "gradient") {
-        colorValue = `bg-gradient-${color}`;
-      } else {
-        colorValue = `badge-${color}`;
-      }
-
-      sizeValue = size ? `badge-${size}` : null;
-
-      circleValue = circle ? "badge-circle" : null;
-
-      floatingValue = floating ? "badge-floating" : null;
-
-      return `${colorValue} ${sizeValue} ${circleValue} ${floatingValue}`;
-    },
-  },
-};
-</script>
diff --git a/src/components/SoftButton.vue b/src/components/SoftButton.vue
index 0caaf39..6ce357a 100644
--- a/src/components/SoftButton.vue
+++ b/src/components/SoftButton.vue
@@ -1,3 +1,48 @@
+<script setup>
+defineProps({
+  color: {
+    type: String,
+    default: "success",
+  },
+  size: {
+    type: String,
+    default: "md",
+  },
+  variant: {
+    type: String,
+    default: "fill",
+  },
+  fullWidth: {
+    type: Boolean,
+    default: false,
+  },
+  active: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+function getClasses(variant, color, size, fullWidth, active) {
+  let colorValue, sizeValue, fullWidthValue, activeValue;
+
+  // Setting the button variant and color
+  if (variant === "gradient") {
+    colorValue = `bg-gradient-${color}`;
+  } else if (variant === "outline") {
+    colorValue = `btn-outline-${color}`;
+  } else {
+    colorValue = `btn-${color}`;
+  }
+
+  sizeValue = size ? `btn-${size}` : null;
+
+  fullWidthValue = fullWidth ? `w-100` : null;
+
+  activeValue = active ? `active` : null;
+
+  return `${colorValue} ${sizeValue} ${fullWidthValue} ${activeValue}`;
+}
+</script>
 <template>
   <button
     class="btn mb-0"
@@ -6,53 +51,3 @@
     <slot />
   </button>
 </template>
-
-<script>
-export default {
-  name: "SoftButton",
-  props: {
-    color: {
-      type: String,
-      default: "success",
-    },
-    size: {
-      type: String,
-      default: "md",
-    },
-    variant: {
-      type: String,
-      default: "fill",
-    },
-    fullWidth: {
-      type: Boolean,
-      default: false,
-    },
-    active: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  methods: {
-    getClasses: (variant, color, size, fullWidth, active) => {
-      let colorValue, sizeValue, fullWidthValue, activeValue;
-
-      // Setting the button variant and color
-      if (variant === "gradient") {
-        colorValue = `bg-gradient-${color}`;
-      } else if (variant === "outline") {
-        colorValue = `btn-outline-${color}`;
-      } else {
-        colorValue = `btn-${color}`;
-      }
-
-      sizeValue = size ? `btn-${size}` : null;
-
-      fullWidthValue = fullWidth ? `w-100` : null;
-
-      activeValue = active ? `active` : null;
-
-      return `${colorValue} ${sizeValue} ${fullWidthValue} ${activeValue}`;
-    },
-  },
-};
-</script>
diff --git a/src/components/SoftCheckbox.vue b/src/components/SoftCheckbox.vue
index 90a59a7..35ae013 100644
--- a/src/components/SoftCheckbox.vue
+++ b/src/components/SoftCheckbox.vue
@@ -1,3 +1,19 @@
+<script setup>
+defineProps({
+  name: {
+    type: String,
+    default: "",
+  },
+  id: {
+    type: String,
+    default: "",
+  },
+  checked: {
+    type: Boolean,
+    default: false,
+  },
+});
+</script>
 <template>
   <div class="form-check">
     <input
@@ -12,23 +28,3 @@
     </label>
   </div>
 </template>
-
-<script>
-export default {
-  name: "SoftCheckbox",
-  props: {
-    name: {
-      type: String,
-      default: "",
-    },
-    id: {
-      type: String,
-      default: "",
-    },
-    checked: {
-      type: Boolean,
-      default: false,
-    },
-  },
-};
-</script>
diff --git a/src/components/SoftInput.vue b/src/components/SoftInput.vue
index d88ace5..093da13 100644
--- a/src/components/SoftInput.vue
+++ b/src/components/SoftInput.vue
@@ -1,3 +1,70 @@
+<script setup>
+defineEmits(["update:value"]);
+defineProps({
+  size: {
+    type: String,
+    default: "default",
+  },
+  success: {
+    type: Boolean,
+    default: false,
+  },
+  error: {
+    type: Boolean,
+    default: false,
+  },
+  icon: {
+    type: String,
+    default: "",
+  },
+  iconDir: {
+    type: String,
+    default: "",
+  },
+  name: {
+    type: String,
+    default: "",
+  },
+  id: {
+    type: String,
+    default: "",
+  },
+  value: {
+    type: String,
+    default: "",
+  },
+  placeholder: {
+    type: String,
+    default: "Type here...",
+  },
+  type: {
+    type: String,
+    default: "text",
+  },
+  isRequired: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+function getClasses(size, success, error) {
+  let sizeValue, isValidValue;
+
+  sizeValue = size ? `form-control-${size}` : null;
+
+  if (error) {
+    isValidValue = "is-invalid";
+  } else if (success) {
+    isValidValue = "is-valid";
+  } else {
+    isValidValue = "";
+  }
+
+  return `${sizeValue} ${isValidValue}`;
+}
+const getIcon = (icon) => (icon ? icon : null);
+const hasIcon = (icon) => (icon ? "input-group" : null);
+</script>
 <template>
   <div class="form-group">
     <div :class="hasIcon(icon)">
@@ -13,6 +80,7 @@
         :value="value"
         :placeholder="placeholder"
         :isRequired="isRequired"
+        @input="$emit('update:value', $event.target.value)"
       />
       <span v-if="iconDir === 'right'" class="input-group-text">
         <i :class="getIcon(icon)"></i>
@@ -20,74 +88,3 @@
     </div>
   </div>
 </template>
-
-<script>
-export default {
-  name: "SoftInput",
-  props: {
-    size: {
-      type: String,
-      default: "default",
-    },
-    success: {
-      type: Boolean,
-      default: false,
-    },
-    error: {
-      type: Boolean,
-      default: false,
-    },
-    icon: {
-      type: String,
-      default: "",
-    },
-    iconDir: {
-      type: String,
-      default: "",
-    },
-    name: {
-      type: String,
-      default: "",
-    },
-    id: {
-      type: String,
-      default: "",
-    },
-    value: {
-      type: String,
-      default: "",
-    },
-    placeholder: {
-      type: String,
-      default: "Type here...",
-    },
-    type: {
-      type: String,
-      default: "text",
-    },
-    isRequired: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  methods: {
-    getClasses: (size, success, error) => {
-      let sizeValue, isValidValue;
-
-      sizeValue = size ? `form-control-${size}` : null;
-
-      if (error) {
-        isValidValue = "is-invalid";
-      } else if (success) {
-        isValidValue = "is-valid";
-      } else {
-        isValidValue = "";
-      }
-
-      return `${sizeValue} ${isValidValue}`;
-    },
-    getIcon: (icon) => (icon ? icon : null),
-    hasIcon: (icon) => (icon ? "input-group" : null),
-  },
-};
-</script>
diff --git a/src/components/SoftPagination.vue b/src/components/SoftPagination.vue
index a69fdb3..24f2738 100644
--- a/src/components/SoftPagination.vue
+++ b/src/components/SoftPagination.vue
@@ -1,31 +1,25 @@
+<script setup>
+defineProps({
+  color: {
+    type: String,
+    default: "success",
+  },
+  size: {
+    type: String,
+    default: "md",
+  },
+});
+function getClasses(color, size) {
+  let colorValue, sizeValue;
+
+  colorValue = color ? `pagination-${color}` : null;
+  sizeValue = size ? `pagination-${size}` : null;
+
+  return `${colorValue} ${sizeValue}`;
+}
+</script>
 <template>
   <ul class="pagination" :class="getClasses(color, size)">
     <slot />
   </ul>
 </template>
-
-<script>
-export default {
-  name: "SoftPagination",
-  props: {
-    color: {
-      type: String,
-      default: "success",
-    },
-    size: {
-      type: String,
-      default: "md",
-    },
-  },
-  methods: {
-    getClasses: (color, size) => {
-      let colorValue, sizeValue;
-
-      colorValue = color ? `pagination-${color}` : null;
-      sizeValue = size ? `pagination-${size}` : null;
-
-      return `${colorValue} ${sizeValue}`;
-    },
-  },
-};
-</script>
diff --git a/src/components/SoftPaginationItem.vue b/src/components/SoftPaginationItem.vue
index 10c9e16..92c39bc 100644
--- a/src/components/SoftPaginationItem.vue
+++ b/src/components/SoftPaginationItem.vue
@@ -1,3 +1,35 @@
+<script setup>
+defineProps({
+  label: {
+    type: String,
+    default: "",
+  },
+  active: {
+    type: Boolean,
+    default: false,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  prev: {
+    type: Boolean,
+    default: false,
+  },
+  next: {
+    type: Boolean,
+    default: false,
+  },
+});
+function getClasses(active, disabled) {
+  let activeValue, disabledValue;
+
+  activeValue = active ? "active" : null;
+  disabledValue = disabled ? "disabled" : null;
+
+  return `${activeValue} ${disabledValue}`;
+}
+</script>
 <template>
   <li class="page-item" :class="getClasses(active, disabled)">
     <a class="page-link" href="javascript:;">
@@ -7,41 +39,3 @@
     </a>
   </li>
 </template>
-
-<script>
-export default {
-  name: "SoftPaginationItem",
-  props: {
-    label: {
-      type: String,
-      default: "",
-    },
-    active: {
-      type: Boolean,
-      default: false,
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    prev: {
-      type: Boolean,
-      default: false,
-    },
-    next: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  methods: {
-    getClasses: (active, disabled) => {
-      let activeValue, disabledValue;
-
-      activeValue = active ? "active" : null;
-      disabledValue = disabled ? "disabled" : null;
-
-      return `${activeValue} ${disabledValue}`;
-    },
-  },
-};
-</script>
diff --git a/src/components/SoftProgress.vue b/src/components/SoftProgress.vue
index 26f4e98..881bd83 100644
--- a/src/components/SoftProgress.vue
+++ b/src/components/SoftProgress.vue
@@ -1,3 +1,30 @@
+<script setup>
+defineProps({
+  color: {
+    type: String,
+    default: "success",
+  },
+  variant: {
+    type: String,
+    default: "fill",
+  },
+  percentage: {
+    type: Number,
+    required: true,
+  },
+});
+function getClasses(color, variant) {
+  let colorValue;
+
+  if (variant === "gradient") {
+    colorValue = `bg-gradient-${color}`;
+  } else {
+    colorValue = `bg-${color}`;
+  }
+
+  return `${colorValue}`;
+}
+</script>
 <template>
   <div class="progress">
     <div
@@ -7,36 +34,3 @@
     ></div>
   </div>
 </template>
-
-<script>
-export default {
-  name: "SoftProgress",
-  props: {
-    color: {
-      type: String,
-      default: "success",
-    },
-    variant: {
-      type: String,
-      default: "fill",
-    },
-    percentage: {
-      type: Number,
-      required: true,
-    },
-  },
-  methods: {
-    getClasses: (color, variant) => {
-      let colorValue;
-
-      if (variant === "gradient") {
-        colorValue = `bg-gradient-${color}`;
-      } else {
-        colorValue = `bg-${color}`;
-      }
-
-      return `${colorValue}`;
-    },
-  },
-};
-</script>
diff --git a/src/components/SoftRadio.vue b/src/components/SoftRadio.vue
index 3f7ac1e..6f9dff8 100644
--- a/src/components/SoftRadio.vue
+++ b/src/components/SoftRadio.vue
@@ -1,3 +1,20 @@
+<script setup>
+defineProps({
+  name: {
+    type: String,
+    required: true,
+  },
+  id: {
+    type: String,
+    required: true,
+  },
+  checked: {
+    type: Boolean,
+    default: false,
+  },
+});
+</script>
+
 <template>
   <div class="form-check">
     <input
@@ -12,23 +29,3 @@
     </label>
   </div>
 </template>
-
-<script>
-export default {
-  name: "SoftRadio",
-  props: {
-    name: {
-      type: String,
-      required: true,
-    },
-    id: {
-      type: String,
-      required: true,
-    },
-    checked: {
-      type: Boolean,
-      default: false,
-    },
-  },
-};
-</script>
diff --git a/src/components/SoftSwitch.vue b/src/components/SoftSwitch.vue
index 09ab7a8..6ca9a9c 100644
--- a/src/components/SoftSwitch.vue
+++ b/src/components/SoftSwitch.vue
@@ -1,3 +1,24 @@
+<script setup>
+defineProps({
+  name: {
+    type: String,
+    required: true,
+  },
+  id: {
+    type: String,
+    required: true,
+  },
+  checked: {
+    type: Boolean,
+    default: false,
+  },
+  labelClass: {
+    type: String,
+    default: "",
+  },
+});
+</script>
+
 <template>
   <div class="form-check form-switch">
     <input
@@ -13,27 +34,3 @@
     </label>
   </div>
 </template>
-
-<script>
-export default {
-  name: "SoftSwitch",
-  props: {
-    name: {
-      type: String,
-      required: true,
-    },
-    id: {
-      type: String,
-      required: true,
-    },
-    checked: {
-      type: Boolean,
-      default: false,
-    },
-    labelClass: {
-      type: String,
-      default: "",
-    },
-  },
-};
-</script>
diff --git a/src/components/SoftTextarea.vue b/src/components/SoftTextarea.vue
index 711efe2..a294863 100644
--- a/src/components/SoftTextarea.vue
+++ b/src/components/SoftTextarea.vue
@@ -1,3 +1,16 @@
+<script setup>
+defineProps({
+  id: {
+    type: String,
+    required: true,
+  },
+  placeholder: {
+    type: String,
+    default: "Your text here...",
+  },
+});
+</script>
+
 <template>
   <div class="form-group">
     <label :for="id">
@@ -11,19 +24,3 @@
     ></textarea>
   </div>
 </template>
-
-<script>
-export default {
-  name: "SoftTextarea",
-  props: {
-    id: {
-      type: String,
-      required: true,
-    },
-    placeholder: {
-      type: String,
-      default: "Your text here...",
-    },
-  },
-};
-</script>
diff --git a/src/examples/Breadcrumbs.vue b/src/examples/Breadcrumbs.vue
index 8b68918..33c1989 100644
--- a/src/examples/Breadcrumbs.vue
+++ b/src/examples/Breadcrumbs.vue
@@ -1,15 +1,29 @@
+<script setup>
+import { computed } from "vue";
+import { useStore } from "vuex";
+
+const store = useStore();
+const isRTL = computed(() => store.state.isRTL);
+
+defineProps({
+  currentPage: {
+    type: String,
+    default: "",
+  },
+  textWhite: {
+    type: String,
+    default: "",
+  },
+});
+</script>
 <template>
   <nav aria-label="breadcrumb">
     <ol
       class="px-0 pt-1 pb-0 mb-0 bg-transparent breadcrumb"
-      :class="this.$store.state.isRTL ? '' : ' me-sm-6'"
+      :class="isRTL ? '' : ' me-sm-6'"
     >
       <li class="text-sm breadcrumb-item" :class="textWhite">
-        <a
-          v-if="this.$store.state.isRTL"
-          :class="textWhite"
-          class="opacity-5 ps-2"
-          href="#"
+        <a v-if="isRTL" :class="textWhite" class="opacity-5 ps-2" href="#"
           >لوحات القيادة</a
         >
         <a v-else :class="textWhite" class="opacity-8" href="#">Pages</a>
@@ -27,17 +41,3 @@
     </h6>
   </nav>
 </template>
-
-<script>
-export default {
-  name: "breadcrumbs",
-  props: {
-    currentPage: {
-      required: true,
-    },
-    textWhite: {
-      type: String,
-    },
-  },
-};
-</script>
diff --git a/src/examples/Cards/DefaultInfoCard.vue b/src/examples/Cards/DefaultInfoCard.vue
index 5651836..5e7d73f 100644
--- a/src/examples/Cards/DefaultInfoCard.vue
+++ b/src/examples/Cards/DefaultInfoCard.vue
@@ -1,3 +1,32 @@
+<script setup>
+defineProps({
+  icon: {
+    type: [String, Object],
+    required: true,
+    component: {
+      type: String,
+    },
+    background: {
+      type: String,
+    },
+    default: () => ({
+      background: "bg-white",
+    }),
+  },
+  title: {
+    type: String,
+    required: true,
+  },
+  description: {
+    type: String,
+    default: "",
+  },
+  value: {
+    type: [String, Number],
+    default: "",
+  },
+});
+</script>
 <template>
   <div class="card">
     <div class="p-3 mx-4 text-center card-header d-flex justify-content-center">
@@ -22,36 +51,3 @@
     </div>
   </div>
 </template>
-
-<script>
-export default {
-  name: "DefaultInfoCard",
-  props: {
-    icon: {
-      type: [String, Object],
-      required: true,
-      component: {
-        type: String,
-      },
-      background: {
-        type: String,
-      },
-      default: () => ({
-        background: "bg-white",
-      }),
-    },
-    title: {
-      type: String,
-      required: true,
-    },
-    description: {
-      type: String,
-      default: "",
-    },
-    value: {
-      type: [String, Number],
-      default: "",
-    },
-  },
-};
-</script>
diff --git a/src/examples/Cards/MasterCard.vue b/src/examples/Cards/MasterCard.vue
index 6aa179f..70fd793 100644
--- a/src/examples/Cards/MasterCard.vue
+++ b/src/examples/Cards/MasterCard.vue
@@ -1,3 +1,33 @@
+<script setup>
+import { computed } from "vue";
+import { useStore } from "vuex";
+
+import SoftAvatar from "@/components/SoftAvatar.vue";
+import img1 from "@/assets/img/logos/mastercard.png";
+
+const store = useStore();
+const isRTL = computed(() => store.state.isRTL);
+
+defineProps({
+  card: {
+    type: Object,
+    number: String,
+    holderName: String,
+    expiryDate: String,
+    holderText: String,
+    expiryText: String,
+    background: String,
+    default: () => ({
+      number: "7852 4594 1122 4562",
+      holderName: "Jack Peterson",
+      expiryDate: "11/22",
+      holderText: "Card Holder",
+      expiryText: "Expires",
+      background: "dark",
+    }),
+  },
+});
+</script>
 <template>
   <div class="card bg-transparent shadow-xl">
     <div
@@ -15,7 +45,7 @@
         </h5>
         <div class="d-flex">
           <div class="d-flex">
-            <div :class="$store.state.isRTL ? 'ms-4' : 'me-4'">
+            <div :class="isRTL ? 'ms-4' : 'me-4'">
               <p class="text-white text-sm opacity-8 mb-0">
                 {{ card.holderText }}
               </p>
@@ -30,7 +60,7 @@
           </div>
           <div
             class="w-20 d-flex align-items-end justify-content-end"
-            :class="$store.state.isRTL ? 'me-auto' : 'ms-auto'"
+            :class="isRTL ? 'me-auto' : 'ms-auto'"
           >
             <soft-avatar class="w-60 mt-2" :img="img1" alt="logo" />
           </div>
@@ -39,41 +69,3 @@
     </div>
   </div>
 </template>
-
-<script>
-import SoftAvatar from "@/components/SoftAvatar.vue";
-import img from "@/assets/img/curved-images/curved14.jpg";
-import img1 from "@/assets/img/logos/mastercard.png";
-
-export default {
-  name: "MasterCard",
-  components: {
-    SoftAvatar,
-  },
-  props: {
-    card: {
-      type: Object,
-      number: String,
-      holderName: String,
-      expiryDate: String,
-      holderText: String,
-      expiryText: String,
-      background: String,
-      default: () => ({
-        number: "7852 4594 1122 4562",
-        holderName: "Jack Peterson",
-        expiryDate: "11/22",
-        holderText: "Card Holder",
-        expiryText: "Expires",
-        background: "dark",
-      }),
-    },
-  },
-  data() {
-    return {
-      img,
-      img1,
-    };
-  },
-};
-</script>
diff --git a/src/examples/Cards/MiniPlayerCard.vue b/src/examples/Cards/MiniPlayerCard.vue
index 14da9ee..d1bb50f 100644
--- a/src/examples/Cards/MiniPlayerCard.vue
+++ b/src/examples/Cards/MiniPlayerCard.vue
@@ -1,3 +1,22 @@
+<script setup>
+import image from "@/assets/img/curved-images/curved1.jpg";
+
+defineProps({
+  color: {
+    type: String,
+    default: "success",
+  },
+  song: {
+    type: Object,
+    default: () => ({
+      title: "Some Kind Of Blues",
+      singer: "Deftones",
+    }),
+    title: String,
+    singer: String,
+  },
+});
+</script>
 <template>
   <div
     class="card card-background move-on-hover align-items-start"
@@ -6,9 +25,7 @@
     <div class="cursor-pointer">
       <div
         class="full-background"
-        style="
-          background-image: url('../../../assets/img/curved-images/curved1.jpg');
-        "
+        :style="{ backgroundImage: `url(${image})` }"
       ></div>
       <div class="card-body">
         <h5 class="mb-0 text-white">{{ song.title }}</h5>
@@ -46,24 +63,3 @@
     </div>
   </div>
 </template>
-
-<script>
-export default {
-  name: "PlayerCard",
-  props: {
-    color: {
-      type: String,
-      default: "success",
-    },
-    song: {
-      type: Object,
-      default: () => ({
-        title: "Some Kind Of Blues",
-        singer: "Deftones",
-      }),
-      title: String,
-      singer: String,
-    },
-  },
-};
-</script>
diff --git a/src/examples/Cards/MiniStatisticsCard.vue b/src/examples/Cards/MiniStatisticsCard.vue
index 9061058..762ab07 100644
--- a/src/examples/Cards/MiniStatisticsCard.vue
+++ b/src/examples/Cards/MiniStatisticsCard.vue
@@ -1,3 +1,60 @@
+<script setup>
+const reverseDirection = "flex-row-reverse justify-content-between";
+defineProps({
+  directionReverse: {
+    type: Boolean,
+    default: false,
+  },
+  title: {
+    type: [Object, String],
+    default: null,
+    text: {
+      type: String,
+    },
+    color: {
+      type: String,
+    },
+  },
+  value: {
+    type: [Object, String, Number],
+    required: true,
+    text: {
+      type: [String, Number],
+    },
+    color: {
+      type: String,
+    },
+  },
+  percentage: {
+    type: [Object, String],
+    value: {
+      type: String,
+    },
+    color: {
+      type: String,
+    },
+    default: () => ({
+      color: "text-success",
+    }),
+  },
+  icon: {
+    type: [String, Object],
+    component: {
+      type: String,
+    },
+    background: {
+      type: String,
+    },
+    default: () => ({
+      background: "bg-white",
+    }),
+  },
+  classContent: {
+    type: String,
+    default: "",
+  },
+});
+</script>
 <template>
   <div class="mb-4 card">
     <div class="p-3 card-body">
@@ -52,68 +109,3 @@
     </div>
   </div>
 </template>
-
-<script>
-export default {
-  name: "MiniStatisticsCard",
-  props: {
-    directionReverse: {
-      type: Boolean,
-      default: false,
-    },
-    title: {
-      type: [Object, String],
-      default: null,
-      text: {
-        type: String,
-      },
-      color: {
-        type: String,
-      },
-    },
-    value: {
-      type: [Object, String, Number],
-      required: true,
-      text: {
-        type: [String, Number],
-      },
-      color: {
-        type: String,
-      },
-    },
-    percentage: {
-      type: [Object, String],
-      value: {
-        type: String,
-      },
-      color: {
-        type: String,
-      },
-      default: () => ({
-        color: "text-success",
-      }),
-    },
-    icon: {
-      type: [String, Object],
-      component: {
-        type: String,
-      },
-      background: {
-        type: String,
-      },
-      default: () => ({
-        background: "bg-white",
-      }),
-    },
-    classContent: {
-      type: String,
-      default: "",
-    },
-  },
-  data() {
-    return {
-      reverseDirection: "flex-row-reverse justify-content-between",
-    };
-  },
-};
-</script>
diff --git a/src/examples/Cards/PlaceHolderCard.vue b/src/examples/Cards/PlaceHolderCard.vue
index f08eb56..1548b6e 100644
--- a/src/examples/Cards/PlaceHolderCard.vue
+++ b/src/examples/Cards/PlaceHolderCard.vue
@@ -1,3 +1,21 @@
+<script setup>
+defineProps({
+  title: {
+    type: Object,
+    default: () => {},
+    variant: {
+      validator(value) {
+        return ["h1", "h2", "h3", "h4", "h5", "h6"].includes(value);
+      },
+    },
+    text: String,
+  },
+  icon: {
+    type: String,
+    default: "plus",
+  },
+});
+</script>
 <template>
   <div class="border card h-100">
     <div
@@ -16,25 +34,3 @@
     </div>
   </div>
 </template>
-
-<script>
-export default {
-  name: "PlaceHolderCard",
-  props: {
-    title: {
-      type: Object,
-      default: () => {},
-      variant: {
-        validator(value) {
-          return ["h1", "h2", "h3", "h4", "h5", "h6"].includes(value);
-        },
-      },
-      text: String,
-    },
-    icon: {
-      type: String,
-      default: "plus",
-    },
-  },
-};
-</script>
diff --git a/src/examples/Cards/RankingList.vue b/src/examples/Cards/RankingList.vue
index b821d1a..b31f8cc 100644
--- a/src/examples/Cards/RankingList.vue
+++ b/src/examples/Cards/RankingList.vue
@@ -1,3 +1,24 @@
+<script setup>
+defineProps({
+  title: {
+    type: String,
+    default: "",
+  },
+  item: {
+    type: Array,
+    default: () => {},
+    title: String,
+    date: String,
+    amount: String,
+    icon: String,
+    color: String,
+  },
+  horizontalBreak: {
+    type: Boolean,
+    default: true,
+  },
+});
+</script>
 <template>
   <h6
     v-if="title"
@@ -39,27 +60,3 @@
     </li>
   </ul>
 </template>
-<script>
-export default {
-  name: "RankingList",
-  props: {
-    title: {
-      type: String,
-      default: "",
-    },
-    item: {
-      type: Array,
-      default: () => {},
-      title: String,
-      date: String,
-      amount: String,
-      icon: String,
-      color: String,
-    },
-    horizontalBreak: {
-      type: Boolean,
-      default: true,
-    },
-  },
-};
-</script>
diff --git a/src/examples/Cards/RankingListCard.vue b/src/examples/Cards/RankingListCard.vue
index de8a831..d19dd1c 100644
--- a/src/examples/Cards/RankingListCard.vue
+++ b/src/examples/Cards/RankingListCard.vue
@@ -1,3 +1,29 @@
+<script setup>
+import RankingList from "./RankingList.vue";
+
+defineProps({
+  card: {
+    type: Object,
+    title: String,
+    subtitle: String,
+    date: String,
+    default: () => {},
+  },
+  item: {
+    type: Array,
+    default: () => {},
+    title: String,
+    date: String,
+    amount: String,
+    icon: String,
+    color: String,
+  },
+  horizontalBreak: {
+    type: Boolean,
+    default: true,
+  },
+});
+</script>
 <template>
   <div class="card h-100">
     <div class="p-3 pb-0 card-header">
@@ -24,35 +50,3 @@
     </div>
   </div>
 </template>
-
-<script>
-import RankingList from "./RankingList.vue";
-export default {
-  name: "RankingListCard",
-  components: {
-    RankingList,
-  },
-  props: {
-    card: {
-      type: Object,
-      title: String,
-      subtitle: String,
-      date: String,
-      default: () => {},
-    },
-    item: {
-      type: Array,
-      default: () => {},
-      title: String,
-      date: String,
-      amount: String,
-      icon: String,
-      color: String,
-    },
-    horizontalBreak: {
-      type: Boolean,
-      default: true,
-    },
-  },
-};
-</script>
diff --git a/src/examples/Charts/GradientLineChart.vue b/src/examples/Charts/GradientLineChart.vue
index 19030cc..bb863b9 100644
--- a/src/examples/Charts/GradientLineChart.vue
+++ b/src/examples/Charts/GradientLineChart.vue
@@ -1,153 +1,153 @@
-<template>
-  <div class="p-3 pb-0 card-header">
-    <h6>{{ title }}</h6>
-    <!-- eslint-disable vue/no-v-html -->
-    <p v-if="description" class="text-sm" v-html="description" />
-  </div>
-  <div class="p-3 card-body">
-    <div class="chart">
-      <canvas :id="id" class="chart-canvas" :height="height"></canvas>
-    </div>
-  </div>
-</template>
-
-<script>
+<script setup>
+import { onMounted } from "vue";
 import Chart from "chart.js/auto";
 
-export default {
-  name: "GradientLineChart",
-  props: {
-    id: {
-      type: String,
-      required: true,
-    },
-    height: {
-      type: String,
-      default: "300",
-    },
-    title: {
-      type: String,
-      default: "",
-    },
-    description: {
-      type: String,
-      default: "",
-    },
-    chart: {
-      type: Object,
-      required: true,
-      labels: Array,
-      datasets: {
-        type: Array,
-        label: String,
-        data: Array,
-      },
+const props = defineProps({
+  id: {
+    type: String,
+    required: true,
+  },
+  height: {
+    type: String,
+    default: "300",
+  },
+  title: {
+    type: String,
+    default: "",
+  },
+  description: {
+    type: String,
+    default: "",
+  },
+  chart: {
+    type: Object,
+    required: true,
+    labels: Array,
+    datasets: {
+      type: Array,
+      label: String,
+      data: Array,
     },
   },
+});
 
-  mounted() {
-    var ctx = document.getElementById(this.id).getContext("2d");
+onMounted(() => {
+  let ctx = document.getElementById(props.id).getContext("2d");
 
-    var gradientStroke1 = ctx.createLinearGradient(0, 230, 0, 50);
+  let gradientStroke1 = ctx.createLinearGradient(0, 230, 0, 50);
 
-    gradientStroke1.addColorStop(1, "rgba(203,12,159,0.2)");
-    gradientStroke1.addColorStop(0.2, "rgba(72,72,176,0.0)");
-    gradientStroke1.addColorStop(0, "rgba(203,12,159,0)");
+  gradientStroke1.addColorStop(1, "rgba(203,12,159,0.2)");
+  gradientStroke1.addColorStop(0.2, "rgba(72,72,176,0.0)");
+  gradientStroke1.addColorStop(0, "rgba(203,12,159,0)");
 
-    let chartStatus = Chart.getChart(this.id);
-    if (chartStatus != undefined) {
-      chartStatus.destroy();
-    }
+  let chartStatus = Chart.getChart(props.id);
+  if (chartStatus != undefined) {
+    chartStatus.destroy();
+  }
 
-    new Chart(ctx, {
-      type: "line",
-      data: {
-        labels: this.chart.labels,
-        datasets: [
-          {
-            label: this.chart.datasets[0].label,
-            tension: 0.4,
-            borderWidth: 0,
-            pointRadius: 0,
-            borderColor: "#cb0c9f",
-            // eslint-disable-next-line no-dupe-keys
-            borderWidth: 3,
-            backgroundColor: gradientStroke1,
-            fill: true,
-            data: this.chart.datasets[0].data,
-            maxBarThickness: 6,
-          },
-          {
-            label: this.chart.datasets[1].label,
-            tension: 0.4,
-            borderWidth: 0,
-            pointRadius: 0,
-            borderColor: "#3A416F",
-            // eslint-disable-next-line no-dupe-keys
-            borderWidth: 3,
-            backgroundColor: gradientStroke1,
-            fill: true,
-            data: this.chart.datasets[1].data,
-            maxBarThickness: 6,
-          },
-        ],
-      },
-      options: {
-        responsive: true,
-        maintainAspectRatio: false,
-        plugins: {
-          legend: {
-            display: false,
-          },
+  new Chart(ctx, {
+    type: "line",
+    data: {
+      labels: props.chart.labels,
+      datasets: [
+        {
+          label: props.chart.datasets[0].label,
+          tension: 0.4,
+          borderWidth: 0,
+          pointRadius: 0,
+          borderColor: "#cb0c9f",
+          // eslint-disable-next-line no-dupe-keys
+          borderWidth: 3,
+          backgroundColor: gradientStroke1,
+          fill: true,
+          data: props.chart.datasets[0].data,
+          maxBarThickness: 6,
         },
-        interaction: {
-          intersect: false,
-          mode: "index",
+        {
+          label: props.chart.datasets[1].label,
+          tension: 0.4,
+          borderWidth: 0,
+          pointRadius: 0,
+          borderColor: "#3A416F",
+          // eslint-disable-next-line no-dupe-keys
+          borderWidth: 3,
+          backgroundColor: gradientStroke1,
+          fill: true,
+          data: props.chart.datasets[1].data,
+          maxBarThickness: 6,
         },
-        scales: {
-          y: {
-            grid: {
-              drawBorder: false,
-              display: true,
-              drawOnChartArea: true,
-              drawTicks: false,
-              borderDash: [5, 5],
-            },
-            ticks: {
-              display: true,
-              padding: 10,
-              color: "#b2b9bf",
-              font: {
-                size: 11,
-                family: "Open Sans",
-                style: "normal",
-                lineHeight: 2,
-              },
-            },
+      ],
+    },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      plugins: {
+        legend: {
+          display: false,
+        },
+      },
+      interaction: {
+        intersect: false,
+        mode: "index",
+      },
+      scales: {
+        y: {
+          grid: {
+            drawBorder: false,
+            display: true,
+            drawOnChartArea: true,
+            drawTicks: false,
+            borderDash: [5, 5],
           },
-          x: {
-            grid: {
-              drawBorder: false,
-              display: false,
-              drawOnChartArea: false,
-              drawTicks: false,
-              borderDash: [5, 5],
+          ticks: {
+            display: true,
+            padding: 10,
+            color: "#b2b9bf",
+            font: {
+              size: 11,
+              family: "Open Sans",
+              style: "normal",
+              lineHeight: 2,
             },
-            ticks: {
-              display: true,
-              color: "#b2b9bf",
-              padding: 20,
-              font: {
-                size: 11,
-                family: "Open Sans",
-                style: "normal",
-                lineHeight: 2,
-              },
+          },
+        },
+        x: {
+          grid: {
+            drawBorder: false,
+            display: false,
+            drawOnChartArea: false,
+            drawTicks: false,
+            borderDash: [5, 5],
+          },
+          ticks: {
+            display: true,
+            color: "#b2b9bf",
+            padding: 20,
+            font: {
+              size: 11,
+              family: "Open Sans",
+              style: "normal",
+              lineHeight: 2,
             },
           },
         },
       },
-    });
-  },
-};
+    },
+  });
+});
 </script>
+<template>
+  <div class="p-3 pb-0 card-header">
+    <h6>{{ props.title }}</h6>
+    <p v-if="props.description" class="text-sm" v-html="props.description" />
+  </div>
+  <div class="p-3 card-body">
+    <div class="chart">
+      <canvas
+        :id="props.id"
+        class="chart-canvas"
+        :height="props.height"
+      ></canvas>
+    </div>
+  </div>
+</template>
diff --git a/src/examples/Charts/ReportsBarChart.vue b/src/examples/Charts/ReportsBarChart.vue
index 85b5956..8a71aee 100644
--- a/src/examples/Charts/ReportsBarChart.vue
+++ b/src/examples/Charts/ReportsBarChart.vue
@@ -1,12 +1,130 @@
+<script setup>
+import { onMounted } from "vue";
+import Chart from "chart.js/auto";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+
+const props = defineProps({
+  id: {
+    type: String,
+    required: true,
+  },
+  color: {
+    type: String,
+    default: "dark",
+  },
+  title: {
+    type: String,
+    default: "",
+  },
+  description: {
+    type: String,
+    default: "",
+  },
+  chart: {
+    type: Object,
+    required: true,
+    labels: Array,
+    datasets: {
+      type: Object,
+      label: String,
+      data: Array,
+    },
+  },
+  items: {
+    type: Array,
+    default: () => {
+      [];
+    },
+  },
+});
+
+onMounted(() => {
+  var ctx = document.getElementById(props.id).getContext("2d");
+
+  let chartStatus = Chart.getChart(props.id);
+  if (chartStatus != undefined) {
+    chartStatus.destroy();
+  }
+
+  new Chart(ctx, {
+    type: "bar",
+    data: {
+      labels: props.chart.labels,
+      datasets: [
+        {
+          label: props.chart.datasets.label,
+          tension: 0.4,
+          borderWidth: 0,
+          borderRadius: 4,
+          borderSkipped: false,
+          backgroundColor: "#fff",
+          data: props.chart.datasets.data,
+          maxBarThickness: 6,
+        },
+      ],
+    },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      plugins: {
+        legend: {
+          display: false,
+        },
+      },
+      interaction: {
+        intersect: false,
+        mode: "index",
+      },
+      scales: {
+        y: {
+          grid: {
+            drawBorder: false,
+            display: false,
+            drawOnChartArea: false,
+            drawTicks: false,
+          },
+          ticks: {
+            suggestedMin: 0,
+            suggestedMax: 500,
+            beginAtZero: true,
+            padding: 15,
+            font: {
+              size: 14,
+              family: "Open Sans",
+              style: "normal",
+              lineHeight: 2,
+            },
+            color: "#fff",
+          },
+        },
+        x: {
+          grid: {
+            drawBorder: false,
+            display: false,
+            drawOnChartArea: false,
+            drawTicks: false,
+          },
+          ticks: {
+            display: false,
+          },
+        },
+      },
+    },
+  });
+});
+</script>
 <template>
-  <div class="py-3 mb-3 border-radius-lg pe-1" :class="`bg-gradient-${color}`">
+  <div
+    class="py-3 mb-3 border-radius-lg pe-1"
+    :class="`bg-gradient-${props.color}`"
+  >
     <div class="chart">
-      <canvas :id="id" class="chart-canvas" height="170"></canvas>
+      <canvas :id="props.id" class="chart-canvas" height="170"></canvas>
     </div>
   </div>
-  <h6 class="mt-4 mb-0 ms-2">{{ title }}</h6>
+  <h6 class="mt-4 mb-0 ms-2">{{ props.title }}</h6>
   <!-- eslint-disable vue/no-v-html -->
-  <p class="text-sm ms-2" v-html="description" />
+  <p class="text-sm ms-2" v-html="props.description" />
   <div class="container border-radius-lg">
     <div class="row">
       <div
@@ -17,7 +135,7 @@
             icon: { color: colour, component },
           },
           index
-        ) in items"
+        ) in props.items"
         :key="index"
         class="py-3 col-3 ps-0"
       >
@@ -49,122 +167,3 @@
     </div>
   </div>
 </template>
-<script>
-import Chart from "chart.js/auto";
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-
-export default {
-  name: "ReportsBarChart",
-  components: {
-    FontAwesomeIcon,
-  },
-  props: {
-    id: {
-      type: String,
-      required: true,
-    },
-    color: {
-      type: String,
-      default: "dark",
-    },
-    title: {
-      type: String,
-      default: "",
-    },
-    description: {
-      type: String,
-      default: "",
-    },
-    chart: {
-      type: Object,
-      required: true,
-      labels: Array,
-      datasets: {
-        type: Object,
-        label: String,
-        data: Array,
-      },
-    },
-    items: {
-      type: Array,
-      default: () => {
-        [];
-      },
-    },
-  },
-  mounted() {
-    var ctx = document.getElementById(this.id).getContext("2d");
-
-    let chartStatus = Chart.getChart(this.id);
-    if (chartStatus != undefined) {
-      chartStatus.destroy();
-    }
-
-    new Chart(ctx, {
-      type: "bar",
-      data: {
-        labels: this.chart.labels,
-        datasets: [
-          {
-            label: this.chart.datasets.label,
-            tension: 0.4,
-            borderWidth: 0,
-            borderRadius: 4,
-            borderSkipped: false,
-            backgroundColor: "#fff",
-            data: this.chart.datasets.data,
-            maxBarThickness: 6,
-          },
-        ],
-      },
-      options: {
-        responsive: true,
-        maintainAspectRatio: false,
-        plugins: {
-          legend: {
-            display: false,
-          },
-        },
-        interaction: {
-          intersect: false,
-          mode: "index",
-        },
-        scales: {
-          y: {
-            grid: {
-              drawBorder: false,
-              display: false,
-              drawOnChartArea: false,
-              drawTicks: false,
-            },
-            ticks: {
-              suggestedMin: 0,
-              suggestedMax: 500,
-              beginAtZero: true,
-              padding: 15,
-              font: {
-                size: 14,
-                family: "Open Sans",
-                style: "normal",
-                lineHeight: 2,
-              },
-              color: "#fff",
-            },
-          },
-          x: {
-            grid: {
-              drawBorder: false,
-              display: false,
-              drawOnChartArea: false,
-              drawTicks: false,
-            },
-            ticks: {
-              display: false,
-            },
-          },
-        },
-      },
-    });
-  },
-};
-</script>
diff --git a/src/examples/Configurator.vue b/src/examples/Configurator.vue
index 78daaab..c8c96be 100644
--- a/src/examples/Configurator.vue
+++ b/src/examples/Configurator.vue
@@ -1,3 +1,60 @@
+<script setup>
+import { computed, onBeforeMount, ref } from "vue";
+import { useStore } from "vuex";
+import { useRoute } from "vue-router";
+
+const route = useRoute();
+const store = useStore();
+
+const fixedKey = ref("");
+
+const isNavFixed = computed(() => store.state.isNavFixed);
+const isRTL = computed(() => store.state.isRTL);
+const isTransparent = computed(() => store.state.isTransparent);
+
+// mutations
+const sidebarType = (type) => store.commit("sidebarType", type);
+
+// actions
+const setCardBackground = () => store.dispatch("setCardBackground");
+
+function sidenavTypeOnResize() {
+  let transparent = document.querySelector("#btn-transparent");
+  let white = document.querySelector("#btn-white");
+  if (window.innerWidth < 1200) {
+    transparent.classList.add("disabled");
+    white.classList.add("disabled");
+  } else {
+    transparent.classList.remove("disabled");
+    white.classList.remove("disabled");
+  }
+}
+function sidebarColor(color = "success") {
+  document.querySelector("#sidenav-main").setAttribute("data-color", color);
+  let mcolor = `card-background-mask-${color}`;
+  setCardBackground(mcolor);
+}
+
+function setNavbarFixed() {
+  if (route.name !== "Profile") {
+    store.state.isNavFixed = !store.state.isNavFixed;
+  }
+}
+
+onBeforeMount(() => {
+  store.state.isTransparent = "bg-transparent";
+  // Deactivate sidenav type buttons on resize and small screens
+  window.addEventListener("resize", sidenavTypeOnResize);
+  window.addEventListener("load", sidenavTypeOnResize);
+});
+
+defineProps({
+  toggle: {
+    type: Function,
+    default: null,
+  },
+});
+</script>
 <template>
   <div class="fixed-plugin">
     <a
@@ -28,7 +85,7 @@
         <a href="#" class="switch-trigger background-color">
           <div
             class="my-2 badge-colors"
-            :class="this.$store.state.isRTL ? 'text-end' : ' text-start'"
+            :class="isRTL ? 'text-end' : ' text-start'"
           >
             <span
               class="badge filter bg-gradient-primary active"
@@ -71,7 +128,7 @@
           <button
             id="btn-transparent"
             class="px-3 mb-2 btn bg-gradient-success w-100"
-            :class="ifTransparent === 'bg-transparent' ? 'active' : ''"
+            :class="isTransparent === 'bg-transparent' ? 'active' : ''"
             @click="sidebarType('bg-transparent')"
           >
             Transparent
@@ -79,7 +136,7 @@
           <button
             id="btn-white"
             class="px-3 mb-2 btn bg-gradient-success w-100 ms-2"
-            :class="ifTransparent === 'bg-white' ? 'active' : ''"
+            :class="isTransparent === 'bg-white' ? 'active' : ''"
             @click="sidebarType('bg-white')"
           >
             White
@@ -95,10 +152,10 @@
         <div class="form-check form-switch ps-0">
           <input
             class="mt-1 form-check-input"
-            :class="this.$store.state.isRTL ? 'float-end  me-auto' : ' ms-auto'"
+            :class="isRTL ? 'float-end  me-auto' : ' ms-auto'"
             type="checkbox"
             id="navbarFixed"
-            :checked="this.$store.state.isNavFixed"
+            :checked="isNavFixed"
             @change="setNavbarFixed"
             v-model="fixedKey"
           />
@@ -149,61 +206,3 @@
     </div>
   </div>
 </template>
-
-<script>
-import { mapMutations, mapActions } from "vuex";
-export default {
-  name: "configurator",
-  props: ["toggle"],
-  data() {
-    return {
-      fixedKey: "",
-    };
-  },
-  methods: {
-    ...mapMutations(["navbarMinimize", "sidebarType", "navbarFixed"]),
-    ...mapActions(["toggleSidebarColor"]),
-
-    sidebarColor(color = "success") {
-      document.querySelector("#sidenav-main").setAttribute("data-color", color);
-      this.$store.state.mcolor = `card-background-mask-${color}`;
-    },
-
-    sidebarType(type) {
-      this.toggleSidebarColor(type);
-    },
-
-    setNavbarFixed() {
-      if (this.$route.name !== "Profile") {
-        this.$store.state.isNavFixed = !this.$store.state.isNavFixed;
-      }
-    },
-
-    sidenavTypeOnResize() {
-      let transparent = document.querySelector("#btn-transparent");
-      let white = document.querySelector("#btn-white");
-      if (window.innerWidth < 1200) {
-        transparent.classList.add("disabled");
-        white.classList.add("disabled");
-      } else {
-        transparent.classList.remove("disabled");
-        white.classList.remove("disabled");
-      }
-    },
-  },
-  computed: {
-    ifTransparent() {
-      return this.$store.state.isTransparent;
-    },
-    sidenavResponsive() {
-      return this.sidenavTypeOnResize;
-    },
-  },
-  beforeMount() {
-    this.$store.state.isTransparent = "bg-transparent";
-    // Deactivate sidenav type buttons on resize and small screens
-    window.addEventListener("resize", this.sidenavTypeOnResize);
-    window.addEventListener("load", this.sidenavTypeOnResize);
-  },
-};
-</script>
diff --git a/src/examples/Footer.vue b/src/examples/Footer.vue
index 5afeada..70bbfbc 100644
--- a/src/examples/Footer.vue
+++ b/src/examples/Footer.vue
@@ -1,3 +1,7 @@
+<script setup>
+import { useStore } from "vuex";
+const store = useStore();
+</script>
 <template>
   <footer class="py-3 footer">
     <div class="container-fluid">
@@ -5,7 +9,7 @@
         <div class="mb-4 col-lg-6 mb-lg-0">
           <div
             class="text-sm text-center copyright text-muted"
-            :class="this.$store.state.isRTL ? 'text-lg-end' : 'text-lg-start'"
+            :class="store.state.isRTL ? 'text-lg-end' : 'text-lg-start'"
           >
             ©
             {{ new Date().getFullYear() }}, made with
@@ -61,9 +65,3 @@
     </div>
   </footer>
 </template>
-
-<script>
-export default {
-  name: "app-footer",
-};
-</script>
diff --git a/src/examples/Navbars/Navbar.vue b/src/examples/Navbars/Navbar.vue
index e804ef4..0a6d79b 100644
--- a/src/examples/Navbars/Navbar.vue
+++ b/src/examples/Navbars/Navbar.vue
@@ -1,3 +1,60 @@
+<script setup>
+import { onUpdated, ref, computed } from "vue";
+import { useStore } from "vuex";
+import { useRoute } from "vue-router";
+
+import Breadcrumbs from "../Breadcrumbs.vue";
+
+const showMenu = ref(false);
+const closeMenu = () => {
+  setTimeout(() => {
+    showMenu.value = false;
+  }, 100);
+};
+
+const store = useStore();
+const route = useRoute();
+
+const navbarMinimize = () => store.commit("navbarMinimize");
+const toggleConfigurator = () => store.commit("toggleConfigurator");
+
+const toggleSidebarColor = (color) =>
+  store.dispatch("toggleSidebarColor", color);
+
+const currentRouteName = computed(() => {
+  return route.name;
+});
+function toggleSidebar() {
+  toggleSidebarColor("bg-white");
+  navbarMinimize();
+}
+
+defineProps({
+  minNav: {
+    type: Function,
+    default: () => {},
+  },
+  textWhite: {
+    type: String,
+    default: "",
+  },
+});
+
+onUpdated(() => {
+  const navbar = document.getElementById("navbarBlur");
+  window.addEventListener("scroll", () => {
+    if (window.scrollY > 10 && store.state.isNavFixed) {
+      navbar.classList.add("blur");
+      navbar.classList.add("position-sticky");
+      navbar.classList.add("shadow-blur");
+    } else {
+      navbar.classList.remove("blur");
+      navbar.classList.remove("position-sticky");
+      navbar.classList.remove("shadow-blur");
+    }
+  });
+});
+</script>
 <template>
   <nav
     class="shadow-none navbar navbar-main navbar-expand-lg border-radius-xl"
@@ -9,12 +66,12 @@
       <breadcrumbs :currentPage="currentRouteName" :textWhite="textWhite" />
       <div
         class="mt-2 collapse navbar-collapse mt-sm-0 me-md-0 me-sm-4"
-        :class="this.$store.state.isRTL ? 'px-0' : 'me-sm-4'"
+        :class="store.state.isRTL ? 'px-0' : 'me-sm-4'"
         id="navbar"
       >
         <div
           class="pe-md-3 d-flex align-items-center"
-          :class="this.$store.state.isRTL ? 'me-md-auto' : 'ms-md-auto'"
+          :class="store.state.isRTL ? 'me-md-auto' : 'ms-md-auto'"
         >
           <div class="input-group">
             <span class="input-group-text text-body"
@@ -23,9 +80,7 @@
             <input
               type="text"
               class="form-control"
-              :placeholder="
-                this.$store.state.isRTL ? 'أكتب هنا...' : 'Type here...'
-              "
+              :placeholder="store.state.isRTL ? 'أكتب هنا...' : 'Type here...'"
             />
           </div>
         </div>
@@ -38,9 +93,9 @@
             >
               <i
                 class="fa fa-user"
-                :class="this.$store.state.isRTL ? 'ms-sm-2' : 'me-sm-1'"
+                :class="store.state.isRTL ? 'ms-sm-2' : 'me-sm-1'"
               ></i>
-              <span v-if="this.$store.state.isRTL" class="d-sm-inline d-none"
+              <span v-if="store.state.isRTL" class="d-sm-inline d-none"
                 >يسجل دخول</span
               >
               <span v-else class="d-sm-inline d-none">Sign In </span>
@@ -71,7 +126,7 @@
           </li>
           <li
             class="nav-item dropdown d-flex align-items-center"
-            :class="this.$store.state.isRTL ? 'ps-2' : 'pe-2'"
+            :class="store.state.isRTL ? 'ps-2' : 'pe-2'"
           >
             <a
               href="#"
@@ -84,6 +139,7 @@
               data-bs-toggle="dropdown"
               aria-expanded="false"
               @click="showMenu = !showMenu"
+              @blur="closeMenu"
             >
               <i class="cursor-pointer fa fa-bell"></i>
             </a>
@@ -200,51 +256,3 @@
     </div>
   </nav>
 </template>
-<script>
-import Breadcrumbs from "../Breadcrumbs.vue";
-import { mapMutations, mapActions } from "vuex";
-
-export default {
-  name: "navbar",
-  data() {
-    return {
-      showMenu: false,
-    };
-  },
-  props: ["minNav", "textWhite"],
-  created() {
-    this.minNav;
-  },
-  methods: {
-    ...mapMutations(["navbarMinimize", "toggleConfigurator"]),
-    ...mapActions(["toggleSidebarColor"]),
-
-    toggleSidebar() {
-      this.toggleSidebarColor("bg-white");
-      this.navbarMinimize();
-    },
-  },
-  components: {
-    Breadcrumbs,
-  },
-  computed: {
-    currentRouteName() {
-      return this.$route.name;
-    },
-  },
-  updated() {
-    const navbar = document.getElementById("navbarBlur");
-    window.addEventListener("scroll", () => {
-      if (window.scrollY > 10 && this.$store.state.isNavFixed) {
-        navbar.classList.add("blur");
-        navbar.classList.add("position-sticky");
-        navbar.classList.add("shadow-blur");
-      } else {
-        navbar.classList.remove("blur");
-        navbar.classList.remove("position-sticky");
-        navbar.classList.remove("shadow-blur");
-      }
-    });
-  },
-};
-</script>
diff --git a/src/examples/PageLayout/Footer.vue b/src/examples/PageLayout/Footer.vue
index bce7f67..6947494 100644
--- a/src/examples/PageLayout/Footer.vue
+++ b/src/examples/PageLayout/Footer.vue
@@ -1,3 +1,4 @@
+<script setup></script>
 <template>
   <footer class="py-5 footer">
     <div class="container">
@@ -94,9 +95,3 @@
     </div>
   </footer>
 </template>
-
-<script>
-export default {
-  name: "app-footer"
-};
-</script>
diff --git a/src/examples/PageLayout/Navbar.vue b/src/examples/PageLayout/Navbar.vue
index 7453a8c..7b5b9a5 100644
--- a/src/examples/PageLayout/Navbar.vue
+++ b/src/examples/PageLayout/Navbar.vue
@@ -1,3 +1,11 @@
+<script setup>
+defineProps({
+  isBlur: {
+    type: String,
+    default: "",
+  },
+});
+</script>
 <template>
   <!-- Navbar -->
   <nav
@@ -90,33 +98,3 @@
   </nav>
   <!-- End Navbar -->
 </template>
-
-<script>
-import downArrWhite from "@/assets/img/down-arrow-white.svg";
-import downArrBlack from "@/assets/img/down-arrow-dark.svg";
-
-export default {
-  name: "navbar",
-  data() {
-    return {
-      downArrWhite,
-      downArrBlack,
-    };
-  },
-  props: {
-    btnBackground: String,
-    isBlur: String,
-    darkMode: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  computed: {
-    darkModes() {
-      return {
-        "text-dark": this.darkMode,
-      };
-    },
-  },
-};
-</script>
diff --git a/src/examples/Sidenav/SidenavCard.vue b/src/examples/Sidenav/SidenavCard.vue
index b0177f5..56f44c2 100644
--- a/src/examples/Sidenav/SidenavCard.vue
+++ b/src/examples/Sidenav/SidenavCard.vue
@@ -1,3 +1,34 @@
+<script setup>
+import { computed } from "vue";
+import { useStore } from "vuex";
+import imgWhiteCurved from "@/assets/img/curved-images/white-curved.jpeg";
+
+const store = useStore();
+const isRTL = computed(() => store.state.isRTL);
+
+defineProps({
+  textPrimary: {
+    type: String,
+    default: "",
+  },
+  textSecondary: {
+    type: String,
+    default: "",
+  },
+  route: {
+    type: String,
+    default: "",
+  },
+  label: {
+    type: String,
+    default: "",
+  },
+  icon: {
+    type: String,
+    default: "",
+  },
+});
+</script>
 <template>
   <div
     id="sidenavCard"
@@ -18,7 +49,7 @@
           :class="icon"
         ></i>
       </div>
-      <div v-if="this.$store.state.isRTL" class="docs-info">
+      <div v-if="isRTL" class="docs-info">
         <h6 class="mb-0 text-white up text-end">تحتاج مساعدة ؟</h6>
         <p class="text-xs font-weight-bold text-end">
           يرجى التحقق من مستنداتنا
@@ -37,36 +68,3 @@
     </div>
   </div>
 </template>
-<script>
-import imgWhiteCurved from "../../assets/img/curved-images/white-curved.jpeg";
-export default {
-  name: "SidenavCard",
-  props: {
-    textPrimary: {
-      type: String,
-      default: "",
-    },
-    textSecondary: {
-      type: String,
-      default: "",
-    },
-    route: {
-      type: String,
-      default: "",
-    },
-    label: {
-      type: String,
-      default: "",
-    },
-    icon: {
-      type: String,
-      default: "",
-    },
-  },
-  data() {
-    return {
-      imgWhiteCurved,
-    };
-  },
-};
-</script>
diff --git a/src/examples/Sidenav/SidenavCollapse.vue b/src/examples/Sidenav/SidenavCollapse.vue
index 8883aea..36f7fe0 100644
--- a/src/examples/Sidenav/SidenavCollapse.vue
+++ b/src/examples/Sidenav/SidenavCollapse.vue
@@ -1,35 +1,31 @@
+<script setup>
+import { computed } from "vue";
+import { useStore } from "vuex";
+
+const store = useStore();
+const isRTL = computed(() => store.state.isRTL);
+
+defineProps({
+  to: {
+    type: [Object, String],
+    required: true,
+  },
+  navText: {
+    type: String,
+    required: true,
+  },
+});
+</script>
 <template>
   <router-link class="nav-link" :to="to" v-bind="$attrs">
     <div
       class="text-center bg-white shadow icon icon-shape icon-sm border-radius-md d-flex align-items-center justify-content-center"
-      :class="this.$store.state.isRTL ? ' ms-2' : 'me-2'"
+      :class="isRTL ? ' ms-2' : 'me-2'"
     >
       <slot name="icon"></slot>
     </div>
-    <span
-      class="nav-link-text"
-      :class="this.$store.state.isRTL ? ' me-1' : 'ms-1'"
-      >{{ navText }}</span
-    >
+    <span class="nav-link-text" :class="isRTL ? ' me-1' : 'ms-1'">{{
+      navText
+    }}</span>
   </router-link>
 </template>
-<script>
-export default {
-  name: "sidenav-collapse",
-  props: {
-    to: {
-      type: [Object, String],
-      required: true,
-    },
-    navText: {
-      type: String,
-      required: true,
-    },
-  },
-  data() {
-    return {
-      isExpanded: false,
-    };
-  },
-};
-</script>
diff --git a/src/examples/Sidenav/SidenavList.vue b/src/examples/Sidenav/SidenavList.vue
index f4ad722..70c5468 100644
--- a/src/examples/Sidenav/SidenavList.vue
+++ b/src/examples/Sidenav/SidenavList.vue
@@ -1,3 +1,28 @@
+<script setup>
+import { computed } from "vue";
+import { useStore } from "vuex";
+
+import SidenavCollapse from "./SidenavCollapse.vue";
+import SidenavCard from "./SidenavCard.vue";
+import Shop from "../../components/Icon/Shop.vue";
+import Office from "../../components/Icon/Office.vue";
+import CreditCard from "../../components/Icon/CreditCard.vue";
+import Box3d from "../../components/Icon/Box3d.vue";
+import CustomerSupport from "../../components/Icon/CustomerSupport.vue";
+import Document from "../../components/Icon/Document.vue";
+import Spaceship from "../../components/Icon/Spaceship.vue";
+import Settings from "../../components/Icon/Settings.vue";
+
+const store = useStore();
+const isRTL = computed(() => store.state.isRTL);
+
+defineProps({
+  cardBg: {
+    type: String,
+    default: "",
+  },
+});
+</script>
 <template>
   <div
     class="w-auto h-auto collapse navbar-collapse max-height-vh-100 h-100"
@@ -46,7 +71,7 @@
       <li class="mt-3 nav-item">
         <h6
           class="text-xs ps-4 text-uppercase font-weight-bolder opacity-6"
-          :class="this.$store.state.isRTL ? 'me-4' : 'ms-2'"
+          :class="isRTL ? 'me-4' : 'ms-2'"
         >
           PAGES
         </h6>
@@ -91,47 +116,3 @@
     >
   </div>
 </template>
-<script>
-import SidenavCollapse from "./SidenavCollapse.vue";
-import SidenavCard from "./SidenavCard.vue";
-import Shop from "../../components/Icon/Shop.vue";
-import Office from "../../components/Icon/Office.vue";
-import CreditCard from "../../components/Icon/CreditCard.vue";
-import Box3d from "../../components/Icon/Box3d.vue";
-import CustomerSupport from "../../components/Icon/CustomerSupport.vue";
-import Document from "../../components/Icon/Document.vue";
-import Spaceship from "../../components/Icon/Spaceship.vue";
-import Settings from "../../components/Icon/Settings.vue";
-
-export default {
-  name: "SidenavList",
-  props: {
-    cardBg: String,
-  },
-  data() {
-    return {
-      title: "Soft UI Dashboard PRO",
-      controls: "dashboardsExamples",
-      isActive: "active",
-    };
-  },
-  components: {
-    SidenavCollapse,
-    SidenavCard,
-    Shop,
-    Office,
-    CreditCard,
-    Box3d,
-    CustomerSupport,
-    Document,
-    Spaceship,
-    Settings,
-  },
-  methods: {
-    getRoute() {
-      const routeArr = this.$route.path.split("/");
-      return routeArr[1];
-    },
-  },
-};
-</script>
diff --git a/src/examples/Sidenav/index.vue b/src/examples/Sidenav/index.vue
index a275250..be23b29 100644
--- a/src/examples/Sidenav/index.vue
+++ b/src/examples/Sidenav/index.vue
@@ -1,3 +1,18 @@
+<script setup>
+import { computed } from "vue";
+import { useStore } from "vuex";
+import SidenavList from "./SidenavList.vue";
+import logo from "@/assets/img/logo-ct.png";
+
+const store = useStore();
+const isRTL = computed(() => store.state.isRTL);
+defineProps({
+  customClass: {
+    type: String,
+    default: "",
+  },
+});
+</script>
 <template>
   <aside
     class="my-3 overflow-auto border-0 sidenav navbar navbar-vertical navbar-expand-xs border-radius-xl"
@@ -19,29 +34,3 @@
     <sidenav-list :cardBg="customClass" />
   </aside>
 </template>
-<script>
-import SidenavList from "./SidenavList.vue";
-import logo from "@/assets/img/logo-ct.png";
-import { mapState } from "vuex";
-
-export default {
-  name: "index",
-  components: {
-    SidenavList,
-  },
-  data() {
-    return {
-      logo,
-    };
-  },
-  props: {
-    customClass: {
-      type: String,
-      default: "",
-    },
-  },
-  computed: {
-    ...mapState(["isRTL"]),
-  },
-};
-</script>
diff --git a/src/main.js b/src/main.js
index 34a81ad..88657a2 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,10 +1,10 @@
 /**
 =========================================================
-* Vue Soft UI Dashboard - v3.0.0
+* Vue Soft UI Dashboard - v4.0.0
 =========================================================
 
 * Product Page: https://creative-tim.com/product/vue-soft-ui-dashboard
-* Copyright 2022 Creative Tim (https://www.creative-tim.com)
+* Copyright 2023 Creative Tim (https://www.creative-tim.com)
 
 Coded by www.creative-tim.com
 
diff --git a/src/store/index.js b/src/store/index.js
index d6d8349..03abefc 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -31,10 +31,15 @@ export default createStore({
         sidenav_show.classList.remove("g-sidenav-hidden");
         sidenav_show.classList.add("g-sidenav-pinned");
         state.isPinned = true;
-      } else {
+      } else if (sidenav_show.classList.contains("g-sidenav-pinned")) {
         sidenav_show.classList.add("g-sidenav-hidden");
         sidenav_show.classList.remove("g-sidenav-pinned");
         state.isPinned = false;
+      } else if (window.innerWidth < 1200) {
+        sidenav_show.classList.add("g-sidenav-pinned");
+        state.isPinned = true;
+      } else {
+        sidenav_show.classList.add("g-sidenav-hidden");
       }
     },
     sidebarType(state, payload) {
diff --git a/src/views/Billing.vue b/src/views/Billing.vue
index 3823b62..6971ee7 100644
--- a/src/views/Billing.vue
+++ b/src/views/Billing.vue
@@ -1,3 +1,22 @@
+<script setup>
+import { onMounted } from "vue";
+
+import NavPill from "./components/NavPill.vue";
+import MasterCard from "@/examples/Cards/MasterCard.vue";
+import DefaultInfoCard from "@/examples/Cards/DefaultInfoCard.vue";
+import PaymentMethodsCard from "./components/PaymentMethodsCard.vue";
+import InvoiceCard from "./components/InvoiceCard.vue";
+import BillingCard from "./components/BillingCard.vue";
+import RankingList from "@/examples/Cards/RankingList.vue";
+import RankingListCard from "@/examples/Cards/RankingListCard.vue";
+
+// tooltip
+import setTooltip from "@/assets/js/tooltip.js";
+
+onMounted(() => {
+  setTooltip();
+});
+</script>
 <template>
   <div class="container-fluid mt-4">
     <div class="row align-items-center">
@@ -130,32 +149,3 @@
     </div>
   </div>
 </template>
-
-<script>
-import setTooltip from "@/assets/js/tooltip.js";
-import NavPill from "./components/NavPill.vue";
-import MasterCard from "@/examples/Cards/MasterCard.vue";
-import DefaultInfoCard from "@/examples/Cards/DefaultInfoCard.vue";
-import PaymentMethodsCard from "./components/PaymentMethodsCard.vue";
-import InvoiceCard from "./components/InvoiceCard.vue";
-import BillingCard from "./components/BillingCard.vue";
-import RankingList from "@/examples/Cards/RankingList.vue";
-import RankingListCard from "@/examples/Cards/RankingListCard.vue";
-
-export default {
-  name: "Billing",
-  components: {
-    NavPill,
-    MasterCard,
-    DefaultInfoCard,
-    PaymentMethodsCard,
-    InvoiceCard,
-    BillingCard,
-    RankingList,
-    RankingListCard,
-  },
-  mounted() {
-    setTooltip();
-  },
-};
-</script>
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index 87379d3..20c6421 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -1,3 +1,20 @@
+<script setup>
+import MiniStatisticsCard from "@/examples/Cards/MiniStatisticsCard.vue";
+import ReportsBarChart from "@/examples/Charts/ReportsBarChart.vue";
+import GradientLineChart from "@/examples/Charts/GradientLineChart.vue";
+import TimelineList from "./components/TimelineList.vue";
+import TimelineItem from "./components/TimelineItem.vue";
+import ProjectsCard from "./components/ProjectsCard.vue";
+
+import {
+  faHandPointer,
+  faUsers,
+  faCreditCard,
+  faScrewdriverWrench,
+} from "@fortawesome/free-solid-svg-icons";
+
+const iconBackground = "bg-gradient-success";
+</script>
 <template>
   <div class="py-4 container-fluid">
     <div class="row">
@@ -114,7 +131,7 @@
           <div
             class="overflow-hidden position-relative border-radius-lg bg-cover h-100"
             style="
-              background-image: url('https://demos.creative-tim.com/soft-ui-dashboard/assets/img/ivancik.jpg');
+              background-image: url(&quot;https://demos.creative-tim.com/soft-ui-dashboard/assets/img/ivancik.jpg&quot;);
             "
           >
             <span class="mask bg-gradient-dark"></span>
@@ -284,71 +301,3 @@
     </div>
   </div>
 </template>
-<script>
-import MiniStatisticsCard from "@/examples/Cards/MiniStatisticsCard.vue";
-import ReportsBarChart from "@/examples/Charts/ReportsBarChart.vue";
-import GradientLineChart from "@/examples/Charts/GradientLineChart.vue";
-import TimelineList from "./components/TimelineList.vue";
-import TimelineItem from "./components/TimelineItem.vue";
-import ProjectsCard from "./components/ProjectsCard.vue";
-import US from "../assets/img/icons/flags/US.png";
-import DE from "../assets/img/icons/flags/DE.png";
-import GB from "../assets/img/icons/flags/GB.png";
-import BR from "../assets/img/icons/flags/BR.png";
-import {
-  faHandPointer,
-  faUsers,
-  faCreditCard,
-  faScrewdriverWrench,
-} from "@fortawesome/free-solid-svg-icons";
-export default {
-  name: "dashboard-default",
-  data() {
-    return {
-      iconBackground: "bg-gradient-success",
-      faCreditCard,
-      faScrewdriverWrench,
-      faUsers,
-      faHandPointer,
-      sales: {
-        us: {
-          country: "United States",
-          sales: 2500,
-          value: "$230,900",
-          bounce: "29.9%",
-          flag: US,
-        },
-        germany: {
-          country: "Germany",
-          sales: "3.900",
-          value: "$440,000",
-          bounce: "40.22%",
-          flag: DE,
-        },
-        britain: {
-          country: "Great Britain",
-          sales: "1.400",
-          value: "$190,700",
-          bounce: "23.44%",
-          flag: GB,
-        },
-        brasil: {
-          country: "Brasil",
-          sales: "562",
-          value: "$143,960",
-          bounce: "32.14%",
-          flag: BR,
-        },
-      },
-    };
-  },
-  components: {
-    MiniStatisticsCard,
-    ReportsBarChart,
-    GradientLineChart,
-    ProjectsCard,
-    TimelineList,
-    TimelineItem,
-  },
-};
-</script>
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 96bef79..824104d 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,14 +1,6 @@
+<script setup>
+import DefaultDashboard from "@/views/dashboards/Default.vue";
+</script>
 <template>
   <default-dashboard />
 </template>
-
-<script>
-import DefaultDashboard from "@/views/dashboards/Default.vue";
-
-export default {
-  name: "Home",
-  components: {
-    DefaultDashboard,
-  },
-};
-</script>
diff --git a/src/views/Profile.vue b/src/views/Profile.vue
index 78891be..cbe33ac 100644
--- a/src/views/Profile.vue
+++ b/src/views/Profile.vue
@@ -1,3 +1,52 @@
+<script setup>
+import { onMounted, onBeforeUnmount } from "vue";
+import { useStore } from "vuex";
+
+// components
+import SoftSwitch from "@/components/SoftSwitch.vue";
+import ProfileInfoCard from "./components/ProfileInfoCard.vue";
+import SoftAvatar from "@/components/SoftAvatar.vue";
+import DefaultProjectCard from "./components/DefaultProjectCard.vue";
+import PlaceHolderCard from "@/examples/Cards/PlaceHolderCard.vue";
+
+// icons
+import {
+  faFacebook,
+  faTwitter,
+  faInstagram,
+} from "@fortawesome/free-brands-svg-icons";
+
+// navpill
+import setNavPills from "@/assets/js/nav-pills.js";
+// tooltip
+import setTooltip from "@/assets/js/tooltip.js";
+
+// images
+import sophie from "@/assets/img/kal-visuals-square.jpg";
+import marie from "@/assets/img/marie.jpg";
+import ivana from "@/assets/img/ivana-square.jpg";
+import peterson from "@/assets/img/team-4.jpg";
+import nick from "@/assets/img/team-3.jpg";
+import img1 from "@/assets/img/home-decor-1.jpg";
+import img2 from "@/assets/img/home-decor-2.jpg";
+import img3 from "@/assets/img/home-decor-3.jpg";
+import team1 from "@/assets/img/team-1.jpg";
+import team2 from "@/assets/img/team-2.jpg";
+import team3 from "@/assets/img/team-3.jpg";
+import team4 from "@/assets/img/team-4.jpg";
+
+const store = useStore();
+
+onMounted(() => {
+  store.state.isAbsolute = true;
+  setNavPills();
+  setTooltip();
+});
+
+onBeforeUnmount(() => {
+  store.state.isAbsolute = false;
+});
+</script>
 <template>
   <div class="container-fluid">
     <div
@@ -538,70 +587,3 @@
     </div>
   </div>
 </template>
-
-<script>
-import SoftSwitch from "@/components/SoftSwitch.vue";
-import ProfileInfoCard from "./components/ProfileInfoCard.vue";
-import SoftAvatar from "@/components/SoftAvatar.vue";
-import sophie from "@/assets/img/kal-visuals-square.jpg";
-import marie from "@/assets/img/marie.jpg";
-import ivana from "@/assets/img/ivana-square.jpg";
-import peterson from "@/assets/img/team-4.jpg";
-import nick from "@/assets/img/team-3.jpg";
-import img1 from "@/assets/img/home-decor-1.jpg";
-import img2 from "@/assets/img/home-decor-2.jpg";
-import img3 from "@/assets/img/home-decor-3.jpg";
-import team1 from "@/assets/img/team-1.jpg";
-import team2 from "@/assets/img/team-2.jpg";
-import team3 from "@/assets/img/team-3.jpg";
-import team4 from "@/assets/img/team-4.jpg";
-import {
-  faFacebook,
-  faTwitter,
-  faInstagram,
-} from "@fortawesome/free-brands-svg-icons";
-import DefaultProjectCard from "./components/DefaultProjectCard.vue";
-import PlaceHolderCard from "@/examples/Cards/PlaceHolderCard.vue";
-import setNavPills from "@/assets/js/nav-pills.js";
-import setTooltip from "@/assets/js/tooltip.js";
-
-export default {
-  name: "ProfileOverview",
-  components: {
-    SoftSwitch,
-    ProfileInfoCard,
-    SoftAvatar,
-    DefaultProjectCard,
-    PlaceHolderCard,
-  },
-  data() {
-    return {
-      showMenu: false,
-      sophie,
-      marie,
-      ivana,
-      peterson,
-      nick,
-      img1,
-      team1,
-      team2,
-      team3,
-      team4,
-      img2,
-      img3,
-      faFacebook,
-      faTwitter,
-      faInstagram,
-    };
-  },
-
-  mounted() {
-    this.$store.state.isAbsolute = true;
-    setNavPills();
-    setTooltip(this.$store.state.bootstrap);
-  },
-  beforeUnmount() {
-    this.$store.state.isAbsolute = false;
-  },
-};
-</script>
diff --git a/src/views/Rtl.vue b/src/views/Rtl.vue
index 490572b..653b26c 100644
--- a/src/views/Rtl.vue
+++ b/src/views/Rtl.vue
@@ -1,3 +1,42 @@
+<script setup>
+import { onBeforeMount, onMounted, onBeforeUnmount } from "vue";
+import { useStore } from "vuex";
+
+// components
+import MiniStatisticsCard from "@/examples/Cards/MiniStatisticsCard.vue";
+import ReportsBarChart from "@/examples/Charts/ReportsBarChart";
+import GradientLineChart from "@/examples/Charts/GradientLineChart.vue";
+import TimelineList from "./components/TimelineList.vue";
+import TimelineItem from "./components/TimelineItem.vue";
+
+import setTooltip from "@/assets/js/tooltip.js";
+import {
+  faHandPointer,
+  faUsers,
+  faCreditCard,
+  faScrewdriverWrench,
+} from "@fortawesome/free-solid-svg-icons";
+
+const iconBackground = "bg-gradient-success";
+const store = useStore();
+
+onBeforeMount(() => {
+  store.state.isRTL = true;
+  document.querySelector("html").setAttribute("lang", "ar");
+  document.querySelector("html").setAttribute("dir", "rtl");
+  document.querySelector("#app").classList.add("rtl");
+});
+
+onMounted(() => {
+  setTooltip();
+});
+onBeforeUnmount(() => {
+  store.state.isRTL = false;
+  document.querySelector("html").removeAttribute("lang");
+  document.querySelector("html").removeAttribute("dir");
+  document.querySelector("#app").classList.remove("rtl");
+});
+</script>
 <template>
   <div class="py-4 container-fluid">
     <div class="row">
@@ -113,7 +152,7 @@
           <div
             class="overflow-hidden position-relative border-radius-lg bg-cover h-100"
             style="
-              background-image: url('https://demos.creative-tim.com/soft-ui-dashboard/assets/img/ivancik.jpg');
+              background-image: url(&quot;https://demos.creative-tim.com/soft-ui-dashboard/assets/img/ivancik.jpg&quot;);
             "
           >
             <span class="mask bg-gradient-dark"></span>
@@ -809,54 +848,3 @@
     </div>
   </div>
 </template>
-
-<script>
-import MiniStatisticsCard from "@/examples/Cards/MiniStatisticsCard.vue";
-import ReportsBarChart from "@/examples/Charts/ReportsBarChart";
-import GradientLineChart from "@/examples/Charts/GradientLineChart.vue";
-import TimelineList from "./components/TimelineList.vue";
-import TimelineItem from "./components/TimelineItem.vue";
-
-import setTooltip from "@/assets/js/tooltip.js";
-import {
-  faHandPointer,
-  faUsers,
-  faCreditCard,
-  faScrewdriverWrench,
-} from "@fortawesome/free-solid-svg-icons";
-
-export default {
-  name: "rtl-page",
-  data() {
-    return {
-      iconBackground: "bg-gradient-success",
-      faHandPointer,
-      faUsers,
-      faCreditCard,
-      faScrewdriverWrench,
-    };
-  },
-  components: {
-    MiniStatisticsCard,
-    ReportsBarChart,
-    GradientLineChart,
-    TimelineList,
-    TimelineItem,
-  },
-  mounted() {
-    setTooltip();
-  },
-  beforeMount() {
-    this.$store.state.isRTL = true;
-    document.querySelector("html").setAttribute("lang", "ar");
-    document.querySelector("html").setAttribute("dir", "rtl");
-    document.querySelector("#app").classList.add("rtl");
-  },
-  beforeUnmount() {
-    this.$store.state.isRTL = false;
-    document.querySelector("html").removeAttribute("lang");
-    document.querySelector("html").removeAttribute("dir");
-    document.querySelector("#app").classList.remove("rtl");
-  },
-};
-</script>
diff --git a/src/views/SignIn.vue b/src/views/SignIn.vue
index 69a876c..9845bde 100644
--- a/src/views/SignIn.vue
+++ b/src/views/SignIn.vue
@@ -1,3 +1,31 @@
+<script setup>
+import { onBeforeMount, onBeforeUnmount } from "vue";
+import { useStore } from "vuex";
+
+import Navbar from "@/examples/PageLayout/Navbar.vue";
+import AppFooter from "@/examples/PageLayout/Footer.vue";
+import SoftInput from "@/components/SoftInput.vue";
+import SoftSwitch from "@/components/SoftSwitch.vue";
+import SoftButton from "@/components/SoftButton.vue";
+
+const body = document.getElementsByTagName("body")[0];
+
+const store = useStore();
+
+const toggleEveryDisplay = () => store.commit("toggleEveryDisplay");
+const toggleHideConfig = () => store.commit("toggleHideConfig");
+
+onBeforeMount(() => {
+  toggleEveryDisplay();
+  toggleHideConfig();
+  body.classList.remove("bg-gray-100");
+});
+onBeforeUnmount(() => {
+  toggleEveryDisplay();
+  toggleHideConfig();
+  body.classList.add("bg-gray-100");
+});
+</script>
 <template>
   <div class="container top-0 position-sticky z-index-sticky">
     <div class="row">
@@ -87,37 +115,3 @@
   </main>
   <app-footer />
 </template>
-
-<script>
-import Navbar from "@/examples/PageLayout/Navbar.vue";
-import AppFooter from "@/examples/PageLayout/Footer.vue";
-import SoftInput from "@/components/SoftInput.vue";
-import SoftSwitch from "@/components/SoftSwitch.vue";
-import SoftButton from "@/components/SoftButton.vue";
-const body = document.getElementsByTagName("body")[0];
-import { mapMutations } from "vuex";
-
-export default {
-  name: "SignIn",
-  components: {
-    Navbar,
-    AppFooter,
-    SoftInput,
-    SoftSwitch,
-    SoftButton,
-  },
-  created() {
-    this.toggleEveryDisplay();
-    this.toggleHideConfig();
-    body.classList.remove("bg-gray-100");
-  },
-  beforeUnmount() {
-    this.toggleEveryDisplay();
-    this.toggleHideConfig();
-    body.classList.add("bg-gray-100");
-  },
-  methods: {
-    ...mapMutations(["toggleEveryDisplay", "toggleHideConfig"]),
-  },
-};
-</script>
diff --git a/src/views/SignUp.vue b/src/views/SignUp.vue
index 3ce969c..09e032f 100644
--- a/src/views/SignUp.vue
+++ b/src/views/SignUp.vue
@@ -1,3 +1,26 @@
+<script setup>
+import { onBeforeMount, onBeforeUnmount } from "vue";
+import { useStore } from "vuex";
+
+import Navbar from "@/examples/PageLayout/Navbar.vue";
+import AppFooter from "@/examples/PageLayout/Footer.vue";
+import SoftInput from "@/components/SoftInput.vue";
+import SoftCheckbox from "@/components/SoftCheckbox.vue";
+import SoftButton from "@/components/SoftButton.vue";
+
+const store = useStore();
+const toggleEveryDisplay = () => store.commit("toggleEveryDisplay");
+const toggleHideConfig = () => store.commit("toggleHideConfig");
+
+onBeforeMount(() => {
+  toggleEveryDisplay();
+  toggleHideConfig();
+});
+onBeforeUnmount(() => {
+  toggleEveryDisplay();
+  toggleHideConfig();
+});
+</script>
 <template>
   <navbar btn-background="bg-gradient-primary" />
   <div
@@ -199,35 +222,3 @@
   </div>
   <app-footer />
 </template>
-
-<script>
-import Navbar from "@/examples/PageLayout/Navbar.vue";
-import AppFooter from "@/examples/PageLayout/Footer.vue";
-import SoftInput from "@/components/SoftInput.vue";
-import SoftCheckbox from "@/components/SoftCheckbox.vue";
-import SoftButton from "@/components/SoftButton.vue";
-
-import { mapMutations } from "vuex";
-
-export default {
-  name: "SignupBasic",
-  components: {
-    Navbar,
-    AppFooter,
-    SoftInput,
-    SoftCheckbox,
-    SoftButton,
-  },
-  created() {
-    this.toggleEveryDisplay();
-    this.toggleHideConfig();
-  },
-  beforeUnmount() {
-    this.toggleEveryDisplay();
-    this.toggleHideConfig();
-  },
-  methods: {
-    ...mapMutations(["toggleEveryDisplay", "toggleHideConfig"]),
-  },
-};
-</script>
diff --git a/src/views/Tables.vue b/src/views/Tables.vue
index fe848b4..632b731 100644
--- a/src/views/Tables.vue
+++ b/src/views/Tables.vue
@@ -1,3 +1,7 @@
+<script setup>
+import AuthorsTable from "./components/AuthorsTable";
+import ProjectsTable from "./components/ProjectsTable";
+</script>
 <template>
   <div class="py-4 container-fluid">
     <div class="row">
@@ -12,16 +16,3 @@
     </div>
   </div>
 </template>
-
-<script>
-import AuthorsTable from "./components/AuthorsTable";
-import ProjectsTable from "./components/ProjectsTable";
-
-export default {
-  name: "tables",
-  components: {
-    AuthorsTable,
-    ProjectsTable,
-  },
-};
-</script>
diff --git a/src/views/VirtualReality.vue b/src/views/VirtualReality.vue
index 912c338..c7d2fc4 100644
--- a/src/views/VirtualReality.vue
+++ b/src/views/VirtualReality.vue
@@ -1,9 +1,60 @@
+<script setup>
+import { onMounted, onBeforeMount, onBeforeUnmount } from "vue";
+import { useStore } from "vuex";
+
+import Sidenav from "@/examples/Sidenav";
+import AppFooter from "@/examples/Footer.vue";
+import Navbar from "@/examples/Navbars/Navbar.vue";
+import CalendarCard from "./components/CalendarCard.vue";
+import EmailCard from "./components/EmailCard.vue";
+import TodoCard from "./components/TodoCard.vue";
+import MiniPlayerCard from "@/examples/Cards/MiniPlayerCard.vue";
+import MessageCard from "./components/MessageCard.vue";
+import setTooltip from "@/assets/js/tooltip.js";
+
+import image1 from "@/assets/img/team-1.jpg";
+import image2 from "@/assets/img/team-2.jpg";
+import image3 from "@/assets/img/team-3.jpg";
+import image4 from "@/assets/img/team-4.jpg";
+
+const body = document.getElementsByTagName("body")[0];
+
+const store = useStore();
+const navbarMinimize = () => store.commit("navbarMinimize");
+const toggleConfigurator = () => store.commit("toggleConfigurator");
+
+onBeforeMount(() => {
+  store.state.showNavbar = false;
+  store.state.showSidenav = false;
+  store.state.showFooter = false;
+  body.classList.add("virtual-reality");
+  store.state.isTransparent = "bg-white";
+});
+
+onMounted(() => {
+  setTooltip();
+});
+onBeforeUnmount(() => {
+  store.state.showNavbar = true;
+  store.state.showSidenav = true;
+  store.state.showFooter = true;
+  body.classList.remove("virtual-reality");
+
+  if (store.state.isPinned === false) {
+    const sidenav_show = document.querySelector(".g-sidenav-show");
+    sidenav_show.classList.remove("g-sidenav-hidden");
+    sidenav_show.classList.add("g-sidenav-pinned");
+    store.state.isPinned = true;
+  }
+  store.state.isTransparent = "bg-transparent";
+});
+</script>
 <template>
   <div>
     <navbar
       :min-nav="navbarMinimize"
       :toggle="toggleConfigurator"
-      :class="isNavFixed ? navbarFixed : ''"
+      :class="store.state.isNavFixed ? store.state.navbarFixed : ''"
     />
   </div>
   <div
@@ -14,8 +65,8 @@
     }"
   >
     <sidenav
-      :custom_class="mcolor"
-      :class="isTransparent"
+      :custom_class="store.state.mcolor"
+      :class="store.state.isTransparent"
       class="fixed-start"
     />
     <main class="mt-1 main-content border-radius-lg">
@@ -29,7 +80,7 @@
                 href="javascript:;"
                 class="border-0 avatar avatar-md d-block"
                 data-bs-toggle="tooltip"
-                data-bs-placement="left"
+                data-bs-placement="right"
                 title="My Profile"
               >
                 <img
@@ -42,7 +93,7 @@
                 class="p-2 mt-2 btn btn-white border-radius-lg d-block"
                 type="button"
                 data-bs-toggle="tooltip"
-                data-bs-placement="left"
+                data-bs-placement="right"
                 title="Home"
               >
                 <i class="p-2 fas fa-home"></i>
@@ -51,7 +102,7 @@
                 class="p-2 btn btn-white border-radius-lg d-block"
                 type="button"
                 data-bs-toggle="tooltip"
-                data-bs-placement="left"
+                data-bs-placement="right"
                 title="Search"
               >
                 <i class="p-2 fas fa-search"></i>
@@ -60,7 +111,7 @@
                 class="p-2 btn btn-white border-radius-lg d-block"
                 type="button"
                 data-bs-toggle="tooltip"
-                data-bs-placement="left"
+                data-bs-placement="right"
                 title="Minimize"
               >
                 <i class="p-2 fas fa-ellipsis-h"></i>
@@ -139,76 +190,3 @@
   </div>
   <app-footer class="py-3 bg-white border-radius-lg" />
 </template>
-
-<script>
-import Sidenav from "@/examples/Sidenav";
-import AppFooter from "@/examples/Footer.vue";
-import Navbar from "@/examples/Navbars/Navbar.vue";
-import CalendarCard from "./components/CalendarCard.vue";
-import EmailCard from "./components/EmailCard.vue";
-import TodoCard from "./components/TodoCard.vue";
-import MiniPlayerCard from "@/examples/Cards/MiniPlayerCard.vue";
-import MessageCard from "./components/MessageCard.vue";
-import setTooltip from "@/assets/js/tooltip.js";
-
-import image1 from "@/assets/img/team-1.jpg";
-import image2 from "@/assets/img/team-2.jpg";
-import image3 from "@/assets/img/team-3.jpg";
-import image4 from "@/assets/img/team-4.jpg";
-
-const body = document.getElementsByTagName("body")[0];
-
-import { mapMutations, mapState } from "vuex";
-
-export default {
-  name: "VrInfo",
-  components: {
-    AppFooter,
-    Sidenav,
-    Navbar,
-    CalendarCard,
-    EmailCard,
-    TodoCard,
-    MiniPlayerCard,
-    MessageCard,
-  },
-  data() {
-    return {
-      image1,
-      image2,
-      image3,
-      image4,
-    };
-  },
-  computed: {
-    ...mapState(["isTransparent", "isNavFixed", "navbarFixed", "mcolor"]),
-  },
-  mounted() {
-    setTooltip(this.$store.state.bootstrap);
-  },
-  beforeMount() {
-    this.$store.state.showNavbar = false;
-    this.$store.state.showSidenav = false;
-    this.$store.state.showFooter = false;
-    body.classList.add("virtual-reality");
-    this.$store.state.isTransparent = "bg-white";
-  },
-  beforeUnmount() {
-    this.$store.state.showNavbar = true;
-    this.$store.state.showSidenav = true;
-    this.$store.state.showFooter = true;
-    body.classList.remove("virtual-reality");
-
-    if (this.$store.state.isPinned === false) {
-      const sidenav_show = document.querySelector(".g-sidenav-show");
-      sidenav_show.classList.remove("g-sidenav-hidden");
-      sidenav_show.classList.add("g-sidenav-pinned");
-      this.$store.state.isPinned = true;
-    }
-    this.$store.state.isTransparent = "bg-transparent";
-  },
-  methods: {
-    ...mapMutations(["navbarMinimize", "toggleConfigurator"]),
-  },
-};
-</script>
diff --git a/src/views/components/AuthorsTable.vue b/src/views/components/AuthorsTable.vue
index 8a015d3..fb8005c 100644
--- a/src/views/components/AuthorsTable.vue
+++ b/src/views/components/AuthorsTable.vue
@@ -1,3 +1,13 @@
+<script setup>
+import SoftAvatar from "@/components/SoftAvatar.vue";
+import SoftBadge from "@/components/SoftBadge.vue";
+import img1 from "@/assets/img/team-2.jpg";
+import img2 from "@/assets/img/team-3.jpg";
+import img3 from "@/assets/img/team-4.jpg";
+import img4 from "@/assets/img/team-3.jpg";
+import img5 from "@/assets/img/team-2.jpg";
+import img6 from "@/assets/img/team-4.jpg";
+</script>
 <template>
   <div class="card mb-4">
     <div class="card-header pb-0">
@@ -302,32 +312,3 @@
     </div>
   </div>
 </template>
-
-<script>
-import SoftAvatar from "@/components/SoftAvatar.vue";
-import SoftBadge from "@/components/SoftBadge.vue";
-import img1 from "../../assets/img/team-2.jpg";
-import img2 from "../../assets/img/team-3.jpg";
-import img3 from "../../assets/img/team-4.jpg";
-import img4 from "../../assets/img/team-3.jpg";
-import img5 from "../../assets/img/team-2.jpg";
-import img6 from "../../assets/img/team-4.jpg";
-
-export default {
-  name: "authors-table",
-  data() {
-    return {
-      img1,
-      img2,
-      img3,
-      img4,
-      img5,
-      img6,
-    };
-  },
-  components: {
-    SoftAvatar,
-    SoftBadge,
-  },
-};
-</script>
diff --git a/src/views/components/BillingCard.vue b/src/views/components/BillingCard.vue
index 3596eae..c984e49 100644
--- a/src/views/components/BillingCard.vue
+++ b/src/views/components/BillingCard.vue
@@ -1,3 +1,19 @@
+<script setup>
+defineProps({
+  title: {
+    type: String,
+    default: "",
+  },
+  bills: {
+    type: Array,
+    name: String,
+    company: String,
+    email: String,
+    id: String,
+    default: () => [],
+  },
+});
+</script>
 <template>
   <div class="card">
     <div class="card-header pb-0 px-3">
@@ -46,23 +62,3 @@
     </div>
   </div>
 </template>
-
-<script>
-export default {
-  name: "BillingCard",
-  props: {
-    title: {
-      type: String,
-      default: "",
-    },
-    bills: {
-      type: Array,
-      name: String,
-      company: String,
-      email: String,
-      id: String,
-      default: () => [],
-    },
-  },
-};
-</script>
diff --git a/src/views/components/CalendarCard.vue b/src/views/components/CalendarCard.vue
index d507dd4..ecb14f3 100644
--- a/src/views/components/CalendarCard.vue
+++ b/src/views/components/CalendarCard.vue
@@ -1,10 +1,19 @@
+<script setup>
+defineProps({
+  items: {
+    type: Array,
+    default: () => {},
+    time: [String, Number],
+    description: String,
+  },
+});
+</script>
 <template>
   <div class="overflow-hidden card move-on-hover">
     <div class="card-body">
       <template v-for="({ time, description }, index) of items" :key="index">
         <div class="d-flex">
           <h6 class="mb-0 me-3">{{ time }}</h6>
-          <!-- eslint-disable-next-line vue/no-v-html -->
           <h6 class="mb-0" v-html="description" />
         </div>
         <hr v-if="index !== items.length - 1" class="horizontal dark" />
@@ -21,17 +30,3 @@
     </a>
   </div>
 </template>
-
-<script>
-export default {
-  name: "CalendarCard",
-  props: {
-    items: {
-      type: Array,
-      default: () => {},
-      time: [String, Number],
-      description: String,
-    },
-  },
-};
-</script>
diff --git a/src/views/components/DefaultProjectCard.vue b/src/views/components/DefaultProjectCard.vue
index fa2e58b..a214e8a 100644
--- a/src/views/components/DefaultProjectCard.vue
+++ b/src/views/components/DefaultProjectCard.vue
@@ -1,3 +1,36 @@
+<script setup>
+defineProps({
+  image: {
+    type: String,
+    default: "",
+  },
+  label: {
+    type: String,
+    default: "",
+  },
+  title: {
+    type: String,
+    default: "Default Project Card",
+  },
+  description: {
+    type: String,
+    default: "",
+  },
+  action: {
+    type: Object,
+    route: String,
+    color: String,
+    label: String,
+    default: () => {},
+  },
+  authors: {
+    type: Array,
+    image: String,
+    name: String,
+    default: () => [],
+  },
+});
+</script>
 <template>
   <div class="mb-4 col-xl-3 col-md-6 mb-xl-0">
     <div class="card card-blog card-plain">
@@ -44,40 +77,3 @@
     </div>
   </div>
 </template>
-
-<script>
-export default {
-  name: "DefaultProjectCard",
-  props: {
-    image: {
-      type: String,
-      default: "",
-    },
-    label: {
-      type: String,
-      default: "",
-    },
-    title: {
-      type: String,
-      default: "Default Project Card",
-    },
-    description: {
-      type: String,
-      default: "",
-    },
-    action: {
-      type: Object,
-      route: String,
-      color: String,
-      label: String,
-      default: () => {},
-    },
-    authors: {
-      type: Array,
-      image: String,
-      name: String,
-      default: () => [],
-    },
-  },
-};
-</script>
diff --git a/src/views/components/EmailCard.vue b/src/views/components/EmailCard.vue
index 7ce1e7e..21c52e0 100644
--- a/src/views/components/EmailCard.vue
+++ b/src/views/components/EmailCard.vue
@@ -1,3 +1,19 @@
+<script setup>
+defineProps({
+  route: {
+    type: String,
+    default: "",
+  },
+  text: {
+    type: String,
+    default: "Emails (21)",
+  },
+  tooltip: {
+    type: String,
+    default: "Check your emails",
+  },
+});
+</script>
 <template>
   <div class="mt-4 card move-on-hover">
     <div class="card-body">
@@ -17,23 +33,3 @@
     </div>
   </div>
 </template>
-
-<script>
-export default {
-  name: "EmailCard",
-  props: {
-    route: {
-      type: String,
-      default: "",
-    },
-    text: {
-      type: String,
-      default: "Emails (21)",
-    },
-    tooltip: {
-      type: String,
-      default: "Check your emails",
-    },
-  },
-};
-</script>
diff --git a/src/views/components/InvoiceCard.vue b/src/views/components/InvoiceCard.vue
index 4b7dae2..e415618 100644
--- a/src/views/components/InvoiceCard.vue
+++ b/src/views/components/InvoiceCard.vue
@@ -1,3 +1,6 @@
+<script setup>
+import SoftButton from "@/components/SoftButton.vue";
+</script>
 <template>
   <div class="card h-100 mt-4">
     <div class="card-header pb-0 p-3">
@@ -103,14 +106,3 @@
     </div>
   </div>
 </template>
-
-<script>
-import SoftButton from "@/components/SoftButton.vue";
-
-export default {
-  name: "InvoiceCard",
-  components: {
-    SoftButton,
-  },
-};
-</script>
diff --git a/src/views/components/MessageCard.vue b/src/views/components/MessageCard.vue
index 2c7b6cb..7f3705f 100644
--- a/src/views/components/MessageCard.vue
+++ b/src/views/components/MessageCard.vue
@@ -1,3 +1,22 @@
+<script setup>
+defineProps({
+  title: {
+    type: String,
+    default: "Messages",
+  },
+  messages: {
+    type: Array,
+    route: String,
+    tooltip: String,
+    image: {
+      type: [String, Object],
+      url: String,
+      alt: String,
+    },
+    default: () => [],
+  },
+});
+</script>
 <template>
   <div class="mt-4 card move-on-hover">
     <div class="card-body">
@@ -27,26 +46,3 @@
     </div>
   </div>
 </template>
-
-<script>
-export default {
-  name: "MessageCard",
-  props: {
-    title: {
-      type: String,
-      default: "Messages",
-    },
-    messages: {
-      type: Array,
-      route: String,
-      tooltip: String,
-      image: {
-        type: [String, Object],
-        url: String,
-        alt: String,
-      },
-      default: () => [],
-    },
-  },
-};
-</script>
diff --git a/src/views/components/NavPill.vue b/src/views/components/NavPill.vue
index 52ff770..734dd97 100644
--- a/src/views/components/NavPill.vue
+++ b/src/views/components/NavPill.vue
@@ -1,3 +1,11 @@
+<script setup>
+import { onMounted } from "vue";
+import setNavPills from "@/assets/js/nav-pills.js";
+
+onMounted(() => {
+  setNavPills();
+});
+</script>
 <template>
   <div class="nav-wrapper position-relative end-0">
     <ul class="nav nav-pills nav-fill p-1" role="tablist">
@@ -44,14 +52,3 @@
     </ul>
   </div>
 </template>
-
-<script>
-import setNavPills from "@/assets/js/nav-pills.js";
-
-export default {
-  name: "nav-pill",
-  mounted() {
-    setNavPills();
-  },
-};
-</script>
diff --git a/src/views/components/PaymentMethodsCard.vue b/src/views/components/PaymentMethodsCard.vue
index 6858914..02b354d 100644
--- a/src/views/components/PaymentMethodsCard.vue
+++ b/src/views/components/PaymentMethodsCard.vue
@@ -1,3 +1,6 @@
+<script setup>
+import SoftButton from "@/components/SoftButton.vue";
+</script>
 <template>
   <div class="card mt-4">
     <div class="card-header pb-0 p-3">
@@ -67,22 +70,3 @@
     </div>
   </div>
 </template>
-
-<script>
-import SoftButton from "@/components/SoftButton.vue";
-import img1 from "@/assets/img/logos/mastercard.png";
-import img2 from "@/assets/img/logos/visa.png";
-
-export default {
-  name: "PaymentMethodsCard",
-  components: {
-    SoftButton,
-  },
-  data() {
-    return {
-      img1,
-      img2,
-    };
-  },
-};
-</script>
diff --git a/src/views/components/ProfileInfoCard.vue b/src/views/components/ProfileInfoCard.vue
index 7a52e60..6dfed6d 100644
--- a/src/views/components/ProfileInfoCard.vue
+++ b/src/views/components/ProfileInfoCard.vue
@@ -1,3 +1,39 @@
+<script setup>
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+
+defineProps({
+  title: {
+    type: String,
+    default: "",
+  },
+  description: {
+    type: String,
+    default: "",
+  },
+  info: {
+    type: Object,
+    fullName: String,
+    mobile: String,
+    email: String,
+    location: String,
+    default: () => {},
+  },
+  social: {
+    type: Array,
+    link: String,
+    icon: String,
+    default: () => [],
+  },
+  action: {
+    type: Object,
+    route: String,
+    tooltip: String,
+    default: () => ({
+      route: "javascript:;",
+    }),
+  },
+});
+</script>
 <template>
   <div class="card h-100">
     <div class="p-3 pb-0 card-header">
@@ -52,46 +88,3 @@
     </div>
   </div>
 </template>
-
-<script>
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-
-export default {
-  name: "ProfileInfoCard",
-  components: {
-    FontAwesomeIcon,
-  },
-  props: {
-    title: {
-      type: String,
-      default: "",
-    },
-    description: {
-      type: String,
-      default: "",
-    },
-    info: {
-      type: Object,
-      fullName: String,
-      mobile: String,
-      email: String,
-      location: String,
-      default: () => {},
-    },
-    social: {
-      type: Array,
-      link: String,
-      icon: String,
-      default: () => [],
-    },
-    action: {
-      type: Object,
-      route: String,
-      tooltip: String,
-      default: () => ({
-        route: "javascript:;",
-      }),
-    },
-  },
-};
-</script>
diff --git a/src/views/components/ProjectsCard.vue b/src/views/components/ProjectsCard.vue
index f7c4e0a..e3faf67 100644
--- a/src/views/components/ProjectsCard.vue
+++ b/src/views/components/ProjectsCard.vue
@@ -1,3 +1,39 @@
+<script setup>
+import { onMounted } from "vue";
+
+import setTooltip from "@/assets/js/tooltip.js";
+
+// components
+import SoftAvatar from "@/components/SoftAvatar.vue";
+import SoftProgress from "@/components/SoftProgress.vue";
+
+// images
+import img1 from "../../assets/img/small-logos/logo-xd.svg";
+import img2 from "../../assets/img/team-1.jpg";
+import img3 from "@/assets/img/team-2.jpg";
+import img4 from "../../assets/img/team-3.jpg";
+import img5 from "../../assets/img/team-4.jpg";
+import img6 from "../../assets/img/small-logos/logo-atlassian.svg";
+import img7 from "../../assets/img/team-2.jpg";
+import img8 from "../../assets/img/team-4.jpg";
+import img9 from "../../assets/img/small-logos/logo-slack.svg";
+import img10 from "../../assets/img/team-3.jpg";
+import img11 from "../../assets/img/team-1.jpg";
+import img12 from "../../assets/img/small-logos/logo-spotify.svg";
+import img13 from "../../assets/img/team-4.jpg";
+import img14 from "../../assets/img/team-3.jpg";
+import img15 from "../../assets/img/team-4.jpg";
+import img16 from "../../assets/img/team-1.jpg";
+import img17 from "../../assets/img/small-logos/logo-jira.svg";
+import img18 from "../../assets/img/team-4.jpg";
+import img19 from "../../assets/img/small-logos/logo-invision.svg";
+import img20 from "../../assets/img/team-1.jpg";
+import img21 from "../../assets/img/team-4.jpg";
+
+onMounted(() => {
+  setTooltip();
+});
+</script>
 <template>
   <div class="card">
     <div class="card-header pb-0">
@@ -430,66 +466,3 @@
     </div>
   </div>
 </template>
-
-<script>
-import setTooltip from "@/assets/js/tooltip.js";
-import SoftAvatar from "@/components/SoftAvatar.vue";
-import SoftProgress from "@/components/SoftProgress.vue";
-import img1 from "../../assets/img/small-logos/logo-xd.svg";
-import img2 from "../../assets/img/team-1.jpg";
-import img3 from "@/assets/img/team-2.jpg";
-import img4 from "../../assets/img/team-3.jpg";
-import img5 from "../../assets/img/team-4.jpg";
-import img6 from "../../assets/img/small-logos/logo-atlassian.svg";
-import img7 from "../../assets/img/team-2.jpg";
-import img8 from "../../assets/img/team-4.jpg";
-import img9 from "../../assets/img/small-logos/logo-slack.svg";
-import img10 from "../../assets/img/team-3.jpg";
-import img11 from "../../assets/img/team-1.jpg";
-import img12 from "../../assets/img/small-logos/logo-spotify.svg";
-import img13 from "../../assets/img/team-4.jpg";
-import img14 from "../../assets/img/team-3.jpg";
-import img15 from "../../assets/img/team-4.jpg";
-import img16 from "../../assets/img/team-1.jpg";
-import img17 from "../../assets/img/small-logos/logo-jira.svg";
-import img18 from "../../assets/img/team-4.jpg";
-import img19 from "../../assets/img/small-logos/logo-invision.svg";
-import img20 from "../../assets/img/team-1.jpg";
-import img21 from "../../assets/img/team-4.jpg";
-
-export default {
-  name: "projects-card",
-  data() {
-    return {
-      img1,
-      img2,
-      img3,
-      img4,
-      img5,
-      img6,
-      img7,
-      img8,
-      img9,
-      img10,
-      img11,
-      img12,
-      img13,
-      img14,
-      img15,
-      img16,
-      img17,
-      img18,
-      img19,
-      img20,
-      img21,
-    };
-  },
-  components: {
-    SoftAvatar,
-    SoftProgress,
-  },
-  mounted() {
-    setTooltip();
-  },
-};
-</script>
diff --git a/src/views/components/ProjectsTable.vue b/src/views/components/ProjectsTable.vue
index 6ddbe29..37bdc18 100644
--- a/src/views/components/ProjectsTable.vue
+++ b/src/views/components/ProjectsTable.vue
@@ -1,3 +1,6 @@
+<script setup>
+import SoftProgress from "@/components/SoftProgress";
+</script>
 <template>
   <div class="card mb-4">
     <div class="card-header pb-0">
@@ -292,14 +295,3 @@
     </div>
   </div>
 </template>
-
-<script>
-import SoftProgress from "@/components/SoftProgress";
-
-export default {
-  name: "projects-table",
-  components: {
-    SoftProgress,
-  },
-};
-</script>
diff --git a/src/views/components/TimelineItem.vue b/src/views/components/TimelineItem.vue
index 634bebb..a664ded 100644
--- a/src/views/components/TimelineItem.vue
+++ b/src/views/components/TimelineItem.vue
@@ -1,3 +1,35 @@
+<script setup>
+defineProps({
+  color: {
+    type: String,
+    default: "",
+  },
+  icon: {
+    type: String,
+    default: "",
+  },
+  title: {
+    type: String,
+    default: "",
+  },
+  dateTime: {
+    type: String,
+    default: "",
+  },
+  description: {
+    type: String,
+    default: "",
+  },
+  badges: {
+    type: Array,
+    default: () => [],
+  },
+  darkMode: {
+    type: Boolean,
+    default: false,
+  },
+});
+</script>
 <template>
   <div class="mb-3 timeline-block" :class="darkMode">
     <span class="timeline-step" :class="darkMode ? 'bg-dark' : ''">
@@ -27,38 +59,3 @@
     </div>
   </div>
 </template>
-<script>
-export default {
-  name: "TimelineItem",
-  props: {
-    color: {
-      type: String,
-      default: "",
-    },
-    icon: {
-      type: String,
-      default: "",
-    },
-    title: {
-      type: String,
-      default: "",
-    },
-    dateTime: {
-      type: String,
-      default: "",
-    },
-    description: {
-      type: String,
-      default: "",
-    },
-    badges: {
-      type: Array,
-      default: () => [],
-    },
-    darkMode: {
-      type: Boolean,
-      default: false,
-    },
-  },
-};
-</script>
diff --git a/src/views/components/TimelineList.vue b/src/views/components/TimelineList.vue
index f85f501..e5dc6d3 100644
--- a/src/views/components/TimelineList.vue
+++ b/src/views/components/TimelineList.vue
@@ -1,3 +1,19 @@
+<script setup>
+defineProps({
+  title: {
+    type: String,
+    default: "",
+  },
+  description: {
+    type: String,
+    default: "",
+  },
+  darkMode: {
+    type: Boolean,
+    default: false,
+  },
+});
+</script>
 <template>
   <div class="card" :class="darkMode ? 'bg-gradient-dark' : ''">
     <div class="pb-0 card-header" :class="darkMode ? 'bg-transparent' : ''">
@@ -15,23 +31,3 @@
     </div>
   </div>
 </template>
-
-<script>
-export default {
-  name: "TimelineList",
-  props: {
-    title: {
-      type: String,
-      default: "",
-    },
-    description: {
-      type: String,
-      default: "",
-    },
-    darkMode: {
-      type: Boolean,
-      default: false,
-    },
-  },
-};
-</script>
diff --git a/src/views/components/TodoCard.vue b/src/views/components/TodoCard.vue
index 0bbdb2a..e8643d8 100644
--- a/src/views/components/TodoCard.vue
+++ b/src/views/components/TodoCard.vue
@@ -1,3 +1,16 @@
+<script setup>
+import { computed } from "vue";
+
+const getLength = computed(() => {
+  return props.todos.length;
+});
+const props = defineProps({
+  todos: {
+    type: Array,
+    default: () => [],
+  },
+});
+</script>
 <template>
   <div class="card bg-gradient-dark move-on-hover">
     <div class="card-body">
@@ -8,7 +21,11 @@
           <p class="mb-0 text-sm text-white">items</p>
         </div>
       </div>
-      <p v-for="(todo, index) of todos" :key="index" class="mb-0 text-white">
+      <p
+        v-for="(todo, index) of props.todos"
+        :key="index"
+        class="mb-0 text-white"
+      >
         {{ todo }}
       </p>
     </div>
@@ -23,20 +40,3 @@
     </a>
   </div>
 </template>
-
-<script>
-export default {
-  name: "TodoCard",
-  props: {
-    todos: {
-      type: Array,
-      default: () => [],
-    },
-  },
-  computed: {
-    getLength() {
-      return this.todos.length;
-    },
-  },
-};
-</script>