diff --git a/layouts/index.html b/layouts/index.html
index c7d3963d8552..cc4cb02097f6 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -41,7 +41,29 @@ <h1 class="text-2xl">Get Docker</h1>
       </div>
 
       <div>
-        <div class="grid grid-cols-1 gap-4 lg:grid-cols-3">
+        <div class="grid grid-cols-1 gap-4 lg:grid-cols-4">
+
+          <div>
+            <a class="h-full" href="/get-started/">
+              <div
+                class="flex h-full flex-col gap-2 rounded border border-gray-light-100 bg-white p-4 drop-shadow-sm hover:border-gray-light-200 hover:drop-shadow-lg dark:border-gray-dark-400 dark:bg-gray-dark-200 hover:dark:border-gray-dark">
+                <div class="flex items-center gap-4">
+                  <span class="icon-svg text-violet-light dark:text-violet-dark">
+                    {{ partial "icon" "rocket" }}
+                  </span>
+                  <div>
+                    <div class="text-xl leading-snug text-gray-light-800 dark:text-white">
+                      Get started
+                    </div>
+                  </div>
+                </div>
+                <div class="leading-snug text-gray-light-500 dark:text-gray-dark-700">
+                  Learn Docker basics and the benefits of containerization.
+                </div>
+              </div>
+            </a>
+          </div>
+
           <div>
             <a class="h-full" href="/guides/">
               <div
@@ -57,7 +79,7 @@ <h1 class="text-2xl">Get Docker</h1>
                   </div>
                 </div>
                 <div class="leading-snug text-gray-light-500 dark:text-gray-dark-700">
-                  Get started and learn how Docker can optimize your development workflows.
+                  Learn how Docker can optimize your development workflows.
                 </div>
               </div>
             </a>
@@ -112,16 +134,21 @@ <h1 class="text-2xl">Get Docker</h1>
         <div class="bg-pattern-verde relative rounded p-6 drop-shadow">
           <div class="flex h-full flex-col items-start justify-between gap-12">
             <div class="flex flex-col gap-4">
-              <h2 class="font-medium">Getting started</h2>
+              <h2 class="font-medium">Gen AI catalog {{ partial
+              "components/badge.html" (dict "color" "blue" "content" "New")
+              }}</h2>
               <p class="text-xl">
-                Learn Docker basics and the benefits of containerizing your
-                applications
+                Integrate AI solutions into your apps with minimal effort
               </p>
             </div>
-            <div>
-              <a href="/get-started/"
+            <div class="flex flex-col xl:flex-row gap-4 items-start">
+              <a href="https://hub.docker.com/catalogs/gen-ai"
                 class="flex cursor-pointer items-center gap-2 rounded bg-blue-light p-2 px-4 text-white transition duration-300 hover:bg-blue-light-400 dark:bg-blue-dark-400 dark:hover:bg-blue-dark">
-                Get started
+                Explore on Docker Hub
+              </a>
+              <a href="/docker-hub/image-library/catalogs/"
+                class="flex-grow-0 flex cursor-pointer items-center gap-2 rounded bg-blue-light p-2 px-4 text-white transition duration-300 hover:bg-blue-light-400 dark:bg-blue-dark-400 dark:hover:bg-blue-dark">
+                Read the docs
               </a>
             </div>
           </div>