From 83ea3772e2c7bb3355d9e4b76a76d31556527f27 Mon Sep 17 00:00:00 2001
From: Tome Boshevski <tome@storj.io>
Date: Thu, 9 Nov 2023 13:26:11 -0600
Subject: [PATCH] web/satellite/vuetify-poc: ui ux improvements

This change improves the satellite v2 user interface and overall
experience.

Change-Id: I702a6aa6b0b1a676bb2c404ab54f0ecef3b1ad7a
---
 .../src/components/AccessTableComponent.vue   |   3 +-
 .../src/components/BrowserRowActions.vue      |  12 +-
 .../src/components/BrowserTableComponent.vue  |   3 +-
 .../src/components/BucketsDataTable.vue       |  13 +-
 .../src/components/CardStatsComponent.vue     |   2 +-
 .../src/components/ProjectCard.vue            |  10 +-
 .../src/components/ProjectsTableComponent.vue |   4 +-
 .../src/components/TeamTableComponent.vue     |  17 +--
 .../TokenTransactionsTableComponent.vue       |   3 +-
 .../src/components/UsageProgressComponent.vue |   2 +-
 .../components/billing/BillingHistoryTab.vue  |   3 +-
 .../dialogs/AddTeamMemberDialog.vue           |   6 +-
 .../dialogs/BrowserNewFolderDialog.vue        |  22 ++-
 .../dialogs/BucketDetailsDialog.vue           |  16 ++-
 .../components/dialogs/ChangeNameDialog.vue   |   3 +-
 .../dialogs/ChangePasswordDialog.vue          |   2 +-
 .../components/dialogs/CreateAccessDialog.vue |   5 +-
 .../components/dialogs/CreateBucketDialog.vue |  18 +--
 .../dialogs/CreateProjectDialog.vue           |   2 +-
 .../components/dialogs/DeleteAccessDialog.vue |   4 +-
 .../components/dialogs/DeleteBucketDialog.vue |   4 +-
 .../components/dialogs/DeleteFileDialog.vue   |   4 +-
 .../components/dialogs/DisableMFADialog.vue   |   8 +-
 .../dialogs/EditProjectDetailsDialog.vue      |   2 +-
 .../dialogs/EditProjectLimitDialog.vue        |   2 +-
 .../components/dialogs/EnableMFADialog.vue    | 128 +++++++++---------
 .../dialogs/EnterBucketPassphraseDialog.vue   |  14 +-
 .../dialogs/GeographicDistributionDialog.vue  |  21 ++-
 .../components/dialogs/InactivityDialog.vue   |   2 +-
 .../components/dialogs/JoinProjectDialog.vue  |   2 +-
 .../src/components/dialogs/MFACodesDialog.vue |  12 +-
 .../dialogs/ManagePassphraseDialog.vue        |   2 +-
 .../dialogs/RemoveProjectMemberDialog.vue     |   4 +-
 .../dialogs/SessionExpiredDialog.vue          |   2 +-
 .../dialogs/SetSessionTimeoutDialog.vue       |   2 +-
 .../src/components/dialogs/ShareDialog.vue    |  19 ++-
 .../EnterPassphraseStep.vue                   |  11 +-
 .../PassphraseGeneratedStep.vue               |  10 +-
 .../commonPassphraseSteps/SaveButtons.vue     |   2 -
 .../createAccessSteps/AccessCreatedStep.vue   |   2 +-
 .../AccessEncryptionStep.vue                  |  30 ++--
 .../CLIAccessCreatedStep.vue                  |   2 +-
 .../ChoosePermissionsStep.vue                 |  93 +++++++++++--
 .../createAccessSteps/ConfirmDetailsStep.vue  |  26 ++--
 .../createAccessSteps/CreateNewAccessStep.vue |  16 +--
 .../createAccessSteps/EncryptionInfoStep.vue  |   4 +-
 .../S3CredentialsCreatedStep.vue              |   4 +-
 .../createAccessSteps/TextOutputArea.vue      |  11 +-
 .../EncryptionPassphraseStep.vue              |   2 +-
 .../upgradeAccountFlow/AddCreditCardStep.vue  |   8 +-
 .../dialogs/upgradeAccountFlow/InfoBullet.vue |  38 ++++--
 .../UpgradeAccountDialog.vue                  |   9 +-
 .../upgradeAccountFlow/UpgradeInfoStep.vue    |  27 ++--
 .../upgradeAccountFlow/UpgradeOptionsStep.vue |   6 +-
 .../src/layouts/default/AppBar.vue            |   2 +-
 .../src/layouts/default/ProjectNav.vue        |   6 +-
 .../vuetify-poc/src/plugins/vuetify.ts        |  25 +++-
 .../vuetify-poc/src/styles/styles.scss        | 109 +++++++++++----
 .../vuetify-poc/src/types/projects.ts         |   2 +-
 .../vuetify-poc/src/views/AccountSettings.vue |  13 +-
 .../vuetify-poc/src/views/Billing.vue         |  14 +-
 .../vuetify-poc/src/views/Bucket.vue          |  12 +-
 .../vuetify-poc/src/views/Projects.vue        |   2 +-
 web/satellite/vuetify-poc/src/views/Team.vue  |   4 +-
 64 files changed, 521 insertions(+), 347 deletions(-)

diff --git a/web/satellite/vuetify-poc/src/components/AccessTableComponent.vue b/web/satellite/vuetify-poc/src/components/AccessTableComponent.vue
index c94b19a5b74e..609ee13f7d96 100644
--- a/web/satellite/vuetify-poc/src/components/AccessTableComponent.vue
+++ b/web/satellite/vuetify-poc/src/components/AccessTableComponent.vue
@@ -27,7 +27,6 @@
             item-value="name"
             no-data-text="No results found"
             select-strategy="all"
-            class="elevation-1"
             @update:itemsPerPage="onUpdateLimit"
             @update:page="onUpdatePage"
             @update:sortBy="onUpdateSortBy"
@@ -53,7 +52,7 @@
                 >
                     <v-icon icon="mdi-dots-horizontal" />
                     <v-menu activator="parent">
-                        <v-list class="pa-2">
+                        <v-list class="pa-1">
                             <v-list-item class="text-error" density="comfortable" link rounded="lg" @click="() => onDeleteClick(item.raw.name)">
                                 <template #prepend>
                                     <icon-trash bold />
diff --git a/web/satellite/vuetify-poc/src/components/BrowserRowActions.vue b/web/satellite/vuetify-poc/src/components/BrowserRowActions.vue
index 0c50b4390831..a58d768623ea 100644
--- a/web/satellite/vuetify-poc/src/components/BrowserRowActions.vue
+++ b/web/satellite/vuetify-poc/src/components/BrowserRowActions.vue
@@ -28,13 +28,13 @@
         >
             <v-icon icon="mdi-dots-horizontal" />
             <v-menu activator="parent">
-                <v-list class="pa-2">
+                <v-list class="pa-1">
                     <template v-if="file.type !== 'folder'">
                         <v-list-item density="comfortable" link rounded="lg" @click="emit('previewClick')">
                             <template #prepend>
                                 <icon-preview />
                             </template>
-                            <v-list-item-title class="pl-2 text-body-2 font-weight-medium">
+                            <v-list-item-title class="pl-2 ml-2 text-body-2 font-weight-medium">
                                 Preview
                             </v-list-item-title>
                         </v-list-item>
@@ -49,7 +49,7 @@
                                 <icon-download />
                             </template>
                             <v-fade-transition>
-                                <v-list-item-title v-show="!isDownloading" class="pl-2 text-body-2 font-weight-medium">
+                                <v-list-item-title v-show="!isDownloading" class="pl-2 ml-2 text-body-2 font-weight-medium">
                                     Download
                                 </v-list-item-title>
                             </v-fade-transition>
@@ -63,18 +63,18 @@
                         <template #prepend>
                             <icon-share bold />
                         </template>
-                        <v-list-item-title class="pl-2 text-body-2 font-weight-medium">
+                        <v-list-item-title class="pl-2 ml-2 text-body-2 font-weight-medium">
                             Share
                         </v-list-item-title>
                     </v-list-item>
 
-                    <v-divider class="my-2" />
+                    <v-divider class="my-1" />
 
                     <v-list-item density="comfortable" link rounded="lg" base-color="error" @click="emit('deleteFileClick')">
                         <template #prepend>
                             <icon-trash bold />
                         </template>
-                        <v-list-item-title class="pl-2 text-body-2 font-weight-medium">
+                        <v-list-item-title class="pl-2 ml-2 text-body-2 font-weight-medium">
                             Delete
                         </v-list-item-title>
                     </v-list-item>
diff --git a/web/satellite/vuetify-poc/src/components/BrowserTableComponent.vue b/web/satellite/vuetify-poc/src/components/BrowserTableComponent.vue
index f001a0f6e91d..ad4ef8dc4e9e 100644
--- a/web/satellite/vuetify-poc/src/components/BrowserTableComponent.vue
+++ b/web/satellite/vuetify-poc/src/components/BrowserTableComponent.vue
@@ -24,9 +24,8 @@
             :headers="headers"
             :items="tableFiles"
             :search="search"
-            class="elevation-1"
             :item-value="(item: BrowserObjectWrapper) => item.browserObject.Key"
-            no-data-text="No results found"
+            no-data-text="No data found"
             :page="cursor.page"
             hover
             must-sort
diff --git a/web/satellite/vuetify-poc/src/components/BucketsDataTable.vue b/web/satellite/vuetify-poc/src/components/BucketsDataTable.vue
index 4ddf6291485c..31d877b9905f 100644
--- a/web/satellite/vuetify-poc/src/components/BucketsDataTable.vue
+++ b/web/satellite/vuetify-poc/src/components/BucketsDataTable.vue
@@ -25,8 +25,7 @@
             :loading="areBucketsFetching"
             :items-length="page.totalCount"
             :items-per-page-options="tableSizeOptions(page.totalCount)"
-            no-data-text="No results found"
-            class="elevation-1"
+            no-data-text="No buckets found"
             hover
             @update:itemsPerPage="onUpdateLimit"
             @update:page="onUpdatePage"
@@ -85,8 +84,8 @@
                             v-bind="activatorProps"
                         />
                     </template>
-                    <v-list class="pa-0">
-                        <v-list-item rounded-lg class="ma-1" link @click="() => showBucketDetailsModal(item.raw.name)">
+                    <v-list class="pa-1">
+                        <v-list-item rounded-lg link @click="() => showBucketDetailsModal(item.raw.name)">
                             <template #prepend>
                                 <icon-bucket size="18" />
                             </template>
@@ -94,7 +93,7 @@
                                 View Bucket Details
                             </v-list-item-title>
                         </v-list-item>
-                        <v-list-item rounded-lg class="ma-1" link @click="() => showShareBucketDialog(item.raw.name)">
+                        <v-list-item rounded-lg link @click="() => showShareBucketDialog(item.raw.name)">
                             <template #prepend>
                                 <icon-share size="18" />
                             </template>
@@ -102,8 +101,8 @@
                                 Share Bucket
                             </v-list-item-title>
                         </v-list-item>
-                        <v-divider />
-                        <v-list-item rounded-lg class="ma-1 text-error text-body-2" link @click="() => showDeleteBucketDialog(item.raw.name)">
+                        <v-divider class="my-1" />
+                        <v-list-item rounded-lg class="text-error text-body-2" link @click="() => showDeleteBucketDialog(item.raw.name)">
                             <template #prepend>
                                 <icon-trash />
                             </template>
diff --git a/web/satellite/vuetify-poc/src/components/CardStatsComponent.vue b/web/satellite/vuetify-poc/src/components/CardStatsComponent.vue
index 2f171302039e..9901f35701c2 100644
--- a/web/satellite/vuetify-poc/src/components/CardStatsComponent.vue
+++ b/web/satellite/vuetify-poc/src/components/CardStatsComponent.vue
@@ -10,7 +10,7 @@
             </v-card-title>
         </template>
         <v-card-text>
-            <v-chip rounded color="green" variant="outlined" class="font-weight-bold">{{ data }}</v-chip>
+            <v-chip rounded color="default" variant="outlined" class="font-weight-bold">{{ data }}</v-chip>
         </v-card-text>
     </v-card>
 </template>
diff --git a/web/satellite/vuetify-poc/src/components/ProjectCard.vue b/web/satellite/vuetify-poc/src/components/ProjectCard.vue
index cfb8bcf95960..b9603f4df965 100644
--- a/web/satellite/vuetify-poc/src/components/ProjectCard.vue
+++ b/web/satellite/vuetify-poc/src/components/ProjectCard.vue
@@ -47,9 +47,9 @@
                 <v-btn v-if="item?.role === ProjectRole.Owner" color="default" variant="outlined" size="small" density="comfortable" icon>
                     <v-icon icon="mdi-dots-horizontal" />
 
-                    <v-menu activator="parent" location="end" transition="scale-transition">
-                        <v-list class="pa-2">
-                            <v-list-item link rounded="lg" @click="() => onSettingsClick()">
+                    <v-menu activator="parent" location="bottom" transition="fade-transition">
+                        <v-list class="pa-1">
+                            <v-list-item link @click="() => onSettingsClick()">
                                 <template #prepend>
                                     <icon-settings />
                                 </template>
@@ -58,9 +58,9 @@
                                 </v-list-item-title>
                             </v-list-item>
 
-                            <v-divider class="my-2" />
+                            <v-divider class="my-1" />
 
-                            <v-list-item link class="mt-1" rounded="lg" @click="emit('inviteClick')">
+                            <v-list-item link class="mt-1" @click="emit('inviteClick')">
                                 <template #prepend>
                                     <icon-team size="18" />
                                 </template>
