From 0db86ef2f14e67255262b22012f586503d778dc6 Mon Sep 17 00:00:00 2001
From: jacobshandling <61553566+jacobshandling@users.noreply.github.com>
Date: Tue, 10 Mar 2026 15:30:55 -0700
Subject: [PATCH] UI housekeeping: Update `Modal.children` from `JSX.Element`
 to `React.ReactNode`, remove empty fragment wrappers (#41394)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Refactor**
* Simplified modal structures across multiple dialog components for
improved code maintainability.
* Enhanced modal component's flexibility to support broader content
types.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../SoftwareInstallDetailsModal.tsx           |  18 +-
 .../SoftwareIpaInstallDetailsModal.tsx        |  18 +-
 .../SoftwareScriptDetailsModal.tsx            |  18 +-
 .../SoftwareUninstallDetailsModal.tsx         |  18 +-
 .../VppInstallDetailsModal.tsx                |  18 +-
 frontend/components/Modal/Modal.tsx           |   2 +-
 frontend/pages/AccountPage/AccountPage.tsx    |  60 ++-
 .../AppStoreDetailsModal.tsx                  |  78 ++--
 .../LibrarySoftwareDetailsModal.tsx           |  64 ++--
 .../RunScriptDetailsModal.tsx                 |   6 +-
 .../MdmSolutionModal/MdmSolutionModal.tsx     |  44 ++-
 .../DeleteCertificateModal.tsx                |  36 +-
 .../ConfigProfileStatusModal.tsx              |  10 +-
 .../AddProfileModal/AddProfileModal.tsx       |  82 ++---
 .../ResendConfigProfileModal.tsx              |  36 +-
 .../CancelScriptBatchModal.tsx                |  48 ++-
 .../EditScriptModal/EditScriptModal.tsx       |  46 ++-
 .../ScriptUploadModal/ScriptUploadModal.tsx   |  40 +-
 .../DeleteSecretModal/DeleteSecretModal.tsx   |  56 ++-
 .../DeleteSetupExperienceScriptModal.tsx      |  46 ++-
 .../DeleteAutoEnrollmentProfile.tsx           |  28 +-
 .../AddFleetAppSoftwareModal.tsx              |  12 +-
 .../FleetAppDetailsModal.tsx                  |  94 +++--
 .../AdvancedOptionsModal.tsx                  | 112 +++---
 .../DeleteSoftwareModal.tsx                   |  42 +--
 .../EditAutoUpdateConfigModal.tsx             | 228 ++++++------
 .../EditConfigurationModal.tsx                |  44 ++-
 .../EditIconModal/EditIconModal.tsx           |  36 +-
 .../ViewYamlModal/ViewYamlModal.tsx           |  68 ++--
 .../CategoriesEndUserExperienceModal.tsx      |  54 ++-
 .../PreviewTicketModal/PreviewTicketModal.tsx |  26 +-
 .../AddCertAuthorityModal.tsx                 |  18 +-
 .../DeleteCertificateAuthorityModal.tsx       |  36 +-
 .../ConditionalAccess/ConditionalAccess.tsx   |  40 +-
 .../EntraConditionalAccessModal.tsx           |  66 ++--
 .../OktaConditionalAccessModal.tsx            | 198 +++++-----
 .../TurnOffAndroidMdmModal.tsx                |  48 ++-
 .../components/AddAbmModal/AddAbmModal.tsx    | 174 +++++----
 .../DeleteAbmModal/DeleteAbmModal.tsx         |  54 ++-
 .../EditTeamsAbmModal/EditTeamsAbmModal.tsx   | 126 ++++---
 .../components/AddVppModal/AddVppModal.tsx    |  46 ++-
 .../DeleteVppModal/DeleteVppModal.tsx         |  56 ++-
 .../EditTeamsVppModal/EditTeamsVppModal.tsx   | 108 +++---
 .../RenewVppModal/RenewVppModal.tsx           |  48 ++-
 .../AddEntraTenantModal.tsx                   |  66 ++--
 .../DeleteEntraTenantModal.tsx                |  32 +-
 .../ExampleWebhookUrlPayloadModal.tsx         |  38 +-
 .../RemoveUserModal/RemoveUserModal.tsx       |  47 ++-
 .../DeleteTeamModal/DeleteTeamModal.tsx       |  46 ++-
 .../HostStatusWebhookPreviewModal.tsx         |  32 +-
 .../DeleteLabelModal/DeleteLabelModal.tsx     |  54 ++-
 .../RunScriptBatchModal.tsx                   |  68 ++--
 .../CommandDetailsModal.tsx                   |   6 +-
 .../DeleteHostModal/DeleteHostModal.tsx       |  78 ++--
 .../ScriptDetailsModal/ScriptDetailsModal.tsx |   6 +-
 .../TransferHostModal/TransferHostModal.tsx   |  73 ++--
 .../BitLockerPinModal/BitLockerPinModal.tsx   |  74 ++--
 .../BypassModal/BypassModal.tsx               |  36 +-
 .../BootstrapPackageModal.tsx                 |  20 +-
 .../CancelActivityModal.tsx                   |  54 ++-
 .../modals/LockModal/LockModal.tsx            |  62 ++--
 .../RecoveryLockPasswordModal.tsx             |  50 ++-
 .../modals/RunScriptModal/RunScriptModal.tsx  |  72 ++--
 .../SelectQueryModal/SelectQueryModal.tsx     |   6 +-
 .../modals/UnlockModal/UnlockModal.tsx        |  10 +-
 .../modals/WipeModal/WipeModal.tsx            |  72 ++--
 .../OSSettingsModal/OSSettingsModal.tsx       |  20 +-
 .../OpenSoftwareModal/OpenSoftwareModal.tsx   |   6 +-
 .../SoftwareUpdateModal.tsx                   |  58 ++-
 .../UninstallSoftwareModal.tsx                |  35 +-
 .../CertificateDetailsModal.tsx               | 342 +++++++++---------
 .../InventoryVersionsModal.tsx                |   6 +-
 .../modals/LocationModal/LocationModal.tsx    |   6 +-
 .../CalendarEventPreviewModal.tsx             | 198 +++++-----
 74 files changed, 2005 insertions(+), 2174 deletions(-)

diff --git a/frontend/components/ActivityDetails/InstallDetails/SoftwareInstallDetailsModal/SoftwareInstallDetailsModal.tsx b/frontend/components/ActivityDetails/InstallDetails/SoftwareInstallDetailsModal/SoftwareInstallDetailsModal.tsx
index a80f3d893e..50a9c10d5f 100644
--- a/frontend/components/ActivityDetails/InstallDetails/SoftwareInstallDetailsModal/SoftwareInstallDetailsModal.tsx
+++ b/frontend/components/ActivityDetails/InstallDetails/SoftwareInstallDetailsModal/SoftwareInstallDetailsModal.tsx
@@ -431,16 +431,14 @@ export const SoftwareInstallDetailsModal = ({
       onEnter={onCancel}
       className={baseClass}
     >
-      <>
-        {renderContent()}
-        <ModalButtons
-          deviceAuthToken={deviceAuthToken}
-          status={swInstallResult?.status}
-          hostSoftwareId={hostSoftware?.id}
-          onRetry={onRetry}
-          onCancel={onCancel}
-        />
-      </>
+      {renderContent()}
+      <ModalButtons
+        deviceAuthToken={deviceAuthToken}
+        status={swInstallResult?.status}
+        hostSoftwareId={hostSoftware?.id}
+        onRetry={onRetry}
+        onCancel={onCancel}
+      />
     </Modal>
   );
 };
diff --git a/frontend/components/ActivityDetails/InstallDetails/SoftwareIpaInstallDetailsModal/SoftwareIpaInstallDetailsModal.tsx b/frontend/components/ActivityDetails/InstallDetails/SoftwareIpaInstallDetailsModal/SoftwareIpaInstallDetailsModal.tsx
index 7f711fdeee..da466ad52e 100644
--- a/frontend/components/ActivityDetails/InstallDetails/SoftwareIpaInstallDetailsModal/SoftwareIpaInstallDetailsModal.tsx
+++ b/frontend/components/ActivityDetails/InstallDetails/SoftwareIpaInstallDetailsModal/SoftwareIpaInstallDetailsModal.tsx
@@ -430,16 +430,14 @@ export const SoftwareIpaInstallDetailsModal = ({
       onEnter={onCancel}
       className={baseClass}
     >
-      <>
-        {renderContent()}
-        <ModalButtons
-          deviceAuthToken={deviceAuthToken}
-          hostSoftwareId={hostSoftware?.id}
-          onRetry={onRetry}
-          onCancel={onCancel}
-          displayStatus={displayStatus}
-        />
-      </>
+      {renderContent()}
+      <ModalButtons
+        deviceAuthToken={deviceAuthToken}
+        hostSoftwareId={hostSoftware?.id}
+        onRetry={onRetry}
+        onCancel={onCancel}
+        displayStatus={displayStatus}
+      />
     </Modal>
   );
 };
diff --git a/frontend/components/ActivityDetails/InstallDetails/SoftwareScriptDetailsModal/SoftwareScriptDetailsModal.tsx b/frontend/components/ActivityDetails/InstallDetails/SoftwareScriptDetailsModal/SoftwareScriptDetailsModal.tsx
index 75d4953969..b6dde4f1d8 100644
--- a/frontend/components/ActivityDetails/InstallDetails/SoftwareScriptDetailsModal/SoftwareScriptDetailsModal.tsx
+++ b/frontend/components/ActivityDetails/InstallDetails/SoftwareScriptDetailsModal/SoftwareScriptDetailsModal.tsx
@@ -327,16 +327,14 @@ export const SoftwareScriptDetailsModal = ({
       onEnter={onCancel}
       className={baseClass}
     >
-      <>
-        {renderContent()}
-        <ModalButtons
-          deviceAuthToken={deviceAuthToken}
-          installResultStatus={swInstallResult?.status}
-          hostSoftwareId={hostSoftware?.id}
-          onRerun={onRerun}
-          onCancel={onCancel}
-        />
-      </>
+      {renderContent()}
+      <ModalButtons
+        deviceAuthToken={deviceAuthToken}
+        installResultStatus={swInstallResult?.status}
+        hostSoftwareId={hostSoftware?.id}
+        onRerun={onRerun}
+        onCancel={onCancel}
+      />
     </Modal>
   );
 };
diff --git a/frontend/components/ActivityDetails/InstallDetails/SoftwareUninstallDetailsModal/SoftwareUninstallDetailsModal.tsx b/frontend/components/ActivityDetails/InstallDetails/SoftwareUninstallDetailsModal/SoftwareUninstallDetailsModal.tsx
index be2bc81a33..e1bc35bfde 100644
--- a/frontend/components/ActivityDetails/InstallDetails/SoftwareUninstallDetailsModal/SoftwareUninstallDetailsModal.tsx
+++ b/frontend/components/ActivityDetails/InstallDetails/SoftwareUninstallDetailsModal/SoftwareUninstallDetailsModal.tsx
@@ -271,16 +271,14 @@ const SoftwareUninstallDetailsModal = ({
       onEnter={onCancel}
       className={baseClass}
     >
-      <>
-        {renderContent()}
-        <ModalButtons
-          uninstallStatus={uninstallStatus}
-          deviceAuthToken={deviceAuthToken}
-          onCancel={onCancel}
-          onRetry={onRetry}
-          hostSoftware={hostSoftware}
-        />
-      </>
+      {renderContent()}
+      <ModalButtons
+        uninstallStatus={uninstallStatus}
+        deviceAuthToken={deviceAuthToken}
+        onCancel={onCancel}
+        onRetry={onRetry}
+        hostSoftware={hostSoftware}
+      />
     </Modal>
   );
 };
diff --git a/frontend/components/ActivityDetails/InstallDetails/VppInstallDetailsModal/VppInstallDetailsModal.tsx b/frontend/components/ActivityDetails/InstallDetails/VppInstallDetailsModal/VppInstallDetailsModal.tsx
index 9923d41a93..0b15fdab3c 100644
--- a/frontend/components/ActivityDetails/InstallDetails/VppInstallDetailsModal/VppInstallDetailsModal.tsx
+++ b/frontend/components/ActivityDetails/InstallDetails/VppInstallDetailsModal/VppInstallDetailsModal.tsx
@@ -484,16 +484,14 @@ export const VppInstallDetailsModal = ({
       onEnter={onCancel}
       className={baseClass}
     >
-      <>
-        {renderContent()}
-        <ModalButtons
-          deviceAuthToken={deviceAuthToken}
-          hostSoftwareId={hostSoftware?.id}
-          onRetry={onRetry}
-          onCancel={onCancel}
-          displayStatus={displayStatus}
-        />
-      </>
+      {renderContent()}
+      <ModalButtons
+        deviceAuthToken={deviceAuthToken}
+        hostSoftwareId={hostSoftware?.id}
+        onRetry={onRetry}
+        onCancel={onCancel}
+        displayStatus={displayStatus}
+      />
     </Modal>
   );
 };
diff --git a/frontend/components/Modal/Modal.tsx b/frontend/components/Modal/Modal.tsx
index 0dee5475a5..80dc1847fa 100644
--- a/frontend/components/Modal/Modal.tsx
+++ b/frontend/components/Modal/Modal.tsx
@@ -10,7 +10,7 @@ type ModalWidth = "medium" | "large" | "xlarge" | "auto";
 
 export interface IModalProps {
   title: string | JSX.Element;
-  children: JSX.Element;
+  children: React.ReactNode;
   onExit: () => void;
   onEnter?: () => void;
   /**     medium 650px, large 800px, xlarge 850px, auto auto-width
diff --git a/frontend/pages/AccountPage/AccountPage.tsx b/frontend/pages/AccountPage/AccountPage.tsx
index 72793518aa..9c58b63b3b 100644
--- a/frontend/pages/AccountPage/AccountPage.tsx
+++ b/frontend/pages/AccountPage/AccountPage.tsx
@@ -177,40 +177,38 @@ const AccountPage = ({ router }: IAccountPageProps): JSX.Element | null => {
         onExit={onToggleApiTokenModal}
         onEnter={onToggleApiTokenModal}
       >
-        <>
-          <InfoBanner>
-            <p>
-              <strong>This token expires.</strong> If you want an API key for a
-              permanent integration, create an&nbsp;
+        <InfoBanner>
+          <p>
+            <strong>This token expires.</strong> If you want an API key for a
+            permanent integration, create an&nbsp;
+            <CustomLink
+              url="https://fleetdm.com/docs/using-fleet/fleetctl-cli?utm_medium=fleetui&utm_campaign=get-api-token#using-fleetctl-with-an-api-only-user"
+              text="API-only user"
+              newTab
+              variant="banner-link"
+            />
+            &nbsp;instead.
+          </p>
+        </InfoBanner>
+        <InputFieldHiddenContent
+          value={authToken.get() || ""}
+          helpText={
+            <>
+              This token is intended for SSO users to authenticate in the
+              fleetctl CLI. It expires based on the{" "}
               <CustomLink
-                url="https://fleetdm.com/docs/using-fleet/fleetctl-cli?utm_medium=fleetui&utm_campaign=get-api-token#using-fleetctl-with-an-api-only-user"
-                text="API-only user"
+                url="https://fleetdm.com/docs/deploying/configuration?utm_medium=fleetui&utm_campaign=get-api-token#session-duration"
+                text="session duration configuration"
                 newTab
-                variant="banner-link"
               />
-              &nbsp;instead.
-            </p>
-          </InfoBanner>
-          <InputFieldHiddenContent
-            value={authToken.get() || ""}
-            helpText={
-              <>
-                This token is intended for SSO users to authenticate in the
-                fleetctl CLI. It expires based on the{" "}
-                <CustomLink
-                  url="https://fleetdm.com/docs/deploying/configuration?utm_medium=fleetui&utm_campaign=get-api-token#session-duration"
-                  text="session duration configuration"
-                  newTab
-                />
-              </>
-            }
-          />
-          <div className="modal-cta-wrap">
-            <Button onClick={onToggleApiTokenModal} type="button">
-              Done
-            </Button>
-          </div>
-        </>
+            </>
+          }
+        />
+        <div className="modal-cta-wrap">
+          <Button onClick={onToggleApiTokenModal} type="button">
+            Done
+          </Button>
+        </div>
       </Modal>
     );
   };
diff --git a/frontend/pages/DashboardPage/cards/ActivityFeed/components/AppStoreDetailsModal/AppStoreDetailsModal.tsx b/frontend/pages/DashboardPage/cards/ActivityFeed/components/AppStoreDetailsModal/AppStoreDetailsModal.tsx
index ee07643083..b356fa3c28 100644
--- a/frontend/pages/DashboardPage/cards/ActivityFeed/components/AppStoreDetailsModal/AppStoreDetailsModal.tsx
+++ b/frontend/pages/DashboardPage/cards/ActivityFeed/components/AppStoreDetailsModal/AppStoreDetailsModal.tsx
@@ -36,46 +36,44 @@ const AppStoreDetailsModal = ({
       onEnter={onCancel}
       className={baseClass}
     >
-      <>
-        <div className={`${baseClass}__modal-content`}>
-          <DataSet
-            title="Name"
-            value={getDisplayedSoftwareName(
-              details.software_title,
-              details.software_display_name
-            )}
-          />
-          <DataSet
-            title={
-              isAndroid(details.platform || "")
-                ? "Google Play ID"
-                : "App Store ID"
-            }
-            value={details.app_store_id}
-          />
-          <DataSet
-            title="Self-Service"
-            value={details.self_service ? "Yes" : "No"}
-          />
-          <DataSet
-            title={
-              <TargetTitle
-                labelIncludeAny={labels_include_any}
-                labelExcludeAny={labels_exclude_any}
-              />
-            }
-            value={
-              <TargetValue
-                labelIncludeAny={labels_include_any}
-                labelExcludeAny={labels_exclude_any}
-              />
-            }
-          />
-        </div>
-        <div className="modal-cta-wrap">
-          <Button onClick={onCancel}>Done</Button>
-        </div>
-      </>
+      <div className={`${baseClass}__modal-content`}>
+        <DataSet
+          title="Name"
+          value={getDisplayedSoftwareName(
+            details.software_title,
+            details.software_display_name
+          )}
+        />
+        <DataSet
+          title={
+            isAndroid(details.platform || "")
+              ? "Google Play ID"
+              : "App Store ID"
+          }
+          value={details.app_store_id}
+        />
+        <DataSet
+          title="Self-Service"
+          value={details.self_service ? "Yes" : "No"}
+        />
+        <DataSet
+          title={
+            <TargetTitle
+              labelIncludeAny={labels_include_any}
+              labelExcludeAny={labels_exclude_any}
+            />
+          }
+          value={
+            <TargetValue
+              labelIncludeAny={labels_include_any}
+              labelExcludeAny={labels_exclude_any}
+            />
+          }
+        />
+      </div>
+      <div className="modal-cta-wrap">
+        <Button onClick={onCancel}>Done</Button>
+      </div>
     </Modal>
   );
 };
diff --git a/frontend/pages/DashboardPage/cards/ActivityFeed/components/LibrarySoftwareDetailsModal/LibrarySoftwareDetailsModal.tsx b/frontend/pages/DashboardPage/cards/ActivityFeed/components/LibrarySoftwareDetailsModal/LibrarySoftwareDetailsModal.tsx
index 1a2b692b51..c45177e08b 100644
--- a/frontend/pages/DashboardPage/cards/ActivityFeed/components/LibrarySoftwareDetailsModal/LibrarySoftwareDetailsModal.tsx
+++ b/frontend/pages/DashboardPage/cards/ActivityFeed/components/LibrarySoftwareDetailsModal/LibrarySoftwareDetailsModal.tsx
@@ -87,39 +87,37 @@ const LibrarySoftwareDetailsModal = ({
       onEnter={onCancel}
       className={baseClass}
     >
-      <>
-        <div className={`${baseClass}__modal-content`}>
-          <DataSet
-            title="Name"
-            value={getDisplayedSoftwareName(
-              details.software_title,
-              details.software_display_name
-            )}
-          />
-          <DataSet title="Package name" value={details.software_package} />
-          <DataSet
-            title="Self-Service"
-            value={details.self_service ? "Yes" : "No"}
-          />
-          <DataSet
-            title={
-              <TargetTitle
-                labelIncludeAny={labels_include_any}
-                labelExcludeAny={labels_exclude_any}
-              />
-            }
-            value={
-              <TargetValue
-                labelIncludeAny={labels_include_any}
-                labelExcludeAny={labels_exclude_any}
-              />
-            }
-          />
-        </div>
-        <div className="modal-cta-wrap">
-          <Button onClick={onCancel}>Done</Button>
-        </div>
-      </>
+      <div className={`${baseClass}__modal-content`}>
+        <DataSet
+          title="Name"
+          value={getDisplayedSoftwareName(
+            details.software_title,
+            details.software_display_name
+          )}
+        />
+        <DataSet title="Package name" value={details.software_package} />
+        <DataSet
+          title="Self-Service"
+          value={details.self_service ? "Yes" : "No"}
+        />
+        <DataSet
+          title={
+            <TargetTitle
+              labelIncludeAny={labels_include_any}
+              labelExcludeAny={labels_exclude_any}
+            />
+          }
+          value={
+            <TargetValue
+              labelIncludeAny={labels_include_any}
+              labelExcludeAny={labels_exclude_any}
+            />
+          }
+        />
+      </div>
+      <div className="modal-cta-wrap">
+        <Button onClick={onCancel}>Done</Button>
+      </div>
     </Modal>
   );
 };
diff --git a/frontend/pages/DashboardPage/cards/ActivityFeed/components/RunScriptDetailsModal/RunScriptDetailsModal.tsx b/frontend/pages/DashboardPage/cards/ActivityFeed/components/RunScriptDetailsModal/RunScriptDetailsModal.tsx
index 695ab4f7e7..65db750cba 100644
--- a/frontend/pages/DashboardPage/cards/ActivityFeed/components/RunScriptDetailsModal/RunScriptDetailsModal.tsx
+++ b/frontend/pages/DashboardPage/cards/ActivityFeed/components/RunScriptDetailsModal/RunScriptDetailsModal.tsx
@@ -241,10 +241,8 @@ const RunScriptDetailsModal = ({
       className={baseClass}
       isHidden={isHidden}
     >
-      <>
-        {renderContent()}
-        {renderFooter()}
-      </>
+      {renderContent()}
+      {renderFooter()}
     </Modal>
   );
 };
diff --git a/frontend/pages/DashboardPage/components/MdmSolutionModal/MdmSolutionModal.tsx b/frontend/pages/DashboardPage/components/MdmSolutionModal/MdmSolutionModal.tsx
index 9c33f13020..567a032986 100644
--- a/frontend/pages/DashboardPage/components/MdmSolutionModal/MdmSolutionModal.tsx
+++ b/frontend/pages/DashboardPage/components/MdmSolutionModal/MdmSolutionModal.tsx
@@ -47,29 +47,27 @@ const MdmSolutionModal = ({
       onExit={onCancel}
       onEnter={onCancel}
     >
-      <>
-        <div className={`${baseClass}__modal-content`}>
-          <TableContainer
-            isLoading={false}
-            emptyComponent={() => null} // if this modal is shown, this table should never be empty
-            columnConfigs={solutionsTableHeaders}
-            data={solutionsDataSet}
-            defaultSortHeader={SOLUTIONS_DEFAULT_SORT_HEADER}
-            defaultSortDirection={DEFAULT_SORT_DIRECTION}
-            resultsTitle="MDM"
-            showMarkAllPages={false}
-            isAllPagesSelected={false}
-            disableCount
-            disablePagination
-            disableTableHeader
-          />
-        </div>
-        <div className="modal-cta-wrap">
-          <Button type="button" onClick={onCancel}>
-            Done
-          </Button>
-        </div>
-      </>
+      <div className={`${baseClass}__modal-content`}>
+        <TableContainer
+          isLoading={false}
+          emptyComponent={() => null} // if this modal is shown, this table should never be empty
+          columnConfigs={solutionsTableHeaders}
+          data={solutionsDataSet}
+          defaultSortHeader={SOLUTIONS_DEFAULT_SORT_HEADER}
+          defaultSortDirection={DEFAULT_SORT_DIRECTION}
+          resultsTitle="MDM"
+          showMarkAllPages={false}
+          isAllPagesSelected={false}
+          disableCount
+          disablePagination
+          disableTableHeader
+        />
+      </div>
+      <div className="modal-cta-wrap">
+        <Button type="button" onClick={onCancel}>
+          Done
+        </Button>
+      </div>
     </Modal>
   );
 };
diff --git a/frontend/pages/ManageControlsPage/OSSettings/cards/Certificates/components/DeleteCertificateModal/DeleteCertificateModal.tsx b/frontend/pages/ManageControlsPage/OSSettings/cards/Certificates/components/DeleteCertificateModal/DeleteCertificateModal.tsx
index c020279450..556509cda6 100644
--- a/frontend/pages/ManageControlsPage/OSSettings/cards/Certificates/components/DeleteCertificateModal/DeleteCertificateModal.tsx
+++ b/frontend/pages/ManageControlsPage/OSSettings/cards/Certificates/components/DeleteCertificateModal/DeleteCertificateModal.tsx
@@ -40,25 +40,23 @@ const DeleteCertificateModal = ({
 
   return (
     <Modal className={baseClass} title="Delete certificate" onExit={onExit}>
-      <>
-        <p>
-          This action will remove the <b>{name}</b> certificate from all hosts
-          assigned to this fleet.
-        </p>
-        <div className="modal-cta-wrap">
-          <Button
-            variant="alert"
-            onClick={onDelete}
-            isLoading={isUpdating}
-            disabled={isUpdating}
-          >
-            Delete
-          </Button>
-          <Button variant="inverse-alert" onClick={onExit}>
-            Cancel
-          </Button>
-        </div>
-      </>
+      <p>
+        This action will remove the <b>{name}</b> certificate from all hosts
+        assigned to this fleet.
+      </p>
+      <div className="modal-cta-wrap">
+        <Button
+          variant="alert"
+          onClick={onDelete}
+          isLoading={isUpdating}
+          disabled={isUpdating}
+        >
+          Delete
+        </Button>
+        <Button variant="inverse-alert" onClick={onExit}>
+          Cancel
+        </Button>
+      </div>
     </Modal>
   );
 };
diff --git a/frontend/pages/ManageControlsPage/OSSettings/cards/CustomSettings/components/ConfigProfileStatusModal/ConfigProfileStatusModal.tsx b/frontend/pages/ManageControlsPage/OSSettings/cards/CustomSettings/components/ConfigProfileStatusModal/ConfigProfileStatusModal.tsx
index 42c2112d4b..2750666107 100644
--- a/frontend/pages/ManageControlsPage/OSSettings/cards/CustomSettings/components/ConfigProfileStatusModal/ConfigProfileStatusModal.tsx
+++ b/frontend/pages/ManageControlsPage/OSSettings/cards/CustomSettings/components/ConfigProfileStatusModal/ConfigProfileStatusModal.tsx
@@ -59,12 +59,10 @@ const ConfigProfileStatusModal = ({
 
   return (
     <Modal className={baseClass} title={name} onExit={onExit}>
-      <>
-        {renderContent()}
-        <div className="modal-cta-wrap">
-          <Button onClick={onExit}>Done</Button>
-        </div>
-      </>
+      {renderContent()}
+      <div className="modal-cta-wrap">
+        <Button onClick={onExit}>Done</Button>
+      </div>
     </Modal>
   );
 };
diff --git a/frontend/pages/ManageControlsPage/OSSettings/cards/CustomSettings/components/ProfileUploader/components/AddProfileModal/AddProfileModal.tsx b/frontend/pages/ManageControlsPage/OSSettings/cards/CustomSettings/components/ProfileUploader/components/AddProfileModal/AddProfileModal.tsx
index 0d4e50a7dd..46258e1161 100644
--- a/frontend/pages/ManageControlsPage/OSSettings/cards/CustomSettings/components/ProfileUploader/components/AddProfileModal/AddProfileModal.tsx
+++ b/frontend/pages/ManageControlsPage/OSSettings/cards/CustomSettings/components/ProfileUploader/components/AddProfileModal/AddProfileModal.tsx
@@ -212,50 +212,48 @@ const AddProfileModal = ({
 
   return (
     <Modal title="Add profile" onExit={onDone}>
-      <>
-        {isPremiumTier && isLoadingLabels && <Spinner />}
-        {isPremiumTier && !isLoadingLabels && isErrorLabels && <DataError />}
-        {(!isPremiumTier || (!isLoadingLabels && !isErrorLabels)) && (
-          <div className={`${baseClass}__modal-content-wrap`}>
-            <Card color="grey" className={`${baseClass}__file`}>
-              {!fileDetails ? (
-                <FileChooser isLoading={isLoading} onFileOpen={onFileOpen} />
-              ) : (
-                <FileDetails details={fileDetails} />
-              )}
-            </Card>
-            {isPremiumTier && (
-              <TargetLabelSelector
-                selectedTargetType={selectedTargetType}
-                selectedCustomTarget={selectedCustomTarget}
-                selectedLabels={selectedLabels}
-                customTargetOptions={CUSTOM_TARGET_OPTIONS}
-                className={`${baseClass}__target`}
-                onSelectTargetType={onSelectTargetType}
-                onSelectCustomTarget={onSelectCustomTargetOption}
-                onSelectLabel={onSelectLabel}
-                isErrorLabels={isErrorLabels}
-                isLoadingLabels={isFetchingLabels || isLoadingLabels}
-                labels={labels || []}
-              />
+      {isPremiumTier && isLoadingLabels && <Spinner />}
+      {isPremiumTier && !isLoadingLabels && isErrorLabels && <DataError />}
+      {(!isPremiumTier || (!isLoadingLabels && !isErrorLabels)) && (
+        <div className={`${baseClass}__modal-content-wrap`}>
+          <Card color="grey" className={`${baseClass}__file`}>
+            {!fileDetails ? (
+              <FileChooser isLoading={isLoading} onFileOpen={onFileOpen} />
+            ) : (
+              <FileDetails details={fileDetails} />
             )}
-            <div className={`${baseClass}__button-wrap`}>
-              <Button
-                className={`${baseClass}__add-profile-button`}
-                onClick={onFileUpload}
-                isLoading={isLoading}
-                disabled={
-                  (selectedTargetType === "Custom" &&
-                    !listNamesFromSelectedLabels(selectedLabels).length) ||
-                  !fileDetails
-                }
-              >
-                Add profile
-              </Button>
-            </div>
+          </Card>
+          {isPremiumTier && (
+            <TargetLabelSelector
+              selectedTargetType={selectedTargetType}
+              selectedCustomTarget={selectedCustomTarget}
+              selectedLabels={selectedLabels}
+              customTargetOptions={CUSTOM_TARGET_OPTIONS}
+              className={`${baseClass}__target`}
+              onSelectTargetType={onSelectTargetType}
+              onSelectCustomTarget={onSelectCustomTargetOption}
+              onSelectLabel={onSelectLabel}
+              isErrorLabels={isErrorLabels}
+              isLoadingLabels={isFetchingLabels || isLoadingLabels}
+              labels={labels || []}
+            />
+          )}
+          <div className={`${baseClass}__button-wrap`}>
+            <Button
+              className={`${baseClass}__add-profile-button`}
+              onClick={onFileUpload}
+              isLoading={isLoading}
+              disabled={
+                (selectedTargetType === "Custom" &&
+                  !listNamesFromSelectedLabels(selectedLabels).length) ||
+                !fileDetails
+              }
+            >
+              Add profile
+            </Button>
           </div>
-        )}
-      </>
+        </div>
+      )}
     </Modal>
   );
 };
diff --git a/frontend/pages/ManageControlsPage/OSSettings/cards/CustomSettings/components/ResendConfigProfileModal/ResendConfigProfileModal.tsx b/frontend/pages/ManageControlsPage/OSSettings/cards/CustomSettings/components/ResendConfigProfileModal/ResendConfigProfileModal.tsx
index ff278e90e2..d1e96724a8 100644
--- a/frontend/pages/ManageControlsPage/OSSettings/cards/CustomSettings/components/ResendConfigProfileModal/ResendConfigProfileModal.tsx
+++ b/frontend/pages/ManageControlsPage/OSSettings/cards/CustomSettings/components/ResendConfigProfileModal/ResendConfigProfileModal.tsx
@@ -52,25 +52,23 @@ const ResendConfigProfileModal = ({
       title="Resend configuration profile"
       onExit={onExit}
     >
-      <>
-        <p>
-          This action will resend the <b>{name}</b> configuration profile to{" "}
-          <b>{countText}</b>. To cancel after resending, delete and re-add the
-          profile.
-        </p>
-        <div className="modal-cta-wrap">
-          <Button
-            onClick={onClickResend}
-            isLoading={isResending}
-            disabled={isResending}
-          >
-            Resend
-          </Button>
-          <Button variant="inverse" onClick={onExit} disabled={isResending}>
-            Cancel
-          </Button>
-        </div>
-      </>
+      <p>
+        This action will resend the <b>{name}</b> configuration profile to{" "}
+        <b>{countText}</b>. To cancel after resending, delete and re-add the
+        profile.
+      </p>
+      <div className="modal-cta-wrap">
+        <Button
+          onClick={onClickResend}
+          isLoading={isResending}
+          disabled={isResending}
+        >
+          Resend
+        </Button>
+        <Button variant="inverse" onClick={onExit} disabled={isResending}>
+          Cancel
+        </Button>
+      </div>
     </Modal>
   );
 };
diff --git a/frontend/pages/ManageControlsPage/Scripts/components/CancelScriptBatchModal/CancelScriptBatchModal.tsx b/frontend/pages/ManageControlsPage/Scripts/components/CancelScriptBatchModal/CancelScriptBatchModal.tsx
index 86093cf510..a876bd13df 100644
--- a/frontend/pages/ManageControlsPage/Scripts/components/CancelScriptBatchModal/CancelScriptBatchModal.tsx
+++ b/frontend/pages/ManageControlsPage/Scripts/components/CancelScriptBatchModal/CancelScriptBatchModal.tsx
@@ -25,32 +25,30 @@ const CancelScriptBatchModal = ({
       onEnter={onSubmit}
       className={baseClass}
     >
-      <>
-        <div className={`${baseClass}__content`}>
-          <p>
-            This will cancel any pending script runs for{" "}
-            {scriptName ? <b>{scriptName}</b> : "this batch"}.
-          </p>
-          <p>
-            If this script is currently running on a host, it will complete, but
-            results won&rsquo;t appear in Fleet.
-          </p>
-          <p>You cannot undo this action.</p>
-          <div className="modal-cta-wrap">
-            <Button
-              isLoading={isCanceling}
-              disabled={isCanceling}
-              onClick={onSubmit}
-              variant="alert"
-            >
-              Cancel script
-            </Button>
-            <Button variant="inverse-alert" onClick={onExit}>
-              Back
-            </Button>
-          </div>
+      <div className={`${baseClass}__content`}>
+        <p>
+          This will cancel any pending script runs for{" "}
+          {scriptName ? <b>{scriptName}</b> : "this batch"}.
+        </p>
+        <p>
+          If this script is currently running on a host, it will complete, but
+          results won&rsquo;t appear in Fleet.
+        </p>
+        <p>You cannot undo this action.</p>
+        <div className="modal-cta-wrap">
+          <Button
+            isLoading={isCanceling}
+            disabled={isCanceling}
+            onClick={onSubmit}
+            variant="alert"
+          >
+            Cancel script
+          </Button>
+          <Button variant="inverse-alert" onClick={onExit}>
+            Back
+          </Button>
         </div>
-      </>
+      </div>
     </Modal>
   );
 };
diff --git a/frontend/pages/ManageControlsPage/Scripts/components/EditScriptModal/EditScriptModal.tsx b/frontend/pages/ManageControlsPage/Scripts/components/EditScriptModal/EditScriptModal.tsx
index ae1f0aac29..226bf3cb11 100644
--- a/frontend/pages/ManageControlsPage/Scripts/components/EditScriptModal/EditScriptModal.tsx
+++ b/frontend/pages/ManageControlsPage/Scripts/components/EditScriptModal/EditScriptModal.tsx
@@ -39,30 +39,28 @@ const WarningModal = ({
       title="Save changes?"
       onExit={onExit}
     >
-      <>
-        <p>
-          The changes you are making will cancel any pending script runs for{" "}
-          <b>{scriptName}</b>.<br />
-          <br />
-          If this script is currently running on a host, it will complete, but
-          results won&apos;t appear in Fleet. <br />
-          <br />
-          You cannot undo this action.
-        </p>
-        <div className="modal-cta-wrap">
-          <Button
-            type="button"
-            onClick={onSave}
-            className="save-loading"
-            isLoading={isSubmitting}
-          >
-            Save
-          </Button>
-          <Button onClick={onExit} variant="inverse">
-            Cancel
-          </Button>
-        </div>
-      </>
+      <p>
+        The changes you are making will cancel any pending script runs for{" "}
+        <b>{scriptName}</b>.<br />
+        <br />
+        If this script is currently running on a host, it will complete, but
+        results won&apos;t appear in Fleet. <br />
+        <br />
+        You cannot undo this action.
+      </p>
+      <div className="modal-cta-wrap">
+        <Button
+          type="button"
+          onClick={onSave}
+          className="save-loading"
+          isLoading={isSubmitting}
+        >
+          Save
+        </Button>
+        <Button onClick={onExit} variant="inverse">
+          Cancel
+        </Button>
+      </div>
     </Modal>
   );
 };
diff --git a/frontend/pages/ManageControlsPage/Scripts/components/ScriptUploadModal/ScriptUploadModal.tsx b/frontend/pages/ManageControlsPage/Scripts/components/ScriptUploadModal/ScriptUploadModal.tsx
index 1b1b064295..90c13e06ec 100644
--- a/frontend/pages/ManageControlsPage/Scripts/components/ScriptUploadModal/ScriptUploadModal.tsx
+++ b/frontend/pages/ManageControlsPage/Scripts/components/ScriptUploadModal/ScriptUploadModal.tsx
@@ -52,27 +52,25 @@ const ScriptUploadModal = ({
       onEnter={onSubmit}
       className={baseClass}
     >
-      <>
-        <div className={`${baseClass}__content`}>
-          <ScriptUploader
-            onFileSelected={(file) => setSelectedFile(file)}
-            selectedFile={selectedFile}
-            forModal
-          />
-        </div>
-        {additionalInfo && (
-          <p className={`${baseClass}__additional-info`}>{additionalInfo}</p>
-        )}
-        <div className="modal-cta-wrap">
-          <Button
-            onClick={onUploadFile}
-            disabled={!selectedFile || showLoading}
-            isLoading={showLoading}
-          >
-            Add script
-          </Button>
-        </div>
-      </>
+      <div className={`${baseClass}__content`}>
+        <ScriptUploader
+          onFileSelected={(file) => setSelectedFile(file)}
+          selectedFile={selectedFile}
+          forModal
+        />
+      </div>
+      {additionalInfo && (
+        <p className={`${baseClass}__additional-info`}>{additionalInfo}</p>
+      )}
+      <div className="modal-cta-wrap">
+        <Button
+          onClick={onUploadFile}
+          disabled={!selectedFile || showLoading}
+          isLoading={showLoading}
+        >
+          Add script
+        </Button>
+      </div>
     </Modal>
   );
 };
diff --git a/frontend/pages/ManageControlsPage/Secrets/components/DeleteSecretModal/DeleteSecretModal.tsx b/frontend/pages/ManageControlsPage/Secrets/components/DeleteSecretModal/DeleteSecretModal.tsx
index 6bd3f77abe..6a23993275 100644
--- a/frontend/pages/ManageControlsPage/Secrets/components/DeleteSecretModal/DeleteSecretModal.tsx
+++ b/frontend/pages/ManageControlsPage/Secrets/components/DeleteSecretModal/DeleteSecretModal.tsx
@@ -56,35 +56,33 @@ const DeleteSecretModal = ({
       onExit={onExit}
       className={baseClass}
     >
-      <>
-        <div className={`${baseClass}__message`}>
-          <span>
-            This will delete the
-            <b>
-              <TooltipTruncatedText value={secret?.name} />
-            </b>
-            custom variable.
-          </span>
-          <br />
-          <br />
-          If this custom variable is used in any configuration profiles or
-          scripts, they will fail. To resolve, edit the configuration profile or
-          script.
-        </div>
-        <div className="modal-cta-wrap">
-          <Button
-            variant="alert"
-            onClick={onClickDelete}
-            isLoading={isDeleting}
-            disabled={isDeleting}
-          >
-            Delete
-          </Button>
-          <Button variant="inverse-alert" onClick={onExit}>
-            Cancel
-          </Button>
-        </div>
-      </>
+      <div className={`${baseClass}__message`}>
+        <span>
+          This will delete the
+          <b>
+            <TooltipTruncatedText value={secret?.name} />
+          </b>
+          custom variable.
+        </span>
+        <br />
+        <br />
+        If this custom variable is used in any configuration profiles or
+        scripts, they will fail. To resolve, edit the configuration profile or
+        script.
+      </div>
+      <div className="modal-cta-wrap">
+        <Button
+          variant="alert"
+          onClick={onClickDelete}
+          isLoading={isDeleting}
+          disabled={isDeleting}
+        >
+          Delete
+        </Button>
+        <Button variant="inverse-alert" onClick={onExit}>
+          Cancel
+        </Button>
+      </div>
     </Modal>
   );
 };
diff --git a/frontend/pages/ManageControlsPage/SetupExperience/cards/RunScript/components/DeleteSetupExperienceScriptModal/DeleteSetupExperienceScriptModal.tsx b/frontend/pages/ManageControlsPage/SetupExperience/cards/RunScript/components/DeleteSetupExperienceScriptModal/DeleteSetupExperienceScriptModal.tsx
index b9e6cbda86..11d570c9f0 100644
--- a/frontend/pages/ManageControlsPage/SetupExperience/cards/RunScript/components/DeleteSetupExperienceScriptModal/DeleteSetupExperienceScriptModal.tsx
+++ b/frontend/pages/ManageControlsPage/SetupExperience/cards/RunScript/components/DeleteSetupExperienceScriptModal/DeleteSetupExperienceScriptModal.tsx
@@ -47,30 +47,28 @@ const DeleteSetupExperienceScriptModal = ({
       onExit={onExit}
       isContentDisabled={isDeleting}
     >
-      <>
-        <p>
-          This action will cancel any pending script execution for{" "}
-          <b>{scriptName}</b>.
-        </p>
-        <p>
-          If the script is currently running on a host it will still complete,
-          but results won&apos;t appear in Fleet.
-        </p>
-        <p>You cannot undo this action.</p>
-        <div className="modal-cta-wrap">
-          <Button
-            type="button"
-            onClick={onDelete}
-            variant="alert"
-            isLoading={isDeleting}
-          >
-            Delete
-          </Button>
-          <Button onClick={onExit} variant="inverse-alert">
-            Cancel
-          </Button>
-        </div>
-      </>
+      <p>
+        This action will cancel any pending script execution for{" "}
+        <b>{scriptName}</b>.
+      </p>
+      <p>
+        If the script is currently running on a host it will still complete, but
+        results won&apos;t appear in Fleet.
+      </p>
+      <p>You cannot undo this action.</p>
+      <div className="modal-cta-wrap">
+        <Button
+          type="button"
+          onClick={onDelete}
+          variant="alert"
+          isLoading={isDeleting}
+        >
+          Delete
+        </Button>
+        <Button onClick={onExit} variant="inverse-alert">
+          Cancel
+        </Button>
+      </div>
     </Modal>
   );
 };
diff --git a/frontend/pages/ManageControlsPage/SetupExperience/cards/SetupAssistant/components/DeleteAutoEnrollmentProfile/DeleteAutoEnrollmentProfile.tsx b/frontend/pages/ManageControlsPage/SetupExperience/cards/SetupAssistant/components/DeleteAutoEnrollmentProfile/DeleteAutoEnrollmentProfile.tsx
index 517f2f4f80..0a929d3207 100644
--- a/frontend/pages/ManageControlsPage/SetupExperience/cards/SetupAssistant/components/DeleteAutoEnrollmentProfile/DeleteAutoEnrollmentProfile.tsx
+++ b/frontend/pages/ManageControlsPage/SetupExperience/cards/SetupAssistant/components/DeleteAutoEnrollmentProfile/DeleteAutoEnrollmentProfile.tsx
@@ -37,21 +37,19 @@ const DeleteAutoEnrollProfile = ({
       title="Delete automatic enrollment profile"
       onExit={onCancel}
     >
-      <>
-        <p>Delete the automatic enrollment profile to upload a new one.</p>
-        <p>
-          Without an automatic enrollment profile, new macOS hosts will
-          automatically enroll with the default setup settings.
-        </p>
-        <div className="modal-cta-wrap">
-          <Button type="button" onClick={handleDelete} variant="alert">
-            Delete
-          </Button>
-          <Button onClick={onCancel} variant="inverse-alert">
-            Cancel
-          </Button>
-        </div>
-      </>
+      <p>Delete the automatic enrollment profile to upload a new one.</p>
+      <p>
+        Without an automatic enrollment profile, new macOS hosts will
+        automatically enroll with the default setup settings.
+      </p>
+      <div className="modal-cta-wrap">
+        <Button type="button" onClick={handleDelete} variant="alert">
+          Delete
+        </Button>
+        <Button onClick={onCancel} variant="inverse-alert">
+          Cancel
+        </Button>
+      </div>
     </Modal>
   );
 };
diff --git a/frontend/pages/SoftwarePage/SoftwareAddPage/SoftwareFleetMaintained/FleetMaintainedAppDetailsPage/AddFleetAppSoftwareModal/AddFleetAppSoftwareModal.tsx b/frontend/pages/SoftwarePage/SoftwareAddPage/SoftwareFleetMaintained/FleetMaintainedAppDetailsPage/AddFleetAppSoftwareModal/AddFleetAppSoftwareModal.tsx
index 9a4e3cd4be..f1cc6ddc19 100644
--- a/frontend/pages/SoftwarePage/SoftwareAddPage/SoftwareFleetMaintained/FleetMaintainedAppDetailsPage/AddFleetAppSoftwareModal/AddFleetAppSoftwareModal.tsx
+++ b/frontend/pages/SoftwarePage/SoftwareAddPage/SoftwareFleetMaintained/FleetMaintainedAppDetailsPage/AddFleetAppSoftwareModal/AddFleetAppSoftwareModal.tsx
@@ -15,13 +15,11 @@ const AddFleetAppSoftwareModal = () => {
       onExit={noop}
       disableClosingModal
     >
-      <>
-        <Spinner centered={false} className={`${baseClass}__spinner`} />
-        <p>
-          Uploading software so that it&apos;s available for install. This may
-          take a few minutes.
-        </p>
-      </>
+      <Spinner centered={false} className={`${baseClass}__spinner`} />
+      <p>
+        Uploading software so that it&apos;s available for install. This may
+        take a few minutes.
+      </p>
     </Modal>
   );
 };
diff --git a/frontend/pages/SoftwarePage/SoftwareAddPage/SoftwareFleetMaintained/FleetMaintainedAppDetailsPage/FleetAppDetailsModal/FleetAppDetailsModal.tsx b/frontend/pages/SoftwarePage/SoftwareAddPage/SoftwareFleetMaintained/FleetMaintainedAppDetailsPage/FleetAppDetailsModal/FleetAppDetailsModal.tsx
index 96980dcb5c..fd630330da 100644
--- a/frontend/pages/SoftwarePage/SoftwareAddPage/SoftwareFleetMaintained/FleetMaintainedAppDetailsPage/FleetAppDetailsModal/FleetAppDetailsModal.tsx
+++ b/frontend/pages/SoftwarePage/SoftwareAddPage/SoftwareFleetMaintained/FleetMaintainedAppDetailsPage/FleetAppDetailsModal/FleetAppDetailsModal.tsx
@@ -87,55 +87,53 @@ const FleetAppDetailsModal = ({
 
   return (
     <Modal className={baseClass} title="Software details" onExit={onCancel}>
-      <>
-        <div className={`${baseClass}__modal-content`}>
-          <DataSet title="Name" value={name} />
-          <DataSet title="Version" value={versionElement} />
-          {slug && (
-            <DataSet
-              title={
-                <TooltipWrapper tipContent={SLUG_TOOLTIP_MESSAGE}>
-                  Fleet-maintained app slug
-                </TooltipWrapper>
-              }
-              value={
-                <>
-                  {slug}{" "}
-                  <div className={`${baseClass}__action-overlay`}>
-                    {copyMessage && (
-                      <div
-                        className={`${baseClass}__copy-message`}
-                      >{`${copyMessage} `}</div>
-                    )}
-                  </div>
-                  <Button
-                    variant="unstyled"
-                    className={`${baseClass}__copy-secret-icon`}
-                    onClick={onCopySlug}
-                  >
-                    <Icon name="copy" />
-                  </Button>
-                </>
-              }
-            />
-          )}
-          <DataSet title="Platform" value={PLATFORM_DISPLAY_NAMES[platform]} />
+      <div className={`${baseClass}__modal-content`}>
+        <DataSet title="Name" value={name} />
+        <DataSet title="Version" value={versionElement} />
+        {slug && (
+          <DataSet
+            title={
+              <TooltipWrapper tipContent={SLUG_TOOLTIP_MESSAGE}>
+                Fleet-maintained app slug
+              </TooltipWrapper>
+            }
+            value={
+              <>
+                {slug}{" "}
+                <div className={`${baseClass}__action-overlay`}>
+                  {copyMessage && (
+                    <div
+                      className={`${baseClass}__copy-message`}
+                    >{`${copyMessage} `}</div>
+                  )}
+                </div>
+                <Button
+                  variant="unstyled"
+                  className={`${baseClass}__copy-secret-icon`}
+                  onClick={onCopySlug}
+                >
+                  <Icon name="copy" />
+                </Button>
+              </>
+            }
+          />
+        )}
+        <DataSet title="Platform" value={PLATFORM_DISPLAY_NAMES[platform]} />
 
-          {url && (
-            <DataSet
-              title={
-                <TooltipWrapper tipContent={URL_TOOLTIP_MESSAGE}>
-                  URL
-                </TooltipWrapper>
-              }
-              value={<TooltipTruncatedText value={url} />}
-            />
-          )}
-        </div>
-        <div className="modal-cta-wrap">
-          <Button onClick={onCancel}>Done</Button>
-        </div>
-      </>
+        {url && (
+          <DataSet
+            title={
+              <TooltipWrapper tipContent={URL_TOOLTIP_MESSAGE}>
+                URL
+              </TooltipWrapper>
+            }
+            value={<TooltipTruncatedText value={url} />}
+          />
+        )}
+      </div>
+      <div className="modal-cta-wrap">
+        <Button onClick={onCancel}>Done</Button>
+      </div>
     </Modal>
   );
 };
diff --git a/frontend/pages/SoftwarePage/SoftwareTitleDetailsPage/AdvancedOptionsModal/AdvancedOptionsModal.tsx b/frontend/pages/SoftwarePage/SoftwareTitleDetailsPage/AdvancedOptionsModal/AdvancedOptionsModal.tsx
index 8f17704cfd..0b0a3da3c7 100644
--- a/frontend/pages/SoftwarePage/SoftwareTitleDetailsPage/AdvancedOptionsModal/AdvancedOptionsModal.tsx
+++ b/frontend/pages/SoftwarePage/SoftwareTitleDetailsPage/AdvancedOptionsModal/AdvancedOptionsModal.tsx
@@ -23,63 +23,61 @@ const AdvancedOptionsModal = ({
 }: IAdvancedOptionsModalProps) => {
   return (
     <Modal className={baseClass} title="Advanced options" onExit={onExit}>
-      <>
-        <p>
-          Advanced options are read-only. To change options, delete software and
-          add again.
-        </p>
-        <div className={`${baseClass}__form-inputs`}>
-          <Editor
-            readOnly
-            wrapEnabled
-            maxLines={10}
-            name="install-script"
-            value={installScript}
-            helpText="Fleet will run this command on hosts to install software."
-            label="Install script"
-            labelTooltip="For security agents, add the script provided by the vendor."
-          />
-          {preInstallQuery && (
-            <div className={`${baseClass}__input-field`}>
-              <span>Pre-install condition:</span>
-              <SQLEditor
-                readOnly
-                value={preInstallQuery}
-                label="Query"
-                name="preInstallQuery"
-                maxLines={10}
-                helpText={
-                  <>
-                    Software will be installed only if the{" "}
-                    <CustomLink
-                      className={`${baseClass}__table-link`}
-                      text="query returns results"
-                      url="https://fleetdm.com/tables"
-                      newTab
-                    />
-                  </>
-                }
-              />
-            </div>
-          )}
-          {postInstallScript && (
-            <div className={`${baseClass}__input-field`}>
-              <span>Post-install script:</span>
-              <Editor
-                readOnly
-                wrapEnabled
-                name="post-install-script-editor"
-                maxLines={10}
-                value={postInstallScript}
-                helpText="Shell (macOS and Linux) or PowerShell (Windows)."
-              />
-            </div>
-          )}
-        </div>
-        <div className="modal-cta-wrap">
-          <Button onClick={onExit}>Done</Button>
-        </div>
-      </>
+      <p>
+        Advanced options are read-only. To change options, delete software and
+        add again.
+      </p>
+      <div className={`${baseClass}__form-inputs`}>
+        <Editor
+          readOnly
+          wrapEnabled
+          maxLines={10}
+          name="install-script"
+          value={installScript}
+          helpText="Fleet will run this command on hosts to install software."
+          label="Install script"
+          labelTooltip="For security agents, add the script provided by the vendor."
+        />
+        {preInstallQuery && (
+          <div className={`${baseClass}__input-field`}>
+            <span>Pre-install condition:</span>
+            <SQLEditor
+              readOnly
+              value={preInstallQuery}
+              label="Query"
+              name="preInstallQuery"
+              maxLines={10}
+              helpText={
+                <>
+                  Software will be installed only if the{" "}
+                  <CustomLink
+                    className={`${baseClass}__table-link`}
+                    text="query returns results"
+                    url="https://fleetdm.com/tables"
+                    newTab
+                  />
+                </>
+              }
+            />
+          </div>
+        )}
+        {postInstallScript && (
+          <div className={`${baseClass}__input-field`}>
+            <span>Post-install script:</span>
+            <Editor
+              readOnly
+              wrapEnabled
+              name="post-install-script-editor"
+              maxLines={10}
+              value={postInstallScript}
+              helpText="Shell (macOS and Linux) or PowerShell (Windows)."
+            />
+          </div>
+        )}
+      </div>
+      <div className="modal-cta-wrap">
+        <Button onClick={onExit}>Done</Button>
+      </div>
     </Modal>
   );
 };
diff --git a/frontend/pages/SoftwarePage/SoftwareTitleDetailsPage/DeleteSoftwareModal/DeleteSoftwareModal.tsx b/frontend/pages/SoftwarePage/SoftwareTitleDetailsPage/DeleteSoftwareModal/DeleteSoftwareModal.tsx
index 0ab96d3cc8..011d132a56 100644
--- a/frontend/pages/SoftwarePage/SoftwareTitleDetailsPage/DeleteSoftwareModal/DeleteSoftwareModal.tsx
+++ b/frontend/pages/SoftwarePage/SoftwareTitleDetailsPage/DeleteSoftwareModal/DeleteSoftwareModal.tsx
@@ -109,28 +109,26 @@ const DeleteSoftwareModal = ({
       onExit={onExit}
       isContentDisabled={isDeleting}
     >
-      <>
-        {gitOpsModeEnabled && (
-          <InfoBanner className={`${baseClass}__gitops-warning`}>
-            You are currently in GitOps mode. If the package is defined in
-            GitOps, it will reappear when GitOps runs.
-          </InfoBanner>
-        )}
-        {getPlatformMessage(isAppStoreApp, isAndroidApp)}
-        <p>Custom icon and display name will be deleted.</p>
-        <div className="modal-cta-wrap">
-          <Button
-            variant="alert"
-            onClick={onDeleteSoftware}
-            isLoading={isDeleting}
-          >
-            Delete
-          </Button>
-          <Button variant="inverse-alert" onClick={onExit}>
-            Cancel
-          </Button>
-        </div>
-      </>
+      {gitOpsModeEnabled && (
+        <InfoBanner className={`${baseClass}__gitops-warning`}>
+          You are currently in GitOps mode. If the package is defined in GitOps,
+          it will reappear when GitOps runs.
+        </InfoBanner>
+      )}
+      {getPlatformMessage(isAppStoreApp, isAndroidApp)}
+      <p>Custom icon and display name will be deleted.</p>
+      <div className="modal-cta-wrap">
+        <Button
+          variant="alert"
+          onClick={onDeleteSoftware}
+          isLoading={isDeleting}
+        >
+          Delete
+        </Button>
+        <Button variant="inverse-alert" onClick={onExit}>
+          Cancel
+        </Button>
+      </div>
     </Modal>
   );
 };
diff --git a/frontend/pages/SoftwarePage/SoftwareTitleDetailsPage/EditAutoUpdateConfigModal/EditAutoUpdateConfigModal.tsx b/frontend/pages/SoftwarePage/SoftwareTitleDetailsPage/EditAutoUpdateConfigModal/EditAutoUpdateConfigModal.tsx
index edf0ffda4e..18edab9a66 100644
--- a/frontend/pages/SoftwarePage/SoftwareTitleDetailsPage/EditAutoUpdateConfigModal/EditAutoUpdateConfigModal.tsx
+++ b/frontend/pages/SoftwarePage/SoftwareTitleDetailsPage/EditAutoUpdateConfigModal/EditAutoUpdateConfigModal.tsx
@@ -208,126 +208,122 @@ const EditAutoUpdateConfigModal = ({
 
   return (
     <Modal className={baseClass} title="Schedule auto updates" onExit={onExit}>
-      <>
-        <div className={formClassNames}>
-          <div className={`${formClass}__form-frame`}>
-            <Card paddingSize="medium" borderRadiusSize="medium">
-              <div className={`${formClass}__auto-update-config`}>
-                <div className={`form-field`}>
-                  <div className="form-field__label">Auto updates</div>
-                  <div className="form-field__subtitle">
-                    Automatically update{" "}
-                    <strong>
-                      {getDisplayedSoftwareName(
-                        softwareTitle.name,
-                        softwareTitle.display_name
-                      )}
-                    </strong>{" "}
-                    on all targeted hosts when a new version is available.
+      <div className={formClassNames}>
+        <div className={`${formClass}__form-frame`}>
+          <Card paddingSize="medium" borderRadiusSize="medium">
+            <div className={`${formClass}__auto-update-config`}>
+              <div className={`form-field`}>
+                <div className="form-field__label">Auto updates</div>
+                <div className="form-field__subtitle">
+                  Automatically update{" "}
+                  <strong>
+                    {getDisplayedSoftwareName(
+                      softwareTitle.name,
+                      softwareTitle.display_name
+                    )}
+                  </strong>{" "}
+                  on all targeted hosts when a new version is available.
+                </div>
+                <div>
+                  <Checkbox
+                    value={formData.autoUpdateEnabled}
+                    onChange={(newVal: boolean) => onToggleEnabled(newVal)}
+                  >
+                    Enable auto updates
+                  </Checkbox>
+                </div>
+              </div>
+              {formData.autoUpdateEnabled && (
+                <>
+                  <div>
+                    <div className="form-field">
+                      <div className={updateWindowLabelClass}>
+                        {updateWindowLabel}
+                      </div>
+                      <div className="form-field__subtitle">
+                        Times are formatted as HH:MM in 24 hour time (e.g.,
+                        &quot;13:37&quot;).
+                      </div>
+                    </div>
                   </div>
                   <div>
-                    <Checkbox
-                      value={formData.autoUpdateEnabled}
-                      onChange={(newVal: boolean) => onToggleEnabled(newVal)}
-                    >
-                      Enable auto updates
-                    </Checkbox>
+                    <div className={`${formClass}__auto-update-schedule-form`}>
+                      <span className="date-time-inputs">
+                        <InputField
+                          value={formData.autoUpdateStartTime}
+                          onChange={onChangeTimeField}
+                          onBlur={() =>
+                            setFormValidation(validateFormData(formData))
+                          }
+                          label="Earliest start time"
+                          name="autoUpdateStartTime"
+                          parseTarget
+                          error={earliestStartTimeError}
+                        />
+                        <InputField
+                          value={formData.autoUpdateEndTime}
+                          onChange={onChangeTimeField}
+                          onBlur={() =>
+                            setFormValidation(validateFormData(formData))
+                          }
+                          label="Latest start time"
+                          name="autoUpdateEndTime"
+                          parseTarget
+                          error={latestStartTimeError}
+                        />
+                      </span>
+                    </div>
                   </div>
-                </div>
-                {formData.autoUpdateEnabled && (
-                  <>
-                    <div>
-                      <div className="form-field">
-                        <div className={updateWindowLabelClass}>
-                          {updateWindowLabel}
-                        </div>
-                        <div className="form-field__subtitle">
-                          Times are formatted as HH:MM in 24 hour time (e.g.,
-                          &quot;13:37&quot;).
-                        </div>
-                      </div>
-                    </div>
-                    <div>
-                      <div
-                        className={`${formClass}__auto-update-schedule-form`}
-                      >
-                        <span className="date-time-inputs">
-                          <InputField
-                            value={formData.autoUpdateStartTime}
-                            onChange={onChangeTimeField}
-                            onBlur={() =>
-                              setFormValidation(validateFormData(formData))
-                            }
-                            label="Earliest start time"
-                            name="autoUpdateStartTime"
-                            parseTarget
-                            error={earliestStartTimeError}
-                          />
-                          <InputField
-                            value={formData.autoUpdateEndTime}
-                            onChange={onChangeTimeField}
-                            onBlur={() =>
-                              setFormValidation(validateFormData(formData))
-                            }
-                            label="Latest start time"
-                            name="autoUpdateEndTime"
-                            parseTarget
-                            error={latestStartTimeError}
-                          />
-                        </span>
-                      </div>
-                    </div>
-                  </>
-                )}
-              </div>
-            </Card>
-            <Card paddingSize="medium" borderRadiusSize="medium">
-              <TargetLabelSelector
-                selectedTargetType={formData.targetType}
-                selectedCustomTarget={formData.customTarget}
-                selectedLabels={formData.labelTargets}
-                customTargetOptions={CUSTOM_TARGET_OPTIONS}
-                className={`${formClass}__target`}
-                onSelectTargetType={onSelectTargetType}
-                onSelectCustomTarget={onSelectCustomTargetOption}
-                onSelectLabel={onSelectLabel}
-                labels={labels || []}
-                dropdownHelpText={
-                  generateHelpText(false, formData.customTarget) // maps to !automaticInstall help text
-                }
-                subTitle="Changes to targets will also apply to self-service."
-              />
-            </Card>
-          </div>
+                </>
+              )}
+            </div>
+          </Card>
+          <Card paddingSize="medium" borderRadiusSize="medium">
+            <TargetLabelSelector
+              selectedTargetType={formData.targetType}
+              selectedCustomTarget={formData.customTarget}
+              selectedLabels={formData.labelTargets}
+              customTargetOptions={CUSTOM_TARGET_OPTIONS}
+              className={`${formClass}__target`}
+              onSelectTargetType={onSelectTargetType}
+              onSelectCustomTarget={onSelectCustomTargetOption}
+              onSelectLabel={onSelectLabel}
+              labels={labels || []}
+              dropdownHelpText={
+                generateHelpText(false, formData.customTarget) // maps to !automaticInstall help text
+              }
+              subTitle="Changes to targets will also apply to self-service."
+            />
+          </Card>
         </div>
-        <ModalFooter
-          primaryButtons={
-            <>
-              <Button onClick={onExit} variant="inverse">
-                Cancel
-              </Button>
-              <GitOpsModeTooltipWrapper
-                position="right"
-                tipOffset={8}
-                renderChildren={(disableChildren) => (
-                  <Button
-                    type="submit"
-                    onClick={onSubmitForm}
-                    isLoading={isUpdatingConfiguration}
-                    disabled={
-                      !formValidation.isValid ||
-                      isUpdatingConfiguration ||
-                      disableChildren
-                    }
-                  >
-                    Save
-                  </Button>
-                )}
-              />
-            </>
-          }
-        />
-      </>
+      </div>
+      <ModalFooter
+        primaryButtons={
+          <>
+            <Button onClick={onExit} variant="inverse">
+              Cancel
+            </Button>
+            <GitOpsModeTooltipWrapper
+              position="right"
+              tipOffset={8}
+              renderChildren={(disableChildren) => (
+                <Button
+                  type="submit"
+                  onClick={onSubmitForm}
+                  isLoading={isUpdatingConfiguration}
+                  disabled={
+                    !formValidation.isValid ||
+                    isUpdatingConfiguration ||
+                    disableChildren
+                  }
+                >
+                  Save
+                </Button>
+              )}
+            />
+          </>
+        }
+      />
     </Modal>
   );
 };
diff --git a/frontend/pages/SoftwarePage/SoftwareTitleDetailsPage/EditConfigurationModal/EditConfigurationModal.tsx b/frontend/pages/SoftwarePage/SoftwareTitleDetailsPage/EditConfigurationModal/EditConfigurationModal.tsx
index 5e93406bbd..b38d4e271e 100644
--- a/frontend/pages/SoftwarePage/SoftwareTitleDetailsPage/EditConfigurationModal/EditConfigurationModal.tsx
+++ b/frontend/pages/SoftwarePage/SoftwareTitleDetailsPage/EditConfigurationModal/EditConfigurationModal.tsx
@@ -144,29 +144,27 @@ const EditConfigurationModal = ({
 
   return (
     <Modal className={baseClass} title="Edit configuration" onExit={onExit}>
-      <>
-        <InstallerDetailsWidget
-          softwareName={softwareInstaller.name}
-          androidPlayStoreId={softwareInstaller.app_store_id}
-          customDetails="Android"
-          installerType="app-store"
-          isFma={false}
-          isScriptPackage={false}
-        />
-        {renderForm()}
-        <ModalFooter
-          primaryButtons={
-            <Button
-              type="submit"
-              onClick={onEditConfiguration}
-              isLoading={isUpdatingConfiguration}
-              disabled={!canSaveForm || isUpdatingConfiguration}
-            >
-              Save
-            </Button>
-          }
-        />
-      </>
+      <InstallerDetailsWidget
+        softwareName={softwareInstaller.name}
+        androidPlayStoreId={softwareInstaller.app_store_id}
+        customDetails="Android"
+        installerType="app-store"
+        isFma={false}
+        isScriptPackage={false}
+      />
+      {renderForm()}
+      <ModalFooter
+        primaryButtons={
+          <Button
+            type="submit"
+            onClick={onEditConfiguration}
+            isLoading={isUpdatingConfiguration}
+            disabled={!canSaveForm || isUpdatingConfiguration}
+          >
+            Save
+          </Button>
+        }
+      />
     </Modal>
   );
 };
diff --git a/frontend/pages/SoftwarePage/SoftwareTitleDetailsPage/EditIconModal/EditIconModal.tsx b/frontend/pages/SoftwarePage/SoftwareTitleDetailsPage/EditIconModal/EditIconModal.tsx
index 336e54c755..942dfead5a 100644
--- a/frontend/pages/SoftwarePage/SoftwareTitleDetailsPage/EditIconModal/EditIconModal.tsx
+++ b/frontend/pages/SoftwarePage/SoftwareTitleDetailsPage/EditIconModal/EditIconModal.tsx
@@ -739,25 +739,23 @@ const EditIconModal = ({
       title="Edit appearance"
       onExit={onExitEditIconModal}
     >
-      <>
-        {isFirstLoadWithCustomIcon ? (
-          <Spinner includeContainer={false} />
-        ) : (
-          renderForm()
-        )}
-        <ModalFooter
-          primaryButtons={
-            <Button
-              type="submit"
-              onClick={onClickSave}
-              isLoading={isUpdatingSoftwareInfo}
-              disabled={!canSaveForm || isUpdatingSoftwareInfo}
-            >
-              Save
-            </Button>
-          }
-        />
-      </>
+      {isFirstLoadWithCustomIcon ? (
+        <Spinner includeContainer={false} />
+      ) : (
+        renderForm()
+      )}
+      <ModalFooter
+        primaryButtons={
+          <Button
+            type="submit"
+            onClick={onClickSave}
+            isLoading={isUpdatingSoftwareInfo}
+            disabled={!canSaveForm || isUpdatingSoftwareInfo}
+          >
+            Save
+          </Button>
+        }
+      />
     </Modal>
   );
 };
diff --git a/frontend/pages/SoftwarePage/SoftwareTitleDetailsPage/ViewYamlModal/ViewYamlModal.tsx b/frontend/pages/SoftwarePage/SoftwareTitleDetailsPage/ViewYamlModal/ViewYamlModal.tsx
index 1420601ea6..09d7955e65 100644
--- a/frontend/pages/SoftwarePage/SoftwareTitleDetailsPage/ViewYamlModal/ViewYamlModal.tsx
+++ b/frontend/pages/SoftwarePage/SoftwareTitleDetailsPage/ViewYamlModal/ViewYamlModal.tsx
@@ -56,41 +56,39 @@ const ViewYamlModal = ({
 
   return (
     <Modal className={baseClass} title="YAML" onExit={onExit}>
-      <>
-        {repositoryUrl && (
-          <p>
-            Manage in <CustomLink url={repositoryUrl} text="YAML" newTab />.
-          </p>
-        )}
-        <div className={`${baseClass}__form-fields`}>
-          <InputField
-            enableCopy
-            readOnly
-            name="filename"
-            label="Filename"
-            value={`${hyphenatedSoftwareTitle}.package.yml`}
-          />
-          <Editor
-            label="Contents"
-            value={packageYaml}
-            enableCopy
-            helpText={
-              <>
-                If you added advanced options, learn how to{" "}
-                <CustomLink
-                  url={`${LEARN_MORE_ABOUT_BASE_LINK}/yaml-packages`}
-                  text="add them to your YAML"
-                  newTab
-                />
-                .
-              </>
-            }
-          />
-        </div>
-        <div className="modal-cta-wrap">
-          <Button onClick={onExit}>Done</Button>
-        </div>
-      </>
+      {repositoryUrl && (
+        <p>
+          Manage in <CustomLink url={repositoryUrl} text="YAML" newTab />.
+        </p>
+      )}
+      <div className={`${baseClass}__form-fields`}>
+        <InputField
+          enableCopy
+          readOnly
+          name="filename"
+          label="Filename"
+          value={`${hyphenatedSoftwareTitle}.package.yml`}
+        />
+        <Editor
+          label="Contents"
+          value={packageYaml}
+          enableCopy
+          helpText={
+            <>
+              If you added advanced options, learn how to{" "}
+              <CustomLink
+                url={`${LEARN_MORE_ABOUT_BASE_LINK}/yaml-packages`}
+                text="add them to your YAML"
+                newTab
+              />
+              .
+            </>
+          }
+        />
+      </div>
+      <div className="modal-cta-wrap">
+        <Button onClick={onExit}>Done</Button>
+      </div>
     </Modal>
   );
 };
diff --git a/frontend/pages/SoftwarePage/components/modals/CategoriesEndUserExperienceModal/CategoriesEndUserExperienceModal.tsx b/frontend/pages/SoftwarePage/components/modals/CategoriesEndUserExperienceModal/CategoriesEndUserExperienceModal.tsx
index 7461a6575b..372e0e64e4 100644
--- a/frontend/pages/SoftwarePage/components/modals/CategoriesEndUserExperienceModal/CategoriesEndUserExperienceModal.tsx
+++ b/frontend/pages/SoftwarePage/components/modals/CategoriesEndUserExperienceModal/CategoriesEndUserExperienceModal.tsx
@@ -142,34 +142,32 @@ const CategoriesEndUserExperienceModal = ({
   const { config } = useContext(AppContext);
   return (
     <Modal title="End user experience" onExit={onCancel} className={baseClass}>
-      <>
-        <span>What end users see:</span>
-        <SelfServicePreview
-          isIosOrIpadosApp={isIosOrIpadosApp}
-          contactUrl={config?.org_info.contact_url || ""}
-          name={name}
-          displayName={displayName || name}
-          versionLabel={mobileVersion || "Version (unknown)"}
-          renderIcon={() => (
-            <SoftwareIcon
-              name={name}
-              source={source}
-              url={iconUrl ?? undefined}
-            />
-          )}
-          renderTable={() => (
-            <BasicSoftwareTable
-              name={name}
-              displayName={displayName}
-              source={source}
-              iconUrl={iconUrl}
-            />
-          )}
-        />
-        <div className="modal-cta-wrap">
-          <Button onClick={onCancel}>Done</Button>
-        </div>
-      </>
+      <span>What end users see:</span>
+      <SelfServicePreview
+        isIosOrIpadosApp={isIosOrIpadosApp}
+        contactUrl={config?.org_info.contact_url || ""}
+        name={name}
+        displayName={displayName || name}
+        versionLabel={mobileVersion || "Version (unknown)"}
+        renderIcon={() => (
+          <SoftwareIcon
+            name={name}
+            source={source}
+            url={iconUrl ?? undefined}
+          />
+        )}
+        renderTable={() => (
+          <BasicSoftwareTable
+            name={name}
+            displayName={displayName}
+            source={source}
+            iconUrl={iconUrl}
+          />
+        )}
+      />
+      <div className="modal-cta-wrap">
+        <Button onClick={onCancel}>Done</Button>
+      </div>
     </Modal>
   );
 };
diff --git a/frontend/pages/SoftwarePage/components/modals/PreviewTicketModal/PreviewTicketModal.tsx b/frontend/pages/SoftwarePage/components/modals/PreviewTicketModal/PreviewTicketModal.tsx
index 087b08b499..49e0c6a055 100644
--- a/frontend/pages/SoftwarePage/components/modals/PreviewTicketModal/PreviewTicketModal.tsx
+++ b/frontend/pages/SoftwarePage/components/modals/PreviewTicketModal/PreviewTicketModal.tsx
@@ -46,20 +46,18 @@ const PreviewTicketModal = ({
       className={baseClass}
       width="large"
     >
-      <>
-        <p className="automations-learn-more">
-          Want to learn more about how automations in Fleet work?{" "}
-          <CustomLink
-            url="https://fleetdm.com/docs/using-fleet/automations"
-            text="Check out the Fleet documentation"
-            newTab
-          />
-        </p>
-        <div className={`${baseClass}__example`}>{screenshot}</div>
-        <div className="modal-cta-wrap">
-          <Button onClick={onCancel}>Done</Button>
-        </div>
-      </>
+      <p className="automations-learn-more">
+        Want to learn more about how automations in Fleet work?{" "}
+        <CustomLink
+          url="https://fleetdm.com/docs/using-fleet/automations"
+          text="Check out the Fleet documentation"
+          newTab
+        />
+      </p>
+      <div className={`${baseClass}__example`}>{screenshot}</div>
+      <div className="modal-cta-wrap">
+        <Button onClick={onCancel}>Done</Button>
+      </div>
     </Modal>
   );
 };
diff --git a/frontend/pages/admin/IntegrationsPage/cards/CertificateAuthorities/components/AddCertAuthorityModal/AddCertAuthorityModal.tsx b/frontend/pages/admin/IntegrationsPage/cards/CertificateAuthorities/components/AddCertAuthorityModal/AddCertAuthorityModal.tsx
index cdf8764643..25175d52a1 100644
--- a/frontend/pages/admin/IntegrationsPage/cards/CertificateAuthorities/components/AddCertAuthorityModal/AddCertAuthorityModal.tsx
+++ b/frontend/pages/admin/IntegrationsPage/cards/CertificateAuthorities/components/AddCertAuthorityModal/AddCertAuthorityModal.tsx
@@ -289,16 +289,14 @@ const AddCertAuthorityModal = ({
       onExit={onExit}
       isContentDisabled={isAdding}
     >
-      <>
-        <Dropdown
-          options={dropdownOptions}
-          value={certAuthorityType}
-          className={`${baseClass}__cert-authority-dropdown`}
-          onChange={onChangeDropdown}
-          searchable={false}
-        />
-        {renderForm()}
-      </>
+      <Dropdown
+        options={dropdownOptions}
+        value={certAuthorityType}
+        className={`${baseClass}__cert-authority-dropdown`}
+        onChange={onChangeDropdown}
+        searchable={false}
+      />
+      {renderForm()}
     </Modal>
   );
 };
diff --git a/frontend/pages/admin/IntegrationsPage/cards/CertificateAuthorities/components/DeleteCertificateAuthorityModal/DeleteCertificateAuthorityModal.tsx b/frontend/pages/admin/IntegrationsPage/cards/CertificateAuthorities/components/DeleteCertificateAuthorityModal/DeleteCertificateAuthorityModal.tsx
index f71ff505ec..144b678a48 100644
--- a/frontend/pages/admin/IntegrationsPage/cards/CertificateAuthorities/components/DeleteCertificateAuthorityModal/DeleteCertificateAuthorityModal.tsx
+++ b/frontend/pages/admin/IntegrationsPage/cards/CertificateAuthorities/components/DeleteCertificateAuthorityModal/DeleteCertificateAuthorityModal.tsx
@@ -46,25 +46,23 @@ const DeleteCertificateAuthorityModal = ({
       title="Delete certificate authority (CA)"
       onExit={onExit}
     >
-      <>
-        <p>
-          Fleet won&apos;t remove certificates from the certificate authority (
-          <b>{certAuthority.name}</b>) on existing hosts.
-        </p>
-        <div className="modal-cta-wrap">
-          <Button
-            variant="alert"
-            onClick={onDeleteCertAuthority}
-            isLoading={isUpdating}
-            disabled={isUpdating}
-          >
-            Delete
-          </Button>
-          <Button variant="inverse-alert" onClick={onExit}>
-            Cancel
-          </Button>
-        </div>
-      </>
+      <p>
+        Fleet won&apos;t remove certificates from the certificate authority (
+        <b>{certAuthority.name}</b>) on existing hosts.
+      </p>
+      <div className="modal-cta-wrap">
+        <Button
+          variant="alert"
+          onClick={onDeleteCertAuthority}
+          isLoading={isUpdating}
+          disabled={isUpdating}
+        >
+          Delete
+        </Button>
+        <Button variant="inverse-alert" onClick={onExit}>
+          Cancel
+        </Button>
+      </div>
     </Modal>
   );
 };
diff --git a/frontend/pages/admin/IntegrationsPage/cards/ConditionalAccess/ConditionalAccess.tsx b/frontend/pages/admin/IntegrationsPage/cards/ConditionalAccess/ConditionalAccess.tsx
index 6f8bafc8f7..6264fda0f4 100644
--- a/frontend/pages/admin/IntegrationsPage/cards/ConditionalAccess/ConditionalAccess.tsx
+++ b/frontend/pages/admin/IntegrationsPage/cards/ConditionalAccess/ConditionalAccess.tsx
@@ -130,27 +130,25 @@ const DeleteConditionalAccessModal = ({
       onExit={toggleDeleteConditionalAccessModal}
       onEnter={handleDelete}
     >
-      <>
-        {copy}
-        <div className="modal-cta-wrap">
-          <Button
-            type="button"
-            variant="alert"
-            onClick={handleDelete}
-            isLoading={isDeleting}
-            disabled={isDeleting}
-          >
-            Delete
-          </Button>
-          <Button
-            onClick={toggleDeleteConditionalAccessModal}
-            variant="inverse-alert"
-            disabled={isDeleting}
-          >
-            Cancel
-          </Button>
-        </div>
-      </>
+      {copy}
+      <div className="modal-cta-wrap">
+        <Button
+          type="button"
+          variant="alert"
+          onClick={handleDelete}
+          isLoading={isDeleting}
+          disabled={isDeleting}
+        >
+          Delete
+        </Button>
+        <Button
+          onClick={toggleDeleteConditionalAccessModal}
+          variant="inverse-alert"
+          disabled={isDeleting}
+        >
+          Cancel
+        </Button>
+      </div>
     </Modal>
   );
 };
diff --git a/frontend/pages/admin/IntegrationsPage/cards/ConditionalAccess/components/EntraConditionalAccessModal/EntraConditionalAccessModal.tsx b/frontend/pages/admin/IntegrationsPage/cards/ConditionalAccess/components/EntraConditionalAccessModal/EntraConditionalAccessModal.tsx
index 4df47a3ffc..c19c808cbe 100644
--- a/frontend/pages/admin/IntegrationsPage/cards/ConditionalAccess/components/EntraConditionalAccessModal/EntraConditionalAccessModal.tsx
+++ b/frontend/pages/admin/IntegrationsPage/cards/ConditionalAccess/components/EntraConditionalAccessModal/EntraConditionalAccessModal.tsx
@@ -93,41 +93,39 @@ const EntraConditionalAccessModal = ({
       className={baseClass}
       width="large"
     >
-      <>
-        <form onSubmit={onSubmit} autoComplete="off">
-          <p className={`${baseClass}__instructions`}>
-            To configure Microsoft Entra conditional access, follow the
-            instructions in the{" "}
-            <CustomLink
-              url={`${LEARN_MORE_ABOUT_BASE_LINK}/entra-conditional-access`}
-              text="guide"
-              newTab
-            />
-          </p>
-          <InputField
-            label="Microsoft Entra tenant ID"
-            helpText="You can find this in your Microsoft Entra admin center."
-            onChange={onInputChange}
-            name={MSETID}
-            value={formData[MSETID]}
-            parseTarget
-            onBlur={onInputBlur}
-            error={formErrors[MSETID]}
+      <form onSubmit={onSubmit} autoComplete="off">
+        <p className={`${baseClass}__instructions`}>
+          To configure Microsoft Entra conditional access, follow the
+          instructions in the{" "}
+          <CustomLink
+            url={`${LEARN_MORE_ABOUT_BASE_LINK}/entra-conditional-access`}
+            text="guide"
+            newTab
           />
-          <div className="modal-cta-wrap">
-            <Button
-              type="submit"
-              disabled={!!size(formErrors)}
-              isLoading={isUpdating}
-            >
-              Save
-            </Button>
-            <Button onClick={onCancel} variant="inverse">
-              Cancel
-            </Button>
-          </div>
-        </form>
-      </>
+        </p>
+        <InputField
+          label="Microsoft Entra tenant ID"
+          helpText="You can find this in your Microsoft Entra admin center."
+          onChange={onInputChange}
+          name={MSETID}
+          value={formData[MSETID]}
+          parseTarget
+          onBlur={onInputBlur}
+          error={formErrors[MSETID]}
+        />
+        <div className="modal-cta-wrap">
+          <Button
+            type="submit"
+            disabled={!!size(formErrors)}
+            isLoading={isUpdating}
+          >
+            Save
+          </Button>
+          <Button onClick={onCancel} variant="inverse">
+            Cancel
+          </Button>
+        </div>
+      </form>
     </Modal>
   );
 };
diff --git a/frontend/pages/admin/IntegrationsPage/cards/ConditionalAccess/components/OktaConditionalAccessModal/OktaConditionalAccessModal.tsx b/frontend/pages/admin/IntegrationsPage/cards/ConditionalAccess/components/OktaConditionalAccessModal/OktaConditionalAccessModal.tsx
index 529852b2d2..c43dec0f64 100644
--- a/frontend/pages/admin/IntegrationsPage/cards/ConditionalAccess/components/OktaConditionalAccessModal/OktaConditionalAccessModal.tsx
+++ b/frontend/pages/admin/IntegrationsPage/cards/ConditionalAccess/components/OktaConditionalAccessModal/OktaConditionalAccessModal.tsx
@@ -287,110 +287,108 @@ const OktaConditionalAccessModal = ({
       className={baseClass}
       width="xlarge"
     >
-      <>
-        <form onSubmit={onSubmit} autoComplete="off">
-          <p className={`${baseClass}__instructions`}>
-            To configure Okta conditional access, follow the instructions in the{" "}
-            <CustomLink
-              url={`${LEARN_MORE_ABOUT_BASE_LINK}/okta-conditional-access`}
-              text="guide"
-              newTab
-            />
-          </p>
+      <form onSubmit={onSubmit} autoComplete="off">
+        <p className={`${baseClass}__instructions`}>
+          To configure Okta conditional access, follow the instructions in the{" "}
+          <CustomLink
+            url={`${LEARN_MORE_ABOUT_BASE_LINK}/okta-conditional-access`}
+            text="guide"
+            newTab
+          />
+        </p>
 
-          {/* IdP Signature Certificate Section */}
-          <div className={`${baseClass}__certificate-section`}>
-            <TooltipWrapper
-              tipContent="Upload this certificate in Okta when creating the Fleet IdP."
-              underline
-            >
-              Identity provider (IdP) signature certificate
-            </TooltipWrapper>
-            <br />
-            <Button
-              variant="inverse"
-              onClick={onDownloadSigningCert}
-              isLoading={isDownloadingCert}
-              disabled={isDownloadingCert}
-            >
-              Download certificate <Icon name="download" />
-            </Button>
-          </div>
+        {/* IdP Signature Certificate Section */}
+        <div className={`${baseClass}__certificate-section`}>
+          <TooltipWrapper
+            tipContent="Upload this certificate in Okta when creating the Fleet IdP."
+            underline
+          >
+            Identity provider (IdP) signature certificate
+          </TooltipWrapper>
+          <br />
+          <Button
+            variant="inverse"
+            onClick={onDownloadSigningCert}
+            isLoading={isDownloadingCert}
+            disabled={isDownloadingCert}
+          >
+            Download certificate <Icon name="download" />
+          </Button>
+        </div>
 
-          {/* User Scope Profile */}
-          <InputField
-            enableCopy
-            label="User scope profile"
-            readOnly
-            value={appleProfile}
-            type="textarea"
-          />
+        {/* User Scope Profile */}
+        <InputField
+          enableCopy
+          label="User scope profile"
+          readOnly
+          value={appleProfile}
+          type="textarea"
+        />
 
-          {/* Help text */}
-          <p className={`${baseClass}__field-instructions`}>
-            You can find the following fields in Okta after creating an IdP in{" "}
-            <strong>Security</strong> &gt; <strong>Identity Providers</strong>{" "}
-            &gt; <strong>SAML 2.0 IdP</strong>.
-          </p>
+        {/* Help text */}
+        <p className={`${baseClass}__field-instructions`}>
+          You can find the following fields in Okta after creating an IdP in{" "}
+          <strong>Security</strong> &gt; <strong>Identity Providers</strong>{" "}
+          &gt; <strong>SAML 2.0 IdP</strong>.
+        </p>
 
-          <InputField
-            label="IdP ID"
-            onChange={onInputChange}
-            name={OKTA_IDP_ID}
-            value={formData[OKTA_IDP_ID]}
-            parseTarget
-            onBlur={onInputBlur}
-            error={formErrors[OKTA_IDP_ID]}
-          />
-          <InputField
-            label="Assertion consumer service URL"
-            onChange={onInputChange}
-            name={OKTA_ACS_URL}
-            value={formData[OKTA_ACS_URL]}
-            parseTarget
-            onBlur={onInputBlur}
-            error={formErrors[OKTA_ACS_URL]}
-          />
-          <InputField
-            label="Audience URI"
-            onChange={onInputChange}
-            name={OKTA_AUDIENCE_URI}
-            value={formData[OKTA_AUDIENCE_URI]}
-            parseTarget
-            onBlur={onInputBlur}
-            error={formErrors[OKTA_AUDIENCE_URI]}
-          />
-          <FileUploader
-            graphicName="file-pem"
-            title="Okta certificate"
-            message={
-              <>
-                Upload the certificate provided by Okta during the{" "}
-                <strong>Set Up Authenticator</strong> workflow
-              </>
-            }
-            internalError={formErrors[OKTA_CERTIFICATE]}
-            onFileUpload={onSelectFile}
-            buttonType="brand-inverse-icon"
-            buttonMessage="Upload"
-            accept=".pem,.crt,.cer,.cert"
-            fileDetails={certFile ? { name: certFile.name } : undefined}
-            onDeleteFile={onDeleteFile}
-          />
-          <div className="modal-cta-wrap">
-            <Button
-              type="submit"
-              disabled={!!size(formErrors)}
-              isLoading={isUpdating}
-            >
-              Save
-            </Button>
-            <Button onClick={onCancel} variant="inverse">
-              Cancel
-            </Button>
-          </div>
-        </form>
-      </>
+        <InputField
+          label="IdP ID"
+          onChange={onInputChange}
+          name={OKTA_IDP_ID}
+          value={formData[OKTA_IDP_ID]}
+          parseTarget
+          onBlur={onInputBlur}
+          error={formErrors[OKTA_IDP_ID]}
+        />
+        <InputField
+          label="Assertion consumer service URL"
+          onChange={onInputChange}
+          name={OKTA_ACS_URL}
+          value={formData[OKTA_ACS_URL]}
+          parseTarget
+          onBlur={onInputBlur}
+          error={formErrors[OKTA_ACS_URL]}
+        />
+        <InputField
+          label="Audience URI"
+          onChange={onInputChange}
+          name={OKTA_AUDIENCE_URI}
+          value={formData[OKTA_AUDIENCE_URI]}
+          parseTarget
+          onBlur={onInputBlur}
+          error={formErrors[OKTA_AUDIENCE_URI]}
+        />
+        <FileUploader
+          graphicName="file-pem"
+          title="Okta certificate"
+          message={
+            <>
+              Upload the certificate provided by Okta during the{" "}
+              <strong>Set Up Authenticator</strong> workflow
+            </>
+          }
+          internalError={formErrors[OKTA_CERTIFICATE]}
+          onFileUpload={onSelectFile}
+          buttonType="brand-inverse-icon"
+          buttonMessage="Upload"
+          accept=".pem,.crt,.cer,.cert"
+          fileDetails={certFile ? { name: certFile.name } : undefined}
+          onDeleteFile={onDeleteFile}
+        />
+        <div className="modal-cta-wrap">
+          <Button
+            type="submit"
+            disabled={!!size(formErrors)}
+            isLoading={isUpdating}
+          >
+            Save
+          </Button>
+          <Button onClick={onCancel} variant="inverse">
+            Cancel
+          </Button>
+        </div>
+      </form>
     </Modal>
   );
 };
