diff --git a/frontend/package.json b/frontend/package.json
index 2f19f37..9ac9bcb 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -13,6 +13,9 @@
         "@tailwindcss/vite": "^4.2.2",
         "react": "^19.2.4",
         "react-dom": "^19.2.4",
+        "react-markdown": "^10.1.0",
+        "remark": "^15.0.1",
+        "remark-html": "^16.0.1",
         "tailwindcss": "^4.2.2"
     },
     "devDependencies": {
diff --git a/frontend/src.zip b/frontend/src.zip
new file mode 100644
index 0000000..6b6f33f
Binary files /dev/null and b/frontend/src.zip differ
diff --git a/frontend/src/components/ProjectsReadme.jsx b/frontend/src/components/ProjectsReadme.jsx
new file mode 100644
index 0000000..92c40f0
--- /dev/null
+++ b/frontend/src/components/ProjectsReadme.jsx
@@ -0,0 +1,31 @@
+import { useEffect, useState } from "react";
+import ReactMarkdown from "react-markdown";
+
+const fetchREADME = async (url) => {
+    try {
+        const response = await fetch(url);
+        if (!response.ok) throw new Error("Failed to fetch README");
+        return await response.text();
+    } catch (error) {
+        console.error(error);
+        return "Error fetching README.";
+    }
+};
+
+export default function ProjectsReadme() {
+    const [readmeContent, setReadmeContent] = useState("");
+
+    useEffect(() => {
+        fetchREADME(
+            // "https://git.aramjonghu.nl/AramJonghu/aramjonghu-site/src/branch/master/README.md",
+            "../../../README.md",
+        ).then((content) => setReadmeContent(content));
+    }, []);
+
+    return (
+        <div>
+            <h2>README Content</h2>
+            <ReactMarkdown>{readmeContent}</ReactMarkdown>
+        </div>
+    );
+}
diff --git a/frontend/src/pages/Home.jsx b/frontend/src/pages/Home.jsx
index 3a0a197..8c694bd 100644
--- a/frontend/src/pages/Home.jsx
+++ b/frontend/src/pages/Home.jsx
@@ -1,13 +1,13 @@
 import { useState } from "react";
+import ProjectsReadme from "../components/ProjectsReadme";
 
 export default function Home() {
     const [active, setActive] = useState("projects");
-
     const sections = [
         {
             id: "projects",
             title: "Projects",
-            content: "Project content",
+            content: <ProjectsReadme />,
         },
         {
             id: "systems",
@@ -25,19 +25,16 @@ export default function Home() {
         <div className="text-ctp-text flex flex-col items-center justify-center px-6 py-6">
             <div className="w-full max-w-6xl text-center">
                 <h1 className="text-4xl font-bold text-ctp-mauve">
-                    Aram Jonghu
+                    AramJonghu
                 </h1>
-
                 <p className="mt-4">
                     Software engineer building systems, services, and
                     experiments across a self-hosted environment.
                 </p>
-
                 <p className="mt-3">
                     This site acts as a hub for projects, infrastructure, and
                     personal tooling.
                 </p>
-
                 <div className="mt-10 border rounded p-4">
                     <div className="flex flex-wrap justify-center gap-12">
                         {sections.map((section) => (
@@ -52,7 +49,6 @@ export default function Home() {
                             </button>
                         ))}
                     </div>
-
                     <div className="mt-6 text-left relative min-h-20">
                         {sections.map((section) => (
                             <div
@@ -66,7 +62,7 @@ export default function Home() {
                                 <h2 className="text-2xl font-bold text-ctp-mauve">
                                     {section.title}
                                 </h2>
-                                <p>{section.content}</p>
+                                <div>{section.content}</div>{" "}
                             </div>
                         ))}
                     </div>