diff --git a/src/runboat/webui/build.html b/src/runboat/webui/build.html
index 034449b..a176aa6 100644
--- a/src/runboat/webui/build.html
+++ b/src/runboat/webui/build.html
@@ -1,6 +1,11 @@
 <html>
     <head>
         <title>Runboat build</title>
+        <style>
+            body {
+                font-family: Arial, Helvetica, sans-serif;
+            }
+        </style>
     </head>
     <body>
         <runboat-build id="build"></runboat-build>
diff --git a/src/runboat/webui/builds.html b/src/runboat/webui/builds.html
index b94cf8f..3ddf23a 100644
--- a/src/runboat/webui/builds.html
+++ b/src/runboat/webui/builds.html
@@ -2,12 +2,15 @@
     <head>
         <title>Runboat builds</title>
         <style>
+            body {
+                font-family: Arial, Helvetica, sans-serif;
+            }
             .row {
                 display: flex;
                 flex-direction: row;
             }
             runboat-build {
-                flex: 0 0 15em;
+                margin: 0.25em;
             }
         </style>
     </head>
@@ -27,8 +30,8 @@
             const evtSource = new EventSource(url);
             evtSource.onmessage = function(event) {
                 var oEvent = JSON.parse(event.data);
+                var buildElement = document.getElementById(oEvent.build.name);
                 if (oEvent.event == "upd") {
-                    var buildElement = document.getElementById(oEvent.build.name);
                     if (buildElement) {
                         // update event element
                         buildElement.build = oEvent.build;
@@ -53,7 +56,6 @@
                         rowElement.insertBefore(buildElement, rowElement.firstChild);
                     }
                 } else if (oEvent.event == "del") {
-                    const buildElement = document.getElementById(oEvent.build.name);
                     if (buildElement) {
                         buildElement.remove();
                     }
diff --git a/src/runboat/webui/runboat-build-element.js b/src/runboat/webui/runboat-build-element.js
index 320b5d5..6c1e77e 100644
--- a/src/runboat/webui/runboat-build-element.js
+++ b/src/runboat/webui/runboat-build-element.js
@@ -1,4 +1,4 @@
-import {LitElement, html} from 'https://unpkg.com/lit@2.0.2?module';
+import {LitElement, html, css} from 'https://unpkg.com/lit@2.0.2?module';
 
 class RunboatBuildElement extends LitElement {
     static get properties() {
@@ -12,35 +12,60 @@ class RunboatBuildElement extends LitElement {
         this.build = {};
     }
 
+    static styles = css`
+        .build-card {
+            padding: 0.5em;
+            width: 15em;
+            background-color: lightgray;
+        }
+        .build-name {
+            font-size: x-small;
+        }
+        .build-status-stopped {
+            background-color: paleturquoise;
+        }
+        .build-status-started {
+            background-color: palegreen;
+        }
+        .build-status-failed {
+            background-color: palevioletred;
+        }
+        p {
+            margin-top: 0.5em;
+            margin-bottom: 0.5em;
+        }
+    `;
+
     render() {
         return html`
-        <div>
-            <p>${this.build.name}</p>
+        <div class="build-card build-status-${this.build.status}">
+            <p class="build-name">${this.build.name}</p>
             <p>
                 ${this.build.repo}
                 ${this.build.pr?
                     html`PR <a href="${this.build.repo_link}">${this.build.pr}</a> to`:""
                 }
                 <a href="${this.build.repo_link}">${this.build.target_branch}</a>
+                <br>
                 ${this.build.git_commit?
                     html`(<a href="${this.build.repo_commit_link}">${this.build.git_commit.substring(0, 8)}</a>)`:""
                 }
             </p>
-            <p>Status: ${this.build.status}</p>
-            <p>Logs:
-                <a href="/api/v1/builds/${this.build.name}/init-log">init log</a>
+            <p>
+                ${this.build.status}
+                | <a href="/api/v1/builds/${this.build.name}/init-log">init log</a>
                 ${this.build.status == "started"?
                     html`| <a href="/api/v1/builds/${this.build.name}/log">log</a>`:""
                 }
+                ${this.build.status == "started"?
+                   html`| <a href="${this.build.deploy_link}">🚪 live</a>`:""
+                }
             </p>
             <p>
                 <button @click="${this.stopHandler}" ?disabled="${this.build.status != "started"}">stop</button>
                 <button @click="${this.startHandler}" ?disabled="${this.build.status != "stopped"}">start</button>
-                ${this.build.status == "started"?
-                   html`<a href="${this.build.deploy_link}">=&gt; live</a>`:""
-                }
             </p>
-        <div>
+        </div>
         `;
     }
 
