From 00a8fdda417a80065f89457bcd716c96c4c9215f Mon Sep 17 00:00:00 2001
From: hay-kot <hay-kot@pm.me>
Date: Sun, 1 Aug 2021 19:24:47 -0800
Subject: [PATCH] reorganize all frontend items

---
 .../UI/Dialogs/ConfirmationDialog.vue         | 137 -----
 frontend/api/class-interfaces/_base.ts        |  10 +
 frontend/api/class-interfaces/recipes.ts      |  55 ++
 frontend/api/index.ts                         |  17 +-
 frontend/api/requests.ts                      |   1 +
 frontend/assets/main.css                      |   8 +
 .../Domain/MealPlan/MealPlanCard.vue          |  20 +-
 .../Domain/MealPlan/MealPlanEditor.vue        |   2 +-
 .../Domain/MealPlan/MealPlanNew.vue           |  88 ++--
 .../Domain/Recipe/RecipeActionMenu.vue        |  29 +-
 .../Domain/Recipe/RecipeAssets.vue            |  34 +-
 .../Domain/Recipe/RecipeComments.vue          |  10 +-
 .../Domain/Recipe/RecipeDialogBulkAdd.vue     |   4 +-
 .../Recipe/RecipeDialogExtrasEditor.vue       |   8 +-
 .../Domain/Recipe/RecipeImageUploadBtn.vue    |  14 +-
 .../Domain/Recipe/RecipeIngredients.vue       |  26 +-
 .../Domain/Recipe/RecipeInstructions.vue      |  26 +-
 .../Domain/Recipe/RecipeNotes.vue             |  10 +-
 .../Domain/Recipe/RecipeNutrition.vue         |   2 +-
 .../Domain/Recipe/RecipePrintView.vue         |   8 +-
 .../Domain/Recipe/RecipeSettingsMenu.vue      |   4 +-
 .../Domain/Recipe/RecipeTimeCard.vue          |   2 +-
 .../Domain/User/UserAvatar.vue                |   2 +-
 .../Page/Recipe/RecipeEditor.vue              |  32 +-
 .../Page/Recipe/RecipeViewer.vue              |  19 +-
 .../components/Domain/Recipe/RecipeCard.vue   |  60 ++-
 .../Domain/Recipe/RecipeCardImage.vue         |  35 +-
 .../Domain/Recipe/RecipeCardMobile.vue        |  53 +-
 .../Domain/Recipe/RecipeCardSection.vue       |  60 ++-
 .../components/Domain/Recipe/RecipeChips.vue  |  27 +-
 .../Domain/Recipe/RecipeContextMenu.vue       |  26 +-
 .../Domain/Recipe/RecipeFavoriteBadge.vue     |   9 +-
 .../components/Domain/Recipe/RecipeRating.vue |  25 +-
 .../components/Layout/AppFloatingButton.vue   | 267 +++++++++-
 frontend/components/Layout/AppFooter.vue      |  24 +-
 frontend/components/Layout/AppHeader.vue      | 152 +++++-
 frontend/components/Layout/AppSidebar.vue     | 120 ++++-
 .../components/global/AppLoader.vue           |   0
 frontend/components/global/AutoForm.vue       | 264 ++++++++++
 .../components/global}/BaseDialog.vue         |  59 ++-
 frontend/composables/use-api.ts               |  64 +++
 .../lang}/dateTimeFormats/af-ZA.json          |   0
 .../lang}/dateTimeFormats/ar-SA.json          |   0
 .../lang}/dateTimeFormats/ca-ES.json          |   0
 .../lang}/dateTimeFormats/cs-CZ.json          |   0
 .../lang}/dateTimeFormats/da-DK.json          |   0
 .../lang}/dateTimeFormats/de-DE.json          |   0
 .../lang}/dateTimeFormats/el-GR.json          |   0
 .../lang}/dateTimeFormats/en-GB.json          |   0
 .../lang}/dateTimeFormats/en-US.json          |   0
 .../lang}/dateTimeFormats/es-ES.json          |   0
 .../lang}/dateTimeFormats/fi-FI.json          |   0
 .../lang}/dateTimeFormats/fr-FR.json          |   0
 .../lang}/dateTimeFormats/he-IL.json          |   0
 .../lang}/dateTimeFormats/hu-HU.json          |   0
 .../lang}/dateTimeFormats/it-IT.json          |   0
 .../lang}/dateTimeFormats/ja-JP.json          |   0
 .../lang}/dateTimeFormats/ko-KR.json          |   0
 .../lang}/dateTimeFormats/nl-NL.json          |   0
 .../lang}/dateTimeFormats/no-NO.json          |   0
 .../lang}/dateTimeFormats/pl-PL.json          |   0
 .../lang}/dateTimeFormats/pt-BR.json          |   0
 .../lang}/dateTimeFormats/pt-PT.json          |   0
 .../lang}/dateTimeFormats/ro-RO.json          |   0
 .../lang}/dateTimeFormats/ru-RU.json          |   0
 .../lang}/dateTimeFormats/sr-SP.json          |   0
 .../lang}/dateTimeFormats/sv-SE.json          |   0
 .../lang}/dateTimeFormats/tr-TR.json          |   0
 .../lang}/dateTimeFormats/uk-UA.json          |   0
 .../lang}/dateTimeFormats/vi-VN.json          |   0
 .../lang}/dateTimeFormats/zh-CN.json          |   0
 .../lang}/dateTimeFormats/zh-TW.json          |   0
 .../lang}/messages/af-ZA.json                 |   0
 .../lang}/messages/ar-SA.json                 |   0
 .../lang}/messages/ca-ES.json                 |   0
 .../lang}/messages/cs-CZ.json                 |   0
 .../lang}/messages/da-DK.json                 |   0
 .../lang}/messages/de-DE.json                 |   0
 .../lang}/messages/el-GR.json                 |   0
 .../lang}/messages/en-GB.json                 |   0
 frontend/lang/messages/en-US.js               | 497 ++++++++++++++++++
 .../lang}/messages/en-US.json                 |   0
 .../lang}/messages/es-ES.json                 |   0
 .../lang}/messages/fi-FI.json                 |   0
 .../lang}/messages/fr-FR.json                 |   0
 .../lang}/messages/he-IL.json                 |   0
 .../lang}/messages/hu-HU.json                 |   0
 .../lang}/messages/it-IT.json                 |   0
 .../lang}/messages/ja-JP.json                 |   0
 .../lang}/messages/ko-KR.json                 |   0
 .../lang}/messages/nl-NL.json                 |   0
 .../lang}/messages/no-NO.json                 |   0
 .../lang}/messages/pl-PL.json                 |   0
 .../lang}/messages/pt-BR.json                 |   0
 .../lang}/messages/pt-PT.json                 |   0
 .../lang}/messages/ro-RO.json                 |   0
 .../lang}/messages/ru-RU.json                 |   0
 .../lang}/messages/sr-SP.json                 |   0
 .../lang}/messages/sv-SE.json                 |   0
 .../lang}/messages/tr-TR.json                 |   0
 .../lang}/messages/uk-UA.json                 |   0
 .../lang}/messages/vi-VN.json                 |   0
 .../lang}/messages/zh-CN.json                 |   0
 .../lang}/messages/zh-TW.json                 |   0
 frontend/layouts/admin.vue                    |  91 +++-
 frontend/layouts/basic.vue                    |  30 ++
 frontend/layouts/default.vue                  | 158 ++----
 frontend/layouts/error.vue                    |  31 +-
 frontend/nuxt.config.js                       | 146 +++--
 frontend/package.json                         |   7 +
 frontend/pages/admin/about.vue                |   9 +-
 frontend/pages/admin/dashboard.vue            |  31 +-
 frontend/pages/admin/manage-users.vue         |  31 +-
 frontend/pages/admin/migrations.vue           |  31 +-
 frontend/pages/admin/site-settings.vue        |  31 +-
 frontend/pages/admin/toolbox.vue              |  17 +-
 frontend/pages/index.vue                      |  24 +-
 frontend/pages/meal-plan/planner.vue          |   2 +-
 frontend/pages/meal-plan/this-week.vue        |   2 +-
 frontend/pages/recipe/_slug.vue               |   2 +-
 frontend/pages/recipes/all.vue                |   2 +-
 frontend/pages/recipes/category.vue           |   2 +-
 frontend/pages/recipes/tag.vue                |   2 +-
 frontend/pages/shopping-list/index.vue        |   2 +-
 frontend/pages/user/_id/profile.vue           |   2 +-
 frontend/pages/user/login.vue                 | 221 +++++++-
 .../pages/user/{register.vue => profile.vue}  |   1 +
 frontend/pages/user/sign-up.vue               | 116 ++++
 frontend/plugins/globals.js                   | 206 ++++++++
 frontend/static/account.png                   | Bin 0 -> 675 bytes
 frontend/store/index.js                       |   0
 frontend/tsconfig.json                        |   3 +-
 frontend/types/api-types/admin.ts             | 253 +++++++++
 frontend/types/api-types/events.ts            |  60 +++
 frontend/types/api-types/meal-plan.ts         |  52 ++
 frontend/types/api-types/recipe.ts            | 141 +++++
 frontend/types/api-types/user.ts              | 166 ++++++
 frontend/types/api.ts                         |  16 +
 frontend/types/application-types.ts           |   9 +
 frontend/types/vue.d.ts                       |  14 +
 .../src => frontend}/utils/globals.js         |   0
 {frontend.old/src => frontend}/utils/index.js |   0
 .../src => frontend}/utils/recipe.js          |   0
 frontend/yarn.lock                            | 316 ++++++++++-
 poetry.lock                                   |  49 +-
 pyproject.toml                                |   1 +
 vetur.config.js                               |   1 +
 147 files changed, 3845 insertions(+), 743 deletions(-)
 delete mode 100644 frontend.old/src/components/UI/Dialogs/ConfirmationDialog.vue
 create mode 100644 frontend/api/class-interfaces/_base.ts
 create mode 100644 frontend/api/class-interfaces/recipes.ts
 create mode 100644 frontend/assets/main.css
 rename frontend/{components => component-stagin}/Domain/MealPlan/MealPlanCard.vue (89%)
 rename frontend/{components => component-stagin}/Domain/MealPlan/MealPlanEditor.vue (95%)
 rename frontend/{components => component-stagin}/Domain/MealPlan/MealPlanNew.vue (91%)
 rename frontend/{components => component-stagin}/Domain/Recipe/RecipeActionMenu.vue (86%)
 rename frontend/{components => component-stagin}/Domain/Recipe/RecipeAssets.vue (81%)
 rename frontend/{components => component-stagin}/Domain/Recipe/RecipeComments.vue (93%)
 rename frontend/{components => component-stagin}/Domain/Recipe/RecipeDialogBulkAdd.vue (93%)
 rename frontend/{components => component-stagin}/Domain/Recipe/RecipeDialogExtrasEditor.vue (90%)
 rename frontend/{components => component-stagin}/Domain/Recipe/RecipeImageUploadBtn.vue (84%)
 rename frontend/{components => component-stagin}/Domain/Recipe/RecipeIngredients.vue (89%)
 rename frontend/{components => component-stagin}/Domain/Recipe/RecipeInstructions.vue (94%)
 rename frontend/{components => component-stagin}/Domain/Recipe/RecipeNotes.vue (76%)
 rename frontend/{components => component-stagin}/Domain/Recipe/RecipeNutrition.vue (97%)
 rename frontend/{components => component-stagin}/Domain/Recipe/RecipePrintView.vue (90%)
 rename frontend/{components => component-stagin}/Domain/Recipe/RecipeSettingsMenu.vue (96%)
 rename frontend/{components => component-stagin}/Domain/Recipe/RecipeTimeCard.vue (91%)
 rename frontend/{components => component-stagin}/Domain/User/UserAvatar.vue (96%)
 rename frontend/{components => component-stagin}/Page/Recipe/RecipeEditor.vue (77%)
 rename frontend/{components => component-stagin}/Page/Recipe/RecipeViewer.vue (89%)
 rename frontend.old/src/components/UI/CardSection.vue => frontend/components/Domain/Recipe/RecipeCardSection.vue (84%)
 rename frontend.old/src/components/UI/SiteLoader.vue => frontend/components/global/AppLoader.vue (100%)
 create mode 100644 frontend/components/global/AutoForm.vue
 rename {frontend.old/src/components/UI/Dialogs => frontend/components/global}/BaseDialog.vue (61%)
 create mode 100644 frontend/composables/use-api.ts
 rename {frontend.old/src/locales => frontend/lang}/dateTimeFormats/af-ZA.json (100%)
 rename {frontend.old/src/locales => frontend/lang}/dateTimeFormats/ar-SA.json (100%)
 rename {frontend.old/src/locales => frontend/lang}/dateTimeFormats/ca-ES.json (100%)
 rename {frontend.old/src/locales => frontend/lang}/dateTimeFormats/cs-CZ.json (100%)
 rename {frontend.old/src/locales => frontend/lang}/dateTimeFormats/da-DK.json (100%)
 rename {frontend.old/src/locales => frontend/lang}/dateTimeFormats/de-DE.json (100%)
 rename {frontend.old/src/locales => frontend/lang}/dateTimeFormats/el-GR.json (100%)
 rename {frontend.old/src/locales => frontend/lang}/dateTimeFormats/en-GB.json (100%)
 rename {frontend.old/src/locales => frontend/lang}/dateTimeFormats/en-US.json (100%)
 rename {frontend.old/src/locales => frontend/lang}/dateTimeFormats/es-ES.json (100%)
 rename {frontend.old/src/locales => frontend/lang}/dateTimeFormats/fi-FI.json (100%)
 rename {frontend.old/src/locales => frontend/lang}/dateTimeFormats/fr-FR.json (100%)
 rename {frontend.old/src/locales => frontend/lang}/dateTimeFormats/he-IL.json (100%)
 rename {frontend.old/src/locales => frontend/lang}/dateTimeFormats/hu-HU.json (100%)
 rename {frontend.old/src/locales => frontend/lang}/dateTimeFormats/it-IT.json (100%)
 rename {frontend.old/src/locales => frontend/lang}/dateTimeFormats/ja-JP.json (100%)
 rename {frontend.old/src/locales => frontend/lang}/dateTimeFormats/ko-KR.json (100%)
 rename {frontend.old/src/locales => frontend/lang}/dateTimeFormats/nl-NL.json (100%)
 rename {frontend.old/src/locales => frontend/lang}/dateTimeFormats/no-NO.json (100%)
 rename {frontend.old/src/locales => frontend/lang}/dateTimeFormats/pl-PL.json (100%)
 rename {frontend.old/src/locales => frontend/lang}/dateTimeFormats/pt-BR.json (100%)
 rename {frontend.old/src/locales => frontend/lang}/dateTimeFormats/pt-PT.json (100%)
 rename {frontend.old/src/locales => frontend/lang}/dateTimeFormats/ro-RO.json (100%)
 rename {frontend.old/src/locales => frontend/lang}/dateTimeFormats/ru-RU.json (100%)
 rename {frontend.old/src/locales => frontend/lang}/dateTimeFormats/sr-SP.json (100%)
 rename {frontend.old/src/locales => frontend/lang}/dateTimeFormats/sv-SE.json (100%)
 rename {frontend.old/src/locales => frontend/lang}/dateTimeFormats/tr-TR.json (100%)
 rename {frontend.old/src/locales => frontend/lang}/dateTimeFormats/uk-UA.json (100%)
 rename {frontend.old/src/locales => frontend/lang}/dateTimeFormats/vi-VN.json (100%)
 rename {frontend.old/src/locales => frontend/lang}/dateTimeFormats/zh-CN.json (100%)
 rename {frontend.old/src/locales => frontend/lang}/dateTimeFormats/zh-TW.json (100%)
 rename {frontend.old/src/locales => frontend/lang}/messages/af-ZA.json (100%)
 rename {frontend.old/src/locales => frontend/lang}/messages/ar-SA.json (100%)
 rename {frontend.old/src/locales => frontend/lang}/messages/ca-ES.json (100%)
 rename {frontend.old/src/locales => frontend/lang}/messages/cs-CZ.json (100%)
 rename {frontend.old/src/locales => frontend/lang}/messages/da-DK.json (100%)
 rename {frontend.old/src/locales => frontend/lang}/messages/de-DE.json (100%)
 rename {frontend.old/src/locales => frontend/lang}/messages/el-GR.json (100%)
 rename {frontend.old/src/locales => frontend/lang}/messages/en-GB.json (100%)
 create mode 100644 frontend/lang/messages/en-US.js
 rename {frontend.old/src/locales => frontend/lang}/messages/en-US.json (100%)
 rename {frontend.old/src/locales => frontend/lang}/messages/es-ES.json (100%)
 rename {frontend.old/src/locales => frontend/lang}/messages/fi-FI.json (100%)
 rename {frontend.old/src/locales => frontend/lang}/messages/fr-FR.json (100%)
 rename {frontend.old/src/locales => frontend/lang}/messages/he-IL.json (100%)
 rename {frontend.old/src/locales => frontend/lang}/messages/hu-HU.json (100%)
 rename {frontend.old/src/locales => frontend/lang}/messages/it-IT.json (100%)
 rename {frontend.old/src/locales => frontend/lang}/messages/ja-JP.json (100%)
 rename {frontend.old/src/locales => frontend/lang}/messages/ko-KR.json (100%)
 rename {frontend.old/src/locales => frontend/lang}/messages/nl-NL.json (100%)
 rename {frontend.old/src/locales => frontend/lang}/messages/no-NO.json (100%)
 rename {frontend.old/src/locales => frontend/lang}/messages/pl-PL.json (100%)
 rename {frontend.old/src/locales => frontend/lang}/messages/pt-BR.json (100%)
 rename {frontend.old/src/locales => frontend/lang}/messages/pt-PT.json (100%)
 rename {frontend.old/src/locales => frontend/lang}/messages/ro-RO.json (100%)
 rename {frontend.old/src/locales => frontend/lang}/messages/ru-RU.json (100%)
 rename {frontend.old/src/locales => frontend/lang}/messages/sr-SP.json (100%)
 rename {frontend.old/src/locales => frontend/lang}/messages/sv-SE.json (100%)
 rename {frontend.old/src/locales => frontend/lang}/messages/tr-TR.json (100%)
 rename {frontend.old/src/locales => frontend/lang}/messages/uk-UA.json (100%)
 rename {frontend.old/src/locales => frontend/lang}/messages/vi-VN.json (100%)
 rename {frontend.old/src/locales => frontend/lang}/messages/zh-CN.json (100%)
 rename {frontend.old/src/locales => frontend/lang}/messages/zh-TW.json (100%)
 create mode 100644 frontend/layouts/basic.vue
 rename frontend/pages/user/{register.vue => profile.vue} (92%)
 create mode 100644 frontend/pages/user/sign-up.vue
 create mode 100644 frontend/plugins/globals.js
 create mode 100644 frontend/static/account.png
 create mode 100644 frontend/store/index.js
 create mode 100644 frontend/types/api-types/admin.ts
 create mode 100644 frontend/types/api-types/events.ts
 create mode 100644 frontend/types/api-types/meal-plan.ts
 create mode 100644 frontend/types/api-types/recipe.ts
 create mode 100644 frontend/types/api-types/user.ts
 create mode 100644 frontend/types/api.ts
 create mode 100644 frontend/types/application-types.ts
 create mode 100644 frontend/types/vue.d.ts
 rename {frontend.old/src => frontend}/utils/globals.js (100%)
 rename {frontend.old/src => frontend}/utils/index.js (100%)
 rename {frontend.old/src => frontend}/utils/recipe.js (100%)

diff --git a/frontend.old/src/components/UI/Dialogs/ConfirmationDialog.vue b/frontend.old/src/components/UI/Dialogs/ConfirmationDialog.vue
deleted file mode 100644
index 7d7ea8ea574b..000000000000
--- a/frontend.old/src/components/UI/Dialogs/ConfirmationDialog.vue
+++ /dev/null
@@ -1,137 +0,0 @@
-<template>
-  <v-dialog
-    v-model="dialog"
-    :max-width="width"
-    :style="{ zIndex: zIndex }"
-    @click:outside="cancel"
-    @keydown.esc="cancel"
-    @keydown.enter="confirm"
-  >
-    <template v-slot:activator="{}">
-      <slot  v-bind="{ open }"> </slot>
-    </template>
-    <v-card>
-      <v-app-bar v-if="Boolean(title)" :color="color" dense dark>
-        <v-icon v-if="Boolean(icon)" left> {{ icon }}</v-icon>
-        <v-toolbar-title v-text="title" />
-      </v-app-bar>
-
-      <v-card-text v-show="!!message" class="pa-4 text--primary" v-html="message" />
-
-      <v-card-actions>
-        <v-spacer></v-spacer>
-        <v-btn color="grey" text @click="cancel">
-          {{ $t("general.cancel") }}
-        </v-btn>
-        <v-btn :color="color" text @click="confirm">
-          {{ $t("general.confirm") }}
-        </v-btn>
-      </v-card-actions>
-    </v-card>
-  </v-dialog>
-</template>
-
-<script>
-const CLOSE_EVENT = "close";
-const OPEN_EVENT = "open";
-const CONFIRM_EVENT = "confirm";
-/**
- * ConfirmationDialog Component used to add a second validaion step to an action.
- * @version 1.0.1
- * @author [zackbcom](https://github.com/zackbcom)
- * @since Version 1.0.0
- */
-export default {
-  name: "ConfirmationDialog",
-  props: {
-    /**
-     * Message to be in body.
-     */
-    message: String,
-    /**
-     * Optional Title message to be used in title.
-     */
-    title: String,
-    /**
-     * Optional Icon to be used in title.
-     */
-    icon: {
-      type: String,
-      default: "mid-alert-circle",
-    },
-    /**
-     * Color theme of the component. Chose one of the defined theme colors.
-     * @values primary, secondary, accent, success, info, warning, error
-     */
-    color: {
-      type: String,
-      default: "error",
-    },
-    /**
-     * Define the max width of the component.
-     */
-    width: {
-      type: Number,
-      default: 400,
-    },
-    /**
-     * zIndex of the component.
-     */
-    zIndex: {
-      type: Number,
-      default: 200,
-    },
-  },
-  watch: {
-    dialog() {
-      if (this.dialog === false) {
-        this.$emit(CLOSE_EVENT);
-      } else this.$emit(OPEN_EVENT);
-    },
-  },
-  data: () => ({
-    /**
-     * Keep state of open or closed
-     */
-    dialog: false,
-  }),
-  methods: {
-    open() {
-      this.dialog = true;
-    },
-    /**
-     * Cancel button handler.
-     */
-    cancel() {
-      /**
-       * Cancel event.
-       *
-       * @event Cancel
-       * @property {string} content content of the first prop passed to the event
-       */
-      this.$emit("cancel");
-
-      //Hide Modal
-      this.dialog = false;
-    },
-
-    /**
-     * confirm button handler.
-     */
-    confirm() {
-      /**
-       * confirm event.
-       *
-       * @event confirm
-       * @property {string} content content of the first prop passed to the event
-       */
-      this.$emit(CONFIRM_EVENT);
-
-      //Hide Modal
-      this.dialog = false;
-    },
-  },
-};
-</script>
-
-<style></style>
diff --git a/frontend/api/class-interfaces/_base.ts b/frontend/api/class-interfaces/_base.ts
new file mode 100644
index 000000000000..74ecc49cc84b
--- /dev/null
+++ b/frontend/api/class-interfaces/_base.ts
@@ -0,0 +1,10 @@
+import { ApiRequestInstance } from "~/types/api";
+
+export class BaseAPIClass {
+    requests: ApiRequestInstance
+    
+    constructor(requests: ApiRequestInstance) {
+        this.requests = requests;
+    }
+}
+
diff --git a/frontend/api/class-interfaces/recipes.ts b/frontend/api/class-interfaces/recipes.ts
new file mode 100644
index 000000000000..12ba427429d1
--- /dev/null
+++ b/frontend/api/class-interfaces/recipes.ts
@@ -0,0 +1,55 @@
+import { BaseAPIClass } from "./_base";
+import { Recipe } from "~/types/api-types/admin";
+
+const prefix = "/api";
+
+const routes = {
+  recipesCreate: `${prefix}/recipes/create`,
+  recipesBase: `${prefix}/recipes`,
+  recipesSummary: `${prefix}/recipes/summary`,
+  recipesTestScrapeUrl: `${prefix}/recipes/test-scrape-url`,
+  recipesCreateUrl: `${prefix}/recipes/create-url`,
+  recipesCreateFromZip: `${prefix}/recipes/create-from-zip`,
+
+  recipesRecipeSlug: (recipe_slug: string) => `${prefix}/recipes/${recipe_slug}`,
+  recipesRecipeSlugZip: (recipe_slug: string) => `${prefix}/recipes/${recipe_slug}/zip`,
+  recipesRecipeSlugImage: (recipe_slug: string) => `${prefix}/recipes/${recipe_slug}/image`,
+  recipesRecipeSlugAssets: (recipe_slug: string) => `${prefix}/recipes/${recipe_slug}/assets`,
+};
+
+class RecipeAPI extends BaseAPIClass {
+  async getAll(start = 0, limit = 9999) {
+    return await this.requests.get<Recipe[]>(routes.recipesSummary, {
+      params: { start, limit },
+    });
+  }
+
+  async getOne(slug: string) {
+    return await this.requests.get<Recipe>(routes.recipesRecipeSlug(slug));
+  }
+
+  async createOne(name: string) {
+    return await this.requests.post(routes.recipesBase, { name });
+  }
+
+
+
+
+  recipeImage(recipeSlug: string, version = null, key = null) {
+    return `/api/media/recipes/${recipeSlug}/images/original.webp?&rnd=${key}&version=${version}`;
+  }
+
+  recipeSmallImage(recipeSlug: string, version = null, key = null) {
+    return `/api/media/recipes/${recipeSlug}/images/min-original.webp?&rnd=${key}&version=${version}`;
+  }
+
+  recipeTinyImage(recipeSlug: string, version = null, key = null) {
+    return `/api/media/recipes/${recipeSlug}/images/tiny-original.webp?&rnd=${key}&version=${version}`;
+  }
+
+  recipeAssetPath(recipeSlug: string, assetName: string) {
+    return `/api/media/recipes/${recipeSlug}/assets/${assetName}`;
+  }
+}
+
+export { RecipeAPI };
diff --git a/frontend/api/index.ts b/frontend/api/index.ts
index c61e743f6e35..8c5ea3e2b7b5 100644
--- a/frontend/api/index.ts
+++ b/frontend/api/index.ts
@@ -1,5 +1,20 @@
+import { RecipeAPI } from "./class-interfaces/recipes";
+import { ApiRequestInstance } from "~/types/api";
 
+class Api {
+  private static instance: Api;
+  public recipes: RecipeAPI;
 
+  constructor(requests: ApiRequestInstance) {
+    if (Api.instance instanceof Api) {
+      return Api.instance;
+    }
 
-export const api = {}
+    this.recipes = new RecipeAPI(requests);
 
+    Object.freeze(this);
+    Api.instance = this;
+  }
+}
+
+export { Api };
diff --git a/frontend/api/requests.ts b/frontend/api/requests.ts
index f21a4bc4f82d..544a99ca8e9e 100644
--- a/frontend/api/requests.ts
+++ b/frontend/api/requests.ts
@@ -1,5 +1,6 @@
 import axios, { AxiosResponse } from "axios";
 
