diff --git a/includes/KSES.php b/includes/KSES.php
index 9e8e6026d92d..7d902f7f4045 100644
--- a/includes/KSES.php
+++ b/includes/KSES.php
@@ -571,7 +571,8 @@ public function filter_kses_allowed_html( $allowed_tags ) {
 				'title'                => true,
 			],
 			'amp-story-captions'            => [
-				'height' => true,
+				'height'       => true,
+				'style-preset' => true,
 			],
 			'amp-story-shopping-attachment' => [
 				'cta-text' => true,
diff --git a/packages/output/src/page.js b/packages/output/src/page.js
index 8dfc1180ec09..1b8d25f22969 100644
--- a/packages/output/src/page.js
+++ b/packages/output/src/page.js
@@ -200,10 +200,10 @@ function OutputPage({
           <div className="captions-area">
             {videoCaptions.map((captionId) => (
               <amp-story-captions
-                key={captionId}
                 id={captionId}
-                layout="fixed-height"
-                height="100"
+                key={captionId}
+                layout="container" // "container" layout will only occupy required height.
+                style-preset="default"
               />
             ))}
           </div>
diff --git a/packages/output/src/test/__snapshots__/page.js.snap b/packages/output/src/test/__snapshots__/page.js.snap
index 1b52b717f059..4a8d909528db 100644
--- a/packages/output/src/test/__snapshots__/page.js.snap
+++ b/packages/output/src/test/__snapshots__/page.js.snap
@@ -2,9 +2,9 @@
 
 exports[`Page output background audio should add background audio as amp-video 1`] = `
 <amp-story-captions
-  height="100"
   id="el-123-captions"
-  layout="fixed-height"
+  layout="container"
+  style-preset="default"
 />
 `;
 
diff --git a/packages/output/src/test/page.js b/packages/output/src/test/page.js
index c1ba6592d72b..6fde6c269dd3 100644
--- a/packages/output/src/test/page.js
+++ b/packages/output/src/test/page.js
@@ -1621,9 +1621,9 @@ describe('Page output', () => {
       await expect(captions).toBeInTheDocument();
       expect(captions).toMatchInlineSnapshot(`
       <amp-story-captions
-        height="100"
         id="el-baz-captions"
-        layout="fixed-height"
+        layout="container"
+        style-preset="default"
       />
       `);
     });
diff --git a/packages/output/src/utils/styles.js b/packages/output/src/utils/styles.js
index 45288ea1e12e..40534c52c986 100644
--- a/packages/output/src/utils/styles.js
+++ b/packages/output/src/utils/styles.js
@@ -135,6 +135,13 @@ function CustomStyles() {
               amp-story-grid-layer.align-bottom {
                 align-content: end;
                 padding: 0;
+                /* 
+                  AMP CTA Layer will exactly occupy 74px regardless of any device.
+                  To space out captions 74px from the BOTTOM (AMP CTA Layer),
+                  74px from the TOP should also be spaced out and thus: 2 * 74px
+                  will be the desired max-height.
+                */
+                max-height: calc(100vh - (2 * 74px));
               }
 
               .captions-area {
@@ -145,22 +152,6 @@ function CustomStyles() {
                 margin-bottom: 16px;
                 text-align: center;
               }
-
-              amp-story-captions span {
-                display: inline-block;
-                margin: 0;
-                padding: 6px 12px;
-                vertical-align: middle;
-                border-radius: 15px;
-                background: rgba(11, 11, 11, 0.6);
-                color: rgba(255, 255, 255, 1);
-                font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;;
-                font-size: calc(4 * var(--story-page-vw));
-                line-height: 1.4;
-                word-break: break-word;
-                word-wrap: break-word;
-                overflow-wrap: break-word;
-              }
               `,
       }}
     />
diff --git a/packages/story-editor/src/components/canvas/mediaCaptions/trackRenderer.js b/packages/story-editor/src/components/canvas/mediaCaptions/trackRenderer.js
index 6ccd4bc68681..6cf88b565d45 100644
--- a/packages/story-editor/src/components/canvas/mediaCaptions/trackRenderer.js
+++ b/packages/story-editor/src/components/canvas/mediaCaptions/trackRenderer.js
@@ -55,7 +55,7 @@ function TrackRenderer({ elementId, trackIndex }) {
 
   // To mimic the responsive `amp-story-captions span` styling on the frontend.
   const fontSize = pageWidth * 0.04;
-  const height = pageHeight * 0.2;
+  const height = pageHeight * 0.3;
 
   const [track, setTrack] = useState(null);
   const [videoTime, setVideoTime] = useState(0);