diff --git a/src/components/Error.vue b/src/components/Error.vue
index 82756cf..021353c 100644
--- a/src/components/Error.vue
+++ b/src/components/Error.vue
@@ -1,38 +1,39 @@
 <template lang="pug">
 	WTLSnackbar(
+		type="error"
 		:text="errorMsg"
 		ref="snackbar"
 	)
 </template>
 
 <script>
 import { mapState } from "vuex"
 import WTLSnackbar from "components/ui/WTLSnackbar"
 
 export default {
 	name: "Error",
 	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/WTLButton.vue b/src/components/ui/WTLButton.vue
index f0419bc..f8250c2 100644
--- a/src/components/ui/WTLButton.vue
+++ b/src/components/ui/WTLButton.vue
@@ -1,114 +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;
+		padding: 0.5rem 0.25rem;
 	}
 
 	&--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 14fa9e9..041920a 100644
--- a/src/components/ui/WTLInput.vue
+++ b/src/components/ui/WTLInput.vue
@@ -1,177 +1,178 @@
 <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;
+	border-radius: $input-radius;
 
 	&--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 ff5d804..bb4a21c 100644
--- a/src/components/ui/WTLSnackbar.vue
+++ b/src/components/ui/WTLSnackbar.vue
@@ -1,81 +1,102 @@
 <template lang="pug">
 	transition(
 		name="fade"
 	)
 		.WTLSnackbar(
 			v-if="show"
 		)
-			.WTLSnackbar__container {{ text }}
-				.WTLSnackbar__close-button(
-					v-if="closable"
-				) CLOSE
+			.WTLSnackbar__container(
+				:class=`[
+					"WTLSnackbar--" + type
+				]`
+			) {{ text }}
 </template>
 
 <script>
 export default {
 	name: "WTLSnackbar",
 	props: {
 		text: {
 			type: String,
 			required: true
 		},
-		closable: {
-			type: Boolean,
-			default: false
+		type: {
+			type: String,
+			default: "default"
 		}
 	},
 	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 {
+		max-width: 80%;
+		max-height: 30%;
 		min-width: 5rem; /* Set a default minimum width */
-		background-color: $red;
+		background-color: $black;
 		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 */
+		box-shadow: $shadow-2;
+		word-wrap: break-word;
+		overflow-wrap: break-all;
+	}
+
+	&--default {
+		background-color: $black;
+	}
+
+	&--error {
+		background-color: $red;
+	}
+
+	&--warning {
+		background-color: $yellow;
+	}
+
+	&--success {
+		background-color: $green;
 	}
 }
 
 
 .fade-enter-active, .fade-leave-active {
   transition: opacity 0.25s ease-out;
 }
 
 .fade-enter, .fade-leave-to {
   opacity: 0;
 }
 </style>