diff --git a/css/footer.css b/css/footer.css
new file mode 100644
index 0000000..5dcf098
--- /dev/null
+++ b/css/footer.css
@@ -0,0 +1,56 @@
+footer {
+    position: relative;
+    width: 100%;
+    height: calc(2.75em + 42px);
+    bottom: 0;
+    left: 0;
+    right: 0;
+    text-align: center;
+    color: #fff;
+    background-color: #212121;
+    z-index: 10;
+    opacity: 0.9;
+}
+
+footer>span {
+    width: 100vw;
+    height: 2em;
+    font-size: 1.1em;
+    display: table-cell;
+    vertical-align: middle;
+}
+
+#contact {
+    margin: 1em 0 0 0;
+}
+
+button.social {
+    cursor: pointer;
+    outline: none;
+    border-radius: 50%;
+    width: 36px;
+    height: 36px;
+    margin: 3px;
+    background-color: transparent;
+}
+
+button.social#fb {
+    background: url('../icons/fb.png');
+    background-size: cover;
+}
+
+button.social#tw {
+    background: url('../icons/tw.png');
+    background-size: cover;
+}
+
+button.social#flickr {
+    background: url('../icons/flickr.png');
+    background-size: cover;
+    background-color: #fff;
+}
+
+button.social#mail {
+    background: url('../icons/mail.png');
+    background-size: cover;
+}
\ No newline at end of file
diff --git a/css/header.css b/css/header.css
new file mode 100644
index 0000000..89c788b
--- /dev/null
+++ b/css/header.css
@@ -0,0 +1,119 @@
+header {
+    position: relative;
+    width: 100%;
+    /*height: calc(10vh + 50px);*/
+}
+
+#banner {
+    width: 100%;
+    height: 10vh;
+    text-align: center;
+    display: table;
+    background-color: #fff;
+    position: relative;
+    z-index: 3;
+}
+
+#banner h1 {
+    display: table-cell;
+    vertical-align: middle;
+    font-size: 200%;
+    font-weight: bold;
+}
+
+#menu-toggle {
+    cursor: pointer;
+    background-color: #fff;
+    outline: none;
+    display: none;
+}
+
+#menu-toggle:active {
+    background-color: #BDBDBD;
+}
+
+#menu-toggle>i {
+    width: 48px;
+    height: 48px;
+    display: block;
+    background-image: url('../icons/menu.svg');
+}
+
+nav#menu {
+    width: 100%;
+    height: 50px;
+    display: inline-flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    background-color: #b71c1c;
+    box-shadow: 0 28px 79px 0 rgba(66, 129, 121, .27);
+}
+
+a.menu-item {
+    color: #000;
+    font-size: 1em;
+    z-index: 10;
+    display: inline-block;
+    float: left;
+    flex-basis: calc(100vw / 4);
+}
+
+button.menu-item {
+    cursor: pointer;
+    font-size: 1.5em;
+    width: 100%;
+    height: 50px;
+    outline: none;
+    color: #fff;
+    background-color: transparent;
+    border: none;
+}
+
+button.menu-item:hover {
+    color: #9E9E9E;
+}
+
+button.menu-item:active {
+    font-size: 1.4em;
+}
+
+#dome:before {
+    position: absolute;
+    width: 100%;
+    height: 40vh;
+    min-height: 280px;
+    top: 0vh;
+    content: '';
+    display: block;
+    background-color: rgba(255, 255, 255, 0.1);
+    -webkit-filter: blur(10px);
+    filter: blur(10px);
+    z-index: -1;
+}
+
+#dome {
+    position: relative;
+    width: 100%;
+    height: 40vh;
+    min-height: 280px;
+    color: #000;
+    background-color: rgba(255, 255, 255, 0.6);
+}
+
+#dome:after {
+    position: absolute;
+    width: 100%;
+    height: 40vh;
+    min-height: 280px;
+    top: 0vh;
+    content: '';
+    display: block;
+    background-color: #010318;
+    background-image: url('../img/bg.jpg');
+    background-size: cover;
+    background-position-x: center;
+    background-position-y: 7.5vh;
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+    z-index: -2;
+}
\ No newline at end of file
diff --git a/css/main.css b/css/main.css
index 16789ab..6be3f36 100644
--- a/css/main.css
+++ b/css/main.css
@@ -27,7 +27,6 @@ html {
 
 body {
     overflow-x: hidden;
-    /*IMPORTANT TO CHANGE IF EXPANDING*/
     width: 100%;
     height: 100%;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
@@ -58,141 +57,11 @@ hr {
     background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
 }
 
-header {
-    position: relative;
-    width: 100%;
-    /*height: calc(10vh + 50px);*/
-}
-
-#banner {
-    width: 100%;
-    height: 10vh;
-    text-align: center;
-    display: table;
-}
-
-#banner h1 {
-    display: table-cell;
-    vertical-align: middle;
-    font-size: 200%;
-    font-weight: bold;
-}
-
-nav#menu {
-    width: 100%;
-    height: 50px;
-    display: inline-flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    background-color: #b71c1c;
-    box-shadow: 0 28px 79px 0 rgba(66, 129, 121, .27);
-}
-
-a.menu-item {
-    color: #000;
-    font-size: 1em;
-    z-index: 10;
-    display: inline-block;
-    float: left;
-    flex-basis: calc(100vw / 4);
-}
-
-button.menu-item {
-    cursor: pointer;
-    font-size: 1.2em;
-    width: 100%;
-    height: 50px;
-    outline: none;
-    color: #fff;
-    background-color: transparent;
-    border: none;
-}
-
-button.menu-item:hover {
-    background-color: #7f0000;
-}
-
-button.menu-item:active {
-    font-size: 1.1em;
-}
-
-#dome:before {
-    position: absolute;
-    width: 100%;
-    height: 40vh;
-    min-height: 280px;
-    top: 0vh;
-    content: '';
-    display: block;
-    background-color: rgba(255, 255, 255, 0.1);
-    -webkit-filter: blur(10px);
-    filter: blur(10px);
-    z-index: -1;
-}
-
-#dome {
-    position: relative;
-    width: 100%;
-    height: 40vh;
-    min-height: 280px;
-    color: #000;
-    background-color: rgba(255, 255, 255, 0.6);
-}
-
-#dome:after {
-    position: absolute;
-    width: 100%;
-    height: 40vh;
-    min-height: 280px;
-    top: 0vh;
-    content: '';
-    display: block;
-    background-color: #010318;
-    background-image: url('../img/bg.jpg');
-    background-size: cover;
-    background-position-x: center;
-    background-position-y: 7.5vh;
-    background-repeat: no-repeat;
-    background-attachment: fixed;
-    z-index: -2;
-}
-
 a {
     color: #1976D2;
     text-decoration: none;
 }
 
