diff --git a/.github/whitelist-capital-letters.txt b/.github/whitelist-capital-letters.txt
index b09829f7f4c9..a825ccbf7904 100644
--- a/.github/whitelist-capital-letters.txt
+++ b/.github/whitelist-capital-letters.txt
@@ -5,16 +5,6 @@
 ./apps/browser/store/windows/Assets
 ./bitwarden_license/README.md
 ./libs/angular/src/directives/cipherListVirtualScroll.directive.ts
-./libs/angular/src/scss/webfonts/Open_Sans-italic-700.woff
-./libs/angular/src/scss/webfonts/Open_Sans-normal-300.woff
-./libs/angular/src/scss/webfonts/Open_Sans-normal-700.woff
-./libs/angular/src/scss/webfonts/Open_Sans-italic-300.woff
-./libs/angular/src/scss/webfonts/Open_Sans-italic-600.woff
-./libs/angular/src/scss/webfonts/Open_Sans-italic-800.woff
-./libs/angular/src/scss/webfonts/Open_Sans-italic-400.woff
-./libs/angular/src/scss/webfonts/Open_Sans-normal-600.woff
-./libs/angular/src/scss/webfonts/Open_Sans-normal-800.woff
-./libs/angular/src/scss/webfonts/Open_Sans-normal-400.woff
 ./libs/admin-console/README.md
 ./libs/auth/README.md
 ./libs/billing/README.md
