diff --git a/css/style.css b/css/style.css
index 2875dfdb..ecd10091 100644
--- a/css/style.css
+++ b/css/style.css
@@ -69,7 +69,7 @@
 html {
 	font-size: 12pt;
 	overflow-x: hidden;
-	background: none;
+	background: #222;
 	color: white;
 }
 body {
@@ -117,6 +117,7 @@ img {
 ::-webkit-scrollbar-thumb {
   background: #888;
   border-radius: 0.25rem;
+  margin: 1px;
 }
 /*Fonts*/
 .title {
@@ -201,7 +202,15 @@ a:hover {
 	text-align: center;
 }
 .layer {
-	padding: 4rem;
+	padding: 2rem;
+}
+.vertical-center {
+	margin: auto;
+}
+@media only screen and (min-width: 750px) {
+	.layer {
+		padding: 4rem;
+	}
 }
 /*Hamburger*/
 .hamburger {
@@ -384,6 +393,25 @@ textarea.input {
 
 
 
+/*Home Page only*/
+.sample-grid {
+	display: grid;
+	grid-gap: 1rem;
+	grid-template-columns: 1fr;
+}
+.sample-grid > img {
+	max-width: 375px;
+	width: 100%;
+	height: auto;
+}
+@media only screen and (min-width: 750px) {
+	.sample-grid {
+		grid-template-columns: 375px auto;
+	}
+	.sample-grid.right {
+		grid-template-columns: auto 375px;
+	}
+}
 
 
 
@@ -587,8 +615,10 @@ textarea.input {
 	background: #333;
 }
 .text-codes {
+	max-width: calc(100vw - 3rem);
 	display: grid;
-	grid-template-columns: 11rem auto;
+	grid-template-columns: auto auto;
+	overflow-x: scroll;
 }
 .text-codes > * {
 	border: 1px solid black;
diff --git a/globalHTML/footer.php b/globalHTML/footer.php
index a213f954..7faaf8df 100644
--- a/globalHTML/footer.php
+++ b/globalHTML/footer.php
@@ -3,6 +3,7 @@
 			<h4>Card Conjurer</h4>
 			<h5><a href='https://twitter.com/ImKyle4815' target='_blank'>Twitter</a></h5>
 			<h5><a href='https://www.patreon.com/KyleBurton' target='_blank'>Patreon</a></h5>
+			<h5><a href='mailto:cardconjurermtg@gmail.com' target='_blank'>Email</a></h5>
 		</div>
 		<div>
 			<h4>Navigation</h4>
diff --git a/img/samples/original/sample1.png b/img/samples/original/sample1.png
new file mode 100644
index 00000000..c9b55a84
Binary files /dev/null and b/img/samples/original/sample1.png differ
diff --git a/img/samples/original/sample2.png b/img/samples/original/sample2.png
new file mode 100644
index 00000000..96e1660b
Binary files /dev/null and b/img/samples/original/sample2.png differ
diff --git a/img/samples/original/sample3.png b/img/samples/original/sample3.png
new file mode 100644
index 00000000..dd77be6a
Binary files /dev/null and b/img/samples/original/sample3.png differ
diff --git a/img/samples/sample1.png b/img/samples/sample1.png
new file mode 100644
index 00000000..d919e423
Binary files /dev/null and b/img/samples/sample1.png differ
diff --git a/img/samples/sample2.png b/img/samples/sample2.png
new file mode 100644
index 00000000..9519b03e
Binary files /dev/null and b/img/samples/sample2.png differ
diff --git a/img/samples/sample3.png b/img/samples/sample3.png
new file mode 100644
index 00000000..d69195fe
Binary files /dev/null and b/img/samples/sample3.png differ
diff --git a/index.php b/index.php
index 2cc277cf..4d908cba 100644
--- a/index.php
+++ b/index.php
@@ -1,9 +1,40 @@
 <?php include('globalHTML/header.php'); ?>
 	<title>Card Conjurer</title>
+	<div class='layer center'></div>
 	<div class='layer center'>
-		<h2>Welcome to Card Conjurer</h2>
+		<h1>Welcome to Card Conjurer</h1>
+		<h4>The custom Magic: The Gathering card creator</h4>
+	</div>
+	<div class='layer center'></div>
+	<div class='layer readable-background center'>
+		<div class='sample-grid'>
+			<img src='/img/samples/sample1.png'>
+			<div class='vertical-center'>
+				<h2 class='padding margin-bottom'>Choose from a Variety of Card Frames</h2>
+				<h4 class='padding margin-bottom'>Card Conjurer offers Expeditions, Inventions, Showcase Frames, and so much more. <a href='/creator/'>Take a look</a>!</h4>
+			</div>
+		</div>
 	</div>
 	<div class='layer center'>
-		<h2>The home page is currently under construction...</h2>
+		<div class='sample-grid right'>
+			<div class='vertical-center'>
+				<h2 class='padding margin-bottom'>Customize to Your Heart's Content</h2>
+				<h4 class='padding margin-bottom'>With Card Conjurer's level of customization, you'll have endless options when designing your dream cards. <a href='/creator/'>Try it out</a>!</h4>
+			</div>
+			<img src='/img/samples/sample2.png'>
+		</div>
+	</div>
+	<div class='layer readable-background center'>
+		<div class='sample-grid'>
+			<img src='/img/samples/sample3.png'>
+			<div class='vertical-center'>
+				<h2 class='padding margin-bottom'>Bling Out Existing Favorites</h2>
+				<h4 class='padding margin-bottom'>Easily import vital information from existing cards, then redesign them. <a href='/creator/'>Go on, do it</a>!</h4>
+			</div>
+		</div>
+	</div>
+	<div class='layer center'>
+		<h2 class='margin-bottom'>Ready?</h2>
+		<a href='/creator/'><h1>Get Started</h1></a>
 	</div>
 <?php include('globalHTML/footer.php'); ?>
\ No newline at end of file
diff --git a/js/creator.js b/js/creator.js
index cffbcf36..f223baac 100644
--- a/js/creator.js
+++ b/js/creator.js
@@ -3,7 +3,7 @@ var params = new URLSearchParams(window.location.search);
 //To save the server from being overloaded? Maybe?
 function fixUri(input) {
 	var prefix = 'https://card-conjurer.storage.googleapis.com';//'https://raw.githubusercontent.com/ImKyle4815/cardconjurer/remake';
-	if (input.includes(prefix) || input.includes('http') || input.includes('data:image') || params.get('testing')) {
+	if (input.includes(prefix) || input.includes('http') || input.includes('data:image') || params.get('testing') == '') {
 		return input;
 	} else {
 		return prefix + input; //input.replace('/img/frames', prefix + '/img/frames');