diff --git a/package-lock.json b/package-lock.json
index 73bdcc1..3d22ede 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
         "@emotion/styled": "^11.13.0",
         "@mui/material": "^6.1.4",
         "@mui/styled-engine-sc": "^6.1.4",
+        "@radix-ui/react-icons": "^1.3.0",
         "@radix-ui/themes": "^3.1.4",
         "iconoir-react": "^7.9.0",
         "react": "^18.3.1",
@@ -1784,6 +1785,14 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-icons": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-icons/-/react-icons-1.3.0.tgz",
+      "integrity": "sha512-jQxj/0LKgp+j9BiTXz3O3sgs26RNet2iLWmsPyRz2SIcR4q/4SbazXfnYwbAr+vLYKSfc7qxzyGQA1HLlYiuNw==",
+      "peerDependencies": {
+        "react": "^16.x || ^17.x || ^18.x"
+      }
+    },
     "node_modules/@radix-ui/react-id": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.0.tgz",
diff --git a/package.json b/package.json
index b5b16f1..6bf5d80 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "@emotion/styled": "^11.13.0",
     "@mui/material": "^6.1.4",
     "@mui/styled-engine-sc": "^6.1.4",
+    "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/themes": "^3.1.4",
     "iconoir-react": "^7.9.0",
     "react": "^18.3.1",
diff --git a/src/App.tsx b/src/App.tsx
index cd15909..259169d 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,11 +1,14 @@
+import React, { useState } from 'react';
 import "./App.css";
-import Kanban from "./app/Kanban/Kanban" 
+import SetUpPage from "./components/SetUpPage"
+import SemesterBlock from "./components/SemesterBlock"
 
 function App() {
-
+  const [selectedYear, setSelectedYear] = useState<number | null>(null);
   return (
     <>
-      <Kanban/>
+      {/* <SetUpPage></SetUpPage> */}
+      <SemesterBlock selectedYear={2021}></SemesterBlock>
     </>
   );
 }
