diff --git a/package-lock.json b/package-lock.json
index 4a29f7f080..752052c063 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,7 +13,6 @@
                 "core-js": "^3.6.5",
                 "quasar": "^2.0.0",
                 "vue": "^3.0.0",
-                "vue-class-component": "^8.0.0-0",
                 "vue-i18n": "^9.1.0",
                 "vue-router": "^4.0.0-0",
                 "vuex": "^4.0.0-0"
@@ -19418,14 +19417,6 @@
                 "@vue/shared": "3.2.31"
             }
         },
-        "node_modules/vue-class-component": {
-            "version": "8.0.0-rc.1",
-            "resolved": "https://registry.npmmirror.com/vue-class-component/-/vue-class-component-8.0.0-rc.1.tgz",
-            "integrity": "sha512-w1nMzsT/UdbDAXKqhwTmSoyuJzUXKrxLE77PCFVuC6syr8acdFDAq116xgvZh9UCuV0h+rlCtxXolr3Hi3HyPQ==",
-            "peerDependencies": {
-                "vue": "^3.0.0"
-            }
-        },
         "node_modules/vue-cli-plugin-i18n": {
             "version": "2.3.1",
             "resolved": "https://registry.npmmirror.com/vue-cli-plugin-i18n/-/vue-cli-plugin-i18n-2.3.1.tgz",
@@ -37109,12 +37100,6 @@
                 "@vue/shared": "3.2.31"
             }
         },
-        "vue-class-component": {
-            "version": "8.0.0-rc.1",
-            "resolved": "https://registry.npmmirror.com/vue-class-component/-/vue-class-component-8.0.0-rc.1.tgz",
-            "integrity": "sha512-w1nMzsT/UdbDAXKqhwTmSoyuJzUXKrxLE77PCFVuC6syr8acdFDAq116xgvZh9UCuV0h+rlCtxXolr3Hi3HyPQ==",
-            "requires": {}
-        },
         "vue-cli-plugin-i18n": {
             "version": "2.3.1",
             "resolved": "https://registry.npmmirror.com/vue-cli-plugin-i18n/-/vue-cli-plugin-i18n-2.3.1.tgz",
diff --git a/package.json b/package.json
index c006c3ae59..e764791717 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,6 @@
         "core-js": "^3.6.5",
         "quasar": "^2.0.0",
         "vue": "^3.0.0",
-        "vue-class-component": "^8.0.0-0",
         "vue-i18n": "^9.1.0",
         "vue-router": "^4.0.0-0",
         "vuex": "^4.0.0-0"
@@ -49,4 +48,4 @@
         "vue-cli-plugin-quasar": "~4.0.4",
         "vue-jest": "^5.0.0-0"
     }
-}
\ No newline at end of file
+}
diff --git a/src/App.vue b/src/App.vue
index 981b4e3d4c..95692e2db0 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,12 +2,6 @@
     <router-view></router-view>
 </template>
 
