diff --git a/src/App.vue b/src/App.vue
index 60e5d0d..2ea169c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,132 +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="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 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
+		box-shadow: $shadow-2;
 	}
 
 	@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, 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/AppHeader.vue b/src/components/AppHeader.vue
index d8870fb..23acc82 100644
--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@@ -1,60 +1,61 @@
 <template lang="pug">
 	header.AppHeader
 		.AppHeader__content
 			.AppHeader__left
 				router-link.AppHeader__link(to="/")
 					img.AppHeader__logo(src="~images/logo.png", alt="WikiToLearn - collaborative textbooks")
 					img.AppHeader__name(src="~images/name.svg", alt="WikiToLearn - collaborative textbooks")
 			.AppHeader__right
 				SessionInfo
 </template>
 
 <style lang="scss">
 @import "~styles/declarations";
 
 .AppHeader {
 	position: fixed;
 	padding: 0.5rem 0;
 	width: 100%;
 	top: 0;
 	left: 0;
 	font-size: 1.5rem;
 	background-color: white;
 	box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
+	z-index: 10;
 
 	&__content {
 		@include container();
 
 		display: flex;
 		align-items: center;
 	}
 
 	&__left {
 		flex: 1;
 		font-size: 0;
 	}
 
 	&__link {
 		display: inline-flex;
 		align-items: center;
 	}
 
 	&__logo {
 		height: 2.5rem;
 		margin-right: 0.5rem;
 	}
 
 	&__name {
 		height: 1.8rem;
 	}
 }
 </style>
 
 <script>
 import SessionInfo from "components/SessionInfo"
 
 export default {
 	name: "AppHeader",
 	components: { SessionInfo }
 }
 </script>
diff --git a/src/components/SessionInfo.vue b/src/components/SessionInfo.vue
index d035cd3..5e9bc3c 100644
--- a/src/components/SessionInfo.vue
+++ b/src/components/SessionInfo.vue
@@ -1,30 +1,29 @@
 <template lang="pug">
 	NoSSR
 		.SessionInfo
 			template(v-if="$keycloak && $keycloak.ready")
 				WTLButton(v-if="!$keycloak.authenticated", @click=`doLogin()`) Login
 				template(v-if="$keycloak.authenticated")
-					span {{ $keycloak.user.username }}
-						small ({{ $keycloak.user.email }})
-					WTLButton(@click=`$keycloak.logout()`) Logout
-					WTLButton(@click=`checkLogin()`) Get User Data
+					WTLField(grouped=true)
+						WTLButton(@click=`checkLogin()`) View user info
+						WTLButton(@click=`$keycloak.logout()`, type="error") Logout
 </template>
 
 <script>
 export default {
 	name: "SessionInfo",
 	methods: {
 		checkLogin() {
 			const _this = this
 			this.$keycloak.loadUserProfile().success((user) => {
 				_this.$dialog.alert({ content: JSON.stringify(user) })
 			})
 		},
 		doLogin() {
 			this.$keycloak.login({
 				redirectUri: `${window.location.origin}/afterLogin`
 			})
 		}
 	}
 }
 </script>
diff --git a/src/components/home/Badge.vue b/src/components/home/Badge.vue
index 6001253..475f927 100644
--- a/src/components/home/Badge.vue
+++ b/src/components/home/Badge.vue
@@ -1,37 +1,39 @@
 <template lang="pug">
 	.Badge
 		router-link.Badge__name(:to=`{
 				name: view,
 				params: params
 			}`) {{ title }}
 </template>
 
 <style lang="scss">
+@import "~styles/_variables";
+
 .Badge {
 	display: inline-block;
-	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+	box-shadow: $shadow-1;
 	padding: 1rem 2rem;
 	margin: 0.5rem;
 	background-color: white;
 }
 </style>
 
 <script>
 export default {
 	name: "Badge",
 	props: {
 		link: {
 			type: Object,
 			required: true
 		}
 	},
 	data() {
 		return {
 			api: this.link.href ? this.link.href : "",
 			view: this.link.view,
 			title: this.link.title,
 			params: this.link.params ? this.link.params : {}
 		}
 	}
 }
 </script>
