diff --git a/docs/components/Card.jsx b/docs/components/Card.jsx
index 56f2595801..67989e67dc 100644
--- a/docs/components/Card.jsx
+++ b/docs/components/Card.jsx
@@ -37,11 +37,14 @@ function Card({ to, header, body, externalIcon = false }) {
             )}
           </h3>
         </div>
-        <div className="card__body">
-          <p>
-            <Translate description={body.translateId}>{body.label}</Translate>
-          </p>
-        </div>
+
+        {typeof body === "object" && (
+          <div className="card__body">
+            <p>
+              <Translate description={body.translateId}>{body.label}</Translate>
+            </p>
+          </div>
+        )}
       </Link>
     </div>
   );
diff --git a/docs/components/HomeCtaLinks.jsx b/docs/components/HomeCtaLinks.jsx
new file mode 100644
index 0000000000..6a7283425a
--- /dev/null
+++ b/docs/components/HomeCtaLinks.jsx
@@ -0,0 +1,34 @@
+import React from "react";
+import Card from "./Card";
+
+export default function HomeCtaLinks() {
+  return (
+    <div className="container">
+      <div className="row cards__container">
+        <Card
+          to="developers"
+          header={{
+            label: "Developers",
+            translateId: "cta-developers",
+          }}
+        />
+
+        <Card
+          to="running-validator"
+          header={{
+            label: "Validators",
+            translateId: "cta-validators",
+          }}
+        />
+
+        <Card
+          to="cluster/overview"
+          header={{
+            label: "Architecture",
+            translateId: "cta-architecture",
+          }}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css
index 795de68317..35cc4a0d71 100644
--- a/docs/src/css/custom.css
+++ b/docs/src/css/custom.css
@@ -57,11 +57,11 @@ main {
 }
 
 .cards__container {
-  margin: 3em 0;
+  /* margin-bottom: 0; */
 }
 
 .cards__container .col {
-  margin-bottom: 1em;
+  margin-bottom: 3em;
 }
 
 .card {
@@ -73,7 +73,12 @@ main {
   transition-duration: 200ms;
   align-items: start;
   height: 100%;
-  box-shadow: 0 8px 15px 2px rgba(86, 91, 115, 0.1);
+  /* box-shadow: 0 8px 15px 2px rgba(86, 91, 115, 0.1); */
+  border: 1px solid #ccc;
+}
+
+[data-theme="dark"] .card {
+  border-color: #444;
 }
 
 .card a {
@@ -81,7 +86,8 @@ main {
 }
 
 .card:hover {
-  transform: translate(0px, -5px);
+  /* transform: translate(0px, -5px); */
+  border-color: var(--ifm-color-primary);
 }
 
 .footer--dark {
diff --git a/docs/src/index.mdx b/docs/src/index.mdx
new file mode 100644
index 0000000000..a0e5881970
--- /dev/null
+++ b/docs/src/index.mdx
@@ -0,0 +1,56 @@
+---
+slug: /
+id: home
+title: Home
+sidebar_label: Home
+description:
+  "Solana is a high performance network that is utilized for a range of use cases, \
+  including finance, NFTs, payments, and gaming."
+# displayed_sidebar: introductionSidebar
+---
+
+# Solana Documentaion
+
+Solana is a blockchain built for mass adoption. It's a high performance network that is utilized for
+a range of use cases, including finance, NFTs, payments, and gaming. Solana operates as a single
+global state machine, and is open, interoperable and decentralized.
+
+## Getting started
+
+Dive right into Solana to start building or setup your tooling.
+
+- [Setup local environment](/cli) - Install the Solana CLI to get your local development environment setup
+- [Hello World in your browser](getstarted/hello-world) - Build and deploy your first on-chain Solana program,
+  directly in your browser using Solana Playground
+
+## Start learning
+
+Build a strong understanding of the core concepts that make Solana different from other blockchains.
+
+- [Transactions](./developing/programming-model/transactions) - Collection of instructions for the blockchain to execute
+- [Accounts](./developing/programming-model/accounts) - Data and state storage mechanism for Solana
+- [Programs](./developing/intro/programs) - The executable code used to perform actions on the blockchain
+- [Cross-Program Invocation](./developing/programming-model/calling-between-programs) - Core of the "composability"
+  of Solana, this is how programs can "call" each other.
+
+## Understanding the architecture
+
+Get to know the underlying architecture of how the proof-of-stake blockchain works.
+
+- [Validators](./validator/anatomy) - the individual nodes that are the backbone of the network
+- [Clusters](./cluster/overview) - a collection of validators that work together for consensus
+
+## Running a validator
+
+Explore what it takes to operate a Solana validator and help secure the network.
+
+- [System requirements](./running-validator/validator-reqs) - Recommended hardware requirements and expected SOL
+  needed to operate a validator
+- [Quick start guide](./running-validator/validator-start) - Setup a validator and get connected to a cluster
+  for the first time
+
+## Learn more
+
+import HomeCtaLinks from "../components/HomeCtaLinks";
+
+<HomeCtaLinks />
diff --git a/docs/src/pages/index.js b/docs/src/pages/index.js
deleted file mode 100644
index 80558d6470..0000000000
--- a/docs/src/pages/index.js
+++ /dev/null
@@ -1,102 +0,0 @@
-import React from "react";
-import Layout from "@theme/Layout";
-import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
-import styles from "./styles.module.css";
-import Card from "../../components/Card";
-
-function Home() {
-  const context = useDocusaurusContext();
-  const { siteConfig = {} } = context;
-
-  return (
-    <Layout title="Homepage" description="Solana Documentation">
-      <main>
-        <section className={styles.features}>
-          <div className="container">
-            <div className="row cards__container">
-              <Card
-                to="developers"
-                header={{
-                  label: "⛏ Start Developing",
-                  translateId: "start-building",
-                }}
-                body={{
-                  label:
-                    "Get started building your decentralized app or marketplace with Solana.",
-                  translateId: "get-started-building",
-                }}
-              />
-
-              <Card
-                to="running-validator"
-                header={{
-                  label: "🎛 Run a Validator Node",
-                  translateId: "run-validator",
-                }}
-                body={{
-                  label:
-                    "Validate transactions, secure the network, and earn rewards.",
-                  translateId: "validate-transactions",
-                }}
-              />
-
-              <Card
-                to="https://spl.solana.com/token"
-                header={{
-                  label: "🏛 Create an SPL Token",
-                  translateId: "create-spl",
-                }}
-                body={{
-                  label:
-                    "Launch your own SPL Token, Solana's equivalent of ERC-20.",
-                  translateId: "erc-20",
-                }}
-              />
-
-              <Card
-                to="integrations/exchange"
-                header={{
-                  label: "🏦 Integrate an Exchange",
-                  translateId: "integrate-exchange",
-                }}
-                body={{
-                  label:
-                    "Follow our extensive integration guide to ensure a seamless user experience.",
-                  translateId: "integration-guide",
-                }}
-              />
-
-              <Card
-                to="wallet-guide"
-                header={{
-                  label: "📲 Manage a Wallet",
-                  translateId: "manage-wallet",
-                }}
-                body={{
-                  label:
-                    "Create a wallet, check your balance, and learn about wallet options.",
-                  translateId: "wallet-options",
-                }}
-              />
-
-              <Card
-                to="introduction"
-                header={{
-                  label: "🤯 Learn How Solana Works",
-                  translateId: "learn-how",
-                }}
-                body={{
-                  label:
-                    "Get a high-level understanding of Solana's architecture.",
-                  translateId: "high-level",
-                }}
-              />
-            </div>
-          </div>
-        </section>
-      </main>
-    </Layout>
-  );
-}
-
-export default Home;