diff --git a/src/app/components/ChatMenu.svelte b/src/app/components/ChatMenu.svelte
index ffc79bfc..5196a27f 100644
--- a/src/app/components/ChatMenu.svelte
+++ b/src/app/components/ChatMenu.svelte
@@ -6,6 +6,8 @@
   import BellOff from "@assets/icons/bell-off.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
+  import Modal from "@lib/components/Modal.svelte"
+  import ModalBody from "@lib/components/ModalBody.svelte"
   import ChatStart from "@app/components/ChatStart.svelte"
   import {setChecked} from "@app/util/notifications"
   import {pushModal} from "@app/util/modal"
@@ -23,24 +25,26 @@
   const disableAlerts = () => notificationSettings.update(assoc("messages", false))
 </script>
 
-<div class="col-2">
-  <Button class="btn btn-primary" onclick={startChat}>
-    <Icon size={5} icon={ChatSquare} />
-    Start chat
-  </Button>
-  <Button class="btn btn-neutral" onclick={markAsRead}>
-    <Icon size={5} icon={Check} />
-    Mark all read
-  </Button>
-  {#if $notificationSettings.messages}
-    <Button class="btn btn-neutral" onclick={disableAlerts}>
-      <Icon size={4} icon={BellOff} />
-      Disable alerts
+<Modal>
+  <ModalBody>
+    <Button class="btn btn-primary" onclick={startChat}>
+      <Icon size={5} icon={ChatSquare} />
+      Start chat
     </Button>
-  {:else}
-    <Button class="btn btn-neutral" onclick={enableAlerts}>
-      <Icon size={4} icon={Bell} />
-      Enable alerts
+    <Button class="btn btn-neutral" onclick={markAsRead}>
+      <Icon size={5} icon={Check} />
+      Mark all read
     </Button>
-  {/if}
-</div>
+    {#if $notificationSettings.messages}
+      <Button class="btn btn-neutral" onclick={disableAlerts}>
+        <Icon size={4} icon={BellOff} />
+        Disable alerts
+      </Button>
+    {:else}
+      <Button class="btn btn-neutral" onclick={enableAlerts}>
+        <Icon size={4} icon={Bell} />
+        Enable alerts
+      </Button>
+    {/if}
+  </ModalBody>
+</Modal>