From 42e1b088c28a9b4b2c730e4fc498605d2c95f676 Mon Sep 17 00:00:00 2001
From: Jeremy Wharton <jeremy.e.wharton@gmail.com>
Date: Fri, 27 Oct 2023 13:37:58 -0500
Subject: [PATCH] satellite/admin/back-office/ui: use composition API

This change migrates Vue components of the new satellite admin web app
from the options API to the composition API.

Change-Id: Ie8c9bcd468f1c0fe0abc9ef0a3724563db096ba9
---
 .../ui/src/components/AccountActionsMenu.vue  |  22 +-
 .../ui/src/components/AccountDeleteDialog.vue |  44 +-
 .../src/components/AccountGeofenceDialog.vue  |  42 +-
 .../components/AccountInformationDialog.vue   |  43 +-
 .../ui/src/components/AccountLimitsDialog.vue |  42 +-
 .../components/AccountNewProjectDialog.vue    |  42 +-
 .../AccountProjectsTableComponent.vue         | 157 ++++---
 .../src/components/AccountResetMFADialog.vue  |  42 +-
 .../ui/src/components/AccountStatusDialog.vue |  43 +-
 .../src/components/AccountSuspendDialog.vue   |  47 +--
 .../components/AccountUserAgentsDialog.vue    |  45 +-
 .../src/components/AccountsTableComponent.vue | 398 +++++++++---------
 .../ui/src/components/AdminAccountDialog.vue  |  42 +-
 .../ui/src/components/BucketActionsMenu.vue   |  17 +-
 .../ui/src/components/BucketDeleteDialog.vue  |  44 +-
 .../src/components/BucketGeofenceDialog.vue   |  43 +-
 .../components/BucketInformationDialog.vue    |  42 +-
 .../src/components/BucketUserAgentsDialog.vue |  43 +-
 .../src/components/BucketsTableComponent.vue  | 252 ++++++-----
 .../ui/src/components/CardStatsComponent.vue  |  38 +-
 .../DashboardLimitsTableComponent.vue         | 323 +++++++-------
 .../ui/src/components/LogsTableComponent.vue  |  96 ++---
 .../ui/src/components/NewAccountDialog.vue    |  63 +--
 .../ui/src/components/NewProjectDialog.vue    |  42 +-
 .../src/components/PageSubtitleComponent.vue  |  15 +-
 .../ui/src/components/PageTitleComponent.vue  |  15 +-
 .../ui/src/components/ProjectActionsMenu.vue  |  20 +-
 .../src/components/ProjectAddUserDialog.vue   |  42 +-
 .../ui/src/components/ProjectDeleteDialog.vue |  44 +-
 .../src/components/ProjectGeofenceDialog.vue  |  43 +-
 .../components/ProjectInformationDialog.vue   |  42 +-
 .../ui/src/components/ProjectLimitsDialog.vue |  42 +-
 .../src/components/ProjectNewBucketDialog.vue |  42 +-
 .../src/components/ProjectResetMFADialog.vue  |  42 +-
 .../src/components/ProjectSuspendDialog.vue   |  43 +-
 .../components/ProjectUserAgentsDialog.vue    |  43 +-
 .../src/components/ProjectsTableComponent.vue | 383 ++++++++---------
 .../src/components/UsageProgressComponent.vue |  52 +--
 .../ui/src/components/UsersTableComponent.vue | 182 ++++----
 .../ui/src/layouts/default/AppBar.vue         |  74 +---
 .../ui/src/views/AccountDetails.vue           |  38 +-
 .../back-office/ui/src/views/Accounts.vue     |  28 +-
 .../ui/src/views/AdminSettings.vue            |  24 +-
 .../ui/src/views/BucketDetails.vue            |  35 +-
 .../back-office/ui/src/views/Dashboard.vue    |  22 +-
 .../admin/back-office/ui/src/views/Login.vue  |  70 +--
 .../ui/src/views/ProjectDetails.vue           |  39 +-
 .../back-office/ui/src/views/Projects.vue     |  40 +-
 48 files changed, 1215 insertions(+), 2217 deletions(-)

diff --git a/satellite/admin/back-office/ui/src/components/AccountActionsMenu.vue b/satellite/admin/back-office/ui/src/components/AccountActionsMenu.vue
index 94fa6437be8c..c8fa6bd257b8 100644
--- a/satellite/admin/back-office/ui/src/components/AccountActionsMenu.vue
+++ b/satellite/admin/back-office/ui/src/components/AccountActionsMenu.vue
@@ -80,7 +80,7 @@
     </v-menu>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { VMenu, VList, VListItem, VListItemTitle, VDivider } from 'vuetify/components';
 
 import AccountInformationDialog from '@/components/AccountInformationDialog.vue';
@@ -92,24 +92,4 @@ import AccountNewProjectDialog from '@/components/AccountNewProjectDialog.vue';
 import AccountGeofenceDialog from '@/components/AccountGeofenceDialog.vue';
 import AccountUserAgentsDialog from '@/components/AccountUserAgentsDialog.vue';
 import AccountLimitsDialog from '@/components/AccountLimitsDialog.vue';
-
-export default {
-    name: 'AccountsActionsMenu',
-    components: {
-        VMenu,
-        VList,
-        VListItem,
-        VListItemTitle,
-        VDivider,
-        AccountResetMFADialog,
-        AccountSuspendDialog,
-        AccountDeleteDialog,
-        AccountNewProjectDialog,
-        AccountGeofenceDialog,
-        AccountUserAgentsDialog,
-        AccountLimitsDialog,
-        AccountInformationDialog,
-        AccountStatusDialog,
-    },
-};
 </script>
diff --git a/satellite/admin/back-office/ui/src/components/AccountDeleteDialog.vue b/satellite/admin/back-office/ui/src/components/AccountDeleteDialog.vue
index c156712f6386..fa00f2c557bf 100644
--- a/satellite/admin/back-office/ui/src/components/AccountDeleteDialog.vue
+++ b/satellite/admin/back-office/ui/src/components/AccountDeleteDialog.vue
@@ -78,7 +78,7 @@
     </v-dialog>
 
     <v-snackbar v-model="snackbar" :timeout="7000" color="success">
-        {{ text }}
+        The account was deleted successfully.
         <template #actions>
             <v-btn color="default" variant="text" @click="snackbar = false">
                 Close
