diff --git a/archivebox/themes/admin/actions_as_select.html b/archivebox/themes/admin/actions_as_select.html
new file mode 100644
index 00000000..86a77190
--- /dev/null
+++ b/archivebox/themes/admin/actions_as_select.html
@@ -0,0 +1 @@
+actions_as_select
diff --git a/archivebox/themes/admin/base.html b/archivebox/themes/admin/base.html
index 6b788358..22014b02 100644
--- a/archivebox/themes/admin/base.html
+++ b/archivebox/themes/admin/base.html
@@ -20,6 +20,54 @@
 <body class="{% if is_popup %}popup {% endif %}{% block bodyclass %}{% endblock %}"
   data-admin-utc-offset="{% now "Z" %}">
 
+  <style nonce="{{nonce}}">
+      /* Loading Progress Bar */
+        #progress {
+            position: absolute;
+            z-index: 1000;
+            top: 0px;
+            left: -6px;
+            width: 2%;
+            opacity: 1;
+            height: 2px;
+            background: #1a1a1a;
+            border-radius: 1px;
+            transition: width 4s ease-out, opacity 400ms linear;
+        }
+  
+        @-moz-keyframes bugfix { from { padding-right: 1px ; } to { padding-right: 0; } }
+  </style>
+
+  <script>
+        // Page Loading Bar
+        window.loadStart = function(distance) {
+            var distance = distance || 0;
+            // only add progrstess bar if not already present
+            if (django.jQuery("#loading-bar").length == 0) {
+                django.jQuery("body").add("<div id=\"loading-bar\"></div>");
+            }
+            if (django.jQuery("#progress").length === 0) {
+                django.jQuery("body").append(django.jQuery("<div></div>").attr("id", "progress"));
+                let last_distance = (distance || (30 + (Math.random() * 30)))
+                django.jQuery("#progress").width(last_distance + "%");
+                setInterval(function() {
+                    last_distance += Math.random()
+                    django.jQuery("#progress").width(last_distance + "%");
+                }, 1000)
+            }
+        };
+  
+        window.loadFinish = function() {
+            django.jQuery("#progress").width("101%").delay(200).fadeOut(400, function() {
+                django.jQuery(this).remove();
+            });
+        };
+        window.loadStart();
+        window.addEventListener('beforeunload', function() {window.loadStart(27)});
+        document.addEventListener('DOMContentLoaded', function() {window.loadFinish()});
+  </script>
+
+
 <!-- Container -->
 <div id="container">
 
@@ -27,14 +75,20 @@
     <!-- Header -->
     <div id="header">
         <div id="branding">
-            {% block branding %}{% endblock %}
+            <h1 id="site-name">
+                <a href="{% url 'Home' %}">
+                    <img src="{% static 'archive.png' %}" id="logo">
+                    ArchiveBox
+                </a>
+            </h1>
+                
         </div>
         {% block usertools %}
         {% if has_permission %}
         <div id="user-tools">
-            <a href="{% url 'Home' %}">Index</a> /
-            <a href="{% url 'admin:Add' %}">Add URLs</a> /
-            <a href="{% url 'admin:index' %}">Admin</a> /
+            <a href="{% url 'admin:Add' %}">Add ➕</a> /
+            <a href="{% url 'Home' %}">URLs</a> /
+            <a href="/admin/auth/user/">Users</a> /
             <a href="{% url 'OldHome' %}">Old UI</a> /
             <a href="{% url 'Docs' %}">Docs</a>
              &nbsp; &nbsp;
@@ -59,13 +113,13 @@
         {% endblock %}
         {% block nav-global %}{% endblock %}
     </div>
-    <!-- END Header -->
-    {% block breadcrumbs %}
-    <div class="breadcrumbs">
-    <a href="{% url 'admin:index' %}">{% trans 'Home' %}</a>
-    {% if title %} &rsaquo; {{ title }}{% endif %}
-    </div>
-    {% endblock %}
+        <!-- END Header -->
+        {% block breadcrumbs %}
+        <div class="breadcrumbs">
+        <a href="{% url 'admin:index' %}">{% trans 'Home' %}</a>
+        {% if title %} &rsaquo; {{ title }}{% endif %}
+        </div>
+        {% endblock %}
     {% endif %}
 
     {% block messages %}
@@ -93,5 +147,42 @@
 </div>
 <!-- END Container -->
 
+<script>
+    (function ($) {
+        $.fn.reverse = [].reverse;
+
+        function fix_actions() {
+            var container = $('div.actions');
+
+            if (container.find('option').length < 10) {
+                container.find('label, button').hide();
+
+                var buttons = $('<div></div>')
+                    .prependTo(container)
+                    .css('display', 'inline')
+                    .addClass('class', 'action-buttons');
+
+                container.find('option:gt(0)').reverse().each(function () {
+                    const name = this.value
+                    $('<button>')
+                        .appendTo(buttons)
+                        .attr('name', this.value)
+                        .addClass('button')
+                        .text(this.text)
+                        .click(function () {
+                            container.find('select')
+                                .find(':selected').attr('selected', '').end()
+                                .find('[value=' + this.name + ']').attr('selected', 'selected');
+                            $('#changelist-form button[name="index"]').click();
+                            document.querySelector('#logo').outerHTML = '<div class="loader"></div>'
+                        });
+                });
+            }
+        };
+        $(function () {
+            fix_actions();
+        });
+    })(django.jQuery);
+</script>
 </body>
 </html>