-<script lang="ts">
-import { Vue } from 'vue-class-component';
-
-export default class App extends Vue {}
-</script>
-
 <style lang="scss">
 .body--light {
     background-color: #ccc;
diff --git a/src/components/Topbar.vue b/src/components/Topbar.vue
index 2c61c76c07..9a07e3111f 100644
--- a/src/components/Topbar.vue
+++ b/src/components/Topbar.vue
@@ -27,7 +27,7 @@
                 <q-btn dense flat no-wrap>
                     <q-avatar size="lg">
                         <q-img
-                            :src="`/api/Images/user/160x160/${user.id}/download?access_token=${token}`"
+                            :src="`/api/Images/user/160x160/${user.id}/download?access_token=${user.token}`"
                             spinner-color="white"
                         />
                     </q-avatar>
@@ -40,8 +40,9 @@
     </q-header>
 </template>
 
-<script lang="ts">
-import { Options, Vue } from 'vue-class-component';
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { useStore } from 'vuex';
 import UserPanel from '@/components/UserPanel.vue';
 
 interface UserProfile {
@@ -51,18 +52,13 @@ interface UserProfile {
     token: string;
 }
 
-@Options({
-    components: {
-        UserPanel,
-    },
-})
-export default class Topbar extends Vue {
-    get user(): UserProfile {
-        return this.$store.state.user;
-    }
-
-    get token(): string {
-        return this.$store.getters.token;
-    }
-}
+const store = useStore();
+const user = computed((): UserProfile => {
+    return {
+        id: store.state.user.id,
+        username: store.state.user.username,
+        nickname: store.state.user.nickname,
+        token: store.getters.token,
+    };
+});
 </script>
diff --git a/src/components/UserPanel.vue b/src/components/UserPanel.vue
index d5df59092a..9c5fbb4b7d 100644
--- a/src/components/UserPanel.vue
+++ b/src/components/UserPanel.vue
@@ -2,16 +2,16 @@
     <q-menu>
         <div class="row no-wrap q-pa-md">
             <div class="column">
-                <div class="text-h6 q-mb-md">{{ $t('components.userPanel.settings') }}</div>
+                <div class="text-h6 q-mb-md">{{ t('components.userPanel.settings') }}</div>
                 <q-toggle
-                    :label="$t(`globals.lang['${language}']`)"
+                    :label="t(`globals.lang['${locale}']`)"
                     icon="public"
                     color="orange"
                     false-value="es"
                     true-value="en"
-                    v-model="language"
+                    v-model="locale"
                 />
-                <q-toggle v-model="mode" checked-icon="dark_mode" color="orange" unchecked-icon="light_mode" />
+                <q-toggle v-model="darkMode" checked-icon="dark_mode" color="orange" unchecked-icon="light_mode" />
 
                 <q-btn color="orange" outline size="sm" label="Settings" icon="settings" />
             </div>
@@ -21,7 +21,7 @@
             <div class="column items-center" style="min-width: 150px">
                 <q-avatar size="80px">
                     <q-img
-                        :src="`/api/Images/user/160x160/${user.id}/download?access_token=${token}`"
+                        :src="`/api/Images/user/160x160/${user.id}/download?access_token=${user.token}`"
                         spinner-color="white"
                     />
                 </q-avatar>
@@ -37,10 +37,18 @@
     </q-menu>
 </template>
 
-<script lang="ts">
-import { Options, Vue } from 'vue-class-component';
+<script lang="ts" setup>
+import { onMounted, computed } from 'vue';
+import { Dark, useQuasar } from 'quasar';
+import { useStore } from 'vuex';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
 import axios from 'axios';
-import { Dark } from 'quasar';
+
+const quasar = useQuasar();
+const store = useStore();
+const router = useRouter();
+const { t, locale } = useI18n();
 
 interface UserProfile {
     id: number;
@@ -49,54 +57,42 @@ interface UserProfile {
     token: string;
 }
 
-@Options({})
-export default class UserPanel extends Vue {
-    private lang = 'es';
-
-    mounted(): void {
-        axios
-            .get('/api/accounts/acl')
-            .then((response) => {
-                this.$store.dispatch('updateUserData', response.data);
-            })
-            .catch(() => {
-                this.$q.notify({
-                    message: this.$t('errors.statusUnauthorized'),
-                    type: 'negative',
-                });
-                this.$store.dispatch('logOut');
-                this.$router.push('/login');
-            });
-    }
-
-    logout(): void {
-        this.$store.dispatch('logOut');
-        this.$router.push('/login');
-    }
-
-    get user(): UserProfile {
-        return this.$store.state.user;
-    }
-
-    get token(): string {
-        return this.$store.getters.token;
-    }
-
-    get mode(): boolean {
+const darkMode = computed({
+    get(): boolean {
         return Dark.isActive;
-    }
-
-    set mode(value: boolean) {
+    },
+    set(value: boolean): void {
         Dark.set(value);
-    }
+    },
+});
 
-    get language(): string {
-        return this.lang;
-    }
+const user = computed((): UserProfile => {
+    return {
+        id: store.state.user.id,
+        username: store.state.user.username,
+        nickname: store.state.user.nickname,
+        token: store.getters.token,
+    };
+});
 
-    set language(value: string) {
-        this.lang = value;
-        this.$i18n.locale = value;
-    }
+onMounted(() => {
+    axios
+        .get('/api/accounts/acl')
+        .then((response) => {
+            store.dispatch('updateUserData', response.data);
+        })
+        .catch(() => {
+            quasar.notify({
+                message: t('errors.statusUnauthorized'),
+                type: 'negative',
+            });
+            store.dispatch('logOut');
+            router.push('/login');
+        });
+});
+
+function logout(): void {
+    store.dispatch('logOut');
+    router.push('/login');
 }
 </script>
diff --git a/src/i18n.ts b/src/i18n.ts
index 0590c7af9a..ff173ba93e 100644
--- a/src/i18n.ts
+++ b/src/i18n.ts
@@ -20,7 +20,7 @@ function loadLocaleMessages(): LocaleMessages<VueMessageType> {
 }
 
 export default createI18n({
-    legacy: true,
+    legacy: false, // Disabled for composition API usage
     locale: process.env.VUE_APP_I18N_LOCALE || 'en',
     fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
     messages: loadLocaleMessages(),
diff --git a/src/views/Customer/Customer.vue b/src/views/Customer/Customer.vue
index 189736fa89..966b44bf53 100644
--- a/src/views/Customer/Customer.vue
+++ b/src/views/Customer/Customer.vue
@@ -4,11 +4,4 @@
     </q-page>
 </template>
 
-<script lang="ts">
-import { Options, Vue } from 'vue-class-component';
-
-@Options({})
-export default class Customer extends Vue {}
-</script>
-
 <style lang="scss" scoped></style>
diff --git a/src/views/Dashboard/Dashboard.vue b/src/views/Dashboard/Dashboard.vue
index 9e5b694a9c..353def7093 100644
--- a/src/views/Dashboard/Dashboard.vue
+++ b/src/views/Dashboard/Dashboard.vue
@@ -4,11 +4,4 @@
     </q-page>
 </template>
 
-<script lang="ts">
-import { Options, Vue } from 'vue-class-component';
-
-@Options({})
-export default class Dashboard extends Vue {}
-</script>
-
 <style lang="scss" scoped></style>
diff --git a/src/views/Layout/Main.vue b/src/views/Layout/Main.vue
index 7a23a49699..7cc63e3956 100644
--- a/src/views/Layout/Main.vue
+++ b/src/views/Layout/Main.vue
@@ -59,22 +59,14 @@
     </q-layout>
 </template>
 
-<script lang="ts">
-import { Options, Vue } from 'vue-class-component';
+<script lang="ts" setup>
+import { ref } from 'vue';
 import Topbar from '@/components/Topbar.vue';
+const drawer = ref(false);
+const miniState = ref(true);
 
-@Options({
-    components: {
-        Topbar,
-    },
-})
-export default class Main extends Vue {
-    drawer = false;
-    miniState = true;
-
-    onToggleDrawer(): void {
-        this.drawer = !this.drawer;
-    }
+function onToggleDrawer(): void {
+    drawer.value = !drawer.value;
 }
 </script>
 
diff --git a/src/views/Layout/NotFound.vue b/src/views/Layout/NotFound.vue
index 3d8ced2d90..f130f38c22 100644
--- a/src/views/Layout/NotFound.vue
+++ b/src/views/Layout/NotFound.vue
@@ -2,11 +2,4 @@
     <q-page> Page not found </q-page>
 </template>
 
-<script lang="ts">
-import { Options, Vue } from 'vue-class-component';
-
-@Options({})
-export default class NotFound extends Vue {}
-</script>
-
 <style lang="scss" scoped></style>
diff --git a/src/views/Login/Login.vue b/src/views/Login/Login.vue
index 7ab37df334..61991fb492 100644
--- a/src/views/Login/Login.vue
+++ b/src/views/Login/Login.vue
@@ -4,14 +4,14 @@
             <q-toolbar>
                 <q-space></q-space>
                 <q-toggle
-                    :label="$t(`globals.lang['${language}']`)"
+                    :label="t(`globals.lang['${locale}']`)"
                     icon="public"
                     color="orange"
                     false-value="es"
                     true-value="en"
-                    v-model="language"
+                    v-model="locale"
                 />
-                <q-toggle v-model="mode" checked-icon="dark_mode" color="orange" unchecked-icon="light_mode" />
+                <q-toggle v-model="darkMode" checked-icon="dark_mode" color="orange" unchecked-icon="light_mode" />
             </q-toolbar>
         </q-header>
         <q-page-container>
@@ -24,7 +24,7 @@
                                 filled
                                 color="orange"
                                 v-model="username"
-                                :label="$t('login.username')"
+                                :label="t('login.username')"
                                 lazy-rules
                                 :rules="[
                                     (val: string) => (val && val.length > 0) || 'Please type something',
@@ -35,16 +35,16 @@
                                 color="orange"
                                 type="password"
                                 v-model="password"
-                                :label="$t('login.password')"
+                                :label="t('login.password')"
                                 lazy-rules
                                 :rules="[
                                     (val: string) => (val && val.length > 0) || 'Please type something',
                                 ]"
                             />
-                            <q-toggle v-model="keepLogin" :label="$t('login.keepLogin')" color="orange" />
+                            <q-toggle v-model="keepLogin" :label="t('login.keepLogin')" color="orange" />
 
                             <div>
-                                <q-btn :label="$t('login.submit')" type="submit" color="orange" />
+                                <q-btn :label="t('login.submit')" type="submit" color="orange" />
                             </div>
                         </q-form>
                     </q-card>
@@ -54,88 +54,65 @@
     </q-layout>
 </template>
 
-<script lang="ts">
-import { Options, Vue } from 'vue-class-component';
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
 import { Dark, useQuasar } from 'quasar';
+import { useStore } from 'vuex';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
 import axios from 'axios';
 
-interface LoginForm {
-    username: string;
-    password: string;
-    keepLogin: boolean;
-}
+const quasar = useQuasar();
+const store = useStore();
+const router = useRouter();
+const { t, locale } = useI18n();
 
-@Options({
-    setup() {
-        return {
-            $q: useQuasar(),
-        };
-    },
-})
-export default class Login extends Vue {
-    username?: string;
-    password?: string;
-    keepLogin?: boolean;
-    private lang = 'es';
+let username = ref('');
+let password = ref('');
+let keepLogin = true;
 
-    get mode(): boolean {
+const darkMode = computed({
+    get(): boolean {
         return Dark.isActive;
-    }
-
-    set mode(value: boolean) {
+    },
+    set(value: boolean): void {
         Dark.set(value);
-    }
+    },
+});
 
-    get language(): string {
-        return this.lang;
-    }
-
-    set language(value: string) {
-        this.lang = value;
-        this.$i18n.locale = value;
-    }
-
-    onSubmit(): void {
-        axios
-            .post('/api/accounts/login', {
-                user: this.username,
-                password: this.password,
-            })
-            .then((response) => {
-                this.$store.dispatch('logIn', {
-                    token: response.data.token,
-                    keepLogin: this.keepLogin,
-                });
-
-                this.$q.notify({
-                    message: this.$t('login.loginSuccess'),
-                    type: 'positive',
-                });
-                this.$router.push('/dashboard');
-            })
-            .catch((error) => {
-                const errorCode = error.response.status;
-                if (errorCode === 401) {
-                    this.$q.notify({
-                        message: this.$t('login.loginFailed'),
-                        type: 'negative',
-                    });
-                } else {
-                    this.$q.notify({
-                        message: this.$t('errors.statusInternalServerError'),
-                        type: 'negative',
-                    });
-                }
+function onSubmit(): void {
+    axios
+        .post('/api/accounts/login', {
+            user: username.value,
+            password: password.value,
+        })
+        .then((response) => {
+            store.dispatch('logIn', {
+                token: response.data.token,
+                keepLogin: keepLogin,
             });
-    }
 
-    data(): LoginForm {
-        return {
-            username: '',
-            password: '',
-            keepLogin: true,
-        };
-    }
+            quasar.notify({
+                message: t('login.loginSuccess'),
+                type: 'positive',
+            });
+            router.push('/dashboard');
+        })
+        .catch((error) => {
+            console.log(error);
+            const errorCode = error.response.status;
+            if (errorCode === 401) {
+                quasar.notify({
+                    message: t('login.loginFailed'),
+                    type: 'negative',
+                });
+            } else {
+                quasar.notify({
+                    message: t('errors.statusInternalServerError'),
+                    type: 'negative',
+                });
+            }
+        });
 }
 </script>