diff --git a/client/src/components/book-navigation/BookNavigationItem.vue b/client/src/components/book-navigation/BookNavigationItem.vue
deleted file mode 100644
index c467f059..00000000
--- a/client/src/components/book-navigation/BookNavigationItem.vue
+++ /dev/null
@@ -1,92 +0,0 @@
-<template>
-  <div class="book-navigation-item" :class="{ 'book-navigation-item--active': show}">
-    <div class="book-navigation-item__title" @click="show = !show">
-      {{title}}
-      <chevron-down class="book-navigation-item__icon book-navigation-item__chevron-down"></chevron-down>
-      <chevron-up class="book-navigation-item__icon book-navigation-item__chevron-up"></chevron-up>
-    </div>
-    <div class="book-navigation-item__nav-items" v-if="show">
-      <slot></slot>
-    </div>
-  </div>
-</template>
-
-<script>
-  import ChevronDown from '@/components/icons/ChevronDown';
-  import ChevronUp from '@/components/icons/ChevronUp';
-
-  export default {
-    props: ['title'],
-
-    components: {
-      ChevronDown,
-      ChevronUp
-    },
-
-    data() {
-      return {
-        show: false
-      }
-    }
-  }
-</script>
-
-<style scoped lang="scss">
-  @import "@/styles/_variables.scss";
-  @import "@/styles/_mixins.scss";
-
-  .book-navigation-item {
-    z-index: 10;
-
-    margin-right: $large-spacing;
-
-    &__title {
-      @include small-text;
-
-      display: grid;
-      grid-template-columns: 1fr auto;
-      grid-column-gap: $small-spacing;
-      align-items: center;
-
-      cursor: pointer;
-    }
-
-    &__icon {
-      width: 12px;
-      height: 12px;
-    }
-
-    &__chevron-up {
-      display: none;
-    }
-
-    &__nav-items {
-      box-shadow: 0 4px 7px 0 rgba(0, 0, 0, 0.12);
-      position: absolute;
-      left: 0;
-      margin-top: 17px;
-      background-color: $color-white;
-      padding: $small-spacing $medium-spacing;
-      width: 100%;
-      box-sizing: border-box;
-
-      &:empty {
-        display: none;
-      }
-    }
-
-    &--active &__title {
-      color: $color-brand;
-    }
-    &--active &__icon {
-      fill: $color-brand;
-    }
-
-    &--active &__chevron-up {
-      display: block;
-    }
-    &--active &__chevron-down {
-      display: none;
-    }
-  }
-</style>
diff --git a/client/src/components/book-navigation/SubNavigationItem.vue b/client/src/components/book-navigation/SubNavigationItem.vue
new file mode 100644
index 00000000..76dce019
--- /dev/null
+++ b/client/src/components/book-navigation/SubNavigationItem.vue
@@ -0,0 +1,55 @@
+<template>
+  <div class="sub-navigation-item" :class="{ 'sub-navigation-item--active': show}">
+    <div class="sub-navigation-item__title" @click="show = !show">
+      {{title}}
+      <chevron-down class="sub-navigation-item__icon sub-navigation-item__chevron-down"></chevron-down>
+      <chevron-up class="sub-navigation-item__icon sub-navigation-item__chevron-up"></chevron-up>
+    </div>
+    <div class="sub-navigation-item__nav-items book-subnavigation" v-if="show">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+  import ChevronDown from '@/components/icons/ChevronDown';
+  import ChevronUp from '@/components/icons/ChevronUp';
+
+  export default {
+    props: ['title'],
+
+    components: {
+      ChevronDown,
+      ChevronUp
+    },
+
+    data() {
+      return {
+        show: false
+      }
+    }
+  }
+</script>
+
+<style lang="scss">
+  @import "@/styles/_variables.scss";
+  @import "@/styles/_mixins.scss";
+
+  .book-subnavigation {
+    &__item {
+      font-family: $sans-serif-font-family;
+      font-size: toRem(14px);
+      margin-bottom: $medium-spacing;
+      color: $color-silver-dark;
+      cursor: pointer;
+
+      &:last-of-type {
+        margin-bottom: 0;
+      }
+
+      &--active {
+        color: $color-brand;
+      }
+    }
+  }
+</style>
diff --git a/client/src/styles/_top-navigation.scss b/client/src/styles/_navigation.scss
similarity index 100%
rename from client/src/styles/_top-navigation.scss
rename to client/src/styles/_navigation.scss