diff --git a/index.html b/index.html
index 36d5c48..25cf5b9 100644
--- a/index.html
+++ b/index.html
@@ -13,9 +13,13 @@
         <!--@@INC:menu@@-->
         <li><a href="/">Main</a></li><li><form action="@@PAGE@@/search" method="POST"><input type="text" name="search"><input type="submit" name="submit" value="Search"></form></li>
       </ul>
+      <ul id="crumbs">
+        @@CRUMBS@@
+      </ul>
       <ul id="controls">
         @@CONTROLS@@
       </ul>
+
       <div id="index">
   
       </div>
diff --git a/index.js b/index.js
index 55b5637..c4bddc3 100644
--- a/index.js
+++ b/index.js
@@ -420,6 +420,16 @@ qwiki.rule('', '@@CONTROLS@@', function(req, res, instance, next) {
   res.write('<li><a href="'+req.url+'/edit"><img src="/edit.png">Edit</a></li><li><a href="'+req.url+'/new"><img src="/new.png">New Page</a></li>');
   next();
 });
+qwiki.rule('', '@@CRUMBS@@', function(req, res, instance, next) {
+  var parts = req.url.split('/');
+  var path = '';
+  parts[0] = '>';
+  for (var i = 0; i < parts.length; i++) {
+    path += (i == 0 ? '' : parts[i])+(i == parts.length-1 ? '' : '/');
+    res.write('<li><a href="'+path+'">'+parts[i]+'</a></li>');
+  }
+  next();
+});
 qwiki.rule('', '@@FOOTER@@', function(req, res, instance, next) {
   res.write('<a href="http://kettek.net/qwiki">qwiki</a> Copyright 2015 <a href="http://kettek.net">kts of kettek</a>');
   next();
diff --git a/wiki/style.css b/wiki/style.css
index f1cd555..5530d08 100644
--- a/wiki/style.css
+++ b/wiki/style.css
@@ -116,7 +116,7 @@ html,body {
   list-style: none;
   margin: 0;
   padding: 0;
-  background-color: #6c6c87;
+  background-color: #fcfce2;
   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
@@ -138,11 +138,53 @@ html,body {
   text-decoration: none;
   display: block;
   padding: 0.25em;
-  color: #ececf7;
+  color: #0c0c27;
   transition: all .10s;
+  box-shadow: rgba(0,0,0, 0.2) 0px 0px 4px; 
+  -moz-box-shadow: rgba(0,0,0, 0.2) 0px 0px 4px; 
+  -webkit-box-shadow: rgba(0,0,0, 0.2) 0px 0px 4px; 
 }
 #controls a:hover {
+  background-color: #acac92;
+  -webkit-transition: background-color .10s linear;
+  -moz-transition: background-color .10s linear;
+  -o-transition: background-color .10s linear;
+  -ms-transition: background-color .10s linear;
+  transition: background-color .10s linear;
+}
+/* breadcrumbs */
+#crumbs {
+  font-family: 'Oswald', sans-serif;
+  font-size: 75%;
+  width: 100%;
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
   background-color: #3c3c57;
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-flex-flow: row wrap;
+  justify-content: flex-start;
+  align-items: stretch;
+}
+#crumbs li {
+  text-align: left;
+}
+#crumbs a {
+  text-decoration: none;
+  padding: 0.25em;
+  display: block;
+  color: #ececf7;
+  transition: all .10s;
+  padding: 0.5em;
+  min-width: 4em;
+  border-right: 1px solid #2c2c47;
+}
+#crumbs a:hover {
+  background-color: #2c2c47;
   -webkit-transition: background-color .10s linear;
   -moz-transition: background-color .10s linear;
   -o-transition: background-color .10s linear;