diff --git a/src/fellchensammlung/static/fellchensammlung/css/styles.css b/src/fellchensammlung/static/fellchensammlung/css/styles.css
index e0add2d..d6c5226 100644
--- a/src/fellchensammlung/static/fellchensammlung/css/styles.css
+++ b/src/fellchensammlung/static/fellchensammlung/css/styles.css
@@ -22,6 +22,7 @@
     --text-three: var(--primary-light-one);
     --shadow-three: var(--primary-dark-one);
 }
+
 /**************************/
 /* TAG SETTINGS (GENERAL) */
 /**************************/
@@ -140,9 +141,8 @@ textarea {
 
 .profile-card {
     display: flex;
-    border-radius: 0px 0px 8px 8px;
-    background-color: var(--highlight-two);
     color: var(--highlight-one-text);
+    align-items: center;
 
     .btn2 {
         height: 40px;
@@ -211,8 +211,6 @@ select, .button {
 }
 
 
-
-
 /*********************/
 /* UNIQUE COMPONENTS */
 /*********************/
@@ -226,63 +224,143 @@ select, .button {
     background-color: var(--background-two);
     border-bottom-left-radius: 15px;
     border-bottom-right-radius: 15px;
-}
 
-
-.nav-link {
-    color: var(--text-one);
-    text-align: center;
-    text-decoration: none;
-    border-radius: 4px;
-}
-
-.header a, .header form {
-    float: left;
-    padding: 5px 12px 5px 12px;
-    line-height: 25px;
-}
-
-.header a:hover {
-    background-color: var(--highlight-one);
-    color: var(--highlight-one-text);
-}
-
-.header a.active {
-    background-color: dodgerblue;
-    color: white;
-}
-
-
-
-.header-right select.option {
-    color: #000;
-    background-color: var(--highlight-one);
-    border: 1px;
-}
-
-.header-right {
-    float: right;
     display: flex;
-    border-radius: 0px 0px 15px 15px;
-    background-color: var(--highlight-two);
-    color: var(--highlight-one-text);
-    padding: 5px 5px 0px 5px;
-    height: 67px;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+    color: #FFF;
+    height: 50px;
+    padding: 1em;
 }
 
 
-@media screen and (max-width: 500px) {
-    .header a {
-        float: none;
-        display: block;
-        text-align: left;
+#main-menu {
+    order: -1;
+}
+
+.menu {
+    display: flex;
+    flex-direction: row;
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+}
+
+.menu > li {
+    margin: 0 1rem;
+    overflow: hidden;
+}
+
+.menu-button-container {
+    display: none;
+    height: 100%;
+    width: 30px;
+    cursor: pointer;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    background: #4ab457;
+    padding: 20px;
+    border-radius: 8px;
+}
+
+#menu-toggle {
+    display: none;
+}
+
+.menu-button,
+.menu-button::before,
+.menu-button::after {
+    display: block;
+    background-color: #fff;
+    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);
+}
+
+@media (max-width: 700px) {
+    .menu-button-container {
+        display: flex;
     }
 
-    .header-right {
-        float: none;
+    .menu {
+        position: absolute;
+        top: 0;
+        margin-top: 50px;
+        left: 0;
+        flex-direction: column;
+        width: 100%;
+        justify-content: center;
+        align-items: center;
     }
+
+    #menu-toggle ~ nav .menu li {
+        height: 0;
+        margin: 0;
+        padding: 0;
+        border: 0;
+        transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
+    }
+
+    #menu-toggle:checked ~ nav .menu li {
+        height: 3em;
+        padding: 1em;
+        transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
+    }
+
+    .header {
+        border-radius: 0;
+    }
+
+    .menu > li {
+        display: flex;
+        justify-content: center;
+        margin: 0;
+        padding: 0.5em 0;
+        width: 100%;
+        color: white;
+        background-color: var(--background-two);
+    }
+
+    .menu > li:not(:last-child) {
+        border-bottom: 1px solid #444;
+    }
+
+    #header-sign-out, #header-change-language {
+        display: none;
+    }
+
 }
 
+
 .logo img {
     height: 40px;
 }
@@ -431,9 +509,6 @@ select, .button {
 }
 
 
