From 80968b02bb1068eaba74e035691dcf7245563342 Mon Sep 17 00:00:00 2001
From: Michael Genson <71845777+michael-genson@users.noreply.github.com>
Date: Sun, 5 Nov 2023 19:07:02 -0600
Subject: [PATCH] feat: Remove Explore URLs and make the normal URLs public
 (#2632)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* add groupSlug to most routes

* fixed more routing issues

* fixed jank and incorrect routes

* remove public explore links

* remove unused groupSlug and explore routes

* nuked explore pages

* fixed public toolstore bug

* fixed various routes missing group slug

* restored public app header menu

* fix janky login redirect

* 404 recipe API call returns to login

* removed unused explore layout

* force redirect when using the wrong group slug

* fixed dead admin links

* removed unused middleware from earlier attempt

* 🧹

* improve cookbooks sidebar
fixed sidebar link not working
fixed sidebar link target
hide cookbooks header when there are none

* added group slug to user

* fix $auth typehints

* vastly simplified groupSlug logic

* allow logged-in users to view other groups

* fixed some edgecases that bypassed isOwnGroup

* fixed static home ref

* 🧹

* fixed redirect logic

* lint warning

* removed group slug from group and user pages
refactored all components to use route groupSlug or user group slug
moved some group pages to recipe pages

* fixed some bad types

* 🧹

* moved groupSlug routes under /g/groupSlug

* move /recipe/ to /r/

* fix backend url generation and metadata injection

* moved shopping lists to root/other route fixes

* changed shared from /recipes/ to /r/

* fixed 404 redirect not awaiting

* removed unused import

* fix doc links

* fix public recipe setting not affecting public API

* fixed backend tests

* fix nuxt-generate command

---------

Co-authored-by: Hayden <64056131+hay-kot@users.noreply.github.com>
---
 .../ISSUE_TEMPLATE/recipe-scraper-bug.yaml    |  2 +-
 .../import-recipe-bookmarklet.md              |  2 +-
 .../documentation/getting-started/features.md | 10 +--
 .../Domain/Cookbook/CookbookPage.vue          | 19 +++---
 .../Domain/Recipe/RecipeActionMenu.vue        |  1 -
 .../components/Domain/Recipe/RecipeCard.vue   | 22 +++----
 .../Domain/Recipe/RecipeCardMobile.vue        | 24 +++----
 .../Domain/Recipe/RecipeCardSection.vue       | 19 +++---
 .../components/Domain/Recipe/RecipeChips.vue  | 18 ++++--
 .../Domain/Recipe/RecipeContextMenu.vue       | 53 +++-------------
 .../Domain/Recipe/RecipeDataTable.vue         |  2 +-
 .../Domain/Recipe/RecipeDialogSearch.vue      | 13 +++-
 .../Domain/Recipe/RecipeDialogShare.vue       |  9 ++-
 .../Domain/Recipe/RecipeExplorerPage.vue      | 29 ++++-----
 .../components/Domain/Recipe/RecipeList.vue   |  8 ++-
 .../RecipeOcrEditorPage.vue                   | 10 ++-
 .../Domain/Recipe/RecipeOrganizerPage.vue     |  9 ++-
 .../Domain/Recipe/RecipePage/RecipePage.vue   | 15 +++--
 .../RecipePageParts/RecipePageHeader.vue      | 19 +++---
 .../RecipePageIngredientEditor.vue            | 10 ++-
 .../RecipePageIngredientToolsView.vue         |  7 ++-
 .../RecipePageTitleContent.vue                |  5 +-
 .../components/Domain/Recipe/RecipeRating.vue | 12 ++--
 .../Domain/Recipe/RecipeTimelineItem.vue      | 10 ++-
 frontend/components/Layout/DefaultLayout.vue  | 63 +++++++++++--------
 .../Layout/LayoutParts/AppHeader.vue          | 13 ++--
 .../Layout/LayoutParts/AppSidebar.vue         | 36 +++++++----
 frontend/components/global/ReportTable.vue    |  4 +-
 .../composables/recipe-page/shared-state.ts   |  4 +-
 .../composables/recipes/use-recipe-search.ts  |  3 +-
 frontend/composables/recipes/use-recipes.ts   | 11 +++-
 frontend/composables/use-logged-in-state.ts   | 17 +++++
 frontend/layouts/default.vue                  |  1 -
 frontend/layouts/error.vue                    | 48 +++++++++++++-
 frontend/layouts/explore.vue                  | 13 ----
 frontend/lib/api/public/explore/recipes.ts    |  8 ++-
 frontend/lib/api/types/user.ts                |  2 +
 frontend/nuxt.config.js                       |  2 +-
 frontend/package.json                         |  2 +-
 frontend/pages/admin/backups.vue              |  7 ++-
 frontend/pages/admin/manage/users/index.vue   |  2 +-
 .../explore/cookbooks/_groupSlug/_slug.vue    | 23 -------
 .../recipes/_groupSlug/_recipeSlug.vue        | 47 --------------
 .../explore/recipes/_groupSlug/index.vue      | 42 -------------
 .../{ => g/_groupSlug}/cookbooks/_slug.vue    |  0
 .../_groupSlug/cookbooks/index.vue}           | 10 ++-
 frontend/pages/g/_groupSlug/index.vue         | 14 +++++
 frontend/pages/g/_groupSlug/r/_slug/index.vue | 59 +++++++++++++++++
 .../_groupSlug/r}/_slug/ingredient-parser.vue |  7 ++-
 .../_groupSlug/r}/_slug/ocr-editor.vue        |  0
 .../{recipe => g/_groupSlug/r}/create.vue     |  8 ++-
 .../_groupSlug/r}/create/bulk.vue             |  0
 .../_groupSlug/r}/create/debug.vue            |  0
 .../_groupSlug/r}/create/index.vue            |  2 +-
 .../{recipe => g/_groupSlug/r}/create/new.vue |  8 ++-
 .../{recipe => g/_groupSlug/r}/create/ocr.vue |  8 ++-
 .../{recipe => g/_groupSlug/r}/create/url.vue |  6 +-
 .../{recipe => g/_groupSlug/r}/create/zip.vue |  8 ++-
 .../_groupSlug}/recipes/categories/index.vue  |  0
 .../{ => g/_groupSlug}/recipes/tags/index.vue |  0
 .../_groupSlug/recipes}/timeline.vue          |  0
 .../_groupSlug}/recipes/tools/index.vue       |  0
 .../recipes => g/_groupSlug/shared/r}/_id.vue |  7 ++-
 frontend/pages/group/data.vue                 |  8 +--
 frontend/pages/group/mealplan/planner.vue     |  6 +-
 frontend/pages/group/members.vue              |  2 +-
 frontend/pages/index.vue                      | 32 ++++------
 frontend/pages/login.vue                      |  7 ++-
 frontend/pages/recipe/_slug/index.vue         | 33 ----------
 frontend/pages/shopping-lists/_id.vue         |  7 ++-
 frontend/pages/shopping-lists/index.vue       |  8 ++-
 frontend/pages/user/_id/favorites.vue         |  5 +-
 frontend/pages/user/_id/profile.vue           |  6 +-
 frontend/pages/user/profile/edit.vue          |  4 +-
 frontend/pages/user/profile/index.vue         | 57 ++++++-----------
 frontend/plugins/globals.ts                   |  8 ++-
 mealie/core/dependencies/dependencies.py      |  2 +-
 mealie/db/models/users/users.py               |  5 ++
 mealie/routes/recipe/recipe_crud_routes.py    | 10 +--
 mealie/routes/recipe/timeline_events.py       |  8 +--
 mealie/routes/spa/__init__.py                 | 20 +++---
 mealie/schema/user/user.py                    |  1 +
 mealie/services/urls/url_constructors.py      |  4 +-
 .../test_public_cookbooks.py                  |  3 +
 .../test_public_foods.py                      |  2 +
 .../test_public_organizers.py                 |  2 +
 .../test_public_recipes.py                    |  3 +
 87 files changed, 555 insertions(+), 501 deletions(-)
 create mode 100644 frontend/composables/use-logged-in-state.ts
 delete mode 100644 frontend/layouts/explore.vue
 delete mode 100644 frontend/pages/explore/cookbooks/_groupSlug/_slug.vue
 delete mode 100644 frontend/pages/explore/recipes/_groupSlug/_recipeSlug.vue
 delete mode 100644 frontend/pages/explore/recipes/_groupSlug/index.vue
 rename frontend/pages/{ => g/_groupSlug}/cookbooks/_slug.vue (100%)
 rename frontend/pages/{group/cookbooks.vue => g/_groupSlug/cookbooks/index.vue} (93%)
 create mode 100644 frontend/pages/g/_groupSlug/index.vue
 create mode 100644 frontend/pages/g/_groupSlug/r/_slug/index.vue
 rename frontend/pages/{recipe => g/_groupSlug/r}/_slug/ingredient-parser.vue (97%)
 rename frontend/pages/{recipe => g/_groupSlug/r}/_slug/ocr-editor.vue (100%)
 rename frontend/pages/{recipe => g/_groupSlug/r}/create.vue (86%)
 rename frontend/pages/{recipe => g/_groupSlug/r}/create/bulk.vue (100%)
 rename frontend/pages/{recipe => g/_groupSlug/r}/create/debug.vue (100%)
 rename frontend/pages/{recipe => g/_groupSlug/r}/create/index.vue (88%)
 rename frontend/pages/{recipe => g/_groupSlug/r}/create/new.vue (86%)
 rename frontend/pages/{recipe => g/_groupSlug/r}/create/ocr.vue (86%)
 rename frontend/pages/{recipe => g/_groupSlug/r}/create/url.vue (95%)
 rename frontend/pages/{recipe => g/_groupSlug/r}/create/zip.vue (84%)
 rename frontend/pages/{ => g/_groupSlug}/recipes/categories/index.vue (100%)
 rename frontend/pages/{ => g/_groupSlug}/recipes/tags/index.vue (100%)
 rename frontend/pages/{group => g/_groupSlug/recipes}/timeline.vue (100%)
 rename frontend/pages/{ => g/_groupSlug}/recipes/tools/index.vue (100%)
 rename frontend/pages/{shared/recipes => g/_groupSlug/shared/r}/_id.vue (75%)
 delete mode 100644 frontend/pages/recipe/_slug/index.vue

