diff --git a/src/less/main.less b/src/less/main.less
index f474b57..fdd539e 100644
--- a/src/less/main.less
+++ b/src/less/main.less
@@ -283,15 +283,25 @@ html {
 /*       Hamburger-Cross         */
 /*-------------------------------*/
 
-.hamburger {
+.hamburger-wrapper {
   background: rgba(0, 0, 0, 0.2);
-  border: 1px solid #fff;
+  border: 1px solid #111;
   border-radius: 5px;
   display: block;
-  height: 32px;
-  margin-left: 15px;
+  height: 48px;
+  width: 48px;
   position: absolute;
   top: 20px;
+  margin-left: 15px;
+}
+
+.hamburger {
+  background: transparent;
+  display: block;
+  height: 32px;
+  position: absolute;
+  top: 8px;
+  left: 8px;
   width: 32px;
   z-index: 999;
   &:hover {
diff --git a/templates/index.html.twig b/templates/index.html.twig
index 8f01da2..842eb7d 100644
--- a/templates/index.html.twig
+++ b/templates/index.html.twig
@@ -136,11 +136,13 @@
                 </div>#}
             </nav>
             <div id="page-content-wrapper">
-                <button type="button" class="hamburger is-closed animated fadeInLeft" data-toggle="offcanvas">
-                    <span class="hamb-top"></span>
-                    <span class="hamb-middle"></span>
-                    <span class="hamb-bottom"></span>
-                </button>
+                <div class="burger-wrapper">
+                    <button type="button" class="hamburger is-closed animated fadeInLeft" data-toggle="offcanvas">
+                        <span class="hamb-top"></span>
+                        <span class="hamb-middle"></span>
+                        <span class="hamb-bottom"></span>
+                    </button>
+                </div>
             </div>
         </div>
     </body>