diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/__snapshots__/AnswerOption.test.jsx.snap b/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/__snapshots__/AnswerOption.test.jsx.snap
index 62286c074..4396f8e4b 100644
--- a/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/__snapshots__/AnswerOption.test.jsx.snap
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/__snapshots__/AnswerOption.test.jsx.snap
@@ -9,7 +9,7 @@ exports[`AnswerOption render snapshot: renders correct option with feedback 1`]
   <Row
     className="my-2"
   >
-    <Component
+    <Col
       xs={1}
     >
       <Checker
@@ -24,8 +24,8 @@ exports[`AnswerOption render snapshot: renders correct option with feedback 1`]
         hasSingleAnswer={false}
         setAnswer={[Function]}
       />
-    </Component>
-    <Component
+    </Col>
+    <Col
       xs={10}
     >
       <Form.Control
@@ -73,8 +73,8 @@ exports[`AnswerOption render snapshot: renders correct option with feedback 1`]
           </Form.Group>
         </div>
       </Body>
-    </Component>
-    <Component
+    </Col>
+    <Col
       className="d-inline-flex mt-1"
       xs={1}
     >
@@ -91,7 +91,7 @@ exports[`AnswerOption render snapshot: renders correct option with feedback 1`]
         onClick={[Function]}
         variant="primary"
       />
-    </Component>
+    </Col>
   </Row>
 </Advanced>
 `;
@@ -105,7 +105,7 @@ exports[`AnswerOption render snapshot: renders correct option with selected unse
   <Row
     className="my-2"
   >
-    <Component
+    <Col
       xs={1}
     >
       <Checker
