From 084f99b0de8f04cdbd884a010cd65f30dec3fbeb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ars=C3=A8ne=20Reymond?=
 <66876397+p0lycarpio@users.noreply.github.com>
Date: Sat, 28 Jun 2025 15:59:58 +0200
Subject: [PATCH] fix: Nuxt3 upgrades UI fixes & improvements (#5589)

---
 .../Domain/Cookbook/CookbookPage.vue          |  6 +--
 .../Household/GroupMealPlanRuleForm.vue       | 26 +++++-----
 .../components/Domain/QueryFilterBuilder.vue  |  5 ++
 .../Domain/Recipe/RecipeActionMenu.vue        |  1 +
 .../components/Domain/Recipe/RecipeChips.vue  |  2 +-
 .../Domain/Recipe/RecipeDialogSearch.vue      |  2 +-
 .../Domain/Recipe/RecipeExplorerPage.vue      |  2 +-
 .../Recipe/RecipeIngredientListItem.vue       |  2 +-
 .../Domain/Recipe/RecipeIngredients.vue       |  1 +
 .../Domain/Recipe/RecipeOrganizerPage.vue     |  2 +-
 .../Domain/Recipe/RecipeOrganizerSelector.vue |  8 +++-
 .../Domain/Recipe/RecipePage/RecipePage.vue   | 12 +++--
 .../RecipePageEditorToolbar.vue               | 47 +++++++------------
 .../RecipePageParts/RecipePageInfoCard.vue    | 10 ++--
 .../RecipePageIngredientToolsView.vue         |  3 +-
 .../RecipePageParts/RecipePageOrganizers.vue  |  2 +-
 .../Domain/Recipe/RecipeTimeCard.vue          |  3 ++
 frontend/components/Domain/SearchFilter.vue   |  1 +
 .../Domain/User/UserInviteDialog.vue          |  2 +-
 .../Domain/User/UserRegistrationForm.vue      |  3 +-
 frontend/components/Layout/DefaultLayout.vue  |  2 +-
 frontend/components/global/AutoForm.vue       |  3 --
 .../global/BaseCardSectionTitle.vue           |  3 +-
 frontend/components/global/BaseDialog.vue     |  1 -
 frontend/components/global/BaseWizard.vue     |  2 +-
 frontend/components/global/InputQuantity.vue  |  1 -
 frontend/lib/icons/icons.ts                   |  2 +
 frontend/pages/admin/maintenance/index.vue    | 12 +++--
 .../pages/admin/manage/households/[id].vue    |  1 -
 .../pages/admin/manage/households/index.vue   |  2 -
 frontend/pages/admin/manage/users/create.vue  |  4 --
 frontend/pages/forgot-password.vue            |  6 +--
 .../pages/g/[groupSlug]/r/create/bulk.vue     | 18 +++++--
 .../pages/g/[groupSlug]/r/create/html.vue     |  1 -
 frontend/pages/g/[groupSlug]/r/create/zip.vue |  1 -
 .../pages/g/[groupSlug]/recipes/timeline.vue  |  2 +-
 frontend/pages/group/migrations.vue           |  5 +-
 frontend/pages/household/notifiers.vue        |  4 +-
 frontend/pages/register/index.vue             | 10 ++--
 frontend/pages/reset-password.vue             | 21 ++++-----
 frontend/pages/user/profile/api-tokens.vue    | 25 +++++-----
 frontend/pages/user/profile/index.vue         |  4 +-
 42 files changed, 137 insertions(+), 133 deletions(-)

diff --git a/frontend/components/Domain/Cookbook/CookbookPage.vue b/frontend/components/Domain/Cookbook/CookbookPage.vue
index 222419008..8793cef26 100644
--- a/frontend/components/Domain/Cookbook/CookbookPage.vue
+++ b/frontend/components/Domain/Cookbook/CookbookPage.vue
@@ -24,8 +24,7 @@
 
     <v-container
       v-if="book"
-      fluid
-      class="py-0 my-0"
+      class="my-0"
     >
       <v-sheet
         color="transparent"
@@ -33,13 +32,12 @@
         elevation="0"
       >
         <div class="d-flex align-center w-100 mb-2">
+          <v-toolbar-title class="headline mb-0">
           <v-icon size="large" class="mr-3">
             {{ $globals.icons.pages }}
           </v-icon>
-          <v-toolbar-title class="headline mb-0">
             {{ book.name }}
           </v-toolbar-title>
-          <v-spacer />
           <BaseButton
             v-if="canEdit"
             class="mx-1"
diff --git a/frontend/components/Domain/Household/GroupMealPlanRuleForm.vue b/frontend/components/Domain/Household/GroupMealPlanRuleForm.vue
index 7e10a7941..bcdd9a3e2 100644
--- a/frontend/components/Domain/Household/GroupMealPlanRuleForm.vue
+++ b/frontend/components/Domain/Household/GroupMealPlanRuleForm.vue
@@ -69,22 +69,22 @@ export default defineNuxtComponent({
     const i18n = useI18n();
 
     const MEAL_TYPE_OPTIONS = [
-      { text: i18n.t("meal-plan.breakfast"), value: "breakfast" },
-      { text: i18n.t("meal-plan.lunch"), value: "lunch" },
-      { text: i18n.t("meal-plan.dinner"), value: "dinner" },
-      { text: i18n.t("meal-plan.side"), value: "side" },
-      { text: i18n.t("meal-plan.type-any"), value: "unset" },
+      { title: i18n.t("meal-plan.breakfast"), value: "breakfast" },
+      { title: i18n.t("meal-plan.lunch"), value: "lunch" },
+      { title: i18n.t("meal-plan.dinner"), value: "dinner" },
+      { title: i18n.t("meal-plan.side"), value: "side" },
+      { title: i18n.t("meal-plan.type-any"), value: "unset" },
     ];
 
     const MEAL_DAY_OPTIONS = [
-      { text: i18n.t("general.monday"), value: "monday" },
-      { text: i18n.t("general.tuesday"), value: "tuesday" },
-      { text: i18n.t("general.wednesday"), value: "wednesday" },
-      { text: i18n.t("general.thursday"), value: "thursday" },
-      { text: i18n.t("general.friday"), value: "friday" },
-      { text: i18n.t("general.saturday"), value: "saturday" },
-      { text: i18n.t("general.sunday"), value: "sunday" },
-      { text: i18n.t("meal-plan.day-any"), value: "unset" },
+      { title: i18n.t("general.monday"), value: "monday" },
+      { title: i18n.t("general.tuesday"), value: "tuesday" },
+      { title: i18n.t("general.wednesday"), value: "wednesday" },
+      { title: i18n.t("general.thursday"), value: "thursday" },
+      { title: i18n.t("general.friday"), value: "friday" },
+      { title: i18n.t("general.saturday"), value: "saturday" },
+      { title: i18n.t("general.sunday"), value: "sunday" },
+      { title: i18n.t("meal-plan.day-any"), value: "unset" },
     ];
 
     const inputDay = computed({
diff --git a/frontend/components/Domain/QueryFilterBuilder.vue b/frontend/components/Domain/QueryFilterBuilder.vue
index 85a1672ba..721b540a8 100644
--- a/frontend/components/Domain/QueryFilterBuilder.vue
+++ b/frontend/components/Domain/QueryFilterBuilder.vue
@@ -189,6 +189,7 @@
                 :show-add="false"
                 :show-label="false"
                 :show-icon="false"
+                variant="underlined"
                 @update:model-value="setOrganizerValues(field, index, $event)"
               />
               <RecipeOrganizerSelector
@@ -198,6 +199,7 @@
                 :show-add="false"
                 :show-label="false"
                 :show-icon="false"
+                variant="underlined"
                 @update:model-value="setOrganizerValues(field, index, $event)"
               />
               <RecipeOrganizerSelector
@@ -207,6 +209,7 @@
                 :show-add="false"
                 :show-label="false"
                 :show-icon="false"
+                variant="underlined"
                 @update:model-value="setOrganizerValues(field, index, $event)"
               />
               <RecipeOrganizerSelector
@@ -216,6 +219,7 @@
                 :show-add="false"
                 :show-label="false"
                 :show-icon="false"
+                variant="underlined"
                 @update:model-value="setOrganizerValues(field, index, $event)"
               />
               <RecipeOrganizerSelector
@@ -225,6 +229,7 @@
                 :show-add="false"
                 :show-label="false"
                 :show-icon="false"
+                variant="underlined"
                 @update:model-value="setOrganizerValues(field, index, $event)"
               />
             </v-col>
diff --git a/frontend/components/Domain/Recipe/RecipeActionMenu.vue b/frontend/components/Domain/Recipe/RecipeActionMenu.vue
index 22a633e8a..0f77fbd99 100644
--- a/frontend/components/Domain/Recipe/RecipeActionMenu.vue
+++ b/frontend/components/Domain/Recipe/RecipeActionMenu.vue
@@ -74,6 +74,7 @@
         :size="$vuetify.display.xs ? 'small' : undefined"
         :color="btn.color"
         variant="elevated"
+        :icon="$vuetify.display.xs"
         @click="emitHandler(btn.event)"
       >
         <v-icon :left="!$vuetify.display.xs">
diff --git a/frontend/components/Domain/Recipe/RecipeChips.vue b/frontend/components/Domain/Recipe/RecipeChips.vue
index 577e80fff..7649bc58c 100644
--- a/frontend/components/Domain/Recipe/RecipeChips.vue
+++ b/frontend/components/Domain/Recipe/RecipeChips.vue
@@ -10,7 +10,7 @@
       v-for="category in items.slice(0, limit)"
       :key="category.name"
       label
-      class="ma-1"
+      class="mr-1 mt-1"
       color="accent"
       variant="flat"
       :size="small ? 'small' : 'default'"
diff --git a/frontend/components/Domain/Recipe/RecipeDialogSearch.vue b/frontend/components/Domain/Recipe/RecipeDialogSearch.vue
index df78a36d2..40e354868 100644
--- a/frontend/components/Domain/Recipe/RecipeDialogSearch.vue
+++ b/frontend/components/Domain/Recipe/RecipeDialogSearch.vue
@@ -17,7 +17,7 @@
           id="arrow-search"
           v-model="search.query.value"
           autofocus
-          variant="solo-filled"
+          variant="solo"
           flat
           autocomplete="off"
           bg-color="primary-lighten-1"
diff --git a/frontend/components/Domain/Recipe/RecipeExplorerPage.vue b/frontend/components/Domain/Recipe/RecipeExplorerPage.vue
index caa06b1f1..e08d9ed59 100644
--- a/frontend/components/Domain/Recipe/RecipeExplorerPage.vue
+++ b/frontend/components/Domain/Recipe/RecipeExplorerPage.vue
@@ -1,7 +1,7 @@
 <template>
   <v-container
     fluid
-    class="pa-0"
+    class="px-0"
   >
     <div class="search-container pb-8">
       <form
diff --git a/frontend/components/Domain/Recipe/RecipeIngredientListItem.vue b/frontend/components/Domain/Recipe/RecipeIngredientListItem.vue
index 6527babe2..0c89f50c1 100644
--- a/frontend/components/Domain/Recipe/RecipeIngredientListItem.vue
+++ b/frontend/components/Domain/Recipe/RecipeIngredientListItem.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="ma-0 pa-0 text-subtitle-1 dense-markdown ingredient-item">
+  <div class="text-subtitle-1 dense-markdown ingredient-item">
     <SafeMarkdown
       v-if="parsedIng.quantity"
       class="d-inline"
diff --git a/frontend/components/Domain/Recipe/RecipeIngredients.vue b/frontend/components/Domain/Recipe/RecipeIngredients.vue
index d8025be6f..25e2cb937 100644
--- a/frontend/components/Domain/Recipe/RecipeIngredients.vue
+++ b/frontend/components/Domain/Recipe/RecipeIngredients.vue
@@ -28,6 +28,7 @@
         </template>
         <v-list-item
           density="compact"
+          class="pa-0"
           @click.stop="toggleChecked(index)"
         >
           <template #prepend>
diff --git a/frontend/components/Domain/Recipe/RecipeOrganizerPage.vue b/frontend/components/Domain/Recipe/RecipeOrganizerPage.vue
index 8470d577d..f07acaa84 100644
--- a/frontend/components/Domain/Recipe/RecipeOrganizerPage.vue
+++ b/frontend/components/Domain/Recipe/RecipeOrganizerPage.vue
@@ -59,7 +59,7 @@
     <v-app-bar
       color="transparent"
       flat
-      class="mt-n1 rounded align-center px-4 position-relative w-100 left-0 top-0"
+      class="mt-n1 rounded align-center position-relative w-100 left-0 top-0"
     >
       <v-icon
         size="large"
diff --git a/frontend/components/Domain/Recipe/RecipeOrganizerSelector.vue b/frontend/components/Domain/Recipe/RecipeOrganizerSelector.vue
index 7d62ebd53..26ec7413a 100644
--- a/frontend/components/Domain/Recipe/RecipeOrganizerSelector.vue
+++ b/frontend/components/Domain/Recipe/RecipeOrganizerSelector.vue
@@ -9,9 +9,9 @@
     closable-chips
     item-title="name"
     multiple
-    variant="underlined"
+    :variant="variant"
     :prepend-inner-icon="icon"
-    :append-icon="$globals.icons.create"
+    :append-icon="showAdd ? $globals.icons.create : undefined"
     return-object
     auto-select-first
     class="pa-0"
@@ -93,6 +93,10 @@ export default defineNuxtComponent({
       type: Boolean,
       default: true,
     },
+    variant: {
+      type: String as () => "filled" | "underlined" | "outlined" | "plain" | "solo" | "solo-inverted" | "solo-filled",
+      default: "outlined",
+    },
   },
   emits: ["update:modelValue"],
 
diff --git a/frontend/components/Domain/Recipe/RecipePage/RecipePage.vue b/frontend/components/Domain/Recipe/RecipePage/RecipePage.vue
index 063cd83fb..46eda6bbc 100644
--- a/frontend/components/Domain/Recipe/RecipePage/RecipePage.vue
+++ b/frontend/components/Domain/Recipe/RecipePage/RecipePage.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <v-container v-show="!isCookMode" key="recipe-page" class="pt-0" :class="{ 'pa-0': $vuetify.display.smAndDown.value }">
+    <v-container v-show="!isCookMode" key="recipe-page" class="px-0" :class="{ 'pa-0': $vuetify.display.smAndDown.value }">
       <v-card :flat="$vuetify.display.smAndDown.value" class="d-print-none">
         <RecipePageHeader
           :recipe="recipe"
@@ -87,11 +87,10 @@
       />
       <RecipePrintContainer :recipe="recipe" :scale="scale" />
     </v-container>
-    <!-- Cook mode displayes two columns with ingredients and instructions side by side, each being scrolled individually, allowing to view both at the same timer -->
+    <!-- Cook mode displayes two columns with ingredients and instructions side by side, each being scrolled individually, allowing to view both at the same time -->
     <v-sheet
       v-show="isCookMode && !hasLinkedIngredients"
       key="cookmode"
-      :style="{ height: $vuetify.display.smAndUp ? 'calc(100vh - 48px)' : '' }"
     >
       <!-- the calc is to account for the toolbar a more dynamic solution could be needed  -->
       <v-row style="height: 100%" no-gutters class="overflow-hidden">
@@ -107,7 +106,12 @@
           />
           <v-divider />
         </v-col>
-        <v-col class="overflow-y-auto py-2" style="height: 100%" cols="12" sm="7">
+        <v-col class="overflow-y-auto"
+        :class="$vuetify.display.smAndDown.value ? 'py-2': 'py-6'"
+        style="height: 100%" cols="12" sm="7">
+          <h2 class="text-h5 px-4 font-weight-medium opacity-80">
+            {{ $t('recipe.instructions') }}
+          </h2>
           <RecipePageInstructions
             v-model="recipe.recipeInstructions"
             v-model:assets="recipe.assets"
diff --git a/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageEditorToolbar.vue b/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageEditorToolbar.vue
index 2621f1ed5..113ad4e3f 100644
--- a/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageEditorToolbar.vue
+++ b/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageEditorToolbar.vue
@@ -1,31 +1,28 @@
 <template>
-  <div class="d-flex justify-start align-top py-2">
+  <div class="d-flex justify-start align-top flex-wrap">
     <RecipeImageUploadBtn
-      class="my-1"
+      class="my-2"
       :slug="recipe.slug"
       @upload="uploadImage"
       @refresh="imageKey++"
     />
     <RecipeSettingsMenu
       v-model="recipe.settings"
-      class="my-1 mx-1"
+      class="my-2 mx-1"
       :is-owner="recipe.userId == user.id"
       @upload="uploadImage"
     />
     <v-spacer />
-    <v-container
-      class="py-0"
-      style="width: 40%;"
-    >
       <v-select
         v-model="recipe.userId"
+        class="my-2"
+        max-width="300"
         :items="allUsers"
-        item-title="fullName"
-        item-value="id"
+        :item-props="itemsProps"
         :label="$t('general.owner')"
-        hide-details
         :disabled="!canEditOwner"
-        variant="underlined"
+        variant="outlined"
+        density="compact"
       >
         <template #prepend>
           <UserAvatar
@@ -34,17 +31,7 @@
           />
         </template>
       </v-select>
-      <v-card-text
-        v-if="ownerHousehold"
-        class="pa-0 d-flex"
-        style="align-items: flex-end;"
-      >
-        <v-spacer />
-        <v-icon>{{ $globals.icons.household }}</v-icon>
-        <span class="pl-1">{{ ownerHousehold.name }}</span>
-      </v-card-text>
-    </v-container>
-  </div>
+</div>
 </template>
 
 <script setup lang="ts">
@@ -71,13 +58,15 @@ const canEditOwner = computed(() => {
 
 const { store: allUsers } = useUserStore();
 const { store: households } = useHouseholdStore();
-const ownerHousehold = computed(() => {
-  const owner = allUsers.value.find(u => u.id === recipe.value.userId);
-  if (!owner) {
-    return null;
-  }
-  return households.value.find(h => h.id === owner.householdId);
-});
+
+function itemsProps(item: any) {
+  const owner = allUsers.value.find(u => u.id === item.id);
+  return {
+    value: item.id,
+    title: item.fullName,
+    subtitle: owner ? households.value.find(h => h.id === owner.householdId)?.name || "" : "",
+  };
+}
 
 async function uploadImage(fileObject: File) {
   if (!recipe.value || !recipe.value.slug) {
diff --git a/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInfoCard.vue b/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInfoCard.vue
index 905a276a0..962b2c6fa 100644
--- a/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInfoCard.vue
+++ b/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInfoCard.vue
@@ -11,15 +11,17 @@
         class="d-flex flex-column justify-center align-center"
       >
         <v-card-text class="w-100">
-          <v-card-title class="text-h5 font-weight-regular pa-0 d-flex flex-column align-center justify-center opacity-80">
+          <div class="d-flex flex-column align-center">
+          <v-card-title class="text-h5 font-weight-regular pa-0 text-wrap text-center opacity-80">
             {{ recipe.name }}
-            <RecipeRating
+          </v-card-title>
+          <RecipeRating
               :key="recipe.slug"
               :value="recipe.rating"
               :recipe-id="recipe.id"
               :slug="recipe.slug"
             />
-          </v-card-title>
+          </div>
           <v-divider class="my-2" />
           <SafeMarkdown :source="recipe.description" class="my-3" />
           <v-divider v-if="recipe.description" />
@@ -52,7 +54,7 @@
                 </v-col>
               </v-row>
             </div>
-            <div class="mx-6">
+            <div v-if="recipe.prepTime || recipe.totalTime || recipe.performTime" class="mx-6">
               <RecipeTimeCard
                 container-class="d-flex flex-wrap justify-center"
                 :prep-time="recipe.prepTime"
diff --git a/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageIngredientToolsView.vue b/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageIngredientToolsView.vue
index 85f652144..88e47f0d5 100644
--- a/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageIngredientToolsView.vue
+++ b/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageIngredientToolsView.vue
@@ -15,12 +15,13 @@
           v-for="(tool, index) in recipe.tools"
           :key="index"
           density="compact"
+          class="px-1"
         >
           <template #prepend>
             <v-checkbox
               v-model="recipeTools[index].onHand"
               hide-details
-              class="pt-0 my-auto py-auto"
+              class="pt-0 py-auto"
               color="secondary"
               density="compact"
               @change="updateTool(index)"
diff --git a/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageOrganizers.vue b/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageOrganizers.vue
index c5f456bce..c39cb0468 100644
--- a/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageOrganizers.vue
+++ b/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageOrganizers.vue
@@ -60,7 +60,7 @@
         {{ $t('tool.required-tools') }}
       </v-card-title>
       <v-divider class="mx-2" />
-      <v-card-text class="pt-0">
+      <v-card-text>
         <RecipeOrganizerSelector
           v-model="recipe.tools"
           selector-type="tools"
diff --git a/frontend/components/Domain/Recipe/RecipeTimeCard.vue b/frontend/components/Domain/Recipe/RecipeTimeCard.vue
index 04191fe6f..4d087bfbc 100644
--- a/frontend/components/Domain/Recipe/RecipeTimeCard.vue
+++ b/frontend/components/Domain/Recipe/RecipeTimeCard.vue
@@ -141,6 +141,9 @@ export default defineNuxtComponent({
 </script>
 
 <style scoped>
+.text-center {
+  font-size: smaller;
+}
 .time-card-flex {
   width: fit-content;
 }
diff --git a/frontend/components/Domain/SearchFilter.vue b/frontend/components/Domain/SearchFilter.vue
index 863f25541..1b1cc9b1f 100644
--- a/frontend/components/Domain/SearchFilter.vue
+++ b/frontend/components/Domain/SearchFilter.vue
@@ -125,6 +125,7 @@
             <v-alert
               type="info"
               :text="$t('search.no-results')"
+              class="mb-0"
             />
           </div>
         </v-card-text>
diff --git a/frontend/components/Domain/User/UserInviteDialog.vue b/frontend/components/Domain/User/UserInviteDialog.vue
index cf3150db8..fc198ab52 100644
--- a/frontend/components/Domain/User/UserInviteDialog.vue
+++ b/frontend/components/Domain/User/UserInviteDialog.vue
@@ -32,11 +32,11 @@
         <v-row>
           <v-col cols="9">
             <v-text-field
+              v-model="generatedSignupLink"
               :label="$t('profile.invite-link')"
               type="text"
               readonly
               variant="filled"
-              :value="generatedSignupLink"
             />
           </v-col>
           <v-col
diff --git a/frontend/components/Domain/User/UserRegistrationForm.vue b/frontend/components/Domain/User/UserRegistrationForm.vue
index a216f8f9d..7677f4f57 100644
--- a/frontend/components/Domain/User/UserRegistrationForm.vue
+++ b/frontend/components/Domain/User/UserRegistrationForm.vue
@@ -86,9 +86,8 @@ import { usePasswordField } from "~/composables/use-passwords";
 import UserPasswordStrength from "~/components/Domain/User/UserPasswordStrength.vue";
 
 const inputAttrs = {
-  rounded: true,
   validateOnBlur: true,
-  class: "rounded-lg pb-1",
+  class: "pb-1",
   variant: "solo-filled" as any,
 };
 
diff --git a/frontend/components/Layout/DefaultLayout.vue b/frontend/components/Layout/DefaultLayout.vue
index 21476bb24..8a79d0560 100644
--- a/frontend/components/Layout/DefaultLayout.vue
+++ b/frontend/components/Layout/DefaultLayout.vue
@@ -105,7 +105,7 @@
         </v-list-item>
       </template>
     </AppSidebar>
-    <v-main class="pt-16">
+    <v-main class="pt-12">
       <v-scroll-x-transition>
         <div>
           <NuxtPage />
diff --git a/frontend/components/global/AutoForm.vue b/frontend/components/global/AutoForm.vue
index d837ce2f1..d1d259b01 100644
--- a/frontend/components/global/AutoForm.vue
+++ b/frontend/components/global/AutoForm.vue
@@ -10,7 +10,6 @@
       <v-col
         v-for="(inputField, index) in items"
         :key="index"
-        class="py-0"
         cols="12"
         sm="12"
       >
@@ -75,7 +74,6 @@
           :disabled="(inputField.disableUpdate && updateMode) || (!updateMode && inputField.disableCreate) || (disabledFields && disabledFields.includes(inputField.varName))"
           variant="solo-filled"
           flat
-          class="rounded-lg"
           rows="3"
           auto-grow
           density="comfortable"
@@ -95,7 +93,6 @@
           :disabled="(inputField.disableUpdate && updateMode) || (!updateMode && inputField.disableCreate) || (disabledFields && disabledFields.includes(inputField.varName))"
           variant="solo-filled"
           flat
-          class="rounded-lg"
           :prepend-icon="inputField.icons ? modelValue[inputField.varName] : null"
           :label="inputField.label"
           :name="inputField.varName"
diff --git a/frontend/components/global/BaseCardSectionTitle.vue b/frontend/components/global/BaseCardSectionTitle.vue
index 031634819..9b9068891 100644
--- a/frontend/components/global/BaseCardSectionTitle.vue
+++ b/frontend/components/global/BaseCardSectionTitle.vue
@@ -10,6 +10,7 @@
     <v-card-title class="text-h5 pl-0 py-0" style="font-weight: normal;">
       <v-icon
         v-if="icon"
+        size="small"
         start
       >
         {{ icon }}
@@ -24,7 +25,7 @@
         <slot />
       </p>
     </v-card-text>
-    <v-divider class="mb-3" />
+    <v-divider class="mt-1 mb-3" />
   </v-card>
 </template>
 
diff --git a/frontend/components/global/BaseDialog.vue b/frontend/components/global/BaseDialog.vue
index 76b39b5ae..2bf4ddf7e 100644
--- a/frontend/components/global/BaseDialog.vue
+++ b/frontend/components/global/BaseDialog.vue
@@ -29,7 +29,6 @@
           <v-toolbar-title class="headline">
             {{ title }}
           </v-toolbar-title>
-          <v-spacer />
         </v-toolbar>
         <v-progress-linear
           v-if="loading"
diff --git a/frontend/components/global/BaseWizard.vue b/frontend/components/global/BaseWizard.vue
index b18d62e0a..102f068c8 100644
--- a/frontend/components/global/BaseWizard.vue
+++ b/frontend/components/global/BaseWizard.vue
@@ -10,7 +10,7 @@
           style="margin-bottom: 4rem"
           dark
         >
-          <v-toolbar-title class="headline text-h4">
+          <v-toolbar-title class="headline text-h4 text-center mx-0">
             Mealie
           </v-toolbar-title>
         </v-toolbar>
diff --git a/frontend/components/global/InputQuantity.vue b/frontend/components/global/InputQuantity.vue
index 741ab0caa..17b224ace 100644
--- a/frontend/components/global/InputQuantity.vue
+++ b/frontend/components/global/InputQuantity.vue
@@ -10,7 +10,6 @@
       :min="min"
       :max="max"
       type="number"
-      class="rounded-xl"
       size="small"
       variant="plain"
     />
diff --git a/frontend/lib/icons/icons.ts b/frontend/lib/icons/icons.ts
index bbfea6b07..0e11d71cb 100644
--- a/frontend/lib/icons/icons.ts
+++ b/frontend/lib/icons/icons.ts
@@ -150,6 +150,7 @@ import {
   mdiCodeTags,
   mdiKnife,
   mdiCookie,
+  mdiBellPlus,
 } from "@mdi/js";
 
 export const icons = {
@@ -174,6 +175,7 @@ export const icons = {
   arrowUpDown: mdiDrag,
   backupRestore: mdiBackupRestore,
   bellAlert: mdiBellAlert,
+  bellPlus: mdiBellPlus,
   broom: mdiBroom,
   calendar: mdiCalendar,
   calendarMinus: mdiCalendarMinus,
diff --git a/frontend/pages/admin/maintenance/index.vue b/frontend/pages/admin/maintenance/index.vue
index d70301438..88fa134c2 100644
--- a/frontend/pages/admin/maintenance/index.vue
+++ b/frontend/pages/admin/maintenance/index.vue
@@ -26,7 +26,7 @@
 
     <section>
       <BaseCardSectionTitle class="pb-0" :icon="$globals.icons.wrench" :title="$t('admin.maintenance.summary-title')" />
-      <div class="mb-6 ml-2 d-flex" style="gap: 0.3rem">
+      <div class="mb-6 d-flex" style="gap: 0.3rem">
         <BaseButton color="info" @click="getSummary">
           <template #icon>
             {{ $globals.icons.tools }}
@@ -40,7 +40,7 @@
           {{ $t("admin.maintenance.button-label-open-details") }}
         </BaseButton>
       </div>
-      <v-card class="ma-2" :loading="state.fetchingInfo">
+      <v-card class="" :loading="state.fetchingInfo">
         <template v-for="(value, idx) in info" :key="`item-${idx}`">
           <v-list-item>
             <v-list-item-title class="py-2">
@@ -67,21 +67,23 @@
           </template>
         </i18n-t>
       </BaseCardSectionTitle>
-      <v-card class="ma-2" :loading="state.actionLoading">
+      <v-card class="ma-0" flat :loading="state.actionLoading">
         <template v-for="(action, idx) in actions" :key="`item-${idx}`">
-          <v-list-item class="py-1">
+          <v-list-item class="py-2 px-0">
             <v-list-item-title>
               <div>{{ action.name }}</div>
               <v-list-item-subtitle class="wrap-word">
                 {{ action.subtitle }}
               </v-list-item-subtitle>
             </v-list-item-title>
-            <BaseButton color="info" @click="action.handler">
+            <template #append>
+              <BaseButton color="info" @click="action.handler">
               <template #icon>
                 {{ $globals.icons.robot }}
               </template>
               {{ $t("general.run") }}
             </BaseButton>
+            </template>
           </v-list-item>
           <v-divider class="mx-2" />
         </template>
diff --git a/frontend/pages/admin/manage/households/[id].vue b/frontend/pages/admin/manage/households/[id].vue
index 82de3d373..a0a2a789b 100644
--- a/frontend/pages/admin/manage/households/[id].vue
+++ b/frontend/pages/admin/manage/households/[id].vue
@@ -33,7 +33,6 @@
             :items="groups"
             variant="solo-filled"
             flat
-            class="rounded-lg"
             item-title="name"
             item-value="id"
             :return-object="false"
diff --git a/frontend/pages/admin/manage/households/index.vue b/frontend/pages/admin/manage/households/index.vue
index 3e9e4156b..2f6b306de 100644
--- a/frontend/pages/admin/manage/households/index.vue
+++ b/frontend/pages/admin/manage/households/index.vue
@@ -12,8 +12,6 @@
             v-if="groups"
             v-model="createHouseholdForm.data.groupId"
             :items="groups"
-            rounded
-            class="rounded-lg"
             item-title="name"
             item-value="id"
             :return-object="false"
diff --git a/frontend/pages/admin/manage/users/create.vue b/frontend/pages/admin/manage/users/create.vue
index d2b4c8d6a..7009b68a4 100644
--- a/frontend/pages/admin/manage/users/create.vue
+++ b/frontend/pages/admin/manage/users/create.vue
@@ -24,8 +24,6 @@
             v-if="groups"
             v-model="selectedGroupId"
             :items="groups"
-            rounded
-            class="rounded-lg"
             item-title="name"
             item-value="id"
             :return-object="false"
@@ -37,8 +35,6 @@
             v-model="newUserData.household"
             :disabled="!selectedGroupId"
             :items="households"
-            rounded
-            class="rounded-lg"
             item-title="name"
             item-value="name"
             :return-object="false"
diff --git a/frontend/pages/forgot-password.vue b/frontend/pages/forgot-password.vue
index 11d0c661a..996a34df9 100644
--- a/frontend/pages/forgot-password.vue
+++ b/frontend/pages/forgot-password.vue
@@ -17,10 +17,10 @@
         <v-form @submit.prevent="requestLink()">
           <v-text-field
             v-model="email"
-            variant="filled"
-            rounded
+            :prepend-inner-icon="$globals.icons.email"
+            variant="solo-filled"
+            flat
             autofocus
-            class="rounded-lg"
             name="login"
             :label="$t('user.email')"
             type="text"
diff --git a/frontend/pages/g/[groupSlug]/r/create/bulk.vue b/frontend/pages/g/[groupSlug]/r/create/bulk.vue
index 307a81fd6..4532674bc 100644
--- a/frontend/pages/g/[groupSlug]/r/create/bulk.vue
+++ b/frontend/pages/g/[groupSlug]/r/create/bulk.vue
@@ -7,7 +7,7 @@
       <v-card-text>
         {{ $t('recipe.recipe-bulk-importer-description') }}
       </v-card-text>
-    </div>
+    <div class="px-4">
     <section class="mt-2">
       <v-row
         v-for="(_, idx) in bulkUrls"
@@ -54,6 +54,7 @@
             cols="12"
             xs="12"
             sm="6"
+            class="py-0"
           >
             <RecipeOrganizerSelector
               v-model="bulkUrls[idx].categories"
@@ -73,6 +74,7 @@
             cols="12"
             xs="12"
             sm="6"
+            class="pt-0 pb-4"
           >
             <RecipeOrganizerSelector
               v-model="bulkUrls[idx].tags"
@@ -90,8 +92,9 @@
           </v-col>
         </template>
       </v-row>
-      <v-card-actions class="justify-end flex-wrap mb-1">
+      <v-card-actions class="justify-end flex-wrap mt-3 pa-0">
         <BaseButton
+          class="mt-1 pr-4"
           delete
           @click="
             bulkUrls = [];
@@ -117,23 +120,26 @@
           @bulk-data="assignUrls"
         />
       </v-card-actions>
-      <div class="px-1">
+      <div class="px-0">
         <v-checkbox
           v-model="showCatTags"
           hide-details
           :label="$t('recipe.set-categories-and-tags')"
         />
       </div>
-      <v-card-actions class="justify-end">
+      <v-card-actions class="justify-center">
+        <div style="width: 250px">
         <BaseButton
           :disabled="bulkUrls.length === 0 || lockBulkImport"
+          rounded
+          block
           @click="bulkCreate"
         >
           <template #icon>
             {{ $globals.icons.check }}
           </template>
-          {{ $t('general.submit') }}
         </BaseButton>
+        </div>
       </v-card-actions>
     </section>
     <section class="mt-12">
@@ -144,6 +150,8 @@
       />
     </section>
   </div>
+  </div>
+</div>
 </template>
 
 <script lang="ts">
diff --git a/frontend/pages/g/[groupSlug]/r/create/html.vue b/frontend/pages/g/[groupSlug]/r/create/html.vue
index ff5ec0279..9880f5204 100644
--- a/frontend/pages/g/[groupSlug]/r/create/html.vue
+++ b/frontend/pages/g/[groupSlug]/r/create/html.vue
@@ -61,7 +61,6 @@
         <div style="width: 250px">
           <BaseButton
             :disabled="!newRecipeData"
-            large
             rounded
             block
             type="submit"
diff --git a/frontend/pages/g/[groupSlug]/r/create/zip.vue b/frontend/pages/g/[groupSlug]/r/create/zip.vue
index 4745c574e..59240e748 100644
--- a/frontend/pages/g/[groupSlug]/r/create/zip.vue
+++ b/frontend/pages/g/[groupSlug]/r/create/zip.vue
@@ -25,7 +25,6 @@
         <div style="width: 250px">
           <BaseButton
             :disabled="newRecipeZip === null"
-            large
             rounded
             block
             :loading="loading"
diff --git a/frontend/pages/g/[groupSlug]/recipes/timeline.vue b/frontend/pages/g/[groupSlug]/recipes/timeline.vue
index 03359532a..8a7281269 100644
--- a/frontend/pages/g/[groupSlug]/recipes/timeline.vue
+++ b/frontend/pages/g/[groupSlug]/recipes/timeline.vue
@@ -2,7 +2,7 @@
   <div>
     <BasePageTitle
       v-if="groupName"
-      class="bg-grey-darken-4 mt-n4 pt-8"
+      class="mt-n4 pt-8"
     >
       <template #header>
         <v-img
diff --git a/frontend/pages/group/migrations.vue b/frontend/pages/group/migrations.vue
index 1991e892d..f2195664e 100644
--- a/frontend/pages/group/migrations.vue
+++ b/frontend/pages/group/migrations.vue
@@ -15,11 +15,12 @@
       </template>
       {{ $t('migration.recipe-data-migrations-explanation') }}
     </BasePageTitle>
-    <v-container>
+    <v-container :class="$vuetify.display.smAndDown ? 'px-0': ''">
       <BaseCardSectionTitle :title="$t('migration.new-migration')" />
       <v-card
         variant="outlined"
         :loading="loading"
+        style="border-color: lightgrey;"
       >
         <v-card-title> {{ $t('migration.choose-migration-type') }} </v-card-title>
         <v-card-text
@@ -83,7 +84,7 @@
         </v-card-actions>
       </v-card>
     </v-container>
-    <v-container>
+    <v-container class="$vuetify.display.smAndDown ? 'px-0': ''">
       <BaseCardSectionTitle :title="$t('migration.previous-migrations')" />
       <ReportTable
         :items="reports"
diff --git a/frontend/pages/household/notifiers.vue b/frontend/pages/household/notifiers.vue
index a09e8c2e1..de00aaa72 100644
--- a/frontend/pages/household/notifiers.vue
+++ b/frontend/pages/household/notifiers.vue
@@ -15,6 +15,7 @@
     <BaseDialog
       v-model="createDialog"
       :title="$t('events.new-notification')"
+      :icon="$globals.icons.bellPlus"
       can-submit
       @submit="createNewNotifier"
     >
@@ -95,7 +96,7 @@
       >
         <v-expansion-panel-title
           disable-icon-rotate
-          class="headline"
+          class="text-h6"
         >
           <div class="d-flex align-center">
             {{ notifier.name }}
@@ -103,6 +104,7 @@
           <template #actions>
             <v-btn
               icon
+              flat
               class="ml-2"
             >
               <v-icon>
diff --git a/frontend/pages/register/index.vue b/frontend/pages/register/index.vue
index 0e2e0e637..c4fd53624 100644
--- a/frontend/pages/register/index.vue
+++ b/frontend/pages/register/index.vue
@@ -47,7 +47,7 @@
       <!-- Form Container -->
       <div class="d-flex justify-center grow items-center my-4">
         <template v-if="state.ctx.state === States.Initial">
-          <div width="600px">
+          <v-container>
             <v-card-title class="text-h5 my-4 mb-5 pb-0 text-center">
               {{ $t("user-registration.user-registration") }}
             </v-card-title>
@@ -60,7 +60,7 @@
                 color="primary"
                 dark
                 hover
-                width="300px"
+                width="320px"
                 @click="initial.joinGroup"
               >
                 <v-card-title class="d-flex align-center justify-center py-3">
@@ -77,7 +77,7 @@
                 color="primary"
                 dark
                 hover
-                width="300px"
+                width="320px"
                 @click="initial.createGroup"
               >
                 <v-card-title class="d-flex align-center justify-center py-3">
@@ -92,7 +92,7 @@
                 </v-card-title>
               </v-card>
             </div>
-          </div>
+          </v-container>
         </template>
 
         <template v-else-if="state.ctx.state === States.ProvideToken">
@@ -333,9 +333,7 @@ import type { VForm } from "~/types/auto-forms";
 
 const inputAttrs = {
   variant: "filled",
-  rounded: true,
   validateOnBlur: true,
-  class: "rounded-lg",
 };
 
 export default defineNuxtComponent({
diff --git a/frontend/pages/reset-password.vue b/frontend/pages/reset-password.vue
index 41b954879..6088406e9 100644
--- a/frontend/pages/reset-password.vue
+++ b/frontend/pages/reset-password.vue
@@ -17,21 +17,19 @@
         <v-form @submit.prevent="requestLink()">
           <v-text-field
             v-model="email"
-            :prepend-icon="$globals.icons.email"
-            variant="filled"
-            rounded
+            :prepend-inner-icon="$globals.icons.email"
+            variant="solo-filled"
+            flat
             autofocus
-            class="rounded-lg"
             name="login"
             :label="$t('user.email')"
             type="text"
           />
           <v-text-field
             v-model="password"
-            variant="filled"
-            rounded
-            class="rounded-lg"
-            :prepend-icon="$globals.icons.lock"
+            variant="solo-filled"
+            flat
+            :prepend-inner-icon="$globals.icons.lock"
             name="password"
             :label="$t('user.password')"
             type="password"
@@ -39,11 +37,10 @@
           />
           <v-text-field
             v-model="passwordConfirm"
-            variant="filled"
-            rounded
+            variant="solo-filled"
+            flat
             validate-on="blur"
-            class="rounded-lg"
-            :prepend-icon="$globals.icons.lock"
+            :prepend-inner-icon="$globals.icons.lock"
             name="password"
             :label="$t('user.confirm-password')"
             type="password"
diff --git a/frontend/pages/user/profile/api-tokens.vue b/frontend/pages/user/profile/api-tokens.vue
index 299a51dfc..35e16b418 100644
--- a/frontend/pages/user/profile/api-tokens.vue
+++ b/frontend/pages/user/profile/api-tokens.vue
@@ -17,9 +17,10 @@
     <section class="d-flex justify-center">
       <v-card
         class="mt-4"
-        width="500px"
+        width="100%"
+        flat
       >
-        <v-card-text>
+        <v-card-text class="px-0">
           <v-form
             ref="domNewTokenForm"
             @submit.prevent
@@ -38,16 +39,16 @@
               readonly
               rows="3"
             />
-            <v-list-subheader class="text-center">
+            <p>
               {{
                 $t(
                   "settings.token.copy-this-token-for-use-with-an-external-application-this-token-will-not-be-viewable-again",
                 )
               }}
-            </v-list-subheader>
+            </p>
           </template>
         </v-card-text>
-        <v-card-actions>
+        <v-card-actions class="px-0">
           <BaseButton
             v-if="createdToken"
             cancel
@@ -78,14 +79,11 @@
       :title="$t('settings.token.active-tokens')"
     />
     <section class="d-flex flex-column">
+      <v-list>
       <div
         v-for="(token, index) in user.tokens"
         :key="index"
       >
-        <v-card
-          variant="outlined"
-          class="mb-2"
-        >
           <v-list-item>
             <v-list-item-title>
               {{ token.name }}
@@ -93,16 +91,17 @@
             <v-list-item-subtitle>
               {{ $t('general.created-on-date', [$d(new Date(token.createdAt!))]) }}
             </v-list-item-subtitle>
-            <v-list-item-action>
+            <template #append>
               <BaseButton
                 delete
                 small
                 @click="deleteToken(token.id)"
               />
-            </v-list-item-action>
+            </template>
           </v-list-item>
-        </v-card>
-      </div>
+          <v-divider class="mx-2 my-2" />
+        </div>
+      </v-list>
     </section>
   </v-container>
 </template>
diff --git a/frontend/pages/user/profile/index.vue b/frontend/pages/user/profile/index.vue
index 32de46fa4..aed722073 100644
--- a/frontend/pages/user/profile/index.vue
+++ b/frontend/pages/user/profile/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-container v-if="user">
+  <v-container v-if="user" class="mb-8">
     <section class="d-flex flex-column align-center mt-4">
       <UserAvatar
         :tooltip="false"
@@ -7,7 +7,7 @@
         :user-id="user.id"
       />
 
-      <h2 class="text-h4">
+      <h2 class="text-h4 text-center">
         {{ $t('profile.welcome-user', [user.fullName]) }}
       </h2>
       <p class="subtitle-1 mb-0 text-center">