diff --git a/src/components/SemesterBlock/index.tsx b/src/components/SemesterBlock/index.tsx
new file mode 100644
index 0000000..5cc495a
--- /dev/null
+++ b/src/components/SemesterBlock/index.tsx
@@ -0,0 +1,35 @@
+import { Box } from "@radix-ui/themes";
+import React, { useState } from 'react';
+import {  Button } from "@radix-ui/themes";
+import "./semesterblock.css"
+
+interface SemesterYearProps  {
+    selectedYear: number | string;
+  };
+
+function SemesterBlock({ selectedYear }: SemesterYearProps) {
+    const [classList, setClassList] = useState<string[]>([]);
+
+  const handleAddClass = () => {
+    setClassList([...classList, `Class ${classList.length + 1}`]);
+  };
+    return (
+    <div className="container">
+      <h2 className="title">Fall {selectedYear} <p className="counter">{classList.length}</p></h2>
+
+      <div className="class-list">
+        {classList.map((className, index) => (
+          <div key={index} className="class-item">
+            {className}
+          </div>
+        ))}
+      </div>
+
+      <Button onClick={handleAddClass} className="add-button">
+        + Add Class
+      </Button>
+    </div>
+    )
+}
+
+export default SemesterBlock;
\ No newline at end of file
diff --git a/src/components/SemesterBlock/semesterblock.css b/src/components/SemesterBlock/semesterblock.css
new file mode 100644
index 0000000..81b1ac0
--- /dev/null
+++ b/src/components/SemesterBlock/semesterblock.css
@@ -0,0 +1,24 @@
+@media (max-width: 600px) {
+    .container {
+        width: 100%; 
+    }
+}
+
+body {
+    background-color: white;
+}
+.container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 20px;
+    background-color: #F8F8F8;
+    border-radius: 8px;
+    width: 300px;
+    margin: 20px auto;
+  }
+
+  .counter {
+    background-color: #E7E7E7;
+  }
diff --git a/src/components/SetUpPage/index.tsx b/src/components/SetUpPage/index.tsx
new file mode 100644
index 0000000..5692cca
--- /dev/null
+++ b/src/components/SetUpPage/index.tsx
@@ -0,0 +1,39 @@
+import React, { useState } from 'react';
+import "@radix-ui/themes/styles.css";
+import "./setup.css"
+import { Flex, Text, Button, Checkbox } from "@radix-ui/themes";
+import YearDropdown from "./year-dropdown";
+
+
+function SetUpPage() {
+
+  return (
+    <Flex className="container" direction="column" gap="0" width="100%" align="center">
+			<Text className="setup">Set Up</Text>
+      <Text className="enteryear">Enter your start year and graduation year</Text>
+
+      <Flex className= "yearContainer" direction="row" gap="16px" align="center">
+        <Flex direction="column">
+          <Text>Start Year</Text>
+          <YearDropdown></YearDropdown>
+        </Flex>
+
+        <Flex direction="column">
+          <Text>Graduation Year</Text>
+          <YearDropdown></YearDropdown>
+        </Flex>
+      </Flex>
+	  
+
+      <Text as="label" size="2">
+        <Flex gap="2">
+          <Checkbox defaultChecked />
+          Include Summer Semesters?
+        </Flex>
+      </Text>
+			<Button>Next</Button>
+		</Flex>
+  );
+}
+
+export default SetUpPage;
diff --git a/src/components/SetUpPage/setup.css b/src/components/SetUpPage/setup.css
new file mode 100644
index 0000000..58524e0
--- /dev/null
+++ b/src/components/SetUpPage/setup.css
@@ -0,0 +1,58 @@
+.container {
+    width: 500px;
+    flex-direction: column;
+    gap: var(--L, 32px);
+}
+@media (max-width: 600px) {
+    .container {
+        width: 100%; 
+    }
+}
+
+body {
+    background-color: white;
+}
+
+.setup {
+    color: var(--Primary-Text, #000);
+    /* Web UI/Heading/Heading Medium */
+    font-family: "Inter Variable";
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 24px; /* 120% */
+    letter-spacing: -0.2px;
+}
+
+.enteryear {
+    color: var(--Secondary-Text, #8A8A8A);
+    /* Web UI/Body/Body Medium */
+    font-family: "Inter Variable";
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 20px; /* 142.857% */
+    letter-spacing: -0.1px;
+}
+
+.gradYearbox {
+    background-color: white;
+    border: 1px solid var(--Gray-2, #C7C7C7);
+    color: black;
+}
+
+.yearOptions {
+    color: black;
+    width: 100%;
+}
+
+.gradOptionsBox {
+    background-color: white;
+    width: 206px;
+}
+
+.yearContainer {
+    justify-content: "space-between";
+    width: 100%;
+    align-items: center;
+}
\ No newline at end of file
diff --git a/src/components/SetUpPage/year-dropdown.tsx b/src/components/SetUpPage/year-dropdown.tsx
new file mode 100644
index 0000000..055cf5c
--- /dev/null
+++ b/src/components/SetUpPage/year-dropdown.tsx
@@ -0,0 +1,42 @@
+import React, { useState } from 'react';
+import "@radix-ui/themes/styles.css";
+import "./setup.css"
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
+import { ChevronDownIcon } from '@radix-ui/react-icons';
+
+import YearsData from './years.json';
+
+function YearDropdown() {
+  const [gradYear, setGradYear] = useState<string | null>(null);
+	const { years } = YearsData;
+
+	const handleGradSelect = (year: string) => {
+		setGradYear(year);
+	  };
+
+    return (
+        <DropdownMenu.Root>
+		<DropdownMenu.Trigger className='gradYearbox'>
+		{gradYear ? gradYear : 'Select year'}
+        <ChevronDownIcon />
+		</DropdownMenu.Trigger>
+
+		<DropdownMenu.Portal>
+        
+		<DropdownMenu.Content className="gradOptionsBox">
+          {years.map((year) => (
+            <DropdownMenu.Item
+              key={year}
+              onSelect={() => handleGradSelect(year)}
+              className="yearOptions"
+            >
+              {year}
+            </DropdownMenu.Item>
+          ))}
+        </DropdownMenu.Content>
+		</DropdownMenu.Portal>
+	  </DropdownMenu.Root>
+    )
+}
+
+export default YearDropdown;
\ No newline at end of file
diff --git a/src/components/SetUpPage/years.json b/src/components/SetUpPage/years.json
new file mode 100644
index 0000000..f61b26e
--- /dev/null
+++ b/src/components/SetUpPage/years.json
@@ -0,0 +1,14 @@
+{
+    "years": [
+      "2021",
+      "2022",
+      "2023",
+      "2024",
+      "2025",
+      "2026",
+      "2027",
+      "2028",
+      "2029",
+      "2030"
+    ]
+  }
\ No newline at end of file