diff --git a/packages/components/document-capture/document-instructions/src/DocumentInstruction.js b/packages/components/document-capture/document-instructions/src/DocumentInstruction.js
index 9a37af36..14537727 100644
--- a/packages/components/document-capture/document-instructions/src/DocumentInstruction.js
+++ b/packages/components/document-capture/document-instructions/src/DocumentInstruction.js
@@ -3,7 +3,6 @@ import styles from '../../../styles';
 
 function templateString() {
   return `
-    ${styles}
     <div id="document-instruction-screen" class="flow center">
         <section className="main">
         ${this.showNavigation
@@ -77,7 +76,7 @@ function templateString() {
           </clipPath>
         </defs>
       </svg>
-            <h1>${this.title}</h1>
+            <h1 class='text-2xl color-digital-blue font-bold'>${this.title}</h1>
         <p class="description text-sm font-normal">
             We'll use it to verify your identity.
           </p>
@@ -286,6 +285,7 @@ function templateString() {
 ${this.hideAttribution ? '' : '<powered-by-smile-id></powered-by-smile-id>'}
     </section>
   </div>
+  ${styles}
   `;
 }
 
diff --git a/packages/components/selfie-capture/SelfieCapture.js b/packages/components/selfie-capture/SelfieCapture.js
index 5c7678f3..78f58da9 100644
--- a/packages/components/selfie-capture/SelfieCapture.js
+++ b/packages/components/selfie-capture/SelfieCapture.js
@@ -526,7 +526,7 @@ function templateString() {
         </button>
       </div>
     ` : ''}
-    <h1>Take a Selfie</h1>
+    <h1 class='text-2xl color-digital-blue font-bold'>Take a Selfie</h1>
 
     <div class='section | flow'>
       <div class='video-container'>
diff --git a/packages/components/selfie-capture/SelfieInstruction.js b/packages/components/selfie-capture/SelfieInstruction.js
index 6a45fef1..1c8d9ae7 100644
--- a/packages/components/selfie-capture/SelfieInstruction.js
+++ b/packages/components/selfie-capture/SelfieInstruction.js
@@ -1,3 +1,5 @@
+import styles from '../styles';
+
 function templateString() {
   return `
     <link rel="preconnect" href="https://fonts.gstatic.com" />
@@ -305,6 +307,7 @@ function templateString() {
         font-weight: 700;
       }
     </style>
+    ${styles}
     <div id="id-entry-screen" class="flow center">
     ${this.showNavigation ? `
     <div class="nav">
@@ -401,7 +404,7 @@ function templateString() {
           </clipPath>
         </defs>
       </svg>
-      <h1>Next, we'll take a quick selfie</h1>
+      <h1 class='text-2xl color-digital-blue font-bold'>Next, we'll take a quick selfie</h1>
     </header>
     <div class="flow">
       <div class="instructions">
diff --git a/packages/components/selfie-capture/SelfieReview.js b/packages/components/selfie-capture/SelfieReview.js
index 72079c8d..8456bcb8 100644
--- a/packages/components/selfie-capture/SelfieReview.js
+++ b/packages/components/selfie-capture/SelfieReview.js
@@ -159,6 +159,7 @@ function templateString() {
         line-height: 1.5rem;
       }
     </style>
+    ${styles}
     <div id='id-review-screen' class='flow center'>
     ${this.showNavigation ? `
       <div class="nav justify-right">
@@ -171,7 +172,7 @@ function templateString() {
         </button>
       </div>
     ` : ''}
-    <h1 class="header-title">
+    <h1 class="header-title text-2xl color-digital-blue font-bold">
     Is you whole face visible 
     and clear in this photo?
     </h1>