diff --git a/api/resolvers.js b/api/resolvers.js
index d335296..5cafcb1 100644
--- a/api/resolvers.js
+++ b/api/resolvers.js
@@ -9,12 +9,12 @@ const db = low('db.json', {
 db.defaults({uploads: []})
   .write()
 
-const saveFile = (file) => {
+const saveFile = file => {
   return db.get('uploads')
     .push(file)
     .last()
     .write()
-    .then((result) => result)
+    .then(result => result)
 }
 export default {
   Query: {
@@ -26,10 +26,10 @@ export default {
     singleUpload (_, {file}) {
       return saveFile(file)
     },
-    multiUpload (_, {files}) {
+    multipleUpload (_, {files}) {
       return Promise.all(files.map((file) => {
         return saveFile(file)
-      })).then((results) => results)
+      })).then(results => results)
     }
   }
 }
diff --git a/api/schema.graphql b/api/schema.graphql
index deab78d..1ecf5e6 100644
--- a/api/schema.graphql
+++ b/api/schema.graphql
@@ -18,5 +18,5 @@ type Query {
 
 type Mutation {
   singleUpload (file: Upload!): File!
-  multiUpload (files: [Upload!]!): [File!]!
+  multipleUpload (files: [Upload!]!): [File!]!
 }
diff --git a/app/components/multi-uploader.js b/app/components/multiple-uploader.js
similarity index 78%
rename from app/components/multi-uploader.js
rename to app/components/multiple-uploader.js
index de9b45b..dfaed22 100644
--- a/app/components/multi-uploader.js
+++ b/app/components/multiple-uploader.js
@@ -1,7 +1,7 @@
 import {Component} from 'react'
 import {graphql, gql} from 'react-apollo'
 
-class MultiUploader extends Component {
+class MultipleUploader extends Component {
   handleChange = ({target}) => {
     if (target.validity.valid) {
       this.props
@@ -20,12 +20,12 @@ class MultiUploader extends Component {
 }
 
 export default graphql(gql`
-  mutation multiUpload ($files: [Upload!]!) {
-    multiUpload (files: $files) {
+  mutation multipleUpload ($files: [Upload!]!) {
+    multipleUpload (files: $files) {
       name
       type
       size
       path
     }
   }
-`)(MultiUploader)
+`)(MultipleUploader)
diff --git a/app/components/section.js b/app/components/section.js
new file mode 100644
index 0000000..7fc4e1c
--- /dev/null
+++ b/app/components/section.js
@@ -0,0 +1,11 @@
+export default ({heading, children}) => (
+  <section>
+    <h2>{heading}</h2>
+    {children}
+    <style jsx>{`
+      section {
+        padding: 1em 0;
+      }
+    `}</style>
+  </section>
+)
diff --git a/app/pages/index.js b/app/pages/index.js
index 5876c16..19a5ee7 100644
--- a/app/pages/index.js
+++ b/app/pages/index.js
@@ -1,13 +1,14 @@
 import Head from 'next/head'
 import withData from '../helpers/with-data'
+import Section from '../components/section'
 import SingleUploader from '../components/single-uploader'
-import MultiUploader from '../components/multi-uploader'
+import MultipleUploader from '../components/multiple-uploader'
 import UploadList from '../components/upload-list'
 
 export default withData(props => (
   <div>
     <Head>
-      <title>Apollo upload example</title>
+      <title>Apollo upload examples</title>
       <style>{`
         html {
           font-family: sans-serif;
@@ -15,24 +16,19 @@ export default withData(props => (
         body {
           margin: 2em;
         }
-        section {
-          padding-top: 3em;
-        }
       `}</style>
     </Head>
-    <h1>Apollo upload example</h1>
-    <section>
-      <h2>Single file upload</h2>
+    <h1>Apollo upload examples</h1>
+    <Section heading='Single file upload'>
       <p>Select an image to upload and view the response in the console.</p>
       <SingleUploader />
-    </section>
-    <section>
-      <h2>Multiple file upload</h2>
+    </Section>
+    <Section heading='Multiple file upload'>
       <p>Select multiple images to upload and view the response in the console.</p>
-      <MultiUploader />
-    </section>
-    <section>
+      <MultipleUploader />
+    </Section>
+    <Section heading='Uploaded files'>
       <UploadList />
-    </section>
+    </Section>
   </div>
 ))
