diff --git a/src/components/ChapterEditor.vue b/src/components/ChapterEditor.vue
new file mode 100644
index 0000000..e8c35f9
--- /dev/null
+++ b/src/components/ChapterEditor.vue
@@ -0,0 +1,292 @@
+<template lang="pug">
+	div
+		.ChapterEditor
+			div
+				h2 Change chapter's title
+				WTLField(grouped=true)
+					WTLInput.ChapterEditor__title(
+						v-model="newChapter.title"
+					)
+					WTLButton(
+						@click="patchChapter"
+						icon="done"
+						type="success"
+					) Update chapter title
+			div
+				h2 Change page order by dragging them
+				.ChapterEditor__pages-container
+					ol.ChapterEditor__old-pages
+						li.ChapterEditor__page(v-for="(page, index) in chapter.pages") {{ index+1 }}. {{ page.title }}
+					VueDraggable.ChapterEditor__pages(
+						v-if="newPages"
+						v-model="newPages"
+						@start="drag=true"
+						@end="drag=false"
+					)
+						.ChapterEditor__page(
+							v-for="(page, index) in newPages"
+							:key="page._id"
+						) 
+							WTLIcon(icon="swap_vertical")
+							| {{ page.title }}
+							.ChapterEditor__page-icons
+								WTLIcon(icon="delete", clickable=true, @click.native="deletePageDialog(page, index)")
+				div.flex-container.flex-content-end
+					h3 Confirm changes?
+					WTLButton(
+						@click="patchChapterPages"
+						icon="done"
+						type="success"
+					) Update pages order
+			div
+				h2 Insert new page
+				WTLField(grouped=true)
+					WTLInput.ChapterEditor__new-page(
+						v-model="newPage.title"
+						placeholder="Insert title"
+					)
+					WTLButton(
+						@click="postPage"
+						icon="done"
+						type="success"
+					) Add new page
+
+		WTLModal(v-if="showModal", ref="modal", @close="showModal = false", title="Edit page")
+			template(slot="content")
+				WTLField(grouped=true, label="Page title")
+					WTLInput(v-model="page.title")
+			template(slot="actions")
+				WTLButton(@click="closeModal", icon="close") Cancel
+				WTLButton(@click="patchPage", icon="done", type="success") Confirm edit
+</template>
+
+<style lang="scss">
+@import "~styles/declarations";
+
+.ChapterEditor {
+	background-color: white;
+	box-shadow: $shadow-1;
+	padding: 1rem;
+
+	&__pages-container {
+		display: flex;
+		justify-content: space-around;
+		align-items: center;
+	}
+
+	&__old-pages {
+		display: none;
+	}
+
+	> div {
+		background-color: $white-bg;
+		border-top: 2px solid;
+		border-image: $border-image-wtl;
+		padding: 1rem;
+		margin-bottom: 1rem;
+
+		> .flex-container {
+			margin-top: 1rem;
+			margin-bottom: 1rem;
+		}
+
+		> h2 {
+			margin-bottom: 0.5rem;
+		}
+	}
+
+	&__pages {
+		width: 100%;
+	}
+
+	&__page {
+		display: flex;
+		align-items: center;
+		padding: 0.5rem;
+		background-color: white;
+		box-shadow: $shadow-1;
+		margin: 0.25rem 0;
+
+		> .WTLIcon.material-icons {
+			font-size: 1.25rem;
+		}
+
+		&-icons {
+			flex-grow: 1;
+			display: inline-flex;
+			justify-content: flex-end;
+			align-items: center;
+
+			> * {
+				margin: 0 0.25rem;
+			}
+		}
+	}
+
+	@include media-breakpoint-up(md) {
+		&__pages {
+			width: 45%;
+		}
+
+		&__old-pages {
+			width: 45%;
+			display: block;
+		}
+
+		&__page {
+			width: 100%;
+			margin: 0.5rem 0;
+			padding: 1rem;
+		}
+	}
+}
+</style>
+
+<script>
+import WTLButton from "components/ui/WTLButton"
+import WTLInput from "components/ui/WTLInput"
+import VueDraggable from "vuedraggable"
+
+export default {
+	name: "ChapterEditor",
+	components: { WTLInput, WTLButton, VueDraggable },
+	data() {
+		return {
+			showModal: false,
+			newChapter: {
+				title: this.chapter.title,
+				language: this.chapter.language
+			},
+			newPages: this.chapter.pages,
+			newPage: {
+				title: "",
+				language: this.chapter.language,
+				content: ""
+			},
+			page: {
+				title: "",
+				language: this.chapter.language
+			}
+		}
+	},
+	props: {
+		chapter: {
+			type: Object,
+			required: true
+		}
+	},
+	mounted() {
+
+	},
+	methods: {
+		fetchAndResetInitialState() {
+			this.$store.dispatch("FETCH_CHAPTER", { chapterName: this.chapter._id }).then((response) => {
+				Object.assign(this.$data, this.$options.data.apply(this))
+			})
+		},
+		patchChapter() {
+			this.$store.dispatch("PATCH_CHAPTER", {
+				urlParams: {
+					chapterId: this.chapter._id
+				},
+				bodyParams: {
+					...this.newChapter
+				},
+				options: {
+					headers: {
+						"If-Match": this.chapter._etag,
+						"Authorization": `bearer ${this.$keycloak.token}`
+					}
+				}
+			}).catch((error) => {
+				return this.$store.dispatch("SET_ERROR", { error: error })
+			})
+		},
+		patchChapterPages() {
+			// Assign this to avoid updates in the meantime
+			const newPages = JSON.parse(JSON.stringify(this.newPages))
+			this.$store.dispatch("PATCH_CHAPTER_PAGES", {
+				urlParams: {
+					chapterId: this.chapter._id
+				},
+				bodyParams: {
+					...this.chapter,
+					pages: this.slice(this.newPages, ["_id", "_version"])
+				},
+				options: {
+					headers: {
+						"If-Match": this.chapter._etag,
+						"Authorization": `bearer ${this.$keycloak.token}`
+					}
+				}
+			}).then((response) => {
+				return this.$store.commit("UPDATE_CHAPTER_FIELDS", { pages: newPages, _id: this.chapter._id })
+			}).catch((error) => {
+				return this.$store.dispatch("SET_ERROR", { error: error })
+			})
+		},
+		postPage() {
+			// Assign this to avoid updates in the mean time
+			let pages = JSON.parse(JSON.stringify(this.chapter.pages))
+			let page = Object.assign({}, this.newPage)
+			this.$store.dispatch("POST_PAGE", {
+				urlParams: {
+					chapterId: this.chapter._id
+				},
+				bodyParams: {
+					...this.filterKeys(this.chapter, ["_id", "title", "language"]),
+					pages: [
+						...this.slice(pages, ["_id", "_version"]),
+						page
+					]
+				},
+				options: {
+					headers: {
+						"If-Match": this.chapter._etag,
+						"Authorization": `bearer ${this.$keycloak.token}`
+					}
+				}
+			}).then((response) => {
+				const pageAdded = response.pages[response.pages.length - 1]
+				page._version = pageAdded._version
+				page._id = pageAdded._id
+				pages.push(page)
+				this.$store.commit("UPDATE_CHAPTER_FIELDS", {
+					pages: pages,
+					_id: this.chapter._id
+				})
+				this.newPages.push(page)
+			}).catch((error) => {
+				return this.$store.commit("SET_ERROR", { error: error })
+			})
+		},
+		closeModal() {
+			this.$refs.modal.close()
+		},
+		deletePageDialog(page, index) {
+			this.$dialog.confirm({
+				title: `Delete page ${page.title}?`,
+				content: "Removing this page will remove all its content",
+				onConfirm: () => {
+					this.deletePage(page, index)
+				}
+			})
+		},
+		deletePage(page, index) {
+			this.$store.dispatch("DELETE_PAGE", {
+				urlParams: { pageId: page._id },
+				options: {
+					headers: {
+						"If-Match": page._etag,
+						"Authorization": `bearer ${this.$keycloak.token}`
+					}
+				}
+			}).then((response) => {
+				this.fetchAndResetInitialState()
+			}).catch((error) => {
+				return this.$store.commit("SET_ERROR", { error: error })
+			})
+		}
+	}
+}
+</script>
diff --git a/src/components/ChapterPages.vue b/src/components/ChapterPages.vue
index eccfc9d..338f2c9 100644
--- a/src/components/ChapterPages.vue
+++ b/src/components/ChapterPages.vue
@@ -1,44 +1,65 @@
 <template lang="pug">
 	.ChapterPages