diff --git a/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/AndroidMdmPage/components/TurnOffAndroidMdmModal/TurnOffAndroidMdmModal.tsx b/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/AndroidMdmPage/components/TurnOffAndroidMdmModal/TurnOffAndroidMdmModal.tsx
index d9f031c049..22a0bafacf 100644
--- a/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/AndroidMdmPage/components/TurnOffAndroidMdmModal/TurnOffAndroidMdmModal.tsx
+++ b/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/AndroidMdmPage/components/TurnOffAndroidMdmModal/TurnOffAndroidMdmModal.tsx
@@ -39,33 +39,27 @@ const TurnOffAndroidMdmModal = ({
 
   return (
     <Modal title="Turn off Android MDM" className={baseClass} onExit={onExit}>
-      <>
-        <p>
-          If you want to use MDM features again, you&apos;ll have to reconnect
-          Android Enterprise.
-        </p>
-        <p>
-          End users will lose access to organization resources and all data in
-          their Android work partition.
-        </p>
-        <div className="modal-cta-wrap">
-          <Button
-            variant="alert"
-            isLoading={isDeleting}
-            disabled={isDeleting}
-            onClick={onClickConfirm}
-          >
-            Turn off
-          </Button>
-          <Button
-            variant="inverse-alert"
-            disabled={isDeleting}
-            onClick={onExit}
-          >
-            Cancel
-          </Button>
-        </div>
-      </>
+      <p>
+        If you want to use MDM features again, you&apos;ll have to reconnect
+        Android Enterprise.
+      </p>
+      <p>
+        End users will lose access to organization resources and all data in
+        their Android work partition.
+      </p>
+      <div className="modal-cta-wrap">
+        <Button
+          variant="alert"
+          isLoading={isDeleting}
+          disabled={isDeleting}
+          onClick={onClickConfirm}
+        >
+          Turn off
+        </Button>
+        <Button variant="inverse-alert" disabled={isDeleting} onClick={onExit}>
+          Cancel
+        </Button>
+      </div>
     </Modal>
   );
 };
diff --git a/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/AppleBusinessManagerPage/components/AddAbmModal/AddAbmModal.tsx b/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/AppleBusinessManagerPage/components/AddAbmModal/AddAbmModal.tsx
index fd62e7eb6c..d3f3d99786 100644
--- a/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/AppleBusinessManagerPage/components/AddAbmModal/AddAbmModal.tsx
+++ b/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/AppleBusinessManagerPage/components/AddAbmModal/AddAbmModal.tsx
@@ -57,96 +57,94 @@ const AddAbmModal = ({ onCancel, onAdded }: IAddAbmModalProps) => {
       onExit={onCancel}
       width="large"
     >
-      <>
-        <ol className={`${baseClass}__setup-list`}>
-          <li>
-            <span>1.</span>
-            <p>
-              Download your public key. <DownloadABMKey baseClass={baseClass} />
-            </p>
-          </li>
-          <li>
-            <span>2.</span>
+      <ol className={`${baseClass}__setup-list`}>
+        <li>
+          <span>1.</span>
+          <p>
+            Download your public key. <DownloadABMKey baseClass={baseClass} />
+          </p>
+        </li>
+        <li>
+          <span>2.</span>
+          <span>
             <span>
-              <span>
-                Sign in to{" "}
-                <CustomLink
-                  newTab
-                  text="Apple Business Manager"
-                  url="https://business.apple.com"
-                />
-                <br />
-                If your organization doesn&apos;t have an account, select{" "}
-                <b>Enroll now</b>.
-              </span>
+              Sign in to{" "}
+              <CustomLink
+                newTab
+                text="Apple Business Manager"
+                url="https://business.apple.com"
+              />
+              <br />
+              If your organization doesn&apos;t have an account, select{" "}
+              <b>Enroll now</b>.
             </span>
-          </li>
-          <li>
-            <span>3.</span>
-            <span>
-              Select your <b>account name</b> at the bottom left of the screen,
-              then select <b>Preferences</b>.
-            </span>
-          </li>
-          <li>
-            <span>4.</span>
-            <span>
-              In the <b>Your MDM Servers</b> section, select <b>Add</b>.
-            </span>
-          </li>
-          <li>
-            <span>5.</span>
-            <span>Enter a name for the server such as “Fleet”.</span>
-          </li>
-          <li>
-            <span>6.</span>
-            <span>
-              Under <b>MDM Server Settings</b>, upload the public key downloaded
-              in the first step and select <b>Save</b>.
-            </span>
-          </li>
-          <li>
-            <span>7.</span>
-            <span>
-              In the <b>Default Device Assignment</b> section, select{" "}
-              <b>Change</b>, then assign the newly created server as the default
-              for your Macs, iPhones, and iPads. Then select <b>Done</b>.
-            </span>
-          </li>
-          <li>
-            <span>8.</span>
-            <span>
-              Select newly created server in the sidebar, then select{" "}
-              <b>Download MDM Server Token</b> on the top.
-            </span>
-          </li>
-          <li>
-            <span>9.</span>
-            <span>Upload the downloaded token (.p7m file).</span>
-          </li>
-        </ol>
-        <FileUploader
-          className={`${baseClass}__file-uploader ${
-            isUploading ? `${baseClass}__file-uploader--loading` : ""
-          }`}
-          accept=".p7m"
-          message="ABM token (.p7m)"
-          graphicName="file-p7m"
-          buttonType="brand-inverse-icon"
-          buttonMessage={isUploading ? "Uploading..." : "Upload"}
-          fileDetails={tokenFile ? { name: tokenFile.name } : undefined}
-          onFileUpload={onSelectFile}
-        />
-        <div className="modal-cta-wrap">
-          <Button
-            onClick={uploadAbmToken}
-            isLoading={isUploading}
-            disabled={!tokenFile || isUploading}
-          >
-            Add ABM
-          </Button>
-        </div>
-      </>
+          </span>
+        </li>
+        <li>
+          <span>3.</span>
+          <span>
+            Select your <b>account name</b> at the bottom left of the screen,
+            then select <b>Preferences</b>.
+          </span>
+        </li>
+        <li>
+          <span>4.</span>
+          <span>
+            In the <b>Your MDM Servers</b> section, select <b>Add</b>.
+          </span>
+        </li>
+        <li>
+          <span>5.</span>
+          <span>Enter a name for the server such as &quot;Fleet&quot;.</span>
+        </li>
+        <li>
+          <span>6.</span>
+          <span>
+            Under <b>MDM Server Settings</b>, upload the public key downloaded
+            in the first step and select <b>Save</b>.
+          </span>
+        </li>
+        <li>
+          <span>7.</span>
+          <span>
+            In the <b>Default Device Assignment</b> section, select{" "}
+            <b>Change</b>, then assign the newly created server as the default
+            for your Macs, iPhones, and iPads. Then select <b>Done</b>.
+          </span>
+        </li>
+        <li>
+          <span>8.</span>
+          <span>
+            Select newly created server in the sidebar, then select{" "}
+            <b>Download MDM Server Token</b> on the top.
+          </span>
+        </li>
+        <li>
+          <span>9.</span>
+          <span>Upload the downloaded token (.p7m file).</span>
+        </li>
+      </ol>
+      <FileUploader
+        className={`${baseClass}__file-uploader ${
+          isUploading ? `${baseClass}__file-uploader--loading` : ""
+        }`}
+        accept=".p7m"
+        message="ABM token (.p7m)"
+        graphicName="file-p7m"
+        buttonType="brand-inverse-icon"
+        buttonMessage={isUploading ? "Uploading..." : "Upload"}
+        fileDetails={tokenFile ? { name: tokenFile.name } : undefined}
+        onFileUpload={onSelectFile}
+      />
+      <div className="modal-cta-wrap">
+        <Button
+          onClick={uploadAbmToken}
+          isLoading={isUploading}
+          disabled={!tokenFile || isUploading}
+        >
+          Add ABM
+        </Button>
+      </div>
     </Modal>
   );
 };