-button.social {
-    cursor: pointer;
-    outline: none;
-    border-radius: 50%;
-    width: 36px;
-    height: 36px;
-    margin: 3px;
-    background-color: transparent;
-}
-
-button.social#fb {
-    background: url('../icons/fb.png');
-    background-size: cover;
-}
-
-button.social#tw {
-    background: url('../icons/tw.png');
-    background-size: cover;
-}
-
-button.social#flickr {
-    background: url('../icons/flickr.png');
-    background-size: cover;
-    background-color: #fff;
-}
-
-button.social#mail {
-    background: url('../icons/mail.png');
-    background-size: cover;
-}
-
 button.flip>i {
     height: 3vh;
     width: 3vh;
@@ -360,81 +229,4 @@ section h2 {
 
 #letter>p {
     margin: 0.5em 0;
-}
-
-footer {
-    position: relative;
-    width: 100%;
-    height: calc(2.75em + 42px);
-    bottom: 0;
-    left: 0;
-    right: 0;
-    text-align: center;
-    color: #fff;
-    background-color: #212121;
-    z-index: 10;
-    opacity: 0.9;
-}
-
-footer>span {
-    width: 100vw;
-    height: 2em;
-    font-size: 1.1em;
-    display: table-cell;
-    vertical-align: middle;
-}
-
-#contact {
-    margin: 1em 0 0 0;
-}
-
-@media screen and (max-width: 900px) {
-    #intro-text,
-    #intro-image,
-    #tweets,
-    #tweets,
-    #feedback {
-        width: 100%;
-    }
-    #letter {
-        font-size: 1.4em;
-    }
-    #dome:after {
-        background-position-y: 20vh;
-        background-size: 100%;
-    }
-    #dome {
-        display: none;
-    }
-    #menu>a {
-        width: 100%;
-        height: 10vh;
-        flex-basis: auto;
-    }
-    #menu button {
-        font-size: 2em;
-        width: 100%;
-        height: 100%;
-    }
-    nav#menu {
-        width: 30vw;
-        height: 100vh;
-        display: block;
-        position: fixed;
-        z-index: 2;
-        left: -30vw;
-    }
-}
-
-@media screen and (min-width: 1800px) {
-    #letter {
-        font-size: 1.4em;
-    }
-}
-
-/*
-#dome:after {
-        background-position-y: 20vh;
-        background-size: 100%;
-    }
-*/
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/css/responsive.css b/css/responsive.css
new file mode 100644
index 0000000..e7123ea
--- /dev/null
+++ b/css/responsive.css
@@ -0,0 +1,81 @@
+@media screen and (max-width: 480px) {
+    #dome {
+        display: none;
+    }
+    #banner > h1 {
+        display: none;
+    }
+    #wrapper {
+        top: 48px;
+    }
+}
+
+@media screen and (max-width: 950px) {
+    #intro-text,
+    #intro-image,
+    #tweets,
+    #tweets,
+    #feedback {
+        width: 100%;
+    }
+    #letter {
+        font-size: 1.4em;
+    }
+    #dome:after {
+        background-position-y: 5vh;
+        background-size: 100%;
+    }
+    #banner {
+        height: 48px;
+        display: block;
+        top: 0;
+        position: fixed;
+    }
+    #menu-toggle {
+        position: absolute;
+        left: 0;
+    }
+    #banner>h1 {
+        position: absolute;
+        left: 48px;
+        width: calc(100% - 48px);
+        height: 100%;
+        overflow: hidden;
+    }
+    #menu>a {
+        width: 100%;
+        height: 10vh;
+        flex-basis: auto;
+    }
+    button.menu-item {
+        font-size: 1.2em;
+        width: 100%;
+        height: 100%;
+    }
+    button.menu-item:hover {
+        color: #fff;
+        background-color: #7f0000;
+    }
+    button.menu-item:active {
+        font-size: 1.1em;
+    }
+    nav#menu {
+        width: 30vw;
+        height: 100vh;
+        top: 0;
+        left: -30vw;
+        padding-top: 10vh;
+        display: block;
+        position: fixed;
+        z-index: 2;
+    }
+    #menu-toggle {
+        display: block;
+    }
+}
+
+@media screen and (min-width: 1800px) {
+    #letter {
+        font-size: 1.4em;
+    }
+}
\ No newline at end of file
diff --git a/icons/menu.svg b/icons/menu.svg
new file mode 100644
index 0000000..a0efac0
--- /dev/null
+++ b/icons/menu.svg
@@ -0,0 +1,4 @@
+<svg fill="#000000" height="48" viewBox="0 0 24 24" width="48" xmlns="http://www.w3.org/2000/svg">
+    <path d="M0 0h24v24H0z" fill="none"/>
+    <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>
+</svg>
\ No newline at end of file
diff --git a/index.html b/index.html
index e812f20..5d5920d 100644
--- a/index.html
+++ b/index.html
@@ -8,16 +8,22 @@
     <meta name="theme-color" content="#1976D2" />
     <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0" />
     <link href="icons/favicon.ico" rel="icon" type="image/ico">
