diff --git a/css/style.css b/css/style.css
index b10053f..af05ba4 100644
--- a/css/style.css
+++ b/css/style.css
@@ -107,6 +107,39 @@ nav a:hover {
      outline: 1px solid #fff;
 }
 
+.bottom-padding {
+  padding-bottom: 20px
+}
+
+.menu-container {
+  display: inline-block;
+  cursor: pointer;
+}
+
+.bar1, .bar2, .bar3 {
+  width: 35px;
+  height: 5px;
+  background-color: #fff;
+  margin: 6px 0;
+  transition: 0.4s;
+}
+
+.bar3 {
+  margin-bottom: !important 0px;
+}
+
+.change .bar1 {
+  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
+  transform: rotate(-45deg) translate(-9px, 6px);
+}
+
+.change .bar2 {opacity: 0;}
+
+.change .bar3 {
+  -webkit-transform: rotate(45deg) translate(-8px, -8px);
+  transform: rotate(45deg) translate(-8px, -8px);
+}
+
 .divider {
      color: #000;
      font-size: 200%;
@@ -555,10 +588,6 @@ footer {
           display: block;
      }
 
-     nav {
-          padding-bottom: 20px;
-     }
-
      ul {
           width: 100%;
           display: none;
diff --git a/index.html b/index.html
index 6916d9d..3b1ca11 100644
--- a/index.html
+++ b/index.html
@@ -25,7 +25,12 @@
           <nav>
                <div class="toggle">
                     <h1 class="navbarLogo">CrucialNET</h1>
-                    <i class="fa fa-bars menu" aria-hidden="true"></i>
+                    <div class="menu menu-container">
+                      <div class="bar1"></div>
+                      <div class="bar2"></div>
+                      <div class="bar3"></div>
+                    </div>
+                    <!-- <i class="fa fa-bars fa-spin menu" aria-hidden="true"></i> -->
                </div>
                <ul>
                     <li><a id="toAbout" class="link-underline-effect">About Me</a><span class="divider">|</span></li>
diff --git a/js/main.js b/js/main.js
index b36cc6c..8b87032 100644
--- a/js/main.js
+++ b/js/main.js
@@ -11,6 +11,8 @@ $(document).ready(function(){
 
      $('.menu').click(function() {
           $('ul').toggleClass('active');
+          $('.menu').toggleClass('change');
+          $('nav').toggleClass('bottom-padding')
      })
 
      $.getJSON("https://api.ipify.org?format=json",
@@ -19,6 +21,6 @@ $(document).ready(function(){
     })
 });
 
-$(window).load(function() {
+$(window).on('load', function() {
   $("body").removeClass("preload");
 });