diff --git a/public/.DS_Store b/public/.DS_Store
index e6a4df2..aa0ef00 100644
Binary files a/public/.DS_Store and b/public/.DS_Store differ
diff --git a/src/.DS_Store b/src/.DS_Store
index 2f93a1c..dee2ba1 100644
Binary files a/src/.DS_Store and b/src/.DS_Store differ
diff --git a/src/components/EventDetails.js b/src/components/EventDetails.js
index 85f6e37..e6fd8a2 100644
--- a/src/components/EventDetails.js
+++ b/src/components/EventDetails.js
@@ -1,28 +1,148 @@
-import "../styles/Register.css";
+import "../styles/Schedule.css";
+import ReactDOMServer from "react-dom/server";
 import rover from "../rover.png";
+const fridaySchedule = () => {
+  return (
+    <div>
+      <div class="schedule-event main-event2">
+        <div class="col">
+          <p>5:00 - 6:00 PM</p>
+        </div>
+        <div class="col">
+          <p>Check-in</p>
+          <p class="details">Rashid Auditorium</p>
+          <p class="details">Check in with organizers and find team members</p>
+        </div>
+      </div>
+      <div class="schedule-event main-event2">
+        <div class="col">
+          <p>6:00 - 6:30 PM</p>
+        </div>
+        <div class="col">
+          <p>Opening Ceremony</p>
+          <p class="details">Rashid Auditorium</p>
+          <p class="details">Join us for the opening ceremony of AWAP 2024!</p>
+        </div>
+      </div>
+      <div class="schedule-event foods">
+        <div class="col">
+          <p>7:00 - 8:00 PM</p>
+        </div>
+        <div class="col">
+          <p>Dinner</p>
+          <p class="details">Reddy Conference Room</p>
+          <p class="details">Enjoy some delicious food to kickstart your coding!</p>
+        </div>
+      </div>
+      <div class="schedule-event foods">
+        <div class="col">
+          <p>12:00 - 1:00 AM</p>
+        </div>
+        <div class="col">
+          <p>Midnight Snack</p>
+          <p class="details">Gates 3 Atrium</p>
+          <p class="details">Insomnia Cookies</p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const saturdaySchedule = () => {
+  return (
+    <div>
+      <div class="schedule-event foods">
+        <div class="col">
+          <p>8:00 - 10:00 AM</p>
+        </div>
+        <div class="col">
+          <p>Breakfast</p>
+          <p class="details">Reddy Conference Room</p>
+          <p class="details">Get breakfast after a long night of coding!</p>
+        </div>
+      </div>
+      <div class="schedule-event foods">
+        <div class="col">
+          <p>12:00 - 1:00 PM</p>
+        </div>
+        <div class="col">
+        <p class="details">Reddy Conference Room</p>
+          <p>Lunch</p>
+          <p class="details">Stop by for some fuel before your last few submissions!</p>
+        </div>
+      </div>
+      <div class="schedule-event main-event2">
+        <div class="col">
+          <p>2:00 PM</p>
+        </div>
+        <div class="col">
+          <p>Coding Stops</p>
+        </div>
+      </div>
+      <div class="schedule-event main-event2">
+        <div class="col">
+          <p>5:00 PM</p>
+        </div>
+        <div class="col">
+          <p>Closing Ceremony</p>
+          <p class="details">Rashid Auditorium</p>
+          <p class="details">See how your bot plays against other players!</p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+function showFriday() {
+  document.getElementById("friday").style.border = "3px solid white";
+  document.getElementById("saturday").style.border = "0px solid white";
+  document.getElementById("schedule").innerHTML =
+    ReactDOMServer.renderToStaticMarkup(fridaySchedule());
+}
+
+function showSaturday() {
+  document.getElementById("friday").style.border = "0px solid white";
+  document.getElementById("saturday").style.border = "3px solid white";
+  document.getElementById("schedule").innerHTML =
+    ReactDOMServer.renderToStaticMarkup(saturdaySchedule());
+}
 
 const EventDetails = () => {
   return (
-    <div className="register">
-      <div className="register-content">
-        <div className="section-header">Event Details</div>
-        <p className="register-update">
-          {/* We're still finalizing the details for AWAP 2024; stay tuned for
-          updates! */}
-        </p>
-        <div className="register-box">
-          <p className="register-description">
-            Start: January 27, 5 PM @ Rashid Auditorium<br></br>
-            End: January 28, 5 PM @ Rashid Auditorium<br></br>
-          </p>
-          <iframe src="https://discord.com/widget?id=1099870874594705539&theme=dark" width="300" height="400" allowtransparency="true" frameborder="0" sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"></iframe>
-        </div>
-        <section>
-          <div className="line">
-            <hr />
+    <div className="schedule-page">
+      <div className="schedule-content">
+        <div className="schedule-header"></div>
+        <div className="section-header">Schedule</div>
+        <div class="legend">
+          <div class="legend-event">
+            <div class="legend-box foods"></div>
+            <p class="legend-label">Food</p>
           </div>
-          <img className="rover" src={rover} alt="" />
-        </section>
+          <div class="legend-event">
+            <div class="legend-box main-event2"></div>
+            <p class="legend-label">Main Event</p>
+          </div>
+          <div class="legend-event">
+            <div class="legend-box workshop"></div>
+            <p class="legend-label">Workshop</p>
+          </div>
+        </div>
+        <div class="schedule-days">
+          <button class="year-button" id="friday" onClick={showFriday}>
+            <span class="schedule-header-word">FRIDAY 9/15</span>
+          </button>
+          <button
+            class="year-button"
+            id="saturday"
+            onClick={showSaturday}
+          >
+            <span class="schedule-header-word">SATURDAY 9/16</span>
+          </button>
+        </div>
+        <div class="schedule" id="schedule">
+          {fridaySchedule()}
+        </div>
+        <div className="container-after"></div>
       </div>
     </div>
   );
diff --git a/src/styles/About.css b/src/styles/About.css
index 336e073..6c7fc5e 100644
--- a/src/styles/About.css
+++ b/src/styles/About.css
@@ -24,8 +24,9 @@
 }
 
 .about .about-content p {
-  color: var(--background-color);
+  color: rgb(171, 94, 78);
   line-height: 200%;
+  font-weight: bold;
 }
 
 .about-description {
diff --git a/src/styles/Schedule.css b/src/styles/Schedule.css
new file mode 100644
index 0000000..e98e8a3
--- /dev/null
+++ b/src/styles/Schedule.css
@@ -0,0 +1,139 @@
+.schedule-page {
+    color: white;
+    margin-bottom: 60px;
+  }
+  .schedule-page * {
+    overflow-x: visible !important;
+    position: relative;
+    z-index: 3;
+  }
+  .schedule-page .schedule-content {
+    height: 100%;
+    color: white;
+  }
+  .schedule-page .schedule-header {
+    height: 5vh;
+  }
+  .schedule-page .schedule-title {
+    font-family: 'Rubik', sans-serif; 
+    /* font-family: "Roboto Mono", monospace; */
+    font-weight: 600;
+    font-size: 5em;
+    color: whitesmoke;
+    padding-bottom: 15px;
+  }
+  .year-button {
+    padding: 15px 18px;
+    border-radius: 10px;
+    /* font-family: var(--font-3); */
+    font-size: 100%;
+    font-weight: 600;
+    background: var(--secondary-color);
+    cursor: pointer;
+    color: white;
+    text-align: center;
+    margin: 15px;
+    border: none;
+  }
+  
+  .legend {
+    display: flex;
+    flex-direction: row;
+    max-width: 600px;
+    justify-content: space-evenly;
+    margin: auto;
+    margin-top: 10px;
+    margin-bottom: 10px;
+    flex-wrap: wrap;
+  }
+  .legend-event {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    width: auto;
+    margin-top: 10px;
+    margin-left: 4px;
+  }
+  .legend-box {
+    width: 2rem;
+    height: 2rem;
+    border-radius: 8px;
+  }
+  .legend-label {
+    font-weight: 700;
+    font-size: 1.2rem;
+    margin-left: 10px;
+  }
+  
+  .main-event2 {
+    background-color: #3f5577;
+  }
+  .workshop {
+    background-color: #0e0c51;
+  }
+  .foods {
+    background-color: #0d2a4c;
+  }
+  
+  .schedule-day-button {
+    padding: 15px;
+    border-radius: 10px;
+    font-size: 1.75rem;
+    font-weight: 900;
+    background: #ca6b12;
+    cursor: pointer;
+    color: white;
+    border: 0px solid white;
+    text-align: center;
+    margin: 20px;
+  }
+  #friday {
+    border: 3px solid white;
+  }
+  
+  .schedule {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+    margin: 10px;
+  }
+  .schedule-event {
+    border-radius: 15px;
+    margin: 10px;
+    padding: 10px;
+    font-weight: 700;
+    min-height: 60px;
+    width: 700px;
+    display: flex;
+    align-items: center;
+  }
+  .schedule-event .col p {
+    margin: 0px 8px;
+  }
+  .schedule-event .details {
+    color: blanchedalmond;
+  }
+  .schedule-event .col {
+    flex-basis: 40%;
+  }
+  .schedule-event .col:last-child {
+    flex-basis: 60%;
+    border-left: 3px solid white;
+  }
+  
+  @media only screen and (max-width: 460px) {
+    .schedule-page .schedule-title {
+      font-size: 4.5em;
+    }
+    .legend {
+      margin: auto !important;
+    }
+    .legend-event p {
+      font-size: 1em;
+    }
+    .schedule-event {
+      width: 70vw;
+      display: flex;
+      align-items: center;
+    }
+  }
\ No newline at end of file