diff --git a/src/lib/assets/pinLogo.svg b/src/lib/assets/pinLogo.svg
new file mode 100644
index 0000000..cf27faa
--- /dev/null
+++ b/src/lib/assets/pinLogo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="20" width="15" viewBox="0 0 384 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="#ffffff" d="M215.7 499.2C267 435 384 279.4 384 192C384 86 298 0 192 0S0 86 0 192c0 87.4 117 243 168.3 307.2c12.3 15.3 35.1 15.3 47.4 0zM192 128a64 64 0 1 1 0 128 64 64 0 1 1 0-128z"/></svg>
\ No newline at end of file
diff --git a/src/lib/components/EditModal.svelte b/src/lib/components/EditModal.svelte
new file mode 100644
index 0000000..d13f56f
--- /dev/null
+++ b/src/lib/components/EditModal.svelte
@@ -0,0 +1,50 @@
+<script lang="ts">
+    export let editId:number = NaN;
+        export let editName:string = '';
+        export let editLocation:string = '';
+        export let editCreated: string = '';
+        import { createEventDispatcher } from 'svelte';
+        import type { Adventure } from '$lib/utils/types';
+        const dispatch = createEventDispatcher();
+        import { onMount } from 'svelte';
+        let modal: HTMLDialogElement;
+
+        onMount(() => {
+                modal = document.getElementById("my_modal_1") as HTMLDialogElement;
+                if (modal) {
+                        modal.showModal();
+                }
+        });
+
+        
+
+        function submit() {
+            const adventureEdited: Adventure = { id: editId, name: editName, location: editLocation, created: editCreated };
+            dispatch('submit', adventureEdited);
+            console.log(adventureEdited)
+    }
+
+    function close() {
+        dispatch('close');
+    }
+</script>
+
+<dialog id="my_modal_1" class="modal">
+    <div class="modal-box">
+        <h3 class="font-bold text-lg">Edit Adventure {editName}</h3>
+        <p class="py-4">Press ESC key or click the button below to close</p>
+        <div class="modal-action">
+            <form method="dialog">
+                <label for="name">Name</label>
+                <input type="text" id="name" bind:value={editName} class="input input-bordered w-full max-w-xs" />
+                <label for="location">Location</label>
+                <input type="text" id="location" bind:value={editLocation} class="input input-bordered w-full max-w-xs" />
+                <label for="created">Created</label>
+                <input type="date" id="created" bind:value={editCreated} class="input input-bordered w-full max-w-xs" />
+                <button class="btn btn-primary" on:click={submit}>Save</button>
+                <!-- if there is a button in form, it will close the modal -->
+                <button class="btn" on:click={close}>Close</button>
+            </form>
+        </div>
+    </div>
+</dialog>
\ No newline at end of file
diff --git a/src/lib/components/Footer.svelte b/src/lib/components/Footer.svelte
index 68fa2c2..ed3bef5 100644
--- a/src/lib/components/Footer.svelte
+++ b/src/lib/components/Footer.svelte
@@ -1,18 +1,19 @@
-<style>
-    .footer {
-        clear: both;
-        position: relative;
-        height: 4rem;
-        margin-top: -4rem;
-        text-align: center;
-    }
-    
-</style>
+<script>
+    import pinLogo from "$lib/assets/pinLogo.svg";
+</script>
 
-
-
-<div class="footer">
-    <hr>
-    <br>
-    <p>AdventureLog 🗺️</p>
-</div>
+<footer class="footer items-center p-4 bg-neutral text-neutral-content fixed bottom-0 left-0 w-full">
+    <aside class="items-center grid-flow-col">
+        <img src={pinLogo} class="inline-block -mt-1 mr-1" alt="Logo" />
+        <p>Copyright © 2024 Sean Morley - All rights reserved</p>
+    </aside> 
+    <nav class="grid-flow-col gap-4 md:place-self-center md:justify-self-end">
+        <!-- svelte-ignore a11y-missing-attribute -->
+        <a><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="fill-current"><path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"></path></svg>
+        </a>
+        <!-- svelte-ignore a11y-missing-attribute -->
+        <a><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="fill-current"><path d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z"></path></svg></a>
+        <!-- svelte-ignore a11y-missing-attribute -->
+        <a><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="fill-current"><path d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z"></path></svg></a>
+    </nav>
+</footer>
diff --git a/src/lib/components/Navbar.svelte b/src/lib/components/Navbar.svelte
index 534aa43..603c41b 100644
--- a/src/lib/components/Navbar.svelte
+++ b/src/lib/components/Navbar.svelte
@@ -19,16 +19,5 @@
     </div>
     <div class="navbar-end">
       <p>Adventures: {getNumberOfAdventures()} </p>
-      <button class="btn btn-ghost btn-circle">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /></svg>
-      </button>
-      
-      <button class="btn btn-ghost btn-circle">
-        <div class="indicator">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" /></svg>
-          <span class="badge badge-xs badge-primary indicator-item"></span>
-          
-        </div>
-      </button>
     </div>
   </div>
