diff --git a/src/components/ChapterPages.vue b/src/components/ChapterPages.vue
new file mode 100644
index 0000000..c9c9908
--- /dev/null
+++ b/src/components/ChapterPages.vue
@@ -0,0 +1,43 @@
+<template lang="pug">
+	.ChapterPages
+		h3.ChapterPages__title {{ number }}. {{ chapter.title }}
+		ul
+			li(
+				v-for="page in chapter.pages"
+				:key="page._id"
+			)
+				router-link(:to=`{
+					name: "Page",
+					append: true,
+					params: {
+						pageTitle: page._id
+					}
+				}`) {{ page.title }}
+</template>
+
+<script>
+export default {
+	name: "ChapterPages",
+	props: {
+		chapter: {
+			type: Object,
+			required: true
+		},
+		number: {
+			type: Number,
+			required: true
+		}
+	}
+}
+</script>
+
+<style lang="scss">
+@import "~styles/_variables";
+.ChapterPages {
+	margin-bottom: 1rem;
+
+	&__title {
+		border-bottom: 1px solid $lightgray;
+	}
+}
+</style>
diff --git a/src/components/CourseRenderer.vue b/src/components/CourseRenderer.vue
index ed500ba..027c374 100644
--- a/src/components/CourseRenderer.vue
+++ b/src/components/CourseRenderer.vue
@@ -1,69 +1,78 @@
 <template lang="pug">
 	.CourseRenderer
 		h3.CourseRenderer__name(v-if="showName") {{ course.name }}
-		ul
-			li(
-				v-for="chapter in course.chapters"
+		ul.CourseRenderer__chapters
+			li.CourseRenderer__chapter(
+				v-for="(chapter, index) in course.chapters"
+				:key="chapter._id"
 			)
+				ChapterPages(
+					:chapter="chapter"
+					:number="index + 1"
+				)
+			//
 				router-link(:to=`{
 					name: "Chapter",
 					append: true,
 					params: {
 						chapterName: chapter._id
 					}
 				}`) {{ chapter.title }}
-	//
-		.CourseRenderer__description
-			b Description
-			br
-			| Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic sunt illo repellat delectus labore ipsam, ad exercitationem ullam quod error aperiam ex saepe fuga in animi minus maiores. Eligendi, eius!
-		.CourseRenderer__level-two__container
-			.CourseRenderer__level-two(v-for="(levelTwo, levelTwoIndex) in course.levelsTwo")
-				h3.CourseRenderer__level-two__title {{ levelTwoIndex+1 }}. {{ levelTwo }}
-				ul
-					li(v-for="levelThree in course.levelsThree[levelTwoIndex]")
-						router-link(:to=`{
-							name: 'Page',
-							params: { pageTitle: (course.root + "/" + levelTwo  + "/" + levelThree) }
-						}`) {{ levelThree }}
 </template>
 
 <style lang="scss">
+@import "~styles/declarations";
+
 .CourseRenderer {
 	padding: 2rem;
 
 	&__description {
 		font-style: italic;
 		margin-bottom: 2rem;
 		padding: 1rem;
 		background-color: whitesmoke;
 		border: 1px solid gray;
 	}
 
-	&__level-two {
-		margin-bottom: 1rem;
-		flex: 0 0 33%;
+	&__chapters {
+		display: flex;
+		flex-wrap: wrap;
+	}
+
+	&__chapter {
+		flex: 0 0 95%;
+	}
+
+	@include media-breakpoint-up(md) {
+		&__chapter {
+			margin: 0 .5rem .5rem .5rem;
+			flex: 0 0 42%;
+		}
+	}
 
-		&__container {
-			display: flex;
-			flex-wrap: wrap;
+	@include media-breakpoint-up(xl) {
+		&__chapter {
+			flex: 0 0 30%;
 		}
 	}
 }
 </style>
 
 <script>
+import ChapterPages from "components/ChapterPages"
+
 export default {
 	name: "CourseRenderer",
+	components: { ChapterPages },
 	props: {
 		course: {
 			type: Object,
 			required: true
 		},
 		showName: {
 			type: Boolean,
 			default: true
 		}
 	}
 }
 </script>
diff --git a/src/styles/_minireset.sass b/src/styles/_minireset.sass
index 8fb0735..4ee13af 100644
--- a/src/styles/_minireset.sass
+++ b/src/styles/_minireset.sass
@@ -1,82 +1,81 @@
 /*! minireset.css v0.0.3 | MIT License | github.com/jgthms/minireset.css */
 // Blocks
 html,
 body,
 p,
 ol,
 ul,
 li,
 dl,
 dt,
 dd,
 blockquote,
 figure,
 fieldset,
 legend,
 textarea,
 pre,
 iframe,
 hr,
 h1,
 h2,
 h3,
 h4,
 h5,
 h6
   margin: 0
   padding: 0
 
 // Headings
 h1,
 h2,
 h3,
 h4,
 h5,
 h6
-  font-size: 100%
   font-weight: normal
 
 // List
 ul
   list-style: none
 
 // Form
 button,
 input,
 select,
 textarea
   margin: 0
 
 // Box sizing
 html
   box-sizing: border-box
 
 *
   &,
   &:before,
   &:after
     box-sizing: inherit
 
 // Media
 img,
 embed,
 iframe,
 object,
 audio,
 video
   height: auto
   max-width: 100%
 
 // Iframe
 iframe
   border: 0
 
 // Table
 table
   border-collapse: collapse
   border-spacing: 0
 
 td,
 th
   padding: 0
   text-align: left