From f90665cce9c887ad726b7a6f57377de721816ee7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ars=C3=A8ne=20Reymond?=
 <66876397+p0lycarpio@users.noreply.github.com>
Date: Tue, 9 Sep 2025 19:21:58 +0200
Subject: [PATCH] feat: Improve first time setup ux (#6106)

---
 .../Domain/User/UserPasswordStrength.vue      |    2 +-
 .../Domain/User/UserRegistrationForm.vue      |    4 +-
 frontend/components/global/AppLogo.vue        |   48 +
 frontend/components/global/AutoForm.vue       |   78 +-
 frontend/components/global/BaseWizard.vue     |  293 -----
 frontend/pages/admin/setup.vue                | 1014 +++++++++--------
 frontend/pages/login.vue                      |   21 +-
 frontend/pages/register/index.vue             |   20 +-
 frontend/types/components.d.ts                |    4 +-
 9 files changed, 662 insertions(+), 822 deletions(-)
 create mode 100644 frontend/components/global/AppLogo.vue
 delete mode 100644 frontend/components/global/BaseWizard.vue

diff --git a/frontend/components/Domain/User/UserPasswordStrength.vue b/frontend/components/Domain/User/UserPasswordStrength.vue
index 4e05d76c2..a4871ad14 100644
--- a/frontend/components/Domain/User/UserPasswordStrength.vue
+++ b/frontend/components/Domain/User/UserPasswordStrength.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="d-flex justify-center pb-6 mt-n1">
+  <div class="d-flex pb-6 mt-n1 ml-10">
     <div style="flex-basis: 500px">
       <strong> {{ $t("user.password-strength", { strength: pwStrength.strength.value }) }}</strong>
       <v-progress-linear
diff --git a/frontend/components/Domain/User/UserRegistrationForm.vue b/frontend/components/Domain/User/UserRegistrationForm.vue
index 7677f4f57..f0ce05de2 100644
--- a/frontend/components/Domain/User/UserRegistrationForm.vue
+++ b/frontend/components/Domain/User/UserRegistrationForm.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <v-card-title>
+    <v-card-title class="pt-0">
       <v-icon
         size="large"
         class="mr-3"
@@ -10,7 +10,7 @@
       <span class="headline"> {{ $t("user-registration.account-details") }}</span>
     </v-card-title>
     <v-divider />
-    <v-card-text>
+    <v-card-text class="mt-2">
       <v-form
         ref="domAccountForm"
         @submit.prevent
diff --git a/frontend/components/global/AppLogo.vue b/frontend/components/global/AppLogo.vue
new file mode 100644
index 000000000..9d04d5530
--- /dev/null
+++ b/frontend/components/global/AppLogo.vue
@@ -0,0 +1,48 @@
+<template>
+  <div class="icon-container">
+    <v-divider class="icon-divider" />
+    <v-avatar
+      :class="['pa-2', 'icon-avatar']"
+      color="primary"
+      :size="size"
+    >
+      <slot>
+        <svg
+          class="icon-white"
+          viewBox="0 0 24 24"
+          :style="{ width: size + 'px', height: size + 'px' }"
+        >
+          <path
+            d="M8.1,13.34L3.91,9.16C2.35,7.59 2.35,5.06 3.91,3.5L10.93,10.5L8.1,13.34M13.41,13L20.29,19.88L18.88,21.29L12,14.41L5.12,21.29L3.71,19.88L13.36,10.22L13.16,10C12.38,9.23 12.38,7.97 13.16,7.19L17.5,2.82L18.43,3.74L15.19,7L16.15,7.94L19.39,4.69L20.31,5.61L17.06,8.85L18,9.81L21.26,6.56L22.18,7.5L17.81,11.84C17.03,12.62 15.77,12.62 15,11.84L14.78,11.64L13.41,13Z"
+          />
+        </svg>
+      </slot>
+    </v-avatar>
+  </div>
+</template>
+
+<script setup lang="ts">
+const { size } = withDefaults(defineProps<{ size?: number }>(), { size: 75 });
+</script>
+
+<style scoped>
+.icon-white {
+  fill: white;
+}
+.icon-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  position: relative;
+  margin-top: 2.5rem;
+}
+.icon-divider {
+  width: 100%;
+  margin-bottom: -2.5rem;
+}
+.icon-avatar {
+  border-color: rgba(0, 0, 0, 0.12);
+  border: 2px;
+}
+</style>
diff --git a/frontend/components/global/AutoForm.vue b/frontend/components/global/AutoForm.vue
index 95869f38b..27792d8ba 100644
--- a/frontend/components/global/AutoForm.vue
+++ b/frontend/components/global/AutoForm.vue
@@ -33,9 +33,10 @@
         <!-- Check Box -->
         <v-checkbox
           v-if="inputField.type === fieldTypes.BOOLEAN"
-          v-model="modelValue[inputField.varName]"
+          v-model="model[inputField.varName]"
           :name="inputField.varName"
-          :disabled="(inputField.disableUpdate && updateMode) || (!updateMode && inputField.disableCreate) || (disabledFields && disabledFields.includes(inputField.varName))"
+          :readonly="fieldState[inputField.varName]?.readonly"
+          :disabled="fieldState[inputField.varName]?.disabled"
           :hint="inputField.hint"
           :hide-details="!inputField.hint"
           :persistent-hint="!!inputField.hint"
@@ -51,9 +52,9 @@
         <!-- Text Field -->
         <v-text-field
           v-else-if="inputField.type === fieldTypes.TEXT || inputField.type === fieldTypes.PASSWORD"
-          v-model="modelValue[inputField.varName]"
-          :readonly="(inputField.disableUpdate && updateMode) || (!updateMode && inputField.disableCreate) || (readonlyFields && readonlyFields.includes(inputField.varName))"
-          :disabled="(inputField.disableUpdate && updateMode) || (!updateMode && inputField.disableCreate) || (disabledFields && disabledFields.includes(inputField.varName))"
+          v-model="model[inputField.varName]"
+          :readonly="fieldState[inputField.varName]?.readonly"
+          :disabled="fieldState[inputField.varName]?.disabled"
           :type="inputField.type === fieldTypes.PASSWORD ? 'password' : 'text'"
           variant="solo-filled"
           flat
@@ -62,7 +63,7 @@
           :label="inputField.label"
           :name="inputField.varName"
           :hint="inputField.hint || ''"
-          :rules="!(inputField.disableUpdate && updateMode) ? [...rulesByKey(inputField.rules), ...defaultRules] : []"
+          :rules="!(inputField.disableUpdate && updateMode) ? [...rulesByKey(inputField.rules as any), ...defaultRules] : []"
           lazy-validation
           @blur="emitBlur"
         />
@@ -70,9 +71,9 @@
         <!-- Text Area -->
         <v-textarea
           v-else-if="inputField.type === fieldTypes.TEXT_AREA"
-          v-model="modelValue[inputField.varName]"
-          :readonly="(inputField.disableUpdate && updateMode) || (!updateMode && inputField.disableCreate) || (readonlyFields && readonlyFields.includes(inputField.varName))"
-          :disabled="(inputField.disableUpdate && updateMode) || (!updateMode && inputField.disableCreate) || (disabledFields && disabledFields.includes(inputField.varName))"
+          v-model="model[inputField.varName]"
+          :readonly="fieldState[inputField.varName]?.readonly"
+          :disabled="fieldState[inputField.varName]?.disabled"
           variant="solo-filled"
           flat
           rows="3"
