diff --git a/frontend/src/pages/Courses/Courses.module.css b/frontend/src/pages/Courses/Courses.module.css
new file mode 100644
index 0000000..6f7d668
--- /dev/null
+++ b/frontend/src/pages/Courses/Courses.module.css
@@ -0,0 +1,37 @@
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
+
+.Container {
+    margin: 2% 0% 3% 2%;
+}
+.Row {
+    display: flex;
+    flex-direction: row;
+    margin-bottom: 0.5%;
+}
+
+.Column {
+    display: flex;
+    flex-direction: column;
+    margin-right: 2%;
+    width: 100%;
+}
+
+.Grade {
+    font-weight: 600;
+    font-size:larger;
+    margin-right: 0.5%;
+}
+
+.Year {
+    font-size:small;
+    font-weight: 600;
+    color: #727272;
+    vertical-align: bottom;
+}
+
+.Course {
+    border-radius: 25px;
+    background-color: #E1E9F8;
+    margin-bottom: 0.5%;
+    padding: 1%;
+}
\ No newline at end of file
diff --git a/frontend/src/pages/Courses/Courses.tsx b/frontend/src/pages/Courses/Courses.tsx
index 8a53087..0fcc2aa 100644
--- a/frontend/src/pages/Courses/Courses.tsx
+++ b/frontend/src/pages/Courses/Courses.tsx
@@ -1,5 +1,13 @@
 import React from "react";
+import YearBox from "./components/YearBox";
 
 export default function Courses() {
-  return <div>Courses Page</div>;
+  return (
+    <div>
+      <YearBox text="First Year"/>
+      <YearBox text="Sophmore"/>
+      <YearBox text="Junior"/>
+      <YearBox text="Senior"/>
+    </div>
+  );
 }
diff --git a/frontend/src/pages/Courses/components/CourseBox.tsx b/frontend/src/pages/Courses/components/CourseBox.tsx
new file mode 100644
index 0000000..0a281f5
--- /dev/null
+++ b/frontend/src/pages/Courses/components/CourseBox.tsx
@@ -0,0 +1,15 @@
+import styles from "./../Courses.module.css"
+
+
+type Props = {
+  readonly text: string;
+};
+
+export default function CourseBox({ text }: Props) {
+  return (
+    <div className={styles.Course}>
+        <div>{text}</div>
+        <div>{"full course name"}</div>
+    </div>
+  );
+}
diff --git a/frontend/src/pages/Courses/components/YearBox.tsx b/frontend/src/pages/Courses/components/YearBox.tsx
new file mode 100644
index 0000000..88a164c
--- /dev/null
+++ b/frontend/src/pages/Courses/components/YearBox.tsx
@@ -0,0 +1,38 @@
+import styles from "./../Courses.module.css"
+import CourseBox from "./CourseBox";
+
+type Props = {
+  readonly text: string;
+};
+
+export default function YearBox({ text }: Props) {
+  return (
+    <div className={styles.Container}>
+        <div className={styles.Row}>
+            <div className={styles.Grade}>{text}</div>
+            <div className={styles.Year}>{"(year-year)"}</div>
+        </div>
+        <div className={styles.Row}>
+            <div className={styles.Column}>
+                <div className={styles.Row}>
+                    <div>{"CREDITS"}</div>
+                    <div>{"RATING"}</div>
+                    <div>{"WORKLOAD"}</div>
+                    <div>{"DISTRIBUTIONALS"}</div>
+                </div>
+                <CourseBox text="COURSE NAME #1"/>
+                <CourseBox text="COURSE NAME #2"/>
+            </div>
+            <div className={styles.Column}>
+                <div className={styles.Row}>
+                    <div>{"CREDITS"}</div>
+                    <div>{"RATING"}</div>
+                    <div>{"WORKLOAD"}</div>
+                    <div>{"DISTRIBUTIONALS"}</div>
+                </div>
+                <CourseBox text="COURSE NAME #3"/>
+            </div>
+        </div>
+    </div>
+  );
+}