diff --git a/assets/images/desktop.svg b/assets/images/desktop.svg
new file mode 100644
index 0000000000..9b860ba6f1
--- /dev/null
+++ b/assets/images/desktop.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#677285"><path d="M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.89-2-2-2zm-1 14H6c-.55 0-1-.45-1-1V8h14v9c0 .55-.45 1-1 1z"/></svg>
\ No newline at end of file
diff --git a/release-notes/index.md b/release-notes/index.md
index 4a0ea56cc7..998e4e7924 100644
--- a/release-notes/index.md
+++ b/release-notes/index.md
@@ -4,13 +4,56 @@ keywords: docker, documentation, about, technology, understanding,  release
 title: Docker release notes
 ---
 
-Find out what's new in Docker! Release notes contain information about new
+Find out what's new in Docker. Release notes contain information about new
 features, improvements, known issues, and bug fixes in each release. You can
 find release notes for each component in the Manuals section. We suggest
 that you regularly visit the release notes to learn about updates.
 
-- [Docker Engine](../engine/release-notes/23.0.md)
-- [Docker Desktop](../desktop/release-notes.md)
-- [Docker Hub](../docker-hub/release-notes.md)
-- [Docker Compose](../compose/release-notes.md)
-- [Docker Build](../build/release-notes.md)
+<div class="component-container">
+    <!--start row-->
+    <div class="row">
+      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-4 block">
+        <div class="component">
+             <div class="component-icon">
+                 <a href="/desktop/release-notes/"><img src="/assets/images/desktop.svg" alt="desktop release notes" width="70" height="70"></a>
+                 </div>
+                 <h2 id="desktop release notes"><a href="/desktop/release-notes/">Docker Desktop</a></h2>
+        </div>
+      </div>
+      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-4 block">
+        <div class="component">
+            <div class="component-icon">
+                 <a href="/engine/release-notes/23.0/"><img src="/assets/images/engine-configure-daemon.svg" alt="engine release notes" width="70" height="70"></a>
+            </div>
+                <h2 id="engine release notes"><a href="/engine/release-notes/23.0/">Docker Engine</a></h2>
+         </div>
+     </div>
+     <div class="col-xs-12 col-sm-12 col-md-12 col-lg-4 block">
+        <div class="component">
+            <div class="component-icon">
+                <a href="/compose/release-notes/"><img src="/assets/images/storage.svg" alt="compose release notes" width="70" height="70"></a>
+            </div>
+                <h2 id="compose release notes"><a href="/compose/release-notes/">Docker Compose</a></h2>
+        </div>
+    </div>
+    </div>
+    <!--start row-->
+    <div class="row">
+     <div class="col-xs-12 col-sm-12 col-md-12 col-lg-4 block">
+        <div class="component">
+            <div class="component-icon">
+                 <a href="/build/release-notes/"><img src="/assets/images/build-configure-buildkit.svg" alt="build release notes" width="70" height="70"></a>
+            </div>
+                <h2 id="build release notes"><a href="/build/release-notes/">Docker Build</a></h2>
+        </div>
+     </div>
+     <div class="col-xs-12 col-sm-12 col-md-12 col-lg-4 block">
+        <div class="component">
+          <div class="component-icon">
+                 <a href="/docker-hub/release-notes/"><img src="/assets/images/build-multi-platform.svg" alt="hub release notes" width="70" height="70"></a>
+          </div>
+                <h2 id="hub release notes"><a href="/docker-hub/release-notes/">Docker Hub</a></h2>
+        </div>
+      </div>
+    </div>
+</div>