@@ -81,7 +82,7 @@
           :label="inputField.label"
           :name="inputField.varName"
           :hint="inputField.hint || ''"
-          :rules="[...rulesByKey(inputField.rules), ...defaultRules]"
+          :rules="[...rulesByKey(inputField.rules as any), ...defaultRules]"
           lazy-validation
           @blur="emitBlur"
         />
@@ -89,12 +90,11 @@
         <!-- Option Select -->
         <v-select
           v-else-if="inputField.type === fieldTypes.SELECT"
-          v-model="modelValue[inputField.varName]"
-          :readonly="(inputField.disableUpdate && updateMode) || (!updateMode && inputField.disableCreate) || (readonlyFields && readonlyFields.includes(inputField.varName))"
-          :disabled="(inputField.disableUpdate && updateMode) || (!updateMode && inputField.disableCreate) || (disabledFields && disabledFields.includes(inputField.varName))"
+          v-model="model[inputField.varName]"
+          :readonly="fieldState[inputField.varName]?.readonly"
+          :disabled="fieldState[inputField.varName]?.disabled"
           variant="solo-filled"
           flat
-          :prepend-icon="inputField.icons ? modelValue[inputField.varName] : null"
           :label="inputField.label"
           :name="inputField.varName"
           :items="inputField.options"
@@ -119,7 +119,7 @@
               <v-btn
                 class="my-2 ml-auto"
                 style="min-width: 200px"
-                :color="modelValue[inputField.varName]"
+                :color="model[inputField.varName]"
                 dark
                 v-bind="templateProps"
               >
@@ -127,7 +127,7 @@
               </v-btn>
             </template>
             <v-color-picker
-              v-model="modelValue[inputField.varName]"
+              v-model="model[inputField.varName]"
               value="#7417BE"
               hide-canvas
               hide-inputs
@@ -138,11 +138,12 @@
           </v-menu>
         </div>
 
+        <!-- Object Type -->
         <div v-else-if="inputField.type === fieldTypes.OBJECT">
           <auto-form
-            v-model="modelValue[inputField.varName]"
+            v-model="model[inputField.varName]"
             :color="color"
-            :items="inputField.items"
+            :items="(inputField as any).items"
             @blur="emitBlur"
           />
         </div>
@@ -150,7 +151,7 @@
         <!-- List Type -->
         <div v-else-if="inputField.type === fieldTypes.LIST">
           <div
-            v-for="(item, idx) in modelValue[inputField.varName]"
+            v-for="(item, idx) in model[inputField.varName]"
             :key="idx"
           >
             <p>
@@ -160,15 +161,15 @@
                   class="ml-5"
                   x-small
                   delete
-                  @click="removeByIndex(modelValue[inputField.varName], idx)"
+                  @click="removeByIndex(model[inputField.varName], idx)"
                 />
               </span>
             </p>
             <v-divider class="mb-5 mx-2" />
             <auto-form
-              v-model="modelValue[inputField.varName][idx]"
+              v-model="model[inputField.varName][idx]"
               :color="color"
-              :items="inputField.items"
+              :items="(inputField as any).items"
               @blur="emitBlur"
             />
           </div>
@@ -176,7 +177,7 @@
             <v-spacer />
             <BaseButton
               small
-              @click="modelValue[inputField.varName].push(getTemplate(inputField.items))"
+              @click="model[inputField.varName].push(getTemplate((inputField as any).items))"
             >
               {{ $t("general.new") }}
             </BaseButton>
@@ -197,7 +198,13 @@ const BLUR_EVENT = "blur";
 type ValidatorKey = keyof typeof validators;
 
 // Use defineModel for v-model
