diff --git a/web/src/components/Modal.vue b/web/src/components/Modal.vue
index 7a31824..4217b42 100644
--- a/web/src/components/Modal.vue
+++ b/web/src/components/Modal.vue
@@ -1,17 +1,45 @@
 <template>
-	<div></div>
+	<transition name="fade" @after-enter="content = true">
+		<div
+			v-if="show"
+			class="modal-container"
+			@click.self.stop="content = false"
+		>
+			<transition name="burst" @after-leave="$emit('close')">
+				<div v-if="content" class="modal">
+					<slot />
+				</div>
+			</transition>
+		</div>
+	</transition>
 </template>
 
 <script>
 export default {
-	name: ``,
-	components: {},
-	computed: {},
-	methods: {},
+	name: `ModalAnimation`,
+	props: {
+		show: {
+			required: true,
+			type: Boolean,
+		},
+	},
+	data() {return {
+		content: false,
+	}},
 }
 </script>
 
 <style>
 @import "css/theme.css";
 @import "css/style.css";
+@import "css/transitions.css";
+
+.modal-container {
+	background-color: var(--modal-background-blur);
+}
+
+.modal {
+	background-color: var(--modal-content-background);
+	color: var(--modal-content-text);
+}
 </style>
\ No newline at end of file
diff --git a/web/src/css/theme.css b/web/src/css/theme.css
index a04104d..87b9f49 100644
--- a/web/src/css/theme.css
+++ b/web/src/css/theme.css
@@ -48,7 +48,7 @@
 	/* The fill colour of the eyes on the game board */
 	--eye-colour: #000000;
 
-	/* The colour that is used to bring focus towards the modal */
+	/* The colours for the modals */
 	--modal-background-blur: #000;
 	--modal-content-background: var(--background1);
 	--modal-content-text: var(--background1-text);