diff --git a/_sections/_upcomingold.html b/_sections/_upcomingold.html
new file mode 100644
index 0000000..4465a84
--- /dev/null
+++ b/_sections/_upcomingold.html
@@ -0,0 +1,145 @@
+---
+layout: base
+title: Upcoming
+description: Displays current and upcoming events, announcements
+---
+{%raw %}
+<div class="row center" id="app">
+	<div class="card accent-color white-text">
+        <div class="card-content">
+                <table class="highlight responsive-table">
+                        <thead>
+                                <tr>
+                                        <td>Start</td>
+                                        <td>End</td>
+                                        <td>Event</td>
+                                        <td>Location</td>
+                                </tr>
+                        </thead>
+                        <tbody class="currevent">
+                                <tr v-for="event in day1"
+                                    v-if="schedule.timeleft(event.StartXML, event.EndXML) == 'Now'">
+                                        <td style="font-weight:bold">{{schedule.timeleft(event.StartXML, event.EndXML)}}</td>
+                                        <td>{{event.End}}</td>
+                                        <td>{{event.Description}}</td>
+                                        <td>{{event.Location}}</td>
+                                </tr>
+                                <tr v-for="event in day2"
+                                    v-if="schedule.timeleft(event.StartXML, event.EndXML) == 'Now'">
+                                        <td>{{schedule.timeleft(event.StartXML, event.EndXML)}}</td>
+                                        <td>{{event.End}}</td>
+                                        <td>{{event.Description}}</td>
+                                        <td>{{event.Location}}</td>
+                                </tr>
+                        </tbody>
+                </table>
+                <table class="nextevent highlight responsive-table dog">
+                        <tbody>
+                                <tr v-for="event in day1"
+                                    v-if="schedule.timeleft(event.StartXML, event.EndXML).length > 4">
+                                        <td>{{schedule.timeleft(event.StartXML, event.EndXML)}}</td>
+                                        <td>{{event.End}}</td>
+                                        <td>{{event.Description}}</td>
+                                        <td>{{event.Location}}</td>
+                                </tr>
+                                <tr v-for="event in day2"
+                                    v-if="schedule.timeleft(event.StartXML, event.EndXML).length > 4">
+                                        <td>{{schedule.timeleft(event.StartXML, event.EndXML)}}</td>
+                                        <td>{{event.End}}</td>
+                                        <td>{{event.Description}}</td>
+                                        <td>{{event.Location}}</td>
+                                </tr>
+                        </tbody>
+                </table>
+        </div>
+        </div>
+</div>
+{%endraw %}
+<script>
+var schedule = new Vue({
+  el: '#app',
+  data: {
+    day1: [{"Location":"","End":"12:30 AM","Description":"Closing ceremony","Start":"12:00 AM"
+      ,"StartXML":"2019-01-01T00:00:00-0700", "EndXML":"2019-01-01T00:30:00-0700"},],
+    day2: [{"Location":"","End":"12:30 AM","Description":"Closing ceremony","Start":"12:00 AM"
+      ,"StartXML":"2019-01-01T00:00:00-0700", "EndXML":"2019-01-01T00:30:00-0700"},],
+    now: Math.trunc((new Date()).getTime() / 1000)
+  },
+  mounted() {
+      window.setInterval(() => {
+          this.now = Math.trunc((new Date()).getTime() / 1000);
+      },1000);
+  },
+  methods: {
+      seconds: function(remaining){
+          return Math.trunc(remaining) % 60;
+      },
+      minutes: function(remaining) {
+          return Math.trunc((remaining) / 60) % 60;
+      },
+      hours: function(remaining) {
+          return Math.trunc((remaining) / 60 / 60);
+      },
+      twodigits: function(value) {
+          if (value < 0) {
+              return '00';
+          }
+          if (value.toString().length <= 1) {
+                  return `0${value}`;
+          }
+          return value;
+      },
+      timeleft: function(startTime, endTime) {
+          if (endTime === undefined || this.now > Math.trunc(Date.parse(endTime) / 1000)){
+              return "Over";
+          }
+          else if (this.now > Math.trunc(Date.parse(startTime) / 1000)){
+              return "Now";
+          }
+          remaining = Math.trunc(Date.parse(startTime) / 1000) - this.now;
+          seconds = this.twodigits(this.seconds(remaining));
+          minutes = this.twodigits(this.minutes(remaining));
+          hours = this.twodigits(this.hours(remaining));
+          return hours + ":" + minutes + ":" + seconds;
+      },
+  }
+})
+
+function formatDate(formatTime, day) {
+    if (formatTime == ""){
+        return undefined;
+    }
+    eventTime = formatTime.split(/:| /)
+    if (eventTime[2] == "PM" && eventTime[0] != "12"){
+        eventTime[0] = String(parseInt(eventTime[0]) + 12);
+    }
+    else if (eventTime[0] == "12" && eventTime[2] == "AM") { // converts 12 AM to 00
+        eventTime[0] = "00";
+    }
+    if (eventTime[0].length == 1) { // guarantees 2-digit hour
+        eventTime[0] = "0" + eventTime[0];
+    }
+    return day + "T" + eventTime[0] + ":" + eventTime[1] + ":00-0700";
+}
+
+function refresh() {
+    $.get('https://api.hackcu.org/sheets/events.json').success(function(data){
+        schedule.day1 = data.day1;
+        for (x in schedule.day1){
+            // Date Format: YYYY-MM-DD
+            schedule.day1[x].StartXML = formatDate(schedule.day1[x].Start, "2019-02-13");
+            schedule.day1[x].EndXML = formatDate(schedule.day1[x].End, "2019-02-13");
+        }
+        schedule.day2 = data.day2;
+        for (x in schedule.day2){
+            // Date Format: YYYY-MM-DD
+            schedule.day2[x].StartXML = formatDate(schedule.day2[x].Start, "2019-02-24");
+            schedule.day2[x].EndXML = formatDate(schedule.day2[x].End, "2019-02-24");
+        }
+    });
+}
+
+refresh();
+setInterval(refresh, 2*60000);
+
+</script>
diff --git a/_sections/upcoming.html b/_sections/upcoming.html
new file mode 100644
index 0000000..398a26d
--- /dev/null
+++ b/_sections/upcoming.html
@@ -0,0 +1,113 @@
+---
+layout: base
+title: Upcoming
+description: Displays current and upcoming events, announcements
+---
+<link rel="stylesheet" href="/assets/css/upcoming.css?_={{ site.time |  date: '%s' }}">
+{%raw %}
+<div id="app">
+    <div class="timeline">
+        <div class="item" v-for="event in day1" v-if="schedule.timeleft(event.StartXML, event.EndXML) == 'Now'">
+            <div class="inner-item bigcard">
+                <div class="hours"><h4 class="start">{{schedule.timeleft(event.StartXML, event.EndXML)}}</h4><h4 class="end"><small><small>to </small>{{ event.End }}</small></h4></div>
+                <h3>{{ event.Description }} <small v-if="event.Location != ''">at {{event.Location}}</small></h3>
+            </div>
+        </div>
+        <div class="item" style="width:80%" v-for="event in day1" v-if="schedule.timeleft(event.StartXML, event.EndXML).length > 4">
+            <div class="inner-item smallcard">
+                <div class="hours"><h5 class="start">{{schedule.timeleft(event.StartXML, event.EndXML)}}</h5><h5 class="end"><small><small>to </small>{{ event.End }}</small></h5></div>
+                <h4>{{ event.Description }} <small v-if="event.Location != ''">at {{event.Location}}</small></h4>
+            </div>
+        </div>
+    </div>
+</div>
+{%endraw %}
+
+<script>
+var schedule = new Vue({
+  el: '#app',
+  data: {
+    day1: [{"Location":"","End":"12:30 AM","Description":"Closing ceremony","Start":"12:00 AM"
+      ,"StartXML":"2019-01-01T00:00:00-0700", "EndXML":"2019-01-01T00:30:00-0700"},],
+    day2: [{"Location":"","End":"12:30 AM","Description":"Closing ceremony","Start":"12:00 AM"
+      ,"StartXML":"2019-01-01T00:00:00-0700", "EndXML":"2019-01-01T00:30:00-0700"},],
+    now: Math.trunc((new Date()).getTime() / 1000)
+  },
+  mounted() {
+      window.setInterval(() => {
+          this.now = Math.trunc((new Date()).getTime() / 1000);
+      },1000);
+  },
+  methods: {
+      seconds: function(remaining){
+          return Math.trunc(remaining) % 60;
+      },
+      minutes: function(remaining) {
+          return Math.trunc((remaining) / 60) % 60;
+      },
+      hours: function(remaining) {
+          return Math.trunc((remaining) / 60 / 60);
+      },
+      twodigits: function(value) {
+          if (value < 0) {
+              return '00';
+          }
+          if (value.toString().length <= 1) {
+                  return `0${value}`;
+          }
+          return value;
+      },
+      timeleft: function(startTime, endTime) {
+          if (endTime === undefined || this.now > Math.trunc(Date.parse(endTime) / 1000)){
+              return "Over";
+          }
+          else if (this.now > Math.trunc(Date.parse(startTime) / 1000)){
+              return "Now";
+          }
+          remaining = Math.trunc(Date.parse(startTime) / 1000) - this.now;
+          seconds = this.twodigits(this.seconds(remaining));
+          minutes = this.twodigits(this.minutes(remaining));
+          hours = this.twodigits(this.hours(remaining));
+          return hours + ":" + minutes + ":" + seconds;
+      },
+  }
+})
+
+function formatDate(formatTime, day) {
+    if (formatTime == ""){
+        return undefined;
+    }
+    eventTime = formatTime.split(/:| /)
+    if (eventTime[2] == "PM" && eventTime[0] != "12"){
+        eventTime[0] = String(parseInt(eventTime[0]) + 12);
+    }
+    else if (eventTime[0] == "12" && eventTime[2] == "AM") { // converts 12 AM to 00
+        eventTime[0] = "00";
+    }
+    if (eventTime[0].length == 1) { // guarantees 2-digit hour
+        eventTime[0] = "0" + eventTime[0];
+    }
+    return day + "T" + eventTime[0] + ":" + eventTime[1] + ":00-0700";
+}
+
+function refresh() {
+    $.get('https://api.hackcu.org/sheets/events.json').success(function(data){
+        schedule.day1 = data.day1;
+        for (x in schedule.day1){
+            // Date Format: YYYY-MM-DD
+            schedule.day1[x].StartXML = formatDate(schedule.day1[x].Start, "2019-02-13");
+            schedule.day1[x].EndXML = formatDate(schedule.day1[x].End, "2019-02-13");
+        }
+        schedule.day2 = data.day2;
+        for (x in schedule.day2){
+            // Date Format: YYYY-MM-DD
+            schedule.day2[x].StartXML = formatDate(schedule.day2[x].Start, "2019-02-24");
+            schedule.day2[x].EndXML = formatDate(schedule.day2[x].End, "2019-02-24");
+        }
+    });
+}
+
+refresh();
+setInterval(refresh, 2*60000);
+
+</script>
diff --git a/_sections/upcomingold.html b/_sections/upcomingold.html
new file mode 100644
index 0000000..4465a84
--- /dev/null
+++ b/_sections/upcomingold.html
@@ -0,0 +1,145 @@
+---
+layout: base
+title: Upcoming
+description: Displays current and upcoming events, announcements
+---
+{%raw %}
+<div class="row center" id="app">
+	<div class="card accent-color white-text">
+        <div class="card-content">
+                <table class="highlight responsive-table">
+                        <thead>
+                                <tr>
+                                        <td>Start</td>
+                                        <td>End</td>
+                                        <td>Event</td>
+                                        <td>Location</td>
+                                </tr>
+                        </thead>
+                        <tbody class="currevent">
+                                <tr v-for="event in day1"
+                                    v-if="schedule.timeleft(event.StartXML, event.EndXML) == 'Now'">
+                                        <td style="font-weight:bold">{{schedule.timeleft(event.StartXML, event.EndXML)}}</td>
+                                        <td>{{event.End}}</td>
+                                        <td>{{event.Description}}</td>
+                                        <td>{{event.Location}}</td>
+                                </tr>
+                                <tr v-for="event in day2"
+                                    v-if="schedule.timeleft(event.StartXML, event.EndXML) == 'Now'">
+                                        <td>{{schedule.timeleft(event.StartXML, event.EndXML)}}</td>
+                                        <td>{{event.End}}</td>
+                                        <td>{{event.Description}}</td>
+                                        <td>{{event.Location}}</td>
+                                </tr>
+                        </tbody>
+                </table>
+                <table class="nextevent highlight responsive-table dog">
+                        <tbody>
+                                <tr v-for="event in day1"
+                                    v-if="schedule.timeleft(event.StartXML, event.EndXML).length > 4">
+                                        <td>{{schedule.timeleft(event.StartXML, event.EndXML)}}</td>
+                                        <td>{{event.End}}</td>
+                                        <td>{{event.Description}}</td>
+                                        <td>{{event.Location}}</td>
+                                </tr>
+                                <tr v-for="event in day2"
+                                    v-if="schedule.timeleft(event.StartXML, event.EndXML).length > 4">
+                                        <td>{{schedule.timeleft(event.StartXML, event.EndXML)}}</td>
+                                        <td>{{event.End}}</td>
+                                        <td>{{event.Description}}</td>
+                                        <td>{{event.Location}}</td>
+                                </tr>
+                        </tbody>
+                </table>
+        </div>
+        </div>
+</div>
+{%endraw %}
+<script>
+var schedule = new Vue({
+  el: '#app',
+  data: {
+    day1: [{"Location":"","End":"12:30 AM","Description":"Closing ceremony","Start":"12:00 AM"
+      ,"StartXML":"2019-01-01T00:00:00-0700", "EndXML":"2019-01-01T00:30:00-0700"},],
+    day2: [{"Location":"","End":"12:30 AM","Description":"Closing ceremony","Start":"12:00 AM"
+      ,"StartXML":"2019-01-01T00:00:00-0700", "EndXML":"2019-01-01T00:30:00-0700"},],
+    now: Math.trunc((new Date()).getTime() / 1000)
+  },
+  mounted() {
+      window.setInterval(() => {
+          this.now = Math.trunc((new Date()).getTime() / 1000);
+      },1000);
+  },
+  methods: {
+      seconds: function(remaining){
+          return Math.trunc(remaining) % 60;
+      },
+      minutes: function(remaining) {
+          return Math.trunc((remaining) / 60) % 60;
+      },
+      hours: function(remaining) {
+          return Math.trunc((remaining) / 60 / 60);
+      },
+      twodigits: function(value) {
+          if (value < 0) {
+              return '00';
+          }
+          if (value.toString().length <= 1) {
+                  return `0${value}`;
+          }
+          return value;
+      },
+      timeleft: function(startTime, endTime) {
+          if (endTime === undefined || this.now > Math.trunc(Date.parse(endTime) / 1000)){
+              return "Over";
+          }
+          else if (this.now > Math.trunc(Date.parse(startTime) / 1000)){
+              return "Now";
+          }
+          remaining = Math.trunc(Date.parse(startTime) / 1000) - this.now;
+          seconds = this.twodigits(this.seconds(remaining));
+          minutes = this.twodigits(this.minutes(remaining));
+          hours = this.twodigits(this.hours(remaining));
+          return hours + ":" + minutes + ":" + seconds;
+      },
+  }
+})
+
+function formatDate(formatTime, day) {
+    if (formatTime == ""){
+        return undefined;
+    }
+    eventTime = formatTime.split(/:| /)
+    if (eventTime[2] == "PM" && eventTime[0] != "12"){
+        eventTime[0] = String(parseInt(eventTime[0]) + 12);
+    }
+    else if (eventTime[0] == "12" && eventTime[2] == "AM") { // converts 12 AM to 00
+        eventTime[0] = "00";
+    }
+    if (eventTime[0].length == 1) { // guarantees 2-digit hour
+        eventTime[0] = "0" + eventTime[0];
+    }
+    return day + "T" + eventTime[0] + ":" + eventTime[1] + ":00-0700";
+}
+
+function refresh() {
+    $.get('https://api.hackcu.org/sheets/events.json').success(function(data){
+        schedule.day1 = data.day1;
+        for (x in schedule.day1){
+            // Date Format: YYYY-MM-DD
+            schedule.day1[x].StartXML = formatDate(schedule.day1[x].Start, "2019-02-13");
+            schedule.day1[x].EndXML = formatDate(schedule.day1[x].End, "2019-02-13");
+        }
+        schedule.day2 = data.day2;
+        for (x in schedule.day2){
+            // Date Format: YYYY-MM-DD
+            schedule.day2[x].StartXML = formatDate(schedule.day2[x].Start, "2019-02-24");
+            schedule.day2[x].EndXML = formatDate(schedule.day2[x].End, "2019-02-24");
+        }
+    });
+}
+
+refresh();
+setInterval(refresh, 2*60000);
+
+</script>
diff --git a/assets/css/upcoming.scss b/assets/css/upcoming.scss
new file mode 100644
index 0000000..cbf1e44
--- /dev/null
+++ b/assets/css/upcoming.scss
@@ -0,0 +1,134 @@
+---
+---
+@charset "utf-8";
+@import "../_sass/mixins";
+
+$main-color: #fff;
+$footer-text: #fff;
+$accent-color: {{site.color}};
+$secondary-color: {{site.secondary_color}};
+
+/* The actual timeline (the vertical ruler) */
+.timeline {
+    position: relative;
+    max-width: 1200px;
+    height: 100%;
+    margin: 0 auto;
+
+    /* The actual timeline (the vertical ruler) */
+    &::after {
+        content: '';
+        position: absolute;
+        width: 6px;
+        background-color: $accent-color;
+        top: 0;
+        bottom: 0;
+        left: 0%;
+        margin-left: -3px;
+        @include box-shadow(inset 0px 11px 8px -5px #fff, inset 0px -11px 8px -5px #fff); 
+    }
+}
+
+/* Container around content */
+.item {
+    padding: 10px 30px;
+    position: relative;
+    background-color: inherit;
+    /* Add arrows pointing left */
+    &::before {
+        content: " ";
+        height: 0;
+        position: absolute;
+        top: 22px;
+        width: 0;
+        z-index: 1;
+        left: 20px;
+        border: medium solid $accent-color;
+        border-width: 10px 10px 10px 0;
+        border-color: transparent $accent-color transparent transparent;
+    }
+}
+
+/* The actual content */
+.inner-item {
+    padding: 10px 20px;
+    position: relative;
+    border:  medium solid $accent-color;
+    @include box-shadow(10px 10px 18px -12px rgba(0,0,0,0.75)); 
+    display: flex;
+
+    .hours {
+        display: flex;
+        flex-direction: column;
+    }
+
+
+
+
+    
+    .start {
+        color: $secondary-color;
+        padding-top:5px;
+    }
+
+    .end {
+        padding-right:20px;
+    }
+}
+
+.bigcard {
+    h4, h3 {
+        margin:0;
+        line-height: 1em;
+        white-space: pre-line;
+        padding-right:20px;
+    }
+
+    h4 {
+        white-space: nowrap;
+        text-align: right;
+    }
+    
+    h3 {
+        padding-top: 20px;
+    }
+}
+
+.smallcard{
+    h5, h4 {
+        margin:0;
+        line-height: 1em;
+        white-space: pre-line;
+        padding-right:20px;
+    }
+
+    h5 {
+        white-space: nowrap;
+        text-align: right;
+    }
+    
+    h4 {
+        padding-top: 12px;
+    }
+}
+
+/* Media queries - Responsive timeline on screens less than 600px wide */
+@media screen and (max-width: 600px) {
+/* Place the timelime to the left */
+    .timeline::after {
+        left: 0px;
+    }
+
+    .inner-item {
+        flex-direction: column;
+
+        .hours {
+            flex-direction: row;
+            padding-bottom: 10px;
+        }
+
+        p {
+            text-align: left;
+        }
+    }
+}