diff --git a/client/src/components/DashPosts.jsx b/client/src/components/DashPosts.jsx
index 5080369..d95b968 100644
--- a/client/src/components/DashPosts.jsx
+++ b/client/src/components/DashPosts.jsx
@@ -4,6 +4,8 @@ import { useSelector } from 'react-redux';
 import { Link } from 'react-router-dom';
 import { HiOutlineExclamationCircle } from 'react-icons/hi';
 import { set } from 'mongoose';
+import PopupModal from './PopupModal';
+
 
 export default function DashPosts() {
   const { currentUser } = useSelector((state) => state.user);
@@ -145,30 +147,8 @@ export default function DashPosts() {
       ) : (
         <p>You have no posts yet!</p>
       )}
-      <Modal
-        show={showModal}
-        onClose={() => setShowModal(false)}
-        popup
-        size='md'
-      >
-        <Modal.Header />
-        <Modal.Body>
-          <div className='text-center'>
-            <HiOutlineExclamationCircle className='h-14 w-14 text-gray-400 dark:text-gray-200 mb-4 mx-auto' />
-            <h3 className='mb-5 text-lg text-gray-500 dark:text-gray-400'>
-              Are you sure you want to delete this post?
-            </h3>
-            <div className='flex justify-center gap-4'>
-              <Button color='failure' onClick={handleDeletePost}>
-                Yes, I'm sure
-              </Button>
-              <Button color='gray' onClick={() => setShowModal(false)}>
-                No, cancel
-              </Button>
-            </div>
-          </div>
-        </Modal.Body>
-      </Modal>
+            <PopupModal showModal={showModal} onClose={() => setShowModal(false)} onConfirm={handleDeletePost} title="Are you sure you want to delete post" />
+
     </div>
   );
 }
diff --git a/client/src/components/DashProfile.jsx b/client/src/components/DashProfile.jsx
index 09d14f3..b2bc403 100644
--- a/client/src/components/DashProfile.jsx
+++ b/client/src/components/DashProfile.jsx
@@ -22,6 +22,8 @@ import {
 import { useDispatch } from 'react-redux';
 import { HiOutlineExclamationCircle } from 'react-icons/hi';
 import { Link } from 'react-router-dom';
+import PopupModal from "../components/PopupModal";
+
 
 export default function DashProfile() {
   const { currentUser, error, loading } = useSelector((state) => state.user);
@@ -276,30 +278,8 @@ export default function DashProfile() {
           {error}
         </Alert>
       )}
-      <Modal
-        show={showModal}
-        onClose={() => setShowModal(false)}
-        popup
-        size='md'
-      >
-        <Modal.Header />
-        <Modal.Body>
-          <div className='text-center'>
-            <HiOutlineExclamationCircle className='h-14 w-14 text-gray-400 dark:text-gray-200 mb-4 mx-auto' />
-            <h3 className='mb-5 text-lg text-gray-500 dark:text-gray-400'>
-              Are you sure you want to delete your account?
-            </h3>
-            <div className='flex justify-center gap-4'>
-              <Button color='failure' onClick={handleDeleteUser}>
-                Yes, I'm sure
-              </Button>
-              <Button color='gray' onClick={() => setShowModal(false)}>
-                No, cancel
-              </Button>
-            </div>
-          </div>
-        </Modal.Body>
-      </Modal>
+            <PopupModal showModal={showModal} onClose={() => setShowModal(false)} onConfirm={handleDeleteUser} title="Are you sure you want to delete your account" />
+
     </div>
   );
 }
diff --git a/client/src/components/PopupModal.jsx b/client/src/components/PopupModal.jsx
new file mode 100644
index 0000000..d83e514
--- /dev/null
+++ b/client/src/components/PopupModal.jsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import { HiOutlineExclamationCircle } from "react-icons/hi";
+import { Button, Modal } from "flowbite-react";
+
+
+const PopupModal = ({ onConfirm, showModal, onClose, title }) => {
+  return (
+    <div>
+      <Modal show={showModal} onClose={onClose} popup size="md">
+        <Modal.Header />
+        <Modal.Body>
+          <div className="text-center">
+            <HiOutlineExclamationCircle className="text-5xl text-gray-200 dark:text-gray-200 mb-4 mx-auto" />
+            <h3 className="mb-5 text-lg text-gray-500 dark:text-gray-400">{title}</h3>
+            <div className="flex justify-center gap-4">
+              <Button color="failure" onClick={onConfirm}>Yes I'm Sure</Button>
+              <Button color="gray" onClick={onClose}>No, Cancel</Button>
+            </div>
+          </div>
+        </Modal.Body>
+      </Modal>
+    </div>
+  );
+};
+
+export default PopupModal;