diff --git a/src/styles/banner.scss b/src/styles/banner.scss
index 5823376..f811c73 100644
--- a/src/styles/banner.scss
+++ b/src/styles/banner.scss
@@ -1,147 +1,212 @@
 @import "./media-queries.scss";
+@import "./variables.scss";
 
+.top-banner{
+  display: grid;
+  grid-template-columns: 0.5fr 1fr 0.5fr;
+  grid-template-areas: "menu logo clock";
+  grid-gap: 1em;
+  align-items: center;
+  justify-items: center;
+}
 
-// https://codepen.io/erikterwan/pen/EVzeRP
-@include mobile{
-  #menuToggle
-  {
-    display: block;
-    position: relative;
-    margin: 7px;
-    
-    z-index: 1;
-    
-    -webkit-user-select: none;
-    user-select: none;
-  }
+.company-logo{
+  grid-area: logo;
+}
 
-  #menuToggle a
-  {
-    text-decoration: none;
-    color: #333333;
-    
-    transition: color 0.3s ease;
-  }
-
-
-  #menuToggle input
-  {
-    display: block;
-    width: 40px;
-    height: 32px;
-    position: absolute;
-    top: -7px;
-    left: -5px;
-    
+.menu-toggle-container{
+  grid-area: menu;
+  color: #1e1e1e;
+  border-radius: 50% 50%;
+  z-index: 11;
+  width: 36px;
+  height: 36px;
+  background: $primary;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  row-gap: 4px;
+  &:hover{
     cursor: pointer;
-    
-    opacity: 0; /* hide this */
-    z-index: 2; /* and place it over the hamburger */
-    
-    -webkit-touch-callout: none;
   }
 
-  /*
-  * Just a quick hamburger
-  */
-  #menuToggle span
-  {
+  span{
     display: block;
-    width: 33px;
-    height: 4px;
-    margin-bottom: 5px;
     position: relative;
-    
-    background: #333333;
     border-radius: 3px;
-    
-    z-index: 1;
-    
-    transform-origin: 4px 0px;
-    
-    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
-                background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
-                opacity 0.55s ease;
-  }
 
-  #menuToggle span:first-child
-  {
+    height: 3px;
+    width: 18px;
+    background: #111;
+    z-index: 0;
+    
+
+    z-index: 1;
+    transform-origin: 4px 0px;
+    transition: 
+      transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
+      background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
+      opacity 0.55s ease;
+  }
+  
+  span:first-child{
     transform-origin: 0% 0%;
   }
 
-  #menuToggle span:nth-last-child(2)
-  {
+  span:nth-last-child(2){
     transform-origin: 0% 100%;
   }
 
-  /* 
-  * Transform all the slices of hamburger
-  * into a crossmark.
-  */
-  #menuToggle input:checked ~ span
-  {
-    opacity: 1;
-    transform: rotate(45deg) translate(-2px, -1px);
-    background: #232323;
+  &.open{
+    span{
+      opacity: 1;
+      transform: rotate(-45deg) translate(2px, -2px);
+      background: #232323;
+    }
+
+    span:nth-last-child(2){
+      opacity: 0;
+      transform: rotate(0deg) scale(0.2, 0.2);
+    }
+
+    span:nth-last-child(3){
+      transform: rotate(45deg) translate(3.5px, -2px);
+    }
   }
 
-  /*
-  * But let's hide the middle one.
-  */
-  #menuToggle input:checked ~ span:nth-last-child(3)
-  {
-    opacity: 0;
-    transform: rotate(0deg) scale(0.2, 0.2);
-  }
-
-  /*
-  * Ohyeah and the last one should go the other direction
-  */
-  #menuToggle input:checked ~ span:nth-last-child(2)
-  {
-    transform: rotate(-45deg) translate(0, -1px);
-  }
-
-  /*
-  * Make this absolute positioned
-  * at the top left of the screen
-  */
-  #menu
-  {
-    position: absolute;
-    width: 100vw;
-    margin: -100px 0 0 -50px;
-    padding-bottom: 10px;
-    padding-top: 125px;
+  &.open{
+    background: #fff;
     
-    background-color: $primary;
-    list-style-type: none;
-    -webkit-font-smoothing: antialiased;
-    /* to stop flickering of text in safari */
-    
-    transform-origin: 0% 0%;
-    transform: translate(-100%, 0);
-    
-    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
-  }
-
-  #menu li
-  {
-    padding: 10px 0;
-    font-size: 22px;
-  }
-
-  /*
-  * And let's slide it in from the left
-  */
-  #menuToggle input:checked ~ ul
-  {
-    transform: none;
   }
 }
 
-@include desktop{
-  #menuToggle{
-    display: none;
+.menu{
+  position: fixed;
+  top: 0;
+  background-color: $primary;
+  width: 100%;
+  z-index: 10;
+  overflow: hidden;
+  transition: max-height 0.5s ease-out;
+  height: auto;
+  height: 100vh;
+  max-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  row-gap: 3em;
+
+  &.collapsed{
+    max-height: 0%;
+  }
+
+  a{
+    text-decoration: none;
+  }
+
+  .single-route{
+    font-size: 3em;
+    outline: 0;
+    text-decoration: none;
+    color: #1e1e1e;
+    border-bottom: 4px solid transparent;
+    display: block;
+
+    &.open{
+      -webkit-animation: fadeInFromNone 3s ease-out;
+      -moz-animation: fadeInFromNone 3s ease-out;
+      -o-animation: fadeInFromNone 3s ease-out;
+      animation: fadeInFromNone 3s ease-out;
+    }
+
+    &:hover{
+      cursor: pointer;
+      border-color: $link-color;
+    }
   }
 }
+
+@-webkit-keyframes fadeInFromNone {
+  0% {
+      display: none;
+      opacity: 0;
+  }
+
+  10% {
+      display: block;
+      opacity: 0;
+  }
+
+  100% {
+      display: block;
+      opacity: 1;
+  }
+}
+
+@-moz-keyframes fadeInFromNone {
+  0% {
+      display: none;
+      opacity: 0;
+  }
+
+  10% {
+      display: block;
+      opacity: 0;
+  }
+
+  100% {
+      display: block;
+      opacity: 1;
+  }
+}
+
+@-o-keyframes fadeInFromNone {
+  0% {
+      display: none;
+      opacity: 0;
+  }
+
+  10% {
+      display: block;
+      opacity: 0;
+  }
+
+  100% {
+      display: block;
+      opacity: 1;
+  }
+}
+
+@keyframes fadeInFromNone {
+  0% {
+      display: none;
+      opacity: 0;
+  }
+
+  10% {
+      display: block;
+      opacity: 0;
+  }
+
+  100% {
+      display: block;
+      opacity: 1;
+  }
+}
+
+.clock {
+  grid-area: clock;
+  text-decoration: none;
+  color: #333333;
+  display: flex;
+  font-family: Arial;
+  @include mobile {
+    font-size: 0.8em;
+    margin-right: 1rem;
+  }
+  h2 {
+    display: flex;
+  }
+}
\ No newline at end of file
diff --git a/src/ui/Banner.vue b/src/ui/Banner.vue
index 4f66d63..c47113c 100644
--- a/src/ui/Banner.vue
+++ b/src/ui/Banner.vue
@@ -1,26 +1,22 @@
 <template>
   <div class="top-banner">
     <!-- Mobile -->
-    <div id="menuToggle" >
-      <input type="checkbox" />
-      <span></span>
-      <span></span>
-      <span></span>
-      <ul id="menu">
-        <router-link v-for="(route, index) in routes" :key="index" :to="route.route">
-          <li>{{route.name}}</li>
-        </router-link>
-      </ul>
-    </div>
-    
-    <router-link to="/">
+    <router-link to="/" class="company-logo">
       <img src="/public/assets/images/knowit.svg" alt="knowit logo" />
     </router-link>
-    <div v-for="(route, index) in routes" :key="index" class="desktop">
-      <router-link :to="route.route" class="routes">
-        {{route.name}}
+
+    <a class="menu-toggle-container" aria-label="show-menu" @click="toggleMenu" :class="menuHeight">
+      <span class="menu-toggle"></span>
+      <span class="menu-toggle"></span>
+      <span class="menu-toggle"></span>
+    </a>
+
+    <nav class="menu" :class="menuHeight">
+      <router-link v-for="(route, index) in routes" :key="index" :to="route.route" class="menu-item-link" >
+        <a @click="toggleMenu" class="single-route" :class="menuHeight">{{route.name}}</a>
       </router-link>
-    </div>
+    </nav>
+    
     <div class="clock">
       <h2 v-if="!fiveMinutesLeft || !tenMinutesOver">
         <span v-if="days > 0">{{ pad(days) }}:</span>
@@ -37,6 +33,7 @@
 export default {
   data() {
     return {
+      menuHeight: 'collapsed',
       nextLottery: null,
       days: 0,
       hours: 0,
@@ -70,6 +67,14 @@ export default {
     }
   },
   methods: {
+    toggleMenu(){
+      console.log(this.menuHeight)
+      if(this.menuHeight === 'collapsed'){
+        this.menuHeight = 'open'
+      } else {
+        this.menuHeight = 'collapsed'
+      }
+    },
     pad: function(num) {
       if (num < 10) {
         return `0${num}`;
@@ -129,58 +134,5 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "../styles/media-queries.scss";
-@import "../styles/variables.scss";
 @import "../styles/banner.scss";
-
-@include mobile {
-  .desktop {
-    display: none;
-  }
-}
-
-@include desktop {
-  
-  .top-banner{
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    width: calc(100% - 20px);
-    
-    .routes {
-      text-decoration: none;
-      color: #333333;
-    }
-  }
-}
-
-.top-banner {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  width: calc(100% - 20px);
-  padding: 5px 10px;
-  background-color: $primary;
-  -webkit-box-shadow: 0px 0px 22px -8px rgba(0, 0, 0, 0.65);
-  -moz-box-shadow: 0px 0px 22px -8px rgba(0, 0, 0, 0.65);
-  box-shadow: 0px 0px 22px -8px rgba(0, 0, 0, 0.65);
-
-  .clock {
-    text-decoration: none;
-    color: #333333;
-    display: flex;
-    font-family: Arial;
-    margin-right: 2rem;
-    @include mobile {
-      font-size: 0.8em;
-      margin-right: 1rem;
-    }
-    h2 {
-      display: flex;
-    }
-  }
-}
-
 </style>