diff --git a/photoapp/daemon.py b/photoapp/daemon.py
index 5b59b68..3dcad56 100644
--- a/photoapp/daemon.py
+++ b/photoapp/daemon.py
@@ -634,7 +634,9 @@ class JobsView(object):
             return self.index_onejob(uuid)
 
     def index_alljobs(self):
-        jobs = db.query(Job).all()
+        jobs = db.query(Job) \
+            .order_by(Job.created.desc()) \
+            .all()
 
         yield self.master.render("jobs.html", jobs=jobs)
 
diff --git a/photoapp/jobs.py b/photoapp/jobs.py
index e00eede..9838d03 100644
--- a/photoapp/jobs.py
+++ b/photoapp/jobs.py
@@ -119,11 +119,14 @@ from time import sleep
 
 
 def job_noop(dbsession, job, job_status):
+    """
+    job for testing the ui/api. Takes a few seconds to do nothing, and may pass or fail
+    """
     logger.info("job_noop: this example job does nothing")
     logger.info("job_noop: target photo: %s", job_status.photo_id)
 
     fail = randint(0, 1) == 0
-    sleep(10)
+    sleep(5)
 
     logger.info("job_noop: this time we %s", "fail" if fail else "succeed")
 
diff --git a/styles/less/main.less b/styles/less/main.less
index 7aada10..29a41f0 100644
--- a/styles/less/main.less
+++ b/styles/less/main.less
@@ -412,3 +412,50 @@ span.coords {
     text-align: center;
     display: block;
 }
+
+
+/* progress bars */
+.progress {
+    display: flex;
+    height: 40px;
+    overflow: hidden;
+    border: 0.5px solid #222;
+    border-radius: 10px;
+
+    text-align: center;
+    background: #666;
+    color: #fff;
+
+    &>div {
+        flex-grow: 1;
+        display: flex;
+        align-items: center;
+        padding: 0px 0px 0px 15px;
+
+        a {
+            color: #fff;
+        }
+
+        &.new {
+
+        }
+        &.running {
+            background-color: #993;
+        }
+        &.complete {
+            background-color: #397;
+        }
+        &.error {
+            background-color: #933;
+        }
+        &.cancelled {
+            background-color: #939;
+        }
+    }
+}
+
+
+// .progress .step:not(:last-child) {
+//   border-right: 1px solid rgba(0,0,0,0.8);
+// }
+
diff --git a/templates/job.html b/templates/job.html
index 5edc143..03c9252 100644
--- a/templates/job.html
+++ b/templates/job.html
@@ -14,34 +14,61 @@ lol head
 {% endblock %}
 
 {% block body %}
-{{ job }}
+{{ job }}<br>
 
 <h2>Progress</h2>
 
 <table>
+{% set ns = namespace(sum=0) %}
 {% for status, count in status_totals.items(): %}
 <tr>
+    {%- set ns.sum = ns.sum + count %}
     <td>{{ status }}</td>
     <td>{{ count }}</td>
 </tr>
 {% endfor %}
 </table>
+totalcount: {{ ns.sum }}<br>
+
+
+<div class="progress">
+    {% for status, count in status_totals.items(): %}
+        {% if count > 0 %}
+    <div style="flex-grow:{{ count }}" class="{{ status.name }}">
+        <a href="#targets-{{ status.name }}">{{ status.name }}: {{ count }}</a>
+    </div>
+        {% endif %}
+    {% endfor %}
+</div>
 
 <h2>Targets</h2>
 
+Total targets: {{ status_totals.values() | sum }}<br>
+
 Table of target -> how many photos it selected
 
 <h2>Target photos</h2>
+
+{% for status, count in status_totals.items(): %}
+    {% if count > 0 %}
+<a name="targets-{{ status.name }}"></a>
+<h3>{{ status.name | title }}</h3>
+
 <ul>
-{% for photo, photoset, target_status, target in statuses %}
-<li>
-    target: {{ target.id }}<br>
-    target_status: {{ target_status.id }}<br>
-    photo: <a href="/thumb/one/big/{{ photo.uuid }}.jpg">{{ photo.uuid }}</a><br />
-    set: <a href="/photo/{{ photoset.uuid }}">{{ photoset.uuid }}</a><br />
-    status: {{ target_status.status }}
-</li>
-{% endfor %}
+        {% for photo, photoset, target_status, target in statuses %}
+            {% if target_status.status == status %}
+    <li>
+        target: {{ target.id }}<br>
+        target_status: {{ target_status.id }}<br>
+        photo: <a href="/thumb/one/big/{{ photo.uuid }}.jpg">{{ photo.uuid }}</a><br />
+        set: <a href="/photo/{{ photoset.uuid }}">{{ photoset.uuid }}</a><br />
+        status: {{ target_status.status }}
+    </li>
+            {% endif %}
+        {% endfor %}
 </ul>
 
+    {% endif %}
+{% endfor %}
+
 {% endblock %}