diff --git a/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/AppleBusinessManagerPage/components/DeleteAbmModal/DeleteAbmModal.tsx b/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/AppleBusinessManagerPage/components/DeleteAbmModal/DeleteAbmModal.tsx
index 7efec7377c..4ed4be1db2 100644
--- a/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/AppleBusinessManagerPage/components/DeleteAbmModal/DeleteAbmModal.tsx
+++ b/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/AppleBusinessManagerPage/components/DeleteAbmModal/DeleteAbmModal.tsx
@@ -49,35 +49,33 @@ const DeleteAbmModal = ({
       onExit={onCancel}
       isContentDisabled={isDeleting}
     >
-      <>
-        <p>
-          New hosts purchased in the <b>{tokenOrgName}</b> won&apos;t
-          automatically enroll to Fleet.{" "}
-        </p>
-        <p>
-          If you want to re-enable automatic enrollment, you&apos;ll have to
-          upload a new ABM token.
-        </p>
+      <p>
+        New hosts purchased in the <b>{tokenOrgName}</b> won&apos;t
+        automatically enroll to Fleet.{" "}
+      </p>
+      <p>
+        If you want to re-enable automatic enrollment, you&apos;ll have to
+        upload a new ABM token.
+      </p>
 
-        <div className="modal-cta-wrap">
-          <Button
-            type="button"
-            variant="alert"
-            onClick={onDeleteToken}
-            disabled={isDeleting}
-            isLoading={isDeleting}
-          >
-            Delete
-          </Button>
-          <Button
-            onClick={onCancel}
-            disabled={isDeleting}
-            variant="inverse-alert"
-          >
-            Cancel
-          </Button>
-        </div>
-      </>
+      <div className="modal-cta-wrap">
+        <Button
+          type="button"
+          variant="alert"
+          onClick={onDeleteToken}
+          disabled={isDeleting}
+          isLoading={isDeleting}
+        >
+          Delete
+        </Button>
+        <Button
+          onClick={onCancel}
+          disabled={isDeleting}
+          variant="inverse-alert"
+        >
+          Cancel
+        </Button>
+      </div>
     </Modal>
   );
 };
