diff --git a/src/components/ui/WTLBanner.vue b/src/components/ui/WTLBanner.vue
index 05a40b3..5fe53bf 100644
--- a/src/components/ui/WTLBanner.vue
+++ b/src/components/ui/WTLBanner.vue
@@ -1,95 +1,95 @@
 <template lang="pug">
 	.WTLBanner(
 		v-if="opened"
 		:class=`[
 			"WTLBanner--" + type
 		]`
 	)
 		slot
 		WTLButton.WTLBanner__close(
 			v-if="closable || closeButtonText"
 			@click="close"
 			icon="close"
 		) {{ closeButtonText }}
 </template>
 
 <script>
 export default {
 	name: "WTLBanner",
 	props: {
 		type: {
 			type: String,
 			default: "default"
 		},
 		closable: {
 			type: Boolean,
 			default: false
 		},
 		closeButtonText: {
 			type: String,
 			default: ""
 		},
 		onClose: {
 			type: Function,
 			default: () => {}
 		}
 	},
 	data() {
 		return {
 			opened: true
 		}
 	},
 	methods: {
 		close() {
 			this.onClose()
 			this.opened = false
 		}
 	}
 }
 </script>
 
 <style lang="scss">
 @import "~styles/declarations";
 
 .WTLBanner {
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	padding: 0.5rem;
 	box-shadow: $shadow-1;
 	border-radius: $input-radius;
 	color: #ffffff;
-	background-color: black;
+	background-color: $black;
 
 	> * {
 		margin-left: 0.5rem;
 		margin-right: 0.5rem;
 		height: 100%;
 	}
 
 	&--default {
 		background-color: $black;
 	}
 
 	&--success {
 		background-color: $green;
 	}
 
 	&--warning {
 		background-color: $yellow;
 	}
 
 	&--error {
 		background-color: $red;
 	}
 
 	&--full-width {
 		width: 100%;
 	}
 
 	&__close {
 		justify-content: flex-end;
 	}
 }
 </style>
 
diff --git a/src/components/ui/WTLIcon.vue b/src/components/ui/WTLIcon.vue
index 7d17a52..738d4fc 100644
--- a/src/components/ui/WTLIcon.vue
+++ b/src/components/ui/WTLIcon.vue
@@ -1,30 +1,32 @@
 <template lang="pug">
 	i.material-icons.WTLIcon(
 		:class=`[{ "WTLIcon--default": !clickable }]`
 	) {{ icon }}
 </template>
 
 <script>
 export default {
 	name: "WTLIcon",
 	props: {
 		icon: String,
 		clickable: {
 			type: Boolean,
 			default: false
 		}
 	}
 }
 </script>
 
 <style lang="scss">
 .WTLIcon.material-icons {
 	height: 100%;
 	font-size: 1.125rem;
 	width: 2rem;
-}
+	cursor: pointer;
 
-.WTLIcon--default {
-	pointer-events: none;
+	&.WTLIcon--default {
+		pointer-events: none;
+		cursor: default;
+	}
 }
 </style>
diff --git a/src/components/ui/WTLModal.vue b/src/components/ui/WTLModal.vue
index 4ef715a..28a4c7f 100644
--- a/src/components/ui/WTLModal.vue
+++ b/src/components/ui/WTLModal.vue
@@ -1,64 +1,84 @@
 <template lang="pug">
 	.Modal
 		.Modal__wrapper(@click="closeOutside")
 			.Modal__body(id="modal-body")
-				slot
+				h2.Modal__title(v-if="title") {{ title }}
+				.Modal__content
+					slot(name="content")
+				.Modal__actions
+					slot(name="actions")
 </template>
 
 <style lang="scss">
 @import "~styles/declarations";
 
 .Modal {
 	&__wrapper {
 		display: flex;
 		align-items: center;
 		justify-content: center;
 		position: fixed;
 		top: 0;
 		bottom: 0;
 		left: 0;
 		right: 0;
 		background-color: rgba(0, 0, 0, 0.5);
 	}
 
 	&__body {
 		display: flex;
 		flex-direction: column;
 		padding: 1rem 2rem;
 		margin: 1rem;
 		min-width: 320px;
 		max-width: 460px;
 		max-height: calc(100vh - 1rem);
 		border-radius: 3px;
 		background-color: white;
+
+		> *:not(:last-child) {
+			padding: 0.5rem;
+			border-bottom: 1px solid $lightgray;
+			margin-bottom: 0.25rem;
+		}
+	}
+
+	&__actions {
+		display: flex;
+		justify-content: flex-end;
+
+		> *:not(:last-child) {
+			margin-right: 0.5rem;
+		}
 	}
 }
 </style>
 
 <script>
 export default {
 	name: "WTLModal",
 	props: {
 		active: {
 			type: Boolean,
 			default: false
-		}
+		},
+		title: String
 	},
 	data() {
 		return {
 			show: this.active
 		}
 	},
 	methods: {
 		close() {
 			this.$emit("close")
 			this.show = false
 		},
 		closeOutside(event) {
 			if (!document.getElementById("modal-body").contains(event.target)) {
 				this.close()
 			}
 		}
 	}
 }
 </script>