-const modelValue = defineModel<[object, Array<any>]>();
+const modelValue = defineModel<Record<string, any> | any[]>({
+  type: [Object, Array],
+  required: true,
+});
+
+// alias to avoid template TS complaining about possible undefined
+const model = modelValue as any;
 
 const props = defineProps({
   updateMode: {
@@ -238,26 +245,39 @@ const emit = defineEmits(["blur", "update:modelValue"]);
 
 function rulesByKey(keys?: ValidatorKey[] | null) {
   if (keys === undefined || keys === null) {
-    return [];
+    return [] as any[];
   }
 
-  const list = [] as ((v: string) => boolean | string)[];
+  const list: any[] = [];
   keys.forEach((key) => {
     const split = key.split(":");
     const validatorKey = split[0] as ValidatorKey;
     if (validatorKey in validators) {
       if (split.length === 1) {
-        list.push(validators[validatorKey]);
+        list.push((validators as any)[validatorKey]);
       }
       else {
-        list.push(validators[validatorKey](split[1]));
+        list.push((validators as any)[validatorKey](split[1] as any));
       }
     }
   });
   return list;
 }
 
-const defaultRules = computed(() => rulesByKey(props.globalRules as ValidatorKey[]));
+const defaultRules = computed<any[]>(() => rulesByKey(props.globalRules as any));
+
+// Combined state map for readonly and disabled fields
+const fieldState = computed<Record<string, { readonly: boolean; disabled: boolean }>>(() => {
+  const map: Record<string, { readonly: boolean; disabled: boolean }> = {};
+  (props.items || []).forEach((field: any) => {
+    const base = (field.disableUpdate && props.updateMode) || (!props.updateMode && field.disableCreate);
+    map[field.varName] = {
+      readonly: base || !!props.readonlyFields?.includes(field.varName),
+      disabled: base || !!props.disabledFields?.includes(field.varName),
+    };
+  });
+  return map;
+});
 
 function removeByIndex(list: never[], index: number) {
   // Removes the item at the index
diff --git a/frontend/components/global/BaseWizard.vue b/frontend/components/global/BaseWizard.vue
deleted file mode 100644
index 102f068c8..000000000
--- a/frontend/components/global/BaseWizard.vue
+++ /dev/null
@@ -1,293 +0,0 @@
-<template>
-  <div :style="`width: ${width}; height: 100%;`">
-    <LanguageDialog v-model="langDialog" />
-    <v-card>
-      <div>
-        <v-toolbar
-          width="100%"
-          color="primary"
-          class="d-flex justify-center"
-          style="margin-bottom: 4rem"
-          dark
-        >
-          <v-toolbar-title class="headline text-h4 text-center mx-0">
-            Mealie
-          </v-toolbar-title>
-        </v-toolbar>
-
-        <div class="icon-container">
-          <v-divider class="icon-divider" />
-          <v-avatar
-            class="pa-2 icon-avatar"
-            color="primary"
-            size="75"
-          >
-            <svg
-              class="icon-white"
-              style="width: 75"
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M8.1,13.34L3.91,9.16C2.35,7.59 2.35,5.06 3.91,3.5L10.93,10.5L8.1,13.34M13.41,13L20.29,19.88L18.88,21.29L12,14.41L5.12,21.29L3.71,19.88L13.36,10.22L13.16,10C12.38,9.23 12.38,7.97 13.16,7.19L17.5,2.82L18.43,3.74L15.19,7L16.15,7.94L19.39,4.69L20.31,5.61L17.06,8.85L18,9.81L21.26,6.56L22.18,7.5L17.81,11.84C17.03,12.62 15.77,12.62 15,11.84L14.78,11.64L13.41,13Z"
-              />
-            </svg>
-          </v-avatar>
-        </div>
-      </div>
-      <div class="d-flex justify-center grow items-center my-4">
-        <slot :width="pageWidth" />
-      </div>
-      <div class="mx-2 my-4">
-        <v-progress-linear
-          v-if="wizardPage > 0"
-          :value="Math.ceil((wizardPage / maxPageNumber) * 100)"
-          striped
-          height="10"
-        />
-      </div>
-      <v-divider class="ma-2" />
-      <v-card-actions width="100%">
-        <v-btn
-          v-if="prevButtonShow"
-          :disabled="!prevButtonEnable"
-          :color="prevButtonColor"
-          @click="decrementPage"
-        >
-          <v-icon v-if="prevButtonIconRef">
-            {{ prevButtonIconRef }}
-          </v-icon>
-          {{ prevButtonTextRef }}
-        </v-btn>
-        <v-spacer />
-        <v-btn
-          v-if="nextButtonShow"
-          variant="elevated"
-          :disabled="!nextButtonEnable"
-          :color="nextButtonColorRef"
-          @click="incrementPage"
-        >
-          <div v-if="isSubmitting">
-            <v-progress-circular
-              indeterminate
-              color="white"
-              size="24"
-            />
-          </div>
-          <div v-else>
-            <v-icon v-if="nextButtonIconRef && !nextButtonIconAfter">
-              {{ nextButtonIconRef }}
-            </v-icon>
-            {{ nextButtonTextRef }}
-            <v-icon v-if="nextButtonIconRef && nextButtonIconAfter">
-              {{ nextButtonIconRef }}
-            </v-icon>
-          </div>
-        </v-btn>
-      </v-card-actions>
-      <v-card-actions class="justify-center flex-column py-8">
-        <BaseButton
-          large
-          color="primary"
-          @click="langDialog = true"
-        >
-          <template #icon>
-            {{ $globals.icons.translate }}
-          </template>
-          {{ $t("language-dialog.choose-language") }}
-        </BaseButton>
-      </v-card-actions>
-    </v-card>
-  </div>
-</template>
-
-<script lang="ts">
-export default defineNuxtComponent({
-  props: {
-    modelValue: {
-      type: Number,
-      required: true,
-    },
-    minPageNumber: {
-      type: Number,
-      default: 0,
-    },
-    maxPageNumber: {
-      type: Number,
-      required: true,
-    },
-    width: {
-      type: [String, Number],
-      default: "1200px",
-    },
-    pageWidth: {
-      type: [String, Number],
-      default: "600px",
-    },
-    prevButtonText: {
-      type: String,
-      default: undefined,
-    },
-    prevButtonIcon: {
-      type: String,
-      default: null,
-    },
-    prevButtonColor: {
-      type: String,
-      default: "grey-darken-3",
-    },
-    prevButtonShow: {
-      type: Boolean,
-      default: true,
-    },
-    prevButtonEnable: {
-      type: Boolean,
-      default: true,
-    },
-    nextButtonText: {
-      type: String,
-      default: undefined,
-    },
-    nextButtonIcon: {
-      type: String,
-      default: null,
-    },
-    nextButtonIconAfter: {
-      type: Boolean,
-      default: true,
-    },
-    nextButtonColor: {
-      type: String,
-      default: undefined,
-    },
-    nextButtonShow: {
-      type: Boolean,
-      default: true,
-    },
-    nextButtonEnable: {
-      type: Boolean,
-      default: true,
-    },
-    nextButtonIsSubmit: {
-      type: Boolean,
-      default: false,
-    },
-    title: {
-      type: String,
-      required: true,
-    },
-    icon: {
-      type: String,
-      default: null,
-    },
-    isSubmitting: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  emits: ["update:modelValue", "submit"],
-  setup(props, context) {
-    const i18n = useI18n();
-    const { $globals } = useNuxtApp();
-    const ready = ref(false);
-    const langDialog = ref(false);
-
-    const wizardPage = computed({
-      get: () => props.modelValue,
-      set: value => context.emit("update:modelValue", value),
-    });
-
-    const prevButtonTextRef = computed(() => props.prevButtonText || i18n.t("general.back"));
-    const prevButtonIconRef = computed(() => props.prevButtonIcon || $globals.icons.back);
-    const nextButtonTextRef = computed(
-      () => props.nextButtonText || (
-        props.nextButtonIsSubmit ? i18n.t("general.submit") : i18n.t("general.next")
-      ),
-    );
-    const nextButtonIconRef = computed(
-      () => props.nextButtonIcon || (
-        props.nextButtonIsSubmit ? $globals.icons.createAlt : $globals.icons.forward
-      ),
-    );
-    const nextButtonColorRef = computed(
-      () => props.nextButtonColor || (props.nextButtonIsSubmit ? "success" : "info"),
-    );
-
-    function goToPage(page: number) {
-      if (page < props.minPageNumber) {
-        goToPage(props.minPageNumber);
-        return;
-      }
-      else if (page > props.maxPageNumber) {
-        goToPage(props.maxPageNumber);
-        return;
-      }
-      wizardPage.value = page;
-    }
-
-    function decrementPage() {
-      goToPage(wizardPage.value - 1);
-    }
-
-    function incrementPage() {
-      if (props.nextButtonIsSubmit) {
-        context.emit("submit", wizardPage.value);
-      }
-      else {
-        goToPage(wizardPage.value + 1);
-      }
-    }
-
-    ready.value = true;
-
-    return {
-      wizardPage,
-      ready,
-      langDialog,
-      prevButtonTextRef,
-      prevButtonIconRef,
-      nextButtonTextRef,
-      nextButtonIconRef,
-      nextButtonColorRef,
-      decrementPage,
-      incrementPage,
-    };
-  },
-});
-</script>
-
-<style lang="css" scoped>
-.icon-primary {
-  fill: var(--v-primary-base);
-}
-
-.icon-white {
-  fill: white;
-}
-
-.icon-container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 100%;
-  position: relative;
-  margin-top: 2.5rem;
-}
-
-.icon-divider {
-  width: 100%;
-  margin-bottom: -2.5rem;
-}
-
-.icon-avatar {
-  border-color: rgba(0, 0, 0, 0.12);
-  border: 2px;
-}
-
-.bg-off-white {
-  background: #f5f8fa;
-}
-
-.preferred-width {
-  width: 840px;
-}
-</style>
diff --git a/frontend/pages/admin/setup.vue b/frontend/pages/admin/setup.vue
index 31c5c3879..00970d191 100644
--- a/frontend/pages/admin/setup.vue
+++ b/frontend/pages/admin/setup.vue
@@ -1,115 +1,239 @@
 <template>
   <v-container
-    fill-height
     fluid
-    class="d-flex justify-center align-center"
-    width="1200px"
-    min-height="700px"
+    class="d-flex justify-center  align-start  fill-height"
     :class="{
-      'bg-off-white': !$vuetify.theme.current.dark,
+      'bg-off-white': !$vuetify.theme.current.dark && !isDark,
     }"
   >
-    <BaseWizard
-      v-model="currentPage"
-      :max-page-number="totalPages"
-      :title="$t('admin.setup.first-time-setup')"
-      :prev-button-show="activeConfig.showPrevButton"
-      :next-button-show="activeConfig.showNextButton"
-      :next-button-text="activeConfig.nextButtonText"
-      :next-button-icon="activeConfig.nextButtonIcon"
-      :next-button-color="activeConfig.nextButtonColor"
-      :next-button-is-submit="activeConfig.isSubmit"
-      :is-submitting="isSubmitting"
-      @submit="handleSubmit"
-    >
-      <v-container
-        v-if="currentPage === Pages.LANDING"
-        class="mb-12"
+    <!-- Header Toolbar -->
+    <v-card class="elevation-4" width="1200" :class="{ 'my-10': $vuetify.display.mdAndUp }">
+      <v-toolbar
+        color="primary"
+        class="d-flex justify-center"
+        dark
       >
-        <v-card-title class="text-h4 justify-center text-center">
-          {{ $t('admin.setup.welcome-to-mealie-get-started') }}
-        </v-card-title>
-        <v-btn
-          :to="groupSlug ? `/g/${groupSlug}` : '/login'"
-          rounded
-          variant="outlined"
-          color="grey-lighten-1"
-          class="text-subtitle-2 d-flex mx-auto"
-          style="width: fit-content;"
-        >
-          {{ $t('admin.setup.already-set-up-bring-to-homepage') }}
-        </v-btn>
-      </v-container>
+        <v-toolbar-title class="headline text-h4 text-center mx-0">
+          Mealie
+        </v-toolbar-title>
+      </v-toolbar>
 
-      <v-container v-if="currentPage === Pages.USER_INFO">
-        <UserRegistrationForm />
-      </v-container>
-
-      <v-container v-if="currentPage === Pages.PAGE_2">
-        <v-card-title class="headline justify-center pa-0">
-          {{ $t('admin.setup.common-settings-for-new-sites') }}
-        </v-card-title>
-        <AutoForm
-          v-model="commonSettings"
-          :items="commonSettingsForm"
+    <!-- Stepper Wizard -->
+    <v-stepper v-model="currentPage" mobile-breakpoint="sm">
+      <v-stepper-header>
+        <v-stepper-item
+          :value="Pages.LANDING"
+          :complete="currentPage > Pages.LANDING"
+          :title="$t('general.start')"
         />
-      </v-container>
+        <v-divider />
+        <v-stepper-item
+          :value="Pages.USER_INFO"
+          :complete="currentPage > Pages.USER_INFO"
+          :title="$t('user-registration.account-details')"
+        />
+        <v-divider />
+        <v-stepper-item
+          :value="Pages.PAGE_2"
+          :complete="currentPage > Pages.PAGE_2"
+          :title="$t('settings.site-settings')"
+        />
+        <v-divider />
+        <v-stepper-item
+          :value="Pages.CONFIRM"
+          :complete="currentPage > Pages.CONFIRM"
+          :title="$t('admin.maintenance.summary-title')"
+        />
+        <v-divider />
+        <v-stepper-item
+          :value="Pages.END"
+          :complete="currentPage > Pages.END"
+          :title="$t('admin.setup.setup-complete')"
+        />
+      </v-stepper-header>
+      <v-progress-linear
+            v-if="isSubmitting && currentPage === Pages.CONFIRM"
+            color="primary"
+            indeterminate
+            class="mb-2"
+          />
 
-      <v-container v-if="currentPage === Pages.CONFIRM">
-        <v-card-title class="headline justify-center">
-          {{ $t("general.confirm-how-does-everything-look") }}
-        </v-card-title>
-        <v-list>
-          <template v-for="(item, idx) in confirmationData">
-            <v-list-item
-              v-if="item.display"
-              :key="idx"
+      <v-stepper-window :transition="false" class="stepper-window">
+        <!-- LANDING -->
+        <v-stepper-window-item :value="Pages.LANDING">
+          <v-container class="mb-12">
+            <AppLogo />
+            <v-card-title class="text-h4 justify-center text-center text-break text-pre-wrap">
+              {{ $t('admin.setup.welcome-to-mealie-get-started') }}
+            </v-card-title>
+            <v-btn
+              :to="groupSlug ? `/g/${groupSlug}` : '/login'"
+              rounded
+              variant="outlined"
+              color="grey-lighten-1"
+              class="text-subtitle-2 d-flex mx-auto"
+              style="width: fit-content;"
             >
-              <v-list-item-title>{{ item.text }}</v-list-item-title>
-              <v-list-item-subtitle>{{ item.value }}</v-list-item-subtitle>
-            </v-list-item>
-            <v-divider
-              v-if="idx !== confirmationData.length - 1"
-              :key="`divider-${idx}`"
-            />
-          </template>
-        </v-list>
-      </v-container>
+              {{ $t('admin.setup.already-set-up-bring-to-homepage') }}
+            </v-btn>
+          </v-container>
 
-      <v-container v-if="currentPage === Pages.END">
-        <v-card-title class="text-h4 justify-center">
-          {{ $t('admin.setup.setup-complete') }}
-        </v-card-title>
-        <v-card-title class="text-h6 justify-center">
-          {{ $t('admin.setup.here-are-a-few-things-to-help-you-get-started') }}
-        </v-card-title>
-        <div
-          v-for="link, idx in setupCompleteLinks"
-          :key="idx"
-          class="px-4 pt-4"
-        >
-          <div v-if="link.section">
-            <v-divider v-if="idx" />
-            <v-card-text class="headline pl-0">
-              {{ link.section }}
-            </v-card-text>
-          </div>
-          <v-btn
-            :to="link.to"
-            color="info"
+          <v-card-actions class="justify-center flex-column py-8">
+            <BaseButton
+              size="large"
+              color="primary"
+              :icon="$globals.icons.translate"
+              @click="langDialog = true"
+            >
+              {{ $t('language-dialog.choose-language') }}
+            </BaseButton>
+          </v-card-actions>
+
+          <v-stepper-actions
+            class="justify-end"
+            :disabled="isSubmitting"
+            next-text="general.next"
+            @click:next="onNext"
           >
-            {{ link.text }}
-          </v-btn>
-          <v-card-text class="subtitle px-0 py-2">
-            {{ link.description }}
-          </v-card-text>
-        </div>
-      </v-container>
-    </BaseWizard>
-  </v-container>
+            <template #prev />
+          </v-stepper-actions>
+        </v-stepper-window-item>
+
+        <!-- USER INFO -->
+        <v-stepper-window-item :value="Pages.USER_INFO" eager>
+          <v-container max-width="880">
+            <UserRegistrationForm />
+          </v-container>
+          <v-stepper-actions
+            :disabled="isSubmitting"
+            prev-text="general.back"
+            next-text="general.next"
+            @click:prev="onPrev"
+            @click:next="onNext"
+          />
+        </v-stepper-window-item>
+
+        <!-- COMMON SETTINGS -->
+        <v-stepper-window-item :value="Pages.PAGE_2">
+          <v-container max-width="880">
+            <v-card-title class="headline pa-0">
+              {{ $t('admin.setup.common-settings-for-new-sites') }}
+            </v-card-title>
+            <AutoForm
+              v-model="commonSettings"
+              :items="commonSettingsForm"
+            />
+          </v-container>
+          <v-stepper-actions
+            :disabled="isSubmitting"
+            prev-text="general.back"
+            next-text="general.next"
+            @click:prev="onPrev"
+            @click:next="onNext"
+          />
+        </v-stepper-window-item>
+
+        <!-- CONFIRMATION -->
+        <v-stepper-window-item :value="Pages.CONFIRM">
+          <v-container max-width="880">
+            <v-card-title class="headline pa-0">
+              {{ $t('general.confirm-how-does-everything-look') }}
+            </v-card-title>
+            <v-list>
+              <template v-for="(item, idx) in confirmationData">
+                <v-list-item
+                  v-if="item.display"
+                  :key="idx"
+                  class="px-0"
+                >
+                  <v-list-item-title>{{ item.text }}</v-list-item-title>
+                  <v-list-item-subtitle>{{ item.value }}</v-list-item-subtitle>
+                </v-list-item>
+                <v-divider
+                  v-if="idx !== confirmationData.length - 1"
+                  :key="`divider-${idx}`"
+                />
+              </template>
+            </v-list>
+          </v-container>
+          <v-stepper-actions
+            :disabled="isSubmitting"
+            prev-text="general.back"
+            @click:prev="onPrev"
+          >
+            <template #next>
+              <BaseButton
+                create flat
+                :disabled="isSubmitting"
+                :loading="isSubmitting"
+                :icon="$globals.icons.check"
+                :text="$t('general.submit')"
+                @click="onNext"
+              />
+            </template>
+          </v-stepper-actions>
+        </v-stepper-window-item>
+
+        <!-- END -->
+        <v-stepper-window-item :value="Pages.END">
+          <v-container max-width="880">
+            <v-card-title class="text-h4 justify-center">
+              {{ $t('admin.setup.setup-complete') }}
+            </v-card-title>
+            <v-card-title class="text-h6 justify-center">
+              {{ $t('admin.setup.here-are-a-few-things-to-help-you-get-started') }}
+            </v-card-title>
+            <div
+              v-for="link, idx in setupCompleteLinks"
+              :key="idx"
+              class="px-4 pt-4"
+            >
+              <div v-if="link.section">
+                <v-divider v-if="idx" />
+                <v-card-text class="headline pl-0">
+                  {{ link.section }}
+                </v-card-text>
+              </div>
+              <v-btn
+                :to="link.to"
+                color="info"
+              >
+                {{ link.text }}
+              </v-btn>
+              <v-card-text class="subtitle px-0 py-2">
+                {{ link.description }}
+              </v-card-text>
+            </div>
+          </v-container>
+          <v-stepper-actions
+            :disabled="isSubmitting"
+            prev-text="general.back"
+            @click:prev="onPrev"
+          >
+            <template #next>
+              <BaseButton
+                flat
+                color="primary"
+                :disabled="isSubmitting"
+                :loading="isSubmitting"
+                :icon="$globals.icons.home"
+                :text="$t('general.home')"
+                @click="onFinish"
+              />
+            </template>
+          </v-stepper-actions>
+        </v-stepper-window-item>
+      </v-stepper-window>
+    </v-stepper>
+
+    <!-- Dialog Language -->
+    <LanguageDialog v-model="langDialog" />
+	</v-card>
+</v-container>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { useDark } from "@vueuse/core";
 import { useAdminApi, useUserApi } from "~/composables/api";
 import { useLocales } from "~/composables/use-locales";
 import { alert } from "~/composables/use-toast";
@@ -117,363 +241,343 @@ import { useUserRegistrationForm } from "~/composables/use-users/user-registrati
 import { useCommonSettingsForm } from "~/composables/use-setup/common-settings-form";
 import UserRegistrationForm from "~/components/Domain/User/UserRegistrationForm.vue";
 
-export default defineNuxtComponent({
-  components: { UserRegistrationForm },
-  setup() {
-    definePageMeta({
-      layout: "blank",
-    });
-
-    // ================================================================
-    // Setup
-    const i18n = useI18n();
-    const $auth = useMealieAuth();
-    const { $globals } = useNuxtApp();
-    const userApi = useUserApi();
-    const adminApi = useAdminApi();
-
-    const groupSlug = computed(() => $auth.user.value?.groupSlug);
-    const { locale } = useLocales();
-    const router = useRouter();
-    const isSubmitting = ref(false);
-    useSeoMeta({
-      title: i18n.t("admin.setup.first-time-setup"),
-    });
-
-    if (!$auth.loggedIn.value) {
-      router.push("/login");
-    }
-    else if (!$auth.user.value?.admin) {
-      router.push(groupSlug.value ? `/g/${groupSlug.value}` : "/login");
-    }
-
-		type Config = {
-		  nextButtonText: string | undefined;
-		  nextButtonIcon: string | undefined;
-		  nextButtonColor: string | undefined;
-		  showPrevButton: boolean;
-		  showNextButton: boolean;
-		  isSubmit: boolean;
-		};
-
-		const totalPages = 4;
-		enum Pages {
-		  LANDING = 0,
-		  USER_INFO = 1,
-		  PAGE_2 = 2,
-		  CONFIRM = 3,
-		  END = 4,
-		}
-
-		// ================================================================
-		// Forms
-		const { accountDetails, credentials } = useUserRegistrationForm();
-		const { commonSettingsForm } = useCommonSettingsForm();
-		const commonSettings = ref({
-		  makeGroupRecipesPublic: false,
-		  useSeedData: true,
-		});
-
-		const confirmationData = computed(() => {
-		  return [
-		    {
-		      display: true,
-		      text: i18n.t("user.email"),
-		      value: accountDetails.email.value,
-		    },
-		    {
-		      display: true,
-		      text: i18n.t("user.username"),
-		      value: accountDetails.username.value,
-		    },
-		    {
-		      display: true,
-		      text: i18n.t("user.full-name"),
-		      value: accountDetails.fullName.value,
-		    },
-		    {
-		      display: true,
-		      text: i18n.t("user.enable-advanced-content"),
-		      value: accountDetails.advancedOptions.value ? i18n.t("general.yes") : i18n.t("general.no"),
-		    },
-		    {
-		      display: true,
-		      text: i18n.t("group.enable-public-access"),
-		      value: commonSettings.value.makeGroupRecipesPublic ? i18n.t("general.yes") : i18n.t("general.no"),
-		    },
-		    {
-		      display: true,
-		      text: i18n.t("user-registration.use-seed-data"),
-		      value: commonSettings.value.useSeedData ? i18n.t("general.yes") : i18n.t("general.no"),
-		    },
-		  ];
-		});
-
-		const setupCompleteLinks = ref([
-		  {
-		    section: i18n.t("profile.data-migrations"),
-		    to: "/admin/backups",
-		    text: i18n.t("settings.backup.backup-restore"),
-		    description: i18n.t("admin.setup.restore-from-v1-backup"),
-		  },
-		  {
-		    to: "/group/migrations",
-		    text: i18n.t("migration.recipe-migration"),
-		    description: i18n.t("migration.coming-from-another-application-or-an-even-older-version-of-mealie"),
-		  },
-		  {
-		    section: i18n.t("recipe.create-recipes"),
-		    to: computed(() => `/g/${groupSlug.value || ""}/r/create/new`),
-		    text: i18n.t("recipe.create-recipe"),
-		    description: i18n.t("recipe.create-recipe-description"),
-		  },
-		  {
-		    to: computed(() => `/g/${groupSlug.value || ""}/r/create/url`),
-		    text: i18n.t("recipe.import-with-url"),
-		    description: i18n.t("recipe.scrape-recipe-description"),
-		  },
-		  {
-		    section: i18n.t("user.manage-users"),
-		    to: "/admin/manage/users",
-		    text: i18n.t("user.manage-users"),
-		    description: i18n.t("user.manage-users-description"),
-		  },
-		  {
-		    to: "/user/profile",
-		    text: i18n.t("profile.manage-user-profile"),
-		    description: i18n.t("admin.setup.manage-profile-or-get-invite-link"),
-		  },
-		]);
-
-		// ================================================================
-		// Page Navigation
-		const currentPage = ref(0);
-		const activeConfig = computed<Config>(() => {
-		  const config: Config = {
-		    nextButtonText: undefined,
-		    nextButtonIcon: undefined,
-		    nextButtonColor: undefined,
-		    showPrevButton: true,
-		    showNextButton: true,
-		    isSubmit: false,
-		  };
-
-		  switch (currentPage.value) {
-		    case Pages.LANDING:
-		      config.showPrevButton = false;
-		      config.nextButtonText = i18n.t("general.start");
-		      config.nextButtonIcon = $globals.icons.forward;
-		      break;
-		    case Pages.USER_INFO:
-		      config.showPrevButton = false;
-		      config.nextButtonText = i18n.t("general.next");
-		      config.nextButtonIcon = $globals.icons.forward;
-		      config.isSubmit = true;
-		      break;
-		    case Pages.CONFIRM:
-		      config.isSubmit = true;
-		      break;
-		    case Pages.END:
-		      config.nextButtonText = i18n.t("general.home");
-		      config.nextButtonIcon = $globals.icons.home;
-		      config.nextButtonColor = "primary";
-		      config.showPrevButton = false;
-		      config.isSubmit = true;
-		      break;
-		  }
-
-		  return config;
-		});
-
-		// ================================================================
-		// Page Submission
-
-		async function updateUser() {
-		  // Note: $auth.user is now a ref
-		  const { response } = await userApi.users.updateOne($auth.user.value!.id, {
-		    ...$auth.user.value,
-		    email: accountDetails.email.value,
-		    username: accountDetails.username.value,
-		    fullName: accountDetails.fullName.value,
-		    advancedOptions: accountDetails.advancedOptions.value,
-		  });
-
-		  if (!response || response.status !== 200) {
-		    alert.error(i18n.t("events.something-went-wrong"));
-		  }
-		  else {
-		    $auth.refresh();
-		    /* $auth.setUser({
-					...$auth.user.value,
-					email: accountDetails.email.value,
-					username: accountDetails.username.value,
-					fullName: accountDetails.fullName.value,
-				}) */
-		  }
-		}
-
-		async function updatePassword() {
-		  const { response } = await userApi.users.changePassword({
-		    currentPassword: "MyPassword",
-		    newPassword: credentials.password1.value,
-		  });
-
-		  if (!response || response.status !== 200) {
-		    alert.error(i18n.t("events.something-went-wrong"));
-		  }
-		}
-
-		async function submitRegistration() {
-		  // the backend will only update the password without the "currentPassword" field if the user is the default user,
-		  // so we update the password first, then update the user's details
-		  await updatePassword().then(updateUser);
-		}
-
-		async function updateGroup() {
-		  // Note: $auth.user is now a ref
-		  const { data } = await userApi.groups.getOne($auth.user.value!.groupId);
-		  if (!data || !data.preferences) {
-		    alert.error(i18n.t("events.something-went-wrong"));
-		    return;
-		  }
-
-		  const preferences = {
-		    ...data.preferences,
-		    privateGroup: !commonSettings.value.makeGroupRecipesPublic,
-		  };
-
-		  const payload = {
-		    ...data,
-		    preferences,
-		  };
-
-		  // Note: $auth.user is now a ref
-		  const { response } = await userApi.groups.updateOne($auth.user.value!.groupId, payload);
-		  if (!response || response.status !== 200) {
-		    alert.error(i18n.t("events.something-went-wrong"));
-		  }
-		}
-
-		async function updateHousehold() {
-		  // Note: $auth.user is now a ref
-		  const { data } = await adminApi.households.getOne($auth.user.value!.householdId);
-		  if (!data || !data.preferences) {
-		    alert.error(i18n.t("events.something-went-wrong"));
-		    return;
-		  }
-
-		  const preferences = {
-		    ...data.preferences,
-		    privateHousehold: !commonSettings.value.makeGroupRecipesPublic,
-		    recipePublic: commonSettings.value.makeGroupRecipesPublic,
-		  };
-
-		  const payload = {
-		    ...data,
-		    preferences,
-		  };
-
-		  // Note: $auth.user is now a ref
-		  const { response } = await adminApi.households.updateOne($auth.user.value!.householdId, payload);
-		  if (!response || response.status !== 200) {
-		    alert.error(i18n.t("events.something-went-wrong"));
-		  }
-		}
-
-		async function seedFoods() {
-		  const { response } = await userApi.seeders.foods({ locale: locale.value });
-		  if (!response || response.status !== 200) {
-		    alert.error(i18n.t("events.something-went-wrong"));
-		  }
-		}
-
-		async function seedUnits() {
-		  const { response } = await userApi.seeders.units({ locale: locale.value });
-		  if (!response || response.status !== 200) {
-		    alert.error(i18n.t("events.something-went-wrong"));
-		  }
-		}
-
-		async function seedLabels() {
-		  const { response } = await userApi.seeders.labels({ locale: locale.value });
-		  if (!response || response.status !== 200) {
-		    alert.error(i18n.t("events.something-went-wrong"));
-		  }
-		}
-
-		async function seedData() {
-		  if (!commonSettings.value.useSeedData) {
-		    return;
-		  }
-
-		  const tasks = [
-		    seedFoods(),
-		    seedUnits(),
-		    seedLabels(),
-		  ];
-
-		  await Promise.all(tasks);
-		}
-
-		async function submitCommonSettings() {
-		  const tasks = [
-		    updateGroup(),
-		    updateHousehold(),
-		    seedData(),
-		  ];
-
-		  await Promise.all(tasks);
-		}
-
-		async function submitAll() {
-		  const tasks = [
-		    submitRegistration(),
-		    submitCommonSettings(),
-		  ];
-
-		  await Promise.all(tasks);
-		}
-
-		async function handleSubmit(page: number) {
-		  if (isSubmitting.value) {
-		    return;
-		  }
-
-		  isSubmitting.value = true;
-		  switch (page) {
-		    case Pages.USER_INFO:
-		      if (await accountDetails.validate()) {
-		        currentPage.value += 1;
-		      }
-		      break;
-		    case Pages.CONFIRM:
-		      await submitAll();
-		      currentPage.value += 1;
-		      break;
-		    case Pages.END:
-		      router.push(groupSlug.value ? `/g/${groupSlug.value}` : "/login");
-		      break;
-		  }
-		  isSubmitting.value = false;
-		}
-
-		return {
-		  // Setup
-		  groupSlug,
-		  // Forms
-		  commonSettingsForm,
-		  commonSettings,
-		  confirmationData,
-		  setupCompleteLinks,
-		  // Page Navigation
-		  Pages,
-		  currentPage,
-		  totalPages,
-		  activeConfig,
-		  // Page Submission
-		  isSubmitting,
-		  handleSubmit,
-		};
-  },
+definePageMeta({
+  layout: "blank",
 });
+
+// ================================================================
+// Setup
+const i18n = useI18n();
+const $auth = useMealieAuth();
+const userApi = useUserApi();
+const adminApi = useAdminApi();
+
+const groupSlug = computed(() => $auth.user.value?.groupSlug);
+const { locale } = useLocales();
+const router = useRouter();
+const isSubmitting = ref(false);
+const langDialog = ref(false);
+const isDark = useDark();
+
+useSeoMeta({
+  title: i18n.t("admin.setup.first-time-setup"),
+});
+
+if (!$auth.loggedIn.value) {
+  router.push("/login");
+}
+else if (!$auth.user.value?.admin) {
+  router.push(groupSlug.value ? `/g/${groupSlug.value}` : "/login");
+}
+
+enum Pages {
+  LANDING = 0,
+  USER_INFO = 1,
+  PAGE_2 = 2,
+  CONFIRM = 3,
+  END = 4,
+}
+
+// ================================================================
+// Forms
+const { accountDetails, credentials } = useUserRegistrationForm();
+const { commonSettingsForm } = useCommonSettingsForm();
+const commonSettings = ref({
+  makeGroupRecipesPublic: false,
+  useSeedData: true,
+});
+
+const confirmationData = computed(() => {
+  return [
+    {
+      display: true,
+      text: i18n.t("user.email"),
+      value: accountDetails.email.value,
+    },
+    {
+      display: true,
+      text: i18n.t("user.username"),
+      value: accountDetails.username.value,
+    },
+    {
+      display: true,
+      text: i18n.t("user.full-name"),
+      value: accountDetails.fullName.value,
+    },
+    {
+      display: true,
+      text: i18n.t("user.enable-advanced-content"),
+      value: accountDetails.advancedOptions.value ? i18n.t("general.yes") : i18n.t("general.no"),
+    },
+    {
+      display: true,
+      text: i18n.t("group.enable-public-access"),
+      value: commonSettings.value.makeGroupRecipesPublic ? i18n.t("general.yes") : i18n.t("general.no"),
+    },
+    {
+      display: true,
+      text: i18n.t("user-registration.use-seed-data"),
+      value: commonSettings.value.useSeedData ? i18n.t("general.yes") : i18n.t("general.no"),
+    },
+  ];
+});
+
+const setupCompleteLinks = ref([
+  {
+    section: i18n.t("profile.data-migrations"),
+    to: "/admin/backups",
+    text: i18n.t("settings.backup.backup-restore"),
+    description: i18n.t("admin.setup.restore-from-v1-backup"),
+  },
+  {
+    to: "/group/migrations",
+    text: i18n.t("migration.recipe-migration"),
+    description: i18n.t("migration.coming-from-another-application-or-an-even-older-version-of-mealie"),
+  },
+  {
+    section: i18n.t("recipe.create-recipes"),
+    to: computed(() => `/g/${groupSlug.value || ""}/r/create/new`),
+    text: i18n.t("recipe.create-recipe"),
+    description: i18n.t("recipe.create-recipe-description"),
+  },
+  {
+    to: computed(() => `/g/${groupSlug.value || ""}/r/create/url`),
+    text: i18n.t("recipe.import-with-url"),
+    description: i18n.t("recipe.scrape-recipe-description"),
+  },
+  {
+    section: i18n.t("user.manage-users"),
+    to: "/admin/manage/users",
+    text: i18n.t("user.manage-users"),
+    description: i18n.t("user.manage-users-description"),
+  },
+  {
+    to: "/user/profile",
+    text: i18n.t("profile.manage-user-profile"),
+    description: i18n.t("admin.setup.manage-profile-or-get-invite-link"),
+  },
+]);
+
+// ================================================================
+// Page Navigation
+const currentPage = ref(Pages.LANDING);
+
+// ================================================================
+// Page Submission
+
+async function updateUser() {
+  // Note: $auth.user is now a ref
+  const { response } = await userApi.users.updateOne($auth.user.value!.id, {
+    ...$auth.user.value,
+    email: accountDetails.email.value,
+    username: accountDetails.username.value,
+    fullName: accountDetails.fullName.value,
+    advanced: accountDetails.advancedOptions.value,
+  });
+
+  if (!response || response.status !== 200) {
+    alert.error(i18n.t("events.something-went-wrong"));
+  }
+  else {
+    $auth.refresh();
+  }
+}
+
+async function updatePassword() {
+  const { response } = await userApi.users.changePassword({
+    currentPassword: "MyPassword",
+    newPassword: credentials.password1.value,
+  });
+
+  if (!response || response.status !== 200) {
+    alert.error(i18n.t("events.something-went-wrong"));
+  }
+}
+
+async function submitRegistration() {
+  // we update the password first, then update the user's details
+  await updatePassword().then(updateUser);
+}
+
+async function updateGroup() {
+  // Note: $auth.user is now a ref
+  const { data } = await userApi.groups.getOne($auth.user.value!.groupId);
+  if (!data || !data.preferences) {
+    alert.error(i18n.t("events.something-went-wrong"));
+    return;
+  }
+
+  const preferences = {
+    ...data.preferences,
+    privateGroup: !commonSettings.value.makeGroupRecipesPublic,
+  };
+
+  const payload = {
+    ...data,
+    preferences,
+  };
+
+  // Note: $auth.user is now a ref
+  const { response } = await userApi.groups.updateOne($auth.user.value!.groupId, payload);
+  if (!response || response.status !== 200) {
+    alert.error(i18n.t("events.something-went-wrong"));
+  }
+}
+
+async function updateHousehold() {
+  // Note: $auth.user is now a ref
+  const { data } = await adminApi.households.getOne($auth.user.value!.householdId);
+  if (!data || !data.preferences) {
+    alert.error(i18n.t("events.something-went-wrong"));
+    return;
+  }
+
+  const preferences = {
+    ...data.preferences,
+    privateHousehold: !commonSettings.value.makeGroupRecipesPublic,
+    recipePublic: commonSettings.value.makeGroupRecipesPublic,
+  };
+
+  const payload = {
+    ...data,
+    preferences,
+  };
+
+  // Note: $auth.user is now a ref
+  const { response } = await adminApi.households.updateOne($auth.user.value!.householdId, payload);
+  if (!response || response.status !== 200) {
+    alert.error(i18n.t("events.something-went-wrong"));
+  }
+}
+
+async function seedFoods() {
+  const { response } = await userApi.seeders.foods({ locale: locale.value });
+  if (!response || response.status !== 200) {
+    alert.error(i18n.t("events.something-went-wrong"));
+  }
+}
+
+async function seedUnits() {
+  const { response } = await userApi.seeders.units({ locale: locale.value });
+  if (!response || response.status !== 200) {
+    alert.error(i18n.t("events.something-went-wrong"));
+  }
+}
+
+async function seedLabels() {
+  const { response } = await userApi.seeders.labels({ locale: locale.value });
+  if (!response || response.status !== 200) {
+    alert.error(i18n.t("events.something-went-wrong"));
+  }
+}
+
+async function seedData() {
+  if (!commonSettings.value.useSeedData) {
+    return;
+  }
+
+  const tasks = [
+    seedFoods(),
+    seedUnits(),
+    seedLabels(),
+  ];
+
+  await Promise.all(tasks);
+}
+
+async function submitCommonSettings() {
+  const tasks = [
+    updateGroup(),
+    updateHousehold(),
+    seedData(),
+  ];
+
+  await Promise.all(tasks);
+}
+
+async function submitAll() {
+  const tasks = [
+    submitRegistration(),
+    submitCommonSettings(),
+  ];
+
+  await Promise.all(tasks);
+}
+
+async function handleSubmit(page: number) {
+  if (isSubmitting.value) {
+    return;
+  }
+
+  isSubmitting.value = true;
+  switch (page) {
+    case Pages.USER_INFO:
+      if (await accountDetails.validate()) {
+        currentPage.value += 1;
+      }
+      break;
+    case Pages.CONFIRM:
+      await submitAll();
+      currentPage.value += 1;
+      break;
+    case Pages.END:
+      router.push(groupSlug.value ? `/g/${groupSlug.value}` : "/login");
+      break;
+  }
+  isSubmitting.value = false;
+}
+
+// ================================================================
+// Stepper Navigation Handlers
+function onPrev() {
+  if (isSubmitting.value) return;
+  if (currentPage.value > Pages.LANDING) currentPage.value -= 1;
+}
+
+async function onNext() {
+  if (isSubmitting.value) return;
+  if (currentPage.value === Pages.USER_INFO) {
+    await handleSubmit(Pages.USER_INFO);
+    return;
+  }
+  if (currentPage.value === Pages.CONFIRM) {
+    await handleSubmit(Pages.CONFIRM);
+    return;
+  }
+  currentPage.value += 1;
+}
+
+async function onFinish() {
+  if (isSubmitting.value) return;
+  await handleSubmit(Pages.END);
+}
 </script>
+
+<style scoped>
+.icon-white {
+  fill: white;
+}
+
+.icon-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  position: relative;
+  margin-top: 2.5rem;
+}
+
+.icon-divider {
+  width: 100%;
+  margin-bottom: -2.5rem;
+}
+
+.icon-avatar {
+  border-color: rgba(0, 0, 0, 0.12);
+  border: 2px;
+}
+
+.bg-off-white {
+  background: #f5f8fa;
+}
+</style>
diff --git a/frontend/pages/login.vue b/frontend/pages/login.vue
index 4fe5ac94c..2d7d818e1 100644
--- a/frontend/pages/login.vue
+++ b/frontend/pages/login.vue
@@ -52,26 +52,7 @@
           Mealie
         </v-toolbar-title>
       </v-toolbar>
-
-      <div class="icon-container">
-        <v-divider class="icon-divider" />
-        <v-avatar
-          class="pa-2 icon-avatar"
-          color="primary"
-          size="100"
-        >
-          <svg
-            class="icon-white"
-            style="width: 100px; height: 100px"
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M8.1,13.34L3.91,9.16C2.35,7.59 2.35,5.06 3.91,3.5L10.93,10.5L8.1,13.34M13.41,13L20.29,19.88L18.88,21.29L12,14.41L5.12,21.29L3.71,19.88L13.36,10.22L13.16,10C12.38,9.23 12.38,7.97 13.16,7.19L17.5,2.82L18.43,3.74L15.19,7L16.15,7.94L19.39,4.69L20.31,5.61L17.06,8.85L18,9.81L21.26,6.56L22.18,7.5L17.81,11.84C17.03,12.62 15.77,12.62 15,11.84L14.78,11.64L13.41,13Z"
-            />
-          </svg>
-        </v-avatar>
-      </div>
-
+      <AppLogo :size="100" />
       <v-card-title class="text-h5 justify-center pb-3">
         {{ $t('user.sign-in') }}
       </v-card-title>
diff --git a/frontend/pages/register/index.vue b/frontend/pages/register/index.vue
index c4fd53624..97d13010f 100644
--- a/frontend/pages/register/index.vue
+++ b/frontend/pages/register/index.vue
@@ -23,25 +23,7 @@
             Mealie
           </v-toolbar-title>
         </v-toolbar>
-
-        <div class="icon-container">
-          <v-divider class="icon-divider" />
-          <v-avatar
-            class="pa-2 icon-avatar"
-            color="primary"
-            size="75"
-          >
-            <svg
-              class="icon-white"
-              style="width: 75"
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M8.1,13.34L3.91,9.16C2.35,7.59 2.35,5.06 3.91,3.5L10.93,10.5L8.1,13.34M13.41,13L20.29,19.88L18.88,21.29L12,14.41L5.12,21.29L3.71,19.88L13.36,10.22L13.16,10C12.38,9.23 12.38,7.97 13.16,7.19L17.5,2.82L18.43,3.74L15.19,7L16.15,7.94L19.39,4.69L20.31,5.61L17.06,8.85L18,9.81L21.26,6.56L22.18,7.5L17.81,11.84C17.03,12.62 15.77,12.62 15,11.84L14.78,11.64L13.41,13Z"
-              />
-            </svg>
-          </v-avatar>
-        </div>
+        <AppLogo />
       </div>
 
       <!-- Form Container -->
diff --git a/frontend/types/components.d.ts b/frontend/types/components.d.ts
index d074283ee..25d97d654 100644
--- a/frontend/types/components.d.ts
+++ b/frontend/types/components.d.ts
@@ -15,7 +15,6 @@ import type BaseDivider from "@/components/global/BaseDivider.vue";
 import type BaseOverflowButton from "@/components/global/BaseOverflowButton.vue";
 import type BasePageTitle from "@/components/global/BasePageTitle.vue";
 import type BaseStatCard from "@/components/global/BaseStatCard.vue";
-import type BaseWizard from "@/components/global/BaseWizard.vue";
 import type ButtonLink from "@/components/global/ButtonLink.vue";
 import type ContextMenu from "@/components/global/ContextMenu.vue";
 import type CrudTable from "@/components/global/CrudTable.vue";
@@ -56,7 +55,6 @@ declare module "vue" {
     BaseOverflowButton: typeof BaseOverflowButton;
     BasePageTitle: typeof BasePageTitle;
     BaseStatCard: typeof BaseStatCard;
-    BaseWizard: typeof BaseWizard;
     ButtonLink: typeof ButtonLink;
     ContextMenu: typeof ContextMenu;
     CrudTable: typeof CrudTable;
@@ -81,4 +79,4 @@ declare module "vue" {
   }
 }
 
-export {};
+export { };