diff --git a/assets/scss/_navigation.scss b/assets/scss/_navigation.scss
index 3cc9b3c..ae993b0 100644
--- a/assets/scss/_navigation.scss
+++ b/assets/scss/_navigation.scss
@@ -1,6 +1,13 @@
 .navigation {
   height: 6rem;
   width: 100%;
+
+  > .container {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+  }
   a,
   span {
     display: inline;
@@ -85,6 +92,7 @@
     display: none;
     @media only screen and (max-width: 768px) {
       display: block;
+      display: flex;
       font-size: 2.4rem;
       font-weight: 400;
       line-height: 6rem;
@@ -94,6 +102,9 @@
       &:focus {
         color: $link-color;
       }
+      .svg-menu {
+        height: 1em;
+      }
     }
   }
 }
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 8043bea..ba2e2b7 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -5,7 +5,7 @@
     </a>
     {{ if or .Site.Menus.main .Site.IsMultiLingual }}
     <input type="checkbox" id="menu-toggle" />
-    <label class="menu-button float-right" for="menu-toggle"><i class="fas fa-bars"></i></label>
+    <label class="menu-button float-right" for="menu-toggle">{{ partial "svg/hamburger.svg" }}</label>
     <ul class="navigation-list">
       {{ with .Site.Menus.main}}
         {{ range sort . }}
diff --git a/layouts/partials/svg/hamburger.svg b/layouts/partials/svg/hamburger.svg
new file mode 100644
index 0000000..32fc5de
--- /dev/null
+++ b/layouts/partials/svg/hamburger.svg
@@ -0,0 +1,3 @@
+<svg class="svg-menu" viewBox="0 0 24 24">
+    <path fill="currentColor" d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z" />
+</svg>