diff --git a/components/FullComponentWrapper.module.css b/components/CenterComponentWrapper.module.css
similarity index 55%
rename from components/FullComponentWrapper.module.css
rename to components/CenterComponentWrapper.module.css
index fbff2cf..0f44265 100644
--- a/components/FullComponentWrapper.module.css
+++ b/components/CenterComponentWrapper.module.css
@@ -1,12 +1,18 @@
 .wrapper {
-  align-items: center;
-  justify-content: center;
   display: flex;
   flex-direction: column;
+  justify-content: center;
+  align-items: center;
   text-align: center;
-  width: 80%;
-  align-self: center;
-  margin: calc(40rem / 16) 0;
+  margin: calc(40rem / 16) auto;
+  padding: 0 15%;
+}
+
+
+@media screen and (max-width: 768px) {
+  .wrapper {
+    padding: 0 calc(20rem / 16);
+  }
 }
 
 
diff --git a/components/FullComponentWrapper.tsx b/components/CenterComponentWrapper.tsx
similarity index 57%
rename from components/FullComponentWrapper.tsx
rename to components/CenterComponentWrapper.tsx
index 2627d67..5e4052f 100644
--- a/components/FullComponentWrapper.tsx
+++ b/components/CenterComponentWrapper.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 
-import styles from "./FullComponentWrapper.module.css";
+import styles from "./CenterComponentWrapper.module.css";
 
 type FullComponentWrapperProps = {
   children: React.ReactNode;
@@ -8,18 +8,18 @@ type FullComponentWrapperProps = {
   body: string;
 };
 
-export default function FullComponentWrapper({
+export function CenterComponentWrapper({
   heading,
   body,
   children,
 }: FullComponentWrapperProps) {
   return (
-    <div className={styles.wrapper}>
-      <div className={styles.textWrapper}>
-        <h3 className={styles.heading}>{heading}</h3>
+    <section className={styles.wrapper}>
+      <div>
+        <h3>{heading}</h3>
         <p className={styles.body}>{body}</p>
       </div>
       <div className={styles.graphWrapper}>{children}</div>
-    </div>
+    </section>
   );
 }
diff --git a/components/SideComponentWrapper.module.css b/components/SideComponentWrapper.module.css
index a04da5d..73ef1f6 100644
--- a/components/SideComponentWrapper.module.css
+++ b/components/SideComponentWrapper.module.css
@@ -1,9 +1,9 @@
 .wrapperCommon {
   background-color: var(--secondary-background);
   display: flex;
-  width: 95%;
   padding: calc(40rem / 16) calc(50rem / 16);
   margin: calc(40rem / 16) 0;
+  width: 90%;
 }
 
 .wrapperRight {
@@ -12,6 +12,8 @@
   margin-right: 0;
   padding-right: 0;
   border-radius: calc(200rem / 16) 0 0 calc(200rem / 16);
+  flex-direction: row-reverse;
+  padding-right: calc(50rem / 16);
 }
 
 .wrapperLeft {
@@ -19,20 +21,32 @@
   align-self: start;
   margin-left: 0;
   padding-left: 0;
-  border-radius: 0 12.5rem 12.5rem 0;
+  border-radius: 0 calc(200rem / 16) calc(200rem / 16) 0;
+  flex-direction: row;
+  padding-left: calc(50rem / 16);
+}
+
+.noBackground {
+  background: none;
+  margin: calc(40rem / 16);
 }
 
 @media screen and (max-width: 768px) {
   .wrapperCommon {
+    margin: auto;
     flex-direction: column;
+    text-align: center;
+    padding: 0;
+    border-radius: 0;
+    width: 100%;
   }
-}
 
-.graphWrapper {
-  margin: calc(20rem / 16);
+  .noBackground {
+    background: none;
+    margin: calc(40rem / 16) 0;
+  }
 }
 
-
-.textWrapper {
-  margin: 0 calc(50rem / 16);
+.internalWrapper {
+  padding: calc(20rem / 16);
 }
\ No newline at end of file
diff --git a/components/SideComponentWrapper.tsx b/components/SideComponentWrapper.tsx
index 3044f4f..f612fac 100644
--- a/components/SideComponentWrapper.tsx
+++ b/components/SideComponentWrapper.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import { useIsMobile } from "utils/isMobile";
 
 import styles from "./SideComponentWrapper.module.css";
 
@@ -8,35 +7,27 @@ type ComponentWrapperProps = {
   heading: string;
   body: string;
   rightAligned?: boolean;
+  noBackground?: boolean;
 };
 
-export default function SideComponentWrapper({
+export function SideComponentWrapper({
   heading,
   body,
   children,
   rightAligned = false,
+  noBackground = false,
 }: ComponentWrapperProps) {
-  const isMobile = useIsMobile();
-
   return (
-    <div className={rightAligned ? styles.wrapperRight : styles.wrapperLeft}>
-      {rightAligned && !isMobile ? (
-        <>
-          <div className={styles.graphWrapper}>{children}</div>
-          <div className={styles.textWrapper}>
-            <h3 className={styles.heading}>{heading}</h3>
-            <p className={styles.body}>{body}</p>
-          </div>
-        </>
-      ) : (
-        <>
-          <div className={styles.textWrapper}>
-            <h3 className={styles.heading}>{heading}</h3>
-            <p className={styles.body}>{body}</p>
-          </div>
-          <div className={styles.graphWrapper}>{children}</div>
-        </>
-      )}
+    <div
+      className={`${rightAligned ? styles.wrapperRight : styles.wrapperLeft} ${
+        noBackground ? styles.noBackground : ""
+      }`}
+    >
+      <div className={styles.internalWrapper}>
+        <h3>{heading}</h3>
+        <p>{body}</p>
+      </div>
+      <div className={styles.internalWrapper}>{children}</div>
     </div>
   );
 }
diff --git a/package-lock.json b/package-lock.json
index 77aa652..7f2a1f1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,8 +19,7 @@
         "@visx/wordcloud": "^2.10.0",
         "next": "12.1.6",
         "react": "18.1.0",
-        "react-dom": "18.1.0",
-        "react-responsive": "^9.0.0-beta.10"
+        "react-dom": "18.1.0"
       },
       "devDependencies": {
         "@types/node": "17.0.38",
@@ -1450,11 +1449,6 @@
         "postcss": "^8.4"
       }
     },
-    "node_modules/css-mediaquery": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/css-mediaquery/-/css-mediaquery-0.1.2.tgz",
-      "integrity": "sha512-COtn4EROW5dBGlE/4PiKnh6rZpAPxDeFLaEEwt4i10jpDMFt2EhQGS79QmmrO+iKCHv0PU/HrOWEhijFd1x99Q=="
-    },
     "node_modules/css-prefers-color-scheme": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/css-prefers-color-scheme/-/css-prefers-color-scheme-6.0.3.tgz",
@@ -2539,11 +2533,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/hyphenate-style-name": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz",
-      "integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ=="
-    },
     "node_modules/ignore": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.0.tgz",
@@ -2942,14 +2931,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/matchmediaquery": {
-      "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/matchmediaquery/-/matchmediaquery-0.3.1.tgz",
-      "integrity": "sha512-Hlk20WQHRIm9EE9luN1kjRjYXAQToHOIAHPJn9buxBwuhfTHoKUcX+lXBbxc85DVQfXYbEQ4HcwQdd128E3qHQ==",
-      "dependencies": {
-        "css-mediaquery": "^0.1.2"
-      }
-    },
     "node_modules/math-expression-evaluator": {
       "version": "1.3.14",
       "resolved": "https://registry.npmjs.org/math-expression-evaluator/-/math-expression-evaluator-1.3.14.tgz",
@@ -3969,23 +3950,6 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
-    "node_modules/react-responsive": {
-      "version": "9.0.0-beta.10",
-      "resolved": "https://registry.npmjs.org/react-responsive/-/react-responsive-9.0.0-beta.10.tgz",
-      "integrity": "sha512-41H8g4FYP46ln16rsHvs9/0ZoZxAPfnNiHET86/5pgS+Vw8fSKfLBuOS2SAquaxOxq7DgPviFoHmybgVvSKCNQ==",
-      "dependencies": {
-        "hyphenate-style-name": "^1.0.0",
-        "matchmediaquery": "^0.3.0",
-        "prop-types": "^15.6.1",
-        "shallow-equal": "^1.2.1"
-      },
-      "engines": {
-        "node": ">=0.10"
-      },
-      "peerDependencies": {
-        "react": ">=16.8.0"
-      }
-    },
     "node_modules/react-use-measure": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/react-use-measure/-/react-use-measure-2.1.1.tgz",
@@ -4153,11 +4117,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/shallow-equal": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/shallow-equal/-/shallow-equal-1.2.1.tgz",
-      "integrity": "sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA=="
-    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -5416,11 +5375,6 @@
         "postcss-selector-parser": "^6.0.9"
       }
     },
