diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..72f4d98
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,66 @@
+# Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio and WebStorm
+# Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839
+
+# User-specific stuff
+.idea/**/workspace.xml
+.idea/**/tasks.xml
+.idea/**/usage.statistics.xml
+.idea/**/dictionaries
+.idea/**/shelf
+
+# Generated files
+.idea/**/contentModel.xml
+
+# Sensitive or high-churn files
+.idea/**/dataSources/
+.idea/**/dataSources.ids
+.idea/**/dataSources.local.xml
+.idea/**/sqlDataSources.xml
+.idea/**/dynamic.xml
+.idea/**/uiDesigner.xml
+.idea/**/dbnavigator.xml
+
+# Gradle
+.idea/**/gradle.xml
+.idea/**/libraries
+
+# Gradle and Maven with auto-import
+# When using Gradle or Maven with auto-import, you should exclude module files,
+# since they will be recreated, and may cause churn.  Uncomment if using
+# auto-import.
+# .idea/modules.xml
+# .idea/*.iml
+# .idea/modules
+
+# CMake
+cmake-build-*/
+
+# Mongo Explorer plugin
+.idea/**/mongoSettings.xml
+
+# File-based project format
+*.iws
+
+# IntelliJ
+out/
+
+# mpeltonen/sbt-idea plugin
+.idea_modules/
+
+# JIRA plugin
+atlassian-ide-plugin.xml
+
+# Cursive Clojure plugin
+.idea/replstate.xml
+
+# Crashlytics plugin (for Android Studio and IntelliJ)
+com_crashlytics_export_strings.xml
+crashlytics.properties
+crashlytics-build.properties
+fabric.properties
+
+# Editor-based Rest Client
+.idea/httpRequests
+
+# Android studio 3.1+ serialized cache file
+.idea/caches/build_file_checksums.ser
diff --git a/assets/app.js b/assets/app.js
index 7a597df..ad1de91 100644
--- a/assets/app.js
+++ b/assets/app.js
@@ -1,56 +1,112 @@
 console.log("app.js loaded");
 
-var getTemplateHtml = (template, primary_color="#ffffff", secondary_color="#ffffff") => {
-	document.getElementById('iframe').src = "about:blank";
-	fetch('template/'+template+'.html')
-	.then(function(response) {
-		return response.text()
-	})
-	.then(function(html) {
-		document.getElementById('iframe').contentWindow.document.write(html);
-		// console.log(document.getElementById('iframe').contentWindow.document)
-		primary_elements = document.getElementById('iframe').contentWindow.document.getElementsByClassName("primary_color");
-		applyColor(primary_elements, primary_color);
+const placeHolders = [];
 
-		secondary_elements = document.getElementById('iframe').contentWindow.document.getElementsByClassName("secondary_color");
-		applyColor(secondary_elements, secondary_color);
-		document.getElementById("primary").value = primary_color
-		document.getElementById("secondary").value = secondary_color
-	});
-}
+const getTemplates = () => {
+    fetch('templates.json')
+        .then(function(response) {
+            return response.json()
+        })
+        .then(function(templates) {
+            populateTemplates(templates);
+            getTemplateHtml(templates[0].id);
+        });
+};
 
-var changeColor = (el) => {
-	color = el.value
-	iframe_doc = document.getElementById('iframe').contentWindow.document
-	if(el.id == "primary")
-	{
-		divs = iframe_doc.getElementsByClassName("primary_color")
-	}
-	else
-	{
-		divs = iframe_doc.getElementsByClassName("secondary_color")
-	}
-	applyColor(divs, color);
-}
+const populateTemplates = templates => {
+    const templatesContainer = document.getElementById('themebtns');
+    templates.forEach(template => {
+       const button = document.createElement('button');
+       button.setAttribute("class", "themebtn");
+       button.setAttribute('id', template.id);
+       button.addEventListener("click", () => {
+           getTemplateHtml(template.id, template.primary_color, template.secondary_color);
+       });
+       button.textContent = template.name + ' (by ' + template.author + ')';
+       templatesContainer.appendChild(button);
+    });
+};
 
