diff --git a/website/src/components/Roadmap.tsx b/website/src/components/Roadmap.tsx
new file mode 100644
index 00000000..283a4c8f
--- /dev/null
+++ b/website/src/components/Roadmap.tsx
@@ -0,0 +1,78 @@
+import { Container } from "./Container";
+
+const Roadmap = () => {
+  return (
+    <Container className="">
+      <div className="py-32">
+        <h2 className="text-4xl mb-16">Our Roadmap</h2>
+        <div className="flex flex-col items-center space-y-8 md:space-y-0 md:items-start md:flex-row md:justify-between">
+          <div className="flex flex-col items-center space-y-4">
+            <div className="h-[5rem] w-[5rem] border-4 border-[#a72a1e] rounded-full flex items-center justify-center">
+              <p className="font-bold text-[#a72a1e] text-center">ASAP</p>
+            </div>
+            <h4 className="font-bold text-xl text-[#a72a1e] text-center max-w-[10rem]">Minimum Viable Prototype</h4>
+            <ul className="ml-6 md:ml-8 lg:ml-6 space-y-4 text-[#a72a1e] list-disc">
+              <li>Data Collection Pipeline</li>
+              <li>RL on Human Feedback</li>
+              <li>Assistant v1 usable</li>
+              <li>Out January 2023!</li>
+            </ul>
+          </div>
+          <div>
+            <span className="w-[4vw] h-[4px] mt-8 bg-[#a72a1e] rounded-full hidden md:block" />
+          </div>
+          <span className="w-[4px] h-16 bg-[#a72a1e] rounded-full block md:hidden" />
+          <div className="flex flex-col items-center space-y-4">
+            <div className="h-[5rem] w-[5rem] border-4 border-[#858585] rounded-full flex items-center justify-center">
+              <p className="font-bold text-[#858585] text-center">
+                Q1
+                <br />
+                2023
+              </p>
+            </div>
+            <h4 className="font-bold text-xl text-[#858585] text-center max-w-[10rem]">Growing Up</h4>
+            <ul className="ml-6 md:ml-8 lg:ml-6 space-y-4 text-[#858585] list-disc">
+              <li>Retrieval Augmentation</li>
+              <li>Rapid Personalization</li>
+              <li>Using External Tools</li>
+            </ul>
+          </div>
+          <div>
+            <span className="w-[4vw] h-[4px] mt-8 bg-[#858585] rounded-full hidden md:block" />
+          </div>
+          <span className="w-[4px] h-16 bg-[#858585] rounded-full block md:hidden" />
+          <div className="flex flex-col items-center space-y-4">
+            <div className="h-[5rem] w-[5rem] border-4 border-[#858585] rounded-full flex items-center justify-center">
+              <p className="font-bold text-[#858585] text-center">
+                Q2
+                <br />
+                2023
+              </p>
+            </div>
+            <h4 className="font-bold text-xl text-[#858585] text-center max-w-[10rem]">Growing Up</h4>
+            <ul className="ml-6 md:ml-8 lg:ml-6 space-y-4 text-[#858585] list-disc">
+              <li>Third-Party Extentions</li>
+              <li>Device Control</li>
+              <li>Multi-Modality</li>
+            </ul>
+          </div>
+          <div>
+            <span className="w-[4vw] h-[4px] mt-8 bg-[#858585] rounded-full hidden md:block" />
+          </div>
+          <span className="w-[4px] h-16 bg-[#858585] rounded-full block md:hidden" />
+          <div className="flex flex-col items-center space-y-4">
+            <div className="h-[5rem] w-[5rem] border-4 border-[#858585] rounded-full flex items-center justify-center">
+              <p className="font-bold text-[#858585] text-center">...</p>
+            </div>
+            <h4 className="font-bold text-xl text-[#858585] text-center max-w-[10rem]">Growing Up</h4>
+            <ul className="ml-6 md:ml-8 lg:ml-6 space-y-4 text-[#858585] list-disc">
+              <li>What do you need?</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </Container>
+  );
+};
+
+export default Roadmap;
diff --git a/website/src/components/Services.tsx b/website/src/components/Services.tsx
new file mode 100644
index 00000000..ae20a6d7
--- /dev/null
+++ b/website/src/components/Services.tsx
@@ -0,0 +1,50 @@
+import { Container } from "./Container";
+
+const Services = () => {
+  return (
+    <div className="bg-white py-32 border-t-[1px] border-gray-150">
+      <Container className="">
+        <div className="grid grid-cols-1 lg:grid-cols-10 lg:grid-rows-2">
+          <div className="grid col-span-3 row-span-2">
+            <div className="min-h-[17.5rem] px-12 sm:px-16 row-span-1 flex flex-col justify-center bg-[#307bf3] rounded-tl-[45px] lg:rounded-tl-none lg:rounded-bl-[45px] rounded-br-[45px] lg:rounded-br-none lg:rounded-tr-[45px]">
+              <h4 className="font-bold text-white text-xl mb-4">Your Conversational Assistant</h4>
+              <span className="w-8 h-[2px] bg-white mb-4 block lg:hidden" />
+              <p className="text-white">State-of-the-Art chat assistant that can be personalized to your needs</p>
+            </div>
+            <div className="min-h-[17.5rem] px-12 sm:px-16 row-span-1 flex flex-col justify-center bg-[#275ddf] rounded-tl-[45px] rounded-br-[45px]">
+              <h4 className="font-bold text-white text-xl mb-4">Interface w/ external systems</h4>
+              <span className="w-8 h-[2px] bg-white mb-4 block lg:hidden" />
+              <p className="text-white">
+                Usage of APIs and third-party applications, described via language & demonstrations.
+              </p>
+            </div>
+          </div>
+          <div className="grid grid-rows-2 col-span-3 row-span-2">
+            <div className="min-h-[17.5rem] px-12 sm:px-16 row-span-1 flex flex-col justify-center bg-[#307bf3] lg:bg-[#275ddf] rounded-tl-[45px] rounded-br-[45px]">
+              <h4 className="font-bold text-white text-xl mb-4">Retrieval via Search Engines</h4>
+              <span className="w-8 h-[2px] bg-white mb-4 block lg:hidden" />
+              <p className="text-white">External, upgradeable knowledge: No need for billions of parameters.</p>
+            </div>
+            <div className="min-h-[17.5rem] px-12 sm:px-16 row-span-1 flex flex-col justify-center bg-[#275ddf] lg:bg-[#307bf3] rounded-tl-[45px] lg:rounded-tl-none lg:rounded-bl-[45px] rounded-br-[45px] lg:rounded-br-none lg:rounded-tr-[45px]">
+              <h4 className="font-bold text-white text-xl mb-4">A building block for developers</h4>
+              <span className="w-8 h-[2px] bg-white mb-4 block lg:hidden" />
+              <p className="text-white">Integrate OpenAssistant into your application.</p>
+            </div>
+          </div>
+          <div className="px-12 sm:px-16 py-20 lg:p-20 col-span-4 row-span-2 bg-[#1a44a1] lg:flex lg:flex-col lg:justify-center rounded-tl-[45px] rounded-br-[45px] lg:rounded-tr-[80px] lg:rounded-tl-none lg:rounded-br-none">
+            <h4 className="font-bold text-white text-xl mb-4">OpenAssistant unifies all knowledge work in one place</h4>
+            <span className="w-8 h-[2px] bg-white mb-4 block lg:hidden" />
+            <ul className="ml-4 sm:ml-12 mt-8 space-y-4 list-disc text-white">
+              <li>Uses modern deep learning</li>
+              <li>Runs on consumer hardware</li>
+              <li>Trains on human feedback</li>
+              <li>Free and open</li>
+            </ul>
+          </div>
+        </div>
+      </Container>
+    </div>
+  );
+};
+
+export default Services;
diff --git a/website/src/components/Vision.tsx b/website/src/components/Vision.tsx
new file mode 100644
index 00000000..f6dad567
--- /dev/null
+++ b/website/src/components/Vision.tsx
@@ -0,0 +1,25 @@
+import { Container } from "./Container";
+import Image from "next/image";
+
+const Vision = () => {
+  return (
+    <div className="bg-gray-900 py-20">
+      <Container className="">
+        <div className="grid gap-16 items-center py-20 md:py-32 lg:grid-cols-2">
+          <div>
+            <h2 className="text-4xl text-white mb-6">Our Vision</h2>
+            <p className="text-2xl text-gray-400">
+              We want OpenAssistant to be the single, unifying platform that all other systems use to interface with
+              humans.
+            </p>
+          </div>
+          <div className="m-auto rounded-tl-[45px] rounded-br-[45px] overflow-hidden">
+            <Image src="/images/temp-avatars/av2.jpg" width={450} height={450} alt="temp-image" />
+          </div>
+        </div>
+      </Container>
+    </div>
+  );
+};
+
+export default Vision;
diff --git a/website/src/pages/about.tsx b/website/src/pages/about.tsx
index 1331ad24..4a905164 100644
--- a/website/src/pages/about.tsx
+++ b/website/src/pages/about.tsx
@@ -1,4 +1,7 @@
 import { Container } from "@/components/Container";