-		h3.ChapterPages__title {{ number }}. {{ chapter.title }}
+		h3.ChapterPages__title
+			WTLIcon(
+				v-if="$keycloak && $keycloak.authenticated",
+				clickable=true,
+				icon="edit",
+				@click.native="goToEditChapter"
+			)
+			| {{ 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>
+import WTLIcon from "components/ui/WTLIcon"
+
 export default {
 	name: "ChapterPages",
+	components: { WTLIcon },
 	props: {
 		chapter: {
 			type: Object,
 			required: true
 		},
 		number: {
 			type: Number,
 			required: true
+		},
+		courseName: {
+			type: String,
+			required: true
+		}
+	}, methods: {
+		goToEditChapter() {
+			this.$router.push({
+				path: `/c/${this.courseName}/${this.chapter._id}/edit`,
+				params: { chapter: this.chapter }
+			})
 		}
 	}
 }
 </script>
 
 <style lang="scss">
 @import "~styles/_variables";
 
 .ChapterPages {
 	margin-bottom: 1rem;
 
 	&__title {
 		border-bottom: 1px solid $lightgray;
 	}
 }
 </style>
diff --git a/src/components/CourseEditor.vue b/src/components/CourseEditor.vue
index d8161ee..2587341 100644
--- a/src/components/CourseEditor.vue
+++ b/src/components/CourseEditor.vue
@@ -1,327 +1,305 @@
 <template lang="pug">
 	div
 		.CourseEditor
 			div
 				h2 Change course's title
 				WTLField(grouped=true)
 					WTLInput.CourseEditor__title(
 						v-model="newCourse.title"
 					)
 					WTLButton(
 						@click="patchCourse"
 						icon="done"
 						type="success"
 					) Update course title
 			div
 				h2 Change chapter order by dragging them
 				.CourseEditor__chapters-container
 					ol.CourseEditor__old-chapters
 						li.CourseEditor__chapter(v-for="(chapter, index) in course.chapters") {{ index+1 }}. {{ chapter.title }}
 					VueDraggable.CourseEditor__chapters(
 						v-if="newChapters"
 						v-model="newChapters"
 						@start="drag=true"
 						@end="drag=false"
+						:options={
+							handle: ".draggable-handle"
+						}
 					)
 						.CourseEditor__chapter(
 							v-for="(chapter, index) in newChapters"
 							:key="chapter._id"
-						) 
-							WTLIcon(icon="swap_vertical")
+						)
+							.draggable-handle
+								WTLIcon(icon="swap_vertical")
 							| {{ chapter.title }}
 							.CourseEditor__chapter-icons
-								WTLIcon(icon="edit", clickable=true, @click.native="editChapter(chapter)")
 								WTLIcon(icon="delete", clickable=true, @click.native="deleteChapterDialog(chapter, index)")
 				div.flex-container.flex-content-end
 					h3 Confirm changes?
 					WTLButton(
 						@click="patchCourseChapters"
 						icon="done"
 						type="success"
 					) Update chapters order
 			div
 				h2 Insert new chapter
 				WTLField(grouped=true)
 					WTLInput.CourseEditor__new-chapter(
 						v-model="newChapter.title"
 						placeholder="Insert title"
 					)
 					WTLButton(
 						@click="postChapter"
 						icon="done"
 						type="success"
 					) Add new chapter
 
-		WTLModal(v-if="showModal", ref="modal", @close="showModal = false", title="Edit chapter")
+		// WTLModal(v-if="showModal", ref="modal", @close="showModal = false", title="Edit chapter")
 			template(slot="content")
 				WTLField(grouped=true, label="Chapter title")
 					WTLInput(v-model="chapter.title")
 			template(slot="actions")
 				WTLButton(@click="closeModal", icon="close") Cancel
 				WTLButton(@click="patchChapter", icon="done", type="success") Confirm edit
 </template>
 
 <style lang="scss">
 @import "~styles/declarations";
 
 .CourseEditor {
 	background-color: white;
 	box-shadow: $shadow-1;
 	padding: 1rem;
 
 	&__chapters-container {
 		display: flex;
 		justify-content: space-around;
 		align-items: center;
 	}
 
 	&__old-chapters {
 		display: none;
 	}
 
 	> div {
 		background-color: $white-bg;
 		border-top: 2px solid;
 		border-image: $border-image-wtl;
 		padding: 1rem;
 		margin-bottom: 1rem;
 
 		> .flex-container {
 			margin-top: 1rem;
 			margin-bottom: 1rem;
 		}
 
 		> h2 {
 			margin-bottom: 0.5rem;
 		}
 	}
 
 	&__chapters {
 		width: 100%;
 	}
 
 	&__chapter {
 		display: flex;
 		align-items: center;
 		padding: 0.5rem;
 		background-color: white;
 		box-shadow: $shadow-1;
 		margin: 0.25rem 0;
 
 		> .WTLIcon.material-icons {
 			font-size: 1.25rem;
 		}
 
 		&-icons {
 			flex-grow: 1;
 			display: inline-flex;
 			justify-content: flex-end;
 			align-items: center;
 
 			> * {
 				margin: 0 0.25rem;
 			}
 		}
 	}
 
+	.draggable-handle {
+		cursor: row-resize;
+	}
+
 	@include media-breakpoint-up(md) {
 		&__chapters {
 			width: 45%;
 		}
 
 		&__old-chapters {
 			width: 45%;
 			display: block;
 		}
 
 		&__chapter {
 			width: 100%;
 			margin: 0.5rem 0;
 			padding: 1rem;
 		}
 	}
 }
 </style>
 
 <script>
 import WTLButton from "components/ui/WTLButton"
 import WTLInput from "components/ui/WTLInput"
 import VueDraggable from "vuedraggable"
 
 export default {
 	name: "CourseEditor",
 	components: { WTLInput, WTLButton, VueDraggable },
 	data() {
 		return {
 			showModal: false,
 			newCourse: {
 				title: this.course.title,
 				language: this.course.language
 			},
 			newChapters: this.course.chapters,
 			newChapter: {
 				title: "",
 				language: this.course.language
 			},
 			chapter: {
 				title: "",
 				language: this.course.language
 			}
 		}
 	},
 	props: {
 		course: {
 			type: Object,
 			required: true
 		}
 	},
 	mounted() {
 
 	},
 	methods: {
 		fetchAndResetInitialState() {
 			this.$store.dispatch("FETCH_COURSE", { courseName: this.course._id }).then((response) => {
 				Object.assign(this.$data, this.$options.data.apply(this))
 			})
 		},
 		patchCourse() {
 			this.$store.dispatch("PATCH_COURSE", {
 				urlParams: {
 					courseName: this.course._id
 				},
 				bodyParams: {
 					...this.newCourse
 				},
 				options: {
 					headers: {
 						"If-Match": this.course._etag,
 						"Authorization": `bearer ${this.$keycloak.token}`
 					}
 				}
 			}).then((response) => {
 				// Now update title
 				this.updateMetaTitle(this.course.title)
 			}).catch((error) => {
 				return this.$store.dispatch("SET_ERROR", { error: error })
 			})
 		},
 		patchCourseChapters() {
 			// Assign this to avoid updates in the meantime
 			const newChapters = JSON.parse(JSON.stringify(this.newChapters))
 			this.$store.dispatch("PATCH_COURSE_CHAPTERS", {
 				urlParams: {
 					courseName: this.course._id
 				},
 				bodyParams: {
 					...this.course,
 					chapters: this.slice(this.newChapters, ["_id", "_version"])
 				},
 				options: {
 					headers: {
 						"If-Match": this.course._etag,
 						"Authorization": `bearer ${this.$keycloak.token}`
 					}
 				}
 			}).then((response) => {
 				return this.$store.commit("UPDATE_COURSE_FIELDS", { chapters: newChapters, _id: this.course._id })
 			}).catch((error) => {
 				return this.$store.dispatch("SET_ERROR", { error: error })
 			})
 		},
 		postChapter() {
 			// Assign this to avoid updates in the mean time
 			let chapters = JSON.parse(JSON.stringify(this.course.chapters))
 			let chapter = Object.assign({}, this.newChapter)
 			this.$store.dispatch("POST_CHAPTER", {
 				urlParams: {
 					courseName: this.course._id
 				},
 				bodyParams: {
 					...this.filterKeys(this.course, ["_id", "title", "language"]),
 					chapters: [
 						...this.slice(chapters, ["_id", "_version"]),
 						chapter
 					]
 				},
 				options: {
 					headers: {
 						"If-Match": this.course._etag,
 						"Authorization": `bearer ${this.$keycloak.token}`
 					}
 				}
 			}).then((response) => {
 				const chapterAdded = response.chapters[response.chapters.length - 1]
 				chapter._version = chapterAdded._version
 				chapter._id = chapterAdded._id
 				chapters.push(chapter)
 				this.$store.commit("UPDATE_COURSE_FIELDS", {
 					chapters: chapters,
 					_id: this.course._id
 				})
 				this.newChapters.push(chapter)
 			}).catch((error) => {
 				return this.$store.commit("SET_ERROR", { error: error })
 			})
 		},
-		editChapter(chapter) {
-			this.chapter = Object.assign({}, chapter)
-			this.chapter.language = this.course.language
-			this.showModal = true
-		},
-		patchChapter() {
-			let chapter = Object.assign({}, this.chapter)
-			this.$store.dispatch("PATCH_CHAPTER", {
-				urlParams: { chapterId: chapter._id },
-				bodyParams: {
-					...this.filterKeys(chapter, ["title", "language"])
-				},
-				options: {
-					headers: {
-						"If-Match": chapter._etag,
-						"Authorization": `bearer ${this.$keycloak.token}`
-					}
-				}
-			}).then((response) => {
-				this.fetchAndResetInitialState()
-				this.closeModal()
-			}).catch((error) => {
-				this.closeModal()
-				return this.$store.commit("SET_ERROR", { error: error })
-			})
-		},
-		closeModal() {
-			this.$refs.modal.close()
-		},
 		deleteChapterDialog(chapter, index) {
 			let pagesString = ""
 			if (chapter.pages) {
 				for (let page of chapter.pages) {
 					pagesString += page.title + ", "
 				}
 			}
 			this.$dialog.confirm({
 				title: `Delete chapter ${chapter.title}?`,
 				content: `Removing this chapter will remove its pages: ${pagesString}`,
 				onConfirm: () => {
 					this.deleteChapter(chapter, index)
 				}
 			})
 		},
 		deleteChapter(chapter, index) {
 			this.$store.dispatch("DELETE_CHAPTER", {
 				urlParams: { chapterId: chapter._id },
 				options: {
 					headers: {
 						"If-Match": chapter._etag,
 						"Authorization": `bearer ${this.$keycloak.token}`
 					}
 				}
 			}).then((response) => {
 				this.fetchAndResetInitialState()
 			}).catch((error) => {
 				return this.$store.commit("SET_ERROR", { error: error })
 			})
 		}
 	}
 }
 </script>
diff --git a/src/components/CourseRenderer.vue b/src/components/CourseRenderer.vue
index 4e68b9a..6a5ac9a 100644
--- a/src/components/CourseRenderer.vue
+++ b/src/components/CourseRenderer.vue
@@ -1,78 +1,79 @@
 <template lang="pug">
 	.CourseRenderer
 		h3.CourseRenderer__name(v-if="showName") {{ course.name }}
 		ul.CourseRenderer__chapters
 			li.CourseRenderer__chapter(
 				v-for="(chapter, index) in course.chapters"
 				:key="chapter._id"
 			)
 				ChapterPages(
 					:chapter="chapter"
 					:number="index + 1"
+					:courseName="course._id"
 				)
 			//
 				router-link(:to=`{
 					name: "Chapter",
 					append: true,
 					params: {
 						chapterName: chapter._id
 					}
 				}`) {{ chapter.title }}
 </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;
 	}
 
 	&__chapters {
 		display: flex;
 		flex-wrap: wrap;
 	}
 
 	&__chapter {
 		flex: 0 0 95%;
 	}
 
 	@include media-breakpoint-up(md) {
 		&__chapter {
 			margin: 0 0.5rem 0.5rem 0.5rem;
 			flex: 0 0 42%;
 		}
 	}
 
 	@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/components/Editor.vue b/src/components/Editor.vue