@@ -121,8 +121,8 @@ exports[`AnswerOption render snapshot: renders correct option with selected unse
         hasSingleAnswer={false}
         setAnswer={[Function]}
       />
-    </Component>
-    <Component
+    </Col>
+    <Col
       xs={10}
     >
       <Form.Control
@@ -202,8 +202,8 @@ exports[`AnswerOption render snapshot: renders correct option with selected unse
           </Form.Group>
         </div>
       </Body>
-    </Component>
-    <Component
+    </Col>
+    <Col
       className="d-inline-flex mt-1"
       xs={1}
     >
@@ -220,7 +220,7 @@ exports[`AnswerOption render snapshot: renders correct option with selected unse
         onClick={[Function]}
         variant="primary"
       />
-    </Component>
+    </Col>
   </Row>
 </Advanced>
 `;
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/__snapshots__/index.test.jsx.snap b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/__snapshots__/index.test.jsx.snap
index 8a6aa9fa0..92eda9137 100644
--- a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/__snapshots__/index.test.jsx.snap
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/__snapshots__/index.test.jsx.snap
@@ -12,7 +12,7 @@ exports[`SettingsWidget snapshot snapshot: renders Settings widget page 1`] = `
     </h3>
     <Container>
       <Row>
-        <Component>
+        <Col>
           <Row
             className="my-2"
           >
@@ -84,7 +84,7 @@ exports[`SettingsWidget snapshot snapshot: renders Settings widget page 1`] = `
               </Row>
             </Body>
           </Advanced>
-        </Component>
+        </Col>
       </Row>
     </Container>
   </div>
@@ -103,7 +103,7 @@ exports[`SettingsWidget snapshot snapshot: renders Settings widget page advanced
     </h3>
     <Container>
       <Row>
-        <Component>
+        <Col>
           <Row
             className="my-2"
           >
@@ -175,7 +175,7 @@ exports[`SettingsWidget snapshot snapshot: renders Settings widget page advanced
               </Row>
             </Body>
           </Advanced>
-        </Component>
+        </Col>
       </Row>
     </Container>
   </div>
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/__snapshots__/HintRow.test.jsx.snap b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/__snapshots__/HintRow.test.jsx.snap
index ea0adb253..a106c71a8 100644
--- a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/__snapshots__/HintRow.test.jsx.snap
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/__snapshots__/HintRow.test.jsx.snap
@@ -5,7 +5,7 @@ exports[`HintRow snapshot snapshot: renders hints row 1`] = `
   fluid={true}
 >
   <Row>
-    <Component
+    <Col
       xs={10}
     >
       <Form.Group>
@@ -15,8 +15,8 @@ exports[`HintRow snapshot snapshot: renders hints row 1`] = `
           value="hint_1"
         />
       </Form.Group>
-    </Component>
-    <Component
+    </Col>
+    <Col
       xs={2}
     >
       <IconButton
@@ -25,7 +25,7 @@ exports[`HintRow snapshot snapshot: renders hints row 1`] = `
         onClick={[MockFunction]}
         variant="secondary"
       />
-    </Component>
+    </Col>
   </Row>
 </Container>
 `;
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/__snapshots__/TypeCard.test.jsx.snap b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/__snapshots__/TypeCard.test.jsx.snap
index 9b9ef8114..e18d0dc4b 100644
--- a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/__snapshots__/TypeCard.test.jsx.snap
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/__snapshots__/TypeCard.test.jsx.snap
@@ -2,14 +2,14 @@
 
 exports[`TypeCard snapshot snapshot: renders type setting card 1`] = `
 <SettingsOption
-  summary="Text Input Problem"
+  summary="Text input"
   title="Type"
 >
   <TypeRow
     answers={Array []}
     correctAnswerCount={0}
     key="multiplechoiceresponse"
-    label="Single Select Problem"
+    label="Single select"
     lastRow={false}
     selected={true}
     typeKey="multiplechoiceresponse"
@@ -20,7 +20,7 @@ exports[`TypeCard snapshot snapshot: renders type setting card 1`] = `
     answers={Array []}
     correctAnswerCount={0}
     key="choiceresponse"
-    label="Multi Select Problem"
+    label="Multi-select"
     lastRow={false}
     selected={true}
     typeKey="choiceresponse"
@@ -31,7 +31,7 @@ exports[`TypeCard snapshot snapshot: renders type setting card 1`] = `
     answers={Array []}
     correctAnswerCount={0}
     key="optionresponse"
-    label="Dropdown Problem"
+    label="Dropdown"
     lastRow={false}
     selected={true}
     typeKey="optionresponse"
@@ -42,7 +42,7 @@ exports[`TypeCard snapshot snapshot: renders type setting card 1`] = `
     answers={Array []}
     correctAnswerCount={0}
     key="numericalresponse"
-    label="Numeric Response Problem"
+    label="Numerical input"
     lastRow={false}
     selected={true}
     typeKey="numericalresponse"
@@ -53,7 +53,7 @@ exports[`TypeCard snapshot snapshot: renders type setting card 1`] = `
     answers={Array []}
     correctAnswerCount={0}
     key="stringresponse"
-    label="Text Input Problem"
+    label="Text input"
     lastRow={false}
     selected={false}
     typeKey="stringresponse"
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/__snapshots__/index.test.jsx.snap b/src/editors/containers/ProblemEditor/components/EditProblemView/__snapshots__/index.test.jsx.snap
index 005ba0de5..ecd78d6fb 100644
--- a/src/editors/containers/ProblemEditor/components/EditProblemView/__snapshots__/index.test.jsx.snap
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/__snapshots__/index.test.jsx.snap
@@ -8,7 +8,7 @@ exports[`EditorProblemView component renders raw editor 1`] = `
     fluid={true}
   >
     <Row>
-      <Component
+      <Col
         xs={9}
       >
         <RawEditor
@@ -20,14 +20,14 @@ exports[`EditorProblemView component renders raw editor 1`] = `
           }
           lang="xml"
         />
-      </Component>
-      <Component
+      </Col>
+      <Col
         xs={3}
       >
         <injectIntl(ShimmedIntlComponent)
           problemType="advanced"
         />
-      </Component>
+      </Col>
     </Row>
   </Container>
 </injectIntl(ShimmedIntlComponent)>
@@ -41,21 +41,21 @@ exports[`EditorProblemView component renders simple view 1`] = `
     fluid={true}
   >
     <Row>
-      <Component
+      <Col
         xs={9}
       >
         <injectIntl(ShimmedIntlComponent) />
         <AnswerWidget
           problemType="multiplechoiceresponse"
         />
-      </Component>
-      <Component
+      </Col>
+      <Col
         xs={3}
       >
         <injectIntl(ShimmedIntlComponent)
           problemType="multiplechoiceresponse"
         />
-      </Component>
+      </Col>
     </Row>
   </Container>
 </injectIntl(ShimmedIntlComponent)>
diff --git a/src/editors/containers/ProblemEditor/components/SelectTypeModal/SelectTypeWrapper/__snapshots__/index.test.jsx.snap b/src/editors/containers/ProblemEditor/components/SelectTypeModal/SelectTypeWrapper/__snapshots__/index.test.jsx.snap
index d88ab2baf..244b85247 100644
--- a/src/editors/containers/ProblemEditor/components/SelectTypeModal/SelectTypeWrapper/__snapshots__/index.test.jsx.snap
+++ b/src/editors/containers/ProblemEditor/components/SelectTypeModal/SelectTypeWrapper/__snapshots__/index.test.jsx.snap
@@ -4,9 +4,11 @@ exports[`SelectTypeWrapper snapshot 1`] = `
 <div>
   <ModalDialog.Header>
     <ModalDialog.Title>
-      <p>
-        Select Problem type
-      </p>
+      <FormattedMessage
+        defaultMessage="Select problem type"
+        description="Title for select problem type modal"
+        id="authoring.problemEditor.selectType.title"
+      />
       <div
         className="pgn__modal-close-container"
       >
diff --git a/src/editors/containers/ProblemEditor/components/SelectTypeModal/SelectTypeWrapper/index.jsx b/src/editors/containers/ProblemEditor/components/SelectTypeModal/SelectTypeWrapper/index.jsx
index edc54d6c4..f40e50260 100644
--- a/src/editors/containers/ProblemEditor/components/SelectTypeModal/SelectTypeWrapper/index.jsx
+++ b/src/editors/containers/ProblemEditor/components/SelectTypeModal/SelectTypeWrapper/index.jsx
@@ -1,11 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-
+import { injectIntl, FormattedMessage } from '@edx/frontend-platform/i18n';
 import { Icon, ModalDialog, IconButton } from '@edx/paragon';
 import { Close } from '@edx/paragon/icons';
 import SelectTypeFooter from './SelectTypeFooter';
 
 import * as hooks from '../../../../EditorContainer/hooks';
+import messages from './messages';
 
 export const SelectTypeWrapper = ({
   children,
@@ -18,7 +19,7 @@ export const SelectTypeWrapper = ({
     <div>
       <ModalDialog.Header>
         <ModalDialog.Title>
-          <p>Select Problem type</p>
+          <FormattedMessage {...messages.selectTypeTitle} />
           <div className="pgn__modal-close-container">
             <IconButton
               src={Close}
@@ -48,4 +49,4 @@ SelectTypeWrapper.propTypes = {
   onClose: PropTypes.func,
 };
 
-export default SelectTypeWrapper;
+export default injectIntl(SelectTypeWrapper);
diff --git a/src/editors/containers/ProblemEditor/components/SelectTypeModal/SelectTypeWrapper/messages.js b/src/editors/containers/ProblemEditor/components/SelectTypeModal/SelectTypeWrapper/messages.js
index e4e34350f..5dbb562a8 100644
--- a/src/editors/containers/ProblemEditor/components/SelectTypeModal/SelectTypeWrapper/messages.js
+++ b/src/editors/containers/ProblemEditor/components/SelectTypeModal/SelectTypeWrapper/messages.js
@@ -1,4 +1,9 @@
 export const messages = {
+  selectTypeTitle: {
+    id: 'authoring.problemEditor.selectType.title',
+    defaultMessage: 'Select problem type',
+    description: 'Title for select problem type modal',
+  },
   cancelButtonLabel: {
     id: 'authoring.problemeditor.selecttype.cancelButton.label',
     defaultMessage: 'Cancel',
diff --git a/src/editors/containers/ProblemEditor/components/SelectTypeModal/__snapshots__/index.test.jsx.snap b/src/editors/containers/ProblemEditor/components/SelectTypeModal/__snapshots__/index.test.jsx.snap
index c111eeb42..659715570 100644
--- a/src/editors/containers/ProblemEditor/components/SelectTypeModal/__snapshots__/index.test.jsx.snap
+++ b/src/editors/containers/ProblemEditor/components/SelectTypeModal/__snapshots__/index.test.jsx.snap
@@ -1,24 +1,24 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`SelectTypeModal snapshot 1`] = `
-<SelectTypeWrapper
+<injectIntl(ShimmedIntlComponent)
   onClose={[MockFunction]}
   selected="mOcKsELEcted"
 >
   <Row
-    className="justify-content-center align-items-center m-4"
+    className="justify-content-center align-items-stretch m-4"
   >
-    <Component>
+    <Col>
       <injectIntl(ShimmedIntlComponent)
         selected="mOcKsELEcted"
         setSelected={[MockFunction setSelected]}
       />
-    </Component>
-    <Component>
+    </Col>
+    <Col>
       <injectIntl(ShimmedIntlComponent)
         problemType="mOcKsELEcted"
       />
-    </Component>
+    </Col>
   </Row>
-</SelectTypeWrapper>
+</injectIntl(ShimmedIntlComponent)>
 `;
diff --git a/src/editors/containers/ProblemEditor/components/SelectTypeModal/content/AdvanceTypeSelect.jsx b/src/editors/containers/ProblemEditor/components/SelectTypeModal/content/AdvanceTypeSelect.jsx
index 2ecfa2568..e61eef086 100644
--- a/src/editors/containers/ProblemEditor/components/SelectTypeModal/content/AdvanceTypeSelect.jsx
+++ b/src/editors/containers/ProblemEditor/components/SelectTypeModal/content/AdvanceTypeSelect.jsx
@@ -8,6 +8,8 @@ import {
   Icon,
   OverlayTrigger,
   Tooltip,
+  Hyperlink,
+  Col,
 } from '@edx/paragon';
 import { ArrowBack } from '@edx/paragon/icons';
 import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
@@ -22,8 +24,8 @@ export const AdvanceTypeSelect = ({
 }) => {
   const handleChange = e => { setSelected(e.target.value); };
   return (
-    <div className="col col-8 border rounded p-0 justify-content-center">
-      <Form.Group className="p-0">
+    <Col xs={12} md={8} className="justify-content-center">
+      <Form.Group className="border rounded text-primary-500 p-0">
         <ActionRow className="border-primary-100 border-bottom py-3 pl-2.5 pr-4">
           <IconButton src={ArrowBack} iconAs={Icon} onClick={() => setSelected(ProblemTypeKeys.SINGLESELECT)} />
           <ActionRow.Spacer />
@@ -56,7 +58,7 @@ export const AdvanceTypeSelect = ({
                       </Tooltip>
                     )}
                   >
-                    <div>
+                    <div className="text-gray-500">
                       {intl.formatMessage(messages.problemSupportStatus, { supportStatus: data.status })}
                     </div>
                   </OverlayTrigger>
@@ -74,7 +76,13 @@ export const AdvanceTypeSelect = ({
           })}
         </Form.RadioSet>
       </Form.Group>
-    </div>
+      <Hyperlink
+        destination="https://edx.readthedocs.io/projects/edx-partner-course-staff/en/latest/exercises_tools/create_exercises_and_tools.html#advanced"
+        target="_blank"
+      >
+        <FormattedMessage {...messages.learnMoreAdvancedButtonLabel} />
+      </Hyperlink>
+    </Col>
   );
 };
 
diff --git a/src/editors/containers/ProblemEditor/components/SelectTypeModal/content/ProblemTypeSelect.jsx b/src/editors/containers/ProblemEditor/components/SelectTypeModal/content/ProblemTypeSelect.jsx
index e2c8fea06..a721a6d8c 100644
--- a/src/editors/containers/ProblemEditor/components/SelectTypeModal/content/ProblemTypeSelect.jsx
+++ b/src/editors/containers/ProblemEditor/components/SelectTypeModal/content/ProblemTypeSelect.jsx
@@ -24,7 +24,7 @@ export const ProblemTypeSelect = ({
         {Object.values(ProblemTypeKeys).map((key) => (
           key !== 'advanced'
             ? (
-              <SelectableBox id={key} value={key} {...settings}>
+              <SelectableBox className="text-primary-500" id={key} value={key} {...settings}>
                 {ProblemTypes[key].title}
               </SelectableBox>
             )
diff --git a/src/editors/containers/ProblemEditor/components/SelectTypeModal/content/__snapshots__/AdvanceTypeSelect.test.jsx.snap b/src/editors/containers/ProblemEditor/components/SelectTypeModal/content/__snapshots__/AdvanceTypeSelect.test.jsx.snap
index 040a7ca10..5dcf85a1c 100644
--- a/src/editors/containers/ProblemEditor/components/SelectTypeModal/content/__snapshots__/AdvanceTypeSelect.test.jsx.snap
+++ b/src/editors/containers/ProblemEditor/components/SelectTypeModal/content/__snapshots__/AdvanceTypeSelect.test.jsx.snap
@@ -1,11 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with default props 1`] = `
-<div
-  className="col col-8 border rounded p-0 justify-content-center"
+<Col
+  className="justify-content-center"
+  md={8}
+  xs={12}
 >
   <Form.Group
-    className="p-0"
+    className="border rounded text-primary-500 p-0"
   >
     <ActionRow
       className="border-primary-100 border-bottom py-3 pl-2.5 pr-4"
@@ -80,7 +82,9 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with default
           }
           placement="right"
         >
-          <div>
+          <div
+            className="text-gray-500"
+          >
             Not supported
           </div>
         </OverlayTrigger>
@@ -133,7 +137,9 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with default
           }
           placement="right"
         >
-          <div>
+          <div
+            className="text-gray-500"
+          >
             Provisional
           </div>
         </OverlayTrigger>
@@ -175,7 +181,9 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with default
           }
           placement="right"
         >
-          <div>
+          <div
+            className="text-gray-500"
+          >
             Not supported
           </div>
         </OverlayTrigger>
@@ -217,7 +225,9 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with default
           }
           placement="right"
         >
-          <div>
+          <div
+            className="text-gray-500"
+          >
             Not supported
           </div>
         </OverlayTrigger>
@@ -270,22 +280,36 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with default
           }
           placement="right"
         >
-          <div>
+          <div
+            className="text-gray-500"
+          >
             Not supported
           </div>
         </OverlayTrigger>
       </ActionRow>
     </RadioSet>
   </Form.Group>
-</div>
+  <Hyperlink
+    destination="https://edx.readthedocs.io/projects/edx-partner-course-staff/en/latest/exercises_tools/create_exercises_and_tools.html#advanced"
+    target="_blank"
+  >
+    <FormattedMessage
+      defaultMessage="Learn more about advanced problem types"
+      description="Label for Learn more about advanced problem types button"
+      id="authoring.problemEditor.advanceProblem.learnMoreButtonLabel.label"
+    />
+  </Hyperlink>
+</Col>
 `;
 
 exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problemType is circuitschematic 1`] = `
-<div
-  className="col col-8 border rounded p-0 justify-content-center"
+<Col
+  className="justify-content-center"
+  md={8}
+  xs={12}
 >
   <Form.Group
-    className="p-0"
+    className="border rounded text-primary-500 p-0"
   >
     <ActionRow
       className="border-primary-100 border-bottom py-3 pl-2.5 pr-4"
@@ -360,7 +384,9 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
           }
           placement="right"
         >
-          <div>
+          <div
+            className="text-gray-500"
+          >
             Not supported
           </div>
         </OverlayTrigger>
@@ -413,7 +439,9 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
           }
           placement="right"
         >
