From 50c9f4c85a65f52430c5a32537e9aefe3a2089b1 Mon Sep 17 00:00:00 2001
From: Wilfred Asomani <devwilfredagyei@gmail.com>
Date: Tue, 7 Nov 2023 11:23:33 +0000
Subject: [PATCH] web/satellite/vuetify-poc: add account setup dialog

This change copies the account setup dialog from the static v2 repo and adds functionality to it

Issue: #6481

Change-Id: I0cacec3edf054c1945df7593b73e3c0f0f96677c
---
 web/satellite/src/api/auth.ts                 |  21 ++
 web/satellite/src/types/users.ts              |  22 +++
 .../utils/constants/analyticsEventNames.ts    |   1 +
 .../components/dialogs/AccountSetupDialog.vue |  62 ++++++
 .../accountSetupSteps/BusinessStep.vue        | 183 ++++++++++++++++++
 .../dialogs/accountSetupSteps/ChoiceStep.vue  |  76 ++++++++
 .../accountSetupSteps/PersonalStep.vue        | 115 +++++++++++
 .../dialogs/accountSetupSteps/SuccessStep.vue |  54 ++++++
 .../src/components/icons/IconBusiness.vue     |  22 +++
 .../src/components/icons/IconPersonal.vue     |  18 ++
 .../src/components/icons/IconStorjLogo.vue    |  17 ++
 .../vuetify-poc/src/views/Projects.vue        |   2 +
 12 files changed, 593 insertions(+)
 create mode 100644 web/satellite/vuetify-poc/src/components/dialogs/AccountSetupDialog.vue
 create mode 100644 web/satellite/vuetify-poc/src/components/dialogs/accountSetupSteps/BusinessStep.vue
 create mode 100644 web/satellite/vuetify-poc/src/components/dialogs/accountSetupSteps/ChoiceStep.vue
 create mode 100644 web/satellite/vuetify-poc/src/components/dialogs/accountSetupSteps/PersonalStep.vue
 create mode 100644 web/satellite/vuetify-poc/src/components/dialogs/accountSetupSteps/SuccessStep.vue
 create mode 100644 web/satellite/vuetify-poc/src/components/icons/IconBusiness.vue
 create mode 100644 web/satellite/vuetify-poc/src/components/icons/IconPersonal.vue
 create mode 100644 web/satellite/vuetify-poc/src/components/icons/IconStorjLogo.vue

diff --git a/web/satellite/src/api/auth.ts b/web/satellite/src/api/auth.ts
index 4f1db0901..e16883ca5 100644
--- a/web/satellite/src/api/auth.ts
+++ b/web/satellite/src/api/auth.ts
@@ -5,6 +5,7 @@ import { ErrorBadRequest } from '@/api/errors/ErrorBadRequest';
 import { ErrorMFARequired } from '@/api/errors/ErrorMFARequired';
 import { ErrorTooManyRequests } from '@/api/errors/ErrorTooManyRequests';
 import {
+    AccountSetupData,
     FreezeStatus,
     SetUserSettingsData,
     TokenInfo,
@@ -210,6 +211,26 @@ export class AuthHttpApi implements UsersApi {
         });
     }
 
+    /**
+     * Used to update user details after signup.
+     *
+     * @param userInfo - the information to be added to account.
+     * @throws Error
+     */
+    public async setupAccount(userInfo: AccountSetupData): Promise<void> {
+        const path = `${this.ROOT_PATH}/account/setup`;
+        const response = await this.http.patch(path, JSON.stringify(userInfo));
+        if (response.ok) {
+            return;
+        }
+
+        throw new APIError({
+            status: response.status,
+            message: 'Can not setup account',
+            requestID: response.headers.get('x-request-id'),
+        });
+    }
+
     /**
      * Used to get user data.
      *
diff --git a/web/satellite/src/types/users.ts b/web/satellite/src/types/users.ts
index 6ab4588ba..d298e7218 100644
--- a/web/satellite/src/types/users.ts
+++ b/web/satellite/src/types/users.ts
@@ -150,6 +150,18 @@ export class UpdatedUser {
     }
 }
 
+/**
+ * Describes data used to set up user account.
+ */
+export interface AccountSetupData {
+    fullName: string
+    isProfessional: boolean
+    position?: string
+    companyName?: string
+    employeeCount?: string
+    storageNeeds?: string
+}
+
 /**
  * DisableMFARequest represents a request to disable multi-factor authentication.
  */
@@ -207,3 +219,13 @@ export class FreezeStatus {
         public warned = false,
     ) { }
 }
