diff --git a/src/App.vue b/src/App.vue
index c5b44a8..479d493 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,128 +1,130 @@
 <template lang="pug">
 	#app.App(:class="{ 'App--rtl': isRTL }")
 		// AuthCheck
 		noscript Your browser does not have JS enabled, you are still able to browse the website but you won't be able to access advanced features such as editing or loggin-in.
 		AppHeader
 		.App__content
 			transition(name="fade", mode="out-in")
 				router-view.view
 		transition(name="bounce")
 			WTLSpinner.App__spinner(
 				v-if="activeRequests"
 			)
 	//
 		.App__polling-operations
 			PollingBar
 
 </template>
 
 <style lang="scss">
 @import "~styles/global";
 @import "~styles/declarations";
 
 noscript {
 	display: block;
 	padding: 1rem;
 	background-color: red;
 	color: white;
 	font-size: 1.5rem;
 }
 
 .App {
 	display: flex;
 	min-height: 100vh;
 	flex-direction: column;
 
 	&__spinner {
 		position: fixed;
 		top: 0;
 		z-index: 3;
 		overflow: hidden;
 		background: #fff;
 		margin: 0 auto;
 		right: 30%;
+		border-radius: 50%;
+		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 	}
 
 	@include media-breakpoint-up(md) {
 		&__spinner {
 			left: 0;
 			right: 0;
 		}
 	}
 }
 
 .App__content {
 	flex: 1;
 	background-color: #f8f8fb;
 
 	a {
 		color: $blue;
 		text-decoration: none;
 
 		&:hover {
 			text-decoration: none;
 		}
 	}
 
 	ul,
 	ol {
 		margin-left: 1.5rem;
 	}
 
 	.view {
 		@include container();
 
 		padding-top: 5rem;
 	}
 }
 
 .fade-enter-active,
 .fade-leave-active {
 	transition: all 0.2s ease;
 }
 
 .fade-enter,
 .fade-leave-active {
 	opacity: 0;
 }
 </style>
 
 <script>
 import AppHeader from "components/AppHeader"
 import PollingBar from "components/PollingBar"
 import WTLSpinner from "components/ui/WTLSpinner"
 // import AuthCheck from "components/utils/AuthCheck"
 
 export default {
 	name: "App",
 	components: { AppHeader, PollingBar /* , AuthCheck */, WTLSpinner },
 	data: () => {
 		return {
 			isRTL: LANGUAGE_ISRTL
 		}
 	},
 	computed: {
 		activeRequests() {
 			return this.$store.state.activeApiRequests > 0
 		}
 	},
 	mounted() {
 		// Add a request/response interceptor for showing loading spinner
 		this.axios.interceptors.request.use((config) => {
 			this.$store.dispatch("UPDATE_ACTIVE_REQUESTS", { add: 1 })
 			return config
 		}, (error) => {
 			this.$store.dispatch("UPDATE_ACTIVE_REQUESTS", { add: -1 })
 			return Promise.reject(error)
 		})
 
 		this.axios.interceptors.response.use((response) => {
 			this.$store.dispatch("UPDATE_ACTIVE_REQUESTS", { add: -1 })
 			return response
 		}, (error) => {
 			this.$store.dispatch("UPDATE_ACTIVE_REQUESTS", { add: -1 })
 			return Promise.reject(error)
 		})
 	}
 }
 </script>
diff --git a/src/api/Api.js b/src/api/Api.js
index 96fd616..f440155 100644
--- a/src/api/Api.js
+++ b/src/api/Api.js
@@ -1,59 +1,71 @@
 import Vue from "vue"
 
 const	config = {
 	hostname: process.env.API_HOSTNAME,
 	preamble: "api/v1"
 }
 
 let defaultOptions = {}
 if (process.env.VUE_ENV === "server" && process.env.USE_CERTS === "true") {
 	https = require("https")
 	fs = require("fs")
 	const httpsAgent = new https.Agent({
 		keepAlive: true,
 		ca: fs.readFileSync(process.env.CERTS_CA),
 		cert: fs.readFileSync(process.env.CERTS_CERT),
 		key: fs.readFileSync(process.env.CERTS_KEY)
 	})
 
 	defaultOptions = {
 		httpsAgent
 	}
 }
 
 class ApiClass {
 	constructor() {
 		this.baseURL = `${config.hostname}/${config.preamble}`
 	}
 
+
 	get(endpoint, options = {}) {
 		endpoint = this._cleanEndpoint(endpoint)
 
 		options = Object.assign(options, defaultOptions)
 
 		return Vue.axios.get(`${this.baseURL}/${endpoint}`, options)
 			.then((response) => {
 				return Promise.resolve(response.data)
 			})
 	}
 
 	post(endpoint, data = {}, options = {}) {
 		endpoint = this._cleanEndpoint(endpoint)
 
 		options = Object.assign(options, defaultOptions)
 
-		return Vue.axios.get(`${this.baseURL}/${endpoint}`, data, options)
+		return Vue.axios.post(`${this.baseURL}/${endpoint}`, data, options)
+			.then((response) => {
+				return Promise.resolve(response.data)
+			})
+	}
+
+	patch(endpoint, data = {}, options = {}) {
+		endpoint = this._cleanEndpoint(endpoint)
+
+		options = Object.assign(options, defaultOptions)
+
+		return Vue.axios.patch(`${this.baseURL}/${endpoint}`, data, options)
 			.then((response) => {
 				return Promise.resolve(response.data)
 			})
 	}
 
 	_cleanEndpoint(endpoint) {
 		if (endpoint.startsWith("/")) {
 			endpoint = endpoint.substring("/")
 		}
 		return endpoint
 	}
 }
 
 export const Api = new ApiClass()
