diff --git a/static/debug.css b/static/debug.css
new file mode 100644
index 0000000..841dc01
--- /dev/null
+++ b/static/debug.css
@@ -0,0 +1,82 @@
+@import url(http://fonts.googleapis.com/css?family=Roboto);
+
+container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  font-family: 'Roboto';
+}
+
+subjectcontainer {
+  flex-grow: 1;
+}
+
+messagecontainer {
+  flex-grow: 2;
+}
+
+pincontainer {
+  flex-grow: 2;
+}
+
+.verticalcontainer {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}
+
+subjectcontainer .panel {
+  border-color: #bce8f1;
+}
+
+subjectcontainer panelheading {
+  background-image: linear-gradient(to bottom, #d9edf7 0%, #c4e3f3 100%);
+  color: #1a3c4d;
+}
+
+messagecontainer .panel {
+  border-color: #d6e9c6;
+}
+
+messagecontainer panelheading {
+  background-image: linear-gradient(to bottom,#dff0d8 0,#d0e9c6 100%);
+  color: #274d05;
+}
+
+pincontainer .panel {
+  border-color: #faebcc;
+}
+
+pincontainer panelheading {
+  background-image: linear-gradient(to bottom,#fcf8e3 0,#faf2cc 100%);
+  color: #4d3d21;
+}
+
+.panel {
+  flex-grow: 1;
+  margin: 5px;
+  background-color: #fff;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
+  min-height: 60px;
+}
+
+panelheading {
+  display: block;
+  padding: 1px 0 4px 7px;
+  border-bottom: 1px solid transparent;
+  border-top-left-radius: 3px;
+  border-top-right-radius: 3px;
+  font-size: 18px;
+  font-variant: small-caps;
+}
+
+.fixed {
+  flex-grow: 0;
+}
diff --git a/static/debug.html b/static/debug.html
index 7bac87b..c493dbb 100644
--- a/static/debug.html
+++ b/static/debug.html
@@ -1,147 +1,34 @@
 <html>
   <head>
     <script src="/cosmopolite/static/cosmopolite.js" charset="UTF-8"></script>
-    <style>
-a {
-  text-decoration: none;
-}
-    </style>
+    <link rel="stylesheet" type="text/css" href="debug.css">
   </head>
   <body>
-    <div>Google user: <span id="google_user"></span></div>
-
-    <div>
-      Subject: <input type="text" id="subject">
-      <input type="button" id="subscribe" value="Subscribe">
-    </div>
-    <div>
-      <select id="subscriptions"></select>
-      <input type="button" id="unsubscribe" value="Unsubscribe">
-    </div>
-
-    <hr>
-
-    <div>
-      Message: <input type="text" id="message">
-    </div>
-    <div>
-      <input type="button" id="send" value="Send">
-      <input type="button" id="pin" value="Pin">
-    </div>
-
-    <hr>
-
-    <div id="pins"></div>
-
-    <hr>
-
-    <div id="messages"></div>
-
-    <script>
-var subject = document.getElementById('subject');
-var subscriptions = document.getElementById('subscriptions');
-
-var message = document.getElementById('message');
-
-var pins = document.getElementById('pins');
-
-var messages = document.getElementById('messages');
-
-var addMessage = function(message) {
-  var messageDiv = document.createElement('div');
-  messageDiv.appendChild(document.createTextNode(
-    (new Date(message['created'] * 1000)).toString() +
-    ' <????-' + (Math.abs(message['sender'].hashCode()) % 10000) + '> ' +
-    message['message']
-  ));
-  messages.appendChild(messageDiv);
-};
-
-var addPin = function(pin) {
-  var pinDiv = document.createElement('div');
-  pinDiv.appendChild(document.createTextNode(
-    (new Date(pin['created'] * 1000)).toString() +
-    ' <????-' + (Math.abs(pin['sender'].hashCode()) % 10000) + '> ' +
-    pin['message']
-  ));
-  pinDiv.pinId = pin['id'];
-  pins.appendChild(pinDiv);
-};
-
-window.addEventListener('load', function() {
-  var googleUser = document.getElementById('google_user');
-
-  var callbacks = {
-    onLogin: function(username, logout_url) {
-      googleUser.innerHTML =
-        username +
-        ' <a href="' + logout_url + '" target="_blank">(log out)</a>';
-    },
-    onLogout: function(login_url) {
-      googleUser.innerHTML =
-        '<a href="' + login_url + '" target="_blank">(log in)</a>';
-    },
-    onMessage: function(message) {
-      if (subscriptions.value != message['subject']['name']) {
-        return;
-      }
-      addMessage(message);
-    },
-    onPin: function(pin) {
-      if (subscriptions.value != pin['subject']['name']) {
-        return;
-      }
-      addPin(pin);
-    },
-    onUnpin: function(pin) {
-      if (subscriptions.value != pin['subject']['name']) {
-        return;
-      }
-      for (var i = 0; i < pins.childNodes.length; i++) {
-        var pinDiv = pins.childNodes[i];
-        if (pinDiv.pinId == pin['id']) {
-          pins.removeChild(pinDiv);
-          break;
-        }
-      }
-    },
-  };
-
-  var debug = new Cosmopolite(callbacks);
-
-  document.getElementById('subscribe').addEventListener('click', function() {
-    debug.subscribe(subject.value, -1);
-    var option = document.createElement('option');
-    option.text = subject.value;
-    subscriptions.options.add(option);
-    subscriptions.dispatchEvent(new CustomEvent('change'));
-  });
-
-  document.getElementById('unsubscribe').addEventListener('click', function() {
-    debug.unsubscribe(subscriptions.value);
-    subscriptions.options.remove(subscriptions.options.selectedIndex);
-    subscriptions.dispatchEvent(new CustomEvent('change'));
-  });
-
-  document.getElementById('send').addEventListener('click', function() {
-    debug.sendMessage(subscriptions.value, message.value);
-  });
-
-  document.getElementById('pin').addEventListener('click', function() {
-    debug.pin(subscriptions.value, message.value);
-  });
-
-  document.getElementById('subscriptions').addEventListener('change', function() {
-    messages.innerHTML = '';
-    pins.innerHTML = '';
-    if (!subscriptions.value) {
-      return;
-    }
-    debug.getMessages(subscriptions.value).forEach(addMessage);
-    debug.getPins(subscriptions.value).forEach(addPin);
-  });
-
-});
-    </script>
+    <container>
+      <subjectcontainer class="verticalcontainer">
+        <subjectlist class="panel">
+          <panelheading>Subjects</panelheading>
+        </subjectlist>
+        <subscribe class="panel fixed">
+          <panelheading>Subscribe</panelheading>
+        </subscribe">
+      </subjectcontainer>
+      <messagecontainer class="verticalcontainer">
+        <messagelist class="panel">
+          <panelheading>Messages</panelheading>
+        </messagelist>
+        <sendmessage class="panel fixed">
+          <panelheading>Send Message</panelheading>
+        </sendmessage>
+      </messagecontainer>
+      <pincontainer class="verticalcontainer">
+        <pinlist class="panel">
+          <panelheading>Pins</panelheading>
+        </pinlist>
+        <pin class="panel fixed">
+          <panelheading>Pin</panelheading>
+        </pin>
+      </pincontainer>
+    </container>
   </body>
 </html>
