diff --git a/data/site/main.js b/data/site/main.js
index 43f57a8d..cef3092e 100644
--- a/data/site/main.js
+++ b/data/site/main.js
@@ -88,6 +88,7 @@ function init() {
 	setTimeout(testFunction, 100)
 	checkCookies()
     initiated = true
+    textCodeTutorial()
 }
 //Loads an image. Only actually loads images the first time each image is loaded, otherwise assigns it.
 function loadImage(index, target = "none") {
@@ -807,11 +808,31 @@ function tabSelectAddOption(tabSection, displayName, tabValue) {
 
 
 
+function textCodeTutorial() {
+	var textCodeTutorialString = `line-skips to the next line
+	_linenospace-skips to the next line, but doesn't add spacing
+	_bar-skips to the next line, and adds the flavor text bar
+	_flavor-skips to the next line, adds the flavor text bar, and italicizes the following text
+	_i-italicizes the following text
+	_/i-removes italics from the following text
+	_fontsize#-changes the font size to # pixels
+	_left-justifies text to the left
+	_center-justifies text to the center
+	_right-justifies text to the right
+	_up#-moves the following text # pixels up
+	_down#-moves the following text # pixels down
+	_left#-moves the following text # pixels left
+	_right#-moves the following text # pixels right
+	_SYMBOL-creates a mana symbol, where SYMBOL can be: w, u, b, r, g, 1, 2, 3, etc...`
+	var textCodeTutorialArray = textCodeTutorialString.split("_")
+	for (var i = 0; i < textCodeTutorialArray.length; i ++) {
+		document.getElementById("textCodeTutorial").innerHTML += "<div><b>{" + textCodeTutorialArray[i].split("-")[0] + "}</b></div><div>" + textCodeTutorialArray[i].split("-")[1] + "</div>"
+	}
+}
 
 
 
-
-
+textCodeTutorial()
 
 
 /*To do list:
diff --git a/data/site/styles.css b/data/site/styles.css
index cf58dcec..60abfc00 100644
--- a/data/site/styles.css
+++ b/data/site/styles.css
@@ -204,6 +204,7 @@ footer a:hover {
 	background-repeat: no-repeat;
 }
 .title {
+	text-align: center;
 	font: 1.5em belerenbsc;
 }
 .pageTitle {
@@ -378,8 +379,19 @@ footer a:hover {
 }
 .checkboxContainer .checkmark:after {
     left: 0.15em;
-    top: 0.08em;
+    top: -0.1em;
+}
+#textCodeTutorial {
+	display: grid;
+	grid-template-columns: 6.5em auto;
+	/*padding: 0.5em;*/
+}
+#textCodeTutorial > div {
+	padding: 0.25em 0;
+	background-color: var(--clear-mid);
+}
+#textCodeTutorial > div:nth-child(4n), #textCodeTutorial > div:nth-child(4n - 1) {
+	background-color: var(--clear-light);
 }
 
 
-
diff --git a/index.html b/index.html
index 0db024ba..5e52bc92 100644
--- a/index.html
+++ b/index.html
@@ -56,6 +56,12 @@
                     <div id="inputWhichTextTabs" class="tab"></div>
 					<div class="tooltip"><textarea class="textarea tooltip" id="inputText" placeholder="" oninput="updateText()"></textarea><span class="tooltiptext">Edit the selected text</span></div>
 					<div class="tooltip"><input type="text" class="input text" placeholder="Mana Cost" id="inputManaCost" oninput="updateCardCanvas()" value=""><span class="tooltiptext">Enter the mana cost. Include spaces!</span></div>
+					<div class="bar"></div>
+					<div class="title">How To Use Text Codes</div>
+					<div class="paragraph indent">
+						Remember to surround each code with curly brackets ("{" and "}"). The codes are not caps sensitive. The following is a list of available text codes and what they do:
+					</div>
+					<div id="textCodeTutorial"></div>
 				</div>
 				<div class="tabContent editor" id="optionArt">
 					<div class="autoGrid">