diff --git a/viewer/helpers.py b/viewer/helpers.py
index 101871b..915ca15 100644
--- a/viewer/helpers.py
+++ b/viewer/helpers.py
@@ -1,8 +1,40 @@
+import mimetypes
 import os
 from typing import List, Tuple
 
+from django.urls import reverse
 
-def extra_listdir(path: str) -> List[Tuple[str, str]]:
+from viewer.models import ServedDirectory
+
+
+class File:
+    def __init__(self, head, tail):
+        self.filename = head
+        self.fullpath = os.path.join(tail, head)
+        self.mediatype = self.get_mediatype()
+
+    def get_url(self, directory: ServedDirectory) -> str:
+        return reverse('file', args=(directory.id, self.filename))
+
+    def get_mediatype(self) -> str:
+        """Simple media type categorization based on the given mimetype"""
+        if os.path.exists(self.fullpath):
+            if os.path.isdir(self.fullpath):
+                return 'folder'
+            mimetype = mimetypes.guess_type(self.filename)[0]
+            if mimetype is not None:
+                if mimetype.startswith('image'):
+                    return 'image'
+                elif mimetype.startswith('video'):
+                    return 'video'
+            return 'file'
+        return 'unknown'
+
+    def __str__(self) -> str:
+        return self.filename
+
+
+def extra_listdir(path: str) -> List[File]:
     """
     Helper function used for identifying file media type for every file in a given directory, extending os.listdir
 
@@ -11,11 +43,7 @@ def extra_listdir(path: str) -> List[Tuple[str, str]]:
     """
     files = []
     for file in os.listdir(path):
-        mediatype = get_all_mediatype(file, path)
-        if mediatype == 'folder':
-            files.append((file, mediatype, os.path.join(path, file)))
-        else:
-            files.append((file, mediatype))
+        files.append(File(file, path))
     return files
 
 
@@ -30,13 +58,3 @@ def get_all_mediatype(head: str, tail: str) -> str:
     if os.path.isfile(os.path.join(tail, head)):
         return get_file_mediatype(head)
     return "folder"
-
-
-def get_file_mediatype(mimetype: str) -> str:
-    """Simple media type categorization based on the given mimetype"""
-    if mimetype is not None:
-        if mimetype.startswith('image'):
-            return 'image'
-        elif mimetype.startswith('video'):
-            return 'video'
-    return 'file'
diff --git a/viewer/templates/browse.html b/viewer/templates/browse.html
index 5cbecf4..e823b57 100644
--- a/viewer/templates/browse.html
+++ b/viewer/templates/browse.html
@@ -1,5 +1,52 @@
 {% extends 'base.html' %}
+{% block head %}
+    {{ block.super }}
+    <style>
+        .media {
+            width: 100%;
+        {#height: 3em;#}
+        }
+
+        .media .media-filename {
+            text-decoration: underline;
+            text-decoration-color: #3273dc;
+        }
+    </style>
+{% endblock head %}
 {% block content %}
+    <div class="card">
+        <div class="card-header">
+            <p class="card-header-title">
+                {{ directory.path }}
+                <span class="pl-1" style="font-weight: 400; font-style: italic; font-size: 70%;">
+                    {{ files|length }} files
+                </span>
+            </p>
+        </div>
+        <div class="card-content">
+            <div class="content">
+                {% for directory in directories %}
+                <div>
+
+                </div>
+
+                {% endfor %}
+                {% for file in files %}
+                    <div class="media">
+                        {% load thumbnail %}
+                        <img class="px-2" src="{{ file.fullpath|thumbnail_url:'small' }}">
+{#                        <img class="px-2" src="https://picsum.photos/200/130?random={{ file.0 }}">#}
+                        <span class="media-filename">
+                            <a href="{% url 'file' directory.id file.filename %}">
+                                {{ file.filename }}
+                            </a>
+                        </span>
+                    </div>
+                {% endfor %}
+            </div>
+        </div>
+    </div>
+
     <div class="panel">
         <div class="panel-heading">
             {{ directory.path }}
@@ -15,16 +62,15 @@
         {% for file in files %}
             <div class="panel-block">
                         <span class="panel-icon pr-4">
-                            <i class="fas fa-{{ file.1 }} fa-lg" aria-hidden="true"></i>
+{#                            <i class="fas fa-{{ file }} fa-lg" aria-hidden="true"></i>#}
                         </span>
                 {% if file.1 == 'folder' %}
-                    <a href="{% url 'add' %}?path={{ file.2 }}">
-                        {{ file.0 }}
+                    <a href="{% url 'add' %}?path={{ file.fullpath }}">
+                        {{ file.filename }}
                     </a>
                 {% else %}
-                    <a href="{% url 'file' directory.id file.0 %}">
-                        {{ file.0 }}
-                        {{ file.0 }}
+                    <a href="{% url 'file' directory.id file.filename %}">
+                        {{ file.filename }}
                     </a>
                 {% endif %}
             </div>