diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css
index 09f1f5a..bc27471 100644
--- a/assets/css/v2/style.css
+++ b/assets/css/v2/style.css
@@ -51,16 +51,17 @@
 
   /* MARK: Variables
   */
+
   --color-brand: 56.6% 0.194 147.7;
   --color-brand-300: #a6daba;
   --color-brand-200: #ccead7;
   --color-brand-100: #f2faf5;
   --color-background: #ffffff;
-  --color-foreground: #000000;
+  --color-foreground: rgb(45, 48, 45);
+  --color-foreground-heavy: rgb(16, 16, 16);
   --color-shadow: #d2d2d2;
   --color-codeblock-border: #888;
   --color-codeblock-shadow: #e5e5e5;
-  --color-codeblock-highlight: #fffed9;
   --color-footer: #1d1d1d;
   --color-footer-text: #e2e2e2;
   --color-product-title: #8d8d8d;
@@ -77,6 +78,7 @@
   /* vars for the primary grid setup */
   --grid-sidebar: 24rem;
   --grid-sidebar-gutter: 3rem;
+  --grid-home: minmax(34rem, 60rem);
   --grid-content: minmax(34rem, 50rem);
   --grid-content-mobile: minmax(20rem, 50rem);
   --grid-side-callout: minmax(18rem, 26rem);
@@ -169,6 +171,12 @@ html {
   scroll-behavior: smooth;
 }
 
+/* MARK: Global styles
+*/
+body {
+  color: var(--color-foreground);
+}
+
 h1,
 h2,
 h3,
@@ -176,11 +184,11 @@ h4,
 h5,
 h6 {
   scroll-margin-top: 1.5rem;
+  color: var(--color-foreground-heavy);
 }
 
-/* MARK: Header
-*/
 p {
+  line-height: 1.6rem;
   font-weight: 350;
 }
 
@@ -207,10 +215,10 @@ ol li:last-child {
   margin-bottom: 0;
 }
 
