diff --git a/client/src/App.vue b/client/src/App.vue
index b6fe73f8..5c2867a8 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -10,7 +10,7 @@
       :is="showModal"
       v-if="showModal"/>
     <component :is="layout"/>
-    <mobile-navigation v-if="showMobileNavigation"/>
+
   </div>
 </template>
 
@@ -21,7 +21,6 @@
   import FullScreenLayout from '@/layouts/FullScreenLayout';
   import PublicLayout from '@/layouts/PublicLayout';
   import Modal from '@/components/Modal';
-  import MobileNavigation from '@/components/book-navigation/MobileNavigation';
   import NewContentBlockWizard from '@/components/content-block-form/NewContentBlockWizard';
   import EditContentBlockWizard from '@/components/content-block-form/EditContentBlockWizard';
   import NewRoomEntryWizard from '@/components/rooms/room-entries/NewRoomEntryWizard';
@@ -49,7 +48,6 @@
       FullScreenLayout,
       PublicLayout,
       Modal,
-      MobileNavigation,
       NewContentBlockWizard,
       EditContentBlockWizard,
       NewRoomEntryWizard,
diff --git a/client/src/components/HeaderBar.vue b/client/src/components/HeaderBar.vue
index 2075da30..dde98b7a 100644
--- a/client/src/components/HeaderBar.vue
+++ b/client/src/components/HeaderBar.vue
@@ -1,16 +1,15 @@
 <template>
   <header class="header-bar">
-    <content-navigation/>
-    <router-link
-      to="/"
-      class="header-bar__logo"
-      data-cy="home-link">
-      <logo class="header-bar__logo-icon"/>
-    </router-link>
+    <a
+      class="header-bar__sidebar-link"
+      @click="openSidebar('navigation')">
+      <hamburger class="header-bar__sidebar-icon"/>
+    </a>
+    <content-navigation class="header-bar__content-navigation"/>
     <div class="user-header">
       <a
         class="user-header__sidebar-link"
-        @click="openSidebar()">
+        @click="openSidebar('profile')">
         <current-class class="user-header__current-class"/>
       </a>
 
@@ -18,16 +17,15 @@
         v-bind="me"
         data-cy="header-user-widget"/>
     </div>
-    <book-navigation v-if="showSubnavigation"/>
   </header>
 </template>
 
 <script>
   import ContentNavigation from '@/components/book-navigation/ContentNavigation.vue';
-  import BookNavigation from '@/components/book-navigation/BookNavigation';
   import UserWidget from '@/components/UserWidget.vue';
   import Logo from '@/components/icons/Logo';
   import CurrentClass from '@/components/school-class/CurrentClass';
+  import Hamburger from '@/components/icons/Hamburger';
 
   import openSidebar from '@/mixins/open-sidebar';
   import me from '@/mixins/me';
@@ -38,9 +36,9 @@
     components: {
       ContentNavigation,
       UserWidget,
-      BookNavigation,
       Logo,
-      CurrentClass
+      CurrentClass,
+      Hamburger
     },
 
     computed: {
@@ -59,20 +57,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 +88,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 +119,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 +130,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..eea2361f 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/Modal.vue b/client/src/components/Modal.vue
index 82541022..27c872f1 100644
--- a/client/src/components/Modal.vue
+++ b/client/src/components/Modal.vue
@@ -121,11 +121,6 @@
       align-content: center;
     }
 
