diff --git a/index.mdx b/index.mdx
index d6cdc7adc..4ae97c1dc 100644
--- a/index.mdx
+++ b/index.mdx
@@ -1,75 +1,21 @@
 ---
 title: "Introduction"
 description: "Meet the next generation of documentation. AI-native, beautiful out-of-the-box, and built for developers."
-mode: "frame"
-keywords: ["overview", "platform", "getting started", "features"]
 ---
 
-export const HeroCard = ({ filename, title, description, href }) => {
-  return (
-    <a className="group cursor-pointer pb-8" href={href}>
-      <img
-        src={`https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/hero/${filename}.png`}
-        className="block dark:hidden pointer-events-none group-hover:scale-105 transition-all duration-100"
-      />
-      <img
-        src={`https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/hero/${filename}-dark.png`}
-        className="pointer-events-none group-hover:scale-105 transition-all duration-100 hidden dark:block"
-      />
-      <h3 className="mt-5 text-gray-900 dark:text-zinc-50 font-medium">
-        {title}
-      </h3>
-      <span className="mt-1.5">{description}</span>
-    </a>
-  );
-};
-
-<div className="relative">
-  <div className="absolute top-0 left-0 right-0">
-    <img
-      src="/images/hero/background-light.png"
-      className="block dark:hidden pointer-events-none"
-      alt="Decorative background image."
-    />
-    <img
-      src="/images/hero/background-dark.png"
-      className="hidden dark:block pointer-events-none"
-      alt="Decorative background image."
-    />
-  </div>
-
-  <div className="relative z-10 px-4 py-16 lg:py-48 lg:pb-24 max-w-3xl mx-auto">
-    <h1 className="block text-4xl font-medium text-center text-gray-900 dark:text-zinc-50 tracking-tight">
-      Documentation
-    </h1>
-
-    <div className="max-w-xl mx-auto px-4 mt-4 text-lg text-center text-gray-500 dark:text-zinc-500">
-      Meet the next generation of documentation. AI-native, beautiful out-of-the-box, and built for developers and teams.
-    </div>
-
-    <div className="px-6 lg:px-0 mt-12 lg:mt-24 grid sm:grid-cols-2 gap-x-6 gap-y-4">
-      <HeroCard filename="rocket" title="Quickstart" description="Deploy your first docs site in minutes with our step-by-step guide" href="/quickstart" />
-
-      <HeroCard
-        filename="cli"
-        title="CLI installation"
-        description="Install the CLI to preview and develop your docs locally"
-        href="/installation"
-      />
-
-      <HeroCard
-        filename="editor"
-        title="Web editor"
-        description="Make quick updates and manage content with our browser-based editor"
-        href="/editor"
-      />
-
-      <HeroCard
-        filename="components"
-        title="Components"
-        description="Build rich, interactive documentation with our ready-to-use components"
-        href="/text"
-      />
-    </div>
-  </div>
-</div>
+Meet the next generation of documentation. AI-native, beautiful out-of-the-box, and built for developers and teams.
+
+<CardGroup cols={2}>
+  <Card title="Quickstart" icon="rocket" href="/quickstart">
+    Deploy your first docs site in minutes
+  </Card>
+  <Card title="CLI installation" icon="terminal" href="/installation">
+    Preview and develop your docs locally
+  </Card>
+  <Card title="Web editor" icon="pen-to-square" href="/editor">
+    Make quick updates in your browser
+  </Card>
+  <Card title="Components" icon="grid-2" href="/create/text">
+    Build rich, interactive documentation
+  </Card>
+</CardGroup>