diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/CollapsibleFormWidget.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/CollapsibleFormWidget.jsx
index 1ff7caf1d..679c4530b 100644
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/CollapsibleFormWidget.jsx
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/CollapsibleFormWidget.jsx
@@ -24,7 +24,7 @@ export const CollapsibleFormWidget = ({
   intl,
 }) => (
   <Collapsible.Advanced
-    className="collapsible-card rounded mx-4 my-3 px-3 py-2 text-primary-500"
+    className="collapsible-card rounded mx-4 my-3 p-4 text-primary-500"
     defaultOpen
     open={isError || undefined}
   >
@@ -32,17 +32,17 @@ export const CollapsibleFormWidget = ({
       className="collapsible-trigger d-flex border-0 align-items-center"
       style={{ justifyContent: 'unset' }}
     >
-      <Collapsible.Visible whenClosed>
+      <Collapsible.Visible whenClosed className="p-0 pb-3">
         <div className="d-flex flex-column flex-grow-1">
           <div className="d-flex flex-grow-1 w-75 x-small">{title}</div>
-          <div className={`${fontSize}`}>{subtitle}</div>
+          {subtitle ? <div className={`${fontSize} mt-3`}>{subtitle}</div> : null}
         </div>
         <div className="d-flex flex-row align-self-start">
           {isError && <Icon className="alert-icon" src={Info} />}
           <IconButton alt={intl.formatMessage(messages.expandAltText)} src={ExpandMore} iconAs={Icon} variant="dark" />
         </div>
       </Collapsible.Visible>
-      <Collapsible.Visible whenOpen>
+      <Collapsible.Visible whenOpen className="p-0">
         <div className="d-flex flex-grow-1 w-75 x-small">{title}</div>
         <div className="align-self-start">
           <IconButton alt={intl.formatMessage(messages.collapseAltText)} src={ExpandLess} iconAs={Icon} variant="dark" />
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/DurationWidget.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/DurationWidget.jsx
index 4c875aedf..779266af6 100644
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/DurationWidget.jsx
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/DurationWidget.jsx
@@ -46,7 +46,7 @@ export const DurationWidget = ({
       subtitle={getTotalLabel(duration.formValue.startTime, duration.formValue.stopTime, true)}
     >
       <FormattedMessage {...messages.durationDescription} />
-      <Form.Row className="mt-4">
+      <Form.Row className="mt-4.5">
         <Form.Group as={Col}>
           <Form.Control
             floatingLabel={intl.formatMessage(messages.startTimeLabel)}
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseDetails.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseDetails.jsx
index cbcb4b5de..7d248e370 100644
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseDetails.jsx
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseDetails.jsx
@@ -32,23 +32,19 @@ export const LicenseDetails = ({
 }) => (
   level !== LicenseLevel.course && details && license !== 'select' ? (
     <div className="x-small border-primary-100 border-bottom m-0">
-      <Form.Group>
-        <div>
+      <Form.Group className="pb-2">
+        <div className="mb-3">
           <FormattedMessage {...messages.detailsSubsectionTitle} />
         </div>
 
-        {license === LicenseTypes.allRightsReserved
-          ? (
-            <div className="mt-2">
-              <FormattedMessage {...messages.allRightsReservedSectionMessage} />
-            </div>
-          )
-          : null}
+        {license === LicenseTypes.allRightsReserved ? (
+          <FormattedMessage {...messages.allRightsReservedSectionMessage} />
+        ) : null}
 
         {license === LicenseTypes.creativeCommons
           ? (
-            <Stack gap={3}>
-              <div className="border-primary-100 border-bottom py-3">
+            <Stack gap={4}>
+              <div className="border-primary-100 border-bottom pb-4">
                 <Form.Group>
                   <ActionRow>
                     <Icon className="text-primary-500" src={Attribution} />
@@ -67,7 +63,7 @@ export const LicenseDetails = ({
                   <FormattedMessage {...messages.attributionSectionDescription} />
                 </div>
               </div>
-              <div className="border-primary-100 border-bottom py-3">
+              <div className="border-primary-100 border-bottom pb-4">
                 <Form.Group>
                   <ActionRow>
                     <Icon src={Nc} />
@@ -92,7 +88,7 @@ export const LicenseDetails = ({
                   <FormattedMessage {...messages.noncommercialSectionDescription} />
                 </div>
               </div>
-              <div className="border-primary-100 border-bottom py-3">
+              <div className="border-primary-100 border-bottom pb-4">
                 <Form.Group>
                   <ActionRow>
                     <Icon src={Nd} />
@@ -145,9 +141,7 @@ export const LicenseDetails = ({
                 </div>
               </div>
             </Stack>
-          )
-          : null}
-
+          ) : null}
       </Form.Group>
     </div>
   ) : null
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseDisplay.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseDisplay.jsx
index 9fcfd067e..2cf92a661 100644
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseDisplay.jsx
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseDisplay.jsx
@@ -24,9 +24,9 @@ export const LicenseDisplay = ({
     return (
       <Stack gap={3}>
         <div className="x-small"><FormattedMessage {...messages.displaySubsectionTitle} /></div>
-        <div className="small border border-gray-300 rounded pt-2 px-3 pb-3">
+        <div className="small border border-gray-300 rounded p-4">
           <LicenseBlurb license={license} details={details} />
-          <div className="x-small">{licenseDescription}</div>
+          <div className="x-small mt-3">{licenseDescription}</div>
         </div>
         <Hyperlink
           className="text-primary-500 x-small"
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseSelector.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseSelector.jsx
index 621f4a15a..632303531 100644
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseSelector.jsx
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseSelector.jsx
@@ -60,8 +60,8 @@ export const LicenseSelector = ({
           />
         ) : null }
       </Form.Row>
-      <div className="x-small mt-2">{levelDescription}</div>
-      {license === LicenseTypes.select ? null : <div className="border-primary-100 mt-3 border-bottom" />}
+      <div className="x-small mt-3">{levelDescription}</div>
+      {license === LicenseTypes.select ? null : <div className="border-primary-100 mt-4 border-bottom" />}
     </Form.Group>
   );
 };
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/__snapshots__/LicenseDetails.test.jsx.snap b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/__snapshots__/LicenseDetails.test.jsx.snap
index 1db86ef43..63083c1e8 100644
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/__snapshots__/LicenseDetails.test.jsx.snap
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/__snapshots__/LicenseDetails.test.jsx.snap
@@ -6,8 +6,12 @@ exports[`LicenseDetails snapshots snapshots: renders as expected with level set
 <div
   className="x-small border-primary-100 border-bottom m-0"
 >
-  <Form.Group>
-    <div>
+  <Form.Group
+    className="pb-2"
+  >
+    <div
+      className="mb-3"
+    >
       <FormattedMessage
         defaultMessage="License Details"
         description="Title for license detatils subsection"
@@ -15,10 +19,10 @@ exports[`LicenseDetails snapshots snapshots: renders as expected with level set
       />
     </div>
     <Stack
-      gap={3}
+      gap={4}
     >
       <div
-        className="border-primary-100 border-bottom py-3"
+        className="border-primary-100 border-bottom pb-4"
       >
         <Form.Group>
           <ActionRow>
@@ -51,7 +55,7 @@ exports[`LicenseDetails snapshots snapshots: renders as expected with level set
         </div>
       </div>
       <div
-        className="border-primary-100 border-bottom py-3"
+        className="border-primary-100 border-bottom pb-4"
       >
         <Form.Group>
           <ActionRow>
@@ -82,7 +86,7 @@ exports[`LicenseDetails snapshots snapshots: renders as expected with level set
         </div>
       </div>
       <div
-        className="border-primary-100 border-bottom py-3"
+        className="border-primary-100 border-bottom pb-4"
       >
         <Form.Group>
           <ActionRow>
@@ -150,23 +154,23 @@ exports[`LicenseDetails snapshots snapshots: renders as expected with level set
 <div
   className="x-small border-primary-100 border-bottom m-0"
 >
-  <Form.Group>
-    <div>
+  <Form.Group
+    className="pb-2"
+  >
+    <div
+      className="mb-3"
+    >
       <FormattedMessage
         defaultMessage="License Details"
         description="Title for license detatils subsection"
         id="authoring.videoeditor.license.detailsSubsection.title"
       />
     </div>
-    <div
-      className="mt-2"
-    >
-      <FormattedMessage
-        defaultMessage="You reserve all rights for your work."
-        description="All Rights Reserved section message"
-        id="authoring.videoeditor.license.allRightsReservedSectionMessage"
-      />
-    </div>
+    <FormattedMessage
+      defaultMessage="You reserve all rights for your work."
+      description="All Rights Reserved section message"
+      id="authoring.videoeditor.license.allRightsReservedSectionMessage"
+    />
   </Form.Group>
 </div>
 `;
@@ -177,8 +181,12 @@ exports[`LicenseDetails snapshots snapshots: renders as expected with level set
 <div
   className="x-small border-primary-100 border-bottom m-0"
 >
-  <Form.Group>
-    <div>
+  <Form.Group
+    className="pb-2"
+  >
+    <div
+      className="mb-3"
+    >
       <FormattedMessage
         defaultMessage="License Details"
         description="Title for license detatils subsection"
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/__snapshots__/LicenseDisplay.test.jsx.snap b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/__snapshots__/LicenseDisplay.test.jsx.snap
index a853638d5..5dcf41b28 100644
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/__snapshots__/LicenseDisplay.test.jsx.snap
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/__snapshots__/LicenseDisplay.test.jsx.snap
@@ -14,14 +14,14 @@ exports[`LicenseDisplay snapshots snapshots: renders as expected with default pr
     />
   </div>
   <div
-    className="small border border-gray-300 rounded pt-2 px-3 pb-3"
+    className="small border border-gray-300 rounded p-4"
   >
     <injectIntl(ShimmedIntlComponent)
       details={Object {}}
       license="all-rights-reserved"
     />
     <div
-      className="x-small"
+      className="x-small mt-3"
     >
       FormattedMessage component with license description
     </div>
@@ -54,14 +54,14 @@ exports[`LicenseDisplay snapshots snapshots: renders as expected with level set
     />
   </div>
   <div
-    className="small border border-gray-300 rounded pt-2 px-3 pb-3"
+    className="small border border-gray-300 rounded p-4"
   >
     <injectIntl(ShimmedIntlComponent)
       details={Object {}}
       license="all-rights-reserved"
     />
     <div
-      className="x-small"
+      className="x-small mt-3"
     >
       FormattedMessage component with license description
     </div>
@@ -94,14 +94,14 @@ exports[`LicenseDisplay snapshots snapshots: renders as expected with level set
     />
   </div>
   <div
-    className="small border border-gray-300 rounded pt-2 px-3 pb-3"
+    className="small border border-gray-300 rounded p-4"
   >
     <injectIntl(ShimmedIntlComponent)
       details={Object {}}
       license="creative-commons"
     />
     <div
-      className="x-small"
+      className="x-small mt-3"
     >
       FormattedMessage component with license description
     </div>
@@ -136,14 +136,14 @@ exports[`LicenseDisplay snapshots snapshots: renders as expected with level set
     />
   </div>
   <div
-    className="small border border-gray-300 rounded pt-2 px-3 pb-3"
+    className="small border border-gray-300 rounded p-4"
   >
     <injectIntl(ShimmedIntlComponent)
       details={Object {}}
       license="all-rights-reserved"
     />
     <div
-      className="x-small"
+      className="x-small mt-3"
     >
       FormattedMessage component with license description
     </div>
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/__snapshots__/LicenseSelector.test.jsx.snap b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/__snapshots__/LicenseSelector.test.jsx.snap
index 84a0f4383..4f2262ed2 100644
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/__snapshots__/LicenseSelector.test.jsx.snap
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/__snapshots__/LicenseSelector.test.jsx.snap
@@ -44,7 +44,7 @@ exports[`LicenseSelector snapshots snapshots: renders as expected with block lev
     />
   </Form.Row>
   <div
-    className="x-small mt-2"
+    className="x-small mt-3"
   >
     <FormattedMessage
       defaultMessage="This license is set specifically for this video"
@@ -53,7 +53,7 @@ exports[`LicenseSelector snapshots snapshots: renders as expected with block lev
     />
   </div>
   <div
-    className="border-primary-100 mt-3 border-bottom"
+    className="border-primary-100 mt-4 border-bottom"
   />
 </Form.Group>
 `;
@@ -90,7 +90,7 @@ exports[`LicenseSelector snapshots snapshots: renders as expected with default p
     </Form.Control>
   </Form.Row>
   <div
-    className="x-small mt-2"
+    className="x-small mt-3"
   >
     <FormattedMessage
       defaultMessage="This license currently set at the course level"
@@ -99,7 +99,7 @@ exports[`LicenseSelector snapshots snapshots: renders as expected with default p
     />
   </div>
   <div
-    className="border-primary-100 mt-3 border-bottom"
+    className="border-primary-100 mt-4 border-bottom"
   />
 </Form.Group>
 `;
@@ -148,7 +148,7 @@ exports[`LicenseSelector snapshots snapshots: renders as expected with library l
     />
   </Form.Row>
   <div
-    className="x-small mt-2"
+    className="x-small mt-3"
   >
     <FormattedMessage
       defaultMessage="This license currently set at the library level"
@@ -157,7 +157,7 @@ exports[`LicenseSelector snapshots snapshots: renders as expected with library l
     />
   </div>
   <div
-    className="border-primary-100 mt-3 border-bottom"
+    className="border-primary-100 mt-4 border-bottom"
   />
 </Form.Group>
 `;
@@ -194,7 +194,7 @@ exports[`LicenseSelector snapshots snapshots: renders as expected with no licens
     </Form.Control>
   </Form.Row>
   <div
-    className="x-small mt-2"
+    className="x-small mt-3"
   >
     <FormattedMessage
       defaultMessage="This license currently set at the course level"
@@ -203,7 +203,7 @@ exports[`LicenseSelector snapshots snapshots: renders as expected with no licens
     />
   </div>
   <div
-    className="border-primary-100 mt-3 border-bottom"
+    className="border-primary-100 mt-4 border-bottom"
   />
 </Form.Group>
 `;
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/__snapshots__/index.test.jsx.snap b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/__snapshots__/index.test.jsx.snap
index ea72233a5..494eaf4a2 100644
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/__snapshots__/index.test.jsx.snap
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/__snapshots__/index.test.jsx.snap
@@ -22,7 +22,7 @@ exports[`LicenseWidget snapshots snapshots: renders as expected with default pro
   title="License"
 >
   <Stack
-    gap={3}
+    gap={4}
   >
     <injectIntl(ShimmedIntlComponent)
       level="course"
@@ -45,7 +45,7 @@ exports[`LicenseWidget snapshots snapshots: renders as expected with default pro
       }
     />
     <div
-      className="border-primary-100 border-bottom"
+      className="border-primary-100 border-bottom my-2"
     />
     <Button
       className="text-primary-500 font-weight-bold justify-content-start pl-0"
@@ -85,7 +85,7 @@ exports[`LicenseWidget snapshots snapshots: renders as expected with isLibrary t
   title="License"
 >
   <Stack
-    gap={3}
+    gap={4}
   >
     <injectIntl(ShimmedIntlComponent)
       level="library"
@@ -133,7 +133,7 @@ exports[`LicenseWidget snapshots snapshots: renders as expected with licenseType
   title="License"
 >
   <Stack
-    gap={3}
+    gap={4}
   >
     <injectIntl(ShimmedIntlComponent)
       level="block"
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/index.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/index.jsx
index cac939d74..3b56b30a4 100644
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/index.jsx
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/index.jsx
@@ -53,8 +53,7 @@ export const LicenseWidget = ({
       )}
       title={intl.formatMessage(messages.title)}
     >
-      <Stack gap={3}>
-
+      <Stack gap={4}>
         {license ? (
           <>
             <LicenseSelector license={license} level={level} />
@@ -68,7 +67,7 @@ export const LicenseWidget = ({
         ) : null }
         {!licenseType ? (
           <>
-            <div className="border-primary-100 border-bottom" />
+            <div className="border-primary-100 border-bottom my-2" />
             <Button
               className="text-primary-500 font-weight-bold justify-content-start pl-0"
               size="sm"
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/ThumbnailWidget/__snapshots__/index.test.jsx.snap b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/ThumbnailWidget/__snapshots__/index.test.jsx.snap
index 07212c64e..925bf5993 100644
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/ThumbnailWidget/__snapshots__/index.test.jsx.snap
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/ThumbnailWidget/__snapshots__/index.test.jsx.snap
@@ -100,7 +100,7 @@ exports[`ThumbnailWidget snapshots snapshots: renders as expected where videoId
     />
   </ErrorAlert>
   <Stack
-    gap={3}
+    gap={4}
   >
     <div
       className="text-center"
@@ -110,15 +110,15 @@ exports[`ThumbnailWidget snapshots snapshots: renders as expected where videoId
         description="Message for adding thumbnail"
         id="authoring.videoeditor.thumbnail.upload.message"
       />
-    </div>
-    <div
-      className="text-center text-primary-300"
-    >
-      <FormattedMessage
-        defaultMessage="Images must have an aspect ratio of 16:9 (1280x720 px recommended)"
-        description="Message for thumbnail aspectRequirements"
-        id="authoring.videoeditor.thumbnail.upload.aspectRequirements"
-      />
+      <div
+        className="text-primary-300"
+      >
+        <FormattedMessage
+          defaultMessage="Images must have an aspect ratio of 16:9 (1280x720 px recommended)"
+          description="Message for thumbnail aspectRequirements"
+          id="authoring.videoeditor.thumbnail.upload.aspectRequirements"
+        />
+      </div>
     </div>
     <FileInput
       acceptedFiles=".gif,.jpg,.jpeg,.png,.bmp,.bmp2"
@@ -210,7 +210,7 @@ exports[`ThumbnailWidget snapshots snapshots: renders as expected with default p
     />
   </Alert>
   <Stack
-    gap={3}
+    gap={4}
   >
     <div
       className="text-center"
@@ -220,15 +220,15 @@ exports[`ThumbnailWidget snapshots snapshots: renders as expected with default p
         description="Message for adding thumbnail"
         id="authoring.videoeditor.thumbnail.upload.message"
       />
-    </div>
-    <div
-      className="text-center text-primary-300"
-    >
-      <FormattedMessage
-        defaultMessage="Images must have an aspect ratio of 16:9 (1280x720 px recommended)"
-        description="Message for thumbnail aspectRequirements"
-        id="authoring.videoeditor.thumbnail.upload.aspectRequirements"
-      />
+      <div
+        className="text-primary-300"
+      >
+        <FormattedMessage
+          defaultMessage="Images must have an aspect ratio of 16:9 (1280x720 px recommended)"
+          description="Message for thumbnail aspectRequirements"
+          id="authoring.videoeditor.thumbnail.upload.aspectRequirements"
+        />
+      </div>
     </div>
     <FileInput
       acceptedFiles=".gif,.jpg,.jpeg,.png,.bmp,.bmp2"
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/ThumbnailWidget/index.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/ThumbnailWidget/index.jsx
index 70ad2e106..89dab43b9 100644
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/ThumbnailWidget/index.jsx
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/ThumbnailWidget/index.jsx
@@ -101,12 +101,12 @@ export const ThumbnailWidget = ({
           ) : null }
         </Stack>
       ) : (
-        <Stack gap={3}>
+        <Stack gap={4}>
           <div className="text-center">
             <FormattedMessage {...messages.addThumbnail} />
-          </div>
-          <div className="text-center text-primary-300">
-            <FormattedMessage {...messages.aspectRequirements} />
+            <div className="text-primary-300">
+              <FormattedMessage {...messages.aspectRequirements} />
+            </div>
           </div>
           <FileInput fileInput={fileInput} acceptedFiles={Object.values(acceptedImgKeys).join()} />
           <Button
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/__snapshots__/index.test.jsx.snap b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/__snapshots__/index.test.jsx.snap
index e27f2998f..245b798b2 100644
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/__snapshots__/index.test.jsx.snap
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/__snapshots__/index.test.jsx.snap
@@ -30,17 +30,15 @@ exports[`TranscriptWidget component snapshots snapshot: renders ErrorAlert with
     />
   </ErrorAlert>
   <Stack
-    gap={3}
+    gap={2.5}
   >
-    <Form.Group
-      className="mt-4.5"
-    >
+    <Form.Group>
       <Transcript
         index={0}
         language="en"
       />
       <ActionRow
-        className="mt-4 mb-1"
+        className="mt-3.5"
       >
         <Form.Checkbox
           checked={false}
@@ -85,7 +83,7 @@ exports[`TranscriptWidget component snapshots snapshot: renders ErrorAlert with
       </ActionRow>
       <Form.Checkbox
         checked={false}
-        className="mt-4.5 decorative-control-label"
+        className="mt-3 decorative-control-label"
         onChange={[Function]}
       >
         <div
@@ -99,9 +97,8 @@ exports[`TranscriptWidget component snapshots snapshot: renders ErrorAlert with
         </div>
       </Form.Checkbox>
     </Form.Group>
-    <Stack
-      className="border-primary-100 border-top"
-      gap={3}
+    <div
+      className="border-primary-100 border-top pt-4"
     >
       <Button
         className="text-primary-500 font-weight-bold justify-content-start pl-0"
@@ -115,7 +112,7 @@ exports[`TranscriptWidget component snapshots snapshot: renders ErrorAlert with
           id="authoring.videoeditor.transcripts.upload.label"
         />
       </Button>
-    </Stack>
+    </div>
   </Stack>
 </CollapsibleFormWidget>
 `;
@@ -150,11 +147,9 @@ exports[`TranscriptWidget component snapshots snapshot: renders ErrorAlert with
     />
   </ErrorAlert>
   <Stack
-    gap={3}
+    gap={2.5}
   >
-    <Form.Group
-      className="mt-4.5"
-    >
+    <Form.Group>
       <Transcript
         index={0}
         language="en"
@@ -164,7 +159,7 @@ exports[`TranscriptWidget component snapshots snapshot: renders ErrorAlert with
         language="fr"
       />
       <ActionRow
-        className="mt-4 mb-1"
+        className="mt-3.5"
       >
         <Form.Checkbox
           checked={false}
@@ -209,7 +204,7 @@ exports[`TranscriptWidget component snapshots snapshot: renders ErrorAlert with
       </ActionRow>
       <Form.Checkbox
         checked={false}
-        className="mt-4.5 decorative-control-label"
+        className="mt-3 decorative-control-label"
         onChange={[Function]}
       >
         <div
@@ -223,9 +218,8 @@ exports[`TranscriptWidget component snapshots snapshot: renders ErrorAlert with
         </div>
       </Form.Checkbox>
     </Form.Group>
-    <Stack
-      className="border-primary-100 border-top"
-      gap={3}
+    <div
+      className="border-primary-100 border-top pt-4"
     >
       <Button
         className="text-primary-500 font-weight-bold justify-content-start pl-0"
@@ -239,7 +233,7 @@ exports[`TranscriptWidget component snapshots snapshot: renders ErrorAlert with
           id="authoring.videoeditor.transcripts.upload.label"
         />
       </Button>
-    </Stack>
+    </div>
   </Stack>
 </CollapsibleFormWidget>
 `;
@@ -274,17 +268,15 @@ exports[`TranscriptWidget component snapshots snapshots: renders as expected wit
     />
   </ErrorAlert>
   <Stack
-    gap={3}
+    gap={2.5}
   >
-    <Form.Group
-      className="mt-4.5"
-    >
+    <Form.Group>
       <Transcript
         index={0}
         language="en"
       />
       <ActionRow
-        className="mt-4 mb-1"
+        className="mt-3.5"
       >
         <Form.Checkbox
           checked={true}
@@ -329,7 +321,7 @@ exports[`TranscriptWidget component snapshots snapshots: renders as expected wit
       </ActionRow>
       <Form.Checkbox
         checked={false}
-        className="mt-4.5 decorative-control-label"
+        className="mt-3 decorative-control-label"
         onChange={[Function]}
       >
         <div
@@ -343,9 +335,8 @@ exports[`TranscriptWidget component snapshots snapshots: renders as expected wit
         </div>
       </Form.Checkbox>
     </Form.Group>
-    <Stack
-      className="border-primary-100 border-top"
-      gap={3}
+    <div
+      className="border-primary-100 border-top pt-4"
     >
       <Button
         className="text-primary-500 font-weight-bold justify-content-start pl-0"
@@ -359,7 +350,7 @@ exports[`TranscriptWidget component snapshots snapshots: renders as expected wit
           id="authoring.videoeditor.transcripts.upload.label"
         />
       </Button>
-    </Stack>
+    </div>
   </Stack>
 </CollapsibleFormWidget>
 `;
@@ -394,16 +385,15 @@ exports[`TranscriptWidget component snapshots snapshots: renders as expected wit
     />
   </ErrorAlert>
   <Stack
-    gap={3}
+    gap={2.5}
   >
     <FormattedMessage
       defaultMessage="Add video transcripts (.srt files only) for improved accessibility."
       description="Message for adding first transcript"
       id="authoring.videoeditor.transcripts.upload.firstTranscriptMessage"
     />
-    <Stack
-      className="border-primary-100 border-top"
-      gap={3}
+    <div
+      className="border-primary-100 border-top pt-4"
     >
       <Button
         className="text-primary-500 font-weight-bold justify-content-start pl-0"
@@ -417,7 +407,7 @@ exports[`TranscriptWidget component snapshots snapshots: renders as expected wit
           id="authoring.videoeditor.transcripts.upload.label"
         />
       </Button>
-    </Stack>
+    </div>
   </Stack>
 </CollapsibleFormWidget>
 `;
@@ -452,17 +442,15 @@ exports[`TranscriptWidget component snapshots snapshots: renders as expected wit
     />
   </ErrorAlert>
   <Stack
-    gap={3}
+    gap={2.5}
   >
-    <Form.Group
-      className="mt-4.5"
-    >
+    <Form.Group>
       <Transcript
         index={0}
         language="en"
       />
       <ActionRow
-        className="mt-4 mb-1"
+        className="mt-3.5"
       >
         <Form.Checkbox
           checked={false}
@@ -507,7 +495,7 @@ exports[`TranscriptWidget component snapshots snapshots: renders as expected wit
       </ActionRow>
       <Form.Checkbox
         checked={true}
-        className="mt-4.5 decorative-control-label"
+        className="mt-3 decorative-control-label"
         onChange={[Function]}
       >
         <div
@@ -521,9 +509,8 @@ exports[`TranscriptWidget component snapshots snapshots: renders as expected wit
         </div>
       </Form.Checkbox>
     </Form.Group>
-    <Stack
-      className="border-primary-100 border-top"
-      gap={3}
+    <div
+      className="border-primary-100 border-top pt-4"
     >
       <Button
         className="text-primary-500 font-weight-bold justify-content-start pl-0"
@@ -537,7 +524,7 @@ exports[`TranscriptWidget component snapshots snapshots: renders as expected wit
           id="authoring.videoeditor.transcripts.upload.label"
         />
       </Button>
-    </Stack>
+    </div>
   </Stack>
 </CollapsibleFormWidget>
 `;
@@ -572,17 +559,15 @@ exports[`TranscriptWidget component snapshots snapshots: renders as expected wit
     />
   </ErrorAlert>
   <Stack
-    gap={3}
+    gap={2.5}
   >
-    <Form.Group
-      className="mt-4.5"
-    >
+    <Form.Group>
       <Transcript
         index={0}
         language="en"
       />
       <ActionRow
-        className="mt-4 mb-1"
+        className="mt-3.5"
       >
         <Form.Checkbox
           checked={false}
@@ -627,7 +612,7 @@ exports[`TranscriptWidget component snapshots snapshots: renders as expected wit
       </ActionRow>
       <Form.Checkbox
         checked={false}
-        className="mt-4.5 decorative-control-label"
+        className="mt-3 decorative-control-label"
         onChange={[Function]}
       >
         <div
@@ -641,9 +626,8 @@ exports[`TranscriptWidget component snapshots snapshots: renders as expected wit
         </div>
       </Form.Checkbox>
     </Form.Group>
-    <Stack
-      className="border-primary-100 border-top"
-      gap={3}
+    <div
+      className="border-primary-100 border-top pt-4"
     >
       <Button
         className="text-primary-500 font-weight-bold justify-content-start pl-0"
@@ -657,7 +641,7 @@ exports[`TranscriptWidget component snapshots snapshots: renders as expected wit
           id="authoring.videoeditor.transcripts.upload.label"
         />
       </Button>
-    </Stack>
+    </div>
   </Stack>
 </CollapsibleFormWidget>
 `;
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/index.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/index.jsx
index 5e111a7c8..ee3bf46f6 100644
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/index.jsx
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/index.jsx
@@ -107,17 +107,16 @@ export const TranscriptWidget = ({
       >
         <FormattedMessage {...messages.deleteTranscriptError} />
       </ErrorAlert>
-      <Stack gap={3}>
+      <Stack gap={2.5}>
         {hasTranscripts ? (
-
-          <Form.Group className="mt-4.5">
+          <Form.Group>
             { transcripts.map((language, index) => (
               <Transcript
                 language={language}
                 index={index}
               />
             ))}
-            <ActionRow className="mt-4 mb-1">
+            <ActionRow className="mt-3.5">
               <Form.Checkbox
                 checked={allowTranscriptDownloads}
                 className="decorative-control-label"
@@ -142,7 +141,7 @@ export const TranscriptWidget = ({
             </ActionRow>
             <Form.Checkbox
               checked={showTranscriptByDefault}
-              className="mt-4.5 decorative-control-label"
+              className="mt-3 decorative-control-label"
               onChange={(e) => updateField({ showTranscriptByDefault: e.target.checked })}
             >
               <div className="small text-gray-700">
@@ -155,8 +154,7 @@ export const TranscriptWidget = ({
             <FormattedMessage {...messages.addFirstTranscript} />
           </>
         )}
-
-        <Stack gap={3} className="border-primary-100 border-top">
+        <div className="border-primary-100 border-top pt-4">
           <Button
             className="text-primary-500 font-weight-bold justify-content-start pl-0"
             size="sm"
@@ -166,7 +164,7 @@ export const TranscriptWidget = ({
           >
             <FormattedMessage {...messages.uploadButtonLabel} />
           </Button>
-        </Stack>
+        </div>
       </Stack>
     </CollapsibleFormWidget>
   );
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/__snapshots__/index.test.jsx.snap b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/__snapshots__/index.test.jsx.snap
index 5cf0e7f3b..15b537b80 100644
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/__snapshots__/index.test.jsx.snap
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/__snapshots__/index.test.jsx.snap
@@ -50,7 +50,9 @@ exports[`VideoSourceWidget snapshots snapshots: renders as expected with default
         id="authoring.videoeditor.videoSource.fallbackVideo.title"
       />
     </div>
-    <div>
+    <div
+      className="mt-3"
+    >
       <FormattedMessage
         defaultMessage="To be sure all learners can access the video, edX
     recommends providing additional videos in both .mp4 and
@@ -61,7 +63,7 @@ exports[`VideoSourceWidget snapshots snapshots: renders as expected with default
       />
     </div>
     <Form.Row
-      className="mt-4 flex-nowrap"
+      className="mt-3.5 flex-nowrap"
     >
       <Form.Control
         floatingLabel="Video URL"
@@ -76,7 +78,7 @@ exports[`VideoSourceWidget snapshots snapshots: renders as expected with default
       />
     </Form.Row>
     <ActionRow
-      className="mt-4"
+      className="mt-4.5"
     >
       <Form.Checkbox
         checked={false}
@@ -122,6 +124,9 @@ exports[`VideoSourceWidget snapshots snapshots: renders as expected with default
       <ActionRow.Spacer />
     </ActionRow>
   </Form.Group>
+  <div
+    className="my-4 border-primary-100 border-bottom"
+  />
   <Button
     className="text-primary-500 font-weight-bold pl-0"
     onClick={[Function]}
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/index.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/index.jsx
index ee94949ab..9138c41af 100644
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/index.jsx
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/index.jsx
@@ -82,11 +82,11 @@ export const VideoSourceWidget = ({
         <div className="mt-4">
           <FormattedMessage {...messages.fallbackVideoTitle} />
         </div>
-        <div>
+        <div className="mt-3">
           <FormattedMessage {...messages.fallbackVideoMessage} />
         </div>
         {fallbackVideos.formValue.length > 0 ? fallbackVideos.formValue.map((videoUrl, index) => (
-          <Form.Row className="mt-4 flex-nowrap">
+          <Form.Row className="mt-3.5 flex-nowrap">
             <Form.Control
               floatingLabel={intl.formatMessage(messages.fallbackVideoLabel)}
               onChange={fallbackVideos.onChange(index)}
@@ -104,7 +104,7 @@ export const VideoSourceWidget = ({
             />
           </Form.Row>
         )) : null}
-        <ActionRow className="mt-4">
+        <ActionRow className="mt-4.5">
           <Form.Checkbox
             checked={allowDownload.local}
             className="decorative-control-label"
@@ -128,6 +128,7 @@ export const VideoSourceWidget = ({
           <ActionRow.Spacer />
         </ActionRow>
       </Form.Group>
+      <div className="my-4 border-primary-100 border-bottom" />
       <Button
         className="text-primary-500 font-weight-bold pl-0"
         size="sm"
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/__snapshots__/CollapsibleFormWidget.test.jsx.snap b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/__snapshots__/CollapsibleFormWidget.test.jsx.snap
index 85d7957ab..3802c4c90 100644
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/__snapshots__/CollapsibleFormWidget.test.jsx.snap
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/__snapshots__/CollapsibleFormWidget.test.jsx.snap
@@ -2,7 +2,7 @@
 
 exports[`CollapsibleFormWidget render snapshots: renders as expected with default props 1`] = `
 <Advanced
-  className="collapsible-card rounded mx-4 my-3 px-3 py-2 text-primary-500"
+  className="collapsible-card rounded mx-4 my-3 p-4 text-primary-500"
   defaultOpen={true}
 >
   <Trigger
@@ -14,6 +14,7 @@ exports[`CollapsibleFormWidget render snapshots: renders as expected with defaul
     }
   >
     <Visible
+      className="p-0 pb-3"
       whenClosed={true}
     >
       <div
@@ -25,7 +26,7 @@ exports[`CollapsibleFormWidget render snapshots: renders as expected with defaul
           tiTLE
         </div>
         <div
-          className=""
+          className=" mt-3"
         >
           SuBTItle
         </div>
@@ -41,6 +42,7 @@ exports[`CollapsibleFormWidget render snapshots: renders as expected with defaul
       </div>
     </Visible>
     <Visible
+      className="p-0"
       whenOpen={true}
     >
       <div
@@ -71,7 +73,7 @@ exports[`CollapsibleFormWidget render snapshots: renders as expected with defaul
 
 exports[`CollapsibleFormWidget render snapshots: renders with open={true} when there is error 1`] = `
 <Advanced
-  className="collapsible-card rounded mx-4 my-3 px-3 py-2 text-primary-500"
+  className="collapsible-card rounded mx-4 my-3 p-4 text-primary-500"
   defaultOpen={true}
   open={true}
 >
@@ -84,6 +86,7 @@ exports[`CollapsibleFormWidget render snapshots: renders with open={true} when t
     }
   >
     <Visible
+      className="p-0 pb-3"
       whenClosed={true}
     >
       <div
@@ -95,7 +98,7 @@ exports[`CollapsibleFormWidget render snapshots: renders with open={true} when t
           tiTLE
         </div>
         <div
-          className=""
+          className=" mt-3"
         >
           SuBTItle
         </div>
@@ -114,6 +117,7 @@ exports[`CollapsibleFormWidget render snapshots: renders with open={true} when t
       </div>
     </Visible>
     <Visible
+      className="p-0"
       whenOpen={true}
     >
       <div
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/__snapshots__/DurationWidget.test.jsx.snap b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/__snapshots__/DurationWidget.test.jsx.snap
index 7a79d63ec..53fdb4043 100644
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/__snapshots__/DurationWidget.test.jsx.snap
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/__snapshots__/DurationWidget.test.jsx.snap
@@ -12,7 +12,7 @@ exports[`DurationWidget render snapshots: renders as expected with default props
     id="authoring.videoeditor.duration.description"
   />
   <Form.Row
-    className="mt-4"
+    className="mt-4.5"
   >
     <Form.Group>
       <Form.Control