diff --git a/frontend/composables/store/use-cookbook-store.ts b/frontend/composables/store/use-cookbook-store.ts
index e3d4a5a81..8f56e9e7b 100644
--- a/frontend/composables/store/use-cookbook-store.ts
+++ b/frontend/composables/store/use-cookbook-store.ts
@@ -1,18 +1,29 @@
 import type { Composer } from "vue-i18n";
 import { useReadOnlyStore, useStore } from "../partials/use-store-factory";
-import type { RecipeCookBook } from "~/lib/api/types/cookbook";
+import type { RecipeCookBook, UpdateCookBook } from "~/lib/api/types/cookbook";
 import { usePublicExploreApi, useUserApi } from "~/composables/api";
 
-const store: Ref<RecipeCookBook[]> = ref([]);
+const cookbooks: Ref<RecipeCookBook[]> = ref([]);
 const loading = ref(false);
 const publicLoading = ref(false);
 
 export const useCookbookStore = function (i18n?: Composer) {
   const api = useUserApi(i18n);
-  return useStore<RecipeCookBook>(store, loading, api.cookbooks);
+  const store = useStore<RecipeCookBook>(cookbooks, loading, api.cookbooks);
+
+  const updateAll = async function (updateData: UpdateCookBook[]) {
+    loading.value = true;
+    updateData.forEach((cookbook, index) => {
+      cookbook.position = index;
+    });
+    const { data } = await api.cookbooks.updateAll(updateData);
+    loading.value = false;
+    return data;
+  };
+  return { ...store, updateAll };
 };
 
 export const usePublicCookbookStore = function (groupSlug: string, i18n?: Composer) {
   const api = usePublicExploreApi(groupSlug, i18n).explore;
-  return useReadOnlyStore<RecipeCookBook>(store, publicLoading, api.cookbooks);
+  return useReadOnlyStore<RecipeCookBook>(cookbooks, publicLoading, api.cookbooks);
 };
diff --git a/frontend/pages/g/[groupSlug]/cookbooks/index.vue b/frontend/pages/g/[groupSlug]/cookbooks/index.vue
index 5df57cb94..ad6ed0a55 100644
--- a/frontend/pages/g/[groupSlug]/cookbooks/index.vue
+++ b/frontend/pages/g/[groupSlug]/cookbooks/index.vue
@@ -75,7 +75,7 @@
           :delay="250"
           :delay-on-touch-only="true"
           style="width: 100%"
-          @end="actions.updateOrder(myCookbooks)"
+          @end="updateAll(myCookbooks)"
         >
           <v-expansion-panel
             v-for="(cookbook, index) in myCookbooks"
@@ -160,7 +160,7 @@ export default defineNuxtComponent({
     });
 
     const $auth = useMealieAuth();
-    const { store: allCookbooks, actions } = useCookbookStore();
+    const { store: allCookbooks, actions, updateAll } = useCookbookStore();
 
     // Make a local reactive copy of myCookbooks
     const myCookbooks = ref<ReadCookBook[]>([]);
@@ -170,7 +170,7 @@ export default defineNuxtComponent({
         myCookbooks.value
           = cookbooks?.filter(
             cookbook => cookbook.householdId === $auth.user.value?.householdId,
-          ) ?? [];
+          ).sort((a, b) => a.position > b.position) ?? [];
       },
       { immediate: true },
     );
@@ -249,6 +249,9 @@ export default defineNuxtComponent({
       createTarget,
       createCookbook,
 
+      // update
+      updateAll,
+
       // delete
       deleteTarget,
       deleteEventHandler,