diff --git a/client/src/components/Nav/ClearConvos.jsx b/client/src/components/Nav/ClearConvos.jsx
index e975c79e5e..3cf6291c48 100644
--- a/client/src/components/Nav/ClearConvos.jsx
+++ b/client/src/components/Nav/ClearConvos.jsx
@@ -1,9 +1,10 @@
 import React from 'react';
+import store from '~/store';
 import TrashIcon from '../svg/TrashIcon';
 import { useSWRConfig } from 'swr';
 import manualSWR from '~/utils/fetchers';
-
-import store from '~/store';
+import { Dialog, DialogTrigger } from '../ui/Dialog.tsx';
+import DialogTemplate from '../ui/DialogTemplate';
 
 export default function ClearConvos() {
   const { newConversation } = store.useConversation();
@@ -13,6 +14,7 @@ export default function ClearConvos() {
   const { trigger } = manualSWR(`/api/convos/clear`, 'post', () => {
     newConversation();
     refreshConversations();
+    mutate(`/api/convos`);
   });
 
   const clickHandler = () => {
@@ -21,12 +23,25 @@ export default function ClearConvos() {
   };
 
   return (
-    <a
-      className="flex cursor-pointer items-center gap-3 rounded-md py-3 px-3 text-sm text-white transition-colors duration-200 hover:bg-gray-500/10"
-      onClick={clickHandler}
-    >
-      <TrashIcon />
-      Clear conversations
-    </a>
+    <Dialog>
+      <DialogTrigger asChild>
+        <a
+          className="flex cursor-pointer items-center gap-3 rounded-md py-3 px-3 text-sm text-white transition-colors duration-200 hover:bg-gray-500/10"
+          // onClick={clickHandler}
+        >
+          <TrashIcon />
+          Clear conversations
+        </a>
+      </DialogTrigger>
+      <DialogTemplate
+        title="Clear conversations"
+        description="Are you sure you want to clear all conversations? This is irreversible."
+        selection={{
+          selectHandler: clickHandler,
+          selectClasses: 'bg-red-600 hover:bg-red-700 dark:hover:bg-red-800 text-white',
+          selectText: 'Clear'
+        }}
+      />
+    </Dialog>
   );
 }