-          <div>
+          <div
+            className="text-gray-500"
+          >
             Provisional
           </div>
         </OverlayTrigger>
@@ -455,7 +483,9 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
           }
           placement="right"
         >
-          <div>
+          <div
+            className="text-gray-500"
+          >
             Not supported
           </div>
         </OverlayTrigger>
@@ -497,7 +527,9 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
           }
           placement="right"
         >
-          <div>
+          <div
+            className="text-gray-500"
+          >
             Not supported
           </div>
         </OverlayTrigger>
@@ -550,22 +582,36 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
           }
           placement="right"
         >
-          <div>
+          <div
+            className="text-gray-500"
+          >
             Not supported
           </div>
         </OverlayTrigger>
       </ActionRow>
     </RadioSet>
   </Form.Group>
-</div>
+  <Hyperlink
+    destination="https://edx.readthedocs.io/projects/edx-partner-course-staff/en/latest/exercises_tools/create_exercises_and_tools.html#advanced"
+    target="_blank"
+  >
+    <FormattedMessage
+      defaultMessage="Learn more about advanced problem types"
+      description="Label for Learn more about advanced problem types button"
+      id="authoring.problemEditor.advanceProblem.learnMoreButtonLabel.label"
+    />
+  </Hyperlink>
+</Col>
 `;
 
 exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problemType is customgrader 1`] = `
-<div
-  className="col col-8 border rounded p-0 justify-content-center"
+<Col
+  className="justify-content-center"
+  md={8}
+  xs={12}
 >
   <Form.Group
-    className="p-0"
+    className="border rounded text-primary-500 p-0"
   >
     <ActionRow
       className="border-primary-100 border-bottom py-3 pl-2.5 pr-4"
@@ -640,7 +686,9 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
           }
           placement="right"
         >
-          <div>
+          <div
+            className="text-gray-500"
+          >
             Not supported
           </div>
         </OverlayTrigger>
@@ -693,7 +741,9 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
           }
           placement="right"
         >
-          <div>
+          <div
+            className="text-gray-500"
+          >
             Provisional
           </div>
         </OverlayTrigger>
@@ -735,7 +785,9 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
           }
           placement="right"
         >
-          <div>
+          <div
+            className="text-gray-500"
+          >
             Not supported
           </div>
         </OverlayTrigger>
@@ -777,7 +829,9 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
           }
           placement="right"
         >
-          <div>
+          <div
+            className="text-gray-500"
+          >
             Not supported
           </div>
         </OverlayTrigger>
@@ -830,22 +884,36 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
           }
           placement="right"
         >
-          <div>
+          <div
+            className="text-gray-500"
+          >
             Not supported
           </div>
         </OverlayTrigger>
       </ActionRow>
     </RadioSet>
   </Form.Group>
-</div>
+  <Hyperlink
+    destination="https://edx.readthedocs.io/projects/edx-partner-course-staff/en/latest/exercises_tools/create_exercises_and_tools.html#advanced"
+    target="_blank"
+  >
+    <FormattedMessage
+      defaultMessage="Learn more about advanced problem types"
+      description="Label for Learn more about advanced problem types button"
+      id="authoring.problemEditor.advanceProblem.learnMoreButtonLabel.label"
+    />
+  </Hyperlink>
+</Col>
 `;
 
 exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problemType is drag_and_drop 1`] = `
