From e22163cb8e7e5d9a4013e859d6ede0a38ed25992 Mon Sep 17 00:00:00 2001
From: Tome Boshevski <tome@storj.io>
Date: Thu, 21 Dec 2023 14:05:46 +0100
Subject: [PATCH] web/satellite/vuetify-poc: ui ux updates (#6612)

Updating:
Project Settings page
Edit Limits dialogs
Account Settings page
Add Storj Tokens dialog
Create New Bucket dialog
Dashboard
Buckets table
Browser Snackbar
Browser Card View
Stylesheet
---
 .../src/components/AccessTableComponent.vue   |   2 +-
 .../components/BrowserCardViewComponent.vue   | 223 +++++++++--------
 .../components/BrowserSnackbarComponent.vue   |   3 +-
 .../src/components/BucketsDataTable.vue       |   6 +-
 .../src/components/PasswordInputEyeIcons.vue  |   4 +-
 .../components/dialogs/CreateBucketDialog.vue |  21 +-
 .../dialogs/EditProjectLimitDialog.vue        |  18 +-
 .../accountSetupSteps/PersonalStep.vue        |   1 +
 .../upgradeAccountFlow/AddTokensStep.vue      |  18 +-
 .../UpgradeAccountDialog.vue                  |   2 +-
 .../src/components/icons/IconCirclePlus.vue   |   2 +-
 .../src/layouts/default/AppBar.vue            |   4 +-
 .../vuetify-poc/src/styles/styles.scss        |  19 +-
 .../vuetify-poc/src/views/AccountSettings.vue | 184 ++++++--------
 .../vuetify-poc/src/views/Billing.vue         |   4 +-
 .../vuetify-poc/src/views/Buckets.vue         |   2 +-
 .../vuetify-poc/src/views/Dashboard.vue       | 131 ++++++----
 .../vuetify-poc/src/views/ProjectSettings.vue | 234 +++++++++---------
 18 files changed, 446 insertions(+), 432 deletions(-)

diff --git a/web/satellite/vuetify-poc/src/components/AccessTableComponent.vue b/web/satellite/vuetify-poc/src/components/AccessTableComponent.vue
index 5d7ddc3b5c96..d41bb41bd795 100644
--- a/web/satellite/vuetify-poc/src/components/AccessTableComponent.vue
+++ b/web/satellite/vuetify-poc/src/components/AccessTableComponent.vue
@@ -116,7 +116,7 @@ const accessNameToDelete = ref<string>('');
 
 const headers = [
     {
-        title: 'Name',
+        title: 'Access Name',
         align: 'start',
         key: 'name',
     },
diff --git a/web/satellite/vuetify-poc/src/components/BrowserCardViewComponent.vue b/web/satellite/vuetify-poc/src/components/BrowserCardViewComponent.vue
index c3dfa14fd797..eeadf58c1363 100644
--- a/web/satellite/vuetify-poc/src/components/BrowserCardViewComponent.vue
+++ b/web/satellite/vuetify-poc/src/components/BrowserCardViewComponent.vue
@@ -2,66 +2,65 @@
 // See LICENSE for copying information.
 
 <template>
-    <v-row align="center" class="mb-3">
-        <v-col>
-            <v-text-field
-                v-model="search"
-                label="Search"
-                prepend-inner-icon="mdi-magnify"
-                single-line
-                variant="solo-filled"
-                flat
-                hide-details
-                clearable
-                density="compact"
-                rounded="lg"
-                @update:modelValue="analyticsStore.eventTriggered(AnalyticsEvent.SEARCH_BUCKETS)"
-            />
-        </v-col>
-        <v-col cols="auto">
-            <v-menu>
-                <template #activator="{ props: sortProps }">
-                    <v-btn
-                        variant="outlined"
-                        color="default"
-                        prepend-icon="mdi-sort"
-                        append-icon="mdi-chevron-down"
-                        v-bind="sortProps"
-                    >
-                        <span class="text-body-2">Sort by</span> <span class="ml-1 text-capitalize">{{ sortKey }}</span>
+    <v-card class="pa-2 mb-7">
+        <v-row align="center">
+            <v-col>
+                <v-text-field
+                    v-model="search"
+                    label="Search"
+                    prepend-inner-icon="mdi-magnify"
+                    single-line
+                    variant="solo-filled"
+                    flat
+                    hide-details
+                    clearable
+                    density="comfortable"
+                    rounded="lg"
+                    @update:modelValue="analyticsStore.eventTriggered(AnalyticsEvent.SEARCH_BUCKETS)"
+                />
+            </v-col>
+            <v-col cols="auto">
+                <v-menu>
+                    <template #activator="{ props: sortProps }">
+                        <v-btn
+                            variant="text"
+                            color="default"
+                            prepend-icon="mdi-sort"
+                            append-icon="mdi-chevron-down"
+                            v-bind="sortProps"
+                            class="mr-2"
+                        >
+                            <span class="text-body-2">Sort by</span> <span class="ml-1 text-capitalize">{{ sortKey }}</span>
+                        </v-btn>
+                    </template>
+                    <v-list>
+                        <v-list-item
+                            v-for="(key, index) in sortKeys"
+                            :key="index"
+                            :title="key"
+                            @click="() => sortKey = key.toLowerCase()"
+                        />
+                    </v-list>
+                </v-menu>
+                <v-btn-toggle
+                    v-model="sortOrder"
+                    density="comfortable"
+                    variant="outlined"
+                    color="default"
+                    rounded="xl"
+                    class="pa-1"
+                    mandatory
+                >
+                    <v-btn size="small" value="asc" title="Ascending" variant="text" rounded="xl">
+                        <v-icon>mdi-sort-ascending</v-icon>
                     </v-btn>
-                </template>
-                <v-list>
-                    <v-list-item
-                        v-for="(key, index) in sortKeys"
-                        :key="index"
-                        :title="key"
-                        @click="() => sortKey = key.toLowerCase()"
-                    />
-                </v-list>
-            </v-menu>
-        </v-col>
-
-        <v-col cols="auto">
-            <v-btn-toggle
-                v-model="sortOrder"
-                density="comfortable"
-                variant="outlined"
-                color="default"
-                rounded="xl"
-                class="pa-1"
-                border
-                mandatory
-            >
-                <v-btn size="small" value="asc" title="Ascending" variant="text" rounded="xl">
-                    <v-icon>mdi-sort-ascending</v-icon>
-                </v-btn>
-                <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>
-    </v-row>
+                    <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>
+        </v-row>
+    </v-card>
 
     <v-data-iterator
         :page="cursor.page"
@@ -72,7 +71,9 @@
         :loading="isFetching"
     >
         <template #no-data>
-            <div class="d-flex justify-center">No results found</div>
+            <div class="d-flex justify-center">
+                <p class="text-body-2">No data found.</p>
+            </div>
         </template>
 
         <template #default="fileProps">
@@ -90,56 +91,58 @@
         </template>
 
         <template #footer>
-            <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="outlined"
-                            color="default"
-                            append-icon="mdi-chevron-down"
-                            v-bind="limitProps"
-                        >
-                            {{ cursor.limit }}
-                        </v-btn>
-                    </template>
-                    <v-list>
-                        <v-list-item
-                            v-for="(number, index) in tableSizeOptions(totalObjectCount, true)"
-                            :key="index"
-                            :title="number.title"
-                            @click="() => onLimitChange(number.value)"
-                        />
-                    </v-list>
-                </v-menu>
-
-                <v-spacer />
-
-                <span class="mr-4 text-medium-emphasis">
-                    Page {{ cursor.page }} of {{ lastPage }}
-                </span>
-                <v-btn
-                    icon
-                    size="small"
-                    variant="outlined"
-                    color="default"
-                    :disabled="cursor.page === 1"
-                    @click="() => onPageChange(cursor.page - 1)"
-                >
-                    <v-icon>mdi-chevron-left</v-icon>
-                </v-btn>
-                <v-btn
-                    icon
-                    size="small"
-                    variant="outlined"
-                    color="default"
-                    class="ml-2"
-                    :disabled="cursor.page === lastPage"
-                    @click="() => onPageChange(cursor.page + 1)"
-                >
-                    <v-icon>mdi-chevron-right</v-icon>
-                </v-btn>
-            </div>
+            <v-card class="pa-2 my-6">
+                <div class="d-flex align-center">
+                    <v-menu>
+                        <template #activator="{ props: limitProps }">
+                            <v-btn
+                                variant="text"
+                                color="default"
+                                append-icon="mdi-chevron-down"
+                                v-bind="limitProps"
+                            >
+                                <span class="text-caption text-medium-emphasis mr-2">Items per page:</span>
+                                {{ cursor.limit }}
+                            </v-btn>
+                        </template>
+                        <v-list>
+                            <v-list-item
+                                v-for="(number, index) in tableSizeOptions(totalObjectCount, true)"
+                                :key="index"
+                                :title="number.title"
+                                @click="() => onLimitChange(number.value)"
+                            />
+                        </v-list>
+                    </v-menu>
+
+                    <v-spacer />
+
+                    <span class="mr-4 text-caption text-medium-emphasis">
+                        Page {{ cursor.page }} of {{ lastPage }}
+                    </span>
+                    <v-btn
+                        icon
+                        size="small"
+                        variant="text"
+                        color="default"
+                        :disabled="cursor.page === 1"
+                        @click="() => onPageChange(cursor.page - 1)"
+                    >
+                        <v-icon>mdi-chevron-left</v-icon>
+                    </v-btn>
+                    <v-btn
+                        icon
+                        size="small"
+                        variant="text"
+                        color="default"
+                        class="ml-2"
+                        :disabled="cursor.page === lastPage"
+                        @click="() => onPageChange(cursor.page + 1)"
+                    >
+                        <v-icon>mdi-chevron-right</v-icon>
+                    </v-btn>
+                </div>
+            </v-card>
         </template>
     </v-data-iterator>
     <file-preview-dialog v-model="previewDialog" />
diff --git a/web/satellite/vuetify-poc/src/components/BrowserSnackbarComponent.vue b/web/satellite/vuetify-poc/src/components/BrowserSnackbarComponent.vue
index c0e6d7ecb60d..01b85db93100 100644
--- a/web/satellite/vuetify-poc/src/components/BrowserSnackbarComponent.vue
+++ b/web/satellite/vuetify-poc/src/components/BrowserSnackbarComponent.vue
@@ -23,7 +23,7 @@
                         <v-expansion-panel-title color="">
                             <span>{{ statusLabel }}</span>
                             <template v-if="isClosable" #actions>
-                                <v-icon icon="mdi-close" @click="closeDialog" />
+                                <v-btn variant="outlined" color="default" size="x-small" icon="mdi-close" title="Close" @click="closeDialog" />
                             </template>
                         </v-expansion-panel-title>
                         <v-progress-linear
@@ -33,7 +33,6 @@
                             :model-value="progress"
                             height="6"
                             color="success"
-                            class="mt-1"
                         />
                         <v-expansion-panel-text v-if="!isClosable && objectsInProgress.length > 1">
                             <v-row justify="space-between" class="pt-2">
diff --git a/web/satellite/vuetify-poc/src/components/BucketsDataTable.vue b/web/satellite/vuetify-poc/src/components/BucketsDataTable.vue
index 35d2300c9fd0..d3913c9674b5 100644
--- a/web/satellite/vuetify-poc/src/components/BucketsDataTable.vue
+++ b/web/satellite/vuetify-poc/src/components/BucketsDataTable.vue
@@ -208,15 +208,15 @@ const isTableSortable = computed<boolean>(() => {
 const headers = computed<DataTableHeader[]>(() => {
     const hdrs: DataTableHeader[] = [
         {
-            title: 'Name',
+            title: 'Bucket',
             align: 'start',
             key: 'name',
             sortable: isTableSortable.value,
         },
-        { title: 'Storage', key: 'storage', sortable: isTableSortable.value },
-        { title: 'Download', key: 'egress', sortable: isTableSortable.value },
         { title: 'Files', key: 'objectCount', sortable: isTableSortable.value },
         { title: 'Segments', key: 'segmentCount', sortable: isTableSortable.value },
+        { title: 'Storage', key: 'storage', sortable: isTableSortable.value },
+        { title: 'Download', key: 'egress', sortable: isTableSortable.value },
         { title: 'Date Created', key: 'since', sortable: isTableSortable.value },
         { title: '', key: 'actions', width: '0', sortable: false },
     ];
diff --git a/web/satellite/vuetify-poc/src/components/PasswordInputEyeIcons.vue b/web/satellite/vuetify-poc/src/components/PasswordInputEyeIcons.vue
index e0e32547c4cf..6b5a752973c4 100644
--- a/web/satellite/vuetify-poc/src/components/PasswordInputEyeIcons.vue
+++ b/web/satellite/vuetify-poc/src/components/PasswordInputEyeIcons.vue
@@ -2,7 +2,7 @@
 // See LICENSE for copying information.
 
 <template>
-    <v-tooltip v-if="isVisible" :text="`Hide ${type}`" location="top">
+    <v-tooltip v-if="isVisible" :text="`Hide ${type}`" location="top" theme="dark">
         <template #activator="{ props }">
             <v-icon
                 v-bind="props"
@@ -11,7 +11,7 @@
             />
         </template>
     </v-tooltip>
-    <v-tooltip v-else :text="`Show ${type}`" location="top">
+    <v-tooltip v-else :text="`Show ${type}`" location="top" theme="dark">
         <template #activator="{ props }">
             <v-icon
                 v-bind="props"
diff --git a/web/satellite/vuetify-poc/src/components/dialogs/CreateBucketDialog.vue b/web/satellite/vuetify-poc/src/components/dialogs/CreateBucketDialog.vue
index 5f346e8e045d..2e3287113d9a 100644
--- a/web/satellite/vuetify-poc/src/components/dialogs/CreateBucketDialog.vue
+++ b/web/satellite/vuetify-poc/src/components/dialogs/CreateBucketDialog.vue
@@ -5,7 +5,7 @@
     <v-dialog
         v-model="model"
         width="auto"
-        min-width="400px"
+        min-width="320px"
         max-width="450px"
         transition="fade-transition"
     >
@@ -13,12 +13,21 @@
             <v-sheet>
                 <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"> -->
-                            Create New Bucket
-                        </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-bucket.svg" alt="Bucket icon">
+                        </v-sheet>
                     </template>
 
+                    <v-card-title class="font-weight-bold">
+                        <!-- <img src="../assets/icon-bucket-color.svg" alt="Bucket" width="40"> -->
+                        New Bucket
+                    </v-card-title>
+
                     <template #append>
                         <v-btn
                             icon="$close"
@@ -36,7 +45,7 @@
             <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>
+                        <p>Buckets are used to store and organize your files. Enter a bucket name using lowercase characters.</p>
                         <v-text-field
                             v-model="bucketName"
                             variant="outlined"
diff --git a/web/satellite/vuetify-poc/src/components/dialogs/EditProjectLimitDialog.vue b/web/satellite/vuetify-poc/src/components/dialogs/EditProjectLimitDialog.vue
index 5ce37140c1f5..9e220d131b38 100644
--- a/web/satellite/vuetify-poc/src/components/dialogs/EditProjectLimitDialog.vue
+++ b/web/satellite/vuetify-poc/src/components/dialogs/EditProjectLimitDialog.vue
@@ -31,11 +31,11 @@
             <v-form v-model="formValid" class="pa-7" @submit.prevent>
                 <v-row>
                     <v-col cols="6">
-                        <p class="text-subtitle-2 mb-1">Set {{ limitType }} Limit</p>
+                        <p class="text-subtitle-2 mb-2">Set {{ limitType }} Limit</p>
                         <v-text-field
                             class="edit-project-limit__text-field"
                             variant="outlined"
-                            density="compact"
+                            density="comfortable"
                             type="number"
                             :rules="rules"
                             :hide-details="false"
@@ -49,7 +49,7 @@
                                         <v-btn
                                             class="h-100 text-medium-emphasis"
                                             variant="text"
-                                            density="compact"
+                                            density="comfortable"
                                             color="default"
                                             :append-icon="isActive ? 'mdi-menu-up' : 'mdi-menu-down'"
                                             v-bind="slotProps"
@@ -68,11 +68,11 @@
                         </v-text-field>
                     </v-col>
                     <v-col cols="6">
-                        <p class="text-subtitle-2 mb-1">Available {{ limitType }}</p>
+                        <p class="text-subtitle-2 mb-2">Available {{ limitType }}</p>
                         <v-text-field
                             class="edit-project-limit__text-field"
                             variant="solo-filled"
-                            density="compact"
+                            density="comfortable"
                             flat
                             readonly
                             :model-value="availableUsageFormatted"
@@ -83,7 +83,7 @@
                                         <v-btn
                                             class="h-100 text-medium-emphasis"
                                             variant="text"
-                                            density="compact"
+                                            density="comfortable"
                                             color="default"
                                             :append-icon="isActive ? 'mdi-menu-up' : 'mdi-menu-down'"
                                             v-bind="slotProps"
@@ -103,7 +103,7 @@
                     </v-col>
 
                     <v-col cols="12">
-                        <v-card class="pa-3">
+                        <v-card class="pa-3 mt-n4" variant="flat">
                             <div class="d-flex mx-2 text-subtitle-2 font-weight-bold text-medium-emphasis">
                                 0 {{ activeMeasurement }}
                                 <v-spacer />
@@ -113,8 +113,10 @@
                                 min="0"
                                 :max="availableUsage"
                                 :step="Memory[activeMeasurement]"
-                                color="success"
+                                color="primary"
+                                track-color="default"
                                 :model-value="input"
+                                hide-details
                                 @update:model-value="updateInput"
                             />
                         </v-card>
diff --git a/web/satellite/vuetify-poc/src/components/dialogs/accountSetupSteps/PersonalStep.vue b/web/satellite/vuetify-poc/src/components/dialogs/accountSetupSteps/PersonalStep.vue
index 87235ea00c4f..002f416e19db 100644
--- a/web/satellite/vuetify-poc/src/components/dialogs/accountSetupSteps/PersonalStep.vue
+++ b/web/satellite/vuetify-poc/src/components/dialogs/accountSetupSteps/PersonalStep.vue
@@ -30,6 +30,7 @@
                         label="Use Case (optional)"
                         placeholder="Select your use case"
                         variant="outlined"
+                        class="mt-2"
                     />
                 </v-form>
             </v-col>
diff --git a/web/satellite/vuetify-poc/src/components/dialogs/upgradeAccountFlow/AddTokensStep.vue b/web/satellite/vuetify-poc/src/components/dialogs/upgradeAccountFlow/AddTokensStep.vue
index db97a3cbda1b..a8fe89b5e5c9 100644
--- a/web/satellite/vuetify-poc/src/components/dialogs/upgradeAccountFlow/AddTokensStep.vue
+++ b/web/satellite/vuetify-poc/src/components/dialogs/upgradeAccountFlow/AddTokensStep.vue
@@ -2,7 +2,7 @@
 // See LICENSE for copying information.
 
 <template>
-    <p class="pb-4">
+    <p class="text-body-2 mb-4">
         Send more than $10 in STORJ Tokens to the following deposit address to upgrade to a Pro account.
         Your account will be upgraded after your transaction receives {{ neededConfirmations }} confirmations.
         If your account is not automatically upgraded, please fill out this
@@ -14,7 +14,7 @@
         >limit increase request form</a>.
     </p>
 
-    <v-row class="pb-4 ma-0" justify="center">
+    <v-row class="ma-0 border rounded-lg" justify="center">
         <v-col cols="auto">
             <canvas ref="canvas" />
         </v-col>
@@ -25,11 +25,11 @@
         <v-tooltip max-width="200px" location="top">
             <template #activator="{ props }">
                 <v-btn v-bind="props" density="compact" variant="plain" color="grey" icon>
-                    <v-icon icon="mdi-information-outline" />
+                    <v-icon icon="mdi-information-outline" size="16" />
                 </v-btn>
             </template>
             <p>
-                This is a Storj deposit address generated just for you.
+                This is a Storj token deposit address generated just for you.
                 <a
                     style="color: var(--c-white);"
                     href=""
@@ -43,8 +43,8 @@
     </p>
 
     <v-row justify="space-between" align="center" class="ma-0 mb-4 border-sm rounded-lg">
-        <v-col class="pa-0 pl-3">
-            <p>{{ wallet.address }}</p>
+        <v-col class="pb-0">
+            <p class="text-caption">{{ wallet.address }}</p>
         </v-col>
 
         <v-col class="pa-2 pr-3" cols="auto">
@@ -60,8 +60,6 @@
         </v-col>
     </v-row>
 
-    <v-divider />
-
     <AddTokensStepBanner
         :is-default="viewState === ViewState.Default"
         :is-pending="viewState === ViewState.Pending"
@@ -71,10 +69,10 @@
 
     <v-btn
         v-if="viewState !== ViewState.Success && !isRoot"
-        class="mt-3"
+        class="my-4"
         block
         variant="outlined"
-        color="grey-lighten-1"
+        color="default"
         @click="emit('back')"
     >
         Back
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 c0ce7a44e75f..e9466b7e81b8 100644
--- a/web/satellite/vuetify-poc/src/components/dialogs/upgradeAccountFlow/UpgradeAccountDialog.vue
+++ b/web/satellite/vuetify-poc/src/components/dialogs/upgradeAccountFlow/UpgradeAccountDialog.vue
@@ -145,7 +145,7 @@ const stepTitles = computed(() => {
         [UpgradeAccountStep.Info]: 'Upgrade',
         [UpgradeAccountStep.Options]: 'Upgrade to Pro',
         [UpgradeAccountStep.AddCC]: 'Add Credit Card',
-        [UpgradeAccountStep.AddTokens]: 'Add tokens',
+        [UpgradeAccountStep.AddTokens]: 'Add Storj Tokens',
         [UpgradeAccountStep.Success]: 'Success',
         [UpgradeAccountStep.PricingPlanSelection]: 'Upgrade',
         [UpgradeAccountStep.PricingPlan]: plan.value?.title || '',
diff --git a/web/satellite/vuetify-poc/src/components/icons/IconCirclePlus.vue b/web/satellite/vuetify-poc/src/components/icons/IconCirclePlus.vue
index c4f88b4ebcc4..fb1ae0319bc7 100644
--- a/web/satellite/vuetify-poc/src/components/icons/IconCirclePlus.vue
+++ b/web/satellite/vuetify-poc/src/components/icons/IconCirclePlus.vue
@@ -2,7 +2,7 @@
 // See LICENSE for copying information.
 
 <template>
-    <svg width="32" height="32" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg width="16" height="16" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M10 1C14.9706 1 19 5.02944 19 10C19 14.9706 14.9706 19 10 19C5.02944 19 1 14.9706 1 10C1 5.02944 5.02944 1 10 1ZM10 2.65C5.94071 2.65 2.65 5.94071 2.65 10C2.65 14.0593 5.94071 17.35 10 17.35C14.0593 17.35 17.35 14.0593 17.35 10C17.35 5.94071 14.0593 2.65 10 2.65ZM10.7496 6.8989L10.7499 6.91218L10.7499 9.223H12.9926C13.4529 9.223 13.8302 9.58799 13.8456 10.048C13.8602 10.4887 13.5148 10.8579 13.0741 10.8726L13.0608 10.8729L10.7499 10.873L10.75 13.171C10.75 13.6266 10.3806 13.996 9.925 13.996C9.48048 13.996 9.11807 13.6444 9.10066 13.2042L9.1 13.171L9.09985 10.873H6.802C6.34637 10.873 5.977 10.5036 5.977 10.048C5.977 9.60348 6.32857 9.24107 6.76882 9.22366L6.802 9.223H9.09985L9.1 6.98036C9.1 6.5201 9.46499 6.14276 9.925 6.12745C10.3657 6.11279 10.7349 6.45818 10.7496 6.8989Z" fill="currentColor" />
     </svg>
 </template>
diff --git a/web/satellite/vuetify-poc/src/layouts/default/AppBar.vue b/web/satellite/vuetify-poc/src/layouts/default/AppBar.vue
index 07327577b247..948e5eea8060 100644
--- a/web/satellite/vuetify-poc/src/layouts/default/AppBar.vue
+++ b/web/satellite/vuetify-poc/src/layouts/default/AppBar.vue
@@ -9,7 +9,7 @@
             v-if="showNavDrawerButton"
             variant="text"
             color="default"
-            class="ml-3 mr-2"
+            class="ml-2 ml-sm-3 mr-0 mr-sm-2"
             size="small"
             density="comfortable"
             @click.stop="appStore.toggleNavigationDrawer()"
@@ -78,7 +78,7 @@
                         v-bind="activatorProps"
                         variant="outlined"
                         color="default"
-                        class="ml-3 font-weight-medium"
+                        class="ml-2 ml-sm-3 font-weight-medium"
                     >
                         <template #append>
                             <img src="@poc/assets/icon-dropdown.svg" alt="Account Dropdown">
diff --git a/web/satellite/vuetify-poc/src/styles/styles.scss b/web/satellite/vuetify-poc/src/styles/styles.scss
index 1628b8adda2f..7451cdd2f09a 100644
--- a/web/satellite/vuetify-poc/src/styles/styles.scss
+++ b/web/satellite/vuetify-poc/src/styles/styles.scss
@@ -139,14 +139,16 @@ body {
 // Card Light Theme
 .v-card.v-theme--light {
   border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity)) !important;
-  box-shadow: rgba(88, 102, 126, 0.07) 0px 4px 20px;
+  // box-shadow: rgba(88, 102, 126, 0.07) 0px 4px 20px;
+  box-shadow: none;
 }
 
 // Card Dark Theme
 .v-card.v-theme--dark {
   background: --v-theme-surface;
   border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity)) !important;
-  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
+  // box-shadow: 0 4px 20px rgba(0,0,0,0.15);
+  box-shadow: none;
 }
 .v-card--variant-flat {
   box-shadow: none !important;
@@ -184,10 +186,6 @@ body {
   border-radius: 8px !important;
 }
 
-// Label opacity
-.v-label {
-    opacity: 1 !important;
-}
 
 // Ensure that the compact checkbox isn't too close to its label
 .v-selection-control--density-compact .v-label {
@@ -395,10 +393,6 @@ table {
   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.
@@ -465,3 +459,8 @@ table {
 .v-theme--dark .card-preview-icon:hover img {
   background-color: rgb(var(--v-theme-on-background));
 }
+
+// Fix label position on fields
+.v-field--variant-outlined .v-field__outline .v-field__outline__start {
+  flex-basis: calc(var(--v-field-padding-start) - 4px) !important;
+}
\ No newline at end of file
diff --git a/web/satellite/vuetify-poc/src/views/AccountSettings.vue b/web/satellite/vuetify-poc/src/views/AccountSettings.vue
index cf8f0d9929ba..53b3500db009 100644
--- a/web/satellite/vuetify-poc/src/views/AccountSettings.vue
+++ b/web/satellite/vuetify-poc/src/views/AccountSettings.vue
@@ -9,114 +9,92 @@
             </v-col>
         </v-row>
 
-        <v-card
-            variant="flat"
-            :border="true"
-            class="mx-auto mt-2 my-6"
-        >
-            <v-list lines="three">
-                <v-list-subheader class="mb-2">Profile</v-list-subheader>
-
-                <v-divider />
-
-                <v-list-item>
-                    <v-list-item-title>Name</v-list-item-title>
-
-                    <v-list-item-subtitle>
+        <v-row>
+            <v-col cols="12" sm="6">
+                <v-card title="Name" variant="outlined" :border="true" rounded="xlg">
+                    <v-card-subtitle>
                         {{ user.getFullName() }}
-                    </v-list-item-subtitle>
+                    </v-card-subtitle>
+                    <v-card-text>
+                        <v-divider class="mb-4" />
+                        <v-btn variant="outlined" color="default" size="small" @click="isChangeNameDialogShown = true">
+                            Edit Name
+                        </v-btn>
+                    </v-card-text>
+                </v-card>
+            </v-col>
+            <v-col cols="12" sm="6">
+                <v-card title="Email Address" variant="outlined" :border="true" rounded="xlg">
+                    <v-card-subtitle>
+                        {{ user.email }}
+                    </v-card-subtitle>
+                    <v-card-text>
+                        <v-tooltip
+                            activator="parent"
+                            location="top"
+                        >
+                            To change email, please <a href="https://supportdcs.storj.io/hc/en-us/requests/new?ticket_form_id=360000379291#" target="_blank">contact support</a>.
+                        </v-tooltip>
+                        <v-divider class="mb-4" />
+                        <v-btn variant="outlined" color="default" size="small" disabled>
+                            Change Email
+                        </v-btn>
+                    </v-card-text>
+                </v-card>
+            </v-col>
+        </v-row>
 
-                    <template #append>
-                        <v-list-item-action>
-                            <v-btn variant="outlined" color="default" size="small" @click="isChangeNameDialogShown = true">
-                                Edit Name
-                            </v-btn>
-                        </v-list-item-action>
-                    </template>
-                </v-list-item>
+        <v-row>
+            <v-col>
+                <h3 class="mt-5">Security</h3>
+            </v-col>
+        </v-row>
 
-                <v-divider />
+        <v-row>
+            <v-col cols="12" md="6" lg="4">
+                <v-card title="Password" variant="outlined" :border="true" rounded="xlg">
+                    <v-card-subtitle>
+                        **********
+                    </v-card-subtitle>
+                    <v-card-text>
+                        <v-divider class="mb-4" />
+                        <v-btn variant="outlined" color="default" size="small" @click="isChangePasswordDialogShown = true">
+                            Change Password
+                        </v-btn>
+                    </v-card-text>
+                </v-card>
+            </v-col>
 
-                <v-list-item>
-                    <v-list-item-title>Email</v-list-item-title>
+            <v-col cols="12" md="6" lg="4">
+                <v-card title="Two-factor authentication" variant="outlined" :border="true" rounded="xlg">
+                    <v-card-subtitle>
+                        Improve security by enabling 2FA.
+                    </v-card-subtitle>
+                    <v-card-text>
+                        <v-divider class="mb-4" />
+                        <v-btn v-if="!user.isMFAEnabled" size="small" @click="toggleEnableMFADialog">Enable Two-factor</v-btn>
+                        <template v-else>
+                            <v-btn class="mr-1" variant="outlined" color="default" size="small" @click="toggleRecoveryCodesDialog">Regenerate Recovery Codes</v-btn>
+                            <v-btn variant="outlined" color="default" size="small" @click="isDisableMFADialogShown = true">Disable Two-factor</v-btn>
+                        </template>
+                    </v-card-text>
+                </v-card>
+            </v-col>
 
-                    <v-list-item-subtitle>
-                        {{ user.email }}
-                    </v-list-item-subtitle>
-
-                    <!-- <template v-slot:append>
-                         <v-list-item-action>
-                            <v-btn>Change Email</v-btn>
-                        </v-list-item-action>
-                    </template> -->
-                </v-list-item>
-            </v-list>
-        </v-card>
-        <v-card
-            variant="flat"
-            :border="true"
-            class="mx-auto my-6"
-        >
-            <v-list lines="three">
-                <v-list-subheader class="mb-2">Security</v-list-subheader>
-
-                <v-divider />
-
-                <v-list-item>
-                    <v-list-item-title>Password</v-list-item-title>
-
-                    <v-list-item-subtitle>
-                        **********
-                    </v-list-item-subtitle>
-
-                    <template #append>
-                        <v-list-item-action>
-                            <v-btn variant="outlined" color="default" size="small" @click="isChangePasswordDialogShown = true">
-                                Change Password
-                            </v-btn>
-                        </v-list-item-action>
-                    </template>
-                </v-list-item>
-
-                <v-divider />
-
-                <v-list-item>
-                    <v-list-item-title>Two-factor authentication</v-list-item-title>
-
-                    <v-list-item-subtitle>
-                        Improve account security by enabling 2FA.
-                    </v-list-item-subtitle>
-
-                    <template #append>
-                        <v-list-item-action justify="end" class="flex-column flex-sm-row align-end">
-                            <v-btn v-if="!user.isMFAEnabled" size="small" @click="toggleEnableMFADialog">Enable Two-factor</v-btn>
-                            <template v-else>
-                                <v-btn class="mb-1 mb-sm-0 mr-sm-1" variant="outlined" color="default" size="small" @click="toggleRecoveryCodesDialog">Regenerate Recovery Codes</v-btn>
-                                <v-btn variant="outlined" color="default" size="small" @click="isDisableMFADialogShown = true">Disable Two-factor</v-btn>
-                            </template>
-                        </v-list-item-action>
-                    </template>
-                </v-list-item>
-
-                <v-divider />
-
-                <v-list-item>
-                    <v-list-item-title>Session Timeout</v-list-item-title>
-
-                    <v-list-item-subtitle>
-                        {{ userSettings.sessionDuration?.shortString ?? Duration.MINUTES_15.shortString }}
-                    </v-list-item-subtitle>
-
-                    <template #append>
-                        <v-list-item-action>
-                            <v-btn variant="outlined" color="default" size="small" @click="isSetSessionTimeoutDialogShown = true">
-                                Set Timeout
-                            </v-btn>
-                        </v-list-item-action>
-                    </template>
-                </v-list-item>
-            </v-list>
-        </v-card>
+            <v-col cols="12" lg="4">
+                <v-card title="Session Timeout" variant="outlined" :border="true" rounded="xlg">
+                    <v-card-subtitle>
+                        Log out after {{ userSettings.sessionDuration?.shortString ?? Duration.MINUTES_15.shortString }}.
+                    </v-card-subtitle>
+                    <v-card-text>
+                        <v-divider class="mb-4" />
+                        <v-btn variant="outlined" color="default" size="small" @click="isSetSessionTimeoutDialogShown = true">
+                            Change Timeout
+                        </v-btn>
+                    </v-card-text>
+                </v-card>
+            </v-col>
+        </v-row>
     </v-container>
 
     <ChangePasswordDialog
diff --git a/web/satellite/vuetify-poc/src/views/Billing.vue b/web/satellite/vuetify-poc/src/views/Billing.vue
index 8bd6792d0281..d1b3a7c767e2 100644
--- a/web/satellite/vuetify-poc/src/views/Billing.vue
+++ b/web/satellite/vuetify-poc/src/views/Billing.vue
@@ -100,7 +100,7 @@
                             <v-card-text>
                                 <v-chip
                                     :color="isCouponActive ? 'green' : 'error'"
-                                    variant="flat"
+                                    variant="tonal"
                                     class="font-weight-bold mb-2"
                                     rounded
                                 >
@@ -111,7 +111,7 @@
 
                                 <v-btn
                                     v-if="couponCodeBillingUIEnabled"
-                                    variant="flat"
+                                    variant="outlined"
                                     color="default"
                                     size="small"
                                     class="mr-2"
diff --git a/web/satellite/vuetify-poc/src/views/Buckets.vue b/web/satellite/vuetify-poc/src/views/Buckets.vue
index c8398a684a34..07b744b051bb 100644
--- a/web/satellite/vuetify-poc/src/views/Buckets.vue
+++ b/web/satellite/vuetify-poc/src/views/Buckets.vue
@@ -5,7 +5,7 @@
     <v-container>
         <PageTitleComponent title="Buckets" />
         <PageSubtitleComponent
-            subtitle="Buckets are storage containers for your data."
+            subtitle="Buckets are where you upload and organize your data."
             link="https://docs.storj.io/learn/concepts/key-architecture-constructs#bucket"
         />
 
diff --git a/web/satellite/vuetify-poc/src/views/Dashboard.vue b/web/satellite/vuetify-poc/src/views/Dashboard.vue
index b634fdf9e177..6c5d3c985dda 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 class="pb-10">
+    <v-container class="pb-15">
         <low-token-balance-banner
             v-if="isLowBalance && billingEnabled"
             cta-label="Go to billing"
@@ -38,10 +38,15 @@
                     link="https://docs.storj.io/dcs/pricing#per-segment-fee"
                 />
             </v-col>
-            <v-col v-if="!isPaidTier && billingEnabled" cols="auto">
-                <v-btn @click="appStore.toggleUpgradeFlow(true)">
+            <v-col cols="auto" class="pt-0 mt-0 pt-md-5">
+                <v-btn v-if="!isPaidTier && billingEnabled" variant="outlined" color="default" @click="appStore.toggleUpgradeFlow(true)">
+                    <IconUpgrade size="16" class="mr-2" />
                     Upgrade
                 </v-btn>
+                <!-- <v-btn v-else variant="outlined" color="default" to="buckets" >
+                    <IconUpload class="mr-2"/>
+                    Upload
+                </v-btn> -->
             </v-col>
         </v-row>
 
@@ -66,7 +71,7 @@
             </v-col>
         </v-row>
 
-        <v-row class="d-flex align-center justify-center">
+        <v-row class="d-flex align-center justify-center mb-5">
             <v-col cols="12" md="6">
                 <UsageProgressComponent
                     icon="cloud"
@@ -75,7 +80,7 @@
                     :used="`${usedLimitFormatted(limits.storageUsed)} Used`"
                     :limit="`Limit: ${usedLimitFormatted(limits.storageLimit)}`"
                     :available="`${usedLimitFormatted(availableStorage)} Available`"
-                    cta="Need more?"
+                    :cta="!isPaidTier && billingEnabled ? 'Need more?' : 'Edit Limit'"
                     @cta-click="onNeedMoreClicked(LimitToChange.Storage)"
                 />
             </v-col>
@@ -87,19 +92,61 @@
                     :used="`${usedLimitFormatted(limits.bandwidthUsed)} Used`"
                     :limit="`Limit: ${usedLimitFormatted(limits.bandwidthLimit)} per month`"
                     :available="`${usedLimitFormatted(availableEgress)} Available`"
-                    cta="Need more?"
+                    :cta="!isPaidTier && billingEnabled ? 'Need more?' : 'Edit Limit'"
                     @cta-click="onNeedMoreClicked(LimitToChange.Bandwidth)"
                 />
             </v-col>
+            <v-col cols="12" md="6">
+                <UsageProgressComponent
+                    icon="globe"
+                    title="Segments"
+                    :progress="segmentUsedPercent"
+                    :used="`${limits.segmentUsed.toLocaleString()} Used`"
+                    :limit="`Limit: ${limits.segmentLimit.toLocaleString()}`"
+                    :available="`${availableSegment.toLocaleString()} Available`"
+                    :cta="!isPaidTier && billingEnabled ? 'Need more?' : 'Learn more'"
+                    @cta-click="onSegmentsCTAClicked"
+                />
+            </v-col>
+            <v-col cols="12" md="6">
+                <UsageProgressComponent
+                    v-if="isCouponCard"
+                    icon="check"
+                    :title="isFreeTierCoupon ? 'Free Usage' : 'Coupon'"
+                    :progress="couponProgress"
+                    :used="`${couponProgress}% Used`"
+                    :limit="`Included free usage: ${couponValue}`"
+                    :available="`${couponRemainingPercent}% Available`"
+                    :cta="isFreeTierCoupon ? 'Learn more' : 'View Coupons'"
+                    @cta-click="onCouponCTAClicked"
+                />
+                <UsageProgressComponent
+                    v-else
+                    icon="bucket"
+                    title="Buckets"
+                    :progress="bucketsUsedPercent"
+                    :used="`${limits.bucketsUsed.toLocaleString()} Used`"
+                    :limit="`Limit: ${limits.bucketsLimit.toLocaleString()}`"
+                    :available="`${availableBuckets.toLocaleString()} Available`"
+                    cta="Need more?"
+                    @cta-click="onBucketsCTAClicked"
+                />
+            </v-col>
         </v-row>
 
-        <v-row class="justify-end mx-0">
-            <v-btn prepend-icon="$calendar" @click="isDatePicker = true">
-                {{ dateRangeLabel }}
-            </v-btn>
+        <v-row align="center" justify="space-between">
+            <v-col cols="12" md="auto">
+                <v-card-title class="font-weight-bold pl-0">Daily Usage</v-card-title>
+                <v-card-subtitle class="pl-0">Select date range to view daily usage statistics.</v-card-subtitle>
+            </v-col>
+            <v-col cols="auto" class="pt-0 mt-0 pt-md-5">
+                <v-btn prepend-icon="$calendar" variant="outlined" color="default" @click="isDatePicker = true">
+                    {{ dateRangeLabel }}
+                </v-btn>
+            </v-col>
         </v-row>
 
-        <v-row class="d-flex align-center justify-center mt-2">
+        <v-row class="d-flex align-center justify-center mt-2 mb-5">
             <v-col cols="12" md="6">
                 <v-card ref="chartContainer" class="pb-4" variant="outlined" :border="true" rounded="xlg">
                     <template #title>
@@ -125,11 +172,9 @@
                             <v-row class="ma-0 align-center">
                                 <IconArrowDown class="mr-2" width="16" height="16" />
                                 Download
-                            </v-row>
-                            <v-row class="ma-0 align-center justify-end">
                                 <v-tooltip width="250" location="bottom">
                                     <template #activator="{ props }">
-                                        <v-icon v-bind="props" size="16" icon="mdi-information-outline" />
+                                        <v-icon v-bind="props" size="16" icon="mdi-information-outline text-medium-emphasis" class="ml-2" />
                                     </template>
                                     <template #default>
                                         <p>
@@ -160,48 +205,25 @@
             </v-col>
         </v-row>
 
-        <v-row class="d-flex align-center justify-center">
-            <v-col cols="12" md="6">
-                <UsageProgressComponent
-                    icon="globe"
-                    title="Segments"
-                    :progress="segmentUsedPercent"
-                    :used="`${limits.segmentUsed.toLocaleString()} Used`"
-                    :limit="`Limit: ${limits.segmentLimit.toLocaleString()}`"
-                    :available="`${availableSegment.toLocaleString()} Available`"
-                    :cta="!isPaidTier && billingEnabled ? 'Need more?' : 'Learn more'"
-                    @cta-click="onSegmentsCTAClicked"
-                />
+        <v-row align="center" justify="space-between">
+            <v-col cols="12" md="auto">
+                <v-card-title class="font-weight-bold pl-0">Buckets</v-card-title>
+                <v-card-subtitle class="pl-0">Buckets are where you upload and organize your data.</v-card-subtitle>
             </v-col>
-            <v-col cols="12" md="6">
-                <UsageProgressComponent
-                    v-if="isCouponCard"
-                    icon="check"
-                    :title="isFreeTierCoupon ? 'Free Usage' : 'Coupon'"
-                    :progress="couponProgress"
-                    :used="`${couponProgress}% Used`"
-                    :limit="`Included free usage: ${couponValue}`"
-                    :available="`${couponRemainingPercent}% Available`"
-                    :cta="isFreeTierCoupon ? 'Learn more' : 'View Coupons'"
-                    @cta-click="onCouponCTAClicked"
-                />
-                <UsageProgressComponent
-                    v-else
-                    icon="bucket"
-                    title="Buckets"
-                    :progress="bucketsUsedPercent"
-                    :used="`${limits.bucketsUsed.toLocaleString()} Used`"
-                    :limit="`Limit: ${limits.bucketsLimit.toLocaleString()}`"
-                    :available="`${availableBuckets.toLocaleString()} Available`"
-                    cta="Need more?"
-                    @cta-click="onBucketsCTAClicked"
-                />
+            <v-col cols="auto" class="pt-0 mt-0 pt-md-5">
+                <v-btn
+                    variant="outlined"
+                    color="default"
+                    @click="isCreateBucketDialogOpen = true"
+                >
+                    <IconCirclePlus class="mr-2" />
+                    New Bucket
+                </v-btn>
             </v-col>
         </v-row>
 
         <v-row>
             <v-col>
-                <v-card-title class="font-weight-bold pl-0">Buckets</v-card-title>
                 <buckets-data-table />
             </v-col>
         </v-row>
@@ -210,12 +232,14 @@
     <edit-project-limit-dialog v-model="isEditLimitDialogShown" :limit-type="limitToChange" />
     <create-bucket-dialog v-model="isCreateBucketDialogShown" />
     <manage-passphrase-dialog v-model="isSetPassphraseDialogShown" is-create />
+    <CreateBucketDialog v-model="isCreateBucketDialogOpen" />
+
     <v-overlay v-model="isDatePicker" class="align-center justify-center">
         <v-date-picker
             v-model="datePickerModel"
             multiple
             show-adjacent-months
-            hide-header
+            header="Daily Usage"
             :disabled="isLoading"
         />
     </v-overlay>
@@ -273,6 +297,8 @@ import IconCloud from '@poc/components/icons/IconCloud.vue';
 import IconArrowDown from '@poc/components/icons/IconArrowDown.vue';
 import LimitWarningBanners from '@poc/components/LimitWarningBanners.vue';
 import LowTokenBalanceBanner from '@poc/components/LowTokenBalanceBanner.vue';
+import IconUpgrade from '@poc/components/icons/IconUpgrade.vue';
+import IconCirclePlus from '@poc/components/icons/IconCirclePlus.vue';
 
 const appStore = useAppStore();
 const usersStore = useUsersStore();
@@ -296,6 +322,7 @@ const isEditLimitDialogShown = ref<boolean>(false);
 const limitToChange = ref<LimitToChange>(LimitToChange.Storage);
 const isCreateBucketDialogShown = ref<boolean>(false);
 const isSetPassphraseDialogShown = ref<boolean>(false);
+const isCreateBucketDialogOpen = ref<boolean>(false);
 const isDatePicker = ref<boolean>(false);
 const datePickerModel = ref<Date[]>([]);
 
@@ -618,7 +645,7 @@ onMounted(async (): Promise<void> => {
 
     const now = new Date();
     const past = new Date();
-    past.setDate(past.getDate() - 30);
+    past.setDate(past.getDate() - 7);
 
     let promises: Promise<void | ProjectMembersPage | AccessGrantsPage | AccountBalance | CreditCard[]>[] = [
         projectsStore.getDailyProjectData({ since: past, before: now }),
diff --git a/web/satellite/vuetify-poc/src/views/ProjectSettings.vue b/web/satellite/vuetify-poc/src/views/ProjectSettings.vue
index 110938f8a4b6..a1fccd2b15c8 100644
--- a/web/satellite/vuetify-poc/src/views/ProjectSettings.vue
+++ b/web/satellite/vuetify-poc/src/views/ProjectSettings.vue
@@ -3,119 +3,120 @@
 
 <template>
     <v-container>
-        <h1 class="text-h5 font-weight-bold mb-2">Project Settings</h1>
+        <v-row>
+            <v-col>
+                <PageTitleComponent title="Project Settings" />
+                <PageSubtitleComponent subtitle="Edit project information and set custom project limits." link="https://docs.storj.io/learn/concepts/limits" />
+            </v-col>
+        </v-row>
+
+        <v-row>
+            <v-col cols="12" sm="6">
+                <v-card title="Project Name" variant="outlined" :border="true" rounded="xlg">
+                    <v-card-subtitle>
+                        {{ project.name }}
+                    </v-card-subtitle>
+                    <v-card-text>
+                        <v-divider class="mb-4" />
+                        <v-btn variant="outlined" color="default" size="small" @click="showEditNameDialog">
+                            Edit Name
+                        </v-btn>
+                    </v-card-text>
+                </v-card>
+            </v-col>
+            <v-col cols="12" sm="6">
+                <v-card title="Project Description" variant="outlined" :border="true" rounded="xlg">
+                    <v-card-subtitle>
+                        {{ project.description }}
+                    </v-card-subtitle>
+                    <v-card-text>
+                        <v-divider class="mb-4" />
+                        <v-btn variant="outlined" color="default" size="small" @click="showEditDescriptionDialog">
+                            Edit Description
+                        </v-btn>
+                    </v-card-text>
+                </v-card>
+            </v-col>
+        </v-row>
+
+        <v-row>
+            <v-col>
+                <h3 class="mt-5">Limits</h3>
+            </v-col>
+        </v-row>
+
+        <v-row v-if="!isPaidTier && billingEnabled">
+            <v-col cols="12">
+                <v-card title="Free Account" variant="outlined" :border="true" rounded="xlg">
+                    <v-card-subtitle>
+                        {{ storageLimitFormatted }} Storage / {{ bandwidthLimitFormatted }} Bandwidth. <br>
+                        Need more? Upgrade to Pro.
+                    </v-card-subtitle>
+                    <v-card-text>
+                        <v-divider class="mb-4" />
+                        <v-btn variant="flat" color="primary" size="small" @click="toggleUpgradeFlow">>
+                            Upgrade to Pro
+                        </v-btn>
+                    </v-card-text>
+                </v-card>
+            </v-col>
+        </v-row>
+
+        <v-row v-else>
+            <v-col cols="12" sm="6" lg="4">
+                <v-card title="Storage Limit" variant="outlined" :border="true" rounded="xlg">
+                    <v-card-subtitle>
+                        Storage Limit: {{ storageLimitFormatted }} <br>
+                        Available Storage: {{ paidStorageLimitFormatted }}
+                    </v-card-subtitle>
+                    <v-card-text>
+                        <v-divider class="mb-4" />
+                        <v-btn variant="outlined" color="default" size="small" @click="showStorageLimitDialog">
+                            Edit Storage Limit
+                        </v-btn>
+                    </v-card-text>
+                </v-card>
+            </v-col>
+
+            <v-col cols="12" sm="6" lg="4">
+                <v-card title="Download Limit" variant="outlined" :border="true" rounded="xlg">
+                    <v-card-subtitle>
+                        Download Limit: {{ bandwidthLimitFormatted }} per month<br>
+                        Available Download: {{ paidBandwidthLimitFormatted }} per month
+                    </v-card-subtitle>
+                    <v-card-text>
+                        <v-divider class="mb-4" />
+                        <v-btn variant="outlined" color="default" size="small" @click="showBandwidthLimitDialog">
+                            Edit Download Limit
+                        </v-btn>
+                    </v-card-text>
+                </v-card>
+            </v-col>
+
+            <v-col cols="12" lg="4">
+                <v-card title="Account Limits" variant="outlined" :border="true" rounded="xlg">
+                    <v-card-subtitle>
+                        Storage limit: {{ paidStorageLimitFormatted }} <br>
+                        Download limit: {{ paidBandwidthLimitFormatted }} per month
+                    </v-card-subtitle>
+                    <v-card-text>
+                        <v-divider class="mb-4" />
+                        <v-btn
+                            variant="outlined"
+                            color="default"
+                            size="small"
+                            :href="projectLimitsIncreaseRequestURL"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                        >
+                            Request Limits Increase
+                            <v-icon end icon="mdi-open-in-new" />
+                        </v-btn>
+                    </v-card-text>
+                </v-card>
+            </v-col>
+        </v-row>
 
-        <v-card class="my-6">
-            <v-list lines="three">
-                <v-list-subheader class="mb-2">Details</v-list-subheader>
-
-                <v-divider />
-
-                <v-list-item>
-                    <v-list-item-title>Project Name</v-list-item-title>
-                    <v-list-item-subtitle>{{ project.name }}</v-list-item-subtitle>
-                    <template #append>
-                        <v-list-item-action>
-                            <v-btn variant="outlined" color="default" size="small" @click="showEditNameDialog">
-                                Edit Project Name
-                            </v-btn>
-                        </v-list-item-action>
-                    </template>
-                </v-list-item>
-
-                <v-divider />
-
-                <v-list-item>
-                    <v-list-item-title>Description</v-list-item-title>
-                    <v-list-item-subtitle>{{ project.description }}</v-list-item-subtitle>
-                    <template #append>
-                        <v-list-item-action>
-                            <v-btn variant="outlined" color="default" size="small" @click="showEditDescriptionDialog">
-                                Edit Description
-                            </v-btn>
-                        </v-list-item-action>
-                    </template>
-                </v-list-item>
-            </v-list>
-        </v-card>
-
-        <v-card class="my-6">
-            <v-list lines="three">
-                <v-list-subheader class="mb-2">Limits</v-list-subheader>
-
-                <v-divider />
-
-                <v-list-item v-if="!isPaidTier && billingEnabled" @click="toggleUpgradeFlow">
-                    <v-list-item-title>Free Account</v-list-item-title>
-                    <v-list-item-subtitle>
-                        {{ storageLimitFormatted }} Storage / {{ bandwidthLimitFormatted }} Bandwidth.
-                        Need more? Upgrade now.
-                    </v-list-item-subtitle>
-                    <template #append>
-                        <v-list-item-action>
-                            <v-btn variant="flat" color="primary" size="small">
-                                Upgrade to Pro
-                            </v-btn>
-                        </v-list-item-action>
-                    </template>
-                </v-list-item>
-
-                <template v-else>
-                    <v-list-item>
-                        <v-list-item-title>Storage</v-list-item-title>
-                        <v-list-item-subtitle>
-                            {{ storageLimitFormatted }} of {{ paidStorageLimitFormatted }} available storage.
-                        </v-list-item-subtitle>
-                        <template #append>
-                            <v-list-item-action>
-                                <v-btn variant="outlined" color="default" size="small" @click="showStorageLimitDialog">
-                                    Edit Storage Limit
-                                </v-btn>
-                            </v-list-item-action>
-                        </template>
-                    </v-list-item>
-
-                    <v-divider />
-
-                    <v-list-item>
-                        <v-list-item-title>Download</v-list-item-title>
-                        <v-list-item-subtitle>
-                            {{ bandwidthLimitFormatted }} of {{ paidBandwidthLimitFormatted }} available to download.
-                        </v-list-item-subtitle>
-                        <template #append>
-                            <v-list-item-action>
-                                <v-btn variant="outlined" color="default" size="small" @click="showBandwidthLimitDialog">
-                                    Edit Download Limit
-                                </v-btn>
-                            </v-list-item-action>
-                        </template>
-                    </v-list-item>
-
-                    <v-divider />
-
-                    <v-list-item>
-                        <v-list-item-title>Account</v-list-item-title>
-                        <v-list-item-subtitle>
-                            {{ paidStorageLimitFormatted }} of storage and {{ paidBandwidthLimitFormatted }} to download per month.
-                        </v-list-item-subtitle>
-                        <template #append>
-                            <v-list-item-action>
-                                <v-btn
-                                    variant="outlined"
-                                    color="default"
-                                    size="small"
-                                    :href="projectLimitsIncreaseRequestURL"
-                                    target="_blank"
-                                    rel="noopener noreferrer"
-                                >
-                                    Request Increase
-                                </v-btn>
-                            </v-list-item-action>
-                        </template>
-                    </v-list-item>
-                </template>
-            </v-list>
-        </v-card>
     </v-container>
 
     <edit-project-details-dialog v-model="isEditDetailsDialogShown" :field="fieldToChange" />
@@ -127,13 +128,8 @@ import { computed, onMounted, ref } from 'vue';
 import {
     VContainer,
     VCard,
-    VList,
-    VListSubheader,
+    VCardSubtitle,
     VDivider,
-    VListItem,
-    VListItemTitle,
-    VListItemSubtitle,
-    VListItemAction,
     VBtn,
 } from 'vuetify/components';
 
@@ -149,6 +145,8 @@ import { useAppStore } from '@poc/store/appStore';
 
 import EditProjectDetailsDialog from '@poc/components/dialogs/EditProjectDetailsDialog.vue';
 import EditProjectLimitDialog from '@poc/components/dialogs/EditProjectLimitDialog.vue';
+import PageTitleComponent from '@poc/components/PageTitleComponent.vue';
+import PageSubtitleComponent from '@poc/components/PageSubtitleComponent.vue';
 
 const isEditDetailsDialogShown = ref<boolean>(false);
 const isEditLimitDialogShown = ref<boolean>(false);