diff --git a/cms/templates/home_page.html b/cms/templates/home_page.html
index c7b3cb2613..8789f9c93e 100644
--- a/cms/templates/home_page.html
+++ b/cms/templates/home_page.html
@@ -42,56 +42,31 @@ <h3>{{ page.hero_subtitle }}</h3>
   </div>
 {% endif %}
 {% if show_new_featured_carousel %}
-  <div class="featured-product-section-container container">
-    <div class="featured-product-section carousel slide" id="featuredProductCarousel">
-      <div class="featured-product-header">
+  <div class="featured-product-section-container d-flex flex-column container">
+    <div class="featured-product-section d-flex row carousel slide" id="featuredProductCarousel">
+      <div class="featured-product-header d-flex row col-12">
         {% if product_cards_section_title %}
-          <h3 class="featured-product-header-title">{{ product_cards_section_title }}</h3>
+          <h3 class="featured-product-header-title col-8">{{ product_cards_section_title }}</h3>
         {% endif %}
-        <div class="featured-product-arrows">
-          <a href="#featuredProductCarousel" role="button" data-bs-slide="prev">
+        <div class="featured-product-arrows col-4">
+          <a href="#featuredProductCarousel" class="prev" data-bs-slide="prev" onclick="handleNavigationClick('prev');">
             <img class="arrow prev-arrow" src="/static/images/featured-products-left-arrow.svg" alt="Previous Arrow" />
           </a>
-          <a href="#featuredProductCarousel" role="button" data-bs-slide="next">
+          <a href="#featuredProductCarousel" class="next" data-bs-slide="next" onclick="handleNavigationClick('next');">
             <img class="arrow next-arrow" src="/static/images/featured-products-right-arrow.svg" alt="Next Arrow" />
           </a>
         </div>
       </div>
       <div class="featured-product-listing">
-        <div class="carousel-inner" role="listbox">
-          {% for product in products %}
-          <div class="carousel-item{% if forloop.counter == 1 %} active{% endif %} ">
-            <div class="card featured-product-card">
-              <a href="{{ product.url_path }}" class="featured-product-card-link">
-              <div class="featured-product-thumb">
-                <img src="{% feature_img_src product.feature_image %}" alt="" />
-                {% if product.program_type %}
-                  <span class="badge badge-program-type">{{ product.program_type }}</span>
-                {% endif %}
-              </div>
-              <div class="featured-product-info card-body">
-                {% if product.start_date and not product.is_program %}
-                  <p class="date">
-                    Starts {{ product.start_date | date:"F j, Y" }}
-                  </p>
-                {% elif not product.is_program %}
-                  <p class="date">
-                    Start Anytime
-                  </p>
-                {% endif %}
-                <h2 class="featured-product-card-title card-title">
-                    {{ product.title }}
-                </h2>
-              </div>
-              </a>
-            </div>
+        <div class="carousel-inner d-flex" role="listbox">
+            {% for product in products %}
+              {% include "partials/featured_product_card.html" with product=product order=forloop.counter %}
+            {% endfor %}
           </div>
-          {% endfor %}
-        </div>
       </div>
-    <div class="featured-product-navigation">
-      <a role="button" href="/catalog" class="view-catalog-button">View MITx Online Catalog</a>
-    </div>
+      <div class="featured-product-navigation">
+        <a role="button" href="/catalog" class="view-catalog-button">View MITx Online Catalog</a>
+      </div>
     </div>
   </div>
 {% else %}
@@ -151,7 +126,6 @@ <h3>{{ page.video_component_title }}</h3>
         </div>
       </div>
   </div>
-</div>
 {% endif %}
 {% if show_home_page_contact_form %}
   <div class="home-page-contact-row">
@@ -228,19 +202,45 @@ <h3>Connect with us</h3>
 {% endblock %}
 {% block scripts %}
 <script>
-let items = document.querySelectorAll('.carousel .carousel-item')
 