-<div
-  className="col col-8 border rounded p-0 justify-content-center"
+<Col
+  className="justify-content-center"
+  md={8}
+  xs={12}
 >
   <Form.Group
-    className="p-0"
+    className="border rounded text-primary-500 p-0"
   >
     <ActionRow
       className="border-primary-100 border-bottom py-3 pl-2.5 pr-4"
@@ -920,7 +988,9 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
           }
           placement="right"
         >
-          <div>
+          <div
+            className="text-gray-500"
+          >
             Not supported
           </div>
         </OverlayTrigger>
@@ -973,7 +1043,9 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
           }
           placement="right"
         >
-          <div>
+          <div
+            className="text-gray-500"
+          >
             Provisional
           </div>
         </OverlayTrigger>
@@ -1015,7 +1087,9 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
           }
           placement="right"
         >
-          <div>
+          <div
+            className="text-gray-500"
+          >
             Not supported
           </div>
         </OverlayTrigger>
@@ -1057,7 +1131,9 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
           }
           placement="right"
         >
-          <div>
+          <div
+            className="text-gray-500"
+          >
             Not supported
           </div>
         </OverlayTrigger>
@@ -1110,22 +1186,36 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
           }
           placement="right"
         >
-          <div>
+          <div
+            className="text-gray-500"
+          >
             Not supported
           </div>
         </OverlayTrigger>
       </ActionRow>
     </RadioSet>
   </Form.Group>
-</div>
+  <Hyperlink
+    destination="https://edx.readthedocs.io/projects/edx-partner-course-staff/en/latest/exercises_tools/create_exercises_and_tools.html#advanced"
+    target="_blank"
+  >
+    <FormattedMessage
+      defaultMessage="Learn more about advanced problem types"
+      description="Label for Learn more about advanced problem types button"
+      id="authoring.problemEditor.advanceProblem.learnMoreButtonLabel.label"
+    />
+  </Hyperlink>
+</Col>
 `;
 
 exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problemType is formularesponse 1`] = `
-<div
-  className="col col-8 border rounded p-0 justify-content-center"
+<Col
+  className="justify-content-center"
+  md={8}
+  xs={12}
 >
   <Form.Group
-    className="p-0"
+    className="border rounded text-primary-500 p-0"
   >
     <ActionRow
       className="border-primary-100 border-bottom py-3 pl-2.5 pr-4"
@@ -1200,7 +1290,9 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
           }
           placement="right"
         >
-          <div>
+          <div
+            className="text-gray-500"
+          >
             Not supported
           </div>
         </OverlayTrigger>
@@ -1253,7 +1345,9 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
           }
           placement="right"
         >
-          <div>
+          <div
+            className="text-gray-500"
+          >
             Provisional
           </div>
         </OverlayTrigger>
@@ -1295,7 +1389,9 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
           }
           placement="right"
         >
-          <div>
+          <div
+            className="text-gray-500"
+          >
             Not supported
           </div>
         </OverlayTrigger>
@@ -1337,7 +1433,9 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
           }
           placement="right"
         >
-          <div>
+          <div
+            className="text-gray-500"
+          >
             Not supported
           </div>
         </OverlayTrigger>
@@ -1390,22 +1488,36 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
           }
           placement="right"
         >
-          <div>
+          <div
+            className="text-gray-500"
+          >
             Not supported
           </div>
         </OverlayTrigger>
       </ActionRow>
     </RadioSet>
   </Form.Group>
-</div>
+  <Hyperlink
+    destination="https://edx.readthedocs.io/projects/edx-partner-course-staff/en/latest/exercises_tools/create_exercises_and_tools.html#advanced"
+    target="_blank"
+  >
+    <FormattedMessage
+      defaultMessage="Learn more about advanced problem types"
+      description="Label for Learn more about advanced problem types button"
+      id="authoring.problemEditor.advanceProblem.learnMoreButtonLabel.label"
+    />
+  </Hyperlink>
+</Col>
 `;
 
 exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problemType is imageresponse 1`] = `
