From a87d29fce7508bb40b454f9706f7ed93c38fca24 Mon Sep 17 00:00:00 2001
From: Matthew Birtch <mattbirtch@gmail.com>
Date: Tue, 3 Jun 2025 15:37:20 -0400
Subject: [PATCH] Remove redundant button styles and use proper button classes
 (#30929)

* remove redundant button styles and use proper button classes

* remove import for contact_us css

* fix view plans button to be xs

* tweak to disabled state on save button in floating bar

* change contact us to tertiary button like before

* updated btn-full on free edition right panel

* update contact button to be primary when shown in the trial card

* fix issue with hover state on save changes panel error state

* fix style lint issues

* update snapshots

* fixed a few license page buttons

* fix lint issue

* Update index.test.tsx.snap

* add empty end lines

* fixed scope of css so it doesn't affect product switcher

* upate button font size for xs, update bg color for button in announce bar

* fix lint error

* update missed cancel buttons to use proper classes

* fixed text spec to find the right button

* updated snapshots

* fix issue with test on cancel button

* update snapshots
---
 .../system_console/team_guest_channel_spec.js |  2 +-
 .../incoming_webhook_is_image_only_spec.js    |  2 +-
 .../setup_incoming_webhook_spec.js            |  2 +-
 .../__snapshots__/actions_menu.test.tsx.snap  |  4 +-
 .../components/actions_menu/actions_menu.scss | 29 ++-----
 .../components/actions_menu/actions_menu.tsx  |  4 +-
 .../billing_subscriptions.scss                | 80 ------------------
 .../cancel_subscription.tsx                   |  2 +-
 .../contact_sales_card.tsx                    |  4 +-
 .../billing_summary/billing_summary.scss      | 46 ----------
 .../billing_summary/billing_summary.tsx       |  2 +-
 .../billing/company_info_display.scss         | 44 ----------
 .../billing/company_info_display.tsx          |  4 +-
 .../billing/company_info_edit.tsx             |  2 +-
 .../billing/plan_details/plan_details.scss    | 22 -----
 .../custom_policy_form.test.tsx.snap          |  4 +-
 .../custom_policy_form/custom_policy_form.tsx |  2 +-
 .../global_policy_form.test.tsx.snap          |  2 +-
 .../global_policy_form/global_policy_form.tsx |  2 +-
 .../feature_discovery/feature_discovery.scss  | 41 ---------
 .../feature_discovery/feature_discovery.tsx   |  4 +-
 .../add_edit_ip_filter_modal.scss             | 46 ----------
 .../ip_filtering/add_edit_ip_filter_modal.tsx |  4 +-
 .../ip_filtering/delete_confirmation.scss     | 17 ----
 .../ip_filtering/delete_confirmation.tsx      |  4 +-
 .../edit_section/edit_section_header.tsx      |  2 +-
 .../edit_section_ip_not_in_range_panel.tsx    |  2 +-
 .../edit_section_no_filters_panel.tsx         |  2 +-
 .../ip_filtering/save_confirmation_modal.scss | 17 ----
 .../ip_filtering/save_confirmation_modal.tsx  |  4 +-
 .../enterprise_edition.scss                   | 41 +--------
 .../enterprise_edition_left_panel.tsx         |  6 +-
 .../enterprise_edition_right_panel.tsx        |  1 -
 .../license_settings/license_settings.scss    | 13 +--
 .../modals/confirm_license_removal_modal.tsx  |  2 +-
 .../renew_license_card.scss                   | 83 ++++++++++---------
 .../renew_license_card/renew_license_card.tsx |  2 +-
 .../starter_edition/starter_edition.scss      | 24 ------
 .../starter_edition/starter_left_panel.tsx    |  4 +-
 .../starter_edition/starter_right_panel.tsx   |  1 +
 .../trial_license_card.scss                   |  6 --
 .../trial_license_card/trial_license_card.tsx |  2 +-
 ...ssion_system_scheme_settings.test.tsx.snap |  4 +
 .../permission_system_scheme_settings.tsx     |  1 +
 ...mission_team_scheme_settings.test.tsx.snap | 15 ++--
 .../permission_team_scheme_settings.tsx       |  3 +-
 .../__snapshots__/cta_buttons.test.tsx.snap   |  4 +-
 .../workspace-optimization/cta_buttons.tsx    |  4 +-
 .../contact_sales/contact_us.scss             | 18 ----
 .../contact_sales/contact_us.tsx              |  4 +-
 .../announcement_bar.tsx                      |  2 +
 .../__snapshots__/index.test.tsx.snap         |  8 +-
 .../purchase_link/purchase_link.scss          | 11 ---
 .../purchase_link/purchase_link.tsx           |  2 +-
 webapp/channels/src/components/copy_text.tsx  |  2 +-
 .../emoji_picker_custom_emoji_button.tsx      |  2 +-
 .../start_trial_form_modal.test.tsx.snap      |  2 +-
 .../air_gapped_modal.scss                     | 23 -----
 .../air_gapped_modal.tsx                      |  2 +-
 .../start_trial_form_modal/index.tsx          |  2 +-
 .../start_trial_form_modal.scss               | 23 -----
 .../modals/components/save_changes_panel.scss | 61 +++++---------
 .../modals/components/save_changes_panel.tsx  |  4 +-
 .../sass/components/_announcement-bar.scss    | 22 ++---
 .../src/sass/components/_buttons.scss         |  2 +-
 .../components/src/tour_tip/tour_tip.scss     |  8 --
 66 files changed, 162 insertions(+), 654 deletions(-)
 delete mode 100644 webapp/channels/src/components/announcement_bar/contact_sales/contact_us.scss

diff --git a/e2e-tests/cypress/tests/integration/channels/enterprise/system_console/team_guest_channel_spec.js b/e2e-tests/cypress/tests/integration/channels/enterprise/system_console/team_guest_channel_spec.js
index 2c56e8bf65..d14c4bebcf 100644
--- a/e2e-tests/cypress/tests/integration/channels/enterprise/system_console/team_guest_channel_spec.js
+++ b/e2e-tests/cypress/tests/integration/channels/enterprise/system_console/team_guest_channel_spec.js
@@ -89,7 +89,7 @@ describe('Team Scheme Guest Permissions Test', () => {
         // * Ensure all checkboxes have the correct unchecked state
         verifyAllGuestPermissions(false);
 
-        cy.get('.cancel-button').click();
+        cy.findByTestId('permission-scheme-cancel-button').should('be.visible').click();
 
         //Clean up - Delete scheme
         cy.findByText(`TestScheme-${randomId}`).siblings('.actions').children('.delete-button').click().wait(TIMEOUTS.HALF_SEC);
diff --git a/e2e-tests/cypress/tests/integration/channels/integrations/incoming_webhook/incoming_webhook_is_image_only_spec.js b/e2e-tests/cypress/tests/integration/channels/integrations/incoming_webhook/incoming_webhook_is_image_only_spec.js
index a48e4c1c8a..5d77c0b290 100644
--- a/e2e-tests/cypress/tests/integration/channels/integrations/incoming_webhook/incoming_webhook_is_image_only_spec.js
+++ b/e2e-tests/cypress/tests/integration/channels/integrations/incoming_webhook/incoming_webhook_is_image_only_spec.js
@@ -62,7 +62,7 @@ describe('Incoming webhook', () => {
                 // * Verify that the hook ID in the URL matches with the one shown in a page
                 // * Verify that the copy link is shown.
                 cy.findByText(hookUrl).should('be.visible').
-                    parent().siblings('.fa-copy').should('be.visible');
+                    parent().siblings('[data-testid="copyText"]').should('be.visible');
 
                 // # Click "Done" and verify that it redirects to incoming webhooks URL
                 cy.findByText('Done').click();
diff --git a/e2e-tests/cypress/tests/integration/channels/integrations/incoming_webhook/setup_incoming_webhook_spec.js b/e2e-tests/cypress/tests/integration/channels/integrations/incoming_webhook/setup_incoming_webhook_spec.js
index 8ad451b039..eb1156f33f 100644
--- a/e2e-tests/cypress/tests/integration/channels/integrations/incoming_webhook/setup_incoming_webhook_spec.js
+++ b/e2e-tests/cypress/tests/integration/channels/integrations/incoming_webhook/setup_incoming_webhook_spec.js
@@ -64,7 +64,7 @@ describe('Incoming webhook', () => {
                 // * Verify that the hook ID in the URL matches with the one shown in a page
                 // * Verify that the copy link is shown.
                 cy.findByText(hookUrl).should('be.visible').
-                    parent().siblings('.fa-copy').should('be.visible');
+                    parent().siblings('[data-testid="copyText"]').should('be.visible');
 
                 // # Click "Done" and verify that it redirects to incoming webhooks URL
                 cy.findByText('Done').click();
diff --git a/webapp/channels/src/components/actions_menu/__snapshots__/actions_menu.test.tsx.snap b/webapp/channels/src/components/actions_menu/__snapshots__/actions_menu.test.tsx.snap
index 5863912c1c..ace3a145f9 100644
--- a/webapp/channels/src/components/actions_menu/__snapshots__/actions_menu.test.tsx.snap
+++ b/webapp/channels/src/components/actions_menu/__snapshots__/actions_menu.test.tsx.snap
@@ -182,12 +182,12 @@ exports[`components/actions_menu/ActionsMenu no actions - sysadmin - menu should
         className="visit-marketplace"
       >
         <button
-          className="btn btn-primary visit-marketplace-button"
+          className="btn btn-primary btn-sm visit-marketplace-button"
           id="marketPlaceButton"
           onClick={[Function]}
         >
           <ActionsMenuIcon
-            name="icon-view-grid-plus-outline visit-marketplace-button-icon"
+            name="icon-view-grid-plus-outline"
           />
           <span
             className="visit-marketplace-button-text"
diff --git a/webapp/channels/src/components/actions_menu/actions_menu.scss b/webapp/channels/src/components/actions_menu/actions_menu.scss
index a1a6b6b833..c526fbfe34 100644
--- a/webapp/channels/src/components/actions_menu/actions_menu.scss
+++ b/webapp/channels/src/components/actions_menu/actions_menu.scss
@@ -1,34 +1,19 @@
 .visit-marketplace-text {
-    margin: 12px;
-    font-family: 'Open Sans';
-    font-size: 14px;
-    font-weight: 400;
-    line-height: 20px;
+    padding: 8px 16px 12px 16px;
     text-align: center;
 }
 
 .visit-marketplace {
-    top: 1px;
-    padding-top: 4px;
     padding-right: 16px;
-    padding-bottom: 16px;
+    padding-bottom: 8px;
     padding-left: 16px;
-    font-size: 12px;
-    text-align: center;
 }
 
 .visit-marketplace-button {
-    border-radius: 4px;
-}
+    width: 100%;
 
-.visit-marketplace-button-text {
-    align-items: center;
-    font-size: 12px;
-    font-weight: 600;
-    line-height: 9px;
-}
-
-.visit-marketplace-button-icon {
-    margin-right: 5px;
-    font-size: 14.4px;
+    .Menu {
+        padding: 8px 0;
+        text-align: left;
+    }
 }
diff --git a/webapp/channels/src/components/actions_menu/actions_menu.tsx b/webapp/channels/src/components/actions_menu/actions_menu.tsx
index 1ca20cbd89..e538587fa2 100644
--- a/webapp/channels/src/components/actions_menu/actions_menu.tsx
+++ b/webapp/channels/src/components/actions_menu/actions_menu.tsx
@@ -212,10 +212,10 @@ export class ActionMenuClass extends React.PureComponent<Props, State> {
                 <div className='visit-marketplace' >
                     <button
                         id='marketPlaceButton'
-                        className='btn btn-primary visit-marketplace-button'
+                        className='btn btn-primary btn-sm visit-marketplace-button'
                         onClick={this.handleOpenMarketplace}
                     >
-                        <ActionsMenuIcon name='icon-view-grid-plus-outline visit-marketplace-button-icon'/>
+                        <ActionsMenuIcon name='icon-view-grid-plus-outline'/>
                         <span className='visit-marketplace-button-text'>
                             <FormattedMessage
                                 id='post_info.actions.visitMarketplace'
diff --git a/webapp/channels/src/components/admin_console/billing/billing_subscriptions/billing_subscriptions.scss b/webapp/channels/src/components/admin_console/billing/billing_subscriptions/billing_subscriptions.scss
index 33571b4ede..470d70966d 100644
--- a/webapp/channels/src/components/admin_console/billing/billing_subscriptions/billing_subscriptions.scss
+++ b/webapp/channels/src/components/admin_console/billing/billing_subscriptions/billing_subscriptions.scss
@@ -91,33 +91,7 @@
 
 .UpgradeMattermostCloud__upgradeButton {
     width: 100%;
-    padding: 13px 0;
-    border: none;
-    border-radius: 4px;
     margin-top: 16px;
-    background: var(--button-bg);
-    box-shadow: inset 0 0 0 1px var(--sys-button-bg);
-    color: var(--button-color);
-    font-size: 14px;
-    font-weight: 600;
-    line-height: 14px;
-
-    &:hover:not(.disabled) {
-        background: linear-gradient(0deg, rgba(var(--center-channel-color-rgb), 0.16), rgba(var(--center-channel-color-rgb), 0.16)), var(--button-bg);
-    }
-
-    &:active {
-        background: linear-gradient(0deg, rgba(var(--center-channel-color-rgb), 0.32), rgba(var(--center-channel-color-rgb), 0.32)), var(--button-bg);
-    }
-
-    &:focus {
-        box-shadow: inset 0 0 0 2px var(--sidebar-text-active-border);
-    }
-
-    &.disabled {
-        background: rgba(var(--center-channel-color-rgb), 0.08);
-        color: rgba(var(--center-channel-color-rgb), 0.32);
-    }
 }
 
 .PrivateCloudCard {
@@ -153,34 +127,7 @@
 
 .PrivateCloudCard__actionButton {
     display: block;
-
-    padding: 13px 20px;
-    border: none;
-    border-radius: 4px;
     margin-top: 16px;
-    background: var(--sys-center-channel-bg);
-    box-shadow: inset 0 0 0 1px var(--sys-button-bg);
-    color: var(--sys-button-bg);
-    font-size: 14px;
-    font-weight: 600;
-    line-height: 14px;
-
-    @include utils-mixins.fit-content;
-
-    &:hover:not(.disabled) {
-        background: rgba(var(--sys-button-bg-rgb), 0.04);
-        text-decoration: none;
-    }
-
-    &:active {
-        background: rgba(var(--sys-button-bg-rgb), 0.08);
-        text-decoration: none;
-    }
-
-    &:focus {
-        box-shadow: inset 0 0 0 2px var(--sys-button-bg);
-        text-decoration: none;
-    }
 }
 
 .cancelSubscriptionSection {
@@ -209,32 +156,5 @@
 
 .cancelSubscriptionSection__contactUs {
     display: block;
-
-    padding: 13px 20px;
-    border-radius: 4px;
     margin-top: 16px;
-    box-shadow: inset 0 0 0 1px var(--sys-dnd-indicator);
-    color: var(--sys-dnd-indicator);
-    font-size: 12px;
-    font-weight: 600;
-    line-height: 9.5px;
-
-    @include utils-mixins.fit-content;
-
-    &:hover:not(.disabled) {
-        background: rgba(var(--sys-dnd-indicator-rgb), 0.04);
-        color: var(--sys-dnd-indicator);
-        text-decoration: none;
-    }
-
-    &:active {
-        background: rgba(var(--sys-dnd-indicator-rgb), 0.08);
-        text-decoration: none;
-    }
-
-    &:focus {
-        box-shadow: inset 0 0 0 2px var(--sys-dnd-indicator);
-        color: var(--sys-dnd-indicator);
-        text-decoration: none;
-    }
 }
diff --git a/webapp/channels/src/components/admin_console/billing/billing_subscriptions/cancel_subscription.tsx b/webapp/channels/src/components/admin_console/billing/billing_subscriptions/cancel_subscription.tsx
index 3c7a4d44f7..8f8b69de1c 100644
--- a/webapp/channels/src/components/admin_console/billing/billing_subscriptions/cancel_subscription.tsx
+++ b/webapp/channels/src/components/admin_console/billing/billing_subscriptions/cancel_subscription.tsx
@@ -31,7 +31,7 @@ const CancelSubscription = () => {
                 <ExternalLink
                     location='cancel_subscription'
                     href={contactSupportURL}
-                    className='cancelSubscriptionSection__contactUs'
+                    className='btn btn-secondary btn-sm btn-danger cancelSubscriptionSection__contactUs'
                     onClick={() => trackEvent('cloud_admin', 'click_contact_us')}
                 >
                     <FormattedMessage
diff --git a/webapp/channels/src/components/admin_console/billing/billing_subscriptions/contact_sales_card.tsx b/webapp/channels/src/components/admin_console/billing/billing_subscriptions/contact_sales_card.tsx
index 01d5003439..49a33fba0e 100644
--- a/webapp/channels/src/components/admin_console/billing/billing_subscriptions/contact_sales_card.tsx
+++ b/webapp/channels/src/components/admin_console/billing/billing_subscriptions/contact_sales_card.tsx
@@ -145,7 +145,7 @@ const ContactSalesCard = (props: Props) => {
                     <ExternalLink
                         location='contact_sales_card'
                         href={contactSalesLink}
-                        className='PrivateCloudCard__actionButton'
+                        className='btn btn-tertiary PrivateCloudCard__actionButton'
                         onClick={() => trackEvent('cloud_admin', 'click_contact_sales')}
                     >
                         <FormattedMessage
@@ -165,7 +165,7 @@ const ContactSalesCard = (props: Props) => {
                                 openSalesLink();
                             }
                         }}
-                        className='PrivateCloudCard__actionButton'
+                        className='btn btn-tertiary PrivateCloudCard__actionButton'
                     >
                         {subscriptionPlan === CloudProducts.STARTER ? (
                             <FormattedMessage
diff --git a/webapp/channels/src/components/admin_console/billing/billing_summary/billing_summary.scss b/webapp/channels/src/components/admin_console/billing/billing_summary/billing_summary.scss
index 11bbf514df..9de52a3c0a 100644
--- a/webapp/channels/src/components/admin_console/billing/billing_summary/billing_summary.scss
+++ b/webapp/channels/src/components/admin_console/billing/billing_summary/billing_summary.scss
@@ -147,53 +147,7 @@
 }
 
 .BillingSummary__lastInvoice-downloadButton {
-    display: flex;
     width: 100%;
-    align-items: center;
-    justify-content: center;
-    padding: 11px 20px;
-    border-radius: 4px;
-    background: var(--sys-button-bg);
-    color: var(--sys-button-color);
-
-    &:hover:not(.disabled) {
-        background: linear-gradient(0deg, rgba(var(--sys-center-channel-color-rgb), 0.16), rgba(var(--sys-center-channel-color-rgb), 0.16)), var(--sys-button-bg);
-        color: var(--sys-button-color);
-        text-decoration: none;
-    }
-
-    &:active {
-        background: linear-gradient(0deg, rgba(var(--sys-center-channel-color-rgb), 0.32), rgba(var(--sys-center-channel-color-rgb), 0.32)), var(--sys-button-bg);
-        color: var(--sys-button-color);
-        text-decoration: none;
-    }
-
-    &:focus {
-        box-shadow: inset 0 0 0 2px var(--sys-sidebar-text-active-border);
-        color: var(--sys-button-color);
-        text-decoration: none;
-    }
-
-    &.disabled {
-        background: rgba(var(--sys-center-channel-color-rgb), 0.08);
-        color: rgba(var(--sys-center-channel-color-rgb), 0.32);
-    }
-
-    > i {
-        font-size: 18px;
-        line-height: 21px;
-
-        &::before {
-            margin: 0;
-        }
-    }
-
-    > span {
-        margin-left: 6px;
-        font-size: 14px;
-        font-weight: 600;
-        line-height: 14px;
-    }
 }
 
 .BillingSummary__lastInvoice-billingHistory {
diff --git a/webapp/channels/src/components/admin_console/billing/billing_summary/billing_summary.tsx b/webapp/channels/src/components/admin_console/billing/billing_summary/billing_summary.tsx
index b7e0006231..832b0b0f42 100644
--- a/webapp/channels/src/components/admin_console/billing/billing_summary/billing_summary.tsx
+++ b/webapp/channels/src/components/admin_console/billing/billing_summary/billing_summary.tsx
@@ -55,7 +55,7 @@ export const noBillingHistory = (
         <ExternalLink
             location='billing_summary'
             href={CloudLinks.BILLING_DOCS}
-            className='BillingSummary__noBillingHistory-link'
+            className='btn btn-primary BillingSummary__noBillingHistory-link'
             onClick={() => trackEvent('cloud_admin', 'click_how_billing_works', {screen: 'subscriptions'})}
         >
             <FormattedMessage
diff --git a/webapp/channels/src/components/admin_console/billing/company_info_display.scss b/webapp/channels/src/components/admin_console/billing/company_info_display.scss
index 244a062816..c7dfeef300 100644
--- a/webapp/channels/src/components/admin_console/billing/company_info_display.scss
+++ b/webapp/channels/src/components/admin_console/billing/company_info_display.scss
@@ -29,51 +29,7 @@
 }
 
 .CompanyInfoDisplay__addInfoButton {
-    display: flex;
     align-items: center;
-    padding: 8px 16px;
-    border-radius: 4px;
-    background: var(--sys-button-bg);
-    color: var(--sys-button-color);
-
-    &:hover:not(.disabled) {
-        background: linear-gradient(0deg, rgba(var(--sys-center-channel-color-rgb), 0.16), rgba(var(--sys-center-channel-color-rgb), 0.16)), var(--sys-button-bg);
-        color: var(--sys-button-color);
-        text-decoration: none;
-    }
-
-    &:active {
-        background: linear-gradient(0deg, rgba(var(--sys-center-channel-color-rgb), 0.32), rgba(var(--sys-center-channel-color-rgb), 0.32)), var(--sys-button-bg);
-        color: var(--sys-button-color);
-        text-decoration: none;
-    }
-
-    &:focus {
-        box-shadow: inset 0 0 0 2px var(--sys-sidebar-text-active-border);
-        color: var(--sys-button-color);
-        text-decoration: none;
-    }
-
-    &.disabled {
-        background: rgba(var(--sys-center-channel-color-rgb), 0.08);
-        color: rgba(var(--sys-center-channel-color-rgb), 0.32);
-    }
-
-    > i {
-        font-size: 14.4px;
-        line-height: 17px;
-
-        &::before {
-            margin: 0;
-        }
-    }
-
-    > span {
-        margin-left: 4px;
-        font-size: 12px;
-        font-weight: 600;
-        line-height: 9px;
-    }
 }
 
 .CompanyInfoDisplay__noCompanyInfo {
diff --git a/webapp/channels/src/components/admin_console/billing/company_info_display.tsx b/webapp/channels/src/components/admin_console/billing/company_info_display.tsx
index baf4d81f0e..ade96c1687 100644
--- a/webapp/channels/src/components/admin_console/billing/company_info_display.tsx
+++ b/webapp/channels/src/components/admin_console/billing/company_info_display.tsx
@@ -18,7 +18,7 @@ const addInfoButton = (
     <div className='CompanyInfoDisplay__addInfo'>
         <BlockableLink
             to='/admin_console/billing/company_info_edit'
-            className='CompanyInfoDisplay__addInfoButton'
+            className='btn btn-primary CompanyInfoDisplay__addInfoButton'
             onClick={() => trackEvent('cloud_admin', 'click_add_company_info')}
         >
             <i className='icon icon-plus'/>
@@ -44,7 +44,7 @@ const noCompanyInfoSection = (
         </div>
         <BlockableLink
             to='/admin_console/billing/company_info_edit'
-            className='CompanyInfoDisplay__noCompanyInfo-link'
+            className='btn btn-primary CompanyInfoDisplay__noCompanyInfo-link'
             onClick={() => trackEvent('cloud_admin', 'click_add_company_info')}
         >
             <FormattedMessage
diff --git a/webapp/channels/src/components/admin_console/billing/company_info_edit.tsx b/webapp/channels/src/components/admin_console/billing/company_info_edit.tsx
index 4d6efb3a1f..c1f5dbadda 100644
--- a/webapp/channels/src/components/admin_console/billing/company_info_edit.tsx
+++ b/webapp/channels/src/components/admin_console/billing/company_info_edit.tsx
@@ -284,7 +284,7 @@ const CompanyInfoEdit: React.FC<Props> = () => {
                     )}
                 />
                 <BlockableLink
-                    className='cancel-button'
+                    className='btn btn-tertiary'
                     to='/admin_console/billing/company_info'
                 >
                     <FormattedMessage
diff --git a/webapp/channels/src/components/admin_console/billing/plan_details/plan_details.scss b/webapp/channels/src/components/admin_console/billing/plan_details/plan_details.scss
index 17873114b0..fef2b572fe 100644
--- a/webapp/channels/src/components/admin_console/billing/plan_details/plan_details.scss
+++ b/webapp/channels/src/components/admin_console/billing/plan_details/plan_details.scss
@@ -33,28 +33,6 @@
 .PlanDetails__viewPlansButton {
     display: block;
     margin-left: auto;
-
-    &.btn {
-        padding: 11px 16px;
-        border-radius: 4px;
-        background: variables.$primary-color;
-        color: variables.$white;
-        font-size: 12px;
-        font-weight: bold;
-        line-height: 9.5px;
-
-        &:focus,
-        &:active,
-        &:focus:active {
-            border-color: transparent;
-            outline: none;
-        }
-
-        &.btn-secondary {
-            background: rgba(var(--button-bg-rgb), 0.08);
-            color: var(--button-bg);
-        }
-    }
 }
 
 .PlanDetails__planName {
diff --git a/webapp/channels/src/components/admin_console/data_retention_settings/custom_policy_form/__snapshots__/custom_policy_form.test.tsx.snap b/webapp/channels/src/components/admin_console/data_retention_settings/custom_policy_form/__snapshots__/custom_policy_form.test.tsx.snap
index ecd975ae1d..bb4ea4afab 100644
--- a/webapp/channels/src/components/admin_console/data_retention_settings/custom_policy_form/__snapshots__/custom_policy_form.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/data_retention_settings/custom_policy_form/__snapshots__/custom_policy_form.test.tsx.snap
@@ -255,7 +255,7 @@ exports[`components/admin_console/data_retention_settings/custom_policy_form sho
       saving={false}
     />
     <Connect(Component)
-      className="cancel-button"
+      className="btn btn-tertiary"
       to="/admin_console/compliance/data_retention_settings"
     >
       <MemoizedFormattedMessage
@@ -519,7 +519,7 @@ exports[`components/admin_console/data_retention_settings/custom_policy_form sho
       saving={false}
     />
     <Connect(Component)
-      className="cancel-button"
+      className="btn btn-tertiary"
       to="/admin_console/compliance/data_retention_settings"
     >
       <MemoizedFormattedMessage
diff --git a/webapp/channels/src/components/admin_console/data_retention_settings/custom_policy_form/custom_policy_form.tsx b/webapp/channels/src/components/admin_console/data_retention_settings/custom_policy_form/custom_policy_form.tsx
index cb175bfeb6..f2832dffd1 100644
--- a/webapp/channels/src/components/admin_console/data_retention_settings/custom_policy_form/custom_policy_form.tsx
+++ b/webapp/channels/src/components/admin_console/data_retention_settings/custom_policy_form/custom_policy_form.tsx
@@ -537,7 +537,7 @@ export default class CustomPolicyForm extends React.PureComponent<Props, State>
                         )}
                     />
                     <BlockableLink
-                        className='cancel-button'
+                        className='btn btn-tertiary'
                         to='/admin_console/compliance/data_retention_settings'
                     >
                         <FormattedMessage
diff --git a/webapp/channels/src/components/admin_console/data_retention_settings/global_policy_form/__snapshots__/global_policy_form.test.tsx.snap b/webapp/channels/src/components/admin_console/data_retention_settings/global_policy_form/__snapshots__/global_policy_form.test.tsx.snap
index 98e3661e88..0ae0474032 100644
--- a/webapp/channels/src/components/admin_console/data_retention_settings/global_policy_form/__snapshots__/global_policy_form.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/data_retention_settings/global_policy_form/__snapshots__/global_policy_form.test.tsx.snap
@@ -252,7 +252,7 @@ exports[`components/PluginManagement should match snapshot 1`] = `
       saving={false}
     />
     <Connect(Component)
-      className="cancel-button"
+      className="btn btn-tertiary"
       to="/admin_console/compliance/data_retention_settings"
     >
       <MemoizedFormattedMessage
diff --git a/webapp/channels/src/components/admin_console/data_retention_settings/global_policy_form/global_policy_form.tsx b/webapp/channels/src/components/admin_console/data_retention_settings/global_policy_form/global_policy_form.tsx
index 3cc7c758f2..4c810087d2 100644
--- a/webapp/channels/src/components/admin_console/data_retention_settings/global_policy_form/global_policy_form.tsx
+++ b/webapp/channels/src/components/admin_console/data_retention_settings/global_policy_form/global_policy_form.tsx
@@ -273,7 +273,7 @@ export default class GlobalPolicyForm extends React.PureComponent<Props, State>
                         )}
                     />
                     <BlockableLink
-                        className='cancel-button'
+                        className='btn btn-tertiary'
                         to='/admin_console/compliance/data_retention_settings'
                     >
                         <FormattedMessage
diff --git a/webapp/channels/src/components/admin_console/feature_discovery/feature_discovery.scss b/webapp/channels/src/components/admin_console/feature_discovery/feature_discovery.scss
index 83f2488293..5d9fdfd4bc 100644
--- a/webapp/channels/src/components/admin_console/feature_discovery/feature_discovery.scss
+++ b/webapp/channels/src/components/admin_console/feature_discovery/feature_discovery.scss
@@ -40,44 +40,3 @@
     font-size: 14px;
     line-height: 20px;
 }
-
-.FeatureDiscovery .btn {
-    width: 160px;
-    height: 48px;
-    padding: 14px 0;
-    border-radius: 4px;
-    margin-right: 8px;
-    background: variables.$primary-color;
-    color: variables.$white;
-    font-size: 16px;
-    font-weight: 400;
-    line-height: 16px;
-
-    &:focus,
-    &:active,
-    &:focus:active {
-        border-color: transparent;
-        outline: none;
-    }
-
-    &:disabled {
-        border-color: transparent;
-        background: variables.$light-gray;
-        color: variables.$dark-gray;
-    }
-
-    &.btn-inactive {
-        background: rgba(var(--center-channel-color-rgb), 0.08);
-        color: rgba(var(--center-channel-color-rgb), 0.75);
-    }
-
-    &.btn-secondary {
-        border: 1px solid variables.$primary-color;
-        background: variables.$white;
-        color: variables.$primary-color;
-    }
-
-    &.btn-primary {
-        width: 190px;
-    }
-}
diff --git a/webapp/channels/src/components/admin_console/feature_discovery/feature_discovery.tsx b/webapp/channels/src/components/admin_console/feature_discovery/feature_discovery.tsx
index cac6c4c3e4..e19baafbe5 100644
--- a/webapp/channels/src/components/admin_console/feature_discovery/feature_discovery.tsx
+++ b/webapp/channels/src/components/admin_console/feature_discovery/feature_discovery.tsx
@@ -92,7 +92,7 @@ export default class FeatureDiscovery extends React.PureComponent<Props, State>
             return (
                 <div className='purchase-card'>
                     <button
-                        className='btn btn-primary'
+                        className='btn btn-primary btn-lg'
                         data-testid='featureDiscovery_primaryCallToAction'
                         onClick={() => {
                             trackEvent(TELEMETRY_CATEGORIES.SELF_HOSTED_ADMIN, 'click_enterprise_contact_sales_feature_discovery');
@@ -106,7 +106,7 @@ export default class FeatureDiscovery extends React.PureComponent<Props, State>
                     </button>
                     <ExternalLink
                         location='feature_discovery'
-                        className='btn btn-secondary'
+                        className='btn btn-tertiary btn-lg'
                         href={learnMoreURL}
                         data-testid='featureDiscovery_secondaryCallToAction'
                     >
diff --git a/webapp/channels/src/components/admin_console/ip_filtering/add_edit_ip_filter_modal.scss b/webapp/channels/src/components/admin_console/ip_filtering/add_edit_ip_filter_modal.scss
index 908f3aea11..2d53a7e728 100644
--- a/webapp/channels/src/components/admin_console/ip_filtering/add_edit_ip_filter_modal.scss
+++ b/webapp/channels/src/components/admin_console/ip_filtering/add_edit_ip_filter_modal.scss
@@ -140,29 +140,6 @@
         .buttons {
             margin-top: 32px;
             text-align: right;
-
-            .confirm-btn {
-                &:hover,
-                &:active,
-                &:focus,
-                &:active:focus {
-                    background:
-                        linear-gradient(0deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.16)),
-                        var(--button-bg);
-                }
-
-                height: 40px;
-                flex: none;
-                padding: 12px 20px;
-                border: none;
-                border-radius: 4px;
-                margin-left: 8px;
-                background: var(--button-bg);
-                color: var(--sys-button-color);
-                font-size: 14px;
-                font-weight: 600;
-                line-height: 14px;
-            }
         }
     }
 
@@ -175,28 +152,5 @@
         font-style: normal;
         font-weight: 600;
         line-height: 20px;
-
-        .btn-cancel {
-            padding: 10px 20px;
-            border: none;
-            border-radius: 4px;
-            background: var(--button-bg-8, rgba(28, 88, 217, 0.08));
-            color: var(--button-bg, #1c58d9);
-        }
-
-        .btn-save {
-            &:disabled {
-                background: rgba(63, 67, 80, 0.08);
-                color: rgba(63, 67, 80, 0.32);
-                cursor: not-allowed;
-            }
-
-            padding: 10px 20px;
-            border: none;
-            border-radius: 4px;
-            margin-left: 8px;
-            background: var(--button-bg, #1c58d9);
-            color: var(--button-color, #fff);
-        }
     }
 }
diff --git a/webapp/channels/src/components/admin_console/ip_filtering/add_edit_ip_filter_modal.tsx b/webapp/channels/src/components/admin_console/ip_filtering/add_edit_ip_filter_modal.tsx
index cf5c2dbe00..e1d2b3f410 100644
--- a/webapp/channels/src/components/admin_console/ip_filtering/add_edit_ip_filter_modal.tsx
+++ b/webapp/channels/src/components/admin_console/ip_filtering/add_edit_ip_filter_modal.tsx
@@ -126,7 +126,7 @@ export default function IPFilteringAddOrEditModal({onExited, onSave, existingRan
             <Modal.Footer>
                 <button
                     type='button'
-                    className='btn-cancel'
+                    className='btn btn-tertiary'
                     onClick={onExited}
                 >
                     {formatMessage({id: 'admin.ip_filtering.cancel', defaultMessage: 'Cancel'})}
@@ -134,7 +134,7 @@ export default function IPFilteringAddOrEditModal({onExited, onSave, existingRan
                 <button
                     data-testid='save-add-edit-button'
                     type='button'
-                    className='btn-save'
+                    className='btn btn-primary'
                     onClick={handleSave}
                     disabled={Boolean(CIDRError) || !CIDR.length || !name.length}
                 >
diff --git a/webapp/channels/src/components/admin_console/ip_filtering/delete_confirmation.scss b/webapp/channels/src/components/admin_console/ip_filtering/delete_confirmation.scss
index 3d3dc27b3e..0d0fcc4b52 100644
--- a/webapp/channels/src/components/admin_console/ip_filtering/delete_confirmation.scss
+++ b/webapp/channels/src/components/admin_console/ip_filtering/delete_confirmation.scss
@@ -88,22 +88,5 @@
         font-style: normal;
         font-weight: 600;
         line-height: 20px;
-
-        .btn-cancel {
-            padding: 10px 20px;
-            border: none;
-            border-radius: 4px;
-            background: var(--button-bg-8, rgba(28, 88, 217, 0.08));
-            color: var(--button-bg, #1c58d9);
-        }
-
-        .btn-delete {
-            padding: 10px 20px;
-            border: none;
-            border-radius: 4px;
-            margin-left: 8px;
-            background: var(--do-not-disturb-indicator, #d24b4e);
-            color: var(--button-color, #fff);
-        }
     }
 }
diff --git a/webapp/channels/src/components/admin_console/ip_filtering/delete_confirmation.tsx b/webapp/channels/src/components/admin_console/ip_filtering/delete_confirmation.tsx
index f7f7e6020c..cd9e391974 100644
--- a/webapp/channels/src/components/admin_console/ip_filtering/delete_confirmation.tsx
+++ b/webapp/channels/src/components/admin_console/ip_filtering/delete_confirmation.tsx
@@ -41,14 +41,14 @@ export default function DeleteConfirmationModal({onExited, onConfirm, filterToDe
             <Modal.Footer>
                 <button
                     type='button'
-                    className='btn-cancel'
+                    className='btn btn-tertiary'
                     onClick={onExited}
                 >
                     {formatMessage({id: 'admin.ip_filtering.cancel', defaultMessage: 'Cancel'})}
                 </button>
                 <button
                     type='button'
-                    className='btn-delete'
+                    className='btn btn-primary btn-danger'
                     onClick={() => onConfirm?.(filterToDelete!)}
                 >
                     {formatMessage({id: 'admin.ip_filtering.delete_filter', defaultMessage: 'Delete filter'})}
diff --git a/webapp/channels/src/components/admin_console/ip_filtering/edit_section/edit_section_header.tsx b/webapp/channels/src/components/admin_console/ip_filtering/edit_section/edit_section_header.tsx
index 80be7a7611..d8622c44f8 100644
--- a/webapp/channels/src/components/admin_console/ip_filtering/edit_section/edit_section_header.tsx
+++ b/webapp/channels/src/components/admin_console/ip_filtering/edit_section/edit_section_header.tsx
@@ -45,7 +45,7 @@ const EditSectionHeader = ({
                 </div>
                 <div className='AddIPFilterButton'>
                     <button
-                        className='Button'
+                        className='btn btn-primary'
                         onClick={() => {
                             setShowAddModal(true);
                         }}
diff --git a/webapp/channels/src/components/admin_console/ip_filtering/edit_section/edit_section_ip_not_in_range_panel.tsx b/webapp/channels/src/components/admin_console/ip_filtering/edit_section/edit_section_ip_not_in_range_panel.tsx
index ffac24d166..ab62d3e0c2 100644
--- a/webapp/channels/src/components/admin_console/ip_filtering/edit_section/edit_section_ip_not_in_range_panel.tsx
+++ b/webapp/channels/src/components/admin_console/ip_filtering/edit_section/edit_section_ip_not_in_range_panel.tsx
@@ -33,7 +33,7 @@ const IPNotInRangeErrorPanel = ({
                     defaultMessage='Include your IP address in at least one of the rules below to continue.'
                 />
                 <div
-                    className='Button'
+                    className='btn btn-primary'
                     onClick={() => setShowAddModal(true)}
                 >
                     <FormattedMessage
diff --git a/webapp/channels/src/components/admin_console/ip_filtering/edit_section/edit_section_no_filters_panel.tsx b/webapp/channels/src/components/admin_console/ip_filtering/edit_section/edit_section_no_filters_panel.tsx
index 425ac25d91..40e3f0b651 100644
--- a/webapp/channels/src/components/admin_console/ip_filtering/edit_section/edit_section_no_filters_panel.tsx
+++ b/webapp/channels/src/components/admin_console/ip_filtering/edit_section/edit_section_no_filters_panel.tsx
@@ -32,7 +32,7 @@ const NoFiltersPanel = ({setShowAddModal}: NoFiltersPanelProps) => (
                     add: (msg) => (
                         <div
                             onClick={() => setShowAddModal(true)}
-                            className='Button'
+                            className='btn btn-primary'
                         >
                             {msg}
                         </div>
diff --git a/webapp/channels/src/components/admin_console/ip_filtering/save_confirmation_modal.scss b/webapp/channels/src/components/admin_console/ip_filtering/save_confirmation_modal.scss
index dab0958519..8ed5f40f9d 100644
--- a/webapp/channels/src/components/admin_console/ip_filtering/save_confirmation_modal.scss
+++ b/webapp/channels/src/components/admin_console/ip_filtering/save_confirmation_modal.scss
@@ -144,22 +144,5 @@
         font-style: normal;
         font-weight: 600;
         line-height: 20px;
-
-        .btn-cancel {
-            padding: 10px 20px;
-            border: none;
-            border-radius: 4px;
-            background: var(--button-bg-8, rgba(28, 88, 217, 0.08));
-            color: var(--button-bg, #1c58d9);
-        }
-
-        .btn-delete {
-            padding: 10px 20px;
-            border: none;
-            border-radius: 4px;
-            margin-left: 8px;
-            background: var(--do-not-disturb-indicator, #d24b4e);
-            color: var(--button-color, #fff);
-        }
     }
 }
diff --git a/webapp/channels/src/components/admin_console/ip_filtering/save_confirmation_modal.tsx b/webapp/channels/src/components/admin_console/ip_filtering/save_confirmation_modal.tsx
index cb8368715f..77a9c0cd2d 100644
--- a/webapp/channels/src/components/admin_console/ip_filtering/save_confirmation_modal.tsx
+++ b/webapp/channels/src/components/admin_console/ip_filtering/save_confirmation_modal.tsx
@@ -67,7 +67,7 @@ export default function SaveConfirmationModal({onExited, onConfirm, title, subti
             <Modal.Footer>
                 <button
                     type='button'
-                    className='btn-cancel'
+                    className='btn btn-tertiary'
                     onClick={onExited}
                 >
                     {formatMessage({id: 'admin.ip_filtering.cancel', defaultMessage: 'Cancel'})}
@@ -75,7 +75,7 @@ export default function SaveConfirmationModal({onExited, onConfirm, title, subti
                 <button
                     data-testid='save-confirmation-button'
                     type='button'
-                    className='btn-delete'
+                    className='btn btn-primary btn-danger'
                     onClick={() => onConfirm?.()}
                 >
                     {buttonText}
diff --git a/webapp/channels/src/components/admin_console/license_settings/enterprise_edition/enterprise_edition.scss b/webapp/channels/src/components/admin_console/license_settings/enterprise_edition/enterprise_edition.scss
index 72d9f379f4..cb18ca2869 100644
--- a/webapp/channels/src/components/admin_console/license_settings/enterprise_edition/enterprise_edition.scss
+++ b/webapp/channels/src/components/admin_console/license_settings/enterprise_edition/enterprise_edition.scss
@@ -1,6 +1,4 @@
 .EnterpriseEditionRightPannel {
-    font-family: Metropolis;
-
     .svg-image {
         text-align: center;
 
@@ -12,6 +10,7 @@
     .upgrade-title {
         margin: 10px 0;
         color: #3f4350;
+        font-family: Metropolis, sans-serif;
         font-size: 16px;
         font-weight: 700;
         line-height: 24px;
@@ -37,18 +36,11 @@
 
     button {
         width: 100%;
-        border-radius: 4px;
         margin: 5px auto;
     }
 
     .purchase_buttons {
         margin-top: 20px;
-
-        button {
-            height: 48px !important;
-            padding: 7px 12px !important;
-            margin: 0 5px !important;
-        }
     }
 
     .upgrade-error {
@@ -57,16 +49,10 @@
 }
 
 .EnterpriseEditionLeftPanel {
-    font-family: Metropolis;
-
     &__Grid {
         display: flex;
     }
 
-    .PlanDetails__viewPlansButton {
-        height: 33px;
-    }
-
     .pre-title {
         margin-bottom: 10px;
         color: rgba(63, 67, 80, 0.75) !important;
@@ -78,6 +64,7 @@
     .title {
         display: flex;
         color: #3f4350;
+        font-family: Metropolis, sans-serif;
         font-size: 18px;
         font-weight: 700;
         gap: 4px;
@@ -91,7 +78,6 @@
 
     .license-notices {
         font-size: 12px;
-        text-align: justify;
     }
 
     .licenseInformation {
@@ -111,13 +97,6 @@
                 display: inline-block;
                 color: #3f4350;
             }
-
-            .add-seats-button {
-                border-radius: 4px;
-                font-family: 'Open Sans', sans-serif;
-                font-size: 12px;
-                font-weight: 600;
-            }
         }
 
         .licenseElements {
@@ -171,22 +150,6 @@
                     }
                 }
             }
-
-            .add-new-licence-btn {
-                display: block;
-                padding: 12px 20px;
-                border: 1px solid var(--sys-button-bg);
-                border-radius: 4px;
-                margin-top: 15px;
-                background-color: var(--sys-center-channel-bg);
-                color: var(--sys-button-bg);
-
-                span {
-                    font-size: 14px;
-                    font-weight: 600;
-                    line-height: 14px;
-                }
-            }
         }
 
         #remove-button {
diff --git a/webapp/channels/src/components/admin_console/license_settings/enterprise_edition/enterprise_edition_left_panel.tsx b/webapp/channels/src/components/admin_console/license_settings/enterprise_edition/enterprise_edition_left_panel.tsx
index 38772df21c..cb9cef78e4 100644
--- a/webapp/channels/src/components/admin_console/license_settings/enterprise_edition/enterprise_edition_left_panel.tsx
+++ b/webapp/channels/src/components/admin_console/license_settings/enterprise_edition/enterprise_edition_left_panel.tsx
@@ -77,7 +77,7 @@ const EnterpriseEditionLeftPanel = ({
         <button
             id='enterprise_edition_view_plans'
             onClick={() => openPricingModal({trackingLocation: 'license_settings_view_plans'})}
-            className='btn btn-secondary PlanDetails__viewPlansButton'
+            className='btn btn-tertiary btn-sm PlanDetails__viewPlansButton'
         >
             {formatMessage({
                 id: 'workspace_limits.menu_limit.view_plans',
@@ -127,7 +127,7 @@ const EnterpriseEditionLeftPanel = ({
                 <div className='license-details-top'>
                     <span className='title'>{'License details'}</span>
                     <button
-                        className='add-seats-button btn btn-primary'
+                        className='btn btn-primary btn-sm add-seats-button '
                         onClick={openContactSales}
                     >
                         <FormattedMessage
@@ -297,7 +297,7 @@ const renderAddNewLicenseButton = (
     return (
         <>
             <button
-                className='add-new-licence-btn'
+                className='btn btn-tertiary add-new-licence-btn'
                 onClick={() => fileInputRef.current?.click()}
             >
                 <FormattedMessage
diff --git a/webapp/channels/src/components/admin_console/license_settings/enterprise_edition/enterprise_edition_right_panel.tsx b/webapp/channels/src/components/admin_console/license_settings/enterprise_edition/enterprise_edition_right_panel.tsx
index 226b9f6cda..a185ad4d13 100644
--- a/webapp/channels/src/components/admin_console/license_settings/enterprise_edition/enterprise_edition_right_panel.tsx
+++ b/webapp/channels/src/components/admin_console/license_settings/enterprise_edition/enterprise_edition_right_panel.tsx
@@ -83,7 +83,6 @@ const EnterpriseEditionRightPanel = ({
         <div className='purchase-card'>
             <ContactUsButton
                 eventID='post_trial_contact_sales'
-                customClass='light-blue-btn'
             />
         </div>
     );
diff --git a/webapp/channels/src/components/admin_console/license_settings/license_settings.scss b/webapp/channels/src/components/admin_console/license_settings/license_settings.scss
index 8064519963..e2cc4b6ab8 100644
--- a/webapp/channels/src/components/admin_console/license_settings/license_settings.scss
+++ b/webapp/channels/src/components/admin_console/license_settings/license_settings.scss
@@ -45,17 +45,12 @@
     }
 }
 
-.light-blue-btn {
-    height: 40px;
-    padding: 10px 24px !important;
-    border: none !important;
-    background: rgba(28, 88, 217, 0.08) !important;
-    color: #1c58d9 !important;
-    font-weight: 700;
-}
-
 .admin-console__banner_section {
     margin-bottom: 20px;
+
+    &:empty {
+        margin-bottom: 0px;
+    }
 }
 
 .current-plan-legend {
diff --git a/webapp/channels/src/components/admin_console/license_settings/modals/confirm_license_removal_modal.tsx b/webapp/channels/src/components/admin_console/license_settings/modals/confirm_license_removal_modal.tsx
index 52894127dd..540a772021 100644
--- a/webapp/channels/src/components/admin_console/license_settings/modals/confirm_license_removal_modal.tsx
+++ b/webapp/channels/src/components/admin_console/license_settings/modals/confirm_license_removal_modal.tsx
@@ -79,7 +79,7 @@ const ConfirmLicenseRemovalModal: React.FC<Props> = (props: Props): JSX.Element
                 <div className='content-footer'>
                     <button
                         onClick={handleOnClose}
-                        className='btn light-blue-btn'
+                        className='btn btn-tertiary'
                         id='cancel-removal'
                     >
                         <FormattedMessage
diff --git a/webapp/channels/src/components/admin_console/license_settings/renew_license_card/renew_license_card.scss b/webapp/channels/src/components/admin_console/license_settings/renew_license_card/renew_license_card.scss
index 9f571e1752..202501ef5e 100644
--- a/webapp/channels/src/components/admin_console/license_settings/renew_license_card/renew_license_card.scss
+++ b/webapp/channels/src/components/admin_console/license_settings/renew_license_card/renew_license_card.scss
@@ -1,4 +1,44 @@
 .RenewLicenseCard {
+    &__buttons {
+        display: flex;
+    }
+
+    &__text {
+        &-title {
+            margin-bottom: 5px;
+            color: var(--sys-sidebar-text-active-border);
+            font-family: 'Open Sans', sans-serif;
+            font-size: 18px;
+            font-weight: 600;
+            line-height: 24px;
+
+            &.critical {
+                color: var(--sys-error-text);
+            }
+        }
+
+        &-description {
+            margin-bottom: 5px;
+            color: var(--sys-center-channel-color);
+            font-family: 'Open Sans', sans-serif;
+            font-size: 14px;
+            line-height: 30px;
+
+            &.bolder {
+                font-weight: 600;
+            }
+        }
+    }
+
+    &__licensedUsersNum,
+    &__activeUsersNum {
+        display: inline-block;
+    }
+
+    &__activeUsersNum {
+        margin-left: 25px;
+    }
+
     .annnouncementBar__purchaseNow {
         display: block;
         padding: 12px 20px;
@@ -15,43 +55,10 @@
         }
     }
 
-    &__buttons {
-        display: flex;
+    &__alertBanner {
+        padding: 12px 20px;
+        border: 1px solid rgba(var(--error-text-color-rgb), 0.16);
+        margin-top: 4px;
+        background: rgba(var(--error-text-color-rgb), 0.08);
     }
 }
-
-.RenewLicenseCard__text-title {
-    margin-bottom: 5px;
-    color: var(--sys-sidebar-text-active-border);
-    font-family: Open Sans;
-    font-size: 18px;
-    font-style: normal;
-    font-weight: 600;
-    line-height: 24px;
-
-    &.critical {
-        color: var(--sys-error-text);
-    }
-}
-
-.RenewLicenseCard__text-description {
-    margin-bottom: 5px;
-    color: var(--sys-center-channel-color);
-    font-family: Open Sans;
-    font-size: 14px;
-    font-style: normal;
-    line-height: 30px;
-
-    &.bolder {
-        font-weight: 600;
-    }
-}
-
-.RenewLicenseCard__licensedUsersNum {
-    display: inline-block;
-}
-
-.RenewLicenseCard__activeUsersNum {
-    display: inline-block;
-    margin-left: 25px;
-}
diff --git a/webapp/channels/src/components/admin_console/license_settings/renew_license_card/renew_license_card.tsx b/webapp/channels/src/components/admin_console/license_settings/renew_license_card/renew_license_card.tsx
index a0cc1eb816..f604742ea9 100644
--- a/webapp/channels/src/components/admin_console/license_settings/renew_license_card/renew_license_card.tsx
+++ b/webapp/channels/src/components/admin_console/license_settings/renew_license_card/renew_license_card.tsx
@@ -29,7 +29,7 @@ const RenewLicenseCard: React.FC<RenewLicenseCardProps> = ({license, totalUsers,
         <div className='purchase-card'>
             <ContactUsButton
                 eventID='post_trial_contact_sales'
-                customClass='light-blue-btn'
+                customClass='btn-primary'
             />
         </div>
     );
diff --git a/webapp/channels/src/components/admin_console/license_settings/starter_edition/starter_edition.scss b/webapp/channels/src/components/admin_console/license_settings/starter_edition/starter_edition.scss
index 0d469492eb..6e918dfa18 100644
--- a/webapp/channels/src/components/admin_console/license_settings/starter_edition/starter_edition.scss
+++ b/webapp/channels/src/components/admin_console/license_settings/starter_edition/starter_edition.scss
@@ -43,21 +43,6 @@
         justify-content: center;
         margin-top: 20px;
 
-        button {
-            width: 120px;
-            padding: 14px 12px !important;
-            border-radius: 4px;
-
-            span {
-                font-size: 16px !important;
-            }
-
-            &.contact-us {
-                width: 130px;
-                margin-left: 0px !important;
-            }
-        }
-
         @media screen and (max-width: 1130px) {
             flex-direction: column;
 
@@ -85,10 +70,6 @@
         right: 10px;
         display: block;
         margin-left: auto;
-
-        &.btn {
-            @include mixins.tertiary-button;
-        }
     }
 
     .pre-title {
@@ -137,11 +118,6 @@
                 display: hidden;
             }
 
-            button {
-                height: 48px;
-                border-radius: 4px;
-            }
-
             .help-text {
                 font-size: 12px;
             }
diff --git a/webapp/channels/src/components/admin_console/license_settings/starter_edition/starter_left_panel.tsx b/webapp/channels/src/components/admin_console/license_settings/starter_edition/starter_left_panel.tsx
index ce9eed602c..a972652442 100644
--- a/webapp/channels/src/components/admin_console/license_settings/starter_edition/starter_left_panel.tsx
+++ b/webapp/channels/src/components/admin_console/license_settings/starter_edition/starter_left_panel.tsx
@@ -36,7 +36,7 @@ const StarterLeftPanel: React.FC<StarterEditionProps> = ({
         <button
             id='starter_edition_view_plans'
             onClick={() => openPricingModal({trackingLocation: 'license_settings_view_plans'})}
-            className='btn btn-secondary PlanDetails__viewPlansButton'
+            className='btn btn-tertiary btn-sm PlanDetails__viewPlansButton'
         >
             {intl.formatMessage({
                 id: 'workspace_limits.menu_limit.view_plans',
@@ -95,7 +95,7 @@ const StarterLeftPanel: React.FC<StarterEditionProps> = ({
                 </div>
                 <div className='uploadButtons'>
                     <button
-                        className='btn btn-upload light-blue-btn'
+                        className='btn btn-primary'
                         onClick={() => fileInputRef.current?.click()}
                         id='open-modal'
                     >
diff --git a/webapp/channels/src/components/admin_console/license_settings/starter_edition/starter_right_panel.tsx b/webapp/channels/src/components/admin_console/license_settings/starter_edition/starter_right_panel.tsx
index f1c3599353..063e5f9afc 100644
--- a/webapp/channels/src/components/admin_console/license_settings/starter_edition/starter_right_panel.tsx
+++ b/webapp/channels/src/components/admin_console/license_settings/starter_edition/starter_right_panel.tsx
@@ -70,6 +70,7 @@ const StarterRightPanel = () => {
             <div className='purchase_buttons'>
                 <ContactUsButton
                     eventID='post_trial_contact_sales'
+                    customClass='btn-tertiary btn-full'
                 />
             </div>
         </div>
diff --git a/webapp/channels/src/components/admin_console/license_settings/trial_license_card/trial_license_card.scss b/webapp/channels/src/components/admin_console/license_settings/trial_license_card/trial_license_card.scss
index fe9fc14b4b..bcc8c2abc5 100644
--- a/webapp/channels/src/components/admin_console/license_settings/trial_license_card/trial_license_card.scss
+++ b/webapp/channels/src/components/admin_console/license_settings/trial_license_card/trial_license_card.scss
@@ -12,10 +12,7 @@
 
     .RenewLicenseCard__buttons {
         .contact_us_primary_cta {
-            padding: 6px 12px;
             margin-left: 0px;
-            background-color: var(--sys-button-bg);
-            color: var(--sys-center-channel-bg);
         }
     }
 
@@ -29,7 +26,4 @@
         margin-top: 0;
     }
 
-    button.contact-us {
-        padding: 11px 19px;
-    }
 }
diff --git a/webapp/channels/src/components/admin_console/license_settings/trial_license_card/trial_license_card.tsx b/webapp/channels/src/components/admin_console/license_settings/trial_license_card/trial_license_card.tsx
index 41bb2e2334..2cd5dd86a8 100644
--- a/webapp/channels/src/components/admin_console/license_settings/trial_license_card/trial_license_card.tsx
+++ b/webapp/channels/src/components/admin_console/license_settings/trial_license_card/trial_license_card.tsx
@@ -59,7 +59,7 @@ const TrialLicenseCard: React.FC<Props> = ({license}: Props) => {
                 </div>
                 <div className='RenewLicenseCard__buttons'>
                     <ContactUsButton
-                        customClass='contact_us_primary_cta'
+                        customClass='btn-sm btn-primary'
                     />
                 </div>
             </div>
diff --git a/webapp/channels/src/components/admin_console/permission_schemes_settings/permission_system_scheme_settings/__snapshots__/permission_system_scheme_settings.test.tsx.snap b/webapp/channels/src/components/admin_console/permission_schemes_settings/permission_system_scheme_settings/__snapshots__/permission_system_scheme_settings.test.tsx.snap
index 58959bb47f..3dc032852d 100644
--- a/webapp/channels/src/components/admin_console/permission_schemes_settings/permission_system_scheme_settings/__snapshots__/permission_system_scheme_settings.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/permission_schemes_settings/permission_system_scheme_settings/__snapshots__/permission_system_scheme_settings.test.tsx.snap
@@ -439,6 +439,7 @@ exports[`components/admin_console/permission_schemes_settings/permission_system_
     />
     <Connect(Component)
       className="btn btn-tertiary"
+      data-testid="permission-scheme-cancel-button"
       to="/admin_console/user_management/permissions"
     >
       <MemoizedFormattedMessage
@@ -789,6 +790,7 @@ exports[`components/admin_console/permission_schemes_settings/permission_system_
     />
     <Connect(Component)
       className="btn btn-tertiary"
+      data-testid="permission-scheme-cancel-button"
       to="/admin_console/user_management/permissions"
     >
       <MemoizedFormattedMessage
@@ -1139,6 +1141,7 @@ exports[`components/admin_console/permission_schemes_settings/permission_system_
     />
     <Connect(Component)
       className="btn btn-tertiary"
+      data-testid="permission-scheme-cancel-button"
       to="/admin_console/user_management/permissions"
     >
       <MemoizedFormattedMessage
@@ -1489,6 +1492,7 @@ exports[`components/admin_console/permission_schemes_settings/permission_system_
     />
     <Connect(Component)
       className="btn btn-tertiary"
+      data-testid="permission-scheme-cancel-button"
       to="/admin_console/user_management/permissions"
     >
       <MemoizedFormattedMessage
diff --git a/webapp/channels/src/components/admin_console/permission_schemes_settings/permission_system_scheme_settings/permission_system_scheme_settings.tsx b/webapp/channels/src/components/admin_console/permission_schemes_settings/permission_system_scheme_settings/permission_system_scheme_settings.tsx
index 47fb574511..3e91ae011b 100644
--- a/webapp/channels/src/components/admin_console/permission_schemes_settings/permission_system_scheme_settings/permission_system_scheme_settings.tsx
+++ b/webapp/channels/src/components/admin_console/permission_schemes_settings/permission_system_scheme_settings/permission_system_scheme_settings.tsx
@@ -538,6 +538,7 @@ class PermissionSystemSchemeSettings extends React.PureComponent<Props, State> {
                     <BlockableLink
                         className='btn btn-tertiary'
                         to='/admin_console/user_management/permissions'
+                        data-testid='permission-scheme-cancel-button'
                     >
                         <FormattedMessage
                             id='admin.permissions.permissionSchemes.cancel'
diff --git a/webapp/channels/src/components/admin_console/permission_schemes_settings/permission_team_scheme_settings/__snapshots__/permission_team_scheme_settings.test.tsx.snap b/webapp/channels/src/components/admin_console/permission_schemes_settings/permission_team_scheme_settings/__snapshots__/permission_team_scheme_settings.test.tsx.snap
index ec63cf7ee8..709b3a25ed 100644
--- a/webapp/channels/src/components/admin_console/permission_schemes_settings/permission_team_scheme_settings/__snapshots__/permission_team_scheme_settings.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/permission_schemes_settings/permission_team_scheme_settings/__snapshots__/permission_team_scheme_settings.test.tsx.snap
@@ -345,7 +345,8 @@ exports[`components/admin_console/permission_schemes_settings/permission_team_sc
       }
     />
     <Connect(Component)
-      className="cancel-button"
+      className="btn btn-tertiary"
+      data-testid="permission-scheme-cancel-button"
       to="/admin_console/user_management/permissions"
     >
       <MemoizedFormattedMessage
@@ -751,7 +752,8 @@ exports[`components/admin_console/permission_schemes_settings/permission_team_sc
       }
     />
     <Connect(Component)
-      className="cancel-button"
+      className="btn btn-tertiary"
+      data-testid="permission-scheme-cancel-button"
       to="/admin_console/user_management/permissions"
     >
       <MemoizedFormattedMessage
@@ -1159,7 +1161,8 @@ exports[`components/admin_console/permission_schemes_settings/permission_team_sc
       }
     />
     <Connect(Component)
-      className="cancel-button"
+      className="btn btn-tertiary"
+      data-testid="permission-scheme-cancel-button"
       to="/admin_console/user_management/permissions"
     >
       <MemoizedFormattedMessage
@@ -1569,7 +1572,8 @@ exports[`components/admin_console/permission_schemes_settings/permission_team_sc
       }
     />
     <Connect(Component)
-      className="cancel-button"
+      className="btn btn-tertiary"
+      data-testid="permission-scheme-cancel-button"
       to="/admin_console/user_management/permissions"
     >
       <MemoizedFormattedMessage
@@ -2045,7 +2049,8 @@ exports[`components/admin_console/permission_schemes_settings/permission_team_sc
       }
     />
     <Connect(Component)
-      className="cancel-button"
+      className="btn btn-tertiary"
+      data-testid="permission-scheme-cancel-button"
       to="/admin_console/user_management/permissions"
     >
       <MemoizedFormattedMessage
diff --git a/webapp/channels/src/components/admin_console/permission_schemes_settings/permission_team_scheme_settings/permission_team_scheme_settings.tsx b/webapp/channels/src/components/admin_console/permission_schemes_settings/permission_team_scheme_settings/permission_team_scheme_settings.tsx
index 9230254261..704195d137 100644
--- a/webapp/channels/src/components/admin_console/permission_schemes_settings/permission_team_scheme_settings/permission_team_scheme_settings.tsx
+++ b/webapp/channels/src/components/admin_console/permission_schemes_settings/permission_team_scheme_settings/permission_team_scheme_settings.tsx
@@ -816,8 +816,9 @@ export default class PermissionTeamSchemeSettings extends React.PureComponent<Pr
                         }
                     />
                     <BlockableLink
-                        className='cancel-button'
+                        className='btn btn-tertiary'
                         to='/admin_console/user_management/permissions'
+                        data-testid='permission-scheme-cancel-button'
                     >
                         <FormattedMessage
                             id='admin.permissions.permissionSchemes.cancel'
diff --git a/webapp/channels/src/components/admin_console/workspace-optimization/__snapshots__/cta_buttons.test.tsx.snap b/webapp/channels/src/components/admin_console/workspace-optimization/__snapshots__/cta_buttons.test.tsx.snap
index 77748fb976..52459d3e89 100644
--- a/webapp/channels/src/components/admin_console/workspace-optimization/__snapshots__/cta_buttons.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/workspace-optimization/__snapshots__/cta_buttons.test.tsx.snap
@@ -5,13 +5,13 @@ exports[`components/admin_console/workspace-optimization/cta_buttons should matc
   className="ctaButtons"
 >
   <button
-    className="actionButton annnouncementBar__purchaseNow"
+    className="btn btn-primary btn-sm actionButton annnouncementBar__purchaseNow"
     onClick={[Function]}
   >
     Action Text
   </button>
   <button
-    className="learnMoreButton light-blue-btn"
+    className="btn btn-tertiary btn-sm learnMoreButton"
     onClick={[Function]}
   >
     Learn More
diff --git a/webapp/channels/src/components/admin_console/workspace-optimization/cta_buttons.tsx b/webapp/channels/src/components/admin_console/workspace-optimization/cta_buttons.tsx
index 30dcceec68..f4d9fc7bf6 100644
--- a/webapp/channels/src/components/admin_console/workspace-optimization/cta_buttons.tsx
+++ b/webapp/channels/src/components/admin_console/workspace-optimization/cta_buttons.tsx
@@ -50,7 +50,7 @@ const CtaButtons = ({
         <div className='ctaButtons'>
             {(actionLink || actionButtonCallback) && actionText && (
                 <button
-                    className='actionButton annnouncementBar__purchaseNow'
+                    className='btn btn-primary btn-sm actionButton annnouncementBar__purchaseNow'
                     onClick={getClickHandler('cta', actionLink)}
                 >
                     {actionText}
@@ -58,7 +58,7 @@ const CtaButtons = ({
             )}
             {learnMoreLink && learnMoreText && (
                 <button
-                    className='learnMoreButton light-blue-btn'
+                    className='btn btn-tertiary btn-sm learnMoreButton'
                     onClick={getClickHandler('learn-more', learnMoreLink)}
                 >
                     {learnMoreText}
diff --git a/webapp/channels/src/components/announcement_bar/contact_sales/contact_us.scss b/webapp/channels/src/components/announcement_bar/contact_sales/contact_us.scss
deleted file mode 100644
index 2929f56ffb..0000000000
--- a/webapp/channels/src/components/announcement_bar/contact_sales/contact_us.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-@use 'utils/variables';
-
-.contact-us {
-    display: block;
-    padding: 12px 20px;
-    border: 1px solid var(--sys-button-bg);
-    border-radius: 4px;
-    margin-top: 15px;
-    margin-left: 10px;
-    background-color: var(--sys-center-channel-bg);
-    color: var(--sys-button-bg);
-
-    span {
-        font-size: 14px;
-        font-weight: 600;
-        line-height: 14px;
-    }
-}
diff --git a/webapp/channels/src/components/announcement_bar/contact_sales/contact_us.tsx b/webapp/channels/src/components/announcement_bar/contact_sales/contact_us.tsx
index e9f3e37121..ac4b612685 100644
--- a/webapp/channels/src/components/announcement_bar/contact_sales/contact_us.tsx
+++ b/webapp/channels/src/components/announcement_bar/contact_sales/contact_us.tsx
@@ -8,8 +8,6 @@ import {trackEvent} from 'actions/telemetry_actions';
 
 import useOpenSalesLink from 'components/common/hooks/useOpenSalesLink';
 
-import './contact_us.scss';
-
 export interface Props {
     buttonTextElement?: JSX.Element;
     eventID?: string;
@@ -27,7 +25,7 @@ const ContactUsButton: React.FC<Props> = (props: Props) => {
 
     return (
         <button
-            className={`contact-us ${props.customClass ? props.customClass : ''}`}
+            className={`btn contact-us ${props.customClass || 'btn-tertiary'}`}
             onClick={(e) => handleContactUsLinkClick(e)}
         >
             {props.buttonTextElement || (
diff --git a/webapp/channels/src/components/announcement_bar/default_announcement_bar/announcement_bar.tsx b/webapp/channels/src/components/announcement_bar/default_announcement_bar/announcement_bar.tsx
index 07a530f642..9e0b6fae16 100644
--- a/webapp/channels/src/components/announcement_bar/default_announcement_bar/announcement_bar.tsx
+++ b/webapp/channels/src/components/announcement_bar/default_announcement_bar/announcement_bar.tsx
@@ -174,6 +174,7 @@ export default class AnnouncementBar extends React.PureComponent<Props, State> {
                 <button
                     onClick={this.props.onButtonClick}
                     disabled={this.props.ctaDisabled}
+                    className='btn btn-tertiary btn-xs btn-inverted'
                 >
                     <FormattedMessage
                         {...this.props.modalButtonText}
@@ -185,6 +186,7 @@ export default class AnnouncementBar extends React.PureComponent<Props, State> {
                 <button
                     onClick={this.props.onButtonClick}
                     disabled={this.props.ctaDisabled}
+                    className='btn btn-tertiary btn-xs btn-inverted'
                 >
                     {this.props.ctaText}
                 </button>
diff --git a/webapp/channels/src/components/announcement_bar/notification_permission_bar/__snapshots__/index.test.tsx.snap b/webapp/channels/src/components/announcement_bar/notification_permission_bar/__snapshots__/index.test.tsx.snap
index 1724b7476c..4d57b8c32f 100644
--- a/webapp/channels/src/components/announcement_bar/notification_permission_bar/__snapshots__/index.test.tsx.snap
+++ b/webapp/channels/src/components/announcement_bar/notification_permission_bar/__snapshots__/index.test.tsx.snap
@@ -14,7 +14,9 @@ exports[`NotificationPermissionBar should render the NotificationPermissionNever
       <span>
         We need your permission to show notifications in the browser.
       </span>
-      <button>
+      <button
+        class="btn btn-tertiary btn-xs btn-inverted"
+      >
         Manage notification preferences
       </button>
     </div>
@@ -42,7 +44,9 @@ exports[`NotificationPermissionBar should render the NotificationUnsupportedBar
       <span>
         Your browser does not support browser notifications.
       </span>
-      <button>
+      <button
+        class="btn btn-tertiary btn-xs btn-inverted"
+      >
         Update your browser
       </button>
     </div>
diff --git a/webapp/channels/src/components/announcement_bar/purchase_link/purchase_link.scss b/webapp/channels/src/components/announcement_bar/purchase_link/purchase_link.scss
index 6ee247cce4..ecc0cdafb6 100644
--- a/webapp/channels/src/components/announcement_bar/purchase_link/purchase_link.scss
+++ b/webapp/channels/src/components/announcement_bar/purchase_link/purchase_link.scss
@@ -2,16 +2,5 @@
 
 .annnouncementBar__purchaseNow {
     display: block;
-    padding: 12px 20px;
-    border: none;
-    border-radius: 4px;
     margin-top: 15px;
-    background: var(--sys-button-bg);
-    color: var(--sys-button-color);
-
-    span {
-        font-size: 14px;
-        font-weight: 600;
-        line-height: 14px;
-    }
 }
diff --git a/webapp/channels/src/components/announcement_bar/purchase_link/purchase_link.tsx b/webapp/channels/src/components/announcement_bar/purchase_link/purchase_link.tsx
index 10b40b135a..f946416b88 100644
--- a/webapp/channels/src/components/announcement_bar/purchase_link/purchase_link.tsx
+++ b/webapp/channels/src/components/announcement_bar/purchase_link/purchase_link.tsx
@@ -27,7 +27,7 @@ const PurchaseLink: React.FC<Props> = (props: Props) => {
     return (
         <button
             id={props.eventID}
-            className={'annnouncementBar__purchaseNow'}
+            className={'btn btn-primary btn-lg announcementBar__purchaseNow'}
             onClick={handlePurchaseLinkClick}
         >
             {props.buttonTextElement}
diff --git a/webapp/channels/src/components/copy_text.tsx b/webapp/channels/src/components/copy_text.tsx
index 4d0d439666..0ee4a9992d 100644
--- a/webapp/channels/src/components/copy_text.tsx
+++ b/webapp/channels/src/components/copy_text.tsx
@@ -33,7 +33,7 @@ const CopyText = ({
         <WithTooltip title={label}>
             <button
                 data-testid='copyText'
-                className='btn btn-link fa fa-copy ml-2'
+                className='btn btn-link icon-content-copy ml-2'
                 aria-label={intl.formatMessage(label)}
                 onClick={copyText}
             />
diff --git a/webapp/channels/src/components/emoji_picker/components/emoji_picker_custom_emoji_button.tsx b/webapp/channels/src/components/emoji_picker/components/emoji_picker_custom_emoji_button.tsx
index 156f7936e5..d24183b759 100644
--- a/webapp/channels/src/components/emoji_picker/components/emoji_picker_custom_emoji_button.tsx
+++ b/webapp/channels/src/components/emoji_picker/components/emoji_picker_custom_emoji_button.tsx
@@ -28,7 +28,7 @@ function EmojiPickerCustomEmojiButton({customEmojisEnabled, currentTeamName, onC
         <AnyTeamPermissionGate permissions={[Permissions.CREATE_EMOJIS]}>
             <div className='emoji-picker__custom'>
                 <Link
-                    className='btn btn-tertiary'
+                    className='btn btn-tertiary btn-sm'
                     to={`/${currentTeamName}/emoji`}
                     onClick={onClick}
                 >
diff --git a/webapp/channels/src/components/start_trial_form_modal/__snapshots__/start_trial_form_modal.test.tsx.snap b/webapp/channels/src/components/start_trial_form_modal/__snapshots__/start_trial_form_modal.test.tsx.snap
index 3c33a6bec3..414dfab255 100644
--- a/webapp/channels/src/components/start_trial_form_modal/__snapshots__/start_trial_form_modal.test.tsx.snap
+++ b/webapp/channels/src/components/start_trial_form_modal/__snapshots__/start_trial_form_modal.test.tsx.snap
@@ -352,7 +352,7 @@ Object {
                 class="buttons"
               >
                 <button
-                  class="confirm-btn btn btn-default"
+                  class="btn btn-primary btn btn-default"
                   disabled=""
                   type="button"
                 >
diff --git a/webapp/channels/src/components/start_trial_form_modal/air_gapped_modal.scss b/webapp/channels/src/components/start_trial_form_modal/air_gapped_modal.scss
index b9332dca0e..220ef07902 100644
--- a/webapp/channels/src/components/start_trial_form_modal/air_gapped_modal.scss
+++ b/webapp/channels/src/components/start_trial_form_modal/air_gapped_modal.scss
@@ -89,29 +89,6 @@
         .buttons {
             margin-top: 32px;
             text-align: right;
-
-            .confirm-btn {
-                &:hover,
-                &:active,
-                &:focus,
-                &:active:focus {
-                    background:
-                        linear-gradient(0deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.16)),
-                        var(--button-bg);
-                }
-
-                height: 40px;
-                flex: none;
-                padding: 12px 20px;
-                border: none;
-                border-radius: 4px;
-                margin-left: 8px;
-                background: var(--button-bg);
-                color: var(--sys-button-color);
-                font-size: 14px;
-                font-weight: 600;
-                line-height: 14px;
-            }
         }
     }
 }
diff --git a/webapp/channels/src/components/start_trial_form_modal/air_gapped_modal.tsx b/webapp/channels/src/components/start_trial_form_modal/air_gapped_modal.tsx
index bc708abbe0..c93fe70966 100644
--- a/webapp/channels/src/components/start_trial_form_modal/air_gapped_modal.tsx
+++ b/webapp/channels/src/components/start_trial_form_modal/air_gapped_modal.tsx
@@ -62,7 +62,7 @@ function AirGappedModal({onClose}: Props) {
                 </div>
                 <div className='buttons'>
                     <Button
-                        className='confirm-btn'
+                        className='btn btn-primary'
                         onClick={() => onClose?.()}
                     >
                         {formatMessage({id: 'air_gapped_modal.close', defaultMessage: 'Close'})}
diff --git a/webapp/channels/src/components/start_trial_form_modal/index.tsx b/webapp/channels/src/components/start_trial_form_modal/index.tsx
index 5d6b37ea3c..719d1a8944 100644
--- a/webapp/channels/src/components/start_trial_form_modal/index.tsx
+++ b/webapp/channels/src/components/start_trial_form_modal/index.tsx
@@ -361,7 +361,7 @@ function StartTrialFormModal(props: Props): JSX.Element | null {
                 <div className='buttons'>
                     <Button
                         disabled={isSubmitDisabled}
-                        className='confirm-btn'
+                        className='btn btn-primary'
                         onClick={requestLicense}
                     >
                         {btnText(status)}
diff --git a/webapp/channels/src/components/start_trial_form_modal/start_trial_form_modal.scss b/webapp/channels/src/components/start_trial_form_modal/start_trial_form_modal.scss
index 5b89ca29b4..d1f54f1ee7 100644
--- a/webapp/channels/src/components/start_trial_form_modal/start_trial_form_modal.scss
+++ b/webapp/channels/src/components/start_trial_form_modal/start_trial_form_modal.scss
@@ -141,29 +141,6 @@
         .buttons {
             margin-top: 32px;
             text-align: right;
-
-            .confirm-btn {
-                &:hover,
-                &:active,
-                &:focus,
-                &:active:focus {
-                    background:
-                        linear-gradient(0deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.16)),
-                        var(--button-bg);
-                }
-
-                height: 40px;
-                flex: none;
-                padding: 12px 20px;
-                border: none;
-                border-radius: 4px;
-                margin-left: 8px;
-                background: var(--button-bg);
-                color: var(--sys-button-color);
-                font-size: 14px;
-                font-weight: 600;
-                line-height: 14px;
-            }
         }
     }
 
diff --git a/webapp/channels/src/components/widgets/modals/components/save_changes_panel.scss b/webapp/channels/src/components/widgets/modals/components/save_changes_panel.scss
index d205b5dc90..e81008da9a 100644
--- a/webapp/channels/src/components/widgets/modals/components/save_changes_panel.scss
+++ b/webapp/channels/src/components/widgets/modals/components/save_changes_panel.scss
@@ -74,7 +74,6 @@
         display: flex;
         flex: 1 1 auto;
         justify-content: flex-end;
-        gap: 8px;
 
         #panelCloseButton {
             color: rgba(var(--button-color-rgb), 0.64);
@@ -83,52 +82,32 @@
     }
 
     &__cancel-btn {
-        display: flex;
-        min-width: 64px;
-        height: 32px;
-        align-items: center;
-        padding: 10px 16px;
-        border: none;
-        border-radius: 4px;
-        background: rgba(var(--button-bg-rgb), 0.08);
-        color: var(--button-bg);
-        font-family: inherit;
-        font-size: 12px;
-        font-weight: 600;
-        gap: 10px;
-        line-height: 10px;
+        &.btn {
+            &.error {
+                background: rgba(var(--button-color-rgb), 0.12);
+                color: var(--button-color);
 
-        &.error {
-            background: rgba(var(--button-color-rgb), 0.12);
-            color: var(--button-color);
+                &:hover {
+                    background-color: rgba(var(--button-color-rgb), 0.16);
+                }
+            }
         }
     }
 
     &__save-btn {
-        display: flex;
-        min-width: 59px;
-        height: 32px;
-        flex-direction: column;
-        align-items: center;
-        padding: 10px 16px;
-        border: none;
-        border-radius: 4px;
-        background: var(--button-bg);
-        color: var(--button-color);
-        font-family: inherit;
-        font-size: 12px;
-        font-weight: 600;
-        gap: 10px;
-        line-height: 10px;
+        &.btn {
+            &.error {
+                background-color: var(--button-color);
+                color: var(--dnd-indicator);
 
-        &.error {
-            background-color: var(--button-color);
-            color: var(--button-bg);
-        }
+                &:hover {
+                    background-color: rgba(var(--button-color-rgb), 0.9);
+                }
 
-        &:disabled {
-            background: var(--center-channel-bg);
-            opacity: 0.32; 
-        }
+                &:disabled {
+                    background: rgba(var(--button-color-rgb), 0.16); 
+                }
+            }
+        }   
     }
 }
diff --git a/webapp/channels/src/components/widgets/modals/components/save_changes_panel.tsx b/webapp/channels/src/components/widgets/modals/components/save_changes_panel.tsx
index 001fd000b1..3abf4cbf88 100644
--- a/webapp/channels/src/components/widgets/modals/components/save_changes_panel.tsx
+++ b/webapp/channels/src/components/widgets/modals/components/save_changes_panel.tsx
@@ -35,8 +35,8 @@ function SaveChangesPanel({
 }: Props) {
     const panelClassName = classNames('SaveChangesPanel', {error: tabChangeError || state === 'error'}, {saved: state === 'saved'});
     const messageClassName = classNames('SaveChangesPanel__message', {error: tabChangeError || state === 'error'}, {saved: state === 'saved'});
-    const cancelButtonClassName = classNames('SaveChangesPanel__cancel-btn', {error: tabChangeError || state === 'error'}, {saved: state === 'saved'});
-    const saveButtonClassName = classNames('SaveChangesPanel__save-btn', {error: tabChangeError || state === 'error'}, {saved: state === 'saved'});
+    const cancelButtonClassName = classNames('btn btn-tertiary btn-sm SaveChangesPanel__cancel-btn', {error: tabChangeError || state === 'error'}, {saved: state === 'saved'});
+    const saveButtonClassName = classNames('btn btn-primary btn-sm SaveChangesPanel__save-btn', {error: tabChangeError || state === 'error'}, {saved: state === 'saved'});
 
     useEffect(() => {
         let timeoutId: NodeJS.Timeout;
diff --git a/webapp/channels/src/sass/components/_announcement-bar.scss b/webapp/channels/src/sass/components/_announcement-bar.scss
index e46d468f09..6bb3c56e93 100644
--- a/webapp/channels/src/sass/components/_announcement-bar.scss
+++ b/webapp/channels/src/sass/components/_announcement-bar.scss
@@ -91,23 +91,13 @@
         font-size: 16px;
     }
 
-    button {
-        &:hover {
-            background-color: rgba(255, 255, 255, 0.08);
-        }
+    .btn.btn-tertiary.btn-xs.btn-inverted {
+        background-color: rgba(variables.$white, 0.16);
+        color: variables.$white;
 
-        height: 24px;
-        box-sizing: border-box;
-        padding: 4px 8px;
-        border: 1px solid #fff;
-        border-radius: 4px;
-        margin-left: 8px;
-        background-color: inherit !important;
-        font-family: Open Sans;
-        font-size: 12px;
-        font-style: normal;
-        font-weight: 600;
-        line-height: 14px;
+        &:hover {
+            background-color: rgba(variables.$white, 0.24);
+        }
     }
 }
 
diff --git a/webapp/channels/src/sass/components/_buttons.scss b/webapp/channels/src/sass/components/_buttons.scss
index 9133bc9e18..ad09537338 100644
--- a/webapp/channels/src/sass/components/_buttons.scss
+++ b/webapp/channels/src/sass/components/_buttons.scss
@@ -157,7 +157,7 @@ button {
     &.btn-xs {
         height: 24px;
         padding: 0 10px;
-        font-size: 11px;
+        font-size: 12px;
         gap: 6px;
 
         i {
diff --git a/webapp/platform/components/src/tour_tip/tour_tip.scss b/webapp/platform/components/src/tour_tip/tour_tip.scss
index e497f2063f..1e6b965bc5 100644
--- a/webapp/platform/components/src/tour_tip/tour_tip.scss
+++ b/webapp/platform/components/src/tour_tip/tour_tip.scss
@@ -80,10 +80,6 @@ $z-index-tour-tips-backdrop: 1250;
                     &:focus {
                         box-shadow: inset 0 0 0 2px var(--sidebar-text-active-border);
                     }
-
-                    .icon-chevron-right::before {
-                        margin-right: -7px;
-                    }
                 }
 
                 &.btn-tertiary {
@@ -101,10 +97,6 @@ $z-index-tour-tips-backdrop: 1250;
                     &:focus {
                         box-shadow: inset 0 0 0 2px var(--sidebar-text-active-border);
                     }
-
-                    .icon-chevron-left::before {
-                        margin-left: -7px;
-                    }
                 }
 
                 &.btn-icon {