diff --git a/konova/static/css/konova.css b/konova/static/css/konova.css
index 5f6c7bd8..db4b14c2 100644
--- a/konova/static/css/konova.css
+++ b/konova/static/css/konova.css
@@ -23,7 +23,7 @@ body{
     bottom: 0;
     width: 100%;
     height: 40px; /* Set the fixed height of the footer here */
-    line-height: 40px; /* Vertically center the text there */
+    line-height: 39px; /* Vertically center the text there */
     background-color: #f5f5f5;
     border-top: 1px solid var(--rlp-gray-light);
     color: var(--rlp-gray-dark);
@@ -34,10 +34,11 @@ body{
     text-decoration: none;
 }
 
-.nav{
+nav{
     background-color: var(--rlp-red);
-    height: 50px;
 }
+
+
 .nav-icon{
     color: white;
     font-weight: bold;
@@ -47,8 +48,6 @@ body{
 
 .menu-elem{
     border-left: 1px solid white;
-    border-right: 1px solid white;
-    display: inline-block;
 }
 
 .menu-elem:hover{
@@ -60,8 +59,4 @@ body{
 .nav-btn{
     color: white;
     padding: 0.5rem;
-    margin: 0 0.5rem 0 0;
-}
-.nav-btn:hover{
-
 }
\ No newline at end of file
diff --git a/templates/navbar.html b/templates/navbar.html
index f26fc3fd..32c493e6 100644
--- a/templates/navbar.html
+++ b/templates/navbar.html
@@ -1,54 +1,61 @@
 {% load i18n fontawesome_5 %}
-<nav class="nav justify-content-between">
-    <div class="d-flex align-items-center nav-icon ml-2" title="{% trans 'Kompensationsverzeichnis Service Portal' %}">
+<nav class="navbar navbar-expand-lg">
+    <div class="nav-icon mr-5" title="{% trans 'Kompensationsverzeichnis Service Portal' %}">
         <strong class="">{% trans 'KSP' %}</strong>
     </div>
-    <div class="d-flex align-items-center justify-content-center">
-        <a class="nav-item menu-elem" href="{% url 'home' %}">
-            <div class="btn nav-btn">
-                {% fa5_icon 'home' %}
-                {% trans 'Home' %}
+    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+      <span class="navbar-toggler-icon"></span>
+    </button>
+
+    <div class="collapse navbar-collapse" id="navbarSupportedContent">
+        <ul class="navbar-nav mr-auto">
+            <li class="nav-item menu-elem">
+                <a class="nav-btn btn nav-link" href="{% url 'home' %}">
+                    {% fa5_icon 'home' %}
+                    {% trans 'Home' %}
+                </a>
+            </li>
+            <li class="nav-item menu-elem">
+                <a class="nav-btn btn nav-link" href="{% url 'home' %}">
+                    {% fa5_icon 'pencil-ruler' %}
+                    {% trans 'Intervention' %}
+                </a>
+            </li>
+            <li class="nav-item menu-elem">
+                <a class="nav-btn btn nav-link" href="{% url 'home' %}">
+                    {% fa5_icon 'leaf' %}
+                    {% trans 'Compensation' %}
+                </a>
+            </li>
+            <li class="nav-item menu-elem">
+                <a class="nav-btn btn nav-link" href="{% url 'home' %}">
+                    {% fa5_icon 'tree' %}
+                    {% trans 'Eco-account' %}
+                </a>
+            </li>
+            <li class="nav-item menu-elem dropdown" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
+                <a class="nav-btn btn nav-link">
+                    {% fa5_icon 'ellipsis-v' %}
+                    {% trans 'More' %}
+                </a>
+                <div class="dropdown-menu">
+                    <a class="dropdown-item" href="{% url 'home' %}">{% fa5_icon 'euro-sign' %}  {% trans 'EMA' %}</a>
+                    <a class="dropdown-item" href="{% url 'home' %}">{% fa5_icon 'file-import' %}  {% trans 'Import...' %}</a>
+                    <a class="dropdown-item" href="{% url 'home' %}">{% fa5_icon 'file-export' %}  {% trans 'Export...' %}</a>
+                    <a class="dropdown-item" href="{% url 'home' %}">{% fa5_icon 'file-alt' %}  {% trans 'Reports' %}</a>
+                </div>
+            </li>
+
+        </ul>
+        <div class="nav-item dropdown">
+            <div class="btn nav-btn"  data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
+                {% fa5_icon 'user-circle' %}
+                {{ user.username }}
             </div>
-        </a>
-        <a class="nav-item menu-elem" href="{% url 'home' %}">
-            <div class="btn nav-btn">
-                {% fa5_icon 'pencil-ruler' %}
-                {% trans 'Intervention' %}
+            <div class="dropdown-menu dropdown-menu-right">
+                <a class="dropdown-item" href="{% url 'logout' %}">{% fa5_icon 'cogs' %}  {% trans 'Settings' %}</a>
+                <a class="dropdown-item" href="{% url 'logout' %}">{% fa5_icon 'sign-out-alt' %}  {% trans 'Logout' %}</a>
             </div>
-        </a>
-        <a class="nav-item menu-elem" href="{% url 'home' %}">
-            <div class="btn nav-btn">
-                {% fa5_icon 'leaf' %}
-                {% trans 'Compensation' %}
-            </div>
-        </a>
-        <a class="nav-item menu-elem" href="{% url 'home' %}">
-            <div class="btn nav-btn">
-                {% fa5_icon 'tree' %}
-                {% trans 'Eco-account' %}
-            </div>
-        </a>
-        <div class="nav-item menu-elem dropdown">
-            <div class="btn nav-btn" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
-                {% fa5_icon 'ellipsis-v' %}
-                {% trans 'More' %}
-            </div>
-            <div class="dropdown-menu">
-                <a class="dropdown-item" href="{% url 'home' %}">{% fa5_icon 'euro-sign' %}  {% trans 'EMA' %}</a>
-                <a class="dropdown-item" href="{% url 'home' %}">{% fa5_icon 'file-import' %}  {% trans 'Import...' %}</a>
-                <a class="dropdown-item" href="{% url 'home' %}">{% fa5_icon 'file-export' %}  {% trans 'Export...' %}</a>
-                <a class="dropdown-item" href="{% url 'home' %}">{% fa5_icon 'file-alt' %}  {% trans 'Reports' %}</a>
-            </div>
-        </div>
-    </div>
-    <div class="d-flex align-items-center nav-item ">
-        <div class="nav-btn" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
-            {% fa5_icon 'user-circle' %}
-            {{ user.username }}
-        </div>
-        <div class="dropdown-menu">
-            <a class="dropdown-item" href="{% url 'logout' %}">{% fa5_icon 'cogs' %}  {% trans 'Settings' %}</a>
-            <a class="dropdown-item" href="{% url 'logout' %}">{% fa5_icon 'sign-out-alt' %}  {% trans 'Logout' %}</a>
         </div>
     </div>
 </nav>
\ No newline at end of file