diff --git a/index.html b/index.html
index 118fddd88..e9d780439 100644
--- a/index.html
+++ b/index.html
@@ -138,6 +138,71 @@ <h2>What is a Hackathon?</h2>
         </div>
     </section>
     <section id="schedule">
+        <h1>Schedule</h1>
+        <p>More events coming soon!</p>
+        <div id="schedule-block">
+            <div id="schedule-tapes">
+                <div class="tape"></div>
+                <div class="tape"></div>
+            </div>
+            <div id="schedule-content">
+                <div id="days">
+                    <div class="day day-first day-active">
+                        <h2 class="number">20</h2>
+                        <h6 class="name">SATURDAY</h6>
+                    </div>
+                    <div class="day day-second">
+                        <h2 class="number">21</h2>
+                        <h6 class="name">SUNDAY</h6>
+                    </div>
+                </div>
+                <div class="events day-first-events">
+                    <div class="event">
+                        <p class="time">10-10:30am</p>
+                        <p class="title">Opening Ceremony</p>
+                    </div>
+                    <div class="event">
+                        <p class="time">10:30am-12am</p>
+                        <p class="title">Hacking!</p>
+                    </div>
+                    <div class="event">
+                        <p class="time">10-10:30am</p>
+                        <p class="title">Lunch (on your own!)</p>
+                    </div>
+                    <div class="event">
+                        <p class="time">2pm-3pm</p>
+                        <p class="title">Mystery Workshop</p>
+                    </div>
+                    <div class="event">
+                        <p class="time">5pm-6pm</p>
+                        <p class="title">Mystery Event</p>
+                    </div>
+                </div>
+                <div class="events day-second-events">
+                    <div class="event">
+                        <p class="time">12am-4pm</p>
+                        <p class="title">More Hacking</p>
+                    </div>
+                    <div class="event">
+                        <p class="time">1pm-2pm</p>
+                        <p class="title">Mystery Workshop 2</p>
+                    </div>
+                    <div class="event">
+                        <p class="time">4pm</p>
+                        <p class="title">Coding stops</p>
+                    </div>
+                    <div class="event">
+                        <p class="time">4pm-5pm</p>
+                        <p class="title">Judging</p>
+                    </div>
+                    <div class="event">
+                        <p class="time">5pm-6pm</p>
+                        <p class="title">Closing Ceremony</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+
     </section>
     <section id="faq">
     </section>
diff --git a/index.js b/index.js
index 12eb33781..9e4687372 100644
--- a/index.js
+++ b/index.js
@@ -21,4 +21,19 @@ $(document).ready(function() {
         autoplaySpeed: 2000,
         speed: 1000,
     });
-});
\ No newline at end of file
+});
+
+// Schedule toggle code
+$('.day-second-events').hide();
+$('.day-first').click(function() {
+    $('.day-first-events').show();
+    $('.day-first').addClass('day-active');
+    $('.day-second-events').hide();
+    $('.day-second').removeClass('day-active');
+});
+$('.day-second').click(function() {
+    $('.day-first-events').hide();
+    $('.day-first').removeClass('day-active');
+    $('.day-second-events').show();
+    $('.day-second').addClass('day-active');
+});
diff --git a/sass/main.scss b/sass/main.scss
index 3b6000ede..8345de3ec 100644
--- a/sass/main.scss
+++ b/sass/main.scss
@@ -20,13 +20,18 @@ $leadership-size: 220px;
 $wire-height: 15px;
 
 // Just to make it more semantic
-$font-bold: 700;
+$font-extrabold: 700;
+$font-bold: 600;
 $font-medium: 500;
 $font-regular: 400;
 
 // Size for all titles on page
 $title-size: 3em;
 
+// MAX events (across either day)
+// TODO: Make this more dynamic via JS?
+$event-count: 6;
+
 // Import carousel
 @import '../node_modules/slick-carousel/slick/slick.css';
 @import '../node_modules/slick-carousel/slick/slick-theme.css';
@@ -50,6 +55,12 @@ $title-size: 3em;
     }
 }
 
+// Functions for random color selection (hero)
+@function rand-color($colors...) {
+    @return nth($colors, random(length($colors)))
+}
+
+
 // General
 * {
     margin: 0;
@@ -72,6 +83,10 @@ a {
     color: white;
 }
 
+p {
+    font-size: 1.2em;
+}
+
 // Nav
 nav {
     background-color: rgba(white, 5%);
@@ -138,7 +153,7 @@ nav {
 
     #bh7 {
         font-size: 5.4em;
-        font-weight: $font-bold;
+        font-weight: $font-extrabold;
     }
 
     #premiere {
@@ -205,7 +220,6 @@ nav {
 
     p {
         margin-bottom: 20px;
-        font-size: 1.2em;
     }
 
     .carousel {
@@ -350,6 +364,103 @@ nav {
     }
 }
 
+#schedule {
+    padding: $section-padding;
+    background-color: $blue;
+
+    h1 {
+        font-size: $title-size;
+    }
+
+    #schedule-block {
+        // TODO: make margin consistent across other element
+        margin: 40px auto 0px auto;
+        width: 1000px;
+        background-color: $light-blue;
+        border-radius: $img-border-radius;
+        position: relative;
+    }
+
+    #schedule-tapes {
+        display: flex;
+        justify-content: space-around;
+        position: absolute;
+        width: 100%;
+
+        .tape {
+            // For some reason, margin doesn't work on #schedule-tapes.
+            margin-top: -20px; // Half of tape height
+            height: 40px;
+            width: 25%;
+            background-color: rgba($red, 60%);
+        }
+    }
+
+    #schedule-content {
+        display: flex;
+        justify-content: space-around;
+        padding: 60px 100px;
+
+        #days {
+            width: 40%;
+            display: flex;
+            justify-content: space-around;
+            flex-direction: column;
+            user-select: none;
+            cursor: pointer;
+
+            .day {
+                .number {
+                    font-size: 6.5em;
+                    font-weight: $font-bold;
+                    line-height: 1; // TODO: Can this be done cleaner?
+                }
+
+                .name {
+                    font-size: 2em;
+                    font-weight: $font-regular;
+                }
+            }
+
+            // Class set by JS in index.js on click
+            .day-active {
+                .number, .name {
+                    color: $orange;
+                }
+            }
+        }
+
+        .events {
+            width: 60%;
+
+            // Sequentially assign colors to all elements
+            $colors: $red, $orange, $light-gray;
+            @for $i from 1 through $event-count {
+                .event:nth-child(#{$i}) {
+                    border-left: 30px solid nth($colors, $i % length($colors) + 1);
+                }
+            }
+
+            .event {
+                background-color: white;
+                border-radius: 15px;
+                margin: 10px 0px;
+                padding: 10px;
+
+                .time {
+                    color: $light-blue;
+                }
+                .title {
+                    color: black;
+                    font-size: 1.3em;
+                }
+            }
+        }
+
+    }
+
+}
+
 #leadership {
     padding: $section-padding;
     background-color: $light-blue;