diff --git a/apps/browser/gulpfile.js b/apps/browser/gulpfile.js
index 89d944cdec8d..80d4738900fa 100644
--- a/apps/browser/gulpfile.js
+++ b/apps/browser/gulpfile.js
@@ -24,7 +24,7 @@ const paths = {
 const filters = {
   fonts: [
     "!build/popup/fonts/*",
-    "build/popup/fonts/Open_Sans*.woff",
+    "build/popup/fonts/dm-sans[opsz,wght].woff2",
     "build/popup/fonts/bwi-font.woff2",
     "build/popup/fonts/bwi-font.woff",
     "build/popup/fonts/bwi-font.ttf",
diff --git a/apps/browser/src/autofill/shared/styles/variables.scss b/apps/browser/src/autofill/shared/styles/variables.scss
index 40b0080bb028..41d38c0b6669 100644
--- a/apps/browser/src/autofill/shared/styles/variables.scss
+++ b/apps/browser/src/autofill/shared/styles/variables.scss
@@ -2,7 +2,7 @@
 
 $dark-icon-themes: "theme_dark", "theme_solarizedDark", "theme_nord";
 
-$font-family-sans-serif: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+$font-family-sans-serif: "DM Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
 $font-size-base: 14px;
 $text-color: #212529;
 $muted-text-color: #6c747c;
diff --git a/apps/browser/src/platform/popup/layout/popup-footer.component.html b/apps/browser/src/platform/popup/layout/popup-footer.component.html
index 777e0ab60da4..f60964b13932 100644
--- a/apps/browser/src/platform/popup/layout/popup-footer.component.html
+++ b/apps/browser/src/platform/popup/layout/popup-footer.component.html
@@ -1,5 +1,5 @@
 <footer
-  class="tw-p-3 tw-border-0 tw-border-solid tw-border-t tw-border-secondary-300 tw-bg-background"
+  class="tw-p-4 tw-border-0 tw-border-solid tw-border-t tw-border-secondary-300 tw-bg-background"
 >
   <div class="tw-max-w-screen-sm tw-mx-auto tw-flex tw-justify-between tw-w-full">
     <div class="tw-flex tw-justify-start tw-gap-2">
diff --git a/apps/browser/src/platform/popup/layout/popup-header.component.html b/apps/browser/src/platform/popup/layout/popup-header.component.html
index fefc71543142..28565bb2357b 100644
--- a/apps/browser/src/platform/popup/layout/popup-header.component.html
+++ b/apps/browser/src/platform/popup/layout/popup-header.component.html
@@ -1,5 +1,5 @@
 <header
-  class="tw-p-4 tw-transition-colors tw-duration-200 tw-border-0 tw-border-b tw-border-solid"
+  class="tw-px-4 tw-py-3 tw-transition-colors tw-duration-200 tw-border-0 tw-border-b tw-border-solid"
   [ngClass]="{
     'tw-bg-background-alt tw-border-transparent':
       this.background === 'alt' && !pageContentScrolled(),
@@ -17,7 +17,7 @@
         [attr.aria-label]="'back' | i18n"
         [bitAction]="backAction"
       ></button>
-      <h1 *ngIf="pageTitle" bitTypography="h3" class="!tw-mb-0.5 tw-text-headers">
+      <h1 *ngIf="pageTitle" bitTypography="h3" class="!tw-mb-0.5">
         {{ pageTitle }}
       </h1>
       <ng-content></ng-content>
diff --git a/apps/browser/src/platform/popup/layout/popup-tab-navigation.component.html b/apps/browser/src/platform/popup/layout/popup-tab-navigation.component.html
index a0ff252c6c2a..fd386bb0f062 100644
--- a/apps/browser/src/platform/popup/layout/popup-tab-navigation.component.html
+++ b/apps/browser/src/platform/popup/layout/popup-tab-navigation.component.html
@@ -6,7 +6,7 @@
     <div class="tw-flex tw-flex-1">
       <a
         *ngFor="let button of navButtons"
-        class="tw-group tw-flex tw-flex-col tw-items-center tw-gap-1 tw-px-0.5 tw-pb-2 tw-pt-3 tw-w-1/4 tw-no-underline hover:tw-no-underline hover:tw-text-primary-600 hover:tw-bg-primary-100 tw-border-2 tw-border-solid tw-border-transparent focus-visible:tw-rounded-lg focus-visible:tw-border-primary-500"
+        class="tw-group tw-flex tw-flex-col tw-items-center tw-gap-1 tw-px-0.5 tw-pb-2 tw-pt-3 tw-w-1/4 tw-no-underline hover:tw-no-underline hover:tw-text-primary-600 hover:tw-bg-primary-100 tw-border-2 tw-border-solid tw-border-transparent focus-visible:tw-rounded-lg focus-visible:tw-border-primary-600"
         [ngClass]="rla.isActive ? 'tw-font-bold tw-text-primary-600' : 'tw-text-muted'"
         [title]="button.label"
         [routerLink]="button.page"
diff --git a/apps/browser/src/popup/images/loading.svg b/apps/browser/src/popup/images/loading.svg
index 707631051681..3f2033303dbf 100644
--- a/apps/browser/src/popup/images/loading.svg
+++ b/apps/browser/src/popup/images/loading.svg
@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100% 100%">
-  <text fill="%23333333" x="50%" y="50%" font-family="\'Open Sans\', \'Helvetica Neue\', Helvetica, Arial, sans-serif"
+  <text fill="%23333333" x="50%" y="50%" font-family="\'DM Sans\', \'Helvetica Neue\', Helvetica, Arial, sans-serif"
         font-size="18" text-anchor="middle">
     Loading...
   </text>
diff --git a/apps/browser/src/popup/scss/base.scss b/apps/browser/src/popup/scss/base.scss
index 80c753608726..0e5d5873e9b8 100644
--- a/apps/browser/src/popup/scss/base.scss
+++ b/apps/browser/src/popup/scss/base.scss
@@ -83,9 +83,9 @@ a:not(popup-page a, popup-tab-navigation a) {
   }
 }
 
-input,
-select,
-textarea {
+input:not(bit-form-field input),
+select:not(bit-form-field select),
+textarea:not(bit-form-field textarea) {
   @include themify($themes) {
     color: themed("textColor");
     background-color: themed("inputBackgroundColor");
@@ -95,7 +95,7 @@ textarea {
 input,
 select,
 textarea,
-button {
+button:not(bit-chip-select button) {
   font-size: $font-size-base;
   font-family: $font-family-sans-serif;
 }
@@ -286,7 +286,7 @@ header:not(bit-callout header, bit-dialog header, popup-page header) {
       }
     }
 
-    input {
+    input:not(bit-form-field input) {
       width: 100%;
       margin: 0;
       border: none;
diff --git a/apps/browser/src/popup/scss/pages.scss b/apps/browser/src/popup/scss/pages.scss
index bf8f03e7d030..2fd903fedc76 100644
--- a/apps/browser/src/popup/scss/pages.scss
+++ b/apps/browser/src/popup/scss/pages.scss
@@ -301,7 +301,7 @@ app-fido2-v1 {
       margin-top: 32px;
 
       .subtitle {
-        font-family: Open Sans;
+        font-family: "DM Sans";
         font-size: 24px;
         font-style: normal;
         font-weight: 600;
diff --git a/apps/browser/src/popup/scss/tailwind.css b/apps/browser/src/popup/scss/tailwind.css
index 7e12c1d6770f..f465e0b77c16 100644
--- a/apps/browser/src/popup/scss/tailwind.css
+++ b/apps/browser/src/popup/scss/tailwind.css
@@ -3,3 +3,26 @@
 @tailwind utilities;
 
 @import "../../../../../libs/components/src/tw-theme.css";
+
+@layer base {
+  /* Chrome & Safari support */
+  ::-webkit-scrollbar {
+    @apply tw-overflow-auto;
+  }
+  ::-webkit-scrollbar-thumb {
+    @apply tw-bg-secondary-500 tw-rounded-lg tw-border-4 tw-border-solid tw-border-transparent tw-bg-clip-content;
+  }
+  ::-webkit-scrollbar-track {
+    @apply tw-bg-background-alt;
+  }
+  ::-webkit-scrollbar-thumb:hover {
+    @apply tw-bg-secondary-600;
+  }
+
+  /* FireFox support */
+  * {
+    @supports (-moz-appearance: none) {
+      scrollbar-color: rgb(var(--color-secondary-500)) rgb(var(--color-background-alt));
+    }
+  }
+}
diff --git a/apps/browser/src/popup/scss/variables.scss b/apps/browser/src/popup/scss/variables.scss
index a4366a7415e6..cfd61cd6a2bb 100644
--- a/apps/browser/src/popup/scss/variables.scss
+++ b/apps/browser/src/popup/scss/variables.scss
@@ -2,9 +2,9 @@
 
 $dark-icon-themes: "theme_dark", "theme_solarizedDark", "theme_nord";
 
-$font-family-sans-serif: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+$font-family-sans-serif: "DM Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
 $font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
-$font-size-base: 14px;
+$font-size-base: 16px;
 $font-size-large: 18px;
 $font-size-xlarge: 22px;
 $font-size-xxlarge: 28px;
diff --git a/apps/desktop/src/app/components/avatar.component.ts b/apps/desktop/src/app/components/avatar.component.ts
index 100073406362..59005352d132 100644
--- a/apps/desktop/src/app/components/avatar.component.ts
+++ b/apps/desktop/src/app/components/avatar.component.ts
@@ -111,7 +111,7 @@ export class AvatarComponent implements OnChanges, OnInit {
     textTag.setAttribute("fill", Utils.pickTextColorBasedOnBgColor(color, 135, true));
     textTag.setAttribute(
       "font-family",
-      '"Open Sans","Helvetica Neue",Helvetica,Arial,' +
+      '"DM Sans","Helvetica Neue",Helvetica,Arial,' +
         'sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"',
     );
     textTag.textContent = character;
diff --git a/apps/desktop/src/images/loading.svg b/apps/desktop/src/images/loading.svg
index 707631051681..3f2033303dbf 100644
--- a/apps/desktop/src/images/loading.svg
+++ b/apps/desktop/src/images/loading.svg
@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100% 100%">
-  <text fill="%23333333" x="50%" y="50%" font-family="\'Open Sans\', \'Helvetica Neue\', Helvetica, Arial, sans-serif"
+  <text fill="%23333333" x="50%" y="50%" font-family="\'DM Sans\', \'Helvetica Neue\', Helvetica, Arial, sans-serif"
         font-size="18" text-anchor="middle">
     Loading...
   </text>
diff --git a/apps/desktop/src/scss/variables.scss b/apps/desktop/src/scss/variables.scss
index 6f8112b1ca01..23a4644d3da8 100644
--- a/apps/desktop/src/scss/variables.scss
+++ b/apps/desktop/src/scss/variables.scss
@@ -2,7 +2,7 @@
 
 $dark-icon-themes: "theme_dark", "theme_nord";
 
-$font-family-sans-serif: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+$font-family-sans-serif: "DM Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
 $font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
 $font-size-base: 14px;
 $font-size-large: 18px;
diff --git a/apps/web/src/404.html b/apps/web/src/404.html
index 817bfe30985a..1a01aee40c75 100644
--- a/apps/web/src/404.html
+++ b/apps/web/src/404.html
@@ -30,7 +30,7 @@ <h1 class="tw-mb-0 tw-h1">Sorry, this page isn't available.</h1>
 
       <a href="/" class="tw-btn-secondary tw-inline-block">Go to your web vault</a>
     </main>
-    <footer class="tw-mt-auto tw-h-40 tw-bg-primary-500 tw-flex tw-justify-center tw-items-center">
+    <footer class="tw-mt-auto tw-h-40 tw-bg-primary-600 tw-flex tw-justify-center tw-items-center">
       <i class="bwi bwi-shield tw-text-contrast tw-text-4xl"></i>
     </footer>
   </body>
diff --git a/apps/web/src/app/admin-console/organizations/manage/groups.component.ts b/apps/web/src/app/admin-console/organizations/manage/groups.component.ts
index dfb6f349ebd5..03cf0a33daee 100644
--- a/apps/web/src/app/admin-console/organizations/manage/groups.component.ts
+++ b/apps/web/src/app/admin-console/organizations/manage/groups.component.ts
@@ -81,8 +81,8 @@ export class GroupsComponent {
   protected searchControl = new FormControl("");
 
   // Fixed sizes used for cdkVirtualScroll
-  protected rowHeight = 46;
-  protected rowHeightClass = `tw-h-[46px]`;
+  protected rowHeight = 52;
+  protected rowHeightClass = `tw-h-[52px]`;
 
   protected ModalTabType = GroupAddEditTabType;
   private refreshGroups$ = new BehaviorSubject<void>(null);
diff --git a/apps/web/src/app/admin-console/organizations/members/members.component.ts b/apps/web/src/app/admin-console/organizations/members/members.component.ts
index f4a5e7384776..4afa2f694965 100644
--- a/apps/web/src/app/admin-console/organizations/members/members.component.ts
+++ b/apps/web/src/app/admin-console/organizations/members/members.component.ts
@@ -99,8 +99,8 @@ export class MembersComponent extends BaseMembersComponent<OrganizationUserView>
   );
 
   // Fixed sizes used for cdkVirtualScroll
-  protected rowHeight = 62;
-  protected rowHeightClass = `tw-h-[62px]`;
+  protected rowHeight = 69;
+  protected rowHeightClass = `tw-h-[69px]`;
 
   constructor(
     apiService: ApiService,
diff --git a/apps/web/src/app/admin-console/organizations/shared/components/access-selector/access-selector.component.html b/apps/web/src/app/admin-console/organizations/shared/components/access-selector/access-selector.component.html
index aff5d25ee080..4226862fde74 100644
--- a/apps/web/src/app/admin-console/organizations/shared/components/access-selector/access-selector.component.html
+++ b/apps/web/src/app/admin-console/organizations/shared/components/access-selector/access-selector.component.html
@@ -3,13 +3,7 @@
 <div class="tw-flex" *ngIf="!hideMultiSelect">
   <bit-form-field *ngIf="permissionMode == 'edit'" class="tw-mr-3 tw-shrink-0">
     <bit-label>{{ "permission" | i18n }}</bit-label>
-    <!--
-      Built-in select height differs between browsers, this fix makes sure we match bit-multi-select height.
-      We might want to reconsider this fix when/if we implement
-      [CL-78] [Improvement] Completely restyled selects (https://bitwarden.atlassian.net/browse/CL-78)
-    -->
     <select
-      class="tw-h-[35px]"
       bitInput
       [disabled]="disabled"
       [(ngModel)]="initialPermission"
diff --git a/apps/web/src/app/auth/settings/verify-email.component.html b/apps/web/src/app/auth/settings/verify-email.component.html
index 60f7e52b9a2f..a691c30695c2 100644
--- a/apps/web/src/app/auth/settings/verify-email.component.html
+++ b/apps/web/src/app/auth/settings/verify-email.component.html
@@ -3,7 +3,7 @@
   <button
     id="sendBtn"
     bitLink
-    linkType="contrast"
+    linkType="secondary"
     bitButton
     type="button"
     buttonType="unstyled"
diff --git a/apps/web/src/app/billing/services/stripe.service.ts b/apps/web/src/app/billing/services/stripe.service.ts
index d19a7ef9da85..4c0cdea8a147 100644
--- a/apps/web/src/app/billing/services/stripe.service.ts
+++ b/apps/web/src/app/billing/services/stripe.service.ts
@@ -157,9 +157,9 @@ export class StripeService {
         base: {
           color: null,
           fontFamily:
-            '"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif, ' +
+            '"DM Sans", "Helvetica Neue", Helvetica, Arial, sans-serif, ' +
             '"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
-          fontSize: "14px",
+          fontSize: "16px",
           fontSmoothing: "antialiased",
           "::placeholder": {
             color: null,
diff --git a/apps/web/src/app/billing/shared/payment/payment.component.ts b/apps/web/src/app/billing/shared/payment/payment.component.ts
index ab81a602d238..e6aff039891f 100644
--- a/apps/web/src/app/billing/shared/payment/payment.component.ts
+++ b/apps/web/src/app/billing/shared/payment/payment.component.ts
@@ -84,9 +84,9 @@ export class PaymentComponent implements OnInit, OnDestroy {
       base: {
         color: null,
         fontFamily:
-          '"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif, ' +
+          '"DM Sans", "Helvetica Neue", Helvetica, Arial, sans-serif, ' +
           '"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
-        fontSize: "14px",
+        fontSize: "16px",
         fontSmoothing: "antialiased",
         "::placeholder": {
           color: null,
diff --git a/apps/web/src/app/vault/components/vault-items/vault-items.component.ts b/apps/web/src/app/vault/components/vault-items/vault-items.component.ts
index 05f32b22ab85..e70269ede0b5 100644
--- a/apps/web/src/app/vault/components/vault-items/vault-items.component.ts
+++ b/apps/web/src/app/vault/components/vault-items/vault-items.component.ts
@@ -13,8 +13,8 @@ import { VaultItem } from "./vault-item";
 import { VaultItemEvent } from "./vault-item-event";
 
 // Fixed manual row height required due to how cdk-virtual-scroll works
-export const RowHeight = 65;
-export const RowHeightClass = `tw-h-[65px]`;
+export const RowHeight = 74;
+export const RowHeightClass = `tw-h-[74px]`;
 
 const MaxSelectionCount = 500;
 
diff --git a/apps/web/src/app/vault/individual-vault/vault-banners/vault-banners.component.html b/apps/web/src/app/vault/individual-vault/vault-banners/vault-banners.component.html
index bcbe424b469d..63b099faf3d2 100644
--- a/apps/web/src/app/vault/individual-vault/vault-banners/vault-banners.component.html
+++ b/apps/web/src/app/vault/individual-vault/vault-banners/vault-banners.component.html
@@ -8,7 +8,7 @@
   {{ "updateBrowserDesc" | i18n }}
   <a
     bitLink
-    linkType="contrast"
+    linkType="secondary"
     target="_blank"
     href="https://browser-update.org/update-browser.html"
     rel="noreferrer noopener"
@@ -25,7 +25,7 @@
   (onClose)="dismissBanner(VisibleVaultBanner.KDFSettings)"
 >
   {{ "lowKDFIterationsBanner" | i18n }}
-  <a bitLink linkType="contrast" routerLink="/settings/security/security-keys">
+  <a bitLink linkType="secondary" routerLink="/settings/security/security-keys">
     {{ "changeKDFSettings" | i18n }}
   </a>
 </bit-banner>
@@ -46,7 +46,7 @@
   (onClose)="dismissBanner(VisibleVaultBanner.Premium)"
 >
   {{ "premiumUpgradeUnlockFeatures" | i18n }}
-  <a bitLink linkType="contrast" routerLink="/settings/subscription/premium">
+  <a bitLink linkType="secondary" routerLink="/settings/subscription/premium">
     {{ "goPremium" | i18n }}
   </a>
 </bit-banner>
diff --git a/apps/web/src/images/loading-white.svg b/apps/web/src/images/loading-white.svg
index 302391400691..2bebff7daba8 100644
--- a/apps/web/src/images/loading-white.svg
+++ b/apps/web/src/images/loading-white.svg
@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100% 100%">
-  <text fill="%23FBFBFB" x="50%" y="50%" font-family="\'Open Sans\', \'Helvetica Neue\', Helvetica, Arial, sans-serif"
+  <text fill="%23FBFBFB" x="50%" y="50%" font-family="\'DM Sans\', \'Helvetica Neue\', Helvetica, Arial, sans-serif"
         font-size="18" text-anchor="middle">
     Loading...
   </text> 
diff --git a/apps/web/src/images/loading.svg b/apps/web/src/images/loading.svg
index 707631051681..3f2033303dbf 100644
--- a/apps/web/src/images/loading.svg
+++ b/apps/web/src/images/loading.svg
@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100% 100%">
-  <text fill="%23333333" x="50%" y="50%" font-family="\'Open Sans\', \'Helvetica Neue\', Helvetica, Arial, sans-serif"
+  <text fill="%23333333" x="50%" y="50%" font-family="\'DM Sans\', \'Helvetica Neue\', Helvetica, Arial, sans-serif"
         font-size="18" text-anchor="middle">
     Loading...
   </text>
diff --git a/apps/web/src/scss/base.scss b/apps/web/src/scss/base.scss
index 257662fd5b27..495e7df6926a 100644
--- a/apps/web/src/scss/base.scss
+++ b/apps/web/src/scss/base.scss
@@ -1,5 +1,5 @@
 html {
-  font-size: 14px;
+  font-size: 16px;
 }
 
 body {
diff --git a/apps/web/src/scss/forms.scss b/apps/web/src/scss/forms.scss
index f5800ff7e502..330bc5f6547f 100644
--- a/apps/web/src/scss/forms.scss
+++ b/apps/web/src/scss/forms.scss
@@ -20,7 +20,7 @@ input[type="search"]::-webkit-search-cancel-button {
   -webkit-appearance: -cancel-button;
 }
 
-label:not(.form-check-label):not(.btn),
+label:not(.form-check-label):not(.btn):not(:has(bit-label)),
 label.bold {
   font-weight: 600;
   @include themify($themes) {
@@ -136,12 +136,12 @@ input[type="checkbox"] {
   background-color: rgb(var(--color-background));
 
   &:hover {
-    border-color: rgb(var(--color-primary-500));
+    border-color: rgb(var(--color-primary-600));
   }
 
   &.is-focused {
     outline: 0;
-    border-color: rgb(var(--color-primary-500));
+    border-color: rgb(var(--color-primary-600));
   }
 
   &.is-invalid {
diff --git a/apps/web/src/scss/variables.scss b/apps/web/src/scss/variables.scss
index 9d3d8d6ad49f..b3a27a7824b3 100644
--- a/apps/web/src/scss/variables.scss
+++ b/apps/web/src/scss/variables.scss
@@ -20,7 +20,7 @@ $theme-colors: (
 $body-bg: $white;
 $body-color: #333333;
 
-$font-family-sans-serif: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif,
+$font-family-sans-serif: "DM Sans", "Helvetica Neue", Helvetica, Arial, sans-serif,
   "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 
 $h1-font-size: 1.7rem;
diff --git a/bitwarden_license/bit-web/src/app/admin-console/organizations/manage/domain-verification/domain-add-edit-dialog/domain-add-edit-dialog.component.html b/bitwarden_license/bit-web/src/app/admin-console/organizations/manage/domain-verification/domain-add-edit-dialog/domain-add-edit-dialog.component.html
index 0d0ca04f9268..15120eed92a9 100644
--- a/bitwarden_license/bit-web/src/app/admin-console/organizations/manage/domain-verification/domain-add-edit-dialog/domain-add-edit-dialog.component.html
+++ b/bitwarden_license/bit-web/src/app/admin-console/organizations/manage/domain-verification/domain-add-edit-dialog/domain-add-edit-dialog.component.html
@@ -33,12 +33,10 @@
         <button
           type="button"
           bitSuffix
-          bitButton
+          bitIconButton="bwi-clone"
           appA11yTitle="{{ 'copyDnsTxtRecord' | i18n }}"
           (click)="copyDnsTxt()"
-        >
-          <i class="bwi bwi-lg bwi-clone" aria-hidden="true"></i>
-        </button>
+        ></button>
       </bit-form-field>
 
       <bit-callout
diff --git a/bitwarden_license/bit-web/src/app/admin-console/providers/manage/members.component.ts b/bitwarden_license/bit-web/src/app/admin-console/providers/manage/members.component.ts
index f78bccd3548b..253b777676d4 100644
--- a/bitwarden_license/bit-web/src/app/admin-console/providers/manage/members.component.ts
+++ b/bitwarden_license/bit-web/src/app/admin-console/providers/manage/members.component.ts
@@ -49,8 +49,8 @@ export class MembersComponent extends BaseMembersComponent<ProviderUser> {
   dataSource = new MembersTableDataSource();
   loading = true;
   providerId: string;
-  rowHeight = 62;
-  rowHeightClass = `tw-h-[62px]`;
+  rowHeight = 69;
+  rowHeightClass = `tw-h-[69px]`;
   status: ProviderUserStatusType = null;
 
   userStatusType = ProviderUserStatusType;
diff --git a/bitwarden_license/bit-web/src/app/admin-console/providers/providers-layout.component.html b/bitwarden_license/bit-web/src/app/admin-console/providers/providers-layout.component.html
index 5f9b3f66bc53..dd2b7210aa5d 100644
--- a/bitwarden_license/bit-web/src/app/admin-console/providers/providers-layout.component.html
+++ b/bitwarden_license/bit-web/src/app/admin-console/providers/providers-layout.component.html
@@ -50,7 +50,7 @@
     <a
       href="https://bitwarden.com/contact/"
       bitLink
-      linkType="contrast"
+      linkType="secondary"
       target="_blank"
       rel="noreferrer"
     >
diff --git a/bitwarden_license/bit-web/src/app/auth/sso/sso.component.html b/bitwarden_license/bit-web/src/app/auth/sso/sso.component.html
index a7d369952a4f..cb804f66c27b 100644
--- a/bitwarden_license/bit-web/src/app/auth/sso/sso.component.html
+++ b/bitwarden_license/bit-web/src/app/auth/sso/sso.component.html
@@ -124,7 +124,7 @@
           />
           <button
             bitSuffix
-            bitButton
+            bitLink
             [disabled]="!enableTestKeyConnector"
             type="button"
             (click)="validateKeyConnectorUrl()"
@@ -351,14 +351,12 @@ <h2 class="secondary-header">{{ "samlSpConfig" | i18n }}</h2>
           <bit-label>{{ "spMetadataUrl" | i18n }}</bit-label>
           <input bitInput disabled [value]="spMetadataUrl" />
           <button
-            bitButton
+            bitIconButton="bwi-external-link"
             bitSuffix
             type="button"
             [appLaunchClick]="spMetadataUrl"
             [appA11yTitle]="'launch' | i18n"
-          >
-            <i class="bwi bwi-lg bwi-external-link" aria-hidden="true"></i>
-          </button>
+          ></button>
           <button
             bitIconButton="bwi-clone"
             bitSuffix
diff --git a/libs/angular/src/scss/webfonts.css b/libs/angular/src/scss/webfonts.css
index fe9bb7e16717..b7ccf99ca20a 100644
--- a/libs/angular/src/scss/webfonts.css
+++ b/libs/angular/src/scss/webfonts.css
@@ -1,89 +1,8 @@
 @font-face {
-  font-family: "Open Sans";
-  font-style: italic;
-  font-weight: 300;
-  font-display: auto;
-  src: url(webfonts/Open_Sans-italic-300.woff) format("woff");
-  unicode-range: U+0-10FFFF;
-}
-
-@font-face {
-  font-family: "Open Sans";
-  font-style: italic;
-  font-weight: 400;
-  font-display: auto;
-  src: url(webfonts/Open_Sans-italic-400.woff) format("woff");
-  unicode-range: U+0-10FFFF;
-}
-
-@font-face {
-  font-family: "Open Sans";
-  font-style: italic;
-  font-weight: 600;
-  font-display: auto;
-  src: url(webfonts/Open_Sans-italic-600.woff) format("woff");
-  unicode-range: U+0-10FFFF;
-}
-
-@font-face {
-  font-family: "Open Sans";
-  font-style: italic;
-  font-weight: 700;
-  font-display: auto;
-  src: url(webfonts/Open_Sans-italic-700.woff) format("woff");
-  unicode-range: U+0-10FFFF;
-}
-
-@font-face {
-  font-family: "Open Sans";
-  font-style: italic;
-  font-weight: 800;
-  font-display: auto;
-  src: url(webfonts/Open_Sans-italic-800.woff) format("woff");
-  unicode-range: U+0-10FFFF;
-}
-
-@font-face {
-  font-family: "Open Sans";
-  font-style: normal;
-  font-weight: 300;
-  font-display: auto;
-  src: url(webfonts/Open_Sans-normal-300.woff) format("woff");
-  unicode-range: U+0-10FFFF;
-}
-
-@font-face {
-  font-family: "Open Sans";
-  font-style: normal;
-  font-weight: 400;
-  font-display: auto;
-  src: url(webfonts/Open_Sans-normal-400.woff) format("woff");
-  unicode-range: U+0-10FFFF;
-}
-
-@font-face {
-  font-family: "Open Sans";
-  font-style: normal;
-  font-weight: 600;
-  font-display: auto;
-  src: url(webfonts/Open_Sans-normal-600.woff) format("woff");
-  unicode-range: U+0-10FFFF;
-}
-
-@font-face {
-  font-family: "Open Sans";
-  font-style: normal;
-  font-weight: 700;
-  font-display: auto;
-  src: url(webfonts/Open_Sans-normal-700.woff) format("woff");
-  unicode-range: U+0-10FFFF;
-}
-
-@font-face {
-  font-family: "Open Sans";
-  font-style: normal;
-  font-weight: 800;
-  font-display: auto;
-  src: url(webfonts/Open_Sans-normal-800.woff) format("woff");
-  unicode-range: U+0-10FFFF;
+  font-family: "DM Sans";
+  src:
+    url("webfonts/dm-sans[opsz,wght].woff2") format("woff2 supports variations"),
+    url("webfonts/dm-sans[opsz,wght].woff2") format("woff2-variations");
+  font-display: swap;
+  font-weight: 100 900;
 }
diff --git a/libs/angular/src/scss/webfonts/Open_Sans-italic-300.woff b/libs/angular/src/scss/webfonts/Open_Sans-italic-300.woff
deleted file mode 100644
index 8f8e97cfe0f1..000000000000
Binary files a/libs/angular/src/scss/webfonts/Open_Sans-italic-300.woff and /dev/null differ
diff --git a/libs/angular/src/scss/webfonts/Open_Sans-italic-400.woff b/libs/angular/src/scss/webfonts/Open_Sans-italic-400.woff
deleted file mode 100644
index f90b99608689..000000000000
Binary files a/libs/angular/src/scss/webfonts/Open_Sans-italic-400.woff and /dev/null differ
diff --git a/libs/angular/src/scss/webfonts/Open_Sans-italic-600.woff b/libs/angular/src/scss/webfonts/Open_Sans-italic-600.woff
deleted file mode 100644
index c262a9c88fc8..000000000000
Binary files a/libs/angular/src/scss/webfonts/Open_Sans-italic-600.woff and /dev/null differ
diff --git a/libs/angular/src/scss/webfonts/Open_Sans-italic-700.woff b/libs/angular/src/scss/webfonts/Open_Sans-italic-700.woff
deleted file mode 100644
index 8526ac3d1444..000000000000
Binary files a/libs/angular/src/scss/webfonts/Open_Sans-italic-700.woff and /dev/null differ
diff --git a/libs/angular/src/scss/webfonts/Open_Sans-italic-800.woff b/libs/angular/src/scss/webfonts/Open_Sans-italic-800.woff
deleted file mode 100644
index c389a1256c33..000000000000
Binary files a/libs/angular/src/scss/webfonts/Open_Sans-italic-800.woff and /dev/null differ
diff --git a/libs/angular/src/scss/webfonts/Open_Sans-normal-300.woff b/libs/angular/src/scss/webfonts/Open_Sans-normal-300.woff
deleted file mode 100644
index 9f56d335b1ea..000000000000
Binary files a/libs/angular/src/scss/webfonts/Open_Sans-normal-300.woff and /dev/null differ
diff --git a/libs/angular/src/scss/webfonts/Open_Sans-normal-400.woff b/libs/angular/src/scss/webfonts/Open_Sans-normal-400.woff
deleted file mode 100644
index 153a1d63a460..000000000000
Binary files a/libs/angular/src/scss/webfonts/Open_Sans-normal-400.woff and /dev/null differ
diff --git a/libs/angular/src/scss/webfonts/Open_Sans-normal-600.woff b/libs/angular/src/scss/webfonts/Open_Sans-normal-600.woff
deleted file mode 100644
index 8271bb4a7a46..000000000000
Binary files a/libs/angular/src/scss/webfonts/Open_Sans-normal-600.woff and /dev/null differ
diff --git a/libs/angular/src/scss/webfonts/Open_Sans-normal-700.woff b/libs/angular/src/scss/webfonts/Open_Sans-normal-700.woff
deleted file mode 100644
index 101c0be6e4df..000000000000
Binary files a/libs/angular/src/scss/webfonts/Open_Sans-normal-700.woff and /dev/null differ
diff --git a/libs/angular/src/scss/webfonts/Open_Sans-normal-800.woff b/libs/angular/src/scss/webfonts/Open_Sans-normal-800.woff
deleted file mode 100644
index 724c2e64bd05..000000000000
Binary files a/libs/angular/src/scss/webfonts/Open_Sans-normal-800.woff and /dev/null differ
diff --git a/libs/angular/src/scss/webfonts/dm-sans[opsz,wght].woff2 b/libs/angular/src/scss/webfonts/dm-sans[opsz,wght].woff2
new file mode 100644
index 000000000000..2375279dbf5a
Binary files /dev/null and b/libs/angular/src/scss/webfonts/dm-sans[opsz,wght].woff2 differ
diff --git a/libs/components/src/avatar/avatar.component.ts b/libs/components/src/avatar/avatar.component.ts
index b19506952d92..74fc6bb57c7e 100644
--- a/libs/components/src/avatar/avatar.component.ts
+++ b/libs/components/src/avatar/avatar.component.ts
@@ -116,7 +116,7 @@ export class AvatarComponent implements OnChanges {
     textTag.setAttribute("fill", Utils.pickTextColorBasedOnBgColor(color, 135, true));
     textTag.setAttribute(
       "font-family",
-      '"Open Sans","Helvetica Neue",Helvetica,Arial,' +
+      '"DM Sans","Helvetica Neue",Helvetica,Arial,' +
         'sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"',
     );
     // Warning do not use innerHTML here, characters are user provided
diff --git a/libs/components/src/badge/badge.directive.ts b/libs/components/src/badge/badge.directive.ts
index 55977f10f90a..212ddf481911 100644
--- a/libs/components/src/badge/badge.directive.ts
+++ b/libs/components/src/badge/badge.directive.ts
@@ -5,21 +5,25 @@ import { FocusableElement } from "../shared/focusable-element";
 export type BadgeVariant = "primary" | "secondary" | "success" | "danger" | "warning" | "info";
 
 const styles: Record<BadgeVariant, string[]> = {
-  primary: ["tw-bg-primary-600"],
-  secondary: ["tw-bg-text-muted"],
-  success: ["tw-bg-success-600"],
-  danger: ["tw-bg-danger-600"],
-  warning: ["tw-bg-warning-600"],
-  info: ["tw-bg-info-600"],
+  primary: ["tw-bg-primary-100", "tw-border-primary-700", "!tw-text-primary-700"],
+  secondary: ["tw-bg-secondary-100", "tw-border-secondary-700", "!tw-text-secondary-700"],
+  success: ["tw-bg-success-100", "tw-border-success-700", "!tw-text-success-700"],
+  danger: ["tw-bg-danger-100", "tw-border-danger-700", "!tw-text-danger-700"],
+  warning: ["tw-bg-warning-100", "tw-border-warning-700", "!tw-text-warning-700"],
+  info: ["tw-bg-info-100", "tw-border-info-700", "!tw-text-info-700"],
 };
 
 const hoverStyles: Record<BadgeVariant, string[]> = {
-  primary: ["hover:tw-bg-primary-700"],
-  secondary: ["hover:tw-bg-secondary-700"],
-  success: ["hover:tw-bg-success-700"],
-  danger: ["hover:tw-bg-danger-700"],
-  warning: ["hover:tw-bg-warning-700"],
-  info: ["hover:tw-bg-info-700"],
+  primary: ["hover:tw-bg-primary-600", "hover:tw-border-primary-600", "hover:!tw-text-contrast"],
+  secondary: [
+    "hover:tw-bg-secondary-600",
+    "hover:tw-border-secondary-600",
+    "hover:!tw-text-contrast",
+  ],
+  success: ["hover:tw-bg-success-600", "hover:tw-border-success-600", "hover:!tw-text-contrast"],
+  danger: ["hover:tw-bg-danger-600", "hover:tw-border-danger-600", "hover:!tw-text-contrast"],
+  warning: ["hover:tw-bg-warning-600", "hover:tw-border-warning-600", "hover:!tw-text-black"],
+  info: ["hover:tw-bg-info-600", "hover:tw-border-info-600", "hover:!tw-text-black"],
 };
 
 @Directive({
@@ -30,22 +34,29 @@ export class BadgeDirective implements FocusableElement {
   @HostBinding("class") get classList() {
     return [
       "tw-inline-block",
-      "tw-py-0.5",
-      "tw-px-1.5",
-      "tw-font-bold",
+      "tw-py-1",
+      "tw-px-2",
+      "tw-font-medium",
       "tw-text-center",
       "tw-align-text-top",
-      "!tw-text-contrast",
-      "tw-rounded",
-      "tw-border-none",
+      "tw-rounded-full",
+      "tw-border-[0.5px]",
+      "tw-border-solid",
       "tw-box-border",
       "tw-whitespace-nowrap",
       "tw-text-xs",
       "hover:tw-no-underline",
-      "focus:tw-outline-none",
-      "focus:tw-ring",
-      "focus:tw-ring-offset-2",
-      "focus:tw-ring-primary-700",
+      "focus-visible:tw-outline-none",
+      "focus-visible:tw-ring-2",
+      "focus-visible:tw-ring-offset-2",
+      "focus-visible:tw-ring-primary-600",
+      "disabled:tw-bg-secondary-300",
+      "disabled:hover:tw-bg-secondary-300",
+      "disabled:tw-border-secondary-300",
+      "disabled:hover:tw-border-secondary-300",
+      "disabled:!tw-text-muted",
+      "disabled:hover:!tw-text-muted",
+      "disabled:tw-cursor-not-allowed",
     ]
       .concat(styles[this.variant])
       .concat(this.hasHoverEffects ? hoverStyles[this.variant] : [])
diff --git a/libs/components/src/badge/badge.mdx b/libs/components/src/badge/badge.mdx
index 3dd24598712c..fb2dceb0fa8d 100644
--- a/libs/components/src/badge/badge.mdx
+++ b/libs/components/src/badge/badge.mdx
@@ -10,12 +10,17 @@ import { BadgeModule } from "@bitwarden/components";
 
 # Badge
 
-The Badge directive can be used on a `<span>` (non clickable events), or an `<a>` or `<button>` tag
-for interactive events. The Focus and Hover states only apply to badges used for interactive events.
+Badges are primarily used as labels, counters, and small buttons.
 
 Typically Badges are only used with text set to `text-xs`. If additional sizes are needed, the
 component configurations may be reviewed and adjusted.
 
+The Badge directive can be used on a `<span>` (non clickable events), or an `<a>` or `<button>` tag
+for interactive events. The Focus and Hover states only apply to badges used for interactive events.
+The `disabled` state only applies to buttons.
+
+The story below uses the `<button>` element to demonstrate all the possible states.
+
 <Primary />
 <Controls />
 
diff --git a/libs/components/src/badge/badge.stories.ts b/libs/components/src/badge/badge.stories.ts
index cdd00ca89858..6c57bc0cbfb3 100644
--- a/libs/components/src/badge/badge.stories.ts
+++ b/libs/components/src/badge/badge.stories.ts
@@ -26,10 +26,49 @@ export default {
 
 type Story = StoryObj<BadgeDirective>;
 
+export const Variants: Story = {
+  render: (args) => ({
+    props: args,
+    template: /*html*/ `
+      <span class="tw-text-main tw-mx-1">Default</span>
+      <button class="tw-mx-1" bitBadge variant="primary" [truncate]="truncate">Primary</button>
+      <button class="tw-mx-1" bitBadge variant="secondary" [truncate]="truncate">Secondary</button>
+      <button class="tw-mx-1" bitBadge variant="success" [truncate]="truncate">Success</button>
+      <button class="tw-mx-1" bitBadge variant="danger" [truncate]="truncate">Danger</button>
+      <button class="tw-mx-1" bitBadge variant="warning" [truncate]="truncate">Warning</button>
+      <button class="tw-mx-1" bitBadge variant="info" [truncate]="truncate">Info</button>
+      <br/><br/>
+      <span class="tw-text-main tw-mx-1">Hover</span>
+      <button class="tw-mx-1 tw-test-hover" bitBadge variant="primary" [truncate]="truncate">Primary</button>
+      <button class="tw-mx-1 tw-test-hover" bitBadge variant="secondary" [truncate]="truncate">Secondary</button>
+      <button class="tw-mx-1 tw-test-hover" bitBadge variant="success" [truncate]="truncate">Success</button>
+      <button class="tw-mx-1 tw-test-hover" bitBadge variant="danger" [truncate]="truncate">Danger</button>
+      <button class="tw-mx-1 tw-test-hover" bitBadge variant="warning" [truncate]="truncate">Warning</button>
+      <button class="tw-mx-1 tw-test-hover" bitBadge variant="info" [truncate]="truncate">Info</button>
+      <br/><br/>
+      <span class="tw-text-main tw-mx-1">Focus Visible</span>
+      <button class="tw-mx-1 tw-test-focus-visible" bitBadge variant="primary" [truncate]="truncate">Primary</button>
+      <button class="tw-mx-1 tw-test-focus-visible" bitBadge variant="secondary" [truncate]="truncate">Secondary</button>
+      <button class="tw-mx-1 tw-test-focus-visible" bitBadge variant="success" [truncate]="truncate">Success</button>
+      <button class="tw-mx-1 tw-test-focus-visible" bitBadge variant="danger" [truncate]="truncate">Danger</button>
+      <button class="tw-mx-1 tw-test-focus-visible" bitBadge variant="warning" [truncate]="truncate">Warning</button>
+      <button class="tw-mx-1 tw-test-focus-visible" bitBadge variant="info" [truncate]="truncate">Info</button>
+      <br/><br/>
+      <span class="tw-text-main tw-mx-1">Disabled</span>
+      <button disabled class="tw-mx-1" bitBadge variant="primary" [truncate]="truncate">Primary</button>
+      <button disabled class="tw-mx-1" bitBadge variant="secondary" [truncate]="truncate">Secondary</button>
+      <button disabled class="tw-mx-1" bitBadge variant="success" [truncate]="truncate">Success</button>
+      <button disabled class="tw-mx-1" bitBadge variant="danger" [truncate]="truncate">Danger</button>
+      <button disabled class="tw-mx-1" bitBadge variant="warning" [truncate]="truncate">Warning</button>
+      <button disabled class="tw-mx-1" bitBadge variant="info" [truncate]="truncate">Info</button>
+    `,
+  }),
+};
+
 export const Primary: Story = {
   render: (args) => ({
     props: args,
-    template: `
+    template: /*html*/ `
       <span class="tw-text-main">Span </span><span bitBadge [variant]="variant" [truncate]="truncate">Badge containing lengthy text</span>
       <br /><br />
       <span class="tw-text-main">Link </span><a href="#" bitBadge [variant]="variant" [truncate]="truncate">Badge</a>
diff --git a/libs/components/src/banner/banner.component.html b/libs/components/src/banner/banner.component.html
index 865aacd410a8..6c1375293b5c 100644
--- a/libs/components/src/banner/banner.component.html
+++ b/libs/components/src/banner/banner.component.html
@@ -1,5 +1,5 @@
 <div
-  class="tw-flex tw-items-center tw-gap-2 tw-p-2 tw-pl-4 tw-text-contrast tw-border-transparent tw-bg-clip-padding tw-border-solid tw-border-b tw-border-0"
+  class="tw-flex tw-items-center tw-gap-2 tw-p-2 tw-pl-4 tw-text-main tw-border-transparent tw-bg-clip-padding tw-border-solid tw-border-b tw-border-0"
   [ngClass]="bannerClass"
   [attr.role]="useAlertRole ? 'status' : null"
   [attr.aria-live]="useAlertRole ? 'polite' : null"
@@ -12,7 +12,7 @@
     *ngIf="showClose"
     type="button"
     bitIconButton="bwi-close"
-    buttonType="contrast"
+    buttonType="main"
     size="default"
     (click)="onClose.emit()"
     [attr.title]="'close' | i18n"
diff --git a/libs/components/src/banner/banner.component.ts b/libs/components/src/banner/banner.component.ts
index 099fa11fa4d7..a8805768b447 100644
--- a/libs/components/src/banner/banner.component.ts
+++ b/libs/components/src/banner/banner.component.ts
@@ -28,13 +28,13 @@ export class BannerComponent implements OnInit {
   get bannerClass() {
     switch (this.bannerType) {
       case "danger":
-        return "tw-bg-danger-600";
+        return "tw-bg-danger-100 tw-border-b-danger-700";
       case "info":
-        return "tw-bg-info-600";
+        return "tw-bg-info-100 tw-border-b-info-700";
       case "premium":
-        return "tw-bg-success-600";
+        return "tw-bg-success-100 tw-border-b-success-700";
       case "warning":
-        return "tw-bg-warning-600";
+        return "tw-bg-warning-100 tw-border-b-warning-700";
     }
   }
 }
diff --git a/libs/components/src/banner/banner.mdx b/libs/components/src/banner/banner.mdx
index 9f6aeb2aa7c3..d5b6a3b52793 100644
--- a/libs/components/src/banner/banner.mdx
+++ b/libs/components/src/banner/banner.mdx
@@ -15,7 +15,8 @@ persist across all pages a user navigates to.
 - Use banners sparingly, as they can feel intrusive to the user if they appear unexpectedly. Their
   effectiveness may decrease if too many are used.
 - Avoid stacking multiple banners.
-- Banners support a button link (text button).
+- Banners can contain a button or anchor that uses the `bitLink` directive with
+  `linkType="secondary"`.
 
 <Primary />
 
diff --git a/libs/components/src/banner/banner.stories.ts b/libs/components/src/banner/banner.stories.ts
index 26bbe30f63fb..c75d8b7034ae 100644
--- a/libs/components/src/banner/banner.stories.ts
+++ b/libs/components/src/banner/banner.stories.ts
@@ -53,7 +53,7 @@ export const Premium: Story = {
     template: `
       <bit-banner [bannerType]="bannerType" (onClose)="onClose($event)" [showClose]=showClose>
         Content Really Long Text Lorem Ipsum Ipsum Ipsum
-        <button bitLink linkType="contrast">Button</button>
+        <button bitLink linkType="secondary">Button</button>
       </bit-banner>
       `,
   }),
diff --git a/libs/components/src/button/button.component.spec.ts b/libs/components/src/button/button.component.spec.ts
index a75ac400a966..f3c3aa3175ce 100644
--- a/libs/components/src/button/button.component.spec.ts
+++ b/libs/components/src/button/button.component.spec.ts
@@ -27,57 +27,6 @@ describe("Button", () => {
     linkDebugElement = fixture.debugElement.query(By.css("a"));
   }));
 
-  it("should apply classes based on type", () => {
-    testAppComponent.buttonType = "primary";
-    fixture.detectChanges();
-    expect(buttonDebugElement.nativeElement.classList.contains("tw-bg-primary-600")).toBe(true);
-    expect(linkDebugElement.nativeElement.classList.contains("tw-bg-primary-600")).toBe(true);
-
-    testAppComponent.buttonType = "secondary";
-    fixture.detectChanges();
-    expect(buttonDebugElement.nativeElement.classList.contains("tw-border-text-muted")).toBe(true);
-    expect(linkDebugElement.nativeElement.classList.contains("tw-border-text-muted")).toBe(true);
-
-    testAppComponent.buttonType = "danger";
-    fixture.detectChanges();
-    expect(buttonDebugElement.nativeElement.classList.contains("tw-border-danger-600")).toBe(true);
-    expect(linkDebugElement.nativeElement.classList.contains("tw-border-danger-600")).toBe(true);
-
-    testAppComponent.buttonType = "unstyled";
-    fixture.detectChanges();
-    expect(
-      Array.from(buttonDebugElement.nativeElement.classList).some((klass: string) =>
-        klass.startsWith("tw-bg"),
-      ),
-    ).toBe(false);
-    expect(
-      Array.from(linkDebugElement.nativeElement.classList).some((klass: string) =>
-        klass.startsWith("tw-bg"),
-      ),
-    ).toBe(false);
-
-    testAppComponent.buttonType = null;
-    fixture.detectChanges();
-    expect(buttonDebugElement.nativeElement.classList.contains("tw-border-text-muted")).toBe(true);
-    expect(linkDebugElement.nativeElement.classList.contains("tw-border-text-muted")).toBe(true);
-  });
-
-  it("should apply block when true and inline-block when false", () => {
-    testAppComponent.block = true;
-    fixture.detectChanges();
-    expect(buttonDebugElement.nativeElement.classList.contains("tw-block")).toBe(true);
-    expect(linkDebugElement.nativeElement.classList.contains("tw-block")).toBe(true);
-    expect(buttonDebugElement.nativeElement.classList.contains("tw-inline-block")).toBe(false);
-    expect(linkDebugElement.nativeElement.classList.contains("tw-inline-block")).toBe(false);
-
-    testAppComponent.block = false;
-    fixture.detectChanges();
-    expect(buttonDebugElement.nativeElement.classList.contains("tw-inline-block")).toBe(true);
-    expect(linkDebugElement.nativeElement.classList.contains("tw-inline-block")).toBe(true);
-    expect(buttonDebugElement.nativeElement.classList.contains("tw-block")).toBe(false);
-    expect(linkDebugElement.nativeElement.classList.contains("tw-block")).toBe(false);
-  });
-
   it("should not be disabled when loading and disabled are false", () => {
     testAppComponent.loading = false;
     testAppComponent.disabled = false;
diff --git a/libs/components/src/button/button.component.ts b/libs/components/src/button/button.component.ts
index d8787c994f48..cc4b048d071d 100644
--- a/libs/components/src/button/button.component.ts
+++ b/libs/components/src/button/button.component.ts
@@ -4,9 +4,9 @@ import { Input, HostBinding, Component } from "@angular/core";
 import { ButtonLikeAbstraction, ButtonType } from "../shared/button-like.abstraction";
 
 const focusRing = [
-  "focus-visible:tw-ring",
+  "focus-visible:tw-ring-2",
   "focus-visible:tw-ring-offset-2",
-  "focus-visible:tw-ring-primary-700",
+  "focus-visible:tw-ring-primary-600",
   "focus-visible:tw-z-10",
 ];
 
@@ -17,37 +17,24 @@ const buttonStyles: Record<ButtonType, string[]> = {
     "!tw-text-contrast",
     "hover:tw-bg-primary-700",
     "hover:tw-border-primary-700",
-    "disabled:tw-bg-primary-600/60",
-    "disabled:tw-border-primary-600/60",
-    "disabled:!tw-text-contrast/60",
-    "disabled:tw-bg-clip-padding",
-    "disabled:tw-cursor-not-allowed",
     ...focusRing,
   ],
   secondary: [
     "tw-bg-transparent",
-    "tw-border-text-muted",
-    "!tw-text-muted",
-    "hover:tw-bg-text-muted",
-    "hover:tw-border-text-muted",
-    "hover:!tw-text-contrast",
-    "disabled:tw-bg-transparent",
-    "disabled:tw-border-text-muted/60",
-    "disabled:!tw-text-muted/60",
-    "disabled:tw-cursor-not-allowed",
+    "tw-border-primary-600",
+    "!tw-text-primary-600",
+    "hover:tw-bg-transparent",
+    "hover:tw-border-primary-700",
+    "hover:!tw-text-primary-700",
     ...focusRing,
   ],
   danger: [
     "tw-bg-transparent",
     "tw-border-danger-600",
     "!tw-text-danger",
-    "hover:tw-bg-danger-600",
-    "hover:tw-border-danger-600",
-    "hover:!tw-text-contrast",
-    "disabled:tw-bg-transparent",
-    "disabled:tw-border-danger-600/60",
-    "disabled:!tw-text-danger/60",
-    "disabled:tw-cursor-not-allowed",
+    "hover:tw-bg-transparent",
+    "hover:tw-border-danger-700",
+    "hover:!tw-text-danger-700",
     ...focusRing,
   ],
   unstyled: [],
@@ -64,14 +51,22 @@ export class ButtonComponent implements ButtonLikeAbstraction {
       "tw-font-semibold",
       "tw-py-1.5",
       "tw-px-3",
-      "tw-rounded",
+      "tw-rounded-full",
       "tw-transition",
-      "tw-border",
+      "tw-border-2",
       "tw-border-solid",
       "tw-text-center",
       "tw-no-underline",
-      "hover:tw-no-underline",
+      "hover:tw-underline",
       "focus:tw-outline-none",
+      "disabled:tw-bg-secondary-300",
+      "disabled:hover:tw-bg-secondary-300",
+      "disabled:tw-border-secondary-300",
+      "disabled:hover:tw-border-secondary-300",
+      "disabled:!tw-text-muted",
+      "disabled:hover:!tw-text-muted",
+      "disabled:tw-cursor-not-allowed",
+      "disabled:hover:tw-no-underline",
     ]
       .concat(this.block ? ["tw-w-full", "tw-block"] : ["tw-inline-block"])
       .concat(buttonStyles[this.buttonType ?? "secondary"]);
@@ -99,8 +94,4 @@ export class ButtonComponent implements ButtonLikeAbstraction {
   @Input() loading = false;
 
   @Input() disabled = false;
-
-  setButtonType(value: "primary" | "secondary" | "danger" | "unstyled") {
-    this.buttonType = value;
-  }
 }
diff --git a/libs/components/src/button/button.mdx b/libs/components/src/button/button.mdx
index 5ee709093e3b..33e4aed19f79 100644
--- a/libs/components/src/button/button.mdx
+++ b/libs/components/src/button/button.mdx
@@ -64,9 +64,6 @@ Use the danger styling only in settings when the user may preform a permanent ac
 
 ## Disabled UI
 
-Both the disabled and loading states use the default state’s color with a 60% opacity or
-`tw-opacity-60`.
-
 <Story of={stories.Disabled} />
 
 ## Block
diff --git a/libs/components/src/button/button.stories.ts b/libs/components/src/button/button.stories.ts
index 6923878b3531..260d5565c0cd 100644
--- a/libs/components/src/button/button.stories.ts
+++ b/libs/components/src/button/button.stories.ts
@@ -23,9 +23,21 @@ type Story = StoryObj<ButtonComponent>;
 export const Primary: Story = {
   render: (args) => ({
     props: args,
-    template: `
+    template: /*html*/ `
+    <div class="tw-flex tw-gap-4 tw-mb-6">
       <button bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [block]="block">Button</button>
-      <a bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [block]="block" href="#" class="tw-ml-2">Link</a>
+      <button bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [block]="block" class="tw-test-hover">Button:hover</button>
+      <button bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [block]="block" class="tw-test-focus-visible">Button:focus-visible</button>
+      <button bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [block]="block" class="tw-test-hover tw-test-focus-visible">Button:hover:focus-visible</button>
+      <button bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [block]="block" class="tw-test-active">Button:active</button>
+    </div>
+    <div class="tw-flex tw-gap-4">
+      <a href="#" bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [block]="block">Anchor</a>
+      <a href="#" bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [block]="block" class="tw-test-hover">Anchor:hover</a>
+      <a href="#" bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [block]="block" class="tw-test-focus-visible">Anchor:focus-visible</a>
+      <a href="#" bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [block]="block" class="tw-test-hover tw-test-focus-visible">Anchor:hover:focus-visible</a>
+      <a href="#" bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [block]="block" class="tw-test-active">Anchor:active</a>
+    </div>
     `,
   }),
   args: {
diff --git a/libs/components/src/callout/callout.component.html b/libs/components/src/callout/callout.component.html
index 57da850d8bb6..f64e197b9ef2 100644
--- a/libs/components/src/callout/callout.component.html
+++ b/libs/components/src/callout/callout.component.html
@@ -1,16 +1,13 @@
 <aside
-  class="tw-mb-4 tw-box-border tw-rounded tw-border tw-border-l-8 tw-border-solid tw-border-secondary-300 tw-bg-background-alt tw-px-5 tw-py-3 tw-leading-5 tw-text-main"
+  class="tw-mb-4 tw-box-border tw-rounded-lg tw-border tw-border-l-4 tw-border-solid tw-bg-background tw-pl-3 tw-pr-2 tw-py-2 tw-leading-5 tw-text-main"
   [ngClass]="calloutClass"
   [attr.aria-labelledby]="titleId"
 >
-  <header
-    id="{{ titleId }}"
-    class="tw-mb-2 tw-mt-0 tw-text-base tw-font-bold tw-uppercase"
-    [ngClass]="headerClass"
-    *ngIf="title"
-  >
-    <i class="bwi {{ icon }}" *ngIf="icon" aria-hidden="true"></i>
+  <header id="{{ titleId }}" class="tw-mb-1 tw-mt-0 tw-text-base tw-font-semibold" *ngIf="title">
+    <i class="bwi" [ngClass]="[icon, headerClass]" *ngIf="icon" aria-hidden="true"></i>
     {{ title }}
   </header>
-  <ng-content></ng-content>
+  <div bitTypography="body2">
+    <ng-content></ng-content>
+  </div>
 </aside>
diff --git a/libs/components/src/callout/callout.component.spec.ts b/libs/components/src/callout/callout.component.spec.ts
index 36abae437d55..b7388da34925 100644
--- a/libs/components/src/callout/callout.component.spec.ts
+++ b/libs/components/src/callout/callout.component.spec.ts
@@ -12,7 +12,7 @@ describe("Callout", () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [CalloutComponent],
+      imports: [CalloutComponent],
       providers: [
         {
           provide: I18nService,
diff --git a/libs/components/src/callout/callout.component.ts b/libs/components/src/callout/callout.component.ts
index bfeae17b359b..0fa1c1305042 100644
--- a/libs/components/src/callout/callout.component.ts
+++ b/libs/components/src/callout/callout.component.ts
@@ -2,6 +2,9 @@ import { Component, Input, OnInit } from "@angular/core";
 
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 
+import { SharedModule } from "../shared";
+import { TypographyModule } from "../typography";
+
 export type CalloutTypes = "success" | "info" | "warning" | "danger";
 
 const defaultIcon: Record<CalloutTypes, string> = {
@@ -22,6 +25,8 @@ let nextId = 0;
 @Component({
   selector: "bit-callout",
   templateUrl: "callout.component.html",
+  standalone: true,
+  imports: [SharedModule, TypographyModule],
 })
 export class CalloutComponent implements OnInit {
   @Input() type: CalloutTypes = "info";
@@ -42,13 +47,13 @@ export class CalloutComponent implements OnInit {
   get calloutClass() {
     switch (this.type) {
       case "danger":
-        return "tw-border-l-danger-600";
+        return "tw-border-danger-600";
       case "info":
-        return "tw-border-l-info-600";
+        return "tw-border-info-600";
       case "success":
-        return "tw-border-l-success-600";
+        return "tw-border-success-600";
       case "warning":
-        return "tw-border-l-warning-600";
+        return "tw-border-warning-600";
     }
   }
 
diff --git a/libs/components/src/callout/callout.mdx b/libs/components/src/callout/callout.mdx
index a40a970f8953..3fdb53943b4c 100644
--- a/libs/components/src/callout/callout.mdx
+++ b/libs/components/src/callout/callout.mdx
@@ -2,6 +2,10 @@ import { Meta, Story, Primary, Controls } from "@storybook/addon-docs";
 
 import * as stories from "./callout.stories";
 
+```ts
+import { CalloutModule } from "@bitwarden/components";
+```
+
 <Meta of={stories} />
 
 # Callouts
diff --git a/libs/components/src/callout/callout.module.ts b/libs/components/src/callout/callout.module.ts
index fac89dfbcf9d..ad7e083fec75 100644
--- a/libs/components/src/callout/callout.module.ts
+++ b/libs/components/src/callout/callout.module.ts
@@ -1,11 +1,9 @@
-import { CommonModule } from "@angular/common";
 import { NgModule } from "@angular/core";
 
 import { CalloutComponent } from "./callout.component";
 
 @NgModule({
-  imports: [CommonModule],
+  imports: [CalloutComponent],
   exports: [CalloutComponent],
-  declarations: [CalloutComponent],
 })
 export class CalloutModule {}
diff --git a/libs/components/src/checkbox/checkbox.component.ts b/libs/components/src/checkbox/checkbox.component.ts
index d8fd3f76eaad..ef57d3d5cd3f 100644
--- a/libs/components/src/checkbox/checkbox.component.ts
+++ b/libs/components/src/checkbox/checkbox.component.ts
@@ -17,12 +17,13 @@ export class CheckboxComponent implements BitFormControlAbstraction {
     "tw-transition",
     "tw-cursor-pointer",
     "tw-inline-block",
+    "tw-align-sub",
     "tw-rounded",
     "tw-border",
     "tw-border-solid",
-    "tw-border-secondary-600",
-    "tw-h-3.5",
-    "tw-w-3.5",
+    "tw-border-secondary-500",
+    "tw-h-5",
+    "tw-w-5",
     "tw-mr-1.5",
     "tw-bottom-[-1px]", // Fix checkbox looking off-center
     "tw-flex-none", // Flexbox fix for bit-form-control
@@ -35,13 +36,16 @@ export class CheckboxComponent implements BitFormControlAbstraction {
     "hover:tw-border-2",
     "[&>label]:tw-border-2",
 
-    "focus-visible:tw-ring-2",
-    "focus-visible:tw-ring-offset-2",
-    "focus-visible:tw-ring-primary-700",
+    // if it exists, the parent form control handles focus
+    "[&:not(bit-form-control_*)]:focus-visible:tw-ring-2",
+    "[&:not(bit-form-control_*)]:focus-visible:tw-ring-offset-2",
+    "[&:not(bit-form-control_*)]:focus-visible:tw-ring-primary-600",
 
     "disabled:tw-cursor-auto",
     "disabled:tw-border",
+    "disabled:hover:tw-border",
     "disabled:tw-bg-secondary-100",
+    "disabled:hover:tw-bg-secondary-100",
 
     "checked:tw-bg-primary-600",
     "checked:tw-border-primary-600",
@@ -53,6 +57,7 @@ export class CheckboxComponent implements BitFormControlAbstraction {
     "checked:before:tw-mask-position-[center]",
     "checked:before:tw-mask-repeat-[no-repeat]",
     "checked:disabled:tw-border-secondary-100",
+    "checked:disabled:hover:tw-border-secondary-100",
     "checked:disabled:tw-bg-secondary-100",
     "checked:disabled:before:tw-bg-text-muted",
 
@@ -78,11 +83,11 @@ export class CheckboxComponent implements BitFormControlAbstraction {
 
   @HostBinding("style.--mask-image")
   protected maskImage =
-    `url('data:image/svg+xml,%3Csvg class="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="8" height="8" viewBox="0 0 10 10"%3E%3Cpath d="M0.5 6.2L2.9 8.6L9.5 1.4" fill="none" stroke="white" stroke-width="2"%3E%3C/path%3E%3C/svg%3E')`;
+    `url('data:image/svg+xml,%3Csvg class="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="12" height="12" viewBox="0 0 10 10"%3E%3Cpath d="M0.5 6.2L2.9 8.6L9.5 1.4" fill="none" stroke="white" stroke-width="2"%3E%3C/path%3E%3C/svg%3E')`;
 
   @HostBinding("style.--indeterminate-mask-image")
   protected indeterminateImage =
-    `url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="13" height="13" fill="none" viewBox="0 0 13 13"%3E%3Cpath stroke="%23fff" stroke-width="2" d="M2.5 6.5h8"/%3E%3C/svg%3E%0A')`;
+    `url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 13 13"%3E%3Cpath stroke="%23fff" stroke-width="2" d="M2.5 6.5h8"/%3E%3C/svg%3E%0A')`;
 
   @HostBinding()
   @Input()
diff --git a/libs/components/src/checkbox/checkbox.stories.ts b/libs/components/src/checkbox/checkbox.stories.ts
index 0d649eb433d8..c322f29b957f 100644
--- a/libs/components/src/checkbox/checkbox.stories.ts
+++ b/libs/components/src/checkbox/checkbox.stories.ts
@@ -11,12 +11,14 @@ import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
 
 import { I18nService } from "@bitwarden/common/src/platform/abstractions/i18n.service";
 
+import { BadgeModule } from "../badge";
 import { FormControlModule } from "../form-control";
+import { TableModule } from "../table";
 import { I18nMockService } from "../utils/i18n-mock.service";
 
 import { CheckboxModule } from "./checkbox.module";
 
-const template = `
+const template = /*html*/ `
   <form [formGroup]="formObj">
     <bit-form-control>
       <input type="checkbox" bitCheckbox formControlName="checkbox" />
@@ -54,7 +56,14 @@ export default {
   decorators: [
     moduleMetadata({
       declarations: [ExampleComponent],
-      imports: [FormsModule, ReactiveFormsModule, FormControlModule, CheckboxModule],
+      imports: [
+        FormsModule,
+        ReactiveFormsModule,
+        FormControlModule,
+        CheckboxModule,
+        TableModule,
+        BadgeModule,
+      ],
       providers: [
         {
           provide: I18nService,
@@ -82,7 +91,10 @@ type Story = StoryObj<ExampleComponent>;
 export const Default: Story = {
   render: (args) => ({
     props: args,
-    template: `<app-example [checked]="checked" [disabled]="disabled"></app-example>`,
+    template: /*html*/ `
+      <app-example></app-example>
+      <app-example [checked]="true"></app-example>
+    `,
   }),
   parameters: {
     docs: {
@@ -91,9 +103,39 @@ export const Default: Story = {
       },
     },
   },
-  args: {
-    checked: false,
-    disabled: false,
+};
+
+export const LongLabel: Story = {
+  render: () => ({
+    props: {
+      formObj: new FormGroup({
+        checkbox: new FormControl(false),
+      }),
+    },
+    template: /*html*/ `
+      <form [formGroup]="formObj" class="tw-w-96">
+        <bit-form-control>
+          <input type="checkbox" bitCheckbox formControlName="checkbox">
+          <bit-label>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur iaculis consequat enim vitae elementum.
+            Ut non odio est. </bit-label>
+        </bit-form-control>
+        <bit-form-control>
+          <input type="checkbox" bitCheckbox formControlName="checkbox">
+          <bit-label>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur iaculis consequat enim vitae elementum.
+            Ut non odio est.
+            <span slot="end" bitBadge variant="success">Premium</span>
+          </bit-label>
+        </bit-form-control>
+      </form>
+    `,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: template,
+      },
+    },
   },
 };
 
@@ -104,7 +146,7 @@ export const Hint: Story = {
         checkbox: new FormControl(false),
       }),
     },
-    template: `
+    template: /*html*/ `
       <form [formGroup]="formObj">
         <bit-form-control>
           <input type="checkbox" bitCheckbox formControlName="checkbox" />
@@ -131,20 +173,37 @@ export const Hint: Story = {
   },
 };
 
+export const Disabled: Story = {
+  render: (args) => ({
+    props: args,
+    template: /*html*/ `
+      <app-example [disabled]="true"></app-example>
+      <app-example [checked]="true" [disabled]="true"></app-example>
+    `,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: template,
+      },
+    },
+  },
+};
+
 export const Custom: Story = {
   render: (args) => ({
     props: args,
-    template: `
+    template: /*html*/ `
       <div class="tw-flex tw-flex-col tw-w-32">
-        <label class="tw-text-main tw-flex tw-bg-secondary-300 tw-p-2 tw-items-baseline">
+        <label class="tw-text-main tw-flex tw-bg-secondary-300 tw-p-2">
           A-Z
           <input class="tw-ml-auto focus-visible:tw-ring-offset-secondary-300" type="checkbox" bitCheckbox />
         </label>
-        <label class="tw-text-main tw-flex tw-bg-secondary-300 tw-p-2 tw-items-baseline">
+        <label class="tw-text-main tw-flex tw-bg-secondary-300 tw-p-2">
           a-z
           <input class="tw-ml-auto focus-visible:tw-ring-offset-secondary-300" type="checkbox" bitCheckbox />
         </label>
-        <label class="tw-text-main tw-flex tw-bg-secondary-300 tw-p-2 tw-items-baseline">
+        <label class="tw-text-main tw-flex tw-bg-secondary-300 tw-p-2">
           0-9
           <input class="tw-ml-auto focus-visible:tw-ring-offset-secondary-300" type="checkbox" bitCheckbox />
         </label>
@@ -156,8 +215,51 @@ export const Custom: Story = {
 export const Indeterminate: Story = {
   render: (args) => ({
     props: args,
-    template: `
+    template: /*html*/ `
       <input type="checkbox" bitCheckbox [indeterminate]="true">
     `,
   }),
 };
+
+export const InTableRow: Story = {
+  render: () => ({
+    template: /*html*/ `
+      <bit-table>
+        <ng-container header>
+          <tr>
+            <th bitCell>
+              <input
+                type="checkbox"
+                bitCheckbox
+                id="checkAll"
+                class="tw-mr-2"
+              />
+              <label for="checkAll" class="tw-mb-0">
+                All
+              </label>
+            </th>
+            <th bitCell>
+              Foo
+            </th>
+            <th bitCell>
+              Bar
+            </th>
+          </tr>
+        </ng-container>
+        <ng-template body>
+          <tr bitRow>
+            <td bitCell>
+              <input
+                type="checkbox"
+                bitCheckbox
+                id="checkOne"
+              />
+            </td>
+            <td bitCell>Lorem</td>
+            <td bitCell>Ipsum</td>
+          </tr>
+        </ng-template>
+      </bit-table>
+    `,
+  }),
+};
diff --git a/libs/components/src/chip-select/chip-select.component.html b/libs/components/src/chip-select/chip-select.component.html
index 91d9d0fadb56..cc4e5038d744 100644
--- a/libs/components/src/chip-select/chip-select.component.html
+++ b/libs/components/src/chip-select/chip-select.component.html
@@ -1,17 +1,19 @@
 <div
   bitTypography="body2"
-  class="tw-inline-flex tw-items-center tw-rounded-full tw-max-w-52 tw-border-solid tw-border tw-border-text-muted"
-  [ngClass]="[
-    selectedOption
-      ? 'tw-bg-text-muted tw-text-contrast tw-gap-1'
-      : 'tw-bg-transparent tw-text-muted tw-gap-1.5',
-    focusVisibleWithin() ? 'tw-ring-2 tw-ring-primary-500 tw-ring-offset-1' : '',
-  ]"
+  class="tw-inline-flex tw-items-center tw-rounded-full tw-max-w-52 tw-border-solid tw-border tw-gap-1.5"
+  [ngClass]="{
+    'tw-bg-text-muted hover:tw-bg-secondary-700 tw-text-contrast hover:tw-border-secondary-700':
+      selectedOption && !disabled,
+    'tw-bg-transparent hover:tw-bg-background-alt !tw-text-muted': !selectedOption && !disabled,
+    'tw-bg-secondary-300 tw-text-muted tw-border-transparent': disabled,
+    'tw-border-text-muted': !disabled,
+    'tw-ring-2 tw-ring-primary-600 tw-ring-offset-1': focusVisibleWithin(),
+  }"
 >
   <!-- Primary button -->
   <button
     type="button"
-    class="fvw-target tw-inline-flex tw-gap-1.5 tw-items-center tw-bg-transparent hover:tw-bg-transparent tw-border-none tw-outline-none tw-max-w-full tw-py-1 tw-pl-3 last:tw-pr-3 tw-truncate tw-text-[inherit]"
+    class="fvw-target tw-inline-flex tw-gap-1.5 tw-items-center tw-bg-transparent hover:tw-bg-transparent tw-border-none tw-outline-none tw-max-w-full tw-py-1 tw-pl-3 last:tw-pr-3 [&:not(:last-child)]:tw-pr-0 tw-truncate tw-text-[color:inherit] tw-text-[length:inherit]"
     [ngClass]="{
       'tw-cursor-not-allowed': disabled,
     }"
@@ -24,7 +26,7 @@
     <span class="tw-truncate">{{ label }}</span>
     <i
       *ngIf="!selectedOption"
-      class="bwi"
+      class="bwi tw-mt-0.5"
       [ngClass]="menuTrigger.isOpen ? 'bwi-angle-up' : 'bwi-angle-down'"
     ></i>
   </button>
@@ -35,7 +37,7 @@
     type="button"
     [attr.aria-label]="'removeItem' | i18n: label"
     [disabled]="disabled"
-    class="tw-bg-transparent hover:tw-bg-transparent tw-outline-none tw-rounded-full tw-p-1 tw-my-1 tw-mr-1 tw-text-[inherit] tw-border-solid tw-border tw-border-text-muted hover:tw-border-text-contrast hover:disabled:tw-border-transparent tw-aspect-square tw-flex tw-items-center tw-justify-center tw-h-fit focus-visible:tw-ring-2 tw-ring-text-contrast focus-visible:hover:tw-border-transparent"
+    class="tw-bg-transparent hover:tw-bg-transparent tw-outline-none tw-rounded-full tw-py-0.5 tw-px-1 tw-mr-1 tw-text-[color:inherit] tw-text-[length:inherit] tw-border-solid tw-border tw-border-transparent hover:tw-border-text-contrast hover:disabled:tw-border-transparent tw-flex tw-items-center tw-justify-center focus-visible:tw-ring-2 tw-ring-text-contrast focus-visible:hover:tw-border-transparent"
     [ngClass]="{
       'tw-cursor-not-allowed': disabled,
     }"
@@ -45,7 +47,7 @@
   </button>
 </div>
 
-<bit-menu #menu>
+<bit-menu #menu (closed)="handleMenuClosed()">
   <div *ngIf="renderedOptions" class="tw-max-h-80 tw-min-w-52 tw-max-w-80 tw-text-sm">
     <ng-container *ngIf="getParent(renderedOptions) as parent">
       <button
@@ -53,6 +55,7 @@
         bitMenuItem
         (click)="viewOption(parent, $event)"
         [title]="parent.label ? ('backTo' | i18n: parent.label) : ('back' | i18n)"
+        class="tw-text-[length:inherit]"
       >
         <i slot="start" class="bwi bwi-angle-left" aria-hidden="true"></i>
         {{ parent.label ? ("backTo" | i18n: parent.label) : ("back" | i18n) }}
@@ -63,6 +66,7 @@
         bitMenuItem
         (click)="selectOption(renderedOptions, $event)"
         [title]="'viewItemsIn' | i18n: renderedOptions.label"
+        class="tw-text-[length:inherit]"
       >
         <i slot="start" class="bwi bwi-list" aria-hidden="true"></i>
         {{ "viewItemsIn" | i18n: renderedOptions.label }}
@@ -76,6 +80,7 @@
       (click)="option.children?.length ? viewOption(option, $event) : selectOption(option, $event)"
       [disabled]="option.disabled"
       [title]="option.label"
+      class="tw-text-[length:inherit]"
     >
       <i
         *ngIf="option.icon"
diff --git a/libs/components/src/chip-select/chip-select.component.ts b/libs/components/src/chip-select/chip-select.component.ts
index 66b4dddb2961..eeeeaf1a286e 100644
--- a/libs/components/src/chip-select/chip-select.component.ts
+++ b/libs/components/src/chip-select/chip-select.component.ts
@@ -1,4 +1,11 @@
-import { Component, HostListener, Input, booleanAttribute, signal } from "@angular/core";
+import {
+  Component,
+  HostBinding,
+  HostListener,
+  Input,
+  booleanAttribute,
+  signal,
+} from "@angular/core";
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
 
 import { compareValues } from "../../../common/src/platform/misc/compare-values";
@@ -62,6 +69,11 @@ export class ChipSelectComponent<T = unknown> implements ControlValueAccessor {
     this.focusVisibleWithin.set(false);
   }
 
+  @HostBinding("class")
+  get classList() {
+    return ["tw-inline-block"];
+  }
+
   /** Tree constructed from `this.options` */
   private rootTree: ChipSelectOption<T>;
 
@@ -81,6 +93,10 @@ export class ChipSelectComponent<T = unknown> implements ControlValueAccessor {
     return this.selectedOption?.icon || this.placeholderIcon;
   }
 
+  protected handleMenuClosed(): void {
+    this.renderedOptions = this.selectedOption ?? this.rootTree;
+  }
+
   protected selectOption(option: ChipSelectOption<T>, _event: MouseEvent) {
     this.selectedOption = option;
     this.onChange(option);
diff --git a/libs/components/src/chip-select/chip-select.stories.ts b/libs/components/src/chip-select/chip-select.stories.ts
index e1489ec99336..99b0b4bc4a1a 100644
--- a/libs/components/src/chip-select/chip-select.stories.ts
+++ b/libs/components/src/chip-select/chip-select.stories.ts
@@ -35,6 +35,47 @@ export default {
 type Story = StoryObj<ChipSelectComponent & { value: any }>;
 
 export const Default: Story = {
+  render: (args) => ({
+    props: {
+      ...args,
+    },
+    template: /* html */ `
+      <bit-chip-select
+        placeholderText="Folder"
+        placeholderIcon="bwi-folder"
+        [options]="options"
+      ></bit-chip-select>
+      <bit-chip-select
+        placeholderText="Folder"
+        placeholderIcon="bwi-folder"
+        [options]="options"
+        [ngModel]="value"
+      ></bit-chip-select>
+    `,
+  }),
+  args: {
+    options: [
+      {
+        label: "Foo",
+        value: "foo",
+        icon: "bwi-folder",
+      },
+      {
+        label: "Bar",
+        value: "bar",
+        icon: "bwi-exclamation-triangle tw-text-danger",
+      },
+      {
+        label: "Baz",
+        value: "baz",
+        disabled: true,
+      },
+    ],
+    value: "foo",
+  },
+};
+
+export const MenuOpen: Story = {
   render: (args) => ({
     props: {
       ...args,
diff --git a/libs/components/src/dialog/dialog.service.stories.ts b/libs/components/src/dialog/dialog.service.stories.ts
index b94b61f7c900..e28f0ac4b195 100644
--- a/libs/components/src/dialog/dialog.service.stories.ts
+++ b/libs/components/src/dialog/dialog.service.stories.ts
@@ -78,6 +78,7 @@ export default {
           useFactory: () => {
             return new I18nMockService({
               close: "Close",
+              loading: "Loading",
             });
           },
         },
diff --git a/libs/components/src/dialog/dialog/dialog.component.html b/libs/components/src/dialog/dialog/dialog.component.html
index c07239af6d6a..06a7772edbe0 100644
--- a/libs/components/src/dialog/dialog/dialog.component.html
+++ b/libs/components/src/dialog/dialog/dialog.component.html
@@ -1,12 +1,17 @@
 <section
-  class="tw-flex tw-w-full tw-flex-col tw-self-center tw-overflow-hidden tw-rounded tw-border tw-border-solid tw-border-secondary-300 tw-bg-background tw-text-main"
+  class="tw-flex tw-w-full tw-flex-col tw-self-center tw-overflow-hidden tw-rounded-xl tw-border tw-border-solid tw-border-secondary-300 tw-bg-background tw-text-main"
   [ngClass]="width"
   @fadeIn
 >
   <header
     class="tw-flex tw-justify-between tw-items-center tw-gap-4 tw-border-0 tw-border-b tw-border-solid tw-border-secondary-300 tw-p-4"
   >
-    <h1 bitDialogTitleContainer bitTypography="h3" noMargin class="tw-mb-0 tw-truncate">
+    <h1
+      bitDialogTitleContainer
+      bitTypography="h3"
+      noMargin
+      class="tw-text-main tw-mb-0 tw-truncate"
+    >
       {{ title }}
       <span *ngIf="subtitle" class="tw-text-muted tw-font-normal tw-text-sm">
         {{ subtitle }}
@@ -24,15 +29,19 @@ <h1 bitDialogTitleContainer bitTypography="h3" noMargin class="tw-mb-0 tw-trunca
     ></button>
   </header>
 
-  <div class="tw-relative tw-flex tw-flex-col tw-overflow-hidden">
+  <div
+    class="tw-relative tw-flex tw-flex-col tw-overflow-hidden"
+    [ngClass]="{
+      'tw-min-h-60': loading,
+    }"
+  >
     <div
       *ngIf="loading"
       class="tw-absolute tw-flex tw-h-full tw-w-full tw-items-center tw-justify-center"
     >
-      <i class="bwi bwi-spinner bwi-spin bwi-3x"></i>
+      <i class="bwi bwi-spinner bwi-spin bwi-lg" [attr.aria-label]="'loading' | i18n"></i>
     </div>
     <div
-      class="tw-pb-8"
       [ngClass]="{
         'tw-p-4': !disablePadding,
         'tw-overflow-y-auto': !loading,
@@ -46,7 +55,7 @@ <h1 bitDialogTitleContainer bitTypography="h3" noMargin class="tw-mb-0 tw-trunca
   </div>
 
   <footer
-    class="tw-flex tw-flex-row tw-items-center tw-gap-2 tw-border-0 tw-border-t tw-border-solid tw-border-secondary-300 tw-bg-background-alt tw-p-4"
+    class="tw-flex tw-flex-row tw-items-center tw-gap-2 tw-border-0 tw-border-t tw-border-solid tw-border-secondary-300 tw-bg-background tw-p-4"
   >
     <ng-content select="[bitDialogFooter]"></ng-content>
   </footer>
diff --git a/libs/components/src/dialog/dialog/dialog.mdx b/libs/components/src/dialog/dialog/dialog.mdx
index d7ccd423da94..c05bdd454455 100644
--- a/libs/components/src/dialog/dialog/dialog.mdx
+++ b/libs/components/src/dialog/dialog/dialog.mdx
@@ -75,3 +75,10 @@ loading state.
 Use tabs to separate related content within a dialog.
 
 <Story of={stories.TabContent} />
+
+## Background Color
+
+The `background` input can be set to `alt` to change the background color. This is useful for
+dialogs that contain multiple card sections.
+
+<Story of={stories.WithCards} />
diff --git a/libs/components/src/dialog/dialogs.mdx b/libs/components/src/dialog/dialogs.mdx
index 9a63e1301b06..b5861aefe5c6 100644
--- a/libs/components/src/dialog/dialogs.mdx
+++ b/libs/components/src/dialog/dialogs.mdx
@@ -4,6 +4,10 @@ import * as stories from "./dialog.service.stories";
 
 <Meta title="Component Library/Dialogs" />
 
+```ts
+import { DialogModule } from "@bitwarden/components";
+```
+
 # Dialog
 
 Dialogs are used throughout the app to help the user focus on a specific action.
diff --git a/libs/components/src/dialog/simple-dialog/simple-configurable-dialog/simple-configurable-dialog.service.stories.ts b/libs/components/src/dialog/simple-dialog/simple-configurable-dialog/simple-configurable-dialog.service.stories.ts
index 6c2a25c67ca6..7b7d46ee96f1 100644
--- a/libs/components/src/dialog/simple-dialog/simple-configurable-dialog/simple-configurable-dialog.service.stories.ts
+++ b/libs/components/src/dialog/simple-dialog/simple-configurable-dialog/simple-configurable-dialog.service.stories.ts
@@ -1,4 +1,5 @@
 import { Component } from "@angular/core";
+import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
 import { Meta, StoryObj, applicationConfig, moduleMetadata } from "@storybook/angular";
 
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
@@ -144,7 +145,7 @@ export default {
   component: StoryDialogComponent,
   decorators: [
     moduleMetadata({
-      imports: [ButtonModule, DialogModule, CalloutModule],
+      imports: [ButtonModule, BrowserAnimationsModule, DialogModule, CalloutModule],
     }),
     applicationConfig({
       providers: [
diff --git a/libs/components/src/dialog/simple-dialog/simple-dialog.component.html b/libs/components/src/dialog/simple-dialog/simple-dialog.component.html
index efbc4343cd78..0b56c6287dca 100644
--- a/libs/components/src/dialog/simple-dialog/simple-dialog.component.html
+++ b/libs/components/src/dialog/simple-dialog/simple-dialog.component.html
@@ -1,5 +1,5 @@
 <div
-  class="tw-my-4 tw-flex tw-max-h-screen tw-w-96 tw-max-w-90vw tw-flex-col tw-overflow-hidden tw-rounded tw-border tw-border-solid tw-border-secondary-300 tw-bg-text-contrast tw-text-main"
+  class="tw-my-4 tw-flex tw-max-h-screen tw-w-96 tw-max-w-90vw tw-flex-col tw-overflow-hidden tw-rounded-3xl tw-border tw-border-solid tw-border-secondary-300 tw-bg-text-contrast tw-text-main"
   @fadeIn
 >
   <div class="tw-flex tw-flex-col tw-items-center tw-gap-2 tw-px-4 tw-pt-4 tw-text-center">
@@ -11,13 +11,15 @@
     </ng-template>
     <h1
       bitDialogTitleContainer
-      class="tw-mb-0 tw-text-base tw-font-semibold tw-w-full tw-break-words tw-hyphens-auto"
+      bitTypography="h3"
+      noMargin
+      class="tw-w-full tw-text-main tw-break-words tw-hyphens-auto"
     >
       <ng-content select="[bitDialogTitle]"></ng-content>
     </h1>
   </div>
   <div
-    class="tw-overflow-y-auto tw-px-4 tw-pb-4 tw-pt-2 tw-text-center tw-text-base tw-break-words tw-hyphens-auto"
+    class="tw-overflow-y-auto tw-px-4 tw-pb-4 tw-text-center tw-text-base tw-break-words tw-hyphens-auto"
   >
     <ng-content select="[bitDialogContent]"></ng-content>
   </div>
diff --git a/libs/components/src/dialog/simple-dialog/simple-dialog.service.stories.ts b/libs/components/src/dialog/simple-dialog/simple-dialog.service.stories.ts
index 08ca6f7dee80..665d658f8eef 100644
--- a/libs/components/src/dialog/simple-dialog/simple-dialog.service.stories.ts
+++ b/libs/components/src/dialog/simple-dialog/simple-dialog.service.stories.ts
@@ -1,5 +1,6 @@
-import { DialogModule, DialogRef, DIALOG_DATA } from "@angular/cdk/dialog";
+import { DialogRef, DIALOG_DATA } from "@angular/cdk/dialog";
 import { Component, Inject } from "@angular/core";
+import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
 import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
 
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
@@ -8,11 +9,8 @@ import { ButtonModule } from "../../button";
 import { IconButtonModule } from "../../icon-button";
 import { SharedModule } from "../../shared/shared.module";
 import { I18nMockService } from "../../utils/i18n-mock.service";
+import { DialogModule } from "../dialog.module";
 import { DialogService } from "../dialog.service";
-import { DialogCloseDirective } from "../directives/dialog-close.directive";
-import { DialogTitleContainerDirective } from "../directives/dialog-title-container.directive";
-
-import { SimpleDialogComponent } from "./simple-dialog.component";
 
 interface Animal {
   animal: string;
@@ -65,13 +63,14 @@ export default {
   component: StoryDialogComponent,
   decorators: [
     moduleMetadata({
-      declarations: [
-        StoryDialogContentComponent,
-        DialogCloseDirective,
-        DialogTitleContainerDirective,
-        SimpleDialogComponent,
+      declarations: [StoryDialogContentComponent],
+      imports: [
+        SharedModule,
+        IconButtonModule,
+        ButtonModule,
+        BrowserAnimationsModule,
+        DialogModule,
       ],
-      imports: [SharedModule, IconButtonModule, ButtonModule, DialogModule],
       providers: [
         DialogService,
         {
diff --git a/libs/components/src/dialog/simple-dialog/simple-dialog.stories.ts b/libs/components/src/dialog/simple-dialog/simple-dialog.stories.ts
index 34dedaaec0d7..d86b56101b04 100644
--- a/libs/components/src/dialog/simple-dialog/simple-dialog.stories.ts
+++ b/libs/components/src/dialog/simple-dialog/simple-dialog.stories.ts
@@ -1,17 +1,17 @@
+import { NoopAnimationsModule } from "@angular/platform-browser/animations";
 import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
 
 import { ButtonModule } from "../../button";
-import { DialogTitleContainerDirective } from "../directives/dialog-title-container.directive";
+import { DialogModule } from "../dialog.module";
 
-import { IconDirective, SimpleDialogComponent } from "./simple-dialog.component";
+import { SimpleDialogComponent } from "./simple-dialog.component";
 
 export default {
   title: "Component Library/Dialogs/Simple Dialog",
   component: SimpleDialogComponent,
   decorators: [
     moduleMetadata({
-      imports: [ButtonModule],
-      declarations: [IconDirective, DialogTitleContainerDirective],
+      imports: [ButtonModule, NoopAnimationsModule, DialogModule],
     }),
   ],
   parameters: {
diff --git a/libs/components/src/form-control/form-control.component.html b/libs/components/src/form-control/form-control.component.html
index 91bba1719df4..c2270ab79a65 100644
--- a/libs/components/src/form-control/form-control.component.html
+++ b/libs/components/src/form-control/form-control.component.html
@@ -1,13 +1,19 @@
-<label [class]="labelClasses">
+<label
+  class="tw-transition tw-select-none tw-mb-0 tw-inline-flex tw-rounded tw-p-0.5 has-[:focus-visible]:tw-ring has-[:focus-visible]:tw-ring-primary-600"
+  [ngClass]="[formControl.disabled ? 'tw-cursor-auto' : 'tw-cursor-pointer']"
+>
   <ng-content></ng-content>
-  <span [class]="labelContentClasses">
-    <span>
+  <span
+    class="tw-inline-flex tw-flex-col"
+    [ngClass]="formControl.disabled ? 'tw-text-muted' : 'tw-text-main'"
+  >
+    <span bitTypography="body1">
       <ng-content select="bit-label"></ng-content>
       <span *ngIf="required" class="tw-text-xs tw-font-normal"> ({{ "required" | i18n }})</span>
     </span>
     <ng-content select="bit-hint" *ngIf="!hasError"></ng-content>
   </span>
 </label>
-<div *ngIf="hasError" class="tw-mt-1 tw-text-danger">
+<div *ngIf="hasError" class="tw-mt-1 tw-text-danger tw-text-xs tw-ml-0.5">
   <i class="bwi bwi-error"></i> {{ displayError }}
 </div>
diff --git a/libs/components/src/form-control/form-control.component.ts b/libs/components/src/form-control/form-control.component.ts
index 5a808e606d59..ec61109be4e8 100644
--- a/libs/components/src/form-control/form-control.component.ts
+++ b/libs/components/src/form-control/form-control.component.ts
@@ -33,27 +33,11 @@ export class FormControlComponent {
   @HostBinding("class") get classes() {
     return []
       .concat(this.inline ? ["tw-inline-block", "tw-mr-4"] : ["tw-block"])
-      .concat(this.disableMargin ? [] : ["tw-mb-6"]);
+      .concat(this.disableMargin ? [] : ["tw-mb-4"]);
   }
 
   constructor(private i18nService: I18nService) {}
 
-  protected get labelClasses() {
-    return [
-      "tw-transition",
-      "tw-select-none",
-      "tw-mb-0",
-      "tw-inline-flex",
-      "tw-items-baseline",
-    ].concat(this.formControl.disabled ? "tw-cursor-auto" : "tw-cursor-pointer");
-  }
-
-  protected get labelContentClasses() {
-    return ["tw-inline-flex", "tw-flex-col", "tw-font-semibold"].concat(
-      this.formControl.disabled ? "tw-text-muted" : "tw-text-main",
-    );
-  }
-
   get required() {
     return this.formControl.required;
   }
diff --git a/libs/components/src/form-control/form-control.module.ts b/libs/components/src/form-control/form-control.module.ts
index 8a0377582c2e..7582893ee3a1 100644
--- a/libs/components/src/form-control/form-control.module.ts
+++ b/libs/components/src/form-control/form-control.module.ts
@@ -4,11 +4,11 @@ import { SharedModule } from "../shared";
 
 import { FormControlComponent } from "./form-control.component";
 import { BitHintComponent } from "./hint.component";
-import { BitLabel } from "./label.directive";
+import { BitLabel } from "./label.component";
 
 @NgModule({
-  imports: [SharedModule],
-  declarations: [FormControlComponent, BitLabel, BitHintComponent],
+  imports: [SharedModule, BitLabel],
+  declarations: [FormControlComponent, BitHintComponent],
   exports: [FormControlComponent, BitLabel, BitHintComponent],
 })
 export class FormControlModule {}
diff --git a/libs/components/src/form-control/hint.component.ts b/libs/components/src/form-control/hint.component.ts
index e5b285c01835..c1f21bf2545c 100644
--- a/libs/components/src/form-control/hint.component.ts
+++ b/libs/components/src/form-control/hint.component.ts
@@ -6,7 +6,7 @@ let nextId = 0;
 @Directive({
   selector: "bit-hint",
   host: {
-    class: "tw-text-muted tw-font-normal tw-inline-block tw-mt-1",
+    class: "tw-text-muted tw-font-normal tw-inline-block tw-mt-1 tw-text-xs",
   },
 })
 export class BitHintComponent {
diff --git a/libs/components/src/form-control/label.component.html b/libs/components/src/form-control/label.component.html
new file mode 100644
index 000000000000..64ba1ce95017
--- /dev/null
+++ b/libs/components/src/form-control/label.component.html
@@ -0,0 +1,14 @@
+<ng-template #endSlotContent>
+  <ng-content select="[slot=end]"></ng-content>
+</ng-template>
+
+<!-- labels inside a form control (checkbox, radio button) should not truncate -->
+<span [ngClass]="{ 'tw-truncate': !isInsideFormControl }">
+  <ng-content></ng-content>
+  <ng-container *ngIf="isInsideFormControl">
+    <ng-container *ngTemplateOutlet="endSlotContent"></ng-container>
+  </ng-container>
+</span>
+<ng-container *ngIf="!isInsideFormControl">
+  <ng-container *ngTemplateOutlet="endSlotContent"></ng-container>
+</ng-container>
diff --git a/libs/components/src/form-control/label.component.ts b/libs/components/src/form-control/label.component.ts
new file mode 100644
index 000000000000..1ab64d0ff949
--- /dev/null
+++ b/libs/components/src/form-control/label.component.ts
@@ -0,0 +1,34 @@
+import { CommonModule } from "@angular/common";
+import { Component, ElementRef, HostBinding, Input, Optional } from "@angular/core";
+
+import { FormControlComponent } from "./form-control.component";
+
+// Increments for each instance of this component
+let nextId = 0;
+
+@Component({
+  selector: "bit-label",
+  standalone: true,
+  templateUrl: "label.component.html",
+  imports: [CommonModule],
+})
+export class BitLabel {
+  constructor(
+    private elementRef: ElementRef<HTMLInputElement>,
+    @Optional() private parentFormControl: FormControlComponent,
+  ) {}
+
+  @HostBinding("class") @Input() get classList() {
+    return ["tw-inline-flex", "tw-gap-1", "tw-items-baseline", "tw-flex-row", "tw-min-w-0"];
+  }
+
+  @HostBinding("title") get title() {
+    return this.elementRef.nativeElement.textContent.trim();
+  }
+
+  @HostBinding() @Input() id = `bit-label-${nextId++}`;
+
+  get isInsideFormControl() {
+    return !!this.parentFormControl;
+  }
+}
diff --git a/libs/components/src/form-control/label.directive.ts b/libs/components/src/form-control/label.directive.ts
deleted file mode 100644
index a3a38329d61c..000000000000
--- a/libs/components/src/form-control/label.directive.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { Directive } from "@angular/core";
-
-@Directive({
-  selector: "bit-label",
-})
-export class BitLabel {}
diff --git a/libs/components/src/form-field/error.component.ts b/libs/components/src/form-field/error.component.ts
index 39005903e6de..ecfa70b2d169 100644
--- a/libs/components/src/form-field/error.component.ts
+++ b/libs/components/src/form-field/error.component.ts
@@ -9,7 +9,7 @@ let nextId = 0;
   selector: "bit-error",
   template: `<i class="bwi bwi-error"></i> {{ displayError }}`,
   host: {
-    class: "tw-block tw-mt-1 tw-text-danger",
+    class: "tw-block tw-mt-1 tw-text-danger tw-text-xs",
     "aria-live": "assertive",
   },
 })
diff --git a/libs/components/src/form-field/form-field-control.ts b/libs/components/src/form-field/form-field-control.ts
index 4fc0e5223972..a80bc2d05959 100644
--- a/libs/components/src/form-field/form-field-control.ts
+++ b/libs/components/src/form-field/form-field-control.ts
@@ -19,5 +19,6 @@ export abstract class BitFormFieldControl {
   error: [string, any];
   type?: InputTypes;
   spellcheck?: boolean;
+  readOnly?: boolean;
   focus?: () => void;
 }
diff --git a/libs/components/src/form-field/form-field.component.html b/libs/components/src/form-field/form-field.component.html
index 5c46fb557b46..61f98ce6581a 100644
--- a/libs/components/src/form-field/form-field.component.html
+++ b/libs/components/src/form-field/form-field.component.html
@@ -1,16 +1,118 @@
-<label class="tw-mb-1 tw-block tw-font-semibold tw-text-main" [attr.for]="input.labelForId">
+<!-- We need to use templates since the content slots are repeated between the readonly and read-write views. -->
+<ng-template #defaultContent>
+  <ng-content></ng-content>
+</ng-template>
+
+<ng-template #labelContent>
   <ng-content select="bit-label"></ng-content>
-  <span *ngIf="input.required" class="tw-text-xs tw-font-normal"> ({{ "required" | i18n }})</span>
-</label>
-<div class="tw-flex">
-  <div *ngIf="prefixChildren.length" class="tw-flex">
-    <ng-content select="[bitPrefix]"></ng-content>
+</ng-template>
+
+<ng-template #prefixContent>
+  <ng-content select="[bitPrefix]"></ng-content>
+</ng-template>
+
+<ng-template #suffixContent>
+  <ng-content select="[bitSuffix]"></ng-content>
+</ng-template>
+
+<div *ngIf="!readOnly; else readOnlyView" class="tw-w-full tw-relative tw-group/bit-form-field">
+  <div class="tw-absolute tw-w-full tw-h-full tw-top-0 tw-pointer-events-none tw-z-20">
+    <div class="tw-w-full tw-h-full tw-flex">
+      <div
+        class="tw-min-w-3 tw-border-r-0 group-focus-within/bit-form-field:tw-border-r-0 !tw-rounded-l-lg"
+        [ngClass]="inputBorderClasses"
+      ></div>
+      <div
+        class="tw-px-1 tw-shrink tw-min-w-0 tw-mt-px tw-border-x-0 tw-border-t-0 group-focus-within/bit-form-field:tw-border-x-0 group-focus-within/bit-form-field:tw-border-t-0 tw-hidden group-has-[bit-label]/bit-form-field:tw-block"
+        [ngClass]="inputBorderClasses"
+      >
+        <label
+          class="tw-flex tw-gap-1 tw-text-sm tw-text-muted -tw-translate-y-2.5 tw-mb-0 tw-max-w-full tw-pointer-events-auto"
+          [attr.for]="input.labelForId"
+        >
+          <ng-container *ngTemplateOutlet="labelContent"></ng-container>
+          <span *ngIf="input.required" class="tw-text-[0.625rem] tw-relative tw-bottom-[-1px]">
+            ({{ "required" | i18n }})</span
+          >
+        </label>
+      </div>
+      <div
+        class="tw-min-w-3 tw-grow tw-border-l-0 group-focus-within/bit-form-field:tw-border-l-0 !tw-rounded-r-lg"
+        [ngClass]="inputBorderClasses"
+      ></div>
+    </div>
   </div>
-  <ng-content></ng-content>
-  <div *ngIf="suffixChildren.length" class="tw-flex">
-    <ng-content select="[bitSuffix]"></ng-content>
+  <div
+    class="tw-gap-1 tw-bg-background tw-rounded-lg tw-flex tw-min-h-11 [&:not(:has(button:enabled)):has(input:read-only)]:tw-bg-secondary-100 [&:not(:has(button:enabled)):has(textarea:read-only)]:tw-bg-secondary-100"
+  >
+    <div
+      #prefixContainer
+      class="tw-flex tw-items-center tw-gap-1 tw-pl-3 tw-py-2"
+      [hidden]="!prefixHasChildren()"
+    >
+      <ng-container *ngTemplateOutlet="prefixContent"></ng-container>
+    </div>
+    <div
+      class="default-content tw-w-full tw-relative tw-py-2 has-[bit-select]:tw-p-0 has-[bit-multi-select]:tw-p-0 has-[input:read-only:not([hidden])]:tw-bg-secondary-100 has-[textarea:read-only:not([hidden])]:tw-bg-secondary-100"
+      [ngClass]="[
+        prefixHasChildren() ? '' : 'tw-rounded-l-lg tw-pl-3',
+        suffixHasChildren() ? '' : 'tw-rounded-r-lg tw-pr-3',
+      ]"
+    >
+      <ng-container *ngTemplateOutlet="defaultContent"></ng-container>
+    </div>
+    <div
+      #suffixContainer
+      class="tw-flex tw-items-center tw-gap-1 tw-pr-3 tw-py-2"
+      [hidden]="!suffixHasChildren()"
+    >
+      <ng-container *ngTemplateOutlet="suffixContent"></ng-container>
+    </div>
   </div>
 </div>
+
+<ng-template #readOnlyView>
+  <div class="tw-w-full tw-relative">
+    <label
+      class="tw-flex tw-gap-1 tw-text-sm tw-text-muted tw-mb-0 tw-max-w-full"
+      [ngClass]="
+        defaultContentIsFocused() ? 'tw-text-primary-600 tw-font-semibold' : 'tw-text-muted'
+      "
+      [attr.for]="input.labelForId"
+    >
+      <ng-container *ngTemplateOutlet="labelContent"></ng-container>
+    </label>
+    <div
+      class="tw-gap-1 tw-flex tw-min-h-[1.85rem] tw-pb-[2px] tw-border-0 tw-border-solid"
+      [ngClass]="{
+        'tw-border-secondary-300/50 tw-border-b tw-pb-[3px]':
+          !disableReadOnlyBorder && !defaultContentIsFocused(),
+        'tw-border-b-2 tw-border-transparent tw-pb-[4px]':
+          disableReadOnlyBorder && !defaultContentIsFocused(),
+        'tw-border-b-2 tw-border-primary-600': defaultContentIsFocused(),
+      }"
+    >
+      <div
+        #prefixContainer
+        [hidden]="!prefixHasChildren()"
+        class="tw-flex tw-items-center tw-gap-1 tw-pl-1"
+      >
+        <ng-container *ngTemplateOutlet="prefixContent"></ng-container>
+      </div>
+      <div class="default-content tw-w-full tw-pb-0 tw-relative [&>*]:tw-p-0">
+        <ng-container *ngTemplateOutlet="defaultContent"></ng-container>
+      </div>
+      <div
+        #suffixContainer
+        [hidden]="!suffixHasChildren()"
+        class="tw-flex tw-items-center tw-gap-1 tw-pr-1"
+      >
+        <ng-container *ngTemplateOutlet="suffixContent"></ng-container>
+      </div>
+    </div>
+  </div>
+</ng-template>
+
 <ng-container [ngSwitch]="input.hasError">
   <ng-content select="bit-hint" *ngSwitchCase="false"></ng-content>
   <bit-error [error]="input.error" *ngSwitchCase="true"></bit-error>
diff --git a/libs/components/src/form-field/form-field.component.ts b/libs/components/src/form-field/form-field.component.ts
index 1e364115a6f5..d8bd498e4f0b 100644
--- a/libs/components/src/form-field/form-field.component.ts
+++ b/libs/components/src/form-field/form-field.component.ts
@@ -1,22 +1,22 @@
-import { coerceBooleanProperty } from "@angular/cdk/coercion";
 import {
   AfterContentChecked,
   booleanAttribute,
   Component,
   ContentChild,
-  ContentChildren,
+  ElementRef,
   HostBinding,
+  HostListener,
   Input,
-  QueryList,
   ViewChild,
+  signal,
 } from "@angular/core";
 
 import { BitHintComponent } from "../form-control/hint.component";
+import { BitLabel } from "../form-control/label.component";
+import { inputBorderClasses } from "../input/input.directive";
 
 import { BitErrorComponent } from "./error.component";
 import { BitFormFieldControl } from "./form-field-control";
-import { BitPrefixDirective } from "./prefix.directive";
-import { BitSuffixDirective } from "./suffix.directive";
 
 @Component({
   selector: "bit-form-field",
@@ -25,30 +25,74 @@ import { BitSuffixDirective } from "./suffix.directive";
 export class BitFormFieldComponent implements AfterContentChecked {
   @ContentChild(BitFormFieldControl) input: BitFormFieldControl;
   @ContentChild(BitHintComponent) hint: BitHintComponent;
+  @ContentChild(BitLabel) label: BitLabel;
+
+  @ViewChild("prefixContainer") prefixContainer: ElementRef<HTMLDivElement>;
+  @ViewChild("suffixContainer") suffixContainer: ElementRef<HTMLDivElement>;
 
   @ViewChild(BitErrorComponent) error: BitErrorComponent;
 
-  @ContentChildren(BitPrefixDirective) prefixChildren: QueryList<BitPrefixDirective>;
-  @ContentChildren(BitSuffixDirective) suffixChildren: QueryList<BitSuffixDirective>;
+  @Input({ transform: booleanAttribute })
+  disableMargin = false;
+
+  /** If `true`, remove the bottom border for `readonly` inputs */
+  @Input({ transform: booleanAttribute })
+  disableReadOnlyBorder = false;
+
+  protected prefixHasChildren = signal(false);
+  protected suffixHasChildren = signal(false);
+
+  get inputBorderClasses(): string {
+    const shouldFocusBorderAppear = this.defaultContentIsFocused();
+
+    const groupClasses = [
+      this.input.hasError
+        ? "group-hover/bit-form-field:tw-border-danger-700"
+        : "group-hover/bit-form-field:tw-border-primary-600",
+      // the next 2 selectors override the above hover selectors when the input (or text area) is non-interactive (i.e. readonly, disabled)
+      "group-has-[input:read-only]/bit-form-field:group-hover/bit-form-field:tw-border-secondary-500",
+      "group-has-[textarea:read-only]/bit-form-field:group-hover/bit-form-field:tw-border-secondary-500",
+      "group-focus-within/bit-form-field:tw-outline-none",
+      shouldFocusBorderAppear ? "group-focus-within/bit-form-field:tw-border-2" : "",
+      shouldFocusBorderAppear ? "group-focus-within/bit-form-field:tw-border-primary-600" : "",
+      shouldFocusBorderAppear
+        ? "group-focus-within/bit-form-field:group-hover/bit-form-field:tw-border-primary-600"
+        : "",
+    ];
+
+    const baseInputBorderClasses = inputBorderClasses(this.input.hasError);
+
+    const borderClasses = baseInputBorderClasses.concat(groupClasses);
 
-  private _disableMargin = false;
-  @Input() set disableMargin(value: boolean | "") {
-    this._disableMargin = coerceBooleanProperty(value);
+    return borderClasses.join(" ");
   }
-  get disableMargin() {
-    return this._disableMargin;
+
+  @HostBinding("class")
+  get classList() {
+    return ["tw-block"]
+      .concat(this.disableMargin ? [] : ["tw-mb-4"])
+      .concat(this.readOnly ? [] : "tw-pt-2");
   }
 
   /**
-   * NOTE: Placeholder to match the API of the form-field component in the `ps/extension` branch,
-   * no functionality is implemented as of now.
+   * If the currently focused element is not part of the default content, then we don't want to show focus on the
+   * input field itself.
+   *
+   * This is necessary because the `tw-group/bit-form-field` wraps the input and any prefix/suffix
+   * buttons
    */
-  @Input({ transform: booleanAttribute })
-  disableReadOnlyBorder = false;
+  protected defaultContentIsFocused = signal(false);
+  @HostListener("focusin", ["$event.target"])
+  onFocusIn(target: HTMLElement) {
+    this.defaultContentIsFocused.set(target.matches(".default-content *:focus-visible"));
+  }
+  @HostListener("focusout")
+  onFocusOut() {
+    this.defaultContentIsFocused.set(false);
+  }
 
-  @HostBinding("class")
-  get classList() {
-    return ["tw-block"].concat(this.disableMargin ? [] : ["tw-mb-6"]);
+  protected get readOnly(): boolean {
+    return this.input.readOnly;
   }
 
   ngAfterContentChecked(): void {
@@ -59,5 +103,8 @@ export class BitFormFieldComponent implements AfterContentChecked {
     } else {
       this.input.ariaDescribedBy = undefined;
     }
+
+    this.prefixHasChildren.set(this.prefixContainer?.nativeElement.childElementCount > 0);
+    this.suffixHasChildren.set(this.suffixContainer?.nativeElement.childElementCount > 0);
   }
 }
diff --git a/libs/components/src/form-field/form-field.stories.ts b/libs/components/src/form-field/form-field.stories.ts
index 305b514266ec..f5bb04bff0f6 100644
--- a/libs/components/src/form-field/form-field.stories.ts
+++ b/libs/components/src/form-field/form-field.stories.ts
@@ -1,3 +1,4 @@
+import { TextFieldModule } from "@angular/cdk/text-field";
 import {
   AbstractControl,
   UntypedFormBuilder,
@@ -12,11 +13,15 @@ import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 
 import { AsyncActionsModule } from "../async-actions";
+import { BadgeModule } from "../badge";
 import { ButtonModule } from "../button";
+import { CardComponent } from "../card";
 import { CheckboxModule } from "../checkbox";
 import { IconButtonModule } from "../icon-button";
 import { InputModule } from "../input/input.module";
+import { LinkModule } from "../link";
 import { RadioButtonModule } from "../radio-button";
+import { SectionComponent } from "../section";
 import { SelectModule } from "../select";
 import { I18nMockService } from "../utils/i18n-mock.service";
 
@@ -39,6 +44,11 @@ export default {
         CheckboxModule,
         RadioButtonModule,
         SelectModule,
+        LinkModule,
+        CardComponent,
+        SectionComponent,
+        TextFieldModule,
+        BadgeModule,
       ],
       providers: [
         {
@@ -49,6 +59,7 @@ export default {
               required: "required",
               inputRequired: "Input is required.",
               inputEmail: "Input is not an email-address.",
+              toggleVisibility: "Toggle visibility",
             });
           },
         },
@@ -74,6 +85,7 @@ const defaultFormObj = fb.group({
   email: ["", [Validators.required, Validators.email, forbiddenNameValidator(/bit/i)]],
   terms: [false, [Validators.requiredTrue]],
   updates: ["yes"],
+  file: [""],
 });
 
 // Custom error message, `message` is shown as the error message
@@ -96,7 +108,7 @@ export const Default: Story = {
       submit: submit,
       ...args,
     },
-    template: `
+    template: /*html*/ `
       <form [formGroup]="formObj">
         <bit-form-field>
           <bit-label>Label</bit-label>
@@ -108,13 +120,68 @@ export const Default: Story = {
   }),
 };
 
+export const LabelWithIcon: Story = {
+  render: (args) => ({
+    props: {
+      formObj: defaultFormObj,
+      submit: submit,
+      ...args,
+    },
+    template: /*html*/ `
+      <form [formGroup]="formObj">
+        <bit-form-field>
+          <bit-label>
+            Label
+            <a href="#" slot="end" bitLink>
+              <i class="bwi bwi-question-circle" aria-hidden="true"></i>
+            </a>
+          </bit-label>
+          <input bitInput formControlName="name" />
+          <bit-hint>Optional Hint</bit-hint>
+        </bit-form-field>
+      </form>
+    `,
+  }),
+};
+
+export const LongLabel: Story = {
+  render: (args) => ({
+    props: {
+      formObj: defaultFormObj,
+      submit: submit,
+      ...args,
+    },
+    template: /*html*/ `
+      <form [formGroup]="formObj" style="width: 200px">
+        <bit-form-field>
+          <bit-label>
+            Hello I am a very long label with lots of very cool helpful information
+          </bit-label>
+          <input bitInput formControlName="name" />
+          <bit-hint>Optional Hint</bit-hint>
+        </bit-form-field>
+        <bit-form-field>
+          <bit-label>
+            Hello I am a very long label with lots of very cool helpful information
+            <a href="#" slot="end" bitLink>
+              <i class="bwi bwi-question-circle" aria-hidden="true"></i>
+            </a>
+          </bit-label>
+          <input bitInput formControlName="name" />
+          <bit-hint>Optional Hint</bit-hint>
+        </bit-form-field>
+      </form>
+    `,
+  }),
+};
+
 export const Required: Story = {
   render: (args) => ({
     props: {
       formObj: formObj,
       ...args,
     },
-    template: `
+    template: /*html*/ `
       <bit-form-field>
         <bit-label>Label</bit-label>
         <input bitInput required placeholder="Placeholder" />
@@ -134,7 +201,7 @@ export const Hint: Story = {
       formObj: formObj,
       ...args,
     },
-    template: `
+    template: /*html*/ `
       <bit-form-field [formGroup]="formObj">
         <bit-label>FormControl</bit-label>
         <input bitInput formControlName="required" placeholder="Placeholder" />
@@ -147,7 +214,7 @@ export const Hint: Story = {
 export const Disabled: Story = {
   render: (args) => ({
     props: args,
-    template: `
+    template: /*html*/ `
       <bit-form-field>
         <bit-label>Label</bit-label>
         <input bitInput placeholder="Placeholder" disabled />
@@ -160,16 +227,54 @@ export const Disabled: Story = {
 export const Readonly: Story = {
   render: (args) => ({
     props: args,
-    template: `
+    template: /*html*/ `
       <bit-form-field>
         <bit-label>Input</bit-label>
         <input bitInput value="Foobar" readonly />
       </bit-form-field>
 
+      <bit-form-field>
+        <bit-label>Input</bit-label>
+        <input bitInput type="password" value="Foobar" [readonly]="true" />
+        <button type="button" bitIconButton bitSuffix bitPasswordInputToggle></button>
+        <button type="button" bitSuffix bitIconButton="bwi-clone" aria-label="Clone"></button>
+      </bit-form-field>
+
       <bit-form-field>
         <bit-label>Textarea</bit-label>
         <textarea bitInput rows="4" readonly>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</textarea>
       </bit-form-field>
+
+      <div class="tw-p-4 tw-mt-10 tw-border-2 tw-border-solid tw-border-black tw-bg-background-alt">
+        <h2 bitTypography="h2">Inside card</h2>
+        <bit-section>
+          <bit-card>
+            <bit-form-field>
+              <bit-label>Input</bit-label>
+              <input bitInput value="Foobar" readonly />
+            </bit-form-field>
+
+            <bit-form-field>
+              <bit-label>Input</bit-label>
+              <input bitInput type="password" value="Foobar" readonly />
+              <button type="button" bitIconButton bitSuffix bitPasswordInputToggle></button>
+              <button type="button" bitSuffix bitIconButton="bwi-clone" aria-label="Clone"></button>
+            </bit-form-field>
+
+            <bit-form-field>
+              <bit-label>Textarea <span slot="end" bitBadge variant="success">Premium</span></bit-label>
+              <textarea bitInput rows="3" readonly class="tw-resize-none">Row1
+Row2 
+Row3</textarea>
+            </bit-form-field>
+
+            <bit-form-field disableMargin disableReadOnlyBorder>
+              <bit-label>Sans margin & border</bit-label>
+              <input bitInput value="Foobar" readonly />
+            </bit-form-field>
+          </bit-card>
+        </bit-section>
+      </div>
     `,
   }),
   args: {},
@@ -178,7 +283,7 @@ export const Readonly: Story = {
 export const InputGroup: Story = {
   render: (args) => ({
     props: args,
-    template: `
+    template: /*html*/ `
       <bit-form-field>
         <bit-label>Label</bit-label>
         <input bitInput placeholder="Placeholder" />
@@ -193,13 +298,19 @@ export const InputGroup: Story = {
 export const ButtonInputGroup: Story = {
   render: (args) => ({
     props: args,
-    template: `
+    template: /*html*/ `
       <bit-form-field>
-        <button bitPrefix bitIconButton="bwi-star"></button>
+        <bit-label>
+          Label
+          <a href="#" slot="end" bitLink>
+            <i class="bwi bwi-question-circle" aria-hidden="true"></i>
+          </a>
+        </bit-label>
+        <button bitPrefix bitIconButton="bwi-star" aria-label="Favorite"></button>
         <input bitInput placeholder="Placeholder" />
-        <button bitSuffix bitIconButton="bwi-eye"></button>
-        <button bitSuffix bitIconButton="bwi-clone"></button>
-        <button bitSuffix bitButton>
+        <button bitSuffix bitIconButton="bwi-eye" aria-label="Hide"></button>
+        <button bitSuffix bitIconButton="bwi-clone" aria-label="Clone"></button>
+        <button bitSuffix bitLink>
           Apply
         </button>
       </bit-form-field>
@@ -211,14 +322,32 @@ export const ButtonInputGroup: Story = {
 export const DisabledButtonInputGroup: Story = {
   render: (args) => ({
     props: args,
-    template: `
+    template: /*html*/ `
       <bit-form-field>
         <bit-label>Label</bit-label>
-        <button bitPrefix bitIconButton="bwi-star" disabled></button>
+        <button bitPrefix bitIconButton="bwi-star" disabled aria-label="Favorite"></button>
         <input bitInput placeholder="Placeholder" disabled />
-        <button bitSuffix bitIconButton="bwi-eye" disabled></button>
-        <button bitSuffix bitIconButton="bwi-clone" disabled></button>
-        <button bitSuffix bitButton disabled>
+        <button bitSuffix bitIconButton="bwi-eye" disabled aria-label="Hide"></button>
+        <button bitSuffix bitIconButton="bwi-clone" disabled aria-label="Clone"></button>
+        <button bitSuffix bitLink disabled>
+          Apply
+        </button>
+      </bit-form-field>
+    `,
+  }),
+  args: {},
+};
+
+export const PartiallyDisabledButtonInputGroup: Story = {
+  render: (args) => ({
+    props: args,
+    template: /*html*/ `
+      <bit-form-field>
+        <bit-label>Label</bit-label>
+        <input bitInput placeholder="Placeholder" disabled />
+        <button bitSuffix bitIconButton="bwi-eye" aria-label="Hide"></button>
+        <button bitSuffix bitIconButton="bwi-clone" aria-label="Clone"></button>
+        <button bitSuffix bitLink disabled>
           Apply
         </button>
       </bit-form-field>
@@ -230,7 +359,7 @@ export const DisabledButtonInputGroup: Story = {
 export const Select: Story = {
   render: (args: BitFormFieldComponent) => ({
     props: args,
-    template: `
+    template: /*html*/ `
       <bit-form-field>
         <bit-label>Label</bit-label>
         <select bitInput>
@@ -246,7 +375,7 @@ export const Select: Story = {
 export const AdvancedSelect: Story = {
   render: (args: BitFormFieldComponent) => ({
     props: args,
-    template: `
+    template: /*html*/ `
       <bit-form-field>
         <bit-label>Label</bit-label>
         <bit-select>
@@ -258,10 +387,40 @@ export const AdvancedSelect: Story = {
   }),
 };
 
+export const FileInput: Story = {
+  render: (args) => ({
+    props: {
+      formObj: defaultFormObj,
+      submit: submit,
+      ...args,
+    },
+    template: /*html*/ `
+      <form [formGroup]="formObj">
+        <bit-form-field>
+          <bit-label>File</bit-label>
+          <div class="tw-text-main">
+            <button bitButton type="button" buttonType="secondary">
+              Choose File
+            </button>
+            No file chosen
+          </div>
+          <input
+            bitInput
+            #fileSelector
+            type="file"
+            formControlName="file"
+            hidden
+          />
+        </bit-form-field>
+      </form>
+    `,
+  }),
+};
+
 export const Textarea: Story = {
   render: (args: BitFormFieldComponent) => ({
     props: args,
-    template: `
+    template: /*html*/ `
       <bit-form-field>
         <bit-label>Textarea</bit-label>
         <textarea bitInput rows="4"></textarea>
diff --git a/libs/components/src/form-field/multi-select.stories.ts b/libs/components/src/form-field/multi-select.stories.ts
index 9248f7ab4734..0993925364da 100644
--- a/libs/components/src/form-field/multi-select.stories.ts
+++ b/libs/components/src/form-field/multi-select.stories.ts
@@ -66,9 +66,9 @@ export const actionsData = {
 };
 
 const fb = new FormBuilder();
-const formObjFactory = () =>
+const formObjFactory = (isDisabled = false) =>
   fb.group({
-    select: [[], [Validators.required]],
+    select: fb.control({ value: [], disabled: isDisabled }, { validators: [Validators.required] }),
   });
 
 function submit(formObj: FormGroup) {
@@ -85,7 +85,7 @@ export const Loading: Story = {
       ...args,
       onItemsConfirmed: actionsData.onItemsConfirmed,
     },
-    template: `
+    template: /*html*/ `
       <form [formGroup]="formObj" (ngSubmit)="submit(formObj)">
         <bit-form-field>
           <bit-label>{{ name }}</bit-label>
@@ -100,7 +100,6 @@ export const Loading: Story = {
           </bit-multi-select>
           <bit-hint>{{ hint }}</bit-hint>
         </bit-form-field>
-        <button type="submit" bitButton buttonType="primary">Submit</button>
       </form>
     `,
   }),
@@ -113,8 +112,33 @@ export const Loading: Story = {
 };
 
 export const Disabled: Story = {
-  ...Loading,
+  render: (args) => ({
+    props: {
+      formObj: formObjFactory(true),
+      submit: submit,
+      ...args,
+      onItemsConfirmed: actionsData.onItemsConfirmed,
+    },
+    template: /*html*/ `
+      <form [formGroup]="formObj" (ngSubmit)="submit(formObj)">
+        <bit-form-field>
+          <bit-label>{{ name }}</bit-label>
+          <bit-multi-select
+            class="tw-w-full"
+            formControlName="select"
+            [baseItems]="baseItems"
+            [removeSelectedItems]="removeSelectedItems"
+            [loading]="loading"
+            [disabled]="disabled"
+            (onItemsConfirmed)="onItemsConfirmed($event)">
+          </bit-multi-select>
+          <bit-hint>{{ hint }}</bit-hint>
+        </bit-form-field>
+      </form>
+    `,
+  }),
   args: {
+    baseItems: [] as any,
     name: "Disabled",
     disabled: true,
     hint: "This is what a disabled multi-select looks like",
@@ -269,34 +293,3 @@ export const RemoveSelected: Story = {
     removeSelectedItems: true,
   },
 };
-
-export const Standalone: Story = {
-  render: (args) => ({
-    props: {
-      ...args,
-      onItemsConfirmed: actionsData.onItemsConfirmed,
-    },
-    template: `
-      <bit-multi-select
-        class="tw-w-full"
-        [baseItems]="baseItems"
-        [removeSelectedItems]="removeSelectedItems"
-        [loading]="loading"
-        [disabled]="disabled"
-        (onItemsConfirmed)="onItemsConfirmed($event)">
-      </bit-multi-select>
-    `,
-  }),
-  args: {
-    baseItems: [
-      { id: "1", listName: "Group 1", labelName: "Group 1", icon: "bwi-family" },
-      { id: "2", listName: "Group 2", labelName: "Group 2", icon: "bwi-family" },
-      { id: "3", listName: "Group 3", labelName: "Group 3", icon: "bwi-family" },
-      { id: "4", listName: "Group 4", labelName: "Group 4", icon: "bwi-family" },
-      { id: "5", listName: "Group 5", labelName: "Group 5", icon: "bwi-family" },
-      { id: "6", listName: "Group 6", labelName: "Group 6", icon: "bwi-family" },
-      { id: "7", listName: "Group 7", labelName: "Group 7", icon: "bwi-family" },
-    ],
-    removeSelectedItems: true,
-  },
-};
diff --git a/libs/components/src/form-field/password-input-toggle.directive.ts b/libs/components/src/form-field/password-input-toggle.directive.ts
index 5e98db45393d..a696a88c4682 100644
--- a/libs/components/src/form-field/password-input-toggle.directive.ts
+++ b/libs/components/src/form-field/password-input-toggle.directive.ts
@@ -37,8 +37,6 @@ export class BitPasswordInputToggleDirective implements AfterContentInit, OnChan
     this.toggledChange.emit(this.toggled);
 
     this.update();
-
-    this.formField.input?.focus();
   }
 
   constructor(
diff --git a/libs/components/src/form-field/password-input-toggle.stories.ts b/libs/components/src/form-field/password-input-toggle.stories.ts
index 412213110f8a..094f939e0ead 100644
--- a/libs/components/src/form-field/password-input-toggle.stories.ts
+++ b/libs/components/src/form-field/password-input-toggle.stories.ts
@@ -43,7 +43,7 @@ type Story = StoryObj<BitPasswordInputToggleDirective>;
 export const Default: Story = {
   render: (args) => ({
     props: args,
-    template: `
+    template: /*html*/ `
       <form>
         <bit-form-field>
           <bit-label>Password</bit-label>
@@ -58,7 +58,7 @@ export const Default: Story = {
 export const Binding: Story = {
   render: (args) => ({
     props: args,
-    template: `
+    template: /*html*/ `
       <form>
         <bit-form-field>
           <bit-label>Password</bit-label>
diff --git a/libs/components/src/form-field/prefix.directive.ts b/libs/components/src/form-field/prefix.directive.ts
index 6e1e15fd207f..bcfc9d01fe4f 100644
--- a/libs/components/src/form-field/prefix.directive.ts
+++ b/libs/components/src/form-field/prefix.directive.ts
@@ -1,51 +1,34 @@
-import { Directive, HostBinding, Input, OnInit, Optional } from "@angular/core";
+import { AfterContentInit, Directive, HostBinding, Input, OnInit, Optional } from "@angular/core";
 
-import { ButtonLikeAbstraction } from "../shared/button-like.abstraction";
+import { BitIconButtonComponent } from "../icon-button/icon-button.component";
 
-export const PrefixClasses = [
-  "tw-bg-background-alt",
-  "tw-border",
-  "tw-border-solid",
-  "tw-border-secondary-600",
-  "tw-text-muted",
-  "tw-rounded-none",
-];
-
-export const PrefixButtonClasses = [
-  "hover:tw-bg-text-muted",
-  "hover:tw-text-contrast",
-  "disabled:tw-opacity-100",
-  "disabled:tw-bg-secondary-100",
-  "disabled:hover:tw-bg-secondary-100",
-  "disabled:hover:tw-text-muted",
-  "focus-visible:tw-ring-primary-700",
-
-  "focus-visible:tw-border-primary-700",
-  "focus-visible:tw-ring-1",
-  "focus-visible:tw-ring-inset",
-  "focus-visible:tw-ring-primary-700",
-  "focus-visible:tw-z-10",
-];
-
-export const PrefixStaticContentClasses = ["tw-block", "tw-px-3", "tw-py-1.5"];
+import { BitFormFieldComponent } from "./form-field.component";
 
 @Directive({
   selector: "[bitPrefix]",
 })
-export class BitPrefixDirective implements OnInit {
-  constructor(@Optional() private buttonComponent: ButtonLikeAbstraction) {}
-
+export class BitPrefixDirective implements OnInit, AfterContentInit {
   @HostBinding("class") @Input() get classList() {
-    return PrefixClasses.concat([
-      "tw-border-r-0",
-      "first:tw-rounded-l",
+    return ["tw-text-muted"];
+  }
+
+  @HostBinding("attr.aria-describedby")
+  protected ariaDescribedBy: string;
+
+  constructor(
+    @Optional() private parentFormField: BitFormFieldComponent,
+    @Optional() private iconButtonComponent: BitIconButtonComponent,
+  ) {}
 
-      "focus-visible:tw-border-r",
-      "focus-visible:tw-mr-[-1px]",
-    ]).concat(this.buttonComponent != undefined ? PrefixButtonClasses : PrefixStaticContentClasses);
+  ngOnInit() {
+    if (this.iconButtonComponent) {
+      this.iconButtonComponent.size = "small";
+    }
   }
 
-  ngOnInit(): void {
-    this.buttonComponent?.setButtonType("unstyled");
+  ngAfterContentInit() {
+    if (this.parentFormField?.label?.id) {
+      this.ariaDescribedBy = this.parentFormField.label.id;
+    }
   }
 }
diff --git a/libs/components/src/form-field/suffix.directive.ts b/libs/components/src/form-field/suffix.directive.ts
index b74c09d82e52..39fcce916ccb 100644
--- a/libs/components/src/form-field/suffix.directive.ts
+++ b/libs/components/src/form-field/suffix.directive.ts
@@ -1,26 +1,34 @@
-import { Directive, HostBinding, Input, OnInit, Optional } from "@angular/core";
+import { AfterContentInit, Directive, HostBinding, Input, OnInit, Optional } from "@angular/core";
 
-import { ButtonLikeAbstraction } from "../shared/button-like.abstraction";
+import { BitIconButtonComponent } from "../icon-button/icon-button.component";
 
-import { PrefixButtonClasses, PrefixClasses, PrefixStaticContentClasses } from "./prefix.directive";
+import { BitFormFieldComponent } from "./form-field.component";
 
 @Directive({
   selector: "[bitSuffix]",
 })
-export class BitSuffixDirective implements OnInit {
-  constructor(@Optional() private buttonComponent: ButtonLikeAbstraction) {}
-
+export class BitSuffixDirective implements OnInit, AfterContentInit {
   @HostBinding("class") @Input() get classList() {
-    return PrefixClasses.concat([
-      "tw-border-l-0",
-      "last:tw-rounded-r",
+    return ["tw-text-muted"];
+  }
+
+  @HostBinding("attr.aria-describedby")
+  protected ariaDescribedBy: string;
+
+  constructor(
+    @Optional() private parentFormField: BitFormFieldComponent,
+    @Optional() private iconButtonComponent: BitIconButtonComponent,
+  ) {}
 
-      "focus-visible:tw-border-l",
-      "focus-visible:tw-ml-[-1px]",
-    ]).concat(this.buttonComponent != undefined ? PrefixButtonClasses : PrefixStaticContentClasses);
+  ngOnInit() {
+    if (this.iconButtonComponent) {
+      this.iconButtonComponent.size = "small";
+    }
   }
 
-  ngOnInit(): void {
-    this.buttonComponent?.setButtonType("unstyled");
+  ngAfterContentInit() {
+    if (this.parentFormField?.label?.id) {
+      this.ariaDescribedBy = this.parentFormField.label.id;
+    }
   }
 }
diff --git a/libs/components/src/form/forms.mdx b/libs/components/src/form/forms.mdx
index dba6a1466c63..5ce129bf301b 100644
--- a/libs/components/src/form/forms.mdx
+++ b/libs/components/src/form/forms.mdx
@@ -55,6 +55,18 @@ Be sure to use an appropriate type attribute on fields when defining new field c
 `email` for email address or `number` for numerical information) to take advantage of newer input
 controls like email verification, number selection, and more.
 
+Labels accept an optional `end` slot for any content that should not be truncated if the label text
+is too long, such as info link buttons or badges.
+
+```
+<bit-label>
+  Label text goes here
+  <a href="#" slot="end" bitLink>
+    <i class="bwi bwi-question-circle" aria-hidden="true"></i>
+  </a>
+</bit-label>
+```
+
 #### Default with required attribute
 
 <Story of={fieldStories.Default} />
@@ -86,6 +98,9 @@ button consists of a label and a radio input.
 
 The full form control + label should be selectable to allow the user a larger click target.
 
+Labels accept an optional `end` slot for any content that is not part of the main label text, such
+as info link buttons or badges.
+
 Radio groups should always have a default selected value.
 
 Radio groups may optionally include extra helper text below each radio button.
@@ -112,6 +127,9 @@ Checkboxes can be displayed on their own or in a group (select multiple form que
 displayed in a group, include an input Label and any associated required/validation logic for the
 field.
 
+Labels accept an optional `end` slot for any content that is not part of the main label text, such
+as info link buttons or badges.
+
 Unlike radio groups, checkbox groups are not required to have a default selected value.
 
 Checkbox groups can include extra explanation text below each radio button or just the checkbox
diff --git a/libs/components/src/icon-button/icon-button.component.ts b/libs/components/src/icon-button/icon-button.component.ts
index 54f6dfda963d..9318186d3ea6 100644
--- a/libs/components/src/icon-button/icon-button.component.ts
+++ b/libs/components/src/icon-button/icon-button.component.ts
@@ -15,10 +15,10 @@ const focusRing = [
   "before:tw-content-['']",
   "before:tw-block",
   "before:tw-absolute",
-  "before:-tw-inset-[3px]",
-  "before:tw-rounded-md",
+  "before:-tw-inset-[2px]",
+  "before:tw-rounded-lg",
   "before:tw-transition",
-  "before:tw-ring",
+  "before:tw-ring-2",
   "before:tw-ring-transparent",
   "focus-visible:tw-z-10",
 ];
@@ -41,9 +41,9 @@ const styles: Record<IconButtonType, string[]> = {
     "!tw-text-main",
     "tw-border-transparent",
     "hover:tw-bg-transparent-hover",
-    "hover:tw-border-text-main",
-    "focus-visible:before:tw-ring-text-main",
-    "disabled:tw-opacity-60",
+    "hover:tw-border-primary-600",
+    "focus-visible:before:tw-ring-primary-600",
+    "disabled:!tw-text-secondary-300",
     "disabled:hover:tw-border-transparent",
     "disabled:hover:tw-bg-transparent",
     ...focusRing,
@@ -53,9 +53,9 @@ const styles: Record<IconButtonType, string[]> = {
     "!tw-text-muted",
     "tw-border-transparent",
     "hover:tw-bg-transparent-hover",
-    "hover:tw-border-primary-700",
-    "focus-visible:before:tw-ring-primary-700",
-    "disabled:tw-opacity-60",
+    "hover:tw-border-primary-600",
+    "focus-visible:before:tw-ring-primary-600",
+    "disabled:!tw-text-secondary-300",
     "disabled:hover:tw-border-transparent",
     "disabled:hover:tw-bg-transparent",
     ...focusRing,
@@ -64,9 +64,9 @@ const styles: Record<IconButtonType, string[]> = {
     "tw-bg-primary-600",
     "!tw-text-contrast",
     "tw-border-primary-600",
-    "hover:tw-bg-primary-700",
-    "hover:tw-border-primary-700",
-    "focus-visible:before:tw-ring-primary-700",
+    "hover:tw-bg-primary-600",
+    "hover:tw-border-primary-600",
+    "focus-visible:before:tw-ring-primary-600",
     "disabled:tw-opacity-60",
     "disabled:hover:tw-border-primary-600",
     "disabled:hover:tw-bg-primary-600",
@@ -78,26 +78,25 @@ const styles: Record<IconButtonType, string[]> = {
     "tw-border-text-muted",
     "hover:!tw-text-contrast",
     "hover:tw-bg-text-muted",
-    "focus-visible:before:tw-ring-primary-700",
+    "focus-visible:before:tw-ring-primary-600",
     "disabled:tw-opacity-60",
     "disabled:hover:tw-border-text-muted",
     "disabled:hover:tw-bg-transparent",
     "disabled:hover:!tw-text-muted",
-    "disabled:hover:tw-border-text-muted",
     ...focusRing,
   ],
   danger: [
     "tw-bg-transparent",
-    "!tw-text-danger",
-    "tw-border-danger-600",
-    "hover:!tw-text-contrast",
-    "hover:tw-bg-danger-600",
-    "focus-visible:before:tw-ring-primary-700",
-    "disabled:tw-opacity-60",
-    "disabled:hover:tw-border-danger-600",
+    "!tw-text-danger-600",
+    "tw-border-transparent",
+    "hover:!tw-text-danger-600",
+    "hover:tw-bg-transparent",
+    "hover:tw-border-primary-600",
+    "focus-visible:before:tw-ring-primary-600",
+    "disabled:!tw-text-secondary-300",
+    "disabled:hover:tw-border-transparent",
     "disabled:hover:tw-bg-transparent",
-    "disabled:hover:!tw-text-danger",
-    "disabled:hover:tw-border-danger-600",
+    "disabled:hover:!tw-text-secondary-300",
     ...focusRing,
   ],
   light: [
@@ -107,6 +106,7 @@ const styles: Record<IconButtonType, string[]> = {
     "hover:tw-bg-transparent-hover",
     "hover:tw-border-text-alt2",
     "focus-visible:before:tw-ring-text-alt2",
+    "disabled:tw-opacity-60",
     "disabled:hover:tw-border-transparent",
     "disabled:hover:tw-bg-transparent",
     ...focusRing,
@@ -141,7 +141,7 @@ export class BitIconButtonComponent implements ButtonLikeAbstraction, FocusableE
       "tw-font-semibold",
       "tw-border",
       "tw-border-solid",
-      "tw-rounded",
+      "tw-rounded-lg",
       "tw-transition",
       "hover:tw-no-underline",
       "focus:tw-outline-none",
@@ -163,10 +163,6 @@ export class BitIconButtonComponent implements ButtonLikeAbstraction, FocusableE
   @Input() loading = false;
   @Input() disabled = false;
 
-  setButtonType(value: "primary" | "secondary" | "danger" | "unstyled") {
-    this.buttonType = value;
-  }
-
   getFocusTarget() {
     return this.elementRef.nativeElement;
   }
diff --git a/libs/components/src/icon-button/icon-button.stories.ts b/libs/components/src/icon-button/icon-button.stories.ts
index 0f25d2de5835..6fe16fe6b14e 100644
--- a/libs/components/src/icon-button/icon-button.stories.ts
+++ b/libs/components/src/icon-button/icon-button.stories.ts
@@ -133,6 +133,6 @@ export const Disabled: Story = {
   ...Default,
   args: {
     disabled: true,
-    loading: true,
+    loading: false,
   },
 };
diff --git a/libs/components/src/input/input.directive.ts b/libs/components/src/input/input.directive.ts
index 27c7d8175d15..6141967e3f63 100644
--- a/libs/components/src/input/input.directive.ts
+++ b/libs/components/src/input/input.directive.ts
@@ -11,41 +11,43 @@ import {
 import { NgControl, Validators } from "@angular/forms";
 
 import { BitFormFieldControl, InputTypes } from "../form-field/form-field-control";
+import { BitFormFieldComponent } from "../form-field/form-field.component";
 
 // Increments for each instance of this component
 let nextId = 0;
 
+export function inputBorderClasses(error: boolean) {
+  return [
+    "tw-border",
+    "!tw-border-solid",
+    error ? "tw-border-danger-600" : "tw-border-secondary-500",
+    "focus:tw-outline-none",
+  ];
+}
+
 @Directive({
   selector: "input[bitInput], select[bitInput], textarea[bitInput]",
   providers: [{ provide: BitFormFieldControl, useExisting: BitInputDirective }],
 })
 export class BitInputDirective implements BitFormFieldControl {
   @HostBinding("class") @Input() get classList() {
-    return [
+    const classes = [
       "tw-block",
       "tw-w-full",
-      "tw-px-3",
-      "tw-py-1.5",
-      "tw-bg-background-alt",
-      "tw-border",
-      "tw-border-solid",
-      this.hasError ? "tw-border-danger-600" : "tw-border-secondary-600",
+      "tw-h-full",
       "tw-text-main",
       "tw-placeholder-text-muted",
-      // Rounded
-      "tw-rounded-none",
-      "first:tw-rounded-l",
-      "last:tw-rounded-r",
-      // Focus
+      "tw-bg-background",
+      "tw-border-none",
       "focus:tw-outline-none",
-      "focus:tw-border-primary-700",
-      "focus:tw-ring-1",
-      "focus:tw-ring-inset",
-      "focus:tw-ring-primary-700",
-      "focus:tw-z-10",
-      "disabled:tw-bg-secondary-100",
-      "[&:is(input,textarea):read-only]:tw-bg-secondary-100",
-    ].filter((s) => s != "");
+      "[&:is(input,textarea):disabled]:tw-bg-secondary-100",
+    ];
+
+    if (this.parentFormField === null) {
+      classes.push(...inputBorderClasses(this.hasError), ...this.standaloneInputClasses);
+    }
+
+    return classes.filter((s) => s != "");
   }
 
   @HostBinding() @Input() id = `bit-input-${nextId++}`;
@@ -105,6 +107,7 @@ export class BitInputDirective implements BitFormFieldControl {
     @Optional() @Self() private ngControl: NgControl,
     private ngZone: NgZone,
     private elementRef: ElementRef<HTMLInputElement>,
+    @Optional() private parentFormField: BitFormFieldComponent,
   ) {}
 
   focus() {
@@ -114,4 +117,27 @@ export class BitInputDirective implements BitFormFieldControl {
       this.elementRef.nativeElement.focus();
     });
   }
+
+  get readOnly(): boolean {
+    return this.elementRef.nativeElement.readOnly;
+  }
+
+  get standaloneInputClasses() {
+    return [
+      "tw-px-3",
+      "tw-py-2",
+      "tw-rounded-lg",
+      // Hover
+      this.hasError ? "hover:tw-border-danger-700" : "hover:tw-border-primary-600",
+      // Focus
+      "focus:hover:tw-border-primary-600",
+      "disabled:tw-bg-secondary-100",
+      "disabled:hover:tw-border-secondary-500",
+      "focus:tw-border-primary-600",
+      "focus:tw-ring-1",
+      "focus:tw-ring-inset",
+      "focus:tw-ring-primary-600",
+      "focus:tw-z-10",
+    ];
+  }
 }
diff --git a/libs/components/src/item/item-content.component.html b/libs/components/src/item/item-content.component.html
index bed8b2f5b76e..a529cf277216 100644
--- a/libs/components/src/item/item-content.component.html
+++ b/libs/components/src/item/item-content.component.html
@@ -2,15 +2,15 @@
   <ng-content select="[slot=start]"></ng-content>
 
   <div class="tw-flex tw-flex-col tw-items-start tw-text-start tw-w-full tw-truncate [&_p]:tw-mb-0">
-    <div class="tw-text-main tw-text-base tw-w-full tw-truncate">
+    <div bitTypography="body2" class="tw-text-main tw-w-full tw-truncate">
       <ng-content></ng-content>
     </div>
-    <div class="tw-text-muted tw-text-sm tw-w-full tw-truncate">
+    <div bitTypography="helper" class="tw-text-muted tw-w-full tw-truncate">
       <ng-content select="[slot=secondary]"></ng-content>
     </div>
   </div>
 </div>
 
-<div class="tw-flex tw-gap-2 tw-items-center">
+<div class="tw-flex tw-gap-2 tw-items-center" #endSlot [hidden]="!endSlotHasChildren()">
   <ng-content select="[slot=end]"></ng-content>
 </div>
diff --git a/libs/components/src/item/item-content.component.ts b/libs/components/src/item/item-content.component.ts
index ec1c0690b193..5c1b464de938 100644
--- a/libs/components/src/item/item-content.component.ts
+++ b/libs/components/src/item/item-content.component.ts
@@ -1,10 +1,19 @@
 import { CommonModule } from "@angular/common";
-import { ChangeDetectionStrategy, Component } from "@angular/core";
+import {
+  AfterContentChecked,
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  signal,
+  ViewChild,
+} from "@angular/core";
+
+import { TypographyModule } from "../typography";
 
 @Component({
   selector: "bit-item-content, [bit-item-content]",
   standalone: true,
-  imports: [CommonModule],
+  imports: [CommonModule, TypographyModule],
   templateUrl: `item-content.component.html`,
   host: {
     class:
@@ -12,4 +21,12 @@ import { ChangeDetectionStrategy, Component } from "@angular/core";
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class ItemContentComponent {}
+export class ItemContentComponent implements AfterContentChecked {
+  @ViewChild("endSlot") endSlot: ElementRef<HTMLDivElement>;
+
+  protected endSlotHasChildren = signal(false);
+
+  ngAfterContentChecked(): void {
+    this.endSlotHasChildren.set(this.endSlot?.nativeElement.childElementCount > 0);
+  }
+}
diff --git a/libs/components/src/item/item.component.html b/libs/components/src/item/item.component.html
index 55e69006c57a..99c181a068cc 100644
--- a/libs/components/src/item/item.component.html
+++ b/libs/components/src/item/item.component.html
@@ -1,6 +1,5 @@
-<!-- TODO: Colors will be finalized in the extension refresh feature branch -->
 <div
-  class="tw-box-border tw-overflow-auto tw-flex tw-bg-background [&:has(.item-main-content_button:hover,.item-main-content_a:hover)]:tw-bg-primary-300/20 tw-text-main tw-border-solid tw-border-b tw-border-0 [&:not(bit-layout_*)]:tw-rounded-lg tw-mb-1.5"
+  class="tw-box-border tw-overflow-auto tw-flex tw-bg-background [&:has(.item-main-content_button:hover,.item-main-content_a:hover)]:tw-cursor-pointer [&:has(.item-main-content_button:hover,.item-main-content_a:hover)]:tw-bg-primary-100 tw-text-main tw-border-solid tw-border-b tw-border-0 [&:not(bit-layout_*)]:tw-rounded-lg tw-mb-1.5"
   [ngClass]="
     focusVisibleWithin()
       ? 'tw-z-10 tw-rounded tw-outline-none tw-ring tw-ring-primary-600 tw-border-transparent'
diff --git a/libs/components/src/item/item.component.ts b/libs/components/src/item/item.component.ts
index 58545a49b50e..5ce421e980ba 100644
--- a/libs/components/src/item/item.component.ts
+++ b/libs/components/src/item/item.component.ts
@@ -15,9 +15,9 @@ export const BitItemHeightClass = `tw-h-[52px]`;
  * to estimate how many items can be displayed at once and how large the virtual container should be.
  * Needs to be updated if the item height or spacing changes.
  *
- * 52px + 5.25px bottom margin + 1px border = 58.25px
+ * 52px + 6px bottom margin + 1px border = 59px
  */
-export const BitItemHeight = 58.25; //
+export const BitItemHeight = 59;
 
 @Component({
   selector: "bit-item",
diff --git a/libs/components/src/item/item.stories.ts b/libs/components/src/item/item.stories.ts
index b5212fd871a6..c0046a5b0da2 100644
--- a/libs/components/src/item/item.stories.ts
+++ b/libs/components/src/item/item.stories.ts
@@ -16,7 +16,7 @@ import { I18nMockService } from "../utils/i18n-mock.service";
 import { ItemActionComponent } from "./item-action.component";
 import { ItemContentComponent } from "./item-content.component";
 import { ItemGroupComponent } from "./item-group.component";
-import { ItemComponent } from "./item.component";
+import { ItemComponent, BitItemHeight, BitItemHeightClass } from "./item.component";
 
 export default {
   title: "Component Library/Item",
@@ -63,7 +63,7 @@ export const Default: Story = {
     template: /*html*/ `
       <bit-item>
         <button bit-item-content>
-          <i slot="start" class="bwi bwi-globe tw-text-3xl tw-text-muted" aria-hidden="true"></i>
+          <i slot="start" class="bwi bwi-globe tw-text-2xl tw-text-muted" aria-hidden="true"></i>
           Foo
           <span slot="secondary">Bar</span>
         </button>
@@ -73,10 +73,10 @@ export const Default: Story = {
             <button type="button" bitBadge variant="primary">Auto-fill</button>
           </bit-item-action>
           <bit-item-action>
-            <button type="button" bitIconButton="bwi-clone"></button>
+            <button type="button" bitIconButton="bwi-clone" size="small"></button>
           </bit-item-action>
           <bit-item-action>
-            <button type="button" bitIconButton="bwi-ellipsis-v"></button>
+            <button type="button" bitIconButton="bwi-ellipsis-v" size="small"></button>
           </bit-item-action>
         </ng-container>
       </bit-item>
@@ -135,16 +135,16 @@ export const TextOverflow: Story = {
     template: /*html*/ `
       <bit-item>
         <bit-item-content>
-          <i slot="start" class="bwi bwi-globe tw-text-3xl tw-text-muted" aria-hidden="true"></i>
+          <i slot="start" class="bwi bwi-globe tw-text-2xl tw-text-muted" aria-hidden="true"></i>
           Helloooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo!
           <ng-container slot="secondary">Worlddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd!</ng-container>
         </bit-item-content>
         <ng-container slot="end">
           <bit-item-action>
-            <button type="button" bitIconButton="bwi-clone"></button>
+            <button type="button" bitIconButton="bwi-clone" size="small"></button>
           </bit-item-action>
           <bit-item-action>
-            <button type="button" bitIconButton="bwi-ellipsis-v"></button>
+            <button type="button" bitIconButton="bwi-ellipsis-v" size="small"></button>
           </bit-item-action>
         </ng-container>
       </bit-item>
@@ -159,7 +159,7 @@ export const MultipleActionList: Story = {
       <bit-item-group aria-label="Multiple Action List">
         <bit-item>
           <button bit-item-content>
-            <i slot="start" class="bwi bwi-globe tw-text-3xl tw-text-muted" aria-hidden="true"></i>
+            <i slot="start" class="bwi bwi-globe tw-text-2xl tw-text-muted" aria-hidden="true"></i>
             Foo
             <span slot="secondary">Bar</span>
           </button>
@@ -169,16 +169,16 @@ export const MultipleActionList: Story = {
               <button type="button" bitBadge variant="primary">Auto-fill</button>
             </bit-item-action>
             <bit-item-action>
-              <button type="button" bitIconButton="bwi-clone"></button>
+              <button type="button" bitIconButton="bwi-clone" size="small"></button>
             </bit-item-action>
             <bit-item-action>
-              <button type="button" bitIconButton="bwi-ellipsis-v"></button>
+              <button type="button" bitIconButton="bwi-ellipsis-v" size="small"></button>
             </bit-item-action>
           </ng-container>
         </bit-item>
         <bit-item>
           <button bit-item-content>
-            <i slot="start" class="bwi bwi-globe tw-text-3xl tw-text-muted" aria-hidden="true"></i>
+            <i slot="start" class="bwi bwi-globe tw-text-2xl tw-text-muted" aria-hidden="true"></i>
             Foo
             <span slot="secondary">Bar</span>
           </button>
@@ -188,16 +188,16 @@ export const MultipleActionList: Story = {
               <button type="button" bitBadge variant="primary">Auto-fill</button>
             </bit-item-action>
             <bit-item-action>
-              <button type="button" bitIconButton="bwi-clone"></button>
+              <button type="button" bitIconButton="bwi-clone" size="small"></button>
             </bit-item-action>
             <bit-item-action>
-              <button type="button" bitIconButton="bwi-ellipsis-v"></button>
+              <button type="button" bitIconButton="bwi-ellipsis-v" size="small"></button>
             </bit-item-action>
           </ng-container>
         </bit-item>
         <bit-item>
           <button bit-item-content>
-            <i slot="start" class="bwi bwi-globe tw-text-3xl tw-text-muted" aria-hidden="true"></i>
+            <i slot="start" class="bwi bwi-globe tw-text-2xl tw-text-muted" aria-hidden="true"></i>
             Foo
             <span slot="secondary">Bar</span>
           </button>
@@ -207,16 +207,16 @@ export const MultipleActionList: Story = {
               <button type="button" bitBadge variant="primary">Auto-fill</button>
             </bit-item-action>
             <bit-item-action>
-              <button type="button" bitIconButton="bwi-clone"></button>
+              <button type="button" bitIconButton="bwi-clone" size="small"></button>
             </bit-item-action>
             <bit-item-action>
-              <button type="button" bitIconButton="bwi-ellipsis-v"></button>
+              <button type="button" bitIconButton="bwi-ellipsis-v" size="small"></button>
             </bit-item-action>
           </ng-container>
         </bit-item>
         <bit-item>
           <button bit-item-content>
-            <i slot="start" class="bwi bwi-globe tw-text-3xl tw-text-muted" aria-hidden="true"></i>
+            <i slot="start" class="bwi bwi-globe tw-text-2xl tw-text-muted" aria-hidden="true"></i>
             Foo
             <span slot="secondary">Bar</span>
           </button>
@@ -226,16 +226,16 @@ export const MultipleActionList: Story = {
               <button type="button" bitBadge variant="primary">Auto-fill</button>
             </bit-item-action>
             <bit-item-action>
-              <button type="button" bitIconButton="bwi-clone"></button>
+              <button type="button" bitIconButton="bwi-clone" size="small"></button>
             </bit-item-action>
             <bit-item-action>
-              <button type="button" bitIconButton="bwi-ellipsis-v"></button>
+              <button type="button" bitIconButton="bwi-ellipsis-v" size="small"></button>
             </bit-item-action>
           </ng-container>
         </bit-item>
         <bit-item>
           <button bit-item-content>
-            <i slot="start" class="bwi bwi-globe tw-text-3xl tw-text-muted" aria-hidden="true"></i>
+            <i slot="start" class="bwi bwi-globe tw-text-2xl tw-text-muted" aria-hidden="true"></i>
             Foo
             <span slot="secondary">Bar</span>
           </button>
@@ -245,16 +245,16 @@ export const MultipleActionList: Story = {
               <button type="button" bitBadge variant="primary">Auto-fill</button>
             </bit-item-action>
             <bit-item-action>
-              <button type="button" bitIconButton="bwi-clone"></button>
+              <button type="button" bitIconButton="bwi-clone" size="small"></button>
             </bit-item-action>
             <bit-item-action>
-              <button type="button" bitIconButton="bwi-ellipsis-v"></button>
+              <button type="button" bitIconButton="bwi-ellipsis-v" size="small"></button>
             </bit-item-action>
           </ng-container>
         </bit-item>
         <bit-item>
           <button bit-item-content>
-            <i slot="start" class="bwi bwi-globe tw-text-3xl tw-text-muted" aria-hidden="true"></i>
+            <i slot="start" class="bwi bwi-globe tw-text-2xl tw-text-muted" aria-hidden="true"></i>
             Foo
             <span slot="secondary">Bar</span>
           </button>
@@ -264,10 +264,10 @@ export const MultipleActionList: Story = {
               <button type="button" bitBadge variant="primary">Auto-fill</button>
             </bit-item-action>
             <bit-item-action>
-              <button type="button" bitIconButton="bwi-clone"></button>
+              <button type="button" bitIconButton="bwi-clone" size="small"></button>
             </bit-item-action>
             <bit-item-action>
-              <button type="button" bitIconButton="bwi-ellipsis-v"></button>
+              <button type="button" bitIconButton="bwi-ellipsis-v" size="small"></button>
             </bit-item-action>
           </ng-container>
         </bit-item>
@@ -326,13 +326,15 @@ export const VirtualScrolling: Story = {
   render: (_args) => ({
     props: {
       data: Array.from(Array(100000).keys()),
+      itemSize: BitItemHeight,
+      itemClass: BitItemHeightClass,
     },
     template: /*html*/ `
-      <cdk-virtual-scroll-viewport [itemSize]="46" class="tw-h-[500px]">
+      <cdk-virtual-scroll-viewport [itemSize]="itemSize" class="tw-h-[500px]">
         <bit-item-group aria-label="Single Action List">
           <bit-item *cdkVirtualFor="let item of data">
-            <button bit-item-content>
-              <i slot="start" class="bwi bwi-globe tw-text-3xl tw-text-muted" aria-hidden="true"></i>
+            <button bit-item-content [ngClass]="itemClass">
+              <i slot="start" class="bwi bwi-globe tw-text-2xl tw-text-muted" aria-hidden="true"></i>
               {{ item }}
             </button>
 
@@ -341,10 +343,10 @@ export const VirtualScrolling: Story = {
                 <button type="button" bitBadge variant="primary">Auto-fill</button>
               </bit-item-action>
               <bit-item-action>
-                <button type="button" bitIconButton="bwi-clone"></button>
+                <button type="button" bitIconButton="bwi-clone" size="small"></button>
               </bit-item-action>
               <bit-item-action>
-                <button type="button" bitIconButton="bwi-ellipsis-v"></button>
+                <button type="button" bitIconButton="bwi-ellipsis-v" size="small"></button>
               </bit-item-action>
             </ng-container>
           </bit-item>
diff --git a/libs/components/src/menu/menu-divider.component.html b/libs/components/src/menu/menu-divider.component.html
index 7d9fee3e8f28..98048261cffa 100644
--- a/libs/components/src/menu/menu-divider.component.html
+++ b/libs/components/src/menu/menu-divider.component.html
@@ -1,5 +1,5 @@
 <div
-  class="tw-my-2 tw-border-0 tw-border-t tw-border-solid tw-border-t-secondary-600"
+  class="tw-my-2 tw-border-0 tw-border-t tw-border-solid tw-border-t-secondary-500"
   role="separator"
   aria-hidden="true"
 ></div>
diff --git a/libs/components/src/menu/menu-item.directive.ts b/libs/components/src/menu/menu-item.directive.ts
index 3f4b23e1cc61..2c69b0784c53 100644
--- a/libs/components/src/menu/menu-item.directive.ts
+++ b/libs/components/src/menu/menu-item.directive.ts
@@ -10,25 +10,27 @@ export class MenuItemDirective implements FocusableOption {
   @HostBinding("class") classList = [
     "tw-block",
     "tw-w-full",
-    "tw-py-1",
-    "tw-px-4",
+    "tw-py-1.5",
+    "tw-px-3",
     "!tw-text-main",
     "!tw-no-underline",
     "tw-cursor-pointer",
     "tw-border-none",
     "tw-bg-background",
     "tw-text-left",
-    "hover:tw-bg-secondary-100",
-    "focus-visible:tw-bg-secondary-100",
+    "hover:tw-bg-primary-100",
+    "hover:!tw-underline",
     "focus-visible:tw-z-50",
     "focus-visible:tw-outline-none",
-    "focus-visible:tw-ring",
-    "focus-visible:tw-ring-offset-2",
-    "focus-visible:tw-ring-primary-700",
+    "focus-visible:tw-ring-2",
+    "focus-visible:tw-rounded-lg",
+    "focus-visible:tw-ring-inset",
+    "focus-visible:tw-ring-primary-600",
     "active:!tw-ring-0",
     "active:!tw-ring-offset-0",
     "disabled:!tw-text-muted",
     "disabled:hover:tw-bg-background",
+    "disabled:hover:!tw-no-underline",
     "disabled:tw-cursor-not-allowed",
   ];
   @HostBinding("attr.role") role = "menuitem";
diff --git a/libs/components/src/menu/menu-trigger-for.directive.ts b/libs/components/src/menu/menu-trigger-for.directive.ts
index e49bb040d26e..44c558fc61fa 100644
--- a/libs/components/src/menu/menu-trigger-for.directive.ts
+++ b/libs/components/src/menu/menu-trigger-for.directive.ts
@@ -106,6 +106,7 @@ export class MenuTriggerForDirective implements OnDestroy {
 
     this.isOpen = false;
     this.disposeAll();
+    this.menu.closed.emit();
   }
 
   private getClosedEvents(): Observable<any> {
diff --git a/libs/components/src/menu/menu.component.html b/libs/components/src/menu/menu.component.html
index 5b6b15b5cbe9..31fd6df0a66a 100644
--- a/libs/components/src/menu/menu.component.html
+++ b/libs/components/src/menu/menu.component.html
@@ -1,7 +1,7 @@
 <ng-template>
   <div
     (click)="closed.emit()"
-    class="tw-flex tw-shrink-0 tw-flex-col tw-rounded tw-border tw-border-solid tw-border-secondary-600 tw-bg-background tw-bg-clip-padding tw-py-2 tw-overflow-y-auto"
+    class="tw-flex tw-shrink-0 tw-flex-col tw-rounded-lg tw-border tw-border-solid tw-border-secondary-500 tw-bg-background tw-bg-clip-padding tw-py-1 tw-overflow-y-auto"
     [attr.role]="ariaRole"
     [attr.aria-label]="ariaLabel"
     cdkTrapFocus
diff --git a/libs/components/src/menu/menu.component.ts b/libs/components/src/menu/menu.component.ts
index de606687e89c..858cf991856f 100644
--- a/libs/components/src/menu/menu.component.ts
+++ b/libs/components/src/menu/menu.component.ts
@@ -31,7 +31,9 @@ export class MenuComponent implements AfterContentInit {
 
   ngAfterContentInit() {
     if (this.ariaRole === "menu") {
-      this.keyManager = new FocusKeyManager(this.menuItems).withWrap();
+      this.keyManager = new FocusKeyManager(this.menuItems)
+        .withWrap()
+        .skipPredicate((item) => item.disabled);
     }
   }
 }
diff --git a/libs/components/src/multi-select/multi-select.component.ts b/libs/components/src/multi-select/multi-select.component.ts
index b0a2cf613b6d..249c0473c4cd 100644
--- a/libs/components/src/multi-select/multi-select.component.ts
+++ b/libs/components/src/multi-select/multi-select.component.ts
@@ -1,3 +1,4 @@
+import { coerceBooleanProperty } from "@angular/cdk/coercion";
 import { hasModifierKey } from "@angular/cdk/keycodes";
 import {
   Component,
@@ -39,7 +40,7 @@ export class MultiSelectComponent implements OnInit, BitFormFieldControl, Contro
   @Input() removeSelectedItems = false;
   @Input() placeholder: string;
   @Input() loading = false;
-  @Input() disabled = false;
+  @Input({ transform: coerceBooleanProperty }) disabled?: boolean;
 
   // Internal tracking of selected items
   protected selectedItems: SelectItemView[];
diff --git a/libs/components/src/multi-select/scss/bw.theme.scss b/libs/components/src/multi-select/scss/bw.theme.scss
index b567c7259248..8e12c51ba721 100644
--- a/libs/components/src/multi-select/scss/bw.theme.scss
+++ b/libs/components/src/multi-select/scss/bw.theme.scss
@@ -9,19 +9,18 @@ $ng-select-highlight: rgb(var(--color-primary-700)) !default;
 $ng-select-primary-text: rgb(var(--color-text-main)) !default;
 $ng-select-disabled-text: rgb(var(--color-secondary-100)) !default;
 $ng-select-border: rgb(var(--color-secondary-600)) !default;
-$ng-select-border-radius: 4px !default;
-$ng-select-bg: rgb(var(--color-background-alt)) !default;
+$ng-select-border-radius: 0.5rem !default;
+$ng-select-bg: rgb(var(--color-background)) !default;
 $ng-select-selected: transparent !default;
-$ng-select-selected-alt: rgb(var(--color-text-main) / 0.06) !default;
 $ng-select-selected-text: $ng-select-primary-text !default;
 
-$ng-select-marked: rgb(var(--color-text-main) / 0.12) !default;
+$ng-select-marked: rgb(var(--color-primary-100)) !default;
 $ng-select-marked-text: $ng-select-primary-text !default;
 
 $ng-select-box-shadow: none !default;
 $ng-select-placeholder: rgb(var(--color-text-muted)) !default;
-$ng-select-height: 35px !default;
-$ng-select-value-padding-left: 10px !default;
+$ng-select-height: 100%;
+$ng-select-value-padding-left: 1rem !default;
 $ng-select-value-font-size: 0.9em !default;
 $ng-select-value-text: $ng-select-primary-text !default;
 
@@ -31,7 +30,7 @@ $ng-select-dropdown-optgroup-text: rgb(var(--color-text-muted)) !default;
 $ng-select-dropdown-optgroup-marked: $ng-select-dropdown-optgroup-text !default;
 $ng-select-dropdown-option-bg: $ng-select-dropdown-bg !default;
 $ng-select-dropdown-option-text: $ng-select-primary-text !default;
-$ng-select-dropdown-option-disabled: rgb(var(--color-text-muted) / 0.6) !default;
+$ng-select-dropdown-option-disabled: rgb(var(--color-secondary-300)) !default;
 
 $ng-select-input-text: $ng-select-primary-text !default;
 
@@ -41,12 +40,12 @@ $ng-clear-icon-hover: rgb(var(--color-text-main)) !default;
 $ng-dropdown-shadow: rgb(var(--color-secondary-100)) !default;
 
 .ng-select {
+  height: $ng-select-height;
   &.ng-select-opened {
     > .ng-select-container {
-      background: $ng-select-bg;
-      border-color: $ng-select-border;
+      background: transparent;
       &:hover {
-        box-shadow: none;
+        box-shadow: $ng-select-box-shadow;
       }
       .ng-arrow {
         top: -2px;
@@ -100,11 +99,11 @@ $ng-dropdown-shadow: rgb(var(--color-secondary-100)) !default;
     color: $ng-select-primary-text;
     background-color: $ng-select-bg;
     border-radius: $ng-select-border-radius;
-    border: 1px solid $ng-select-border;
-    min-height: $ng-select-height;
+    border: none;
+    height: $ng-select-height;
     align-items: center;
     &:hover {
-      box-shadow: 0 1px 0 $ng-dropdown-shadow;
+      box-shadow: $ng-select-box-shadow;
     }
     .ng-value-container {
       align-items: center;
@@ -154,9 +153,7 @@ $ng-dropdown-shadow: rgb(var(--color-secondary-100)) !default;
     .ng-select-container {
       .ng-value-container {
         padding-top: 5px;
-        padding-left: 7px;
         @include rtl {
-          padding-right: 7px;
           padding-left: 0;
         }
         .ng-value {
@@ -206,20 +203,8 @@ $ng-dropdown-shadow: rgb(var(--color-secondary-100)) !default;
             }
           }
         }
-        .ng-input {
-          padding: 0 0 3px 3px;
-          @include rtl {
-            padding: 0 3px 3px 0;
-          }
-        }
         .ng-placeholder {
-          top: 5px;
-          padding-bottom: 5px;
-          padding-left: 3px;
-          @include rtl {
-            padding-right: 3px;
-            padding-left: 0;
-          }
+          padding-bottom: 0.25rem;
         }
       }
     }
@@ -230,6 +215,8 @@ $ng-dropdown-shadow: rgb(var(--color-secondary-100)) !default;
     &:hover .ng-clear {
       color: $ng-clear-icon-hover;
     }
+    border-radius: $ng-select-border-radius;
+    text-align: center;
   }
   .ng-spinner-zone {
     padding: 5px 5px 0 0;
@@ -262,7 +249,8 @@ $ng-dropdown-shadow: rgb(var(--color-secondary-100)) !default;
   z-index: 2050 !important;
   background-color: $ng-select-dropdown-bg;
   border: 1px solid $ng-select-dropdown-border;
-  box-shadow: 0 1px 0 $ng-dropdown-shadow;
+  border-radius: $ng-select-border-radius;
+  box-shadow: $ng-select-box-shadow;
   left: 0;
   &.ng-select-top {
     bottom: 100%;
@@ -335,6 +323,8 @@ $ng-dropdown-shadow: rgb(var(--color-secondary-100)) !default;
     padding: 5px 7px;
   }
   .ng-dropdown-panel-items {
+    border-radius: $ng-select-border-radius;
+    background: $ng-select-bg;
     .ng-optgroup {
       user-select: none;
       padding: 8px 10px;
@@ -357,10 +347,7 @@ $ng-dropdown-shadow: rgb(var(--color-secondary-100)) !default;
     .ng-option {
       background-color: $ng-select-dropdown-option-bg;
       color: $ng-select-dropdown-option-text;
-      padding: 8px 10px;
-      &.ng-option-selected {
-        background-color: $ng-select-selected-alt;
-      }
+      padding: 0.375rem 0.75rem;
       &.ng-option-selected.ng-option-marked {
         background-color: $ng-select-marked;
       }
diff --git a/libs/components/src/radio-button/radio-button.component.ts b/libs/components/src/radio-button/radio-button.component.ts
index 967718f40790..dc294103d420 100644
--- a/libs/components/src/radio-button/radio-button.component.ts
+++ b/libs/components/src/radio-button/radio-button.component.ts
@@ -11,7 +11,7 @@ let nextId = 0;
 export class RadioButtonComponent {
   @HostBinding("attr.id") @Input() id = `bit-radio-button-${nextId++}`;
   @HostBinding("class") get classList() {
-    return [this.block ? "tw-block" : "tw-inline-block", "tw-mb-2"];
+    return [this.block ? "tw-block" : "tw-inline-block", "tw-mb-1"];
   }
 
   @Input() value: unknown;
diff --git a/libs/components/src/radio-button/radio-button.stories.ts b/libs/components/src/radio-button/radio-button.stories.ts
index 534bc4bfa1dc..dcef13a19be0 100644
--- a/libs/components/src/radio-button/radio-button.stories.ts
+++ b/libs/components/src/radio-button/radio-button.stories.ts
@@ -164,3 +164,32 @@ export const BlockHint: Story = {
     `,
   }),
 };
+
+export const Disabled: Story = {
+  render: () => ({
+    props: {
+      formObj: new FormGroup({
+        radio: new FormControl(0),
+      }),
+    },
+    template: /* HTML */ `
+      <form [formGroup]="formObj">
+        <bit-radio-group formControlName="radio" aria-label="Example radio group">
+          <bit-label>Group of radio buttons</bit-label>
+
+          <bit-radio-button id="radio-first" [value]="0" [disabled]="true">
+            <bit-label>First</bit-label>
+          </bit-radio-button>
+
+          <bit-radio-button id="radio-second" [value]="1" [disabled]="true">
+            <bit-label>Second</bit-label>
+          </bit-radio-button>
+
+          <bit-radio-button id="radio-third" [value]="2" [disabled]="true">
+            <bit-label>Third</bit-label>
+          </bit-radio-button>
+        </bit-radio-group>
+      </form>
+    `,
+  }),
+};
diff --git a/libs/components/src/radio-button/radio-group.component.ts b/libs/components/src/radio-button/radio-group.component.ts
index 6a93ee07a6b9..15d5fb32d1c3 100644
--- a/libs/components/src/radio-button/radio-group.component.ts
+++ b/libs/components/src/radio-button/radio-group.component.ts
@@ -1,7 +1,7 @@
 import { Component, ContentChild, HostBinding, Input, Optional, Self } from "@angular/core";
 import { ControlValueAccessor, NgControl, Validators } from "@angular/forms";
 
-import { BitLabel } from "../form-control/label.directive";
+import { BitLabel } from "../form-control/label.component";
 
 let nextId = 0;
 
diff --git a/libs/components/src/radio-button/radio-input.component.ts b/libs/components/src/radio-button/radio-input.component.ts
index df549a751b11..425f70454b0b 100644
--- a/libs/components/src/radio-button/radio-input.component.ts
+++ b/libs/components/src/radio-button/radio-input.component.ts
@@ -25,8 +25,8 @@ export class RadioInputComponent implements BitFormControlAbstraction {
     "tw-border",
     "tw-border-solid",
     "tw-border-secondary-600",
-    "tw-w-3.5",
-    "tw-h-3.5",
+    "tw-w-5",
+    "tw-h-5",
     "tw-mr-1.5",
     "tw-bottom-[-1px]", // Fix checkbox looking off-center
     "tw-flex-none", // Flexbox fix for bit-form-control
@@ -34,6 +34,11 @@ export class RadioInputComponent implements BitFormControlAbstraction {
     "hover:tw-border-2",
     "[&>label:hover]:tw-border-2",
 
+    // if it exists, the parent form control handles focus
+    "[&:not(bit-form-control_*)]:focus-visible:tw-ring-2",
+    "[&:not(bit-form-control_*)]:focus-visible:tw-ring-offset-2",
+    "[&:not(bit-form-control_*)]:focus-visible:tw-ring-primary-600",
+
     "before:tw-content-['']",
     "before:tw-transition",
     "before:tw-block",
@@ -41,18 +46,15 @@ export class RadioInputComponent implements BitFormControlAbstraction {
     "before:tw-rounded-full",
     "before:tw-inset-[2px]",
 
-    "focus-visible:tw-ring-2",
-    "focus-visible:tw-ring-offset-2",
-    "focus-visible:tw-ring-primary-700",
-
     "disabled:tw-cursor-auto",
-    "disabled:tw-border",
     "disabled:tw-bg-secondary-100",
+    "disabled:hover:tw-border",
 
     "checked:tw-bg-text-contrast",
     "checked:tw-border-primary-600",
+    "checked:tw-border-2",
 
-    "checked:hover:tw-border",
+    "checked:hover:tw-border-2",
     "checked:hover:tw-border-primary-700",
     "checked:hover:before:tw-bg-primary-700",
     "[&>label:hover]:checked:tw-bg-primary-700",
@@ -60,10 +62,13 @@ export class RadioInputComponent implements BitFormControlAbstraction {
 
     "checked:before:tw-bg-primary-600",
 
-    "checked:disabled:tw-border-secondary-100",
-    "checked:disabled:tw-bg-secondary-100",
+    "checked:disabled:tw-border-secondary-600",
+    "checked:disabled:hover:tw-border-secondary-600",
+    "checked:disabled:hover:tw-border-2",
+    "checked:disabled:tw-bg-background",
 
-    "checked:disabled:before:tw-bg-text-muted",
+    "checked:disabled:hover:before:tw-bg-secondary-600",
+    "checked:disabled:before:tw-bg-secondary-600",
   ];
 
   constructor(@Optional() @Self() private ngControl?: NgControl) {}
diff --git a/libs/components/src/search/search.component.html b/libs/components/src/search/search.component.html
index 0628c02f9591..b5f9fe94eda6 100644
--- a/libs/components/src/search/search.component.html
+++ b/libs/components/src/search/search.component.html
@@ -13,7 +13,7 @@
     [type]="inputType"
     [id]="id"
     [placeholder]="placeholder ?? ('search' | i18n)"
-    class="tw-rounded-l tw-pl-9"
+    class="tw-pl-9"
     [ngModel]="searchText"
     (ngModelChange)="onChange($event)"
     (blur)="onTouch()"
diff --git a/libs/components/src/section/section-header.component.html b/libs/components/src/section/section-header.component.html
index d17022d5eb79..3f96e22540ff 100644
--- a/libs/components/src/section/section-header.component.html
+++ b/libs/components/src/section/section-header.component.html
@@ -1,5 +1,5 @@
 <div class="tw-flex tw-justify-between tw-items-end tw-gap-1">
-  <div class="[&>*]:tw-mb-0 [&>*]:tw-text-headers tw-flex tw-items-center tw-gap-1">
+  <div class="[&>*]:tw-mb-0 [&>*]:tw-text-main tw-flex tw-items-center tw-gap-1">
     <ng-content></ng-content>
   </div>
   <div class="tw-text-muted has-[button]:-tw-mb-1">
diff --git a/libs/components/src/select/select.component.ts b/libs/components/src/select/select.component.ts
index 2d900353a690..c6827bc30ac3 100644
--- a/libs/components/src/select/select.component.ts
+++ b/libs/components/src/select/select.component.ts
@@ -57,7 +57,7 @@ export class SelectComponent<T> implements BitFormFieldControl, ControlValueAcce
     this.selectedOption = this.findSelectedOption(this.items, this.selectedValue);
   }
 
-  @HostBinding("class") protected classes = ["tw-block", "tw-w-full"];
+  @HostBinding("class") protected classes = ["tw-block", "tw-w-full", "tw-h-full"];
 
   // Usings a separate getter for the HostBinding to get around an unexplained angular error
   @HostBinding("attr.disabled")
diff --git a/libs/components/src/select/select.stories.ts b/libs/components/src/select/select.stories.ts
index a90d534d340c..4bc85d8dba20 100644
--- a/libs/components/src/select/select.stories.ts
+++ b/libs/components/src/select/select.stories.ts
@@ -2,6 +2,7 @@ import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
 
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 
+import { FormFieldModule } from "../form-field";
 import { MultiSelectComponent } from "../multi-select/multi-select.component";
 import { I18nMockService } from "../utils/i18n-mock.service";
 
@@ -13,7 +14,7 @@ export default {
   component: SelectComponent,
   decorators: [
     moduleMetadata({
-      imports: [SelectModule],
+      imports: [SelectModule, FormFieldModule],
       providers: [
         {
           provide: I18nService,
@@ -44,12 +45,17 @@ export const Default: Story = {
     props: {
       ...args,
     },
-    template: `<bit-select [disabled]="disabled">
-        <bit-option value="value1" label="Value 1" icon="bwi-collection"></bit-option>
-        <bit-option value="value2" label="Value 2" icon="bwi-collection"></bit-option>
-        <bit-option value="value3" label="Value 3" icon="bwi-collection"></bit-option>
-        <bit-option value="value4" label="Value 4" icon="bwi-collection" disabled></bit-option>
-      </bit-select>`,
+    template: /*html*/ `
+      <bit-form-field>
+        <bit-label>Choose a value</bit-label>
+        <bit-select [disabled]="disabled">
+          <bit-option value="value1" label="Value 1" icon="bwi-collection"></bit-option>
+          <bit-option value="value2" label="Value 2" icon="bwi-collection"></bit-option>
+          <bit-option value="value3" label="Value 3" icon="bwi-collection"></bit-option>
+          <bit-option value="value4" label="Value 4" icon="bwi-collection" disabled></bit-option>
+        </bit-select>
+      </bit-form-field>
+    `,
   }),
   args: {},
 };
diff --git a/libs/components/src/shared/button-like.abstraction.ts b/libs/components/src/shared/button-like.abstraction.ts
index e422bd4f7daa..82fdc578f25b 100644
--- a/libs/components/src/shared/button-like.abstraction.ts
+++ b/libs/components/src/shared/button-like.abstraction.ts
@@ -3,5 +3,4 @@ export type ButtonType = "primary" | "secondary" | "danger" | "unstyled";
 export abstract class ButtonLikeAbstraction {
   loading: boolean;
   disabled: boolean;
-  setButtonType: (value: ButtonType) => void;
 }
diff --git a/libs/components/src/stories/colors.mdx b/libs/components/src/stories/colors.mdx
index f6b205be4969..2891fe668032 100644
--- a/libs/components/src/stories/colors.mdx
+++ b/libs/components/src/stories/colors.mdx
@@ -25,6 +25,7 @@ export const Table = (args) => (
       {Row("background-alt4")}
     </tbody>
     <tbody>
+      {Row("primary-100")}
       {Row("primary-300")}
       {Row("primary-600")}
       {Row("primary-700")}
@@ -32,25 +33,34 @@ export const Table = (args) => (
     <tbody>
       {Row("secondary-100")}
       {Row("secondary-300")}
+      {Row("secondary-500")}
       {Row("secondary-600")}
       {Row("secondary-700")}
     </tbody>
     <tbody>
+      {Row("success-100")}
       {Row("success-600")}
       {Row("success-700")}
     </tbody>
     <tbody>
+      {Row("danger-100")}
       {Row("danger-600")}
       {Row("danger-700")}
     </tbody>
     <tbody>
+      {Row("warning-100")}
       {Row("warning-600")}
       {Row("warning-700")}
     </tbody>
     <tbody>
+      {Row("info-100")}
       {Row("info-600")}
       {Row("info-700")}
     </tbody>
+    <tbody>
+      {Row("art-primary")}
+      {Row("art-accent")}
+    </tbody>
     <thead>
       <tr>
         <th>Text</th>
diff --git a/libs/components/src/stories/kitchen-sink/components/kitchen-sink-form.component.ts b/libs/components/src/stories/kitchen-sink/components/kitchen-sink-form.component.ts
index 4e8d884c4ac8..c63b36ea89c4 100644
--- a/libs/components/src/stories/kitchen-sink/components/kitchen-sink-form.component.ts
+++ b/libs/components/src/stories/kitchen-sink/components/kitchen-sink-form.component.ts
@@ -76,6 +76,7 @@ import { KitchenSinkSharedModule } from "../kitchen-sink-shared.module";
             linkType="primary"
             [bitPopoverTriggerFor]="myPopover"
             #triggerRef="popoverTrigger"
+            type="button"
             slot="end"
           >
             <i class="bwi bwi-question-circle"></i>
diff --git a/libs/components/src/stories/kitchen-sink/components/kitchen-sink-main.component.ts b/libs/components/src/stories/kitchen-sink/components/kitchen-sink-main.component.ts
index ae4448eb76ca..687b89173813 100644
--- a/libs/components/src/stories/kitchen-sink/components/kitchen-sink-main.component.ts
+++ b/libs/components/src/stories/kitchen-sink/components/kitchen-sink-main.component.ts
@@ -64,26 +64,24 @@ class KitchenSinkDialog {
     </bit-callout>
 
     <div class="tw-mb-6 tw-mt-6">
-      <h1 bitTypography="h1" class="tw-text-main">
-        Bitwarden <bit-avatar text="Bit Warden"></bit-avatar>
-      </h1>
+      <h1 bitTypography="h1">Bitwarden <bit-avatar text="Bit Warden"></bit-avatar></h1>
       <a bitLink linkType="primary" href="#">Learn more</a>
     </div>
 
     <bit-tab-group label="Main content tabs" class="tw-text-main">
       <bit-tab label="Evaluation">
         <bit-section>
-          <h2 bitTypography="h2" class="tw-text-main tw-mb-6">About</h2>
+          <h2 bitTypography="h2" class="tw-mb-6">About</h2>
           <bit-kitchen-sink-table></bit-kitchen-sink-table>
 
           <button bitButton (click)="openDefaultDialog()">Open Dialog</button>
         </bit-section>
         <bit-section>
-          <h2 bitTypography="h2" class="tw-text-main tw-mb-6">Companies using Bitwarden</h2>
+          <h2 bitTypography="h2" class="tw-mb-6">Companies using Bitwarden</h2>
           <bit-kitchen-sink-toggle-list></bit-kitchen-sink-toggle-list>
         </bit-section>
         <bit-section>
-          <h2 bitTypography="h2" class="tw-text-main tw-mb-6">Survey</h2>
+          <h2 bitTypography="h2" class="tw-mb-6">Survey</h2>
           <bit-kitchen-sink-form></bit-kitchen-sink-form>
         </bit-section>
       </bit-tab>
diff --git a/libs/components/src/styles.css b/libs/components/src/styles.css
index ba200ff3f32b..4f885115c87f 100644
--- a/libs/components/src/styles.css
+++ b/libs/components/src/styles.css
@@ -7,5 +7,5 @@
 @tailwind utilities;
 
 html {
-  font-size: 14px;
+  font-size: 16px;
 }
diff --git a/libs/components/src/toggle-group/toggle-group.mdx b/libs/components/src/toggle-group/toggle-group.mdx
index c57265556954..252627f3d324 100644
--- a/libs/components/src/toggle-group/toggle-group.mdx
+++ b/libs/components/src/toggle-group/toggle-group.mdx
@@ -1,4 +1,4 @@
-import { Meta, Story, Primary, Controls } from "@storybook/addon-docs";
+import { Meta, Story, Primary, Controls, Canvas } from "@storybook/addon-docs";
 
 import * as stories from "./toggle-group.stories";
 
@@ -15,22 +15,36 @@ Toggle groups function as radio buttons and a radio group under the hood.
 A button in a toggle group can have a badge counter added to show the number of items existing
 within that filter.
 
-For focus states, use `focus-visible`.
+## Default
+
+<Canvas of={stories.Default} />
 
-<Primary />
 <Controls />
 
-## Accessibility
+## Label wrap
+
+If the labels in a toggle group would overflow the width of the toggle group container, then the
+labels will wrap to 2 lines and truncate with an ellipsis past that. The full label text is
+accessible via the `title` prop (i.e. visible on hover).
+
+<Canvas of={stories.LabelWrap} />
+
+## Full width
+
+If a toggle group should span the width of its container, pass the `fullWidth` input to the toggle
+group.
+
+```
+<bit-toggle-group fullWidth>
+...toggle components here...
+</bit-toggle-group>
+```
+
+<Canvas of={stories.FullWidth} />
 
-- Follow contrast rules for the main button styles.
-- Focus:
-  - Implement as a radio group with button styling and a context label (context label can be screen
-    reader only depending on use case).
-  - Since only 1 button can be selected at a time to filter the toggle group acts similarly to a
-    radio group.
-  - When moving focus to a button group, the focus should always move to the selected button. The
-    screen reader should then announce the button group: example “[context label], [button content]
-    selected, of [# of buttons]”), the number of buttons and the currently selected button. The user
-    may navigate the options then via left/right arrow keys.
+# Accessibility
 
-See WCAG for more: https://www.w3.org/WAI/ARIA/apg/patterns/radio/
+- Since only 1 button can be selected at a time, the toggle group acts similarly to a radio group.
+- The user may navigate the options via left/right arrow keys.
+- The screen reader will announce the button group: example “[context label], [button content]
+  selected, of [# of buttons]”), the number of buttons and the currently selected button.
diff --git a/libs/components/src/toggle-group/toggle-group.stories.ts b/libs/components/src/toggle-group/toggle-group.stories.ts
index 8fdd22efe3f1..f6e10291e1d6 100644
--- a/libs/components/src/toggle-group/toggle-group.stories.ts
+++ b/libs/components/src/toggle-group/toggle-group.stories.ts
@@ -46,3 +46,56 @@ export const Default: Story = {
     selected: "all",
   },
 };
+
+export const LabelWrap: Story = {
+  render: (args) => ({
+    props: args,
+    template: /* HTML */ `
+      <bit-toggle-group
+        [(selected)]="selected"
+        aria-label="People list filter"
+        class="tw-max-w-[500px]"
+      >
+        <bit-toggle value="all">
+          All of the best things <span bitBadge variant="info">3</span>
+        </bit-toggle>
+
+        <bit-toggle value="invited"> Invited to a cool party </bit-toggle>
+
+        <bit-toggle value="accepted">
+          Accepted the invitation<span bitBadge variant="info">2</span>
+        </bit-toggle>
+
+        <bit-toggle value="deactivated"> Deactivated forever</bit-toggle>
+      </bit-toggle-group>
+    `,
+  }),
+  args: {
+    selected: "all",
+  },
+};
+
+export const FullWidth: Story = {
+  render: (args) => ({
+    props: args,
+    template: /* HTML */ `
+      <bit-toggle-group
+        [(selected)]="selected"
+        aria-label="People list filter"
+        [fullWidth]="fullWidth"
+      >
+        <bit-toggle value="all"> All <span bitBadge variant="info">3</span> </bit-toggle>
+
+        <bit-toggle value="invited"> Invited </bit-toggle>
+
+        <bit-toggle value="accepted"> Accepted <span bitBadge variant="info">2</span> </bit-toggle>
+
+        <bit-toggle value="deactivated"> Deactivated </bit-toggle>
+      </bit-toggle-group>
+    `,
+  }),
+  args: {
+    selected: "all",
+    fullWidth: true,
+  },
+};
diff --git a/libs/components/src/toggle-group/toggle.component.html b/libs/components/src/toggle-group/toggle.component.html
index 471ed5f0c033..4e12aee90647 100644
--- a/libs/components/src/toggle-group/toggle.component.html
+++ b/libs/components/src/toggle-group/toggle.component.html
@@ -6,6 +6,11 @@
   [checked]="selected"
   (change)="onInputInteraction()"
 />
-<label for="bit-toggle-{{ id }}" [ngClass]="labelClasses">
-  <ng-content></ng-content>
+<label for="bit-toggle-{{ id }}" [ngClass]="labelClasses" [title]="labelTextContent">
+  <span class="group-hover/toggle:tw-underline tw-line-clamp-2" #labelContent>
+    <ng-content></ng-content>
+  </span>
+  <span class="tw-shrink-0" #bitBadgeContainer [hidden]="!bitBadgeContainerHasChidlren()">
+    <ng-content select="[bitBadge]"></ng-content>
+  </span>
 </label>
diff --git a/libs/components/src/toggle-group/toggle.component.ts b/libs/components/src/toggle-group/toggle.component.ts
index e1f93ed3673d..a6a27180a879 100644
--- a/libs/components/src/toggle-group/toggle.component.ts
+++ b/libs/components/src/toggle-group/toggle.component.ts
@@ -1,4 +1,12 @@
-import { Component, HostBinding, Input } from "@angular/core";
+import {
+  AfterContentChecked,
+  Component,
+  ElementRef,
+  HostBinding,
+  Input,
+  signal,
+  ViewChild,
+} from "@angular/core";
 
 import { ToggleGroupComponent } from "./toggle-group.component";
 
@@ -9,15 +17,19 @@ let nextId = 0;
   templateUrl: "./toggle.component.html",
   preserveWhitespaces: false,
 })
-export class ToggleComponent<TValue> {
+export class ToggleComponent<TValue> implements AfterContentChecked {
   id = nextId++;
 
   @Input() value?: TValue;
+  @ViewChild("labelContent") labelContent: ElementRef<HTMLSpanElement>;
+  @ViewChild("bitBadgeContainer") bitBadgeContainer: ElementRef<HTMLSpanElement>;
 
   constructor(private groupComponent: ToggleGroupComponent<TValue>) {}
 
   @HostBinding("tabIndex") tabIndex = "-1";
-  @HostBinding("class") classList = ["tw-group/toggle"];
+  @HostBinding("class") classList = ["tw-group/toggle", "tw-flex"];
+
+  protected bitBadgeContainerHasChidlren = signal(false);
 
   get name() {
     return this.groupComponent.name;
@@ -31,54 +43,60 @@ export class ToggleComponent<TValue> {
     return ["tw-peer/toggle-input", "tw-appearance-none", "tw-outline-none"];
   }
 
+  get labelTextContent() {
+    return this.labelContent?.nativeElement.innerText ?? null;
+  }
+
   get labelClasses() {
     return [
+      "tw-h-full",
       "tw-w-full",
+      "tw-flex",
+      "tw-items-center",
       "tw-justify-center",
+      "tw-gap-1.5",
       "!tw-font-semibold",
-      "tw-inline-block",
+      "tw-leading-5",
       "tw-transition",
       "tw-text-center",
-      "tw-border-text-muted",
-      "!tw-text-muted",
+      "tw-border-primary-600",
+      "!tw-text-primary-600",
       "tw-border-solid",
       "tw-border-y",
       "tw-border-r",
       "tw-border-l-0",
       "tw-cursor-pointer",
       "group-first-of-type/toggle:tw-border-l",
-      "group-first-of-type/toggle:tw-rounded-l",
-      "group-last-of-type/toggle:tw-rounded-r",
-
-      "peer-focus/toggle-input:tw-outline-none",
-      "peer-focus/toggle-input:tw-ring",
-      "peer-focus/toggle-input:tw-ring-offset-2",
-      "peer-focus/toggle-input:tw-ring-primary-600",
-      "peer-focus/toggle-input:tw-z-10",
-      "peer-focus/toggle-input:tw-bg-primary-600",
-      "peer-focus/toggle-input:tw-border-primary-600",
-      "peer-focus/toggle-input:!tw-text-contrast",
-
-      "hover:tw-no-underline",
-      "hover:tw-bg-text-muted",
-      "hover:tw-border-text-muted",
-      "hover:!tw-text-contrast",
+      "group-first-of-type/toggle:tw-rounded-l-full",
+      "group-last-of-type/toggle:tw-rounded-r-full",
+
+      "peer-focus-visible/toggle-input:tw-outline-none",
+      "peer-focus-visible/toggle-input:tw-ring",
+      "peer-focus-visible/toggle-input:tw-ring-offset-2",
+      "peer-focus-visible/toggle-input:tw-ring-primary-600",
+      "peer-focus-visible/toggle-input:tw-z-10",
+      "peer-focus-visible/toggle-input:tw-bg-primary-600",
+      "peer-focus-visible/toggle-input:tw-border-primary-600",
+      "peer-focus-visible/toggle-input:!tw-text-contrast",
 
       "peer-checked/toggle-input:tw-bg-primary-600",
       "peer-checked/toggle-input:tw-border-primary-600",
       "peer-checked/toggle-input:!tw-text-contrast",
       "tw-py-1.5",
-      "tw-px-3",
+      "tw-px-4",
 
       // Fix for bootstrap styles that add bottom margin
       "!tw-mb-0",
-
-      // Fix for badge being slightly off center vertically
-      "[&>[bitBadge]]:tw-mt-px",
     ];
   }
 
   onInputInteraction() {
     this.groupComponent.onInputInteraction(this.value);
   }
+
+  ngAfterContentChecked() {
+    this.bitBadgeContainerHasChidlren.set(
+      this.bitBadgeContainer?.nativeElement.childElementCount > 0,
+    );
+  }
 }
diff --git a/libs/components/src/tw-theme.css b/libs/components/src/tw-theme.css
index 6e5bb32edada..167b677aa4c8 100644
--- a/libs/components/src/tw-theme.css
+++ b/libs/components/src/tw-theme.css
@@ -1,56 +1,49 @@
 @import "./reset.css";
 
-/** 
-  Note that the value of the *-600 colors is currently equivalent to the value 
-  of the *-500 variant of that color. This is a temporary change to make BW-42
-  updates easier. 
-
-  TODO remove comment when the color palette portion of BW-42 is completed.
-*/
-
 :root {
-  --color-transparent-hover: rgb(0 0 0 / 0.03);
+  --color-transparent-hover: rgb(0 0 0 / 0.02);
 
   --color-background: 255 255 255;
-  --color-background-alt: 251 251 251;
+  --color-background-alt: 243 246 249;
   --color-background-alt2: 23 92 219;
   --color-background-alt3: 18 82 163;
   --color-background-alt4: 13 60 119;
 
-  /* Can only be used behind the extension refresh flag */
-  --color-primary-100: 200 217 249;
-  --color-primary-300: 103 149 232;
-  /* Can only be used behind the extension refresh flag */
-  --color-primary-500: 23 93 220;
+  --color-primary-100: 219 229 246;
+  --color-primary-300: 121 161 233;
   --color-primary-600: 23 93 220;
-  --color-primary-700: 18 82 163;
+  --color-primary-700: 26 65 172;
 
-  --color-secondary-100: 240 240 240;
-  --color-secondary-300: 206 212 220;
-  --color-secondary-600: 137 146 159;
-  --color-secondary-700: 33 37 41;
+  --color-secondary-100: 230 233 239;
+  --color-secondary-300: 168 179 200;
+  --color-secondary-500: 90 109 145;
+  --color-secondary-600: 83 99 131;
+  --color-secondary-700: 63 75 99;
 
-  --color-success-600: 1 126 69;
-  --color-success-700: 0 85 46;
+  --color-info-100: 219 229 246;
+  --color-info-600: 121 161 233;
+  --color-info-700: 26 65 172;
 
-  --color-danger-600: 200 53 34;
-  --color-danger-700: 152 41 27;
+  --color-warning-100: 255 248 228;
+  --color-warning-600: 255 191 0;
+  --color-warning-700: 172 88 0;
 
-  --color-warning-600: 139 102 9;
-  --color-warning-700: 105 77 5;
+  --color-danger-100: 255 236 239;
+  --color-danger-600: 203 38 58;
+  --color-danger-700: 149 27 42;
 
-  --color-info-600: 85 85 85;
-  --color-info-700: 59 58 58;
+  --color-success-100: 191 236 195;
+  --color-success-600: 12 128 24;
+  --color-success-700: 11 111 21;
 
   --color-art-primary: 2 15 102;
-  --color-art-accent: 85 85 85;
+  --color-art-accent: 44 221 223;
 
-  --color-text-main: 33 37 41;
-  --color-text-muted: 109 117 126;
+  --color-text-main: 27 32 41;
+  --color-text-muted: 96 109 145;
   --color-text-contrast: 255 255 255;
   --color-text-alt2: 255 255 255;
   --color-text-code: 192 17 118;
-  --color-text-headers: 2 15 102;
 
   --color-marketing-logo: 23 93 220;
 
@@ -62,46 +55,49 @@
 }
 
 .theme_dark {
-  --color-transparent-hover: rgb(255 255 255 / 0.12);
+  --color-transparent-hover: rgb(255 255 255 / 0.02);
 
-  --color-background: 31 36 46;
-  --color-background-alt: 22 28 38;
+  --color-background: 32 39 51;
+  --color-background-alt: 18 26 39;
   --color-background-alt2: 47 52 61;
   --color-background-alt3: 47 52 61;
   --color-background-alt4: 16 18 21;
 
-  --color-primary-100: 8 31 73;
-  --color-primary-300: 23 93 220;
-  --color-primary-500: 54 117 232;
-  --color-primary-600: 106 153 240;
-  --color-primary-700: 180 204 249;
+  --color-primary-100: 2 15 102;
+  --color-primary-300: 26 65 172;
+  --color-primary-600: 101 171 255;
+  --color-primary-700: 170 195 239;
 
-  --color-secondary-100: 47 52 61;
-  --color-secondary-300: 110 118 137;
-  --color-secondary-600: 186 192 206;
-  --color-secondary-700: 255 255 255;
+  --color-secondary-100: 48 57 70;
+  --color-secondary-300: 82 91 106;
+  --color-secondary-500: 121 128 142;
+  --color-secondary-600: 143 152 166;
+  --color-secondary-700: 158 167 181;
 
-  --color-success-600: 82 224 124;
-  --color-success-700: 168 239 190;
+  --color-success-100: 11 111 21;
+  --color-success-600: 107 241 120;
+  --color-success-700: 191 236 195;
 
-  --color-danger-600: 255 141 133;
-  --color-danger-700: 255 191 187;
+  --color-danger-100: 149 27 42;
+  --color-danger-600: 255 78 99;
+  --color-danger-700: 255 236 239;
 
-  --color-warning-600: 255 235 102;
-  --color-warning-700: 255 245 179;
+  --color-warning-100: 172 88 0;
+  --color-warning-600: 255 191 0;
+  --color-warning-700: 255 248 228;
 
-  --color-info-600: 164 176 198;
-  --color-info-700: 209 215 226;
+  --color-info-100: 26 65 172;
+  --color-info-600: 121 161 233;
+  --color-info-700: 219 229 246;
 
-  --color-art-primary: 226 227 228;
-  --color-art-accent: 164 176 198;
+  --color-art-primary: 243 246 249;
+  --color-art-accent: 44 221 233;
 
-  --color-text-main: 255 255 255;
-  --color-text-muted: 186 192 206;
-  --color-text-contrast: 25 30 38;
+  --color-text-main: 243 246 249;
+  --color-text-muted: 136 152 181;
+  --color-text-contrast: 18 26 39;
   --color-text-alt2: 255 255 255;
-  --color-text-code: 240 141 199;
-  --color-text-headers: 226 227 228;
+  --color-text-code: 255 143 208;
 
   --color-marketing-logo: 255 255 255;
 
diff --git a/libs/components/src/typography/typography.directive.ts b/libs/components/src/typography/typography.directive.ts
index f8034fd98fb2..742b9dce97b3 100644
--- a/libs/components/src/typography/typography.directive.ts
+++ b/libs/components/src/typography/typography.directive.ts
@@ -4,15 +4,15 @@ import { Directive, HostBinding, Input } from "@angular/core";
 type TypographyType = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "body1" | "body2" | "helper";
 
 const styles: Record<TypographyType, string[]> = {
-  h1: ["tw-text-3xl", "tw-font-semibold"],
-  h2: ["tw-text-2xl", "tw-font-semibold"],
-  h3: ["tw-text-xl", "tw-font-semibold"],
-  h4: ["tw-text-lg", "tw-font-semibold"],
-  h5: ["tw-text-base", "tw-font-semibold"],
-  h6: ["tw-text-sm", "tw-font-semibold"],
-  body1: ["tw-text-base"],
-  body2: ["tw-text-sm"],
-  helper: ["tw-text-xs"],
+  h1: ["!tw-text-3xl", "tw-font-semibold", "tw-text-main"],
+  h2: ["!tw-text-2xl", "tw-font-semibold", "tw-text-main"],
+  h3: ["!tw-text-xl", "tw-font-semibold", "tw-text-main"],
+  h4: ["!tw-text-lg", "tw-font-semibold", "tw-text-main"],
+  h5: ["!tw-text-base", "tw-font-bold", "tw-text-main"],
+  h6: ["!tw-text-sm", "tw-font-bold", "tw-text-main"],
+  body1: ["!tw-text-base"],
+  body2: ["!tw-text-sm"],
+  helper: ["!tw-text-xs"],
 };
 
 const margins: Record<TypographyType, string[]> = {
@@ -20,8 +20,8 @@ const margins: Record<TypographyType, string[]> = {
   h2: ["tw-mb-2"],
   h3: ["tw-mb-2"],
   h4: ["tw-mb-2"],
-  h5: ["tw-mb-2"],
-  h6: ["tw-mb-2"],
+  h5: ["tw-mb-1.5"],
+  h6: ["tw-mb-1.5"],
   body1: [],
   body2: [],
   helper: [],
diff --git a/libs/components/src/typography/typography.mdx b/libs/components/src/typography/typography.mdx
index 45420270ced3..11b37bb53b4e 100644
--- a/libs/components/src/typography/typography.mdx
+++ b/libs/components/src/typography/typography.mdx
@@ -1,4 +1,4 @@
-import { Meta, Story, Source, Primary, Controls } from "@storybook/addon-docs";
+import { Meta, Story, Canvas } from "@storybook/addon-docs";
 
 import * as stories from "./typography.stories";
 
@@ -10,62 +10,16 @@ import { TypographyModule } from "@bitwarden/components";
 
 # Typography
 
-<Primary />
-
-<Controls />
-
-## Stories
-
-<Story of={stories.H1} />
+The `bitTypography` directive applies text styles to its host element.
 
 ```html
 <h1 bitTypography="h1">H1</h1>
 ```
 
-<Story of={stories.H2} />
-
-```html
-<h2 bitTypography="h2">H2</h2>
-```
-
-<Story of={stories.H3} />
-
-```html
-<h3 bitTypography="h3">H3</h3>
-```
-
-<Story of={stories.H4} />
-
-```html
-<h4 bitTypography="h4">H4</h4>
-```
-
-<Story of={stories.H5} />
+For headings, note that the semantic element and the text style may not always be in sync:
 
 ```html
-<h5 bitTypography="h5">H5</h5>
+<h2 bitTypography="h5">Semantically, I am an h2, but I use h5 styles.</h2>
 ```
 
-<Story of={stories.H6} />
-
-```html
-<h6 bitTypography="h6">H6</h6>
-```
-
-<Story of={stories.Body1} />
-
-```html
-<p bitTypography="body1">Body 1</p>
-```
-
-<Story of={stories.Body2} />
-
-```html
-<p bitTypography="body2">Body 2</h1>
-```
-
-<Story of={stories.Helper} />
-
-```html
-<p bitTypography="helper">Helper Text</h1>
-```
+<Canvas story={stories.Default} />
diff --git a/libs/components/src/typography/typography.stories.ts b/libs/components/src/typography/typography.stories.ts
index 27fc0ca7b992..10fef6bbe722 100644
--- a/libs/components/src/typography/typography.stories.ts
+++ b/libs/components/src/typography/typography.stories.ts
@@ -5,86 +5,24 @@ import { TypographyDirective } from "./typography.directive";
 export default {
   title: "Component Library/Typography",
   component: TypographyDirective,
-  args: {
-    bitTypography: "body1",
-  },
 } as Meta;
 
-type Story = StoryObj<TypographyDirective & { text: string }>;
-
-export const H1: Story = {
+export const Default: StoryObj<TypographyDirective & { text: string }> = {
   render: (args) => ({
     props: args,
-    template: `<span [bitTypography]="bitTypography" class="tw-text-main">{{text}}</span>`,
+    template: /*html*/ `
+      <div bitTypography="h1">h1 - {{ text }}</div>
+      <div bitTypography="h2">h2 - {{ text }}</div>
+      <div bitTypography="h3">h3 - {{ text }}</div>
+      <div bitTypography="h4">h4 - {{ text }}</div>
+      <div bitTypography="h5">h5 - {{ text }}</div>
+      <div bitTypography="h6">h6 - {{ text }}</div>
+      <div bitTypography="body1" class="tw-text-main">body1 - {{ text }}</div>
+      <div bitTypography="body2" class="tw-text-main">body2 - {{ text }}</div>
+      <div bitTypography="helper" class="tw-text-main">helper - {{ text }}</div>
+    `,
   }),
   args: {
-    bitTypography: "h1",
-    text: "h1. Page Title",
-  },
-};
-
-export const H2: Story = {
-  ...H1,
-  args: {
-    bitTypography: "h2",
-    text: "h2. Page Section",
-  },
-};
-
-export const H3: Story = {
-  ...H1,
-  args: {
-    bitTypography: "h3",
-    text: "h3. Page Section",
-  },
-};
-
-export const H4: Story = {
-  ...H1,
-  args: {
-    bitTypography: "h4",
-    text: "h4. Page Section",
-  },
-};
-
-export const H5: Story = {
-  ...H1,
-
-  args: {
-    bitTypography: "h5",
-    text: "h5. Page Section",
-  },
-};
-
-export const H6: Story = {
-  ...H1,
-
-  args: {
-    bitTypography: "h6",
-    text: "h6. Page Section",
-  },
-};
-
-export const Body1: Story = {
-  ...H1,
-  args: {
-    bitTypography: "body1",
-    text: "Body 1",
-  },
-};
-
-export const Body2: Story = {
-  ...H1,
-  args: {
-    bitTypography: "body2",
-    text: "Body 2",
-  },
-};
-
-export const Helper: Story = {
-  ...H1,
-  args: {
-    bitTypography: "helper",
-    text: "Helper Text",
+    text: `Sphinx of black quartz, judge my vow.`,
   },
 };
diff --git a/libs/components/src/variables.scss b/libs/components/src/variables.scss
index 88e3cba5c3cc..d278746bb2e2 100644
--- a/libs/components/src/variables.scss
+++ b/libs/components/src/variables.scss
@@ -20,7 +20,7 @@ $theme-colors: (
 $body-bg: $white;
 $body-color: #333333;
 
-$font-family-sans-serif: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif,
+$font-family-sans-serif: "DM Sans", "Helvetica Neue", Helvetica, Arial, sans-serif,
   "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 
 $h1-font-size: 1.7rem;
diff --git a/libs/components/tailwind.config.base.js b/libs/components/tailwind.config.base.js
index 537e731f14f3..b2a2b282a510 100644
--- a/libs/components/tailwind.config.base.js
+++ b/libs/components/tailwind.config.base.js
@@ -24,10 +24,8 @@ module.exports = {
       current: colors.current,
       black: colors.black,
       primary: {
-        // Can only be used behind the extension refresh flag
         100: rgba("--color-primary-100"),
         300: rgba("--color-primary-300"),
-        // Can only be used behind the extension refresh flag
         500: rgba("--color-primary-500"),
         600: rgba("--color-primary-600"),
         700: rgba("--color-primary-700"),
@@ -35,22 +33,27 @@ module.exports = {
       secondary: {
         100: rgba("--color-secondary-100"),
         300: rgba("--color-secondary-300"),
+        500: rgba("--color-secondary-500"),
         600: rgba("--color-secondary-600"),
         700: rgba("--color-secondary-700"),
       },
       success: {
+        100: rgba("--color-success-100"),
         600: rgba("--color-success-600"),
         700: rgba("--color-success-700"),
       },
       danger: {
+        100: rgba("--color-danger-100"),
         600: rgba("--color-danger-600"),
         700: rgba("--color-danger-700"),
       },
       warning: {
+        100: rgba("--color-warning-100"),
         600: rgba("--color-warning-600"),
         700: rgba("--color-warning-700"),
       },
       info: {
+        100: rgba("--color-info-100"),
         600: rgba("--color-info-600"),
         700: rgba("--color-info-700"),
       },
@@ -82,15 +85,36 @@ module.exports = {
       headers: rgba("--color-text-headers"),
       alt2: rgba("--color-text-alt2"),
       code: rgba("--color-text-code"),
-      success: rgba("--color-success-600"),
-      danger: rgba("--color-danger-600"),
-      warning: rgba("--color-warning-600"),
-      info: rgba("--color-info-600"),
+      black: colors.black,
+      success: {
+        DEFAULT: rgba("--color-success-600"),
+        600: rgba("--color-success-600"),
+        700: rgba("--color-success-700"),
+      },
+      danger: {
+        DEFAULT: rgba("--color-danger-600"),
+        600: rgba("--color-danger-600"),
+        700: rgba("--color-danger-700"),
+      },
+      warning: {
+        DEFAULT: rgba("--color-warning-600"),
+        600: rgba("--color-warning-600"),
+        700: rgba("--color-warning-700"),
+      },
+      info: {
+        DEFAULT: rgba("--color-info-600"),
+        600: rgba("--color-info-600"),
+        700: rgba("--color-info-700"),
+      },
       primary: {
         300: rgba("--color-primary-300"),
         600: rgba("--color-primary-600"),
         700: rgba("--color-primary-700"),
       },
+      secondary: {
+        300: rgba("--color-secondary-300"),
+        700: rgba("--color-secondary-700"),
+      },
     },
     ringOffsetColor: ({ theme }) => ({
       DEFAULT: theme("colors.background"),
@@ -130,5 +154,18 @@ module.exports = {
         {},
       );
     }),
+    plugin(function ({ addVariant }) {
+      for (const state of [
+        "active",
+        "hover",
+        "focus",
+        "focus-within",
+        "focus-visible",
+        "target",
+        "visited",
+      ]) {
+        addVariant(state, [`&:${state}`, `&.test-${state}`]);
+      }
+    }),
   ],
 };
diff --git a/libs/vault/src/components/totp-countdown/totp-countdown.component.html b/libs/vault/src/components/totp-countdown/totp-countdown.component.html
index ba4ff04a0938..7de19ac3eddd 100644
--- a/libs/vault/src/components/totp-countdown/totp-countdown.component.html
+++ b/libs/vault/src/components/totp-countdown/totp-countdown.component.html
@@ -12,8 +12,8 @@
           class="tw-fill-none"
           [ngClass]="{ 'tw-stroke-text-main': !totpLow, 'tw-stroke-danger-600': totpLow }"
           r="9.5"
-          cy="11.8"
-          cx="11.8"
+          cy="14"
+          cx="14"
           stroke-width="2"
           stroke-dasharray="60"
           [ngStyle]="{ 'stroke-dashoffset.px': totpDash }"
@@ -22,8 +22,8 @@
           class="tw-fill-none"
           [ngClass]="{ 'tw-stroke-text-main': !totpLow, 'tw-stroke-danger-600': totpLow }"
           r="11"
-          cy="11.8"
-          cx="11.8"
+          cy="14"
+          cx="14"
           stroke-width="1"
           stroke-dasharray="71"
           stroke-dashoffset="0"