diff --git a/creator.html b/creator.html
index e55148cc..07c7466d 100644
--- a/creator.html
+++ b/creator.html
@@ -216,6 +216,7 @@
 	<script defer src="data/scripts/main.js"></script>
 	<script defer src="data/scripts/versions/m15/version.js"></script>
 	<!-- <script async src="data/scripts/palettes/darkMode.js"></script> -->
+	<div class='notificationContainer'></div>
 </body>
 <footer id='footer'>
 	<script async src='data/scripts/footer.js'></script>
diff --git a/data/images/manaSymbols/m21/0.png b/data/images/manaSymbols/m21/0.png
new file mode 100644
index 00000000..8faed042
Binary files /dev/null and b/data/images/manaSymbols/m21/0.png differ
diff --git a/data/scripts/main.js b/data/scripts/main.js
index 9962450b..32930f2e 100644
--- a/data/scripts/main.js
+++ b/data/scripts/main.js
@@ -897,15 +897,14 @@ function textCodeReference() {
 	textCodeReferenceArray.forEach(item => document.getElementById('textCodeReference').innerHTML += '<div>' + item[0] + '</div><div>' + item[1] + '</div>')
 }
 
-
-
-
-
-
-
-
-
-
+function notify(message, color) {
+	document.getElementsByClassName('notificationContainer')[0].innerHTML += `
+	<div class='notification' style='background-color: ` + color + `'>
+		<div>` + message + `</div>
+		<div class='deleteNotification' onclick='this.parentElement.parentNode.removeChild(this.parentElement)'>X</div>
+	</div>
+	`
+}//notify('MessageGoesHere', '#aaffaadd')
 
 //Must run last:
 initialize()
diff --git a/styles.css b/styles.css
index b5a9ffc8..6cb64538 100644
--- a/styles.css
+++ b/styles.css
@@ -392,8 +392,24 @@ input[type='checkbox'], select, option, input[type='file'], button {
 }
 
 
-.testClass {
-	border: 1px solid red;
+.notificationContainer {
+	position: fixed;
+	bottom: 0;
+	left: 0;
+	width: 100%;
+	color: black;
+}
+.notification {
+	display: grid;
+	grid-template-columns: auto 1rem;
+	grid-gap: 1rem;
+	margin: 0.5rem;
+	padding: 0.5rem;
+	background: green;
+}
+.notification > .deleteNotification {
+	text-align: center;
+	cursor: pointer;
 }