diff --git a/web/satellite/vuetify-poc/src/components/ProjectsTableComponent.vue b/web/satellite/vuetify-poc/src/components/ProjectsTableComponent.vue
index b91c8f611428..27509bf956b4 100644
--- a/web/satellite/vuetify-poc/src/components/ProjectsTableComponent.vue
+++ b/web/satellite/vuetify-poc/src/components/ProjectsTableComponent.vue
@@ -23,7 +23,6 @@
             :items="items"
             :search="search"
             no-data-text="No results found"
-            class="elevation-1"
             item-key="path"
         >
             <template #item.name="{ item }">
@@ -79,7 +78,7 @@
                         :loading="decliningIds.has(item.raw.id)"
                     >
                         <v-icon icon="mdi-dots-horizontal" size="18" />
-                        <v-menu activator="parent" location="bottom end" transition="scale-transition">
+                        <v-menu activator="parent" location="bottom" transition="scale-transition">
                             <v-list class="pa-1">
                                 <template v-if="item.raw.role === ProjectRole.Owner">
                                     <v-list-item link @click="() => onSettingsClick(item.raw)">
@@ -90,6 +89,7 @@
                                             Project Settings
                                         </v-list-item-title>
                                     </v-list-item>
+                                    <v-divider class="my-1" />
                                     <v-list-item link>
                                         <template #prepend>
                                             <icon-team size="18" />
diff --git a/web/satellite/vuetify-poc/src/components/TeamTableComponent.vue b/web/satellite/vuetify-poc/src/components/TeamTableComponent.vue
index 3ae3da44aa93..1bdb6f9073a8 100644
--- a/web/satellite/vuetify-poc/src/components/TeamTableComponent.vue
+++ b/web/satellite/vuetify-poc/src/components/TeamTableComponent.vue
@@ -2,26 +2,21 @@
 // See LICENSE for copying information.
 
 <template>
-    <v-card min-height="24" :border="0" class="mb-2 elevation-0">
-        <v-row v-if="selectedMembers.length > 0" class="justify-end align-center ma-0">
-            <p>{{ selectedMembers.length }} user{{ selectedMembers.length !== 1 ? 's' : '' }} selected</p>
-        </v-row>
-    </v-card>
     <v-card variant="flat" :border="true" rounded="xlg">
         <v-row align="center" class="ma-0">
-            <v-col v-if="selectedMembers.length" class="px-0 mr-0 ml-2 mt-2" cols="auto">
+            <v-col v-if="selectedMembers.length" class="pa-0" cols="auto">
                 <v-btn
-                    class=" text-caption"
+                    class="text-caption ml-2 mt-2"
                     prepend-icon="mdi-trash-can-outline"
                     variant="outlined"
+                    size="large"
                     color="default"
                     @click="showDeleteDialog"
                 >
-                    Remove
+                    Remove {{ selectedMembers.length }} user{{ selectedMembers.length !== 1 ? 's' : '' }}
                 </v-btn>
             </v-col>
-
-            <v-col class="px-0 mx-2 mt-2">
+            <v-col class="pa-0">
                 <v-text-field
                     v-model="search"
                     label="Search"
@@ -33,6 +28,7 @@
                     clearable
                     density="comfortable"
                     rounded="lg"
+                    class="mx-2 mt-2"
                 />
             </v-col>
         </v-row>
@@ -46,7 +42,6 @@
             :items-length="page.totalCount"
             :items-per-page-options="tableSizeOptions(page.totalCount)"
             no-data-text="No results found"
-            class="elevation-1"
             item-value="email"
             select-strategy="all"
             item-selectable="selectable"
diff --git a/web/satellite/vuetify-poc/src/components/TokenTransactionsTableComponent.vue b/web/satellite/vuetify-poc/src/components/TokenTransactionsTableComponent.vue
index f20e669137d9..59deab3031eb 100644
--- a/web/satellite/vuetify-poc/src/components/TokenTransactionsTableComponent.vue
+++ b/web/satellite/vuetify-poc/src/components/TokenTransactionsTableComponent.vue
@@ -2,7 +2,7 @@
 // See LICENSE for copying information.
 
 <template>
-    <v-card variant="flat" :border="true" rounded="xlg">
+    <v-card :border="true" rounded="xlg">
         <v-text-field
             v-model="search"
             label="Search"
@@ -26,7 +26,6 @@
             :search="search"
             :custom-key-sort="customSortFns"
             no-data-text="No results found"
-            class="elevation-1"
         >
             <template #item.timestamp="{ item }">
                 <p class="font-weight-bold">
diff --git a/web/satellite/vuetify-poc/src/components/UsageProgressComponent.vue b/web/satellite/vuetify-poc/src/components/UsageProgressComponent.vue
index 43b61ff7564e..37796b1d1719 100644
--- a/web/satellite/vuetify-poc/src/components/UsageProgressComponent.vue
+++ b/web/satellite/vuetify-poc/src/components/UsageProgressComponent.vue
@@ -10,7 +10,7 @@
             </v-card-title>
         </template>
         <v-card-item>
-            <v-progress-linear color="green" :model-value="progress" rounded height="6" />
+            <v-progress-linear color="default" :model-value="progress" rounded height="6" />
         </v-card-item>
         <v-card-item>
             <v-row>
diff --git a/web/satellite/vuetify-poc/src/components/billing/BillingHistoryTab.vue b/web/satellite/vuetify-poc/src/components/billing/BillingHistoryTab.vue
index e5c12cd26d8c..771b7d5b345b 100644
--- a/web/satellite/vuetify-poc/src/components/billing/BillingHistoryTab.vue
+++ b/web/satellite/vuetify-poc/src/components/billing/BillingHistoryTab.vue
@@ -2,14 +2,13 @@
 // See LICENSE for copying information.
 
 <template>
-    <v-card variant="flat" :border="true" rounded="xlg">
+    <v-card :border="true" rounded="xlg">
         <v-data-table
             :loading="isLoading"
             :headers="headers"
             :items="historyItems"
             :must-sort="false"
             no-data-text="No results found"
-            class="elevation-1"
             hover
         >
             <template #item.amount="{ item }">
diff --git a/web/satellite/vuetify-poc/src/components/dialogs/AddTeamMemberDialog.vue b/web/satellite/vuetify-poc/src/components/dialogs/AddTeamMemberDialog.vue
index 5a5d8c0657a2..b23ff543c055 100644
--- a/web/satellite/vuetify-poc/src/components/dialogs/AddTeamMemberDialog.vue
+++ b/web/satellite/vuetify-poc/src/components/dialogs/AddTeamMemberDialog.vue
@@ -14,7 +14,7 @@
         @update:model-value="v => model = v"
     >
         <v-card rounded="xlg">
-            <v-card-item class="pl-7 py-4">
+            <v-card-item class="pa-5 pl-7">
                 <template #prepend>
                     <img class="d-block" src="@/../static/images/team/teamMembers.svg" alt="Team members">
                 </template>
@@ -40,7 +40,7 @@
             <v-form v-model="valid" class="pa-7 pb-4" @submit.prevent="onPrimaryClick">
                 <v-row>
                     <v-col v-if="needsUpgrade">
-                        Upgrade now to unlock collaboration and bring your team together in this project.
+                        <p class="mb-4">Upgrade now to unlock collaboration and bring your team together in this project.</p>
                     </v-col>
                     <template v-else>
                         <v-col cols="12">
@@ -87,7 +87,7 @@
                             :append-icon="needsUpgrade ? 'mdi-arrow-right' : undefined"
                             @click="onPrimaryClick"
                         >
-                            {{ needsUpgrade ? 'Upgrade' : 'Send Invite' }}
+                            {{ needsUpgrade ? 'Continue' : 'Send Invite' }}
                         </v-btn>
                     </v-col>
                 </v-row>
diff --git a/web/satellite/vuetify-poc/src/components/dialogs/BrowserNewFolderDialog.vue b/web/satellite/vuetify-poc/src/components/dialogs/BrowserNewFolderDialog.vue
index 40f09f97df81..7462b8453924 100644
--- a/web/satellite/vuetify-poc/src/components/dialogs/BrowserNewFolderDialog.vue
+++ b/web/satellite/vuetify-poc/src/components/dialogs/BrowserNewFolderDialog.vue
@@ -11,13 +11,22 @@
     >
         <v-card ref="innerContent" rounded="xlg">
             <v-sheet>
-                <v-card-item class="pl-7 py-4">
+                <v-card-item class="pa-5 pl-7">
                     <template #prepend>
-                        <v-card-title class="font-weight-bold">
-                            New Folder
-                        </v-card-title>
+                        <v-sheet
+                            class="border-sm d-flex justify-center align-center"
+                            width="40"
+                            height="40"
+                            rounded="lg"
+                        >
+                            <img src="@poc/assets/icon-folder.svg" alt="folder icon">
+                        </v-sheet>
                     </template>
 
+                    <v-card-title class="font-weight-bold">
+                        New Folder
+                    </v-card-title>
+
                     <template #append>
                         <v-btn
                             icon="$close"
@@ -33,7 +42,7 @@
 
             <v-divider />
 
-            <v-form v-model="formValid" class="pa-8 pb-3">
+            <v-form v-model="formValid" class="px-7 pt-9 pb-4">
                 <v-row>
                     <v-col
                         cols="12"
@@ -42,7 +51,8 @@
                             v-model="folder"
                             variant="outlined"
                             :rules="folderRules"
-                            label="Enter Folder Name"
+                            label="Folder Name"
+                            placeholder="Enter a folder name"
                             :hide-details="false"
                             required
                             autofocus
diff --git a/web/satellite/vuetify-poc/src/components/dialogs/BucketDetailsDialog.vue b/web/satellite/vuetify-poc/src/components/dialogs/BucketDetailsDialog.vue
index 9fe0d3c9cbce..9c63ad57817c 100644
--- a/web/satellite/vuetify-poc/src/components/dialogs/BucketDetailsDialog.vue
+++ b/web/satellite/vuetify-poc/src/components/dialogs/BucketDetailsDialog.vue
@@ -10,9 +10,16 @@
         transition="fade-transition"
     >
         <v-card rounded="xlg">
-            <v-card-item class="py-4 pl-7">
+            <v-card-item class="pa-5 pl-7">
                 <template #prepend>
-                    <img class="d-block" src="@/../static/images/buckets/createBucket.svg" alt="bucket">
+                    <v-sheet
+                        class="border-sm d-flex justify-center align-center"
+                        width="40"
+                        height="40"
+                        rounded="lg"
+                    >
+                        <icon-bucket />
+                    </v-sheet>
                 </template>
 
                 <v-card-title class="font-weight-bold">
@@ -103,10 +110,11 @@ import {
     VRow,
     VCol,
     VBtn,
-    VForm,
-    VTextField,
+    VSheet,
 } from 'vuetify/components';
 
+import IconBucket from '../icons/IconBucket.vue';
+
 import { useLoading } from '@/composables/useLoading';
 import { Bucket } from '@/types/buckets';
 import { useBucketsStore } from '@/store/modules/bucketsStore';
diff --git a/web/satellite/vuetify-poc/src/components/dialogs/ChangeNameDialog.vue b/web/satellite/vuetify-poc/src/components/dialogs/ChangeNameDialog.vue
index 00ba151ee756..a46b5f9bae87 100644
--- a/web/satellite/vuetify-poc/src/components/dialogs/ChangeNameDialog.vue
+++ b/web/satellite/vuetify-poc/src/components/dialogs/ChangeNameDialog.vue
@@ -14,7 +14,7 @@
                 <template #prepend>
                     <img class="d-block" src="@poc/assets/icon-change-name.svg" alt="Change name">
                 </template>
-                <v-card-title class="font-weight-bold">Edit Name</v-card-title>
+                <v-card-title class="font-weight-bold">Edit Account Name</v-card-title>
                 <template #append>
                     <v-btn
                         icon="$close"
@@ -35,6 +35,7 @@
                             variant="outlined"
                             :rules="rules"
                             label="Full name"
+                            placeholder="Enter your name"
                             :hide-details="false"
                             required
                             autofocus
diff --git a/web/satellite/vuetify-poc/src/components/dialogs/ChangePasswordDialog.vue b/web/satellite/vuetify-poc/src/components/dialogs/ChangePasswordDialog.vue
index 85145579bbae..29f8ce01a7f0 100644
--- a/web/satellite/vuetify-poc/src/components/dialogs/ChangePasswordDialog.vue
+++ b/web/satellite/vuetify-poc/src/components/dialogs/ChangePasswordDialog.vue
@@ -10,7 +10,7 @@
         transition="fade-transition"
     >
         <v-card rounded="xlg">
-            <v-card-item class="px-6 py-4">
+            <v-card-item class="pa-5 pl-7">
                 <template #prepend>
                     <img class="d-block" src="@poc/assets/icon-change-password.svg" alt="Change password">
                 </template>
diff --git a/web/satellite/vuetify-poc/src/components/dialogs/CreateAccessDialog.vue b/web/satellite/vuetify-poc/src/components/dialogs/CreateAccessDialog.vue
index 47a5d65a316b..655a0058d292 100644
--- a/web/satellite/vuetify-poc/src/components/dialogs/CreateAccessDialog.vue
+++ b/web/satellite/vuetify-poc/src/components/dialogs/CreateAccessDialog.vue
@@ -4,13 +4,14 @@
 <template>
     <v-dialog
         v-model="model"
-        width="400px"
+        min-width="320px"
+        max-width="420px"
         transition="fade-transition"
         scrollable
         :persistent="isCreating"
     >
         <v-card ref="innerContent" rounded="xlg">
-            <v-card-item class="pl-7 py-4 pos-relative">
+            <v-card-item class="pa-5 pl-7 pos-relative">
                 <template #prepend>
                     <img class="d-block" :src="STEP_ICON_AND_TITLE[step].icon">
                 </template>
