diff --git a/app/static/provider-do.vue b/app/static/provider-do.vue
new file mode 100644
index 0000000..16c5e90
--- /dev/null
+++ b/app/static/provider-do.vue
@@ -0,0 +1,82 @@
+<template>
+  <div>
+    <div class="form-group">
+      <label for="id_do_token">
+          Enter your API token. The token must have read and write permissions
+          (<a href="https://cloud.digitalocean.com/settings/api/tokens" target="_blank" rel="noopener noreferrer">https://cloud.digitalocean.com/settings/api/tokens</a>):
+      </label>
+      <input
+          type="text"
+          class="form-control"
+          id="id_do_token"
+          name="do_token"
+          v-model="do_token"
+          @blur="load_do_regions"
+      />
+    </div>
+    <div class="form-group">
+      <label
+          v-if="do_regions.length > 0"
+          for="id_region"
+      >What region should the server be located in?</label>
+      <label
+          v-if="do_regions.length === 0"
+          for="id_region"
+      >Please enter API key above to select region</label>
+      <label v-if="do_region_loading" for="id_region">Loading regions...</label>
+      <select
+          name="region"
+          id="id_region"
+          class="form-control"
+          v-model="do_region"
+          v-bind:disabled="do_region_loading"
+      >
+          <option value disabled>Select region</option>
+          <option
+            v-for="(region, i) in do_regions"
+            v-bind:key="region.slug"
+            v-bind:value="region.slug"
+            >{{region.name}}</option>
+      </select>
+    </div>
+    <button @click="submit" v-bind:disabled="!do_region" class="btn btn-primary" type="button">Next</button>
+  </div>
+</template>
+
+<script>
+module.exports = {
+  data: function() {
+    return {
+      do_token: null,
+      do_region: null,
+      do_regions: [],
+      do_region_loading: false
+    }
+  },
+  methods: {
+    load_do_regions: function () {
+      this.do_region_loading = true;
+        fetch("/do/regions", {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json"
+          },
+          body: JSON.stringify({ token: this.do_token })
+        })
+          .then(r => r.json())
+          .then(r => {
+            this.do_regions = r.regions;
+          })
+          .finally(() => {
+            this.do_region_loading = false;
+          });
+    },
+    submit() {
+      this.$emit('submit', {
+        do_token: this.do_token,
+        region: this.do_region
+      })
+    }
+  }
+};
+</script>
\ No newline at end of file
diff --git a/app/static/provider-setup.vue b/app/static/provider-setup.vue
index faf5356..31ac68d 100644
--- a/app/static/provider-setup.vue
+++ b/app/static/provider-setup.vue
@@ -12,14 +12,14 @@
           <a
             class="nav-link"
             href="#prodiver_id"
-            v-bind:class="{ active: item.alias === provider && provider.alias }"
+            v-bind:class="{ active: item.alias === (provider && provider.alias) }"
             @click="set_provider(item)"
           >{{item.name}}</a>
         </li>
       </ul>
     </div>
     <div class="col-8">
-      {{ provider && provider.alias }}
+      <component v-if="provider" v-bind:is="provider.alias" v-on:submit="on_provider_submit"></component>
     </div>
   </div>
 </template>
@@ -51,7 +51,13 @@ module.exports = {
   methods: {
     set_provider(provider) {
       this.provider = provider;
+    },
+    on_provider_submit(extra_args) {
+      this.$emit('submit', Object.assign({provider: this.provider.alias}, extra_args));
     }
+  },
+  components: {
+    'digitalocean': window.httpVueLoader('/static/provider-do.vue')
   }
 };
 </script>
\ No newline at end of file