diff --git a/pass/public/styles/base.less b/pass/public/styles/base.less
index 05d635c8a0d92fdc58f7d7aa9c58b6ca631294e3..cd631a91ce2b5e70088e2f3197e2d5cb97ff4d52 100644
--- a/pass/public/styles/base.less
+++ b/pass/public/styles/base.less
@@ -123,7 +123,28 @@ nav {
       flex-grow: 1;
       &:checked {
         + label {
-          transform: rotate(90deg);
+          border-width: 0;
+          transition: border-width 0ms 0ms;
+          > svg {
+            fill: red;
+            > .line {
+              transition: y 300ms ease-in 0ms, rotate 300ms ease-in 300ms,
+                opacity 0ms 300ms, fill 300ms ease-in 300ms;
+              //y 300ms ease-in, rotate 300ms ease-in 300ms,
+              //  opacity 0ms 300ms, fill 300ms ease-in 300ms;
+              &.top {
+                y: 45px;
+                rotate: 45deg;
+              }
+              &.middle {
+                opacity: 0;
+              }
+              &.bottom {
+                y: 45px;
+                rotate: -45deg;
+              }
+            }
+          }
         }
         ~ ul {
           max-height: 500px;
@@ -132,16 +153,24 @@ nav {
         }
       }
     }
-    //display: none;
     > label[for="nav-opener"] {
+      --navbar-opener-color: white;
       display: flex;
       margin: 1rem;
       align-items: center;
-      transition: transform 1s;
+      border: 1px solid var(--navbar-opener-color);
+      border-radius: 0.4rem;
       cursor: pointer;
-
-      > img {
-        width: 1.5em;
+      transition: border-width 0ms 600ms;
+      > svg {
+        fill: var(--navbar-opener-color);
+
+        > .line {
+          transition: rotate 300ms ease-in 0ms, opacity 0ms 300ms,
+            y 300ms ease-in 300ms, fill 300ms ease-in 300ms;
+          rotate: 0deg;
+          transform-origin: center;
+        }
       }
     }
   }
diff --git a/pass/views/templates/page_header.ejs b/pass/views/templates/page_header.ejs
index fb787aa1789e5b7c9de4fa25fb50d75137d69b61..a9b4bc84ee1d4fde98d0ba50266641943f6f37ad 100644
--- a/pass/views/templates/page_header.ejs
+++ b/pass/views/templates/page_header.ejs
@@ -24,7 +24,13 @@
       </a>
     </div>
     <input type="checkbox" name="nav-opener" id="nav-opener" aria-hidden="true">
-    <label for="nav-opener"><img src="/images/hamburger-menu.svg" alt="Open Menu"></label>
+    <label for="nav-opener">
+      <svg class="hamburger" viewBox="0 0 100 100" width="2rem" height="2rem">
+        <rect class="line top" x="10" y="25" width="80" height="10" rx="5"></rect>
+        <rect class="line middle" x="10" y="45" width="80" height="10" rx="5"></rect>
+        <rect class="line bottom" x="10" y="65" width="80" height="10" rx="5"></rect>
+      </svg>
+    </label>
     <ul>
       <li><a href="#">Informationen</a></li>
       <li><a href="#">Preise</a></li>