+
 interface RequestResponse<T> {
   response: AxiosResponse<T> | null;
   data: T | null;
diff --git a/frontend/assets/main.css b/frontend/assets/main.css
new file mode 100644
index 000000000000..b5ff067e6f6c
--- /dev/null
+++ b/frontend/assets/main.css
@@ -0,0 +1,8 @@
+.layout-enter-active,
+.layout-leave-active {
+  transition: opacity 0.2s;
+}
+.layout-enter,
+.layout-leave-active {
+  opacity: 0;
+}
diff --git a/frontend/components/Domain/MealPlan/MealPlanCard.vue b/frontend/component-stagin/Domain/MealPlan/MealPlanCard.vue
similarity index 89%
rename from frontend/components/Domain/MealPlan/MealPlanCard.vue
rename to frontend/component-stagin/Domain/MealPlan/MealPlanCard.vue
index 13862cdd09d3..140e9872cb39 100644
--- a/frontend/components/Domain/MealPlan/MealPlanCard.vue
+++ b/frontend/component-stagin/Domain/MealPlan/MealPlanCard.vue
@@ -2,19 +2,19 @@
   <v-row>
     <SearchDialog ref="mealselect" @selected="setSlug" />
     <BaseDialog
+      ref="customMealDialog"
       title="Custom Meal"
       :title-icon="$globals.icons.primary"
       :submit-text="$t('general.save')"
       :top="true"
-      ref="customMealDialog"
       @submit="pushCustomMeal"
     >
       <v-card-text>
-        <v-text-field autofocus v-model="customMeal.name" :label="$t('general.name')"> </v-text-field>
+        <v-text-field v-model="customMeal.name" autofocus :label="$t('general.name')"> </v-text-field>
         <v-textarea v-model="customMeal.description" :label="$t('recipe.description')"> </v-textarea>
       </v-card-text>
     </BaseDialog>
-    <v-col cols="12" sm="12" md="6" lg="4" xl="3" v-for="(planDay, index) in value" :key="index">
+    <v-col v-for="(planDay, index) in value" :key="index" cols="12" sm="12" md="6" lg="4" xl="3">
       <v-hover v-slot="{ hover }" :open-delay="50">
         <v-card :class="{ 'on-hover': hover }" :elevation="hover ? 12 : 2">
           <CardImage large :slug="planDay.meals[0].slug" icon-size="200" @click="openSearch(index, modes.primary)">
@@ -80,9 +80,9 @@
 </template>
 
 <script>
-import SearchDialog from "../UI/Dialogs/SearchDialog";
 import BaseDialog from "@/components/UI/Dialogs/BaseDialog";
 import { api } from "@/api";
+import SearchDialog from "../UI/Dialogs/SearchDialog";
 import CardImage from "../Recipe/CardImage.vue";
 export default {
   components: {
@@ -116,13 +116,13 @@ export default {
       }
     },
     setSide(name, slug = null, description = "") {
-      const meal = { name: name, slug: slug, description: description };
-      this.value[this.activeIndex]["meals"].push(meal);
+      const meal = { name, slug, description };
+      this.value[this.activeIndex].meals.push(meal);
     },
     setPrimary(name, slug, description = "") {
-      this.value[this.activeIndex]["meals"][0]["slug"] = slug;
-      this.value[this.activeIndex]["meals"][0]["name"] = name;
-      this.value[this.activeIndex]["meals"][0]["description"] = description;
+      this.value[this.activeIndex].meals[0].slug = slug;
+      this.value[this.activeIndex].meals[0].name = name;
+      this.value[this.activeIndex].meals[0].description = description;
     },
     setSlug(recipe) {
       switch (this.mode) {
@@ -140,7 +140,7 @@ export default {
       this.$refs.mealselect.open();
     },
     removeSide(dayIndex, sideIndex) {
-      this.value[dayIndex]["meals"].splice(sideIndex, 1);
+      this.value[dayIndex].meals.splice(sideIndex, 1);
     },
     addCustomItem(index, mode) {
       this.mode = mode;
diff --git a/frontend/components/Domain/MealPlan/MealPlanEditor.vue b/frontend/component-stagin/Domain/MealPlan/MealPlanEditor.vue
similarity index 95%
rename from frontend/components/Domain/MealPlan/MealPlanEditor.vue
rename to frontend/component-stagin/Domain/MealPlan/MealPlanEditor.vue
index 80f0f0bef469..7f790b483491 100644
--- a/frontend/components/Domain/MealPlan/MealPlanEditor.vue
+++ b/frontend/component-stagin/Domain/MealPlan/MealPlanEditor.vue
@@ -31,7 +31,7 @@ export default {
 
   methods: {
     formatDate(timestamp) {
-      let dateObject = new Date(timestamp);
+      const dateObject = new Date(timestamp);
       return utils.getDateAsPythonDate(dateObject);
     },
     async update() {
diff --git a/frontend/components/Domain/MealPlan/MealPlanNew.vue b/frontend/component-stagin/Domain/MealPlan/MealPlanNew.vue
similarity index 91%
rename from frontend/components/Domain/MealPlan/MealPlanNew.vue
rename to frontend/component-stagin/Domain/MealPlan/MealPlanNew.vue
index 66eeb39683b1..fd8fbe347ec2 100644
--- a/frontend/components/Domain/MealPlan/MealPlanNew.vue
+++ b/frontend/component-stagin/Domain/MealPlan/MealPlanNew.vue
@@ -21,7 +21,7 @@
             max-width="290px"
             min-width="290px"
           >
-            <template v-slot:activator="{ on, attrs }">
+            <template #activator="{ on, attrs }">
               <v-text-field
                 v-model="startComputedDateFormatted"
                 :label="$t('meal-plan.start-date')"
@@ -45,7 +45,7 @@
             max-width="290px"
             min-width="290px"
           >
-            <template v-slot:activator="{ on, attrs }">
+            <template #activator="{ on, attrs }">
               <v-text-field
                 v-model="endComputedDateFormatted"
                 :label="$t('meal-plan.end-date')"
@@ -67,24 +67,24 @@
     </v-card-text>
     <v-row align="center" justify="end">
       <v-card-actions class="mr-5">
-        <TheButton edit @click="random" v-if="planDays.length > 0" text>
-          <template v-slot:icon>
+        <TheButton v-if="planDays.length > 0" edit text @click="random">
+          <template #icon>
             {{ $globals.icons.diceMultiple }}
           </template>
           {{ $t("general.random") }}
         </TheButton>
-        <TheButton create @click="save" :disabled="planDays.length == 0" />
+        <TheButton create :disabled="planDays.length == 0" @click="save" />
       </v-card-actions>
     </v-row>
   </v-card>
 </template>
 
 <script>
-const CREATE_EVENT = "created";
 import DatePicker from "@/components/FormHelpers/DatePicker";
 import { api } from "@/api";
 import { utils } from "@/utils";
 import MealPlanCard from "./MealPlanCard";
+const CREATE_EVENT = "created";
 export default {
   components: {
     MealPlanCard,
@@ -105,6 +105,41 @@ export default {
     };
   },
 
+  computed: {
+    groupSettings() {
+      return this.$store.getters.getCurrentGroup;
+    },
+    actualStartDate() {
+      if (!this.startDate) return null;
+      return Date.parse(this.startDate.replaceAll("-", "/"));
+    },
+    actualEndDate() {
+      if (!this.endDate) return null;
+      return Date.parse(this.endDate.replaceAll("-", "/"));
+    },
+    dateDif() {
+      if (!this.actualEndDate || !this.actualStartDate) return null;
+      const dateDif = (this.actualEndDate - this.actualStartDate) / (1000 * 3600 * 24) + 1;
+      if (dateDif < 1) {
+        return null;
+      }
+      return dateDif;
+    },
+    startComputedDateFormatted() {
+      return this.formatDate(this.actualStartDate);
+    },
+    endComputedDateFormatted() {
+      return this.formatDate(this.actualEndDate);
+    },
+    filteredRecipes() {
+      const recipes = this.items.filter(x => !this.usedRecipes.includes(x));
+      return recipes.length > 0 ? recipes : this.items;
+    },
+    allRecipes() {
+      return this.$store.getters.getAllRecipes;
+    },
+  },
+
   watch: {
     dateDif() {
       this.planDays = [];
@@ -128,41 +163,6 @@ export default {
     await this.buildMealStore();
   },
 
-  computed: {
-    groupSettings() {
-      return this.$store.getters.getCurrentGroup;
-    },
-    actualStartDate() {
-      if (!this.startDate) return null;
-      return Date.parse(this.startDate.replaceAll("-", "/"));
-    },
-    actualEndDate() {
-      if (!this.endDate) return null;
-      return Date.parse(this.endDate.replaceAll("-", "/"));
-    },
-    dateDif() {
-      if (!this.actualEndDate || !this.actualStartDate) return null;
-      let dateDif = (this.actualEndDate - this.actualStartDate) / (1000 * 3600 * 24) + 1;
-      if (dateDif < 1) {
-        return null;
-      }
-      return dateDif;
-    },
-    startComputedDateFormatted() {
-      return this.formatDate(this.actualStartDate);
-    },
-    endComputedDateFormatted() {
-      return this.formatDate(this.actualEndDate);
-    },
-    filteredRecipes() {
-      const recipes = this.items.filter(x => !this.usedRecipes.includes(x));
-      return recipes.length > 0 ? recipes : this.items;
-    },
-    allRecipes() {
-      return this.$store.getters.getAllRecipes;
-    },
-  },
-
   methods: {
     async buildMealStore() {
       const categories = Array.from(this.groupSettings.categories, x => x.name);
@@ -178,9 +178,9 @@ export default {
     random() {
       this.usedRecipes = [1];
       this.planDays.forEach((_, index) => {
-        let recipe = this.getRandom(this.filteredRecipes);
-        this.planDays[index]["meals"][0]["slug"] = recipe.slug;
-        this.planDays[index]["meals"][0]["name"] = recipe.name;
+        const recipe = this.getRandom(this.filteredRecipes);
+        this.planDays[index].meals[0].slug = recipe.slug;
+        this.planDays[index].meals[0].name = recipe.name;
         this.usedRecipes.push(recipe);
       });
     },
diff --git a/frontend/components/Domain/Recipe/RecipeActionMenu.vue b/frontend/component-stagin/Domain/Recipe/RecipeActionMenu.vue
similarity index 86%
rename from frontend/components/Domain/Recipe/RecipeActionMenu.vue
rename to frontend/component-stagin/Domain/Recipe/RecipeActionMenu.vue
index 5a1adae7c3cb..de22109775e5 100644
--- a/frontend/components/Domain/Recipe/RecipeActionMenu.vue
+++ b/frontend/component-stagin/Domain/Recipe/RecipeActionMenu.vue
@@ -8,19 +8,21 @@
     style="z-index: 2; position: sticky"
     :class="{ 'fixed-bar-mobile': $vuetify.breakpoint.xs }"
   >
-    <ConfirmationDialog
+    <BaseDialog
+      ref="deleteRecipieConfirm"
       :title="$t('recipe.delete-recipe')"
-      :message="$t('recipe.delete-confirmation')"
       color="error"
       :icon="$globals.icons.alertCircle"
-      ref="deleteRecipieConfirm"
-      v-on:confirm="emitDelete()"
-    />
+      @confirm="emitDelete()"
+    >
+      {{ $t("recipe.delete-confirmation") }}
+    </BaseDialog>
+
     <v-spacer></v-spacer>
     <div v-if="!value" class="custom-btn-group ma-1">
-      <FavoriteBadge class="mx-1" color="info" button-style v-if="loggedIn" :slug="slug" show-always />
+      <RecipeFavoriteBadge v-if="loggedIn" class="mx-1" color="info" button-style :slug="slug" show-always />
       <v-tooltip bottom color="info">
-        <template v-slot:activator="{ on, attrs }">
+        <template #activator="{ on, attrs }">
           <v-btn
             v-if="loggedIn"
             fab
@@ -36,7 +38,7 @@
         </template>
         <span>{{ $t("general.edit") }}</span>
       </v-tooltip>
-      <ContextMenu
+      <RecipeContextMenu
         show-print
         :menu-top="false"
         :slug="slug"
@@ -65,9 +67,8 @@
 </template>
 
 <script>
-import ConfirmationDialog from "@/components/UI/Dialogs/ConfirmationDialog.vue";
-import ContextMenu from "@/components/Recipe/ContextMenu.vue";
-import FavoriteBadge from "@/components/Recipe/FavoriteBadge.vue";
+import RecipeContextMenu from "./RecipeContextMenu.vue";
+import RecipeFavoriteBadge from "./RecipeFavoriteBadge.vue";
 
 const SAVE_EVENT = "save";
 const DELETE_EVENT = "delete";
@@ -75,12 +76,14 @@ const CLOSE_EVENT = "close";
 const JSON_EVENT = "json";
 
 export default {
-  components: { ConfirmationDialog, ContextMenu, FavoriteBadge },
+  components: { RecipeContextMenu, RecipeFavoriteBadge },
   props: {
     slug: {
+      required: true,
       type: String,
     },
     name: {
+      required: true,
       type: String,
     },
     value: {
@@ -182,4 +185,4 @@ export default {
 .fixed-bar-mobile {
   top: 1.5em !important;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/frontend/components/Domain/Recipe/RecipeAssets.vue b/frontend/component-stagin/Domain/Recipe/RecipeAssets.vue
similarity index 81%
rename from frontend/components/Domain/Recipe/RecipeAssets.vue
rename to frontend/component-stagin/Domain/Recipe/RecipeAssets.vue
index 03114b5be6bd..68e975d5ccfb 100644
--- a/frontend/components/Domain/Recipe/RecipeAssets.vue
+++ b/frontend/component-stagin/Domain/Recipe/RecipeAssets.vue
@@ -5,12 +5,12 @@
         {{ $t("asset.assets") }}
       </v-card-title>
       <v-divider class="mx-2"></v-divider>
-      <v-list :flat="!edit" v-if="value.length > 0">
+      <v-list v-if="value.length > 0" :flat="!edit">
         <v-list-item v-for="(item, i) in value" :key="i">
           <v-list-item-icon class="ma-auto">
             <v-tooltip bottom>
-              <template v-slot:activator="{ on, attrs }">
-                <v-icon v-text="getIconDefinition(item.icon).icon" v-bind="attrs" v-on="on"></v-icon>
+              <template #activator="{ on, attrs }">
+                <v-icon v-bind="attrs" v-on="on" v-text="getIconDefinition(item.icon).icon"></v-icon>
               </template>
               <span>{{ getIconDefinition(item.icon).title }}</span>
             </v-tooltip>
@@ -23,7 +23,7 @@
               <v-icon> {{ $globals.icons.download }} </v-icon>
             </v-btn>
             <div v-else>
-              <v-btn color="error" icon @click="deleteAsset(i)" top>
+              <v-btn color="error" icon top @click="deleteAsset(i)">
                 <v-icon>{{ $globals.icons.delete }}</v-icon>
               </v-btn>
               <TheCopyButton :copy-text="copyLink(item.fileName)" />
@@ -34,25 +34,25 @@
     </v-card>
     <div class="d-flex ml-auto mt-2">
       <v-spacer></v-spacer>
-      <base-dialog @submit="addAsset" :title="$t('asset.new-asset')" :title-icon="getIconDefinition(newAsset.icon).icon">
-        <template v-slot:open="{ open }">
-          <v-btn color="secondary" dark @click="open" v-if="edit">
+      <BaseDialog :title="$t('asset.new-asset')" :title-icon="getIconDefinition(newAsset.icon).icon" @submit="addAsset">
+        <template #open="{ open }">
+          <v-btn v-if="edit" color="secondary" dark @click="open">
             <v-icon>{{ $globals.icons.create }}</v-icon>
           </v-btn>
         </template>
         <v-card-text class="pt-2">
-          <v-text-field dense v-model="newAsset.name" :label="$t('general.name')"></v-text-field>
+          <v-text-field v-model="newAsset.name" dense :label="$t('general.name')"></v-text-field>
           <div class="d-flex justify-space-between">
             <v-select
+              v-model="newAsset.icon"
               dense
               :prepend-icon="getIconDefinition(newAsset.icon).icon"
-              v-model="newAsset.icon"
               :items="iconOptions"
               item-text="title"
               item-value="name"
               class="mr-2"
             >
-              <template v-slot:item="{ item }">
+              <template #item="{ item }">
                 <v-list-item-avatar>
                   <v-icon class="mr-auto">
                     {{ item.icon }}
@@ -61,11 +61,11 @@
                 {{ item.title }}
               </template>
             </v-select>
-            <TheUploadBtn @uploaded="setFileObject" :post="false" file-name="file" :text-btn="false" />
+            <TheUploadBtn :post="false" file-name="file" :text-btn="false" @uploaded="setFileObject" />
           </div>
           {{ fileObject.name }}
         </v-card-text>
-      </base-dialog>
+      </BaseDialog>
     </div>
   </div>
 </template>
@@ -108,27 +108,27 @@ export default {
       return [ 
         { 
           name: "mdi-file",
-          title: this.$i18n.t('asset.file'),
+          title: this.$i18n.t("asset.file"),
           icon: this.$globals.icons.file 
         },
         { 
           name: "mdi-file-pdf-box",
-          title: this.$i18n.t('asset.pdf'),
+          title: this.$i18n.t("asset.pdf"),
           icon: this.$globals.icons.filePDF 
         },
         { 
           name: "mdi-file-image",
-          title: this.$i18n.t('asset.image'),
+          title: this.$i18n.t("asset.image"),
           icon: this.$globals.icons.fileImage 
         },
         { 
           name: "mdi-code-json",
-          title: this.$i18n.t('asset.code'),
+          title: this.$i18n.t("asset.code"),
           icon: this.$globals.icons.codeJson 
         },
         { 
           name: "mdi-silverware-fork-knife",
-          title: this.$i18n.t('asset.recipe'),
+          title: this.$i18n.t("asset.recipe"),
           icon: this.$globals.icons.primary 
         },
       ];
diff --git a/frontend/components/Domain/Recipe/RecipeComments.vue b/frontend/component-stagin/Domain/Recipe/RecipeComments.vue
similarity index 93%
rename from frontend/components/Domain/Recipe/RecipeComments.vue
rename to frontend/component-stagin/Domain/Recipe/RecipeComments.vue
index f504fd1f519f..b6a11a22d461 100644
--- a/frontend/components/Domain/Recipe/RecipeComments.vue
+++ b/frontend/component-stagin/Domain/Recipe/RecipeComments.vue
@@ -7,7 +7,7 @@
       {{ $t("recipe.comments") }}
     </v-card-title>
     <v-divider class="mx-2"></v-divider>
-    <v-card class="ma-2" v-for="(comment, index) in comments" :key="comment.id">
+    <v-card v-for="(comment, index) in comments" :key="comment.id" class="ma-2">
       <v-list-item two-line>
         <v-list-item-avatar color="accent" class="white--text">
           <img :src="getProfileImage(comment.user.id)" />
@@ -18,19 +18,19 @@
         </v-list-item-content>
         <v-card-actions v-if="loggedIn">
           <TheButton
+            v-if="!editKeys[comment.id] && (user.admin || comment.user.id === user.id)"
             small
             minor
-            v-if="!editKeys[comment.id] && (user.admin || comment.user.id === user.id)"
             delete
             @click="deleteComment(comment.id)"
           />
           <TheButton
-            small
             v-if="!editKeys[comment.id] && comment.user.id === user.id"
+            small
             edit
             @click="editComment(comment.id)"
           />
-          <TheButton small v-else-if="editKeys[comment.id]" update @click="updateComment(comment.id, index)" />
+          <TheButton v-else-if="editKeys[comment.id]" small update @click="updateComment(comment.id, index)" />
         </v-card-actions>
       </v-list-item>
       <div>
@@ -41,7 +41,7 @@
       </div>
     </v-card>
     <v-card-text v-if="loggedIn">
-      <v-textarea auto-grow row-height="1" outlined v-model="newComment"> </v-textarea>
+      <v-textarea v-model="newComment" auto-grow row-height="1" outlined> </v-textarea>
       <div class="d-flex">
         <TheButton class="ml-auto" create @click="createNewComment"> {{ $t("recipe.comment-action") }} </TheButton>
       </div>
diff --git a/frontend/components/Domain/Recipe/RecipeDialogBulkAdd.vue b/frontend/component-stagin/Domain/Recipe/RecipeDialogBulkAdd.vue
similarity index 93%
rename from frontend/components/Domain/Recipe/RecipeDialogBulkAdd.vue
rename to frontend/component-stagin/Domain/Recipe/RecipeDialogBulkAdd.vue
index cd9db02a58b4..e7649384c39d 100644
--- a/frontend/components/Domain/Recipe/RecipeDialogBulkAdd.vue
+++ b/frontend/component-stagin/Domain/Recipe/RecipeDialogBulkAdd.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="text-center">
     <v-dialog v-model="dialog" width="600">
-      <template v-slot:activator="{ on, attrs }">
+      <template #activator="{ on, attrs }">
         <v-btn color="secondary lighten-2" dark v-bind="attrs" v-on="on" @click="inputText = ''">
           {{ $t("new-recipe.bulk-add") }}
         </v-btn>
@@ -38,7 +38,7 @@ export default {
   },
   methods: {
     splitText() {
-      let split = this.inputText.split("\n");
+      const split = this.inputText.split("\n");
 
       split.forEach((element, index) => {
         if ((element === "\n") | (element == false)) {
diff --git a/frontend/components/Domain/Recipe/RecipeDialogExtrasEditor.vue b/frontend/component-stagin/Domain/Recipe/RecipeDialogExtrasEditor.vue
similarity index 90%
rename from frontend/components/Domain/Recipe/RecipeDialogExtrasEditor.vue
rename to frontend/component-stagin/Domain/Recipe/RecipeDialogExtrasEditor.vue
index 2327ab3044b0..5a4eb9d2d07b 100644
--- a/frontend/components/Domain/Recipe/RecipeDialogExtrasEditor.vue
+++ b/frontend/component-stagin/Domain/Recipe/RecipeDialogExtrasEditor.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="text-center">
     <v-dialog v-model="dialog" width="700">
-      <template v-slot:activator="{ on, attrs }">
+      <template #activator="{ on, attrs }">
         <v-btn color="accent" dark v-bind="attrs" v-on="on"> {{ $t("recipe.api-extras") }} </v-btn>
       </template>
 
@@ -9,7 +9,7 @@
         <v-card-title> {{ $t("recipe.api-extras") }} </v-card-title>
 
         <v-card-text :key="formKey">
-          <v-row align="center" v-for="(value, key, index) in extras" :key="index">
+          <v-row v-for="(value, key, index) in extras" :key="index" align="center">
             <v-col cols="12" sm="1">
               <v-btn fab text x-small color="white" elevation="0" @click="removeExtra(key)">
                 <v-icon color="error">{{ $globals.icons.delete }}</v-icon>
@@ -19,7 +19,7 @@
               <v-text-field :label="$t('recipe.object-key')" :value="key" @input="updateKey(index)"> </v-text-field>
             </v-col>
             <v-col cols="12" md="8" sm="6">
-              <v-text-field :label="$t('recipe.object-value')" v-model="extras[key]"> </v-text-field>
+              <v-text-field v-model="extras[key]" :label="$t('recipe.object-value')"> </v-text-field>
             </v-col>
           </v-row>
         </v-card-text>
@@ -29,8 +29,8 @@
         <v-card-actions>
           <v-form ref="addKey">
             <v-text-field
-              :label="$t('recipe.new-key-name')"
               v-model="newKeyName"
+              :label="$t('recipe.new-key-name')"
               class="pr-4"
               :rules="[rules.required, rules.whiteSpace]"
             ></v-text-field>
diff --git a/frontend/components/Domain/Recipe/RecipeImageUploadBtn.vue b/frontend/component-stagin/Domain/Recipe/RecipeImageUploadBtn.vue
similarity index 84%
rename from frontend/components/Domain/Recipe/RecipeImageUploadBtn.vue
rename to frontend/component-stagin/Domain/Recipe/RecipeImageUploadBtn.vue
index cf92ddd3b7ae..2fbb129aff26 100644
--- a/frontend/components/Domain/Recipe/RecipeImageUploadBtn.vue
+++ b/frontend/component-stagin/Domain/Recipe/RecipeImageUploadBtn.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="text-center">
     <v-menu offset-y top nudge-top="6" :close-on-content-click="false">
-      <template v-slot:activator="{ on, attrs }">
+      <template #activator="{ on, attrs }">
         <v-btn color="accent" dark v-bind="attrs" v-on="on">
           <v-icon left>
             {{ $globals.icons.fileImage }}
@@ -19,15 +19,15 @@
             url="none"
             file-name="image"
             :text-btn="false"
-            @uploaded="uploadImage"
             :post="false"
+            @uploaded="uploadImage"
           />
         </v-card-title>
         <v-card-text class="mt-n5">
           <div>
-            <v-text-field :label="$t('general.url')" class="pt-5" clearable v-model="url" :messages="getMessages()">
-              <template v-slot:append-outer>
-                <v-btn class="ml-2" color="primary" @click="getImageFromURL" :loading="loading" :disabled="!slug">
+            <v-text-field v-model="url" :label="$t('general.url')" class="pt-5" clearable :messages="getMessages()">
+              <template #append-outer>
+                <v-btn class="ml-2" color="primary" :loading="loading" :disabled="!slug" @click="getImageFromURL">
                   {{ $t("general.get") }}
                 </v-btn>
               </template>
@@ -40,10 +40,10 @@
 </template>
 
 <script>
-const REFRESH_EVENT = "refresh";
-const UPLOAD_EVENT = "upload";
 import TheUploadBtn from "@/components/UI/Buttons/TheUploadBtn";
 import { api } from "@/api";
+const REFRESH_EVENT = "refresh";
+const UPLOAD_EVENT = "upload";
 export default {
   components: {
     TheUploadBtn,
diff --git a/frontend/components/Domain/Recipe/RecipeIngredients.vue b/frontend/component-stagin/Domain/Recipe/RecipeIngredients.vue
similarity index 89%
rename from frontend/components/Domain/Recipe/RecipeIngredients.vue
rename to frontend/component-stagin/Domain/Recipe/RecipeIngredients.vue
index 31c12772c112..4d8d4b776df5 100644
--- a/frontend/components/Domain/Recipe/RecipeIngredients.vue
+++ b/frontend/component-stagin/Domain/Recipe/RecipeIngredients.vue
@@ -2,23 +2,23 @@
   <div v-if="edit || (value && value.length > 0)">
     <h2 class="mb-4">{{ $t("recipe.ingredients") }}</h2>
     <div v-if="edit">
-      <draggable :value="value" @input="updateIndex" @start="drag = true" @end="drag = false" handle=".handle">
+      <draggable :value="value" handle=".handle" @input="updateIndex" @start="drag = true" @end="drag = false">
         <transition-group type="transition" :name="!drag ? 'flip-list' : null">
           <div v-for="(ingredient, index) in value" :key="generateKey('ingredient', index)">
             <v-row align="center">
               <v-text-field
                 v-if="edit && showTitleEditor[index]"
-                class="mx-3 mt-3"
                 v-model="value[index].title"
+                class="mx-3 mt-3"
                 dense
                 :label="$t('recipe.section-title')"
               >
               </v-text-field>
 
               <v-textarea
+                v-model="value[index].note"
                 class="mr-2"
                 :label="$t('recipe.ingredient')"
-                v-model="value[index].note"
                 auto-grow
                 solo
                 dense
@@ -26,7 +26,7 @@
               >
                 <template slot="append">
                   <v-tooltip right nudge-right="10">
-                    <template v-slot:activator="{ on, attrs }">
+                    <template #activator="{ on, attrs }">
                       <v-btn icon small class="mt-n1" v-bind="attrs" v-on="on" @click="toggleShowTitle(index)">
                         <v-icon>{{ showTitleEditor[index] ? $globals.icons.minus : $globals.icons.createAlt }}</v-icon>
                       </v-btn>
@@ -39,7 +39,7 @@
                 <template slot="append-outer">
                   <v-icon class="handle">{{ $globals.icons.arrowUpDown }}</v-icon>
                 </template>
-                <v-icon class="mr-n1" slot="prepend" color="error" @click="removeByIndex(value, index)">
+                <v-icon slot="prepend" class="mr-n1" color="error" @click="removeByIndex(value, index)">
                   {{ $globals.icons.delete }}
                 </v-icon>
               </v-textarea>
@@ -49,20 +49,20 @@
       </draggable>
 
       <div class="d-flex row justify-end">
-        <BulkAdd @bulk-data="addIngredient" class="mr-2" />
-        <v-btn color="secondary" dark @click="addIngredient" class="mr-4">
+        <BulkAdd class="mr-2" @bulk-data="addIngredient" />
+        <v-btn color="secondary" dark class="mr-4" @click="addIngredient">
           <v-icon>{{ $globals.icons.create }}</v-icon>
         </v-btn>
       </div>
     </div>
     <div v-else>
       <div v-for="(ingredient, index) in value" :key="generateKey('ingredient', index)">
-        <h3 class="mt-2" v-if="showTitleEditor[index]">{{ ingredient.title }}</h3>
+        <h3 v-if="showTitleEditor[index]" class="mt-2">{{ ingredient.title }}</h3>
         <v-divider v-if="showTitleEditor[index]"></v-divider>
         <v-list-item dense @click="toggleChecked(index)">
           <v-checkbox hide-details :value="checked[index]" class="pt-0 my-auto py-auto" color="secondary"> </v-checkbox>
           <v-list-item-content>
-            <vue-markdown class="ma-0 pa-0 text-subtitle-1 dense-markdown" :source="ingredient.note"> </vue-markdown>
+            <VueMarkdown class="ma-0 pa-0 text-subtitle-1 dense-markdown" :source="ingredient.note"> </VueMarkdown>
           </v-list-item-content>
         </v-list-item>
       </div>
@@ -98,10 +98,6 @@ export default {
       showTitleEditor: [],
     };
   },
-  mounted() {
-    this.checked = this.value.map(() => false);
-    this.showTitleEditor = this.value.map(x => this.validateTitle(x.title));
-  },
   watch: {
     value: {
       handler() {
@@ -109,6 +105,10 @@ export default {
       },
     },
   },
+  mounted() {
+    this.checked = this.value.map(() => false);
+    this.showTitleEditor = this.value.map(x => this.validateTitle(x.title));
+  },
   methods: {
     addIngredient(ingredients = null) {
       if (ingredients.length) {
diff --git a/frontend/components/Domain/Recipe/RecipeInstructions.vue b/frontend/component-stagin/Domain/Recipe/RecipeInstructions.vue
similarity index 94%
rename from frontend/components/Domain/Recipe/RecipeInstructions.vue
rename to frontend/component-stagin/Domain/Recipe/RecipeInstructions.vue
index 18b0258a0bf3..09b4eefbfb8d 100644
--- a/frontend/components/Domain/Recipe/RecipeInstructions.vue
+++ b/frontend/component-stagin/Domain/Recipe/RecipeInstructions.vue
@@ -5,20 +5,20 @@
       <draggable
         :disabled="!edit"
         :value="value"
+        handle=".handle"
         @input="updateIndex"
         @start="drag = true"
         @end="drag = false"
-        handle=".handle"
       >
         <div v-for="(step, index) in value" :key="index">
           <v-app-bar v-if="showTitleEditor[index]" class="primary mx-1 mt-6" dark dense rounded>
-            <v-toolbar-title class="headline" v-if="!edit">
+            <v-toolbar-title v-if="!edit" class="headline">
               <v-app-bar-title v-text="step.title"> </v-app-bar-title>
             </v-toolbar-title>
             <v-text-field
               v-if="edit"
-              class="headline pa-0 mt-5"
               v-model="step.title"
+              class="headline pa-0 mt-5"
               dense
               solo
               flat
@@ -62,18 +62,18 @@
               </v-card-title>
               <v-card-text v-if="edit">
                 <v-textarea
+                  :key="generateKey('instructions', index)"
+                  v-model="value[index]['text']"
                   auto-grow
                   dense
-                  v-model="value[index]['text']"
-                  :key="generateKey('instructions', index)"
                   rows="4"
                 >
                 </v-textarea>
               </v-card-text>
               <v-expand-transition>
-                <div class="m-0 p-0" v-show="!isChecked(index) && !edit">
+                <div v-show="!isChecked(index) && !edit" class="m-0 p-0">
                   <v-card-text>
-                    <vue-markdown :source="step.text"> </vue-markdown>
+                    <VueMarkdown :source="step.text"> </VueMarkdown>
                   </v-card-text>
                 </div>
               </v-expand-transition>
@@ -111,10 +111,6 @@ export default {
     };
   },
 
-  mounted() {
-    this.showTitleEditor = this.value.map(x => this.validateTitle(x.title));
-  },
-
   watch: {
     value: {
       handler() {
@@ -124,6 +120,10 @@ export default {
     },
   },
 
+  mounted() {
+    this.showTitleEditor = this.value.map(x => this.validateTitle(x.title));
+  },
+
   methods: {
     generateKey(item, index) {
       return utils.generateUniqueKey(item, index);
@@ -137,7 +137,7 @@ export default {
     toggleDisabled(stepIndex) {
       if (this.edit) return;
       if (this.disabledSteps.includes(stepIndex)) {
-        let index = this.disabledSteps.indexOf(stepIndex);
+        const index = this.disabledSteps.indexOf(stepIndex);
         if (index !== -1) {
           this.disabledSteps.splice(index, 1);
         }
@@ -149,7 +149,7 @@ export default {
       if (this.disabledSteps.includes(stepIndex) && !this.edit) {
         return "disabled-card";
       } else {
-        return;
+        
       }
     },
     toggleShowTitle(index) {
diff --git a/frontend/components/Domain/Recipe/RecipeNotes.vue b/frontend/component-stagin/Domain/Recipe/RecipeNotes.vue
similarity index 76%
rename from frontend/components/Domain/Recipe/RecipeNotes.vue
rename to frontend/component-stagin/Domain/Recipe/RecipeNotes.vue
index d5cf1f47825c..b9df319a3f34 100644
--- a/frontend/components/Domain/Recipe/RecipeNotes.vue
+++ b/frontend/component-stagin/Domain/Recipe/RecipeNotes.vue
@@ -1,17 +1,17 @@
 <template>
   <div v-if="value.length > 0 || edit">
     <h2 class="my-4">{{ $t("recipe.note") }}</h2>
-    <v-card class="mt-1" v-for="(note, index) in value" :key="generateKey('note', index)">
+    <v-card v-for="(note, index) in value" :key="generateKey('note', index)" class="mt-1">
       <div v-if="edit">
         <v-card-text>
           <v-row align="center">
             <v-btn fab x-small color="white" class="mr-2" elevation="0" @click="removeByIndex(value, index)">
               <v-icon color="error">{{ $globals.icons.delete }}</v-icon>
             </v-btn>
-            <v-text-field :label="$t('recipe.title')" v-model="value[index]['title']"></v-text-field>
+            <v-text-field v-model="value[index]['title']" :label="$t('recipe.title')"></v-text-field>
           </v-row>
 
-          <v-textarea auto-grow :placeholder="$t('recipe.note')" v-model="value[index]['text']"> </v-textarea>
+          <v-textarea v-model="value[index]['text']" auto-grow :placeholder="$t('recipe.note')"> </v-textarea>
         </v-card-text>
       </div>
       <div v-else>
@@ -20,12 +20,12 @@
         </v-card-title>
         <v-divider class="mx-2"></v-divider>
         <v-card-text>
-          <vue-markdown :source="note.text"> </vue-markdown>
+          <VueMarkdown :source="note.text"> </VueMarkdown>
         </v-card-text>
       </div>
     </v-card>
 
-    <div class="d-flex justify-end" v-if="edit">
+    <div v-if="edit" class="d-flex justify-end">
       <v-btn class="mt-1" color="secondary" dark @click="addNote">
         <v-icon>{{ $globals.icons.create }}</v-icon>
       </v-btn>
diff --git a/frontend/components/Domain/Recipe/RecipeNutrition.vue b/frontend/component-stagin/Domain/Recipe/RecipeNutrition.vue
similarity index 97%
rename from frontend/components/Domain/Recipe/RecipeNutrition.vue
rename to frontend/component-stagin/Domain/Recipe/RecipeNutrition.vue
index 950bb0baafc8..60a2d52faa2b 100644
--- a/frontend/components/Domain/Recipe/RecipeNutrition.vue
+++ b/frontend/component-stagin/Domain/Recipe/RecipeNutrition.vue
@@ -18,7 +18,7 @@
           ></v-text-field>
         </div>
       </v-card-text>
-      <v-list dense v-if="showViewer" class="mt-0 pt-0">
+      <v-list v-if="showViewer" dense class="mt-0 pt-0">
         <v-list-item v-for="(item, key, index) in labels" :key="index">
           <v-list-item-content>
             <v-list-item-title class="pl-4 text-subtitle-1 flex row ">
diff --git a/frontend/components/Domain/Recipe/RecipePrintView.vue b/frontend/component-stagin/Domain/Recipe/RecipePrintView.vue
similarity index 90%
rename from frontend/components/Domain/Recipe/RecipePrintView.vue
rename to frontend/component-stagin/Domain/Recipe/RecipePrintView.vue
index bc092e29d1d8..1891a9cc4884 100644
--- a/frontend/components/Domain/Recipe/RecipePrintView.vue
+++ b/frontend/component-stagin/Domain/Recipe/RecipePrintView.vue
@@ -12,7 +12,7 @@
       </h1>
     </div>
     <div class="time-container">
-      <RecipeTimeCard :prepTime="recipe.prepTime" :totalTime="recipe.totalTime" :performTime="recipe.performTime" />
+      <RecipeTimeCard :prep-time="recipe.prepTime" :total-time="recipe.totalTime" :perform-time="recipe.performTime" />
     </div>
     <v-btn
       v-if="recipe.recipeYield"
@@ -28,7 +28,7 @@
       {{ recipe.recipeYield }}
     </v-btn>
     <div>
-      <vue-markdown :source="recipe.description"> </vue-markdown>
+      <VueMarkdown :source="recipe.description"> </VueMarkdown>
       <h2>{{ $t("recipe.ingredients") }}</h2>
       <ul>
         <li v-for="(ingredient, index) in recipe.recipeIngredient" :key="index">
@@ -45,7 +45,7 @@
         <h2 v-if="step.title">{{ step.title }}</h2>
         <div class="ml-5">
           <h3>{{ $t("recipe.step-index", { step: index + 1 }) }}</h3>
-          <vue-markdown :source="step.text"> </vue-markdown>
+          <VueMarkdown :source="step.text"> </VueMarkdown>
         </div>
       </div>
 
@@ -54,7 +54,7 @@
 
       <div v-for="(note, index) in recipe.notes" :key="index + 'note'">
         <h3>{{ note.title }}</h3>
-        <vue-markdown :source="note.text"> </vue-markdown>
+        <VueMarkdown :source="note.text"> </VueMarkdown>
       </div>
     </div>
   </div>
diff --git a/frontend/components/Domain/Recipe/RecipeSettingsMenu.vue b/frontend/component-stagin/Domain/Recipe/RecipeSettingsMenu.vue
similarity index 96%
rename from frontend/components/Domain/Recipe/RecipeSettingsMenu.vue
rename to frontend/component-stagin/Domain/Recipe/RecipeSettingsMenu.vue
index 45cc4a163d87..97de8987a7fe 100644
--- a/frontend/components/Domain/Recipe/RecipeSettingsMenu.vue
+++ b/frontend/component-stagin/Domain/Recipe/RecipeSettingsMenu.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="text-center">
     <v-menu offset-y top nudge-top="6" :close-on-content-click="false">
-      <template v-slot:activator="{ on, attrs }">
+      <template #activator="{ on, attrs }">
         <v-btn color="accent" dark v-bind="attrs" v-on="on">
           <v-icon left>
             {{ $globals.icons.cog }}
@@ -18,10 +18,10 @@
         <v-divider class="mx-2"></v-divider>
         <v-card-text class="mt-n5">
           <v-switch
-            dense
             v-for="(itemValue, key) in value"
             :key="key"
             v-model="value[key]"
+            dense
             flat
             inset
             :label="labels[key]"
diff --git a/frontend/components/Domain/Recipe/RecipeTimeCard.vue b/frontend/component-stagin/Domain/Recipe/RecipeTimeCard.vue
similarity index 91%
rename from frontend/components/Domain/Recipe/RecipeTimeCard.vue
rename to frontend/component-stagin/Domain/Recipe/RecipeTimeCard.vue
index a4d8dab0f607..4fcd8c9a8630 100644
--- a/frontend/components/Domain/Recipe/RecipeTimeCard.vue
+++ b/frontend/component-stagin/Domain/Recipe/RecipeTimeCard.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <v-chip label color="accent custom-transparent" class="ma-1" v-for="(time, index) in allTimes" :key="index">
+    <v-chip v-for="(time, index) in allTimes" :key="index" label color="accent custom-transparent" class="ma-1">
       <v-icon left>
         {{ $globals.icons.clockOutline }}
       </v-icon>
diff --git a/frontend/components/Domain/User/UserAvatar.vue b/frontend/component-stagin/Domain/User/UserAvatar.vue
similarity index 96%
rename from frontend/components/Domain/User/UserAvatar.vue
rename to frontend/component-stagin/Domain/User/UserAvatar.vue
index cf7524a6a0b1..a2f119084b25 100644
--- a/frontend/components/Domain/User/UserAvatar.vue
+++ b/frontend/component-stagin/Domain/User/UserAvatar.vue
@@ -1,7 +1,7 @@
 <template>
   <v-list-item two-line to="/admin/profile">
     <v-list-item-avatar color="accent" class="white--text">
-      <v-img :src="profileImage" v-if="!noImage" />
+      <v-img v-if="!noImage" :src="profileImage" />
       <div v-else>
         {{ initials }}
       </div>
diff --git a/frontend/components/Page/Recipe/RecipeEditor.vue b/frontend/component-stagin/Page/Recipe/RecipeEditor.vue
similarity index 77%
rename from frontend/components/Page/Recipe/RecipeEditor.vue
rename to frontend/component-stagin/Page/Recipe/RecipeEditor.vue
index 4d5b80597e8d..65ab9152a3ef 100644
--- a/frontend/components/Page/Recipe/RecipeEditor.vue
+++ b/frontend/component-stagin/Page/Recipe/RecipeEditor.vue
@@ -2,31 +2,31 @@
   <v-form ref="form">
     <v-card-text>
       <v-row dense>
-        <ImageUploadBtn class="my-1" @upload="uploadImage" :slug="value.slug" @refresh="$emit('upload')" />
-        <SettingsMenu class="my-1 mx-1" @upload="uploadImage" :value="value.settings" />
+        <ImageUploadBtn class="my-1" :slug="value.slug" @upload="uploadImage" @refresh="$emit('upload')" />
+        <SettingsMenu class="my-1 mx-1" :value="value.settings" @upload="uploadImage" />
       </v-row>
       <v-row dense>
         <v-col>
-          <v-text-field :label="$t('recipe.total-time')" v-model="value.totalTime"></v-text-field>
+          <v-text-field v-model="value.totalTime" :label="$t('recipe.total-time')"></v-text-field>
         </v-col>
-        <v-col><v-text-field :label="$t('recipe.prep-time')" v-model="value.prepTime"></v-text-field></v-col>
-        <v-col><v-text-field :label="$t('recipe.perform-time')" v-model="value.performTime"></v-text-field></v-col>
+        <v-col><v-text-field v-model="value.prepTime" :label="$t('recipe.prep-time')"></v-text-field></v-col>
+        <v-col><v-text-field v-model="value.performTime" :label="$t('recipe.perform-time')"></v-text-field></v-col>
       </v-row>
-      <v-text-field class="my-3" :label="$t('recipe.recipe-name')" v-model="value.name" :rules="[existsRule]">
+      <v-text-field v-model="value.name" class="my-3" :label="$t('recipe.recipe-name')" :rules="[existsRule]">
       </v-text-field>
-      <v-textarea auto-grow min-height="100" :label="$t('recipe.description')" v-model="value.description">
+      <v-textarea v-model="value.description" auto-grow min-height="100" :label="$t('recipe.description')">
       </v-textarea>
       <div class="my-2"></div>
       <v-row dense disabled>
         <v-col sm="4">
-          <v-text-field :label="$t('recipe.servings')" v-model="value.recipeYield" class="rounded-sm"> </v-text-field>
+          <v-text-field v-model="value.recipeYield" :label="$t('recipe.servings')" class="rounded-sm"> </v-text-field>
         </v-col>
         <v-spacer></v-spacer>
         <Rating v-model="value.rating" :emit-only="true" />
       </v-row>
       <v-row>
         <v-col cols="12" sm="12" md="4" lg="4">
-          <Ingredients :edit="true" v-model="value.recipeIngredient" />
+          <Ingredients v-model="value.recipeIngredient" :edit="true" />
           <v-card class="mt-6">
             <v-card-title class="py-2">
               {{ $t("recipe.categories") }}
@@ -34,8 +34,8 @@
             <v-divider class="mx-2"></v-divider>
             <v-card-text>
               <CategoryTagSelector
-                :return-object="false"
                 v-model="value.recipeCategory"
+                :return-object="false"
                 :show-add="true"
                 :show-label="false"
               />
@@ -49,8 +49,8 @@
             <v-divider class="mx-2"></v-divider>
             <v-card-text>
               <CategoryTagSelector
-                :return-object="false"
                 v-model="value.tags"
+                :return-object="false"
                 :show-add="true"
                 :tag-selector="true"
                 :show-label="false"
@@ -67,12 +67,12 @@
         <v-col cols="12" sm="12" md="8" lg="8">
           <Instructions v-model="value.recipeInstructions" :edit="true" />
           <div class="d-flex row justify-end mt-2">
-            <BulkAdd @bulk-data="appendSteps" class="mr-2" />
-            <v-btn color="secondary" dark @click="addStep" class="mr-4">
+            <BulkAdd class="mr-2" @bulk-data="appendSteps" />
+            <v-btn color="secondary" dark class="mr-4" @click="addStep">
               <v-icon>{{ $globals.icons.create }}</v-icon>
             </v-btn>
           </div>
-          <Notes :edit="true" v-model="value.notes" />
+          <Notes v-model="value.notes" :edit="true" />
 
           <v-text-field v-model="value.orgURL" class="mt-10" :label="$t('recipe.original-url')"></v-text-field>
         </v-col>
@@ -82,7 +82,6 @@
 </template>
 
 <script>
-const UPLOAD_EVENT = "upload";
 import BulkAdd from "@/components/Recipe/Parts/Helpers/BulkAdd";
 import ExtrasEditor from "@/components/Recipe/Parts/Helpers/ExtrasEditor";
 import CategoryTagSelector from "@/components/FormHelpers/CategoryTagSelector";
@@ -95,6 +94,7 @@ import Assets from "@/components/Recipe/Parts/Assets.vue";
 import Notes from "@/components/Recipe/Parts/Notes.vue";
 import SettingsMenu from "@/components/Recipe/Parts/Helpers/SettingsMenu.vue";
 import Rating from "@/components/Recipe/Parts/Rating";
+const UPLOAD_EVENT = "upload";
 export default {
   components: {
     BulkAdd,
@@ -109,10 +109,10 @@ export default {
     SettingsMenu,
     Rating,
   },
+  mixins: [validators],
   props: {
     value: Object,
   },
-  mixins: [validators],
   data() {
     return {
       fileObject: null,
diff --git a/frontend/components/Page/Recipe/RecipeViewer.vue b/frontend/component-stagin/Page/Recipe/RecipeViewer.vue
similarity index 89%
rename from frontend/components/Page/Recipe/RecipeViewer.vue
rename to frontend/component-stagin/Page/Recipe/RecipeViewer.vue
index 99d42df541cd..c06b9a0cca14 100644
--- a/frontend/components/Page/Recipe/RecipeViewer.vue
+++ b/frontend/component-stagin/Page/Recipe/RecipeViewer.vue
@@ -4,7 +4,7 @@
       {{ recipe.name }}
     </v-card-title>
     <v-card-text>
-      <vue-markdown :source="recipe.description"> </vue-markdown>
+      <VueMarkdown :source="recipe.description"> </VueMarkdown>
       <v-row dense disabled>
         <v-col>
           <v-btn
@@ -21,13 +21,13 @@
             {{ recipe.recipeYield }}
           </v-btn>
         </v-col>
-        <Rating :value="recipe.rating" :name="recipe.name" :slug="recipe.slug" :key="recipe.slug" />
+        <Rating :key="recipe.slug" :value="recipe.rating" :name="recipe.name" :slug="recipe.slug" />
       </v-row>
       <v-row>
         <v-col cols="12" sm="12" md="4" lg="4">
           <Ingredients :value="recipe.recipeIngredient" :edit="false" />
           <div v-if="medium">
-            <v-card class="mt-2" v-if="recipe.recipeCategory.length > 0">
+            <v-card v-if="recipe.recipeCategory.length > 0" class="mt-2">
               <v-card-title class="py-2">
                 {{ $t("recipe.categories") }}
               </v-card-title>
@@ -36,13 +36,13 @@
                 <RecipeChips :items="recipe.recipeCategory" />
               </v-card-text>
             </v-card>
-            <v-card class="mt-2" v-if="recipe.tags.length > 0">
+            <v-card v-if="recipe.tags.length > 0" class="mt-2">
               <v-card-title class="py-2">
                 {{ $t("tag.tags") }}
               </v-card-title>
               <v-divider class="mx-2"></v-divider>
               <v-card-text>
-                <RecipeChips :items="recipe.tags" :isCategory="false" />
+                <RecipeChips :items="recipe.tags" :is-category="false" />
               </v-card-text>
             </v-card>
 
@@ -89,12 +89,14 @@
 import Nutrition from "@/components/Recipe/Parts/Nutrition";
 import VueMarkdown from "@adapttive/vue-markdown";
 import { utils } from "@/utils";
-import RecipeChips from "./RecipeChips";
 import Rating from "@/components/Recipe/Parts/Rating";
 import Notes from "@/components/Recipe/Parts/Notes";
 import Ingredients from "@/components/Recipe/Parts/Ingredients";
 import Instructions from "@/components/Recipe/Parts/Instructions.vue";
 import Assets from "../../../../frontend.old/src/components/Recipe/Parts/Assets.vue";
+import RecipeChips from "./RecipeChips";
+
+
 export default {
   components: {
     VueMarkdown,
@@ -107,7 +109,10 @@ export default {
     Rating,
   },
   props: {
-    recipe: Object,
+    recipe: {
+      type: Object,
+      required: true,
+    },
   },
   data() {
     return {
diff --git a/frontend/components/Domain/Recipe/RecipeCard.vue b/frontend/components/Domain/Recipe/RecipeCard.vue
index 1295d461879f..7fcca224cabd 100644
--- a/frontend/components/Domain/Recipe/RecipeCard.vue
+++ b/frontend/components/Domain/Recipe/RecipeCard.vue
@@ -4,56 +4,72 @@
       :class="{ 'on-hover': hover }"
       :elevation="hover ? 12 : 2"
       :to="route ? `/recipe/${slug}` : ''"
-      @click="$emit('click')"
       min-height="275"
+      @click="$emit('click')"
     >
-      <CardImage icon-size="200" :slug="slug" small :image-version="image">
+      <RecipeCardImage icon-size="200" :slug="slug" small :image-version="image">
         <v-expand-transition v-if="description">
-          <div v-if="hover" class="d-flex transition-fast-in-fast-out secondary v-card--reveal  " style="height: 100%;">
+          <div v-if="hover" class="d-flex transition-fast-in-fast-out secondary v-card--reveal" style="height: 100%">
             <v-card-text class="v-card--text-show white--text">
               {{ description | truncate(300) }}
             </v-card-text>
           </div>
         </v-expand-transition>
-      </CardImage>
-      <v-card-title class="my-n3 mb-n6 ">
+      </RecipeCardImage>
+      <v-card-title class="my-n3 mb-n6">
         <div class="headerClass">
           {{ name }}
         </div>
       </v-card-title>
 
       <v-card-actions>
-        <FavoriteBadge v-if="loggedIn" :slug="slug" show-always />
-        <Rating :value="rating" :name="name" :slug="slug" :small="true" />
+        <RecipeFavoriteBadge v-if="loggedIn" :slug="slug" show-always />
+        <RecipeRating :value="rating" :name="name" :slug="slug" :small="true" />
         <v-spacer></v-spacer>
-        <RecipeChips :truncate="true" :items="tags" :title="false" :limit="2" :small="true" :isCategory="false" />
-        <ContextMenu :slug="slug" :name="name" />
+        <RecipeChips :truncate="true" :items="tags" :title="false" :limit="2" :small="true" :is-category="false" />
+        <RecipeContextMenu :slug="slug" :name="name" />
       </v-card-actions>
     </v-card>
   </v-hover>
 </template>
 
 <script>
-import FavoriteBadge from "@/components/Recipe/FavoriteBadge";
-import RecipeChips from "@/components/Recipe/RecipeViewer/RecipeChips";
-import ContextMenu from "@/components/Recipe/ContextMenu";
-import CardImage from "@/components/Recipe/CardImage";
-import Rating from "@/components/Recipe/Parts/Rating";
 import { api } from "@/api";
+import RecipeFavoriteBadge from "./RecipeFavoriteBadge";
+import RecipeChips from "./RecipeChips";
+import RecipeContextMenu from "./RecipeContextMenu";
+import RecipeCardImage from "./RecipeCardImage";
+import RecipeRating from "./RecipeRating";
 export default {
-  components: { FavoriteBadge, RecipeChips, ContextMenu, Rating, CardImage },
+  components: { RecipeFavoriteBadge, RecipeChips, RecipeContextMenu, RecipeRating, RecipeCardImage },
   props: {
-    name: String,
-    slug: String,
-    description: String,
-    rating: Number,
-    image: String,
-
+    name: {
+      type: String,
+      required: true,
+    },
+    slug: {
+      type: String,
+      required: true,
+    },
+    description: {
+      type: String,
+      default: null,
+    },
+    rating: {
+      type: Number,
+      default: 0,
+    },
+    image: {
+      type: String,
+      default: null,
+    },
     route: {
+      type: Boolean,
       default: true,
     },
     tags: {
-      default: true,
+      type: Array,
+      default: () => [],
     },
   },
   data() {
diff --git a/frontend/components/Domain/Recipe/RecipeCardImage.vue b/frontend/components/Domain/Recipe/RecipeCardImage.vue
index 7da1ac42e247..81763290cee6 100644
--- a/frontend/components/Domain/Recipe/RecipeCardImage.vue
+++ b/frontend/components/Domain/Recipe/RecipeCardImage.vue
@@ -1,24 +1,24 @@
 <template>
   <v-img
-    @click="$emit('click')"
-    :height="height"
     v-if="!fallBackImage"
+    :height="height"
     :src="getImage(slug)"
+    @click="$emit('click')"
     @load="fallBackImage = false"
     @error="fallBackImage = true"
   >
     <slot> </slot>
   </v-img>
-  <div class="icon-slot" v-else @click="$emit('click')">
+  <div v-else class="icon-slot" @click="$emit('click')">
     <v-icon color="primary" class="icon-position" :size="iconSize">
       {{ $globals.icons.primary }}
     </v-icon>
-      <slot> </slot>
+    <slot> </slot>
   </div>
 </template>
 
 <script>
-import { api } from "@/api";
+import { useApi } from "~/composables/use-api";
 export default {
   props: {
     tiny: {
@@ -34,18 +34,32 @@ export default {
       default: null,
     },
     iconSize: {
+      type: [Number, String],
       default: 100,
     },
     slug: {
+      type: String,
       default: null,
     },
     imageVersion: {
+      type: String,
       default: null,
     },
     height: {
+      type: Number,
       default: 200,
     },
   },
+  setup() {
+    const api = useApi();
+
+    return { api };
+  },
+  data() {
+    return {
+      fallBackImage: false,
+    };
+  },
   computed: {
     imageSize() {
       if (this.tiny) return "tiny";
@@ -59,20 +73,15 @@ export default {
       this.fallBackImage = false;
     },
   },
-  data() {
-    return {
-      fallBackImage: false,
-    };
-  },
   methods: {
     getImage(slug) {
       switch (this.imageSize) {
         case "tiny":
-          return api.recipes.recipeTinyImage(slug, this.imageVersion);
+          return this.api.recipes.recipeTinyImage(slug, this.imageVersion);
         case "small":
-          return api.recipes.recipeSmallImage(slug, this.imageVersion);
+          return this.api.recipes.recipeSmallImage(slug, this.imageVersion);
         case "large":
-          return api.recipes.recipeImage(slug, this.imageVersion);
+          return this.api.recipes.recipeImage(slug, this.imageVersion);
       }
     },
   },
diff --git a/frontend/components/Domain/Recipe/RecipeCardMobile.vue b/frontend/components/Domain/Recipe/RecipeCardMobile.vue
index 58c95fe6dd28..92d5aaef2ef7 100644
--- a/frontend/components/Domain/Recipe/RecipeCardMobile.vue
+++ b/frontend/components/Domain/Recipe/RecipeCardMobile.vue
@@ -4,7 +4,7 @@
       :ripple="false"
       class="mx-auto"
       hover
-      :to="this.$listeners.selected ? undefined : `/recipe/${slug}`"
+      :to="$listeners.selected ? undefined : `/recipe/${slug}`"
       @click="$emit('selected')"
     >
       <v-list-item three-line>
@@ -20,10 +20,10 @@
           </v-icon>
         </v-list-item-avatar>
         <v-list-item-content>
-          <v-list-item-title class=" mb-1">{{ name }} </v-list-item-title>
+          <v-list-item-title class="mb-1">{{ name }} </v-list-item-title>
           <v-list-item-subtitle> {{ description }} </v-list-item-subtitle>
           <div class="d-flex justify-center align-center">
-            <FavoriteBadge v-if="loggedIn" :slug="slug" show-always />
+            <RecipeFavoriteBadge v-if="loggedIn" :slug="slug" show-always />
             <v-rating
               color="secondary"
               class="ml-auto"
@@ -34,7 +34,7 @@
               :value="rating"
             ></v-rating>
             <v-spacer></v-spacer>
-            <ContextMenu :slug="slug" :menu-icon="$globals.icons.dotsHorizontal" :name="name" />
+            <RecipeContextMenu :slug="slug" :menu-icon="$globals.icons.dotsHorizontal" :name="name" />
           </div>
         </v-list-item-content>
       </v-list-item>
@@ -43,24 +43,41 @@
 </template>
 
 <script>
-import FavoriteBadge from "@/components/Recipe/FavoriteBadge";
-import ContextMenu from "@/components/Recipe/ContextMenu";
 import { api } from "@/api";
+import RecipeFavoriteBadge from "./RecipeFavoriteBadge";
+import RecipeContextMenu from "./RecipeContextMenu";
 export default {
   components: {
-    FavoriteBadge,
-    ContextMenu,
+    RecipeFavoriteBadge,
+    RecipeContextMenu,
   },
   props: {
-    name: String,
-    slug: String,
-    description: String,
-    rating: Number,
-    image: String,
+    name: {
+      type: String,
+      required: true,
+    },
+    slug: {
+      type: String,
+      required: true,
+    },
+    description: {
+      type: String,
+      required: true,
+    },
+    rating: {
+      type: Number,
+      required: true,
+    },
+    image: {
+      type: String,
+      required: true,
+    },
     route: {
+      type: Boolean,
       default: true,
     },
     tags: {
+      type: Boolean,
       default: true,
     },
   },
@@ -69,16 +86,16 @@ export default {
       fallBackImage: false,
     };
   },
-  methods: {
-    getImage(slug) {
-      return api.recipes.recipeSmallImage(slug, this.image);
-    },
-  },
   computed: {
     loggedIn() {
       return this.$store.getters.getIsLoggedIn;
     },
   },
+  methods: {
+    getImage(slug) {
+      return api.recipes.recipeSmallImage(slug, this.image);
+    },
+  },
 };
 </script>
 
diff --git a/frontend.old/src/components/UI/CardSection.vue b/frontend/components/Domain/Recipe/RecipeCardSection.vue
similarity index 84%
rename from frontend.old/src/components/UI/CardSection.vue
rename to frontend/components/Domain/Recipe/RecipeCardSection.vue
index 35835b31c8e6..7f84c84a8cc7 100644
--- a/frontend.old/src/components/UI/CardSection.vue
+++ b/frontend/components/Domain/Recipe/RecipeCardSection.vue
@@ -1,7 +1,7 @@
 <template>
   <div v-if="recipes">
-    <v-app-bar color="transparent" flat class="mt-n1 flex-sm-wrap  rounded " v-if="!disableToolbar">
-      <v-icon large left v-if="title">
+    <v-app-bar v-if="!disableToolbar" color="transparent" flat class="mt-n1 flex-sm-wrap rounded">
+      <v-icon v-if="title" large left>
         {{ displayTitleIcon }}
       </v-icon>
       <v-toolbar-title class="headline"> {{ title }} </v-toolbar-title>
@@ -12,9 +12,9 @@
         </v-icon>
         {{ $vuetify.breakpoint.xsOnly ? null : $t("general.random") }}
       </v-btn>
-      <v-menu offset-y left v-if="$listeners.sort">
-        <template v-slot:activator="{ on, attrs }">
-          <v-btn text :icon="$vuetify.breakpoint.xsOnly" v-bind="attrs" v-on="on" :loading="sortLoading">
+      <v-menu v-if="$listeners.sort" offset-y left>
+        <template #activator="{ on, attrs }">
+          <v-btn text :icon="$vuetify.breakpoint.xsOnly" v-bind="attrs" :loading="sortLoading" v-on="on">
             <v-icon :left="!$vuetify.breakpoint.xsOnly">
               {{ $globals.icons.sort }}
             </v-icon>
@@ -57,7 +57,7 @@
     </v-app-bar>
     <div v-if="recipes" class="mt-2">
       <v-row v-if="!viewScale">
-        <v-col :sm="6" :md="6" :lg="4" :xl="3" v-for="recipe in recipes.slice(0, cardLimit)" :key="recipe.name">
+        <v-col v-for="recipe in recipes.slice(0, cardLimit)" :key="recipe.name" :sm="6" :md="6" :lg="4" :xl="3">
           <v-lazy>
             <RecipeCard
               :name="recipe.name"
@@ -72,16 +72,16 @@
       </v-row>
       <v-row v-else dense>
         <v-col
+          v-for="recipe in recipes.slice(0, cardLimit)"
+          :key="recipe.name"
           cols="12"
           :sm="singleColumn ? '12' : '12'"
           :md="singleColumn ? '12' : '6'"
           :lg="singleColumn ? '12' : '4'"
           :xl="singleColumn ? '12' : '3'"
-          v-for="recipe in recipes.slice(0, cardLimit)"
-          :key="recipe.name"
         >
           <v-lazy>
-            <MobileRecipeCard
+            <RecipeCardMobile
               :name="recipe.name"
               :description="recipe.description"
               :slug="recipe.slug"
@@ -93,47 +93,54 @@
         </v-col>
       </v-row>
     </div>
-    <div v-intersect="bumpList" class="d-flex">
-      <v-expand-x-transition>
-        <SiteLoader v-if="loading" :loading="loading" />
-      </v-expand-x-transition>
+    <div v-intersect="bumpList" class="d-flex mt-5">
+      <v-fade-transition>
+        <AppLoader v-if="loading" :loading="loading" />
+      </v-fade-transition>
     </div>
   </div>
 </template>
 
 <script>
-import SiteLoader from "@/components/UI/SiteLoader";
-import RecipeCard from "../Recipe/RecipeCard";
-import MobileRecipeCard from "@/components/Recipe/MobileRecipeCard";
 import { utils } from "@/utils";
+import RecipeCard from "./RecipeCard";
+import RecipeCardMobile from "./RecipeCardMobile";
 const SORT_EVENT = "sort";
 
 export default {
   components: {
     RecipeCard,
-    MobileRecipeCard,
-    SiteLoader,
+    RecipeCardMobile,
   },
   props: {
     disableToolbar: {
+      type: Boolean,
       default: false,
     },
     titleIcon: {
+      type: String,
       default: null,
     },
     title: {
+      type: String,
       default: null,
     },
     hardLimit: {
+      type: Number,
       default: 99999,
     },
     mobileCards: {
+      type: Boolean,
       default: false,
     },
     singleColumn: {
+      type: Boolean,
       defualt: false,
     },
-    recipes: Array,
+    recipes: {
+      type: Array,
+      required: true,
+    },
   },
   data() {
     return {
@@ -149,11 +156,6 @@ export default {
       },
     };
   },
-  watch: {
-    recipes() {
-      this.bumpList();
-    },
-  },
   computed: {
     viewScale() {
       if (this.mobileCards) return true;
@@ -173,6 +175,11 @@ export default {
       return this.titleIcon || this.$globals.icons.tags;
     },
   },
+  watch: {
+    recipes() {
+      this.bumpList();
+    },
+  },
   methods: {
     bumpList() {
       const newCardLimit = Math.min(this.cardLimit + 20, this.effectiveHardLimit);
@@ -185,7 +192,8 @@ export default {
     },
     async setLoader() {
       this.loading = true;
-      await new Promise(r => setTimeout(r, 1000));
+      // eslint-disable-next-line promise/param-names
+      await new Promise((r) => setTimeout(r, 1000));
       this.loading = false;
     },
     navigateRandom() {
@@ -194,7 +202,7 @@ export default {
     },
     sortRecipes(sortType) {
       this.sortLoading = true;
-      let sortTarget = [...this.recipes];
+      const sortTarget = [...this.recipes];
       switch (sortType) {
         case this.EVENTS.az:
           utils.recipe.sortAToZ(sortTarget);
diff --git a/frontend/components/Domain/Recipe/RecipeChips.vue b/frontend/components/Domain/Recipe/RecipeChips.vue
index 28bb4f8e28d8..a553a64413ae 100644
--- a/frontend/components/Domain/Recipe/RecipeChips.vue
+++ b/frontend/components/Domain/Recipe/RecipeChips.vue
@@ -2,14 +2,14 @@
   <div v-if="items.length > 0">
     <h2 v-if="title" class="mt-4">{{ title }}</h2>
     <v-chip
+      v-for="category in items.slice(0, limit)"
+      :key="category"
       label
       class="ma-1"
       color="accent"
       :small="small"
       dark
-      v-for="category in items.slice(0, limit)"
       :to="`/recipes/${urlParam}/${getSlug(category)}`"
-      :key="category"
     >
       {{ truncateText(category) }}
     </v-chip>
@@ -20,24 +20,33 @@
 export default {
   props: {
     truncate: {
+      type: Boolean,
       default: false,
     },
     items: {
-      default: [],
+      type: Array,
+      default: () => [],
     },
     title: {
-      default: null,
+      type: Boolean,
+      default: false,
     },
     isCategory: {
+      type: Boolean,
       default: true,
     },
     limit: {
+      type: Number,
       default: 999,
     },
     small: {
+      type: Boolean,
       default: false,
     },
-    maxWidth: {},
+    maxWidth: {
+      type: String,
+      default: null,
+    },
   },
   computed: {
     allCategories() {
@@ -55,19 +64,19 @@ export default {
       if (!name) return;
 
       if (this.isCategory) {
-        const matches = this.allCategories.filter(x => x.name == name);
+        const matches = this.allCategories.filter((x) => x.name === name);
         if (matches.length > 0) return matches[0].slug;
       } else {
-        const matches = this.allTags.filter(x => x.name == name);
+        const matches = this.allTags.filter((x) => x.name === name);
         if (matches.length > 0) return matches[0].slug;
       }
     },
     truncateText(text, length = 20, clamp) {
       if (!this.truncate) return text;
       clamp = clamp || "...";
-      var node = document.createElement("div");
+      const node = document.createElement("div");
       node.innerHTML = text;
-      var content = node.textContent;
+      const content = node.textContent;
       return content.length > length ? content.slice(0, length) + clamp : content;
     },
   },
diff --git a/frontend/components/Domain/Recipe/RecipeContextMenu.vue b/frontend/components/Domain/Recipe/RecipeContextMenu.vue
index ccc6e53de8ed..571f61b31e8b 100644
--- a/frontend/components/Domain/Recipe/RecipeContextMenu.vue
+++ b/frontend/components/Domain/Recipe/RecipeContextMenu.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="text-center">
-    <ConfirmationDialog
+    <BaseDialog
+      ref="deleteRecipieConfirm"
       :title="$t('recipe.delete-recipe')"
       :message="$t('recipe.delete-confirmation')"
       color="error"
       :icon="$globals.icons.alertCircle"
-      ref="deleteRecipieConfirm"
-      v-on:confirm="deleteRecipe()"
+      @confirm="deleteRecipe()"
     />
     <v-menu
       offset-y
@@ -20,7 +20,7 @@
       open-on-hover
       content-class="d-print-none"
     >
-      <template v-slot:activator="{ on, attrs }">
+      <template #activator="{ on, attrs }">
         <v-btn :fab="fab" :small="fab" :color="color" :icon="!fab" dark v-bind="attrs" v-on="on" @click.prevent>
           <v-icon>{{ effMenuIcon }}</v-icon>
         </v-btn>
@@ -28,7 +28,7 @@
       <v-list dense>
         <v-list-item v-for="(item, index) in displayedMenu" :key="index" @click="menuAction(item.action)">
           <v-list-item-icon>
-            <v-icon v-text="item.icon" :color="item.color"></v-icon>
+            <v-icon :color="item.color" v-text="item.icon"></v-icon>
           </v-list-item-icon>
           <v-list-item-title>{{ item.title }}</v-list-item-title>
         </v-list-item>
@@ -38,13 +38,9 @@
 </template>
 
 <script>
-import ConfirmationDialog from "@/components/UI/Dialogs/ConfirmationDialog.vue";
 import { api } from "@/api";
 import { utils } from "@/utils";
 export default {
-  components: {
-    ConfirmationDialog,
-  },
   props: {
     menuTop: {
       type: Boolean,
@@ -76,6 +72,11 @@ export default {
       default: true,
     },
   },
+  data() {
+    return {
+      loading: true,
+    };
+  },
   computed: {
     effMenuIcon() {
       return this.menuIcon ? this.menuIcon : this.$globals.icons.dotsVertical;
@@ -143,11 +144,6 @@ export default {
       return this.$t("recipe.share-recipe-message", [this.name]);
     },
   },
-  data() {
-    return {
-      loading: true,
-    };
-  },
   methods: {
     async menuAction(action) {
       this.loading = true;
@@ -165,7 +161,7 @@ export default {
                 url: this.recipeURL,
               })
               .then(() => console.log("Successful share"))
-              .catch(error => {
+              .catch((error) => {
                 console.log("WebShareAPI not supported", error);
                 this.updateClipboard();
               });
diff --git a/frontend/components/Domain/Recipe/RecipeFavoriteBadge.vue b/frontend/components/Domain/Recipe/RecipeFavoriteBadge.vue
index 9b28715f31b1..820b8eab1625 100644
--- a/frontend/components/Domain/Recipe/RecipeFavoriteBadge.vue
+++ b/frontend/components/Domain/Recipe/RecipeFavoriteBadge.vue
@@ -1,14 +1,14 @@
 <template>
   <v-tooltip bottom nudge-right="50" :color="buttonStyle ? 'info' : 'secondary'">
-    <template v-slot:activator="{ on, attrs }">
+    <template #activator="{ on, attrs }">
       <v-btn
-        small
-        @click.prevent="toggleFavorite"
         v-if="isFavorite || showAlways"
+        small
         :color="buttonStyle ? 'info' : 'secondary'"
         :icon="!buttonStyle"
         :fab="buttonStyle"
         v-bind="attrs"
+        @click.prevent="toggleFavorite"
         v-on="on"
       >
         <v-icon :small="!buttonStyle" :color="buttonStyle ? 'white' : 'secondary'">
@@ -25,6 +25,7 @@ import { api } from "@/api";
 export default {
   props: {
     slug: {
+      type: String,
       default: "",
     },
     showAlways: {
@@ -41,7 +42,7 @@ export default {
       return this.$store.getters.getUserData;
     },
     isFavorite() {
-      return this.user.favoriteRecipes.indexOf(this.slug) !== -1;
+      return this.user.favoriteRecipes.includes(this.slug);
     },
   },
   methods: {
diff --git a/frontend/components/Domain/Recipe/RecipeRating.vue b/frontend/components/Domain/Recipe/RecipeRating.vue
index 7019172881c7..2a288c6d0f54 100644
--- a/frontend/components/Domain/Recipe/RecipeRating.vue
+++ b/frontend/components/Domain/Recipe/RecipeRating.vue
@@ -1,6 +1,7 @@
 <template>
   <div @click.prevent>
     <v-rating
+      v-model="rating"
       :readonly="!loggedIn"
       color="secondary"
       background-color="secondary lighten-3"
@@ -8,7 +9,6 @@
       :dense="small ? true : undefined"
       :size="small ? 15 : undefined"
       hover
-      v-model="rating"
       :value="value"
       @input="updateRating"
       @click="updateRating"
@@ -21,18 +21,26 @@ import { api } from "@/api";
 export default {
   props: {
     emitOnly: {
+      type: Boolean,
       default: false,
     },
-    name: String,
-    slug: String,
-    value: Number,
+    name: {
+      type: String,
+      default: "",
+    },
+    slug: {
+      type: String,
+      default: "",
+    },
+    value: {
+      type: Number,
+      default: 0,
+    },
     small: {
+      type: Boolean,
       default: false,
     },
   },
-  mounted() {
-    this.rating = this.value;
-  },
   data() {
     return {
       rating: 0,
@@ -43,6 +51,9 @@ export default {
       return this.$store.getters.getIsLoggedIn;
     },
   },
+  mounted() {
+    this.rating = this.value;
+  },
   methods: {
     updateRating(val) {
       if (this.emitOnly) {
diff --git a/frontend/components/Layout/AppFloatingButton.vue b/frontend/components/Layout/AppFloatingButton.vue
index 94c55f6db6e7..0c2697092c7c 100644
--- a/frontend/components/Layout/AppFloatingButton.vue
+++ b/frontend/components/Layout/AppFloatingButton.vue
@@ -1,15 +1,270 @@
 <template>
-  <div></div>
+  <div class="text-center d-print-none">
+    <BaseDialog
+      ref="domImportFromUrlDialog"
+      :title="$t('new-recipe.from-url')"
+      :icon="$globals.icons.link"
+      :submit-text="$t('general.create')"
+      :loading="processing"
+      width="600px"
+      @submit="uploadZip"
+    >
+      <v-form ref="urlForm" @submit.prevent="createRecipe">
+        <v-card-text>
+          <v-text-field
+            v-model="recipeURL"
+            :label="$t('new-recipe.recipe-url')"
+            validate-on-blur
+            autofocus
+            filled
+            rounded
+            class="rounded-lg"
+            :rules="[isValidWebUrl]"
+            :hint="$t('new-recipe.url-form-hint')"
+            persistent-hint
+          ></v-text-field>
+
+          <v-expand-transition>
+            <v-alert v-show="error" color="error" class="mt-6 white--text">
+              <v-card-title class="ma-0 pa-0">
+                <v-icon left color="white" x-large> {{ $globals.icons.robot }} </v-icon>
+                {{ $t("new-recipe.error-title") }}
+              </v-card-title>
+              <v-divider class="my-3 mx-2"></v-divider>
+
+              <p>
+                {{ $t("new-recipe.error-details") }}
+              </p>
+              <div class="d-flex row justify-space-around my-3 force-white">
+                <a
+                  class="dark"
+                  href="https://developers.google.com/search/docs/data-types/recipe"
+                  target="_blank"
+                  rel="noreferrer nofollow"
+                >
+                  {{ $t("new-recipe.google-ld-json-info") }}
+                </a>
+                <a href="https://github.com/hay-kot/mealie/issues" target="_blank" rel="noreferrer nofollow">
+                  {{ $t("new-recipe.github-issues") }}
+                </a>
+                <a href="https://schema.org/Recipe" target="_blank" rel="noreferrer nofollow">
+                  {{ $t("new-recipe.recipe-markup-specification") }}
+                </a>
+              </div>
+              <div class="d-flex justify-end">
+                <v-btn
+                  white
+                  outlined
+                  :to="{ path: '/recipes/debugger', query: { test_url: recipeURL } }"
+                  @click="addRecipe = false"
+                >
+                  <v-icon left> {{ $globals.icons.externalLink }} </v-icon>
+                  {{ $t("new-recipe.view-scraped-data") }}
+                </v-btn>
+              </div>
+            </v-alert>
+          </v-expand-transition>
+        </v-card-text>
+      </v-form>
+    </BaseDialog>
+    <BaseDialog
+      ref="domUploadZipDialog"
+      :title="$t('new-recipe.upload-a-recipe')"
+      :icon="$globals.icons.zip"
+      :submit-text="$t('general.import')"
+      :loading="processing"
+      @submit="uploadZip"
+    >
+      <v-card-text class="mt-1 pb-0">
+        {{ $t("new-recipe.upload-individual-zip-file") }}
+
+        <div class="headline mx-auto mb-0 pb-0 text-center">
+          {{ fileName }}
+        </div>
+      </v-card-text>
+
+      <v-card-actions>
+        <!-- <TheUploadBtn class="mx-auto" :text-btn="false" :post="false" @uploaded="setFile"> </TheUploadBtn> -->
+      </v-card-actions>
+    </BaseDialog>
+    <BaseDialog
+      ref="domCreateDialog"
+      :icon="$globals.icons.primary"
+      title="Create A Recipe"
+      @submit="manualCreateRecipe()"
+    >
+      <v-card-text class="mt-5">
+        <v-form>
+          <AutoForm v-model="createRecipeData.form" :items="createRecipeData.items" />
+        </v-form>
+      </v-card-text>
+    </BaseDialog>
+    <v-speed-dial v-model="fab" :open-on-hover="absolute" :fixed="absolute" :bottom="absolute" :right="absolute">
+      <template #activator>
+        <v-btn v-model="fab" :color="absolute ? 'accent' : 'white'" dark :icon="!absolute" :fab="absolute">
+          <v-icon> {{ $globals.icons.createAlt }} </v-icon>
+        </v-btn>
+      </template>
+
+      <!-- Action Buttons -->
+      <v-tooltip left dark color="primary">
+        <template #activator="{ on, attrs }">
+          <v-btn fab dark small color="primary" v-bind="attrs" v-on="on" @click="domImportFromUrlDialog.open()">
+            <v-icon>{{ $globals.icons.link }} </v-icon>
+          </v-btn>
+        </template>
+        <span>{{ $t("new-recipe.from-url") }}</span>
+      </v-tooltip>
+      <v-tooltip left dark color="accent">
+        <template #activator="{ on, attrs }">
+          <v-btn fab dark small color="accent" v-bind="attrs" v-on="on" @click="domCreateDialog.open()">
+            <v-icon>{{ $globals.icons.edit }}</v-icon>
+          </v-btn>
+        </template>
+        <span>{{ $t("general.new") }}</span>
+      </v-tooltip>
+      <v-tooltip left dark color="info">
+        <template #activator="{ on, attrs }">
+          <v-btn fab dark small color="info" v-bind="attrs" v-on="on" @click="domUploadZipDialog.open()">
+            <v-icon>{{ $globals.icons.zip }}</v-icon>
+          </v-btn>
+        </template>
+        <span>{{ $t("general.upload") }}</span>
+      </v-tooltip>
+    </v-speed-dial>
+  </div>
 </template>
-      
+
+
 <script lang="ts">
-import { defineComponent } from '@nuxtjs/composition-api'
+// import TheUploadBtn from "@/components/UI/Buttons/TheUploadBtn.vue";
+import { defineComponent, ref } from "@nuxtjs/composition-api";
+import { fieldTypes } from "~/composables/forms";
+import { useApi } from "~/composables/use-api";
 
 export default defineComponent({
+  props: {
+    absolute: {
+      type: Boolean,
+      default: false,
+    },
+  },
   setup() {
-    return {}
-  }
-})
+    const domCreateDialog = ref(null);
+    const domUploadZipDialog = ref(null);
+    const domImportFromUrlDialog = ref(null);
+
+    const api = useApi();
+
+    return { domCreateDialog, domUploadZipDialog, domImportFromUrlDialog, api };
+  },
+  data() {
+    return {
+      error: false,
+      fab: false,
+      addRecipe: false,
+      processing: false,
+      uploadData: {
+        fileName: "archive",
+        file: null,
+      },
+      createRecipeData: {
+        items: [
+          {
+            label: "Recipe Name",
+            varName: "name",
+            type: fieldTypes.TEXT,
+            rules: ["required"],
+          },
+        ],
+        form: {
+          name: "",
+        },
+      },
+    };
+  },
+
+  computed: {
+    recipeURL: {
+      set(recipe_import_url: string) {
+        this.$router.replace({ query: { ...this.$route.query, recipe_import_url } });
+      },
+      get(): string {
+        return this.$route.query.recipe_import_url || "";
+      },
+    },
+    fileName(): string {
+      if (this.uploadData?.file?.name) {
+        return this.uploadData.file.name;
+      }
+      return "";
+    },
+  },
+
+  mounted() {
+    if (this.$route.query.recipe_import_url) {
+      this.addRecipe = true;
+      this.createRecipe();
+    }
+  },
+
+  methods: {
+    async manualCreateRecipe() {
+      console.log(this.createRecipeData.form);
+      await this.api.recipes.createOne(this.createRecipeData.form.name);
+    },
+
+    resetVars() {
+      this.uploadData = {
+        fileName: "archive",
+        file: null,
+      };
+    },
+    setFile(file) {
+      this.uploadData.file = file;
+      console.log("Uploaded");
+    },
+    openZipUploader() {
+      this.resetVars();
+      this.$refs.uploadZipDialog.open();
+    },
+    async uploadZip() {
+      const formData = new FormData();
+      formData.append(this.uploadData.fileName, this.uploadData.file);
+
+      const response = await api.utils.uploadFile("/api/recipes/create-from-zip", formData);
+
+      this.$router.push(`/recipe/${response.data.slug}`);
+    },
+    async createRecipe() {
+      this.error = false;
+      if (this.$refs.urlForm === undefined || this.$refs.urlForm.validate()) {
+        this.processing = true;
+        const response = await api.recipes.createByURL(this.recipeURL);
+        this.processing = false;
+        if (response) {
+          this.addRecipe = false;
+          this.recipeURL = "";
+          this.$router.push(`/recipe/${response.data}`);
+        } else {
+          this.error = true;
+        }
+      }
+    },
+    reset() {
+      this.fab = false;
+      this.error = false;
+      this.addRecipe = false;
+      this.recipeURL = "";
+      this.processing = false;
+    },
+    isValidWebUrl(url: string) {
+      const regEx =
+        /^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,256}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)$/gm;
+      return regEx.test(url) ? true : this.$t("new-recipe.must-be-a-valid-url");
+    },
+  },
+});
 </script>
       
 <style scoped>
diff --git a/frontend/components/Layout/AppFooter.vue b/frontend/components/Layout/AppFooter.vue
index 773194212d10..bc5a9276c2fa 100644
--- a/frontend/components/Layout/AppFooter.vue
+++ b/frontend/components/Layout/AppFooter.vue
@@ -1,15 +1,29 @@
 <template>
-  <div></div>
+  <v-footer color="primary lighten-1" padless app>
+    <v-row justify="center" align="center" dense no-gutters>
+      <v-col class="primary py-2 text-center white--text" cols="12">
+        <v-btn dark icon href="https://github.com/hay-kot/mealie" target="_blank">
+          <v-icon>
+            {{ $globals.icons.github }}
+          </v-icon>
+        </v-btn>
+        {{ new Date().getFullYear() }} — <strong>Mealie</strong>
+      </v-col>
+    </v-row>
+  </v-footer>
 </template>
       
   <script lang="ts">
-import { defineComponent } from '@nuxtjs/composition-api'
+import { defineComponent } from "@nuxtjs/composition-api";
 
 export default defineComponent({
   setup() {
-    return {}
-  }
-})
+    return {};
+  },
+  data: () => ({
+    links: ["Home", "About Us", "Team", "Services", "Blog", "Contact Us"],
+  }),
+});
 </script>
       
       <style scoped>
diff --git a/frontend/components/Layout/AppHeader.vue b/frontend/components/Layout/AppHeader.vue
index 65916aee7609..937dae49eeb5 100644
--- a/frontend/components/Layout/AppHeader.vue
+++ b/frontend/components/Layout/AppHeader.vue
@@ -1,16 +1,152 @@
 <template>
-  <div></div>
+  <v-app-bar clipped-left dense app color="primary" dark class="d-print-none">
+    <slot />
+    <router-link to="/">
+      <v-btn icon>
+        <v-icon size="40"> {{ $globals.icons.primary }} </v-icon>
+      </v-btn>
+    </router-link>
+
+    <div btn class="pl-2">
+      <v-toolbar-title style="cursor: pointer" @click="$router.push('/')"> Mealie </v-toolbar-title>
+    </div>
+
+    {{ value }}
+
+    <v-spacer></v-spacer>
+    <!-- <v-tooltip bottom>
+      <template #activator="{ on, attrs }">
+        <v-btn icon class="mr-1" small v-bind="attrs" v-on="on">
+          <v-icon v-text="isDark ? $globals.icons.weatherSunny : $globals.icons.weatherNight"> </v-icon>
+        </v-btn>
+      </template>
+      <span>{{ isDark ? $t("settings.theme.switch-to-light-mode") : $t("settings.theme.switch-to-dark-mode") }}</span>
+    </v-tooltip> -->
+    <!-- <div v-if="false" style="width: 350px"></div>
+    <div v-else>
+      <v-btn icon @click="$refs.recipeSearch.open()">
+        <v-icon> {{ $globals.icons.search }} </v-icon>
+      </v-btn>
+    </div> -->
+
+    <!-- Navigation Menu -->
+    <v-menu
+      v-if="menu"
+      transition="slide-x-transition"
+      bottom
+      right
+      offset-y
+      offset-overflow
+      open-on-hover
+      close-delay="200"
+    >
+      <template #activator="{ on, attrs }">
+        <v-btn v-bind="attrs" icon v-on="on">
+          <v-icon>{{ $globals.icons.user }}</v-icon>
+        </v-btn>
+      </template>
+      <v-list>
+        <v-list-item-group v-model="itemSelected" color="primary">
+          <v-list-item
+            v-for="(item, i) in filteredItems"
+            :key="i"
+            link
+            :to="item.nav ? item.nav : null"
+            @click="item.logout ? $auth.logout() : null"
+          >
+            <v-list-item-icon>
+              <v-icon>{{ item.icon }}</v-icon>
+            </v-list-item-icon>
+            <v-list-item-content>
+              <v-list-item-title>
+                {{ item.title }}
+              </v-list-item-title>
+            </v-list-item-content>
+          </v-list-item>
+        </v-list-item-group>
+      </v-list>
+    </v-menu>
+  </v-app-bar>
 </template>
     
 <script lang="ts">
-import { defineComponent } from '@nuxtjs/composition-api'
+import { defineComponent } from "@nuxtjs/composition-api";
 
 export default defineComponent({
+  props: {
+    value: {
+      type: Boolean,
+      default: null,
+    },
+    menu: {
+      type: Boolean,
+      default: true,
+    },
+  },
   setup() {
-    return {}
-  }
-})
+    return {};
+  },
+  data() {
+    return {
+      itemSelected: null,
+      items: [
+        {
+          icon: this.$globals.icons.user,
+          title: this.$t("user.login"),
+          restricted: false,
+          nav: "/user/login",
+        },
+        {
+          icon: this.$globals.icons.calendarWeek,
+          title: this.$t("meal-plan.dinner-this-week"),
+          nav: "/meal-plan/this-week",
+          restricted: true,
+        },
+        {
+          icon: this.$globals.icons.calendarToday,
+          title: this.$t("meal-plan.dinner-today"),
+          nav: "/meal-plan/today",
+          restricted: true,
+        },
+        {
+          icon: this.$globals.icons.calendarMultiselect,
+          title: this.$t("meal-plan.planner"),
+          nav: "/meal-plan/planner",
+          restricted: true,
+        },
+        {
+          icon: this.$globals.icons.formatListCheck,
+          title: this.$t("shopping-list.shopping-lists"),
+          nav: "/shopping-list",
+          restricted: true,
+        },
+        {
+          icon: this.$globals.icons.logout,
+          title: this.$t("user.logout"),
+          restricted: true,
+          logout: true,
+        },
+        {
+          icon: this.$globals.icons.cog,
+          title: this.$t("general.settings"),
+          nav: "/user/profile",
+          restricted: true,
+        },
+      ],
+    };
+  },
+  computed: {
+    filteredItems(): Array<any> {
+      if (this.loggedIn) {
+        return this.items.filter((x) => x.restricted === true);
+      } else {
+        return this.items.filter((x) => x.restricted === false);
+      }
+    },
+    loggedIn(): Boolean {
+      return this.$auth.loggedIn;
+    },
+  },
+});
 </script>
-    
-    <style scoped>
-</style>
\ No newline at end of file
+    
\ No newline at end of file
diff --git a/frontend/components/Layout/AppSidebar.vue b/frontend/components/Layout/AppSidebar.vue
index 53e9abb3c713..908b8628f455 100644
--- a/frontend/components/Layout/AppSidebar.vue
+++ b/frontend/components/Layout/AppSidebar.vue
@@ -1,16 +1,122 @@
 <template>
-  <div></div>
+  <v-navigation-drawer :value="value" clipped app width="200px">
+    <!-- User Profile -->
+    <template v-if="$auth.user">
+      <v-list-item two-line to="/user/profile">
+        <v-list-item-avatar color="accent" class="white--text">
+          <v-img :src="require(`~/static/account.png`)" />
+        </v-list-item-avatar>
+
+        <v-list-item-content>
+          <v-list-item-title> {{ $auth.user.fullName }}</v-list-item-title>
+          <v-list-item-subtitle> {{ $auth.user.admin ? $t("user.admin") : $t("user.user") }}</v-list-item-subtitle>
+        </v-list-item-content>
+      </v-list-item>
+      <v-divider></v-divider>
+    </template>
+    
+    <!-- Primary Links -->
+    <v-list nav dense>
+      <v-list-item-group v-model="topSelected" color="primary">
+        <v-list-item v-for="nav in topLink" :key="nav.title" link :to="nav.to">
+          <v-list-item-icon>
+            <v-icon>{{ nav.icon }}</v-icon>
+          </v-list-item-icon>
+          <v-list-item-title>{{ nav.title }}</v-list-item-title>
+        </v-list-item>
+      </v-list-item-group>
+    </v-list>
+
+    <!-- Secondary Links -->
+    <template v-if="secondaryLinks">
+      <v-divider></v-divider>
+      <v-list nav dense>
+        <v-list-item-group v-model="secondarySelected" color="primary">
+          <v-list-item v-for="nav in secondaryLinks" :key="nav.title" link :to="nav.to">
+            <v-list-item-icon>
+              <v-icon>{{ nav.icon }}</v-icon>
+            </v-list-item-icon>
+            <v-list-item-title>{{ nav.title }}</v-list-item-title>
+          </v-list-item>
+        </v-list-item-group>
+      </v-list>
+    </template>
+
+    <!-- Bottom Navigation Links -->
+    <template v-if="bottomLinks">
+      <v-list class="fixedBottom" nav dense>
+        <v-list-item-group v-model="bottomSelected" color="primary">
+          <v-list-item
+            v-for="nav in bottomLinks"
+            :key="nav.title"
+            link
+            :to="nav.to || null"
+            :href="nav.href || null"
+            :target="nav.href ? '_blank' : null"
+          >
+            <v-list-item-icon>
+              <v-icon>{{ nav.icon }}</v-icon>
+            </v-list-item-icon>
+            <v-list-item-title>{{ nav.title }}</v-list-item-title>
+          </v-list-item>
+        </v-list-item-group>
+      </v-list>
+    </template>
+  </v-navigation-drawer>
 </template>
   
 <script lang="ts">
-import { defineComponent } from '@nuxtjs/composition-api'
+import { defineComponent } from "@nuxtjs/composition-api";
+import { SidebarLinks } from "~/types/application-types";
 
 export default defineComponent({
+  props: {
+    value: {
+      type: Boolean,
+      default: null,
+    },
+    user: {
+      type: Object,
+      default: null,
+    },
+    topLink: {
+      type: Array as () => SidebarLinks,
+      required: true,
+    },
+    secondaryLinks: {
+      type: Array as () => SidebarLinks,
+      required: false,
+      default: null,
+    },
+    bottomLinks: {
+      type: Array as () => SidebarLinks,
+      required: false,
+      default: null,
+    },
+  },
   setup() {
-    return {}
-  }
-})
+    return {};
+  },
+  data() {
+    return {
+      topSelected: null,
+      secondarySelected: null,
+      bottomSelected: null,
+    };
+  },
+});
 </script>
   
-  <style scoped>
-</style>
\ No newline at end of file
+<style>
+.fixedBottom {
+  position: fixed !important;
+  bottom: 0 !important;
+  width: 100%;
+}
+
+@media print {
+  .no-print {
+    display: none;
+  }
+}
+</style>
diff --git a/frontend.old/src/components/UI/SiteLoader.vue b/frontend/components/global/AppLoader.vue
similarity index 100%
rename from frontend.old/src/components/UI/SiteLoader.vue
rename to frontend/components/global/AppLoader.vue
diff --git a/frontend/components/global/AutoForm.vue b/frontend/components/global/AutoForm.vue
new file mode 100644
index 000000000000..b5f193b86570
--- /dev/null
+++ b/frontend/components/global/AutoForm.vue
@@ -0,0 +1,264 @@
+<template>
+  <v-card :color="color" :dark="dark" flat :width="width" class="my-2">
+    <v-row>
+      <v-col v-for="(inputField, index) in items" :key="index" class="py-0" cols="12" sm="12">
+        <v-divider v-if="inputField.section" class="my-2" />
+        <v-card-title v-if="inputField.section" class="pl-0">
+          {{ inputField.section }}
+        </v-card-title>
+        <v-card-text v-if="inputField.sectionDetails" class="pl-0 mt-0 pt-0">
+          {{ inputField.sectionDetails }}
+        </v-card-text>
+
+        <!-- Check Box -->
+        <v-checkbox
+          v-if="inputField.type === fieldTypes.BOOLEAN"
+          v-model="value[inputField.varName]"
+          class="my-0 py-0"
+          :label="inputField.label"
+          :name="inputField.varName"
+          :hint="inputField.hint || ''"
+          @change="emitBlur"
+        />
+
+        <!-- Text Field -->
+        <v-text-field
+          v-else-if="inputField.type === fieldTypes.TEXT"
+          v-model="value[inputField.varName]"
+          :readonly="inputField.fixed && updateMode"
+          filled
+          rounded
+          class="rounded-lg"
+          dense
+          :label="inputField.label"
+          :name="inputField.varName"
+          :hint="inputField.hint || ''"
+          :rules="[...rulesByKey(inputField.rules), ...defaultRules]"
+          lazy-validation
+          @blur="emitBlur"
+        />
+
+        <!-- Text Area -->
+        <v-textarea
+          v-else-if="inputField.type === fieldTypes.TEXT_AREA"
+          v-model="value[inputField.varName]"
+          :readonly="inputField.fixed && updateMode"
+          filled
+          rounded
+          class="rounded-lg"
+          rows="3"
+          auto-grow
+          dense
+          :label="inputField.label"
+          :name="inputField.varName"
+          :hint="inputField.hint || ''"
+          :rules="[...rulesByKey(inputField.rules), ...defaultRules]"
+          lazy-validation
+          @blur="emitBlur"
+        />
+
+        <!-- Option Select -->
+        <v-select
+          v-else-if="inputField.type === fieldTypes.SELECT"
+          v-model="value[inputField.varName]"
+          :readonly="inputField.fixed && updateMode"
+          filled
+          rounded
+          class="rounded-lg"
+          :prepend-icon="inputField.icons ? value[inputField.varName] : null"
+          :label="inputField.label"
+          :name="inputField.varName"
+          :items="inputField.options"
+          :return-object="false"
+          lazy-validation
+          @blur="emitBlur"
+        >
+          <template #item="{ item }">
+            <v-list-item-content>
+              <v-list-item-title>{{ item.text }}</v-list-item-title>
+              <v-list-item-subtitle>{{ item.description }}</v-list-item-subtitle>
+            </v-list-item-content>
+          </template>
+        </v-select>
+
+        <!-- Color Picker -->
+        <div v-else-if="inputField.type === fieldTypes.COLOR" class="d-flex" style="width: 100%">
+          <v-menu offset-y>
+            <template #activator="{ on }">
+              <v-btn class="my-2 ml-auto" style="min-width: 200px" :color="value[inputField.varName]" dark v-on="on">
+                {{ inputField.label }}
+              </v-btn>
+            </template>
+            <v-color-picker
+              v-model="value[inputField.varName]"
+              value="#7417BE"
+              hide-canvas
+              hide-inputs
+              show-swatches
+              class="mx-auto"
+              @input="emitBlur"
+            />
+          </v-menu>
+        </div>
+
+        <div v-else-if="inputField.type === fieldTypes.OBJECT">
+          <auto-form v-model="value[inputField.varName]" :color="color" :items="inputField.items" @blur="emitBlur" />
+        </div>
+
+        <!-- List Type -->
+        <div v-else-if="inputField.type === fieldTypes.LIST">
+          <div v-for="(item, idx) in value[inputField.varName]" :key="idx">
+            <p>
+              {{ inputField.label }} {{ idx + 1 }}
+              <span>
+                <BaseButton class="ml-5" x-small delete @click="removeByIndex(value[inputField.varName], idx)" />
+              </span>
+            </p>
+            <v-divider class="mb-5 mx-2" />
+            <auto-form
+              v-model="value[inputField.varName][idx]"
+              :color="color"
+              :items="inputField.items"
+              @blur="emitBlur"
+            />
+          </div>
+          <v-card-actions>
+            <v-spacer />
+            <BaseButton small @click="value[inputField.varName].push(getTemplate(inputField.items))"> New </BaseButton>
+          </v-card-actions>
+        </div>
+      </v-col>
+    </v-row>
+  </v-card>
+</template>
+
+<script>
+import { validators } from "@/composables/use-validators";
+import { fieldTypes } from "@/composables/forms";
+import { ref } from "@vue/composition-api";
+
+const BLUR_EVENT = "blur";
+
+export default {
+  name: "AutoForm",
+  props: {
+    value: {
+      default: null,
+      type: [Object, Array],
+    },
+    updateMode: {
+      default: false,
+      type: Boolean,
+    },
+    items: {
+      default: null,
+      type: Array,
+    },
+    width: {
+      type: [Number, String],
+      default: "max",
+    },
+    globalRules: {
+      default: null,
+      type: Array,
+    },
+    color: {
+      default: null,
+      type: String,
+    },
+    dark: {
+      default: false,
+      type: Boolean,
+    },
+  },
+  setup() {
+    const menu = ref({});
+
+    return {
+      menu,
+      fieldTypes,
+      validators,
+    };
+  },
+  computed: {
+    defaultRules() {
+      return this.rulesByKey(this.globalRules);
+    },
+  },
+  watch: {
+    items: {
+      immediate: true,
+      handler(val) {
+        // Initialize Value Object to Obtain all keys
+        if (!val) {
+          return;
+        }
+        for (let i = 0; i < val.length; i++) {
+          try {
+            if (this.value[val[i].varName]) {
+              continue;
+            }
+          } catch {}
+
+          if (val[i].type === "text" || val[i].type === "textarea") {
+            this.$set(this.value, val[i].varName, "");
+          } else if (val[i].type === "select") {
+            if (!val[i].options[0]) {
+              continue;
+            }
+
+            this.$set(this.value, val[i].varName, val[i].options[0].value);
+          } else if (val[i].type === "list") {
+            this.$set(this.value, val[i].varName, []);
+          } else if (val[i].type === "object") {
+            this.$set(this.value, val[i].varName, {});
+          } else if (val[i].type === "color") {
+            this.$set(this.value, val[i].varName, "");
+            this.$set(this.menu, val[i].varName, false);
+          }
+        }
+      },
+    },
+  },
+  methods: {
+    removeByIndex(list, index) {
+      // Removes the item at the index
+      list.splice(index, 1);
+    },
+    getTemplate(item) {
+      const obj = {};
+
+      item.forEach((field) => {
+        obj[field.varName] = "";
+      });
+
+      return obj;
+    },
+    rulesByKey(keys) {
+      const list = [];
+
+      if (keys === undefined) {
+        return list;
+      }
+      if (keys === null) {
+        return list;
+      }
+      if (keys === list) {
+        return list;
+      }
+
+      keys.forEach((key) => {
+        if (key in this.validators) {
+          list.push(this.validators[key]);
+        }
+      });
+      return list;
+    },
+    emitBlur() {
+      this.$emit(BLUR_EVENT, this.value);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/frontend.old/src/components/UI/Dialogs/BaseDialog.vue b/frontend/components/global/BaseDialog.vue
similarity index 61%
rename from frontend.old/src/components/UI/Dialogs/BaseDialog.vue
rename to frontend/components/global/BaseDialog.vue
index 438c4f514199..383b334c7522 100644
--- a/frontend.old/src/components/UI/Dialogs/BaseDialog.vue
+++ b/frontend/components/global/BaseDialog.vue
@@ -1,23 +1,28 @@
 <template>
   <div>
-    <slot name="open" v-bind="{ open }"> </slot>
+    <slot name="activator" v-bind="{ open }" />
     <v-dialog
       v-model="dialog"
-      :width="modalWidth + 'px'"
+      absolute
+      :width="width"
       :content-class="top ? 'top-dialog' : undefined"
       :fullscreen="$vuetify.breakpoint.xsOnly"
     >
       <v-card height="100%">
-        <v-app-bar dark :color="color" class="mt-n1 mb-0">
+        <v-app-bar dark :color="color" class="mt-n1">
           <v-icon large left>
-            {{ displayTitleIcon }}
+            {{ icon }}
           </v-icon>
           <v-toolbar-title class="headline"> {{ title }} </v-toolbar-title>
           <v-spacer></v-spacer>
         </v-app-bar>
-        <v-progress-linear class="mt-1" v-if="loading" indeterminate color="primary"></v-progress-linear>
+        <v-progress-linear v-if="loading" class="mt-1" indeterminate color="primary"></v-progress-linear>
 
-        <slot v-bind="{ submitEvent }"> </slot>
+        <div>
+          <slot v-bind="{ submitEvent }" />
+        </div>
+
+        <v-divider class="mx-2"></v-divider>
 
         <v-card-actions>
           <slot name="card-actions">
@@ -26,17 +31,17 @@
             </v-btn>
             <v-spacer></v-spacer>
 
-            <v-btn color="error" text @click="deleteEvent" v-if="$listeners.delete">
-              {{ $t("general.delete") }}
-            </v-btn>
-            <slot name="extra-buttons"> </slot>
-            <v-btn color="success" type="submit" @click="submitEvent">
+            <BaseButton v-if="$listeners.delete" delete secondary @click="deleteEvent" />
+            <BaseButton v-if="$listeners.confirm" :color="color" type="submit" @click="submitEvent">
+              {{ $t("general.confirm") }}
+            </BaseButton>
+            <BaseButton v-else-if="$listeners.submit" type="submit" @click="submitEvent">
               {{ submitText }}
-            </v-btn>
+            </BaseButton>
           </slot>
         </v-card-actions>
 
-        <div class="pb-4" v-if="$slots['below-actions']">
+        <div v-if="$slots['below-actions']" class="pb-4">
           <slot name="below-actions"> </slot>
         </div>
       </v-card>
@@ -44,23 +49,29 @@
   </div>
 </template>
 
-<script>
-import i18n from "@/i18n.js";
-export default {
+<script lang="ts">
+import { defineComponent } from "@nuxtjs/composition-api";
+export default defineComponent({
+  name: "BaseDialog",
   props: {
     color: {
+      type: String,
       default: "primary",
     },
     title: {
+      type: String,
       default: "Modal Title",
     },
-    titleIcon: {
+    icon: {
+      type: String,
       default: null,
     },
-    modalWidth: {
+    width: {
+      type: [Number, String],
       default: "500",
     },
     loading: {
+      type: Boolean,
       default: false,
     },
     top: {
@@ -68,7 +79,8 @@ export default {
       type: Boolean,
     },
     submitText: {
-      default: () => i18n.t("general.create"),
+      type: String,
+      default: () => "Create",
     },
     keepOpen: {
       default: false,
@@ -85,8 +97,8 @@ export default {
     determineClose() {
       return this.submitted && !this.loading && !this.keepOpen;
     },
-    displayTitleIcon() {
-      return this.titleIcon || this.$globals.icons.user;
+    displayicon() {
+      return this.icon || this.$globals.icons.user;
     },
   },
   watch: {
@@ -115,8 +127,7 @@ export default {
       this.dialog = false;
     },
   },
-};
+});
 </script>
 
-<style>
-</style>
+<style></style>
diff --git a/frontend/composables/use-api.ts b/frontend/composables/use-api.ts
new file mode 100644
index 000000000000..4bf7ab5464ec
--- /dev/null
+++ b/frontend/composables/use-api.ts
@@ -0,0 +1,64 @@
+import { AxiosResponse } from "axios";
+import { useContext } from "@nuxtjs/composition-api";
+import { NuxtAxiosInstance } from "@nuxtjs/axios";
+import { Api } from "~/api";
+import { ApiRequestInstance } from "~/types/api";
+
+interface RequestResponse<T> {
+  response: AxiosResponse<T> | null;
+  data: T | null;
+  error: any;
+}
+
+const request = {
+  async safe<T>(funcCall: any, url: string, data: object = {}): Promise<RequestResponse<T>> {
+    const response = await funcCall(url, data).catch(function (error: object) {
+      console.log(error);
+      // Insert Generic Error Handling Here
+      return { response: null, error, data: null };
+    });
+    return { response, error: null, data: response.data };
+  },
+};
+
+function getRequests(axoisInstance: NuxtAxiosInstance): ApiRequestInstance {
+  const requests = {
+    async get<T>(url: string, queryParams = {}): Promise<RequestResponse<T>> {
+      let error = null;
+      const response = await axoisInstance.get<T>(url, { params: { queryParams } }).catch((e) => {
+        error = e;
+      });
+      if (response != null) {
+        return { response, error, data: response?.data };
+      }
+      return { response: null, error, data: null };
+    },
+
+    async post<T>(url: string, data: object) {
+      return await request.safe<T>(axoisInstance.post, url, data);
+    },
+
+    async put<T>(url: string, data: object) {
+      return await request.safe<T>(axoisInstance.put, url, data);
+    },
+
+    async patch<T>(url: string, data: object) {
+      return await request.safe<T>(axoisInstance.patch, url, data);
+    },
+
+    async delete<T>(url: string) {
+      return await request.safe<T>(axoisInstance.delete, url);
+    },
+  };
+  return requests;
+}
+
+
+
+
+export const useApi = function (): Api {
+  const { $axios } = useContext();
+  const requests = getRequests($axios);
+
+  return new Api(requests)
+};
diff --git a/frontend.old/src/locales/dateTimeFormats/af-ZA.json b/frontend/lang/dateTimeFormats/af-ZA.json
similarity index 100%
rename from frontend.old/src/locales/dateTimeFormats/af-ZA.json
rename to frontend/lang/dateTimeFormats/af-ZA.json
diff --git a/frontend.old/src/locales/dateTimeFormats/ar-SA.json b/frontend/lang/dateTimeFormats/ar-SA.json
similarity index 100%
rename from frontend.old/src/locales/dateTimeFormats/ar-SA.json
rename to frontend/lang/dateTimeFormats/ar-SA.json
diff --git a/frontend.old/src/locales/dateTimeFormats/ca-ES.json b/frontend/lang/dateTimeFormats/ca-ES.json
similarity index 100%
rename from frontend.old/src/locales/dateTimeFormats/ca-ES.json
rename to frontend/lang/dateTimeFormats/ca-ES.json
diff --git a/frontend.old/src/locales/dateTimeFormats/cs-CZ.json b/frontend/lang/dateTimeFormats/cs-CZ.json
similarity index 100%
rename from frontend.old/src/locales/dateTimeFormats/cs-CZ.json
rename to frontend/lang/dateTimeFormats/cs-CZ.json
diff --git a/frontend.old/src/locales/dateTimeFormats/da-DK.json b/frontend/lang/dateTimeFormats/da-DK.json
similarity index 100%
rename from frontend.old/src/locales/dateTimeFormats/da-DK.json
rename to frontend/lang/dateTimeFormats/da-DK.json
diff --git a/frontend.old/src/locales/dateTimeFormats/de-DE.json b/frontend/lang/dateTimeFormats/de-DE.json
similarity index 100%
rename from frontend.old/src/locales/dateTimeFormats/de-DE.json
rename to frontend/lang/dateTimeFormats/de-DE.json
diff --git a/frontend.old/src/locales/dateTimeFormats/el-GR.json b/frontend/lang/dateTimeFormats/el-GR.json
similarity index 100%
rename from frontend.old/src/locales/dateTimeFormats/el-GR.json
rename to frontend/lang/dateTimeFormats/el-GR.json
diff --git a/frontend.old/src/locales/dateTimeFormats/en-GB.json b/frontend/lang/dateTimeFormats/en-GB.json
similarity index 100%
rename from frontend.old/src/locales/dateTimeFormats/en-GB.json
rename to frontend/lang/dateTimeFormats/en-GB.json
diff --git a/frontend.old/src/locales/dateTimeFormats/en-US.json b/frontend/lang/dateTimeFormats/en-US.json
similarity index 100%
rename from frontend.old/src/locales/dateTimeFormats/en-US.json
rename to frontend/lang/dateTimeFormats/en-US.json
diff --git a/frontend.old/src/locales/dateTimeFormats/es-ES.json b/frontend/lang/dateTimeFormats/es-ES.json
similarity index 100%
rename from frontend.old/src/locales/dateTimeFormats/es-ES.json
rename to frontend/lang/dateTimeFormats/es-ES.json
diff --git a/frontend.old/src/locales/dateTimeFormats/fi-FI.json b/frontend/lang/dateTimeFormats/fi-FI.json
similarity index 100%
rename from frontend.old/src/locales/dateTimeFormats/fi-FI.json
rename to frontend/lang/dateTimeFormats/fi-FI.json
diff --git a/frontend.old/src/locales/dateTimeFormats/fr-FR.json b/frontend/lang/dateTimeFormats/fr-FR.json
similarity index 100%
rename from frontend.old/src/locales/dateTimeFormats/fr-FR.json
rename to frontend/lang/dateTimeFormats/fr-FR.json
diff --git a/frontend.old/src/locales/dateTimeFormats/he-IL.json b/frontend/lang/dateTimeFormats/he-IL.json
similarity index 100%
rename from frontend.old/src/locales/dateTimeFormats/he-IL.json
rename to frontend/lang/dateTimeFormats/he-IL.json
diff --git a/frontend.old/src/locales/dateTimeFormats/hu-HU.json b/frontend/lang/dateTimeFormats/hu-HU.json
similarity index 100%
rename from frontend.old/src/locales/dateTimeFormats/hu-HU.json
rename to frontend/lang/dateTimeFormats/hu-HU.json
diff --git a/frontend.old/src/locales/dateTimeFormats/it-IT.json b/frontend/lang/dateTimeFormats/it-IT.json
similarity index 100%
rename from frontend.old/src/locales/dateTimeFormats/it-IT.json
rename to frontend/lang/dateTimeFormats/it-IT.json
diff --git a/frontend.old/src/locales/dateTimeFormats/ja-JP.json b/frontend/lang/dateTimeFormats/ja-JP.json
similarity index 100%
rename from frontend.old/src/locales/dateTimeFormats/ja-JP.json
rename to frontend/lang/dateTimeFormats/ja-JP.json
diff --git a/frontend.old/src/locales/dateTimeFormats/ko-KR.json b/frontend/lang/dateTimeFormats/ko-KR.json
similarity index 100%
rename from frontend.old/src/locales/dateTimeFormats/ko-KR.json
rename to frontend/lang/dateTimeFormats/ko-KR.json
diff --git a/frontend.old/src/locales/dateTimeFormats/nl-NL.json b/frontend/lang/dateTimeFormats/nl-NL.json
similarity index 100%
rename from frontend.old/src/locales/dateTimeFormats/nl-NL.json
rename to frontend/lang/dateTimeFormats/nl-NL.json
diff --git a/frontend.old/src/locales/dateTimeFormats/no-NO.json b/frontend/lang/dateTimeFormats/no-NO.json
similarity index 100%
rename from frontend.old/src/locales/dateTimeFormats/no-NO.json
rename to frontend/lang/dateTimeFormats/no-NO.json
diff --git a/frontend.old/src/locales/dateTimeFormats/pl-PL.json b/frontend/lang/dateTimeFormats/pl-PL.json
similarity index 100%
rename from frontend.old/src/locales/dateTimeFormats/pl-PL.json
rename to frontend/lang/dateTimeFormats/pl-PL.json
diff --git a/frontend.old/src/locales/dateTimeFormats/pt-BR.json b/frontend/lang/dateTimeFormats/pt-BR.json
similarity index 100%
rename from frontend.old/src/locales/dateTimeFormats/pt-BR.json
rename to frontend/lang/dateTimeFormats/pt-BR.json
diff --git a/frontend.old/src/locales/dateTimeFormats/pt-PT.json b/frontend/lang/dateTimeFormats/pt-PT.json
similarity index 100%
rename from frontend.old/src/locales/dateTimeFormats/pt-PT.json
rename to frontend/lang/dateTimeFormats/pt-PT.json
diff --git a/frontend.old/src/locales/dateTimeFormats/ro-RO.json b/frontend/lang/dateTimeFormats/ro-RO.json
similarity index 100%
rename from frontend.old/src/locales/dateTimeFormats/ro-RO.json
rename to frontend/lang/dateTimeFormats/ro-RO.json
diff --git a/frontend.old/src/locales/dateTimeFormats/ru-RU.json b/frontend/lang/dateTimeFormats/ru-RU.json
similarity index 100%
rename from frontend.old/src/locales/dateTimeFormats/ru-RU.json
rename to frontend/lang/dateTimeFormats/ru-RU.json
diff --git a/frontend.old/src/locales/dateTimeFormats/sr-SP.json b/frontend/lang/dateTimeFormats/sr-SP.json
similarity index 100%
rename from frontend.old/src/locales/dateTimeFormats/sr-SP.json
rename to frontend/lang/dateTimeFormats/sr-SP.json
diff --git a/frontend.old/src/locales/dateTimeFormats/sv-SE.json b/frontend/lang/dateTimeFormats/sv-SE.json
similarity index 100%
rename from frontend.old/src/locales/dateTimeFormats/sv-SE.json
rename to frontend/lang/dateTimeFormats/sv-SE.json
diff --git a/frontend.old/src/locales/dateTimeFormats/tr-TR.json b/frontend/lang/dateTimeFormats/tr-TR.json
similarity index 100%
rename from frontend.old/src/locales/dateTimeFormats/tr-TR.json
rename to frontend/lang/dateTimeFormats/tr-TR.json
diff --git a/frontend.old/src/locales/dateTimeFormats/uk-UA.json b/frontend/lang/dateTimeFormats/uk-UA.json
similarity index 100%
rename from frontend.old/src/locales/dateTimeFormats/uk-UA.json
rename to frontend/lang/dateTimeFormats/uk-UA.json
diff --git a/frontend.old/src/locales/dateTimeFormats/vi-VN.json b/frontend/lang/dateTimeFormats/vi-VN.json
similarity index 100%
rename from frontend.old/src/locales/dateTimeFormats/vi-VN.json
rename to frontend/lang/dateTimeFormats/vi-VN.json
diff --git a/frontend.old/src/locales/dateTimeFormats/zh-CN.json b/frontend/lang/dateTimeFormats/zh-CN.json
similarity index 100%
rename from frontend.old/src/locales/dateTimeFormats/zh-CN.json
rename to frontend/lang/dateTimeFormats/zh-CN.json
diff --git a/frontend.old/src/locales/dateTimeFormats/zh-TW.json b/frontend/lang/dateTimeFormats/zh-TW.json
similarity index 100%
rename from frontend.old/src/locales/dateTimeFormats/zh-TW.json
rename to frontend/lang/dateTimeFormats/zh-TW.json
diff --git a/frontend.old/src/locales/messages/af-ZA.json b/frontend/lang/messages/af-ZA.json
similarity index 100%
rename from frontend.old/src/locales/messages/af-ZA.json
rename to frontend/lang/messages/af-ZA.json
diff --git a/frontend.old/src/locales/messages/ar-SA.json b/frontend/lang/messages/ar-SA.json
similarity index 100%
rename from frontend.old/src/locales/messages/ar-SA.json
rename to frontend/lang/messages/ar-SA.json
diff --git a/frontend.old/src/locales/messages/ca-ES.json b/frontend/lang/messages/ca-ES.json
similarity index 100%
rename from frontend.old/src/locales/messages/ca-ES.json
rename to frontend/lang/messages/ca-ES.json
diff --git a/frontend.old/src/locales/messages/cs-CZ.json b/frontend/lang/messages/cs-CZ.json
similarity index 100%
rename from frontend.old/src/locales/messages/cs-CZ.json
rename to frontend/lang/messages/cs-CZ.json
diff --git a/frontend.old/src/locales/messages/da-DK.json b/frontend/lang/messages/da-DK.json
similarity index 100%
rename from frontend.old/src/locales/messages/da-DK.json
rename to frontend/lang/messages/da-DK.json
diff --git a/frontend.old/src/locales/messages/de-DE.json b/frontend/lang/messages/de-DE.json
similarity index 100%
rename from frontend.old/src/locales/messages/de-DE.json
rename to frontend/lang/messages/de-DE.json
diff --git a/frontend.old/src/locales/messages/el-GR.json b/frontend/lang/messages/el-GR.json
similarity index 100%
rename from frontend.old/src/locales/messages/el-GR.json
rename to frontend/lang/messages/el-GR.json
diff --git a/frontend.old/src/locales/messages/en-GB.json b/frontend/lang/messages/en-GB.json
similarity index 100%
rename from frontend.old/src/locales/messages/en-GB.json
rename to frontend/lang/messages/en-GB.json
diff --git a/frontend/lang/messages/en-US.js b/frontend/lang/messages/en-US.js
new file mode 100644
index 000000000000..1af877c21336
--- /dev/null
+++ b/frontend/lang/messages/en-US.js
@@ -0,0 +1,497 @@
+export default {
+  about: {
+    about: "About",
+    "about-mealie": "About Mealie",
+    "api-docs": "API Docs",
+    "api-port": "API Port",
+    "application-mode": "Application Mode",
+    "database-type": "Database Type",
+    "database-url": "Database URL",
+    "default-group": "Default Group",
+    demo: "Demo",
+    "demo-status": "Demo Status",
+    development: "Development",
+    docs: "Docs",
+    "download-log": "Download Log",
+    "download-recipe-json": "Last Scraped JSON",
+    github: "Github",
+    "log-lines": "Log Lines",
+    "not-demo": "Not Demo",
+    portfolio: "Portfolio",
+    production: "Production",
+    support: "Support",
+    version: "Version",
+  },
+  asset: {
+    assets: "Assets",
+    code: "Code",
+    file: "File",
+    image: "Image",
+    "new-asset": "New Asset",
+    pdf: "PDF",
+    recipe: "Recipe",
+    "show-assets": "Show Assets",
+  },
+  category: {
+    "category-created": "Category created",
+    "category-creation-failed": "Category creation failed",
+    "category-deleted": "Category Deleted",
+    "category-deletion-failed": "Category deletion failed",
+    "category-filter": "Category Filter",
+    "category-update-failed": "Category update failed",
+    "category-updated": "Category updated",
+    "uncategorized-count": "Uncategorized {count}",
+  },
+  events: {
+    "apprise-url": "Apprise URL",
+    database: "Database",
+    "delete-event": "Delete Event",
+    "new-notification-form-description":
+      "Mealie uses the Apprise library to generate notifications. They offer many options for services to use for notifications. Refer to their wiki for a comprehensive guide on how to create the URL for your service. If available, selecting the type of your notification may include extra features.",
+    "new-version": "New version available!",
+    notification: "Notification",
+    refresh: "Refresh",
+    scheduled: "Scheduled",
+    "something-went-wrong": "Something Went Wrong!",
+    "subscribed-events": "Subscribed Events",
+    "test-message-sent": "Test Message Sent",
+  },
+  general: {
+    cancel: "Cancel",
+    clear: "Clear",
+    close: "Close",
+    confirm: "Confirm",
+    "confirm-delete-generic": "Are you sure you want to delete this?",
+    copied: "Copied",
+    create: "Create",
+    created: "Created",
+    custom: "Custom",
+    dashboard: "Dashboard",
+    delete: "Delete",
+    disabled: "Disabled",
+    download: "Download",
+    edit: "Edit",
+    enabled: "Enabled",
+    exception: "Exception",
+    "failed-count": "Failed: {count}",
+    "failure-uploading-file": "Failure uploading file",
+    favorites: "Favorites",
+    "field-required": "Field Required",
+    "file-folder-not-found": "File/folder not found",
+    "file-uploaded": "File uploaded",
+    filter: "Filter",
+    friday: "Friday",
+    general: "General",
+    get: "Get",
+    home: "Home",
+    image: "Image",
+    "image-upload-failed": "Image upload failed",
+    import: "Import",
+    json: "JSON",
+    keyword: "Keyword",
+    "link-copied": "Link Copied",
+    "loading-recipes": "Loading Recipes",
+    monday: "Monday",
+    name: "Name",
+    new: "New",
+    no: "No",
+    "no-recipe-found": "No Recipe Found",
+    ok: "OK",
+    options: "Options:",
+    print: "Print",
+    random: "Random",
+    rating: "Rating",
+    recent: "Recent",
+    recipe: "Recipe",
+    recipes: "Recipes",
+    "rename-object": "Rename {0}",
+    reset: "Reset",
+    saturday: "Saturday",
+    save: "Save",
+    settings: "Settings",
+    share: "Share",
+    shuffle: "Shuffle",
+    sort: "Sort",
+    "sort-alphabetically": "Alphabetical",
+    status: "Status",
+    submit: "Submit",
+    "success-count": "Success: {count}",
+    sunday: "Sunday",
+    templates: "Templates:",
+    test: "Test",
+    themes: "Themes",
+    thursday: "Thursday",
+    token: "Token",
+    tuesday: "Tuesday",
+    type: "Type",
+    update: "Update",
+    updated: "Updated",
+    upload: "Upload",
+    url: "URL",
+    view: "View",
+    wednesday: "Wednesday",
+    yes: "Yes",
+  },
+  group: {
+    "are-you-sure-you-want-to-delete-the-group": "Are you sure you want to delete <b>{groupName}<b/>?",
+    "cannot-delete-default-group": "Cannot delete default group",
+    "cannot-delete-group-with-users": "Cannot delete group with users",
+    "confirm-group-deletion": "Confirm Group Deletion",
+    "create-group": "Create Group",
+    "error-updating-group": "Error updating group",
+    group: "Group",
+    "group-deleted": "Group deleted",
+    "group-deletion-failed": "Group deletion failed",
+    "group-id-with-value": "Group ID: {groupID}",
+    "group-name": "Group Name",
+    "group-not-found": "Group not found",
+    "group-with-value": "Group: {groupID}",
+    groups: "Groups",
+    "manage-groups": "Manage Groups",
+    "user-group": "User Group",
+    "user-group-created": "User Group Created",
+    "user-group-creation-failed": "User Group Creation Failed",
+  },
+  "meal-plan": {
+    "create-a-new-meal-plan": "Create a New Meal Plan",
+    "dinner-this-week": "Dinner This Week",
+    "dinner-today": "Dinner Today",
+    "dinner-tonight": "DINNER TONIGHT",
+    "edit-meal-plan": "Edit Meal Plan",
+    "end-date": "End Date",
+    group: "Group (Beta)",
+    main: "Main",
+    "meal-planner": "Meal Planner",
+    "meal-plans": "Meal Plans",
+    "mealplan-categories": "MEALPLAN CATEGORIES",
+    "mealplan-created": "Mealplan created",
+    "mealplan-creation-failed": "Mealplan creation failed",
+    "mealplan-deleted": "Mealplan Deleted",
+    "mealplan-deletion-failed": "Mealplan deletion failed",
+    "mealplan-settings": "Mealplan Settings",
+    "mealplan-update-failed": "Mealplan update failed",
+    "mealplan-updated": "Mealplan Updated",
+    "no-meal-plan-defined-yet": "No meal plan defined yet",
+    "no-meal-planned-for-today": "No meal planned for today",
+    "only-recipes-with-these-categories-will-be-used-in-meal-plans":
+      "Only recipes with these categories will be used in Meal Plans",
+    planner: "Planner",
+    "quick-week": "Quick Week",
+    side: "Side",
+    sides: "Sides",
+    "start-date": "Start Date",
+  },
+  migration: {
+    chowdown: {
+      description: "Migrate data from Chowdown",
+      title: "Chowdown",
+    },
+    "migration-data-removed": "Migration data removed",
+    nextcloud: {
+      description: "Migrate data from a Nextcloud Cookbook instance",
+      title: "Nextcloud Cookbook",
+    },
+    "no-migration-data-available": "No Migration Data Available",
+    "recipe-migration": "Recipe Migration",
+  },
+  "new-recipe": {
+    "bulk-add": "Bulk Add",
+    "error-details":
+      "Only websites containing ld+json or microdata can be imported by Mealie. Most major recipe websites support this data structure. If your site cannot be imported but there is json data in the log, please submit a github issue with the URL and data.",
+    "error-title": "Looks Like We Couldn't Find Anything",
+    "from-url": "Import a Recipe",
+    "github-issues": "GitHub Issues",
+    "google-ld-json-info": "Google ld+json Info",
+    "must-be-a-valid-url": "Must be a Valid URL",
+    "paste-in-your-recipe-data-each-line-will-be-treated-as-an-item-in-a-list":
+      "Paste in your recipe data. Each line will be treated as an item in a list",
+    "recipe-markup-specification": "Recipe Markup Specification",
+    "recipe-url": "Recipe URL",
+    "upload-a-recipe": "Upload a Recipe",
+    "upload-individual-zip-file": "Upload an individual .zip file exported from another Mealie instance.",
+    "url-form-hint": "Copy and paste a link from your favorite recipe website",
+    "view-scraped-data": "View Scraped Data",
+  },
+  page: {
+    "404-page-not-found": "404 Page not found",
+    "all-recipes": "All Recipes",
+    "new-page-created": "New page created",
+    page: "Page",
+    "page-creation-failed": "Page creation failed",
+    "page-deleted": "Page deleted",
+    "page-deletion-failed": "Page deletion failed",
+    "page-update-failed": "Page update failed",
+    "page-updated": "Page updated",
+    "pages-update-failed": "Pages update failed",
+    "pages-updated": "Pages updated",
+  },
+  recipe: {
+    "add-key": "Add Key",
+    "add-to-favorites": "Add to Favorites",
+    "api-extras": "API Extras",
+    calories: "Calories",
+    "calories-suffix": "calories",
+    "carbohydrate-content": "Carbohydrate",
+    categories: "Categories",
+    "comment-action": "Comment",
+    comments: "Comments",
+    "delete-confirmation": "Are you sure you want to delete this recipe?",
+    "delete-recipe": "Delete Recipe",
+    description: "Description",
+    "disable-amount": "Disable Ingredient Amounts",
+    "disable-comments": "Disable Comments",
+    "fat-content": "Fat",
+    "fiber-content": "Fiber",
+    grams: "grams",
+    ingredient: "Ingredient",
+    ingredients: "Ingredients",
+    "insert-section": "Insert Section",
+    instructions: "Instructions",
+    "key-name-required": "Key Name Required",
+    "landscape-view-coming-soon": "Landscape View (Coming Soon)",
+    milligrams: "milligrams",
+    "new-key-name": "New Key Name",
+    "no-white-space-allowed": "No White Space Allowed",
+    note: "Note",
+    nutrition: "Nutrition",
+    "object-key": "Object Key",
+    "object-value": "Object Value",
+    "original-url": "Original URL",
+    "perform-time": "Cook Time",
+    "prep-time": "Prep Time",
+    "protein-content": "Protein",
+    "public-recipe": "Public Recipe",
+    "recipe-created": "Recipe created",
+    "recipe-creation-failed": "Recipe creation failed",
+    "recipe-deleted": "Recipe deleted",
+    "recipe-image": "Recipe Image",
+    "recipe-image-updated": "Recipe image updated",
+    "recipe-name": "Recipe Name",
+    "recipe-settings": "Recipe Settings",
+    "recipe-update-failed": "Recipe update failed",
+    "recipe-updated": "Recipe updated",
+    "remove-from-favorites": "Remove from Favorites",
+    "remove-section": "Remove Section",
+    "save-recipe-before-use": "Save recipe before use",
+    "section-title": "Section Title",
+    servings: "Servings",
+    "share-recipe-message": "I wanted to share my {0} recipe with you.",
+    "show-nutrition-values": "Show Nutrition Values",
+    "sodium-content": "Sodium",
+    "step-index": "Step: {step}",
+    "sugar-content": "Sugar",
+    title: "Title",
+    "total-time": "Total Time",
+    "unable-to-delete-recipe": "Unable to Delete Recipe",
+  },
+  reicpe: {
+    "no-recipe": "No Recipe",
+  },
+  search: {
+    "advanced-search": "Advanced Search",
+    and: "and",
+    exclude: "Exclude",
+    include: "Include",
+    "max-results": "Max Results",
+    or: "Or",
+    results: "Results",
+    search: "Search",
+    "search-mealie": "Search Mealie (press /)",
+    "search-placeholder": "Search...",
+    "tag-filter": "Tag Filter",
+  },
+  settings: {
+    "add-a-new-theme": "Add a New Theme",
+    "admin-settings": "Admin Settings",
+    backup: {
+      "backup-created-at-response-export_path": "Backup Created at {path}",
+      "backup-deleted": "Backup deleted",
+      "backup-tag": "Backup Tag",
+      "create-heading": "Create a Backup",
+      "delete-backup": "Delete Backup",
+      "error-creating-backup-see-log-file": "Error Creating Backup. See Log File",
+      "full-backup": "Full Backup",
+      "import-summary": "Import Summary",
+      "partial-backup": "Partial Backup",
+      "unable-to-delete-backup": "Unable to Delete Backup.",
+    },
+    "backup-and-exports": "Backups",
+    "change-password": "Change Password",
+    current: "Version:",
+    "custom-pages": "Custom Pages",
+    "edit-page": "Edit Page",
+    events: "Events",
+    "first-day-of-week": "First day of the week",
+    "group-settings-updated": "Group Settings Updated",
+    homepage: {
+      "all-categories": "All Categories",
+      "card-per-section": "Card Per Section",
+      "home-page": "Home Page",
+      "home-page-sections": "Home Page Sections",
+      "show-recent": "Show Recent",
+    },
+    language: "Language",
+    latest: "Latest",
+    "local-api": "Local API",
+    "locale-settings": "Locale settings",
+    migrations: "Migrations",
+    "new-page": "New Page",
+    notify: "Notify",
+    organize: "Organize",
+    "page-name": "Page Name",
+    pages: "Pages",
+    profile: "Profile",
+    "remove-existing-entries-matching-imported-entries": "Remove existing entries matching imported entries",
+    "set-new-time": "Set New Time",
+    "settings-update-failed": "Settings update failed",
+    "settings-updated": "Settings updated",
+    "site-settings": "Site Settings",
+    theme: {
+      accent: "Accent",
+      dark: "Dark",
+      "default-to-system": "Default to system",
+      error: "Error",
+      "error-creating-theme-see-log-file": "Error creating theme. See log file.",
+      "error-deleting-theme": "Error deleting theme",
+      "error-updating-theme": "Error updating theme",
+      info: "Info",
+      light: "Light",
+      primary: "Primary",
+      secondary: "Secondary",
+      success: "Success",
+      "switch-to-dark-mode": "Switch to dark mode",
+      "switch-to-light-mode": "Switch to light mode",
+      "theme-deleted": "Theme deleted",
+      "theme-name": "Theme Name",
+      "theme-name-is-required": "Theme Name is required.",
+      "theme-saved": "Theme Saved",
+      "theme-updated": "Theme updated",
+      warning: "Warning",
+    },
+    token: {
+      "active-tokens": "ACTIVE TOKENS",
+      "api-token": "API Token",
+      "api-tokens": "API Tokens",
+      "copy-this-token-for-use-with-an-external-application-this-token-will-not-be-viewable-again":
+        "Copy this token for use with an external application. This token will not be viewable again.",
+      "create-an-api-token": "Create an API Token",
+      "token-name": "Token Name",
+    },
+    toolbox: {
+      "assign-all": "Assign All",
+      "bulk-assign": "Bulk Assign",
+      "new-name": "New Name",
+      "no-unused-items": "No Unused Items",
+      "recipes-affected": "No Recipes Affected|One Recipe Affected|{count} Recipes Affected",
+      "remove-unused": "Remove Unused",
+      "title-case-all": "Title Case All",
+      toolbox: "Toolbox",
+      unorganized: "Unorganized",
+    },
+    webhooks: {
+      "test-webhooks": "Test Webhooks",
+      "the-urls-listed-below-will-recieve-webhooks-containing-the-recipe-data-for-the-meal-plan-on-its-scheduled-day-currently-webhooks-will-execute-at":
+        "The URLs listed below will receive webhooks containing the recipe data for the meal plan on it's scheduled day. Currently Webhooks will execute at",
+      "webhook-url": "Webhook URL",
+      "webhooks-caps": "WEBHOOKS",
+    },
+  },
+  "shopping-list": {
+    "all-lists": "All Lists",
+    "create-shopping-list": "Create Shopping List",
+    "from-recipe": "From Recipe",
+    "list-name": "List Name",
+    "new-list": "New List",
+    quantity: "Quantity: {0}",
+    "shopping-list": "Shopping List",
+    "shopping-lists": "Shopping Lists",
+  },
+  sidebar: {
+    "all-recipes": "All Recipes",
+    categories: "Categories",
+    dashboard: "Dashboard",
+    "home-page": "Home Page",
+    "manage-users": "Manage Users",
+    migrations: "Migrations",
+    profile: "Profile",
+    search: "Search",
+    "site-settings": "Site Settings",
+    tags: "Tags",
+    toolbox: "Toolbox",
+  },
+  signup: {
+    "error-signing-up": "Error Signing Up",
+    "sign-up": "Sign Up",
+    "sign-up-link-created": "Sign up link created",
+    "sign-up-link-creation-failed": "Sign up link creation failed",
+    "sign-up-links": "Sign Up Links",
+    "sign-up-token-deleted": "Sign Up Token Deleted",
+    "sign-up-token-deletion-failed": "Sign up token deletion failed",
+    "welcome-to-mealie":
+      "Welcome to Mealie! To become a user of this instance you are required to have a valid invitation link. If you haven't recieved an invitation you are unable to sign-up. To recieve a link, contact the sites administrator.",
+  },
+  tag: {
+    "tag-created": "Tag created",
+    "tag-creation-failed": "Tag creation failed",
+    "tag-deleted": "Tag deleted",
+    "tag-deletion-failed": "Tag deletion failed",
+    "tag-update-failed": "Tag update failed",
+    "tag-updated": "Tag updated",
+    tags: "Tags",
+    "untagged-count": "Untagged {count}",
+  },
+  user: {
+    admin: "Admin",
+    "are-you-sure-you-want-to-delete-the-link": "Are you sure you want to delete the link <b>{link}<b/>?",
+    "are-you-sure-you-want-to-delete-the-user":
+      "Are you sure you want to delete the user <b>{activeName} ID: {activeId}<b/>?",
+    "confirm-link-deletion": "Confirm Link Deletion",
+    "confirm-password": "Confirm Password",
+    "confirm-user-deletion": "Confirm User Deletion",
+    "could-not-validate-credentials": "Could Not Validate Credentials",
+    "create-link": "Create Link",
+    "create-user": "Create User",
+    "current-password": "Current Password",
+    "e-mail-must-be-valid": "E-mail must be valid",
+    "edit-user": "Edit User",
+    email: "Email",
+    "error-cannot-delete-super-user": "Error! Cannot Delete Super User",
+    "existing-password-does-not-match": "Existing password does not match",
+    "full-name": "Full Name",
+    "link-id": "Link ID",
+    "link-name": "Link Name",
+    login: "Login",
+    logout: "Logout",
+    "manage-users": "Manage Users",
+    "new-password": "New Password",
+    "new-user": "New User",
+    password: "Password",
+    "password-has-been-reset-to-the-default-password": "Password has been reset to the default password",
+    "password-must-match": "Password must match",
+    "password-reset-failed": "Password reset failed",
+    "password-updated": "Password updated",
+    "reset-password": "Reset Password",
+    "sign-in": "Sign in",
+    "total-mealplans": "Total MealPlans",
+    "total-users": "Total Users",
+    "upload-photo": "Upload Photo",
+    "use-8-characters-or-more-for-your-password": "Use 8 characters or more for your password",
+    user: "User",
+    "user-created": "User created",
+    "user-creation-failed": "User creation failed",
+    "user-deleted": "User deleted",
+    "user-id": "User ID",
+    "user-id-with-value": "User ID: {id}",
+    "user-password": "User Password",
+    "user-successfully-logged-in": "User Successfully Logged In",
+    "user-update-failed": "User update failed",
+    "user-updated": "User updated",
+    username: "Username",
+    users: "Users",
+    "users-header": "USERS",
+    "webhook-time": "Webhook Time",
+    "webhooks-enabled": "Webhooks Enabled",
+    "you-are-not-allowed-to-create-a-user": "You are not allowed to create a user",
+    "you-are-not-allowed-to-delete-this-user": "You are not allowed to delete this user",
+  },
+};
diff --git a/frontend.old/src/locales/messages/en-US.json b/frontend/lang/messages/en-US.json
similarity index 100%
rename from frontend.old/src/locales/messages/en-US.json
rename to frontend/lang/messages/en-US.json
diff --git a/frontend.old/src/locales/messages/es-ES.json b/frontend/lang/messages/es-ES.json
similarity index 100%
rename from frontend.old/src/locales/messages/es-ES.json
rename to frontend/lang/messages/es-ES.json
diff --git a/frontend.old/src/locales/messages/fi-FI.json b/frontend/lang/messages/fi-FI.json
similarity index 100%
rename from frontend.old/src/locales/messages/fi-FI.json
rename to frontend/lang/messages/fi-FI.json
diff --git a/frontend.old/src/locales/messages/fr-FR.json b/frontend/lang/messages/fr-FR.json
similarity index 100%
rename from frontend.old/src/locales/messages/fr-FR.json
rename to frontend/lang/messages/fr-FR.json
diff --git a/frontend.old/src/locales/messages/he-IL.json b/frontend/lang/messages/he-IL.json
similarity index 100%
rename from frontend.old/src/locales/messages/he-IL.json
rename to frontend/lang/messages/he-IL.json
diff --git a/frontend.old/src/locales/messages/hu-HU.json b/frontend/lang/messages/hu-HU.json
similarity index 100%
rename from frontend.old/src/locales/messages/hu-HU.json
rename to frontend/lang/messages/hu-HU.json
diff --git a/frontend.old/src/locales/messages/it-IT.json b/frontend/lang/messages/it-IT.json
similarity index 100%
rename from frontend.old/src/locales/messages/it-IT.json
rename to frontend/lang/messages/it-IT.json
diff --git a/frontend.old/src/locales/messages/ja-JP.json b/frontend/lang/messages/ja-JP.json
similarity index 100%
rename from frontend.old/src/locales/messages/ja-JP.json
rename to frontend/lang/messages/ja-JP.json
diff --git a/frontend.old/src/locales/messages/ko-KR.json b/frontend/lang/messages/ko-KR.json
similarity index 100%
rename from frontend.old/src/locales/messages/ko-KR.json
rename to frontend/lang/messages/ko-KR.json
diff --git a/frontend.old/src/locales/messages/nl-NL.json b/frontend/lang/messages/nl-NL.json
similarity index 100%
rename from frontend.old/src/locales/messages/nl-NL.json
rename to frontend/lang/messages/nl-NL.json
diff --git a/frontend.old/src/locales/messages/no-NO.json b/frontend/lang/messages/no-NO.json
similarity index 100%
rename from frontend.old/src/locales/messages/no-NO.json
rename to frontend/lang/messages/no-NO.json
diff --git a/frontend.old/src/locales/messages/pl-PL.json b/frontend/lang/messages/pl-PL.json
similarity index 100%
rename from frontend.old/src/locales/messages/pl-PL.json
rename to frontend/lang/messages/pl-PL.json
diff --git a/frontend.old/src/locales/messages/pt-BR.json b/frontend/lang/messages/pt-BR.json
similarity index 100%
rename from frontend.old/src/locales/messages/pt-BR.json
rename to frontend/lang/messages/pt-BR.json
diff --git a/frontend.old/src/locales/messages/pt-PT.json b/frontend/lang/messages/pt-PT.json
similarity index 100%
rename from frontend.old/src/locales/messages/pt-PT.json
rename to frontend/lang/messages/pt-PT.json
diff --git a/frontend.old/src/locales/messages/ro-RO.json b/frontend/lang/messages/ro-RO.json
similarity index 100%
rename from frontend.old/src/locales/messages/ro-RO.json
rename to frontend/lang/messages/ro-RO.json
diff --git a/frontend.old/src/locales/messages/ru-RU.json b/frontend/lang/messages/ru-RU.json
similarity index 100%
rename from frontend.old/src/locales/messages/ru-RU.json
rename to frontend/lang/messages/ru-RU.json
diff --git a/frontend.old/src/locales/messages/sr-SP.json b/frontend/lang/messages/sr-SP.json
similarity index 100%
rename from frontend.old/src/locales/messages/sr-SP.json
rename to frontend/lang/messages/sr-SP.json
diff --git a/frontend.old/src/locales/messages/sv-SE.json b/frontend/lang/messages/sv-SE.json
similarity index 100%
rename from frontend.old/src/locales/messages/sv-SE.json
rename to frontend/lang/messages/sv-SE.json
diff --git a/frontend.old/src/locales/messages/tr-TR.json b/frontend/lang/messages/tr-TR.json
similarity index 100%
rename from frontend.old/src/locales/messages/tr-TR.json
rename to frontend/lang/messages/tr-TR.json
diff --git a/frontend.old/src/locales/messages/uk-UA.json b/frontend/lang/messages/uk-UA.json
similarity index 100%
rename from frontend.old/src/locales/messages/uk-UA.json
rename to frontend/lang/messages/uk-UA.json
diff --git a/frontend.old/src/locales/messages/vi-VN.json b/frontend/lang/messages/vi-VN.json
similarity index 100%
rename from frontend.old/src/locales/messages/vi-VN.json
rename to frontend/lang/messages/vi-VN.json
diff --git a/frontend.old/src/locales/messages/zh-CN.json b/frontend/lang/messages/zh-CN.json
similarity index 100%
rename from frontend.old/src/locales/messages/zh-CN.json
rename to frontend/lang/messages/zh-CN.json
diff --git a/frontend.old/src/locales/messages/zh-TW.json b/frontend/lang/messages/zh-TW.json
similarity index 100%
rename from frontend.old/src/locales/messages/zh-TW.json
rename to frontend/lang/messages/zh-TW.json
diff --git a/frontend/layouts/admin.vue b/frontend/layouts/admin.vue
index e2288e4ace08..7c7724d80782 100644
--- a/frontend/layouts/admin.vue
+++ b/frontend/layouts/admin.vue
@@ -1,17 +1,96 @@
 <template>
-  <v-app dark> </v-app>
+  <v-app dark>
+    <!-- <TheSnackbar /> -->
+
+    <AppSidebar
+      v-model="sidebar"
+      absolute
+      :top-link="topLinks"
+      :secondary-links="$auth.user.admin ? adminLinks : null"
+      :bottom-links="$auth.user.admin ? bottomLinks : null"
+      :user="{ data: true }"
+      @input="sidebar = !sidebar"
+    />
+
+    <AppHeader>
+      <v-btn icon @click.stop="sidebar = !sidebar">
+        <v-icon> {{ $globals.icons.menu }}</v-icon>
+      </v-btn>
+    </AppHeader>
+    <v-main>
+      <v-scroll-x-transition>
+        <Nuxt />
+      </v-scroll-x-transition>
+    </v-main>
+  </v-app>
 </template>
   
 
 <script lang="ts">
-import { defineComponent } from '@nuxtjs/composition-api'
+import { defineComponent } from "@nuxtjs/composition-api";
+import AppHeader from "@/components/Layout/AppHeader.vue";
+import AppSidebar from "@/components/Layout/AppSidebar.vue";
 
 export default defineComponent({
+  components: { AppHeader, AppSidebar },
+  middleware: "auth",
+  auth: true,
   setup() {
-    return {}
-  }
-})
+    return {};
+  },
+  data() {
+    return {
+      sidebar: null,
+      topLinks: [
+        {
+          icon: this.$globals.icons.user,
+          to: "/user/profile",
+          title: this.$t("sidebar.profile"),
+        },
+      ],
+      adminLinks: [
+        {
+          icon: this.$globals.icons.viewDashboard,
+          to: "/admin/dashboard",
+          title: this.$t("sidebar.dashboard"),
+        },
+        {
+          icon: this.$globals.icons.cog,
+          to: "/admin/site-settings",
+          title: this.$t("sidebar.site-settings"),
+        },
+        {
+          icon: this.$globals.icons.tools,
+          to: "/admin/toolbox",
+          title: this.$t("sidebar.toolbox"),
+        },
+        {
+          icon: this.$globals.icons.group,
+          to: "/admin/manage-users",
+          title: this.$t("sidebar.manage-users"),
+        },
+        {
+          icon: this.$globals.icons.import,
+          to: "/admin/migrations",
+          title: this.$t("sidebar.migrations"),
+        },
+      ],
+      bottomLinks: [
+        {
+          icon: this.$globals.icons.heart,
+          title: this.$t("about.support"),
+          href: "https://github.com/sponsors/hay-kot",
+        },
+        {
+          icon: this.$globals.icons.information,
+          title: this.$t("about.about"),
+          to: "/admin/about",
+        },
+      ],
+    };
+  },
+});
 </script>
       
       <style scoped>
-</style>
\ No newline at end of file
+</style>+
\ No newline at end of file
diff --git a/frontend/layouts/basic.vue b/frontend/layouts/basic.vue
new file mode 100644
index 000000000000..b8a1c407ec09
--- /dev/null
+++ b/frontend/layouts/basic.vue
@@ -0,0 +1,30 @@
+<template>
+  <v-app dark>
+    <!-- <TheSnackbar /> -->
+
+    <AppHeader :menu="false"> </AppHeader>
+    <v-main>
+      <v-scroll-x-transition>
+        <Nuxt />
+      </v-scroll-x-transition>
+    </v-main>
+    <AppFooter />
+  </v-app>
+</template>
+  
+
+<script lang="ts">
+import { defineComponent } from "@nuxtjs/composition-api";
+import AppFooter from "@/components/Layout/AppFooter.vue";
+import AppHeader from "@/components/Layout/AppHeader.vue";
+
+export default defineComponent({
+  components: { AppHeader, AppFooter },
+  setup() {
+    return {};
+  },
+});
+</script>
+      
+      <style scoped>
+</style>+
\ No newline at end of file
diff --git a/frontend/layouts/default.vue b/frontend/layouts/default.vue
index 2e6308df6ee1..f0fb6cee2e09 100644
--- a/frontend/layouts/default.vue
+++ b/frontend/layouts/default.vue
@@ -1,117 +1,71 @@
 <template>
   <v-app dark>
-    <v-navigation-drawer
-      v-model="drawer"
-      :mini-variant="miniVariant"
-      :clipped="clipped"
-      fixed
-      app
-    >
-      <v-list>
-        <v-list-item
-          v-for="(item, i) in items"
-          :key="i"
-          :to="item.to"
-          router
-          exact
-        >
-          <v-list-item-action>
-            <v-icon>{{ item.icon }}</v-icon>
-          </v-list-item-action>
-          <v-list-item-content>
-            <v-list-item-title v-text="item.title" />
-          </v-list-item-content>
-        </v-list-item>
-      </v-list>
-    </v-navigation-drawer>
-    <v-app-bar
-      :clipped-left="clipped"
-      fixed
-      app
-    >
-      <v-app-bar-nav-icon @click.stop="drawer = !drawer" />
-      <v-btn
-        icon
-        @click.stop="miniVariant = !miniVariant"
-      >
-        <v-icon>mdi-{{ `chevron-${miniVariant ? 'right' : 'left'}` }}</v-icon>
+    <!-- <TheSnackbar /> -->
+
+    <AppSidebar v-model="sidebar" absolute :top-link="topLinks" @input="sidebar = !sidebar" />
+
+    <AppHeader>
+      <v-btn icon @click.stop="sidebar = !sidebar">
+        <v-icon> {{ $globals.icons.menu }}</v-icon>
       </v-btn>
-      <v-btn
-        icon
-        @click.stop="clipped = !clipped"
-      >
-        <v-icon>mdi-application</v-icon>
-      </v-btn>
-      <v-btn
-        icon
-        @click.stop="fixed = !fixed"
-      >
-        <v-icon>mdi-minus</v-icon>
-      </v-btn>
-      <v-toolbar-title v-text="title" />
-      <v-spacer />
-      <v-btn
-        icon
-        @click.stop="rightDrawer = !rightDrawer"
-      >
-        <v-icon>mdi-menu</v-icon>
-      </v-btn>
-    </v-app-bar>
+    </AppHeader>
     <v-main>
-      <v-container>
+      <v-scroll-x-transition>
         <Nuxt />
-      </v-container>
+      </v-scroll-x-transition>
     </v-main>
-    <v-navigation-drawer
-      v-model="rightDrawer"
-      :right="right"
-      temporary
-      fixed
-    >
-      <v-list>
-        <v-list-item @click.native="right = !right">
-          <v-list-item-action>
-            <v-icon light>
-              mdi-repeat
-            </v-icon>
-          </v-list-item-action>
-          <v-list-item-title>Switch drawer (click me)</v-list-item-title>
-        </v-list-item>
-      </v-list>
-    </v-navigation-drawer>
-    <v-footer
-      :absolute="!fixed"
-      app
-    >
-      <span>&copy; {{ new Date().getFullYear() }}</span>
-    </v-footer>
+    <AppFloatingButton absolute />
   </v-app>
 </template>
+  
 
-<script>
-export default {
-  data () {
+<script lang="ts">
+import { defineComponent } from "@nuxtjs/composition-api";
+import AppHeader from "@/components/Layout/AppHeader.vue";
+import AppSidebar from "@/components/Layout/AppSidebar.vue";
+import AppFloatingButton from "@/components/Layout/AppFloatingButton.vue";
+
+export default defineComponent({
+  components: { AppHeader, AppSidebar, AppFloatingButton },
+  // @ts-ignore
+  middleware: process.env.PUBLIC_SITE ? null : "auth",
+  setup() {
+    return {};
+  },
+  data() {
     return {
-      clipped: false,
-      drawer: false,
-      fixed: false,
-      items: [
+      sidebar: null,
+      topLinks: [
         {
-          icon: 'mdi-apps',
-          title: 'Welcome',
-          to: '/'
+          icon: this.$globals.icons.home,
+          to: "/",
+          title: this.$t("sidebar.home-page"),
         },
         {
-          icon: 'mdi-chart-bubble',
-          title: 'Inspire',
-          to: '/inspire'
-        }
+          icon: this.$globals.icons.search,
+          to: "/search",
+          title: this.$t("sidebar.search"),
+        },
+        {
+          icon: this.$globals.icons.viewModule,
+          to: "/recipes/all",
+          title: this.$t("sidebar.all-recipes"),
+        },
+        {
+          icon: this.$globals.icons.tags,
+          to: "/recipes/category",
+          title: this.$t("sidebar.categories"),
+        },
+        {
+          icon: this.$globals.icons.tags,
+          to: "/recipes/tag",
+          title: this.$t("sidebar.tags"),
+        },
       ],
-      miniVariant: false,
-      right: true,
-      rightDrawer: false,
-      title: 'Vuetify.js'
-    }
-  }
-}
+    };
+  },
+});
 </script>
+      
+      <style scoped>
+</style>+
\ No newline at end of file
diff --git a/frontend/layouts/error.vue b/frontend/layouts/error.vue
index ae22f7cf04be..74027b77b73c 100644
--- a/frontend/layouts/error.vue
+++ b/frontend/layouts/error.vue
@@ -6,35 +6,32 @@
     <h1 v-else>
       {{ otherError }}
     </h1>
-    <NuxtLink to="/">
-      Home page
-    </NuxtLink>
+    <NuxtLink to="/"> Home page </NuxtLink>
   </v-app>
 </template>
 
 <script>
 export default {
-  layout: 'empty',
+  layout: "empty",
   props: {
     error: {
       type: Object,
-      default: null
-    }
+      default: null,
+    },
   },
-  data () {
+  data() {
     return {
-      pageNotFound: '404 Not Found',
-      otherError: 'An error occurred'
-    }
+      pageNotFound: "404 Not Found",
+      otherError: "An error occurred",
+    };
   },
-  head () {
-    const title =
-      this.error.statusCode === 404 ? this.pageNotFound : this.otherError
+  head() {
+    const title = this.error.statusCode === 404 ? this.pageNotFound : this.otherError;
     return {
-      title
-    }
-  }
-}
+      title,
+    };
+  },
+};
 </script>
 
 <style scoped>
diff --git a/frontend/nuxt.config.js b/frontend/nuxt.config.js
index adcf373b5095..7e4adce336f4 100644
--- a/frontend/nuxt.config.js
+++ b/frontend/nuxt.config.js
@@ -1,28 +1,27 @@
-import colors from 'vuetify/es5/util/colors'
-
 export default {
   // Global page headers: https://go.nuxtjs.dev/config-head
   head: {
-    titleTemplate: '%s - frontend',
-    title: 'frontend',
+    titleTemplate: "%s - frontend",
+    title: "frontend",
     meta: [
-      { charset: 'utf-8' },
-      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
-      { hid: 'description', name: 'description', content: '' },
-      { name: 'format-detection', content: 'telephone=no' }
+      { charset: "utf-8" },
+      { name: "viewport", content: "width=device-width, initial-scale=1" },
+      { hid: "description", name: "description", content: "" },
+      { name: "format-detection", content: "telephone=no" },
     ],
-    link: [
-      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
-    ]
+    link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }],
+  },
+
+  layoutTransition: {
+    name: "layout",
+    mode: "out-in",
   },
 
   // Global CSS: https://go.nuxtjs.dev/config-css
-  css: [
-  ],
+  css: [{ src: "~/assets/main.css" }, { src: "~/assets/style-overrides.scss" }],
 
   // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
-  plugins: [
-  ],
+  plugins: ["~/plugins/globals.js"],
 
   // Auto import components: https://go.nuxtjs.dev/config-components
   components: true,
@@ -30,49 +29,124 @@ export default {
   // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
   buildModules: [
     // https://go.nuxtjs.dev/typescript
-    '@nuxt/typescript-build',
+    "@nuxt/typescript-build",
     // https://go.nuxtjs.dev/vuetify
-    '@nuxtjs/vuetify',
+    "@nuxtjs/vuetify",
+    // https://composition-api.nuxtjs.org/getting-started/setup
+    "@nuxtjs/composition-api/module",
   ],
 
+  env: {
+    PUBLIC_SITE: process.env.PUBLIC_SITE || true,
+    BASE_URL: process.env.BASE_URL || "",
+    ALLOW_SIGNUP: process.env.ALLOW_SIGNUP || true,
+  },
+
   // Modules: https://go.nuxtjs.dev/config-modules
   modules: [
     // https://go.nuxtjs.dev/axios
-    '@nuxtjs/axios',
+    "@nuxtjs/axios",
     // https://go.nuxtjs.dev/pwa
-    '@nuxtjs/pwa',
+    "@nuxtjs/pwa",
+    // https://i18n.nuxtjs.org/setup
+    "nuxt-i18n",
+    // https://auth.nuxtjs.org/guide/setup
+    "@nuxtjs/auth-next",
+    // https://github.com/nuxt-community/proxy-module
+    "@nuxtjs/proxy",
   ],
 
+  proxy: {
+    // see Proxy section
+    "/api": {
+      changeOrigin: true,
+      target: "http://localhost:9000",
+    },
+  },
+
+  auth: {
+    redirect: {
+      login: "/user/login",
+      logout: "/",
+      callback: "/login",
+      home: "/",
+    },
+    // Options
+    strategies: {
+      local: {
+        token: {
+          property: "access_token",
+          global: true,
+          // required: true,
+          // type: 'Bearer'
+        },
+        user: {
+          property: "",
+          autoFetch: true,
+        },
+        endpoints: {
+          login: {
+            url: "/api/auth/token",
+            method: "post",
+            propertyName: "access_token",
+          },
+          refresh: { url: "/api/auth/refresh", method: "post" },
+          user: { url: "/api/users/self", method: "get" },
+        },
+      },
+    },
+  },
+
+  i18n: {
+    locales: [
+      {
+        code: "en-US",
+        file: "en-US.js",
+      },
+    ],
+    lazy: true,
+    langDir: "lang/messages",
+    defaultLocale: "en-US",
+  },
+
   // Axios module configuration: https://go.nuxtjs.dev/config-axios
   axios: {},
 
   // PWA module configuration: https://go.nuxtjs.dev/pwa
   pwa: {
     manifest: {
-      lang: 'en'
-    }
+      lang: "en",
+    },
   },
 
   // Vuetify module configuration: https://go.nuxtjs.dev/config-vuetify
   vuetify: {
-    customVariables: ['~/assets/variables.scss'],
+    customVariables: ["~/assets/variables.scss"],
     theme: {
-      dark: true,
+      dark: false,
       themes: {
         dark: {
-          primary: colors.blue.darken2,
-          accent: colors.grey.darken3,
-          secondary: colors.amber.darken3,
-          info: colors.teal.lighten1,
-          warning: colors.amber.base,
-          error: colors.deepOrange.accent4,
-          success: colors.green.accent3
-        }
-      }
-    }
+          primary: "#E58325",
+          accent: "#00457A",
+          secondary: "#973542",
+          success: "#43A047",
+          info: "#4990BA",
+          warning: "#FF4081",
+          error: "#EF5350",
+        },
+        light: {
+          primary: "#E58325",
+          accent: "#00457A",
+          secondary: "#973542",
+          success: "#43A047",
+          info: "#4990BA",
+          warning: "#FF4081",
+          error: "#EF5350",
+        },
+      },
+    },
   },
 
   // Build Configuration: https://go.nuxtjs.dev/config-build
-  build: {
-  }
-}
+  build: {},
+};
diff --git a/frontend/package.json b/frontend/package.json
index f4f7a083263e..7e4f5dfe8ed9 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -15,11 +15,17 @@
     "*.{js,vue}": "eslint"
   },
   "dependencies": {
+    "@adapttive/vue-markdown": "^4.0.1",
+    "@mdi/js": "^5.9.55",
+    "@nuxtjs/auth-next": "5.0.0-1624817847.21691f1",
     "@nuxtjs/axios": "^5.13.6",
+    "@nuxtjs/proxy": "^2.1.0",
     "@nuxtjs/pwa": "^3.3.5",
     "@vueuse/core": "^5.2.0",
     "core-js": "^3.15.1",
     "nuxt": "^2.15.7",
+    "nuxt-i18n": "^6.28.0",
+    "vuedraggable": "^2.24.3",
     "vuetify": "^2.5.5"
   },
   "devDependencies": {
@@ -33,6 +39,7 @@
     "eslint": "^7.29.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-nuxt": "^2.0.0",
+    "eslint-plugin-prettier": "^3.4.0",
     "eslint-plugin-vue": "^7.12.1",
     "husky": "^6.0.0",
     "lint-staged": "^10.5.4",
diff --git a/frontend/pages/admin/about.vue b/frontend/pages/admin/about.vue
index 546e387fe497..a39f31c72bf6 100644
--- a/frontend/pages/admin/about.vue
+++ b/frontend/pages/admin/about.vue
@@ -3,13 +3,14 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from '@nuxtjs/composition-api'
+import { defineComponent } from "@nuxtjs/composition-api";
 
 export default defineComponent({
+  layout: "admin",
   setup() {
-    return {}
-  }
-})
+    return {};
+  },
+});
 </script>
 
 <style scoped>
diff --git a/frontend/pages/admin/dashboard.vue b/frontend/pages/admin/dashboard.vue
index f65b2c8a525b..a39f31c72bf6 100644
--- a/frontend/pages/admin/dashboard.vue
+++ b/frontend/pages/admin/dashboard.vue
@@ -1,16 +1,17 @@
 <template>
-    <div></div>
-  </template>
-  
-  <script lang="ts">
-  import { defineComponent } from '@nuxtjs/composition-api'
-  
-  export default defineComponent({
-    setup() {
-      return {}
-    }
-  })
-  </script>
-  
-  <style scoped>
-  </style>
\ No newline at end of file
+  <div></div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "@nuxtjs/composition-api";
+
+export default defineComponent({
+  layout: "admin",
+  setup() {
+    return {};
+  },
+});
+</script>
+
+<style scoped>
+</style>
\ No newline at end of file
diff --git a/frontend/pages/admin/manage-users.vue b/frontend/pages/admin/manage-users.vue
index f65b2c8a525b..a39f31c72bf6 100644
--- a/frontend/pages/admin/manage-users.vue
+++ b/frontend/pages/admin/manage-users.vue
@@ -1,16 +1,17 @@
 <template>
-    <div></div>
-  </template>
-  
-  <script lang="ts">
-  import { defineComponent } from '@nuxtjs/composition-api'
-  
-  export default defineComponent({
-    setup() {
-      return {}
-    }
-  })
-  </script>
-  
-  <style scoped>
-  </style>
\ No newline at end of file
+  <div></div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "@nuxtjs/composition-api";
+
+export default defineComponent({
+  layout: "admin",
+  setup() {
+    return {};
+  },
+});
+</script>
+
+<style scoped>
+</style>
\ No newline at end of file
diff --git a/frontend/pages/admin/migrations.vue b/frontend/pages/admin/migrations.vue
index f65b2c8a525b..a39f31c72bf6 100644
--- a/frontend/pages/admin/migrations.vue
+++ b/frontend/pages/admin/migrations.vue
@@ -1,16 +1,17 @@
 <template>
-    <div></div>
-  </template>
-  
-  <script lang="ts">
-  import { defineComponent } from '@nuxtjs/composition-api'
-  
-  export default defineComponent({
-    setup() {
-      return {}
-    }
-  })
-  </script>
-  
-  <style scoped>
-  </style>
\ No newline at end of file
+  <div></div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "@nuxtjs/composition-api";
+
+export default defineComponent({
+  layout: "admin",
+  setup() {
+    return {};
+  },
+});
+</script>
+
+<style scoped>
+</style>
\ No newline at end of file
diff --git a/frontend/pages/admin/site-settings.vue b/frontend/pages/admin/site-settings.vue
index f65b2c8a525b..a39f31c72bf6 100644
--- a/frontend/pages/admin/site-settings.vue
+++ b/frontend/pages/admin/site-settings.vue
@@ -1,16 +1,17 @@
 <template>
-    <div></div>
-  </template>
-  
-  <script lang="ts">
-  import { defineComponent } from '@nuxtjs/composition-api'
-  
-  export default defineComponent({
-    setup() {
-      return {}
-    }
-  })
-  </script>
-  
-  <style scoped>
-  </style>
\ No newline at end of file
+  <div></div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "@nuxtjs/composition-api";
+
+export default defineComponent({
+  layout: "admin",
+  setup() {
+    return {};
+  },
+});
+</script>
+
+<style scoped>
+</style>
\ No newline at end of file
diff --git a/frontend/pages/admin/toolbox.vue b/frontend/pages/admin/toolbox.vue
index d0cd7424ba9b..a39f31c72bf6 100644
--- a/frontend/pages/admin/toolbox.vue
+++ b/frontend/pages/admin/toolbox.vue
@@ -1,16 +1,17 @@
 <template>
   <div></div>
 </template>
-  
-  <script lang="ts">
-import { defineComponent } from '@nuxtjs/composition-api'
+
+<script lang="ts">
+import { defineComponent } from "@nuxtjs/composition-api";
 
 export default defineComponent({
+  layout: "admin",
   setup() {
-    return {}
-  }
-})
+    return {};
+  },
+});
 </script>
-  
-  <style scoped>
+
+<style scoped>
 </style>
\ No newline at end of file
diff --git a/frontend/pages/index.vue b/frontend/pages/index.vue
index 411c8fc22c68..3d3d96a42a34 100644
--- a/frontend/pages/index.vue
+++ b/frontend/pages/index.vue
@@ -1,16 +1,28 @@
 <template>
-  <div></div>
+  <v-container>
+    <RecipeCardSection :recipes="recipes"></RecipeCardSection>
+  </v-container>
 </template>
   
   <script lang="ts">
-import { defineComponent } from "@nuxtjs/composition-api";
+import { defineComponent, onMounted, ref } from "@nuxtjs/composition-api";
+import RecipeCardSection from "~/components/Domain/Recipe/RecipeCardSection.vue";
+import { useApi } from "~/composables/use-api";
+import { Recipe } from "~/types/api-types/admin";
 
 export default defineComponent({
+  components: { RecipeCardSection },
   setup() {
-    return {};
+    const api = useApi();
+
+    const recipes = ref<Recipe[] | null>([]);
+    onMounted(async () => {
+      const { data } = await api.recipes.getAll();
+      recipes.value = data;
+    });
+
+    return { api, recipes };
   },
 });
 </script>
-  
-  <style scoped>
-</style>
\ No newline at end of file
+  
\ No newline at end of file
diff --git a/frontend/pages/meal-plan/planner.vue b/frontend/pages/meal-plan/planner.vue
index f65b2c8a525b..bb6aebe3f129 100644
--- a/frontend/pages/meal-plan/planner.vue
+++ b/frontend/pages/meal-plan/planner.vue
@@ -3,7 +3,7 @@
   </template>
   
   <script lang="ts">
-  import { defineComponent } from '@nuxtjs/composition-api'
+  import { defineComponent } from "@nuxtjs/composition-api"
   
   export default defineComponent({
     setup() {
diff --git a/frontend/pages/meal-plan/this-week.vue b/frontend/pages/meal-plan/this-week.vue
index f65b2c8a525b..bb6aebe3f129 100644
--- a/frontend/pages/meal-plan/this-week.vue
+++ b/frontend/pages/meal-plan/this-week.vue
@@ -3,7 +3,7 @@
   </template>
   
   <script lang="ts">
-  import { defineComponent } from '@nuxtjs/composition-api'
+  import { defineComponent } from "@nuxtjs/composition-api"
   
   export default defineComponent({
     setup() {
diff --git a/frontend/pages/recipe/_slug.vue b/frontend/pages/recipe/_slug.vue
index d0cd7424ba9b..dca13c44af16 100644
--- a/frontend/pages/recipe/_slug.vue
+++ b/frontend/pages/recipe/_slug.vue
@@ -3,7 +3,7 @@
 </template>
   
   <script lang="ts">
-import { defineComponent } from '@nuxtjs/composition-api'
+import { defineComponent } from "@nuxtjs/composition-api"
 
 export default defineComponent({
   setup() {
diff --git a/frontend/pages/recipes/all.vue b/frontend/pages/recipes/all.vue
index f65b2c8a525b..bb6aebe3f129 100644
--- a/frontend/pages/recipes/all.vue
+++ b/frontend/pages/recipes/all.vue
@@ -3,7 +3,7 @@
   </template>
   
   <script lang="ts">
-  import { defineComponent } from '@nuxtjs/composition-api'
+  import { defineComponent } from "@nuxtjs/composition-api"
   
   export default defineComponent({
     setup() {
diff --git a/frontend/pages/recipes/category.vue b/frontend/pages/recipes/category.vue
index f65b2c8a525b..bb6aebe3f129 100644
--- a/frontend/pages/recipes/category.vue
+++ b/frontend/pages/recipes/category.vue
@@ -3,7 +3,7 @@
   </template>
   
   <script lang="ts">
-  import { defineComponent } from '@nuxtjs/composition-api'
+  import { defineComponent } from "@nuxtjs/composition-api"
   
   export default defineComponent({
     setup() {
diff --git a/frontend/pages/recipes/tag.vue b/frontend/pages/recipes/tag.vue
index f65b2c8a525b..bb6aebe3f129 100644
--- a/frontend/pages/recipes/tag.vue
+++ b/frontend/pages/recipes/tag.vue
@@ -3,7 +3,7 @@
   </template>
   
   <script lang="ts">
-  import { defineComponent } from '@nuxtjs/composition-api'
+  import { defineComponent } from "@nuxtjs/composition-api"
   
   export default defineComponent({
     setup() {
diff --git a/frontend/pages/shopping-list/index.vue b/frontend/pages/shopping-list/index.vue
index f65b2c8a525b..bb6aebe3f129 100644
--- a/frontend/pages/shopping-list/index.vue
+++ b/frontend/pages/shopping-list/index.vue
@@ -3,7 +3,7 @@
   </template>
   
   <script lang="ts">
-  import { defineComponent } from '@nuxtjs/composition-api'
+  import { defineComponent } from "@nuxtjs/composition-api"
   
   export default defineComponent({
     setup() {
diff --git a/frontend/pages/user/_id/profile.vue b/frontend/pages/user/_id/profile.vue
index d0cd7424ba9b..dca13c44af16 100644
--- a/frontend/pages/user/_id/profile.vue
+++ b/frontend/pages/user/_id/profile.vue
@@ -3,7 +3,7 @@
 </template>
   
   <script lang="ts">
-import { defineComponent } from '@nuxtjs/composition-api'
+import { defineComponent } from "@nuxtjs/composition-api"
 
 export default defineComponent({
   setup() {
diff --git a/frontend/pages/user/login.vue b/frontend/pages/user/login.vue
index 7aa494406644..154f43f51984 100644
--- a/frontend/pages/user/login.vue
+++ b/frontend/pages/user/login.vue
@@ -1,16 +1,227 @@
 <template>
-  <div></div>
+  <v-container fill-height fluid class="d-flex justify-center align-start">
+    <v-card color="background d-flex flex-column align-center " flat width="600px">
+      <svg
+        id="bbc88faa-5a3b-49cf-bdbb-6c9ab11be594"
+        data-name="Layer 1"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 728 754.88525"
+        style="max-height: 300px"
+      >
+        <rect
+          x="514.67011"
+          y="302.6311"
+          width="33"
+          height="524"
+          transform="translate(-458.65432 311.24592) rotate(-33.25976)"
+          fill="#e6e6e6"
+        />
+        <path
+          d="M335.58256,171.60615l63.84438,97.34271a8.5,8.5,0,0,1-14.21528,9.32341L311.81484,166.36508a60.62682,60.62682,0,0,0-29.14936,4.78729L362.63446,293.08a8.5,8.5,0,0,1-14.21528,9.3234l-79.969-121.92766A60.62685,60.62685,0,0,0,252.44516,205.304L325.842,317.2112a8.5,8.5,0,0,1-14.21528,9.3234l-63.84438-97.3427c-1.6398,27.14157,7.20944,59.3114,26.60329,88.881,36.04421,54.95614,94.83957,80.109,131.32307,56.18052s36.8396-87.87721.79539-142.83336C387.11022,201.85046,361.13005,180.91634,335.58256,171.60615Z"
+          transform="translate(-236 -72.55738)"
+          fill="#e6e6e6"
+        />
+        <rect x="256" y="204" width="33" height="524" fill="#e6e6e6" />
+        <ellipse cx="272" cy="119" rx="79" ry="119" fill="#e6e6e6" />
+        <ellipse cx="272" cy="119" rx="65" ry="97.91139" fill="#ccc" />
+        <ellipse cx="364" cy="734" rx="364" ry="20.88525" fill="#e6e6e6" />
+        <path
+          d="M815.26782,806.25045a1162.796,1162.796,0,0,0-412.53564,0A15.04906,15.04906,0,0,1,385,791.45826V604.55738H833V791.45826A15.04906,15.04906,0,0,1,815.26782,806.25045Z"
+          transform="translate(-236 -72.55738)"
+          fill="#e58325"
+        />
+        <path
+          d="M792,466.55738a92.85808,92.85808,0,0,0-30.39526,5.0863,179.055,179.055,0,0,0-324.4441-1.63928,93.00486,93.00486,0,1,0,12.16987,174.74988,179.02647,179.02647,0,0,0,300.7481-2.16382A93.00664,93.00664,0,1,0,792,466.55738Z"
+          transform="translate(-236 -72.55738)"
+          fill="#e58325"
+        />
+        <path
+          d="M421,546.55738h-2A178.40222,178.40222,0,0,1,436.24707,469.572l1.80762.85644A176.41047,176.41047,0,0,0,421,546.55738Z"
+          transform="translate(-236 -72.55738)"
+          fill="#3f3d56"
+        />
+        <path
+          d="M779,546.55738h-2a176.52632,176.52632,0,0,0-16.29395-74.501l1.81641-.83789A178.51046,178.51046,0,0,1,779,546.55738Z"
+          transform="translate(-236 -72.55738)"
+          fill="#3f3d56"
+        />
+        <path
+          d="M385.24121,691.52808l-.48242-1.94141c.56445-.13964,57.40332-14.09961,140.70019-21.02636,76.88086-6.39258,192.68653-7.93457,307.78516,21.02734l-.48828,1.93945C717.93945,662.63746,602.38672,664.17261,525.667,670.55054,442.519,677.46167,385.8042,691.38843,385.24121,691.52808Z"
+          transform="translate(-236 -72.55738)"
+          fill="#3f3d56"
+        />
+        <path
+          d="M385.24121,718.52808l-.48242-1.94141c.56445-.13964,57.40332-14.09961,140.70019-21.02636,76.88086-6.39258,192.68653-7.93457,307.78516,21.02734l-.48828,1.93945C717.93945,689.63746,602.38672,691.17456,525.667,697.55054,442.519,704.46167,385.8042,718.38843,385.24121,718.52808Z"
+          transform="translate(-236 -72.55738)"
+          fill="#3f3d56"
+        />
+        <path
+          d="M385.24121,745.52808l-.48242-1.94141c.56445-.13964,57.40332-14.09961,140.70019-21.02636,76.88086-6.39258,192.68653-7.93457,307.78516,21.02734l-.48828,1.93945C717.93945,716.63746,602.38672,718.17456,525.667,724.55054,442.519,731.46167,385.8042,745.38843,385.24121,745.52808Z"
+          transform="translate(-236 -72.55738)"
+          fill="#3f3d56"
+        />
+        <path
+          d="M753.26693,598.71334,729.03658,590.475l23.26113-118.72871-15.992-1.45382c-15.594,11.96435-36.35984,16.65481-62.99891,13.08438l42.64542,64.45274-21.745,15.34942-69.368-83.20523A20.866,20.866,0,0,1,620,466.61227v0a20.866,20.866,0,0,1,15.0905-20.05076L709.16769,425.224l86.74466,9.69214c13.11467,19.99417,13.62744,33.89954-6.33645,37.911Z"
+          transform="translate(-236 -72.55738)"
+          fill="#2f2e41"
+        />
+        <path
+          d="M728.46691,644.90106h0a15.95869,15.95869,0,0,1-13.86555-21.711l12.046-30.97551c6.11869-11.59112,14.5164-10.14011,24.43261,0l4.84611,14.21526a9.17534,9.17534,0,0,1-.53485,7.176L743.64973,636.306A15.95871,15.95871,0,0,1,728.46691,644.90106Z"
+          transform="translate(-236 -72.55738)"
+          fill="#2f2e41"
+        />
+        <path
+          d="M697.15218,604.33834h0a15.95869,15.95869,0,0,1-13.86555-21.711l12.046-30.97551c6.11869-11.59113,14.51641-10.14012,24.43261,0l4.84611,14.21525a9.17537,9.17537,0,0,1-.53485,7.176L712.335,595.74331A15.9587,15.9587,0,0,1,697.15218,604.33834Z"
+          transform="translate(-236 -72.55738)"
+          fill="#2f2e41"
+        />
+        <circle cx="476.55994" cy="212.13062" r="27.13799" fill="#ffb9b9" />
+        <polygon
+          points="518.721 250.415 481.406 269.799 473.652 234.907 499.336 218.915 518.721 250.415"
+          fill="#ffb9b9"
+        />
+        <path
+          d="M799.7892,439.76224c-37.23393-11.24605-71.01788-17.07317-95.46758-8.23832,8.42738-23.70818-7.12737-59.91146-24.23035-96.9214,7.37949-9.64677,19.14576-13.38347,32.46867-15.02282,14.5769,10.5844,24.74122,3.79091,32.46867-12.59978,16.85358-.67652,33.095,5.29186,48.94531,15.50743C781.58355,362.17339,783.814,401.25293,799.7892,439.76224Z"
+          transform="translate(-236 -72.55738)"
+          fill="#3f3d56"
+        />
+        <path
+          d="M703.837,437.33921c-5.87952,3.4656-11.3058,9.30325-16.47664,16.47664-8.73817-5.349-16.42816-11.439-22.48592-18.68294a40.01122,40.01122,0,0,1-7.33032-37.42892l16.56053-53.82173a23.60967,23.60967,0,0,1,7.67755-11.38054l2.18592-1.776,21.80731,41.19159-21.80731,40.707C686.73356,420.03892,694.88267,428.6031,703.837,437.33921Z"
+          transform="translate(-236 -72.55738)"
+          fill="#3f3d56"
+        />
+        <path
+          d="M711.343,478.37478h0a14.00455,14.00455,0,0,1-19.66674-10.71872L688.072,442.98155l12.59979-6.7845,15.9909,20.93355A14.00455,14.00455,0,0,1,711.343,478.37478Z"
+          transform="translate(-236 -72.55738)"
+          fill="#ffb9b9"
+        />
+        <path
+          d="M739.94024,283.50047l-4.63369.13763-12.853-18.20724c-16.46951,1.70257-29.96494,8.858-41.38524,19.81828l-1.15795-7.71966a29.10153,29.10153,0,0,1,22.90286-32.81892h.00006a29.10153,29.10153,0,0,1,34.57213,23.6573Z"
+          transform="translate(-236 -72.55738)"
+          fill="#2f2e41"
+        />
+        <path
+          d="M687.82806,453.82563v0a14.00456,14.00456,0,0,1,10.71872-19.66675l24.67452-3.60414,6.7845,12.59978L709.07224,459.1454A14.00455,14.00455,0,0,1,687.82806,453.82563Z"
+          transform="translate(-236 -72.55738)"
+          fill="#ffb9b9"
+        />
+        <path
+          d="M804.49034,431.38118c-23.4754,1.82279-49.10633,9.14326-75.93837,19.527a37.12074,37.12074,0,0,0-8.23832-21.80731c24.37008-6.41874,46.48406-13.95144,60.09127-25.68417L772.1666,341.387l17.93046-20.35349,3.09274,1.6136a20.65228,20.65228,0,0,1,10.4691,13.14326c7.57071,29.449,10.93351,57.66486,8.62195,84.21782A10.47079,10.47079,0,0,1,804.49034,431.38118Z"
+          transform="translate(-236 -72.55738)"
+          fill="#3f3d56"
+        />
+        <path
+          d="M331.88594,800.6692q-32.74851,20.483-65.49722-.01716a4.441,4.441,0,0,1-2.10125-4.0963l6.81241-88.56136h55.10049l7.78288,88.5302A4.44,4.44,0,0,1,331.88594,800.6692Z"
+          transform="translate(-236 -72.55738)"
+          fill="#3f3d56"
+        />
+        <ellipse cx="62.39599" cy="636.43883" rx="27.80438" ry="10.01827" fill="#3f3d56" />
+        <path
+          d="M320.18941,705.61437q-21.73251,15.28772-42.07674,0V689.58514h42.07674Z"
+          transform="translate(-236 -72.55738)"
+          fill="#e58325"
+        />
+        <ellipse cx="63.15104" cy="617.02776" rx="21.03837" ry="8.01462" fill="#e58325" />
+        <ellipse cx="64.15287" cy="616.02594" rx="2.00365" ry="1.00183" fill="#e6e6e6" />
+        <ellipse cx="73.61397" cy="616.02594" rx="2.00365" ry="1.00183" fill="#e6e6e6" />
+        <ellipse cx="68.88342" cy="618.39121" rx="2.00365" ry="1.00183" fill="#e6e6e6" />
+        <ellipse cx="49.96121" cy="618.39121" rx="2.00365" ry="1.00183" fill="#e6e6e6" />
+        <ellipse cx="54.69176" cy="616.02594" rx="2.00365" ry="1.00183" fill="#e6e6e6" />
+        <ellipse cx="59.42232" cy="619.57385" rx="2.00365" ry="1.00183" fill="#e6e6e6" />
+        <path
+          d="M936.88594,800.6692q-32.74851,20.483-65.49722-.01716a4.441,4.441,0,0,1-2.10125-4.0963l6.81241-88.56136h55.10049l7.78288,88.5302A4.44,4.44,0,0,1,936.88594,800.6692Z"
+          transform="translate(-236 -72.55738)"
+          fill="#3f3d56"
+        />
+        <ellipse cx="667.39599" cy="636.43883" rx="27.80438" ry="10.01827" fill="#3f3d56" />
+        <path
+          d="M925.18941,705.61437q-21.73251,15.28772-42.07674,0V689.58514h42.07674Z"
+          transform="translate(-236 -72.55738)"
+          fill="#e58325"
+        />
+        <ellipse cx="668.15104" cy="617.02776" rx="21.03837" ry="8.01462" fill="#e58325" />
+        <ellipse cx="669.15287" cy="616.02594" rx="2.00365" ry="1.00183" fill="#e6e6e6" />
+        <ellipse cx="678.61397" cy="616.02594" rx="2.00365" ry="1.00183" fill="#e6e6e6" />
+        <ellipse cx="673.88342" cy="618.39121" rx="2.00365" ry="1.00183" fill="#e6e6e6" />
+        <ellipse cx="654.96121" cy="618.39121" rx="2.00365" ry="1.00183" fill="#e6e6e6" />
+        <ellipse cx="659.69176" cy="616.02594" rx="2.00365" ry="1.00183" fill="#e6e6e6" />
+        <ellipse cx="664.42232" cy="619.57385" rx="2.00365" ry="1.00183" fill="#e6e6e6" />
+      </svg>
+      <v-card-title class="headline justify-center"> Mealie Login </v-card-title>
+      <BaseDivider />
+      <v-card-text>
+        <v-form @submit.prevent="authenticate()">
+          <v-text-field
+            v-model="form.email"
+            filled
+            rounded
+            autofocus
+            class="rounded-lg"
+            prepend-icon="mdi-account"
+            name="login"
+            label="Email or Username"
+            type="text"
+          />
+          <v-text-field
+            id="password"
+            v-model="form.password"
+            filled
+            rounded
+            class="rounded-lg"
+            prepend-icon="mdi-lock"
+            name="password"
+            label="Password"
+            type="password"
+          />
+          <v-btn :loading="loggingIn" color="primary" type="submit" large rounded class="rounded-xl" block>
+            Login
+          </v-btn>
+        </v-form>
+      </v-card-text>
+      <v-btn v-if="allowSignup" class="mx-auto" text to="/user/sign-up"> Sign Up </v-btn>
+      <v-btn v-else class="mx-auto" text disabled> Invite Only </v-btn>
+    </v-card>
+    <!-- <v-col class="fill-height"> </v-col> -->
+  </v-container>
 </template>
+
     
     <script lang="ts">
 import { defineComponent } from "@nuxtjs/composition-api";
 
 export default defineComponent({
+  layout: "basic",
   setup() {
     return {};
   },
+  data() {
+    return {
+      loggingIn: false,
+      form: {
+        email: "changeme@email.com",
+        password: "MyPassword",
+      },
+    };
+  },
+  computed: {
+    allowSignup(): boolean {
+      // @ts-ignore
+      return process.env.ALLOW_SIGNUP;
+    },
+  },
+  methods: {
+    async authenticate() {
+      this.loggingIn = true;
+      const formData = new FormData();
+      formData.append("username", this.form.email);
+      formData.append("password", this.form.password);
+
+      const response = await this.$auth.loginWith("local", { data: formData });
+      console.log(response);
+      this.loggingIn = false;
+
+      console.log(this.$auth.user);
+    },
+  },
 });
-</script>
-    
-    <style scoped>
-</style>
\ No newline at end of file
+</script>
\ No newline at end of file
diff --git a/frontend/pages/user/register.vue b/frontend/pages/user/profile.vue
similarity index 92%
rename from frontend/pages/user/register.vue
rename to frontend/pages/user/profile.vue
index 7aa494406644..516e23df5228 100644
--- a/frontend/pages/user/register.vue
+++ b/frontend/pages/user/profile.vue
@@ -6,6 +6,7 @@
 import { defineComponent } from "@nuxtjs/composition-api";
 
 export default defineComponent({
+  layout: "admin",
   setup() {
     return {};
   },
diff --git a/frontend/pages/user/sign-up.vue b/frontend/pages/user/sign-up.vue
new file mode 100644
index 000000000000..c234c6995a37
--- /dev/null
+++ b/frontend/pages/user/sign-up.vue
@@ -0,0 +1,116 @@
+<template>
+  <v-container fill-height fluid class="d-flex justify-center align-start">
+    <v-card color="background d-flex flex-column align-center " flat width="600px">
+      <svg
+        id="b76bd6b3-ad77-41ff-b778-1d1d054fe577"
+        data-name="Layer 1"
+        xmlns="http://www.w3.org/2000/svg"
+        style="max-height: 300px"
+        viewBox="0 0 570 511.67482"
+      >
+        <path
+          d="M879.99927,389.83741a.99678.99678,0,0,1-.5708-.1792L602.86963,197.05469a5.01548,5.01548,0,0,0-5.72852.00977L322.57434,389.65626a1.00019,1.00019,0,0,1-1.14868-1.6377l274.567-192.5918a7.02216,7.02216,0,0,1,8.02-.01318l276.55883,192.603a1.00019,1.00019,0,0,1-.57226,1.8208Z"
+          transform="translate(-315 -194.16259)"
+          fill="#3f3d56"
+        />
+        <polygon
+          points="23.264 202.502 285.276 8.319 549.276 216.319 298.776 364.819 162.776 333.819 23.264 202.502"
+          fill="#e6e6e6"
+        />
+        <path
+          d="M489.25553,650.70367H359.81522a6.04737,6.04737,0,1,1,0-12.09473H489.25553a6.04737,6.04737,0,1,1,0,12.09473Z"
+          transform="translate(-315 -194.16259)"
+          fill="#e58325"
+        />
+        <path
+          d="M406.25553,624.70367H359.81522a6.04737,6.04737,0,1,1,0-12.09473h46.44031a6.04737,6.04737,0,1,1,0,12.09473Z"
+          transform="translate(-315 -194.16259)"
+          fill="#e58325"
+        />
+        <path
+          d="M603.96016,504.82207a7.56366,7.56366,0,0,1-2.86914-.562L439.5002,437.21123v-209.874a7.00817,7.00817,0,0,1,7-7h310a7.00818,7.00818,0,0,1,7,7v210.0205l-.30371.12989L606.91622,504.22734A7.61624,7.61624,0,0,1,603.96016,504.82207Z"
+          transform="translate(-315 -194.16259)"
+          fill="#fff"
+        />
+        <path
+          d="M603.96016,505.32158a8.07177,8.07177,0,0,1-3.05957-.59863L439.0002,437.54521v-210.208a7.50851,7.50851,0,0,1,7.5-7.5h310a7.50851,7.50851,0,0,1,7.5,7.5V437.68779l-156.8877,66.999A8.10957,8.10957,0,0,1,603.96016,505.32158Zm-162.96-69.1123,160.66309,66.66455a6.1182,6.1182,0,0,0,4.668-.02784l155.669-66.47851V227.33721a5.50653,5.50653,0,0,0-5.5-5.5h-310a5.50653,5.50653,0,0,0-5.5,5.5Z"
+          transform="translate(-315 -194.16259)"
+          fill="#3f3d56"
+        />
+        <path
+          d="M878,387.83741h-.2002L763,436.85743l-157.06982,67.07a5.06614,5.06614,0,0,1-3.88038.02L440,436.71741l-117.62012-48.8-.17968-.08H322a7.00778,7.00778,0,0,0-7,7v304a7.00779,7.00779,0,0,0,7,7H878a7.00779,7.00779,0,0,0,7-7v-304A7.00778,7.00778,0,0,0,878,387.83741Zm5,311a5.002,5.002,0,0,1-5,5H322a5.002,5.002,0,0,1-5-5v-304a5.01106,5.01106,0,0,1,4.81006-5L440,438.87739l161.28027,66.92a7.12081,7.12081,0,0,0,5.43994-.03L763,439.02741l115.2002-49.19a5.01621,5.01621,0,0,1,4.7998,5Z"
+          transform="translate(-315 -194.16259)"
+          fill="#3f3d56"
+        />
+        <path
+          d="M602.345,445.30958a27.49862,27.49862,0,0,1-16.5459-5.4961l-.2959-.22217-62.311-47.70752a27.68337,27.68337,0,1,1,33.67407-43.94921l40.36035,30.94775,95.37793-124.38672a27.68235,27.68235,0,0,1,38.81323-5.12353l-.593.80517.6084-.79346a27.71447,27.71447,0,0,1,5.12353,38.81348L624.36938,434.50586A27.69447,27.69447,0,0,1,602.345,445.30958Z"
+          transform="translate(-315 -194.16259)"
+          fill="#e58325"
+        />
+      </svg>
+      <v-card-title class="headline justify-center"> Request Secure Link </v-card-title>
+      <BaseDivider />
+      <v-card-text>
+        <v-form @submit.prevent="authenticate()">
+          <v-text-field
+            v-model="form.email"
+            filled
+            rounded
+            autofocus
+            class="rounded-lg"
+            prepend-icon="mdi-account"
+            name="login"
+            label="Email"
+            type="text"
+          />
+          <v-btn :loading="loggingIn" color="primary" type="submit" large rounded class="rounded-xl" block>
+            Submit
+          </v-btn>
+        </v-form>
+      </v-card-text>
+      <v-btn v-if="allowSignup" class="mx-auto" text to="/user/login"> Login </v-btn>
+    </v-card>
+    <!-- <v-col class="fill-height"> </v-col> -->
+  </v-container>
+</template>
+
+    
+    <script lang="ts">
+import { defineComponent } from "@nuxtjs/composition-api";
+
+export default defineComponent({
+  layout: "basic",
+  setup() {
+    return {};
+  },
+  data() {
+    return {
+      loggingIn: false,
+      form: {
+        email: "changeme@email.com",
+        password: "MyPassword",
+      },
+    };
+  },
+  computed: {
+    allowSignup(): boolean {
+      // @ts-ignore
+      return process.env.ALLOW_SIGNUP;
+    },
+  },
+  methods: {
+    async authenticate() {
+      this.loggingIn = true;
+      const formData = new FormData();
+      formData.append("username", this.form.email);
+      formData.append("password", this.form.password);
+
+      const response = await this.$auth.loginWith("local", { data: formData });
+      console.log(response);
+      this.loggingIn = false;
+
+      console.log(this.$auth.user);
+    },
+  },
+});
+</script>
\ No newline at end of file
diff --git a/frontend/plugins/globals.js b/frontend/plugins/globals.js
new file mode 100644
index 000000000000..f0fd42ee3217
--- /dev/null
+++ b/frontend/plugins/globals.js
@@ -0,0 +1,206 @@
+import {
+  mdiAccount,
+  mdiSilverwareVariant,
+  mdiPlus,
+  mdiPlusCircle,
+  mdiDelete,
+  mdiContentSave,
+  mdiContentSaveEdit,
+  mdiSquareEditOutline,
+  mdiClose,
+  mdiTagMultipleOutline,
+  mdiBookOutline,
+  mdiAccountCog,
+  mdiAccountGroup,
+  mdiHome,
+  mdiMagnify,
+  mdiTranslate,
+  mdiClockTimeFourOutline,
+  mdiImport,
+  mdiEmail,
+  mdiLock,
+  mdiEye,
+  mdiEyeOff,
+  mdiCalendarMinus,
+  mdiCalendar,
+  mdiDiceMultiple,
+  mdiAlertCircle,
+  mdiDotsVertical,
+  mdiPrinter,
+  mdiShareVariant,
+  mdiHeart,
+  mdiHeartOutline,
+  mdiDotsHorizontal,
+  mdiCheckboxBlankOutline,
+  mdiCommentTextMultipleOutline,
+  mdiDownload,
+  mdiFile,
+  mdiFilePdfBox,
+  mdiFileImage,
+  mdiCodeJson,
+  mdiArrowUpDown,
+  mdiCog,
+  mdiSort,
+  mdiOrderAlphabeticalAscending,
+  mdiStar,
+  mdiNewBox,
+  mdiShuffleVariant,
+  mdiAlert,
+  mdiCheckboxMarkedCircle,
+  mdiInformation,
+  mdiBellAlert,
+  mdiRefreshCircle,
+  mdiMenu,
+  mdiWeatherSunny,
+  mdiWeatherNight,
+  mdiLink,
+  mdiRobot,
+  mdiLinkVariant,
+  mdiViewModule,
+  mdiViewDashboard,
+  mdiTools,
+  mdiCalendarWeek,
+  mdiCalendarToday,
+  mdiCalendarMultiselect,
+  mdiFormatListChecks,
+  mdiLogout,
+  mdiContentCopy,
+  mdiClipboardCheck,
+  mdiCloudUpload,
+  mdiDatabase,
+  mdiGithub,
+  mdiFolderOutline,
+  mdiApi,
+  mdiTestTube,
+  mdiDevTo,
+  mdiBackupRestore,
+  mdiNotificationClearAll,
+  mdiFood,
+  mdiWebhook,
+  mdiFilter,
+  mdiAccountPlusOutline,
+  mdiDesktopTowerMonitor,
+  mdiFormatColorFill,
+  mdiFormSelect,
+  mdiPageLayoutBody,
+  mdiCalendarWeekBegin,
+  mdiOpenInNew,
+  mdiCheck,
+  mdiBroom,
+  mdiCartCheck,
+  mdiArrowLeftBold,
+  mdiMinus,
+  mdiWindowClose,
+  mdiFolderZipOutline,
+} from "@mdi/js";
+
+const icons = {
+  // Primary
+  primary: mdiSilverwareVariant,
+
+  // General
+  alert: mdiAlert,
+  alertCircle: mdiAlertCircle,
+  api: mdiApi,
+  arrowLeftBold: mdiArrowLeftBold,
+  arrowUpDown: mdiArrowUpDown,
+  backupRestore: mdiBackupRestore,
+  bellAlert: mdiBellAlert,
+  broom: mdiBroom,
+  calendar: mdiCalendar,
+  calendarMinus: mdiCalendarMinus,
+  calendarMultiselect: mdiCalendarMultiselect,
+  calendarToday: mdiCalendarToday,
+  calendarWeek: mdiCalendarWeek,
+  calendarWeekBegin: mdiCalendarWeekBegin,
+  cartCheck: mdiCartCheck,
+  check: mdiCheck,
+  checkboxBlankOutline: mdiCheckboxBlankOutline,
+  checkboxMarkedCircle: mdiCheckboxMarkedCircle,
+  clipboardCheck: mdiClipboardCheck,
+  clockOutline: mdiClockTimeFourOutline,
+  codeBraces: mdiCodeJson,
+  codeJson: mdiCodeJson,
+  cog: mdiCog,
+  commentTextMultipleOutline: mdiCommentTextMultipleOutline,
+  contentCopy: mdiContentCopy,
+  database: mdiDatabase,
+  desktopTowerMonitor: mdiDesktopTowerMonitor,
+  devTo: mdiDevTo,
+  diceMultiple: mdiDiceMultiple,
+  dotsHorizontal: mdiDotsHorizontal,
+  dotsVertical: mdiDotsVertical,
+  download: mdiDownload,
+  email: mdiEmail,
+  externalLink: mdiLinkVariant,
+  eye: mdiEye,
+  eyeOff: mdiEyeOff,
+  file: mdiFile,
+  fileImage: mdiFileImage,
+  filePDF: mdiFilePdfBox,
+  filter: mdiFilter,
+  folderOutline: mdiFolderOutline,
+  food: mdiFood,
+  formatColorFill: mdiFormatColorFill,
+  formatListCheck: mdiFormatListChecks,
+  formSelect: mdiFormSelect,
+  github: mdiGithub,
+  heart: mdiHeart,
+  heartOutline: mdiHeartOutline,
+  home: mdiHome,
+  import: mdiImport,
+  information: mdiInformation,
+  link: mdiLink,
+  lock: mdiLock,
+  logout: mdiLogout,
+  menu: mdiMenu,
+  newBox: mdiNewBox,
+  notificationClearAll: mdiNotificationClearAll,
+  openInNew: mdiOpenInNew,
+  orderAlphabeticalAscending: mdiOrderAlphabeticalAscending,
+  pageLayoutBody: mdiPageLayoutBody,
+  printer: mdiPrinter,
+  refreshCircle: mdiRefreshCircle,
+  robot: mdiRobot,
+  search: mdiMagnify,
+  shareVariant: mdiShareVariant,
+  shuffleVariant: mdiShuffleVariant,
+  sort: mdiSort,
+  star: mdiStar,
+  testTube: mdiTestTube,
+  tools: mdiTools,
+  translate: mdiTranslate,
+  upload: mdiCloudUpload,
+  viewDashboard: mdiViewDashboard,
+  viewModule: mdiViewModule,
+  weatherNight: mdiWeatherNight,
+  weatherSunny: mdiWeatherSunny,
+  webhook: mdiWebhook,
+  windowClose: mdiWindowClose,
+  zip: mdiFolderZipOutline,
+
+  // Crud
+  createAlt: mdiPlus,
+  create: mdiPlusCircle,
+  delete: mdiDelete,
+  save: mdiContentSave,
+  update: mdiContentSaveEdit,
+  edit: mdiSquareEditOutline,
+  close: mdiClose,
+  minus: mdiMinus,
+
+  // Organization
+  tags: mdiTagMultipleOutline,
+  pages: mdiBookOutline,
+
+  // Admin
+  user: mdiAccount,
+  admin: mdiAccountCog,
+  group: mdiAccountGroup,
+  accountPlusOutline: mdiAccountPlusOutline,
+};
+
+export default ({ app }, inject) => {
+  // Inject $hello(msg) in Vue, context and store.
+  inject("globals", { icons });
+};
diff --git a/frontend/static/account.png b/frontend/static/account.png
new file mode 100644
index 0000000000000000000000000000000000000000..28804298a32c9585b30baeb0bb0f2b6c07a7ac65
GIT binary patch
literal 675
zcmeAS@N?(olHy`uVBq!ia0vp^1|ZDA1|-9oezpTCmUKs7M+SzC{oH>NS%G|oWRD<U
z28Jp%28M<f28Lfip@tU>45dJguM!v-tY$DUh!@P+6=(yLU`z6LcLCBs@Y8vBJ&@uo
z@Q5r1(g|SvA=~LZ0|VnyPZ!6KjC*gVpY?KblxVxJd1-;puFge9i>xyOOE@p?5-U~I
z73w;&qWY!yuI7Lh+y3TsUlE)3amxn|#a9=N-Jc75KJez*?8><Ga~8^#Hgf&Pg_REo
zO<?zOFwIbXAaP>Xx7TX(*!&vht%BM88m465FZ*=;%el}+P7LX_C(Jc>e9Jqf-<mT!
z?{?<JvVRjLjNZ7&q=#H86JlBud1c*gzq}lF2CYeI%G1Jo41>)+AK%Div8q@1z-HIC
z!9q+i5m)9NH`p)hU}hn-SY|Qzy1%m({ghZv?EdyoT7fm@n_@j<&(3do;)?_}&3$E(
zx9a4ie9lcAGK{VZgtjOZ%$Q;O{^K9zM?21>s;u>jnr5P(>37NJf?8AF{7Lsz_j*=M
z`J(XB?^3VfGOI6F9N2C!=QY0Ps890U*JN1MET5$D$Z|oB;@wXE2Mirmru<XyGsLkg
z+&jgc@b^OI)cai1sw1v6oQ=EVWS^7}*2|w)qu_me=By>6$!BV}`|aJsUc~oARZ}<9
zeoe5xcEB`~AHs`lQ<KkZ$z^z5zMA*gjCFm5HkxxEF;{>>^zo#4l~Zf{D$LK90Ao(I
z#5JNMC9x#cD!C{XNHG{07#ZpsSm+uUh8P)J85mj_8E6|ASQ!}j+IfM}5<)|6eoAIq
XC2kEi$)9!sH86O(`njxgN@xNA<cI$_

literal 0
HcmV?d00001

diff --git a/frontend/store/index.js b/frontend/store/index.js
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index 896590d01fc6..77f9c2712a7d 100644
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -10,12 +10,13 @@
     "strict": true,
     "noEmit": true,
     "experimentalDecorators": true,
+    "strictPropertyInitialization": false,
     "baseUrl": ".",
     "paths": {
       "~/*": ["./*"],
       "@/*": ["./*"]
     },
-    "types": ["@nuxt/types", "@nuxtjs/axios", "@nuxt/content", "@types/node"]
+    "types": ["@nuxt/types", "@nuxtjs/axios", "@types/node", "nuxt-i18n", "@nuxtjs/auth-next"]
   },
   "exclude": ["node_modules", ".nuxt", "dist"]
 }
diff --git a/frontend/types/api-types/admin.ts b/frontend/types/api-types/admin.ts
new file mode 100644
index 000000000000..2d86f73d1b39
--- /dev/null
+++ b/frontend/types/api-types/admin.ts
@@ -0,0 +1,253 @@
+/* tslint:disable */
+/* eslint-disable */
+/**
+/* This file was automatically generated from pydantic models by running pydantic2ts.
+/* Do not modify it by hand - just update the pydantic models and then re-run the script
+*/
+
+export interface AppInfo {
+  production: boolean;
+  version: string;
+  demoStatus: boolean;
+}
+export interface AppStatistics {
+  totalRecipes: number;
+  totalUsers: number;
+  totalGroups: number;
+  uncategorizedRecipes: number;
+  untaggedRecipes: number;
+}
+export interface BackupJob {
+  tag?: string;
+  options: BackupOptions;
+  templates?: string[];
+}
+export interface BackupOptions {
+  recipes?: boolean;
+  settings?: boolean;
+  pages?: boolean;
+  themes?: boolean;
+  groups?: boolean;
+  users?: boolean;
+  notifications?: boolean;
+}
+export interface CategoryBase {
+  name: string;
+  id: number;
+  slug: string;
+}
+export interface ChowdownURL {
+  url: string;
+}
+export interface Colors {
+  primary?: string;
+  accent?: string;
+  secondary?: string;
+  success?: string;
+  info?: string;
+  warning?: string;
+  error?: string;
+}
+export interface CustomPageBase {
+  name: string;
+  slug?: string;
+  position: number;
+  categories?: RecipeCategoryResponse[];
+}
+export interface RecipeCategoryResponse {
+  name: string;
+  id: number;
+  slug: string;
+  recipes?: Recipe[];
+}
+export interface Recipe {
+  id?: number;
+  name?: string;
+  slug?: string;
+  image?: unknown;
+  description?: string;
+  recipeCategory?: string[];
+  tags?: string[];
+  rating?: number;
+  dateAdded?: string;
+  dateUpdated?: string;
+  recipeYield?: string;
+  recipeIngredient?: RecipeIngredient[];
+  recipeInstructions?: RecipeStep[];
+  nutrition?: Nutrition;
+  tools?: string[];
+  totalTime?: string;
+  prepTime?: string;
+  performTime?: string;
+  settings?: RecipeSettings;
+  assets?: RecipeAsset[];
+  notes?: RecipeNote[];
+  orgURL?: string;
+  extras?: {
+    [k: string]: unknown;
+  };
+  comments?: CommentOut[];
+}
+export interface RecipeIngredient {
+  title?: string;
+  note?: string;
+  unit?: RecipeIngredientUnit;
+  food?: RecipeIngredientFood;
+  disableAmount?: boolean;
+  quantity?: number;
+}
+export interface RecipeIngredientUnit {
+  name?: string;
+  description?: string;
+}
+export interface RecipeIngredientFood {
+  name?: string;
+  description?: string;
+}
+export interface RecipeStep {
+  title?: string;
+  text: string;
+}
+export interface Nutrition {
+  calories?: string;
+  fatContent?: string;
+  proteinContent?: string;
+  carbohydrateContent?: string;
+  fiberContent?: string;
+  sodiumContent?: string;
+  sugarContent?: string;
+}
+export interface RecipeSettings {
+  public?: boolean;
+  showNutrition?: boolean;
+  showAssets?: boolean;
+  landscapeView?: boolean;
+  disableComments?: boolean;
+  disableAmount?: boolean;
+}
+export interface RecipeAsset {
+  name: string;
+  icon: string;
+  fileName?: string;
+}
+export interface RecipeNote {
+  title: string;
+  text: string;
+}
+export interface CommentOut {
+  text: string;
+  id: number;
+  uuid: string;
+  recipeSlug: string;
+  dateAdded: string;
+  user: UserBase;
+}
+export interface UserBase {
+  id: number;
+  username?: string;
+  admin: boolean;
+}
+export interface CustomPageImport {
+  name: string;
+  status: boolean;
+  exception?: string;
+}
+export interface CustomPageOut {
+  name: string;
+  slug?: string;
+  position: number;
+  categories?: RecipeCategoryResponse[];
+  id: number;
+}
+export interface DebugInfo {
+  production: boolean;
+  version: string;
+  demoStatus: boolean;
+  apiPort: number;
+  apiDocs: boolean;
+  dbType: string;
+  dbUrl: string;
+  defaultGroup: string;
+}
+export interface GroupImport {
+  name: string;
+  status: boolean;
+  exception?: string;
+}
+export interface ImportBase {
+  name: string;
+  status: boolean;
+  exception?: string;
+}
+export interface ImportJob {
+  recipes?: boolean;
+  settings?: boolean;
+  pages?: boolean;
+  themes?: boolean;
+  groups?: boolean;
+  users?: boolean;
+  notifications?: boolean;
+  name: string;
+  force?: boolean;
+  rebase?: boolean;
+}
+export interface Imports {
+  imports: LocalBackup[];
+  templates: string[];
+}
+export interface LocalBackup {
+  name: string;
+  date: string;
+}
+export interface MigrationFile {
+  name: string;
+  date: string;
+}
+export interface MigrationImport {
+  name: string;
+  status: boolean;
+  exception?: string;
+  slug?: string;
+}
+export interface Migrations {
+  type: string;
+  files?: MigrationFile[];
+}
+export interface NotificationImport {
+  name: string;
+  status: boolean;
+  exception?: string;
+}
+export interface RecipeImport {
+  name: string;
+  status: boolean;
+  exception?: string;
+  slug?: string;
+}
+export interface SettingsImport {
+  name: string;
+  status: boolean;
+  exception?: string;
+}
+export interface SiteSettings {
+  language?: string;
+  firstDayOfWeek?: number;
+  showRecent?: boolean;
+  cardsPerSection?: number;
+  categories?: CategoryBase[];
+}
+export interface SiteTheme {
+  id?: number;
+  name?: string;
+  colors?: Colors;
+}
+export interface ThemeImport {
+  name: string;
+  status: boolean;
+  exception?: string;
+}
+export interface UserImport {
+  name: string;
+  status: boolean;
+  exception?: string;
+}
diff --git a/frontend/types/api-types/events.ts b/frontend/types/api-types/events.ts
new file mode 100644
index 000000000000..d5b45234f612
--- /dev/null
+++ b/frontend/types/api-types/events.ts
@@ -0,0 +1,60 @@
+/* tslint:disable */
+/* eslint-disable */
+/**
+/* This file was automatically generated from pydantic models by running pydantic2ts.
+/* Do not modify it by hand - just update the pydantic models and then re-run the script
+*/
+
+export type EventCategory = "general" | "recipe" | "backup" | "scheduled" | "migration" | "group" | "user";
+export type DeclaredTypes = "General" | "Discord" | "Gotify" | "Pushover" | "Home Assistant";
+export type GotifyPriority = "low" | "moderate" | "normal" | "high";
+
+export interface Discord {
+  webhookId: string;
+  webhookToken: string;
+}
+export interface Event {
+  id?: number;
+  title: string;
+  text: string;
+  timeStamp?: string;
+  category?: EventCategory & string;
+}
+export interface EventNotificationIn {
+  id?: number;
+  name?: string;
+  type?: DeclaredTypes & string;
+  general?: boolean;
+  recipe?: boolean;
+  backup?: boolean;
+  scheduled?: boolean;
+  migration?: boolean;
+  group?: boolean;
+  user?: boolean;
+  notificationUrl?: string;
+}
+export interface EventNotificationOut {
+  id?: number;
+  name?: string;
+  type?: DeclaredTypes & string;
+  general?: boolean;
+  recipe?: boolean;
+  backup?: boolean;
+  scheduled?: boolean;
+  migration?: boolean;
+  group?: boolean;
+  user?: boolean;
+}
+export interface EventsOut {
+  total: number;
+  events: Event[];
+}
+export interface Gotify {
+  hostname: string;
+  token: string;
+  priority?: GotifyPriority & string;
+}
+export interface TestEvent {
+  id?: number;
+  testUrl?: string;
+}
diff --git a/frontend/types/api-types/meal-plan.ts b/frontend/types/api-types/meal-plan.ts
new file mode 100644
index 000000000000..74c3870f9e89
--- /dev/null
+++ b/frontend/types/api-types/meal-plan.ts
@@ -0,0 +1,52 @@
+/* tslint:disable */
+/* eslint-disable */
+/**
+/* This file was automatically generated from pydantic models by running pydantic2ts.
+/* Do not modify it by hand - just update the pydantic models and then re-run the script
+*/
+
+export interface ListItem {
+  title?: string;
+  text?: string;
+  quantity?: number;
+  checked?: boolean;
+}
+export interface MealDayIn {
+  date?: string;
+  meals: MealIn[];
+}
+export interface MealIn {
+  slug?: string;
+  name?: string;
+  description?: string;
+}
+export interface MealDayOut {
+  date?: string;
+  meals: MealIn[];
+  id: number;
+}
+export interface MealPlanIn {
+  group: string;
+  startDate: string;
+  endDate: string;
+  planDays: MealDayIn[];
+}
+export interface MealPlanOut {
+  group: string;
+  startDate: string;
+  endDate: string;
+  planDays: MealDayIn[];
+  uid: number;
+  shoppingList?: number;
+}
+export interface ShoppingListIn {
+  name: string;
+  group?: string;
+  items: ListItem[];
+}
+export interface ShoppingListOut {
+  name: string;
+  group?: string;
+  items: ListItem[];
+  id: number;
+}
diff --git a/frontend/types/api-types/recipe.ts b/frontend/types/api-types/recipe.ts
new file mode 100644
index 000000000000..1cf74ba7ef8e
--- /dev/null
+++ b/frontend/types/api-types/recipe.ts
@@ -0,0 +1,141 @@
+/* tslint:disable */
+/* eslint-disable */
+/**
+/* This file was automatically generated from pydantic models by running pydantic2ts.
+/* Do not modify it by hand - just update the pydantic models and then re-run the script
+*/
+
+export interface AllRecipeRequest {
+  properties: string[];
+  limit?: number;
+}
+export interface CategoryBase {
+  name: string;
+  id: number;
+  slug: string;
+}
+export interface CategoryIn {
+  name: string;
+}
+export interface CommentIn {
+  text: string;
+}
+export interface CommentOut {
+  text: string;
+  id: number;
+  uuid: string;
+  recipeSlug: string;
+  dateAdded: string;
+  user: UserBase;
+}
+export interface UserBase {
+  id: number;
+  username?: string;
+  admin: boolean;
+}
+export interface CommentSaveToDB {
+  text: string;
+  recipeSlug: string;
+  user: number;
+}
+export interface Nutrition {
+  calories?: string;
+  fatContent?: string;
+  proteinContent?: string;
+  carbohydrateContent?: string;
+  fiberContent?: string;
+  sodiumContent?: string;
+  sugarContent?: string;
+}
+export interface Recipe {
+  id?: number;
+  name?: string;
+  slug?: string;
+  image?: unknown;
+  description?: string;
+  recipeCategory?: string[];
+  tags?: string[];
+  rating?: number;
+  dateAdded?: string;
+  dateUpdated?: string;
+  recipeYield?: string;
+  recipeIngredient?: RecipeIngredient[];
+  recipeInstructions?: RecipeStep[];
+  nutrition?: Nutrition;
+  tools?: string[];
+  totalTime?: string;
+  prepTime?: string;
+  performTime?: string;
+  settings?: RecipeSettings;
+  assets?: RecipeAsset[];
+  notes?: RecipeNote[];
+  orgURL?: string;
+  extras?: {
+    [k: string]: unknown;
+  };
+  comments?: CommentOut[];
+}
+export interface RecipeIngredient {
+  title?: string;
+  note?: string;
+  unit?: RecipeIngredientUnit;
+  food?: RecipeIngredientFood;
+  disableAmount?: boolean;
+  quantity?: number;
+}
+export interface RecipeIngredientUnit {
+  name?: string;
+  description?: string;
+}
+export interface RecipeIngredientFood {
+  name?: string;
+  description?: string;
+}
+export interface RecipeStep {
+  title?: string;
+  text: string;
+}
+export interface RecipeSettings {
+  public?: boolean;
+  showNutrition?: boolean;
+  showAssets?: boolean;
+  landscapeView?: boolean;
+  disableComments?: boolean;
+  disableAmount?: boolean;
+}
+export interface RecipeAsset {
+  name: string;
+  icon: string;
+  fileName?: string;
+}
+export interface RecipeNote {
+  title: string;
+  text: string;
+}
+export interface RecipeSlug {
+  slug: string;
+}
+export interface RecipeSummary {
+  id?: number;
+  name?: string;
+  slug?: string;
+  image?: unknown;
+  description?: string;
+  recipeCategory?: string[];
+  tags?: string[];
+  rating?: number;
+  dateAdded?: string;
+  dateUpdated?: string;
+}
+export interface RecipeURLIn {
+  url: string;
+}
+export interface SlugResponse {}
+export interface TagBase {
+  name: string;
+  id: number;
+  slug: string;
+}
+export interface TagIn {
+  name: string;
+}
diff --git a/frontend/types/api-types/user.ts b/frontend/types/api-types/user.ts
new file mode 100644
index 000000000000..3cc1689e65f3
--- /dev/null
+++ b/frontend/types/api-types/user.ts
@@ -0,0 +1,166 @@
+/* tslint:disable */
+/* eslint-disable */
+/**
+/* This file was automatically generated from pydantic models by running pydantic2ts.
+/* Do not modify it by hand - just update the pydantic models and then re-run the script
+*/
+
+export interface CategoryBase {
+  name: string;
+  id: number;
+  slug: string;
+}
+export interface ChangePassword {
+  currentPassword: string;
+  newPassword: string;
+}
+export interface CreateToken {
+  name: string;
+  parentId: number;
+  token: string;
+}
+export interface GroupBase {
+  name: string;
+}
+export interface GroupInDB {
+  name: string;
+  id: number;
+  categories?: CategoryBase[];
+  webhookUrls?: string[];
+  webhookTime?: string;
+  webhookEnable: boolean;
+  users?: UserOut[];
+  mealplans?: MealPlanOut[];
+  shoppingLists?: ShoppingListOut[];
+}
+export interface UserOut {
+  username?: string;
+  fullName?: string;
+  email: string;
+  admin: boolean;
+  group: string;
+  favoriteRecipes?: string[];
+  id: number;
+  tokens?: LongLiveTokenOut[];
+}
+export interface LongLiveTokenOut {
+  name: string;
+  id: number;
+}
+export interface MealPlanOut {
+  group: string;
+  startDate: string;
+  endDate: string;
+  planDays: MealDayIn[];
+  uid: number;
+  shoppingList?: number;
+}
+export interface MealDayIn {
+  date?: string;
+  meals: MealIn[];
+}
+export interface MealIn {
+  slug?: string;
+  name?: string;
+  description?: string;
+}
+export interface ShoppingListOut {
+  name: string;
+  group?: string;
+  items: ListItem[];
+  id: number;
+}
+export interface ListItem {
+  title?: string;
+  text?: string;
+  quantity?: number;
+  checked?: boolean;
+}
+export interface LoingLiveTokenIn {
+  name: string;
+}
+export interface LongLiveTokenInDB {
+  name: string;
+  parentId: number;
+  token: string;
+  id: number;
+  user: UserInDB;
+}
+export interface UserInDB {
+  username?: string;
+  fullName?: string;
+  email: string;
+  admin: boolean;
+  group: string;
+  favoriteRecipes?: string[];
+  id: number;
+  tokens?: LongLiveTokenOut[];
+  password: string;
+}
+export interface RecipeSummary {
+  id?: number;
+  name?: string;
+  slug?: string;
+  image?: unknown;
+  description?: string;
+  recipeCategory?: string[];
+  tags?: string[];
+  rating?: number;
+  dateAdded?: string;
+  dateUpdated?: string;
+}
+export interface SignUpIn {
+  name: string;
+  admin: boolean;
+}
+export interface SignUpOut {
+  name: string;
+  admin: boolean;
+  token: string;
+  id: number;
+}
+export interface SignUpToken {
+  name: string;
+  admin: boolean;
+  token: string;
+}
+export interface Token {
+  access_token: string;
+  token_type: string;
+}
+export interface TokenData {
+  username?: string;
+}
+export interface UpdateGroup {
+  name: string;
+  id: number;
+  categories?: CategoryBase[];
+  webhookUrls?: string[];
+  webhookTime?: string;
+  webhookEnable: boolean;
+}
+export interface UserBase {
+  username?: string;
+  fullName?: string;
+  email: string;
+  admin: boolean;
+  group?: string;
+  favoriteRecipes?: string[];
+}
+export interface UserFavorites {
+  username?: string;
+  fullName?: string;
+  email: string;
+  admin: boolean;
+  group?: string;
+  favoriteRecipes?: RecipeSummary[];
+}
+export interface UserIn {
+  username?: string;
+  fullName?: string;
+  email: string;
+  admin: boolean;
+  group?: string;
+  favoriteRecipes?: string[];
+  password: string;
+}
diff --git a/frontend/types/api.ts b/frontend/types/api.ts
new file mode 100644
index 000000000000..772d1e027f59
--- /dev/null
+++ b/frontend/types/api.ts
@@ -0,0 +1,16 @@
+import { AxiosResponse } from "axios";
+
+interface RequestResponse<T> {
+    response: AxiosResponse<T> | null;
+    data: T | null;
+    error: any;
+  }
+
+export interface ApiRequestInstance {
+    get<T>(url: string, data?: object): Promise<RequestResponse<T>>;
+    post<T>(url: string, data: object): Promise<RequestResponse<T>>;
+    put<T>(url: string, data: object): Promise<RequestResponse<T>>;
+    patch<T>(url: string, data: object): Promise<RequestResponse<T>>;
+    delete<T>(url: string, data: object): Promise<RequestResponse<T>>;
+}
+
diff --git a/frontend/types/application-types.ts b/frontend/types/application-types.ts
new file mode 100644
index 000000000000..6a1d8ff96bfa
--- /dev/null
+++ b/frontend/types/application-types.ts
@@ -0,0 +1,9 @@
+import { TranslateResult } from "vue-i18n";
+
+export interface SideBarLink {
+    icon: string
+    to: string
+    title: TranslateResult
+}
+
+export type SidebarLinks = Array<SideBarLink>
\ No newline at end of file
diff --git a/frontend/types/vue.d.ts b/frontend/types/vue.d.ts
new file mode 100644
index 000000000000..291cda5b2acf
--- /dev/null
+++ b/frontend/types/vue.d.ts
@@ -0,0 +1,14 @@
+import Vue from "vue";
+
+declare module "vue/types/vue" {
+
+    interface Vue {
+        $globals: any;
+    }
+}
+
+declare module "vue/types/options" {
+    interface ComponentOptions<V extends Vue> {
+        $globals?: any;
+    }
+}
diff --git a/frontend.old/src/utils/globals.js b/frontend/utils/globals.js
similarity index 100%
rename from frontend.old/src/utils/globals.js
rename to frontend/utils/globals.js
diff --git a/frontend.old/src/utils/index.js b/frontend/utils/index.js
similarity index 100%
rename from frontend.old/src/utils/index.js
rename to frontend/utils/index.js
diff --git a/frontend.old/src/utils/recipe.js b/frontend/utils/recipe.js
similarity index 100%
rename from frontend.old/src/utils/recipe.js
rename to frontend/utils/recipe.js
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 46324b261a8b..75e9e06ac47e 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -2,6 +2,22 @@
 # yarn lockfile v1
 
 
+"@adapttive/vue-markdown@^4.0.1":
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/@adapttive/vue-markdown/-/vue-markdown-4.0.1.tgz#4912aa13482cb764bd7ef894f5e1f42e18a911c2"
+  integrity sha512-Qqs9zZ2PGaZQBycQnc1hfz4FyJxsmQNLXAYsGPkPipg+wnRIv7+m9cR6Maa4zJbHmGzZrwAMYFE5BMXEUDfh/g==
+  dependencies:
+    markdown-it "^12.0.3"
+    markdown-it-abbr "^1.0.4"
+    markdown-it-deflist "^2.1.0"
+    markdown-it-emoji "^2.0.0"
+    markdown-it-footnote "^3.0.2"
+    markdown-it-ins "^3.0.0"
+    markdown-it-mark "^3.0.0"
+    markdown-it-sub "^1.0.0"
+    markdown-it-sup "^1.0.0"
+    markdown-it-toc-and-anchor "^4.2.0"
+
 "@babel/code-frame@7.12.11":
   version "7.12.11"
   resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.12.11.tgz#f4ad435aa263db935b8f10f2c552d23fb716a63f"
@@ -267,7 +283,7 @@
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
-"@babel/parser@^7.1.0", "@babel/parser@^7.14.5", "@babel/parser@^7.14.8":
+"@babel/parser@^7.1.0", "@babel/parser@^7.14.5", "@babel/parser@^7.14.7", "@babel/parser@^7.14.8", "@babel/parser@^7.9.6":
   version "7.14.8"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.14.8.tgz#66fd41666b2d7b840bd5ace7f7416d5ac60208d4"
   integrity sha512-syoCQFOoo/fzkWDeM0dLEZi5xqurb5vuyzwIMNZRNun+N/9A4cUZeQaE7dTrB8jGaKuJRBtEOajtnmw0I5hvvA==
@@ -896,7 +912,7 @@
     "@babel/parser" "^7.14.5"
     "@babel/types" "^7.14.5"
 
-"@babel/traverse@^7.13.0", "@babel/traverse@^7.14.5", "@babel/traverse@^7.14.8":
+"@babel/traverse@^7.13.0", "@babel/traverse@^7.14.5", "@babel/traverse@^7.14.7", "@babel/traverse@^7.14.8":
   version "7.14.8"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.14.8.tgz#c0253f02677c5de1a8ff9df6b0aacbec7da1a8ce"
   integrity sha512-kexHhzCljJcFNn1KYAQ6A5wxMRzq9ebYpEDV4+WdNyr3i7O44tanbDOR/xjiG2F3sllan+LgwK+7OMk0EmydHg==
@@ -953,6 +969,32 @@
   resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.0.tgz#87de7af9c231826fdd68ac7258f77c429e0e5fcf"
   integrity sha512-wdppn25U8z/2yiaT6YGquE6X8sSv7hNMWSXYSSU1jGv/yd6XqjXgTDJ8KP4NgjTXfJ3GbRjeeb8RTV7a/VpM+w==
 
+"@intlify/shared@^9.0.0":
+  version "9.1.7"
+  resolved "https://registry.yarnpkg.com/@intlify/shared/-/shared-9.1.7.tgz#e7d8bc90cb59dc17dd7b4c85a73db16fcb7891fc"
+  integrity sha512-zt0zlUdalumvT9AjQNxPXA36UgOndUyvBMplh8uRZU0fhWHAwhnJTcf0NaG9Qvr8I1n3HPSs96+kLb/YdwTavQ==
+
+"@intlify/vue-i18n-extensions@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@intlify/vue-i18n-extensions/-/vue-i18n-extensions-1.0.2.tgz#ab7f8507f7d423c368e44fa21d6dece700261fca"
+  integrity sha512-rnfA0ScyBXyp9xsSD4EAMGeOh1yv/AE7fhqdAdSOr5X8N39azz257umfRtzNT9sHXAKSSzpCVhIbMAkp5c/gjQ==
+  dependencies:
+    "@babel/parser" "^7.9.6"
+
+"@intlify/vue-i18n-loader@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@intlify/vue-i18n-loader/-/vue-i18n-loader-1.1.0.tgz#eecc6460823676f533784b3641665c5a609eccf0"
+  integrity sha512-9LXiztMtYKTE8t/hRwwGUp+ofrwU0sxLQLzFEOZ38zvn0DonUIQmZUj1cfz5p1Lu8BllxKbCrn6HnsRJ+LYA6g==
+  dependencies:
+    "@intlify/shared" "^9.0.0"
+    js-yaml "^3.13.1"
+    json5 "^2.1.1"
+
+"@mdi/js@^5.9.55":
+  version "5.9.55"
+  resolved "https://registry.yarnpkg.com/@mdi/js/-/js-5.9.55.tgz#8f5bc4d924c23f30dab20545ddc768e778bbc882"
+  integrity sha512-BbeHMgeK2/vjdJIRnx12wvQ6s8xAYfvMmEAVsUx9b+7GiQGQ9Za8jpwp17dMKr9CgKRvemlAM4S7S3QOtEbp4A==
+
 "@nodelib/fs.scandir@2.1.5":
   version "2.1.5"
   resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"
@@ -1334,7 +1376,22 @@
     webpack-node-externals "^3.0.0"
     webpackbar "^4.0.0"
 
-"@nuxtjs/axios@^5.13.6":
+"@nuxtjs/auth-next@5.0.0-1624817847.21691f1":
+  version "5.0.0-1624817847.21691f1"
+  resolved "https://registry.yarnpkg.com/@nuxtjs/auth-next/-/auth-next-5.0.0-1624817847.21691f1.tgz#28b92625ac5817d8083f8b42dd184a88caefbe96"
+  integrity sha512-PsHhLtzglMnwM2o16mgM7zQ3KwTI7AIg2ja3IFYujbs9s1w8HvnRD3byMRj1WZo0vXEBRh3u3nHxKEBIbFe1Xg==
+  dependencies:
+    "@nuxtjs/axios" "^5.13.0"
+    axios "^0.21.1"
+    body-parser "^1.19.0"
+    consola "^2.15.3"
+    cookie "^0.4.1"
+    defu "^3.2.2"
+    hasha "^5.2.2"
+    jwt-decode "^3.1.2"
+    requrl "^3.0.2"
+
+"@nuxtjs/axios@^5.13.0", "@nuxtjs/axios@^5.13.6":
   version "5.13.6"
   resolved "https://registry.yarnpkg.com/@nuxtjs/axios/-/axios-5.13.6.tgz#6f4bbd98a3a7799a5d2c0726c6ad2a98aa111881"
   integrity sha512-XS+pOE0xsDODs1zAIbo95A0LKlilvJi8YW0NoXYuq3/jjxGgWDxizZ6Yx0AIIjZOoGsXJOPc0/BcnSEUQ2mFBA==
@@ -2296,6 +2353,11 @@ argparse@^1.0.7:
   dependencies:
     sprintf-js "~1.0.2"
 
+argparse@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38"
+  integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==
+
 arr-diff@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-4.0.0.tgz#d6461074febfec71e7e15235761a329a5dc7c520"
@@ -2517,6 +2579,22 @@ bn.js@^5.0.0, bn.js@^5.1.1:
   resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-5.2.0.tgz#358860674396c6997771a9d051fcc1b57d4ae002"
   integrity sha512-D7iWRBvnZE8ecXiLj/9wbxH7Tk79fAh8IHaTNq1RWRixsS02W+5qS+iE9yq6RYl0asXx5tw0bLhmT5pIfbSquw==
 
+body-parser@^1.19.0:
+  version "1.19.0"
+  resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.19.0.tgz#96b2709e57c9c4e09a6fd66a8fd979844f69f08a"
+  integrity sha512-dhEPs72UPbDnAQJ9ZKMNTP6ptJaionhP5cBb541nXPlW60Jepo9RV/a4fX4XWW9CuFNK22krhrj1+rgzifNCsw==
+  dependencies:
+    bytes "3.1.0"
+    content-type "~1.0.4"
+    debug "2.6.9"
+    depd "~1.1.2"
+    http-errors "1.7.2"
+    iconv-lite "0.4.24"
+    on-finished "~2.3.0"
+    qs "6.7.0"
+    raw-body "2.4.0"
+    type-is "~1.6.17"
+
 boolbase@^1.0.0, boolbase@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
@@ -2686,6 +2764,11 @@ bytes@3.0.0:
   resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.0.0.tgz#d32815404d689699f85a4ea4fa8755dd13a96048"
   integrity sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg=
 
+bytes@3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.1.0.tgz#f6cf7933a360e0588fa9fde85651cdc7f805d1f6"
+  integrity sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg==
+
 cacache@^12.0.2:
   version "12.0.4"
   resolved "https://registry.yarnpkg.com/cacache/-/cacache-12.0.4.tgz#668bcbd105aeb5f1d92fe25570ec9525c8faa40c"
@@ -2998,6 +3081,11 @@ clone-deep@^4.0.1:
     kind-of "^6.0.2"
     shallow-clone "^3.0.0"
 
+clone@^2.1.0:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/clone/-/clone-2.1.2.tgz#1b7f4b9f591f1e8f83670401600345a02887435f"
+  integrity sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18=
+
 coa@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/coa/-/coa-2.0.2.tgz#43f6c21151b4ef2bf57187db0d73de229e3e7ec3"
@@ -3152,6 +3240,11 @@ constants-browserify@^1.0.0:
   resolved "https://registry.yarnpkg.com/constants-browserify/-/constants-browserify-1.0.0.tgz#c20b96d8c617748aaf1c16021760cd27fcb8cb75"
   integrity sha1-wguW2MYXdIqvHBYCF2DNJ/y4y3U=
 
+content-type@~1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.4.tgz#e138cc75e040c727b1966fe5e5f8c9aee256fe3b"
+  integrity sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==
+
 convert-source-map@^1.7.0:
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.8.0.tgz#f3373c32d21b4d780dd8004514684fb791ca4369"
@@ -3164,6 +3257,11 @@ cookie@^0.3.1:
   resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.3.1.tgz#e7e0a1f9ef43b4c8ba925c5c5a96e806d16873bb"
   integrity sha1-5+Ch+e9DtMi6klxcWpboBtFoc7s=
 
+cookie@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.4.1.tgz#afd713fe26ebd21ba95ceb61f9a8116e50a537d1"
+  integrity sha512-ZwrFkGJxUR3EIoXtO+yVE69Eb7KlixbaeAWfBQB9vVsNn/o+Yw69gBWSSDK825hQNdN+wF8zELf3dFNl/kxkUA==
+
 copy-concurrently@^1.0.0:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/copy-concurrently/-/copy-concurrently-1.0.5.tgz#92297398cae34937fcafd6ec8139c18051f0b5e0"
@@ -3844,6 +3942,11 @@ entities@^2.0.0:
   resolved "https://registry.yarnpkg.com/entities/-/entities-2.2.0.tgz#098dc90ebb83d8dffa089d55256b351d34c4da55"
   integrity sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==
 
+entities@~2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-2.1.0.tgz#992d3129cf7df6870b96c57858c249a120f8b8b5"
+  integrity sha512-hCx1oky9PFrJ611mf0ifBLBRW8lUUVRlFolb5gWRfIELabBlbp9xZvrqZLZAs+NxFnbfQoeGd8wDkygjg7U85w==
+
 errno@^0.1.3, errno@~0.1.7:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.8.tgz#8bb3e9c7d463be4976ff888f76b4809ebc2e811f"
@@ -4000,6 +4103,13 @@ eslint-plugin-nuxt@^2.0.0:
     semver "^7.3.2"
     vue-eslint-parser "^7.1.1"
 
+eslint-plugin-prettier@^3.4.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-3.4.0.tgz#cdbad3bf1dbd2b177e9825737fe63b476a08f0c7"
+  integrity sha512-UDK6rJT6INSfcOo545jiaOwB701uAIt2/dR7WnFQoGCVl1/EMqdANBmwUaqqQ45aXprsTGzSa39LI1PyuRBxxw==
+  dependencies:
+    prettier-linter-helpers "^1.0.0"
+
 eslint-plugin-promise@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/eslint-plugin-promise/-/eslint-plugin-promise-5.1.0.tgz#fb2188fb734e4557993733b41aa1a688f46c6f24"
@@ -4334,6 +4444,11 @@ fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
 
+fast-diff@^1.1.2:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.2.0.tgz#73ee11982d86caaf7959828d519cfe927fac5f03"
+  integrity sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==
+
 fast-glob@^3.1.1:
   version "3.2.7"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.7.tgz#fd6cb7a2d7e9aa7a7846111e85a196d6b2f766a1"
@@ -4968,6 +5083,17 @@ htmlparser2@^6.1.0:
     domutils "^2.5.2"
     entities "^2.0.0"
 
+http-errors@1.7.2:
+  version "1.7.2"
+  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.7.2.tgz#4f5029cf13239f31036e5b2e55292bcfbcc85c8f"
+  integrity sha512-uUQBt3H/cSIVfch6i1EuPNy/YsRSOUBXTVfZ+yR7Zjez3qjBz6i9+i4zjNaoqcoFVI4lQJ5plg63TvGfRSDCRg==
+  dependencies:
+    depd "~1.1.2"
+    inherits "2.0.3"
+    setprototypeof "1.1.1"
+    statuses ">= 1.5.0 < 2"
+    toidentifier "1.0.0"
+
 http-errors@~1.7.2:
   version "1.7.3"
   resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.7.3.tgz#6c619e4f9c60308c38519498c14fbb10aacebb06"
@@ -5019,7 +5145,7 @@ husky@^6.0.0:
   resolved "https://registry.yarnpkg.com/husky/-/husky-6.0.0.tgz#810f11869adf51604c32ea577edbc377d7f9319e"
   integrity sha512-SQS2gDTB7tBN486QSoKPKQItZw97BMOd+Kdb6ghfpBc0yXyzrddI0oDV5MkDAbuB4X2mO3/nj60TRMcYxwzZeQ==
 
-iconv-lite@^0.4.24:
+iconv-lite@0.4.24, iconv-lite@^0.4.24:
   version "0.4.24"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
   integrity sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==
@@ -5341,6 +5467,11 @@ is-glob@^4.0.0, is-glob@^4.0.1, is-glob@~4.0.1:
   dependencies:
     is-extglob "^2.1.1"
 
+is-https@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/is-https/-/is-https-4.0.0.tgz#9ee725a334fb517b988278d2674efc96e4f348ed"
+  integrity sha512-FeMLiqf8E5g6SdiVJsPcNZX8k4h2fBs1wp5Bb6uaNxn58ufK1axBqQZdmAQsqh0t9BuwFObybrdVJh6MKyPlyg==
+
 is-negative-zero@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/is-negative-zero/-/is-negative-zero-2.0.1.tgz#3de746c18dda2319241a53675908d8f766f11c24"
@@ -5493,6 +5624,11 @@ jiti@^1.9.2:
   resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.11.0.tgz#64120a30d97b9bf37b8b032cf4564dfadc28984c"
   integrity sha512-/2c7e61hxxTIN34UeHBB0LCJ5Tq64kgJDV7GR+++e8XRxCKRIKmB8tH6ww1W+Z6Kgd6By+C3RSCu1lXjbPT68A==
 
+js-cookie@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/js-cookie/-/js-cookie-2.2.1.tgz#69e106dc5d5806894562902aa5baec3744e9b2b8"
+  integrity sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ==
+
 js-tokens@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
@@ -5548,7 +5684,7 @@ json5@^1.0.1:
   dependencies:
     minimist "^1.2.0"
 
-json5@^2.1.2, json5@^2.2.0:
+json5@^2.1.1, json5@^2.1.2, json5@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.0.tgz#2dfefe720c6ba525d9ebd909950f0515316c89a3"
   integrity sha512-f+8cldu7X/y7RAJurMEJmdoKXGB/X550w2Nr3tTbezL6RwEE/iMcm+tZnXeoZtKuOq6ft8+CqzEkrIgx1fPoQA==
@@ -5571,6 +5707,11 @@ jsonfile@^6.0.1:
   optionalDependencies:
     graceful-fs "^4.1.6"
 
+jwt-decode@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/jwt-decode/-/jwt-decode-3.1.2.tgz#3fb319f3675a2df0c2895c8f5e9fa4b67b04ed59"
+  integrity sha512-UfpWE/VZn0iP50d8cz9NrZLM9lSWhcJ+0Gt/nm4by88UL+J1SiKN8/5dkjMmbEzwL2CAe+67GsegCbIKtbp75A==
+
 kind-of@^3.0.2, kind-of@^3.0.3, kind-of@^3.2.0:
   version "3.2.2"
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-3.2.2.tgz#31ea21a734bab9bbb0f32466d893aea51e4a3c64"
@@ -5636,6 +5777,13 @@ lines-and-columns@^1.1.6:
   resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00"
   integrity sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=
 
+linkify-it@^3.0.1:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/linkify-it/-/linkify-it-3.0.2.tgz#f55eeb8bc1d3ae754049e124ab3bb56d97797fb8"
+  integrity sha512-gDBO4aHNZS6coiZCKVhSNh43F9ioIL4JwRjLZPkoLIY4yZFwg264Y5lu2x6rb1Js42Gh6Yqm2f6L2AJcnkzinQ==
+  dependencies:
+    uc.micro "^1.0.1"
+
 lint-staged@^10.5.4:
   version "10.5.4"
   resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-10.5.4.tgz#cd153b5f0987d2371fc1d2847a409a2fe705b665"
@@ -5891,6 +6039,65 @@ map-visit@^1.0.0:
   dependencies:
     object-visit "^1.0.0"
 
+markdown-it-abbr@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/markdown-it-abbr/-/markdown-it-abbr-1.0.4.tgz#d66b5364521cbb3dd8aa59dadfba2fb6865c8fd8"
+  integrity sha1-1mtTZFIcuz3Yqlna37ovtoZcj9g=
+
+markdown-it-deflist@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/markdown-it-deflist/-/markdown-it-deflist-2.1.0.tgz#50d7a56b9544cd81252f7623bd785e28a8dcef5c"
+  integrity sha512-3OuqoRUlSxJiuQYu0cWTLHNhhq2xtoSFqsZK8plANg91+RJQU1ziQ6lA2LzmFAEes18uPBsHZpcX6We5l76Nzg==
+
+markdown-it-emoji@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/markdown-it-emoji/-/markdown-it-emoji-2.0.0.tgz#3164ad4c009efd946e98274f7562ad611089a231"
+  integrity sha512-39j7/9vP/CPCKbEI44oV8yoPJTpvfeReTn/COgRhSpNrjWF3PfP/JUxxB0hxV6ynOY8KH8Y8aX9NMDdo6z+6YQ==
+
+markdown-it-footnote@^3.0.2:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/markdown-it-footnote/-/markdown-it-footnote-3.0.3.tgz#e0e4c0d67390a4c5f0c75f73be605c7c190ca4d8"
+  integrity sha512-YZMSuCGVZAjzKMn+xqIco9d1cLGxbELHZ9do/TSYVzraooV8ypsppKNmUJ0fVH5ljkCInQAtFpm8Rb3eXSrt5w==
+
+markdown-it-ins@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/markdown-it-ins/-/markdown-it-ins-3.0.1.tgz#c09356b917cf1dbf73add0b275d67ab8c73d4b4d"
+  integrity sha512-32SSfZqSzqyAmmQ4SHvhxbFqSzPDqsZgMHDwxqPzp+v+t8RsmqsBZRG+RfRQskJko9PfKC2/oxyOs4Yg/CfiRw==
+
+markdown-it-mark@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/markdown-it-mark/-/markdown-it-mark-3.0.1.tgz#51257db58787d78aaf46dc13418d99a9f3f0ebd3"
+  integrity sha512-HyxjAu6BRsdt6Xcv6TKVQnkz/E70TdGXEFHRYBGLncRE9lBFwDNLVtFojKxjJWgJ+5XxUwLaHXy+2sGBbDn+4A==
+
+markdown-it-sub@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/markdown-it-sub/-/markdown-it-sub-1.0.0.tgz#375fd6026eae7ddcb012497f6411195ea1e3afe8"
+  integrity sha1-N1/WAm6ufdywEkl/ZBEZXqHjr+g=
+
+markdown-it-sup@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/markdown-it-sup/-/markdown-it-sup-1.0.0.tgz#cb9c9ff91a5255ac08f3fd3d63286e15df0a1fc3"
+  integrity sha1-y5yf+RpSVawI8/09YyhuFd8KH8M=
+
+markdown-it-toc-and-anchor@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/markdown-it-toc-and-anchor/-/markdown-it-toc-and-anchor-4.2.0.tgz#d1613327cc63c61f82cd66cbac5564f4db12c0e9"
+  integrity sha512-DusSbKtg8CwZ92ztN7bOojDpP4h0+w7BVOPuA3PHDIaabMsERYpwsazLYSP/UlKedoQjOz21mwlai36TQ04EpA==
+  dependencies:
+    clone "^2.1.0"
+    uslug "^1.0.4"
+
+markdown-it@^12.0.3:
+  version "12.1.0"
+  resolved "https://registry.yarnpkg.com/markdown-it/-/markdown-it-12.1.0.tgz#7ad572caddd336bd27a68d20e86bac1fafe8fb20"
+  integrity sha512-7temG6IFOOxfU0SgzhqR+vr2diuMhyO5uUIEZ3C5NbXhqC9uFUHoU41USYuDFoZRsaY7BEIEei874Z20VMLF6A==
+  dependencies:
+    argparse "^2.0.1"
+    entities "~2.1.0"
+    linkify-it "^3.0.1"
+    mdurl "^1.0.1"
+    uc.micro "^1.0.5"
+
 md5.js@^1.3.4:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"
@@ -5910,6 +6117,16 @@ mdn-data@2.0.4:
   resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.4.tgz#699b3c38ac6f1d728091a64650b65d388502fd5b"
   integrity sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA==
 
+mdurl@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/mdurl/-/mdurl-1.0.1.tgz#fe85b2ec75a59037f2adfec100fd6c601761152e"
+  integrity sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4=
+
+media-typer@0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
+  integrity sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=
+
 mem@^8.1.1:
   version "8.1.1"
   resolved "https://registry.yarnpkg.com/mem/-/mem-8.1.1.tgz#cf118b357c65ab7b7e0817bdf00c8062297c0122"
@@ -6359,6 +6576,24 @@ num2fraction@^1.2.2:
   resolved "https://registry.yarnpkg.com/num2fraction/-/num2fraction-1.2.2.tgz#6f682b6a027a4e9ddfa4564cd2589d1d4e669ede"
   integrity sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4=
 
+nuxt-i18n@^6.28.0:
+  version "6.28.0"
+  resolved "https://registry.yarnpkg.com/nuxt-i18n/-/nuxt-i18n-6.28.0.tgz#05924b8cf4b12633041a547b39e43db2f1f852a8"
+  integrity sha512-8XT9UflwAlEDROMTZOwQKFrnM2+eqbHC8UJNlLCjODOCrmhMHGSfojxbFxs4W4+hKdDw4Gz30PHK6v6GIqIzMQ==
+  dependencies:
+    "@babel/parser" "^7.14.7"
+    "@babel/traverse" "^7.14.7"
+    "@intlify/vue-i18n-extensions" "^1.0.2"
+    "@intlify/vue-i18n-loader" "^1.1.0"
+    cookie "^0.4.1"
+    devalue "^2.0.1"
+    is-https "^4.0.0"
+    js-cookie "^2.2.1"
+    klona "^2.0.4"
+    lodash.merge "^4.6.2"
+    ufo "^0.7.7"
+    vue-i18n "^8.25.0"
+
 nuxt@^2.15.7:
   version "2.15.7"
   resolved "https://registry.yarnpkg.com/nuxt/-/nuxt-2.15.7.tgz#45332e3b00ba5c1cf04688d42373c8ed7ef4dca7"
@@ -7472,6 +7707,13 @@ prepend-http@^1.0.0:
   resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc"
   integrity sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=
 
+prettier-linter-helpers@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz#d23d41fe1375646de2d0104d3454a3008802cf7b"
+  integrity sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==
+  dependencies:
+    fast-diff "^1.1.2"
+
 prettier@^1.18.2:
   version "1.19.1"
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.19.1.tgz#f7d7f5ff8a9cd872a7be4ca142095956a60797cb"
@@ -7601,6 +7843,11 @@ q@^1.1.2:
   resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
   integrity sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=
 
+qs@6.7.0:
+  version "6.7.0"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.7.0.tgz#41dc1a015e3d581f1621776be31afb2876a9b1bc"
+  integrity sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ==
+
 qs@^6.9.4:
   version "6.10.1"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.10.1.tgz#4931482fa8d647a5aab799c5271d2133b981fb6a"
@@ -7666,6 +7913,16 @@ range-parser@^1.2.1, range-parser@~1.2.1:
   resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.1.tgz#3cf37023d199e1c24d1a55b84800c2f3e6468031"
   integrity sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==
 
+raw-body@2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/raw-body/-/raw-body-2.4.0.tgz#a1ce6fb9c9bc356ca52e89256ab59059e13d0332"
+  integrity sha512-4Oz8DUIwdvoa5qMJelxipzi/iJIi40O5cGV1wNYp5hvZP8ZN0T+jiNkL0QepXs+EsQ9XJ8ipEDoiH70ySUJP3Q==
+  dependencies:
+    bytes "3.1.0"
+    http-errors "1.7.2"
+    iconv-lite "0.4.24"
+    unpipe "1.0.0"
+
 rc9@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/rc9/-/rc9-1.2.0.tgz#ef098181fdde714efc4c426383d6e46c14b1254a"
@@ -7863,6 +8120,11 @@ requires-port@^1.0.0:
   resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
   integrity sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=
 
+requrl@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/requrl/-/requrl-3.0.2.tgz#d376104193b02a2d874dde68454c2db2dfeb0fac"
+  integrity sha512-f3gjR6d8MhOpn46PP+DSJywbmxi95fxQm3coXBFwognjFLla9X6tr8BdNyaIKNOEkaRbRcm0/zYAqN19N1oyhg==
+
 reserved-words@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/reserved-words/-/reserved-words-0.1.2.tgz#00a0940f98cd501aeaaac316411d9adc52b31ab1"
@@ -8314,6 +8576,11 @@ sort-keys@^2.0.0:
   dependencies:
     is-plain-obj "^1.0.0"
 
+sortablejs@1.10.2:
+  version "1.10.2"
+  resolved "https://registry.yarnpkg.com/sortablejs/-/sortablejs-1.10.2.tgz#6e40364d913f98b85a14f6678f92b5c1221f5290"
+  integrity sha512-YkPGufevysvfwn5rfdlGyrGjt7/CRHwvRPogD/lC+TnvcN29jDpCifKP+rBqf+LRldfXSTh+0CGLcSg0VIxq3A==
+
 source-list-map@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.1.tgz#3993bd873bfc48479cca9ea3a547835c7c154b34"
@@ -8939,6 +9206,14 @@ type-fest@^0.8.0, type-fest@^0.8.1:
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.8.1.tgz#09e249ebde851d3b1e48d27c105444667f17b83d"
   integrity sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==
 
+type-is@~1.6.17:
+  version "1.6.18"
+  resolved "https://registry.yarnpkg.com/type-is/-/type-is-1.6.18.tgz#4e552cd05df09467dcbc4ef739de89f2cf37c131"
+  integrity sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==
+  dependencies:
+    media-typer "0.3.0"
+    mime-types "~2.1.24"
+
 typedarray@^0.0.6:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
@@ -8954,6 +9229,11 @@ ua-parser-js@^0.7.28:
   resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.28.tgz#8ba04e653f35ce210239c64661685bf9121dec31"
   integrity sha512-6Gurc1n//gjp9eQNXjD9O3M/sMwVtN5S8Lv9bvOYBfKfDNiIIhqiyi01vMBO45u4zkDE420w/e0se7Vs+sIg+g==
 
+uc.micro@^1.0.1, uc.micro@^1.0.5:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/uc.micro/-/uc.micro-1.0.6.tgz#9c411a802a409a91fc6cf74081baba34b24499ac"
+  integrity sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==
+
 ufo@^0.7.4, ufo@^0.7.7:
   version "0.7.7"
   resolved "https://registry.yarnpkg.com/ufo/-/ufo-0.7.7.tgz#0062f9e5e790819b0fb23ca24d7c63a4011c036a"
@@ -9046,7 +9326,12 @@ universalify@^2.0.0:
   resolved "https://registry.yarnpkg.com/universalify/-/universalify-2.0.0.tgz#75a4984efedc4b08975c5aeb73f530d02df25717"
   integrity sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==
 
-unpipe@~1.0.0:
+"unorm@>= 1.0.0":
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/unorm/-/unorm-1.6.0.tgz#029b289661fba714f1a9af439eb51d9b16c205af"
+  integrity sha512-b2/KCUlYZUeA7JFUuRJZPUtr4gZvBh7tavtv4fvk4+KV9pfGiR6CQAQAWl49ZpR3ts2dk4FYkP7EIgDJoiOLDA==
+
+unpipe@1.0.0, unpipe@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"
   integrity sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=
@@ -9113,6 +9398,13 @@ use@^3.1.0:
   resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"
   integrity sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==
 
+uslug@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/uslug/-/uslug-1.0.4.tgz#b9a22f0914e0a86140633dacc302e5f4fa450677"
+  integrity sha1-uaIvCRTgqGFAYz2swwLl9PpFBnc=
+  dependencies:
+    unorm ">= 1.0.0"
+
 util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
@@ -9216,6 +9508,11 @@ vue-hot-reload-api@^2.3.0:
   resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz#532955cc1eb208a3d990b3a9f9a70574657e08f2"
   integrity sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==
 
+vue-i18n@^8.25.0:
+  version "8.25.0"
+  resolved "https://registry.yarnpkg.com/vue-i18n/-/vue-i18n-8.25.0.tgz#1037d9295fa2845a230b771de473481edb2cfc4c"
+  integrity sha512-ynhcL+PmTxuuSE1T10htiSXzjBozxYIE3ffbM1RfgAkVbr/v1SP+9Mi/7/uv8ZVV1yGuKjFAYp9BXq+X7op6MQ==
+
 vue-loader@^15.9.7:
   version "15.9.7"
   resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-15.9.7.tgz#15b05775c3e0c38407679393c2ce6df673b01044"
@@ -9284,6 +9581,13 @@ vue@^2.6.12:
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.14.tgz#e51aa5250250d569a3fbad3a8a5a687d6036e235"
   integrity sha512-x2284lgYvjOMj3Za7kqzRcUSxBboHqtgRE2zlos1qWaOye5yUmHn42LB1250NJBLRwEcdrB0JRwyPTEPhfQjiQ==
 
+vuedraggable@^2.24.3:
+  version "2.24.3"
+  resolved "https://registry.yarnpkg.com/vuedraggable/-/vuedraggable-2.24.3.tgz#43c93849b746a24ce503e123d5b259c701ba0d19"
+  integrity sha512-6/HDXi92GzB+Hcs9fC6PAAozK1RLt1ewPTLjK0anTYguXLAeySDmcnqE8IC0xa7shvSzRjQXq3/+dsZ7ETGF3g==
+  dependencies:
+    sortablejs "1.10.2"
+
 vuetify-loader@^1.7.2:
   version "1.7.2"
   resolved "https://registry.yarnpkg.com/vuetify-loader/-/vuetify-loader-1.7.2.tgz#5cdc45309496cf3a5fe431fd7611706ffa4aa8c8"
diff --git a/poetry.lock b/poetry.lock
index 2a8a7e3b771f..3d0670dcf72d 100644
--- a/poetry.lock
+++ b/poetry.lock
@@ -173,7 +173,7 @@ pycparser = "*"
 
 [[package]]
 name = "charset-normalizer"
-version = "2.0.3"
+version = "2.0.4"
 description = "The Real First Universal Charset Detector. Open, modern and actively maintained alternative to Chardet."
 category = "main"
 optional = false
@@ -413,7 +413,7 @@ python-versions = ">=3.5"
 
 [[package]]
 name = "importlib-metadata"
-version = "4.6.1"
+version = "4.6.3"
 description = "Read metadata from Python packages"
 category = "dev"
 optional = false
@@ -448,7 +448,7 @@ six = "*"
 
 [[package]]
 name = "isort"
-version = "5.9.2"
+version = "5.9.3"
 description = "A Python utility / library to sort Python imports."
 category = "dev"
 optional = false
@@ -577,7 +577,7 @@ i18n = ["babel (>=2.9.0)"]
 
 [[package]]
 name = "mkdocs-material"
-version = "7.2.0"
+version = "7.2.2"
 description = "A Material Design theme for MkDocs"
 category = "dev"
 optional = false
@@ -740,6 +740,18 @@ typing-extensions = ">=3.7.4.3"
 dotenv = ["python-dotenv (>=0.10.4)"]
 email = ["email-validator (>=1.0.3)"]
 
+[[package]]
+name = "pydantic-to-typescript"
+version = "1.0.7"
+description = "Convert pydantic models to typescript interfaces"
+category = "dev"
+optional = false
+python-versions = "*"
+
+[package.dependencies]
+click = "*"
+pydantic = "*"
+
 [[package]]
 name = "pyflakes"
 version = "2.3.1"
@@ -766,7 +778,7 @@ python-versions = "*"
 
 [[package]]
 name = "pylint"
-version = "2.9.5"
+version = "2.9.6"
 description = "python code static checker"
 category = "dev"
 optional = false
@@ -1282,7 +1294,7 @@ pgsql = ["psycopg2-binary"]
 [metadata]
 lock-version = "1.1"
 python-versions = "^3.9"
-content-hash = "a06d6cf8970f370f05958cc8190a97c731dd586405d51ed11b828de842fbe1d2"
+content-hash = "c5beb9d4a67cd02434b365bb0d6bec1a1d0688a2b2ff20acb991e103ee8ee8bf"
 
 [metadata.files]
 aiofiles = [
@@ -1386,8 +1398,8 @@ cffi = [
     {file = "cffi-1.14.6.tar.gz", hash = "sha256:c9a875ce9d7fe32887784274dd533c57909b7b1dcadcc128a2ac21331a9765dd"},
 ]
 charset-normalizer = [
-    {file = "charset-normalizer-2.0.3.tar.gz", hash = "sha256:c46c3ace2d744cfbdebceaa3c19ae691f53ae621b39fd7570f59d14fb7f2fd12"},
-    {file = "charset_normalizer-2.0.3-py3-none-any.whl", hash = "sha256:88fce3fa5b1a84fdcb3f603d889f723d1dd89b26059d0123ca435570e848d5e1"},
+    {file = "charset-normalizer-2.0.4.tar.gz", hash = "sha256:f23667ebe1084be45f6ae0538e4a5a865206544097e4e8bbcacf42cd02a348f3"},
+    {file = "charset_normalizer-2.0.4-py3-none-any.whl", hash = "sha256:0c8911edd15d19223366a194a513099a302055a962bca2cec0f54b8b63175d8b"},
 ]
 click = [
     {file = "click-7.1.2-py2.py3-none-any.whl", hash = "sha256:dacca89f4bfadd5de3d7489b7c8a566eee0d3676333fbb50030263894c38c0dc"},
@@ -1580,8 +1592,8 @@ idna = [
     {file = "idna-3.2.tar.gz", hash = "sha256:467fbad99067910785144ce333826c71fb0e63a425657295239737f7ecd125f3"},
 ]
 importlib-metadata = [
-    {file = "importlib_metadata-4.6.1-py3-none-any.whl", hash = "sha256:9f55f560e116f8643ecf2922d9cd3e1c7e8d52e683178fecd9d08f6aa357e11e"},
-    {file = "importlib_metadata-4.6.1.tar.gz", hash = "sha256:079ada16b7fc30dfbb5d13399a5113110dab1aa7c2bc62f66af75f0b717c8cac"},
+    {file = "importlib_metadata-4.6.3-py3-none-any.whl", hash = "sha256:51c6635429c77cf1ae634c997ff9e53ca3438b495f10a55ba28594dd69764a8b"},
+    {file = "importlib_metadata-4.6.3.tar.gz", hash = "sha256:0645585859e9a6689c523927a5032f2ba5919f1f7d0e84bd4533312320de1ff9"},
 ]
 iniconfig = [
     {file = "iniconfig-1.1.1-py2.py3-none-any.whl", hash = "sha256:011e24c64b7f47f6ebd835bb12a743f2fbe9a26d4cecaa7f53bc4f35ee9da8b3"},
@@ -1592,8 +1604,8 @@ isodate = [
     {file = "isodate-0.6.0.tar.gz", hash = "sha256:2e364a3d5759479cdb2d37cce6b9376ea504db2ff90252a2e5b7cc89cc9ff2d8"},
 ]
 isort = [
-    {file = "isort-5.9.2-py3-none-any.whl", hash = "sha256:eed17b53c3e7912425579853d078a0832820f023191561fcee9d7cae424e0813"},
-    {file = "isort-5.9.2.tar.gz", hash = "sha256:f65ce5bd4cbc6abdfbe29afc2f0245538ab358c14590912df638033f157d555e"},
+    {file = "isort-5.9.3-py3-none-any.whl", hash = "sha256:e17d6e2b81095c9db0a03a8025a957f334d6ea30b26f9ec70805411e5c7c81f2"},
+    {file = "isort-5.9.3.tar.gz", hash = "sha256:9c2ea1e62d871267b78307fe511c0838ba0da28698c5732d54e2790bf3ba9899"},
 ]
 jinja2 = [
     {file = "Jinja2-2.11.3-py2.py3-none-any.whl", hash = "sha256:03e47ad063331dd6a3f04a43eddca8a966a26ba0c5b7207a9a9e4e08f1b29419"},
@@ -1721,8 +1733,8 @@ mkdocs = [
     {file = "mkdocs-1.2.2.tar.gz", hash = "sha256:a334f5bd98ec960638511366eb8c5abc9c99b9083a0ed2401d8791b112d6b078"},
 ]
 mkdocs-material = [
-    {file = "mkdocs-material-7.2.0.tar.gz", hash = "sha256:9f43c5874e119b312a6f369ef363815c11f182b5cdeff4a3426615ebc4664ace"},
-    {file = "mkdocs_material-7.2.0-py2.py3-none-any.whl", hash = "sha256:8b3750857e168a9ca20be34890791817090b016248a39be45069fab5343f1dc0"},
+    {file = "mkdocs-material-7.2.2.tar.gz", hash = "sha256:4f501e139e2f8546653e7d8777c9b97ca639d03d8c86345a60609864cc5bbb03"},
+    {file = "mkdocs_material-7.2.2-py2.py3-none-any.whl", hash = "sha256:76de22213f0e0319b9bddf1bfa86530e93efb4a604e9ddf8f8419f0438572523"},
 ]
 mkdocs-material-extensions = [
     {file = "mkdocs-material-extensions-1.0.1.tar.gz", hash = "sha256:6947fb7f5e4291e3c61405bad3539d81e0b3cd62ae0d66ced018128af509c68f"},
@@ -1879,6 +1891,11 @@ pydantic = [
     {file = "pydantic-1.8.2-py3-none-any.whl", hash = "sha256:fec866a0b59f372b7e776f2d7308511784dace622e0992a0b59ea3ccee0ae833"},
     {file = "pydantic-1.8.2.tar.gz", hash = "sha256:26464e57ccaafe72b7ad156fdaa4e9b9ef051f69e175dbbb463283000c05ab7b"},
 ]
+pydantic-to-typescript = [
+    {file = "pydantic-to-typescript-1.0.7.tar.gz", hash = "sha256:dccf668e97626e616d20f2b1b99a568b5ac16344f3b2c850ebc463118b21a3d7"},
+    {file = "pydantic_to_typescript-1.0.7-py3-none-any.whl", hash = "sha256:b3d093cbd15fd938faa09d1128621f27a9a93bef275eea5eb0912987d5d9d843"},
+    {file = "pydantic_to_typescript-1.0.7-py3.8.egg", hash = "sha256:b4917453d74df1b401259b881117ae164bf1bac2cac849a88466badb43825e6d"},
+]
 pyflakes = [
     {file = "pyflakes-2.3.1-py2.py3-none-any.whl", hash = "sha256:7893783d01b8a89811dd72d7dfd4d84ff098e5eed95cfa8905b22bbffe52efc3"},
     {file = "pyflakes-2.3.1.tar.gz", hash = "sha256:f5bc8ecabc05bb9d291eb5203d6810b49040f6ff446a756326104746cc00c1db"},
@@ -1892,8 +1909,8 @@ pyhumps = [
     {file = "pyhumps-3.0.2.tar.gz", hash = "sha256:042b4b6eec6c1f862f8310c0eebbae19293e9edab8cafb030ff78c890ef1aa34"},
 ]
 pylint = [
-    {file = "pylint-2.9.5-py3-none-any.whl", hash = "sha256:748f81e5776d6273a6619506e08f1b48ff9bcb8198366a56821cf11aac14fc87"},
-    {file = "pylint-2.9.5.tar.gz", hash = "sha256:1f333dc72ef7f5ea166b3230936ebcfb1f3b722e76c980cb9fe6b9f95e8d3172"},
+    {file = "pylint-2.9.6-py3-none-any.whl", hash = "sha256:2e1a0eb2e8ab41d6b5dbada87f066492bb1557b12b76c47c2ee8aa8a11186594"},
+    {file = "pylint-2.9.6.tar.gz", hash = "sha256:8b838c8983ee1904b2de66cce9d0b96649a91901350e956d78f289c3bc87b48e"},
 ]
 pymdown-extensions = [
     {file = "pymdown-extensions-8.2.tar.gz", hash = "sha256:b6daa94aad9e1310f9c64c8b1f01e4ce82937ab7eb53bfc92876a97aca02a6f4"},
diff --git a/pyproject.toml b/pyproject.toml
index 498735093a84..f672f7548e6b 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -45,6 +45,7 @@ pytest-cov = "^2.11.0"
 mkdocs-material = "^7.0.2"
 flake8 = "^3.9.0"
 coverage = "^5.5"
+pydantic-to-typescript = "^1.0.7"
 
 [build-system]
 requires = ["poetry-core>=1.0.0"]
diff --git a/vetur.config.js b/vetur.config.js
index a02a5672618b..e59ab1d60346 100644
--- a/vetur.config.js
+++ b/vetur.config.js
@@ -10,6 +10,7 @@ module.exports = {
     {
       root: "./frontend",
       package: "package.json",
+      tsconfig: "tsconfig.json",
       globalComponents: ["./src/components/**/*.vue"],
     },
   ],