diff --git a/.github/ISSUE_TEMPLATE/recipe-scraper-bug.yaml b/.github/ISSUE_TEMPLATE/recipe-scraper-bug.yaml
index 61b877e7b..2a38b6a4f 100644
--- a/.github/ISSUE_TEMPLATE/recipe-scraper-bug.yaml
+++ b/.github/ISSUE_TEMPLATE/recipe-scraper-bug.yaml
@@ -17,7 +17,7 @@ body:
         - label: |
             I have verified that this issue _is not_ related to the underlying library
             [hhyrsev/recipe-scrapers](https://github.com/hhursev/recipe-scrapers) by **1)** checking
-            the [debugger](https://demo.mealie.io/recipe/create/debug) and data is returned, **2)**
+            the [debugger](https://demo.mealie.io/g/home/r/create/debug) and data is returned, **2)**
             verifying that there _are_ errors in the log related to application level code, or
             **3)** verified that the site provides recipe data, or is otherwise supported by
             [hhyrsev/recipe-scrapers](https://github.com/hhursev/recipe-scrapers)
diff --git a/docs/docs/documentation/community-guide/import-recipe-bookmarklet.md b/docs/docs/documentation/community-guide/import-recipe-bookmarklet.md
index f0de673df..64326dc1a 100644
--- a/docs/docs/documentation/community-guide/import-recipe-bookmarklet.md
+++ b/docs/docs/documentation/community-guide/import-recipe-bookmarklet.md
@@ -15,6 +15,6 @@ var url = document.URL;
 var mealie = "http://localhost:8080";
 var use_keywords= "&use_keywords=1" // Optional - use keywords from recipe - update to "" if you don't want that
 var edity = "&edit=1" // Optional - keep in edit mode - update to "" if you don't want that
-var dest = mealie + "/recipe/create/url?recipe_import_url=" + url + use_keywords + edity;
+var dest = mealie + "/r/create/url?recipe_import_url=" + url + use_keywords + edity;
 window.open(dest, "_blank");
 ```
diff --git a/docs/docs/documentation/getting-started/features.md b/docs/docs/documentation/getting-started/features.md
index 4c195cc74..fb65b1f1f 100644
--- a/docs/docs/documentation/getting-started/features.md
+++ b/docs/docs/documentation/getting-started/features.md
@@ -8,7 +8,7 @@
 
 Mealie offers two main ways to create recipes. You can use the integrated recipe-scraper to create recipes from hundreds of websites, or you can create recipes manually using the recipe editor.
 
-[Creation Demo](https://demo.mealie.io/recipe/create/url){ .md-button .md-button--primary .align-right }
+[Creation Demo](https://demo.mealie.io/g/home/r/create/url){ .md-button .md-button--primary .align-right }
 
 ### Importing Recipes
 
@@ -34,13 +34,13 @@ Mealie has a robust and flexible recipe organization system with a few different
 
 Categories are the overarching organizer for recipes. You can assign as many categories as you'd like to a recipe, but we recommend that you try to limit the categories you assign to a recipe to one or two. This helps keep categories as focused as possible while still allowing you to find recipes that are related to each other. For example, you might assign a recipe to the category **Breakfast**, **Lunch**, **Dinner**, or **Side**.
 
-[Categories Demo](https://demo.mealie.io/recipes/categories){ .md-button .md-button--primary }
+[Categories Demo](https://demo.mealie.io/g/home/recipes/categories){ .md-button .md-button--primary }
 
 #### Tags
 
 Tags, are nearly identical to categories in function but play a secondary role in some cases. As such, we recommend that you use tags freely to help you organize your recipes by more specific topics. For example, if a recipe can be frozen or is a great left-over meal, you could assign the tags **frozen** and **left-over** and easily filter for those at a later time.
 
-[Tags Demo](https://demo.mealie.io/recipes/tags){ .md-button .md-button--primary }
+[Tags Demo](https://demo.mealie.io/g/home/recipes/tags){ .md-button .md-button--primary }
 
 #### Tools
 
@@ -48,7 +48,7 @@ Tools, are another way that some users like to organize their recipes. If a reci
 
 Each of the above organizers can be filtered in searches, and have their own pages where you can view all the recipes that are associated with those organizers.
 
-[Tools Demo](https://demo.mealie.io/recipes/tools){ .md-button .md-button--primary }
+[Tools Demo](https://demo.mealie.io/g/home/recipes/tools){ .md-button .md-button--primary }
 
 #### Cookbooks
 
@@ -60,7 +60,7 @@ Mealie also has the concept of cookbooks. These can be created inside of a group
 - Pasta Sides: Recipes that have both the **Side** category and the **Pasta** tag
 - Dessert Breads: Recipes that have both the **Bread** category and the **Dessert** tag
 
-[Cookbooks Demo](https://demo.mealie.io/group/cookbooks){ .md-button .md-button--primary }
+[Cookbooks Demo](https://demo.mealie.io/g/home/cookbooks){ .md-button .md-button--primary }
 
 ## Meal Planning
 
diff --git a/frontend/components/Domain/Cookbook/CookbookPage.vue b/frontend/components/Domain/Cookbook/CookbookPage.vue
index 2afb33e77..3460d8253 100644
--- a/frontend/components/Domain/Cookbook/CookbookPage.vue
+++ b/frontend/components/Domain/Cookbook/CookbookPage.vue
@@ -15,7 +15,6 @@
           class="mb-5 mx-1"
           :recipes="recipes"
           :query="{ cookbook: slug }"
-          :group-slug="groupSlug"
           @sortRecipes="assignSorted"
           @replaceRecipes="replaceRecipes"
           @appendRecipes="appendRecipes"
@@ -30,24 +29,20 @@
   import { useLazyRecipes } from "~/composables/recipes";
   import RecipeCardSection from "@/components/Domain/Recipe/RecipeCardSection.vue";
   import { useCookbook } from "~/composables/use-group-cookbooks";
+  import { useLoggedInState } from "~/composables/use-logged-in-state";
 
   export default defineComponent({
     components: { RecipeCardSection },
-    props: {
-      groupSlug: {
-        type: String,
-        default: undefined,
-      }
-    },
-    setup(props) {
+    setup() {
       const { $auth } = useContext();
-      const loggedIn = computed(() => $auth.loggedIn);
-
-      const { recipes, appendRecipes, assignSorted, removeRecipe, replaceRecipes } = useLazyRecipes(loggedIn.value ? null : props.groupSlug);
+      const { isOwnGroup } = useLoggedInState();
 
       const route = useRoute();
+      const groupSlug = computed(() => route.value.params.groupSlug || $auth.user?.groupSlug || "");
+
+      const { recipes, appendRecipes, assignSorted, removeRecipe, replaceRecipes } = useLazyRecipes(isOwnGroup.value ? null : groupSlug.value);
       const slug = route.value.params.slug;
-      const { getOne } = useCookbook(loggedIn.value ? null : props.groupSlug);
+      const { getOne } = useCookbook(isOwnGroup.value ? null : groupSlug.value);
 
       const tab = ref(null);
       const book = getOne(slug);
diff --git a/frontend/components/Domain/Recipe/RecipeActionMenu.vue b/frontend/components/Domain/Recipe/RecipeActionMenu.vue
index 4d576ec46..c5b6a72e7 100644
--- a/frontend/components/Domain/Recipe/RecipeActionMenu.vue
+++ b/frontend/components/Domain/Recipe/RecipeActionMenu.vue
@@ -70,7 +70,6 @@
           print: true,
           printPreferences: true,
           share: loggedIn,
-          publicUrl: recipe.settings && loggedIn ? recipe.settings.public : false,
         }"
         @print="$emit('print')"
       />
diff --git a/frontend/components/Domain/Recipe/RecipeCard.vue b/frontend/components/Domain/Recipe/RecipeCard.vue
index e13bd40d4..4499cdb98 100644
--- a/frontend/components/Domain/Recipe/RecipeCard.vue
+++ b/frontend/components/Domain/Recipe/RecipeCard.vue
@@ -34,7 +34,7 @@
 
         <slot name="actions">
           <v-card-actions class="px-1">
-            <RecipeFavoriteBadge v-if="loggedIn" class="absolute" :slug="slug" show-always />
+            <RecipeFavoriteBadge v-if="isOwnGroup" class="absolute" :slug="slug" show-always />
 
             <RecipeRating class="pb-1" :value="rating" :name="name" :slug="slug" :small="true" />
             <v-spacer></v-spacer>
@@ -42,7 +42,7 @@
 
             <!-- If we're not logged-in, no items display, so we hide this menu -->
             <RecipeContextMenu
-              v-if="loggedIn"
+              v-if="isOwnGroup"
               color="grey darken-2"
               :slug="slug"
               :name="name"
@@ -56,7 +56,6 @@
                 print: false,
                 printPreferences: false,
                 share: true,
-                publicUrl: false,
               }"
               @delete="$emit('delete', slug)"
             />
@@ -69,12 +68,13 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, useContext } from "@nuxtjs/composition-api";
+import { computed, defineComponent, useContext, useRoute } from "@nuxtjs/composition-api";
 import RecipeFavoriteBadge from "./RecipeFavoriteBadge.vue";
 import RecipeChips from "./RecipeChips.vue";
 import RecipeContextMenu from "./RecipeContextMenu.vue";
 import RecipeCardImage from "./RecipeCardImage.vue";
 import RecipeRating from "./RecipeRating.vue";
+import { useLoggedInState } from "~/composables/use-logged-in-state";
 
 export default defineComponent({
   components: { RecipeFavoriteBadge, RecipeChips, RecipeContextMenu, RecipeRating, RecipeCardImage },
@@ -83,10 +83,6 @@ export default defineComponent({
       type: String,
       required: true,
     },
-    groupSlug: {
-      type: String,
-      default: null,
-    },
     slug: {
       type: String,
       required: true,
@@ -124,16 +120,16 @@ export default defineComponent({
   },
   setup(props) {
     const { $auth } = useContext();
-    const loggedIn = computed(() => {
-      return $auth.loggedIn;
-    });
+    const { isOwnGroup } = useLoggedInState();
 
+    const route = useRoute();
+    const groupSlug = computed(() => route.value.params.groupSlug || $auth.user?.groupSlug || "")
     const recipeRoute = computed<string>(() => {
-      return loggedIn.value ? `/recipe/${props.slug}` : `/explore/recipes/${props.groupSlug}/${props.slug}`;
+      return `/g/${groupSlug.value}/r/${props.slug}`;
     });
 
     return {
-      loggedIn,
+      isOwnGroup,
       recipeRoute,
     };
   },
diff --git a/frontend/components/Domain/Recipe/RecipeCardMobile.vue b/frontend/components/Domain/Recipe/RecipeCardMobile.vue
index 52aff102d..8f46d2f6b 100644
--- a/frontend/components/Domain/Recipe/RecipeCardMobile.vue
+++ b/frontend/components/Domain/Recipe/RecipeCardMobile.vue
@@ -37,10 +37,10 @@
           </v-list-item-subtitle>
           <div class="d-flex flex-wrap justify-end align-center">
             <slot name="actions">
-              <RecipeFavoriteBadge v-if="loggedIn" :slug="slug" show-always />
+              <RecipeFavoriteBadge v-if="isOwnGroup" :slug="slug" show-always />
               <v-rating
                 color="secondary"
-                :class="loggedIn ? 'ml-auto' : 'ml-auto pb-2'"
+                :class="isOwnGroup ? 'ml-auto' : 'ml-auto pb-2'"
                 background-color="secondary lighten-3"
                 dense
                 length="5"
@@ -52,7 +52,7 @@
               <!-- If we're not logged-in, no items display, so we hide this menu -->
               <!-- We also add padding to the v-rating above to compensate -->
               <RecipeContextMenu
-                v-if="loggedIn"
+                v-if="isOwnGroup"
                 :slug="slug"
                 :menu-icon="$globals.icons.dotsHorizontal"
                 :name="name"
@@ -66,7 +66,6 @@
                   print: false,
                   printPreferences: false,
                   share: true,
-                  publicUrl: false,
                 }"
                 @deleted="$emit('delete', slug)"
               />
@@ -80,10 +79,11 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, useContext } from "@nuxtjs/composition-api";
+import { computed, defineComponent, useContext, useRoute } from "@nuxtjs/composition-api";
 import RecipeFavoriteBadge from "./RecipeFavoriteBadge.vue";
 import RecipeContextMenu from "./RecipeContextMenu.vue";
 import RecipeCardImage from "./RecipeCardImage.vue";
+import { useLoggedInState } from "~/composables/use-logged-in-state";
 
 export default defineComponent({
   components: {
@@ -96,10 +96,6 @@ export default defineComponent({
       type: String,
       required: true,
     },
-    groupSlug: {
-      type: String,
-      default: null,
-    },
     slug: {
       type: String,
       required: true,
@@ -136,16 +132,16 @@ export default defineComponent({
   },
   setup(props) {
     const { $auth } = useContext();
-    const loggedIn = computed(() => {
-      return $auth.loggedIn;
-    });
+    const { isOwnGroup } = useLoggedInState();
 
+    const route = useRoute();
+    const groupSlug = computed(() => route.value.params.groupSlug || $auth.user?.groupSlug || "")
     const recipeRoute = computed<string>(() => {
-      return loggedIn.value ? `/recipe/${props.slug}` : `/explore/recipes/${props.groupSlug}/${props.slug}`;
+      return `/g/${groupSlug.value}/r/${props.slug}`;
     });
 
     return {
-      loggedIn,
+      isOwnGroup,
       recipeRoute,
     };
   },
diff --git a/frontend/components/Domain/Recipe/RecipeCardSection.vue b/frontend/components/Domain/Recipe/RecipeCardSection.vue
index e0ce9b1a8..ecdfe9e7a 100644
--- a/frontend/components/Domain/Recipe/RecipeCardSection.vue
+++ b/frontend/components/Domain/Recipe/RecipeCardSection.vue
@@ -76,7 +76,6 @@
             <RecipeCard
               :name="recipe.name"
               :description="recipe.description"
-              :group-slug="groupSlug"
               :slug="recipe.slug"
               :rating="recipe.rating"
               :image="recipe.image"
@@ -100,7 +99,6 @@
             <RecipeCardMobile
               :name="recipe.name"
               :description="recipe.description"
-              :group-slug="groupSlug"
               :slug="recipe.slug"
               :rating="recipe.rating"
               :image="recipe.image"
@@ -128,12 +126,14 @@ import {
   toRefs,
   useAsync,
   useContext,
+  useRoute,
   useRouter,
   watch,
 } from "@nuxtjs/composition-api";
 import { useThrottleFn } from "@vueuse/core";
 import RecipeCard from "./RecipeCard.vue";
 import RecipeCardMobile from "./RecipeCardMobile.vue";
+import { useLoggedInState } from "~/composables/use-logged-in-state";
 import { useAsyncKey } from "~/composables/use-utils";
 import { useLazyRecipes } from "~/composables/recipes";
 import { Recipe } from "~/lib/api/types/recipe";
@@ -165,10 +165,6 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
-    groupSlug: {
-      type: String,
-      default: null,
-    },
     recipes: {
       type: Array as () => Recipe[],
       default: () => [],
@@ -191,9 +187,7 @@ export default defineComponent({
     };
 
     const { $auth, $globals, $vuetify } = useContext();
-    const loggedIn = computed(() => {
-      return $auth.loggedIn;
-    });
+    const { isOwnGroup } = useLoggedInState();
     const useMobileCards = computed(() => {
       return $vuetify.breakpoint.smAndDown || preferences.value.useMobileCards;
     });
@@ -206,12 +200,15 @@ export default defineComponent({
       sortLoading: false,
     });
 
+    const route = useRoute();
+    const groupSlug = computed(() => route.value.params.groupSlug || $auth.user?.groupSlug || "");
+
     const router = useRouter();
     function navigateRandom() {
       if (props.recipes.length > 0) {
         const recipe = props.recipes[Math.floor(Math.random() * props.recipes.length)];
         if (recipe.slug !== undefined) {
-          router.push(loggedIn.value ? `/recipe/${recipe.slug}` : `/explore/recipes/${props.groupSlug}/${recipe.slug}`);
+          router.push(`/g/${groupSlug.value}/r/${recipe.slug}`);
         }
       }
     }
@@ -222,7 +219,7 @@ export default defineComponent({
     const ready = ref(false);
     const loading = ref(false);
 
-    const { fetchMore } = useLazyRecipes(loggedIn.value ? null : props.groupSlug);
+    const { fetchMore } = useLazyRecipes(isOwnGroup.value ? null : groupSlug.value);
 
     const queryFilter = computed(() => {
       const orderBy = props.query?.orderBy || preferences.value.orderBy;
diff --git a/frontend/components/Domain/Recipe/RecipeChips.vue b/frontend/components/Domain/Recipe/RecipeChips.vue
index 1c8c46306..f7be74846 100644
--- a/frontend/components/Domain/Recipe/RecipeChips.vue
+++ b/frontend/components/Domain/Recipe/RecipeChips.vue
@@ -9,7 +9,7 @@
       color="accent"
       :small="small"
       dark
-      :to=" loggedIn ? `/?${urlPrefix}=${category.id}` : undefined"
+      :to="isOwnGroup ? `${baseRecipeRoute}?${urlPrefix}=${category.id}` : undefined"
     >
       {{ truncateText(category.name) }}
     </v-chip>
@@ -17,7 +17,8 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, useContext } from "@nuxtjs/composition-api";
+import { computed, defineComponent, useContext, useRoute } from "@nuxtjs/composition-api";
+import { useLoggedInState } from "~/composables/use-logged-in-state";
 import { RecipeCategory, RecipeTag, RecipeTool } from "~/lib/api/types/user";
 
 export type UrlPrefixParam = "tags" | "categories" | "tools";
@@ -55,9 +56,13 @@ export default defineComponent({
   },
   setup(props) {
     const { $auth } = useContext();
-    const loggedIn = computed(() => {
-      return $auth.loggedIn
-    })
+    const { isOwnGroup } = useLoggedInState();
+
+    const route = useRoute();
+    const groupSlug = computed(() => route.value.params.groupSlug || $auth.user?.groupSlug || "")
+    const baseRecipeRoute = computed<string>(() => {
+      return `/g/${groupSlug.value}`
+    });
 
     function truncateText(text: string, length = 20, clamp = "...") {
       if (!props.truncate) return text;
@@ -68,7 +73,8 @@ export default defineComponent({
     }
 
     return {
-      loggedIn,
+      baseRecipeRoute,
+      isOwnGroup,
       truncateText,
     };
   },
diff --git a/frontend/components/Domain/Recipe/RecipeContextMenu.vue b/frontend/components/Domain/Recipe/RecipeContextMenu.vue
index e55f96f1a..1dc79fb81 100644
--- a/frontend/components/Domain/Recipe/RecipeContextMenu.vue
+++ b/frontend/components/Domain/Recipe/RecipeContextMenu.vue
@@ -170,10 +170,11 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, reactive, toRefs, useContext, useRouter, ref } from "@nuxtjs/composition-api";
+import { computed, defineComponent, reactive, toRefs, useContext, useRoute, useRouter, ref } from "@nuxtjs/composition-api";
 import RecipeIngredientListItem from "./RecipeIngredientListItem.vue";
 import RecipeDialogPrintPreferences from "./RecipeDialogPrintPreferences.vue";
 import RecipeDialogShare from "./RecipeDialogShare.vue";
+import { useLoggedInState } from "~/composables/use-logged-in-state";
 import { useUserApi } from "~/composables/api";
 import { alert } from "~/composables/use-toast";
 import { usePlanTypeOptions } from "~/composables/use-group-mealplan";
@@ -181,7 +182,6 @@ import { Recipe, RecipeIngredient } from "~/lib/api/types/recipe";
 import { ShoppingListSummary } from "~/lib/api/types/group";
 import { PlanEntryType } from "~/lib/api/types/meal-plan";
 import { useAxiosDownloader } from "~/composables/api/use-axios-download";
-import { useCopy } from "~/composables/use-copy";
 
 export interface ContextMenuIncludes {
   delete: boolean;
@@ -192,7 +192,6 @@ export interface ContextMenuIncludes {
   print: boolean;
   printPreferences: boolean;
   share: boolean;
-  publicUrl: boolean;
 }
 
 export interface ContextMenuItem {
@@ -222,7 +221,6 @@ export default defineComponent({
         print: true,
         printPreferences: true,
         share: true,
-        publicUrl: false,
       }),
     },
     // Append items are added at the end of the useItems list
@@ -291,10 +289,11 @@ export default defineComponent({
       pickerMenu: false,
     });
 
-    const { $auth, i18n, $globals } = useContext();
-    const loggedIn = computed(() => {
-      return $auth.loggedIn;
-    });
+    const { i18n, $auth, $globals } = useContext();
+    const { isOwnGroup } = useLoggedInState();
+
+    const route = useRoute();
+    const groupSlug = computed(() => route.value.params.groupSlug || $auth.user?.groupSlug || "");
 
     // ===========================================================================
     // Context Menu Setup
@@ -363,20 +362,13 @@ export default defineComponent({
         event: "share",
         isPublic: false,
       },
-      publicUrl: {
-        title: i18n.tc("recipe.public-link"),
-        icon: $globals.icons.contentCopy,
-        color: undefined,
-        event: "publicUrl",
-        isPublic: true,
-      },
     };
 
     // Get Default Menu Items Specified in Props
     for (const [key, value] of Object.entries(props.useItems)) {
       if (value) {
         const item = defaultItems[key];
-        if (item && (item.isPublic || loggedIn.value)) {
+        if (item && (item.isPublic || isOwnGroup.value)) {
           state.menuItems.push(item);
         }
       }
@@ -500,24 +492,7 @@ export default defineComponent({
     async function duplicateRecipe() {
       const { data } = await api.recipes.duplicateOne(props.slug, state.recipeName);
       if (data && data.slug) {
-        router.push(`/recipe/${data.slug}`);
-      }
-    }
-
-    const { copyText } = useCopy();
-    const groupSlug = ref<string>("");
-
-    async function setGroupSlug() {
-      if (groupSlug.value) {
-        return;
-      }
-
-      const { data } = await api.users.getSelfGroup();
-      if (data) {
-        groupSlug.value = data.slug;
-      } else {
-        // @ts-ignore this will either be a string or undefined
-        groupSlug.value = $auth.user?.groupId
+        router.push(`/g/${groupSlug.value}/r/${data.slug}`);
       }
     }
 
@@ -526,7 +501,7 @@ export default defineComponent({
       delete: () => {
         state.recipeDeleteDialog = true;
       },
-      edit: () => router.push(`/recipe/${props.slug}` + "?edit=true"),
+      edit: () => router.push(`/g/${groupSlug.value}/r/${props.slug}` + "?edit=true"),
       download: handleDownloadEvent,
       duplicate: () => {
         state.recipeDuplicateDialog = true;
@@ -549,14 +524,6 @@ export default defineComponent({
       share: () => {
         state.shareDialog = true;
       },
-      publicUrl: async () => {
-        await setGroupSlug();
-        if (!groupSlug.value) {
-          return;
-        }
-
-        copyText(`${window.location.origin}/explore/recipes/${groupSlug.value}/${props.slug}`);
-      },
     };
 
     function contextMenuEventHandler(eventKey: string) {
diff --git a/frontend/components/Domain/Recipe/RecipeDataTable.vue b/frontend/components/Domain/Recipe/RecipeDataTable.vue
index 33d80e0ec..755ae7ec5 100644
--- a/frontend/components/Domain/Recipe/RecipeDataTable.vue
+++ b/frontend/components/Domain/Recipe/RecipeDataTable.vue
@@ -18,7 +18,7 @@
       </tr>
     </template>
     <template #item.name="{ item }">
-      <a :href="`/recipe/${item.slug}`" style="color: inherit; text-decoration: inherit; " @click="$emit('click')">{{ item.name }}</a>
+      <a :href="`/r/${item.slug}`" style="color: inherit; text-decoration: inherit; " @click="$emit('click')">{{ item.name }}</a>
     </template>
     <template #item.tags="{ item }">
       <RecipeChip small :items="item.tags" :is-category="false" url-prefix="tags" />
diff --git a/frontend/components/Domain/Recipe/RecipeDialogSearch.vue b/frontend/components/Domain/Recipe/RecipeDialogSearch.vue
index 47cecf039..4d93b0ba1 100644
--- a/frontend/components/Domain/Recipe/RecipeDialogSearch.vue
+++ b/frontend/components/Domain/Recipe/RecipeDialogSearch.vue
@@ -31,7 +31,7 @@
           <div class="mr-auto">
             {{ $t("search.results") }}
           </div>
-          <router-link to="/"> {{ $t("search.advanced-search") }} </router-link>
+          <router-link :to="advancedSearchUrl"> {{ $t("search.advanced-search") }} </router-link>
         </v-card-actions>
 
         <RecipeCardMobile
@@ -54,11 +54,13 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, toRefs, reactive, ref, watch, useRoute } from "@nuxtjs/composition-api";
+import { computed, defineComponent, toRefs, reactive, ref, watch, useContext, useRoute } from "@nuxtjs/composition-api";
 import RecipeCardMobile from "./RecipeCardMobile.vue";
+import { useLoggedInState } from "~/composables/use-logged-in-state";
 import { RecipeSummary } from "~/lib/api/types/recipe";
 import { useUserApi } from "~/composables/api";
 import { useRecipeSearch } from "~/composables/recipes/use-recipe-search";
+import { usePublicExploreApi } from "~/composables/api/api-client";
 const SELECTED_EVENT = "selected";
 export default defineComponent({
   components: {
@@ -66,6 +68,7 @@ export default defineComponent({
   },
 
   setup(_, context) {
+    const { $auth } = useContext();
     const state = reactive({
       loading: false,
       selectedIndex: -1,
@@ -128,7 +131,9 @@ export default defineComponent({
       }
     });
 
+    const groupSlug = computed(() => route.value.params.groupSlug || $auth.user?.groupSlug || "");
     const route = useRoute();
+    const advancedSearchUrl = computed(() => `/g/${groupSlug.value}`)
     watch(route, close);
 
     function open() {
@@ -140,7 +145,8 @@ export default defineComponent({
 
     // ===========================================================================
     // Basic Search
-    const api = useUserApi();
+    const { isOwnGroup } = useLoggedInState();
+    const api = isOwnGroup.value ? useUserApi() : usePublicExploreApi(groupSlug.value).explore;
     const search = useRecipeSearch(api);
 
     // Select Handler
@@ -152,6 +158,7 @@ export default defineComponent({
 
     return {
       ...toRefs(state),
+      advancedSearchUrl,
       dialog,
       open,
       close,
diff --git a/frontend/components/Domain/Recipe/RecipeDialogShare.vue b/frontend/components/Domain/Recipe/RecipeDialogShare.vue
index 5a9dfeed5..d62ccfc98 100644
--- a/frontend/components/Domain/Recipe/RecipeDialogShare.vue
+++ b/frontend/components/Domain/Recipe/RecipeDialogShare.vue
@@ -56,7 +56,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, computed, toRefs, reactive, useContext } from "@nuxtjs/composition-api";
+import { defineComponent, computed, toRefs, reactive, useContext, useRoute } from "@nuxtjs/composition-api";
 import { useClipboard, useShare, whenever } from "@vueuse/core";
 import { RecipeShareToken } from "~/lib/api/types/recipe";
 import { useUserApi } from "~/composables/api";
@@ -105,6 +105,10 @@ export default defineComponent({
       }
     );
 
+    const { $auth, i18n } = useContext();
+    const route = useRoute();
+    const groupSlug = computed(() => route.value.params.groupSlug || $auth.user?.groupSlug || "");
+
     // ============================================================
     // Token Actions
 
@@ -138,7 +142,6 @@ export default defineComponent({
       }
     }
 
-    const { i18n } = useContext();
     const { share, isSupported: shareIsSupported } = useShare();
     const { copy } = useClipboard();
 
@@ -147,7 +150,7 @@ export default defineComponent({
     }
 
     function getTokenLink(token: string) {
-      return `${window.location.origin}/shared/recipes/${token}`;
+      return `${window.location.origin}/g/${groupSlug.value}/shared/r/${token}`;
     }
 
     async function copyTokenLink(token: string) {
diff --git a/frontend/components/Domain/Recipe/RecipeExplorerPage.vue b/frontend/components/Domain/Recipe/RecipeExplorerPage.vue
index ae4eaf9b1..72c47cebb 100644
--- a/frontend/components/Domain/Recipe/RecipeExplorerPage.vue
+++ b/frontend/components/Domain/Recipe/RecipeExplorerPage.vue
@@ -123,7 +123,6 @@
         class="mt-n5"
         :icon="$globals.icons.search"
         :title="$tc('search.results')"
-        :group-slug="groupSlug"
         :recipes="recipes"
         :query="passedQuery"
         @replaceRecipes="replaceRecipes"
@@ -134,9 +133,10 @@
 </template>
 
 <script lang="ts">
-import { ref, defineComponent, useRouter, onMounted, useContext, computed, Ref } from "@nuxtjs/composition-api";
+import { ref, defineComponent, useRouter, onMounted, useContext, computed, Ref, useRoute } from "@nuxtjs/composition-api";
 import { watchDebounced } from "@vueuse/shared";
 import SearchFilter from "~/components/Domain/SearchFilter.vue";
+import { useLoggedInState } from "~/composables/use-logged-in-state";
 import { useCategoryStore, useFoodStore, useTagStore, useToolStore } from "~/composables/store";
 import RecipeCardSection from "~/components/Domain/Recipe/RecipeCardSection.vue";
 import { IngredientFood, RecipeCategory, RecipeTag, RecipeTool } from "~/lib/api/types/recipe";
@@ -150,19 +150,11 @@ import { usePublicToolStore } from "~/composables/store/use-tool-store";
 
 export default defineComponent({
   components: { SearchFilter, RecipeCardSection },
-  props: {
-      groupSlug: {
-          type: String,
-          required: true,
-      },
-  },
-  setup(props) {
+  setup() {
     const router = useRouter();
     const { $auth, $globals, i18n } = useContext();
 
-    const loggedIn = computed(() => {
-      return $auth.loggedIn;
-    });
+    const { isOwnGroup } = useLoggedInState();
     const state = ref({
       auto: true,
       search: "",
@@ -176,17 +168,20 @@ export default defineComponent({
       requireAllFoods: false,
     });
 
-    const { recipes, appendRecipes, assignSorted, removeRecipe, replaceRecipes } = useLazyRecipes(loggedIn.value ? null : props.groupSlug);
-    const categories = loggedIn.value ? useCategoryStore() : usePublicCategoryStore(props.groupSlug);
+    const route = useRoute();
+    const groupSlug = computed(() => route.value.params.groupSlug || $auth.user?.groupSlug || "");
+
+    const { recipes, appendRecipes, assignSorted, removeRecipe, replaceRecipes } = useLazyRecipes(isOwnGroup.value ? null : groupSlug.value);
+    const categories = isOwnGroup.value ? useCategoryStore() : usePublicCategoryStore(groupSlug.value);
     const selectedCategories = ref<NoUndefinedField<RecipeCategory>[]>([]);
 
-    const foods = loggedIn.value ? useFoodStore() : usePublicFoodStore(props.groupSlug);
+    const foods = isOwnGroup.value ? useFoodStore() : usePublicFoodStore(groupSlug.value);
     const selectedFoods = ref<IngredientFood[]>([]);
 
-    const tags = loggedIn.value ? useTagStore() : usePublicTagStore(props.groupSlug);
+    const tags = isOwnGroup.value ? useTagStore() : usePublicTagStore(groupSlug.value);
     const selectedTags = ref<NoUndefinedField<RecipeTag>[]>([]);
 
-    const tools = loggedIn.value ? useToolStore() : usePublicToolStore(props.groupSlug);
+    const tools = isOwnGroup.value ? useToolStore() : usePublicToolStore(groupSlug.value);
     const selectedTools = ref<NoUndefinedField<RecipeTool>[]>([]);
 
     const passedQuery = ref<RecipeSearchQuery | null>(null);
diff --git a/frontend/components/Domain/Recipe/RecipeList.vue b/frontend/components/Domain/Recipe/RecipeList.vue
index f4aac3012..982370289 100644
--- a/frontend/components/Domain/Recipe/RecipeList.vue
+++ b/frontend/components/Domain/Recipe/RecipeList.vue
@@ -7,7 +7,7 @@
       :class="attrs.class.sheet"
       :style="tile ? 'max-width: 100%; width: fit-content;' : 'width: 100%;'"
     >
-      <v-list-item :to="'/recipe/' + recipe.slug" :class="attrs.class.listItem">
+      <v-list-item :to="'/' + groupSlug + '/r/' + recipe.slug" :class="attrs.class.listItem">
         <v-list-item-avatar :class="attrs.class.avatar">
           <v-icon :class="attrs.class.icon" dark :small="small"> {{ $globals.icons.primary }} </v-icon>
         </v-list-item-avatar>
@@ -28,7 +28,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent } from "@nuxtjs/composition-api";
+import { computed, defineComponent, useContext, useRoute } from "@nuxtjs/composition-api";
 import DOMPurify from "dompurify";
 import { useFraction } from "~/composables/recipes/use-fraction";
 import { ShoppingListItemOut } from "~/lib/api/types/group";
@@ -58,7 +58,10 @@ export default defineComponent({
     },
   },
   setup(props) {
+    const { $auth } = useContext();
     const { frac } = useFraction();
+    const route = useRoute();
+    const groupSlug = computed(() => route.value.params.groupSlug || $auth.user?.groupSlug || "");
 
     const attrs = computed(() => {
       return props.small ? {
@@ -150,6 +153,7 @@ export default defineComponent({
 
     return {
       attrs,
+      groupSlug,
       listItemDescriptions,
     };
   },
diff --git a/frontend/components/Domain/Recipe/RecipeOcrEditorPage/RecipeOcrEditorPage.vue b/frontend/components/Domain/Recipe/RecipeOcrEditorPage/RecipeOcrEditorPage.vue
index cb50763ad..295f95c08 100644
--- a/frontend/components/Domain/Recipe/RecipeOcrEditorPage/RecipeOcrEditorPage.vue
+++ b/frontend/components/Domain/Recipe/RecipeOcrEditorPage/RecipeOcrEditorPage.vue
@@ -140,7 +140,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, onMounted, reactive, toRefs, useRouter } from "@nuxtjs/composition-api";
+import { defineComponent, ref, onMounted, reactive, toRefs, useContext, useRouter, computed, useRoute } from "@nuxtjs/composition-api";
 import { until } from "@vueuse/core";
 import { invoke } from "@vueuse/shared";
 import draggable from "vuedraggable";
@@ -179,6 +179,10 @@ export default defineComponent({
     },
   },
   setup(props) {
+    const { $auth } = useContext();
+    const route = useRoute();
+    const groupSlug = computed(() => route.value.params.groupSlug || $auth.user?.groupSlug || "");
+
     const router = useRouter();
     const api = useUserApi();
 
@@ -328,12 +332,12 @@ export default defineComponent({
     async function updateRecipe() {
       const { data } = await api.recipes.updateOne(props.recipe.slug, props.recipe);
       if (data?.slug) {
-        router.push("/recipe/" + data.slug);
+        router.push(`/g/${groupSlug.value}/r/${data.slug}`);
       }
     }
 
     function closeEditor() {
-      router.push("/recipe/" + props.recipe.slug);
+      router.push(`/g/${groupSlug.value}/r/${props.recipe.slug}`);
     }
 
     const canvasSetText = function () {
diff --git a/frontend/components/Domain/Recipe/RecipeOrganizerPage.vue b/frontend/components/Domain/Recipe/RecipeOrganizerPage.vue
index 99e07279d..2f832470b 100644
--- a/frontend/components/Domain/Recipe/RecipeOrganizerPage.vue
+++ b/frontend/components/Domain/Recipe/RecipeOrganizerPage.vue
@@ -48,7 +48,7 @@
       <BaseCardSectionTitle v-if="isTitle(key)" :title="key" />
       <v-row>
         <v-col v-for="(item, index) in itms" :key="'cat' + index" cols="12" :sm="12" :md="6" :lg="4" :xl="3">
-          <v-card v-if="item" class="left-border" hover :to="`/?${itemType}=${item.id}`">
+          <v-card v-if="item" class="left-border" hover :to="`/g/${groupSlug}?${itemType}=${item.id}`">
             <v-card-actions>
               <v-icon>
                 {{ icon }}
@@ -72,7 +72,7 @@
 
 <script lang="ts">
 import Fuse from "fuse.js";
-import { defineComponent, computed, ref, reactive } from "@nuxtjs/composition-api";
+import { defineComponent, computed, ref, reactive, useContext, useRoute } from "@nuxtjs/composition-api";
 import { useContextPresets } from "~/composables/use-context-presents";
 import RecipeOrganizerDialog from "~/components/Domain/Recipe/RecipeOrganizerDialog.vue";
 import { RecipeOrganizer } from "~/lib/api/types/non-generated";
@@ -119,6 +119,10 @@ export default defineComponent({
       },
     });
 
+    const { $auth } = useContext();
+    const route = useRoute();
+    const groupSlug = computed(() => route.value.params.groupSlug || $auth.user?.groupSlug || "");
+
     // =================================================================
     // Context Menu
 
@@ -204,6 +208,7 @@ export default defineComponent({
     }
 
     return {
+      groupSlug,
       isTitle,
       dialogs,
       confirmDelete,
diff --git a/frontend/components/Domain/Recipe/RecipePage/RecipePage.vue b/frontend/components/Domain/Recipe/RecipePage/RecipePage.vue
index 9dcea9439..07361ac3e 100644
--- a/frontend/components/Domain/Recipe/RecipePage/RecipePage.vue
+++ b/frontend/components/Domain/Recipe/RecipePage/RecipePage.vue
@@ -72,7 +72,7 @@
     </div>
 
     <RecipePageComments
-      v-if="user.id && !recipe.settings.disableComments && !isEditForm && !isCookMode"
+      v-if="isOwnGroup && !recipe.settings.disableComments && !isEditForm && !isCookMode"
       :recipe="recipe"
       class="px-1 my-4 d-print-none"
     />
@@ -89,6 +89,7 @@ import {
   ref,
   onMounted,
   onUnmounted,
+useRoute,
 } from "@nuxtjs/composition-api";
 import { invoke, until, useWakeLock } from "@vueuse/core";
 import RecipePageEditorToolbar from "./RecipePageParts/RecipePageEditorToolbar.vue";
@@ -101,6 +102,7 @@ import RecipePageOrganizers from "./RecipePageParts/RecipePageOrganizers.vue";
 import RecipePageScale from "./RecipePageParts/RecipePageScale.vue";
 import RecipePageTitleContent from "./RecipePageParts/RecipePageTitleContent.vue";
 import RecipePageComments from "./RecipePageParts/RecipePageComments.vue";
+import { useLoggedInState } from "~/composables/use-logged-in-state";
 import RecipePrintContainer from "~/components/Domain/Recipe/RecipePrintContainer.vue";
 import { EditorMode, PageMode, usePageState, usePageUser } from "~/composables/recipe-page/shared-state";
 import { NoUndefinedField } from "~/lib/api/types/non-generated";
@@ -140,6 +142,11 @@ export default defineComponent({
     },
   },
   setup(props) {
+    const { $auth, $vuetify } = useContext();
+    const route = useRoute();
+    const groupSlug = computed(() => route.value.params.groupSlug || $auth.user?.groupSlug || "");
+    const { isOwnGroup } = useLoggedInState();
+
     const router = useRouter();
     const api = useUserApi();
     const { pageMode, editMode, setMode, isEditForm, isEditJSON, isCookMode, isEditMode, toggleCookMode } =
@@ -226,21 +233,20 @@ export default defineComponent({
       const { data } = await api.recipes.updateOne(props.recipe.slug, props.recipe);
       setMode(PageMode.VIEW);
       if (data?.slug) {
-        router.push("/recipe/" + data.slug);
+        router.push(`/g/${groupSlug.value}/r/` + data.slug);
       }
     }
 
     async function deleteRecipe() {
       const { data } = await api.recipes.deleteOne(props.recipe.slug);
       if (data?.slug) {
-        router.push("/");
+        router.push(`/g/${groupSlug.value}`);
       }
     }
 
     /** =============================================================
      * View Preferences
      */
-    const { $vuetify } = useContext();
 
     const landscape = computed(() => {
       const preferLandscape = props.recipe.settings.landscapeView;
@@ -283,6 +289,7 @@ export default defineComponent({
 
     return {
       user,
+      isOwnGroup,
       api,
       scale: ref(1),
       EDITOR_OPTIONS,
diff --git a/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageHeader.vue b/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageHeader.vue
index 0754a13b3..c9e493453 100644
--- a/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageHeader.vue
+++ b/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageHeader.vue
@@ -10,7 +10,7 @@
           <v-divider class="my-2"></v-divider>
           <SafeMarkdown :source="recipe.description" />
           <v-divider></v-divider>
-          <div v-if="user.id" class="d-flex justify-center mt-5">
+          <div v-if="isOwnGroup" class="d-flex justify-center mt-5">
             <RecipeLastMade
               v-model="recipe.lastMade"
               :recipe="recipe"
@@ -45,9 +45,9 @@
       :recipe="recipe"
       :slug="recipe.slug"
       :recipe-scale="recipeScale"
-      :locked="user.id !== recipe.userId && recipe.settings.locked"
+      :locked="isOwnGroup && user.id !== recipe.userId && recipe.settings.locked"
       :name="recipe.name"
-      :logged-in="$auth.loggedIn"
+      :logged-in="isOwnGroup"
       :open="isEditMode"
       :recipe-id="recipe.id"
       :show-ocr-button="recipe.isOcrRecipe"
@@ -64,7 +64,8 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, useContext, computed, ref, watch, useRouter } from "@nuxtjs/composition-api";
+import { defineComponent, useContext, computed, ref, watch, useRouter, useRoute } from "@nuxtjs/composition-api";
+import { useLoggedInState } from "~/composables/use-logged-in-state";
 import RecipeRating from "~/components/Domain/Recipe/RecipeRating.vue";
 import RecipeLastMade from "~/components/Domain/Recipe/RecipeLastMade.vue";
 import RecipeActionMenu from "~/components/Domain/Recipe/RecipeActionMenu.vue";
@@ -95,17 +96,20 @@ export default defineComponent({
     },
   },
   setup(props) {
+    const { $auth, $vuetify } = useContext();
     const { recipeImage } = useStaticRoutes();
     const { imageKey, pageMode, editMode, setMode, toggleEditMode, isEditMode } = usePageState(props.recipe.slug);
     const { user } = usePageUser();
+    const { isOwnGroup } = useLoggedInState();
+
+    const route = useRoute();
+    const groupSlug = computed(() => route.value.params.groupSlug || $auth.user?.groupSlug || "");
     const router = useRouter();
 
     function printRecipe() {
       window.print();
     }
 
-    const { $vuetify } = useContext();
-
     const hideImage = ref(false);
     const imageHeight = computed(() => {
       return $vuetify.breakpoint.xs ? "200" : "400";
@@ -116,7 +120,7 @@ export default defineComponent({
     });
 
     function goToOcrEditor() {
-      router.push("/recipe/" + props.recipe.slug + "/ocr-editor");
+      router.push(`/g/${groupSlug.value}/r/${props.recipe.slug}/ocr-editor`);
     }
 
     watch(
@@ -127,6 +131,7 @@ export default defineComponent({
     );
 
     return {
+      isOwnGroup,
       setMode,
       toggleEditMode,
       recipeImage,
diff --git a/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageIngredientEditor.vue b/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageIngredientEditor.vue
index 50fd2c591..18bb15664 100644
--- a/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageIngredientEditor.vue
+++ b/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageIngredientEditor.vue
@@ -34,7 +34,7 @@
               class="mb-1"
               :disabled="recipe.settings.disableAmount || hasFoodOrUnit"
               color="accent"
-              :to="`${recipe.slug}/ingredient-parser`"
+              :to="`/g/${groupSlug}/${recipe.slug}/ingredient-parser`"
               v-bind="attrs"
             >
               <template #icon>
@@ -54,7 +54,7 @@
 
 <script lang="ts">
 import draggable from "vuedraggable";
-import { computed, defineComponent, ref, useContext } from "@nuxtjs/composition-api";
+import { computed, defineComponent, ref, useContext, useRoute } from "@nuxtjs/composition-api";
 import { usePageState, usePageUser } from "~/composables/recipe-page/shared-state";
 import { NoUndefinedField } from "~/lib/api/types/non-generated";
 import { Recipe } from "~/lib/api/types/recipe";
@@ -76,10 +76,13 @@ export default defineComponent({
   setup(props) {
     const { user } = usePageUser();
     const { imageKey } = usePageState(props.recipe.slug);
-    const { i18n } = useContext();
+    const { $auth, i18n } = useContext();
 
     const drag = ref(false);
 
+    const route = useRoute();
+    const groupSlug = computed(() => route.value.params.groupSlug || $auth.user?.groupSlug || "");
+
     const hasFoodOrUnit = computed(() => {
       if (!props.recipe) {
         return false;
@@ -139,6 +142,7 @@ export default defineComponent({
 
     return {
       user,
+      groupSlug,
       addIngredient,
       parserToolTip,
       hasFoodOrUnit,
diff --git a/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageIngredientToolsView.vue b/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageIngredientToolsView.vue
index 1fef66a5c..cf5375446 100644
--- a/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageIngredientToolsView.vue
+++ b/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageIngredientToolsView.vue
@@ -26,6 +26,7 @@
 
 <script lang="ts">
 import { defineComponent } from "@nuxtjs/composition-api";
+import { useLoggedInState } from "~/composables/use-logged-in-state";
 import { usePageState, usePageUser } from "~/composables/recipe-page/shared-state";
 import { useToolStore } from "~/composables/store";
 import { NoUndefinedField } from "~/lib/api/types/non-generated";
@@ -47,12 +48,14 @@ export default defineComponent({
     },
   },
   setup(props) {
-    const toolStore = useToolStore();
+    const { isOwnGroup } = useLoggedInState();
+
+    const toolStore = isOwnGroup.value ? useToolStore() : null;
     const { user } = usePageUser();
     const { isEditMode } = usePageState(props.recipe.slug);
 
     function updateTool(index: number) {
-      if (user.id) {
+      if (user.id && toolStore) {
         toolStore.actions.updateOne(props.recipe.tools[index]);
       } else {
         console.log("no user, skipping server update");
diff --git a/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageTitleContent.vue b/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageTitleContent.vue
index ad61ea7d1..2f8fcda6e 100644
--- a/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageTitleContent.vue
+++ b/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageTitleContent.vue
@@ -5,7 +5,7 @@
         {{ recipe.name }}
       </v-card-title>
       <SafeMarkdown :source="recipe.description" />
-      <div v-if="user.id" class="pb-2 d-flex justify-center flex-wrap">
+      <div v-if="isOwnGroup" class="pb-2 d-flex justify-center flex-wrap">
         <RecipeLastMade
           v-model="recipe.lastMade"
           :recipe="recipe"
@@ -50,6 +50,7 @@
 
 <script lang="ts">
 import { defineComponent } from "@nuxtjs/composition-api";
+import { useLoggedInState } from "~/composables/use-logged-in-state";
 import { usePageState, usePageUser } from "~/composables/recipe-page/shared-state";
 import { validators } from "~/composables/use-validators";
 import { NoUndefinedField } from "~/lib/api/types/non-generated";
@@ -77,12 +78,14 @@ export default defineComponent({
   setup(props) {
     const { user } = usePageUser();
     const { imageKey, isEditMode } = usePageState(props.recipe.slug);
+    const { isOwnGroup } = useLoggedInState();
 
     return {
       user,
       imageKey,
       validators,
       isEditMode,
+      isOwnGroup,
     };
   },
 });
diff --git a/frontend/components/Domain/Recipe/RecipeRating.vue b/frontend/components/Domain/Recipe/RecipeRating.vue
index 435387800..f5b312f67 100644
--- a/frontend/components/Domain/Recipe/RecipeRating.vue
+++ b/frontend/components/Domain/Recipe/RecipeRating.vue
@@ -2,7 +2,7 @@
   <div @click.prevent>
     <v-rating
       v-model="rating"
-      :readonly="!loggedIn"
+      :readonly="!isOwnGroup"
       color="secondary"
       background-color="secondary lighten-3"
       length="5"
@@ -18,7 +18,8 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, ref, useContext } from "@nuxtjs/composition-api";
+import { defineComponent, ref } from "@nuxtjs/composition-api";
+import { useLoggedInState } from "~/composables/use-logged-in-state";
 import { useUserApi } from "~/composables/api";
 export default defineComponent({
   props: {
@@ -45,10 +46,7 @@ export default defineComponent({
     },
   },
   setup(props, context) {
-    const { $auth } = useContext();
-    const loggedIn = computed(() => {
-      return $auth.loggedIn;
-    });
+    const { isOwnGroup } = useLoggedInState();
 
     const rating = ref(props.value);
 
@@ -65,7 +63,7 @@ export default defineComponent({
       context.emit("input", val);
     }
 
-    return { loggedIn, rating, updateRating };
+    return { isOwnGroup, rating, updateRating };
   },
 });
 </script>
diff --git a/frontend/components/Domain/Recipe/RecipeTimelineItem.vue b/frontend/components/Domain/Recipe/RecipeTimelineItem.vue
index 4802cdc22..fd460d95d 100644
--- a/frontend/components/Domain/Recipe/RecipeTimelineItem.vue
+++ b/frontend/components/Domain/Recipe/RecipeTimelineItem.vue
@@ -13,7 +13,7 @@
     </template>
     <v-card
       hover
-      :to="$listeners.selected || !recipe ? undefined : `/recipe/${recipe.slug}`"
+      :to="$listeners.selected || !recipe ? undefined : `/g/${groupSlug}/r/${recipe.slug}`"
       class="elevation-12"
       @click="$emit('selected')"
     >
@@ -95,7 +95,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, ref, useContext } from "@nuxtjs/composition-api";
+import { computed, defineComponent, ref, useContext, useRoute } from "@nuxtjs/composition-api";
 import RecipeCardMobile from "./RecipeCardMobile.vue";
 import RecipeTimelineContextMenu from "./RecipeTimelineContextMenu.vue";
 import { useStaticRoutes } from "~/composables/api";
@@ -121,10 +121,13 @@ export default defineComponent({
   },
 
   setup(props) {
-    const { $globals, $vuetify } = useContext();
+    const { $auth, $globals, $vuetify } = useContext();
     const { recipeTimelineEventImage } = useStaticRoutes();
     const timelineEvents = ref([] as RecipeTimelineEventOut[]);
 
+    const route = useRoute();
+    const groupSlug = computed(() => route.value.params.groupSlug || $auth.user?.groupSlug || "");
+
     const useMobileFormat = computed(() => {
       return $vuetify.breakpoint.smAndDown;
     });
@@ -187,6 +190,7 @@ export default defineComponent({
 
     return {
       attrs,
+      groupSlug,
       icon,
       eventImageUrl,
       hideImage,
diff --git a/frontend/components/Layout/DefaultLayout.vue b/frontend/components/Layout/DefaultLayout.vue
index 3af77dea3..1360af25e 100644
--- a/frontend/components/Layout/DefaultLayout.vue
+++ b/frontend/components/Layout/DefaultLayout.vue
@@ -6,14 +6,14 @@
         v-model="sidebar"
         absolute
         :top-link="topLinks"
-        :secondary-header="$t('sidebar.cookbooks')"
-        :secondary-header-link="loggedIn ? '/group/cookbooks' : undefined"
+        :secondary-header="cookbookLinks.length ? $tc('sidebar.cookbooks') : undefined"
+        :secondary-header-link="isOwnGroup && cookbookLinks.length ? `/g/${groupSlug}/cookbooks` : undefined"
         :secondary-links="cookbookLinks || []"
-        :bottom-links="isAdmin ? bottomLink : []"
+        :bottom-links="isAdmin ? bottomLinks : []"
       >
         <v-menu offset-y nudge-bottom="5" close-delay="50" nudge-right="15">
           <template #activator="{ on, attrs }">
-            <v-btn v-if="loggedIn" rounded large class="ml-2 mt-3" v-bind="attrs" v-on="on">
+            <v-btn v-if="isOwnGroup" rounded large class="ml-2 mt-3" v-bind="attrs" v-on="on">
               <v-icon left large color="primary">
                 {{ $globals.icons.createAlt }}
               </v-icon>
@@ -23,7 +23,7 @@
           <v-list dense class="my-0 py-0">
             <template v-for="(item, index) in createLinks">
               <v-divider v-if="item.insertDivider" :key="index" class="mx-2"></v-divider>
-              <v-list-item v-if="!item.restricted || loggedIn" :key="item.title" :to="item.to" exact>
+              <v-list-item v-if="!item.restricted || isOwnGroup" :key="item.title" :to="item.to" exact>
                 <v-list-item-avatar>
                   <v-icon>
                     {{ item.icon }}
@@ -64,7 +64,7 @@
         </template>
       </AppSidebar>
 
-      <AppHeader :menu="loggedIn">
+      <AppHeader>
         <v-btn icon @click.stop="sidebar = !sidebar">
           <v-icon> {{ $globals.icons.menu }}</v-icon>
         </v-btn>
@@ -79,6 +79,7 @@
 
   <script lang="ts">
   import { computed, defineComponent, onMounted, ref, useContext, useRoute } from "@nuxtjs/composition-api";
+  import { useLoggedInState } from "~/composables/use-logged-in-state";
   import AppHeader from "@/components/Layout/LayoutParts/AppHeader.vue";
   import AppSidebar from "@/components/Layout/LayoutParts/AppSidebar.vue";
   import { SidebarLinks } from "~/types/application-types";
@@ -91,13 +92,12 @@
     components: { AppHeader, AppSidebar, LanguageDialog, TheSnackbar },
     setup() {
       const { $globals, $auth, $vuetify, i18n } = useContext();
+      const { isOwnGroup } = useLoggedInState();
 
       const isAdmin = computed(() => $auth.user?.admin);
-      const loggedIn = computed(() => $auth.loggedIn);
-
       const route = useRoute();
-      const groupSlug = route.value.params.groupSlug;
-      const { cookbooks } = loggedIn.value ? useCookbooks() : usePublicCookbooks(groupSlug);
+      const groupSlug = computed(() => route.value.params.groupSlug || $auth.user?.groupSlug || "");
+      const { cookbooks } = isOwnGroup.value ? useCookbooks() : usePublicCookbooks(groupSlug.value || "");
 
       const toggleDark = useToggleDarkMode();
 
@@ -115,7 +115,7 @@
           return {
             icon: $globals.icons.pages,
             title: cookbook.name,
-            to: loggedIn.value ? `/cookbooks/${cookbook.slug as string}` : `/explore/cookbooks/${groupSlug}/${cookbook.slug as string}`,
+            to: `/g/${groupSlug.value}/cookbooks/${cookbook.slug as string}`,
           };
         });
       });
@@ -129,13 +129,13 @@
         restricted: boolean;
       }
 
-      const createLinks: Link[] = [
+      const createLinks = computed<Link[]>(() => [
         {
           insertDivider: false,
           icon: $globals.icons.link,
           title: i18n.tc("general.import"),
           subtitle: i18n.tc("new-recipe.import-by-url"),
-          to: "/recipe/create/url",
+          to: `/g/${groupSlug.value}/r/create/url`,
           restricted: true,
         },
         {
@@ -143,7 +143,7 @@
           icon: $globals.icons.edit,
           title: i18n.tc("general.create"),
           subtitle: i18n.tc("new-recipe.create-manually"),
-          to: "/recipe/create/new",
+          to: `/g/${groupSlug.value}/r/create/new`,
           restricted: true,
         },
         {
@@ -151,24 +151,24 @@
           icon: $globals.icons.pages,
           title: i18n.tc("sidebar.cookbook"),
           subtitle: i18n.tc("sidebar.create-cookbook"),
-          to: "/group/cookbooks",
+          to: `/g/${groupSlug.value}/cookbooks`,
           restricted: true,
         },
-      ];
+      ]);
 
-      const bottomLinks: SidebarLinks = [
+      const bottomLinks = computed<SidebarLinks>(() => [
         {
           icon: $globals.icons.cog,
           title: i18n.tc("general.settings"),
           to: "/admin/site-settings",
           restricted: true,
         },
-      ];
+      ]);
 
-      const topLinks: SidebarLinks = [
+      const topLinks = computed<SidebarLinks>(() => [
         {
           icon: $globals.icons.search,
-          to: "/",
+          to: `/g/${groupSlug.value}`,
           title: i18n.tc("sidebar.search"),
           restricted: true,
         },
@@ -187,30 +187,41 @@
         {
           icon: $globals.icons.timelineText,
           title: i18n.tc("recipe.timeline"),
-          to: "/group/timeline",
+          to: `/g/${groupSlug.value}/recipes/timeline`,
           restricted: true,
         },
         {
           icon: $globals.icons.categories,
-          to: "/recipes/categories",
+          to: `/g/${groupSlug.value}/recipes/categories`,
           title: i18n.tc("sidebar.categories"),
           restricted: true,
         },
         {
           icon: $globals.icons.tags,
-          to: "/recipes/tags",
+          to: `/g/${groupSlug.value}/recipes/tags`,
           title: i18n.tc("sidebar.tags"),
           restricted: true,
         },
         {
           icon: $globals.icons.potSteam,
-          to: "/recipes/tools",
+          to: `/g/${groupSlug.value}/recipes/tools`,
           title: i18n.tc("tool.tools"),
           restricted: true,
         },
-      ];
+      ]);
 
-      return { cookbookLinks, createLinks, bottomLink: bottomLinks, topLinks, isAdmin, loggedIn, languageDialog, toggleDark, sidebar };
+      return {
+        groupSlug,
+        cookbookLinks,
+        createLinks,
+        bottomLinks,
+        topLinks,
+        isAdmin,
+        isOwnGroup,
+        languageDialog,
+        toggleDark,
+        sidebar,
+      };
     },
   });
   </script>
diff --git a/frontend/components/Layout/LayoutParts/AppHeader.vue b/frontend/components/Layout/LayoutParts/AppHeader.vue
index 5af4088d9..2c6dab639 100644
--- a/frontend/components/Layout/LayoutParts/AppHeader.vue
+++ b/frontend/components/Layout/LayoutParts/AppHeader.vue
@@ -35,7 +35,7 @@
       <v-btn v-else icon @click="activateSearch">
         <v-icon> {{ $globals.icons.search }}</v-icon>
       </v-btn>
-      <v-btn v-if="$auth.loggedIn" :text="$vuetify.breakpoint.smAndUp" :icon="$vuetify.breakpoint.xs" @click="$auth.logout()">
+      <v-btn v-if="loggedIn" :text="$vuetify.breakpoint.smAndUp" :icon="$vuetify.breakpoint.xs" @click="$auth.logout()">
         <v-icon :left="$vuetify.breakpoint.smAndUp">{{ $globals.icons.logout }}</v-icon>
         {{ $vuetify.breakpoint.smAndUp ? $t("user.logout") : "" }}
       </v-btn>
@@ -49,6 +49,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, onBeforeUnmount, onMounted, ref, useContext, useRoute } from "@nuxtjs/composition-api";
+import { useLoggedInState } from "~/composables/use-logged-in-state";
 import RecipeDialogSearch from "~/components/Domain/Recipe/RecipeDialogSearch.vue";
 
 export default defineComponent({
@@ -61,14 +62,11 @@ export default defineComponent({
   },
   setup() {
     const { $auth } = useContext();
+    const { loggedIn } = useLoggedInState();
     const route = useRoute();
+    const groupSlug = computed(() => route.value.params.groupSlug || $auth.user?.groupSlug || "");
 
-    const loggedIn = computed(() => {
-      return $auth.loggedIn;
-    });
-
-    const groupSlug = route.value.params.groupSlug;
-    const routerLink = !loggedIn.value && groupSlug ? `/explore/recipes/${groupSlug}` : "/"
+    const routerLink = computed(() => groupSlug.value ? `/g/${groupSlug.value}` : "/");
     const domSearchDialog = ref<InstanceType<typeof RecipeDialogSearch> | null>(null);
 
     function activateSearch() {
@@ -95,6 +93,7 @@ export default defineComponent({
       activateSearch,
       domSearchDialog,
       routerLink,
+      loggedIn,
     };
   },
 });
diff --git a/frontend/components/Layout/LayoutParts/AppSidebar.vue b/frontend/components/Layout/LayoutParts/AppSidebar.vue
index c774ab4fb..6a4585a2c 100644
--- a/frontend/components/Layout/LayoutParts/AppSidebar.vue
+++ b/frontend/components/Layout/LayoutParts/AppSidebar.vue
@@ -1,14 +1,14 @@
 <template>
   <v-navigation-drawer v-model="drawer" class="d-flex flex-column d-print-none" clipped app width="240px">
     <!-- User Profile -->
-    <template v-if="$auth.user">
-      <v-list-item two-line to="/user/profile" exact>
+    <template v-if="loggedIn">
+      <v-list-item two-line :to="userProfileLink" exact>
         <UserAvatar list :user-id="$auth.user.id" />
 
         <v-list-item-content>
           <v-list-item-title class="pr-2"> {{ $auth.user.fullName }}</v-list-item-title>
           <v-list-item-subtitle>
-            <v-btn class="px-2 pa-0" text :to="`/user/${$auth.user.id}/favorites`" small>
+            <v-btn v-if="isOwnGroup" class="px-2 pa-0" text :to="userFavoritesLink" small>
               <v-icon left small>
                 {{ $globals.icons.heart }}
               </v-icon>
@@ -26,7 +26,7 @@
     <template v-if="topLink">
       <v-list nav dense>
         <template v-for="nav in topLink">
-          <div v-if="!nav.restricted || loggedIn" :key="nav.title">
+          <div v-if="!nav.restricted || isOwnGroup" :key="nav.title">
             <!-- Multi Items -->
             <v-list-group
               v-if="nav.children"
@@ -69,13 +69,20 @@
 
     <!-- Secondary Links -->
     <template v-if="secondaryLinks">
-      <v-subheader v-if="secondaryHeader" :to="secondaryHeaderLink" class="pb-0">
-        {{ secondaryHeader }}
-      </v-subheader>
-      <v-divider></v-divider>
+      <router-link v-if="secondaryHeader && secondaryHeaderLink" :to="secondaryHeaderLink" style="text-decoration: none;">
+        <v-subheader :to="secondaryHeaderLink" class="pb-0">
+          {{ secondaryHeader }}
+        </v-subheader>
+      </router-link>
+      <div v-else-if="secondaryHeader">
+        <v-subheader :to="secondaryHeaderLink" class="pb-0">
+          {{ secondaryHeader }}
+        </v-subheader>
+      </div>
+      <v-divider v-if="secondaryHeader"></v-divider>
       <v-list nav dense exact>
         <template v-for="nav in secondaryLinks">
-          <div v-if="!nav.restricted || loggedIn" :key="nav.title">
+          <div v-if="!nav.restricted || isOwnGroup" :key="nav.title">
             <!-- Multi Items -->
             <v-list-group
               v-if="nav.children"
@@ -116,7 +123,7 @@
       <v-list nav dense>
         <v-list-item-group v-model="bottomSelected" color="primary">
           <template v-for="nav in bottomLinks">
-            <div v-if="!nav.restricted || loggedIn" :key="nav.title">
+            <div v-if="!nav.restricted || isOwnGroup" :key="nav.title">
               <v-list-item
                 :key="nav.title"
                 exact
@@ -141,6 +148,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, reactive, toRefs, useContext } from "@nuxtjs/composition-api";
+import { useLoggedInState } from "~/composables/use-logged-in-state";
 import { SidebarLinks } from "~/types/application-types";
 import UserAvatar from "~/components/Domain/User/UserAvatar.vue";
 
@@ -198,7 +206,10 @@ export default defineComponent({
     });
 
     const { $auth } = useContext();
-    const loggedIn = computed(() => $auth.loggedIn);
+    const { loggedIn, isOwnGroup } = useLoggedInState();
+
+    const userFavoritesLink = computed(() => $auth.user ? `/user/${$auth.user.id}/favorites` : undefined);
+    const userProfileLink = computed(() => $auth.user ? "/user/profile" : undefined);
 
     const state = reactive({
       dropDowns: {},
@@ -210,8 +221,11 @@ export default defineComponent({
 
     return {
       ...toRefs(state),
+      userFavoritesLink,
+      userProfileLink,
       drawer,
       loggedIn,
+      isOwnGroup,
     };
   },
 });
diff --git a/frontend/components/global/ReportTable.vue b/frontend/components/global/ReportTable.vue
index cab54139f..a4eaabdf3 100644
--- a/frontend/components/global/ReportTable.vue
+++ b/frontend/components/global/ReportTable.vue
@@ -37,8 +37,8 @@ export default defineComponent({
   },
 
   setup(_, context) {
-    const router = useRouter();
     const { i18n } = useContext();
+    const router = useRouter();
 
     const headers = [
       { text: i18n.t("category.category"), value: "category" },
@@ -49,7 +49,7 @@ export default defineComponent({
     ];
 
     function handleRowClick(item: ReportSummary) {
-      router.push("/group/reports/" + item.id);
+      router.push(`/group/reports/${item.id}`);
     }
 
     function capitalize(str: string) {
diff --git a/frontend/composables/recipe-page/shared-state.ts b/frontend/composables/recipe-page/shared-state.ts
index 78b0a1ad5..bbc040dfb 100644
--- a/frontend/composables/recipe-page/shared-state.ts
+++ b/frontend/composables/recipe-page/shared-state.ts
@@ -151,12 +151,12 @@ export function usePageUser(): { user: UserOut } {
         id: "",
         group: "",
         groupId: "",
+        groupSlug: "",
         cacheKey: "",
         email: "",
       },
     };
   }
 
-  // @ts-expect-error - We know that the API always returns a UserOut, but I'm unsure how to type the $auth to know what type user is
-  return { user: $auth.user as UserOut };
+  return { user: $auth.user };
 }
diff --git a/frontend/composables/recipes/use-recipe-search.ts b/frontend/composables/recipes/use-recipe-search.ts
index cb27062be..e4e0eecd4 100644
--- a/frontend/composables/recipes/use-recipe-search.ts
+++ b/frontend/composables/recipes/use-recipe-search.ts
@@ -1,6 +1,7 @@
 import { Ref, ref } from "@nuxtjs/composition-api";
 import { watchDebounced } from "@vueuse/core";
 import { UserApi } from "~/lib/api";
+import { ExploreApi } from "~/lib/api/public/explore";
 import { Recipe } from "~/lib/api/types/recipe";
 
 export interface UseRecipeSearchReturn {
@@ -17,7 +18,7 @@ export interface UseRecipeSearchReturn {
  * on the query. Useful for searchable list views. For advanced
  * search, use the `useRecipeQuery` composable.
  */
-export function useRecipeSearch(api: UserApi): UseRecipeSearchReturn {
+export function useRecipeSearch(api: UserApi | ExploreApi): UseRecipeSearchReturn {
   const query = ref("");
   const error = ref("");
   const loading = ref(false);
diff --git a/frontend/composables/recipes/use-recipes.ts b/frontend/composables/recipes/use-recipes.ts
index 274a2ab38..afe6acc40 100644
--- a/frontend/composables/recipes/use-recipes.ts
+++ b/frontend/composables/recipes/use-recipes.ts
@@ -1,4 +1,4 @@
-import { useAsync, ref } from "@nuxtjs/composition-api";
+import { useAsync, useRouter, ref } from "@nuxtjs/composition-api";
 import { useAsyncKey } from "../use-utils";
 import { usePublicExploreApi } from "~/composables/api/api-client";
 import { useUserApi } from "~/composables/api";
@@ -9,6 +9,8 @@ export const allRecipes = ref<Recipe[]>([]);
 export const recentRecipes = ref<Recipe[]>([]);
 
 export const useLazyRecipes = function (publicGroupSlug: string | null = null) {
+  const router = useRouter();
+
   // passing the group slug switches to using the public API
   const api = publicGroupSlug ? usePublicExploreApi(publicGroupSlug).explore : useUserApi();
 
@@ -23,7 +25,7 @@ export const useLazyRecipes = function (publicGroupSlug: string | null = null) {
     queryFilter: string | null = null,
   ) {
 
-    const { data } = await api.recipes.getAll(page, perPage, {
+    const { data, error } = await api.recipes.getAll(page, perPage, {
       orderBy,
       orderDirection,
       paginationSeed: query?._searchSeed, // propagate searchSeed to stabilize random order pagination
@@ -40,6 +42,11 @@ export const useLazyRecipes = function (publicGroupSlug: string | null = null) {
       requireAllFoods: query?.requireAllFoods,
       queryFilter,
     });
+
+    if (error?.response?.status === 404) {
+      router.push("/login");
+    }
+
     return data ? data.items : [];
   }
 
diff --git a/frontend/composables/use-logged-in-state.ts b/frontend/composables/use-logged-in-state.ts
new file mode 100644
index 000000000..878fe6925
--- /dev/null
+++ b/frontend/composables/use-logged-in-state.ts
@@ -0,0 +1,17 @@
+import { computed, useContext, useRoute } from "@nuxtjs/composition-api";
+
+export const useLoggedInState = function () {
+  const { $auth } = useContext();
+  const route = useRoute();
+
+  const loggedIn = computed(() => $auth.loggedIn);
+  const isOwnGroup = computed(() => {
+    if (!route.value.params.groupSlug) {
+      return loggedIn.value;
+    } else {
+      return loggedIn.value && $auth.user?.groupSlug === route.value.params.groupSlug;
+    }
+  });
+
+  return { loggedIn, isOwnGroup };
+}
diff --git a/frontend/layouts/default.vue b/frontend/layouts/default.vue
index fd84c4f70..6fe59cabe 100644
--- a/frontend/layouts/default.vue
+++ b/frontend/layouts/default.vue
@@ -9,6 +9,5 @@ import DefaultLayout from "@/components/Layout/DefaultLayout.vue";
 
 export default defineComponent({
   components: { DefaultLayout },
-  middleware: "auth",
 });
 </script>
diff --git a/frontend/layouts/error.vue b/frontend/layouts/error.vue
index 6731482f4..22546b6b4 100644
--- a/frontend/layouts/error.vue
+++ b/frontend/layouts/error.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div v-if="ready">
     <v-card-title>
       <slot>
         <h1 class="mx-auto">{{ $t("page.404-page-not-found") }}</h1>
@@ -28,7 +28,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, useContext, useMeta } from "@nuxtjs/composition-api";
+import { defineComponent, ref, useContext, useMeta, useRoute, useRouter } from "@nuxtjs/composition-api";
 
 export default defineComponent({
   layout: "basic",
@@ -39,7 +39,48 @@ export default defineComponent({
     },
   },
   setup(props) {
-    const { $globals, i18n } = useContext();
+    const { $auth, $globals, i18n } = useContext();
+    const ready = ref(false);
+
+    const route = useRoute();
+    const router = useRouter();
+
+    async function insertGroupSlugIntoRoute() {
+      const groupSlug = ref($auth.user?.groupSlug);
+      if (!groupSlug.value) {
+        return;
+      }
+
+      let replaceRoute = false;
+      let routeVal = route.value.fullPath || "/";
+      if (routeVal[0] !== "/") {
+        routeVal = `/${routeVal}`;
+      }
+
+      // replace "recipe" in URL with "r"
+      if (routeVal.includes("/recipe/")) {
+        replaceRoute = true;
+        routeVal = routeVal.replace("/recipe/", "/r/");
+      }
+
+      // insert groupSlug into URL
+      const routeComponents = routeVal.split("/");
+      if (routeComponents.length < 2 || routeComponents[1].toLowerCase() !== "g") {
+        replaceRoute = true;
+        routeVal = `/g/${groupSlug.value}${routeVal}`;
+      }
+
+      if (replaceRoute) {
+        await router.replace(routeVal);
+      }
+    }
+
+    if (props.error.statusCode === 404) {
+      // see if adding the groupSlug fixes the error
+      insertGroupSlugIntoRoute().then(() => { ready.value = true });
+    } else {
+      ready.value = true;
+    }
 
     useMeta({
       title:
@@ -54,6 +95,7 @@ export default defineComponent({
 
     return {
       buttons,
+      ready,
     };
   },
   // Needed for useMeta
diff --git a/frontend/layouts/explore.vue b/frontend/layouts/explore.vue
deleted file mode 100644
index 6bc10eadd..000000000
--- a/frontend/layouts/explore.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-
-<template>
-    <DefaultLayout />
-  </template>
-
-  <script lang="ts">
-  import { defineComponent } from "@nuxtjs/composition-api";
-  import DefaultLayout from "@/components/Layout/DefaultLayout.vue";
-
-  export default defineComponent({
-    components: { DefaultLayout },
-  });
-  </script>
diff --git a/frontend/lib/api/public/explore/recipes.ts b/frontend/lib/api/public/explore/recipes.ts
index 060ada6e0..8f6aca367 100644
--- a/frontend/lib/api/public/explore/recipes.ts
+++ b/frontend/lib/api/public/explore/recipes.ts
@@ -1,6 +1,8 @@
 import { BaseCRUDAPIReadOnly } from "~/lib/api/base/base-clients";
+import { route } from "../../base";
 import { Recipe } from "~/lib/api/types/recipe";
-import { ApiRequestInstance } from "~/lib/api/types/non-generated";
+import { ApiRequestInstance, PaginationData } from "~/lib/api/types/non-generated";
+import { RecipeSearchQuery } from "../../user/recipes/recipe";
 
 const prefix = "/api";
 
@@ -16,4 +18,8 @@ export class PublicRecipeApi extends BaseCRUDAPIReadOnly<Recipe> {
   constructor(requests: ApiRequestInstance, private readonly groupSlug: string) {
     super(requests);
   }
+
+  async search(rsq: RecipeSearchQuery) {
+    return await this.requests.get<PaginationData<Recipe>>(route(routes.recipesGroupSlug(this.groupSlug), rsq));
+  }
 }
diff --git a/frontend/lib/api/types/user.ts b/frontend/lib/api/types/user.ts
index 6871dbb83..6bba730c5 100644
--- a/frontend/lib/api/types/user.ts
+++ b/frontend/lib/api/types/user.ts
@@ -66,6 +66,7 @@ export interface UserOut {
   canOrganize?: boolean;
   id: string;
   groupId: string;
+  groupSlug: string;
   tokens?: LongLiveTokenOut[];
   cacheKey: string;
 }
@@ -113,6 +114,7 @@ export interface PrivateUser {
   canOrganize?: boolean;
   id: string;
   groupId: string;
+  groupSlug: string;
   tokens?: LongLiveTokenOut[];
   cacheKey: string;
   password: string;
diff --git a/frontend/nuxt.config.js b/frontend/nuxt.config.js
index 818eddb30..21f8cf5f4 100644
--- a/frontend/nuxt.config.js
+++ b/frontend/nuxt.config.js
@@ -342,7 +342,7 @@ export default {
       background_color: "#FFFFFF",
       display: "standalone",
       share_target: {
-        action: "/recipe/create/url",
+        action: "/r/create/url",
         method: "GET",
         params: {
           /* title and url are not currently used in Mealie. If there are issues
diff --git a/frontend/package.json b/frontend/package.json
index fdb73b48e..96f0b6aeb 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -6,7 +6,7 @@
     "dev": "nuxt",
     "build": "nuxt build",
     "start": "nuxt start",
-    "generate": "nuxt generate",
+    "generate": "nuxt generate --spa",
     "lint:js": "eslint --ext \".ts,.js,.vue\" --ignore-path .gitignore .",
     "lint": "yarn lint:js",
     "test": "vitest",
diff --git a/frontend/pages/admin/backups.vue b/frontend/pages/admin/backups.vue
index 9237f7739..d8a32bea2 100644
--- a/frontend/pages/admin/backups.vue
+++ b/frontend/pages/admin/backups.vue
@@ -105,13 +105,13 @@
       </section>
     </section>
     <v-container class="mt-4 d-flex justify-center text-center">
-      <nuxt-link to="/group/migrations"> {{ $t('recipe.looking-for-migrations') }} </nuxt-link>
+      <nuxt-link :to="`/group/migrations`"> {{ $t('recipe.looking-for-migrations') }} </nuxt-link>
     </v-container>
   </v-container>
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, ref, toRefs, useContext, onMounted } from "@nuxtjs/composition-api";
+import { computed, defineComponent, reactive, ref, toRefs, useContext, onMounted, useRoute } from "@nuxtjs/composition-api";
 import { useAdminApi } from "~/composables/api";
 import { AllBackups } from "~/lib/api/types/admin";
 
@@ -119,6 +119,8 @@ export default defineComponent({
   layout: "admin",
   setup() {
     const { i18n, $auth } = useContext();
+    const route = useRoute();
+    const groupSlug = computed(() => route.value.params.groupSlug || $auth.user?.groupSlug || "");
 
     const adminApi = useAdminApi();
     const selected = ref("");
@@ -192,6 +194,7 @@ export default defineComponent({
     onMounted(refreshBackups);
 
     return {
+      groupSlug,
       restoreBackup,
       selected,
       ...toRefs(state),
diff --git a/frontend/pages/admin/manage/users/index.vue b/frontend/pages/admin/manage/users/index.vue
index d36b1e8ec..d2e0bcff4 100644
--- a/frontend/pages/admin/manage/users/index.vue
+++ b/frontend/pages/admin/manage/users/index.vue
@@ -77,7 +77,7 @@ export default defineComponent({
     const refUserDialog = ref();
     const { $auth } = useContext();
 
-    const user = computed(() => $auth.user as UserOut | null);
+    const user = computed(() => $auth.user);
 
     const { $globals, i18n } = useContext();
 
diff --git a/frontend/pages/explore/cookbooks/_groupSlug/_slug.vue b/frontend/pages/explore/cookbooks/_groupSlug/_slug.vue
deleted file mode 100644
index 353877618..000000000
--- a/frontend/pages/explore/cookbooks/_groupSlug/_slug.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<template>
-  <client-only>
-    <CookbookPage :group-slug="groupSlug" />
-  </client-only>
-</template>
-
-  <script lang="ts">
-  import { defineComponent, useRoute } from "@nuxtjs/composition-api";
-  import CookbookPage from "@/components/Domain/Cookbook/CookbookPage.vue";
-
-  export default defineComponent({
-    components: { CookbookPage },
-    layout: "explore",
-    setup() {
-      const route = useRoute();
-      const groupSlug = route.value.params.groupSlug;
-
-      return {
-        groupSlug,
-      }
-    },
-  })
-  </script>
diff --git a/frontend/pages/explore/recipes/_groupSlug/_recipeSlug.vue b/frontend/pages/explore/recipes/_groupSlug/_recipeSlug.vue
deleted file mode 100644
index 59346c724..000000000
--- a/frontend/pages/explore/recipes/_groupSlug/_recipeSlug.vue
+++ /dev/null
@@ -1,47 +0,0 @@
-<template>
-  <div v-if="recipe">
-    <client-only>
-      <RecipePage :recipe="recipe" />
-    </client-only>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, useAsync, useMeta, useRoute, useRouter } from "@nuxtjs/composition-api";
-import RecipePage from "~/components/Domain/Recipe/RecipePage/RecipePage.vue";
-import { usePublicExploreApi } from "~/composables/api/api-client";
-
-export default defineComponent({
-  components: { RecipePage },
-  layout: "explore",
-  setup() {
-    const route = useRoute();
-    const router = useRouter();
-    const groupSlug = route.value.params.groupSlug;
-    const recipeSlug = route.value.params.recipeSlug;
-    const api = usePublicExploreApi(groupSlug);
-
-    const { title } = useMeta();
-
-    const recipe = useAsync(async () => {
-      const { data, error } = await api.explore.recipes.getOne(recipeSlug);
-
-      if (error) {
-        console.error("error loading recipe -> ", error);
-        router.push("/");
-      }
-
-      if (data) {
-        title.value = data?.name || "";
-      }
-
-      return data;
-    });
-
-    return {
-      recipe,
-    };
-  },
-  head: {},
-});
-</script>
diff --git a/frontend/pages/explore/recipes/_groupSlug/index.vue b/frontend/pages/explore/recipes/_groupSlug/index.vue
deleted file mode 100644
index 64eca0efe..000000000
--- a/frontend/pages/explore/recipes/_groupSlug/index.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<template>
-  <div v-if="groupSlug">
-    <client-only>
-      <RecipeExplorerPage :group-slug="groupSlug" />
-    </client-only>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, useRoute, useRouter } from "@nuxtjs/composition-api";
-import { invoke } from "@vueuse/core";
-import RecipeExplorerPage from "~/components/Domain/Recipe/RecipeExplorerPage.vue";
-import { usePublicExploreApi } from "~/composables/api/api-client";
-
-export default defineComponent({
-  components: { RecipeExplorerPage },
-  layout: "explore",
-  setup() {
-    const route = useRoute();
-    const router = useRouter();
-    const groupSlug = route.value.params.groupSlug;
-    const api = usePublicExploreApi(groupSlug);
-
-    invoke(async () => {
-      if (!groupSlug) {
-        return;
-      }
-
-      // try to fetch one tag to make sure the group slug is valid
-      const { data } = await api.explore.tags.getAll(1, 1);
-      if (!data) {
-        // the group slug is invalid, so leave the page (this results in a 404)
-        router.push("/explore/recipes");
-      }
-    });
-
-    return {
-      groupSlug,
-    };
-  },
-});
-</script>
diff --git a/frontend/pages/cookbooks/_slug.vue b/frontend/pages/g/_groupSlug/cookbooks/_slug.vue
similarity index 100%
rename from frontend/pages/cookbooks/_slug.vue
rename to frontend/pages/g/_groupSlug/cookbooks/_slug.vue
diff --git a/frontend/pages/group/cookbooks.vue b/frontend/pages/g/_groupSlug/cookbooks/index.vue
similarity index 93%
rename from frontend/pages/group/cookbooks.vue
rename to frontend/pages/g/_groupSlug/cookbooks/index.vue
index cc8c94c26..86efb3b1c 100644
--- a/frontend/pages/group/cookbooks.vue
+++ b/frontend/pages/g/_groupSlug/cookbooks/index.vue
@@ -90,14 +90,22 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from "@nuxtjs/composition-api";
+import { defineComponent, useRouter } from "@nuxtjs/composition-api";
 import draggable from "vuedraggable";
 import { useCookbooks } from "@/composables/use-group-cookbooks";
+import { useLoggedInState } from "~/composables/use-logged-in-state";
 import RecipeOrganizerSelector from "~/components/Domain/Recipe/RecipeOrganizerSelector.vue";
 
 export default defineComponent({
   components: { draggable, RecipeOrganizerSelector },
   setup() {
+    const { isOwnGroup, loggedIn } = useLoggedInState();
+    const router = useRouter();
+
+    if (!(loggedIn.value && isOwnGroup.value)) {
+      router.back();
+    }
+
     const { cookbooks, actions } = useCookbooks();
 
     return {
diff --git a/frontend/pages/g/_groupSlug/index.vue b/frontend/pages/g/_groupSlug/index.vue
new file mode 100644
index 000000000..532a39576
--- /dev/null
+++ b/frontend/pages/g/_groupSlug/index.vue
@@ -0,0 +1,14 @@
+<template>
+  <div>
+    <RecipeExplorerPage />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "@nuxtjs/composition-api";
+import RecipeExplorerPage from "~/components/Domain/Recipe/RecipeExplorerPage.vue";
+
+export default defineComponent({
+  components: { RecipeExplorerPage },
+});
+</script>
diff --git a/frontend/pages/g/_groupSlug/r/_slug/index.vue b/frontend/pages/g/_groupSlug/r/_slug/index.vue
new file mode 100644
index 000000000..ffdb262ed
--- /dev/null
+++ b/frontend/pages/g/_groupSlug/r/_slug/index.vue
@@ -0,0 +1,59 @@
+<template>
+  <div>
+    <RecipePage v-if="recipe" :recipe="recipe" />
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, ref, useAsync, useContext, useMeta, useRoute, useRouter } from "@nuxtjs/composition-api";
+import { useLoggedInState } from "~/composables/use-logged-in-state";
+import RecipePage from "~/components/Domain/Recipe/RecipePage/RecipePage.vue";
+import { usePublicExploreApi } from "~/composables/api/api-client";
+import { useRecipe } from "~/composables/recipes";
+import { Recipe } from "~/lib/api/types/recipe";
+
+export default defineComponent({
+  components: { RecipePage },
+  setup() {
+    const  { $auth } = useContext();
+    const { isOwnGroup } = useLoggedInState();
+    const route = useRoute();
+    const router = useRouter();
+    const slug = route.value.params.slug;
+
+    const { title } = useMeta();
+
+    let recipe = ref<Recipe | null>(null);
+    if (isOwnGroup.value) {
+      const { recipe: data } = useRecipe(slug);
+      recipe = data;
+    } else {
+      const groupSlug = computed(() => route.value.params.groupSlug || $auth.user?.groupSlug || "")
+      const api = usePublicExploreApi(groupSlug.value);
+      recipe = useAsync(async () => {
+        const { data, error } = await api.explore.recipes.getOne(slug);
+
+        if (error) {
+          console.error("error loading recipe -> ", error);
+          router.push(`/g/${groupSlug.value}`);
+        }
+
+        return data;
+      })
+    }
+
+    title.value = recipe.value?.name || "";
+
+    return {
+      recipe,
+    };
+  },
+  head() {
+    if (this.recipe) {
+      return {
+        title: this.recipe.name
+      }
+    }
+  }
+});
+</script>
diff --git a/frontend/pages/recipe/_slug/ingredient-parser.vue b/frontend/pages/g/_groupSlug/r/_slug/ingredient-parser.vue
similarity index 97%
rename from frontend/pages/recipe/_slug/ingredient-parser.vue
rename to frontend/pages/g/_groupSlug/r/_slug/ingredient-parser.vue
index 2bc91da8e..358a9a25f 100644
--- a/frontend/pages/recipe/_slug/ingredient-parser.vue
+++ b/frontend/pages/g/_groupSlug/r/_slug/ingredient-parser.vue
@@ -94,7 +94,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, useRoute, useRouter } from "@nuxtjs/composition-api";
+import { computed, defineComponent, ref, useContext, useRoute, useRouter } from "@nuxtjs/composition-api";
 import { invoke, until } from "@vueuse/core";
 import {
   CreateIngredientFood,
@@ -124,9 +124,12 @@ export default defineComponent({
     RecipeIngredientEditor,
   },
   setup() {
+    const { $auth } = useContext();
     const panels = ref<number[]>([]);
 
     const route = useRoute();
+    const groupSlug = computed(() => route.value.params.groupSlug || $auth.user?.groupSlug || "");
+
     const router = useRouter();
     const slug = route.value.params.slug;
     const api = useUserApi();
@@ -324,7 +327,7 @@ export default defineComponent({
       const { response } = await api.recipes.updateOne(recipe.value.slug, recipe.value);
 
       if (response?.status === 200) {
-        router.push("/recipe/" + recipe.value.slug);
+        router.push(`/g/${groupSlug.value}/r/${recipe.value.slug}`);
       }
     }
 
diff --git a/frontend/pages/recipe/_slug/ocr-editor.vue b/frontend/pages/g/_groupSlug/r/_slug/ocr-editor.vue
similarity index 100%
rename from frontend/pages/recipe/_slug/ocr-editor.vue
rename to frontend/pages/g/_groupSlug/r/_slug/ocr-editor.vue
diff --git a/frontend/pages/recipe/create.vue b/frontend/pages/g/_groupSlug/r/create.vue
similarity index 86%
rename from frontend/pages/recipe/create.vue
rename to frontend/pages/g/_groupSlug/r/create.vue
index 86350f516..72463ef0f 100644
--- a/frontend/pages/recipe/create.vue
+++ b/frontend/pages/g/_groupSlug/r/create.vue
@@ -20,7 +20,7 @@
 
     <AdvancedOnly>
       <v-container class="d-flex justify-center align-center my-4">
-        <a to="/group/migrations"> {{ $t('recipe.looking-for-migrations') }}</a>
+        <a :to="`/group/migrations`"> {{ $t('recipe.looking-for-migrations') }}</a>
       </v-container>
     </AdvancedOnly>
   </div>
@@ -34,7 +34,7 @@ import AdvancedOnly from "~/components/global/AdvancedOnly.vue";
 export default defineComponent({
   components: { AdvancedOnly },
   setup() {
-    const { $globals, i18n } = useContext();
+    const { $auth, $globals, i18n } = useContext();
 
     const subpages: MenuItem[] = [
       {
@@ -71,10 +71,11 @@ export default defineComponent({
 
     const route = useRoute();
     const router = useRouter();
+    const groupSlug = computed(() => route.value.params.groupSlug || $auth.user?.groupSlug || "");
 
     const subpage = computed({
       set(subpage: string) {
-        router.push({ path: `/recipe/create/${subpage}`, query: route.value.query });
+        router.push({ path: `/g/${groupSlug.value}/r/create/${subpage}`, query: route.value.query });
       },
       get() {
         return route.value.path.split("/").pop() ?? "url";
@@ -82,6 +83,7 @@ export default defineComponent({
     });
 
     return {
+      groupSlug,
       subpages,
       subpage,
     };
diff --git a/frontend/pages/recipe/create/bulk.vue b/frontend/pages/g/_groupSlug/r/create/bulk.vue
similarity index 100%
rename from frontend/pages/recipe/create/bulk.vue
rename to frontend/pages/g/_groupSlug/r/create/bulk.vue
diff --git a/frontend/pages/recipe/create/debug.vue b/frontend/pages/g/_groupSlug/r/create/debug.vue
similarity index 100%
rename from frontend/pages/recipe/create/debug.vue
rename to frontend/pages/g/_groupSlug/r/create/debug.vue
diff --git a/frontend/pages/recipe/create/index.vue b/frontend/pages/g/_groupSlug/r/create/index.vue
similarity index 88%
rename from frontend/pages/recipe/create/index.vue
rename to frontend/pages/g/_groupSlug/r/create/index.vue
index 5e1a787cb..240d15151 100644
--- a/frontend/pages/recipe/create/index.vue
+++ b/frontend/pages/g/_groupSlug/r/create/index.vue
@@ -10,7 +10,7 @@ export default defineComponent({
     const router = useRouter();
     onMounted(() => {
       // Force redirect to first valid page
-      router.replace("/recipe/create/url");
+      router.replace("/r/create/url");
     });
     return {};
   },
diff --git a/frontend/pages/recipe/create/new.vue b/frontend/pages/g/_groupSlug/r/create/new.vue
similarity index 86%
rename from frontend/pages/recipe/create/new.vue
rename to frontend/pages/g/_groupSlug/r/create/new.vue
index ec916b765..42e313e6b 100644
--- a/frontend/pages/recipe/create/new.vue
+++ b/frontend/pages/g/_groupSlug/r/create/new.vue
@@ -35,7 +35,7 @@
   </div>
 </template>
 <script lang="ts">
-import { defineComponent, reactive, toRefs, ref, useRouter } from "@nuxtjs/composition-api";
+import { defineComponent, reactive, toRefs, ref, useContext, useRouter, computed, useRoute } from "@nuxtjs/composition-api";
 import { AxiosResponse } from "axios";
 import { useUserApi } from "~/composables/api";
 import { validators } from "~/composables/use-validators";
@@ -47,6 +47,10 @@ export default defineComponent({
       error: false,
       loading: false,
     });
+    const { $auth } = useContext();
+    const route = useRoute();
+    const groupSlug = computed(() => route.value.params.groupSlug || $auth.user?.groupSlug || "");
+
     const api = useUserApi();
     const router = useRouter();
 
@@ -56,7 +60,7 @@ export default defineComponent({
         state.loading = false;
         return;
       }
-      router.push(`/recipe/${response.data}?edit=${edit.toString()}`);
+      router.push(`/g/${groupSlug.value}/r/${response.data}?edit=${edit.toString()}`);
     }
 
     const newRecipeName = ref("");
diff --git a/frontend/pages/recipe/create/ocr.vue b/frontend/pages/g/_groupSlug/r/create/ocr.vue
similarity index 86%
rename from frontend/pages/recipe/create/ocr.vue
rename to frontend/pages/g/_groupSlug/r/create/ocr.vue
index d69727852..63acd2b61 100644
--- a/frontend/pages/recipe/create/ocr.vue
+++ b/frontend/pages/g/_groupSlug/r/create/ocr.vue
@@ -32,7 +32,7 @@
   </div>
 </template>
 <script lang="ts">
-import { defineComponent, reactive, toRefs, ref, useRouter } from "@nuxtjs/composition-api";
+import { defineComponent, reactive, toRefs, ref, useRouter, computed, useContext, useRoute } from "@nuxtjs/composition-api";
 import { AxiosResponse } from "axios";
 import { useUserApi } from "~/composables/api";
 import { validators } from "~/composables/use-validators";
@@ -45,6 +45,10 @@ export default defineComponent({
       loading: false,
       makeFileRecipeImage: false,
     });
+    const { $auth } = useContext();
+    const route = useRoute();
+    const groupSlug = computed(() => route.value.params.groupSlug || $auth.user?.groupSlug || "");
+
     const api = useUserApi();
     const router = useRouter();
 
@@ -56,7 +60,7 @@ export default defineComponent({
         state.loading = false;
         return;
       }
-      router.push(`/recipe/${response.data}/ocr-editor`);
+      router.push(`/g/${groupSlug.value}/r/${response.data}/ocr-editor`);
     }
 
     const domCreateByOcr = ref<VForm | null>(null);
diff --git a/frontend/pages/recipe/create/url.vue b/frontend/pages/g/_groupSlug/r/create/url.vue
similarity index 95%
rename from frontend/pages/recipe/create/url.vue
rename to frontend/pages/g/_groupSlug/r/create/url.vue
index fb3f53bbf..e04265600 100644
--- a/frontend/pages/recipe/create/url.vue
+++ b/frontend/pages/g/_groupSlug/r/create/url.vue
@@ -69,6 +69,7 @@ import {
   ref,
   useRouter,
   computed,
+  useContext,
   useRoute,
   onMounted,
 } from "@nuxtjs/composition-api";
@@ -85,8 +86,11 @@ export default defineComponent({
       loading: false,
     });
 
+    const { $auth } = useContext();
     const api = useUserApi();
     const route = useRoute();
+    const groupSlug = computed(() => route.value.params.groupSlug || $auth.user?.groupSlug || "");
+
     const router = useRouter();
     const tags = useTagStore();
 
@@ -99,7 +103,7 @@ export default defineComponent({
       if (refreshTags) {
         tags.actions.refresh();
       }
-      router.push(`/recipe/${response.data}?edit=${edit.toString()}`);
+      router.push(`/g/${groupSlug.value}/r/${response.data}?edit=${edit.toString()}`);
     }
 
     const recipeUrl = computed({
diff --git a/frontend/pages/recipe/create/zip.vue b/frontend/pages/g/_groupSlug/r/create/zip.vue
similarity index 84%
rename from frontend/pages/recipe/create/zip.vue
rename to frontend/pages/g/_groupSlug/r/create/zip.vue
index ef2feaa3f..e0c57ea79 100644
--- a/frontend/pages/recipe/create/zip.vue
+++ b/frontend/pages/g/_groupSlug/r/create/zip.vue
@@ -30,7 +30,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, toRefs, ref, useRouter } from "@nuxtjs/composition-api";
+import { computed, defineComponent, reactive, toRefs, ref, useContext, useRoute, useRouter } from "@nuxtjs/composition-api";
 import { AxiosResponse } from "axios";
 import { useUserApi } from "~/composables/api";
 import { validators } from "~/composables/use-validators";
@@ -41,6 +41,10 @@ export default defineComponent({
       error: false,
       loading: false,
     });
+    const { $auth } = useContext();
+    const route = useRoute();
+    const groupSlug = computed(() => route.value.params.groupSlug || $auth.user?.groupSlug || "");
+
     const api = useUserApi();
     const router = useRouter();
 
@@ -50,7 +54,7 @@ export default defineComponent({
         state.loading = false;
         return;
       }
-      router.push(`/recipe/${response.data}?edit=${edit.toString()}`);
+      router.push(`/g/${groupSlug.value}/r/${response.data}?edit=${edit.toString()}`);
     }
 
     const newRecipeZip = ref<File | null>(null);
diff --git a/frontend/pages/recipes/categories/index.vue b/frontend/pages/g/_groupSlug/recipes/categories/index.vue
similarity index 100%
rename from frontend/pages/recipes/categories/index.vue
rename to frontend/pages/g/_groupSlug/recipes/categories/index.vue
diff --git a/frontend/pages/recipes/tags/index.vue b/frontend/pages/g/_groupSlug/recipes/tags/index.vue
similarity index 100%
rename from frontend/pages/recipes/tags/index.vue
rename to frontend/pages/g/_groupSlug/recipes/tags/index.vue
diff --git a/frontend/pages/group/timeline.vue b/frontend/pages/g/_groupSlug/recipes/timeline.vue
similarity index 100%
rename from frontend/pages/group/timeline.vue
rename to frontend/pages/g/_groupSlug/recipes/timeline.vue
diff --git a/frontend/pages/recipes/tools/index.vue b/frontend/pages/g/_groupSlug/recipes/tools/index.vue
similarity index 100%
rename from frontend/pages/recipes/tools/index.vue
rename to frontend/pages/g/_groupSlug/recipes/tools/index.vue
diff --git a/frontend/pages/shared/recipes/_id.vue b/frontend/pages/g/_groupSlug/shared/r/_id.vue
similarity index 75%
rename from frontend/pages/shared/recipes/_id.vue
rename to frontend/pages/g/_groupSlug/shared/r/_id.vue
index bb451cbd5..fe4195adc 100644
--- a/frontend/pages/shared/recipes/_id.vue
+++ b/frontend/pages/g/_groupSlug/shared/r/_id.vue
@@ -7,7 +7,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, useAsync, useMeta, useRoute, useRouter } from "@nuxtjs/composition-api";
+import { computed, defineComponent, useAsync, useContext, useMeta, useRoute, useRouter } from "@nuxtjs/composition-api";
 import RecipePage from "~/components/Domain/Recipe/RecipePage/RecipePage.vue";
 import { usePublicApi } from "~/composables/api/api-client";
 
@@ -15,7 +15,10 @@ export default defineComponent({
   components: { RecipePage },
   layout: "basic",
   setup() {
+    const { $auth } = useContext();
     const route = useRoute();
+    const groupSlug = computed(() => route.value.params.groupSlug || $auth.user?.groupSlug || "");
+
     const router = useRouter();
     const recipeId = route.value.params.id;
     const api = usePublicApi();
@@ -27,7 +30,7 @@ export default defineComponent({
 
       if (error) {
         console.error("error loading recipe -> ", error);
-        router.push("/");
+        router.push(`/g/${groupSlug.value}`);
       }
 
       if (data) {
diff --git a/frontend/pages/group/data.vue b/frontend/pages/group/data.vue
index 941a542f5..70349df32 100644
--- a/frontend/pages/group/data.vue
+++ b/frontend/pages/group/data.vue
@@ -46,7 +46,9 @@ export default defineComponent({
       labels: i18n.tc("data-pages.labels.labels"),
     };
 
-    const DATA_TYPE_OPTIONS = [
+    const route = useRoute();
+
+    const DATA_TYPE_OPTIONS = computed(() => [
       {
         text: i18n.t("general.recipes"),
         value: "new",
@@ -67,9 +69,7 @@ export default defineComponent({
         value: "new",
         to: "/group/data/labels",
       },
-    ];
-
-    const route = useRoute();
+    ]);
 
     const buttonText = computed(() => {
       const last = route.value.path.split("/").pop();
diff --git a/frontend/pages/group/mealplan/planner.vue b/frontend/pages/group/mealplan/planner.vue
index 848f11b5d..c1de6fd5d 100644
--- a/frontend/pages/group/mealplan/planner.vue
+++ b/frontend/pages/group/mealplan/planner.vue
@@ -26,10 +26,10 @@
 
     <div class="d-flex align-center justify-space-between mb-2">
       <v-tabs>
-        <v-tab to="/group/mealplan/planner/view">{{ $t('meal-plan.meal-planner') }}</v-tab>
-        <v-tab to="/group/mealplan/planner/edit">{{ $t('general.edit') }}</v-tab>
+        <v-tab :to="`/group/mealplan/planner/view`">{{ $t('meal-plan.meal-planner') }}</v-tab>
+        <v-tab :to="`/group/mealplan/planner/edit`">{{ $t('general.edit') }}</v-tab>
       </v-tabs>
-      <ButtonLink :icon="$globals.icons.calendar" to="/group/mealplan/settings" :text="$tc('general.settings')" />
+      <ButtonLink :icon="$globals.icons.calendar" :to="`/group/mealplan/settings`" :text="$tc('general.settings')" />
     </div>
 
     <div>
diff --git a/frontend/pages/group/members.vue b/frontend/pages/group/members.vue
index 7cc686fed..539a67d4e 100644
--- a/frontend/pages/group/members.vue
+++ b/frontend/pages/group/members.vue
@@ -14,7 +14,7 @@
           </template>
         </i18n>
         <v-container class="mt-1 px-0">
-        <nuxt-link class="text-center" to="/user/profile/edit"> {{ $t('group.looking-to-update-your-profile') }} </nuxt-link>
+        <nuxt-link class="text-center" :to="`/user/profile/edit`"> {{ $t('group.looking-to-update-your-profile') }} </nuxt-link>
       </v-container>
       </BasePageTitle>
     <v-data-table
diff --git a/frontend/pages/index.vue b/frontend/pages/index.vue
index 7cc625c0d..0fa12543b 100644
--- a/frontend/pages/index.vue
+++ b/frontend/pages/index.vue
@@ -1,29 +1,21 @@
 <template>
-  <div v-if="groupSlug">
-    <RecipeExplorerPage :group-slug="groupSlug" />
-  </div>
+  <div></div>
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from "@nuxtjs/composition-api";
-import { invoke } from "@vueuse/core";
-import { useUserApi } from "~/composables/api/api-client";
-import RecipeExplorerPage from "~/components/Domain/Recipe/RecipeExplorerPage.vue";
-
+import { computed, defineComponent, useContext, useRouter } from "@nuxtjs/composition-api";
 export default defineComponent({
-  components: { RecipeExplorerPage },
+  layout: "blank",
   setup() {
-    const api = useUserApi();
-    const groupSlug = ref<string>();
+    const { $auth } = useContext();
+    const router = useRouter();
+    const groupSlug = computed(() => $auth.user?.groupSlug);
 
-    invoke(async () => {
-      const { data } = await api.users.getSelfGroup();
-      groupSlug.value = data?.slug;
-    });
-
-    return {
-      groupSlug,
-    };
-  },
+    if (groupSlug.value) {
+      router.push(`/g/${groupSlug.value}`);
+    } else {
+      router.push("/login");
+    }
+  }
 });
 </script>
diff --git a/frontend/pages/login.vue b/frontend/pages/login.vue
index 9118e4340..546b44720 100644
--- a/frontend/pages/login.vue
+++ b/frontend/pages/login.vue
@@ -103,6 +103,7 @@
 <script lang="ts">
 import { defineComponent, ref, useContext, computed, reactive, useRouter } from "@nuxtjs/composition-api";
 import { useDark, whenever } from "@vueuse/core";
+import { useLoggedInState } from "~/composables/use-logged-in-state";
 import { useAppInfo } from "~/composables/api";
 import { usePasswordField } from "~/composables/use-passwords";
 import { alert } from "~/composables/use-toast";
@@ -115,11 +116,13 @@ export default defineComponent({
 
     const router = useRouter();
     const { $auth, i18n } = useContext();
+    const { loggedIn } = useLoggedInState();
+    const groupSlug = computed(() => $auth.user?.groupSlug);
 
     whenever(
-      () => $auth.loggedIn,
+      () => loggedIn.value && groupSlug.value,
       () => {
-        router.push("/");
+        router.push(`/g/${groupSlug.value || ""}`);
       },
       { immediate: true },
     );
diff --git a/frontend/pages/recipe/_slug/index.vue b/frontend/pages/recipe/_slug/index.vue
deleted file mode 100644
index 441652ddb..000000000
--- a/frontend/pages/recipe/_slug/index.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<template>
-  <div>
-    <RecipePage v-if="recipe" :recipe="recipe" />
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, useRoute } from "@nuxtjs/composition-api";
-import RecipePage from "~/components/Domain/Recipe/RecipePage/RecipePage.vue";
-import { useRecipe } from "~/composables/recipes";
-
-export default defineComponent({
-  components: { RecipePage },
-  setup() {
-    const route = useRoute();
-    const slug = route.value.params.slug;
-
-    const { recipe, loading } = useRecipe(slug);
-
-    return {
-      recipe,
-      loading,
-    };
-  },
-  head() {
-    if (this.recipe) {
-      return {
-        title: this.recipe.name
-      }
-    }
-  }
-});
-</script>
diff --git a/frontend/pages/shopping-lists/_id.vue b/frontend/pages/shopping-lists/_id.vue
index 4b94f7a68..8c7dd9f31 100644
--- a/frontend/pages/shopping-lists/_id.vue
+++ b/frontend/pages/shopping-lists/_id.vue
@@ -199,7 +199,7 @@
 
     <v-lazy>
       <div class="d-flex justify-end mt-10">
-        <ButtonLink to="/group/data/labels" :text="$tc('shopping-list.manage-labels')" :icon="$globals.icons.tags" />
+        <ButtonLink :to="`/group/data/labels`" :text="$tc('shopping-list.manage-labels')" :icon="$globals.icons.tags" />
       </div>
     </v-lazy>
   </v-container>
@@ -236,6 +236,7 @@ export default defineComponent({
     ShoppingListItemEditor,
   },
   setup() {
+    const { $auth, i18n } = useContext();
     const preferences = useShoppingListPreferences();
 
     const { idle } = useIdle(5 * 60 * 1000) // 5 minutes
@@ -247,10 +248,9 @@ export default defineComponent({
     const reorderLabelsDialog = ref(false);
 
     const route = useRoute();
+    const groupSlug = computed(() => route.value.params.groupSlug || $auth.user?.groupSlug || "");
     const id = route.value.params.id;
 
-    const { i18n } = useContext();
-
     // ===============================================================
     // Shopping List Actions
 
@@ -755,6 +755,7 @@ export default defineComponent({
       deleteListItem,
       edit,
       getLabelColor,
+      groupSlug,
       itemsByLabel,
       listItems,
       loadingCounter,
diff --git a/frontend/pages/shopping-lists/index.vue b/frontend/pages/shopping-lists/index.vue
index 85b1e1fd3..fecbbe4e6 100644
--- a/frontend/pages/shopping-lists/index.vue
+++ b/frontend/pages/shopping-lists/index.vue
@@ -33,19 +33,22 @@
       </v-card>
     </section>
     <div class="d-flex justify-end mt-10">
-      <ButtonLink to="/group/data/labels" :text="$tc('shopping-list.manage-labels')" :icon="$globals.icons.tags" />
+      <ButtonLink :to="`/group/data/labels`" :text="$tc('shopping-list.manage-labels')" :icon="$globals.icons.tags" />
     </div>
   </v-container>
 </template>
 
 <script lang="ts">
-import { defineComponent, useAsync, reactive, toRefs } from "@nuxtjs/composition-api";
+import { computed, defineComponent, useAsync, useContext, reactive, toRefs, useRoute } from "@nuxtjs/composition-api";
 import { useUserApi } from "~/composables/api";
 import { useAsyncKey } from "~/composables/use-utils";
 
 export default defineComponent({
   setup() {
+    const { $auth } = useContext();
     const userApi = useUserApi();
+    const route = useRoute();
+    const groupSlug = computed(() => route.value.params.groupSlug || $auth.user?.groupSlug || "");
 
     const state = reactive({
       createName: "",
@@ -95,6 +98,7 @@ export default defineComponent({
 
     return {
       ...toRefs(state),
+      groupSlug,
       shoppingLists,
       createOne,
       deleteOne,
diff --git a/frontend/pages/user/_id/favorites.vue b/frontend/pages/user/_id/favorites.vue
index 103272c0f..ec4e5c8fd 100644
--- a/frontend/pages/user/_id/favorites.vue
+++ b/frontend/pages/user/_id/favorites.vue
@@ -1,6 +1,6 @@
 <template>
   <v-container>
-    <RecipeCardSection v-if="user" :icon="$globals.icons.heart" :title="$tc('user.user-favorites')" :recipes="user.favoriteRecipes">
+    <RecipeCardSection v-if="user && isOwnGroup" :icon="$globals.icons.heart" :title="$tc('user.user-favorites')" :recipes="user.favoriteRecipes">
     </RecipeCardSection>
   </v-container>
 </template>
@@ -8,6 +8,7 @@
 <script lang="ts">
 import { defineComponent, useAsync, useRoute } from "@nuxtjs/composition-api";
 import RecipeCardSection from "~/components/Domain/Recipe/RecipeCardSection.vue";
+import { useLoggedInState } from "~/composables/use-logged-in-state";
 import { useUserApi } from "~/composables/api";
 import { useAsyncKey } from "~/composables/use-utils";
 
@@ -16,6 +17,7 @@ export default defineComponent({
   setup() {
     const api = useUserApi();
     const route = useRoute();
+    const { isOwnGroup } = useLoggedInState();
 
     const userId = route.value.params.id;
 
@@ -26,6 +28,7 @@ export default defineComponent({
 
     return {
       user,
+      isOwnGroup,
     };
   },
   head() {
diff --git a/frontend/pages/user/_id/profile.vue b/frontend/pages/user/_id/profile.vue
index 77ea9841e..364a7d461 100644
--- a/frontend/pages/user/_id/profile.vue
+++ b/frontend/pages/user/_id/profile.vue
@@ -1,7 +1,7 @@
 <template>
   <div></div>
 </template>
-  
+
   <script lang="ts">
 import { defineComponent } from "@nuxtjs/composition-api";
 
@@ -16,6 +16,6 @@ export default defineComponent({
   },
 });
 </script>
-  
+
   <style scoped>
-</style>
\ No newline at end of file
+</style>
diff --git a/frontend/pages/user/profile/edit.vue b/frontend/pages/user/profile/edit.vue
index a590bfe59..3eadc87ed 100644
--- a/frontend/pages/user/profile/edit.vue
+++ b/frontend/pages/user/profile/edit.vue
@@ -108,9 +108,9 @@
         :label="$t('profile.show-advanced-description')"
         @change="updateUser"
       ></v-checkbox>
-      <nuxt-link class="mt-5 d-flex flex-column justify-center text-center" to="/group"> {{ $t('profile.looking-for-privacy-settings') }} </nuxt-link>
+      <nuxt-link class="mt-5 d-flex flex-column justify-center text-center" :to="`/group`"> {{ $t('profile.looking-for-privacy-settings') }} </nuxt-link>
       <div class="d-flex flex-wrap justify-center mt-5">
-        <v-btn outlined class="rounded-xl my-1 mx-1" to="/user/profile" nuxt exact>
+        <v-btn outlined class="rounded-xl my-1 mx-1" :to="`/user/profile`" nuxt exact>
           <v-icon left>
             {{ $globals.icons.backArrow }}
           </v-icon>
diff --git a/frontend/pages/user/profile/index.vue b/frontend/pages/user/profile/index.vue
index 93764d9ab..1e5a4331f 100644
--- a/frontend/pages/user/profile/index.vue
+++ b/frontend/pages/user/profile/index.vue
@@ -16,17 +16,6 @@
             </v-icon>
             {{ $t('profile.get-invite-link') }}
           </v-btn>
-          <v-btn
-            v-if="group && group.preferences && !group.preferences.privateGroup"
-            outlined
-            rounded
-            @click="getPublicLink()"
-          >
-            <v-icon left>
-              {{ $globals.icons.shareVariant }}
-            </v-icon>
-            {{ $t('profile.get-public-link') }}
-          </v-btn>
         </v-card-actions>
         <div v-show="generatedSignupLink !== ''">
           <v-card-text>
@@ -114,7 +103,7 @@
       <v-row tag="section">
         <v-col cols="12" sm="12" md="6">
           <UserProfileLinkCard
-            :link="{ text: $tc('profile.manage-user-profile'), to: '/user/profile/edit' }"
+            :link="{ text: $tc('profile.manage-user-profile'), to: `/user/profile/edit` }"
             :image="require('~/static/svgs/manage-profile.svg')"
           >
             <template #title> {{ $t('profile.user-settings') }} </template>
@@ -124,7 +113,7 @@
         <AdvancedOnly>
           <v-col cols="12" sm="12" md="6">
             <UserProfileLinkCard
-              :link="{ text: $tc('profile.manage-your-api-tokens'), to: '/user/profile/api-tokens' }"
+              :link="{ text: $tc('profile.manage-your-api-tokens'), to: `/user/profile/api-tokens` }"
               :image="require('~/static/svgs/manage-api-tokens.svg')"
             >
               <template #title> {{ $t('settings.token.api-tokens') }} </template>
@@ -143,7 +132,7 @@
       <v-row tag="section">
         <v-col cols="12" sm="12" md="6">
           <UserProfileLinkCard
-            :link="{ text: $tc('profile.group-settings'), to: '/group' }"
+            :link="{ text: $tc('profile.group-settings'), to: `/group` }"
             :image="require('~/static/svgs/manage-group-settings.svg')"
           >
             <template #title> {{ $t('profile.group-settings') }} </template>
@@ -152,7 +141,7 @@
         </v-col>
         <v-col cols="12" sm="12" md="6">
           <UserProfileLinkCard
-            :link="{ text: $tc('profile.manage-cookbooks'), to: '/group/cookbooks' }"
+            :link="{ text: $tc('profile.manage-cookbooks'), to: `/g/${groupSlug}/cookbooks` }"
             :image="require('~/static/svgs/manage-cookbooks.svg')"
           >
             <template #title> {{ $t('sidebar.cookbooks') }} </template>
@@ -161,7 +150,7 @@
         </v-col>
         <v-col v-if="user.canManage" cols="12" sm="12" md="6">
           <UserProfileLinkCard
-            :link="{ text: $tc('profile.manage-members'), to: '/group/members' }"
+            :link="{ text: $tc('profile.manage-members'), to: `/group/members` }"
             :image="require('~/static/svgs/manage-members.svg')"
           >
             <template #title> {{ $t('profile.members') }} </template>
@@ -171,7 +160,7 @@
         <AdvancedOnly>
           <v-col v-if="user.advanced" cols="12" sm="12" md="6">
             <UserProfileLinkCard
-              :link="{ text: $tc('profile.manage-webhooks'), to: '/group/webhooks' }"
+              :link="{ text: $tc('profile.manage-webhooks'), to: `/group/webhooks` }"
               :image="require('~/static/svgs/manage-webhooks.svg')"
             >
               <template #title> {{ $t('settings.webhooks.webhooks') }} </template>
@@ -182,7 +171,7 @@
         <AdvancedOnly>
           <v-col cols="12" sm="12" md="6">
             <UserProfileLinkCard
-              :link="{ text: $tc('profile.manage-notifiers'), to: '/group/notifiers' }"
+              :link="{ text: $tc('profile.manage-notifiers'), to: `/group/notifiers` }"
               :image="require('~/static/svgs/manage-notifiers.svg')"
             >
               <template #title> {{ $t('profile.notifiers') }} </template>
@@ -193,7 +182,7 @@
         <AdvancedOnly>
           <v-col cols="12" sm="12" md="6">
             <UserProfileLinkCard
-              :link="{ text: $tc('profile.manage-data'), to: '/group/data/foods' }"
+              :link="{ text: $tc('profile.manage-data'), to: `/group/data/foods` }"
               :image="require('~/static/svgs/manage-recipes.svg')"
             >
               <template #title> {{ $t('profile.manage-data') }} </template>
@@ -204,7 +193,7 @@
         <AdvancedOnly>
           <v-col cols="12" sm="12" md="6">
             <UserProfileLinkCard
-              :link="{ text: $tc('profile.manage-data-migrations'), to: '/group/migrations' }"
+              :link="{ text: $tc('profile.manage-data-migrations'), to: `/group/migrations` }"
               :image="require('~/static/svgs/manage-data-migrations.svg')"
             >
               <template #title>{{ $t('profile.data-migrations') }} </template>
@@ -218,7 +207,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, useContext, ref, toRefs, reactive, useAsync } from "@nuxtjs/composition-api";
+import { computed, defineComponent, useContext, ref, toRefs, reactive, useAsync, useRoute } from "@nuxtjs/composition-api";
 import { invoke, until } from "@vueuse/core";
 import UserProfileLinkCard from "@/components/Domain/User/UserProfileLinkCard.vue";
 import { useUserApi } from "~/composables/api";
@@ -239,6 +228,8 @@ export default defineComponent({
   scrollToTop: true,
   setup() {
     const { $auth, i18n } = useContext();
+    const route = useRoute();
+    const groupSlug = computed(() => route.value.params.groupSlug || $auth.user?.groupSlug || "");
 
     // @ts-ignore $auth.user is typed as unknown, but it's a user
     const user = computed<UserOut | null>(() => $auth.user);
@@ -261,14 +252,6 @@ export default defineComponent({
       group.value = data;
     });
 
-    function getPublicLink() {
-      if (group.value) {
-        publicLink.value = `${window.location.origin}/explore/recipes/${group.value.slug}`
-        showPublicLink.value = true;
-        generatedSignupLink.value = "";
-      }
-    }
-
     async function getSignupLink() {
       const { data } = await api.groups.createInvitation({ uses: 1 });
       if (data) {
@@ -350,16 +333,16 @@ export default defineComponent({
       return iconText[key] ?? $globals.icons.primary;
     }
 
-    const statsTo: { [key: string]: string } = {
-      totalRecipes: "/",
+    const statsTo = computed<{ [key: string]: string }>(() => { return {
+      totalRecipes: `/g/${groupSlug.value}/`,
       totalUsers: "/group/members",
-      totalCategories: "/recipes/categories",
-      totalTags: "/recipes/tags",
-      totalTools: "/recipes/tools",
-    };
+      totalCategories: `/g/${groupSlug.value}/recipes/categories`,
+      totalTags: `/g/${groupSlug.value}/recipes/tags`,
+      totalTools: `/g/${groupSlug.value}/recipes/tools`,
+    }});
 
     function getStatsTo(key: string) {
-      return statsTo[key] ?? "unknown";
+      return statsTo.value[key] ?? "unknown";
     }
 
     const storage = useAsync(async () => {
@@ -386,6 +369,7 @@ export default defineComponent({
     });
 
     return {
+      groupSlug,
       storageText,
       storageUsedPercentage,
       getStatsTitle,
@@ -399,7 +383,6 @@ export default defineComponent({
       showPublicLink,
       publicLink,
       getSignupLink,
-      getPublicLink,
       sendInvite,
       validators,
       validEmail,
diff --git a/frontend/plugins/globals.ts b/frontend/plugins/globals.ts
index 1efc50486..671ac60bf 100644
--- a/frontend/plugins/globals.ts
+++ b/frontend/plugins/globals.ts
@@ -1,6 +1,7 @@
 import { Plugin } from "@nuxt/types";
-import { Auth } from "@nuxtjs/auth-next";
+import { Auth as NuxtAuth } from "@nuxtjs/auth-next";
 import { Framework } from "vuetify";
+import { UserOut } from "~/lib/api/types/user";
 import { icons } from "~/lib/icons";
 import { Icon } from "~/lib/icons/icon-type";
 
@@ -15,6 +16,11 @@ declare module "vue/types/vue" {
 }
 
 declare module "@nuxt/types" {
+  // @ts-ignore https://github.com/nuxt-community/auth-module/issues/1097#issuecomment-840249428
+  interface Auth extends NuxtAuth {
+    user: UserOut | null;
+  }
+
   interface Context {
     $globals: Globals;
     $vuetify: Framework;
diff --git a/mealie/core/dependencies/dependencies.py b/mealie/core/dependencies/dependencies.py
index 17320352c..da55d6f12 100644
--- a/mealie/core/dependencies/dependencies.py
+++ b/mealie/core/dependencies/dependencies.py
@@ -58,7 +58,7 @@ async def get_public_group(group_slug: str = fastapi.Path(...), session=Depends(
     repos = get_repositories(session)
     group = repos.groups.get_by_slug_or_id(group_slug)
 
-    if not group or group.preferences.private_group:
+    if not group or group.preferences.private_group or not group.preferences.recipe_public:
         raise HTTPException(404, "group not found")
     else:
         return group
diff --git a/mealie/db/models/users/users.py b/mealie/db/models/users/users.py
index 5252785c7..3e913b789 100644
--- a/mealie/db/models/users/users.py
+++ b/mealie/db/models/users/users.py
@@ -3,6 +3,7 @@ from datetime import datetime
 from typing import TYPE_CHECKING, Optional
 
 from sqlalchemy import Boolean, DateTime, Enum, ForeignKey, Integer, String, orm
+from sqlalchemy.ext.hybrid import hybrid_property
 from sqlalchemy.orm import Mapped, mapped_column
 
 from mealie.core.config import get_app_settings
@@ -94,6 +95,10 @@ class User(SqlAlchemyBase, BaseMixins):
             "group",
         }
 
+    @hybrid_property
+    def group_slug(self) -> str:
+        return self.group.slug
+
     @auto_init()
     def __init__(self, session, full_name, password, group: str | None = None, **kwargs) -> None:
         if group is None:
diff --git a/mealie/routes/recipe/recipe_crud_routes.py b/mealie/routes/recipe/recipe_crud_routes.py
index 2cb65babc..bace402eb 100644
--- a/mealie/routes/recipe/recipe_crud_routes.py
+++ b/mealie/routes/recipe/recipe_crud_routes.py
@@ -187,7 +187,7 @@ class RecipeController(BaseRecipeController):
                 message=self.t(
                     "notifications.generic-created-with-url",
                     name=new_recipe.name,
-                    url=urls.recipe_url(new_recipe.slug, self.settings.BASE_URL),
+                    url=urls.recipe_url(self.group.slug, new_recipe.slug, self.settings.BASE_URL),
                 ),
             )
 
@@ -306,7 +306,7 @@ class RecipeController(BaseRecipeController):
                 message=self.t(
                     "notifications.generic-created-with-url",
                     name=new_recipe.name,
-                    url=urls.recipe_url(new_recipe.slug, self.settings.BASE_URL),
+                    url=urls.recipe_url(self.group.slug, new_recipe.slug, self.settings.BASE_URL),
                 ),
             )
 
@@ -347,7 +347,7 @@ class RecipeController(BaseRecipeController):
                 message=self.t(
                     "notifications.generic-updated-with-url",
                     name=recipe.name,
-                    url=urls.recipe_url(recipe.slug, self.settings.BASE_URL),
+                    url=urls.recipe_url(self.group.slug, recipe.slug, self.settings.BASE_URL),
                 ),
             )
 
@@ -368,7 +368,7 @@ class RecipeController(BaseRecipeController):
                 message=self.t(
                     "notifications.generic-updated-with-url",
                     name=recipe.name,
-                    url=urls.recipe_url(recipe.slug, self.settings.BASE_URL),
+                    url=urls.recipe_url(self.group.slug, recipe.slug, self.settings.BASE_URL),
                 ),
             )
 
@@ -390,7 +390,7 @@ class RecipeController(BaseRecipeController):
                 message=self.t(
                     "notifications.generic-updated-with-url",
                     name=recipe.name,
-                    url=urls.recipe_url(recipe.slug, self.settings.BASE_URL),
+                    url=urls.recipe_url(self.group.slug, recipe.slug, self.settings.BASE_URL),
                 ),
             )
 
diff --git a/mealie/routes/recipe/timeline_events.py b/mealie/routes/recipe/timeline_events.py
index 958a75fb6..e9a1a2ed6 100644
--- a/mealie/routes/recipe/timeline_events.py
+++ b/mealie/routes/recipe/timeline_events.py
@@ -72,7 +72,7 @@ class RecipeTimelineEventsController(BaseCrudController):
             message=self.t(
                 "notifications.generic-updated-with-url",
                 name=recipe.name,
-                url=urls.recipe_url(recipe.slug, self.settings.BASE_URL),
+                url=urls.recipe_url(self.group.slug, recipe.slug, self.settings.BASE_URL),
             ),
         )
 
@@ -95,7 +95,7 @@ class RecipeTimelineEventsController(BaseCrudController):
                 message=self.t(
                     "notifications.generic-updated-with-url",
                     name=recipe.name,
-                    url=urls.recipe_url(recipe.slug, self.settings.BASE_URL),
+                    url=urls.recipe_url(self.group.slug, recipe.slug, self.settings.BASE_URL),
                 ),
             )
 
@@ -120,7 +120,7 @@ class RecipeTimelineEventsController(BaseCrudController):
                 message=self.t(
                     "notifications.generic-updated-with-url",
                     name=recipe.name,
-                    url=urls.recipe_url(recipe.slug, self.settings.BASE_URL),
+                    url=urls.recipe_url(self.group.slug, recipe.slug, self.settings.BASE_URL),
                 ),
             )
 
@@ -148,7 +148,7 @@ class RecipeTimelineEventsController(BaseCrudController):
                     message=self.t(
                         "notifications.generic-updated-with-url",
                         name=recipe.name,
-                        url=urls.recipe_url(recipe.slug, self.settings.BASE_URL),
+                        url=urls.recipe_url(self.group.slug, recipe.slug, self.settings.BASE_URL),
                     ),
                 )
 
diff --git a/mealie/routes/spa/__init__.py b/mealie/routes/spa/__init__.py
index a5490239d..357fea085 100644
--- a/mealie/routes/spa/__init__.py
+++ b/mealie/routes/spa/__init__.py
@@ -33,9 +33,9 @@ __app_settings = get_app_settings()
 __contents = ""
 
 
-def content_with_meta(recipe: Recipe) -> str:
+def content_with_meta(group_slug: str, recipe: Recipe) -> str:
     # Inject meta tags
-    recipe_url = f"{__app_settings.BASE_URL}/recipe/{recipe.slug}"
+    recipe_url = f"{__app_settings.BASE_URL}/g/{group_slug}/r/{recipe.slug}"
     image_url = f"{__app_settings.BASE_URL}/api/media/recipes/{recipe.id}/images/original.webp?version={recipe.image}"
 
     ingredients: list[str] = []
@@ -122,28 +122,29 @@ def serve_recipe_with_meta_public(
             return response_404()
 
         # Inject meta tags
-        return Response(content_with_meta(recipe), media_type="text/html")
+        return Response(content_with_meta(group_slug, recipe), media_type="text/html")
     except Exception:
         return response_404()
 
 
 async def serve_recipe_with_meta(
-    slug: str,
-    user: PrivateUser = Depends(try_get_current_user),
+    group_slug: str,
+    recipe_slug: str,
+    user: PrivateUser | None = Depends(try_get_current_user),
     session: Session = Depends(generate_session),
 ):
     if not user:
-        return Response(__contents, media_type="text/html", status_code=401)
+        return serve_recipe_with_meta_public(group_slug, recipe_slug, session)
 
     try:
         repos = AllRepositories(session)
 
-        recipe = repos.recipes.by_group(user.group_id).get_one(slug, "slug")
+        recipe = repos.recipes.by_group(user.group_id).get_one(recipe_slug, "slug")
         if recipe is None:
             return response_404()
 
         # Serve contents as HTML
-        return Response(content_with_meta(recipe), media_type="text/html")
+        return Response(content_with_meta(group_slug, recipe), media_type="text/html")
     except Exception:
         return response_404()
 
@@ -155,6 +156,5 @@ def mount_spa(app: FastAPI):
     global __contents
     __contents = pathlib.Path(__app_settings.STATIC_FILES).joinpath("index.html").read_text()
 
-    app.get("/recipe/{slug}")(serve_recipe_with_meta)
-    app.get("/explore/recipes/{group_slug}/{recipe_slug}")(serve_recipe_with_meta_public)
+    app.get("/g/{group_slug}/r/{recipe_slug}")(serve_recipe_with_meta)
     app.mount("/", SPAStaticFiles(directory=__app_settings.STATIC_FILES, html=True), name="spa")
diff --git a/mealie/schema/user/user.py b/mealie/schema/user/user.py
index d5cfb5fc7..1e6ce449c 100644
--- a/mealie/schema/user/user.py
+++ b/mealie/schema/user/user.py
@@ -104,6 +104,7 @@ class UserOut(UserBase):
     id: UUID4
     group: str
     group_id: UUID4
+    group_slug: str
     tokens: list[LongLiveTokenOut] | None
     cache_key: str
     favorite_recipes: list[str] | None = []
diff --git a/mealie/services/urls/url_constructors.py b/mealie/services/urls/url_constructors.py
index 4f64f4061..0c7805751 100644
--- a/mealie/services/urls/url_constructors.py
+++ b/mealie/services/urls/url_constructors.py
@@ -11,9 +11,9 @@ def _base_or(base_url: str | None) -> str:
     return base_url
 
 
-def recipe_url(recipe_slug: str, base_url: str | None) -> str:
+def recipe_url(group_slug: str, recipe_slug: str, base_url: str | None) -> str:
     base = _base_or(base_url)
-    return f"{base}/recipe/{recipe_slug}"
+    return f"{base}/g/{group_slug}/r/{recipe_slug}"
 
 
 def shopping_list_url(shopping_list_id: UUID4 | str, base_url: str | None) -> str:
diff --git a/tests/integration_tests/public_explorer_tests/test_public_cookbooks.py b/tests/integration_tests/public_explorer_tests/test_public_cookbooks.py
index cd0664134..2c3e7ba6a 100644
--- a/tests/integration_tests/public_explorer_tests/test_public_cookbooks.py
+++ b/tests/integration_tests/public_explorer_tests/test_public_cookbooks.py
@@ -24,6 +24,7 @@ def test_get_all_cookbooks(
     assert group and group.preferences
 
     group.preferences.private_group = is_private_group
+    group.preferences.recipe_public = not is_private_group
     database.group_preferences.update(group.id, group.preferences)
 
     ## Set Up Cookbooks
@@ -88,6 +89,7 @@ def test_get_one_cookbook(
     assert group and group.preferences
 
     group.preferences.private_group = is_private_group
+    group.preferences.recipe_public = not is_private_group
     database.group_preferences.update(group.id, group.preferences)
 
     ## Set Up Cookbook
@@ -116,6 +118,7 @@ def test_get_cookbooks_with_recipes(api_client: TestClient, unique_user: TestUse
     assert group and group.preferences
 
     group.preferences.private_group = False
+    group.preferences.recipe_public = True
     database.group_preferences.update(group.id, group.preferences)
 
     tag = database.tags.create(TagSave(name=random_string(), group_id=unique_user.group_id))
diff --git a/tests/integration_tests/public_explorer_tests/test_public_foods.py b/tests/integration_tests/public_explorer_tests/test_public_foods.py
index 4b65a431c..aa3186b39 100644
--- a/tests/integration_tests/public_explorer_tests/test_public_foods.py
+++ b/tests/integration_tests/public_explorer_tests/test_public_foods.py
@@ -20,6 +20,7 @@ def test_get_all_foods(
     assert group and group.preferences
 
     group.preferences.private_group = is_private_group
+    group.preferences.recipe_public = not is_private_group
     database.group_preferences.update(group.id, group.preferences)
 
     ## Set Up Foods
@@ -53,6 +54,7 @@ def test_get_one_food(
     assert group and group.preferences
 
     group.preferences.private_group = is_private_group
+    group.preferences.recipe_public = not is_private_group
     database.group_preferences.update(group.id, group.preferences)
 
     ## Set Up Food
diff --git a/tests/integration_tests/public_explorer_tests/test_public_organizers.py b/tests/integration_tests/public_explorer_tests/test_public_organizers.py
index 17aa596cd..2c07a7af3 100644
--- a/tests/integration_tests/public_explorer_tests/test_public_organizers.py
+++ b/tests/integration_tests/public_explorer_tests/test_public_organizers.py
@@ -48,6 +48,7 @@ def test_get_all_organizers(
     assert group and group.preferences
 
     group.preferences.private_group = is_private_group
+    group.preferences.recipe_public = not is_private_group
     database.group_preferences.update(group.id, group.preferences)
 
     ## Set Up Organizers
@@ -113,6 +114,7 @@ def test_get_one_organizer(
     assert group and group.preferences
 
     group.preferences.private_group = is_private_group
+    group.preferences.recipe_public = not is_private_group
     database.group_preferences.update(group.id, group.preferences)
 
     ## Set Up Organizer
diff --git a/tests/integration_tests/public_explorer_tests/test_public_recipes.py b/tests/integration_tests/public_explorer_tests/test_public_recipes.py
index ba7b554cc..b990e4e78 100644
--- a/tests/integration_tests/public_explorer_tests/test_public_recipes.py
+++ b/tests/integration_tests/public_explorer_tests/test_public_recipes.py
@@ -32,6 +32,7 @@ def test_get_all_public_recipes(
     assert group and group.preferences
 
     group.preferences.private_group = is_private_group
+    group.preferences.recipe_public = not is_private_group
     database.group_preferences.update(group.id, group.preferences)
 
     default_recipes = database.recipes.create_many(
@@ -106,6 +107,7 @@ def test_get_all_public_recipes_filtered(
     assert group and group.preferences
 
     group.preferences.private_group = False
+    group.preferences.recipe_public = True
     database.group_preferences.update(group.id, group.preferences)
 
     assert random_recipe.settings
@@ -140,6 +142,7 @@ def test_public_recipe_success(
     assert group and group.preferences
 
     group.preferences.private_group = test_case.private_group
+    group.preferences.recipe_public = not test_case.private_group
     database.group_preferences.update(group.id, group.preferences)
 
     # Set Recipe `settings.public` attribute