diff --git a/client/src/templates/Challenges/codeally/show.tsx b/client/src/templates/Challenges/codeally/show.tsx
index 49ec0dc0a7e..99bdf47bff4 100644
--- a/client/src/templates/Challenges/codeally/show.tsx
+++ b/client/src/templates/Challenges/codeally/show.tsx
@@ -15,10 +15,10 @@ import { Container, Col, Row, Alert } from '@freecodecamp/ui';
 import Spacer from '../../../components/helpers/spacer';
 import LearnLayout from '../../../components/layouts/learn';
 import ChallengeTitle from '../components/challenge-title';
+import ChallengeHeading from '../components/challenge-heading';
 import PrismFormatted from '../components/prism-formatted';
 import { challengeTypes } from '../../../../../shared/config/challenge-types';
 import CompletionModal from '../components/completion-modal';
-import GreenPass from '../../../assets/icons/green-pass';
 import HelpModal from '../components/help-modal';
 import Hotkeys from '../components/hotkeys';
 import { hideCodeAlly, tryToShowCodeAlly } from '../../../redux/actions';
@@ -292,16 +292,10 @@ class ShowCodeAlly extends Component<ShowCodeAllyProps> {
                       </div>
                       <hr />
                       <Spacer size='medium' />
-                      <b>{t('learn.step-1')}</b>
-                      {(isPartiallyCompleted || isCompleted) && (
-                        <GreenPass
-                          style={{
-                            height: '15px',
-                            width: '15px',
-                            marginInlineEnd: '7px'
-                          }}
-                        />
-                      )}
+                      <ChallengeHeading
+                        heading={t('learn.step-1')}
+                        isCompleted={isPartiallyCompleted || isCompleted}
+                      />
                       <Spacer size='medium' />
                       <div className='ca-description'>
                         {t('learn.runs-in-vm')}
@@ -330,16 +324,10 @@ class ShowCodeAlly extends Component<ShowCodeAllyProps> {
                     <>
                       <hr />
                       <Spacer size='medium' />
-                      <b>{t('learn.step-2')}</b>
-                      {isCompleted && (
-                        <GreenPass
-                          style={{
-                            height: '15px',
-                            width: '15px',
-                            marginInlineStart: '7px'
-                          }}
-                        />
-                      )}
+                      <ChallengeHeading
+                        heading={t('learn.step-2')}
+                        isCompleted={isCompleted}
+                      />
                       <Spacer size='medium' />
                       <div className='ca-description'>
                         {t('learn.submit-public-url')}
diff --git a/client/src/templates/Challenges/components/challenge-heading.css b/client/src/templates/Challenges/components/challenge-heading.css
new file mode 100644
index 00000000000..c125527c506
--- /dev/null
+++ b/client/src/templates/Challenges/components/challenge-heading.css
@@ -0,0 +1,10 @@
+.challenge-heading-wrap {
+  display: flex;
+  gap: 7px;
+  align-items: center;
+  justify-content: center;
+}
+
+.challenge-heading {
+  font-size: 16px;
+}
diff --git a/client/src/templates/Challenges/components/challenge-heading.tsx b/client/src/templates/Challenges/components/challenge-heading.tsx
new file mode 100644
index 00000000000..8ecc2d357c9
--- /dev/null
+++ b/client/src/templates/Challenges/components/challenge-heading.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import GreenPass from '../../../assets/icons/green-pass';
+
+import './challenge-heading.css';
+
+interface ChallengeHeadingProps {
+  heading: string;
+  isCompleted?: boolean;
+}
+
+function ChallengeHeading({
+  heading,
+  isCompleted = false
+}: ChallengeHeadingProps): JSX.Element {
+  const { t } = useTranslation();
+
+  return (
+    <div className='challenge-heading-wrap'>
+      <h2 className='challenge-heading'>{t(heading)}</h2>
+      {isCompleted && <GreenPass />}
+    </div>
+  );
+}
+
+ChallengeHeading.displayName = 'ChallengeHeading';
+
+export default ChallengeHeading;
diff --git a/client/src/templates/Challenges/dialogue/show.tsx b/client/src/templates/Challenges/dialogue/show.tsx
index 915468c2285..2f89e91dda7 100644
--- a/client/src/templates/Challenges/dialogue/show.tsx
+++ b/client/src/templates/Challenges/dialogue/show.tsx
@@ -18,6 +18,8 @@ import LearnLayout from '../../../components/layouts/learn';
 import { ChallengeNode, ChallengeMeta } from '../../../redux/prop-types';
 import Hotkeys from '../components/hotkeys';
 import CompletionModal from '../components/completion-modal';
+import ChallengeTitle from '../components/challenge-title';
+import ChallengeHeading from '../components/challenge-heading';
 import HelpModal from '../components/help-modal';
 import PrismFormatted from '../components/prism-formatted';
 import {
@@ -181,6 +183,7 @@ class ShowDialogue extends Component<ShowDialogueProps, ShowDialogueState> {
             block,
             fields: { blockName },
             assignments,
+            translationPending,
             scene
           }
         }
@@ -189,6 +192,7 @@ class ShowDialogue extends Component<ShowDialogueProps, ShowDialogueState> {
       pageContext: {
         challengeMeta: { nextChallengePath, prevChallengePath }
       },
+      isChallengeCompleted,
       t
     } = this.props;
 
@@ -211,7 +215,13 @@ class ShowDialogue extends Component<ShowDialogueProps, ShowDialogueState> {
             <Row>
               <Col md={8} mdOffset={2} sm={10} smOffset={1} xs={12}>
                 <Spacer size='medium' />
-                <h2>{title}</h2>
+
+                <ChallengeTitle
+                  isCompleted={isChallengeCompleted}
+                  translationPending={translationPending}
+                >
+                  {title}
+                </ChallengeTitle>
                 <PrismFormatted className={'line-numbers'} text={description} />
                 <Spacer size='medium' />
               </Col>
@@ -219,8 +229,9 @@ class ShowDialogue extends Component<ShowDialogueProps, ShowDialogueState> {
               {scene && <Scene scene={scene} />}
 
               <Col md={8} mdOffset={2} sm={10} smOffset={1} xs={12}>
+                <Spacer size='medium' />
                 <ObserveKeys>
-                  <h2>{t('learn.assignments')}</h2>
+                  <ChallengeHeading heading={t('learn.assignments')} />
                   <div className='video-quiz-options'>
                     {assignments.map((assignment, index) => (
                       <label className='video-quiz-option-label' key={index}>
diff --git a/client/src/templates/Challenges/fill-in-the-blank/show.css b/client/src/templates/Challenges/fill-in-the-blank/show.css
index c37e4946e9f..63b2f5a9cc2 100644
--- a/client/src/templates/Challenges/fill-in-the-blank/show.css
+++ b/client/src/templates/Challenges/fill-in-the-blank/show.css
@@ -1,17 +1,29 @@
+.fill-in-the-blank-wrap {
+  background-color: var(--primary-background);
+  padding: 20px;
+  border: 4px solid var(--tertiary-background);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.fill-in-the-blank-wrap > p {
+  margin: 0;
+  font-size: 1.25em;
+}
+
 .fill-in-the-blank-input {
   padding: 0;
   text-align: center;
-  background-color: var(--tertiary-background);
-  color: var(--tertiary-color);
+  background-color: var(--primary-background);
   border-radius: 0;
-  font-family: var(--font-family-monospace);
   overflow-wrap: anywhere;
   line-height: 1.5rem;
   z-index: 1;
   position: relative;
-  border: 1px solid var(--gray-45);
   border-left: none;
   border-right: none;
+  border-top: none;
   border-bottom-width: 4px;
   border-bottom-color: var(--gray-45) !important;
 }
diff --git a/client/src/templates/Challenges/fill-in-the-blank/show.tsx b/client/src/templates/Challenges/fill-in-the-blank/show.tsx
index de07301cc56..a8eb97d8d69 100644
--- a/client/src/templates/Challenges/fill-in-the-blank/show.tsx
+++ b/client/src/templates/Challenges/fill-in-the-blank/show.tsx
@@ -18,6 +18,7 @@ import LearnLayout from '../../../components/layouts/learn';
 import { ChallengeNode, ChallengeMeta } from '../../../redux/prop-types';
 import Hotkeys from '../components/hotkeys';
 import ChallengeTitle from '../components/challenge-title';
+import ChallengeHeading from '../components/challenge-heading';
 import CompletionModal from '../components/completion-modal';
 import HelpModal from '../components/help-modal';
 import PrismFormatted from '../components/prism-formatted';
@@ -301,10 +302,9 @@ class ShowFillInTheBlank extends Component<
 
               <Col md={8} mdOffset={2} sm={10} smOffset={1} xs={12}>
                 <PrismFormatted text={description} />
+                <Spacer size='medium' />
                 {audioPath && (
                   <>
-                    <Spacer size='small' />
-                    <Spacer size='small' />
                     {/* TODO: Add tracks for audio elements */}
                     {/* eslint-disable-next-line jsx-a11y/media-has-caption*/}
                     <audio className='audio' controls>
@@ -313,22 +313,31 @@ class ShowFillInTheBlank extends Component<
                         type='audio/mp3'
                       ></source>
                     </audio>
+                    <Spacer size='medium' />
                   </>
                 )}
               </Col>
 
-              {scene && <Scene scene={scene} />}
+              {scene && (
+                <>
+                  <Scene scene={scene} />
+                  <Spacer size='medium' />
+                </>
+              )}
 
               <Col md={8} mdOffset={2} sm={10} smOffset={1} xs={12}>
-                <Spacer size='medium' />
-                <PrismFormatted text={instructions} />
-                <Spacer size='medium' />
-                <h2>{t('learn.fill-in-the-blank')}</h2>
+                <ChallengeHeading heading={t('learn.fill-in-the-blank')} />
                 <Spacer size='small' />
+                {instructions && (
+                  <>
+                    <PrismFormatted text={instructions} />
+                    <Spacer size='small' />
+                  </>
+                )}
                 {/* what we want to observe is ctrl/cmd + enter, but ObserveKeys is buggy and throws an error
                 if it encounters a key combination, so we have to pass in the individual keys to observe */}
                 <ObserveKeys only={['ctrl', 'cmd', 'enter']}>
-                  <div>
+                  <div className='fill-in-the-blank-wrap'>
                     {paragraphs.map((p, i) => {
                       return (
                         // both keys, i and j, are stable between renders, since
diff --git a/client/src/templates/Challenges/ms-trophy/link-ms-user.css b/client/src/templates/Challenges/ms-trophy/link-ms-user.css
index 73dced8f580..deda0933709 100644
--- a/client/src/templates/Challenges/ms-trophy/link-ms-user.css
+++ b/client/src/templates/Challenges/ms-trophy/link-ms-user.css
@@ -1,8 +1,3 @@
-.link-ms-user-title {
-  text-align: center;
-  font-size: inherit;
-}
-
 .link-ms-user-ol li {
   margin-bottom: 5px;
 }
diff --git a/client/src/templates/Challenges/ms-trophy/link-ms-user.tsx b/client/src/templates/Challenges/ms-trophy/link-ms-user.tsx
index c6fbe2daafd..0a29ef95e19 100644
--- a/client/src/templates/Challenges/ms-trophy/link-ms-user.tsx
+++ b/client/src/templates/Challenges/ms-trophy/link-ms-user.tsx
@@ -25,6 +25,7 @@ import {
   isProcessingSelector
 } from '../../../redux/selectors';
 import Login from '../../../components/Header/components/login';
+import ChallengeHeading from '../components/challenge-heading';
 
 import './link-ms-user.css';
 
@@ -86,7 +87,7 @@ function LinkMsUser({
 
   return !isSignedIn ? (
     <>
-      <h2 className='link-ms-user-title'>{t('learn.ms.link-header')}</h2>
+      <ChallengeHeading heading={t('learn.ms.link-header')} />
       <Spacer size='small' />
 
       <p data-playwright-test-label='link-signin-text'>
@@ -111,7 +112,7 @@ function LinkMsUser({
         </>
       ) : (
         <div>
-          <h2 className='link-ms-user-title'>{t('learn.ms.link-header')}</h2>
+          <ChallengeHeading heading={'learn.ms.link-header'} />
           <Spacer size='small' />
 
           <p data-playwright-test-label='unlinked-text'>
diff --git a/client/src/templates/Challenges/odin/show.tsx b/client/src/templates/Challenges/odin/show.tsx
index 7c0a018e89b..37fb2495ff8 100644
--- a/client/src/templates/Challenges/odin/show.tsx
+++ b/client/src/templates/Challenges/odin/show.tsx
@@ -24,6 +24,7 @@ import HelpModal from '../components/help-modal';
 import Scene from '../components/scene/scene';
 import PrismFormatted from '../components/prism-formatted';
 import ChallengeTitle from '../components/challenge-title';
+import ChallengeHeading from '../components/challenge-heading';
 import {
   challengeMounted,
   updateChallengeMeta,
@@ -287,10 +288,9 @@ class ShowOdin extends Component<ShowOdinProps, ShowOdinState> {
                   {title}
                 </ChallengeTitle>
                 <PrismFormatted className={'line-numbers'} text={description} />
+                <Spacer size='medium' />
                 {audioPath && (
                   <>
-                    <Spacer size='small' />
-                    <Spacer size='small' />
                     {/* TODO: Add tracks for audio elements */}
                     {/* eslint-disable-next-line jsx-a11y/media-has-caption*/}
                     <audio className='audio' controls>
@@ -299,18 +299,22 @@ class ShowOdin extends Component<ShowOdinProps, ShowOdinState> {
                         type='audio/mp3'
                       />
                     </audio>
+                    <Spacer size='medium' />
                   </>
                 )}
-                <Spacer size='medium' />
               </Col>
 
-              {scene && <Scene scene={scene} />}
+              {scene && (
+                <>
+                  <Scene scene={scene} /> <Spacer size='medium' />
+                </>
+              )}
 
               <Col md={8} mdOffset={2} sm={10} smOffset={1} xs={12}>
                 <ObserveKeys>
                   {assignments.length > 0 && (
                     <>
-                      <h2>{t('learn.assignments')}</h2>
+                      <ChallengeHeading heading={t('learn.assignments')} />
                       <div className='video-quiz-options'>
                         {assignments.map((assignment, index) => (
                           <label
@@ -340,7 +344,7 @@ class ShowOdin extends Component<ShowOdinProps, ShowOdinState> {
                     </>
                   )}
 
-                  <h2>{t('learn.question')}</h2>
+                  <ChallengeHeading heading={t('learn.question')} />
                   <PrismFormatted className={'line-numbers'} text={text} />
                   <div className='video-quiz-options'>
                     {answers.map(({ answer }, index) => (