diff --git a/unreadpoly/elements/xinu-email-app.html b/unreadpoly/elements/xinu-email-app.html
new file mode 100644
index 0000000..fc1f7a7
--- /dev/null
+++ b/unreadpoly/elements/xinu-email-app.html
@@ -0,0 +1,70 @@
+<link rel="import" href="../bower_components/polymer/polymer.html">
+
+<link rel="import" href="../elements/xinu-email-unread.html">
+
+<polymer-element name="xinu-email-app">
+    <template>
+    <style>
+:host {
+    height: 100%;
+}
+
+core-header-panel {
+    height: 100%;
+}
+
+core-header-panel[mode=cover]::shadow #mainContainer {
+    left: 70px;
+}
+
+.core-header {
+    height: 4em;
+    line-height: 2em;
+    font-size: 18px;
+    padding: 0 10px;
+    background-color: #4F7DC9;
+    color: #FFF;
+    transition: height 0.2s;
+}
+
+.core-header.tall {
+    height: 180px;
+}
+
+.core-header.medium-tall {
+    height: 120px;
+}
+
+paper-fab#refresh-button {
+    background: #080;
+}
+    </style>
+        <core-ajax id="fetch" url="/unread?format=list" auto handleAs="json" response="{{boxes}}">
+        </core-ajax>
+        <core-header-panel flex mode="waterfall">
+            <div class="core-header" horizontal layout center>
+                <div flex>Unread</div>
+                <paper-fab id="refresh-button" icon="refresh" on-click="{{handleRefresh}}" end></paper-fab>
+            </div>
+            <div class="content">
+                <xinu-email-unread boxes="{{boxes}}"></xinu-email-unread>
+            </div>
+        </core-header-panel>
+    </template>
+
+    <script>
+    Polymer('xinu-email-app', {
+      log: function() {
+        console.log('xinu-email-app ', arguments);
+      },
+      ready: function() {
+        this.log('ready');
+      },
+      handleRefresh: function(event, detail, sender) {
+        this.log('handleRefresh');
+        this.$.fetch.go();
+      }
+    });
+    </script>
+</polymer-element>
+
diff --git a/unreadpoly/elements/xinu-email-unread.html b/unreadpoly/elements/xinu-email-unread.html
new file mode 100644
index 0000000..1482183
--- /dev/null
+++ b/unreadpoly/elements/xinu-email-unread.html
@@ -0,0 +1,32 @@
+<link rel="import" href="../bower_components/polymer/polymer.html">
+
+<polymer-element name="xinu-email-unread" attributes="boxes" noscript>
+    <template>
+        <style>
+        a {
+            color: #000;
+            text-decoration: none;
+        }
+
+        /*
+        .item {
+            background: linear-gradient(#fff, #f8f8f8);
+            padding: .5em;
+        }
+
+        .item:hover {
+            background: linear-gradient(#e8e8e8, #eee);
+        }
+        */
+        </style>
+
+        <template repeat="{{box in boxes}}">
+            <a href="#{{box.name}}" target="_self">
+                <paper-item icon="folder" horizontal layout>
+                    <div flex>{{box.name}}</div>
+                    <div end>{{box.count}}</div>
+                </paper-item>
+            </a>
+        </template>
+    </template>
+</polymer-element>
diff --git a/unreadpoly/index.html b/unreadpoly/index.html
index 8d1f521..1d835b5 100644
--- a/unreadpoly/index.html
+++ b/unreadpoly/index.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <html>
-  <head>
+<head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
   <meta name="mobile-web-app-capable" content="yes">
   <meta name="apple-mobile-web-app-capable" content="yes">
@@ -23,99 +23,16 @@
   <link rel="import" href="bower_components/paper-fab/paper-fab.html">
   <link rel="import" href="bower_components/paper-item/paper-item.html">
 
+  <link rel="import" href="elements/xinu-email-app.html">
 
   <style>
-  html,body {
-    height: 100%;
-    margin: 0;
+html,body {
     background-color: #E5E5E5;
     font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
-  }
-
-/*
-    core-header-panel {
-      float: left;
-      width: 360px;
-      height: 400px;
-      margin: 5px;
-    }
-*/
-
-    core-header-panel[mode=cover]::shadow #mainContainer {
-      left: 70px;
-    }
-
-    .core-header {
-      height: 4em;
-      line-height: 2em;
-      font-size: 18px;
-      padding: 0 10px;
-      background-color: #4F7DC9;
-      color: #FFF;
-      transition: height 0.2s;
-    }
-
-    .core-header.tall {
-      height: 180px;
-    }
-
-    .core-header.medium-tall {
-      height: 120px;
-    }
-
-    .content {
-    }
-
-paper-fab#refresh {
-    background: #080;
 }
-
   </style>
-  </head>
-  <body unresolved fullbleed layout vertical touch-action="auto">
-
-<polymer-element name="xinu-unread" noscript>
-<template>
-<style >
-a {
-    color: #000;
-    text-decoration: none;
-}
-
-/*
-.item {
-    background: linear-gradient(#fff, #f8f8f8);
-    padding: .5em;
-}
-
-.item:hover {
-    background: linear-gradient(#e8e8e8, #eee);
-}
-*/
-</style>
-
-<core-ajax url="/unread?format=list" auto handleAs="json" response="{{boxes}}">
-</core-ajax>
-<template repeat="{{box in boxes}}">
-    <a href="#{{box.name}}" target="_self">
-        <paper-item icon="folder" horizontal layout>
-            <div flex>{{box.name}}</div>
-            <div end>{{box.count}}</div>
-        </paper-item>
-    </a>
-</template>
-</template>
-</polymer-element>
-
-<core-header-panel flex mode="waterfall">
-    <div class="core-header" horizontal layout center>
-        <div flex>Unread</div>
-        <paper-fab id="refresh" icon="refresh" end></paper-fab>
-    </div>
-    <div class="content">
-        <xinu-unread></xinu-unread>
-    </div>
-</core-header-panel>
-
+</head>
+<body fullbleed layout vertical>
+  <xinu-email-app></xinu-email-app>
 </body>
 </html>
