From df9a6e968e582bd572266956dbdeead449df57d2 Mon Sep 17 00:00:00 2001
From: Jeremy Wharton <jeremy.e.wharton@gmail.com>
Date: Thu, 13 Jul 2023 18:45:59 -0500
Subject: [PATCH] web/satellite: lint Vuetify files

This change enables linting for the Vuetify proof of concept code and
fixes the linting errors that were detected. Additionally, it migrates
the Vuetify components to the composition API.

Change-Id: Id8cc083954e3f4cb66a00ad2715a96c8747b592c
---
 web/satellite/.eslintignore                   |   2 +
 web/satellite/.eslintrc.js                    |   3 +-
 web/satellite/package.json                    |   4 +-
 web/satellite/vite.config-vuetify.js          |  90 ++-
 .../src/components/AccessTableComponent.vue   | 183 +++--
 .../BrowserBreadcrumbsComponent.vue           |  18 +-
 .../src/components/BrowserNewFolderDialog.vue | 152 +++--
 .../components/BrowserSnackbarComponent.vue   | 292 ++++----
 .../src/components/BrowserTableComponent.vue  | 442 ++++++------
 .../src/components/BucketsDataTable.vue       |  80 +--
 .../src/components/CardStatsComponent.vue     |  24 +-
 .../src/components/PageSubtitleComponent.vue  |  13 +-
 .../src/components/PageTitleComponent.vue     |  12 +-
 .../src/components/ProjectsTableComponent.vue | 163 +++--
 .../src/components/TeamTableComponent.vue     |  10 +-
 .../src/components/UsageProgressComponent.vue |  51 +-
 .../src/components/icons/IconAccess.vue       |  21 +-
 .../src/components/icons/IconAllProjects.vue  |  26 +-
 .../src/components/icons/IconBrowse.vue       |  20 +-
 .../src/components/icons/IconBucket.vue       |  20 +-
 .../src/components/icons/IconDashboard.vue    |  19 +-
 .../src/components/icons/IconDocs.vue         |  20 +-
 .../src/components/icons/IconFolder.vue       |  19 +-
 .../src/components/icons/IconForum.vue        |  19 +-
 .../src/components/icons/IconNew.vue          |  20 +-
 .../src/components/icons/IconPassphrase.vue   |  20 +-
 .../src/components/icons/IconProject.vue      |  19 +-
 .../src/components/icons/IconResources.vue    |  19 +-
 .../src/components/icons/IconSettings.vue     |  19 +-
 .../src/components/icons/IconSupport.vue      |  20 +-
 .../src/components/icons/IconTeam.vue         |  20 +-
 .../src/components/icons/IconUpload.vue       |  19 +-
 .../src/layouts/default/Account.vue           |  20 +-
 .../src/layouts/default/AccountNav.vue        | 158 ++---
 .../src/layouts/default/AllProjects.vue       |  16 +-
 .../src/layouts/default/AppBar.vue            | 338 +++++-----
 .../src/layouts/default/Default.vue           |   7 +-
 .../src/layouts/default/ProjectNav.vue        | 478 +++++++------
 .../vuetify-poc/src/layouts/default/View.vue  |  11 +-
 web/satellite/vuetify-poc/src/main.ts         |  15 +-
 .../vuetify-poc/src/plugins/index.ts          |  18 +-
 .../vuetify-poc/src/plugins/vuetify.ts        | 174 +++--
 .../vuetify-poc/src/plugins/webfontloader.ts  |  12 +-
 web/satellite/vuetify-poc/src/router/index.ts | 138 ++--
 .../vuetify-poc/src/views/Access.vue          | 476 ++++++-------
 .../vuetify-poc/src/views/AccountSettings.vue | 222 +++---
 .../vuetify-poc/src/views/Billing.vue         | 565 ++++++++--------
 .../vuetify-poc/src/views/Bucket.vue          |  89 +--
 .../vuetify-poc/src/views/Buckets.vue         | 312 +++++----
 .../vuetify-poc/src/views/Dashboard.vue       |  17 +-
 .../vuetify-poc/src/views/DesignLibrary.vue   | 542 ++++++++-------
 .../vuetify-poc/src/views/Projects.vue        | 632 +++++++++---------
 web/satellite/vuetify-poc/src/views/Team.vue  |  64 +-
 53 files changed, 2958 insertions(+), 3205 deletions(-)

diff --git a/web/satellite/.eslintignore b/web/satellite/.eslintignore
index f594f9373eb5..de8a574b416a 100644
--- a/web/satellite/.eslintignore
+++ b/web/satellite/.eslintignore
@@ -2,3 +2,5 @@ dist
 dist_vuetify_poc
 node_modules
 coverage
+tests/unit/ignore
+static/wasm
diff --git a/web/satellite/.eslintrc.js b/web/satellite/.eslintrc.js
index ea2f6f2bbc99..504c96c88f98 100644
--- a/web/satellite/.eslintrc.js
+++ b/web/satellite/.eslintrc.js
@@ -44,7 +44,7 @@ module.exports = {
                 },
                 {
                     'group': 'internal',
-                    'pattern': '@/components/**',
+                    'pattern': '@?(poc)/components/**',
                     'position': 'after',
                 },
                 {
@@ -80,6 +80,7 @@ module.exports = {
         'vue/no-unused-refs': ['warn'],
         'vue/no-unused-vars': ['warn'],
         'vue/no-useless-v-bind': ['warn'],
+        'vue/valid-v-slot': ['error', { 'allowModifiers': true }],
 
         'vue/no-useless-template-attributes': ['off'], // TODO: fix later
         'vue/no-multiple-template-root': ['off'], // it's possible to have multiple roots in template in Vue 3
diff --git a/web/satellite/package.json b/web/satellite/package.json
index d7093f6a3b63..eb2cb818d659 100644
--- a/web/satellite/package.json
+++ b/web/satellite/package.json
@@ -9,8 +9,8 @@
     "build-watch": "NODE_ENV=development vite build -c vite.config.js --watch",
     "build-vuetify": "vite build -c vite.config-vuetify.js",
     "build-vuetify-watch": "NODE_ENV=development vite build -c vite.config-vuetify.js --watch",
-    "lint": "eslint --ext .js,.ts,.vue src --fix && stylelint . --max-warnings 0 --fix",
-    "lint-ci": "eslint --ext .js,.ts,.vue src --no-fix && stylelint . --max-warnings 0 --no-fix",
+    "lint": "eslint **/*.{js,ts,vue} --fix && stylelint . --max-warnings 0 --fix",
+    "lint-ci": "eslint **/*.{js,ts,vue} --no-fix && stylelint . --max-warnings 0 --no-fix",
     "wasm": "chmod +x ./scripts/build-wasm.sh && ./scripts/build-wasm.sh",
     "wasm-dev": "chmod +x ./scripts/build-wasm-dev.sh && ./scripts/build-wasm-dev.sh",
     "test": "vitest run"
diff --git a/web/satellite/vite.config-vuetify.js b/web/satellite/vite.config-vuetify.js
index d0f6ffcd80e2..bf01f4cad8fb 100644
--- a/web/satellite/vite.config-vuetify.js
+++ b/web/satellite/vite.config-vuetify.js
@@ -1,55 +1,53 @@
 // Copyright (C) 2023 Storj Labs, Inc.
 // See LICENSE for copying information.
 
-// Plugins
-import vue from '@vitejs/plugin-vue'
-import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
+import { fileURLToPath, URL } from 'node:url';
 
-// Utilities
-import { defineConfig } from 'vite'
-import { fileURLToPath, URL } from 'node:url'
+import vue from '@vitejs/plugin-vue';
+import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify';
+import { defineConfig } from 'vite';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  base: '/static/dist_vuetify_poc',
-  plugins: [
-    vue({
-      template: { transformAssetUrls }
-    }),
-    // https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vite-plugin
-    vuetify({
-      autoImport: true,
-      styles: {
-        configFile: 'vuetify-poc/src/styles/settings.scss',
-      },
-    }),
-  ],
-  define: { 'process.env': {} },
-  resolve: {
-    alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url)),
-      '@poc': fileURLToPath(new URL('./vuetify-poc/src', import.meta.url)),
-    },
-    extensions: [
-      '.js',
-      '.json',
-      '.jsx',
-      '.mjs',
-      '.ts',
-      '.tsx',
-      '.vue',
+    base: '/static/dist_vuetify_poc',
+    plugins: [
+        vue({
+            template: { transformAssetUrls },
+        }),
+        // https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vite-plugin
+        vuetify({
+            autoImport: true,
+            styles: {
+                configFile: 'vuetify-poc/src/styles/settings.scss',
+            },
+        }),
     ],
-  },
-  build: {
-    outDir: fileURLToPath(new URL('dist_vuetify_poc', import.meta.url)),
-    emptyOutDir: true,
-    rollupOptions: {
-      input: {
-        'vuetify-poc': fileURLToPath(new URL('./index-vuetify.html', import.meta.url)),
-      },
+    define: { 'process.env': {} },
+    resolve: {
+        alias: {
+            '@': fileURLToPath(new URL('./src', import.meta.url)),
+            '@poc': fileURLToPath(new URL('./vuetify-poc/src', import.meta.url)),
+        },
+        extensions: [
+            '.js',
+            '.json',
+            '.jsx',
+            '.mjs',
+            '.ts',
+            '.tsx',
+            '.vue',
+        ],
+    },
+    build: {
+        outDir: fileURLToPath(new URL('dist_vuetify_poc', import.meta.url)),
+        emptyOutDir: true,
+        rollupOptions: {
+            input: {
+                'vuetify-poc': fileURLToPath(new URL('./index-vuetify.html', import.meta.url)),
+            },
+        },
+    },
+    server: {
+        port: 3000,
     },
-  },
-  server: {
-    port: 3000,
-  }
-})
+});
diff --git a/web/satellite/vuetify-poc/src/components/AccessTableComponent.vue b/web/satellite/vuetify-poc/src/components/AccessTableComponent.vue
index 4d98f9e4cae7..4fa89e63e1fb 100644
--- a/web/satellite/vuetify-poc/src/components/AccessTableComponent.vue
+++ b/web/satellite/vuetify-poc/src/components/AccessTableComponent.vue
@@ -2,105 +2,94 @@
 // See LICENSE for copying information.
 
 <template>
-  <v-card variant="flat" :border="true" class="rounded-xlg">
-    <v-text-field
-      v-model="search"
-      label="Search"
-      prepend-inner-icon="mdi-magnify"
-      single-line
-      hide-details
-    ></v-text-field>
+    <v-card variant="flat" :border="true" class="rounded-xlg">
+        <v-text-field
+            v-model="search"
+            label="Search"
+            prepend-inner-icon="mdi-magnify"
+            single-line
+            hide-details
+        />
 
-    <v-data-table
-      v-model="selected"
-      v-model:sort-by="sortBy"
-      :headers="headers"
-      :items="accesses"
-      :search="search"
-      class="elevation-1"
-      show-select
-      hover
-    >
-      <template v-slot:item.name="{ item }">
-          <v-list-item class="font-weight-bold pl-0">
-            {{ item.columns.name }}
-        </v-list-item>
-      </template>
-      <template v-slot:item.status="{ item }">
-        <v-chip :color="getColor(item.raw.status)" variant="tonal" size="small" rounded="xl" class="font-weight-bold">
-          {{ item.raw.status }}
-        </v-chip>
-      </template>
-    </v-data-table>
-  </v-card>
+        <v-data-table
+            v-model="selected"
+            :sort-by="sortBy"
+            :headers="headers"
+            :items="accesses"
+            :search="search"
+            class="elevation-1"
+            show-select
+            hover
+        >
+            <template #item.name="{ item }">
+                <v-list-item class="font-weight-bold pl-0">
+                    {{ item.columns.name }}
+                </v-list-item>
+            </template>
+            <template #item.status="{ item }">
+                <v-chip :color="item.raw.status == 'Active' ? 'success' : 'warning'" variant="tonal" size="small" rounded="xl" class="font-weight-bold">
+                    {{ item.raw.status }}
+                </v-chip>
+            </template>
+        </v-data-table>
+    </v-card>
 </template>
 
-<script>
-export default {
-  name: 'AccessTableComponent',
-  data () {
-      return {
-        search: '',
-        selected: [],
-        sortBy: [{ key: 'date', order: 'asc' }],
-        headers: [
-          {
-            title: 'Name',
-            align: 'start',
-            key: 'name',
-          },
-          { title: 'Type', key: 'type' },
-          { title: 'Status', key: 'status' },
-          { title: 'Permissions', key: 'permissions' },
-          { title: 'Date Created', key: 'date' },
-        ],
-        accesses: [
-          {
-            name: 'Backup',
-            date: '02 Mar 2023',
-            type: 'Access Grant',
-            permissions: 'All',
-            status: 'Active',
-          },
-          {
-            name: 'S3 Test',
-            date: '03 Mar 2023',
-            type: 'S3 Credentials',
-            permissions: 'Read, Write',
-            status: 'Expired',
-          },
-          {
-            name: 'CLI Demo',
-            date: '04 Mar 2023',
-            type: 'CLI Access',
-            permissions: 'Read, Write, List',
-            status: 'Active',
-          },
-          {
-            name: 'Sharing',
-            date: '08 Mar 2023',
-            type: 'Access Grant',
-            permissions: 'Read, Delete',
-            status: 'Active',
-          },
-          {
-            name: 'Sync Int',
-            date: '12 Mar 2023',
-            type: 'S3 Credentials',
-            permissions: 'All',
-            status: 'Expired',
-          },
-        ],
-      }
+<script setup lang="ts">
+import { ref } from 'vue';
+import { VCard, VTextField, VListItem, VChip } from 'vuetify/components';
+import { VDataTable } from 'vuetify/labs/components';
+
+const search = ref<string>('');
+const selected = ref([]);
+
+const sortBy = [{ key: 'date', order: 'asc' }];
+const headers = [
+    {
+        title: 'Name',
+        align: 'start',
+        key: 'name',
+    },
+    { title: 'Type', key: 'type' },
+    { title: 'Status', key: 'status' },
+    { title: 'Permissions', key: 'permissions' },
+    { title: 'Date Created', key: 'date' },
+];
+const accesses = [
+    {
+        name: 'Backup',
+        date: '02 Mar 2023',
+        type: 'Access Grant',
+        permissions: 'All',
+        status: 'Active',
+    },
+    {
+        name: 'S3 Test',
+        date: '03 Mar 2023',
+        type: 'S3 Credentials',
+        permissions: 'Read, Write',
+        status: 'Expired',
+    },
+    {
+        name: 'CLI Demo',
+        date: '04 Mar 2023',
+        type: 'CLI Access',
+        permissions: 'Read, Write, List',
+        status: 'Active',
+    },
+    {
+        name: 'Sharing',
+        date: '08 Mar 2023',
+        type: 'Access Grant',
+        permissions: 'Read, Delete',
+        status: 'Active',
     },
-    computed: {
-      getColor() {
-        return (role) => {
-          if (role === 'Owner') return 'purple2'
-          if (role === 'Invited') return 'warning'
-          return 'green'
-        }
-      }
+    {
+        name: 'Sync Int',
+        date: '12 Mar 2023',
+        type: 'S3 Credentials',
+        permissions: 'All',
+        status: 'Expired',
     },
-  }
-</script>
\ No newline at end of file
+];
+</script>
diff --git a/web/satellite/vuetify-poc/src/components/BrowserBreadcrumbsComponent.vue b/web/satellite/vuetify-poc/src/components/BrowserBreadcrumbsComponent.vue
index aedd3a26cafd..3ae7af16345c 100644
--- a/web/satellite/vuetify-poc/src/components/BrowserBreadcrumbsComponent.vue
+++ b/web/satellite/vuetify-poc/src/components/BrowserBreadcrumbsComponent.vue
@@ -2,15 +2,13 @@
 // See LICENSE for copying information.
 
 <template>
-  <v-breadcrumbs :items="['Buckets', 'Demo']" active-class="font-weight-bold" class="pa-0">
-    <template v-slot:divider>
-      <img src="@poc/assets/icon-right.svg" alt="Breadcrumbs separator" width="10"/>
-    </template>
-  </v-breadcrumbs>
+    <v-breadcrumbs :items="['Buckets', 'Demo']" active-class="font-weight-bold" class="pa-0">
+        <template #divider>
+            <img src="@poc/assets/icon-right.svg" alt="Breadcrumbs separator" width="10">
+        </template>
+    </v-breadcrumbs>
 </template>
 
-<!-- <script>
-export default {
-  props: ['title']
-}
-</script> -->
\ No newline at end of file
+<script setup lang="ts">
+import { VBreadcrumbs } from 'vuetify/components';
+</script>
diff --git a/web/satellite/vuetify-poc/src/components/BrowserNewFolderDialog.vue b/web/satellite/vuetify-poc/src/components/BrowserNewFolderDialog.vue
index 082f3b4df4c0..74f49ec9f2da 100644
--- a/web/satellite/vuetify-poc/src/components/BrowserNewFolderDialog.vue
+++ b/web/satellite/vuetify-poc/src/components/BrowserNewFolderDialog.vue
@@ -2,84 +2,88 @@
 // See LICENSE for copying information.
 
 <template>
-  <v-dialog
-    v-model="dialog"
-    activator="parent"
-    width="auto"
-    min-width="400px"
-    transition="fade-transition"
-  >
-    <v-card rounded="xlg">
+    <v-dialog
+        v-model="dialog"
+        activator="parent"
+        width="auto"
+        min-width="400px"
+        transition="fade-transition"
+    >
+        <v-card rounded="xlg">
+            <v-sheet>
+                <v-card-item class="pl-7 py-4">
+                    <template #prepend>
+                        <v-card-title class="font-weight-bold">
+                            New Folder
+                        </v-card-title>
+                    </template>
 
-      <v-sheet>
-        <v-card-item class="pl-7 py-4">
-          <template v-slot:prepend>
-            <v-card-title class="font-weight-bold">
-              New Folder
-            </v-card-title>
-          </template>
+                    <template #append>
+                        <v-btn
+                            icon="$close"
+                            variant="text"
+                            size="small"
+                            color="default"
+                            @click="dialog = false"
+                        />
+                    </template>
+                </v-card-item>
+            </v-sheet>
 
-          <template v-slot:append>
-            <v-btn
-              icon="$close"
-              variant="text"
-              size="small"
-              color="default"
-              @click="dialog = false"
-            ></v-btn>
-          </template>
-        </v-card-item>
-      </v-sheet>
+            <v-divider />
 
-      <v-divider></v-divider>
+            <v-form class="pa-8 pb-3">
+                <v-row>
+                    <v-col
+                        cols="12"
+                    >
+                        <v-text-field
+                            v-model="folder"
+                            variant="outlined"
+                            :rules="folderRules"
+                            label="Enter Folder Name"
+                            required
+                            autofocus
+                        />
+                    </v-col>
+                </v-row>
+            </v-form>
 
-      <v-form v-model="valid" class="pa-8 pb-3">
-        <v-row>
-            <v-col
-              cols="12"
-            >
-              <v-text-field
-                v-model="folder"
-                variant="outlined"
-                :rules="folderRules"
-                label="Enter Folder Name"
-                required
-                autofocus
-              >
-              </v-text-field>
-            </v-col>
-          </v-row>
-      </v-form>
+            <v-divider />
 
-      <v-divider></v-divider>
-
-      <v-card-actions class="pa-7">
-        <v-row>
-          <v-col>
-            <v-btn variant="outlined" color="default" block @click="dialog = false">Cancel</v-btn>
-          </v-col>
-          <v-col>
-            <v-btn color="primary" variant="flat" block :loading="loading">Create Folder</v-btn>
-          </v-col>
-        </v-row>
-      </v-card-actions>
-    </v-card>
-  </v-dialog>
+            <v-card-actions class="pa-7">
+                <v-row>
+                    <v-col>
+                        <v-btn variant="outlined" color="default" block @click="dialog = false">Cancel</v-btn>
+                    </v-col>
+                    <v-col>
+                        <v-btn color="primary" variant="flat" block>Create Folder</v-btn>
+                    </v-col>
+                </v-row>
+            </v-card-actions>
+        </v-card>
+    </v-dialog>
 </template>
 
-<script>
-export default {
-  data() {
-    return {
-      dialog: false,
-      folder: '',
-      folderRules: [
-        value => {
-          if (value) return true
-          return 'Folder name is required.'
-        },
-      ],
-    }
-  }
-}
-</script>
\ No newline at end of file
+<script setup lang="ts">
+import { ref } from 'vue';
+import {
+    VDialog,
+    VCard,
+    VCardTitle,
+    VBtn,
+    VSheet,
+    VCardItem,
+    VForm,
+    VRow,
+    VCol,
+    VTextField,
+    VDivider,
+    VCardActions,
+} from 'vuetify/components';
+
+const dialog = ref<boolean>(false);
+const folder = ref<string>('');
+
+const folderRules = [(value: string) => (!!value || 'Folder name is required.')];
+</script>
diff --git a/web/satellite/vuetify-poc/src/components/BrowserSnackbarComponent.vue b/web/satellite/vuetify-poc/src/components/BrowserSnackbarComponent.vue
index 4628c1c43c34..bf05b2faed48 100644
--- a/web/satellite/vuetify-poc/src/components/BrowserSnackbarComponent.vue
+++ b/web/satellite/vuetify-poc/src/components/BrowserSnackbarComponent.vue
@@ -2,153 +2,151 @@
 // See LICENSE for copying information.
 
 <template>
-  <v-snackbar
-    :model-value="snackbar"
-    vertical
-    :timeout="4000"
-    color="default"
-    elevation="24"
-    rounded="lg"
-    class="upload-snackbar"
-  >
-    <v-row>
-      <v-col>
-        <v-expansion-panels theme="dark">
-          <v-expansion-panel
-            color="default"
-            rounded="lg"
-          >
-            <v-expansion-panel-title color="">
-              <span>Uploading 3 items</span>
-            </v-expansion-panel-title>
-            <v-progress-linear
-                rounded
-                model-value="73"
-                height="6"
-                color="success"
-                class="mt-1"
-            >
-            </v-progress-linear>
-            <v-expansion-panel-text>
-              <v-row class="pt-2">
-                <v-col cols="10">
-                  <p class="text-medium-emphasis">4 seconds left...</p>
-                </v-col>
-                <v-col cols="2">
-
-                  <v-tooltip text="Cancel all uploads">
-                    <template v-slot:activator="{ props }">
-                      <v-icon
-                        v-bind="props"
-                        icon="mdi-close-circle"
-                        @click="snackbar = false"
-                      ></v-icon>
-                    </template>
-                  </v-tooltip>
-
-                </v-col>
-                </v-row>
-              </v-expansion-panel-text>
-              <v-divider></v-divider>
-              <v-expansion-panel-text>
-                <v-row class="pt-2">
-                  <v-col cols="10">
-                  <p>Image.jpg</p>
-                  </v-col>
-                  <v-col cols="2">
-
-                  <v-tooltip text="Uploading...">
-                    <template v-slot:activator="{ props }">
-                      <v-progress-circular
-                      v-bind="props"
-                        :size="20"
-                        color="secondary"
-                        model-value="20"
-                      ></v-progress-circular>
-                    </template>
-                  </v-tooltip>
-
-                </v-col>
-              </v-row>
-            </v-expansion-panel-text>
-            <v-divider></v-divider>
-            <v-expansion-panel-text>
-              <v-row class="pt-2">
-                <v-col cols="10">
-                  <p>Video.mp4</p>
-                  </v-col>
-                  <v-col cols="2">
-
-                  <v-tooltip text="Upload complete">
-                    <template v-slot:activator="{ props }">
-                      <v-icon
-                      v-bind="props"
-                      icon="mdi-checkbox-marked-circle"
-                      color="success"
-                    ></v-icon>
-                    </template>
-                  </v-tooltip>
-
-                </v-col>
-              </v-row>
-            </v-expansion-panel-text>
-            <v-divider></v-divider>
-              <v-expansion-panel-text>
-                <v-row class="pt-2">
-                  <v-col cols="10">
-                    <p>Text.pdf</p>
-                    </v-col>
-                    <v-col cols="2">
-
-                    <v-tooltip text="Upload failed">
-                      <template v-slot:activator="{ props }">
-                        <v-icon
-                          v-bind="props"
-                          icon="mdi-information"
-                          color="warning"
-                        ></v-icon>
-                      </template>
-                    </v-tooltip>
-
-                  </v-col>
-                </v-row>
-              </v-expansion-panel-text>
-            <v-divider></v-divider>
-            <v-expansion-panel-text>
-              <v-row class="pt-2">
-                <v-col cols="10">
-                  <p>Bigvideo.mov</p>
-                  </v-col>
-                  <v-col cols="2">
-
-                  <v-tooltip text="File is too big">
-                    <template v-slot:activator="{ props }">
-                      <v-icon
-                        v-bind="props"
-                        icon="mdi-cancel"
-                        color="error2"
-                    ></v-icon>
-                    </template>
-                  </v-tooltip>
-
-                </v-col>
-              </v-row>
-            </v-expansion-panel-text>
-            <v-divider></v-divider>
-          </v-expansion-panel>
-
-        </v-expansion-panels>
-      </v-col>
-    </v-row>
-  </v-snackbar>
+    <v-snackbar
+        vertical
+        :timeout="4000"
+        color="default"
+        elevation="24"
+        rounded="lg"
+        class="upload-snackbar"
+    >
+        <v-row>
+            <v-col>
+                <v-expansion-panels theme="dark">
+                    <v-expansion-panel
+                        color="default"
+                        rounded="lg"
+                    >
+                        <v-expansion-panel-title color="">
+                            <span>Uploading 3 items</span>
+                        </v-expansion-panel-title>
+                        <v-progress-linear
+                            rounded
+                            model-value="73"
+                            height="6"
+                            color="success"
+                            class="mt-1"
+                        />
+                        <v-expansion-panel-text>
+                            <v-row class="pt-2">
+                                <v-col cols="10">
+                                    <p class="text-medium-emphasis">4 seconds left...</p>
+                                </v-col>
+                                <v-col cols="2">
+                                    <v-tooltip text="Cancel all uploads">
+                                        <template #activator="{ props: activatorProps }">
+                                            <v-icon
+                                                v-bind="activatorProps"
+                                                icon="mdi-close-circle"
+                                                @click="onCancel"
+                                            />
+                                        </template>
+                                    </v-tooltip>
+                                </v-col>
+                            </v-row>
+                        </v-expansion-panel-text>
+                        <v-divider />
+                        <v-expansion-panel-text>
+                            <v-row class="pt-2">
+                                <v-col cols="10">
+                                    <p>Image.jpg</p>
+                                </v-col>
+                                <v-col cols="2">
+                                    <v-tooltip text="Uploading...">
+                                        <template #activator="{ props: activatorProps }">
+                                            <v-progress-circular
+                                                v-bind="activatorProps"
+                                                :size="20"
+                                                color="secondary"
+                                                model-value="20"
+                                            />
+                                        </template>
+                                    </v-tooltip>
+                                </v-col>
+                            </v-row>
+                        </v-expansion-panel-text>
+                        <v-divider />
+                        <v-expansion-panel-text>
+                            <v-row class="pt-2">
+                                <v-col cols="10">
+                                    <p>Video.mp4</p>
+                                </v-col>
+                                <v-col cols="2">
+                                    <v-tooltip text="Upload complete">
+                                        <template #activator="{ props: activatorProps }">
+                                            <v-icon
+                                                v-bind="activatorProps"
+                                                icon="mdi-checkbox-marked-circle"
+                                                color="success"
+                                            />
+                                        </template>
+                                    </v-tooltip>
+                                </v-col>
+                            </v-row>
+                        </v-expansion-panel-text>
+                        <v-divider />
+                        <v-expansion-panel-text>
+                            <v-row class="pt-2">
+                                <v-col cols="10">
+                                    <p>Text.pdf</p>
+                                </v-col>
+                                <v-col cols="2">
+                                    <v-tooltip text="Upload failed">
+                                        <template #activator="{ props: activatorProps }">
+                                            <v-icon
+                                                v-bind="activatorProps"
+                                                icon="mdi-information"
+                                                color="warning"
+                                            />
+                                        </template>
+                                    </v-tooltip>
+                                </v-col>
+                            </v-row>
+                        </v-expansion-panel-text>
+                        <v-divider />
+                        <v-expansion-panel-text>
+                            <v-row class="pt-2">
+                                <v-col cols="10">
+                                    <p>Bigvideo.mov</p>
+                                </v-col>
+                                <v-col cols="2">
+                                    <v-tooltip text="File is too big">
+                                        <template #activator="{ props: activatorProps }">
+                                            <v-icon
+                                                v-bind="activatorProps"
+                                                icon="mdi-cancel"
+                                                color="error2"
+                                            />
+                                        </template>
+                                    </v-tooltip>
+                                </v-col>
+                            </v-row>
+                        </v-expansion-panel-text>
+                        <v-divider />
+                    </v-expansion-panel>
+                </v-expansion-panels>
+            </v-col>
+        </v-row>
+    </v-snackbar>
 </template>
 
-<script>
-export default {
-  props: {
-    snackbar: {
-      required: true
-    }
-  },
-};
+<script setup lang="ts">
+import {
+    VSnackbar,
+    VRow,
+    VCol,
+    VExpansionPanels,
+    VExpansionPanel,
+    VExpansionPanelTitle,
+    VProgressLinear,
+    VExpansionPanelText,
+    VTooltip,
+    VIcon,
+    VDivider,
+    VProgressCircular,
+} from 'vuetify/components';
+
+const props = defineProps<{
+    onCancel: () => void,
+}>();
 </script>
\ No newline at end of file
diff --git a/web/satellite/vuetify-poc/src/components/BrowserTableComponent.vue b/web/satellite/vuetify-poc/src/components/BrowserTableComponent.vue
index b5d4e52531d8..a7e5bfd15ef7 100644
--- a/web/satellite/vuetify-poc/src/components/BrowserTableComponent.vue
+++ b/web/satellite/vuetify-poc/src/components/BrowserTableComponent.vue
@@ -2,298 +2,290 @@
 // See LICENSE for copying information.
 
 <template>
-<v-card variant="flat" :border="true" class="rounded-xlg">
+    <v-card variant="flat" :border="true" class="rounded-xlg">
+        <v-text-field
+            v-model="search"
+            label="Search"
+            prepend-inner-icon="mdi-magnify"
+            single-line
+            hide-details
+        />
 
-<v-text-field
-  v-model="search"
-  label="Search"
-  prepend-inner-icon="mdi-magnify"
-  single-line
-  hide-details
-></v-text-field>
-
-<v-data-table
-  v-model="selected"
-  v-model:sort-by="sortBy"
-  :headers="headers"
-  :items="files"
-  :search="search"
-  class="elevation-1"
-  @item-click="handleItemClick"
-  item-key="path"
-  show-select
->
-
-  <template v-slot:item.name="{ item }">
-    <v-list-item class="rounded-lg font-weight-bold pl-1" link @click="previewFile()">
-        <template v-slot:prepend>
-          <!-- Filetype icons -->
-          <img :src="getIconPath(item.raw.icon)" alt="Item icon" class="mr-3">
-        </template>
-        {{ item.columns.name }}
-    </v-list-item>
-  </template>
-
-</v-data-table>
-
-<v-dialog transition="fade-transition" v-model="previewDialog" class="preview-dialog" fullscreen theme="dark">
-  <v-card class="preview-card">
-
-    <v-carousel hide-delimiters show-arrows="hover" height="100vh"
-    >
-    <template v-slot:prev="{ props }">
-        <v-btn
-          color="default"
-          @click="props.onClick"
-          class="rounded-circle"
-          icon
-        >
-          <svg width="10" height="17" viewBox="0 0 10 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <g clip-path="url(#clip0_24843_332342)">
-            <path fill-rule="evenodd" clip-rule="evenodd" d="M0.30725 8.23141C0.276805 7.67914 0.528501 7.04398 1.03164 6.54085L6.84563 0.726856C7.64837 -0.0758889 8.78719 -0.238577 9.38925 0.363481C9.99131 0.96554 9.82862 2.10436 9.02587 2.9071L3.71149 8.22148L9.02681 13.5368C9.82955 14.3395 9.99224 15.4784 9.39018 16.0804C8.78812 16.6825 7.6493 16.5198 6.84656 15.717L1.03257 9.90305C0.535173 9.40565 0.283513 8.77923 0.30725 8.23141Z" fill="white"/>
-            </g>
-            <defs>
-            <clipPath id="clip0_24843_332342">
-            <rect width="17.0002" height="10" fill="white" transform="translate(10) rotate(90)"/>
-            </clipPath>
-            </defs>
-          </svg>
-        </v-btn>
-      </template>
-      <template v-slot:next="{ props }">
-        <v-btn
-          color="default"
-          @click="props.onClick"
-          class="rounded-circle"
-          icon
+        <v-data-table
+            v-model="selected"
+            :sort-by="sortBy"
+            :headers="headers"
+            :items="files"
+            :search="search"
+            class="elevation-1"
+            item-key="path"
+            show-select
         >
-            <svg width="10" height="17" viewBox="0 0 10 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <g clip-path="url(#clip0_24843_332338)">
-              <path fill-rule="evenodd" clip-rule="evenodd" d="M9.69263 8.23141C9.72307 7.67914 9.47138 7.04398 8.96824 6.54085L3.15425 0.726856C2.35151 -0.0758889 1.21269 -0.238577 0.61063 0.363481C0.00857207 0.96554 0.17126 2.10436 0.974005 2.9071L6.28838 8.22148L0.973072 13.5368C0.170328 14.3395 0.00763934 15.4784 0.609698 16.0804C1.21176 16.6825 2.35057 16.5198 3.15332 15.717L8.96731 9.90305C9.46471 9.40565 9.71637 8.77923 9.69263 8.23141Z" fill="white"/>
-              </g>
-              <defs>
-              <clipPath id="clip0_24843_332338">
-              <rect width="17.0002" height="10" fill="white" transform="matrix(4.37114e-08 1 1 -4.37114e-08 0 0)"/>
-              </clipPath>
-              </defs>
-            </svg>
-        </v-btn>
-        </template>
-        <v-toolbar
-            color="rgba(0, 0, 0, 0.3)"
-            theme="dark"
-          >
-            <!-- <v-img src="../assets/logo-white.svg" height="30" width="160" class="ml-3" alt="Storj Logo"/> -->
-            <v-toolbar-title>
-              Image.jpg
-            </v-toolbar-title>
-            <template v-slot:append>
-              <v-btn icon size="small" color="white">
-                <img src="@poc/assets/icon-download.svg" width="22" alt="Download">
-                <v-tooltip
-                  activator="parent"
-                  location="bottom"
-                >Download</v-tooltip>
-              </v-btn>
-              <v-btn icon size="small" color="white">
-                <img src="@poc/assets/icon-share.svg" width="22" alt="Share">
-                <v-tooltip
-                  activator="parent"
-                  location="bottom"
-                >Share</v-tooltip>
-              </v-btn>
-              <v-btn icon size="small" color="white">
-                <img src="@poc/assets/icon-geo-distribution.svg" width="22" alt="Geographic Distribution">
-                <v-tooltip
-                  activator="parent"
-                  location="bottom"
-                >Geographic Distribution</v-tooltip>
-              </v-btn>
-              <v-btn icon size="small" color="white">
-                <img src="@poc/assets/icon-more.svg" width="22" alt="More">
-                <v-tooltip
-                  activator="parent"
-                  location="bottom"
-                >More</v-tooltip>
-              </v-btn>
-              <v-btn icon size="small" color="white" @click="previewDialog = false">
-                <img src="@poc/assets/icon-close.svg" width="18" alt="Close">
-                <v-tooltip
-                  activator="parent"
-                  location="bottom"
-                >Close</v-tooltip>
-              </v-btn>
-              <!-- <v-btn icon="$close" color="white" size="small" @click="previewDialog = false"></v-btn> -->
+            <template #item.name="{ item }">
+                <v-list-item class="rounded-lg font-weight-bold pl-1" link @click="previewFile">
+                    <template #prepend>
+                        <!-- Filetype icons -->
+                        <img :src="icons.get(item.raw.icon) || fileIcon" alt="Item icon" class="mr-3">
+                    </template>
+                    {{ item.columns.name }}
+                </v-list-item>
             </template>
-        </v-toolbar>
-        <v-carousel-item
-            v-for="(item,i) in items"
-            :key="i"
-            :src="item.src"
-            >
-      </v-carousel-item>
-    </v-carousel>
-  </v-card>
-</v-dialog>
-</v-card>
+        </v-data-table>
+
+        <v-dialog v-model="previewDialog" transition="fade-transition" class="preview-dialog" fullscreen theme="dark">
+            <v-card class="preview-card">
+                <v-carousel hide-delimiters show-arrows="hover" height="100vh">
+                    <template #prev="{ props }">
+                        <v-btn
+                            color="default"
+                            class="rounded-circle"
+                            icon
+                            @click="props.onClick"
+                        >
+                            <svg width="10" height="17" viewBox="0 0 10 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <g clip-path="url(#clip0_24843_332342)">
+                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M0.30725 8.23141C0.276805 7.67914 0.528501 7.04398 1.03164 6.54085L6.84563 0.726856C7.64837 -0.0758889 8.78719 -0.238577 9.38925 0.363481C9.99131 0.96554 9.82862 2.10436 9.02587 2.9071L3.71149 8.22148L9.02681 13.5368C9.82955 14.3395 9.99224 15.4784 9.39018 16.0804C8.78812 16.6825 7.6493 16.5198 6.84656 15.717L1.03257 9.90305C0.535173 9.40565 0.283513 8.77923 0.30725 8.23141Z" fill="white" />
+                                </g>
+                                <defs>
+                                    <clipPath id="clip0_24843_332342">
+                                        <rect width="17.0002" height="10" fill="white" transform="translate(10) rotate(90)" />
+                                    </clipPath>
+                                </defs>
+                            </svg>
+                        </v-btn>
+                    </template>
+                    <template #next="{ props }">
+                        <v-btn
+                            color="default"
+                            class="rounded-circle"
+                            icon
+                            @click="props.onClick"
+                        >
+                            <svg width="10" height="17" viewBox="0 0 10 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <g clip-path="url(#clip0_24843_332338)">
+                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M9.69263 8.23141C9.72307 7.67914 9.47138 7.04398 8.96824 6.54085L3.15425 0.726856C2.35151 -0.0758889 1.21269 -0.238577 0.61063 0.363481C0.00857207 0.96554 0.17126 2.10436 0.974005 2.9071L6.28838 8.22148L0.973072 13.5368C0.170328 14.3395 0.00763934 15.4784 0.609698 16.0804C1.21176 16.6825 2.35057 16.5198 3.15332 15.717L8.96731 9.90305C9.46471 9.40565 9.71637 8.77923 9.69263 8.23141Z" fill="white" />
+                                </g>
+                                <defs>
+                                    <clipPath id="clip0_24843_332338">
+                                        <rect width="17.0002" height="10" fill="white" transform="matrix(4.37114e-08 1 1 -4.37114e-08 0 0)" />
+                                    </clipPath>
+                                </defs>
+                            </svg>
+                        </v-btn>
+                    </template>
+                    <v-toolbar
+                        color="rgba(0, 0, 0, 0.3)"
+                        theme="dark"
+                    >
+                        <!-- <v-img src="../assets/logo-white.svg" height="30" width="160" class="ml-3" alt="Storj Logo"/> -->
+                        <v-toolbar-title>
+                            Image.jpg
+                        </v-toolbar-title>
+                        <template #append>
+                            <v-btn icon size="small" color="white">
+                                <img src="@poc/assets/icon-download.svg" width="22" alt="Download">
+                                <v-tooltip
+                                    activator="parent"
+                                    location="bottom"
+                                >
+                                    Download
+                                </v-tooltip>
+                            </v-btn>
+                            <v-btn icon size="small" color="white">
+                                <img src="@poc/assets/icon-share.svg" width="22" alt="Share">
+                                <v-tooltip
+                                    activator="parent"
+                                    location="bottom"
+                                >
+                                    Share
+                                </v-tooltip>
+                            </v-btn>
+                            <v-btn icon size="small" color="white">
+                                <img src="@poc/assets/icon-geo-distribution.svg" width="22" alt="Geographic Distribution">
+                                <v-tooltip
+                                    activator="parent"
+                                    location="bottom"
+                                >
+                                    Geographic Distribution
+                                </v-tooltip>
+                            </v-btn>
+                            <v-btn icon size="small" color="white">
+                                <img src="@poc/assets/icon-more.svg" width="22" alt="More">
+                                <v-tooltip
+                                    activator="parent"
+                                    location="bottom"
+                                >
+                                    More
+                                </v-tooltip>
+                            </v-btn>
+                            <v-btn icon size="small" color="white" @click="previewDialog = false">
+                                <img src="@poc/assets/icon-close.svg" width="18" alt="Close">
+                                <v-tooltip
+                                    activator="parent"
+                                    location="bottom"
+                                >
+                                    Close
+                                </v-tooltip>
+                            </v-btn>
+                            <!-- <v-btn icon="$close" color="white" size="small" @click="previewDialog = false"></v-btn> -->
+                        </template>
+                    </v-toolbar>
+                    <v-carousel-item
+                        v-for="(item,i) in items"
+                        :key="i"
+                        :src="item.src"
+                    />
+                </v-carousel>
+            </v-card>
+        </v-dialog>
+    </v-card>
 </template>
 
+<script setup lang="ts">
+import { ref } from 'vue';
+import {
+    VCard,
+    VTextField,
+    VListItem,
+    VDialog,
+    VCarousel,
+    VBtn,
+    VToolbar,
+    VToolbarTitle,
+    VTooltip,
+    VCarouselItem,
+} from 'vuetify/components';
+import { VDataTable } from 'vuetify/labs/components';
+
+import folderIcon from '@poc/assets/icon-folder-tonal.svg';
+import pdfIcon from '@poc/assets/icon-pdf-tonal.svg';
+import imageIcon from '@poc/assets/icon-image-tonal.svg';
+import videoIcon from '@poc/assets/icon-video-tonal.svg';
+import audioIcon from '@poc/assets/icon-audio-tonal.svg';
+import textIcon from '@poc/assets/icon-text-tonal.svg';
+import zipIcon from '@poc/assets/icon-zip-tonal.svg';
+import spreadsheetIcon from '@poc/assets/icon-spreadsheet-tonal.svg';
+import fileIcon from '@poc/assets/icon-file-tonal.svg';
+
+const search = ref<string>('');
+const selected = ref([]);
+const previewDialog = ref<boolean>(false);
 
-<script>
-import folderIcon from '@poc/assets/icon-folder-tonal.svg'
-import pdfIcon from '@poc/assets/icon-pdf-tonal.svg'
-import imageIcon from '@poc/assets/icon-image-tonal.svg'
-import videoIcon from '@poc/assets/icon-video-tonal.svg'
-import audioIcon from '@poc/assets/icon-audio-tonal.svg'
-import textIcon from '@poc/assets/icon-text-tonal.svg'
-import zipIcon from '@poc/assets/icon-zip-tonal.svg'
-import spreadsheetIcon from '@poc/assets/icon-spreadsheet-tonal.svg'
-import fileIcon from '@poc/assets/icon-file-tonal.svg'
+const icons = new Map<string, string>([
+    ['folder', folderIcon],
+    ['pdf', pdfIcon],
+    ['image', imageIcon],
+    ['video', videoIcon],
+    ['audio', audioIcon],
+    ['text', textIcon],
+    ['zip', zipIcon],
+    ['spreadsheet', spreadsheetIcon],
+    ['file', fileIcon],
+]);
 
-export default {
-  data() {
-    return {
-      icons: {
-        folder: folderIcon,
-        pdf: pdfIcon,
-        image: imageIcon,
-        video: videoIcon,
-        audio: audioIcon,
-        text: textIcon,
-        zip: zipIcon,
-        spreadsheet: spreadsheetIcon,
-        file: fileIcon,
-      },
-      // https://vuetifyjs.com/en/components/windows/
-      window: 0,
-      // length of the window or slider
-      length: 3,
-      // preview dialog
-      previewDialog: false,
-      // preview items
-      items: [
-        {
-          src: 'https://cdn.vuetifyjs.com/images/carousel/squirrel.jpg',
-        },
-        {
-          src: 'https://cdn.vuetifyjs.com/images/carousel/sky.jpg',
-        },
-        {
-          src: 'https://cdn.vuetifyjs.com/images/carousel/bird.jpg',
-        },
-        {
-          src: 'https://cdn.vuetifyjs.com/images/carousel/planet.jpg',
-        },
-      ],
-      // search in the table
-      search: '',
-        selected: [],
-        sortBy: [{ key: 'name', order: 'asc' }],
-        headers: [
-          {
-            title: 'Name',
-            align: 'start',
-            key: 'name',
-          },
-          { title: 'Type', key:'type'},
-          { title: 'Size', key: 'size' },
-          { title: 'Date', key: 'date' },
-        ],
-      files: [
-      {
+const items = [
+    { src: 'https://cdn.vuetifyjs.com/images/carousel/squirrel.jpg' },
+    { src: 'https://cdn.vuetifyjs.com/images/carousel/sky.jpg' },
+    { src: 'https://cdn.vuetifyjs.com/images/carousel/bird.jpg' },
+    { src: 'https://cdn.vuetifyjs.com/images/carousel/planet.jpg' },
+];
+const sortBy = [{ key: 'name', order: 'asc' }];
+const headers = [
+    {
+        title: 'Name',
+        align: 'start',
+        key: 'name',
+    },
+    { title: 'Type', key:'type' },
+    { title: 'Size', key: 'size' },
+    { title: 'Date', key: 'date' },
+];
+const files = [
+    {
         name: 'Be The Cloud',
         path: 'folder-1',
         type: 'Folder',
         size: '2 GB',
         date: '02 Mar 2023',
         icon: 'folder',
-      },
-      {
+    },
+    {
         name: 'Folder',
         path: 'folder-2',
         type: 'Folder',
         size: '458 MB',
         date: '21 Apr 2023',
         icon: 'folder',
-      },
-      {
+    },
+    {
         name: 'Presentation.pdf',
         path: 'Presentation.pdf',
         type: 'PDF',
         size: '150 KB',
         date: '24 Mar 2023',
         icon: 'pdf',
-      },
-      {
+    },
+    {
         name: 'Image.jpg',
         path: 'image.jpg',
         type: 'JPG',
         size: '500 KB',
         date: '12 Mar 2023',
         icon: 'image',
-      },
-      {
+    },
+    {
         name: 'Video.mp4',
         path: 'video.mp4',
         type: 'MP4',
         size: '3 MB',
         date: '01 Apr 2023',
         icon: 'video',
-      },
-      {
+    },
+    {
         name: 'Song.mp3',
         path: 'Song.mp3',
         type: 'MP3',
         size: '8 MB',
         date: '22 May 2023',
         icon: 'audio',
-      },
-      {
+    },
+    {
         name: 'Text.txt',
         path: 'text.txt',
         type: 'TXT',
         size: '2 KB',
         date: '21 May 2023',
         icon: 'text',
-      },
-      {
+    },
+    {
         name: 'NewArchive.zip',
         path: 'newarchive.zip',
         type: 'ZIP',
         size: '21 GB',
         date: '20 May 2023',
         icon: 'zip',
-      },
-      {
+    },
+    {
         name: 'Table.csv',
         path: 'table.csv',
         type: 'CSV',
         size: '3 MB',
         date: '20 May 2023',
         icon: 'spreadsheet',
-      },
-      {
+    },
+    {
         name: 'Map-export.json',
         path: 'map-export.json',
         type: 'JSON',
         size: '1 MB',
         date: '23 May 2023',
         icon: 'file',
-      },
-    ],
-    };
-  },
-
-  methods: {
-    previewFile(file) {
-      // Implement logic to fetch the file content for preview or generate a URL for preview
-      // Then, open the preview dialog
-      this.previewDialog = true;
-    },
-    getIconPath(icon) {
-      return this.icons[icon] || this.icons['file'];
     },
-  },
+];
 
-};
+function previewFile(): void {
+    // Implement logic to fetch the file content for preview or generate a URL for preview
+    // Then, open the preview dialog
+    previewDialog.value = true;
+}
 </script>
diff --git a/web/satellite/vuetify-poc/src/components/BucketsDataTable.vue b/web/satellite/vuetify-poc/src/components/BucketsDataTable.vue
index 78053b4f3e79..abd10cb0bb01 100644
--- a/web/satellite/vuetify-poc/src/components/BucketsDataTable.vue
+++ b/web/satellite/vuetify-poc/src/components/BucketsDataTable.vue
@@ -2,46 +2,48 @@
 // See LICENSE for copying information.
 
 <template>
-  <v-card variant="flat" :border="true" class="rounded-xlg">
-    <v-text-field
-      v-model="search"
-      label="Search"
-      prepend-inner-icon="mdi-magnify"
-      single-line
-      hide-details
-    ></v-text-field>
+    <v-card variant="flat" :border="true" class="rounded-xlg">
+        <v-text-field
+            v-model="search"
+            label="Search"
+            prepend-inner-icon="mdi-magnify"
+            single-line
+            hide-details
+        />
 
-    <v-data-table
-      v-model="selected"
-      v-model:sort-by="sortBy"
-      :headers="headers"
-      :items="buckets"
-      :search="search"
-      class="elevation-1"
-      show-select
-    >
-      <template v-slot:item.name="{ item }">
-        <v-list-item class="rounded-lg font-weight-bold pl-1" link router-link to="/bucket">
-          <template v-slot:prepend>
-            <img src="../assets/icon-bucket-tonal.svg" alt="Bucket" class="mr-3">
-          </template>
-          {{ item.columns.name }}
-        </v-list-item>
-      </template>
-    </v-data-table>
-  </v-card>
+        <v-data-table
+            v-model="selected"
+            :sort-by="sortBy"
+            :headers="headers"
+            :items="buckets"
+            :search="search"
+            class="elevation-1"
+            show-select
+        >
+            <template #item.name="{ item }">
+                <v-list-item class="rounded-lg font-weight-bold pl-1" link router-link to="/bucket">
+                    <template #prepend>
+                        <img src="../assets/icon-bucket-tonal.svg" alt="Bucket" class="mr-3">
+                    </template>
+                    {{ item.columns.name }}
+                </v-list-item>
+            </template>
+        </v-data-table>
+    </v-card>
 </template>
 
-<script>
-export default {
-  props: ['headers', 'buckets'],
-  data () {
-    return {
-      search: '',
-      selected: [],
-      sortBy: [{ key: 'date', order: 'asc' }],
-    }
-  },
-}
-</script>
+<script setup lang="ts">
+import { ref } from 'vue';
+import { VCard, VTextField, VListItem } from 'vuetify/components';
+import { VDataTable } from 'vuetify/labs/components';
+
+const props = defineProps<{
+    headers: unknown[],
+    buckets: unknown[],
+}>();
 
+const search = ref<string>('');
+const selected = ref([]);
+
+const sortBy = [{ key: 'date', order: 'asc' }];
+</script>
diff --git a/web/satellite/vuetify-poc/src/components/CardStatsComponent.vue b/web/satellite/vuetify-poc/src/components/CardStatsComponent.vue
index 5206bc2be69c..4c06167ec7e1 100644
--- a/web/satellite/vuetify-poc/src/components/CardStatsComponent.vue
+++ b/web/satellite/vuetify-poc/src/components/CardStatsComponent.vue
@@ -2,15 +2,19 @@
 // See LICENSE for copying information.
 
 <template>
-  <v-card :title="title" :subtitle="subtitle" variant="flat" :border="true" rounded="xlg">
-    <v-card-text>
-      <v-chip rounded color="success" variant="outlined" class="font-weight-bold">{{ data }}</v-chip>
-    </v-card-text>
-  </v-card>
+    <v-card :title="title" :subtitle="subtitle" variant="flat" :border="true" rounded="xlg">
+        <v-card-text>
+            <v-chip rounded color="success" variant="outlined" class="font-weight-bold">{{ data }}</v-chip>
+        </v-card-text>
+    </v-card>
 </template>
 
-<script>
-export default {
-  props: ['title', 'subtitle', 'data']
-}
-</script>
\ No newline at end of file
+<script setup lang="ts">
+import { VCard, VCardText, VChip } from 'vuetify/components';
+
+const props = defineProps<{
+    title: string;
+    subtitle: string;
+    data: string;
+}>();
+</script>
diff --git a/web/satellite/vuetify-poc/src/components/PageSubtitleComponent.vue b/web/satellite/vuetify-poc/src/components/PageSubtitleComponent.vue
index 512057073324..9ded9d23b486 100644
--- a/web/satellite/vuetify-poc/src/components/PageSubtitleComponent.vue
+++ b/web/satellite/vuetify-poc/src/components/PageSubtitleComponent.vue
@@ -2,11 +2,12 @@
 // See LICENSE for copying information.
 
 <template>
-  <p class="text-medium-emphasis">{{ subtitle }} <a href="{{ link }}" target="_blank" class="link">Learn More</a></p>
+    <p class="text-medium-emphasis">{{ subtitle }} <a :href="link" target="_blank" class="link">Learn More</a></p>
 </template>
 
-<script>
-export default {
-  props: ['subtitle', 'link']
-}
-</script>
\ No newline at end of file
+<script setup lang="ts">
+const props = defineProps<{
+    subtitle: string;
+    link: string;
+}>();
+</script>
diff --git a/web/satellite/vuetify-poc/src/components/PageTitleComponent.vue b/web/satellite/vuetify-poc/src/components/PageTitleComponent.vue
index 0b9f66f6a769..f34b05170aa0 100644
--- a/web/satellite/vuetify-poc/src/components/PageTitleComponent.vue
+++ b/web/satellite/vuetify-poc/src/components/PageTitleComponent.vue
@@ -2,11 +2,11 @@
 // See LICENSE for copying information.
 
 <template>
-  <h1 class="text-h5 font-weight-bold my-3">{{ title }}</h1>
+    <h1 class="text-h5 font-weight-bold my-3">{{ title }}</h1>
 </template>
 
-<script>
-export default {
-  props: ['title']
-}
-</script>
\ No newline at end of file
+<script setup lang="ts">
+const props = defineProps<{
+    title: string;
+}>();
+</script>
diff --git a/web/satellite/vuetify-poc/src/components/ProjectsTableComponent.vue b/web/satellite/vuetify-poc/src/components/ProjectsTableComponent.vue
index 62ae1cb2f31b..1dbdb363badc 100644
--- a/web/satellite/vuetify-poc/src/components/ProjectsTableComponent.vue
+++ b/web/satellite/vuetify-poc/src/components/ProjectsTableComponent.vue
@@ -2,114 +2,101 @@
 // See LICENSE for copying information.
 
 <template>
-<v-card variant="flat" :border="true" class="rounded-xlg">
+    <v-card variant="flat" :border="true" class="rounded-xlg">
+        <v-text-field
+            v-model="search"
+            label="Search"
+            prepend-inner-icon="mdi-magnify"
+            single-line
+            hide-details
+        />
 
-<v-text-field
-  v-model="search"
-  label="Search"
-  prepend-inner-icon="mdi-magnify"
-  single-line
-  hide-details
-></v-text-field>
+        <v-data-table
+            v-model="selected"
+            :sort-by="sortBy"
+            :headers="headers"
+            :items="files"
+            :search="search"
+            class="elevation-1"
+            item-key="path"
+        >
+            <template #item.name="{ item }">
+                <v-list-item class="rounded-lg font-weight-bold pl-1" link router-link to="/dashboard">
+                    <template #prepend>
+                        <img src="../assets/icon-project-tonal.svg" alt="Bucket" class="mr-3">
+                        <!-- Project Icon -->
+                        <!-- <v-chip :color="getColor(item.raw.role)" variant="tonal" size="small" class="ml-2 mr-2" rounded>
+                            <svg width="16" height="16" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path fill="currentColor" d="M10.0567 1.05318L10.0849 1.06832L17.4768 5.33727C17.6249 5.42279 17.7084 5.5642 17.7274 5.71277L17.7301 5.73906L17.7314 5.76543L17.7316 14.2407C17.7316 14.4124 17.6452 14.5718 17.5032 14.6657L17.476 14.6826L10.084 18.9322C9.93533 19.0176 9.75438 19.0223 9.60224 18.9463L9.57407 18.9311L2.25387 14.6815C2.10601 14.5956 2.01167 14.4418 2.00108 14.2726L2 14.2407V5.77863L2.00023 5.75974C1.99504 5.58748 2.07759 5.41781 2.22993 5.31793L2.25457 5.30275L9.57482 1.06849C9.71403 0.987969 9.88182 0.978444 10.0278 1.03993L10.0567 1.05318ZM16.7123 6.6615L10.3397 10.3418V17.6094L16.7123 13.9458V6.6615ZM3.01944 6.66573V13.947L9.32037 17.605V10.3402L3.01944 6.66573ZM9.83034 2.09828L3.49475 5.76287L9.83122 9.45833L16.2029 5.7786L9.83034 2.09828Z"/>
+                            </svg>
+                        </v-chip> -->
+                    </template>
+                    {{ item.columns.name }}
+                </v-list-item>
+            </template>
 
-<v-data-table
-  v-model="selected"
-  v-model:sort-by="sortBy"
-  :headers="headers"
-  :items="files"
-  :search="search"
-  class="elevation-1"
-  @item-click="handleItemClick"
-  item-key="path"
->
+            <template #item.role="{ item }">
+                <v-chip :color="getColor(item.raw.role)" rounded="xl" size="small" class="font-weight-bold">
+                    {{ item.raw.role }}
+                </v-chip>
+            </template>
 
-  <template v-slot:item.name="{ item }">
-    <v-list-item class="rounded-lg font-weight-bold pl-1" link router-link to="/dashboard">
-        <template v-slot:prepend>
-          <img src="../assets/icon-project-tonal.svg" alt="Bucket" class="mr-3">
-          <!-- Project Icon -->
-          <!-- <v-chip :color="getColor(item.raw.role)" variant="tonal" size="small" class="ml-2 mr-2" rounded>
-            <svg width="16" height="16" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path fill="currentColor" d="M10.0567 1.05318L10.0849 1.06832L17.4768 5.33727C17.6249 5.42279 17.7084 5.5642 17.7274 5.71277L17.7301 5.73906L17.7314 5.76543L17.7316 14.2407C17.7316 14.4124 17.6452 14.5718 17.5032 14.6657L17.476 14.6826L10.084 18.9322C9.93533 19.0176 9.75438 19.0223 9.60224 18.9463L9.57407 18.9311L2.25387 14.6815C2.10601 14.5956 2.01167 14.4418 2.00108 14.2726L2 14.2407V5.77863L2.00023 5.75974C1.99504 5.58748 2.07759 5.41781 2.22993 5.31793L2.25457 5.30275L9.57482 1.06849C9.71403 0.987969 9.88182 0.978444 10.0278 1.03993L10.0567 1.05318ZM16.7123 6.6615L10.3397 10.3418V17.6094L16.7123 13.9458V6.6615ZM3.01944 6.66573V13.947L9.32037 17.605V10.3402L3.01944 6.66573ZM9.83034 2.09828L3.49475 5.76287L9.83122 9.45833L16.2029 5.7786L9.83034 2.09828Z"/>
-            </svg>
-          </v-chip> -->
-        </template>
-        {{ item.columns.name }}
-    </v-list-item>
-  </template>
-
-  <template v-slot:item.role="{ item }">
-      <v-chip :color="getColor(item.raw.role)" rounded="xl" size="small" class="font-weight-bold">
-        {{ item.raw.role }}
-      </v-chip>
-  </template>
-
-  <template v-slot:item.actions="{ item }">
-      <v-btn size="small" link router-link to="/dashboard">
-        {{ item.raw.actions }}
-      </v-btn>
-  </template>
-
-</v-data-table>
-
-</v-card>
+            <template #item.actions="{ item }">
+                <v-btn size="small" link router-link to="/dashboard">
+                    {{ item.raw.actions }}
+                </v-btn>
+            </template>
+        </v-data-table>
+    </v-card>
 </template>
 
-<script>
+<script setup lang="ts">
+import { ref } from 'vue';
+import { VCard, VTextField, VListItem, VChip, VBtn } from 'vuetify/components';
+import { VDataTable } from 'vuetify/labs/components';
+
+const search = ref<string>('');
+const selected = ref([]);
 
-export default {
-  data() {
-    return {
-      // search in the table
-      search: '',
-        selected: [],
-        sortBy: [{ key: 'name', order: 'asc' }],
-        headers: [
-          {
-            title: 'Project',
-            align: 'start',
-            key: 'name',
-          },
-          { title: 'Role', key:'role'},
-          { title: 'Members', key: 'size' },
-          { title: 'Date Added', key: 'date' },
-          { title: 'Actions', key: 'actions' },
-        ],
-      files: [
-      {
+const sortBy = [{ key: 'name', order: 'asc' }];
+const headers = [
+    {
+        title: 'Project',
+        align: 'start',
+        key: 'name',
+    },
+    { title: 'Role', key:'role' },
+    { title: 'Members', key: 'size' },
+    { title: 'Date Added', key: 'date' },
+    { title: 'Actions', key: 'actions' },
+];
+const files = [
+    {
         name: 'My First Project',
         role: 'Owner',
         size: '1',
         date: '02 Mar 2023',
         actions: 'Open Project',
-      },
-      {
+    },
+    {
         name: 'Storj Labs',
         role: 'Member',
         size: '23',
         date: '21 Apr 2023',
         actions: 'Open Project',
-      },
-      {
+    },
+    {
         name: 'Invitation Project',
         role: 'Invited',
         size: '15',
         date: '24 Mar 2023',
         actions: 'Join Project',
-      },
-    ],
-    };
-  },
-
-  computed: {
-    getColor() {
-      return (role) => {
-        if (role === 'Owner') return 'purple2'
-        if (role === 'Invited') return 'warning'
-        return 'green'
-      }
-    }
-  },
+    },
+];
 
-};
+function getColor(role: string): string {
+    if (role === 'Owner') return 'purple2';
+    if (role === 'Invited') return 'warning';
+    return 'green';
+}
 </script>
diff --git a/web/satellite/vuetify-poc/src/components/TeamTableComponent.vue b/web/satellite/vuetify-poc/src/components/TeamTableComponent.vue
index 519accda3c6b..85c3714e4818 100644
--- a/web/satellite/vuetify-poc/src/components/TeamTableComponent.vue
+++ b/web/satellite/vuetify-poc/src/components/TeamTableComponent.vue
@@ -9,11 +9,11 @@
             prepend-inner-icon="mdi-magnify"
             single-line
             hide-details
-        ></v-text-field>
+        />
 
         <v-data-table
             v-model="selected"
-            v-model:sort-by="sortBy"
+            :sort-by="sortBy"
             :headers="headers"
             :items="projectMembers"
             :search="search"
@@ -21,7 +21,7 @@
             show-select
             hover
         >
-            <template v-slot:item.name="{ item }">
+            <template #item.name="{ item }">
                 <v-list-item class="font-weight-bold pl-0">
                     <!-- <template v-slot:prepend>
                     <img src="../assets/icon-user-color.svg" alt="Dashboard" class="mr-3">
@@ -29,7 +29,7 @@
                     {{ item.columns.name }}
                 </v-list-item>
             </template>
-            <template v-slot:item.role="{ item }">
+            <template #item.role="{ item }">
                 <v-chip :color="roleColors.get(item.raw.role)" variant="tonal" size="small" rounded="xl" class="font-weight-bold">
                     {{ item.raw.role }}
                 </v-chip>
@@ -40,6 +40,8 @@
 
 <script setup lang="ts">
 import { computed, ref } from 'vue';
+import { VCard, VTextField, VListItem, VChip } from 'vuetify/components';
+import { VDataTable } from 'vuetify/labs/components';
 
 import { useProjectMembersStore } from '@/store/modules/projectMembersStore';
 import { useProjectsStore } from '@/store/modules/projectsStore';
diff --git a/web/satellite/vuetify-poc/src/components/UsageProgressComponent.vue b/web/satellite/vuetify-poc/src/components/UsageProgressComponent.vue
index 457fe34e6cb3..c9f772f96885 100644
--- a/web/satellite/vuetify-poc/src/components/UsageProgressComponent.vue
+++ b/web/satellite/vuetify-poc/src/components/UsageProgressComponent.vue
@@ -2,27 +2,34 @@
 // See LICENSE for copying information.
 
 <template>
-  <v-card :title="title" variant="flat" :border="true" rounded="xlg">
-    <v-card-item>
-      <v-progress-linear color="success" :model-value="progress" rounded height="6"></v-progress-linear>
-    </v-card-item>
-    <v-card-item>
-      <v-row>
-        <v-col>
-          <h4>{{ used }}</h4>
-          <p class="text-medium-emphasis"><small>{{ limit }}</small></p>
-        </v-col>
-        <v-col>
-          <h4 class="text-right">{{ available }}</h4>
-          <p class="text-right text-medium-emphasis"><small>{{ cta }}</small></p>
-        </v-col>
-      </v-row>
-    </v-card-item>
-  </v-card>
+    <v-card :title="title" variant="flat" :border="true" rounded="xlg">
+        <v-card-item>
+            <v-progress-linear color="success" :model-value="progress" rounded height="6" />
+        </v-card-item>
+        <v-card-item>
+            <v-row>
+                <v-col>
+                    <h4>{{ used }}</h4>
+                    <p class="text-medium-emphasis"><small>{{ limit }}</small></p>
+                </v-col>
+                <v-col>
+                    <h4 class="text-right">{{ available }}</h4>
+                    <p class="text-right text-medium-emphasis"><small>{{ cta }}</small></p>
+                </v-col>
+            </v-row>
+        </v-card-item>
+    </v-card>
 </template>
 
-<script>
-export default {
-  props: ['title', 'progress', 'used', 'limit', 'available', 'cta']
-}
-</script>
\ No newline at end of file
+<script setup lang="ts">
+import { VCard, VCardItem, VProgressLinear, VRow, VCol } from 'vuetify/components';
+
+const props = defineProps<{
+    title: string;
+    progress: number;
+    used: string;
+    limit: string;
+    available: string;
+    cta: string;
+}>();
+</script>
diff --git a/web/satellite/vuetify-poc/src/components/icons/IconAccess.vue b/web/satellite/vuetify-poc/src/components/icons/IconAccess.vue
index 92f8d242a666..8b5b3ad67fef 100644
--- a/web/satellite/vuetify-poc/src/components/icons/IconAccess.vue
+++ b/web/satellite/vuetify-poc/src/components/icons/IconAccess.vue
@@ -4,19 +4,14 @@
 <template>
     <!-- Access Icon -->
     <svg width="18" height="18" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path :fill="color" d="M17.0859 2.9141C19.638 5.46622 19.638 9.60404 17.0859 12.1562C15.3894 13.8527 12.9396 14.4568 10.6985 13.8283L10.6263 13.8076L10.5659 13.7897L5.76518 18.5903C5.66164 18.6938 5.52387 18.756 5.37774 18.7651L1.63842 18.9988C1.30718 19.0195 1.02187 18.7678 1.00117 18.4365C0.99961 18.4116 0.99961 18.3865 1.00117 18.3616L1.23488 14.6222C1.24401 14.4761 1.30618 14.3383 1.40971 14.2348L6.21041 9.43399L6.19228 9.37352C5.54455 7.16162 6.10394 4.73554 7.73473 3.02578L7.78829 2.97028L7.84381 2.9141C10.3959 0.361968 14.5338 0.361968 17.0859 2.9141ZM8.65636 3.58979L8.59185 3.65326L8.54502 3.70055L8.49571 3.75161C7.15718 5.15496 6.66574 7.15205 7.17887 8.99879L7.19964 9.07161L7.39804 9.73358L2.27364 14.8581L2.08255 17.9173L5.14189 17.7262L10.2653 12.603L10.9161 12.7967L10.9825 12.8158C12.8841 13.3491 14.9337 12.8211 16.3423 11.4126C18.4837 9.27111 18.4837 5.79915 16.3423 3.65771C14.2222 1.53768 10.7982 1.51648 8.65636 3.58979ZM12.882 5.52457C13.322 5.08455 14.0354 5.08455 14.4754 5.52457C14.9154 5.96459 14.9154 6.67801 14.4754 7.11803C14.0354 7.55805 13.322 7.55805 12.882 7.11803C12.4419 6.67801 12.4419 5.96459 12.882 5.52457Z"/>
+        <path :fill="color" d="M17.0859 2.9141C19.638 5.46622 19.638 9.60404 17.0859 12.1562C15.3894 13.8527 12.9396 14.4568 10.6985 13.8283L10.6263 13.8076L10.5659 13.7897L5.76518 18.5903C5.66164 18.6938 5.52387 18.756 5.37774 18.7651L1.63842 18.9988C1.30718 19.0195 1.02187 18.7678 1.00117 18.4365C0.99961 18.4116 0.99961 18.3865 1.00117 18.3616L1.23488 14.6222C1.24401 14.4761 1.30618 14.3383 1.40971 14.2348L6.21041 9.43399L6.19228 9.37352C5.54455 7.16162 6.10394 4.73554 7.73473 3.02578L7.78829 2.97028L7.84381 2.9141C10.3959 0.361968 14.5338 0.361968 17.0859 2.9141ZM8.65636 3.58979L8.59185 3.65326L8.54502 3.70055L8.49571 3.75161C7.15718 5.15496 6.66574 7.15205 7.17887 8.99879L7.19964 9.07161L7.39804 9.73358L2.27364 14.8581L2.08255 17.9173L5.14189 17.7262L10.2653 12.603L10.9161 12.7967L10.9825 12.8158C12.8841 13.3491 14.9337 12.8211 16.3423 11.4126C18.4837 9.27111 18.4837 5.79915 16.3423 3.65771C14.2222 1.53768 10.7982 1.51648 8.65636 3.58979ZM12.882 5.52457C13.322 5.08455 14.0354 5.08455 14.4754 5.52457C14.9154 5.96459 14.9154 6.67801 14.4754 7.11803C14.0354 7.55805 13.322 7.55805 12.882 7.11803C12.4419 6.67801 12.4419 5.96459 12.882 5.52457Z" />
     </svg>
-
-
 </template>
 
-<script>
-  export default {
-    props: {
-      color: {
-        type: String,
-        default: 'currentColor'
-      }
-    }
-  }
-</script>
\ No newline at end of file
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+    color: string;
+}>(), {
+    color: 'currentColor',
+});
+</script>
diff --git a/web/satellite/vuetify-poc/src/components/icons/IconAllProjects.vue b/web/satellite/vuetify-poc/src/components/icons/IconAllProjects.vue
index 1820ea4f3e7f..963185a030e9 100644
--- a/web/satellite/vuetify-poc/src/components/icons/IconAllProjects.vue
+++ b/web/satellite/vuetify-poc/src/components/icons/IconAllProjects.vue
@@ -4,21 +4,17 @@
 <template>
     <!-- All Projects Icon -->
     <svg width="18" height="18" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path d="M5.33455 11.8182L2 10L5.33455 8.18182" :stroke="color" stroke-linecap="round" stroke-linejoin="round"/>
-      <path d="M14.6655 8.18182L18.0001 10L14.6655 11.8182" :stroke="color" stroke-linecap="round" stroke-linejoin="round"/>
-      <path d="M18 13.6364L10 18L2 13.6364L5.33455 11.8182L10 14.3636L14.6655 11.8182L18 13.6364Z" :stroke="color" stroke-linecap="round" stroke-linejoin="round"/>
-      <path d="M2 6.36364L10 10.7273L18 6.36364L10 2L2 6.36364Z" :stroke="color" stroke-linecap="round" stroke-linejoin="round"/>
+        <path d="M5.33455 11.8182L2 10L5.33455 8.18182" :stroke="color" stroke-linecap="round" stroke-linejoin="round" />
+        <path d="M14.6655 8.18182L18.0001 10L14.6655 11.8182" :stroke="color" stroke-linecap="round" stroke-linejoin="round" />
+        <path d="M18 13.6364L10 18L2 13.6364L5.33455 11.8182L10 14.3636L14.6655 11.8182L18 13.6364Z" :stroke="color" stroke-linecap="round" stroke-linejoin="round" />
+        <path d="M2 6.36364L10 10.7273L18 6.36364L10 2L2 6.36364Z" :stroke="color" stroke-linecap="round" stroke-linejoin="round" />
     </svg>
-
 </template>
 
-<script>
-  export default {
-    props: {
-      color: {
-        type: String,
-        default: 'currentColor'
-      }
-    }
-  }
-</script>
\ No newline at end of file
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+    color: string;
+}>(), {
+    color: 'currentColor',
+});
+</script>
diff --git a/web/satellite/vuetify-poc/src/components/icons/IconBrowse.vue b/web/satellite/vuetify-poc/src/components/icons/IconBrowse.vue
index a931cc67dae5..d4662534aab2 100644
--- a/web/satellite/vuetify-poc/src/components/icons/IconBrowse.vue
+++ b/web/satellite/vuetify-poc/src/components/icons/IconBrowse.vue
@@ -4,18 +4,14 @@
 <template>
     <!-- Browse Icon -->
     <svg width="18" height="18" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path :fill="color" d="M7.41528 1.5L7.47416 1.50022C7.74772 1.5021 7.90752 1.51534 8.08726 1.54897C8.31459 1.59149 8.5204 1.66343 8.72982 1.77453L8.7863 1.80539C8.94923 1.89702 9.10215 2.00659 9.3826 2.23375L11.5641 4.01833L14.7994 4.01839C15.9959 4.023 16.5892 4.13696 17.1909 4.45057L17.2293 4.47085C17.7963 4.7741 18.2443 5.22205 18.5492 5.79226L18.5785 5.84813C18.8702 6.41362 18.9854 6.98502 18.9988 8.07466L19 8.22651V13.3036C18.9951 14.7512 18.8568 15.444 18.4724 16.1629C18.1201 16.8216 17.6002 17.3415 16.9386 17.6953L16.875 17.7287L16.8151 17.7591C16.1749 18.0782 15.5026 18.2062 14.2384 18.2203L14.0773 18.2215H5.99905C4.55062 18.2215 3.8431 18.095 3.13841 17.7354L3.0586 17.6937C2.39991 17.3415 1.88002 16.8216 1.5262 16.16L1.49445 16.0996C1.1502 15.4342 1.01556 14.7633 1.00116 13.4595L1 13.2999V5.25889C1 4.42193 1.1328 3.80687 1.42641 3.25184C1.71281 2.71041 2.13655 2.28105 2.67415 1.98753C3.22526 1.68663 3.83851 1.54572 4.67544 1.53468L7.28265 1.50052L7.41528 1.5ZM9.14621 6.62625C8.90655 6.80284 8.61945 6.90263 8.32276 6.91317L8.27031 6.9141L1.98424 6.91396L1.98438 13.2982C1.98871 14.4884 2.08071 15.0462 2.32046 15.5502L2.33564 15.5816L2.36716 15.6442L2.39578 15.6986C2.65631 16.1858 3.03569 16.5652 3.52283 16.8257C4.09289 17.1306 4.64457 17.2371 5.99905 17.2371H14.0755C15.3047 17.2327 15.8648 17.1328 16.3727 16.8798L16.4229 16.8543L16.4773 16.8257C16.9644 16.5652 17.3438 16.1858 17.6043 15.6986C17.9092 15.1286 18.0157 14.5769 18.0157 13.2224V8.22839C18.0118 7.22984 17.9345 6.77393 17.7342 6.36017L17.7054 6.30266L17.6795 6.25331C17.468 5.85783 17.1605 5.5504 16.7651 5.3389C16.2992 5.08974 15.8481 5.00262 14.7222 5.00262L11.3497 5.00257L9.14621 6.62625ZM7.41761 2.48438L7.29103 2.48486L4.68838 2.51898C4.00304 2.52802 3.54608 2.63302 3.14588 2.85152C2.77781 3.05248 2.49263 3.34144 2.29655 3.71213C2.08334 4.11518 1.98438 4.57348 1.98438 5.25889L1.98424 5.92958L8.27031 5.92972C8.3637 5.92972 8.45492 5.90315 8.53344 5.85347L8.56227 5.83377L10.4911 4.41236L8.839 3.06056C8.59588 2.86164 8.46697 2.76383 8.36672 2.70071L8.35189 2.69149L8.30933 2.66647L8.26352 2.64144C8.14711 2.57971 8.03578 2.54079 7.90626 2.51657C7.80285 2.49722 7.70913 2.48815 7.53803 2.48535L7.41761 2.48438Z"/>
+        <path :fill="color" d="M7.41528 1.5L7.47416 1.50022C7.74772 1.5021 7.90752 1.51534 8.08726 1.54897C8.31459 1.59149 8.5204 1.66343 8.72982 1.77453L8.7863 1.80539C8.94923 1.89702 9.10215 2.00659 9.3826 2.23375L11.5641 4.01833L14.7994 4.01839C15.9959 4.023 16.5892 4.13696 17.1909 4.45057L17.2293 4.47085C17.7963 4.7741 18.2443 5.22205 18.5492 5.79226L18.5785 5.84813C18.8702 6.41362 18.9854 6.98502 18.9988 8.07466L19 8.22651V13.3036C18.9951 14.7512 18.8568 15.444 18.4724 16.1629C18.1201 16.8216 17.6002 17.3415 16.9386 17.6953L16.875 17.7287L16.8151 17.7591C16.1749 18.0782 15.5026 18.2062 14.2384 18.2203L14.0773 18.2215H5.99905C4.55062 18.2215 3.8431 18.095 3.13841 17.7354L3.0586 17.6937C2.39991 17.3415 1.88002 16.8216 1.5262 16.16L1.49445 16.0996C1.1502 15.4342 1.01556 14.7633 1.00116 13.4595L1 13.2999V5.25889C1 4.42193 1.1328 3.80687 1.42641 3.25184C1.71281 2.71041 2.13655 2.28105 2.67415 1.98753C3.22526 1.68663 3.83851 1.54572 4.67544 1.53468L7.28265 1.50052L7.41528 1.5ZM9.14621 6.62625C8.90655 6.80284 8.61945 6.90263 8.32276 6.91317L8.27031 6.9141L1.98424 6.91396L1.98438 13.2982C1.98871 14.4884 2.08071 15.0462 2.32046 15.5502L2.33564 15.5816L2.36716 15.6442L2.39578 15.6986C2.65631 16.1858 3.03569 16.5652 3.52283 16.8257C4.09289 17.1306 4.64457 17.2371 5.99905 17.2371H14.0755C15.3047 17.2327 15.8648 17.1328 16.3727 16.8798L16.4229 16.8543L16.4773 16.8257C16.9644 16.5652 17.3438 16.1858 17.6043 15.6986C17.9092 15.1286 18.0157 14.5769 18.0157 13.2224V8.22839C18.0118 7.22984 17.9345 6.77393 17.7342 6.36017L17.7054 6.30266L17.6795 6.25331C17.468 5.85783 17.1605 5.5504 16.7651 5.3389C16.2992 5.08974 15.8481 5.00262 14.7222 5.00262L11.3497 5.00257L9.14621 6.62625ZM7.41761 2.48438L7.29103 2.48486L4.68838 2.51898C4.00304 2.52802 3.54608 2.63302 3.14588 2.85152C2.77781 3.05248 2.49263 3.34144 2.29655 3.71213C2.08334 4.11518 1.98438 4.57348 1.98438 5.25889L1.98424 5.92958L8.27031 5.92972C8.3637 5.92972 8.45492 5.90315 8.53344 5.85347L8.56227 5.83377L10.4911 4.41236L8.839 3.06056C8.59588 2.86164 8.46697 2.76383 8.36672 2.70071L8.35189 2.69149L8.30933 2.66647L8.26352 2.64144C8.14711 2.57971 8.03578 2.54079 7.90626 2.51657C7.80285 2.49722 7.70913 2.48815 7.53803 2.48535L7.41761 2.48438Z" />
     </svg>
-
 </template>
 
-<script>
-  export default {
-    props: {
-      color: {
-        type: String,
-        default: 'currentColor'
-      }
-    }
-  }
-</script>
\ No newline at end of file
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+    color: string;
+}>(), {
+    color: 'currentColor',
+});
+</script>
diff --git a/web/satellite/vuetify-poc/src/components/icons/IconBucket.vue b/web/satellite/vuetify-poc/src/components/icons/IconBucket.vue
index 32cefae673bf..33446ac20d0a 100644
--- a/web/satellite/vuetify-poc/src/components/icons/IconBucket.vue
+++ b/web/satellite/vuetify-poc/src/components/icons/IconBucket.vue
@@ -4,18 +4,14 @@
 <template>
     <!-- Bucket Icon -->
     <svg width="18" height="18" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path :fill="color" d="M9.94232 1C14.3287 1 17.8846 2.41577 17.8846 4.16222C17.8846 4.18679 17.8839 4.21129 17.8825 4.23573L17.8846 4.23576L17.8812 4.25647C17.8747 4.34405 17.8594 4.43074 17.8354 4.51639L17.2448 7.86246L17.9754 8.59315C19.4245 10.0422 19.4378 12.3818 18.0009 13.8187C17.4404 14.3792 16.7425 14.7191 16.0136 14.8391L15.6784 16.7376C15.6578 17.9885 13.0975 19 9.94232 19C6.80603 19 4.25762 18.0006 4.20697 16.7601L4.20649 16.7376L2.04971 4.51801C2.02531 4.43125 2.00973 4.34344 2.00333 4.2547L2 4.23576L2.0021 4.23573C2.0007 4.21129 2 4.18679 2 4.16222C2 2.41577 5.5559 1 9.94232 1ZM16.5417 5.92227C15.1162 6.76791 12.6925 7.32444 9.94232 7.32444C7.19224 7.32444 4.76862 6.76794 3.34307 5.92236L5.07 15.708L5.23576 16.7077L5.24057 16.7148C5.26274 16.7549 5.30682 16.8087 5.37589 16.8715C5.56623 17.0445 5.87973 17.225 6.29249 17.3864C7.23129 17.7535 8.53735 17.9704 9.94232 17.9704C11.3555 17.9704 12.6685 17.7509 13.6079 17.3802C14.0199 17.2176 14.331 17.0363 14.5174 16.8636C14.5757 16.8096 14.6149 16.7629 14.6373 16.7265L14.6486 16.7072C14.6484 16.707 14.6488 16.707 14.6486 16.7072L14.6504 16.639L14.9642 14.8612C14.1844 14.7668 13.4269 14.4248 12.8191 13.8363L12.7754 13.7932L9.52478 10.5426C9.32375 10.3416 9.32375 10.0156 9.52478 9.81461C9.71912 9.62028 10.0302 9.6138 10.2323 9.79518L10.2528 9.81461L13.5034 13.0652C13.9635 13.5253 14.5466 13.7854 15.1434 13.8453L16.5417 5.92227ZM17.0264 9.10014L16.2081 13.7368C16.5984 13.6141 16.9648 13.3988 17.2729 13.0907C18.2944 12.0692 18.2964 10.4074 17.282 9.35635L17.2474 9.32116L17.0264 9.10014ZM9.94232 2.02956C7.93079 2.02956 6.05766 2.345 4.70709 2.88273L4.58604 2.93209C3.53715 3.37015 3.02956 3.85899 3.02956 4.16222C3.02956 4.4769 3.57618 4.99144 4.70709 5.44172C6.05766 5.97944 7.93079 6.29488 9.94232 6.29488C11.9539 6.29488 13.827 5.97944 15.1775 5.44172L15.2986 5.39235C16.3475 4.95429 16.8551 4.46546 16.8551 4.16222C16.8551 3.84754 16.3085 3.333 15.1775 2.88273C13.827 2.345 11.9539 2.02956 9.94232 2.02956Z"/>
+        <path :fill="color" d="M9.94232 1C14.3287 1 17.8846 2.41577 17.8846 4.16222C17.8846 4.18679 17.8839 4.21129 17.8825 4.23573L17.8846 4.23576L17.8812 4.25647C17.8747 4.34405 17.8594 4.43074 17.8354 4.51639L17.2448 7.86246L17.9754 8.59315C19.4245 10.0422 19.4378 12.3818 18.0009 13.8187C17.4404 14.3792 16.7425 14.7191 16.0136 14.8391L15.6784 16.7376C15.6578 17.9885 13.0975 19 9.94232 19C6.80603 19 4.25762 18.0006 4.20697 16.7601L4.20649 16.7376L2.04971 4.51801C2.02531 4.43125 2.00973 4.34344 2.00333 4.2547L2 4.23576L2.0021 4.23573C2.0007 4.21129 2 4.18679 2 4.16222C2 2.41577 5.5559 1 9.94232 1ZM16.5417 5.92227C15.1162 6.76791 12.6925 7.32444 9.94232 7.32444C7.19224 7.32444 4.76862 6.76794 3.34307 5.92236L5.07 15.708L5.23576 16.7077L5.24057 16.7148C5.26274 16.7549 5.30682 16.8087 5.37589 16.8715C5.56623 17.0445 5.87973 17.225 6.29249 17.3864C7.23129 17.7535 8.53735 17.9704 9.94232 17.9704C11.3555 17.9704 12.6685 17.7509 13.6079 17.3802C14.0199 17.2176 14.331 17.0363 14.5174 16.8636C14.5757 16.8096 14.6149 16.7629 14.6373 16.7265L14.6486 16.7072C14.6484 16.707 14.6488 16.707 14.6486 16.7072L14.6504 16.639L14.9642 14.8612C14.1844 14.7668 13.4269 14.4248 12.8191 13.8363L12.7754 13.7932L9.52478 10.5426C9.32375 10.3416 9.32375 10.0156 9.52478 9.81461C9.71912 9.62028 10.0302 9.6138 10.2323 9.79518L10.2528 9.81461L13.5034 13.0652C13.9635 13.5253 14.5466 13.7854 15.1434 13.8453L16.5417 5.92227ZM17.0264 9.10014L16.2081 13.7368C16.5984 13.6141 16.9648 13.3988 17.2729 13.0907C18.2944 12.0692 18.2964 10.4074 17.282 9.35635L17.2474 9.32116L17.0264 9.10014ZM9.94232 2.02956C7.93079 2.02956 6.05766 2.345 4.70709 2.88273L4.58604 2.93209C3.53715 3.37015 3.02956 3.85899 3.02956 4.16222C3.02956 4.4769 3.57618 4.99144 4.70709 5.44172C6.05766 5.97944 7.93079 6.29488 9.94232 6.29488C11.9539 6.29488 13.827 5.97944 15.1775 5.44172L15.2986 5.39235C16.3475 4.95429 16.8551 4.46546 16.8551 4.16222C16.8551 3.84754 16.3085 3.333 15.1775 2.88273C13.827 2.345 11.9539 2.02956 9.94232 2.02956Z" />
     </svg>
-
 </template>
 
-<script>
-  export default {
-    props: {
-      color: {
-        type: String,
-        default: 'currentColor'
-      }
-    }
-  }
-</script>
\ No newline at end of file
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+    color: string;
+}>(), {
+    color: 'currentColor',
+});
+</script>
diff --git a/web/satellite/vuetify-poc/src/components/icons/IconDashboard.vue b/web/satellite/vuetify-poc/src/components/icons/IconDashboard.vue
index 2cc0c257a5c7..ac7b3b85e474 100644
--- a/web/satellite/vuetify-poc/src/components/icons/IconDashboard.vue
+++ b/web/satellite/vuetify-poc/src/components/icons/IconDashboard.vue
@@ -4,17 +4,14 @@
 <template>
     <!-- Dashboard Icon -->
     <svg width="18" height="18" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path :fill="color" d="M10 3C14.9697 3 19 6.99704 19 11.9297C19 13.7318 18.4604 15.4552 17.4661 16.9176L17.3197 17.133H2.68034L2.53386 16.9176C1.53963 15.4552 1 13.7318 1 11.9297C1 6.99704 5.03035 3 10 3ZM10 3.98438C5.57218 3.98438 1.98438 7.54253 1.98438 11.9297C1.98438 13.4365 2.40794 14.8797 3.19314 16.1276L3.20669 16.1487H16.7935L16.8069 16.1276C17.5754 14.9062 17.9974 13.4978 18.015 12.0258L18.0156 11.9297C18.0156 7.54253 14.4278 3.98438 10 3.98438ZM14.3021 8.69557C14.3027 8.69619 14.3033 8.69682 14.3039 8.69744C14.4917 8.89459 14.4849 9.20638 14.2887 9.39518L10.3376 13.1983C10.1428 13.3858 9.83289 13.3799 9.64538 13.1851C9.64478 13.1844 9.64419 13.1838 9.64359 13.1832C9.45583 12.986 9.46261 12.6743 9.65876 12.4855L13.6099 8.68235C13.8047 8.49484 14.1146 8.50076 14.3021 8.69557Z"/>
+        <path :fill="color" d="M10 3C14.9697 3 19 6.99704 19 11.9297C19 13.7318 18.4604 15.4552 17.4661 16.9176L17.3197 17.133H2.68034L2.53386 16.9176C1.53963 15.4552 1 13.7318 1 11.9297C1 6.99704 5.03035 3 10 3ZM10 3.98438C5.57218 3.98438 1.98438 7.54253 1.98438 11.9297C1.98438 13.4365 2.40794 14.8797 3.19314 16.1276L3.20669 16.1487H16.7935L16.8069 16.1276C17.5754 14.9062 17.9974 13.4978 18.015 12.0258L18.0156 11.9297C18.0156 7.54253 14.4278 3.98438 10 3.98438ZM14.3021 8.69557C14.3027 8.69619 14.3033 8.69682 14.3039 8.69744C14.4917 8.89459 14.4849 9.20638 14.2887 9.39518L10.3376 13.1983C10.1428 13.3858 9.83289 13.3799 9.64538 13.1851C9.64478 13.1844 9.64419 13.1838 9.64359 13.1832C9.45583 12.986 9.46261 12.6743 9.65876 12.4855L13.6099 8.68235C13.8047 8.49484 14.1146 8.50076 14.3021 8.69557Z" />
     </svg>
 </template>
 
-<script>
-  export default {
-    props: {
-      color: {
-        type: String,
-        default: 'currentColor'
-      }
-    }
-  }
-</script>
\ No newline at end of file
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+    color: string;
+}>(), {
+    color: 'currentColor',
+});
+</script>
diff --git a/web/satellite/vuetify-poc/src/components/icons/IconDocs.vue b/web/satellite/vuetify-poc/src/components/icons/IconDocs.vue
index 53fe3ba17bd4..7a4042348a9c 100644
--- a/web/satellite/vuetify-poc/src/components/icons/IconDocs.vue
+++ b/web/satellite/vuetify-poc/src/components/icons/IconDocs.vue
@@ -4,18 +4,14 @@
 <template>
     <!-- Docs Icon -->
     <svg width="18" height="18" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path :fill="color" d="M15.5038 3.5L15.6357 3.50052C16.7522 3.50953 17.1768 3.63538 17.6048 3.86427C18.0492 4.10196 18.398 4.45077 18.6357 4.89521L18.6622 4.94557C18.8785 5.3658 18.9955 5.80899 19 6.92946V12.5492C19 13.765 18.8734 14.2058 18.6357 14.6502C18.398 15.0947 18.0492 15.4435 17.6048 15.6812L17.5544 15.7076C17.1342 15.924 16.691 16.0409 15.5705 16.0453L4.49621 16.0455C3.2805 16.0455 2.83965 15.9189 2.39521 15.6812C1.95077 15.4435 1.60196 15.0947 1.36427 14.6502L1.33832 14.6008C1.12163 14.1803 1.00455 13.7373 1 12.616V6.99621C1 5.7805 1.12658 5.33965 1.36427 4.89521C1.60196 4.45077 1.95077 4.10196 2.39521 3.86427L2.44462 3.83832C2.86513 3.62163 3.30814 3.50455 4.42946 3.50013L15.5038 3.5ZM9.45455 4.45455H4.49621C3.53192 4.45455 3.19328 4.51994 2.84537 4.706C2.56728 4.85473 2.35473 5.06728 2.206 5.34537L2.1829 5.38979C2.02572 5.701 1.96302 6.0264 1.95536 6.81904L1.95455 6.99621V12.5492C1.95455 13.5135 2.01994 13.8522 2.206 14.2001C2.35473 14.4782 2.56728 14.6907 2.84537 14.8395L2.88979 14.8626C3.201 15.0197 3.5264 15.0824 4.31903 15.0901L4.4962 15.0909H9.45455V4.45455ZM15.5645 4.45455H10.4091V15.0908L15.5668 15.0908L15.7428 15.0892C16.5293 15.078 16.836 15.0098 17.1546 14.8395C17.4327 14.6907 17.6453 14.4782 17.794 14.2001L17.8171 14.1557C17.9743 13.8445 18.037 13.5191 18.0446 12.7264L18.0455 12.5493V6.93323L18.0438 6.75718C18.0325 5.97074 17.9644 5.66396 17.794 5.34537C17.6453 5.06728 17.4327 4.85473 17.1546 4.706L17.1102 4.6829C16.7842 4.51824 16.4426 4.45726 15.5645 4.45455ZM7.34091 11.75C7.6045 11.75 7.81818 11.9637 7.81818 12.2273C7.81818 12.4821 7.61851 12.6902 7.3671 12.7038L7.34091 12.7045H4.20455C3.94096 12.7045 3.72727 12.4909 3.72727 12.2273C3.72727 11.9725 3.92695 11.7643 4.17836 11.7507L4.20455 11.75H7.34091ZM14.9773 11.75C15.2409 11.75 15.4545 11.9637 15.4545 12.2273C15.4545 12.4821 15.2549 12.6902 15.0035 12.7038L14.9773 12.7045H12.5909C12.3273 12.7045 12.1136 12.4909 12.1136 12.2273C12.1136 11.9725 12.3133 11.7643 12.5647 11.7507L12.5909 11.75H14.9773ZM7.34091 9.29545C7.6045 9.29545 7.81818 9.50914 7.81818 9.77273C7.81818 10.0275 7.61851 10.2357 7.3671 10.2493L7.34091 10.25H4.20455C3.94096 10.25 3.72727 10.0363 3.72727 9.77273C3.72727 9.51792 3.92695 9.30976 4.17836 9.29616L4.20455 9.29545H7.34091ZM15.7273 9.29545C15.9909 9.29545 16.2045 9.50914 16.2045 9.77273C16.2045 10.0275 16.0049 10.2357 15.7535 10.2493L15.7273 10.25H12.5909C12.3273 10.25 12.1136 10.0363 12.1136 9.77273C12.1136 9.51792 12.3133 9.30976 12.5647 9.29616L12.5909 9.29545H15.7273ZM7.34091 6.77273C7.6045 6.77273 7.81818 6.98641 7.81818 7.25C7.81818 7.5048 7.61851 7.71297 7.3671 7.72657L7.34091 7.72727H4.20455C3.94096 7.72727 3.72727 7.51359 3.72727 7.25C3.72727 6.9952 3.92695 6.78703 4.17836 6.77343L4.20455 6.77273H7.34091ZM15.7273 6.77273C15.9909 6.77273 16.2045 6.98641 16.2045 7.25C16.2045 7.5048 16.0049 7.71297 15.7535 7.72657L15.7273 7.72727H12.5909C12.3273 7.72727 12.1136 7.51359 12.1136 7.25C12.1136 6.9952 12.3133 6.78703 12.5647 6.77343L12.5909 6.77273H15.7273Z"/>
+        <path :fill="color" d="M15.5038 3.5L15.6357 3.50052C16.7522 3.50953 17.1768 3.63538 17.6048 3.86427C18.0492 4.10196 18.398 4.45077 18.6357 4.89521L18.6622 4.94557C18.8785 5.3658 18.9955 5.80899 19 6.92946V12.5492C19 13.765 18.8734 14.2058 18.6357 14.6502C18.398 15.0947 18.0492 15.4435 17.6048 15.6812L17.5544 15.7076C17.1342 15.924 16.691 16.0409 15.5705 16.0453L4.49621 16.0455C3.2805 16.0455 2.83965 15.9189 2.39521 15.6812C1.95077 15.4435 1.60196 15.0947 1.36427 14.6502L1.33832 14.6008C1.12163 14.1803 1.00455 13.7373 1 12.616V6.99621C1 5.7805 1.12658 5.33965 1.36427 4.89521C1.60196 4.45077 1.95077 4.10196 2.39521 3.86427L2.44462 3.83832C2.86513 3.62163 3.30814 3.50455 4.42946 3.50013L15.5038 3.5ZM9.45455 4.45455H4.49621C3.53192 4.45455 3.19328 4.51994 2.84537 4.706C2.56728 4.85473 2.35473 5.06728 2.206 5.34537L2.1829 5.38979C2.02572 5.701 1.96302 6.0264 1.95536 6.81904L1.95455 6.99621V12.5492C1.95455 13.5135 2.01994 13.8522 2.206 14.2001C2.35473 14.4782 2.56728 14.6907 2.84537 14.8395L2.88979 14.8626C3.201 15.0197 3.5264 15.0824 4.31903 15.0901L4.4962 15.0909H9.45455V4.45455ZM15.5645 4.45455H10.4091V15.0908L15.5668 15.0908L15.7428 15.0892C16.5293 15.078 16.836 15.0098 17.1546 14.8395C17.4327 14.6907 17.6453 14.4782 17.794 14.2001L17.8171 14.1557C17.9743 13.8445 18.037 13.5191 18.0446 12.7264L18.0455 12.5493V6.93323L18.0438 6.75718C18.0325 5.97074 17.9644 5.66396 17.794 5.34537C17.6453 5.06728 17.4327 4.85473 17.1546 4.706L17.1102 4.6829C16.7842 4.51824 16.4426 4.45726 15.5645 4.45455ZM7.34091 11.75C7.6045 11.75 7.81818 11.9637 7.81818 12.2273C7.81818 12.4821 7.61851 12.6902 7.3671 12.7038L7.34091 12.7045H4.20455C3.94096 12.7045 3.72727 12.4909 3.72727 12.2273C3.72727 11.9725 3.92695 11.7643 4.17836 11.7507L4.20455 11.75H7.34091ZM14.9773 11.75C15.2409 11.75 15.4545 11.9637 15.4545 12.2273C15.4545 12.4821 15.2549 12.6902 15.0035 12.7038L14.9773 12.7045H12.5909C12.3273 12.7045 12.1136 12.4909 12.1136 12.2273C12.1136 11.9725 12.3133 11.7643 12.5647 11.7507L12.5909 11.75H14.9773ZM7.34091 9.29545C7.6045 9.29545 7.81818 9.50914 7.81818 9.77273C7.81818 10.0275 7.61851 10.2357 7.3671 10.2493L7.34091 10.25H4.20455C3.94096 10.25 3.72727 10.0363 3.72727 9.77273C3.72727 9.51792 3.92695 9.30976 4.17836 9.29616L4.20455 9.29545H7.34091ZM15.7273 9.29545C15.9909 9.29545 16.2045 9.50914 16.2045 9.77273C16.2045 10.0275 16.0049 10.2357 15.7535 10.2493L15.7273 10.25H12.5909C12.3273 10.25 12.1136 10.0363 12.1136 9.77273C12.1136 9.51792 12.3133 9.30976 12.5647 9.29616L12.5909 9.29545H15.7273ZM7.34091 6.77273C7.6045 6.77273 7.81818 6.98641 7.81818 7.25C7.81818 7.5048 7.61851 7.71297 7.3671 7.72657L7.34091 7.72727H4.20455C3.94096 7.72727 3.72727 7.51359 3.72727 7.25C3.72727 6.9952 3.92695 6.78703 4.17836 6.77343L4.20455 6.77273H7.34091ZM15.7273 6.77273C15.9909 6.77273 16.2045 6.98641 16.2045 7.25C16.2045 7.5048 16.0049 7.71297 15.7535 7.72657L15.7273 7.72727H12.5909C12.3273 7.72727 12.1136 7.51359 12.1136 7.25C12.1136 6.9952 12.3133 6.78703 12.5647 6.77343L12.5909 6.77273H15.7273Z" />
     </svg>
-
 </template>
 
-<script>
-  export default {
-    props: {
-      color: {
-        type: String,
-        default: 'currentColor'
-      }
-    }
-  }
-</script>
\ No newline at end of file
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+    color: string;
+}>(), {
+    color: 'currentColor',
+});
+</script>
diff --git a/web/satellite/vuetify-poc/src/components/icons/IconFolder.vue b/web/satellite/vuetify-poc/src/components/icons/IconFolder.vue
index 8897bff77ab6..c6f52ed548d2 100644
--- a/web/satellite/vuetify-poc/src/components/icons/IconFolder.vue
+++ b/web/satellite/vuetify-poc/src/components/icons/IconFolder.vue
@@ -4,17 +4,14 @@
 <template>
     <!-- Folder Icon -->
     <svg width="16" height="16" viewBox="0 0 14 14" fill="none" class="mr-2" xmlns="http://www.w3.org/2000/svg">
-      <path :fill="color" d="M5.51579 1.42995C5.64791 1.45467 5.76533 1.49571 5.88408 1.55868L5.92177 1.57924C6.02581 1.63776 6.12977 1.71218 6.37025 1.90894L8.02722 3.26464H10.4959C11.4707 3.26464 11.8242 3.36613 12.1805 3.55672C12.5369 3.74731 12.8166 4.02698 13.0071 4.38335L13.0276 4.42224C13.205 4.76624 13.2992 5.12863 13.2992 6.06796V9.71578C13.2992 10.8762 13.1784 11.297 12.9515 11.7213C12.7246 12.1455 12.3917 12.4785 11.9674 12.7054L11.925 12.7277L11.8831 12.749C11.4913 12.9442 11.061 13.0493 10.0184 13.0531H4.03651C2.87606 13.0531 2.45525 12.9322 2.03101 12.7054C1.60677 12.4785 1.27382 12.1455 1.04693 11.7213L1.0246 11.6788C0.815788 11.2752 0.703142 10.8524 0.699219 9.77319V3.81887C0.699219 3.23054 0.79403 2.84079 0.972671 2.50309C1.15131 2.16538 1.41378 1.89942 1.7491 1.71634C2.08442 1.53326 2.47289 1.43332 3.06116 1.42555L4.98843 1.40029L5.08663 1.3999C5.30902 1.40021 5.40783 1.40975 5.51579 1.42995ZM6.2012 5.5061C5.96768 5.68269 5.68514 5.78176 5.39314 5.79004L5.35327 5.79061H2.65841C2.36799 5.79061 2.09238 5.72723 1.84465 5.61354V9.76913L1.84581 9.91L1.84722 10.0035C1.85958 10.67 1.91799 10.9211 2.05701 11.1811C2.17714 11.4057 2.34658 11.5751 2.57121 11.6953L2.60382 11.7123L2.63876 11.7296C2.89018 11.8499 3.17013 11.8995 3.84943 11.9067L4.03651 11.9076L10.0578 11.9074C10.8683 11.9034 11.1446 11.8464 11.4272 11.6953C11.6519 11.5751 11.8213 11.4057 11.9414 11.1811L11.9585 11.1485L11.9757 11.1135C12.0961 10.8621 12.1457 10.5822 12.1528 9.90286L12.1538 9.71578V6.06796C12.1538 5.35216 12.1128 5.13991 11.9971 4.92354C11.9132 4.76679 11.7971 4.65063 11.6403 4.5668L11.6133 4.55272C11.4099 4.45002 11.1916 4.41176 10.54 4.41015L7.65046 4.41005L6.2012 5.5061ZM5.03525 2.54534L4.9324 2.54642L3.07627 2.57091L2.99301 2.57277C2.65746 2.58357 2.46155 2.63242 2.29802 2.72171C2.15997 2.79708 2.05873 2.89966 1.98519 3.03869C1.89614 3.20703 1.84979 3.40862 1.84507 3.75802C1.84775 3.77664 1.84942 3.79537 1.85017 3.81433L1.85063 3.83737C1.85063 4.27492 2.19851 4.63121 2.63277 4.64475L2.65841 4.64515H5.35327C5.40287 4.64515 5.45128 4.63099 5.49289 4.60455L5.51029 4.59247L6.7215 3.67643L5.58338 2.74533C5.44557 2.63356 5.39663 2.59821 5.35781 2.57632L5.34742 2.57064C5.33097 2.56192 5.32347 2.5593 5.30517 2.55587L5.28102 2.55202L5.26452 2.55013C5.22336 2.54607 5.16144 2.54445 5.03525 2.54534Z"/>
+        <path :fill="color" d="M5.51579 1.42995C5.64791 1.45467 5.76533 1.49571 5.88408 1.55868L5.92177 1.57924C6.02581 1.63776 6.12977 1.71218 6.37025 1.90894L8.02722 3.26464H10.4959C11.4707 3.26464 11.8242 3.36613 12.1805 3.55672C12.5369 3.74731 12.8166 4.02698 13.0071 4.38335L13.0276 4.42224C13.205 4.76624 13.2992 5.12863 13.2992 6.06796V9.71578C13.2992 10.8762 13.1784 11.297 12.9515 11.7213C12.7246 12.1455 12.3917 12.4785 11.9674 12.7054L11.925 12.7277L11.8831 12.749C11.4913 12.9442 11.061 13.0493 10.0184 13.0531H4.03651C2.87606 13.0531 2.45525 12.9322 2.03101 12.7054C1.60677 12.4785 1.27382 12.1455 1.04693 11.7213L1.0246 11.6788C0.815788 11.2752 0.703142 10.8524 0.699219 9.77319V3.81887C0.699219 3.23054 0.79403 2.84079 0.972671 2.50309C1.15131 2.16538 1.41378 1.89942 1.7491 1.71634C2.08442 1.53326 2.47289 1.43332 3.06116 1.42555L4.98843 1.40029L5.08663 1.3999C5.30902 1.40021 5.40783 1.40975 5.51579 1.42995ZM6.2012 5.5061C5.96768 5.68269 5.68514 5.78176 5.39314 5.79004L5.35327 5.79061H2.65841C2.36799 5.79061 2.09238 5.72723 1.84465 5.61354V9.76913L1.84581 9.91L1.84722 10.0035C1.85958 10.67 1.91799 10.9211 2.05701 11.1811C2.17714 11.4057 2.34658 11.5751 2.57121 11.6953L2.60382 11.7123L2.63876 11.7296C2.89018 11.8499 3.17013 11.8995 3.84943 11.9067L4.03651 11.9076L10.0578 11.9074C10.8683 11.9034 11.1446 11.8464 11.4272 11.6953C11.6519 11.5751 11.8213 11.4057 11.9414 11.1811L11.9585 11.1485L11.9757 11.1135C12.0961 10.8621 12.1457 10.5822 12.1528 9.90286L12.1538 9.71578V6.06796C12.1538 5.35216 12.1128 5.13991 11.9971 4.92354C11.9132 4.76679 11.7971 4.65063 11.6403 4.5668L11.6133 4.55272C11.4099 4.45002 11.1916 4.41176 10.54 4.41015L7.65046 4.41005L6.2012 5.5061ZM5.03525 2.54534L4.9324 2.54642L3.07627 2.57091L2.99301 2.57277C2.65746 2.58357 2.46155 2.63242 2.29802 2.72171C2.15997 2.79708 2.05873 2.89966 1.98519 3.03869C1.89614 3.20703 1.84979 3.40862 1.84507 3.75802C1.84775 3.77664 1.84942 3.79537 1.85017 3.81433L1.85063 3.83737C1.85063 4.27492 2.19851 4.63121 2.63277 4.64475L2.65841 4.64515H5.35327C5.40287 4.64515 5.45128 4.63099 5.49289 4.60455L5.51029 4.59247L6.7215 3.67643L5.58338 2.74533C5.44557 2.63356 5.39663 2.59821 5.35781 2.57632L5.34742 2.57064C5.33097 2.56192 5.32347 2.5593 5.30517 2.55587L5.28102 2.55202L5.26452 2.55013C5.22336 2.54607 5.16144 2.54445 5.03525 2.54534Z" />
     </svg>
 </template>
 
-<script>
-  export default {
-    props: {
-      color: {
-        type: String,
-        default: 'currentColor'
-      }
-    }
-  }
-</script>
\ No newline at end of file
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+    color: string;
+}>(), {
+    color: 'currentColor',
+});
+</script>
diff --git a/web/satellite/vuetify-poc/src/components/icons/IconForum.vue b/web/satellite/vuetify-poc/src/components/icons/IconForum.vue
index adfbd73903b5..2ee18d89bad1 100644
--- a/web/satellite/vuetify-poc/src/components/icons/IconForum.vue
+++ b/web/satellite/vuetify-poc/src/components/icons/IconForum.vue
@@ -4,17 +4,14 @@
 <template>
     <!-- Forum Icon -->
     <svg width="18" height="18" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path :fill="color" fill-rule="evenodd" clip-rule="evenodd" d="M4.7112 2.63846L4.63903 2.67652C3.79151 3.13007 3.12923 3.79254 2.67588 4.64023C2.22856 5.47665 1.96883 6.35545 1.96883 8.60961V17.1858L6.55054 14.1193H11.8132C13.3736 14.1193 14.3707 13.8644 15.2162 13.4123C16.0643 12.9587 16.727 12.296 17.1806 11.4479C17.6327 10.6024 17.8876 9.60524 17.8876 8.04492V8.04321C17.8876 6.48289 17.6327 5.48573 17.1806 4.64023C16.727 3.79214 16.0643 3.12944 15.2162 2.67588C14.3707 2.2237 13.3736 1.96883 11.8132 1.96883H8.60961C6.41451 1.96883 5.52547 2.21533 4.7112 2.63846ZM4.26303 1.77952C5.26909 1.25646 6.33187 1 8.60961 1H11.8132C13.4901 1 14.6536 1.2763 15.6731 1.82155C16.69 2.36541 17.491 3.1664 18.0349 4.18334C18.5801 5.20287 18.8564 6.36636 18.8564 8.04321V8.04492C18.8564 9.72177 18.5801 10.8853 18.0349 11.9048C17.491 12.9217 16.69 13.7227 15.6731 14.2666C14.6536 14.8118 13.4901 15.0881 11.8132 15.0881H6.84484L1 19V8.60961C1 6.26723 1.27144 5.21195 1.82155 4.18334C2.36541 3.1664 3.1664 2.36541 4.18334 1.82155L4.18456 1.82089L4.26176 1.78018L4.26303 1.77952Z"/>
+        <path :fill="color" fill-rule="evenodd" clip-rule="evenodd" d="M4.7112 2.63846L4.63903 2.67652C3.79151 3.13007 3.12923 3.79254 2.67588 4.64023C2.22856 5.47665 1.96883 6.35545 1.96883 8.60961V17.1858L6.55054 14.1193H11.8132C13.3736 14.1193 14.3707 13.8644 15.2162 13.4123C16.0643 12.9587 16.727 12.296 17.1806 11.4479C17.6327 10.6024 17.8876 9.60524 17.8876 8.04492V8.04321C17.8876 6.48289 17.6327 5.48573 17.1806 4.64023C16.727 3.79214 16.0643 3.12944 15.2162 2.67588C14.3707 2.2237 13.3736 1.96883 11.8132 1.96883H8.60961C6.41451 1.96883 5.52547 2.21533 4.7112 2.63846ZM4.26303 1.77952C5.26909 1.25646 6.33187 1 8.60961 1H11.8132C13.4901 1 14.6536 1.2763 15.6731 1.82155C16.69 2.36541 17.491 3.1664 18.0349 4.18334C18.5801 5.20287 18.8564 6.36636 18.8564 8.04321V8.04492C18.8564 9.72177 18.5801 10.8853 18.0349 11.9048C17.491 12.9217 16.69 13.7227 15.6731 14.2666C14.6536 14.8118 13.4901 15.0881 11.8132 15.0881H6.84484L1 19V8.60961C1 6.26723 1.27144 5.21195 1.82155 4.18334C2.36541 3.1664 3.1664 2.36541 4.18334 1.82155L4.18456 1.82089L4.26176 1.78018L4.26303 1.77952Z" />
     </svg>
 </template>
 
-<script>
-  export default {
-    props: {
-      color: {
-        type: String,
-        default: 'currentColor'
-      }
-    }
-  }
-</script>
\ No newline at end of file
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+    color: string;
+}>(), {
+    color: 'currentColor',
+});
+</script>
diff --git a/web/satellite/vuetify-poc/src/components/icons/IconNew.vue b/web/satellite/vuetify-poc/src/components/icons/IconNew.vue
index 8b59160abc64..6b324e706abc 100644
--- a/web/satellite/vuetify-poc/src/components/icons/IconNew.vue
+++ b/web/satellite/vuetify-poc/src/components/icons/IconNew.vue
@@ -4,18 +4,14 @@
 <template>
     <!-- New Icon -->
     <svg width="18" height="18" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path :fill="color" d="M10 1C14.9706 1 19 5.02944 19 10C19 14.9706 14.9706 19 10 19C5.02944 19 1 14.9706 1 10C1 5.02944 5.02944 1 10 1ZM10 1.99213C5.57737 1.99213 1.99213 5.57737 1.99213 10C1.99213 14.4226 5.57737 18.0079 10 18.0079C14.4226 18.0079 18.0079 14.4226 18.0079 10C18.0079 5.57737 14.4226 1.99213 10 1.99213ZM10 6.38583C10.2648 6.38583 10.4812 6.59336 10.4953 6.85467L10.4961 6.88189V9.5038L13.1181 9.50394C13.3921 9.50394 13.6142 9.72603 13.6142 10C13.6142 10.2648 13.4066 10.4812 13.1453 10.4953L13.1181 10.4961L10.4961 10.4959V13.1181C10.4961 13.3921 10.274 13.6142 10 13.6142C9.73516 13.6142 9.5188 13.4066 9.50467 13.1453L9.50394 13.1181V10.4959L6.88189 10.4961C6.60792 10.4961 6.38583 10.274 6.38583 10C6.38583 9.73516 6.59336 9.5188 6.85467 9.50467L6.88189 9.50394L9.50394 9.5038V6.88189C9.50394 6.60792 9.72603 6.38583 10 6.38583Z"/>
+        <path :fill="color" d="M10 1C14.9706 1 19 5.02944 19 10C19 14.9706 14.9706 19 10 19C5.02944 19 1 14.9706 1 10C1 5.02944 5.02944 1 10 1ZM10 1.99213C5.57737 1.99213 1.99213 5.57737 1.99213 10C1.99213 14.4226 5.57737 18.0079 10 18.0079C14.4226 18.0079 18.0079 14.4226 18.0079 10C18.0079 5.57737 14.4226 1.99213 10 1.99213ZM10 6.38583C10.2648 6.38583 10.4812 6.59336 10.4953 6.85467L10.4961 6.88189V9.5038L13.1181 9.50394C13.3921 9.50394 13.6142 9.72603 13.6142 10C13.6142 10.2648 13.4066 10.4812 13.1453 10.4953L13.1181 10.4961L10.4961 10.4959V13.1181C10.4961 13.3921 10.274 13.6142 10 13.6142C9.73516 13.6142 9.5188 13.4066 9.50467 13.1453L9.50394 13.1181V10.4959L6.88189 10.4961C6.60792 10.4961 6.38583 10.274 6.38583 10C6.38583 9.73516 6.59336 9.5188 6.85467 9.50467L6.88189 9.50394L9.50394 9.5038V6.88189C9.50394 6.60792 9.72603 6.38583 10 6.38583Z" />
     </svg>
-
 </template>
 
-<script>
-  export default {
-    props: {
-      color: {
-        type: String,
-        default: 'currentColor'
-      }
-    }
-  }
-</script>
\ No newline at end of file
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+    color: string;
+}>(), {
+    color: 'currentColor',
+});
+</script>
diff --git a/web/satellite/vuetify-poc/src/components/icons/IconPassphrase.vue b/web/satellite/vuetify-poc/src/components/icons/IconPassphrase.vue
index f980887007e4..3ace99a1a151 100644
--- a/web/satellite/vuetify-poc/src/components/icons/IconPassphrase.vue
+++ b/web/satellite/vuetify-poc/src/components/icons/IconPassphrase.vue
@@ -4,18 +4,14 @@
 <template>
     <!-- Passphrase Icon -->
     <svg width="18" height="18" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path :fill="color" d="M9.80992 1C13.0962 1 15.7603 3.66409 15.7603 6.95041L15.7604 8.74016C15.945 8.79445 16.0973 8.86276 16.25 8.94443C16.6864 9.1778 17.0288 9.52026 17.2622 9.95662L17.2897 10.009C17.5053 10.4288 17.6198 10.8736 17.6198 12.0194V15.5674C17.6198 16.761 17.4956 17.1938 17.2622 17.6302C17.0288 18.0665 16.6864 18.409 16.25 18.6424L16.1976 18.6698C15.7778 18.8855 15.3331 19 14.1872 19H5.43264C4.23904 19 3.80621 18.8757 3.36984 18.6424C2.93348 18.409 2.59102 18.0665 2.35765 17.6302L2.33017 17.5778C2.11454 17.158 2 16.7132 2 15.5674V12.0194L2.0006 11.8798C2.01012 10.7912 2.13361 10.3755 2.35765 9.95662C2.59102 9.52026 2.93348 9.1778 3.36984 8.94443L3.42224 8.91695C3.5578 8.84731 3.69597 8.78822 3.8595 8.74013L3.8595 6.95041C3.8595 3.66409 6.52359 1 9.80992 1ZM14.2497 9.62819L5.43264 9.6281C4.50161 9.6281 4.18536 9.68917 3.86093 9.86268C3.60604 9.999 3.41222 10.1928 3.2759 10.4477L3.25293 10.492C3.10811 10.78 3.04978 11.0839 3.04219 11.8374L3.04132 12.0194V15.5674C3.04132 16.4984 3.10239 16.8146 3.2759 17.1391C3.41222 17.394 3.60604 17.5878 3.86093 17.7241L3.90518 17.7471C4.208 17.8993 4.52829 17.956 5.37011 17.9586H14.2497L14.4303 17.9571C15.1768 17.9464 15.4645 17.8816 15.7589 17.7241C16.0138 17.5878 16.2076 17.394 16.3439 17.1391L16.3669 17.0948C16.5192 16.792 16.5758 16.4717 16.5784 15.6299V11.9569L16.5769 11.7763C16.5662 11.0298 16.5014 10.7421 16.3439 10.4477C16.2076 10.1928 16.0138 9.999 15.7589 9.86268L15.7147 9.83971C15.4118 9.68746 15.0915 9.63081 14.2497 9.62819ZM9.80992 12.157C10.4261 12.157 10.9256 12.6565 10.9256 13.2727C10.9256 13.7008 10.6845 14.0726 10.3307 14.2597L10.3306 15.281C10.3306 15.5685 10.0975 15.8017 9.80992 15.8017C9.53195 15.8017 9.30486 15.5838 9.29003 15.3096L9.28926 15.281L9.28925 14.2597C8.93537 14.0727 8.69421 13.7009 8.69421 13.2727C8.69421 12.6565 9.19373 12.157 9.80992 12.157ZM9.80992 2.04132C7.12581 2.04132 4.94484 4.19546 4.90148 6.86923L4.90083 6.95041V8.58678H14.719V6.95041C14.719 4.26631 12.5649 2.08533 9.8911 2.04198L9.80992 2.04132Z"/>
+        <path :fill="color" d="M9.80992 1C13.0962 1 15.7603 3.66409 15.7603 6.95041L15.7604 8.74016C15.945 8.79445 16.0973 8.86276 16.25 8.94443C16.6864 9.1778 17.0288 9.52026 17.2622 9.95662L17.2897 10.009C17.5053 10.4288 17.6198 10.8736 17.6198 12.0194V15.5674C17.6198 16.761 17.4956 17.1938 17.2622 17.6302C17.0288 18.0665 16.6864 18.409 16.25 18.6424L16.1976 18.6698C15.7778 18.8855 15.3331 19 14.1872 19H5.43264C4.23904 19 3.80621 18.8757 3.36984 18.6424C2.93348 18.409 2.59102 18.0665 2.35765 17.6302L2.33017 17.5778C2.11454 17.158 2 16.7132 2 15.5674V12.0194L2.0006 11.8798C2.01012 10.7912 2.13361 10.3755 2.35765 9.95662C2.59102 9.52026 2.93348 9.1778 3.36984 8.94443L3.42224 8.91695C3.5578 8.84731 3.69597 8.78822 3.8595 8.74013L3.8595 6.95041C3.8595 3.66409 6.52359 1 9.80992 1ZM14.2497 9.62819L5.43264 9.6281C4.50161 9.6281 4.18536 9.68917 3.86093 9.86268C3.60604 9.999 3.41222 10.1928 3.2759 10.4477L3.25293 10.492C3.10811 10.78 3.04978 11.0839 3.04219 11.8374L3.04132 12.0194V15.5674C3.04132 16.4984 3.10239 16.8146 3.2759 17.1391C3.41222 17.394 3.60604 17.5878 3.86093 17.7241L3.90518 17.7471C4.208 17.8993 4.52829 17.956 5.37011 17.9586H14.2497L14.4303 17.9571C15.1768 17.9464 15.4645 17.8816 15.7589 17.7241C16.0138 17.5878 16.2076 17.394 16.3439 17.1391L16.3669 17.0948C16.5192 16.792 16.5758 16.4717 16.5784 15.6299V11.9569L16.5769 11.7763C16.5662 11.0298 16.5014 10.7421 16.3439 10.4477C16.2076 10.1928 16.0138 9.999 15.7589 9.86268L15.7147 9.83971C15.4118 9.68746 15.0915 9.63081 14.2497 9.62819ZM9.80992 12.157C10.4261 12.157 10.9256 12.6565 10.9256 13.2727C10.9256 13.7008 10.6845 14.0726 10.3307 14.2597L10.3306 15.281C10.3306 15.5685 10.0975 15.8017 9.80992 15.8017C9.53195 15.8017 9.30486 15.5838 9.29003 15.3096L9.28926 15.281L9.28925 14.2597C8.93537 14.0727 8.69421 13.7009 8.69421 13.2727C8.69421 12.6565 9.19373 12.157 9.80992 12.157ZM9.80992 2.04132C7.12581 2.04132 4.94484 4.19546 4.90148 6.86923L4.90083 6.95041V8.58678H14.719V6.95041C14.719 4.26631 12.5649 2.08533 9.8911 2.04198L9.80992 2.04132Z" />
     </svg>
-
 </template>
 
-<script>
-  export default {
-    props: {
-      color: {
-        type: String,
-        default: 'currentColor'
-      }
-    }
-  }
-</script>
\ No newline at end of file
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+    color: string;
+}>(), {
+    color: 'currentColor',
+});
+</script>
diff --git a/web/satellite/vuetify-poc/src/components/icons/IconProject.vue b/web/satellite/vuetify-poc/src/components/icons/IconProject.vue
index 5025c13d6156..e081608f4cbd 100644
--- a/web/satellite/vuetify-poc/src/components/icons/IconProject.vue
+++ b/web/satellite/vuetify-poc/src/components/icons/IconProject.vue
@@ -4,17 +4,14 @@
 <template>
     <!-- Project Icon -->
     <svg width="18" height="18" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path :fill="color" d="M10.0567 1.05318L10.0849 1.06832L17.4768 5.33727C17.6249 5.42279 17.7084 5.5642 17.7274 5.71277L17.7301 5.73906L17.7314 5.76543L17.7316 14.2407C17.7316 14.4124 17.6452 14.5718 17.5032 14.6657L17.476 14.6826L10.084 18.9322C9.93533 19.0176 9.75438 19.0223 9.60224 18.9463L9.57407 18.9311L2.25387 14.6815C2.10601 14.5956 2.01167 14.4418 2.00108 14.2726L2 14.2407V5.77863L2.00023 5.75974C1.99504 5.58748 2.07759 5.41781 2.22993 5.31793L2.25457 5.30275L9.57482 1.06849C9.71403 0.987969 9.88182 0.978444 10.0278 1.03993L10.0567 1.05318ZM16.7123 6.6615L10.3397 10.3418V17.6094L16.7123 13.9458V6.6615ZM3.01944 6.66573V13.947L9.32037 17.605V10.3402L3.01944 6.66573ZM9.83034 2.09828L3.49475 5.76287L9.83122 9.45833L16.2029 5.7786L9.83034 2.09828Z"/>
+        <path :fill="color" d="M10.0567 1.05318L10.0849 1.06832L17.4768 5.33727C17.6249 5.42279 17.7084 5.5642 17.7274 5.71277L17.7301 5.73906L17.7314 5.76543L17.7316 14.2407C17.7316 14.4124 17.6452 14.5718 17.5032 14.6657L17.476 14.6826L10.084 18.9322C9.93533 19.0176 9.75438 19.0223 9.60224 18.9463L9.57407 18.9311L2.25387 14.6815C2.10601 14.5956 2.01167 14.4418 2.00108 14.2726L2 14.2407V5.77863L2.00023 5.75974C1.99504 5.58748 2.07759 5.41781 2.22993 5.31793L2.25457 5.30275L9.57482 1.06849C9.71403 0.987969 9.88182 0.978444 10.0278 1.03993L10.0567 1.05318ZM16.7123 6.6615L10.3397 10.3418V17.6094L16.7123 13.9458V6.6615ZM3.01944 6.66573V13.947L9.32037 17.605V10.3402L3.01944 6.66573ZM9.83034 2.09828L3.49475 5.76287L9.83122 9.45833L16.2029 5.7786L9.83034 2.09828Z" />
     </svg>
 </template>
 
-<script>
-  export default {
-    props: {
-      color: {
-        type: String,
-        default: 'currentColor'
-      }
-    }
-  }
-</script>
\ No newline at end of file
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+    color: string;
+}>(), {
+    color: 'currentColor',
+});
+</script>
diff --git a/web/satellite/vuetify-poc/src/components/icons/IconResources.vue b/web/satellite/vuetify-poc/src/components/icons/IconResources.vue
index 005b2fdd277c..7f8a55b205bc 100644
--- a/web/satellite/vuetify-poc/src/components/icons/IconResources.vue
+++ b/web/satellite/vuetify-poc/src/components/icons/IconResources.vue
@@ -4,17 +4,14 @@
 <template>
     <!-- Resources Icon -->
     <svg width="18" height="18" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path :fill="color" d="M15.2372 1H4.49616C3.11757 1 2 2.11757 2 3.49616V17.8654C2 18.1764 2.12765 18.4737 2.3531 18.6879C2.80739 19.1196 3.52555 19.1012 3.95717 18.6469L9.59251 12.7156C9.59695 12.711 9.60151 12.7064 9.60619 12.702C9.75761 12.5581 9.997 12.5642 10.1409 12.7156L15.7762 18.6469C15.9904 18.8723 16.2878 19 16.5988 19C17.2254 19 17.7334 18.492 17.7334 17.8654V3.49616C17.7334 2.11757 16.6158 1 15.2372 1ZM4.49616 2.05898H15.2372C16.031 2.05898 16.6744 2.70243 16.6744 3.49616V17.8654C16.6744 17.9072 16.6405 17.941 16.5988 17.941C16.578 17.941 16.5582 17.9325 16.5439 17.9175L10.9086 11.9862C10.3619 11.4108 9.4522 11.3875 8.87677 11.9342C8.859 11.9511 8.84167 11.9685 8.82479 11.9862L3.18946 17.9175C3.16068 17.9478 3.1128 17.949 3.08252 17.9202C3.06749 17.9059 3.05898 17.8861 3.05898 17.8654V3.49616C3.05898 2.70243 3.70243 2.05898 4.49616 2.05898Z"/>
+        <path :fill="color" d="M15.2372 1H4.49616C3.11757 1 2 2.11757 2 3.49616V17.8654C2 18.1764 2.12765 18.4737 2.3531 18.6879C2.80739 19.1196 3.52555 19.1012 3.95717 18.6469L9.59251 12.7156C9.59695 12.711 9.60151 12.7064 9.60619 12.702C9.75761 12.5581 9.997 12.5642 10.1409 12.7156L15.7762 18.6469C15.9904 18.8723 16.2878 19 16.5988 19C17.2254 19 17.7334 18.492 17.7334 17.8654V3.49616C17.7334 2.11757 16.6158 1 15.2372 1ZM4.49616 2.05898H15.2372C16.031 2.05898 16.6744 2.70243 16.6744 3.49616V17.8654C16.6744 17.9072 16.6405 17.941 16.5988 17.941C16.578 17.941 16.5582 17.9325 16.5439 17.9175L10.9086 11.9862C10.3619 11.4108 9.4522 11.3875 8.87677 11.9342C8.859 11.9511 8.84167 11.9685 8.82479 11.9862L3.18946 17.9175C3.16068 17.9478 3.1128 17.949 3.08252 17.9202C3.06749 17.9059 3.05898 17.8861 3.05898 17.8654V3.49616C3.05898 2.70243 3.70243 2.05898 4.49616 2.05898Z" />
     </svg>
 </template>
 
-<script>
-  export default {
-    props: {
-      color: {
-        type: String,
-        default: 'currentColor'
-      }
-    }
-  }
-</script>
\ No newline at end of file
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+    color: string;
+}>(), {
+    color: 'currentColor',
+});
+</script>
diff --git a/web/satellite/vuetify-poc/src/components/icons/IconSettings.vue b/web/satellite/vuetify-poc/src/components/icons/IconSettings.vue
index 89ec79e78266..bb465b7d3ede 100644
--- a/web/satellite/vuetify-poc/src/components/icons/IconSettings.vue
+++ b/web/satellite/vuetify-poc/src/components/icons/IconSettings.vue
@@ -4,17 +4,14 @@
 <template>
     <!-- Settings Icon -->
     <svg width="18" height="18" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path :fill="color" d="M11.56 1C12.3815 1 13.0476 1.66599 13.0476 2.48757L13.0475 2.73016C13.0475 3.28183 13.4947 3.72906 14.0464 3.72907C14.2217 3.72907 14.394 3.68292 14.5458 3.59525L14.756 3.47394C15.4675 3.06317 16.3773 3.30695 16.7881 4.01845L18.5732 7.11038C18.9768 7.80939 18.7486 8.69981 18.0657 9.12039L18.0287 9.14245L17.8186 9.26372C17.3646 9.52585 17.209 10.1064 17.4711 10.5605C17.5544 10.7048 17.6743 10.8247 17.8186 10.908L17.9543 10.9863C18.6658 11.3971 18.9096 12.3069 18.4988 13.0185L16.7881 15.9815C16.3845 16.6806 15.4993 16.9282 14.7936 16.5471L14.756 16.526L14.5459 16.4047C14.0681 16.1288 13.4572 16.2925 13.1814 16.7703C13.0937 16.9221 13.0475 17.0944 13.0475 17.2698L13.0475 17.5124C13.0476 18.3201 12.404 18.9774 11.6016 18.9995L11.56 19H7.98971C7.16814 19 6.50212 18.334 6.50207 17.5124L6.50206 17.3986C6.50205 16.888 6.08812 16.4741 5.57753 16.4741C5.41524 16.4741 5.25582 16.5169 5.11528 16.598L5.01682 16.6549C4.31782 17.0585 3.42739 16.8303 3.0068 16.1474L2.98473 16.1104L1.19961 13.0185C0.788862 12.3069 1.03262 11.3972 1.74409 10.9863L1.95426 10.865C2.43201 10.5891 2.59568 9.97821 2.31984 9.50046C2.23216 9.34861 2.10605 9.22252 1.9542 9.13485L1.74414 9.01359C1.04506 8.6101 0.797456 7.72487 1.1785 7.0192L1.19961 6.98155L2.91035 4.01845C3.32115 3.30695 4.23095 3.06317 4.94246 3.47394L5.07809 3.55224C5.53214 3.81438 6.11274 3.65881 6.37488 3.20475C6.45819 3.06045 6.50206 2.89675 6.50206 2.73012L6.50207 2.4876C6.50212 1.66604 7.16814 1 7.98971 1H11.56ZM11.56 2.19008H7.98971C7.83287 2.19008 7.70434 2.31148 7.69297 2.46543L7.69215 2.48763L7.69214 2.73015C7.69213 3.10567 7.59329 3.47457 7.40553 3.79978C6.82308 4.80864 5.54304 5.16365 4.52646 4.60729L4.48306 4.58289L4.34745 4.5046C4.21191 4.42635 4.04039 4.46685 3.9534 4.59381L3.94099 4.61349L2.22567 7.58465C2.15347 7.71836 2.19498 7.88481 2.31889 7.97014L2.33914 7.98292L2.54919 8.10418C2.88197 8.29629 3.15832 8.57262 3.35046 8.9054C3.94656 9.9378 3.60605 11.254 2.59255 11.87L2.54933 11.8956L2.33921 12.0169C2.20365 12.0952 2.15296 12.264 2.2194 12.4028L2.23025 12.4234L4.02177 15.5257L4.03337 15.543C4.11707 15.6574 4.27188 15.6966 4.40057 15.6354L4.42176 15.6242L4.52022 15.5674C4.84167 15.3818 5.20631 15.2841 5.5775 15.2841C6.72978 15.284 7.66683 16.2057 7.69164 17.352L7.69214 17.3986L7.69215 17.5123C7.69216 17.6692 7.81356 17.7977 7.9675 17.8091L7.98971 17.8099H11.5447L11.5711 17.8096L11.5915 17.8083C11.7334 17.7936 11.8457 17.6783 11.8566 17.5352L11.8574 17.5124L11.8574 17.2698C11.8574 16.8855 11.9586 16.508 12.1507 16.1752C12.7468 15.1428 14.0569 14.7797 15.0972 15.3494L15.1409 15.3741L15.3375 15.4875L15.3616 15.501L15.3805 15.5104C15.5101 15.5676 15.6638 15.5241 15.7446 15.4067L15.7574 15.3865L17.4682 12.4234C17.5464 12.2879 17.5059 12.1164 17.379 12.0294L17.3593 12.017L17.2236 11.9386C16.8983 11.7509 16.6282 11.4808 16.4405 11.1555C15.858 10.1467 16.1906 8.86061 17.1808 8.25844L17.2236 8.23306L17.4263 8.1161L17.4446 8.10509L17.4614 8.09381C17.5757 8.01011 17.6149 7.85531 17.5537 7.72661L17.5425 7.70542L15.7574 4.61351C15.6792 4.47797 15.5104 4.42729 15.3716 4.49374L15.351 4.50459L15.1409 4.62589C14.8081 4.81802 14.4306 4.91916 14.0464 4.91915C12.8531 4.91912 11.8829 3.96436 11.8579 2.77695L11.8574 2.72996L11.8575 2.48757C11.8575 2.33074 11.7361 2.20225 11.5822 2.1909L11.56 2.19008ZM9.90209 5.90909C12.1614 5.90909 13.993 7.74065 13.993 10C13.993 12.2593 12.1614 14.0909 9.90209 14.0909C7.64274 14.0909 5.81118 12.2593 5.81118 10C5.81118 7.74065 7.64274 5.90909 9.90209 5.90909ZM9.90209 6.95041C8.21785 6.95041 6.8525 8.31576 6.8525 10C6.8525 11.6842 8.21785 13.0496 9.90209 13.0496C11.5863 13.0496 12.9517 11.6842 12.9517 10C12.9517 8.31576 11.5863 6.95041 9.90209 6.95041Z"/>
+        <path :fill="color" d="M11.56 1C12.3815 1 13.0476 1.66599 13.0476 2.48757L13.0475 2.73016C13.0475 3.28183 13.4947 3.72906 14.0464 3.72907C14.2217 3.72907 14.394 3.68292 14.5458 3.59525L14.756 3.47394C15.4675 3.06317 16.3773 3.30695 16.7881 4.01845L18.5732 7.11038C18.9768 7.80939 18.7486 8.69981 18.0657 9.12039L18.0287 9.14245L17.8186 9.26372C17.3646 9.52585 17.209 10.1064 17.4711 10.5605C17.5544 10.7048 17.6743 10.8247 17.8186 10.908L17.9543 10.9863C18.6658 11.3971 18.9096 12.3069 18.4988 13.0185L16.7881 15.9815C16.3845 16.6806 15.4993 16.9282 14.7936 16.5471L14.756 16.526L14.5459 16.4047C14.0681 16.1288 13.4572 16.2925 13.1814 16.7703C13.0937 16.9221 13.0475 17.0944 13.0475 17.2698L13.0475 17.5124C13.0476 18.3201 12.404 18.9774 11.6016 18.9995L11.56 19H7.98971C7.16814 19 6.50212 18.334 6.50207 17.5124L6.50206 17.3986C6.50205 16.888 6.08812 16.4741 5.57753 16.4741C5.41524 16.4741 5.25582 16.5169 5.11528 16.598L5.01682 16.6549C4.31782 17.0585 3.42739 16.8303 3.0068 16.1474L2.98473 16.1104L1.19961 13.0185C0.788862 12.3069 1.03262 11.3972 1.74409 10.9863L1.95426 10.865C2.43201 10.5891 2.59568 9.97821 2.31984 9.50046C2.23216 9.34861 2.10605 9.22252 1.9542 9.13485L1.74414 9.01359C1.04506 8.6101 0.797456 7.72487 1.1785 7.0192L1.19961 6.98155L2.91035 4.01845C3.32115 3.30695 4.23095 3.06317 4.94246 3.47394L5.07809 3.55224C5.53214 3.81438 6.11274 3.65881 6.37488 3.20475C6.45819 3.06045 6.50206 2.89675 6.50206 2.73012L6.50207 2.4876C6.50212 1.66604 7.16814 1 7.98971 1H11.56ZM11.56 2.19008H7.98971C7.83287 2.19008 7.70434 2.31148 7.69297 2.46543L7.69215 2.48763L7.69214 2.73015C7.69213 3.10567 7.59329 3.47457 7.40553 3.79978C6.82308 4.80864 5.54304 5.16365 4.52646 4.60729L4.48306 4.58289L4.34745 4.5046C4.21191 4.42635 4.04039 4.46685 3.9534 4.59381L3.94099 4.61349L2.22567 7.58465C2.15347 7.71836 2.19498 7.88481 2.31889 7.97014L2.33914 7.98292L2.54919 8.10418C2.88197 8.29629 3.15832 8.57262 3.35046 8.9054C3.94656 9.9378 3.60605 11.254 2.59255 11.87L2.54933 11.8956L2.33921 12.0169C2.20365 12.0952 2.15296 12.264 2.2194 12.4028L2.23025 12.4234L4.02177 15.5257L4.03337 15.543C4.11707 15.6574 4.27188 15.6966 4.40057 15.6354L4.42176 15.6242L4.52022 15.5674C4.84167 15.3818 5.20631 15.2841 5.5775 15.2841C6.72978 15.284 7.66683 16.2057 7.69164 17.352L7.69214 17.3986L7.69215 17.5123C7.69216 17.6692 7.81356 17.7977 7.9675 17.8091L7.98971 17.8099H11.5447L11.5711 17.8096L11.5915 17.8083C11.7334 17.7936 11.8457 17.6783 11.8566 17.5352L11.8574 17.5124L11.8574 17.2698C11.8574 16.8855 11.9586 16.508 12.1507 16.1752C12.7468 15.1428 14.0569 14.7797 15.0972 15.3494L15.1409 15.3741L15.3375 15.4875L15.3616 15.501L15.3805 15.5104C15.5101 15.5676 15.6638 15.5241 15.7446 15.4067L15.7574 15.3865L17.4682 12.4234C17.5464 12.2879 17.5059 12.1164 17.379 12.0294L17.3593 12.017L17.2236 11.9386C16.8983 11.7509 16.6282 11.4808 16.4405 11.1555C15.858 10.1467 16.1906 8.86061 17.1808 8.25844L17.2236 8.23306L17.4263 8.1161L17.4446 8.10509L17.4614 8.09381C17.5757 8.01011 17.6149 7.85531 17.5537 7.72661L17.5425 7.70542L15.7574 4.61351C15.6792 4.47797 15.5104 4.42729 15.3716 4.49374L15.351 4.50459L15.1409 4.62589C14.8081 4.81802 14.4306 4.91916 14.0464 4.91915C12.8531 4.91912 11.8829 3.96436 11.8579 2.77695L11.8574 2.72996L11.8575 2.48757C11.8575 2.33074 11.7361 2.20225 11.5822 2.1909L11.56 2.19008ZM9.90209 5.90909C12.1614 5.90909 13.993 7.74065 13.993 10C13.993 12.2593 12.1614 14.0909 9.90209 14.0909C7.64274 14.0909 5.81118 12.2593 5.81118 10C5.81118 7.74065 7.64274 5.90909 9.90209 5.90909ZM9.90209 6.95041C8.21785 6.95041 6.8525 8.31576 6.8525 10C6.8525 11.6842 8.21785 13.0496 9.90209 13.0496C11.5863 13.0496 12.9517 11.6842 12.9517 10C12.9517 8.31576 11.5863 6.95041 9.90209 6.95041Z" />
     </svg>
 </template>
 
-<script>
-  export default {
-    props: {
-      color: {
-        type: String,
-        default: 'currentColor'
-      }
-    }
-  }
-</script>
\ No newline at end of file
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+    color: string;
+}>(), {
+    color: 'currentColor',
+});
+</script>
diff --git a/web/satellite/vuetify-poc/src/components/icons/IconSupport.vue b/web/satellite/vuetify-poc/src/components/icons/IconSupport.vue
index 3d706190ffaf..f9a0112a5bd5 100644
--- a/web/satellite/vuetify-poc/src/components/icons/IconSupport.vue
+++ b/web/satellite/vuetify-poc/src/components/icons/IconSupport.vue
@@ -4,18 +4,14 @@
 <template>
     <!-- Support Icon -->
     <svg width="18" height="18" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path :fill="color" d="M3 1.79302C3 1.21459 3.59804 0.834834 4.1184 1.07137L4.14619 1.08464L16.8182 7.42064C17.3915 7.70729 17.4017 8.51596 16.8489 8.82126L16.8182 8.83741L4.14619 15.1734C4.10071 15.1962 4.05453 15.2141 4.00811 15.2275L4.008 18.496C4.008 18.7744 3.78235 19 3.504 19C3.23493 19 3.0151 18.7891 3.00075 18.5237L3 18.496V1.79302ZM4.008 2.14235V14.1155L15.9812 8.12901L4.008 2.14235Z"/>
+        <path :fill="color" d="M3 1.79302C3 1.21459 3.59804 0.834834 4.1184 1.07137L4.14619 1.08464L16.8182 7.42064C17.3915 7.70729 17.4017 8.51596 16.8489 8.82126L16.8182 8.83741L4.14619 15.1734C4.10071 15.1962 4.05453 15.2141 4.00811 15.2275L4.008 18.496C4.008 18.7744 3.78235 19 3.504 19C3.23493 19 3.0151 18.7891 3.00075 18.5237L3 18.496V1.79302ZM4.008 2.14235V14.1155L15.9812 8.12901L4.008 2.14235Z" />
     </svg>
-
 </template>
 
-<script>
-  export default {
-    props: {
-      color: {
-        type: String,
-        default: 'currentColor'
-      }
-    }
-  }
-</script>
\ No newline at end of file
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+    color: string;
+}>(), {
+    color: 'currentColor',
+});
+</script>
diff --git a/web/satellite/vuetify-poc/src/components/icons/IconTeam.vue b/web/satellite/vuetify-poc/src/components/icons/IconTeam.vue
index 9cc991f535d8..16338398322d 100644
--- a/web/satellite/vuetify-poc/src/components/icons/IconTeam.vue
+++ b/web/satellite/vuetify-poc/src/components/icons/IconTeam.vue
@@ -4,18 +4,14 @@
 <template>
     <!-- Team Icon -->
     <svg width="18" height="18" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path :fill="color" fill-rule="evenodd" clip-rule="evenodd" d="M6.59292 2.93258C7.47745 2.04805 8.70097 1.5 10.0515 1.5C11.402 1.5 12.6255 2.04805 13.51 2.93258C14.3946 3.81711 14.9426 5.04064 14.9426 6.39114C14.9426 7.74164 14.3946 8.96517 13.51 9.8497C12.6255 10.7342 11.402 11.2823 10.0515 11.2823C8.70097 11.2823 7.47745 10.7342 6.59292 9.8497C5.70838 8.96517 5.16033 7.74164 5.16033 6.39114C5.16033 5.04064 5.70838 3.81711 6.59292 2.93258ZM10.0515 2.57814C8.9984 2.57814 8.04588 3.00434 7.35528 3.69494C6.66467 4.38555 6.23848 5.33806 6.23848 6.39114C6.23848 7.44422 6.66467 8.39673 7.35528 9.08734C8.04588 9.77795 8.9984 10.2041 10.0515 10.2041C11.1046 10.2041 12.0571 9.77795 12.7477 9.08734C13.4383 8.39673 13.8645 7.44422 13.8645 6.39114C13.8645 5.33806 13.4383 4.38555 12.7477 3.69494C12.0571 3.00434 11.1046 2.57814 10.0515 2.57814ZM9.96087 11.7423L10.0947 11.7433L10.0966 11.7433C11.9281 11.7697 13.66 12.3299 15.1558 13.2961C16.6886 14.2862 17.9725 15.7011 18.8722 17.4074L18.879 17.4202L18.885 17.4333C18.9481 17.5702 19 17.7282 19 17.9137C19 18.2083 18.8799 18.476 18.6873 18.6686C18.4947 18.8612 18.227 18.9813 17.9324 18.9813H2.18398C1.98449 18.9813 1.78824 18.9309 1.61346 18.8348C1.32713 18.6773 1.13129 18.4177 1.04705 18.1275C0.962982 17.838 0.989049 17.5146 1.14566 17.2287L1.14651 17.2271L1.20211 17.1272L1.20277 17.126C2.13132 15.4766 3.42591 14.117 4.95689 13.1758C6.4453 12.2607 8.15595 11.7427 9.9589 11.7423H9.96087ZM9.95726 12.8205C8.36486 12.8212 6.84891 13.2782 5.52155 14.0942C4.15437 14.9348 2.98599 16.1566 2.14294 17.6537L2.14227 17.6549L2.09123 17.7467L2.09073 17.7476C2.07712 17.773 2.07477 17.8005 2.08243 17.8269C2.09021 17.8537 2.10731 17.8759 2.13302 17.8901C2.14863 17.8987 2.16615 17.9032 2.18396 17.9032H17.914C17.9131 17.9009 17.912 17.8984 17.9109 17.8958C17.0938 16.352 15.9367 15.0841 14.5708 14.2017C13.2357 13.3393 11.7002 12.8451 10.083 12.8214L10.0811 12.8214L9.95913 12.8205L9.95726 12.8205Z"/>
+        <path :fill="color" fill-rule="evenodd" clip-rule="evenodd" d="M6.59292 2.93258C7.47745 2.04805 8.70097 1.5 10.0515 1.5C11.402 1.5 12.6255 2.04805 13.51 2.93258C14.3946 3.81711 14.9426 5.04064 14.9426 6.39114C14.9426 7.74164 14.3946 8.96517 13.51 9.8497C12.6255 10.7342 11.402 11.2823 10.0515 11.2823C8.70097 11.2823 7.47745 10.7342 6.59292 9.8497C5.70838 8.96517 5.16033 7.74164 5.16033 6.39114C5.16033 5.04064 5.70838 3.81711 6.59292 2.93258ZM10.0515 2.57814C8.9984 2.57814 8.04588 3.00434 7.35528 3.69494C6.66467 4.38555 6.23848 5.33806 6.23848 6.39114C6.23848 7.44422 6.66467 8.39673 7.35528 9.08734C8.04588 9.77795 8.9984 10.2041 10.0515 10.2041C11.1046 10.2041 12.0571 9.77795 12.7477 9.08734C13.4383 8.39673 13.8645 7.44422 13.8645 6.39114C13.8645 5.33806 13.4383 4.38555 12.7477 3.69494C12.0571 3.00434 11.1046 2.57814 10.0515 2.57814ZM9.96087 11.7423L10.0947 11.7433L10.0966 11.7433C11.9281 11.7697 13.66 12.3299 15.1558 13.2961C16.6886 14.2862 17.9725 15.7011 18.8722 17.4074L18.879 17.4202L18.885 17.4333C18.9481 17.5702 19 17.7282 19 17.9137C19 18.2083 18.8799 18.476 18.6873 18.6686C18.4947 18.8612 18.227 18.9813 17.9324 18.9813H2.18398C1.98449 18.9813 1.78824 18.9309 1.61346 18.8348C1.32713 18.6773 1.13129 18.4177 1.04705 18.1275C0.962982 17.838 0.989049 17.5146 1.14566 17.2287L1.14651 17.2271L1.20211 17.1272L1.20277 17.126C2.13132 15.4766 3.42591 14.117 4.95689 13.1758C6.4453 12.2607 8.15595 11.7427 9.9589 11.7423H9.96087ZM9.95726 12.8205C8.36486 12.8212 6.84891 13.2782 5.52155 14.0942C4.15437 14.9348 2.98599 16.1566 2.14294 17.6537L2.14227 17.6549L2.09123 17.7467L2.09073 17.7476C2.07712 17.773 2.07477 17.8005 2.08243 17.8269C2.09021 17.8537 2.10731 17.8759 2.13302 17.8901C2.14863 17.8987 2.16615 17.9032 2.18396 17.9032H17.914C17.9131 17.9009 17.912 17.8984 17.9109 17.8958C17.0938 16.352 15.9367 15.0841 14.5708 14.2017C13.2357 13.3393 11.7002 12.8451 10.083 12.8214L10.0811 12.8214L9.95913 12.8205L9.95726 12.8205Z" />
     </svg>
-
 </template>
 
-<script>
-  export default {
-    props: {
-      color: {
-        type: String,
-        default: 'currentColor'
-      }
-    }
-  }
-</script>
\ No newline at end of file
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+    color: string;
+}>(), {
+    color: 'currentColor',
+});
+</script>
diff --git a/web/satellite/vuetify-poc/src/components/icons/IconUpload.vue b/web/satellite/vuetify-poc/src/components/icons/IconUpload.vue
index bec0d3034815..9af90a6a424c 100644
--- a/web/satellite/vuetify-poc/src/components/icons/IconUpload.vue
+++ b/web/satellite/vuetify-poc/src/components/icons/IconUpload.vue
@@ -4,17 +4,14 @@
 <template>
     <!-- Upload Icon -->
     <svg width="16" height="16" viewBox="0 0 14 14" fill="none" class="mr-2" xmlns="http://www.w3.org/2000/svg">
-        <path :fill="color" d="M7.28436 0.852711L7.30105 0.868755L10.2606 3.82831C10.4854 4.05305 10.4854 4.41744 10.2606 4.64219C10.0413 4.86145 9.68917 4.8668 9.46342 4.65823L9.44673 4.64219L7.45038 2.6458V9.14788C7.45038 9.46572 7.19272 9.72338 6.87489 9.72338C6.5648 9.72338 6.31199 9.47813 6.29984 9.17103L6.29939 9.14788V2.6841L4.3415 4.64219C4.12224 4.86145 3.77006 4.8668 3.54431 4.65823L3.52762 4.64219C3.30836 4.42292 3.30301 4.07075 3.51158 3.845L3.52762 3.82831L6.48718 0.868755C6.70644 0.64949 7.05862 0.644143 7.28436 0.852711ZM13.2992 12.1406C13.2992 12.4584 13.0416 12.7161 12.7237 12.7161H1.3184C1.00056 12.7161 0.742899 12.4584 0.742899 12.1406C0.742899 11.8227 1.00056 11.5651 1.3184 11.5651H12.7237C13.0416 11.5651 13.2992 11.8227 13.2992 12.1406ZM1.27472 12.6724C0.956878 12.6724 0.699219 12.4147 0.699219 12.0969V9.79489C0.699219 9.47705 0.956878 9.21939 1.27472 9.21939C1.59256 9.21939 1.85021 9.47705 1.85021 9.79489V12.0969C1.85021 12.4147 1.59256 12.6724 1.27472 12.6724ZM12.68 12.6724C12.3622 12.6724 12.1045 12.4147 12.1045 12.0969V9.79489C12.1045 9.47705 12.3622 9.21939 12.68 9.21939C12.9979 9.21939 13.2555 9.47705 13.2555 9.79489V12.0969C13.2555 12.4147 12.9979 12.6724 12.68 12.6724Z"/>
+        <path :fill="color" d="M7.28436 0.852711L7.30105 0.868755L10.2606 3.82831C10.4854 4.05305 10.4854 4.41744 10.2606 4.64219C10.0413 4.86145 9.68917 4.8668 9.46342 4.65823L9.44673 4.64219L7.45038 2.6458V9.14788C7.45038 9.46572 7.19272 9.72338 6.87489 9.72338C6.5648 9.72338 6.31199 9.47813 6.29984 9.17103L6.29939 9.14788V2.6841L4.3415 4.64219C4.12224 4.86145 3.77006 4.8668 3.54431 4.65823L3.52762 4.64219C3.30836 4.42292 3.30301 4.07075 3.51158 3.845L3.52762 3.82831L6.48718 0.868755C6.70644 0.64949 7.05862 0.644143 7.28436 0.852711ZM13.2992 12.1406C13.2992 12.4584 13.0416 12.7161 12.7237 12.7161H1.3184C1.00056 12.7161 0.742899 12.4584 0.742899 12.1406C0.742899 11.8227 1.00056 11.5651 1.3184 11.5651H12.7237C13.0416 11.5651 13.2992 11.8227 13.2992 12.1406ZM1.27472 12.6724C0.956878 12.6724 0.699219 12.4147 0.699219 12.0969V9.79489C0.699219 9.47705 0.956878 9.21939 1.27472 9.21939C1.59256 9.21939 1.85021 9.47705 1.85021 9.79489V12.0969C1.85021 12.4147 1.59256 12.6724 1.27472 12.6724ZM12.68 12.6724C12.3622 12.6724 12.1045 12.4147 12.1045 12.0969V9.79489C12.1045 9.47705 12.3622 9.21939 12.68 9.21939C12.9979 9.21939 13.2555 9.47705 13.2555 9.79489V12.0969C13.2555 12.4147 12.9979 12.6724 12.68 12.6724Z" />
     </svg>
 </template>
 
-<script>
-  export default {
-    props: {
-      color: {
-        type: String,
-        default: 'currentColor'
-      }
-    }
-  }
-</script>
\ No newline at end of file
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+    color: string;
+}>(), {
+    color: 'currentColor',
+});
+</script>
diff --git a/web/satellite/vuetify-poc/src/layouts/default/Account.vue b/web/satellite/vuetify-poc/src/layouts/default/Account.vue
index c429fd8274c2..5a5333641b0c 100644
--- a/web/satellite/vuetify-poc/src/layouts/default/Account.vue
+++ b/web/satellite/vuetify-poc/src/layouts/default/Account.vue
@@ -2,15 +2,17 @@
 // See LICENSE for copying information.
 
 <template>
-  <v-app>
-    <default-bar />
-    <account-nav />
-    <default-view />
-  </v-app>
+    <v-app>
+        <default-bar />
+        <account-nav />
+        <default-view />
+    </v-app>
 </template>
 
-<script setup>
-  import DefaultBar from './AppBar.vue'
-  import AccountNav from './AccountNav.vue'
-  import DefaultView from './View.vue'
+<script setup lang="ts">
+import { VApp } from 'vuetify/components';
+
+import DefaultBar from './AppBar.vue';
+import AccountNav from './AccountNav.vue';
+import DefaultView from './View.vue';
 </script>
diff --git a/web/satellite/vuetify-poc/src/layouts/default/AccountNav.vue b/web/satellite/vuetify-poc/src/layouts/default/AccountNav.vue
index 656c15c8631e..065fce211bb4 100644
--- a/web/satellite/vuetify-poc/src/layouts/default/AccountNav.vue
+++ b/web/satellite/vuetify-poc/src/layouts/default/AccountNav.vue
@@ -2,90 +2,80 @@
 // See LICENSE for copying information.
 
 <template>
-
-  <v-navigation-drawer
-    v-model="drawer"
-    class="py-1"
-  >
-    <v-sheet>
-      <v-list class="px-2" color="default" variant="flat">
-
-        <!-- Project -->
-        <v-list-item class="pa-4 rounded-lg" link router-link to="/dashboard" >
-
-          <template v-slot:prepend>
-            <img src="@poc/assets/icon-back-tonal.svg" alt="Project">
-            <!-- <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="M10.0567 1.05318L10.0849 1.06832L17.4768 5.33727C17.6249 5.42279 17.7084 5.5642 17.7274 5.71277L17.7301 5.73906L17.7314 5.76543L17.7316 14.2407C17.7316 14.4124 17.6452 14.5718 17.5032 14.6657L17.476 14.6826L10.084 18.9322C9.93533 19.0176 9.75438 19.0223 9.60224 18.9463L9.57407 18.9311L2.25387 14.6815C2.10601 14.5956 2.01167 14.4418 2.00108 14.2726L2 14.2407V5.77863L2.00023 5.75974C1.99504 5.58748 2.07759 5.41781 2.22993 5.31793L2.25457 5.30275L9.57482 1.06849C9.71403 0.987969 9.88182 0.978444 10.0278 1.03993L10.0567 1.05318ZM16.7123 6.6615L10.3397 10.3418V17.6094L16.7123 13.9458V6.6615ZM3.01944 6.66573V13.947L9.32037 17.605V10.3402L3.01944 6.66573ZM9.83034 2.09828L3.49475 5.76287L9.83122 9.45833L16.2029 5.7786L9.83034 2.09828Z" fill="currentColor"/>
-            </svg> -->
-          </template>
-          <v-list-item-title link class="text-body-2 ml-3">
-            Go back
-          </v-list-item-title>
-        </v-list-item>
-
-        <v-divider class="my-2"></v-divider>
-
-        <!-- All Projects -->
-        <v-list-item class="pa-4 rounded-lg" link router-link to="/projects" >
-
-        <template v-slot:prepend>
-          <!-- <img src="@poc/assets/icon-prosject.svg" alt="Project" class="mr-3"> -->
-          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path d="M5.33455 11.8182L2 10L5.33455 8.18182" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
-          <path d="M14.6655 8.18182L18.0001 10L14.6655 11.8182" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
-          <path d="M18 13.6364L10 18L2 13.6364L5.33455 11.8182L10 14.3636L14.6655 11.8182L18 13.6364Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
-          <path d="M2 6.36364L10 10.7273L18 6.36364L10 2L2 6.36364Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
-          </svg>
-          <!-- <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="M10.0567 1.05318L10.0849 1.06832L17.4768 5.33727C17.6249 5.42279 17.7084 5.5642 17.7274 5.71277L17.7301 5.73906L17.7314 5.76543L17.7316 14.2407C17.7316 14.4124 17.6452 14.5718 17.5032 14.6657L17.476 14.6826L10.084 18.9322C9.93533 19.0176 9.75438 19.0223 9.60224 18.9463L9.57407 18.9311L2.25387 14.6815C2.10601 14.5956 2.01167 14.4418 2.00108 14.2726L2 14.2407V5.77863L2.00023 5.75974C1.99504 5.58748 2.07759 5.41781 2.22993 5.31793L2.25457 5.30275L9.57482 1.06849C9.71403 0.987969 9.88182 0.978444 10.0278 1.03993L10.0567 1.05318ZM16.7123 6.6615L10.3397 10.3418V17.6094L16.7123 13.9458V6.6615ZM3.01944 6.66573V13.947L9.32037 17.605V10.3402L3.01944 6.66573ZM9.83034 2.09828L3.49475 5.76287L9.83122 9.45833L16.2029 5.7786L9.83034 2.09828Z" fill="currentColor"/>
-            </svg> -->
-        </template>
-        <v-list-item-title link class="text-body-2 ml-3">
-          All Projects
-        </v-list-item-title>
-        </v-list-item>
-
-        <v-list-item link router-link to="/account-settings" class="my-1 py-3" rounded="lg">
-          <template v-slot:prepend>
-              <!-- <img src="@poc/assets/icon-settings.svg" alt="Account Settings" class="mr-3"> -->
-              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M11.56 1C12.3815 1 13.0476 1.66599 13.0476 2.48757L13.0475 2.73016C13.0475 3.28183 13.4947 3.72906 14.0464 3.72907C14.2217 3.72907 14.394 3.68292 14.5458 3.59525L14.756 3.47394C15.4675 3.06317 16.3773 3.30695 16.7881 4.01845L18.5732 7.11038C18.9768 7.80939 18.7486 8.69981 18.0657 9.12039L18.0287 9.14245L17.8186 9.26372C17.3646 9.52585 17.209 10.1064 17.4711 10.5605C17.5544 10.7048 17.6743 10.8247 17.8186 10.908L17.9543 10.9863C18.6658 11.3971 18.9096 12.3069 18.4988 13.0185L16.7881 15.9815C16.3845 16.6806 15.4993 16.9282 14.7936 16.5471L14.756 16.526L14.5459 16.4047C14.0681 16.1288 13.4572 16.2925 13.1814 16.7703C13.0937 16.9221 13.0475 17.0944 13.0475 17.2698L13.0475 17.5124C13.0476 18.3201 12.404 18.9774 11.6016 18.9995L11.56 19H7.98971C7.16814 19 6.50212 18.334 6.50207 17.5124L6.50206 17.3986C6.50205 16.888 6.08812 16.4741 5.57753 16.4741C5.41524 16.4741 5.25582 16.5169 5.11528 16.598L5.01682 16.6549C4.31782 17.0585 3.42739 16.8303 3.0068 16.1474L2.98473 16.1104L1.19961 13.0185C0.788862 12.3069 1.03262 11.3972 1.74409 10.9863L1.95426 10.865C2.43201 10.5891 2.59568 9.97821 2.31984 9.50046C2.23216 9.34861 2.10605 9.22252 1.9542 9.13485L1.74414 9.01359C1.04506 8.6101 0.797456 7.72487 1.1785 7.0192L1.19961 6.98155L2.91035 4.01845C3.32115 3.30695 4.23095 3.06317 4.94246 3.47394L5.07809 3.55224C5.53214 3.81438 6.11274 3.65881 6.37488 3.20475C6.45819 3.06045 6.50206 2.89675 6.50206 2.73012L6.50207 2.4876C6.50212 1.66604 7.16814 1 7.98971 1H11.56ZM11.56 2.19008H7.98971C7.83287 2.19008 7.70434 2.31148 7.69297 2.46543L7.69215 2.48763L7.69214 2.73015C7.69213 3.10567 7.59329 3.47457 7.40553 3.79978C6.82308 4.80864 5.54304 5.16365 4.52646 4.60729L4.48306 4.58289L4.34745 4.5046C4.21191 4.42635 4.04039 4.46685 3.9534 4.59381L3.94099 4.61349L2.22567 7.58465C2.15347 7.71836 2.19498 7.88481 2.31889 7.97014L2.33914 7.98292L2.54919 8.10418C2.88197 8.29629 3.15832 8.57262 3.35046 8.9054C3.94656 9.9378 3.60605 11.254 2.59255 11.87L2.54933 11.8956L2.33921 12.0169C2.20365 12.0952 2.15296 12.264 2.2194 12.4028L2.23025 12.4234L4.02177 15.5257L4.03337 15.543C4.11707 15.6574 4.27188 15.6966 4.40057 15.6354L4.42176 15.6242L4.52022 15.5674C4.84167 15.3818 5.20631 15.2841 5.5775 15.2841C6.72978 15.284 7.66683 16.2057 7.69164 17.352L7.69214 17.3986L7.69215 17.5123C7.69216 17.6692 7.81356 17.7977 7.9675 17.8091L7.98971 17.8099H11.5447L11.5711 17.8096L11.5915 17.8083C11.7334 17.7936 11.8457 17.6783 11.8566 17.5352L11.8574 17.5124L11.8574 17.2698C11.8574 16.8855 11.9586 16.508 12.1507 16.1752C12.7468 15.1428 14.0569 14.7797 15.0972 15.3494L15.1409 15.3741L15.3375 15.4875L15.3616 15.501L15.3805 15.5104C15.5101 15.5676 15.6638 15.5241 15.7446 15.4067L15.7574 15.3865L17.4682 12.4234C17.5464 12.2879 17.5059 12.1164 17.379 12.0294L17.3593 12.017L17.2236 11.9386C16.8983 11.7509 16.6282 11.4808 16.4405 11.1555C15.858 10.1467 16.1906 8.86061 17.1808 8.25844L17.2236 8.23306L17.4263 8.1161L17.4446 8.10509L17.4614 8.09381C17.5757 8.01011 17.6149 7.85531 17.5537 7.72661L17.5425 7.70542L15.7574 4.61351C15.6792 4.47797 15.5104 4.42729 15.3716 4.49374L15.351 4.50459L15.1409 4.62589C14.8081 4.81802 14.4306 4.91916 14.0464 4.91915C12.8531 4.91912 11.8829 3.96436 11.8579 2.77695L11.8574 2.72996L11.8575 2.48757C11.8575 2.33074 11.7361 2.20225 11.5822 2.1909L11.56 2.19008ZM9.90209 5.90909C12.1614 5.90909 13.993 7.74065 13.993 10C13.993 12.2593 12.1614 14.0909 9.90209 14.0909C7.64274 14.0909 5.81118 12.2593 5.81118 10C5.81118 7.74065 7.64274 5.90909 9.90209 5.90909ZM9.90209 6.95041C8.21785 6.95041 6.8525 8.31576 6.8525 10C6.8525 11.6842 8.21785 13.0496 9.90209 13.0496C11.5863 13.0496 12.9517 11.6842 12.9517 10C12.9517 8.31576 11.5863 6.95041 9.90209 6.95041Z" fill="currentColor"/>
-              </svg>
-            </template>
-          <v-list-item-title class="text-body-2 ml-3">
-            Account Settings
-          </v-list-item-title>
-        </v-list-item>
-
-        <v-list-item link router-link to="/billing" class="my-1" rounded="lg">
-          <template v-slot:prepend>
-              <!-- <img src="@poc/assets/icon-card.svg" alt="Billing" class="mr-3"> -->
-              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M15.5674 3L15.707 3.0006C16.7956 3.01012 17.2112 3.13361 17.6302 3.35765C18.0665 3.59102 18.409 3.93348 18.6424 4.36984L18.6698 4.42224C18.8855 4.84205 19 5.28678 19 6.43264V12.807C19 14.0006 18.8757 14.4335 18.6424 14.8698C18.409 15.3062 18.0665 15.6486 17.6302 15.882L17.5778 15.9095C17.158 16.1251 16.7132 16.2397 15.5674 16.2397H4.43264C3.23904 16.2397 2.80621 16.1154 2.36984 15.882C1.93348 15.6486 1.59102 15.3062 1.35765 14.8698L1.33017 14.8174C1.11454 14.3976 1 13.9529 1 12.807V6.43264L1.0006 6.29301C1.01012 5.2044 1.13361 4.78875 1.35765 4.36984C1.59102 3.93348 1.93348 3.59102 2.36984 3.35765L2.42224 3.33017C2.84205 3.11454 3.28678 3 4.43264 3H15.5674ZM17.9585 9.39669H2.04132L2.04142 12.8696C2.04416 13.7524 2.10634 14.0617 2.2759 14.3787C2.41222 14.6336 2.60604 14.8274 2.86093 14.9638L2.90518 14.9867C3.208 15.139 3.52829 15.1956 4.37011 15.1983H15.6299L15.8105 15.1967C16.557 15.1861 16.8447 15.1212 17.1391 14.9638C17.394 14.8274 17.5878 14.6336 17.7241 14.3787L17.7471 14.3345C17.8993 14.0317 17.956 13.7114 17.9586 12.8696L17.9585 9.39669ZM15.6299 4.04132H4.43264C3.50161 4.04132 3.18536 4.10239 2.86093 4.2759C2.60604 4.41222 2.41222 4.60604 2.2759 4.86093L2.25293 4.90518C2.10811 5.19322 2.04978 5.49709 2.04219 6.25058L2.04132 6.43264V6.57025H17.9585L17.9586 6.37011L17.9571 6.18949C17.9464 5.44301 17.8816 5.15534 17.7241 4.86093C17.5878 4.60604 17.394 4.41222 17.1391 4.2759L17.0948 4.25293C16.792 4.10068 16.4717 4.04403 15.6299 4.04132Z" fill="currentColor"/>
-              </svg>
-            </template>
-          <v-list-item-title class="text-body-2 ml-3">
-            Account Billing
-          </v-list-item-title>
-        </v-list-item>
-
-        <v-divider class="my-2"></v-divider>
-
-      </v-list>
-    </v-sheet>
-
-  </v-navigation-drawer>
-
+    <v-navigation-drawer class="py-1">
+        <v-sheet>
+            <v-list class="px-2" color="default" variant="flat">
+                <!-- Project -->
+                <v-list-item class="pa-4 rounded-lg" link router-link to="/dashboard">
+                    <template #prepend>
+                        <img src="@poc/assets/icon-back-tonal.svg" alt="Project">
+                        <!-- <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M10.0567 1.05318L10.0849 1.06832L17.4768 5.33727C17.6249 5.42279 17.7084 5.5642 17.7274 5.71277L17.7301 5.73906L17.7314 5.76543L17.7316 14.2407C17.7316 14.4124 17.6452 14.5718 17.5032 14.6657L17.476 14.6826L10.084 18.9322C9.93533 19.0176 9.75438 19.0223 9.60224 18.9463L9.57407 18.9311L2.25387 14.6815C2.10601 14.5956 2.01167 14.4418 2.00108 14.2726L2 14.2407V5.77863L2.00023 5.75974C1.99504 5.58748 2.07759 5.41781 2.22993 5.31793L2.25457 5.30275L9.57482 1.06849C9.71403 0.987969 9.88182 0.978444 10.0278 1.03993L10.0567 1.05318ZM16.7123 6.6615L10.3397 10.3418V17.6094L16.7123 13.9458V6.6615ZM3.01944 6.66573V13.947L9.32037 17.605V10.3402L3.01944 6.66573ZM9.83034 2.09828L3.49475 5.76287L9.83122 9.45833L16.2029 5.7786L9.83034 2.09828Z" fill="currentColor"/>
+                        </svg> -->
+                    </template>
+                    <v-list-item-title link class="text-body-2 ml-3">
+                        Go back
+                    </v-list-item-title>
+                </v-list-item>
+
+                <v-divider class="my-2" />
+
+                <!-- All Projects -->
+                <v-list-item class="pa-4 rounded-lg" link router-link to="/projects">
+                    <template #prepend>
+                        <!-- <img src="@poc/assets/icon-prosject.svg" alt="Project" class="mr-3"> -->
+                        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M5.33455 11.8182L2 10L5.33455 8.18182" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" />
+                            <path d="M14.6655 8.18182L18.0001 10L14.6655 11.8182" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" />
+                            <path d="M18 13.6364L10 18L2 13.6364L5.33455 11.8182L10 14.3636L14.6655 11.8182L18 13.6364Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" />
+                            <path d="M2 6.36364L10 10.7273L18 6.36364L10 2L2 6.36364Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" />
+                        </svg>
+                        <!-- <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M10.0567 1.05318L10.0849 1.06832L17.4768 5.33727C17.6249 5.42279 17.7084 5.5642 17.7274 5.71277L17.7301 5.73906L17.7314 5.76543L17.7316 14.2407C17.7316 14.4124 17.6452 14.5718 17.5032 14.6657L17.476 14.6826L10.084 18.9322C9.93533 19.0176 9.75438 19.0223 9.60224 18.9463L9.57407 18.9311L2.25387 14.6815C2.10601 14.5956 2.01167 14.4418 2.00108 14.2726L2 14.2407V5.77863L2.00023 5.75974C1.99504 5.58748 2.07759 5.41781 2.22993 5.31793L2.25457 5.30275L9.57482 1.06849C9.71403 0.987969 9.88182 0.978444 10.0278 1.03993L10.0567 1.05318ZM16.7123 6.6615L10.3397 10.3418V17.6094L16.7123 13.9458V6.6615ZM3.01944 6.66573V13.947L9.32037 17.605V10.3402L3.01944 6.66573ZM9.83034 2.09828L3.49475 5.76287L9.83122 9.45833L16.2029 5.7786L9.83034 2.09828Z" fill="currentColor"/>
+                        </svg> -->
+                    </template>
+                    <v-list-item-title link class="text-body-2 ml-3">
+                        All Projects
+                    </v-list-item-title>
+                </v-list-item>
+
+                <v-list-item link router-link to="/account-settings" class="my-1 py-3" rounded="lg">
+                    <template #prepend>
+                        <!-- <img src="@poc/assets/icon-settings.svg" alt="Account Settings" class="mr-3"> -->
+                        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M11.56 1C12.3815 1 13.0476 1.66599 13.0476 2.48757L13.0475 2.73016C13.0475 3.28183 13.4947 3.72906 14.0464 3.72907C14.2217 3.72907 14.394 3.68292 14.5458 3.59525L14.756 3.47394C15.4675 3.06317 16.3773 3.30695 16.7881 4.01845L18.5732 7.11038C18.9768 7.80939 18.7486 8.69981 18.0657 9.12039L18.0287 9.14245L17.8186 9.26372C17.3646 9.52585 17.209 10.1064 17.4711 10.5605C17.5544 10.7048 17.6743 10.8247 17.8186 10.908L17.9543 10.9863C18.6658 11.3971 18.9096 12.3069 18.4988 13.0185L16.7881 15.9815C16.3845 16.6806 15.4993 16.9282 14.7936 16.5471L14.756 16.526L14.5459 16.4047C14.0681 16.1288 13.4572 16.2925 13.1814 16.7703C13.0937 16.9221 13.0475 17.0944 13.0475 17.2698L13.0475 17.5124C13.0476 18.3201 12.404 18.9774 11.6016 18.9995L11.56 19H7.98971C7.16814 19 6.50212 18.334 6.50207 17.5124L6.50206 17.3986C6.50205 16.888 6.08812 16.4741 5.57753 16.4741C5.41524 16.4741 5.25582 16.5169 5.11528 16.598L5.01682 16.6549C4.31782 17.0585 3.42739 16.8303 3.0068 16.1474L2.98473 16.1104L1.19961 13.0185C0.788862 12.3069 1.03262 11.3972 1.74409 10.9863L1.95426 10.865C2.43201 10.5891 2.59568 9.97821 2.31984 9.50046C2.23216 9.34861 2.10605 9.22252 1.9542 9.13485L1.74414 9.01359C1.04506 8.6101 0.797456 7.72487 1.1785 7.0192L1.19961 6.98155L2.91035 4.01845C3.32115 3.30695 4.23095 3.06317 4.94246 3.47394L5.07809 3.55224C5.53214 3.81438 6.11274 3.65881 6.37488 3.20475C6.45819 3.06045 6.50206 2.89675 6.50206 2.73012L6.50207 2.4876C6.50212 1.66604 7.16814 1 7.98971 1H11.56ZM11.56 2.19008H7.98971C7.83287 2.19008 7.70434 2.31148 7.69297 2.46543L7.69215 2.48763L7.69214 2.73015C7.69213 3.10567 7.59329 3.47457 7.40553 3.79978C6.82308 4.80864 5.54304 5.16365 4.52646 4.60729L4.48306 4.58289L4.34745 4.5046C4.21191 4.42635 4.04039 4.46685 3.9534 4.59381L3.94099 4.61349L2.22567 7.58465C2.15347 7.71836 2.19498 7.88481 2.31889 7.97014L2.33914 7.98292L2.54919 8.10418C2.88197 8.29629 3.15832 8.57262 3.35046 8.9054C3.94656 9.9378 3.60605 11.254 2.59255 11.87L2.54933 11.8956L2.33921 12.0169C2.20365 12.0952 2.15296 12.264 2.2194 12.4028L2.23025 12.4234L4.02177 15.5257L4.03337 15.543C4.11707 15.6574 4.27188 15.6966 4.40057 15.6354L4.42176 15.6242L4.52022 15.5674C4.84167 15.3818 5.20631 15.2841 5.5775 15.2841C6.72978 15.284 7.66683 16.2057 7.69164 17.352L7.69214 17.3986L7.69215 17.5123C7.69216 17.6692 7.81356 17.7977 7.9675 17.8091L7.98971 17.8099H11.5447L11.5711 17.8096L11.5915 17.8083C11.7334 17.7936 11.8457 17.6783 11.8566 17.5352L11.8574 17.5124L11.8574 17.2698C11.8574 16.8855 11.9586 16.508 12.1507 16.1752C12.7468 15.1428 14.0569 14.7797 15.0972 15.3494L15.1409 15.3741L15.3375 15.4875L15.3616 15.501L15.3805 15.5104C15.5101 15.5676 15.6638 15.5241 15.7446 15.4067L15.7574 15.3865L17.4682 12.4234C17.5464 12.2879 17.5059 12.1164 17.379 12.0294L17.3593 12.017L17.2236 11.9386C16.8983 11.7509 16.6282 11.4808 16.4405 11.1555C15.858 10.1467 16.1906 8.86061 17.1808 8.25844L17.2236 8.23306L17.4263 8.1161L17.4446 8.10509L17.4614 8.09381C17.5757 8.01011 17.6149 7.85531 17.5537 7.72661L17.5425 7.70542L15.7574 4.61351C15.6792 4.47797 15.5104 4.42729 15.3716 4.49374L15.351 4.50459L15.1409 4.62589C14.8081 4.81802 14.4306 4.91916 14.0464 4.91915C12.8531 4.91912 11.8829 3.96436 11.8579 2.77695L11.8574 2.72996L11.8575 2.48757C11.8575 2.33074 11.7361 2.20225 11.5822 2.1909L11.56 2.19008ZM9.90209 5.90909C12.1614 5.90909 13.993 7.74065 13.993 10C13.993 12.2593 12.1614 14.0909 9.90209 14.0909C7.64274 14.0909 5.81118 12.2593 5.81118 10C5.81118 7.74065 7.64274 5.90909 9.90209 5.90909ZM9.90209 6.95041C8.21785 6.95041 6.8525 8.31576 6.8525 10C6.8525 11.6842 8.21785 13.0496 9.90209 13.0496C11.5863 13.0496 12.9517 11.6842 12.9517 10C12.9517 8.31576 11.5863 6.95041 9.90209 6.95041Z" fill="currentColor" />
+                        </svg>
+                    </template>
+                    <v-list-item-title class="text-body-2 ml-3">
+                        Account Settings
+                    </v-list-item-title>
+                </v-list-item>
+
+                <v-list-item link router-link to="/billing" class="my-1" rounded="lg">
+                    <template #prepend>
+                        <!-- <img src="@poc/assets/icon-card.svg" alt="Billing" class="mr-3"> -->
+                        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M15.5674 3L15.707 3.0006C16.7956 3.01012 17.2112 3.13361 17.6302 3.35765C18.0665 3.59102 18.409 3.93348 18.6424 4.36984L18.6698 4.42224C18.8855 4.84205 19 5.28678 19 6.43264V12.807C19 14.0006 18.8757 14.4335 18.6424 14.8698C18.409 15.3062 18.0665 15.6486 17.6302 15.882L17.5778 15.9095C17.158 16.1251 16.7132 16.2397 15.5674 16.2397H4.43264C3.23904 16.2397 2.80621 16.1154 2.36984 15.882C1.93348 15.6486 1.59102 15.3062 1.35765 14.8698L1.33017 14.8174C1.11454 14.3976 1 13.9529 1 12.807V6.43264L1.0006 6.29301C1.01012 5.2044 1.13361 4.78875 1.35765 4.36984C1.59102 3.93348 1.93348 3.59102 2.36984 3.35765L2.42224 3.33017C2.84205 3.11454 3.28678 3 4.43264 3H15.5674ZM17.9585 9.39669H2.04132L2.04142 12.8696C2.04416 13.7524 2.10634 14.0617 2.2759 14.3787C2.41222 14.6336 2.60604 14.8274 2.86093 14.9638L2.90518 14.9867C3.208 15.139 3.52829 15.1956 4.37011 15.1983H15.6299L15.8105 15.1967C16.557 15.1861 16.8447 15.1212 17.1391 14.9638C17.394 14.8274 17.5878 14.6336 17.7241 14.3787L17.7471 14.3345C17.8993 14.0317 17.956 13.7114 17.9586 12.8696L17.9585 9.39669ZM15.6299 4.04132H4.43264C3.50161 4.04132 3.18536 4.10239 2.86093 4.2759C2.60604 4.41222 2.41222 4.60604 2.2759 4.86093L2.25293 4.90518C2.10811 5.19322 2.04978 5.49709 2.04219 6.25058L2.04132 6.43264V6.57025H17.9585L17.9586 6.37011L17.9571 6.18949C17.9464 5.44301 17.8816 5.15534 17.7241 4.86093C17.5878 4.60604 17.394 4.41222 17.1391 4.2759L17.0948 4.25293C16.792 4.10068 16.4717 4.04403 15.6299 4.04132Z" fill="currentColor" />
+                        </svg>
+                    </template>
+                    <v-list-item-title class="text-body-2 ml-3">
+                        Account Billing
+                    </v-list-item-title>
+                </v-list-item>
+
+                <v-divider class="my-2" />
+            </v-list>
+        </v-sheet>
+    </v-navigation-drawer>
 </template>
 
-<script>
-export default {
-  data: () => ({
-      drawer: true,
-      menu: false,
-  }),
-}
+<script setup lang="ts">
+import {
+    VNavigationDrawer,
+    VSheet,
+    VList,
+    VListItem,
+    VListItemTitle,
+    VDivider,
+} from 'vuetify/components';
 </script>
-
-
diff --git a/web/satellite/vuetify-poc/src/layouts/default/AllProjects.vue b/web/satellite/vuetify-poc/src/layouts/default/AllProjects.vue
index 867395baa767..0d4986d1bb4e 100644
--- a/web/satellite/vuetify-poc/src/layouts/default/AllProjects.vue
+++ b/web/satellite/vuetify-poc/src/layouts/default/AllProjects.vue
@@ -2,13 +2,15 @@
 // See LICENSE for copying information.
 
 <template>
-  <v-app>
-    <default-bar />
-    <default-view />
-  </v-app>
+    <v-app>
+        <default-bar />
+        <default-view />
+    </v-app>
 </template>
 
-<script setup>
-  import DefaultBar from './AppBar.vue'
-  import DefaultView from './View.vue'
+<script setup lang="ts">
+import { VApp } from 'vuetify/components';
+
+import DefaultBar from './AppBar.vue';
+import DefaultView from './View.vue';
 </script>
diff --git a/web/satellite/vuetify-poc/src/layouts/default/AppBar.vue b/web/satellite/vuetify-poc/src/layouts/default/AppBar.vue
index 06391d076911..2bdcd6321902 100644
--- a/web/satellite/vuetify-poc/src/layouts/default/AppBar.vue
+++ b/web/satellite/vuetify-poc/src/layouts/default/AppBar.vue
@@ -2,186 +2,176 @@
 // See LICENSE for copying information.
 
 <template>
-
-  <v-app-bar :elevation="0">
-
-    <v-app-bar-nav-icon
-      variant="text"
-      color="default"
-      class="ml-1"
-      size="x-small"
-      density="comfortable"
-      @click.stop="drawer = !drawer"
-    ></v-app-bar-nav-icon>
-
-    <v-app-bar-title class="mx-1">
-       <v-img
-          v-if="theme.global.current.value.dark"
-          src="@poc/assets/logo-dark.svg"
-          width="120"
-          alt="Storj Logo"
-        />
-       <v-img
-          v-else
-          src="@poc/assets/logo.svg"
-          width="120"
-          alt="Storj Logo"
-        />
-    </v-app-bar-title>
-
-    <template v-slot:append>
-
-      <v-menu offset-y width="200" class="rounded-xl">
-
-        <template v-slot:activator="{ props }">
-          <!-- Theme Toggle Light/Dark Mode -->
-          <v-btn-toggle
-            v-model="activeTheme"
-            mandatory
-            border
-            inset
-            density="comfortable"
-            class="pa-1"
-            >
-
-            <v-tooltip text="Light Theme" location="bottom">
-              <template v-slot:activator="{ props }">
-                <v-btn
-                  v-bind="props"
-                  icon="mdi-weather-sunny"
-                  size="small"
-                  rounded="xl"
-                  @click="toggleTheme('light')"
-                  aria-label="Toggle Light Theme"
-                  >
-                </v-btn>
-              </template>
-            </v-tooltip>
-
-            <v-tooltip text="Dark Theme" location="bottom">
-              <template v-slot:activator="{ props }">
-                <v-btn
-                  v-bind="props"
-                  icon="mdi-weather-night"
-                  size="small"
-                  rounded="xl"
-                  @click="toggleTheme('dark')"
-                  aria-label="Toggle Dark Theme"
-                  >
-                </v-btn>
-              </template>
-            </v-tooltip>
-
-          </v-btn-toggle>
-
-          <!-- My Account Dropdown Button -->
-          <v-btn
-            v-bind="props"
-            variant="outlined"
+    <v-app-bar :elevation="0">
+        <v-app-bar-nav-icon
+            variant="text"
             color="default"
-            class="ml-4 font-weight-medium"
+            class="ml-1"
+            size="x-small"
             density="comfortable"
-          >
-          <template v-slot:append>
-            <img src="@poc/assets/icon-dropdown.svg" alt="Account Dropdown">
-          </template>
-          My Account</v-btn>
-        </template>
-
-        <!-- My Account Menu -->
-        <v-list class="px-2">
-
-          <v-list-item class="py-2 rounded-lg">
-            <template v-slot:prepend>
-              <img src="@poc/assets/icon-satellite.svg" alt="Region">
-            </template>
-            <v-list-item-title class="text-body-2 ml-3">Region</v-list-item-title>
-            <v-list-item-subtitle class="ml-3">
-              North America 1
-            </v-list-item-subtitle>
-          </v-list-item>
-
-          <v-divider class="my-2"></v-divider>
-
-          <v-list-item link class="my-1 rounded-lg">
-            <template v-slot:prepend>
-              <img src="@poc/assets/icon-upgrade.svg" alt="Upgrade">
-            </template>
-            <v-list-item-title class="text-body-2 ml-3">
-              Upgrade
-            </v-list-item-title>
-          </v-list-item>
-
-          <v-list-item link class="my-1 rounded-lg" router-link to="/billing">
-            <template v-slot:prepend>
-              <img src="@poc/assets/icon-card.svg" alt="Billing">
-            </template>
-            <v-list-item-title class="text-body-2 ml-3">
-              Billing
-            </v-list-item-title>
-          </v-list-item>
-
-          <v-list-item link class="my-1 rounded-lg" router-link to="/account-settings">
-            <template v-slot:prepend>
-              <img src="@poc/assets/icon-settings.svg" alt="Account Settings">
-            </template>
-            <v-list-item-title class="text-body-2 ml-3">
-              Settings
-            </v-list-item-title>
-          </v-list-item>
-          <v-list-item class="rounded-lg" link>
-            <template v-slot:prepend>
-              <img src="@poc/assets/icon-logout.svg" alt="Log Out">
-            </template>
-            <v-list-item-title class="text-body-2 ml-3">
-              Sign Out
-            </v-list-item-title>
-          </v-list-item>
-
-        </v-list>
-      </v-menu>
-
-    </template>
-
-  </v-app-bar>
+            @click.stop="drawer = !drawer"
+        />
 
+        <v-app-bar-title class="mx-1">
+            <v-img
+                v-if="theme.global.current.value.dark"
+                src="@poc/assets/logo-dark.svg"
+                width="120"
+                alt="Storj Logo"
+            />
+            <v-img
+                v-else
+                src="@poc/assets/logo.svg"
+                width="120"
+                alt="Storj Logo"
+            />
+        </v-app-bar-title>
+
+        <template #append>
+            <v-menu offset-y width="200" class="rounded-xl">
+                <template #activator="{ props: activatorProps }">
+                    <!-- Theme Toggle Light/Dark Mode -->
+                    <v-btn-toggle
+                        v-model="activeTheme"
+                        mandatory
+                        border
+                        inset
+                        density="comfortable"
+                        class="pa-1"
+                    >
+                        <v-tooltip text="Light Theme" location="bottom">
+                            <template #activator="{ props: darkProps }">
+                                <v-btn
+                                    v-bind="darkProps"
+                                    icon="mdi-weather-sunny"
+                                    size="small"
+                                    rounded="xl"
+                                    aria-label="Toggle Light Theme"
+                                    @click="toggleTheme('light')"
+                                />
+                            </template>
+                        </v-tooltip>
+
+                        <v-tooltip text="Dark Theme" location="bottom">
+                            <template #activator="{ props: lightProps }">
+                                <v-btn
+                                    v-bind="lightProps"
+                                    icon="mdi-weather-night"
+                                    size="small"
+                                    rounded="xl"
+                                    aria-label="Toggle Dark Theme"
+                                    @click="toggleTheme('dark')"
+                                />
+                            </template>
+                        </v-tooltip>
+                    </v-btn-toggle>
+
+                    <!-- My Account Dropdown Button -->
+                    <v-btn
+                        v-bind="activatorProps"
+                        variant="outlined"
+                        color="default"
+                        class="ml-4 font-weight-medium"
+                        density="comfortable"
+                    >
+                        <template #append>
+                            <img src="@poc/assets/icon-dropdown.svg" alt="Account Dropdown">
+                        </template>
+                        My Account
+                    </v-btn>
+                </template>
+
+                <!-- My Account Menu -->
+                <v-list class="px-2">
+                    <v-list-item class="py-2 rounded-lg">
+                        <template #prepend>
+                            <img src="@poc/assets/icon-satellite.svg" alt="Region">
+                        </template>
+                        <v-list-item-title class="text-body-2 ml-3">Region</v-list-item-title>
+                        <v-list-item-subtitle class="ml-3">
+                            North America 1
+                        </v-list-item-subtitle>
+                    </v-list-item>
+
+                    <v-divider class="my-2" />
+
+                    <v-list-item link class="my-1 rounded-lg">
+                        <template #prepend>
+                            <img src="@poc/assets/icon-upgrade.svg" alt="Upgrade">
+                        </template>
+                        <v-list-item-title class="text-body-2 ml-3">
+                            Upgrade
+                        </v-list-item-title>
+                    </v-list-item>
+
+                    <v-list-item link class="my-1 rounded-lg" router-link to="/billing">
+                        <template #prepend>
+                            <img src="@poc/assets/icon-card.svg" alt="Billing">
+                        </template>
+                        <v-list-item-title class="text-body-2 ml-3">
+                            Billing
+                        </v-list-item-title>
+                    </v-list-item>
+
+                    <v-list-item link class="my-1 rounded-lg" router-link to="/account-settings">
+                        <template #prepend>
+                            <img src="@poc/assets/icon-settings.svg" alt="Account Settings">
+                        </template>
+                        <v-list-item-title class="text-body-2 ml-3">
+                            Settings
+                        </v-list-item-title>
+                    </v-list-item>
+                    <v-list-item class="rounded-lg" link>
+                        <template #prepend>
+                            <img src="@poc/assets/icon-logout.svg" alt="Log Out">
+                        </template>
+                        <v-list-item-title class="text-body-2 ml-3">
+                            Sign Out
+                        </v-list-item-title>
+                    </v-list-item>
+                </v-list>
+            </v-menu>
+        </template>
+    </v-app-bar>
 </template>
 
-<script>
-import { useTheme } from 'vuetify'
-
-export default {
-  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
-      }
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import { useTheme } from 'vuetify';
+import {
+    VAppBar,
+    VAppBarNavIcon,
+    VAppBarTitle,
+    VImg,
+    VMenu,
+    VBtnToggle,
+    VTooltip,
+    VBtn,
+    VList,
+    VListItem,
+    VListItemTitle,
+    VListItemSubtitle,
+    VDivider,
+} from 'vuetify/components';
+
+const drawer = ref<boolean>(true);
+const activeTheme = ref<number>(0);
+
+const theme = useTheme();
+
+function toggleTheme(newTheme: string): void {
+    if ((newTheme === 'dark' && theme.global.current.value.dark) || (newTheme === 'light' && !theme.global.current.value.dark)) {
+        return;
     }
-  },
-  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;
-  }
+    theme.global.name.value = newTheme;
+    localStorage.setItem('theme', newTheme);  // Store the selected theme in localStorage
 }
-</script>
 
+watch(() => theme.global.current.value.dark, (newVal: boolean) => {
+    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/web/satellite/vuetify-poc/src/layouts/default/Default.vue b/web/satellite/vuetify-poc/src/layouts/default/Default.vue
index 67b2e7bfd738..02c6f13671db 100644
--- a/web/satellite/vuetify-poc/src/layouts/default/Default.vue
+++ b/web/satellite/vuetify-poc/src/layouts/default/Default.vue
@@ -12,10 +12,11 @@
 <script setup lang="ts">
 import { onBeforeMount } from 'vue';
 import { useRouter } from 'vue-router';
+import { VApp } from 'vuetify/components';
 
-import DefaultBar from './AppBar.vue'
-import ProjectNav from './ProjectNav.vue'
-import DefaultView from './View.vue'
+import DefaultBar from './AppBar.vue';
+import ProjectNav from './ProjectNav.vue';
+import DefaultView from './View.vue';
 
 import { RouteConfig } from '@/types/router';
 import { Project } from '@/types/projects';
diff --git a/web/satellite/vuetify-poc/src/layouts/default/ProjectNav.vue b/web/satellite/vuetify-poc/src/layouts/default/ProjectNav.vue
index 1de7a5ad9017..27f8530184c6 100644
--- a/web/satellite/vuetify-poc/src/layouts/default/ProjectNav.vue
+++ b/web/satellite/vuetify-poc/src/layouts/default/ProjectNav.vue
@@ -2,250 +2,249 @@
 // See LICENSE for copying information.
 
 <template>
-
-  <v-navigation-drawer
-    v-model="drawer"
-    class="py-1"
-  >
-    <v-sheet>
-      <v-list class="px-2" color="default" variant="flat">
-
-        <!-- Project -->
-        <v-list-item link class="pa-4 rounded-lg">
-          <v-menu activator="parent" location="end" transition="scale-transition">
-
-              <!-- Project Menu -->
-              <v-list class="pa-2">
-
-                <!-- My Projects -->
-                <v-list-item rounded="lg" link router-link to="/projects">
-                  <template v-slot:prepend>
-                    <!-- <img src="@poc/assets/icon-project.svg" alt="Projects"> -->
-                    <IconProject/>
-                  </template>
-                  <v-list-item-title class="text-body-2 ml-3">
-                    <v-chip color="purple2" variant="tonal" size="small" rounded="xl" class="font-weight-bold" link>
-                    My Projects
-                    </v-chip>
-                  </v-list-item-title>
+    <v-navigation-drawer class="py-1">
+        <v-sheet>
+            <v-list class="px-2" color="default" variant="flat">
+                <!-- Project -->
+                <v-list-item link class="pa-4 rounded-lg">
+                    <v-menu activator="parent" location="end" transition="scale-transition">
+                        <!-- Project Menu -->
+                        <v-list class="pa-2">
+                            <!-- My Projects -->
+                            <v-list-item rounded="lg" link router-link to="/projects">
+                                <template #prepend>
+                                    <!-- <img src="@poc/assets/icon-project.svg" alt="Projects"> -->
+                                    <IconProject />
+                                </template>
+                                <v-list-item-title class="text-body-2 ml-3">
+                                    <v-chip color="purple2" variant="tonal" size="small" rounded="xl" class="font-weight-bold" link>
+                                        My Projects
+                                    </v-chip>
+                                </v-list-item-title>
+                            </v-list-item>
+
+                            <!-- Selected Project -->
+                            <v-list-item link rounded="lg" active>
+                                <template #prepend>
+                                    <img src="@poc/assets/icon-check-color.svg" alt="Selected Project">
+                                </template>
+                                <v-list-item-title class="text-body-2 ml-3">
+                                    My First Project
+                                </v-list-item-title>
+                            </v-list-item>
+
+                            <v-divider class="my-2" />
+
+                            <!-- Shared With Me -->
+                            <v-list-item rounded="lg" link router-link to="/projects">
+                                <template #prepend>
+                                    <IconProject />
+                                </template>
+                                <v-list-item-title class="text-body-2 ml-3">
+                                    <v-chip color="green" variant="tonal" size="small" rounded="xl" class="font-weight-bold" link>
+                                        Shared Projects
+                                    </v-chip>
+                                </v-list-item-title>
+                            </v-list-item>
+
+                            <!-- Other Project -->
+                            <v-list-item link rounded="lg">
+                                <v-list-item-title class="text-body-2">
+                                    Storj Labs
+                                </v-list-item-title>
+                            </v-list-item>
+
+                            <v-divider class="my-2" />
+
+                            <!-- Project Settings -->
+                            <v-list-item link rounded="lg">
+                                <template #prepend>
+                                    <IconSettings />
+                                </template>
+                                <v-list-item-title class="text-body-2 ml-3">
+                                    Project Settings
+                                </v-list-item-title>
+                            </v-list-item>
+
+                            <!-- <v-divider class="my-2"></v-divider> -->
+
+                            <!-- View All Projects -->
+                            <v-list-item link rounded="lg" router-link to="/projects">
+                                <template #prepend>
+                                    <IconAllProjects />
+                                </template>
+                                <v-list-item-title class="text-body-2 ml-3">
+                                    View All Projects
+                                </v-list-item-title>
+                            </v-list-item>
+
+                            <!-- Create New Project -->
+                            <v-list-item link rounded="lg">
+                                <template #prepend>
+                                    <IconNew />
+                                </template>
+                                <v-list-item-title class="text-body-2 ml-3">
+                                    Create New Project
+                                </v-list-item-title>
+                            </v-list-item>
+
+                            <v-divider class="my-2" />
+
+                            <!-- Manage Passphrase -->
+                            <v-list-item link class="mt-1" rounded="lg">
+                                <template #prepend>
+                                    <IconPassphrase />
+                                </template>
+                                <v-list-item-title class="text-body-2 ml-3">
+                                    Manage Passphrase
+                                </v-list-item-title>
+                            </v-list-item>
+                        </v-list>
+                    </v-menu>
+                    <template #prepend>
+                        <IconProject />
+                    </template>
+                    <v-list-item-title link class="text-body-2 ml-3">
+                        Project
+                    </v-list-item-title>
+                    <v-list-item-subtitle class="ml-3">
+                        My first project
+                    </v-list-item-subtitle>
+                    <template #append>
+                        <img src="@poc/assets/icon-right.svg" alt="Project" width="10">
+                    </template>
                 </v-list-item>
 
-                <!-- Selected Project -->
-                <v-list-item link rounded="lg" active>
-                  <template v-slot:prepend>
-                    <img src="@poc/assets/icon-check-color.svg" alt="Selected Project">
-                  </template>
-                  <v-list-item-title class="text-body-2 ml-3">
-                      My First Project
-                  </v-list-item-title>
-                </v-list-item>
-
-                <v-divider class="my-2"></v-divider>
+                <v-divider class="my-2" />
 
-                <!-- Shared With Me -->
-                <v-list-item rounded="lg" link router-link to="/projects">
-                  <template v-slot:prepend>
-                    <IconProject/>
-                  </template>
-                  <v-list-item-title class="text-body-2 ml-3">
-                    <v-chip color="green" variant="tonal" size="small" rounded="xl" class="font-weight-bold" link>
-                    Shared Projects
-                    </v-chip>
-                  </v-list-item-title>
+                <v-list-item link router-link to="/dashboard" class="my-1 py-3" rounded="lg">
+                    <template #prepend>
+                        <IconDashboard />
+                    </template>
+                    <v-list-item-title class="text-body-2 ml-3">
+                        Overview
+                    </v-list-item-title>
                 </v-list-item>
 
-                <!-- Other Project -->
-                <v-list-item link rounded="lg">
-                  <v-list-item-title class="text-body-2">
-                      Storj Labs
-                  </v-list-item-title>
+                <v-list-item link router-link to="/buckets" class="my-1" rounded="lg">
+                    <template #prepend>
+                        <IconBucket />
+                    </template>
+                    <v-list-item-title class="text-body-2 ml-3">
+                        Buckets
+                    </v-list-item-title>
                 </v-list-item>
 
-                <v-divider class="my-2"></v-divider>
-
-                <!-- Project Settings -->
-                <v-list-item link rounded="lg">
-                  <template v-slot:prepend>
-                    <IconSettings/>
-                  </template>
-                  <v-list-item-title class="text-body-2 ml-3">
-                    Project Settings
-                  </v-list-item-title>
-                </v-list-item>
-
-                <!-- <v-divider class="my-2"></v-divider> -->
-
-                <!-- View All Projects -->
-                <v-list-item link rounded="lg" router-link to="/projects">
-                  <template v-slot:prepend>
-                    <IconAllProjects/>
-                  </template>
-                  <v-list-item-title class="text-body-2 ml-3">
-                    View All Projects
-                  </v-list-item-title>
-                </v-list-item>
-
-                <!-- Create New Project -->
-                <v-list-item link rounded="lg">
-                  <template v-slot:prepend>
-                    <IconNew />
-                  </template>
-                  <v-list-item-title class="text-body-2 ml-3">
-                    Create New Project
-                  </v-list-item-title>
-                </v-list-item>
-
-                <v-divider class="my-2"></v-divider>
-
-                <!-- Manage Passphrase -->
-                <v-list-item link class="mt-1" rounded="lg">
-                  <template v-slot:prepend>
-                    <IconPassphrase/>
-                  </template>
-                  <v-list-item-title class="text-body-2 ml-3">
-                    Manage Passphrase
-                  </v-list-item-title>
+                <v-list-item link router-link to="/bucket" class="my-1" rounded="lg">
+                    <template #prepend>
+                        <IconBrowse />
+                    </template>
+                    <v-list-item-title class="text-body-2 ml-3">
+                        Browse
+                    </v-list-item-title>
                 </v-list-item>
-              </v-list>
-          </v-menu>
-          <template v-slot:prepend>
-            <IconProject/>
-          </template>
-          <v-list-item-title link class="text-body-2 ml-3">
-            Project
-          </v-list-item-title>
-          <v-list-item-subtitle class="ml-3">
-              My first project
-            </v-list-item-subtitle>
-          <template v-slot:append>
-            <img src="@poc/assets/icon-right.svg" alt="Project" width="10">
-          </template>
-        </v-list-item>
 
-        <v-divider class="my-2"></v-divider>
-
-        <v-list-item link router-link to="/dashboard" class="my-1 py-3" rounded="lg">
-          <template v-slot:prepend>
-            <IconDashboard/>
-          </template>
-          <v-list-item-title class="text-body-2 ml-3">
-            Overview
-          </v-list-item-title>
-        </v-list-item>
-
-        <v-list-item link router-link to="/buckets" class="my-1" rounded="lg">
-          <template v-slot:prepend>
-            <IconBucket/>
-          </template>
-          <v-list-item-title class="text-body-2 ml-3">
-            Buckets
-          </v-list-item-title>
-        </v-list-item>
-
-        <v-list-item link router-link to="/bucket" class="my-1" rounded="lg">
-          <template v-slot:prepend>
-            <IconBrowse/>
-          </template>
-          <v-list-item-title class="text-body-2 ml-3">
-            Browse
-          </v-list-item-title>
-        </v-list-item>
-
-        <v-list-item link router-link to="/access" class="my-1" rounded="lg">
-          <template v-slot:prepend>
-            <IconAccess/>
-          </template>
-          <v-list-item-title class="text-body-2 ml-3">
-            Access
-          </v-list-item-title>
-        </v-list-item>
-
-        <v-list-item link router-link to="/team" class="my-1" rounded="lg">
-          <template v-slot:prepend>
-            <IconTeam/>
-          </template>
-          <v-list-item-title class="text-body-2 ml-3">
-            Team
-          </v-list-item-title>
-        </v-list-item>
-
-        <v-divider class="my-2"></v-divider>
-
-        <!-- Resources Menu -->
-        <v-list-item link class="rounded-lg">
-
-          <v-menu activator="parent" location="end" transition="scale-transition">
-              <v-list class="pa-2">
-
-                <v-list-item link class="py-3" rounded="lg">
-                  <template v-slot:prepend>
-                    <!-- <img src="@poc/assets/icon-docs.svg" alt="Docs"> -->
-                    <IconDocs/>
-                  </template>
-                  <v-list-item-title class="text-body-2 mx-3">
-                    Documentation
-                  </v-list-item-title>
-                  <v-list-item-subtitle class="mx-3">
-                    <small>Go to the Storj docs.</small>
-                  </v-list-item-subtitle>
+                <v-list-item link router-link to="/access" class="my-1" rounded="lg">
+                    <template #prepend>
+                        <IconAccess />
+                    </template>
+                    <v-list-item-title class="text-body-2 ml-3">
+                        Access
+                    </v-list-item-title>
                 </v-list-item>
 
-                <v-list-item link class="py-3" rounded="lg">
-                  <template v-slot:prepend>
-                    <IconForum/>
-                  </template>
-                  <v-list-item-title class="text-body-2 mx-3">
-                    Community Forum
-                  </v-list-item-title>
-                  <v-list-item-subtitle class="mx-3">
-                    <small>Join our global community.</small>
-                  </v-list-item-subtitle>
+                <v-list-item link router-link to="/team" class="my-1" rounded="lg">
+                    <template #prepend>
+                        <IconTeam />
+                    </template>
+                    <v-list-item-title class="text-body-2 ml-3">
+                        Team
+                    </v-list-item-title>
                 </v-list-item>
 
-                <v-list-item link class="py-3" rounded="lg">
-                  <template v-slot:prepend>
-                    <IconSupport/>
-                  </template>
-                  <v-list-item-title class="text-body-2 mx-3">
-                    Storj Support
-                  </v-list-item-title>
-                  <v-list-item-subtitle class="mx-3">
-                    <small>Need help? Get support.</small>
-                  </v-list-item-subtitle>
+                <v-divider class="my-2" />
+
+                <!-- Resources Menu -->
+                <v-list-item link class="rounded-lg">
+                    <v-menu activator="parent" location="end" transition="scale-transition">
+                        <v-list class="pa-2">
+                            <v-list-item link class="py-3" rounded="lg">
+                                <template #prepend>
+                                    <!-- <img src="@poc/assets/icon-docs.svg" alt="Docs"> -->
+                                    <IconDocs />
+                                </template>
+                                <v-list-item-title class="text-body-2 mx-3">
+                                    Documentation
+                                </v-list-item-title>
+                                <v-list-item-subtitle class="mx-3">
+                                    <small>Go to the Storj docs.</small>
+                                </v-list-item-subtitle>
+                            </v-list-item>
+
+                            <v-list-item link class="py-3" rounded="lg">
+                                <template #prepend>
+                                    <IconForum />
+                                </template>
+                                <v-list-item-title class="text-body-2 mx-3">
+                                    Community Forum
+                                </v-list-item-title>
+                                <v-list-item-subtitle class="mx-3">
+                                    <small>Join our global community.</small>
+                                </v-list-item-subtitle>
+                            </v-list-item>
+
+                            <v-list-item link class="py-3" rounded="lg">
+                                <template #prepend>
+                                    <IconSupport />
+                                </template>
+                                <v-list-item-title class="text-body-2 mx-3">
+                                    Storj Support
+                                </v-list-item-title>
+                                <v-list-item-subtitle class="mx-3">
+                                    <small>Need help? Get support.</small>
+                                </v-list-item-subtitle>
+                            </v-list-item>
+                        </v-list>
+                    </v-menu>
+
+                    <template #prepend>
+                        <IconResources />
+                    </template>
+                    <v-list-item-title class="text-body-2 ml-3">
+                        Resources
+                    </v-list-item-title>
+                    <template #append>
+                        <img src="@poc/assets/icon-right.svg" alt="Resources" width="10">
+                    </template>
                 </v-list-item>
-              </v-list>
-          </v-menu>
-
-          <template v-slot:prepend>
-            <IconResources/>
-          </template>
-          <v-list-item-title class="text-body-2 ml-3">
-            Resources
-          </v-list-item-title>
-          <template v-slot:append>
-            <img src="@poc/assets/icon-right.svg" alt="Resources" width="10">
-          </template>
-        </v-list-item>
-
-        <v-divider class="my-2"></v-divider>
-
-        <!-- <v-list-item link class="my-1" router-link to="/design-library" rounded="lg">
-          <template v-slot:prepend>
-            <img src="@poc/assets/icon-bookmark.svg" alt="Design Library" class="mr-3">
-          </template>
-          <v-list-item-title class="text-body-2">
-            Design Library
-          </v-list-item-title>
-        </v-list-item> -->
-
-      </v-list>
-    </v-sheet>
-
-  </v-navigation-drawer>
 
+                <v-divider class="my-2" />
+
+                <!-- <v-list-item link class="my-1" router-link to="/design-library" rounded="lg">
+                    <template v-slot:prepend>
+                        <img src="@poc/assets/icon-bookmark.svg" alt="Design Library" class="mr-3">
+                    </template>
+                    <v-list-item-title class="text-body-2">
+                        Design Library
+                    </v-list-item-title>
+                </v-list-item> -->
+            </v-list>
+        </v-sheet>
+    </v-navigation-drawer>
 </template>
 
-<script>
+<script setup lang="ts">
+import {
+    VNavigationDrawer,
+    VSheet,
+    VList,
+    VListItem,
+    VListItemTitle,
+    VListItemSubtitle,
+    VMenu,
+    VChip,
+    VDivider,
+} from 'vuetify/components';
 
 import IconProject from '@poc/components/icons/IconProject.vue';
 import IconSettings from '@poc/components/icons/IconSettings.vue';
@@ -261,27 +260,4 @@ import IconDocs from '@poc/components/icons/IconDocs.vue';
 import IconForum from '@poc/components/icons/IconForum.vue';
 import IconSupport from '@poc/components/icons/IconSupport.vue';
 import IconResources from '@poc/components/icons/IconResources.vue';
-
-export default {
-  components: {
-    IconProject,
-    IconSettings,
-    IconAllProjects,
-    IconNew,
-    IconPassphrase,
-    IconDashboard,
-    IconBucket,
-    IconBrowse,
-    IconAccess,
-    IconTeam,
-    IconDocs,
-    IconForum,
-    IconSupport,
-    IconResources,
-  },
-  data: () => ({
-      drawer: true,
-      menu: false,
-  }),
-}
-</script>
\ No newline at end of file
+</script>
diff --git a/web/satellite/vuetify-poc/src/layouts/default/View.vue b/web/satellite/vuetify-poc/src/layouts/default/View.vue
index 73e12e47224d..0516bda5158b 100644
--- a/web/satellite/vuetify-poc/src/layouts/default/View.vue
+++ b/web/satellite/vuetify-poc/src/layouts/default/View.vue
@@ -2,11 +2,12 @@
 // See LICENSE for copying information.
 
 <template>
-  <v-main>
-    <router-view />
-  </v-main>
+    <v-main>
+        <router-view />
+    </v-main>
 </template>
 
-<script setup>
-  //
+<script setup lang="ts">
+import { VMain } from 'vuetify/components';
+import { RouterView } from 'vue-router';
 </script>
diff --git a/web/satellite/vuetify-poc/src/main.ts b/web/satellite/vuetify-poc/src/main.ts
index 0e47612d92bc..645ae1803665 100644
--- a/web/satellite/vuetify-poc/src/main.ts
+++ b/web/satellite/vuetify-poc/src/main.ts
@@ -8,20 +8,21 @@
  */
 
 // Components
-import App from './App.vue'
+import { createApp } from 'vue';
+
+import App from './App.vue';
 
 // Composables
-import { createApp } from 'vue'
 
 // Styles
-import './styles/settings.scss'
+import './styles/settings.scss';
 // import './styles/styles.scss'
 
 // Plugins
-import { registerPlugins } from '@poc/plugins'
+import { registerPlugins } from '@poc/plugins';
 
-const app = createApp(App)
+const app = createApp(App);
 
-registerPlugins(app)
+registerPlugins(app);
 
-app.mount('#app')
+app.mount('#app');
diff --git a/web/satellite/vuetify-poc/src/plugins/index.ts b/web/satellite/vuetify-poc/src/plugins/index.ts
index 94d6b65b15b1..6b3c4c5ea9f8 100644
--- a/web/satellite/vuetify-poc/src/plugins/index.ts
+++ b/web/satellite/vuetify-poc/src/plugins/index.ts
@@ -9,17 +9,19 @@
 
 // Plugins
 import { createPinia, setActivePinia } from 'pinia';
-import { loadFonts } from './webfontloader'
-import vuetify from './vuetify'
-import router from '../router'
+
+import router from '../router';
+
+import { loadFonts } from './webfontloader';
+import vuetify from './vuetify';
 
 const pinia = createPinia();
 setActivePinia(pinia);
 
 export function registerPlugins (app) {
-  loadFonts()
-  app
-    .use(vuetify)
-    .use(router)
-    .use(pinia)
+    loadFonts();
+    app
+        .use(vuetify)
+        .use(router)
+        .use(pinia);
 }
diff --git a/web/satellite/vuetify-poc/src/plugins/vuetify.ts b/web/satellite/vuetify-poc/src/plugins/vuetify.ts
index f953e5153cba..1149127e832e 100644
--- a/web/satellite/vuetify-poc/src/plugins/vuetify.ts
+++ b/web/satellite/vuetify-poc/src/plugins/vuetify.ts
@@ -7,104 +7,92 @@
  * Framework documentation: https://vuetifyjs.com`
  */
 
-// Styles
-import '@mdi/font/css/materialdesignicons.css'
-// import 'vuetify/styles'
+import '@mdi/font/css/materialdesignicons.css';
+import { createVuetify } from 'vuetify';
+import { VDataTable } from 'vuetify/labs/VDataTable';
+import { md3 } from 'vuetify/blueprints';
 
-// Composables
-import { createVuetify } from 'vuetify'
-
-// Data Table
-import { VDataTable } from 'vuetify/labs/VDataTable'
-
-// Material Design 2
-// import { md2 } from 'vuetify/blueprints'
-
-// Matrial Design 3
-import { md3 } from 'vuetify/blueprints'
-
-// Storj Styles
-import '../styles/styles.scss'
+import '../styles/styles.scss';
 
 // https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
 export default createVuetify({
-  // Use blueprint for Material Design 2
-  // blueprint: md2,
-  // Use blueprint for Material Design 3
-  blueprint: md3,
-  theme: {
-    themes: {
-      light: {
-        colors: {
-          primary: '#0149FF',
-          secondary: '#0218A7',
-          info: '#537CFF',
-          success: '#00AC26',
-          warning: '#FF8A00',
-          error: '#FF458B',
-          error2: '#FF0149',
-          surface: '#FFF',
-          purple: '#7B61FF',
-          blue6:  '#091c45',
-          blue5: '#0218A7',
-          blue4: '#0059D0',
-          blue2: '#003ACD',
-          yellow: '#FFC600',
-          yellow2: '#FFB701',
-          orange: '#FFA800',
-          green: '#00B150',
-          purple2: '#502EFF',
+    // Use blueprint for Material Design 2
+    // blueprint: md2,
+    // Use blueprint for Material Design 3
+    blueprint: md3,
+    theme: {
+        themes: {
+            light: {
+                colors: {
+                    primary: '#0149FF',
+                    secondary: '#0218A7',
+                    info: '#537CFF',
+                    success: '#00AC26',
+                    warning: '#FF8A00',
+                    error: '#FF458B',
+                    error2: '#FF0149',
+                    surface: '#FFF',
+                    purple: '#7B61FF',
+                    blue6:  '#091c45',
+                    blue5: '#0218A7',
+                    blue4: '#0059D0',
+                    blue2: '#003ACD',
+                    yellow: '#FFC600',
+                    yellow2: '#FFB701',
+                    orange: '#FFA800',
+                    green: '#00B150',
+                    purple2: '#502EFF',
+                },
+            },
+            dark: {
+                colors: {
+                    primary: '#0149FF',
+                    secondary: '#537CFF',
+                    // background: '#010923',
+                    // background: '#0c121d',
+                    background: '#0d1116',
+                    error: '#FF458B',
+                    error2: '#FF0149',
+                    // surface: '#010923',
+                    // surface: '#0c121d', dark bluish
+                    surface: '#0d1116',
+                    purple: '#7B61FF',
+                    blue6:  '#091c45',
+                    blue5: '#2196f3',
+                    blue4: '#0059D0',
+                    blue2: '#003ACD',
+                    yellow: '#FFC600',
+                    yellow2: '#FFB701',
+                    orange: '#FFA800',
+                    warning: '#FF8A00',
+                    green: '#00B150',
+                    purple2: '#7B61FF',
+                },
+            },
         },
-      },
-      dark: {
-        colors: {
-          primary: '#0149FF',
-          secondary: '#537CFF',
-          // background: '#010923',
-          // background: '#0c121d',
-          background: '#0d1116',
-          error: '#FF458B',
-          error2: '#FF0149',
-          // surface: '#010923',
-          // surface: '#0c121d', dark bluish
-          surface: '#0d1116',
-          purple: '#7B61FF',
-          blue6:  '#091c45',
-          blue5: '#2196f3',
-          blue4: '#0059D0',
-          blue2: '#003ACD',
-          yellow: '#FFC600',
-          yellow2: '#FFB701',
-          orange: '#FFA800',
-          warning: '#FF8A00',
-          green: '#00B150',
-          purple2: '#7B61FF',
-        }
-      },
-    },
-  },
-  components: {
-    VDataTable,
-  },
-  defaults: {
-    global: {
-      // ripple: false,
     },
-    VDataTable: {
-      fixedHeader: true,
-      noDataText: 'Results not found',
+    components: {
+        VDataTable,
     },
-    VBtn: {
-      // elevation: 1,
-      density: 'default',
-      // height: 48,
-      rounded: 'lg',
-      // textTransform: 'none',
-      class: 'text-capitalize font-weight-bold',
-      style: 'letter-spacing:0;'
-    },
-    VTooltip: {
-      transition: 'fade-transition',
+    defaults: {
+        global: {
+            // ripple: false,
+        },
+        VDataTable: {
+            fixedHeader: true,
+            noDataText: 'Results not found',
+        },
+        VBtn: {
+            // elevation: 1,
+            density: 'default',
+            // height: 48,
+            rounded: 'lg',
+            // textTransform: 'none',
+            class: 'text-capitalize font-weight-bold',
+            style: 'letter-spacing:0;',
+        },
+        VTooltip: {
+            transition: 'fade-transition',
+        },
     },
-  },
-})
\ No newline at end of file
+});
\ No newline at end of file
diff --git a/web/satellite/vuetify-poc/src/plugins/webfontloader.ts b/web/satellite/vuetify-poc/src/plugins/webfontloader.ts
index ff5a3bc7c36d..90b95e983fad 100644
--- a/web/satellite/vuetify-poc/src/plugins/webfontloader.ts
+++ b/web/satellite/vuetify-poc/src/plugins/webfontloader.ts
@@ -8,11 +8,11 @@
  */
 
 export async function loadFonts () {
-  const webFontLoader = await import(/* webpackChunkName: "webfontloader" */'webfontloader')
+    const webFontLoader = await import(/* webpackChunkName: "webfontloader" */'webfontloader');
 
-  webFontLoader.load({
-    google: {
-      families: ['Inter:400,500,700&display=swap'],
-    },
-  })
+    webFontLoader.load({
+        google: {
+            families: ['Inter:400,500,700&display=swap'],
+        },
+    });
 }
diff --git a/web/satellite/vuetify-poc/src/router/index.ts b/web/satellite/vuetify-poc/src/router/index.ts
index 77a3cec57d8f..d9d71a3a1adb 100644
--- a/web/satellite/vuetify-poc/src/router/index.ts
+++ b/web/satellite/vuetify-poc/src/router/index.ts
@@ -2,78 +2,78 @@
 // See LICENSE for copying information.
 
 // Composables
-import { createRouter, createWebHistory } from 'vue-router'
+import { createRouter, createWebHistory } from 'vue-router';
 
 const routes = [
-  {
-    path: '/vuetifypoc',
-    redirect: { path: '/projects' }, // redirect
-    component: () => import('@poc/layouts/default/Default.vue'),
-    children: [
-      {
-        path: '/dashboard',
-        name: 'Dashboard',
-        component: () => import(/* webpackChunkName: "home" */ '@poc/views/Dashboard.vue'),
-      },
-      {
-        path: '/buckets',
-        name: 'Buckets',
-        component: () => import(/* webpackChunkName: "Buckets" */ '@poc/views/Buckets.vue'),
-      },
-      {
-        path: '/bucket',
-        name: 'Bucket',
-        component: () => import(/* webpackChunkName: "Buckets" */ '@poc/views/Bucket.vue'),
-      },
-      {
-        path: '/access',
-        name: 'Access',
-        component: () => import(/* webpackChunkName: "Access" */ '@poc/views/Access.vue'),
-      },
-      {
-        path: '/team',
-        name: 'Team',
-        component: () => import(/* webpackChunkName: "Team" */ '@poc/views/Team.vue'),
-      },
-    ],
-  },
-  {
-    path: '/account',
-    component: () => import('@poc/layouts/default/Account.vue'),
-    children: [
-      {
-        path: '/billing',
-        name: 'Billing',
-        component: () => import(/* webpackChunkName: "Billing" */ '@poc/views/Billing.vue'),
-      },
-      {
-        path: '/account-settings',
-        name: 'Account Settings',
-        component: () => import(/* webpackChunkName: "MyAccount" */ '@poc/views/AccountSettings.vue'),
-      },
-      {
-        path: '/design-library',
-        name: 'Design Library',
-        component: () => import(/* webpackChunkName: "DesignLibrary" */ '@poc/views/DesignLibrary.vue'),
-      },
-    ],
-  },
-  {
-    path: '/projects',
-    component: () => import('@poc/layouts/default/AllProjects.vue'),
-    children: [
-      {
+    {
+        path: '/vuetifypoc',
+        redirect: { path: '/projects' }, // redirect
+        component: () => import('@poc/layouts/default/Default.vue'),
+        children: [
+            {
+                path: '/dashboard',
+                name: 'Dashboard',
+                component: () => import(/* webpackChunkName: "home" */ '@poc/views/Dashboard.vue'),
+            },
+            {
+                path: '/buckets',
+                name: 'Buckets',
+                component: () => import(/* webpackChunkName: "Buckets" */ '@poc/views/Buckets.vue'),
+            },
+            {
+                path: '/bucket',
+                name: 'Bucket',
+                component: () => import(/* webpackChunkName: "Buckets" */ '@poc/views/Bucket.vue'),
+            },
+            {
+                path: '/access',
+                name: 'Access',
+                component: () => import(/* webpackChunkName: "Access" */ '@poc/views/Access.vue'),
+            },
+            {
+                path: '/team',
+                name: 'Team',
+                component: () => import(/* webpackChunkName: "Team" */ '@poc/views/Team.vue'),
+            },
+        ],
+    },
+    {
+        path: '/account',
+        component: () => import('@poc/layouts/default/Account.vue'),
+        children: [
+            {
+                path: '/billing',
+                name: 'Billing',
+                component: () => import(/* webpackChunkName: "Billing" */ '@poc/views/Billing.vue'),
+            },
+            {
+                path: '/account-settings',
+                name: 'Account Settings',
+                component: () => import(/* webpackChunkName: "MyAccount" */ '@poc/views/AccountSettings.vue'),
+            },
+            {
+                path: '/design-library',
+                name: 'Design Library',
+                component: () => import(/* webpackChunkName: "DesignLibrary" */ '@poc/views/DesignLibrary.vue'),
+            },
+        ],
+    },
+    {
         path: '/projects',
-        name: 'Projects',
-        component: () => import(/* webpackChunkName: "Projects" */ '@poc/views/Projects.vue'),
-      },
-    ],
-  },
-]
+        component: () => import('@poc/layouts/default/AllProjects.vue'),
+        children: [
+            {
+                path: '/projects',
+                name: 'Projects',
+                component: () => import(/* webpackChunkName: "Projects" */ '@poc/views/Projects.vue'),
+            },
+        ],
+    },
+];
 
 const router = createRouter({
-  history: createWebHistory(),
-  routes,
-})
+    history: createWebHistory(),
+    routes,
+});
 
-export default router
+export default router;
diff --git a/web/satellite/vuetify-poc/src/views/Access.vue b/web/satellite/vuetify-poc/src/views/Access.vue
index 3f90b3a3afe3..fb7aa83072b4 100644
--- a/web/satellite/vuetify-poc/src/views/Access.vue
+++ b/web/satellite/vuetify-poc/src/views/Access.vue
@@ -2,288 +2,222 @@
 // See LICENSE for copying information.
 
 <template>
-  <v-container>
+    <v-container>
+        <PageTitleComponent title="Access" />
+        <PageSubtitleComponent subtitle="Create Access Grants, S3 Credentials, and API Keys." link="https://docs.storj.io/dcs/access" />
 
-      <PageTitleComponent title="Access"/>
-      <PageSubtitleComponent subtitle="Create Access Grants, S3 Credentials, and API Keys." link="https://docs.storj.io/dcs/access"/>
-
-          <v-col>
+        <v-col>
             <v-row class="mt-2 mb-4">
-
-              <v-btn
-              >
-                <!-- <svg width="16" height="16" viewBox="0 0 18 18" fill="none" class="mr-2" xmlns="http://www.w3.org/2000/svg">
+                <v-btn>
+                    <!-- <svg width="16" height="16" viewBox="0 0 18 18" fill="none" class="mr-2" xmlns="http://www.w3.org/2000/svg">
                 <path d="M4.83987 16.8886L1.47448 17.099C1.17636 17.1176 0.919588 16.891 0.900956 16.5929C0.899551 16.5704 0.899551 16.5479 0.900956 16.5254L1.11129 13.16C1.11951 13.0285 1.17546 12.9045 1.26864 12.8114L5.58927 8.49062L5.57296 8.43619C4.98999 6.44548 5.49345 4.26201 6.96116 2.72323L7.00936 2.67328L7.05933 2.62271C9.35625 0.325796 13.0803 0.325796 15.3772 2.62271C17.6741 4.91963 17.6741 8.64366 15.3772 10.9406C13.8503 12.4674 11.6456 13.0112 9.62856 12.4455L9.56357 12.4269L9.50918 12.4107L5.18856 16.7313C5.09538 16.8244 4.97139 16.8804 4.83987 16.8886ZM2.45229 15.5477L4.38997 15.4266L9.13372 10.6827L9.58862 10.864C11.2073 11.5091 13.072 11.1424 14.3255 9.88889C16.0416 8.17281 16.0416 5.39048 14.3255 3.6744C12.6094 1.95831 9.8271 1.95831 8.11101 3.6744C6.87177 4.91364 6.49924 6.7502 7.11424 8.3559L7.13584 8.41118L7.31711 8.86605L2.57342 13.61L2.45229 15.5477ZM10.7858 7.21411C11.3666 7.79494 12.3083 7.79494 12.8892 7.21411C13.47 6.63328 13.47 5.69157 12.8892 5.11074C12.3083 4.52991 11.3666 4.52991 10.7858 5.11074C10.205 5.69157 10.205 6.63328 10.7858 7.21411Z" fill="currentColor"/>
                 </svg> -->
-                <svg width="16" height="16" class="mr-2" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path d="M10 1C14.9706 1 19 5.02944 19 10C19 14.9706 14.9706 19 10 19C5.02944 19 1 14.9706 1 10C1 5.02944 5.02944 1 10 1ZM10 2.65C5.94071 2.65 2.65 5.94071 2.65 10C2.65 14.0593 5.94071 17.35 10 17.35C14.0593 17.35 17.35 14.0593 17.35 10C17.35 5.94071 14.0593 2.65 10 2.65ZM10.7496 6.8989L10.7499 6.91218L10.7499 9.223H12.9926C13.4529 9.223 13.8302 9.58799 13.8456 10.048C13.8602 10.4887 13.5148 10.8579 13.0741 10.8726L13.0608 10.8729L10.7499 10.873L10.75 13.171C10.75 13.6266 10.3806 13.996 9.925 13.996C9.48048 13.996 9.11807 13.6444 9.10066 13.2042L9.1 13.171L9.09985 10.873H6.802C6.34637 10.873 5.977 10.5036 5.977 10.048C5.977 9.60348 6.32857 9.24107 6.76882 9.22366L6.802 9.223H9.09985L9.1 6.98036C9.1 6.5201 9.46499 6.14276 9.925 6.12745C10.3657 6.11279 10.7349 6.45818 10.7496 6.8989Z" fill="currentColor"/>
-                </svg>
-
-                New Access
-
-                <v-dialog
-                  v-model="dialog"
-                  activator="parent"
-                  min-width="400px"
-                  width="auto"
-                  transition="fade-transition"
-                  scrollable
-                >
-
-                <v-card rounded="xlg">
-                  <v-sheet>
-                    <v-card-item class="pl-7 py-4">
-                      <template v-slot:prepend>
-                        <v-card-title class="font-weight-bold">
-                          <!-- <v-icon
-                          >
-                          <img src="../assets/icon-team.svg" alt="Team">
-                          </v-icon> -->
-                          {{ currentTitle }}
-                        </v-card-title>
-                      </template>
-
-                      <template v-slot:append>
-                        <v-btn
-                          icon="$close"
-                          variant="text"
-                          size="small"
-                          color="default"
-                          @click="dialog = false"
-                        ></v-btn>
-                      </template>
-                    </v-card-item>
-                  </v-sheet>
-
-                  <v-divider></v-divider>
-
-                  <v-window v-model="step">
-                    <v-window-item :value="1">
-                      <v-form class="pa-8 pb-3">
-                        <v-row>
-
-                          <v-col cols="12">
-                            <!-- <h4 class="mb-2">Name</h4> -->
-                            <v-text-field
-                              label="Access Name"
-                              placeholder="Enter name for this access"
-                              variant="outlined"
-                              color="default"
-                              autofocus
-                            ></v-text-field>
-
-                          </v-col>
-
-                          <v-col>
-                            <h4 class="mb-2">Type</h4>
-                            <v-checkbox color="primary" density="compact">
-                              <template v-slot:label>
-                                <span class="mx-2">Access Grant</span>
-                                <span>
-                                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" tabindex="0"><path d="M8 15.2A7.2 7.2 0 118 .8a7.2 7.2 0 010 14.4zm0-1.32A5.88 5.88 0 108 2.12a5.88 5.88 0 000 11.76zm-.6-3.42V8.343a.66.66 0 011.32-.026V10.416c0 .368-.292.67-.66.682a.639.639 0 01-.66-.638zm0-4.92v-.077a.66.66 0 011.32-.026v.059c0 .368-.292.67-.66.682a.639.639 0 01-.66-.638z" fill="currentColor"></path></svg>
-                                <v-tooltip activator="parent" location="top">
-                                  <span>Keys to upload, delete, and view your data. Learn more</span>
-                                </v-tooltip>
-                                </span>
-                              </template>
-                            </v-checkbox>
-                            <v-checkbox color="primary" density="compact">
-                              <template v-slot:label>
-                                <span class="mx-2">S3 Credentials</span>
-                                <span>
-                                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" tabindex="0"><path d="M8 15.2A7.2 7.2 0 118 .8a7.2 7.2 0 010 14.4zm0-1.32A5.88 5.88 0 108 2.12a5.88 5.88 0 000 11.76zm-.6-3.42V8.343a.66.66 0 011.32-.026V10.416c0 .368-.292.67-.66.682a.639.639 0 01-.66-.638zm0-4.92v-.077a.66.66 0 011.32-.026v.059c0 .368-.292.67-.66.682a.639.639 0 01-.66-.638z" fill="currentColor"></path></svg>
-                                  <v-tooltip activator="parent" location="top">
-                                  <span>Generates access key, secret key, and endpoint to use in your S3 supported application. Learn More</span>
-                                </v-tooltip>
-                                </span>
-
-                              </template>
-                            </v-checkbox>
-                            <v-checkbox color="primary" density="compact">
-                              <template v-slot:label>
-                                <span class="mx-2">CLI Access</span>
-                                <span>
-                                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" tabindex="0"><path d="M8 15.2A7.2 7.2 0 118 .8a7.2 7.2 0 010 14.4zm0-1.32A5.88 5.88 0 108 2.12a5.88 5.88 0 000 11.76zm-.6-3.42V8.343a.66.66 0 011.32-.026V10.416c0 .368-.292.67-.66.682a.639.639 0 01-.66-.638zm0-4.92v-.077a.66.66 0 011.32-.026v.059c0 .368-.292.67-.66.682a.639.639 0 01-.66-.638z" fill="currentColor"></path></svg>
-                                <v-tooltip activator="parent" location="top">
-                                  <span>Create an access grant to run in the command line. Learn more</span>
-                                </v-tooltip>
-                                </span>
-                              </template>
-                            </v-checkbox>
-                          </v-col>
-
-                        </v-row>
-                      </v-form>
-                    </v-window-item>
-
-                    <v-window-item :value="2">
-                      <v-form class="pa-8 pb-3">
-                        <v-row>
-                          <v-col cols="12">
-                            <p>Permissions</p>
-                            <p>Buckets</p>
-                            <p>End date</p>
-                          </v-col>
-                        </v-row>
-                      </v-form>
-                    </v-window-item>
-
-                    <v-window-item :value="3">
-                      <v-form class="pa-8 pb-3">
-                        <v-row>
-                          <v-col cols="12">
-                            <v-text-field
-                              label="Password"
-                              type="password"
-                              variant="outlined"
-                            ></v-text-field>
-                            <v-text-field
-                              label="Confirm Password"
-                              type="password"
-                              variant="outlined"
-                            ></v-text-field>
-                          </v-col>
-                        </v-row>
-                      </v-form>
-                    </v-window-item>
-                  </v-window>
-
-                  <v-divider></v-divider>
-
-                  <v-card-actions class="pa-7">
-                    <v-row>
-                      <v-col>
-                        <v-btn
-                          v-if="step == 1"
-                          variant="outlined"
-                          color="default"
-                          block
-                        >
-                          Learn More
-                        </v-btn>
-                        <v-btn
-                          v-if="step > 1"
-                          variant="outlined"
-                          color="default"
-                          block
-                          @click="step--"
-                        >
-                          Back
-                        </v-btn>
-                      </v-col>
-                      <v-col>
-                        <v-btn
-                          v-if="step < 3"
-                          color="primary"
-                          variant="flat"
-                          block
-                          @click="step++"
-                        >
-                          Next
-                        </v-btn>
-                      </v-col>
-                    </v-row>
-                  </v-card-actions>
-                </v-card>
-
-                </v-dialog>
-
-              </v-btn>
-
+                    <svg width="16" height="16" class="mr-2" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M10 1C14.9706 1 19 5.02944 19 10C19 14.9706 14.9706 19 10 19C5.02944 19 1 14.9706 1 10C1 5.02944 5.02944 1 10 1ZM10 2.65C5.94071 2.65 2.65 5.94071 2.65 10C2.65 14.0593 5.94071 17.35 10 17.35C14.0593 17.35 17.35 14.0593 17.35 10C17.35 5.94071 14.0593 2.65 10 2.65ZM10.7496 6.8989L10.7499 6.91218L10.7499 9.223H12.9926C13.4529 9.223 13.8302 9.58799 13.8456 10.048C13.8602 10.4887 13.5148 10.8579 13.0741 10.8726L13.0608 10.8729L10.7499 10.873L10.75 13.171C10.75 13.6266 10.3806 13.996 9.925 13.996C9.48048 13.996 9.11807 13.6444 9.10066 13.2042L9.1 13.171L9.09985 10.873H6.802C6.34637 10.873 5.977 10.5036 5.977 10.048C5.977 9.60348 6.32857 9.24107 6.76882 9.22366L6.802 9.223H9.09985L9.1 6.98036C9.1 6.5201 9.46499 6.14276 9.925 6.12745C10.3657 6.11279 10.7349 6.45818 10.7496 6.8989Z" fill="currentColor" />
+                    </svg>
+
+                    New Access
+
+                    <v-dialog
+                        v-model="dialog"
+                        activator="parent"
+                        min-width="400px"
+                        width="auto"
+                        transition="fade-transition"
+                        scrollable
+                    >
+                        <v-card rounded="xlg">
+                            <v-sheet>
+                                <v-card-item class="pl-7 py-4">
+                                    <template #prepend>
+                                        <v-card-title class="font-weight-bold">
+                                            <!-- <v-icon>
+                                                <img src="../assets/icon-team.svg" alt="Team">
+                                            </v-icon> -->
+                                            {{ stepTitles[step] }}
+                                        </v-card-title>
+                                    </template>
+
+                                    <template #append>
+                                        <v-btn
+                                            icon="$close"
+                                            variant="text"
+                                            size="small"
+                                            color="default"
+                                            @click="dialog = false"
+                                        />
+                                    </template>
+                                </v-card-item>
+                            </v-sheet>
+
+                            <v-divider />
+
+                            <v-window v-model="step">
+                                <v-window-item :value="0">
+                                    <v-form class="pa-8 pb-3">
+                                        <v-row>
+                                            <v-col cols="12">
+                                                <!-- <h4 class="mb-2">Name</h4> -->
+                                                <v-text-field
+                                                    label="Access Name"
+                                                    placeholder="Enter name for this access"
+                                                    variant="outlined"
+                                                    color="default"
+                                                    autofocus
+                                                />
+                                            </v-col>
+
+                                            <v-col>
+                                                <h4 class="mb-2">Type</h4>
+                                                <v-checkbox color="primary" density="compact">
+                                                    <template #label>
+                                                        <span class="mx-2">Access Grant</span>
+                                                        <span>
+                                                            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" tabindex="0"><path d="M8 15.2A7.2 7.2 0 118 .8a7.2 7.2 0 010 14.4zm0-1.32A5.88 5.88 0 108 2.12a5.88 5.88 0 000 11.76zm-.6-3.42V8.343a.66.66 0 011.32-.026V10.416c0 .368-.292.67-.66.682a.639.639 0 01-.66-.638zm0-4.92v-.077a.66.66 0 011.32-.026v.059c0 .368-.292.67-.66.682a.639.639 0 01-.66-.638z" fill="currentColor" /></svg>
+                                                            <v-tooltip activator="parent" location="top">
+                                                                <span>Keys to upload, delete, and view your data. Learn more</span>
+                                                            </v-tooltip>
+                                                        </span>
+                                                    </template>
+                                                </v-checkbox>
+                                                <v-checkbox color="primary" density="compact">
+                                                    <template #label>
+                                                        <span class="mx-2">S3 Credentials</span>
+                                                        <span>
+                                                            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" tabindex="0"><path d="M8 15.2A7.2 7.2 0 118 .8a7.2 7.2 0 010 14.4zm0-1.32A5.88 5.88 0 108 2.12a5.88 5.88 0 000 11.76zm-.6-3.42V8.343a.66.66 0 011.32-.026V10.416c0 .368-.292.67-.66.682a.639.639 0 01-.66-.638zm0-4.92v-.077a.66.66 0 011.32-.026v.059c0 .368-.292.67-.66.682a.639.639 0 01-.66-.638z" fill="currentColor" /></svg>
+                                                            <v-tooltip activator="parent" location="top">
+                                                                <span>Generates access key, secret key, and endpoint to use in your S3 supported application. Learn More</span>
+                                                            </v-tooltip>
+                                                        </span>
+                                                    </template>
+                                                </v-checkbox>
+                                                <v-checkbox color="primary" density="compact">
+                                                    <template #label>
+                                                        <span class="mx-2">CLI Access</span>
+                                                        <span>
+                                                            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" tabindex="0"><path d="M8 15.2A7.2 7.2 0 118 .8a7.2 7.2 0 010 14.4zm0-1.32A5.88 5.88 0 108 2.12a5.88 5.88 0 000 11.76zm-.6-3.42V8.343a.66.66 0 011.32-.026V10.416c0 .368-.292.67-.66.682a.639.639 0 01-.66-.638zm0-4.92v-.077a.66.66 0 011.32-.026v.059c0 .368-.292.67-.66.682a.639.639 0 01-.66-.638z" fill="currentColor" /></svg>
+                                                            <v-tooltip activator="parent" location="top">
+                                                                <span>Create an access grant to run in the command line. Learn more</span>
+                                                            </v-tooltip>
+                                                        </span>
+                                                    </template>
+                                                </v-checkbox>
+                                            </v-col>
+                                        </v-row>
+                                    </v-form>
+                                </v-window-item>
+
+                                <v-window-item :value="1">
+                                    <v-form class="pa-8 pb-3">
+                                        <v-row>
+                                            <v-col cols="12">
+                                                <p>Permissions</p>
+                                                <p>Buckets</p>
+                                                <p>End date</p>
+                                            </v-col>
+                                        </v-row>
+                                    </v-form>
+                                </v-window-item>
+
+                                <v-window-item :value="2">
+                                    <v-form class="pa-8 pb-3">
+                                        <v-row>
+                                            <v-col cols="12">
+                                                <v-text-field
+                                                    label="Password"
+                                                    type="password"
+                                                    variant="outlined"
+                                                />
+                                                <v-text-field
+                                                    label="Confirm Password"
+                                                    type="password"
+                                                    variant="outlined"
+                                                />
+                                            </v-col>
+                                        </v-row>
+                                    </v-form>
+                                </v-window-item>
+                            </v-window>
+
+                            <v-divider />
+
+                            <v-card-actions class="pa-7">
+                                <v-row>
+                                    <v-col>
+                                        <v-btn
+                                            v-if="!step"
+                                            variant="outlined"
+                                            color="default"
+                                            block
+                                        >
+                                            Learn More
+                                        </v-btn>
+                                        <v-btn
+                                            v-else
+                                            variant="outlined"
+                                            color="default"
+                                            block
+                                            @click="step--"
+                                        >
+                                            Back
+                                        </v-btn>
+                                    </v-col>
+                                    <v-col>
+                                        <v-btn
+                                            v-if="step < 2"
+                                            color="primary"
+                                            variant="flat"
+                                            block
+                                            @click="step++"
+                                        >
+                                            Next
+                                        </v-btn>
+                                    </v-col>
+                                </v-row>
+                            </v-card-actions>
+                        </v-card>
+                    </v-dialog>
+                </v-btn>
             </v-row>
-          </v-col>
-
-          <AccessTableComponent/>
+        </v-col>
 
-  </v-container>
+        <AccessTableComponent />
+    </v-container>
 </template>
 
+<script setup lang="ts">
+import { ref } from 'vue';
+import {
+    VContainer,
+    VCol,
+    VRow,
+    VBtn,
+    VDialog,
+    VCard,
+    VSheet,
+    VCardItem,
+    VCardTitle,
+    VDivider,
+    VWindow,
+    VWindowItem,
+    VForm,
+    VTextField,
+    VCheckbox,
+    VTooltip,
+    VCardActions,
+} from 'vuetify/components';
 
-<script>
 import PageTitleComponent from '@poc/components/PageTitleComponent.vue';
 import PageSubtitleComponent from '@poc/components/PageSubtitleComponent.vue';
 import AccessTableComponent from '@poc/components/AccessTableComponent.vue';
 
-export default {
-  components: {
-    PageTitleComponent,
-    PageSubtitleComponent,
-    AccessTableComponent,
-  },
-    data () {
-      return {
-        // dialog with steps
-        dialog: false,
-        step: 1,
-        search: '',
-        selected: [],
-        sortBy: [{ key: 'date', order: 'asc' }],
-        headers: [
-          {
-            title: 'Name',
-            align: 'start',
-            key: 'name',
-          },
-          { title: 'Type', key: 'type' },
-          { title: 'Status', key: 'status' },
-          { title: 'Permissions', key: 'permissions' },
-          { title: 'Date Created', key: 'date' },
-        ],
-        accesses: [
-          {
-            name: 'Backup',
-            date: '02 Mar 2023',
-            type: 'Access Grant',
-            permissions: 'All',
-            status: 'Active',
-          },
-          {
-            name: 'S3 Test',
-            date: '03 Mar 2023',
-            type: 'S3 Credentials',
-            permissions: 'Read, Write',
-            status: 'Expired',
-          },
-          {
-            name: 'CLI Demo',
-            date: '04 Mar 2023',
-            type: 'CLI Access',
-            permissions: 'Read, Write, List',
-            status: 'Active',
-          },
-          {
-            name: 'Sharing',
-            date: '08 Mar 2023',
-            type: 'Access Grant',
-            permissions: 'Read, Delete',
-            status: 'Active',
-          },
-          {
-            name: 'Sync Int',
-            date: '12 Mar 2023',
-            type: 'S3 Credentials',
-            permissions: 'All',
-            status: 'Expired',
-          },
-        ],
-      }
-    },
-    computed: {
-      currentTitle () {
-        switch (this.step) {
-          case 1: return 'Create New Access'
-          case 2: return 'Permissions'
-          case 3: return 'Passphrase'
-          default: return 'Access Created'
-        }
-      },
-    },
-    methods: {
-      getColor (role) {
-        if (role == 'Active') return 'success'
-        else return 'warning'
-      },
-    },
-  }
-</script>
+const dialog = ref<boolean>(false);
+const step = ref<number>(0);
 
+const stepTitles = [
+    'Create New Access',
+    'Permissions',
+    'Passphrase',
+    'Access Created',
+];
+</script>
diff --git a/web/satellite/vuetify-poc/src/views/AccountSettings.vue b/web/satellite/vuetify-poc/src/views/AccountSettings.vue
index 3163f00962f5..8c8b00110216 100644
--- a/web/satellite/vuetify-poc/src/views/AccountSettings.vue
+++ b/web/satellite/vuetify-poc/src/views/AccountSettings.vue
@@ -2,146 +2,150 @@
 // See LICENSE for copying information.
 
 <template>
-  <v-container>
+    <v-container>
+        <!-- <v-breadcrumbs :items="['My Account', 'Settings']" class="pl-0"></v-breadcrumbs> -->
 
-      <!-- <v-breadcrumbs :items="['My Account', 'Settings']" class="pl-0"></v-breadcrumbs> -->
+        <h1 class="text-h5 font-weight-bold mb-2">Settings</h1>
 
-      <h1 class="text-h5 font-weight-bold mb-2">Settings</h1>
-
-      <v-card
-        variant="flat"
-        :border="true"
-        class="mx-auto my-6"
-      >
-
-        <v-list lines="three">
-          <v-list-subheader class="mb-2">Profile</v-list-subheader>
-
-          <v-divider></v-divider>
-
-          <v-list-item>
-            <v-list-item-title>Name</v-list-item-title>
-
-            <v-list-item-subtitle>
-              Tome Boshevski
-            </v-list-item-subtitle>
+        <v-card
+            variant="flat"
+            :border="true"
+            class="mx-auto my-6"
+        >
+            <v-list lines="three">
+                <v-list-subheader class="mb-2">Profile</v-list-subheader>
 
-            <template v-slot:append>
-              <v-list-item-action>
-                <v-btn variant="outlined" color="default" size="small">Edit Name</v-btn>
-              </v-list-item-action>
-            </template>
+                <v-divider />
 
-          </v-list-item>
+                <v-list-item>
+                    <v-list-item-title>Name</v-list-item-title>
 
-          <v-divider></v-divider>
+                    <v-list-item-subtitle>
+                        Tome Boshevski
+                    </v-list-item-subtitle>
 
-          <v-list-item>
-            <v-list-item-title>Email</v-list-item-title>
+                    <template #append>
+                        <v-list-item-action>
+                            <v-btn variant="outlined" color="default" size="small">Edit Name</v-btn>
+                        </v-list-item-action>
+                    </template>
+                </v-list-item>
 
-            <v-list-item-subtitle>
-              tome@storj.io
-            </v-list-item-subtitle>
+                <v-divider />
 
-            <!-- <template v-slot:append>
-              <v-list-item-action>
-                <v-btn>Change Email</v-btn>
-              </v-list-item-action>
-            </template> -->
+                <v-list-item>
+                    <v-list-item-title>Email</v-list-item-title>
 
-          </v-list-item>
-        </v-list>
+                    <v-list-item-subtitle>
+                        tome@storj.io
+                    </v-list-item-subtitle>
 
+                    <!-- <template v-slot:append>
+                         <v-list-item-action>
+                            <v-btn>Change Email</v-btn>
+                        </v-list-item-action>
+                    </template> -->
+                </v-list-item>
+            </v-list>
         </v-card>
         <v-card
-          variant="flat"
-          :border="true"
-          class="mx-auto my-6"
+            variant="flat"
+            :border="true"
+            class="mx-auto my-6"
         >
+            <v-list lines="three">
+                <v-list-subheader class="mb-2">Security</v-list-subheader>
 
-        <v-list lines="three">
-          <v-list-subheader class="mb-2">Security</v-list-subheader>
-
-          <v-divider></v-divider>
+                <v-divider />
 
-          <v-list-item>
-            <v-list-item-title>Password</v-list-item-title>
+                <v-list-item>
+                    <v-list-item-title>Password</v-list-item-title>
 
-            <v-list-item-subtitle>
-              **********
-            </v-list-item-subtitle>
+                    <v-list-item-subtitle>
+                        **********
+                    </v-list-item-subtitle>
 
-            <template v-slot:append>
-              <v-list-item-action>
-                <v-btn variant="outlined" color="default" size="small">Change Password</v-btn>
-              </v-list-item-action>
-            </template>
-          </v-list-item>
+                    <template #append>
+                        <v-list-item-action>
+                            <v-btn variant="outlined" color="default" size="small">Change Password</v-btn>
+                        </v-list-item-action>
+                    </template>
+                </v-list-item>
 
-          <v-divider></v-divider>
+                <v-divider />
 
-          <v-list-item>
-            <v-list-item-title>Two-factor authentication</v-list-item-title>
+                <v-list-item>
+                    <v-list-item-title>Two-factor authentication</v-list-item-title>
 
-            <v-list-item-subtitle>
-              Improve account security by enabling 2FA.
-            </v-list-item-subtitle>
+                    <v-list-item-subtitle>
+                        Improve account security by enabling 2FA.
+                    </v-list-item-subtitle>
 
-            <template v-slot:append>
-              <v-list-item-action>
-                <v-btn size="small">Enable Two-factor</v-btn>
-              </v-list-item-action>
-            </template>
-          </v-list-item>
+                    <template #append>
+                        <v-list-item-action>
+                            <v-btn size="small">Enable Two-factor</v-btn>
+                        </v-list-item-action>
+                    </template>
+                </v-list-item>
 
-          <v-divider></v-divider>
+                <v-divider />
 
-          <v-list-item>
-            <v-list-item-title>Session Timeout</v-list-item-title>
+                <v-list-item>
+                    <v-list-item-title>Session Timeout</v-list-item-title>
 
-            <v-list-item-subtitle>
-              Set timeout to log you out for inactivity.
-            </v-list-item-subtitle>
-
-            <template v-slot:append>
-              <v-list-item-action>
-                <v-btn variant="outlined" color="default" size="small">Set Timeout</v-btn>
-              </v-list-item-action>
-            </template>
-          </v-list-item>
-
-        </v-list>
+                    <v-list-item-subtitle>
+                        Set timeout to log you out for inactivity.
+                    </v-list-item-subtitle>
 
+                    <template #append>
+                        <v-list-item-action>
+                            <v-btn variant="outlined" color="default" size="small">Set Timeout</v-btn>
+                        </v-list-item-action>
+                    </template>
+                </v-list-item>
+            </v-list>
         </v-card>
 
         <v-card
-          variant="flat"
-          :border="true"
-          class="mx-auto my-6"
+            variant="flat"
+            :border="true"
+            class="mx-auto my-6"
         >
+            <v-list lines="three" select-strategy="classic">
+                <v-list-subheader class="mb-2">Notifications</v-list-subheader>
 
-        <v-list lines="three" select-strategy="classic">
-          <v-list-subheader class="mb-2">Notifications</v-list-subheader>
-
-          <v-divider></v-divider>
-
-          <v-list-item value="notifications" color="default">
-            <template v-slot:append="{ isActive }">
+                <v-divider />
 
-              <v-list-item-action start>
-                <v-checkbox-btn :model-value="isActive"></v-checkbox-btn>
-              </v-list-item-action>
-            </template>
+                <v-list-item value="notifications" color="default">
+                    <template #append="{ isActive }">
+                        <v-list-item-action start>
+                            <v-checkbox-btn :model-value="isActive" />
+                        </v-list-item-action>
+                    </template>
 
-            <v-list-item-title>Product newsletter</v-list-item-title>
+                    <v-list-item-title>Product newsletter</v-list-item-title>
 
-            <v-list-item-subtitle>
-              Notify me about product updates.
-            </v-list-item-subtitle>
-          </v-list-item>
-
-        </v-list>
-      </v-card>
-
-  </v-container>
+                    <v-list-item-subtitle>
+                        Notify me about product updates.
+                    </v-list-item-subtitle>
+                </v-list-item>
+            </v-list>
+        </v-card>
+    </v-container>
 </template>
+
+<script setup lang="ts">
+import {
+    VContainer,
+    VCard,
+    VList,
+    VListSubheader,
+    VDivider,
+    VListItem,
+    VListItemTitle,
+    VListItemSubtitle,
+    VListItemAction,
+    VBtn,
+    VCheckboxBtn,
+} from 'vuetify/components';
+</script>
diff --git a/web/satellite/vuetify-poc/src/views/Billing.vue b/web/satellite/vuetify-poc/src/views/Billing.vue
index fe5d4052816f..4f6236afacbb 100644
--- a/web/satellite/vuetify-poc/src/views/Billing.vue
+++ b/web/satellite/vuetify-poc/src/views/Billing.vue
@@ -2,317 +2,310 @@
 // See LICENSE for copying information.
 
 <template>
-  <v-container>
+    <v-container>
+        <!-- <v-breadcrumbs :items="['My Account', 'Billing']" class="pl-0"></v-breadcrumbs> -->
 
-      <!-- <v-breadcrumbs :items="['My Account', 'Billing']" class="pl-0"></v-breadcrumbs> -->
+        <h1 class="text-h5 font-weight-bold mb-6">Billing</h1>
 
-      <h1 class="text-h5 font-weight-bold mb-6">Billing</h1>
-
-      <v-card variant="flat" :border="true" color="default" class="mb-6 rounded">
-        <v-tabs
-          v-model="tab"
-          color="default"
-          center-active
-          show-arrows
-          grow
-        >
-          <v-tab>
-            Overview
-          </v-tab>
-          <v-tab>
-            Payment Methods
-          </v-tab>
-          <v-tab>
-            STORJ Transactions
-          </v-tab>
-          <v-tab>
-            Billing History
-          </v-tab>
-          <v-tab>
-            Billing Information
-          </v-tab>
-        </v-tabs>
-      </v-card>
+        <v-card variant="flat" :border="true" color="default" class="mb-6 rounded">
+            <v-tabs
+                v-model="tab"
+                color="default"
+                center-active
+                show-arrows
+                grow
+            >
+                <v-tab>
+                    Overview
+                </v-tab>
+                <v-tab>
+                    Payment Methods
+                </v-tab>
+                <v-tab>
+                    STORJ Transactions
+                </v-tab>
+                <v-tab>
+                    Billing History
+                </v-tab>
+                <v-tab>
+                    Billing Information
+                </v-tab>
+            </v-tabs>
+        </v-card>
 
         <v-window v-model="tab">
+            <v-window-item>
+                <v-row>
+                    <v-col cols="12" sm="4">
+                        <v-card title="Total Cost" subtitle="Estimated for June 2023" variant="flat" :border="true" rounded="xlg">
+                            <v-card-text>
+                                <v-chip rounded color="success" variant="outlined" class="font-weight-bold mb-2">$24</v-chip>
+                                <v-divider class="my-4" />
+                                <v-btn variant="outlined" color="default" size="small" class="mr-2">View Billing History</v-btn>
+                                <!-- <v-btn variant="tonal" color="default" size="small" class="mr-2">Payment Methods</v-btn> -->
+                            </v-card-text>
+                        </v-card>
+                    </v-col>
 
-          <v-window-item>
-            <v-row>
-
-              <v-col cols="12" sm="4">
-                <v-card title="Total Cost" subtitle="Estimated for June 2023" variant="flat" :border="true" rounded="xlg">
-                  <v-card-text>
-                    <v-chip rounded color="success" variant="outlined" class="font-weight-bold mb-2">$24</v-chip>
-                    <v-divider class="my-4"></v-divider>
-                    <v-btn variant="outlined" color="default" size="small" class="mr-2">View Billing History</v-btn>
-                    <!-- <v-btn variant="tonal" color="default" size="small" class="mr-2">Payment Methods</v-btn> -->
-                  </v-card-text>
-                </v-card>
-              </v-col>
-
-              <v-col cols="12" sm="4">
-                <v-card title="STORJ Token Balance" subtitle="Your STORJ Token Wallet" variant="flat" :border="true" rounded="xlg">
-                  <v-card-text>
-                    <v-chip rounded color="success" variant="outlined" class="font-weight-bold mb-2">$5,284</v-chip>
-                    <v-divider class="my-4"></v-divider>
-                    <v-btn variant="outlined" color="default" size="small" class="mr-2">+ Add STORJ Tokens</v-btn>
-                    <!-- <v-btn variant="tonal" color="default" size="small" class="mr-2">View Transactions</v-btn> -->
-                  </v-card-text>
-                </v-card>
-              </v-col>
-
-              <v-col cols="12" sm="4">
-                <v-card title="Coupon / Free Usage" subtitle="Active / No Expiration" variant="flat" :border="true" rounded="xlg">
-                  <v-card-text>
-                    <v-chip rounded color="success" variant="outlined" class="font-weight-bold mb-2">$1.65 off</v-chip>
-                    <v-divider class="my-4"></v-divider>
-                    <v-btn variant="outlined" color="default" size="small" class="mr-2">+ Add Coupon</v-btn>
-                  </v-card-text>
-                </v-card>
-              </v-col>
-            </v-row>
-
-            <v-row>
-              <v-col>
-                <h4 class="mt-4">Costs per project</h4>
-              </v-col>
-            </v-row>
-
-
-            <v-row>
-              <v-col>
-                <v-card rounded="lg" variant="flat" :border="true" class="mb-4">
-                  <v-expansion-panels>
-                    <v-expansion-panel
-                      title="My First Project"
-                      text="Costs..."
-                      rounded="lg"
-                    >
-                    </v-expansion-panel>
-                  </v-expansion-panels>
-                </v-card>
-                <v-card rounded="lg" variant="flat" :border="true" class="mb-4">
-                  <v-expansion-panels>
-                    <v-expansion-panel
-                      title="Storj Labs"
-                      text="Costs..."
-                      rounded="lg"
-                    >
-                    </v-expansion-panel>
-                  </v-expansion-panels>
-                </v-card>
-                <v-card rounded="lg" variant="flat" :border="true" class="mb-4">
-                  <v-expansion-panels>
-                    <v-expansion-panel
-                      title="Pictures"
-                      text="Costs..."
-                      rounded="lg"
-                    >
-                    </v-expansion-panel>
-                  </v-expansion-panels>
-                </v-card>
-              </v-col>
-            </v-row>
+                    <v-col cols="12" sm="4">
+                        <v-card title="STORJ Token Balance" subtitle="Your STORJ Token Wallet" variant="flat" :border="true" rounded="xlg">
+                            <v-card-text>
+                                <v-chip rounded color="success" variant="outlined" class="font-weight-bold mb-2">$5,284</v-chip>
+                                <v-divider class="my-4" />
+                                <v-btn variant="outlined" color="default" size="small" class="mr-2">+ Add STORJ Tokens</v-btn>
+                                <!-- <v-btn variant="tonal" color="default" size="small" class="mr-2">View Transactions</v-btn> -->
+                            </v-card-text>
+                        </v-card>
+                    </v-col>
 
-          </v-window-item>
+                    <v-col cols="12" sm="4">
+                        <v-card title="Coupon / Free Usage" subtitle="Active / No Expiration" variant="flat" :border="true" rounded="xlg">
+                            <v-card-text>
+                                <v-chip rounded color="success" variant="outlined" class="font-weight-bold mb-2">$1.65 off</v-chip>
+                                <v-divider class="my-4" />
+                                <v-btn variant="outlined" color="default" size="small" class="mr-2">+ Add Coupon</v-btn>
+                            </v-card-text>
+                        </v-card>
+                    </v-col>
+                </v-row>
 
-          <v-window-item>
-            <v-row>
+                <v-row>
+                    <v-col>
+                        <h4 class="mt-4">Costs per project</h4>
+                    </v-col>
+                </v-row>
 
-              <v-col cols="12" sm="4">
-                <v-card title="STORJ Token" variant="flat" :border="true" rounded="xlg">
-                  <v-card-text>
-                    <v-chip rounded color="default" variant="tonal" class="font-weight-bold mr-2">STORJ</v-chip>
-                    <!-- <v-chip rounded color="success" variant="tonal" class="font-weight-bold mr-2">Primary</v-chip> -->
-                    <v-divider class="my-4"></v-divider>
-                    <p>Deposit Address</p>
-                    <v-chip rounded color="default" variant="text" class="font-weight-bold mt-2 pl-0">0x0683 . . . 2759</v-chip>
-                    <v-divider class="my-4"></v-divider>
-                    <p>Total Balance</p>
-                    <v-chip rounded color="success" variant="outlined" class="font-weight-bold mt-2">$5,284</v-chip>
-                    <v-divider class="my-4"></v-divider>
-                    <v-btn variant="flat" color="success" size="small" class="mr-2">+ Add STORJ Tokens</v-btn>
-                    <v-btn variant="outlined" color="default" size="small" class="mr-2">View Transactions</v-btn>
-                  </v-card-text>
-                </v-card>
-              </v-col>
+                <v-row>
+                    <v-col>
+                        <v-card rounded="lg" variant="flat" :border="true" class="mb-4">
+                            <v-expansion-panels>
+                                <v-expansion-panel
+                                    title="My First Project"
+                                    text="Costs..."
+                                    rounded="lg"
+                                />
+                            </v-expansion-panels>
+                        </v-card>
+                        <v-card rounded="lg" variant="flat" :border="true" class="mb-4">
+                            <v-expansion-panels>
+                                <v-expansion-panel
+                                    title="Storj Labs"
+                                    text="Costs..."
+                                    rounded="lg"
+                                />
+                            </v-expansion-panels>
+                        </v-card>
+                        <v-card rounded="lg" variant="flat" :border="true" class="mb-4">
+                            <v-expansion-panels>
+                                <v-expansion-panel
+                                    title="Pictures"
+                                    text="Costs..."
+                                    rounded="lg"
+                                />
+                            </v-expansion-panels>
+                        </v-card>
+                    </v-col>
+                </v-row>
+            </v-window-item>
 
-              <v-col cols="12" sm="4">
-                <v-card title="Credit Card" variant="flat" :border="true" rounded="xlg">
-                  <v-card-text>
-                    <v-chip rounded color="default" variant="tonal" class="font-weight-bold mr-2">Visa</v-chip>
-                    <!-- <v-chip rounded color="primary" variant="tonal" class="font-weight-bold mr-2">Default</v-chip> -->
-                    <v-divider class="my-4"></v-divider>
-                    <p>Card Number</p>
-                    <v-chip rounded color="default" variant="text" class="pl-0 font-weight-bold mt-2">**** **** **** 2759</v-chip>
-                    <v-divider class="my-4"></v-divider>
-                    <p>Exp. Date</p>
-                    <v-chip rounded color="default" variant="text" class="pl-0 font-weight-bold mt-2">12/27</v-chip>
-                    <v-divider class="my-4"></v-divider>
-                    <v-btn variant="outlined" color="default" size="small" class="mr-2">Edit</v-btn>
-                    <v-btn variant="outlined" color="default" size="small" class="mr-2">Remove</v-btn>
-                  </v-card-text>
-                </v-card>
-              </v-col>
+            <v-window-item>
+                <v-row>
+                    <v-col cols="12" sm="4">
+                        <v-card title="STORJ Token" variant="flat" :border="true" rounded="xlg">
+                            <v-card-text>
+                                <v-chip rounded color="default" variant="tonal" class="font-weight-bold mr-2">STORJ</v-chip>
+                                <!-- <v-chip rounded color="success" variant="tonal" class="font-weight-bold mr-2">Primary</v-chip> -->
+                                <v-divider class="my-4" />
+                                <p>Deposit Address</p>
+                                <v-chip rounded color="default" variant="text" class="font-weight-bold mt-2 pl-0">0x0683 . . . 2759</v-chip>
+                                <v-divider class="my-4" />
+                                <p>Total Balance</p>
+                                <v-chip rounded color="success" variant="outlined" class="font-weight-bold mt-2">$5,284</v-chip>
+                                <v-divider class="my-4" />
+                                <v-btn variant="flat" color="success" size="small" class="mr-2">+ Add STORJ Tokens</v-btn>
+                                <v-btn variant="outlined" color="default" size="small" class="mr-2">View Transactions</v-btn>
+                            </v-card-text>
+                        </v-card>
+                    </v-col>
 
-              <v-col cols="12" sm="4">
-                <v-card title="Add Card" variant="flat" :border="true" rounded="xlg">
-                  <v-card-text>
-                    <!-- <v-chip rounded color="info" variant="tonal" class="font-weight-bold mr-2">Visa</v-chip> -->
-                    <v-btn variant="outlined" color="default" size="small" class="mr-2">+ Add New Card</v-btn>
-                  </v-card-text>
-                </v-card>
-              </v-col>
+                    <v-col cols="12" sm="4">
+                        <v-card title="Credit Card" variant="flat" :border="true" rounded="xlg">
+                            <v-card-text>
+                                <v-chip rounded color="default" variant="tonal" class="font-weight-bold mr-2">Visa</v-chip>
+                                <!-- <v-chip rounded color="primary" variant="tonal" class="font-weight-bold mr-2">Default</v-chip> -->
+                                <v-divider class="my-4" />
+                                <p>Card Number</p>
+                                <v-chip rounded color="default" variant="text" class="pl-0 font-weight-bold mt-2">**** **** **** 2759</v-chip>
+                                <v-divider class="my-4" />
+                                <p>Exp. Date</p>
+                                <v-chip rounded color="default" variant="text" class="pl-0 font-weight-bold mt-2">12/27</v-chip>
+                                <v-divider class="my-4" />
+                                <v-btn variant="outlined" color="default" size="small" class="mr-2">Edit</v-btn>
+                                <v-btn variant="outlined" color="default" size="small" class="mr-2">Remove</v-btn>
+                            </v-card-text>
+                        </v-card>
+                    </v-col>
 
-            </v-row>
-          </v-window-item>
+                    <v-col cols="12" sm="4">
+                        <v-card title="Add Card" variant="flat" :border="true" rounded="xlg">
+                            <v-card-text>
+                                <!-- <v-chip rounded color="info" variant="tonal" class="font-weight-bold mr-2">Visa</v-chip> -->
+                                <v-btn variant="outlined" color="default" size="small" class="mr-2">+ Add New Card</v-btn>
+                            </v-card-text>
+                        </v-card>
+                    </v-col>
+                </v-row>
+            </v-window-item>
 
-          <v-window-item>
-            <v-card variant="flat" :border="true" rounded="xlg">
-              <v-text-field
-                v-model="search"
-                label="Search"
-                prepend-inner-icon="mdi-magnify"
-                single-line
-                hide-details
-              ></v-text-field>
+            <v-window-item>
+                <v-card variant="flat" :border="true" rounded="xlg">
+                    <v-text-field
+                        v-model="search"
+                        label="Search"
+                        prepend-inner-icon="mdi-magnify"
+                        single-line
+                        hide-details
+                    />
 
-              <v-data-table
-                v-model="selected"
-                v-model:sort-by="sortBy"
-                :headers="headers"
-                :items="invoices"
-                :search="search"
-                class="elevation-1"
-                show-select
-                hover
-              >
-                <template v-slot:item.date="{ item }">
-                    <v-list-item class="font-weight-bold pl-0">
-                      <!-- <template v-slot:prepend>
+                    <v-data-table
+                        v-model="selected"
+                        :sort-by="sortBy"
+                        :headers="headers"
+                        :items="invoices"
+                        :search="search"
+                        class="elevation-1"
+                        show-select
+                        hover
+                    >
+                        <template #item.date="{ item }">
+                            <v-list-item class="font-weight-bold pl-0">
+                                <!-- <template v-slot:prepend>
                         <img src="../assets/icon-user-color.svg" alt="Dashboard" class="mr-3">
                       </template> -->
-                      {{ item.columns.date }}
-                  </v-list-item>
-                </template>
-              <template v-slot:item.status="{ item }">
-                <v-chip :color="getColor(item.raw.status)" variant="tonal" size="small" rounded="xl" class="font-weight-bold">
-                  {{ item.raw.status }}
-                </v-chip>
-              </template>
-              </v-data-table>
-            </v-card>
-          </v-window-item>
+                                {{ item.columns.date }}
+                            </v-list-item>
+                        </template>
+                        <template #item.status="{ item }">
+                            <v-chip :color="getColor(item.raw.status)" variant="tonal" size="small" rounded="xl" class="font-weight-bold">
+                                {{ item.raw.status }}
+                            </v-chip>
+                        </template>
+                    </v-data-table>
+                </v-card>
+            </v-window-item>
 
-          <v-window-item>
-            <v-card variant="flat" :border="true" rounded="xlg">
-              <v-text-field
-                v-model="search"
-                label="Search"
-                prepend-inner-icon="mdi-magnify"
-                single-line
-                hide-details
-              ></v-text-field>
+            <v-window-item>
+                <v-card variant="flat" :border="true" rounded="xlg">
+                    <v-text-field
+                        v-model="search"
+                        label="Search"
+                        prepend-inner-icon="mdi-magnify"
+                        single-line
+                        hide-details
+                    />
 
-              <v-data-table
-                v-model="selected"
-                v-model:sort-by="sortBy"
-                :headers="headers"
-                :items="invoices"
-                :search="search"
-                class="elevation-1"
-                show-select
-                hover
-              >
-                <template v-slot:item.date="{ item }">
-                    <v-list-item class="font-weight-bold pl-0">
-                      <!-- <template v-slot:prepend>
+                    <v-data-table
+                        v-model="selected"
+                        :sort-by="sortBy"
+                        :headers="headers"
+                        :items="invoices"
+                        :search="search"
+                        class="elevation-1"
+                        show-select
+                        hover
+                    >
+                        <template #item.date="{ item }">
+                            <v-list-item class="font-weight-bold pl-0">
+                                <!-- <template v-slot:prepend>
                         <img src="../assets/icon-user-color.svg" alt="Dashboard" class="mr-3">
                       </template> -->
-                      {{ item.columns.date }}
-                  </v-list-item>
-                </template>
-              <template v-slot:item.status="{ item }">
-                <v-chip :color="getColor(item.raw.status)" variant="tonal" size="small" rounded="xl" class="font-weight-bold">
-                  {{ item.raw.status }}
-                </v-chip>
-              </template>
-              </v-data-table>
-            </v-card>
-          </v-window-item>
-
-          <v-window-item>
-            <v-row>
-              <v-col cols="12" sm="4">
-                <v-card title="Billing Information" subtitle="Add info for your invoices." variant="flat" :border="true" rounded="xlg">
-                  <v-card-text>
-                    <!-- <v-chip rounded color="purple2" variant="tonal" class="font-weight-bold mb-2">$0</v-chip> -->
-                    <p>You can add personal or company info, billing email, and VAT.</p>
-                    <v-divider class="my-4"></v-divider>
-                    <v-btn color="primary" size="small">+ Add Billing Information</v-btn>
-                  </v-card-text>
+                                {{ item.columns.date }}
+                            </v-list-item>
+                        </template>
+                        <template #item.status="{ item }">
+                            <v-chip :color="getColor(item.raw.status)" variant="tonal" size="small" rounded="xl" class="font-weight-bold">
+                                {{ item.raw.status }}
+                            </v-chip>
+                        </template>
+                    </v-data-table>
                 </v-card>
-              </v-col>
-            </v-row>
-          </v-window-item>
-        </v-window>
+            </v-window-item>
 
-  </v-container>
+            <v-window-item>
+                <v-row>
+                    <v-col cols="12" sm="4">
+                        <v-card title="Billing Information" subtitle="Add info for your invoices." variant="flat" :border="true" rounded="xlg">
+                            <v-card-text>
+                                <!-- <v-chip rounded color="purple2" variant="tonal" class="font-weight-bold mb-2">$0</v-chip> -->
+                                <p>You can add personal or company info, billing email, and VAT.</p>
+                                <v-divider class="my-4" />
+                                <v-btn color="primary" size="small">+ Add Billing Information</v-btn>
+                            </v-card-text>
+                        </v-card>
+                    </v-col>
+                </v-row>
+            </v-window-item>
+        </v-window>
+    </v-container>
 </template>
 
-<!-- <script>
-  export default {
-    data () {
-      return {
-        tab: 'Overview',
-      }
-    },
-  }
-</script> -->
+<script setup lang="ts">
+import { ref } from 'vue';
+import {
+    VContainer,
+    VCard,
+    VTabs,
+    VTab,
+    VWindow,
+    VWindowItem,
+    VRow,
+    VCol,
+    VCardText,
+    VChip,
+    VDivider,
+    VBtn,
+    VExpansionPanels,
+    VExpansionPanel,
+    VTextField,
+    VListItem,
+} from 'vuetify/components';
+import { VDataTable } from 'vuetify/labs/components';
 
-<script>
-  export default {
-    data () {
-      return {
-        tab: 'Overview',
-        search: '',
-        selected: [],
-        sortBy: [{ key: 'date', order: 'asc' }],
-        headers: [
-          { title: 'Date', key: 'date' },
-          { title: 'Amount', key: 'amount' },
-          { title: 'Status', key: 'status' },
-          { title: 'Invoice', key: 'invoice' },
+const tab = ref<string>('Overview');
+const search = ref<string>('');
+const selected = ref([]);
 
-        ],
-        invoices: [
-          {
-            date: 'Jun 2023',
-            status: 'Pending',
-            amount: '$23',
-            invoice: 'Invoice',
-          },
-          {
-            date: 'May 2023',
-            status: 'Unpaid',
-            amount: '$821',
-            invoice: 'Invoice',
-          },
-          {
-            date: 'Apr 2023',
-            status: 'Paid',
-            amount: '$9,345',
-            invoice: 'Invoice',
-          },
-        ],
-      }
+const sortBy = [{ key: 'date', order: 'asc' }];
+const headers = [
+    { title: 'Date', key: 'date' },
+    { title: 'Amount', key: 'amount' },
+    { title: 'Status', key: 'status' },
+    { title: 'Invoice', key: 'invoice' },
+];
+const invoices = [
+    {
+        date: 'Jun 2023',
+        status: 'Pending',
+        amount: '$23',
+        invoice: 'Invoice',
+    },
+    {
+        date: 'May 2023',
+        status: 'Unpaid',
+        amount: '$821',
+        invoice: 'Invoice',
     },
-    methods: {
-      getColor (status) {
-        if (status == 'Paid') return 'success'
-        if (status == 'Pending') return 'warning'
-        else return 'error'
-      },
+    {
+        date: 'Apr 2023',
+        status: 'Paid',
+        amount: '$9,345',
+        invoice: 'Invoice',
     },
-  }
+];
+
+function getColor(status: string): string {
+    if (status === 'Paid') return 'success';
+    if (status === 'Pending') return 'warning';
+    return 'error';
+}
 </script>
\ No newline at end of file
diff --git a/web/satellite/vuetify-poc/src/views/Bucket.vue b/web/satellite/vuetify-poc/src/views/Bucket.vue
index 0f9e70930307..268fed1f85c1 100644
--- a/web/satellite/vuetify-poc/src/views/Bucket.vue
+++ b/web/satellite/vuetify-poc/src/views/Bucket.vue
@@ -2,44 +2,43 @@
 // See LICENSE for copying information.
 
 <template>
-  <v-container>
-
-      <PageTitleComponent title="Browse Files"/>
-
-      <BrowserBreadcrumbsComponent/>
-
-      <v-col>
-        <v-row class="mt-2 mb-4">
-
-          <v-btn
-            color="primary"
-            min-width="120"
-            @click="snackbar = true"
-          >
-            <BrowserSnackbarComponent :snackbar="snackbar" />
-            <IconUpload/>
-            Upload
-          </v-btn>
-
-          <v-btn
-            variant="outlined"
-            color="default"
-            class="mx-4"
-          >
-            <IconFolder/>
-            New Folder
-            <BrowserNewFolderDialog/>
-          </v-btn>
-
-        </v-row>
-      </v-col>
-
-      <BrowserTableComponent/>
-
-  </v-container>
+    <v-container>
+        <PageTitleComponent title="Browse Files" />
+
+        <BrowserBreadcrumbsComponent />
+
+        <v-col>
+            <v-row class="mt-2 mb-4">
+                <v-btn
+                    color="primary"
+                    min-width="120"
+                    @click="snackbar = true"
+                >
+                    <BrowserSnackbarComponent :on-cancel="() => { snackbar = false }" />
+                    <IconUpload />
+                    Upload
+                </v-btn>
+
+                <v-btn
+                    variant="outlined"
+                    color="default"
+                    class="mx-4"
+                >
+                    <IconFolder />
+                    New Folder
+                    <BrowserNewFolderDialog />
+                </v-btn>
+            </v-row>
+        </v-col>
+
+        <BrowserTableComponent />
+    </v-container>
 </template>
 
-<script>
+<script setup lang="ts">
+import { ref } from 'vue';
+import { VContainer, VCol, VRow, VBtn } from 'vuetify/components';
+
 import PageTitleComponent from '@poc/components/PageTitleComponent.vue';
 import BrowserBreadcrumbsComponent from '@poc/components/BrowserBreadcrumbsComponent.vue';
 import BrowserSnackbarComponent from '@poc/components/BrowserSnackbarComponent.vue';
@@ -48,21 +47,5 @@ import BrowserNewFolderDialog from '@poc/components/BrowserNewFolderDialog.vue';
 import IconUpload from '@poc/components/icons/IconUpload.vue';
 import IconFolder from '@poc/components/icons/IconFolder.vue';
 
-export default {
-  components: {
-    PageTitleComponent,
-    BrowserBreadcrumbsComponent,
-    BrowserSnackbarComponent,
-    BrowserTableComponent,
-    BrowserNewFolderDialog,
-    IconUpload,
-    IconFolder
-  },
-  data() {
-    return {
-      // upload snackbar
-      snackbar: false,
-    }
-  }
-};
+const snackbar = ref<boolean>(false);
 </script>
diff --git a/web/satellite/vuetify-poc/src/views/Buckets.vue b/web/satellite/vuetify-poc/src/views/Buckets.vue
index 6928fb289abb..9be9276c9773 100644
--- a/web/satellite/vuetify-poc/src/views/Buckets.vue
+++ b/web/satellite/vuetify-poc/src/views/Buckets.vue
@@ -2,174 +2,162 @@
 // See LICENSE for copying information.
 
 <template>
-  <v-container>
-
-      <PageTitleComponent title="Buckets"/>
-      <PageSubtitleComponent subtitle="Buckets are storage containers for your data." link="https://docs.storj.io/dcs/buckets"/>
+    <v-container>
+        <PageTitleComponent title="Buckets" />
+        <PageSubtitleComponent subtitle="Buckets are storage containers for your data." link="https://docs.storj.io/dcs/buckets" />
 
         <v-row class="mt-2 mb-4">
-          <v-col>
-
-          <v-btn
-            color="primary"
-          >
-            <svg width="16" height="16" class="mr-2" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="M10 1C14.9706 1 19 5.02944 19 10C19 14.9706 14.9706 19 10 19C5.02944 19 1 14.9706 1 10C1 5.02944 5.02944 1 10 1ZM10 2.65C5.94071 2.65 2.65 5.94071 2.65 10C2.65 14.0593 5.94071 17.35 10 17.35C14.0593 17.35 17.35 14.0593 17.35 10C17.35 5.94071 14.0593 2.65 10 2.65ZM10.7496 6.8989L10.7499 6.91218L10.7499 9.223H12.9926C13.4529 9.223 13.8302 9.58799 13.8456 10.048C13.8602 10.4887 13.5148 10.8579 13.0741 10.8726L13.0608 10.8729L10.7499 10.873L10.75 13.171C10.75 13.6266 10.3806 13.996 9.925 13.996C9.48048 13.996 9.11807 13.6444 9.10066 13.2042L9.1 13.171L9.09985 10.873H6.802C6.34637 10.873 5.977 10.5036 5.977 10.048C5.977 9.60348 6.32857 9.24107 6.76882 9.22366L6.802 9.223H9.09985L9.1 6.98036C9.1 6.5201 9.46499 6.14276 9.925 6.12745C10.3657 6.11279 10.7349 6.45818 10.7496 6.8989Z" fill="currentColor"/>
-            </svg>
-
-            New Bucket
-
-            <v-dialog
-              v-model="dialog"
-              activator="parent"
-              width="auto"
-              min-width="400px"
-              transition="fade-transition"
-            >
-              <v-card rounded="xlg">
-
-                <v-sheet>
-                  <v-card-item class="pl-7 py-4">
-                    <template v-slot:prepend>
-                      <v-card-title class="font-weight-bold">
-                        <!-- <img src="../assets/icon-bucket-color.svg" alt="Bucket" width="40"> -->
-                        Create New Bucket
-                      </v-card-title>
-                    </template>
-
-                    <template v-slot:append>
-                      <v-btn
-                        icon="$close"
-                        variant="text"
-                        size="small"
-                        color="default"
-                        @click="dialog = false"
-                      ></v-btn>
-                    </template>
-                  </v-card-item>
-                </v-sheet>
-
-                <v-divider></v-divider>
-
-                <v-form v-model="valid" class="pa-8 pb-3">
-                  <v-row>
-                    <v-col>
-                      <p>Buckets are used to store and organize your files.</p>
-
-                      <v-text-field
-                          v-model="bucketName"
-                          variant="outlined"
-                          :rules="bucketNameRules"
-                          label="Enter bucket name"
-                          hint="Lowercase letters, numbers, hyphens (-), and periods (.)"
-                          required
-                          autofocus
-                          class="mt-8 mb-3"
-
-                        ></v-text-field>
-
-                      </v-col>
-                    </v-row>
-                </v-form>
-
-                <v-divider></v-divider>
-
-                <v-card-actions class="pa-7">
-                  <v-row>
-                    <v-col>
-                      <v-btn variant="outlined" color="default" block @click="dialog = false">Cancel</v-btn>
-                    </v-col>
-                    <v-col>
-                      <v-btn color="primary" variant="flat" block :loading="loading">
-                        Create Bucket
-                      </v-btn>
-                    </v-col>
-                  </v-row>
-                </v-card-actions>
-              </v-card>
-            </v-dialog>
-          </v-btn>
-
-          </v-col>
+            <v-col>
+                <v-btn
+                    color="primary"
+                >
+                    <svg width="16" height="16" class="mr-2" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M10 1C14.9706 1 19 5.02944 19 10C19 14.9706 14.9706 19 10 19C5.02944 19 1 14.9706 1 10C1 5.02944 5.02944 1 10 1ZM10 2.65C5.94071 2.65 2.65 5.94071 2.65 10C2.65 14.0593 5.94071 17.35 10 17.35C14.0593 17.35 17.35 14.0593 17.35 10C17.35 5.94071 14.0593 2.65 10 2.65ZM10.7496 6.8989L10.7499 6.91218L10.7499 9.223H12.9926C13.4529 9.223 13.8302 9.58799 13.8456 10.048C13.8602 10.4887 13.5148 10.8579 13.0741 10.8726L13.0608 10.8729L10.7499 10.873L10.75 13.171C10.75 13.6266 10.3806 13.996 9.925 13.996C9.48048 13.996 9.11807 13.6444 9.10066 13.2042L9.1 13.171L9.09985 10.873H6.802C6.34637 10.873 5.977 10.5036 5.977 10.048C5.977 9.60348 6.32857 9.24107 6.76882 9.22366L6.802 9.223H9.09985L9.1 6.98036C9.1 6.5201 9.46499 6.14276 9.925 6.12745C10.3657 6.11279 10.7349 6.45818 10.7496 6.8989Z" fill="currentColor" />
+                    </svg>
+
+                    New Bucket
+
+                    <v-dialog
+                        v-model="dialog"
+                        activator="parent"
+                        width="auto"
+                        min-width="400px"
+                        transition="fade-transition"
+                    >
+                        <v-card rounded="xlg">
+                            <v-sheet>
+                                <v-card-item class="pl-7 py-4">
+                                    <template #prepend>
+                                        <v-card-title class="font-weight-bold">
+                                            <!-- <img src="../assets/icon-bucket-color.svg" alt="Bucket" width="40"> -->
+                                            Create New Bucket
+                                        </v-card-title>
+                                    </template>
+
+                                    <template #append>
+                                        <v-btn
+                                            icon="$close"
+                                            variant="text"
+                                            size="small"
+                                            color="default"
+                                            @click="dialog = false"
+                                        />
+                                    </template>
+                                </v-card-item>
+                            </v-sheet>
+
+                            <v-divider />
+
+                            <v-form v-model="valid" class="pa-8 pb-3">
+                                <v-row>
+                                    <v-col>
+                                        <p>Buckets are used to store and organize your files.</p>
+
+                                        <v-text-field
+                                            v-model="bucketName"
+                                            variant="outlined"
+                                            :rules="bucketNameRules"
+                                            label="Enter bucket name"
+                                            hint="Lowercase letters, numbers, hyphens (-), and periods (.)"
+                                            required
+                                            autofocus
+                                            class="mt-8 mb-3"
+                                        />
+                                    </v-col>
+                                </v-row>
+                            </v-form>
+
+                            <v-divider />
+
+                            <v-card-actions class="pa-7">
+                                <v-row>
+                                    <v-col>
+                                        <v-btn variant="outlined" color="default" block @click="dialog = false">Cancel</v-btn>
+                                    </v-col>
+                                    <v-col>
+                                        <v-btn color="primary" variant="flat" block>
+                                            Create Bucket
+                                        </v-btn>
+                                    </v-col>
+                                </v-row>
+                            </v-card-actions>
+                        </v-card>
+                    </v-dialog>
+                </v-btn>
+            </v-col>
         </v-row>
 
-      <BucketsDataTable :headers="headers" :buckets="buckets" />
-
-  </v-container>
+        <BucketsDataTable :headers="headers" :buckets="buckets" />
+    </v-container>
 </template>
 
-<script>
+<script setup lang="ts">
+import { ref } from 'vue';
+import {
+    VContainer,
+    VRow,
+    VCol,
+    VBtn,
+    VDialog,
+    VCard,
+    VSheet,
+    VCardItem,
+    VCardTitle,
+    VDivider,
+    VForm,
+    VTextField,
+    VCardActions,
+} from 'vuetify/components';
+
 import PageTitleComponent from '@poc/components/PageTitleComponent.vue';
 import PageSubtitleComponent from '@poc/components/PageSubtitleComponent.vue';
-import BucketsDataTable from '@poc/components/BucketsDataTable.vue'
-
-export default {
-  components: {
-    PageTitleComponent,
-    PageSubtitleComponent,
-    BucketsDataTable,
-  },
-  data () {
-    return {
-        // New bucket dialog
-        dialog: false,
-        bucketName: '',
-        bucketNameRules: [
-          value => {
-            if (value) return true
-            return 'Bucket name is requred.'
-          },
-          value => {
-              if (/^[a-z0-9-.]+$/.test(value)) {
-                  return true
-              } else {
-                  if (/[A-Z]/.test(value)) {
-                      return 'Uppercase characters are not allowed.';
-                  }
-                  if (/\s/.test(value)) {
-                      return 'Spaces are not allowed.';
-                  }
-                  if (/[^a-zA-Z0-9-.]/.test(value)) {
-                      return 'Other characters are not allowed.';
-                  }
-              }
-          },
-        ],
-        headers: [
-          {
-            title: 'Name',
-            align: 'start',
-            key: 'name',
-          },
-          { title: 'Files', key: 'files' },
-          { title: 'Storage', key: 'storage' },
-          { title: 'Bandwidth', key: 'bandwidth' },
-          { title: 'Date Created', key: 'date' },
-        ],
-        buckets: [
-          {
-            name: 'Demo',
-            date: '02 Mar 2023',
-            files: '4,210',
-            bandwidth: '481 MB',
-            storage: '32 GB',
-          },
-          {
-            name: 'Photos',
-            date: '03 Mar 2023',
-            files: '92,155',
-            bandwidth: '2.0 GB',
-            storage: '5.2 GB',
-          },
-          {
-            name: 'Videos',
-            date: '04 Mar 2023',
-            files: '24',
-            bandwidth: '102 MB',
-            storage: '1.7 TB',
-          },
-        ],
-    }
-  },
-}
+import BucketsDataTable from '@poc/components/BucketsDataTable.vue';
+
+const dialog = ref<boolean>(false);
+const bucketName = ref<string>('');
+
+const bucketNameRules = [
+    (value: string) => (!!value || 'Bucket name is required.'),
+    (value: string) => {
+        if (/^[a-z0-9-.]+$/.test(value)) return true;
+        if (/[A-Z]/.test(value)) return 'Uppercase characters are not allowed.';
+        if (/\s/.test(value)) return 'Spaces are not allowed.';
+        if (/[^a-zA-Z0-9-.]/.test(value)) return 'Other characters are not allowed.';
+        return true;
+    },
+];
+const headers = [
+    {
+        title: 'Name',
+        align: 'start',
+        key: 'name',
+    },
+    { title: 'Files', key: 'files' },
+    { title: 'Storage', key: 'storage' },
+    { title: 'Bandwidth', key: 'bandwidth' },
+    { title: 'Date Created', key: 'date' },
+];
+const buckets = [
+    {
+        name: 'Demo',
+        date: '02 Mar 2023',
+        files: '4,210',
+        bandwidth: '481 MB',
+        storage: '32 GB',
+    },
+    {
+        name: 'Photos',
+        date: '03 Mar 2023',
+        files: '92,155',
+        bandwidth: '2.0 GB',
+        storage: '5.2 GB',
+    },
+    {
+        name: 'Videos',
+        date: '04 Mar 2023',
+        files: '24',
+        bandwidth: '102 MB',
+        storage: '1.7 TB',
+    },
+];
 </script>
diff --git a/web/satellite/vuetify-poc/src/views/Dashboard.vue b/web/satellite/vuetify-poc/src/views/Dashboard.vue
index ccee8ac66c6d..22cefd98916f 100644
--- a/web/satellite/vuetify-poc/src/views/Dashboard.vue
+++ b/web/satellite/vuetify-poc/src/views/Dashboard.vue
@@ -3,9 +3,8 @@
 
 <template>
     <v-container>
-
-        <PageTitleComponent title="Project Overview"/>
-        <PageSubtitleComponent :subtitle="`Your ${limits.objectCount.toLocaleString()} files are stored in ${limits.segmentCount.toLocaleString()} segments around the world.`"/>
+        <PageTitleComponent title="Project Overview" />
+        <PageSubtitleComponent :subtitle="`Your ${limits.objectCount.toLocaleString()} files are stored in ${limits.segmentCount.toLocaleString()} segments around the world.`" />
 
         <v-row class="d-flex align-center justify-center mt-2">
             <v-col cols="12" sm="6" md="4" lg="2">
@@ -21,7 +20,7 @@
                 <CardStatsComponent title="Access" subtitle="Project accesses" :data="accessGrantsCount.toLocaleString()" />
             </v-col>
             <v-col cols="12" sm="6" md="4" lg="2">
-                <CardStatsComponent title="Team" subtitle="Project members" :data="teamSize" />
+                <CardStatsComponent title="Team" subtitle="Project members" :data="teamSize.toLocaleString()" />
             </v-col>
             <v-col cols="12" sm="6" md="4" lg="2">
                 <CardStatsComponent title="Billing" subtitle="Free account" data="Free" />
@@ -30,24 +29,24 @@
 
         <v-row class="d-flex align-center justify-center">
             <v-col cols="12" md="6">
-                <UsageProgressComponent title="Storage" progress="40" used="10 GB Used" limit="Limit: 25GB" available="15 GB Available" cta="Need more?"/>
+                <UsageProgressComponent title="Storage" :progress="40" used="10 GB Used" limit="Limit: 25GB" available="15 GB Available" cta="Need more?" />
             </v-col>
             <v-col cols="12" md="6">
-                <UsageProgressComponent title="Download" progress="60" used="15 GB Used" limit="Limit: 25GB per month" available="10 GB Available" cta="Need more?"/>
+                <UsageProgressComponent title="Download" :progress="60" used="15 GB Used" limit="Limit: 25GB per month" available="10 GB Available" cta="Need more?" />
             </v-col>
             <v-col cols="12" md="6">
-                <UsageProgressComponent title="Segments" progress="12" used="1,235 Used" limit="Limit: 10,000" available="8,765 Available" cta="Learn more"/>
+                <UsageProgressComponent title="Segments" :progress="12" used="1,235 Used" limit="Limit: 10,000" available="8,765 Available" cta="Learn more" />
             </v-col>
             <v-col cols="12" md="6">
-                <UsageProgressComponent title="Free Tier" progress="50" used="10 GB Used" limit="Limit: $1.65" available="50% Available" cta="Upgrade to Pro"/>
+                <UsageProgressComponent title="Free Tier" :progress="50" used="10 GB Used" limit="Limit: $1.65" available="50% Available" cta="Upgrade to Pro" />
             </v-col>
         </v-row>
-
     </v-container>
 </template>
 
 <script setup lang="ts">
 import { computed, onMounted } from 'vue';
+import { VContainer, VRow, VCol } from 'vuetify/components';
 
 import { useProjectsStore } from '@/store/modules/projectsStore';
 import { useProjectMembersStore } from '@/store/modules/projectMembersStore';
diff --git a/web/satellite/vuetify-poc/src/views/DesignLibrary.vue b/web/satellite/vuetify-poc/src/views/DesignLibrary.vue
index 5aeee7ec9061..a9413c8db1fd 100644
--- a/web/satellite/vuetify-poc/src/views/DesignLibrary.vue
+++ b/web/satellite/vuetify-poc/src/views/DesignLibrary.vue
@@ -2,286 +2,272 @@
 // See LICENSE for copying information.
 
 <template>
-  <v-container>
-
-      <v-row class="my-4">
-        <v-col>
-          <h1>Design Library</h1>
-        </v-col>
-      </v-row>
-
-      <v-row class="mt-10">
-        <v-col>
-          <h3>Button Variants</h3>
-        </v-col>
-      </v-row>
-
-      <v-row>
-
-        <v-col cols="auto">
-          <v-btn>
-            Default Variant
-          </v-btn>
-        </v-col>
-
-        <v-col cols="auto">
-          <v-btn variant="outlined">
-            Outlined Variant
-          </v-btn>
-        </v-col>
-
-
-        <v-col cols="auto">
-          <v-btn variant="tonal">
-            Tonal Variant
-          </v-btn>
-        </v-col>
-
-
-        <v-col cols="auto">
-          <v-btn variant="text">
-          Text Variant
-        </v-btn>
-      </v-col>
-
-      <v-col cols="auto">
-        <v-btn variant="plain">
-          Plain Variant
-        </v-btn>
-      </v-col>
-
-      <v-col cols="auto">
-        <v-btn disabled>
-          Disabled
-        </v-btn>
-      </v-col>
-
-    </v-row>
-
-    <v-row class="mt-10">
-        <v-col>
-          <h3>Button Colors</h3>
-        </v-col>
-    </v-row>
-
-    <v-row>
-      <v-col cols="auto">
-          <v-btn>
-            Primary Color
-          </v-btn>
-        </v-col>
-
-        <v-col cols="auto">
-          <v-btn color="secondary">
-            Secondary
-          </v-btn>
-        </v-col>
-
-        <v-col cols="auto">
-          <v-btn color="success">
-            Success
-          </v-btn>
-        </v-col>
-
-        <v-col cols="auto">
-          <v-btn color="warning">
-            Warning
-          </v-btn>
-        </v-col>
-
-        <v-col cols="auto">
-          <v-btn color="error">
-            Error
-          </v-btn>
-        </v-col>
-    </v-row>
-
-    <v-row class="mt-10">
-        <v-col>
-          <h3>Button Icons</h3>
-        </v-col>
-      </v-row>
-
-    <v-row>
-      <v-col cols="auto">
-        <v-btn icon="mdi-vuetify" size="small">
-        </v-btn>
-      </v-col>
-
-      <v-col cols="auto">
-        <v-btn prepend-icon="mdi-vuetify" variant="tonal">
-          Prepend
-        </v-btn>
-      </v-col>
-
-      <v-col cols="auto">
-        <v-btn append-icon="mdi-vuetify" variant="outlined" color="secondary">
-          Append Outlined Secondary
-        </v-btn>
-      </v-col>
-
-      <v-col cols="auto">
-        <v-btn
-          prepend-icon="mdi-vuetify"
-          append-icon="mdi-vuetify"
-        >
-          Prepend & Append
-        </v-btn>
-      </v-col>
-
-      </v-row>
-
-      <v-row class="mt-10">
-        <v-col>
-          <h3>Button Sizes</h3>
-        </v-col>
-      </v-row>
-
-      <v-row>
-        <v-col cols="auto">
-          <v-btn size="x-small" variant="tonal">Extra small Button</v-btn>
-        </v-col>
-
-        <v-col cols="auto">
-          <v-btn size="small" variant="outlined">Small Button</v-btn>
-        </v-col>
-
-        <v-col cols="auto">
-          <v-btn>Regular Button</v-btn>
-        </v-col>
-
-        <v-col cols="auto">
-          <v-btn size="large" variant="outlined" color="warning">Large Outlined Warning</v-btn>
-        </v-col>
-
-        <v-col cols="auto">
-          <v-btn size="x-large" variant="tonal" color="secondary">X-Large Button</v-btn>
-        </v-col>
-      </v-row>
-
-      <v-row class="mt-10">
-        <v-col>
-          <h3>Button Blocks</h3>
-        </v-col>
-    </v-row>
-
-      <v-row align="center" justify="center">
-        <v-col>
-          <v-btn block>Block Button Default</v-btn>
-        </v-col>
-        <v-col>
-          <v-btn variant="tonal" color="secondary" block>Block Tonal Secondary</v-btn>
-        </v-col>
-        <v-col>
-          <v-btn variant="tonal" color="error" block>Block Tonal Error</v-btn>
-        </v-col>
-      </v-row>
-
-      <v-row class="mt-10">
-        <v-col>
-          <h3>Button Loading</h3>
-        </v-col>
-    </v-row>
-
-      <v-row>
-        <v-col>
-          <v-card
-            max-width="450"
-            rounded="lg"
-            title="Wanna try loading?"
-            text="Example of loading button."
-            :border="true"
-          >
-
-            <template v-slot:actions>
-              <v-btn height="48">
-                No Thanks
-              </v-btn>
-
-              <v-btn
-                :loading="loading"
-                class="flex-grow-1"
-                height="48"
-                variant="tonal"
-                rounded="lg"
-                @click="load"
-              >
-                Yes, let's go
-              </v-btn>
-            </template>
-          </v-card>
-        </v-col>
-      </v-row>
-
-      <v-row class="mt-10">
-        <v-col>
-          <h3>Button Group</h3>
-        </v-col>
-      </v-row>
-
-
-      <v-row>
-        <v-col>
-        <v-card
-          max-width="450"
-          rounded="lg"
-          text="How satisfied are you with developing using Vuetify?"
-          title="Rate your experience"
-          variant="flat"
-          :border="true"
-        >
-          <template v-slot:append>
-            <div class="me-n2">
-              <v-btn
-                icon="$close"
-                  variant="plain"
-              ></v-btn>
-            </div>
-          </template>
-
-          <v-item-group
-            v-model="model"
-            class="d-flex justify-sm-space-between px-6 pt-2 pb-6"
-          >
-            <v-item
-              v-for="n in 5"
-              :key="n"
-            >
-              <template v-slot:default="{ toggle }">
+    <v-container>
+        <v-row class="my-4">
+            <v-col>
+                <h1>Design Library</h1>
+            </v-col>
+        </v-row>
+
+        <v-row class="mt-10">
+            <v-col>
+                <h3>Button Variants</h3>
+            </v-col>
+        </v-row>
+
+        <v-row>
+            <v-col cols="auto">
+                <v-btn>
+                    Default Variant
+                </v-btn>
+            </v-col>
+
+            <v-col cols="auto">
+                <v-btn variant="outlined">
+                    Outlined Variant
+                </v-btn>
+            </v-col>
+
+            <v-col cols="auto">
+                <v-btn variant="tonal">
+                    Tonal Variant
+                </v-btn>
+            </v-col>
+
+            <v-col cols="auto">
+                <v-btn variant="text">
+                    Text Variant
+                </v-btn>
+            </v-col>
+
+            <v-col cols="auto">
+                <v-btn variant="plain">
+                    Plain Variant
+                </v-btn>
+            </v-col>
+
+            <v-col cols="auto">
+                <v-btn disabled>
+                    Disabled
+                </v-btn>
+            </v-col>
+        </v-row>
+
+        <v-row class="mt-10">
+            <v-col>
+                <h3>Button Colors</h3>
+            </v-col>
+        </v-row>
+
+        <v-row>
+            <v-col cols="auto">
+                <v-btn>
+                    Primary Color
+                </v-btn>
+            </v-col>
+
+            <v-col cols="auto">
+                <v-btn color="secondary">
+                    Secondary
+                </v-btn>
+            </v-col>
+
+            <v-col cols="auto">
+                <v-btn color="success">
+                    Success
+                </v-btn>
+            </v-col>
+
+            <v-col cols="auto">
+                <v-btn color="warning">
+                    Warning
+                </v-btn>
+            </v-col>
+
+            <v-col cols="auto">
+                <v-btn color="error">
+                    Error
+                </v-btn>
+            </v-col>
+        </v-row>
+
+        <v-row class="mt-10">
+            <v-col>
+                <h3>Button Icons</h3>
+            </v-col>
+        </v-row>
+
+        <v-row>
+            <v-col cols="auto">
+                <v-btn icon="mdi-vuetify" size="small" />
+            </v-col>
+
+            <v-col cols="auto">
+                <v-btn prepend-icon="mdi-vuetify" variant="tonal">
+                    Prepend
+                </v-btn>
+            </v-col>
+
+            <v-col cols="auto">
+                <v-btn append-icon="mdi-vuetify" variant="outlined" color="secondary">
+                    Append Outlined Secondary
+                </v-btn>
+            </v-col>
+
+            <v-col cols="auto">
                 <v-btn
-                  :icon="`mdi-numeric-${n}`"
-                  :active="model != null && model + 1 >= n"
-                  border
-                  height="40"
-                  variant="text"
-                  width="40"
-                  @click="toggle"
-                ></v-btn>
-              </template>
-            </v-item>
-          </v-item-group>
-        </v-card>
-        </v-col>
-      </v-row>
-
-      <v-row class="my-10"></v-row>
-
-  </v-container>
+                    prepend-icon="mdi-vuetify"
+                    append-icon="mdi-vuetify"
+                >
+                    Prepend & Append
+                </v-btn>
+            </v-col>
+        </v-row>
+
+        <v-row class="mt-10">
+            <v-col>
+                <h3>Button Sizes</h3>
+            </v-col>
+        </v-row>
+
+        <v-row>
+            <v-col cols="auto">
+                <v-btn size="x-small" variant="tonal">Extra small Button</v-btn>
+            </v-col>
+
+            <v-col cols="auto">
+                <v-btn size="small" variant="outlined">Small Button</v-btn>
+            </v-col>
+
+            <v-col cols="auto">
+                <v-btn>Regular Button</v-btn>
+            </v-col>
+
+            <v-col cols="auto">
+                <v-btn size="large" variant="outlined" color="warning">Large Outlined Warning</v-btn>
+            </v-col>
+
+            <v-col cols="auto">
+                <v-btn size="x-large" variant="tonal" color="secondary">X-Large Button</v-btn>
+            </v-col>
+        </v-row>
+
+        <v-row class="mt-10">
+            <v-col>
+                <h3>Button Blocks</h3>
+            </v-col>
+        </v-row>
+
+        <v-row align="center" justify="center">
+            <v-col>
+                <v-btn block>Block Button Default</v-btn>
+            </v-col>
+            <v-col>
+                <v-btn variant="tonal" color="secondary" block>Block Tonal Secondary</v-btn>
+            </v-col>
+            <v-col>
+                <v-btn variant="tonal" color="error" block>Block Tonal Error</v-btn>
+            </v-col>
+        </v-row>
+
+        <v-row class="mt-10">
+            <v-col>
+                <h3>Button Loading</h3>
+            </v-col>
+        </v-row>
+
+        <v-row>
+            <v-col>
+                <v-card
+                    max-width="450"
+                    rounded="lg"
+                    title="Wanna try loading?"
+                    text="Example of loading button."
+                    :border="true"
+                >
+                    <template #actions>
+                        <v-btn height="48">
+                            No Thanks
+                        </v-btn>
+
+                        <v-btn
+                            :loading="loading"
+                            class="flex-grow-1"
+                            height="48"
+                            variant="tonal"
+                            rounded="lg"
+                            @click="load"
+                        >
+                            Yes, let's go
+                        </v-btn>
+                    </template>
+                </v-card>
+            </v-col>
+        </v-row>
+
+        <v-row class="mt-10">
+            <v-col>
+                <h3>Button Group</h3>
+            </v-col>
+        </v-row>
+
+        <v-row>
+            <v-col>
+                <v-card
+                    max-width="450"
+                    rounded="lg"
+                    text="How satisfied are you with developing using Vuetify?"
+                    title="Rate your experience"
+                    variant="flat"
+                    :border="true"
+                >
+                    <template #append>
+                        <div class="me-n2">
+                            <v-btn
+                                icon="$close"
+                                variant="plain"
+                            />
+                        </div>
+                    </template>
+
+                    <v-item-group
+                        v-model="model"
+                        class="d-flex justify-sm-space-between px-6 pt-2 pb-6"
+                    >
+                        <v-item
+                            v-for="n in 5"
+                            :key="n"
+                        >
+                            <template #default="{ toggle }">
+                                <v-btn
+                                    :icon="`mdi-numeric-${n}`"
+                                    :active="model != null && model + 1 >= n"
+                                    border
+                                    height="40"
+                                    variant="text"
+                                    width="40"
+                                    @click="toggle"
+                                />
+                            </template>
+                        </v-item>
+                    </v-item-group>
+                </v-card>
+            </v-col>
+        </v-row>
+
+        <v-row class="my-10" />
+    </v-container>
 </template>
 
+<script setup lang="ts">
+import { ref } from 'vue';
+import { VContainer, VRow, VCol, VBtn, VCard, VItemGroup, VItem } from 'vuetify/components';
 
-<script>
-  export default {
-    data: () => ({
-      loading: false,
-      model: null,
-    }),
-
-    methods: {
-      load () {
-        this.loading = true
-        setTimeout(() => (this.loading = false), 3000)
-      },
-    },
-  }
+const loading = ref<boolean>(false);
+const model = ref<number | null>(null);
+
+function load(): void {
+    loading.value = true;
+    setTimeout(() => (loading.value = false), 3000);
+}
 </script>
diff --git a/web/satellite/vuetify-poc/src/views/Projects.vue b/web/satellite/vuetify-poc/src/views/Projects.vue
index 9a8de20d9805..3fc7d4fb4724 100644
--- a/web/satellite/vuetify-poc/src/views/Projects.vue
+++ b/web/satellite/vuetify-poc/src/views/Projects.vue
@@ -2,94 +2,90 @@
 // See LICENSE for copying information.
 
 <template>
-  <v-container>
-
-      <PageTitleComponent title="My Projects"/>
-      <!-- <PageSubtitleComponent subtitle="Projects are where you and your team can upload and manage data, view usage statistics and billing."/> -->
-
-      <v-row>
-        <v-col>
-
-          <v-btn
-            class="mr-3"
-            color="default"
-            variant="outlined"
-            density="comfortable"
-          >
-            <svg width="14" height="14" class="mr-2" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="M10 1C14.9706 1 19 5.02944 19 10C19 14.9706 14.9706 19 10 19C5.02944 19 1 14.9706 1 10C1 5.02944 5.02944 1 10 1ZM10 2.65C5.94071 2.65 2.65 5.94071 2.65 10C2.65 14.0593 5.94071 17.35 10 17.35C14.0593 17.35 17.35 14.0593 17.35 10C17.35 5.94071 14.0593 2.65 10 2.65ZM10.7496 6.8989L10.7499 6.91218L10.7499 9.223H12.9926C13.4529 9.223 13.8302 9.58799 13.8456 10.048C13.8602 10.4887 13.5148 10.8579 13.0741 10.8726L13.0608 10.8729L10.7499 10.873L10.75 13.171C10.75 13.6266 10.3806 13.996 9.925 13.996C9.48048 13.996 9.11807 13.6444 9.10066 13.2042L9.1 13.171L9.09985 10.873H6.802C6.34637 10.873 5.977 10.5036 5.977 10.048C5.977 9.60348 6.32857 9.24107 6.76882 9.22366L6.802 9.223H9.09985L9.1 6.98036C9.1 6.5201 9.46499 6.14276 9.925 6.12745C10.3657 6.11279 10.7349 6.45818 10.7496 6.8989Z" fill="currentColor"/>
-            </svg>
-              <!-- <IconNew class="mr-2" width="12px"/> -->
-            Create Project
-
-            <v-dialog
-              v-model="dialog"
-              activator="parent"
-              width="auto"
-              min-width="400px"
-              transition="fade-transition"
-            >
-              <v-card rounded="xlg">
-
-                <v-sheet>
-                  <v-card-item class="pl-7 py-4">
-                    <template v-slot:prepend>
-                      <v-card-title class="font-weight-bold">
-                        <!-- <v-icon
+    <v-container>
+        <PageTitleComponent title="My Projects" />
+        <!-- <PageSubtitleComponent subtitle="Projects are where you and your team can upload and manage data, view usage statistics and billing."/> -->
+
+        <v-row>
+            <v-col>
+                <v-btn
+                    class="mr-3"
+                    color="default"
+                    variant="outlined"
+                    density="comfortable"
+                >
+                    <svg width="14" height="14" class="mr-2" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M10 1C14.9706 1 19 5.02944 19 10C19 14.9706 14.9706 19 10 19C5.02944 19 1 14.9706 1 10C1 5.02944 5.02944 1 10 1ZM10 2.65C5.94071 2.65 2.65 5.94071 2.65 10C2.65 14.0593 5.94071 17.35 10 17.35C14.0593 17.35 17.35 14.0593 17.35 10C17.35 5.94071 14.0593 2.65 10 2.65ZM10.7496 6.8989L10.7499 6.91218L10.7499 9.223H12.9926C13.4529 9.223 13.8302 9.58799 13.8456 10.048C13.8602 10.4887 13.5148 10.8579 13.0741 10.8726L13.0608 10.8729L10.7499 10.873L10.75 13.171C10.75 13.6266 10.3806 13.996 9.925 13.996C9.48048 13.996 9.11807 13.6444 9.10066 13.2042L9.1 13.171L9.09985 10.873H6.802C6.34637 10.873 5.977 10.5036 5.977 10.048C5.977 9.60348 6.32857 9.24107 6.76882 9.22366L6.802 9.223H9.09985L9.1 6.98036C9.1 6.5201 9.46499 6.14276 9.925 6.12745C10.3657 6.11279 10.7349 6.45818 10.7496 6.8989Z" fill="currentColor" />
+                    </svg>
+                    <!-- <IconNew class="mr-2" width="12px"/> -->
+                    Create Project
+
+                    <v-dialog
+                        v-model="dialog"
+                        activator="parent"
+                        width="auto"
+                        min-width="400px"
+                        transition="fade-transition"
+                    >
+                        <v-card rounded="xlg">
+                            <v-sheet>
+                                <v-card-item class="pl-7 py-4">
+                                    <template #prepend>
+                                        <v-card-title class="font-weight-bold">
+                                            <!-- <v-icon
                         >
                         <img src="../assets/icon-project.svg" alt="Project">
                         </v-icon> -->
-                        Create New Project
-                      </v-card-title>
-                    </template>
-
-                    <template v-slot:append>
-                      <v-btn
-                        icon="$close"
-                        variant="text"
-                        size="small"
-                        color="default"
-                        @click="dialog = false"
-                      ></v-btn>
-                    </template>
-                  </v-card-item>
-                </v-sheet>
-
-                <v-divider></v-divider>
-
-                <v-form v-model="valid" class="pa-7 pb-4">
-                  <v-row>
-                    <v-col>
-                      <p>Enter project name (max 20 characters).</p>
-                    </v-col>
-                  </v-row>
-
-                    <v-row>
-                      <v-col
-                        cols="12"
-                      >
-                        <v-text-field
-                          v-model="name"
-                          variant="outlined"
-                          :rules="nameRules"
-                          label="Project Name"
-                          class="mt-2"
-                          required
-                          autofocus
-                          counter
-                          maxlength="20"
-                        ></v-text-field>
-                      </v-col>
-
-                    </v-row>
-
-                    <v-row>
-                      <v-col>
-                        <v-btn variant="text" size="small" class="mb-4" color="default">+ Add Description (Optional)</v-btn>
-                      </v-col>
-                    </v-row>
-
-                    <!-- <v-row>
+                                            Create New Project
+                                        </v-card-title>
+                                    </template>
+
+                                    <template #append>
+                                        <v-btn
+                                            icon="$close"
+                                            variant="text"
+                                            size="small"
+                                            color="default"
+                                            @click="dialog = false"
+                                        />
+                                    </template>
+                                </v-card-item>
+                            </v-sheet>
+
+                            <v-divider />
+
+                            <v-form v-model="valid" class="pa-7 pb-4">
+                                <v-row>
+                                    <v-col>
+                                        <p>Enter project name (max 20 characters).</p>
+                                    </v-col>
+                                </v-row>
+
+                                <v-row>
+                                    <v-col
+                                        cols="12"
+                                    >
+                                        <v-text-field
+                                            v-model="name"
+                                            variant="outlined"
+                                            :rules="nameRules"
+                                            label="Project Name"
+                                            class="mt-2"
+                                            required
+                                            autofocus
+                                            counter
+                                            maxlength="20"
+                                        />
+                                    </v-col>
+                                </v-row>
+
+                                <v-row>
+                                    <v-col>
+                                        <v-btn variant="text" size="small" class="mb-4" color="default">+ Add Description (Optional)</v-btn>
+                                    </v-col>
+                                </v-row>
+
+                                <!-- <v-row>
                       <v-col
                         cols="12"
                       >
@@ -102,256 +98,244 @@
                         ></v-text-field>
                       </v-col>
                     </v-row> -->
-
-                </v-form>
-
-                <v-divider></v-divider>
-
-                <v-card-actions class="pa-7">
-                  <v-row>
-                    <v-col>
-                      <v-btn variant="outlined" color="default" block @click="dialog = false">Cancel</v-btn>
-                    </v-col>
-                    <v-col>
-                      <v-btn color="primary" variant="flat" block :loading="loading">Create Project</v-btn>
-                    </v-col>
-                  </v-row>
-                </v-card-actions>
-              </v-card>
-            </v-dialog>
-          </v-btn>
-
-        </v-col>
-
-        <v-spacer></v-spacer>
-
-        <v-col class="text-right">
-          <!-- Projects Card/Table View -->
-          <v-btn-toggle
-            v-model="activeView"
-            mandatory
-            border
-            inset
-            density="comfortable"
-            class="pa-1"
-            >
-              <v-btn
-                size="small"
-                rounded="xl"
-                @click="toggleView('cards')"
-                active-class="active"
-                :active="activeView === 'cards'"
-                aria-label="Toggle Cards View"
-                >
-                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                  <rect x="6.99902" y="6.99951" width="4.0003" height="4.0003" rx="1" fill="currentColor"/>
-                  <rect x="6.99902" y="13.0005" width="4.0003" height="4.0003" rx="1" fill="currentColor"/>
-                  <rect x="12.999" y="6.99951" width="4.0003" height="4.0003" rx="1" fill="currentColor"/>
-                  <rect x="12.999" y="13.0005" width="4.0003" height="4.0003" rx="1" fill="currentColor"/>
-                </svg>
-                Cards
-              </v-btn>
-              <v-btn
-                size="small"
-                rounded="xl"
-                @click="toggleView('table')"
-                active-class="active"
-                :active="activeView === 'table'"
-                aria-label="Toggle Table View"
+                            </v-form>
+
+                            <v-divider />
+
+                            <v-card-actions class="pa-7">
+                                <v-row>
+                                    <v-col>
+                                        <v-btn variant="outlined" color="default" block @click="dialog = false">Cancel</v-btn>
+                                    </v-col>
+                                    <v-col>
+                                        <v-btn color="primary" variant="flat" block>Create Project</v-btn>
+                                    </v-col>
+                                </v-row>
+                            </v-card-actions>
+                        </v-card>
+                    </v-dialog>
+                </v-btn>
+            </v-col>
+
+            <v-spacer />
+
+            <v-col class="text-right">
+                <!-- Projects Card/Table View -->
+                <v-btn-toggle
+                    v-model="activeView"
+                    mandatory
+                    border
+                    inset
+                    density="comfortable"
+                    class="pa-1"
                 >
-                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                  <path fill-rule="evenodd" clip-rule="evenodd" d="M9 8C9 8.55228 8.55228 9 8 9V9C7.44772 9 7 8.55228 7 8V8C7 7.44772 7.44772 7 8 7V7C8.55228 7 9 7.44772 9 8V8Z" fill="currentColor"/>
-                  <path fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.5523 8.55228 13 8 13V13C7.44772 13 7 12.5523 7 12V12C7 11.4477 7.44772 11 8 11V11C8.55228 11 9 11.4477 9 12V12Z" fill="currentColor"/>
-                  <path fill-rule="evenodd" clip-rule="evenodd" d="M9 16C9 16.5523 8.55228 17 8 17V17C7.44772 17 7 16.5523 7 16V16C7 15.4477 7.44772 15 8 15V15C8.55228 15 9 15.4477 9 16V16Z" fill="currentColor"/>
-                  <path fill-rule="evenodd" clip-rule="evenodd" d="M18 8C18 8.55228 17.5523 9 17 9H11C10.4477 9 10 8.55228 10 8V8C10 7.44772 10.4477 7 11 7H17C17.5523 7 18 7.44772 18 8V8Z" fill="currentColor"/>
-                  <path fill-rule="evenodd" clip-rule="evenodd" d="M18 12C18 12.5523 17.5523 13 17 13H11C10.4477 13 10 12.5523 10 12V12C10 11.4477 10.4477 11 11 11H17C17.5523 11 18 11.4477 18 12V12Z" fill="currentColor"/>
-                  <path fill-rule="evenodd" clip-rule="evenodd" d="M18 16C18 16.5523 17.5523 17 17 17H11C10.4477 17 10 16.5523 10 16V16C10 15.4477 10.4477 15 11 15H17C17.5523 15 18 15.4477 18 16V16Z" fill="currentColor"/>
-                </svg>
-                Table
-              </v-btn>
-            </v-btn-toggle>
-        </v-col>
-      </v-row>
-
-      <v-row v-if="activeView === 'cards'">
-
-        <!-- Card view -->
-        <v-col cols="12" sm="6" md="4" lg="3">
-          <v-card variant="flat" :border="true" rounded="xlg">
-            <v-card-item>
-              <div class="d-flex justify-space-between">
-               <v-chip rounded color="purple2" variant="tonal" class="font-weight-bold my-2" size="small"><IconProject width="12px" class="mr-1"></IconProject>Owner</v-chip>
-
-               <!-- <v-btn color="default" variant="text" size="small" icon="mdi-dots-vertical">
+                    <v-btn
+                        size="small"
+                        rounded="xl"
+                        active-class="active"
+                        :active="activeView === 'cards'"
+                        aria-label="Toggle Cards View"
+                        @click="toggleView('cards')"
+                    >
+                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <rect x="6.99902" y="6.99951" width="4.0003" height="4.0003" rx="1" fill="currentColor" />
+                            <rect x="6.99902" y="13.0005" width="4.0003" height="4.0003" rx="1" fill="currentColor" />
+                            <rect x="12.999" y="6.99951" width="4.0003" height="4.0003" rx="1" fill="currentColor" />
+                            <rect x="12.999" y="13.0005" width="4.0003" height="4.0003" rx="1" fill="currentColor" />
+                        </svg>
+                        Cards
+                    </v-btn>
+                    <v-btn
+                        size="small"
+                        rounded="xl"
+                        active-class="active"
+                        :active="activeView === 'table'"
+                        aria-label="Toggle Table View"
+                        @click="toggleView('table')"
+                    >
+                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path fill-rule="evenodd" clip-rule="evenodd" d="M9 8C9 8.55228 8.55228 9 8 9V9C7.44772 9 7 8.55228 7 8V8C7 7.44772 7.44772 7 8 7V7C8.55228 7 9 7.44772 9 8V8Z" fill="currentColor" />
+                            <path fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.5523 8.55228 13 8 13V13C7.44772 13 7 12.5523 7 12V12C7 11.4477 7.44772 11 8 11V11C8.55228 11 9 11.4477 9 12V12Z" fill="currentColor" />
+                            <path fill-rule="evenodd" clip-rule="evenodd" d="M9 16C9 16.5523 8.55228 17 8 17V17C7.44772 17 7 16.5523 7 16V16C7 15.4477 7.44772 15 8 15V15C8.55228 15 9 15.4477 9 16V16Z" fill="currentColor" />
+                            <path fill-rule="evenodd" clip-rule="evenodd" d="M18 8C18 8.55228 17.5523 9 17 9H11C10.4477 9 10 8.55228 10 8V8C10 7.44772 10.4477 7 11 7H17C17.5523 7 18 7.44772 18 8V8Z" fill="currentColor" />
+                            <path fill-rule="evenodd" clip-rule="evenodd" d="M18 12C18 12.5523 17.5523 13 17 13H11C10.4477 13 10 12.5523 10 12V12C10 11.4477 10.4477 11 11 11H17C17.5523 11 18 11.4477 18 12V12Z" fill="currentColor" />
+                            <path fill-rule="evenodd" clip-rule="evenodd" d="M18 16C18 16.5523 17.5523 17 17 17H11C10.4477 17 10 16.5523 10 16V16C10 15.4477 10.4477 15 11 15H17C17.5523 15 18 15.4477 18 16V16Z" fill="currentColor" />
+                        </svg>
+                        Table
+                    </v-btn>
+                </v-btn-toggle>
+            </v-col>
+        </v-row>
+
+        <v-row v-if="activeView === 'cards'">
+            <!-- Card view -->
+            <v-col cols="12" sm="6" md="4" lg="3">
+                <v-card variant="flat" :border="true" rounded="xlg">
+                    <v-card-item>
+                        <div class="d-flex justify-space-between">
+                            <v-chip rounded color="purple2" variant="tonal" class="font-weight-bold my-2" size="small"><IconProject width="12px" class="mr-1" />Owner</v-chip>
+
+                            <!-- <v-btn color="default" variant="text" size="small" icon="mdi-dots-vertical">
               </v-btn> -->
 
-               <v-btn color="default" variant="text" size="small">
-
-                <v-icon icon="mdi-dots-vertical"></v-icon>
-
-                <v-menu activator="parent" location="end" transition="scale-transition">
-
-                  <!-- Project Menu -->
-                  <v-list class="pa-2">
-
-                    <!-- Project Settings -->
-                    <v-list-item link rounded="lg">
-                      <template v-slot:prepend>
-                        <IconSettings />
-                      </template>
-                      <v-list-item-title class="text-body-2 ml-3">
-                        Project Settings
-                      </v-list-item-title>
-                    </v-list-item>
-
-                    <v-divider class="my-2"></v-divider>
-
-                    <!-- Invite Members -->
-                    <v-list-item link class="mt-1" rounded="lg">
-                      <template v-slot:prepend>
-                        <IconTeam/>
-                      </template>
-                      <v-list-item-title class="text-body-2 ml-3">
-                        Invite Members
-                      </v-list-item-title>
-                    </v-list-item>
-                  </v-list>
-                </v-menu>
-
-               </v-btn>
-              </div>
-              <v-card-title>
-                <router-link class="link" to="/dashboard">My first project</router-link>
-              </v-card-title>
-              <v-card-subtitle>
-                <p>Project Description</p>
-              </v-card-subtitle>
-            </v-card-item>
-            <v-card-text>
-              <v-divider class="mt-1 mb-4"></v-divider>
-              <v-btn color="primary" size="small" class="mr-2" link router-link to="/dashboard">Open Project</v-btn>
-            </v-card-text>
-          </v-card>
-        </v-col>
-
-        <v-col cols="12" sm="6" md="4" lg="3">
-          <v-card variant="flat" :border="true" rounded="xlg">
-            <v-card-item>
-              <v-chip rounded color="green" variant="tonal" class="font-weight-bold my-2" size="small"><IconProject width="12px" class="mr-1"></IconProject>Member</v-chip>
-              <v-card-title>
-                <router-link class="link" to="/dashboard">Storj Labs</router-link>
-              </v-card-title>
-              <v-card-subtitle>
-                <p>Shared team project</p>
-              </v-card-subtitle>
-            </v-card-item>
-            <v-card-text>
-              <v-divider class="mt-1 mb-4"></v-divider>
-              <v-btn color="primary" size="small" class="mr-2" link router-link to="/dashboard">Open Project</v-btn>
-            </v-card-text>
-          </v-card>
-        </v-col>
-
-        <v-col cols="12" sm="6" md="4" lg="3">
-          <v-card variant="flat" :border="true" rounded="xlg">
-            <v-card-item>
-              <v-chip rounded color="warning" variant="tonal" class="font-weight-bold my-2" size="small"><IconProject width="12px" class="mr-1"></IconProject>Invited</v-chip>
-              <v-card-title>
-                Invitation Project
-              </v-card-title>
-              <v-card-subtitle>
-                <p>Example invitation.</p>
-              </v-card-subtitle>
-            </v-card-item>
-            <v-card-text>
-              <v-divider class="mt-1 mb-4"></v-divider>
-              <v-btn color="primary" size="small" class="mr-2" link router-link to="/dashboard">Join Project</v-btn>
-              <v-btn variant="outlined" color="default" size="small" class="mr-2">Decline</v-btn>
-            </v-card-text>
-          </v-card>
-        </v-col>
-
-        <v-col cols="12" sm="6" md="4" lg="3">
-          <v-card variant="flat" :border="true" rounded="xlg">
-            <v-card-item>
-              <v-chip rounded color="primary" variant="tonal" class="font-weight-bold my-2" size="small"><IconProject width="12px" class="mr-1"></IconProject>Project</v-chip>
-              <v-card-title>
-                Welcome
-              </v-card-title>
-              <v-card-subtitle>
-                <p>Create a project to get started.</p>
-              </v-card-subtitle>
-            </v-card-item>
-            <v-card-text>
-              <v-divider class="mt-1 mb-4"></v-divider>
-              <v-btn color="primary" size="small" class="mr-2" link router-link to="/dashboard">Create Project</v-btn>
-            </v-card-text>
-          </v-card>
-        </v-col>
-
-      </v-row>
-
-      <v-row v-else-if="activeView === 'table'">
-        <!-- Table view -->
-        <v-col>
-          <ProjectsTableComponent/>
-        </v-col>
-      </v-row>
-
-      <v-row>
-
-      </v-row>
-
-  </v-container>
+                            <v-btn color="default" variant="text" size="small">
+                                <v-icon icon="mdi-dots-vertical" />
+
+                                <v-menu activator="parent" location="end" transition="scale-transition">
+                                    <!-- Project Menu -->
+                                    <v-list class="pa-2">
+                                        <!-- Project Settings -->
+                                        <v-list-item link rounded="lg">
+                                            <template #prepend>
+                                                <IconSettings />
+                                            </template>
+                                            <v-list-item-title class="text-body-2 ml-3">
+                                                Project Settings
+                                            </v-list-item-title>
+                                        </v-list-item>
+
+                                        <v-divider class="my-2" />
+
+                                        <!-- Invite Members -->
+                                        <v-list-item link class="mt-1" rounded="lg">
+                                            <template #prepend>
+                                                <IconTeam />
+                                            </template>
+                                            <v-list-item-title class="text-body-2 ml-3">
+                                                Invite Members
+                                            </v-list-item-title>
+                                        </v-list-item>
+                                    </v-list>
+                                </v-menu>
+                            </v-btn>
+                        </div>
+                        <v-card-title>
+                            <router-link class="link" to="/dashboard">My first project</router-link>
+                        </v-card-title>
+                        <v-card-subtitle>
+                            <p>Project Description</p>
+                        </v-card-subtitle>
+                    </v-card-item>
+                    <v-card-text>
+                        <v-divider class="mt-1 mb-4" />
+                        <v-btn color="primary" size="small" class="mr-2" link router-link to="/dashboard">Open Project</v-btn>
+                    </v-card-text>
+                </v-card>
+            </v-col>
+
+            <v-col cols="12" sm="6" md="4" lg="3">
+                <v-card variant="flat" :border="true" rounded="xlg">
+                    <v-card-item>
+                        <v-chip rounded color="green" variant="tonal" class="font-weight-bold my-2" size="small"><IconProject width="12px" class="mr-1" />Member</v-chip>
+                        <v-card-title>
+                            <router-link class="link" to="/dashboard">Storj Labs</router-link>
+                        </v-card-title>
+                        <v-card-subtitle>
+                            <p>Shared team project</p>
+                        </v-card-subtitle>
+                    </v-card-item>
+                    <v-card-text>
+                        <v-divider class="mt-1 mb-4" />
+                        <v-btn color="primary" size="small" class="mr-2" link router-link to="/dashboard">Open Project</v-btn>
+                    </v-card-text>
+                </v-card>
+            </v-col>
+
+            <v-col cols="12" sm="6" md="4" lg="3">
+                <v-card variant="flat" :border="true" rounded="xlg">
+                    <v-card-item>
+                        <v-chip rounded color="warning" variant="tonal" class="font-weight-bold my-2" size="small"><IconProject width="12px" class="mr-1" />Invited</v-chip>
+                        <v-card-title>
+                            Invitation Project
+                        </v-card-title>
+                        <v-card-subtitle>
+                            <p>Example invitation.</p>
+                        </v-card-subtitle>
+                    </v-card-item>
+                    <v-card-text>
+                        <v-divider class="mt-1 mb-4" />
+                        <v-btn color="primary" size="small" class="mr-2" link router-link to="/dashboard">Join Project</v-btn>
+                        <v-btn variant="outlined" color="default" size="small" class="mr-2">Decline</v-btn>
+                    </v-card-text>
+                </v-card>
+            </v-col>
+
+            <v-col cols="12" sm="6" md="4" lg="3">
+                <v-card variant="flat" :border="true" rounded="xlg">
+                    <v-card-item>
+                        <v-chip rounded color="primary" variant="tonal" class="font-weight-bold my-2" size="small"><IconProject width="12px" class="mr-1" />Project</v-chip>
+                        <v-card-title>
+                            Welcome
+                        </v-card-title>
+                        <v-card-subtitle>
+                            <p>Create a project to get started.</p>
+                        </v-card-subtitle>
+                    </v-card-item>
+                    <v-card-text>
+                        <v-divider class="mt-1 mb-4" />
+                        <v-btn color="primary" size="small" class="mr-2" link router-link to="/dashboard">Create Project</v-btn>
+                    </v-card-text>
+                </v-card>
+            </v-col>
+        </v-row>
+
+        <v-row v-else-if="activeView === 'table'">
+            <!-- Table view -->
+            <v-col>
+                <ProjectsTableComponent />
+            </v-col>
+        </v-row>
+
+        <v-row />
+    </v-container>
 </template>
 
-<script>
+<script setup lang="ts">
+import { ref } from 'vue';
+import {
+    VContainer,
+    VRow,
+    VCol,
+    VBtn,
+    VDialog,
+    VCard,
+    VSheet,
+    VCardItem,
+    VCardTitle,
+    VDivider,
+    VForm,
+    VTextField,
+    VCardActions,
+    VSpacer,
+    VBtnToggle,
+    VChip,
+    VIcon,
+    VMenu,
+    VList,
+    VListItem,
+    VListItemTitle,
+    VCardSubtitle,
+    VCardText,
+} from 'vuetify/components';
+
 import PageTitleComponent from '@poc/components/PageTitleComponent.vue';
-import PageSubtitleComponent from '@poc/components/PageSubtitleComponent.vue';
 import ProjectsTableComponent from '@poc/components/ProjectsTableComponent.vue';
-import IconNew from '@poc/components/icons/IconNew.vue';
 import IconProject from '@poc/components/icons/IconProject.vue';
 import IconSettings from '@poc/components/icons/IconSettings.vue';
 import IconTeam from '@poc/components/icons/IconTeam.vue';
 
-export default {
-  components: {
-    PageTitleComponent,
-    PageSubtitleComponent,
-    ProjectsTableComponent,
-    IconNew,
-    IconProject,
-    IconSettings,
-    IconTeam,
-  },
-  data() {
-    return {
-      menu: false,
-      dialog: false,
-      valid: false,
-      search: '',
-      name: '',
-      description: '',
-      activeView: localStorage.getItem('activeView') || 'cards',
-      nameRules: [
-        value => {
-          if (value) return true;
+const dialog = ref<boolean>(false);
+const valid = ref<boolean>(false);
+const name = ref<string>('');
+const activeView = ref<string>(localStorage.getItem('activeView') || 'cards');
 
-          return 'Project name is required.';
-        },
-        value => {
-          if (value?.length <= 100) return true;
+const nameRules = [
+    value => (!!value || 'Project name is required.'),
+    value => ((value?.length <= 100) || 'Name must be less than 100 characters.'),
+];
 
-          return 'Name must be less than 100 characters.';
-        },
-      ],
-    };
-  },
-  methods: {
-    toggleView(view) {
-      this.activeView = view;
-      localStorage.setItem('activeView', view);
-    },
-  },
-};
+function toggleView(view: string): void {
+    activeView.value = view;
+    localStorage.setItem('activeView', view);
+}
 </script>
diff --git a/web/satellite/vuetify-poc/src/views/Team.vue b/web/satellite/vuetify-poc/src/views/Team.vue
index 723f582f50a5..c2198612d48a 100644
--- a/web/satellite/vuetify-poc/src/views/Team.vue
+++ b/web/satellite/vuetify-poc/src/views/Team.vue
@@ -3,16 +3,14 @@
 
 <template>
     <v-container>
-
-        <PageTitleComponent title="Team"/>
-        <PageSubtitleComponent subtitle="Invite people and manage the team of this project." link="https://docs.storj.io/dcs/users"/>
+        <PageTitleComponent title="Team" />
+        <PageSubtitleComponent subtitle="Invite people and manage the team of this project." link="https://docs.storj.io/dcs/users" />
 
         <v-col>
             <v-row class="mt-2 mb-4">
-
                 <v-btn>
                     <svg width="16" height="16" class="mr-2" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-                        <path d="M10 1C14.9706 1 19 5.02944 19 10C19 14.9706 14.9706 19 10 19C5.02944 19 1 14.9706 1 10C1 5.02944 5.02944 1 10 1ZM10 2.65C5.94071 2.65 2.65 5.94071 2.65 10C2.65 14.0593 5.94071 17.35 10 17.35C14.0593 17.35 17.35 14.0593 17.35 10C17.35 5.94071 14.0593 2.65 10 2.65ZM10.7496 6.8989L10.7499 6.91218L10.7499 9.223H12.9926C13.4529 9.223 13.8302 9.58799 13.8456 10.048C13.8602 10.4887 13.5148 10.8579 13.0741 10.8726L13.0608 10.8729L10.7499 10.873L10.75 13.171C10.75 13.6266 10.3806 13.996 9.925 13.996C9.48048 13.996 9.11807 13.6444 9.10066 13.2042L9.1 13.171L9.09985 10.873H6.802C6.34637 10.873 5.977 10.5036 5.977 10.048C5.977 9.60348 6.32857 9.24107 6.76882 9.22366L6.802 9.223H9.09985L9.1 6.98036C9.1 6.5201 9.46499 6.14276 9.925 6.12745C10.3657 6.11279 10.7349 6.45818 10.7496 6.8989Z" fill="currentColor"/>
+                        <path d="M10 1C14.9706 1 19 5.02944 19 10C19 14.9706 14.9706 19 10 19C5.02944 19 1 14.9706 1 10C1 5.02944 5.02944 1 10 1ZM10 2.65C5.94071 2.65 2.65 5.94071 2.65 10C2.65 14.0593 5.94071 17.35 10 17.35C14.0593 17.35 17.35 14.0593 17.35 10C17.35 5.94071 14.0593 2.65 10 2.65ZM10.7496 6.8989L10.7499 6.91218L10.7499 9.223H12.9926C13.4529 9.223 13.8302 9.58799 13.8456 10.048C13.8602 10.4887 13.5148 10.8579 13.0741 10.8726L13.0608 10.8729L10.7499 10.873L10.75 13.171C10.75 13.6266 10.3806 13.996 9.925 13.996C9.48048 13.996 9.11807 13.6444 9.10066 13.2042L9.1 13.171L9.09985 10.873H6.802C6.34637 10.873 5.977 10.5036 5.977 10.048C5.977 9.60348 6.32857 9.24107 6.76882 9.22366L6.802 9.223H9.09985L9.1 6.98036C9.1 6.5201 9.46499 6.14276 9.925 6.12745C10.3657 6.11279 10.7349 6.45818 10.7496 6.8989Z" fill="currentColor" />
                     </svg>
                     Add Members
 
@@ -24,10 +22,9 @@
                         transition="fade-transition"
                     >
                         <v-card rounded="xlg">
-
                             <v-sheet>
                                 <v-card-item class="pl-7 py-4">
-                                    <template v-slot:prepend>
+                                    <template #prepend>
                                         <v-card-title class="font-weight-bold">
                                             <!-- <v-icon>
                                                 <img src="../assets/icon-team.svg" alt="Team">
@@ -45,24 +42,24 @@
                                         + Add More
                                     </v-btn> -->
 
-                                    <template v-slot:append>
+                                    <template #append>
                                         <v-btn
                                             icon="$close"
                                             variant="text"
                                             size="small"
                                             color="default"
                                             @click="dialog = false"
-                                        ></v-btn>
+                                        />
                                     </template>
                                 </v-card-item>
                             </v-sheet>
 
-                            <v-divider></v-divider>
+                            <v-divider />
 
                             <v-form v-model="valid" class="pa-7 pb-4">
                                 <v-row>
                                     <v-col>
-                                    <p>Invite team members to join you in this project.</p>
+                                        <p>Invite team members to join you in this project.</p>
                                     <!-- <v-divider class="my-6"></v-divider> -->
                                     <!-- <p>Use only lowercase letters and numbers, no spaces.</p> -->
                                     <!-- <v-chip prepend-icon="mdi-information" color="info" rounded="xl">
@@ -84,8 +81,8 @@
                                             required
                                             autofocus
                                             class="mt-2"
-                                        ></v-text-field>
-                                </v-col>
+                                        />
+                                    </v-col>
                                 </v-row>
 
                                 <!-- <v-row>
@@ -93,10 +90,9 @@
                                         <v-btn variant="text" class="mb-4">+ Add More</v-btn>
                                     </v-col>
                                 </v-row> -->
-
                             </v-form>
 
-                            <v-divider></v-divider>
+                            <v-divider />
 
                             <v-card-actions class="pa-7">
                                 <v-row>
@@ -104,24 +100,37 @@
                                         <v-btn variant="outlined" color="default" block @click="dialog = false">Cancel</v-btn>
                                     </v-col>
                                     <v-col>
-                                        <v-btn color="primary" variant="flat" block @click="onAddUsersClick" :loading="isLoading">Send Invite</v-btn>
+                                        <v-btn color="primary" variant="flat" block :loading="isLoading" @click="onAddUsersClick">Send Invite</v-btn>
                                     </v-col>
                                 </v-row>
                             </v-card-actions>
                         </v-card>
                     </v-dialog>
                 </v-btn>
-
             </v-row>
         </v-col>
 
-        <TeamTableComponent/>
-
+        <TeamTableComponent />
     </v-container>
 </template>
 
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue';
+import {
+    VContainer,
+    VCol,
+    VRow,
+    VBtn,
+    VDialog,
+    VCard,
+    VSheet,
+    VCardItem,
+    VCardTitle,
+    VDivider,
+    VForm,
+    VCardActions,
+    VTextField,
+} from 'vuetify/components';
 
 import { useProjectMembersStore } from '@/store/modules/projectMembersStore';
 import { useProjectsStore } from '@/store/modules/projectsStore';
@@ -137,18 +146,11 @@ const isLoading = ref<boolean>(false);
 const dialog = ref<boolean>(false);
 const valid = ref<boolean>(false);
 const email = ref<string>('');
-const emailRules = ref([
-    value => {
-        if (value) return true;
-
-        return 'E-mail is requred.';
-    },
-    value => {
-        if (/.+@.+\..+/.test(value)) return true;
-
-        return 'E-mail must be valid.';
-    },
-]);
+
+const emailRules = [
+    (value: string): string | boolean => (!!value || 'E-mail is requred.'),
+    (value: string): string | boolean => ((/.+@.+\..+/.test(value)) || 'E-mail must be valid.'),
+];
 
 const selectedProjectID = computed((): string => projectsStore.state.selectedProject.id);