@@ -87,7 +87,8 @@
     </v-snackbar>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { ref } from 'vue';
 import {
     VDialog,
     VCard,
@@ -106,36 +107,11 @@ import {
     VAlert,
 } from 'vuetify/components';
 
-export default {
-    components: {
-        VDialog,
-        VCard,
-        VSheet,
-        VCardItem,
-        VCardTitle,
-        VBtn,
-        VDivider,
-        VForm,
-        VRow,
-        VCol,
-        VTextField,
-        VCardActions,
-        VSnackbar,
-        VSelect,
-        VAlert,
-    },
-    data() {
-        return {
-            snackbar: false,
-            text: `The account was deleted successfully.`,
-            dialog: false,
-        };
-    },
-    methods: {
-        onButtonClick() {
-            this.snackbar = true;
-            this.dialog = false;
-        },
-    },
-};
+const snackbar = ref<boolean>(false);
+const dialog = ref<boolean>(false);
+
+function onButtonClick() {
+    snackbar.value = true;
+    dialog.value = false;
+}
 </script>
\ No newline at end of file
diff --git a/satellite/admin/back-office/ui/src/components/AccountGeofenceDialog.vue b/satellite/admin/back-office/ui/src/components/AccountGeofenceDialog.vue
index 7109687309d1..2d00a6c634fb 100644
--- a/satellite/admin/back-office/ui/src/components/AccountGeofenceDialog.vue
+++ b/satellite/admin/back-office/ui/src/components/AccountGeofenceDialog.vue
@@ -64,7 +64,7 @@
     </v-dialog>
 
     <v-snackbar v-model="snackbar" :timeout="7000" color="success">
-        {{ text }}
+        The account placement was set successfully.
         <template #actions>
             <v-btn color="default" variant="text" @click="snackbar = false">
                 Close
@@ -73,7 +73,7 @@
     </v-snackbar>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import {
     VDialog,
     VCard,
@@ -91,35 +91,11 @@ import {
     VSelect,
 } from 'vuetify/components';
 
-export default {
-    components: {
-        VDialog,
-        VCard,
-        VSheet,
-        VCardItem,
-        VCardTitle,
-        VBtn,
-        VDivider,
-        VForm,
-        VRow,
-        VCol,
-        VTextField,
-        VCardActions,
-        VSnackbar,
-        VSelect,
-    },
-    data() {
-        return {
-            snackbar: false,
-            text: `The account placement was set successfully.`,
-            dialog: false,
-        };
-    },
-    methods: {
-        onButtonClick() {
-            this.snackbar = true;
-            this.dialog = false;
-        },
-    },
-};
+const snackbar = ref<boolean>(false);
+const dialog = ref<boolean>(false);
+
+function onButtonClick() {
+    snackbar.value = true;
+    dialog.value = false;
+}
 </script>
\ No newline at end of file
diff --git a/satellite/admin/back-office/ui/src/components/AccountInformationDialog.vue b/satellite/admin/back-office/ui/src/components/AccountInformationDialog.vue
index 3be55396613c..8d04c1070b3c 100644
--- a/satellite/admin/back-office/ui/src/components/AccountInformationDialog.vue
+++ b/satellite/admin/back-office/ui/src/components/AccountInformationDialog.vue
@@ -65,7 +65,7 @@
     </v-dialog>
 
     <v-snackbar v-model="snackbar" :timeout="7000" color="success">
-        {{ text }}
+        Successfully saved the account information.
         <template #actions>
             <v-btn color="default" variant="text" @click="snackbar = false">
                 Close
@@ -74,7 +74,8 @@
     </v-snackbar>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { ref } from 'vue';
 import {
     VDialog,
     VCard,
@@ -92,35 +93,11 @@ import {
     VSelect,
 } from 'vuetify/components';
 
-export default {
-    components: {
-        VDialog,
-        VCard,
-        VSheet,
-        VCardItem,
-        VCardTitle,
-        VBtn,
-        VDivider,
-        VForm,
-        VRow,
-        VCol,
-        VTextField,
-        VCardActions,
-        VSnackbar,
-        VSelect,
-    },
-    data() {
-        return {
-            snackbar: false,
-            text: `Successfully saved the account information.`,
-            dialog: false,
-        };
-    },
-    methods: {
-        onButtonClick() {
-            this.snackbar = true;
-            this.dialog = false;
-        },
-    },
-};
+const snackbar = ref<boolean>(false);
+const dialog = ref<boolean>(false);
+
+function onButtonClick() {
+    snackbar.value = true;
+    dialog.value = false;
+}
 </script>
\ No newline at end of file
diff --git a/satellite/admin/back-office/ui/src/components/AccountLimitsDialog.vue b/satellite/admin/back-office/ui/src/components/AccountLimitsDialog.vue
index d1b8e241c25b..197847a0c0ff 100644
--- a/satellite/admin/back-office/ui/src/components/AccountLimitsDialog.vue
+++ b/satellite/admin/back-office/ui/src/components/AccountLimitsDialog.vue
@@ -85,7 +85,7 @@
     </v-dialog>
 
     <v-snackbar v-model="snackbar" :timeout="7000" color="error">
-        {{ text }}
+        Error. Cannot change limits.
         <template #actions>
             <v-btn color="default" variant="text" @click="snackbar = false">
                 Close
@@ -94,7 +94,8 @@
     </v-snackbar>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { ref } from 'vue';
 import {
     VDialog,
     VCard,
@@ -111,34 +112,11 @@ import {
     VSnackbar,
 } from 'vuetify/components';
 
-export default {
-    components: {
-        VDialog,
-        VCard,
-        VSheet,
-        VCardItem,
-        VCardTitle,
-        VBtn,
-        VDivider,
-        VForm,
-        VRow,
-        VCol,
-        VTextField,
-        VCardActions,
-        VSnackbar,
-    },
-    data() {
-        return {
-            snackbar: false,
-            text: `Error. Cannot change limits.`,
-            dialog: false,
-        };
-    },
-    methods: {
-        onButtonClick() {
-            this.snackbar = true;
-            this.dialog = false;
-        },
-    },
-};
+const snackbar = ref<boolean>(false);
+const dialog = ref<boolean>(false);
+
+function onButtonClick() {
+    snackbar.value = true;
+    dialog.value = false;
+}
 </script>
\ No newline at end of file
diff --git a/satellite/admin/back-office/ui/src/components/AccountNewProjectDialog.vue b/satellite/admin/back-office/ui/src/components/AccountNewProjectDialog.vue
index 1a8097b035b1..e8ebf70d82b6 100644
--- a/satellite/admin/back-office/ui/src/components/AccountNewProjectDialog.vue
+++ b/satellite/admin/back-office/ui/src/components/AccountNewProjectDialog.vue
@@ -58,7 +58,7 @@
     </v-dialog>
 
     <v-snackbar v-model="snackbar" :timeout="7000" color="success">
-        {{ text }}
+        Project created successfully.
         <template #actions>
             <v-btn color="default" variant="text" @click="snackbar = false">
                 Close
@@ -67,7 +67,8 @@
     </v-snackbar>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { ref } from 'vue';
 import {
     VDialog,
     VCard,
@@ -84,34 +85,11 @@ import {
     VSnackbar,
 } from 'vuetify/components';
 
-export default {
-    components: {
-        VDialog,
-        VCard,
-        VSheet,
-        VCardItem,
-        VCardTitle,
-        VBtn,
-        VDivider,
-        VForm,
-        VRow,
-        VCol,
-        VTextField,
-        VCardActions,
-        VSnackbar,
-    },
-    data() {
-        return {
-            snackbar: false,
-            text: `Project created successfully.`,
-            dialog: false,
-        };
-    },
-    methods: {
-        onButtonClick() {
-            this.snackbar = true;
-            this.dialog = false;
-        },
-    },
-};
+const snackbar = ref<boolean>(false);
+const dialog = ref<boolean>(false);
+
+function onButtonClick() {
+    snackbar.value = true;
+    dialog.value = false;
+}
 </script>
\ No newline at end of file
diff --git a/satellite/admin/back-office/ui/src/components/AccountProjectsTableComponent.vue b/satellite/admin/back-office/ui/src/components/AccountProjectsTableComponent.vue
index ea56b73ae8ba..bbc7eb6f4057 100644
--- a/satellite/admin/back-office/ui/src/components/AccountProjectsTableComponent.vue
+++ b/satellite/admin/back-office/ui/src/components/AccountProjectsTableComponent.vue
@@ -85,98 +85,83 @@
     </v-card>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { ref } from 'vue';
 import { VCard, VTextField, VBtn, VIcon, VTooltip, VChip } from 'vuetify/components';
 import { VDataTable } from 'vuetify/labs/components';
 
 import ProjectActionsMenu from '@/components/ProjectActionsMenu.vue';
 
-export default {
-    components: {
-        VCard,
-        VTextField,
-        VBtn,
-        VIcon,
-        VTooltip,
-        VChip,
-        VDataTable,
-        ProjectActionsMenu,
+const search = ref<string>('');
+const selected = ref<string[]>([]);
+const sortBy = ref([{ key: 'name', order: 'asc' }]);
+
+const headers = [
+    { title: 'Project ID', key: 'projectid', align: 'start' },
+    // { title: 'Name', key: 'name'},
+    { title: 'Storage Used', key: 'storagepercent' },
+    { title: 'Storage Used', key: 'storageused' },
+    { title: 'Storage Limit', key: 'storagelimit' },
+    { title: 'Download Used', key: 'downloadpercent' },
+    { title: 'Download Used', key: 'downloadused' },
+    { title: 'Download Limit', key: 'downloadlimit' },
+    { title: 'Segments Used', key: 'segmentpercent' },
+    // { title: 'Value Attribution', key: 'agent' },
+    // { title: 'Date Created', key: 'date' },
+];
+const files = [
+    {
+        name: 'My First Project',
+        projectid: 'F82SR21Q284JF',
+        storageused: '150 TB',
+        storagelimit: '300 TB',
+        storagepercent: '50',
+        downloadused: '100 TB',
+        downloadlimit: '100 TB',
+        downloadpercent: '100',
+        segmentpercent: '43',
+        agent: 'Test Agent',
+        date: '02 Mar 2023',
     },
-    data() {
-        return {
-            // search in the table
-            search: '',
-            selected: [],
-            sortBy: [{ key: 'name', order: 'asc' }],
-            headers: [
-                { title: 'Project ID', key: 'projectid', align: 'start' },
-                // { title: 'Name', key: 'name'},
-                { title: 'Storage Used', key: 'storagepercent' },
-                { title: 'Storage Used', key: 'storageused' },
-                { title: 'Storage Limit', key: 'storagelimit' },
-                { title: 'Download Used', key: 'downloadpercent' },
-                { title: 'Download Used', key: 'downloadused' },
-                { title: 'Download Limit', key: 'downloadlimit' },
-                { title: 'Segments Used', key: 'segmentpercent' },
-                // { title: 'Value Attribution', key: 'agent' },
-                // { title: 'Date Created', key: 'date' },
-            ],
-            files: [
-                {
-                    name: 'My First Project',
-                    projectid: 'F82SR21Q284JF',
-                    storageused: '150 TB',
-                    storagelimit: '300 TB',
-                    storagepercent: '50',
-                    downloadused: '100 TB',
-                    downloadlimit: '100 TB',
-                    downloadpercent: '100',
-                    segmentpercent: '43',
-                    agent: 'Test Agent',
-                    date: '02 Mar 2023',
-                },
-                {
-                    name: 'Personal Project',
-                    projectid: '284JFF82SR21Q',
-                    storageused: '24 TB',
-                    storagelimit: '30 TB',
-                    storagepercent: '80',
-                    downloadused: '7 TB',
-                    downloadlimit: '100 TB',
-                    segmentpercent: '20',
-                    downloadpercent: '7',
-                    agent: 'Agent',
-                    date: '21 Apr 2023',
-                },
-                {
-                    name: 'Test Project',
-                    projectid: '82SR21Q284JFF',
-                    storageused: '99 TB',
-                    storagelimit: '100 TB',
-                    storagepercent: '99',
-                    downloadused: '85 TB',
-                    downloadlimit: '100 TB',
-                    segmentpercent: '83',
-                    downloadpercent: '85',
-                    agent: 'Company',
-                    date: '21 Apr 2023',
-                },
-            ],
-        };
+    {
+        name: 'Personal Project',
+        projectid: '284JFF82SR21Q',
+        storageused: '24 TB',
+        storagelimit: '30 TB',
+        storagepercent: '80',
+        downloadused: '7 TB',
+        downloadlimit: '100 TB',
+        segmentpercent: '20',
+        downloadpercent: '7',
+        agent: 'Agent',
+        date: '21 Apr 2023',
     },
-    methods: {
-        setSearch(searchText) {
-            this.search = searchText;
-        },
-        getPercentColor(percent) {
-            if (percent >= 99) {
-                return 'error';
-            } else if (percent >= 80) {
-                return 'warning';
-            } else {
-                return 'success';
-            }
-        },
+    {
+        name: 'Test Project',
+        projectid: '82SR21Q284JFF',
+        storageused: '99 TB',
+        storagelimit: '100 TB',
+        storagepercent: '99',
+        downloadused: '85 TB',
+        downloadlimit: '100 TB',
+        segmentpercent: '83',
+        downloadpercent: '85',
+        agent: 'Company',
+        date: '21 Apr 2023',
     },
-};
+];
+
+function setSearch(searchText: string) {
+    search.value = searchText;
+}
+
+function getPercentColor(percent: number) {
+    if (percent >= 99) {
+        return 'error';
+    } else if (percent >= 80) {
+        return 'warning';
+    } else {
+        return 'success';
+    }
+}
 </script>
diff --git a/satellite/admin/back-office/ui/src/components/AccountResetMFADialog.vue b/satellite/admin/back-office/ui/src/components/AccountResetMFADialog.vue
index 56358d4a8a56..f418f5370973 100644
--- a/satellite/admin/back-office/ui/src/components/AccountResetMFADialog.vue
+++ b/satellite/admin/back-office/ui/src/components/AccountResetMFADialog.vue
@@ -58,7 +58,7 @@
     </v-dialog>
 
     <v-snackbar v-model="snackbar" :timeout="7000" color="success">
-        {{ text }}
+        The MFA was disabled successfully.
         <template #actions>
             <v-btn color="default" variant="text" @click="snackbar = false">
                 Close
@@ -67,7 +67,8 @@
     </v-snackbar>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { ref } from 'vue';
 import {
     VDialog,
     VCard,
@@ -84,34 +85,11 @@ import {
     VSnackbar,
 } from 'vuetify/components';
 
-export default {
-    components: {
-        VDialog,
-        VCard,
-        VSheet,
-        VCardItem,
-        VCardTitle,
-        VBtn,
-        VDivider,
-        VForm,
-        VRow,
-        VCol,
-        VTextField,
-        VCardActions,
-        VSnackbar,
-    },
-    data() {
-        return {
-            snackbar: false,
-            text: `The MFA was disabled successfully.`,
-            dialog: false,
-        };
-    },
-    methods: {
-        onButtonClick() {
-            this.snackbar = true;
-            this.dialog = false;
-        },
-    },
-};
+const snackbar = ref<boolean>(false);
+const dialog = ref<boolean>(false);
+
+function onButtonClick() {
+    snackbar.value = true;
+    dialog.value = false;
+}
 </script>
\ No newline at end of file
diff --git a/satellite/admin/back-office/ui/src/components/AccountStatusDialog.vue b/satellite/admin/back-office/ui/src/components/AccountStatusDialog.vue
index f54262083f99..8a01fc6f18a0 100644
--- a/satellite/admin/back-office/ui/src/components/AccountStatusDialog.vue
+++ b/satellite/admin/back-office/ui/src/components/AccountStatusDialog.vue
@@ -59,7 +59,7 @@
     </v-dialog>
 
     <v-snackbar v-model="snackbar" :timeout="7000" color="success">
-        {{ text }}
+        Successfully saved the account status.
         <template #actions>
             <v-btn color="default" variant="text" @click="snackbar = false">
                 Close
@@ -68,7 +68,8 @@
     </v-snackbar>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { ref } from 'vue';
 import {
     VDialog,
     VCard,
@@ -86,35 +87,11 @@ import {
     VSnackbar,
 } from 'vuetify/components';
 
-export default {
-    components: {
-        VDialog,
-        VCard,
-        VSheet,
-        VCardItem,
-        VCardTitle,
-        VBtn,
-        VDivider,
-        VForm,
-        VRow,
-        VCol,
-        VSelect,
-        VTextField,
-        VCardActions,
-        VSnackbar,
-    },
-    data() {
-        return {
-            snackbar: false,
-            text: `Successfully saved the account status.`,
-            dialog: false,
-        };
-    },
-    methods: {
-        onButtonClick() {
-            this.snackbar = true;
-            this.dialog = false;
-        },
-    },
-};
+const snackbar = ref<boolean>(false);
+const dialog = ref<boolean>(false);
+
+function onButtonClick() {
+    snackbar.value = true;
+    dialog.value = false;
+}
 </script>
diff --git a/satellite/admin/back-office/ui/src/components/AccountSuspendDialog.vue b/satellite/admin/back-office/ui/src/components/AccountSuspendDialog.vue
index 66b610eb9b2f..ad1fba30c209 100644
--- a/satellite/admin/back-office/ui/src/components/AccountSuspendDialog.vue
+++ b/satellite/admin/back-office/ui/src/components/AccountSuspendDialog.vue
@@ -70,7 +70,7 @@
     </v-dialog>
 
     <v-snackbar v-model="snackbar" :timeout="7000" color="success">
-        {{ text }}
+        The account was suspended successfully.
         <template #actions>
             <v-btn color="default" variant="text" @click="snackbar = false">
                 Close
@@ -79,7 +79,8 @@
     </v-snackbar>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { ref } from 'vue';
 import {
     VDialog,
     VCard,
@@ -97,37 +98,13 @@ import {
     VSnackbar,
 } from 'vuetify/components';
 
-export default {
-    components: {
-        VDialog,
-        VCard,
-        VSheet,
-        VCardItem,
-        VCardTitle,
-        VBtn,
-        VDivider,
-        VForm,
-        VRow,
-        VCol,
-        VSelect,
-        VTextField,
-        VCardActions,
-        VSnackbar,
-    },
-    data() {
-        return {
-            selected: [],
-            otherReason: '',
-            snackbar: false,
-            text: `The account was suspended successfully.`,
-            dialog: false,
-        };
-    },
-    methods: {
-        onButtonClick() {
-            this.snackbar = true;
-            this.dialog = false;
-        },
-    },
-};
+const selected = ref<string[]>([]);
+const otherReason = ref<string>('');
+const snackbar = ref<boolean>(false);
+const dialog = ref<boolean>(false);
+
+function onButtonClick() {
+    snackbar.value = true;
+    dialog.value = false;
+}
 </script>
\ No newline at end of file
diff --git a/satellite/admin/back-office/ui/src/components/AccountUserAgentsDialog.vue b/satellite/admin/back-office/ui/src/components/AccountUserAgentsDialog.vue
index 2aa6a445fbaa..9a2b3c912e51 100644
--- a/satellite/admin/back-office/ui/src/components/AccountUserAgentsDialog.vue
+++ b/satellite/admin/back-office/ui/src/components/AccountUserAgentsDialog.vue
@@ -31,7 +31,7 @@
                     <v-col cols="12">
                         <v-select
                             label="Value Attribution" placeholder="Select the value attribution"
-                            :items="['User', 'Agent', 'Company', 'New']" model-value="Company" multiple chips required
+                            :items="['User', 'Agent', 'Company', 'New']" :model-value="['Company']" multiple chips required
                             variant="outlined" hide-details="auto" class="text-body"
                         />
                     </v-col>
@@ -62,7 +62,7 @@
     </v-dialog>
 
     <v-snackbar v-model="snackbar" :timeout="7000" color="success">
-        {{ text }}
+        Successfully saved the value attribution.
         <template #actions>
             <v-btn color="default" variant="text" @click="snackbar = false">
                 Close
@@ -71,7 +71,8 @@
     </v-snackbar>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { ref } from 'vue';
 import {
     VDialog,
     VCard,
@@ -89,35 +90,11 @@ import {
     VSnackbar,
 } from 'vuetify/components';
 
-export default {
-    components: {
-        VDialog,
-        VCard,
-        VSheet,
-        VCardItem,
-        VCardTitle,
-        VBtn,
-        VDivider,
-        VForm,
-        VRow,
-        VCol,
-        VSelect,
-        VTextField,
-        VCardActions,
-        VSnackbar,
-    },
-    data() {
-        return {
-            snackbar: false,
-            text: `Successfully saved the value attribution.`,
-            dialog: false,
-        };
-    },
-    methods: {
-        onButtonClick() {
-            this.snackbar = true;
-            this.dialog = false;
-        },
-    },
-};
+const snackbar = ref<boolean>(false);
+const dialog = ref<boolean>(false);
+
+function onButtonClick() {
+    snackbar.value = true;
+    dialog.value = false;
+}
 </script>
\ No newline at end of file
diff --git a/satellite/admin/back-office/ui/src/components/AccountsTableComponent.vue b/satellite/admin/back-office/ui/src/components/AccountsTableComponent.vue
index 82ce85c80030..6097277a551a 100644
--- a/satellite/admin/back-office/ui/src/components/AccountsTableComponent.vue
+++ b/satellite/admin/back-office/ui/src/components/AccountsTableComponent.vue
@@ -81,221 +81,203 @@
     </v-card>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { ref } from 'vue';
 import { VCard, VTextField, VBtn, VIcon, VChip } from 'vuetify/components';
 import { VDataTable } from 'vuetify/labs/components';
 
 import AccountActionsMenu from '@/components/AccountActionsMenu.vue';
 
-export default {
-    name: 'AccountsTableComponent',
-    components: {
-        VCard,
-        VTextField,
-        VBtn,
-        VIcon,
-        VChip,
-        VDataTable,
-        AccountActionsMenu,
+const search = ref<string>('');
+const selected = ref<string[]>([]);
+const sortBy = ref([{ key: 'email', order: 'asc' }]);
+
+const headers = [
+    { title: 'Account', key: 'email' },
+    { title: 'Type', key: 'type' },
+    // { title: 'Name', key: 'name' },
+    { title: 'Projects', key: 'projects' },
+    { title: 'Storage', key: 'storage' },
+    { title: 'Download', key: 'download' },
+    { title: 'Status', key: 'status' },
+    { title: 'Value', key: 'agent' },
+    { title: 'Placement', key: 'placement' },
+    { title: 'ID', key: 'userid' },
+    { title: 'Created', key: 'date', align: 'start' },
+];
+const users = [
+    {
+        name: 'Magnolia Queen',
+        date: '12 Mar 2023',
+        type: 'Enterprise',
+        status: 'Active',
+        projects: '8',
+        storage: '1,000 TB',
+        download: '3,000 TB',
+        agent: 'Company',
+        email: 'magnolia@queen.com',
+        placement: 'global',
+        userid: '2521',
+    },
+    {
+        name: 'Irving Thacker',
+        date: '30 May 2023',
+        type: 'Enterprise',
+        status: 'Active',
+        projects: '3',
+        storage: '1,000 TB',
+        download: '3,000 TB',
+        agent: 'Company',
+        email: 'itacker@gmail.com',
+        placement: 'global',
+        userid: '41',
+    },
+    {
+        name: 'Brianne Deighton',
+        date: '20 Mar 2023',
+        type: 'Enterprise',
+        status: 'Active',
+        projects: '1',
+        storage: '1,000 TB',
+        download: '3,000 TB',
+        agent: 'Company',
+        email: 'bd@rianne.net',
+        placement: 'global',
+        userid: '87212',
+    },
+    {
+        name: 'Vince Duke',
+        date: '4 Apr 2023',
+        type: 'Priority',
+        status: 'Active',
+        projects: '5',
+        storage: '500 TB',
+        download: '500 TB',
+        agent: 'User Agent',
+        email: 'vduke@gmail.com',
+        placement: 'global',
+        userid: '53212',
+    },
+    {
+        name: 'Aurora Knowles',
+        date: '15 Mar 2023',
+        type: 'Priority',
+        status: 'Active',
+        projects: '5',
+        storage: '500 TB',
+        download: '500 TB',
+        agent: 'User Agent',
+        email: 'knowles@aurora.io',
+        placement: 'global',
+        userid: '2',
+    },
+    {
+        name: 'Luvenia Breckinridge',
+        date: '11 Jan 2023',
+        type: 'Priority',
+        status: 'Frozen',
+        projects: '3',
+        storage: '500 TB',
+        download: '500 TB',
+        agent: 'User Agent',
+        email: 'lbreckinridge42@gmail.com',
+        placement: 'global',
+        userid: '1244',
     },
-    data() {
-        return {
-            search: '',
-            selected: [],
-            sortBy: [{ key: 'email', order: 'asc' }],
-            headers: [
-                { title: 'Account', key: 'email' },
-                { title: 'Type', key: 'type' },
-                // { title: 'Name', key: 'name' },
-                { title: 'Projects', key: 'projects' },
-                { title: 'Storage', key: 'storage' },
-                { title: 'Download', key: 'download' },
-                { title: 'Status', key: 'status' },
-                { title: 'Value', key: 'agent' },
-                { title: 'Placement', key: 'placement' },
-                { title: 'ID', key: 'userid' },
-                { title: 'Created', key: 'date', align: 'start' },
-            ],
-            users: [
-                {
-                    name: 'Magnolia Queen',
-                    date: '12 Mar 2023',
-                    type: 'Enterprise',
-                    status: 'Active',
-                    projects: '8',
-                    storage: '1,000 TB',
-                    download: '3,000 TB',
-                    agent: 'Company',
-                    email: 'magnolia@queen.com',
-                    placement: 'global',
-                    userid: '2521',
-                },
-                {
-                    name: 'Irving Thacker',
-                    date: '30 May 2023',
-                    type: 'Enterprise',
-                    status: 'Active',
-                    projects: '3',
-                    storage: '1,000 TB',
-                    download: '3,000 TB',
-                    agent: 'Company',
-                    email: 'itacker@gmail.com',
-                    placement: 'global',
-                    userid: '41',
-                },
-                {
-                    name: 'Brianne Deighton',
-                    date: '20 Mar 2023',
-                    type: 'Enterprise',
-                    status: 'Active',
-                    projects: '1',
-                    storage: '1,000 TB',
-                    download: '3,000 TB',
-                    agent: 'Company',
-                    email: 'bd@rianne.net',
-                    placement: 'global',
-                    userid: '87212',
-                },
-                {
-                    name: 'Vince Duke',
-                    date: '4 Apr 2023',
-                    type: 'Priority',
-                    status: 'Active',
-                    projects: '5',
-                    storage: '500 TB',
-                    download: '500 TB',
-                    agent: 'User Agent',
-                    email: 'vduke@gmail.com',
-                    placement: 'global',
-                    userid: '53212',
-                },
-                {
-                    name: 'Aurora Knowles',
-                    date: '15 Mar 2023',
-                    type: 'Priority',
-                    status: 'Active',
-                    projects: '5',
-                    storage: '500 TB',
-                    download: '500 TB',
-                    agent: 'User Agent',
-                    email: 'knowles@aurora.io',
-                    placement: 'global',
-                    userid: '2',
-                },
-                {
-                    name: 'Luvenia Breckinridge',
-                    date: '11 Jan 2023',
-                    type: 'Priority',
-                    status: 'Frozen',
-                    projects: '3',
-                    storage: '500 TB',
-                    download: '500 TB',
-                    agent: 'User Agent',
-                    email: 'lbreckinridge42@gmail.com',
-                    placement: 'global',
-                    userid: '1244',
-                },
-                {
-                    name: 'Georgia Jordan',
-                    date: '15 Mar 2023',
-                    type: 'Pro',
-                    status: 'Active',
-                    projects: '3',
-                    storage: '75 TB',
-                    download: '300 TB',
-                    agent: 'Agent',
-                    email: 'georgia@jordan.net',
-                    placement: 'global',
-                    userid: '55524',
-                },
-                {
-                    name: 'Mckayla Bird',
-                    date: '5 May 2023',
-                    type: 'Pro',
-                    status: 'Active',
-                    projects: '2',
-                    storage: '75 TB',
-                    download: '300 TB',
-                    agent: 'Agent',
-                    email: 'mckaylabird@gmail.com',
-                    placement: 'global',
-                    userid: '102852',
-                },
-                {
-                    name: 'Herb Hamilton',
-                    date: '15 Mar 2023',
-                    type: 'Pro',
-                    status: 'Active',
-                    projects: '3',
-                    storage: '75 TB',
-                    download: '300 TB',
-                    agent: 'Agent',
-                    email: 'herbh@gmail.com',
-                    placement: 'global',
-                    userid: '248',
-                },
-                {
-                    name: 'Tria Goddard',
-                    date: '10 Mar 2023',
-                    type: 'Free',
-                    status: 'Frozen',
-                    projects: '1',
-                    storage: '1 TB',
-                    download: '3 TB',
-                    agent: 'Name',
-                    email: 'tg@tria.com',
-                    placement: 'global',
-                    userid: '12515',
-                },
-                {
-                    name: 'Scarlett Trevis',
-                    date: '24 Mar 2023',
-                    type: 'Free',
-                    status: 'Active',
-                    projects: '1',
-                    storage: '1 TB',
-                    download: '3 TB',
-                    agent: 'Name',
-                    email: 'sctrevis@gmail.com',
-                    placement: 'global',
-                    userid: '821',
-                },
-                {
-                    name: 'Destiny Brett',
-                    date: '29 Mar 2023',
-                    type: 'Free',
-                    status: 'Suspended',
-                    projects: '1',
-                    storage: '0 TB',
-                    download: '0 TB',
-                    agent: 'Test',
-                    email: 'destiny@gmail.com',
-                    placement: 'global',
-                    userid: '25808',
-                },
-            ],
-        };
+    {
+        name: 'Georgia Jordan',
+        date: '15 Mar 2023',
+        type: 'Pro',
+        status: 'Active',
+        projects: '3',
+        storage: '75 TB',
+        download: '300 TB',
+        agent: 'Agent',
+        email: 'georgia@jordan.net',
+        placement: 'global',
+        userid: '55524',
     },
-    computed: {
-        getColor() {
-            return (type) => {
-                if (type === 'Enterprise') return 'purple';
-                if (type === 'Priority') return 'secondary';
-                if (type === 'Pro') return 'success';
-                if (type === 'Free') return 'default';
-                if (type === 'Active') return 'success';
-                if (type === 'Inactive') return 'default';
-                if (type === 'Frozen') return 'warning';
-                if (type === 'Suspended') return 'error';
-                if (type === 'Deleted') return 'error';
-                return 'default';
-            };
-        },
+    {
+        name: 'Mckayla Bird',
+        date: '5 May 2023',
+        type: 'Pro',
+        status: 'Active',
+        projects: '2',
+        storage: '75 TB',
+        download: '300 TB',
+        agent: 'Agent',
+        email: 'mckaylabird@gmail.com',
+        placement: 'global',
+        userid: '102852',
     },
-    methods: {
-        setSearch(searchText) {
-            this.search = searchText;
-        },
+    {
+        name: 'Herb Hamilton',
+        date: '15 Mar 2023',
+        type: 'Pro',
+        status: 'Active',
+        projects: '3',
+        storage: '75 TB',
+        download: '300 TB',
+        agent: 'Agent',
+        email: 'herbh@gmail.com',
+        placement: 'global',
+        userid: '248',
     },
-};
+    {
+        name: 'Tria Goddard',
+        date: '10 Mar 2023',
+        type: 'Free',
+        status: 'Frozen',
+        projects: '1',
+        storage: '1 TB',
+        download: '3 TB',
+        agent: 'Name',
+        email: 'tg@tria.com',
+        placement: 'global',
+        userid: '12515',
+    },
+    {
+        name: 'Scarlett Trevis',
+        date: '24 Mar 2023',
+        type: 'Free',
+        status: 'Active',
+        projects: '1',
+        storage: '1 TB',
+        download: '3 TB',
+        agent: 'Name',
+        email: 'sctrevis@gmail.com',
+        placement: 'global',
+        userid: '821',
+    },
+    {
+        name: 'Destiny Brett',
+        date: '29 Mar 2023',
+        type: 'Free',
+        status: 'Suspended',
+        projects: '1',
+        storage: '0 TB',
+        download: '0 TB',
+        agent: 'Test',
+        email: 'destiny@gmail.com',
+        placement: 'global',
+        userid: '25808',
+    },
+];
+
+function getColor(type: string) {
+    if (type === 'Enterprise') return 'purple';
+    if (type === 'Priority') return 'secondary';
+    if (type === 'Pro') return 'success';
+    if (type === 'Free') return 'default';
+    if (type === 'Active') return 'success';
+    if (type === 'Inactive') return 'default';
+    if (type === 'Frozen') return 'warning';
+    if (type === 'Suspended') return 'error';
+    if (type === 'Deleted') return 'error';
+    return 'default';
+}
+
+function setSearch(searchText: string) {
+    search.value = searchText;
+}
 </script>
diff --git a/satellite/admin/back-office/ui/src/components/AdminAccountDialog.vue b/satellite/admin/back-office/ui/src/components/AdminAccountDialog.vue
index efe3a0bf723a..7a410b0900b2 100644
--- a/satellite/admin/back-office/ui/src/components/AdminAccountDialog.vue
+++ b/satellite/admin/back-office/ui/src/components/AdminAccountDialog.vue
@@ -58,7 +58,7 @@
     </v-dialog>
 
     <v-snackbar v-model="snackbar" :timeout="7000" color="success">
-        {{ text }}
+        Account information updated successfully.
         <template #actions>
             <v-btn color="default" variant="text" @click="snackbar = false">
                 Close
@@ -67,7 +67,8 @@
     </v-snackbar>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { ref } from 'vue';
 import {
     VDialog,
     VCard,
@@ -84,34 +85,11 @@ import {
     VSnackbar,
 } from 'vuetify/components';
 
-export default {
-    components: {
-        VDialog,
-        VCard,
-        VSheet,
-        VCardItem,
-        VCardTitle,
-        VBtn,
-        VDivider,
-        VForm,
-        VRow,
-        VCol,
-        VTextField,
-        VCardActions,
-        VSnackbar,
-    },
-    data() {
-        return {
-            snackbar: false,
-            text: `Account information updated successfully.`,
-            dialog: false,
-        };
-    },
-    methods: {
-        onButtonClick() {
-            this.snackbar = true;
-            this.dialog = false;
-        },
-    },
-};
+const snackbar = ref<boolean>(false);
+const dialog = ref<boolean>(false);
+
+function onButtonClick() {
+    snackbar.value = true;
+    dialog.value = false;
+}
 </script>
\ No newline at end of file
diff --git a/satellite/admin/back-office/ui/src/components/BucketActionsMenu.vue b/satellite/admin/back-office/ui/src/components/BucketActionsMenu.vue
index b69c54201784..7c8ff9f13826 100644
--- a/satellite/admin/back-office/ui/src/components/BucketActionsMenu.vue
+++ b/satellite/admin/back-office/ui/src/components/BucketActionsMenu.vue
@@ -45,26 +45,11 @@
     </v-menu>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { VMenu, VList, VListItem, VListItemTitle, VDivider } from 'vuetify/components';
 
 import BucketInformationDialog from '@/components/BucketInformationDialog.vue';
 import BucketDeleteDialog from '@/components/BucketDeleteDialog.vue';
 import BucketGeofenceDialog from '@/components/BucketGeofenceDialog.vue';
 import BucketUserAgentsDialog from '@/components/BucketUserAgentsDialog.vue';
-
-export default {
-    name: 'BucketActionsMenu',
-    components: {
-        VMenu,
-        VList,
-        VListItem,
-        VListItemTitle,
-        VDivider,
-        BucketDeleteDialog,
-        BucketGeofenceDialog,
-        BucketUserAgentsDialog,
-        BucketInformationDialog,
-    },
-};
 </script>
diff --git a/satellite/admin/back-office/ui/src/components/BucketDeleteDialog.vue b/satellite/admin/back-office/ui/src/components/BucketDeleteDialog.vue
index 17aee560ce91..691a47d5b3db 100644
--- a/satellite/admin/back-office/ui/src/components/BucketDeleteDialog.vue
+++ b/satellite/admin/back-office/ui/src/components/BucketDeleteDialog.vue
@@ -74,7 +74,7 @@
     </v-dialog>
 
     <v-snackbar v-model="snackbar" :timeout="7000" color="success">
-        {{ text }}
+        The bucket was deleted successfully.
         <template #actions>
             <v-btn color="default" variant="text" @click="snackbar = false">
                 Close
@@ -83,7 +83,8 @@
     </v-snackbar>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { ref } from 'vue';
 import {
     VDialog,
     VCard,
@@ -102,36 +103,11 @@ import {
     VAlert,
 } from 'vuetify/components';
 
-export default {
-    components: {
-        VDialog,
-        VCard,
-        VSheet,
-        VCardItem,
-        VCardTitle,
-        VBtn,
-        VDivider,
-        VForm,
-        VRow,
-        VCol,
-        VSelect,
-        VTextField,
-        VCardActions,
-        VSnackbar,
-        VAlert,
-    },
-    data() {
-        return {
-            snackbar: false,
-            text: `The bucket was deleted successfully.`,
-            dialog: false,
-        };
-    },
-    methods: {
-        onButtonClick() {
-            this.snackbar = true;
-            this.dialog = false;
-        },
-    },
-};
+const snackbar = ref<boolean>(false);
+const dialog = ref<boolean>(false);
+
+function onButtonClick() {
+    snackbar.value = true;
+    dialog.value = false;
+}
 </script>
\ No newline at end of file
diff --git a/satellite/admin/back-office/ui/src/components/BucketGeofenceDialog.vue b/satellite/admin/back-office/ui/src/components/BucketGeofenceDialog.vue
index 5ceb40939518..48264bd95bee 100644
--- a/satellite/admin/back-office/ui/src/components/BucketGeofenceDialog.vue
+++ b/satellite/admin/back-office/ui/src/components/BucketGeofenceDialog.vue
@@ -61,7 +61,7 @@
     </v-dialog>
 
     <v-snackbar v-model="snackbar" :timeout="7000" color="success">
-        {{ text }}
+        The bucket placement was set successfully.
         <template #actions>
             <v-btn color="default" variant="text" @click="snackbar = false">
                 Close
@@ -70,7 +70,8 @@
     </v-snackbar>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { ref } from 'vue';
 import {
     VDialog,
     VCard,
@@ -88,35 +89,11 @@ import {
     VSnackbar,
 } from 'vuetify/components';
 
-export default {
-    components: {
-        VDialog,
-        VCard,
-        VSheet,
-        VCardItem,
-        VCardTitle,
-        VBtn,
-        VDivider,
-        VForm,
-        VRow,
-        VCol,
-        VSelect,
-        VTextField,
-        VCardActions,
-        VSnackbar,
-    },
-    data() {
-        return {
-            snackbar: false,
-            text: `The bucket placement was set successfully.`,
-            dialog: false,
-        };
-    },
-    methods: {
-        onButtonClick() {
-            this.snackbar = true;
-            this.dialog = false;
-        },
-    },
-};
+const snackbar = ref<boolean>(false);
+const dialog = ref<boolean>(false);
+
+function onButtonClick() {
+    snackbar.value = true;
+    dialog.value = false;
+}
 </script>
\ No newline at end of file
diff --git a/satellite/admin/back-office/ui/src/components/BucketInformationDialog.vue b/satellite/admin/back-office/ui/src/components/BucketInformationDialog.vue
index 1fcde4368fc2..51f4aa88d902 100644
--- a/satellite/admin/back-office/ui/src/components/BucketInformationDialog.vue
+++ b/satellite/admin/back-office/ui/src/components/BucketInformationDialog.vue
@@ -49,7 +49,7 @@
     </v-dialog>
 
     <v-snackbar v-model="snackbar" :timeout="7000" color="success">
-        {{ text }}
+        Successfully updated the bucket information.
         <template #actions>
             <v-btn color="default" variant="text" @click="snackbar = false">
                 Close
@@ -58,7 +58,8 @@
     </v-snackbar>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { ref } from 'vue';
 import {
     VDialog,
     VCard,
@@ -75,34 +76,11 @@ import {
     VSnackbar,
 } from 'vuetify/components';
 
-export default {
-    components: {
-        VDialog,
-        VCard,
-        VSheet,
-        VCardItem,
-        VCardTitle,
-        VBtn,
-        VDivider,
-        VForm,
-        VRow,
-        VCol,
-        VTextField,
-        VCardActions,
-        VSnackbar,
-    },
-    data() {
-        return {
-            snackbar: false,
-            text: `Successfully updated the bucket information.`,
-            dialog: false,
-        };
-    },
-    methods: {
-        onButtonClick() {
-            this.snackbar = true;
-            this.dialog = false;
-        },
-    },
-};
+const snackbar = ref<boolean>(false);
+const dialog = ref<boolean>(false);
+
+function onButtonClick() {
+    snackbar.value = true;
+    dialog.value = false;
+}
 </script>
\ No newline at end of file
diff --git a/satellite/admin/back-office/ui/src/components/BucketUserAgentsDialog.vue b/satellite/admin/back-office/ui/src/components/BucketUserAgentsDialog.vue
index 8749319f2b43..540fefe60ba5 100644
--- a/satellite/admin/back-office/ui/src/components/BucketUserAgentsDialog.vue
+++ b/satellite/admin/back-office/ui/src/components/BucketUserAgentsDialog.vue
@@ -62,7 +62,7 @@
     </v-dialog>
 
     <v-snackbar v-model="snackbar" :timeout="7000" color="success">
-        {{ text }}
+        Successfully saved the value attribution.
         <template #actions>
             <v-btn color="default" variant="text" @click="snackbar = false">
                 Close
@@ -71,7 +71,8 @@
     </v-snackbar>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { ref } from 'vue';
 import {
     VDialog,
     VCard,
@@ -89,35 +90,11 @@ import {
     VSnackbar,
 } from 'vuetify/components';
 
-export default {
-    components: {
-        VDialog,
-        VCard,
-        VSheet,
-        VCardItem,
-        VCardTitle,
-        VBtn,
-        VDivider,
-        VForm,
-        VRow,
-        VCol,
-        VSelect,
-        VTextField,
-        VCardActions,
-        VSnackbar,
-    },
-    data() {
-        return {
-            snackbar: false,
-            text: `Successfully saved the value attribution.`,
-            dialog: false,
-        };
-    },
-    methods: {
-        onButtonClick() {
-            this.snackbar = true;
-            this.dialog = false;
-        },
-    },
-};
+const snackbar = ref<boolean>(false);
+const dialog = ref<boolean>(false);
+
+function onButtonClick() {
+    snackbar.value = true;
+    dialog.value = false;
+}
 </script>
\ No newline at end of file
diff --git a/satellite/admin/back-office/ui/src/components/BucketsTableComponent.vue b/satellite/admin/back-office/ui/src/components/BucketsTableComponent.vue
index 7044a63abc4d..a8ccf6a4f349 100644
--- a/satellite/admin/back-office/ui/src/components/BucketsTableComponent.vue
+++ b/satellite/admin/back-office/ui/src/components/BucketsTableComponent.vue
@@ -58,146 +58,130 @@
     </v-card>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { ref } from 'vue';
 import { VCard, VTextField, VBtn, VIcon, VChip } from 'vuetify/components';
 import { VDataTable } from 'vuetify/labs/components';
 
 import BucketActionsMenu from '@/components/BucketActionsMenu.vue';
 
-export default {
-    name: 'BucketsTableComponent',
-    components: {
-        VCard,
-        VTextField,
-        VBtn,
-        VIcon,
-        VChip,
-        VDataTable,
-        BucketActionsMenu,
+const search = ref<string>('');
+const selected = ref<string[]>([]);
+const sortBy = ref([{ key: 'name', order: 'asc' }]);
+
+const headers = [
+    { title: 'Bucket', key: 'name' },
+    { title: 'Storage', key: 'storage' },
+    { title: 'Download', key: 'download' },
+    { title: 'Segments', key: 'segments' },
+    { title: 'Placement', key: 'placement' },
+    { title: 'Value', key: 'agent' },
+    { title: 'Created', key: 'date' },
+];
+const files = [
+    {
+        name: 'First',
+        placement: 'global',
+        bucketid: '1Q284JF',
+        storage: '300TB',
+        download: '100TB',
+        segments: '23,456',
+        agent: 'Test Agent',
+        date: '02 Mar 2023',
+    },
+    {
+        name: 'Personal',
+        placement: 'global',
+        bucketid: '82SR21Q',
+        storage: '30TB',
+        download: '10TB',
+        segments: '123,456',
+        agent: 'Agent',
+        date: '21 Apr 2023',
+    },
+    {
+        name: 'Invitation',
+        placement: 'global',
+        bucketid: '4JFF82S',
+        storage: '500TB',
+        download: '200TB',
+        segments: '456',
+        agent: 'Random',
+        date: '24 Mar 2023',
+    },
+    {
+        name: 'Videos',
+        placement: 'global',
+        bucketid: '1Q223JA',
+        storage: '300TB',
+        download: '100TB',
+        segments: '3,456',
+        agent: 'Test Agent',
+        date: '11 Mar 2023',
+    },
+    {
+        name: 'App',
+        placement: 'global',
+        bucketid: 'R21Q284',
+        storage: '300TB',
+        download: '100TB',
+        segments: '56',
+        agent: 'Test Agent',
+        date: '11 Mar 2023',
     },
-    data() {
-        return {
-            // search in the table
-            search: '',
-            selected: [],
-            sortBy: [{ key: 'name', order: 'asc' }],
-            headers: [
-                { title: 'Bucket', key: 'name' },
-                { title: 'Storage', key: 'storage' },
-                { title: 'Download', key: 'download' },
-                { title: 'Segments', key: 'segments' },
-                { title: 'Placement', key: 'placement' },
-                { title: 'Value', key: 'agent' },
-                { title: 'Created', key: 'date' },
-            ],
-            files: [
-                {
-                    name: 'First',
-                    placement: 'global',
-                    bucketid: '1Q284JF',
-                    storage: '300TB',
-                    download: '100TB',
-                    segments: '23,456',
-                    agent: 'Test Agent',
-                    date: '02 Mar 2023',
-                },
-                {
-                    name: 'Personal',
-                    placement: 'global',
-                    bucketid: '82SR21Q',
-                    storage: '30TB',
-                    download: '10TB',
-                    segments: '123,456',
-                    agent: 'Agent',
-                    date: '21 Apr 2023',
-                },
-                {
-                    name: 'Invitation',
-                    placement: 'global',
-                    bucketid: '4JFF82S',
-                    storage: '500TB',
-                    download: '200TB',
-                    segments: '456',
-                    agent: 'Random',
-                    date: '24 Mar 2023',
-                },
-                {
-                    name: 'Videos',
-                    placement: 'global',
-                    bucketid: '1Q223JA',
-                    storage: '300TB',
-                    download: '100TB',
-                    segments: '3,456',
-                    agent: 'Test Agent',
-                    date: '11 Mar 2023',
-                },
-                {
-                    name: 'App',
-                    placement: 'global',
-                    bucketid: 'R21Q284',
-                    storage: '300TB',
-                    download: '100TB',
-                    segments: '56',
-                    agent: 'Test Agent',
-                    date: '11 Mar 2023',
-                },
-                {
-                    name: 'Backup',
-                    placement: 'global',
-                    bucketid: '42SR20S',
-                    storage: '30TB',
-                    download: '10TB',
-                    segments: '1,456',
-                    agent: 'Agent',
-                    date: '21 Apr 2023',
-                },
-                {
-                    name: 'My Bucket',
-                    placement: 'global',
-                    bucketid: '4JFF8FF',
-                    storage: '500TB',
-                    download: '200TB',
-                    segments: '6',
-                    agent: 'Random',
-                    date: '24 Mar 2023',
-                },
-                {
-                    name: 'Sync',
-                    placement: 'global',
-                    bucketid: '4JFF8ZZ',
-                    storage: '500TB',
-                    download: '200TB',
-                    segments: '3,123,456',
-                    agent: 'Random',
-                    date: '24 Mar 2023',
-                },
-                {
-                    name: 'Backupss',
-                    placement: 'global',
-                    bucketid: '4JFF8TS',
-                    storage: '500TB',
-                    download: '200TB',
-                    segments: '10,123,456',
-                    agent: 'Random',
-                    date: '24 Mar 2023',
-                },
-                {
-                    name: 'Destiny',
-                    placement: 'global',
-                    bucketid: '4IF42TM',
-                    storage: '500TB',
-                    download: '200TB',
-                    segments: '3,456',
-                    agent: 'Random',
-                    date: '29 Mar 2023',
-                },
-            ],
-        };
+    {
+        name: 'Backup',
+        placement: 'global',
+        bucketid: '42SR20S',
+        storage: '30TB',
+        download: '10TB',
+        segments: '1,456',
+        agent: 'Agent',
+        date: '21 Apr 2023',
     },
-    methods: {
-        setSearch(searchText) {
-            this.search = searchText;
-        },
+    {
+        name: 'My Bucket',
+        placement: 'global',
+        bucketid: '4JFF8FF',
+        storage: '500TB',
+        download: '200TB',
+        segments: '6',
+        agent: 'Random',
+        date: '24 Mar 2023',
     },
-};
+    {
+        name: 'Sync',
+        placement: 'global',
+        bucketid: '4JFF8ZZ',
+        storage: '500TB',
+        download: '200TB',
+        segments: '3,123,456',
+        agent: 'Random',
+        date: '24 Mar 2023',
+    },
+    {
+        name: 'Backupss',
+        placement: 'global',
+        bucketid: '4JFF8TS',
+        storage: '500TB',
+        download: '200TB',
+        segments: '10,123,456',
+        agent: 'Random',
+        date: '24 Mar 2023',
+    },
+    {
+        name: 'Destiny',
+        placement: 'global',
+        bucketid: '4IF42TM',
+        storage: '500TB',
+        download: '200TB',
+        segments: '3,456',
+        agent: 'Random',
+        date: '29 Mar 2023',
+    },
+];
+
+function setSearch(searchText: string) {
+    search.value = searchText;
+}
 </script>
diff --git a/satellite/admin/back-office/ui/src/components/CardStatsComponent.vue b/satellite/admin/back-office/ui/src/components/CardStatsComponent.vue
index c5b4d20e3724..42eef8bcd641 100644
--- a/satellite/admin/back-office/ui/src/components/CardStatsComponent.vue
+++ b/satellite/admin/back-office/ui/src/components/CardStatsComponent.vue
@@ -9,36 +9,14 @@
     </v-card>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { VCard, VCardText, VChip } from 'vuetify/components';
 
-export default {
-    components: {
-        VCard,
-        VCardText,
-        VChip,
-    },
-    props: {
-        title: {
-            type: String,
-            required: true,
-        },
-        subtitle: {
-            type: String,
-            required: true,
-        },
-        data: {
-            type: String,
-            required: true,
-        },
-        variant: {
-            type: String,
-            required: true,
-        },
-        color: {
-            type: String,
-            required: true,
-        },
-    },
-};
+const props = defineProps<{
+    title: string;
+    subtitle: string;
+    data: string;
+    variant?: 'flat' | 'text' | 'elevated' | 'tonal' | 'outlined' | 'plain';
+    color?: string;
+}>();
 </script>
\ No newline at end of file
diff --git a/satellite/admin/back-office/ui/src/components/DashboardLimitsTableComponent.vue b/satellite/admin/back-office/ui/src/components/DashboardLimitsTableComponent.vue
index 500a09d6697f..3a3b7a367276 100644
--- a/satellite/admin/back-office/ui/src/components/DashboardLimitsTableComponent.vue
+++ b/satellite/admin/back-office/ui/src/components/DashboardLimitsTableComponent.vue
@@ -98,180 +98,167 @@
         </template>
     </v-data-table>
 </template>
-<script lang="ts">
+
+<script setup lang="ts">
+import { ref } from 'vue';
 import { VTextField, VBtn, VIcon, VChip, VTooltip } from 'vuetify/components';
 import { VDataTable } from 'vuetify/labs/components';
 
 import ProjectActionsMenu from '@/components/ProjectActionsMenu.vue';
 
-export default {
-    components: {
-        VTextField,
-        VBtn,
-        VIcon,
-        VChip,
-        VTooltip,
-        VDataTable,
-        ProjectActionsMenu,
+const search = ref<string>('');
+const selected = ref<string[]>([]);
+const sortBy = ref([{ key: 'name', order: 'asc' }]);
+
+const headers = [
+    { title: 'Project ID', key: 'projectid', align: 'start' },
+    // { title: 'Name', key: 'name'},
+    { title: 'Account', key: 'email' },
+    { title: 'Storage Used', key: 'storagepercent' },
+    { title: 'Storage Used', key: 'storageused' },
+    { title: 'Storage Limit', key: 'storagelimit' },
+    { title: 'Download Used', key: 'downloadpercent' },
+    { title: 'Download Used', key: 'downloadused' },
+    { title: 'Download Limit', key: 'downloadlimit' },
+    { title: 'Segments Used', key: 'segmentpercent' },
+    { title: 'Value', key: 'agent' },
+    { title: 'Placement', key: 'placement' },
+    { title: 'Created', key: 'date' },
+];
+const projects = [
+    {
+        name: 'Personal Project',
+        email: 'knowles@aurora.io',
+        projectid: '284JFF82SR21Q',
+        storageused: '150 TB',
+        storagelimit: '300 TB',
+        storagepercent: '50',
+        downloadused: '100 TB',
+        downloadlimit: '100 TB',
+        downloadpercent: '100',
+        segmentpercent: '43',
+        placement: 'Global',
+        agent: 'Agent',
+        date: '21 Apr 2023',
+    },
+    {
+        name: 'Videos',
+        email: 'vduke@gmail.com',
+        projectid: '482SR21Q223JA',
+        storageused: '24 TB',
+        storagelimit: '30 TB',
+        storagepercent: '80',
+        downloadused: '7 TB',
+        downloadlimit: '100 TB',
+        segmentpercent: '20',
+        downloadpercent: '7',
+        placement: 'Global',
+        agent: 'Test Agent',
+        date: '11 Mar 2023',
+    },
+    {
+        name: 'App',
+        email: 'vduke@gmail.com',
+        projectid: '56F82SR21Q284',
+        storageused: '150 TB',
+        storagelimit: '300 TB',
+        storagepercent: '50',
+        downloadused: '100 TB',
+        downloadlimit: '100 TB',
+        downloadpercent: '100',
+        segmentpercent: '43',
+        placement: 'Global',
+        agent: 'Test Agent',
+        date: '11 Mar 2023',
+    },
+    {
+        name: 'Backup',
+        email: 'knowles@aurora.io',
+        projectid: '624QXF42SR20S',
+        storageused: '99 TB',
+        storagelimit: '100 TB',
+        storagepercent: '99',
+        downloadused: '85 TB',
+        downloadlimit: '100 TB',
+        segmentpercent: '83',
+        downloadpercent: '85',
+        placement: 'Global',
+        agent: 'Agent',
+        date: '21 Apr 2023',
     },
-    data() {
-        return {
-            // search in the table
-            search: '',
-            selected: [],
-            sortBy: [{ key: 'name', order: 'asc' }],
-            headers: [
-                { title: 'Project ID', key: 'projectid', align: 'start' },
-                // { title: 'Name', key: 'name'},
-                { title: 'Account', key: 'email' },
-                { title: 'Storage Used', key: 'storagepercent' },
-                { title: 'Storage Used', key: 'storageused' },
-                { title: 'Storage Limit', key: 'storagelimit' },
-                { title: 'Download Used', key: 'downloadpercent' },
-                { title: 'Download Used', key: 'downloadused' },
-                { title: 'Download Limit', key: 'downloadlimit' },
-                { title: 'Segments Used', key: 'segmentpercent' },
-                { title: 'Value', key: 'agent' },
-                { title: 'Placement', key: 'placement' },
-                { title: 'Created', key: 'date' },
-            ],
-            projects: [
-                {
-                    name: 'Personal Project',
-                    email: 'knowles@aurora.io',
-                    projectid: '284JFF82SR21Q',
-                    storageused: '150 TB',
-                    storagelimit: '300 TB',
-                    storagepercent: '50',
-                    downloadused: '100 TB',
-                    downloadlimit: '100 TB',
-                    downloadpercent: '100',
-                    segmentpercent: '43',
-                    placement: 'Global',
-                    agent: 'Agent',
-                    date: '21 Apr 2023',
-                },
-                {
-                    name: 'Videos',
-                    email: 'vduke@gmail.com',
-                    projectid: '482SR21Q223JA',
-                    storageused: '24 TB',
-                    storagelimit: '30 TB',
-                    storagepercent: '80',
-                    downloadused: '7 TB',
-                    downloadlimit: '100 TB',
-                    segmentpercent: '20',
-                    downloadpercent: '7',
-                    placement: 'Global',
-                    agent: 'Test Agent',
-                    date: '11 Mar 2023',
-                },
-                {
-                    name: 'App',
-                    email: 'vduke@gmail.com',
-                    projectid: '56F82SR21Q284',
-                    storageused: '150 TB',
-                    storagelimit: '300 TB',
-                    storagepercent: '50',
-                    downloadused: '100 TB',
-                    downloadlimit: '100 TB',
-                    downloadpercent: '100',
-                    segmentpercent: '43',
-                    placement: 'Global',
-                    agent: 'Test Agent',
-                    date: '11 Mar 2023',
-                },
-                {
-                    name: 'Backup',
-                    email: 'knowles@aurora.io',
-                    projectid: '624QXF42SR20S',
-                    storageused: '99 TB',
-                    storagelimit: '100 TB',
-                    storagepercent: '99',
-                    downloadused: '85 TB',
-                    downloadlimit: '100 TB',
-                    segmentpercent: '83',
-                    downloadpercent: '85',
-                    placement: 'Global',
-                    agent: 'Agent',
-                    date: '21 Apr 2023',
-                },
-                {
-                    name: 'My Project',
-                    email: 'sctrevis@gmail.com',
-                    projectid: 'P33Q284JFF8FF',
-                    storageused: '24 TB',
-                    storagelimit: '30 TB',
-                    storagepercent: '80',
-                    downloadused: '7 TB',
-                    downloadlimit: '100 TB',
-                    segmentpercent: '20',
-                    downloadpercent: '7',
-                    placement: 'Global',
-                    agent: 'Random',
-                    date: '24 Mar 2023',
-                },
-                {
-                    name: 'Sync',
-                    email: 'sctrevis@gmail.com',
-                    projectid: 'W22S284JFF8ZZ',
-                    storageused: '150 TB',
-                    storagelimit: '300 TB',
-                    storagepercent: '50',
-                    downloadused: '100 TB',
-                    downloadlimit: '100 TB',
-                    downloadpercent: '100',
-                    segmentpercent: '43',
-                    placement: 'Global',
-                    agent: 'Random',
-                    date: '24 Mar 2023',
-                },
-                {
-                    name: 'Backupss',
-                    email: 'destiny@gmail.com',
-                    projectid: '2SFX284JFF8TS',
-                    storageused: '99 TB',
-                    storagelimit: '100 TB',
-                    storagepercent: '99',
-                    downloadused: '85 TB',
-                    downloadlimit: '100 TB',
-                    segmentpercent: '83',
-                    downloadpercent: '85',
-                    placement: 'Global',
-                    agent: 'Random',
-                    date: '24 Mar 2023',
-                },
-                {
-                    name: 'Destiny',
-                    email: 'destiny@gmail.com',
-                    projectid: 'FGXZ484IF42TM',
-                    storageused: '24 TB',
-                    storagelimit: '30 TB',
-                    storagepercent: '80',
-                    downloadused: '7 TB',
-                    downloadlimit: '100 TB',
-                    segmentpercent: '20',
-                    downloadpercent: '7',
-                    placement: 'Global',
-                    agent: 'Random',
-                    date: '29 Mar 2023',
-                },
-            ],
-        };
+    {
+        name: 'My Project',
+        email: 'sctrevis@gmail.com',
+        projectid: 'P33Q284JFF8FF',
+        storageused: '24 TB',
+        storagelimit: '30 TB',
+        storagepercent: '80',
+        downloadused: '7 TB',
+        downloadlimit: '100 TB',
+        segmentpercent: '20',
+        downloadpercent: '7',
+        placement: 'Global',
+        agent: 'Random',
+        date: '24 Mar 2023',
     },
-    methods: {
-        setSearch(searchText) {
-            this.search = searchText;
-        },
-        getPercentColor(percent) {
-            if (percent >= 99) {
-                return 'error';
-            } else if (percent >= 80) {
-                return 'warning';
-            } else {
-                return 'success';
-            }
-        },
+    {
+        name: 'Sync',
+        email: 'sctrevis@gmail.com',
+        projectid: 'W22S284JFF8ZZ',
+        storageused: '150 TB',
+        storagelimit: '300 TB',
+        storagepercent: '50',
+        downloadused: '100 TB',
+        downloadlimit: '100 TB',
+        downloadpercent: '100',
+        segmentpercent: '43',
+        placement: 'Global',
+        agent: 'Random',
+        date: '24 Mar 2023',
     },
-};
+    {
+        name: 'Backupss',
+        email: 'destiny@gmail.com',
+        projectid: '2SFX284JFF8TS',
+        storageused: '99 TB',
+        storagelimit: '100 TB',
+        storagepercent: '99',
+        downloadused: '85 TB',
+        downloadlimit: '100 TB',
+        segmentpercent: '83',
+        downloadpercent: '85',
+        placement: 'Global',
+        agent: 'Random',
+        date: '24 Mar 2023',
+    },
+    {
+        name: 'Destiny',
+        email: 'destiny@gmail.com',
+        projectid: 'FGXZ484IF42TM',
+        storageused: '24 TB',
+        storagelimit: '30 TB',
+        storagepercent: '80',
+        downloadused: '7 TB',
+        downloadlimit: '100 TB',
+        segmentpercent: '20',
+        downloadpercent: '7',
+        placement: 'Global',
+        agent: 'Random',
+        date: '29 Mar 2023',
+    },
+];
+
+function setSearch(searchText: string) {
+    search.value = searchText;
+}
+
+function getPercentColor(percent: number) {
+    if (percent >= 99) {
+        return 'error';
+    } else if (percent >= 80) {
+        return 'warning';
+    } else {
+        return 'success';
+    }
+}
 </script>
diff --git a/satellite/admin/back-office/ui/src/components/LogsTableComponent.vue b/satellite/admin/back-office/ui/src/components/LogsTableComponent.vue
index 226ee4e6aa1d..8809532f9fbe 100644
--- a/satellite/admin/back-office/ui/src/components/LogsTableComponent.vue
+++ b/satellite/admin/back-office/ui/src/components/LogsTableComponent.vue
@@ -47,64 +47,50 @@
     </v-card>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { ref } from 'vue';
 import { VCard, VTextField, VChip, VListItem } from 'vuetify/components';
 import { VDataTable } from 'vuetify/labs/components';
 
-export default {
-    components: {
-        VCard,
-        VTextField,
-        VChip,
-        VListItem,
-        VDataTable,
-    },
-    data() {
-        return {
-            // search in the table
-            search: '',
-            selected: [],
-            expanded: [],
-            sortBy: [{ key: 'date', order: 'asc' }],
-            headers: [
-                { title: 'Date', key: 'date' },
-                { title: 'Change', key: 'name' },
-                { title: 'Operation', key: 'operation' },
-                { title: 'Project ID', key: 'projectID' },
-                { title: 'Bucket', key: 'bucket' },
-                { title: 'Updated', key: 'updated' },
-                { title: 'Previous', key: 'previous' },
-                { title: 'Admin', key: 'email' },
-                { title: '', key: 'data-table-expand' },
-            ],
-            files: [
-                {
-                    name: 'Project',
-                    operation: 'Limits',
-                    email: 'vduke@gmail.com',
-                    projectID: 'F82SR21Q284JF',
-                    bucket: 'All',
-                    updated: '300TB',
-                    previous: '100TB',
-                    date: '02 Mar 2023',
-                },
-                {
-                    name: 'Account',
-                    operation: 'Coupon',
-                    email: 'knowles@aurora.io',
-                    projectID: '',
-                    bucket: 'All',
-                    updated: '30TB',
-                    previous: 'Free Tier',
-                    date: '21 Apr 2023',
-                },
-            ],
-        };
+const search = ref<string>('');
+const selected = ref<string[]>([]);
+const sortBy = ref([{ key: 'date', order: 'asc' }]);
+
+const headers = [
+    { title: 'Date', key: 'date' },
+    { title: 'Change', key: 'name' },
+    { title: 'Operation', key: 'operation' },
+    { title: 'Project ID', key: 'projectID' },
+    { title: 'Bucket', key: 'bucket' },
+    { title: 'Updated', key: 'updated' },
+    { title: 'Previous', key: 'previous' },
+    { title: 'Admin', key: 'email' },
+    { title: '', key: 'data-table-expand' },
+];
+const files = [
+    {
+        name: 'Project',
+        operation: 'Limits',
+        email: 'vduke@gmail.com',
+        projectID: 'F82SR21Q284JF',
+        bucket: 'All',
+        updated: '300TB',
+        previous: '100TB',
+        date: '02 Mar 2023',
     },
-    methods: {
-        setSearch(searchText) {
-            this.search = searchText;
-        },
+    {
+        name: 'Account',
+        operation: 'Coupon',
+        email: 'knowles@aurora.io',
+        projectID: '',
+        bucket: 'All',
+        updated: '30TB',
+        previous: 'Free Tier',
+        date: '21 Apr 2023',
     },
-};
+];
+
+function setSearch(searchText: string) {
+    search.value = searchText;
+}
 </script>
diff --git a/satellite/admin/back-office/ui/src/components/NewAccountDialog.vue b/satellite/admin/back-office/ui/src/components/NewAccountDialog.vue
index 3132dc9b83dc..3a2e29a85dc7 100644
--- a/satellite/admin/back-office/ui/src/components/NewAccountDialog.vue
+++ b/satellite/admin/back-office/ui/src/components/NewAccountDialog.vue
@@ -58,7 +58,7 @@
     </v-dialog>
 
     <v-snackbar v-model="snackbar" :timeout="7000" color="success">
-        {{ text }}
+        Account created successfully.
         <template #actions>
             <v-btn color="default" variant="text" @click="snackbar = false">
                 Close
@@ -67,7 +67,8 @@
     </v-snackbar>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { ref } from 'vue';
 import {
     VDialog,
     VCard,
@@ -84,47 +85,25 @@ import {
     VSnackbar,
 } from 'vuetify/components';
 
-export default {
-    components: {
-        VDialog,
-        VCard,
-        VSheet,
-        VCardItem,
-        VCardTitle,
-        VBtn,
-        VDivider,
-        VForm,
-        VRow,
-        VCol,
-        VTextField,
-        VCardActions,
-        VSnackbar,
-    },
-    data() {
-        return {
-            snackbar: false,
-            text: `Account created successfully.`,
-            dialog: false,
-            valid: false,
-            email: '',
-            emailRules: [
-                value => {
-                    if (value) return true;
+const snackbar = ref<boolean>(false);
+const dialog = ref<boolean>(false);
+const valid = ref<boolean>(false);
+const email = ref<string>('');
+
+const emailRules = [
+    value => {
+        if (value) return true;
 
-                    return 'E-mail is requred.';
-                },
-                value => {
-                    if (/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(value)) return true;
-                    return 'E-mail must be valid.';
-                },
-            ],
-        };
+        return 'E-mail is required.';
     },
-    methods: {
-        onButtonClick() {
-            this.snackbar = true;
-            this.dialog = false;
-        },
+    value => {
+        if (/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(value)) return true;
+        return 'E-mail must be valid.';
     },
-};
+];
+
+function onButtonClick() {
+    snackbar.value = true;
+    dialog.value = false;
+}
 </script>
\ No newline at end of file
diff --git a/satellite/admin/back-office/ui/src/components/NewProjectDialog.vue b/satellite/admin/back-office/ui/src/components/NewProjectDialog.vue
index 0f8acd7da72f..1700b83a2dce 100644
--- a/satellite/admin/back-office/ui/src/components/NewProjectDialog.vue
+++ b/satellite/admin/back-office/ui/src/components/NewProjectDialog.vue
@@ -58,7 +58,7 @@
     </v-dialog>
 
     <v-snackbar v-model="snackbar" :timeout="7000" color="success">
-        {{ text }}
+        Project created successfully.
         <template #actions>
             <v-btn color="default" variant="text" @click="snackbar = false">
                 Close
@@ -67,7 +67,8 @@
     </v-snackbar>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { ref } from 'vue';
 import {
     VDialog,
     VCard,
@@ -84,34 +85,11 @@ import {
     VSnackbar,
 } from 'vuetify/components';
 
-export default {
-    components: {
-        VDialog,
-        VCard,
-        VSheet,
-        VCardItem,
-        VCardTitle,
-        VBtn,
-        VDivider,
-        VForm,
-        VRow,
-        VCol,
-        VTextField,
-        VCardActions,
-        VSnackbar,
-    },
-    data() {
-        return {
-            snackbar: false,
-            text: `Project created successfully.`,
-            dialog: false,
-        };
-    },
-    methods: {
-        onButtonClick() {
-            this.snackbar = true;
-            this.dialog = false;
-        },
-    },
-};
+const snackbar = ref<boolean>(false);
+const dialog = ref<boolean>(false);
+
+function onButtonClick() {
+    snackbar.value = true;
+    dialog.value = false;
+}
 </script>
\ No newline at end of file
diff --git a/satellite/admin/back-office/ui/src/components/PageSubtitleComponent.vue b/satellite/admin/back-office/ui/src/components/PageSubtitleComponent.vue
index e42cece83596..4e9b4c951886 100644
--- a/satellite/admin/back-office/ui/src/components/PageSubtitleComponent.vue
+++ b/satellite/admin/back-office/ui/src/components/PageSubtitleComponent.vue
@@ -7,13 +7,8 @@
     </p>
 </template>
 
-<script lang="ts">
-export default {
-    props: {
-        subtitle: {
-            type: String,
-            required: true,
-        },
-    },
-};
-</script>
\ No newline at end of file
+<script setup lang="ts">
+const props = defineProps<{
+    subtitle: string;
+}>();
+</script>
diff --git a/satellite/admin/back-office/ui/src/components/PageTitleComponent.vue b/satellite/admin/back-office/ui/src/components/PageTitleComponent.vue
index 53f0ff22da5c..97f53128c58f 100644
--- a/satellite/admin/back-office/ui/src/components/PageTitleComponent.vue
+++ b/satellite/admin/back-office/ui/src/components/PageTitleComponent.vue
@@ -5,13 +5,8 @@
     <h1 class="text-h5 font-weight-bold my-2">{{ title }}</h1>
 </template>
 
-<script lang="ts">
-export default {
-    props: {
-        title: {
-            type: String,
-            required: true,
-        },
-    },
-};
-</script>
\ No newline at end of file
+<script setup lang="ts">
+const props = defineProps<{
+    title: string;
+}>();
+</script>
diff --git a/satellite/admin/back-office/ui/src/components/ProjectActionsMenu.vue b/satellite/admin/back-office/ui/src/components/ProjectActionsMenu.vue
index d066755fa977..fcccf6d9c0ad 100644
--- a/satellite/admin/back-office/ui/src/components/ProjectActionsMenu.vue
+++ b/satellite/admin/back-office/ui/src/components/ProjectActionsMenu.vue
@@ -65,7 +65,7 @@
     </v-menu>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { VMenu, VList, VListItem, VListItemTitle, VDivider } from 'vuetify/components';
 
 import ProjectInformationDialog from '@/components/ProjectInformationDialog.vue';
@@ -75,22 +75,4 @@ import ProjectGeofenceDialog from '@/components/ProjectGeofenceDialog.vue';
 import ProjectUserAgentsDialog from '@/components/ProjectUserAgentsDialog.vue';
 import ProjectLimitsDialog from '@/components/ProjectLimitsDialog.vue';
 import ProjectAddUserDialog from '@/components/ProjectAddUserDialog.vue';
-
-export default {
-    name: 'ProjectActionsMenu',
-    components: {
-        VMenu,
-        VList,
-        VListItem,
-        VListItemTitle,
-        VDivider,
-        ProjectDeleteDialog,
-        ProjectNewBucketDialog,
-        ProjectGeofenceDialog,
-        ProjectUserAgentsDialog,
-        ProjectLimitsDialog,
-        ProjectAddUserDialog,
-        ProjectInformationDialog,
-    },
-};
 </script>
diff --git a/satellite/admin/back-office/ui/src/components/ProjectAddUserDialog.vue b/satellite/admin/back-office/ui/src/components/ProjectAddUserDialog.vue
index 82b512479b0d..24bcd848a231 100644
--- a/satellite/admin/back-office/ui/src/components/ProjectAddUserDialog.vue
+++ b/satellite/admin/back-office/ui/src/components/ProjectAddUserDialog.vue
@@ -57,7 +57,7 @@
     </v-dialog>
 
     <v-snackbar v-model="snackbar" :timeout="7000" color="success">
-        {{ text }}
+        The user was added successfully.
         <template #actions>
             <v-btn color="default" variant="text" @click="snackbar = false">
                 Close
@@ -66,7 +66,8 @@
     </v-snackbar>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { ref } from 'vue';
 import {
     VDialog,
     VCard,
@@ -83,34 +84,11 @@ import {
     VSnackbar,
 } from 'vuetify/components';
 
-export default {
-    components: {
-        VDialog,
-        VCard,
-        VSheet,
-        VCardItem,
-        VCardTitle,
-        VBtn,
-        VDivider,
-        VForm,
-        VRow,
-        VCol,
-        VTextField,
-        VCardActions,
-        VSnackbar,
-    },
-    data() {
-        return {
-            snackbar: false,
-            text: `The user was added successfully.`,
-            dialog: false,
-        };
-    },
-    methods: {
-        onButtonClick() {
-            this.snackbar = true;
-            this.dialog = false;
-        },
-    },
-};
+const snackbar = ref<boolean>(false);
+const dialog = ref<boolean>(false);
+
+function onButtonClick() {
+    snackbar.value = true;
+    dialog.value = false;
+}
 </script>
\ No newline at end of file
diff --git a/satellite/admin/back-office/ui/src/components/ProjectDeleteDialog.vue b/satellite/admin/back-office/ui/src/components/ProjectDeleteDialog.vue
index 9d8680e4229d..fbdd4ad266d7 100644
--- a/satellite/admin/back-office/ui/src/components/ProjectDeleteDialog.vue
+++ b/satellite/admin/back-office/ui/src/components/ProjectDeleteDialog.vue
@@ -74,7 +74,7 @@
     </v-dialog>
 
     <v-snackbar v-model="snackbar" :timeout="7000" color="success">
-        {{ text }}
+        The project was deleted successfully.
         <template #actions>
             <v-btn color="default" variant="text" @click="snackbar = false">
                 Close
@@ -83,7 +83,8 @@
     </v-snackbar>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { ref } from 'vue';
 import {
     VDialog,
     VCard,
@@ -102,36 +103,11 @@ import {
     VAlert,
 } from 'vuetify/components';
 
-export default {
-    components: {
-        VDialog,
-        VCard,
-        VSheet,
-        VCardItem,
-        VCardTitle,
-        VBtn,
-        VDivider,
-        VForm,
-        VRow,
-        VCol,
-        VSelect,
-        VTextField,
-        VCardActions,
-        VSnackbar,
-        VAlert,
-    },
-    data() {
-        return {
-            snackbar: false,
-            text: `The project was deleted successfully.`,
-            dialog: false,
-        };
-    },
-    methods: {
-        onButtonClick() {
-            this.snackbar = true;
-            this.dialog = false;
-        },
-    },
-};
+const snackbar = ref<boolean>(false);
+const dialog = ref<boolean>(false);
+
+function onButtonClick() {
+    snackbar.value = true;
+    dialog.value = false;
+}
 </script>
\ No newline at end of file
diff --git a/satellite/admin/back-office/ui/src/components/ProjectGeofenceDialog.vue b/satellite/admin/back-office/ui/src/components/ProjectGeofenceDialog.vue
index 37021e05a969..5eede58da7bc 100644
--- a/satellite/admin/back-office/ui/src/components/ProjectGeofenceDialog.vue
+++ b/satellite/admin/back-office/ui/src/components/ProjectGeofenceDialog.vue
@@ -61,7 +61,7 @@
     </v-dialog>
 
     <v-snackbar v-model="snackbar" :timeout="7000" color="success">
-        {{ text }}
+        The project placement was set successfully.
         <template #actions>
             <v-btn color="default" variant="text" @click="snackbar = false">
                 Close
@@ -70,7 +70,8 @@
     </v-snackbar>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { ref } from 'vue';
 import {
     VDialog,
     VCard,
@@ -88,35 +89,11 @@ import {
     VSnackbar,
 } from 'vuetify/components';
 
-export default {
-    components: {
-        VDialog,
-        VCard,
-        VSheet,
-        VCardItem,
-        VCardTitle,
-        VBtn,
-        VDivider,
-        VForm,
-        VRow,
-        VCol,
-        VSelect,
-        VTextField,
-        VCardActions,
-        VSnackbar,
-    },
-    data() {
-        return {
-            snackbar: false,
-            text: `The project placement was set successfully.`,
-            dialog: false,
-        };
-    },
-    methods: {
-        onButtonClick() {
-            this.snackbar = true;
-            this.dialog = false;
-        },
-    },
-};
+const snackbar = ref<boolean>(false);
+const dialog = ref<boolean>(false);
+
+function onButtonClick() {
+    snackbar.value = true;
+    dialog.value = false;
+}
 </script>
\ No newline at end of file
diff --git a/satellite/admin/back-office/ui/src/components/ProjectInformationDialog.vue b/satellite/admin/back-office/ui/src/components/ProjectInformationDialog.vue
index 309d93009210..012de4ead40e 100644
--- a/satellite/admin/back-office/ui/src/components/ProjectInformationDialog.vue
+++ b/satellite/admin/back-office/ui/src/components/ProjectInformationDialog.vue
@@ -52,7 +52,7 @@
     </v-dialog>
 
     <v-snackbar v-model="snackbar" :timeout="7000" color="success">
-        {{ text }}
+        Successfully updated the project information.
         <template #actions>
             <v-btn color="default" variant="text" @click="snackbar = false">
                 Close
@@ -61,7 +61,8 @@
     </v-snackbar>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { ref } from 'vue';
 import {
     VDialog,
     VCard,
@@ -78,34 +79,11 @@ import {
     VSnackbar,
 } from 'vuetify/components';
 
-export default {
-    components: {
-        VDialog,
-        VCard,
-        VSheet,
-        VCardItem,
-        VCardTitle,
-        VBtn,
-        VDivider,
-        VForm,
-        VRow,
-        VCol,
-        VTextField,
-        VCardActions,
-        VSnackbar,
-    },
-    data() {
-        return {
-            snackbar: false,
-            text: `Successfully updated the project information.`,
-            dialog: false,
-        };
-    },
-    methods: {
-        onButtonClick() {
-            this.snackbar = true;
-            this.dialog = false;
-        },
-    },
-};
+const snackbar = ref<boolean>(false);
+const dialog = ref<boolean>(false);
+
+function onButtonClick() {
+    snackbar.value = true;
+    dialog.value = false;
+}
 </script>
\ No newline at end of file
diff --git a/satellite/admin/back-office/ui/src/components/ProjectLimitsDialog.vue b/satellite/admin/back-office/ui/src/components/ProjectLimitsDialog.vue
index 432a1145356f..a787591d0e0a 100644
--- a/satellite/admin/back-office/ui/src/components/ProjectLimitsDialog.vue
+++ b/satellite/admin/back-office/ui/src/components/ProjectLimitsDialog.vue
@@ -86,7 +86,7 @@
     </v-dialog>
 
     <v-snackbar v-model="snackbar" :timeout="7000" color="error">
-        {{ text }}
+        Error. Cannot change project limits.
         <template #actions>
             <v-btn color="default" variant="text" @click="snackbar = false">
                 Close
@@ -95,7 +95,8 @@
     </v-snackbar>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { ref } from 'vue';
 import {
     VDialog,
     VCard,
@@ -112,34 +113,11 @@ import {
     VSnackbar,
 } from 'vuetify/components';
 
-export default {
-    components: {
-        VDialog,
-        VCard,
-        VSheet,
-        VCardItem,
-        VCardTitle,
-        VBtn,
-        VDivider,
-        VForm,
-        VRow,
-        VCol,
-        VTextField,
-        VCardActions,
-        VSnackbar,
-    },
-    data() {
-        return {
-            snackbar: false,
-            text: `Error. Cannot change project limits.`,
-            dialog: false,
-        };
-    },
-    methods: {
-        onButtonClick() {
-            this.snackbar = true;
-            this.dialog = false;
-        },
-    },
-};
+const snackbar = ref<boolean>(false);
+const dialog = ref<boolean>(false);
+
+function onButtonClick() {
+    snackbar.value = true;
+    dialog.value = false;
+}
 </script>
\ No newline at end of file
diff --git a/satellite/admin/back-office/ui/src/components/ProjectNewBucketDialog.vue b/satellite/admin/back-office/ui/src/components/ProjectNewBucketDialog.vue
index 4953fc9d3b79..b4d1f82e8d75 100644
--- a/satellite/admin/back-office/ui/src/components/ProjectNewBucketDialog.vue
+++ b/satellite/admin/back-office/ui/src/components/ProjectNewBucketDialog.vue
@@ -58,7 +58,7 @@
     </v-dialog>
 
     <v-snackbar v-model="snackbar" :timeout="7000" color="success">
-        {{ text }}
+        Bucket created successfully.
         <template #actions>
             <v-btn color="default" variant="text" @click="snackbar = false">
                 Close
@@ -67,7 +67,8 @@
     </v-snackbar>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { ref } from 'vue';
 import {
     VDialog,
     VCard,
@@ -84,34 +85,11 @@ import {
     VSnackbar,
 } from 'vuetify/components';
 
-export default {
-    components: {
-        VDialog,
-        VCard,
-        VSheet,
-        VCardItem,
-        VCardTitle,
-        VBtn,
-        VDivider,
-        VForm,
-        VRow,
-        VCol,
-        VTextField,
-        VCardActions,
-        VSnackbar,
-    },
-    data() {
-        return {
-            snackbar: false,
-            text: `Bucket created successfully.`,
-            dialog: false,
-        };
-    },
-    methods: {
-        onButtonClick() {
-            this.snackbar = true;
-            this.dialog = false;
-        },
-    },
-};
+const snackbar = ref<boolean>(false);
+const dialog = ref<boolean>(false);
+
+function onButtonClick() {
+    snackbar.value = true;
+    dialog.value = false;
+}
 </script>
\ No newline at end of file
diff --git a/satellite/admin/back-office/ui/src/components/ProjectResetMFADialog.vue b/satellite/admin/back-office/ui/src/components/ProjectResetMFADialog.vue
index 56358d4a8a56..f418f5370973 100644
--- a/satellite/admin/back-office/ui/src/components/ProjectResetMFADialog.vue
+++ b/satellite/admin/back-office/ui/src/components/ProjectResetMFADialog.vue
@@ -58,7 +58,7 @@
     </v-dialog>
 
     <v-snackbar v-model="snackbar" :timeout="7000" color="success">
-        {{ text }}
+        The MFA was disabled successfully.
         <template #actions>
             <v-btn color="default" variant="text" @click="snackbar = false">
                 Close
@@ -67,7 +67,8 @@
     </v-snackbar>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { ref } from 'vue';
 import {
     VDialog,
     VCard,
@@ -84,34 +85,11 @@ import {
     VSnackbar,
 } from 'vuetify/components';
 
-export default {
-    components: {
-        VDialog,
-        VCard,
-        VSheet,
-        VCardItem,
-        VCardTitle,
-        VBtn,
-        VDivider,
-        VForm,
-        VRow,
-        VCol,
-        VTextField,
-        VCardActions,
-        VSnackbar,
-    },
-    data() {
-        return {
-            snackbar: false,
-            text: `The MFA was disabled successfully.`,
-            dialog: false,
-        };
-    },
-    methods: {
-        onButtonClick() {
-            this.snackbar = true;
-            this.dialog = false;
-        },
-    },
-};
+const snackbar = ref<boolean>(false);
+const dialog = ref<boolean>(false);
+
+function onButtonClick() {
+    snackbar.value = true;
+    dialog.value = false;
+}
 </script>
\ No newline at end of file
diff --git a/satellite/admin/back-office/ui/src/components/ProjectSuspendDialog.vue b/satellite/admin/back-office/ui/src/components/ProjectSuspendDialog.vue
index 10b0e2d88985..f6b8be9eaaac 100644
--- a/satellite/admin/back-office/ui/src/components/ProjectSuspendDialog.vue
+++ b/satellite/admin/back-office/ui/src/components/ProjectSuspendDialog.vue
@@ -67,7 +67,7 @@
     </v-dialog>
 
     <v-snackbar v-model="snackbar" :timeout="7000" color="success">
-        {{ text }}
+        The account was suspended successfully.
         <template #actions>
             <v-btn color="default" variant="text" @click="snackbar = false">
                 Close
@@ -76,7 +76,8 @@
     </v-snackbar>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { ref } from 'vue';
 import {
     VDialog,
     VCard,
@@ -94,35 +95,11 @@ import {
     VSnackbar,
 } from 'vuetify/components';
 
-export default {
-    components: {
-        VDialog,
-        VCard,
-        VSheet,
-        VCardItem,
-        VCardTitle,
-        VBtn,
-        VDivider,
-        VForm,
-        VRow,
-        VCol,
-        VSelect,
-        VTextField,
-        VCardActions,
-        VSnackbar,
-    },
-    data() {
-        return {
-            snackbar: false,
-            text: `The account was suspended successfully.`,
-            dialog: false,
-        };
-    },
-    methods: {
-        onButtonClick() {
-            this.snackbar = true;
-            this.dialog = false;
-        },
-    },
-};
+const snackbar = ref<boolean>(false);
+const dialog = ref<boolean>(false);
+
+function onButtonClick() {
+    snackbar.value = true;
+    dialog.value = false;
+}
 </script>
\ No newline at end of file
diff --git a/satellite/admin/back-office/ui/src/components/ProjectUserAgentsDialog.vue b/satellite/admin/back-office/ui/src/components/ProjectUserAgentsDialog.vue
index 77bf01b3beef..6daae02645e8 100644
--- a/satellite/admin/back-office/ui/src/components/ProjectUserAgentsDialog.vue
+++ b/satellite/admin/back-office/ui/src/components/ProjectUserAgentsDialog.vue
@@ -62,7 +62,7 @@
     </v-dialog>
 
     <v-snackbar v-model="snackbar" :timeout="7000" color="success">
-        {{ text }}
+        Successfully saved the value attribution.
         <template #actions>
             <v-btn color="default" variant="text" @click="snackbar = false">
                 Close
@@ -71,7 +71,8 @@
     </v-snackbar>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { ref } from 'vue';
 import {
     VDialog,
     VCard,
@@ -89,35 +90,11 @@ import {
     VSnackbar,
 } from 'vuetify/components';
 
-export default {
-    components: {
-        VDialog,
-        VCard,
-        VSheet,
-        VCardItem,
-        VCardTitle,
-        VBtn,
-        VDivider,
-        VForm,
-        VRow,
-        VCol,
-        VSelect,
-        VTextField,
-        VCardActions,
-        VSnackbar,
-    },
-    data() {
-        return {
-            snackbar: false,
-            text: `Successfully saved the value attribution.`,
-            dialog: false,
-        };
-    },
-    methods: {
-        onButtonClick() {
-            this.snackbar = true;
-            this.dialog = false;
-        },
-    },
-};
+const snackbar = ref<boolean>(false);
+const dialog = ref<boolean>(false);
+
+function onButtonClick() {
+    snackbar.value = true;
+    dialog.value = false;
+}
 </script>
\ No newline at end of file
diff --git a/satellite/admin/back-office/ui/src/components/ProjectsTableComponent.vue b/satellite/admin/back-office/ui/src/components/ProjectsTableComponent.vue
index 63185039eed4..0e128b4134d0 100644
--- a/satellite/admin/back-office/ui/src/components/ProjectsTableComponent.vue
+++ b/satellite/admin/back-office/ui/src/components/ProjectsTableComponent.vue
@@ -101,7 +101,8 @@
     </v-card>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { ref } from 'vue';
 import {
     VCard,
     VTextField,
@@ -114,205 +115,189 @@ import { VDataTable } from 'vuetify/labs/components';
 
 import ProjectActionsMenu from '@/components/ProjectActionsMenu.vue';
 
-export default {
-    components: {
-        VCard,
-        VTextField,
-        VBtn,
-        VIcon,
-        VChip,
-        VTooltip,
-        VDataTable,
-        ProjectActionsMenu,
+const search = ref<string>('');
+const selected = ref<string[]>([]);
+const sortBy = ref([{ key: 'name', order: 'asc' }]);
+
+const headers = [
+    { title: 'Project ID', key: 'projectid', align: 'start' },
+    // { title: 'Name', key: 'name'},
+    { title: 'Account', key: 'email' },
+    { title: 'Storage Used', key: 'storagepercent' },
+    { title: 'Storage Used', key: 'storageused' },
+    { title: 'Storage Limit', key: 'storagelimit' },
+    { title: 'Download Used', key: 'downloadpercent' },
+    { title: 'Download Used', key: 'downloadused' },
+    { title: 'Download Limit', key: 'downloadlimit' },
+    { title: 'Segments Used', key: 'segmentpercent' },
+    { title: 'Value', key: 'agent' },
+    { title: 'Placement', key: 'placement' },
+    { title: 'Created', key: 'date' },
+];
+const files = [
+    {
+        name: 'My First Project',
+        email: 'vduke@gmail.com',
+        projectid: 'F82SR21Q284JF',
+        storageused: '24 TB',
+        storagelimit: '30 TB',
+        storagepercent: '80',
+        downloadused: '7 TB',
+        downloadlimit: '100 TB',
+        segmentpercent: '20',
+        downloadpercent: '7',
+        placement: 'Global',
+        agent: 'Test Agent',
+        date: '02 Mar 2023',
+    },
+    {
+        name: 'Personal Project',
+        email: 'knowles@aurora.io',
+        projectid: '284JFF82SR21Q',
+        storageused: '150 TB',
+        storagelimit: '300 TB',
+        storagepercent: '50',
+        downloadused: '100 TB',
+        downloadlimit: '100 TB',
+        downloadpercent: '100',
+        segmentpercent: '43',
+        placement: 'Global',
+        agent: 'Agent',
+        date: '21 Apr 2023',
+    },
+    {
+        name: 'Invitation Project',
+        email: 'sctrevis@gmail.com',
+        projectid: 'R21Q284JFF82S',
+        storageused: '99 TB',
+        storagelimit: '100 TB',
+        storagepercent: '99',
+        downloadused: '85 TB',
+        downloadlimit: '100 TB',
+        segmentpercent: '83',
+        downloadpercent: '85',
+        placement: 'Global',
+        agent: 'Random',
+        date: '24 Mar 2023',
+    },
+    {
+        name: 'Videos',
+        email: 'vduke@gmail.com',
+        projectid: '482SR21Q223JA',
+        storageused: '24 TB',
+        storagelimit: '30 TB',
+        storagepercent: '80',
+        downloadused: '7 TB',
+        downloadlimit: '100 TB',
+        segmentpercent: '20',
+        downloadpercent: '7',
+        placement: 'Global',
+        agent: 'Test Agent',
+        date: '11 Mar 2023',
+    },
+    {
+        name: 'App',
+        email: 'vduke@gmail.com',
+        projectid: '56F82SR21Q284',
+        storageused: '150 TB',
+        storagelimit: '300 TB',
+        storagepercent: '50',
+        downloadused: '100 TB',
+        downloadlimit: '100 TB',
+        downloadpercent: '100',
+        segmentpercent: '43',
+        placement: 'Global',
+        agent: 'Test Agent',
+        date: '11 Mar 2023',
     },
-    data() {
-        return {
-            // search in the table
-            search: '',
-            selected: [],
-            sortBy: [{ key: 'name', order: 'asc' }],
-            headers: [
-                { title: 'Project ID', key: 'projectid', align: 'start' },
-                // { title: 'Name', key: 'name'},
-                { title: 'Account', key: 'email' },
-                { title: 'Storage Used', key: 'storagepercent' },
-                { title: 'Storage Used', key: 'storageused' },
-                { title: 'Storage Limit', key: 'storagelimit' },
-                { title: 'Download Used', key: 'downloadpercent' },
-                { title: 'Download Used', key: 'downloadused' },
-                { title: 'Download Limit', key: 'downloadlimit' },
-                { title: 'Segments Used', key: 'segmentpercent' },
-                { title: 'Value', key: 'agent' },
-                { title: 'Placement', key: 'placement' },
-                { title: 'Created', key: 'date' },
-            ],
-            files: [
-                {
-                    name: 'My First Project',
-                    email: 'vduke@gmail.com',
-                    projectid: 'F82SR21Q284JF',
-                    storageused: '24 TB',
-                    storagelimit: '30 TB',
-                    storagepercent: '80',
-                    downloadused: '7 TB',
-                    downloadlimit: '100 TB',
-                    segmentpercent: '20',
-                    downloadpercent: '7',
-                    placement: 'Global',
-                    agent: 'Test Agent',
-                    date: '02 Mar 2023',
-                },
-                {
-                    name: 'Personal Project',
-                    email: 'knowles@aurora.io',
-                    projectid: '284JFF82SR21Q',
-                    storageused: '150 TB',
-                    storagelimit: '300 TB',
-                    storagepercent: '50',
-                    downloadused: '100 TB',
-                    downloadlimit: '100 TB',
-                    downloadpercent: '100',
-                    segmentpercent: '43',
-                    placement: 'Global',
-                    agent: 'Agent',
-                    date: '21 Apr 2023',
-                },
-                {
-                    name: 'Invitation Project',
-                    email: 'sctrevis@gmail.com',
-                    projectid: 'R21Q284JFF82S',
-                    storageused: '99 TB',
-                    storagelimit: '100 TB',
-                    storagepercent: '99',
-                    downloadused: '85 TB',
-                    downloadlimit: '100 TB',
-                    segmentpercent: '83',
-                    downloadpercent: '85',
-                    placement: 'Global',
-                    agent: 'Random',
-                    date: '24 Mar 2023',
-                },
-                {
-                    name: 'Videos',
-                    email: 'vduke@gmail.com',
-                    projectid: '482SR21Q223JA',
-                    storageused: '24 TB',
-                    storagelimit: '30 TB',
-                    storagepercent: '80',
-                    downloadused: '7 TB',
-                    downloadlimit: '100 TB',
-                    segmentpercent: '20',
-                    downloadpercent: '7',
-                    placement: 'Global',
-                    agent: 'Test Agent',
-                    date: '11 Mar 2023',
-                },
-                {
-                    name: 'App',
-                    email: 'vduke@gmail.com',
-                    projectid: '56F82SR21Q284',
-                    storageused: '150 TB',
-                    storagelimit: '300 TB',
-                    storagepercent: '50',
-                    downloadused: '100 TB',
-                    downloadlimit: '100 TB',
-                    downloadpercent: '100',
-                    segmentpercent: '43',
-                    placement: 'Global',
-                    agent: 'Test Agent',
-                    date: '11 Mar 2023',
-                },
-                {
-                    name: 'Backup',
-                    email: 'knowles@aurora.io',
-                    projectid: '624QXF42SR20S',
-                    storageused: '99 TB',
-                    storagelimit: '100 TB',
-                    storagepercent: '99',
-                    downloadused: '85 TB',
-                    downloadlimit: '100 TB',
-                    segmentpercent: '83',
-                    downloadpercent: '85',
-                    placement: 'Global',
-                    agent: 'Agent',
-                    date: '21 Apr 2023',
-                },
-                {
-                    name: 'My Project',
-                    email: 'sctrevis@gmail.com',
-                    projectid: 'P33Q284JFF8FF',
-                    storageused: '24 TB',
-                    storagelimit: '30 TB',
-                    storagepercent: '80',
-                    downloadused: '7 TB',
-                    downloadlimit: '100 TB',
-                    segmentpercent: '20',
-                    downloadpercent: '7',
-                    placement: 'Global',
-                    agent: 'Random',
-                    date: '24 Mar 2023',
-                },
-                {
-                    name: 'Sync',
-                    email: 'sctrevis@gmail.com',
-                    projectid: 'W22S284JFF8ZZ',
-                    storageused: '150 TB',
-                    storagelimit: '300 TB',
-                    storagepercent: '50',
-                    downloadused: '100 TB',
-                    downloadlimit: '100 TB',
-                    downloadpercent: '100',
-                    segmentpercent: '43',
-                    placement: 'Global',
-                    agent: 'Random',
-                    date: '24 Mar 2023',
-                },
-                {
-                    name: 'Backupss',
-                    email: 'destiny@gmail.com',
-                    projectid: '2SFX284JFF8TS',
-                    storageused: '99 TB',
-                    storagelimit: '100 TB',
-                    storagepercent: '99',
-                    downloadused: '85 TB',
-                    downloadlimit: '100 TB',
-                    segmentpercent: '83',
-                    downloadpercent: '85',
-                    placement: 'Global',
-                    agent: 'Random',
-                    date: '24 Mar 2023',
-                },
-                {
-                    name: 'Destiny',
-                    email: 'destiny@gmail.com',
-                    projectid: 'FGXZ484IF42TM',
-                    storageused: '24 TB',
-                    storagelimit: '30 TB',
-                    storagepercent: '80',
-                    downloadused: '7 TB',
-                    downloadlimit: '100 TB',
-                    segmentpercent: '20',
-                    downloadpercent: '7',
-                    placement: 'Global',
-                    agent: 'Random',
-                    date: '29 Mar 2023',
-                },
-            ],
-        };
+    {
+        name: 'Backup',
+        email: 'knowles@aurora.io',
+        projectid: '624QXF42SR20S',
+        storageused: '99 TB',
+        storagelimit: '100 TB',
+        storagepercent: '99',
+        downloadused: '85 TB',
+        downloadlimit: '100 TB',
+        segmentpercent: '83',
+        downloadpercent: '85',
+        placement: 'Global',
+        agent: 'Agent',
+        date: '21 Apr 2023',
     },
-    methods: {
-        setSearch(searchText) {
-            this.search = searchText;
-        },
-        getPercentColor(percent) {
-            if (percent >= 99) {
-                return 'error';
-            } else if (percent >= 80) {
-                return 'warning';
-            } else {
-                return 'success';
-            }
-        },
+    {
+        name: 'My Project',
+        email: 'sctrevis@gmail.com',
+        projectid: 'P33Q284JFF8FF',
+        storageused: '24 TB',
+        storagelimit: '30 TB',
+        storagepercent: '80',
+        downloadused: '7 TB',
+        downloadlimit: '100 TB',
+        segmentpercent: '20',
+        downloadpercent: '7',
+        placement: 'Global',
+        agent: 'Random',
+        date: '24 Mar 2023',
     },
-};
+    {
+        name: 'Sync',
+        email: 'sctrevis@gmail.com',
+        projectid: 'W22S284JFF8ZZ',
+        storageused: '150 TB',
+        storagelimit: '300 TB',
+        storagepercent: '50',
+        downloadused: '100 TB',
+        downloadlimit: '100 TB',
+        downloadpercent: '100',
+        segmentpercent: '43',
+        placement: 'Global',
+        agent: 'Random',
+        date: '24 Mar 2023',
+    },
+    {
+        name: 'Backupss',
+        email: 'destiny@gmail.com',
+        projectid: '2SFX284JFF8TS',
+        storageused: '99 TB',
+        storagelimit: '100 TB',
+        storagepercent: '99',
+        downloadused: '85 TB',
+        downloadlimit: '100 TB',
+        segmentpercent: '83',
+        downloadpercent: '85',
+        placement: 'Global',
+        agent: 'Random',
+        date: '24 Mar 2023',
+    },
+    {
+        name: 'Destiny',
+        email: 'destiny@gmail.com',
+        projectid: 'FGXZ484IF42TM',
+        storageused: '24 TB',
+        storagelimit: '30 TB',
+        storagepercent: '80',
+        downloadused: '7 TB',
+        downloadlimit: '100 TB',
+        segmentpercent: '20',
+        downloadpercent: '7',
+        placement: 'Global',
+        agent: 'Random',
+        date: '29 Mar 2023',
+    },
+];
+
+function setSearch(searchText: string) {
+    search.value = searchText;
+}
+
+function getPercentColor(percent: number) {
+    if (percent >= 99) {
+        return 'error';
+    } else if (percent >= 80) {
+        return 'warning';
+    } else {
+        return 'success';
+    }
+}
 </script>
diff --git a/satellite/admin/back-office/ui/src/components/UsageProgressComponent.vue b/satellite/admin/back-office/ui/src/components/UsageProgressComponent.vue
index 56f2c32fb059..54ba40ec1d07 100644
--- a/satellite/admin/back-office/ui/src/components/UsageProgressComponent.vue
+++ b/satellite/admin/back-office/ui/src/components/UsageProgressComponent.vue
@@ -35,7 +35,7 @@
     </v-card>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import {
     VCard,
     VCardItem,
@@ -46,45 +46,13 @@ import {
     VBtn,
 } from 'vuetify/components';
 
-export default {
-    components: {
-        VCard,
-        VCardItem,
-        VRow,
-        VCol,
-        VProgressLinear,
-        VDivider,
-        VBtn,
-    },
-    props: {
-        title: {
-            type: String,
-            required: true,
-        },
-        progress: {
-            type: Number,
-            required: true,
-        },
-        used: {
-            type: String,
-            required: true,
-        },
-        limit: {
-            type: String,
-            required: true,
-        },
-        available: {
-            type: String,
-            required: true,
-        },
-        percentage: {
-            type: String,
-            required: true,
-        },
-        color: {
-            type: String,
-            required: true,
-        },
-    },
-};
+const props = defineProps<{
+    title: string;
+    progress: number;
+    used: string;
+    limit: string;
+    available: string;
+    percentage: string;
+    color: string;
+}>();
 </script>
\ No newline at end of file
diff --git a/satellite/admin/back-office/ui/src/components/UsersTableComponent.vue b/satellite/admin/back-office/ui/src/components/UsersTableComponent.vue
index 4e2998d04eeb..feb0f3ab84d7 100644
--- a/satellite/admin/back-office/ui/src/components/UsersTableComponent.vue
+++ b/satellite/admin/back-office/ui/src/components/UsersTableComponent.vue
@@ -69,113 +69,95 @@
     </v-card>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { ref } from 'vue';
 import { VCard, VTextField, VBtn, VIcon, VChip } from 'vuetify/components';
 import { VDataTable } from 'vuetify/labs/components';
 
 import AccountActionsMenu from '@/components/AccountActionsMenu.vue';
 
-export default {
-    name: 'AccountsTableComponent',
-    components: {
-        VCard,
-        VTextField,
-        VBtn,
-        VIcon,
-        VChip,
-        VDataTable,
-        AccountActionsMenu,
+const search = ref<string>('');
+const selected = ref<string[]>([]);
+const sortBy = ref([{ key: 'userid', order: 'asc' }]);
+
+const headers = [
+    { title: 'Account', key: 'email' },
+    { title: 'Name', key: 'name' },
+    // { title: 'ID', key: 'userid' },
+    // { title: 'Type', key: 'type' },
+    { title: 'Role', key: 'role' },
+    { title: 'Value', key: 'agent' },
+    { title: 'Date Added', key: 'date', align: 'start' },
+];
+const users = [
+    {
+        name: 'Magnolia Queen',
+        date: '12 Mar 2023',
+        type: 'Enterprise',
+        role: 'Member',
+        agent: 'Company',
+        email: 'magnolia@queen.com',
+        userid: '2521',
+    },
+    {
+        name: 'Irving Thacker',
+        date: '30 May 2023',
+        type: 'Pro',
+        role: 'Owner',
+        agent: 'Company',
+        email: 'itacker@gmail.com',
+        userid: '41',
+    },
+    {
+        name: 'Brianne Deighton',
+        date: '20 Mar 2023',
+        type: 'Free',
+        role: 'Member',
+        projects: '1',
+        storage: '1,000 TB',
+        download: '3,000 TB',
+        agent: 'Company',
+        email: 'bd@rianne.net',
+        userid: '87212',
     },
-    data() {
-        return {
-            search: '',
-            selected: [],
-            sortBy: [{ key: 'userid', order: 'asc' }],
-            headers: [
-                { title: 'Account', key: 'email' },
-                { title: 'Name', key: 'name' },
-                // { title: 'ID', key: 'userid' },
-                // { title: 'Type', key: 'type' },
-                { title: 'Role', key: 'role' },
-                { title: 'Value', key: 'agent' },
-                { title: 'Date Added', key: 'date', align: 'start' },
-            ],
-            users: [
-                {
-                    name: 'Magnolia Queen',
-                    date: '12 Mar 2023',
-                    type: 'Enterprise',
-                    role: 'Member',
-                    agent: 'Company',
-                    email: 'magnolia@queen.com',
-                    userid: '2521',
-                },
-                {
-                    name: 'Irving Thacker',
-                    date: '30 May 2023',
-                    type: 'Pro',
-                    role: 'Owner',
-                    agent: 'Company',
-                    email: 'itacker@gmail.com',
-                    userid: '41',
-                },
-                {
-                    name: 'Brianne Deighton',
-                    date: '20 Mar 2023',
-                    type: 'Free',
-                    role: 'Member',
-                    projects: '1',
-                    storage: '1,000 TB',
-                    download: '3,000 TB',
-                    agent: 'Company',
-                    email: 'bd@rianne.net',
-                    userid: '87212',
-                },
-                {
-                    name: 'Vince Duke',
-                    date: '4 Apr 2023',
-                    type: 'Priority',
-                    role: 'Member',
-                    agent: 'User Agent',
-                    email: 'vduke@gmail.com',
-                    userid: '53212',
-                },
-                {
-                    name: 'Luvenia Breckinridge',
-                    date: '11 Jan 2023',
-                    type: 'Free',
-                    role: 'Member',
-                    agent: 'User Agent',
-                    email: 'lbreckinridge42@gmail.com',
-                    userid: '1244',
-                },
-                {
-                    name: 'Georgia Jordan',
-                    date: '15 Mar 2023',
-                    type: 'Pro',
-                    role: 'Member',
-                    agent: 'Agent',
-                    email: 'georgia@jordan.net',
-                    userid: '55524',
-                },
-            ],
-        };
+    {
+        name: 'Vince Duke',
+        date: '4 Apr 2023',
+        type: 'Priority',
+        role: 'Member',
+        agent: 'User Agent',
+        email: 'vduke@gmail.com',
+        userid: '53212',
     },
-    computed: {
-        getColor() {
-            return (type) => {
-                if (type === 'Enterprise') return 'purple';
-                if (type === 'Priority') return 'secondary';
-                if (type === 'Pro') return 'success';
-                if (type === 'Suspended') return 'warning';
-                return 'default';
-            };
-        },
+    {
+        name: 'Luvenia Breckinridge',
+        date: '11 Jan 2023',
+        type: 'Free',
+        role: 'Member',
+        agent: 'User Agent',
+        email: 'lbreckinridge42@gmail.com',
+        userid: '1244',
     },
-    methods: {
-        setSearch(searchText) {
-            this.search = searchText;
-        },
+    {
+        name: 'Georgia Jordan',
+        date: '15 Mar 2023',
+        type: 'Pro',
+        role: 'Member',
+        agent: 'Agent',
+        email: 'georgia@jordan.net',
+        userid: '55524',
     },
-};
+];
+
+function getColor(type: string) {
+    if (type === 'Enterprise') return 'purple';
+    if (type === 'Priority') return 'secondary';
+    if (type === 'Pro') return 'success';
+    if (type === 'Suspended') return 'warning';
+    return 'default';
+}
+
+function setSearch(searchText: string) {
+    search.value = searchText;
+}
 </script>
\ No newline at end of file
diff --git a/satellite/admin/back-office/ui/src/layouts/default/AppBar.vue b/satellite/admin/back-office/ui/src/layouts/default/AppBar.vue
index 9066906e18c0..814eca7078ea 100644
--- a/satellite/admin/back-office/ui/src/layouts/default/AppBar.vue
+++ b/satellite/admin/back-office/ui/src/layouts/default/AppBar.vue
@@ -172,7 +172,8 @@
     </v-navigation-drawer>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { ref, watch } from 'vue';
 import {
     VAppBar,
     VAppBarNavIcon,
@@ -193,53 +194,24 @@ import {
 } from 'vuetify/components';
 import { useTheme } from 'vuetify';
 
-export default {
-    components: {
-        VAppBar,
-        VAppBarNavIcon,
-        VAppBarTitle,
-        VImg,
-        VMenu,
-        VBtnToggle,
-        VBtn,
-        VTooltip,
-        VIcon,
-        VList,
-        VListItem,
-        VListItemTitle,
-        VListItemSubtitle,
-        VDivider,
-        VNavigationDrawer,
-        VSheet,
-    },
-    setup() {
-        const theme = useTheme();
-        return {
-            theme,
-            toggleTheme: (newTheme) => {
-                if ((newTheme === 'dark' && theme.global.current.value.dark) || (newTheme === 'light' && !theme.global.current.value.dark)) {
-                    return;
-                }
-                theme.global.name.value = newTheme;
-                localStorage.setItem('theme', newTheme);  // Store the selected theme in localStorage
-            },
-        };
-    },
-    data: () => ({
-        drawer: true,
-        menu: false,
-        activeTheme: null,
-    }),
-    watch: {
-        'theme.global.current.value.dark': function (newVal) {
-            this.activeTheme = newVal ? 1 : 0;
-        },
-    },
-    created() {
-        // Check for stored theme in localStorage. If none, default to 'light'
-        const storedTheme = localStorage.getItem('theme') || 'light';
-        this.toggleTheme(storedTheme);
-        this.activeTheme = this.theme.global.current.value.dark ? 1 : 0;
-    },
-};
-</script>
\ No newline at end of file
+const theme = useTheme();
+
+const drawer = ref<boolean>(true);
+const activeTheme = ref<number>(0);
+
+function toggleTheme(newTheme: string) {
+    if ((newTheme === 'dark' && theme.global.current.value.dark) || (newTheme === 'light' && !theme.global.current.value.dark)) {
+        return;
+    }
+    theme.global.name.value = newTheme;
+    localStorage.setItem('theme', newTheme);  // Store the selected theme in localStorage
+}
+
+watch(() => theme.global.current.value.dark, newVal => {
+    activeTheme.value = newVal ? 1 : 0;
+});
+
+// Check for stored theme in localStorage. If none, default to 'light'
+toggleTheme(localStorage.getItem('theme') || 'light');
+activeTheme.value = theme.global.current.value.dark ? 1 : 0;
+</script>
diff --git a/satellite/admin/back-office/ui/src/views/AccountDetails.vue b/satellite/admin/back-office/ui/src/views/AccountDetails.vue
index 3e2c97014227..1e3fff56e15f 100644
--- a/satellite/admin/back-office/ui/src/views/AccountDetails.vue
+++ b/satellite/admin/back-office/ui/src/views/AccountDetails.vue
@@ -135,7 +135,8 @@
     </v-container>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
 import {
     VContainer,
     VRow,
@@ -159,36 +160,7 @@ import AccountInformationDialog from '@/components/AccountInformationDialog.vue'
 import AccountStatusDialog from '@/components/AccountStatusDialog.vue';
 import CardStatsComponent from '@/components/CardStatsComponent.vue';
 
-export default {
-    components: {
-        VContainer,
-        VRow,
-        VCol,
-        VChip,
-        VTooltip,
-        VIcon,
-        VCard,
-        VCardText,
-        VDivider,
-        VBtn,
-        PageTitleComponent,
-        AccountProjectsTableComponent,
-        LogsTableComponent,
-        AccountActionsMenu,
-        AccountUserAgentsDialog,
-        AccountGeofenceDialog,
-        AccountInformationDialog,
-        AccountStatusDialog,
-        CardStatsComponent,
-    },
-    data() {
-        return {
-            dialog: false,
-            valid: false,
-        };
-    },
-    mounted() {
-        document.title = 'Storj Admin - Account Details';
-    },
-};
+onMounted(() => {
+    document.title = 'Storj Admin - Account Details';
+});
 </script>
diff --git a/satellite/admin/back-office/ui/src/views/Accounts.vue b/satellite/admin/back-office/ui/src/views/Accounts.vue
index 9c760a034583..ae3de1fa04e5 100644
--- a/satellite/admin/back-office/ui/src/views/Accounts.vue
+++ b/satellite/admin/back-office/ui/src/views/Accounts.vue
@@ -48,7 +48,8 @@
     </v-container>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { onMounted } from 'vue';
 import { VContainer, VRow, VCol, VBtn } from 'vuetify/components';
 
 import PageTitleComponent from '@/components/PageTitleComponent.vue';
@@ -56,26 +57,7 @@ import PageSubtitleComponent from '@/components/PageSubtitleComponent.vue';
 import AccountsTableComponent from '@/components/AccountsTableComponent.vue';
 import NewAccountDialog from '@/components/NewAccountDialog.vue';
 
-export default {
-    components: {
-        VContainer,
-        VRow,
-        VCol,
-        VBtn,
-        PageTitleComponent,
-        PageSubtitleComponent,
-        AccountsTableComponent,
-        NewAccountDialog,
-    },
-    data() {
-        return {
-            dialog: false,
-            valid: false,
-            search: '',
-        };
-    },
-    mounted() {
-        document.title = 'Storj Admin - Accounts';
-    },
-};
+onMounted(() => {
+    document.title = 'Storj Admin - Accounts';
+});
 </script>
diff --git a/satellite/admin/back-office/ui/src/views/AdminSettings.vue b/satellite/admin/back-office/ui/src/views/AdminSettings.vue
index 2f9fdaaec738..3ecd4ef5c927 100644
--- a/satellite/admin/back-office/ui/src/views/AdminSettings.vue
+++ b/satellite/admin/back-office/ui/src/views/AdminSettings.vue
@@ -51,7 +51,8 @@
     </v-container>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { onMounted } from 'vue';
 import {
     VContainer,
     VRow,
@@ -67,22 +68,7 @@ import PageTitleComponent from '@/components/PageTitleComponent.vue';
 import PageSubtitleComponent from '@/components/PageSubtitleComponent.vue';
 import AdminAccountDialog from '@/components/AdminAccountDialog.vue';
 
-export default {
-    components: {
-        VContainer,
-        VRow,
-        VCol,
-        VCard,
-        VCardText,
-        VChip,
-        VDivider,
-        VBtn,
-        PageTitleComponent,
-        PageSubtitleComponent,
-        AdminAccountDialog,
-    },
-    mounted() {
-        document.title = 'Storj Admin Settings';
-    },
-};
+onMounted(() => {
+    document.title = 'Storj Admin Settings';
+});
 </script>
diff --git a/satellite/admin/back-office/ui/src/views/BucketDetails.vue b/satellite/admin/back-office/ui/src/views/BucketDetails.vue
index 84bb13726c0f..fa7a610f937f 100644
--- a/satellite/admin/back-office/ui/src/views/BucketDetails.vue
+++ b/satellite/admin/back-office/ui/src/views/BucketDetails.vue
@@ -130,7 +130,8 @@
     </v-container>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { onMounted } from 'vue';
 import {
     VContainer,
     VRow,
@@ -151,33 +152,7 @@ import BucketUserAgentsDialog from '@/components/BucketUserAgentsDialog.vue';
 import BucketInformationDialog from '@/components/BucketInformationDialog.vue';
 import CardStatsComponent from '@/components/CardStatsComponent.vue';
 
-export default {
-    components: {
-        VContainer,
-        VRow,
-        VCol,
-        VChip,
-        VTooltip,
-        VBtn,
-        VIcon,
-        VCard,
-        VCardText,
-        VDivider,
-        PageTitleComponent,
-        BucketActionsMenu,
-        BucketGeofenceDialog,
-        BucketUserAgentsDialog,
-        BucketInformationDialog,
-        CardStatsComponent,
-    },
-    data() {
-        return {
-            dialog: false,
-            valid: false,
-        };
-    },
-    mounted() {
-        document.title = 'Storj Admin - Bucket Details';
-    },
-};
+onMounted(() => {
+    document.title = 'Storj Admin - Bucket Details';
+});
 </script>
\ No newline at end of file
diff --git a/satellite/admin/back-office/ui/src/views/Dashboard.vue b/satellite/admin/back-office/ui/src/views/Dashboard.vue
index 897a744b5dc9..32c8acaac556 100644
--- a/satellite/admin/back-office/ui/src/views/Dashboard.vue
+++ b/satellite/admin/back-office/ui/src/views/Dashboard.vue
@@ -47,7 +47,8 @@
     </v-container>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { onMounted } from 'vue';
 import { VContainer, VRow, VCol, VCard, VDivider } from 'vuetify/components';
 
 import PageTitleComponent from '@/components/PageTitleComponent.vue';
@@ -55,20 +56,7 @@ import PageSubtitleComponent from '@/components/PageSubtitleComponent.vue';
 import CardStatsComponent from '@/components/CardStatsComponent.vue';
 import DashboardLimitsTableComponent from '@/components/DashboardLimitsTableComponent.vue';
 
-export default {
-    components: {
-        VContainer,
-        VRow,
-        VCol,
-        VCard,
-        VDivider,
-        PageTitleComponent,
-        PageSubtitleComponent,
-        CardStatsComponent,
-        DashboardLimitsTableComponent,
-    },
-    mounted() {
-        document.title = 'Storj Admin - Dashboard';
-    },
-};
+onMounted(() => {
+    document.title = 'Storj Admin - Dashboard';
+});
 </script>
\ No newline at end of file
diff --git a/satellite/admin/back-office/ui/src/views/Login.vue b/satellite/admin/back-office/ui/src/views/Login.vue
index 08bafd6b8f11..0f63b6e2f531 100644
--- a/satellite/admin/back-office/ui/src/views/Login.vue
+++ b/satellite/admin/back-office/ui/src/views/Login.vue
@@ -54,7 +54,8 @@
     </v-container>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { ref, watch } from 'vue';
 import { useTheme } from 'vuetify';
 import {
     VAppBar,
@@ -71,51 +72,24 @@ import {
     VSelect,
 } from 'vuetify/components';
 
-export default {
-    components: {
-        VAppBar,
-        VAppBarTitle,
-        VImg,
-        VBtnToggle,
-        VTooltip,
-        VBtn,
-        VContainer,
-        VRow,
-        VCol,
-        VCard,
-        VCardText,
-        VSelect,
-    },
-    setup() {
-        const theme = useTheme();
-        return {
-            theme,
-            toggleTheme: (newTheme) => {
-                if ((newTheme === 'dark' && theme.global.current.value.dark) || (newTheme === 'light' && !theme.global.current.value.dark)) {
-                    return;
-                }
-                theme.global.name.value = newTheme;
-                localStorage.setItem('theme', newTheme);  // Store the selected theme in localStorage
-            },
-        };
-    },
-    data: () => ({
-        activeTheme: null,
-        selectedSatellite: 'North America US1',
-    }),
-    watch: {
-        'theme.global.current.value.dark': function (newVal) {
-            this.activeTheme = newVal ? 1 : 0;
-        },
-    },
-    mounted() {
-        document.title = 'Storj Admin - Login';
-    },
-    created() {
-    // Check for stored theme in localStorage. If none, default to 'light'
-        const storedTheme = localStorage.getItem('theme') || 'light';
-        this.toggleTheme(storedTheme);
-        this.activeTheme = this.theme.global.current.value.dark ? 1 : 0;
-    },
-};
+const theme = useTheme();
+
+const activeTheme = ref<number>(0);
+const selectedSatellite = ref<string>('North America US1');
+
+function toggleTheme(newTheme: string) {
+    if ((newTheme === 'dark' && theme.global.current.value.dark) || (newTheme === 'light' && !theme.global.current.value.dark)) {
+        return;
+    }
+    theme.global.name.value = newTheme;
+    localStorage.setItem('theme', newTheme);  // Store the selected theme in localStorage
+}
+
+watch(() => theme.global.current.value.dark, newVal => {
+    activeTheme.value = newVal ? 1 : 0;
+});
+
+// Check for stored theme in localStorage. If none, default to 'light'
+toggleTheme(localStorage.getItem('theme') || 'light');
+activeTheme.value = theme.global.current.value.dark ? 1 : 0;
 </script>
\ No newline at end of file
diff --git a/satellite/admin/back-office/ui/src/views/ProjectDetails.vue b/satellite/admin/back-office/ui/src/views/ProjectDetails.vue
index 64a993c63db0..e4f75e238ee7 100644
--- a/satellite/admin/back-office/ui/src/views/ProjectDetails.vue
+++ b/satellite/admin/back-office/ui/src/views/ProjectDetails.vue
@@ -168,7 +168,8 @@
     </v-container>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { onMounted } from 'vue';
 import {
     VContainer,
     VRow,
@@ -193,37 +194,7 @@ import ProjectUserAgentsDialog from '@/components/ProjectUserAgentsDialog.vue';
 import ProjectLimitsDialog from '@/components/ProjectLimitsDialog.vue';
 import ProjectInformationDialog from '@/components/ProjectInformationDialog.vue';
 
-export default {
-    components: {
-        VContainer,
-        VRow,
-        VCol,
-        VChip,
-        VTooltip,
-        VBtn,
-        VIcon,
-        VCard,
-        VCardText,
-        VDivider,
-        PageTitleComponent,
-        UsageProgressComponent,
-        BucketsTableComponent,
-        LogsTableComponent,
-        UsersTableComponent,
-        ProjectActionsMenu,
-        ProjectGeofenceDialog,
-        ProjectUserAgentsDialog,
-        ProjectLimitsDialog,
-        ProjectInformationDialog,
-    },
-    data() {
-        return {
-            dialog: false,
-            valid: false,
-        };
-    },
-    mounted() {
-        document.title = 'Storj Admin - Project Details';
-    },
-};
+onMounted(() => {
+    document.title = 'Storj Admin - Project Details';
+});
 </script>
\ No newline at end of file
diff --git a/satellite/admin/back-office/ui/src/views/Projects.vue b/satellite/admin/back-office/ui/src/views/Projects.vue
index 2dc83f08f3b2..735bd2598260 100644
--- a/satellite/admin/back-office/ui/src/views/Projects.vue
+++ b/satellite/admin/back-office/ui/src/views/Projects.vue
@@ -27,7 +27,8 @@
     </v-container>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { onMounted } from 'vue';
 import { VContainer, VRow, VCol, VBtn } from 'vuetify/components';
 
 import PageTitleComponent from '@/components/PageTitleComponent.vue';
@@ -35,38 +36,7 @@ import PageSubtitleComponent from '@/components/PageSubtitleComponent.vue';
 import ProjectsTableComponent from '@/components/ProjectsTableComponent.vue';
 import NewProjectDialog from '@/components/NewProjectDialog.vue';
 
-export default {
-    components: {
-        VContainer,
-        VRow,
-        VCol,
-        VBtn,
-        PageTitleComponent,
-        PageSubtitleComponent,
-        ProjectsTableComponent,
-        NewProjectDialog,
-    },
-    data() {
-        return {
-            dialog: false,
-            valid: false,
-            search: '',
-            email: '',
-            emailRules: [
-                value => {
-                    if (value) return true;
-
-                    return 'E-mail is requred.';
-                },
-                value => {
-                    if (/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(value)) return true;
-                    return 'E-mail must be valid.';
-                },
-            ],
-        };
-    },
-    mounted() {
-        document.title = 'Storj Admin - Projects';
-    },
-};
+onMounted(() => {
+    document.title = 'Storj Admin - Projects';
+});
 </script>
\ No newline at end of file