diff --git a/src/components/messaging-and-feedback/OakInlineBanner/OakInlineBanner.tsx b/src/components/messaging-and-feedback/OakInlineBanner/OakInlineBanner.tsx
index 6a7236a7c..17efc2e25 100644
--- a/src/components/messaging-and-feedback/OakInlineBanner/OakInlineBanner.tsx
+++ b/src/components/messaging-and-feedback/OakInlineBanner/OakInlineBanner.tsx
@@ -136,7 +136,6 @@ export type OakInlineBannerVariantProps = {
     loadingSpinnerDimensions: Partial<OakLoadingSpinnerProps>;
     heading: Partial<OakHeadingProps>;
     closeButtonWrapper?: Partial<OakBoxProps>;
-    ctaWrapper?: Partial<OakBoxProps>;
     flexDirection: FlexStyleProps["$flexDirection"];
     bannerPadding: PaddingStyleProps["$pa"];
     textContentGap?: FlexStyleProps["$gap"];
@@ -155,9 +154,6 @@ export const bannerVariants: OakInlineBannerVariantProps = {
     heading: {
       $font: ["heading-7"],
     },
-    ctaWrapper: {
-      $mt: "spacing-12",
-    },
     flexDirection: "row",
     bannerPadding: "spacing-16",
     textContentGap: "spacing-4",
@@ -173,9 +169,6 @@ export const bannerVariants: OakInlineBannerVariantProps = {
     heading: {
       $font: ["heading-6"],
     },
-    ctaWrapper: {
-      $mt: "spacing-8",
-    },
     closeButtonWrapper: {
       $position: "absolute",
       $top: "spacing-0",
@@ -294,29 +287,32 @@ export const OakInlineBanner = ({
         )}
         <OakFlex
           $order={1}
+          $flexDirection={title ? "column" : ["column", "row"]}
+          $gap={title ? "spacing-24" : ["spacing-12", "spacing-24"]}
           $width={"100%"}
-          $flexDirection={title ? "column" : "row"}
-          $justifyContent={title ? "center" : "space-between"}
-          $alignItems={title ? "start" : "center"}
-          $gap={bannerVariants[variant].textContentGap}
+          $alignItems={"start"}
         >
-          {title && (
-            <OakHeading
-              data-testid="inline-banner-title"
-              tag={titleTag}
-              {...bannerVariants[variant].heading}
-            >
-              {title}
-            </OakHeading>
-          )}
-          <OakBox $font={"body-2"} data-testid="inline-banner-message">
-            {message}
-          </OakBox>
-          {cta && (
-            <OakFlex {...(title ? bannerVariants[variant].ctaWrapper : {})}>
-              {cta}
-            </OakFlex>
-          )}
+          <OakFlex
+            $width={"100%"}
+            $flexDirection={title ? "column" : "row"}
+            $justifyContent={title ? "center" : "space-between"}
+            $alignItems={title ? "start" : "center"}
+            $gap={bannerVariants[variant].textContentGap}
+          >
+            {title && (
+              <OakHeading
+                data-testid="inline-banner-title"
+                tag={titleTag}
+                {...bannerVariants[variant].heading}
+              >
+                {title}
+              </OakHeading>
+            )}
+            <OakBox $font={"body-2"} data-testid="inline-banner-message">
+              {message}
+            </OakBox>
+          </OakFlex>
+          {cta && <OakFlex $flexShrink={0}>{cta}</OakFlex>}
         </OakFlex>
       </OakFlex>
     </OakFlex>
diff --git a/src/components/messaging-and-feedback/OakInlineBanner/__snapshots__/OakInlineBanner.test.tsx.snap b/src/components/messaging-and-feedback/OakInlineBanner/__snapshots__/OakInlineBanner.test.tsx.snap
index 12ff9ec6b..459feb665 100644
--- a/src/components/messaging-and-feedback/OakInlineBanner/__snapshots__/OakInlineBanner.test.tsx.snap
+++ b/src/components/messaging-and-feedback/OakInlineBanner/__snapshots__/OakInlineBanner.test.tsx.snap
@@ -78,7 +78,7 @@ exports[`OakInlineBanner matches snapshot for banner with title 1`] = `
   font-family: --var(google-font),Lexend,sans-serif;
 }
 
-.c22 {
+.c23 {
   font-family: --var(google-font),Lexend,sans-serif;
   font-weight: 300;
   font-size: 1rem;
@@ -89,12 +89,7 @@ exports[`OakInlineBanner matches snapshot for banner with title 1`] = `
   letter-spacing: -0.005rem;
 }
 
-.c23 {
-  margin-top: 0.75rem;
-  font-family: --var(google-font),Lexend,sans-serif;
-}
-
-.c26 {
+.c27 {
   padding-left: 0.25rem;
   display: inline-block;
   font-family: --var(google-font),Lexend,sans-serif;
@@ -185,6 +180,24 @@ exports[`OakInlineBanner matches snapshot for banner with title 1`] = `
 }
 
 .c20 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: start;
+  -webkit-box-align: start;
+  -ms-flex-align: start;
+  align-items: start;
+  -webkit-order: 1;
+  -ms-flex-order: 1;
+  order: 1;
+  gap: 1.5rem;
+}
+
+.c21 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -200,12 +213,19 @@ exports[`OakInlineBanner matches snapshot for banner with title 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  -webkit-order: 1;
-  -ms-flex-order: 1;
-  order: 1;
   gap: 0.25rem;
 }
 
+.c24 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
 .c18 {
   font-family: --var(google-font),Lexend,sans-serif;
   font-weight: 600;
@@ -217,7 +237,7 @@ exports[`OakInlineBanner matches snapshot for banner with title 1`] = `
   letter-spacing: 0.0115rem;
 }
 
-.c25 {
+.c26 {
   font-family: --var(google-font),Lexend,sans-serif;
 }
 
@@ -246,7 +266,7 @@ exports[`OakInlineBanner matches snapshot for banner with title 1`] = `
   object-fit: contain;
 }
 
-.c29 {
+.c30 {
   object-fit: contain;
 }
 
@@ -298,7 +318,7 @@ exports[`OakInlineBanner matches snapshot for banner with title 1`] = `
   background: transparent;
 }
 
-.c21 {
+.c22 {
   font-family: --var(google-font),Lexend,sans-serif;
   font-weight: 600;
   font-size: 1rem;
@@ -309,14 +329,14 @@ exports[`OakInlineBanner matches snapshot for banner with title 1`] = `
   letter-spacing: 0.0115rem;
 }
 
-.c28 {
+.c29 {
   width: 1.25em;
   min-width: 1.25em;
   height: 1.25em;
   min-height: 1.25em;
 }
 
-.c24 {
+.c25 {
   display: inline;
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -340,49 +360,49 @@ exports[`OakInlineBanner matches snapshot for banner with title 1`] = `
   overflow-wrap: break-word;
 }
 
-.c24 .c27 {
+.c25 .c28 {
   -webkit-filter: invert(10%) sepia(1%) saturate(236%) hue-rotate(314deg) brightness(95%) contrast(91%);
   filter: invert(10%) sepia(1%) saturate(236%) hue-rotate(314deg) brightness(95%) contrast(91%);
   display: inline-block;
   vertical-align: text-top;
 }
 
-.c24:focus-visible {
+.c25:focus-visible {
   box-shadow: 0 0 0 0.125rem rgba(255,229,85,100%), 0 0 0 0.3rem rgba(87,87,87,100%);
 }
 
-.c24:visited {
+.c25:visited {
   color: #222222;
 }
 
-.c24:visited .c27 {
+.c25:visited .c28 {
   -webkit-filter: invert(10%) sepia(1%) saturate(236%) hue-rotate(314deg) brightness(95%) contrast(91%);
   filter: invert(10%) sepia(1%) saturate(236%) hue-rotate(314deg) brightness(95%) contrast(91%);
 }
 
-.c24:active {
+.c25:active {
   color: #222222;
   outline: 1px solid #222222;
 }
 
-.c24:active .c27 {
+.c25:active .c28 {
   -webkit-filter: invert(10%) sepia(1%) saturate(236%) hue-rotate(314deg) brightness(95%) contrast(91%);
   filter: invert(10%) sepia(1%) saturate(236%) hue-rotate(314deg) brightness(95%) contrast(91%);
 }
 
-.c24[disabled] {
+.c25[disabled] {
   cursor: not-allowed;
   color: #808080;
 }
 
-.c24[disabled] .c27 {
+.c25[disabled] .c28 {
   -webkit-filter: invert(54%) sepia(0%) saturate(38%) hue-rotate(176deg) brightness(92%) contrast(91%);
   filter: invert(54%) sepia(0%) saturate(38%) hue-rotate(176deg) brightness(92%) contrast(91%);
 }
 
 @media (hover:hover) {
-  .c24:hover,
-  .c24:visited:hover {
+  .c25:hover,
+  .c25:visited:hover {
     color: #222222;
     -webkit-text-decoration: underline;
     text-decoration: underline;
@@ -390,8 +410,8 @@ exports[`OakInlineBanner matches snapshot for banner with title 1`] = `
     text-decoration-thickness: 18%;
   }
 
-  .c24:hover .c27,
-  .c24:visited:hover .c27 {
+  .c25:hover .c28,
+  .c25:visited:hover .c28 {
     -webkit-filter: invert(10%) sepia(1%) saturate(236%) hue-rotate(314deg) brightness(95%) contrast(91%);
     filter: invert(10%) sepia(1%) saturate(236%) hue-rotate(314deg) brightness(95%) contrast(91%);
   }
@@ -468,38 +488,42 @@ exports[`OakInlineBanner matches snapshot for banner with title 1`] = `
       <div
         class="c19 c20"
       >
-        <h1
-          class="c21"
-          data-testid="inline-banner-title"
-        >
-          Information
-        </h1>
         <div
-          class="c22"
-          data-testid="inline-banner-message"
+          class="c19 c21"
         >
-          Lorem ipsum dolor sit amet consectetur. Arcu proin rhoncus eget aliquet.
+          <h1
+            class="c22"
+            data-testid="inline-banner-title"
+          >
+            Information
+          </h1>
+          <div
+            class="c23"
+            data-testid="inline-banner-message"
+          >
+            Lorem ipsum dolor sit amet consectetur. Arcu proin rhoncus eget aliquet.
+          </div>
         </div>
         <div
-          class="c23 c9"
+          class="c4 c24"
         >
           <a
-            class="c24"
+            class="c25"
           >
             <span
-              class="c25"
+              class="c26"
             >
               Link
             </span>
             <div
-              class="c26"
+              class="c27"
             >
               <span
-                class="c5 c27 c28"
+                class="c5 c28 c29"
               >
                 <img
                   alt=""
-                  class="c29"
+                  class="c30"
                   data-nimg="fill"
                   decoding="async"
                   loading="lazy"
@@ -601,7 +625,7 @@ exports[`OakInlineBanner matches snapshot for large variant banner 1`] = `
   font-family: --var(google-font),Lexend,sans-serif;
 }
 
-.c23 {
+.c24 {
   font-family: --var(google-font),Lexend,sans-serif;
   font-weight: 300;
   font-size: 1rem;
@@ -612,18 +636,13 @@ exports[`OakInlineBanner matches snapshot for large variant banner 1`] = `
   letter-spacing: -0.005rem;
 }
 
-.c24 {
-  margin-top: 0.5rem;
-  font-family: --var(google-font),Lexend,sans-serif;
-}
-
-.c27 {
+.c28 {
   padding-left: 0.25rem;
   display: inline-block;
   font-family: --var(google-font),Lexend,sans-serif;
 }
 
-.c28 {
+.c29 {
   position: relative;
   width: 2rem;
   min-width: 2rem;
@@ -718,6 +737,24 @@ exports[`OakInlineBanner matches snapshot for large variant banner 1`] = `
 }
 
 .c21 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: start;
+  -webkit-box-align: start;
+  -ms-flex-align: start;
+  align-items: start;
+  -webkit-order: 1;
+  -ms-flex-order: 1;
+  order: 1;
+  gap: 1.5rem;
+}
+
+.c22 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -733,12 +770,19 @@ exports[`OakInlineBanner matches snapshot for large variant banner 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  -webkit-order: 1;
-  -ms-flex-order: 1;
-  order: 1;
   gap: 1rem;
 }
 
+.c25 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
 .c19 {
   font-family: --var(google-font),Lexend,sans-serif;
   font-weight: 600;
@@ -750,7 +794,7 @@ exports[`OakInlineBanner matches snapshot for large variant banner 1`] = `
   letter-spacing: 0.0115rem;
 }
 
-.c26 {
+.c27 {
   font-family: --var(google-font),Lexend,sans-serif;
 }
 
@@ -779,7 +823,7 @@ exports[`OakInlineBanner matches snapshot for large variant banner 1`] = `
   object-fit: contain;
 }
 
-.c31 {
+.c32 {
   object-fit: contain;
 }
 
@@ -831,7 +875,7 @@ exports[`OakInlineBanner matches snapshot for large variant banner 1`] = `
   background: transparent;
 }
 
-.c22 {
+.c23 {
   font-family: --var(google-font),Lexend,sans-serif;
   font-weight: 600;
   font-size: 1.25rem;
@@ -842,14 +886,14 @@ exports[`OakInlineBanner matches snapshot for large variant banner 1`] = `
   letter-spacing: 0.0115rem;
 }
 
-.c30 {
+.c31 {
   width: 1.25em;
   min-width: 1.25em;
   height: 1.25em;
   min-height: 1.25em;
 }
 
-.c25 {
+.c26 {
   display: inline;
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -873,49 +917,49 @@ exports[`OakInlineBanner matches snapshot for large variant banner 1`] = `
   overflow-wrap: break-word;
 }
 
-.c25 .c29 {
+.c26 .c30 {
   -webkit-filter: invert(10%) sepia(1%) saturate(236%) hue-rotate(314deg) brightness(95%) contrast(91%);
   filter: invert(10%) sepia(1%) saturate(236%) hue-rotate(314deg) brightness(95%) contrast(91%);
   display: inline-block;
   vertical-align: text-top;
 }
 
-.c25:focus-visible {
+.c26:focus-visible {
   box-shadow: 0 0 0 0.125rem rgba(255,229,85,100%), 0 0 0 0.3rem rgba(87,87,87,100%);
 }
 
-.c25:visited {
+.c26:visited {
   color: #222222;
 }
 
-.c25:visited .c29 {
+.c26:visited .c30 {
   -webkit-filter: invert(10%) sepia(1%) saturate(236%) hue-rotate(314deg) brightness(95%) contrast(91%);
   filter: invert(10%) sepia(1%) saturate(236%) hue-rotate(314deg) brightness(95%) contrast(91%);
 }
 
-.c25:active {
+.c26:active {
   color: #222222;
   outline: 1px solid #222222;
 }
 
-.c25:active .c29 {
+.c26:active .c30 {
   -webkit-filter: invert(10%) sepia(1%) saturate(236%) hue-rotate(314deg) brightness(95%) contrast(91%);
   filter: invert(10%) sepia(1%) saturate(236%) hue-rotate(314deg) brightness(95%) contrast(91%);
 }
 
-.c25[disabled] {
+.c26[disabled] {
   cursor: not-allowed;
   color: #808080;
 }
 
-.c25[disabled] .c29 {
+.c26[disabled] .c30 {
   -webkit-filter: invert(54%) sepia(0%) saturate(38%) hue-rotate(176deg) brightness(92%) contrast(91%);
   filter: invert(54%) sepia(0%) saturate(38%) hue-rotate(176deg) brightness(92%) contrast(91%);
 }
 
 @media (hover:hover) {
-  .c25:hover,
-  .c25:visited:hover {
+  .c26:hover,
+  .c26:visited:hover {
     color: #222222;
     -webkit-text-decoration: underline;
     text-decoration: underline;
@@ -923,8 +967,8 @@ exports[`OakInlineBanner matches snapshot for large variant banner 1`] = `
     text-decoration-thickness: 18%;
   }
 
-  .c25:hover .c29,
-  .c25:visited:hover .c29 {
+  .c26:hover .c30,
+  .c26:visited:hover .c30 {
     -webkit-filter: invert(10%) sepia(1%) saturate(236%) hue-rotate(314deg) brightness(95%) contrast(91%);
     filter: invert(10%) sepia(1%) saturate(236%) hue-rotate(314deg) brightness(95%) contrast(91%);
   }
@@ -1001,38 +1045,42 @@ exports[`OakInlineBanner matches snapshot for large variant banner 1`] = `
       <div
         class="c20 c21"
       >
-        <h1
-          class="c22"
-          data-testid="inline-banner-title"
-        >
-          Information
-        </h1>
         <div
-          class="c23"
-          data-testid="inline-banner-message"
+          class="c20 c22"
         >
-          Lorem ipsum dolor sit amet consectetur. Arcu proin rhoncus eget aliquet.
+          <h1
+            class="c23"
+            data-testid="inline-banner-title"
+          >
+            Information
+          </h1>
+          <div
+            class="c24"
+            data-testid="inline-banner-message"
+          >
+            Lorem ipsum dolor sit amet consectetur. Arcu proin rhoncus eget aliquet.
+          </div>
         </div>
         <div
-          class="c24 c10"
+          class="c4 c25"
         >
           <a
-            class="c25"
+            class="c26"
           >
             <span
-              class="c26"
+              class="c27"
             >
               Link
             </span>
             <div
-              class="c27"
+              class="c28"
             >
               <span
-                class="c28 c29 c30"
+                class="c29 c30 c31"
               >
                 <img
                   alt=""
-                  class="c31"
+                  class="c32"
                   data-nimg="fill"
                   decoding="async"
                   loading="lazy"
@@ -1127,7 +1175,7 @@ exports[`OakInlineBanner matches snapshot for simple banner without title 1`] =
   font-family: --var(google-font),Lexend,sans-serif;
 }
 
-.c21 {
+.c22 {
   font-family: --var(google-font),Lexend,sans-serif;
   font-weight: 300;
   font-size: 1rem;
@@ -1138,7 +1186,7 @@ exports[`OakInlineBanner matches snapshot for simple banner without title 1`] =
   letter-spacing: -0.005rem;
 }
 
-.c24 {
+.c26 {
   padding-left: 0.25rem;
   display: inline-block;
   font-family: --var(google-font),Lexend,sans-serif;
@@ -1229,6 +1277,24 @@ exports[`OakInlineBanner matches snapshot for simple banner without title 1`] =
 }
 
 .c20 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: start;
+  -webkit-box-align: start;
+  -ms-flex-align: start;
+  align-items: start;
+  -webkit-order: 1;
+  -ms-flex-order: 1;
+  order: 1;
+  gap: 0.75rem;
+}
+
+.c21 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1244,12 +1310,19 @@ exports[`OakInlineBanner matches snapshot for simple banner without title 1`] =
   -webkit-justify-content: space-between;
   -ms-flex-pack: justify;
   justify-content: space-between;
-  -webkit-order: 1;
-  -ms-flex-order: 1;
-  order: 1;
   gap: 0.25rem;
 }
 
+.c23 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
 .c18 {
   font-family: --var(google-font),Lexend,sans-serif;
   font-weight: 600;
@@ -1261,7 +1334,7 @@ exports[`OakInlineBanner matches snapshot for simple banner without title 1`] =
   letter-spacing: 0.0115rem;
 }
 
-.c23 {
+.c25 {
   font-family: --var(google-font),Lexend,sans-serif;
 }
 
@@ -1290,7 +1363,7 @@ exports[`OakInlineBanner matches snapshot for simple banner without title 1`] =
   object-fit: contain;
 }
 
-.c27 {
+.c29 {
   object-fit: contain;
 }
 
@@ -1342,14 +1415,14 @@ exports[`OakInlineBanner matches snapshot for simple banner without title 1`] =
   background: transparent;
 }
 
-.c26 {
+.c28 {
   width: 1.25em;
   min-width: 1.25em;
   height: 1.25em;
   min-height: 1.25em;
 }
 
-.c22 {
+.c24 {
   display: inline;
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -1373,49 +1446,63 @@ exports[`OakInlineBanner matches snapshot for simple banner without title 1`] =
   overflow-wrap: break-word;
 }
 
-.c22 .c25 {
+.c24 .c27 {
   -webkit-filter: invert(10%) sepia(1%) saturate(236%) hue-rotate(314deg) brightness(95%) contrast(91%);
   filter: invert(10%) sepia(1%) saturate(236%) hue-rotate(314deg) brightness(95%) contrast(91%);
   display: inline-block;
   vertical-align: text-top;
 }
 
-.c22:focus-visible {
+.c24:focus-visible {
   box-shadow: 0 0 0 0.125rem rgba(255,229,85,100%), 0 0 0 0.3rem rgba(87,87,87,100%);
 }
 
-.c22:visited {
+.c24:visited {
   color: #222222;
 }
 
-.c22:visited .c25 {
+.c24:visited .c27 {
   -webkit-filter: invert(10%) sepia(1%) saturate(236%) hue-rotate(314deg) brightness(95%) contrast(91%);
   filter: invert(10%) sepia(1%) saturate(236%) hue-rotate(314deg) brightness(95%) contrast(91%);
 }
 
-.c22:active {
+.c24:active {
   color: #222222;
   outline: 1px solid #222222;
 }
 
-.c22:active .c25 {
+.c24:active .c27 {
   -webkit-filter: invert(10%) sepia(1%) saturate(236%) hue-rotate(314deg) brightness(95%) contrast(91%);
   filter: invert(10%) sepia(1%) saturate(236%) hue-rotate(314deg) brightness(95%) contrast(91%);
 }
 
-.c22[disabled] {
+.c24[disabled] {
   cursor: not-allowed;
   color: #808080;
 }
 
-.c22[disabled] .c25 {
+.c24[disabled] .c27 {
   -webkit-filter: invert(54%) sepia(0%) saturate(38%) hue-rotate(176deg) brightness(92%) contrast(91%);
   filter: invert(54%) sepia(0%) saturate(38%) hue-rotate(176deg) brightness(92%) contrast(91%);
 }
 
+@media (min-width:750px) {
+  .c20 {
+    -webkit-flex-direction: row;
+    -ms-flex-direction: row;
+    flex-direction: row;
+  }
+}
+
+@media (min-width:750px) {
+  .c20 {
+    gap: 1.5rem;
+  }
+}
+
 @media (hover:hover) {
-  .c22:hover,
-  .c22:visited:hover {
+  .c24:hover,
+  .c24:visited:hover {
     color: #222222;
     -webkit-text-decoration: underline;
     text-decoration: underline;
@@ -1423,8 +1510,8 @@ exports[`OakInlineBanner matches snapshot for simple banner without title 1`] =
     text-decoration-thickness: 18%;
   }
 
-  .c22:hover .c25,
-  .c22:visited:hover .c25 {
+  .c24:hover .c27,
+  .c24:visited:hover .c27 {
     -webkit-filter: invert(10%) sepia(1%) saturate(236%) hue-rotate(314deg) brightness(95%) contrast(91%);
     filter: invert(10%) sepia(1%) saturate(236%) hue-rotate(314deg) brightness(95%) contrast(91%);
   }
@@ -1502,31 +1589,35 @@ exports[`OakInlineBanner matches snapshot for simple banner without title 1`] =
         class="c19 c20"
       >
         <div
-          class="c21"
-          data-testid="inline-banner-message"
+          class="c19 c21"
         >
-          Lorem ipsum dolor sit amet consectetur. Arcu proin rhoncus eget aliquet.
+          <div
+            class="c22"
+            data-testid="inline-banner-message"
+          >
+            Lorem ipsum dolor sit amet consectetur. Arcu proin rhoncus eget aliquet.
+          </div>
         </div>
         <div
-          class="c4 c9"
+          class="c4 c23"
         >
           <a
-            class="c22"
+            class="c24"
           >
             <span
-              class="c23"
+              class="c25"
             >
               Link
             </span>
             <div
-              class="c24"
+              class="c26"
             >
               <span
-                class="c5 c25 c26"
+                class="c5 c27 c28"
               >
                 <img
                   alt=""
-                  class="c27"
+                  class="c29"
                   data-nimg="fill"
                   decoding="async"
                   loading="lazy"
diff --git a/src/components/owa/OakDownloadsJourneyChildSubjectTierSelector/__snapshots__/OakDownloadsJourneyChildSubjectTierSelector.test.tsx.snap b/src/components/owa/OakDownloadsJourneyChildSubjectTierSelector/__snapshots__/OakDownloadsJourneyChildSubjectTierSelector.test.tsx.snap
index a7ea7a9dd..3f69ff4f3 100644
--- a/src/components/owa/OakDownloadsJourneyChildSubjectTierSelector/__snapshots__/OakDownloadsJourneyChildSubjectTierSelector.test.tsx.snap
+++ b/src/components/owa/OakDownloadsJourneyChildSubjectTierSelector/__snapshots__/OakDownloadsJourneyChildSubjectTierSelector.test.tsx.snap
@@ -41,7 +41,7 @@ exports[`OakDownloadsJourneyChildSubjectTierSelector matches snapshot 1`] = `
   font-family: --var(google-font),Lexend,sans-serif;
 }
 
-.c10 {
+.c11 {
   font-family: --var(google-font),Lexend,sans-serif;
   font-weight: 300;
   font-size: 1rem;
@@ -52,14 +52,14 @@ exports[`OakDownloadsJourneyChildSubjectTierSelector matches snapshot 1`] = `
   letter-spacing: -0.005rem;
 }
 
-.c11 {
+.c12 {
   padding: 0rem;
   margin: 0rem;
   border-style: none;
   font-family: --var(google-font),Lexend,sans-serif;
 }
 
-.c14 {
+.c15 {
   font-family: --var(google-font),Lexend,sans-serif;
   font-weight: 500;
   font-size: 1.125rem;
@@ -70,14 +70,14 @@ exports[`OakDownloadsJourneyChildSubjectTierSelector matches snapshot 1`] = `
   letter-spacing: -0.005rem;
 }
 
-.c17 {
+.c18 {
   position: relative;
   width: 1.5rem;
   height: 1.5rem;
   font-family: --var(google-font),Lexend,sans-serif;
 }
 
-.c22 {
+.c23 {
   position: absolute;
   top: 0rem;
   left: 0rem;
@@ -89,7 +89,7 @@ exports[`OakDownloadsJourneyChildSubjectTierSelector matches snapshot 1`] = `
   font-family: --var(google-font),Lexend,sans-serif;
 }
 
-.c25 {
+.c26 {
   position: relative;
   width: -webkit-max-content;
   width: -moz-max-content;
@@ -98,7 +98,7 @@ exports[`OakDownloadsJourneyChildSubjectTierSelector matches snapshot 1`] = `
   font-family: --var(google-font),Lexend,sans-serif;
 }
 
-.c27 {
+.c28 {
   position: absolute;
   top: 0rem;
   width: 100%;
@@ -107,7 +107,7 @@ exports[`OakDownloadsJourneyChildSubjectTierSelector matches snapshot 1`] = `
   font-family: --var(google-font),Lexend,sans-serif;
 }
 
-.c32 {
+.c33 {
   position: relative;
   width: 1.5rem;
   min-width: 1.5rem;
@@ -162,6 +162,24 @@ exports[`OakDownloadsJourneyChildSubjectTierSelector matches snapshot 1`] = `
 }
 
 .c9 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: start;
+  -webkit-box-align: start;
+  -ms-flex-align: start;
+  align-items: start;
+  -webkit-order: 1;
+  -ms-flex-order: 1;
+  order: 1;
+  gap: 0.75rem;
+}
+
+.c10 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -177,13 +195,10 @@ exports[`OakDownloadsJourneyChildSubjectTierSelector matches snapshot 1`] = `
   -webkit-justify-content: space-between;
   -ms-flex-pack: justify;
   justify-content: space-between;
-  -webkit-order: 1;
-  -ms-flex-order: 1;
-  order: 1;
   gap: 0.25rem;
 }
 
-.c12 {
+.c13 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -194,7 +209,7 @@ exports[`OakDownloadsJourneyChildSubjectTierSelector matches snapshot 1`] = `
   gap: 1rem;
 }
 
-.c18 {
+.c19 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -212,7 +227,7 @@ exports[`OakDownloadsJourneyChildSubjectTierSelector matches snapshot 1`] = `
   flex-shrink: 0;
 }
 
-.c23 {
+.c24 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -234,7 +249,7 @@ exports[`OakDownloadsJourneyChildSubjectTierSelector matches snapshot 1`] = `
   flex-shrink: 0;
 }
 
-.c30 {
+.c31 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -253,7 +268,7 @@ exports[`OakDownloadsJourneyChildSubjectTierSelector matches snapshot 1`] = `
   gap: 0.5rem;
 }
 
-.c31 {
+.c32 {
   font-family: --var(google-font),Lexend,sans-serif;
   font-weight: 600;
   font-size: 1rem;
@@ -265,7 +280,7 @@ exports[`OakDownloadsJourneyChildSubjectTierSelector matches snapshot 1`] = `
   text-align: left;
 }
 
-.c28 {
+.c29 {
   background: none;
   color: inherit;
   border: none;
@@ -288,7 +303,7 @@ exports[`OakDownloadsJourneyChildSubjectTierSelector matches snapshot 1`] = `
   border-radius: 0.25rem;
 }
 
-.c28:disabled {
+.c29:disabled {
   pointer-events: none;
   cursor: default;
 }
@@ -299,19 +314,19 @@ exports[`OakDownloadsJourneyChildSubjectTierSelector matches snapshot 1`] = `
   object-fit: contain;
 }
 
-.c33 {
+.c34 {
   -webkit-filter: invert(98%) sepia(98%) saturate(0%) hue-rotate(328deg) brightness(102%) contrast(102%);
   filter: invert(98%) sepia(98%) saturate(0%) hue-rotate(328deg) brightness(102%) contrast(102%);
   object-fit: contain;
 }
 
-.c29 {
+.c30 {
   position: relative;
   width: 100%;
   height: 100%;
 }
 
-.c29:hover {
+.c30:hover {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   color: #ffffff;
@@ -319,60 +334,60 @@ exports[`OakDownloadsJourneyChildSubjectTierSelector matches snapshot 1`] = `
   border-color: #575757;
 }
 
-.c29:hover [data-state="selected"] {
+.c30:hover [data-state="selected"] {
   display: none;
 }
 
-.c29:active {
+.c30:active {
   background: #222222;
   border-color: #222222;
   color: #ffffff;
 }
 
-.c29:active [data-state="selected"] {
+.c30:active [data-state="selected"] {
   display: none;
 }
 
-.c29:disabled {
+.c30:disabled {
   background: #808080;
   border-color: #808080;
   color: #ffffff;
 }
 
-.c29:disabled [data-state="selected"] {
+.c30:disabled [data-state="selected"] {
   display: none;
 }
 
-.c26 .grey-shadow:has(+ * + .internal-button:focus-visible) {
+.c27 .grey-shadow:has(+ * + .internal-button:focus-visible) {
   box-shadow: 0 0 0 0.3rem rgba(87,87,87,100%);
 }
 
-.c26 .yellow-shadow:has(+ .internal-button:focus-visible) {
+.c27 .yellow-shadow:has(+ .internal-button:focus-visible) {
   box-shadow: 0 0 0 0.125rem rgba(255,229,85,100%);
 }
 
-.c26 .yellow-shadow:has(+ .internal-button:hover),
-.c26 .yellow-shadow:has(+ .internal-button:hover:not(:focus-visible,:active)) {
+.c27 .yellow-shadow:has(+ .internal-button:hover),
+.c27 .yellow-shadow:has(+ .internal-button:hover:not(:focus-visible,:active)) {
   box-shadow: 0.125rem 0.125rem 0 rgba(255,229,85,100%);
 }
 
-.c26 .grey-shadow:has(+ * + .internal-button:hover) {
+.c27 .grey-shadow:has(+ * + .internal-button:hover) {
   box-shadow: none;
 }
 
-.c26 .grey-shadow:has(+ * + .internal-button:active) {
+.c27 .grey-shadow:has(+ * + .internal-button:active) {
   box-shadow: 0.25rem 0.25rem 0 rgba(87,87,87,100%);
 }
 
-.c26 .yellow-shadow:has(+ .internal-button:active) {
+.c27 .yellow-shadow:has(+ .internal-button:active) {
   box-shadow: 0.125rem 0.125rem 0 rgba(255,229,85,100%);
 }
 
-.c13 {
+.c14 {
   display: contents;
 }
 
-.c15 {
+.c16 {
   font-family: --var(google-font),Lexend,sans-serif;
   font-weight: 300;
   font-size: 1.125rem;
@@ -383,7 +398,7 @@ exports[`OakDownloadsJourneyChildSubjectTierSelector matches snapshot 1`] = `
   letter-spacing: -0.005rem;
 }
 
-.c20 {
+.c21 {
   -webkit-appearance: none;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -396,19 +411,19 @@ exports[`OakDownloadsJourneyChildSubjectTierSelector matches snapshot 1`] = `
   border-radius: 0.125rem;
 }
 
-.c20:checked {
+.c21:checked {
   background: #222222;
 }
 
-.c20:disabled {
+.c21:disabled {
   pointer-events: none;
 }
 
-.c24 {
+.c25 {
   border-radius: 50%;
 }
 
-.c19:focus-visible ~ .c21::before {
+.c20:focus-visible ~ .c22::before {
   content: "";
   height: 2rem;
   width: 2rem;
@@ -420,7 +435,7 @@ exports[`OakDownloadsJourneyChildSubjectTierSelector matches snapshot 1`] = `
   box-shadow: inset 0 0 0 0.13rem #ffe555;
 }
 
-.c19:checked ~ .c21::after {
+.c20:checked ~ .c22::after {
   content: "";
   height: 1rem;
   width: 1rem;
@@ -430,7 +445,7 @@ exports[`OakDownloadsJourneyChildSubjectTierSelector matches snapshot 1`] = `
   border: 0.125rem solid #ffffff;
 }
 
-.c16 {
+.c17 {
   cursor: pointer;
   display: -webkit-box;
   display: -webkit-flex;
@@ -443,8 +458,22 @@ exports[`OakDownloadsJourneyChildSubjectTierSelector matches snapshot 1`] = `
   align-items: center;
 }
 
+@media (min-width:750px) {
+  .c9 {
+    -webkit-flex-direction: row;
+    -ms-flex-direction: row;
+    flex-direction: row;
+  }
+}
+
+@media (min-width:750px) {
+  .c9 {
+    gap: 1.5rem;
+  }
+}
+
 @media (hover:hover) {
-  .c20:hover:not(:disabled) {
+  .c21:hover:not(:disabled) {
     border-color: #222222;
   }
 }
@@ -482,23 +511,27 @@ exports[`OakDownloadsJourneyChildSubjectTierSelector matches snapshot 1`] = `
           class="c8 c9"
         >
           <div
-            class="c10"
-            data-testid="inline-banner-message"
+            class="c8 c10"
           >
-            Before downloading, choose options for KS4. The document will still display both KS3 and KS4.
+            <div
+              class="c11"
+              data-testid="inline-banner-message"
+            >
+              Before downloading, choose options for KS4. The document will still display both KS3 and KS4.
+            </div>
           </div>
         </div>
       </div>
     </div>
     <fieldset
-      class="c11 c12"
+      class="c12 c13"
       data-testid="child-subject-selector"
     >
       <legend
-        class="c13"
+        class="c14"
       >
         <div
-          class="c14"
+          class="c15"
         >
           Choose subject for KS4 units
         </div>
@@ -507,23 +540,23 @@ exports[`OakDownloadsJourneyChildSubjectTierSelector matches snapshot 1`] = `
         class="c0"
       >
         <label
-          class="c15 c16"
+          class="c16 c17"
           data-testid="child-subject-radio-button"
           for="biology"
         >
           <div
-            class="c17 c18"
+            class="c18 c19"
           >
             <input
               checked=""
-              class="c19 c20"
+              class="c20 c21"
               id="biology"
               name="childSubjectRadio"
               type="radio"
               value="biology"
             />
             <div
-              class="c21 c22 c23 c24"
+              class="c22 c23 c24 c25"
             />
           </div>
           Biology
@@ -533,22 +566,22 @@ exports[`OakDownloadsJourneyChildSubjectTierSelector matches snapshot 1`] = `
         class="c0"
       >
         <label
-          class="c15 c16"
+          class="c16 c17"
           data-testid="child-subject-radio-button"
           for="physics"
         >
           <div
-            class="c17 c18"
+            class="c18 c19"
           >
             <input
-              class="c19 c20"
+              class="c20 c21"
               id="physics"
               name="childSubjectRadio"
               type="radio"
               value="physics"
             />
             <div
-              class="c21 c22 c23 c24"
+              class="c22 c23 c24 c25"
             />
           </div>
           Physics
@@ -558,22 +591,22 @@ exports[`OakDownloadsJourneyChildSubjectTierSelector matches snapshot 1`] = `
         class="c0"
       >
         <label
-          class="c15 c16"
+          class="c16 c17"
           data-testid="child-subject-radio-button"
           for="chemistry"
         >
           <div
-            class="c17 c18"
+            class="c18 c19"
           >
             <input
-              class="c19 c20"
+              class="c20 c21"
               id="chemistry"
               name="childSubjectRadio"
               type="radio"
               value="chemistry"
             />
             <div
-              class="c21 c22 c23 c24"
+              class="c22 c23 c24 c25"
             />
           </div>
           Chemistry
@@ -581,14 +614,14 @@ exports[`OakDownloadsJourneyChildSubjectTierSelector matches snapshot 1`] = `
       </div>
     </fieldset>
     <fieldset
-      class="c11 c12"
+      class="c12 c13"
       data-testid="tier-selector"
     >
       <legend
-        class="c13"
+        class="c14"
       >
         <div
-          class="c14"
+          class="c15"
         >
           Choose learning tier for KS4 units
         </div>
@@ -597,23 +630,23 @@ exports[`OakDownloadsJourneyChildSubjectTierSelector matches snapshot 1`] = `
         class="c0"
       >
         <label
-          class="c15 c16"
+          class="c16 c17"
           data-testid="tier-radio-button"
           for="foundation"
         >
           <div
-            class="c17 c18"
+            class="c18 c19"
           >
             <input
               checked=""
-              class="c19 c20"
+              class="c20 c21"
               id="foundation"
               name="tierRadio"
               type="radio"
               value="foundation"
             />
             <div
-              class="c21 c22 c23 c24"
+              class="c22 c23 c24 c25"
             />
           </div>
           Foundation
@@ -623,22 +656,22 @@ exports[`OakDownloadsJourneyChildSubjectTierSelector matches snapshot 1`] = `
         class="c0"
       >
         <label
-          class="c15 c16"
+          class="c16 c17"
           data-testid="tier-radio-button"
           for="higher"
         >
           <div
-            class="c17 c18"
+            class="c18 c19"
           >
             <input
-              class="c19 c20"
+              class="c20 c21"
               id="higher"
               name="tierRadio"
               type="radio"
               value="higher"
             />
             <div
-              class="c21 c22 c23 c24"
+              class="c22 c23 c24 c25"
             />
           </div>
           Higher
@@ -646,31 +679,31 @@ exports[`OakDownloadsJourneyChildSubjectTierSelector matches snapshot 1`] = `
       </div>
     </fieldset>
     <div
-      class="c25 c26"
+      class="c26 c27"
     >
       <div
-        class="c27 grey-shadow"
+        class="c28 grey-shadow"
       />
       <div
-        class="c27 yellow-shadow"
+        class="c28 yellow-shadow"
       />
       <button
-        class="c28 c29 internal-button"
+        class="c29 c30 internal-button"
       >
         <div
-          class="c0 c30"
+          class="c0 c31"
         >
           <span
-            class="c31"
+            class="c32"
           >
             Next
           </span>
           <span
-            class="c32"
+            class="c33"
           >
             <img
               alt=""
-              class="c33"
+              class="c34"
               data-nimg="fill"
               decoding="async"
               loading="lazy"
diff --git a/src/components/owa/teacher/OakTeacherNotesModal/__snapshots__/OakTeacherNotesModal.test.tsx.snap b/src/components/owa/teacher/OakTeacherNotesModal/__snapshots__/OakTeacherNotesModal.test.tsx.snap
index 1d8cf701f..5ca37d4b6 100644
--- a/src/components/owa/teacher/OakTeacherNotesModal/__snapshots__/OakTeacherNotesModal.test.tsx.snap
+++ b/src/components/owa/teacher/OakTeacherNotesModal/__snapshots__/OakTeacherNotesModal.test.tsx.snap
@@ -187,7 +187,7 @@ exports[`OakTeacherNotesModal matches snapshot 1`] = `
   font-family: --var(google-font),Lexend,sans-serif;
 }
 
-.c60 {
+.c61 {
   font-family: --var(google-font),Lexend,sans-serif;
   font-weight: 300;
   font-size: 1rem;
@@ -394,6 +394,24 @@ exports[`OakTeacherNotesModal matches snapshot 1`] = `
 }
 
 .c59 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: start;
+  -webkit-box-align: start;
+  -ms-flex-align: start;
+  align-items: start;
+  -webkit-order: 1;
+  -ms-flex-order: 1;
+  order: 1;
+  gap: 0.75rem;
+}
+
+.c60 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -409,9 +427,6 @@ exports[`OakTeacherNotesModal matches snapshot 1`] = `
   -webkit-justify-content: space-between;
   -ms-flex-pack: justify;
   justify-content: space-between;
-  -webkit-order: 1;
-  -ms-flex-order: 1;
-  order: 1;
   gap: 0.25rem;
 }
 
@@ -438,7 +453,7 @@ exports[`OakTeacherNotesModal matches snapshot 1`] = `
   text-align: left;
 }
 
-.c64 {
+.c65 {
   font-family: --var(google-font),Lexend,sans-serif;
 }
 
@@ -588,7 +603,7 @@ exports[`OakTeacherNotesModal matches snapshot 1`] = `
   letter-spacing: -0.005rem;
 }
 
-.c63 {
+.c64 {
   display: inline;
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -612,20 +627,20 @@ exports[`OakTeacherNotesModal matches snapshot 1`] = `
   overflow-wrap: break-word;
 }
 
-.c63:focus-visible {
+.c64:focus-visible {
   box-shadow: 0 0 0 0.125rem rgba(255,229,85,100%), 0 0 0 0.3rem rgba(87,87,87,100%);
 }
 
-.c63:visited {
+.c64:visited {
   color: #081676;
 }
 
-.c63:active {
+.c64:active {
   color: #081676;
   outline: 1px solid #081676;
 }
 
-.c63[disabled] {
+.c64[disabled] {
   cursor: not-allowed;
   color: #808080;
 }
@@ -800,7 +815,7 @@ exports[`OakTeacherNotesModal matches snapshot 1`] = `
   letter-spacing: -0.005rem;
 }
 
-.c61 {
+.c62 {
   font-family: --var(google-font),Lexend,sans-serif;
   font-weight: 400;
   font-size: 1rem;
@@ -811,7 +826,7 @@ exports[`OakTeacherNotesModal matches snapshot 1`] = `
   letter-spacing: 0.0115rem;
 }
 
-.c62 {
+.c63 {
   font-family: --var(google-font),Lexend,sans-serif;
   font-weight: 300;
   font-size: 1rem;
@@ -876,9 +891,23 @@ exports[`OakTeacherNotesModal matches snapshot 1`] = `
   }
 }
 
+@media (min-width:750px) {
+  .c59 {
+    -webkit-flex-direction: row;
+    -ms-flex-direction: row;
+    flex-direction: row;
+  }
+}
+
+@media (min-width:750px) {
+  .c59 {
+    gap: 1.5rem;
+  }
+}
+
 @media (hover:hover) {
-  .c63:hover,
-  .c63:visited:hover {
+  .c64:hover,
+  .c64:visited:hover {
     color: #0a1d9d;
     -webkit-text-decoration: underline;
     text-decoration: underline;
@@ -1165,33 +1194,37 @@ exports[`OakTeacherNotesModal matches snapshot 1`] = `
                       class="c47 c59"
                     >
                       <div
-                        class="c60"
-                        data-testid="inline-banner-message"
+                        class="c47 c60"
                       >
-                        <p
+                        <div
                           class="c61"
+                          data-testid="inline-banner-message"
                         >
-                          Please do not include any personal or sensitive information that could be used to identify, locate, or contact an individual, either directly or indirectly.
-                        </p>
-                        <p
-                          class="c62"
-                        >
-                          Names, email addresses, or other personal information will be redacted from your note to help keep everyone safe. For more guidance, see our
-                           
-                          <a
-                            aria-label="Oak's terms and conditions(opens in a new tab)"
+                          <p
+                            class="c62"
+                          >
+                            Please do not include any personal or sensitive information that could be used to identify, locate, or contact an individual, either directly or indirectly.
+                          </p>
+                          <p
                             class="c63"
-                            href="https://www.thenational.academy/legal/terms-and-conditions"
-                            target="_blank"
                           >
-                            <span
+                            Names, email addresses, or other personal information will be redacted from your note to help keep everyone safe. For more guidance, see our
+                             
+                            <a
+                              aria-label="Oak's terms and conditions(opens in a new tab)"
                               class="c64"
+                              href="https://www.thenational.academy/legal/terms-and-conditions"
+                              target="_blank"
                             >
-                              Terms & conditions
-                            </span>
-                          </a>
-                          .
-                        </p>
+                              <span
+                                class="c65"
+                              >
+                                Terms & conditions
+                              </span>
+                            </a>
+                            .
+                          </p>
+                        </div>
                       </div>
                     </div>
                   </div>