diff --git a/css/general.css b/css/general.css
index 0e7e969..62be721 100644
--- a/css/general.css
+++ b/css/general.css
@@ -1589,636 +1589,28 @@ section {
   margin-top: 50px !important;
 }
 
-.scheduleContainer {
-  display: flex;
-  text-align: left;
-}
-
 /* Schedule */
-.codyhouse {
-  text-align: center;
-  margin: 40px 0;
-}
-/* reset css */
-/* https://meyerweb.com/eric/tools/css/reset/ 
-   v2.0 | 20110126
-   License: none (public domain)
-*/
-
-
-/* HTML5 display-role reset for older browsers */
-ol, ul {
-	list-style: none;
-}
-blockquote, q {
-	quotes: none;
-}
-blockquote:before, blockquote:after,
-q:before, q:after {
-	content: '';
-	content: none;
-}
-table {
-	border-collapse: collapse;
-	border-spacing: 0;
-}
-
-/* style css */
-/* -------------------------------- 
-
-Primary style
-
--------------------------------- */
-
-.codyhouse {
-  font-size: 62.5%;
-}
-
-.single-event a {
-  color: #A2B9B2;
-  text-decoration: none;
-}
-
-/* -------------------------------- 
-
-Main Components 
-
--------------------------------- */
-.cd-schedule {
-  position: relative;
-  margin: 2em 0;
-}
-
-.cd-schedule::before {
-  /* never visible - this is used in js to check the current MQ */
-  content: 'mobile';
-  display: none;
-}
-
-@media only screen and (min-width: 800px) {
-  .cd-schedule {
-    width: 90%;
-    max-width: 1400px;
-    margin: 2em auto;
-  }
-  .cd-schedule::after {
-    clear: both;
-    content: "";
-    display: block;
-  }
-  .cd-schedule::before {
-    content: 'desktop';
-  }
-}
-
-.cd-schedule .timeline {
-  display: none;
-}
-
-@media only screen and (min-width: 800px) {
-  .cd-schedule .timeline {
-    display: block;
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 100%;
-    width: 100%;
-    padding-top: 50px;
-  }
-  .cd-schedule .timeline li {
-    position: relative;
-    height: 50px;
-  }
-  .cd-schedule .timeline li::after {
-    /* this is used to create the table horizontal lines */
-    content: '';
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    height: 1px;
-    background: #EAEAEA;
-  }
-  .cd-schedule .timeline li:last-of-type::after {
-    display: none;
-  }
-  .cd-schedule .timeline li span {
-    display: none;
-  }
-}
-
-@media only screen and (min-width: 1000px) {
-  .cd-schedule .timeline li::after {
-    width: calc(100% - 60px);
-    left: 60px;
-  }
-  .cd-schedule .timeline li span {
-    display: inline-block;
-    -webkit-transform: translateY(-50%);
-        -ms-transform: translateY(-50%);
-            transform: translateY(-50%);
-  }
-  .cd-schedule .timeline li:nth-of-type(2n) span {
-    display: none;
-  }
-}
-
-.cd-schedule .events {
-  position: relative;
-  z-index: 1;
-}
-
-.cd-schedule .events .events-group {
-  margin-bottom: 30px;
-}
-
-.cd-schedule .events .top-info {
-  width: 100%;
-  padding: 0 5%;
-}
-
-.cd-schedule .events .top-info > span {
-  display: inline-block;
-  line-height: 1.2;
-  margin-bottom: 10px;
-  font-weight: bold;
-}
-
-.cd-schedule .events .events-group > ul {
-  position: relative;
-  padding: 0 5%;
-  /* force its children to stay on one line */
-  display: -webkit-box;
-  display: -ms-flexbox;
+.schedule-parent {
   display: flex;
-  overflow-x: scroll;
-  -webkit-overflow-scrolling: touch;
+  flex-flow: row wrap;
+  justify-content: center;
+  max-width: 1300px;
+  width: 90%;
+  margin: auto;
+  background-color: rgb(29, 27, 36);
+  border-radius: 10px;
 }
 
-.cd-schedule .events .events-group > ul::after {
-  /* never visible - used to add a right padding to .events-group > ul */
-  display: inline-block;
-  content: '-';
-  width: 1px;
-  height: 100%;
-  opacity: 0;
-  color: transparent;
-}
-
-.cd-schedule .events .single-event {
-  /* force them to stay on one line */
-  -ms-flex-negative: 0;
-      flex-shrink: 0;
-  float: left;
-  height: 150px;
-  width: 70%;
-  max-width: 300px;
-  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.2);
-  margin-right: 20px;
-  -webkit-transition: opacity .2s, background .2s;
-  transition: opacity .2s, background .2s;
-}
-
-.cd-schedule .events .single-event:last-of-type {
-  margin-right: 5%;
-}
-
-.cd-schedule .events .single-event a {
-  display: block;
-  height: 100%;
-  padding: .8em;
-}
-
-@media only screen and (min-width: 550px) {
-  .cd-schedule .events .single-event {
-    width: 40%;
-  }
-}
-
-@media only screen and (min-width: 800px) {
-  .cd-schedule .events {
-    float: left;
-    width: 100%;
-  }
-  .cd-schedule .events .events-group {
-    width: 14%;
-    float: left;
-    border: 1px solid #EAEAEA;
-    /* reset style */
-    margin-bottom: 0;
-  }
-  .cd-schedule .events .events-group:not(:first-of-type) {
-    border-left-width: 0;
-  }
-  .cd-schedule .events .top-info {
-    /* vertically center its content */
-    display: table;
-    height: 50px;
-    border-bottom: 1px solid #EAEAEA;
-    /* reset style */
-    padding: 0;
-  }
-  .cd-schedule .events .top-info > span {
-    /* vertically center inside its parent */
-    display: table-cell;
-    vertical-align: middle;
-    padding: 0 .5em;
-    text-align: center;
-    /* reset style */
-    font-weight: normal;
-    margin-bottom: 0;
-  }
-  .cd-schedule .events .events-group > ul {
-    height: 950px;
-    /* reset style */
-    display: block;
-    overflow: visible;
-    padding: 0;
-  }
-  .cd-schedule .events .events-group > ul::after {
-    clear: both;
-    content: "";
-    display: block;
-  }
-  .cd-schedule .events .events-group > ul::after {
-    /* reset style */
-    display: none;
-  }
-  .cd-schedule .events .single-event {
-    position: absolute;
-    z-index: 3;
-    /* top position and height will be set using js */
-    width: calc(100% + 2px);
-    left: -1px;
-    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1), inset 0 -3px 0 rgba(0, 0, 0, 0.2);
-    /* reset style */
-    -ms-flex-negative: 1;
-        flex-shrink: 1;
-    height: auto;
-    max-width: none;
-    margin-right: 0;
-  }
-  .cd-schedule .events .single-event a {
-    padding: 1.2em;
-  }
-  .cd-schedule .events .single-event:last-of-type {
-    /* reset style */
-    margin-right: 0;
-  }
-  .cd-schedule .events .single-event.selected-event {
-    /* the .selected-event class is added when an user select the event */
-    visibility: hidden;
-  }
-}
-
-@media only screen and (min-width: 1000px) {
-  .cd-schedule .events {
-    /* 60px is the .timeline element width */
-    width: calc(100% - 60px);
-    margin-left: 60px;
-  }
-}
-
-.cd-schedule.loading .events .single-event {
-  /* the class .loading is added by default to the .cd-schedule element
-	   it is removed as soon as the single events are placed in the schedule plan (using javascript) */
-  opacity: 0;
-}
-
-.cd-schedule .event-name,
-.cd-schedule .event-date {
-  display: block;
-  color: white;
-  font-weight: bold;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.cd-schedule .event-name {
-  font-size: 2.4rem;
-}
-
-@media only screen and (min-width: 800px) {
-  .cd-schedule .event-name {
-    font-size: 2rem;
-  }
-}
-
-.cd-schedule .event-date {
-  /* they are not included in the the HTML but added using JavScript */
-  font-size: 1.4rem;
-  opacity: .7;
-  line-height: 1.2;
-  margin-bottom: .2em;
-}
-
-.cd-schedule .single-event[data-event="event-1"],
-.cd-schedule [data-event="event-1"] .header-bg {
-  /* this is used to set a background color for the event and the modal window */
-  background: #577F92;
-}
-
-.cd-schedule .single-event[data-event="event-1"]:hover {
-  background: #618da1;
-}
-
-.cd-schedule .single-event[data-event="event-2"],
-.cd-schedule [data-event="event-2"] .header-bg {
-  background: #443453;
-}
-
-.cd-schedule .single-event[data-event="event-2"]:hover {
-  background: #513e63;
-}
-
-.cd-schedule .single-event[data-event="event-3"],
-.cd-schedule [data-event="event-3"] .header-bg {
-  background: #A2B9B2;
-}
-
-.cd-schedule .single-event[data-event="event-3"]:hover {
-  background: #b1c4be;
-}
-
-.cd-schedule .single-event[data-event="event-4"],
-.cd-schedule [data-event="event-4"] .header-bg {
-  background: #f6b067;
-}
-
-.cd-schedule .single-event[data-event="event-4"]:hover {
-  background: #f7bd7f;
-}
-
-.cd-schedule .event-modal {
-  position: fixed;
-  z-index: 3;
-  top: 0;
-  right: 0;
-  height: 100%;
+.schedule-element {
+  padding: 20px 20px;
   width: 100%;
-  visibility: hidden;
-  /* Force Hardware acceleration */
-  -webkit-transform: translateZ(0);
-          transform: translateZ(0);
-  -webkit-transform: translateX(100%);
-      -ms-transform: translateX(100%);
-          transform: translateX(100%);
-  -webkit-transition: visibility .4s, -webkit-transform .4s;
-  transition: visibility .4s, -webkit-transform .4s;
-  transition: transform .4s, visibility .4s;
-  transition: transform .4s, visibility .4s, -webkit-transform .4s;
-  -webkit-transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
-          transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
+  max-width: 650px;
 }
 
-.cd-schedule .event-modal .header {
-  position: relative;
-  height: 70px;
-  /* vertically center its content */
-  display: table;
-  width: 100%;
-}
-
-.cd-schedule .event-modal .header .content {
-  position: relative;
-  z-index: 3;
-  /* vertically center inside its parent */
-  display: table-cell;
-  vertical-align: middle;
-  padding: .6em 5%;
-}
-
-.cd-schedule .event-modal .body {
-  position: relative;
-  width: 100%;
-  /* 70px is the .header height */
-  height: calc(100% - 70px);
-}
-
-.cd-schedule .event-modal .event-info {
-  position: relative;
-  z-index: 2;
-  line-height: 1.4;
-  height: 100%;
-  overflow: hidden;
-}
-
-.cd-schedule .event-modal .event-info > div {
-  overflow: auto;
-  height: 100%;
-  padding: 1.4em 5%;
-}
-
-.cd-schedule .event-modal .header-bg, .cd-schedule .event-modal .body-bg {
-  /* these are the morphing backgrounds - visible on desktop only */
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 100%;
-}
-
-.cd-schedule .event-modal .body-bg {
-  z-index: 1;
-  background: white;
-  -webkit-transform-origin: top left;
-      -ms-transform-origin: top left;
-          transform-origin: top left;
-}
-
-.cd-schedule .event-modal .header-bg {
-  z-index: 2;
-  -webkit-transform-origin: top center;
-      -ms-transform-origin: top center;
-          transform-origin: top center;
-}
-
-.cd-schedule .event-modal .close {
-  /* this is the 'X' icon */
-  position: absolute;
-  top: 0;
-  right: 0;
-  z-index: 3;
-  background: rgba(0, 0, 0, 0.1);
-  /* replace text with icon */
-  color: transparent;
-  white-space: nowrap;
-  text-indent: 100%;
-  height: 70px;
-  width: 70px;
-}
-
-.cd-schedule .event-modal .close::before, .cd-schedule .event-modal .close::after {
-  /* these are the two lines of the 'X' icon */
-  content: '';
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 2px;
-  height: 22px;
-  background: white;
-  -webkit-backface-visibility: hidden;
-  backface-visibility: hidden;
-}
-
-.cd-schedule .event-modal .close::before {
-  -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
-      -ms-transform: translateX(-50%) translateY(-50%) rotate(45deg);
-          transform: translateX(-50%) translateY(-50%) rotate(45deg);
-}
-
-.cd-schedule .event-modal .close::after {
-  -webkit-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
-      -ms-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
-          transform: translateX(-50%) translateY(-50%) rotate(-45deg);
-}
-
-.cd-schedule .event-modal .event-date {
-  display: none;
-}
-
-.cd-schedule .event-modal.no-transition {
-  -webkit-transition: none;
-  transition: none;
-}
-
-.cd-schedule .event-modal.no-transition .header-bg, .cd-schedule .event-modal.no-transition .body-bg {
-  -webkit-transition: none;
-  transition: none;
-}
-
-@media only screen and (min-width: 800px) {
-  .cd-schedule .event-modal {
-    /* reset style */
-    right: auto;
-    width: auto;
-    height: auto;
-    -webkit-transform: translateX(0);
-        -ms-transform: translateX(0);
-            transform: translateX(0);
-    will-change: transform, width, height;
-    -webkit-transition: height .4s, width .4s, visibility .4s, -webkit-transform .4s;
-    transition: height .4s, width .4s, visibility .4s, -webkit-transform .4s;
-    transition: height .4s, width .4s, transform .4s, visibility .4s;
-    transition: height .4s, width .4s, transform .4s, visibility .4s, -webkit-transform .4s;
-    -webkit-transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
-            transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
-  }
-  .cd-schedule .event-modal .header {
-    position: absolute;
-    display: block;
-    top: 0;
-    left: 0;
-    height: 100%;
-  }
-  .cd-schedule .event-modal .header .content {
-    /* reset style */
-    display: block;
-    padding: .8em;
-  }
-  .cd-schedule .event-modal .event-info > div {
-    padding: 2em 3em 2em 2em;
-  }
-  .cd-schedule .event-modal .body {
-    height: 100%;
-    width: auto;
-  }
-  .cd-schedule .event-modal .header-bg, .cd-schedule .event-modal .body-bg {
-    /* Force Hardware acceleration */
-    -webkit-transform: translateZ(0);
-            transform: translateZ(0);
-    will-change: transform;
-    -webkit-backface-visibility: hidden;
-            backface-visibility: hidden;
-  }
-  .cd-schedule .event-modal .header-bg {
-    -webkit-transition: -webkit-transform .4s;
-    transition: -webkit-transform .4s;
-    transition: transform .4s;
-    transition: transform .4s, -webkit-transform .4s;
-    -webkit-transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
-            transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
-  }
-  .cd-schedule .event-modal .body-bg {
-    opacity: 0;
-    -webkit-transform: none;
-        -ms-transform: none;
-            transform: none;
-  }
-  .cd-schedule .event-modal .event-date {
-    display: block;
-  }
-  .cd-schedule .event-modal .close, .cd-schedule .event-modal .event-info {
-    opacity: 0;
-  }
-  .cd-schedule .event-modal .close {
-    width: 40px;
-    height: 40px;
-    background: transparent;
-  }
-  .cd-schedule .event-modal .close::after, .cd-schedule .event-modal .close::before {
-    background: #222222;
-    height: 16px;
-  }
-}
-
-@media only screen and (min-width: 1000px) {
-  .cd-schedule .event-modal .header .content {
-    padding: 1.2em;
-  }
-}
-
-.cd-schedule.modal-is-open .event-modal {
-  /* .modal-is-open class is added as soon as an event is selected */
-  -webkit-transform: translateX(0);
-      -ms-transform: translateX(0);
-          transform: translateX(0);
-  visibility: visible;
-}
-
-.cd-schedule.modal-is-open .event-modal .event-info > div {
-  /* smooth scroll on iOS touch devices */
-  -webkit-overflow-scrolling: touch;
-}
-
-@media only screen and (min-width: 800px) {
-  .cd-schedule.animation-completed .event-modal .close,
-  .cd-schedule.content-loaded.animation-completed .event-modal .event-info {
-    /* 	the .animation-completed class is added when the modal animation is completed
-			the .content-loaded class is added when the modal content has been loaded (using ajax) */
-    opacity: 1;
-    -webkit-transition: opacity .2s;
-    transition: opacity .2s;
-  }
-  .cd-schedule.modal-is-open .body-bg {
-    opacity: 1;
-    -webkit-transition: -webkit-transform .4s;
-    transition: -webkit-transform .4s;
-    transition: transform .4s;
-    transition: transform .4s, -webkit-transform .4s;
-    -webkit-transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
-            transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
-  }
-}
-
-.cd-schedule .cover-layer {
-  /* layer between the content and the modal window */
-  position: fixed;
-  z-index: 2;
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 100%;
-  background: rgba(0, 0, 0, 0.8);
-  opacity: 0;
-  visibility: hidden;
-  -webkit-transition: opacity .4s, visibility .4s;
-  transition: opacity .4s, visibility .4s;
-}
-
-.cd-schedule.modal-is-open .cover-layer {
-  opacity: 1;
-  visibility: visible;
+.time-column-header {
+  margin-bottom: 20px;
+  font-size: 30px;
+  text-decoration: underline;
 }
 
 #map-article {
@@ -2873,7 +2265,7 @@ Main Components
   list-style: none;
 }
 
-/* Teams */
+/* Team */
 #team-container {
   width: 100%;
   height: auto;
diff --git a/css/schedule.css b/css/schedule.css
new file mode 100644
index 0000000..967693a
--- /dev/null
+++ b/css/schedule.css
@@ -0,0 +1,202 @@
+.schedule-container {
+  display: grid;
+  margin: auto;
+  grid-gap: 0.2rem;
+  grid-template-columns: 4rem repeat(4, 1fr);
+  grid-template-rows: repeat(14, 1fr);
+  grid-template-areas: "time800 stage stage stage stage" "time900 stage stage stage stage" "time1000 stage stage stage stage" "time1100 stage stage stage stage" "time1200 stage stage stage stage" "time1300 stage stage stage stage" "time1400 stage stage stage stage" "time1500 stage stage stage stage" "time1600 stage stage stage stage" "time1700 stage stage stage stage" "time1800 stage stage stage stage" "time1900 stage stage stage stage" "time2000 stage stage stage stage" "time2100 stage stage stage stage";
+}
+
+/**
+ * Time
+ */
+.time {
+  display: flex;
+  justify-content: flex-end;
+  height: 100%;
+  padding: 0 0.5rem;
+}
+.time.start-800 {
+  grid-area: time800;
+}
+.time.start-900 {
+  grid-area: time900;
+}
+.time.start-1000 {
+  grid-area: time1000;
+}
+.time.start-1100 {
+  grid-area: time1100;
+}
+.time.start-1200 {
+  grid-area: time1200;
+}
+.time.start-1300 {
+  grid-area: time1300;
+}
+.time.start-1400 {
+  grid-area: time1400;
+}
+.time.start-1500 {
+  grid-area: time1500;
+}
+.time.start-1600 {
+  grid-area: time1600;
+}
+.time.start-1700 {
+  grid-area: time1700;
+}
+.time.start-1800 {
+  grid-area: time1800;
+}
+.time.start-1900 {
+  grid-area: time1900;
+}
+.time.start-2000 {
+  grid-area: time2000;
+}
+.time.start-2100 {
+  grid-area: time2100;
+}
+
+/**
+ * Event
+ */
+.event {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  padding: 0.5rem 1rem;
+  background-color: orange;
+  border-radius: 0.2rem;
+  font-size: 0.8rem;
+  font-weight: bold;
+  line-height: 1.4;
+  border-top: thin solid rgb(68, 68, 68);
+}
+.event span {
+  display: block;
+  width: 100%;
+  font-size: 0.8em;
+  font-weight: normal;
+}
+.event.empty {
+  background-color: unset;
+}
+
+.event.start-800 {
+  grid-row-start: time800;
+}
+.event.start-900 {
+  grid-row-start: time900;
+}
+.event.start-1000 {
+  grid-row-start: time1000;
+}
+.event.start-1100 {
+  grid-row-start: time1100;
+}
+.event.start-1200 {
+  grid-row-start: time1200;
+}
+.event.start-1300 {
+  grid-row-start: time1300;
+}
+.event.start-1400 {
+  grid-row-start: time1400;
+}
+.event.start-1500 {
+  grid-row-start: time1500;
+}
+.event.start-1600 {
+  grid-row-start: time1600;
+}
+.event.start-1700 {
+  grid-row-start: time1700;
+}
+.event.start-1800 {
+  grid-row-start: time1800;
+}
+.event.start-1900 {
+  grid-row-start: time1900;
+}
+.event.start-2000 {
+  grid-row-start: time2000;
+}
+.event.start-2100 {
+  grid-row-start: time2100;
+}
+.event.end-800 {
+  grid-row-end: time800;
+}
+.event.end-900 {
+  grid-row-end: time900;
+}
+.event.end-1000 {
+  grid-row-end: time1000;
+}
+.event.end-1100 {
+  grid-row-end: time1100;
+}
+.event.end-1200 {
+  grid-row-end: time1200;
+}
+.event.end-1300 {
+  grid-row-end: time1300;
+}
+.event.end-1400 {
+  grid-row-end: time1400;
+}
+.event.end-1500 {
+  grid-row-end: time1500;
+}
+.event.end-1600 {
+  grid-row-end: time1600;
+}
+.event.end-1700 {
+  grid-row-end: time1700;
+}
+.event.end-1800 {
+  grid-row-end: time1800;
+}
+.event.end-1900 {
+  grid-row-end: time1900;
+}
+.event.end-2000 {
+  grid-row-end: time2000;
+}
+.event.end-2100 {
+  grid-row-end: time2100;
+}
+.event.length-1 {
+  grid-column-end: span 1;
+}
+.event.length-2 {
+  grid-column-end: span 2;
+}
+.event.length-3 {
+  grid-column-end: span 3;
+}
+.event.length-4 {
+  grid-column-end: span 4;
+}
+.event.stage-earth {
+  background-color: #ffa726;
+}
+.event.stage-mercury {
+  background-color: #9ccc65;
+}
+.event.stage-venus {
+  background-color: #ff8a65;
+}
+.event.stage-mars {
+  background-color: #b3e5fc;
+}
+.event.stage-jupiter {
+  background-color: #81d4fa;
+}
+.event.stage-saturn {
+  background-color: #26c6da;
+}
+
+/*# sourceMappingURL=schedule.css.map */
diff --git a/css/schedule.css.map b/css/schedule.css.map
new file mode 100644
index 0000000..272289a
--- /dev/null
+++ b/css/schedule.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["schedule.scss"],"names":[],"mappings":"AAKA;EACC;EACA;EAEA;EACA;EACA,qBACC;;;AAgBF;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;EACA;;AAGC;EACC;;AADD;EACC;;AADD;EACC;;AADD;EACC;;AADD;EACC;;AADD;EACC;;AADD;EACC;;AADD;EACC;;AADD;EACC;;AADD;EACC;;AADD;EACC;;AADD;EACC;;AADD;EACC;;AADD;EACC;;AAIF;EACC;EACA;;;AAIF;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;;AAIA;EACC;;AADD;EACC;;AADD;EACC;;AADD;EACC;;AADD;EACC;;AADD;EACC;;AADD;EACC;;AADD;EACC;;AADD;EACC;;AADD;EACC;;AADD;EACC;;AADD;EACC;;AADD;EACC;;AADD;EACC;;AAKD;EACC;;AADD;EACC;;AADD;EACC;;AADD;EACC;;AADD;EACC;;AADD;EACC;;AADD;EACC;;AADD;EACC;;AADD;EACC;;AADD;EACC;;AADD;EACC;;AADD;EACC;;AADD;EACC;;AADD;EACC;;AAKD;EACC;;AADD;EACC;;AADD;EACC;;AADD;EACC;;AAIF;EACC;;AAED;EACC;;AAED;EACC;;AAED;EACC;;AAED;EACC;;AAED;EACC","file":"schedule.css"}
\ No newline at end of file
diff --git a/css/schedule.scss b/css/schedule.scss
new file mode 100644
index 0000000..4059dab
--- /dev/null
+++ b/css/schedule.scss
@@ -0,0 +1,109 @@
+$blockTimes: 800, 900, 1000, 1100, 1200, 1300,
+	1400, 1500, 1600, 1700, 1800, 1900, 2000,
+	2100;
+$blockLengths: 1, 2, 3, 4;
+
+.schedule-container {
+	display: grid;
+	grid-gap: 0.2rem;
+
+	grid-template-columns: 5rem repeat(4, 1fr);
+	grid-template-rows: repeat(14, 1fr);
+	grid-template-areas:
+		"time800 stage stage stage stage"
+		"time900 stage stage stage stage"
+		"time1000 stage stage stage stage"
+		"time1100 stage stage stage stage"
+		"time1200 stage stage stage stage"
+		"time1300 stage stage stage stage"
+		"time1400 stage stage stage stage"
+		"time1500 stage stage stage stage"
+		"time1600 stage stage stage stage"
+		"time1700 stage stage stage stage"
+		"time1800 stage stage stage stage"
+		"time1900 stage stage stage stage"
+		"time2000 stage stage stage stage"
+		"time2100 stage stage stage stage"
+}
+
+/**
+ * Time
+ */
+.time {
+	display: flex;
+	align-items: center;
+	justify-content: flex-end;
+	border-top: thin dotted #ccc;
+	height: 100%;
+	padding: 0 0.5rem;
+
+	@each $time in $blockTimes {
+		&.start-#{$time} {
+			grid-area: time#{$time};
+		}
+	}
+
+	&[class*="30"]:not(.start-1300) {
+		font-size: 0.8rem;
+		color: #ccc;
+	}
+}
+
+/**
+ * Event
+ */
+.event {
+	display: flex;
+	justify-content: center;
+	flex-direction: column;
+	padding: 0.5rem 1rem;
+	background-color: orange;
+	border-radius: 0.2rem;
+	font-size: 0.8rem;
+	font-weight: bold;
+	line-height: 1.4;
+
+	span {
+		display: block;
+		width: 100%;
+		font-size: 0.8em;
+		font-weight: normal;
+	}
+
+	@each $time in $blockTimes {
+		&.start-#{$time} {
+			grid-row-start: time#{$time};
+		}
+	}
+
+	@each $time in $blockTimes {
+		&.end-#{$time} {
+			grid-row-end: time#{$time};
+		}
+	}
+
+	@each $length in $blockLengths {
+		&.length-#{$length} {
+			grid-column-end: span #{$length};
+		}
+	}
+
+	&.stage-earth {
+		background-color: #ffa726;
+	}
+	&.stage-mercury {
+		background-color: #9ccc65;
+	}
+	&.stage-venus {
+		background-color: #ff8a65;
+	}
+	&.stage-mars {
+		background-color: #b3e5fc;
+	}
+	&.stage-jupiter {
+		background-color: #81d4fa;
+	}
+	&.stage-saturn {
+		background-color: #26c6da;
+	}
+}
diff --git a/index.html b/index.html
index 2484943..4ac072a 100644
--- a/index.html
+++ b/index.html
@@ -15,6 +15,7 @@
     
     <title>Gilroy Hacks</title>
     <link href="css/general.css" rel="stylesheet" type="text/css" media="all">