-
-
-
 .photos {
     display: flex;
     flex-wrap: wrap;
@@ -499,7 +574,6 @@ select, .button {
 .btn-notification {
     display: inline-block;
     position: relative;
-    padding: 0;
 }
 
 /* Make the badge float in the top right corner of the button */
@@ -580,7 +654,6 @@ select, .button {
 }
 
 
-
 .form-comments {
     .btn {
         margin: 5px;
diff --git a/src/fellchensammlung/templates/fellchensammlung/header.html b/src/fellchensammlung/templates/fellchensammlung/header.html
index b13bf09..1951c59 100644
--- a/src/fellchensammlung/templates/fellchensammlung/header.html
+++ b/src/fellchensammlung/templates/fellchensammlung/header.html
@@ -1,41 +1,57 @@
 {% load static %}
 {% load i18n %}
 
-<div class="header">
-    <a href="{% url "index" %}" class="logo"><img src={% static 'fellchensammlung/img/logo_transparent.png' %}></a>
-    <nav id="nav" class="nav justify-content-center">
-        <a class="nav-link " href="{% url "search" %}"><i class="fas fa-search"></i> {% translate 'Suchen' %}</a>
-        <a class="nav-link " href="{% url "add-adoption" %}"><i
-                class="fas fa-feather"></i> {% translate 'Vermittlung hinzufügen' %}</a>
-        <a class="nav-link " href="{% url "about" %}"><i class="fas fa-info"></i> {% translate 'Über uns' %}</a>
-        <a class="nav-link " href="{% url "rss" %}"><i class="fa-solid fa-rss"></i> {% translate 'RSS' %}</a>
-
-    </nav>
-    <div class="header-right">
-        <div class="profile-card">
-            {% include "fellchensammlung/forms/change_language.html" %}
-            {% if user.is_authenticated %}
-
-                <div class="btn2 button_darken btn-notification">
-                    <a href="{{ user.get_notifications_url }}">
-                        <i class="fa fa-bell" aria-hidden="true"></i>
-                    </a>
-                    {% if user.get_num_unread_notifications > 0 %}
-                        <span class="button__badge">{{ user.get_num_unread_notifications }}</span>
-                    {% endif %}
-
-                </div>
-
-                <a class="btn2" href="{% url 'user-me' %}"><i aria-hidden="true" class="fas fa-user"></i></a>
-                <form class="btn2 button_darken" action="{% url 'logout' %}" method="post">
-                    {% csrf_token %}
-                    <button class="button" type="submit"><i aria-hidden="true" class="fas fa-sign-out"></i></button>
-                </form>
-            {% else %}
-                <a class="btn2" href="{% url "django_registration_register" %}">{% translate "Registrieren" %}</a>
-                <a class="btn2" href="{% url "login" %}"><i class="fa fa-sign-in" aria-hidden="true"></i></a>
-            {% endif %}
-
-        </div>
+<section class="header">
+    <div>
+        <a href="{% url "index" %}" class="logo"><img src={% static 'fellchensammlung/img/logo_transparent.png' %}></a>
     </div>
-</div>
\ No newline at end of file
+
+    <div class="profile-card">
+        <div id="header-change-language">
+            {% include "fellchensammlung/forms/change_language.html" %}
+        </div>
+        {% if user.is_authenticated %}
+            <div class="btn2 button_darken btn-notification">
+                <a href="{{ user.get_notifications_url }}">
+                    <i class="fa fa-bell" aria-hidden="true"></i>
+                </a>
+                {% if user.get_num_unread_notifications > 0 %}
+                    <span class="button__badge">{{ user.get_num_unread_notifications }}</span>
+                {% endif %}
+            </div>
+
+            <a class="btn2" href="{% url 'user-me' %}"><i aria-hidden="true" class="fas fa-user"></i></a>
+            <form class="btn2 button_darken" id="header-sign-out" action="{% url 'logout' %}" method="post">
+                {% csrf_token %}
+                <button class="button" type="submit"><i aria-hidden="true" class="fas fa-sign-out"></i></button>
+            </form>
+        {% else %}
+            <a class="btn2" href="{% url "django_registration_register" %}">{% translate "Registrieren" %}</a>
+            <a class="btn2" href="{% url "login" %}"><i class="fa fa-sign-in" aria-hidden="true"></i></a>
+        {% endif %}
+        <input id="menu-toggle" type="checkbox"/>
+        <label class='menu-button-container' for="menu-toggle">
+            <div class='menu-button'></div>
+        </label>
+
+        <nav id="main-menu">
+            <ul class="menu">
+                <li>
+                    <a class="nav-link " href="{% url "search" %}"><i
+                            class="fas fa-search"></i> {% translate 'Suchen' %}
+                    </a>
+                </li>
+                <li><a class="nav-link " href="{% url "add-adoption" %}"><i
+                        class="fas fa-feather"></i> {% translate 'Vermittlung hinzufügen' %}</a></li>
+                <li><a class="nav-link " href="{% url "about" %}"><i
+                        class="fas fa-info"></i> {% translate 'Über uns' %}
+                </a>
+                </li>
+                <li><a class="nav-link " href="{% url "rss" %}"><i
+                        class="fa-solid fa-rss"></i> {% translate 'RSS' %}
+                </a>
+                </li>
+            </ul>
+        </nav>
+    </div>
+</section>