diff --git a/src/components/ui/Dialog/Dialog.vue b/src/components/ui/Dialog/Dialog.vue
index ba1fb52..537bdd1 100644
--- a/src/components/ui/Dialog/Dialog.vue
+++ b/src/components/ui/Dialog/Dialog.vue
@@ -1,153 +1,153 @@
 <template lang="pug">
 	.Dialog(
 		:class=`[
 			type ? 'Dialog--' + type : '',
 		]`
 	)
 		.Dialog__wrapper(v-if="active", @click="closeOutside")
 			.Dialog__body(id="dialog-body")
 				.Dialog__header {{ title }}
-				.Dialog__content {{ type }} {{ content }}
+				.Dialog__content {{ content }}
 				.Dialog__footer
 					WTLButton(v-if="dialogType == 'confirm'", @click="cancel()") Cancel
 					WTLButton(:type="type", @click="confirm()") OK
 </template>
 
 <style lang="scss">
 @import "~styles/declarations";
 
 .Dialog {
 	&__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;
 	}
 
 	&__header {
 		font-size: 1.5rem;
 		font-weight: bold;
 		padding-bottom: 0.5rem;
 		margin-bottom: 0.5rem;
 		border-bottom: 1px solid $lightgray;
 	}
 
 	&__content {
 		margin-bottom: 1rem;
 		overflow-y: auto;
 		overflow-x: hidden;
 		word-wrap: break-word;
 		overflow-wrap: break-all;
 	}
 
 	&__footer {
 		text-align: right;
 
 		.WTLButton {
 			margin-left: 0.25rem;
 		}
 	}
 
 	&--error {
 		color: $red;
 	}
 
 	&--success {
 		color: $green;
 	}
 
 	&--warning {
 		color: $yellow;
 	}
 }
 </style>
 
 <script>
 import WTLButton from "components/ui/WTLButton"
 
 export default {
 	name: "Dialog",
 	components: {
 		WTLButton
 	},
 	props: {
 		active: {
 			type: Boolean,
 			default: false
 		},
 		title: {
 			type: String,
 			default: "No Title"
 		},
 		content: String,
 		type: {
 			type: String,
 			default: "info"
 		},
 		dialogType: {
 			type: String,
 			required: true
 		},
 		onConfirm: {
 			type: Function,
 			default: () => {}
 		},
 		onCancel: {
 			type: Function,
 			default: () => {}
 		},
 		onClose: {
 			type: Function,
 			default: () => {}
 		}
 	},
 	methods: {
 		close() {
 			this.onClose()
 			this.active = false
 
 			// remove the dom element after 1sec
 			setTimeout(() => {
 				this.$destroy()
 				this.$el.remove()
 			}, 1000)
 		},
 		confirm() {
 			this.onConfirm()
 			this.close()
 		},
 		cancel() {
 			this.onCancel()
 			this.close()
 		},
 		closeOutside(event) {
 			if (!document.getElementById("dialog-body").contains(event.target)) {
 				this.close()
 			}
 		}
 	},
 	beforeMount() {
 		document.body.appendChild(this.$el)
 	},
 	mounted() {
 		this.active = true
 	}
 }
 </script>
diff --git a/src/components/ui/WTLModal.vue b/src/components/ui/WTLModal.vue
index 3a90352..4ef715a 100644
--- a/src/components/ui/WTLModal.vue
+++ b/src/components/ui/WTLModal.vue
@@ -1,54 +1,64 @@
 <template lang="pug">
 	.Modal
-		.Modal__wrapper(v-if="active")
-			.Modal__body
+		.Modal__wrapper(@click="closeOutside")
+			.Modal__body(id="modal-body")
 				slot
 </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;
 	}
 }
 </style>
 
 <script>
 export default {
 	name: "WTLModal",
 	props: {
 		active: {
 			type: Boolean,
 			default: false
 		}
 	},
+	data() {
+		return {
+			show: this.active
+		}
+	},
 	methods: {
 		close() {
 			this.$emit("close")
-			this.active = false
+			this.show = false
+		},
+		closeOutside(event) {
+			if (!document.getElementById("modal-body").contains(event.target)) {
+				this.close()
+			}
 		}
 	}
 }
 </script>
diff --git a/src/views/dev/ui/Dialog.vue b/src/views/dev/ui/Dialog.vue
index 8ba6abb..d41164e 100644
--- a/src/views/dev/ui/Dialog.vue
+++ b/src/views/dev/ui/Dialog.vue
@@ -1,32 +1,38 @@
 <template lang="pug">
 	div
 		h2 Alert
 		WTLButton(@click="$dialog.alert({ content: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid optio odit maiores doloribus id officia porro veritatis pariatur dolorem, cumque illum eum commodi nostrum distinctio praesentium natus, accusantium rerum atque.' })") Open generic Alert
 		WTLButton(@click="$dialog.alert({ content: 'Something went wrong', type: 'error' })") Open error Alert
 		WTLButton(@click="$dialog.alert({ content: 'Great!', type: 'success' })") Open success Alert
 		WTLButton(@click="$dialog.alert({ content: 'Something yellow', type: 'warning' })") Open warning Alert
 		h2 Confirm
 		WTLButton(@click="$dialog.confirm({ content: 'Are you sure?' })") Open confirm dialog
 		WTLButton(@click=`
 			$dialog.confirm({
 				content: 'Press ok to open onother dialog',
 				onConfirm() {
 					$dialog.alert({ content: 'You confirmed' })
 				}
 			})`) Open confirm dialog with events
 		h2 Modal
 		WTLButton(@click="showModal = true") Open modal test
 
-		WTLModal(:active.sync="showModal")
+		WTLModal(v-if="showModal", ref="modal", @close="showModal = false")
 			h1 Hello
+			WTLButton(@click="closeModal") close me
 </template>
 
 <script>
 export default {
 	data() {
 		return {
 			showModal: false
 		}
+	},
+	methods: {
+		closeModal() {
+			this.$refs.modal.close()
+		}
 	}
 }
 </script>