diff --git a/frontend/src/api/siteSettings.js b/frontend/src/api/siteSettings.js
index 1a3e73cb5..93871e45f 100644
--- a/frontend/src/api/siteSettings.js
+++ b/frontend/src/api/siteSettings.js
@@ -7,6 +7,8 @@ const settingsURLs = {
   siteSettings: `${settingsBase}`,
   updateSiteSettings: `${settingsBase}`,
   testWebhooks: `${settingsBase}/webhooks/test`,
+  customPages: `${settingsBase}/custom-pages`,
+  customPage: id => `${settingsBase}/custom-pages/${id}`,
 };
 
 export default {
@@ -19,4 +21,19 @@ export default {
     let response = await apiReq.put(settingsURLs.updateSiteSettings, body);
     return response.data;
   },
+
+  async getPages() {
+    let response = await apiReq.get(settingsURLs.customPages);
+    return response.data;
+  },
+
+  async deletePage(id) {
+    let response = await apiReq.delete(settingsURLs.customPage(id));
+    return response.data;
+  },
+
+  async updateAllPages(allPages) {
+    let response = await apiReq.put(settingsURLs.customPages, allPages);
+    return response;
+  },
 };
diff --git a/frontend/src/components/Admin/General/CustomPageCreator.vue b/frontend/src/components/Admin/General/CustomPageCreator.vue
index 951984362..d298d2cf7 100644
--- a/frontend/src/components/Admin/General/CustomPageCreator.vue
+++ b/frontend/src/components/Admin/General/CustomPageCreator.vue
@@ -9,13 +9,13 @@
           </v-btn>
         </span>
       </h2>
-      <v-row class="mt-1">
+      <draggable class="row mt-1" v-model="customPages">
         <v-col
           :sm="6"
           :md="6"
           :lg="4"
           :xl="3"
-          v-for="item in customPages"
+          v-for="(item, index) in customPages"
           :key="item + item.id"
         >
           <v-card>
@@ -23,7 +23,7 @@
             <v-divider></v-divider>
 
             <v-card-text>
-              Card Position: {{ item.position }}
+              Card Position: {{ index }}
               <div>
                 <v-chip
                   v-for="cat in item.categories"
@@ -39,7 +39,7 @@
             </v-card-text>
 
             <v-card-actions>
-              <v-btn text small color="error">
+              <v-btn text small color="error" @click="deletePage(item.id)">
                 Delete
               </v-btn>
               <v-spacer> </v-spacer>
@@ -49,88 +49,50 @@
             </v-card-actions>
           </v-card>
         </v-col>
-      </v-row>
+      </draggable>
     </v-card-text>
+    <v-card-actions>
+      <v-spacer></v-spacer>
+      <v-btn color="success" @click="savePages">
+        Save
+      </v-btn>
+    </v-card-actions>
   </v-card>
 </template>
 
 <script>
+import draggable from "vuedraggable";
+import api from "@/api";
 export default {
+  components: {
+    draggable,
+  },
   data() {
     return {
-      customPages: [
-        {
-          id: 0,
-          name: "My Page Name",
-          slug: "my-page-name",
-          position: 0,
-          categories: [
-            {
-              id: 2,
-              slug: "brownie",
-              name: "brownie",
-            },
-            {
-              id: 3,
-              slug: "dessert",
-              name: "dessert",
-            },
-            {
-              id: 4,
-              slug: "drink",
-              name: "Drink",
-            },
-          ],
-        },
-        {
-          id: 3,
-          name: "My Page Name 1",
-          slug: "my-page-name",
-          position: 1,
-          categories: [
-            {
-              id: 2,
-              slug: "brownie",
-              name: "brownie",
-            },
-            {
-              id: 3,
-              slug: "dessert",
-              name: "dessert",
-            },
-            {
-              id: 4,
-              slug: "drink",
-              name: "Drink",
-            },
-          ],
-        },
-        {
-          id: 2,
-          name: "My Page Name 2",
-          slug: "my-page-name",
-          position: 2,
-          categories: [
-            {
-              id: 2,
-              slug: "brownie",
-              name: "brownie",
-            },
-            {
-              id: 3,
-              slug: "dessert",
-              name: "dessert",
-            },
-            {
-              id: 4,
-              slug: "drink",
-              name: "Drink",
-            },
-          ],
-        },
-      ],
+      customPages: [],
     };
   },
+  async mounted() {
+    this.getPages();
+  },
+  methods: {
+    async getPages() {
+      this.customPages = await api.siteSettings.getPages();
+    },
+    async deletePage(id) {
+      await api.siteSettings.deletePage(id);
+      this.getPages();
+    },
+    async savePages() {
+      this.customPages.forEach((element, index) => {
+        element.position = index;
+      });
+
+      await api.siteSettings.updateAllPages(this.customPages);
+
+      this.getPages;
+    },
+  },
 };
 </script>
 
diff --git a/frontend/src/pages/Admin/Settings/index.vue b/frontend/src/pages/Admin/Settings/index.vue
index 2a7920d44..ea83515db 100644
--- a/frontend/src/pages/Admin/Settings/index.vue
+++ b/frontend/src/pages/Admin/Settings/index.vue
@@ -50,6 +50,7 @@ export default {
     removeCategory(index) {
       this.value.categories.splice(index, 1);
     },
+
   },
 };
 </script>
diff --git a/mealie/db/models/settings.py b/mealie/db/models/settings.py
index 1f64745ca..cc40dd787 100644
--- a/mealie/db/models/settings.py
+++ b/mealie/db/models/settings.py
@@ -47,7 +47,7 @@ class CustomPage(SqlAlchemyBase, BaseMixins):
         single_parent=True,
     )
 
-    def __init__(self, session=None, name=None, slug=None, position=0, categories=[]) -> None:
+    def __init__(self, session=None, name=None, slug=None, position=0, categories=[], *args, **kwargs) -> None:
         self.name = name
         self.slug = slug
         self.position = position
diff --git a/mealie/routes/site_settings/custom_pages.py b/mealie/routes/site_settings/custom_pages.py
index 4c91779c1..0a1aee2b6 100644
--- a/mealie/routes/site_settings/custom_pages.py
+++ b/mealie/routes/site_settings/custom_pages.py
@@ -2,7 +2,7 @@ from fastapi import APIRouter, Depends
 from mealie.db.database import db
 from mealie.db.db_setup import generate_session
 from mealie.routes.deps import get_current_user
-from mealie.schema.settings import CustomPageBase
+from mealie.schema.settings import CustomPageBase, CustomPageOut
 from mealie.schema.snackbar import SnackResponse
 from mealie.schema.user import UserInDB
 from sqlalchemy.orm.session import Session
@@ -30,6 +30,18 @@ async def create_new_page(
     return SnackResponse.success("New Page Created")
 
 
+@router.put("")
+async def update_multiple_pages(
+    pages: list[CustomPageOut],
+    session: Session = Depends(generate_session),
+    current_user: UserInDB = Depends(get_current_user),
+):
+    """ Update multiple custom pages """
+    for page in pages:
+        db.custom_pages.update(session, page.id, page.dict())
+    return SnackResponse.success("Pages Updated")
+
+
 @router.get("/{id}")
 async def delete_custom_page(
     id: int,