diff --git a/public/locales/en.json b/public/locales/en.json
index 5a004d11e6..36748804c4 100644
--- a/public/locales/en.json
+++ b/public/locales/en.json
@@ -290,14 +290,18 @@
     "title": "Action Items",
     "actionItemCategory": "Action Item Category",
     "actionItemDetails": "Action Item Details",
+    "assignee": "Assignee",
+    "assigner": "Assigner",
     "createActionItem": "Create",
     "close": "Close",
     "searchByName": "Search By Name",
     "preCompletionNotes": "Pre Completion Notes",
     "postCompletionNotes": "Post Completion Notes",
+    "assignmentDate": "Assignment Date",
     "dueDate": "Due Date",
     "completionDate": "Completion Date",
     "isCompleted": "Completed",
+    "status": "Status",
     "latest": "Latest",
     "earliest": "Earliest",
     "editActionItem": "Edit Action Item",
diff --git a/src/GraphQl/Mutations/ActionItemMutations.ts b/src/GraphQl/Mutations/ActionItemMutations.ts
index 489f182dcc..58dc7756d3 100644
--- a/src/GraphQl/Mutations/ActionItemMutations.ts
+++ b/src/GraphQl/Mutations/ActionItemMutations.ts
@@ -3,8 +3,8 @@ import gql from 'graphql-tag';
 /**
  * GraphQL mutation to create an action item.
  *
- * @param assigneeId - User to whom the ActionItem is assigned.
  * @param actionItemCategoryId - ActionItemCategory to which the ActionItem is related.
+ * @param assigneeId - User to whom the ActionItem is assigned.
  * @param preCompletionNotes - Notes prior to completion.
  * @param dueDate - Due date.
  * @param eventId - Event to which the ActionItem is related.
@@ -28,16 +28,6 @@ export const CREATE_ACTION_ITEM_MUTATION = gql`
       }
     ) {
       _id
-      creator {
-        _id
-        email
-      }
-      assignmentDate
-      dueDate
-      event {
-        title
-      }
-      isCompleted
     }
   }
 `;
@@ -45,8 +35,8 @@ export const CREATE_ACTION_ITEM_MUTATION = gql`
 /**
  * GraphQL mutation to update an action item.
  *
- * @param assigneeId - User to whom the ActionItem is assigned.
  * @param id - Id of the ActionItem to be updated.
+ * @param assigneeId - User to whom the ActionItem is assigned.
  * @param preCompletionNotes - Notes prior to completion.
  * @param postCompletionNotes - Notes on completion.
  * @param dueDate - Due date.
@@ -76,17 +66,6 @@ export const UPDATE_ACTION_ITEM_MUTATION = gql`
       }
     ) {
       _id
-      creator {
-        _id
-        email
-      }
-      assignmentDate
-      dueDate
-      completionDate
-      event {
-        title
-      }
-      isCompleted
     }
   }
 `;
@@ -101,16 +80,6 @@ export const DELETE_ACTION_ITEM_MUTATION = gql`
   mutation RemoveActionItem($actionItemId: ID!) {
     removeActionItem(id: $actionItemId) {
       _id
-      creator {
-        _id
-        email
-      }
-      assignmentDate
-      dueDate
-      event {
-        title
-      }
-      isCompleted
     }
   }
 `;
diff --git a/src/components/ActionItemsContainer/ActionItemsContainer.module.css b/src/components/ActionItemsContainer/ActionItemsContainer.module.css
index d1831124db..b9837678ed 100644
--- a/src/components/ActionItemsContainer/ActionItemsContainer.module.css
+++ b/src/components/ActionItemsContainer/ActionItemsContainer.module.css
@@ -52,6 +52,22 @@
   width: 100%;
 }
 
+.iconContainer {
+  display: flex;
+  justify-content: flex-end;
+}
+.icon {
+  margin: 1px;
+}
+
+.preview {
+  display: flex;
+  flex-direction: row;
+  font-weight: 900;
+  font-size: 16px;
+  color: rgb(80, 80, 80);
+}
+
 .titlemodal {
   color: #707070;
   font-weight: 600;
@@ -61,3 +77,10 @@
   border-bottom: 3px solid #31bb6b;
   width: 65%;
 }
+
+.view {
+  margin-left: 2%;
+  font-weight: 600;
+  font-size: 16px;
+  color: #707070;
+}
diff --git a/src/components/ActionItemsContainer/ActionItemsContainer.tsx b/src/components/ActionItemsContainer/ActionItemsContainer.tsx
index 43f0e01a70..efea7bc2d0 100644
--- a/src/components/ActionItemsContainer/ActionItemsContainer.tsx
+++ b/src/components/ActionItemsContainer/ActionItemsContainer.tsx
@@ -30,27 +30,53 @@ function actionItemsContainer({
     keyPrefix: 'organizationActionItems',
   });
 
+  const [actionItemPreviewModalIsOpen, setActionItemPreviewModalIsOpen] =
+    useState(false);
   const [actionItemUpdateModalIsOpen, setActionItemUpdateModalIsOpen] =
     useState(false);
   const [actionItemDeleteModalIsOpen, setActionItemDeleteModalIsOpen] =
     useState(false);
 
+  const [assignmentDate, setAssignmentDate] = useState<Date | null>(new Date());
   const [dueDate, setDueDate] = useState<Date | null>(new Date());
   const [completionDate, setCompletionDate] = useState<Date | null>();
   const [actionItemId, setActionItemId] = useState('');
 
   const [formState, setFormState] = useState({
     assignee: '',
+    assigner: '',
     assigneeId: '',
+    assignmentDate: '',
     preCompletionNotes: '',
     postCompletionNotes: '',
     isCompleted: false,
   });
 
+  const showPreviewModal = (actionItem: InterfaceActionItemInfo): void => {
+    setFormState({
+      ...formState,
+      assignee: `${actionItem.assignee.firstName} ${actionItem.assignee.lastName}`,
+      assigner: `${actionItem.assigner.firstName} ${actionItem.assigner.lastName}`,
+      assigneeId: actionItem.assignee._id,
+      preCompletionNotes: actionItem.preCompletionNotes,
+      postCompletionNotes: actionItem.postCompletionNotes,
+      isCompleted: actionItem.isCompleted,
+    });
+    setActionItemId(actionItem._id);
+    setAssignmentDate(actionItem.assignmentDate);
+    setDueDate(actionItem.dueDate);
+    setCompletionDate(actionItem.completionDate);
+    setActionItemPreviewModalIsOpen(true);
+  };
+
   const showUpdateModal = (): void => {
     setActionItemUpdateModalIsOpen(!actionItemUpdateModalIsOpen);
   };
 
+  const hidePreviewModal = (): void => {
+    setActionItemPreviewModalIsOpen(false);
+  };
+
   const hideUpdateModal = (): void => {
     setActionItemId('');
     setActionItemUpdateModalIsOpen(!actionItemUpdateModalIsOpen);
@@ -179,7 +205,7 @@ function actionItemsContainer({
                     <Button
                       className="btn btn-sm me-2"
                       variant="outline-secondary"
-                      // onClick={showDetailsModal}
+                      onClick={() => showPreviewModal(actionItem)}
                     >
                       Details
                     </Button>
@@ -235,7 +261,6 @@ function actionItemsContainer({
             <Form.Group className="mb-3">
               <Form.Label>Assignee</Form.Label>
               <Form.Select
-                required
                 defaultValue=""
                 onChange={(e) =>
                   setFormState({ ...formState, assigneeId: e.target.value })
@@ -307,7 +332,7 @@ function actionItemsContainer({
               <div>
                 <DatePicker
                   label={t('completionDate')}
-                  className={`${styles.datebox} ms-auto`}
+                  className={styles.datebox}
                   value={dayjs(completionDate)}
                   onChange={(date: Dayjs | null): void => {
                     if (date) {
@@ -384,6 +409,86 @@ function actionItemsContainer({
           </Button>
         </Modal.Footer>
       </Modal>
+
+      {/* preview modal */}
+      <Modal show={actionItemPreviewModalIsOpen}>
+        <Modal.Header>
+          <p className={styles.titlemodal}>{t('actionItemDetails')}</p>
+          <Button
+            onClick={hidePreviewModal}
+            data-testid="previewActionItemModalCloseBtn"
+          >
+            <i className="fa fa-times"></i>
+          </Button>
+        </Modal.Header>
+        <Modal.Body>
+          <Form>
+            <div>
+              <p className={styles.preview}>
+                {t('assignee')}:{' '}
+                <span className={styles.view}>{formState.assignee}</span>
+              </p>
+              <p className={styles.preview}>
+                {t('assigner')}:{' '}
+                <span className={styles.view}>{formState.assigner}</span>
+              </p>
+              <p className={styles.preview}>
+                {t('preCompletionNotes')}:
+                <span className={styles.view}>
+                  {formState.preCompletionNotes}
+                </span>
+              </p>
+              <p className={styles.preview}>
+                {t('postCompletionNotes')}:
+                <span className={styles.view}>
+                  {formState.postCompletionNotes}
+                </span>
+              </p>
+              <p className={styles.preview}>
+                {t('assignmentDate')}:{' '}
+                <span className={styles.view}>{assignmentDate}</span>
+              </p>
+              <p className={styles.preview}>
+                {t('dueDate')}: <span className={styles.view}>{dueDate}</span>
+              </p>
+              <p className={styles.preview}>
+                {t('completionDate')}:{' '}
+                <span className={styles.view}>{completionDate}</span>
+              </p>
+              <p className={styles.preview}>
+                {t('status')}:{' '}
+                <span className={styles.view}>
+                  {formState.isCompleted ? 'Completed' : 'In Progress'}
+                </span>
+              </p>
+            </div>
+            <div className={styles.iconContainer}>
+              <Button
+                size="sm"
+                data-testid="editActionItemModalBtn"
+                className={styles.icon}
+                onClick={() => {
+                  hidePreviewModal();
+                  showUpdateModal();
+                }}
+              >
+                {' '}
+                <i className="fas fa-edit"></i>
+              </Button>
+              <Button
+                size="sm"
+                data-testid="deleteActionItemModalBtn"
+                className={`${styles.icon} ms-2`}
+                onClick={toggleDeleteModal}
+                variant="danger"
+              >
+                {' '}
+                <i className="fa fa-trash"></i>
+              </Button>
+            </div>
+          </Form>
+        </Modal.Body>
+      </Modal>
     </>
   );
 }