diff --git a/frontend/src/components/About.tsx b/frontend/src/components/About.tsx
new file mode 100644
index 0000000..4aeddf1
--- /dev/null
+++ b/frontend/src/components/About.tsx
@@ -0,0 +1,10 @@
+export default function About() {
+    return(
+        <>
+            <h1 className="text-center m-6 text-3xl font-bold text-ctp-mauve">
+            About
+            </h1>
+            <div></div>
+        </>
+    );
+}
diff --git a/frontend/src/components/Systems.tsx b/frontend/src/components/Systems.tsx
new file mode 100644
index 0000000..668879c
--- /dev/null
+++ b/frontend/src/components/Systems.tsx
@@ -0,0 +1,10 @@
+export default function Systems() {
+    return (
+        <>
+            <h1 className="text-center m-6 text-3xl font-bold text-ctp-mauve">
+                Systems
+            </h1>
+            <div></div>
+        </>
+    );
+}
diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx
index 5798fae..ada68db 100644
--- a/frontend/src/pages/Home.tsx
+++ b/frontend/src/pages/Home.tsx
@@ -1,5 +1,7 @@
 import { useState, type ReactElement } from "react";
 import ProjectsReadme from "../components/ProjectsReadme";
+import Systems from "../components/Systems";
+import About from "../components/About";
 
 interface ProjectInfo {
     id: string;
@@ -73,12 +75,20 @@ export default function Home(): ReactElement {
         {
             id: "systems",
             title: "Systems",
-            content: <p>Systems content goes here.</p>,
+            content: (
+                <>
+                    <Systems />
+                </>
+            ),
         },
         {
             id: "about",
             title: "About",
-            content: <p>About content goes here.</p>,
+            content: (
+                <>
+                <About />
+                </>
+            ),
         },
     ];