-<div
-  className="col col-8 border rounded p-0 justify-content-center"
+<Col
+  className="justify-content-center"
+  md={8}
+  xs={12}
 >
   <Form.Group
-    className="p-0"
+    className="border rounded text-primary-500 p-0"
   >
     <ActionRow
       className="border-primary-100 border-bottom py-3 pl-2.5 pr-4"
@@ -1480,7 +1592,9 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
           }
           placement="right"
         >
-          <div>
+          <div
+            className="text-gray-500"
+          >
             Not supported
           </div>
         </OverlayTrigger>
@@ -1533,7 +1647,9 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
           }
           placement="right"
         >
-          <div>
+          <div
+            className="text-gray-500"
+          >
             Provisional
           </div>
         </OverlayTrigger>
@@ -1575,7 +1691,9 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
           }
           placement="right"
         >
-          <div>
+          <div
+            className="text-gray-500"
+          >
             Not supported
           </div>
         </OverlayTrigger>
@@ -1617,7 +1735,9 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
           }
           placement="right"
         >
-          <div>
+          <div
+            className="text-gray-500"
+          >
             Not supported
           </div>
         </OverlayTrigger>
@@ -1670,22 +1790,36 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
           }
           placement="right"
         >
-          <div>
+          <div
+            className="text-gray-500"
+          >
             Not supported
           </div>
         </OverlayTrigger>
       </ActionRow>
     </RadioSet>
   </Form.Group>
-</div>
+  <Hyperlink
+    destination="https://edx.readthedocs.io/projects/edx-partner-course-staff/en/latest/exercises_tools/create_exercises_and_tools.html#advanced"
+    target="_blank"
+  >
+    <FormattedMessage
+      defaultMessage="Learn more about advanced problem types"
+      description="Label for Learn more about advanced problem types button"
+      id="authoring.problemEditor.advanceProblem.learnMoreButtonLabel.label"
+    />
+  </Hyperlink>
+</Col>
 `;
 
 exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problemType is jsinput_response 1`] = `
-<div
-  className="col col-8 border rounded p-0 justify-content-center"
+<Col
+  className="justify-content-center"
+  md={8}
+  xs={12}
 >
   <Form.Group
-    className="p-0"
+    className="border rounded text-primary-500 p-0"
   >
     <ActionRow
       className="border-primary-100 border-bottom py-3 pl-2.5 pr-4"
@@ -1760,7 +1894,9 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
           }
           placement="right"
         >
-          <div>
+          <div
+            className="text-gray-500"
+          >
             Not supported
           </div>
         </OverlayTrigger>
@@ -1813,7 +1949,9 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
           }
           placement="right"
         >
-          <div>
+          <div
+            className="text-gray-500"
+          >
             Provisional
           </div>
         </OverlayTrigger>
@@ -1855,7 +1993,9 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
           }
           placement="right"
         >
-          <div>
+          <div
+            className="text-gray-500"
+          >
             Not supported
           </div>
         </OverlayTrigger>
@@ -1897,7 +2037,9 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
           }
           placement="right"
         >
-          <div>
+          <div
+            className="text-gray-500"
+          >
             Not supported
           </div>
         </OverlayTrigger>
@@ -1950,22 +2092,36 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
           }
           placement="right"
         >
-          <div>
+          <div
+            className="text-gray-500"
+          >
             Not supported
           </div>
         </OverlayTrigger>
       </ActionRow>
     </RadioSet>
   </Form.Group>
-</div>
+  <Hyperlink
+    destination="https://edx.readthedocs.io/projects/edx-partner-course-staff/en/latest/exercises_tools/create_exercises_and_tools.html#advanced"
+    target="_blank"
+  >
+    <FormattedMessage
+      defaultMessage="Learn more about advanced problem types"
+      description="Label for Learn more about advanced problem types button"
+      id="authoring.problemEditor.advanceProblem.learnMoreButtonLabel.label"
+    />
+  </Hyperlink>
+</Col>
 `;
 
 exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problemType is problem_with_hint 1`] = `
-<div
-  className="col col-8 border rounded p-0 justify-content-center"
+<Col
+  className="justify-content-center"
+  md={8}
+  xs={12}
 >
   <Form.Group
-    className="p-0"
+    className="border rounded text-primary-500 p-0"
   >
     <ActionRow
       className="border-primary-100 border-bottom py-3 pl-2.5 pr-4"
@@ -2040,7 +2196,9 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
           }
           placement="right"
         >
-          <div>
+          <div
+            className="text-gray-500"
+          >
             Not supported
           </div>
         </OverlayTrigger>
@@ -2093,7 +2251,9 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
           }
           placement="right"
         >
-          <div>
+          <div
+            className="text-gray-500"
+          >
             Provisional
           </div>
         </OverlayTrigger>
@@ -2135,7 +2295,9 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
           }
           placement="right"
         >
-          <div>
+          <div
+            className="text-gray-500"
+          >
             Not supported
           </div>
         </OverlayTrigger>
@@ -2177,7 +2339,9 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
           }
           placement="right"
         >
-          <div>
+          <div
+            className="text-gray-500"
+          >
             Not supported
           </div>
         </OverlayTrigger>
@@ -2230,12 +2394,24 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
           }
           placement="right"
         >
-          <div>
+          <div
+            className="text-gray-500"
+          >
             Not supported
           </div>
         </OverlayTrigger>
       </ActionRow>
     </RadioSet>
   </Form.Group>