diff --git a/web/satellite/vuetify-poc/src/components/dialogs/CreateBucketDialog.vue b/web/satellite/vuetify-poc/src/components/dialogs/CreateBucketDialog.vue
index b44ca470ca3c..03df901e57bf 100644
--- a/web/satellite/vuetify-poc/src/components/dialogs/CreateBucketDialog.vue
+++ b/web/satellite/vuetify-poc/src/components/dialogs/CreateBucketDialog.vue
@@ -11,7 +11,7 @@
     >
         <v-card ref="innerContent" rounded="xlg">
             <v-sheet>
-                <v-card-item class="pl-7 py-4">
+                <v-card-item class="pa-5 pl-7">
                     <template #prepend>
                         <v-card-title class="font-weight-bold">
                             <!-- <img src="../assets/icon-bucket-color.svg" alt="Bucket" width="40"> -->
@@ -33,21 +33,21 @@
 
             <v-divider />
 
-            <v-form v-model="formValid" class="pa-8 pb-3" @submit.prevent="onCreate">
-                <v-row class="ma-0">
-                    <p>Buckets are used to store and organize your files.</p>
-                    <v-col class="px-0 flex-1-1-100">
+            <v-form v-model="formValid" class="pa-7 pb-3" @submit.prevent="onCreate">
+                <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"
-                            placeholder="demo-bucket"
-                            hint="Lowercase letters, numbers, hyphens (-), and periods (.)"
+                            label="Bucket name"
+                            placeholder="my-bucket"
+                            hint="Allowed characters [a-z] [0-9] [-.]"
                             :hide-details="false"
                             required
                             autofocus
-                            class="mt-8 mb-3"
+                            class="mt-7 mb-3"
                             minlength="3"
                             maxlength="63"
                         />
diff --git a/web/satellite/vuetify-poc/src/components/dialogs/CreateProjectDialog.vue b/web/satellite/vuetify-poc/src/components/dialogs/CreateProjectDialog.vue
index e6dcb6f167f7..610733b6bea4 100644
--- a/web/satellite/vuetify-poc/src/components/dialogs/CreateProjectDialog.vue
+++ b/web/satellite/vuetify-poc/src/components/dialogs/CreateProjectDialog.vue
@@ -13,7 +13,7 @@
         @update:model-value="v => model = v"
     >
         <v-card ref="innerContent" rounded="xlg">
-            <v-card-item class="pl-7 py-4">
+            <v-card-item class="pa-5 pl-7">
                 <template #prepend>
                     <img v-if="isProjectLimitReached && usersStore.state.user.paidTier && showLimitIncreaseDialog" class="d-block" src="@/../static/images/modals/limit.svg" alt="Speedometer">
                     <img v-else class="d-block" src="@/../static/images/common/blueBox.svg" alt="Box">
diff --git a/web/satellite/vuetify-poc/src/components/dialogs/DeleteAccessDialog.vue b/web/satellite/vuetify-poc/src/components/dialogs/DeleteAccessDialog.vue
index 2248f45ab4d4..5f4c1f300bba 100644
--- a/web/satellite/vuetify-poc/src/components/dialogs/DeleteAccessDialog.vue
+++ b/web/satellite/vuetify-poc/src/components/dialogs/DeleteAccessDialog.vue
@@ -9,10 +9,10 @@
         :persistent="isLoading"
     >
         <v-card rounded="xlg">
-            <v-card-item class="pl-7 py-4">
+            <v-card-item class="pa-5 pl-7">
                 <template #prepend>
                     <v-sheet
-                        class="bg-on-surface-variant d-flex justify-center align-center"
+                        class="border-sm d-flex justify-center align-center"
                         width="40"
                         height="40"
                         rounded="lg"
diff --git a/web/satellite/vuetify-poc/src/components/dialogs/DeleteBucketDialog.vue b/web/satellite/vuetify-poc/src/components/dialogs/DeleteBucketDialog.vue
index d871f2a9253e..c6ca4b58385f 100644
--- a/web/satellite/vuetify-poc/src/components/dialogs/DeleteBucketDialog.vue
+++ b/web/satellite/vuetify-poc/src/components/dialogs/DeleteBucketDialog.vue
@@ -9,10 +9,10 @@
         :persistent="isLoading"
     >
         <v-card rounded="xlg">
-            <v-card-item class="pl-7 py-4">
+            <v-card-item class="pa-5 pl-7">
                 <template #prepend>
                     <v-sheet
-                        class="bg-on-surface-variant d-flex justify-center align-center"
+                        class="border-sm d-flex justify-center align-center"
                         width="40"
                         height="40"
                         rounded="lg"
diff --git a/web/satellite/vuetify-poc/src/components/dialogs/DeleteFileDialog.vue b/web/satellite/vuetify-poc/src/components/dialogs/DeleteFileDialog.vue
index 067d1ae42c3d..f24c9e1cfdb6 100644
--- a/web/satellite/vuetify-poc/src/components/dialogs/DeleteFileDialog.vue
+++ b/web/satellite/vuetify-poc/src/components/dialogs/DeleteFileDialog.vue
@@ -9,10 +9,10 @@
         :persistent="isLoading"
     >
         <v-card ref="innerContent" rounded="xlg">
-            <v-card-item class="pl-7 py-4">
+            <v-card-item class="pa-5 pl-7">
                 <template #prepend>
                     <v-sheet
-                        class="bg-on-surface-variant d-flex justify-center align-center"
+                        class="border-sm d-flex justify-center align-center"
                         width="40"
                         height="40"
                         rounded="lg"
diff --git a/web/satellite/vuetify-poc/src/components/dialogs/DisableMFADialog.vue b/web/satellite/vuetify-poc/src/components/dialogs/DisableMFADialog.vue
index d09fd60a7381..ec8102fbe39c 100644
--- a/web/satellite/vuetify-poc/src/components/dialogs/DisableMFADialog.vue
+++ b/web/satellite/vuetify-poc/src/components/dialogs/DisableMFADialog.vue
@@ -10,7 +10,7 @@
         transition="fade-transition"
     >
         <v-card ref="innerContent" rounded="xlg">
-            <v-card-item class="pl-7 py-4">
+            <v-card-item class="pa-5 pl-7">
                 <template #prepend>
                     <img class="d-block" src="@poc/assets/icon-mfa.svg" alt="MFA">
                 </template>
@@ -26,11 +26,11 @@
                     />
                 </template>
             </v-card-item>
-            <v-divider class="mx-8" />
+            <v-divider />
             <v-card-item class="px-8 py-4">
                 <p>Enter the authentication code generated in your two-factor application to disable 2FA.</p>
             </v-card-item>
-            <v-divider class="mx-8" />
+            <v-divider />
             <v-card-item class="px-8 pt-4 pb-0">
                 <v-form v-model="formValid" class="pt-2" @submit.prevent="disable">
                     <v-text-field
@@ -52,7 +52,7 @@
                     {{ useRecoveryCode ? "or use 2FA code" : "or use a recovery code" }}
                 </a>
             </v-card-item>
-            <v-divider class="mx-8 my-4" />
+            <v-divider class="my-4" />
             <v-card-actions dense class="px-7 pb-5 pt-0">
                 <v-col class="pl-0">
                     <v-btn
diff --git a/web/satellite/vuetify-poc/src/components/dialogs/EditProjectDetailsDialog.vue b/web/satellite/vuetify-poc/src/components/dialogs/EditProjectDetailsDialog.vue
index abaf74f8faba..b85f201359e8 100644
--- a/web/satellite/vuetify-poc/src/components/dialogs/EditProjectDetailsDialog.vue
+++ b/web/satellite/vuetify-poc/src/components/dialogs/EditProjectDetailsDialog.vue
@@ -9,7 +9,7 @@
         :persistent="isLoading"
     >
         <v-card rounded="xlg">
-            <v-card-item class="pl-7 py-4">
+            <v-card-item class="pa-5 pl-7">
                 <template #prepend>
                     <img class="d-block" src="@/../static/images/modals/boxesIcon.svg" alt="Boxes">
                 </template>
diff --git a/web/satellite/vuetify-poc/src/components/dialogs/EditProjectLimitDialog.vue b/web/satellite/vuetify-poc/src/components/dialogs/EditProjectLimitDialog.vue
index 06a0c727a99f..d340c7f2a0a6 100644
--- a/web/satellite/vuetify-poc/src/components/dialogs/EditProjectLimitDialog.vue
+++ b/web/satellite/vuetify-poc/src/components/dialogs/EditProjectLimitDialog.vue
@@ -9,7 +9,7 @@
         :persistent="isLoading"
     >
         <v-card rounded="xlg">
-            <v-card-item class="pl-7 py-4">
+            <v-card-item class="pa-5 pl-7">
                 <template #prepend>
                     <img class="d-block" src="@/../static/images/modals/limit.svg" alt="Speedometer">
                 </template>
diff --git a/web/satellite/vuetify-poc/src/components/dialogs/EnableMFADialog.vue b/web/satellite/vuetify-poc/src/components/dialogs/EnableMFADialog.vue
index b7d5d27e62f6..fbdf25589662 100644
--- a/web/satellite/vuetify-poc/src/components/dialogs/EnableMFADialog.vue
+++ b/web/satellite/vuetify-poc/src/components/dialogs/EnableMFADialog.vue
@@ -10,7 +10,7 @@
         transition="fade-transition"
     >
         <v-card ref="innerContent" rounded="xlg">
-            <v-card-item class="pl-7 py-4">
+            <v-card-item class="pa-5 pl-7">
                 <template #prepend>
                     <img class="d-block" src="@poc/assets/icon-mfa.svg" alt="MFA">
                 </template>
@@ -26,42 +26,37 @@
                     />
                 </template>
             </v-card-item>
-            <v-divider class="mx-8" />
+            <v-divider />
             <v-window v-model="step" :class="{ 'overflow-y-auto': step === 0 }">
                 <!-- QR code step -->
                 <v-window-item :value="0">
-                    <v-card-item class="px-8 py-4">
+                    <v-card-item class="pa-7">
                         <p>Scan this QR code in your two-factor application.</p>
                     </v-card-item>
-                    <v-card-item align="center" justify="center" class="rounded-lg border mx-8 py-4">
+                    <v-card-item align="center" justify="center" class="rounded-lg border mx-7">
                         <v-col cols="auto">
                             <canvas ref="canvas" />
                         </v-col>
                     </v-card-item>
-                    <v-divider class="mx-8 my-4" />
-                    <v-card-item class="px-8 py-4 pt-0">
+                    <v-card-item class="pa-7">
                         <p>Unable to scan? Enter the following code instead.</p>
                     </v-card-item>
-                    <v-card-item class="rounded-lg border mx-8 pa-0">
-                        <v-col class="py-2 px-3" cols="auto">
-                            <p class="font-weight-bold"> {{ userMFASecret }}</p>
+                    <v-card-item class="rounded-lg border mx-7 mb-7 py-2">
+                        <v-col>
+                            <p class="font-weight-medium text-body-2 text-center"> {{ userMFASecret }}</p>
                         </v-col>
                     </v-card-item>
                 </v-window-item>
 
                 <!-- Enter code step -->
                 <v-window-item :value="1">
-                    <v-card-item class="px-8 py-4">
+                    <v-card-item class="pa-7">
                         <p>Enter the authentication code generated in your two-factor application to confirm your setup.</p>
-                    </v-card-item>
-                    <v-divider class="mx-8" />
-                    <v-card-item class="px-8 pt-4 pb-0">
-                        <v-form v-model="formValid" class="pt-2" @submit.prevent>
+                        <v-form v-model="formValid" class="pt-7" @submit.prevent>
                             <v-text-field
                                 v-model="confirmPasscode"
                                 variant="outlined"
-                                density="compact"
-                                hint="e.g.: 000000"
+                                hint="Example: 123456"
                                 :rules="rules"
                                 :error-messages="isError ? 'Invalid code. Please re-enter.' : ''"
                                 label="2FA Code"
@@ -75,11 +70,11 @@
 
                 <!-- Save codes step -->
                 <v-window-item :value="2">
-                    <v-card-item class="px-8 py-4">
+                    <v-card-item class="px-7 py-4">
                         <p>Please save these codes somewhere to be able to recover access to your account.</p>
                     </v-card-item>
-                    <v-divider class="mx-8" />
-                    <v-card-item class="px-8 py-4">
+                    <v-divider />
+                    <v-card-item class="px-7 py-4">
                         <p
                             v-for="(code, index) in userMFARecoveryCodes"
                             :key="index"
@@ -89,53 +84,55 @@
                     </v-card-item>
                 </v-window-item>
             </v-window>
-            <v-divider class="mx-8 my-4" />
-            <v-card-actions dense class="px-7 pb-5 pt-0">
-                <v-col v-if="step !== 2" class="pl-0">
-                    <v-btn
-                        variant="outlined"
-                        color="default"
-                        block
-                        :disabled="isLoading"
-                        :loading="isLoading"
-                        @click="model = false"
-                    >
-                        Cancel
-                    </v-btn>
-                </v-col>
-                <v-col class="px-0">
-                    <v-btn
-                        v-if="step === 0"
-                        color="primary"
-                        variant="flat"
-                        block
-                        :loading="isLoading"
-                        @click="step++"
-                    >
-                        Continue
-                    </v-btn>
-                    <v-btn
-                        v-else-if="step === 1"
-                        color="primary"
-                        variant="flat"
-                        block
-                        :loading="isLoading"
-                        :disabled="!formValid"
-                        @click="enable"
-                    >
-                        Enable
-                    </v-btn>
+            <v-divider />
+            <v-card-actions class="pa-7">
+                <v-row>
+                    <v-col v-if="step !== 2">
+                        <v-btn
+                            variant="outlined"
+                            color="default"
+                            block
+                            :disabled="isLoading"
+                            :loading="isLoading"
+                            @click="model = false"
+                        >
+                            Cancel
+                        </v-btn>
+                    </v-col>
+                    <v-col>
+                        <v-btn
+                            v-if="step === 0"
+                            color="primary"
+                            variant="flat"
+                            block
+                            :loading="isLoading"
+                            @click="step++"
+                        >
+                            Continue
+                        </v-btn>
+                        <v-btn
+                            v-else-if="step === 1"
+                            color="primary"
+                            variant="flat"
+                            block
+                            :loading="isLoading"
+                            :disabled="!formValid"
+                            @click="enable"
+                        >
+                            Confirm
+                        </v-btn>
 
