diff --git a/.env b/.env
index 2e9264c07..cc62dcbca 100644
--- a/.env
+++ b/.env
@@ -23,6 +23,7 @@ PUBLISHER_BASE_URL=''
 REFRESH_ACCESS_TOKEN_ENDPOINT=''
 SEGMENT_KEY=''
 SITE_NAME=''
+STUDIO_SHORT_NAME='Studio'
 SUPPORT_EMAIL=''
 SUPPORT_URL=''
 USER_INFO_COOKIE_NAME=''
@@ -30,11 +31,8 @@ ENABLE_ACCESSIBILITY_PAGE=false
 ENABLE_PROGRESS_GRAPH_SETTINGS=false
 ENABLE_TEAM_TYPE_SETTING=false
 ENABLE_NEW_EDITOR_PAGES=true
-ENABLE_NEW_HOME_PAGE = false
 ENABLE_NEW_COURSE_OUTLINE_PAGE = false
 ENABLE_NEW_VIDEO_UPLOAD_PAGE = false
-ENABLE_NEW_GRADING_PAGE = false
-ENABLE_NEW_COURSE_TEAM_PAGE = false
 ENABLE_UNIT_PAGE = false
 ENABLE_VIDEO_UPLOAD_PAGE_LINK_IN_CONTENT_DROPDOWN = false
 BBB_LEARN_MORE_URL=''
diff --git a/.env.development b/.env.development
index 4707975eb..79af5244a 100644
--- a/.env.development
+++ b/.env.development
@@ -25,6 +25,7 @@ REFRESH_ACCESS_TOKEN_ENDPOINT='http://localhost:18000/login_refresh'
 SEGMENT_KEY=null
 SITE_NAME='Your Plaform Name Here'
 STUDIO_BASE_URL='http://localhost:18010'
+STUDIO_SHORT_NAME='Studio'
 SUPPORT_EMAIL=
 SUPPORT_URL='https://support.edx.org'
 USER_INFO_COOKIE_NAME='edx-user-info'
@@ -34,8 +35,6 @@ ENABLE_TEAM_TYPE_SETTING=false
 ENABLE_NEW_EDITOR_PAGES=true
 ENABLE_NEW_COURSE_OUTLINE_PAGE = false
 ENABLE_NEW_VIDEO_UPLOAD_PAGE = false
-ENABLE_NEW_GRADING_PAGE = false
-ENABLE_NEW_COURSE_TEAM_PAGE = false
 ENABLE_UNIT_PAGE = false
 ENABLE_VIDEO_UPLOAD_PAGE_LINK_IN_CONTENT_DROPDOWN = false
 BBB_LEARN_MORE_URL=''
diff --git a/.env.test b/.env.test
index ecb87d55e..4dfdcfece 100644
--- a/.env.test
+++ b/.env.test
@@ -22,17 +22,15 @@ REFRESH_ACCESS_TOKEN_ENDPOINT='http://localhost:18000/login_refresh'
 SEGMENT_KEY=null
 SITE_NAME='edX'
 STUDIO_BASE_URL='http://localhost:18010'
+STUDIO_SHORT_NAME='Studio'
 SUPPORT_EMAIL='support@example.com'
 SUPPORT_URL='https://support.edx.org'
 USER_INFO_COOKIE_NAME='edx-user-info'
 ENABLE_PROGRESS_GRAPH_SETTINGS=false
 ENABLE_TEAM_TYPE_SETTING=false
 ENABLE_NEW_EDITOR_PAGES=true
-ENABLE_NEW_HOME_PAGE = false
 ENABLE_NEW_COURSE_OUTLINE_PAGE = true
 ENABLE_NEW_VIDEO_UPLOAD_PAGE = true
-ENABLE_NEW_GRADING_PAGE = true
-ENABLE_NEW_COURSE_TEAM_PAGE = true
 ENABLE_UNIT_PAGE = true
 ENABLE_VIDEO_UPLOAD_PAGE_LINK_IN_CONTENT_DROPDOWN = true
 BBB_LEARN_MORE_URL=''
