diff --git a/public/css/app.css b/public/css/app.css
index 864564c..34c8586 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -73,3 +73,16 @@
 .image {
 	width: 100%;
 }
+
+div.nonmedia {
+	height: 100px;
+	width: 100%;
+}
+
+div.nonmedia p {
+	color: #444;
+	font-size: 20px;
+	font-weight: 400;
+	line-height: 100px;
+	text-align: center;
+}
diff --git a/routes/index.js b/routes/index.js
index ac6aab6..2463501 100644
--- a/routes/index.js
+++ b/routes/index.js
@@ -33,18 +33,28 @@ const storage = multer.diskStorage({
   }
 });
 
-const fileFilter = function(req, file, cb) {
-    if (file.mimetype == "image/png" || file.mimetype == "image/jpg" || file.mimetype == "image/jpeg" || file.mimetype == "image/gif" || file.mimetype == "image/webp"
-      || file.mimetype == "video/mp4" || file.mimetype == "video/mov" || file.mimetype == "video/webm"
-      || file.mimetype == "audio/mpeg" || file.mimetype == "audio/ogg") {
-        cb(null, true)
-      } else {
-        cb(null, false);
-        //return cb(new Error('Only media files allowed'));
-      }
-  }
+let allowedMimeTypes = [
+  'image/png',
+  'image/jpg',
+  'image/jpeg',
+  'image/gif',
+  'image/webp',
+  'video/mp4',
+  'video/mov',
+  'video/webm',
+  'audio/mpeg',
+  'audio/ogg'
+]
 
