diff --git a/frontend/src/components/About.tsx b/frontend/src/components/About.tsx
index 3a3861f..0b977a8 100644
--- a/frontend/src/components/About.tsx
+++ b/frontend/src/components/About.tsx
@@ -1,15 +1,14 @@
-export default function About() {
+import { type ReactElement } from "react";
+import MdProcessor from "./MdProcessor";
+import aboutMd from "../content/about.md?raw";
+
+export default function About(): ReactElement {
     return (
         <>
             <h1 className="text-center m-6 text-3xl font-bold text-ctp-mauve">
                 About
             </h1>
-            <div className="flex justify-center mb-6">
-                <p className="text-ctp-text">
-                    
-                </p>
-                <p className="text-ctp-text"></p>
-            </div>
+            <MdProcessor content={aboutMd} />
         </>
     );
 }
diff --git a/frontend/src/components/ProjectsReadme.tsx b/frontend/src/components/MdProcessor.tsx
similarity index 68%
rename from frontend/src/components/ProjectsReadme.tsx
rename to frontend/src/components/MdProcessor.tsx
index a927566..46d6ce8 100644
--- a/frontend/src/components/ProjectsReadme.tsx
+++ b/frontend/src/components/MdProcessor.tsx
@@ -1,4 +1,10 @@
-import { useEffect, useState, useMemo, type ReactElement } from "react";
+import {
+    useEffect,
+    useState,
+    useMemo,
+    type ComponentPropsWithoutRef,
+    type ReactElement,
+} from "react";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import rehypeRaw from "rehype-raw";
@@ -56,44 +62,57 @@ const resolveImageSrc = (src: string, base: string | null): string => {
     return `${base}/${clean}`;
 };
 
-const fetchREADME = async (repoUrl: string): Promise<string> => {
-    try {
-        const rawUrl = toRawUrl(repoUrl);
-        const response = await fetch(rawUrl);
-
-        if (!response.ok) {
-            throw new Error("Failed to fetch README");
-        }
-
-        return await response.text();
-    } catch (error) {
-        console.error(error);
-        return "Error fetching README. Make sure the URL points to a raw markdown file.";
-    }
-};
-
-interface ProjectsReadmeProps {
-    repoUrl: string;
+interface MdProcessorProps {
+    content?: string;
+    repoUrl?: string;
 }
 
-export default function ProjectsReadme({
+export default function MdProcessor({
+    content: directContent,
     repoUrl,
-}: ProjectsReadmeProps): ReactElement {
-    const [readmeContent, setReadmeContent] = useState<string>("");
-    const [isLoading, setIsLoading] = useState<boolean>(true);
+}: MdProcessorProps): ReactElement {
+    const useRemote = !directContent && !!repoUrl;
 
-    const base = useMemo(() => getRepoRawBase(repoUrl), [repoUrl]);
+    const [fetchState, setFetchState] = useState<{
+        url: string;
+        content: string;
+    }>({ url: "", content: "" });
 
     useEffect(() => {
+        if (!useRemote || !repoUrl) return;
+
+        const fetchREADME = async (url: string): Promise<string> => {
+            try {
+                const rawUrl = toRawUrl(url);
+                const response = await fetch(rawUrl);
+
+                if (!response.ok) {
+                    throw new Error("Failed to fetch README");
+                }
+
+                return await response.text();
+            } catch (error) {
+                console.error(error);
+                return "Error fetching README. Make sure the URL points to a raw markdown file.";
+            }
+        };
+
         fetchREADME(repoUrl).then((content) => {
-            setReadmeContent(content);
-            setIsLoading(false);
+            setFetchState({ url: repoUrl, content });
         });
-    }, [repoUrl]);
+    }, [useRemote, repoUrl]);
+
+    const base = useMemo(() => {
+        if (directContent) return null;
+        return repoUrl ? getRepoRawBase(repoUrl) : null;
+    }, [directContent, repoUrl]);
+
+    const loading = useRemote && fetchState.url !== repoUrl;
+    const displayContent = directContent ?? fetchState.content;
 
     return (
         <div className="w-full max-w-4xl mx-auto p-4 md:p-8 bg-ctp-mantle rounded-xl shadow-sm border border-ctp-text">
-            {isLoading ? (
+            {loading ? (
                 <div className="flex flex-col gap-3 animate-pulse w-full">
                     <div className="h-4 bg-ctp-overlay0 rounded-full w-3/4"></div>
                     <div className="h-4 bg-ctp-overlay0 rounded-full w-3/4"></div>
@@ -109,7 +128,7 @@ export default function ProjectsReadme({
                                 className,
                                 children,
                                 ...props
-                            }: React.ComponentPropsWithoutRef<"code">): ReactElement {
+                            }: ComponentPropsWithoutRef<"code">): ReactElement {
                                 const isBlock =
                                     className ||
                                     (typeof children === "string" &&
@@ -139,7 +158,7 @@ export default function ProjectsReadme({
                             pre({
                                 children,
                                 ...props
-                            }: React.ComponentPropsWithoutRef<"pre">): ReactElement {
+                            }: ComponentPropsWithoutRef<"pre">): ReactElement {
                                 return (
                                     <pre
                                         className="bg-ctp-mantle p-4 rounded-lg overflow-x-auto text-sm my-4"
@@ -152,7 +171,7 @@ export default function ProjectsReadme({
 
                             h1({
                                 children,
-                            }: React.ComponentPropsWithoutRef<"h1">): ReactElement {
+                            }: ComponentPropsWithoutRef<"h1">): ReactElement {
                                 return (
                                     <h1 className="text-3xl font-bold text-ctp-mauve mt-8 mb-4 border-b pb-2 border-ctp-green">
                                         {children}
@@ -162,7 +181,7 @@ export default function ProjectsReadme({
 
                             h2({
                                 children,
-                            }: React.ComponentPropsWithoutRef<"h2">): ReactElement {
+                            }: ComponentPropsWithoutRef<"h2">): ReactElement {
                                 return (
                                     <h2 className="text-2xl font-bold text-ctp-lavender mt-8 mb-4 border-b pb-2 border-ctp-green">
                                         {children}
@@ -172,7 +191,7 @@ export default function ProjectsReadme({
 
                             h3({
                                 children,
-                            }: React.ComponentPropsWithoutRef<"h3">): ReactElement {
+                            }: ComponentPropsWithoutRef<"h3">): ReactElement {
                                 return (
                                     <h3 className="text-xl font-bold text-ctp-lavender mt-5 mb-3">
                                         {children}
@@ -182,7 +201,7 @@ export default function ProjectsReadme({
 
                             p({
                                 children,
-                            }: React.ComponentPropsWithoutRef<"p">): ReactElement {
+                            }: ComponentPropsWithoutRef<"p">): ReactElement {
                                 return (
                                     <p className="mb-4 text-ctp-text">
                                         {children}
@@ -192,7 +211,7 @@ export default function ProjectsReadme({
 
                             ul({
                                 children,
-                            }: React.ComponentPropsWithoutRef<"ul">): ReactElement {
+                            }: ComponentPropsWithoutRef<"ul">): ReactElement {
                                 return (
                                     <ul className="list-disc pl-6 mb-4">
                                         {children}
@@ -202,7 +221,7 @@ export default function ProjectsReadme({
 
                             ol({
                                 children,
-                            }: React.ComponentPropsWithoutRef<"ol">): ReactElement {
+                            }: ComponentPropsWithoutRef<"ol">): ReactElement {
                                 return (
                                     <ol className="list-decimal pl-6 mb-4">
                                         {children}
@@ -212,14 +231,14 @@ export default function ProjectsReadme({
 
                             li({
                                 children,
-                            }: React.ComponentPropsWithoutRef<"li">): ReactElement {
+                            }: ComponentPropsWithoutRef<"li">): ReactElement {
                                 return <li className="mb-1">{children}</li>;
                             },
 
                             a({
                                 children,
                                 href,
-                            }: React.ComponentPropsWithoutRef<"a">): ReactElement {
+                            }: ComponentPropsWithoutRef<"a">): ReactElement {
                                 return (
                                     <a
                                         href={href}
@@ -234,7 +253,7 @@ export default function ProjectsReadme({
 
                             blockquote({
                                 children,
-                            }: React.ComponentPropsWithoutRef<"blockquote">): ReactElement {
+                            }: ComponentPropsWithoutRef<"blockquote">): ReactElement {
                                 return (
                                     <blockquote className="border-l-4 border-ctp-text pl-4 py-1 mb-4 bg-ctp-mantle rounded-r-lg">
                                         {children}
@@ -242,10 +261,42 @@ export default function ProjectsReadme({
                                 );
                             },
 
+                            table({
+                                children,
+                            }: ComponentPropsWithoutRef<"table">): ReactElement {
+                                return (
+                                    <div className="overflow-x-auto my-4">
+                                        <table className="w-full border-collapse border border-ctp-overlay0">
+                                            {children}
+                                        </table>
+                                    </div>
+                                );
+                            },
+
+                            th({
+                                children,
+                            }: ComponentPropsWithoutRef<"th">): ReactElement {
+                                return (
+                                    <th className="border border-ctp-overlay0 bg-ctp-surface0 px-4 py-2 text-left font-bold text-ctp-lavender">
+                                        {children}
+                                    </th>
+                                );
+                            },
+
+                            td({
+                                children,
+                            }: ComponentPropsWithoutRef<"td">): ReactElement {
+                                return (
+                                    <td className="border border-ctp-overlay0 px-4 py-2 text-ctp-text">
+                                        {children}
+                                    </td>
+                                );
+                            },
+
                             img({
                                 src,
                                 alt,
-                            }: React.ComponentPropsWithoutRef<"img">): ReactElement {
+                            }: ComponentPropsWithoutRef<"img">): ReactElement {
                                 const resolved = resolveImageSrc(
                                     src || "",
                                     base,
@@ -262,7 +313,7 @@ export default function ProjectsReadme({
                             },
                         }}
                     >
-                        {readmeContent}
+                        {displayContent}
                     </ReactMarkdown>
                 </div>
             )}
diff --git a/frontend/src/components/Systems.tsx b/frontend/src/components/Systems.tsx
index 668879c..01d54a9 100644
--- a/frontend/src/components/Systems.tsx
+++ b/frontend/src/components/Systems.tsx
@@ -1,10 +1,14 @@
-export default function Systems() {
+import { type ReactElement } from "react";
+import MdProcessor from "./MdProcessor";
+import systemsMd from "../content/systems.md?raw";
+
+export default function Systems(): ReactElement {
     return (
         <>
             <h1 className="text-center m-6 text-3xl font-bold text-ctp-mauve">
                 Systems
             </h1>
-            <div></div>
+            <MdProcessor content={systemsMd} />
         </>
     );
 }
diff --git a/frontend/src/content/about.md b/frontend/src/content/about.md
new file mode 100644
index 0000000..fb9f05e
--- /dev/null
+++ b/frontend/src/content/about.md
@@ -0,0 +1,74 @@
+## Background
+
+Currently a software engineering student. Have primarily done full-stack web development, but my interest has grown toward backend services using low-level programming languages. I am still learning as I go.
+
+## Motivation
+
+I value security, privacy, human health, and combating climate change. Technology can achieve all of this today to some extent. Unfortunately, we are in times of misinformation, Big Tech taking over, and science denial. In a world becoming seemingly more complex, people are overwhelmed and feel like they have no energy left to assess decisions. People do not hesitate to purchase the newest iPhone, without thinking about whether they truly need the newest device. Or they will install whatever application without thinking about possible consequences: what information is shared and sold about them, or they walk right into getting hacked and suffer financial losses and stress. Large corporations take advantage of people who do not understand such concepts; it has become all about consuming the next new thing to the detriment of people.
+
+I wish to educate myself in technology primarily to be able to combat anti-intellectualism and offer free software to improve people's lives respecting human rights.
+
+## Interests
+
+My interests are primarily projects aiming to solve emerging problems, or ones that significantly improve development experience. I believe that software should be free and open-source.
+
+### Projects
+
+A few notable projects I am interested in:
+
+- GrapheneOS
+- Zig
+- Hyprland
+- Linux
+- Osu!
+- Jujutsu
+
+## Contact
+
+You can contact me via **Email: aramjonghu@tutamail.com** and on **XMPP: aramjonghu@conversations.im**.
+
+## Notable Questions
+
+**Note that I am fully open to being wrong on some of the claims below.**
+
+> **Q:** Why "AramJonghu"?
+>
+> **A:** I played on a Minecraft server with friends and friends of friends back in the 1.5 days. One of them would often say or type "Aram Jonguh" — Jonguh being akin to "bro" in Dutch, so it says "Aram Bro". Liking the name, my IGN became AramJonghu. It is spelled incorrectly, which I did not correct at the time. It has persisted ever since.
+
+> **Q:** What is my setup?
+>
+> **A:** I currently use Artix with OpenRC on Hyprland. I use neovim in the Ghostty terminal (with tmux). My server runs Alpine with OpenRC.
+
+> **Q:** Are you specifically avoiding SystemD?
+>
+> **A:** Yes, but it is not due to the infamous pull request. The concern is not about systemd applying age verification. Rather, I want to explore other options in case SystemD becomes compromised, so to speak. My main reason for switching is to have an init system be an init system first and foremost. A smaller codebase makes it easier to manage.
+>
+> The people behind SystemD seem passionate and oppose dystopian laws. I hope that when laws cross the line, real opposition will occur.
+
+> **Q:** What languages do you actually use?
+>
+> **A:** Mainly use JavaScript/TypeScript (React) and Java as this is what I learned at school. Not a fan of either language.
+
+> **Q:** What languages are you learning?
+>
+> **A:** Currently in the middle of learning Rust and Zig. I especially like the direction of Zig, but due to higher demand for Rust, I will be focusing on Rust first. I have not written any Rust yet. I have written a small Zig program, however.
+
+> **Q:** Are you on LinkedIn?
+>
+> **A:** No. I quit in 2025, understanding that LinkedIn has been a platform to curate a fake image in a race for relevance. It is also owned by Microsoft, which is another deterrent. In my eyes, it is slop.
+
+> **Q:** Why do you have no personal projects on GitHub?
+>
+> **A:** I dropped GitHub because of concerns that my projects would be trained on AI. On top of that, the platform's uptime is becoming increasingly spotty. There have been a few incidents such as projects losing critical progress due to data corruption in pull requests. Worst of all, banning developers who offer critical contributions from GitHub (and sometimes also on GitLab).
+>
+> Although my projects are not anything special today, in preparation, I host my own instance of Forgejo. I also wish that none of my projects be used or shared on proprietary platforms. They do not respect developers, so we should not respect their service either. For work, I will have to use GitHub, which is the only use case GitHub will have for me.
+
+> **Q:** Do you support AI?
+>
+> **A:** Generally, no. I believe AI (LLMs) has done more harm than good. From data collection, climate harm, theft of data and art, and the damage it has done to people who misuse it to skip proper learning, and the billion-dollar circlejerk investments that are actively killing personal computing. The technology itself is interesting and I see real value for specific use cases such as in the health sector to better diagnose patients, improve translation accuracy, or improve development experience. This should not, however, outweigh the many downsides.
+>
+> I try to use AI as sparingly as possible, but I also catch myself being reliant more often than not on some days. In the end, AI should be used as a tool to assist us.
+
+> **Q:** Are billionaires evil?
+>
+> **A:** Yes.
diff --git a/frontend/src/content/systems.md b/frontend/src/content/systems.md
new file mode 100644
index 0000000..e8f8c20
--- /dev/null
+++ b/frontend/src/content/systems.md
@@ -0,0 +1,2 @@
+## Infrastructure
+
diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx
index d851f81..c529b57 100644
--- a/frontend/src/pages/Home.tsx
+++ b/frontend/src/pages/Home.tsx
@@ -1,5 +1,5 @@
 import { useState, type ReactElement } from "react";
-import ProjectsReadme from "../components/ProjectsReadme";
+import MdProcessor from "../components/MdProcessor";
 import Systems from "../components/Systems";
 import About from "../components/About";
 
@@ -68,7 +68,7 @@ export default function Home(): ReactElement {
                             Next ▶︎
                         </button>
                     </div>
-                    <ProjectsReadme repoUrl={projectList[projIdx].url} />
+                    <MdProcessor repoUrl={projectList[projIdx].url} />
                 </>
             ),
         },