diff --git a/template/index.html b/template/index.html
index 53e4559..c44a16e 100644
--- a/template/index.html
+++ b/template/index.html
@@ -92,26 +92,28 @@
             </div>
         </div>
         <b-modal id="settings-modal" hide-header hide-footer lazy>
-                <ul class="nav nav-tabs mx-n3 px-3 mb-3 mt-n3 pt-2 bg-light rounded-top">
-                    <li class="nav-item">
-                        <a class="nav-link" href="#" :class="{active: settings=='create'}" @click.prevent="settings='create'">New Feed</a>
-                    </li>
-                    <li class="nav-item">
-                        <a class="nav-link" href="#" :class="{active: settings=='manage'}" @click.prevent="settings='manage'">Manage Feeds</a>
-                    </li>
-                    <li class="nav-item">
-                        <a class="nav-link" href="#" :class="{active: settings=='import'}" @click.prevent="settings='import'">Import/Export</a>
-                    </li>
-                </ul>
+            <ul class="nav nav-tabs mx-n3 px-3 mb-3 mt-n3 pt-2 bg-light rounded-top">
+                <li class="nav-item">
+                    <a class="nav-link" href="#" :class="{active: settings=='create'}" @click.prevent="settings='create'">New Feed</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="#" :class="{active: settings=='manage'}" @click.prevent="settings='manage'">Manage Feeds</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="#" :class="{active: settings=='import'}" @click.prevent="settings='import'">Import/Export</a>
+                </li>
+            </ul>
             <div v-if="settings=='create'">
-                <label for="feed-url">URL</label>
-                <input id="feed-url" type="text" class="form-control">
-                <label for="feed-folder" class="mt-3">Folder</label>
-                <select class="form-control" id="feed-folder">
-                    <option value=""></option>
-                    <option :value="folder.id" v-for="folder in folders">{{ folder.title }}</option>
-                </select>
-                <button class="btn btn-block btn-outline-secondary mt-3 loading" type="button">Add</button>
+                <form action="" @submit.prevent="createFeed(event)">
+                    <label for="feed-url">URL</label>
+                    <input id="feed-url" name="url" type="url" class="form-control" required>
+                    <label for="feed-folder" class="mt-3">Folder</label>
+                    <select class="form-control" id="feed-folder" name="folder_id">
+                        <option value=""></option>
+                        <option :value="folder.id" v-for="folder in folders">{{ folder.title }}</option>
+                    </select>
+                    <button class="btn btn-block btn-outline-secondary mt-3" :class="{loading: loading.newfeed}" type="submit">Add</button>
+                </form>
             </div>
             <div v-else-if="settings=='manage'">
                 <div v-for="folder in foldersWithFeeds" class="mb-4">
@@ -167,6 +169,7 @@
     <script src="./static/javascripts/popper.min.js"></script>
     <!-- <script src="./static/javascripts/bootstrap.min.js"></script> -->
     <script src="./static/javascripts/bootstrap-vue.min.js"></script>
+    <script src="./static/javascripts/api.js"></script>
     <script src="./static/javascripts/app.js"></script>
 </body>
 </html>
diff --git a/template/static/javascripts/api.js b/template/static/javascripts/api.js
new file mode 100644
index 0000000..e145a77
--- /dev/null
+++ b/template/static/javascripts/api.js
@@ -0,0 +1,25 @@
+"use strict";
+
+(function() {
+  var api = function(method, endpoint, data) {
+    var promise = fetch(endpoint, {
+      method: method,
+      headers: {'content-type': 'application/json'},
+      body: JSON.stringify(data),
+    })
+    return promise.then(function(res) {
+      if (res.ok) return res.json()
+    })
+  }
+
+  window.api = {
+    feeds: {
+      list: function() {
+        return api('get', '/api/feeds')
+      },
+      create: function(data) {
+        return api('post', '/api/feeds', data)
+      },
+    }
+  }
+})()
diff --git a/template/static/javascripts/app.js b/template/static/javascripts/app.js
index 9c015ca..78c30bd 100644
--- a/template/static/javascripts/app.js
+++ b/template/static/javascripts/app.js
@@ -32,6 +32,7 @@ var vm = new Vue({
       'itemSelected': null,
       'settings': 'manage',
       'newFolderTitle': null,
+      'loading': {newfeed: 0},
     }
   },
   computed: {
@@ -95,5 +96,20 @@ var vm = new Vue({
         this.feeds = this.feeds.filter(function(f) { f.id != feed.id })
       }
     },
+    createFeed: function(event) {
+      var form = event.target
+      var data = {
+        url: form.querySelector('input[name=url]').value,
+        folder_id: parseInt(form.querySelector('select[name=folder_id]').value) || null,
+      }
+      this.loading.newfeed = true
+      var vm = this
+      api.feeds.create(data).then(function(result) {
+        if (result.status === 'success') {
+          vm.$bvModal.hide('settings-modal')
+        }
+        vm.loading.newfeed = false
+      })
+    },
   }
 })