diff --git a/src/components/ui/WTLButton.vue b/src/components/ui/WTLButton.vue
index 9e07915..f0419bc 100644
--- a/src/components/ui/WTLButton.vue
+++ b/src/components/ui/WTLButton.vue
@@ -1,113 +1,114 @@
 <template lang="pug">
 	button.WTLButton(
 		:class=`[
 			type ? 'WTLButton--' + type : '',
 			{ 'WTLButton--has-icon': icon },
 			{ 'WTLButton--no-text': !$slots.default }
 		]`
 		:disabled="disabled"
 		@click="click"
 	)
 		WTLIcon(v-if="icon", :icon="icon")
 		.WTLButton__content
 			slot
 </template>
 
 <style lang="scss">
 @import "~styles/declarations";
 
 @mixin setBgColorAndHover($baseColor, $amount: 5%, $border: false) {
 	background-color: $baseColor;
 
 	@if $border {
 		border: 1px solid darken($baseColor, $amount);
 	} @else {
 		/* fake border */
 		border: 1px solid $baseColor;
 	}
 
 	&:hover:not(:disabled) {
 		background-color: darken($baseColor, $amount);
 
 		/* fake border */
 		@if not $border {
 			border: 1px solid darken($baseColor, $amount);
 		}
 	}
 }
 
 .WTLButton {
 	@include input();
 
 	cursor: pointer;
 	border-radius: $input-radius;
+	box-shadow: $shadow-1;
 
 	&--no-text {
 		padding: 0.5rem;
 	}
 
 	&--has-icon:not(&--no-text) {
 		padding-left: 0.4rem;
 	}
 
 	&--default {
 		@include setBgColorAndHover(white, $amount: 10%, $border: true);
 	}
 
 	&--success {
 		@include setBgColorAndHover($green);
 
 		color: white;
 	}
 
 	&--info {
 		@include setBgColorAndHover($blue);
 
 		color: white;
 	}
 
 	&--warning {
 		@include setBgColorAndHover($yellow);
 
 		color: white;
 	}
 
 	&--error {
 		@include setBgColorAndHover($red);
 
 		color: white;
 	}
 
 	&:disabled {
 		color: $disabled-fg;
 		background-color: $disabled-bg;
 		border-color: $disabled-border;
 	}
 }
 </style>
 
 <script>
 export default {
 	name: "WTLButton",
 	props: {
 		type: {
 			type: String,
 			default: "default"
 		},
 		disabled: {
 			type: Boolean,
 			default: false
 		},
 		icon: {
 			type: String
 		}
 	},
 	methods: {
 		click(e) {
 			if (this.disabled) return
 
 			this.$emit("click")
 		}
 	}
 }
 </script>
