diff --git a/web/satellite/index-vuetify.html b/web/satellite/index-vuetify.html
index 4e399fc450ed..cb5eb758c6e6 100644
--- a/web/satellite/index-vuetify.html
+++ b/web/satellite/index-vuetify.html
@@ -19,11 +19,17 @@
                 border: 4px solid rgb(1,73,255);
                 border-top: 4px solid transparent;
                 border-radius: 50%;
-                width: 50px;
-                height: 50px;
+                width: 90px;
+                height: 90px;
                 animation: spin .7s linear infinite;
             }
 
+            #pre-app-loader img {
+                position: absolute;
+                inset: 0;
+                margin: auto;
+            }
+
             @keyframes spin {
                 0% { transform: rotate(0deg); }
                 100% { transform: rotate(360deg); }
@@ -31,7 +37,10 @@
         </style>
     </head>
     <body>
-        <div id="pre-app-loader"><div></div></div>
+        <div id="pre-app-loader">
+            <div></div>
+            <img alt="loader" src="@/../static/images/common/loadIcon.svg">
+        </div>
         <div id="app"></div>
         <script type="module" src="/vuetify-poc/src/main.ts"></script>
     </body>
diff --git a/web/satellite/src/types/router.ts b/web/satellite/src/types/router.ts
index f923252e2496..3e6296fb9acd 100644
--- a/web/satellite/src/types/router.ts
+++ b/web/satellite/src/types/router.ts
@@ -69,4 +69,6 @@ export abstract class RouteConfig {
     public static BucketsDetails = new NavigationLink('details', 'Bucket Details');
     public static UploadFile = new NavigationLink('upload/', 'Objects Upload');
     public static UploadFileChildren = new NavigationLink(':pathMatch*', 'Objects Upload Children');
+
+    public static AuthRoutes = ['/login', '/signup', '/forgot-password', '/activate', '/password-recovery', '/signup-confirmation', '/password-reset-confirmation'];
 }
diff --git a/web/satellite/src/utils/httpClient.ts b/web/satellite/src/utils/httpClient.ts
index 1dcadb82546e..cc07ae831c24 100644
--- a/web/satellite/src/utils/httpClient.ts
+++ b/web/satellite/src/utils/httpClient.ts
@@ -3,6 +3,7 @@
 
 import { ErrorUnauthorized } from '@/api/errors/ErrorUnauthorized';
 import { useConfigStore } from '@/store/modules/configStore';
+import { RouteConfig } from '@/types/router';
 
 /**
  * HttpClient is a custom wrapper around fetch api.
@@ -83,8 +84,8 @@ export class HttpClient {
      * Call logout and redirect to login.
      */
     private async handleUnauthorized(): Promise<void> {
-        const path = window.location.href;
-        if (!path.includes('/login') && !path.includes('/signup')) {
+        let path = window.location.href;
+        if (!this.isAuthRoute(path)) {
             try {
                 const logoutPath = '/api/v0/auth/logout';
                 const request: RequestInit = {
@@ -102,6 +103,11 @@ export class HttpClient {
             }
 
             setTimeout(() => {
+                // path may have changed after timeout.
+                path = window.location.href;
+                if (this.isAuthRoute(path)) {
+                    return;
+                }
                 const origin = window.location.origin;
                 if (document.querySelector('.v-overlay-container')) {
                     window.location.href = origin + useConfigStore().optionalV2Path + '/login';
@@ -111,4 +117,8 @@ export class HttpClient {
             }, 2000);
         }
     }
+
+    private isAuthRoute(path: string): boolean {
+        return RouteConfig.AuthRoutes.some((route) => path.includes(route));
+    }
 }
diff --git a/web/satellite/vuetify-poc/src/App.vue b/web/satellite/vuetify-poc/src/App.vue
index 26a12e9b174e..f253151f5364 100644
--- a/web/satellite/vuetify-poc/src/App.vue
+++ b/web/satellite/vuetify-poc/src/App.vue
@@ -2,23 +2,48 @@
 // See LICENSE for copying information.
 
 <template>
-    <ErrorPage v-if="isErrorPageShown" />
+    <branded-loader v-if="isLoading" />
+    <ErrorPage v-else-if="isErrorPageShown" />
     <router-view v-else />
     <Notifications />
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted } from 'vue';
+import { computed, onBeforeMount, ref } from 'vue';
+import { useTheme } from 'vuetify';
+import { useRoute, useRouter } from 'vue-router';
 
 import { useConfigStore } from '@/store/modules/configStore';
 import { useAppStore } from '@poc/store/appStore';
 import { APIError } from '@/utils/error';
+import { ErrorUnauthorized } from '@/api/errors/ErrorUnauthorized';
+import { useABTestingStore } from '@/store/modules/abTestingStore';
+import { useUsersStore } from '@/store/modules/usersStore';
+import { useProjectsStore } from '@/store/modules/projectsStore';
+import { useAnalyticsStore } from '@/store/modules/analyticsStore';
+import { useNotify } from '@/utils/hooks';
+import { useBillingStore } from '@/store/modules/billingStore';
+import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
+import { RouteConfig } from '@/types/router';
 
 import Notifications from '@poc/layouts/default/Notifications.vue';
 import ErrorPage from '@poc/components/ErrorPage.vue';
+import BrandedLoader from '@poc/components/utils/BrandedLoader.vue';
 
 const appStore = useAppStore();
+const abTestingStore = useABTestingStore();
+const billingStore = useBillingStore();
 const configStore = useConfigStore();
+const usersStore = useUsersStore();
+const projectsStore = useProjectsStore();
+const analyticsStore = useAnalyticsStore();
+
+const notify = useNotify();
+const router = useRouter();
+const theme = useTheme();
+const route = useRoute();
+
+const isLoading = ref<boolean>(true);
 
 /**
  * Indicates whether an error page should be shown in place of the router view.
@@ -28,14 +53,80 @@ const isErrorPageShown = computed<boolean>((): boolean => {
 });
 
 /**
- * Lifecycle hook after initial render.
+ * Indicates if billing features are enabled.
+ */
+const billingEnabled = computed<boolean>(() => configStore.state.config.billingFeaturesEnabled);
+
+/**
+ * Sets up the app by fetching all necessary data.
+ */
+async function setup() {
+    isLoading.value = true;
+    try {
+        await usersStore.getUser();
+        const promises: Promise<void | object | string>[] = [
+            usersStore.getSettings(),
+            projectsStore.getProjects(),
+            projectsStore.getUserInvitations(),
+            abTestingStore.fetchValues(),
+        ];
+        if (billingEnabled.value) {
+            promises.push(billingStore.setupAccount());
+        }
+        await Promise.all(promises);
+
+        const invites = projectsStore.state.invitations;
+        const projects = projectsStore.state.projects;
+
+        if (appStore.state.hasJustLoggedIn && !invites.length && projects.length <= 1) {
+            if (!projects.length) {
+                await projectsStore.createDefaultProject(usersStore.state.user.id);
+            } else {
+                projectsStore.selectProject(projects[0].id);
+                await router.push(`/projects/${projectsStore.state.selectedProject.urlId}/dashboard`);
+                analyticsStore.pageVisit('/projects/dashboard');
+                analyticsStore.eventTriggered(AnalyticsEvent.NAVIGATE_PROJECTS);
+            }
+        }
+    } catch (error) {
+        if (!(error instanceof ErrorUnauthorized)) {
+            notify.notifyError(error, AnalyticsErrorEventSource.OVERALL_APP_WRAPPER_ERROR);
+            appStore.setErrorPage((error as APIError).status ?? 500, true);
+        } else {
+            await new Promise(resolve => setTimeout(resolve, 1000));
+            if (!RouteConfig.AuthRoutes.includes(route.path)) await router.push('/login');
+        }
+    }
+    isLoading.value = false;
+}
+
+/**
+ * Lifecycle hook before initial render.
  * Sets up variables from meta tags from config such satellite name, etc.
  */
-onMounted(async (): Promise<void> => {
+onBeforeMount(async (): Promise<void> => {
+    const savedTheme = localStorage.getItem('theme') || 'light';
+    if ((savedTheme === 'dark' && !theme.global.current.value.dark) || (savedTheme === 'light' && theme.global.current.value.dark)) {
+        theme.global.name.value = savedTheme;
+    }
+
     try {
         await configStore.getConfig();
     } catch (error) {
+        isLoading.value = false;
+        notify.notifyError(error, AnalyticsErrorEventSource.OVERALL_APP_WRAPPER_ERROR);
         appStore.setErrorPage((error as APIError).status ?? 500, true);
+        return;
+    }
+
+    await setup();
+
+    isLoading.value = false;
+});
+
+usersStore.$onAction(({ name, after }) => {
+    if (name === 'login') {
+        after((_) => setup());
     }
 });
 </script>
diff --git a/web/satellite/vuetify-poc/src/components/utils/BrandedLoader.vue b/web/satellite/vuetify-poc/src/components/utils/BrandedLoader.vue
new file mode 100644
index 000000000000..91430fa5c683
--- /dev/null
+++ b/web/satellite/vuetify-poc/src/components/utils/BrandedLoader.vue
@@ -0,0 +1,49 @@
+// Copyright (C) 2024 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+<template>
+    <div class="loader d-flex align-center justify-center">
+        <div class="loader__spinner" />
+        <img alt="loader" src="@/../static/images/common/loadIcon.svg" class="loader__icon">
+    </div>
+</template>
+
+<style scoped lang="scss">
+    @keyframes rotate {
+
+        from {
+            transform: rotate(0deg);
+        }
+
+        to {
+            transform: rotate(360deg);
+        }
+    }
+
+    .loader {
+        position: absolute;
+        inset: 0;
+
+        &__spinner {
+            width: 90px;
+            height: 90px;
+            margin: auto 0;
+            border: solid 3px var(--c-blue-3);
+            border-radius: 50%;
+            border-right-color: transparent;
+            border-bottom-color: transparent;
+            border-left-color: transparent;
+            transition: all 0.5s ease-in;
+            animation-name: rotate;
+            animation-duration: 1.2s;
+            animation-iteration-count: infinite;
+            animation-timing-function: linear;
+        }
+
+        &__icon {
+            position: absolute;
+            inset: 0;
+            margin: auto;
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/web/satellite/vuetify-poc/src/layouts/default/AllProjects.vue b/web/satellite/vuetify-poc/src/layouts/default/AllProjects.vue
index 39ef2abc8d4a..c5a90abb1262 100644
--- a/web/satellite/vuetify-poc/src/layouts/default/AllProjects.vue
+++ b/web/satellite/vuetify-poc/src/layouts/default/AllProjects.vue
@@ -3,10 +3,7 @@
 
 <template>
     <v-app>
-        <div v-if="isLoading" class="d-flex align-center justify-center w-100 h-100">
-            <v-progress-circular color="primary" indeterminate size="64" />
-        </div>
-        <session-wrapper v-else>
+        <session-wrapper>
             <default-bar />
             <default-view />
 
@@ -17,8 +14,8 @@
 </template>
 
 <script setup lang="ts">
-import { VApp, VProgressCircular } from 'vuetify/components';
-import { onBeforeMount, onBeforeUnmount, ref } from 'vue';
+import { VApp } from 'vuetify/components';
+import { onBeforeUnmount } from 'vue';
 import { useRouter } from 'vue-router';
 
 import DefaultBar from './AppBar.vue';
@@ -26,7 +23,6 @@ import DefaultView from './View.vue';
 
 import { useAppStore } from '@poc/store/appStore';
 import { useUsersStore } from '@/store/modules/usersStore';
-import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
 import { useNotify } from '@/utils/hooks';
 import { useProjectsStore } from '@/store/modules/projectsStore';
 import { useAnalyticsStore } from '@/store/modules/analyticsStore';
@@ -43,38 +39,6 @@ const analyticsStore = useAnalyticsStore();
 const notify = useNotify();
 const router = useRouter();
 
-const isLoading = ref<boolean>(true);
-
-/**
- * Lifecycle hook after initial render.
- * Pre-fetches user`s and project information.
- */
-onBeforeMount(async () => {
-    try {
-        await usersStore.getSettings();
-        await usersStore.getUser();
-        await projectsStore.getProjects();
-        const invites = await projectsStore.getUserInvitations();
-
-        const projects = projectsStore.state.projects;
-
-        if (appStore.state.hasJustLoggedIn && !invites.length && projects.length <= 1) {
-            if (!projects.length) {
-                await projectsStore.createDefaultProject(usersStore.state.user.id);
-            } else {
-                projectsStore.selectProject(projects[0].id);
-                await router.push(`/projects/${projectsStore.state.selectedProject.urlId}/dashboard`);
-                analyticsStore.pageVisit('/projects/dashboard');
-                analyticsStore.eventTriggered(AnalyticsEvent.NAVIGATE_PROJECTS);
-            }
-        }
-    } catch (error) {
-        notify.notifyError(error, AnalyticsErrorEventSource.ALL_PROJECT_DASHBOARD);
-    }
-
-    isLoading.value = false;
-});
-
 onBeforeUnmount(() => {
     appStore.toggleHasJustLoggedIn(false);
 });
diff --git a/web/satellite/vuetify-poc/src/layouts/default/AppBar.vue b/web/satellite/vuetify-poc/src/layouts/default/AppBar.vue
index 9aba659d5a24..66f74aeddf73 100644
--- a/web/satellite/vuetify-poc/src/layouts/default/AppBar.vue
+++ b/web/satellite/vuetify-poc/src/layouts/default/AppBar.vue
@@ -264,11 +264,7 @@ function toggleTheme(newTheme: string): void {
 
 watch(() => theme.global.current.value.dark, (newVal: boolean) => {
     activeTheme.value = newVal ? 1 : 0;
-});
-
-// Check for stored theme in localStorage. If none, default to 'light'
-toggleTheme(localStorage.getItem('theme') || 'light');
-activeTheme.value = theme.global.current.value.dark ? 1 : 0;
+}, { immediate: true });
 
 function closeSideNav(): void {
     if (mdAndDown.value) appStore.toggleNavigationDrawer(false);
diff --git a/web/satellite/vuetify-poc/src/layouts/default/Auth.vue b/web/satellite/vuetify-poc/src/layouts/default/Auth.vue
index c6a23747a7b5..81647a8f184d 100644
--- a/web/satellite/vuetify-poc/src/layouts/default/Auth.vue
+++ b/web/satellite/vuetify-poc/src/layouts/default/Auth.vue
@@ -10,7 +10,24 @@
 
 <script setup lang="ts">
 import { VApp } from 'vuetify/components';
+import { onBeforeMount } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
 
 import AuthBar from './AuthBar.vue';
 import DefaultView from './View.vue';
+
+import { useUsersStore } from '@/store/modules/usersStore';
+
+const usersStore = useUsersStore();
+
+const route = useRoute();
+const router = useRouter();
+
+onBeforeMount(() => {
+    if (usersStore.state.user.id) {
+        // user is already logged in
+        router.replace('/projects');
+        return;
+    }
+});
 </script>
diff --git a/web/satellite/vuetify-poc/src/layouts/default/Default.vue b/web/satellite/vuetify-poc/src/layouts/default/Default.vue
index ae6d3ab863ed..dab2cd6c0c03 100644
--- a/web/satellite/vuetify-poc/src/layouts/default/Default.vue
+++ b/web/satellite/vuetify-poc/src/layouts/default/Default.vue
@@ -3,9 +3,7 @@
 
 <template>
     <v-app>
-        <div v-if="isLoading" class="d-flex align-center justify-center w-100 h-100">
-            <v-progress-circular color="primary" indeterminate size="64" />
-        </div>
+        <branded-loader v-if="isLoading" />
         <session-wrapper v-else>
             <default-bar show-nav-drawer-button />
             <ProjectNav />
@@ -18,51 +16,38 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onBeforeMount, ref, watch } from 'vue';
+import { onBeforeMount, ref, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
-import { VApp, VProgressCircular } from 'vuetify/components';
+import { VApp } from 'vuetify/components';
 
 import DefaultBar from './AppBar.vue';
 import ProjectNav from './ProjectNav.vue';
 import DefaultView from './View.vue';
 
-import { RouteConfig } from '@/types/router';
 import { Project } from '@/types/projects';
-import { useBillingStore } from '@/store/modules/billingStore';
-import { useUsersStore } from '@/store/modules/usersStore';
-import { useABTestingStore } from '@/store/modules/abTestingStore';
 import { MINIMUM_URL_ID_LENGTH, useProjectsStore } from '@/store/modules/projectsStore';
 import { useAppStore } from '@poc/store/appStore';
 import { useAnalyticsStore } from '@/store/modules/analyticsStore';
 import { useAccessGrantsStore } from '@/store/modules/accessGrantsStore';
 import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
 import { useNotify } from '@/utils/hooks';
-import { useConfigStore } from '@/store/modules/configStore';
 
 import SessionWrapper from '@poc/components/utils/SessionWrapper.vue';
 import UpgradeAccountDialog from '@poc/components/dialogs/upgradeAccountFlow/UpgradeAccountDialog.vue';
 import BrowserSnackbarComponent from '@poc/components/BrowserSnackbarComponent.vue';
+import BrandedLoader from '@poc/components/utils/BrandedLoader.vue';
 
 const router = useRouter();
 const route = useRoute();
 const notify = useNotify();
 
 const analyticsStore = useAnalyticsStore();
-const billingStore = useBillingStore();
-const usersStore = useUsersStore();
-const abTestingStore = useABTestingStore();
 const projectsStore = useProjectsStore();
 const appStore = useAppStore();
 const agStore = useAccessGrantsStore();
-const configStore = useConfigStore();
 
 const isLoading = ref<boolean>(true);
 
-/**
- * Indicates if billing features are enabled.
- */
-const billingEnabled = computed<boolean>(() => configStore.state.config.billingFeaturesEnabled);
-
 /**
  * Selects the project with the given URL ID, redirecting to the
  * all projects dashboard if no such project exists.
@@ -117,28 +102,6 @@ watch(() => route.params.id, async newId => {
 onBeforeMount(async () => {
     isLoading.value = true;
 
-    try {
-        await Promise.all([
-            usersStore.getUser(),
-            abTestingStore.fetchValues(),
-            usersStore.getSettings(),
-        ]);
-    } catch (error) {
-        notify.notifyError(error, AnalyticsErrorEventSource.OVERALL_APP_WRAPPER_ERROR);
-        setTimeout(async () => await router.push(RouteConfig.Login.path), 1000);
-
-        return;
-    }
-
-    if (billingEnabled.value) {
-        try {
-            await billingStore.setupAccount();
-        } catch (error) {
-            error.message = `Unable to setup account. ${error.message}`;
-            notify.notifyError(error, AnalyticsErrorEventSource.OVERALL_APP_WRAPPER_ERROR);
-        }
-    }
-
     await selectProject(route.params.id as string);
 
     try {
diff --git a/web/satellite/vuetify-poc/src/router/index.ts b/web/satellite/vuetify-poc/src/router/index.ts
index 6f6670418ee6..bf08d5e954ef 100644
--- a/web/satellite/vuetify-poc/src/router/index.ts
+++ b/web/satellite/vuetify-poc/src/router/index.ts
@@ -160,7 +160,7 @@ export function setupRouter(config: FrontendConfig): Router {
         routes,
     });
 
-    router.beforeEach((to, from, next) => {
+    router.beforeEach((to, _, next) => {
         const appStore = useAppStore();
         appStore.setIsNavigating(true);
 
@@ -171,10 +171,6 @@ export function setupRouter(config: FrontendConfig): Router {
             appStore.removeErrorPage();
         }
 
-        if (to.name === RouteName.Projects && from.name === RouteName.Login) {
-            appStore.toggleHasJustLoggedIn(true);
-        }
-
         next();
     });
 
diff --git a/web/satellite/vuetify-poc/src/views/Billing.vue b/web/satellite/vuetify-poc/src/views/Billing.vue
index 4b9f20acaa34..2ad8923edd0a 100644
--- a/web/satellite/vuetify-poc/src/views/Billing.vue
+++ b/web/satellite/vuetify-poc/src/views/Billing.vue
@@ -371,11 +371,10 @@ onBeforeMount(() => {
 
 onMounted(async () => {
     withLoading(async () => {
-        const promises: Promise<void | Project[] | AccountBalance | CreditCard[]>[] = [
+        const promises: Promise<void | AccountBalance | CreditCard[]>[] = [
             billingStore.getBalance(),
             billingStore.getCoupon(),
             billingStore.getCreditCards(),
-            projectsStore.getProjects(),
             billingStore.getProjectUsagePriceModel(),
         ];
 
diff --git a/web/satellite/vuetify-poc/src/views/Bucket.vue b/web/satellite/vuetify-poc/src/views/Bucket.vue
index 35845327e189..83823fb96987 100644
--- a/web/satellite/vuetify-poc/src/views/Bucket.vue
+++ b/web/satellite/vuetify-poc/src/views/Bucket.vue
@@ -208,6 +208,11 @@ const edgeCredentials = computed((): EdgeCredentials => bucketsStore.state.edgeC
  */
 const projectId = computed<string>(() => projectsStore.state.selectedProject.id);
 
+/**
+ * Returns urlID of selected project from store.
+ */
+const projectUrlId = computed<string>(() => projectsStore.state.selectedProject.urlId);
+
 /**
  * Returns whether the user should be prompted to enter the passphrase.
  */
@@ -271,7 +276,7 @@ async function upload(e: Event): Promise<void> {
 
 watch(isBucketPassphraseDialogOpen, isOpen => {
     if (isOpen || !isPromptForPassphrase.value) return;
-    router.push(`/projects/${projectId.value}/buckets`);
+    router.push(`/projects/${projectUrlId.value}/buckets`);
     analyticsStore.pageVisit(`/projects/buckets`);
 });
 
@@ -293,7 +298,7 @@ watch(() => route.params.browserPath, browserPath => {
 watch(() => bucketsStore.state.passphrase, async newPass => {
     if (isBucketPassphraseDialogOpen.value) return;
 
-    const bucketsURL = `/projects/${projectId.value}/buckets`;
+    const bucketsURL = `/projects/${projectUrlId.value}/buckets`;
 
     if (!newPass) {
         router.push(bucketsURL);
@@ -330,7 +335,7 @@ onMounted(async () => {
     }
 
     if (bucketsStore.state.allBucketNames.indexOf(bucketName.value) === -1) {
-        router.push(`/projects/${projectId.value}/buckets`);
+        router.push(`/projects/${projectUrlId.value}/buckets`);
         return;
     }
 
diff --git a/web/satellite/vuetify-poc/src/views/Login.vue b/web/satellite/vuetify-poc/src/views/Login.vue
index dd571ad04e8a..d3674f1adad8 100644
--- a/web/satellite/vuetify-poc/src/views/Login.vue
+++ b/web/satellite/vuetify-poc/src/views/Login.vue
@@ -149,7 +149,7 @@ import { EmailRule, RequiredRule, ValidationRule } from '@poc/types/common';
 import { AuthHttpApi } from '@/api/auth';
 import { useAnalyticsStore } from '@/store/modules/analyticsStore';
 import { useConfigStore } from '@/store/modules/configStore';
-import { useAppStore } from '@/store/modules/appStore';
+import { useAppStore } from '@poc/store/appStore';
 import { useUsersStore } from '@/store/modules/usersStore';
 import { useNotify } from '@/utils/hooks';
 import { MultiCaptchaConfig } from '@/types/config.gen';
@@ -179,7 +179,7 @@ const showPassword = ref(false);
 const isLoading = ref<boolean>(false);
 const isBadLoginMessageShown = ref<boolean>(false);
 const formValid = ref<boolean>(false);
-const inviteInvalid = ref(true);
+const inviteInvalid = ref(false);
 const isActivatedBannerShown = ref(false);
 const isActivatedError = ref(false);
 const captchaError = ref(false);
@@ -326,6 +326,7 @@ async function login(): Promise<void> {
         return;
     }
 
+    appStore.toggleHasJustLoggedIn(true);
     usersStore.login();
     isLoading.value = false;
 