-    "css-mediaquery": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/css-mediaquery/-/css-mediaquery-0.1.2.tgz",
-      "integrity": "sha512-COtn4EROW5dBGlE/4PiKnh6rZpAPxDeFLaEEwt4i10jpDMFt2EhQGS79QmmrO+iKCHv0PU/HrOWEhijFd1x99Q=="
-    },
     "css-prefers-color-scheme": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/css-prefers-color-scheme/-/css-prefers-color-scheme-6.0.3.tgz",
@@ -6252,11 +6206,6 @@
         "has-symbols": "^1.0.2"
       }
     },
-    "hyphenate-style-name": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz",
-      "integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ=="
-    },
     "ignore": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.0.tgz",
@@ -6550,14 +6499,6 @@
         "yallist": "^4.0.0"
       }
     },
-    "matchmediaquery": {
-      "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/matchmediaquery/-/matchmediaquery-0.3.1.tgz",
-      "integrity": "sha512-Hlk20WQHRIm9EE9luN1kjRjYXAQToHOIAHPJn9buxBwuhfTHoKUcX+lXBbxc85DVQfXYbEQ4HcwQdd128E3qHQ==",
-      "requires": {
-        "css-mediaquery": "^0.1.2"
-      }
-    },
     "math-expression-evaluator": {
       "version": "1.3.14",
       "resolved": "https://registry.npmjs.org/math-expression-evaluator/-/math-expression-evaluator-1.3.14.tgz",
@@ -7225,17 +7166,6 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
-    "react-responsive": {
-      "version": "9.0.0-beta.10",
-      "resolved": "https://registry.npmjs.org/react-responsive/-/react-responsive-9.0.0-beta.10.tgz",
-      "integrity": "sha512-41H8g4FYP46ln16rsHvs9/0ZoZxAPfnNiHET86/5pgS+Vw8fSKfLBuOS2SAquaxOxq7DgPviFoHmybgVvSKCNQ==",
-      "requires": {
-        "hyphenate-style-name": "^1.0.0",
-        "matchmediaquery": "^0.3.0",
-        "prop-types": "^15.6.1",
-        "shallow-equal": "^1.2.1"
-      }
-    },
     "react-use-measure": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/react-use-measure/-/react-use-measure-2.1.1.tgz",
@@ -7350,11 +7280,6 @@
         "lru-cache": "^6.0.0"
       }
     },
