diff --git a/templates/files.html b/templates/files.html
index f768580..67a29b8 100644
--- a/templates/files.html
+++ b/templates/files.html
@@ -1,27 +1,18 @@
-{% extends "base.html" %} {% block main_content %}
-		<div class="container">
-			<h3 class="offset-lg-2">{{page_title}} -- {{view_path}}</h3>
-			<div class="row">
-				<table class="table table table-sm col-xl-12">
-				<thead><tr class="thead-light"><th>Name</th><th>Size (MB)</th><th>Hash</th></tr></thead><tbody>
-					{% for obj in file_list %}
-						<tr><td>
-						{% if obj.type=="Directory" %}
-							<i class="fas fa-folder"></i>
-						{% elif obj.type=="Image" %}
-							<i class="fas fa-file-image"></i>
-						{% elif obj.type=="Video" %}
-							<i class="fas fa-file-video"></i>
-						{% else %}
-							<i class="fas fa-question-circle"></i>
-						{% endif %}
-						{% if obj.type=="Image" %}
-							<a href="{{symlink}}/{{obj.name}}"><img width="128" height="128" src="data:image/jpeg;base64,{{obj.thumbnail}}"></img></a>
-						{% endif %}
-						{{obj.name}}
-						</td></td><td>{{obj.size_mb}}</td><td>{{obj.hash}}</tr>
-					{% endfor %}
-				</tbody></table>
-			</div class="row">
-		</div class="container">
+{% extends "base.html" %}
+{% block main_content %}
+	<div class="container-fluid">
+		<h3 class="offset-lg-2">{{page_title}} -- {{file_data.view_path}}</h3>
+		<div class="row">
+			{% for obj in file_data.view_list %}
+				<figure class="figure px-2">
+					{% if obj.type=="Image" %}
+						<center><a href="{{file_data.symlink}}/{{obj.name}}"><img width="128" height="128" src="data:image/jpeg;base64,{{obj.thumbnail}}"></img></a></center>
+					{% else %}
+						<img width="128" height="128" src="data:image/jpeg;base64,{{obj.thumbnail}}"></img>
+					{% endif %}
+					<figcaption class="figure-caption text-center">{{obj.name}}</figcaption>
+				</figure>
+			{% endfor %}
+		</div class="row">
+	</div class="container">
 {% endblock main_content %}