diff --git a/templates/file_list.html b/templates/file_list.html
index 4f68b4b..34631bd 100644
--- a/templates/file_list.html
+++ b/templates/file_list.html
@@ -1,66 +1,68 @@
 {% extends "base.html" %} {% block main_content %}
-		<div class="container-fluid">
-			<h3 class="offset-lg-2">{{page_title}}</h3>
-            <form id="main_form" method="POST">
-                <input id="offset" type="hidden" name="offset" value="{{offset}}">
-                <input id="grouping" type="hidden" name="grouping" value="">
-                <input id="size" type="hidden" name="size" value="">
-                <input id="cwd" type="hidden" name="cwd" value="">
-                <input id="folders" type="hidden" name="folders" value="False">
-                <div class="row">
-                    <div class="input-group col-lg-4">
-                        {{CreateSelect( "noo", noo, ["Oldest", "Newest","A to Z", "Z to A"], "$('#offset').val(0)", "rounded-start" )|safe }}
-                        {{CreateSelect( "how_many", how_many, ["10", "25", "50", "75", "100", "150", "200", "500"], "", "rounded-end" )|safe }}
-                    </div class="input-group...">
-                    <div class="col my-auto d-flex justify-content-center">
-                        <button id="prev" name="prev" class="prev sm-txt btn btn-outline-secondary"><i class="fas fa-arrow-alt-circle-left"></i></button>
-                        <span class="sm-txt my-auto">&nbsp;{{how_many}} files&nbsp;</span>
-                        <button id="next" name="next" class="next sm-txt btn btn-outline-secondary"><i class="fas fa-arrow-alt-circle-right"></i></button>
-                    </div class="col...">
-                </div class="row">
-            </form
-			<div class="row">
-				<table class="table table-striped table-sm col-xl-12">
-				<thead><tr class="table-primary"><th>Name</th><th>Size (MB)</th><th>Path Prefix</th><th>Hash</th></tr></thead><tbody>
 