diff --git a/src/components/ui/WTLInput.vue b/src/components/ui/WTLInput.vue
index 7516518..14fa9e9 100644
--- a/src/components/ui/WTLInput.vue
+++ b/src/components/ui/WTLInput.vue
@@ -1,176 +1,177 @@
 <template lang="pug">
 	div.WTLInput(:class=`[
 			{ "WTLInput--disabled": disabled },
 			{ "WTLInput--valid": valid },
 			{ "WTLInput--invalid": invalid }
 		]`
 	)
 		input.WTLInput__input(
 			:class=`[
 					{ 'WTLInput__input--has-icon': icon },
 					icon ? 'WTLInput__input--has-icon--' + iconPosition : ''
 				]`
 			:placeholder="placeholder"
 			:type="inputType"
 			:disabled="disabled"
 			:readonly="readonly"
 			:min="min"
 			:max="max"
 			:minlength="minlength"
 			:maxlength="maxlength"
 			:required="required"
 			:value="inputValue"
 			@input="input"
 		)
 		WTLIcon.WTLInput__icon(v-if="icon", :icon="icon", :class="'WTLInput__icon--' + iconPosition")
 </template>
 
 <script>
 export default {
 	name: "WTLInput",
 	props: {
 		value: [Number, String],
 		type: {
 			type: String,
 			default: "text"
 		},
 		required: Boolean,
 		disabled: {
 			type: Boolean,
 			default: false
 		},
 		placeholder: String,
 		maxlength: [Number, String],
 		minlength: [Number, String],
 		readonly: Boolean,
 		min: [Number, String],
 		max: [Number, String],
 		icon: String,
 		iconPosition: {
 			type: String,
 			default: "left"
 		},
 		validator: {
 			type: Function
 		}
 	},
 	data() {
 		return {
 			inputValue: this.value,
 			inputType: this.type,
 			valid: false,
 			invalid: false
 		}
 	},
 	watch: {
 		value(newValue) {
 			this.inputValue = newValue
 			this.checkValidity()
 		}
 	},
 	methods: {
 		/*
 		* Input's input listener.
 		*
 		*   1. Emit input event to update the user v-model.
 		*   2. If it's invalid, validate again.
 		*/
 		input(event) {
 			const value = event.target.value
 			this.inputValue = value
 			this.checkValidity()
 			this.$emit("input", value)
 		},
 
 		checkValidity() {
 			if (this.validator && typeof this.validator === "function") {
 				if (this.validator(this.inputValue)) {
 					this.valid = true
 					this.invalid = false
 				} else {
 					this.valid = false
 					this.invalid = true
 				}
 			}
 		}
 	}
 }
 </script>
 
 <style lang="scss">
 @import "~styles/declarations";
 
 $input-border-color: #dbdbdb;
 
 .WTLInput {
 	display: inline-flex;
 	align-items: center;
 	position: relative;
+	box-shadow: $shadow-1;
 	min-width: 12.5rem;
 
 	&--full-width {
 		width: 100%;
 	}
 
 	&__icon {
 		position: absolute;
 		color: #dbdbdb;
 
 		&--left {
 			left: 0.1rem;
 		}
 
 		&--right {
 			right: 0.1rem;
 		}
 	}
 
 	&__input {
 		@include input();
 
 		width: 100%;
 		border: 1px solid $input-border-color;
 		border-radius: $input-radius;
 
 		&--has-icon {
 			&--left {
 				padding-left: 2rem;
 			}
 
 			&--right {
 				padding-right: 2rem;
 			}
 		}
 
 		&--full-width {
 			width: 100%;
 		}
 
 		&:disabled {
 			background-color: $disabled-bg;
 			color: $disabled-fg;
 		}
 
 		&:focus {
 			outline: 0;
 			border-color: $blue;
 
 			& ~ .WTLInput__icon {
 				color: $black;
 			}
 		}
 	}
 
 	&--valid {
 		.WTLInput__input {
 			border-color: $green;
 		}
 	}
 
 	&--invalid {
 		.WTLInput__input {
 			border-color: $red;
 		}
 	}
 }
 </style>
diff --git a/src/components/ui/WTLSnackbar.vue b/src/components/ui/WTLSnackbar.vue
index a5d6f80..ff5d804 100644
--- a/src/components/ui/WTLSnackbar.vue
+++ b/src/components/ui/WTLSnackbar.vue
@@ -1,83 +1,81 @@
 <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/styles/_variables.scss b/src/styles/_variables.scss
index 42107fb..92b3769 100644
--- a/src/styles/_variables.scss
+++ b/src/styles/_variables.scss
@@ -1,54 +1,58 @@
 /// Values
 $body-size: 16px !default;
 
 /// Colors
 
 // Brand colors
 $dark-red: #83001f !default;
 $red: #db3e14 !default;
 $yellow: #ffbc31 !default;
 $green: #6ab141 !default;
 $dark-green: #00613a !default;
 
 // typography
 $black: #333 !default;
 $gray: #888 !default;
 
 // other colors
 $blue: #347bff !default;
 $lightgray: darken(white, 5%) !default;
 
 $disabled-bg: $lightgray !default;
 $disabled-fg: $gray !default;
 $disabled-border: darken(white, 10%) !default;
 
 $card-bg: #f2f2f2 !default;
 
 // global styles
 $input-radius: 0.25rem !default;
 $font-weight-semibold: 600 !default;
 $font-weight-bold: 700 !default;
 
+// shadows
+$shadow-1: 0 1px 3px rgba(0, 0, 0, 0.1);
+$shadow-2: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
+
 /// Breakpoints
 $breakpoints: (
 	xs: 0,
 	sm: 576px,
 	md: 768px,
 	lg: 992px,
 	xl: 1200px
 ) !default;
 
 $container-max-widths: (
 	sm: 540px,
 	md: 720px,
 	lg: 960px,
 	xl: 1140px
 ) !default;
 
 $card-paddings: (
 	xs: 0.5rem,
 	sm: 1rem,
 	md: 1.5rem,
 	lg: 2rem,
 	xl: 2.5rem
 ) !default;