diff --git a/frontend/__tests__/components/features/conversation-panel/conversation-panel.test.tsx b/frontend/__tests__/components/features/conversation-panel/conversation-panel.test.tsx
index 7a7765f542..e5064b0f66 100644
--- a/frontend/__tests__/components/features/conversation-panel/conversation-panel.test.tsx
+++ b/frontend/__tests__/components/features/conversation-panel/conversation-panel.test.tsx
@@ -885,4 +885,83 @@ describe("ConversationPanel", () => {
       title: "Special @#$%^&*()_+ Characters",
     });
   });
+
+  it("should close delete modal when clicking backdrop", async () => {
+    const user = userEvent.setup();
+    renderConversationPanel();
+
+    const cards = await screen.findAllByTestId("conversation-card");
+
+    // Open context menu and click delete
+    const ellipsisButton = within(cards[0]).getByTestId("ellipsis-button");
+    await user.click(ellipsisButton);
+    const deleteButton = within(cards[0]).getByTestId("delete-button");
+    await user.click(deleteButton);
+
+    // Modal should be visible
+    expect(
+      screen.getByRole("button", { name: /confirm/i }),
+    ).toBeInTheDocument();
+
+    // Click the backdrop (the dark overlay behind the modal)
+    const backdrop = document.querySelector(".bg-black.opacity-60");
+    expect(backdrop).toBeInTheDocument();
+    await user.click(backdrop!);
+
+    // Modal should be closed
+    expect(
+      screen.queryByRole("button", { name: /confirm/i }),
+    ).not.toBeInTheDocument();
+  });
+
+  it("should close stop modal when clicking backdrop", async () => {
+    const user = userEvent.setup();
+
+    // Create mock data with a RUNNING conversation
+    const mockRunningConversations: Conversation[] = [
+      {
+        conversation_id: "1",
+        title: "Running Conversation",
+        selected_repository: null,
+        git_provider: null,
+        selected_branch: null,
+        last_updated_at: "2021-10-01T12:00:00Z",
+        created_at: "2021-10-01T12:00:00Z",
+        status: "RUNNING" as const,
+        runtime_status: null,
+        url: null,
+        session_api_key: null,
+      },
+    ];
+
+    vi.spyOn(ConversationService, "getUserConversations").mockResolvedValue({
+      results: mockRunningConversations,
+      next_page_id: null,
+    });
+
+    renderConversationPanel();
+
+    const cards = await screen.findAllByTestId("conversation-card");
+
+    // Open context menu and click stop
+    const ellipsisButton = within(cards[0]).getByTestId("ellipsis-button");
+    await user.click(ellipsisButton);
+    const stopButton = within(cards[0]).getByTestId("stop-button");
+    await user.click(stopButton);
+
+    // Modal should be visible
+    expect(
+      screen.getByRole("button", { name: /confirm/i }),
+    ).toBeInTheDocument();
+
+    // Click the backdrop
+    const backdrop = document.querySelector(".bg-black.opacity-60");
+    expect(backdrop).toBeInTheDocument();
+    await user.click(backdrop!);
+
+    // Modal should be closed
+    expect(
+      screen.queryByRole("button", { name: /confirm/i }),
+    ).not.toBeInTheDocument();
+  });
 });
diff --git a/frontend/src/components/features/conversation-panel/confirm-delete-modal.tsx b/frontend/src/components/features/conversation-panel/confirm-delete-modal.tsx
index 630ce03eaf..df0af7d7d8 100644
--- a/frontend/src/components/features/conversation-panel/confirm-delete-modal.tsx
+++ b/frontend/src/components/features/conversation-panel/confirm-delete-modal.tsx
@@ -32,7 +32,7 @@ export function ConfirmDeleteModal({
   );
 
   return (
-    <ModalBackdrop>
+    <ModalBackdrop onClose={onCancel}>
       <ModalBody className="items-start border border-tertiary">
         <div className="flex flex-col gap-2">
           <BaseModalTitle title={t(I18nKey.CONVERSATION$CONFIRM_DELETE)} />
diff --git a/frontend/src/components/features/conversation-panel/confirm-stop-modal.tsx b/frontend/src/components/features/conversation-panel/confirm-stop-modal.tsx
index 1dd4ca1a46..d841211ace 100644
--- a/frontend/src/components/features/conversation-panel/confirm-stop-modal.tsx
+++ b/frontend/src/components/features/conversation-panel/confirm-stop-modal.tsx
@@ -20,7 +20,7 @@ export function ConfirmStopModal({
   const { t } = useTranslation();
 
   return (
-    <ModalBackdrop>
+    <ModalBackdrop onClose={onCancel}>
       <ModalBody className="items-start border border-tertiary">
         <div className="flex flex-col gap-2">
           <BaseModalTitle
diff --git a/frontend/src/components/features/conversation-panel/conversation-panel.tsx b/frontend/src/components/features/conversation-panel/conversation-panel.tsx
index 2f89072369..c3d4c530dd 100644
--- a/frontend/src/components/features/conversation-panel/conversation-panel.tsx
+++ b/frontend/src/components/features/conversation-panel/conversation-panel.tsx
@@ -243,6 +243,7 @@ export function ConversationPanel({ onClose }: ConversationPanelProps) {
             onClose();
           }}
           onClose={() => setConfirmExitConversationModalVisible(false)}
+          onCancel={() => setConfirmExitConversationModalVisible(false)}
         />
       )}
     </div>
diff --git a/frontend/src/components/features/conversation-panel/exit-conversation-modal.tsx b/frontend/src/components/features/conversation-panel/exit-conversation-modal.tsx
index 8eddca4567..067ab4d18d 100644
--- a/frontend/src/components/features/conversation-panel/exit-conversation-modal.tsx
+++ b/frontend/src/components/features/conversation-panel/exit-conversation-modal.tsx
@@ -8,16 +8,18 @@ import { I18nKey } from "#/i18n/declaration";
 interface ExitConversationModalProps {
   onConfirm: () => void;
   onClose: () => void;
+  onCancel: () => void;
 }
 
 export function ExitConversationModal({
   onConfirm,
   onClose,
+  onCancel,
 }: ExitConversationModalProps) {
   const { t } = useTranslation();
 
   return (
-    <ModalBackdrop>
+    <ModalBackdrop onClose={onCancel}>
       <ModalBody testID="confirm-new-conversation-modal">
         <BaseModalTitle title={t(I18nKey.CONVERSATION$EXIT_WARNING)} />
         <div className="flex w-full gap-2">