diff --git a/15-multi-step-form/src/main/resources/public/out.css b/15-multi-step-form/src/main/resources/public/out.css
index f06f286..f8c7f32 100644
--- a/15-multi-step-form/src/main/resources/public/out.css
+++ b/15-multi-step-form/src/main/resources/public/out.css
@@ -991,6 +991,10 @@ video {
   padding: 0.75rem;
 }
 
+.p-4 {
+  padding: 1rem;
+}
+
 .px-4 {
   padding-left: 1rem;
   padding-right: 1rem;
@@ -1644,6 +1648,11 @@ html {
     padding-right: 0px;
   }
 
+  .md\:px-6 {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+  }
+
   .md\:pb-2 {
     padding-bottom: 0.5rem;
   }
@@ -1660,6 +1669,10 @@ html {
     padding-bottom: 2.5rem;
   }
 
+  .md\:pb-8 {
+    padding-bottom: 2rem;
+  }
+
   .md\:text-4xl {
     font-size: 2.25rem;
     line-height: 2.5rem;
@@ -1685,6 +1698,11 @@ html {
     line-height: 2.25rem;
   }
 
+  .md\:text-lg {
+    font-size: 1.125rem;
+    line-height: 1.75rem;
+  }
+
   .md\:drop-shadow-2xl {
     --tw-drop-shadow: drop-shadow(0 25px 25px rgb(0 0 0 / 0.15));
     filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
diff --git a/15-multi-step-form/src/main/resources/templates/step4.html b/15-multi-step-form/src/main/resources/templates/step4.html
index f62896d..8709f7f 100644
--- a/15-multi-step-form/src/main/resources/templates/step4.html
+++ b/15-multi-step-form/src/main/resources/templates/step4.html
@@ -107,14 +107,14 @@
           <h1 class="text-2xl font-bold md:text-4xl text-marine-blue">
             Finishing up
           </h1>
-          <p class="pt-3 pb-5 text-cool-gray">
+          <p class="pt-3 pb-5 md:pb-8 text-cool-gray">
             Double-check everything looks OK before confirming.
           </p>
           <div
-            class="flex flex-col px-3 w-full text-sm rounded-lg divide-y md:text-base bg-magnolia/75"
+            class="flex flex-col w-full text-sm rounded-lg divide-y md:text-base bg-magnolia/75"
             id="selection-overview"
           >
-            <div id="selected-plan" class="grid py-3 grid-cols-[1fr_auto]">
+            <div id="selected-plan" class="grid p-3 md:p-6 grid-cols-[1fr_auto]">
               <h2 th:text="${formData.fullPlanName}"
                   class="font-bold text-marine-blue"
               >Arcade (Monthly)</h2>
@@ -134,7 +134,7 @@
                 >Change</a
               >
             </div>
-            <div id="selected-addons" class="flex flex-col gap-y-4 py-3 mp-10"
+            <div id="selected-addons" class="flex flex-col gap-y-4 p-3 md:p-6 mp-10"
                  th:if="not ${formData.userAnswers.step3.addonsAsJava.isEmpty}"
             >
               <div
@@ -152,7 +152,7 @@
             </div>
           </div>
 
-          <section class="flex flex-row p-3 mt-5">
+          <section class="flex flex-row p-3 mt-5 md:px-6">
             <p class="grow text-cool-gray">
               Total (per
               <span
@@ -162,7 +162,7 @@
             </p>
             <p
               th:text="|+$${formData.fullOrderPrice}/${formData.periodCostLabel}|"
-              class="font-bold text-purplish-blue"
+              class="font-bold md:text-lg text-purplish-blue"
             >
               $120
             </p>
@@ -180,7 +180,7 @@
             hx-swap="outerHTML"
             hx-target="#form-step"
             href="step3.html"
-            class="ml-6 text-sm font-semibold md:pb-3 md:ml-20 md:text-base text-cool-gray"
+            class="ml-6 text-sm font-semibold md:pb-3 md:ml-24 md:text-base text-cool-gray"
             hx-params="not form-confirmed"
             >Go Back</a
           >