diff --git a/src/lib/components/Navbar.svelte b/src/lib/components/Navbar.svelte
index cd18995..4343618 100644
--- a/src/lib/components/Navbar.svelte
+++ b/src/lib/components/Navbar.svelte
@@ -4,6 +4,7 @@
   import { goto } from "$app/navigation";
   import type { DatabaseUser } from "$lib/server/auth";
   export let user: any;
+  import UserAvatar from "./UserAvatar.svelte";
   async function goHome() {
     goto("/");
   }
@@ -16,6 +17,9 @@
   async function toToLogin() {
     goto("/login");
   }
+  async function toToSignup() {
+    goto("/signup");
+  }
 
   let count = 0;
   visitCount.subscribe((value) => {
@@ -54,8 +58,10 @@
     <p>Adventures: {count}</p>
     {#if !user}
       <button class="btn btn-primary ml-4" on:click={toToLogin}>Login</button>
+      <button class="btn btn-primary ml-4" on:click={toToSignup}>Signup</button>
     {/if}
     {#if user}
+      <UserAvatar {user} />
       <form method="post" use:enhance>
         <button class="btn btn-primary ml-4">Sign out</button>
       </form>
diff --git a/src/lib/components/UserAvatar.svelte b/src/lib/components/UserAvatar.svelte
new file mode 100644
index 0000000..f1b983d
--- /dev/null
+++ b/src/lib/components/UserAvatar.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+  export let user: any;
+  let firstLetter = user.first_name.charAt(0);
+</script>
+
+<div class="avatar placeholder">
+  <div class="bg-neutral text-neutral-content rounded-full w-10 ml-4">
+    <span class="text-2xl">{firstLetter}</span>
+  </div>
+</div>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 04d4fa2..497dd31 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -31,9 +31,3 @@
     </div>
   </div>
 </div>
-
-{#if data.user}
-  <form method="post" use:enhance>
-    <button class="btn btn-primary">Sign out</button>
-  </form>
-{/if}