diff --git a/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/AppleBusinessManagerPage/components/EditTeamsAbmModal/EditTeamsAbmModal.tsx b/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/AppleBusinessManagerPage/components/EditTeamsAbmModal/EditTeamsAbmModal.tsx
index a5662b0249..8910cb31c6 100644
--- a/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/AppleBusinessManagerPage/components/EditTeamsAbmModal/EditTeamsAbmModal.tsx
+++ b/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/AppleBusinessManagerPage/components/EditTeamsAbmModal/EditTeamsAbmModal.tsx
@@ -132,70 +132,68 @@ const EditTeamsAbmModal = ({
       width="large"
       isContentDisabled={isSaving}
     >
-      <>
-        <p>
-          Edit fleets for <b>{token.org_name}</b>.
-        </p>
-        <form onSubmit={onSave} className={baseClass} autoComplete="off">
-          <Dropdown
-            searchable={false}
-            options={options}
-            onChange={(value: string) => {
-              setSelectedTeamNames((prev) => ({ ...prev, macos_team: value }));
-            }}
-            value={selectedTeamNames.macos_team}
-            label="macOS fleet"
-            wrapperClassName={`${baseClass}__form-field form-field--macos`}
-            tooltip={
-              <>
-                macOS hosts are automatically added to this fleet in Fleet when
-                they appear in Apple Business Manager.
-              </>
-            }
-          />
-          <Dropdown
-            searchable={false}
-            options={options}
-            onChange={(value: string) => {
-              setSelectedTeamNames((prev) => ({ ...prev, ios_team: value }));
-            }}
-            value={selectedTeamNames.ios_team}
-            label="iOS fleet"
-            wrapperClassName={`${baseClass}__form-field form-field--ios`}
-            tooltip={
-              <>
-                iOS hosts are automatically added to this fleet in Fleet when
-                they appear in Apple Business Manager.
-              </>
-            }
-          />
-          <Dropdown
-            searchable={false}
-            options={options}
-            onChange={(value: string) =>
-              setSelectedTeamNames((prev) => ({ ...prev, ipados_team: value }))
-            }
-            value={selectedTeamNames.ipados_team}
-            label="iPadOS fleet"
-            wrapperClassName={`${baseClass}__form-field form-field--ipados`}
-            tooltip={
-              <>
-                iPadOS hosts are automatically added to this fleet in Fleet when
-                they appear in Apple Business Manager.
-              </>
-            }
-          />
-          <div className="modal-cta-wrap">
-            <Button
-              type="submit"
-              className="save-abm-teams-loading"
-              isLoading={isSaving}
-            >
-              Save
-            </Button>
-          </div>
-        </form>
-      </>
+      <p>
+        Edit fleets for <b>{token.org_name}</b>.
+      </p>
+      <form onSubmit={onSave} className={baseClass} autoComplete="off">
+        <Dropdown
+          searchable={false}
+          options={options}
+          onChange={(value: string) => {
+            setSelectedTeamNames((prev) => ({ ...prev, macos_team: value }));
+          }}
+          value={selectedTeamNames.macos_team}
+          label="macOS fleet"
+          wrapperClassName={`${baseClass}__form-field form-field--macos`}
+          tooltip={
+            <>
+              macOS hosts are automatically added to this fleet in Fleet when
+              they appear in Apple Business Manager.
+            </>
+          }
+        />
+        <Dropdown
+          searchable={false}
+          options={options}
+          onChange={(value: string) => {
+            setSelectedTeamNames((prev) => ({ ...prev, ios_team: value }));
+          }}
+          value={selectedTeamNames.ios_team}
+          label="iOS fleet"
+          wrapperClassName={`${baseClass}__form-field form-field--ios`}
+          tooltip={
+            <>
+              iOS hosts are automatically added to this fleet in Fleet when they
+              appear in Apple Business Manager.
+            </>
+          }
+        />
+        <Dropdown
+          searchable={false}
+          options={options}
+          onChange={(value: string) =>
+            setSelectedTeamNames((prev) => ({ ...prev, ipados_team: value }))
+          }
+          value={selectedTeamNames.ipados_team}
+          label="iPadOS fleet"
+          wrapperClassName={`${baseClass}__form-field form-field--ipados`}
+          tooltip={
+            <>
+              iPadOS hosts are automatically added to this fleet in Fleet when
+              they appear in Apple Business Manager.
+            </>
+          }
+        />
+        <div className="modal-cta-wrap">
+          <Button
+            type="submit"
+            className="save-abm-teams-loading"
+            isLoading={isSaving}
+          >
+            Save
+          </Button>
+        </div>
+      </form>
     </Modal>
   );
 };