+
+/**
+ * AccountSetupStep are the steps in the account setup dialog.
+ */
+export enum AccountSetupStep {
+    Choice,
+    Personal,
+    Business,
+    Success,
+}
\ No newline at end of file
diff --git a/web/satellite/src/utils/constants/analyticsEventNames.ts b/web/satellite/src/utils/constants/analyticsEventNames.ts
index 7cfd389e8..13f64db77 100644
--- a/web/satellite/src/utils/constants/analyticsEventNames.ts
+++ b/web/satellite/src/utils/constants/analyticsEventNames.ts
@@ -64,6 +64,7 @@ export enum AnalyticsErrorEventSource {
     ACCESS_GRANTS_PAGE = 'Access grants page',
     ACCOUNT_PAGE = 'Account page',
     ACCOUNT_SETTINGS_AREA = 'Account settings area',
+    ACCOUNT_SETUP_DIALOG = 'Account setup dialog',
     BILLING_HISTORY_TAB = 'Billing history tab',
     BILLING_COUPONS_TAB = 'Billing coupons tab',
     BILLING_OVERVIEW_TAB = 'Billing overview tab',
diff --git a/web/satellite/vuetify-poc/src/components/dialogs/AccountSetupDialog.vue b/web/satellite/vuetify-poc/src/components/dialogs/AccountSetupDialog.vue
new file mode 100644
index 000000000..d1ba0ed6f
--- /dev/null
+++ b/web/satellite/vuetify-poc/src/components/dialogs/AccountSetupDialog.vue
@@ -0,0 +1,62 @@
+// Copyright (C) 2023 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+<template>
+    <v-dialog :model-value="shouldSetup" height="87%" width="87%" persistent transition="fade-transition" scrollable>
+        <v-card ref="innerContent">
+            <!-- Choice step -->
+            <choice-step v-if="step === AccountSetupStep.Choice" @next="(s) => step = s" />
+
+            <!-- Business step -->
+            <business-step v-if="step === AccountSetupStep.Business" @next="(s) => step = s" />
+
+            <!-- Personal step -->
+            <personal-step v-if="step === AccountSetupStep.Personal" @next="(s) => step = s" />
+
+            <!-- Final step -->
+            <success-step v-if="step === AccountSetupStep.Success" />
+        </v-card>
+    </v-dialog>
+</template>
+
+<script setup lang="ts">
+import { Component, computed, ref, watch } from 'vue';
+import { VCard, VDialog } from 'vuetify/components';
+
+import { useNotify } from '@/utils/hooks';
+import { useUsersStore } from '@/store/modules/usersStore';
+import { AccountSetupStep } from '@/types/users';
+
+import ChoiceStep from '@poc/components/dialogs/accountSetupSteps/ChoiceStep.vue';
+import BusinessStep from '@poc/components/dialogs/accountSetupSteps/BusinessStep.vue';
+import PersonalStep from '@poc/components/dialogs/accountSetupSteps/PersonalStep.vue';
+import SuccessStep from '@poc/components/dialogs/accountSetupSteps/SuccessStep.vue';
+
+const userStore = useUsersStore();
+
+const notify = useNotify();
+
+const innerContent = ref<Component | null>(null);
+const step = ref<AccountSetupStep>(AccountSetupStep.Choice);
+
+const shouldSetup = computed(() => {
+    // settings are fetched on the projects page.
+    const onboardingEnd = userStore.state.settings.onboardingEnd;
+    if (onboardingEnd) {
+        return false;
+    }
+
+    if (!userStore.state.user.email) {
+        // user has not been fetched yet.
+        return false;
+    }
+
+    // If the user has a name, they've already completed the account setup.
+    return !userStore.userName;
+});
+
+watch(innerContent, comp => {
+    if (comp) return;
+    step.value = AccountSetupStep.Choice;
+});
+</script>
diff --git a/web/satellite/vuetify-poc/src/components/dialogs/accountSetupSteps/BusinessStep.vue b/web/satellite/vuetify-poc/src/components/dialogs/accountSetupSteps/BusinessStep.vue
new file mode 100644
index 000000000..ea720dfc1
--- /dev/null
+++ b/web/satellite/vuetify-poc/src/components/dialogs/accountSetupSteps/BusinessStep.vue
@@ -0,0 +1,183 @@
+// Copyright (C) 2023 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+<template>
+    <v-container>
+        <v-row justify="center">
+            <v-col class="text-center pt-10 pb-7">
+                <icon-business />
+                <div class="text-overline mt-2 mb-1">
+                    Business Account
+                </div>
+                <h2 class="pb-3">Experience Storj for your business</h2>
+                <p>Tell us a bit about yourself and the company.</p>
+            </v-col>
+        </v-row>
+
+        <v-form v-model="formValid">
+            <v-row justify="center">
+                <v-col cols="12" sm="5" md="4" lg="3">
+                    <v-text-field
+                        v-model="firstName"
+                        :rules="[RequiredRule]"
+                        label="First Name"
+                        hide-details="auto"
+                        required
+                    />
+                </v-col>
+                <v-col cols="12" sm="5" md="4" lg="3">
+                    <v-text-field
+                        v-model="lastName"
+                        label="Last Name"
+                        hide-details="auto"
+                    />
+                </v-col>
+            </v-row>
+            <v-row justify="center">
+                <v-col cols="12" sm="5" md="4" lg="3">
+                    <v-text-field
+                        v-model="companyName"
+                        :rules="[RequiredRule]"
+                        label="Company Name"
+                        hide-details="auto"
+                        required
+                    />
+                </v-col>
+                <v-col cols="12" sm="5" md="4" lg="3">
+                    <v-text-field
+                        v-model="position"
+                        :rules="[RequiredRule]"
+                        label="Job Role"
+                        hide-details="auto"
+                        required
+                    />
+                </v-col>
+            </v-row>
+            <v-row justify="center">
+                <v-col cols="12" sm="5" md="4" lg="3">
+                    <v-select
+                        v-model="functionalArea"
+                        :items="['Cloud Storage', 'IT Security', 'IT Operations', 'Business', 'Other']"
+                        label="Functional Area"
+                        variant="outlined"
+                        hide-details="auto"
+                    />
+                </v-col>
+                <v-col cols="12" sm="5" md="4" lg="3">
+                    <v-select
+                        v-model="employeeCount"
+                        :items="['1-50', '50-1000', '1000+']"
+                        label="Number of Employees"
+                        variant="outlined"
+                        hide-details="auto"
+                    />
+                </v-col>
+            </v-row>
+            <v-row justify="center">
+                <v-col cols="12" sm="5" md="4" lg="3">
+                    <v-select
+                        v-model="storageNeeds"
+                        :items="['Less than 150TB', '150-499TB', '500-999TB', '1PB+']"
+                        label="Storage Needs"
+                        variant="outlined"
+                        hide-details="auto"
+                    />
+                </v-col>
+                <v-col cols="12" sm="5" md="4" lg="3">
+                    <v-select
+                        v-model="useCase"
+                        :items="['Video Streaming', 'Media Sharing & Collaboration', 'Large File Distribution', 'Backup/Archive', 'Web3 Storage', 'Other']"
+                        label="Use Case"
+                        variant="outlined"
+                        hide-details="auto"
+                    />
+                </v-col>
+            </v-row>
+        </v-form>
+
+        <v-row justify="center" class="mt-4">
+            <v-col cols="12" sm="5" md="4" lg="3">
+                <v-btn
+                    size="large"
+                    variant="tonal"
+                    prepend-icon="mdi-chevron-left"
+                    color="default"
+                    :disabled="isLoading"
+                    block
+                    @click="emit('next', AccountSetupStep.Choice)"
+                >
+                    Back
+                </v-btn>
+            </v-col>
+            <v-col cols="12" sm="5" md="4" lg="3">
+                <v-btn
+                    size="large"
+                    append-icon="mdi-chevron-right"
+                    :loading="isLoading"
+                    :disabled="!formValid"
+                    block
+                    @click="setupAccount()"
+                >
+                    Continue
+                </v-btn>
+            </v-col>
+        </v-row>
+    </v-container>
+</template>
+
+<script setup lang="ts">
+
+import { VBtn, VCol, VContainer, VForm, VRow, VSelect, VTextField } from 'vuetify/components';
+import { ref } from 'vue';
+
+import { AccountSetupStep } from '@/types/users';
+import { AuthHttpApi } from '@/api/auth';
+import { useNotify } from '@/utils/hooks';
+import { useLoading } from '@/composables/useLoading';
+import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
+import { RequiredRule } from '@poc/types/common';
+
+import IconBusiness from '@poc/components/icons/IconBusiness.vue';
+
+const auth = new AuthHttpApi();
+
+const notify = useNotify();
+const { isLoading, withLoading } = useLoading();
+
+const formValid = ref(false);
+
+const firstName = ref('');
+const lastName = ref('');
+const companyName = ref('');
+const position = ref('');
+const employeeCount = ref<string>();
+const storageNeeds = ref<string>();
+const useCase = ref<string>();
+const functionalArea = ref<string>();
+
+const emit = defineEmits<{
+    next: [AccountSetupStep];
+}>();
+
+function setupAccount() {
+    withLoading(async () => {
+        if (!formValid.value) {
+            return;
+        }
+
+        try {
+            await auth.setupAccount({
+                fullName: `${firstName.value} ${lastName.value}`,
+                position: position.value,
+                employeeCount: employeeCount.value,
+                storageNeeds: storageNeeds.value,
+                isProfessional: true,
+            });
+
+            emit('next', AccountSetupStep.Success);
+        } catch (error) {
+            notify.notifyError(error, AnalyticsErrorEventSource.ACCOUNT_SETUP_DIALOG);
+        }
+    });
+}
+</script>
\ No newline at end of file
diff --git a/web/satellite/vuetify-poc/src/components/dialogs/accountSetupSteps/ChoiceStep.vue b/web/satellite/vuetify-poc/src/components/dialogs/accountSetupSteps/ChoiceStep.vue
new file mode 100644
index 000000000..e302ecd59
--- /dev/null
+++ b/web/satellite/vuetify-poc/src/components/dialogs/accountSetupSteps/ChoiceStep.vue
@@ -0,0 +1,76 @@
+// Copyright (C) 2023 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+<template>
+    <v-container>
+        <v-row justify="center">
+            <v-col class="text-center pt-5 pt-md-10 pb-md-7">
+                <icon-storj-logo />
+                <p class="text-overline mt-2 mb-1">
+                    Welcome to Storj
+                </p>
+                <h2 class="pb-3">Start by setting up your account</h2>
+                <p>Select your account type to customize your Storj experience.</p>
+            </v-col>
+        </v-row>
+
+        <v-row justify="center">
+            <v-col cols="12" sm="6" lg="4">
+                <v-card border class="px-3 py-5" @click="emit('next', AccountSetupStep.Personal)">
+                    <v-card-item>
+                        <div>
+                            <icon-personal />
+
+                            <p class="text-overline mt-2 mb-1">
+                                Personal
+                            </p>
+                            <p class="text-h6 mb-1">
+                                I'm using Storj for myself.
+                            </p>
+                            <p class="text-caption">Securely store, backup, share, stream, and collaborate on files and media from any device.</p>
+                        </div>
+                    </v-card-item>
+                    <v-card-item>
+                        <v-btn append-icon="mdi-chevron-right">Continue</v-btn>
+                    </v-card-item>
+                </v-card>
+            </v-col>
+
+            <v-col cols="12" sm="6" lg="4">
+                <v-card border class="px-3 py-5" @click="emit('next', AccountSetupStep.Business)">
+                    <v-card-item>
+                        <div>
+                            <icon-business />
+
+                            <p class="text-overline mt-2 mb-1">
+                                Business
+                            </p>
+                            <p class="text-h6 mb-1">
+                                I'm using Storj for business.
+                            </p>
+                            <p class="text-caption">Save your company 80% or more on cloud storage costs with better security and performance.</p>
+                        </div>
+                    </v-card-item>
+                    <v-card-item>
+                        <v-btn append-icon="mdi-chevron-right">Continue</v-btn>
+                    </v-card-item>
+                </v-card>
+            </v-col>
+        </v-row>
+    </v-container>
+</template>
+
+<script setup lang="ts">
+
+import { VBtn, VCard, VCardItem, VCol, VContainer, VRow } from 'vuetify/components';
+
+import { AccountSetupStep } from '@/types/users';
+
+import IconPersonal from '@poc/components/icons/IconPersonal.vue';
+import IconBusiness from '@poc/components/icons/IconBusiness.vue';
+import IconStorjLogo from '@poc/components/icons/IconStorjLogo.vue';
+
+const emit = defineEmits<{
+    next: [AccountSetupStep];
+}>();
+</script>
\ No newline at end of file
diff --git a/web/satellite/vuetify-poc/src/components/dialogs/accountSetupSteps/PersonalStep.vue b/web/satellite/vuetify-poc/src/components/dialogs/accountSetupSteps/PersonalStep.vue
new file mode 100644
index 000000000..87235ea00
--- /dev/null
+++ b/web/satellite/vuetify-poc/src/components/dialogs/accountSetupSteps/PersonalStep.vue
@@ -0,0 +1,115 @@
+// Copyright (C) 2023 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+<template>
+    <v-container>
+        <v-row justify="center">
+            <v-col class="text-center pt-10 pb-4">
+                <icon-personal />
+                <p class="text-overline mt-2 mb-1">
+                    Personal Account
+                </p>
+                <h2 class="pb-3">Great, almost there.</h2>
+                <p>Please complete your account information.</p>
+            </v-col>
+        </v-row>
+
+        <v-row justify="center">
+            <v-col cols="12" sm="8" md="6" lg="4">
+                <v-form v-model="formValid">
+                    <v-text-field
+                        v-model="name"
+                        :rules="[RequiredRule]"
+                        label="Name"
+                        placeholder="Enter your name"
+                        required
+                    />
+                    <v-select
+                        v-model="useCase"
+                        :items="['Backup & Recovery', 'Media & Entertainment', 'Generative AI', 'Other']"
+                        label="Use Case (optional)"
+                        placeholder="Select your use case"
+                        variant="outlined"
+                    />
+                </v-form>
+            </v-col>
+        </v-row>
+
+        <v-row justify="center">
+            <v-col cols="6" sm="4" md="3" lg="2">
+                <v-btn
+                    size="large"
+                    variant="tonal"
+                    prepend-icon="mdi-chevron-left"
+                    color="default"
+                    :disabled="isLoading"
+                    block
+                    @click="emit('next', AccountSetupStep.Choice)"
+                >
+                    Back
+                </v-btn>
+            </v-col>
+            <v-col cols="6" sm="4" md="3" lg="2">
+                <v-btn
+                    size="large"
+                    append-icon="mdi-chevron-right"
+                    :loading="isLoading"
+                    :disabled="!formValid"
+                    block
+                    @click="setupAccount()"
+                >
+                    Continue
+                </v-btn>
+            </v-col>
+        </v-row>
+    </v-container>
+</template>
+
+<script setup lang="ts">
+
+import { VBtn, VCol, VContainer, VForm, VRow, VSelect, VTextField } from 'vuetify/components';
+import { ref } from 'vue';
+
+import { AccountSetupStep } from '@/types/users';
+import { RequiredRule } from '@poc/types/common';
+import { useLoading } from '@/composables/useLoading';
+import { AuthHttpApi } from '@/api/auth';
+import { useNotify } from '@/utils/hooks';
+import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
+
+import IconPersonal from '@poc/components/icons/IconPersonal.vue';
+
+const auth = new AuthHttpApi();
+
+const notify = useNotify();
+const { isLoading, withLoading } = useLoading();
+
+const formValid = ref(false);
+
+const name = ref('');
+const useCase = ref<string>();
+
+const emit = defineEmits<{
+    next: [AccountSetupStep];
+}>();
+
+function setupAccount() {
+    withLoading(async () => {
+        if (!formValid.value) {
+            return;
+        }
+
+        try {
+            await auth.setupAccount({
+                fullName: name.value,
+                workingOn: useCase.value,
+                isProfessional: false,
+            });
+
+            emit('next', AccountSetupStep.Success);
+        } catch (error) {
+            notify.notifyError(error, AnalyticsErrorEventSource.ACCOUNT_SETUP_DIALOG);
+        }
+    });
+}
+</script>
\ No newline at end of file
diff --git a/web/satellite/vuetify-poc/src/components/dialogs/accountSetupSteps/SuccessStep.vue b/web/satellite/vuetify-poc/src/components/dialogs/accountSetupSteps/SuccessStep.vue
new file mode 100644
index 000000000..90c7df33a
--- /dev/null
+++ b/web/satellite/vuetify-poc/src/components/dialogs/accountSetupSteps/SuccessStep.vue
@@ -0,0 +1,54 @@
+// Copyright (C) 2023 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+<template>
+    <v-container class="fill-height" fluid>
+        <v-row justify="center" align="center">
+            <v-col class="text-center py-10">
+                <icon-blue-checkmark />
+                <p class="text-overline mt-4 mb-2">
+                    Account Complete
+                </p>
+                <h2 class="mb-3">You are now ready to use Storj</h2>
+                <p>Create your first project, and upload files to share with the world.</p>
+                <p>Let us know if you need any help getting started!</p>
+                <v-btn
+                    class="mt-7"
+                    size="large"
+                    append-icon="mdi-chevron-right"
+                    :loading="isLoading"
+                    @click="finishSetup()"
+                >
+                    Continue
+                </v-btn>
+            </v-col>
+        </v-row>
+    </v-container>
+</template>
+
+<script setup lang="ts">
+
+import { VBtn, VCol, VContainer, VRow } from 'vuetify/components';
+
+import { useUsersStore } from '@/store/modules/usersStore';
+import { useNotify } from '@/utils/hooks';
+import { useLoading } from '@/composables/useLoading';
+import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
+
+import IconBlueCheckmark from '@poc/components/icons/IconBlueCheckmark.vue';
+
+const userStore = useUsersStore();
+
+const notify = useNotify();
+const { isLoading, withLoading } = useLoading();
+
+function finishSetup() {
+    withLoading(async () => {
+        try {
+            await userStore.getUser();
+        } catch (error) {
+            notify.notifyError(error, AnalyticsErrorEventSource.ACCOUNT_SETUP_DIALOG);
+        }
+    });
+}
+</script>
\ No newline at end of file
diff --git a/web/satellite/vuetify-poc/src/components/icons/IconBusiness.vue b/web/satellite/vuetify-poc/src/components/icons/IconBusiness.vue
new file mode 100644
index 000000000..3fc1ea7fd
--- /dev/null
+++ b/web/satellite/vuetify-poc/src/components/icons/IconBusiness.vue
@@ -0,0 +1,22 @@
+// Copyright (C) 2023 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+<template>
+    <svg :width="size" :height="size" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M41.1058 0H58.3658C72.2088 0 77.7012 1.53431 83.0884 4.41541C88.4756 7.29652 92.7035 11.5244 95.5846 16.9116L95.8036 17.3264C98.5073 22.5168 99.9614 27.9999 100 41.1058V58.3658C100 72.2087 98.4657 77.701 95.5846 83.0882C92.7035 88.4754 88.4756 92.7033 83.0884 95.5844L82.6736 95.8034C77.4832 98.5072 72.0001 99.9613 58.8942 99.9999H41.6342C27.7912 99.9999 22.2988 98.4656 16.9116 95.5844C11.5244 92.7033 7.29653 88.4754 4.41542 83.0882L4.19645 82.6735C1.49268 77.4831 0.0385546 72 0 58.8941V41.6341C0 27.7912 1.53431 22.2988 4.41542 16.9116C7.29653 11.5244 11.5244 7.29652 16.9116 4.41541L17.3264 4.19645C22.5168 1.49268 27.9999 0.0385546 41.1058 0Z" fill="#0218A7" />
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M78.0316 76.6013C84.6558 76.6013 90.8697 78.3506 96.2329 81.4106C95.9652 81.9772 95.6827 82.5332 95.3859 83.0882C92.5048 88.4755 88.2769 92.7034 82.8897 95.5846L82.4749 95.8035C77.3083 98.495 71.8516 99.9481 58.8748 99.9994L43.8017 99.9999C49.0929 86.3133 62.4234 76.6013 78.0316 76.6013Z" fill="#003DC1" />
+        <path d="M78.0991 70.1861C86.1203 70.1861 92.6227 63.7108 92.6227 55.7232C92.6227 47.7355 86.1203 41.2603 78.0991 41.2603C70.078 41.2603 63.5756 47.7355 63.5756 55.7232C63.5756 63.7108 70.078 70.1861 78.0991 70.1861Z" fill="#0149FF" />
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M21.6346 76.6013C37.2429 76.6013 50.5734 86.3132 55.8646 99.9997L41.4355 99.9999C27.5925 99.9999 22.1002 98.4656 16.7129 95.5844C11.3257 92.7033 7.09783 88.4754 4.21672 83.0882L3.99776 82.6734C3.78515 82.2653 3.58026 81.8553 3.38318 81.44C8.75757 78.3616 14.9897 76.6013 21.6346 76.6013Z" fill="#003DC1" />
+        <path d="M21.7021 70.1861C29.7232 70.1861 36.2256 63.7108 36.2256 55.7232C36.2256 47.7355 29.7232 41.2603 21.7021 41.2603C13.681 41.2603 7.17865 47.7355 7.17865 55.7232C7.17865 63.7108 13.681 70.1861 21.7021 70.1861Z" fill="#0149FF" />
+        <path d="M50.0434 70.1859C59.8806 70.1859 67.8553 62.2445 67.8553 52.4482C67.8553 42.6519 59.8806 34.7104 50.0434 34.7104C40.2061 34.7104 32.2314 42.6519 32.2314 52.4482C32.2314 62.2445 40.2061 70.1859 50.0434 70.1859Z" fill="#FFC600" />
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M49.9324 76.6013C63.9338 76.6013 76.1022 84.4164 82.2788 95.9052L82.4749 95.8034C77.3082 98.4948 71.8515 99.948 58.8748 99.9993L41.4354 99.9999C28.2911 99.9999 22.6758 98.6165 17.5304 96.0103C23.6884 84.4642 35.8883 76.6013 49.9324 76.6013Z" fill="#7B61FF" />
+    </svg>
+</template>
+
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+    size: number | string;
+}>(), {
+    size: 50,
+});
+</script>
diff --git a/web/satellite/vuetify-poc/src/components/icons/IconPersonal.vue b/web/satellite/vuetify-poc/src/components/icons/IconPersonal.vue
new file mode 100644
index 000000000..052087db3
--- /dev/null
+++ b/web/satellite/vuetify-poc/src/components/icons/IconPersonal.vue
@@ -0,0 +1,18 @@
+// Copyright (C) 2023 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+<template>
+    <svg :width="size" :height="size" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M41.1058 0H58.3658C72.2088 0 77.7012 1.53431 83.0884 4.41541C88.4756 7.29652 92.7035 11.5244 95.5846 16.9116L95.8036 17.3264C98.5073 22.5168 99.9614 27.9999 100 41.1058V58.3658C100 72.2087 98.4657 77.701 95.5846 83.0882C92.7035 88.4754 88.4756 92.7033 83.0884 95.5844L82.6736 95.8034C77.4832 98.5072 72.0001 99.9613 58.8942 99.9999H41.6342C27.7912 99.9999 22.2988 98.4656 16.9116 95.5844C11.5244 92.7033 7.29653 88.4754 4.41542 83.0882L4.19645 82.6735C1.49268 77.4831 0.0385546 72 0 58.8941V41.6341C0 27.7912 1.53431 22.2988 4.41542 16.9116C7.29653 11.5244 11.5244 7.29652 16.9116 4.41541L17.3264 4.19645C22.5168 1.49268 27.9999 0.0385546 41.1058 0Z" fill="#0218A7" />
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M49.9324 76.6013C63.9338 76.6013 76.1022 84.4164 82.2788 95.9052L82.4749 95.8034C77.3082 98.4948 71.8515 99.948 58.8748 99.9993L41.4354 99.9999C28.2911 99.9999 22.6758 98.6165 17.5304 96.0103C23.6884 84.4642 35.8883 76.6013 49.9324 76.6013Z" fill="#7B61FF" />
+        <path d="M50.0434 70.1859C59.8806 70.1859 67.8553 62.2445 67.8553 52.4482C67.8553 42.6519 59.8806 34.7104 50.0434 34.7104C40.2061 34.7104 32.2314 42.6519 32.2314 52.4482C32.2314 62.2445 40.2061 70.1859 50.0434 70.1859Z" fill="#FFC600" />
+    </svg>
+</template>
+
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+    size: number | string;
+}>(), {
+    size: 50,
+});
+</script>
diff --git a/web/satellite/vuetify-poc/src/components/icons/IconStorjLogo.vue b/web/satellite/vuetify-poc/src/components/icons/IconStorjLogo.vue
new file mode 100644
index 000000000..5f0c3ba67
--- /dev/null
+++ b/web/satellite/vuetify-poc/src/components/icons/IconStorjLogo.vue
@@ -0,0 +1,17 @@
+// Copyright (C) 2023 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+<template>
+    <svg :width="size" :height="size" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M41.1058 0H58.3658C72.2088 0 77.7012 1.53431 83.0884 4.41541C88.4756 7.29652 92.7035 11.5244 95.5846 16.9116L95.8036 17.3264C98.5073 22.5168 99.9614 27.9999 100 41.1058V58.3658C100 72.2087 98.4657 77.701 95.5846 83.0882C92.7035 88.4754 88.4756 92.7033 83.0884 95.5844L82.6736 95.8034C77.4832 98.5072 72.0001 99.9613 58.8942 99.9999H41.6342C27.7912 99.9999 22.2988 98.4656 16.9116 95.5844C11.5244 92.7033 7.29653 88.4754 4.41542 83.0882L4.19645 82.6735C1.49268 77.4831 0.0385546 72 0 58.8941V41.6341C0 27.7912 1.53431 22.2988 4.41542 16.9116C7.29653 11.5244 11.5244 7.29652 16.9116 4.41541L17.3264 4.19645C22.5168 1.49268 27.9999 0.0385546 41.1058 0Z" fill="#FFF" />
+        <path d="M49.8181 91.8716C46.0384 91.8716 42.9619 88.8588 42.86 85.1036L23.2738 73.796C22.2888 74.3308 21.1888 74.6185 20.0682 74.6345L19.9604 74.6352C17.5574 74.6325 15.2217 73.3842 13.9338 71.1536C12.0438 67.8803 13.1148 63.7099 16.3159 61.7438V39.1277C13.1148 37.1617 12.0438 32.9913 13.9338 29.7178C15.2023 27.5204 17.4881 26.2766 19.8529 26.2372L19.9604 26.2364C21.1176 26.2349 22.2566 26.5234 23.2735 27.0756L42.86 15.7678C42.961 12.0508 45.976 9.06143 49.7032 9.0009L49.8181 9C53.5979 9 56.6741 12.0128 56.7763 15.7678L76.3621 27.0761C77.3471 26.5409 78.4474 26.2529 79.5683 26.2368L79.6759 26.2364C82.0786 26.2391 84.4148 27.4874 85.7027 29.7178C87.5925 32.9913 86.5215 37.1617 83.3206 39.1277V61.7438C86.5215 63.7099 87.5925 67.8803 85.7027 71.1536C84.4339 73.3509 82.1482 74.5949 79.7834 74.6343L79.6759 74.6352C78.5187 74.6367 77.3796 74.3481 76.3627 73.796L56.7763 85.1038C56.6752 88.8206 53.6602 91.8101 49.9333 91.8707L49.8181 91.8716ZM49.8181 19.2753L49.9084 19.2742C49.9159 19.274 49.9234 19.2737 49.9309 19.2735L49.9084 19.2742C49.9384 19.2734 49.9684 19.2722 49.9984 19.2706L49.9309 19.2735C49.9637 19.2725 49.9964 19.271 50.0292 19.269L49.9984 19.2706C50.0288 19.269 50.0593 19.2669 50.0897 19.2645L50.0292 19.269C50.059 19.2671 50.0888 19.2647 50.1185 19.262L50.0897 19.2645C50.1166 19.2623 50.1434 19.2596 50.1703 19.2568L50.1185 19.262C50.1511 19.2591 50.1837 19.2556 50.2162 19.2517L50.1703 19.2568C50.2005 19.2536 50.2306 19.25 50.2607 19.2461L50.2162 19.2517C50.2436 19.2483 50.271 19.2449 50.2983 19.2409L50.2607 19.2461C50.2945 19.2416 50.3283 19.2365 50.362 19.231L50.2983 19.2409C50.3259 19.2369 50.3534 19.2325 50.3809 19.2278L50.362 19.231C50.3906 19.2263 50.4192 19.2212 50.4477 19.2157L50.3809 19.2278C50.4109 19.2227 50.4409 19.2172 50.4709 19.2112L50.4477 19.2157C50.4842 19.2086 50.5206 19.201 50.5568 19.1927L50.4709 19.2112C50.5567 19.1941 50.6418 19.1735 50.726 19.1495L50.6754 19.1635C50.7031 19.1561 50.7307 19.1484 50.7582 19.1403L50.726 19.1495C50.7507 19.1425 50.7753 19.1353 50.7998 19.1277L50.7582 19.1403C52.1309 18.7351 53.1328 17.4649 53.1328 15.9608C53.1328 14.1302 51.6487 12.6461 49.8181 12.6461C47.9875 12.6461 46.5034 14.1302 46.5034 15.9608C46.5034 17.4485 47.4835 18.7074 48.8333 19.1266C48.8585 19.1344 48.8839 19.1421 48.9096 19.1493L48.8844 19.1423C48.9114 19.1502 48.9386 19.1579 48.9661 19.1651L48.9096 19.1493C48.9388 19.1576 48.9683 19.1657 48.998 19.1731L48.9661 19.1651C49.0417 19.185 49.118 19.2023 49.1949 19.2168L49.1634 19.2107C49.1942 19.2168 49.225 19.2227 49.2561 19.2281L49.1949 19.2168C49.2203 19.2218 49.246 19.2263 49.2716 19.2305L49.2561 19.2281C49.284 19.2326 49.3119 19.237 49.3398 19.2411L49.2716 19.2305C49.3058 19.2364 49.3402 19.2413 49.3747 19.2461L49.3398 19.2411C49.3665 19.245 49.3933 19.2485 49.4201 19.2517L49.3747 19.2461C49.405 19.2501 49.4356 19.2537 49.4662 19.2571L49.4201 19.2517C49.4525 19.2557 49.4851 19.2591 49.5178 19.262L49.4662 19.2571L49.5466 19.2645L49.5178 19.262C49.5475 19.2647 49.5774 19.267 49.6071 19.2688L49.5466 19.2645C49.577 19.2671 49.6074 19.2689 49.6379 19.2706L49.6071 19.2688C49.6397 19.271 49.6726 19.2724 49.7054 19.2735L49.6379 19.2706C49.6975 19.2737 49.7576 19.2753 49.8181 19.2753ZM60.5934 42.0244L72.9243 34.9052C72.9069 34.8361 72.8905 34.7668 72.875 34.6972L72.8635 34.645L72.8509 34.5838L72.8381 34.5193C72.8262 34.4575 72.8151 34.3957 72.8048 34.3336L72.7972 34.2864C72.7733 34.1354 72.7545 33.9837 72.7407 33.8314L72.7362 33.7804C72.7305 33.7108 72.7258 33.6411 72.722 33.5713L72.7229 33.5878C72.72 33.5346 72.7177 33.4814 72.7159 33.4282L72.7141 33.3621C72.7137 33.3453 72.7134 33.3285 72.7132 33.3117L72.7126 33.2617C72.7068 32.5362 72.8141 31.8141 73.0305 31.1215L73.0478 31.0671C73.0525 31.0522 73.0573 31.0374 73.0622 31.0225L73.0795 30.9708L73.1036 30.9006C73.1077 30.8891 73.1115 30.8777 73.1158 30.8664C73.1255 30.8387 73.1355 30.8111 73.1457 30.7836C73.2017 30.6313 73.2632 30.4811 73.33 30.3331L73.3545 30.2791L73.3707 30.2447C73.3969 30.1879 73.4242 30.1316 73.4524 30.0757L73.4825 30.0164L73.5014 29.9794L73.5336 29.9185L73.5518 29.8845C73.5822 29.8284 73.6132 29.7727 73.645 29.7173L55.8475 19.4416C55.8056 19.5136 55.7626 19.585 55.7183 19.6556C55.7053 19.6765 55.6921 19.6974 55.6787 19.7181C55.6495 19.7634 55.6199 19.8084 55.5898 19.8531L55.57 19.8824C55.3877 20.149 55.1872 20.4027 54.97 20.6417L54.9423 20.6721L54.9137 20.7032C54.7489 20.8802 54.575 21.0486 54.3926 21.2076L54.3802 21.2182C54.3357 21.2569 54.2907 21.2951 54.2452 21.3327L54.2232 21.3507C54.1825 21.3844 54.1412 21.4174 54.0994 21.4497C54.0433 21.4936 53.9864 21.5366 53.9289 21.5786L53.9188 21.5861C53.8597 21.6292 53.7999 21.6715 53.7394 21.7127L53.7217 21.7249C53.5222 21.8602 53.3158 21.9851 53.1034 22.0991C53.0912 22.1058 53.0788 22.1121 53.0667 22.1186C53.0283 22.139 52.9897 22.159 52.9508 22.1785L52.9211 22.1936C52.7374 22.2849 52.5498 22.3682 52.3588 22.4433C52.3045 22.4646 52.2499 22.4852 52.195 22.5052L52.1557 22.5194C52.1301 22.5285 52.1044 22.5375 52.0787 22.5464L52.06 22.5527C52.0318 22.5623 52.0034 22.5717 51.975 22.581L51.9428 22.5914C51.8584 22.6184 51.7735 22.6438 51.6881 22.6676L51.6883 36.0729C55.4967 36.5436 58.7671 38.8127 60.5934 42.0244ZM39.6769 42.307C41.3809 39.107 44.462 36.8404 48.0422 36.1802V22.6931C47.8495 22.6422 47.6591 22.5832 47.4714 22.5162L47.4367 22.5036C47.3651 22.4778 47.294 22.4506 47.2234 22.4219C47.1959 22.4109 47.1685 22.3996 47.1411 22.3882L47.1179 22.3785C47.057 22.3528 46.9965 22.3263 46.9363 22.2989L46.8873 22.2763C46.7452 22.2102 46.6053 22.1393 46.4679 22.0637C46.3502 21.999 46.2345 21.9308 46.1207 21.8594L46.0807 21.834C45.9987 21.7819 45.9179 21.7279 45.8383 21.6722C45.7524 21.6122 45.6678 21.5503 45.5845 21.4866L45.5364 21.4492L45.5236 21.4391C45.4103 21.3502 45.2998 21.2578 45.1921 21.1622L45.1647 21.1374C45.0334 21.0194 44.9067 20.8964 44.7847 20.7689L44.7514 20.7335C44.7011 20.6803 44.6516 20.6263 44.6031 20.5715L44.6002 20.5679C44.5019 20.4567 44.4072 20.3425 44.3162 20.2253L44.2834 20.1825C44.2633 20.1565 44.2436 20.1302 44.2242 20.1037C44.2091 20.0837 44.1945 20.0637 44.1796 20.0435L44.1531 20.0063C44.1415 19.9903 44.13 19.9742 44.1187 19.958L44.0894 19.9159C44.0767 19.8974 44.064 19.8789 44.0514 19.8603L44.0251 19.8212C43.9505 19.7094 43.8792 19.5956 43.8111 19.4798L43.789 19.4416L25.9911 29.7173C26.0409 29.8037 26.0888 29.8911 26.1349 29.9794L26.1607 30.0298L26.176 30.0598C26.2235 30.1541 26.2688 30.2494 26.3119 30.3457L26.3259 30.3772C26.3362 30.4002 26.3461 30.4236 26.3563 30.4468C26.438 30.6372 26.5113 30.8311 26.5759 31.0279L26.5876 31.0637C26.8249 31.8017 26.938 32.574 26.9224 33.349C26.9183 33.546 26.9058 33.7427 26.885 33.9385C26.853 34.2395 26.8013 34.5381 26.7302 34.8322L39.6769 42.307ZM81.3316 36.0688C82.917 35.1535 83.4604 33.1263 82.5451 31.5409C81.6295 29.9556 79.6025 29.4125 78.0169 30.3278C76.7673 31.0491 76.1652 32.4617 76.4145 33.8038C76.4192 33.8288 76.4242 33.8535 76.4293 33.8782L76.4219 33.8431C76.4282 33.8749 76.4352 33.9068 76.4424 33.9385L76.4293 33.8782C76.4363 33.9118 76.444 33.9451 76.4518 33.9786L76.4424 33.9385C76.4485 33.9646 76.4548 33.9907 76.4615 34.0168L76.4518 33.9786C76.4588 34.0069 76.4662 34.0353 76.4739 34.0636L76.4615 34.0168C76.4694 34.0479 76.4777 34.0789 76.4867 34.1098L76.4739 34.0636C76.4811 34.0901 76.4886 34.1165 76.4964 34.1428L76.4867 34.1098C76.5146 34.2072 76.5472 34.3037 76.5844 34.3993C76.5963 34.4295 76.6084 34.4597 76.6213 34.4896L76.6006 34.4396C76.6116 34.4671 76.6231 34.4943 76.635 34.5217L76.6213 34.4896C76.6318 34.5148 76.6429 34.5397 76.6543 34.5647L76.635 34.5217C76.6492 34.5541 76.6638 34.5863 76.6791 34.6185L76.6543 34.5647C76.6665 34.5917 76.6791 34.6183 76.6919 34.645L76.6791 34.6185C76.6918 34.645 76.7048 34.6713 76.718 34.6975L76.6919 34.645C76.7078 34.6775 76.7241 34.7097 76.741 34.7416L76.718 34.6975C76.7373 34.7353 76.7572 34.7729 76.7779 34.81L76.8037 34.8556C76.8552 34.9448 76.9108 35.0315 76.9702 35.1155L76.9484 35.0842C76.9837 35.1355 77.0206 35.1859 77.0587 35.235C77.0742 35.2548 77.0899 35.2746 77.1059 35.2942L77.0787 35.2604C77.1003 35.2876 77.1221 35.3142 77.1442 35.3405L77.1059 35.2942C77.1239 35.3164 77.1421 35.3383 77.1606 35.3599L77.1442 35.3405C77.1608 35.3601 77.1777 35.3797 77.1948 35.399L77.1606 35.3599C77.282 35.5008 77.4149 35.6315 77.5579 35.7505L77.5028 35.7039C77.5246 35.7228 77.5467 35.7415 77.569 35.7597L77.5579 35.7505C78.5947 36.61 80.0973 36.7816 81.3316 36.0688ZM22.2597 35.5885L22.2865 35.5626C22.3202 35.5293 22.3533 35.4951 22.3859 35.4602C22.4064 35.4383 22.4263 35.4161 22.4462 35.3936L22.3992 35.4458C22.421 35.4223 22.4421 35.3985 22.4631 35.3743L22.4462 35.3936C22.4668 35.3702 22.4871 35.3465 22.507 35.3225L22.4631 35.3743C22.4812 35.3535 22.4989 35.3325 22.5164 35.3113L22.507 35.3225C22.5241 35.3023 22.5408 35.2817 22.5571 35.2609L22.5164 35.3113C22.5396 35.2832 22.5625 35.2547 22.5846 35.2258L22.5571 35.2609C22.5759 35.2373 22.5944 35.2134 22.6125 35.1893L22.5846 35.2258C22.6014 35.204 22.6179 35.1821 22.6341 35.1598L22.6125 35.1893C22.6301 35.1658 22.6473 35.142 22.6642 35.118L22.6341 35.1598C22.6526 35.1345 22.671 35.109 22.6888 35.0831L22.6642 35.118C22.7244 35.0332 22.7805 34.9457 22.8325 34.8556C22.8806 34.7724 22.925 34.6871 22.9657 34.6L22.9414 34.6509C22.951 34.6314 22.9604 34.6117 22.9696 34.5919L22.9657 34.6C22.9788 34.5723 22.9914 34.5444 23.0035 34.5164C23.0598 34.3869 23.1078 34.2541 23.1471 34.1185L23.1403 34.142C23.1488 34.1134 23.1569 34.0848 23.1646 34.056L23.1471 34.1185C23.156 34.088 23.1644 34.0573 23.1723 34.0265L23.1646 34.056C23.172 34.0287 23.179 34.0013 23.1856 33.9739L23.1723 34.0265C23.1882 33.9651 23.2023 33.9032 23.2146 33.8409C23.2165 33.8324 23.2183 33.8238 23.2198 33.8152L23.2146 33.8409C23.4823 32.4875 22.8805 31.0559 21.6193 30.3278C20.034 29.4125 18.0067 29.9556 17.0914 31.5409C16.1761 33.1263 16.7193 35.1535 18.3046 36.0688C19.6132 36.8244 21.2229 36.5861 22.2597 35.5885ZM24.8152 62.681L32.7116 58.1218C31.3195 56.4108 30.5609 54.2715 30.5642 52.0657C30.5642 48.611 32.3865 45.5821 35.1225 43.8876L24.9754 38.0295C24.8636 38.1455 24.7479 38.2577 24.6285 38.3659C24.2071 38.7466 23.7405 39.0739 23.2391 39.3406L23.2346 39.3428C23.0808 39.4247 22.9239 39.5006 22.7644 39.5705C22.6156 39.636 22.4645 39.6961 22.3114 39.7507C22.1696 39.8013 22.0263 39.8474 21.8817 39.8891C21.6729 39.9493 21.4614 39.9994 21.2479 40.0394L21.2141 40.0457C21.1154 40.0636 21.0163 40.0796 20.9169 40.0936L20.8989 40.0961L20.8633 40.1008C20.7335 40.1181 20.6032 40.1314 20.4725 40.1409L20.4277 40.1443C20.3089 40.1523 20.19 40.1573 20.0709 40.1593L19.9633 40.1602L19.962 60.7113C20.5115 60.7119 21.0603 60.7774 21.5944 60.9066L21.7091 60.9354C22.0774 61.0309 22.4373 61.1563 22.7853 61.3103L22.8355 61.3325C23.1633 61.4809 23.4793 61.6544 23.7805 61.8514C23.8297 61.8837 23.8785 61.9167 23.9269 61.9501C23.9467 61.9639 23.9665 61.9776 23.9863 61.9918C24.2801 62.1996 24.5573 62.4301 24.8152 62.681ZM74.8755 62.6292L74.9126 62.5934C75.2431 62.2835 75.6031 62.0068 75.9877 61.7672L75.9915 61.765C76.0445 61.732 76.098 61.6996 76.1519 61.668C76.6901 61.3524 77.2684 61.1109 77.8711 60.95C78.0431 60.9039 78.2167 60.8644 78.3916 60.8314L78.4078 60.8285C78.5834 60.7956 78.7602 60.7698 78.9379 60.7511L78.9727 60.7473C79.0512 60.7394 79.1298 60.7327 79.2085 60.7273C79.2708 60.723 79.3331 60.7196 79.3955 60.7171L79.4441 60.7154L79.4659 60.7147C79.5354 60.7124 79.6048 60.7113 79.6743 60.7113V40.1602C79.2954 40.1596 78.9159 40.1283 78.5421 40.0666C78.424 40.0467 78.3064 40.0241 78.1893 39.9989C77.8351 39.9216 77.4875 39.8167 77.1496 39.6853C77.0844 39.66 77.0196 39.6337 76.9552 39.6065L76.8937 39.58C76.7629 39.5231 76.6339 39.4622 76.5067 39.3975C76.3294 39.3071 76.1561 39.2092 75.9872 39.1039L75.8878 39.0406C75.4621 38.7655 75.0681 38.4443 74.7128 38.0828L62.1511 45.335C66.1504 45.8372 69.2543 49.219 69.3209 53.3387L69.322 53.4744C69.3249 55.2735 68.7337 57.0232 67.6402 58.4518L74.8755 62.6292ZM49.3893 58.032H61.1183C63.6354 58.032 65.6759 55.9915 65.6759 53.4744C65.6759 50.9573 63.6354 48.9168 61.1183 48.9168L58.6071 48.9166L58.4723 47.2399C58.1278 42.9566 54.5382 39.6286 50.2126 39.6286C46.7572 39.6286 43.7017 41.7627 42.4784 44.9325L42.0282 46.0993H40.1769C36.8818 46.0993 34.2103 48.7705 34.2103 52.0657C34.2103 55.3608 36.8818 58.032 40.1769 58.032H49.0882C49.1287 58.032 49.1683 58.0318 49.207 58.0309L49.2462 58.03L49.3373 58.0318L49.3893 58.032ZM43.789 81.4295L43.8088 81.3956C43.8377 81.3463 43.8672 81.2974 43.8973 81.2489L43.9252 81.2041L43.9506 81.1643L43.9816 81.1159C44.1152 80.9114 44.2592 80.714 44.413 80.5243C44.4946 80.4238 44.5791 80.3256 44.6663 80.2298L44.6904 80.2035C44.7064 80.1859 44.7226 80.1684 44.739 80.1511L44.7649 80.1236C44.9954 79.8802 45.2432 79.6537 45.5062 79.4459L45.5366 79.4221C45.5814 79.3873 45.6265 79.353 45.6718 79.319C45.7783 79.2396 45.8872 79.1635 45.9983 79.0906L46.0606 79.0501C46.1196 79.0123 46.1792 78.9753 46.2393 78.9392L46.2796 78.9152C46.3292 78.8858 46.3791 78.8571 46.4294 78.829L46.4706 78.8062L46.5221 78.7781C46.6054 78.7333 46.6896 78.6902 46.7746 78.6487L46.8205 78.6267C46.9222 78.5783 47.0251 78.5322 47.1289 78.4885C47.256 78.4351 47.3847 78.3856 47.5148 78.3401L47.5429 78.3301C47.6015 78.31 47.6603 78.2906 47.7193 78.2719L47.7601 78.2593C47.7792 78.2532 47.7984 78.2473 47.8177 78.2417L47.8699 78.2262L47.9324 78.2084C47.942 78.2058 47.9516 78.2031 47.9612 78.2003L48.0159 78.1855L48.0424 78.1787V61.6783L40.1769 61.6781C38.6282 61.6805 37.1021 61.307 35.7295 60.5898L26.6728 65.8188C26.7808 66.2094 26.8545 66.6086 26.8929 67.012C26.9124 67.2174 26.9227 67.4235 26.9237 67.6298L26.9235 67.586C26.928 67.9637 26.9017 68.3411 26.8447 68.7145L26.8546 68.6477C26.8114 68.9523 26.748 69.2537 26.665 69.55L26.6535 69.5907C26.6316 69.6674 26.6083 69.7438 26.5837 69.8198L26.5732 69.8517C26.5656 69.8748 26.5578 69.8978 26.55 69.9208L26.5401 69.95C26.4442 70.2275 26.331 70.4986 26.201 70.7618L26.1785 70.8068L26.1493 70.8644L26.1306 70.9002C26.0862 70.9854 26.04 71.0696 25.992 71.1529L43.789 81.4295ZM55.8472 81.4295L73.6452 71.1542C73.6162 71.1038 73.5878 71.0531 73.5599 71.0021L73.5379 70.9612C73.527 70.9409 73.5163 70.9206 73.5057 70.9002L73.4872 70.8644C73.476 70.8428 73.465 70.821 73.4542 70.7992L73.4375 70.7661L73.4056 70.7008L73.3817 70.6504C73.3784 70.6436 73.3752 70.6368 73.372 70.63L73.3817 70.6504C73.3411 70.5648 73.3024 70.4782 73.2656 70.3908L73.2629 70.3845C73.2026 70.2416 73.1471 70.0967 73.0964 69.95L73.0863 69.9208L73.0631 69.8517L73.0528 69.8198L73.0321 69.7547C73.0149 69.7002 72.9985 69.6454 72.9828 69.5905L72.9713 69.55C72.9331 69.4134 72.8991 69.2757 72.8692 69.1371L72.8593 69.0907C72.8366 68.981 72.8165 68.8707 72.7987 68.76L72.796 68.7429C72.7412 68.3915 72.7132 68.0365 72.7123 67.6809L72.7126 67.6301C72.7126 67.5961 72.713 67.5623 72.7137 67.5283L72.7159 67.4469C72.7164 67.4296 72.717 67.4124 72.7177 67.3951L72.7204 67.3315C72.724 67.2578 72.7287 67.1842 72.7346 67.1107L72.7402 67.0446C72.7542 66.8909 72.7732 66.7378 72.7972 66.5854L72.8026 66.5512C72.8139 66.4823 72.8262 66.4136 72.8395 66.3451L72.8467 66.3082C72.8546 66.2691 72.8628 66.2301 72.8712 66.1912L72.8842 66.1325L72.8998 66.0663C72.9214 65.9736 72.9453 65.8815 72.9713 65.79L72.9837 65.747L64.5984 60.9057C63.5093 61.4161 62.3211 61.6799 61.1183 61.6781L51.6883 61.6783V78.2041C51.7228 78.2136 51.757 78.2235 51.7912 78.2334L51.822 78.2426L51.8951 78.2651L51.9322 78.2768C51.9673 78.288 52.0022 78.2994 52.0371 78.311C52.1076 78.3347 52.1778 78.3595 52.2475 78.3855L52.3069 78.408C52.4394 78.4591 52.5704 78.5139 52.6997 78.5725C52.7418 78.5916 52.7836 78.6112 52.8253 78.6312L52.8676 78.6517C52.9763 78.7048 53.0837 78.7607 53.1895 78.8193L53.219 78.8357L53.273 78.8665L53.3288 78.8987L53.3677 78.9217C53.3898 78.9347 53.4118 78.9479 53.4337 78.9613L53.4537 78.9737C53.4798 78.9896 53.5057 79.0056 53.5313 79.022L53.5585 79.0391L53.6076 79.0708L53.6564 79.1028L53.7012 79.1327L53.7466 79.1635L53.8087 79.2068C53.9101 79.2776 54.0094 79.3512 54.1066 79.4275L54.1487 79.4605C54.2514 79.5423 54.3518 79.627 54.4498 79.7143L54.4849 79.7458C54.5069 79.7656 54.5285 79.7857 54.5501 79.8057C54.5575 79.8124 54.5648 79.8192 54.5719 79.8262L54.6003 79.8525C54.6286 79.8793 54.6566 79.9064 54.6844 79.9337L54.7189 79.9675L54.7402 79.9886L54.7585 80.0071C54.7996 80.0485 54.8401 80.0903 54.8802 80.1328L54.889 80.1421C54.9492 80.2057 55.008 80.2706 55.0654 80.3367C55.129 80.4094 55.191 80.4835 55.2512 80.559C55.3458 80.6773 55.4366 80.7985 55.5237 80.9224L55.5448 80.9525L55.5829 81.0081L55.6105 81.0493C55.6801 81.1535 55.7469 81.2594 55.8108 81.3672L55.8472 81.4295ZM21.6193 70.5438C22.8715 69.8209 23.4733 68.4045 23.2204 67.0599C23.2187 67.0501 23.2168 67.0404 23.2148 67.0306L23.2204 67.0599C23.1629 66.7552 23.0627 66.4601 22.923 66.1833L22.9387 66.2146C22.9272 66.191 22.9152 66.1676 22.903 66.1444L22.923 66.1833C22.908 66.1536 22.8926 66.1241 22.8766 66.0949L22.8325 66.0159C22.7811 65.9267 22.7255 65.8399 22.666 65.7558L22.6888 65.7884C22.6723 65.7646 22.6556 65.741 22.6386 65.7175L22.666 65.7558C22.6484 65.7307 22.6302 65.7059 22.6118 65.6813L22.6386 65.7175C22.619 65.6906 22.5989 65.664 22.5785 65.6377L22.6118 65.6813C22.5959 65.6602 22.5798 65.6393 22.5634 65.6185L22.5785 65.6377C22.5593 65.6131 22.5398 65.5888 22.52 65.5648L22.5634 65.6185C22.5452 65.5953 22.5266 65.5723 22.5076 65.5497L22.52 65.5648C22.4854 65.5226 22.4499 65.4814 22.4131 65.441C21.3871 64.312 19.6796 64.0087 18.3046 64.8027C16.7193 65.718 16.1761 67.7453 17.0914 69.3306C18.0067 70.916 20.034 71.4591 21.6193 70.5438ZM82.5451 69.3306C83.4604 67.7453 82.917 65.718 81.3316 64.8027C80.0752 64.0771 78.541 64.2679 77.503 65.1676C77.4814 65.1863 77.46 65.2052 77.4389 65.2246L77.3766 65.2831C77.3422 65.3162 77.3085 65.35 77.2756 65.3845C77.258 65.4029 77.2407 65.4215 77.2236 65.4404L77.2517 65.4097C77.2327 65.4303 77.2138 65.4511 77.1952 65.4721L77.2236 65.4404C77.2037 65.4623 77.1841 65.4845 77.1649 65.507L77.1952 65.4721C77.1754 65.4944 77.1559 65.517 77.1367 65.5398L77.1649 65.507C77.1455 65.5292 77.1266 65.5518 77.1079 65.5747L77.1367 65.5398C77.0702 65.6194 77.0074 65.702 76.9484 65.7873L76.9671 65.7605C76.8914 65.868 76.822 65.9797 76.7594 66.0953C76.7434 66.1247 76.7278 66.1544 76.7128 66.1844L76.743 66.1257C76.7282 66.1538 76.7138 66.182 76.6998 66.2105L76.7128 66.1844C76.7002 66.2093 76.688 66.2343 76.6762 66.2596L76.6998 66.2105C76.6852 66.2402 76.671 66.27 76.6573 66.3001L76.6762 66.2596C76.6472 66.3206 76.6202 66.3825 76.5952 66.4452C76.5471 66.5651 76.5061 66.6878 76.4725 66.8126C76.4649 66.8407 76.4577 66.8689 76.4509 66.8972L76.4604 66.8585C76.4536 66.886 76.4469 66.9132 76.4408 66.9404L76.4509 66.8972C76.4431 66.9291 76.4358 66.9611 76.4291 66.9933L76.4408 66.9404C76.4342 66.9697 76.4279 66.9991 76.4221 67.0286L76.4291 66.9933C76.4237 67.019 76.4186 67.0447 76.4138 67.0705L76.4221 67.0286C76.1537 68.3824 76.7551 69.8153 78.0169 70.5438C79.6025 71.4591 81.6295 70.916 82.5451 69.3306ZM49.8181 88.2254C51.6487 88.2254 53.1328 86.7413 53.1328 84.9107C53.1328 83.5092 52.263 82.3109 51.0338 81.8262C51.0249 81.8224 51.0159 81.8188 51.0068 81.8154L51.0338 81.8262C51.0112 81.8171 50.9884 81.8084 50.9654 81.8001L51.0068 81.8154C50.9799 81.8051 50.9529 81.7951 50.9258 81.7855L50.9654 81.8001C50.9398 81.7906 50.9141 81.7814 50.8882 81.7727L50.9258 81.7855C50.8986 81.7758 50.8713 81.7665 50.8439 81.7576L50.8882 81.7727C50.8596 81.7628 50.8308 81.7534 50.8018 81.7445L50.8439 81.7576C50.8155 81.7484 50.7869 81.7396 50.7582 81.7313L50.8018 81.7445C50.7767 81.7367 50.7514 81.7292 50.726 81.722L50.7582 81.7313C50.7306 81.7231 50.7029 81.7153 50.6752 81.7079L50.726 81.722C50.6961 81.7135 50.666 81.7054 50.6358 81.6977L50.6752 81.7079C50.5934 81.686 50.5107 81.6674 50.4274 81.6521L50.4711 81.6604C50.4448 81.6552 50.4185 81.6502 50.3921 81.6455L50.4274 81.6521C50.3976 81.6464 50.3677 81.6412 50.3377 81.6365L50.3921 81.6455C50.3603 81.64 50.3284 81.635 50.2965 81.6305L50.3377 81.6365C50.3166 81.6332 50.2954 81.6301 50.2742 81.6273L50.2965 81.6305C50.2636 81.6257 50.2306 81.6214 50.1975 81.6176L50.2742 81.6273C50.2451 81.6233 50.2159 81.6196 50.1867 81.6163L50.1975 81.6176C50.1696 81.6144 50.1417 81.6116 50.1138 81.6091L50.1867 81.6163C50.155 81.6128 50.1233 81.6098 50.0915 81.6073L50.1138 81.6091C50.0826 81.6063 50.0513 81.604 50.02 81.6021L50.0915 81.6073C50.0612 81.6047 50.0308 81.6026 50.0004 81.601L50.02 81.6021C49.9904 81.6003 49.9607 81.599 49.9311 81.5981L50.0004 81.601C49.9397 81.5977 49.8789 81.5961 49.8181 81.596L49.7281 81.5974C49.7206 81.5974 49.713 81.5976 49.7054 81.5981L49.7281 81.5974C49.6974 81.5981 49.6665 81.5993 49.6359 81.601L49.7054 81.5981C49.6757 81.599 49.646 81.6003 49.6163 81.6021L49.6359 81.601C49.6056 81.6026 49.5753 81.6047 49.545 81.6073L49.6163 81.6021C49.585 81.604 49.5537 81.6063 49.5225 81.6091L49.545 81.6073C49.5131 81.6098 49.4813 81.6128 49.4496 81.6163L49.5225 81.6091C49.4946 81.6116 49.4667 81.6144 49.4388 81.6176L49.4496 81.6163C49.4199 81.6196 49.3903 81.6233 49.3607 81.6275L49.4388 81.6176C49.4065 81.6212 49.3744 81.6253 49.3423 81.63L49.3607 81.6275C49.339 81.6304 49.3173 81.6336 49.2957 81.637L49.3423 81.63C49.3093 81.6347 49.2765 81.64 49.2437 81.6458L49.2957 81.637C49.2695 81.6412 49.2433 81.6457 49.2172 81.6505L49.2437 81.6458C49.2168 81.6503 49.1899 81.6553 49.1632 81.6608L49.2172 81.6505C49.1328 81.6658 49.049 81.6845 48.9661 81.7065L48.998 81.6984C48.9684 81.7058 48.9388 81.7137 48.9094 81.722L48.9661 81.7065C48.9388 81.7139 48.9116 81.7216 48.8844 81.7295L48.9094 81.722C48.883 81.7297 48.8567 81.7376 48.8304 81.7457L48.8844 81.7295C48.8543 81.7382 48.8243 81.7475 48.7944 81.7571L48.8304 81.7457C48.8029 81.7542 48.7755 81.7632 48.7483 81.7724L48.7944 81.7571C48.7663 81.7663 48.7383 81.7758 48.7105 81.7857L48.7483 81.7724C48.7224 81.7812 48.6966 81.7904 48.6709 81.7999L48.7105 81.7857C48.683 81.7954 48.6557 81.8055 48.6286 81.8161L48.6709 81.7999C48.6488 81.808 48.6268 81.8163 48.6049 81.8249L48.6286 81.8161C47.3854 82.294 46.5034 83.4993 46.5034 84.9107C46.5034 86.7413 47.9875 88.2254 49.8181 88.2254Z" fill="#0149FF" />
+    </svg>
+</template>
+
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+    size: number | string;
+}>(), {
+    size: 50,
+});
+</script>
diff --git a/web/satellite/vuetify-poc/src/views/Projects.vue b/web/satellite/vuetify-poc/src/views/Projects.vue
index 018bd6fe8..593598a3e 100644
--- a/web/satellite/vuetify-poc/src/views/Projects.vue
+++ b/web/satellite/vuetify-poc/src/views/Projects.vue
@@ -97,6 +97,7 @@
     />
     <create-project-dialog v-model="isCreateProjectDialogShown" />
     <add-team-member-dialog v-model="isAddMemberDialogShown" :project-id="addMemberProjectId" />
+    <account-setup-dialog />
 </template>
 
 <script setup lang="ts">
@@ -131,6 +132,7 @@ import AddTeamMemberDialog from '@poc/components/dialogs/AddTeamMemberDialog.vue
 import IconCardView from '@poc/components/icons/IconCardView.vue';
 import IconTableView from '@poc/components/icons/IconTableView.vue';
 import LowTokenBalanceBanner from '@poc/components/LowTokenBalanceBanner.vue';
+import AccountSetupDialog from '@poc/components/dialogs/AccountSetupDialog.vue';
 
 const appStore = useAppStore();
 const projectsStore = useProjectsStore();