diff --git a/about/index.html b/about/index.html
index 65730cd..f40c061 100644
--- a/about/index.html
+++ b/about/index.html
@@ -36,18 +36,23 @@
         <div class="nav-wrapper container">
             <a id="logo-container" href="" class="brand-logo"> <img class="responsive-img" src="../logo.png" width="100"> </a>
             <ul class="right hide-on-med-and-down">
-                <li><a class="waves-effect" href="../about/index.html">About</a></li>
-                <li><a class="waves-effect" href="../donate/index.html">Donate</a></li>
+                <li><a class="waves-effect grey-text text-lighten-5" href="../index.html">Home</a></li>
+                <li><a class="waves-effect grey-text text-lighten-5" href="../about/index.html">About</a></li>
+                <li><a class="waves-effect grey-text text-lighten-5" href="../donate/index.html">Donate</a></li>
             </ul>
 
-            <ul id="slide-out" class="side-nav">
-                <li><a class="waves-effect" href="../about/index.html">About</a></li>
-                <li><a class="waves-effect" href="../donate/index.html">Donate</a></li>
+            <ul id="slide-out" class="side-nav grey darken-2">
+                <li><a class="waves-effect grey-text text-lighten-5" href="../index.html">Home</a></li>
+                <li><a class="waves-effect grey-text text-lighten-5" href="../about/index.html">About</a></li>
+                <li><a class="waves-effect grey-text text-lighten-5" href="../donate/index.html">Donate</a></li>
             </ul>
             <a href="#" data-activates="slide-out" class="button-collapse"><i class="material-icons">menu</i></a>
         </div>
     </nav>
     <br>
     <b>About page</b>
+    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
+    <script type="text/javascript" src="../js/materialize.min.js"></script>
+    <script type="text/javascript" src="../js/SideNav.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/donate/index.html b/donate/index.html
index 69e8f89..f9b57a4 100644
--- a/donate/index.html
+++ b/donate/index.html
@@ -37,18 +37,23 @@
         <div class="nav-wrapper container">
             <a id="logo-container" href="" class="brand-logo"> <img class="responsive-img" src="../logo.png" width="100"> </a>
             <ul class="right hide-on-med-and-down">
-                <li><a class="waves-effect" href="../about/index.html">About</a></li>
-                <li><a class="waves-effect" href="../donate/index.html">Donate</a></li>
+                <li><a class="waves-effect grey-text text-lighten-5" href="../index.html">Home</a></li>
+                <li><a class="waves-effect grey-text text-lighten-5" href="../about/index.html">About</a></li>
+                <li><a class="waves-effect grey-text text-lighten-5" href="../donate/index.html">Donate</a></li>
             </ul>
 
-            <ul id="slide-out" class="side-nav">
-                <li><a class="waves-effect" href="../about/index.html">About</a></li>
-                <li><a class="waves-effect" href="../donate/index.html">Donate</a></li>
+            <ul id="slide-out" class="side-nav grey darken-2">
+                <li><a class="waves-effect grey-text text-lighten-5" href="../index.html">Home</a></li>
+                <li><a class="waves-effect grey-text text-lighten-5" href="../about/index.html">About</a></li>
+                <li><a class="waves-effect grey-text text-lighten-5" href="../donate/index.html">Donate</a></li>
             </ul>
             <a href="#" data-activates="slide-out" class="button-collapse"><i class="material-icons">menu</i></a>
         </div>
     </nav>
     <br>
     <b>Donate page</b>
+    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
+    <script type="text/javascript" src="../js/materialize.min.js"></script>
+    <script type="text/javascript" src="../js/SideNav.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/index.html b/index.html
index e5c936a..adf9b81 100644
--- a/index.html
+++ b/index.html
@@ -36,13 +36,15 @@
                 <div class="nav-wrapper container">
                     <a id="logo-container" href="" class="brand-logo"> <img class="responsive-img" src="logo.png" width="100"> </a>
                     <ul class="right hide-on-med-and-down">
-                        <li><a class="waves-effect" href="./about/index.html">About</a></li>
-                        <li><a class="waves-effect" href="./donate/index.html">Donate</a></li>
+                        <li><a class="waves-effect grey-text text-lighten-5" href="./index.html">Home</a></li>
+                        <li><a class="waves-effect grey-text text-lighten-5" href="./about/index.html">About</a></li>
+                        <li><a class="waves-effect grey-text text-lighten-5" href="./donate/index.html">Donate</a></li>
                     </ul>
 
-                    <ul id="slide-out" class="side-nav">
-                        <li><a class="waves-effect" href="./about/index.html">About</a></li>
-                        <li><a class="waves-effect" href="./donate/index.html">Donate</a></li>
+                    <ul id="slide-out" class="side-nav grey darken-2">
+                        <li><a class="waves-effect grey-text text-lighten-5" href="./index.html">Home</a></li>
+                        <li><a class="waves-effect grey-text text-lighten-5" href="./about/index.html">About</a></li>
+                        <li><a class="waves-effect grey-text text-lighten-5" href="./donate/index.html">Donate</a></li>
                     </ul>
                     <a href="#" data-activates="slide-out" class="button-collapse"><i class="material-icons">menu</i></a>
                 </div>
@@ -142,10 +144,10 @@
                 </div>
             </div>
         </footer>
-
         <!--Import jQuery before materialize.js-->
         <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
         <script type="text/javascript" src="js/materialize.min.js"></script>
+        <script type="text/javascript" src="js/SideNav.js"></script>
 
     </body>
 </html>
diff --git a/js/SideNav.js b/js/SideNav.js
new file mode 100644
index 0000000..41eadaa
--- /dev/null
+++ b/js/SideNav.js
@@ -0,0 +1,3 @@
+
+// Initialize collapse button
+$(".button-collapse").sideNav();
\ No newline at end of file