-var applyColor = (elements, color) => {
-	var i;
-	for (i = 0; i < elements.length; i++) { 
-	  elements[i].style["background-color"] = color;
-	}
-}
-var valueChange = value => {
-	var iframehtml = document.getElementById('iframe').contentWindow.document.getElementById(value);
-	val = document.getElementById(value).value;
-	iframehtml.innerHTML = val
-}
+const getTemplateHtml = (template, primary_color="#ffffff", secondary_color="#ffffff") => {
+    document.getElementById('iframe').src = "about:blank";
+    fetch('template/'+template+'.html')
+    .then(function(response) {
+        return response.text()
+    })
+    .then(function(html) {
+        html = parseContent(html);
+        document.getElementById('iframe').contentWindow.document.write(html);
+        primary_elements = document.getElementById('iframe').contentWindow.document.getElementsByClassName("primary_color");
+                applyColor(primary_elements, primary_color);
 
-var downloadPage = () => {
-	var pageContents = new XMLSerializer().serializeToString(document.getElementById('iframe').contentWindow.document)
-	pageContents = pageContents.replace("rep_DEVNAME", document.getElementById("devname").value)
-	pageContents = pageContents.replace("rep_SNAME", document.getElementById("sitename").value)
-	pageContents = pageContents.replace("rep_SURL", document.getElementById("url").value)
+                secondary_elements = document.getElementById('iframe').contentWindow.document.getElementsByClassName("secondary_color");
+                applyColor(secondary_elements, secondary_color);
+                document.getElementById("primary").value = primary_color
+                document.getElementById("secondary").value = secondary_color
+    });
+};
 
-	download(pageContents, "index.html", "text/html")
-}
-getTemplateHtml("original");
\ No newline at end of file
+const valueChange = value => {
+    const iframehtml = document.getElementById('iframe').contentWindow.document.getElementById(value);
+    if(!iframehtml) return;
+    const val = document.getElementById(value).value;
+    iframehtml.innerHTML = val
+};
+
+const downloadPage = () => {
+    let pageContents = new XMLSerializer().serializeToString(document.getElementById('iframe').contentWindow.document);
+    pageContents = parseContent(pageContents);
+    download(pageContents, "index.html", "text/html")
+};
+
+const parseContent = pageContents => {
+    placeHolders.forEach(ph => {
+        const val = document.getElementById(ph.id).value;
+        if(val) {
+            const re = new RegExp(ph.text, 'g');
+            pageContents = pageContents.replace(re, val);
+        }
+    });
+    return pageContents
+};
+
+const loadPlaceholder = () => {
+    const inputs = document.querySelectorAll('#inputs [type=text]');
+    inputs.forEach(input => {
+        const ph = {}
+        const attrs = input.attributes;
+        for(let i = attrs.length - 1; i >= 0; i--) {
+            if(attrs[i].name === 'id') {
+                ph['id'] = attrs[i].value;
+            } else if( attrs[i].name === 'data-placeholder') {
+                ph['text'] = attrs[i].value;
+            }
+        }
+        placeHolders.push(ph);
+    });
+};
+
+const changeColor = (el) => {
+    color = el.value
+    iframe_doc = document.getElementById('iframe').contentWindow.document
+    if(el.id == "primary")
+    {
+        divs = iframe_doc.getElementsByClassName("primary_color")
+    }
+    else
+    {
+        divs = iframe_doc.getElementsByClassName("secondary_color")
+    }
+    applyColor(divs, color);
+};
+
+const applyColor = (elements, color) => {
+    var i;
+    for (i = 0; i < elements.length; i++) { 
+      elements[i].style["background-color"] = color;
+    }
+};
+
+getTemplates();
+
+loadPlaceholder();
diff --git a/index.html b/index.html
index f15a489..f0fddc3 100644
--- a/index.html
+++ b/index.html
@@ -16,11 +16,7 @@
             <!-- Buttons for changing theme -->
             <div id="themebtns">
                 <h1>I'm not done my website!</h1>
-                <h2>Theme</h2>
-                <button class="themebtn" id="original" onclick="getTemplateHtml('original')">Original</button>
-                <button class="themebtn" id="fork" onclick="getTemplateHtml('fork')">Fork</button>
-                <button class="themebtn" id="material" onclick="getTemplateHtml('material')">Material</button>
-                <button class="themebtn" id="color_test" onclick="getTemplateHtml('color_test', '#f5f5dd', '#fec1cb')">Color Test</button>
+                <h2>Template</h2>
             </div>
             <!-- Colour inputs -->
             <div id="themeclrs">
@@ -31,11 +27,11 @@
             <div id="inputs">
                 <h2>Values</h2>
                 <label for="sitename">Site name</label> 
-                <input type="text" id="sitename" onchange = "valueChange('sitename');" onkeypress = "this.onchange();" onpaste = "this.onchange();" oninput = "this.onchange();">
+                <input type="text" id="sitename" data-placeholder="rep_SNAME" onchange = "valueChange('sitename');" onkeypress = "this.onchange();" onpaste = "this.onchange();" oninput = "this.onchange();">
                 <label for="url">Site URL</label> 
-                <input type="text" id="url" onchange = "valueChange('url');" onkeypress = "this.onchange();" onpaste = "this.onchange();" oninput = "this.onchange();">
+                <input type="text" id="url" data-placeholder="rep_SURL" onchange = "valueChange('url');" onkeypress = "this.onchange();" onpaste = "this.onchange();" oninput = "this.onchange();">
                 <label for="devname">Developer name</label> 
-                <input type="text" id="devname" onchange = "valueChange('devname');" onkeypress = "this.onchange();" onpaste = "this.onchange();" oninput = "this.onchange();">
+                <input type="text" id="devname" data-placeholder="rep_DEVNAME" onchange = "valueChange('devname');" onkeypress = "this.onchange();" onpaste = "this.onchange();" oninput = "this.onchange();">
             </div>
             <!-- Captcha and download button -->
             <div id="submit">
