diff --git a/src/lib/components/Navbar.svelte b/src/lib/components/Navbar.svelte
index 6c197d30..534aa436 100644
--- a/src/lib/components/Navbar.svelte
+++ b/src/lib/components/Navbar.svelte
@@ -1,10 +1,18 @@
 <script lang="ts">
   import { getNumberOfAdventures } from "../../services/adventureService";
+  import { goto } from '$app/navigation';
+
+    async function goHome() {
+        goto('/');
+    }
+    async function goToLog() {
+        goto('/log');
+    }
 </script>
 <div class="navbar bg-base-100">
     <div class="navbar-start">
-        <button class="btn btn-primary mr-4 ml-2" on:click={() => window.location.href = '/'}>Home</button>
-        <button class="btn btn-primary" on:click={() => window.location.href = '/log'}>My Log</button>
+        <button class="btn btn-primary mr-4 ml-2" on:click={goHome}>Home</button>
+        <button class="btn btn-primary" on:click={goToLog}>My Log</button>
     </div>
     <div class="navbar-center">
       <a class="btn btn-ghost text-xl" href="/">AdventureLog 🗺️</a>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index fb4d7864..4af3dbab 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
+    import { goto } from '$app/navigation';
     import campingDrawing from "$lib/assets/camping.svg";
-    function navToLog() {
-        window.location.href = '/log';
+    async function navToLog() {
+        goto('/log');
     }
 </script>