-</div>
+  <Hyperlink
+    destination="https://edx.readthedocs.io/projects/edx-partner-course-staff/en/latest/exercises_tools/create_exercises_and_tools.html#advanced"
+    target="_blank"
+  >
+    <FormattedMessage
+      defaultMessage="Learn more about advanced problem types"
+      description="Label for Learn more about advanced problem types button"
+      id="authoring.problemEditor.advanceProblem.learnMoreButtonLabel.label"
+    />
+  </Hyperlink>
+</Col>
 `;
diff --git a/src/editors/containers/ProblemEditor/components/SelectTypeModal/content/__snapshots__/Preview.test.jsx.snap b/src/editors/containers/ProblemEditor/components/SelectTypeModal/content/__snapshots__/Preview.test.jsx.snap
index 8dd2e23bf..828676b0d 100644
--- a/src/editors/containers/ProblemEditor/components/SelectTypeModal/content/__snapshots__/Preview.test.jsx.snap
+++ b/src/editors/containers/ProblemEditor/components/SelectTypeModal/content/__snapshots__/Preview.test.jsx.snap
@@ -9,7 +9,7 @@ exports[`Preview snapshots snapshots: renders as expected with problemType is ch
   <div
     className="small"
   >
-    Multi Select Problem
+    Multi-select problem
   </div>
   <Image
     alt="A preview illustration of a {problemType, select,
