--- a/default/static/ticket.css	Mon Dec 04 00:49:35 2017 +0100
+++ b/default/static/ticket.css	Mon Dec 04 00:50:40 2017 +0100
@@ -9,21 +9,53 @@
     padding: 0.3em;
 }
 
-.tickets table {
-    margin: 0 auto;
-    border-spacing: 0 0.5em;
+ul.xmlui_list {
+    list-style: none;
+    display: flex;
+    flex-direction: column;
+    padding: 0;
+}
+
+.xmlui_list li {
+    display: inline-flex;
+    background: #eee;
+    padding: 0.5em;
+    margin: 0.5em 0;
+    border: 1px solid silver;
+}
+
+.xmlui_list li:hover {
+    background: yellow;
 }
 
-.tickets tr:nth-child(even) {
-    background: #CCC9;
+.xmlui_list a {
+    display: flex;
+    width: 100%;
+    text-decoration: none;
+    color: inherit;
+}
+
+.xmlui_list a:visited {
+    color: inherit;
 }
 
-.tickets tr:nth-child(odd) {
-    background: #FFF;
+.tickets a.status_closed {
+    text-decoration: line-through;
+    color: grey;
 }
 
-.tickets tbody tr:hover {
-    background: yellow;
+.xmlui_field__id {
+    font-style: 1;
+    padding-right: 1em;
+}
+
+.xmlui_field__title {
+    padding-right: 1em;
+}
+
+.tickets a.severity_major .xmlui_field__title {
+    font-weight: bold;
+    color: red;
 }
 
 .tickets tbody tr.severity_major .td_title a::before {
@@ -31,11 +63,6 @@
     color: red;
 }
 
-.tickets tbody tr.status_closed {
-    text-decoration: line-through;
-    color: grey;
-}
-
 /* single ticket */
 
 .ticket {
@@ -90,7 +117,7 @@
     text-transform: uppercase;
 }
 
-.view #wid_labels span {
+.view #wid_labels span, .xmlui_field__labels span {
     font-size: 0.8em;
     background: #eae3e3;
     font-variant: small-caps;
@@ -140,3 +167,12 @@
 .comment_post {
     margin-top: 3em;
 }
+
+@media (min-width: 800px) {
+    ul.xmlui_list {
+        padding: 0 2em;
+    }
+    .xmlui_list li {
+        border-radius: 0.3em;
+    }
+}

--- a/default/ticket/overview.html	Mon Dec 04 00:49:35 2017 +0100
+++ b/default/ticket/overview.html	Mon Dec 04 00:50:40 2017 +0100
@@ -6,9 +6,11 @@
 
 {% block body %}
 <div id="tickets" class="view tickets overview">
-    {{ xmlui.generate_table(tickets, (('id', _('Id')),
-                                      ('title', _('Title'))),
-                            tr_class_fields=['status', 'priority', 'severity'],
-                            on_click=on_ticket_click) }}
+    {{ xmlui.generate_list(tickets, (('id', _('Id')),
+                                     ('title', _('Title')),
+                                     ('labels', _('Labels'))),
+                          {'id': '[{value}]'},
+                           item_class_fields=['status', 'priority', 'severity'],
+                           on_click=on_ticket_click) }}
 </div>
 {% endblock body %}