diff --git a/packages/react/src/Home.tsx b/packages/react/src/Home.tsx
index 1cc0b3c..baa8d15 100644
--- a/packages/react/src/Home.tsx
+++ b/packages/react/src/Home.tsx
@@ -1,5 +1,30 @@
+import { Link } from "react-router-dom";
+import { Button } from "../components/Button";
+
 function Home() {
-  return <></>;
+  return (
+    <main className="flex-grow h-full flex flex-col p-4 justify-center items-center">
+      <section className="h-full flex flex-col justify-center items-center text-center gap-8">
+        <header className="flex flex-col justify-center items-center gap-2">
+          <h1 className="text-4xl font-bold">
+            Build your components in isolation
+          </h1>
+          <p className="text-xl max-w-xl">
+            There are a lot of component libraries out there, but why it install
+            so many things?
+          </p>
+        </header>
+        <div className="flex flex-row justify-center items-center gap-2">
+          <Button asChild preset="default">
+            <Link to="/docs">Get Started</Link>
+          </Button>
+          <Button asChild preset="ghost">
+            <Link to="/docs/components">Components</Link>
+          </Button>
+        </div>
+      </section>
+    </main>
+  );
 }
 
 export default Home;