diff --git a/flask_website.py b/flask_website.py
index 795cd15a..a65d3580 100644
--- a/flask_website.py
+++ b/flask_website.py
@@ -93,7 +93,7 @@ def mailinglist_archive(page):
                            page=page, threads=threads)
 
 
-@app.route('/mailinglist/archives/<int:year>/<int:month>/<int:day>/<slug>/')
+@app.route('/mailinglist/archive/<int:year>/<int:month>/<int:day>/<slug>/')
 def mailinglist_show_thread(year, month, day, slug):
     thread = Thread.get(year, month, day, slug)
     if thread is None:
@@ -101,6 +101,11 @@ def mailinglist_show_thread(year, month, day, slug):
     return render_template('mailinglist/show_thread.html', thread=thread)
 
 
+@app.route('/snippets/')
+def snippets():
+    return render_template('snippets/index.html')
+
+
 @app.errorhandler(404)
 def not_found(error):
     return render_template('404.html'), 404
diff --git a/static/mailinglist.js b/static/mailinglist.js
index abd3b30f..41456b10 100644
--- a/static/mailinglist.js
+++ b/static/mailinglist.js
@@ -9,7 +9,7 @@ $(function() {
     $('ul.mailtree div.link').removeClass('selected');
     $('#link-' + id).addClass('selected').focus();
     $('div.mail').hide();
-    $('#' + id).show();
+    $('h2:first').text($('h3', $('#' + id).show()).text());
     if (!(document.location.hash == '' && id == first_mail))
       document.location.href = '#' + id;
     window.scrollTo(pos.x, pos.y);
@@ -19,6 +19,7 @@ $(function() {
     .addClass('dynamic-mail')
     .appendTo($('<div></div>').insertBefore('div.mail:first'))
     .hide();
+  $('div.mail h3').hide();
 
   $('div.link').each(function() {
     var id = $('a', $(this).parent()).attr('href').substr(1);
diff --git a/static/snippets.png b/static/snippets.png
new file mode 100644
index 00000000..2fdfed05
Binary files /dev/null and b/static/snippets.png differ
diff --git a/static/style.css b/static/style.css
index f73a3039..63ed7fff 100644
--- a/static/style.css
+++ b/static/style.css
@@ -15,22 +15,28 @@ ul         { margin: 15px 0 15px 0; padding: 0; list-style: none; line-height: 1
 ul li:before { content: "\00BB \0020"; color: #888; position: absolute; margin-left: -19px; }
 blockquote { margin: 0; font-style: italic; color: #444; }
 .footer    { font-size: 13px; color: #888; text-align: right; margin-top: 25px; }
-.backnav   { text-align: center; color: #444; font-style: italic; }
+.nav       { text-align: center; }
+.nav a     { font-style: italic; }
+.backnav   { float: right; color: #444; font-style: italic;
+             margin: 5px 0 0 0; font-size: 0.9em; }
 
 /* mailinglist */
 .pagination         { text-align: center; font-size: 15px; margin: 20px 0 0 0; }
 .disabled           { color: #888; }
 .archive .meta      { font-size: 0.9em; display: block; margin: 0 0 0.5em 1em; }
-.mailtree           { border-top: 1px solid black; padding: 5px 10px 5px 10px;
-                      border-bottom: 1px solid black; font-size: 14px; }
+.mailtree           { border-top: 1px solid black; padding: 5px 12px 5px 12px;
+                      border-bottom: 1px solid black; font-size: 14px;
+                      max-height: 100px; overflow: auto; }
 .mailtree ul        { margin: 0 0 0 15px; line-height: 1.5; }
 .mailtree li:before { display: none; }
-.mailtree .selected:before { content: "\00BB \0020"; color: #888;
-                             position: absolute; margin-left: -10px; }
+.mailtree .selected { background: #fafafa; }
+.mailtree .selected:before { content: "\00BB\0020"; color: #888;
+                             position: relative; margin-left: -12px;
+                             width: 12px!important; }
 .mail               { margin: 15px 0; }
 .children .mail     { margin: 15px 0 15px 20px; }
 .dynamic-mail       { margin-left: 0!important; }
-.mail dl            { margin: 0; padding-bottom: 10px;
+.mail dl            { margin: 0; padding-bottom: 15px;
                       border-bottom: 1px solid black; }
 .mail dl dt         { color: #888; width: 70px; float: left; height: 20px; }
 .mail dl dd         { height: 20px; width: 500px; }
diff --git a/templates/index.html b/templates/index.html
index fd66ac35..d9a9a27f 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -6,9 +6,11 @@
     h1 span, p.tagline { display: none; }
   </style>
 {% endblock %}
-{% block body %}
-  <h1><span>Flask</span></h1>
+{% block body_title %}
+  {{ super() }}
   <p class=tagline>because sometimes a pocket knife is not enough
+{% endblock %}
+{% block body %}
   <blockquote>
     Flask is a microframework for Python based on Werkzeug, Jinja 2 and good intentions.
     And before you ask: It's <a href=docs/license/>BSD licensed</a>!
diff --git a/templates/layout.html b/templates/layout.html
index a48fa502..51e1756a 100644
--- a/templates/layout.html
+++ b/templates/layout.html
@@ -7,6 +7,14 @@
   src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
 {% endblock %}
 <div class=box>
+  {% block body_title %}
+    <h1><span>{{ self.title() }}</span></h1>
+  {% endblock %}
+  <p class=nav>
+    <a href=/>overview</a> //
+    <a href=/docs/>documentation</a> //
+    <a href=/mailinglist/>mailinglist</a> //
+    <a href=/snippets/>snippets</a>
   {% block body %}{% endblock %}
   <p class=footer>&copy; Copyright 2010 by <a href=http://lucumr.pocoo.org/>Armin Ronacher</a>
 </div>
diff --git a/templates/mailinglist/archive.html b/templates/mailinglist/archive.html
index 53c1d73d..541d7287 100644
--- a/templates/mailinglist/archive.html
+++ b/templates/mailinglist/archive.html
@@ -1,6 +1,6 @@
 {% extends "mailinglist/layout.html" %}
 {% block title %}Mailinglist Archive{% endblock %}
-{% block mailbody %}
+{% block body %}
   <h2>Mailinglist Archive</h2>
   <ul class=archive>
   {% for thread in threads %}
diff --git a/templates/mailinglist/index.html b/templates/mailinglist/index.html
index 2cb236f4..1a0a2468 100644
--- a/templates/mailinglist/index.html
+++ b/templates/mailinglist/index.html
@@ -1,6 +1,6 @@
 {% extends "mailinglist/layout.html" %}
 {% block title %}Mailinglist{% endblock %}
-{% block mailbody %}
+{% block body %}
   <p>
     There is a mailinglist for Flask hosted on <a
     href=http://librelist.com/>librelist</a> you can use for both user requests
diff --git a/templates/mailinglist/layout.html b/templates/mailinglist/layout.html
index 0ee5f69f..c351c4dd 100644
--- a/templates/mailinglist/layout.html
+++ b/templates/mailinglist/layout.html
@@ -6,16 +6,6 @@
     h1 span { display: none; }
   </style>
 {% endblock %}
-{% block body %}
+{% block body_title %}
   <h1><span>Flask Mailinglist</span></h1>
-  <div class=backnav>
-    <a href="{{ url_for('index') }}">back to website</a>
-    {% if request.endpoint != 'mailinglist_index' %}//
-    <a href="{{ url_for('mailinglist_index') }}">list information</a>
-    {% endif %}
-    {% if request.endpoint != 'mailinglist_archive' %}//
-    <a href="{{ url_for('mailinglist_archive') }}">go to the archive</a>
-    {% endif %}
-  </div>
-  {% block mailbody %}{% endblock %}
 {% endblock %}
diff --git a/templates/mailinglist/show_thread.html b/templates/mailinglist/show_thread.html
index 7be8adae..f9e1d4bf 100644
--- a/templates/mailinglist/show_thread.html
+++ b/templates/mailinglist/show_thread.html
@@ -4,7 +4,9 @@
   {{ super() }}
   <script type=text/javascript src=/static/mailinglist.js></script>
 {% endblock %}
-{% block mailbody %}
+{% block body %}
+  <p class=backnav>
+    <a href=/mailinglist/archive/>&laquo; back to archive</a>
   <h2>{{ thread.title }}</h2>
 
   <ul class=mailtree>
diff --git a/templates/snippets/index.html b/templates/snippets/index.html
new file mode 100644
index 00000000..102a8f4c
--- /dev/null
+++ b/templates/snippets/index.html
@@ -0,0 +1,17 @@
+{% extends "snippets/layout.html" %}
+{% block title %}Snippets Archive{% endblock %}
+{% block body %}
+  <p>
+    Welcome to the Flask snippet archive.  This is the place where anyone
+    can drop helpful pieces of code for others to use.
+  <p>
+    In order to add snippets to this page or to add comments, all you need
+    is an <a href=http://en.wikipedia.org/wiki/OpenID>OpenID</a> account.
+  <form action=/snippets/search/ method=get>
+    <p>
+      Search snippets:
+      <input type=text name=q size=30>
+      <input type=submit value=Search>
+  </form>
+  <h2>Snippets by Category</h2>
+{% endblock %}
diff --git a/templates/snippets/layout.html b/templates/snippets/layout.html
new file mode 100644
index 00000000..56449879
--- /dev/null
+++ b/templates/snippets/layout.html
@@ -0,0 +1,11 @@
+{% extends "layout.html" %}
+{% block head %}
+  {{ super() }}
+  <style type=text/css>
+    h1 { margin: 0 0 30px 0; background: url(/static/snippets.png) no-repeat center; height: 165px; }
+    h1 span { display: none; }
+  </style>
+{% endblock %}
+{% block body_title %}
+  <h1><span>Flask Snippets</span></h1>
+{% endblock %}