diff --git a/src/lib/components/Navbar.svelte b/src/lib/components/Navbar.svelte
index b11e28e..cd18995 100644
--- a/src/lib/components/Navbar.svelte
+++ b/src/lib/components/Navbar.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { enhance } from "$app/forms";
   import { visitCount } from "$lib/utils/stores/visitCountStore";
   import { goto } from "$app/navigation";
   import type { DatabaseUser } from "$lib/server/auth";
@@ -12,6 +13,9 @@
   async function goToFeatured() {
     goto("/featured");
   }
+  async function toToLogin() {
+    goto("/login");
+  }
 
   let count = 0;
   visitCount.subscribe((value) => {
@@ -48,8 +52,13 @@
   </div>
   <div class="navbar-end flex justify-around md:justify-end mr-4">
     <p>Adventures: {count}</p>
+    {#if !user}
+      <button class="btn btn-primary ml-4" on:click={toToLogin}>Login</button>
+    {/if}
     {#if user}
-      <p>Hello {user.first_name}</p>
+      <form method="post" use:enhance>
+        <button class="btn btn-primary ml-4">Sign out</button>
+      </form>
     {/if}
   </div>
 </div>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index cfa6854..abcd0fc 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -6,6 +6,7 @@
   // only show footer if scrolled to the bottom
 </script>
 
+<!-- passes the user object to the navbar component -->
 <Navbar user={data.user} />
 <section>
   <slot />