diff --git a/src/routes/planner/+page.svelte b/src/routes/planner/+page.svelte
index d7b81ba..c1de223 100644
--- a/src/routes/planner/+page.svelte
+++ b/src/routes/planner/+page.svelte
@@ -4,6 +4,8 @@
   import AdventureCard from "$lib/components/AdventureCard.svelte";
   import EditModal from "$lib/components/EditModal.svelte";
   import MoreFieldsInput from "$lib/components/CreateNewAdventure.svelte";
+  import { saveAdventure } from "../../services/adventureService.js";
+  import SucessToast from "$lib/components/SucessToast.svelte";
   export let data;
   let plans: Adventure[] = [];
   let isLoading = true;
@@ -16,10 +18,23 @@
 
   let isShowingMoreFields: boolean = false;
 
+  let isShowingToast: boolean = false;
+  let toastAction: string = "";
+
   let adventureToEdit: Adventure | undefined;
 
   console.log(data);
 
+  function showToast(action: string) {
+    toastAction = action;
+    isShowingToast = true;
+
+    setTimeout(() => {
+      isShowingToast = false;
+      toastAction = "";
+    }, 3000);
+  }
+
   function editPlan(event: { detail: number }) {
     const adventure = plans.find((adventure) => adventure.id === event.detail);
     if (adventure) {
@@ -32,36 +47,15 @@
     isShowingMoreFields = false;
   }
 
-  function savePlan(event: { detail: Adventure }) {
-    console.log("Event", event.detail);
-    let detailAdventure = event.detail;
-
-    // put request to /api/visits with id and adventure data
-    fetch("/api/planner", {
-      method: "PUT",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify({
-        detailAdventure,
-      }),
-    })
-      .then((response) => response.json())
-      .then((data) => {
-        console.log("Success:", data);
-        // update local array with new data
-        const index = plans.findIndex(
-          (adventure) => adventure.id === detailAdventure.id
-        );
-        if (index !== -1) {
-          plans[index] = detailAdventure;
-        }
-        adventureToEdit = undefined;
-        // showToast("Adventure edited successfully!");
-      })
-      .catch((error) => {
-        console.error("Error:", error);
-      });
+  async function savePlan(event: { detail: Adventure }) {
+    let newArray = await saveAdventure(event.detail, plans);
+    if (newArray.length > 0) {
+      plans = newArray;
+      showToast("Adventure updated successfully!");
+    } else {
+      showToast("Failed to update adventure");
+    }
+    adventureToEdit = undefined;
   }
 
   function removeAdventure(event: { detail: number }) {
@@ -124,6 +118,10 @@
   };
 </script>
 
+{#if isShowingToast}
+  <SucessToast action={toastAction} />
+{/if}
+
 <div class="flex flex-row items-center justify-center gap-4">
   <button
     type="button"
diff --git a/src/services/adventureService.ts b/src/services/adventureService.ts
index 53ba034..a8b3c27 100644
--- a/src/services/adventureService.ts
+++ b/src/services/adventureService.ts
@@ -1 +1,85 @@
 import type { Adventure } from "$lib/utils/types";
+
+// json that maps the type to api routes
+const apiRoutes: { [key: string]: string } = {
+  planner: "/api/planner",
+  mylog: "/api/visits",
+};
+
+/**
+ * Saves an adventure by sending a PUT request to the corresponding API endpoint.
+ * If the request is successful, the local adventure array is updated with the new data.
+ * If the request fails, an empty array is returned to allow for handling errors.
+ * @param adventure - The adventure object to be saved.
+ * @param adventureArray - The array of adventures to be updated.
+ * @returns A promise that resolves to the updated adventure array.
+ */
+export async function saveAdventure(
+  adventure: Adventure,
+  adventureArray: Adventure[]
+): Promise<Adventure[]> {
+  const detailAdventure = adventure;
+  const type = detailAdventure.type;
+  const url = apiRoutes[type];
+
+  // put request to /api/visits with id and adventure data
+  const response = await fetch(url, {
+    method: "PUT",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({
+      detailAdventure,
+    }),
+  });
+
+  if (response.ok) {
+    // update local array with new data
+    const index = adventureArray.findIndex(
+      (adventure) => adventure.id === detailAdventure.id
+    );
+    if (index !== -1) {
+      adventureArray[index] = detailAdventure;
+    }
+    // showToast("Adventure edited successfully!");
+  } else {
+    console.error("Error:", response.statusText);
+    adventureArray = [];
+  }
+
+  return adventureArray;
+}
+
+/**
+ * function savePlan(event: { detail: Adventure }) {
+    console.log("Event", event.detail);
+    let detailAdventure = event.detail;
+
+    // put request to /api/visits with id and adventure data
+    fetch("/api/planner", {
+      method: "PUT",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        detailAdventure,
+      }),
+    })
+      .then((response) => response.json())
+      .then((data) => {
+        console.log("Success:", data);
+        // update local array with new data
+        const index = plans.findIndex(
+          (adventure) => adventure.id === detailAdventure.id
+        );
+        if (index !== -1) {
+          plans[index] = detailAdventure;
+        }
+        adventureToEdit = undefined;
+        // showToast("Adventure edited successfully!");
+      })
+      .catch((error) => {
+        console.error("Error:", error);
+      });
+  }
+    */