diff --git a/frontend/src/Editor/Editor.jsx b/frontend/src/Editor/Editor.jsx
index db57b4eb6f..bc7341fa28 100644
--- a/frontend/src/Editor/Editor.jsx
+++ b/frontend/src/Editor/Editor.jsx
@@ -973,6 +973,7 @@ class Editor extends React.Component {
           onConfirm={(queryConfirmationData) => onQueryConfirm(this, queryConfirmationData)}
           onCancel={() => onQueryCancel(this)}
           queryConfirmationData={this.state.queryConfirmationData}
+          darkMode={this.props.darkMode}
         />
         <Confirm
           show={showDataQueryDeletionConfirmation}
@@ -980,6 +981,7 @@ class Editor extends React.Component {
           confirmButtonLoading={isDeletingDataQuery}
           onConfirm={() => this.executeDataQueryDeletion()}
           onCancel={() => this.cancelDeleteDataQuery()}
+          darkMode={this.props.darkMode}
         />
         <DndProvider backend={HTML5Backend}>
           <div className="header">
diff --git a/frontend/src/Editor/Viewer/Confirm.jsx b/frontend/src/Editor/Viewer/Confirm.jsx
index 0b825897c4..16f86c1d88 100644
--- a/frontend/src/Editor/Viewer/Confirm.jsx
+++ b/frontend/src/Editor/Viewer/Confirm.jsx
@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import Modal from 'react-bootstrap/Modal';
 import Button from 'react-bootstrap/Button';
 
-export function Confirm({ show, message, onConfirm, onCancel, queryConfirmationData }) {
+export function Confirm({ show, message, onConfirm, onCancel, queryConfirmationData, darkMode }) {
   const [showModal, setShow] = useState(show);
 
   useEffect(() => {
@@ -21,7 +21,13 @@ export function Confirm({ show, message, onConfirm, onCancel, queryConfirmationD
 
   return (
     <>
-      <Modal show={showModal} onHide={handleClose} size="sm" centered={true}>
+      <Modal
+        show={showModal}
+        onHide={handleClose}
+        size="sm"
+        centered={true}
+        contentClassName={darkMode ? 'theme-dark' : ''}
+      >
         <div className="modal-status bg-danger"></div>
         <Modal.Body>{message}</Modal.Body>
         <Modal.Footer>
diff --git a/frontend/src/HomePage/HomePage.jsx b/frontend/src/HomePage/HomePage.jsx
index 47e2a9fa86..bc909c60c6 100644
--- a/frontend/src/HomePage/HomePage.jsx
+++ b/frontend/src/HomePage/HomePage.jsx
@@ -501,6 +501,7 @@ class HomePage extends React.Component {
           confirmButtonLoading={isDeletingApp}
           onConfirm={() => this.executeAppDeletion()}
           onCancel={() => this.cancelDeleteAppDialog()}
+          darkMode={this.props.darkMode}
         />
 
         <ConfirmDialog
diff --git a/frontend/src/_components/ConfirmDialog.jsx b/frontend/src/_components/ConfirmDialog.jsx
index f705290e4d..0181ce37e1 100644
--- a/frontend/src/_components/ConfirmDialog.jsx
+++ b/frontend/src/_components/ConfirmDialog.jsx
@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import Modal from 'react-bootstrap/Modal';
 import Button from 'react-bootstrap/Button';
 
-export function ConfirmDialog({ show, message, onConfirm, onCancel, confirmButtonLoading }) {
+export function ConfirmDialog({ show, message, onConfirm, onCancel, confirmButtonLoading, darkMode }) {
   const [showModal, setShow] = useState(show);
 
   useEffect(() => {
@@ -20,7 +20,13 @@ export function ConfirmDialog({ show, message, onConfirm, onCancel, confirmButto
 
   return (
     <>
-      <Modal show={showModal} onHide={handleClose} size="sm" centered={true}>
+      <Modal
+        show={showModal}
+        onHide={handleClose}
+        size="sm"
+        centered={true}
+        contentClassName={darkMode ? 'theme-dark' : ''}
+      >
         <div className="modal-status bg-danger"></div>
         <Modal.Body>{message}</Modal.Body>
         <Modal.Footer>