diff --git a/autogpt_platform/frontend/src/app/(platform)/copilot/CopilotPage.tsx b/autogpt_platform/frontend/src/app/(platform)/copilot/CopilotPage.tsx
index 35b34890ce..cb940c1a11 100644
--- a/autogpt_platform/frontend/src/app/(platform)/copilot/CopilotPage.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/copilot/CopilotPage.tsx
@@ -1,8 +1,8 @@
 "use client";
 
+import { Button } from "@/components/atoms/Button/Button";
+import { Dialog } from "@/components/molecules/Dialog/Dialog";
 import { SidebarProvider } from "@/components/ui/sidebar";
-// TODO: Replace with modern Dialog component when available
-import DeleteConfirmDialog from "@/components/__legacy__/delete-confirm-dialog";
 import { ChatContainer } from "./components/ChatContainer/ChatContainer";
 import { ChatSidebar } from "./components/ChatSidebar/ChatSidebar";
 import { MobileDrawer } from "./components/MobileDrawer/MobileDrawer";
@@ -97,13 +97,47 @@ export function CopilotPage() {
       )}
       {/* Delete confirmation dialog - rendered at top level for proper z-index on mobile */}
       {isMobile && (
-        <DeleteConfirmDialog
-          entityType="chat"
-          entityName={sessionToDelete?.title || "Untitled chat"}
-          open={!!sessionToDelete}
-          onOpenChange={(open) => !open && handleCancelDelete()}
-          onDoDelete={handleConfirmDelete}
-        />
+        <Dialog
+          title="Delete chat"
+          controlled={{
+            isOpen: !!sessionToDelete,
+            set: async (open) => {
+              if (!open && !isDeleting) {
+                handleCancelDelete();
+              }
+            },
+          }}
+          onClose={handleCancelDelete}
+        >
+          <Dialog.Content>
+            <p className="text-neutral-600">
+              Are you sure you want to delete{" "}
+              <span className="font-medium">
+                &quot;{sessionToDelete?.title || "Untitled chat"}&quot;
+              </span>
+              ? This action cannot be undone.
+            </p>
+            <Dialog.Footer>
+              <Button
+                variant="ghost"
+                size="small"
+                onClick={handleCancelDelete}
+                disabled={isDeleting}
+              >
+                Cancel
+              </Button>
+              <Button
+                variant="primary"
+                size="small"
+                onClick={handleConfirmDelete}
+                loading={isDeleting}
+                className="bg-red-600 hover:bg-red-700"
+              >
+                Delete
+              </Button>
+            </Dialog.Footer>
+          </Dialog.Content>
+        </Dialog>
       )}
     </SidebarProvider>
   );
diff --git a/autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatSidebar/ChatSidebar.tsx b/autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatSidebar/ChatSidebar.tsx
index 8e785dd9d3..8537774b07 100644
--- a/autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatSidebar/ChatSidebar.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatSidebar/ChatSidebar.tsx
@@ -7,9 +7,8 @@ import {
 import { Button } from "@/components/atoms/Button/Button";
 import { LoadingSpinner } from "@/components/atoms/LoadingSpinner/LoadingSpinner";
 import { Text } from "@/components/atoms/Text/Text";
+import { Dialog } from "@/components/molecules/Dialog/Dialog";
 import { toast } from "@/components/molecules/Toast/use-toast";
-// TODO: Replace with modern Dialog component when available
-import DeleteConfirmDialog from "@/components/__legacy__/delete-confirm-dialog";
 import {
   Sidebar,
   SidebarContent,
@@ -92,6 +91,12 @@ export function ChatSidebar() {
     }
   }
 
+  function handleCancelDelete() {
+    if (!isDeleting) {
+      setSessionToDelete(null);
+    }
+  }
+
   function formatDate(dateString: string) {
     const date = new Date(dateString);
     const now = new Date();
@@ -257,13 +262,47 @@ export function ChatSidebar() {
         )}
       </Sidebar>
 
-      <DeleteConfirmDialog
-        entityType="chat"
-        entityName={sessionToDelete?.title || "Untitled chat"}
-        open={!!sessionToDelete}
-        onOpenChange={(open) => !open && setSessionToDelete(null)}
-        onDoDelete={handleConfirmDelete}
-      />
+      <Dialog
+        title="Delete chat"
+        controlled={{
+          isOpen: !!sessionToDelete,
+          set: async (open) => {
+            if (!open && !isDeleting) {
+              setSessionToDelete(null);
+            }
+          },
+        }}
+        onClose={handleCancelDelete}
+      >
+        <Dialog.Content>
+          <p className="text-neutral-600">
+            Are you sure you want to delete{" "}
+            <span className="font-medium">
+              &quot;{sessionToDelete?.title || "Untitled chat"}&quot;
+            </span>
+            ? This action cannot be undone.
+          </p>
+          <Dialog.Footer>
+            <Button
+              variant="ghost"
+              size="small"
+              onClick={handleCancelDelete}
+              disabled={isDeleting}
+            >
+              Cancel
+            </Button>
+            <Button
+              variant="primary"
+              size="small"
+              onClick={handleConfirmDelete}
+              loading={isDeleting}
+              className="bg-red-600 hover:bg-red-700"
+            >
+              Delete
+            </Button>
+          </Dialog.Footer>
+        </Dialog.Content>
+      </Dialog>
     </>
   );
 }