diff --git a/src/components/homepage/SocialCard.tsx b/src/components/homepage/SocialCard.tsx
index b325d354..eed0e0d0 100644
--- a/src/components/homepage/SocialCard.tsx
+++ b/src/components/homepage/SocialCard.tsx
@@ -20,7 +20,7 @@ export const SocialCard = ({
     >
       {children}
       <a
-        className="absolute top-0 left-0 right-0 bottom-0 hidden rounded-xl border border-accent bg-secondary bg-opacity-95 text-2xl shadow-xl group-hover:flex"
+        className="absolute inset-0 hidden rounded-lg border border-accent bg-secondary bg-opacity-95 text-2xl shadow-xl group-hover:flex"
         href={link}
         rel={isMeLink ? "me noreferrer" : "noreferrer"}
         target="_blank"
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 792b1dc7..605a07b9 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -2,6 +2,12 @@ import Head from "@docusaurus/Head";
 import Link from "@docusaurus/Link";
 import useBaseUrl from "@docusaurus/useBaseUrl";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import {
+  CheckCircleIcon,
+  CommandLineIcon,
+  DevicePhoneMobileIcon,
+  GlobeAltIcon,
+} from "@heroicons/react/24/outline";
 import Layout from "@theme/Layout";
 
 import {
@@ -145,9 +151,10 @@ function Home() {
           </div>
         </div>
       </header>
-      <main className="flex flex-col gap-4">
+
+      <main className="flex flex-col gap-8">
         <div className="bg-primaryDark mx-auto flex w-full lg:w-auto flex-col gap-4 p-4 shadow-inner">
-          <h3 className="text-xl font-bold">Connect with us.</h3>
+          <h3 className="text-xl font-bold">Join the Conversation</h3>
           <div className="flex w-full overflow-x-auto gap-2 flex-wrap justify-center">
             {SocialCards.map((card) => (
               <SocialCard
@@ -161,61 +168,169 @@ function Home() {
             ))}
           </div>
         </div>
-
-        <div className="container mx-auto flex w-auto flex-col">
-          <h2 className="mb-2 text-xl font-medium">
-            Getting started with Meshtastic is as easy as 1, 2, 3!
-          </h2>
-          <ul
-            className="mx-auto relative grid gap-6"
-            style={{
-              gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))",
-            }}
-          >
-            <div className="card">
-              <div className="card__header flex justify-between">
-                <h3>1. Purchase Supported Hardware</h3>
-              </div>
-              <div className="card__body flex justify-center">
-                <p>
-                  Hardware you will want to consider:
-                  <ul>
-                    <li>Radio</li>
-                    <li>Battery</li>
-                    <li>Case</li>
-                    <li>Antenna</li>
-                  </ul>
-                </p>
+        <div className="container mx-auto flex w-auto flex-col gap-8">
+          <h3 className="text-xl font-bold">Getting Started</h3>
+          <div className="flex flex-wrap justify-center gap-6">
+            <div className="flex flex-col items-center">
+              <div className="flex items-center gap-2">
+                <CheckCircleIcon
+                  className="h-8 w-8"
+                  style={{ color: "var(--ifm-color-primary)" }}
+                />
+                <h4 className="text-lg font-bold">Step 1</h4>
               </div>
+              <Link
+                to="/docs/hardware/devices/"
+                className="mt-1 underline hover:no-underline font-semibold"
+              >
+                Choose a Device &rarr;
+              </Link>
+              <p className="text-center max-w-xs">
+                Meshtastic devices are available in a variety of configurations
+                to suit your needs.
+              </p>
             </div>
-            <div className="card">
-              <div className="card__header flex justify-between">
-                <h3>2. Flash & Configure Node</h3>
-              </div>
-              <div className="card__body flex justify-center">
-                <p>
-                  The Meshtastic Web Flasher & Clients can assist you in
-                  flashing the firmware and configuring settings.
-                </p>
+            <div className="flex flex-col items-center">
+              <div className="flex items-center gap-2">
+                <CheckCircleIcon
+                  className="h-8 w-8"
+                  style={{ color: "var(--ifm-color-primary)" }}
+                />
+                <h4 className="text-lg font-bold">Step 2</h4>
               </div>
+              <Link
+                to="/docs/getting-started/"
+                className="mt-1 underline hover:no-underline font-semibold"
+              >
+                Flash and Configure your Device &rarr;
+              </Link>
+              <p className="text-center max-w-xs">
+                Flash your device with the latest version of Meshtastic and
+                configure it to your liking.
+              </p>
             </div>
-            <div className="card">
-              <div className="card__header flex justify-between">
-                <h3>3. Connect to Node</h3>
-              </div>
-              <div className="card__body flex justify-center">
-                <p>
-                  Applications are available for the following systems:
-                  <ul>
-                    <li>Android</li>
-                    <li>iOS</li>
-                    <li>Mac</li>
-                    <li>Web Browser</li>
-                  </ul>
-                </p>
+            <div className="flex flex-col items-center">
+              <div className="flex items-center gap-2">
+                <CheckCircleIcon
+                  className="h-8 w-8"
+                  style={{ color: "var(--ifm-color-primary)" }}
+                />
+                <h4 className="text-lg font-bold">Step 3</h4>
               </div>
+              <Link
+                to="/docs/getting-started/initial-config/"
+                className="mt-1 underline hover:no-underline font-semibold"
+              >
+                Connect to your Device &rarr;
+              </Link>
+              <p className="text-center max-w-xs">
+                Connect to your device via any of our clients to start sending
+                and receiving messages!
+              </p>
             </div>
-          </ul>
+          </div>
+        </div>
+        <div className="container mx-auto flex w-auto flex-col gap-4">
+          <h3 className="text-xl font-bold">Get Connected</h3>
+          <p>
+            Connect and control your Meshtastic devices through various
+            platforms. Choose the client that best fits your needs and device
+            ecosystem.
+          </p>
+        </div>
+        <div className="container mx-auto flex w-auto flex-wrap justify-center gap-6">
+          <div className="card w-[calc(100%-1rem)] sm:w-1/3 md:w-1/4 lg:w-1/4">
+            <div className="card__header flex justify-between">
+              <h4 className="text-lg font-bold">iOS App</h4>
+              <DevicePhoneMobileIcon
+                className="h-8 w-8"
+                style={{ color: "var(--ifm-color-primary)" }}
+              />
+            </div>
+            <div className="card__body flex justify-center">
+              <p>
+                Manage your Meshtastic network on-the-go with our iOS
+                application.
+              </p>
+            </div>
+            <div className="card__footer flex justify-center mt-4">
+              <Link
+                to="/docs/software/apple/installation/"
+                className="mt-1 underline hover:no-underline font-semibold"
+              >
+                Try it out &rarr;
+              </Link>
+            </div>
+          </div>
+          <div className="card w-[calc(100%-1rem)] sm:w-1/3 md:w-1/4 lg:w-1/4">
+            <div className="card__header flex justify-between">
+              <h4 className="text-lg font-bold">Android App</h4>
+              <DevicePhoneMobileIcon
+                className="h-8 w-8"
+                style={{ color: "var(--ifm-color-primary)" }}
+              />
+            </div>
+            <div className="card__body flex justify-center">
+              <p>
+                Connect and control your Meshtastic devices using our Android
+                application.
+              </p>
+            </div>
+            <div className="card__footer flex justify-center mt-4">
+              <Link
+                to="/docs/software/android/installation/"
+                className="mt-1 underline hover:no-underline font-semibold"
+              >
+                Try it out &rarr;
+              </Link>
+            </div>
+          </div>
+          <div className="card w-[calc(100%-1rem)] sm:w-1/3 md:w-1/4 lg:w-1/4">
+            <div className="card__header flex justify-between">
+              <h4 className="text-lg font-bold">Web Client</h4>
+              <GlobeAltIcon
+                className="h-8 w-8"
+                style={{ color: "var(--ifm-color-primary)" }}
+              />
+            </div>
+            <div className="card__body flex justify-center">
+              <p>
+                Access your Meshtastic network from any device with our
+                web-based client.
+              </p>
+            </div>
+            <div className="card__footer flex justify-center mt-4">
+              <Link
+                to="https://client.meshtastic.org"
+                className="mt-1 underline hover:no-underline font-semibold"
+              >
+                Try it out &rarr;
+              </Link>
+            </div>
+          </div>
+          <div className="card w-[calc(100%-1rem)] sm:w-1/3 md:w-1/4 lg:w-1/4">
+            <div className="card__header flex justify-between">
+              <h4 className="text-lg font-bold">Python CLI/SDK</h4>
+              <CommandLineIcon
+                className="h-8 w-8"
+                style={{ color: "var(--ifm-color-primary)" }}
+              />
+            </div>
+            <div className="card__body flex justify-center">
+              <p>
+                Command-line interface and software development kit for Python
+                developers and power users.
+              </p>
+            </div>
+            <div className="card__footer flex justify-center mt-4">
+              <Link
+                to="/docs/software/python/cli/installation/"
+                className="mt-1 underline hover:no-underline font-semibold"
+              >
+                Try it out &rarr;
+              </Link>
+            </div>
+          </div>
         </div>
         <br />
       </main>