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 5234c6b87e1..28565bb2357 100644
--- a/apps/browser/src/platform/popup/layout/popup-header.component.html
+++ b/apps/browser/src/platform/popup/layout/popup-header.component.html
@@ -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/libs/components/src/section/section-header.component.html b/libs/components/src/section/section-header.component.html
index d17022d5eb7..3f96e22540f 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/stories/colors.mdx b/libs/components/src/stories/colors.mdx
index a6f72ad6864..497d8a05afe 100644
--- a/libs/components/src/stories/colors.mdx
+++ b/libs/components/src/stories/colors.mdx
@@ -74,7 +74,6 @@ export const Table = (args) => (
       {Row("text-contrast")}
       {Row("text-alt2")}
       {Row("text-code")}
-      {Row("text-headers")}
     </tbody>
   </table>
 );
diff --git a/libs/components/src/tw-theme.css b/libs/components/src/tw-theme.css
index 1dbd2352bda..3f3337d2fff 100644
--- a/libs/components/src/tw-theme.css
+++ b/libs/components/src/tw-theme.css
@@ -12,7 +12,7 @@
   --color-primary-100: 219 229 246;
   --color-primary-300: 121 161 233;
   --color-primary-500: 23 93 220;
-  --color-primary-600: 23 93 200;
+  --color-primary-600: 23 93 220;
   --color-primary-700: 26 65 172;
 
   --color-secondary-100: 230 233 239;
@@ -45,7 +45,6 @@
   --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;
 
@@ -101,7 +100,6 @@
   --color-text-contrast: 18 26 39;
   --color-text-alt2: 255 255 255;
   --color-text-code: 255 143 208;
-  --color-text-headers: 226 227 228;
 
   --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 010e58fe157..742b9dce97b 100644
--- a/libs/components/src/typography/typography.directive.ts
+++ b/libs/components/src/typography/typography.directive.ts
@@ -4,12 +4,12 @@ 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", "tw-text-headers"],
-  h2: ["!tw-text-2xl", "tw-font-semibold", "tw-text-headers"],
-  h3: ["!tw-text-xl", "tw-font-semibold", "tw-text-headers"],
-  h4: ["!tw-text-lg", "tw-font-semibold", "tw-text-headers"],
-  h5: ["!tw-text-base", "tw-font-bold", "tw-text-headers"],
-  h6: ["!tw-text-sm", "tw-font-bold", "tw-text-headers"],
+  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"],