-    &__close-icon {
-      width: 40px;
-      height: 40px;
-    }
-
     &__footer {
       grid-area: footer;
       -ms-grid-row: 3;
diff --git a/client/src/components/UserWidget.vue b/client/src/components/UserWidget.vue
index 157763ef..1fd567e8 100644
--- a/client/src/components/UserWidget.vue
+++ b/client/src/components/UserWidget.vue
@@ -5,7 +5,7 @@
     <div
       class="user-widget__avatar"
       data-cy="user-widget-avatar"
-      @click="openSidebar()">
+      @click="openSidebar('profile')">
       <avatar
         :avatar-url="avatarUrl"
         :icon-highlighted="isProfile"/>
diff --git a/client/src/components/book-navigation/BookNavigation.vue b/client/src/components/book-navigation/BookNavigation.vue
deleted file mode 100644
index 37ce60dc..00000000
--- a/client/src/components/book-navigation/BookNavigation.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<template>
-  <aside class="sub-navigation">
-    <sub-navigation-item title="Themen">
-      <book-topic-navigation/>
-    </sub-navigation-item>
-    <router-link
-      :to="{name: 'instrument-overview'}"
-      active-class="sub-navigation-item--active"
-      class="sub-navigation-item">
-      <span class="sub-navigation-item__title">Instrumente</span>
-    </router-link>
-
-    <!--<sub-navigation-item title="News">-->
-    <!--<template slot="title">-->
-    <!--<h2 class="sub-navigation__title" slot="title">ABU News</h2>-->
-    <!--</template>-->
-    <!--</sub-navigation-item>-->
-  </aside>
-</template>
-
-<script>
-  import SubNavigationItem from '@/components/book-navigation/SubNavigationItem';
-  import BookTopicNavigation from '@/components/book-navigation/BookTopicNavigation';
-
-  export default {
-    components: {
-      SubNavigationItem,
-      BookTopicNavigation
-    }
-  }
-</script>
diff --git a/client/src/components/book-navigation/BookTopicNavigation.vue b/client/src/components/book-navigation/BookTopicNavigation.vue
index 10bc5cb1..2ddb547e 100644
--- a/client/src/components/book-navigation/BookTopicNavigation.vue
+++ b/client/src/components/book-navigation/BookTopicNavigation.vue
@@ -7,7 +7,7 @@
       tag="div"
       class="book-topics__topic book-subnavigation__item"
       v-for="topic in topics"
-      @click.native="hideMobileNavigation">
+      @click.native="closeSidebar('navigation')">
       {{ topic.order }}.
       {{ topic.title }}
     </router-link>
@@ -16,6 +16,7 @@
 
 <script>
   import ALL_TOPICS_QUERY from '@/graphql/gql/allTopicsQuery.gql';
+  import sidebarMixin from '@/mixins/sidebar';
 
   export default {
     props: {
@@ -24,6 +25,8 @@
       }
     },
 
+    mixins: [sidebarMixin],
+
     data() {
       return {
         topics: []
@@ -33,9 +36,6 @@
     methods: {
       topicId(id) {
         return atob(id)
-      },
-      hideMobileNavigation() {
-        this.$store.dispatch('showMobileNavigation', false);
       }
     },
 
diff --git a/client/src/components/book-navigation/ContentNavigation.vue b/client/src/components/book-navigation/ContentNavigation.vue
index 7a46c226..ed4c327b 100644
--- a/client/src/components/book-navigation/ContentNavigation.vue
+++ b/client/src/components/book-navigation/ContentNavigation.vue
@@ -1,61 +1,99 @@
 <template>
   <nav
-    :class="{'top-navigation--mobile': mobile}"
-    class="top-navigation">
-    <div class="top-navigation__item">
-      <router-link
-        :class="{'top-navigation__link--active': isActive('book')}"
-        to="/book/topic/berufliche-grundbildung"
-        active-class="top-navigation__link--active"
-        class="top-navigation__link"
-        @click.native="hideMobileNavigation">Inhalte
-      </router-link>
+    :class="{'content-navigation--sidebar': isSidebar}"
+    class="content-navigation">
+    <div class="content-navigation__primary">
+      <div class="content-navigation__item">
+        <router-link
+          :class="{'content-navigation__link--active': isActive('book')}"
+          to="/book/topic/berufliche-grundbildung"
+          active-class="content-navigation__link--active"
+          class="content-navigation__link"
+          @click.native="close">Themen
+        </router-link>
 
-      <mobile-subnavigation v-if="mobile"/>
+        <book-topic-navigation
+          v-if="isSidebar"
+        />
 
+      </div>
+
+      <div class="content-navigation__item">
+        <router-link
+          to="/instruments"
+          active-class="content-navigation__link--active"
+          class="content-navigation__link"
+          @click.native="close">Instrumente
+        </router-link>
+      </div>
+
+      <div class="content-navigation__item">
+        <router-link
+          to="/"
+          active-class="content-navigation__link--active"
+          class="content-navigation__link"
+          @click.native="close">News
+        </router-link>
+      </div>
     </div>
 
-    <div class="top-navigation__item">
-      <router-link
-        to="/rooms"
-        active-class="top-navigation__link--active"
-        class="top-navigation__link"
-        @click.native="hideMobileNavigation">Räume
-      </router-link>
-    </div>
+    <router-link
+      to="/"
+      class="content-navigation__logo"
+      data-cy="home-link"
+      v-if="!isSidebar"
+    >
+      <logo class="content-navigation__logo-icon"/>
+    </router-link>
 
-    <div class="top-navigation__item">
-      <router-link
-        to="/portfolio"
-        active-class="top-navigation__link--active"
-        class="top-navigation__link"
-        @click.native="hideMobileNavigation">Portfolio
-      </router-link>
-    </div>
+    <div class="content-navigation__secondary">
+      <div class="content-navigation__item content-navigation__item--secondary">
+        <router-link
+          to="/rooms"
+          active-class="content-navigation__link--active"
+          class="content-navigation__link content-navigation__link--secondary"
+          @click.native="close">Räume
+        </router-link>
+      </div>
 
+      <div class="content-navigation__item content-navigation__item--secondary">
+        <router-link
+          to="/portfolio"
+          active-class="content-navigation__link--active"
+          class="content-navigation__link content-navigation__link--secondary"
+          @click.native="close">Portfolio
+        </router-link>
+      </div>
+    </div>
   </nav>
 </template>
 
 <script>
-  import MobileSubnavigation from '@/components/book-navigation/MobileSubnavigation';
+  import Logo from '@/components/icons/Logo';
+  import BookTopicNavigation from '@/components/book-navigation/BookTopicNavigation';
+
+  import sidebarMixin from '@/mixins/sidebar';
 
   export default {
     props: {
-      mobile: {
+      isSidebar: {
         default: false
       }
     },
 
+    mixins: [sidebarMixin],
+
     components: {
-      MobileSubnavigation
+      BookTopicNavigation,
+      Logo
     },
 
     methods: {
       isActive(linkName) {
         return linkName === 'book' && this.$route.path.indexOf('module') > -1;
       },
-      hideMobileNavigation() {
-        this.$store.dispatch('showMobileNavigation', false);
+      close() {
+        this.closeSidebar('navigation');
       }
     }
   }
@@ -65,21 +103,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 +173,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/MobileSubnavigation.vue b/client/src/components/book-navigation/MobileSubnavigation.vue
deleted file mode 100644
index be1e87c7..00000000
--- a/client/src/components/book-navigation/MobileSubnavigation.vue
+++ /dev/null
@@ -1,47 +0,0 @@
-<template>
-  <div class="mobile-subnavigation">
-    <div class="mobile-subnavigation__section">
-      <h3 class="mobile-subnavigation__title">Themen</h3>
-      <book-topic-navigation :mobile="true"/>
-    </div>
-
-    <div class="mobile-subnavigation__section">
-      <router-link
-        :to="{name: 'instrument-overview'}"
-        class="sub-navigation-item book-subnavigation">
-        <span class="sub-navigation-item__title book-subnavigation__item--mobile book-subnavigation__item">
-          Instrumente
-        </span>
-      </router-link>
-    </div>
-
-  </div>
-</template>
-
-<script>
-  import BookTopicNavigation from '@/components/book-navigation/BookTopicNavigation';
-
-  export default {
-    components: {
-      BookTopicNavigation
-    },
-  }
-</script>
-
-<style scoped lang="scss">
-  @import "@/styles/_variables.scss";
-  @import "@/styles/_mixins.scss";
-
-  .mobile-subnavigation {
-    &__title {
-      @include small-text;
-      color: rgba($color-white, 0.6);
-
-      margin-bottom: $small-spacing;
-    }
-
-    &__section {
-      margin-bottom: $medium-spacing;
-    }
-  }
-</style>
diff --git a/client/src/components/book-navigation/MobileNavigation.vue b/client/src/components/book-navigation/NavigationSidebar.vue
similarity index 70%
rename from client/src/components/book-navigation/MobileNavigation.vue
rename to client/src/components/book-navigation/NavigationSidebar.vue
index b5e20715..1914d3ef 100644
--- a/client/src/components/book-navigation/MobileNavigation.vue
+++ b/client/src/components/book-navigation/NavigationSidebar.vue
@@ -1,12 +1,14 @@
 <template>
-  <div class="mobile-navigation">
+  <div
+    class="navigation-sidebar"
+    v-if="sidebar.navigation">
     <content-navigation
-      :mobile="true"
-      class="mobile-navigation__main"/>
+      :is-sidebar="true"
+      class="navigation-sidebar__main"/>
     <div
-      class="mobile-navigation__close-button"
-      @click="hideMobileNavigation">
-      <cross class="mobile-navigation__close-icon"/>
+      class="navigation-sidebar__close-button"
+      @click="close">
+      <cross class="navigation-sidebar__close-icon"/>
     </div>
   </div>
 </template>
@@ -15,9 +17,13 @@
   import Cross from '@/components/icons/Cross';
   import ContentNavigation from '@/components/book-navigation/ContentNavigation';
 
+  import sidebarMixin from '@/mixins/sidebar';
+
   import {meQuery} from '@/graphql/queries';
 
   export default {
+    mixins: [sidebarMixin],
+
     components: {
       ContentNavigation,
       Cross
@@ -30,8 +36,8 @@
     },
 
     methods: {
-      hideMobileNavigation() {
-        this.$store.dispatch('showMobileNavigation', false);
+      close() {
+        this.closeSidebar('navigation');
       }
     },
 
@@ -45,7 +51,7 @@
   @import "@/styles/_variables.scss";
   @import "@/styles/_mixins.scss";
 
-  .mobile-navigation {
+  .navigation-sidebar {
     position: fixed;
     left: 0;
     right: 0;
@@ -54,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;
@@ -69,11 +79,10 @@
     overflow-y: auto;
 
     @include desktop {
-      display: none;
+      width: 285px;
     }
 
     &__main {
-      background-color: $color-brand;
       padding: $medium-spacing;
       grid-area: m;
     }
@@ -86,13 +95,7 @@
       grid-column: 2;
       align-self: center;
       justify-self: center;
-    }
-
-    &__close-icon {
-      width: 30px;
-      height: 30px;
-      opacity: 0.5;
-      fill: $color-white;
+      cursor: pointer;
     }
   }
 </style>
diff --git a/client/src/components/icons/Cross.vue b/client/src/components/icons/Cross.vue
index 43422926..5bdc1eec 100644
--- a/client/src/components/icons/Cross.vue
+++ b/client/src/components/icons/Cross.vue
@@ -2,8 +2,16 @@
   <svg
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 100 100"
-    id="shape">
+    class="cross">
     <path
       d="M53.91,50,87.19,16.73a2.77,2.77,0,1,0-3.91-3.91L50,46.09,16.73,12.81a2.77,2.77,0,1,0-3.91,3.91L46.09,50,12.81,83.27a2.77,2.77,0,1,0,3.91,3.91L50,53.91,83.27,87.19a2.77,2.77,0,0,0,3.91-3.91Z"/>
   </svg>
 </template>
+
+<style scoped lang="scss">
+  .cross {
+    width: 30px;
+    height: 30px;
+    opacity: 0.5;
+  }
+</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 b4e68998..5bc8cb0f 100644
--- a/client/src/components/profile/Avatar.vue
+++ b/client/src/components/profile/Avatar.vue
@@ -69,7 +69,7 @@
         this.$apollo.mutate({
           mutation: TOGGLE_SIDEBAR,
           variables: {
-            open: false
+            profile: false
           }
         })
       }
@@ -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 a31e2095..aa728585 100644
--- a/client/src/components/profile/ProfileSidebar.vue
+++ b/client/src/components/profile/ProfileSidebar.vue
@@ -2,46 +2,52 @@
   <div
     v-click-outside="closeSidebar"
     class="profile-sidebar"
-    v-if="sidebar.open">
+    v-if="sidebar.profile">
     <a
       class="profile-sidebar__close-link"
-      @click="closeSidebar">
+      @click="close">
       <cross class="profile-sidebar__close-icon"/>
     </a>
-    <profile-widget class="profile-sidebar__item"/>
-    <div
-      class="profile-sidebar__item"
-      @click="closeSidebar">
-      <router-link
-        to="/me/activity"
-        class="profile-sidebar__link">Meine Aktivitäten</router-link>
-    </div>
-    <div class="profile-sidebar__item">
-      <h3 class="profile-sidebar__subtitle">Klasse</h3>
-      <class-selection-widget/>
-      <div @click="closeSidebar">
+    <div class="profile-sidebar__section">
+      <profile-widget class="profile-sidebar__item"/>
+      <div
+        class="profile-sidebar__item"
+        @click="close">
         <router-link
-          :to="{name: 'my-class'}"
-          class="profile-sidebar__link">Klassenliste anzeigen</router-link>
+          to="/me/activity"
+          class="profile-sidebar__link">Meine Aktivitäten
+        </router-link>
       </div>
     </div>
-    <div
-      class="profile-sidebar__item"
-      @click="closeSidebar">
-      <router-link
-        :to="{name:'join-class'}"
-        data-cy="join-class-link"
-        class="profile-sidebar__link">Zugangscode
-        eingeben
-      </router-link>
-    </div>
-    <div class="profile-sidebar__item">
-      <logout-widget/>
+    <div class="profile-sidebar__section">
+      <div class="profile-sidebar__item">
+        <class-selection-widget/>
+        <div @click="close">
+          <router-link
+            :to="{name: 'my-class'}"
+            class="profile-sidebar__link">Klassenliste
+          </router-link>
+        </div>
+      </div>
     </div>
+    <div class="profile-sidebar__section">
+      <div
+        class="profile-sidebar__item"
+        @click="close">
+        <router-link
+          :to="{name:'join-class'}"
+          data-cy="join-class-link"
+          class="profile-sidebar__link">Zugangscode
+        </router-link>
+      </div>
+      <div class="profile-sidebar__item">
+        <logout-widget/>
+      </div>
 
-    <p class="profile-sidebar__support">
-      Supportanfragen: rahel.wenger@hep-verlag.ch
-    </p>
+      <p class="profile-sidebar__support">
+        Supportanfragen: rahel.wenger@hep-verlag.ch
+      </p>
+    </div>
   </div>
 </template>
 
@@ -57,12 +63,19 @@
   export default {
 
     mixins: [sidebarMixin],
+
     components: {
       LogoutWidget,
       ClassSelectionWidget,
       ProfileWidget,
       Cross
     },
+
+    methods: {
+      close() {
+        this.closeSidebar('profile')
+      }
+    },
   }
 </script>
 
@@ -90,10 +103,18 @@
 
     display: flex;
     flex-direction: column;
+    justify-content: flex-start;
+
+    &__section {
+      margin-bottom: $large-spacing;
+
+      &:last-of-type {
+        margin-top: auto;
+      }
+    }
 
     &__item {
-      border-bottom: 1px solid $color-silver-light;
-      padding: $large-spacing $medium-spacing;
+      padding: $small-spacing $medium-spacing;
     }
 
     &__subtitle {
@@ -114,13 +135,8 @@
       cursor: pointer;
     }
 
-    &__close-icon {
-      width: 40px;
-      height: 40px;
-    }
-
     &__support {
-      padding: $small-spacing;
+      padding: $medium-spacing;
       @include regular-text;
       color: $color-silver-dark;
     }
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>
diff --git a/client/src/graphql/client.js b/client/src/graphql/client.js
index 45a6838d..af3c7316 100644
--- a/client/src/graphql/client.js
+++ b/client/src/graphql/client.js
@@ -17,7 +17,8 @@ const writeLocalCache = cache => {
       },
       sidebar: {
         __typename: 'Sidebar',
-        open: false
+        profile: false,
+        navigation: false
       },
       helloEmail: {
         __typename: 'HelloEmail',
diff --git a/client/src/graphql/gql/local/mutations/toggleSidebar.gql b/client/src/graphql/gql/local/mutations/toggleSidebar.gql
index fc32729e..c05a9221 100644
--- a/client/src/graphql/gql/local/mutations/toggleSidebar.gql
+++ b/client/src/graphql/gql/local/mutations/toggleSidebar.gql
@@ -1,3 +1,3 @@
-mutation($open: Boolean!) {
-  toggleSidebar(open: $open) @client
+mutation($sidebar: SidebarInput!) {
+  toggleSidebar(sidebar: $sidebar) @client
 }
diff --git a/client/src/graphql/gql/local/sidebar.gql b/client/src/graphql/gql/local/sidebar.gql
index 4cdb1bc6..8526d5d1 100644
--- a/client/src/graphql/gql/local/sidebar.gql
+++ b/client/src/graphql/gql/local/sidebar.gql
@@ -1,5 +1,6 @@
 query Sidebar {
   sidebar @client {
-    open
+    profile
+    navigation
   }
 }
diff --git a/client/src/graphql/resolvers.js b/client/src/graphql/resolvers.js
index 11cd35eb..2dd4abeb 100644
--- a/client/src/graphql/resolvers.js
+++ b/client/src/graphql/resolvers.js
@@ -16,9 +16,14 @@ export const resolvers = {
       cache.writeQuery({query: HELLO_EMAIL, data});
       return data.helloEmail;
     },
-    toggleSidebar: (_, {open}, {cache}) => {
+    toggleSidebar: (_, {sidebar: {profile, navigation}}, {cache}) => {
       const data = cache.readQuery({query: SIDEBAR});
-      data.sidebar.open = open;
+      if (typeof profile !== 'undefined') {
+        data.sidebar.profile = profile;
+      }
+      if (typeof navigation !== 'undefined') {
+        data.sidebar.navigation = navigation;
+      }
       cache.writeQuery({query: SIDEBAR, data});
       return data.sidebar;
     }
diff --git a/client/src/graphql/typedefs.js b/client/src/graphql/typedefs.js
index c17dd4a3..4f7c8552 100644
--- a/client/src/graphql/typedefs.js
+++ b/client/src/graphql/typedefs.js
@@ -1,6 +1,11 @@
 import gql from 'graphql-tag';
 
 export const typeDefs = gql`
+  type SidebarInput {
+    navigation: Boolean
+    profile: Boolean
+  }
+
   type ScrollPosition {
     scrollTo: String!
   }
@@ -9,16 +14,14 @@ export const typeDefs = gql`
     email: String!
   }
 
-
   type Sidebar {
-    open: Boolean!
+    navigation: Boolean
+    profile: Boolean
   }
 
   type Mutation {
     scrollTo(scrollTo: String!): ScrollPosition
-  }
-
-  type Mutation {
     helloEmail(email: String!): HelloEmail
+    toggleSidebar(sidebar: SidebarInput!): Sidebar
   }
 `;
diff --git a/client/src/layouts/BlankLayout.vue b/client/src/layouts/BlankLayout.vue
index a050d6f9..b819cf6a 100644
--- a/client/src/layouts/BlankLayout.vue
+++ b/client/src/layouts/BlankLayout.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="blank-layout">
     <profile-sidebar/>
+    <navigation-sidebar/>
     <router-view/>
   </div>
 </template>
@@ -16,8 +17,12 @@
 
 <script>
   import ProfileSidebar from '@/components/profile/ProfileSidebar';
+  import NavigationSidebar from '@/components/book-navigation/NavigationSidebar';
 
   export default {
-    components: {ProfileSidebar},
+    components: {
+      ProfileSidebar,
+      NavigationSidebar
+    },
   }
 </script>
diff --git a/client/src/layouts/DefaultFooter.vue b/client/src/layouts/DefaultFooter.vue
index 0b2a693b..f8510b5e 100644
--- a/client/src/layouts/DefaultFooter.vue
+++ b/client/src/layouts/DefaultFooter.vue
@@ -68,6 +68,8 @@
 
   .default-footer {
     background-color: $color-silver-light;
+    max-width: 100vw;
+    overflow: hidden;
 
     &__section {
       width: 100%;
@@ -77,7 +79,8 @@
     }
 
     &__info {
-      width: $footer-width;
+      width: 100%;
+      max-width: $footer-width;
       padding: 2*$large-spacing 0;
       display: flex;
       justify-content: space-between;
@@ -98,7 +101,8 @@
     }
 
     &__links {
-      width: $footer-width;
+      width: 100%;
+      max-width: $footer-width;
       padding: $large-spacing 0;
     }
 
diff --git a/client/src/layouts/DefaultLayout.vue b/client/src/layouts/DefaultLayout.vue
index 2400094a..fc3a7e9f 100644
--- a/client/src/layouts/DefaultLayout.vue
+++ b/client/src/layouts/DefaultLayout.vue
@@ -2,13 +2,10 @@
   <div
     :class="specialContainerClass"
     class="container skillbox layout">
+    <navigation-sidebar/>
     <profile-sidebar/>
     <header-bar class="header layout__header"/>
 
-    <mobile-header
-      class="header layout__header layout__header--mobile"
-    />
-
     <router-view class="layout__content"/>
     <default-footer class="layout__footer"/>
   </div>
@@ -19,12 +16,14 @@
   import MobileHeader from '@/components/MobileHeader';
   import ProfileSidebar from '@/components/profile/ProfileSidebar';
   import DefaultFooter from '@/layouts/DefaultFooter';
+  import NavigationSidebar from '@/components/book-navigation/NavigationSidebar';
 
   export default {
     components: {
       HeaderBar,
       MobileHeader,
       ProfileSidebar,
+      NavigationSidebar,
       DefaultFooter
     },
 
diff --git a/client/src/layouts/FullScreenLayout.vue b/client/src/layouts/FullScreenLayout.vue
index beff442f..284ff8fd 100644
--- a/client/src/layouts/FullScreenLayout.vue
+++ b/client/src/layouts/FullScreenLayout.vue
@@ -45,11 +45,6 @@
 
     display:flex;
     justify-content:end;
-
-    &__icon {
-      width: 40px;
-      height: 40px;
-    }
   }
 
 </style>
diff --git a/client/src/layouts/SimpleLayout.vue b/client/src/layouts/SimpleLayout.vue
index 7cf00234..6c8e7744 100644
--- a/client/src/layouts/SimpleLayout.vue
+++ b/client/src/layouts/SimpleLayout.vue
@@ -71,10 +71,5 @@
       margin-right: $medium-spacing;
       margin-top: $medium-spacing;
     }
-
-    &__icon {
-      width: 40px;
-      height: 40px;
-    }
   }
 </style>
diff --git a/client/src/mixins/open-sidebar.js b/client/src/mixins/open-sidebar.js
index ffaba465..dbe423d0 100644
--- a/client/src/mixins/open-sidebar.js
+++ b/client/src/mixins/open-sidebar.js
@@ -2,12 +2,14 @@ import TOGGLE_SIDEBAR from '@/graphql/gql/local/mutations/toggleSidebar.gql';
 
 export default {
   methods: {
-    openSidebar() {
+    openSidebar(type) {
       this.$nextTick(() => { // we don't want this to happen instantly, only almost instantly. Otherwise the click-outside-directive won't work
         this.$apollo.mutate({
           mutation: TOGGLE_SIDEBAR,
           variables: {
-            open: true
+            sidebar: {
+              [type]: true
+            }
           }
         });
       });
diff --git a/client/src/mixins/sidebar.js b/client/src/mixins/sidebar.js
index 17c66a8e..796a045d 100644
--- a/client/src/mixins/sidebar.js
+++ b/client/src/mixins/sidebar.js
@@ -3,12 +3,14 @@ import TOGGLE_SIDEBAR from '@/graphql/gql/local/mutations/toggleSidebar.gql';
 
 export default {
   methods: {
-    closeSidebar() {
-      if (this.sidebar.open) {
+    closeSidebar(type) {
+      if (this.sidebar[type]) {
         this.$apollo.mutate({
           mutation: TOGGLE_SIDEBAR,
           variables: {
-            open: false
+            sidebar: {
+              [type]: false
+            }
           }
         });
       }
@@ -23,7 +25,8 @@ export default {
 
   data: () => ({
     sidebar: {
-      open: false
+      profile: false,
+      navigation: false
     }
   })
 }
diff --git a/client/src/pages/start.vue b/client/src/pages/start.vue
index fc49244f..328d1ce7 100644
--- a/client/src/pages/start.vue
+++ b/client/src/pages/start.vue
@@ -2,8 +2,6 @@
   <div class="start-page">
     <header-bar class="start-page__header"/>
 
-    <mobile-header class="start-page__header start-page__header--mobile"/>
-
     <div class="start-page__sections start-sections">
 
       <section-block
diff --git a/client/src/styles/_book-subnavigation.scss b/client/src/styles/_book-subnavigation.scss
index e288346d..64e1dae3 100644
--- a/client/src/styles/_book-subnavigation.scss
+++ b/client/src/styles/_book-subnavigation.scss
@@ -1,10 +1,11 @@
 .book-subnavigation {
   &__item {
     @include small-text;
+    line-height: 2;
     margin-bottom: $small-spacing;
     cursor: pointer;
 
-    color: $color-silver-dark;
+    color: $color-charcoal-dark;
 
     &--mobile {
       color: $color-white;
diff --git a/client/src/styles/_default-layout.scss b/client/src/styles/_default-layout.scss
index 0fa55e54..3576be7c 100644
--- a/client/src/styles/_default-layout.scss
+++ b/client/src/styles/_default-layout.scss
@@ -6,6 +6,7 @@
 
   margin: 0 auto;
   width: 100%;
+
   /*
    * For IE10+
    */
@@ -19,8 +20,6 @@
   min-height: 100vh;
   grid-auto-rows: 1fr;
 
-
-
   &--show-filter {
     grid-template-rows: auto auto 1fr $footer-height;
     -ms-grid-rows: 50px 50px 30px 1fr $footer-height; // 1 extra row for gap
diff --git a/client/src/styles/_mixins.scss b/client/src/styles/_mixins.scss
index 9f4e1589..012764e0 100644
--- a/client/src/styles/_mixins.scss
+++ b/client/src/styles/_mixins.scss
@@ -114,7 +114,8 @@
 @mixin small-text {
   font-family: $sans-serif-font-family;
   font-weight: 400;
-  font-size: toRem(16px);
+  //font-size: toRem(16px); todo: did this really change or is this only for the subnavigation
+  font-size: toRem(14px);
 }
 
 @mixin aside-text {
@@ -127,6 +128,13 @@
   font-weight: 600;
 }
 
+@mixin navigation-link {
+  font-family: $sans-serif-font-family;
+  color: $color-charcoal-dark;
+  font-size: toRem(18px);
+  font-weight: 600;
+}
+
 @mixin meta-title {
   color: $color-silver-dark;
   font-size: toRem(36px);
@@ -152,10 +160,9 @@
 }
 
 @mixin default-link {
-  font-size: toRem(18px);
+  font-size: toRem(14px);
   font-family: $sans-serif-font-family;
   font-weight: $font-weight-regular;
-  color: $color-silver-dark;
   cursor: pointer;
 
   &--active {
diff --git a/client/src/styles/_navigation.scss b/client/src/styles/_navigation.scss
index 4139c3a6..1e6f07e1 100644
--- a/client/src/styles/_navigation.scss
+++ b/client/src/styles/_navigation.scss
@@ -1,4 +1,4 @@
-.top-navigation {
+.content-navigation {
   display: flex;
 
   &__link {