diff --git a/source/frontend/src/components/common/GenericModal.tsx b/source/frontend/src/components/common/GenericModal.tsx
index 086b2ba2a1..0eb3d28e84 100644
--- a/source/frontend/src/components/common/GenericModal.tsx
+++ b/source/frontend/src/components/common/GenericModal.tsx
@@ -82,8 +82,6 @@ export interface ModalContent {
   headerIcon?: string | React.ReactNode;
   /** Optional message to display - no default. */
   message?: string | React.ReactNode;
-  /** optional override to control the x button in the top right of the modal. Default is to show. */
-  closeButton?: boolean;
   /** provide the size of the modal, default width is 50.0rem */
   modalSize?: ModalSize;
   variant: 'info' | 'warning' | 'error';
@@ -117,7 +115,6 @@ export const GenericModal = (props: Omit<BsModalProps, 'onHide'> & ModalProps) =
     okButtonHref,
     cancelButtonVariant,
     cancelButtonText,
-    closeButton,
     hideFooter,
     modalSize = ModalSize.MEDIUM,
     variant,
@@ -211,7 +208,7 @@ export const GenericModal = (props: Omit<BsModalProps, 'onHide'> & ModalProps) =
       onHide={noop}
       className={getModalClass()}
     >
-      <Modal.Header closeButton={closeButton} onHide={close}>
+      <Modal.Header onHide={close}>
         {headerIconValue && (
           <>
             <div className="header-icon">{headerIconValue}</div>
@@ -219,11 +216,9 @@ export const GenericModal = (props: Omit<BsModalProps, 'onHide'> & ModalProps) =
           </>
         )}
         <Modal.Title>{title}</Modal.Title>
-        {!closeButton && (
-          <div className="modal-close-btn">
-            <FaWindowClose size={24} onClick={close} />
-          </div>
-        )}
+        <div className="modal-close-btn">
+          <FaWindowClose size={24} onClick={close} />
+        </div>
       </Modal.Header>
 
       <Modal.Body style={{ whiteSpace: 'pre-line' }}>{message}</Modal.Body>
diff --git a/source/frontend/src/features/documents/documentUpload/DocumentUploadContainer.tsx b/source/frontend/src/features/documents/documentUpload/DocumentUploadContainer.tsx
index ae69d8c382..f4f4223f44 100644
--- a/source/frontend/src/features/documents/documentUpload/DocumentUploadContainer.tsx
+++ b/source/frontend/src/features/documents/documentUpload/DocumentUploadContainer.tsx
@@ -52,7 +52,6 @@ const DocumentUploadContainer = forwardRef<
 
   const { setDisplayModal } = useModalContext({
     ...deleteModalProps,
-    closeButton: false,
     handleOk: () => {
       handleCancelConfirm();
     },
diff --git a/source/frontend/src/features/leases/detail/LeasePages/deposits/DepositsContainer.tsx b/source/frontend/src/features/leases/detail/LeasePages/deposits/DepositsContainer.tsx
index 5060fc193b..45508b2f67 100644
--- a/source/frontend/src/features/leases/detail/LeasePages/deposits/DepositsContainer.tsx
+++ b/source/frontend/src/features/leases/detail/LeasePages/deposits/DepositsContainer.tsx
@@ -239,7 +239,6 @@ export const DepositsContainer: React.FunctionComponent<
               message={`Are you sure you want to remove the deposit?`}
               handleOk={() => onDeleteDepositConfirmed()}
               okButtonText="OK"
-              closeButton
               setDisplay={setDeleteModalWarning}
             />
             <GenericModal
@@ -249,7 +248,6 @@ export const DepositsContainer: React.FunctionComponent<
               message={`Are you sure you want to remove this deposit return?`}
               handleOk={() => onDeleteDepositReturnConfirmed()}
               okButtonText="OK"
-              closeButton
               setDisplay={setDeleteReturnModalWarning}
             />
 
diff --git a/source/frontend/src/features/notes/__snapshots__/NoteContainer.test.tsx.snap b/source/frontend/src/features/notes/__snapshots__/NoteContainer.test.tsx.snap
index 0da5a9b98f..9553f8e17a 100644
--- a/source/frontend/src/features/notes/__snapshots__/NoteContainer.test.tsx.snap
+++ b/source/frontend/src/features/notes/__snapshots__/NoteContainer.test.tsx.snap
@@ -313,21 +313,23 @@ exports[`NoteContainer component > renders as expected 1`] = `
           >
             Notes
           </div>
-          <button
-            class="close"
-            type="button"
+          <div
+            class="modal-close-btn"
           >
-            <span
-              aria-hidden="true"
+            <svg
+              fill="currentColor"
+              height="24"
+              stroke="currentColor"
+              stroke-width="0"
+              viewBox="0 0 512 512"
+              width="24"
+              xmlns="http://www.w3.org/2000/svg"
             >
-              ×
-            </span>
-            <span
-              class="sr-only"
-            >
-              Close
-            </span>
-          </button>
+              <path
+                d="M464 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-83.6 290.5c4.8 4.8 4.8 12.6 0 17.4l-40.5 40.5c-4.8 4.8-12.6 4.8-17.4 0L256 313.3l-66.5 67.1c-4.8 4.8-12.6 4.8-17.4 0l-40.5-40.5c-4.8-4.8-4.8-12.6 0-17.4l67.1-66.5-67.1-66.5c-4.8-4.8-4.8-12.6 0-17.4l40.5-40.5c4.8-4.8 12.6-4.8 17.4 0l66.5 67.1 66.5-67.1c4.8-4.8 12.6-4.8 17.4 0l40.5 40.5c4.8 4.8 4.8 12.6 0 17.4L313.3 256l67.1 66.5z"
+              />
+            </svg>
+          </div>
         </div>
         <div
           class="modal-body"
diff --git a/source/frontend/src/features/notes/detail/NoteDetailsFormModal.tsx b/source/frontend/src/features/notes/detail/NoteDetailsFormModal.tsx
index 82b3f07a75..634e9542c7 100644
--- a/source/frontend/src/features/notes/detail/NoteDetailsFormModal.tsx
+++ b/source/frontend/src/features/notes/detail/NoteDetailsFormModal.tsx
@@ -92,7 +92,6 @@ export const NoteDetailsFormModal: React.FC<
       okButtonText="Close"
       handleOk={onCloseClick}
       handleCancel={onCloseClick}
-      closeButton
     ></StyledModal>
   );
 };
diff --git a/source/frontend/src/features/notes/detail/__snapshots__/NoteDetailsFormModal.test.tsx.snap b/source/frontend/src/features/notes/detail/__snapshots__/NoteDetailsFormModal.test.tsx.snap
index 1f22567e5b..b790c36fc1 100644
--- a/source/frontend/src/features/notes/detail/__snapshots__/NoteDetailsFormModal.test.tsx.snap
+++ b/source/frontend/src/features/notes/detail/__snapshots__/NoteDetailsFormModal.test.tsx.snap
@@ -313,21 +313,23 @@ exports[`NoteDetailsFormModal component > renders as expected 1`] = `
           >
             Notes
           </div>
-          <button
-            class="close"
-            type="button"
+          <div
+            class="modal-close-btn"
           >
-            <span
-              aria-hidden="true"
-            >
-              ×
-            </span>
-            <span
-              class="sr-only"
+            <svg
+              fill="currentColor"
+              height="24"
+              stroke="currentColor"
+              stroke-width="0"
+              viewBox="0 0 512 512"
+              width="24"
+              xmlns="http://www.w3.org/2000/svg"
             >
-              Close
-            </span>
-          </button>
+              <path
+                d="M464 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-83.6 290.5c4.8 4.8 4.8 12.6 0 17.4l-40.5 40.5c-4.8 4.8-12.6 4.8-17.4 0L256 313.3l-66.5 67.1c-4.8 4.8-12.6 4.8-17.4 0l-40.5-40.5c-4.8-4.8-4.8-12.6 0-17.4l67.1-66.5-67.1-66.5c-4.8-4.8-4.8-12.6 0-17.4l40.5-40.5c4.8-4.8 12.6-4.8 17.4 0l66.5 67.1 66.5-67.1c4.8-4.8 12.6-4.8 17.4 0l40.5 40.5c4.8 4.8 4.8 12.6 0 17.4L313.3 256l67.1 66.5z"
+              />
+            </svg>
+          </div>
         </div>
         <div
           class="modal-body"
diff --git a/source/frontend/src/features/notes/list/NoteResults/__snapshots__/NoteResults.test.tsx.snap b/source/frontend/src/features/notes/list/NoteResults/__snapshots__/NoteResults.test.tsx.snap
index f858add78a..e539a682e8 100644
--- a/source/frontend/src/features/notes/list/NoteResults/__snapshots__/NoteResults.test.tsx.snap
+++ b/source/frontend/src/features/notes/list/NoteResults/__snapshots__/NoteResults.test.tsx.snap
@@ -343,7 +343,7 @@ exports[`Note Results Table > matches snapshot 1`] = `
           class="th"
           colspan="1"
           role="columnheader"
-          style="box-sizing: border-box; flex: 10 0 auto; min-width: 30px; width: 10px; justify-content: center; text-align: center; flex-wrap: wrap; align-items: center; display: flex;"
+          style="box-sizing: border-box; flex: 20 0 auto; min-width: 30px; width: 20px; justify-content: center; text-align: center; flex-wrap: wrap; align-items: center; display: flex;"
         >
           <div
             class="sortable-column"
@@ -392,7 +392,7 @@ exports[`Note Results Table > matches snapshot 1`] = `
           <div
             class="td"
             role="cell"
-            style="box-sizing: border-box; flex: 10 0 auto; min-width: 30px; width: 10px; justify-content: center; text-align: center; flex-wrap: wrap; align-items: center; display: flex;"
+            style="box-sizing: border-box; flex: 20 0 auto; min-width: 30px; width: 20px; justify-content: center; text-align: center; flex-wrap: wrap; align-items: center; display: flex;"
             title=""
           >
             <div
@@ -460,7 +460,7 @@ exports[`Note Results Table > matches snapshot 1`] = `
           <div
             class="td"
             role="cell"
-            style="box-sizing: border-box; flex: 10 0 auto; min-width: 30px; width: 10px; justify-content: center; text-align: center; flex-wrap: wrap; align-items: center; display: flex;"
+            style="box-sizing: border-box; flex: 20 0 auto; min-width: 30px; width: 20px; justify-content: center; text-align: center; flex-wrap: wrap; align-items: center; display: flex;"
             title=""
           >
             <div
@@ -528,7 +528,7 @@ exports[`Note Results Table > matches snapshot 1`] = `
           <div
             class="td"
             role="cell"
-            style="box-sizing: border-box; flex: 10 0 auto; min-width: 30px; width: 10px; justify-content: center; text-align: center; flex-wrap: wrap; align-items: center; display: flex;"
+            style="box-sizing: border-box; flex: 20 0 auto; min-width: 30px; width: 20px; justify-content: center; text-align: center; flex-wrap: wrap; align-items: center; display: flex;"
             title=""
           >
             <div
@@ -596,7 +596,7 @@ exports[`Note Results Table > matches snapshot 1`] = `
           <div
             class="td"
             role="cell"
-            style="box-sizing: border-box; flex: 10 0 auto; min-width: 30px; width: 10px; justify-content: center; text-align: center; flex-wrap: wrap; align-items: center; display: flex;"
+            style="box-sizing: border-box; flex: 20 0 auto; min-width: 30px; width: 20px; justify-content: center; text-align: center; flex-wrap: wrap; align-items: center; display: flex;"
             title=""
           >
             <div
diff --git a/source/frontend/src/features/notes/list/NoteResults/columns.tsx b/source/frontend/src/features/notes/list/NoteResults/columns.tsx
index 0b6313b43d..a3b2e6066c 100644
--- a/source/frontend/src/features/notes/list/NoteResults/columns.tsx
+++ b/source/frontend/src/features/notes/list/NoteResults/columns.tsx
@@ -45,8 +45,8 @@ export function createTableColumns(
       accessor: 'controls' as any, // this column is not part of the data model
       align: 'center',
       sortable: false,
-      width: 10,
-      maxWidth: 10,
+      width: 20,
+      maxWidth: 20,
       Cell: (cellProps: CellProps<ApiGen_Concepts_Note>) => {
         const { hasClaim } = useKeycloakWrapper();
 
@@ -57,6 +57,7 @@ export function createTableColumns(
                 title="View Note"
                 variant="light"
                 onClick={() => onShowDetails(cellProps.row.original)}
+                className="pl-0"
               >
                 <ImFileText2 size="2rem" />
               </StyledIconButton>
diff --git a/source/frontend/src/features/notes/list/__snapshots__/NoteListView.test.tsx.snap b/source/frontend/src/features/notes/list/__snapshots__/NoteListView.test.tsx.snap
index 1fbcd4663e..774d0eb0f1 100644
--- a/source/frontend/src/features/notes/list/__snapshots__/NoteListView.test.tsx.snap
+++ b/source/frontend/src/features/notes/list/__snapshots__/NoteListView.test.tsx.snap
@@ -273,7 +273,7 @@ exports[`Note List View > renders as expected 1`] = `
                   class="th"
                   colspan="1"
                   role="columnheader"
-                  style="box-sizing: border-box; flex: 10 0 auto; min-width: 30px; width: 10px; justify-content: center; text-align: center; flex-wrap: wrap; align-items: center; display: flex;"
+                  style="box-sizing: border-box; flex: 20 0 auto; min-width: 30px; width: 20px; justify-content: center; text-align: center; flex-wrap: wrap; align-items: center; display: flex;"
                 >
                   <div
                     class="sortable-column"
diff --git a/source/frontend/src/features/notes/update/UpdateNoteFormModal.tsx b/source/frontend/src/features/notes/update/UpdateNoteFormModal.tsx
index 819a16d9f2..9a28829585 100644
--- a/source/frontend/src/features/notes/update/UpdateNoteFormModal.tsx
+++ b/source/frontend/src/features/notes/update/UpdateNoteFormModal.tsx
@@ -57,7 +57,6 @@ export const UpdateNoteFormModal = React.forwardRef<
           display={isOpened}
           title="Notes"
           message={loading ? spinner : <FormBody {...formikProps}></FormBody>}
-          closeButton
           okButtonText="Save"
           cancelButtonText="Cancel"
           handleOk={() => {
diff --git a/source/frontend/src/features/notes/update/__snapshots__/UpdateNoteContainer.test.tsx.snap b/source/frontend/src/features/notes/update/__snapshots__/UpdateNoteContainer.test.tsx.snap
index 7637ad0fc9..d67847f8de 100644
--- a/source/frontend/src/features/notes/update/__snapshots__/UpdateNoteContainer.test.tsx.snap
+++ b/source/frontend/src/features/notes/update/__snapshots__/UpdateNoteContainer.test.tsx.snap
@@ -303,21 +303,23 @@ exports[`UpdateNoteContainer component > renders as expected 1`] = `
           >
             Notes
           </div>
-          <button
-            class="close"
-            type="button"
+          <div
+            class="modal-close-btn"
           >
-            <span
-              aria-hidden="true"
+            <svg
+              fill="currentColor"
+              height="24"
+              stroke="currentColor"
+              stroke-width="0"
+              viewBox="0 0 512 512"
+              width="24"
+              xmlns="http://www.w3.org/2000/svg"
             >
-              ×
-            </span>
-            <span
-              class="sr-only"
-            >
-              Close
-            </span>
-          </button>
+              <path
+                d="M464 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-83.6 290.5c4.8 4.8 4.8 12.6 0 17.4l-40.5 40.5c-4.8 4.8-12.6 4.8-17.4 0L256 313.3l-66.5 67.1c-4.8 4.8-12.6 4.8-17.4 0l-40.5-40.5c-4.8-4.8-4.8-12.6 0-17.4l67.1-66.5-67.1-66.5c-4.8-4.8-4.8-12.6 0-17.4l40.5-40.5c4.8-4.8 12.6-4.8 17.4 0l66.5 67.1 66.5-67.1c4.8-4.8 12.6-4.8 17.4 0l40.5 40.5c4.8 4.8 4.8 12.6 0 17.4L313.3 256l67.1 66.5z"
+              />
+            </svg>
+          </div>
         </div>
         <div
           class="modal-body"
diff --git a/source/frontend/src/features/notes/update/__snapshots__/UpdateNoteFormModal.test.tsx.snap b/source/frontend/src/features/notes/update/__snapshots__/UpdateNoteFormModal.test.tsx.snap
index da5e26f302..55ecd89302 100644
--- a/source/frontend/src/features/notes/update/__snapshots__/UpdateNoteFormModal.test.tsx.snap
+++ b/source/frontend/src/features/notes/update/__snapshots__/UpdateNoteFormModal.test.tsx.snap
@@ -302,21 +302,23 @@ exports[`UpdateNoteFormModal component > renders as expected 1`] = `
           >
             Notes
           </div>
-          <button
-            class="close"
-            type="button"
+          <div
+            class="modal-close-btn"
           >
-            <span
-              aria-hidden="true"
+            <svg
+              fill="currentColor"
+              height="24"
+              stroke="currentColor"
+              stroke-width="0"
+              viewBox="0 0 512 512"
+              width="24"
+              xmlns="http://www.w3.org/2000/svg"
             >
-              ×
-            </span>
-            <span
-              class="sr-only"
-            >
-              Close
-            </span>
-          </button>
+              <path
+                d="M464 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-83.6 290.5c4.8 4.8 4.8 12.6 0 17.4l-40.5 40.5c-4.8 4.8-12.6 4.8-17.4 0L256 313.3l-66.5 67.1c-4.8 4.8-12.6 4.8-17.4 0l-40.5-40.5c-4.8-4.8-4.8-12.6 0-17.4l67.1-66.5-67.1-66.5c-4.8-4.8-4.8-12.6 0-17.4l40.5-40.5c4.8-4.8 12.6-4.8 17.4 0l66.5 67.1 66.5-67.1c4.8-4.8 12.6-4.8 17.4 0l40.5 40.5c4.8 4.8 4.8 12.6 0 17.4L313.3 256l67.1 66.5z"
+              />
+            </svg>
+          </div>
         </div>
         <div
           class="modal-body"
diff --git a/source/frontend/src/features/projects/reports/ProjectExportContainer.tsx b/source/frontend/src/features/projects/reports/ProjectExportContainer.tsx
index fe77c6e7b7..ae0ac9e53e 100644
--- a/source/frontend/src/features/projects/reports/ProjectExportContainer.tsx
+++ b/source/frontend/src/features/projects/reports/ProjectExportContainer.tsx
@@ -55,7 +55,6 @@ export const SideProjectContainer: React.FunctionComponent<ISideProjectContainer
         title: 'Warning',
         message: 'There is no data for the input parameters you entered.',
         okButtonText: 'Close',
-        closeButton: true,
         handleOk: () => setDisplayModal(false),
       });
       setDisplayModal(true);
@@ -75,7 +74,6 @@ export const SideProjectContainer: React.FunctionComponent<ISideProjectContainer
         title: 'Warning',
         message: 'There is no data for the input parameters you entered.',
         okButtonText: 'Close',
-        closeButton: true,
         handleOk: () => setDisplayModal(false),
       });
       setDisplayModal(true);