diff --git a/apps/browser/src/popup/scss/base.scss b/apps/browser/src/popup/scss/base.scss
index eb467d7d3a9..0e5d5873e9b 100644
--- a/apps/browser/src/popup/scss/base.scss
+++ b/apps/browser/src/popup/scss/base.scss
@@ -95,7 +95,7 @@ textarea:not(bit-form-field textarea) {
 input,
 select,
 textarea,
-button {
+button:not(bit-chip-select button) {
   font-size: $font-size-base;
   font-family: $font-family-sans-serif;
 }
diff --git a/libs/components/src/chip-select/chip-select.component.html b/libs/components/src/chip-select/chip-select.component.html
index d74e3d9cef1..1d377e5cb98 100644
--- a/libs/components/src/chip-select/chip-select.component.html
+++ b/libs/components/src/chip-select/chip-select.component.html
@@ -1,6 +1,6 @@
 <div
   bitTypography="body2"
-  class="tw-inline-flex tw-items-center tw-rounded-full tw-max-w-52 tw-border-solid tw-border tw-gap-1.5 tw-min-h-[2.225rem]"
+  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,
@@ -13,7 +13,7 @@
   <!-- 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 [&:not(:last-child)]:tw-pr-0 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,
     }"
@@ -26,7 +26,7 @@
     <span class="tw-truncate">{{ label }}</span>
     <i
       *ngIf="!selectedOption"
-      class="bwi tw-p-1 tw-mt-0.5"
+      class="bwi tw-mt-0.5"
       [ngClass]="menuTrigger.isOpen ? 'bwi-angle-up' : 'bwi-angle-down'"
     ></i>
   </button>
@@ -37,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-px-1.5 tw-my-[0.175rem] tw-mr-2 tw-text-[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"
+    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,
     }"
@@ -55,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) }}
@@ -65,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 }}
@@ -78,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/form-field/form-field.component.html b/libs/components/src/form-field/form-field.component.html
index dbd6b10f42d..dbba9d97ed2 100644
--- a/libs/components/src/form-field/form-field.component.html
+++ b/libs/components/src/form-field/form-field.component.html
@@ -83,7 +83,7 @@
       <ng-container *ngTemplateOutlet="labelContent"></ng-container>
     </label>
     <div
-      class="tw-gap-1 tw-flex tw-min-h-11 tw-border-0 tw-border-solid"
+      class="tw-gap-1 tw-flex tw-min-h-[1.85rem] tw-pb-0.5 tw-border-0 tw-border-solid"
       [ngClass]="{
         'tw-border-secondary-300/50 tw-border-b':
           !disableReadOnlyBorder && !defaultContentIsFocused(),
@@ -94,7 +94,7 @@
       <div
         #prefixContainer
         [hidden]="!prefixHasChildren()"
-        class="tw-flex tw-items-center tw-gap-1 tw-pl-3 tw-py-2"
+        class="tw-flex tw-items-center tw-gap-1 tw-pl-1"
       >
         <ng-container *ngTemplateOutlet="prefixContent"></ng-container>
       </div>
@@ -104,7 +104,7 @@
       <div
         #suffixContainer
         [hidden]="!suffixHasChildren()"
-        class="tw-flex tw-items-center tw-gap-1 tw-pr-3 tw-py-2"
+        class="tw-flex tw-items-center tw-gap-1 tw-pr-1"
       >
         <ng-container *ngTemplateOutlet="suffixContent"></ng-container>
       </div>
diff --git a/libs/components/src/form-field/form-field.component.ts b/libs/components/src/form-field/form-field.component.ts
index a32bbe7543d..fd0d62bdda3 100644
--- a/libs/components/src/form-field/form-field.component.ts
+++ b/libs/components/src/form-field/form-field.component.ts
@@ -69,7 +69,9 @@ export class BitFormFieldComponent implements AfterContentChecked {
 
   @HostBinding("class")
   get classList() {
-    return ["tw-block", "tw-pt-2"].concat(this.disableMargin ? [] : ["tw-mb-4"]);
+    return ["tw-block"]
+      .concat(this.disableMargin ? [] : ["tw-mb-4"])
+      .concat(this.readOnly ? [] : "tw-pt-2");
   }
 
   /**
diff --git a/libs/components/src/item/item-content.component.html b/libs/components/src/item/item-content.component.html
index c8d83bc51fc..ba0309f3c28 100644
--- a/libs/components/src/item/item-content.component.html
+++ b/libs/components/src/item/item-content.component.html
@@ -2,10 +2,10 @@
   <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>
diff --git a/libs/components/src/item/item-content.component.ts b/libs/components/src/item/item-content.component.ts
index 98e5be97e5b..5c1b464de93 100644
--- a/libs/components/src/item/item-content.component.ts
+++ b/libs/components/src/item/item-content.component.ts
@@ -8,10 +8,12 @@ import {
   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:
diff --git a/libs/components/src/item/item.stories.ts b/libs/components/src/item/item.stories.ts
index f307d7dbbd0..cea19d8ec17 100644
--- a/libs/components/src/item/item.stories.ts
+++ b/libs/components/src/item/item.stories.ts
@@ -43,7 +43,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>
@@ -115,7 +115,7 @@ 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>
@@ -139,7 +139,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>
@@ -158,7 +158,7 @@ export const MultipleActionList: Story = {
         </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>
@@ -177,7 +177,7 @@ export const MultipleActionList: Story = {
         </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>
@@ -196,7 +196,7 @@ export const MultipleActionList: Story = {
         </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>
@@ -215,7 +215,7 @@ export const MultipleActionList: Story = {
         </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>
@@ -234,7 +234,7 @@ export const MultipleActionList: Story = {
         </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>
@@ -312,7 +312,7 @@ export const VirtualScrolling: Story = {
         <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>
+              <i slot="start" class="bwi bwi-globe tw-text-2xl tw-text-muted" aria-hidden="true"></i>
               {{ item }}
             </button>
 
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 ba4ff04a093..7de19ac3edd 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"