-items.forEach((el) => {
-    const minPerSlide = 4
-    let next = el.nextElementSibling
-    for (var i=1; i<minPerSlide; i++) {
-        if (!next) {
-        	next = items[0]
-      	}
-        let cloneChild = next.cloneNode(true)
-        el.appendChild(cloneChild.children[0])
-        next = next.nextElementSibling
+    let scrollPosition = 0;
+    let numberOfCards = 4;
+
+    function updatePosition () {
+        position = 0;
     }
-})
+
+  function handleNavigationClick(e) {
+      let carouselWidth = $(".carousel-inner")[0].scrollWidth;
+      let cardWidth = ($(".carousel-item").width() + 20);
+      if (window.matchMedia("(max-width: 1199.98px)").matches) {
+        numberOfCards = 3;
+      }
+      else if (window.matchMedia("(max-width: 991.98px)").matches) {
+        numberOfCards = 2;
+      }
+      else if (window.matchMedia("(max-width: 767.98px)").matches) {
+        numberOfCards = 1;
+      }
+      if (e==="next") {
+          if (scrollPosition < carouselWidth - (cardWidth * numberOfCards)) {
+            scrollPosition += cardWidth * numberOfCards;
+            $(".carousel-inner").animate(
+              { scrollLeft: scrollPosition },
+              600
+            );
+          }
+      } else if (e==="prev") {
+          if (scrollPosition > 0) {
+            scrollPosition -= cardWidth * numberOfCards;
+            $(".carousel-inner").animate(
+              { scrollLeft: scrollPosition },
+              600
+            );
+          }
+        }
+      }
+  window.addEventListener("resize", updatePosition);
+
 </script>
 {% endblock %}
diff --git a/frontend/public/scss/home-page/featured-product-cards.scss b/frontend/public/scss/home-page/featured-product-cards.scss
index ec59754576..9ab6608e64 100644
--- a/frontend/public/scss/home-page/featured-product-cards.scss
+++ b/frontend/public/scss/home-page/featured-product-cards.scss
@@ -1,21 +1,37 @@
 // TODO: `featured-product-section h1` should replace `course-section h1` in home.css on feature merge
 .featured-product-section-container {
   width: 100%;
-  display: flex;
-  flex-direction: column;
+  max-width: unset;
+  height: 32.5rem;
   padding: 0 !important;
-  max-width: 1440px !important;
-  @include media-breakpoint-down(sm) {
-    width: 100%;
-    margin: 0;
+  justify-content: center;
+  margin: 0;
+  overflow: hidden;
+  position: relative;
+  z-index:9;
+  &:after {
+    bottom: 0;
+    -webkit-transform: skewY(-1.5deg);
+    transform: skewY(-1.5deg);
+    -webkit-transform-origin: 0 100%;
+    transform-origin: 0 100%;
+    height: 32.5rem;
+    background: inherit;
+    content: '';
+    display: block;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: -1;
+    background-color: $home-page-grey-lite;
   }
+
   h1, h2, h3, h4, h5, h6 {
     font-family: Poppins, sans-serif;
     font-style: normal;
     line-height: normal;
     font-weight: 700;
   }
-
   p, a {
     font-family: Inter, sans-serif;
     font-style: normal;
@@ -23,41 +39,36 @@
     font-weight: 400;
   }
 
-
   .featured-product-section {
-    display: flex;
-    width: 100%;
-    max-width: 1440px;
-    height: 520px;
+    width: calc(100% - 100px);
+    max-width: 1320px;
     flex-shrink: 0;
-    background-image: url('/static/images/featured-product-rectangle.svg');
-    background-size: cover;
     flex-direction: column;
+    align-self: center;
     align-items: center;
+    position: absolute;
     @include media-breakpoint-down(sm) {
       width: 100%;
       height: 450px;
-      background-image: unset;
       background-color: $home-page-grey-lite;
     }
-
     .featured-product-header {
-      max-width: 1344px;
-      width: 93.333333%;
-      margin: 0 auto;
-      padding-top: 60px;
+      max-width: 1320px;
+      width: 100%;
+      padding: 3rem 0 1.8rem 0;
       flex-shrink: 0;
       fill: $home-page-grey-lite;
-      display: flex;
-      align-content: space-between;
       @include media-breakpoint-down(sm) {
         width: 100%;
         padding-top: 0;
+        justify-content: space-between;
       }
 
       h3.featured-product-header-title {
         color: $home-page-header-blue;
         font-size: 25px;
+        padding-left: 0;
+        margin-bottom: 0;
         @include media-breakpoint-down(sm) {
           width: 176px;
           font-size: 18px;
@@ -68,9 +79,10 @@
 
       .featured-product-arrows {
         display: inline-flex;
-        align-items: flex-start;
+        align-items: center;
+        justify-content: flex-end;
         gap: 10px;
-        margin-left: auto;
+        padding: 0;
         @include media-breakpoint-down(sm) {
           margin-right: 15px;
           margin-top: 30px;
@@ -98,84 +110,143 @@
 
     .featured-product-listing {
       display: flex;
-      margin: 40px auto 0 auto;
-      max-width: 1344px;
-      width: 93.333333%;
+      margin: 36px 0 0 0;
+      max-width: 1320px;
+      width: 100%;
       height: 238px;
-      justify-content: flex-end;
+      justify-content: space-between;
       align-items: center;
       flex-shrink: 0;
-      padding-bottom: 17px;
+      padding: 0 0 17px 0;
 
       @include media-breakpoint-down(sm) {
         width: 100%;
-        margin-top: 30px;
-        align-items: unset;
         padding-bottom: 0;
+        margin-top: 0;
+        padding-top: 2rem;
       }
 
       .carousel-inner {
-        overflow-y: unset;
-
-        .carousel-item {
-          gap: 24px;
+          width: 110%;
+          max-width: unset;
+          gap: 20px;
+          padding-bottom: 2rem;
+        @include media-breakpoint-down(sm) {
+          max-width: 100%;
+        }
 
-          .featured-product-card {
-            width: calc(25%);
-            border-radius: 5px;
-            background: white;
-            box-shadow: 0 2px 3px 0 rgba(18, 38, 49, 0.15);
+          a.carousel-item {
+            text-decoration: none;
+            width: 20%;
+            margin-right: 0;
+            flex: 0 0 20%;
+            display: block;
+            height: 260.953px;
+            padding-left: inherit;
+            padding-right: inherit;
+            transition: transform 0.6s linear;
+            @include media-breakpoint-down(xl) {
+              width: 25%;
+              flex: 0 0 25%;
+            }
+            @include media-breakpoint-down(lg) {
+              width: 33.33333%;
+              flex: 0 0 33.33333%;
+            }
+            @include media-breakpoint-down(md) {
+              width: 50%;
+              flex: 0 0 50%;
+            }
             @include media-breakpoint-down(sm) {
-              width: 282px;
-              margin: auto;
-              height: 238px;
+              width: 100%;
+              flex: 0 0 100%;
+              height: unset;
+              padding-left: 2.44rem;
+              padding-right: 2.44rem;
             }
+            .featured-product-card {
+              height: 100%;
+              border-radius: 5px;
+              flex-direction: column;
+              align-items: center;
+              border: 1px solid $home-page-grey-lite;
+              background: #FFF;
+              padding: 0;
+              flex: none;
+              box-shadow: 0 2px 3px 0 rgba(18, 38, 49, 0.15);
+              @include media-breakpoint-down(sm) {
+                padding: unset;
 
-            a {
-              text-decoration: none;
+              }
 
               .featured-product-thumb {
+                display: flex;
                 position: relative;
+                justify-content: center;
+                border-radius: 5px;
+                width: 100%;
+                height: 10.6875rem;
+              }
 
-                img {
-                  width: 100%;
-                  border-radius: 5px 5px 0 0;
-                }
-
-                .badge-program-type {
-                  position: absolute;
-                  left: 0;
-                  bottom: 0;
-                  padding: 8px 15px;
-                  border-radius: 0 3px 3px 0;
-                  background-color: $home-page-header-blue;
-                  color: #FFF;
-                  font-family: Inter, sans-serif;
-                  font-size: 0.75rem;
-                  font-style: normal;
-                  font-weight: 700;
-                  line-height: normal;
-                }
+              img {
+                width: 100%;
+                height: 10.6875rem;
+                border-radius: 5px 5px 0 0;
+                background: rgba(0, 0, 0, 0.20);
+                object-position: center;
+                object-fit: cover;
+              }
+              .badge-program-type {
+                display: inline-flex;
+                padding: 8px 15px;
+                align-items: flex-start;
+                border-radius: 0px 3px 0px 0px;
+                background: $home-page-header-blue;
+                position: absolute;
+                left: 0;
+                bottom: 0;
+                color: #FFF;
+                font-size: 0.75rem;
+                font-weight: 700;
+                font-family: Inter, sans-serif;
+              }
+              .badge-program-type-none {
+                background: transparent;
               }
 
               .featured-product-info {
-                margin: 13px 15px 15px 15px;
-                padding: 0;
+                padding: 15px;
+                display: flex;
+                flex-direction: column;
+                align-items: flex-start;
+                gap: .31rem;
+                align-self: stretch;
 
                 p.date {
                   color: $home-page-grey-text;
                   font-size: 12px;
                   margin-bottom: 5px;
+                  overflow: hidden;
+                  align-self: stretch;
+                  text-overflow: ellipsis;
+                  font-weight: 400;
                 }
 
                 h2.featured-product-card-title {
                   height: 33px;
-                  flex-shrink: 0;
                   align-self: stretch;
                   color: $home-page-header-blue;
                   font-size: 0.875rem;
                   font-family: Inter, sans-serif;
                   margin-top: 0;
+                  display: -webkit-box;
+                  -webkit-line-clamp: 2;
+                  -webkit-box-orient: vertical;
+                  overflow: hidden;
+                  line-height: 18px;
+                }
+                h2.featured-product-card-title.program-title {
+                  height: 57.953px;
                 }
               }
             }
@@ -197,25 +268,6 @@
       .carousel-inner .carousel-item-prev {
         display: flex;
       }
-
-      /* medium and up screens */
-      @include media-breakpoint-up(md) {
-
-        .carousel-inner .carousel-item-end.active,
-        .carousel-inner .carousel-item-next {
-          transform: translateX(25%);
-        }
-
-        .carousel-inner .carousel-item-start.active,
-        .carousel-inner .carousel-item-prev {
-          transform: translateX(-25%);
-        }
-      }
-
-      .carousel-inner .carousel-item-end,
-      .carousel-inner .carousel-item-start {
-        transform: translateX(0);
-      }
     }
 
     .featured-product-navigation {
@@ -226,6 +278,9 @@
       @include media-breakpoint-down(sm) {
         width: 100%;
         margin-top: 30px;
+        padding-bottom: 0;
+        padding-left: 2.44rem;
+        padding-right: 2.44rem;
       }
 
       a.view-catalog-button {
@@ -243,9 +298,7 @@
         text-decoration: none;
         @include media-breakpoint-down(sm) {
           width: 100%;
-          max-width: 280px;
         }
       }
     }
-  }
-}
\ No newline at end of file
+}
diff --git a/frontend/public/scss/home-page/home-page-hero.scss b/frontend/public/scss/home-page/home-page-hero.scss
index 182a0ec020..9b8f18f7c0 100644
--- a/frontend/public/scss/home-page/home-page-hero.scss
+++ b/frontend/public/scss/home-page/home-page-hero.scss
@@ -5,6 +5,8 @@ body.new-design {
   width: 100%;
   height: 600px;
   background: $home-page-dark-blue;
+  position: relative;
+  z-index: 9999;
   @include media-breakpoint-down(md) {
     width: 100%;
     height: 470px;
diff --git a/main/templates/partials/featured_product_card.html b/main/templates/partials/featured_product_card.html
new file mode 100644
index 0000000000..86a8684c6e
--- /dev/null
+++ b/main/templates/partials/featured_product_card.html
@@ -0,0 +1,25 @@
+{% load static wagtail_img_src feature_img_src %}
+
+
+<a href="{{ product.url_path }}" class="featured-product-card-link carousel-item{% if order == 1 %} active{% endif %}">
+  <div class="col featured-product-card">
+    <div class="featured-product-thumb">
+      <img src="{% feature_img_src product.feature_image %}" alt="" />
+      <div class="badge badge-program-type{% if not product.program_type %}-none{% endif %}">{% if product.program_type %}{{ product.program_type }}{% endif %}</div>
+    </div>
+    <div class="featured-product-info">
+      {% if product.start_date and not product.is_program %}
+      <p class="date">
+        Starts {{ product.start_date | date:"F j, Y" }}
+      </p>
+      {% elif not product.is_program %}
+        <p class="date">
+          Start Anytime
+        </p>
+      {% endif %}
+      <h2 class="featured-product-card-title card-title{% if product.is_program %} program-title{% endif %}">
+          {{ product.title }}
+      </h2>
+    </div>
+    </div>
+  </a>