diff --git a/docs/stylesheets/custom.css b/docs/stylesheets/custom.css
index c39bed0..24d5664 100644
--- a/docs/stylesheets/custom.css
+++ b/docs/stylesheets/custom.css
@@ -1,3 +1,4 @@
+/* General css */
 .default-bg {
   background: none!important;
   background-color: var(--md-default-bg-color)!important; 
@@ -14,6 +15,8 @@
 
 }
 
+/* Card related css */
+
 .centered-content-grid ul.centered-content-grid__list {
   display: flex;
   flex-flow: row wrap;
@@ -22,24 +25,18 @@
   margin: 0;
 }
 
-.centered-content-grid ul.centered-content-grid__list > li.centered-content-grid__item{
+.centered-content-grid ul.centered-content-grid__list > li.centered-content-grid__item {
   display: flex;
   flex: 1 0 48%;
   gap: 0.6rem;
   margin: 0;
 }
-
-.centered-content-grid ul.centered-content-grid__list > li.centered-content-grid__item  div.item_content{
-  color: var(--md-typeset-color)!important;
-}
-
-
-.centered-content-grid ul.centered-content-grid__list > li.centered-content-grid__item  div.item_content h2.card_title{
+.centered-content-grid ul.centered-content-grid__list > li.centered-content-grid__item  div.item_content h2.card_title {
   font-weight: 700;
   margin-top: 0.175em;
 }
 
-.centered-content-grid ul.centered-content-grid__list > li.centered-content-grid__item  div.content_icon{
+.centered-content-grid ul.centered-content-grid__list > li.centered-content-grid__item  div.content_icon {
   fill: currentcolor;
   background-color: var(--md-default-fg-color--lightest);
   border-radius: 100%;
@@ -47,4 +44,79 @@
   height: 2.2rem;
   padding: 0.55rem 0.4rem 0.4rem 0.4rem;
   width: 2.2rem;
-}
\ No newline at end of file
+}
+
+/* Column related css */
+.content-container-centered div.centered-content-column-wrapper {
+  margin-bottom: 0;
+  padding: 5.2rem 0;
+}
+
+.content-container-centered div.centered-content-column-wrapper .content-container-column {
+  font-weight: 400;
+}
+
+@media screen and (min-width: 60em) {
+  .content-container-centered div.centered-content-column-wrapper {
+    display:flex;
+    flex-wrap: nowrap;
+    gap: 6.4rem;
+  }
+  .content-container-centered div.centered-content-column-wrapper .content-container-column {
+    margin-top: 0;
+  }
+
+  .content-container-centered div.centered-content-column-wrapper .content-container-column:first-child {
+    flex: 2 0;
+  }
+
+  .content-container-centered div.centered-content-column-wrapper .content-container-column:last-child {
+    flex: 1 0;
+  }
+}
+
+/* Feature related css */
+.content-container-centered .feature-container {
+  margin: 2em 0;
+}
+
+.content-container-centered .feature-container figure.feature-content {
+  display: flex;
+  flex: 1 0 48%;
+  flex-flow: row nowrap;
+  gap: 3.2rem;
+  margin: 0 0 3.2rem;
+  text-align: left;
+  max-width: 100%;
+  width: 100%;
+}
+
+.content-container-centered .feature-container figure.feature-content figcaption {
+  margin-top: 0.8rem;
+  font-style: normal;
+  margin:0;
+  max-width: none;
+}
+
+.content-container-centered .feature-container figure.feature-content figcaption h2 {
+  font-weight: 700;
+  margin-top: 0.175em;
+}
+
+.content-container-centered .feature-container figure.feature-content a {
+  display: block;
+  flex-shrink: 0;
+}
+
+@media screen and (min-width: 60em) {
+  .content-container-centered .feature-container figure.feature-content:nth-child(odd) {
+    flex-direction: row-reverse;
+  }
+}
+
+/* Custom rulesets based on material theme */
+.md-button.md-button--custom {
+  background-color: var(--md-default-fg-color--lighter);
+  border-color: var(--md-default-fg-color--lighter);
+  color: var(--md-primary-bg-color);
+}
diff --git a/material/overrides/home.html b/material/overrides/home.html
index f985511..6563761 100644
--- a/material/overrides/home.html
+++ b/material/overrides/home.html
@@ -2,6 +2,7 @@
 {% block tabs %}
   {{ super() }}
   <style>.md-header{position:initial}.md-main__inner{margin:0}.md-content{display:none}@media screen and (min-width:60em){.md-sidebar--secondary{display:none}}@media screen and (min-width:76.25em){.md-sidebar--primary{display:none}}</style>
+  <!-- Hero section -->
   <section class="tx-container">
     <div class="md-grid md-typeset">
       <div class="tx-hero">
@@ -21,6 +22,7 @@ <h1>Stacker Build</h1>
       </div>
     </div> 
   </section>
+  <!-- Cards section -->
   <section class="tx-container default-bg">
     <div class="md-grid md-typeset">
       <div class="content-container-centered ">
@@ -31,16 +33,16 @@ <h1>OCI-native Image Builder</h1>
               <div class="content_icon">
                   {% include ".icons/fontawesome/solid/download.svg" %} 
               </div>
-              <div class="item_content">
+              <div>
                 <h2 class="card_title">Single Binary</h2>
                 <p>One statically built binary for simplified download and install with no additional dependencies or services.</p>
-             </div>
+            </div>
             </li>
             <li class="centered-content-grid__item md-typeset">
               <div class="content_icon">
                 {% include ".icons/fontawesome/solid/repeat.svg" %} 
-             </div>
-              <div class="item_content">
+            </div>
+              <div>
                 <h2 class="card_title">Repeatable</h2>
                 <p>Hermetically sealed environment for image builds using LXC containers so that builds are repeatable without side-effects.</p>
               </div>
@@ -48,8 +50,8 @@ <h2 class="card_title">Repeatable</h2>
             <li class="centered-content-grid__item md-typeset">
               <div class="content_icon">
                 {% include ".icons/fontawesome/solid/lock.svg" %} 
-             </div>
-              <div class="item_content">
+            </div>
+              <div>
                 <h2 class="card_title">Unprivileged</h2>
                 <p>Build using user namespaces and avoid privileges on host.</p>
               </div>
@@ -58,7 +60,7 @@ <h2 class="card_title">Unprivileged</h2>
               <div class="content_icon">
                 {% include ".icons/fontawesome/solid/forward.svg" %} 
               </div>
-              <div class="item_content">
+              <div>
                 <h2 class="card_title">Incremental</h2>
                 <p>Build only the images necessary and rebuild only if any input changed.</p>
               </div>
@@ -66,8 +68,8 @@ <h2 class="card_title">Incremental</h2>
             <li class="centered-content-grid__item md-typeset">
               <div class="content_icon">
                 {% include ".icons/fontawesome/brands/github.svg" %} 
-             </div>
-              <div class="item_content">
+            </div>
+              <div>
                 <h2 class="card_title">GitHub Action</h2>
                 <p>Integrated with GitHub as a build-and-push <a href="https://github.com/marketplace/actions/stacker-build-and-push-action">action</a>.</p>
               </div>
@@ -76,7 +78,7 @@ <h2 class="card_title">GitHub Action</h2>
               <div class="content_icon">
                 {% include ".icons/fontawesome/brands/github-alt.svg" %} 
               </div>
-              <div class="item_content">
+              <div>
                 <h2 class="card_title">Open source</h2>
                 <p>Released as an open source project under Apache2 License.</p>
               </div>
@@ -86,6 +88,89 @@ <h2 class="card_title">Open source</h2>
       </div>
     </div>
   </section>
+  <!-- feature section -->
+  <section class="tx-container default-bg">
+    <div class="md-grid md-typeset">
+      <div class="content-container-centered">
+        <h1>More than just building container images</h1>
+        <div class="feature-container">
+            <!-- Each figure represents a text content + image-link combo -->
+            <!-- Each figure can be a different image and link to documentation article -->
+            <!-- Add more figures as desired -->
+            <figure class="feature-content">
+              <a href="get_started/get_stacker/">
+                <img src="assets/images/illustrations/home.png" alt="figure" width="500" height="3290" draggable="false">
+              </a>
+              <figcaption>
+                <h2>Figure Title</h2>
+                <!-- Add or remove paragraphs as desired -->
+                <p>
+                  Material for MkDocs makes your documentation instantly searchable with zero effort: 
+                  say goodbye to costly third-party crawler-based solutions that can take hours to update. 
+                  Ship your documentation with a highly customizable and blazing fast search running entirely in the user's browser at no extra cost.
+                </p>
+                <p>
+                  Even better: search inside code blocks, exclude specific sections or entire pages, 
+                  boost important pages in the results and build searchable documentation that works offline.
+                </p>
+                <p><a href="get_started/get_stacker/">Link to something else</a></p>
+              </figcaption>
+            </figure>
+            <figure class="feature-content">
+              <a href="get_started/get_stacker/">
+                <img src="assets/images/illustrations/home.png" alt="figure" width="500" height="3290" draggable="false">
+              </a>
+              <figcaption>
+                <h2>Figure Title</h2>
+                <!-- Add or remove paragraphs as desired -->
+                <p>
+                  Material for MkDocs makes your documentation instantly searchable with zero effort: 
+                  say goodbye to costly third-party crawler-based solutions that can take hours to update. 
+                  Ship your documentation with a highly customizable and blazing fast search running entirely in the user's browser at no extra cost.
+                </p>
+                <p>
+                  Even better: search inside code blocks, exclude specific sections or entire pages, 
+                  boost important pages in the results and build searchable documentation that works offline.
+                </p>
+                <p><a href="get_started/get_stacker/">Link to something else</a></p>
+              </figcaption>
+            </figure>
+        </div>
+        
+      </div>
+    </div>
+  </section>
+  <!-- keep in touch section -->
+  <section class="tx-container default-bg">
+    <div class="md-grid md-typeset">
+      <div class="content-container-centered">
+        <div class="centered-content-column-wrapper">
+          <div class="content-container-column">
+            <h1>Keep in touch left side title</h1>
+            <div class="column-content">
+              <!-- Paragraphs can be added as desired -->
+              <p>
+                By joining the Insiders program, you'll get immediate access to the latest features while also helping support the ongoing development of Material for MkDocs. 
+                hanks to our awesome sponsors, this project is actively maintained and kept in good shape.
+              </p>
+              <p>
+                Together, we can build documentation that simply works!
+              </p>
+              <p><a class="md-button md-button--custom">Link to something else</a></p>
+            </div>
+          </div>
+          <div class="content-container-column">
+            <h1>Right side title</h1>
+            <div class="column-content">
+              <!-- Paragraphs can be added as desired -->
+              <p>First paragraph</p>
+              <p>Second paragraph</p>
+            </div>
+          </div>
+        </div>
+      </div>
+   </div>
+  </section>
 {% endblock %}
 {% block content %}{% endblock %}
 {% block footer %}