diff --git a/wagtail/wagtailadmin/static/wagtailadmin/scss/components/dropdowns.scss b/wagtail/wagtailadmin/static/wagtailadmin/scss/components/dropdowns.scss
index ee618f377..1428f0fd9 100644
--- a/wagtail/wagtailadmin/static/wagtailadmin/scss/components/dropdowns.scss
+++ b/wagtail/wagtailadmin/static/wagtailadmin/scss/components/dropdowns.scss
@@ -3,7 +3,18 @@
     @include clearfix();
 
     .dropdown-toggle{
+        color:white;
+        text-transform:uppercase;
+        background-color:$color-teal;
+        line-height:3em;
+        padding-left:1em;
+        padding-right:1em;
         cursor:pointer;
+
+        &:before,
+        &:after{
+            margin:0;
+        }   
     }
 
     input[type=button], input[type=submit], button, .button{
@@ -27,10 +38,9 @@
 
         li{
             float:none;
-            border-top:1px solid rgba(255,255,255,0.2);
-        }
-        li:first-child{
-            border-top:0;
+            border-color: rgba(255,255,255,0.2);
+            border-style: solid;
+            border-width:1px 0 0 0;
         }
 
         a{
@@ -101,6 +111,10 @@
         @include box-shadow(0px -3px 3px 0 rgba(0,0,0,0.2));
         top:auto;
         bottom:100%;
+
+        li{ 
+            border-width:0 0 1px 0;
+        }
     }
 
    
@@ -134,10 +148,22 @@
     }
 
     /* Styles for dropdowns which are also buttons e.g page editor */
