diff --git a/src/components/OrgPostCard/DeletePostModal.spec.tsx b/src/components/OrgPostCard/DeletePostModal.spec.tsx
new file mode 100644
index 0000000000..2a4ed220b2
--- /dev/null
+++ b/src/components/OrgPostCard/DeletePostModal.spec.tsx
@@ -0,0 +1,77 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { I18nextProvider } from 'react-i18next';
+import { vi } from 'vitest';
+
+import DeletePostModal from './DeletePostModal';
+import i18nForTest from 'utils/i18nForTest';
+
+describe('DeletePostModal', () => {
+  it('renders the delete modal with correct text', () => {
+    const mockOnHide = vi.fn();
+    const mockOnDelete = vi.fn();
+
+    render(
+      <I18nextProvider i18n={i18nForTest}>
+        <DeletePostModal
+          show={true}
+          onHide={mockOnHide}
+          onDelete={mockOnDelete}
+        />
+      </I18nextProvider>,
+    );
+
+    expect(screen.getByTestId('delete-post-modal')).toBeInTheDocument();
+    expect(screen.getByText(/delete post/i)).toBeInTheDocument();
+    expect(
+      screen.getByText(/do you want to remove this post\?/i),
+    ).toBeInTheDocument();
+  });
+
+  it('hides the modal when "No" is clicked', () => {
+    const mockOnHide = vi.fn();
+    const mockOnDelete = vi.fn();
+
+    render(
+      <I18nextProvider i18n={i18nForTest}>
+        <DeletePostModal
+          show={true}
+          onHide={mockOnHide}
+          onDelete={mockOnDelete}
+        />
+      </I18nextProvider>,
+    );
+
+    fireEvent.click(screen.getByTestId('deleteModalNoBtn'));
+    expect(mockOnHide).toHaveBeenCalledTimes(1);
+    expect(mockOnDelete).not.toHaveBeenCalled();
+  });
+
+  it('calls onDelete and onHide when "Yes" is clicked', () => {
+    const mockOnHide = vi.fn();
+    const mockOnDelete = vi.fn();
+
+    render(
+      <I18nextProvider i18n={i18nForTest}>
+        <DeletePostModal
+          show={true}
+          onHide={mockOnHide}
+          onDelete={mockOnDelete}
+        />
+      </I18nextProvider>,
+    );
+
+    fireEvent.click(screen.getByTestId('deletePostBtn'));
+    expect(mockOnDelete).toHaveBeenCalledTimes(1);
+    expect(mockOnHide).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not render the modal when show is false', () => {
+    const { queryByTestId } = render(
+      <I18nextProvider i18n={i18nForTest}>
+        <DeletePostModal show={false} onHide={vi.fn()} onDelete={vi.fn()} />
+      </I18nextProvider>,
+    );
+    expect(queryByTestId('delete-post-modal')).not.toBeInTheDocument();
+  });
+});
diff --git a/src/components/OrgPostCard/DeletePostModal.tsx b/src/components/OrgPostCard/DeletePostModal.tsx
new file mode 100644
index 0000000000..7e5fdc0d4b
--- /dev/null
+++ b/src/components/OrgPostCard/DeletePostModal.tsx
@@ -0,0 +1,56 @@
+import React, { type FC } from 'react';
+import { Modal, Button } from 'react-bootstrap';
+import { useTranslation } from 'react-i18next';
+
+interface InterfaceDeletePostModalProps {
+  show: boolean;
+  onHide: () => void;
+  onDelete: () => void;
+}
+
+const DeletePostModal: FC<InterfaceDeletePostModalProps> = ({
+  show,
+  onHide,
+  onDelete,
+}) => {
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'orgPostCard',
+  });
+  const { t: tCommon } = useTranslation('common');
+
+  const handleConfirmDelete = (): void => {
+    onDelete();
+    onHide();
+  };
+
+  return (
+    <Modal show={show} onHide={onHide} data-testid="delete-post-modal">
+      <Modal.Header>
+        <h5>{t('deletePost')}</h5>
+        <Button variant="danger" onClick={onHide}>
+          <i className="fa fa-times" />
+        </Button>
+      </Modal.Header>
+      <Modal.Body>{t('deletePostMsg')}</Modal.Body>
+      <Modal.Footer>
+        <Button
+          variant="danger"
+          onClick={onHide}
+          data-testid="deleteModalNoBtn"
+        >
+          {tCommon('no')}
+        </Button>
+        <Button
+          type="button"
+          className="btn btn-success"
+          onClick={handleConfirmDelete}
+          data-testid="deletePostBtn"
+        >
+          {tCommon('yes')}
+        </Button>
+      </Modal.Footer>
+    </Modal>
+  );
+};
+
+export default DeletePostModal;
diff --git a/src/components/OrgPostCard/OrgPostCard.tsx b/src/components/OrgPostCard/OrgPostCard.tsx
index f392c6ad1c..5bc9ca1407 100644
--- a/src/components/OrgPostCard/OrgPostCard.tsx
+++ b/src/components/OrgPostCard/OrgPostCard.tsx
@@ -15,6 +15,7 @@ import convertToBase64 from 'utils/convertToBase64';
 import { errorHandler } from 'utils/errorHandler';
 import type { InterfacePostForm } from 'utils/interfaces';
 import styles from '../../style/app.module.css';
