diff --git a/package_tracking/http.py b/package_tracking/http.py
index 3f83125..10e87c4 100644
--- a/package_tracking/http.py
+++ b/package_tracking/http.py
@@ -10,21 +10,85 @@ TEMPLATE = '''
 <head>
 <style type="text/css">
 
+.tracking-grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-gap: 10px;
+}
 
+.tracking-item {
+    display: grid;
+    grid-template-columns: 150px 1fr auto;
+    grid-gap: 1em;
+    padding: 0.5em 0.2em;
+    border-radius: 5px;
+    border: black solid 1px;
+}
+
+
+.tracking-name {
+    grid-column: 1;
+}
+
+.tracking-name-inner {
+    border: solid black 1px;
+    padding: 0.2em;
+    border-radius: 3px;
+    background-color: #FFF8;
+}
+
+a {
+    text-decoration: none;
+}
+
+.tracking-status {
+    grid-column: 2;
+}
+
+.tracking-update-date {
+    grid-column: 3;
+}
+
+.tracking-item.delivered {
+    background: #ABFBD6;
+}
+
+.tracking-item.transit {
+    background: #AEABFB;
+}
+
+h1 {
+    text-align: center;
+}
+main {
+    max-width: 800px;
+    margin:auto;
+}
+
+body {
+    font-family: sans;
+}
+
+a {
+    color:black;
+}
 </style>
 </head>
 <body>
 
-<h1>My very own thingy</h1>
+<h1>Parcels</h1>
 
 <main>
 
 <div class="tracking-grid">
 % for entry, tracking_data in tracking_results:
-    <div class="tracking-name"><a href="{{tracking_data.tracking_url}}">{{ entry.name }}/{{entry.number}}</a></div>
-    <div class="tracking-status">{{ tracking_data.status }}</div>
-    <div class="tracking-status">{{ tracking_data.latest_state().status }}</div>
-    <div class="tracking-status">{{ tracking_data.latest_state().date }}</div>
+    <a href="{{tracking_data.tracking_url}}">
+    <div class="tracking-item {{tracking_data.status}}">
+        <div class="tracking-name" title="{{entry.number}}"><span class="tracking-name-inner">{{ entry.name }}</span></div>
+        <div class="tracking-status">{{ tracking_data.latest_state().status }}</div>
+        <div class="tracking-update-date">{{ tracking_data.latest_state().date.date() }}</div>
+    </div>
+    </a>
 % end
 </div>
 
@@ -44,7 +108,7 @@ def index():
     tracking_results_by_id = {result.tracking_number: result for result in tracking_results}
 
     derps = [(e, tracking_results_by_id.get(e.number)) for e in tracking_entries]
-    derps.sort(key=lambda x: x[1].latest_state().date)
+    derps.sort(key=lambda x: x[1].latest_state().date,reverse=True)
 
     return template(TEMPLATE, tracking_results=derps)
 
