diff --git a/client/src/components/modules/ModuleNavigation.vue b/client/src/components/modules/ModuleNavigation.vue
index d7496eb0..0ad57d14 100644
--- a/client/src/components/modules/ModuleNavigation.vue
+++ b/client/src/components/modules/ModuleNavigation.vue
@@ -10,7 +10,7 @@
         :key="assignment.id"
         class="module-navigation__anchor sub-navigation-item__link"
         exact-active-class="module-navigation__anchor--active"
-      >{{assignmentTitle(assignment)}}
+      >{{assignment.value.assignment}}
       </router-link>
     </sub-navigation-item>
     <div class="module-navigation__module-content" v-if="false"> <!-- Do not display this for now, might be used later again though -->
@@ -41,8 +41,6 @@
       class="module-navigation__solution-toggle"
       data-cy="toggle-enable-solutions"></toggle-solutions-for-module>
     </div>
-
-
   </nav>
 
 </template>
@@ -79,13 +77,14 @@
       showResults() {
         return this.me.permissions.includes('users.can_manage_school_class_content');
       },
-      assignments() {
-        return [...this.module.assignments].sort((a, b) => {
-          return a.title.toLowerCase() > b.title.toLowerCase() ? 1 : -1;
-        })
-      },
       canManageContent() {
         return this.me.permissions.includes('users.can_manage_school_class_content');
+      },
+      assignments() {
+        if (!this.module.chapters) {
+          return [];
+        }
+        return this.extractAssignmentsFromChapters(this.module.chapters, []);
       }
     },
 
@@ -105,10 +104,47 @@
         return `#chapter-${index}`
       },
       submissionsLink(assignment) {
-        return `/module/${this.module.slug}/submissions/${assignment.id}`;
+        return `/module/${this.module.slug}/submissions/${assignment.value.id}`;
       },
-      assignmentTitle(assignment) {
-        return assignment.assignment.length > 25 ? assignment.assignment.substring(0, 22) + '...' : assignment.assignment;
+      extractAssignmentsFromChapters(chapters, assignments) {
+        chapters.forEach(node => {
+          if (node.contentBlocks) { // in chapter node
+            // if chapter information is required then do it here like so:
+            // assignments.push({
+            //   chapterTitle: node.title
+            // });
+            // return this.extractAssignmentsFromChapters(node.contentBlocks, assignments);
+            assignments = this.extractAssignmentsFromChapters(node.contentBlocks, assignments);
+          } else if (node.contents) {
+            let foundAssignments = [];
+            node.contents.forEach(contentNode => {
+              foundAssignments = this.concatAssignments(foundAssignments, contentNode);
+            });
+            assignments = [...assignments, ...foundAssignments];
+          }
+        });
+        return assignments;
+      },
+      concatAssignments(foundAssignments, node) {
+          let foundAssignment = this.findAssignment(node);
+          return foundAssignment ? [...foundAssignments, ...foundAssignment] : foundAssignments;
+      },
+      findAssignment(node) {
+        if (node.type && node.type === 'assignment') {
+          return [node];
+        } else if (node.type && node.type === 'content_list_item') {
+          let foundAssignments = [];
+          node.value.forEach(contentNode => {
+            foundAssignments = this.concatAssignments(foundAssignments, contentNode);
+          });
+          return this.flattenArray(foundAssignments)
+        } else {
+          return null;
+        }
+      },
+      flattenArray(arrayToFlatten) {
+        // https://stackoverflow.com/questions/10865025/merge-flatten-an-array-of-arrays
+        return [].concat.apply([], arrayToFlatten);
       }
     }
   }
@@ -156,6 +192,9 @@
       font-size: 0.875rem;
       line-height: 1.2rem;
       margin-bottom: .6875rem;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
 
       &--active {
         color: $color-brand;