diff --git a/src/export-page/CourseExportPage.jsx b/src/export-page/CourseExportPage.jsx
index 9d3d9e698..55ae67064 100644
--- a/src/export-page/CourseExportPage.jsx
+++ b/src/export-page/CourseExportPage.jsx
@@ -59,7 +59,7 @@ const CourseExportPage = ({ intl, courseId }) => {
           })}
         </title>
       </Helmet>
-      <Container size="xl" className="m-4 export">
+      <Container size="xl" className="mt-4 px-4 export">
         <section className="setting-items mb-4">
           <Layout
             lg={[{ span: 9 }, { span: 3 }]}
@@ -74,8 +74,8 @@ const CourseExportPage = ({ intl, courseId }) => {
                   title={intl.formatMessage(messages.headingTitle)}
                   subtitle={intl.formatMessage(messages.headingSubtitle)}
                 />
-                <p>{intl.formatMessage(messages.description1, { studioShortName: getConfig().STUDIO_SHORT_NAME })}</p>
-                <p>{intl.formatMessage(messages.description2)}</p>
+                <p className="small">{intl.formatMessage(messages.description1, { studioShortName: getConfig().STUDIO_SHORT_NAME })}</p>
+                <p className="small">{intl.formatMessage(messages.description2)}</p>
                 <Card>
                   <Card.Header
                     className="h3 px-3 text-black mb-4"
diff --git a/src/export-page/CourseExportPage.scss b/src/export-page/CourseExportPage.scss
index a4db894a2..f45d7c600 100644
--- a/src/export-page/CourseExportPage.scss
+++ b/src/export-page/CourseExportPage.scss
@@ -1,6 +1,5 @@
 @import "./export-stepper/ExportStepper";
 @import "./export-footer/ExportFooter";
-@import "./export-sidebar/ExportSidebar";
 
 .export {
   .help-sidebar {
diff --git a/src/export-page/export-footer/ExportFooter.jsx b/src/export-page/export-footer/ExportFooter.jsx
index 58b5d0e5b..7709709b5 100644
--- a/src/export-page/export-footer/ExportFooter.jsx
+++ b/src/export-page/export-footer/ExportFooter.jsx
@@ -8,13 +8,13 @@ import { Layout } from '@edx/paragon';
 import messages from './messages';
 
 const ExportFooter = ({ intl }) => (
-  <footer className="mt-4">
+  <footer className="mt-4 small">
     <Layout
-      lg={[{ span: 6 }, { span: 6 }]}
-      md={[{ span: 6 }, { span: 6 }]}
-      sm={[{ span: 6 }, { span: 6 }]}
-      xs={[{ span: 6 }, { span: 6 }]}
-      xl={[{ span: 6 }, { span: 6 }]}
+      lg={[{ span: 5 }, { span: 2 }, { span: 5 }]}
+      md={[{ span: 5 }, { span: 2 }, { span: 5 }]}
+      sm={[{ span: 5 }, { span: 2 }, { span: 5 }]}
+      xs={[{ span: 5 }, { span: 2 }, { span: 5 }]}
+      xl={[{ span: 5 }, { span: 2 }, { span: 5 }]}
     >
       <Layout.Element>
         <h4>{intl.formatMessage(messages.exportedDataTitle)}</h4>
@@ -28,6 +28,7 @@ const ExportFooter = ({ intl }) => (
           <li>{intl.formatMessage(messages.exportedDataItem7)}</li>
         </ul>
       </Layout.Element>
+      <Layout.Element />
       <Layout.Element>
         <h4>{intl.formatMessage(messages.notExportedDataTitle)}</h4>
         <ul className="export-footer-list">
diff --git a/src/export-page/export-sidebar/ExportSidebar.jsx b/src/export-page/export-sidebar/ExportSidebar.jsx
index 90cfc3326..6daf541e0 100644
--- a/src/export-page/export-sidebar/ExportSidebar.jsx
+++ b/src/export-page/export-sidebar/ExportSidebar.jsx
@@ -4,7 +4,7 @@ import {
   intlShape,
 } from '@edx/frontend-platform/i18n';
 import PropTypes from 'prop-types';
-import { Button } from '@edx/paragon';
+import { Hyperlink } from '@edx/paragon';
 import { getConfig } from '@edx/frontend-platform';
 
 import { HelpSidebar } from '../../generic/help-sidebar';
@@ -20,7 +20,7 @@ const ExportSidebar = ({ intl, courseId }) => {
       <hr />
       <h4 className="help-sidebar-about-title">{intl.formatMessage(messages.exportedContent)}</h4>
       <p className="help-sidebar-about-descriptions">{intl.formatMessage(messages.exportedContentHeading)}</p>
-      <ul className="export-sidebar-list">
+      <ul className="px-3">
         <li className="help-sidebar-about-descriptions">{intl.formatMessage(messages.content1)}</li>
         <li className="help-sidebar-about-descriptions">{intl.formatMessage(messages.content2)}</li>
         <li className="help-sidebar-about-descriptions">{intl.formatMessage(messages.content3)}</li>
@@ -28,7 +28,7 @@ const ExportSidebar = ({ intl, courseId }) => {
         <li className="help-sidebar-about-descriptions">{intl.formatMessage(messages.content5)}</li>
       </ul>
       <p className="help-sidebar-about-descriptions">{intl.formatMessage(messages.notExportedContent)}</p>
-      <ul className="export-sidebar-list">
+      <ul className="px-3">
         <li className="help-sidebar-about-descriptions">{intl.formatMessage(messages.content6)}</li>
         <li className="help-sidebar-about-descriptions">{intl.formatMessage(messages.content7)}</li>
       </ul>
@@ -36,7 +36,7 @@ const ExportSidebar = ({ intl, courseId }) => {
       <h4 className="help-sidebar-about-title">{intl.formatMessage(messages.openDownloadFile)}</h4>
       <p className="help-sidebar-about-descriptions">{intl.formatMessage(messages.openDownloadFileDescription)}</p>
       <hr />
-      <Button href={exportLearnMoreUrl} target="_blank" variant="outline-primary">{intl.formatMessage(messages.learnMoreButtonTitle)}</Button>
+      <Hyperlink className="small" href={exportLearnMoreUrl} target="_blank" variant="outline-primary">{intl.formatMessage(messages.learnMoreButtonTitle)}</Hyperlink>
     </HelpSidebar>
   );
 };
diff --git a/src/export-page/export-sidebar/ExportSidebar.scss b/src/export-page/export-sidebar/ExportSidebar.scss
deleted file mode 100644
index 2247058d4..000000000
--- a/src/export-page/export-sidebar/ExportSidebar.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-.export-sidebar-list {
-  list-style: none;
-  padding-left: 0;
-}
diff --git a/src/export-page/export-stepper/ExportStepper.jsx b/src/export-page/export-stepper/ExportStepper.jsx
index 7a693d8b7..37010424d 100644
--- a/src/export-page/export-stepper/ExportStepper.jsx
+++ b/src/export-page/export-stepper/ExportStepper.jsx
@@ -1,5 +1,6 @@
 import React, { useEffect } from 'react';
 import {
+  FormattedDate,
   injectIntl,
   intlShape,
 } from '@edx/frontend-platform/i18n';
@@ -14,7 +15,6 @@ import {
 } from '../data/selectors';
 import { fetchExportStatus } from '../data/thunks';
 import { EXPORT_STAGES } from '../data/constants';
-import { getFormattedSuccessDate } from '../utils';
 import { RequestStatus } from '../../data/constants';
 import messages from './messages';
 
@@ -41,10 +41,26 @@ const ExportStepper = ({ intl, courseId }) => {
   });
 
   let successTitle = intl.formatMessage(messages.stepperSuccessTitle);
-  const formattedSuccessDate = getFormattedSuccessDate(successDate);
-  if (formattedSuccessDate && currentStage === EXPORT_STAGES.SUCCESS) {
-    successTitle += formattedSuccessDate;
+  const localizedSuccessDate = successDate ? (
+    <FormattedDate
+      value={successDate}
+      year="2-digit"
+      month="2-digit"
+      day="2-digit"
+      hour="numeric"
+      minute="numeric"
+    />
+  ) : null;
+
+  if (localizedSuccessDate && currentStage === EXPORT_STAGES.SUCCESS) {
+    const successWithDate = (
+      <>
+        {successTitle} ({localizedSuccessDate})
+      </>
+    );
+    successTitle = successWithDate;
   }
+
   const steps = [
     {
       title: intl.formatMessage(messages.stepperPreparingTitle),
@@ -68,7 +84,6 @@ const ExportStepper = ({ intl, courseId }) => {
   return (
     <div>
       <h3 className="mt-4">{intl.formatMessage(messages.stepperHeaderTitle)}</h3>
-      <hr />
       <CourseStepper
         courseId={courseId}
         steps={steps}
@@ -76,7 +91,7 @@ const ExportStepper = ({ intl, courseId }) => {
         errorMessage={errorMessage}
         hasError={!!errorMessage}
       />
-      {downloadPath && currentStage === EXPORT_STAGES.SUCCESS && <Button href={`${getConfig().STUDIO_BASE_URL}${downloadPath}`}>{intl.formatMessage(messages.downloadCourseButtonTitle)}</Button>}
+      {downloadPath && currentStage === EXPORT_STAGES.SUCCESS && <Button className="ml-5.5 mt-n2.5" href={`${getConfig().STUDIO_BASE_URL}${downloadPath}`}>{intl.formatMessage(messages.downloadCourseButtonTitle)}</Button>}
     </div>
   );
 };
diff --git a/src/generic/course-stepper/index.jsx b/src/generic/course-stepper/index.jsx
index 01a4c4e22..e984a71e3 100644
--- a/src/generic/course-stepper/index.jsx
+++ b/src/generic/course-stepper/index.jsx
@@ -2,9 +2,9 @@ import React from 'react';
 import { injectIntl } from '@edx/frontend-platform/i18n';
 import {
   Settings as SettingsIcon,
-  CheckBoxOutlineBlank as SuccessIcon,
-  LibraryAddCheck as SuccessDoneIcon,
+  ManageHistory as SuccessIcon,
   Warning as ErrorIcon,
+  CheckCircle,
 } from '@edx/paragon/icons';
 import { Icon } from '@edx/paragon';
 import PropTypes from 'prop-types';
@@ -23,8 +23,12 @@ const CourseStepper = ({
     const isLastStep = index === lastStepIndex;
     const isErrorStep = isActiveStep && hasError;
     const isLastStepDone = isLastStep && isActiveStep;
+    const completedStep = index < activeKey && !hasError;
 
     const getStepIcon = () => {
+      if (completedStep) {
+        return CheckCircle;
+      }
       if (hasError && isActiveStep) {
         return ErrorIcon;
       }
@@ -32,7 +36,7 @@ const CourseStepper = ({
         return SuccessIcon;
       }
       if (isLastStepDone) {
-        return SuccessDoneIcon;
+        return CheckCircle;
       }
 
       return SettingsIcon;
diff --git a/src/generic/modal-error/ModalError.jsx b/src/generic/modal-error/ModalError.jsx
index b28d3a634..132bbe165 100644
--- a/src/generic/modal-error/ModalError.jsx
+++ b/src/generic/modal-error/ModalError.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { ActionRow, AlertModal, Button } from '@edx/paragon';
+import { Error } from '@edx/paragon/icons';
 
 const ModalError = ({
   isOpen, title, message, handleCancel, handleAction, cancelButtonText, actionButtonText,
@@ -9,6 +10,7 @@ const ModalError = ({
     title={title}
     isOpen={isOpen}
     variant="danger"
+    icon={Error}
     footerNode={(
       <ActionRow>
         <Button variant="tertiary" onClick={handleCancel}>{cancelButtonText}</Button>
diff --git a/src/generic/sub-header/SubHeader.jsx b/src/generic/sub-header/SubHeader.jsx
index 77d149ec4..279179f35 100644
--- a/src/generic/sub-header/SubHeader.jsx
+++ b/src/generic/sub-header/SubHeader.jsx
@@ -5,7 +5,7 @@ import { ActionRow } from '@edx/paragon';
 const SubHeader = ({
   title, subtitle, contentTitle, description, instruction, headerActions,
 }) => (
-  <>
+  <div className="border-bottom border-light-400 mb-3">
     <header className="sub-header">
       <h2 className="sub-header-title">
         <small className="sub-header-title-subtitle">{subtitle}</small>
@@ -17,14 +17,16 @@ const SubHeader = ({
         </ActionRow>
       )}
     </header>
-    <header className="sub-header-content">
-      <h2 className="sub-header-content-title">{contentTitle}</h2>
-      <span className="small text-gray-700">{description}</span>
-    </header>
+    {contentTitle && (
+      <header className="sub-header-content">
+        <h2 className="sub-header-content-title">{contentTitle}</h2>
+        <span className="small text-gray-700">{description}</span>
+      </header>
+    )}
     {instruction && (
       <p className="sub-header-instructions mb-4">{instruction}</p>
     )}
-  </>
+  </div>
 );
 SubHeader.defaultProps = {
   instruction: '',
diff --git a/src/generic/sub-header/SubHeader.scss b/src/generic/sub-header/SubHeader.scss
index f1c5ff267..693d5603b 100644
--- a/src/generic/sub-header/SubHeader.scss
+++ b/src/generic/sub-header/SubHeader.scss
@@ -9,7 +9,6 @@
 
 .sub-header-title {
   font: normal $font-weight-bold 2rem/2.25rem $font-family-base;
-  margin-bottom: 1.75rem;
   color: $black;
 
   .sub-header-title-subtitle {
@@ -34,7 +33,6 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  border-bottom: $border-width solid $light-400;
-  padding-bottom: 12px;
+  margin-top: 1.5rem;
   margin-bottom: 12px;
 }
diff --git a/src/import-page/CourseImportPage.jsx b/src/import-page/CourseImportPage.jsx
index 997b5b975..5154f6a5c 100644
--- a/src/import-page/CourseImportPage.jsx
+++ b/src/import-page/CourseImportPage.jsx
@@ -54,7 +54,7 @@ const CourseImportPage = ({ intl, courseId }) => {
           })}
         </title>
       </Helmet>
-      <Container size="xl" className="m-4 import">
+      <Container size="xl" className="mt-4 px-4 import">
         <section className="setting-items mb-4">
           <Layout
             lg={[{ span: 9 }, { span: 3 }]}
@@ -69,9 +69,9 @@ const CourseImportPage = ({ intl, courseId }) => {
                   title={intl.formatMessage(messages.headingTitle)}
                   subtitle={intl.formatMessage(messages.headingSubtitle)}
                 />
-                <p>{intl.formatMessage(messages.description1)}</p>
-                <p>{intl.formatMessage(messages.description2)}</p>
-                <p>{intl.formatMessage(messages.description3)}</p>
+                <p className="small">{intl.formatMessage(messages.description1)}</p>
+                <p className="small">{intl.formatMessage(messages.description2)}</p>
+                <p className="small">{intl.formatMessage(messages.description3)}</p>
                 <FileSection courseId={courseId} />
                 {importTriggered && <ImportStepper courseId={courseId} />}
               </article>
diff --git a/src/import-page/CourseImportPage.scss b/src/import-page/CourseImportPage.scss
index 35ddbfba2..daf16e86a 100644
--- a/src/import-page/CourseImportPage.scss
+++ b/src/import-page/CourseImportPage.scss
@@ -1,5 +1,3 @@
-@import "./import-sidebar/ImportSidebar";
-
 .import {
   .help-sidebar {
     margin-top: 7.188rem;
diff --git a/src/import-page/file-section/FileSection.jsx b/src/import-page/file-section/FileSection.jsx
index 9f16502db..b601268af 100644
--- a/src/import-page/file-section/FileSection.jsx
+++ b/src/import-page/file-section/FileSection.jsx
@@ -28,8 +28,9 @@ const FileSection = ({ intl, courseId }) => {
       <Card.Header
         className="h3 px-3 text-black"
         title={intl.formatMessage(messages.headingTitle)}
+        subtitle={fileName && intl.formatMessage(messages.fileChosen, { fileName })}
       />
-      <Card.Section className="px-3 py-1">
+      <Card.Section className="px-3 pt-2 pb-4">
         {isShowedDropzone
           && (
             <Dropzone
@@ -47,11 +48,6 @@ const FileSection = ({ intl, courseId }) => {
             />
           )}
       </Card.Section>
-      {fileName && (
-        <div className="px-3 py-1">
-          {intl.formatMessage(messages.fileChosen, { fileName })}
-        </div>
-      )}
     </Card>
   );
 };
diff --git a/src/import-page/import-sidebar/ImportSidebar.jsx b/src/import-page/import-sidebar/ImportSidebar.jsx
index 8287b3d60..3aba183d7 100644
--- a/src/import-page/import-sidebar/ImportSidebar.jsx
+++ b/src/import-page/import-sidebar/ImportSidebar.jsx
@@ -4,7 +4,7 @@ import {
   intlShape,
 } from '@edx/frontend-platform/i18n';
 import PropTypes from 'prop-types';
-import { Button } from '@edx/paragon';
+import { Hyperlink } from '@edx/paragon';
 import { getConfig } from '@edx/frontend-platform';
 
 import { HelpSidebar } from '../../generic/help-sidebar';
@@ -22,7 +22,7 @@ const ImportSidebar = ({ intl, courseId }) => {
       <hr />
       <h4 className="help-sidebar-about-title">{intl.formatMessage(messages.importedContent)}</h4>
       <p className="help-sidebar-about-descriptions">{intl.formatMessage(messages.importedContentHeading)}</p>
-      <ul className="import-sidebar-list">
+      <ul className="px-3">
         <li className="help-sidebar-about-descriptions">{intl.formatMessage(messages.content1)}</li>
         <li className="help-sidebar-about-descriptions">{intl.formatMessage(messages.content2)}</li>
         <li className="help-sidebar-about-descriptions">{intl.formatMessage(messages.content3)}</li>
@@ -30,7 +30,7 @@ const ImportSidebar = ({ intl, courseId }) => {
         <li className="help-sidebar-about-descriptions">{intl.formatMessage(messages.content5)}</li>
       </ul>
       <p className="help-sidebar-about-descriptions">{intl.formatMessage(messages.notImportedContent)}</p>
-      <ul className="import-sidebar-list">
+      <ul className="px-3">
         <li className="help-sidebar-about-descriptions">{intl.formatMessage(messages.content6)}</li>
         <li className="help-sidebar-about-descriptions">{intl.formatMessage(messages.content7)}</li>
       </ul>
@@ -38,13 +38,14 @@ const ImportSidebar = ({ intl, courseId }) => {
       <h4 className="help-sidebar-about-title">{intl.formatMessage(messages.warningTitle)}</h4>
       <p className="help-sidebar-about-descriptions">{intl.formatMessage(messages.warningDescription)}</p>
       <hr />
-      <Button
+      <Hyperlink
+        className="small"
         href={importLearnMoreUrl}
         target="_blank"
         variant="outline-primary"
       >
         {intl.formatMessage(messages.learnMoreButtonTitle)}
-      </Button>
+      </Hyperlink>
     </HelpSidebar>
   );
 };
diff --git a/src/import-page/import-sidebar/ImportSidebar.scss b/src/import-page/import-sidebar/ImportSidebar.scss
deleted file mode 100644
index 7ac034418..000000000
--- a/src/import-page/import-sidebar/ImportSidebar.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-.import-sidebar-list {
-  list-style: none;
-  padding-left: 0;
-}
diff --git a/src/import-page/import-stepper/ImportStepper.jsx b/src/import-page/import-stepper/ImportStepper.jsx
index e160ec625..72755d825 100644
--- a/src/import-page/import-stepper/ImportStepper.jsx
+++ b/src/import-page/import-stepper/ImportStepper.jsx
@@ -1,5 +1,6 @@
 import React, { useEffect } from 'react';
 import {
+  FormattedDate,
   injectIntl,
   intlShape,
 } from '@edx/frontend-platform/i18n';
@@ -8,7 +9,6 @@ import { useDispatch, useSelector } from 'react-redux';
 import { Button } from '@edx/paragon';
 import { getConfig } from '@edx/frontend-platform';
 
-import { getFormattedSuccessDate } from '../../export-page/utils';
 import { RequestStatus } from '../../data/constants';
 import CourseStepper from '../../generic/course-stepper';
 import { IMPORT_STAGES } from '../data/constants';
@@ -45,9 +45,23 @@ const ImportStepper = ({ intl, courseId }) => {
   });
 
   let successTitle = intl.formatMessage(messages.stepperSuccessTitle);
-  const formattedSuccessDate = getFormattedSuccessDate(successDate);
-  if (currentStage === IMPORT_STAGES.SUCCESS && formattedSuccessDate) {
-    successTitle += formattedSuccessDate;
+  const localizedSuccessDate = successDate ? (
+    <FormattedDate
+      value={successDate}
+      year="2-digit"
+      month="2-digit"
+      day="2-digit"
+      hour="numeric"
+      minute="numeric"
+    />
+  ) : null;
+  if (localizedSuccessDate && currentStage === IMPORT_STAGES.SUCCESS) {
+    const successWithDate = (
+      <>
+        {successTitle} ({localizedSuccessDate})
+      </>
+    );
+    successTitle = successWithDate;
   }
 
   const handleRedirectCourseOutline = () => window.location.replace(`${getConfig().STUDIO_BASE_URL}/course/${courseId}`);
@@ -79,7 +93,6 @@ const ImportStepper = ({ intl, courseId }) => {
   return (
     <section>
       <h3 className="mt-4">{intl.formatMessage(messages.stepperHeaderTitle)}</h3>
-      <hr />
       <CourseStepper
         courseId={courseId}
         percent={progress}
@@ -89,7 +102,7 @@ const ImportStepper = ({ intl, courseId }) => {
         errorMessage={formattedErrorMessage}
       />
       {currentStage === IMPORT_STAGES.SUCCESS && (
-        <Button onClick={handleRedirectCourseOutline}>{intl.formatMessage(messages.viewOutlineButton)}</Button>
+        <Button className="ml-5.5 mt-n2.5" onClick={handleRedirectCourseOutline}>{intl.formatMessage(messages.viewOutlineButton)}</Button>
       )}
     </section>
   );
diff --git a/src/index.jsx b/src/index.jsx
index c07cd8db3..ccf2bcc29 100755
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -90,6 +90,8 @@ initialize({
         ENABLE_PROGRESS_GRAPH_SETTINGS: process.env.ENABLE_PROGRESS_GRAPH_SETTINGS || 'false',
         ENABLE_TEAM_TYPE_SETTING: process.env.ENABLE_TEAM_TYPE_SETTING === 'true',
         BBB_LEARN_MORE_URL: process.env.BBB_LEARN_MORE_URL || '',
+        STUDIO_BASE_URL: process.env.STUDIO_BASE_URL || null,
+        STUDIO_SHORT_NAME: process.env.STUDIO_SHORT_NAME || null,
       }, 'CourseAuthoringConfig');
     },
   },