diff --git a/src/components/Header.svelte b/src/components/Header.svelte
index 4351fca..535a455 100644
--- a/src/components/Header.svelte
+++ b/src/components/Header.svelte
@@ -1,14 +1,13 @@
 <script>
 	import { supabase } from '../supabaseClient';
 	import { goto } from '$app/navigation';
+	import { onMount } from 'svelte';
 
 	let username = '';
 
-	export async function logout() {
-		await supabase.auth.signOut();
-
-		goto('/');
-	}
+	onMount(async () => {
+		await getUser();
+	});
 
 	async function getUser() {
 		const {
@@ -18,7 +17,20 @@
 		username = user?.email || '';
 	}
 
-	getUser();
+	export async function logout() {
+		await supabase.auth.signOut();
+
+		goto('/');
+	}
+
+	// Call getUser() whenever the user logs in or out
+	async function handleAuthChange() {
+		await getUser();
+	}
+
+	supabase.auth.onAuthStateChange((event, session) => {
+		handleAuthChange();
+	});
 </script>
 
 <header class="bg-zinc-800 text-white mb-20 p-4 flex items-center justify-between shadow-2xl">