diff --git a/src/components/catalogCourseInfoModal/CatalogCourseInfoModal.jsx b/src/components/catalogCourseInfoModal/CatalogCourseInfoModal.jsx
index 3d29dacc..41e53459 100644
--- a/src/components/catalogCourseInfoModal/CatalogCourseInfoModal.jsx
+++ b/src/components/catalogCourseInfoModal/CatalogCourseInfoModal.jsx
@@ -14,6 +14,12 @@ import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { Launch } from '@edx/paragon/icons';
 import messages from './CatalogCourseInfoModal.messages';
 
+function formatDate(start, end) {
+  const startDate = (new Date(start)).toLocaleDateString();
+  const endDate = (new Date(end)).toLocaleDateString();
+  return `${startDate} - ${endDate}`;
+}
+
 const CatalogCourseInfoModal = ({
   intl,
   isOpen,
@@ -26,7 +32,10 @@ const CatalogCourseInfoModal = ({
   partnerLogoImageUrl,
   bannerImageUrl,
   marketingUrl,
+  startDate,
+  endDate,
 }) => (
+
   <>
     <div>
       <ModalDialog
@@ -38,55 +47,56 @@ const CatalogCourseInfoModal = ({
         isFullscreenOnMobile
         className="course-info-modal"
       >
-        <ModalDialog.Hero className="course-info-hero">
-          <ModalDialog.Hero.Background backgroundSrc={bannerImageUrl} />
-        </ModalDialog.Hero>
-
-        <ModalDialog.Header className="course-info-modal-header">
-
+        <ModalDialog.Body className="full-body">
+          <ModalDialog.Hero>
+            <ModalDialog.Hero.Background className="course-info-hero" backgroundSrc={bannerImageUrl} />
+          </ModalDialog.Hero>
           <Image className="mr-2 partner-logo-thumbnail" src={partnerLogoImageUrl} rounded />
-
-          <ModalDialog.Title as="h1" className="course-info-title">
-            {courseTitle}
-          </ModalDialog.Title>
-          <ModalDialog.Title as="h6" className="course-info-partner">
-            {courseProvider}
-          </ModalDialog.Title>
-
-          <div className="pricing-data-header">
-            <ModalDialog.Title className="pricing-data-title">
-              {intl.formatMessage(messages['catalogCourseInfoModal.pricingTitle'])}
+          <div className="padded-body">
+            <ModalDialog.Title as="h1" className="course-info-title">
+              {courseTitle}
             </ModalDialog.Title>
-            <ModalDialog.Title className="pricing-data-price">
-              {coursePrice}
+            <ModalDialog.Title as="h6" className="course-info-partner">
+              {courseProvider}
             </ModalDialog.Title>
-          </div>
-        </ModalDialog.Header>
 
-        <ModalDialog.Body>
-          <div className="course-info-associated-catalog-header">
-            <ModalDialog.Title className="associated-catalogs-text">
-              {intl.formatMessage(messages['catalogCourseInfoModal.associatedCatalogsTitle'])}
-            </ModalDialog.Title>
-            <Badge className="padded-catalog" variant="dark">
-              {intl.formatMessage(messages['catalogCourseInfoModal.aLaCarteBadge'])}
-            </Badge>
-            { courseAssociatedCatalogs.includes(process.env.EDX_FOR_BUSINESS_TITLE) && (
-              <Badge className="business-catalog padded-catalog" variant="secondary">
-                {intl.formatMessage(messages['catalogCourseInfoModal.businessBadge'])}
-              </Badge>
-            )}
-            { courseAssociatedCatalogs.includes(process.env.EDX_FOR_ONLINE_EDU_TITLE) && (
-              <Badge className="padded-catalog" variant="light">
-                {intl.formatMessage(messages['catalogCourseInfoModal.educationBadge'])}
+            <div className="pricing-data-header">
+              <ModalDialog.Title className="pricing-data-title">
+                {intl.formatMessage(messages['catalogCourseInfoModal.pricingTitle'])}
+              </ModalDialog.Title>
+              <ModalDialog.Title className="pricing-data-price">
+                {coursePrice}
+              </ModalDialog.Title>
+            </div>
+
+            <div className="course-info-associated-catalog-header">
+              <ModalDialog.Title className="associated-catalogs-text">
+                {intl.formatMessage(messages['catalogCourseInfoModal.associatedCatalogsTitle'])}
+              </ModalDialog.Title>
+              <Badge className="padded-catalog" variant="dark">
+                {intl.formatMessage(messages['catalogCourseInfoModal.aLaCarteBadge'])}
               </Badge>
-            )}
+              { courseAssociatedCatalogs.includes(process.env.EDX_FOR_BUSINESS_TITLE) && (
+                <Badge className="business-catalog padded-catalog" variant="secondary">
+                  {intl.formatMessage(messages['catalogCourseInfoModal.businessBadge'])}
+                </Badge>
+              )}
+              { courseAssociatedCatalogs.includes(process.env.EDX_FOR_ONLINE_EDU_TITLE) && (
+                <Badge className="padded-catalog" variant="light">
+                  {intl.formatMessage(messages['catalogCourseInfoModal.educationBadge'])}
+                </Badge>
+              )}
+            </div>
+            <p className="course-info-description-title">
+              {intl.formatMessage(messages['catalogCourseInfoModal.courseDescriptionTitle'])}
+            </p>
+            <p className="course-info-description-subtitle">
+              {intl.formatMessage(messages['catalogCourseInfoModal.availabilityMessage'])}
+              {formatDate(startDate, endDate)}
+            </p>
+            {/* eslint-disable-next-line react/no-danger */}
+            <div dangerouslySetInnerHTML={{ __html: courseDescription }} />
           </div>
-          <p className="course-info-description-title">
-            {intl.formatMessage(messages['catalogCourseInfoModal.courseDescriptionTitle'])}
-          </p>
-          {/* eslint-disable-next-line react/no-danger */}
-          <div dangerouslySetInnerHTML={{ __html: courseDescription }} />
         </ModalDialog.Body>
 
         <ModalDialog.Footer>
@@ -124,6 +134,8 @@ CatalogCourseInfoModal.defaultProps = {
   partnerLogoImageUrl: '',
   bannerImageUrl: '',
   marketingUrl: '',
+  startDate: '',
+  endDate: '',
   onClose: () => {},
 };
 
@@ -139,6 +151,8 @@ CatalogCourseInfoModal.propTypes = {
   partnerLogoImageUrl: PropTypes.string,
   bannerImageUrl: PropTypes.string,
   marketingUrl: PropTypes.string,
+  startDate: PropTypes.string,
+  endDate: PropTypes.string,
 };
 
 export default injectIntl(CatalogCourseInfoModal);
diff --git a/src/components/catalogCourseInfoModal/CatalogCourseInfoModal.messages.js b/src/components/catalogCourseInfoModal/CatalogCourseInfoModal.messages.js
index f3e20894..37ff1234 100644
--- a/src/components/catalogCourseInfoModal/CatalogCourseInfoModal.messages.js
+++ b/src/components/catalogCourseInfoModal/CatalogCourseInfoModal.messages.js
@@ -26,6 +26,11 @@ const messages = defineMessages({
     defaultMessage: 'A la carte course price',
     description: 'Title text for the course pricing display.',
   },
+  'catalogCourseInfoModal.availabilityMessage': {
+    id: 'catalogCourseInfoModal.availabilityMessage',
+    defaultMessage: 'Availability period: ',
+    description: 'Start and end dates for course term.',
+  },
   'catalogCourseInfoModal.moreInfoButton': {
     id: 'catalogCourseInfoModal.moreInfoButton',
     defaultMessage: 'View course details',
diff --git a/src/components/catalogCourseInfoModal/CatalogCourseInfoModal.test.jsx b/src/components/catalogCourseInfoModal/CatalogCourseInfoModal.test.jsx
index f76e9f49..c939bf9a 100644
--- a/src/components/catalogCourseInfoModal/CatalogCourseInfoModal.test.jsx
+++ b/src/components/catalogCourseInfoModal/CatalogCourseInfoModal.test.jsx
@@ -17,6 +17,8 @@ const defaultProps = {
   courseDescription: descriptionHtml,
   partnerLogoImageUrl: '',
   bannerImageUrl: '',
+  startDate: '2021-09-15T16:00:00Z',
+  endDate: '2022-04-06T16:00:00Z',
   intl: {
     formatMessage: (header) => header.defaultMessage,
     formatDate: () => {},
@@ -49,6 +51,15 @@ describe('Course info modal works as expected', () => {
     expect(screen.queryByText(descriptionText)).toBeInTheDocument();
   });
 
+  test('test dates format correctly', () => {
+    render(
+      <IntlProvider locale="en">
+        <CatalogCourseInfoModal {...defaultProps} />
+      </IntlProvider>,
+    );
+    expect(screen.getByText('Availability period: 9/15/2021 - 4/6/2022')).toBeInTheDocument();
+  });
+
   test('modal is hidden when expected', () => {
     const defaultPropsCopy = {};
     Object.assign(defaultPropsCopy, defaultProps);
diff --git a/src/components/catalogSearchResults/CatalogSearchResults.jsx b/src/components/catalogSearchResults/CatalogSearchResults.jsx
index f900f856..d657e6fc 100644
--- a/src/components/catalogSearchResults/CatalogSearchResults.jsx
+++ b/src/components/catalogSearchResults/CatalogSearchResults.jsx
@@ -94,6 +94,8 @@ export const BaseCatalogSearchResults = ({
   const [bannerImageUrl, setBannerImageUrl] = useState();
   const [associatedCatalogs, setAssociatedCatalogs] = useState();
   const [marketingUrl, setMarketingUrl] = useState();
+  const [startDate, setStartDate] = useState();
+  const [endDate, setEndDate] = useState();
 
   const rowClicked = (row) => {
     const rowPrice = row.original.first_enrollable_paid_seat_price;
@@ -108,6 +110,8 @@ export const BaseCatalogSearchResults = ({
     setDescription(row.original.full_description);
     setBannerImageUrl(row.original.original_image_url);
     setMarketingUrl(row.original.marketing_url);
+    setStartDate(row.original.advertised_course_run.start);
+    setEndDate(row.original.advertised_course_run.end);
     open();
   };
 
@@ -171,6 +175,8 @@ export const BaseCatalogSearchResults = ({
         bannerImageUrl={bannerImageUrl}
         courseAssociatedCatalogs={associatedCatalogs}
         marketingUrl={marketingUrl}
+        startDate={startDate}
+        endDate={endDate}
       />
       <div>
         <DataTable
diff --git a/src/components/catalogs/styles/_enterprise_catalogs.scss b/src/components/catalogs/styles/_enterprise_catalogs.scss
index 864e4667..f43a4486 100644
--- a/src/components/catalogs/styles/_enterprise_catalogs.scss
+++ b/src/components/catalogs/styles/_enterprise_catalogs.scss
@@ -4,6 +4,14 @@
   padding: 0px 16px;
 }
 
+.full-body {
+  padding: 0px !important;
+}
+
+.padded-body {
+  margin: 180px 0 0 24px;
+}
+
 .course-info-title {
   position: relative;
   width: 70% !important;
@@ -27,6 +35,7 @@
 }
 
 .course-info-hero {
+  background-position: center;
   width: 1140px !important;
   height: 300px !important;
 }
@@ -35,7 +44,7 @@
   position: absolute;
   z-index: 1;
   left: 2%;
-  top: -75px;
+  top: 230px;
   width: 15%;
   height: 70%;
   max-height: 90px;
@@ -48,8 +57,8 @@
 
 .pricing-data-header {
   position: absolute;
-  right: 0%;
-  top: 25%;
+  right: 5%;
+  top: 52%;
 }
 
 .pricing-data-title {
@@ -83,6 +92,7 @@
   font-weight: bold;
   font-weight: 700;
   font-size: 22px !important;
+  margin-bottom: 0;
 }
 
 .pgn__modal-close-container {