diff --git a/client/src/components/HeaderBar.vue b/client/src/components/HeaderBar.vue
index fa5528b2..31b622a9 100644
--- a/client/src/components/HeaderBar.vue
+++ b/client/src/components/HeaderBar.vue
@@ -59,20 +59,19 @@
     display: flex;
     flex-direction: row;
     @supports (display: grid) {
-      display: none;
-
-      @include desktop {
-        display: grid;
-      }
+      display: grid;
     }
     align-items: center;
     justify-content: space-between;
     background-color: $color-white;
     grid-auto-rows: 50px;
     width: 100%;
+    max-width: 100vw;
+
+    grid-template-columns: 1fr 1fr 1fr;
 
     @include desktop {
-      grid-template-columns: 1fr 1fr 1fr;
+      grid-template-columns: 50px 1fr 200px;
       grid-template-rows: 50px;
       grid-auto-rows: auto;
     }
@@ -91,6 +90,21 @@
       -ms-grid-row-align: center;
     }
 
+    &__content-navigation {
+      grid-column: 2;
+      justify-content: space-between;
+    }
+
+    &__sidebar-link {
+      padding: $small-spacing;
+      cursor: pointer;
+    }
+
+    &__sidebar-icon {
+      width: 30px;
+      height: 30px;
+    }
+
     /*
     * For IE10+
     */
@@ -107,29 +121,6 @@
       -ms-grid-column: 1;
       -ms-grid-column-span: 3;
     }
-
-    &__logo {
-      color: #17A887;
-      font-size: 36px;
-      font-weight: 800;
-      font-family: $sans-serif-font-family;
-      display: flex;
-      justify-self: center;
-
-      /*
-      * For IE10+
-      */
-      -ms-grid-column: 2;
-      -ms-grid-row-align: center;
-      -ms-grid-column-align: center;
-    }
-
-    &__logo-icon {
-
-      width: 212px;
-      height: 31px;
-
-    }
   }
 
   .user-header {
@@ -141,6 +132,11 @@
 
     &__sidebar-link {
       cursor: pointer;
+      display: none;
+
+      @include desktop {
+        display: flex;
+      }
     }
   }
 </style>
diff --git a/client/src/components/LogoutWidget.vue b/client/src/components/LogoutWidget.vue
index 3255f15b..bdbfb3e7 100644
--- a/client/src/components/LogoutWidget.vue
+++ b/client/src/components/LogoutWidget.vue
@@ -3,7 +3,7 @@
     <a
       class="logout-widget__logout"
       data-cy="logout"
-      @click="logout()">Logout</a>
+      @click="logout()">Abmelden</a>
   </div>
 </template>
 
@@ -28,12 +28,11 @@
   @import "@/styles/_mixins.scss";
 
   .logout-widget {
-    color: $color-silver-dark;
     display: flex;
     align-items: center;
 
     &__logout {
-      @include regular-text;
+      @include default-link;;
       cursor: pointer;
     }
   }
diff --git a/client/src/components/book-navigation/ContentNavigation.vue b/client/src/components/book-navigation/ContentNavigation.vue
index 7a46c226..aef366bb 100644
--- a/client/src/components/book-navigation/ContentNavigation.vue
+++ b/client/src/components/book-navigation/ContentNavigation.vue
@@ -65,21 +65,63 @@
   @import "@/styles/_variables.scss";
   @import "@/styles/_mixins.scss";
 
