diff --git a/views/index.htm b/views/index.htm
new file mode 100644
index 0000000..5556c7a
--- /dev/null
+++ b/views/index.htm
@@ -0,0 +1,46 @@
+<html lang="en">
+	<head>
+		<title content-text="title-main"></title>
+		<meta charset="UTF-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
+    	<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
+		<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Icons" />
+	</head>
+	<body>
+		
+		<top class="top-nav">
+			<nav class="nav-wrapper">
+				<div class="container">
+					<a href="#" class="brand-logo left">File Tools</a>
+				</div>
+				<ul id="nav-mobile" class="right hide-on-med-and-down">
+					<li class="active"><a>File Metadata Generator</a></li>
+				</ul>
+			</nav>
+		</top>
+		<main>
+			<header class="container flow-text">
+				<h1>File Metadata Generator</h1>
+				<p>Check what's in your files. </p>
+			</header>
+			<form action="/api/fileanalyse.php" method="post" enctype="multipart/form-data" class="container">
+				<p>Upload a file to generate its metadata.</p>
+				<div class="row">
+					<div class="file-field input-field col">
+						<div class="btn waves-effect">
+							<span for="upfile"><i class="material-icons">attach_file</i>File</span>
+							<input id="inputfield" type="file" name="upfile" required />
+						</div>
+					</div>
+					<div class="input-field col">
+						<input id="button" type="submit" value="Upload" class="btn waves-effect waves-light">
+					</div>
+				</div>
+				<div class="fixed-action-btn">
+					<button type="submit" id="upload-button" class="btn-floating btn-large waves-effect"><i class="material-icons">visibility</i>Submit</button>
+				</div>
+			</form>
+		</main>
+	</body>
+</html>
\ No newline at end of file
diff --git a/views/index.html b/views/index.html
deleted file mode 100644
index 27734e4..0000000
--- a/views/index.html
+++ /dev/null
@@ -1,34 +0,0 @@
-<!DOCTYPE html>
-
-<html>
-   <head>
-      <title>File Metadata</title>
-      <link rel="shortcut icon" href="https://cdn.freecodecamp.org/universal/favicons/favicon-32x32.png" type="image/x-icon"/>
-      <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css">
-      <link href="/public/style.css" rel="stylesheet" type="text/css">
-   </head>
-
-   <body>
-      <div class="container">
-        <h1>API Project: File Metadata Microservice</h1>
-
-        <h2>Usage:</h2>
-        <p>
-          Please Upload a File ...
-        </p>
-        <div class="view">
-          <h3 id="output"></h3>
-          <form enctype="multipart/form-data" method="POST" action="/api/fileanalyse">
-            <input id="inputfield" type="file" name="upfile">
-            <input id="button" type="submit" value="Upload">
-          </form>
-        </div>
-      </div>
-      <div class="footer">
-        <p>
-          by 
-          <a href="http://www.freecodecamp.com">freeCodeCamp</a>
-        </p>
-      </div>
-   </body>
-</html>