-let upload = multer({ storage: storage, fileFilter: fileFilter });
+const fileFilter = function(req, file, cb) {
+  if (allowedMimeTypes.includes(file.mimetype)) {
+    cb(null, true);
+  } else {
+    cb(null, false);
+  }
+}
+
+let upload = multer({ storage: storage /**, fileFilter: fileFilter**/ }); //maybe make this a env variable?
 
 function fetchMedia(req, res, next) {
   db.all('SELECT * FROM media', (err, rows) => {
diff --git a/views/index.ejs b/views/index.ejs
index 9756034..995777d 100644
--- a/views/index.ejs
+++ b/views/index.ejs
@@ -1,70 +1,74 @@
 <!doctype html>
 <html lang="en">
-	<head>
-		<meta charset="utf-8">
-		<meta name="viewport" content="width=device-width, initial-scale=1">
-		<title>Embedder</title>
-		<link rel="stylesheet" href="/css/base.css">
-		<link rel="stylesheet" href="/css/index.css">
-		<link rel="stylesheet" href="/css/app.css">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <title>Embedder</title>
+        <link rel="stylesheet" href="/css/base.css">
+        <link rel="stylesheet" href="/css/index.css">
+        <link rel="stylesheet" href="/css/app.css">
 <%
 function extension(string) {
-  return string.slice((string.lastIndexOf(".") - 2 >>> 0) + 2);
+return string.slice((string.lastIndexOf(".") - 2 >>> 0) + 2);
 }
 %>
-	</head>
-	<body>
-		<section class="todoapp">
-			<nav class="nav">
-				<ul>
-					<li class="user"><%= user.name || user.username %></li>
-					<li>
-						<form action="/logout" method="post">
-							<button class="logout" type="submit">Sign out</button>
-						</form>
-					</li>
-				</ul>
-			</nav>
-			<header class="header">
-				<h1>Embedder</h1>
-				<form action="/" method="post" encType="multipart/form-data">
-					<!---->
-					<div id="dropArea">
-						<p class="dragregion">Upload a file, copy paste, or drag n' drop into the dashed region</p>
-						<div id="gallery"></div>
-						<p class="dragregion"><input class="" type="file" id="fileupload" name="fileupload"><input type="submit" value="Upload"></p>
-						<p class="dragregion">Click the file to copy the url</p>
-					</div>
-				</form>
-			</header>
-			<% if (Count > 0) { %>
-			<section class="main">
-				<ul class="todo-list">
-					<% files.forEach(function(file) { %>
-					<li>
-						<form action="<%= file.url %>" method="post">
-							<div class="view">
-								<% if (extension(file.path) == ".mp4" || extension(file.path) == ".mov" || extension(file.path) == "webp") { %>
-								<video autoplay loop muted playsinline class="image" src="/uploads/<%=file.path %>" width="100%" onclick="copyURI(event)"></video>
-								<% } else { %>
-								<img class="image" src="/uploads/<%=file.path %>" width="100%" onclick="copyURI(event)">
-								<% } %>
-								<label text-align:"center"><%= file.path %></label>
-								<button class="destroy" form="delete-<%= file.path %>"></button>
-							</div>
-						</form>
-						<form name="delete-<%= file.path %>" id="delete-<%= file.path %>" action="<%= file.url %>/delete" method="post">
-						</form>
-					</li>
-					<% }); %>
-				</ul>
-			</section>
-			<% } %>
-		</section>
-		<footer class="info">
-			<p><a href="https://l.nekomimi.pet/project">Created by Wavering Ana</a></p>
-			<p><a href="https://github.com/WaveringAna/Embedder">Github</a></p>
-		</footer>
-		<script src="/js/index.js"></script>
-	</body>
+    </head>
+    <body>
+        <section class="todoapp">
+            <nav class="nav">
+                <ul>
+                    <li class="user"><%= user.name || user.username %></li>
+                    <li>
+                        <form action="/logout" method="post">
+                            <button class="logout" type="submit">Sign out</button>
+                        </form>
+                    </li>
+                </ul>
+            </nav>
+            <header class="header">
+                <h1>Embedder</h1>
+                <form action="/" method="post" encType="multipart/form-data">
+                    <!---->
+                    <div id="dropArea">
+                        <p class="dragregion">Upload a file, copy paste, or drag n' drop into the dashed region</p>
+                        <div id="gallery"></div>
+                        <p class="dragregion"><input class="" type="file" id="fileupload" name="fileupload"><input type="submit" value="Upload"></p>
+                        <p class="dragregion">Click the file to copy the url</p>
+                    </div>
+                </form>
+            </header>
+            <% if (Count > 0) { %>
+            <section class="main">
+                <ul class="todo-list">
+                    <% files.forEach(function(file) { %>
+                    <li>
+                        <form action="<%= file.url %>" method="post">
+                            <div class="view">
+                                <% if (extension(file.path) == ".mp4" || extension(file.path) == ".mov" || extension(file.path) == "webp") { %>
+                                <video autoplay loop muted playsinline class="image" src="/uploads/<%=file.path %>" width="100%" onclick="copyURI(event)"></video>
+                                <% } else if (extension(file.path) == ".jpg" || extension(file.path) == ".jpeg" || extension(file.path) == ".png" || extension(file.path) == ".gif" || extension(file.path) == ".webp" ) { %>
+                                <img class="image" src="/uploads/<%=file.path %>" width="100%" onclick="copyURI(event)">
+				<% } else {%> <!-- non-media file -->
+                        	<div class="nonmedia" onclick="copyURI(event)">
+					<p><%=extension(file.path)%> file</p>
+				</div>
+				<% } %>
+                                <label text-align:"center"><%= file.path %></label>
+                                <button class="destroy" form="delete-<%= file.path %>"></button>
+                            </div>
+                        </form>
+                        <form name="delete-<%= file.path %>" id="delete-<%= file.path %>" action="<%= file.url %>/delete" method="post">
+                        </form>
+                    </li>
+                    <% }); %>
+                </ul>
+            </section>
+            <% } %>
+        </section>
+        <footer class="info">
+            <p><a href="https://l.nekomimi.pet/project">Created by Wavering Ana</a></p>
+            <p><a href="https://github.com/WaveringAna/Embedder">Github</a></p>
+        </footer>
+        <script src="/js/index.js"></script>
+    </body>
 </html>
