diff --git a/src/css/landing-page.css b/src/css/landing-page.css
index 8c3f82b1..528d7c15 100644
--- a/src/css/landing-page.css
+++ b/src/css/landing-page.css
@@ -173,7 +173,7 @@
 }
 
 .doc.landing-page-doc img {
-  max-width: 100%;
+  overflow: visible;
 }
 
 .doc.landing-page-doc ul {
@@ -256,6 +256,157 @@
   box-shadow: 0 0 15px -5px #ccc;
 }
 
+/* CSS for redesigned Capella Landing Page */
+
+/* Adjusting spacing gutters around the content */
+@media screen and (min-width: 769px) {
+  main.capella-article {
+    padding-right: 1.5rem;
+    padding-left: 1.5rem;
+    margin: 0 auto;
+    max-width: clamp(55em, 60%, var(--width-page-area));
+  }
+}
+
+/* Adjusted CSS for Tabbed "Ten Minutes" Content */
+.doc.landing-page-capella .tabs {
+  margin: 2rem 0 2rem 0;
+  width: 80%;
+}
+
+.doc.landing-page-capella .tabs .tablist > ul li {
+  margin-right: 1rem;
+}
+
+.doc.landing-page-capella .tabpanel {
+  padding: 2em 1.25em;
+}
+
+.doc.landing-page-capella .tabs.responsive .tabpanel {
+  padding: 2rem 4rem 2rem 1rem;
+}
+
+.doc.landing-page-capella .tabs.responsive .tabpanel .paragraph > p > a {
+  font-weight: var(--weight-semibold);
+}
+
+/* CSS for How Do You Want To Start Building Today? section */
+.doc.landing-page-capella .centered > h2 {
+  text-align: center;
+  margin-top: 4rem;
+}
+
+.doc.landing-page-capella .card-container {
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+  margin: 20px auto;
+}
+
+.doc.landing-page-capella .card-container .sectionbody {
+  display: contents;
+}
+
+.doc.landing-page-capella .card-box {
+  width: 30%;
+  margin: 1.66%;
+  padding: 2rem;
+  background-color: white;
+  border-bottom: 20px solid var(--color-brand-orange);
+  box-shadow: 0 0 29.48px 0 rgba(0, 0, 0, 0.1);
+  border-radius: 8.8px;
+}
+
+.doc.landing-page-capella .card-box:hover {
+  transition: box-shadow 0.3s ease-in-out;
+  box-shadow: 5px 10px 29.48px 0 rgba(0, 0, 0, 0.4);
+}
+
+.doc.landing-page-capella .card-box .svg-inline--fa {
+  color: var(--color-brand-red);
+  font-size: 2em;
+  margin-bottom: 0.5em;
+  display: block;
+}
+
+.doc.landing-page-capella .card-box > h3 {
+  margin-block-start: 0;
+  padding-left: 1.5em;
+  text-align: left;
+}
+
+.doc.landing-page-capella .card-box > p {
+  margin-top: 1rem;
+}
+
+.doc.landing-page-capella .card-box > div.ulist > ul li {
+  list-style-type: disc;
+  color: var(--color-link);
+  font-weight: var(--weight-semibold);
+}
+
+.doc.landing-page-capella .card-box > div.ulist > ul li:hover {
+  text-decoration: underline;
+}
+
+.doc.landing-page-capella .opening-image {
+  width: 10em; /* Adjust as needed */
+  float: right;
+  height: auto;
+  display: block;
+  z-index: -1;
+}
+
+.doc.landing-page-capella .ending-image {
+  width: 10em; /* Adjust as needed */
+  height: auto;
+  display: block;
+  margin: -50px;
+  position: relative;
+  top: 150px; /* Adjust this value to control the amount of overlap */
+  z-index: -1;
+}
+
+/* Screen size considerations */
+
+@media screen and (max-width: 499px) {
+  .doc.landing-page-capella .tabs {
+    margin: 2rem 0;
+    width: 100%;
+  }
+
+  .doc.landing-page-capella .card-container {
+    flex-direction: column;
+    width: 100%;
+  }
+
+  .doc.landing-page-capella .card-box {
+    width: 100%;
+  }
+}
+
+@media screen and (min-width: 500px) and (max-width: 700px) {
+  .doc.landing-page-capella .card-box {
+    width: 100%;
+  }
+}
+
+@media screen and (min-width: 701px) and (max-width: 1699px) {
+  .doc.landing-page-capella .card-container {
+    width: 100%;
+  }
+
+  .doc.landing-page-capella .card-box {
+    width: 46%;
+  }
+}
+
+@media screen and (min-width: 1700px) {
+  .doc.landing-page-capella .card-box {
+    width: 30%;
+  }
+}
+
 /* CSS for nav filter */
 .nav.tutorials-filter .nav-menu {
   padding: 20px;
diff --git a/src/img/lineplus.svg b/src/img/lineplus.svg
new file mode 100644
index 00000000..a8490a62
--- /dev/null
+++ b/src/img/lineplus.svg
@@ -0,0 +1,4 @@
+<svg width="188" height="322" viewBox="0 0 188 322" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M105.657 321.405L40.6374 0H-7.62939e-06L65.0198 321.405H105.657Z" fill="#EC1218"/>
+<path d="M188 27.1038V41.7849H129V27.1038H188ZM166.599 4V66H150.46V4H166.599Z" fill="black"/>
+</svg>
diff --git a/src/img/stars.svg b/src/img/stars.svg
new file mode 100644
index 00000000..2bc19c3f
--- /dev/null
+++ b/src/img/stars.svg
@@ -0,0 +1,3 @@
+<svg width="104" height="103" viewBox="0 0 104 103" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M103.467 22.2846V21.6648C91.1594 20.1374 83.8858 12.8766 82.3557 0.59082H81.7348C80.2047 12.8766 72.9311 20.1374 60.6237 21.6648V22.2846C72.9311 23.812 80.2047 31.0728 81.7348 43.3586H82.3557C83.8858 31.0728 91.1594 23.812 103.467 22.2846ZM0.206497 61.0014C24.5552 64.012 38.936 78.3676 41.9519 102.673H43.1716C46.1874 78.3676 60.5683 64.012 84.917 61.0014V59.7839C60.5683 56.7734 46.1874 42.4178 43.1716 18.1119H41.9519C38.936 42.4178 24.5441 56.7734 0.206497 59.7839V61.0014Z" fill="#FC9C0C"/>
+</svg>
diff --git a/src/layouts/landing-page-capella.hbs b/src/layouts/landing-page-capella.hbs
new file mode 100644
index 00000000..ce5b99cb
--- /dev/null
+++ b/src/layouts/landing-page-capella.hbs
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+{{> head-first}}
+<title>{{{detag (or page.title 'landing page')}}}{{#if site.title}} | {{{site.title}}}{{/if}}</title>
+{{> head-last}}
+</head>
+<body class="landing-page">
+{{> header}}
+{{> body-landing-page-capella}}
+{{> footer}}
+</body>
+</html>
diff --git a/src/partials/body-landing-page-capella.hbs b/src/partials/body-landing-page-capella.hbs
new file mode 100644
index 00000000..b02b41e8
--- /dev/null
+++ b/src/partials/body-landing-page-capella.hbs
@@ -0,0 +1,22 @@
+<div class="body container">
+{{#if (eq (nav-mode) 'client')}}
+{{#with (nav-group-for-page (nav-groups))}}
+{{#if ./components.length}}
+<aside class="nav left-sidebar">
+  <div class="nav-container">
+    <a href="#" class="menu-expand-toggle"><span>Navigation</span><i class="fas fa-times-circle"></i><i class="fas fa-chevron-circle-left"></i></a>
+  </div>
+</aside>
+{{/if}}
+{{/with}}
+{{/if}}
+<main class="capella-article" data-ceiling="topbar">
+<article class="doc landing-page-capella">
+<img class="opening-image" src="{{{uiRootPath}}}/img/stars.svg" />
+
+{{{page.contents}}}
+
+<img class="ending-image" src="{{{uiRootPath}}}/img/lineplus.svg" />
+</article>
+</main>
+</div>