diff --git a/components/About.module.css b/components/About.module.css
new file mode 100644
index 0000000..3a82b92
--- /dev/null
+++ b/components/About.module.css
@@ -0,0 +1,59 @@
+.aboutWrapper {
+  position: relative;
+  width: 90%;
+}
+
+.about {
+  display: flex;
+  flex-direction: row;
+  padding: calc(45rem / 16);
+}
+
+.about h1 {
+  margin: 0;
+}
+
+.about h4 {
+  margin: 0;
+}
+
+.about aside {
+  flex: 1;
+  margin-right: calc(40rem / 16);
+}
+
+.about aside h1 {
+  color: var(--secondary-accent)
+}
+
+.about aside p {
+  color: var(--primary-accent-lighter)
+}
+
+.about article {
+  flex: 3;
+}
+
+.about article p {
+  color: var(--primary-text);
+}
+
+.angle {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: calc(70rem / 16);
+  height: calc(70rem / 16);
+}
+
+.anglePath {
+  stroke: var(--primary-accent-light)
+}
+
+.left.angle {
+  transform: rotate(180deg);
+  top: unset;
+  left: unset;
+  bottom: 0;
+  right: 0;
+}
diff --git a/components/About.tsx b/components/About.tsx
new file mode 100644
index 0000000..d176012
--- /dev/null
+++ b/components/About.tsx
@@ -0,0 +1,65 @@
+import React from "react";
+
+import styles from "./About.module.css";
+
+export default function About() {
+  return (
+    <div className={styles.aboutWrapper}>
+      <AngleDecoration isBottom={false} />
+      <section className={styles.about}>
+        <aside>
+          <h1>About the Programs</h1>
+          <p>Getting an overview of the CS programs in UW</p>
+        </aside>
+        <article>
+          <h4>Computer Science</h4>
+          <p>
+            Offered from the Faculty of Mathematics as most commonly a co-op
+            program, students usually attend 8 school and 6 co-op terms in their
+            degree. However, CS is very flexible, as many students historically
+            have dropped co-ops, taking terms off, and messing with their
+            schedule to fit their desires.
+          </p>
+          <h4>Computing and Financial Management</h4>
+          <p>
+            Computing and Financial Management (CFM) combines the core CS
+            courses with electives from areas such as accounting, economics, and
+            financial management. This is a joint offer from the Faculty of
+            Mathematics and the School of Accounting and Finance, and has the
+            same schedule (and flexibility) as CS.
+          </p>
+          <h4>CS/BBA</h4>
+          <p>
+            Joint with Wilfrid Laurier University, the Business Administration
+            and Computer Science Double Degree (CS/BBA) is an exclusive offering
+            that allows students to get experience in CS as well as many
+            subfields of business. There are 10 school terms and either 4 or 5
+            co-op terms in the usual schedule, so it’s a bit more work than CS
+            or CFM.
+          </p>
+        </article>
+      </section>
+      <AngleDecoration isBottom={true} />
+    </div>
+  );
+}
+
+interface AngleDecorationProps {
+  isBottom: boolean;
+}
+
+function AngleDecoration({ isBottom }: AngleDecorationProps) {
+  return (
+    <svg
+      viewBox="0 0 100 100"
+      className={isBottom ? `${styles.left} ${styles.angle}` : styles.angle}
+    >
+      <path
+        d="M100,2 L2,2 L2,100"
+        fill="none"
+        strokeWidth="10"
+        className={styles.anglePath}
+      />
+    </svg>
+  );
+}
diff --git a/pages/_app.css b/pages/_app.css
index 8c5d52f..af6ace7 100644
--- a/pages/_app.css
+++ b/pages/_app.css
@@ -24,7 +24,6 @@ body {
   --light--secondary-accent-light: #FEA0C8;
   --light--primary-heading: #D02B53;
   --light--primary-text: #483B35;
-  --light--secondary-text: var(--pink);
   --light--link: var(--orange);
   --light--link-hover: #FFBC9F;
   --light--card-background: #FFFFFF;
@@ -69,22 +68,52 @@ body {
   color: var(--primary-text);
   font-family: "Inconsolata", monospace;
   margin: 0;
+
+  /* Font styling for body */
+  font-size: calc(18rem / 16);
+  font-weight: 500;
 }
 
-h1,
+/* Page titles (e.g. Demographics) */
+h1 {
+  font-size: calc(48rem / 16);
+  font-weight: 700;
+  color: var(--primary-accent-light);
+  margin-top: calc(32rem / 16);
+  margin-bottom: calc(16rem / 16);
+}
+
+/* Major section headings (e.g. About the Programs) */
 h2 {
+  font-size: calc(36rem / 16);
+  font-weight: 700;
   color: var(--primary-heading);
+  margin-top: calc(32rem / 16);
+  margin-bottom: calc(16rem / 16);
 }
 
+/* Minor section headings & questions (e.g. What Program Are You In?) */
 h3 {
+  font-size: calc(32rem / 16);
+  font-weight: 700;
   color: var(--secondary-heading);
-  font-size: calc(45rem / 16);
+  margin-top: calc(24rem / 16);
+  margin-bottom: calc(16rem / 16);
 }
 
-h4,
-h5,
-h6 {
+/* Titles within paragraphs (e.g. About the Programs -> Computer Science)*/
+h4 {
+  font-size: calc(24rem / 16);
+  font-weight: 700;
   color: var(--secondary-heading);
+  margin-top: calc(24rem / 16);
+  margin-bottom: calc(8rem / 16);
+}
+
+p {
+  color: var(--primary-text);
+  margin-top: 1rem;
+  margin-bottom: 1rem;
 }
 
 a {
@@ -96,10 +125,6 @@ a:hover {
   color: var(--link-hover);
 }
 
-p {
-  font-size: calc(28rem / 16);
-}
-
 @media only screen and (prefers-color-scheme: dark) {
   body {
     --primary-background: var(--dark--primary-background);
diff --git a/pages/playground.tsx b/pages/playground.tsx
index fe56f92..3ddf484 100644
--- a/pages/playground.tsx
+++ b/pages/playground.tsx
@@ -11,6 +11,7 @@ import {
 } from "data/mocks";
 import React from "react";
 
+import About from "@/components/About";
 import { PieChart } from "@/components/PieChart";
 import { QuotationCarousel } from "@/components/QuotationCarousel";
 import { Timeline } from "@/components/Timeline";
@@ -35,6 +36,16 @@ export default function Home() {
         <PieChart data={mockPieData} width={800} labelWidth={215} />
       </div>
 
+      <h2>
+        <code>Text Styles</code>
+      </h2>
+      <h1>h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1</h1>
+      <h2>h2 h2 h2 h2 h2 h2 h2 h2 h2 h2 h2 h2 h2 h2 h2 h2 h2 h2</h2>
+      <h3>h3 h3 h3 h3 h3 h3 h3 h3 h3 h3 h3 h3 h3 h3 h3 h3 h3 h3</h3>
+      <h4>h4 h4 h4 h4 h4 h4 h4 h4 h4 h4 h4 h4 h4 h4 h4 h4 h4 h4</h4>
+      <p>p p p p p p p p p p p p p p p p p p p p p p p p p p p p</p>
+      <a href="#">a a a a a a a a a a a a a a a a a a a a a a a a a a a a</a>
+
       <h2>
         <code>{"<BarGraphHorizontal />"}</code>
       </h2>
@@ -118,6 +129,11 @@ export default function Home() {
         </p>
       </CenterWrapper>
 
+      <h2>
+        <code>{"<About />"}</code>
+        <About />
+      </h2>
+
       <h2>
         <code>{"<BoxPlot />"}</code>
       </h2>