diff --git a/data/coop.ts b/data/coop.ts
new file mode 100644
index 0000000..11f1741
--- /dev/null
+++ b/data/coop.ts
@@ -0,0 +1,589 @@
+export const C1 = [
+  {
+    category: "Coop",
+    value: 100,
+  },
+  {
+    category: "Regular",
+    value: 0,
+  },
+];
+
+export const C2 = [
+  {
+    text: "Toronto",
+    value: 32,
+  },
+  {
+    text: "California",
+    value: 26,
+  },
+  {
+    text: "West CA",
+    value: 12,
+  },
+  {
+    text: "East USA",
+    value: 11,
+  },
+  {
+    text: "Waterloo",
+    value: 9,
+  },
+];
+
+export const C3 = [
+  {
+    category: "Yes",
+    value: 17,
+  },
+  {
+    category: "No",
+    value: 83,
+  },
+];
+
+export const C4 = [
+  {
+    text: "Google",
+    value: 14,
+  },
+  {
+    text: "Jane Street",
+    value: 8,
+  },
+  {
+    text: "Meta/Facebook",
+    value: 4,
+  },
+  {
+    text: "Databricks",
+    value: 3,
+  },
+  {
+    text: "HRT",
+    value: 2,
+  },
+  {
+    text: "Cisco Meraki",
+    value: 2,
+  },
+  {
+    text: "Apple",
+    value: 2,
+  },
+  {
+    text: "Datadog",
+    value: 2,
+  },
+  {
+    text: "Shopify",
+    value: 2,
+  },
+  {
+    text: "Stripe",
+    value: 1,
+  },
+  {
+    text: "Citadel",
+    value: 1,
+  },
+  {
+    text: "Faire",
+    value: 1,
+  },
+  {
+    text: "Square",
+    value: 1,
+  },
+  {
+    text: "Salesforce",
+    value: 1,
+  },
+  {
+    text: "Capital One",
+    value: 1,
+  },
+];
+
+export const C5 = [
+  {
+    category: "Yes",
+    value: 6,
+  },
+  {
+    category: "No",
+    value: 94,
+  },
+];
+
+export const C6 = [
+  {
+    category: "0",
+    value: 92,
+  },
+  {
+    category: "1",
+    value: 8,
+  },
+];
+
+export const C7i = [
+  {
+    text: "Google",
+    value: 2,
+  },
+  {
+    text: "Konrad",
+    value: 1,
+  },
+  {
+    text: "Jane Street",
+    value: 2,
+  },
+  {
+    text: "Meta/Facebook",
+    value: 2,
+  },
+  {
+    text: "Microsoft",
+    value: 2,
+  },
+  {
+    text: "Databricks",
+    value: 1,
+  },
+  {
+    text: "HRT",
+    value: 2,
+  },
+  {
+    text: "Asana",
+    value: 1,
+  },
+  {
+    text: "Bloomberg",
+    value: 1,
+  },
+  {
+    text: "SAP",
+    value: 1,
+  },
+  {
+    text: "Cisco Meraki",
+    value: 1,
+  },
+  {
+    text: "Apple",
+    value: 1,
+  },
+  {
+    text: "Datadog",
+    value: 1,
+  },
+  {
+    text: "Shopify",
+    value: 1,
+  },
+  {
+    text: "Stripe",
+    value: 1,
+  },
+  {
+    text: "Citadel",
+    value: 1,
+  },
+  {
+    text: "Faire",
+    value: 1,
+  },
+  {
+    text: "Square",
+    value: 1,
+  },
+  {
+    text: "Salesforce",
+    value: 1,
+  },
+  {
+    text: "Capital One",
+    value: 1,
+  },
+  {
+    text: "Wish",
+    value: 1,
+  },
+  {
+    text: "Thomson Reuters",
+    value: 1,
+  },
+  {
+    text: "Uber",
+    value: 1,
+  },
+  {
+    text: "Rippling",
+    value: 1,
+  },
+  {
+    text: "Intel",
+    value: 1,
+  },
+  {
+    text: "NVIDIA",
+    value: 1,
+  },
+  {
+    text: "Twitch",
+    value: 1,
+  },
+  {
+    text: "RBC",
+    value: 1,
+  },
+  {
+    text: "Huawei",
+    value: 1,
+  },
+  {
+    text: "LinkedIn",
+    value: 1,
+  },
+  {
+    text: "Lyft",
+    value: 1,
+  },
+  {
+    text: "1Password",
+    value: 1,
+  },
+  {
+    text: "IBM",
+    value: 1,
+  },
+  {
+    text: "Snowflake",
+    value: 1,
+  },
+  {
+    text: "Autodesk",
+    value: 1,
+  },
+  {
+    text: "Tableau",
+    value: 1,
+  },
+  {
+    text: "Yugabyte",
+    value: 1,
+  },
+  {
+    text: "Twitter",
+    value: 1,
+  },
+  {
+    text: "Tesla",
+    value: 1,
+  },
+  {
+    text: "Coursera",
+    value: 1,
+  },
+  {
+    text: "EA",
+    value: 1,
+  },
+];
+
+export const C7ii = {
+  xValues: ["1", "2", "3", "4", "5", "6"],
+  lines: [
+    {
+      label: "Waterloo",
+      yValues: [22.1, 18.1, 16.9, 2.6, 1.3, 3.6],
+    },
+    {
+      label: "Toronto",
+      yValues: [50.2, 48.2, 30.4, 7, 4, 3.6],
+    },
+    {
+      label: "Remote",
+      yValues: [7.4, 4.8, 4.8, 82.1, 80.5, 73.2],
+    },
+    {
+      label: "USA(California, Washington, New York)",
+      yValues: [8.4, 18.1, 35, 0, 5.2, 17.9],
+    },
+  ],
+};
+
+export const C7iii = [
+  {
+    category: "1",
+    min: 14,
+    firstQuartile: 18,
+    median: 22,
+    thirdQuartile: 40,
+    max: 50,
+    outliers: [105, 147],
+  },
+  {
+    category: "2",
+    min: 17.5,
+    firstQuartile: 22,
+    median: 25,
+    thirdQuartile: 36,
+    max: 76,
+    outliers: [105],
+  },
+  {
+    category: "3",
+    min: 16,
+    firstQuartile: 26,
+    median: 33,
+    thirdQuartile: 55,
+    max: 95,
+    outliers: [130],
+  },
+  {
+    category: "4",
+    min: 16,
+    firstQuartile: 30,
+    median: 35,
+    thirdQuartile: 60,
+    max: 140,
+    outliers: [],
+  },
+  {
+    category: "5",
+    min: 26,
+    firstQuartile: 39,
+    median: 44,
+    thirdQuartile: 60,
+    max: 145,
+    outliers: [],
+  },
+  {
+    category: "6",
+    min: 24,
+    firstQuartile: 40,
+    median: 48,
+    thirdQuartile: 72,
+    max: 132,
+    outliers: [],
+  },
+];
+
+export const C7iv = [
+  {
+    category: "1",
+    min: 0,
+    firstQuartile: 0,
+    median: 0,
+    thirdQuartile: 300,
+    max: 4000,
+    outliers: [10000],
+  },
+  {
+    category: "2",
+    min: 0,
+    firstQuartile: 0,
+    median: 0,
+    thirdQuartile: 2000,
+    max: 14000,
+    outliers: [],
+  },
+  {
+    category: "3",
+    min: 0,
+    firstQuartile: 0,
+    median: 250,
+    thirdQuartile: 10000,
+    max: 20500,
+    outliers: [],
+  },
+  {
+    category: "4",
+    min: 0,
+    firstQuartile: 0,
+    median: 0,
+    thirdQuartile: 4000,
+    max: 12000,
+    outliers: [],
+  },
+  {
+    category: "5",
+    min: 0,
+    firstQuartile: 0,
+    median: 1250,
+    thirdQuartile: 8000,
+    max: 20000,
+    outliers: [],
+  },
+  {
+    category: "6",
+    min: 0,
+    firstQuartile: 0,
+    median: 1000,
+    thirdQuartile: 15000,
+    max: 30493,
+    outliers: [],
+  },
+];
+
+export const C7vKey = ["Outstanding", "Excellent", "Very Good", "Good"];
+
+export const C7v = [
+  {
+    category: "1",
+    Outstanding: 48.9,
+    Excellent: 33.7,
+    "Very Good": 10.9,
+    Good: 4.3,
+  },
+  {
+    category: "2",
+    Outstanding: 44.6,
+    Excellent: 48.2,
+    "Very Good": 4.8,
+    Good: 1.2,
+  },
+  {
+    category: "3",
+    Outstanding: 54.9,
+    Excellent: 35.4,
+    "Very Good": 8.5,
+    Good: 0,
+  },
+  {
+    category: "4",
+    Outstanding: 49.4,
+    Excellent: 39.2,
+    "Very Good": 3.8,
+    Good: 0,
+  },
+  {
+    category: "5",
+    Outstanding: 54.9,
+    Excellent: 35.4,
+    "Very Good": 8.5,
+    Good: 0,
+  },
+  {
+    category: "6",
+    Outstanding: 30.4,
+    Excellent: 30.4,
+    "Very Good": 10.7,
+    Good: 3.6,
+  },
+];
+
+export const C7viKey = ["5", "4", "3", "2", "1"];
+
+export const C7vi = [
+  {
+    category: "1",
+    5: 41.3,
+    4: 26.1,
+    3: 20.7,
+    2: 8.7,
+    1: 3.3,
+  },
+  {
+    category: "2",
+    5: 37.8,
+    4: 36.6,
+    3: 14.6,
+    2: 9.8,
+    1: 1.2,
+  },
+  {
+    category: "3",
+    5: 39.5,
+    4: 40.7,
+    3: 11.1,
+    2: 4.9,
+    1: 3.7,
+  },
+  {
+    category: "4",
+    5: 33.8,
+    4: 37.7,
+    3: 18.2,
+    2: 9.1,
+    1: 1.3,
+  },
+  {
+    category: "5",
+    5: 51.9,
+    4: 32.5,
+    3: 14.3,
+    2: 1.3,
+    1: 0,
+  },
+  {
+    category: "6",
+    5: 53.7,
+    4: 20.4,
+    3: 18.5,
+    2: 5.6,
+    1: 1.9,
+  },
+];
+
+export const C7vii = {
+  xValues: ["1", "2", "3", "4", "5", "6"],
+  lines: [
+    {
+      label: "Main rounds",
+      yValues: [66.7, 61.4, 62.2, 49.4, 52.6, 46.4],
+    },
+    {
+      label: "Continuous Rounds",
+      yValues: [20.4, 16.9, 13.4, 7.6, 1.3, 1.8],
+    },
+    {
+      label: "Externally",
+      yValues: [12.9, 16.9, 20.7, 35.4, 32.9, 39.3],
+    },
+    {
+      label: "Return",
+      yValues: [0, 4.8, 3.7, 7.8, 11.8, 12.5],
+    },
+  ],
+};
+
+export const C7viiiKey = ["No", "Yes"];
+
+export const C7viii = [
+  {
+    category: "1",
+    Yes: 16.3,
+    No: 83.7,
+  },
+  {
+    category: "2",
+    Yes: 6.1,
+    No: 93.9,
+  },
+  {
+    category: "3",
+    Yes: 8.5,
+    No: 91.5,
+  },
+  {
+    category: "4",
+    Yes: 7.7,
+    No: 92.3,
+  },
+  {
+    category: "5",
+    Yes: 9.1,
+    No: 90.9,
+  },
+  {
+    category: "6",
+    Yes: 5.5,
+    No: 94.5,
+  },
+];
diff --git a/pages/coop.tsx b/pages/coop.tsx
new file mode 100644
index 0000000..39f751f
--- /dev/null
+++ b/pages/coop.tsx
@@ -0,0 +1,310 @@
+import {
+  C1,
+  C2,
+  C3,
+  C4,
+  C5,
+  C6,
+  C7i,
+  C7ii,
+  C7iii,
+  C7iv,
+  C7v,
+  C7vKey,
+  C7vi,
+  C7viKey,
+  C7vii,
+  C7viii,
+  C7viiiKey,
+} from "data/coop";
+import { pageRoutes } from "data/routes";
+import React from "react";
+import { Color } from "utils/Color";
+import { DefaultProp, pieChartProps, wordCloudWidth } from "utils/defaultProps";
+import { useWindowDimensions } from "utils/getWindowDimensions";
+import { useIsMobile } from "utils/isMobile";
+
+import { BottomNav } from "@/components/BottomNav";
+import { BoxPlot } from "@/components/Boxplot";
+import { ComponentWrapper } from "@/components/ComponentWrapper";
+import { Header } from "@/components/Header";
+import { LineGraph } from "@/components/LineGraph";
+import { PieChart } from "@/components/PieChart";
+import { SectionHeader } from "@/components/SectionHeader";
+import {
+  StackedBarGraphHorizontal,
+  StackedBarGraphVertical,
+} from "@/components/StackedBarGraph";
+
+import { WordCloud } from "../components/WordCloud";
+
+import styles from "./samplePage.module.css";
+
+export default function CoopPage() {
+  const pageWidth = useWindowDimensions().width;
+  const isMobile = useIsMobile();
+
+  const colorRange = [
+    Color.primaryAccent,
+    Color.secondaryAccentLight,
+    Color.primaryAccentLight,
+    Color.secondaryAccent,
+  ];
+
+  return (
+    <div className={styles.page}>
+      <Header />
+      <SectionHeader
+        title="Co-op"
+        subtitle="Explore careers, gain experience and earn money through UWaterloo's co-op program!"
+      />
+      {/* C1 */}
+      <ComponentWrapper
+        heading="Are you in a co-op program?"
+        bodyText="There are a total of 106 respondents of the CS Class Profile. Surprisingly, all individuals that participated were in a co-op program! Being part of the co-op program is the default option when applying to CS/CFM/CSBBA. Most don't opt out of it because co-op is one of the best experience you can get from attending the University of Waterloo!"
+      >
+        <div className={styles.graphContainer}>
+          <PieChart data={C1} {...pieChartProps(isMobile, pageWidth)} />
+        </div>
+      </ComponentWrapper>
+
+      {/* C7ii */}
+      <ComponentWrapper
+        heading="Where were you located during work?"
+        bodyText="Many students started in GTA or Waterloo region, then slowly progressed to California / USA. Software jobs in California / USA are known for their prestige and their high paying salary which may explain why most students eventually try them out. However, due to the pandemic, the last 3 co-op placements locations were dominantly remote."
+        align="right"
+        noBackground
+      >
+        <LineGraph
+          data={C7ii}
+          width={isMobile ? pageWidth / 1.5 : 600}
+          height={DefaultProp.graphHeight}
+          margin={{
+            top: 20,
+            bottom: 80,
+            left: 30,
+            right: 20,
+          }}
+          colorRange={colorRange}
+        />
+      </ComponentWrapper>
+
+      {/* C2 */}
+      <ComponentWrapper
+        heading="What was your favourite co-op location?"
+        bodyText="32% of students enjoyed their co-op terms working in Toronto. A close second was students really enjoying their time working in California."
+        align="right"
+      >
+        <WordCloud
+          data={C2}
+          width={wordCloudWidth(isMobile, pageWidth)}
+          height={DefaultProp.graphHeight * 0.7}
+          wordPadding={15}
+          desktopMaxFontSize={75}
+          mobileMaxFontSize={48}
+        />
+      </ComponentWrapper>
+
+      {/* C7i */}
+      <ComponentWrapper
+        heading="What company did you work for?"
+        bodyText="There are lots of companies that people have worked at! It just goes to show that the software world is HUGE. Most people have worked at Google, Meta, Jane Street, and HRT!"
+        align="center"
+      >
+        <WordCloud
+          data={C7i}
+          width={wordCloudWidth(isMobile, pageWidth)}
+          height={DefaultProp.graphHeight}
+          wordPadding={7}
+          desktopMaxFontSize={75}
+          mobileMaxFontSize={38}
+        />
+      </ComponentWrapper>
+
+      {/* c4 */}
+      <ComponentWrapper
+        heading="In your opinion, what is the best company to work at?"
+        bodyText="We’ve got a fair share of companies around here, with Google being dominant as the best. Jane Street ranks 2nd highest. These results seem to be correlating with the most popular companies that students have worked at!"
+      >
+        <WordCloud
+          data={C4}
+          width={wordCloudWidth(isMobile, pageWidth)}
+          height={DefaultProp.graphHeight}
+          wordPadding={14}
+          desktopMaxFontSize={75}
+          mobileMaxFontSize={48}
+        />
+      </ComponentWrapper>
+
+      {/* c3 */}
+      <ComponentWrapper
+        heading="Have you ever had a co-op term without a placement?"
+        bodyText="A sixth of respondents have gone through a term without a co-op. You’re not alone if you here and can’t find one! Finding your first co-op can be especially difficult."
+        align="right"
+        noBackground
+      >
+        <div className={styles.graphContainer}>
+          <PieChart data={C3} {...pieChartProps(isMobile, pageWidth)} />
+        </div>
+      </ComponentWrapper>
+
+      {/* c5 */}
+      <ComponentWrapper
+        heading="Were you ever banned from WaterlooWorks for renegotiating an offer/match?"
+        bodyText="Re-negotiating an offer or a match can be a risky move, especially since students are not supposed to directly contact the employers. Re-negotiating can still be beneficial when you believe that your contract or salary can be better. A lot of people also get banned from WaterlooWork by accepting an external offer while getting matched with another company on WaterlooWorks. Make sure to fill out the 'Arrange your own job' form to avoid this!"
+        align="right"
+      >
+        <div className={styles.graphContainer}>
+          <PieChart data={C5} {...pieChartProps(isMobile, pageWidth)} />
+        </div>
+      </ComponentWrapper>
+
+      {/* c6 */}
+      <ComponentWrapper
+        heading="How many co-op positions did you lose due to COVID-19, if any?"
+        bodyText="Most people probably lost a position immediately when the pandemic began (Winter 2020), but it’s good to see the effects have not trickled too much. Most CS/CFM/CSBBA students do software-related jobs which are easier to transition into a remote environment."
+        noBackground
+      >
+        <div className={styles.graphContainer}>
+          <PieChart data={C6} {...pieChartProps(isMobile, pageWidth)} />
+        </div>
+      </ComponentWrapper>
+
+      {/* C7iii */}
+      <ComponentWrapper
+        heading="What was your salary per hour in CAD (excluding other forms of compensation)?"
+        bodyText="Compensation generally went up throughout the terms! For reference, in 2021, the average co-op salaries in the Faculty of Mathematics in Canada were $20.15, $22.05, $24.98, $27.60, $28.96, and $30.95 CAD, respectively. The same amounts in the USA were $28.08, $30.82, $33.65, $34.50, $37.15, and $37.60 USD, respectively. So, CS students tend to get paid more than the faculty average."
+        align="right"
+      >
+        <BoxPlot
+          width={isMobile ? pageWidth / 1.5 : 500}
+          height={DefaultProp.graphHeight}
+          data={C7iii}
+          margin={{
+            top: 20,
+            left: 20,
+          }}
+        />
+      </ComponentWrapper>
+
+      {/* C7iv */}
+      <ComponentWrapper
+        heading="How much did you receive in other forms of compensation in CAD? (i.e. bonuses, stock options, relocation, housing, etc.)"
+        bodyText="Additional compensation had increased as terms progressed and students got better jobs. It’s great to see students having accommodations to make their lives easier. We can also note that most participants didn't get any other form of compensation which explains why the first quartile and the minimum is at 0 for all terms."
+        noBackground
+      >
+        <BoxPlot
+          width={isMobile ? pageWidth / 1.5 : 600}
+          height={DefaultProp.graphHeight}
+          data={C7iv}
+          valueAxisLeftOffset={75}
+          margin={{
+            top: 20,
+            left: 20,
+          }}
+        />
+      </ComponentWrapper>
+
+      {/* C7v */}
+      <ComponentWrapper
+        heading="What was your coop evaluation rating?"
+        bodyText="Ratings were pretty positive overall! It seems that it's not extremely hard to get an outstanding rating!"
+      >
+        <div style={{ paddingRight: "150px" }}>
+          <StackedBarGraphHorizontal
+            width={isMobile ? pageWidth / 1.5 : 600}
+            height={DefaultProp.graphHeight}
+            keys={C7vKey}
+            colorRange={[
+              Color.primaryAccent,
+              Color.secondaryAccentLight,
+              Color.primaryAccentLighter,
+              Color.secondaryAccent,
+            ]}
+            data={C7v}
+            margin={{
+              top: 20,
+              left: 20,
+            }}
+          />
+        </div>
+      </ComponentWrapper>
+
+      {/* C7vi */}
+      <ComponentWrapper
+        heading="How happy were you with your coop during the work term specified?"
+        bodyText="The ratio of people rating 4+ in happiness stayed roughly the same throughout the terms. There seem to be more 5s towards the last work term as students usually get better jobs that suit their interests and are thus, more satisfied."
+        align="right"
+        noBackground
+      >
+        <div style={{ paddingRight: "150px" }}>
+          <StackedBarGraphVertical
+            width={isMobile ? pageWidth / 1.5 : 600}
+            height={DefaultProp.graphHeight}
+            keys={C7viKey}
+            colorRange={[
+              Color.primaryAccent,
+              Color.secondaryAccentLight,
+              Color.primaryAccentLighter,
+              Color.secondaryAccent,
+              Color.primaryText,
+            ]}
+            data={C7vi}
+            margin={{
+              top: 20,
+              left: 20,
+            }}
+          />
+        </div>
+      </ComponentWrapper>
+
+      {/* C7vii */}
+      <ComponentWrapper
+        heading="How did you find your job?"
+        bodyText="People found more co-ops externally and got more return offers as terms progressed, which makes sense as people gain more experience, become more selective of their co-op positions, and become closer to their graduation date. Companies also generally love to re-hire their interns! WaterlooWorks was still really good in helping people find jobs in the main and continuous rounds."
+        align="right"
+      >
+        <div style={{ padding: "10px" }}>
+          <LineGraph
+            data={C7vii}
+            colorRange={colorRange}
+            width={isMobile ? pageWidth / 1.5 : 600}
+            height={DefaultProp.graphHeight}
+            margin={{
+              top: 20,
+              bottom: 80,
+              left: 30,
+              right: 20,
+            }}
+          />
+        </div>
+      </ComponentWrapper>
+
+      {/* C7viii */}
+      <ComponentWrapper
+        heading="Were you referred for the job?"
+        bodyText="Interestingly, the referral to non-referral ratio stayed roughly the same as the co-op terms progressed, apart from the first one which had the most referrals. This goes to show that, without a doubt, networking can really get you some great opportunities! Especially in your first co-ops when your experience may be lacking!"
+        noBackground
+      >
+        <div style={{ paddingRight: "150px" }}>
+          <StackedBarGraphVertical
+            width={isMobile ? pageWidth / 1.5 : 600}
+            height={DefaultProp.graphHeight}
+            keys={C7viiiKey}
+            colorRange={[Color.primaryAccent, Color.secondaryAccentLight]}
+            data={C7viii}
+            margin={{
+              top: 20,
+              left: 20,
+            }}
+          />
+        </div>
+      </ComponentWrapper>
+
+      <BottomNav
+        leftPage={pageRoutes.academics}
+        rightPage={pageRoutes.lifestyleAndInterests}
+      ></BottomNav>
+    </div>
+  );
+}
diff --git a/pages/demographics.tsx b/pages/demographics.tsx
index b365e08..8bc8117 100644
--- a/pages/demographics.tsx
+++ b/pages/demographics.tsx
@@ -19,6 +19,7 @@ import {
   pieChartProps,
   barGraphMargin,
   barGraphWidth,
+  wordCloudWidth,
 } from "utils/defaultProps";
 import { useWindowDimensions } from "utils/getWindowDimensions";
 import { useIsMobile } from "utils/isMobile";