-  .top-navigation {
+  .content-navigation {
     display: flex;
+    align-items: center;
 
     &__link {
       padding: 0 24px;
-      @include default-link;
+      @include navigation-link;
+    }
+
+    &__primary, &__secondary {
+      display: none;
+      flex-direction: row;
+
+      @include desktop {
+        display: flex;
+      }
+    }
+
+    &__logo {
+      color: #17A887;
+      font-size: 36px;
+      font-weight: 800;
+      font-family: $sans-serif-font-family;
+      display: flex;
+      justify-self: center;
+
+      /*
+      * For IE10+
+      */
+      -ms-grid-column: 2;
+      -ms-grid-row-align: center;
+      -ms-grid-column-align: center;
+    }
+
+    &__logo-icon {
+      width: 212px;
+      height: 31px;
+    }
+
+    &__link {
+      &--secondary {
+        @include regular-text;
+      }
     }
 
     $parent: &;
 
-    &--mobile {
+    &--sidebar {
       flex-direction: column;
 
+      #{$parent}__primary, #{$parent}__secondary {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+      }
+
       #{$parent}__link {
-        color: $color-white;
         @include heading-4;
         line-height: 2.5em;
         padding: 0;
@@ -93,20 +135,21 @@
       }
 
       #{$parent}__item {
-        border-bottom: 1px solid $color-white;
+        width: 100%;
+        //border-bottom: 1px solid $color-white;
 
-        &:nth-child(1) {
-          order: 3;
-          border-bottom: 0;
-        }
+        /*&:nth-child(1) {*/
+        /*  order: 3;*/
+        /*  border-bottom: 0;*/
+        /*}*/
 
-        &:nth-child(2) {
-          order: 1;
-        }
+        /*&:nth-child(2) {*/
+        /*  order: 1;*/
+        /*}*/
 
-        &:nth-child(3) {
-          order: 2;
-        }
+        /*&:nth-child(3) {*/
+        /*  order: 2;*/
+        /*}*/
       }
     }
   }
diff --git a/client/src/components/book-navigation/NavigationSidebar.vue b/client/src/components/book-navigation/NavigationSidebar.vue
index 069044de..11f10ca2 100644
--- a/client/src/components/book-navigation/NavigationSidebar.vue
+++ b/client/src/components/book-navigation/NavigationSidebar.vue
@@ -60,6 +60,10 @@
     background-color: white;
     z-index: 20;
 
+    @include desktop {
+      box-shadow: 0px 2px 9px rgba(0, 0, 0, 0.12);
+    }
+
     display: grid;
 
     grid-template-columns: 1fr 50px;
@@ -75,12 +79,10 @@
     overflow-y: auto;
 
     @include desktop {
-      //display: none;
       width: 285px;
     }
 
     &__main {
-      background-color: $color-brand;
       padding: $medium-spacing;
       grid-area: m;
     }
@@ -93,13 +95,13 @@
       grid-column: 2;
       align-self: center;
       justify-self: center;
+      cursor: pointer;
     }
 
     &__close-icon {
       width: 30px;
       height: 30px;
       opacity: 0.5;
-      fill: $color-white;
     }
   }
 </style>
