diff --git a/frontend/src/components/Start.vue b/frontend/src/components/Start.vue
index d3d83cd..89ae0b7 100644
--- a/frontend/src/components/Start.vue
+++ b/frontend/src/components/Start.vue
@@ -7,16 +7,50 @@
         {{ run.name }}
       </li>
     </ul>
+
+    <form v-on:submit.prevent='addRun'>
+      <label for='name'>Name</label>
+      <input type='text' name='name' id='name' v-model='name'/>
+      <input type='submit' value='Add Run'/>
+    </form>
   </div>
 </template>
 
 <script>
 import gql from 'graphql-tag'
+import listRuns from '../queries/listRuns'
 export default {
   name: 'Start',
+  data () {
+    return {
+      name: ''
+    }
+  },
+  methods: {
+    addRun() {
+      const name = this.name
+      this.$apollo.mutate({
+        mutation: gql`mutation ($name: String!) {
+          createRun(input: { id: 1, name: $name }) {
+            id, name
+          }
+        }`,
+        variables: {
+          name: name
+        },
+        update: (store, { data: { newRun } }) => {
+
+        }
+      }).then((data) => {
+        console.log(data)
+      }).catch((error) => {
+        console.log(error)
+      })
+    }
+  },
   apollo: {
     runs: {
-      query: gql`query { listRuns(first:10,after:"") { items { id,name }, nextToken } }`,
+      query: () => listRuns,
       update: data => data.listRuns.items
     }
   }
diff --git a/frontend/src/queries/listRuns.js b/frontend/src/queries/listRuns.js
new file mode 100644
index 0000000..258c3c9
--- /dev/null
+++ b/frontend/src/queries/listRuns.js
@@ -0,0 +1,11 @@
+import gql from 'graphql-tag'
+export default gql`
+    query {
+        listRuns(first:10,after:"") {
+            items {
+                id,
+                name
+            },
+            nextToken
+        }
+    }`