diff --git a/demo/client/components/collections/Orders/Archive.js b/demo/client/components/collections/Orders/Archive.js
index d8820d70fc..35aab393b6 100644
--- a/demo/client/components/collections/Orders/Archive.js
+++ b/demo/client/components/collections/Orders/Archive.js
@@ -1,11 +1,12 @@
 import React, { Component } from 'react';
+import CollectionArchive from 'payload/client/components/views/CollectionArchive';
 
 class OrdersArchive extends Component {
   render() {
     return (
-      <div>
+      <CollectionArchive collection="Orders">
         <h1>Orders</h1>
-      </div>
+      </CollectionArchive>
     );
   }
 }
diff --git a/demo/client/components/collections/Orders/Edit.js b/demo/client/components/collections/Orders/Edit.js
index 7210988344..0aec559e57 100644
--- a/demo/client/components/collections/Orders/Edit.js
+++ b/demo/client/components/collections/Orders/Edit.js
@@ -1,11 +1,12 @@
 import React, { Component } from 'react';
+import CollectionEdit from 'payload/client/components/views/CollectionEdit';
 
 class OrdersEdit extends Component {
   render() {
     return (
-      <div>
-        <h1>Edit order {this.props.match.params.id}</h1>
-      </div>
+      <CollectionEdit collection="Orders" id={this.props.match.params.id}>
+        <h1>Edit Order {this.props.match.params.id}</h1>
+      </CollectionEdit>
     );
   }
 }
diff --git a/demo/client/components/collections/Pages/Archive.js b/demo/client/components/collections/Pages/Archive.js
index b5c447e96e..27dd573d9d 100644
--- a/demo/client/components/collections/Pages/Archive.js
+++ b/demo/client/components/collections/Pages/Archive.js
@@ -1,18 +1,12 @@
 import React, { Component } from 'react';
-import SetStepNav from 'payload/client/components/utilities/SetStepNav';
+import CollectionArchive from 'payload/client/components/views/CollectionArchive';
 
 class PagesArchive extends Component {
   render() {
     return (
-      <div>
-        <SetStepNav nav={ [
-          {
-            url: '/collections/pages',
-            label: 'Pages'
-          }
-        ] } />
+      <CollectionArchive collection="Pages">
         <h1>Pages</h1>
-      </div>
+      </CollectionArchive>
     );
   }
 }
diff --git a/demo/client/components/collections/Pages/Edit.js b/demo/client/components/collections/Pages/Edit.js
index ec342236c4..95e25142f8 100644
--- a/demo/client/components/collections/Pages/Edit.js
+++ b/demo/client/components/collections/Pages/Edit.js
@@ -4,8 +4,8 @@ import CollectionEdit from 'payload/client/components/views/CollectionEdit';
 class PagesEdit extends Component {
   render() {
     return (
-      <CollectionEdit id={this.props.match.params.id}>
-        <h1>Edit page {this.props.match.params.id}</h1>
+      <CollectionEdit collection="Pages" id={this.props.match.params.id}>
+        <h1>Edit Page {this.props.match.params.id}</h1>
       </CollectionEdit>
     );
   }
diff --git a/src/client/components/layout/StepNav/index.scss b/src/client/components/layout/StepNav/index.scss
index bcdb2d6836..2e2783b012 100644
--- a/src/client/components/layout/StepNav/index.scss
+++ b/src/client/components/layout/StepNav/index.scss
@@ -9,11 +9,12 @@
   }
 
   a {
-    border: 0;
-  }
-
-  > * {
     margin-right: rem(.25);
+    border: 0;
+
+    label {
+      cursor: pointer;
+    }
   }
 
   > label {
diff --git a/src/client/components/views/CollectionArchive/index.js b/src/client/components/views/CollectionArchive/index.js
new file mode 100644
index 0000000000..52f7d899b0
--- /dev/null
+++ b/src/client/components/views/CollectionArchive/index.js
@@ -0,0 +1,24 @@
+import React, { Component } from 'react';
+import SetStepNav from 'payload/client/components/utilities/SetStepNav';
+
+class CollectionArchive extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <article className="collection-archive">
+        <SetStepNav nav={ [
+          {
+            url: '/collections',
+            label: this.props.collection
+          }
+        ] } />
+        {this.props.children}
+      </article>
+    );
+  }
+}
+
+export default CollectionArchive;
diff --git a/src/client/components/views/CollectionEdit/index.js b/src/client/components/views/CollectionEdit/index.js
index dc793914e6..2cd348b871 100644
--- a/src/client/components/views/CollectionEdit/index.js
+++ b/src/client/components/views/CollectionEdit/index.js
@@ -11,11 +11,11 @@ class CollectionEdit extends Component {
       <article className="collection-edit">
         <SetStepNav nav={ [
           {
-            url: '/collections/pages',
-            label: 'Pages'
+            url: `/collections/${this.props.collection}`,
+            label: this.props.collection
           },
           {
-            url: `/collections/pages/${this.props.id}`,
+            url: `/collections/${this.props.collection}/${this.props.id}`,
             label: this.props.id
           }
         ] } />
diff --git a/src/client/scss/_type.scss b/src/client/scss/_type.scss
index 546b65b66e..6ce2bed6d2 100644
--- a/src/client/scss/_type.scss
+++ b/src/client/scss/_type.scss
@@ -79,7 +79,7 @@
 %label {
   text-transform: uppercase;
   letter-spacing: rem(.1);
-  font-size: rem(.275);
+  font-size: rem(.3);
   font-family: $font-label;
   -webkit-font-smoothing: auto;