diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 1c61745..2fbface 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -16,18 +16,22 @@ function App() {
   const programs = [CGSC, CPSC, ECON, HIST];
   const strPrograms = JSON.stringify(programs);
   localStorage.setItem("programList", strPrograms);
-
-
   
   return (
   <div>
     <Routes>
-      <Route path="/"             element={auth ? <Navigate to="/graduation"/> : <Navigate to="/login"/>}/> 
+      {/* <Route path="/"             element={auth ? <Navigate to="/graduation"/> : <Navigate to="/login"/>}/> 
       <Route path="/login"        element={auth ? <Navigate to="/graduation"/> : <Login/>}/> 
 
       <Route path="/graduation"   element={auth ? <Graduation/> : <Navigate to="/login"/>}/> 
       <Route path="/courses"      element={auth ? <Courses/> : <Navigate to="/login"/>}/> 
-      <Route path="/majors"       element={auth ? <Majors/> : <Navigate to="/login"/>}/> 
+      <Route path="/majors"       element={auth ? <Majors/> : <Navigate to="/login"/>}/>  */}
+      <Route path="/"             element={<Navigate to="/login"/>}/> 
+      <Route path="/login"        element={<Login />}/> 
+
+      <Route path="/graduation"   element={<Graduation/>}/> 
+      <Route path="/courses"      element={<Courses/>}/> 
+      <Route path="/majors"       element={<Majors/>}/>
     </Routes>
   </div>
   );
diff --git a/frontend/src/commons/images/reallycoolguy.jpg b/frontend/src/commons/images/reallycoolguy.jpg
new file mode 100644
index 0000000..dabaf1d
Binary files /dev/null and b/frontend/src/commons/images/reallycoolguy.jpg differ
diff --git a/frontend/src/pages/Login/Login.module.css b/frontend/src/pages/Login/Login.module.css
new file mode 100644
index 0000000..18d1c45
--- /dev/null
+++ b/frontend/src/pages/Login/Login.module.css
@@ -0,0 +1,59 @@
+.centerDiv {
+    min-height: 100vh;
+    text-align: center;
+    max-width: 1000px;
+    margin-left: auto;
+    margin-right: auto;
+    justify-content: center;
+    align-items: center;
+    padding: 1rem;
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.featureListStyle {
+    list-style: none;
+    display: flex;
+    flex-direction: column;
+    gap: .5rem;
+    margin: 0;
+    padding: 0;
+}
+
+.featureItemStyle {
+    font-weight: 500;
+    transition: transform .3s;
+    cursor: default;
+    text-align: left;
+}
+
+.featureItemStyle:hover {
+    transform: translateX(7px);
+}
+
+.loginButtons {
+    display: flex;
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 3px;
+    justify-content: start;
+    justify-content: center;
+}
+
+.btn {
+    padding: 8px 24px;
+    border-radius: 10px;
+    font-weight: 500;
+    color: black;
+    background-color: lightblue;
+    transition:
+    transform 0.3s,
+    filter 0.3s;
+    margin-top: 8px;
+}
+
+.btn:hover {
+    text-decoration: none;
+    transform: translateY(-5px);
+    filter: brightness(90%);
+  }
\ No newline at end of file
diff --git a/frontend/src/pages/Login/Login.tsx b/frontend/src/pages/Login/Login.tsx
index c4dce4d..f8919d0 100644
--- a/frontend/src/pages/Login/Login.tsx
+++ b/frontend/src/pages/Login/Login.tsx
@@ -1,27 +1,62 @@
-
 import React, { useState } from "react";
-import navStyles from "./../../navbar/NavBar.module.css";
-import logo from "./../../commons/images/ma_logo.png";
+import { Link } from "react-router-dom";
+import styles from "./Login.module.css";
+
+import navStyles from "../../navbar/NavBar.module.css";
+import logo from "../../commons/images/ma_logo.png";
+import loginPageImage from "../../commons/images/reallycoolguy.jpg";
 
 function NavBar() {
-  return(
+  return (
     <div className={navStyles.NavBar}>
       <div style={{ marginLeft: "20px" }}>
-        <img src={logo} alt="" style={{ width: "150px", height: "auto", marginRight: "10px" }}/>
+        <img
+          src={logo}
+          alt=""
+          style={{ width: "150px", height: "auto", marginRight: "10px" }}
+        />
       </div>
+      {/* <PageLinks />
+      <MeDropdown /> */}
     </div>
   );
 }
 
-
-function Login(){
-  return(
+function Login() {
+  return (
     <div>
-      <NavBar/>
-
+      <NavBar />
+      <div className={styles.centerDiv}>
+        <div style={{width: "450px"}}>
+          <h1>The best place to explore and plan your major at Yale</h1>
+          <ul className={styles.featureListStyle}>
+            <li className={styles.featureItemStyle}>Explore all 80+ majors at Yale</li>
+            <li className={styles.featureItemStyle}>Check all your distributional requirements are satisfied</li>
+            <li className={styles.featureItemStyle}>Plan out all your courses in the traditional four-year plan</li>
+            <li className={styles.featureItemStyle}>Look at this really cool guy to the right</li>
+          </ul>
+          <div className={styles.loginButtons}>
+            {/* <a
+              href={`${API_ENDPOINT}/api/auth/cas?redirect=${window.location.origin}/catalog`}
+              className={clsx(styles.btn, styles.login, 'me-2')}
+            >
+              Login with CAS
+            </a> */}
+            <Link to="/graduation" className={styles.btn} style={{marginRight: "8px"}}>
+              Login with CAS
+            </Link>
+            <Link to="/courses" className={styles.btn} style={{marginRight: "8px"}}>
+              About Us
+            </Link>
+            <Link to="/majors" className={styles.btn}>
+              Guest
+            </Link>
+          </div>
+        </div>
+        <img alt="Landing page" src={loginPageImage} width="450"/>
+      </div>
     </div>
-  )
+  );
 }
 
 export default Login;
-