diff --git a/src/api/Courses.js b/src/api/Courses.js
index dd848a3..b145030 100644
--- a/src/api/Courses.js
+++ b/src/api/Courses.js
@@ -1,17 +1,21 @@
 import { Api } from "./Api"
 
 class CoursesClass {
 	get(courseName) {
 		return Api.get(`courses/${courseName}`)
 	}
 
 	getAll(page=1) {
 		if (page === 1) {
 			return Api.get("courses")
 		} else {
 			return Api.get(`courses?page=${page}`)
 		}
 	}
+
+	patch(courseName, course, options) {
+		return Api.patch(`courses/${courseName}`, course, options)
+	}
 }
 
 export const Courses = new CoursesClass()
diff --git a/src/components/CourseEditor.vue b/src/components/CourseEditor.vue
new file mode 100644
index 0000000..e1ee40a
--- /dev/null
+++ b/src/components/CourseEditor.vue
@@ -0,0 +1,60 @@
+<template lang="pug">
+	.CourseEditor
+		WTLInput.CourseEditor__name(
+			v-model="newCourse.title"
+		)
+		WTLButton(
+			@click="pushChanges"
+		) Confirm changes
+</template>
+
+<style lang="scss">
+@import "~styles/declarations";
+
+.CourseEditor {
+	padding: 2rem;
+}
+</style>
+
+<script>
+import WTLButton from "components/ui/WTLButton"
+import WTLInput from "components/ui/WTLInput"
+
+export default {
+	name: "CourseEditor",
+	components: { WTLInput, WTLButton },
+	data() {
+		return {
+			newCourse: {
+				title: this.course.title
+			}
+		}
+	},
+	props: {
+		course: {
+			type: Object,
+			required: true
+		}
+	},
+	mounted() {
+
+	},
+	methods: {
+		pushChanges() {
+			this.$store.dispatch("PATCH_COURSE", {
+				courseName: this.course._id,
+				course: this.newCourse,
+				options: {
+					headers: {
+						"If-Match": this.course._etag,
+						"Authorization": `bearer ${this.$keycloak.token}`
+					}
+				}
+			}).catch((error) => {
+				console.log(error)
+				return this.$store.commit("SET_ERROR", { error: error })
+			})
+		}
+	}
+}
+</script>
diff --git a/src/store/actions.js b/src/store/actions.js
index 519b5a7..08a8129 100644
--- a/src/store/actions.js
+++ b/src/store/actions.js
@@ -1,99 +1,106 @@
 import { Categories } from "api/Categories"
 import { Courses } from "api/Courses"
 import { Pages } from "api/Pages"
 import { Chapters } from "api/Chapters"
 import { Polling } from "api/Polling"
 import { Api } from "api/Api"
 
 
 export const actions = {
 	FETCH_HOME({ commit }) {
 		return Api.get("")
 			.then((response) => {
 				commit("SET_NAVIGATION_LINKS", { navigationLinks: response._links })
 			})
 	},
 
 	FETCH_ROOT_CATEGORIES({ commit }) {
 		return Categories.getRootCategories()
 			.then((response) => {
 				commit("SET_ROOT_CATEGORIES", { categories: response.data })
 			})
 	},
 
 	FETCH_CATEGORY({ commit }, { categoryName }) {
 		return Categories.get(categoryName)
 			.then((response) => {
 				commit("SET_CATEGORY", { category: response.data })
 			})
 	},
 
 	FETCH_COURSE({ commit }, { courseName }) {
 		return Courses.get(courseName)
 			.then((response) => {
 				const resp = Object.assign({}, response)
 				commit("SET_COURSE", { course: resp })
 				for (const chapter of resp.chapters) {
 					commit("SET_CHAPTER", { chapter: chapter })
 				}
 				return response
 			}).then((response) => {
 				commit("SET_NAVIGATION_LINKS", { navigationLinks: response._links })
 			})
 	},
 
 	FETCH_COURSES({ commit }, { page }) {
 		return Courses.getAll(page)
 			.then((response) => {
 				const resp = Object.assign({}, response)
 				commit("CLEAR_COURSES")
 				for (const course of resp._items) {
 					commit("SET_COURSE", { course: course })
 				}
 				return response
 			}).then((response) => {
 				commit("SET_NAVIGATION_LINKS", { navigationLinks: response._links })
 				return response
 			}).then((response) => {
 				commit("SET_META", { meta: response._meta })
 			})
 	},
 
 	FETCH_PAGE({ commit }, { pageTitle }) {
 		return Pages.get(pageTitle)
 			.then((response) => {
 				commit("SET_PAGE", { page: response })
 			})
 	},
 
 	FETCH_CHAPTER({ commit }, { chapterName }) {
 		return Chapters.get(chapterName)
 			.then((response) => {
 				const resp = Object.assign({}, response)
 				commit("SET_CHAPTER", { page: resp })
 				for (const page of resp.pages) {
 					commit("SET_PAGE", { page: page })
 				}
 			})
 	},
 
 	START_POLLING({ commit }) {
 		return Polling.start()
 			.then((response) => {
 				const pollingId = response.data.pollingId
 
 				const pollTimer = setInterval(() => {
 					Polling.getStatus(pollingId)
 						.then((response) => {
 							commit("UPDATE_POLLING", { pollingId, progress: response.data.progress })
 						})
 				}, 500)
 
 				commit("CREATE_POLLING", { pollingId, pollTimer })
 			})
 	},
 
 	UPDATE_ACTIVE_REQUESTS({ commit }, { add }) {
 		commit("UPDATE_ACTIVE_REQUESTS", { addNewRequest: add })
+	},
+
+	PATCH_COURSE({ commit, dispatch }, { courseName, course, options }) {
+		return Courses.patch(courseName, course, options)
+			.then((response) => {
+				return dispatch("FETCH_COURSE", { courseName })
+			})
 	}
 }
