diff --git a/_includes/header.html b/_includes/header.html
index 3ce4049..38e5a81 100644
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -3,30 +3,22 @@
         <a href="/">{%- picture /assets/global/img/logo_fundit.png --alt 'Logo FundIt' -%}</a>
     </div>
 
-    <label for="nav-trigger">
-        <span class="menu-icon">
-            <svg viewBox="0 0 18 15" width="18px" height="15px">
-                <path
-                    d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.032C17.335,0,18,0.665,18,1.484L18,1.484z M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.032C17.335,6.031,18,6.696,18,7.516L18,7.516z M18,13.516C18,14.335,17.335,15,16.516,15H1.484 C0.665,15,0,14.335,0,13.516l0,0c0-0.82,0.665-1.483,1.484-1.483h15.032C17.335,12.031,18,12.695,18,13.516L18,13.516z">
-                </path>
-            </svg>
-        </span>
+    <input type="checkbox" id="menu-toggle" class="menu-toggle">
+    <label class="menu-button-container" for="menu-toggle">
+        <div class="menu-button"></div>
     </label>
-    <nav class="site-nav">
-        <input type="checkbox" id="nav-trigger" class="nav-trigger">
-        <ul class="trigger">
-            {%- for site_page in site.pages -%}
-            {%- if site_page.hide != true -%}
-            {%- if site_page.url != "/" -%}
-            {%- if site_page.title -%}
-            <li><a class="navigation-link page-link {% if page.path == site_page.path %}current{% endif %}"
-                    href="{% if page.path == site_page.path %}#{% else %}{{ site_page.url | relative_url }}{% endif %}">{{
-                    site_page.title | escape }}</a></li>
-            {%- endif -%}
-            {%- endif -%}
-            {%- endif -%}
-            {%- endfor -%}
-            <li><a class="navigation-link page-link--outlined" href="/profile">My profile</a></li>
-        </ul>
-    </nav>
+    <ul class="menu">
+        {%- for site_page in site.pages -%}
+        {%- if site_page.hide != true -%}
+        {%- if site_page.url != "/" -%}
+        {%- if site_page.title -%}
+        <li><a class="navigation-link page-link {% if page.path == site_page.path %}current{% endif %}"
+                href="{% if page.path == site_page.path %}#{% else %}{{ site_page.url | relative_url }}{% endif %}">{{
+                site_page.title | escape }}</a></li>
+        {%- endif -%}
+        {%- endif -%}
+        {%- endif -%}
+        {%- endfor -%}
+        <li><a class="navigation-link page-link--outlined" href="/profile">My profile</a></li>
+    </ul>
 </header>
\ No newline at end of file
diff --git a/_sass/_header.sass b/_sass/_header.sass
index 7e8e5f4..110f0e0 100644
--- a/_sass/_header.sass
+++ b/_sass/_header.sass
@@ -31,85 +31,118 @@ header
         opacity: 1
 
 @media screen and (max-width: $breakpoint-small)
-    label[for="nav-trigger"]
-        padding: 16pt
-        position: relative
-        right: -16pt
-            // align-content: center
-
-    .site-nav
+    .menu-button-container
+        position: absolute
+        top: 20pt
+        right: 20pt
+        display: flex
+        height: 30px
+        width: 30px
+        cursor: pointer
+        flex-direction: column
+        justify-content: center
+        align-items: center
+
+    .menu
         position: absolute
-        top: 55pt
+        z-index: 2
+        background-color: $card-color
+        border-top: 5pt solid $text-color
+        font: 400 $font-size-regular $font-inter
+        padding: 12pt 0
+        box-shadow: 0pt 8pt 12pt
+        top: 0
+        margin-top: 85px
         left: 0
         right: 0
 
-        .trigger
-            background-color: $card-color
-            border-top: 5pt solid $text-color
-            font: 400 $font-size-regular $font-inter
-            padding: 12pt 0
-            box-shadow: 0pt 8pt 12pt
-
-        input:checked
-            ~
-                .trigger
-                    display: flex
-                    flex-flow: column
-                    justify-content: right
-                    gap: 0
-                    animation: slide-in 0.3s both
-        input
-            ~
-                .trigger
-                    display: none
-                    animation: slide-out 0.3s both
+    #menu-toggle:checked
+        ~
+            .menu
+                display: flex
+                flex-flow: column
+                justify-content: right
+                gap: 0
+                animation: slide-in 0.3s both
+
+    #menu-toggle
+        ~
+            .menu
+                display: none
+                animation: slide-out 0.3s both
 
 @media screen and (min-width: $breakpoint-small)
-    label[for="nav-trigger"]
+    .menu-button-container
         display: none
-    .site-nav
+    .menu
+        background-color: transparent
+        font: 400 $font-size-small $font-inter
 
-        .trigger
-            background-color: transparent
-            font: 400 $font-size-small $font-inter
-
-.nav-trigger
+#menu-toggle
     display: none
 
-.site-nav
-    z-index: 2
-    .trigger
-        display: flex
-        flex-flow: row
-        gap: 8pt
-        list-style: none
+.menu
+    display: flex
+    flex-flow: row
+    gap: 8pt
+    list-style: none
+
+    .page-link
+        color: black
 
+    .page-link.current
+        font-weight: 700
+
+    @media screen and (max-width: $breakpoint-small)
         .page-link
+            width: 100%
+            padding: 8pt 12pt
+
+    @media screen and (max-width: $breakpoint-small)
+        .page-link--outlined
+            width: 100%
             color: black
 
-        .page-link.current
-            font-weight: 700
-
-        @media screen and (max-width: $breakpoint-small)
-            .page-link
-                width: 100%
-                padding: 8pt 12pt
-
-        @media screen and (max-width: $breakpoint-small)
-            .page-link--outlined
-                width: 100%
-                color: black
-
-        @media screen and (min-width: $breakpoint-small)
-            .page-link--outlined
-                color: white
-                background-color: $text-color
-                text-decoration: none
-                display: block
-                border: 0
-                border-radius: 20pt
-                text-align: center
-                padding: 6pt 12pt
-                opacity: 1
-                margin-top: 2pt
-                margin-bottom: 2pt
+    @media screen and (min-width: $breakpoint-small)
+        .page-link--outlined
+            color: white
+            background-color: $text-color
+            text-decoration: none
+            display: block
+            border: 0
+            border-radius: 20pt
+            text-align: center
+            padding: 6pt 12pt
+            opacity: 1
+            margin-top: 2pt
+            margin-bottom: 2pt
+
+.menu-button,
+.menu-button::before,
+.menu-button::after
+    display: block
+    background-color: $text-color
+    position: absolute
+    height: 4px
+    width: 30px
+    transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1)
+    border-radius: 2px
+
+.menu-button::before
+    content: ''
+    margin-top: -8px
+
+.menu-button::after
+    content: ''
+    margin-top: 8px
+
+#menu-toggle:checked + .menu-button-container .menu-button::before
+    margin-top: 0px
+    transform: rotate(405deg)
+
+#menu-toggle:checked + .menu-button-container .menu-button
+    background: rgba(255, 255, 255, 0)
+
+#menu-toggle:checked + .menu-button-container .menu-button::after
+    margin-top: 0px
+    transform: rotate(-405deg)