diff --git a/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/VppPage/components/AddVppModal/AddVppModal.tsx b/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/VppPage/components/AddVppModal/AddVppModal.tsx
index 7bd1e70deb..a86cc78ee2 100644
--- a/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/VppPage/components/AddVppModal/AddVppModal.tsx
+++ b/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/VppPage/components/AddVppModal/AddVppModal.tsx
@@ -57,30 +57,28 @@ const AddVppModal = ({ onCancel, onAdded }: IAddVppModalProps) => {
       onExit={onCancel}
       width="large"
     >
-      <>
-        <VppSetupSteps extendendSteps />
-        <FileUploader
-          className={`${baseClass}__file-uploader ${
-            isUploading ? `${baseClass}__file-uploader--loading` : ""
-          }`}
-          accept=".vpptoken"
-          message="Content token (.vpptoken)"
-          graphicName="file-vpp"
-          buttonType="brand-inverse-icon"
-          buttonMessage={isUploading ? "Uploading..." : "Upload"}
-          fileDetails={tokenFile ? { name: tokenFile.name } : undefined}
-          onFileUpload={onSelectFile}
-        />
-        <div className="modal-cta-wrap">
-          <Button
-            onClick={uploadVppToken}
-            isLoading={isUploading}
-            disabled={!tokenFile || isUploading}
-          >
-            Add VPP
-          </Button>
-        </div>
-      </>
+      <VppSetupSteps extendendSteps />
+      <FileUploader
+        className={`${baseClass}__file-uploader ${
+          isUploading ? `${baseClass}__file-uploader--loading` : ""
+        }`}
+        accept=".vpptoken"
+        message="Content token (.vpptoken)"
+        graphicName="file-vpp"
+        buttonType="brand-inverse-icon"
+        buttonMessage={isUploading ? "Uploading..." : "Upload"}
+        fileDetails={tokenFile ? { name: tokenFile.name } : undefined}
+        onFileUpload={onSelectFile}
+      />
+      <div className="modal-cta-wrap">
+        <Button
+          onClick={uploadVppToken}
+          isLoading={isUploading}
+          disabled={!tokenFile || isUploading}
+        >
+          Add VPP
+        </Button>
+      </div>
     </Modal>
   );
 };
diff --git a/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/VppPage/components/DeleteVppModal/DeleteVppModal.tsx b/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/VppPage/components/DeleteVppModal/DeleteVppModal.tsx
index 7c2700d11c..f2e07a676a 100644
--- a/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/VppPage/components/DeleteVppModal/DeleteVppModal.tsx
+++ b/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/VppPage/components/DeleteVppModal/DeleteVppModal.tsx
@@ -46,36 +46,34 @@ const DeleteVppModal = ({
       onExit={onCancel}
       isContentDisabled={isDeleting}
     >
-      <>
-        <p>
-          Apps purchased for the <b>{orgName}</b> location won&apos;t appear in
-          Fleet, and policies that trigger automatic install of these apps will
-          be deleted. Apps won&apos;t be uninstalled from hosts.
-        </p>
-        <p>
-          If you want to enable VPP integration again, you&apos;ll have to
-          upload a new token.
-        </p>
+      <p>
+        Apps purchased for the <b>{orgName}</b> location won&apos;t appear in
+        Fleet, and policies that trigger automatic install of these apps will be
+        deleted. Apps won&apos;t be uninstalled from hosts.
+      </p>
+      <p>
+        If you want to enable VPP integration again, you&apos;ll have to upload
+        a new token.
+      </p>
 
-        <div className="modal-cta-wrap">
-          <Button
-            type="button"
-            variant="alert"
-            onClick={onDeleteToken}
-            disabled={isDeleting}
-            isLoading={isDeleting}
-          >
-            Delete
-          </Button>
-          <Button
-            onClick={onCancel}
-            disabled={isDeleting}
-            variant="inverse-alert"
-          >
-            Cancel
-          </Button>
-        </div>
-      </>
+      <div className="modal-cta-wrap">
+        <Button
+          type="button"
+          variant="alert"
+          onClick={onDeleteToken}
+          disabled={isDeleting}
+          isLoading={isDeleting}
+        >
+          Delete
+        </Button>
+        <Button
+          onClick={onCancel}
+          disabled={isDeleting}
+          variant="inverse-alert"
+        >
+          Cancel
+        </Button>
+      </div>
     </Modal>
   );
 };
diff --git a/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/VppPage/components/EditTeamsVppModal/EditTeamsVppModal.tsx b/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/VppPage/components/EditTeamsVppModal/EditTeamsVppModal.tsx
index a11e123401..d17f2e631d 100644
--- a/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/VppPage/components/EditTeamsVppModal/EditTeamsVppModal.tsx
+++ b/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/VppPage/components/EditTeamsVppModal/EditTeamsVppModal.tsx
@@ -246,63 +246,61 @@ const EditTeamsVppModal = ({
       width="large"
       isContentDisabled={isSaving}
     >
-      <>
-        <p>
-          Edit fleets for <b>{currentToken.org_name}</b>.
-        </p>
-        <p>
-          If you delete a fleet, App Store apps will be deleted from that fleet.
-          Installed apps won&apos;t be uninstalled from hosts.
-        </p>
-        <form onSubmit={onSave} className={baseClass} autoComplete="off">
-          <TooltipWrapper
-            position="top"
-            underline={false}
-            showArrow
-            tipContent={
-              <div className={`${baseClass}__tooltip--all-teams`}>
-                You can&apos;t choose fleets because you already have a VPP
-                token assigned to all fleets. First, edit fleets for that VPP
-                token to choose fleets here.
-              </div>
+      <p>
+        Edit fleets for <b>{currentToken.org_name}</b>.
+      </p>
+      <p>
+        If you delete a fleet, App Store apps will be deleted from that fleet.
+        Installed apps won&apos;t be uninstalled from hosts.
+      </p>
+      <form onSubmit={onSave} className={baseClass} autoComplete="off">
+        <TooltipWrapper
+          position="top"
+          underline={false}
+          showArrow
+          tipContent={
+            <div className={`${baseClass}__tooltip--all-teams`}>
+              You can&apos;t choose fleets because you already have a VPP token
+              assigned to all fleets. First, edit fleets for that VPP token to
+              choose fleets here.
+            </div>
+          }
+          disableTooltip={!isDropdownDisabled}
+        >
+          <Dropdown
+            options={options}
+            multi
+            onChange={onChange}
+            placeholder="Search fleets"
+            value={selectedValue}
+            label="Fleets"
+            className={`${baseClass}__vpp-dropdown`}
+            wrapperClassName={`${baseClass}__form-field--vpp-teams ${
+              isDropdownDisabled ? `${baseClass}__form-field--disabled` : ""
+            }`}
+            tooltip={
+              isDropdownDisabled ? undefined : (
+                <>
+                  Each fleet can have only one VPP token. Fleets that already
+                  have a VPP token won&apos;t show up here.
+                </>
+              )
             }
-            disableTooltip={!isDropdownDisabled}
+            helpText="App Store apps in this VPP token's Apple Business Manager (ABM) will only be available to install on hosts in these fleets."
+            disabled={isDropdownDisabled}
+          />
+        </TooltipWrapper>
+        <div className="modal-cta-wrap">
+          <Button
+            type="submit"
+            className="save-vpp-teams-loading"
+            isLoading={isSaving}
+            disabled={isDropdownDisabled}
           >
-            <Dropdown
-              options={options}
-              multi
-              onChange={onChange}
-              placeholder="Search fleets"
-              value={selectedValue}
-              label="Fleets"
-              className={`${baseClass}__vpp-dropdown`}
-              wrapperClassName={`${baseClass}__form-field--vpp-teams ${
-                isDropdownDisabled ? `${baseClass}__form-field--disabled` : ""
-              }`}
-              tooltip={
-                isDropdownDisabled ? undefined : (
-                  <>
-                    Each fleet can have only one VPP token. Fleets that already
-                    have a VPP token won&apos;t show up here.
-                  </>
-                )
-              }
-              helpText="App Store apps in this VPP token's Apple Business Manager (ABM) will only be available to install on hosts in these fleets."
-              disabled={isDropdownDisabled}
-            />
-          </TooltipWrapper>
-          <div className="modal-cta-wrap">
-            <Button
-              type="submit"
-              className="save-vpp-teams-loading"
-              isLoading={isSaving}
-              disabled={isDropdownDisabled}
-            >
-              Save
-            </Button>
-          </div>
-        </form>
-      </>
+            Save
+          </Button>
+        </div>
+      </form>
     </Modal>
   );
 };
diff --git a/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/VppPage/components/RenewVppModal/RenewVppModal.tsx b/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/VppPage/components/RenewVppModal/RenewVppModal.tsx
index 477d9c1863..bed9ba1fef 100644
--- a/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/VppPage/components/RenewVppModal/RenewVppModal.tsx
+++ b/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/VppPage/components/RenewVppModal/RenewVppModal.tsx
@@ -67,31 +67,29 @@ const RenewVppModal = ({
       isContentDisabled={isRenewing}
       width="large"
     >
-      <>
-        <p className={`${baseClass}__description`}>
-          Renew Volume Purchasing Program for <b>{orgName}</b> location.
-        </p>
-        <VppSetupSteps />
-        <FileUploader
-          className={`${baseClass}__file-uploader`}
-          accept=".vpptoken"
-          message="Content token (.vpptoken)"
-          graphicName="file-vpp"
-          buttonType="brand-inverse-icon"
-          buttonMessage="Upload"
-          fileDetails={tokenFile ? { name: tokenFile.name } : undefined}
-          onFileUpload={onSelectFile}
-        />
-        <div className="modal-cta-wrap">
-          <Button
-            onClick={onRenewToken}
-            isLoading={isRenewing}
-            disabled={!tokenFile}
-          >
-            Renew token
-          </Button>
-        </div>
-      </>
+      <p className={`${baseClass}__description`}>
+        Renew Volume Purchasing Program for <b>{orgName}</b> location.
+      </p>
+      <VppSetupSteps />
+      <FileUploader
+        className={`${baseClass}__file-uploader`}
+        accept=".vpptoken"
+        message="Content token (.vpptoken)"
+        graphicName="file-vpp"
+        buttonType="brand-inverse-icon"
+        buttonMessage="Upload"
+        fileDetails={tokenFile ? { name: tokenFile.name } : undefined}
+        onFileUpload={onSelectFile}
+      />
+      <div className="modal-cta-wrap">
+        <Button
+          onClick={onRenewToken}
+          isLoading={isRenewing}
+          disabled={!tokenFile}
+        >
+          Renew token
+        </Button>
+      </div>
     </Modal>
   );
 };
diff --git a/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/components/AddEntraTenantModal/AddEntraTenantModal.tsx b/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/components/AddEntraTenantModal/AddEntraTenantModal.tsx
index 3de2f36237..3520b67b94 100644
--- a/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/components/AddEntraTenantModal/AddEntraTenantModal.tsx
+++ b/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/components/AddEntraTenantModal/AddEntraTenantModal.tsx
@@ -88,40 +88,38 @@ const AddEntraTenantModal = ({ onExit }: IAddEntraTenantModalProps) => {
       onExit={onExit}
       isContentDisabled={isAdding}
     >
-      <>
-        <div>
-          <InputField
-            label="Tenant ID"
-            name="tenant id"
-            placeholder="6d8769e6-0f8b-418d-b385-1a53968781c9"
-            value={formData.tenantId}
-            onChange={onChangeTenantID}
-            error={formValidation.tenantId?.message}
-            helpText={
-              <>
-                Find your <b>Tenant ID</b>, on{" "}
-                <CustomLink
-                  text="Microsoft Entra ID > Home"
-                  url="https://fleetdm.com/learn-more-about/microsoft-entra-tenant-id"
-                  newTab
-                />
-              </>
-            }
-          />
-        </div>
-        <div className="modal-cta-wrap">
-          <Button
-            onClick={onAddTenant}
-            disabled={!formValidation.isValid}
-            isLoading={isAdding}
-          >
-            Add
-          </Button>
-          <Button onClick={onExit} variant="inverse">
-            Cancel
-          </Button>
-        </div>
-      </>
+      <div>
+        <InputField
+          label="Tenant ID"
+          name="tenant id"
+          placeholder="6d8769e6-0f8b-418d-b385-1a53968781c9"
+          value={formData.tenantId}
+          onChange={onChangeTenantID}
+          error={formValidation.tenantId?.message}
+          helpText={
+            <>
+              Find your <b>Tenant ID</b>, on{" "}
+              <CustomLink
+                text="Microsoft Entra ID > Home"
+                url="https://fleetdm.com/learn-more-about/microsoft-entra-tenant-id"
+                newTab
+              />
+            </>
+          }
+        />
+      </div>
+      <div className="modal-cta-wrap">
+        <Button
+          onClick={onAddTenant}
+          disabled={!formValidation.isValid}
+          isLoading={isAdding}
+        >
+          Add
+        </Button>
+        <Button onClick={onExit} variant="inverse">
+          Cancel
+        </Button>
+      </div>
     </Modal>
   );
 };