diff --git a/template/fork.html b/template/fork.html
index 9177ae4..4da1de6 100644
--- a/template/fork.html
+++ b/template/fork.html
@@ -12,12 +12,12 @@
 			font-family: sans-serif;
 			padding: 0;
 			margin: 0;
-			background-color: #E9E9E9;
+			background-color: #a09f9f;
 		}
 		
 		.container {
 			width: 40%;
-			margin: 0 auto;
+			margin: auto;
 		}
 		
 		header {
@@ -34,6 +34,9 @@
 			font-weight: 400;
 			text-align: center;
 			box-shadow:2px 2px 5px #888;
+			hover{
+				boeder : 6px 6px 6px 6px;
+			}
 		}
 	</style>
 	
@@ -41,7 +44,7 @@
 <body>
 	<header>
 		<div class="container">
-			<h1 id="url">rep_URL</h1>
+			<h1 id="url">rep_SURL</h1>
 		</div>
 	</header>
 
@@ -50,4 +53,4 @@
 		<p><span id="sitename">rep_SNAME</span> is being worked on by <span id="devname">rep_DEVNAME!</span>!</p> <!-- See README for keywords -->
 	</div>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/template/material.html b/template/material.html
index cce0e0a..24dca0c 100644
--- a/template/material.html
+++ b/template/material.html
@@ -48,7 +48,7 @@
         <h1 id="sitename">rep_SNAME</h1>
     </header>
     <main>
-        <p>We're working hard to get <span id="url">rep_URL</span> online! Hang tight :)</p>
+        <p>We're working hard to get <span id="url">rep_SURL</span> online! Hang tight :)</p>
         <p class="pull-right"> - <span id="devname">rep_DEVNAME</span></p>
     </main>
 </body>
diff --git a/template/original.html b/template/original.html
index 3285c2f..3eb0f85 100644
--- a/template/original.html
+++ b/template/original.html
@@ -39,7 +39,7 @@
 	</div>
 	<br />
 	<div class="content" id="content">
-		<p><span id="url">rep_URL</span> is being worked on by <span id="devname">rep_DEVNAME!</span></p> <!-- See README for keywords -->
+		<p><span id="url">rep_SURL</span> is being worked on by <span id="devname">rep_DEVNAME!</span></p> <!-- See README for keywords -->
 	</div>
 </body>
 </html>
\ No newline at end of file
diff --git a/template/typewriter.html b/template/typewriter.html
new file mode 100644
index 0000000..5dc4b09
--- /dev/null
+++ b/template/typewriter.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<!-- Very simple webpage that scales decently -->
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+	<title>rep_SNAME</title>
+	<meta name="description" content="">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	
+	<style type="text/css">
+		html, body {
+			height: 100%;
+		}
+		body {
+			margin: 0;
+            background-color: #FFFFFF;
+            color: #000000;
+		}
+		.flex-container {
+			height: 100%;
+			padding: 0;
+			margin: 0;
+			display: -webkit-box;
+			display: -moz-box;
+			display: -ms-flexbox;
+			display: -webkit-flex;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+		}
+		.row {
+			width: auto;
+		}
+		.flex-item {
+			padding: 5px;
+			margin: 10px;
+			line-height: 20px;
+			font-weight: bold;
+			font-size: 2em;
+			text-align: left;
+		}
+        #content {
+            visibility: hidden;
+        }
+	</style>
+	
+</head>
+<body>
+<div class="flex-container">
+	<div class="row">
+		<div class="flex-item">
+            <div id="content">
+			    <span id="sitename">rep_SNAME</span> is being worked on by <span id="devname">rep_DEVNAME!</span>
+            </div>
+            <div id="paper"></div>
+		</div>
+	</div>
+</div>
+<script>
+
+    const init = function() {
+        let pos = 0;
+        let on = false;
+
+        const paper = document.getElementById('paper');
+
+        const typechar = function() {
+            const content = document.getElementById('content');
+            const text = content.textContent.trim();
+            let wait = false;
+            paper.innerText = text.substr(0, pos) + (on ? '_' : '');
+            if(on) {
+                on = false;
+                pos++;
+                if(pos > text.length) {
+                    wait = true;
+                    pos = 0;
+                }
+            } else {
+                on = true;
+            }
+            setTimeout(function() {
+                typechar();
+            }, wait ? 1500 : 150);
+        };
+        typechar();
+    };
+    init();
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/templates.json b/templates.json
new file mode 100644
index 0000000..a5053d4
--- /dev/null
+++ b/templates.json
@@ -0,0 +1,24 @@
+[
+  {
+    "id": "original",
+    "name": "Original",
+    "author": "gmemstr"
+  },
+  {
+    "id": "material",
+    "name": "Material",
+    "author": "gmemstr"
+  },
+  {
+    "id": "fork",
+    "name": "Fork",
+    "author": "gmemstr"
+  },
+  {
+    "id": "color_test",
+    "name": "Color Test",
+    "author": "ovidThomas",
+    "primary_color":  "#f5f5dd", 
+    "secondary_color": "#fec1cb"
+  }
+]
\ No newline at end of file