@@ -107,7 +108,7 @@ export default function Demographics() {
       >
         <WordCloud
           data={D7}
-          width={isMobile ? pageWidth / 1.5 : 800}
+          width={wordCloudWidth(isMobile, pageWidth)}
           height={DefaultProp.graphHeight}
           wordPadding={7}
           desktopMaxFontSize={75}
diff --git a/utils/defaultProps.ts b/utils/defaultProps.ts
index 70dd302..f275e20 100644
--- a/utils/defaultProps.ts
+++ b/utils/defaultProps.ts
@@ -6,27 +6,22 @@ type PropName = typeof propNames[number];
 
 const mobileBarGraphFactor = 1.25;
 const desktopBarGraphFactor = 2;
+export const barGraphWidth = (isMobile: boolean, pageWidth: number) =>
+  isMobile
+    ? pageWidth / mobileBarGraphFactor
+    : pageWidth / desktopBarGraphFactor;
 
 const mobilePieChartFactor = 1.25;
 const desktopPieChartFactor = 3;
+export const pieChartWidth = (isMobile: boolean, pageWidth: number) =>
+  isMobile
+    ? pageWidth / mobilePieChartFactor
+    : pageWidth / desktopPieChartFactor;
 
-const graphWidth = (
-  isMobile: boolean,
-  pageWidth: number,
-  isPieChart: boolean
-): number => {
-  const mobileFactor = isPieChart ? mobilePieChartFactor : mobileBarGraphFactor;
-  const desktopFactor = isPieChart
-    ? desktopPieChartFactor
-    : desktopBarGraphFactor;
-  return isMobile ? pageWidth / mobileFactor : pageWidth / desktopFactor;
-};
-
-export const barGraphWidth = (isMobile: boolean, width: number) =>
-  graphWidth(isMobile, width, false);
-
-export const pieChartWidth = (isMobile: boolean, width: number) =>
-  graphWidth(isMobile, width, true);
+const desktopWordCloudFactor = 1.5;
+const mobileWordCloudWidth = 800;
+export const wordCloudWidth = (isMobile: boolean, pageWidth: number) =>
+  isMobile ? pageWidth / desktopWordCloudFactor : mobileWordCloudWidth;
 
 export const barGraphMargin = {
   top: 20,
@@ -34,7 +29,6 @@ export const barGraphMargin = {
   left: 60,
   right: 20,
 };
-
 export const DefaultProp: { [key in PropName]: number } = {
   graphHeight: 500,
   labelSize: 24,