diff --git a/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/components/DeleteEntraTenantModal/DeleteEntraTenantModal.tsx b/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/components/DeleteEntraTenantModal/DeleteEntraTenantModal.tsx
index 1e6f28b116..12289d9501 100644
--- a/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/components/DeleteEntraTenantModal/DeleteEntraTenantModal.tsx
+++ b/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/components/DeleteEntraTenantModal/DeleteEntraTenantModal.tsx
@@ -52,25 +52,19 @@ const DeleteEntraTenantModal = ({
       width="medium"
       isContentDisabled={isDeleting}
     >
-      <>
-        <p>
-          This will stop both automatic (Autopilot) and manual enrollment by end
-          users (<b>Settings &gt; Accounts &gt; Access work or school</b> on
-          Windows) from this tenant.
-        </p>
-        <div className="modal-cta-wrap">
-          <Button
-            onClick={onDeleteToken}
-            variant="alert"
-            isLoading={isDeleting}
-          >
-            Delete
-          </Button>
-          <Button onClick={onExit} variant="inverse">
-            Cancel
-          </Button>
-        </div>
-      </>
+      <p>
+        This will stop both automatic (Autopilot) and manual enrollment by end
+        users (<b>Settings &gt; Accounts &gt; Access work or school</b> on
+        Windows) from this tenant.
+      </p>
+      <div className="modal-cta-wrap">
+        <Button onClick={onDeleteToken} variant="alert" isLoading={isDeleting}>
+          Delete
+        </Button>
+        <Button onClick={onExit} variant="inverse">
+          Cancel
+        </Button>
+      </div>
     </Modal>
   );
 };
diff --git a/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/components/ExampleWebhookUrlPayloadModal/ExampleWebhookUrlPayloadModal.tsx b/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/components/ExampleWebhookUrlPayloadModal/ExampleWebhookUrlPayloadModal.tsx
index ff39a6d667..bcf8fb5768 100644
--- a/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/components/ExampleWebhookUrlPayloadModal/ExampleWebhookUrlPayloadModal.tsx
+++ b/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/components/ExampleWebhookUrlPayloadModal/ExampleWebhookUrlPayloadModal.tsx
@@ -24,26 +24,24 @@ const ExampleWebhookUrlPayloadModal = ({
 }: IExampleWebhookUrlPayloadModalProps) => {
   return (
     <Modal title="Example payload" onExit={onCancel} className={baseClass}>
-      <>
-        <p>
-          An example request sent to your configured <b>Webhook URL</b>.
-        </p>
-        <pre className={`${baseClass}__endpoint-preview`}>
-          POST https://organization.com/send-request-here
-        </pre>
-        <div className={`${baseClass}__webhook-preview`}>
-          <pre
-            // purposely ignore dangerouslySetInnerHTML for this example payload
-            // eslint-disable-next-line react/no-danger
-            dangerouslySetInnerHTML={{
-              __html: syntaxHighlight(EXAMPLE_PAYLOAD),
-            }}
-          />
-        </div>
-        <div className="modal-cta-wrap">
-          <Button onClick={onCancel}>Done</Button>
-        </div>
-      </>
+      <p>
+        An example request sent to your configured <b>Webhook URL</b>.
+      </p>
+      <pre className={`${baseClass}__endpoint-preview`}>
+        POST https://organization.com/send-request-here
+      </pre>
+      <div className={`${baseClass}__webhook-preview`}>
+        <pre
+          // purposely ignore dangerouslySetInnerHTML for this example payload
+          // eslint-disable-next-line react/no-danger
+          dangerouslySetInnerHTML={{
+            __html: syntaxHighlight(EXAMPLE_PAYLOAD),
+          }}
+        />
+      </div>
+      <div className="modal-cta-wrap">
+        <Button onClick={onCancel}>Done</Button>
+      </div>
     </Modal>
   );
 };
diff --git a/frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/UsersPage/components/RemoveUserModal/RemoveUserModal.tsx b/frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/UsersPage/components/RemoveUserModal/RemoveUserModal.tsx
index fb4f8b0d46..62fd798050 100644
--- a/frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/UsersPage/components/RemoveUserModal/RemoveUserModal.tsx
+++ b/frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/UsersPage/components/RemoveUserModal/RemoveUserModal.tsx
@@ -27,31 +27,28 @@ const RemoveUserModal = ({
       onEnter={onSubmit}
       className={baseClass}
     >
-      <>
-        <p>
-          You are about to remove{" "}
-          <span className={`${baseClass}__name`}>{userName}</span> from{" "}
-          <span className={`${baseClass}__team-name`}>{teamName}</span>.
-        </p>
-        <p>
-          If {userName} is not assigned to any other fleet, they will lose
-          access.
-        </p>
-        <div className="modal-cta-wrap">
-          <Button
-            type="button"
-            variant="alert"
-            onClick={onSubmit}
-            className="remove-loading"
-            isLoading={isUpdatingUsers}
-          >
-            Remove
-          </Button>
-          <Button onClick={onCancel} variant="inverse-alert">
-            Cancel
-          </Button>
-        </div>
-      </>
+      <p>
+        You are about to remove{" "}
+        <span className={`${baseClass}__name`}>{userName}</span> from{" "}
+        <span className={`${baseClass}__team-name`}>{teamName}</span>.
+      </p>
+      <p>
+        If {userName} is not assigned to any other fleet, they will lose access.
+      </p>
+      <div className="modal-cta-wrap">
+        <Button
+          type="button"
+          variant="alert"
+          onClick={onSubmit}
+          className="remove-loading"
+          isLoading={isUpdatingUsers}
+        >
+          Remove
+        </Button>
+        <Button onClick={onCancel} variant="inverse-alert">
+          Cancel
+        </Button>
+      </div>
     </Modal>
   );
 };
diff --git a/frontend/pages/admin/TeamManagementPage/components/DeleteTeamModal/DeleteTeamModal.tsx b/frontend/pages/admin/TeamManagementPage/components/DeleteTeamModal/DeleteTeamModal.tsx
index 69ecdc4310..ecc9a199a7 100644
--- a/frontend/pages/admin/TeamManagementPage/components/DeleteTeamModal/DeleteTeamModal.tsx
+++ b/frontend/pages/admin/TeamManagementPage/components/DeleteTeamModal/DeleteTeamModal.tsx
@@ -25,30 +25,28 @@ const DeleteTeamModal = ({
       onEnter={onSubmit}
       className={baseClass}
     >
-      <>
-        <p>
-          This will delete the{" "}
-          <span className={`${baseClass}__name`}>{name}</span> fleet.
-        </p>
-        <p>
-          Users on this fleet who are not assigned to other fleets won&apos;t be
-          able to log in.
-        </p>
-        <div className="modal-cta-wrap">
-          <Button
-            type="button"
-            onClick={onSubmit}
-            variant="alert"
-            className="delete-loading"
-            isLoading={isUpdatingTeams}
-          >
-            Delete
-          </Button>
-          <Button onClick={onCancel} variant="inverse-alert">
-            Cancel
-          </Button>
-        </div>
-      </>
+      <p>
+        This will delete the{" "}
+        <span className={`${baseClass}__name`}>{name}</span> fleet.
+      </p>
+      <p>
+        Users on this fleet who are not assigned to other fleets won&apos;t be
+        able to log in.
+      </p>
+      <div className="modal-cta-wrap">
+        <Button
+          type="button"
+          onClick={onSubmit}
+          variant="alert"
+          className="delete-loading"
+          isLoading={isUpdatingTeams}
+        >
+          Delete
+        </Button>
+        <Button onClick={onCancel} variant="inverse-alert">
+          Cancel
+        </Button>
+      </div>
     </Modal>
   );
 };
diff --git a/frontend/pages/admin/components/HostStatusWebhookPreviewModal/HostStatusWebhookPreviewModal.tsx b/frontend/pages/admin/components/HostStatusWebhookPreviewModal/HostStatusWebhookPreviewModal.tsx
index f46dfaf4ae..c060e37721 100644
--- a/frontend/pages/admin/components/HostStatusWebhookPreviewModal/HostStatusWebhookPreviewModal.tsx
+++ b/frontend/pages/admin/components/HostStatusWebhookPreviewModal/HostStatusWebhookPreviewModal.tsx
@@ -42,23 +42,21 @@ const HostStatusWebhookPreviewModal = ({
       onEnter={toggleModal}
       className={baseClass}
     >
-      <>
-        <p>
-          An example request sent to your configured <b>Destination URL</b>.
-        </p>
-        <div className={baseClass}>
-          <pre
-            dangerouslySetInnerHTML={{
-              __html: syntaxHighlight(getHostStatusPreview(isTeamScope)),
-            }}
-          />
-        </div>
-        <div className="modal-cta-wrap">
-          <Button type="button" onClick={toggleModal}>
-            Done
-          </Button>
-        </div>
-      </>
+      <p>
+        An example request sent to your configured <b>Destination URL</b>.
+      </p>
+      <div className={baseClass}>
+        <pre
+          dangerouslySetInnerHTML={{
+            __html: syntaxHighlight(getHostStatusPreview(isTeamScope)),
+          }}
+        />
+      </div>
+      <div className="modal-cta-wrap">
+        <Button type="button" onClick={toggleModal}>
+          Done
+        </Button>
+      </div>
     </Modal>
   );
 };
diff --git a/frontend/pages/hosts/ManageHostsPage/components/DeleteLabelModal/DeleteLabelModal.tsx b/frontend/pages/hosts/ManageHostsPage/components/DeleteLabelModal/DeleteLabelModal.tsx
index 5e6b8751f4..a340127b91 100644
--- a/frontend/pages/hosts/ManageHostsPage/components/DeleteLabelModal/DeleteLabelModal.tsx
+++ b/frontend/pages/hosts/ManageHostsPage/components/DeleteLabelModal/DeleteLabelModal.tsx
@@ -26,34 +26,32 @@ const DeleteLabelModal = ({
       onEnter={onSubmit}
       className={baseClass}
     >
-      <>
-        <p>Are you sure you wish to delete this label?</p>
-        {isPremiumTier && (
-          <ul>
-            <li>
-              Configuration profiles that target this label will not be applied
-              to new hosts.
-            </li>
-            <li>
-              Reports and policies that target this label will continue to run,
-              but may target different hosts.
-            </li>
-          </ul>
-        )}
-        <div className="modal-cta-wrap">
-          <Button
-            onClick={onSubmit}
-            variant="alert"
-            className="delete-loading"
-            isLoading={isUpdatingLabel}
-          >
-            Delete
-          </Button>
-          <Button onClick={onCancel} variant="inverse-alert">
-            Cancel
-          </Button>
-        </div>
-      </>
+      <p>Are you sure you wish to delete this label?</p>
+      {isPremiumTier && (
+        <ul>
+          <li>
+            Configuration profiles that target this label will not be applied to
+            new hosts.
+          </li>
+          <li>
+            Reports and policies that target this label will continue to run,
+            but may target different hosts.
+          </li>
+        </ul>
+      )}
+      <div className="modal-cta-wrap">
+        <Button
+          onClick={onSubmit}
+          variant="alert"
+          className="delete-loading"
+          isLoading={isUpdatingLabel}
+        >
+          Delete
+        </Button>
+        <Button onClick={onCancel} variant="inverse-alert">
+          Cancel
+        </Button>
+      </div>
     </Modal>
   );
 };
