diff --git a/data/images/m15/REFERENCEm15FrameW.png b/data/images/m15/REFERENCEm15FrameW.png
new file mode 100644
index 00000000..295988b7
Binary files /dev/null and b/data/images/m15/REFERENCEm15FrameW.png differ
diff --git a/data/images/m15/m15FrameA.png b/data/images/m15/m15FrameA.png
new file mode 100644
index 00000000..a99132b5
Binary files /dev/null and b/data/images/m15/m15FrameA.png differ
diff --git a/data/images/m15/m15FrameANyx.png b/data/images/m15/m15FrameANyx.png
new file mode 100644
index 00000000..22889320
Binary files /dev/null and b/data/images/m15/m15FrameANyx.png differ
diff --git a/data/images/m15/m15FrameB.png b/data/images/m15/m15FrameB.png
index c884eb5a..5a323ea3 100644
Binary files a/data/images/m15/m15FrameB.png and b/data/images/m15/m15FrameB.png differ
diff --git a/data/images/m15/m15FrameBNyx.png b/data/images/m15/m15FrameBNyx.png
new file mode 100644
index 00000000..9f7b165b
Binary files /dev/null and b/data/images/m15/m15FrameBNyx.png differ
diff --git a/data/images/m15/m15FrameG.png b/data/images/m15/m15FrameG.png
index e2c06c48..9d2f6cee 100644
Binary files a/data/images/m15/m15FrameG.png and b/data/images/m15/m15FrameG.png differ
diff --git a/data/images/m15/m15FrameGNyx.png b/data/images/m15/m15FrameGNyx.png
new file mode 100644
index 00000000..5fd2287c
Binary files /dev/null and b/data/images/m15/m15FrameGNyx.png differ
diff --git a/data/images/m15/m15FrameL.png b/data/images/m15/m15FrameL.png
new file mode 100644
index 00000000..231b97e1
Binary files /dev/null and b/data/images/m15/m15FrameL.png differ
diff --git a/data/images/m15/m15FrameM.png b/data/images/m15/m15FrameM.png
new file mode 100644
index 00000000..6e90db3e
Binary files /dev/null and b/data/images/m15/m15FrameM.png differ
diff --git a/data/images/m15/m15FrameMNyx.png b/data/images/m15/m15FrameMNyx.png
new file mode 100644
index 00000000..c973eb59
Binary files /dev/null and b/data/images/m15/m15FrameMNyx.png differ
diff --git a/data/images/m15/m15FrameR.png b/data/images/m15/m15FrameR.png
index 1d3350bc..5287e26f 100644
Binary files a/data/images/m15/m15FrameR.png and b/data/images/m15/m15FrameR.png differ
diff --git a/data/images/m15/m15FrameRNyx.png b/data/images/m15/m15FrameRNyx.png
new file mode 100644
index 00000000..62f0a67f
Binary files /dev/null and b/data/images/m15/m15FrameRNyx.png differ
diff --git a/data/images/m15/m15FrameU.png b/data/images/m15/m15FrameU.png
index 97ad5bf5..fa820790 100644
Binary files a/data/images/m15/m15FrameU.png and b/data/images/m15/m15FrameU.png differ
diff --git a/data/images/m15/m15FrameUNyx.png b/data/images/m15/m15FrameUNyx.png
new file mode 100644
index 00000000..54b0c60d
Binary files /dev/null and b/data/images/m15/m15FrameUNyx.png differ
diff --git a/data/images/m15/m15FrameV.png b/data/images/m15/m15FrameV.png
new file mode 100644
index 00000000..8768ce0b
Binary files /dev/null and b/data/images/m15/m15FrameV.png differ
diff --git a/data/images/m15/m15FrameW.png b/data/images/m15/m15FrameW.png
index 1fe36da3..95cc60f9 100644
Binary files a/data/images/m15/m15FrameW.png and b/data/images/m15/m15FrameW.png differ
diff --git a/data/images/m15/m15FrameWNyx.png b/data/images/m15/m15FrameWNyx.png
new file mode 100644
index 00000000..165d6165
Binary files /dev/null and b/data/images/m15/m15FrameWNyx.png differ
diff --git a/data/scripts/main.js b/data/scripts/main.js
index 958bb44d..856edce5 100644
--- a/data/scripts/main.js
+++ b/data/scripts/main.js
@@ -16,6 +16,7 @@ var cardTextList = new Array()
 var manaSymbolCodeList = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "w", "u", "b", "r", "g", "2w", "2u", "2b", "2r", "2g", "pw", "pu", "pb", "pr", "pg", "wu", "wb", "ub", "ur", "br", "bg", "rg", "rw", "gw", "gu", "x", "s", "c", "t","untap", "e", "y", "z", "1/2", "inf", "chaos", "plane", "l+", "l-", "l0", "oldtap", "artistbrush", "bar", "whiteBrush", "blackBrush"];
 var manaSymbolImageList = [];
 manaSymbolCodeList.forEach((item, index) => {manaSymbolImageList[index] = new Image(); manaSymbolImageList[index].src = 'data/images/manaSymbols/' + index + '.png'})