+import DeletePostModal from './DeletePostModal';
 interface InterfaceOrgPostCardProps {
   postID: string;
   id: string;
@@ -57,11 +58,7 @@ export default function OrgPostCard(
   const [toggle] = useMutation(TOGGLE_PINNED_POST);
   const togglePostPin = async (id: string, pinned: boolean): Promise<void> => {
     try {
-      const { data } = await toggle({
-        variables: {
-          id,
-        },
-      });
+      const { data } = await toggle({ variables: { id } });
       if (data) {
         setModalVisible(false);
         setMenuVisible(false);
@@ -72,7 +69,6 @@ export default function OrgPostCard(
       }
     } catch (error: unknown) {
       if (error instanceof Error) {
-        /* istanbul ignore next */
         errorHandler(t, error);
       }
     }
@@ -106,10 +102,7 @@ export default function OrgPostCard(
     setMenuVisible(true);
   };
   const clearImageInput = (): void => {
-    setPostFormState({
-      ...postformState,
-      postphoto: '',
-    });
+    setPostFormState({ ...postformState, postphoto: '' });
     setPostPhotoUpdated(true);
     const fileInput = document.getElementById(
       'postImageUrl',
@@ -172,9 +165,7 @@ export default function OrgPostCard(
   const deletePost = async (): Promise<void> => {
     try {
       const { data } = await deletePostMutation({
-        variables: {
-          id,
-        },
+        variables: { id },
       });
       if (data) {
         toast.success(t('postDeleted') as string);
@@ -441,28 +432,11 @@ export default function OrgPostCard(
           </div>
         )}
       </div>
-      <Modal show={showDeleteModal} onHide={toggleShowDeleteModal}>
-        <Modal.Header>
-          <h5>{t('deletePost')}</h5>
-          <Button variant="danger" onClick={toggleShowDeleteModal}>
-            <i className="fa fa-times"></i>
-          </Button>
-        </Modal.Header>
-        <Modal.Body>{t('deletePostMsg')}</Modal.Body>
-        <Modal.Footer>
-          <Button variant="danger" onClick={toggleShowDeleteModal}>
-            {tCommon('no')}
-          </Button>
-          <Button
-            type="button"
-            className="btn btn-success"
-            onClick={deletePost}
-            data-testid="deletePostBtn"
-          >
-            {tCommon('yes')}
-          </Button>
-        </Modal.Footer>
-      </Modal>
+      <DeletePostModal
+        show={showDeleteModal}
+        onHide={toggleShowDeleteModal}
+        onDelete={() => deletePost()}
+      />
       <Modal
         show={showEditModal}
         onHide={toggleShowEditModal}
diff --git a/src/style/app.module.css b/src/style/app.module.css
index 7708a09713..e17bc3d76f 100644
--- a/src/style/app.module.css
+++ b/src/style/app.module.css
@@ -56,6 +56,7 @@
   --table-bg-color: var(--grey-bg-color);
   --tablerow-bg-color: var(--dropdown-hover-color);
   --row-background: var(--bs-white, var(--bs-white));
+  --modal-background: rgba(0, 0, 0, 0.7);
 
   /* Font Sizes */
   --font-size-header: 16px;
@@ -4958,7 +4959,7 @@ button[data-testid='createPostBtn'] {
 .buttonEventCalendar {
   border-radius: 100px;
   color: var(--bs-gray-600);
-  background-color: var(--grey-bg-color-dark);
+  background-color: var(--black-shadow-color);
   font-weight: bold;
   border: 0px;
   font-size: 20px;
@@ -5062,7 +5063,7 @@ button[data-testid='createPostBtn'] {
 }
 
 .day_weekends {
-  background-color: var(--grey-bg-color-dark);
+  background-color: var(--black-shadow-color);
 }
 
 .day__outside {
@@ -5104,14 +5105,14 @@ button[data-testid='createPostBtn'] {
   right: auto;
   overflow: auto;
   padding: 10px 4px 0px 4px;
-  background-color: var(--grey-bg-color);
+  background-color: var(--black-shadow-color);
   border: 1px solid var(--grey-border);
   border-radius: 5px;
   margin: 5px;
 }
 
 .holidays_card {
-  background-color: var(--white);
+  background-color: var(--black-shadow-color);
 }
 
 .events_card {
@@ -5488,7 +5489,7 @@ button[data-testid='createPostBtn'] {
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: var(--grey-bg-color-dark);
+  background-color: var(--black-shadow-color);
   z-index: 100;
 }
 
@@ -5501,7 +5502,7 @@ button[data-testid='createPostBtn'] {
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: var(--grey-bg-color-dark);
+  background-color: var(--modal-background);
   z-index: 100;
 }