diff --git a/docs/components/Features.tsx b/docs/components/Features.tsx
index 57621385fbfef..83d5d5697526c 100644
--- a/docs/components/Features.tsx
+++ b/docs/components/Features.tsx
@@ -1,37 +1,43 @@
-import Feature from "./Feature";
+import React from "react";
 import { DOCS_FEATURES, HOME_FEATURES } from "../content/features";
-import type { Feature as FeatureType } from "../content/features";
+import Feature from "./Feature";
+
+export function HomeFeatures() {
+  return (
+    <DetailedFeaturesGrid>
+      {HOME_FEATURES.map((feature) => (
+        <Feature
+          key={feature.name.split(" ").join("-")}
+          feature={feature}
+          detailed
+        />
+      ))}
+    </DetailedFeaturesGrid>
+  );
+}
+
+export function DocsFeatures({ detailed = true }: { detailed?: boolean }) {
+  return (
+    <div className="grid grid-cols-2 gap-6 my-12 sm:grid-cols-3 ">
+      {DOCS_FEATURES.map((feature) => (
+        <Feature
+          key={feature.name.split(" ").join("-")}
+          feature={feature}
+          detailed={detailed}
+        />
+      ))}
+    </div>
+  );
+}
 
-export default function Features({
-  page = "home",
-  detailed = true,
+export function DetailedFeaturesGrid({
+  children,
 }: {
-  page?: FeatureType["page"];
-  detailed?: boolean;
+  children?: React.ReactNode;
 }) {
-  if (page === "docs") {
-    return (
-      <div className="grid grid-cols-2 gap-6 my-12 sm:grid-cols-3 ">
-        {DOCS_FEATURES.map((feature) => (
-          <Feature
-            key={feature.name.split(" ").join("-")}
-            feature={feature}
-            detailed={detailed}
-          />
-        ))}
-      </div>
-    );
-  } else {
-    return (
-      <div className="grid grid-cols-1 mt-12 gap-x-6 gap-y-12 sm:grid-cols-2 lg:mt-16 lg:grid-cols-3 lg:gap-x-8 lg:gap-y-12">
-        {HOME_FEATURES.map((feature) => (
-          <Feature
-            key={feature.name.split(" ").join("-")}
-            feature={feature}
-            detailed
-          />
-        ))}
-      </div>
-    );
-  }
+  return (
+    <div className="grid grid-cols-1 mt-12 gap-x-6 gap-y-12 sm:grid-cols-2 lg:mt-16 lg:grid-cols-3 lg:gap-x-8 lg:gap-y-12">
+      {children}
+    </div>
+  );
 }
diff --git a/docs/components/pages/home.tsx b/docs/components/pages/home.tsx
index e09f8b9dc111b..d488f043a389e 100644
--- a/docs/components/pages/home.tsx
+++ b/docs/components/pages/home.tsx
@@ -18,7 +18,7 @@ import paularmstrong from "../../images/paularmstrong.jpeg";
 
 import { Container } from "../Container";
 import Tweet, { Mention } from "../Tweet";
-import Features from "../Features";
+import { HomeFeatures } from "../Features";
 import { Marquee } from "../clients/Marquee";
 import { Clients } from "../clients/Clients";
 
@@ -90,7 +90,7 @@ export default function Home() {
             Turborepo reimagines build system techniques used by Facebook and
             Google to remove maintenance burden and overhead.
           </p>
-          <Features />
+          <HomeFeatures />
         </div>
       </div>
       <div className="">
diff --git a/docs/pages/docs/index.mdx b/docs/pages/docs/index.mdx
index f28c9c7e5e7b6..7ec18b058814c 100644
--- a/docs/pages/docs/index.mdx
+++ b/docs/pages/docs/index.mdx
@@ -3,11 +3,11 @@ title: Documentation
 description: Turborepo is a high-performance build system for JavaScript and TypeScript codebases.
 ---
 
-import Features from "../../components/Features";
+import { DocsFeatures } from "../../components/Features";
 
 # Turborepo Documentation
 
-<Features page="docs" detailed={false} />
+<DocsFeatures detailed={false} />
 
 Turborepo is a blazing fast build system for JavaScript/TypeScript _monorepos_: codebases containing multiple
 projects, often using multiple frameworks, in a single, unified