diff --git a/frontend/src/routes/auth/logout/+page.svelte b/frontend/src/routes/auth/logout/+page.svelte
deleted file mode 100644
index 611a46a..0000000
--- a/frontend/src/routes/auth/logout/+page.svelte
+++ /dev/null
@@ -1,14 +0,0 @@
-<script lang="ts">
-  import { goto } from "$app/navigation";
-  import { userStore } from "$lib/store";
-  import { onMount } from "svelte";
-
-  onMount(() => {
-    userStore.set(null);
-    localStorage.removeItem("pronouns-token");
-    localStorage.removeItem("pronouns-user");
-    goto("/");
-  });
-</script>
-
-<h1>Log out</h1>
diff --git a/frontend/src/routes/auth/logout/+page.ts b/frontend/src/routes/auth/logout/+page.ts
deleted file mode 100644
index a3d1578..0000000
--- a/frontend/src/routes/auth/logout/+page.ts
+++ /dev/null
@@ -1 +0,0 @@
-export const ssr = false;
diff --git a/frontend/src/routes/nav/Navigation.svelte b/frontend/src/routes/nav/Navigation.svelte
index e5eecb8..311ce44 100644
--- a/frontend/src/routes/nav/Navigation.svelte
+++ b/frontend/src/routes/nav/Navigation.svelte
@@ -85,9 +85,6 @@
         <NavItem>
           <NavLink href="/settings">Settings</NavLink>
         </NavItem>
-        <NavItem>
-          <NavLink href="/auth/logout">Log out</NavLink>
-        </NavItem>
       {:else}
         <NavItem>
           <NavLink href="/auth/login">Log in</NavLink>
diff --git a/frontend/src/routes/settings/+layout.svelte b/frontend/src/routes/settings/+layout.svelte
index 1c43b88..d786bd1 100644
--- a/frontend/src/routes/settings/+layout.svelte
+++ b/frontend/src/routes/settings/+layout.svelte
@@ -1,10 +1,22 @@
 <script lang="ts">
   import { page } from "$app/stores";
   import type { LayoutData } from "./$types";
-
-  import { ListGroup, ListGroupItem } from "sveltestrap";
+  import { Button, ListGroup, ListGroupItem, Modal, ModalBody, ModalFooter } from "sveltestrap";
+  import { userStore } from "$lib/store";
+  import { goto } from "$app/navigation";
 
   export let data: LayoutData;
+
+  let isOpen = false;
+  const toggle = () => (isOpen = !isOpen);
+
+  const logOut = () => {
+    userStore.set(null);
+    localStorage.removeItem("pronouns-token");
+    localStorage.removeItem("pronouns-user");
+    toggle();
+    goto("/");
+  };
 </script>
 
 <div class="grid">
@@ -39,10 +51,18 @@
         >
           Data export
         </ListGroupItem>
+        <ListGroupItem tag="button" on:click={toggle}>Log out</ListGroupItem>
       </ListGroup>
     </div>
     <div class="col-md m-3">
       <slot />
     </div>
   </div>
+  <Modal header="Log out" {isOpen} {toggle}>
+    <ModalBody>Are you sure you want to log out?</ModalBody>
+    <ModalFooter>
+      <Button color="primary" on:click={logOut}>Log out</Button>
+      <Button color="secondary" on:click={toggle}>Cancel</Button>
+    </ModalFooter>
+  </Modal>
 </div>