+    <link href="css/schedule.css" rel="stylesheet" type="text/css" media="all">
     <link href="css/scroll_nav.css" rel="stylesheet" type="text/css" media="all">
     <link rel="stylesheet" href="css/leaflet.css"/>
     <link rel="icon" href="img/icon.ico">
@@ -393,6 +394,82 @@
                     </div>
                 </article>
             </div>
+
+            <!-- Schedule -->
+            <div class="schedule-parent">
+                <div class="schedule-element">
+                    <h3 class="time-column-header">Saturday</h3>
+                    <div class="schedule-container">
+                        <!-- TIMES -->
+                        <div class="time start-800">8:00am</div>
+                        <div class="time start-900">9:00am</div>
+                        <div class="time start-1000">10:00am</div>
+                        <div class="time start-1100">11:00am</div>
+                        <div class="time start-1200">12:00pm</div>
+                        <div class="time start-1300">1:00pm</div>
+                        <div class="time start-1400">2:00pm</div>
+                        <div class="time start-1500">3:00pm</div>
+                        <div class="time start-1600">4:00pm</div>
+                        <div class="time start-1700">5:00pm</div>
+                        <div class="time start-1800">6:00pm</div>
+                        <div class="time start-1900">7:00pm</div>
+                        <div class="time start-2000">8:00pm</div>
+                        <div class="time start-2100">9:00pm</div>
+                        
+                        <!-- EVENTS -->
+                        <div class="event stage-saturn start-800 end-800 length-4">Arrival and registration <span>Registration Area</span></div>
+                        <div class="event start-900 end-900 length-4 empty"></div>
+                        <div class="event start-1000 end-1000 length-4 empty"></div>
+                        <div class="event start-1100 end-1100 length-4 empty"></div>
+                        <div class="event start-1200 end-1200 length-4 empty"></div>
+                        <div class="event start-1300 end-1300 length-4 empty"></div>
+                        <div class="event start-1400 end-1400 length-4 empty"></div>
+                        <div class="event start-1500 end-1500 length-4 empty"></div>
+                        <div class="event start-1600 end-1600 length-4 empty"></div>
+                        <div class="event start-1700 end-1700 length-4 empty"></div>
+                        <div class="event start-1800 end-1800 length-4 empty"></div>
+                        <div class="event start-1900 end-1900 length-4 empty"></div>
+                        <div class="event start-2000 end-2000 length-4 empty"></div>
+                        <div class="event start-2100 end-2100 length-4 empty"></div>
+                    </div>
+                </div>
+                <div class="schedule-element">
+                    <h3 class="time-column-header">Sunday</h3>
+                    <div class="schedule-container">
+                        <!-- TIMES -->
+                        <div class="time start-800">8:00am</div>
+                        <div class="time start-900">9:00am</div>
+                        <div class="time start-1000">10:00am</div>
+                        <div class="time start-1100">11:00am</div>
+                        <div class="time start-1200">12:00pm</div>
+                        <div class="time start-1300">1:00pm</div>
+                        <div class="time start-1400">2:00pm</div>
+                        <div class="time start-1500">3:00pm</div>
+                        <div class="time start-1600">4:00pm</div>
+                        <div class="time start-1700">5:00pm</div>
+                        <div class="time start-1800">6:00pm</div>
+                        <div class="time start-1900">7:00pm</div>
+                        <div class="time start-2000">8:00pm</div>
+                        <div class="time start-2100">9:00pm</div>
+                        
+                        <!-- EVENTS -->
+                        <div class="event stage-saturn start-800 end-800 length-4">Arrival and registration <span>Registration Area</span></div>
+                        <div class="event start-900 end-900 length-4 empty"></div>
+                        <div class="event start-1000 end-1000 length-4 empty"></div>
+                        <div class="event start-1100 end-1100 length-4 empty"></div>
+                        <div class="event start-1200 end-1200 length-4 empty"></div>
+                        <div class="event start-1300 end-1300 length-4 empty"></div>
+                        <div class="event start-1400 end-1400 length-4 empty"></div>
+                        <div class="event start-1500 end-1500 length-4 empty"></div>
+                        <div class="event start-1600 end-1600 length-4 empty"></div>
+                        <div class="event start-1700 end-1700 length-4 empty"></div>
+                        <div class="event start-1800 end-1800 length-4 empty"></div>
+                        <div class="event start-1900 end-1900 length-4 empty"></div>
+                        <div class="event start-2000 end-2000 length-4 empty"></div>
+                        <div class="event start-2100 end-2100 length-4 empty"></div>
+                    </div>
+                </div>
+            </div>
             <!-- <div id="map-article">
                 <div id="cal-parent">
                     <article id="cal-container">
@@ -833,4 +910,4 @@
     </div>
 </footer>
 </body>
-</html>
\ No newline at end of file
+</html
\ No newline at end of file