From e5c8b304de461e9a149a6409f0d843f78a11fe23 Mon Sep 17 00:00:00 2001
From: Tome Boshevski <tome@storj.io>
Date: Wed, 6 Dec 2023 11:44:19 +0100
Subject: [PATCH] web/satellite/vuetify-poc: ui updates and improvements
 (#6576)

Updating common components and dialogs.
Updating the new browser card view.
Updating the file preview.
Updating usage per project.
Updating tooltips and messaging.
Icons update.
Themes and styling updates.
---
 .../src/components/AccessTableComponent.vue   |   2 +-
 .../components/BrowserCardViewComponent.vue   |  38 ++---
 .../src/components/BrowserRowActions.vue      |  21 ++-
 .../src/components/BrowserTableComponent.vue  |   4 +-
 .../src/components/BucketsDataTable.vue       |   7 +-
 .../src/components/CardStatsComponent.vue     |   4 +-
 .../vuetify-poc/src/components/FileCard.vue   |  82 +++++------
 .../src/components/ProjectCard.vue            |   2 +-
 .../src/components/ProjectsTableComponent.vue |   8 +-
 .../src/components/TeamTableComponent.vue     |   5 +-
 .../TokenTransactionsTableComponent.vue       |   2 +-
 .../src/components/UsageProgressComponent.vue |   6 +-
 .../billing/UsageAndChargesItemComponent.vue  |  47 ++++--
 .../dialogs/BucketDetailsDialog.vue           |  22 +--
 .../components/dialogs/FilePreviewDialog.vue  |   2 +-
 .../src/components/dialogs/ShareDialog.vue    |  13 +-
 .../filePreviewComponents/CSVFilePreview.vue  |   2 +-
 .../filePreviewComponents/FilePreviewItem.vue |   2 +-
 .../FilePreviewPlaceholder.vue                |   2 +-
 .../filePreviewComponents/TextFilePreview.vue |   2 +-
 .../dialogs/upgradeAccountFlow/InfoBullet.vue |   9 +-
 .../upgradeAccountFlow/UpgradeInfoStep.vue    |   5 +-
 .../{IconRegion.vue => IconSatellite.vue}     |   0
 .../src/layouts/default/AppBar.vue            |   6 +-
 .../vuetify-poc/src/plugins/theme.ts          |   3 +-
 .../vuetify-poc/src/plugins/vuetify.ts        |   7 +-
 .../vuetify-poc/src/styles/styles.scss        | 136 +++++++++++++++---
 .../vuetify-poc/src/views/Billing.vue         |  16 ++-
 .../vuetify-poc/src/views/Bucket.vue          |   2 +-
 .../vuetify-poc/src/views/Dashboard.vue       |  22 +--
 web/satellite/vuetify-poc/src/views/Login.vue |  10 +-
 .../vuetify-poc/src/views/PasswordReset.vue   |   4 +-
 32 files changed, 312 insertions(+), 181 deletions(-)
 rename web/satellite/vuetify-poc/src/components/icons/{IconRegion.vue => IconSatellite.vue} (100%)

diff --git a/web/satellite/vuetify-poc/src/components/AccessTableComponent.vue b/web/satellite/vuetify-poc/src/components/AccessTableComponent.vue
index ba4d6cd56e45..7e00a8a422ad 100644
--- a/web/satellite/vuetify-poc/src/components/AccessTableComponent.vue
+++ b/web/satellite/vuetify-poc/src/components/AccessTableComponent.vue
@@ -2,7 +2,7 @@
 // See LICENSE for copying information.
 
 <template>
-    <v-card variant="flat" :border="true" rounded="xlg">
+    <v-card variant="outlined" :border="true" rounded="xlg">
         <v-text-field
             v-model="search"
             label="Search"
diff --git a/web/satellite/vuetify-poc/src/components/BrowserCardViewComponent.vue b/web/satellite/vuetify-poc/src/components/BrowserCardViewComponent.vue
index 5b6c127b3879..464001c4a4b0 100644
--- a/web/satellite/vuetify-poc/src/components/BrowserCardViewComponent.vue
+++ b/web/satellite/vuetify-poc/src/components/BrowserCardViewComponent.vue
@@ -13,7 +13,7 @@
                 flat
                 hide-details
                 clearable
-                density="comfortable"
+                density="compact"
                 rounded="lg"
             />
         </v-col>
@@ -21,12 +21,13 @@
             <v-menu>
                 <template #activator="{ props: sortProps }">
                     <v-btn
-                        variant="tonal"
-                        color="primary"
+                        variant="outlined"
+                        color="default"
+                        prepend-icon="mdi-sort"
                         append-icon="mdi-chevron-down"
                         v-bind="sortProps"
                     >
-                        Sort by {{ sortKey }}
+                        <span class="text-body-2">Sort by</span> <span class="ml-1 text-capitalize">{{ sortKey }}</span>
                     </v-btn>
                 </template>
                 <v-list>
@@ -45,15 +46,17 @@
                 v-model="sortOrder"
                 density="comfortable"
                 variant="outlined"
-                color="primary"
-                rounded="lg"
+                color="default"
+                rounded="xl"
+                class="pa-1"
+                border
                 mandatory
             >
-                <v-btn value="asc">
-                    <v-icon>mdi-arrow-up</v-icon>
+                <v-btn size="small" value="asc" title="Ascending" variant="text" rounded="xl">
+                    <v-icon>mdi-sort-ascending</v-icon>
                 </v-btn>
-                <v-btn value="desc">
-                    <v-icon>mdi-arrow-down</v-icon>
+                <v-btn size="small" value="desc" title="Descending" variant="text" rounded="xl">
+                    <v-icon>mdi-sort-descending</v-icon>
                 </v-btn>
             </v-btn-toggle>
         </v-col>
@@ -89,13 +92,14 @@
             <div class="d-flex align-center py-5">
                 <v-menu>
                     <template #activator="{ props: limitProps }">
+                        <span class="text-subtitle-2 mr-2">Items per page:</span>
                         <v-btn
-                            variant="tonal"
-                            color="primary"
+                            variant="outlined"
+                            color="default"
                             append-icon="mdi-chevron-down"
                             v-bind="limitProps"
                         >
-                            {{ cursor.limit }} files per page
+                            {{ cursor.limit }}
                         </v-btn>
                     </template>
                     <v-list>
@@ -110,13 +114,14 @@
 
                 <v-spacer />
 
-                <span class="mr-4">
+                <span class="mr-4 text-medium-emphasis">
                     Page {{ cursor.page }} of {{ lastPage }}
                 </span>
                 <v-btn
                     icon
                     size="small"
-                    variant="tonal"
+                    variant="outlined"
+                    color="default"
                     :disabled="cursor.page === 1"
                     @click="() => onPageChange(cursor.page - 1)"
                 >
@@ -125,7 +130,8 @@
                 <v-btn
                     icon
                     size="small"
-                    variant="tonal"
+                    variant="outlined"
+                    color="default"
                     class="ml-2"
                     :disabled="cursor.page === lastPage"
                     @click="() => onPageChange(cursor.page + 1)"
diff --git a/web/satellite/vuetify-poc/src/components/BrowserRowActions.vue b/web/satellite/vuetify-poc/src/components/BrowserRowActions.vue
index 07eab6349977..239bd8eb8439 100644
--- a/web/satellite/vuetify-poc/src/components/BrowserRowActions.vue
+++ b/web/satellite/vuetify-poc/src/components/BrowserRowActions.vue
@@ -5,25 +5,40 @@
     <div class="text-no-wrap" :class="alignClass">
         <v-btn
             v-if="file.type !== 'folder'"
-            variant="outlined"
+            variant="text"
             color="default"
             size="small"
             class="mr-1 text-caption"
             density="comfortable"
+            title="Download"
             icon
             :loading="isDownloading"
             @click="onDownloadClick"
         >
             <icon-download />
-            <v-tooltip activator="parent" location="start">Download</v-tooltip>
+            <!-- <v-tooltip activator="parent" location="start">Download</v-tooltip> -->
         </v-btn>
 
         <v-btn
-            variant="outlined"
+            variant="text"
             color="default"
             size="small"
             class="mr-1 text-caption"
             density="comfortable"
+            title="Share"
+            icon
+            @click="emit('shareClick')"
+        >
+            <icon-share bold />
+        </v-btn>
+
+        <v-btn
+            variant="text"
+            color="default"
+            size="small"
+            class="mr-1 text-caption"
+            density="comfortable"
+            title="More Actions"
             icon
         >
             <v-icon icon="mdi-dots-horizontal" />
diff --git a/web/satellite/vuetify-poc/src/components/BrowserTableComponent.vue b/web/satellite/vuetify-poc/src/components/BrowserTableComponent.vue
index 7ee58a0eb080..09796bff2e9b 100644
--- a/web/satellite/vuetify-poc/src/components/BrowserTableComponent.vue
+++ b/web/satellite/vuetify-poc/src/components/BrowserTableComponent.vue
@@ -2,7 +2,7 @@
 // See LICENSE for copying information.
 
 <template>
-    <v-card variant="flat" :border="true" rounded="xlg">
+    <v-card variant="outlined" :border="true" rounded="xlg">
         <v-text-field
             v-model="search"
             label="Search"
@@ -39,7 +39,7 @@
                 <v-data-table-row v-bind="rowProps">
                     <template #item.name="{ item }: ItemSlotProps">
                         <v-btn
-                            class="rounded-lg w-100 px-1 justify-start font-weight-bold"
+                            class="rounded-lg w-100 px-1 ml-n1 justify-start font-weight-bold"
                             variant="text"
                             height="40"
                             color="default"
diff --git a/web/satellite/vuetify-poc/src/components/BucketsDataTable.vue b/web/satellite/vuetify-poc/src/components/BucketsDataTable.vue
index b450c760870e..a8d833960a63 100644
--- a/web/satellite/vuetify-poc/src/components/BucketsDataTable.vue
+++ b/web/satellite/vuetify-poc/src/components/BucketsDataTable.vue
@@ -2,7 +2,7 @@
 // See LICENSE for copying information.
 
 <template>
-    <v-card variant="flat" :border="true" rounded="xlg">
+    <v-card variant="outlined" :border="true" rounded="xlg">
         <v-text-field
             v-model="search"
             label="Search"
@@ -25,6 +25,7 @@
             :search="search"
             :loading="areBucketsFetching"
             :items-length="page.totalCount"
+            items-per-page-text="Buckets per page"
             :items-per-page-options="tableSizeOptions(page.totalCount)"
             no-data-text="No buckets found"
             hover
@@ -34,7 +35,7 @@
         >
             <template #item.name="{ item }">
                 <v-btn
-                    class="rounded-lg w-100 px-1 justify-start"
+                    class="rounded-lg w-100 px-1 ml-n1 justify-start"
                     variant="text"
                     height="40"
                     color="default"
@@ -91,7 +92,7 @@
                                 <icon-bucket size="18" />
                             </template>
                             <v-list-item-title class="ml-3">
-                                View Bucket Details
+                                Bucket Details
                             </v-list-item-title>
                         </v-list-item>
                         <v-list-item rounded-lg link @click="() => showShareBucketDialog(item.raw.name)">
diff --git a/web/satellite/vuetify-poc/src/components/CardStatsComponent.vue b/web/satellite/vuetify-poc/src/components/CardStatsComponent.vue
index 9901f35701c2..c0f466c8290a 100644
--- a/web/satellite/vuetify-poc/src/components/CardStatsComponent.vue
+++ b/web/satellite/vuetify-poc/src/components/CardStatsComponent.vue
@@ -2,7 +2,7 @@
 // See LICENSE for copying information.
 
 <template>
-    <v-card :subtitle="subtitle" variant="flat" :border="true" rounded="xlg" :to="to">
+    <v-card :subtitle="subtitle" variant="outlined" :border="true" rounded="xlg" :to="to">
         <template #title>
             <v-card-title class="d-flex align-center">
                 <component :is="iconComponent" v-if="icon" v-bind="iconProps" class="mr-2" width="16" height="16" />
@@ -10,7 +10,7 @@
             </v-card-title>
         </template>
         <v-card-text>
-            <v-chip rounded color="default" variant="outlined" class="font-weight-bold">{{ data }}</v-chip>
+            <v-chip rounded color="default" variant="tonal" class="font-weight-bold">{{ data }}</v-chip>
         </v-card-text>
     </v-card>
 </template>
diff --git a/web/satellite/vuetify-poc/src/components/FileCard.vue b/web/satellite/vuetify-poc/src/components/FileCard.vue
index 1009abd9546e..9fe44f7ae725 100644
--- a/web/satellite/vuetify-poc/src/components/FileCard.vue
+++ b/web/satellite/vuetify-poc/src/components/FileCard.vue
@@ -2,52 +2,52 @@
 // See LICENSE for copying information.
 
 <template>
-    <v-card variant="flat" :border="true" rounded="xlg">
+    <v-card variant="outlined" rounded="lg">
         <div class="h-100 d-flex flex-column justify-space-between">
-            <v-img
-                v-if="objectPreviewUrl && previewType === PreviewType.Image"
-                :src="objectPreviewUrl"
-                alt="preview"
-                height="200px"
-                cover
-                @click="emit('previewClick', item.browserObject)"
-            />
-            <div
-                v-else
-                class="d-flex flex-column justify-center align-center file-icon-container"
-                @click="emit('previewClick', item.browserObject)"
-            >
-                <img
-                    :src="item.typeInfo.icon"
-                    :alt="item.typeInfo.title + 'icon'"
-                    :aria-roledescription="item.typeInfo.title + 'icon'"
-                    height="100"
+            <a role="button" class="h-100" @click="emit('previewClick', item.browserObject)">
+                <v-img
+                    v-if="objectPreviewUrl && previewType === PreviewType.Image"
+                    :src="objectPreviewUrl"
+                    class="bg-light card-preview-img h-100"
+                    alt="preview"
+                    :aspect-ratio="1/1"
+                    cover
+                />
+                <div
+                    v-else
+                    class="d-flex h-100 bg-light flex-column justify-center align-center file-icon-container card-preview-icon"
+                    :aspect-ratio="1/1"
                 >
-            </div>
-
-            <v-card-item>
+                    <img
+                        :src="item.typeInfo.icon"
+                        :alt="item.typeInfo.title + 'icon'"
+                        :aria-roledescription="item.typeInfo.title + 'icon'"
+                        height="52"
+                    >
+                </div>
+            </a>
+
+            <browser-row-actions
+                class="pl-3 pt-3"
+                :file="item.browserObject"
+                align="left"
+                @preview-click="emit('previewClick', item.browserObject)"
+                @delete-file-click="emit('deleteFileClick', item.browserObject)"
+                @share-click="emit('shareClick', item.browserObject)"
+            />
+            <v-card-item class="pt-0">
                 <v-card-title>
-                    <a class="link" @click="emit('previewClick', item.browserObject)">
+                    <small :title="item.browserObject.Key">
                         {{ item.browserObject.Key }}
-                    </a>
+                    </small>
                 </v-card-title>
-                <v-card-subtitle>
+                <!-- <v-card-subtitle class="text-caption">
                     {{ item.browserObject.type === 'folder' ? '&nbsp;': getFormattedSize(item.browserObject) }}
-                </v-card-subtitle>
-                <v-card-subtitle>
+                </v-card-subtitle> -->
+                <v-card-subtitle class="text-caption">
                     {{ item.browserObject.type === 'folder' ? '&nbsp;': getFormattedDate(item.browserObject) }}
                 </v-card-subtitle>
             </v-card-item>
-            <v-card-text class="flex-grow-0">
-                <v-divider class="mt-1 mb-4" />
-                <browser-row-actions
-                    :file="item.browserObject"
-                    align="left"
-                    @preview-click="emit('previewClick', item.browserObject)"
-                    @delete-file-click="emit('deleteFileClick', item.browserObject)"
-                    @share-click="emit('shareClick', item.browserObject)"
-                />
-            </v-card-text>
         </div>
     </v-card>
 </template>
@@ -157,10 +157,4 @@ function getFormattedDate(file: BrowserObject): string {
     const date = file.LastModified;
     return date.toLocaleDateString('en-GB', { day: 'numeric', month: 'short', year: 'numeric' });
 }
-</script>
-
-<style scoped lang="scss">
-.file-icon-container {
-    height: 200px;
-}
-</style>
\ No newline at end of file
+</script>
\ No newline at end of file
diff --git a/web/satellite/vuetify-poc/src/components/ProjectCard.vue b/web/satellite/vuetify-poc/src/components/ProjectCard.vue
index b9603f4df965..3a96cecd9acc 100644
--- a/web/satellite/vuetify-poc/src/components/ProjectCard.vue
+++ b/web/satellite/vuetify-poc/src/components/ProjectCard.vue
@@ -2,7 +2,7 @@
 // See LICENSE for copying information.
 
 <template>
-    <v-card variant="flat" :border="true" rounded="xlg">
+    <v-card variant="outlined" :border="true" rounded="xlg">
         <div class="h-100 d-flex flex-column justify-space-between">
             <v-card-item>
                 <div class="d-flex justify-space-between">
diff --git a/web/satellite/vuetify-poc/src/components/ProjectsTableComponent.vue b/web/satellite/vuetify-poc/src/components/ProjectsTableComponent.vue
index 27509bf956b4..2b460097f88f 100644
--- a/web/satellite/vuetify-poc/src/components/ProjectsTableComponent.vue
+++ b/web/satellite/vuetify-poc/src/components/ProjectsTableComponent.vue
@@ -2,7 +2,7 @@
 // See LICENSE for copying information.
 
 <template>
-    <v-card variant="flat" :border="true" class="rounded-xlg">
+    <v-card variant="outlined" :border="true" class="rounded-xlg">
         <v-text-field
             v-model="search"
             label="Search"
@@ -21,6 +21,8 @@
             :sort-by="sortBy"
             :headers="headers"
             :items="items"
+            items-per-page="10"
+            items-per-page-text="Projects per page"
             :search="search"
             no-data-text="No results found"
             item-key="path"
@@ -28,7 +30,7 @@
             <template #item.name="{ item }">
                 <v-btn
                     v-if="item.raw.role !== ProjectRole.Invited"
-                    class="rounded-lg pl-1 pr-4 justify-start font-weight-bold"
+                    class="rounded-lg pl-1 pr-4 ml-n1 justify-start font-weight-bold"
                     variant="text"
                     height="40"
                     color="default"
@@ -38,7 +40,7 @@
                     <img src="../assets/icon-project-tonal.svg" alt="Project" class="mr-3">
                     {{ item.raw.name }}
                 </v-btn>
-                <div v-else class="pl-1 pr-4 d-flex align-center justify-start font-weight-bold">
+                <div v-else class="pl-1 pr-4 ml-n1 d-flex align-center justify-start font-weight-bold">
                     <img src="../assets/icon-project-tonal.svg" alt="Project" class="mr-3">
                     <span class="text-no-wrap">{{ item.raw.name }}</span>
                 </div>
diff --git a/web/satellite/vuetify-poc/src/components/TeamTableComponent.vue b/web/satellite/vuetify-poc/src/components/TeamTableComponent.vue
index 0713d34d292b..badfe1e430fd 100644
--- a/web/satellite/vuetify-poc/src/components/TeamTableComponent.vue
+++ b/web/satellite/vuetify-poc/src/components/TeamTableComponent.vue
@@ -2,7 +2,7 @@
 // See LICENSE for copying information.
 
 <template>
-    <v-card variant="flat" :border="true" rounded="xlg">
+    <v-card variant="outlined" :border="true" rounded="xlg">
         <v-row align="center" class="ma-0">
             <v-col v-if="selectedMembers.length" class="pa-0" cols="auto">
                 <v-btn
@@ -41,6 +41,7 @@
             :items="projectMembers"
             :loading="isLoading"
             :items-length="page.totalCount"
+            items-per-page-text="Accounts per page"
             :items-per-page-options="tableSizeOptions(page.totalCount)"
             no-data-text="No results found"
             item-value="email"
@@ -74,7 +75,7 @@
                 >
                     <v-icon icon="mdi-dots-horizontal" />
                     <v-menu activator="parent">
-                        <v-list class="py-2">
+                        <v-list class="pa-1">
                             <v-list-item
                                 density="comfortable"
                                 link
diff --git a/web/satellite/vuetify-poc/src/components/TokenTransactionsTableComponent.vue b/web/satellite/vuetify-poc/src/components/TokenTransactionsTableComponent.vue
index 59deab3031eb..6a4051bd7481 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 :border="true" rounded="xlg">
+    <v-card :border="true" rounded="xlg" variant="flat">
         <v-text-field
             v-model="search"
             label="Search"
diff --git a/web/satellite/vuetify-poc/src/components/UsageProgressComponent.vue b/web/satellite/vuetify-poc/src/components/UsageProgressComponent.vue
index 4b5583bba4c3..561543f2edaa 100644
--- a/web/satellite/vuetify-poc/src/components/UsageProgressComponent.vue
+++ b/web/satellite/vuetify-poc/src/components/UsageProgressComponent.vue
@@ -2,10 +2,10 @@
 // See LICENSE for copying information.
 
 <template>
-    <v-card :title="title" variant="flat" :border="true" rounded="xlg">
+    <v-card :title="title" variant="outlined" :border="true" rounded="xlg">
         <template #title>
             <v-card-title class="d-flex align-center">
-                <component :is="iconComponents[icon]" v-if="icon" class="mr-2" width="16" height="16" />
+                <component :is="iconComponents[icon]" v-if="icon" class="mr-2" width="16" height="16" bold />
                 {{ title }}
             </v-card-title>
         </template>
@@ -20,7 +20,7 @@
                 </v-col>
                 <v-col>
                     <h4 class="text-right">{{ available }}</h4>
-                    <p class="text-cursor-pointer text-right text-medium-emphasis" @click="emit('ctaClick')"><small>{{ cta }}</small></p>
+                    <p class="text-right text-medium-emphasis"><a class="link" role="button" @click="emit('ctaClick')"><small>{{ cta }}</small></a></p>
                 </v-col>
             </v-row>
         </v-card-item>
diff --git a/web/satellite/vuetify-poc/src/components/billing/UsageAndChargesItemComponent.vue b/web/satellite/vuetify-poc/src/components/billing/UsageAndChargesItemComponent.vue
index 6fe1d70395dd..c173765f7d2a 100644
--- a/web/satellite/vuetify-poc/src/components/billing/UsageAndChargesItemComponent.vue
+++ b/web/satellite/vuetify-poc/src/components/billing/UsageAndChargesItemComponent.vue
@@ -21,8 +21,8 @@
                         </v-col>
                     </v-row>
                 </v-expansion-panel-title>
-                <v-expansion-panel-text>
-                    <v-table density="comfortable">
+                <v-expansion-panel-text class="pt-4 pb-2">
+                    <v-table density="comfortable" class="border rounded-lg">
                         <thead>
                             <tr>
                                 <th class="text-left">
@@ -40,30 +40,53 @@
                             </tr>
                         </thead>
                         <tbody>
-                            <tr
-                                v-for="[partner, charge] in partnerCharges"
-                                :key="partner"
-                            >
+                            <tr v-for="[partner, charge] in partnerCharges" :key="partner">
                                 <td>
                                     <p>Storage <span class="d-none d-md-inline">({{ getStoragePrice(partner) }} per Gigabyte-Month)</span></p>
-                                    <p>Download <span class="d-none d-md-inline">({{ getEgressPrice(partner) }} per GB)</span></p>
-                                    <p>Segments <span class="d-none d-md-inline">({{ getSegmentPrice(partner) }} per Segment-Month)</span></p>
                                 </td>
-                                <td class="d-none d-md-table-cell"><p v-for="i in 3" :key="i">{{ getPeriod(charge) }}</p></td>
+                                <td class="d-none d-md-table-cell">
+                                    <p>{{ getPeriod(charge) }}</p>
+                                </td>
                                 <td class="d-none d-sm-table-cell">
                                     <p>{{ getStorageFormatted(charge) }} Gigabyte-month</p>
-                                    <p>{{ getEgressAmountAndDimension(charge) }}</p>
-                                    <p>{{ getSegmentCountFormatted(charge) }} Segment-month</p>
                                 </td>
                                 <td class="text-right">
                                     <p>{{ centsToDollars(charge.storagePrice) }}</p>
+                                </td>
+                            </tr>
+
+                            <tr v-for="[partner, charge] in partnerCharges" :key="partner">
+                                <td>
+                                    <p>Download <span class="d-none d-md-inline">({{ getEgressPrice(partner) }} per GB)</span></p>
+                                </td>
+                                <td class="d-none d-md-table-cell">
+                                    <p>{{ getPeriod(charge) }}</p>
+                                </td>
+                                <td class="d-none d-sm-table-cell">
+                                    <p>{{ getEgressAmountAndDimension(charge) }}</p>
+                                </td>
+                                <td class="text-right">
                                     <p>{{ centsToDollars(charge.egressPrice) }}</p>
+                                </td>
+                            </tr>
+
+                            <tr v-for="[partner, charge] in partnerCharges" :key="partner">
+                                <td>
+                                    <p>Segments <span class="d-none d-md-inline">({{ getSegmentPrice(partner) }} per Segment-Month)</span></p>
+                                </td>
+                                <td class="d-none d-md-table-cell">
+                                    <p>{{ getPeriod(charge) }}</p>
+                                </td>
+                                <td class="d-none d-sm-table-cell">
+                                    <p>{{ getSegmentCountFormatted(charge) }} Segment-month</p>
+                                </td>
+                                <td class="text-right">
                                     <p>{{ centsToDollars(charge.segmentPrice) }}</p>
                                 </td>
                             </tr>
                         </tbody>
                     </v-table>
-                    <v-btn class="mt-4 ml-4" variant="outlined" color="default" size="small" @click="downloadReport">
+                    <v-btn class="mt-4" variant="outlined" color="default" size="small" @click="downloadReport">
                         Download Report
                     </v-btn>
                 </v-expansion-panel-text>
diff --git a/web/satellite/vuetify-poc/src/components/dialogs/BucketDetailsDialog.vue b/web/satellite/vuetify-poc/src/components/dialogs/BucketDetailsDialog.vue
index 9c63ad57817c..fc297226f975 100644
--- a/web/satellite/vuetify-poc/src/components/dialogs/BucketDetailsDialog.vue
+++ b/web/satellite/vuetify-poc/src/components/dialogs/BucketDetailsDialog.vue
@@ -40,46 +40,26 @@
             <v-divider />
 
             <v-card-item class="pl-7">
-                <template #prepend>
-                    <img class="d-block" src="@poc/assets/icon-bookmark-circle.svg" alt="bookmark">
-                </template>
-
                 <h4>Name</h4>
                 <p>{{ bucket.name }}</p>
             </v-card-item>
 
             <v-card-item class="pl-7">
-                <template #prepend>
-                    <img class="d-block" src="@poc/assets/icon-file-circle.svg" alt="file">
-                </template>
-
-                <h4>Objects</h4>
+                <h4>Files</h4>
                 <p>{{ bucket.objectCount.toLocaleString() }}</p>
             </v-card-item>
 
             <v-card-item class="pl-7">
-                <template #prepend>
-                    <img class="d-block" src="@poc/assets/icon-globe-circle.svg" alt="globe">
-                </template>
-
                 <h4>Segments</h4>
                 <p>{{ bucket.segmentCount.toLocaleString() }}</p>
             </v-card-item>
 
             <v-card-item class="pl-7">
-                <template #prepend>
-                    <img class="d-block" src="@poc/assets/icon-calendar-circle.svg" alt="calendar">
-                </template>
-
                 <h4>Date Created</h4>
                 <p>{{ bucket.since.toUTCString() }}</p>
             </v-card-item>
 
             <v-card-item class="mb-4 pl-7">
-                <template #prepend>
-                    <img class="d-block" src="@poc/assets/icon-clock-circle.svg" alt="clock">
-                </template>
-
                 <h4>Last Updated</h4>
                 <p>{{ bucket.before.toUTCString() }}</p>
             </v-card-item>
diff --git a/web/satellite/vuetify-poc/src/components/dialogs/FilePreviewDialog.vue b/web/satellite/vuetify-poc/src/components/dialogs/FilePreviewDialog.vue
index 8ffe68b2b669..e573b2cb1042 100644
--- a/web/satellite/vuetify-poc/src/components/dialogs/FilePreviewDialog.vue
+++ b/web/satellite/vuetify-poc/src/components/dialogs/FilePreviewDialog.vue
@@ -15,7 +15,7 @@
                 color="rgba(0, 0, 0, 0.3)"
                 theme="dark"
             >
-                <v-toolbar-title>
+                <v-toolbar-title class="text-subtitle-2">
                     {{ fileName }}
                 </v-toolbar-title>
                 <template #append>
diff --git a/web/satellite/vuetify-poc/src/components/dialogs/ShareDialog.vue b/web/satellite/vuetify-poc/src/components/dialogs/ShareDialog.vue
index 81c12b98e346..4d9be3bfbac6 100644
--- a/web/satellite/vuetify-poc/src/components/dialogs/ShareDialog.vue
+++ b/web/satellite/vuetify-poc/src/components/dialogs/ShareDialog.vue
@@ -40,13 +40,12 @@
             <div class="pa-7 share-dialog__content" :class="{ 'share-dialog__content--loading': isLoading }">
                 <v-row>
                     <v-col cols="12">
-                        <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 type="info" variant="tonal">
+                            Public link sharing. Allows anyone with the link to view 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>
+                        <p class="text-subtitle-2 font-weight-bold mb-3">Share via</p>
                         <v-chip-group class="ma-n2">
                             <v-chip
                                 v-for="opt in ShareOptions"
@@ -67,8 +66,8 @@
                     </v-col>
 
                     <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" rounded="lg" hide-details="auto" rows="1" auto-grow no-resize flat readonly class="text-body-2">
+                        <p class="text-subtitle-2 font-weight-bold mb-2">Shared link</p>
+                        <v-textarea :model-value="link" variant="solo-filled" rounded="lg" hide-details="auto" rows="1" auto-grow no-resize flat readonly class="text-caption">
                             <template #append-inner>
                                 <input-copy-button :value="link" />
                             </template>
@@ -83,7 +82,7 @@
                 <v-row>
                     <v-col>
                         <v-btn variant="outlined" color="default" block :disabled="isLoading" @click="model = false">
-                            Cancel
+                            Close
                         </v-btn>
                     </v-col>
                     <v-col>
diff --git a/web/satellite/vuetify-poc/src/components/dialogs/filePreviewComponents/CSVFilePreview.vue b/web/satellite/vuetify-poc/src/components/dialogs/filePreviewComponents/CSVFilePreview.vue
index 4f9e7dfbce5b..a52c47ac10c2 100644
--- a/web/satellite/vuetify-poc/src/components/dialogs/filePreviewComponents/CSVFilePreview.vue
+++ b/web/satellite/vuetify-poc/src/components/dialogs/filePreviewComponents/CSVFilePreview.vue
@@ -2,7 +2,7 @@
 // See LICENSE for copying information.
 
 <template>
-    <div v-if="isLoading" class="w-100 h-100 d-flex align-center justify-center mt-n16">
+    <div v-if="isLoading" class="w-100 h-100 d-flex align-center justify-center">
         <v-progress-circular indeterminate />
     </div>
     <v-container v-else-if="!isError" class="w-100 max-h-100 overflow-auto">
diff --git a/web/satellite/vuetify-poc/src/components/dialogs/filePreviewComponents/FilePreviewItem.vue b/web/satellite/vuetify-poc/src/components/dialogs/filePreviewComponents/FilePreviewItem.vue
index 2c7ad935b78c..270201073dea 100644
--- a/web/satellite/vuetify-poc/src/components/dialogs/filePreviewComponents/FilePreviewItem.vue
+++ b/web/satellite/vuetify-poc/src/components/dialogs/filePreviewComponents/FilePreviewItem.vue
@@ -2,7 +2,7 @@
 // See LICENSE for copying information.
 
 <template>
-    <v-container v-if="isLoading" class="fill-height flex-column justify-center align-center mt-n16">
+    <v-container v-if="isLoading" class="fill-height flex-column justify-center align-center">
         <v-progress-circular indeterminate />
     </v-container>
     <text-file-preview v-else-if="previewType === PreviewType.Text" :src="objectPreviewUrl">
diff --git a/web/satellite/vuetify-poc/src/components/dialogs/filePreviewComponents/FilePreviewPlaceholder.vue b/web/satellite/vuetify-poc/src/components/dialogs/filePreviewComponents/FilePreviewPlaceholder.vue
index 488a52d4caa1..7f33ca782263 100644
--- a/web/satellite/vuetify-poc/src/components/dialogs/filePreviewComponents/FilePreviewPlaceholder.vue
+++ b/web/satellite/vuetify-poc/src/components/dialogs/filePreviewComponents/FilePreviewPlaceholder.vue
@@ -2,7 +2,7 @@
 // See LICENSE for copying information.
 
 <template>
-    <div class="h-100 w-100 mt-n16 d-flex flex-column align-center justify-center">
+    <div class="h-100 w-100 d-flex flex-column align-center justify-center">
         <p class="mb-5">{{ file?.Key || '' }}</p>
         <p class="text-h5 mb-5 font-weight-bold">No preview available</p>
         <v-btn
diff --git a/web/satellite/vuetify-poc/src/components/dialogs/filePreviewComponents/TextFilePreview.vue b/web/satellite/vuetify-poc/src/components/dialogs/filePreviewComponents/TextFilePreview.vue
index 4d3bfda6428a..8a3d747e5172 100644
--- a/web/satellite/vuetify-poc/src/components/dialogs/filePreviewComponents/TextFilePreview.vue
+++ b/web/satellite/vuetify-poc/src/components/dialogs/filePreviewComponents/TextFilePreview.vue
@@ -10,7 +10,7 @@
             :theme="isDark ? 'dark' : 'light'"
             :color="isDark ? 'rgba(0, 0, 0, 0.3)' : undefined"
             :border="isDark"
-            class="w-100 pa-4 mx-auto break-word"
+            class="w-100 pa-7 rounded-lg mx-auto break-word"
             max-width="calc(100% - 144px)"
             min-height="100%"
         >
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 f9f8162020be..98895af4bc82 100644
--- a/web/satellite/vuetify-poc/src/components/dialogs/upgradeAccountFlow/InfoBullet.vue
+++ b/web/satellite/vuetify-poc/src/components/dialogs/upgradeAccountFlow/InfoBullet.vue
@@ -10,19 +10,22 @@
                     color="default"
                     icon="mdi-check-circle-outline"
                     size="small"
-                    class="mr-3 text-disabled"
+                    class="text-disabled pl-2 mr-n3"
                 />
                 <v-icon
                     v-else
                     color="primary"
                     icon="mdi-check-circle-outline"
                     size="small"
-                    class="mr-3 opacity-100"
+                    class="opacity-100 pl-2 mr-n3"
                 />
             </template>
             <v-list-item-title>
                 {{ title }}
-                <v-tooltip v-if="$slots.moreInfo" max-width="200px" location="top" activator="parent">
+                <v-tooltip v-if="$slots.moreInfo" max-width="200px" location="top" activator="props">
+                    <template #activator="{ props }">
+                        <v-icon v-bind="props" size="16" icon="mdi-information-outline" />
+                    </template>
                     <slot name="moreInfo" />
                 </v-tooltip>
             </v-list-item-title>
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 eca3eee396ba..8df543469132 100644
--- a/web/satellite/vuetify-poc/src/components/dialogs/upgradeAccountFlow/UpgradeInfoStep.vue
+++ b/web/satellite/vuetify-poc/src/components/dialogs/upgradeAccountFlow/UpgradeInfoStep.vue
@@ -41,13 +41,14 @@
                 </InfoBullet>
                 <InfoBullet is-pro title="Segments" :info="segmentInfo">
                     <template #moreInfo>
+                        Read more about segment fees in the
                         <a
                             class="link"
-                            href="https://docs.storj.io/dcs/billing-payment-and-accounts-1/pricing/billing-and-payment"
+                            href="https://docs.storj.io/dcs/pricing#per-segment-fee"
                             target="_blank"
                             rel="noopener noreferrer"
                         >
-                            Learn more about segments
+                            documentation
                         </a>
                     </template>
                 </InfoBullet>
diff --git a/web/satellite/vuetify-poc/src/components/icons/IconRegion.vue b/web/satellite/vuetify-poc/src/components/icons/IconSatellite.vue
similarity index 100%
rename from web/satellite/vuetify-poc/src/components/icons/IconRegion.vue
rename to web/satellite/vuetify-poc/src/components/icons/IconSatellite.vue
diff --git a/web/satellite/vuetify-poc/src/layouts/default/AppBar.vue b/web/satellite/vuetify-poc/src/layouts/default/AppBar.vue
index f912f1da25fe..0fda81ae9ad6 100644
--- a/web/satellite/vuetify-poc/src/layouts/default/AppBar.vue
+++ b/web/satellite/vuetify-poc/src/layouts/default/AppBar.vue
@@ -118,9 +118,9 @@
 
                     <v-list-item class="py-2 rounded-lg">
                         <template #prepend>
-                            <icon-region size="18" />
+                            <icon-satellite size="18" />
                         </template>
-                        <v-list-item-title class="text-body-2 ml-3">Region</v-list-item-title>
+                        <v-list-item-title class="text-body-2 ml-3">Satellite</v-list-item-title>
                         <v-list-item-subtitle class="ml-3">
                             {{ satelliteName }}
                         </v-list-item-subtitle>
@@ -201,7 +201,7 @@ import IconCard from '@poc/components/icons/IconCard.vue';
 import IconUpgrade from '@poc/components/icons/IconUpgrade.vue';
 import IconSettings from '@poc/components/icons/IconSettings.vue';
 import IconLogout from '@poc/components/icons/IconLogout.vue';
-import IconRegion from '@poc/components/icons/IconRegion.vue';
+import IconSatellite from '@poc/components/icons/IconSatellite.vue';
 
 const activeTheme = ref<number>(0);
 const theme = useTheme();
diff --git a/web/satellite/vuetify-poc/src/plugins/theme.ts b/web/satellite/vuetify-poc/src/plugins/theme.ts
index 446a94a4243c..8745af4277d7 100644
--- a/web/satellite/vuetify-poc/src/plugins/theme.ts
+++ b/web/satellite/vuetify-poc/src/plugins/theme.ts
@@ -19,6 +19,7 @@ export const THEME_OPTIONS: ThemeOptions = {
                 warning: '#FF7F00',
                 error: '#FF0149',
                 purple: '#7B61FF',
+                blue7: '#090920',
                 blue6:  '#091c45',
                 blue5: '#0218A7',
                 blue4: '#0059D0',
@@ -40,6 +41,7 @@ export const THEME_OPTIONS: ThemeOptions = {
                 error: '#FF0149',
                 surface: '#090920',
                 purple: '#A18EFF',
+                blue7: '#090920',
                 blue6:  '#091c45',
                 blue5: '#2196f3',
                 blue4: '#0059D0',
@@ -48,7 +50,6 @@ export const THEME_OPTIONS: ThemeOptions = {
                 yellow2: '#FFB701',
                 orange: '#FFA800',
                 warning: '#FF8A00',
-                // green: '#00B150',
                 green: '#00e366',
                 purple2: '#A18EFF',
             },
diff --git a/web/satellite/vuetify-poc/src/plugins/vuetify.ts b/web/satellite/vuetify-poc/src/plugins/vuetify.ts
index de5a8ed095c2..76b1b1db99b3 100644
--- a/web/satellite/vuetify-poc/src/plugins/vuetify.ts
+++ b/web/satellite/vuetify-poc/src/plugins/vuetify.ts
@@ -66,6 +66,7 @@ export default createVuetify({
         },
         VCheckbox: {
             color: 'primary',
+            class: 'ml-n1',
         },
         VAlert: {
             rounded: 'xlg',
@@ -73,8 +74,8 @@ export default createVuetify({
         VChip: {
             rounded: 'lg',
         },
-        // VTable: {
-        //     elevation: 0,
-        // },
+        VRadio: {
+            color: 'primary',
+        },
     },
 });
diff --git a/web/satellite/vuetify-poc/src/styles/styles.scss b/web/satellite/vuetify-poc/src/styles/styles.scss
index fd3288222081..1628b8adda2f 100644
--- a/web/satellite/vuetify-poc/src/styles/styles.scss
+++ b/web/satellite/vuetify-poc/src/styles/styles.scss
@@ -12,17 +12,26 @@ body {
   letter-spacing: -0.01em;
 }
 
+// Global theme
+.v-theme {
+  --v-medium-emphasis-opacity: 0.7;
+}
+
 // Light Theme
 .v-theme--light {
   --v-border-color: 0, 0, 0;
   --v-theme-overlay-multiplier: 0.75 !important;
   --v-border-opacity: 0.07 !important;
+  // --v-theme-on-background: var(--v-theme-blue6) !important;
+  --v-theme-on-background: var(--v-theme-blue7) !important;
+  --v-theme-on-surface: var(--v-theme-blue7) !important;
 }
 
 // Dark Theme
 .v-theme--dark {
   --v-theme-overlay-multiplier: 0.75 !important;
   --v-border-opacity: 0.07 !important;
+  --v-theme-on-surface-variant: 70,70,70 !important;
 }
 
 // Nav
@@ -75,10 +84,15 @@ body {
   border-color: #a9b0b979;
 }
 
+
 // Button focus style
 .v-btn:focus:active {
   box-shadow: currentColor 0px 0px 0px 1px, currentColor 0px 0px 0px 1px !important;
 }
+// Button focus style for tabs and toggles
+.v-tabs .v-btn:focus:active, .v-btn-group .v-btn:focus:active {
+  box-shadow: none !important;
+}
 
 // Button sizes
 .v-btn--size-default {
@@ -91,8 +105,7 @@ body {
   --v-btn-height: 48px;
 }
 
-
-// Menu border
+// Menu
 .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;
   box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 10px 10px !important;
@@ -109,6 +122,20 @@ body {
   font-weight: 700 !important;
 }
 
+// Select Input Menu
+.v-select__content {
+  box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 10px 10px !important;
+  border-radius: 8px !important;
+}
+.v-select__content .v-list {
+  padding: 4px;
+}
+
+// List
+.v-list {
+  padding: 4px;
+}
+
 // Card Light Theme
 .v-card.v-theme--light {
   border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity)) !important;
@@ -121,6 +148,9 @@ body {
   border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity)) !important;
   box-shadow: 0 4px 20px rgba(0,0,0,0.15);
 }
+.v-card--variant-flat {
+  box-shadow: none !important;
+}  
 
 // Cards Padding
 .v-card-item {
@@ -190,6 +220,11 @@ body {
   letter-spacing: 1px;
 }
 
+// Table Fonts
+table {
+  font-size: 14px;
+}
+
 // Table content
 .v-list-item__content {
   white-space: nowrap;
@@ -203,26 +238,38 @@ body {
 .v-data-table-footer {
   border-top: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
 }
-.v-data-table-footer .v-field__field {
-  height: 2.25rem;
-}
-.v-data-table-footer .v-field {
-  padding-right: 0.5rem;
-}
 .v-data-table-footer .v-field__input {
-  padding-top: 0;
-  font-size: 14px;
-  line-height: 1;
-}
-
-// Table Fonts
-table {
   font-size: 14px;
 }
 
 // Table Pagination
+.v-data-table-footer {
+  justify-content: space-between !important;
+  padding: 12px 18px !important;
+}
+.v-data-table-footer .v-field__outline__start, .v-data-table-footer .v-field__outline__end {
+  border-color: rgba(var(--v-theme-on-background),0.1) !important;
+}
 .v-data-table-footer__pagination .v-btn {
-  width: auto;
+  width: 2rem;
+  height: 2rem;
+  color: rgb(var(--v-theme-on-background)) !important;
+}
+.v-data-table-footer__items-per-page {
+  padding-inline-end: 8px !important;
+}
+.v-data-table-footer__items-per-page>span {
+  color: rgba(var(--v-theme-on-background),0.5);
+  padding-inline-end: 12px !important;
+  font-size: 13px;
+}
+.v-data-table-footer__info {
+  display: flex;
+  background: rgba(var(--v-theme-on-background),0.02);
+  color: rgba(var(--v-theme-on-background),0.5);
+  padding: 4px 16px !important;
+  border-radius: 40px;
+  font-size: 12px;
 }
 
 // Search styles
@@ -362,4 +409,59 @@ table {
 // Opacity
 .opacity-100 {
   opacity: 1 !important;
-}
\ No newline at end of file
+}
+
+// Light background
+.bg-light {
+  background-color: rgba(var(--v-theme-on-background), 0.02);
+}
+
+// Preview Dialog
+.preview-card {
+  background: rgb(9 9 9) !important;
+}
+
+// Preview Slider Buttons
+.v-window__controls .v-btn {
+  border: 1px solid rgba(var(--v-border-color), 0.1);
+  transition: all 0.1s ease-in-out;
+  background: transparent;
+}
+.v-window__controls .v-btn:hover {
+  border: 1px solid rgba(var(--v-border-color), 0.3);
+}
+
+// Card Preview Img
+.card-preview-img {
+  transition: transform 0.15s ease-in-out; 
+  border-bottom: 1px solid rgba(var(--v-theme-on-background), 0.02);
+}
+.card-preview-img:hover {
+  transform: scale(1.02);
+}
+
+// Card Preview Icon
+.card-preview-icon {
+  min-height: 240px;
+  border-bottom: 1px solid rgba(var(--v-theme-on-background), 0.02);
+}
+.card-preview-icon img {
+  border-radius: 10%;
+}
+.card-preview-icon, .card-preview-icon img {
+  transition: all 0.15s ease-in-out; 
+}
+.card-preview-icon:hover {
+  background: none;
+  border-bottom-color: rgba(var(--v-theme-on-background), 0.04);
+}
+.card-preview-icon:hover img {
+  transform: scale(1.3);
+  border-radius: 50%;
+}
+.v-theme--light .card-preview-icon:hover img {
+  background-color: rgb(var(--v-theme-blue6));
+}
+.v-theme--dark .card-preview-icon:hover img {
+  background-color: rgb(var(--v-theme-on-background));
+}
diff --git a/web/satellite/vuetify-poc/src/views/Billing.vue b/web/satellite/vuetify-poc/src/views/Billing.vue
index ca66d2219859..b0926bb769e6 100644
--- a/web/satellite/vuetify-poc/src/views/Billing.vue
+++ b/web/satellite/vuetify-poc/src/views/Billing.vue
@@ -15,7 +15,7 @@
             </v-col>
         </v-row>
 
-        <v-card variant="flat" :border="true" color="default" class="mt-2 mb-6 rounded">
+        <v-card variant="outlined" :border="true" color="default" class="mt-2 mb-6 rounded">
             <v-tabs
                 v-model="tab"
                 color="default"
@@ -53,7 +53,7 @@
                                 <div v-if="isLoading" class="pb-2 text-center">
                                     <v-progress-circular class="ma-0" color="primary" size="30" indeterminate />
                                 </div>
-                                <v-chip v-else rounded color="green" variant="outlined" class="font-weight-bold mb-2">
+                                <v-chip v-else rounded color="green" variant="tonal" class="font-weight-bold mb-2">
                                     {{ centsToDollars(priceSummary) }}
                                 </v-chip>
                                 <v-divider class="my-4" />
@@ -68,7 +68,7 @@
                                 <div v-if="isLoading" class="pb-2 text-center">
                                     <v-progress-circular class="ma-0" color="primary" size="30" indeterminate />
                                 </div>
-                                <v-chip v-else rounded color="green" variant="outlined" class="font-weight-bold mb-2">
+                                <v-chip v-else rounded color="green" variant="tonal" class="font-weight-bold mb-2">
                                     {{ formattedTokenBalance }}
                                 </v-chip>
                                 <v-divider class="my-4" />
@@ -85,6 +85,7 @@
                             class="d-flex align-center justify-center"
                             height="200"
                             rounded="xlg"
+                            variant="flat"
                         >
                             <v-progress-circular color="primary" size="48" indeterminate />
                         </v-card>
@@ -94,11 +95,12 @@
                             height="100%"
                             :subtitle="`${isCouponActive ? 'Active' : 'Expired'} / ${couponExpiration}`"
                             rounded="xlg"
+                            variant="flat"
                         >
                             <v-card-text>
                                 <v-chip
                                     :color="isCouponActive ? 'green' : 'error'"
-                                    variant="outlined"
+                                    variant="flat"
                                     class="font-weight-bold mb-2"
                                     rounded
                                 >
@@ -109,7 +111,7 @@
 
                                 <v-btn
                                     v-if="couponCodeBillingUIEnabled"
-                                    variant="outlined"
+                                    variant="flat"
                                     color="default"
                                     size="small"
                                     class="mr-2"
@@ -128,7 +130,7 @@
                             rounded="xlg"
                         >
                             <v-card-text>
-                                <v-chip rounded color="green" variant="outlined" class="font-weight-bold mb-2">
+                                <v-chip rounded color="green" variant="flat" class="font-weight-bold mb-2">
                                     No Coupon
                                 </v-chip>
 
@@ -151,7 +153,7 @@
 
                 <v-row>
                     <v-col>
-                        <v-card title="Detailed Usage Report" subtitle="Get a complete usage report for all your projects." border>
+                        <v-card title="Detailed Usage Report" subtitle="Get a complete usage report for all your projects." border variant="flat">
                             <v-card-text>
                                 <v-btn variant="outlined" color="default" size="small" @click="downloadReport">
                                     Download Report
diff --git a/web/satellite/vuetify-poc/src/views/Bucket.vue b/web/satellite/vuetify-poc/src/views/Bucket.vue
index a815cb5f55ab..0b19d231be1d 100644
--- a/web/satellite/vuetify-poc/src/views/Bucket.vue
+++ b/web/satellite/vuetify-poc/src/views/Bucket.vue
@@ -102,7 +102,7 @@
                                         Cards
                                     </v-btn>
                                 </template>
-                                Using cards will preview images, which will add up to your Download.
+                                Card view shows image previews using download bandwidth.
                             </v-tooltip>
                             <v-btn
                                 size="small"
diff --git a/web/satellite/vuetify-poc/src/views/Dashboard.vue b/web/satellite/vuetify-poc/src/views/Dashboard.vue
index e126adce33db..8868e00a99a9 100644
--- a/web/satellite/vuetify-poc/src/views/Dashboard.vue
+++ b/web/satellite/vuetify-poc/src/views/Dashboard.vue
@@ -2,7 +2,7 @@
 // See LICENSE for copying information.
 
 <template>
-    <v-container>
+    <v-container class="pb-10">
         <low-token-balance-banner
             v-if="isLowBalance && billingEnabled"
             cta-label="Go to billing"
@@ -95,7 +95,7 @@
 
         <v-row class="d-flex align-center justify-center mt-2">
             <v-col cols="12" md="6">
-                <v-card ref="chartContainer" class="pb-4" variant="flat" :border="true" rounded="xlg">
+                <v-card ref="chartContainer" class="pb-4" variant="outlined" :border="true" rounded="xlg">
                     <template #title>
                         <v-card-title class="d-flex align-center">
                             <IconCloud class="mr-2" width="16" height="16" />
@@ -113,7 +113,7 @@
                 </v-card>
             </v-col>
             <v-col cols="12" md="6">
-                <v-card class="pb-4" variant="flat" :border="true" rounded="xlg">
+                <v-card class="pb-4" variant="outlined" :border="true" rounded="xlg">
                     <template #title>
                         <v-card-title class="d-flex align-center justify-space-between">
                             <v-row class="ma-0 align-center">
@@ -121,15 +121,13 @@
                                 Download
                             </v-row>
                             <v-row class="ma-0 align-center justify-end">
-                                <v-badge dot inline color="#929fb1" />
-                                <v-card-text class="pa-0 mx-2 flex-0-0">Download</v-card-text>
                                 <v-tooltip width="250" location="bottom">
                                     <template #activator="{ props }">
-                                        <v-icon v-bind="props" size="20" icon="mdi-information-outline" />
+                                        <v-icon v-bind="props" size="16" icon="mdi-information-outline" />
                                     </template>
                                     <template #default>
                                         <p>
-                                            The most recent data points may change as traffic moves from "allocated" to "settled".
+                                            The most recent data may change as download moves from "allocated" to "settled".
                                             <a
                                                 class="link"
                                                 href="https://docs.storj.io/dcs/pricing#bandwidth-fee"
@@ -195,10 +193,12 @@
             </v-col>
         </v-row>
 
-        <v-col class="pa-0 mt-6" cols="12">
-            <v-card-title class="font-weight-bold pl-0">Buckets</v-card-title>
-            <buckets-data-table />
-        </v-col>
+        <v-row>
+            <v-col>
+                <v-card-title class="font-weight-bold pl-0">Buckets</v-card-title>
+                <buckets-data-table />
+            </v-col>
+        </v-row>
     </v-container>
 
     <edit-project-limit-dialog v-model="isEditLimitDialogShown" :limit-type="limitToChange" />
diff --git a/web/satellite/vuetify-poc/src/views/Login.vue b/web/satellite/vuetify-poc/src/views/Login.vue
index 03a53ea3cb37..87e4aaf3eaf0 100644
--- a/web/satellite/vuetify-poc/src/views/Login.vue
+++ b/web/satellite/vuetify-poc/src/views/Login.vue
@@ -5,8 +5,8 @@
     <v-container class="fill-height">
         <v-row align="top" justify="center">
             <v-col cols="12" sm="9" md="7" lg="5">
-                <v-card v-if="!isMFARequired" title="Log into your account" rounded="xlg" class="pa-2 pa-sm-7">
-                    <v-card-item>
+                <v-card v-if="!isMFARequired" title="Login to your Storj account" rounded="xlg" class="pa-2 pa-sm-7">
+                    <v-card-text>
                         <v-alert
                             v-if="captchaError"
                             variant="tonal"
@@ -14,6 +14,7 @@
                             text="HCaptcha is required"
                             rounded="lg"
                             density="comfortable"
+                            class="mt-2 mb-3"
                             border
                         />
                         <v-alert
@@ -24,6 +25,7 @@
                             :text="isActivatedError ? 'This account has already been verified.' : 'Account verified.'"
                             rounded="lg"
                             density="comfortable"
+                            class="mt-2 mb-3"
                             border
                         />
                         <v-alert
@@ -34,6 +36,7 @@
                             text="The invite link you used has expired or is invalid."
                             rounded="lg"
                             density="comfortable"
+                            class="mt-2 mb-3"
                             border
                         />
                         <v-alert
@@ -46,10 +49,9 @@
                             further instructions."
                             rounded="lg"
                             density="comfortable"
+                            class="mt-2 mb-3"
                             border
                         />
-                    </v-card-item>
-                    <v-card-text>
                         <v-form v-model="formValid" class="pt-4" @submit.prevent>
                             <v-select
                                 v-model="satellite"
diff --git a/web/satellite/vuetify-poc/src/views/PasswordReset.vue b/web/satellite/vuetify-poc/src/views/PasswordReset.vue
index 2333325b95d1..7082f43c95ce 100644
--- a/web/satellite/vuetify-poc/src/views/PasswordReset.vue
+++ b/web/satellite/vuetify-poc/src/views/PasswordReset.vue
@@ -14,11 +14,9 @@
                                 label="Satellite"
                                 :items="items"
                                 item-title="satellite"
-                                :hint="`Recommended for ${select.hint}.`"
-                                persistent-hint
                                 return-object
                                 chips
-                                class="mt-3 mb-5"
+                                class="mt-3 mb-2"
                             />
                             <v-text-field
                                 label="Email address"