diff --git a/docs/docs_options.svg b/docs/docs_options.svg
deleted file mode 100644
index 1f9c8cf6..00000000
--- a/docs/docs_options.svg
+++ /dev/null
@@ -1,162 +0,0 @@
-<!--
-  SPDX-FileCopyrightText: Copyright (c) 2025 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
-
-  Licensed under the Apache License, Version 2.0 (the "License");
-  you may not use this file except in compliance with the License.
-  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-  Unless required by applicable law or agreed to in writing, software
-  distributed under the License is distributed on an "AS IS" BASIS,
-  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  See the License for the specific language governing permissions and
-  limitations under the License.
-
-  SPDX-License-Identifier: Apache-2.0
--->
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 850 640" style="width: 65%; max-width: 65%; height: auto; display: block; margin: 0 auto;">
-  <defs>
-    <style>
-      /* Light mode (default) */
-      .card-link {
-        text-decoration: none;
-      }
-
-      .card-bg {
-        fill: #ffffff;
-        stroke: #d0d0d0;
-        stroke-width: 1.5;
-        filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.08));
-        transition: all 0.2s ease;
-      }
-
-      .card-link:hover .card-bg {
-        stroke: #1a1a1a;
-        stroke-width: 2.5;
-        filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.15));
-      }
-
-      .card-title,
-      .card-text {
-        font-family: var(--pst-font-family-base, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
-        font-size: 24px;
-        line-height: 1.8;
-      }
-
-      .card-title {
-        fill: #1a1a1a;
-        font-weight: 700;
-      }
-
-      .card-text {
-        fill: #333333;
-        font-weight: 400;
-      }
-
-      .icon-color {
-        color: #1a1a1a;
-      }
-
-      /* Dark mode - system preference */
-      @media (prefers-color-scheme: dark) {
-        :root:not([data-theme="light"]):not([data-mode="light"]) .card-bg {
-          fill: #0a0a0a;
-          stroke: #2a2a2a;
-          filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.6));
-        }
-
-        :root:not([data-theme="light"]):not([data-mode="light"]) .card-link:hover .card-bg {
-          stroke: #4a4a4a;
-          filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.8));
-        }
-
-        :root:not([data-theme="light"]):not([data-mode="light"]) .card-title {
-          fill: #ffffff;
-        }
-
-        :root:not([data-theme="light"]):not([data-mode="light"]) .card-text {
-          fill: #cccccc;
-        }
-
-        :root:not([data-theme="light"]):not([data-mode="light"]) .icon-color {
-          color: #ffffff;
-        }
-      }
-
-      /* Dark mode - manual selection. Must be explicit because this is embedded as raw HTML. */
-      :root[data-theme="dark"] .card-bg,
-      :root[data-mode="dark"] .card-bg {
-        fill: #0a0a0a;
-        stroke: #2a2a2a;
-        filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.6));
-      }
-
-      :root[data-theme="dark"] .card-link:hover .card-bg,
-      :root[data-mode="dark"] .card-link:hover .card-bg {
-        stroke: #4a4a4a;
-        filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.8));
-      }
-
-      :root[data-theme="dark"] .card-title,
-      :root[data-mode="dark"] .card-title {
-        fill: #ffffff;
-      }
-
-      :root[data-theme="dark"] .card-text,
-      :root[data-mode="dark"] .card-text {
-        fill: #cccccc;
-      }
-
-      :root[data-theme="dark"] .icon-color,
-      :root[data-mode="dark"] .icon-color {
-        color: #ffffff;
-      }
-    </style>
-  </defs>
-
-  <!-- Card 1: User Guide -->
-  <a href="user_guide/main/index.html" class="card-link">
-    <g id="card-user-guide">
-      <rect class="card-bg" x="30" y="30" width="380" height="580" rx="8"/>
-
-      <text class="card-title" x="50" y="78">📘 User Guide</text>
-
-      <text class="card-text" x="50" y="145">Learn how to use OSMO,</text>
-      <text class="card-text" x="50" y="185">write workflows, and build</text>
-      <text class="card-text" x="50" y="225">Physical AI applications.</text>
-
-      <text class="card-title" x="50" y="295">Topics covered:</text>
-
-      <text class="card-text" x="50" y="345">• Getting started with OSMO</text>
-      <text class="card-text" x="50" y="385">• Writing workflow</text>
-      <text class="card-text" x="65" y="420">specifications</text>
-      <text class="card-text" x="50" y="460">• Working with data and</text>
-      <text class="card-text" x="65" y="495">datasets</text>
-      <text class="card-text" x="50" y="535">• Interactive development</text>
-    </g>
-  </a>
-
-  <!-- Card 2: Deployment Guide -->
-  <a href="deployment_guide/main/index.html" class="card-link">
-    <g id="card-deployment-guide">
-      <rect class="card-bg" x="440" y="30" width="380" height="580" rx="8"/>
-
-      <text class="card-title" x="460" y="78">🚀 Deployment Guide</text>
-
-      <text class="card-text" x="460" y="145">Deploy OSMO infrastructure</text>
-      <text class="card-text" x="460" y="185">and configure your compute</text>
-      <text class="card-text" x="460" y="225">backends.</text>
-
-      <text class="card-title" x="460" y="295">Topics covered:</text>
-
-      <text class="card-text" x="460" y="345">• Infrastructure requirements</text>
-      <text class="card-text" x="460" y="385">• Deploying the OSMO</text>
-      <text class="card-text" x="475" y="420">service</text>
-      <text class="card-text" x="460" y="460">• Configuring storage</text>
-      <text class="card-text" x="475" y="495">backends</text>
-      <text class="card-text" x="460" y="535">• Bring Your Own Compute</text>
-      <text class="card-text" x="460" y="575">• Advanced configuration</text>
-    </g>
-  </a>
-</svg>
diff --git a/docs/index.rst b/docs/index.rst
index 730e1e85..c38fdcd6 100644
--- a/docs/index.rst
+++ b/docs/index.rst
@@ -28,5 +28,39 @@ Select one of the guides below to get started with OSMO.
 
 .. only:: html
 
-  .. raw:: html
-     :file: docs_options.svg
+  .. grid:: 1 2 2 2
+      :gutter: 3
+
+      .. grid-item-card:: :octicon:`book` User Guide
+          :class-card: tool-card
+          :link: user_guide/index.html
+
+          Learn how to use OSMO, write workflows, and build Physical AI applications.
+
+          **Topics covered:**
+
+          • Getting started with OSMO
+
+          • Writing workflow specifications
+
+          • Working with data and datasets
+
+          • Interactive development
+
+      .. grid-item-card:: :octicon:`rocket` Deployment Guide
+          :class-card: tool-card
+          :link: deployment_guide/index.html
+
+          Deploy OSMO infrastructure and configure your compute backends.
+
+          **Topics covered:**
+
+          • Infrastructure requirements
+
+          • Deploying the OSMO service
+
+          • Configuring storage backends
+
+          • Bring Your Own Compute
+
+          • Advanced configuration