diff --git a/app.py b/app.py
index 7d9d190..43885ba 100644
--- a/app.py
+++ b/app.py
@@ -73,8 +73,21 @@ def age_filter(value):
     else:
         return "just now"
 
+def size_filter(value):
+    if value is None:
+        return ''
+    if value < 1024:
+        return f"{value} B"
+    elif value < 1024 * 1024:
+        return f"{value / 1024:.1f} KB"
+    elif value < 1024 * 1024 * 1024:
+        return f"{value / (1024 * 1024):.1f} MB"
+    else:
+        return f"{value / (1024 * 1024 * 1024):.1f} GB"
+
 app.jinja_env.filters['datetime'] = datetime_filter
 app.jinja_env.filters['age'] = age_filter
+app.jinja_env.filters['size'] = size_filter
 
 @app.route("/")
 def index():
diff --git a/git/tree.py b/git/tree.py
index 46f6522..259c31d 100644
--- a/git/tree.py
+++ b/git/tree.py
@@ -40,4 +40,8 @@ def get_tree_items(repo_path, ref="HEAD", tree_path=""):
             'path': entry.name if not tree_path else f"{tree_path}/{entry.name}"
         }
         items.append(item)
+
+    # dirs first, then files, both alphabetically
+    items.sort(key=lambda x: (0 if x['type'] == 'tree' else 1, x['name'].lower()))
+    
     return items
\ No newline at end of file
diff --git a/static/styles.css b/static/styles.css
index 90526f3..36fd90a 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -61,6 +61,11 @@ table {
     width: 100%;
 }
 
+.tree-table {
+    width: auto;
+    max-width: 100%;
+}
+
 th, td {
     border: 1px solid lightgray;
     padding: 4px 8px;
@@ -126,5 +131,28 @@ table.commits-table .message-col {
     overflow-x: auto;
 }
 
+.breadcrumbs {
+    margin-bottom: 1em;
+    font-size: 14px;
+}
+
+.breadcrumbs a {
+    color: grey;
+}
+
+.tree-table td:first-child {
+    white-space: normal;
+    word-break: break-all;
+}
+
+.blob-content {
+    margin: 0 -1em;
+}
+
+.blob-content pre {
+    white-space: pre-wrap;
+    overflow-x: auto;
+}
+
 
 
diff --git a/templates/blame.html b/templates/blame.html
index 240f195..75d6f7d 100644
--- a/templates/blame.html
+++ b/templates/blame.html
@@ -5,7 +5,8 @@
 <style>.blame-code pre { line-height: 0.7; }</style>
 <h1>Blame: {{ path }}</h1>
 <div id="loading">Loading blame information, this may take a while for large files...</div>
-<div id="pomeranian" style="display: none; margin-top: 20px;">
+<div id="pomeranian" style="display: none;">
+    <p>Server is taking its time... anyways, here's a tug of war match between two marshmallows:</p>
     <iframe width="560" height="315" src="https://www.youtube.com/embed/Q-KciIbk_oA?si=c_DqdaVbYMlfhxW7&amp;controls=0&amp;autoplay=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
 </div>
 <div id="blame-content" style="display: none;">
@@ -15,6 +16,7 @@ document.addEventListener('DOMContentLoaded', function() {
     const repo_name = window.location.pathname.split('/')[1];
     const pomeranianTimeout = setTimeout(() => {
         document.getElementById('pomeranian').style.display = 'block';
+        document.getElementById('loading').style.display = 'none';
     }, 5000);
     
     fetch(window.location.href, {
diff --git a/templates/blob.html b/templates/blob.html
index e49ee3d..22b2a5c 100644
--- a/templates/blob.html
+++ b/templates/blob.html
@@ -3,11 +3,13 @@
 {% block content %}
 <h1>Blob: {{ blob.name }}</h1>
 <p>Blob id: {{ blob.id }}</p>
-<p>Size: {{ blob.size }} bytes</p>
+<p>Size: {{ blob.size | size }}</p>
 <p><a href="{{ url_for('repo_blame_path', repo_name=repo_name, path=path) }}?ref={{ ref }}">Blame</a></p>
+<div class="blob-content">
 {% if blob.is_binary %}
     <pre>Binary...</pre>
 {% else %}
 {{ blob.highlighted|safe }}
 {% endif %}
+</div>
 {% endblock %}
\ No newline at end of file
diff --git a/templates/tree.html b/templates/tree.html
index 6326c17..5ad607d 100644
--- a/templates/tree.html
+++ b/templates/tree.html
@@ -2,7 +2,18 @@
 
 {% block content %}
     <h1>Tree for {{ repo_name }} at {{ ref }}{% if path %} / {{ path }}{% endif %}</h1>
-    <table class="list">
+    
+    {% if path %}
+    <div class="breadcrumbs">
+        <a href="{{ url_for('repo_tree_path', repo_name=repo_name) }}?ref={{ ref }}">root</a>
+        {% set parts = path.split('/') %}
+        {% for part in parts %}
+            / <a href="{{ url_for('repo_tree_path', repo_name=repo_name, path=parts[:loop.index]|join('/')) }}?ref={{ ref }}">{{ part }}</a>
+        {% endfor %}
+    </div>
+    {% endif %}
+    
+    <table class="list tree-table">
         <thead>
             <tr>
                 <th>Name</th>
@@ -21,7 +32,7 @@
                         {% endif %}
                     </td>
                     <td>{{ item.type }}</td>
-                    <td>{% if item.type == 'blob' %}{{ item.size }} bytes{% endif %}</td>
+                    <td>{% if item.type == 'blob' %}{{ item.size | size }}{% endif %}</td>
                 </tr>
             {% endfor %}
         </tbody>