deleted file mode 100644
index bab85d3..0000000
--- a/src/components/Editor.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<template lang="pug">
-	NoSSR
-		.Editor
-			vue-ckeditor(type="classic", :editors="editors", v-model="mutableContent")
-</template>
-
-
-<script>
-// import DecoupledEditor from "@ckeditor/ckeditor5-build-decoupled-document"
-import ClassicEditor from "@ckeditor/ckeditor5-build-classic"
-// import BalloonEditor from '@ckeditor/ckeditor5-build-balloon'
-import VueCkeditor from "vue-ckeditor5"
-
-export default {
-	name: "Editor",
-	props: {
-		content: {
-			type: String
-		}
-	},
-	components: {
-		"vue-ckeditor": VueCkeditor.component
-	},
-	data() {
-		return {
-			editors: {
-				// decoupled: DecoupledEditor
-				classic: ClassicEditor
-			},
-			mutableContent: this.content
-		}
-	},
-	mounted() {}
-}
-</script>
diff --git a/src/components/PageEditor.vue b/src/components/PageEditor.vue
new file mode 100644
index 0000000..7418510
--- /dev/null
+++ b/src/components/PageEditor.vue
@@ -0,0 +1,102 @@
+<template lang="pug">
+	NoSSR
+		div
+			WTLField(grouped=true, label="Update page title")
+				WTLInput(v-model="newPage.title")
+				WTLButton(type="success", @click="patchPage", icon="done") Update page title
+			// WTLButton(@click="newTheorem") Inserisci teorema
+			.Editor(id="editor")
+				div(id="editor-toolbar")
+				div(id="editor-editable")
+</template>
+
+<script>
+import WTLButton from "components/ui/WTLButton"
+import WTLEditor from "@ckeditor/ckeditor5-build-classic/build/ckeditor"
+// import createElement from "@ckeditor/ckeditor5-utils/src/dom/createelement"
+// import ClassicEditor from "@ckeditor/ckeditor5-build-classic"
+
+export default {
+	name: "Editor",
+	props: {
+		page: {
+			type: Object,
+			required: true
+		}
+	},
+	components: {
+		WTLButton
+	},
+	data() {
+		return {
+			editor: null,
+			newPage: {
+				title: this.page.title,
+				language: this.page.language,
+				content: this.page.content
+			}
+		}
+	},
+	mounted() {
+		WTLEditor.create(this.$el.querySelector("#editor")).then((editor) => {
+			const toolbarContainer = this.$el.querySelector("#editor-toolbar")
+			const editableContent = this.$el.querySelector("#editor-editable")
+			toolbarContainer.appendChild(editor.ui.view.toolbar.element)
+			editableContent.appendChild(editor.ui.view.editable.element)
+			editor.setData(this.newPage.content)
+			this.editor = editor
+		}).catch((error) => {
+			console.log(error)
+		})
+	},
+	methods: {
+		newTheorem() {
+			if (!this.editor) {
+				return
+			}
+			/* Use model to change what user sees
+			this.editor.model.change((writer) => {
+				writer.insertText('<p>foo</p>', this.editor.model.document.selection.getFirstPosition())
+			})*/
+			/* Non funziona la createElement
+			this.editor.model.change((writer) => {
+				let element = createElement(this.editor.model.document, "div", {
+					"data-tag": "dimostrazione"
+				})
+				element.innerHTML = "div di prova"
+				console.log(element)
+				writer.insertElement(element, this.editor.model.document.selection.getFirstPosition())
+			})*/
+		},
+		patchPage() {
+			this.$store.dispatch("PATCH_PAGE", {
+				urlParams: {
+					pageId: this.page._id
+				},
+				bodyParams: {
+					...this.newPage
+				},
+				options: {
+					headers: {
+						"If-Match": this.page._etag,
+						"Authorization": `bearer ${this.$keycloak.token}`
+					}
+				}
+			}).catch((error) => {
+				return this.$store.dispatch("SET_ERROR", { error: error })
+			})
+		}
+	}
+}
+</script>
+
+<style lang="scss">
+@import "~styles/_variables";
+
+.Editor {
+	#editor-editable {
+		background-color: $white-bg;
+		border-color: $gray;
+	}
+}
+</style>
diff --git a/src/router/index.js b/src/router/index.js
index 3027991..3c57fa5 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,66 +1,66 @@
 import Router from "vue-router"
 
 // We are also using Webpack code splitting here so that each route's associated
 // component code is loaded on-demand only when the route is visited.
 // When do you use on-demand load? When the view is not one of the important one. When a route is important? You decide
 
 let routes = []
 
 import Home from "views/Home"
 import Department from "views/Department"
 import Course from "views/Course"
 import EditChapter from "views/EditChapter"
 import Courses from "views/Courses"
 import Page from "views/Page"
 const EditPage = () => import("views/EditPage")
 
 routes = routes.concat([
 	{ path: "/", component: Home, name: "Home" },
 	{ path: "/d/:departmentName", component: Department, name: "Department" },
 	{ path: "/c", component: Courses, name: "Courses" },
 	{ path: "/c/:courseName", component: Course, name: "Course" },
 	{ path: "/c/:courseName/:chapterName/edit", component: EditChapter, name: "EditChapter" },
-	{ path: "/p/:pageTitle(.+)/edit", component: EditPage, name: "EditPage" },
-	{ path: "/p/:pageTitle(.+)", component: Page, name: "Page" }
+	{ path: "/p/:pageTitle/edit", component: EditPage, name: "EditPage" },
+	{ path: "/p/:pageTitle", component: Page, name: "Page" }
 ])
 
 if (process.env.NODE_ENV !== "production") {
 	const Showcase = () => import("views/dev/Showcase") // load dynamically when needed
 	const Login = () => import("views/dev/Login")
 
 	routes.push({ path: "/showcase", component: Showcase })
 	routes.push({ path: "/login", component: Login })
 }
 
 const UIDemo = () => import("views/dev/UIDemo")
 const UIDemoComponentsList = () => import("views/dev/ui/ComponentsList")
 const UIDemoButton = () => import("views/dev/ui/Button")
 const UIDemoDialog = () => import("views/dev/ui/Dialog")
 const UIDemoAsync = () => import("views/dev/ui/Async")
 const UIDemoInput = () => import("views/dev/ui/Input")
 const UIDemoField = () => import("views/dev/ui/Field")
 routes.push({
 	path: "/uidemo", component: UIDemo,
 	children: [
 		{ path: "", component: UIDemoComponentsList },
 		{ path: "button", component: UIDemoButton },
 		{ path: "dialog", component: UIDemoDialog },
 		{ path: "async", component: UIDemoAsync },
 		{ path: "input", component: UIDemoInput },
 		{ path: "field", component: UIDemoField }
 	]
 })
 
 const NotFound = () => import("views/NotFound")
 routes.push({ path: "/404", component: NotFound, name: "NotFound" })
 
 // push as last element because the wildcard match will catch all the unknown urls
 routes.push({ path: "*", component: NotFound })
 
 export function createRouter() {
 	return new Router({
 		mode: "history",
 		scrollBehavior: () => ({ y: 0 }),
 		routes
 	})
 }