+import Services from "@/components/Services";
+import Vision from "@/components/Vision";
+import Roadmap from "@/components/Roadmap";
 import { CallToAction } from "@/components/CallToAction";
 import Image from "next/image";
 
@@ -25,139 +28,9 @@ const AboutPage = () => {
         </div>
       </Container>
 
-      <div className="bg-white py-32 border-t-[1px] border-gray-150">
-        <Container className="">
-          <div className="grid grid-cols-1 lg:grid-cols-10 lg:grid-rows-2">
-            <div className="grid col-span-3 row-span-2">
-              <div className="min-h-[17.5rem] px-12 sm:px-16 row-span-1 flex flex-col justify-center bg-[#307bf3] rounded-tl-[45px] lg:rounded-tl-none lg:rounded-bl-[45px] rounded-br-[45px] lg:rounded-br-none lg:rounded-tr-[45px]">
-                <h4 className="font-bold text-white text-xl mb-4">Your Conversational Assistant</h4>
-                <span className="w-8 h-[2px] bg-white mb-4 block lg:hidden" />
-                <p className="text-white">State-of-the-Art chat assistant that can be personalized to your needs</p>
-              </div>
-              <div className="min-h-[17.5rem] px-12 sm:px-16 row-span-1 flex flex-col justify-center bg-[#275ddf] rounded-tl-[45px] rounded-br-[45px]">
-                <h4 className="font-bold text-white text-xl mb-4">Interface w/ external systems</h4>
-                <span className="w-8 h-[2px] bg-white mb-4 block lg:hidden" />
-                <p className="text-white">
-                  Usage of APIs and third-party applications, described via language & demonstrations.
-                </p>
-              </div>
-            </div>
-            <div className="grid grid-rows-2 col-span-3 row-span-2">
-              <div className="min-h-[17.5rem] px-12 sm:px-16 row-span-1 flex flex-col justify-center bg-[#307bf3] lg:bg-[#275ddf] rounded-tl-[45px] rounded-br-[45px]">
-                <h4 className="font-bold text-white text-xl mb-4">Retrieval via Search Engines</h4>
-                <span className="w-8 h-[2px] bg-white mb-4 block lg:hidden" />
-                <p className="text-white">External, upgradeable knowledge: No need for billions of parameters.</p>
-              </div>
-              <div className="min-h-[17.5rem] px-12 sm:px-16 row-span-1 flex flex-col justify-center bg-[#275ddf] lg:bg-[#307bf3] rounded-tl-[45px] lg:rounded-tl-none lg:rounded-bl-[45px] rounded-br-[45px] lg:rounded-br-none lg:rounded-tr-[45px]">
-                <h4 className="font-bold text-white text-xl mb-4">A building block for developers</h4>
-                <span className="w-8 h-[2px] bg-white mb-4 block lg:hidden" />
-                <p className="text-white">Integrate OpenAssistant into your application.</p>
-              </div>
-            </div>
-            <div className="px-12 sm:px-16 py-20 lg:p-20 col-span-4 row-span-2 bg-[#1a44a1] lg:flex lg:flex-col lg:justify-center rounded-tl-[45px] rounded-br-[45px] lg:rounded-tr-[80px] lg:rounded-tl-none lg:rounded-br-none">
-              <h4 className="font-bold text-white text-xl mb-4">
-                OpenAssistant unifies all knowledge work in one place
-              </h4>
-              <span className="w-8 h-[2px] bg-white mb-4 block lg:hidden" />
-              <ul className="ml-4 sm:ml-12 mt-8 space-y-4 list-disc text-white">
-                <li>Uses modern deep learning</li>
-                <li>Runs on consumer hardware</li>
-                <li>Trains on human feedback</li>
-                <li>Free and open</li>
-              </ul>
-            </div>
-          </div>
-        </Container>
-      </div>
-
-      <div className="bg-gray-900 py-20">
-        <Container className="">
-          <div className="grid gap-16 items-center py-20 md:py-32 lg:grid-cols-2">
-            <div>
-              <h2 className="text-4xl text-white mb-6">Our Vision</h2>
-              <p className="text-2xl text-gray-400">
-                We want OpenAssistant to be the single, unifying platform that all other systems use to interface with
-                humans.
-              </p>
-            </div>
-            <div className="m-auto rounded-tl-[45px] rounded-br-[45px] overflow-hidden">
-              <Image src="/images/temp-avatars/av2.jpg" width={450} height={450} alt="temp-image" />
-            </div>
-          </div>
-        </Container>
-      </div>
-
-      <Container className="">
-        <div className="py-32">
-          <h2 className="text-4xl mb-16">Our Roadmap</h2>
-          <div className="flex flex-col items-center space-y-8 md:space-y-0 md:items-start md:flex-row md:justify-between">
-            <div className="flex flex-col items-center space-y-4">
-              <div className="h-[5rem] w-[5rem] border-4 border-[#a72a1e] rounded-full flex items-center justify-center">
-                <p className="font-bold text-[#a72a1e] text-center">ASAP</p>
-              </div>
-              <h4 className="font-bold text-xl text-[#a72a1e] text-center max-w-[10rem]">Minimum Viable Prototype</h4>
-              <ul className="ml-6 md:ml-8 lg:ml-6 space-y-4 text-[#a72a1e] list-disc">
-                <li>Data Collection Pipeline</li>
-                <li>RL on Human Feedback</li>
-                <li>Assistant v1 usable</li>
-                <li>Out January 2023!</li>
-              </ul>
-            </div>
-            <div>
-              <span className="w-[4vw] h-[4px] mt-8 bg-[#a72a1e] rounded-full hidden md:block" />
-            </div>
-            <span className="w-[4px] h-16 bg-[#a72a1e] rounded-full block md:hidden" />
-            <div className="flex flex-col items-center space-y-4">
-              <div className="h-[5rem] w-[5rem] border-4 border-[#858585] rounded-full flex items-center justify-center">
-                <p className="font-bold text-[#858585] text-center">
-                  Q1
-                  <br />
-                  2023
-                </p>
-              </div>
-              <h4 className="font-bold text-xl text-[#858585] text-center max-w-[10rem]">Growing Up</h4>
-              <ul className="ml-6 md:ml-8 lg:ml-6 space-y-4 text-[#858585] list-disc">
-                <li>Retrieval Augmentation</li>
-                <li>Rapid Personalization</li>
-                <li>Using External Tools</li>
-              </ul>
-            </div>
-            <div>
-              <span className="w-[4vw] h-[4px] mt-8 bg-[#858585] rounded-full hidden md:block" />
-            </div>
-            <span className="w-[4px] h-16 bg-[#858585] rounded-full block md:hidden" />
-            <div className="flex flex-col items-center space-y-4">
-              <div className="h-[5rem] w-[5rem] border-4 border-[#858585] rounded-full flex items-center justify-center">
-                <p className="font-bold text-[#858585] text-center">
-                  Q2
-                  <br />
-                  2023
-                </p>
-              </div>
-              <h4 className="font-bold text-xl text-[#858585] text-center max-w-[10rem]">Growing Up</h4>
-              <ul className="ml-6 md:ml-8 lg:ml-6 space-y-4 text-[#858585] list-disc">
-                <li>Third-Party Extentions</li>
-                <li>Device Control</li>
-                <li>Multi-Modality</li>
-              </ul>
-            </div>
-            <div>
-              <span className="w-[4vw] h-[4px] mt-8 bg-[#858585] rounded-full hidden md:block" />
-            </div>
-            <span className="w-[4px] h-16 bg-[#858585] rounded-full block md:hidden" />
-            <div className="flex flex-col items-center space-y-4">
-              <div className="h-[5rem] w-[5rem] border-4 border-[#858585] rounded-full flex items-center justify-center">
-                <p className="font-bold text-[#858585] text-center">...</p>
-              </div>
-              <h4 className="font-bold text-xl text-[#858585] text-center max-w-[10rem]">Growing Up</h4>
-              <ul className="ml-6 md:ml-8 lg:ml-6 space-y-4 text-[#858585] list-disc">
-                <li>What do you need?</li>
-              </ul>
-            </div>
-          </div>
-        </div>
-      </Container>
-
+      <Services />
+      <Vision />
+      <Roadmap />
       <CallToAction />
     </div>
   );