diff --git a/data/site/styles.css b/data/site/styles.css
index b4ef9c0c..a3548cd0 100644
--- a/data/site/styles.css
+++ b/data/site/styles.css
@@ -39,6 +39,7 @@
 	--shifting-color-1: #00c300;
 	--shifting-color-1-light: #c8ff64;
 	--light-color: #eee;
+    --clear-selected: #fff4;
 	--dark-color: #333;
     --clear-light: #0001;
     --clear-dark: #0003;
@@ -98,9 +99,9 @@ canvas {
 	height: 1em;
 }
 .cardMenu > div > div:nth-child(1) {
-	/*border: 1px solid blue;*/
-	text-align: center;
-	font: 1.5em belerenbsc;
+/*    border: 1px solid blue;*/
+/*    text-align: center;*/
+/*    font: 1.5em belerenbsc;*/
 }
 .twoGrid {
 	display: grid;
@@ -282,9 +283,9 @@ footer a:hover {
 /*WIP*/
 .tab {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(6em, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(6.5em, 1fr));
     grid-auto-rows: min-content;
-/*    align-items: center;*/
+    cursor: pointer;
 }
 .tabButton {
     text-align: center;
@@ -294,7 +295,7 @@ footer a:hover {
     padding: 0.1em 0em;
 }
 .tabButton.activeTab {
-    background: var(--clear-dark);
+    background: var(--clear-selected);
 }
 .tabContent {
     display: none;
@@ -303,8 +304,10 @@ footer a:hover {
     display: block;
 }
 
-
-
+.download {
+    text-align: center;
+    font: 1.5em belerenbsc;
+}
 
 
 
diff --git a/index.html b/index.html
index a39d47dd..44b20787 100644
--- a/index.html
+++ b/index.html
@@ -17,10 +17,16 @@
 				<canvas id="mainCanvas" class="canvas"></canvas>
 			</div>
 			<div class="cardMenu">
-				<div>
-					<div>
-						Card Frame
-					</div>
+                <div class="tab">
+                    <div class="tabButton editor activeTab" onclick="tabFunction(event, `editor`, `optionFrame`)">Frame</div>
+                    <div class="tabButton editor" onclick="tabFunction(event, `editor`, `optionText`)">Text</div>
+                    <div class="tabButton editor" onclick="tabFunction(event, `editor`, `optionArt`)">Art</div>
+                    <div class="tabButton editor" onclick="tabFunction(event, `editor`, `optionInfo`)">Collector</div>
+                    <div class="tabButton editor" onclick="tabFunction(event, `editor`, `optionSet`)">Set</div>
+                    <div class="tabButton editor" onclick="tabFunction(event, `editor`, `optionWatermark`)">Watermark</div>
+                </div>
+                <div class="bar"></div>
+				<div class="tabContent editor displayed" id="optionFrame">
 					<div class="imageGrid">
 						<div class="autoGrid">
 							<div class="tooltip"><select class="select" id="inputImageType" onchange="hideShowColors()"></select><span class="tooltiptext">Select the part of the card frame</span></div>
@@ -36,23 +42,15 @@
 						<div class="tooltip"><select class="select" id="inputImageTypeOpacity" onchange="loadOpacityValue()"></select><span class="tooltiptext">Select the part of the card frame</span></div>
 						<div class="tooltip"><input type="number" class="input number" id="inputOpacityValue" min="0" max="100" oninput="opacityValueUpdated()"><span class="tooltiptext">Enter the opacity for the selected part of the frame</span></div>
 					</div>
-					<div class="bar"></div>
 				</div>
-				<div>
-					<div>
-						Text
-					</div>
+				<div class="tabContent editor" id="optionText">
                     <div id="inputWhichTextTabs" class="tab tooltip">
                         <span class="tooltiptext">Select the text you want to edit</span>
                     </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>
-				<div>
-					<div>
-						Art
-					</div>
+				<div class="tabContent editor" id="optionArt">
 					<div class="autoGrid">
 						<div>
 							<div class="tooltip"><input type="file" class="input file" accept="image/*" onchange="uploadImage(event, cardArt)" placeholder="Via File Upload"><span class="tooltiptext">Upload an image for the card art</span></div>
@@ -67,12 +65,8 @@
 							<div class="tooltip"><input type="number" class="input number" value="100" step="0.1" min="0" id="inputCardArtZoom" oninput="updateCardCanvas()"><span class="tooltiptext">Art zoom level</span></div>
 						</div>
 					</div>
-					<div class="bar"></div>
 				</div>
-				<div>
-					<div>
-						Collector's/Legal Information
-					</div>
+				<div class="tabContent editor" id="optionInfo">
 					<div class="autoGrid">
 						<div class="tooltip"><input type="text" class="input text" placeholder="Number" id="inputInfoNumber" oninput="updateBottomInfoCanvas()" value=""><span class="tooltiptext">Card Number</span></div>
 						<div class="tooltip"><input type="text" class="input text" placeholder="Rarity" id="inputInfoRarity" oninput="updateBottomInfoCanvas()" value="P"><span class="tooltiptext">Rarity</span></div>
@@ -80,12 +74,8 @@
 						<div class="tooltip"><input type="text" class="input text" placeholder="Language" id="inputInfoLanguage" oninput="updateBottomInfoCanvas()" value="EN"><span class="tooltiptext">Language</span></div>
 						<div class="tooltip"><input type="text" class="input text" placeholder="Artist's Name" id="inputInfoArtist" oninput="updateBottomInfoCanvas()" value=""><span class="tooltiptext">Artist's Name<br>(necessary)</span></div>
 					</div>
-					<div class="bar"></div>
 				</div>
-				<div>
-					<div>
-						Set Symbol
-					</div>
+				<div class="tabContent editor" id="optionSet">
 					<div class="autoGrid">
 						<div class="tooltip"><input type="file" class="input file" accept="image/*" onchange="uploadImage(event, setSymbol)" placeholder="Via File Upload"><span class="tooltiptext">Upload an image for the set symbol</span></div>
 						<div class="tooltip"><input type="text" class="input text" placeholder="Via URL" onchange="whiteToTransparent(setSymbol, 'https://cors-anywhere.herokuapp.com/' + this.value)"><span class="tooltiptext">Enter a URL for the set symbol</span></div>
@@ -93,12 +83,8 @@
 						<div class="tooltip"><input type="text" class="input text" id="inputSetRarity" placeholder="Rarity" onchange="whiteToTransparent(setSymbol, 'https://cors-anywhere.herokuapp.com/http://gatherer.wizards.com/Handlers/Image.ashx?type=symbol&set=' + document.getElementById('inputSetCode').value + '&size=large&rarity=' + this.value)"><span class="tooltiptext">C, U, R, M, or S<br>(Not every set has every rarity)</span></div>
 						<div class="tooltip"><button class="button" onclick="randomSet()">Random</button><span class="tooltiptext">Use a random set symbol and rarity</span></div>
 					</div>
-					<div class="bar"></div>
 				</div>
-				<div>
-					<div>
-						Watermark
-					</div>
+				<div class="tabContent editor" id="optionWatermark">
 					<div class="autoGrid">
 						<div class="tooltip"><input type="file" class="input file" accept="image/*" onchange="uploadImage(event, watermark)" placeholder="Via File Upload"><span class="tooltiptext">Upload an image for the watermark</span></div>
 						<div class="tooltip"><input type="text" class="input text" placeholder="Via URL" onchange="whiteToTransparent(watermark, 'https://cors-anywhere.herokuapp.com/' + this.value)"><span class="tooltiptext">Enter a URL for the watermark</span></div>
@@ -126,10 +112,10 @@
 							<option value="#cfc8be">Artifact/Colorless</option>
 						</select><span class="tooltiptext">Select the secondary watermark color</span></div>
 					</div>
-					<div class="bar"></div>
 				</div>
+                <div class="bar"></div>
 				<div>
-					<div>
+					<div class="download">
 						<a onclick="downloadCardImage(this)" id="downloadCardImage" href="" target="_blank" download="card.png">Download</a>
 					</div>
 				</div>