@@ -34,8 +34,8 @@ exports[`Preview snapshots snapshots: renders as expected with problemType is ch
     target="_blank"
   >
     <FormattedMessage
-      defaultMessage="Learn More"
-      description="Label for Learn More button"
+      defaultMessage="Learn more"
+      description="Label for Learn more button"
       id="authoring.problemEditor.learnMoreButtonLabel.label"
     />
   </Hyperlink>
@@ -49,7 +49,7 @@ exports[`Preview snapshots snapshots: renders as expected with problemType is mu
   <div
     className="small"
   >
-    Single Select Problem
+    Single select problem
   </div>
   <Image
     alt="A preview illustration of a {problemType, select,
@@ -74,8 +74,8 @@ exports[`Preview snapshots snapshots: renders as expected with problemType is mu
     target="_blank"
   >
     <FormattedMessage
-      defaultMessage="Learn More"
-      description="Label for Learn More button"
+      defaultMessage="Learn more"
+      description="Label for Learn more button"
       id="authoring.problemEditor.learnMoreButtonLabel.label"
     />
   </Hyperlink>
@@ -89,7 +89,7 @@ exports[`Preview snapshots snapshots: renders as expected with problemType is nu
   <div
     className="small"
   >
-    Numeric Response Problem
+    Numerical input problem
   </div>
   <Image
     alt="A preview illustration of a {problemType, select,
@@ -114,8 +114,8 @@ exports[`Preview snapshots snapshots: renders as expected with problemType is nu
     target="_blank"
   >
     <FormattedMessage
-      defaultMessage="Learn More"
-      description="Label for Learn More button"
+      defaultMessage="Learn more"
+      description="Label for Learn more button"
       id="authoring.problemEditor.learnMoreButtonLabel.label"
     />
   </Hyperlink>
@@ -129,7 +129,7 @@ exports[`Preview snapshots snapshots: renders as expected with problemType is op
   <div
     className="small"
   >
-    Dropdown Problem
+    Dropdown problem
   </div>
   <Image
     alt="A preview illustration of a {problemType, select,
@@ -154,8 +154,8 @@ exports[`Preview snapshots snapshots: renders as expected with problemType is op
     target="_blank"
   >
     <FormattedMessage
-      defaultMessage="Learn More"
-      description="Label for Learn More button"
+      defaultMessage="Learn more"
+      description="Label for Learn more button"
       id="authoring.problemEditor.learnMoreButtonLabel.label"
     />
   </Hyperlink>
@@ -169,7 +169,7 @@ exports[`Preview snapshots snapshots: renders as expected with problemType is st
   <div
     className="small"
   >
-    Text Input Problem
+    Text input problem
   </div>
   <Image
     alt="A preview illustration of a {problemType, select,
@@ -194,8 +194,8 @@ exports[`Preview snapshots snapshots: renders as expected with problemType is st
     target="_blank"
   >
     <FormattedMessage
-      defaultMessage="Learn More"
-      description="Label for Learn More button"
+      defaultMessage="Learn more"
+      description="Label for Learn more button"
       id="authoring.problemEditor.learnMoreButtonLabel.label"
     />
   </Hyperlink>
diff --git a/src/editors/containers/ProblemEditor/components/SelectTypeModal/content/__snapshots__/ProblemTypeSelect.test.jsx.snap b/src/editors/containers/ProblemEditor/components/SelectTypeModal/content/__snapshots__/ProblemTypeSelect.test.jsx.snap
index bf2f8389e..618529bb7 100644
--- a/src/editors/containers/ProblemEditor/components/SelectTypeModal/content/__snapshots__/ProblemTypeSelect.test.jsx.snap
+++ b/src/editors/containers/ProblemEditor/components/SelectTypeModal/content/__snapshots__/ProblemTypeSelect.test.jsx.snap
@@ -10,43 +10,48 @@ exports[`ProblemTypeSelect snapshot DROPDOWN 1`] = `
   >
     <SelectableBox
       aria-label="checkbox"
+      className="text-primary-500"
       id="multiplechoiceresponse"
       type="radio"
       value="multiplechoiceresponse"
     >
-      Single Select Problem
+      Single select
     </SelectableBox>
     <SelectableBox
       aria-label="checkbox"
+      className="text-primary-500"
       id="choiceresponse"
       type="radio"
       value="choiceresponse"
     >
-      Multi Select Problem
+      Multi-select
     </SelectableBox>
     <SelectableBox
       aria-label="checkbox"
+      className="text-primary-500"
       id="optionresponse"
       type="radio"
       value="optionresponse"
     >
-      Dropdown Problem
+      Dropdown
     </SelectableBox>
     <SelectableBox
       aria-label="checkbox"
+      className="text-primary-500"
       id="numericalresponse"
       type="radio"
       value="numericalresponse"
     >
-      Numeric Response Problem
+      Numerical input
     </SelectableBox>
     <SelectableBox
       aria-label="checkbox"
+      className="text-primary-500"
       id="stringresponse"
       type="radio"
       value="stringresponse"
     >
-      Text Input Problem
+      Text input
     </SelectableBox>
   </SelectableBox.Set>
   <Button
@@ -55,7 +60,7 @@ exports[`ProblemTypeSelect snapshot DROPDOWN 1`] = `
     variant="link"
   >
     <FormattedMessage
-      defaultMessage="Advance problem types"
+      defaultMessage="Advanced problem types"
       description="Button label for advance problem types option"
       id="authoring.problemEditor.problemSelect.advanceButton.label"
     />
@@ -73,43 +78,48 @@ exports[`ProblemTypeSelect snapshot MULTISELECT 1`] = `
   >
     <SelectableBox
       aria-label="checkbox"
+      className="text-primary-500"
       id="multiplechoiceresponse"
       type="radio"
       value="multiplechoiceresponse"
     >
-      Single Select Problem
+      Single select
     </SelectableBox>
     <SelectableBox
       aria-label="checkbox"
+      className="text-primary-500"
       id="choiceresponse"
       type="radio"
       value="choiceresponse"
     >
-      Multi Select Problem
+      Multi-select
     </SelectableBox>
     <SelectableBox
       aria-label="checkbox"
+      className="text-primary-500"
       id="optionresponse"
       type="radio"
       value="optionresponse"
     >
-      Dropdown Problem
+      Dropdown
     </SelectableBox>
     <SelectableBox
       aria-label="checkbox"
+      className="text-primary-500"
       id="numericalresponse"
       type="radio"
       value="numericalresponse"
     >
-      Numeric Response Problem
+      Numerical input
     </SelectableBox>
     <SelectableBox
       aria-label="checkbox"
+      className="text-primary-500"
       id="stringresponse"
       type="radio"
       value="stringresponse"
     >
-      Text Input Problem
+      Text input
     </SelectableBox>
   </SelectableBox.Set>
   <Button
@@ -118,7 +128,7 @@ exports[`ProblemTypeSelect snapshot MULTISELECT 1`] = `
     variant="link"
   >
     <FormattedMessage
-      defaultMessage="Advance problem types"
+      defaultMessage="Advanced problem types"
       description="Button label for advance problem types option"
       id="authoring.problemEditor.problemSelect.advanceButton.label"
     />
@@ -136,43 +146,48 @@ exports[`ProblemTypeSelect snapshot NUMERIC 1`] = `
   >
     <SelectableBox
       aria-label="checkbox"
+      className="text-primary-500"
       id="multiplechoiceresponse"
       type="radio"
       value="multiplechoiceresponse"
     >
-      Single Select Problem
+      Single select
     </SelectableBox>
     <SelectableBox
       aria-label="checkbox"
+      className="text-primary-500"
       id="choiceresponse"
       type="radio"
       value="choiceresponse"
     >
-      Multi Select Problem
+      Multi-select
     </SelectableBox>
     <SelectableBox
       aria-label="checkbox"
+      className="text-primary-500"
       id="optionresponse"
       type="radio"
       value="optionresponse"
     >
-      Dropdown Problem
+      Dropdown
     </SelectableBox>
     <SelectableBox
       aria-label="checkbox"
+      className="text-primary-500"
       id="numericalresponse"
       type="radio"
       value="numericalresponse"
     >
-      Numeric Response Problem
+      Numerical input
     </SelectableBox>
     <SelectableBox
       aria-label="checkbox"
+      className="text-primary-500"
       id="stringresponse"
       type="radio"
       value="stringresponse"
     >
-      Text Input Problem
+      Text input
     </SelectableBox>
   </SelectableBox.Set>
   <Button
@@ -181,7 +196,7 @@ exports[`ProblemTypeSelect snapshot NUMERIC 1`] = `
     variant="link"
   >
     <FormattedMessage
-      defaultMessage="Advance problem types"
+      defaultMessage="Advanced problem types"
       description="Button label for advance problem types option"
       id="authoring.problemEditor.problemSelect.advanceButton.label"
     />
@@ -199,43 +214,48 @@ exports[`ProblemTypeSelect snapshot SINGLESELECT 1`] = `
   >
     <SelectableBox
       aria-label="checkbox"
+      className="text-primary-500"
       id="multiplechoiceresponse"
       type="radio"
       value="multiplechoiceresponse"
     >
-      Single Select Problem
+      Single select
     </SelectableBox>
     <SelectableBox
       aria-label="checkbox"
+      className="text-primary-500"
       id="choiceresponse"
       type="radio"
       value="choiceresponse"
     >
-      Multi Select Problem
+      Multi-select
     </SelectableBox>
     <SelectableBox
       aria-label="checkbox"
+      className="text-primary-500"
       id="optionresponse"
       type="radio"
       value="optionresponse"
     >
-      Dropdown Problem
+      Dropdown
     </SelectableBox>
     <SelectableBox
       aria-label="checkbox"
+      className="text-primary-500"
       id="numericalresponse"
       type="radio"
       value="numericalresponse"
     >
-      Numeric Response Problem
+      Numerical input
     </SelectableBox>
     <SelectableBox
       aria-label="checkbox"
+      className="text-primary-500"
       id="stringresponse"
       type="radio"
       value="stringresponse"
     >
-      Text Input Problem
+      Text input
     </SelectableBox>
   </SelectableBox.Set>
   <Button
@@ -244,7 +264,7 @@ exports[`ProblemTypeSelect snapshot SINGLESELECT 1`] = `
     variant="link"
   >
     <FormattedMessage
-      defaultMessage="Advance problem types"
+      defaultMessage="Advanced problem types"
       description="Button label for advance problem types option"
       id="authoring.problemEditor.problemSelect.advanceButton.label"
     />
@@ -262,43 +282,48 @@ exports[`ProblemTypeSelect snapshot TEXTINPUT 1`] = `
   >
     <SelectableBox
       aria-label="checkbox"
+      className="text-primary-500"
       id="multiplechoiceresponse"
       type="radio"
       value="multiplechoiceresponse"
     >
-      Single Select Problem
+      Single select
     </SelectableBox>
     <SelectableBox
       aria-label="checkbox"
+      className="text-primary-500"
       id="choiceresponse"
       type="radio"
       value="choiceresponse"
     >
-      Multi Select Problem
+      Multi-select
     </SelectableBox>
     <SelectableBox
       aria-label="checkbox"
+      className="text-primary-500"
       id="optionresponse"
       type="radio"
       value="optionresponse"
     >
-      Dropdown Problem
+      Dropdown
     </SelectableBox>
     <SelectableBox
       aria-label="checkbox"
+      className="text-primary-500"
       id="numericalresponse"
       type="radio"
       value="numericalresponse"
     >
-      Numeric Response Problem
+      Numerical input
     </SelectableBox>
     <SelectableBox
       aria-label="checkbox"
+      className="text-primary-500"
       id="stringresponse"
       type="radio"
       value="stringresponse"
     >
-      Text Input Problem
+      Text input
     </SelectableBox>
   </SelectableBox.Set>
   <Button
@@ -307,7 +332,7 @@ exports[`ProblemTypeSelect snapshot TEXTINPUT 1`] = `
     variant="link"
   >
     <FormattedMessage
-      defaultMessage="Advance problem types"
+      defaultMessage="Advanced problem types"
       description="Button label for advance problem types option"
       id="authoring.problemEditor.problemSelect.advanceButton.label"
     />
diff --git a/src/editors/containers/ProblemEditor/components/SelectTypeModal/content/messages.js b/src/editors/containers/ProblemEditor/components/SelectTypeModal/content/messages.js
index dae097bb7..9d220f1a1 100644
--- a/src/editors/containers/ProblemEditor/components/SelectTypeModal/content/messages.js
+++ b/src/editors/containers/ProblemEditor/components/SelectTypeModal/content/messages.js
@@ -1,7 +1,7 @@
 export const messages = {
   advanceProblemButtonLabel: {
     id: 'authoring.problemEditor.problemSelect.advanceButton.label',
-    defaultMessage: 'Advance problem types',
+    defaultMessage: 'Advanced problem types',
     description: 'Button label for advance problem types option',
   },
   advanceMenuTitle: {
@@ -39,7 +39,7 @@ export const messages = {
   },
   previewTitle: {
     id: 'authoring.problemEditor.preview.title',
-    defaultMessage: '{previewTitle}',
+    defaultMessage: '{previewTitle} problem',
     description: 'Title for the problem preview column',
   },
   previewAltText: {
@@ -61,8 +61,13 @@ export const messages = {
   },
   learnMoreButtonLabel: {
     id: 'authoring.problemEditor.learnMoreButtonLabel.label',
-    defaultMessage: 'Learn More',
-    description: 'Label for Learn More button',
+    defaultMessage: 'Learn more',
+    description: 'Label for Learn more button',
+  },
+  learnMoreAdvancedButtonLabel: {
+    id: 'authoring.problemEditor.advanceProblem.learnMoreButtonLabel.label',
+    defaultMessage: 'Learn more about advanced problem types',
+    description: 'Label for Learn more about advanced problem types button',
   },
 };
 
diff --git a/src/editors/containers/ProblemEditor/components/SelectTypeModal/index.jsx b/src/editors/containers/ProblemEditor/components/SelectTypeModal/index.jsx
index 49d2ca7b7..62fe35081 100644
--- a/src/editors/containers/ProblemEditor/components/SelectTypeModal/index.jsx
+++ b/src/editors/containers/ProblemEditor/components/SelectTypeModal/index.jsx
@@ -17,7 +17,7 @@ export const SelectTypeModal = ({
 
   return (
     <SelectTypeWrapper onClose={onClose} selected={selected}>
-      <Row className="justify-content-center align-items-center m-4">
+      <Row className="justify-content-center align-items-stretch m-4">
         {(!Object.values(AdvanceProblemKeys).includes(selected)) ? (
           <>
             <Col>
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 53fdb4043..cc8d85d93 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
@@ -14,7 +14,9 @@ exports[`DurationWidget render snapshots: renders as expected with default props
   <Form.Row
     className="mt-4.5"
   >
-    <Form.Group>
+    <Form.Group
+      as="Col"
+    >
       <Form.Control
         floatingLabel="Start time"
         onBlur={[Function]}
@@ -30,7 +32,9 @@ exports[`DurationWidget render snapshots: renders as expected with default props
         />
       </Form.Control.Feedback>
     </Form.Group>
-    <Form.Group>
+    <Form.Group
+      as="Col"
+    >
       <Form.Control
         floatingLabel="Stop time"
         onBlur={[Function]}
diff --git a/src/editors/data/constants/problem.js b/src/editors/data/constants/problem.js
index 000b4607c..2348f83bf 100644
--- a/src/editors/data/constants/problem.js
+++ b/src/editors/data/constants/problem.js
@@ -18,7 +18,7 @@ export const ProblemTypeKeys = StrictDict({
 
 export const ProblemTypes = StrictDict({
   [ProblemTypeKeys.SINGLESELECT]: {
-    title: 'Single Select Problem',
+    title: 'Single select',
     preview: singleSelect,
     description: 'Specify one correct answer from a list of possible options',
     helpLink: 'https://edx.readthedocs.io/projects/edx-partner-course-staff/en/latest/exercises_tools/multiple_choice.html',
@@ -28,7 +28,7 @@ export const ProblemTypes = StrictDict({
 
   },
   [ProblemTypeKeys.MULTISELECT]: {
-    title: 'Multi Select Problem',
+    title: 'Multi-select',
     preview: multiSelect,
     description: 'Specify one or more correct answers from a list of possible options.',
     helpLink: 'https://edx.readthedocs.io/projects/edx-partner-course-staff/en/latest/exercises_tools/checkbox.html',
@@ -37,7 +37,7 @@ export const ProblemTypes = StrictDict({
     template: basicOlxTemplates.multiSelect,
   },
   [ProblemTypeKeys.DROPDOWN]: {
-    title: 'Dropdown Problem',
+    title: 'Dropdown',
     preview: dropdown,
     description: 'Specify one correct answer from a list of possible options, selected in a dropdown menu.',
     helpLink: 'https://edx.readthedocs.io/projects/edx-partner-course-staff/en/latest/exercises_tools/dropdown.html',
@@ -46,7 +46,7 @@ export const ProblemTypes = StrictDict({
     template: basicOlxTemplates.dropdown,
   },
   [ProblemTypeKeys.NUMERIC]: {
-    title: 'Numeric Response Problem',
+    title: 'Numerical input',
     preview: numericalInput,
     description: 'Specify one or more correct numeric answers, submitted in a response field.',
     helpLink: 'https://edx.readthedocs.io/projects/edx-partner-course-staff/en/latest/exercises_tools/numerical_input.html',
@@ -55,7 +55,7 @@ export const ProblemTypes = StrictDict({
     template: basicOlxTemplates.numeric,
   },
   [ProblemTypeKeys.TEXTINPUT]: {
-    title: 'Text Input Problem',
+    title: 'Text input',
     preview: textInput,
     description: 'Specify one or more correct text answers, including numbers and special characters, submitted in a response field.',
     helpLink: 'https://edx.readthedocs.io/projects/edx-partner-course-staff/en/latest/exercises_tools/text_input.html',
diff --git a/src/setupTest.js b/src/setupTest.js
index cc8c8f7d3..93f427002 100644
--- a/src/setupTest.js
+++ b/src/setupTest.js
@@ -80,6 +80,7 @@ jest.mock('@edx/paragon', () => jest.requireActual('testUtils').mockNestedCompon
     Footer: 'Card.Footer',
     Body: 'Card.Body',
   },
+  Col: 'Col',
   Container: 'Container',
   Dropdown: {
     Item: 'Dropdown.Item',