From f7c2cf41061a135c0b3004e801375da8d3669170 Mon Sep 17 00:00:00 2001
From: RachelElysia <71795832+RachelElysia@users.noreply.github.com>
Date: Tue, 28 Jul 2026 13:52:48 -0700
Subject: [PATCH] =?UTF-8?q?Fleet=20UI:=20PR=20#49292=20follow-up=20?=
 =?UTF-8?q?=E2=80=94=20buttons,=208px=20gaps,=20focus=20ring=20(#50049)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ActionsDropdown/ActionsDropdown.tsx           | 13 +++++++++++--
 frontend/components/ActionsDropdown/_styles.scss  |  2 +-
 .../CertificateInstallDetailsModal.tsx            |  1 -
 .../SoftwareInstallDetailsModal.tsx               |  1 -
 .../SoftwareIpaInstallDetailsModal.tsx            |  2 --
 .../SoftwareScriptDetailsModal.tsx                |  1 -
 .../SoftwareUninstallDetailsModal.tsx             |  1 -
 .../VppInstallDetailsModal.tsx                    |  2 --
 .../PlatformWrapper/PlatformWrapper.tsx           |  1 -
 frontend/components/BackButton/BackButton.tsx     |  2 +-
 frontend/components/LiveQuery/SelectTargets.tsx   |  1 -
 frontend/components/Modal/_styles.scss            |  4 ++--
 frontend/components/ModalFooter/_styles.scss      |  2 +-
 frontend/components/Pagination/Pagination.tsx     |  2 +-
 .../TableContainer/DataTable/_styles.scss         |  8 +++-----
 frontend/components/TableContainer/_styles.scss   |  9 +--------
 .../components/buttons/ActionButtons/_styles.scss |  6 ++----
 .../buttons/RevealButton/RevealButton.tsx         |  5 +----
 .../components/buttons/RevealButton/_styles.scss  |  1 -
 frontend/components/forms/LoginForm/LoginForm.tsx |  2 +-
 frontend/components/icons/ChevronLeft.tsx         |  2 +-
 .../components/ActivityFeedFilters/_styles.scss   |  2 +-
 .../DashboardPage/cards/ChartCard/ChartCard.tsx   |  2 +-
 .../SoftwareFilters/SoftwareFilters.tsx           |  1 -
 .../DashboardPage/cards/ChartCard/_styles.scss    | 15 ---------------
 .../ActivityFeedAutomationsModal.tsx              |  1 -
 .../cards/DiskEncryption/DiskEncryption.tsx       |  1 -
 .../components/ScriptListItem/_styles.scss        |  2 +-
 .../BootstrapAdvancedOptions.tsx                  |  1 -
 .../SetupExperienceScriptCard/_styles.scss        |  2 +-
 .../AdvancedOptionsForm/AdvancedOptionsForm.tsx   |  1 -
 .../SetupAssistantProfileCard/_styles.scss        |  2 +-
 .../FleetAppDetailsForm/_styles.scss              |  2 +-
 .../FleetAppDetailsModal/FleetAppDetailsModal.tsx |  3 ++-
 .../SelfServiceCategoriesPage.tsx                 |  4 ++--
 frontend/pages/SoftwarePage/_styles.scss          |  2 +-
 .../PackageAdvancedOptions.tsx                    |  1 -
 .../components/forms/PackageForm/_styles.scss     |  2 +-
 .../forms/SoftwareAndroidForm/_styles.scss        |  2 +-
 .../components/forms/SoftwareVppForm/_styles.scss |  2 +-
 .../OktaConditionalAccessModal.tsx                |  3 ++-
 .../components/modals/RenewCertModal/_styles.scss |  2 +-
 .../TeamDetailsWrapper/TeamDetailsWrapper.tsx     |  3 ---
 .../DownloadFileButtons/DownloadABMKey.tsx        |  2 +-
 .../DownloadFileButtons/DownloadCSR.tsx           |  2 +-
 frontend/pages/hosts/ManageHostsPage/_styles.scss |  4 ++--
 .../CustomLabelGroupHeading/_styles.scss          |  2 +-
 .../SettingUpYourDevice/SettingUpYourDevice.tsx   |  1 -
 .../hosts/details/cards/HostHeader/_styles.scss   |  2 +-
 .../policies/ManagePoliciesPage/_styles.scss      |  5 +----
 .../CalendarEventsModal/CalendarEventsModal.tsx   |  1 -
 .../OtherWorkflowsModal/OtherWorkflowsModal.tsx   |  2 --
 .../components/PoliciesTable/_styles.scss         |  2 +-
 .../pages/queries/ManageQueriesPage/_styles.scss  |  2 +-
 .../queries/details/QueryDetailsPage/_styles.scss |  2 +-
 .../components/EditQueryForm/EditQueryForm.tsx    |  2 --
 .../SaveNewQueryModal/SaveNewQueryModal.tsx       |  1 -
 .../pages/queries/live/LiveQueryPage/_styles.scss |  6 +-----
 frontend/styles/global/_global.scss               |  4 ++--
 frontend/styles/var/padding.scss                  |  3 ++-
 60 files changed, 58 insertions(+), 109 deletions(-)

diff --git a/frontend/components/ActionsDropdown/ActionsDropdown.tsx b/frontend/components/ActionsDropdown/ActionsDropdown.tsx
index 6b88c40d1c..c3a2ade700 100644
--- a/frontend/components/ActionsDropdown/ActionsDropdown.tsx
+++ b/frontend/components/ActionsDropdown/ActionsDropdown.tsx
@@ -237,6 +237,7 @@ const ActionsDropdown = ({
       ...provided,
       display: "flex",
       flexDirection: "row",
+      gap: "8px",
       width: "max-content",
       // Need minHeight to override default
       minHeight: variant === "secondary" ? "28px" : "32px", // Match button height
@@ -277,9 +278,17 @@ const ActionsDropdown = ({
       }),
       // Same ring Button's :focus-visible draws — only for keyboard tabbing,
       // never a mouse click (see isKeyboardFocus above).
+      //
+      // Drawn INSIDE the control (via outline + negative offset) rather than
+      // as an outset box-shadow. An outset shadow renders as a full-contrast
+      // 1px halo on the page background, and for the bordered `secondary`
+      // variant it stacks against the existing 1px grey border → reads as a
+      // ~2px band. Sitting inside the box overlays the border pixel and
+      // matches Button's own `::after` focus ring visual weight.
       ...(state.isFocused &&
         isKeyboardFocus && {
-          boxShadow: `0 0 0 1px ${COLORS["core-fleet-black"]}`,
+          outline: `1px solid ${COLORS["core-fleet-black"]}`,
+          outlineOffset: "-1px",
         }),
     }),
     placeholder: (provided, state) => ({
@@ -293,7 +302,7 @@ const ActionsDropdown = ({
         variant === "subdued" || variant === "secondary" ? "600" : undefined,
       lineHeight: "normal",
       paddingLeft: 0,
-      marginTop: "1px",
+      margin: 0,
       ...(state.isDisabled && {
         filter: "grayscale(0.5)",
         opacity: 0.5,
diff --git a/frontend/components/ActionsDropdown/_styles.scss b/frontend/components/ActionsDropdown/_styles.scss
index f91a43abed..f5e6ed540b 100644
--- a/frontend/components/ActionsDropdown/_styles.scss
+++ b/frontend/components/ActionsDropdown/_styles.scss
@@ -11,7 +11,7 @@
   align-items: center;
 
   button .children-wrapper {
-    gap: $pad-xsmall;
+    gap: $pad-small;
 
     .actions-dropdown__icon svg {
       transition: transform 0.25s ease;
diff --git a/frontend/components/ActivityDetails/InstallDetails/CertificateInstallDetailsModal/CertificateInstallDetailsModal.tsx b/frontend/components/ActivityDetails/InstallDetails/CertificateInstallDetailsModal/CertificateInstallDetailsModal.tsx
index ff103e0d60..4345d067ca 100644
--- a/frontend/components/ActivityDetails/InstallDetails/CertificateInstallDetailsModal/CertificateInstallDetailsModal.tsx
+++ b/frontend/components/ActivityDetails/InstallDetails/CertificateInstallDetailsModal/CertificateInstallDetailsModal.tsx
@@ -57,7 +57,6 @@ const CertificateInstallDetailsModal = ({
               hideText="Details"
               caretPosition="after"
               onClick={() => setShowDetails((prev) => !prev)}
-              variant="secondary"
             />
             {showDetails && (
               <Textarea label="Error details:" variant="code">
diff --git a/frontend/components/ActivityDetails/InstallDetails/SoftwareInstallDetailsModal/SoftwareInstallDetailsModal.tsx b/frontend/components/ActivityDetails/InstallDetails/SoftwareInstallDetailsModal/SoftwareInstallDetailsModal.tsx
index 50edda35be..4900e1fa6f 100644
--- a/frontend/components/ActivityDetails/InstallDetails/SoftwareInstallDetailsModal/SoftwareInstallDetailsModal.tsx
+++ b/frontend/components/ActivityDetails/InstallDetails/SoftwareInstallDetailsModal/SoftwareInstallDetailsModal.tsx
@@ -324,7 +324,6 @@ export const SoftwareInstallDetailsModal = ({
             hideText="Details"
             caretPosition="after"
             onClick={toggleInstallDetails}
-            variant="secondary"
           />
         )}
         {showInstallDetails &&
diff --git a/frontend/components/ActivityDetails/InstallDetails/SoftwareIpaInstallDetailsModal/SoftwareIpaInstallDetailsModal.tsx b/frontend/components/ActivityDetails/InstallDetails/SoftwareIpaInstallDetailsModal/SoftwareIpaInstallDetailsModal.tsx
index ba9394d2b9..589bbdd229 100644
--- a/frontend/components/ActivityDetails/InstallDetails/SoftwareIpaInstallDetailsModal/SoftwareIpaInstallDetailsModal.tsx
+++ b/frontend/components/ActivityDetails/InstallDetails/SoftwareIpaInstallDetailsModal/SoftwareIpaInstallDetailsModal.tsx
@@ -473,7 +473,6 @@ export const SoftwareIpaInstallDetailsModal = ({
           hideText="Details"
           caretPosition="after"
           onClick={toggleInstallDetails}
-          variant="secondary"
         />
         {showInstallDetails && (
           <>
@@ -507,7 +506,6 @@ export const SoftwareIpaInstallDetailsModal = ({
           hideText="Details"
           caretPosition="after"
           onClick={toggleInstallDetails}
-          variant="secondary"
         />
         {showInstallDetails && (
           <Textarea label="Error details:" variant="code">
diff --git a/frontend/components/ActivityDetails/InstallDetails/SoftwareScriptDetailsModal/SoftwareScriptDetailsModal.tsx b/frontend/components/ActivityDetails/InstallDetails/SoftwareScriptDetailsModal/SoftwareScriptDetailsModal.tsx
index 0d8270416f..3244d02026 100644
--- a/frontend/components/ActivityDetails/InstallDetails/SoftwareScriptDetailsModal/SoftwareScriptDetailsModal.tsx
+++ b/frontend/components/ActivityDetails/InstallDetails/SoftwareScriptDetailsModal/SoftwareScriptDetailsModal.tsx
@@ -241,7 +241,6 @@ export const SoftwareScriptDetailsModal = ({
             hideText="Details"
             caretPosition="after"
             onClick={toggleInstallDetails}
-            variant="secondary"
           />
         )}
         {showInstallDetails && swInstallResult?.output && (
diff --git a/frontend/components/ActivityDetails/InstallDetails/SoftwareUninstallDetailsModal/SoftwareUninstallDetailsModal.tsx b/frontend/components/ActivityDetails/InstallDetails/SoftwareUninstallDetailsModal/SoftwareUninstallDetailsModal.tsx
index b5a49caf30..e0631fabdb 100644
--- a/frontend/components/ActivityDetails/InstallDetails/SoftwareUninstallDetailsModal/SoftwareUninstallDetailsModal.tsx
+++ b/frontend/components/ActivityDetails/InstallDetails/SoftwareUninstallDetailsModal/SoftwareUninstallDetailsModal.tsx
@@ -248,7 +248,6 @@ const SoftwareUninstallDetailsModal = ({
             hideText="Details"
             caretPosition="after"
             onClick={toggleDetails}
-            variant="secondary"
           />
         )}
         {showDetails && uninstallResult?.script_contents && (
diff --git a/frontend/components/ActivityDetails/InstallDetails/VppInstallDetailsModal/VppInstallDetailsModal.tsx b/frontend/components/ActivityDetails/InstallDetails/VppInstallDetailsModal/VppInstallDetailsModal.tsx
index 28b766c0e7..4087a88b45 100644
--- a/frontend/components/ActivityDetails/InstallDetails/VppInstallDetailsModal/VppInstallDetailsModal.tsx
+++ b/frontend/components/ActivityDetails/InstallDetails/VppInstallDetailsModal/VppInstallDetailsModal.tsx
@@ -535,7 +535,6 @@ export const VppInstallDetailsModal = ({
           hideText="Details"
           caretPosition="after"
           onClick={toggleInstallDetails}
-          variant="secondary"
         />
         {showInstallDetails && (
           <>
@@ -569,7 +568,6 @@ export const VppInstallDetailsModal = ({
           hideText="Details"
           caretPosition="after"
           onClick={toggleInstallDetails}
-          variant="secondary"
         />
         {showInstallDetails && (
           <Textarea label="Error details:" variant="code">
diff --git a/frontend/components/AddHostsModal/PlatformWrapper/PlatformWrapper.tsx b/frontend/components/AddHostsModal/PlatformWrapper/PlatformWrapper.tsx
index d6b2c3260c..d70f702a26 100644
--- a/frontend/components/AddHostsModal/PlatformWrapper/PlatformWrapper.tsx
+++ b/frontend/components/AddHostsModal/PlatformWrapper/PlatformWrapper.tsx
@@ -382,7 +382,6 @@ const PlatformWrapper = ({
             showText="Plain osquery"
             caretPosition="after"
             onClick={() => setShowPlainOsquery((prev) => !prev)}
-            variant="secondary"
           />
           {showPlainOsquery && (
             <>
diff --git a/frontend/components/BackButton/BackButton.tsx b/frontend/components/BackButton/BackButton.tsx
index 39ec8159f2..4205ff685e 100644
--- a/frontend/components/BackButton/BackButton.tsx
+++ b/frontend/components/BackButton/BackButton.tsx
@@ -29,7 +29,7 @@ const BackButton = ({
 
   return (
     <Button variant="subdued" onClick={onClick} className={classes}>
-      <Icon name="chevron-left" color="ui-fleet-black-50" />
+      <Icon name="chevron-left" />
       <span>{text}</span>
     </Button>
   );
diff --git a/frontend/components/LiveQuery/SelectTargets.tsx b/frontend/components/LiveQuery/SelectTargets.tsx
index b307043a90..f13530ab23 100644
--- a/frontend/components/LiveQuery/SelectTargets.tsx
+++ b/frontend/components/LiveQuery/SelectTargets.tsx
@@ -469,7 +469,6 @@ const SelectTargets = ({
               showText="Show more"
               hideText="Show less"
               isShowing={isListExpanded}
-              variant="secondary"
             />
           </div>
         )}
diff --git a/frontend/components/Modal/_styles.scss b/frontend/components/Modal/_styles.scss
index f4a8a842de..cf0c2f1663 100644
--- a/frontend/components/Modal/_styles.scss
+++ b/frontend/components/Modal/_styles.scss
@@ -118,7 +118,7 @@
     >* {
       display: flex;
       justify-content: space-between;
-      gap: $pad-medium;
+      gap: $gap-action-elements;
       align-items: center;
     }
 
@@ -143,5 +143,5 @@
   display: flex;
   flex-direction: row-reverse;
   margin-top: $pad-xlarge;
-  gap: $pad-medium;
+  gap: $gap-action-elements;
 }
\ No newline at end of file
diff --git a/frontend/components/ModalFooter/_styles.scss b/frontend/components/ModalFooter/_styles.scss
index 679551e1d8..edb57d1594 100644
--- a/frontend/components/ModalFooter/_styles.scss
+++ b/frontend/components/ModalFooter/_styles.scss
@@ -12,7 +12,7 @@
   &__secondary-buttons_wrapper {
     display: flex;
     justify-content: space-between;
-    gap: $pad-medium;
+    gap: $gap-action-elements;
     align-items: center;
   }
 
diff --git a/frontend/components/Pagination/Pagination.tsx b/frontend/components/Pagination/Pagination.tsx
index f366fa3e6a..fe6e4212dd 100644
--- a/frontend/components/Pagination/Pagination.tsx
+++ b/frontend/components/Pagination/Pagination.tsx
@@ -40,7 +40,7 @@ const Pagination = ({
         onClick={onPrevPage}
         className={`${baseClass}__pagination-button`}
       >
-        <Icon name="chevron-left" color="ui-fleet-black-75" /> Previous
+        <Icon name="chevron-left" /> Previous
       </Button>
       <Button
         variant="subdued"
diff --git a/frontend/components/TableContainer/DataTable/_styles.scss b/frontend/components/TableContainer/DataTable/_styles.scss
index c65489b62b..635120f825 100644
--- a/frontend/components/TableContainer/DataTable/_styles.scss
+++ b/frontend/components/TableContainer/DataTable/_styles.scss
@@ -231,25 +231,23 @@ $shadow-transition-width: 16px;
         display: flex;
         justify-content: space-between;
         align-items: center;
+        gap: $gap-table-elements;
 
         p {
-          margin: 0 $pad-medium 0 0;
+          margin: 0;
           font-weight: $regular;
 
           span {
             font-weight: $bold;
           }
         }
-
-        button {
-          margin-right: $pad-medium;
-        }
       }
 
       &__inner-left,
       &__inner-right {
         display: flex;
         align-items: center;
+        gap: $gap-table-elements;
       }
     }
 
diff --git a/frontend/components/TableContainer/_styles.scss b/frontend/components/TableContainer/_styles.scss
index 2b3473189f..8cecbcad32 100644
--- a/frontend/components/TableContainer/_styles.scss
+++ b/frontend/components/TableContainer/_styles.scss
@@ -1,7 +1,7 @@
 .table-container {
   display: flex;
   flex-direction: column;
-  gap: $gap-table-elements;
+  gap: $gap-page-component-inner;
 
   // Container is responsive design used when customControl is rendered
   .container {
@@ -120,13 +120,6 @@
     }
   }
 
-  // Compound selector (not just &__table-action-button) so this reliably
-  // beats the base .button class's own padding regardless of SCSS compile
-  // order — a tie at equal specificity bit us before (Scripts row gap).
-  &__table-action-button.button {
-    padding: $pad-small;
-  }
-
   &__header-left {
     display: flex;
     width: 100%;
diff --git a/frontend/components/buttons/ActionButtons/_styles.scss b/frontend/components/buttons/ActionButtons/_styles.scss
index 35fe937e45..ed891578b5 100644
--- a/frontend/components/buttons/ActionButtons/_styles.scss
+++ b/frontend/components/buttons/ActionButtons/_styles.scss
@@ -1,14 +1,12 @@
 .action-buttons {
   display: flex;
-
-  button {
-    margin-left: $pad-medium;
-  }
+  gap: $gap-action-elements;
 
   &__secondary-buttons {
     display: none;
     @media (min-width: $break-md) {
       display: flex;
+      gap: $gap-action-elements;
     }
   }
 
diff --git a/frontend/components/buttons/RevealButton/RevealButton.tsx b/frontend/components/buttons/RevealButton/RevealButton.tsx
index 948491cb9c..8791fe27c5 100644
--- a/frontend/components/buttons/RevealButton/RevealButton.tsx
+++ b/frontend/components/buttons/RevealButton/RevealButton.tsx
@@ -15,8 +15,6 @@ export interface IRevealButtonProps {
   tooltipContent?: React.ReactNode;
   disabledTooltipContent?: React.ReactNode;
   onClick?: (evt: React.MouseEvent<HTMLButtonElement>) => void;
-  /** Default: "secondary" */
-  variant?: "secondary" | "subdued";
 }
 
 const baseClass = "reveal-button";
@@ -32,7 +30,6 @@ const RevealButton = ({
   tooltipContent,
   disabledTooltipContent,
   onClick,
-  variant = "secondary",
 }: IRevealButtonProps): JSX.Element => {
   const classNames = classnames(baseClass, className);
 
@@ -70,7 +67,7 @@ const RevealButton = ({
 
   const button = (
     <Button
-      variant={variant}
+      variant="secondary"
       className={classNames}
       onClick={onClick}
       autofocus={autofocus}
diff --git a/frontend/components/buttons/RevealButton/_styles.scss b/frontend/components/buttons/RevealButton/_styles.scss
index 80d8250695..241b68d709 100644
--- a/frontend/components/buttons/RevealButton/_styles.scss
+++ b/frontend/components/buttons/RevealButton/_styles.scss
@@ -1,7 +1,6 @@
 .reveal-button .children-wrapper {
   display: inline-flex;
   align-items: center;
-  padding: $pad-small $pad-xxsmall; // larger clickable area
   min-width: max-content;
 
   .reveal-button__caret svg {
diff --git a/frontend/components/forms/LoginForm/LoginForm.tsx b/frontend/components/forms/LoginForm/LoginForm.tsx
index b911d13e4c..31f2e85a99 100644
--- a/frontend/components/forms/LoginForm/LoginForm.tsx
+++ b/frontend/components/forms/LoginForm/LoginForm.tsx
@@ -137,7 +137,7 @@ const LoginForm = ({
             variant="subdued"
             className="back-link"
           >
-            <Icon name="chevron-left" color="ui-fleet-black-75" />
+            <Icon name="chevron-left" />
             Back to login
           </Button>
           <h1>Check your email</h1>
diff --git a/frontend/components/icons/ChevronLeft.tsx b/frontend/components/icons/ChevronLeft.tsx
index 15253dfe89..9a0f84cc83 100644
--- a/frontend/components/icons/ChevronLeft.tsx
+++ b/frontend/components/icons/ChevronLeft.tsx
@@ -8,7 +8,7 @@ interface IChevronProps {
 }
 
 const ChevronLeft = ({
-  color = "core-fleet-black",
+  color = "ui-fleet-black-75",
   size = "medium",
 }: IChevronProps) => {
   return (
diff --git a/frontend/pages/DashboardPage/cards/ActivityFeed/components/ActivityFeedFilters/_styles.scss b/frontend/pages/DashboardPage/cards/ActivityFeed/components/ActivityFeedFilters/_styles.scss
index adbd45f2db..b4d23974bf 100644
--- a/frontend/pages/DashboardPage/cards/ActivityFeed/components/ActivityFeedFilters/_styles.scss
+++ b/frontend/pages/DashboardPage/cards/ActivityFeed/components/ActivityFeedFilters/_styles.scss
@@ -12,7 +12,7 @@
     display: grid;
     grid-template-areas: "type date sort";
     grid-template-columns: 4fr 3fr 3fr;
-    gap: $pad-medium;
+    gap: $gap-table-elements;
   }
 
   &__type-filter-dropdown {
diff --git a/frontend/pages/DashboardPage/cards/ChartCard/ChartCard.tsx b/frontend/pages/DashboardPage/cards/ChartCard/ChartCard.tsx
index cf30715c4d..c43e232a25 100644
--- a/frontend/pages/DashboardPage/cards/ChartCard/ChartCard.tsx
+++ b/frontend/pages/DashboardPage/cards/ChartCard/ChartCard.tsx
@@ -483,7 +483,7 @@ const ChartCard = ({
           <Button
             type="button"
             variant="subdued"
-            className={`${baseClass}__settings-btn`}
+            size="small"
             ariaLabel="Configure chart filters"
             onClick={() => openFilterModal()}
           >
diff --git a/frontend/pages/DashboardPage/cards/ChartCard/ChartFilterModal/SoftwareFilters/SoftwareFilters.tsx b/frontend/pages/DashboardPage/cards/ChartCard/ChartFilterModal/SoftwareFilters/SoftwareFilters.tsx
index 36f33682c4..83846f8177 100644
--- a/frontend/pages/DashboardPage/cards/ChartCard/ChartFilterModal/SoftwareFilters/SoftwareFilters.tsx
+++ b/frontend/pages/DashboardPage/cards/ChartCard/ChartFilterModal/SoftwareFilters/SoftwareFilters.tsx
@@ -168,7 +168,6 @@ const SoftwareFilters = ({
         hideText="Advanced options"
         caretPosition="after"
         onClick={() => setShowAdvanced((prev) => !prev)}
-        variant="secondary"
       />
 
       {showAdvanced && (
diff --git a/frontend/pages/DashboardPage/cards/ChartCard/_styles.scss b/frontend/pages/DashboardPage/cards/ChartCard/_styles.scss
index a601d33497..5f1a9a73f6 100644
--- a/frontend/pages/DashboardPage/cards/ChartCard/_styles.scss
+++ b/frontend/pages/DashboardPage/cards/ChartCard/_styles.scss
@@ -125,21 +125,6 @@
     }
   }
 
-  &__settings-btn {
-    // Button variant="subdued" applies a 36px height that would make the
-    // chart-card header taller than HostsEnrolledCard's bare h2 next door.
-    // Shrink to content height so headers match.
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border: none;
-    background: transparent;
-    cursor: pointer;
-    color: $ui-fleet-black-75;
-    height: auto !important;
-    padding: 0 !important;
-  }
-
   &__chart-container {
     min-height: 280px;
     display: flex;
diff --git a/frontend/pages/DashboardPage/components/ActivityFeedAutomationsModal/ActivityFeedAutomationsModal.tsx b/frontend/pages/DashboardPage/components/ActivityFeedAutomationsModal/ActivityFeedAutomationsModal.tsx
index 674d24e1b6..e299d15f07 100644
--- a/frontend/pages/DashboardPage/components/ActivityFeedAutomationsModal/ActivityFeedAutomationsModal.tsx
+++ b/frontend/pages/DashboardPage/components/ActivityFeedAutomationsModal/ActivityFeedAutomationsModal.tsx
@@ -171,7 +171,6 @@ const ActivityFeedAutomationsModal = ({
           onClick={() => {
             setShowExamplePayload(!showExamplePayload);
           }}
-          variant="secondary"
         />
         {showExamplePayload && renderExamplePayload()}
         <div className="modal-cta-wrap">
diff --git a/frontend/pages/ManageControlsPage/OSSettings/cards/DiskEncryption/DiskEncryption.tsx b/frontend/pages/ManageControlsPage/OSSettings/cards/DiskEncryption/DiskEncryption.tsx
index c9796a9512..06c3e235b4 100644
--- a/frontend/pages/ManageControlsPage/OSSettings/cards/DiskEncryption/DiskEncryption.tsx
+++ b/frontend/pages/ManageControlsPage/OSSettings/cards/DiskEncryption/DiskEncryption.tsx
@@ -237,7 +237,6 @@ const DiskEncryption = ({
             hideText="Advanced options"
             caretPosition="after"
             onClick={() => setShowAdvancedOptions(!showAdvancedOptions)}
-            variant="secondary"
           />
           {showAdvancedOptions && (
             <Checkbox
diff --git a/frontend/pages/ManageControlsPage/Scripts/components/ScriptListItem/_styles.scss b/frontend/pages/ManageControlsPage/Scripts/components/ScriptListItem/_styles.scss
index 9f7b257237..4ccf7ccfe0 100644
--- a/frontend/pages/ManageControlsPage/Scripts/components/ScriptListItem/_styles.scss
+++ b/frontend/pages/ManageControlsPage/Scripts/components/ScriptListItem/_styles.scss
@@ -40,7 +40,7 @@
   &__actions {
     display: flex;
     align-items: center;
-    gap: $pad-medium;
+    gap: $gap-action-elements;
   }
 
   &__details {
diff --git a/frontend/pages/ManageControlsPage/SetupExperience/cards/BootstrapPackage/components/BootstrapAdvancedOptions/BootstrapAdvancedOptions.tsx b/frontend/pages/ManageControlsPage/SetupExperience/cards/BootstrapPackage/components/BootstrapAdvancedOptions/BootstrapAdvancedOptions.tsx
index f23873763e..7dec83e21e 100644
--- a/frontend/pages/ManageControlsPage/SetupExperience/cards/BootstrapPackage/components/BootstrapAdvancedOptions/BootstrapAdvancedOptions.tsx
+++ b/frontend/pages/ManageControlsPage/SetupExperience/cards/BootstrapPackage/components/BootstrapAdvancedOptions/BootstrapAdvancedOptions.tsx
@@ -62,7 +62,6 @@ const BootstrapAdvancedOptions = ({
         hideText="Advanced options"
         caretPosition="after"
         onClick={() => setShowAdvancedOptions(!showAdvancedOptions)}
-        variant="secondary"
       />
       {showAdvancedOptions && (
         <form onSubmit={onSubmit}>
diff --git a/frontend/pages/ManageControlsPage/SetupExperience/cards/RunScript/components/SetupExperienceScriptCard/_styles.scss b/frontend/pages/ManageControlsPage/SetupExperience/cards/RunScript/components/SetupExperienceScriptCard/_styles.scss
index fc23d059bf..23cb026884 100644
--- a/frontend/pages/ManageControlsPage/SetupExperience/cards/RunScript/components/SetupExperienceScriptCard/_styles.scss
+++ b/frontend/pages/ManageControlsPage/SetupExperience/cards/RunScript/components/SetupExperienceScriptCard/_styles.scss
@@ -20,7 +20,7 @@
 
   &__actions {
     display: flex;
-    gap: $pad-medium;
+    gap: $gap-action-elements;
     flex: 1;
     justify-content: flex-end;
   }
diff --git a/frontend/pages/ManageControlsPage/SetupExperience/cards/SetupAssistant/components/AdvancedOptionsForm/AdvancedOptionsForm.tsx b/frontend/pages/ManageControlsPage/SetupExperience/cards/SetupAssistant/components/AdvancedOptionsForm/AdvancedOptionsForm.tsx
index cae568fa5c..7242d9bc4c 100644
--- a/frontend/pages/ManageControlsPage/SetupExperience/cards/SetupAssistant/components/AdvancedOptionsForm/AdvancedOptionsForm.tsx
+++ b/frontend/pages/ManageControlsPage/SetupExperience/cards/SetupAssistant/components/AdvancedOptionsForm/AdvancedOptionsForm.tsx
@@ -51,7 +51,6 @@ const AdvancedOptionsForm = ({
         hideText="Advanced options"
         caretPosition="after"
         onClick={() => setShowAdvancedOptions(!showAdvancedOptions)}
-        variant="secondary"
       />
       {showAdvancedOptions && (
         <form onSubmit={handleSubmit}>
diff --git a/frontend/pages/ManageControlsPage/SetupExperience/cards/SetupAssistant/components/SetupAssistantProfileCard/_styles.scss b/frontend/pages/ManageControlsPage/SetupExperience/cards/SetupAssistant/components/SetupAssistantProfileCard/_styles.scss
index b392601b52..82cff65982 100644
--- a/frontend/pages/ManageControlsPage/SetupExperience/cards/SetupAssistant/components/SetupAssistantProfileCard/_styles.scss
+++ b/frontend/pages/ManageControlsPage/SetupExperience/cards/SetupAssistant/components/SetupAssistantProfileCard/_styles.scss
@@ -26,7 +26,7 @@
 
   &__actions {
     display: flex;
-    gap: $pad-medium;
+    gap: $gap-action-elements;
     flex: 1;
     justify-content: flex-end;
   }
diff --git a/frontend/pages/SoftwarePage/SoftwareAddPage/SoftwareFleetMaintained/FleetMaintainedAppDetailsPage/FleetAppDetailsForm/_styles.scss b/frontend/pages/SoftwarePage/SoftwareAddPage/SoftwareFleetMaintained/FleetMaintainedAppDetailsPage/FleetAppDetailsForm/_styles.scss
index 009a8ef0a0..377fecdcd1 100644
--- a/frontend/pages/SoftwarePage/SoftwareAddPage/SoftwareFleetMaintained/FleetMaintainedAppDetailsPage/FleetAppDetailsForm/_styles.scss
+++ b/frontend/pages/SoftwarePage/SoftwareAddPage/SoftwareFleetMaintained/FleetMaintainedAppDetailsPage/FleetAppDetailsForm/_styles.scss
@@ -41,7 +41,7 @@
   &__action-buttons {
     display: flex;
     flex-direction: row-reverse;
-    gap: $pad-medium;
+    gap: $gap-action-elements;
   }
 
   fieldset {
diff --git a/frontend/pages/SoftwarePage/SoftwareAddPage/SoftwareFleetMaintained/FleetMaintainedAppDetailsPage/FleetAppDetailsModal/FleetAppDetailsModal.tsx b/frontend/pages/SoftwarePage/SoftwareAddPage/SoftwareFleetMaintained/FleetMaintainedAppDetailsPage/FleetAppDetailsModal/FleetAppDetailsModal.tsx
index 15c4571f42..c6b4b430b6 100644
--- a/frontend/pages/SoftwarePage/SoftwareAddPage/SoftwareFleetMaintained/FleetMaintainedAppDetailsPage/FleetAppDetailsModal/FleetAppDetailsModal.tsx
+++ b/frontend/pages/SoftwarePage/SoftwareAddPage/SoftwareFleetMaintained/FleetMaintainedAppDetailsPage/FleetAppDetailsModal/FleetAppDetailsModal.tsx
@@ -83,7 +83,8 @@ const FleetAppDetailsModal = ({
             }
             value={
               <>
-                {slug} <CopyButton copyText={slug} variant="subdued" />
+                {slug}
+                <CopyButton copyText={slug} variant="compact" />
               </>
             }
           />
diff --git a/frontend/pages/SoftwarePage/SoftwareLibrary/SelfServiceCategoriesPage/SelfServiceCategoriesPage.tsx b/frontend/pages/SoftwarePage/SoftwareLibrary/SelfServiceCategoriesPage/SelfServiceCategoriesPage.tsx
index 9f1870fb64..abcbbe351d 100644
--- a/frontend/pages/SoftwarePage/SoftwareLibrary/SelfServiceCategoriesPage/SelfServiceCategoriesPage.tsx
+++ b/frontend/pages/SoftwarePage/SoftwareLibrary/SelfServiceCategoriesPage/SelfServiceCategoriesPage.tsx
@@ -236,7 +236,7 @@ const SelfServiceCategoriesPage = ({
             {canManage && (
               <div className={`${baseClass}__row-actions`}>
                 <Button
-                  variant="subdued"
+                  variant="secondary"
                   onClick={() => setCategoryToEdit(listItem)}
                   ariaLabel={`Edit ${listItem.name}`}
                   title="Edit"
@@ -244,7 +244,7 @@ const SelfServiceCategoriesPage = ({
                   <Icon name="pencil" />
                 </Button>
                 <Button
-                  variant="subdued"
+                  variant="secondary"
                   onClick={() => setCategoryToDelete(listItem)}
                   ariaLabel={`Delete ${listItem.name}`}
                   title="Delete"
diff --git a/frontend/pages/SoftwarePage/_styles.scss b/frontend/pages/SoftwarePage/_styles.scss
index 4530ca07f1..41661ba113 100644
--- a/frontend/pages/SoftwarePage/_styles.scss
+++ b/frontend/pages/SoftwarePage/_styles.scss
@@ -29,7 +29,7 @@
   &__action-buttons {
     display: flex;
     align-items: center;
-    gap: $pad-small;
+    gap: $gap-action-elements;
   }
 
   &__text {
diff --git a/frontend/pages/SoftwarePage/components/forms/PackageAdvancedOptions/PackageAdvancedOptions.tsx b/frontend/pages/SoftwarePage/components/forms/PackageAdvancedOptions/PackageAdvancedOptions.tsx
index 47c2a42c62..3a0240ca92 100644
--- a/frontend/pages/SoftwarePage/components/forms/PackageAdvancedOptions/PackageAdvancedOptions.tsx
+++ b/frontend/pages/SoftwarePage/components/forms/PackageAdvancedOptions/PackageAdvancedOptions.tsx
@@ -285,7 +285,6 @@ const PackageAdvancedOptions = ({
         hideText="Advanced options"
         caretPosition="after"
         onClick={() => setShowAdvancedOptions(!showAdvancedOptions)}
-        variant="secondary"
         disabled={!selectedPackage || requiresAdvancedOptions}
         disabledTooltipContent={
           requiresAdvancedOptions ? (
diff --git a/frontend/pages/SoftwarePage/components/forms/PackageForm/_styles.scss b/frontend/pages/SoftwarePage/components/forms/PackageForm/_styles.scss
index 123e1b4914..d61c89a039 100644
--- a/frontend/pages/SoftwarePage/components/forms/PackageForm/_styles.scss
+++ b/frontend/pages/SoftwarePage/components/forms/PackageForm/_styles.scss
@@ -64,6 +64,6 @@
   &__action-buttons {
     display: flex;
     flex-direction: row-reverse;
-    gap: $pad-large;
+    gap: $gap-action-elements;
   }
 }
diff --git a/frontend/pages/SoftwarePage/components/forms/SoftwareAndroidForm/_styles.scss b/frontend/pages/SoftwarePage/components/forms/SoftwareAndroidForm/_styles.scss
index bb4a271a4b..7642895494 100644
--- a/frontend/pages/SoftwarePage/components/forms/SoftwareAndroidForm/_styles.scss
+++ b/frontend/pages/SoftwarePage/components/forms/SoftwareAndroidForm/_styles.scss
@@ -105,6 +105,6 @@
   &__action-buttons {
     display: flex;
     flex-direction: row-reverse;
-    gap: $pad-medium;
+    gap: $gap-action-elements;
   }
 }
diff --git a/frontend/pages/SoftwarePage/components/forms/SoftwareVppForm/_styles.scss b/frontend/pages/SoftwarePage/components/forms/SoftwareVppForm/_styles.scss
index ea5a9e7207..7c7fa0a6c2 100644
--- a/frontend/pages/SoftwarePage/components/forms/SoftwareVppForm/_styles.scss
+++ b/frontend/pages/SoftwarePage/components/forms/SoftwareVppForm/_styles.scss
@@ -114,6 +114,6 @@
   &__action-buttons {
     display: flex;
     flex-direction: row-reverse;
-    gap: $pad-medium;
+    gap: $gap-action-elements;
   }
 }
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 9c84d48451..da1d91ff04 100644
--- a/frontend/pages/admin/IntegrationsPage/cards/ConditionalAccess/components/OktaConditionalAccessModal/OktaConditionalAccessModal.tsx
+++ b/frontend/pages/admin/IntegrationsPage/cards/ConditionalAccess/components/OktaConditionalAccessModal/OktaConditionalAccessModal.tsx
@@ -308,7 +308,8 @@ const OktaConditionalAccessModal = ({
             isLoading={isDownloadingCert}
             disabled={isDownloadingCert}
           >
-            Download certificate <Icon name="download" />
+            <span>Download certificate</span>
+            <Icon name="download" />
           </Button>
         </div>
 
diff --git a/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/AppleMdmPage/components/modals/RenewCertModal/_styles.scss b/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/AppleMdmPage/components/modals/RenewCertModal/_styles.scss
index 21808106fd..2577d7a7a3 100644
--- a/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/AppleMdmPage/components/modals/RenewCertModal/_styles.scss
+++ b/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/AppleMdmPage/components/modals/RenewCertModal/_styles.scss
@@ -59,7 +59,7 @@
   &__button-wrap {
     display: flex;
     justify-content: flex-end;
-    gap: $pad-small;
+    gap: $gap-action-elements;
 
     .renew-cert-modal__request-button {
       margin: 0;
diff --git a/frontend/pages/admin/ManageFleetsPage/TeamDetailsWrapper/TeamDetailsWrapper.tsx b/frontend/pages/admin/ManageFleetsPage/TeamDetailsWrapper/TeamDetailsWrapper.tsx
index 7acf986235..5b1f99c53b 100644
--- a/frontend/pages/admin/ManageFleetsPage/TeamDetailsWrapper/TeamDetailsWrapper.tsx
+++ b/frontend/pages/admin/ManageFleetsPage/TeamDetailsWrapper/TeamDetailsWrapper.tsx
@@ -428,7 +428,6 @@ const TeamDetailsWrapper = ({
                 type: "secondary",
                 label: "Manage enroll secrets",
                 buttonVariant: "secondary",
-                iconName: "eye",
                 onClick: toggleManageEnrollSecretsModal,
                 gitOpsModeCompatible: true,
               },
@@ -436,7 +435,6 @@ const TeamDetailsWrapper = ({
                 type: "secondary",
                 label: "Rename fleet",
                 buttonVariant: "secondary",
-                iconName: "pencil",
                 onClick: toggleRenameFleetModal,
                 gitOpsModeCompatible: true,
               },
@@ -444,7 +442,6 @@ const TeamDetailsWrapper = ({
                 type: "secondary",
                 label: "Delete fleet",
                 buttonVariant: "secondary",
-                iconName: "trash",
                 hideAction: !isGlobalAdmin,
                 onClick: toggleDeleteFleetModal,
                 gitOpsModeCompatible: true,
diff --git a/frontend/pages/admin/components/DownloadFileButtons/DownloadABMKey.tsx b/frontend/pages/admin/components/DownloadFileButtons/DownloadABMKey.tsx
index a2efa93143..4716cd7b12 100644
--- a/frontend/pages/admin/components/DownloadFileButtons/DownloadABMKey.tsx
+++ b/frontend/pages/admin/components/DownloadFileButtons/DownloadABMKey.tsx
@@ -70,7 +70,7 @@ export const DownloadABMKey = ({
       onClick={handleDownload}
     >
       <label htmlFor="download-key">
-        <Icon name="download" size="medium" />
+        <Icon name="download" />
         <span>Download public key</span>
       </label>
     </Button>
diff --git a/frontend/pages/admin/components/DownloadFileButtons/DownloadCSR.tsx b/frontend/pages/admin/components/DownloadFileButtons/DownloadCSR.tsx
index 1532f0b474..a9ba69ea5d 100644
--- a/frontend/pages/admin/components/DownloadFileButtons/DownloadCSR.tsx
+++ b/frontend/pages/admin/components/DownloadFileButtons/DownloadCSR.tsx
@@ -66,7 +66,7 @@ export const DownloadCSR = ({
       onClick={handleDownload}
     >
       <label htmlFor="request-csr">
-        <Icon name="download" size="medium" />
+        <Icon name="download" />
         <span>Download CSR</span>
       </label>
     </Button>
diff --git a/frontend/pages/hosts/ManageHostsPage/_styles.scss b/frontend/pages/hosts/ManageHostsPage/_styles.scss
index 049b5f6fd7..ae9137281d 100644
--- a/frontend/pages/hosts/ManageHostsPage/_styles.scss
+++ b/frontend/pages/hosts/ManageHostsPage/_styles.scss
@@ -8,7 +8,7 @@
   &__button-wrap {
     display: flex;
     align-items: center;
-    gap: $pad-medium;
+    gap: $gap-action-elements;
   }
 
   .ace-fleet {
@@ -104,7 +104,7 @@
         .manage-hosts__table-actions {
           display: flex;
           align-items: center;
-          gap: $pad-medium; // grouping secondary buttons
+          gap: $gap-table-elements; // grouping secondary buttons
         }
 
         .manage-hosts__filter-dropdowns {
diff --git a/frontend/pages/hosts/ManageHostsPage/components/CustomLabelGroupHeading/_styles.scss b/frontend/pages/hosts/ManageHostsPage/components/CustomLabelGroupHeading/_styles.scss
index 55e6903044..414a5f9bca 100644
--- a/frontend/pages/hosts/ManageHostsPage/components/CustomLabelGroupHeading/_styles.scss
+++ b/frontend/pages/hosts/ManageHostsPage/components/CustomLabelGroupHeading/_styles.scss
@@ -17,7 +17,7 @@
     position: relative;
     display: flex;
     align-items: center;
-    gap: $pad-medium;
+    gap: $pad-small;
     margin-bottom: $pad-medium;
 
     // Scoped to a direct child so this doesn't also catch the plus icon
diff --git a/frontend/pages/hosts/details/DeviceUserPage/components/SettingUpYourDevice/SettingUpYourDevice.tsx b/frontend/pages/hosts/details/DeviceUserPage/components/SettingUpYourDevice/SettingUpYourDevice.tsx
index fcfccd70d0..1be117b2a2 100644
--- a/frontend/pages/hosts/details/DeviceUserPage/components/SettingUpYourDevice/SettingUpYourDevice.tsx
+++ b/frontend/pages/hosts/details/DeviceUserPage/components/SettingUpYourDevice/SettingUpYourDevice.tsx
@@ -101,7 +101,6 @@ const SettingUpYourDevice = ({
               hideText="Details"
               caretPosition="after"
               onClick={() => setShowError(!showError)}
-              variant="secondary"
             />
             {showError && (
               <Textarea variant="code">{failedSoftware.error}</Textarea>
diff --git a/frontend/pages/hosts/details/cards/HostHeader/_styles.scss b/frontend/pages/hosts/details/cards/HostHeader/_styles.scss
index 6d98620901..c7487f7018 100644
--- a/frontend/pages/hosts/details/cards/HostHeader/_styles.scss
+++ b/frontend/pages/hosts/details/cards/HostHeader/_styles.scss
@@ -73,6 +73,6 @@
     display: flex;
     flex-direction: row;
     align-items: center;
-    gap: $pad-medium;
+    gap: $gap-action-elements;
   }
 }
diff --git a/frontend/pages/policies/ManagePoliciesPage/_styles.scss b/frontend/pages/policies/ManagePoliciesPage/_styles.scss
index a664134a15..12255d6821 100644
--- a/frontend/pages/policies/ManagePoliciesPage/_styles.scss
+++ b/frontend/pages/policies/ManagePoliciesPage/_styles.scss
@@ -60,10 +60,7 @@
   &__action-button-container {
     display: flex;
     align-items: flex-start;
-  }
-
-  &__advanced-button {
-    margin-right: $pad-medium;
+    gap: $gap-action-elements;
   }
 
   &__sandbox-info {
diff --git a/frontend/pages/policies/ManagePoliciesPage/components/AutomationsModal/components/CalendarEventsModal/CalendarEventsModal.tsx b/frontend/pages/policies/ManagePoliciesPage/components/AutomationsModal/components/CalendarEventsModal/CalendarEventsModal.tsx
index 463fbf0665..247af5332e 100644
--- a/frontend/pages/policies/ManagePoliciesPage/components/AutomationsModal/components/CalendarEventsModal/CalendarEventsModal.tsx
+++ b/frontend/pages/policies/ManagePoliciesPage/components/AutomationsModal/components/CalendarEventsModal/CalendarEventsModal.tsx
@@ -195,7 +195,6 @@ const CalendarEventsModal = forwardRef<
                 showText="Example payload"
                 caretPosition="after"
                 onClick={() => setShowExamplePayload(!showExamplePayload)}
-                variant="secondary"
               />
               {showExamplePayload && renderExamplePayload()}
             </>
diff --git a/frontend/pages/policies/ManagePoliciesPage/components/AutomationsModal/components/OtherWorkflowsModal/OtherWorkflowsModal.tsx b/frontend/pages/policies/ManagePoliciesPage/components/AutomationsModal/components/OtherWorkflowsModal/OtherWorkflowsModal.tsx
index 99a613353c..1cd30cf3f5 100644
--- a/frontend/pages/policies/ManagePoliciesPage/components/AutomationsModal/components/OtherWorkflowsModal/OtherWorkflowsModal.tsx
+++ b/frontend/pages/policies/ManagePoliciesPage/components/AutomationsModal/components/OtherWorkflowsModal/OtherWorkflowsModal.tsx
@@ -293,7 +293,6 @@ const OtherWorkflowsModal = forwardRef<
             showText="Show example ticket"
             caretPosition="after"
             onClick={() => setShowExampleTicket(!showExampleTicket)}
-            variant="secondary"
           />
           {showExampleTicket && (
             <ExampleTicket
@@ -377,7 +376,6 @@ const OtherWorkflowsModal = forwardRef<
               showText="Example payload"
               caretPosition="after"
               onClick={() => setShowExamplePayload(!showExamplePayload)}
-              variant="secondary"
             />
             {showExamplePayload && <ExamplePayload />}
           </>
diff --git a/frontend/pages/policies/ManagePoliciesPage/components/PoliciesTable/_styles.scss b/frontend/pages/policies/ManagePoliciesPage/components/PoliciesTable/_styles.scss
index 502bd176ae..d6e4c58870 100644
--- a/frontend/pages/policies/ManagePoliciesPage/components/PoliciesTable/_styles.scss
+++ b/frontend/pages/policies/ManagePoliciesPage/components/PoliciesTable/_styles.scss
@@ -32,7 +32,7 @@
   &__filter-dropdowns {
     display: flex;
     align-items: center;
-    gap: $pad-medium;
+    gap: $gap-table-elements;
   }
 
   &__platform-dropdown {
diff --git a/frontend/pages/queries/ManageQueriesPage/_styles.scss b/frontend/pages/queries/ManageQueriesPage/_styles.scss
index aff2d0acde..38f1bedba4 100644
--- a/frontend/pages/queries/ManageQueriesPage/_styles.scss
+++ b/frontend/pages/queries/ManageQueriesPage/_styles.scss
@@ -42,7 +42,7 @@
 
   &__action-button-container {
     display: flex;
-    gap: $pad-small;
+    gap: $gap-action-elements;
   }
 
   .queries-table {
diff --git a/frontend/pages/queries/details/QueryDetailsPage/_styles.scss b/frontend/pages/queries/details/QueryDetailsPage/_styles.scss
index 1568a35d59..dc99939fa6 100644
--- a/frontend/pages/queries/details/QueryDetailsPage/_styles.scss
+++ b/frontend/pages/queries/details/QueryDetailsPage/_styles.scss
@@ -20,7 +20,7 @@
     display: flex;
     justify-content: flex-end;
     min-width: max-content;
-    gap: $pad-medium;
+    gap: $gap-action-elements;
   }
 
   &__query-name {
diff --git a/frontend/pages/queries/edit/components/EditQueryForm/EditQueryForm.tsx b/frontend/pages/queries/edit/components/EditQueryForm/EditQueryForm.tsx
index ec2736a583..2ad456bdb8 100644
--- a/frontend/pages/queries/edit/components/EditQueryForm/EditQueryForm.tsx
+++ b/frontend/pages/queries/edit/components/EditQueryForm/EditQueryForm.tsx
@@ -538,7 +538,6 @@ const EditQueryForm = ({
           hideText="Hide SQL"
           showText="Show SQL"
           onClick={() => setShowQueryEditor(!showQueryEditor)}
-          variant="secondary"
         />
       )}
       {showQueryEditor && (
@@ -782,7 +781,6 @@ const EditQueryForm = ({
                 showText="Advanced options"
                 caretPosition="after"
                 onClick={toggleAdvancedOptions}
-                variant="secondary"
               />
               {showAdvancedOptions && (
                 <>
diff --git a/frontend/pages/queries/edit/components/SaveNewQueryModal/SaveNewQueryModal.tsx b/frontend/pages/queries/edit/components/SaveNewQueryModal/SaveNewQueryModal.tsx
index 290180a5e9..177eeed267 100644
--- a/frontend/pages/queries/edit/components/SaveNewQueryModal/SaveNewQueryModal.tsx
+++ b/frontend/pages/queries/edit/components/SaveNewQueryModal/SaveNewQueryModal.tsx
@@ -339,7 +339,6 @@ const SaveNewQueryModal = ({
           showText="Advanced options"
           caretPosition="after"
           onClick={toggleAdvancedOptions}
-          variant="secondary"
         />
         {showAdvancedOptions && (
           <>
diff --git a/frontend/pages/queries/live/LiveQueryPage/_styles.scss b/frontend/pages/queries/live/LiveQueryPage/_styles.scss
index 5d89b12e51..3b6761cb8f 100644
--- a/frontend/pages/queries/live/LiveQueryPage/_styles.scss
+++ b/frontend/pages/queries/live/LiveQueryPage/_styles.scss
@@ -52,13 +52,9 @@
     margin-top: 30px;
     display: flex;
     align-items: center;
-
-    button:not(:first-of-type) {
-      margin-left: 16px;
-    }
+    gap: $gap-action-elements;
   }
   &__targets-total-count {
-    margin-left: 16px;
     font-size: $x-small;
     display: flex;
     align-items: center;
diff --git a/frontend/styles/global/_global.scss b/frontend/styles/global/_global.scss
index 25f7c49004..a724f5ffba 100644
--- a/frontend/styles/global/_global.scss
+++ b/frontend/styles/global/_global.scss
@@ -138,12 +138,12 @@ form,
   .button-wrap {
     margin: 0;
     display: flex;
-    gap: $pad-medium;
+    gap: $gap-action-elements;
 
     &--center {
       margin: 0;
       display: flex;
-      gap: $pad-medium;
+      gap: $gap-action-elements;
       justify-content: center;
     }
   }
diff --git a/frontend/styles/var/padding.scss b/frontend/styles/var/padding.scss
index db287c8edb..f54d2fafed 100644
--- a/frontend/styles/var/padding.scss
+++ b/frontend/styles/var/padding.scss
@@ -19,7 +19,8 @@ $gap-page-component-inner-responsiveness: $pad-smedium;
 $gap-form: $pad-large;
 $gap-form-component: $pad-small;
 $gap-data-sets: $pad-medium;
-$gap-table-elements: $pad-medium;
+$gap-table-elements: $pad-small;
+$gap-action-elements: $pad-small;
 $gap-modal-component: $pad-large;
 $gap-icon-text: $pad-small;
 $table-cell-padding: $pad-large;