diff --git a/frontend/pages/hosts/ManageHostsPage/components/RunScriptBatchModal/RunScriptBatchModal.tsx b/frontend/pages/hosts/ManageHostsPage/components/RunScriptBatchModal/RunScriptBatchModal.tsx
index 7517816388..47cfcc48e5 100644
--- a/frontend/pages/hosts/ManageHostsPage/components/RunScriptBatchModal/RunScriptBatchModal.tsx
+++ b/frontend/pages/hosts/ManageHostsPage/components/RunScriptBatchModal/RunScriptBatchModal.tsx
@@ -336,44 +336,42 @@ const RunScriptBatchModal = ({
         className={classes}
         disableClosingModal={isUpdating}
       >
-        <>
-          {renderModalContent()}
-          {!selectedScript && !scriptForDetails && (
-            <div className="modal-cta-wrap">
-              <Button disabled={isUpdating} onClick={onCancel}>
-                Done
-              </Button>
-            </div>
-          )}
-          {selectedScript && (
-            <div className="modal-cta-wrap">
-              <TooltipWrapper
-                tipContent="Enter a date and time to schedule this script."
-                underline={false}
-                position="top"
-                disableTooltip={formValidation.isValid}
-                showArrow
-              >
-                <Button
-                  disabled={isUpdating || !formValidation.isValid}
-                  onClick={() => onRunScriptBatch(selectedScript)}
-                  isLoading={isUpdating}
-                >
-                  Run
-                </Button>
-              </TooltipWrapper>
+        {renderModalContent()}
+        {!selectedScript && !scriptForDetails && (
+          <div className="modal-cta-wrap">
+            <Button disabled={isUpdating} onClick={onCancel}>
+              Done
+            </Button>
+          </div>
+        )}
+        {selectedScript && (
+          <div className="modal-cta-wrap">
+            <TooltipWrapper
+              tipContent="Enter a date and time to schedule this script."
+              underline={false}
+              position="top"
+              disableTooltip={formValidation.isValid}
+              showArrow
+            >
               <Button
-                disabled={isUpdating}
-                variant="inverse"
-                onClick={() => {
-                  setSelectedScript(undefined);
-                }}
+                disabled={isUpdating || !formValidation.isValid}
+                onClick={() => onRunScriptBatch(selectedScript)}
+                isLoading={isUpdating}
               >
-                Cancel
+                Run
               </Button>
-            </div>
-          )}
-        </>
+            </TooltipWrapper>
+            <Button
+              disabled={isUpdating}
+              variant="inverse"
+              onClick={() => {
+                setSelectedScript(undefined);
+              }}
+            >
+              Cancel
+            </Button>
+          </div>
+        )}
       </Modal>
       {!!scriptForDetails && !selectedScript && (
         <ScriptDetailsModal
diff --git a/frontend/pages/hosts/components/CommandDetailsModal/CommandDetailsModal.tsx b/frontend/pages/hosts/components/CommandDetailsModal/CommandDetailsModal.tsx
index 550106e4a7..95124c5ebc 100644
--- a/frontend/pages/hosts/components/CommandDetailsModal/CommandDetailsModal.tsx
+++ b/frontend/pages/hosts/components/CommandDetailsModal/CommandDetailsModal.tsx
@@ -199,10 +199,8 @@ const CommandResultsModal = ({
       title="MDM command details"
       onExit={onDone}
     >
-      <>
-        <ModalContent data={data} isLoading={isLoading} error={error} />
-        <ModalFooter primaryButtons={<Button onClick={onDone}>Done</Button>} />
-      </>
+      <ModalContent data={data} isLoading={isLoading} error={error} />
+      <ModalFooter primaryButtons={<Button onClick={onDone}>Done</Button>} />
     </Modal>
   );
 };
diff --git a/frontend/pages/hosts/components/DeleteHostModal/DeleteHostModal.tsx b/frontend/pages/hosts/components/DeleteHostModal/DeleteHostModal.tsx
index 0c93b80615..dee89851c9 100644
--- a/frontend/pages/hosts/components/DeleteHostModal/DeleteHostModal.tsx
+++ b/frontend/pages/hosts/components/DeleteHostModal/DeleteHostModal.tsx
@@ -56,48 +56,46 @@ const DeleteHostModal = ({
 
   return (
     <Modal title="Delete" onExit={onCancel} className={baseClass}>
-      <>
+      <p>
+        This will remove the record of <b>{hostText()}</b> and associated data
+        such as unlock PINs and disk encryption keys.
+      </p>
+      {hasManyHosts && (
         <p>
-          This will remove the record of <b>{hostText()}</b> and associated data
-          such as unlock PINs and disk encryption keys.
+          When deleting a large volume of hosts, it may take some time for this
+          change to be reflected in the UI.
         </p>
-        {hasManyHosts && (
-          <p>
-            When deleting a large volume of hosts, it may take some time for
-            this change to be reflected in the UI.
-          </p>
-        )}
-        <ul>
-          <li>
-            macOS, Windows, or Linux hosts will re-appear unless Fleet&apos;s
-            agent is uninstalled.{" "}
-            <CustomLink
-              text="Uninstall Fleet's agent"
-              url={`${LEARN_MORE_ABOUT_BASE_LINK}/uninstall-fleetd`}
-              newTab
-            />
-          </li>
-          <li>
-            iOS, iPadOS, and Android hosts will re-appear unless MDM is turned
-            off. For iOS and iPadOS it may take up to an hour and for Android it
-            may take up to 24 hours to re-appear.
-          </li>
-        </ul>
-        <div className="modal-cta-wrap">
-          <Button
-            type="button"
-            onClick={onSubmit}
-            variant="alert"
-            className="delete-loading"
-            isLoading={isUpdating}
-          >
-            Delete
-          </Button>
-          <Button onClick={onCancel} variant="inverse-alert">
-            Cancel
-          </Button>
-        </div>
-      </>
+      )}
+      <ul>
+        <li>
+          macOS, Windows, or Linux hosts will re-appear unless Fleet&apos;s
+          agent is uninstalled.{" "}
+          <CustomLink
+            text="Uninstall Fleet's agent"
+            url={`${LEARN_MORE_ABOUT_BASE_LINK}/uninstall-fleetd`}
+            newTab
+          />
+        </li>
+        <li>
+          iOS, iPadOS, and Android hosts will re-appear unless MDM is turned
+          off. For iOS and iPadOS it may take up to an hour and for Android it
+          may take up to 24 hours to re-appear.
+        </li>
+      </ul>
+      <div className="modal-cta-wrap">
+        <Button
+          type="button"
+          onClick={onSubmit}
+          variant="alert"
+          className="delete-loading"
+          isLoading={isUpdating}
+        >
+          Delete
+        </Button>
+        <Button onClick={onCancel} variant="inverse-alert">
+          Cancel
+        </Button>
+      </div>
     </Modal>
   );
 };
diff --git a/frontend/pages/hosts/components/ScriptDetailsModal/ScriptDetailsModal.tsx b/frontend/pages/hosts/components/ScriptDetailsModal/ScriptDetailsModal.tsx
index 0a3aebc7b8..251a475090 100644
--- a/frontend/pages/hosts/components/ScriptDetailsModal/ScriptDetailsModal.tsx
+++ b/frontend/pages/hosts/components/ScriptDetailsModal/ScriptDetailsModal.tsx
@@ -290,10 +290,8 @@ const ScriptDetailsModal = ({
       onExit={onClose ?? onCancel}
       isHidden={isHidden}
     >
-      <>
-        {renderContent()}
-        {shouldShowFooter && renderFooter()}
-      </>
+      {renderContent()}
+      {shouldShowFooter && renderFooter()}
     </Modal>
   );
 };
diff --git a/frontend/pages/hosts/components/TransferHostModal/TransferHostModal.tsx b/frontend/pages/hosts/components/TransferHostModal/TransferHostModal.tsx
index d1e5f166ee..b4b3192962 100644
--- a/frontend/pages/hosts/components/TransferHostModal/TransferHostModal.tsx
+++ b/frontend/pages/hosts/components/TransferHostModal/TransferHostModal.tsx
@@ -76,45 +76,40 @@ const TransferHostModal = ({
 
   return (
     <Modal onExit={onCancel} title="Transfer" className={baseClass}>
-      <>
-        <form className={`${baseClass}__form`}>
-          <Dropdown
-            wrapperClassName={`${baseClass}__team-dropdown-wrapper`}
-            label={`Transfer ${multipleHosts ? "selected hosts" : "host"} to:`}
-            value={selectedTeam && selectedTeam.id}
-            options={createTeamDropdownOptions()}
-            onChange={onChangeSelectTeam}
-            placeholder="Select a fleet"
-            searchable
-            autoFocus
-          />
-          {isGlobalAdmin ? (
-            <p>
-              Fleet not here?{" "}
-              <Link
-                to={PATHS.ADMIN_FLEETS}
-                className={`${baseClass}__team-link`}
-              >
-                Create a fleet
-              </Link>
-            </p>
-          ) : null}
-          <div className="modal-cta-wrap">
-            <Button
-              disabled={selectedTeam === undefined}
-              type="button"
-              onClick={onSubmitTransferHost}
-              className="transfer-loading"
-              isLoading={isUpdating}
-            >
-              Transfer
-            </Button>
-            <Button onClick={onCancel} variant="inverse">
-              Cancel
-            </Button>
-          </div>
-        </form>
-      </>
+      <form className={`${baseClass}__form`}>
+        <Dropdown
+          wrapperClassName={`${baseClass}__team-dropdown-wrapper`}
+          label={`Transfer ${multipleHosts ? "selected hosts" : "host"} to:`}
+          value={selectedTeam && selectedTeam.id}
+          options={createTeamDropdownOptions()}
+          onChange={onChangeSelectTeam}
+          placeholder="Select a fleet"
+          searchable
+          autoFocus
+        />
+        {isGlobalAdmin ? (
+          <p>
+            Fleet not here?{" "}
+            <Link to={PATHS.ADMIN_FLEETS} className={`${baseClass}__team-link`}>
+              Create a fleet
+            </Link>
+          </p>
+        ) : null}
+        <div className="modal-cta-wrap">
+          <Button
+            disabled={selectedTeam === undefined}
+            type="button"
+            onClick={onSubmitTransferHost}
+            className="transfer-loading"
+            isLoading={isUpdating}
+          >
+            Transfer
+          </Button>
+          <Button onClick={onCancel} variant="inverse">
+            Cancel
+          </Button>
+        </div>
+      </form>
     </Modal>
   );
 };
diff --git a/frontend/pages/hosts/details/DeviceUserPage/BitLockerPinModal/BitLockerPinModal.tsx b/frontend/pages/hosts/details/DeviceUserPage/BitLockerPinModal/BitLockerPinModal.tsx
index 9b95058825..0115d8784c 100644
--- a/frontend/pages/hosts/details/DeviceUserPage/BitLockerPinModal/BitLockerPinModal.tsx
+++ b/frontend/pages/hosts/details/DeviceUserPage/BitLockerPinModal/BitLockerPinModal.tsx
@@ -22,45 +22,41 @@ const BitLockerPinModal = ({
       className={baseClass}
       width="large"
     >
-      <>
-        <div>
-          <p>
-            <ol>
-              <li>
-                <p>
-                  Open the <b>Start menu</b>.
-                </p>
-              </li>
-              <li>
-                <p>Type &ldquo;Manage BitLocker&rdquo; and launch.</p>
-              </li>
-              <li>
-                <p>
-                  Click <b>Change how the drive is unlocked at startup</b>. If
-                  this option doesn&apos;t show up, wait a minute and relaunch{" "}
-                  <b>Manage BitLocker</b>.
-                </p>
-              </li>
-              <li>
-                <p>
-                  Choose <b>Enter a PIN (recommended)</b> and follow the prompts
-                  to create a PIN.
-                </p>
-              </li>
-              <li>
-                <p>
-                  Close this window and select <b>Refetch</b> on your{" "}
-                  <b>My device</b> page. This informs your organization that you
-                  have set a BitLocker PIN.
-                </p>
-              </li>
-            </ol>
-          </p>
-        </div>
-        <ModalFooter
-          primaryButtons={<Button onClick={onCancel}>Done</Button>}
-        />
-      </>
+      <div>
+        <p>
+          <ol>
+            <li>
+              <p>
+                Open the <b>Start menu</b>.
+              </p>
+            </li>
+            <li>
+              <p>Type &ldquo;Manage BitLocker&rdquo; and launch.</p>
+            </li>
+            <li>
+              <p>
+                Click <b>Change how the drive is unlocked at startup</b>. If
+                this option doesn&apos;t show up, wait a minute and relaunch{" "}
+                <b>Manage BitLocker</b>.
+              </p>
+            </li>
+            <li>
+              <p>
+                Choose <b>Enter a PIN (recommended)</b> and follow the prompts
+                to create a PIN.
+              </p>
+            </li>
+            <li>
+              <p>
+                Close this window and select <b>Refetch</b> on your{" "}
+                <b>My device</b> page. This informs your organization that you
+                have set a BitLocker PIN.
+              </p>
+            </li>
+          </ol>
+        </p>
+      </div>
+      <ModalFooter primaryButtons={<Button onClick={onCancel}>Done</Button>} />
     </Modal>
   );
 };
diff --git a/frontend/pages/hosts/details/DeviceUserPage/BypassModal/BypassModal.tsx b/frontend/pages/hosts/details/DeviceUserPage/BypassModal/BypassModal.tsx
index 5fda91a380..2c14e29d81 100644
--- a/frontend/pages/hosts/details/DeviceUserPage/BypassModal/BypassModal.tsx
+++ b/frontend/pages/hosts/details/DeviceUserPage/BypassModal/BypassModal.tsx
@@ -13,25 +13,23 @@ interface IBypassModal {
 const BypassModal = ({ onCancel, onResolveLater, isLoading }: IBypassModal) => {
   return (
     <Modal onExit={onCancel} title="Resolve later">
-      <>
-        <p>
-          This will allow you to log in with Okta once.
-          <br />
-          <br />
-          Please resolve all policies marked &quot;Action required&quot; to
-          restore access for subsequent logins.
-        </p>
-        <div className="modal-cta-wrap">
-          <Button
-            type="button"
-            onClick={onResolveLater}
-            isLoading={isLoading}
-            disabled={isLoading}
-          >
-            Resolve later
-          </Button>
-        </div>
-      </>
+      <p>
+        This will allow you to log in with Okta once.
+        <br />
+        <br />
+        Please resolve all policies marked &quot;Action required&quot; to
+        restore access for subsequent logins.
+      </p>
+      <div className="modal-cta-wrap">
+        <Button
+          type="button"
+          onClick={onResolveLater}
+          isLoading={isLoading}
+          disabled={isLoading}
+        >
+          Resolve later
+        </Button>
+      </div>
     </Modal>
   );
 };
diff --git a/frontend/pages/hosts/details/HostDetailsPage/modals/BootstrapPackageModal/BootstrapPackageModal.tsx b/frontend/pages/hosts/details/HostDetailsPage/modals/BootstrapPackageModal/BootstrapPackageModal.tsx
index 9078998192..e70f9fe8a0 100644
--- a/frontend/pages/hosts/details/HostDetailsPage/modals/BootstrapPackageModal/BootstrapPackageModal.tsx
+++ b/frontend/pages/hosts/details/HostDetailsPage/modals/BootstrapPackageModal/BootstrapPackageModal.tsx
@@ -23,18 +23,16 @@ const BootstrapPackageModal = ({
       onEnter={onClose}
       className={baseClass}
     >
-      <>
-        <p className={`${baseClass}__package-name`}>
-          <b>{packageName}</b> failed to install with the following error:
-        </p>
-        <p className={`${baseClass}__details`}>{details}</p>
+      <p className={`${baseClass}__package-name`}>
+        <b>{packageName}</b> failed to install with the following error:
+      </p>
+      <p className={`${baseClass}__details`}>{details}</p>
 
-        <div className="modal-cta-wrap">
-          <Button type="button" onClick={onClose} className="delete-loading">
-            Done
-          </Button>
-        </div>
-      </>
+      <div className="modal-cta-wrap">
+        <Button type="button" onClick={onClose} className="delete-loading">
+          Done
+        </Button>
+      </div>
     </Modal>
   );
 };
diff --git a/frontend/pages/hosts/details/HostDetailsPage/modals/CancelActivityModal/CancelActivityModal.tsx b/frontend/pages/hosts/details/HostDetailsPage/modals/CancelActivityModal/CancelActivityModal.tsx
index ed9419e52e..bc34f9f967 100644
--- a/frontend/pages/hosts/details/HostDetailsPage/modals/CancelActivityModal/CancelActivityModal.tsx
+++ b/frontend/pages/hosts/details/HostDetailsPage/modals/CancelActivityModal/CancelActivityModal.tsx
@@ -54,34 +54,32 @@ const CancelActivityModal = ({
       onExit={onExit}
       isContentDisabled={isCanceling}
     >
-      <>
-        <div className={`${baseClass}__content`}>
-          <p>
-            If the activity is happening on the host it will still complete.
-            Results won&apos;t appear in Fleet.
-          </p>
-          <ActivityItemComponent
-            tab="upcoming"
-            activity={activity}
-            onCancel={noop}
-            onShowDetails={noop}
-            isSoloActivity
-          />
-        </div>
-        <div className="modal-cta-wrap">
-          <Button
-            disabled={isCanceling}
-            isLoading={isCanceling}
-            variant="alert"
-            onClick={onAttemptyCancel}
-          >
-            Cancel activity
-          </Button>
-          <Button variant="inverse-alert" onClick={onExit}>
-            Back
-          </Button>
-        </div>
-      </>
+      <div className={`${baseClass}__content`}>
+        <p>
+          If the activity is happening on the host it will still complete.
+          Results won&apos;t appear in Fleet.
+        </p>
+        <ActivityItemComponent
+          tab="upcoming"
+          activity={activity}
+          onCancel={noop}
+          onShowDetails={noop}
+          isSoloActivity
+        />
+      </div>
+      <div className="modal-cta-wrap">
+        <Button
+          disabled={isCanceling}
+          isLoading={isCanceling}
+          variant="alert"
+          onClick={onAttemptyCancel}
+        >
+          Cancel activity
+        </Button>
+        <Button variant="inverse-alert" onClick={onExit}>
+          Back
+        </Button>
+      </div>
     </Modal>
   );
 };
diff --git a/frontend/pages/hosts/details/HostDetailsPage/modals/LockModal/LockModal.tsx b/frontend/pages/hosts/details/HostDetailsPage/modals/LockModal/LockModal.tsx
index 41889d6db9..bf27536275 100644
--- a/frontend/pages/hosts/details/HostDetailsPage/modals/LockModal/LockModal.tsx
+++ b/frontend/pages/hosts/details/HostDetailsPage/modals/LockModal/LockModal.tsx
@@ -119,42 +119,36 @@ const LockModal = ({
 
   return (
     <Modal className={baseClass} title="Lock" onExit={onClose}>
-      <>
-        <div className={`${baseClass}__modal-content`}>
-          <div className={`${baseClass}__description`}>
-            {renderDescription()}
-          </div>
-          <div className={`${baseClass}__confirm-message`}>
-            <span>
-              <b>Confirm:</b>
-            </span>
-            <Checkbox
-              wrapperClassName={`${baseClass}__lock-checkbox`}
-              value={lockChecked}
-              onChange={(value: boolean) => setLockChecked(value)}
-            >
-              I wish to lock <b>{hostName}</b>
-            </Checkbox>
-          </div>
-        </div>
-        {isIPadOrIPhone(platform) && (
-          <IosOrIpadLockPreview platform={platform} />
-        )}
-        <div className="modal-cta-wrap">
-          <Button
-            type="button"
-            onClick={onLock}
-            className="delete-loading"
-            disabled={!lockChecked}
-            isLoading={isLocking}
+      <div className={`${baseClass}__modal-content`}>
+        <div className={`${baseClass}__description`}>{renderDescription()}</div>
+        <div className={`${baseClass}__confirm-message`}>
+          <span>
+            <b>Confirm:</b>
+          </span>
+          <Checkbox
+            wrapperClassName={`${baseClass}__lock-checkbox`}
+            value={lockChecked}
+            onChange={(value: boolean) => setLockChecked(value)}
           >
-            Lock
-          </Button>
-          <Button onClick={onClose} variant="inverse">
-            Cancel
-          </Button>
+            I wish to lock <b>{hostName}</b>
+          </Checkbox>
         </div>
-      </>
+      </div>
+      {isIPadOrIPhone(platform) && <IosOrIpadLockPreview platform={platform} />}
+      <div className="modal-cta-wrap">
+        <Button
+          type="button"
+          onClick={onLock}
+          className="delete-loading"
+          disabled={!lockChecked}
+          isLoading={isLocking}
+        >
+          Lock
+        </Button>
+        <Button onClick={onClose} variant="inverse">
+          Cancel
+        </Button>
+      </div>
     </Modal>
   );
 };
diff --git a/frontend/pages/hosts/details/HostDetailsPage/modals/RecoveryLockPasswordModal/RecoveryLockPasswordModal.tsx b/frontend/pages/hosts/details/HostDetailsPage/modals/RecoveryLockPasswordModal/RecoveryLockPasswordModal.tsx
index 95948f08c6..ed4a578a9e 100644
--- a/frontend/pages/hosts/details/HostDetailsPage/modals/RecoveryLockPasswordModal/RecoveryLockPasswordModal.tsx
+++ b/frontend/pages/hosts/details/HostDetailsPage/modals/RecoveryLockPasswordModal/RecoveryLockPasswordModal.tsx
@@ -49,32 +49,30 @@ const RecoveryLockPasswordModal = ({
       onEnter={onCancel}
       className={baseClass}
     >
-      <>
-        {isLoading && <Spinner />}
-        {recoveryLockPasswordError ? (
-          <DataError
-            description={getErrorReason(recoveryLockPasswordError) || undefined}
-          />
-        ) : (
-          !isLoading && (
-            <>
-              <InputFieldHiddenContent value={recoveryLockPassword ?? ""} />
-              <p>
-                Use this to unlock and regain access to the host if the end user
-                forgets their local password.{" "}
-                <CustomLink
-                  newTab
-                  url={`${LEARN_MORE_ABOUT_BASE_LINK}/startup-security-macos`}
-                  text="Learn more"
-                />
-              </p>
-              <div className="modal-cta-wrap">
-                <Button onClick={onCancel}>Done</Button>
-              </div>
-            </>
-          )
-        )}
-      </>
+      {isLoading && <Spinner />}
+      {recoveryLockPasswordError ? (
+        <DataError
+          description={getErrorReason(recoveryLockPasswordError) || undefined}
+        />
+      ) : (
+        !isLoading && (
+          <>
+            <InputFieldHiddenContent value={recoveryLockPassword ?? ""} />
+            <p>
+              Use this to unlock and regain access to the host if the end user
+              forgets their local password.{" "}
+              <CustomLink
+                newTab
+                url={`${LEARN_MORE_ABOUT_BASE_LINK}/startup-security-macos`}
+                text="Learn more"
+              />
+            </p>
+            <div className="modal-cta-wrap">
+              <Button onClick={onCancel}>Done</Button>
+            </div>
+          </>
+        )
+      )}
     </Modal>
   );
 };
diff --git a/frontend/pages/hosts/details/HostDetailsPage/modals/RunScriptModal/RunScriptModal.tsx b/frontend/pages/hosts/details/HostDetailsPage/modals/RunScriptModal/RunScriptModal.tsx
index fa7943de60..e43147713f 100644
--- a/frontend/pages/hosts/details/HostDetailsPage/modals/RunScriptModal/RunScriptModal.tsx
+++ b/frontend/pages/hosts/details/HostDetailsPage/modals/RunScriptModal/RunScriptModal.tsx
@@ -112,43 +112,41 @@ const RunScriptModal = ({
       isLoading={isFetchingHostScripts || isLoadingHostScripts}
       isHidden={isHidden}
     >
-      <>
-        <div className={`${baseClass}__modal-content`}>
-          {isLoadingHostScripts && <Spinner />}
-          {!isLoadingHostScripts && isError && <DataError />}
-          {!isLoadingHostScripts &&
-            !isError &&
-            (!tableData || tableData.length === 0) && (
-              <EmptyTable
-                header="No scripts available for this host"
-                info="Expecting to see scripts? Close this modal and try again."
-              />
-            )}
-          {!isLoadingHostScripts &&
-            !isError &&
-            tableData &&
-            tableData.length > 0 && (
-              <TableContainer
-                resultsTitle=""
-                emptyComponent={EmptyComponent}
-                showMarkAllPages={false}
-                isAllPagesSelected={false}
-                columnConfigs={scriptColumnConfigs}
-                data={tableData}
-                isLoading={isRunningScript || isFetchingHostScripts}
-                onQueryChange={onQueryChange}
-                disableNextPage={!hostScriptResponse?.meta.has_next_results}
-                pageIndex={page}
-                pageSize={10}
-                disableCount
-                disableTableHeader
-              />
-            )}
-        </div>
-        <div className="modal-cta-wrap">
-          <Button onClick={onClose}>Done</Button>
-        </div>
-      </>
+      <div className={`${baseClass}__modal-content`}>
+        {isLoadingHostScripts && <Spinner />}
+        {!isLoadingHostScripts && isError && <DataError />}
+        {!isLoadingHostScripts &&
+          !isError &&
+          (!tableData || tableData.length === 0) && (
+            <EmptyTable
+              header="No scripts available for this host"
+              info="Expecting to see scripts? Close this modal and try again."
+            />
+          )}
+        {!isLoadingHostScripts &&
+          !isError &&
+          tableData &&
+          tableData.length > 0 && (
+            <TableContainer
+              resultsTitle=""
+              emptyComponent={EmptyComponent}
+              showMarkAllPages={false}
+              isAllPagesSelected={false}
+              columnConfigs={scriptColumnConfigs}
+              data={tableData}
+              isLoading={isRunningScript || isFetchingHostScripts}
+              onQueryChange={onQueryChange}
+              disableNextPage={!hostScriptResponse?.meta.has_next_results}
+              pageIndex={page}
+              pageSize={10}
+              disableCount
+              disableTableHeader
+            />
+          )}
+      </div>
+      <div className="modal-cta-wrap">
+        <Button onClick={onClose}>Done</Button>
+      </div>
     </Modal>
   );
 };
diff --git a/frontend/pages/hosts/details/HostDetailsPage/modals/SelectQueryModal/SelectQueryModal.tsx b/frontend/pages/hosts/details/HostDetailsPage/modals/SelectQueryModal/SelectQueryModal.tsx
index 5f6a52dfcc..106c88d33f 100644
--- a/frontend/pages/hosts/details/HostDetailsPage/modals/SelectQueryModal/SelectQueryModal.tsx
+++ b/frontend/pages/hosts/details/HostDetailsPage/modals/SelectQueryModal/SelectQueryModal.tsx
@@ -245,10 +245,8 @@ const SelectQueryModal = ({
       className={baseClass}
       width="large"
     >
-      <>
-        {renderDescription()}
-        {renderQueries()}
-      </>
+      {renderDescription()}
+      {renderQueries()}
     </Modal>
   );
 };
diff --git a/frontend/pages/hosts/details/HostDetailsPage/modals/UnlockModal/UnlockModal.tsx b/frontend/pages/hosts/details/HostDetailsPage/modals/UnlockModal/UnlockModal.tsx
index 0eccaeb96a..dc94349d3f 100644
--- a/frontend/pages/hosts/details/HostDetailsPage/modals/UnlockModal/UnlockModal.tsx
+++ b/frontend/pages/hosts/details/HostDetailsPage/modals/UnlockModal/UnlockModal.tsx
@@ -131,13 +131,11 @@ const UnlockModal = ({
 
   return (
     <Modal className={baseClass} title="Unlock" onExit={onClose}>
-      <>
-        <div className={`${baseClass}__modal-content`}>
-          {renderModalContent()}
-        </div>
+      <div className={`${baseClass}__modal-content`}>
+        {renderModalContent()}
+      </div>
 
-        <div className="modal-cta-wrap">{renderModalButtons()}</div>
-      </>
+      <div className="modal-cta-wrap">{renderModalButtons()}</div>
     </Modal>
   );
 };
diff --git a/frontend/pages/hosts/details/HostDetailsPage/modals/WipeModal/WipeModal.tsx b/frontend/pages/hosts/details/HostDetailsPage/modals/WipeModal/WipeModal.tsx
index bf78266cc9..5f96f8cd09 100644
--- a/frontend/pages/hosts/details/HostDetailsPage/modals/WipeModal/WipeModal.tsx
+++ b/frontend/pages/hosts/details/HostDetailsPage/modals/WipeModal/WipeModal.tsx
@@ -47,45 +47,43 @@ const WipeModal = ({
 
   return (
     <Modal className={baseClass} title="Wipe" onExit={onClose}>
-      <>
-        <div className={`${baseClass}__modal-content`}>
-          <p>All content will be erased on this host.</p>
-          {isWindowsHost && (
-            <p>
-              To use the host again, you will have to do a Windows reinstall
-              from a USB drive.
-            </p>
-          )}
-          <div className={`${baseClass}__confirm-message`}>
-            <span>
-              <b>Please check to confirm:</b>
-            </span>
-            <Checkbox
-              wrapperClassName={`${baseClass}__wipe-checkbox`}
-              value={lockChecked}
-              onChange={(value: boolean) => setLockChecked(value)}
-            >
-              I wish to wipe <b>{hostName}</b>
-            </Checkbox>
-          </div>
-        </div>
-
-        <div className="modal-cta-wrap">
-          <Button
-            type="button"
-            onClick={onWipe}
-            variant="alert"
-            className="delete-loading"
-            disabled={!lockChecked}
-            isLoading={isWiping}
+      <div className={`${baseClass}__modal-content`}>
+        <p>All content will be erased on this host.</p>
+        {isWindowsHost && (
+          <p>
+            To use the host again, you will have to do a Windows reinstall from
+            a USB drive.
+          </p>
+        )}
+        <div className={`${baseClass}__confirm-message`}>
+          <span>
+            <b>Please check to confirm:</b>
+          </span>
+          <Checkbox
+            wrapperClassName={`${baseClass}__wipe-checkbox`}
+            value={lockChecked}
+            onChange={(value: boolean) => setLockChecked(value)}
           >
-            Wipe
-          </Button>
-          <Button onClick={onClose} variant="inverse-alert">
-            Cancel
-          </Button>
+            I wish to wipe <b>{hostName}</b>
+          </Checkbox>
         </div>
-      </>
+      </div>
+
+      <div className="modal-cta-wrap">
+        <Button
+          type="button"
+          onClick={onWipe}
+          variant="alert"
+          className="delete-loading"
+          disabled={!lockChecked}
+          isLoading={isWiping}
+        >
+          Wipe
+        </Button>
+        <Button onClick={onClose} variant="inverse-alert">
+          Cancel
+        </Button>
+      </div>
     </Modal>
   );
 };
diff --git a/frontend/pages/hosts/details/OSSettingsModal/OSSettingsModal.tsx b/frontend/pages/hosts/details/OSSettingsModal/OSSettingsModal.tsx
index a738dbb2ed..025bd2a341 100644
--- a/frontend/pages/hosts/details/OSSettingsModal/OSSettingsModal.tsx
+++ b/frontend/pages/hosts/details/OSSettingsModal/OSSettingsModal.tsx
@@ -47,17 +47,15 @@ const OSSettingsModal = ({
       className={baseClass}
       width="xlarge"
     >
-      <>
-        <OSSettingsTable
-          canResendProfiles={canResendProfiles}
-          tableData={memoizedTableData ?? []}
-          resendRequest={resendRequest}
-          onProfileResent={onProfileResent}
-        />
-        <div className="modal-cta-wrap">
-          <Button onClick={onClose}>Done</Button>
-        </div>
-      </>
+      <OSSettingsTable
+        canResendProfiles={canResendProfiles}
+        tableData={memoizedTableData ?? []}
+        resendRequest={resendRequest}
+        onProfileResent={onProfileResent}
+      />
+      <div className="modal-cta-wrap">
+        <Button onClick={onClose}>Done</Button>
+      </div>
     </Modal>
   );
 };
diff --git a/frontend/pages/hosts/details/cards/Software/SelfService/components/OpenSoftwareModal/OpenSoftwareModal.tsx b/frontend/pages/hosts/details/cards/Software/SelfService/components/OpenSoftwareModal/OpenSoftwareModal.tsx
index f83b45390e..4e0e1fec61 100644
--- a/frontend/pages/hosts/details/cards/Software/SelfService/components/OpenSoftwareModal/OpenSoftwareModal.tsx
+++ b/frontend/pages/hosts/details/cards/Software/SelfService/components/OpenSoftwareModal/OpenSoftwareModal.tsx
@@ -40,10 +40,8 @@ const OpenSoftwareModal = ({
 }: ISoftwareInstructionsModalProps) => {
   return (
     <Modal className={baseClass} title="How to open" onExit={onExit}>
-      <>
-        {getOpenSoftwareInstructions(softwareName, softwareSource)}
-        <ModalFooter primaryButtons={<Button onClick={onExit}>Done</Button>} />
-      </>
+      {getOpenSoftwareInstructions(softwareName, softwareSource)}
+      <ModalFooter primaryButtons={<Button onClick={onExit}>Done</Button>} />
     </Modal>
   );
 };
diff --git a/frontend/pages/hosts/details/cards/Software/SelfService/components/SoftwareUpdateModal/SoftwareUpdateModal.tsx b/frontend/pages/hosts/details/cards/Software/SelfService/components/SoftwareUpdateModal/SoftwareUpdateModal.tsx
index 9e8f77cc1d..63122b26c1 100644
--- a/frontend/pages/hosts/details/cards/Software/SelfService/components/SoftwareUpdateModal/SoftwareUpdateModal.tsx
+++ b/frontend/pages/hosts/details/cards/Software/SelfService/components/SoftwareUpdateModal/SoftwareUpdateModal.tsx
@@ -111,37 +111,35 @@ const SoftwareUpdateModal = ({
 
   return (
     <Modal title="Update details" className={baseClass} onExit={onExit}>
-      <>
-        <div className={`${baseClass}__modal-content`}>
-          <StatusMessage
-            hostDisplayName={hostDisplayName}
-            isDeviceUser={isDeviceUser}
-            softwareStatus={status}
-            softwareName={softwareDisplayName}
-            installerName={installerName}
-            installerVersion={installerVersion}
-          />
-          {showCurrentVersions && <InventoryVersions hostSoftware={software} />}
-        </div>
-        <ModalFooter
-          primaryButtons={
-            status === "pending_install" ? (
-              <Button type="submit" onClick={onExit}>
-                Done
-              </Button>
-            ) : (
-              <>
-                <Button variant="inverse" onClick={onExit}>
-                  Cancel
-                </Button>
-                <Button type="submit" onClick={onClickUpdate}>
-                  Update
-                </Button>
-              </>
-            )
-          }
+      <div className={`${baseClass}__modal-content`}>
+        <StatusMessage
+          hostDisplayName={hostDisplayName}
+          isDeviceUser={isDeviceUser}
+          softwareStatus={status}
+          softwareName={softwareDisplayName}
+          installerName={installerName}
+          installerVersion={installerVersion}
         />
-      </>
+        {showCurrentVersions && <InventoryVersions hostSoftware={software} />}
+      </div>
+      <ModalFooter
+        primaryButtons={
+          status === "pending_install" ? (
+            <Button type="submit" onClick={onExit}>
+              Done
+            </Button>
+          ) : (
+            <>
+              <Button variant="inverse" onClick={onExit}>
+                Cancel
+              </Button>
+              <Button type="submit" onClick={onClickUpdate}>
+                Update
+              </Button>
+            </>
+          )
+        }
+      />
     </Modal>
   );
 };
diff --git a/frontend/pages/hosts/details/cards/Software/SelfService/components/UninstallSoftwareModal/UninstallSoftwareModal.tsx b/frontend/pages/hosts/details/cards/Software/SelfService/components/UninstallSoftwareModal/UninstallSoftwareModal.tsx
index 662943c869..bf63d8971b 100644
--- a/frontend/pages/hosts/details/cards/Software/SelfService/components/UninstallSoftwareModal/UninstallSoftwareModal.tsx
+++ b/frontend/pages/hosts/details/cards/Software/SelfService/components/UninstallSoftwareModal/UninstallSoftwareModal.tsx
@@ -48,25 +48,22 @@ const UninstallSoftwareModal = ({
       onExit={onExit}
       isContentDisabled={isUninstalling}
     >
-      <>
-        <p>
-          Uninstalling this software will remove it and may remove{" "}
-          {softwareName} data from your device. You can always reinstall it
-          again later.
-        </p>
-        <div className="modal-cta-wrap">
-          <Button
-            variant="alert"
-            onClick={onUninstallSoftware}
-            isLoading={isUninstalling}
-          >
-            Uninstall
-          </Button>
-          <Button variant="inverse-alert" onClick={onExit}>
-            Cancel
-          </Button>
-        </div>
-      </>
+      <p>
+        Uninstalling this software will remove it and may remove {softwareName}{" "}
+        data from your device. You can always reinstall it again later.
+      </p>
+      <div className="modal-cta-wrap">
+        <Button
+          variant="alert"
+          onClick={onUninstallSoftware}
+          isLoading={isUninstalling}
+        >
+          Uninstall
+        </Button>
+        <Button variant="inverse-alert" onClick={onExit}>
+          Cancel
+        </Button>
+      </div>
     </Modal>
   );
 };
diff --git a/frontend/pages/hosts/details/modals/CertificateDetailsModal/CertificateDetailsModal.tsx b/frontend/pages/hosts/details/modals/CertificateDetailsModal/CertificateDetailsModal.tsx
index ee8d33d987..cd84ffbe8e 100644
--- a/frontend/pages/hosts/details/modals/CertificateDetailsModal/CertificateDetailsModal.tsx
+++ b/frontend/pages/hosts/details/modals/CertificateDetailsModal/CertificateDetailsModal.tsx
@@ -80,185 +80,183 @@ const CertificateDetailsModal = ({
 
   return (
     <Modal className={baseClass} title="Certificate details" onExit={onExit}>
-      <>
-        <div className={`${baseClass}__content`}>
-          {showSubjectSection && (
-            <div className={`${baseClass}__section`}>
-              <h3>Subject name</h3>
-              <dl>
-                {subjectCountry && (
-                  <DataSet
-                    title="Country or region"
-                    value={<TooltipTruncatedText value={subjectCountry} />}
-                    orientation="horizontal"
-                  />
-                )}
-                {subjectOrganization && (
-                  <DataSet
-                    title="Organization"
-                    value={<TooltipTruncatedText value={subjectOrganization} />}
-                    orientation="horizontal"
-                  />
-                )}
-                {subjectOrganizationalUnit && (
-                  <DataSet
-                    title="Organizational unit"
-                    value={
-                      <TooltipTruncatedText value={subjectOrganizationalUnit} />
-                    }
-                    orientation="horizontal"
-                  />
-                )}
-                {subjectCommonName && (
-                  <DataSet
-                    title="Common name"
-                    value={<TooltipTruncatedText value={subjectCommonName} />}
-                    orientation="horizontal"
-                  />
-                )}
-              </dl>
-            </div>
-          )}
-          {showIssuerNameSection && (
-            <div className={`${baseClass}__section`}>
-              <h3>Issuer name</h3>
-              <dl>
-                {issuerCountry && (
-                  <DataSet
-                    title="Country or region"
-                    value={<TooltipTruncatedText value={issuerCountry} />}
-                    orientation="horizontal"
-                  />
-                )}
-                {issuerOrganization && (
-                  <DataSet
-                    title="Organization"
-                    value={<TooltipTruncatedText value={issuerOrganization} />}
-                    orientation="horizontal"
-                  />
-                )}
-                {issuerOrganizationalUnit && (
-                  <DataSet
-                    title="Organizational unit"
-                    value={
-                      <TooltipTruncatedText value={issuerOrganizationalUnit} />
-                    }
-                    orientation="horizontal"
-                  />
-                )}
-                {issuerCommonName && (
-                  <DataSet
-                    title="Common name"
-                    value={<TooltipTruncatedText value={issuerCommonName} />}
-                    orientation="horizontal"
-                  />
-                )}
-              </dl>
-            </div>
-          )}
-          {showValidityPeriodSection && (
-            <div className={`${baseClass}__section`}>
-              <h3>Validity period</h3>
-              <dl>
-                {not_valid_before && (
-                  <DataSet
-                    title="Not valid before"
-                    value={
-                      <TooltipTruncatedText
-                        value={monthDayYearFormat(not_valid_before)}
-                      />
-                    }
-                    orientation="horizontal"
-                  />
-                )}
-                {not_valid_after && (
-                  <DataSet
-                    title="Not valid after"
-                    value={
-                      <TooltipTruncatedText
-                        value={monthDayYearFormat(not_valid_after)}
-                      />
-                    }
-                    orientation="horizontal"
-                  />
-                )}
-              </dl>
-            </div>
-          )}
-          {showKeyInfoSection && (
-            <div className={`${baseClass}__section`}>
-              <h3>Key info</h3>
-              <dl>
-                {key_algorithm && (
-                  <DataSet
-                    title="Algorithm"
-                    value={<TooltipTruncatedText value={key_algorithm} />}
-                    orientation="horizontal"
-                  />
-                )}
-                {!!key_strength && (
-                  <DataSet
-                    title="Key size"
-                    value={<TooltipTruncatedText value={key_strength} />}
-                    orientation="horizontal"
-                  />
-                )}
-                {key_usage && (
-                  <DataSet
-                    title="Key usage"
-                    value={<TooltipTruncatedText value={key_usage} />}
-                    orientation="horizontal"
-                  />
-                )}
-                {serial && (
-                  <DataSet
-                    title="Serial number (hex)"
-                    value={<TooltipTruncatedText value={serial} />}
-                    orientation="horizontal"
-                  />
-                )}
-                {serialDecimal && (
-                  <DataSet
-                    title="Serial number (decimal)"
-                    value={<TooltipTruncatedText value={serialDecimal} />}
-                    orientation="horizontal"
-                  />
-                )}
-              </dl>
-            </div>
-          )}
-          {/* will always show this section */}
+      <div className={`${baseClass}__content`}>
+        {showSubjectSection && (
           <div className={`${baseClass}__section`}>
-            <h3>Basic constraints</h3>
+            <h3>Subject name</h3>
+            <dl>
+              {subjectCountry && (
+                <DataSet
+                  title="Country or region"
+                  value={<TooltipTruncatedText value={subjectCountry} />}
+                  orientation="horizontal"
+                />
+              )}
+              {subjectOrganization && (
+                <DataSet
+                  title="Organization"
+                  value={<TooltipTruncatedText value={subjectOrganization} />}
+                  orientation="horizontal"
+                />
+              )}
+              {subjectOrganizationalUnit && (
+                <DataSet
+                  title="Organizational unit"
+                  value={
+                    <TooltipTruncatedText value={subjectOrganizationalUnit} />
+                  }
+                  orientation="horizontal"
+                />
+              )}
+              {subjectCommonName && (
+                <DataSet
+                  title="Common name"
+                  value={<TooltipTruncatedText value={subjectCommonName} />}
+                  orientation="horizontal"
+                />
+              )}
+            </dl>
+          </div>
+        )}
+        {showIssuerNameSection && (
+          <div className={`${baseClass}__section`}>
+            <h3>Issuer name</h3>
+            <dl>
+              {issuerCountry && (
+                <DataSet
+                  title="Country or region"
+                  value={<TooltipTruncatedText value={issuerCountry} />}
+                  orientation="horizontal"
+                />
+              )}
+              {issuerOrganization && (
+                <DataSet
+                  title="Organization"
+                  value={<TooltipTruncatedText value={issuerOrganization} />}
+                  orientation="horizontal"
+                />
+              )}
+              {issuerOrganizationalUnit && (
+                <DataSet
+                  title="Organizational unit"
+                  value={
+                    <TooltipTruncatedText value={issuerOrganizationalUnit} />
+                  }
+                  orientation="horizontal"
+                />
+              )}
+              {issuerCommonName && (
+                <DataSet
+                  title="Common name"
+                  value={<TooltipTruncatedText value={issuerCommonName} />}
+                  orientation="horizontal"
+                />
+              )}
+            </dl>
+          </div>
+        )}
+        {showValidityPeriodSection && (
+          <div className={`${baseClass}__section`}>
+            <h3>Validity period</h3>
+            <dl>
+              {not_valid_before && (
+                <DataSet
+                  title="Not valid before"
+                  value={
+                    <TooltipTruncatedText
+                      value={monthDayYearFormat(not_valid_before)}
+                    />
+                  }
+                  orientation="horizontal"
+                />
+              )}
+              {not_valid_after && (
+                <DataSet
+                  title="Not valid after"
+                  value={
+                    <TooltipTruncatedText
+                      value={monthDayYearFormat(not_valid_after)}
+                    />
+                  }
+                  orientation="horizontal"
+                />
+              )}
+            </dl>
+          </div>
+        )}
+        {showKeyInfoSection && (
+          <div className={`${baseClass}__section`}>
+            <h3>Key info</h3>
+            <dl>
+              {key_algorithm && (
+                <DataSet
+                  title="Algorithm"
+                  value={<TooltipTruncatedText value={key_algorithm} />}
+                  orientation="horizontal"
+                />
+              )}
+              {!!key_strength && (
+                <DataSet
+                  title="Key size"
+                  value={<TooltipTruncatedText value={key_strength} />}
+                  orientation="horizontal"
+                />
+              )}
+              {key_usage && (
+                <DataSet
+                  title="Key usage"
+                  value={<TooltipTruncatedText value={key_usage} />}
+                  orientation="horizontal"
+                />
+              )}
+              {serial && (
+                <DataSet
+                  title="Serial number (hex)"
+                  value={<TooltipTruncatedText value={serial} />}
+                  orientation="horizontal"
+                />
+              )}
+              {serialDecimal && (
+                <DataSet
+                  title="Serial number (decimal)"
+                  value={<TooltipTruncatedText value={serialDecimal} />}
+                  orientation="horizontal"
+                />
+              )}
+            </dl>
+          </div>
+        )}
+        {/* will always show this section */}
+        <div className={`${baseClass}__section`}>
+          <h3>Basic constraints</h3>
+          <dl>
+            <DataSet
+              title="Certificate authority"
+              value={
+                <TooltipTruncatedText
+                  value={certificate_authority ? "Yes" : "No"}
+                />
+              }
+              orientation="horizontal"
+            />
+          </dl>
+        </div>
+        {showSignatureSection && (
+          <div className={`${baseClass}__section`}>
+            <h3>Signature</h3>
             <dl>
               <DataSet
-                title="Certificate authority"
-                value={
-                  <TooltipTruncatedText
-                    value={certificate_authority ? "Yes" : "No"}
-                  />
-                }
+                title="Algorithm"
+                value={<TooltipTruncatedText value={signing_algorithm} />}
                 orientation="horizontal"
               />
             </dl>
           </div>
-          {showSignatureSection && (
-            <div className={`${baseClass}__section`}>
-              <h3>Signature</h3>
-              <dl>
-                <DataSet
-                  title="Algorithm"
-                  value={<TooltipTruncatedText value={signing_algorithm} />}
-                  orientation="horizontal"
-                />
-              </dl>
-            </div>
-          )}
-        </div>
-        <div className="modal-cta-wrap">
-          <Button onClick={onExit}>Done</Button>
-        </div>
-      </>
+        )}
+      </div>
+      <div className="modal-cta-wrap">
+        <Button onClick={onExit}>Done</Button>
+      </div>
     </Modal>
   );
 };
diff --git a/frontend/pages/hosts/details/modals/InventoryVersionsModal/InventoryVersionsModal.tsx b/frontend/pages/hosts/details/modals/InventoryVersionsModal/InventoryVersionsModal.tsx
index 15e6c6948a..5113a7e2e0 100644
--- a/frontend/pages/hosts/details/modals/InventoryVersionsModal/InventoryVersionsModal.tsx
+++ b/frontend/pages/hosts/details/modals/InventoryVersionsModal/InventoryVersionsModal.tsx
@@ -66,10 +66,8 @@ const InventoryVersionsModal = ({
       onExit={onExit}
       width="large"
     >
-      <>
-        {renderScrollableContent()}
-        {renderFooter()}
-      </>
+      {renderScrollableContent()}
+      {renderFooter()}
     </Modal>
   );
 };
diff --git a/frontend/pages/hosts/details/modals/LocationModal/LocationModal.tsx b/frontend/pages/hosts/details/modals/LocationModal/LocationModal.tsx
index 67b65b472f..cb95c72c53 100644
--- a/frontend/pages/hosts/details/modals/LocationModal/LocationModal.tsx
+++ b/frontend/pages/hosts/details/modals/LocationModal/LocationModal.tsx
@@ -196,10 +196,8 @@ const LocationModal = ({
 
   return (
     <Modal title="Location" className={baseClass} onExit={onExit}>
-      <>
-        {renderContent()}
-        {renderFooter()}
-      </>
+      {renderContent()}
+      {renderFooter()}
     </Modal>
   );
 };
diff --git a/frontend/pages/policies/ManagePoliciesPage/components/CalendarEventPreviewModal/CalendarEventPreviewModal.tsx b/frontend/pages/policies/ManagePoliciesPage/components/CalendarEventPreviewModal/CalendarEventPreviewModal.tsx
index 21a94d16ca..d6f12b247e 100644
--- a/frontend/pages/policies/ManagePoliciesPage/components/CalendarEventPreviewModal/CalendarEventPreviewModal.tsx
+++ b/frontend/pages/policies/ManagePoliciesPage/components/CalendarEventPreviewModal/CalendarEventPreviewModal.tsx
@@ -32,114 +32,110 @@ const CalendarEventPreviewModal = ({
       onExit={onCancel}
       className={baseClass}
     >
-      <>
-        <span>
-          {showGenericPreview ? (
-            "What end users see:"
-          ) : (
-            <>
-              End users failing only <strong>{policy.name}</strong> policy will
-              see:
-            </>
-          )}
-        </span>
-        <div className={`${baseClass}__preview`}>
-          <div className={`${baseClass}__preview-header`}>
-            <div className={`${baseClass}__preview-header__square-wrapper`}>
-              <div className={`${baseClass}__preview-header__square`} />
-            </div>
-            <div className={`${baseClass}__preview-header__info`}>
-              <div className={`${baseClass}__preview-header__title`}>
-                💻 🚫 Scheduled maintenance
-              </div>
-              <div className={`${baseClass}__preview-header__time`}>
-                <span>Tuesday, June 18</span>
-                <span>⋅</span>
-                <span>5-5:30pm</span>
-              </div>
-            </div>
+      <span>
+        {showGenericPreview ? (
+          "What end users see:"
+        ) : (
+          <>
+            End users failing only <strong>{policy.name}</strong> policy will
+            see:
+          </>
+        )}
+      </span>
+      <div className={`${baseClass}__preview`}>
+        <div className={`${baseClass}__preview-header`}>
+          <div className={`${baseClass}__preview-header__square-wrapper`}>
+            <div className={`${baseClass}__preview-header__square`} />
           </div>
-          <div className={`${baseClass}__preview-info`}>
-            <div className={`${baseClass}__preview-info__icon`}>
-              <Icon name="text" />
+          <div className={`${baseClass}__preview-header__info`}>
+            <div className={`${baseClass}__preview-header__title`}>
+              💻 🚫 Scheduled maintenance
             </div>
-            <div className={`${baseClass}__preview-info__text`}>
-              {orgName} reserved this time to make some changes to your work
-              computer (Anna&apos;s MacBook Pro).
-              <br />
-              <br />
-              Please leave your device on and connected to power.
-              <br /> <br />
-              <strong>Why it matters</strong>
-              <br />
-              <div className={`${baseClass}__preview-info__text__user-text`}>
-                {showGenericPreview
-                  ? `${orgName} needs to make sure your device meets the organization's requirements.`
-                  : policy.description}
-              </div>
-              <br /> <br />
-              <strong>Maintenance required</strong>
-              <br />
-              <div className={`${baseClass}__preview-info__text__user-text`}>
-                {showGenericPreview ? (
-                  <ul>
-                    <li>
-                      Click the{" "}
-                      <a
-                        href={TRANSPARENCY_LINK}
-                        rel="noreferrer"
-                        target="_blank"
-                      >
-                        Fleet
-                      </a>{" "}
-                      icon in your computer&apos;s menu and select{" "}
-                      <b>My device</b>
-                    </li>
-                    <li>
-                      Navigate to the <b>Policies</b> tab
-                    </li>
-                    <li>
-                      Follow instructions to resolve any policies marked{" "}
-                      {`"Fail"`}
-                    </li>
-                    <li>
-                      Click <b>Refetch</b>
-                    </li>
-                  </ul>
-                ) : (
-                  policy.resolution
-                )}
-              </div>
-            </div>
-          </div>
-          <div className={`${baseClass}__preview-invitee`}>
-            <div className={`${baseClass}__preview-invitee__icon`}>
-              <Icon name="calendar" />
-            </div>
-            <div className={`${baseClass}__preview-invitee__text`}>
-              Anna Chao
+            <div className={`${baseClass}__preview-header__time`}>
+              <span>Tuesday, June 18</span>
+              <span>⋅</span>
+              <span>5-5:30pm</span>
             </div>
           </div>
         </div>
-        <div className={`${baseClass}__footer`}>
-          {showGenericPreview ? (
-            <>
-              Users failing only a single policy will see a more specific
-              explanation.
-            </>
-          ) : (
-            <>
-              <strong>Why it matters</strong> and{" "}
-              <strong>Maintenance required</strong> are populated by the
-              policy&apos;s <strong>Description</strong> and{" "}
-              <strong>Resolution</strong> respectively.
-            </>
-          )}
+        <div className={`${baseClass}__preview-info`}>
+          <div className={`${baseClass}__preview-info__icon`}>
+            <Icon name="text" />
+          </div>
+          <div className={`${baseClass}__preview-info__text`}>
+            {orgName} reserved this time to make some changes to your work
+            computer (Anna&apos;s MacBook Pro).
+            <br />
+            <br />
+            Please leave your device on and connected to power.
+            <br /> <br />
+            <strong>Why it matters</strong>
+            <br />
+            <div className={`${baseClass}__preview-info__text__user-text`}>
+              {showGenericPreview
+                ? `${orgName} needs to make sure your device meets the organization's requirements.`
+                : policy.description}
+            </div>
+            <br /> <br />
+            <strong>Maintenance required</strong>
+            <br />
+            <div className={`${baseClass}__preview-info__text__user-text`}>
+              {showGenericPreview ? (
+                <ul>
+                  <li>
+                    Click the{" "}
+                    <a
+                      href={TRANSPARENCY_LINK}
+                      rel="noreferrer"
+                      target="_blank"
+                    >
+                      Fleet
+                    </a>{" "}
+                    icon in your computer&apos;s menu and select{" "}
+                    <b>My device</b>
+                  </li>
+                  <li>
+                    Navigate to the <b>Policies</b> tab
+                  </li>
+                  <li>
+                    Follow instructions to resolve any policies marked{" "}
+                    {`"Fail"`}
+                  </li>
+                  <li>
+                    Click <b>Refetch</b>
+                  </li>
+                </ul>
+              ) : (
+                policy.resolution
+              )}
+            </div>
+          </div>
         </div>
-        <div className="modal-cta-wrap">
-          <Button onClick={onCancel}>Done</Button>
+        <div className={`${baseClass}__preview-invitee`}>
+          <div className={`${baseClass}__preview-invitee__icon`}>
+            <Icon name="calendar" />
+          </div>
+          <div className={`${baseClass}__preview-invitee__text`}>Anna Chao</div>
         </div>
-      </>
+      </div>
+      <div className={`${baseClass}__footer`}>
+        {showGenericPreview ? (
+          <>
+            Users failing only a single policy will see a more specific
+            explanation.
+          </>
+        ) : (
+          <>
+            <strong>Why it matters</strong> and{" "}
+            <strong>Maintenance required</strong> are populated by the
+            policy&apos;s <strong>Description</strong> and{" "}
+            <strong>Resolution</strong> respectively.
+          </>
+        )}
+      </div>
+      <div className="modal-cta-wrap">
+        <Button onClick={onCancel}>Done</Button>
+      </div>
     </Modal>
   );
 };