diff --git a/src/views/EditChapter.vue b/src/views/EditChapter.vue
new file mode 100644
index 0000000..807e91b
--- /dev/null
+++ b/src/views/EditChapter.vue
@@ -0,0 +1,51 @@
+<template lang="pug">
+	.view--EditChapter
+		h1.EditChapter__title {{ chapterName }}
+		ChapterEditor(
+			v-if="chapter",
+			:chapter="chapter"
+		)
+</template>
+
+<script>
+import ChapterEditor from "components/ChapterEditor"
+
+export default {
+	name: "EditChapter",
+	components: { ChapterEditor },
+	computed: {
+		chapter() {
+			return this.$store.state.chapters[this.$route.params.chapterName]
+		},
+		chapterName() {
+			if (this.chapter) {
+				return this.chapter.title
+			} else {
+				return this.$route.params.chapterName
+			}
+		}
+	},
+	asyncData({ store, route }) {
+		return store.dispatch("FETCH_CHAPTER", { chapterName: route.params.chapterName })
+			.catch((error) => {
+				return store.commit("SET_ERROR", { error: error })
+			})
+	},
+	meta() {
+		return {
+			title: "Editing: " + this.chapterName,
+			description: "This is the meta description for the page",
+			httpStatusCode: this.chapter ? 200 : 404
+		}
+	}
+}
+</script>
+
+<style>
+.EditChapter__title {
+	width: 100%;
+	text-align: center;
+	margin-bottom: 1rem;
+	margin-top: 1rem;
+}
+</style>
diff --git a/src/views/EditPage.vue b/src/views/EditPage.vue
index f1b81a3..2fd0189 100644
--- a/src/views/EditPage.vue
+++ b/src/views/EditPage.vue
@@ -1,42 +1,42 @@
 <template lang="pug">
 	.view--EditPage
 		h1.EditPage__title {{ pageTitle }}