diff --git a/client/src/components/modules/Module.vue b/client/src/components/modules/Module.vue
index 89549c76..ebead69c 100644
--- a/client/src/components/modules/Module.vue
+++ b/client/src/components/modules/Module.vue
@@ -216,6 +216,7 @@
   .module {
     display: flex;
     justify-self: center;
+    max-width: 100vw;
 
     @include desktop {
       width: 800px;
diff --git a/client/src/components/profile/Avatar.vue b/client/src/components/profile/Avatar.vue
index 8bfba351..5bc8cb0f 100644
--- a/client/src/components/profile/Avatar.vue
+++ b/client/src/components/profile/Avatar.vue
@@ -124,8 +124,8 @@
       height: 34px;
       display: block;
       left: 50%;
-      bottom: -7px;
-      transform: translateX(50%);
+      bottom: -3px;
+      transform: translateX(80%);
       background-color: $color-white;
       border-radius: 50%;
       padding: 6px;
diff --git a/client/src/components/profile/ProfileSidebar.vue b/client/src/components/profile/ProfileSidebar.vue
index b885ee20..f748f4c1 100644
--- a/client/src/components/profile/ProfileSidebar.vue
+++ b/client/src/components/profile/ProfileSidebar.vue
@@ -76,62 +76,71 @@
 </script>
 
 <style scoped lang="scss">
-  @import "@/styles/_variables.scss";
-  @import "@/styles/_mixins.scss";
+    @import "@/styles/_variables.scss";
+    @import "@/styles/_mixins.scss";
 
-  .profile-sidebar {
-    padding: $large-spacing 0;
-    box-sizing: border-box;
-    position: fixed;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    height: 100vh;
-    background-color: $color-white;
-    z-index: 15;
-    box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.12);
-    overflow-y: scroll;
+    .profile-sidebar {
+        padding: $large-spacing 0;
+        box-sizing: border-box;
+        position: fixed;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        height: 100vh;
+        background-color: $color-white;
+        z-index: 15;
+        box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.12);
+        overflow-y: scroll;
 
-    width: 100%;
-    @include desktop {
-      width: 333px;
+        width: 100%;
+        @include desktop {
+            width: 333px;
+        }
+
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-start;
+
+        &__section {
+            margin-bottom: $large-spacing;
+
+            &:last-of-type {
+                margin-top: auto;
+            }
+        }
+
+        &__item {
+            padding: $small-spacing $medium-spacing;
+        }
+
+        &__subtitle {
+            @include small-text;
+            margin: 0;
+            margin-bottom: $small-spacing;
+        }
+
+        &__link {
+            @include default-link;
+            display: block;
+        }
+
+        &__close-link {
+            position: absolute;
+            right: $small-spacing;
+            top: $small-spacing;
+            cursor: pointer;
+        }
+
+        &__close-icon {
+            width: 30px;
+            height: 30px;
+            opacity: 0.5;
+        }
+
+        &__support {
+            padding: $medium-spacing;
+            @include regular-text;
+            color: $color-silver-dark;
+        }
     }
-
-    display: flex;
-    flex-direction: column;
-
-    &__item {
-      border-bottom: 1px solid $color-silver-light;
-      padding: $large-spacing $medium-spacing;
-    }
-
-    &__subtitle {
-      @include small-text;
-      margin: 0;
-      margin-bottom: $small-spacing;
-    }
-
-    &__link {
-      @include default-link;
-      display: block;
-    }
-
-    &__close-link {
-      position: absolute;
-      right: $small-spacing;
-      top: $small-spacing;
-      cursor: pointer;
-    }
-
-    &__close-icon {
-      width: 40px;
-      height: 40px;
-    }
-
-    &__support {
-      padding: $small-spacing;
-      @include regular-text;
-      color: $color-silver-dark;
-    }
-  }
 </style>
diff --git a/client/src/components/profile/ProfileWidget.vue b/client/src/components/profile/ProfileWidget.vue
index 30edecc2..88fff0b9 100644
--- a/client/src/components/profile/ProfileWidget.vue
+++ b/client/src/components/profile/ProfileWidget.vue
@@ -35,10 +35,10 @@
   .profile-widget {
     display: flex;
     flex-direction: column;
-    align-items: center;
+    align-items: start;
 
     &__name {
-      @include heading-3;
+      @include heading-4;
       text-align: center;
       margin-bottom: $small-spacing;
     }
@@ -47,8 +47,8 @@
       display: flex;
       justify-content: center;
       margin-bottom: $medium-spacing;
-      width: 80px;
-      height: 80px;
+      width: 120px;
+      height: 120px;
       position: relative;
 
     }
diff --git a/client/src/components/school-class/ClassSelectionWidget.vue b/client/src/components/school-class/ClassSelectionWidget.vue
index 841b6003..16723f90 100644
--- a/client/src/components/school-class/ClassSelectionWidget.vue
+++ b/client/src/components/school-class/ClassSelectionWidget.vue
@@ -105,7 +105,6 @@
     position: relative;
     cursor: pointer;
     margin-bottom: $medium-spacing;
-    border: 1px solid $color-silver;
     border-radius: 4px;
 
     &__popover {
@@ -120,22 +119,22 @@
   .selected-class {
     width: 100%;
     box-sizing: border-box;
-    padding: $small-spacing $medium-spacing;
+    padding: $small-spacing 0;
 
     display: flex;
     align-items: center;
-    justify-content: space-between;
+    justify-content: start;
 
     &__text {
       line-height: $large-spacing;
-      @include regular-text;
-      color: $color-silver-dark;
+      @include heading-4;
+      margin-right: $small-spacing;
     }
 
     &__dropdown-icon {
       width: 20px;
       height: 20px;
-      fill: $color-brand;
+      fill: $color-charcoal-dark;
     }
   }
 </style>
diff --git a/client/src/components/school-class/CurrentClass.vue b/client/src/components/school-class/CurrentClass.vue
index c1cc9d3b..81669111 100644
--- a/client/src/components/school-class/CurrentClass.vue
+++ b/client/src/components/school-class/CurrentClass.vue
@@ -28,6 +28,5 @@
   .current-class {
     line-height: $large-spacing;
     @include regular-text;
-    color: $color-silver-dark;
   }
 </style>