+    
     &.dropdown-button{
         .dropdown-toggle{
             @include border-radius(0 3px 3px 0);
         }
+        &.open{
+            > input[type=button], > input[type=submit], > button, > .button{
+                @include border-radius(3px 3px 0px 0px);
+            }
+            .dropdown-toggle{
+                @include border-radius(0 3px 0 0);
+            }
+        }
+    }
+
+    &.dropup.dropdown-button{
         &.open{
             > input[type=button], > input[type=submit], > button, > .button{
                 @include border-radius(0 0 3px 3px);
@@ -215,25 +241,6 @@ h2 .dropdown{
 
 }
 
-footer .actions .dropdown-toggle{
-    text-transform:uppercase;
-    background-color:$color-teal;
-    line-height:3em;
-    color:white;
-    padding-left:1em;
-    padding-right:1em;
-
-    &:before,
-    &:after{
-        margin:0;
-    }
-}
-
-footer .actions .dropdown ul li{
-    border-bottom:1px solid rgba(255,255,255,0.2);
-    border-top:0;
-}
-
 
 /* Transitions */
 .dropdown ul{
diff --git a/wagtail/wagtailadmin/static/wagtailadmin/scss/components/formatters.scss b/wagtail/wagtailadmin/static/wagtailadmin/scss/components/formatters.scss
index 569821e10..150611f8f 100644
--- a/wagtail/wagtailadmin/static/wagtailadmin/scss/components/formatters.scss
+++ b/wagtail/wagtailadmin/static/wagtailadmin/scss/components/formatters.scss
@@ -177,4 +177,8 @@ a.tag:hover{
 /* make a block-level element inline */
 .inline{
     display:inline;
+}
+
+.unlist{
+    @include unlist();
 }
\ No newline at end of file
diff --git a/wagtail/wagtailadmin/static/wagtailadmin/scss/components/listing.scss b/wagtail/wagtailadmin/static/wagtailadmin/scss/components/listing.scss
index edf5e65f8..e79d8b28d 100644
--- a/wagtail/wagtailadmin/static/wagtailadmin/scss/components/listing.scss
+++ b/wagtail/wagtailadmin/static/wagtailadmin/scss/components/listing.scss
@@ -52,6 +52,7 @@ ul.listing{
             }
         }
 
+        /*
         .dropdown{
             padding:0;
         }
@@ -65,6 +66,7 @@ ul.listing{
             background-color:white;
             margin-left:-$grid-gutter-width * 2;
         }
+        */
     }
 
     &.full-width td:first-child,
diff --git a/wagtail/wagtailadmin/static/wagtailadmin/scss/layouts/styleguide.scss b/wagtail/wagtailadmin/static/wagtailadmin/scss/layouts/styleguide.scss
index 8e0894baa..18c40d2d8 100644
--- a/wagtail/wagtailadmin/static/wagtailadmin/scss/layouts/styleguide.scss
+++ b/wagtail/wagtailadmin/static/wagtailadmin/scss/layouts/styleguide.scss
@@ -2,8 +2,11 @@
 @import "../mixins.scss";
 @import "../grid.scss";
 
+
+
 section{
 	border-top:1px solid $color-grey-3;
+	margin-top:2em;
 	padding:0 0 2em 0;
 
 	> h2:first-child{
@@ -71,7 +74,15 @@ section{
 
 
 #icons{
+	:before, :after{
+		font-size:2em;
+	}
 	ul{
-		@include unlist();
+		-webkit-column-count:3; /* Chrome, Safari, Opera */
+		-moz-column-count:3; /* Firefox */
+		column-count:3;
+	}
+	li{
+		margin-bottom:1em;
 	}
 }
\ No newline at end of file
diff --git a/wagtail/wagtailadmin/templates/wagtailadmin/styleguide/base.html b/wagtail/wagtailadmin/templates/wagtailadmin/styleguide/base.html
index 75f5bcc17..acb90f138 100644
--- a/wagtail/wagtailadmin/templates/wagtailadmin/styleguide/base.html
+++ b/wagtail/wagtailadmin/templates/wagtailadmin/styleguide/base.html
@@ -1,6 +1,7 @@
 {% extends "wagtailadmin/base.html" %}
 {% load wagtailadmin_tags %}
 {% load compress i18n %}
+{% load gravatar %}
 
 {% block extra_css %}
     {% compress css %}
@@ -16,16 +17,15 @@
     {% include "wagtailadmin/shared/header.html" with title=title_trans %}
 
     <div class="nice-padding">
-        <h1>Styleguide</h1>
+        <h2>Contents</h2>
         <nav>
-            <ul>
+            <ul class="unlist">
                 <li><a href="#palette">Colour palette</a></li>
                 <li><a href="#typography">Typography</a></li>
                 <li><a href="#listings">Listings</a></li>
                 <li><a href="#buttons">Buttons</a></li>
-                <li><a href="#dropdowns">Dropdowns</a></li>
+                <li><a href="#dropdowns">Dropdown buttons</a></li>
                 <li><a href="#header">Header</a></li>
-                <li><a href="#messages">Messages</a></li>
                 <li><a href="#forms">Forms</a></li>
                 <li><a href="#editor">Page editor</a></li>
                 <li><a href="#tabs">Tabs</a></li>
@@ -77,10 +77,73 @@
                 <li>ordered list</li>
             </ol>
 
+            <code>This is an example of code</code>
+
         </section>
 
         <section id="listings">
             <h2>Listings</h2>
+
+            <h3><code>table</code> listing</h3>
+            <table class="listing">
+                <thead>
+                    <tr>
+                        <th>Heading 1</th>
+                        <th>Heading 2</th>
+                        <th>Heading 3</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td class="title">
+                            <h2>TD with title class</h2>
+                        </td>
+                        <td>Regular listing TD</td>
+                        <td>Regular listing TD</td>
+                    </li>
+                    <tr>
+                        <td class="title">
+                            <h2>TD with title class</h2>
+                        </td>
+                        <td>Regular listing TD</td>
+                        <td>Regular listing TD</td>
+                    </li>
+                </tbody>
+            </table>
+
+            <h3><code>ul</code> listing</h3>
+            <ul class="listing">
+                <li>List item</li>
+                <li>List item</li>
+                <li>List item</li>
+            </ul>
+
+            <h3>Listings used for choosing a list item</h3>
+            <table class="listing chooser">
+                <thead>
+                    <tr>
+                        <th>Heading 1</th>
+                        <th>Heading 2</th>
+                        <th>Heading 3</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr class="can-choose">
+                        <td class="title">
+                            <h2><a href="#">TD with title class</a></h2>
+                        </td>
+                        <td>Regular listing TD</td>
+                        <td>Regular listing TD</td>
+                    </li>
+                    <tr class="can-choose">
+                        <td class="title">
+                            <h2>TD with title class</h2>
+                        </td>
+                        <td>Regular listing TD</td>
+                        <td>Regular listing TD</td>
+                    </li>
+                </tbody>
+            </table>
         </section>
 
         <section id="buttons">
@@ -104,22 +167,91 @@
 
             <div href="" class="button no bicolor icon icon-cog">mixed 2</div>
 
+            <p>Buttons must have interaction possible (i.e be an input or button element) to get a suitable hover cursor</p>
+
+            <button>button</button>
+
+            <button class="bicolor icon icon-plus">bicolor with icon</button>
         </section>
 
         <section id="dropdowns">
-            <h2>Dropdowns</h2>
+            <h2>Dropdown buttons</h2>
+
+            <div class="row">
+                <div class="col3">
+                    <div class="dropdown dropdown-button match-width">
+                        <input type="button" value="drop down" class="button" />
+                        <div class="dropdown-toggle icon icon-arrow-down"></div>
+                        <ul role="menu">
+                            <li><a href="#">items should not exceed button width</a></li>
+                            <li><a href="#">item 2</a></li>
+                        </ul>
+                    </div>
+                </div>
+
+                <div class="col3">
+                    <div class="dropdown dropdown-button">
+                        <div class="button">drop down</div>
+                        <div class="dropdown-toggle icon icon-arrow-down"></div>
+                        <ul role="menu">
+                            <li><a href="#">Items in this list do not match button width</a></li>
+                            <li><a href="#">item 2</a></li>
+                        </ul>
+                    </div>
+                </div>
+
+                <div class="col3">
+                    <div class="dropdown dropup dropdown-button match-width">
+                        <input type="button" value="drop up" class="button" />
+                        <div class="dropdown-toggle icon icon-arrow-up"></div>
+                        <ul role="menu">
+                            <li><a href="#">item 1</a></li>
+                            <li><a href="#">item 2</a></li>
+                        </ul>
+                    </div>
+                </div>
+
+                <div class="col3">
+                    <div class="dropdown dropup dropdown-button match-width">
+                        <button value="drop up" class="button icon icon-view">icon dropup</button>
+                        <div class="dropdown-toggle icon icon-arrow-up"></div>
+                        <ul role="menu">
+                            <li><a href="#">item 1</a></li>
+                            <li><a href="#">item 2</a></li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
         </section>
 
         <section id="header">
             <h2>Header</h2>
-        </section>
 
-        <section id="messages">
-            <h2>Messages</h2>
+            {% include "wagtailadmin/shared/header.html" with title=title_trans %}
+
+            {% include "wagtailadmin/shared/header.html" with title=title_trans add_link="wagtailimages_add_image" icon="image" add_text="button" search_url="wagtailimages_index" %}
         </section>
 
         <section id="forms">
             <h2>Forms</h2>
+
+            <form>
+                <ul class="fields">
+                    {% for field in example_form %}
+                        {% if field.name == 'file' %}
+                            {% include "wagtailimages/images/_file_field.html" %}
+                        {% else %}
+                            {% include "wagtailadmin/shared/field_as_li.html" %}
+                        {% endif %}
+                    {% endfor %}
+                    <li><input type="submit" value="{% trans 'Save' %}" /><a href="#" class="button button-secondary no">{% trans "Delete image" %}</a></li>
+                </ul>
+            </form>
+            
+            <p>TODO: page chooser</p>
+            <p>TODO: image chooser</p>
+            <p>TODO: document chooser</p>
+            <p>TODO: snippet chooser</p>
         </section>
 
         <section id="editor">
@@ -128,22 +260,58 @@
 
         <section id="tabs">
             <h2>Tabs</h2>
+
+            <ul class="tab-nav">
+                <li class="active"><a href="#tab1">Tab 1</a></li>
+                <li><a href="#tab2">Tab 2</a></li>
+            </ul>
+
+            <p>Tabs are currently only used following headers, where they often appear merged with the bottom of the header:</p>
+
+            {% include "wagtailadmin/shared/header.html" with title=title_trans merged=1 %}
+            <ul class="tab-nav merged">
+                <li class="active"><a href="#">Tab1</a></li>
+                <li><a href="#">Tab2</a></li>
+            </ul>
+
+            <p>Tabs can also indicate errors:</p>
+
+            {% include "wagtailadmin/shared/header.html" with title=title_trans merged=1 %}
+            <ul class="tab-nav merged">
+                <li class="active"><a href="#" class="errors" data-count="123">Tab1</a></li>
+                <li><a href="#" class="errors" data-count="1">Tab2</a></li>
+            </ul>
         </section>
 
         <section id="breadcrumbs">
             <h2>Breadcrumbs</h2>
+
+            <ul class="breadcrumb">
+                <li class="home"><a href="#" class="icon icon-home text-replace">Home</a></li>
+                <li><a href="#">Various</a></li>
+                <li><a href="#">Subpages</a></li>
+                <li><a href="#">There is a max length of this many</a></li>
+            </ul>
+
         </section>
 
         <section id="misc">
             <h2>Misc formatters</h2>
             <h3>Avatar icons</h3>
+
+            <p><span class="avatar small icon icon-user"><img src="{% gravatar_url "david@torchbox.com" 25 %}" /></span> Gravatar set</p>
+            <p><span class="avatar small icon icon-user"><img src="{% gravatar_url "aeon@torchbox.com" 25 %}" /></span> Gravatar not set</p>
+
             <h3>Status tags</h3>
+            <div class="status-tag primary">Primary tag</div>
+
+            <div class="status-tag">Secondary tag</div>
         </section>
 
         <section id="icons">
             <h2>Icons</h2>
 
-            <ul>
+            <ul class="unlist">
                 <li class="icon icon-wagtail">wagtail</li>
                 <li class="icon icon-wagtail-inverse">wagtail-inverse</li>
                 <li class="icon icon-cogs">cogs</li>
diff --git a/wagtail/wagtailadmin/urls.py b/wagtail/wagtailadmin/urls.py
index 574a1601b..cafae0c03 100644
--- a/wagtail/wagtailadmin/urls.py
+++ b/wagtail/wagtailadmin/urls.py
@@ -2,7 +2,7 @@ from django.conf.urls import url
 from django.conf import settings
 
 from wagtail.wagtailadmin.forms import LoginForm, PasswordResetForm
-from wagtail.wagtailadmin.views import account, chooser, home, pages, tags, userbar
+from wagtail.wagtailadmin.views import account, chooser, home, pages, tags, userbar, styleguide
 from wagtail.wagtailadmin import hooks
 
 urlpatterns = [
@@ -90,7 +90,7 @@ urlpatterns += [
     url(r'^userbar/(\d+)/$', userbar.for_frontend, name='wagtailadmin_userbar_frontend'),
     url(r'^userbar/moderation/(\d+)/$', userbar.for_moderation, name='wagtailadmin_userbar_moderation'),
 
-    url(r'^styleguide/$', 'styleguide.index', name='wagtailadmin_styleguide'),
+    url(r'^styleguide/$', styleguide.index, name='wagtailadmin_styleguide'),
 ]
 
 # Import additional urlpatterns from any apps that define a register_admin_urls hook
diff --git a/wagtail/wagtailadmin/views/styleguide.py b/wagtail/wagtailadmin/views/styleguide.py
index 33c87034c..a53d884ef 100644
--- a/wagtail/wagtailadmin/views/styleguide.py
+++ b/wagtail/wagtailadmin/views/styleguide.py
@@ -1,9 +1,49 @@
+from django import forms
+from django.db import models
 from django.shortcuts import render
+from django.utils.translation import ugettext as _
+from django.contrib import messages
+from django.contrib.auth.decorators import permission_required
 
 from wagtail.wagtailadmin.userbar import EditPageItem, AddPageItem, ApproveModerationEditPageItem, RejectModerationEditPageItem
 from wagtail.wagtailadmin import hooks
 from wagtail.wagtailcore.models import Page, PageRevision
 
+from wagtail.wagtailadmin.edit_handlers import PageChooserPanel
+from wagtail.wagtailimages.edit_handlers import ImageChooserPanel
+from wagtail.wagtaildocs.edit_handlers import DocumentChooserPanel
+
+from wagtail.wagtailadmin.forms import SearchForm
+from wagtail.wagtailcore.fields import RichTextField
+
+
+CHOICES = (
+    ('choice1', 'choice 1'),
+    ('choice2', 'choice 2'),
+)
+
+class ExampleForm(forms.Form):
+    text = forms.CharField(required=True, help_text="help text")
+    url = forms.URLField(required=True)
+    email = forms.EmailField(max_length=254)
+    date = forms.DateField()
+    rich_text = RichTextField()
+    select = forms.ChoiceField(choices=CHOICES)
+    boolean = forms.BooleanField(required=False)
+    page_chooser = forms.CharField(required=True, help_text="help text")
+
+@permission_required('wagtailadmin.access_admin')
 def index(request):
-    # Render the edit bird
-    return render(request, 'wagtailadmin/styleguide/base.html', {})
+
+    form = SearchForm(placeholder=_("Search something"))
+
+    example_form = ExampleForm()
+
+    messages.success(request, _("Success message"))
+    messages.warning(request, _("Warning message"))
+    messages.error(request, _("Error message"))
+
+    return render(request, 'wagtailadmin/styleguide/base.html', {
+        'search_form': form,
+        'example_form': example_form,
+    })