diff --git a/src/components/Card.tsx b/src/components/Card.tsx
index ce32e52..438c7cf 100644
--- a/src/components/Card.tsx
+++ b/src/components/Card.tsx
@@ -129,7 +129,7 @@ const StepCardHeader = styled.div`
   `}
 
   ${breakpoints.mobile`
-      font-size: 1.4rem;
+      font-size: 1.6rem;
       line-height: 2rem;
       padding: 10px 8px;
 
diff --git a/src/components/ExerciseHeaderIcons.tsx b/src/components/ExerciseHeaderIcons.tsx
index 7f4abf7..f988f40 100644
--- a/src/components/ExerciseHeaderIcons.tsx
+++ b/src/components/ExerciseHeaderIcons.tsx
@@ -45,7 +45,7 @@ const Popover = styled.div`
   top: 3rem;
   width: 20rem;
   position: absolute;
-  font-size: 1.2rem;
+  font-size: 1.4rem;
   line-height: 1.8rem;
 `;
 
diff --git a/src/components/ExerciseToolbar.tsx b/src/components/ExerciseToolbar.tsx
index d6aee49..32bd915 100644
--- a/src/components/ExerciseToolbar.tsx
+++ b/src/components/ExerciseToolbar.tsx
@@ -92,7 +92,7 @@ export const StyledToolbar = styled.div<{
 
       span {
         display: block;
-        font-size: 1rem;
+        font-size: 1.4rem;
         margin-top: 0.2rem;
         color: ${colors.palette.neutral};
         text-align: center;
diff --git a/src/components/ProgressBar.tsx b/src/components/ProgressBar.tsx
index ce3c272..f0f7e2f 100644
--- a/src/components/ProgressBar.tsx
+++ b/src/components/ProgressBar.tsx
@@ -62,7 +62,7 @@ export const StyledItem = styled.button<{ variant: ProgressBarItemVariant, isAct
   border: 0;
   border-radius: 50%;
   margin: ${props => props.isActive ? '0' : '0 0.3rem'};
-  font-size: 1.4rem;
+  font-size: 1.6rem;
   font-weight: bold;
   cursor: pointer;
   color: ${colors.palette.neutralDarker};
diff --git a/src/components/StepCardFooter.tsx b/src/components/StepCardFooter.tsx
index c4f7ea2..7706024 100644
--- a/src/components/StepCardFooter.tsx
+++ b/src/components/StepCardFooter.tsx
@@ -6,7 +6,7 @@ export const StepCardFooter = styled.div`
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
-    font-size: calc(1.4rem * var(--content-text-scale));
+    font-size: calc(1.6rem * var(--content-text-scale));
     line-height: calc(2rem * var(--content-text-scale));
     background: ${colors.card.body.background};
     overflow: auto;
diff --git a/src/components/__snapshots__/Card.spec.tsx.snap b/src/components/__snapshots__/Card.spec.tsx.snap
index 6aed0dd..9c96518 100644
--- a/src/components/__snapshots__/Card.spec.tsx.snap
+++ b/src/components/__snapshots__/Card.spec.tsx.snap
@@ -8,7 +8,7 @@ exports[`StepCard matches snapshot 1`] = `
     className="sc-bczRLJ eAXREJ"
   >
     <div
-      className="sc-dkzDqf ihThJf"
+      className="sc-dkzDqf iertSZ"
     >
       <div>
         <h2
@@ -55,7 +55,7 @@ exports[`StepCard matches snapshot with more than one question 1`] = `
     className="sc-bczRLJ eAXREJ"
   >
     <div
-      className="sc-dkzDqf ihThJf"
+      className="sc-dkzDqf iertSZ"
     >
       <div>
         <h2
@@ -109,7 +109,7 @@ exports[`TaskStepCard can optionally provide task 1`] = `
     className="sc-bczRLJ eAXREJ exercise-step"
   >
     <div
-      className="sc-dkzDqf ihThJf"
+      className="sc-dkzDqf iertSZ"
     >
       <div>
         <h2
@@ -148,7 +148,7 @@ exports[`TaskStepCard can optionally provide type 1`] = `
     className="sc-bczRLJ eAXREJ exercise-step"
   >
     <div
-      className="sc-dkzDqf ihThJf"
+      className="sc-dkzDqf iertSZ"
     >
       <div>
         <h2
@@ -187,7 +187,7 @@ exports[`TaskStepCard matches snapshot 1`] = `
     className="sc-bczRLJ eAXREJ exercise-step"
   >
     <div
-      className="sc-dkzDqf ihThJf"
+      className="sc-dkzDqf iertSZ"
     >
       <div>
         <h2
diff --git a/src/components/__snapshots__/Exercise.spec.tsx.snap b/src/components/__snapshots__/Exercise.spec.tsx.snap
index 1065f8d..9e0b421 100644
--- a/src/components/__snapshots__/Exercise.spec.tsx.snap
+++ b/src/components/__snapshots__/Exercise.spec.tsx.snap
@@ -12,7 +12,7 @@ exports[`Exercise using step data matches snapshot 1`] = `
       className="sc-bczRLJ eAXREJ exercise-step sc-evZas dPJYxI sc-ksZaOG kmSAkY"
     >
       <div
-        className="sc-dkzDqf ihThJf"
+        className="sc-dkzDqf iertSZ"
       >
         <div>
           <h2
@@ -157,7 +157,7 @@ exports[`Exercise using step data matches snapshot 1`] = `
               </div>
             </div>
             <div
-              className="sc-iBkjds kLYXXQ step-card-footer"
+              className="sc-iBkjds gVkNEK step-card-footer"
             >
               <div
                 className="step-card-footer-inner"
@@ -203,7 +203,7 @@ exports[`Exercise with question state data matches snapshot 1`] = `
       className="sc-bczRLJ eAXREJ exercise-step sc-evZas dPJYxI sc-ksZaOG kmSAkY"
     >
       <div
-        className="sc-dkzDqf ihThJf"
+        className="sc-dkzDqf iertSZ"
       >
         <div>
           <h2
@@ -342,7 +342,7 @@ exports[`Exercise with question state data matches snapshot 1`] = `
               </div>
             </div>
             <div
-              className="sc-iBkjds kLYXXQ step-card-footer"
+              className="sc-iBkjds gVkNEK step-card-footer"
             >
               <div
                 className="step-card-footer-inner"
@@ -381,7 +381,7 @@ exports[`Exercise with question state data renders header icons with multiple ch
   className="sc-breuTD uXhmp"
 >
   <div
-    className="sc-ftvSup jndYKm"
+    className="sc-ftvSup eUSUwo"
   >
     <a
       href="https://openstax.org"
@@ -442,7 +442,7 @@ exports[`Exercise with question state data renders header icons with multiple ch
       className="sc-bczRLJ eAXREJ exercise-step sc-evZas dPJYxI sc-ksZaOG kmSAkY"
     >
       <div
-        className="sc-dkzDqf ihThJf"
+        className="sc-dkzDqf iertSZ"
       >
         <div>
           <h2
@@ -495,7 +495,7 @@ exports[`Exercise with question state data renders header icons with multiple ch
                   />
                 </svg>
                 <div
-                  className="sc-kDDrLX fBhBLm popover right"
+                  className="sc-kDDrLX cCjffY popover right"
                 >
                   <div
                     className="arrow"
@@ -535,7 +535,7 @@ exports[`Exercise with question state data renders header icons with multiple ch
                   />
                 </svg>
                 <div
-                  className="sc-kDDrLX fBhBLm popover right"
+                  className="sc-kDDrLX cCjffY popover right"
                 >
                   <div
                     className="arrow"
@@ -667,7 +667,7 @@ exports[`Exercise with question state data renders header icons with multiple ch
               </div>
             </div>
             <div
-              className="sc-iBkjds kLYXXQ step-card-footer"
+              className="sc-iBkjds gVkNEK step-card-footer"
             >
               <div
                 className="step-card-footer-inner"
@@ -706,7 +706,7 @@ exports[`Exercise with question state data renders header icons with two-step ex
   className="sc-breuTD uXhmp"
 >
   <div
-    className="sc-ftvSup jndYKm"
+    className="sc-ftvSup eUSUwo"
   >
     <a
       href="https://openstax.org"
@@ -767,7 +767,7 @@ exports[`Exercise with question state data renders header icons with two-step ex
       className="sc-bczRLJ eAXREJ exercise-step sc-evZas dPJYxI sc-ksZaOG kmSAkY"
     >
       <div
-        className="sc-dkzDqf ihThJf"
+        className="sc-dkzDqf iertSZ"
       >
         <div>
           <h2
@@ -820,7 +820,7 @@ exports[`Exercise with question state data renders header icons with two-step ex
                   />
                 </svg>
                 <div
-                  className="sc-kDDrLX fBhBLm popover right"
+                  className="sc-kDDrLX cCjffY popover right"
                 >
                   <div
                     className="arrow"
@@ -860,7 +860,7 @@ exports[`Exercise with question state data renders header icons with two-step ex
                   />
                 </svg>
                 <div
-                  className="sc-kDDrLX fBhBLm popover right"
+                  className="sc-kDDrLX cCjffY popover right"
                 >
                   <div
                     className="arrow"
@@ -900,7 +900,7 @@ exports[`Exercise with question state data renders header icons with two-step ex
                   />
                 </svg>
                 <div
-                  className="sc-kDDrLX fBhBLm popover right"
+                  className="sc-kDDrLX cCjffY popover right"
                 >
                   <div
                     className="arrow"
@@ -1032,7 +1032,7 @@ exports[`Exercise with question state data renders header icons with two-step ex
               </div>
             </div>
             <div
-              className="sc-iBkjds kLYXXQ step-card-footer"
+              className="sc-iBkjds gVkNEK step-card-footer"
             >
               <div
                 className="step-card-footer-inner"
@@ -1078,7 +1078,7 @@ exports[`Exercise with question state data shows a detailed solution 1`] = `
       className="sc-bczRLJ eAXREJ exercise-step sc-evZas dPJYxI sc-ksZaOG kmSAkY"
     >
       <div
-        className="sc-dkzDqf ihThJf"
+        className="sc-dkzDqf iertSZ"
       >
         <div>
           <h2
@@ -1217,7 +1217,7 @@ exports[`Exercise with question state data shows a detailed solution 1`] = `
               </div>
             </div>
             <div
-              className="sc-iBkjds kLYXXQ step-card-footer"
+              className="sc-iBkjds gVkNEK step-card-footer"
             >
               <div
                 className="step-card-footer-inner"
diff --git a/src/components/__snapshots__/ExerciseHeaderIcons.spec.tsx.snap b/src/components/__snapshots__/ExerciseHeaderIcons.spec.tsx.snap
index fb6c522..fabeda7 100644
--- a/src/components/__snapshots__/ExerciseHeaderIcons.spec.tsx.snap
+++ b/src/components/__snapshots__/ExerciseHeaderIcons.spec.tsx.snap
@@ -31,7 +31,7 @@ exports[`ExerciseIcons matches snapshot 1`] = `
         />
       </svg>
       <div
-        className="sc-dkzDqf dhyzaB popover right"
+        className="sc-dkzDqf iulbST popover right"
       >
         <div
           className="arrow"
@@ -71,7 +71,7 @@ exports[`ExerciseIcons matches snapshot 1`] = `
         />
       </svg>
       <div
-        className="sc-dkzDqf dhyzaB popover right"
+        className="sc-dkzDqf iulbST popover right"
       >
         <div
           className="arrow"
@@ -111,7 +111,7 @@ exports[`ExerciseIcons matches snapshot 1`] = `
         />
       </svg>
       <div
-        className="sc-dkzDqf dhyzaB popover right"
+        className="sc-dkzDqf iulbST popover right"
       >
         <div
           className="arrow"
diff --git a/src/components/__snapshots__/ExerciseQuestion.spec.tsx.snap b/src/components/__snapshots__/ExerciseQuestion.spec.tsx.snap
index 4e23af6..afdbe92 100644
--- a/src/components/__snapshots__/ExerciseQuestion.spec.tsx.snap
+++ b/src/components/__snapshots__/ExerciseQuestion.spec.tsx.snap
@@ -106,7 +106,7 @@ exports[`ExerciseQuestion matches snapshot 1`] = `
     </div>
   </div>
   <div
-    className="sc-hKMtZM IyIWE step-card-footer"
+    className="sc-hKMtZM iGTyMe step-card-footer"
   >
     <div
       className="step-card-footer-inner"
@@ -252,7 +252,7 @@ exports[`ExerciseQuestion renders Re-submit button 1`] = `
     </div>
   </div>
   <div
-    className="sc-hKMtZM IyIWE step-card-footer"
+    className="sc-hKMtZM iGTyMe step-card-footer"
   >
     <div
       className="step-card-footer-inner"
@@ -399,7 +399,7 @@ exports[`ExerciseQuestion renders Save button 1`] = `
     </div>
   </div>
   <div
-    className="sc-hKMtZM IyIWE step-card-footer"
+    className="sc-hKMtZM iGTyMe step-card-footer"
   >
     <div
       className="step-card-footer-inner"
@@ -546,7 +546,7 @@ exports[`ExerciseQuestion renders Submit & continue button 1`] = `
     </div>
   </div>
   <div
-    className="sc-hKMtZM IyIWE step-card-footer"
+    className="sc-hKMtZM iGTyMe step-card-footer"
   >
     <div
       className="step-card-footer-inner"
@@ -687,7 +687,7 @@ exports[`ExerciseQuestion renders all attempts remaining 1`] = `
     </div>
   </div>
   <div
-    className="sc-hKMtZM IyIWE step-card-footer"
+    className="sc-hKMtZM iGTyMe step-card-footer"
   >
     <div
       className="step-card-footer-inner"
@@ -840,7 +840,7 @@ exports[`ExerciseQuestion renders continue button (unused?) 1`] = `
     </div>
   </div>
   <div
-    className="sc-hKMtZM IyIWE step-card-footer"
+    className="sc-hKMtZM iGTyMe step-card-footer"
   >
     <div
       className="step-card-footer-inner"
@@ -992,7 +992,7 @@ exports[`ExerciseQuestion renders detailed solution and published comments 1`] =
     </div>
   </div>
   <div
-    className="sc-hKMtZM IyIWE step-card-footer"
+    className="sc-hKMtZM iGTyMe step-card-footer"
   >
     <div
       className="step-card-footer-inner"
@@ -1156,7 +1156,7 @@ exports[`ExerciseQuestion renders free response 1`] = `
     </div>
   </div>
   <div
-    className="sc-hKMtZM IyIWE step-card-footer"
+    className="sc-hKMtZM iGTyMe step-card-footer"
   >
     <div
       className="step-card-footer-inner"
@@ -1302,7 +1302,7 @@ exports[`ExerciseQuestion renders no attempts remaining 1`] = `
     </div>
   </div>
   <div
-    className="sc-hKMtZM IyIWE step-card-footer"
+    className="sc-hKMtZM iGTyMe step-card-footer"
   >
     <div
       className="step-card-footer-inner"
@@ -1448,7 +1448,7 @@ exports[`ExerciseQuestion renders some attempts remaining 1`] = `
     </div>
   </div>
   <div
-    className="sc-hKMtZM IyIWE step-card-footer"
+    className="sc-hKMtZM iGTyMe step-card-footer"
   >
     <div
       className="step-card-footer-inner"
diff --git a/src/components/__snapshots__/ExerciseToolbar.spec.tsx.snap b/src/components/__snapshots__/ExerciseToolbar.spec.tsx.snap
index 5f4b3b8..640c717 100644
--- a/src/components/__snapshots__/ExerciseToolbar.spec.tsx.snap
+++ b/src/components/__snapshots__/ExerciseToolbar.spec.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`ExerciseToolbar conditionally renders icons 2`] = `
 <div
-  className="sc-bczRLJ hhNxoz"
+  className="sc-bczRLJ cYbzQJ"
 >
   <a
     href="https://openstax.org"
@@ -34,7 +34,7 @@ exports[`ExerciseToolbar conditionally renders icons 2`] = `
 
 exports[`ExerciseToolbar conditionally renders icons 3`] = `
 <div
-  className="sc-bczRLJ hhNxoz"
+  className="sc-bczRLJ cYbzQJ"
 >
   <a
     href="https://openstax.org"
@@ -66,7 +66,7 @@ exports[`ExerciseToolbar conditionally renders icons 3`] = `
 
 exports[`ExerciseToolbar matches snapshot 1`] = `
 <div
-  className="sc-bczRLJ hhNxoz"
+  className="sc-bczRLJ cYbzQJ"
 >
   <a
     href="https://openstax.org"
diff --git a/src/components/__snapshots__/FreeResponseInput.spec.tsx.snap b/src/components/__snapshots__/FreeResponseInput.spec.tsx.snap
index f72f04b..14e2bc6 100644
--- a/src/components/__snapshots__/FreeResponseInput.spec.tsx.snap
+++ b/src/components/__snapshots__/FreeResponseInput.spec.tsx.snap
@@ -42,7 +42,7 @@ exports[`Free Response Input matches snapshot 1`] = `
     </div>
   </div>
   <div
-    className="sc-hKMtZM IyIWE"
+    className="sc-hKMtZM iGTyMe"
   >
     <div
       className="points"
@@ -125,7 +125,7 @@ exports[`Free Response Input renders leftInfoComponent component 1`] = `
     </div>
   </div>
   <div
-    className="sc-hKMtZM IyIWE"
+    className="sc-hKMtZM iGTyMe"
   >
     <div
       className="points"
@@ -208,7 +208,7 @@ exports[`Free Response Input renders word limit error 1`] = `
     </div>
   </div>
   <div
-    className="sc-hKMtZM IyIWE"
+    className="sc-hKMtZM iGTyMe"
   >
     <div
       className="points"
diff --git a/src/components/__snapshots__/ProgressBar.spec.tsx.snap b/src/components/__snapshots__/ProgressBar.spec.tsx.snap
index 7d6f3cd..23d8d4e 100644
--- a/src/components/__snapshots__/ProgressBar.spec.tsx.snap
+++ b/src/components/__snapshots__/ProgressBar.spec.tsx.snap
@@ -11,7 +11,7 @@ exports[`ProgressBar matches snapshot 1`] = `
     <button
       aria-current="false"
       aria-label="Question 1"
-      className="sc-dkzDqf KrxmS"
+      className="sc-dkzDqf jNtHoM"
       onClick={[Function]}
     >
       1
@@ -43,7 +43,7 @@ exports[`ProgressBar matches snapshot 1`] = `
     <button
       aria-current="false"
       aria-label="Question 2"
-      className="sc-dkzDqf gKblal"
+      className="sc-dkzDqf kKjkNT"
       onClick={[Function]}
     >
       2
@@ -75,7 +75,7 @@ exports[`ProgressBar matches snapshot 1`] = `
     <button
       aria-current="location"
       aria-label="Question 3"
-      className="sc-dkzDqf hmFFbY"
+      className="sc-dkzDqf hBCaja"
       onClick={[Function]}
     >
       3
@@ -107,7 +107,7 @@ exports[`ProgressBar matches snapshot 1`] = `
     <button
       aria-current="false"
       aria-label="Question 4"
-      className="sc-dkzDqf iyRspZ"
+      className="sc-dkzDqf cDKeHP"
       onClick={[Function]}
     >
       4
@@ -119,7 +119,7 @@ exports[`ProgressBar matches snapshot 1`] = `
     <button
       aria-current="false"
       aria-label="Question 5"
-      className="sc-dkzDqf iyRspZ"
+      className="sc-dkzDqf cDKeHP"
       onClick={[Function]}
     >
       5
@@ -131,7 +131,7 @@ exports[`ProgressBar matches snapshot 1`] = `
     <button
       aria-current="false"
       aria-label="Question 6"
-      className="sc-dkzDqf iyRspZ"
+      className="sc-dkzDqf cDKeHP"
       onClick={[Function]}
     >
       6
@@ -143,7 +143,7 @@ exports[`ProgressBar matches snapshot 1`] = `
     <button
       aria-current="false"
       aria-label="Assignment status"
-      className="sc-dkzDqf iyRspZ"
+      className="sc-dkzDqf cDKeHP"
       onClick={[Function]}
     >
       <svg
@@ -174,7 +174,7 @@ exports[`ProgressBar matches snapshot when active step is incomplete 1`] = `
     <button
       aria-current="false"
       aria-label="Question 1"
-      className="sc-dkzDqf KrxmS"
+      className="sc-dkzDqf jNtHoM"
       onClick={[Function]}
     >
       1
@@ -206,7 +206,7 @@ exports[`ProgressBar matches snapshot when active step is incomplete 1`] = `
     <button
       aria-current="false"
       aria-label="Question 2"
-      className="sc-dkzDqf gKblal"
+      className="sc-dkzDqf kKjkNT"
       onClick={[Function]}
     >
       2
@@ -238,7 +238,7 @@ exports[`ProgressBar matches snapshot when active step is incomplete 1`] = `
     <button
       aria-current="false"
       aria-label="Question 3"
-      className="sc-dkzDqf KrxmS"
+      className="sc-dkzDqf jNtHoM"
       onClick={[Function]}
     >
       3
@@ -270,7 +270,7 @@ exports[`ProgressBar matches snapshot when active step is incomplete 1`] = `
     <button
       aria-current="location"
       aria-label="Question 4"
-      className="sc-dkzDqf ejGnvX"
+      className="sc-dkzDqf hImxuh"
       onClick={[Function]}
     >
       4
@@ -282,7 +282,7 @@ exports[`ProgressBar matches snapshot when active step is incomplete 1`] = `
     <button
       aria-current="false"
       aria-label="Question 5"
-      className="sc-dkzDqf iyRspZ"
+      className="sc-dkzDqf cDKeHP"
       onClick={[Function]}
     >
       5
@@ -294,7 +294,7 @@ exports[`ProgressBar matches snapshot when active step is incomplete 1`] = `
     <button
       aria-current="false"
       aria-label="Question 6"
-      className="sc-dkzDqf iyRspZ"
+      className="sc-dkzDqf cDKeHP"
       onClick={[Function]}
     >
       6
@@ -306,7 +306,7 @@ exports[`ProgressBar matches snapshot when active step is incomplete 1`] = `
     <button
       aria-current="false"
       aria-label="Assignment status"
-      className="sc-dkzDqf iyRspZ"
+      className="sc-dkzDqf cDKeHP"
       onClick={[Function]}
     >
       <svg
@@ -337,7 +337,7 @@ exports[`ProgressBar matches snapshot when status step is active 1`] = `
     <button
       aria-current="false"
       aria-label="Question 1"
-      className="sc-dkzDqf KrxmS"
+      className="sc-dkzDqf jNtHoM"
       onClick={[Function]}
     >
       1
@@ -369,7 +369,7 @@ exports[`ProgressBar matches snapshot when status step is active 1`] = `
     <button
       aria-current="false"
       aria-label="Question 2"
-      className="sc-dkzDqf gKblal"
+      className="sc-dkzDqf kKjkNT"
       onClick={[Function]}
     >
       2
@@ -401,7 +401,7 @@ exports[`ProgressBar matches snapshot when status step is active 1`] = `
     <button
       aria-current="false"
       aria-label="Question 3"
-      className="sc-dkzDqf KrxmS"
+      className="sc-dkzDqf jNtHoM"
       onClick={[Function]}
     >
       3
@@ -433,7 +433,7 @@ exports[`ProgressBar matches snapshot when status step is active 1`] = `
     <button
       aria-current="false"
       aria-label="Question 4"
-      className="sc-dkzDqf iyRspZ"
+      className="sc-dkzDqf cDKeHP"
       onClick={[Function]}
     >
       4
@@ -445,7 +445,7 @@ exports[`ProgressBar matches snapshot when status step is active 1`] = `
     <button
       aria-current="false"
       aria-label="Question 5"
-      className="sc-dkzDqf iyRspZ"
+      className="sc-dkzDqf cDKeHP"
       onClick={[Function]}
     >
       5
@@ -457,7 +457,7 @@ exports[`ProgressBar matches snapshot when status step is active 1`] = `
     <button
       aria-current="false"
       aria-label="Question 6"
-      className="sc-dkzDqf iyRspZ"
+      className="sc-dkzDqf cDKeHP"
       onClick={[Function]}
     >
       6
@@ -469,7 +469,7 @@ exports[`ProgressBar matches snapshot when status step is active 1`] = `
     <button
       aria-current="location"
       aria-label="Assignment status"
-      className="sc-dkzDqf ejGnvX"
+      className="sc-dkzDqf hImxuh"
       onClick={[Function]}
     >
       <svg