diff --git a/assets/app.js b/assets/app.js
index 0288339..5e90e89 100644
--- a/assets/app.js
+++ b/assets/app.js
@@ -25,4 +25,5 @@ var downloadPage = () => {
 	pageContents = pageContents.replace("rep_SURL", document.getElementById("url").value)
 
 	download(pageContents, "index.html", "text/html")
-}
\ No newline at end of file
+}
+getTemplateHtml("original");
\ No newline at end of file
diff --git a/index.html b/index.html
index 564de5c..750cdc0 100644
--- a/index.html
+++ b/index.html
@@ -19,6 +19,7 @@
                 <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>
             </div>
             <!-- Colour inputs -->
             <!-- <div id="themeclrs">
@@ -42,9 +43,7 @@
                 <a href="#" style="display:none;" id="dl">dl</a>
             </div>
         </nav>
-        <iframe id="iframe" src="#" frameborder="0" class="content">
-            Hi
-        </iframe>
+        <iframe id="iframe" src="#" frameborder="0" class="content"></iframe>
         <script type="text/javascript" src="https://cdn.rawgit.com/rndme/download/31cf0fa0/download.min.js"></script>
         <script type="text/javascript" src="assets/app.js"></script>
 	</body>
diff --git a/template/fork.html b/template/fork.html
index 3a41c19..9177ae4 100644
--- a/template/fork.html
+++ b/template/fork.html
@@ -41,7 +41,7 @@
 <body>
 	<header>
 		<div class="container">
-			<h1 id="sitename">rep_SNAME</h1>
+			<h1 id="url">rep_URL</h1>
 		</div>
 	</header>
 
diff --git a/template/material.html b/template/material.html
new file mode 100644
index 0000000..cce0e0a
--- /dev/null
+++ b/template/material.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>rep_SNAME</title>
+	
+    <style type="text/css">
+    @import url('https://fonts.googleapis.com/css?family=Roboto:300,400,700');
+        * {
+            padding: 0;
+            margin: 0;
+        }
+		body{
+			font-family: 'Roboto', sans-serif;
+            background-color: #FFFFFF;
+            font-weight: 400;
+		}
+        header {
+            background-color: #2196F3;
+            padding: 20px;
+            -webkit-box-shadow: 0px 5px 20px -9px rgba(0,0,0,1);
+            -moz-box-shadow: 0px 5px 20px -9px rgba(0,0,0,1);
+            box-shadow: 0px 5px 20px -9px rgba(0,0,0,1);
+        }
+        header h1 {
+            font-weight: 300;
+            color:#FFFFFF;
+        }
+        main {
+			position: fixed;
+  			top: 40%;
+ 			left: 50%;
+  			transform: translate(-50%, -50%);
+        }
+        main p {
+            margin-top: 10px;
+        }
+        .pull-right {
+            float: right;
+        }
+	</style>
+	
+</head>
+<body>
+    <header>
+        <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 class="pull-right"> - <span id="devname">rep_DEVNAME</span></p>
+    </main>
+</body>
+</html>
\ No newline at end of file
