diff --git a/beetsplug/web/__init__.py b/beetsplug/web/__init__.py
index c346a01b9..be2ed5419 100644
--- a/beetsplug/web/__init__.py
+++ b/beetsplug/web/__init__.py
@@ -113,6 +113,6 @@ class WebPlugin(BeetsPlugin):
                               default=False, help='debug mode')
         def func(lib, config, opts, args):
             app.config['lib'] = lib
-            app.run(debug=opts.debug)
+            app.run(host='', debug=opts.debug)
         cmd.func = func
         return [cmd]
diff --git a/beetsplug/web/static/beets.css b/beetsplug/web/static/beets.css
new file mode 100644
index 000000000..df1b15096
--- /dev/null
+++ b/beetsplug/web/static/beets.css
@@ -0,0 +1,78 @@
+body {
+    font-family: Helvetica, Arial, sans-serif;
+}
+
+#header {
+    position: fixed;
+    left: 0;
+    right: 0;
+    top: 0;
+    height: 1.7em;
+    
+    color: white;
+    
+    /* shadowy border */
+    box-shadow: 0 0 20px #999;
+    -webkit-box-shadow: 0 0 20px #999;
+    -moz-box-shadow: 0 0 20px #999;
+
+    /* background gradient */
+    background: #0e0e0e;
+    background: -moz-linear-gradient(top, #6b6b6b 0%, #0e0e0e 100%);
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6b6b6b), color-stop(100%,#0e0e0e));
+    background: -webkit-linear-gradient(top, #6b6b6b 0%,#0e0e0e 100%);
+    background: -o-linear-gradient(top, #6b6b6b 0%,#0e0e0e 100%);
+    background: -ms-linear-gradient(top, #6b6b6b 0%,#0e0e0e 100%);
+    background: linear-gradient(top, #6b6b6b 0%,#0e0e0e 100%);
+}
+#header h1 {
+    font-size: 1em;
+    font-weight: bold;
+    color: white;
+    margin: 0.25em;
+}
+
+#entities {
+    width: 17em;
+    
+    position: fixed;
+    top: 1.7em;
+    left: 0;
+    bottom: 0;
+    margin: 0;
+    
+    z-index: 1;
+    background: #dde4eb;   
+
+    /* shadowy border */
+    box-shadow: 0 0 20px #666;
+    -webkit-box-shadow: 0 0 20px #666;
+    -moz-box-shadow: 0 0 20px #666;
+}
+#queryForm {
+    display: block;
+    text-align: center;
+    margin: 0.25em 0;
+}
+#query {
+    width: 95%;
+    font-size: 1em;
+}
+#entities ul {
+    width: 17em;
+    
+    position: fixed;
+    top: 4em;
+    left: 0;
+    bottom: 0;
+    margin: 0;
+    padding: 0;
+
+    overflow-y: auto;
+    overflow-x: hidden;
+}
+#entities ul li {
+    list-style: none;
+    margin: 0 8px 8px;
+    padding: 0;
+}
diff --git a/beetsplug/web/templates/index.html b/beetsplug/web/templates/index.html
index 9903ffbee..d9e7cee39 100644
--- a/beetsplug/web/templates/index.html
+++ b/beetsplug/web/templates/index.html
@@ -3,6 +3,9 @@
     <head>
         <title>beets</title>
 
+        <link rel="stylesheet"
+        href="{{ url_for('static', filename='beets.css') }}" type="text/css"> 
+
         <script src="{{ url_for('static', filename='jquery.js') }}"></script>
         <script src="{{ url_for('static', filename='underscore.js') }}">
         </script>
@@ -10,17 +13,21 @@
         <script src="{{ url_for('static', filename='beets.js') }}"></script>
     </head>
     <body>
-        <h1>beets</h1>
-        <form id="queryForm">
-            <input type="search" id="query">
-        </form>
-        <ul id="results">
-        </ul>
+        <div id="header">
+            <h1>beets</h1>
+        </div>
+
+        <div id="entities">
+            <form id="queryForm">
+                <input type="search" id="query" placeholder="Query">
+            </form>
+            <ul id="results">
+            </ul>
+        </div>
 
         <!-- Templates. -->
         <script type="text/template" id="item-entry-template">
             <%= artist %> - <%= title %>
-            <a href="/item/<%= id %>/file">download</a>
         </script>
     </body>
 </html>
