diff --git a/demo/Page/components/Edit/index.js b/demo/Page/components/Edit/index.js
index ceb203019b..bee2cd52ae 100644
--- a/demo/Page/components/Edit/index.js
+++ b/demo/Page/components/Edit/index.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React from 'react';
 import {
   withEditData,
   EditView,
@@ -13,99 +13,78 @@ import {
   FormSubmit,
   Repeater
 } from 'payload/components';
-import { toKebabCase } from 'payload/utils';
 
-class Edit extends Component {
+const Edit = props => {
 
-  constructor(props) {
-    super(props);
+  const { id } = props.match.params;
 
-    const entrySlug = this.props.match.params.slug;
+  const { data, collection, config, locale } = props;
 
-    this.state = {
-      uid: entrySlug,
-      slug: entrySlug,
-      action: `${this.props.config.serverUrl}/${this.props.collection.slug}${entrySlug ? `/${entrySlug}` : ''}`,
-      method: entrySlug ? 'put' : 'post'
+  const sampleRepeaterValue = [
+    {
+      content: 'here\'s some test content'
+    }, {
+      content: 'here\'s some more test content'
     }
-  }
+  ];
 
-  setSlug = e => {
-    this.setState({ slug: toKebabCase(e.target.value) });
-  }
+  return (
+    <EditView data={data} collection={collection} isEditing={id ? true : false}>
+      <Form method={id ? 'put' : 'post'} action={`${config.serverUrl}/${collection.slug}${id ? `/${id}` : ''}`}>
+        <StickyAction content={
+          <APIUrl />
+        } action={
+          <React.Fragment>
+            <Button type="secondary">Preview</Button>
+            <FormSubmit>Save</FormSubmit>
+          </React.Fragment>
+        } />
 
-  render() {
+        <HiddenInput
+          name="locale"
+          valueOverride={locale} />
 
-    const initialData = this.props.data ? this.props.data : {};
+        <HiddenInput
+          name="slug"
+          valueOverride={id} />
 
-    const sampleRepeaterValue = [
-      {
-        content: 'here\'s some test content'
-      }, {
-        content: 'here\'s some more test content'
-      }
-    ];
+        <Input name="title"
+          label="Page Title"
+          maxLength={100}
+          initialValue={data['title']}
+          required />
 
-    return (
-      <EditView data={this.props.data} collection={this.props.collection} isEditing={this.props.match.params.slug ? true : false}>
-        <Form method={this.state.method} action={this.state.action}>
-          <StickyAction content={
-            <APIUrl serverUrl={this.props.config.serverUrl}
-              collectionSlug={this.props.collection.slug} slug={this.state.slug} />
-          } action={
-            <React.Fragment>
-              <Button type="secondary">Preview</Button>
-              <FormSubmit>Save</FormSubmit>
-            </React.Fragment>
-          } />
+        <Textarea name="content"
+          label="Content"
+          initialValue={data['content']}
+          height={100}
+          required />
 
-          <HiddenInput
-            name="locale"
-            valueOverride={this.props.locale} />
+        <Repeater
+          name="slides"
+          label="Slides"
+          initialValue={sampleRepeaterValue}>
+          <Textarea name="content" label="Content" />
+        </Repeater>
 
-          <HiddenInput
-            name="slug"
-            valueOverride={this.state.slug} />
-
-          <Input name="title"
-            onChange={this.setSlug}
-            label="Page Title"
+        <Group label="Meta Information">
+          <Input name="metaTitle"
             maxLength={100}
-            initialValue={initialData['title']}
-            required />
+            label="Meta Title"
+            width={50} />
 
-          <Textarea name="content"
-            label="Content"
-            initialValue={initialData['content']}
-            height={100}
-            required />
+          <Input name="metaKeywords"
+            maxLength={100}
+            label="Meta Keywords"
+            width={50} />
 
-          <Repeater
-            name="slides"
-            label="Slides"
-            initialValue={sampleRepeaterValue}>
-            <Textarea name="content" label="Content" />
-          </Repeater>
-
-          <Group label="Meta Information">
-            <Input name="metaTitle"
-              maxLength={100}
-              label="Meta Title"
-              width={50} />
-
-            <Input name="metaKeywords"
-              maxLength={100}
-              label="Meta Keywords"
-              width={50} />
-
-            <Textarea name="metaDesc"
-              label="Meta Description"
-              height={100} />
-          </Group>
-        </Form>
-      </EditView>
-    );
-  }
+          <Textarea name="metaDesc"
+            label="Meta Description"
+            height={100} />
+        </Group>
+      </Form>
+    </EditView>
+  );
 }
 
 export default withEditData(Edit);
diff --git a/demo/client/index.js b/demo/client/index.js
index 36967e0c35..c2990801d9 100644
--- a/demo/client/index.js
+++ b/demo/client/index.js
@@ -17,10 +17,10 @@ const views = {
   pages: pageViews
 };
 
-const collections = [
-  Page,
-  Order
-];
+const collections = {
+  orders: Order,
+  pages: Page
+}
 
 const Index = () => {
   return (
diff --git a/demo/client/scss/overrides.scss b/demo/client/scss/overrides.scss
index e69de29bb2..8b13789179 100644
--- a/demo/client/scss/overrides.scss
+++ b/demo/client/scss/overrides.scss
@@ -0,0 +1 @@
+
diff --git a/src/components/data/edit.js b/src/components/data/edit.js
index ee106ede44..8594f082aa 100644
--- a/src/components/data/edit.js
+++ b/src/components/data/edit.js
@@ -19,14 +19,14 @@ const withEditData = PassedComponent => {
     }
 
     fetchData = () => {
-      const slug = this.props.match.params.slug;
+      const { id } = this.props.match.params;
 
       const params = {
         locale: this.props.locale
       };
 
-      if (slug) {
-        api.requests.get(`${this.props.config.serverUrl}/${this.props.collection.slug}/${slug}`, params).then(
+      if (id) {
+        api.requests.get(`${this.props.config.serverUrl}/${this.props.collection.slug}/${id}`, params).then(
           res => this.setState({ data: res }),
           err => {
             console.warn(err);
diff --git a/src/components/layout/Sidebar/index.js b/src/components/layout/Sidebar/index.js
index 2d2d44e6fe..9dae336b8e 100644
--- a/src/components/layout/Sidebar/index.js
+++ b/src/components/layout/Sidebar/index.js
@@ -21,8 +21,8 @@ const Sidebar = props => {
       </Link>
       <span className="uppercase-label">Collections</span>
       <nav>
-        {props.collections && props.collections.map((item, i) => {
-          const href = `/collections/${item.slug}`;
+        {props.collections && Object.keys(props.collections).map((key, i) => {
+          const href = `/collections/${props.collections[key].slug}`;
           const classes = props.location.pathname.indexOf(href) > -1
             ? 'active'
             : undefined;
@@ -30,7 +30,7 @@ const Sidebar = props => {
           return (
             <Link className={classes} key={i} to={href}>
               <Arrow />
-              {props.collections[i].plural}
+              {props.collections[key].plural}
             </Link>
           );
         })}
diff --git a/src/components/modules/APIUrl/index.js b/src/components/modules/APIUrl/index.js
index d748efe774..2558422965 100644
--- a/src/components/modules/APIUrl/index.js
+++ b/src/components/modules/APIUrl/index.js
@@ -1,17 +1,31 @@
 import React from 'react';
+import { connect } from 'react-redux';
+import { withRouter } from 'react-router-dom';
 
 import './index.scss';
 
+const mapState = state => ({
+  locale: state.common.locale,
+  config: state.common.config
+})
+
 const APIUrl = props => {
 
-  const apiUrl = `${props.serverUrl}/${props.collectionSlug}/${props.slug ? `${props.slug}` : ''}`;
+  const { collectionSlug, id } = props.match.params;
+
+  const apiUrl = `${props.config.serverUrl}/${collectionSlug}/${id}`;
 
   return (
     <div className="api-url">
       <span className="uppercase-label">API URL</span>
-      <div className="url"><a href={apiUrl} rel="noopener noreferrer" target="_blank">{apiUrl}</a></div>
+      {id &&
+        <div className="url"><a href={apiUrl} rel="noopener noreferrer" target="_blank">{apiUrl}</a></div>
+      }
+      {!id &&
+        <div>&mdash;</div>
+      }
     </div>
   );
 };
 
-export default APIUrl;
+export default withRouter(connect(mapState)(APIUrl));
diff --git a/src/components/modules/Status/index.scss b/src/components/modules/Status/index.scss
index 6e556fa60c..c0e0d5ebb3 100644
--- a/src/components/modules/Status/index.scss
+++ b/src/components/modules/Status/index.scss
@@ -32,6 +32,9 @@
   }
 
   &.error {
-    background: $error;
+
+    .status-wrap {
+      background: $error;
+    }
   }
 }
diff --git a/src/components/routes/Collections.js b/src/components/routes/Collections.js
index 86dafeca78..bad01b497e 100644
--- a/src/components/routes/Collections.js
+++ b/src/components/routes/Collections.js
@@ -9,28 +9,30 @@ const mapState = state => ({
 
 const CollectionRoutes = props => {
 
-  return props.collections.map((collection, i) => {
-    if (collection) {
+  return (
+    <Switch>
+      <Route path={'/collections/:collectionSlug/create'} exact
+        render={routeProps => {
+          const { collectionSlug } = routeProps.match.params;
+          const Edit = props.views[collectionSlug].Edit;
+          return <Edit {...routeProps} collection={props.collections[collectionSlug]} config={props.config} />;
+        }} />
 
-      const Edit = props.views[collection.slug].Edit;
-      const Archive = props.views[collection.slug].Archive;
+      <Route path={'/collections/:collectionSlug/:id'} exact
+        render={routeProps => {
+          const { collectionSlug } = routeProps.match.params;
+          const Edit = props.views[routeProps.match.params.collectionSlug].Edit;
+          return <Edit {...routeProps} collection={props.collections[collectionSlug]} config={props.config} />;
+        }} />
 
-      return (
-        <Switch key={i}>
-          <Route path={`/collections/${collection.slug}/create`} exact
-            render={routeProps => <Edit {...routeProps} collection={collection} config={props.config} />} />
-
-          <Route path={`/collections/${collection.slug}/:slug`}
-            render={routeProps => <Edit {...routeProps} collection={collection} config={props.config} />} />
-
-          <Route path={`/collections/${collection.slug}`} exact
-            render={routeProps => <Archive {...routeProps} collection={collection} config={props.config} />} />
-        </Switch>
-      );
-    }
-
-    return null;
-  });
+      <Route path={'/collections/:collectionSlug'} exact
+        render={routeProps => {
+          const { collectionSlug } = routeProps.match.params;
+          const Archive = props.views[routeProps.match.params.collectionSlug].Archive;
+          return <Archive {...routeProps} collection={props.collections[collectionSlug]} config={props.config} />;
+        }} />
+    </Switch>
+  );
 };
 
 export default withRouter(connect(mapState)(CollectionRoutes));