-                    <v-btn
-                        v-else
-                        color="primary"
-                        variant="flat"
-                        block
-                        @click="model = false"
-                    >
-                        Done
-                    </v-btn>
-                </v-col>
+                        <v-btn
+                            v-else
+                            color="primary"
+                            variant="flat"
+                            block
+                            @click="model = false"
+                        >
+                            Done
+                        </v-btn>
+                    </v-col>
+                </v-row>
             </v-card-actions>
         </v-card>
     </v-dialog>
@@ -153,6 +150,7 @@ import {
     VDialog,
     VDivider,
     VForm,
+    VRow,
     VTextField,
     VWindow,
     VWindowItem,
diff --git a/web/satellite/vuetify-poc/src/components/dialogs/EnterBucketPassphraseDialog.vue b/web/satellite/vuetify-poc/src/components/dialogs/EnterBucketPassphraseDialog.vue
index aa31ac52260e..a80d9cad2145 100644
--- a/web/satellite/vuetify-poc/src/components/dialogs/EnterBucketPassphraseDialog.vue
+++ b/web/satellite/vuetify-poc/src/components/dialogs/EnterBucketPassphraseDialog.vue
@@ -8,7 +8,7 @@
         transition="fade-transition"
     >
         <v-card ref="innerContent" rounded="xlg">
-            <v-card-item class="py-4 pl-7">
+            <v-card-item class="pa-5 pl-7">
                 <template #prepend>
                     <img class="d-block" src="@/../static/images/accessGrants/newCreateFlow/accessEncryption.svg">
                 </template>
@@ -31,13 +31,12 @@
 
             <v-divider />
 
-            <v-card-item class="py-4">
-                <v-form v-model="formValid">
+            <v-card-item class="pa-7 pb-3">
+                <v-form v-model="formValid" @submit.prevent="onContinue">
                     <v-row>
                         <v-col cols="12">
                             <p>
-                                Enter your encryption passphrase to view and manage your data in the browser.
-                                This passphrase will be used to unlock all buckets in this project.
+                                Enter your encryption passphrase to view and manage the data in this project.
                             </p>
                         </v-col>
 
@@ -46,11 +45,12 @@
                                 v-model="passphrase"
                                 :base-color="isWarningState ? 'warning' : ''"
                                 label="Encryption Passphrase"
-                                :append-inner-icon="isPassphraseVisible ? 'mdi-eye-off' : 'mdi-eye'"
+                                :append-inner-icon="isPassphraseVisible ? 'mdi-eye-outline' : 'mdi-eye-off-outline'"
                                 :type="isPassphraseVisible ? 'text' : 'password'"
                                 variant="outlined"
                                 :hide-details="false"
                                 :rules="[ RequiredRule ]"
+                                autofocus
                                 @click:append-inner="isPassphraseVisible = !isPassphraseVisible"
                             />
                         </v-col>
@@ -68,7 +68,7 @@
 
             <v-divider />
 
-            <v-card-actions>
+            <v-card-actions class="pa-4">
                 <v-col>
                     <v-btn
                         variant="outlined"
diff --git a/web/satellite/vuetify-poc/src/components/dialogs/GeographicDistributionDialog.vue b/web/satellite/vuetify-poc/src/components/dialogs/GeographicDistributionDialog.vue
index d45c91b09a17..4532ab78851f 100644
--- a/web/satellite/vuetify-poc/src/components/dialogs/GeographicDistributionDialog.vue
+++ b/web/satellite/vuetify-poc/src/components/dialogs/GeographicDistributionDialog.vue
@@ -8,10 +8,11 @@
         transition="fade-transition"
     >
         <v-card rounded="xlg">
-            <v-card-item class="pl-7 py-4">
+            <v-card-item class="pa-5 pl-7">
                 <template #prepend>
                     <v-sheet
-                        class="bg-on-surface-variant d-flex justify-center align-center"
+                        class="border-sm d-flex justify-center align-center"
+                        variant="tonal"
                         width="40"
                         height="40"
                         rounded="lg"
@@ -51,6 +52,16 @@
 
             <v-card-actions class="pa-7">
                 <v-row>
+                    <v-col>
+                        <v-btn
+                            variant="outlined"
+                            color="default"
+                            block
+                            @click="model = false"
+                        >
+                            Close
+                        </v-btn>
+                    </v-col>
                     <v-col>
                         <v-btn
                             variant="outlined"
@@ -60,15 +71,11 @@
                             href="https://docs.storj.io/learn#what-happens-when-you-upload"
                             target="_blank"
                             rel="noopener noreferrer"
+                            append-icon="mdi-open-in-new"
                         >
                             Learn more
                         </v-btn>
                     </v-col>
-                    <v-col>
-                        <v-btn variant="flat" block @click="model = false">
-                            Close
-                        </v-btn>
-                    </v-col>
                 </v-row>
             </v-card-actions>
         </v-card>
diff --git a/web/satellite/vuetify-poc/src/components/dialogs/InactivityDialog.vue b/web/satellite/vuetify-poc/src/components/dialogs/InactivityDialog.vue
index 6901a0818001..bf4ff7c6d364 100644
--- a/web/satellite/vuetify-poc/src/components/dialogs/InactivityDialog.vue
+++ b/web/satellite/vuetify-poc/src/components/dialogs/InactivityDialog.vue
@@ -8,7 +8,7 @@
         transition="fade-transition"
     >
         <v-card rounded="xlg">
-            <v-card-item class="pl-7 py-4">
+            <v-card-item class="pa-5 pl-7">
                 <template #prepend>
                     <img class="d-block" src="@poc/assets/icon-session-timeout.svg" alt="Session expiring">
                 </template>
diff --git a/web/satellite/vuetify-poc/src/components/dialogs/JoinProjectDialog.vue b/web/satellite/vuetify-poc/src/components/dialogs/JoinProjectDialog.vue
index c21fcea369b8..1290a754f432 100644
--- a/web/satellite/vuetify-poc/src/components/dialogs/JoinProjectDialog.vue
+++ b/web/satellite/vuetify-poc/src/components/dialogs/JoinProjectDialog.vue
@@ -9,7 +9,7 @@
         transition="fade-transition"
     >
         <v-card rounded="xlg">
-            <v-card-item class="pl-7 pa-4">
+            <v-card-item class="pa-5 pl-7">
                 <template #prepend>
                     <v-card-title class="font-weight-bold">Join Project</v-card-title>
                 </template>
diff --git a/web/satellite/vuetify-poc/src/components/dialogs/MFACodesDialog.vue b/web/satellite/vuetify-poc/src/components/dialogs/MFACodesDialog.vue
index c7f7d13b9fbd..6b493dfe7a14 100644
--- a/web/satellite/vuetify-poc/src/components/dialogs/MFACodesDialog.vue
+++ b/web/satellite/vuetify-poc/src/components/dialogs/MFACodesDialog.vue
@@ -10,7 +10,7 @@
         transition="fade-transition"
     >
         <v-card rounded="xlg">
-            <v-card-item class="pl-7 py-4">
+            <v-card-item class="pa-5 pl-7">
                 <template #prepend>
                     <img class="d-block" src="@poc/assets/icon-mfa.svg" alt="MFA">
                 </template>
@@ -25,13 +25,13 @@
                     />
                 </template>
             </v-card-item>
-            <v-divider class="mx-8" />
+            <v-divider />
 
             <template v-if="isConfirmCode">
                 <v-card-item class="px-8 py-4">
                     <p>Enter the authentication code generated in your two-factor application to regenerate recovery codes.</p>
                 </v-card-item>
-                <v-divider class="mx-8" />
+                <v-divider />
                 <v-card-item class="px-8 pt-4 pb-0">
                     <v-form v-model="formValid" class="pt-2" @submit.prevent="regenerate">
                         <v-text-field
@@ -54,13 +54,13 @@
                     </a>
                 </v-card-item>
 
-                <v-divider class="mx-8 my-4" />
+                <v-divider class="my-4" />
             </template>
             <template v-else>
                 <v-card-item class="px-8 py-4">
                     <p>Please save these codes somewhere to be able to recover access to your account.</p>
                 </v-card-item>
-                <v-divider class="mx-8" />
+                <v-divider />
                 <v-card-item class="px-8 py-4">
                     <p
                         v-for="(code, index) in userMFARecoveryCodes"
@@ -69,7 +69,7 @@
                         {{ code }}
                     </p>
                 </v-card-item>
-                <v-divider class="mx-8 mb-4" />
+                <v-divider class="mb-4" />
             </template>
 
             <v-card-actions dense class="px-7 pb-5 pt-0">
diff --git a/web/satellite/vuetify-poc/src/components/dialogs/ManagePassphraseDialog.vue b/web/satellite/vuetify-poc/src/components/dialogs/ManagePassphraseDialog.vue
index c3e5938d2b44..fc1fc11f0396 100644
--- a/web/satellite/vuetify-poc/src/components/dialogs/ManagePassphraseDialog.vue
+++ b/web/satellite/vuetify-poc/src/components/dialogs/ManagePassphraseDialog.vue
@@ -4,7 +4,7 @@
 <template>
     <v-dialog v-model="model" max-width="420" transition="fade-transition">
         <v-card ref="innerContent" rounded="xlg">
-            <v-card-item class="pl-7 py-4">
+            <v-card-item class="pa-5 pl-7">
                 <template #prepend>
                     <img class="d-block" :src="stepInfo[step].ref.value?.iconSrc || LockIcon">
                 </template>
diff --git a/web/satellite/vuetify-poc/src/components/dialogs/RemoveProjectMemberDialog.vue b/web/satellite/vuetify-poc/src/components/dialogs/RemoveProjectMemberDialog.vue
index 7d63c181d630..95b211ca9c4f 100644
--- a/web/satellite/vuetify-poc/src/components/dialogs/RemoveProjectMemberDialog.vue
+++ b/web/satellite/vuetify-poc/src/components/dialogs/RemoveProjectMemberDialog.vue
@@ -9,10 +9,10 @@
         :persistent="isLoading"
     >
         <v-card rounded="xlg">
-            <v-card-item class="pl-7 py-4">
+            <v-card-item class="pa-5 pl-7">
                 <template #prepend>
                     <v-sheet
-                        class="bg-on-surface-variant d-flex justify-center align-center"
+                        class="border-sm d-flex justify-center align-center"
                         width="40"
                         height="40"
                         rounded="lg"
diff --git a/web/satellite/vuetify-poc/src/components/dialogs/SessionExpiredDialog.vue b/web/satellite/vuetify-poc/src/components/dialogs/SessionExpiredDialog.vue
index e8bc2c2c34ff..1bb16f964085 100644
--- a/web/satellite/vuetify-poc/src/components/dialogs/SessionExpiredDialog.vue
+++ b/web/satellite/vuetify-poc/src/components/dialogs/SessionExpiredDialog.vue
@@ -9,7 +9,7 @@
         persistent
     >
         <v-card rounded="xlg">
-            <v-card-item class="pl-7 py-4">
+            <v-card-item class="pa-5 pl-7">
                 <template #prepend>
                     <img class="d-block" src="@poc/assets/icon-session-timeout.svg" alt="Session expired">
                 </template>
diff --git a/web/satellite/vuetify-poc/src/components/dialogs/SetSessionTimeoutDialog.vue b/web/satellite/vuetify-poc/src/components/dialogs/SetSessionTimeoutDialog.vue
index 3af73cc87db3..c101023192da 100644
--- a/web/satellite/vuetify-poc/src/components/dialogs/SetSessionTimeoutDialog.vue
+++ b/web/satellite/vuetify-poc/src/components/dialogs/SetSessionTimeoutDialog.vue
@@ -28,7 +28,7 @@
             </v-card-item>
             <v-divider />
             <v-card-item class="px-6 pt-6 pb-3">
-                <p>Select your session timeout duration.</p>
+                <p>Select your account session timeout duration.</p>
             </v-card-item>
             <v-card-item class="px-6 pb-7">
                 <v-select
diff --git a/web/satellite/vuetify-poc/src/components/dialogs/ShareDialog.vue b/web/satellite/vuetify-poc/src/components/dialogs/ShareDialog.vue
index a910aab212a2..81c12b98e346 100644
--- a/web/satellite/vuetify-poc/src/components/dialogs/ShareDialog.vue
+++ b/web/satellite/vuetify-poc/src/components/dialogs/ShareDialog.vue
@@ -9,10 +9,10 @@
         :persistent="isLoading"
     >
         <v-card ref="innerContent" rounded="xlg">
-            <v-card-item class="pl-7 py-4">
+            <v-card-item class="pa-5 pl-7">
                 <template #prepend>
                     <v-sheet
-                        class="bg-on-surface-variant d-flex justify-center align-center"
+                        class="border-sm d-flex justify-center align-center"
                         width="40"
                         height="40"
                         rounded="lg"
@@ -40,37 +40,35 @@
             <div class="pa-7 share-dialog__content" :class="{ 'share-dialog__content--loading': isLoading }">
                 <v-row>
                     <v-col cols="12">
-                        <v-alert class="mt-3" density="compact" type="warning">
+                        <v-alert type="info">
                             Sharing a {{ shareText.toLowerCase() }} will create a publicly shareable URL.
                             Anyone with this link will be able to access your shared {{ shareText.toLowerCase() }}.
                         </v-alert>
                     </v-col>
                     <v-col cols="12">
                         <p class="text-subtitle-2 font-weight-bold mb-4">Share via</p>
-                        <div class="ma-n2">
+                        <v-chip-group class="ma-n2">
                             <v-chip
                                 v-for="opt in ShareOptions"
                                 :key="opt"
                                 :color="SHARE_BUTTON_CONFIGS[opt].color"
                                 :href="SHARE_BUTTON_CONFIGS[opt].getLink(link)"
                                 link
-                                class="ma-2"
+                                class="ma-2 font-weight-medium"
                             >
                                 <component
                                     :is="SHARE_BUTTON_CONFIGS[opt].icon"
                                     class="share-dialog__content__icon"
-                                    size="21"
+                                    size="16"
                                 />
                                 {{ opt }}
                             </v-chip>
-                        </div>
+                        </v-chip-group>
                     </v-col>
 
-                    <v-divider class="my-2" />
-
                     <v-col cols="12">
                         <p class="text-subtitle-2 font-weight-bold mb-2">Copy link</p>
-                        <v-textarea :model-value="link" variant="solo-filled" rows="1" auto-grow no-resize flat readonly>
+                        <v-textarea :model-value="link" variant="solo-filled" rounded="lg" hide-details="auto" rows="1" auto-grow no-resize flat readonly class="text-body-2">
                             <template #append-inner>
                                 <input-copy-button :value="link" />
                             </template>
@@ -122,6 +120,7 @@ import {
     VChip,
     VTextarea,
     VAlert,
+    VChipGroup,
 } from 'vuetify/components';
 
 import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
diff --git a/web/satellite/vuetify-poc/src/components/dialogs/commonPassphraseSteps/EnterPassphraseStep.vue b/web/satellite/vuetify-poc/src/components/dialogs/commonPassphraseSteps/EnterPassphraseStep.vue
index 6ecac50a7c16..d8ef383150fc 100644
--- a/web/satellite/vuetify-poc/src/components/dialogs/commonPassphraseSteps/EnterPassphraseStep.vue
+++ b/web/satellite/vuetify-poc/src/components/dialogs/commonPassphraseSteps/EnterPassphraseStep.vue
@@ -12,22 +12,23 @@
                 <v-text-field
                     v-model="passphrase"
                     label="Encryption Passphrase"
-                    :append-inner-icon="isPassphraseVisible ? 'mdi-eye-off' : 'mdi-eye'"
+                    :append-inner-icon="isPassphraseVisible ? 'mdi-eye-outline' : 'mdi-eye-off-outline'"
                     :type="isPassphraseVisible ? 'text' : 'password'"
                     variant="outlined"
                     :hide-details="false"
                     :rules="[ RequiredRule ]"
+                    autofocus
+                    class="mt-2 mb-n4"
                     @click:append-inner="isPassphraseVisible = !isPassphraseVisible"
                 />
-            </v-col>
-
-            <v-col v-if="ackRequired" cols="12">
                 <v-checkbox
+                    v-if="ackRequired"
                     density="compact"
                     color="primary"
-                    label="Yes, I saved my encryption passphrase."
+                    label="I saved my encryption passphrase."
                     :hide-details="false"
                     :rules="[ RequiredRule ]"
+                    class="mt-4 mb-n7"
                 />
             </v-col>
         </v-row>
diff --git a/web/satellite/vuetify-poc/src/components/dialogs/commonPassphraseSteps/PassphraseGeneratedStep.vue b/web/satellite/vuetify-poc/src/components/dialogs/commonPassphraseSteps/PassphraseGeneratedStep.vue
index e8111edc0866..a1e6bf9797ed 100644
--- a/web/satellite/vuetify-poc/src/components/dialogs/commonPassphraseSteps/PassphraseGeneratedStep.vue
+++ b/web/satellite/vuetify-poc/src/components/dialogs/commonPassphraseSteps/PassphraseGeneratedStep.vue
@@ -2,30 +2,26 @@
 // See LICENSE for copying information.
 
 <template>
-    <v-form ref="form" class="pa-8">
+    <v-form ref="form" class="pa-7">
         <v-row>
             <v-col v-if="$slots.default" cols="12">
                 <slot />
             </v-col>
             <save-buttons :name="name" :items="[ passphrase ]" type="passphrase" />
-            <v-divider class="my-3" />
-
             <v-col cols="12">
                 <text-output-area
                     label="Encryption Passphrase"
                     :value="passphrase"
-                    center-text
                     :tooltip-disabled="isTooltipDisabled"
                     show-copy
                 />
-            </v-col>
-            <v-col cols="12">
                 <v-checkbox
                     density="compact"
                     color="primary"
-                    label="Yes, I saved my encryption passphrase."
+                    label="I saved my encryption passphrase."
                     :hide-details="false"
                     :rules="[ RequiredRule ]"
+                    class="mt-4 mb-n7"
                 />
             </v-col>
         </v-row>
diff --git a/web/satellite/vuetify-poc/src/components/dialogs/commonPassphraseSteps/SaveButtons.vue b/web/satellite/vuetify-poc/src/components/dialogs/commonPassphraseSteps/SaveButtons.vue
index 7daa695c5f16..855c111374aa 100644
--- a/web/satellite/vuetify-poc/src/components/dialogs/commonPassphraseSteps/SaveButtons.vue
+++ b/web/satellite/vuetify-poc/src/components/dialogs/commonPassphraseSteps/SaveButtons.vue
@@ -5,7 +5,6 @@
     <v-col cols="6">
         <v-btn
             variant="outlined"
-            size="small"
             block
             :color="justCopied ? 'success' : 'default'"
             :prepend-icon="justCopied ? 'mdi-check' : 'mdi-content-copy'"
@@ -17,7 +16,6 @@
     <v-col cols="6">
         <v-btn
             variant="outlined"
-            size="small"
             block
             :color="justDownloaded ? 'success' : 'default'"
             :prepend-icon="justDownloaded ? 'mdi-check' : 'mdi-tray-arrow-down'"
diff --git a/web/satellite/vuetify-poc/src/components/dialogs/createAccessSteps/AccessCreatedStep.vue b/web/satellite/vuetify-poc/src/components/dialogs/createAccessSteps/AccessCreatedStep.vue
index 2ffb5e51bd25..923b9af53129 100644
--- a/web/satellite/vuetify-poc/src/components/dialogs/createAccessSteps/AccessCreatedStep.vue
+++ b/web/satellite/vuetify-poc/src/components/dialogs/createAccessSteps/AccessCreatedStep.vue
@@ -2,7 +2,7 @@
 // See LICENSE for copying information.
 
 <template>
-    <div class="pa-8">
+    <div class="pa-7">
         <v-row>
             <v-col cols="12">
                 Copy or save the Access Grant as it will only appear once.
diff --git a/web/satellite/vuetify-poc/src/components/dialogs/createAccessSteps/AccessEncryptionStep.vue b/web/satellite/vuetify-poc/src/components/dialogs/createAccessSteps/AccessEncryptionStep.vue
index ac0fbfba1b2c..6742694ab038 100644
--- a/web/satellite/vuetify-poc/src/components/dialogs/createAccessSteps/AccessEncryptionStep.vue
+++ b/web/satellite/vuetify-poc/src/components/dialogs/createAccessSteps/AccessEncryptionStep.vue
@@ -2,36 +2,36 @@
 // See LICENSE for copying information.
 
 <template>
-    <v-form ref="form" class="pa-8 pb-4">
+    <v-form ref="form" class="pa-7 pb-4">
         <v-row>
             <v-col cols="12">
-                <p class="text-subtitle-2 font-weight-bold mb-2">Encryption Passphrase</p>
+                <!-- <p class="text-subtitle-2 font-weight-bold mb-2">Encryption Passphrase</p> -->
                 <v-radio-group v-model="passphraseOption" hide-details="auto">
                     <template v-if="isPromptForPassphrase">
-                        <v-radio v-if="isPromptForPassphrase" label="Enter your project passphrase" :value="PassphraseOption.SetMyProjectPassphrase">
+                        <v-radio v-if="isPromptForPassphrase" label="Enter your project passphrase" :value="PassphraseOption.SetMyProjectPassphrase" density="compact">
                             <template #label>
                                 Enter my project passphrase
                                 <info-tooltip>
-                                    You will enter your encryption passphrase on the next step.
-                                    Make sure it's the same one you use for this project.
-                                    This will allow you to manage existing data you have uploaded with the same passphrase.
+                                    Make sure it's the same passphrase you use for this project.
+                                    This will allow you to manage existing data you have uploaded.
                                 </info-tooltip>
                             </template>
                         </v-radio>
                         <v-text-field
                             v-model="passphrase"
-                            class="mt-3"
+                            class="mt-6"
                             variant="outlined"
-                            label="Enter Encryption Passphrase"
-                            :append-inner-icon="isPassphraseVisible ? 'mdi-eye-off' : 'mdi-eye'"
+                            label="Encryption Passphrase"
+                            :append-inner-icon="isPassphraseVisible ? 'mdi-eye-outline' : 'mdi-eye-off-outline'"
                             :type="isPassphraseVisible ? 'text' : 'password'"
                             :rules="passphraseRules"
                             :hide-details="false"
+                            autofocus
                             @click:append-inner="isPassphraseVisible = !isPassphraseVisible"
                         />
-                        <v-divider class="my-4" />
+                        <!-- <v-divider class="my-4" /> -->
                     </template>
-                    <v-radio v-else :value="PassphraseOption.UseExistingPassphrase">
+                    <v-radio v-else :value="PassphraseOption.UseExistingPassphrase" density="compact" class="pb-4">
                         <template #label>
                             Use the current passphrase
                             <info-tooltip>
@@ -41,14 +41,14 @@
                         </template>
                     </v-radio>
                     <v-btn
-                        class="align-self-start"
-                        variant="text"
+                        class="align-self-start mt-2 mb-4"
+                        variant="outlined"
                         color="default"
                         :append-icon="areAdvancedOptionsShown ? '$collapse' : '$expand'"
                         :disabled="isAdvancedOptionSelected"
                         @click="areAdvancedOptionsShown = !areAdvancedOptionsShown"
                     >
-                        Advanced
+                        Advanced Options
                     </v-btn>
                     <v-expand-transition>
                         <div v-show="areAdvancedOptionsShown">
@@ -76,7 +76,7 @@
             </v-col>
             <v-expand-transition>
                 <v-col v-show="areAdvancedOptionsShown" cols="12">
-                    <v-alert class="mb-4" type="warning" variant="tonal" rounded="xlg">
+                    <v-alert class="mb-4" type="info" variant="tonal" rounded="xlg">
                         Creating a new passphrase for this access will prevent it from accessing any data
                         that has been uploaded with the current passphrase.
                     </v-alert>
diff --git a/web/satellite/vuetify-poc/src/components/dialogs/createAccessSteps/CLIAccessCreatedStep.vue b/web/satellite/vuetify-poc/src/components/dialogs/createAccessSteps/CLIAccessCreatedStep.vue
index 9875c5bba76e..af1e5878bf8a 100644
--- a/web/satellite/vuetify-poc/src/components/dialogs/createAccessSteps/CLIAccessCreatedStep.vue
+++ b/web/satellite/vuetify-poc/src/components/dialogs/createAccessSteps/CLIAccessCreatedStep.vue
@@ -2,7 +2,7 @@
 // See LICENSE for copying information.
 
 <template>
-    <div class="pa-8">
+    <div class="pa-7">
         <v-row>
             <v-col cols="12">
                 Copy or save the satellite address and API key as they will only appear once.
diff --git a/web/satellite/vuetify-poc/src/components/dialogs/createAccessSteps/ChoosePermissionsStep.vue b/web/satellite/vuetify-poc/src/components/dialogs/createAccessSteps/ChoosePermissionsStep.vue
index fd3140a874d3..e2c25e248df8 100644
--- a/web/satellite/vuetify-poc/src/components/dialogs/createAccessSteps/ChoosePermissionsStep.vue
+++ b/web/satellite/vuetify-poc/src/components/dialogs/createAccessSteps/ChoosePermissionsStep.vue
@@ -2,13 +2,15 @@
 // See LICENSE for copying information.
 
 <template>
-    <v-form ref="form" class="pa-8">
+    <v-form ref="form" class="pa-7">
         <v-row>
             <v-col cols="12">
+                <p class="text-subtitle-2 font-weight-bold mb-5">Select the permissions for this access</p>
+
                 <v-select
                     v-model="permissions"
                     :items="allPermissions"
-                    label="Permissions"
+                    label="Access Permissions"
                     variant="outlined"
                     color="default"
                     multiple
@@ -20,15 +22,14 @@
                     <template #prepend-item>
                         <v-list-item
                             title="All permissions"
-                            color="primary"
                             :active="areAllPermsSelected"
+                            density="compact"
                             @click="toggleSelectedPerms"
                         >
                             <template #prepend>
                                 <v-checkbox-btn
                                     v-model="areAllPermsSelected"
                                     :indeterminate="permissions.length != 0 && !areAllPermsSelected"
-                                    color="primary"
                                 />
                             </template>
                         </v-list-item>
@@ -36,22 +37,52 @@
                     </template>
 
                     <template #item="{ props: slotProps }">
-                        <v-list-item v-bind="slotProps" color="primary">
+                        <v-list-item v-bind="slotProps" density="compact">
                             <template #prepend="{ isSelected }">
-                                <v-checkbox-btn :model-value="isSelected" color="primary" />
+                                <v-checkbox-btn :model-value="isSelected" />
                             </template>
                         </v-list-item>
                     </template>
                 </v-select>
+
+                <!-- <v-chip-group
+                    v-model="permissions"
+                    column
+                    multiple
+                    class="mb-3"
+                >
+                    <v-chip
+                        rounded="xl"
+                        class="text-body-2"
+                        filter
+                        variant="outlined"
+                        value="All"
+                    >
+                        All
+                    </v-chip>
+                    <v-chip
+                        v-for="perm in allPermissions"
+                        :key="perm"
+                        :value="perm"
+                        rounded="xl"
+                        class="text-body-2"
+                        filter
+                        variant="outlined"
+                    >
+                        {{ perm }}
+                    </v-chip>
+                </v-chip-group> -->
             </v-col>
 
             <v-col cols="12">
+                <p class="text-subtitle-2 font-weight-bold mb-5">Choose buckets to give access to</p>
+
                 <v-autocomplete
                     v-model="buckets"
                     v-model:search="bucketSearch"
                     class="choose-permissions-step__buckets-field"
                     :items="allBucketNames"
-                    label="Buckets"
+                    label="Access Buckets"
                     variant="outlined"
                     color="default"
                     no-data-text="No buckets found."
@@ -67,34 +98,53 @@
                     <template #prepend-item>
                         <v-list-item
                             title="All buckets"
-                            color="primary"
                             :active="isAllBucketsSelected"
+                            density="compact"
                             @click="isAllBucketsSelected = !isAllBucketsSelected"
                         >
                             <template #prepend>
-                                <v-checkbox-btn v-model="isAllBucketsSelected" color="primary" />
+                                <v-checkbox-btn v-model="isAllBucketsSelected" />
                             </template>
                         </v-list-item>
                         <v-divider />
                     </template>
 
                     <template #item="{ props: slotProps }">
-                        <v-list-item v-bind="slotProps" color="primary">
+                        <v-list-item v-bind="slotProps" density="compact">
                             <template #prepend="{ isSelected }">
-                                <v-checkbox-btn :model-value="isSelected" color="primary" />
+                                <v-checkbox-btn :model-value="isSelected" />
                             </template>
                         </v-list-item>
                     </template>
                 </v-autocomplete>
+
+                <!-- <v-chip-group
+                    v-model="buckets"
+                    column
+                    multiple
+                    class="mb-3"
+                >
+                    <v-chip
+                        class="text-body-2"
+                        rounded="xl"
+                        filter
+                        variant="outlined"
+                        value="All Buckets"
+                    >
+                        All Buckets
+                    </v-chip>
+                </v-chip-group> -->
             </v-col>
 
             <v-col cols="12">
+                <p class="text-subtitle-2 font-weight-bold mb-5">Choose when your access will expire</p>
+
                 <v-select
                     ref="endDateSelector"
                     v-model="endDate"
                     variant="outlined"
                     color="default"
-                    label="End date"
+                    label="Access Expiration Date"
                     return-object
                     :hide-details="false"
                     :items="endDateItems"
@@ -112,9 +162,24 @@
 
                     <template #item="{ item, props: itemProps }">
                         <v-divider v-if="(item.raw as AccessGrantEndDate).date === null" />
-                        <v-list-item v-bind="itemProps" />
+                        <v-list-item v-bind="itemProps" density="compact" />
                     </template>
                 </v-select>
+
+                <!-- <v-chip-group
+                    v-model="endDate"
+                    column
+                >
+                    <v-chip
+                        class="text-body-2"
+                        rounded="xl"
+                        filter
+                        variant="outlined"
+                        value="No end date"
+                    >
+                        No expiration
+                    </v-chip>
+                </v-chip-group> -->
             </v-col>
         </v-row>
 
@@ -167,7 +232,7 @@ const endDateItems: EndDateListItem[] = [
     { title: '1 month', date: getNowOffset(0, 1) },
     { title: '6 months', date: getNowOffset(0, 6) },
     { title: '1 year', date: getNowOffset(0, 0, 1) },
-    { title: 'No end date', date: null },
+    { title: 'No expiration', date: null },
 ];
 
 const emit = defineEmits<{
diff --git a/web/satellite/vuetify-poc/src/components/dialogs/createAccessSteps/ConfirmDetailsStep.vue b/web/satellite/vuetify-poc/src/components/dialogs/createAccessSteps/ConfirmDetailsStep.vue
index 43ad906b0239..95f31aacbfed 100644
--- a/web/satellite/vuetify-poc/src/components/dialogs/createAccessSteps/ConfirmDetailsStep.vue
+++ b/web/satellite/vuetify-poc/src/components/dialogs/createAccessSteps/ConfirmDetailsStep.vue
@@ -2,21 +2,19 @@
 // See LICENSE for copying information.
 
 <template>
-    <div class="pa-8">
+    <div class="pa-7">
         <v-row>
             <v-col cols="12">
-                Confirm that the access details are correct before creating.
-            </v-col>
-            <v-divider class="my-1" />
-            <v-col class="pa-1" cols="12">
-                <div
-                    v-for="item in items"
-                    :key="item.title"
-                    class="d-flex justify-space-between ma-2"
-                >
-                    <p class="flex-shrink-0 mr-4">{{ item.title }}</p>
-                    <p class="text-body-2 text-medium-emphasis text-right">{{ item.value }}</p>
-                </div>
+                <p>Confirm that the access details are correct before creating.</p>
+                <v-list lines="one">
+                    <v-list-item
+                        v-for="item in items"
+                        :key="item.title"
+                        :title="item.title"
+                        :subtitle="item.value"
+                        class="pl-0"
+                    />
+                </v-list>
             </v-col>
         </v-row>
     </div>
@@ -24,7 +22,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue';
-import { VRow, VCol, VDivider } from 'vuetify/components';
+import { VRow, VCol, VList, VListItem } from 'vuetify/components';
 
 import { Permission, AccessType } from '@/types/createAccessGrant';
 import { AccessGrantEndDate } from '@poc/types/createAccessGrant';
diff --git a/web/satellite/vuetify-poc/src/components/dialogs/createAccessSteps/CreateNewAccessStep.vue b/web/satellite/vuetify-poc/src/components/dialogs/createAccessSteps/CreateNewAccessStep.vue
index 730d51c37172..f300faf6e927 100644
--- a/web/satellite/vuetify-poc/src/components/dialogs/createAccessSteps/CreateNewAccessStep.vue
+++ b/web/satellite/vuetify-poc/src/components/dialogs/createAccessSteps/CreateNewAccessStep.vue
@@ -2,38 +2,36 @@
 // See LICENSE for copying information.
 
 <template>
-    <v-form ref="form" class="pa-8" @submit.prevent>
+    <v-form ref="form" class="pa-7 pb-4" @submit.prevent>
         <v-row>
             <v-col cols="12">
+                <p class="text-subtitle-2 font-weight-bold mb-5">Enter Access Name</p>
                 <v-text-field
                     v-model="name"
                     label="Access Name"
-                    placeholder="Enter name for this access"
                     variant="outlined"
-                    color="default"
                     autofocus
                     :hide-details="false"
                     :rules="nameRules"
+                    class="mb-n2"
                 />
             </v-col>
-
             <v-col cols="12">
-                <h4 class="mb-2">Type</h4>
-                <v-input v-model="types" :rules="[ RequiredRule ]" :hide-details="false">
+                <p class="text-subtitle-2 font-weight-bold mb-2">Select Access Type</p>
+                <v-input v-model="types" :rules="[ RequiredRule ]" :hide-details="false" class="mb-n2">
                     <div>
                         <v-checkbox
                             v-for="accessType in typeOrder"
                             :key="accessType"
                             v-model="typeInfos[accessType].model.value"
-                            color="primary"
                             density="compact"
                             :hide-details="true"
                         >
                             <template #label>
-                                <span class="ml-2">{{ typeInfos[accessType].name }}</span>
+                                <span>{{ typeInfos[accessType].name }}</span>
                                 <info-tooltip>
                                     {{ typeInfos[accessType].description }}
-                                    <a class="text-surface" :href="ACCESS_TYPE_LINKS[accessType]" target="_blank">
+                                    <a class="link" :href="ACCESS_TYPE_LINKS[accessType]" target="_blank">
                                         Learn more
                                     </a>
                                 </info-tooltip>
diff --git a/web/satellite/vuetify-poc/src/components/dialogs/createAccessSteps/EncryptionInfoStep.vue b/web/satellite/vuetify-poc/src/components/dialogs/createAccessSteps/EncryptionInfoStep.vue
index 2fec81076bf8..9ff1deb71d1c 100644
--- a/web/satellite/vuetify-poc/src/components/dialogs/createAccessSteps/EncryptionInfoStep.vue
+++ b/web/satellite/vuetify-poc/src/components/dialogs/createAccessSteps/EncryptionInfoStep.vue
@@ -13,7 +13,9 @@
             <v-checkbox
                 density="compact"
                 label="I understand, don't show this again."
-                hide-details
+                color="default"
+                :hide-details="false"
+                :rules="[ RequiredRule ]"
                 @update:model-value="value => LocalData.setServerSideEncryptionModalHidden(value)"
             />
         </v-col>
diff --git a/web/satellite/vuetify-poc/src/components/dialogs/createAccessSteps/S3CredentialsCreatedStep.vue b/web/satellite/vuetify-poc/src/components/dialogs/createAccessSteps/S3CredentialsCreatedStep.vue
index 97e6b798500f..d852c01753e5 100644
--- a/web/satellite/vuetify-poc/src/components/dialogs/createAccessSteps/S3CredentialsCreatedStep.vue
+++ b/web/satellite/vuetify-poc/src/components/dialogs/createAccessSteps/S3CredentialsCreatedStep.vue
@@ -2,7 +2,7 @@
 // See LICENSE for copying information.
 
 <template>
-    <div class="pa-8">
+    <div class="pa-7">
         <v-row>
             <v-col cols="12">
                 Copy or save the S3 credentials as they will only appear once.
@@ -48,7 +48,7 @@ const saveItems = computed<SaveButtonsItem[]>(() => [
 ]);
 
 defineExpose({
-    title: 'Credentials Generated',
+    title: 'S3 Credentials Generated',
     onEnter: () => isTooltipDisabled.value = false,
     onExit: () => isTooltipDisabled.value = true,
 });
diff --git a/web/satellite/vuetify-poc/src/components/dialogs/createAccessSteps/TextOutputArea.vue b/web/satellite/vuetify-poc/src/components/dialogs/createAccessSteps/TextOutputArea.vue
index e9ed94e88d89..060d49695031 100644
--- a/web/satellite/vuetify-poc/src/components/dialogs/createAccessSteps/TextOutputArea.vue
+++ b/web/satellite/vuetify-poc/src/components/dialogs/createAccessSteps/TextOutputArea.vue
@@ -11,6 +11,7 @@
         variant="solo-filled"
         :label="label"
         :model-value="value"
+        rounded="xlg"
         rows="1"
         auto-grow
         no-resize
@@ -25,7 +26,6 @@
                         class="bg-background"
                         variant="outlined"
                         color="default"
-                        size="small"
                         prepend-icon="mdi-lock-outline"
                         @click="isBlurred = false"
                     >
@@ -73,10 +73,17 @@ const isBlurred = ref<boolean>(true);
 
     :deep(textarea) {
         font-family: monospace;
+        font-size: 14px;
+        margin-bottom: 8px;
+        margin-top: 8px;
     }
 
     :deep(.v-field__field), :deep(.v-field__append-inner) {
-        filter: blur(10px);
+        filter: blur(50px);
+    }
+
+    :deep(.v-field-label--floating) {
+        top: 10px !important;
     }
 
     &--unblur {
diff --git a/web/satellite/vuetify-poc/src/components/dialogs/managePassphraseSteps/EncryptionPassphraseStep.vue b/web/satellite/vuetify-poc/src/components/dialogs/managePassphraseSteps/EncryptionPassphraseStep.vue
index 852f6f6747e9..27decf5f72f0 100644
--- a/web/satellite/vuetify-poc/src/components/dialogs/managePassphraseSteps/EncryptionPassphraseStep.vue
+++ b/web/satellite/vuetify-poc/src/components/dialogs/managePassphraseSteps/EncryptionPassphraseStep.vue
@@ -2,7 +2,7 @@
 // See LICENSE for copying information.
 
 <template>
-    <div class="pa-8 pb-4">
+    <div class="pa-8">
         <v-row>
             <v-col cols="12">
                 The encryption passphrase will be used to encrypt the files you upload in this project.
diff --git a/web/satellite/vuetify-poc/src/components/dialogs/upgradeAccountFlow/AddCreditCardStep.vue b/web/satellite/vuetify-poc/src/components/dialogs/upgradeAccountFlow/AddCreditCardStep.vue
index 8f6f3ba1842a..11df35480710 100644
--- a/web/satellite/vuetify-poc/src/components/dialogs/upgradeAccountFlow/AddCreditCardStep.vue
+++ b/web/satellite/vuetify-poc/src/components/dialogs/upgradeAccountFlow/AddCreditCardStep.vue
@@ -2,13 +2,11 @@
 // See LICENSE for copying information.
 
 <template>
-    <p class="pb-4">
+    <p class="pt-2 pb-4">
         By saving your card information, you allow Storj to charge your card for future payments in accordance with
         the terms.
     </p>
 
-    <v-divider />
-
     <div class="py-4">
         <StripeCardElement
             ref="stripeCardInput"
@@ -23,7 +21,7 @@
                 <v-btn
                     block
                     variant="outlined"
-                    color="grey-lighten-1"
+                    color="default"
                     :disabled="loading"
                     @click="emit('back')"
                 >
@@ -44,7 +42,7 @@
                 </v-btn>
             </v-col>
         </v-row>
-        <p class="mt-1 text-caption text-center">Your information is secured with 128-bit SSL & AES-256 encryption.</p>
+        <p class="mt-1 text-caption text-center">Information is secured with 128-bit SSL & AES-256 encryption.</p>
     </div>
 </template>
 
diff --git a/web/satellite/vuetify-poc/src/components/dialogs/upgradeAccountFlow/InfoBullet.vue b/web/satellite/vuetify-poc/src/components/dialogs/upgradeAccountFlow/InfoBullet.vue
index c78ce97b71fc..f9f8162020be 100644
--- a/web/satellite/vuetify-poc/src/components/dialogs/upgradeAccountFlow/InfoBullet.vue
+++ b/web/satellite/vuetify-poc/src/components/dialogs/upgradeAccountFlow/InfoBullet.vue
@@ -2,25 +2,39 @@
 // See LICENSE for copying information.
 
 <template>
-    <v-row class="pa-0 flex-nowrap">
-        <v-col class="pa-2" cols="1">
-            <img v-if="!isPro" src="@/../static/images/modals/upgradeFlow/greyCheckmark.svg" alt="checkmark">
-            <img v-else src="@/../static/images/modals/upgradeFlow/greenCheckmark.svg" alt="checkmark">
-        </v-col>
-        <v-col class="pa-2" cols="11">
-            <p class="font-weight-bold">
+    <v-list>
+        <v-list-item>
+            <template #prepend>
+                <v-icon
+                    v-if="!isPro"
+                    color="default"
+                    icon="mdi-check-circle-outline"
+                    size="small"
+                    class="mr-3 text-disabled"
+                />
+                <v-icon
+                    v-else
+                    color="primary"
+                    icon="mdi-check-circle-outline"
+                    size="small"
+                    class="mr-3 opacity-100"
+                />
+            </template>
+            <v-list-item-title>
                 {{ title }}
                 <v-tooltip v-if="$slots.moreInfo" max-width="200px" location="top" activator="parent">
                     <slot name="moreInfo" />
                 </v-tooltip>
-            </p>
-            <p>{{ info }}</p>
-        </v-col>
-    </v-row>
+            </v-list-item-title>
+            <v-list-item-subtitle>
+                {{ info }}
+            </v-list-item-subtitle>
+        </v-list-item>
+    </v-list>
 </template>
 
 <script setup lang="ts">
-import { VCol, VRow, VTooltip } from 'vuetify/components';
+import { VList, VListItem, VListItemTitle, VListItemSubtitle, VIcon, VTooltip } from 'vuetify/components';
 
 const props = withDefaults(defineProps<{
     isPro?: boolean;
diff --git a/web/satellite/vuetify-poc/src/components/dialogs/upgradeAccountFlow/UpgradeAccountDialog.vue b/web/satellite/vuetify-poc/src/components/dialogs/upgradeAccountFlow/UpgradeAccountDialog.vue
index c3ec0b630dda..8fb70d4cd41d 100644
--- a/web/satellite/vuetify-poc/src/components/dialogs/upgradeAccountFlow/UpgradeAccountDialog.vue
+++ b/web/satellite/vuetify-poc/src/components/dialogs/upgradeAccountFlow/UpgradeAccountDialog.vue
@@ -4,16 +4,15 @@
 <template>
     <v-dialog
         v-model="model"
-        width="auto"
         scrollable
         min-width="460px"
-        :max-width="step === UpgradeAccountStep.Info || step === UpgradeAccountStep.PricingPlanSelection ? '700px' : '460px'"
+        :max-width="step === UpgradeAccountStep.Info || step === UpgradeAccountStep.PricingPlanSelection ? '720px' : '460px'"
         transition="fade-transition"
         :persistent="loading"
         :scrim="scrim"
     >
         <v-card ref="content" rounded="xlg">
-            <v-card-item class="pl-7 py-4">
+            <v-card-item class="pa-5 pl-7">
                 <template v-if="step === UpgradeAccountStep.Success" #prepend>
                     <img class="d-block" src="@/../static/images/modals/upgradeFlow/success.svg" alt="success">
                 </template>
@@ -29,7 +28,7 @@
                 </template>
             </v-card-item>
 
-            <v-divider class="mx-8" />
+            <v-divider />
 
             <v-card-item class="px-8 py-4">
                 <v-window v-model="step">
@@ -142,7 +141,7 @@ const model = computed<boolean>({
 
 const stepTitles = computed(() => {
     return {
-        [UpgradeAccountStep.Info]: 'Your account',
+        [UpgradeAccountStep.Info]: 'Upgrade',
         [UpgradeAccountStep.Options]: 'Upgrade to Pro',
         [UpgradeAccountStep.AddCC]: 'Add Credit Card',
         [UpgradeAccountStep.AddTokens]: 'Add tokens',
diff --git a/web/satellite/vuetify-poc/src/components/dialogs/upgradeAccountFlow/UpgradeInfoStep.vue b/web/satellite/vuetify-poc/src/components/dialogs/upgradeAccountFlow/UpgradeInfoStep.vue
index 035eb8df82b7..eca3eee396ba 100644
--- a/web/satellite/vuetify-poc/src/components/dialogs/upgradeAccountFlow/UpgradeInfoStep.vue
+++ b/web/satellite/vuetify-poc/src/components/dialogs/upgradeAccountFlow/UpgradeInfoStep.vue
@@ -4,34 +4,34 @@
 <template>
     <v-row>
         <v-col v-if="!smAndDown" cols="6">
-            <h4 class="font-weight-bold mb-2">Free</h4>
+            <h4 class="font-weight-bold my-2">Free Account</h4>
             <v-btn
                 block
                 disabled
-                color="grey"
+                color="default"
             >
                 Current
             </v-btn>
-            <div class="border-sm rounded-lg pa-4 mt-3 mb-3">
+            <v-card class="my-4">
                 <InfoBullet title="Projects" :info="freeProjects" />
                 <InfoBullet title="Storage" :info="`${freeUsageValue(user.projectStorageLimit)} limit`" />
-                <InfoBullet title="Egress" :info="`${freeUsageValue(user.projectBandwidthLimit)} limit`" />
+                <InfoBullet title="Download" :info="`${freeUsageValue(user.projectBandwidthLimit)} limit`" />
                 <InfoBullet title="Segments" :info="`${user.projectSegmentLimit.toLocaleString()} segments limit`" />
                 <InfoBullet title="Link Sharing" info="Link sharing with Storj domain" />
-            </div>
+            </v-card>
         </v-col>
         <v-col :cols="smAndDown ? 12 : '6'">
-            <h4 class="font-weight-bold mb-2">Pro Account</h4>
+            <h4 class="font-weight-bold my-2">Pro Account</h4>
             <v-btn
                 class="mb-1"
                 block
-                color="success"
                 :loading="loading"
+                append-icon="mdi-arrow-right"
                 @click="emit('upgrade')"
             >
-                Upgrade to Pro
+                Upgrade
             </v-btn>
-            <div class="border-sm rounded-lg pa-4 mt-3 mb-3">
+            <v-card class="my-4">
                 <InfoBullet is-pro title="Projects" :info="projectsInfo" />
                 <InfoBullet is-pro :title="storagePrice" :info="storagePriceInfo" />
                 <InfoBullet is-pro :title="downloadPrice" :info="downloadInfo">
@@ -42,7 +42,7 @@
                 <InfoBullet is-pro title="Segments" :info="segmentInfo">
                     <template #moreInfo>
                         <a
-                            class="text-surface"
+                            class="link"
                             href="https://docs.storj.io/dcs/billing-payment-and-accounts-1/pricing/billing-and-payment"
                             target="_blank"
                             rel="noopener noreferrer"
@@ -52,14 +52,15 @@
                     </template>
                 </InfoBullet>
                 <InfoBullet is-pro title="Secure Custom Domains (HTTPS)" info="Link sharing with your domain" />
-            </div>
+                <InfoBullet is-pro title="Team" info="Share projects and collaborate" />
+            </v-card>
         </v-col>
     </v-row>
 </template>
 
 <script setup lang="ts">
 import { computed, onBeforeMount, ref } from 'vue';
-import { VBtn, VCol, VRow } from 'vuetify/components';
+import { VBtn, VCol, VRow, VCard } from 'vuetify/components';
 import { useDisplay } from 'vuetify';
 
 import { useUsersStore } from '@/store/modules/usersStore';
@@ -85,7 +86,7 @@ const storagePrice = ref<string>('Storage $0.004 GB / month');
 const storagePriceInfo = ref<string>('25 GB free included');
 const segmentInfo = ref<string>('$0.0000088 segment per month');
 const projectsInfo = ref<string>('3 projects + more on request');
-const downloadPrice = ref<string>('Egress $0.007 GB');
+const downloadPrice = ref<string>('Download $0.007 GB');
 const downloadInfo = ref<string>('25 GB free every month');
 const downloadMoreInfo = ref<string>('');
 
diff --git a/web/satellite/vuetify-poc/src/components/dialogs/upgradeAccountFlow/UpgradeOptionsStep.vue b/web/satellite/vuetify-poc/src/components/dialogs/upgradeAccountFlow/UpgradeOptionsStep.vue
index d7c6eb2d8739..dab39658b8d1 100644
--- a/web/satellite/vuetify-poc/src/components/dialogs/upgradeAccountFlow/UpgradeOptionsStep.vue
+++ b/web/satellite/vuetify-poc/src/components/dialogs/upgradeAccountFlow/UpgradeOptionsStep.vue
@@ -2,18 +2,16 @@
 // See LICENSE for copying information.
 
 <template>
-    <p class="pb-4">
+    <p class="pt-2 pb-4">
         Add a credit card to activate your Pro Account, or deposit more than $10 in STORJ tokens to upgrade
         and get 10% bonus on your STORJ tokens deposit.
     </p>
 
-    <v-divider />
-
     <v-row justify="center" class="mx-0 pb-5 pt-4">
         <v-col class="pl-0">
             <v-btn
                 variant="flat"
-                color="success"
+                color="primary"
                 block
                 :loading="loading"
                 @click="emit('addCard')"
diff --git a/web/satellite/vuetify-poc/src/layouts/default/AppBar.vue b/web/satellite/vuetify-poc/src/layouts/default/AppBar.vue
index c399f74a3717..ba62d26d9e0e 100644
--- a/web/satellite/vuetify-poc/src/layouts/default/AppBar.vue
+++ b/web/satellite/vuetify-poc/src/layouts/default/AppBar.vue
@@ -3,7 +3,7 @@
 
 <template>
     <v-app-bar :elevation="0">
-        <v-progress-linear indeterminate absolute location="bottom" color="primary" :active="appStore.state.isNavigating" />
+        <v-progress-linear indeterminate absolute location="bottom" color="primary" :active="appStore.state.isNavigating" height="3" />
 
         <v-app-bar-nav-icon
             v-if="showNavDrawerButton"
diff --git a/web/satellite/vuetify-poc/src/layouts/default/ProjectNav.vue b/web/satellite/vuetify-poc/src/layouts/default/ProjectNav.vue
index 4786b8fd168e..6da561a6252b 100644
--- a/web/satellite/vuetify-poc/src/layouts/default/ProjectNav.vue
+++ b/web/satellite/vuetify-poc/src/layouts/default/ProjectNav.vue
@@ -2,7 +2,7 @@
 // See LICENSE for copying information.
 
 <template>
-    <v-navigation-drawer v-model="model" class="py-1">
+    <v-navigation-drawer v-model="model">
         <v-sheet class="pa-2">
             <!-- Project -->
             <v-menu location="end" transition="scale-transition">
@@ -26,8 +26,8 @@
                                 <!-- <img src="@poc/assets/icon-project.svg" alt="Projects"> -->
                                 <IconProject />
                             </template>
-                            <v-list-item-title>
-                                <v-chip color="purple2" variant="tonal" size="small" rounded="xl" class="font-weight-bold">
+                            <v-list-item-title class="ml-3">
+                                <v-chip color="secondary" variant="tonal" size="small" rounded="xl" class="font-weight-bold">
                                     My Projects
                                 </v-chip>
                             </v-list-item-title>
diff --git a/web/satellite/vuetify-poc/src/plugins/vuetify.ts b/web/satellite/vuetify-poc/src/plugins/vuetify.ts
index 7dc432d495fd..de5a8ed095c2 100644
--- a/web/satellite/vuetify-poc/src/plugins/vuetify.ts
+++ b/web/satellite/vuetify-poc/src/plugins/vuetify.ts
@@ -39,14 +39,17 @@ export default createVuetify({
             transition: 'fade-transition',
         },
         VSelect: {
-            rounded: 'lg',
+            // rounded: 'lg',
+            variant: 'outlined',
+            color: 'secondary',
         },
         VTextField: {
             rounded: 'lg',
             variant: 'outlined',
+            color: 'secondary',
         },
         VList: {
-            rounded: 'xlg',
+            rounded: 'lg',
         },
         VListItem: {
             rounded: 'lg',
@@ -56,6 +59,22 @@ export default createVuetify({
         },
         VCard: {
             border: true,
+            rounded: 'xlg',
+        },
+        VTable: {
+            class: 'elevation-0',
+        },
+        VCheckbox: {
+            color: 'primary',
+        },
+        VAlert: {
+            rounded: 'xlg',
+        },
+        VChip: {
+            rounded: 'lg',
         },
+        // VTable: {
+        //     elevation: 0,
+        // },
     },
-});
\ No newline at end of file
+});
diff --git a/web/satellite/vuetify-poc/src/styles/styles.scss b/web/satellite/vuetify-poc/src/styles/styles.scss
index ab1357ff56ca..fd3288222081 100644
--- a/web/satellite/vuetify-poc/src/styles/styles.scss
+++ b/web/satellite/vuetify-poc/src/styles/styles.scss
@@ -7,17 +7,22 @@ html {
   overflow-y: auto !important;
 }
 
+body {
+  text-rendering: optimizeLegibility;
+  letter-spacing: -0.01em;
+}
+
 // Light Theme
 .v-theme--light {
   --v-border-color: 0, 0, 0;
-  --v-border-opacity: 0.1;
-  --v-theme-overlay-multiplier: 0.75;
-  --v-border-color: #e0e0e0;
+  --v-theme-overlay-multiplier: 0.75 !important;
+  --v-border-opacity: 0.07 !important;
 }
 
 // Dark Theme
 .v-theme--dark {
-  --v-theme-overlay-multiplier: 0.75;
+  --v-theme-overlay-multiplier: 0.75 !important;
+  --v-border-opacity: 0.07 !important;
 }
 
 // Nav
@@ -41,8 +46,17 @@ html {
 }
 
 // Button Shadow
-.v-btn--variant-outlined, .v-btn--elevated, .v-btn--variant-flat  {
-  box-shadow: rgba(50, 50, 93, 0.07) 0px 2px 5px 0px, rgba(0, 0, 0, 0.04) 0px 1px 1px 0px !important;
+.v-btn--elevated,
+.v-btn--variant-flat {
+  box-shadow: rgba(31, 35, 40, 0.04) 0px 1px 0px 0px, rgba(255, 255, 255, 0.25) 0px 1px 0px 0px inset;
+}
+.v-btn--variant-outlined {
+  box-shadow: rgba(31, 35, 40, 0.04) 0px 1px 0px 0px;
+}
+.v-btn--elevated:hover,
+.v-btn--variant-flat:hover,
+.v-btn--variant-outlined {
+  box-shadow: rgba(31, 35, 40, 0.04) 0px 1px 0px 0px;
 }
 
 // Button Outlines
@@ -62,10 +76,8 @@ html {
 }
 
 // Button focus style
-.v-btn:focus {
-  // box-shadow: rgb(255, 255, 255) 0px 0px 0px 1px, rgb(103, 146, 244) 0px 0px 0px 3px !important;
-  // box-shadow: rgb(255, 255, 255) 0px 0px 0px 1px, currentColor 0px 0px 0px 1px !important;
-  // outline: none !important;
+.v-btn:focus:active {
+  box-shadow: currentColor 0px 0px 0px 1px, currentColor 0px 0px 0px 1px !important;
 }
 
 // Button sizes
@@ -81,9 +93,15 @@ html {
 
 
 // Menu border
-.v-overlay__content .v-list {
+.v-menu > .v-overlay__content > .v-card, .v-menu > .v-overlay__content > .v-sheet, .v-menu > .v-overlay__content > .v-list {
   border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity)) !important;
-  // border-radius: 12px !important;
+  box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 10px 10px !important;
+}
+.v-navigation-drawer--temporary {
+  box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 10px 10px !important;
+}
+.v-navigation-drawer__scrim {
+  opacity: 0.3;
 }
 
 // Menu list item
@@ -93,14 +111,15 @@ html {
 
 // Card Light Theme
 .v-card.v-theme--light {
-  border: 1px solid #e0e0e0;
-  box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 0px 0px;
+  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity)) !important;
+  box-shadow: rgba(88, 102, 126, 0.07) 0px 4px 20px;
 }
 
 // Card Dark Theme
 .v-card.v-theme--dark {
   background: --v-theme-surface;
-  box-shadow: rgba(255, 255, 255, 0.07) 0px 1px 0px 0px;
+  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity)) !important;
+  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
 }
 
 // Cards Padding
@@ -129,10 +148,15 @@ html {
 
 // Make the checkbox selection square instead of rounded
 .v-selection-control__input {
-  border-radius: 8px;
+  border-radius: 8px !important;
 }
 .v-selection-control__input::before {
-  border-radius: 8px;
+  border-radius: 8px !important;
+}
+
+// Label opacity
+.v-label {
+    opacity: 1 !important;
 }
 
 // Ensure that the compact checkbox isn't too close to its label
@@ -140,6 +164,7 @@ html {
   margin-left: 8px;
 }
 
+
 // Sorting icon
 .mdi-arrow-up::before, .mdi-arrow-down::before {
   font-size: 14px;
@@ -208,7 +233,6 @@ table {
 
 // Links
 .link {
-  color: rgb(var(--v-theme-primary));
   text-decoration: none;
   background-image: linear-gradient(currentColor,currentColor);
   background-size: 0 1px;
@@ -217,17 +241,29 @@ table {
   transition: background-size .15s ease;
 }
 .link:hover {
-  color: rgb(var(--v-theme-secondary));
   background-size: 100% 1px;
   cursor: pointer;
 }
+.v-theme--light .link {
+  color: rgb(var(--v-theme-primary));
+}
+.v-theme--light .link:hover {
+  color: rgb(var(--v-theme-secondary));
+}
+.v-theme--dark .link {
+  color: rgb(var(--v-theme-secondary));
+}
+.v-theme--dark .link:hover {
+  color: rgb(var(--v-theme-info));
+}
 
 
 // Tooltips
 .v-tooltip>.v-overlay__content {
-  background: rgba(var(--v-theme-on-surface),0.9) !important;
-  color: rgb(var(--v-theme-surface)) !important;
-  border: 1px solid rgba(var(--v-theme-surface),0.2);
+  background: rgba(var(--v-theme-surface),0.9) !important;
+  color: rgba(var(--v-theme-on-surface),0.9) !important;
+  border: 1px solid rgba(var(--v-theme-on-surface),0.2);
+  box-shadow: rgba(0, 0, 0, 0.03) 0px 1px 10px 10px !important;
   font-weight: 500;
   border-radius: 20px !important;
   padding: 6px 14px;
@@ -263,7 +299,8 @@ table {
   letter-spacing: 0 !important;
 }
 .v-alert__prepend {
-  margin-top: 12px;
+  margin-top: 4px;
+  margin-inline-end: 12px;
 }
 .v-alert__append, .v-alert__close {
   margin-top: 4px;
@@ -271,6 +308,9 @@ table {
 .v-alert__close .v-btn {
   color: rgb(var(--v-theme-on-surface)) !important;
 }
+.v-alert__content {
+  font-size: 14px;
+}
 
 .bg-on-surface-variant {
   background-color: rgb(var(--v-theme-on-surface-variant)) !important;
@@ -287,7 +327,12 @@ table {
   max-height: 100%;
 }
 
-// text styles
+// Sizing
+.max-h-100 {
+  max-height: 100%;
+}
+
+// Text styles
 .text-cursor-pointer {
   cursor: pointer;
 }
@@ -302,3 +347,19 @@ table {
 [disabled=false] {
   cursor: unset;
 }
+
+.break-word {
+  word-break: break-word;
+}
+
+// Vuetify has a bug where any element with the attribute "disabled" forces the default cursor
+// even if the value of this attribute is "false".
+// This causes text in window items to appear to be unselectable.
+[disabled=false] {
+  cursor: unset;
+}
+
+// Opacity
+.opacity-100 {
+  opacity: 1 !important;
+}
\ No newline at end of file
diff --git a/web/satellite/vuetify-poc/src/types/projects.ts b/web/satellite/vuetify-poc/src/types/projects.ts
index 13b176909dba..72c71052290c 100644
--- a/web/satellite/vuetify-poc/src/types/projects.ts
+++ b/web/satellite/vuetify-poc/src/types/projects.ts
@@ -27,7 +27,7 @@ export type ProjectItemRole = Exclude<ProjectRole, ProjectRole.InviteExpired>;
  */
 export const PROJECT_ROLE_COLORS: Record<ProjectRole, string> = {
     [ProjectRole.Member]: 'green',
-    [ProjectRole.Owner]: 'purple2',
+    [ProjectRole.Owner]: 'secondary',
     [ProjectRole.Invited]: 'warning',
     [ProjectRole.InviteExpired]: 'error',
 };
diff --git a/web/satellite/vuetify-poc/src/views/AccountSettings.vue b/web/satellite/vuetify-poc/src/views/AccountSettings.vue
index a4fc311db2b9..cf8f0d9929ba 100644
--- a/web/satellite/vuetify-poc/src/views/AccountSettings.vue
+++ b/web/satellite/vuetify-poc/src/views/AccountSettings.vue
@@ -3,14 +3,16 @@
 
 <template>
     <v-container>
-        <!-- <v-breadcrumbs :items="['My Account', 'Settings']" class="pl-0"></v-breadcrumbs> -->
-
-        <h1 class="text-h5 font-weight-bold mb-2">Settings</h1>
+        <v-row>
+            <v-col>
+                <PageTitleComponent title="Account Settings" />
+            </v-col>
+        </v-row>
 
         <v-card
             variant="flat"
             :border="true"
-            class="mx-auto my-6"
+            class="mx-auto mt-2 my-6"
         >
             <v-list lines="three">
                 <v-list-subheader class="mb-2">Profile</v-list-subheader>
@@ -155,6 +157,8 @@ import {
     VListItemSubtitle,
     VListItemAction,
     VBtn,
+    VRow,
+    VCol,
 } from 'vuetify/components';
 
 import { User, UserSettings } from '@/types/users';
@@ -163,6 +167,7 @@ import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames
 import { useNotify } from '@/utils/hooks';
 import { Duration } from '@/utils/time';
 
+import PageTitleComponent from '@poc/components/PageTitleComponent.vue';
 import ChangePasswordDialog from '@poc/components/dialogs/ChangePasswordDialog.vue';
 import ChangeNameDialog from '@poc/components/dialogs/ChangeNameDialog.vue';
 import EnableMFADialog from '@poc/components/dialogs/EnableMFADialog.vue';
diff --git a/web/satellite/vuetify-poc/src/views/Billing.vue b/web/satellite/vuetify-poc/src/views/Billing.vue
index 8a31d7a74e8c..765f7888ab99 100644
--- a/web/satellite/vuetify-poc/src/views/Billing.vue
+++ b/web/satellite/vuetify-poc/src/views/Billing.vue
@@ -3,11 +3,13 @@
 
 <template>
     <v-container>
-        <!-- <v-breadcrumbs :items="['My Account', 'Billing']" class="pl-0"></v-breadcrumbs> -->
+        <v-row>
+            <v-col>
+                <PageTitleComponent title="Account Billing" />
+            </v-col>
+        </v-row>
 
-        <h1 class="text-h5 font-weight-bold mb-6">Billing</h1>
-
-        <v-card variant="flat" :border="true" color="default" class="mb-6 rounded">
+        <v-card variant="flat" :border="true" color="default" class="mt-2 mb-6 rounded">
             <v-tabs
                 v-model="tab"
                 color="default"
@@ -53,7 +55,6 @@
                                 </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>
@@ -71,7 +72,6 @@
                                 <v-btn variant="outlined" color="default" size="small" class="mr-2" prepend-icon="mdi-plus">
                                     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>
@@ -193,7 +193,6 @@
                     <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" prepend-icon="mdi-plus">Add Billing Information</v-btn>
@@ -237,6 +236,7 @@ import { useProjectsStore } from '@/store/modules/projectsStore';
 import { useConfigStore } from '@/store/modules/configStore';
 import { Download } from '@/utils/download';
 
+import PageTitleComponent from '@poc/components/PageTitleComponent.vue';
 import CreditCardComponent from '@poc/components/CreditCardComponent.vue';
 import AddCreditCardComponent from '@poc/components/AddCreditCardComponent.vue';
 import BillingHistoryTab from '@poc/components/billing/BillingHistoryTab.vue';
diff --git a/web/satellite/vuetify-poc/src/views/Bucket.vue b/web/satellite/vuetify-poc/src/views/Bucket.vue
index e8ca4416f6ff..a815cb5f55ab 100644
--- a/web/satellite/vuetify-poc/src/views/Bucket.vue
+++ b/web/satellite/vuetify-poc/src/views/Bucket.vue
@@ -24,24 +24,24 @@
                             Upload
                         </v-btn>
                     </template>
-                    <v-list class="pa-2">
+                    <v-list class="pa-1">
                         <v-list-item rounded="lg" :disabled="!isInitialized" @click.stop="buttonFileUpload">
                             <template #prepend>
                                 <IconFile size="16" class="mr-2" />
                             </template>
-                            <v-list-item-title class="text-body-2 ml-3">
-                                Upload File
+                            <v-list-item-title class="text-body-2 ml-2">
+                                Upload Files
                             </v-list-item-title>
                         </v-list-item>
 
-                        <v-divider class="my-2" />
+                        <v-divider class="my-1" />
 
                         <v-list-item class="mt-1" rounded="lg" :disabled="!isInitialized" @click.stop="buttonFolderUpload">
                             <template #prepend>
                                 <icon-folder />
                             </template>
-                            <v-list-item-title class="text-body-2 ml-3">
-                                Upload Folder
+                            <v-list-item-title class="text-body-2 ml-2">
+                                Upload Folders
                             </v-list-item-title>
                         </v-list-item>
                     </v-list>
diff --git a/web/satellite/vuetify-poc/src/views/Projects.vue b/web/satellite/vuetify-poc/src/views/Projects.vue
index 8eb8144a825f..8c9bf94156b9 100644
--- a/web/satellite/vuetify-poc/src/views/Projects.vue
+++ b/web/satellite/vuetify-poc/src/views/Projects.vue
@@ -19,7 +19,7 @@
                         <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
+                    New Project
                 </v-btn>
             </v-col>
 
diff --git a/web/satellite/vuetify-poc/src/views/Team.vue b/web/satellite/vuetify-poc/src/views/Team.vue
index 04c0021e3ea6..b2fe08426754 100644
--- a/web/satellite/vuetify-poc/src/views/Team.vue
+++ b/web/satellite/vuetify-poc/src/views/Team.vue
@@ -9,8 +9,8 @@
             link="https://docs.storj.io/support/users"
         />
 
-        <v-col class="pb-0">
-            <v-row class="mt-2 mb-0">
+        <v-col>
+            <v-row class="mt-2 mb-4">
                 <v-btn @click="isAddMemberDialogShown = true">
                     <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" />