diff --git a/assets/js/components/MobileNav.vue b/assets/js/components/MobileNav.vue
new file mode 100644
index 0000000..05c9ef9
--- /dev/null
+++ b/assets/js/components/MobileNav.vue
@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <button
+      type="button"
+      class="block sm:hidden p-2 bg-red rounded border border-white text-white absolute pin-t pin-r mr-4"
+      @click="open = !open"
+    >
+      <svg v-if="open" class="block fill-current text-white w-8 h-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z"/></svg>
+      <svg v-else class="block fill-current text-white w-8 h-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M16.4 9H3.6c-.552 0-.6.447-.6 1 0 .553.048 1 .6 1h12.8c.552 0 .6-.447.6-1 0-.553-.048-1-.6-1zm0 4H3.6c-.552 0-.6.447-.6 1 0 .553.048 1 .6 1h12.8c.552 0 .6-.447.6-1 0-.553-.048-1-.6-1zM3.6 7h12.8c.552 0 .6-.447.6-1 0-.553-.048-1-.6-1H3.6c-.552 0-.6.447-.6 1 0 .553.048 1 .6 1z"/></svg>
+    </button>
+
+    <div class="absolute pin-l pin-r pin-t mt-16 mx-10 sm:hidden" v-show="open">
+      <nav class="w-full border border-grey-light bg-red-90">
+        <a class="w-full p-3 block no-underline text-white border-b border-grey-light" href="#">Coaches</a>
+        <a class="w-full p-3 block no-underline text-white border-b border-grey-light" href="#">Schedule</a>
+        <a class="w-full p-3 block no-underline text-white border-b border-grey-light" href="#">Membership</a>
+        <a class="w-full p-3 block no-underline text-white" href="#">Contact</a>
+      </nav>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+        return {
+            open: false,
+        }
+    }
+  }
+</script>
diff --git a/assets/js/site.js b/assets/js/site.js
new file mode 100644
index 0000000..4d508f3
--- /dev/null
+++ b/assets/js/site.js
@@ -0,0 +1,8 @@
+import Vue from 'vue'
+import MobileNav from './components/MobileNav'
+
+new Vue({
+  el: '#root',
+
+  components: { MobileNav },
+})
diff --git a/source/_layouts/default.html.twig b/source/_layouts/default.html.twig
index d6e8446..013fb8a 100644
--- a/source/_layouts/default.html.twig
+++ b/source/_layouts/default.html.twig
@@ -9,16 +9,18 @@
     <body class="text-black bg-grey-lightest font-sans text-sm sm:text-base">
         <div id="root">
             <div class="bg-grey-darkest text-white antialiased block pt-4 pb-10">
-                <div class="container mx-auto px-4">
-                    <div class="text-center text-4xl">
+                <div class="container mx-auto px-4 relative">
+                    <div class="text-center text-4xl relative">
                         <img src="/assets/images/logo.png" alt="" class="w-16 sm:w-24 mb-3 sm:mb-4">
                         <p class="uppercase font-bold tracking-wide mb-2 text-2xl sm:text-4xl">Chris Rees Academy</p>
                         <p class="uppercase font-bold tracking-wide text-3xl sm:text-5xl">Cardiff</p>
                     </div>
+
+                    <mobile-nav></mobile-nav>
                 </div>
             </div>
 
-            <div class="bg-red text-white">
+            <div class="bg-red text-white hidden sm:block">
                 <div class="container mx-auto">
                     <nav class="sm:flex sm:justify-center text-center">
                         <a href="/" class="md:text-lg block sm:inline-block w-full sm:w-auto text-white hover:text-green no-underline hover:underline px-8 py-5 {{ page.url == '//' ? 'text-green' }}">Coaches</a>
diff --git a/tailwind.js b/tailwind.js
index 0922480..c2e3e62 100644
--- a/tailwind.js
+++ b/tailwind.js
@@ -56,6 +56,8 @@ let colors = {
   'red': '#a42e27',
   'red-dark': '#3a1d19',
 
+  'red-90': 'rgba(164, 46, 39, .9)',
+
   'green': '#bada55',
 }
 
diff --git a/webpack.mix.js b/webpack.mix.js
index c6a11a4..0020506 100644
--- a/webpack.mix.js
+++ b/webpack.mix.js
@@ -5,7 +5,7 @@ require('laravel-mix-tailwind');
 
 mix.disableNotifications()
     .sass('assets/sass/app.sass', "source/build/css")
-    .js('node_modules/vue/dist/vue.js', 'source/build/js/all.js')
+    .js(['node_modules/vue/dist/vue.js', 'assets/js/site.js'], 'source/build/js/all.js')
     .tailwind()
     .options({
         processCssUrls: false,
