diff --git a/frontend/assets/main.css b/frontend/assets/main.css
index b5ff067e..91c64313 100644
--- a/frontend/assets/main.css
+++ b/frontend/assets/main.css
@@ -6,3 +6,7 @@
 .layout-leave-active {
   opacity: 0;
 }
+
+.narrow-container {
+  max-width: 700px !important;
+}
diff --git a/frontend/components/Domain/Recipe/RecipeCardSection.vue b/frontend/components/Domain/Recipe/RecipeCardSection.vue
index 1288b9ff..4ec0f09c 100644
--- a/frontend/components/Domain/Recipe/RecipeCardSection.vue
+++ b/frontend/components/Domain/Recipe/RecipeCardSection.vue
@@ -102,9 +102,9 @@
 </template>
 
 <script>
-import { utils } from "@/utils";
 import RecipeCard from "./RecipeCard";
 import RecipeCardMobile from "./RecipeCardMobile";
+import { useSorter } from "~/composables/use-recipes";
 const SORT_EVENT = "sort";
 
 export default {
@@ -142,6 +142,11 @@ export default {
       default: () => [],
     },
   },
+  setup() {
+    const utils = useSorter();
+
+    return { utils };
+  },
   data() {
     return {
       sortLoading: false,
@@ -197,7 +202,7 @@ export default {
       this.loading = false;
     },
     navigateRandom() {
-      const recipe = utils.recipe.randomRecipe(this.recipes);
+      const recipe = this.utils.recipe.randomRecipe(this.recipes);
       this.$router.push(`/recipe/${recipe.slug}`);
     },
     sortRecipes(sortType) {
@@ -205,19 +210,19 @@ export default {
       const sortTarget = [...this.recipes];
       switch (sortType) {
         case this.EVENTS.az:
-          utils.recipe.sortAToZ(sortTarget);
+          this.utils.sortAToZ(sortTarget);
           break;
         case this.EVENTS.rating:
-          utils.recipe.sortByRating(sortTarget);
+          this.utils.sortByRating(sortTarget);
           break;
         case this.EVENTS.created:
-          utils.recipe.sortByCreated(sortTarget);
+          this.utils.sortByCreated(sortTarget);
           break;
         case this.EVENTS.updated:
-          utils.recipe.sortByUpdated(sortTarget);
+          this.utils.sortByUpdated(sortTarget);
           break;
         case this.EVENTS.shuffle:
-          utils.recipe.shuffle(sortTarget);
+          this.utils.shuffle(sortTarget);
           break;
         default:
           console.log("Unknown Event", sortType);
diff --git a/frontend/components/Domain/Recipe/RecipeCategoryTagSelector.vue b/frontend/components/Domain/Recipe/RecipeCategoryTagSelector.vue
index cfdfe75a..35faeddd 100644
--- a/frontend/components/Domain/Recipe/RecipeCategoryTagSelector.vue
+++ b/frontend/components/Domain/Recipe/RecipeCategoryTagSelector.vue
@@ -18,6 +18,7 @@
   >
     <template #selection="data">
       <v-chip
+        v-if="showSelected"
         :key="data.index"
         class="ma-1"
         :input-value="data.selected"
@@ -78,6 +79,10 @@ export default {
       type: Boolean,
       default: true,
     },
+    showSelected: {
+      type: Boolean,
+      default: true,
+    },
   },
 
   setup() {
diff --git a/frontend/components/Domain/Recipe/RecipeContextMenu.vue b/frontend/components/Domain/Recipe/RecipeContextMenu.vue
index bafc1810..766964a3 100644
--- a/frontend/components/Domain/Recipe/RecipeContextMenu.vue
+++ b/frontend/components/Domain/Recipe/RecipeContextMenu.vue
@@ -41,7 +41,6 @@
 </template>
 
 <script>
-import { utils } from "@/utils";
 import { defineComponent, ref } from "@nuxtjs/composition-api";
 import { useApiSingleton } from "~/composables/use-api";
 export default defineComponent({
@@ -203,7 +202,6 @@ export default defineComponent({
       navigator.clipboard.writeText(copyText).then(
         () => {
           console.log("Copied to Clipboard", copyText);
-          utils.notify.success("Copied to Clipboard");
         },
         () => console.log("Copied Failed", copyText)
       );
diff --git a/frontend/components/Domain/Recipe/RecipeIngredients.vue b/frontend/components/Domain/Recipe/RecipeIngredients.vue
index 2feebc51..9776ebc5 100644
--- a/frontend/components/Domain/Recipe/RecipeIngredients.vue
+++ b/frontend/components/Domain/Recipe/RecipeIngredients.vue
@@ -2,7 +2,7 @@
   <div v-if="value && value.length > 0">
     <h2 class="mb-4">{{ $t("recipe.ingredients") }}</h2>
     <div>
-      <div v-for="(ingredient, index) in value" :key="generateKey('ingredient', index)">
+      <div v-for="(ingredient, index) in value" :key="'ingredient' + index">
         <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)">
@@ -20,7 +20,6 @@
 <script>
 import VueMarkdown from "@adapttive/vue-markdown";
 import { useFraction } from "@/composables/use-fraction";
-import { utils } from "@/utils";
 export default {
   components: {
     VueMarkdown,
@@ -87,10 +86,6 @@ export default {
     this.showTitleEditor = this.value.map((x) => this.validateTitle(x.title));
   },
   methods: {
-    generateKey(item, index) {
-      return utils.generateUniqueKey(item, index);
-    },
-
     toggleChecked(index) {
       this.$set(this.checked, index, !this.checked[index]);
     },
diff --git a/frontend/components/Domain/Recipe/RecipeInstructions.vue b/frontend/components/Domain/Recipe/RecipeInstructions.vue
index 5d24881f..f7199a20 100644
--- a/frontend/components/Domain/Recipe/RecipeInstructions.vue
+++ b/frontend/components/Domain/Recipe/RecipeInstructions.vue
@@ -88,7 +88,6 @@
 <script>
 import draggable from "vuedraggable";
 import VueMarkdown from "@adapttive/vue-markdown";
-import { utils } from "@/utils";
 export default {
   components: {
     VueMarkdown,
@@ -126,9 +125,6 @@ export default {
   },
 
   methods: {
-    generateKey(item, index) {
-      return utils.generateUniqueKey(item, index);
-    },
     removeByIndex(list, index) {
       list.splice(index, 1);
     },
diff --git a/frontend/components/Domain/Recipe/RecipeNotes.vue b/frontend/components/Domain/Recipe/RecipeNotes.vue
index 41c8debf..014c1c3f 100644
--- a/frontend/components/Domain/Recipe/RecipeNotes.vue
+++ b/frontend/components/Domain/Recipe/RecipeNotes.vue
@@ -1,7 +1,7 @@
 <template>
   <div v-if="value.length > 0 || edit">
     <h2 class="my-4">{{ $t("recipe.note") }}</h2>
-    <v-card v-for="(note, index) in value" :key="generateKey('note', index)" class="mt-1">
+    <v-card v-for="(note, index) in value" :key="'note' + index" class="mt-1">
       <div v-if="edit">
         <v-card-text>
           <v-row align="center">
@@ -35,7 +35,6 @@
 
 <script>
 import VueMarkdown from "@adapttive/vue-markdown";
-import { utils } from "@/utils";
 export default {
   components: {
     VueMarkdown,
@@ -52,9 +51,6 @@ export default {
     },
   },
   methods: {
-    generateKey(item, index) {
-      return utils.generateUniqueKey(item, index);
-    },
     addNote() {
       this.value.push({ title: "", text: "" });
     },
diff --git a/frontend/components/Domain/User/UserAPITokenCard.vue b/frontend/components/Domain/User/UserAPITokenCard.vue
deleted file mode 100644
index 94780c01..00000000
--- a/frontend/components/Domain/User/UserAPITokenCard.vue
+++ /dev/null
@@ -1,159 +0,0 @@
-<template>
-  <BaseStatCard :icon="$globals.icons.api" color="accent">
-    <template #after-heading>
-      <div class="ml-auto text-right">
-        <h2 class="body-3 grey--text font-weight-light">
-          {{ $t("settings.token.api-tokens") }}
-        </h2>
-        <h3 class="display-2 font-weight-light text--primary">
-          <small> {{ tokens.length }} </small>
-        </h3>
-      </div>
-    </template>
-    <template #bottom>
-      <v-subheader class="mb-n2">{{ $t("settings.token.active-tokens") }}</v-subheader>
-      <v-virtual-scroll height="210" item-height="70" :items="tokens" class="mt-2">
-        <template #default="{ item }">
-          <v-divider></v-divider>
-          <v-list-item @click.prevent>
-            <v-list-item-avatar>
-              <v-icon large dark color="accent">
-                {{ $globals.icons.api }}
-              </v-icon>
-            </v-list-item-avatar>
-
-            <v-list-item-content>
-              <v-list-item-title v-text="item.name"></v-list-item-title>
-            </v-list-item-content>
-
-            <v-list-item-action class="ml-auto">
-              <v-btn large icon @click.stop="deleteToken(item.id)">
-                <v-icon color="accent">{{ $globals.icons.delete }}</v-icon>
-              </v-btn>
-            </v-list-item-action>
-          </v-list-item>
-          <v-divider></v-divider>
-        </template>
-      </v-virtual-scroll>
-
-      <v-divider></v-divider>
-      <v-card-actions class="pb-1 pt-3">
-        <v-spacer></v-spacer>
-        <BaseDialog
-          :title="$t('settings.token.create-an-api-token')"
-          :title-icon="$globals.icons.api"
-          :submit-text="buttonText"
-          :loading="loading"
-          @submit="createToken(name)"
-        >
-          <v-card-text>
-            <v-form ref="domNewTokenForm" @submit.prevent>
-              <v-text-field v-model="name" :label="$t('settings.token.token-name')" required> </v-text-field>
-            </v-form>
-
-            <div v-if="createdToken != ''">
-              <v-textarea
-                v-model="createdToken"
-                class="mb-0 pb-0"
-                :label="$t('settings.token.api-token')"
-                readonly
-                :append-outer-icon="$globals.icons.contentCopy"
-                @click="copyToken"
-                @click:append-outer="copyToken"
-              >
-              </v-textarea>
-              <v-subheader class="text-center">
-                {{
-                  $t(
-                    "settings.token.copy-this-token-for-use-with-an-external-application-this-token-will-not-be-viewable-again"
-                  )
-                }}
-              </v-subheader>
-            </div>
-          </v-card-text>
-
-          <template #activator="{ open }">
-            <BaseButton create @click="open" />
-          </template>
-        </BaseDialog>
-      </v-card-actions>
-    </template>
-  </BaseStatCard>
-</template>
-
-<script lang="ts">
-import { defineComponent, ref } from "@nuxtjs/composition-api";
-import { useApiSingleton } from "~/composables/use-api";
-
-const REFRESH_EVENT = "refresh";
-
-export default defineComponent({
-  props: {
-    tokens: {
-      type: Array,
-      default: () => [],
-    },
-  },
-  setup(_, context) {
-    const api = useApiSingleton();
-
-    const domNewTokenForm = ref<VForm | null>(null);
-
-    const createdToken = ref("");
-    const name = ref("");
-    const loading = ref(false);
-
-    function resetCreate() {
-      createdToken.value = "";
-      loading.value = false;
-      name.value = "";
-      context.emit(REFRESH_EVENT);
-    }
-
-    async function createToken(name: string) {
-      if (loading.value) {
-        resetCreate();
-        return;
-      }
-
-      loading.value = true;
-
-      if (domNewTokenForm?.value?.validate()) {
-        console.log("Created");
-        return;
-      }
-
-      const { data } = await api.users.createAPIToken({ name });
-
-      if (data) {
-        createdToken.value = data.token;
-      }
-    }
-
-    async function deleteToken(id: string | number) {
-      const { data } = await api.users.deleteAPIToken(id);
-      context.emit(REFRESH_EVENT);
-      return data;
-    }
-
-    function copyToken() {
-      navigator.clipboard.writeText(createdToken.value).then(
-        () => console.log("Copied", createdToken.value),
-        () => console.log("Copied Failed", createdToken.value)
-      );
-    }
-
-    return { createToken, deleteToken, copyToken, createdToken, loading, name };
-  },
-  computed: {
-    buttonText(): any {
-      if (this.createdToken === "") {
-        return this.$t("general.create");
-      } else {
-        return this.$t("general.close");
-      }
-    },
-  },
-});
-</script>
-
diff --git a/frontend/components/Domain/User/UserProfileCard.vue b/frontend/components/Domain/User/UserProfileCard.vue
deleted file mode 100644
index 02f148a6..00000000
--- a/frontend/components/Domain/User/UserProfileCard.vue
+++ /dev/null
@@ -1,177 +0,0 @@
-<template>
-  <BaseStatCard :icon="$globals.icons.user" color="accent">
-    <template #after-heading>
-      <div class="ml-auto text-right">
-        <div class="body-3 grey--text font-weight-light" v-text="$t('user.user-id-with-value', { id: user.id })" />
-
-        <h3 class="display-2 font-weight-light text--primary">
-          <small> {{ $t("group.group-with-value", { groupID: user.group }) }}</small>
-        </h3>
-      </div>
-    </template>
-
-    <!-- Change Password -->
-    <template #actions>
-      <BaseDialog
-        :title="$t('user.reset-password')"
-        :title-icon="$globals.icons.lock"
-        :submit-text="$t('settings.change-password')"
-        :loading="loading"
-        :top="true"
-        @submit="updatePassword"
-      >
-        <template #activator="{ open }">
-          <v-btn color="info" class="mr-1" small @click="open">
-            <v-icon left>{{ $globals.icons.lock }}</v-icon>
-            {{ $t("settings.change-password") }}
-          </v-btn>
-        </template>
-
-        <v-card-text>
-          <v-form ref="passChange">
-            <v-text-field
-              v-model="password.current"
-              :prepend-icon="$globals.icons.lock"
-              :label="$t('user.current-password')"
-              validate-on-blur
-              :type="showPassword ? 'text' : 'password'"
-              @click:append="showPassword.current = !showPassword.current"
-            ></v-text-field>
-            <v-text-field
-              v-model="password.newOne"
-              :prepend-icon="$globals.icons.lock"
-              :label="$t('user.new-password')"
-              :type="showPassword ? 'text' : 'password'"
-              @click:append="showPassword.newOne = !showPassword.newOne"
-            ></v-text-field>
-            <v-text-field
-              v-model="password.newTwo"
-              :prepend-icon="$globals.icons.lock"
-              :label="$t('user.confirm-password')"
-              :rules="[password.newOne === password.newTwo || $t('user.password-must-match')]"
-              validate-on-blur
-              :type="showPassword ? 'text' : 'password'"
-              @click:append="showPassword.newTwo = !showPassword.newTwo"
-            ></v-text-field>
-          </v-form>
-        </v-card-text>
-      </BaseDialog>
-    </template>
-
-    <!-- Update User -->
-    <template #bottom>
-      <v-card-text>
-        <v-form ref="userUpdate">
-          <v-text-field v-model="userCopy.username" :label="$t('user.username')" required validate-on-blur>
-          </v-text-field>
-          <v-text-field v-model="userCopy.fullName" :label="$t('user.full-name')" required validate-on-blur>
-          </v-text-field>
-          <v-text-field v-model="userCopy.email" :label="$t('user.email')" validate-on-blur required> </v-text-field>
-        </v-form>
-      </v-card-text>
-      <v-divider></v-divider>
-      <v-card-actions class="pb-1 pt-3">
-        <AppButtonUpload :icon="$globals.icons.fileImage" :text="$t('user.upload-photo')" file-name="profile_image" />
-        <v-spacer></v-spacer>
-        <BaseButton update @click="updateUser" />
-      </v-card-actions>
-    </template>
-  </BaseStatCard>
-</template>
-
-<script lang="ts">
-import { ref, reactive, defineComponent } from "@nuxtjs/composition-api";
-import { useApiSingleton } from "~/composables/use-api";
-const events = {
-  UPDATE_USER: "update",
-  CHANGE_PASSWORD: "change-password",
-  UPLOAD_PHOTO: "upload-photo",
-  REFRESH: "refresh",
-};
-
-export default defineComponent({
-  props: {
-    user: {
-      type: Object,
-      required: true,
-    },
-  },
-  setup(props, context) {
-    const userCopy = ref({ ...props.user });
-    const api = useApiSingleton();
-
-    const domUpdatePassword = ref<VForm | null>(null);
-    const password = reactive({
-      current: "",
-      newOne: "",
-      newTwo: "",
-    });
-
-    async function updateUser() {
-      // @ts-ignore
-      const { response } = await api.users.updateOne(userCopy.value.id, userCopy.value);
-      if (response?.status === 200) {
-        context.emit(events.REFRESH);
-      }
-    }
-
-    async function updatePassword() {
-      const { response } = await api.users.changePassword(userCopy.value.id, {
-        currentPassword: password.current,
-        newPassword: password.newOne,
-      });
-
-      if (response?.status === 200) {
-        console.log("Password Changed");
-      }
-    }
-
-    return { updateUser, updatePassword, userCopy, password, domUpdatePassword };
-  },
-  data() {
-    return {
-      hideImage: false,
-      passwordLoading: false,
-      showPassword: false,
-      loading: false,
-    };
-  },
-
-  methods: {
-    // async updateUser() {
-    //   if (!this.$refs.userUpdate.validate()) {
-    //     return;
-    //   }
-    //   this.loading = true;
-    //   const response = await api.users.update(this.user);
-    //   if (response) {
-    //     this.$store.commit("setToken", response.data.access_token);
-    //     this.refreshProfile();
-    //     this.loading = false;
-    //     this.$store.dispatch("requestUserData");
-    //   }
-    // },
-    async changePassword() {
-      // @ts-ignore
-      this.paswordLoading = true;
-      const data = {
-        currentPassword: this.password.current,
-        newPassword: this.password.newOne,
-      };
-
-      // @ts-ignore
-      if (this.$refs.passChange.validate()) {
-        // @ts-ignore
-        if (await api.users.changePassword(this.user.id, data)) {
-          this.$emit("refresh");
-        }
-      }
-
-      // @ts-ignore
-      this.paswordLoading = false;
-    },
-  },
-});
-</script>
-
-<style></style>
diff --git a/frontend/components/Domain/User/UserProfileLinkCard.vue b/frontend/components/Domain/User/UserProfileLinkCard.vue
new file mode 100644
index 00000000..dd8adf89
--- /dev/null
+++ b/frontend/components/Domain/User/UserProfileLinkCard.vue
@@ -0,0 +1,56 @@
+<template>
+  <v-card outlined nuxt :to="link.to" height="100%" class="d-flex flex-column">
+    <div v-if="$vuetify.breakpoint.smAndDown" class="pa-2 mx-auto">
+      <v-img max-width="150px" max-height="125" :src="image"></v-img>
+    </div>
+    <div class="d-flex align-center justify-space-between">
+      <div>
+        <v-card-title class="headline pb-0">
+          <slot name="title"> </slot>
+        </v-card-title>
+        <div class="d-flex justify-center align-center">
+          <v-card-text class="d-flex flex-row mb-auto">
+            <slot name="default"></slot>
+          </v-card-text>
+        </div>
+      </div>
+      <div v-if="$vuetify.breakpoint.mdAndUp" class="px-10">
+        <v-img max-width="150px" max-height="125" :src="image"></v-img>
+      </div>
+    </div>
+    <v-divider class="mt-auto"></v-divider>
+    <v-card-actions>
+      <v-btn text color="info" :to="link.to">
+        {{ link.text }}
+      </v-btn>
+    </v-card-actions>
+  </v-card>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "@nuxtjs/composition-api";
+
+interface LinkProp {
+  text: string;
+  url?: string;
+  to: string;
+}
+
+export default defineComponent({
+  props: {
+    link: {
+      type: Object as () => LinkProp,
+      required: true,
+    },
+    image: {
+      type: String,
+      requried: false,
+      default: "",
+    },
+  },
+  setup() {
+    return {};
+  },
+});
+</script>
+    
diff --git a/frontend/components/global/BaseButton.vue b/frontend/components/global/BaseButton.vue
index 06ed35af..1496e7b7 100644
--- a/frontend/components/global/BaseButton.vue
+++ b/frontend/components/global/BaseButton.vue
@@ -131,7 +131,7 @@ export default {
         },
         cancel: {
           text: "Cancel",
-          icon: this.$globals.icons.cancel,
+          icon: this.$globals.icons.close,
           color: "grey",
         },
         download: {
diff --git a/frontend/components/global/BaseCardSectionTitle.vue b/frontend/components/global/BaseCardSectionTitle.vue
index a027c9ae..5ea6236f 100644
--- a/frontend/components/global/BaseCardSectionTitle.vue
+++ b/frontend/components/global/BaseCardSectionTitle.vue
@@ -1,10 +1,11 @@
 <template>
   <v-card flat class="pb-2">
     <h2 class="headline">{{ title }}</h2>
-    <BaseDivider width="200px" color="primary" class="my-2" thickness="1px" />
+    <!-- <BaseDivider width="200px" color="primary" class="my-2" thickness="1px" /> -->
     <p class="pb-0 mb-0">
       <slot />
     </p>
+    <v-divider class="my-4"></v-divider>
   </v-card>
 </template>
 
diff --git a/frontend/components/global/BasePageTitle.vue b/frontend/components/global/BasePageTitle.vue
new file mode 100644
index 00000000..c0919d38
--- /dev/null
+++ b/frontend/components/global/BasePageTitle.vue
@@ -0,0 +1,26 @@
+<template>
+  <div class="mt-4">
+    <section class="d-flex flex-column align-center">
+      <slot name="header"></slot>
+      <h2 class="headline">
+        <slot name="title"> 👋 Here's a Title </slot>
+      </h2>
+
+      <h3 class="subtitle-1">
+        <slot> </slot>
+      </h3>
+    </section>
+    <v-divider v-if="divider" class="my-4"></v-divider>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    divider: {
+      type: Boolean,
+      default: false,
+    },
+  },
+};
+</script>
\ No newline at end of file
diff --git a/frontend/components/global/ToggleState.vue b/frontend/components/global/ToggleState.vue
new file mode 100644
index 00000000..d2fb0bf9
--- /dev/null
+++ b/frontend/components/global/ToggleState.vue
@@ -0,0 +1,29 @@
+<template>
+  <component :is="tag">
+    <slot name="activator" v-bind="{ toggle, state }"> </slot>
+    <slot v-bind="{ state, toggle }"></slot>
+  </component>
+</template>
+    
+<script lang="ts">
+import { defineComponent } from "@nuxtjs/composition-api";
+import { useToggle } from "@vueuse/shared";
+
+export default defineComponent({
+  props: {
+    tag: {
+      type: String,
+      default: "div",
+    },
+  },
+  setup() {
+    const [state, toggle] = useToggle();
+    console.log(state, toggle);
+    return {
+      state,
+      toggle,
+    };
+  },
+});
+</script>
+    
\ No newline at end of file
diff --git a/frontend/composables/use-recipes.ts b/frontend/composables/use-recipes.ts
index 8229e2f1..f0b7a401 100644
--- a/frontend/composables/use-recipes.ts
+++ b/frontend/composables/use-recipes.ts
@@ -7,6 +7,56 @@ import { Recipe } from "~/types/api-types/recipe";
 export const allRecipes = ref<Recipe[] | null>([]);
 export const recentRecipes = ref<Recipe[] | null>([]);
 
+const rand = (n: number) => Math.floor(Math.random() * n);
+
+function swap(t: Array<any>, i: number, j: number) {
+  const q = t[i];
+  t[i] = t[j];
+  t[j] = q;
+  return t;
+}
+
+export const useSorter = () => {
+  function sortAToZ(list: Array<Recipe>) {
+    list.sort((a, b) => {
+      const textA = a.name.toUpperCase();
+      const textB = b.name.toUpperCase();
+      return textA < textB ? -1 : textA > textB ? 1 : 0;
+    });
+  }
+  function sortByCreated(list: Array<Recipe>) {
+    list.sort((a, b) => (a.dateAdded > b.dateAdded ? -1 : 1));
+  }
+  function sortByUpdated(list: Array<Recipe>) {
+    list.sort((a, b) => (a.dateUpdated > b.dateUpdated ? -1 : 1));
+  }
+  function sortByRating(list: Array<Recipe>) {
+    list.sort((a, b) => (a.rating > b.rating ? -1 : 1));
+  }
+
+  function randomRecipe(list: Array<Recipe>): Recipe {
+    return list[Math.floor(Math.random() * list.length)];
+  }
+
+  function shuffle(list: Array<Recipe>) {
+    let last = list.length;
+    let n;
+    while (last > 0) {
+      n = rand(last);
+      swap(list, n, --last);
+    }
+  }
+
+  return {
+    sortAToZ,
+    sortByCreated,
+    sortByUpdated,
+    sortByRating,
+    randomRecipe,
+    shuffle,
+  };
+};
+
 export const useRecipes = (all = false, fetchRecipes = true) => {
   const api = useApiSingleton();
 
diff --git a/frontend/layouts/admin.vue b/frontend/layouts/admin.vue
index 66c36570..fad72f95 100644
--- a/frontend/layouts/admin.vue
+++ b/frontend/layouts/admin.vue
@@ -46,28 +46,6 @@ export default defineComponent({
     return {
       sidebar: null,
       topLinks: [
-        {
-          icon: this.$globals.icons.user,
-          to: "/user/profile",
-          title: this.$t("sidebar.profile"),
-        },
-        {
-          icon: this.$globals.icons.group,
-          to: "/user/group",
-          title: this.$t("group.group"),
-        },
-        {
-          icon: this.$globals.icons.pages,
-          to: "/user/group/cookbooks",
-          title: this.$t("sidebar.cookbooks"),
-        },
-        {
-          icon: this.$globals.icons.webhook,
-          to: "/user/group/webhooks",
-          title: "Webhooks",
-        },
-      ],
-      adminLinks: [
         {
           icon: this.$globals.icons.viewDashboard,
           to: "/admin/dashboard",
@@ -157,9 +135,6 @@ export default defineComponent({
       ],
     };
   },
-  head: {
-    title: "Admin",
-  },
 });
 </script>
       
diff --git a/frontend/layouts/default.vue b/frontend/layouts/default.vue
index 643dfcc4..906eb5c3 100644
--- a/frontend/layouts/default.vue
+++ b/frontend/layouts/default.vue
@@ -8,7 +8,7 @@
       :top-link="topLinks"
       secondary-header="Cookbooks"
       :secondary-links="cookbookLinks || []"
-      :bottom-links="bottomLink"
+      :bottom-links="$auth.user.admin ? bottomLink : []"
       @input="sidebar = !sidebar"
     />
 
@@ -62,7 +62,7 @@ export default defineComponent({
         {
           icon: this.$globals.icons.cog,
           title: this.$t("general.settings"),
-          to: "/user/profile",
+          to: "/admin/dashboard",
           restricted: true,
         },
       ],
diff --git a/frontend/nuxt.config.js b/frontend/nuxt.config.js
index 16baa9fd..0a0ee485 100644
--- a/frontend/nuxt.config.js
+++ b/frontend/nuxt.config.js
@@ -30,7 +30,7 @@ export default {
   css: [{ src: "~/assets/main.css" }, { src: "~/assets/style-overrides.scss" }],
 
   // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
-  plugins: ["~/plugins/globals.js"],
+  plugins: ["~/plugins/globals.ts"],
 
   // Auto import components: https://go.nuxtjs.dev/config-components
   components: true,
diff --git a/frontend/pages/recipes/categories/_slug.vue b/frontend/pages/recipes/categories/_slug.vue
index b1ac7be0..cefa0206 100644
--- a/frontend/pages/recipes/categories/_slug.vue
+++ b/frontend/pages/recipes/categories/_slug.vue
@@ -1,6 +1,7 @@
 <template>
   <v-container>
     <RecipeCardSection
+      v-if="category"
       :icon="$globals.icons.tags"
       :title="category.name"
       :recipes="category.recipes"
diff --git a/frontend/pages/recipes/categories/index.vue b/frontend/pages/recipes/categories/index.vue
index 043be89b..a6a6919c 100644
--- a/frontend/pages/recipes/categories/index.vue
+++ b/frontend/pages/recipes/categories/index.vue
@@ -7,9 +7,10 @@
       <v-toolbar-title class="headline"> {{ $t("recipe.categories") }} </v-toolbar-title>
       <v-spacer></v-spacer>
     </v-app-bar>
-    <v-slide-x-transition hide-on-leave>
+    <section v-for="(items, key, idx) in categoriesByLetter" :key="'header' + idx" :class="idx === 1 ? null : 'my-4'">
+      <BaseCardSectionTitle :title="key"> </BaseCardSectionTitle>
       <v-row>
-        <v-col v-for="item in categories" :key="item.id" cols="12" :sm="12" :md="6" :lg="4" :xl="3">
+        <v-col v-for="(item, index) in items" :key="'cat' + index" cols="12" :sm="12" :md="6" :lg="4" :xl="3">
           <v-card hover :to="`/recipes/categories/${item.slug}`">
             <v-card-actions>
               <v-icon>
@@ -21,12 +22,12 @@
           </v-card>
         </v-col>
       </v-row>
-    </v-slide-x-transition>
+    </section>
   </v-container>
 </template>
   
 <script lang="ts">
-import { defineComponent, useAsync } from "@nuxtjs/composition-api";
+import { computed, defineComponent, useAsync } from "@nuxtjs/composition-api";
 import { useApiSingleton } from "~/composables/use-api";
 import { useAsyncKey } from "~/composables/use-utils";
 
@@ -38,7 +39,25 @@ export default defineComponent({
       const { data } = await api.categories.getAll();
       return data;
     }, useAsyncKey());
-    return { categories, api };
+
+    const categoriesByLetter: any = computed(() => {
+      const catsByLetter: { [key: string]: Array<any> } = {};
+
+      if (!categories.value) return catsByLetter;
+
+      categories.value.forEach((item) => {
+        const letter = item.name[0].toUpperCase();
+        if (!catsByLetter[letter]) {
+          catsByLetter[letter] = [];
+        }
+
+        catsByLetter[letter].push(item);
+      });
+
+      return catsByLetter;
+    });
+
+    return { categories, api, categoriesByLetter };
   },
 });
 </script>
diff --git a/frontend/pages/recipes/tags/index.vue b/frontend/pages/recipes/tags/index.vue
index f4be4669..e4c8c624 100644
--- a/frontend/pages/recipes/tags/index.vue
+++ b/frontend/pages/recipes/tags/index.vue
@@ -7,9 +7,10 @@
       <v-toolbar-title class="headline"> {{ $t("tag.tags") }} </v-toolbar-title>
       <v-spacer></v-spacer>
     </v-app-bar>
-    <v-slide-x-transition hide-on-leave>
+    <section v-for="(items, key, idx) in tagsByLetter" :key="'header' + idx" :class="idx === 1 ? null : 'my-4'">
+      <BaseCardSectionTitle :title="key"> </BaseCardSectionTitle>
       <v-row>
-        <v-col v-for="item in tags" :key="item.id" cols="12" :sm="12" :md="6" :lg="4" :xl="3">
+        <v-col v-for="(item, index) in items" :key="'cat' + index" cols="12" :sm="12" :md="6" :lg="4" :xl="3">
           <v-card hover :to="`/recipes/tags/${item.slug}`">
             <v-card-actions>
               <v-icon>
@@ -21,12 +22,12 @@
           </v-card>
         </v-col>
       </v-row>
-    </v-slide-x-transition>
+    </section>
   </v-container>
 </template>
   
 <script lang="ts">
-import { defineComponent, useAsync } from "@nuxtjs/composition-api";
+import { defineComponent, useAsync, computed } from "@nuxtjs/composition-api";
 import { useApiSingleton } from "~/composables/use-api";
 import { useAsyncKey } from "~/composables/use-utils";
 
@@ -38,7 +39,25 @@ export default defineComponent({
       const { data } = await api.tags.getAll();
       return data;
     }, useAsyncKey());
-    return { tags, api };
+
+    const tagsByLetter: any = computed(() => {
+      const tagsByLetter: { [key: string]: Array<any> } = {};
+
+      if (!tags.value) return tagsByLetter;
+
+      tags.value.forEach((item) => {
+        const letter = item.name[0].toUpperCase();
+        if (!tagsByLetter[letter]) {
+          tagsByLetter[letter] = [];
+        }
+
+        tagsByLetter[letter].push(item);
+      });
+
+      return tagsByLetter;
+    });
+
+    return { tags, api, tagsByLetter };
   },
 });
 </script>
diff --git a/frontend/pages/search.vue b/frontend/pages/search.vue
index af3ce41e..15cfa49e 100644
--- a/frontend/pages/search.vue
+++ b/frontend/pages/search.vue
@@ -16,31 +16,47 @@
       </v-col>
     </v-row>
 
-    <v-row dense class="my-0 flex-row align-center justify-space-around">
-      <v-col>
-        <h3 class="pl-2 text-center headline">
-          {{ $t("category.category-filter") }}
-        </h3>
-        <RecipeSearchFilterSelector class="mb-1" @update="updateCatParams" />
-        <RecipeCategoryTagSelector v-model="includeCategories" :solo="true" :dense="false" :return-object="false" />
-      </v-col>
-      <v-col>
-        <h3 class="pl-2 text-center headline">
-          {{ $t("search.tag-filter") }}
-        </h3>
-        <RecipeSearchFilterSelector class="mb-1" @update="updateTagParams" />
-        <RecipeCategoryTagSelector
-          v-model="includeTags"
-          :solo="true"
-          :dense="false"
-          :return-object="false"
-          :tag-selector="true"
-        />
-      </v-col>
-    </v-row>
+    <ToggleState>
+      <template #activator="{ state, toggle }">
+        <v-switch :value="state" color="info" class="ma-0 pa-0" label="Advanced" @input="toggle" @click="toggle">
+          Advanced
+        </v-switch>
+      </template>
+      <template #default="{ state }">
+        <v-expand-transition>
+          <v-row v-show="state" dense class="my-0 dense flex-row align-center justify-space-around">
+            <v-col>
+              <h3 class="pl-2 text-center headline">
+                {{ $t("category.category-filter") }}
+              </h3>
+              <RecipeSearchFilterSelector class="mb-1" @update="updateCatParams" />
+              <RecipeCategoryTagSelector
+                v-model="includeCategories"
+                :solo="true"
+                :dense="false"
+                :return-object="false"
+              />
+            </v-col>
+            <v-col>
+              <h3 class="pl-2 text-center headline">
+                {{ $t("search.tag-filter") }}
+              </h3>
+              <RecipeSearchFilterSelector class="mb-1" @update="updateTagParams" />
+              <RecipeCategoryTagSelector
+                v-model="includeTags"
+                :solo="true"
+                :dense="false"
+                :return-object="false"
+                :tag-selector="true"
+              />
+            </v-col>
+          </v-row>
+        </v-expand-transition>
+      </template>
+    </ToggleState>
 
     <RecipeCardSection
-      class="mt-n9"
+      class="mt-n5"
       :title-icon="$globals.icons.magnify"
       :recipes="showRecipes"
       :hard-limit="maxResults"
diff --git a/frontend/pages/user/group/cookbooks.vue b/frontend/pages/user/group/cookbooks.vue
index 57212fbb..e2016601 100644
--- a/frontend/pages/user/group/cookbooks.vue
+++ b/frontend/pages/user/group/cookbooks.vue
@@ -1,6 +1,13 @@
 <template>
-  <v-container fluid>
-    <BaseCardSectionTitle title="Cookbooks"> </BaseCardSectionTitle>
+  <v-container class="narrow-container">
+    <BasePageTitle divider>
+      <template #header>
+        <v-img max-height="100" max-width="100" :src="require('~/static/svgs/manage-cookbooks.svg')"></v-img>
+      </template>
+      <template #title> Cookbooks </template>
+      Arrange and edit your cookbooks here.
+    </BasePageTitle>
+
     <BaseButton create @click="actions.createOne()" />
     <v-expansion-panels class="mt-2">
       <draggable v-model="cookbooks" handle=".handle" style="width: 100%" @change="actions.updateOrder()">
@@ -48,7 +55,6 @@ import draggable from "vuedraggable";
 
 export default defineComponent({
   components: { draggable },
-  layout: "admin",
   setup() {
     const { cookbooks, actions } = useCookbooks();
 
@@ -62,6 +68,6 @@ export default defineComponent({
     
 <style>
 .my-border {
-  border-left: 5px solid var(--v-primary-base);
+  border-left: 5px solid var(--v-primary-base) !important;
 }
 </style>
\ No newline at end of file
diff --git a/frontend/pages/user/group/index.vue b/frontend/pages/user/group/index.vue
index 6f5c088c..153cb5ba 100644
--- a/frontend/pages/user/group/index.vue
+++ b/frontend/pages/user/group/index.vue
@@ -1,17 +1,23 @@
 <template>
-  <v-container fluid>
-    <section>
-      <BaseCardSectionTitle title="Group Settings">
-        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Alias error provident, eveniet, laboriosam assumenda
-        earum amet quaerat vel consequatur molestias sed enim. Adipisci a consequuntur dolor culpa expedita voluptatem
-        praesentium optio iste atque, ea reiciendis iure non aut suscipit modi ducimus ratione, quam numquam quaerat
-        distinctio illum nemo. Dicta, doloremque!
-      </BaseCardSectionTitle>
-      <div v-if="categories" class="d-flex">
-        <DomainRecipeCategoryTagSelector v-model="categories" class="mt-5 mr-5" />
-        <BaseButton save class="mt-auto mb-3" @click="actions.updateAll()" />
-      </div>
-    </section>
+  <v-container>
+    <BasePageTitle divider>
+      <template #header>
+        <v-img max-height="100" max-width="100" :src="require('~/static/svgs/manage-group-settings.svg')"></v-img>
+      </template>
+      <template #title> Group Settings </template>
+      These items are shared within your group. Editing one of them will change it for the whole group!
+    </BasePageTitle>
+    <v-card tag="section" outlined>
+      <v-card-text>
+        <BaseCardSectionTitle title="Mealplan Categories">
+          Set the categories below for the ones that you want to be included in your mealplan random generation.
+          <div class="mt-2">
+            <BaseButton save @click="actions.updateAll()" />
+          </div>
+        </BaseCardSectionTitle>
+        <DomainRecipeCategoryTagSelector v-if="categories" v-model="categories" />
+      </v-card-text>
+    </v-card>
   </v-container>
 </template>
     
@@ -20,7 +26,6 @@ import { defineComponent } from "@nuxtjs/composition-api";
 import { useGroup } from "~/composables/use-groups";
 
 export default defineComponent({
-  layout: "admin",
   setup() {
     const { categories, actions } = useGroup();
 
@@ -32,5 +37,3 @@ export default defineComponent({
 });
 </script>
     
-<style scoped>
-</style>
\ No newline at end of file
diff --git a/frontend/pages/user/group/webhooks.vue b/frontend/pages/user/group/webhooks.vue
index f3541650..32a6ac2d 100644
--- a/frontend/pages/user/group/webhooks.vue
+++ b/frontend/pages/user/group/webhooks.vue
@@ -1,11 +1,14 @@
 <template>
-  <v-container fluid>
-    <BaseCardSectionTitle title="MealPlan Webhooks">
-      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Alias error provident, eveniet, laboriosam assumenda
-      earum amet quaerat vel consequatur molestias sed enim. Adipisci a consequuntur dolor culpa expedita voluptatem
-      praesentium optio iste atque, ea reiciendis iure non aut suscipit modi ducimus ratione, quam numquam quaerat
-      distinctio illum nemo. Dicta, doloremque!
-    </BaseCardSectionTitle>
+  <v-container class="narrow-container">
+    <BasePageTitle divider>
+      <template #header>
+        <v-img max-height="125" max-width="125" :src="require('~/static/svgs/manage-webhooks.svg')"></v-img>
+      </template>
+      <template #title> Webhooks </template>
+      The webhooks defined below will be executed when a meal is defined for the day. At the scheduled time the webhooks
+      will be sent with the data from the recipe that is scheduled for the day
+    </BasePageTitle>
+
     <BaseButton create @click="actions.createOne()" />
     <v-expansion-panels class="mt-2">
       <v-expansion-panel v-for="(webhook, index) in webhooks" :key="index" class="my-2 my-border rounded">
@@ -53,16 +56,13 @@ import { defineComponent } from "@nuxtjs/composition-api";
 import { useGroupWebhooks } from "~/composables/use-group-webhooks";
 
 export default defineComponent({
-  layout: "admin",
   setup() {
     const { actions, webhooks } = useGroupWebhooks();
+
     return {
-      actions,
       webhooks,
+      actions,
     };
   },
 });
-</script>
-    
-<style scoped>
-</style>
\ No newline at end of file
+</script>
\ No newline at end of file
diff --git a/frontend/pages/user/profile.vue b/frontend/pages/user/profile.vue
deleted file mode 100644
index 1bd249c4..00000000
--- a/frontend/pages/user/profile.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<template>
-  <v-container fluid>
-    <v-row>
-      <v-col cols="12" sm="12" md="12" lg="6">
-        <UserProfileCard :user="user" class="mt-14" @refresh="$auth.fetchUser()" />
-      </v-col>
-      <v-col cols="12" sm="12" md="12" lg="6">
-        <UserAPITokenCard :tokens="user.tokens" class="mt-14" @refresh="$auth.fetchUser()" />
-      </v-col>
-    </v-row>
-  </v-container>
-</template>
-    
-<script lang="ts">
-import { computed, defineComponent, useContext } from "@nuxtjs/composition-api";
-import UserProfileCard from "~/components/Domain/User/UserProfileCard.vue";
-import UserAPITokenCard from "~/components/Domain/User/UserAPITokenCard.vue";
-
-export default defineComponent({
-  components: { UserProfileCard, UserAPITokenCard },
-  layout: "admin",
-  setup() {
-    const user = computed(() => {
-      return useContext().$auth.user;
-    });
-
-    return { user };
-  },
-});
-</script>
-    
diff --git a/frontend/pages/user/profile/api-tokens.vue b/frontend/pages/user/profile/api-tokens.vue
new file mode 100644
index 00000000..f888953b
--- /dev/null
+++ b/frontend/pages/user/profile/api-tokens.vue
@@ -0,0 +1,131 @@
+<template>
+  <v-container class="narrow-container">
+    <BasePageTitle divider>
+      <template #header>
+        <v-img max-height="200px" max-width="200px" :src="require('~/static/svgs/manage-api-tokens.svg')"></v-img>
+      </template>
+      <template #title> API Tokens </template>
+      You have {{ user.tokens.length }} active tokens.
+    </BasePageTitle>
+    <section class="d-flex justify-center">
+      <v-card class="mt-4" width="500px">
+        <v-card-text>
+          <v-form ref="domNewTokenForm" @submit.prevent>
+            <v-text-field v-model="name" :label="$t('settings.token.token-name')"> </v-text-field>
+          </v-form>
+
+          <template v-if="createdToken != ''">
+            <v-textarea
+              v-model="createdToken"
+              class="mb-0 pb-0"
+              :label="$t('settings.token.api-token')"
+              readonly
+              :append-outer-icon="$globals.icons.contentCopy"
+              @click="copyToken"
+              @click:append-outer="copyToken"
+            >
+            </v-textarea>
+            <v-subheader class="text-center">
+              {{
+                $t(
+                  "settings.token.copy-this-token-for-use-with-an-external-application-this-token-will-not-be-viewable-again"
+                )
+              }}
+            </v-subheader>
+          </template>
+        </v-card-text>
+        <v-expand-transition>
+          <v-card-actions v-show="name != ''">
+            <v-spacer></v-spacer>
+            <BaseButton v-if="createdToken" cancel @click="resetCreate()"> Close </BaseButton>
+            <BaseButton v-else :cancel="false" @click="createToken(name)"> Generate </BaseButton>
+          </v-card-actions>
+        </v-expand-transition>
+      </v-card>
+    </section>
+    <BaseCardSectionTitle class="mt-10" title="Active Tokens"> </BaseCardSectionTitle>
+    <section class="d-flex flex-column align-center justify-center">
+      <div v-for="(token, index) in $auth.user.tokens" :key="index" class="d-flex my-2">
+        <v-card outlined width="500px">
+          <v-list-item>
+            <v-list-item-content>
+              <v-list-item-title>
+                {{ token.name }}
+              </v-list-item-title>
+              <v-list-item-subtitle> Created on: {{ $d(token.created_at) }} </v-list-item-subtitle>
+            </v-list-item-content>
+            <v-list-item-action>
+              <BaseButton delete small @click="deleteToken(token.id)"></BaseButton>
+            </v-list-item-action>
+          </v-list-item>
+        </v-card>
+      </div>
+    </section>
+  </v-container>
+</template>
+    
+<script lang="ts">
+import { computed, defineComponent, useContext, ref } from "@nuxtjs/composition-api";
+import { useApiSingleton } from "~/composables/use-api";
+
+export default defineComponent({
+  setup() {
+    const nuxtContext = useContext();
+
+    const user = computed(() => {
+      return nuxtContext.$auth.user;
+    });
+
+    const api = useApiSingleton();
+
+    const domNewTokenForm = ref<VForm | null>(null);
+
+    const createdToken = ref("");
+    const name = ref("");
+    const loading = ref(false);
+
+    function resetCreate() {
+      createdToken.value = "";
+      loading.value = false;
+      name.value = "";
+      nuxtContext.$auth.fetchUser();
+    }
+
+    async function createToken(name: string) {
+      if (loading.value) {
+        resetCreate();
+        return;
+      }
+
+      loading.value = true;
+
+      if (domNewTokenForm?.value?.validate()) {
+        console.log("Created");
+        return;
+      }
+
+      const { data } = await api.users.createAPIToken({ name });
+
+      if (data) {
+        createdToken.value = data.token;
+      }
+    }
+
+    async function deleteToken(id: string | number) {
+      const { data } = await api.users.deleteAPIToken(id);
+      nuxtContext.$auth.fetchUser();
+      return data;
+    }
+
+    function copyToken() {
+      navigator.clipboard.writeText(createdToken.value).then(
+        () => console.log("Copied", createdToken.value),
+        () => console.log("Copied Failed", createdToken.value)
+      );
+    }
+
+    return { createToken, deleteToken, copyToken, createdToken, loading, name, user, resetCreate };
+  },
+});
+</script>
+    
diff --git a/frontend/pages/user/profile/edit.vue b/frontend/pages/user/profile/edit.vue
new file mode 100644
index 00000000..e47913a8
--- /dev/null
+++ b/frontend/pages/user/profile/edit.vue
@@ -0,0 +1,169 @@
+<template>
+  <v-container class="narrow-container">
+    <BasePageTitle divider>
+      <template #header>
+        <v-img max-height="200" max-width="200" class="mb-2" :src="require('~/static/svgs/manage-profile.svg')"></v-img>
+      </template>
+      <template #title> Your Profile Settings </template>
+      Some text here...
+    </BasePageTitle>
+    <section>
+      <ToggleState tag="article">
+        <template #activator="{ toggle, state }">
+          <v-btn v-if="!state" text color="info" class="mt-2 mb-n3" @click="toggle">
+            <v-icon left>{{ $globals.icons.lock }}</v-icon>
+            {{ $t("settings.change-password") }}
+          </v-btn>
+          <v-btn v-else text color="info" class="mt-2 mb-n3" @click="toggle">
+            <v-icon left>{{ $globals.icons.user }}</v-icon>
+            {{ $t("settings.profile") }}
+          </v-btn>
+        </template>
+
+        <template #default="{ state }">
+          <v-slide-x-transition group mode="in" hide-on-leave>
+            <div v-if="!state" key="personal-info">
+              <BaseCardSectionTitle class="mt-10" title="Personal Information"> </BaseCardSectionTitle>
+              <v-card tag="article" outlined>
+                <v-card-text class="pb-0">
+                  <v-form ref="userUpdate">
+                    <v-text-field v-model="userCopy.username" :label="$t('user.username')" required validate-on-blur>
+                    </v-text-field>
+                    <v-text-field v-model="userCopy.fullName" :label="$t('user.full-name')" required validate-on-blur>
+                    </v-text-field>
+                    <v-text-field v-model="userCopy.email" :label="$t('user.email')" validate-on-blur required>
+                    </v-text-field>
+                  </v-form>
+                </v-card-text>
+                <v-card-actions>
+                  <v-spacer></v-spacer>
+                  <BaseButton update @click="updateUser" />
+                </v-card-actions>
+              </v-card>
+            </div>
+            <div v-if="state" key="change-password">
+              <BaseCardSectionTitle class="mt-10" :title="$t('settings.change-password')"> </BaseCardSectionTitle>
+              <v-card outlined>
+                <v-card-text class="pb-0">
+                  <v-form ref="passChange">
+                    <v-text-field
+                      v-model="password.current"
+                      :prepend-icon="$globals.icons.lock"
+                      :label="$t('user.current-password')"
+                      validate-on-blur
+                      :type="showPassword ? 'text' : 'password'"
+                      @click:append="showPassword.current = !showPassword.current"
+                    ></v-text-field>
+                    <v-text-field
+                      v-model="password.newOne"
+                      :prepend-icon="$globals.icons.lock"
+                      :label="$t('user.new-password')"
+                      :type="showPassword ? 'text' : 'password'"
+                      @click:append="showPassword.newOne = !showPassword.newOne"
+                    ></v-text-field>
+                    <v-text-field
+                      v-model="password.newTwo"
+                      :prepend-icon="$globals.icons.lock"
+                      :label="$t('user.confirm-password')"
+                      :rules="[password.newOne === password.newTwo || $t('user.password-must-match')]"
+                      validate-on-blur
+                      :type="showPassword ? 'text' : 'password'"
+                      @click:append="showPassword.newTwo = !showPassword.newTwo"
+                    ></v-text-field>
+                  </v-form>
+                </v-card-text>
+                <v-card-actions>
+                  <v-spacer></v-spacer>
+                  <BaseButton update @click="updateUser" />
+                </v-card-actions>
+              </v-card>
+            </div>
+          </v-slide-x-transition>
+        </template>
+      </ToggleState>
+    </section>
+  </v-container>
+</template>
+    
+<script lang="ts">
+import { ref, reactive, defineComponent, computed, useContext, watch } from "@nuxtjs/composition-api";
+import { useApiSingleton } from "~/composables/use-api";
+
+export default defineComponent({
+  setup() {
+    const nuxtContext = useContext();
+    const user = computed(() => nuxtContext.$auth.user);
+
+    watch(user, () => {
+      userCopy.value = { ...user.value };
+    });
+
+    const userCopy = ref({ ...user.value });
+
+    const api = useApiSingleton();
+
+    const domUpdatePassword = ref<VForm | null>(null);
+    const password = reactive({
+      current: "",
+      newOne: "",
+      newTwo: "",
+    });
+
+    async function updateUser() {
+      // @ts-ignore
+      const { response } = await api.users.updateOne(userCopy.value.id, userCopy.value);
+      if (response?.status === 200) {
+        nuxtContext.$auth.fetchUser();
+      }
+    }
+
+    async function updatePassword() {
+      if (!userCopy.value?.id) {
+        return;
+      }
+      // @ts-ignore
+      const { response } = await api.users.changePassword(userCopy.value.id, {
+        currentPassword: password.current,
+        newPassword: password.newOne,
+      });
+
+      if (response?.status === 200) {
+        console.log("Password Changed");
+      }
+    }
+
+    return { updateUser, updatePassword, userCopy, password, domUpdatePassword };
+  },
+  data() {
+    return {
+      hideImage: false,
+      passwordLoading: false,
+      showPassword: false,
+      loading: false,
+    };
+  },
+
+  methods: {
+    async changePassword() {
+      // @ts-ignore
+      this.paswordLoading = true;
+      const data = {
+        currentPassword: this.password.current,
+        newPassword: this.password.newOne,
+      };
+
+      // @ts-ignore
+      if (this.$refs.passChange.validate()) {
+        // @ts-ignore
+        if (await api.users.changePassword(this.user.id, data)) {
+          this.$emit("refresh");
+        }
+      }
+
+      // @ts-ignore
+      this.paswordLoading = false;
+    },
+  },
+});
+</script>
+    
diff --git a/frontend/pages/user/profile/index.vue b/frontend/pages/user/profile/index.vue
new file mode 100644
index 00000000..35e50cc8
--- /dev/null
+++ b/frontend/pages/user/profile/index.vue
@@ -0,0 +1,93 @@
+<template>
+  <v-container v-if="user">
+    <section class="d-flex flex-column align-center">
+      <v-avatar color="primary" size="75" class="mb-2">
+        <v-img :src="require(`~/static/account.png`)" />
+      </v-avatar>
+      <h2 class="headline">👋 Welcome, {{ user.fullName }}</h2>
+      <p class="subtitle-1 mb-0">
+        Manage your profile, recipes, and group settings.
+        <a href="https://hay-kot.github.io/mealie/" target="_blank"> Learn More </a>
+      </p>
+    </section>
+    <section>
+      <div>
+        <h3 class="headline">Personal</h3>
+        <p>These are settings that are personal to you. Changes here won't affect other users</p>
+      </div>
+      <v-row tag="section">
+        <v-col cols="12" sm="12" md="6">
+          <UserProfileLinkCard
+            :link="{ text: 'Manage User Profile', to: '/user/profile/edit' }"
+            :image="require('~/static/svgs/manage-profile.svg')"
+          >
+            <template #title> User Profile </template>
+            Manage your preferences, change your password, and update your email
+          </UserProfileLinkCard>
+        </v-col>
+        <v-col cols="12" sm="12" md="6">
+          <UserProfileLinkCard
+            :link="{ text: 'Manage Your API Tokens', to: '/user/profile/api-tokens' }"
+            :image="require('~/static/svgs/manage-api-tokens.svg')"
+          >
+            <template #title> API Tokens </template>
+            Manage your API Tokens for access from external applications
+          </UserProfileLinkCard>
+        </v-col>
+      </v-row>
+    </section>
+    <v-divider class="my-7"></v-divider>
+    <section>
+      <div>
+        <h3 class="headline">Group</h3>
+        <p>These items are shared within your group. Editing one of them will change it for the whole group!</p>
+      </div>
+      <v-row tag="section">
+        <v-col cols="12" sm="12" md="6">
+          <UserProfileLinkCard
+            :link="{ text: 'Group Settings', to: '/user/group' }"
+            :image="require('~/static/svgs/manage-group-settings.svg')"
+          >
+            <template #title> Group Settings </template>
+            Manage your common group settings like mealplan and privacy settings.
+          </UserProfileLinkCard>
+        </v-col>
+        <v-col cols="12" sm="12" md="6">
+          <UserProfileLinkCard
+            :link="{ text: 'Manage Cookbooks', to: '/user/group/cookbooks' }"
+            :image="require('~/static/svgs/manage-cookbooks.svg')"
+          >
+            <template #title> Cookbooks </template>
+            Manage a collection of recipe categories and generate pages for them.
+          </UserProfileLinkCard>
+        </v-col>
+        <v-col cols="12" sm="12" md="6">
+          <UserProfileLinkCard
+            :link="{ text: 'Manage Webhooks', to: '/user/group/webhooks' }"
+            :image="require('~/static/svgs/manage-webhooks.svg')"
+          >
+            <template #title> Webhooks </template>
+            Setup webhooks that trigger on days that you have have mealplan scheduled.
+          </UserProfileLinkCard>
+        </v-col>
+      </v-row>
+    </section>
+  </v-container>
+</template>
+    
+<script lang="ts">
+import { computed, defineComponent, useContext } from "@nuxtjs/composition-api";
+import UserProfileLinkCard from "@/components/Domain/User/UserProfileLinkCard.vue";
+
+export default defineComponent({
+  components: {
+    UserProfileLinkCard,
+  },
+  setup() {
+    const user = computed(() => useContext().$auth.user);
+
+    return { user };
+  },
+});
+</script>
+    
diff --git a/frontend/plugins/globals.js b/frontend/plugins/globals.ts
similarity index 99%
rename from frontend/plugins/globals.js
rename to frontend/plugins/globals.ts
index 6803539c..b27f0e5b 100644
--- a/frontend/plugins/globals.js
+++ b/frontend/plugins/globals.ts
@@ -205,7 +205,7 @@ const icons = {
 };
 
 // eslint-disable-next-line no-empty-pattern
-export default ({}, inject) => {
+export default ({}, inject: any) => {
   // Inject $hello(msg) in Vue, context and store.
   inject("globals", { icons });
 };
diff --git a/frontend/static/svgs/manage-api-tokens.svg b/frontend/static/svgs/manage-api-tokens.svg
new file mode 100644
index 00000000..a259e89f
--- /dev/null
+++ b/frontend/static/svgs/manage-api-tokens.svg
@@ -0,0 +1 @@
+<svg id="06c42c9d-6d9c-45ee-a61b-17902c1dca73" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1145.57" height="819.91" viewBox="0 0 1145.57 819.91"><defs><linearGradient id="2f697947-2a6f-450c-95af-56e5336b1d5f" x1="591.3" y1="646.08" x2="591.3" y2="107.75" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="gray" stop-opacity="0.25"/><stop offset="0.54" stop-color="gray" stop-opacity="0.12"/><stop offset="1" stop-color="gray" stop-opacity="0.1"/></linearGradient><linearGradient id="2563b911-9cd4-457d-b636-acc38b40f33a" x1="944.34" y1="854.67" x2="944.34" y2="289.29" xlink:href="#2f697947-2a6f-450c-95af-56e5336b1d5f"/></defs><title>security</title><path d="M1154.4,591.26c-26.57,54.81-80.52,91.46-136.43,115.63-75.27,32.55-158.16,45.46-239.91,40q-21.49-1.43-42.85-4.57a540.44,540.44,0,0,1-143.27-41.72q-19.74-8.89-38.68-19.41a494.85,494.85,0,0,1-60.46-39.54q-7.23-5.52-14.26-11.32c-3.25-2.68-6.47-5.42-9.74-8.08-6.9-5.61-14-10.94-21.92-14.93a78.31,78.31,0,0,0-7.34-3.24c-25.08-9.54-54-5.94-80.11,1.5-19.86,5.66-39.22,13.41-59.06,18.94a196,196,0,0,1-26.91,5.72A143.21,143.21,0,0,1,213,624.93l-1.67-.52q-4.2-1.32-8.33-2.89l-1.67-.64q-4-1.54-7.83-3.31l-1.67-.76q-4-1.86-7.83-3.93c-.92-.48-1.83-1-2.73-1.49a163.67,163.67,0,0,1-39.16-30.49c-.33-.33-.64-.67-1-1-1.59-1.72-3.15-3.47-4.66-5.26-.56-.66-1.12-1.32-1.67-2q-2.69-3.28-5.19-6.71c-.25-.33-.49-.67-.73-1A144.59,144.59,0,0,1,112,534.44c-.14-.33-.27-.67-.39-1q-2-5.15-3.65-10.47c-.45-1.48-.88-3-1.26-4.48-.13-.44-.25-.89-.36-1.33-5.52-21.73-6.15-44.32-6.15-66.78q0-3.93,0-7.85c.16-36.33.72-73.28,6.08-109.11,0-.25.07-.5.11-.74a340.76,340.76,0,0,1,7.31-35.82A264.25,264.25,0,0,1,126,260.56c12.33-29,30.26-55.39,50.17-79.85C226.32,119.16,292.09,67.49,369.07,48.15c82.95-20.83,175.14-.87,242.05,52.4,20.4,16.24,38.73,35.47,61.64,47.92,20,10.84,43.41,15.33,64.83,6.8,17.7-7.05,29.22-10.55,49.1-9.48A411.56,411.56,0,0,1,907.05,171c1.56.57,3.12,1.16,4.67,1.75C1012.43,211.28,1099,287.83,1144,386.2q1.79,3.9,3.47,7.86C1174.3,456.73,1184,530.18,1154.4,591.26Z" transform="translate(-26.97 -40.04)" fill="#e58325" opacity="0.1"/><ellipse cx="120.3" cy="728.81" rx="88.28" ry="14.18" fill="#e58325" opacity="0.1"/><ellipse cx="912.26" cy="804.71" rx="156.53" ry="15.2" fill="#e58325" opacity="0.1"/><rect x="116.14" y="107.75" width="950.33" height="538.33" rx="12.49" ry="12.49" fill="url(#2f697947-2a6f-450c-95af-56e5336b1d5f)"/><rect x="117.65" y="115.32" width="947.42" height="528.97" rx="12.49" ry="12.49" fill="#fff"/><rect x="117.65" y="115.32" width="947.42" height="528.97" rx="12.49" ry="12.49" fill="#fff"/><rect x="117.65" y="115.32" width="947.42" height="528.97" rx="12.49" ry="12.49" fill="#fff" opacity="0.04"/><path d="M1087.23,149.29H149.43a4.81,4.81,0,0,0-4.81,4.81v20.33H1092V154.1A4.81,4.81,0,0,0,1087.23,149.29Z" transform="translate(-26.97 -40.04)" fill="#5a5773"/><g id="6c975d28-8d47-4ade-9154-b3b78f637b65" data-name="buttons"><circle cx="136.57" cy="121.82" r="6.5" fill="#fff"/><circle cx="154.07" cy="121.82" r="6.5" fill="#fff"/><circle cx="171.57" cy="121.82" r="6.5" fill="#fff"/></g><rect x="195.68" y="181.67" width="254.25" height="21.58" fill="#e58325" opacity="0.2"/><rect x="195.68" y="268.2" width="791.36" height="331.96" fill="#5a5773" opacity="0.1"/><path d="M686,329.89H672.45V303.57c0-29.7-23.68-54.39-53.38-54.84a54.28,54.28,0,0,0-54.85,54.11v27.05H550.7a22.62,22.62,0,0,0-22.55,22.55V460.66a22.62,22.62,0,0,0,22.55,22.55H686a22.61,22.61,0,0,0,22.54-22.55V352.44A22.61,22.61,0,0,0,686,329.89Zm-59.75,70.35V439a8.09,8.09,0,0,1-7.5,8.12,7.91,7.91,0,0,1-8.28-7.9v-39a18,18,0,1,1,15.78,0Zm30.44-70.35H580V302.84a38.33,38.33,0,0,1,76.66,0Z" transform="translate(-26.97 -40.04)" opacity="0.1"/><path d="M686,327.89H672.45V301.57c0-29.7-23.68-54.39-53.38-54.84a54.28,54.28,0,0,0-54.85,54.11v27.05H550.7a22.62,22.62,0,0,0-22.55,22.55V458.66a22.62,22.62,0,0,0,22.55,22.55H686a22.61,22.61,0,0,0,22.54-22.55V350.44A22.61,22.61,0,0,0,686,327.89Zm-59.75,70.35V437a8.09,8.09,0,0,1-7.5,8.12,7.91,7.91,0,0,1-8.28-7.9v-39a18,18,0,1,1,15.78,0Zm30.44-70.35H580V300.84a38.33,38.33,0,0,1,76.66,0Z" transform="translate(-26.97 -40.04)" fill="#e58325"/><rect x="906.94" y="236.25" width="80.1" height="18.91" fill="#5a5773" opacity="0.1"/><path d="M1041.27,849.33a28.47,28.47,0,0,0-2.68-7.61l-12-17.92h.07s-1.89-9,0-13.42-6.74-15.29-6.74-15.29-1.05-2.73,1.69-6.09-1.69-13.2-1.69-13.2-2.1-20.55-2.31-23.69-1.9-20.54-1.9-20.54l-4-36.89-7.12-97.77-.13-1.83c.88-.43,1.35-.7,1.35-.7l-1.42-54.06,1.23-1.11c10.74-9.72,35.51-32.22,35.26-32.71s-3-37.57-3.32-46.85a55.83,55.83,0,0,0-4.26-19.18c-.62-1.23-2.41-9.34-3.15-12.77-.2-.94-.33-1.53-.33-1.53s-7.26-13.84-6.63-20.13,1.89-11-13.59-13.2c0,0-13-1.94-20.74-7.23A59,59,0,0,0,974,378.17s-4.34-8-7.36-5.29a42,42,0,0,1-2.85-8.91l-.09-.56a29.47,29.47,0,0,0,11.64-16.66c.1-.38.18-.77.27-1.15a3.25,3.25,0,0,0,.93.17c2.63,0,4.25-2.93,6.71-3.86,1-.39,2.23-.45,3-1.24a2.93,2.93,0,0,0,.66-2.21,4.51,4.51,0,0,0,0-.82,2.93,2.93,0,0,0,0-.29l0,.1c-.67-3.64-3.49-6.87-3.18-10.57.3-3.48,3.36-6.54,3.11-9.93a5.4,5.4,0,0,0-.07-.8l0,.12a8.56,8.56,0,0,0-2-3.54,11.36,11.36,0,0,0-4.12-3.46c-1.39-.61-3-.75-4.3-1.48-3.82-2.08-3.81-7.5-6.08-11.2A9.91,9.91,0,0,0,961,292c-2.84.28-5.41,1.79-8.22,2.28-3.84.68-7.75-.57-11.39-2s-7.33-3-11.24-3-8.14,2-9.32,5.69c-.63,2-.32,4.15-.8,6.18-.86,3.58-4,6.14-7.25,7.92-2,1.11-4.38,2.38-5,4.48,0-.06,0-.11,0-.16a3.84,3.84,0,0,0-.1.51,3.75,3.75,0,0,0,0,.67c0,1.44.76,2.81,1.27,4.18a11.53,11.53,0,0,1-.06,8.06c-.74,1.9-2,3.57-2.72,5.46a10.75,10.75,0,0,0-.66,2.74l0-.16a11,11,0,0,0,0,1.28,9,9,0,0,0,1,4.2A7.54,7.54,0,0,0,911,344.1c2,.46,3.25-1.5,5.36-1a8.42,8.42,0,0,1,1.11.35c.07.45.14.9.22,1.34a29.39,29.39,0,0,0,10.14,17.17c0,.24.08.48.11.73h0a67.15,67.15,0,0,1,.83,12.06s-3.15-4.61-7.47,4.29c0,0-11.27,6.5-15.16,7.24s-17.7,5.55-17.7,5.55a12.18,12.18,0,0,1-7.16,2.31c-4.31,0-7.89,9.43-7.37,14.56s-.31,8.91-4.32,9.12-1.82,8.34-1.79,8.48l-.37,1.75c-.78,3.58-2.48,11.26-3.08,12.46a56,56,0,0,0-4.27,19.18c-.31,9.28-3,46.22-3.31,46.85-.21.41,16.76,15.92,28.69,26.76l1.73,1.56-5.49,51.28a13.69,13.69,0,0,0,5.64,10c0,.6,0,1.21-.06,1.84-.24,6-.72,13.26-1.68,15.16-1.68,3.36-1.26,21.38-1.26,21.38s-1.69,36.68-3.79,40.67-2.53,12.36-1.9,14-2.11,45.69-2.11,45.69l-2.1,19.71s.63,18.86-1.27,19.28-2.95,13.42-2.95,13.42-6.73,9.22-3.79,12.57-.43,4.83-.74,5.66-6.42,4-2,15.72a3.45,3.45,0,0,0,.14.34c-4.14,5.75-17.26,24.3-16.46,27.12a7.43,7.43,0,0,0,3.5,4.2c3.09,1.85,8.39,2.71,16.82,0,14-4.51,13-7.76,13-7.76a5.94,5.94,0,0,1,5.9-5.66c5.79-.42,10.11-5.76,10.11-5.76l-.68-2.53-.93-3.5c.11-1,.82-2.75,4-3.72,4.85-1.47,3.58-10.69,3.58-10.69s-.42-9.64,1.68-10.9,1.27-17.19,1.27-17.19,2.32-11.53,5.68-19.29,7.38-53.86,7.38-53.86,2.73-22.64,5.26-29.14,4.85-24.73,4.85-24.73,15.59-30.19,15.79-36.9c0,0,2-6.29,4,.63s7.62,23.48,7.62,23.48l5.47,20.33,6.53,30.39,4.22,25.58s-.64,9.64,1,13,4,11.1,2.74,12.57,2.52,8.39,3.58,9.85,0,32.49,0,32.49,4.84,26.41,11.79,31a8.5,8.5,0,0,0,1.54.8c-.1,2.86-.2,6.69-.07,8.69a3.33,3.33,0,0,0,.22,1.31c.63.84,7.79,6.5,9.27,6.5s6.73,3.67,6.95,5.45,15.39,9.32,17.54,9.54,12.57,2.09,14-.84A4.85,4.85,0,0,0,1041.27,849.33ZM1004,471.61l1.08.93s1.11,8.65,1.9,11.24-.16,7.63-.16,7.63a17.55,17.55,0,0,0,1.11,5.5c.94,1.89-1.9,6-1.9,6h-2.53l-.79-32.38Zm-75.23-96.68v-.19C928.75,374.8,928.74,374.87,928.74,374.93ZM889.92,499.58a3.65,3.65,0,0,1-.16-2.67,8,8,0,0,0,.53-1.48,22.92,22.92,0,0,0,.58-4,.28.28,0,0,0,0-.05c-.09-.48-.9-5.12-.15-7.58s1.89-11.24,1.89-11.24l.72-.61L895,470.5s0-.54.12-1.43c.35,7.6.63,16,.18,16.42-.84.83-3.9,9-3.16,9.32.24.11-.09,3.38-.65,7.78A15.94,15.94,0,0,1,889.92,499.58Z" transform="translate(-26.97 -40.04)" fill="url(#2563b911-9cd4-457d-b636-acc38b40f33a)"/><path d="M970.52,382.92v12.44L945,408.19s-25.34-15.33-19.09-21.43c4-3.86,3.23-14.46,2.15-21.75h0c-.63-4.24-1.36-7.35-1.36-7.35s45.52-13,38.64-3.13c-2.3,3.3-2.48,7.57-1.71,11.8C965.19,374.72,970.52,382.92,970.52,382.92Z" transform="translate(-26.97 -40.04)" fill="#c37098"/><path d="M900.61,504.57l-3.29,40.52s-4.93-4.47-11.31-10.29c-11.83-10.79-28.63-26.22-28.43-26.63.31-.63,3-37.39,3.29-46.63a55.8,55.8,0,0,1,4.22-19.08c.6-1.2,2.29-8.84,3-12.41.24-1.11.39-1.83.39-1.83L874,426s23,25.66,23,26.13-1.57,20.18-1.57,20.18l-1.63,1.42-.71.61s-1.1,8.61-1.88,11.19.06,7.06.15,7.54v0a23.25,23.25,0,0,1-.57,4,8.38,8.38,0,0,1-.53,1.47,3.67,3.67,0,0,0,.16,2.66,16.08,16.08,0,0,0,1.72,3.29Z" transform="translate(-26.97 -40.04)" fill="#3f3d56"/><path d="M1040,508.17c.24.49-24.29,22.88-34.92,32.55l-4.82,4.37L997,504.57h8.45s2.82-4.07,1.88-5.95a17.39,17.39,0,0,1-1.09-5.47s.93-5,.15-7.59-1.88-11.19-1.88-11.19l-1.07-.92-1.27-1.11s-1.57-19.71-1.57-20.18,23-26.13,23-26.13l5.48,2.19s.12.59.32,1.53c.74,3.41,2.51,11.48,3.12,12.71a55.8,55.8,0,0,1,4.22,19.08C1037,470.78,1039.68,507.54,1040,508.17Z" transform="translate(-26.97 -40.04)" fill="#3f3d56"/><path d="M1040.1,852.11c-1.47,2.92-11.79,1-13.92.84s-17.17-7.73-17.38-9.5-5.42-5.42-6.88-5.42-8.55-5.64-9.18-6.47a3.19,3.19,0,0,1-.21-1.3c-.22-3.43.21-12.26.21-12.26l30.25,1.67,14.7,22.11a28.52,28.52,0,0,1,2.66,7.57A5,5,0,0,1,1040.1,852.11Z" transform="translate(-26.97 -40.04)" fill="#3f3d56"/><path d="M1040.1,852.11c-1.47,2.92-11.79,1-13.92.84s-17.17-7.73-17.38-9.5-5.42-5.42-6.88-5.42-8.55-5.64-9.18-6.47a3.19,3.19,0,0,1-.21-1.3c-.22-3.43.21-12.26.21-12.26l30.25,1.67,14.7,22.11a28.52,28.52,0,0,1,2.66,7.57A5,5,0,0,1,1040.1,852.11Z" transform="translate(-26.97 -40.04)" opacity="0.1"/><path d="M1040.1,852.11c-1.47,2.92-11.79,1-13.92.84s-17.17-7.73-17.38-9.5-5.42-5.42-6.88-5.42-8.55-5.64-9.18-6.47a3.19,3.19,0,0,1-.21-1.3l9.8,6.2s6.26,4,7.93,6.37,14.83,7.3,15.92,7.4c.81.08,9.45-1.58,14.17-.88A5,5,0,0,1,1040.1,852.11Z" transform="translate(-26.97 -40.04)" opacity="0.1"/><path d="M897.1,833.86s-4.28,5.32-10,5.73a5.89,5.89,0,0,0-5.84,5.63s1,3.24-12.83,7.73c-8.35,2.69-13.6,1.84-16.66,0a7.44,7.44,0,0,1-3.47-4.18c-.94-3.33,17.52-28.68,17.52-28.68l16.8-1,12,5.42,1.84,6.87Z" transform="translate(-26.97 -40.04)" fill="#3f3d56"/><path d="M897.1,833.86s-4.28,5.32-10,5.73a5.89,5.89,0,0,0-5.84,5.63s1,3.24-12.83,7.73c-8.35,2.69-13.6,1.84-16.66,0a7.44,7.44,0,0,1-3.47-4.18c-.94-3.33,17.52-28.68,17.52-28.68l16.8-1,12,5.42,1.84,6.87Z" transform="translate(-26.97 -40.04)" opacity="0.1"/><path d="M897.1,833.86s-4.28,5.32-10,5.73a5.89,5.89,0,0,0-5.84,5.63s1,3.24-12.83,7.73c-8.35,2.69-13.6,1.84-16.66,0,7.87-.82,25.26-5.79,27-7.51,2.09-2.09,4.7-7.83,6.47-7.93,1.23-.08,7.48-3.84,11.23-6.17Z" transform="translate(-26.97 -40.04)" fill="none"/><path d="M897.1,833.86s-4.28,5.32-10,5.73a5.89,5.89,0,0,0-5.84,5.63s1,3.24-12.83,7.73c-8.35,2.69-13.6,1.84-16.66,0,7.87-.82,25.26-5.79,27-7.51,2.09-2.09,4.7-7.83,6.47-7.93,1.23-.08,7.48-3.84,11.23-6.17Z" transform="translate(-26.97 -40.04)" opacity="0.1"/><path d="M1025.91,810.6c-1.88,4.38,0,13.35,0,13.35s-28,1.46-34.84-3.13-11.68-30.88-11.68-30.88,1-30.87,0-32.33-4.8-8.34-3.55-9.8-1-9.18-2.71-12.52-1-12.93-1-12.93l-4.18-25.46-6.46-30.24L956,646.42s-5.63-16.48-7.54-23.36-3.93-.63-3.93-.63c-.2,6.68-15.64,36.72-15.64,36.72s-2.3,18.15-4.8,24.61-5.22,29-5.22,29-4,45.89-7.3,53.61S906,785.56,906,785.56s.84,15.86-1.25,17.11S903,813.52,903,813.52s1.25,9.17-3.55,10.64-4,4.59-4,4.59-26.7,4.38-31.08-7.31,1.67-14.8,2-15.64,3.66-2.29.74-5.64,3.75-12.51,3.75-12.51,1.05-12.93,2.92-13.35,1.26-19.19,1.26-19.19l2.08-19.61s2.72-43.81,2.09-45.48-.21-10,1.88-14,3.75-40.48,3.75-40.48-.42-17.93,1.25-21.27c1-1.89,1.42-9.16,1.66-15.09.18-4.53.22-8.28.22-8.28l23.36-8.76,30-9.59,25.24,12.1,36.93,7.09.46,6.37,7.05,97.31,4,36.71s1.67,17.31,1.88,20.44,2.29,23.58,2.29,23.58,4.38,9.8,1.67,13.14-1.67,6-1.67,6S1027.79,806.22,1025.91,810.6Z" transform="translate(-26.97 -40.04)" fill="#3f3d56"/><path d="M965.36,354.53c-2.3,3.3-2.48,7.57-1.71,11.8A29.34,29.34,0,0,1,928.08,365h0c-.63-4.24-1.36-7.35-1.36-7.35S972.24,344.67,965.36,354.53Z" transform="translate(-26.97 -40.04)" opacity="0.1"/><path d="M976,341.77a29.3,29.3,0,1,1-29.3-29.3A29.16,29.16,0,0,1,976,341.77Z" transform="translate(-26.97 -40.04)" fill="#c37098"/><polygon points="955.13 350.42 945.53 521.37 893.38 510.42 883.05 441.89 893.28 349.89 900.98 350.88 914.56 352.61 928.01 353.44 942.59 351.82 955.13 350.42" opacity="0.1"/><polygon points="955.13 351.67 945.53 522.62 893.38 511.67 883.05 443.14 893.28 351.15 900.98 352.13 914.56 353.86 928.01 354.69 942.59 353.07 955.13 351.67" fill="#e58325"/><path d="M939.23,396.3l18.78.63-5.28,7.39s.37,14.93,2.88,19.21,1.77,70.4,1.77,70.4l-5,9.49-8.55-10.64.11-87.3Z" transform="translate(-26.97 -40.04)" fill="#3f3d56"/><path d="M939.23,396.3l18.78.63-5.28,7.39s.37,14.93,2.88,19.21,1.77,70.4,1.77,70.4l-5,9.49-8.55-10.64.11-87.3Z" transform="translate(-26.97 -40.04)" opacity="0.1"/><polygon points="941.67 336.86 924.15 356.26 934.16 366.69 950.75 350.52 941.67 336.86" opacity="0.1"/><polygon points="941.67 335.61 924.15 355.01 934.16 365.44 950.75 349.27 941.67 335.61" fill="#e58325"/><polygon points="916.75 355.32 899.01 337.59 897.34 346.87 905.48 367.21 916.75 355.32" opacity="0.1"/><polygon points="917.37 354.07 899.64 336.34 897.97 345.62 906.11 365.96 917.37 354.07" fill="#e58325"/><path d="M1004.05,598.14a86.57,86.57,0,0,1-27,7.81c-17.21,2.19-28.47-19.71-28.47-19.71l-6.57,8.55c-2.09,9.08-33.9,11.37-46.83,7.93a20.69,20.69,0,0,1-7.42-3.51c.18-4.53.22-8.28.22-8.28l23.36-8.76,30-9.59,25.24,12.1,36.93,7.09Z" transform="translate(-26.97 -40.04)" opacity="0.1"/><path d="M982.1,391.72l-9.59,170.94-52.16-10.95L910,483.19l10.22-92,7.7,1a93.48,93.48,0,0,1-1.13,10c-1.25,5.85,6.47,47.36,6.47,47.36s14.67,46.55,21.27,39.84,16-42.14,16-42.14c6.37-13.14.11-50-.36-50.74a14.88,14.88,0,0,1-.6-3.35Z" transform="translate(-26.97 -40.04)" opacity="0.1"/><path d="M1004.63,524l.44,16.75-4.82,4.37L997,504.57h7.2Z" transform="translate(-26.97 -40.04)" opacity="0.1"/><path d="M891.37,493.1v0a23.25,23.25,0,0,1-.57,4c0-.37,0-.58-.08-.61C890.42,496.41,890.78,494.88,891.37,493.1Z" transform="translate(-26.97 -40.04)" opacity="0.1"/><path d="M900.61,504.57l-3.29,40.52s-4.93-4.47-11.31-10.29l.76-7.18s2.69-17.64,3.67-26.34a16.08,16.08,0,0,0,1.72,3.29Z" transform="translate(-26.97 -40.04)" opacity="0.1"/><path d="M928.9,377s-3.12-4.59-7.4,4.27c0,0-11.16,6.47-15,7.2S889,394,889,394a12.08,12.08,0,0,1-7.09,2.29c-4.28,0-7.83,9.39-7.31,14.5s-.31,8.87-4.27,9.08-1.78,8.44-1.78,8.44l26.39,30.25s1.67,27.85.84,28.69-3.86,9-3.13,9.28-4,31.08-4,31.08l-6.36,59.77s0,10,12.94,13.45S940,602,942.05,592.92l6.57-8.56s11.26,21.91,28.47,19.72,28.17-8.45,28.17-8.45L1003.38,524l-1.25-51.63L1029,428.22s-7.2-13.77-6.57-20,1.87-10.95-13.46-13.14c0,0-12.93-1.93-20.55-7.2a58.74,58.74,0,0,0-14.7-7.4s-4.3-8-7.29-5.26c0,0,3,11.31,2.75,13s.47,9.33.94,10.12,6.73,37.6.36,50.74c0,0-9.35,35.43-16,42.14s-21.27-39.84-21.27-39.84-7.72-41.52-6.47-47.36S928.9,377,928.9,377Z" transform="translate(-26.97 -40.04)" fill="#3f3d56"/><circle cx="924.25" cy="469.12" r="4.59" fill="#3f3d56"/><circle cx="924.25" cy="490.76" r="4.59" fill="#3f3d56"/><circle cx="924.25" cy="469.12" r="4.59" opacity="0.1"/><circle cx="924.25" cy="490.76" r="4.59" opacity="0.1"/><path d="M992.47,804.34s18.84,1.46,20.71,2.92S992.47,804.34,992.47,804.34Z" transform="translate(-26.97 -40.04)" stroke="#e58325" stroke-miterlimit="10" opacity="0.1"/><path d="M880.3,789.53s4,5,2.3,7.3S880.3,789.53,880.3,789.53Z" transform="translate(-26.97 -40.04)" stroke="#e58325" stroke-miterlimit="10" opacity="0.1"/><path d="M885.1,807.56s7.3-4.8,10.22-1.61S885.1,807.56,885.1,807.56Z" transform="translate(-26.97 -40.04)" stroke="#e58325" stroke-miterlimit="10" opacity="0.1"/><path d="M976,341.77a29.16,29.16,0,0,1-.94,7.41,3.33,3.33,0,0,1-1.94-3.26c.13-1.19.92-2.28.75-3.46-.25-1.82-2.45-2.56-3.61-4-1.43-1.74-1.12-4.27-1-6.52s-.45-5-2.56-5.77c-.63-.23-1.32-.25-1.93-.51-1.66-.7-2.17-2.76-3.28-4.18-2.22-2.86-6.63-2.8-10-1.44a47.53,47.53,0,0,1-4.5,1.88,5.88,5.88,0,0,1-4.71-.35c-.66-.42-1.19-1-1.87-1.42-2.26-1.36-5.22,0-7.18,1.75s-3.53,4.1-6,5.17c-1.11.5-2.48.8-3,1.88a3.94,3.94,0,0,0-.32,1.87c0,3.89.46,7.84-.35,11.65-.52,2.45-2.24,5.23-4.73,4.93a4.67,4.67,0,0,1-.91-.23,29.3,29.3,0,1,1,58.1-5.42Z" transform="translate(-26.97 -40.04)" opacity="0.1"/><path d="M916.61,345.51c.75.17,1.46.56,2.23.66,2.49.3,4.21-2.48,4.73-4.93.81-3.81.39-7.76.36-11.65a3.81,3.81,0,0,1,.31-1.87c.57-1.08,1.94-1.38,3-1.88,2.42-1.08,4-3.38,6-5.17s4.91-3.11,7.17-1.75c.67.4,1.21,1,1.87,1.42a6,6,0,0,0,4.72.35c1.55-.46,3-1.27,4.49-1.88,3.34-1.36,7.76-1.41,10,1.43,1.11,1.43,1.62,3.48,3.28,4.18.61.26,1.3.29,1.93.52,2.11.79,2.65,3.52,2.56,5.77s-.39,4.78,1,6.52c1.16,1.42,3.36,2.16,3.61,4,.16,1.18-.62,2.28-.75,3.46a3.32,3.32,0,0,0,3.13,3.54c2.6,0,4.21-2.91,6.64-3.84,1-.39,2.21-.45,3-1.24a3.31,3.31,0,0,0,.62-2.71c-.49-3.83-3.56-7.16-3.23-11,.31-3.68,3.72-6.89,3-10.51a8.52,8.52,0,0,0-2-3.57,11.56,11.56,0,0,0-4.08-3.45c-1.39-.6-3-.74-4.27-1.47-3.78-2.07-3.77-7.47-6-11.15a9.79,9.79,0,0,0-9.12-4.54c-2.81.28-5.36,1.77-8.14,2.27-3.81.68-7.67-.57-11.28-2s-7.26-3-11.13-3-8.06,2-9.24,5.66c-.62,2-.31,4.14-.79,6.15-.84,3.57-4,6.11-7.18,7.88-2.19,1.22-4.82,2.62-5.08,5.11-.17,1.58.7,3,1.25,4.53a11.53,11.53,0,0,1-.06,8c-.73,1.89-1.95,3.55-2.69,5.43a9.75,9.75,0,0,0,.26,8,7.46,7.46,0,0,0,4.57,3.75C913.27,347,914.51,345.05,916.61,345.51Z" transform="translate(-26.97 -40.04)" fill="#3f3d56"/><g opacity="0.1"><path d="M923.57,339.06c-.52,2.45-2.25,5.23-4.74,4.93-.77-.1-1.47-.49-2.23-.66-2.09-.46-3.33,1.5-5.3,1a7.48,7.48,0,0,1-4.58-3.75,8.66,8.66,0,0,1-.93-3.27,9.13,9.13,0,0,0,.93,5.15,7.48,7.48,0,0,0,4.58,3.75c2,.46,3.21-1.5,5.3-1a22.61,22.61,0,0,0,2.23.65c2.49.31,4.22-2.47,4.74-4.92a28.89,28.89,0,0,0,.48-6.57A24.63,24.63,0,0,1,923.57,339.06Z" transform="translate(-26.97 -40.04)"/><path d="M909.87,324a11.51,11.51,0,0,0-.66-4.83,25.53,25.53,0,0,1-1.15-3.16,4.59,4.59,0,0,0-.1.51c-.17,1.57.71,3,1.25,4.53A11.47,11.47,0,0,1,909.87,324Z" transform="translate(-26.97 -40.04)"/><path d="M986.27,318.73c-.47,2.84-2.77,5.51-3,8.5a7.15,7.15,0,0,0,0,1.54C983.77,325.28,986.86,322.19,986.27,318.73Z" transform="translate(-26.97 -40.04)"/><path d="M986.44,339.83a2.35,2.35,0,0,1-.57,1.12c-.74.79-2,.85-3,1.24-2.43.93-4,3.87-6.64,3.84a3.35,3.35,0,0,1-3-2.32,5.18,5.18,0,0,0-.14.66,3.32,3.32,0,0,0,3.13,3.53c2.61,0,4.21-2.91,6.64-3.83,1-.39,2.22-.45,3-1.24a3.31,3.31,0,0,0,.62-2.71C986.47,340,986.45,339.92,986.44,339.83Z" transform="translate(-26.97 -40.04)"/><path d="M973.9,339c-.25-1.82-2.45-2.56-3.61-4a5.48,5.48,0,0,1-1.1-3.28c-.08,1.86-.05,3.76,1.1,5.16s2.9,2,3.46,3.44A3.21,3.21,0,0,0,973.9,339Z" transform="translate(-26.97 -40.04)"/><path d="M969.25,328.53c.08-2.25-.46-5-2.57-5.77-.62-.23-1.31-.26-1.92-.51-1.66-.7-2.18-2.76-3.28-4.18-2.23-2.85-6.64-2.8-10-1.44-1.5.61-2.93,1.42-4.49,1.88a5.88,5.88,0,0,1-4.71-.35c-.66-.42-1.2-1-1.87-1.42-2.27-1.36-5.23,0-7.18,1.75s-3.53,4.09-6,5.17c-1.12.5-2.48.8-3.06,1.88a3.93,3.93,0,0,0-.31,1.87c0,.39,0,.78,0,1.17a2.84,2.84,0,0,1,.29-1.16c.58-1.08,1.94-1.38,3.06-1.88,2.42-1.08,4-3.38,6-5.17s4.91-3.11,7.18-1.75c.67.4,1.21,1,1.87,1.41a5.84,5.84,0,0,0,4.71.35,46.21,46.21,0,0,0,4.49-1.87c3.35-1.36,7.76-1.42,10,1.43,1.1,1.42,1.62,3.48,3.28,4.18.61.26,1.3.29,1.92.52,1.71.64,2.39,2.56,2.54,4.46Z" transform="translate(-26.97 -40.04)"/></g><g opacity="0.1"><path d="M920,339a7.67,7.67,0,0,1,5.78-7.17,24,24,0,0,1,13.48.61c9.49,3.14-1.2,14.44-1.2,14.44s-7.11,7-13.74,2.11a10.39,10.39,0,0,1-3.87-6A15.3,15.3,0,0,1,920,339Z" transform="translate(-26.97 -40.04)"/><path d="M972.17,339a7.67,7.67,0,0,0-5.79-7.17,24,24,0,0,0-13.47.61c-9.49,3.14,1.2,14.44,1.2,14.44s7.1,7,13.74,2.11a10.39,10.39,0,0,0,3.87-6A15.3,15.3,0,0,0,972.17,339Z" transform="translate(-26.97 -40.04)"/><polygon points="910.5 291.48 910.5 291.95 927.83 291.95 927.83 291.39 910.5 291.48"/><path d="M943,336.53h.55v-1.59s1.76-1.37,4.68,0v1.42h1v-.93h-.49s.2-1.93-3.06-1.62c0,0-2.62-.25-2.56,1.41h-.6Z" transform="translate(-26.97 -40.04)"/></g><path d="M920,338.35a7.67,7.67,0,0,1,5.78-7.17,24.13,24.13,0,0,1,13.48.61c9.49,3.15-1.2,14.44-1.2,14.44s-7.11,7-13.74,2.11a10.33,10.33,0,0,1-3.87-6A15.21,15.21,0,0,1,920,338.35Z" transform="translate(-26.97 -40.04)" fill="#e58325"/><path d="M972.17,338.35a7.67,7.67,0,0,0-5.79-7.17,24.09,24.09,0,0,0-13.47.61c-9.49,3.15,1.2,14.44,1.2,14.44s7.1,7,13.74,2.11a10.33,10.33,0,0,0,3.87-6A15.21,15.21,0,0,0,972.17,338.35Z" transform="translate(-26.97 -40.04)" fill="#e58325"/><polygon points="910.5 290.85 910.5 291.33 927.83 291.33 927.83 290.76 910.5 290.85" fill="#e58325"/><path d="M943,335.9h.55v-1.59s1.76-1.36,4.68,0v1.43h1v-.94h-.49s.2-1.92-3.06-1.62c0,0-2.62-.24-2.56,1.41h-.6Z" transform="translate(-26.97 -40.04)" fill="#e58325"/><rect x="117.46" y="457.19" width="5.68" height="127.9" fill="#535461"/><path d="M185.81,624.74l-.36,5.76-.5,8.13-.21,3.39-.5,8.14-.22,3.39-.5,8.13-5.73,92.47a15.66,15.66,0,0,1-15.63,14.7H132.38a15.65,15.65,0,0,1-15.62-14.7L111,661.68l-.5-8.13-.21-3.39L109.8,642l-.21-3.39-.5-8.13-.36-5.76a8.11,8.11,0,0,1,8.1-8.61h60.89A8.1,8.1,0,0,1,185.81,624.74Z" transform="translate(-26.97 -40.04)" fill="#3f3d56"/><polygon points="158.48 590.46 157.98 598.59 82.61 598.59 82.11 590.46 158.48 590.46" fill="#9d9cb5"/><polygon points="157.77 601.98 157.27 610.12 83.33 610.12 82.82 601.98 157.77 601.98" fill="#9d9cb5"/><polygon points="157.05 613.51 156.55 621.64 84.05 621.64 83.54 613.51 157.05 613.51" fill="#9d9cb5"/><path d="M100.41,545.17c33.08,23.93,46.86,61.37,46.86,61.37s-39.87-1.37-73-25.3-46.86-61.37-46.86-61.37S67.32,521.24,100.41,545.17Z" transform="translate(-26.97 -40.04)" fill="#e58325"/><path d="M27.46,519.87s41.38,23,54.65,42,65.16,44.68,65.16,44.68" transform="translate(-26.97 -40.04)" fill="none" stroke="#535461" stroke-miterlimit="10" stroke-width="2"/><path d="M121.76,497c18,13,25.51,33.4,25.51,33.4s-21.7-.74-39.71-13.77-25.5-33.4-25.5-33.4S103.76,483.92,121.76,497Z" transform="translate(-26.97 -40.04)" fill="#e58325"/><path d="M82.06,483.18s22.52,12.5,29.74,22.85,35.47,24.32,35.47,24.32" transform="translate(-26.97 -40.04)" fill="none" stroke="#535461" stroke-miterlimit="10" stroke-width="2"/><path d="M173.44,529.32c-20.69,22.73-25.06,52.43-25.06,52.43s29.16-7.15,49.84-29.88,25.06-52.44,25.06-52.44S194.12,506.58,173.44,529.32Z" transform="translate(-26.97 -40.04)" fill="#e58325"/><path d="M223.28,499.43s-26.94,23.3-33.79,39.36-41.11,43-41.11,43" transform="translate(-26.97 -40.04)" fill="none" stroke="#535461" stroke-miterlimit="10" stroke-width="2"/></svg>
\ No newline at end of file
diff --git a/frontend/static/svgs/manage-cookbooks.svg b/frontend/static/svgs/manage-cookbooks.svg
new file mode 100644
index 00000000..ee3c223d
--- /dev/null
+++ b/frontend/static/svgs/manage-cookbooks.svg
@@ -0,0 +1 @@
+<svg id="ab52c5b6-5573-49f0-a2fe-42cb4f9f7e33" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="641.9627" height="598" viewBox="0 0 641.9627 598"><path d="M607.64146,742.65761c-3.12074,0-6.27329-.04942-9.36768-.14612l.0703-2.24742c4.4433.1384,8.9777.17685,13.4419.11535l.03078,2.24962Q609.73241,742.65714,607.64146,742.65761Zm17.71051-.5218-.13182-2.24525c4.44989-.26254,8.95686-.63163,13.39573-1.09625l.23506,2.23645c-4.47289.46909-9.01388.84147-13.49892,1.1051Zm-40.60131-.3504c-4.4872-.34382-9.02165-.79418-13.47813-1.34119l.27459-2.23208c4.42235.54151,8.9217.98971,13.37488,1.33023Zm67.53343-2.47372-.33723-2.22328c4.42132-.67116,8.87666-1.44994,13.23864-2.31663l.43827,2.20572c-4.396.87323-8.88434,1.65865-13.33968,2.33423Zm-94.4122-.82274c-4.43283-.75135-8.90745-1.61475-13.29907-2.56822l.4773-2.19908c4.35814.94688,8.7981,1.80369,13.19744,2.54845Zm120.973-4.45648-.54043-2.18374c4.34-1.07319,8.70419-2.25951,12.97172-3.525l.6393,2.15739c-4.30047,1.27535-8.6976,2.47047-13.07059,3.55138Zm-147.43768-1.28961c-4.34826-1.15668-8.724-2.42869-13.00579-3.78311l.67775-2.14421c4.24939,1.3434,8.5916,2.60554,12.90584,3.75233ZM704.80807,726.33l-.73818-2.12445c4.21149-1.46425,8.44716-3.04714,12.59168-4.70579l.83483,2.08929c-4.1752,1.6708-8.44386,3.26578-12.68828,4.741Zm-199.2576-1.76195c-4.223-1.55211-8.47243-3.22728-12.629-4.97822l.87328-2.07391c4.1247,1.73776,8.34115,3.39976,12.53233,4.94091Zm224.37388-8.28791-.93149-2.04755c4.04456-1.83771,8.10993-3.79957,12.08305-5.83061l1.02388,2.0037c-4.00391,2.04642-8.1001,4.02254-12.17539,5.87456ZM480.5391,714.03724c-4.05936-1.93438-8.13411-3.99181-12.10945-6.11621l1.06-1.98384c3.94569,2.10793,7.98854,4.15,12.01717,6.07009Zm273.4548-10.06082-1.11385-1.95306c3.87863-2.21339,7.75072-4.54,11.50639-6.91589l1.20171,1.90035C761.804,699.40239,757.90336,701.74764,753.9939,703.97642Zm-297.37655-2.7198c-3.8611-2.29687-7.72769-4.719-11.49157-7.1982l1.238-1.87837c3.73477,2.46054,7.57168,4.864,11.40368,7.14328ZM776.854,689.51409l-1.2874-1.84322c3.65237-2.55175,7.29707-5.2243,10.833-7.94188l1.37089,1.78388C784.20817,684.25134,780.535,686.94366,776.854,689.51409Zm-342.87537-3.168c-3.631-2.6374-7.25809-5.4-10.7814-8.21318l1.40383-1.75752c3.49639,2.79118,7.09606,5.533,10.699,8.1495Zm364.33382-13.32434-1.44994-1.72021c3.40418-2.87246,6.79179-5.86576,10.0707-8.89751L808.46,664.0561C805.15692,667.111,801.74291,670.12733,798.31242,673.02176Zm-385.50884-3.5832c-3.38161-2.96144-6.74125-6.04152-9.985-9.15568l1.55762-1.6235c3.21959,3.091,6.55342,6.14807,9.90922,9.08759Zm405.3877-14.804-1.60157-1.57959c3.1383-3.18,6.24257-6.471,9.22486-9.78073l1.67188,1.50492c-3.0054,3.33608-6.13268,6.65128-9.29517,9.85545Zm-424.92823-3.95007c-3.1026-3.26238-6.16675-6.63471-9.10732-10.02237L385.855,639.188c2.91806,3.36239,5.95861,6.70831,9.03815,9.94548ZM836.32358,634.5097l-1.73776-1.428c2.83514-3.45025,5.62633-7.01039,8.29887-10.58365l1.80148,1.3467C841.99386,627.44552,839.1807,631.03418,836.32358,634.5097Zm-460.80781-4.27083c-2.78624-3.52056-5.52966-7.15537-8.15442-10.80337l1.82564-1.31375c2.605,3.61943,5.32755,7.22676,8.09292,10.7221Zm477.03755-17.43144-1.86077-1.26321c2.50887-3.69417,4.96612-7.4959,7.30257-11.30206l1.91791,1.17757C857.55686,605.2544,855.08093,609.08583,852.55332,612.80743Zm-492.84279-4.53224c-2.45123-3.75778-4.85027-7.62442-7.13121-11.49543l1.93769-1.14241c2.26394,3.84131,4.64486,7.67933,7.0774,11.40752Zm507.03274-18.57174-1.96845-1.08745c2.15961-3.90833,4.2576-7.92211,6.23819-11.93039l2.01678.99742C871.03494,581.721,868.91934,585.76547,866.74327,589.70345Zm-520.76073-4.73c-2.09807-3.96545-4.13237-8.03416-6.04647-12.0918l2.03436-.96006c1.89978,4.027,3.91821,8.06489,6.00035,11.99957Zm532.77456-19.59-2.06073-.90293c1.79268-4.094,3.514-8.28677,5.11667-12.46094l2.10026.80627c-1.6147,4.20716-3.35025,8.43186-5.1562,12.55765Zm-544.30519-4.85413c-1.72458-4.139-3.37613-8.37355-4.90848-12.58729l2.11452-.76891c1.52028,4.18184,3.15919,8.38344,4.87,12.49059ZM888.485,540.03978l-2.13536-.7074c1.40387-4.23016,2.72859-8.55374,3.93689-12.852l2.16614.60854c-1.21813,4.33128-2.55386,8.68888-3.96757,12.95091ZM325.21,535.10989c-1.33846-4.2873-2.59622-8.66686-3.73807-13.019l2.176-.5712c1.13307,4.31915,2.38146,8.66574,3.7095,12.9201Zm570.60724-21.141-2.19141-.50967c1.00731-4.33563,1.92779-8.76354,2.73735-13.15848l2.21226.40643c-.81487,4.43017-1.743,8.891-2.758,13.2618ZM318.339,508.91378c-.93808-4.39384-1.78719-8.87008-2.52318-13.30677l2.2189-.36908c.731,4.40374,1.57355,8.84591,2.5045,13.2057ZM900.7196,487.3356l-2.22986-.30537c.60523-4.40593,1.11606-8.89861,1.51922-13.354l2.24087.20212c-.4063,4.49054-.92146,9.0173-1.53,13.45731Zm-586.814-5.13641c-.53055-4.45316-.96611-8.98871-1.29507-13.48032l2.24416-.16478c.3257,4.45867.75848,8.95905,1.28519,13.37926Zm589.26026-21.83192-2.24746-.10106c.1999-4.45755.30207-8.97883.30207-13.43747h2.24963c.00019,4.49276-.102,9.04808-.304,13.53861ZM311.929,455.19133c-.07689-2.75824-.11588-5.57248-.11645-8.36259q0-2.59675.0445-5.18363l2.24965.03955q-.04451,2.56712-.0445,5.14411c.00057,2.76923.03956,5.5626.11534,8.30108Zm589.275-11.50088c-.04612-4.46031-.19548-8.981-.44269-13.43747l2.2453-.12523c.24937,4.4905.39982,9.04531.44711,13.53856Zm-586.5633-15.43608-2.24525-.14061c.28066-4.49485.66841-9.03483,1.15119-13.494l2.23647.24222C315.30361,419.28763,314.9197,423.793,314.64068,428.25437ZM899.70915,416.8545c-.44928-4.435-1.00839-8.92224-1.66092-13.33806l2.22554-.32843c.65685,4.44933,1.22039,8.9706,1.67409,13.43915Zm-582.1746-15.318-2.22328-.34382c.68928-4.4504,1.49007-8.936,2.38034-13.33368l2.20461.446C319.01311,392.66917,318.21837,397.12068,317.53455,401.53649Zm578.24321-11.26582c-.85784-4.38836-1.82562-8.80582-2.878-13.12935l2.18591-.53165c1.06,4.35649,2.03546,8.808,2.89989,13.22932ZM322.86322,375.1965l-2.18209-.547c1.09241-4.357,2.30237-8.75036,3.59637-13.0585l2.15407.647C325.148,366.51315,323.94737,370.87294,322.86322,375.1965ZM889.42,364.15807c-1.25441-4.28344-2.62535-8.59217-4.07416-12.80805l2.12661-.73159c1.461,4.24831,2.84286,8.59106,4.10711,12.90692Zm-558.8125-14.73532-2.12223-.74587c1.495-4.25268,3.10918-8.52575,4.79753-12.7004l2.086.84363c-1.67579,4.14228-3.2779,8.38289-4.76138,12.60264ZM880.684,338.743c-1.64115-4.1401-3.39863-8.295-5.22425-12.35l2.05188-.9238c1.83988,4.08628,3.61063,8.27306,5.26388,12.44447ZM340.70441,324.45472l-2.04423-.93918c1.87891-4.09178,3.87863-8.19507,5.94378-12.19567l1.9992,1.03142C344.55344,316.32175,342.56907,320.3937,340.70441,324.45472Zm528.96953-10.16351c-2.01343-3.9715-4.14668-7.95121-6.34031-11.82714l1.95743-1.10834c2.21123,3.90613,4.35977,7.91606,6.38864,11.9183Zm-516.62231-13.756-1.94976-1.12263c2.24417-3.89679,4.61078-7.79743,7.03455-11.59261l1.896,1.21051c-2.40506,3.76659-4.75412,7.6376-6.98069,11.50473Zm503.40559-9.60056c-2.37706-3.78419-4.86622-7.55412-7.39815-11.20539l1.84759-1.28191c2.55175,3.6793,5.06063,7.47778,7.45524,11.29111ZM367.53159,277.86018l-1.83883-1.29619c2.59347-3.67819,5.305-7.34431,8.06106-10.89673l1.77731,1.37859C372.79652,270.57189,370.10474,274.21,367.53159,277.86018Zm473.623-8.98981c-2.711-3.55078-5.534-7.08068-8.39331-10.4914l1.72458-1.445c2.88017,3.43709,5.7252,6.99337,8.457,10.571ZM384.014,256.611l-1.71249-1.45876c2.91038-3.41841,5.94378-6.82089,9.01563-10.113l1.6444,1.53453C389.9133,249.84118,386.903,253.21841,384.014,256.611Zm439.88487-8.33293c-3.02187-3.28934-6.15687-6.54958-9.31606-9.689L816.169,236.993c3.18333,3.16412,6.34144,6.44852,9.38637,9.76259Zm-421.545-11.32019-1.573-1.60814c3.21684-3.14709,6.54575-6.25849,9.89329-9.24739l1.49828,1.67844C408.85022,230.74664,405.54661,233.8344,402.35391,236.95788Zm402.48231-7.62607c-3.31185-3.00374-6.73137-5.96631-10.163-8.80525l1.43461-1.73338c3.45683,2.86044,6.90271,5.84546,10.23983,8.87228ZM422.39644,219.0601l-1.42032-1.74436c3.47938-2.83348,7.07519-5.628,10.688-8.306l1.34011,1.807C429.41836,213.475,425.84945,216.248,422.39644,219.0601Zm361.72274-6.86923c-3.57331-2.69068-7.24982-5.33083-10.92746-7.84685l1.2698-1.8564c3.70625,2.5347,7.4102,5.19462,11.011,7.90617ZM443.973,203.06815l-1.25554-1.86628c3.72378-2.50559,7.5574-4.959,11.39488-7.29378l1.16872,1.9223C451.47327,198.147,447.66873,200.58234,443.973,203.06815Zm317.942-6.064c-3.80178-2.3529-7.70569-4.64648-11.60305-6.81815l1.09408-1.96514c3.9281,2.18813,7.86169,4.49984,11.69308,6.86977Zm-295.00942-7.88534-1.07978-1.97393c3.93965-2.15573,7.97925-4.2472,12.00621-6.21729l.98863,2.02116c-3.99624,1.95473-8.00506,4.03027-11.915,6.17007Zm271.499-5.21219c-4.00277-1.99426-8.10333-3.921-12.18743-5.72629l.90952-2.05742c4.11595,1.81906,8.24833,3.76058,12.28193,5.77023Zm-247.40313-6.57374-.89413-2.064c4.11709-1.78445,8.32852-3.49586,12.517-5.087l.7986,2.10355C499.26621,173.86391,495.08713,175.56213,491.00141,177.33285Zm222.77344-4.31311c-4.16541-1.61528-8.42847-3.15643-12.67186-4.58l.7162-2.13321c4.2752,1.43513,8.5713,2.98781,12.76852,4.61628Zm-197.68022-5.21549-.7008-2.13761c4.2752-1.40162,8.63718-2.72143,12.96405-3.9215l.6014,2.16726C524.66539,165.10368,520.33689,166.413,516.09463,167.80425Zm172.16953-3.34482c-4.29059-1.22313-8.66687-2.36224-13.00687-3.38545l.51629-2.18924c4.37407,1.03091,8.7833,2.1788,13.108,3.41073Zm-146.27382-3.84187-.5009-2.19307c4.38288-1.00127,8.84756-1.91352,13.26942-2.711l.39987,2.21339C550.76976,158.71888,546.33968,159.624,541.99034,160.61756Zm120.11729-2.32489c-4.38071-.82219-8.84264-1.55374-13.26283-2.17441l.312-2.22767c4.45426.62557,8.95134,1.36264,13.36608,2.19088Zm-93.67019-2.44792-.2977-2.22988c4.45318-.59427,8.98213-1.09407,13.46053-1.484l.19553,2.24086C577.35142,154.75947,572.85763,155.25488,568.43744,155.84475Zm67.05775-1.29069c-4.4312-.41742-8.94147-.73927-13.40674-.95512l.10983-2.24743c4.49822.218,9.04255.54212,13.50778.96279Zm-40.285-1.04519-.09444-2.24743c4.13458-.17247,8.34833-.26034,12.52574-.26144l1.01827.00161-.00659,2.24965-1.01168-.00165C603.49591,153.25074,599.313,153.33806,595.21021,153.50887Z" transform="translate(-279.01865 -151)" fill="#e6e6e6"/><path d="M608.34882,741.1215V618.10685a6.50752,6.50752,0,0,1,6.5-6.5h14.75976a6.50752,6.50752,0,0,1,6.5,6.5V741.1215a6.50753,6.50753,0,0,1-6.5,6.5H614.84882A6.50753,6.50753,0,0,1,608.34882,741.1215Z" transform="translate(-279.01865 -151)" fill="#2f2e41"/><path d="M579.15643,741.1215V618.10685a6.50753,6.50753,0,0,1,6.5-6.5H600.4162a6.50753,6.50753,0,0,1,6.5,6.5V741.1215a6.50753,6.50753,0,0,1-6.5,6.5H585.65643A6.50753,6.50753,0,0,1,579.15643,741.1215Z" transform="translate(-279.01865 -151)" fill="#2f2e41"/><rect x="292.73409" y="426.49441" width="71.75954" height="79.50559" rx="6" fill="#2f2e41"/><path d="M507.16757,384.22559s-30.15869,14.01025-55.67975,23.30175c-15.83716-35.751-38.65295-34.41308-38.65295-34.41308l-13.83246,9.52441,2.49438,14.28565-.68029,23.35644-3.62818,12.24512,5.20642.94092,2.9411.5332.44336-.40088a30.21881,30.21881,0,0,0-.881,8.9043l130.84131-20.40821S531.20425,401.00635,507.16757,384.22559Z" transform="translate(-279.01865 -151)" fill="#e6e6e6"/><rect x="513.82732" y="466.41045" width="26.75958" height="135.01423" rx="6" transform="translate(132.15633 1124.23521) rotate(-126.46649)" fill="#e58325"/><rect x="648.84824" y="479.41045" width="26.75958" height="135.01423" rx="6" transform="translate(-458.12757 223.24181) rotate(-27.95414)" fill="#e58325"/><path d="M673.65065,532.05277l-21.29277,14.11561c-3.25382,1.72675-7.1508.75369-8.70415-2.17338l-23.51528-44.31134c-1.55335-2.92707-.17484-6.69974,3.079-8.42649l14.49283-7.69111c3.25382-1.72674,7.1508-.75369,8.70415,2.17339l30.31521,37.88682C678.283,526.55335,676.90447,530.326,673.65065,532.05277Z" transform="translate(-279.01865 -151)" fill="#ccc"/><path d="M528.5505,519.07236l13.8395,18.379a6,6,0,0,0,8.481.26853l36.57635-34.33122a6,6,0,0,0,.26853-8.481L577.61483,484.146a6,6,0,0,0-8.481-.26853L528.819,510.59133A6,6,0,0,0,528.5505,519.07236Z" transform="translate(-279.01865 -151)" fill="#ccc"/><rect x="289.08267" y="331.05948" width="79.06239" height="154.47574" rx="6" fill="#ccc"/><circle cx="328.22203" cy="268.24226" r="53.51916" fill="#e58325"/><path d="M613.47852,437.11133c-3.30664-.09278-7.42188-.208-10.58887-2.52246a8.13106,8.13106,0,0,1-3.2002-6.07324,5.46955,5.46955,0,0,1,1.86035-4.49219c1.6543-1.39844,4.07227-1.72852,6.67774-.96094l-2.69922-19.72656,1.98242-.27149,3.17188,23.19043-1.6543-.75879c-1.917-.88086-4.55078-1.32812-6.1875.05469a3.51377,3.51377,0,0,0-1.15234,2.89453,6.1458,6.1458,0,0,0,2.38086,4.52832c2.46386,1.80078,5.74511,2.03418,9.46582,2.1377Z" transform="translate(-279.01865 -151)" fill="#2f2e41"/><rect x="305.93936" y="254.03711" width="10.77148" height="2" fill="#2f2e41"/><rect x="339.93936" y="254.03711" width="10.77148" height="2" fill="#2f2e41"/><path d="M571.88494,377.41944c-8.67422-.98915-15.39221-9.30024-16.13008-17.733-.87783-10.03212,4.96458-19.56033,12.97992-25.18991,8.38219-5.88725,18.8256-8.34576,28.93006-8.887A79.50951,79.50951,0,0,1,652.013,343.5232c7.57144,6.28846,14.64266,14.29887,17.3227,23.97443,2.3275,8.40282.4335,17.92213-6.32474,23.80721a15.97618,15.97618,0,0,1-12.26,3.77473c-5.24389-.5445-10.08223-3.30177-14.27039-6.3469-8.14685-5.92341-14.835-14.17529-24.76049-17.27067-7.27771-2.26964-16.722-.27185-21.1694,6.30949a11.979,11.979,0,0,0-1.91259,5.01866,1.55341,1.55341,0,0,0,1.04766,1.84518,1.50931,1.50931,0,0,0,1.84517-1.04766c1.16758-8.28938,11.36015-11.38252,18.51255-9.48949,10.42855,2.76013,17.42914,12.06611,25.98534,17.97854,4.49851,3.10852,9.615,5.59408,15.13243,6.04a18.79087,18.79087,0,0,0,13.20329-4.05609c7.30959-5.77189,10.105-15.69938,8.48863-24.63744-1.87173-10.3504-8.83824-19.22131-16.482-26.08923a82.44679,82.44679,0,0,0-56.344-20.81437c-10.57357.24286-21.60609,2.42565-30.71518,8.01422-8.83577,5.42088-15.66506,14.49-16.55766,25.03193-.78565,9.27894,4.19268,18.98423,12.73843,23.04935a19.949,19.949,0,0,0,6.39214,1.80435c1.91494.21836,1.89934-2.78342,0-3Z" transform="translate(-279.01865 -151)" fill="#2f2e41"/><path d="M405.23825,432.186l6.34936-2.041c.6803-1.30371-.56463-.46729.02948-1.73486,16.06379-34.27051,1.21772-55.2959,1.21772-55.2959L401.35,381.022c-.02825-.06494-.05139-.13232-.08007-.19775.00006,0-2.04084-4.53516-5.21546-1.13379,0,0,9.97748,24.26367-1.13385,54.42285l12.92542,5.896,4.98871-5.896.1134-.56689-8.92816-.81153Z" transform="translate(-279.01865 -151)" fill="#ccc"/><path d="M586.30724,559.51239c-51.02133-11.33807-98.52783,12.13171-98.52783,12.13171l-.12927-.11566L468.73144,554.637,394.80724,434l18.02753.11337c50.11426-29.93249,120.637-25.8508,120.637-25.8508C563.85787,442.73029,586.30724,559.51239,586.30724,559.51239Z" transform="translate(-279.01865 -151)" fill="#3f3d56"/><path d="M487.65017,571.5285,468.73147,554.637,394.80724,434l18.02753.11337S484.68639,529.01074,487.65017,571.5285Z" transform="translate(-279.01865 -151)" opacity="0.1" style="isolation:isolate"/><ellipse cx="490.50058" cy="459.62401" rx="29.25223" ry="18.59442" transform="translate(-392.23489 13.03807) rotate(-17.05185)" fill="#e58325"/><path d="M338.0302,375.50781c-4.07382,15.05929-18.02755,24.38587-18.02755,24.38587s-7.34878-15.08934-3.275-30.14863,18.02757-24.38587,18.02757-24.38587S342.104,360.44855,338.0302,375.50781Z" transform="translate(-279.01865 -151)" fill="#ccc"/><path d="M300.96981,375.50781c4.07383,15.05929,18.02755,24.38587,18.02755,24.38587s7.34879-15.08934,3.275-30.14863-18.02754-24.38587-18.02754-24.38587S296.896,360.44855,300.96981,375.50781Z" transform="translate(-279.01865 -151)" fill="#ccc"/><path d="M306.956,372.27141c11.17862,10.88194,12.544,27.61,12.544,27.61s-16.75872-.915-27.93735-11.797-12.544-27.61-12.544-27.61S295.77738,361.38948,306.956,372.27141Z" transform="translate(-279.01865 -151)" fill="#3f3d56"/><path d="M332.044,372.27141c-11.17862,10.88194-12.544,27.61-12.544,27.61s16.75874-.915,27.93735-11.797,12.544-27.61,12.544-27.61S343.22263,361.38948,332.044,372.27141Z" transform="translate(-279.01865 -151)" fill="#3f3d56"/><path d="M899.0302,545.50781c-4.07382,15.05929-18.02755,24.38587-18.02755,24.38587s-7.34878-15.08934-3.275-30.14863,18.02757-24.38587,18.02757-24.38587S903.104,530.44855,899.0302,545.50781Z" transform="translate(-279.01865 -151)" fill="#ccc"/><path d="M861.96981,545.50781c4.07383,15.05929,18.02755,24.38587,18.02755,24.38587s7.34879-15.08934,3.275-30.14863-18.02754-24.38587-18.02754-24.38587S857.896,530.44855,861.96981,545.50781Z" transform="translate(-279.01865 -151)" fill="#ccc"/><path d="M867.956,542.27141c11.17862,10.88194,12.544,27.61,12.544,27.61s-16.75872-.915-27.93735-11.797-12.544-27.61-12.544-27.61S856.77738,531.38948,867.956,542.27141Z" transform="translate(-279.01865 -151)" fill="#3f3d56"/><path d="M893.044,542.27141c-11.17862,10.88194-12.544,27.61-12.544,27.61s16.75874-.915,27.93735-11.797,12.544-27.61,12.544-27.61S904.22263,531.38948,893.044,542.27141Z" transform="translate(-279.01865 -151)" fill="#3f3d56"/><rect x="213.9628" y="596" width="232" height="2" fill="#3f3d56"/></svg>
\ No newline at end of file
diff --git a/frontend/static/svgs/manage-group-settings.svg b/frontend/static/svgs/manage-group-settings.svg
new file mode 100644
index 00000000..87d51abf
--- /dev/null
+++ b/frontend/static/svgs/manage-group-settings.svg
@@ -0,0 +1 @@
+<svg id="a8897f4c-2937-4134-8b3a-fee1040aeff6" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="1066.10578" height="824.1997" viewBox="0 0 1066.10578 824.1997"><title>people</title><polygon points="962.551 394.71 946.672 466.13 933.782 524.07 923.508 570.28 910.626 628.22 868.531 817.51 346.914 576.48 308.572 558.76 260.039 536.33 221.683 518.61 175.551 497.29 201.704 459.24 223.452 427.6 250.965 387.57 272.707 355.95 517.369 0 776.55 229.8 822.703 270.72 859.505 303.35 905.666 344.27 962.551 394.71" fill="#f2f2f2"/><path d="M271.30076,642.73135C236.42088,623.287,214.707,596.74014,206.7617,563.829c-5.89942-24.43555-4.2041-51.93262,5.03808-81.72754a218.88823,218.88823,0,0,1,30.439-61.48437c70.63818-99.98633,77.01367-165.1377,69.92334-202.18653-7.77393-40.623-33.03125-57.49414-33.28565-57.65967l1.09034-1.67675c.26074.16943,26.18359,17.43261,34.14453,58.87988,4.58935,23.89453,2.43017,51.14062-6.41748,80.981-11.01172,37.13769-32.48438,78.459-63.82129,122.8164a216.90408,216.90408,0,0,0-30.1626,60.92188c-15.1582,48.86718-17.30273,115.99707,58.56445,158.292Z" transform="translate(-66.94711 -37.90015)" fill="#2f2e41"/><path d="M288.07412,642.73135C322.954,623.287,344.66787,596.74014,352.61318,563.829c5.89942-24.43555,4.2041-51.93262-5.03808-81.72754a218.88823,218.88823,0,0,0-30.439-61.48437c-70.63818-99.98633-77.01367-165.1377-69.92334-202.18653,7.77393-40.623,33.03125-57.49414,33.28565-57.65967l-1.09034-1.67675c-.26074.16943-26.18359,17.43261-34.14453,58.87988-4.58935,23.89453-2.43017,51.14062,6.41748,80.981,11.01172,37.13769,32.48438,78.459,63.82129,122.8164a216.90408,216.90408,0,0,1,30.1626,60.92188c15.1582,48.86718,17.30273,115.99707-58.56445,158.292Z" transform="translate(-66.94711 -37.90015)" fill="#2f2e41"/><path d="M1048.30076,558.73135C1013.42088,539.287,991.707,512.74014,983.7617,479.829c-5.89942-24.43555-4.2041-51.93262,5.03808-81.72754a218.88823,218.88823,0,0,1,30.439-61.48437c70.63818-99.98633,77.01367-165.1377,69.92334-202.18653-7.77393-40.623-33.03125-57.49414-33.28565-57.65967l1.09034-1.67675c.26074.16943,26.18359,17.43261,34.14453,58.87988,4.58935,23.89453,2.43017,51.14062-6.41748,80.981-11.01172,37.13769-32.48438,78.459-63.82129,122.8164a216.90408,216.90408,0,0,0-30.1626,60.92188c-15.1582,48.86718-17.30273,115.99707,58.56445,158.292Z" transform="translate(-66.94711 -37.90015)" fill="#2f2e41"/><path d="M1065.07412,558.73135c34.87988-19.44433,56.59375-45.99121,64.53906-78.90234,5.89942-24.43555,4.2041-51.93262-5.03808-81.72754a218.88823,218.88823,0,0,0-30.439-61.48437c-70.63818-99.98633-77.01367-165.1377-69.92334-202.18653,7.77393-40.623,33.03125-57.49414,33.28565-57.65967l-1.09034-1.67675c-.26074.16943-26.18359,17.43261-34.14453,58.87988-4.58935,23.89453-2.43017,51.14062,6.41748,80.981,11.01172,37.13769,32.48438,78.459,63.82129,122.8164a216.90408,216.90408,0,0,1,30.1626,60.92188c15.1582,48.86718,17.30273,115.99707-58.56445,158.292Z" transform="translate(-66.94711 -37.90015)" fill="#2f2e41"/><path d="M534.762,337.84484c-26.20687-44.2815-78.05507-46.34521-78.05507-46.34521s-50.52312-6.46085-82.93338,60.98042c-30.209,62.86081-71.90115,123.55421-6.71211,138.26947l11.775-36.64918,7.29222,39.37767a255.06843,255.06843,0,0,0,27.892.47669c69.81221-2.25395,136.29778.65944,134.157-24.39211C545.332,436.26009,559.97826,380.4525,534.762,337.84484Z" transform="translate(-66.94711 -37.90015)" fill="#2f2e41"/><path d="M427.19425,430.52233c9.03031,19.97526,14.72473,43.78567,18.12479,70.23353l72.49913-4.5312c-16.66786-23.6189-22.20214-50.72822-15.85919-81.56152Z" transform="translate(-66.94711 -37.90015)" fill="#ffb8b8"/><path d="M427.19425,430.52233c9.03031,19.97526,14.72473,43.78567,18.12479,70.23353l72.49913-4.5312c-16.66786-23.6189-22.20214-50.72822-15.85919-81.56152Z" transform="translate(-66.94711 -37.90015)" opacity="0.2"/><path d="M90.81926,810.84366s-37.5228,20.09888-18.48195,37.25877,44.19287-22.71411,44.19287-22.71411Z" transform="translate(-66.94711 -37.90015)" fill="#ffb8b8"/><polygon points="482.591 714.334 482.005 741.792 480.754 801.122 480.754 801.132 480.39 818.314 240.438 818.314 250.19 764.163 250.2 764.123 258.932 715.656 262.829 693.951 262.829 693.941 459.937 666.755 482.591 714.334" fill="#2f2e41"/><path d="M549.53654,752.23722l-.58908,27.459c-69.73517-1.78991-177.82675-18.62329-223.07067-26.14509l3.89676-21.70432,197.107-27.18718Z" transform="translate(-66.94711 -37.90015)" fill="#3f3d56"/><circle cx="395.36391" cy="355.23981" r="56.63995" fill="#ffb8b8"/><path d="M571.05972,782.82279s6.79679,61.17114-33.984,56.63994l-6.7968-61.17114L494.02939,742.042l-101.9519-2.2656L317.31276,810.01s-2.2656-72.49913,6.79679-79.29592,29.45278-22.656,29.45278-22.656v-11.328L292.39118,572.12219s36.24957-74.76473,65.70234-77.03033l38.51516-2.26559s13.59359-6.7968,13.59359-9.0624-2.2656-20.39038,9.06239-15.85918c0,0,1.01941-23.24506,12.95916-16.15372,0,0,37.58646,29.45277,75.73905,1.2914,0,0,17.78489-3.26246,15.51929,5.79993s0,15.85918,4.5312,15.85918,24.92157,6.7968,24.92157,11.328c0,.97419,1.4727,10.3538,3.78337,24.46843v.02268c8.40556,51.45164,27.935,165.81911,27.935,165.81911S605.04368,705.79246,571.05972,782.82279Z" transform="translate(-66.94711 -37.90015)" fill="#e58325"/><path d="M308.25037,560.7942l-15.85919,11.328-144.99826,185.779L70.3626,819.07235s43.04636-6.79679,33.984,29.45277L369.42151,696.73007Z" transform="translate(-66.94711 -37.90015)" fill="#e58325"/><path d="M556.7183,510.4979v.02268c-3.01286,17.717-101.20407,14.02406-114.79766,14.02406s-24.92158-2.2656-38.51516-11.328-6.7968-20.39038-6.7968-20.39038,11.57456-8.81583,11.57456-11.08143-2.2656-20.39038,9.06239-15.85919c0,0,1.01941-23.245,12.95915-16.15372,0,0,39.6055,31.47181,77.75809,3.31044,0,0,17.78489-3.26246,15.51929,5.79993s0,15.85918,4.5312,15.85918,24.92157,6.7968,24.92157,11.328C552.93493,487.00366,554.40763,496.38327,556.7183,510.4979Z" transform="translate(-66.94711 -37.90015)" fill="#3f3d56"/><path d="M545.00534,425.99113s-18.12478-38.51516-36.24956-20.39038,20.39038,45.312,20.39038,45.312Z" transform="translate(-66.94711 -37.90015)" fill="#ffb8b8"/><path d="M545.00534,416.92874s-27.98762,35.36953-36.64979,38.07515c0,0,25.3218,100.12632,57.04017,127.31349l18.12478,92.88951s77.03033-31.71837,58.90555-83.82712q-.27187-.78163-.541-1.55376a513.98548,513.98548,0,0,0-62.09845-122.40839Z" transform="translate(-66.94711 -37.90015)" fill="#e58325"/><polygon points="463.102 483.933 518.839 637.307 498.449 544.417 463.102 483.933" opacity="0.2"/><polygon points="456.229 295.676 405.005 268.845 334.268 279.821 319.632 344.46 356.064 343.059 366.242 319.311 366.242 342.668 383.052 342.021 392.809 304.213 398.907 344.46 458.668 343.241 456.229 295.676" fill="#2f2e41"/><path d="M1007.07589,682.23771,1036.13813,785.909s-5.98872,91.827,21.95862,73.86082c28.59982-18.3856,17.96614-95.81944,17.96614-95.81944L1059.311,670.94362Z" transform="translate(-66.94711 -37.90015)" fill="#a0616a"/><path d="M1022.60526,391.41495l23.99994,23.99994V529.76753s14.11761,21.17641,11.29408,26.82345-5.647,5.64705-2.82352,9.88233,5.64705,7.0588,2.82352,9.88233-2.82352,9.88232,0,12.70584,8.47057,7.05881,4.23529,11.29409-9.88233,1.41176-4.23529,16.94113,15.52937,19.76466,12.70585,25.4117-2.82352,19.76465-2.82352,19.76465l-60.70572,8.47057L994.37,511.41463Z" transform="translate(-66.94711 -37.90015)" fill="#d0cde1"/><polygon points="1003.658 623.161 933.07 625.985 935.893 655.632 998.011 644.338 1003.658 623.161" fill="#3f3d56"/><polygon points="809.541 205.986 801.07 290.691 887.188 303.397 893.541 254.692 899.894 205.986 809.541 205.986" fill="#a0616a"/><polygon points="809.541 205.527 801.07 290.233 887.188 302.939 893.541 254.233 899.894 205.527 809.541 205.527" opacity="0.1"/><path d="M689.42968,646.94368l47.99987,103.05855s8.47057,47.99987,21.17642,49.41163,25.41169-49.41163,25.41169-49.41163l-16.94113-26.82346-19.76465-76.23509Z" transform="translate(-66.94711 -37.90015)" fill="#a0616a"/><path d="M1018.00305,857.214H746.6346c2.15028-34.01065,3.503-54.97836,3.503-54.97836l3.604-5.67348,17.47475-27.45889L783.694,749.49843l4.351-6.84456,1.61527-2.53384,17.09113-3.11943L983.0737,704.82727a215.42643,215.42643,0,0,0,12.32623,38.1093c1.20133,2.73581,2.49348,5.47156,3.87652,8.17706,4.43179,8.65158,9.84279,16.84886,16.27348,22.88581,1.46375,1.37293,2.52379,5.03749,3.21026,10.67061C1020.45617,798.47014,1019.97156,824.13207,1018.00305,857.214Z" transform="translate(-66.94711 -37.90015)" fill="#2f2e41"/><circle cx="856.83489" cy="165.7506" r="67.76452" fill="#a0616a"/><path d="M772.72358,342.00332l-9.88233-5.647s-43.76459,29.647-57.8822,95.99974-23.99993,83.2939-23.99993,83.2939-14.11761,2.82352-4.23529,12.70584,9.88233,8.47057,1.41176,14.11761-14.11761-5.647-8.47056,5.647,12.70585,8.47056,7.0588,15.52937-15.52937,7.0588-9.88232,12.70585-5.647,18.35289,1.41176,23.99993,9.88232,7.05881,9.88232,16.94113a49.9927,49.9927,0,0,0,2.82353,16.94113h73.41156s-14.11761-26.82345-9.88232-32.4705,5.647-11.29408,2.82352-14.11761-11.29409,2.82353-2.82352-4.23528,11.29408-2.82352,8.47056-11.29409-8.47056-4.23528-2.82352-8.47056,9.88233-2.82352,7.05881-7.05881-8.47057-4.23528-2.82353-7.0588,9.88233,0,8.47057-7.05881-2.82352-4.23528,0-7.0588,32.4705-98.82327,32.4705-101.64679S772.72358,342.00332,772.72358,342.00332Z" transform="translate(-66.94711 -37.90015)" fill="#d0cde1"/><polygon points="691.659 590.691 602.718 596.338 625.306 617.514 687.424 618.926 691.659 590.691" fill="#3f3d56"/><path d="M784.01766,734.47286l-18.35289,33.88226s55.05868,7.05881,74.82333,14.11761,70.588,16.94113,70.588,16.94113L923.782,750.00223Z" transform="translate(-66.94711 -37.90015)" fill="#3f3d56"/><polygon points="878.011 712.102 893.541 758.69 955.658 745.984 948.599 702.22 878.011 712.102" fill="#3f3d56"/><path d="M970.37011,294.00345s-4.23529-2.82352-14.11761,2.82352-42.35283,8.47057-57.8822-8.47056-26.82346-31.05874-31.05874-28.23522-7.05881,35.294-7.05881,35.294L846.13514,306.7093l-83.29389,29.647,7.0588,190.58772,12.70585,43.76459s-9.88232,33.88227,2.82352,53.64692-7.0588,26.82346-7.0588,26.82346-4.23528,5.647-1.41176,19.76465-2.82352,66.35276-2.82352,66.35276,119.99968,53.64692,245.6464,7.05881l-14.11761-53.64692-7.05881-119.99968s7.05881-19.76465,5.64705-28.23522,42.35283-127.05848,42.35283-127.05848-7.05881-59.294-43.76459-71.99981-42.35283-25.41169-42.35283-25.41169S977.42891,299.65049,970.37011,294.00345Z" transform="translate(-66.94711 -37.90015)" fill="#d0cde1"/><path d="M855.54758,212.33147s-7.037-10.55549-4.33045-21.92294a66.44367,66.44367,0,0,0,1.89457-19.7577s5.68372-18.40444,11.36745-28.68928,2.97719-14.61529,20.84032-17.86313,10.55549-26.524,57.6492-1.35327a13.81105,13.81105,0,0,0,14.34464,5.41307c9.74353-1.89457,13.262,11.6381,13.262,11.6381s6.49569-3.78914,8.93157,1.62393,19.8043-3.24882,19.8043,33.2894-19.76465,69.17629-19.76465,69.17629,1.44894-61.46168-30.75883-67.68672-66.85142-24.35881-75.24168-1.08261S855.54758,212.33147,855.54758,212.33147Z" transform="translate(-66.94711 -37.90015)" fill="#2f2e41"/><ellipse cx="913.30532" cy="180.57409" rx="6.35292" ry="8.47057" fill="#a0616a"/></svg>
\ No newline at end of file
diff --git a/frontend/static/svgs/manage-profile.svg b/frontend/static/svgs/manage-profile.svg
new file mode 100644
index 00000000..049326e4
--- /dev/null
+++ b/frontend/static/svgs/manage-profile.svg
@@ -0,0 +1 @@
+<svg id="f2473fb9-9653-4ee7-8806-669bab6c6842" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="903.80709" height="509.14517" viewBox="0 0 903.80709 509.14517"><path d="M216.09567,704.318l-.95117-1.75879c12.75342-6.89746,28.62573-15.481,36.916-29.56738,8.17236-13.88623,8.35571-32.74268.47851-49.21094-6.70361-14.01562-19.01782-26.57226-35.61108-36.313-3.273-1.92138-6.70874-3.74218-10.0315-5.50341-8.03149-4.25635-16.33642-8.65821-23.18432-14.90284-9.43164-8.60107-16.56787-23.03466-11.249-35.89111a23.85567,23.85567,0,0,1,20.6775-14.46728l.11279,1.99707a21.86061,21.86061,0,0,0-18.94776,13.248c-4.94262,11.94727,1.83863,25.50489,10.75415,33.63574,6.66065,6.07374,14.85181,10.415,22.7732,14.61329,3.34155,1.771,6.79712,3.60254,10.10766,5.54589,16.93848,9.94336,29.52637,22.79786,36.40259,37.17432,8.1604,17.06055,7.94629,36.63672-.55908,51.08887C245.2114,688.57244,229.0676,697.30339,216.09567,704.318Z" transform="translate(-148.09646 -195.42742)" fill="#f1f1f1"/><ellipse cx="57.71992" cy="323.31703" rx="17.5" ry="8.5" fill="#f1f1f1"/><ellipse cx="71.71992" cy="379.31703" rx="17.5" ry="8.5" fill="#f1f1f1"/><ellipse cx="39.71992" cy="388.31703" rx="17.5" ry="8.5" fill="#f1f1f1"/><ellipse cx="89.71992" cy="435.31703" rx="17.5" ry="8.5" fill="#f1f1f1"/><ellipse cx="124.71992" cy="435.31703" rx="17.5" ry="8.5" fill="#f1f1f1"/><rect id="bc1144e2-c94b-4f66-aa77-0b454dfd4174" data-name="Rectangle 62" x="341.01113" y="15.42942" width="562.79595" height="267.05644" fill="#e6e6e6"/><rect id="ad6bb9d5-2e55-4525-b077-6ac2d5f26b45" data-name="Rectangle 75" x="357.10447" y="38.32998" width="530.61006" height="222.81354" fill="#fff"/><rect id="a1fdfaec-ef9f-458a-9330-7bb8c38fec43" data-name="Rectangle 80" x="340.77116" width="562.79595" height="23.90924" fill="#e58325"/><circle id="ac9f2818-2064-46b1-8104-b7d94390836e" data-name="Ellipse 90" cx="358.5387" cy="11.05913" r="4.43149" fill="#fff"/><circle id="bd067119-2054-4d5f-9303-2e8fa40cc410" data-name="Ellipse 91" cx="375.35917" cy="11.05913" r="4.43149" fill="#fff"/><circle id="ee5e9ca0-6fca-449b-8f84-cf683813bd65" data-name="Ellipse 92" cx="392.18043" cy="11.05913" r="4.43149" fill="#fff"/><path id="acae6c4c-8028-4596-98db-d9926d2ed09f" data-name="Path 142" d="M742.52881,286.63529a2.14688,2.14688,0,0,0,0,4.29376H860.33273a2.14688,2.14688,0,0,0,0-4.29376Z" transform="translate(-148.09646 -195.42742)" fill="#e6e6e6"/><path id="a061bcdc-636b-4d12-a036-d7339f47b36a" data-name="Path 143" d="M742.52881,299.51779a2.14689,2.14689,0,0,0,0,4.29377H802.6701a2.14689,2.14689,0,0,0,0-4.29377Z" transform="translate(-148.09646 -195.42742)" fill="#e6e6e6"/><path id="e4e4593e-e83d-4128-8cd7-f0323b36c2f2" data-name="Path 142" d="M739.56444,361.87112a2.14688,2.14688,0,0,0,0,4.29376H960.44737a2.14688,2.14688,0,0,0,0-4.29376Z" transform="translate(-148.09646 -195.42742)" fill="#e6e6e6"/><path id="bf45783c-1d79-4b4f-82bb-39fc8a52f7aa" data-name="Path 143" d="M739.56444,374.75362a2.14689,2.14689,0,0,0,0,4.29377H902.78473a2.14689,2.14689,0,0,0,0-4.29377Z" transform="translate(-148.09646 -195.42742)" fill="#e6e6e6"/><path id="b544fc92-6fc6-4255-93fb-dee32d880d89" data-name="Path 142" d="M739.56444,387.34466a2.14689,2.14689,0,0,0,0,4.29377H960.44737a2.14689,2.14689,0,0,0,0-4.29377Z" transform="translate(-148.09646 -195.42742)" fill="#e6e6e6"/><path id="e14bb681-aaa1-4454-9da9-28d0809a146c" data-name="Path 143" d="M739.56444,400.22717a2.14689,2.14689,0,0,0,0,4.29377H902.78473a2.14689,2.14689,0,0,0,0-4.29377Z" transform="translate(-148.09646 -195.42742)" fill="#e6e6e6"/><circle cx="475.98887" cy="156.46229" r="18.69428" fill="#a0616a"/><path d="M618.16547,336.93427s8.724,2.33677,13.24179,3.2715,4.05043-1.71365,4.05043-1.71365,5.91986.77892,5.60828.15578,2.49256-3.89463-.77893-7.6335-2.33679-6.543-2.33679-6.543h-2.80414l-.77893-1.09051h-4.362s-4.8226-4.22888-13.39083-2.98259-18.701,4.54044-19.63575,9.68138c-.12678.6973-.29369,1.472-.48751,2.29025-2.34294,9.89144,2.63523,19.14638,7.79851,27.90255,1.26893,2.15193,7.40685,6.8444,7.24985,3.62493s-5.52527-10.44986-1.78641-10.91722S619.87911,343.00991,618.16547,336.93427Z" transform="translate(-148.09646 -195.42742)" fill="#2f2e41"/><path d="M613.48045,412.325a65.38,65.38,0,0,1-10.69912-1.75788l.19683-3.728L604.615,377.197l.0148-.22735h32.93056l5.1679,27.29315.697,3.68251c-1.36375.53046-2.743,1.03058-4.15193,1.47-.01554,0-.01554.01517-.03034.01517-1.955.60612-3.9403,1.13658-5.94116,1.576a68.55812,68.55812,0,0,1-8.06189,1.24267,62.04526,62.04526,0,0,1-6.30374.30311C617.11736,412.55235,615.28373,412.4766,613.48045,412.325Z" transform="translate(-148.09646 -195.42742)" fill="#e58325"/><path d="M592.30938,407.05128c-1.36375-.591-2.68237-1.2275-3.98544-1.8943l-.56089-.28794c-.37886-.197-.77252-.4092-1.15139-.62138q-.77363-.43178-1.50064-.86372c-.46988-.27287-.95455-.56071-1.42443-.84865-.03034-.01517-.04514-.03034-.07547-.03034-1.6368-1.04566-3.24326-2.12166-4.789-3.28848q-.38626-.29553-.77326-.591l-.27231-4.36448.39366-.24253L604.615,377.197l.36333-.22735.03033-.01508,3.72794.01508v13.88151c2.10667,3.04605,3.5311,9.426,4.41017,17.77612.12136,1.19726.22717,2.42476.33373,3.69769a65.38,65.38,0,0,1-10.69912-1.75788c-.37886-.07575-.74293-.16667-1.12179-.27277a62.70234,62.70234,0,0,1-6.51611-2.09132c-.6519-.24252-1.28827-.50012-1.92464-.75772l-.06068-.03034C592.88507,407.29371,592.58242,407.17254,592.30938,407.05128Z" transform="translate(-148.09646 -195.42742)" fill="#2f2e41"/><path d="M586.61166,404.24766q-.77363-.43178-1.50064-.86372c-.46988-.27287-.95455-.56071-1.42443-.84865-.03034-.01517-.04514-.03034-.07547-.03034-1.6368-1.04566-3.24326-2.12166-4.789-3.28848q-.38626-.29553-.77326-.591c-.12062-.10609-.242-.197-.37886-.30311-.96935-.74255-1.90911-1.51544-2.81852-2.33375-.04514-.03033-.07548-.07584-.12135-.10609a10.42192,10.42192,0,0,1,3.04642-1.62153l1.07591.31827,7.66823,2.30341.04514,3.10664Z" transform="translate(-148.09646 -195.42742)" fill="#2f2e41"/><path d="M651.1845,404.29316c-.45508.24243-.90941.485-1.36375.71222-.10656.06067-.19683.10609-.28785.1516-.60677.30311-1.19726.60612-1.80329.89406-.01554.01517-.04587.01517-.04587.03034-.03034.01517-.07548.03033-.10582.0455-1.36375.65163-2.743,1.25776-4.15267,1.81846-1.36375.53046-2.743,1.03058-4.15193,1.47-.01554,0-.01554.01517-.03034.01517-1.955.60612-3.9403,1.13658-5.94116,1.576a12.50562,12.50562,0,0,1,.48542-3.68252l.0148-.21218,1.30381-21.09495-1.74335-9.04724,5.00141-.74256L665.86906,391.033s-3.03089,3.03089-15.47262,9.48669C649.29634,401.09055,650.91145,402.9899,651.1845,404.29316Z" transform="translate(-148.09646 -195.42742)" fill="#2f2e41"/><path d="M624.907,408.61214c-1.97052.18185-3.97064.27286-5.97076.27286-1.94018,0-3.86482-.07584-5.78947-.25769.12136,1.19726.22717,2.42476.33373,3.69769,1.80328.1516,3.63691.22735,5.45574.22735a62.04526,62.04526,0,0,0,6.30374-.30311,68.55812,68.55812,0,0,0,8.06189-1.24267,12.50562,12.50562,0,0,1,.48542-3.68252l.0148-.21218A62.99621,62.99621,0,0,1,624.907,408.61214Zm57.26792-85.04667A66.97189,66.97189,0,1,0,566.441,387.18384c.606.75772,1.2276,1.51545,1.864,2.24283.06068.06058.091.10609.13615.15151a63.82062,63.82062,0,0,0,4.98587,5.13737c.42474.394.86354.78806,1.30308,1.16692.04587.03025.07621.07576.12135.10609.90941.81831,1.84917,1.5912,2.81852,2.33375.13689.1061.25824.197.37886.30311q.38736.29553.77326.591c1.54578,1.16682,3.15224,2.24282,4.789,3.28848.03033,0,.04513.01517.07547.03034.46988.28794.95455.57578,1.42443.84865q.72813.43189,1.50064.86372c.37887.21218.77253.42436,1.15139.62138l.56089.28794c1.30307.6668,2.62169,1.30326,3.98544,1.8943.273.12126.57569.24243.84873.36369l.06068.03034c.63637.2576,1.27274.5152,1.92464.75772a62.70234,62.70234,0,0,0,6.51611,2.09132c.37886.1061.74293.197,1.12179.27277a65.38,65.38,0,0,0,10.69912,1.75788c1.80328.1516,3.63691.22735,5.45574.22735a62.04526,62.04526,0,0,0,6.30374-.30311,68.55812,68.55812,0,0,0,8.06189-1.24267c2.00086-.43945,3.98618-.96991,5.94116-1.576.0148,0,.0148-.01517.03034-.01517,1.40889-.43945,2.78818-.93957,4.15193-1.47,1.40963-.5607,2.78892-1.16683,4.15267-1.81846.03034-.01517.07548-.03033.10582-.0455,0-.01517.03033-.01517.04587-.03034.606-.28794,1.19652-.591,1.80329-.89406.091-.04551.18129-.09093.28785-.1516.45434-.22726.90867-.46979,1.36375-.71222.03034-.01517.04514-.03033.07548-.0455,1.19725-.66671,2.37971-1.36385,3.54664-2.1064.31818-.197.63636-.394.95455-.62138.46987-.28794.92421-.60613,1.36375-.9244.59123-.4092,1.18172-.83348,1.75815-1.273a4.67929,4.67929,0,0,0,.54535-.40911c1.40963-1.06083,2.77338-2.18224,4.07646-3.36433a66.91395,66.91395,0,0,0,18.67-71.98356Zm-19.80658,68.07378a64.7919,64.7919,0,0,1-5.15236,4.36448c-.39366.303-.8036.60613-1.212.87889-.3944.30311-.78806.59105-1.19726.86382-.34853.24252-.697.48495-1.06111.7123-.03034.03025-.07548.04542-.10582.07576-.25824.18184-.53055.34852-.78806.5152-.80359.50012-1.63679,1.00024-2.45519,1.47-.19683.1061-.37886.22727-.57569.33336-.10656.06067-.21237.12126-.33373.18184-.45433.2577-.90941.485-1.36375.72748-.06067.04541-.13615.06058-.19683.10609a.11229.11229,0,0,0-.06067.03025c-.31819.16677-.63637.31827-.95455.46978-.27305.13643-.53056.27277-.8036.394-1.10625.53046-2.24283,1.03049-3.37941,1.50028-1.19726.48495-2.40932.92449-3.63692,1.33359-.30338.1061-.62157.22736-.93975.31828-1.44.45461-2.8792.86381-4.3495,1.19717a62.99621,62.99621,0,0,1-8.89509,1.50027c-1.97052.18185-3.97064.27286-5.97076.27286-1.94018,0-3.86482-.07584-5.78947-.25769a62.3735,62.3735,0,0,1-10.16856-1.78821c-.12136-.03034-.25751-.06059-.37886-.09093a58.11093,58.11093,0,0,1-8.01676-2.72777c-.13615-.06059-.28784-.1061-.4092-.16668-.15169-.06068-.28784-.10609-.4092-.16677-.15169-.06058-.28784-.12117-.424-.18185-1.13658-.5-2.24282-1.04566-3.34907-1.60636l-.51575-.27277c-.98489-.5152-1.955-1.04566-2.90953-1.63671-.333-.18184-.68151-.39393-1.01523-.60612-.37886-.22735-.75772-.46978-1.12178-.7123q-.13542-.09088-.27231-.18185c-.84874-.57588-1.71227-1.15175-2.53067-1.773-.57569-.42437-1.13659-.83348-1.69748-1.273-.36406-.27276-.72738-.5607-1.0759-.86372-.22717-.16677-.45434-.36378-.68225-.5608-.30264-.2576-.606-.5152-.90867-.788-.46988-.37886-.90942-.80323-1.33416-1.19726a60.22928,60.22928,0,0,1-4.83417-5.00095c-.515-.57587-1.00043-1.15175-1.46957-1.75787a3.64682,3.64682,0,0,1-.30338-.37886,63.2983,63.2983,0,1,1,93.04807,6.74374Z" transform="translate(-148.09646 -195.42742)" fill="#3f3d56"/><polygon points="163.436 496.698 175.696 496.697 181.528 449.409 163.434 449.41 163.436 496.698" fill="#a0616a"/><path d="M308.40551,688.12252l24.144-.001h.001A15.38731,15.38731,0,0,1,347.937,703.50777v.5l-39.53076.00147Z" transform="translate(-148.09646 -195.42742)" fill="#2f2e41"/><polygon points="209.436 496.698 221.696 496.697 227.528 449.409 209.434 449.41 209.436 496.698" fill="#a0616a"/><path d="M354.40551,688.12252l24.144-.001h.001A15.38731,15.38731,0,0,1,393.937,703.50777v.5l-39.53076.00147Z" transform="translate(-148.09646 -195.42742)" fill="#2f2e41"/><path d="M274.333,505.26744a10.05579,10.05579,0,0,0-1.88328-15.30389l8.51818-34.70475-17.49238,6.233-5.40724,32.00063a10.11028,10.11028,0,0,0,16.26472,11.775Z" transform="translate(-148.09646 -195.42742)" fill="#9e616a"/><path d="M404.47409,502.26744a10.05576,10.05576,0,0,1,1.88329-15.30389L397.8392,452.2588l17.49238,6.233,5.40723,32.00063a10.11027,10.11027,0,0,1-16.26472,11.775Z" transform="translate(-148.09646 -195.42742)" fill="#9e616a"/><polygon points="142.367 285.513 159.36 484.578 184.224 482.311 194.175 328.461 203.033 389.379 204.807 486.145 227.307 484.645 239.801 380.545 236.736 279.728 151.319 271.078 142.367 285.513" fill="#2f2e41"/><circle cx="189.11211" cy="78.58245" r="25.78574" fill="#a0616a"/><path d="M329.04308,253.38125s12.03336,3.22321,18.26491,4.51252,5.58691-2.36371,5.58691-2.36371,8.1655,1.0744,7.73572.21487,3.43809-5.372-1.0744-10.52917-3.22322-9.025-3.22322-9.025h-3.86786l-1.07442-1.50418H345.374s-6.652-5.833-18.4705-4.114-25.79505,6.26281-27.08434,13.3539c-.17487.96182-.4051,2.03038-.67243,3.159-3.23171,13.64365,3.63487,26.40934,10.75677,38.48707,1.75029,2.96823,10.21656,9.44074,10,5s-7.62122-14.41389-2.46407-15.05854S331.40677,261.76163,329.04308,253.38125Z" transform="translate(-148.09646 -195.42742)" fill="#2f2e41"/><path d="M310.376,308.60391h45.41173l32.10968,169.575s-27.99385,2.3937-43.99385,8.3937-42.59842-13.70585-42.59842-13.70585Z" transform="translate(-148.09646 -195.42742)" fill="#e58325"/><path d="M316.04528,327.75369V308.60391l-5.14174-.03133-37.56693,23.885,8.15165,130.86273s9.64794,43.65782,24.28161,43.20506S331.687,350.43479,316.04528,327.75369Z" transform="translate(-148.09646 -195.42742)" fill="#2f2e41"/><path d="M285.40354,336.07258l-12.06693-3.615s-8.93307,2.615-8.93307,11.615-7.69685,136.86794-7.69685,136.86794l24.45076,2.16092,5.24609-65.02886Z" transform="translate(-148.09646 -195.42742)" fill="#2f2e41"/><path d="M352.40354,321.07258l-2.40535-12.46867,6.90535-1.03133,25,10s22.5,164.5,12.5,169.5-16.752,1.12615-16.752,1.12615S344.76032,366.8726,350.58193,350.47259Z" transform="translate(-148.09646 -195.42742)" fill="#2f2e41"/><path d="M364.40354,320.07258l4.26656-1.85711s12.52311-6.20565,19.62828,6.32573,32.10516,152.53138,32.10516,152.53138l-20.57029,3.86794-15.37853-50.38368Z" transform="translate(-148.09646 -195.42742)" fill="#2f2e41"/><path d="M530.09646,704.57258h-381a1,1,0,1,1,0-2h381a1,1,0,0,1,0,2Z" transform="translate(-148.09646 -195.42742)" fill="#cacaca"/></svg>
\ No newline at end of file
diff --git a/frontend/static/svgs/manage-webhooks.svg b/frontend/static/svgs/manage-webhooks.svg
new file mode 100644
index 00000000..54b2780c
--- /dev/null
+++ b/frontend/static/svgs/manage-webhooks.svg
@@ -0,0 +1 @@
+<svg id="ad6b5295-7ebf-4dc3-a7a8-a4a4b8d35fca" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="790" height="512.20805" viewBox="0 0 790 512.20805"><path d="M925.56335,704.58909,903,636.49819s24.81818,24.81818,24.81818,45.18181l-4.45454-47.09091s12.72727,17.18182,11.45454,43.27273S925.56335,704.58909,925.56335,704.58909Z" transform="translate(-205 -193.89598)" fill="#e6e6e6"/><path d="M441.02093,642.58909,419,576.13509s24.22155,24.22155,24.22155,44.09565l-4.34745-45.95885s12.42131,16.76877,11.17917,42.23245S441.02093,642.58909,441.02093,642.58909Z" transform="translate(-205 -193.89598)" fill="#e6e6e6"/><path d="M784.72555,673.25478c.03773,43.71478-86.66489,30.26818-192.8092,30.35979s-191.53562,13.68671-191.57335-30.028,86.63317-53.29714,192.77748-53.38876S784.68782,629.54,784.72555,673.25478Z" transform="translate(-205 -193.89598)" fill="#e6e6e6"/><rect y="509.69312" width="790" height="2" fill="#3f3d56"/><polygon points="505.336 420.322 491.459 420.322 484.855 366.797 505.336 366.797 505.336 420.322" fill="#a0616a"/><path d="M480.00587,416.35743H508.3101a0,0,0,0,1,0,0V433.208a0,0,0,0,1,0,0H464.69674a0,0,0,0,1,0,0v-1.54149A15.30912,15.30912,0,0,1,480.00587,416.35743Z" fill="#2f2e41"/><polygon points="607.336 499.322 593.459 499.322 586.855 445.797 607.336 445.797 607.336 499.322" fill="#a0616a"/><path d="M582.00587,495.35743H610.3101a0,0,0,0,1,0,0V512.208a0,0,0,0,1,0,0H566.69674a0,0,0,0,1,0,0v-1.54149A15.30912,15.30912,0,0,1,582.00587,495.35743Z" fill="#2f2e41"/><path d="M876.34486,534.205A10.31591,10.31591,0,0,0,873.449,518.654l-32.23009-131.2928L820.6113,396.2276l38.33533,126.949a10.37185,10.37185,0,0,0,17.39823,11.0284Z" transform="translate(-205 -193.89598)" fill="#a0616a"/><path d="M851.20767,268.85955a11.38227,11.38227,0,0,0-17.41522,1.15247l-49.88538,5.72709,7.58861,19.24141,45.36779-8.49083a11.44393,11.44393,0,0,0,14.3442-17.63014Z" transform="translate(-205 -193.89598)" fill="#a0616a"/><path d="M769,520.58909l21.76811,163.37417,27.09338-5.578s-3.98437-118.98157,9.56238-133.32513S810,505.58909,810,505.58909Z" transform="translate(-205 -193.89598)" fill="#2f2e41"/><path d="M778,475.58909l-10,15s-77-31.99929-77,19-4.40631,85.60944-6,88,18.43762,8.59375,28,7c0,0,11.79687-82.21884,11-87,0,0,75.53355,37.03335,89.87712,33.84591S831.60944,536.964,834,530.58909s-1-57-1-57l-47.81-14.59036Z" transform="translate(-205 -193.89598)" fill="#2f2e41"/><path d="M779.34915,385.52862l-2.85032-3.42039s-31.92361-71.82815-19.3822-91.21035,67.26762-22.23252,68.97783-21.0924-4.08488,15.9428-.09446,22.78361c0,0-42.394,9.19121-45.24435,10.33134s21.96615,43.2737,21.96615,43.2737l-2.85031,25.6529Z" transform="translate(-205 -193.89598)" fill="#ccc"/><path d="M835.21549,350.18459S805.57217,353.605,804.432,353.605s-1.71017-7.41084-1.71017-7.41084l-26.223,35.91406S763.57961,486.29929,767,484.58909s66.50531,8.11165,67.07539,3.55114-.57008-27.3631,1.14014-28.50324,29.64328-71.82811,29.64328-71.82811-2.85032-14.82168-12.54142-19.95227S835.21549,350.18459,835.21549,350.18459Z" transform="translate(-205 -193.89598)" fill="#ccc"/><path d="M855.73783,378.11779l9.121,9.69109S878.41081,499.1687,871,502.58909s-22,3-22,3l-14.35458-52.79286Z" transform="translate(-205 -193.89598)" fill="#ccc"/><circle cx="601.72966" cy="122.9976" r="26.2388" fill="#a0616a"/><path d="M800.57267,320.98789c-.35442-5.44445-7.22306-5.631-12.67878-5.68255s-11.97836.14321-15.0654-4.35543c-2.0401-2.973-1.65042-7.10032.035-10.28779s4.45772-5.639,7.18508-7.99742c7.04139-6.08884,14.29842-12.12936,22.7522-16.02662s18.36045-5.472,27.12788-2.3435c10.77008,3.84307,25.32927,23.62588,26.5865,34.99176s-3.28507,22.95252-10.9419,31.44586-25.18188,5.0665-36.21069,8.088c6.7049-9.48964,2.28541-26.73258-8.45572-31.164Z" transform="translate(-205 -193.89598)" fill="#2f2e41"/><circle cx="361.7217" cy="403.5046" r="62.98931" fill="#e58325"/><path d="M524.65625,529.9355a45.15919,45.15919,0,0,1-41.25537-26.78614L383.44873,278.05757a59.83039,59.83039,0,1,1,111.87012-41.86426l72.37744,235.41211a45.07978,45.07978,0,0,1-43.04,58.33008Z" transform="translate(-205 -193.89598)" fill="#e58325"/></svg>
\ No newline at end of file
diff --git a/frontend/types/api-types/recipe.ts b/frontend/types/api-types/recipe.ts
index 4fc7bfdd..5417eb83 100644
--- a/frontend/types/api-types/recipe.ts
+++ b/frontend/types/api-types/recipe.ts
@@ -60,8 +60,8 @@ export interface Recipe {
   recipeCategory: string[];
   tags: string[];
   rating: number;
-  dateAdded?: string;
-  dateUpdated?: string;
+  dateAdded: string;
+  dateUpdated: string;
   recipeYield?: string;
   recipeIngredient: RecipeIngredient[];
   recipeInstructions: RecipeStep[];
diff --git a/frontend/utils/globals.js b/frontend/utils/globals.js
deleted file mode 100644
index 2152a9e7..00000000
--- a/frontend/utils/globals.js
+++ /dev/null
@@ -1,205 +0,0 @@
-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 const globals = {
-  icons,
-};
diff --git a/frontend/utils/index.js b/frontend/utils/index.js
deleted file mode 100644
index 756617d1..00000000
--- a/frontend/utils/index.js
+++ /dev/null
@@ -1,52 +0,0 @@
-import { recipe } from "@/utils/recipe";
-import { store } from "@/store";
-
-// TODO: Migrate to Mixins
-
-export const utils = {
-  recipe,
-  generateUniqueKey(item, index) {
-    return `${item}-${index}`;
-  },
-  getDateAsPythonDate(dateObject) {
-    if (!dateObject) return null;
-    const month = dateObject.getMonth() + 1;
-    const day = dateObject.getDate();
-    const year = dateObject.getFullYear();
-    return `${year}-${month}-${day}`;
-  },
-  notify: {
-    info(text, title = null) {
-      store.commit("setSnackbar", {
-        open: true,
-        title,
-        text,
-        color: "info",
-      });
-    },
-    success(text, title = null) {
-      store.commit("setSnackbar", {
-        open: true,
-        title,
-        text,
-        color: "success",
-      });
-    },
-    error(text, title = null) {
-      store.commit("setSnackbar", {
-        open: true,
-        title,
-        text,
-        color: "error",
-      });
-    },
-    warning(text, title = null) {
-      store.commit("setSnackbar", {
-        open: true,
-        title,
-        text,
-        color: "warning",
-      });
-    },
-  },
-};
diff --git a/frontend/utils/recipe.js b/frontend/utils/recipe.js
deleted file mode 100644
index a406c674..00000000
--- a/frontend/utils/recipe.js
+++ /dev/null
@@ -1,49 +0,0 @@
-export const recipe = {
-  /**
-   * Sorts a list of recipes in place
-   * @param {Array<Object>} list of recipes
-   * @param {Boolean} inverse - Z or A First
-   */
-  sortAToZ(list) {
-    list.sort((a, b) => {
-      const textA = a.name.toUpperCase();
-      const textB = b.name.toUpperCase();
-      return textA < textB ? -1 : textA > textB ? 1 : 0;
-    });
-  },
-  sortByCreated(list) {
-    list.sort((a, b) => (a.dateAdded > b.dateAdded ? -1 : 1));
-  },
-  sortByUpdated(list) {
-    list.sort((a, b) => (a.dateUpdated > b.dateUpdated ? -1 : 1));
-  },
-  sortByRating(list) {
-    list.sort((a, b) => (a.rating > b.rating ? -1 : 1));
-  },
-  /**
-   *
-   * @param {Array<Object>} list
-   * @returns String / Recipe Slug
-   */
-  randomRecipe(list) {
-    return list[Math.floor(Math.random() * list.length)];
-  },
-  shuffle(list) {
-    let last = list.length;
-    let n;
-    while (last > 0) {
-      n = rand(last);
-      swap(list, n, --last);
-    }
-  },
-};
-
-const rand = n =>
-  Math.floor(Math.random() * n)
-
-function swap(t, i, j) {
-  const q = t[i];
-  t[i] = t[j];
-  t[j] = q;
-  return t;
-}
diff --git a/mealie/schema/user/user.py b/mealie/schema/user/user.py
index 8070f633..39a672ba 100644
--- a/mealie/schema/user/user.py
+++ b/mealie/schema/user/user.py
@@ -1,3 +1,4 @@
+from datetime import datetime
 from typing import Any, Optional
 
 from fastapi_camelcase import CamelModel
@@ -19,6 +20,7 @@ class LoingLiveTokenIn(CamelModel):
 
 class LongLiveTokenOut(LoingLiveTokenIn):
     id: int
+    created_at: datetime
 
     class Config:
         orm_mode = True