diff --git a/components/ComponentWrapper.module.css b/components/ComponentWrapper.module.css
index 8cbdc3b..ded0e80 100644
--- a/components/ComponentWrapper.module.css
+++ b/components/ComponentWrapper.module.css
@@ -65,4 +65,10 @@
 
 .internalWrapper {
   padding: calc(20rem / 16);
+}
+
+.internalWrapper p {
+  font-size: calc(24rem / 16);
+  opacity: .85;
+  line-height: 1.25;
 }
\ No newline at end of file
diff --git a/components/SectionHeader.module.css b/components/SectionHeader.module.css
index a9faa52..8723cfb 100644
--- a/components/SectionHeader.module.css
+++ b/components/SectionHeader.module.css
@@ -10,6 +10,7 @@
   color: var(--primary-accent-light);
   font-size: calc(70rem / 16);
   margin: calc(40rem / 16) auto;
+  word-break: break-all;
 }
 
 .subTitle {
diff --git a/data/demographics.ts b/data/demographics.ts
new file mode 100644
index 0000000..2c35a22
--- /dev/null
+++ b/data/demographics.ts
@@ -0,0 +1,348 @@
+export const D1 = [
+  {
+    category: "CS",
+    value: 88,
+  },
+  {
+    category: "CS/BBA",
+    value: 12,
+  },
+  {
+    category: "CFM",
+    value: 5,
+  },
+];
+
+export const D2 = [
+  {
+    category: "Man",
+    value: 72,
+  },
+  {
+    category: "Woman",
+    value: 29,
+  },
+  {
+    category: "Gender non-conforming",
+    value: 4,
+  },
+];
+
+export const D3 = [
+  {
+    category: "She/Her/Her",
+    value: 31,
+  },
+  {
+    category: "He/Him/His",
+    value: 73,
+  },
+  {
+    category: "They/Them/Their",
+    value: 3,
+  },
+];
+
+export const D4 = [
+  {
+    category: "Black",
+    value: 2,
+  },
+  {
+    category: "Latin",
+    value: 1,
+  },
+  {
+    category: "East Asian",
+    value: 68,
+  },
+  {
+    category: "Middle Eastern",
+    value: 2,
+  },
+  {
+    category: "South Asian",
+    value: 13,
+  },
+  {
+    category: "Southeast Asian",
+    value: 2,
+  },
+  {
+    category: "White",
+    value: 18,
+  },
+  {
+    category: "Prefer not to say",
+    value: 1,
+  },
+];
+
+export const D5 = [
+  {
+    category: "89",
+    value: 1,
+  },
+  {
+    category: "90",
+    value: 6,
+  },
+  {
+    category: "91",
+    value: 1,
+  },
+  {
+    category: "92",
+    value: 5,
+  },
+  {
+    category: "93",
+    value: 4,
+  },
+  {
+    category: "94",
+    value: 10,
+  },
+  {
+    category: "95",
+    value: 15,
+  },
+  {
+    category: "96",
+    value: 22,
+  },
+  {
+    category: "97",
+    value: 21,
+  },
+  {
+    category: "98",
+    value: 10,
+  },
+  {
+    category: "99",
+    value: 8,
+  },
+];
+
+export const D6 = [
+  {
+    category: "Asexual",
+    value: 6,
+  },
+  {
+    category: "Bisexual",
+    value: 12,
+  },
+  {
+    category: "Gay",
+    value: 3,
+  },
+  {
+    category: "Heterosexual",
+    value: 81,
+  },
+  {
+    category: "Queer",
+    value: 3,
+  },
+  {
+    category: "Pansexual",
+    value: 3,
+  },
+  {
+    category: "Questioning",
+    value: 2,
+  },
+  {
+    category: "Prefer not to say",
+    value: 2,
+  },
+];
+
+export const D7 = [
+  {
+    text: "Ontario (Other)",
+    value: 15,
+  },
+  {
+    text: "British Columbia",
+    value: 11,
+  },
+  {
+    text: "Kitchener / Waterloo",
+    value: 5,
+  },
+  {
+    text: "Alberta",
+    value: 3,
+  },
+  {
+    text: "Quebec",
+    value: 3,
+  },
+  {
+    text: "USA",
+    value: 2,
+  },
+  {
+    text: "Hong Kong",
+    value: 2,
+  },
+  {
+    text: "Manitoba",
+    value: 2,
+  },
+  {
+    text: "India",
+    value: 1,
+  },
+  {
+    text: "GTA / Toronto",
+    value: 1,
+  },
+  {
+    text: "United Arab Emirates",
+    value: 1,
+  },
+  {
+    text: "Indonesia",
+    value: 1,
+  },
+  {
+    text: "Saskatchewan",
+    value: 1,
+  },
+];
+
+export const D8 = [
+  {
+    category: "High School Diploma",
+    value: 2,
+  },
+  {
+    category: "College Diploma",
+    value: 6,
+  },
+  {
+    category: "Bachelor's Degree",
+    value: 43,
+  },
+  {
+    category: "Master's Degree",
+    value: 33,
+  },
+  {
+    category: "Doctoral Degree",
+    value: 17,
+  },
+  {
+    category: "Not Applicable",
+    value: 1,
+  },
+  {
+    category: "Prefer not to say",
+    value: 2,
+  },
+];
+
+export const D9 = [
+  {
+    category: "0-50",
+    value: 9,
+  },
+  {
+    category: "51-100",
+    value: 28,
+  },
+  {
+    category: "101-150",
+    value: 22,
+  },
+  {
+    category: "151-200",
+    value: 23,
+  },
+  {
+    category: "201-250",
+    value: 7,
+  },
+  {
+    category: "251-300",
+    value: 4,
+  },
+  {
+    category: "301+",
+    value: 5,
+  },
+  {
+    category: "Prefer not to say",
+    value: 6,
+  },
+];
+
+export const D10 = [
+  {
+    category: "0",
+    value: 74,
+  },
+  {
+    category: "1",
+    value: 17,
+  },
+  {
+    category: "2",
+    value: 5,
+  },
+  {
+    category: "3",
+    value: 2,
+  },
+  {
+    category: "4",
+    value: 4,
+  },
+  {
+    category: "5",
+    value: 2,
+  },
+];
+
+export const D11 = [
+  {
+    category: "No religious affiliation",
+    value: 79,
+  },
+  {
+    category: "Christianity",
+    value: 16,
+  },
+  {
+    category: "Atheist",
+    value: 1,
+  },
+  {
+    category: "Judaism",
+    value: 3,
+  },
+  {
+    category: "Buddhism",
+    value: 2,
+  },
+  {
+    category: "Islam",
+    value: 1,
+  },
+  {
+    category: "Hinduism",
+    value: 5,
+  },
+  {
+    category: "Jainism",
+    value: 1,
+  },
+  {
+    category: "Prefer not to say",
+    value: 2,
+  },
+];
diff --git a/pages/demographics.tsx b/pages/demographics.tsx
new file mode 100644
index 0000000..7999f88
--- /dev/null
+++ b/pages/demographics.tsx
@@ -0,0 +1,199 @@
+import {
+  D1,
+  D2,
+  D3,
+  D4,
+  D5,
+  D6,
+  D7,
+  D8,
+  D9,
+  D10,
+  D11,
+} from "data/demographics";
+import { pageRoutes } from "data/routes";
+import React from "react";
+import { useWindowDimensions } from "utils/getWindowDimensions";
+import { useIsMobile } from "utils/isMobile";
+
+import { BarGraphHorizontal, BarGraphVertical } from "@/components/BarGraph";
+import { BottomNav } from "@/components/BottomNav";
+import { ComponentWrapper } from "@/components/ComponentWrapper";
+import { Header } from "@/components/Header";
+import { PieChart } from "@/components/PieChart";
+import { SectionHeader } from "@/components/SectionHeader";
+import { WordCloud } from "@/components/WordCloud";
+
+import styles from "./samplePage.module.css";
+
+export default function Demographics() {
+  const { width } = useWindowDimensions();
+  const isMobile = useIsMobile();
+
+  const defaultGraphWidth = isMobile ? width / 1.25 : width / 2;
+  const defaultPieChartWidth = isMobile ? width / 1.25 : width / 3;
+  const defaultGraphHeight = 500;
+
+  const defaultBarGraphMargin = { top: 20, bottom: 80, left: 60, right: 20 };
+
+  const defaultLabelSize = 24;
+  const defaultLabelWidth = 100;
+
+  return (
+    <div className={styles.page}>
+      <Header />
+      <SectionHeader
+        title="Demographics"
+        subtitle="An insight into the demographics of UW’s CS programs"
+      />
+
+      <ComponentWrapper
+        heading="What program are you in?"
+        bodyText="There are a total of 106 respondents of the CS Class Profile. Interestingly, there are a huge number of students that are just in CS, partially due to the overwhelming number of people in CS as seen in the total demographics."
+      >
+        <div className={styles.graphContainer}>
+          <PieChart
+            data={D1}
+            width={defaultPieChartWidth}
+            labelWidth={defaultLabelWidth}
+          />
+        </div>
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="Please select the gender identity option(s) with which you identify."
+        bodyText="The ratio between different genders and pronouns is pretty drastic, but it’s important to note that this is not representative of everyone. There is also an obvious correlation between the gender identities and used pronouns. Note that certain respondents have chosen two or more of the listed categories. We have counted each of them as a separate entry rather than a category itself."
+        align="right"
+        noBackground
+      >
+        <div className={styles.graphContainer}>
+          <PieChart
+            data={D2}
+            width={defaultPieChartWidth}
+            labelWidth={defaultLabelWidth}
+            labelTextSize={defaultLabelSize}
+          />
+        </div>
+      </ComponentWrapper>
+
+      <ComponentWrapper heading="Please indicate the pronouns that you use.">
+        <div className={styles.graphContainer}>
+          <PieChart
+            data={D3}
+            width={defaultPieChartWidth}
+            labelWidth={defaultLabelWidth}
+            labelTextSize={defaultLabelSize}
+          />
+        </div>
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="Please select the racial category or categories with which you primarily identify."
+        bodyText="We have quite a bit diversity in here! It’s great to see that, and extrapolating this to the rest of the population would probably yield similar results. Note that certain respondents have chosen two or more of the listed categories. We have counted each of them as a separate entry rather than a category itself."
+        align="left"
+        noBackground
+      >
+        <BarGraphVertical
+          data={D4}
+          width={defaultGraphWidth}
+          height={defaultGraphHeight}
+          margin={defaultBarGraphMargin}
+        />
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="What was your high school admissions average?"
+        bodyText="With a mean average of roughly 95.5%, getting into any of these programs is no easy feat. That makes everyone special from the day they were admitted into the school! :)"
+      >
+        <BarGraphVertical
+          data={D5}
+          width={defaultGraphWidth}
+          height={defaultGraphHeight}
+          margin={defaultBarGraphMargin}
+        />
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="Please select the sexual identity option(s) you identify with."
+        bodyText="There are a total of 106 respondents of the CS Class Profile. Interestingly, there are a huge number of students that are just in CS, partially due to the overwhelming number of people in CS as seen in the total demographics. Note that certain respondents have chosen two or more of the listed categories. We have counted each of them as a separate entry rather than a category itself."
+        align="right"
+        noBackground
+      >
+        <BarGraphVertical
+          data={D6}
+          width={defaultGraphWidth}
+          height={defaultGraphHeight}
+          margin={defaultBarGraphMargin}
+        />
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="Where did you live before coming to UW?"
+        bodyText="UW CS gets quite a bit from the GTA as most people may expect. But it’s always great to meet people that come from all over the place."
+        align="right"
+      >
+        <WordCloud
+          data={D7}
+          width={isMobile ? width / 1.5 : 800}
+          height={defaultGraphHeight}
+        />
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="What is the highest education level of your parents?"
+        bodyText="There’s quite a bit of spread in this chart! The real question is, how many of us are matching our parent’s levels of education? Find out later in the Class Profile…"
+        noBackground
+      >
+        <BarGraphVertical
+          data={D8}
+          width={defaultGraphWidth}
+          height={defaultGraphHeight}
+          margin={defaultBarGraphMargin}
+        />
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="What was your family income before entering your current UW program?"
+        bodyText="Most families made more than the average income in Canada today, which has been an increasing number over the last several years (apart from 2019 to 2020). So, it’s safe to say the average income of these individuals was also higher than the average income of Canada at the time they started university."
+        align="right"
+      >
+        <BarGraphVertical
+          // TODO: change when histogram component is ready
+          data={D9}
+          width={defaultGraphWidth}
+          height={defaultGraphHeight}
+          margin={defaultBarGraphMargin}
+        />
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="How many close relatives have attended UW (i.e. siblings, cousins, aunts & uncles, parents, etc.)?"
+        bodyText="Wow! There’s a lot of people that are coming to UW as the first in the family, but it’s great to see that we have people who have had older siblings or other family members come here as well."
+        align="left"
+        noBackground
+      >
+        <BarGraphVertical
+          data={D10}
+          width={defaultGraphWidth}
+          height={defaultGraphHeight}
+          margin={defaultBarGraphMargin}
+        />
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="Please indicate your religion and/or spiritual affiliation."
+        bodyText="There are a total of 106 respondents of the CS Class Profile. Interestingly, there are a huge number of students that are just in CS, partially due to the overwhelming number of people in CS as seen in the total demographics. Note that certain respondents have chosen two or more of the listed categories. We have counted each of them as a separate entry rather than a category itself."
+        align="right"
+      >
+        <BarGraphHorizontal
+          data={D11}
+          width={defaultGraphWidth}
+          height={defaultGraphHeight}
+          margin={{ ...defaultBarGraphMargin, ...{ left: 200 } }}
+        />
+      </ComponentWrapper>
+
+      <BottomNav rightPage={pageRoutes.academics}></BottomNav>
+    </div>
+  );
+}
diff --git a/pages/samplePage.module.css b/pages/samplePage.module.css
index b50d07b..f3761c2 100644
--- a/pages/samplePage.module.css
+++ b/pages/samplePage.module.css
@@ -2,4 +2,26 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
+}
+
+.graphContainer {
+  padding: 0 calc(70rem / 16);
+}
+
+@media screen and (max-width: 1200px) {
+  .graphContainer {
+    padding: 0 calc(40rem / 16);
+  }
+}
+
+@media screen and (max-width: 1100px) {
+  .graphContainer {
+    padding: 0 calc(20rem / 16);
+  }
+}
+
+@media screen and (max-width: 900px) {
+  .graphContainer {
+    padding: 0;
+  }
 }
\ No newline at end of file
diff --git a/utils/isMobile.ts b/utils/isMobile.ts
index 4022df1..a8fbc43 100644
--- a/utils/isMobile.ts
+++ b/utils/isMobile.ts
@@ -1,3 +1,3 @@
 import { useWindowDimensions } from "./getWindowDimensions";
 
-export const useIsMobile = () => useWindowDimensions().width <= 768;
+export const useIsMobile = () => useWindowDimensions().width <= 900;