diff --git a/archivebox/themes/default/add_links.html b/archivebox/themes/default/add_links.html
index 84c5da58..80a4b1fc 100644
--- a/archivebox/themes/default/add_links.html
+++ b/archivebox/themes/default/add_links.html
@@ -49,19 +49,6 @@
             border-radius: 4px;
             white-space: normal;
         }
-        .loader {
-            border: 16px solid #f3f3f3; /* Light grey */
-            border-top: 16px solid #3498db; /* Blue */
-            border-radius: 50%;
-            width: 120px;
-            height: 120px;
-            animation: spin 2s linear infinite;
-        }
-
-        @keyframes spin {
-            0% { transform: rotate(0deg); }
-            100% { transform: rotate(360deg); }
-        }
     </style>
     <div style="max-width: 550px; margin: auto; float: none">
         <br/><br/>
diff --git a/archivebox/themes/default/static/admin.css b/archivebox/themes/default/static/admin.css
index 436a98ce..b2b58d64 100644
--- a/archivebox/themes/default/static/admin.css
+++ b/archivebox/themes/default/static/admin.css
@@ -1,3 +1,23 @@
+#logo {
+    height: 30px;
+    vertical-align: -6px;
+    padding-right: 5px;
+}
+#site-name:hover a {
+    opacity: 0.9;
+}
+#site-name .loader {
+    height: 25px;
+    width: 25px;
+    display: inline-block;
+    border-width: 3px;
+    vertical-align: -3px;
+    margin-right: 5px;
+    margin-top: 2px;
+}
+#branding h1, #branding h1 a:link, #branding h1 a:visited {
+    color: mintcream;
+}
 #header {
     background: #aa1e55;
     padding: 6px 14px;
@@ -16,6 +36,11 @@ div.breadcrumbs {
     padding: 6px 15px;
 }
 
+body.model-snapshot.change-list div.breadcrumbs,
+body.model-snapshot.change-list #content .object-tools {
+    display: none;
+}
+
 .module h2, .module caption, .inline-group h2 {
     background: #772948;
 }
@@ -55,15 +80,51 @@ div.breadcrumbs {
 }
 
 
-#content #changelist .actions {
+/*#content #changelist .actions {
     position: fixed;
     bottom: 0px;
     z-index: 800;
+}*/
+#content #changelist .actions {
+    float: right;
+    margin-top: -34px;
+    padding: 0px;
+    background: none;
+    margin-right: 0px;
 }
 
 #content #changelist .actions .button {
-    border-color: #aa1e55;
+    border-radius: 2px;
+    background-color: #f5dd5d;
+    color: #333;
+    font-size: 12px;
+    font-weight: 800;
+    margin-right: 4px;
+    box-shadow: 4px 4px 4px rgba(0,0,0,0.02);
+    border: 1px solid rgba(0,0,0,0.08);
 }
+#content #changelist .actions .button:hover {
+    border: 1px solid rgba(0,0,0,0.2);
+    opacity: 0.9;
+}
+#content #changelist .actions .button[name=verify_snapshots], #content #changelist .actions .button[name=update_titles] {
+    background-color: #dedede;
+    color: #333;
+}
+#content #changelist .actions .button[name=update_snapshots] {
+    background-color:lightseagreen;
+    color: #333;
+}
+#content #changelist .actions .button[name=overwrite_snapshots] {
+    background-color: #ffaa31;
+    color: #333;
+}
+#content #changelist .actions .button[name=delete_snapshots] {
+    background-color: #f91f74;
+    color: rgb(255 248 252 / 64%);
+}
+
+
 #content #changelist-filter h2 {
     border-radius: 4px 4px 0px 0px;
 }
@@ -72,6 +133,7 @@ div.breadcrumbs {
     #content #changelist-filter {
         top: 35px;
         width: 110px;
+        margin-bottom: 35px;
     }
 
     .change-list .filtered .results,
@@ -82,6 +144,16 @@ div.breadcrumbs {
     }
 }
 
+@media (max-width: 1127px) {
+    #content #changelist .actions {
+        position: fixed;
+        bottom: 6px;
+        left: 10px;
+        float: left;
+        z-index: 1000;
+    }
+}
+
 #content a img.favicon {
     height: 20px;
     width: 20px;
@@ -91,16 +163,20 @@ div.breadcrumbs {
 
 #content td, #content th {
     vertical-align: middle;
+    padding: 4px;
 }
 
 #content #changelist table input {
     vertical-align: -2px;
 }
 
+#content thead th .text a {
+    padding: 8px 4px;
+}
 
 #content th.field-added, #content td.field-updated {
     word-break: break-word;
-    min-width: 85px;
+    min-width: 128px;
     white-space: normal;
 }
 
@@ -111,6 +187,13 @@ div.breadcrumbs {
 #content td.field-files {
     white-space: nowrap;
 }
+#content td.field-files .exists-True {
+    opacity: 1;
+}
+#content td.field-files .exists-False {
+    opacity: 0.1;
+    filter: grayscale(100%);
+}
 #content td.field-size {
     white-space: nowrap;
 }
@@ -124,3 +207,18 @@ div.breadcrumbs {
     font-weight: 200;
     opacity: 0.6;
 }
+
+.loader {
+    border: 16px solid #f3f3f3; /* Light grey */
+    border-top: 16px solid #3498db; /* Blue */
+    border-radius: 50%;
+    width: 30px;
+    height: 30px;
+    box-sizing: border-box;
+    animation: spin 2s linear infinite;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