+    <link href="css/header.css" rel="stylesheet" />
     <link href="css/main.css" rel="stylesheet" />
+    <link href="css/footer.css" rel="stylesheet" />
+    <link href="css/responsive.css" rel="stylesheet" />
     <title>Home - TJSGA</title>
 </head>
 
 <body>
     <header>
         <div id="banner">
+            <button id="menu-toggle" class="fluid">
+                <i></i>
+            </button>
             <h1>TJ STUDENT GOVERNMENT ASSOCIATION</h1>
         </div>
-        <nav id="menu">
+        <nav id="menu" class="fluid">
             <a class="menu-item" href="index.html">
                 <button class="menu-item fluid">Home</button>
             </a>
@@ -104,6 +110,7 @@
             </button>
         </a>
     </footer>
+    <script src="js/sidebar.js"></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/js/sidebar.js b/js/sidebar.js
new file mode 100644
index 0000000..3d6ceab
--- /dev/null
+++ b/js/sidebar.js
@@ -0,0 +1,23 @@
+var mb = document.querySelector("#menu-toggle"),
+    sb = document.querySelector("nav#menu"),
+    tb = document.querySelector("#banner h1"),
+    wr = document.querySelector("#wrapper");
+
+mb.addEventListener("click", function(){toggleSidebar(true)}, false);
+wr.addEventListener("click", function(){toggleSidebar(false)}, false);
+tb.addEventListener("click", function(){toggleSidebar(false)}, false);
+mb.addEventListener("touchleave", function(){toggleSidebar(true)}, false);
+wr.addEventListener("touchleave", function(){toggleSidebar(false)}, false);
+tb.addEventListener("touchleave", function(){toggleSidebar(false)}, false);
+sb.style.disabled = true;
+
+
+function toggleSidebar(toggleOpenAllowed) {
+    if((sb.style.left == "" || sb.style.left == "-30vw") && toggleOpenAllowed) {
+        sb.style.disabled = false;
+        sb.style.left = "0px";
+    } else {
+        sb.style.disabled = true;
+        sb.style.left = "-30vw";
+    }
+}
\ No newline at end of file