diff --git a/web/static/background.png b/web/static/background.png
new file mode 100644
index 0000000..9238d80
Binary files /dev/null and b/web/static/background.png differ
diff --git a/web/static/style.css b/web/static/style.css
new file mode 100644
index 0000000..d18d7e0
--- /dev/null
+++ b/web/static/style.css
@@ -0,0 +1,68 @@
+body {
+    font-family: sans-serif;
+    background: url('background.png') repeat;
+}
+
+a {
+    text-decoration: none;
+    color: black;
+}
+
+table, th, td {
+    border: 1px solid black;
+}
+
+.header {
+    width: 100%;
+    background-color: #94DBFF;
+}
+
+.header * {
+    list-style: none;
+    margin: 0 0;
+    padding: 0 0;
+}
+
+.header ul {
+    position: relative;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 99;
+    max-width: 100%;
+    margin: 0 auto;
+    padding: 0 1em;
+    display: block;
+}
+
+.header ul:after {
+    content: "";
+    clear: both;
+    display: block;
+}
+
+.header a {
+    text-align: center;
+    font-size: 1em;
+    padding: 1.63em 2em;
+    float: left;
+}
+
+.header a:hover {
+    background-color: #FF8533
+}
+
+#title {
+    float: left;
+    font-size: 1.174em;
+    padding: 1em;
+    background-color: #FF8533
+}
+
+.nav {
+    padding: 0em 0em;
+}
+
+.page {
+    background-color: #eeffee;
+}
diff --git a/web/templates/layout.html b/web/templates/layout.html
index 9afb795..dd2baa5 100644
--- a/web/templates/layout.html
+++ b/web/templates/layout.html
@@ -1,41 +1,25 @@
 <!doctype html>
-<style>
-    body            { font-family: sans-serif; background: #eee; }
-    a               { color: #377ba8; }
-    h1, h2          { color: #000000; font-family: 'Georgia', serif; margin: 0; }
-    h1              { border-bottom: 2px solid #eee; }
-    h2              { font-size: 1.2em; }
-
-    .page           { margin: 2em auto; width: 70em; border: 5px solid #ccc;
-    padding: 0.8em; background: white; }
-    .entries        { list-style: none; margin: 0; padding: 0; }
-    .entries li     { margin: 0.8em 1.2em; }
-    .entries li h2  { margin-left: -1em; }
-    .add-entry      { font-size: 0.9em; border-bottom: 1px solid #ccc; }
-    .add-entry dl   { font-weight: bold; }
-    .metanav        { text-align: right; font-size: 0.8em; padding: 0.3em;
-    margin-bottom: 1em; background: #fafafa; }
-    .flash          { background: #cee5F5; padding: 0.5em;
-    border: 1px solid #aacbe2; }
-    .error          { background: #f0d6d6; padding: 0.5em; }
-</style>
-<title>Data Gristle</title>
-<div class=page>
-  <h1>Data Gristle</h1>
-  <a href="http://www.github.com/kenfar/datagristle">More Info</a>
-
-  <a href="/">Home</a>>
-  {% set path = request.path.split('/')[1:] %}
-  {% set lvl = '/' %}
-  {% for p in path %}
-    {% set lvl = lvl + path[loop.index - 1] + '/' %}
-    {% if lvl == request.path %}
-      <a href="{{ lvl }}">{{ p }}</a>
-    {% else %}
-      <a href="{{ lvl }}">{{ p }}</a>>
-    {% endif %}
-  {% endfor %}
-
-  {% block body %}
-  {% endblock %}
-</div>
+<head>
+    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css') }}">
+    <title>Data Gristle</title>
+</head>
+<body>
+    {% set path = request.path.split('/')[1:] %}
+    <div class="header">
+        <ul>
+            <li><a href="/" id="title"><h2>Data Gristle</h2></a></li>
+            <li><a href="http://www.github.com/kenfar/datagristle">More Info</a></li>
+            {% for p in path %}
+                {% if p != '' %}
+                    <li>
+                        <a href="/" class="nav">&#10146;{{ p }}</a>
+                    </li>
+                {% endif %}
+            {% endfor %}
+        </ul>
+    </div>
+    <div class=page>
+      {% block body %}
+      {% endblock %}
+    </div>
+</body>
