diff --git a/components/Header.vue b/components/Header.vue
index df29581..95bf499 100644
--- a/components/Header.vue
+++ b/components/Header.vue
@@ -23,7 +23,7 @@ const links = [{
 
     <template #right>
       <UColorModeButton />
-      <UButton to="#" target="_blank" icon="i-heroicons-user-solid" color="gray" variant="ghost" />
+      <UserDropdown />
     </template>
 
     <template #panel>
diff --git a/components/UserDropdown.vue b/components/UserDropdown.vue
new file mode 100644
index 0000000..57ac367
--- /dev/null
+++ b/components/UserDropdown.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+const links = [{
+  label: 'Logout',
+  to: '/logout',
+  icon: 'i-heroicons-arrow-left-on-rectangle',
+}]
+</script>
+
+<template>
+  <UPopover>
+    <UButton icon="i-heroicons-user-solid" color="gray" variant="ghost" />
+    <template #panel>
+      <div class="p-4">
+        <UNavigationLinks :links="links" />
+      </div>
+    </template>
+  </UPopover>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/pages/logout/index.vue b/pages/logout/index.vue
new file mode 100644
index 0000000..0a6e1be
--- /dev/null
+++ b/pages/logout/index.vue
@@ -0,0 +1,5 @@
+<script setup lang="ts">
+definePageMeta({ middleware: ['auth'] })
+const { logout } = useAuth()
+logout()
+</script>