diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/CollapsibleFormWidget.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/CollapsibleFormWidget.jsx
index 549b47976..1ff7caf1d 100644
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/CollapsibleFormWidget.jsx
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/CollapsibleFormWidget.jsx
@@ -19,11 +19,12 @@ export const CollapsibleFormWidget = ({
   isError,
   subtitle,
   title,
+  fontSize,
   // injected
   intl,
 }) => (
   <Collapsible.Advanced
-    className="collapsible-card rounded mx-4 my-3 px-3 py-2 text-primary-500 x-small"
+    className="collapsible-card rounded mx-4 my-3 px-3 py-2 text-primary-500"
     defaultOpen
     open={isError || undefined}
   >
@@ -33,8 +34,8 @@ export const CollapsibleFormWidget = ({
     >
       <Collapsible.Visible whenClosed>
         <div className="d-flex flex-column flex-grow-1">
-          <div className="d-flex flex-grow-1 w-75">{title}</div>
-          {subtitle}
+          <div className="d-flex flex-grow-1 w-75 x-small">{title}</div>
+          <div className={`${fontSize}`}>{subtitle}</div>
         </div>
         <div className="d-flex flex-row align-self-start">
           {isError && <Icon className="alert-icon" src={Info} />}
@@ -42,13 +43,13 @@ export const CollapsibleFormWidget = ({
         </div>
       </Collapsible.Visible>
       <Collapsible.Visible whenOpen>
-        <div className="d-flex flex-grow-1 w-75">{title}</div>
+        <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" />
         </div>
       </Collapsible.Visible>
     </Collapsible.Trigger>
-    <Collapsible.Body className="collapsible-body rounded px-0">
+    <Collapsible.Body className={`collapsible-body rounded px-0 ${fontSize}`}>
       {children}
     </Collapsible.Body>
   </Collapsible.Advanced>
@@ -56,6 +57,7 @@ export const CollapsibleFormWidget = ({
 
 CollapsibleFormWidget.defaultProps = {
   subtitle: null,
+  fontSize: '',
 };
 
 CollapsibleFormWidget.propTypes = {
@@ -63,6 +65,7 @@ CollapsibleFormWidget.propTypes = {
   isError: PropTypes.bool.isRequired,
   subtitle: PropTypes.node,
   title: PropTypes.node.isRequired,
+  fontSize: PropTypes.string,
   // injected
   intl: intlShape.isRequired,
 };
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/DurationWidget.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/DurationWidget.jsx
index d9595edf9..4c875aedf 100644
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/DurationWidget.jsx
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/DurationWidget.jsx
@@ -41,6 +41,7 @@ export const DurationWidget = ({
 
   return (
     <CollapsibleFormWidget
+      fontSize="x-small"
       title={intl.formatMessage(messages.durationTitle)}
       subtitle={getTotalLabel(duration.formValue.startTime, duration.formValue.stopTime, true)}
     >
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/HandoutWidget/__snapshots__/index.test.jsx.snap b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/HandoutWidget/__snapshots__/index.test.jsx.snap
index e72c9ee02..50ec2aac0 100644
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/HandoutWidget/__snapshots__/index.test.jsx.snap
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/HandoutWidget/__snapshots__/index.test.jsx.snap
@@ -2,6 +2,7 @@
 
 exports[`HandoutWidget snapshots snapshots: renders as expected with default props 1`] = `
 <injectIntl(ShimmedIntlComponent)
+  fontSize="x-small"
   isError={true}
   subtitle="None"
   title="Handout"
@@ -64,6 +65,7 @@ exports[`HandoutWidget snapshots snapshots: renders as expected with default pro
 
 exports[`HandoutWidget snapshots snapshots: renders as expected with handout 1`] = `
 <injectIntl(ShimmedIntlComponent)
+  fontSize="x-small"
   isError={true}
   subtitle="sOMeUrl "
   title="Handout"
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/HandoutWidget/index.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/HandoutWidget/index.jsx
index d516fbcea..760a3fde6 100644
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/HandoutWidget/index.jsx
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/HandoutWidget/index.jsx
@@ -47,6 +47,7 @@ export const HandoutWidget = ({
 
   return (!isLibrary ? (
     <CollapsibleFormWidget
+      fontSize="x-small"
       isError={Object.keys(error).length !== 0}
       title={intl.formatMessage(messages.titleLabel)}
       subtitle={handoutName}
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseBlurb.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseBlurb.jsx
index 3f9fc3a7c..5ea00546e 100644
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseBlurb.jsx
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseBlurb.jsx
@@ -21,18 +21,19 @@ export const LicenseBlurb = ({
   license,
   details,
 }) => (
-  <div className="d-flex flex-row flex-row">
-    {license === LicenseTypes.allRightsReserved ? <Icon src={Copyright} /> : null}
-    {license === LicenseTypes.creativeCommons ? <Icon src={Cc} /> : null}
-    {details.attribution ? <Icon src={Attribution} /> : null}
-    {details.noncommercial ? <Icon src={Nc} /> : null}
-    {details.noDerivatives ? <Icon src={Nd} /> : null}
-    {details.shareAlike ? <Icon src={Sa} /> : null}
+  <div className="d-flex flex-row align-items-center mt-2">
+    {/* not sure how to handle the edge cases when some of the icons are not displayed */}
+    {license === LicenseTypes.allRightsReserved ? <Icon src={Copyright} className="mr-1" style={{ height: '18px', width: '18px' }} /> : null}
+    {license === LicenseTypes.creativeCommons ? <Icon src={Cc} className="mr-1" style={{ height: '18px', width: '18px' }} /> : null}
+    {details.attribution ? <Icon src={Attribution} className="mr-1 text-primary-300" style={{ height: '18px', width: '18px' }} /> : null}
+    {details.noncommercial ? <Icon src={Nc} className="mr-1" style={{ height: '18px', width: '18px' }} /> : null}
+    {details.noDerivatives ? <Icon src={Nd} className="mr-1" style={{ height: '18px', width: '18px' }} /> : null}
+    {details.shareAlike ? <Icon src={Sa} className="mr-1" style={{ height: '18px', width: '18px' }} /> : null}
     {license === LicenseTypes.allRightsReserved
-      ? <div><FormattedMessage {...messages.allRightsReservedIconsLabel} /></div>
+      ? <div className="small mx-1.5"><FormattedMessage {...messages.allRightsReservedIconsLabel} /></div>
       : null}
     {license === LicenseTypes.creativeCommons
-      ? <div><FormattedMessage {...messages.creativeCommonsIconsLabel} /></div>
+      ? <div className="small mx-1.5"><FormattedMessage {...messages.creativeCommonsIconsLabel} /></div>
       : null}
   </div>
 );
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 cfd9b2c2b..cbcb4b5de 100644
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseDetails.jsx
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseDetails.jsx
@@ -6,7 +6,8 @@ import {
   injectIntl,
 } from '@edx/frontend-platform/i18n';
 import {
-  Card,
+  ActionRow,
+  CheckboxControl,
   Form,
   Icon,
   Stack,
@@ -30,15 +31,15 @@ export const LicenseDetails = ({
   updateField,
 }) => (
   level !== LicenseLevel.course && details && license !== 'select' ? (
-    <div className="border-primary-100 border-top pb-3">
+    <div className="x-small border-primary-100 border-bottom m-0">
       <Form.Group>
-        <div className="mt-3">
+        <div>
           <FormattedMessage {...messages.detailsSubsectionTitle} />
         </div>
 
         {license === LicenseTypes.allRightsReserved
           ? (
-            <div>
+            <div className="mt-2">
               <FormattedMessage {...messages.allRightsReservedSectionMessage} />
             </div>
           )
@@ -47,39 +48,34 @@ export const LicenseDetails = ({
         {license === LicenseTypes.creativeCommons
           ? (
             <Stack gap={3}>
-              <Card>
-                <Card.Header
-                  title={(
-                    <div className="d-flex flex-row flex-nowrap">
-                      <Icon src={Attribution} />
+              <div className="border-primary-100 border-bottom py-3">
+                <Form.Group>
+                  <ActionRow>
+                    <Icon className="text-primary-500" src={Attribution} />
+                    <Form.Label className="my-0 text-primary-500">
                       <FormattedMessage {...messages.attributionCheckboxLabel} />
-                    </div>
-                  )}
-                  actions={<Form.Checkbox checked disabled />}
-                />
-                <Card.Section>
+                    </Form.Label>
+                    <ActionRow.Spacer />
+                    <CheckboxControl
+                      disabled
+                      checked
+                      aria-label="Checkbox"
+                    />
+                  </ActionRow>
+                </Form.Group>
+                <div>
                   <FormattedMessage {...messages.attributionSectionDescription} />
-                </Card.Section>
-              </Card>
-
-              <Card
-                isClickable
-                onClick={() => updateField({
-                  licenseDetails: {
-                    ...details,
-                    noncommercial: !details.noncommercial,
-                  },
-                })}
-              >
-                <Card.Header
-                  title={(
-                    <div className="d-flex flex-row flex-row">
-                      <Icon src={Nc} />
+                </div>
+              </div>
+              <div className="border-primary-100 border-bottom py-3">
+                <Form.Group>
+                  <ActionRow>
+                    <Icon src={Nc} />
+                    <Form.Label className="my-0 text-primary-500">
                       <FormattedMessage {...messages.noncommercialCheckboxLabel} />
-                    </div>
-                  )}
-                  actions={(
-                    <Form.Checkbox
+                    </Form.Label>
+                    <ActionRow.Spacer />
+                    <CheckboxControl
                       checked={details.noncommercial}
                       disabled={level === LicenseLevel.course}
                       onChange={(e) => updateField({
@@ -88,33 +84,23 @@ export const LicenseDetails = ({
                           noncommercial: e.target.checked,
                         },
                       })}
+                      aria-label="Checkbox"
                     />
-                  )}
-                />
-                <Card.Section>
+                  </ActionRow>
+                </Form.Group>
+                <div>
                   <FormattedMessage {...messages.noncommercialSectionDescription} />
-                </Card.Section>
-              </Card>
-
-              <Card
-                isClickable
-                onClick={() => updateField({
-                  licenseDetails: {
-                    ...details,
-                    noDerivatives: !details.noDerivatives,
-                    shareAlike: !details.noDerivatives ? false : details.shareAlike,
-                  },
-                })}
-              >
-                <Card.Header
-                  title={(
-                    <div className="d-flex flex-row flex-row">
-                      <Icon src={Nd} />
+                </div>
+              </div>
+              <div className="border-primary-100 border-bottom py-3">
+                <Form.Group>
+                  <ActionRow>
+                    <Icon src={Nd} />
+                    <Form.Label className="my-0 text-primary-500">
                       <FormattedMessage {...messages.noDerivativesCheckboxLabel} />
-                    </div>
-                  )}
-                  actions={(
-                    <Form.Checkbox
+                    </Form.Label>
+                    <ActionRow.Spacer />
+                    <CheckboxControl
                       checked={details.noDerivatives}
                       disabled={level === LicenseLevel.course}
                       onChange={(e) => updateField({
@@ -124,34 +110,24 @@ export const LicenseDetails = ({
                           shareAlike: e.target.checked ? false : details.shareAlike,
                         },
                       })}
+                      aria-label="Checkbox"
                     />
-                  )}
-                />
-                <Card.Section>
+                  </ActionRow>
+                </Form.Group>
+                <div>
                   <FormattedMessage {...messages.noDerivativesSectionDescription} />
-                </Card.Section>
-              </Card>
-
-              <Card
-                isClickable
-                onClick={() => updateField({
-                  licenseDetails: {
-                    ...details,
-                    shareAlike: !details.shareAlike,
-                    noDerivatives: !details.shareAlike ? false : details.noDerivatives,
-                  },
-                })}
-              >
-                <Card.Header
-                  title={(
-                    <div className="d-flex flex-row flex-row">
-                      <Icon src={Sa} />
+                </div>
+              </div>
+              <div>
+                <Form.Group>
+                  <ActionRow>
+                    <Icon src={Sa} />
+                    <Form.Label className="my-0 text-primary-500">
                       <FormattedMessage {...messages.shareAlikeCheckboxLabel} />
-                    </div>
-                  )}
-                  actions={(
-                    <Form.Checkbox
-                      checked={details.shareAlike}
+                    </Form.Label>
+                    <ActionRow.Spacer />
+                    <CheckboxControl
+                      cchecked={details.shareAlike}
                       disabled={level === LicenseLevel.course}
                       onChange={(e) => updateField({
                         licenseDetails: {
@@ -160,13 +136,14 @@ export const LicenseDetails = ({
                           noDerivatives: e.target.checked ? false : details.noDerivatives,
                         },
                       })}
+                      aria-label="Checkbox"
                     />
-                  )}
-                />
-                <Card.Section>
+                  </ActionRow>
+                </Form.Group>
+                <div>
                   <FormattedMessage {...messages.shareAlikeSectionDescription} />
-                </Card.Section>
-              </Card>
+                </div>
+              </div>
             </Stack>
           )
           : 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 865aa704c..33cb0b290 100644
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseDisplay.jsx
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseDisplay.jsx
@@ -6,7 +6,6 @@ import {
   injectIntl,
 } from '@edx/frontend-platform/i18n';
 import {
-  Card,
   Stack,
   Hyperlink,
 } from '@edx/paragon';
@@ -24,16 +23,15 @@ export const LicenseDisplay = ({
 }) => {
   if (license !== LicenseTypes.select) {
     return (
-      <Stack gap={3} className="border-primary-100 border-top">
-        <FormattedMessage {...messages.displaySubsectionTitle} />
-        <Card className="mb-3">
-          <Card.Header title={<LicenseBlurb license={license} details={details} />} />
-          <Card.Section>{licenseDescription}</Card.Section>
-        </Card>
+      <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">
+          <LicenseBlurb license={license} details={details} />
+          <div className="x-small">{licenseDescription}</div>
+        </div>
         {level !== LicenseLevel.course ? (
           <Hyperlink
-            className="text-primary-500"
-            size="sm"
+            className="text-primary-500 x-small"
             destination="https://creativecommons.org/about"
             target="_blank"
           >
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 c4dc578bb..20d6070a2 100644
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseSelector.jsx
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseSelector.jsx
@@ -31,8 +31,8 @@ export const LicenseSelector = ({
   const onLicenseChange = hooks.onSelectLicense({ dispatch: useDispatch() });
   const ref = React.useRef();
   return (
-    <Form.Group className="mt-2 mx-2">
-      <Form.Row className="mt-4.5">
+    <Form.Group className="mx-2 my-0">
+      <Form.Row>
         <Form.Control
           as="select"
           ref={ref}
@@ -60,7 +60,8 @@ export const LicenseSelector = ({
           />
         ) : null }
       </Form.Row>
-      <div>{levelDescription}</div>
+      <div className="x-small mt-2">{levelDescription}</div>
+      {license === LicenseTypes.select ? null : <div className="border-primary-100 mt-3 border-bottom" />}
     </Form.Group>
   );
 };
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/__snapshots__/LicenseBlurb.test.jsx.snap b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/__snapshots__/LicenseBlurb.test.jsx.snap
index 14dc40a18..1b44e6342 100644
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/__snapshots__/LicenseBlurb.test.jsx.snap
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/__snapshots__/LicenseBlurb.test.jsx.snap
@@ -2,12 +2,38 @@
 
 exports[`LicenseBlurb snapshots snapshots: renders as expected when details.attribution and details.noDerivatives equal true 1`] = `
 <div
-  className="d-flex flex-row flex-row"
+  className="d-flex flex-row align-items-center mt-2"
 >
-  <Icon />
-  <Icon />
-  <Icon />
-  <div>
+  <Icon
+    className="mr-1"
+    style={
+      Object {
+        "height": "18px",
+        "width": "18px",
+      }
+    }
+  />
+  <Icon
+    className="mr-1 text-primary-300"
+    style={
+      Object {
+        "height": "18px",
+        "width": "18px",
+      }
+    }
+  />
+  <Icon
+    className="mr-1"
+    style={
+      Object {
+        "height": "18px",
+        "width": "18px",
+      }
+    }
+  />
+  <div
+    className="small mx-1.5"
+  >
     <FormattedMessage
       defaultMessage="Some Rights Reserved"
       description="Label for row of creative common icons"
@@ -19,12 +45,38 @@ exports[`LicenseBlurb snapshots snapshots: renders as expected when details.attr
 
 exports[`LicenseBlurb snapshots snapshots: renders as expected when details.attribution and details.noncommercial equal true 1`] = `
 <div
-  className="d-flex flex-row flex-row"
+  className="d-flex flex-row align-items-center mt-2"
 >
-  <Icon />
-  <Icon />
-  <Icon />
-  <div>
+  <Icon
+    className="mr-1"
+    style={
+      Object {
+        "height": "18px",
+        "width": "18px",
+      }
+    }
+  />
+  <Icon
+    className="mr-1 text-primary-300"
+    style={
+      Object {
+        "height": "18px",
+        "width": "18px",
+      }
+    }
+  />
+  <Icon
+    className="mr-1"
+    style={
+      Object {
+        "height": "18px",
+        "width": "18px",
+      }
+    }
+  />
+  <div
+    className="small mx-1.5"
+  >
     <FormattedMessage
       defaultMessage="Some Rights Reserved"
       description="Label for row of creative common icons"
@@ -36,12 +88,38 @@ exports[`LicenseBlurb snapshots snapshots: renders as expected when details.attr
 
 exports[`LicenseBlurb snapshots snapshots: renders as expected when details.attribution and details.shareAlike equal true 1`] = `
 <div
-  className="d-flex flex-row flex-row"
+  className="d-flex flex-row align-items-center mt-2"
 >
-  <Icon />
-  <Icon />
-  <Icon />
-  <div>
+  <Icon
+    className="mr-1"
+    style={
+      Object {
+        "height": "18px",
+        "width": "18px",
+      }
+    }
+  />
+  <Icon
+    className="mr-1 text-primary-300"
+    style={
+      Object {
+        "height": "18px",
+        "width": "18px",
+      }
+    }
+  />
+  <Icon
+    className="mr-1"
+    style={
+      Object {
+        "height": "18px",
+        "width": "18px",
+      }
+    }
+  />
+  <div
+    className="small mx-1.5"
+  >
     <FormattedMessage
       defaultMessage="Some Rights Reserved"
       description="Label for row of creative common icons"
@@ -53,11 +131,29 @@ exports[`LicenseBlurb snapshots snapshots: renders as expected when details.attr
 
 exports[`LicenseBlurb snapshots snapshots: renders as expected when details.attribution equal true 1`] = `
 <div
-  className="d-flex flex-row flex-row"
+  className="d-flex flex-row align-items-center mt-2"
 >
-  <Icon />
-  <Icon />
-  <div>
+  <Icon
+    className="mr-1"
+    style={
+      Object {
+        "height": "18px",
+        "width": "18px",
+      }
+    }
+  />
+  <Icon
+    className="mr-1 text-primary-300"
+    style={
+      Object {
+        "height": "18px",
+        "width": "18px",
+      }
+    }
+  />
+  <div
+    className="small mx-1.5"
+  >
     <FormattedMessage
       defaultMessage="Some Rights Reserved"
       description="Label for row of creative common icons"
@@ -69,10 +165,20 @@ exports[`LicenseBlurb snapshots snapshots: renders as expected when details.attr
 
 exports[`LicenseBlurb snapshots snapshots: renders as expected with default props 1`] = `
 <div
-  className="d-flex flex-row flex-row"
+  className="d-flex flex-row align-items-center mt-2"
 >
-  <Icon />
-  <div>
+  <Icon
+    className="mr-1"
+    style={
+      Object {
+        "height": "18px",
+        "width": "18px",
+      }
+    }
+  />
+  <div
+    className="small mx-1.5"
+  >
     <FormattedMessage
       defaultMessage="All Rights Reserved"
       description="Label for row of all rights reserved icons"
@@ -84,10 +190,20 @@ exports[`LicenseBlurb snapshots snapshots: renders as expected with default prop
 
 exports[`LicenseBlurb snapshots snapshots: renders as expected with license equal to Creative Commons 1`] = `
 <div
-  className="d-flex flex-row flex-row"
+  className="d-flex flex-row align-items-center mt-2"
 >
-  <Icon />
-  <div>
+  <Icon
+    className="mr-1"
+    style={
+      Object {
+        "height": "18px",
+        "width": "18px",
+      }
+    }
+  />
+  <div
+    className="small mx-1.5"
+  >
     <FormattedMessage
       defaultMessage="Some Rights Reserved"
       description="Label for row of creative common icons"
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 97bf1e614..1db86ef43 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
@@ -4,12 +4,10 @@ exports[`LicenseDetails snapshots snapshots: renders as expected with default pr
 
 exports[`LicenseDetails snapshots snapshots: renders as expected with level set to block and license set to Creative Commons 1`] = `
 <div
-  className="border-primary-100 border-top pb-3"
+  className="x-small border-primary-100 border-bottom m-0"
 >
   <Form.Group>
-    <div
-      className="mt-3"
-    >
+    <div>
       <FormattedMessage
         defaultMessage="License Details"
         description="Title for license detatils subsection"
@@ -19,131 +17,130 @@ exports[`LicenseDetails snapshots snapshots: renders as expected with level set
     <Stack
       gap={3}
     >
-      <Card>
-        <Card.Header
-          actions={
-            <Form.Checkbox
-              checked={true}
-              disabled={true}
+      <div
+        className="border-primary-100 border-bottom py-3"
+      >
+        <Form.Group>
+          <ActionRow>
+            <Icon
+              className="text-primary-500"
             />
-          }
-          title={
-            <div
-              className="d-flex flex-row flex-nowrap"
+            <Form.Label
+              className="my-0 text-primary-500"
             >
-              <Icon />
               <FormattedMessage
                 defaultMessage="Attribution"
                 description="Label for attribution checkbox"
                 id="authoring.videoeditor.license.attributionCheckboxLabel"
               />
-            </div>
-          }
-        />
-        <Card.Section>
+            </Form.Label>
+            <ActionRow.Spacer />
+            <Component
+              aria-label="Checkbox"
+              checked={true}
+              disabled={true}
+            />
+          </ActionRow>
+        </Form.Group>
+        <div>
           <FormattedMessage
             defaultMessage="Allow others to copy, distribute, display and perform your copyrighted work but only if they give credit the way you request. Currently, this option is required."
             description="Attribution card section defining attribution license"
             id="authoring.videoeditor.license.attributionSectionDescription"
           />
-        </Card.Section>
-      </Card>
-      <Card
-        isClickable={true}
-        onClick={[Function]}
+        </div>
+      </div>
+      <div
+        className="border-primary-100 border-bottom py-3"
       >
-        <Card.Header
-          actions={
-            <Form.Checkbox
-              disabled={false}
-              onChange={[Function]}
-            />
-          }
-          title={
-            <div
-              className="d-flex flex-row flex-row"
+        <Form.Group>
+          <ActionRow>
+            <Icon />
+            <Form.Label
+              className="my-0 text-primary-500"
             >
-              <Icon />
               <FormattedMessage
                 defaultMessage="Noncommercial"
                 description="Label for noncommercial checkbox"
                 id="authoring.videoeditor.license.noncommercialCheckboxLabel"
               />
-            </div>
-          }
-        />
-        <Card.Section>
+            </Form.Label>
+            <ActionRow.Spacer />
+            <Component
+              aria-label="Checkbox"
+              disabled={false}
+              onChange={[Function]}
+            />
+          </ActionRow>
+        </Form.Group>
+        <div>
           <FormattedMessage
             defaultMessage="Allow others to copy, distribute, display and perform your work - and derivative works based upon it - but for noncommercial purposes only."
             description="Noncommercial card section defining noncommercial license"
             id="authoring.videoeditor.license.noncommercialSectionDescription"
           />
-        </Card.Section>
-      </Card>
-      <Card
-        isClickable={true}
-        onClick={[Function]}
+        </div>
+      </div>
+      <div
+        className="border-primary-100 border-bottom py-3"
       >
-        <Card.Header
-          actions={
-            <Form.Checkbox
-              disabled={false}
-              onChange={[Function]}
-            />
-          }
-          title={
-            <div
-              className="d-flex flex-row flex-row"
+        <Form.Group>
+          <ActionRow>
+            <Icon />
+            <Form.Label
+              className="my-0 text-primary-500"
             >
-              <Icon />
               <FormattedMessage
                 defaultMessage="No Derivatives"
                 description="Label for No Derivatives checkbox"
                 id="authoring.videoeditor.license.noDerivativesCheckboxLabel"
               />
-            </div>
-          }
-        />
-        <Card.Section>
+            </Form.Label>
+            <ActionRow.Spacer />
+            <Component
+              aria-label="Checkbox"
+              disabled={false}
+              onChange={[Function]}
+            />
+          </ActionRow>
+        </Form.Group>
+        <div>
           <FormattedMessage
             defaultMessage="Allow others to copy, distribute, display and perform only verbatim copies of your work, not derivative works based upon it. This option is incompatible with \\"Share Alike\\"."
             description="No Derivatives card section defining no derivatives license"
             id="authoring.videoeditor.license.noDerivativesSectionDescription"
           />
-        </Card.Section>
-      </Card>
-      <Card
-        isClickable={true}
-        onClick={[Function]}
-      >
-        <Card.Header
-          actions={
-            <Form.Checkbox
-              disabled={false}
-              onChange={[Function]}
-            />
-          }
-          title={
-            <div
-              className="d-flex flex-row flex-row"
+        </div>
+      </div>
+      <div>
+        <Form.Group>
+          <ActionRow>
+            <Icon />
+            <Form.Label
+              className="my-0 text-primary-500"
             >
-              <Icon />
               <FormattedMessage
                 defaultMessage="Share Alike"
                 description="Label for Share Alike checkbox"
                 id="authoring.videoeditor.license.shareAlikeCheckboxLabel"
               />
-            </div>
-          }
-        />
-        <Card.Section>
+            </Form.Label>
+            <ActionRow.Spacer />
+            <Component
+              aria-label="Checkbox"
+              disabled={false}
+              onChange={[Function]}
+            />
+          </ActionRow>
+        </Form.Group>
+        <div>
           <FormattedMessage
             defaultMessage="Allow others to distribute derivative works only under a license identical to the license that governs your work. This option is incompatible with \\"No Derivatives\\"."
             description="Share Alike card section defining no derivatives license"
             id="authoring.videoeditor.license.shareAlikeSectionDescription"
           />
-        </Card.Section>
-      </Card>
+        </div>
+      </div>
     </Stack>
   </Form.Group>
 </div>
@@ -151,19 +148,19 @@ exports[`LicenseDetails snapshots snapshots: renders as expected with level set
 
 exports[`LicenseDetails snapshots snapshots: renders as expected with level set to block and license set to all rights reserved 1`] = `
 <div
-  className="border-primary-100 border-top pb-3"
+  className="x-small border-primary-100 border-bottom m-0"
 >
   <Form.Group>
-    <div
-      className="mt-3"
-    >
+    <div>
       <FormattedMessage
         defaultMessage="License Details"
         description="Title for license detatils subsection"
         id="authoring.videoeditor.license.detailsSubsection.title"
       />
     </div>
-    <div>
+    <div
+      className="mt-2"
+    >
       <FormattedMessage
         defaultMessage="You reserve all rights for your work."
         description="All Rights Reserved section message"
@@ -178,12 +175,10 @@ exports[`LicenseDetails snapshots snapshots: renders as expected with level set
 
 exports[`LicenseDetails snapshots snapshots: renders as expected with level set to library 1`] = `
 <div
-  className="border-primary-100 border-top pb-3"
+  className="x-small border-primary-100 border-bottom m-0"
 >
   <Form.Group>
-    <div
-      className="mt-3"
-    >
+    <div>
       <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 1b1097a6a..8fd096ee8 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
@@ -2,61 +2,62 @@
 
 exports[`LicenseDisplay snapshots snapshots: renders as expected with default props 1`] = `
 <Stack
-  className="border-primary-100 border-top"
   gap={3}
 >
-  <FormattedMessage
-    defaultMessage="License Display"
-    description="Title for license display subsection"
-    id="authoring.videoeditor.license.displaySubsection.title"
-  />
-  <Card
-    className="mb-3"
+  <div
+    className="x-small"
   >
-    <Card.Header
-      title={
-        <injectIntl(ShimmedIntlComponent)
-          details={Object {}}
-          license="all-rights-reserved"
-        />
-      }
+    <FormattedMessage
+      defaultMessage="License Display"
+      description="Title for license display subsection"
+      id="authoring.videoeditor.license.displaySubsection.title"
     />
-    <Card.Section>
+  </div>
+  <div
+    className="small border border-gray-300 rounded pt-2 px-3 pb-3"
+  >
+    <injectIntl(ShimmedIntlComponent)
+      details={Object {}}
+      license="all-rights-reserved"
+    />
+    <div
+      className="x-small"
+    >
       FormattedMessage component with license description
-    </Card.Section>
-  </Card>
+    </div>
+  </div>
 </Stack>
 `;
 
 exports[`LicenseDisplay snapshots snapshots: renders as expected with level set to block 1`] = `
 <Stack
-  className="border-primary-100 border-top"
   gap={3}
 >
-  <FormattedMessage
-    defaultMessage="License Display"
-    description="Title for license display subsection"
-    id="authoring.videoeditor.license.displaySubsection.title"
-  />
-  <Card
-    className="mb-3"
+  <div
+    className="x-small"
   >
-    <Card.Header
-      title={
-        <injectIntl(ShimmedIntlComponent)
-          details={Object {}}
-          license="all-rights-reserved"
-        />
-      }
+    <FormattedMessage
+      defaultMessage="License Display"
+      description="Title for license display subsection"
+      id="authoring.videoeditor.license.displaySubsection.title"
     />
-    <Card.Section>
+  </div>
+  <div
+    className="small border border-gray-300 rounded pt-2 px-3 pb-3"
+  >
+    <injectIntl(ShimmedIntlComponent)
+      details={Object {}}
+      license="all-rights-reserved"
+    />
+    <div
+      className="x-small"
+    >
       FormattedMessage component with license description
-    </Card.Section>
-  </Card>
+    </div>
+  </div>
   <Hyperlink
-    className="text-primary-500"
+    className="text-primary-500 x-small"
     destination="https://creativecommons.org/about"
-    size="sm"
     target="_blank"
   >
     <FormattedMessage
@@ -70,33 +71,33 @@ exports[`LicenseDisplay snapshots snapshots: renders as expected with level set
 
 exports[`LicenseDisplay snapshots snapshots: renders as expected with level set to block and license set to Creative Commons 1`] = `
 <Stack
-  className="border-primary-100 border-top"
   gap={3}
 >
-  <FormattedMessage
-    defaultMessage="License Display"
-    description="Title for license display subsection"
-    id="authoring.videoeditor.license.displaySubsection.title"
-  />
-  <Card
-    className="mb-3"
+  <div
+    className="x-small"
   >
-    <Card.Header
-      title={
-        <injectIntl(ShimmedIntlComponent)
-          details={Object {}}
-          license="creative-commons"
-        />
-      }
+    <FormattedMessage
+      defaultMessage="License Display"
+      description="Title for license display subsection"
+      id="authoring.videoeditor.license.displaySubsection.title"
     />
-    <Card.Section>
+  </div>
+  <div
+    className="small border border-gray-300 rounded pt-2 px-3 pb-3"
+  >
+    <injectIntl(ShimmedIntlComponent)
+      details={Object {}}
+      license="creative-commons"
+    />
+    <div
+      className="x-small"
+    >
       FormattedMessage component with license description
-    </Card.Section>
-  </Card>
+    </div>
+  </div>
   <Hyperlink
-    className="text-primary-500"
+    className="text-primary-500 x-small"
     destination="https://creativecommons.org/about"
-    size="sm"
     target="_blank"
   >
     <FormattedMessage
@@ -112,33 +113,33 @@ exports[`LicenseDisplay snapshots snapshots: renders as expected with level set
 
 exports[`LicenseDisplay snapshots snapshots: renders as expected with level set to library 1`] = `
 <Stack
-  className="border-primary-100 border-top"
   gap={3}
 >
-  <FormattedMessage
-    defaultMessage="License Display"
-    description="Title for license display subsection"
-    id="authoring.videoeditor.license.displaySubsection.title"
-  />
-  <Card
-    className="mb-3"
+  <div
+    className="x-small"
   >
-    <Card.Header
-      title={
-        <injectIntl(ShimmedIntlComponent)
-          details={Object {}}
-          license="all-rights-reserved"
-        />
-      }
+    <FormattedMessage
+      defaultMessage="License Display"
+      description="Title for license display subsection"
+      id="authoring.videoeditor.license.displaySubsection.title"
     />
-    <Card.Section>
+  </div>
+  <div
+    className="small border border-gray-300 rounded pt-2 px-3 pb-3"
+  >
+    <injectIntl(ShimmedIntlComponent)
+      details={Object {}}
+      license="all-rights-reserved"
+    />
+    <div
+      className="x-small"
+    >
       FormattedMessage component with license description
-    </Card.Section>
-  </Card>
+    </div>
+  </div>
   <Hyperlink
-    className="text-primary-500"
+    className="text-primary-500 x-small"
     destination="https://creativecommons.org/about"
-    size="sm"
     target="_blank"
   >
     <FormattedMessage
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 b75651787..6bf7e1c9e 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
@@ -2,11 +2,9 @@
 
 exports[`LicenseSelector snapshots snapshots: renders as expected with block level 1`] = `
 <Form.Group
-  className="mt-2 mx-2"
+  className="mx-2 my-0"
 >
-  <Form.Row
-    className="mt-4.5"
-  >
+  <Form.Row>
     <Form.Control
       as="select"
       defaultValue="all-rights-reserved"
@@ -35,7 +33,7 @@ exports[`LicenseSelector snapshots snapshots: renders as expected with block lev
       onClick={[Function]}
       tooltipContent={
         <FormattedMessage
-          defaultMessage="Delete"
+          defaultMessage="Clear and apply the course-level license"
           description="Message presented to user for action to delete license selection"
           id="authoring.videoeditor.license.deleteLicenseSelection"
         />
@@ -43,23 +41,26 @@ exports[`LicenseSelector snapshots snapshots: renders as expected with block lev
       tooltipPlacement="top"
     />
   </Form.Row>
-  <div>
+  <div
+    className="x-small mt-2"
+  >
     <FormattedMessage
       defaultMessage="This license is set specifically for this video"
       description="Helper text for license type when choosing for a spcific video"
       id="authoring.videoeditor.license.defaultLevelDescription.helperText"
     />
   </div>
+  <div
+    className="border-primary-100 mt-3 border-bottom"
+  />
 </Form.Group>
 `;
 
 exports[`LicenseSelector snapshots snapshots: renders as expected with default props 1`] = `
 <Form.Group
-  className="mt-2 mx-2"
+  className="mx-2 my-0"
 >
-  <Form.Row
-    className="mt-4.5"
-  >
+  <Form.Row>
     <Form.Control
       as="select"
       defaultValue="all-rights-reserved"
@@ -84,23 +85,26 @@ exports[`LicenseSelector snapshots snapshots: renders as expected with default p
       </option>
     </Form.Control>
   </Form.Row>
-  <div>
+  <div
+    className="x-small mt-2"
+  >
     <FormattedMessage
       defaultMessage="This license currently set at the course level"
       description="Helper text for license type when using course license"
       id="authoring.videoeditor.license.courseLevelDescription.helperText"
     />
   </div>
+  <div
+    className="border-primary-100 mt-3 border-bottom"
+  />
 </Form.Group>
 `;
 
 exports[`LicenseSelector snapshots snapshots: renders as expected with library level 1`] = `
 <Form.Group
-  className="mt-2 mx-2"
+  className="mx-2 my-0"
 >
-  <Form.Row
-    className="mt-4.5"
-  >
+  <Form.Row>
     <Form.Control
       as="select"
       defaultValue="all-rights-reserved"
@@ -129,7 +133,7 @@ exports[`LicenseSelector snapshots snapshots: renders as expected with library l
       onClick={[Function]}
       tooltipContent={
         <FormattedMessage
-          defaultMessage="Delete"
+          defaultMessage="Clear and apply the course-level license"
           description="Message presented to user for action to delete license selection"
           id="authoring.videoeditor.license.deleteLicenseSelection"
         />
@@ -137,23 +141,26 @@ exports[`LicenseSelector snapshots snapshots: renders as expected with library l
       tooltipPlacement="top"
     />
   </Form.Row>
-  <div>
+  <div
+    className="x-small mt-2"
+  >
     <FormattedMessage
       defaultMessage="This license currently set at the library level"
       description="Helper text for license type when using library license"
       id="authoring.videoeditor.license.libraryLevelDescription.helperText"
     />
   </div>
+  <div
+    className="border-primary-100 mt-3 border-bottom"
+  />
 </Form.Group>
 `;
 
 exports[`LicenseSelector snapshots snapshots: renders as expected with no license 1`] = `
 <Form.Group
-  className="mt-2 mx-2"
+  className="mx-2 my-0"
 >
-  <Form.Row
-    className="mt-4.5"
-  >
+  <Form.Row>
     <Form.Control
       as="select"
       defaultValue=""
@@ -178,12 +185,17 @@ exports[`LicenseSelector snapshots snapshots: renders as expected with no licens
       </option>
     </Form.Control>
   </Form.Row>
-  <div>
+  <div
+    className="x-small mt-2"
+  >
     <FormattedMessage
       defaultMessage="This license currently set at the course level"
       description="Helper text for license type when using course license"
       id="authoring.videoeditor.license.courseLevelDescription.helperText"
     />
   </div>
+  <div
+    className="border-primary-100 mt-3 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 361914e0d..fe6ccb131 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
@@ -8,7 +8,9 @@ exports[`LicenseWidget snapshots snapshots: renders as expected with default pro
         details={Object {}}
         license="all-rights-reserved"
       />
-      <div>
+      <div
+        className="x-small mt-2"
+      >
         <FormattedMessage
           defaultMessage="This license currently set at the course level"
           description="Helper text for license type when using course license"
@@ -70,7 +72,9 @@ exports[`LicenseWidget snapshots snapshots: renders as expected with isLibrary t
         details={Object {}}
         license="all-rights-reserved"
       />
-      <div>
+      <div
+        className="x-small mt-2"
+      >
         <FormattedMessage
           defaultMessage="This license currently set at the library level"
           description="Helper text for license type when using library license"
@@ -117,7 +121,9 @@ exports[`LicenseWidget snapshots snapshots: renders as expected with licenseType
         details={Object {}}
         license="all-rights-reserved"
       />
-      <div>
+      <div
+        className="x-small mt-2"
+      >
         <FormattedMessage
           defaultMessage="This license is set specifically for this video"
           description="Helper text for license type when choosing for a spcific video"
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 cc865a96b..dc46b9e91 100644
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/index.jsx
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/index.jsx
@@ -48,7 +48,7 @@ export const LicenseWidget = ({
       subtitle={(
         <div>
           <LicenseBlurb license={license} details={details} />
-          <div>{levelDescription}</div>
+          <div className="x-small mt-2">{levelDescription}</div>
         </div>
       )}
       title={intl.formatMessage(messages.title)}
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/messages.js b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/messages.js
index af08c2c7f..e8b92aa54 100644
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/messages.js
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/messages.js
@@ -26,7 +26,7 @@ export const messages = {
   },
   deleteLicenseSelection: {
     id: 'authoring.videoeditor.license.deleteLicenseSelection',
-    defaultMessage: 'Delete',
+    defaultMessage: 'Clear and apply the course-level license',
     description: 'Message presented to user for action to delete license selection',
   },
   allRightsReservedIconsLabel: {
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 e4d107279..fe8a2075c 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
@@ -2,6 +2,7 @@
 
 exports[`ThumbnailWidget snapshots snapshots: renders as expected where thumbnail uploads are allowed 1`] = `
 <injectIntl(ShimmedIntlComponent)
+  fontSize="x-small"
   isError={true}
   subtitle="Unavailable"
   title="Thumbnail"
@@ -43,6 +44,7 @@ exports[`ThumbnailWidget snapshots snapshots: renders as expected where thumbnai
 
 exports[`ThumbnailWidget snapshots snapshots: renders as expected where videoType equals edxVideo 1`] = `
 <injectIntl(ShimmedIntlComponent)
+  fontSize="x-small"
   isError={true}
   subtitle="Yes"
   title="Thumbnail"
@@ -81,6 +83,7 @@ exports[`ThumbnailWidget snapshots snapshots: renders as expected where videoTyp
 
 exports[`ThumbnailWidget snapshots snapshots: renders as expected where videoType equals edxVideo and no thumbnail 1`] = `
 <injectIntl(ShimmedIntlComponent)
+  fontSize="x-small"
   isError={true}
   subtitle="None"
   title="Thumbnail"
@@ -150,6 +153,7 @@ exports[`ThumbnailWidget snapshots snapshots: renders as expected where videoTyp
 
 exports[`ThumbnailWidget snapshots snapshots: renders as expected with a thumbnail provided 1`] = `
 <injectIntl(ShimmedIntlComponent)
+  fontSize="x-small"
   isError={true}
   subtitle="Yes"
   title="Thumbnail"
@@ -182,6 +186,7 @@ exports[`ThumbnailWidget snapshots snapshots: renders as expected with a thumbna
 
 exports[`ThumbnailWidget snapshots snapshots: renders as expected with default props 1`] = `
 <injectIntl(ShimmedIntlComponent)
+  fontSize="x-small"
   isError={true}
   subtitle="Unavailable"
   title="Thumbnail"
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 7afccbec3..792de0ea3 100644
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/ThumbnailWidget/index.jsx
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/ThumbnailWidget/index.jsx
@@ -61,6 +61,7 @@ export const ThumbnailWidget = ({
 
   return (!isLibrary ? (
     <CollapsibleFormWidget
+      fontSize="x-small"
       isError={Object.keys(error).length !== 0}
       title={intl.formatMessage(messages.title)}
       subtitle={getSubtitle()}
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 110a923ea..4cda6a402 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
@@ -2,6 +2,7 @@
 
 exports[`TranscriptWidget component snapshots snapshot: renders ErrorAlert with delete error message 1`] = `
 <CollapsibleFormWidget
+  fontSize="x-small"
   isError={true}
   subtitle="English"
   title="Transcripts"
@@ -121,6 +122,7 @@ exports[`TranscriptWidget component snapshots snapshot: renders ErrorAlert with
 
 exports[`TranscriptWidget component snapshots snapshot: renders ErrorAlert with upload error message 1`] = `
 <CollapsibleFormWidget
+  fontSize="x-small"
   isError={true}
   subtitle="English, French"
   title="Transcripts"
@@ -244,6 +246,7 @@ exports[`TranscriptWidget component snapshots snapshot: renders ErrorAlert with
 
 exports[`TranscriptWidget component snapshots snapshots: renders as expected with allowTranscriptDownloads true 1`] = `
 <CollapsibleFormWidget
+  fontSize="x-small"
   isError={true}
   subtitle="English"
   title="Transcripts"
@@ -363,6 +366,7 @@ exports[`TranscriptWidget component snapshots snapshots: renders as expected wit
 
 exports[`TranscriptWidget component snapshots snapshots: renders as expected with default props 1`] = `
 <CollapsibleFormWidget
+  fontSize="x-small"
   isError={true}
   subtitle="None"
   title="Transcripts"
@@ -429,6 +433,7 @@ exports[`TranscriptWidget component snapshots snapshots: renders as expected wit
 
 exports[`TranscriptWidget component snapshots snapshots: renders as expected with showTranscriptByDefault true 1`] = `
 <CollapsibleFormWidget
+  fontSize="x-small"
   isError={true}
   subtitle="English"
   title="Transcripts"
@@ -548,6 +553,7 @@ exports[`TranscriptWidget component snapshots snapshots: renders as expected wit
 
 exports[`TranscriptWidget component snapshots snapshots: renders as expected with transcripts 1`] = `
 <CollapsibleFormWidget
+  fontSize="x-small"
   isError={true}
   subtitle="English"
   title="Transcripts"
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 730307b4a..3178dec37 100644
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/index.jsx
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/index.jsx
@@ -91,6 +91,7 @@ export const TranscriptWidget = ({
   const hasTranscripts = module.hooks.hasTranscripts(transcripts);
   return (
     <CollapsibleFormWidget
+      fontSize="x-small"
       isError={Object.keys(error).length !== 0}
       subtitle={fullTextLanguages}
       title={intl.formatMessage(messages.title)}
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 f7e70b133..024ac1d46 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
@@ -2,6 +2,7 @@
 
 exports[`VideoSourceWidget snapshots snapshots: renders as expected with default props 1`] = `
 <injectIntl(ShimmedIntlComponent)
+  fontSize="x-small"
   title="Video source"
 >
   <Form.Group>
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 df8f44af0..5a670fd30 100644
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/index.jsx
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/index.jsx
@@ -52,6 +52,7 @@ export const VideoSourceWidget = ({
 
   return (
     <CollapsibleFormWidget
+      fontSize="x-small"
       title={intl.formatMessage(messages.titleLabel)}
     >
       <Form.Group>
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 5d35d6ebd..85d7957ab 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 x-small"
+  className="collapsible-card rounded mx-4 my-3 px-3 py-2 text-primary-500"
   defaultOpen={true}
 >
   <Trigger
@@ -20,11 +20,15 @@ exports[`CollapsibleFormWidget render snapshots: renders as expected with defaul
         className="d-flex flex-column flex-grow-1"
       >
         <div
-          className="d-flex flex-grow-1 w-75"
+          className="d-flex flex-grow-1 w-75 x-small"
         >
           tiTLE
         </div>
-        SuBTItle
+        <div
+          className=""
+        >
+          SuBTItle
+        </div>
       </div>
       <div
         className="d-flex flex-row align-self-start"
@@ -40,7 +44,7 @@ exports[`CollapsibleFormWidget render snapshots: renders as expected with defaul
       whenOpen={true}
     >
       <div
-        className="d-flex flex-grow-1 w-75"
+        className="d-flex flex-grow-1 w-75 x-small"
       >
         tiTLE
       </div>
@@ -56,7 +60,7 @@ exports[`CollapsibleFormWidget render snapshots: renders as expected with defaul
     </Visible>
   </Trigger>
   <Body
-    className="collapsible-body rounded px-0"
+    className="collapsible-body rounded px-0 "
   >
     <p>
       Some test string
@@ -67,7 +71,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 x-small"
+  className="collapsible-card rounded mx-4 my-3 px-3 py-2 text-primary-500"
   defaultOpen={true}
   open={true}
 >
@@ -86,11 +90,15 @@ exports[`CollapsibleFormWidget render snapshots: renders with open={true} when t
         className="d-flex flex-column flex-grow-1"
       >
         <div
-          className="d-flex flex-grow-1 w-75"
+          className="d-flex flex-grow-1 w-75 x-small"
         >
           tiTLE
         </div>
-        SuBTItle
+        <div
+          className=""
+        >
+          SuBTItle
+        </div>
       </div>
       <div
         className="d-flex flex-row align-self-start"
@@ -109,7 +117,7 @@ exports[`CollapsibleFormWidget render snapshots: renders with open={true} when t
       whenOpen={true}
     >
       <div
-        className="d-flex flex-grow-1 w-75"
+        className="d-flex flex-grow-1 w-75 x-small"
       >
         tiTLE
       </div>
@@ -125,7 +133,7 @@ exports[`CollapsibleFormWidget render snapshots: renders with open={true} when t
     </Visible>
   </Trigger>
   <Body
-    className="collapsible-body rounded px-0"
+    className="collapsible-body rounded px-0 "
   >
     <p>
       Some test string
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 4b6e30a5c..7a79d63ec 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
@@ -2,6 +2,7 @@
 
 exports[`DurationWidget render snapshots: renders as expected with default props 1`] = `
 <injectIntl(ShimmedIntlComponent)
+  fontSize="x-small"
   subtitle="Full video length"
   title="Duration"
 >