-    "shallow-equal": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/shallow-equal/-/shallow-equal-1.2.1.tgz",
-      "integrity": "sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA=="
-    },
     "shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
diff --git a/package.json b/package.json
index ca968ab..814c0d7 100644
--- a/package.json
+++ b/package.json
@@ -26,8 +26,7 @@
     "@visx/wordcloud": "^2.10.0",
     "next": "12.1.6",
     "react": "18.1.0",
-    "react-dom": "18.1.0",
-    "react-responsive": "^9.0.0-beta.10"
+    "react-dom": "18.1.0"
   },
   "devDependencies": {
     "@types/node": "17.0.38",
diff --git a/pages/index.tsx b/pages/index.tsx
index 024923f..58dda94 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -5,7 +5,7 @@ export default function Home() {
   return (
     <p>
       Click <Link href="/playground">here</Link> to visit the playground
-      <br></br>
+      <br />
       Click <Link href="/samplePage">here</Link> to visit a sample page
     </p>
   );
diff --git a/pages/samplePage.module.css b/pages/samplePage.module.css
index cefb95d..b50d07b 100644
--- a/pages/samplePage.module.css
+++ b/pages/samplePage.module.css
@@ -1,4 +1,5 @@
 .page {
   display: flex;
   flex-direction: column;
+  justify-content: center;
 }
\ No newline at end of file
diff --git a/pages/samplePage.tsx b/pages/samplePage.tsx
index fd0f0f2..aef4f29 100644
--- a/pages/samplePage.tsx
+++ b/pages/samplePage.tsx
@@ -1,11 +1,11 @@
 import { BarGraphHorizontal, BarGraphVertical } from "components/BarGraph";
 import { mockCategoricalData, moreMockCategoricalData } from "data/mocks";
 import React from "react";
-import useWindowDimensions from "utils/getWindowDimensions";
+import { useWindowDimensions } from "utils/getWindowDimensions";
 import { useIsMobile } from "utils/isMobile";
 
-import FullComponentWrapper from "@/components/FullComponentWrapper";
-import SideComponentWrapper from "@/components/SideComponentWrapper";
+import { CenterComponentWrapper } from "@/components/CenterComponentWrapper";
+import { SideComponentWrapper } from "@/components/SideComponentWrapper";
 
 import { WordCloud } from "../components/WordCloud";
 
@@ -35,7 +35,7 @@ export default function SamplePage() {
         />
       </SideComponentWrapper>
 
-      <FullComponentWrapper
+      <CenterComponentWrapper
         heading="What program are you in?"
         body="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."
       >
@@ -48,7 +48,7 @@ export default function SamplePage() {
           width={isMobile ? width / 1.25 : 1000}
           height={500}
         />
-      </FullComponentWrapper>
+      </CenterComponentWrapper>
 
       <SideComponentWrapper
         heading="What program are you in?"
@@ -58,7 +58,45 @@ export default function SamplePage() {
         <BarGraphHorizontal
           className={styles.barGraphDemo}
           data={mockCategoricalData}
-          width={isMobile ? width / 1.25 : width / 2}
+          width={isMobile ? width / 1.45 : width / 2}
+          height={500}
+          margin={{
+            top: 20,
+            bottom: 40,
+            left: 150,
+            right: 20,
+          }}
+        />
+      </SideComponentWrapper>
+
+      <SideComponentWrapper
+        heading="What program are you in?"
+        body="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."
+        noBackground
+      >
+        <BarGraphHorizontal
+          className={styles.barGrapDemo}
+          data={mockCategoricalData}
+          width={isMobile ? width / 1.45 : width / 2}
+          height={500}
+          margin={{
+            top: 20,
+            bottom: 40,
+            left: 150,
+            right: 20,
+          }}
+        />
+      </SideComponentWrapper>
+
+      <SideComponentWrapper
+        heading="What program are you in?"
+        body="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."
+        rightAligned
+      >
+        <BarGraphHorizontal
+          className={styles.barGraphDemo}
+          data={mockCategoricalData}
+          width={isMobile ? width / 1.45 : width / 2}
           height={500}
           margin={{
             top: 20,
@@ -68,6 +106,21 @@ export default function SamplePage() {
           }}
         />
       </SideComponentWrapper>
+
+      <SideComponentWrapper
+        heading="What program are you in?"
+        body="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."
+        noBackground
+      >
+        <WordCloud
+          data={moreMockCategoricalData.map((word) => ({
+            text: word.key,
+            value: word.value,
+          }))}
+          width={isMobile ? width / 1.5 : width / 2}
+          height={500}
+        />
+      </SideComponentWrapper>
     </div>
   );
 }
diff --git a/utils/getWindowDimensions.ts b/utils/getWindowDimensions.ts
index c071cb7..427568b 100644
--- a/utils/getWindowDimensions.ts
+++ b/utils/getWindowDimensions.ts
@@ -15,7 +15,7 @@ const getWindowDimensions = (): WindowDimensions => {
   };
 };
 
-const useWindowDimensions = (): WindowDimensions => {
+export const useWindowDimensions = (): WindowDimensions => {
   const [windowDimensions, setWindowDimensions] = useState<WindowDimensions>({
     width: 0,
     height: 0,
@@ -33,5 +33,3 @@ const useWindowDimensions = (): WindowDimensions => {
 
   return windowDimensions;
 };
-
-export default useWindowDimensions;
diff --git a/utils/isMobile.ts b/utils/isMobile.ts
index d70db1d..e0a0d4f 100644
--- a/utils/isMobile.ts
+++ b/utils/isMobile.ts
@@ -1,3 +1,3 @@
-import { useMediaQuery } from "react-responsive";
+import { useWindowDimensions } from "./getWindowDimensions";
 
-export const useIsMobile = () => useMediaQuery({ query: "(max-width: 768px)" });
+export const useIsMobile = () => useWindowDimensions().width < 768;