diff --git a/src/views/Course.vue b/src/views/Course.vue
index 51f6c6d..033e0c6 100644
--- a/src/views/Course.vue
+++ b/src/views/Course.vue
@@ -1,59 +1,78 @@
 <template lang="pug">
 	.view--Course
 		h1 {{ courseName }}
+		WTLButton(
+			@click="toggleEditMode"
+		) Toggle edit mode
 		CourseRenderer(
-			v-if="!error && course",
+			v-if="!error && course && !editMode",
 			:course="course",
 			:showName="false"
 		)
+		CourseEditor(
+			v-if="editMode && course",
+			:course="course"
+		)
 		Error(:error="error")
 </template>
 
 <style lang="scss">
 .view--Course {
 	h1 {
 		text-align: center;
 		margin-bottom: 1rem;
 	}
 
 	.CourseRenderer {
 		background-color: white;
 		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 	}
 }
 </style>
 
 <script>
 import CourseRenderer from "components/CourseRenderer"
+import CourseEditor from "components/CourseEditor"
 import ErrorHandler from "mixins/errorHandler"
+import WTLButton from "components/ui/WTLButton"
 
 export default {
 	name: "Course",
 	mixins: [ErrorHandler],
-	components: { CourseRenderer },
+	components: { CourseRenderer, CourseEditor, WTLButton },
+	data() {
+		return {
+			editMode: false
+		}
+	},
 	computed: {
 		courseName() {
 			if (this.course) {
 				return this.course.title
 			} else {
 				return this.$route.params.courseName
 			}
 		},
 		course() {
 			return this.$store.state.courses[this.$route.params.courseName]
 		}
 	},
 	asyncData({ store, route }) {
 		return store.dispatch("FETCH_COURSE", { courseName: route.params.courseName })
 			.catch((error) => {
 				return store.commit("SET_ERROR", { error: error })
 			})
 	},
+	methods: {
+		toggleEditMode() {
+			this.editMode = !this.editMode
+		}
+	},
 	meta() {
 		return {
 			title: this.courseName,
 			description: "This is the meta description for the course page"
 		}
 	}
 }
 </script>