+date = new Date()
 
 function newCanvas(name) {
 	window[name + 'Canvas'] = document.createElement('canvas')
@@ -263,6 +264,14 @@ function loadMaskImages(listOfMasks) {
 function loadFrameImages(listOfFrames) {
 	for (var i = 0; i < listOfFrames.length; i++) {
 		frameImageList.push(new frameImage(...listOfFrames[i], frameImageList.length))
+		if (i == 0) {
+			frameObjectToAdd = frameImageList[frameImageList.length - 1]
+			var frameToInsert = cardMasterList.push(new cardImage(frameObjectToAdd.name, frameObjectToAdd.image.src, frameObjectToAdd.x, frameObjectToAdd.y, frameObjectToAdd.width, frameObjectToAdd.height, 1, [], false))
+			cardMaster.insertBefore(cardMasterList[frameToInsert - 1].cardMasterElement(), cardMaster.children[1])
+			frameObjectToAdd.image.onload = function() {
+				drawCardObjects()
+			}
+		}
 	}
 }
 
@@ -320,6 +329,9 @@ function cardTextEdited() {
 	selectedTextObject.width = document.getElementById('textEditorWidth').value / cardWidth
 	selectedTextObject.height = document.getElementById('textEditorHeight').value / cardHeight
 	drawCardText()
+	if (selectedTextObject.name == 'Power/Toughness') {
+		bottomInfoUpdated()
+	}
 }
 function drawCardText() {
 	textContext.clearRect(0, 0, cardWidth, cardHeight)
@@ -328,7 +340,7 @@ function drawCardText() {
 function writeText(textObjectList, targetContext) {
 	var textCanvasBuffer = 100
 	var rewritingLine = false
-	var textSize
+	var textSize, textFont
 	outerloop:
 	for (var i = 0; i < textObjectList.length; i++) {
 		if (!rewritingLine) {
@@ -343,11 +355,12 @@ function writeText(textObjectList, targetContext) {
 		textParagraphCanvas.height = scaleY(textObjectList[i].height) + 2 * textCanvasBuffer
 		textLineContext.clearRect(0, 0, textLineCanvas.width, textLineCanvas.height)
 		textParagraphContext.clearRect(0, 0, textParagraphCanvas.width, textParagraphCanvas.height)
-		var outline, shadow = 0, oneLine = false, outlineThickness = 2, textAlign = 'left', finishLine = false, paragraphSpace = 0
+		var outline, shadow = 0, oneLine = false, outlineThickness = 2, textAlign = 'left', finishLine = false, paragraphSpace = 0, permanentLineShift = 0, temporaryLineShift = 0
 		textObjectList[i].otherParameters.forEach(item => eval(item))
 		textLineContext.strokeStyle = outline
 		textLineContext.lineWidth = outlineThickness
-		textLineContext.font = textSize + 'px ' + textObjectList[i].font
+		textFont = textObjectList[i].font
+		textLineContext.font = textSize + 'px ' + textFont
 		textLineContext.fillStyle = textObjectList[i].fontColor
 		var textX = textCanvasBuffer
 		var textY = 0
@@ -362,7 +375,7 @@ function writeText(textObjectList, targetContext) {
 					var possibleCodeLower = splitText[n].substr(1, splitText[n].length - 2).toLowerCase()
 					if (possibleCodeLower == 'line' && !oneLine) {
 						finishLine = true
-						paragraphSpace = textSize * 0.35
+						paragraphSpace += textSize * 0.35
 					} else if (possibleCodeLower == 'linenospace' && !oneLine) {
 						finishLine = true
 					} else if ((possibleCodeLower == 'bar' || possibleCodeLower == 'flavor') && !oneLine) {
@@ -370,23 +383,37 @@ function writeText(textObjectList, targetContext) {
 						var barWidth = scaleX(textObjectList[i].width) * 0.95
 						var barHeight = scaleY(0.001)
 						textLineContext.drawImage(manaSymbolImageList[63], textCanvasBuffer + (scaleX(textObjectList[i].width) - barWidth) / 2, textSize * 1.6 + textCanvasBuffer, barWidth, barHeight)
-						paragraphSpace = textSize * 0.8
+						paragraphSpace += textSize * 0.8
 						if (possibleCodeLower == 'flavor') {
-							textLineContext.font = 'italic ' + (textSize * 0.92) + 'px ' + textObjectList[i].font
+							textLineContext.font = 'italic ' + (textSize * 0.92) + 'px ' + textFont
 						}
 					} else if (possibleCodeLower == 'i') {
-						textLineContext.font = 'italic ' + textSize + 'px ' + textObjectList[i].font
+						textLineContext.font = 'italic ' + textSize + 'px ' + textFont
 					} else if (possibleCodeLower == '/i') {
-						textLineContext.font = textSize + 'px ' + textObjectList[i].font
+						textLineContext.font = textSize + 'px ' + textFont
 					} else if (possibleCodeLower.includes('fontsize')) {
 						textSize += parseInt(possibleCodeLower.slice(8, possibleCodeLower.length))
-						textLineContext.font = textSize + 'px ' + textObjectList[i].font
+						textLineContext.font = textSize + 'px ' + textFont
 					} else if (possibleCodeLower == 'left') {
 						textAlign = 'left'
 					} else if (possibleCodeLower == 'center') {
 						textAlign = 'center'
 					} else if (possibleCodeLower == 'right') {
 						textAlign = 'right'
+					} else if (possibleCodeLower.includes('right')) {
+						textX += parseInt(possibleCodeLower.replace('right', ''))
+						currentLineWidth += parseInt(possibleCodeLower.replace('right', ''))
+					} else if (possibleCodeLower.includes('left')) {
+						textX -= parseInt(possibleCodeLower.replace('left', ''))
+						currentLineWidth -= parseInt(possibleCodeLower.replace('left', ''))
+					} else if (possibleCodeLower.includes('up')) {
+						finishLine = true
+						paragraphSpace -= parseInt(possibleCodeLower.replace('up', '')) + textSize
+						temporaryLineShift += currentLineWidth
+					} else if (possibleCodeLower.includes('down')) {
+						finishLine = true
+						paragraphSpace += parseInt(possibleCodeLower.replace('down', '')) - textSize
+						temporaryLineShift += currentLineWidth
 					} else if (possibleCodeLower.includes('outline:')) {
 	                    outline = true;
 	                    textLineContext.strokeStyle = possibleCodeLower.replace('outline:', '').split(',')[0];
@@ -398,8 +425,11 @@ function writeText(textObjectList, targetContext) {
 	                } else if (possibleCodeLower == 'artistbrush') {
 	                	var artistBrushWidth = textSize * 1.2
 						textLineContext.drawImage(manaSymbolImageList[62], textX, textCanvasBuffer + textSize - artistBrushWidth * 0.58, artistBrushWidth, artistBrushWidth * 13 / 21)
-						currentLineX += artistBrushWidth * 1.1
-	                } else if (manaSymbolCodeList.includes(possibleCodeLower.split('/').join(''))) {
+						textX += artistBrushWidth * 1.1
+	                } else if (possibleCodeLower.includes('font')) {
+						textFont = possibleCodeLower.replace('font', '')
+						textLineContext.font = textSize + 'px ' + textFont
+					} else if (manaSymbolCodeList.includes(possibleCodeLower.split('/').join(''))) {
 						//THIS HAS TO BE THE LAST ONE
 						var manaSymbolDiameter = textSize * 0.77
 						textLineContext.drawImage(manaSymbolImageList[manaSymbolCodeList.indexOf(possibleCodeLower.split('/').join(''))], textX, textCanvasBuffer + textSize - manaSymbolDiameter * 0.95, manaSymbolDiameter, manaSymbolDiameter)
@@ -428,11 +458,15 @@ function writeText(textObjectList, targetContext) {
 						textParagraphContext.drawImage(textLineCanvas, 0 + textAlignShift, textY, textLineCanvas.width, textLineCanvas.height)
 						if (n != splitText.length - 1) {
 							textLineContext.clearRect(0, 0, textLineCanvas.width, textLineCanvas.height)
-							textX = textCanvasBuffer
-							currentLineWidth = 0
+							textX = textCanvasBuffer + permanentLineShift + temporaryLineShift
+							currentLineWidth = 0 + permanentLineShift + temporaryLineShift
 							textY += textSize + paragraphSpace
 							paragraphSpace = 0
+							temporaryLineShift = 0
 							finishLine = false
+							if (wordToWrite == " ") {
+								continue innerloop
+							}
 						}
 					}
 					if (shadow > 0) {
@@ -503,11 +537,30 @@ function inputCardArtNameNumber(cardArtNameNumberInput) {
 }
 
 function initialize() {
+	//Card stuff
 	cardMasterList.push(new cardPlaceholder('Card Art Placeholder', cardArt))
 	cardMasterList.push(new cardPlaceholder('Text Placeholder', window['textCanvas']))
 	cardMaster.insertBefore(cardMasterList[0].cardMasterElement(), cardMaster.children[0])
 	cardMaster.insertBefore(cardMasterList[1].cardMasterElement(), cardMaster.children[0])
-	drawCardObjects()
+	document.getElementById('inputInfoNumber').value = date.getFullYear()
+	setTimeout(bottomInfoUpdated, 500)
+	//CSS & HTML stuff
+	window.layerElements = document.querySelectorAll('.layer')
+	window.addEventListener('resize', windowResized)
+	window.addEventListener('scroll', windowScrolled)
+	windowResized()
+}
+
+function windowResized() {
+	window.windowHeight = window.innerHeight
+}
+function windowScrolled() {
+	for (var i = 0; i < layerElements.length; i++) {
+		var positionFromTop = (layerElements[i].getBoundingClientRect().top + layerElements[i].getBoundingClientRect().bottom) / 2
+		if (positionFromTop - windowHeight <= 0) {
+			layerElements[i].classList.add('revealedLayer')
+		}
+	}
 }
 
 function bottomInfoUpdated() {
@@ -529,9 +582,12 @@ function addUploadedFrameImage(imageSource) {
 
 function manaCostUpdated() {
 	manaCostContext.clearRect(0, 0, cardWidth, cardHeight)
-	var manaCostList = document.getElementById('inputManaCost').value.toLowerCase().replace(/{/, ' ').replace(/}/, ' ').split('/').join('').split(' ')
+	var manaCostList = document.getElementById('inputManaCost').value.toLowerCase().replace(/{/g, ' ').replace(/}/g, ' ').split('/').join('').split(' ')
 	var manaSymbolIndex = -1
 	manaCostCanvas.fillStyle = 'black'
+	if (manaCostDirection == 'reverse') {
+		manaCostList.reverse()
+	}
 	for (var i = 0; i < manaCostList.length; i++) {
 		if (manaSymbolCodeList.includes(manaCostList[i])) {
 			manaSymbolIndex += 1
@@ -652,6 +708,8 @@ function inputCardNameNumberTextImport(index) {
     document.getElementById('inputSetRarity').value = beforeAfter(importCardTextResponse, '"rarity":"', '",')[0]
     setSymbol.src = 'https://cors-anywhere.herokuapp.com/http://gatherer.wizards.com/Handlers/Image.ashx?type=symbol&set=' + document.getElementById('inputSetCode').value + '&size=large&rarity=' + document.getElementById('inputSetRarity').value
     inputCardArtName(beforeAfter(importCardTextResponse, '"name":"', '",'))
+    manaCostUpdated()
+    drawCardText()
 }
 function importText(text, target) {
     for (var i = 0; i < cardTextList.length; i++) {
diff --git a/data/scripts/versionM15.js b/data/scripts/versionM15.js
index ea6768ab..19d5f90c 100644
--- a/data/scripts/versionM15.js
+++ b/data/scripts/versionM15.js
@@ -3,36 +3,51 @@ var versionM15ImageList = [
 ['Blue Frame', 'data/images/m15/m15FrameU.png', 0, 0, 1, 1, ['Full', 'Pinline (m15)']],
 ['Black Frame', 'data/images/m15/m15FrameB.png', 0, 0, 1, 1, ['Full', 'Pinline (m15)']],
 ['Red Frame', 'data/images/m15/m15FrameR.png', 0, 0, 1, 1, ['Full', 'Pinline (m15)']],
-['Green Frame', 'data/images/m15/m15FrameG.png', 0, 0, 1, 1, ['Full', 'Pinline (m15)']]
+['Green Frame', 'data/images/m15/m15FrameG.png', 0, 0, 1, 1, ['Full', 'Pinline (m15)']],
+['Multicolored Frame', 'data/images/m15/m15FrameM.png', 0, 0, 1, 1, ['Full', 'Pinline (m15)']],
+['Artifact Frame', 'data/images/m15/m15FrameA.png', 0, 0, 1, 1, ['Full', 'Pinline (m15)']],
+['Vehicle Frame', 'data/images/m15/m15FrameV.png', 0, 0, 1, 1, ['Full', 'Pinline (m15)']],
+['Land Frame', 'data/images/m15/m15FrameL.png', 0, 0, 1, 1, ['Full', 'Pinline (m15)']],
+['White Nyx Nyx Frame', 'data/images/m15/m15FrameWNyx.png', 0, 0, 1, 1, ['Full', 'Pinline (m15)']],
+['Blue Nyx Frame', 'data/images/m15/m15FrameUNyx.png', 0, 0, 1, 1, ['Full', 'Pinline (m15)']],
+['Black Nyx Frame', 'data/images/m15/m15FrameBNyx.png', 0, 0, 1, 1, ['Full', 'Pinline (m15)']],
+['Red Nyx Frame', 'data/images/m15/m15FrameRNyx.png', 0, 0, 1, 1, ['Full', 'Pinline (m15)']],
+['Green Nyx Frame', 'data/images/m15/m15FrameGNyx.png', 0, 0, 1, 1, ['Full', 'Pinline (m15)']],
+['Multicolored Nyx Frame', 'data/images/m15/m15FrameMNyx.png', 0, 0, 1, 1, ['Full', 'Pinline (m15)']],
+['Artifact Nyx Frame', 'data/images/m15/m15FrameANyx.png', 0, 0, 1, 1, ['Full', 'Pinline (m15)']]
 ]
+
 var versionM15MaskList = [['Right Half', 'data/images/maskRightHalf.png'], ['Pinline (m15)', 'data/images/m15/m15MaskPinline.png'], ['Full', 'data/images/maskFull.png']]
+
 if (!loadedVersions.includes('m15')) {
 	loadedVersions.push("m15")
 	loadMaskImages(versionM15MaskList)
 	loadFrameImages(versionM15ImageList)
 }
+
 loadTextOptions([
-new cardText('Card Title', 'Awesome Card Tho!!!', 0.1, 0.1, 0.8, 0.8, 'belerenb', 0.0177, 'black'),
-new cardText('Card Type', '', 0.1, 0.1, 0.8, 0.8, 'belerenb', 0.0177, 'black'),
-new cardText('Rules Text', '', 0.1, 0.1, 0.8, 0.8, 'mplantin', 0.0177, 'black'),
-new cardText('Power/Toughness', '', 0.1, 0.1, 0.8, 0.8, 'mplantin', 0.0177, 'black')
+new cardText('Card Title', '', 126/1500, 188/2100, 1248/1500, 80/2100, 'belerenb', 80/2100, 'black', ['oneLine=true']),
+new cardText('Card Type', '', 126/1500, 1263/2100, 1248/1500, 68/2100, 'belerenb', 68/2100, 'black', ['oneLine=true']),
+new cardText('Rules Text', '', 135/1500, 1372/2100, 1230/1500, 624/2100, 'mplantin', 74/2100, 'black'),
+new cardText('Power/Toughness', '', 0.1, 0.1, 0.8, 0.8, 'mplantin', 0.0177, 'black', ['oneLine=true'])
 ])
 
-artX = 0
-artY = 0
-artWidth = 1500
-artHeight = 500
+artX = scaleX(115 / 1500)
+artY = scaleY(237 / 2100)
+artWidth = scaleX(1154 / 1500)
+artHeight = scaleY(928 / 2100)
 bottomInfoFunction = 'bottomInfoM15'
 
-manaCostXPath = 'scaleX(0.05) * manaSymbolIndex'
-manaCostYPath = 'scaleY(0.1)'
-manaCostDiameter = 'scaleX(0.05)'
-manaCostShadowOffset = '[scaleX(-0.01), scaleY(0.01)]'
+manaCostXPath = '1316 - 78 * manaSymbolIndex'
+manaCostYPath = '121'
+manaCostDiameter = '70'
+manaCostShadowOffset = '[-2, 6]'
+manaCostDirection = 'reverse'
 
-setSymbolX = [scaleX(0.8), 'right']
-setSymbolY = [scaleY(0.5), 'left']
-setSymbolWidth = scaleX(0.1)
-setSymbolHeight = scaleY(0.1)
+setSymbolX = [scaleX(1382/1500), 'right']
+setSymbolY = [scaleY(1200/2100), 'left']
+setSymbolWidth = scaleX(180/1500)
+setSymbolHeight = scaleY(80/2100)
 
 watermarkX = scaleX(0.5)
 watermarkY = scaleY(0.5)
@@ -41,9 +56,22 @@ watermarkHeight = scaleY(1)
 
 function bottomInfoM15() {
 	bottomInfoContext.clearRect(0, 0, cardWidth, cardHeight)
+	var ptBoxShift = 0
+	for (var i = 0; i < cardTextList.length; i++) {
+		if (cardTextList[i].name == 'Power/Toughness' && cardTextList[i].text != '') {
+			ptBoxShift = 36/2100
+		} else {
+			// console.log(cardTextList[i].name, cardTextList[i].text)
+		}
+	}
 	writeText(
 		[
-			{text: 'EEEEEEEE', x: 0, y: 0.05, width: 0.8, height: 0.05, font: 'mplantin', fontSize: 0.05, fontColor: 'black', otherParameters: ['oneLine=true']},
+			{text: document.getElementById('inputInfoNumber').value, x: 97/1500, y: 1990/2100, width: 1306/1500, height: 36/2100, font: 'gothammedium', fontSize: 36/2100, fontColor: 'white', otherParameters: ['oneLine=true']},
+			{text: document.getElementById('inputInfoSet').value + '\u2605' + document.getElementById('inputInfoLanguage').value + ' {artistbrush}{up' + scaleY(36/2100) + '}' + document.getElementById('inputInfoRarity').value + '  {down' + scaleY(72/2100) + '}{up' + scaleY(36/2100) + '}{fontbelerenbsc}' + document.getElementById('inputInfoArtist').value, x: 97/1500, y: 2026/2100, width: 1306/1500, height: 36/2100, font: 'gothammedium', fontSize: 36/2100, fontColor: 'white', otherParameters: ['oneLine=true']},
+			{text: '{right}\u2122 & \u00a9 ' + date.getFullYear() + ' Wizards of the Coast', x: 97/1500, y: 1990/2100 + ptBoxShift, width: 1306/1500, height: 35/2100, font: 'mplantin', fontSize: 35/2100, fontColor: 'white', otherParameters: ['oneLine=true']},
+			{text: '*Not for Sale*', x: 97/1500, y: 2056/2100, width: 1306/1500, height: 30/2100, font: 'gothammedium', fontSize: 30/2100, fontColor: 'white', otherParameters: ['oneLine=true']},
+			{text: '{right}CardConjurer.com', x: 97/1500, y: 2020/2100 + ptBoxShift, width: 1306/1500, height: 30/2100, font: 'mplantin', fontSize: 30/2100, fontColor: 'white', otherParameters: ['oneLine=true']}
 		], bottomInfoContext)
-	// document.body.appendChild(bottomInfoCanvas)
-}
\ No newline at end of file
+}
+
+bottomInfoUpdated()
\ No newline at end of file
diff --git a/data/site/images/samples/sample1.png b/data/site/images/samples/sample1.png
new file mode 100644
index 00000000..6b558a50
Binary files /dev/null and b/data/site/images/samples/sample1.png differ
diff --git a/data/site/images/samples/sample2.png b/data/site/images/samples/sample2.png
new file mode 100644
index 00000000..549d9af8
Binary files /dev/null and b/data/site/images/samples/sample2.png differ
diff --git a/data/site/images/samples/sample3.png b/data/site/images/samples/sample3.png
new file mode 100644
index 00000000..3f8db0f9
Binary files /dev/null and b/data/site/images/samples/sample3.png differ
diff --git a/data/site/images/samples/sample4.png b/data/site/images/samples/sample4.png
new file mode 100644
index 00000000..10ad00c8
Binary files /dev/null and b/data/site/images/samples/sample4.png differ
diff --git a/data/site/images/samples/sample5.png b/data/site/images/samples/sample5.png
new file mode 100644
index 00000000..473fd069
Binary files /dev/null and b/data/site/images/samples/sample5.png differ
diff --git a/data/site/styles.css b/data/site/styles.css
index e1e3df8a..b13bdc91 100644
--- a/data/site/styles.css
+++ b/data/site/styles.css
@@ -37,15 +37,31 @@
 }
 
 :root {
-	--light-color: #eee;
+	--background-color: #fafafa;
+	--background-color-contrast: #222;
+	--interactable-color: #aaa;
+	--interactable-selected-color: #888;
+	--input-color: #ddd;
+	--font-color: #000;
+	--font-color-contrast: #eee;
 }
 
 html {
 	user-select: none;
 	font-size: 20pt;
+	background-color: var(--background-color);
+	color: var(--font-color);
 }
-body {
-	margin: 0px;
+html, body {
+	margin: 0;
+	overflow-x: hidden
+}
+
+.title {
+	text-align: center;
+	color: var(--font-color);
+	font: 2.5rem 'belerenbsc';
+	margin-top: 1rem;
 }
 
 .cardMaster {
@@ -57,7 +73,7 @@ body {
     display: grid;
     grid-template-columns: 2rem auto 2rem;
     align-items: center;
-    background: gray;
+    background-color: var(--input-color);
 }
 .cardMasterElement > .handle {
     cursor: move;
@@ -65,14 +81,14 @@ body {
     text-align: center;
 }
 .cardMasterElementMoving {
-	background-color: #555;
+	background-color: var(--interactable-selected-color);
 }
 .cardMasterElement > .delete {
 	cursor: pointer;
     text-align: center;
 }
 .cardMasterElement.cardMasterElementSelected {
-	background: green;
+	background-color: var(--interactable-color);
 }
 
 .splitGrid {
@@ -84,6 +100,7 @@ body {
 	display: grid;
 	grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
 	grid-auto-rows: min-content;
+	grid-gap: 0.1rem;
 }
 .frameGrid {
 	display: grid;
@@ -117,10 +134,10 @@ img {
 	max-height: 1.5rem;
 }
 #framePicker > div.frameOptionSelected, #maskPicker > div.maskOptionSelected {
-	background-color: green;
+	background-color: var(--interactable-selected-color);
 }
 #maskPicker > div, #framePicker > div {
-	background-color: gray;
+	background-color: var(--interactable-color);
 }
 #maskPicker > div {
 	padding: 0.5rem;
@@ -136,15 +153,20 @@ img {
 }
 #textPicker > div {
 	font: 1rem belerenbsc;
-	background: gray;
+	background-color: var(--interactable-color);
 	padding: 0.5rem;
 }
 #textPicker > div.selectedText {
-	background: green;
+	background-color: var(--interactable-selected-color);
 }
 
 canvas {
-	background: gray;
+	/*background-color: var(--interactable-color);*/
+}
+textarea {
+	resize: vertical;
+	min-height: 4rem;
+	max-height: 12rem;
 }
 
 .hidden {
@@ -157,9 +179,7 @@ canvas {
 	display: grid;
 	grid-template-columns: 750px auto;
 	grid-gap: 1rem;
-	background: #eeeeee;
 	padding: 1rem;
-	margin-bottom: 12rem;
 }
 
 .tabPicker {
@@ -173,13 +193,112 @@ canvas {
 	font: 1rem belerenbsc;
 	text-align: center;
 	padding: 0.5rem;
-	background: gray;
+	background-color: var(--interactable-color);
 }
 .tabPicker > div.tabOptionSelected {
-	background: green;
+	background-color: var(--interactable-selected-color);
 }
 
 input, textarea, button, select {
 	font: 0.8rem mplantin;
 	width: 100%;
+	background-color: var(--input-color);
+	border: none;
+	outline: none;
+	padding: 0.2rem;
+	margin-top: 0.1rem;
+}
+
+@keyframes fade-in {
+	from {opacity: 0;}
+	to {opacity: 1;}
+}
+@keyframes slide-from-left {
+	from {position: relative; left: -100vw;}
+	to {position: relative; left: 0px;}
+}
+@keyframes slide-from-right {
+	from {position: relative; left: 100vw;}
+	to {position: relative; left: 0px;}
+}
+.layer {
+	padding: 5rem;
+}
+.layerTitle {
+	/*color: inherit;*/
+	text-align: center;
+	font: 2rem 'belerenbsc';
+}
+.darkLayer {
+	background-color: var(--background-color-contrast);
+	color: var(--font-color-contrast);
+}
+.layer > div {
+	opacity: 0;
+}
+.layer.revealedLayer > div {
+	opacity: 1;
+}
+.layer.revealedLayer.fadeIn > div {
+	animation: fade-in 2s;
+}
+.mainGrid.fadeIn {
+	animation: fade-in 0.5s;
+}
+.layer.revealedLayer.slideFromLeft > div {
+	animation: slide-from-left 2s;
+}
+.layer.revealedLayer.slideFromRight > div {
+	animation: slide-from-right 2s;
+}
+
+.footer {
+	padding: 2rem;
+	background-color: var(--background-color-contrast);
+	color: var(--font-color-contrast);
+	font: 0.6rem 'open sans';
+	display: grid;
+	grid-template-columns: auto auto auto;
+}
+
+.fiveSampleCards {
+	display: grid;
+	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+	margin: 2rem 0;
+}
+.fiveSampleCards > div > img {
+	position: relative;
+	width: 100%;
+}
+.layer.revealedLayer > div > div > div > .sample1 {
+	animation: sample-one 2s;
+	transform: rotate(-10deg) translate(16%, 15%);
+}
+.layer.revealedLayer > div > div > div > .sample2 {
+	animation: sample-two 2s;
+	transform: rotate(-5deg) translate(10%, 4%);
+}
+.layer.revealedLayer > div > div > div > .sample4 {
+	animation: sample-four 2s;
+	transform: rotate(5deg) translate(-10%, 4%);
+}
+.layer.revealedLayer > div > div > div > .sample5 {
+	animation: sample-five 2s;
+	transform: rotate(10deg) translate(-16%, 15%);
+}
+@keyframes sample-one {
+	from {transform: rotate(0deg) translate(0, 0); position: relative; left: 200%;}
+	to {transform: rotate(-10deg) translate(16%, 15%); position: relative; left: 0;}
+}
+@keyframes sample-two {
+	from {transform: rotate(0deg) translate(0, 0); position: relative; left: 100%;}
+	to {transform: rotate(-5deg) translate(10%, 4%); position: relative; left: 0;}
+}
+@keyframes sample-four {
+	from {transform: rotate(0deg) translate(0, 0); position: relative; left: -100%;}
+	to {transform: rotate(5deg) translate(-10%, 4%); position: relative; left: 0;}
+}
+@keyframes sample-five {
+	from {transform: rotate(0deg) translate(0, 0); position: relative; left: -200%;}
+	to {transform: rotate(10deg) translate(-16%, 15%); position: relative; left: 0;}
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index c4547b51..4653d108 100644
--- a/index.html
+++ b/index.html
@@ -5,9 +5,10 @@
 	<link rel="stylesheet" href="data/site/styles.css">
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<div class='title'>Card Conjurer</div>
 </head>
 <body>
-	<div class='mainGrid'>
+	<div class='mainGrid fadeIn'>
 		<canvas id="previewCanvas"></canvas>
 		<div>
 			<div class='tabPicker'>
@@ -130,7 +131,48 @@
 			</div>
 		</div>
 	</div>
+	<div class='layer darkLayer fadeIn'>
+		<div>
+			<div class='layerTitle'>Welcome to Card Conjurer</div>
+			<div class='fiveSampleCards'>
+				<div><img src='data/site/images/samples/sample1.png' alt='loading sample...' class='sample1'></div>
+				<div><img src='data/site/images/samples/sample2.png' alt='loading sample...' class='sample2'></div>
+				<div><img src='data/site/images/samples/sample3.png' alt='loading sample...' class='sample3'></div>
+				<div><img src='data/site/images/samples/sample4.png' alt='loading sample...' class='sample4'></div>
+				<div><img src='data/site/images/samples/sample5.png' alt='loading sample...' class='sample5'></div>
+			</div>
+		</div>
+	</div>
+	<div class='layer fadeIn'>
+		<div>
+			Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Laoreet suspendisse interdum consectetur libero id faucibus nisl tincidunt. Id volutpat lacus laoreet non curabitur. Adipiscing tristique risus nec feugiat in fermentum. Vulputate mi sit amet mauris. Morbi tincidunt augue interdum velit euismod in. Amet mattis vulputate enim nulla aliquet porttitor lacus luctus accumsan. Sed felis eget velit aliquet sagittis. Neque ornare aenean euismod elementum nisi quis eleifend. Nisl nunc mi ipsum faucibus vitae. Mattis nunc sed blandit libero volutpat sed cras ornare. Sed vulputate mi sit amet mauris commodo quis imperdiet massa. Condimentum mattis pellentesque id nibh tortor. Leo in vitae turpis massa. Dignissim cras tincidunt lobortis feugiat vivamus. Massa ultricies mi quis hendrerit dolor magna eget est.
+		</div>
+	</div>
+	<div class='layer darkLayer slideFromRight'>
+		<div>
+			Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vehicula ipsum a arcu cursus vitae. Venenatis tellus in metus vulputate eu. Id diam maecenas ultricies mi. Enim nec dui nunc mattis enim ut tellus elementum. Consectetur libero id faucibus nisl tincidunt eget nullam non. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Morbi leo urna molestie at elementum eu facilisis sed odio. Nulla pharetra diam sit amet nisl suscipit. A erat nam at lectus urna duis. Neque viverra justo nec ultrices.
+		</div>
+	</div>
+	<div class='layer slideFromLeft'>
+		<div>
+			Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vehicula ipsum a arcu cursus vitae. Venenatis tellus in metus vulputate eu. Id diam maecenas ultricies mi. Enim nec dui nunc mattis enim ut tellus elementum. Consectetur libero id faucibus nisl tincidunt eget nullam non. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Morbi leo urna molestie at elementum eu facilisis sed odio. Nulla pharetra diam sit amet nisl suscipit. A erat nam at lectus urna duis. Neque viverra justo nec ultrices.
+		</div>
+	</div>
 </body>
+<footer class='footer'>
+	<div>Card Conjurer by Kyle Burton</div>
+	<div>
+		Navigation<br>
+		Card Creator<br>
+		Life Counter<br>
+		Ask Scryfall
+	</div>
+	<div>
+		Legal<br>
+		Terms of Use<br>
+		Disclaimer
+	</div>
+</footer>
 <script defer src="data/scripts/sortable.js"></script>
 <script defer src="data/scripts/main.js"></script>
 <script defer src="data/scripts/versionM15.js"></script>