diff --git a/src/App.vue b/src/App.vue
index 479d493..60e5d0d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,130 +1,132 @@
 <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")
+		transition(name="fade", mode="out-in")
 			WTLSpinner.App__spinner(
 				v-if="activeRequests"
 			)
+		Error
 	//
 		.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);
+		box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
 	}
 
 	@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 Error from "components/Error"
 // import AuthCheck from "components/utils/AuthCheck"
 
 export default {
 	name: "App",
-	components: { AppHeader, PollingBar /* , AuthCheck */, WTLSpinner },
+	components: { AppHeader, PollingBar /* , AuthCheck */, WTLSpinner, Error },
 	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/components/Error.vue b/src/components/Error.vue
index dff50e9..82756cf 100644
--- a/src/components/Error.vue
+++ b/src/components/Error.vue
@@ -1,25 +1,38 @@
 <template lang="pug">
-	.Error(v-if="error != null")
-		b.Error__title Error
-		.Error__message {{ error.error }}
+	WTLSnackbar(
+		:text="errorMsg"
+		ref="snackbar"
+	)
 </template>
 
-<style lang="scss">
-@import "~styles/declarations";
-
-.Error {
-	padding: 1rem;
-	border: 1px solid $red;
-}
-</style>
-
 <script>
+import { mapState } from "vuex"
+import WTLSnackbar from "components/ui/WTLSnackbar"
+
 export default {
 	name: "Error",
-	props: {
-		error: {
-			default: null
+	components: { WTLSnackbar },
+	data() {
+		return {
+			errorMsg: ""
+		}
+	},
+	computed: {
+		...mapState([
+			"error"
+		])
+	},
+	watch: {
+		error: function(val) {
+			if (this.error !== null) {
+				this.errorMsg = val.response.data.status + " - " + val.response.data.error
+				const description = val.response.data.error_description
+				if (description !== undefined) {
+					this.errorMsg += " - " + description
+				}
+				this.$refs.snackbar.showSnack()
+			}
 		}
 	}
 }
 </script>
diff --git a/src/components/ui/WTLSnackbar.vue b/src/components/ui/WTLSnackbar.vue
new file mode 100644
index 0000000..a5d6f80
--- /dev/null
+++ b/src/components/ui/WTLSnackbar.vue
@@ -0,0 +1,83 @@
+<template lang="pug">
+	transition(
+		name="fade"
+	)
+		.WTLSnackbar(
+			v-if="show"
+		)
+			.WTLSnackbar__container {{ text }}
+				.WTLSnackbar__close-button(
+					v-if="closable"
+				) CLOSE
+</template>
+
+<script>
+export default {
+	name: "WTLSnackbar",
+	props: {
+		text: {
+			type: String,
+			required: true
+		},
+		closable: {
+			type: Boolean,
+			default: false
+		}
+	},
+	data() {
+		return {
+			show: false
+		}
+	},
+	methods: {
+		open() {
+			this.show = true
+		},
+		close() {
+			this.show = false
+		},
+		showSnack() {
+			this.show = true
+			setTimeout(() => {
+				this.show = false
+			}, 2000)
+		}
+	}
+}
+</script>
+
+<style lang="scss">
+@import "~styles/declarations";
+
+/* The snackbar - position it at the bottom and in the middle of the screen */
+.WTLSnackbar {
+	width: 100%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+
+	&__container {
+		// visibility: hidden; /* Hidden by default. Visible on click */
+		min-width: 5rem; /* Set a default minimum width */
+		// margin-left: -2.5rem; /* Divide value of min-width by 2 */
+		background-color: $red;
+		color: #fff; /* White text color */
+		text-align: center; /* Centered text */
+		border-radius: 0.25rem; /* Rounded borders */
+		padding: 1rem; /* Padding */
+		position: fixed; /* Sit on top of the screen */
+		z-index: 1; /* Add a z-index if needed */
+		// left: 50%; /* Center the snackbar */
+		bottom: 30px; /* 30px from the bottom */
+	}
+}
+
+
+.fade-enter-active, .fade-leave-active {
+  transition: opacity 0.25s ease-out;
+}
+
+.fade-enter, .fade-leave-to {
+  opacity: 0;
+}
+</style>
diff --git a/src/store/actions.js b/src/store/actions.js
index 08a8129..175c5f5 100644
--- a/src/store/actions.js
+++ b/src/store/actions.js
@@ -1,106 +1,111 @@
 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 })
 			})
+	},
+
+	SET_ERROR({ commit }, { error }) {
+		commit("EMPTY_ERROR")
+		commit("SET_ERROR", { error: error })
 	}
 }
diff --git a/src/store/mutations.js b/src/store/mutations.js
index 89caff5..b23262e 100644
--- a/src/store/mutations.js
+++ b/src/store/mutations.js
@@ -1,65 +1,69 @@
 import Vue from "vue"
 
 export const mutations = {
 	SET_ROOT_CATEGORIES(state, { categories }) {
 		state.rootCategories = categories
 	},
 
 	SET_CHAPTER(state, { chapter }) {
 		Vue.set(state.chapters, chapter._id, chapter)
 	},
 
 	SET_NAVIGATION_LINKS(state, { navigationLinks }) {
 		state.navigationLinks = navigationLinks
 	},
 
 	SET_CATEGORY(state, { category }) {
 		Vue.set(state.categories, category.name, category)
 	},
 
 	SET_COURSE(state, { course }) {
 		Vue.set(state.courses, course._id, course)
 	},
 
 	SET_PAGE(state, { page }) {
 		Vue.set(state.pages, page._id, page)
 	},
 
 	SET_ERROR(state, { error }) {
 		state.error = Object.assign({}, error)
 	},
 
+	EMPTY_ERROR(state) {
+		state.error = null
+	},
+
 	CLEAR_ERROR(state) {
 		state.error = null
 	},
 
 	CLEAR_COURSES(state) {
 		state.courses = {}
 	},
 
 	CREATE_POLLING(state, { pollingId, pollTimer }) {
 		Vue.set(state.pollingOperations, pollingId, {
 			title: pollingId,
 			id: pollingId,
 			progress: 0,
 			timer: pollTimer
 		})
 	},
 
 	UPDATE_POLLING(state, { pollingId, progress }) {
 		Vue.set(state.pollingOperations[pollingId], "progress", progress)
 	},
 
 	DELETE_POLLING(state, { id }) {
 		clearTimeout(state.pollingOperations[id].timer)
 		Vue.delete(state.pollingOperations, id)
 	},
 
 	UPDATE_ACTIVE_REQUESTS(state, { addNewRequest }) {
 		state.activeApiRequests += addNewRequest
 	},
 
 	SET_META(state, { meta }) {
 		state.meta = meta
 	}
 }