diff --git a/src/lib/components/SucessToast.svelte b/src/lib/components/SucessToast.svelte
new file mode 100644
index 0000000..3bc831e
--- /dev/null
+++ b/src/lib/components/SucessToast.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+    export let action:string;
+</script>
+
+<div class="toast toast-top toast-end z-50">
+    <div class="alert alert-info">
+      <span>Adventure {action} successfully!</span>
+    </div>
+  </div>
\ No newline at end of file
diff --git a/src/routes/log/+page.svelte b/src/routes/log/+page.svelte
index 7e86723..d3a866d 100644
--- a/src/routes/log/+page.svelte
+++ b/src/routes/log/+page.svelte
@@ -6,8 +6,9 @@
     import { exportData } from "../../services/export";
     import { importData } from "../../services/import";
     import exportFile from "$lib/assets/exportFile.svg";
-
+    import SucessToast from "$lib/components/SucessToast.svelte";
     import mapDrawing from "$lib/assets/adventure_map.svg"
+    import EditModal from "$lib/components/EditModal.svelte";
 
 
     let newName = '';
@@ -20,6 +21,21 @@
 
     let adventures: Adventure[] = [];
 
+    let isShowingToast:boolean = false;
+    let toastAction:string = '';
+
+    function showToast(action:string) {
+        toastAction = action;
+        isShowingToast = true;
+        console.log('showing toast');
+
+        setTimeout(() => {
+            isShowingToast = false;
+            toastAction = '';
+            console.log('hiding toast');
+        }, 3000);
+    }
+
     const createNewAdventure = () => {
         let currentDate = new Date();
         let dateString = currentDate.toISOString().slice(0,10); // Get date in "yyyy-mm-dd" format
@@ -28,6 +44,7 @@
         newName = ''; // Reset newName and newLocation after adding adventure
         newLocation = '';
         adventures = getAdventures(); // add to local array
+        showToast('added');
     };
 
     onMount(async () => {
@@ -36,16 +53,19 @@
 
     function triggerRemoveAdventure(event: { detail: number; }) {
         removeAdventure(event)
+        showToast('removed');
         adventures = getAdventures()
     }
 
-    function saveAdventure() {
-        saveEdit(editId, editName, editLocation, editCreated)
+    function saveAdventure(event: { detail: Adventure; }) {
+        console.log("Event" + event.detail)
+        saveEdit(event.detail)
         editId = NaN;
         editName = '';
         editLocation = '';
         editCreated = '';
         adventures = getAdventures()
+        showToast('edited');
 
     }
 
@@ -59,6 +79,13 @@
         }
     }
 
+    function handleClose() {
+        editId = NaN;
+        editName = '';
+        editLocation = '';
+        editCreated = '';
+    }
+
 
     
 </script>
@@ -69,6 +96,16 @@
     <button class="btn" on:click={createNewAdventure}>Add Adventure</button>
 </div>
 
+{#if isShowingToast}
+    <SucessToast action={toastAction} />
+{/if}
+
+
+{#if !Number.isNaN(editId)}
+<EditModal bind:editId={editId} bind:editName={editName} bind:editLocation={editLocation} bind:editCreated={editCreated} on:submit={saveAdventure} on:close={handleClose} />
+{/if}
+
+
 <div class="grid grid-cols-3 gap-4 mt-4 content-center auto-cols-auto ml-6">
     {#each adventures as adventure (adventure.id)}
         <AdventureCard id={adventure.id} name={adventure.name} location={adventure.location} created={adventure.created} on:remove={triggerRemoveAdventure} on:edit={editAdventure} />
@@ -82,16 +119,17 @@
     <img src={mapDrawing} width="25%" alt="Logo" />
 </div>
 
+
 {/if}
 
-{#if !Number.isNaN(editId)}
+<!-- {#if !Number.isNaN(editId)}
     <form on:submit|preventDefault={saveAdventure}>
         <input bind:value={editName} />
         <input bind:value={editLocation} />
         <input type="date" bind:value={editCreated} />
         <button type="submit">Save</button>
     </form>
-{/if}
+{/if} -->
 
 {#if adventures.length != 0}
 
diff --git a/src/services/adventureService.ts b/src/services/adventureService.ts
index 46aff5b..55e350b 100644
--- a/src/services/adventureService.ts
+++ b/src/services/adventureService.ts
@@ -41,12 +41,18 @@ export function removeAdventure(event: { detail: number; }) {
     }
 }
 
-export function saveEdit(editId:number, editName:string, editLocation:string, editCreated:string) {
-    const adventure = adventures.find(adventure => adventure.id === editId);
-    if (adventure) {
-        adventure.name = editName;
-        adventure.location = editLocation;
-        adventure.created = editCreated;
+export function saveEdit(adventure:Adventure) {
+    let editId = adventure.id;
+    console.log("saving edit")
+    let editName = adventure.name;
+    let editLocation = adventure.location;
+    let editCreated = adventure.created;
+    let oldAdventure: Adventure | undefined = adventures.find(adventure => adventure.id === editId);
+    console.log("old" + oldAdventure)
+    if (oldAdventure) {
+        oldAdventure.name = editName;
+        oldAdventure.location = editLocation;
+        oldAdventure.created = editCreated;
     }
     editId = NaN;
     console.log("done")