diff --git a/frontend/src/views/SecretOverviewPage/components/ManageSecretModals/DeleteSecretModal.tsx b/frontend/src/views/SecretOverviewPage/components/ManageSecretModals/DeleteSecretModal.tsx
new file mode 100644
index 000000000..0b37d86fb
--- /dev/null
+++ b/frontend/src/views/SecretOverviewPage/components/ManageSecretModals/DeleteSecretModal.tsx
@@ -0,0 +1,33 @@
+import { type FC } from "react"
+import { Modal, ModalContent, Button } from "@app/components/v2";
+
+type Props = {
+  isModalOpen: boolean;
+  handleDeleteSecret: () => void;
+  toggleModal: () => void;
+};
+
+export const DeleteSecretModal: FC<Props> = ( { isModalOpen, toggleModal, handleDeleteSecret }) => {
+  return (
+    <>
+      <Modal isOpen={isModalOpen}>
+      <ModalContent
+        title="Confirm Secret Deletion"
+        subTitle="Are you sure you want to delete this secret ?"
+        footerContent={
+          <div className="flex items-center gap-4">
+            <Button colorSchema="primary" onClick={() => toggleModal()}>
+              Cancel
+            </Button>
+
+            <Button colorSchema="danger" onClick={() => handleDeleteSecret()}>
+              Delete
+            </Button>
+          </div>
+        }
+        onClose={toggleModal} >
+      </ModalContent>
+      </Modal>
+    </>
+  )
+}
diff --git a/frontend/src/views/SecretOverviewPage/components/ManageSecretModals/index.tsx b/frontend/src/views/SecretOverviewPage/components/ManageSecretModals/index.tsx
new file mode 100644
index 000000000..200163298
--- /dev/null
+++ b/frontend/src/views/SecretOverviewPage/components/ManageSecretModals/index.tsx
@@ -0,0 +1 @@
+export { DeleteSecretModal } from './DeleteSecretModal';