-/* MARK: Layout
+/* MARK: Header
 */
 header {
-  margin: 2rem 2rem 0 2rem;
+  padding: 1rem 2rem;
 
   .header-container {
     display: flex;
@@ -281,6 +289,141 @@ header {
   }
 }
 
+/* Override logo with black text version */
+.navbar-brand {
+  --logo-height: 2.5rem;
+  height: var(--logo-height);
+  display: block;
+
+  /* non-tiling background logo */
+  background-image: url(/images/icons/NGINX-Product-icon.svg);
+  background-repeat: no-repeat;
+  background-size: contain;
+  background-position: left center;
+  text-decoration: none;
+
+  &::after {
+    content: "NGINX Docs";
+    font-size: calc(var(--logo-height) * 0.6);
+    font-weight: 600;
+    color: var(--color-foreground-heavy);
+    margin: 0.3rem calc(var(--logo-height) * 1.2);
+    display: inline-block;
+  }
+
+  img {
+    display: none;
+  }
+}
+
+/* MARK: Home page
+*/
+.home-layout {
+  display: grid;
+  grid-template-columns: var(--grid-home);
+  margin: 4rem 2rem;
+
+  row-gap: var(--flow-gap);
+}
+
+.home-layout h1 {
+  margin: 0;
+}
+
+.cta {
+  margin: 1rem 0;
+}
+
+.jump-links {
+  display: flex;
+  column-gap: 2.5rem;
+  justify-content: space-between;
+
+  margin: 1rem 0;
+}
+
+.jump-links ul {
+  margin: 1rem 0 0 0;
+
+  list-style: none;
+}
+
+.jump-links li {
+  margin: 0.75rem 0 0 0;
+}
+
+.get-started-button {
+  background-color: white;
+  border: 1px solid black;
+  padding: 0.25rem 0.5rem;
+  cursor: pointer;
+  font-size: 1.25rem;
+  font-weight: 400;
+  color: #000;
+  margin: 0.5rem 0.5rem 0 0;
+  z-index: 1;
+  --color-codeblock-shadow: 0% 0 0;
+  box-shadow: 0px 2px 0px oklch(var(--color-codeblock-shadow) / 0.15);
+
+  text-decoration: none;
+}
+
+#products {
+  margin: 2rem 0 0 0;
+}
+
+.product-grid {
+  margin: 1.5rem 0 0 0;
+}
+
+.product-grid ul {
+  list-style: none;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+
+  gap: 1rem;
+}
+
+.product-grid li {
+  padding: 0;
+  margin: 0;
+}
+
+.product-grid li a.product-tile {
+  display: block;
+  border: 1px solid var(--color-divider);
+  padding: 1rem;
+  /* margin: 0 0 0 -1rem; */
+}
+
+.product-grid p.product-title {
+  font-weight: 500;
+  font-size: 0.875rem;
+}
+
+.tiny-pill {
+  display: inline-block;
+  font-size: 0.625rem;
+  font-weight: 800;
+
+  margin: 0 0.25rem;
+  vertical-align: 2px;
+
+  border-radius: 3px;
+  padding: 0 2px;
+  background-color: oklch(var(--color-brand) / 0.8);
+  color: var(--color-background);
+}
+
+.get-started-button:hover {
+  box-shadow: 0px 2px 0px oklch(var(--color-brand) / 0.3);
+}
+
+.get-started-button:focus {
+  outline: none;
+  box-shadow: 0px 2px 0px oklch(var(--color-brand) / 0.8);
+}
+
 /* MARK: Footer
 */
 footer {
@@ -437,7 +580,7 @@ nav {
 
   .text-content {
     grid-template-columns: var(--grid-content) var(--grid-side-callout);
-    grid-template-rows: 70px max-content;
+    grid-template-rows: 70px auto;
     column-gap: var(--grid-column-gutter);
   }
 
@@ -484,7 +627,7 @@ nav {
 
 /* Handles different flow-gap of list page  */
 .list-page.text-content {
-  grid-template-rows: calc(70px + var(--flow-gap)) max-content;
+  grid-template-rows: calc(70px + var(--flow-gap)) auto;
 }
 
 .api {
@@ -505,7 +648,7 @@ nav {
 }
 
 .main {
-  display: flex;
+  margin: 0 auto;
 }
 
 /* MARK: Coveo
@@ -957,7 +1100,6 @@ main {
 
 p {
   margin: 0;
-  line-height: 1.5rem;
 }
 
 .breadcrumb {
@@ -988,13 +1130,13 @@ p {
 }
 
 a {
-  color: oklch(var(--color-brand));
-  text-decoration-color: oklch(var(--color-brand) / 0.3);
-  transition: text-decoration-color 0.15s ease-in-out;
+  color: oklch(var(--color-brand) / 0.8);
+  text-decoration-color: oklch(var(--color-brand) / 0.2);
 }
 
 a:hover {
   text-decoration-color: oklch(var(--color-brand) / 0.8);
+  transition: text-decoration-color 0.15s ease-in-out;
 }
 
 h1 {
@@ -1461,12 +1603,6 @@ ul .code-block {
   padding: 0;
 }
 
-.highlight code .hl {
-  width: fit-content;
-  min-width: 100%;
-  background-color: var(--color-codeblock-highlight);
-}
-
 /* MARK: Images
 */
 figure {
@@ -1513,27 +1649,6 @@ hr {
   margin: 0;
 }
 
-/* FILTHY HACKS BEGIN */
-
-/* Override logo with black text version */
-.navbar-brand {
-  height: 3.5rem;
-  display: block;
-
-  /* non-tiling background logo */
-  background-image: url(/images/icons/NGINX-Docs-horiz-black-type.svg);
-  background-repeat: no-repeat;
-  background-size: contain;
-  background-position: left center;
-  width: 200px; /* Adjust the width as needed to fit the logo */
-
-  img {
-    display: none;
-  }
-}
-
-/* FILTHY HACKS END */
-
 /* Hidden temporarily */
 
 .code-copy {
diff --git a/exampleSite/layouts/index.html b/exampleSite/layouts/index.html
index 2c0398f..ef2f30b 100644
--- a/exampleSite/layouts/index.html
+++ b/exampleSite/layouts/index.html
@@ -1,16 +1,83 @@
 {{ define "main" }}
+{{ $nginxProducts := slice 
+    (dict "title" "NGINX One Console" "url" "/nginx-one" "type" "nginx-one")
+    (dict "title" "NGINX Plus" "url" "/nginx" "type" "nginx-one")
+    (dict "title" "NGINX Instance Manager" "url" "/nginx-instance-manager" "type" "nginx-one")
+    (dict "title" "NGINX Ingress Controller" "url" "/nginx-ingress-controller" "type" "nginx-one")
+    (dict "title" "NGINX Gateway Fabric" "url" "/nginx-gateway-fabric" "type" "nginx-one")
+    (dict "title" "NGINX Open Source" "url" "https://nginx.org/en/docs/" "type" "nginx-one")
+    (dict "title" "NGINX Agent" "url" "/nginx-agent" "type" "nginx-one")
+    (dict "title" "NGINX App Protect WAF" "url" "/nginx-app-protect-waf" "type" "nginx-app-protect")
+    (dict "title" "NGINX App Protect DoS" "url" "/nginx-app-protect-dos" "type" "nginx-app-protect")
+    (dict "title" "NGINX as a Service for Azure" "url" "/nginxaas/azure/" "type" "nginx-as-a-service")
+    (dict "title" "NGINX Unit" "url" "https://unit.nginx.org/" "type" "nginx-other")
+}}
 
-<h1>Homepage Example</h1>
-<p>
-    <ul>
-        <li>
-            <a href="{{ relref . "nginx" }}">NGINX and NGINX Plus</a>
-        </li>
-        <li>
-            <a href="{{ relref . "test-product" }}">Test Product</a>
-        </li>
-    </ul>
-</p>
+{{ $nginxCategories := 
+    (dict
+        "nginx-one" "NGINX One"
+        "nginx-app-protect" "NGINX App Protect" 
+        "nginx-as-a-service" "NGINX as a Service"
+        "nginx-other" "Other NGINX Projects"
+    )
+}}
 
+<div class="main">
+<div class="home-layout">
+    <h1>Documentation</h1>
+    <p>This is a short call to action to explore our examples and guides.</p>
+    
+    <div class="cta">
+        <a href="/test-product/" class="get-started-button">Get started with Test Product →</a> or <a href="#products">explore all products</a>.    
+    </div>
+    
+    <div class="jump-links">
+        <ul>
+            <h3>Instance management</h3>
+            <li><a href="https://docs.nginx.com/nginx-one/how-to/certificates/manage-certificates/">Manage certificates<span class="tiny-pill">One</span></a></li>
+            <li><a href="#">Role-based access control</a></li>
+            <li><a href="#">Create a new data plane key</a></li>
+        </ul>
+        <ul>
+            <h3>Kubernetes</h3>
+            <li><a href="https://docs.nginx.com/nginx-one/how-to/certificates/manage-certificates/">Manage certificates</a></li>
+            <li><a href="#">Role-based access control</a></li>
+            <li><a href="#">Create a new data plane key</a></li>
+        </ul>
+        <ul>
+            <h3>Load balancing</h3>
+            <li><a href="#">NGINX HTTP Load Balancing</a></li>
+            <li><a href="#">NGINX TCP and UDP Load Balancing</a></li>
+            <li><a href="#">GSLB with NS1 and NGINX Plus<span class="tiny-pill">N+</span></a></li>
+        </ul>
+    </div>
 
+    <p>The NGINX One Console makes it easy to manage NGINX instances across locations and environments. The console lets you monitor and control your NGINX fleet from one place—you can check configurations, track performance metrics, identify security vulnerabilities, manage SSL certificates, and more.</p>
+
+    <div id="products">
+        <h2>All products</h2>
+        {{ $groupedProducts := dict 
+            "nginx-one" (where $nginxProducts "type" "nginx-one")
+            "nginx-app-protect" (where $nginxProducts "type" "nginx-app-protect")
+            "nginx-as-a-service" (where $nginxProducts "type" "nginx-as-a-service")
+            "nginx-other" (where $nginxProducts "type" "nginx-other")
+        }}
+        {{ $orderedKeys := slice "nginx-one" "nginx-app-protect" "nginx-as-a-service" "nginx-other" }}
+        {{ range $orderedKeys }}
+        {{ $type := . }}
+        {{ $products := index $groupedProducts $type }}
+            <div class="product-grid">
+                <p class="product-title">{{ index $nginxCategories $type }}</p>
+                <ul>
+                {{ range $products }}
+                    <li>
+                        <a class="product-tile" href="{{ .url }}">{{ .title }}</a>
+                    </li>
+                {{ end }}
+                </ul>
+            </div>
+        {{ end }}
+    </div>
+</div>
+</div>
 {{end}}
\ No newline at end of file
diff --git a/layouts/partials/footer-v2.html b/layouts/partials/footer-v2.html
index f695a93..040cae8 100644
--- a/layouts/partials/footer-v2.html
+++ b/layouts/partials/footer-v2.html
@@ -1,6 +1,11 @@
 <div class="footer-layout">
     <div class="footer-f5-trademark">
-        <img class="f5-logo-footer" src="{{ "/images/icons/Logo_F5.svg" | absURL }}" alt="F5 logo">
+        <a
+            href="https://www.f5.com"
+            rel="noopener"
+            target="_blank"
+        ><img class="f5-logo-footer" src="{{ "/images/icons/Logo_F5.svg" | absURL }}" alt="F5 logo">
+        </a>
         <p>©2025 F5, Inc. All rights reserved. NGINX is a registered trademark of F5, Inc.</p>
     </div>
     <div class="footer-useful-links">
diff --git a/layouts/partials/homepage/bigcta.html b/layouts/partials/homepage/bigcta.html
new file mode 100644
index 0000000..e69de29