-					{% for obj in entry_data %}
-						<tr><td>
-							{% if obj.type.name == "Directory" %}
-								<i style="font-size:48;" class="fas fa-folder"></i><br><span class="figure-caption">{{obj.name}}</span>
-							{% else %}
-								<figure class="figure" font-size: 24px;>
-									<div style="position:relative; width:100%">
-										{% if obj.type.name=="Image" %}
-											{% set icon="fa-file-image" %}
-											<a href="{{obj.in_dir.in_path.path_prefix}}/{{obj.in_dir.rel_path}}/{{obj.name}}">
-										{% elif obj.type.name == "Video" %}
-											{% set icon="fa-film" %}
-											<a href="{{obj.in_dir.in_path.path_prefix}}/{{obj.in_dir.rel_path}}/{{obj.name}}">
-										{% elif obj.type.name == "Directory" %}
-											{% set icon="fa-folder" %}
-										{% else %}
-											{% set icon="fa-question-circle" %}
-										{% endif %}
-										<img class="thumb" style="display:block" height="48" src="data:image/jpeg;base64,{{obj.file_details.thumbnail}}"></img>
-										{% if obj.type.name=="Image" or obj.type.name == "Video" %}
-											</a>
-										{% endif %}
-										<div style="position:absolute; top: 2px; left: 2px;">
-											<i style="font-size:16;background-color:black;color:white" class="fas {{icon}}"></i>
-										</div>
-									</div>
-									<figcaption class="figure-caption">{{obj.name}}</figcaption>
-								</figure>
-							{% endif %}
-						</td>
-                        {% if obj.type.name != "Directory" %}
-                        <td>{{obj.file_details.size_mb}}</td><td>{{obj.in_dir.in_path.path_prefix.replace("static/","")}}/{{obj.in_dir.rel_path}}</td><td>{{obj.file_details.hash}}</td>
-						{% else %}
-                        <td></td><td></td><td></td>
+    <svg style="display:none">
+        <svg id="caret_prev" viewBox="0 0 16 16">
+            <path d="m3.86 8.753 5.482 4.796c.646.566 1.658.106 1.658-.753V3.204a1 1 0 0 0-1.659-.753l-5.48 4.796a1 1 0 0 0 0 1.506z"/>
+        </svg>
+        <svg id="caret_next" viewBox="0 0 16 16">
+            <path d="m12.14 8.753-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z"/>
+        </svg>
+    </svg>
+
+    <div class="container-fluid">
+        <h3 class="offset-2">{{page_title}}</h3>
+        <form id="main_form" method="POST">
+            <input id="offset" type="hidden" name="offset" value="{{offset}}">
+            <input id="grouping" type="hidden" name="grouping" value="">
+            <input id="size" type="hidden" name="size" value="">
+            <input id="cwd" type="hidden" name="cwd" value="">
+            <input id="folders" type="hidden" name="folders" value="False">
+            <div class="col col-auto">
+                <div class="input-group">
+                    {{CreateSelect( "noo", noo, ["Oldest", "Newest","A to Z", "Z to A"], "$('#offset').val(0)", "rounded-start py-1 my-1")|safe }}
+                    {{CreateSelect( "how_many", how_many, ["10", "25", "50", "75", "100", "150", "200", "500"], "", "rounded-end py-1 my-1" )|safe }}
+                    <div class="mb-1 col my-auto d-flex justify-content-center">
+                        <button id="prev" name="prev" class="prev sm-txt btn btn-outline-secondary">
+                            <svg width="16" height="16" fill="currentColor"><use xlink:href="#caret_prev" /></svg>
+                        </button>
+                        <span class="sm-txt my-auto">&nbsp;{{how_many}} files&nbsp;</span>
+                        <button id="next" name="next" class="next sm-txt btn btn-outline-secondary">
+                            <svg width="16" height="16" fill="currentColor"><use xlink:href="#caret_next" /></svg>
+                        </button>
+                    </div class="col...">
+                </div class="input-group...">
+            </div class="col col-auto">
+        </form
+        <div class="row">
+            <table class="table table-striped table-sm col-xl-12">
+            <thead><tr class="table-primary"><th>Name</th><th>Size (MB)</th><th>Path Prefix</th><th>Hash</th></tr></thead><tbody>
+                {% for obj in entry_data %}
+                    <tr><td>
+                        {% if obj.type.name == "Image" or obj.type.name == "Video" %}
+                            <figure class="figure" font-size: 24px;>
+                                <div style="position:relative; width:100%">
+                                    {% if obj.type.name=="Image" %}
+                                        <a href="{{obj.in_dir.in_path.path_prefix}}/{{obj.in_dir.rel_path}}/{{obj.name}}">
+                                    {% elif obj.type.name == "Video" %}
+                                        <a href="{{obj.in_dir.in_path.path_prefix}}/{{obj.in_dir.rel_path}}/{{obj.name}}">
+                                    {% endif %}
+                                    <img class="thumb" style="display:block" height="48" src="data:image/jpeg;base64,{{obj.file_details.thumbnail}}"></img>
+                                    {% if obj.type.name=="Image" or obj.type.name == "Video" %}
+                                        </a>
+                                    {% endif %}
+                                </div>
+                                <figcaption class="figure-caption">{{obj.name}}</figcaption>
+                            </figure>
                         {% endif %}
-                        </tr>
-					{% endfor %}
-				</tbody></table>
-			</div class="row">
-		</div class="container">
+                    </td>
+                    {% if obj.type.name != "Directory" %}
+                        <td>{{obj.file_details.size_mb}}</td><td>{{obj.in_dir.in_path.path_prefix.replace("static/","")}}/{{obj.in_dir.rel_path}}</td><td>{{obj.file_details.hash}}</td>
+                    {% else %}
+                        <td></td><td></td><td></td>
+                    {% endif %}
+                    </tr>
+                {% endfor %}
+            </tbody></table>
+        </div class="row">
+    </div class="container">
 {% endblock main_content %}