-		Editor(
+		PageEditor(
 			v-if="page",
-			:content="page.content"
+			:page="page"
 		)
 </template>
 
 <script>
-import Editor from "components/Editor"
+import PageEditor from "components/PageEditor"
 
 export default {
 	name: "EditPage",
-	components: { Editor },
+	components: { PageEditor },
 	computed: {
 		page() {
 			return this.$store.state.pages[this.$route.params.pageTitle]
 		},
 		pageTitle() {
 			if (this.page) {
 				return this.page.title
 			} else {
 				return this.$route.params.pageTitle
 			}
 		}
 	},
 	asyncData({ store, route }) {
 		return store.dispatch("FETCH_PAGE", { pageTitle: route.params.pageTitle })
 			.catch((error) => {
 				return store.commit("SET_ERROR", { error: error })
 			})
 	},
 	meta() {
 		return {
 			title: "Editing: " + this.pageTitle,
 			description: "This is the meta description for the page",
 			httpStatusCode: this.page ? 200 : 404
 		}
 	}
 }
 </script>
diff --git a/src/views/Page.vue b/src/views/Page.vue
index 881f060..2fb7161 100644
--- a/src/views/Page.vue
+++ b/src/views/Page.vue
@@ -1,63 +1,63 @@
 <template lang="pug">
 	.view--Page
 		template(v-if="page")
 			.view--Page__buttons
 				router-link(
 					:to=`{
 						name: 'EditPage',
 						params: { pageTitle: $route.params.pageTitle }
 					}`
 				)
 					WTLButton(type="success", icon="mode_edit") Edit Page
 			PageRenderer(
 				v-if="page",
 				:page="page"
 			)
 </template>
 
 <style lang="scss">
 .view--Page {
 	.PageRenderer {
 		background-color: white;
 	}
 
 	&__buttons {
 		margin-bottom: 1rem;
 		text-align: right;
 	}
 }
 </style>
 
 <script>
 import PageRenderer from "components/PageRenderer"
 
 export default {
 	name: "Page",
 	components: { PageRenderer },
 	computed: {
 		page() {
 			return this.$store.state.pages[this.$route.params.pageTitle]
 		},
 		pageTitle() {
 			if (this.page) {
-				return this.page.displayTitle
+				return this.page.title
 			} else {
 				return this.$route.params.pageTitle
 			}
 		}
 	},
 	asyncData({ store, route }) {
 		return store.dispatch("FETCH_PAGE", { pageTitle: route.params.pageTitle })
 			.catch((error) => {
 				return store.commit("SET_ERROR", { error: error })
 			})
 	},
 	meta() {
 		return {
 			title: this.pageTitle,
 			description: "This is the meta description for the page",
 			httpStatusCode: this.page ? 200 : 404
 		}
 	}
 }
 </script>