diff --git a/frontend/quasar.config.js b/frontend/quasar.config.js
index efe217e..8c164c8 100644
--- a/frontend/quasar.config.js
+++ b/frontend/quasar.config.js
@@ -123,7 +123,10 @@ module.exports = configure(function (/* ctx */) {
 
     // animations: 'all', // --- includes all animations
     // https://v2.quasar.dev/options/animations
-    animations: [],
+    animations: [
+      'fadeIn',
+      'fadeOut',
+    ],
 
     // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#property-sourcefiles
     // sourceFiles: {
diff --git a/frontend/src/boot/axios.js b/frontend/src/boot/axios.js
index a9a65d5..6735c68 100644
--- a/frontend/src/boot/axios.js
+++ b/frontend/src/boot/axios.js
@@ -7,7 +7,7 @@ import axios from 'axios'
 // good idea to move this instance creation inside of the
 // "export default () => {}" function below (which runs individually
 // for each client)
-const api = axios.create({ baseURL: 'https://forms.dckube.scilifelab.se/api/v1' })
+const api = axios.create({ baseURL: '/api/v1' })
 
 export default boot(({ app }) => {
   // for use inside Vue files (Options API) through this.$axios and this.$api
diff --git a/frontend/src/components/DeleteDialog.vue b/frontend/src/components/DeleteDialog.vue
new file mode 100644
index 0000000..2007384
--- /dev/null
+++ b/frontend/src/components/DeleteDialog.vue
@@ -0,0 +1,63 @@
+<template>
+  <q-dialog v-model="showDialog">
+    <q-card>
+      <q-card-section class="row items-center">
+        <q-avatar icon="delete" text-color="negative" />
+        <span class="q-ml-sm">Are you sure you want to delete this {{ entryType }}?</span>
+      </q-card-section>
+      
+      <q-card-actions align="right">
+        <q-btn
+	  v-close-popup
+	  flat
+          label="Delete"
+          color="negative"
+	  class="confirm-delete"
+          @click="confirmDelete" />
+        <q-btn
+	  v-close-popup
+	  flat
+	  label="Cancel"
+	  color="grey-7" />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script>
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'DeleteDialog',
+  
+  props: {
+    modelValue: {  // show
+      type: Boolean,
+      required: true,
+    },
+    entryType: {
+      type: String,
+      default: "form",
+    }
+  },
+
+  emits: ['update:modelValue', 'delete-confirmed'],
+
+  computed: {
+    showDialog: {
+      get () {
+	return this.modelValue
+      },
+      set (newValue) {
+	this.$emit('update:modelValue', newValue)
+      }
+    }
+  },
+
+  methods: {
+    confirmDelete() {
+      this.$emit('delete-confirmed');
+    },
+  },
+})
+</script>
diff --git a/frontend/src/components/FormBrowser.vue b/frontend/src/components/FormBrowser.vue
new file mode 100644
index 0000000..737d941
--- /dev/null
+++ b/frontend/src/components/FormBrowser.vue
@@ -0,0 +1,173 @@
+<template>
+  <q-table
+    style="max-width: 97% ;min-width: 850px"
+    title="Forms"
+    :rows="entries"
+    :columns="columns"
+    row-key="identifier"
+    :pagination="pagination"
+    :filter="filter"
+    :loading="loading"
+    no-data-label="No entries found"
+    :no-results-label="filter + ' does not match any entries'"
+    >
+    <template #top-right>
+      <q-input
+	v-model="filter"
+	rounded
+	outlined
+	dense
+	debounce="300"
+	placeholder="Search">
+        <template #append>
+          <q-icon name="search" />
+        </template>
+      </q-input>
+    </template>
+    <template #body="props">
+      <q-tr :props="props" @click=selectForm(props)>
+        <q-td key="title" :props="props">
+          {{ props.row.title }}
+        </q-td>
+        <q-td key="identifier" :props="props">
+          {{ props.row.identifier }}
+        </q-td>
+        <q-td key="recaptcha" :props="props">
+          <q-icon
+	    :name="props.row.recaptcha ? 'check_circle' : 'cancel'"
+	    :color="props.row.recaptcha ? 'positive' : 'negative'"
+	    size="1.5em">
+          </q-icon>
+        </q-td>
+        <q-td key="sendEmail" :props="props">
+          <q-icon
+	    :name="props.row.email ? 'check_circle' : 'cancel'"
+	    :color="props.row.email ? 'accent' : 'secondary'"
+	    size="1.5em">
+          </q-icon>
+        </q-td>
+        <q-td key="redirect" :props="props">
+          <q-icon
+	    :name="props.row.redirect ? 'check_circle' : 'cancel'"
+	    :color="props.row.redirect ? 'accent' : 'secondary'"
+	    size="1.5em">
+          </q-icon>
+        </q-td>
+      </q-tr>
+    </template>
+  </q-table>
+</template>
+
+<script>
+import { defineComponent } from 'vue'
+
+import StringListEditor from 'components/StringListEditor.vue'
+
+export default defineComponent({
+  name: 'FormBrowser',
+
+  props: {
+    modelValue: {
+      type: String,
+      required: true,
+    },
+    refreshNeeded: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  emits: ['update:modelValue', 'refresh-done'],
+
+  data () {
+    return {
+      entries: [],
+      editData: {},
+      isDeleting: false,
+      toDelete: {},
+      filter: '',
+      loading: false,
+      loadError: false,
+      showEditTemplateDialog: false,
+      showDeleteWarning: false,
+      currrentEditTemplate: {},
+      currrentEditTemplateText: "",
+      currrentEditTemplateType: "",
+      pagination: {
+        rowsPerPage: 20
+      },
+      columns: [
+        {
+          name: 'title',
+          label: 'Title',
+          field: 'title',
+          required: true,
+	  align: 'left',
+          sortable: true
+        },
+        {
+          name: 'identifier',
+          label: 'Identifier',
+          field: 'identifier',
+          required: true,
+          sortable: true,
+        },
+        {
+          name: 'recaptcha',
+          label: 'reCAPTCHA',
+          field: 'recaptcha',
+          required: true,
+          sortable: true,
+        },
+        {
+          name: 'sendEmail',
+          label: 'Send email',
+          field: 'email',
+          required: true,
+          sortable: true,
+        },
+        {
+          name: 'redirect',
+          label: 'Redirect',
+          field: 'redirect',
+          required: true,
+          sortable: true,
+        },
+      ]
+    }
+  },
+
+  watch: {
+    refreshNeeded (newValue) {
+      if (newValue === true) {
+	this.getEntries();
+      }
+    },
+  },
+
+  mounted () {
+    this.getEntries();
+  },
+
+  methods: {
+    getEntries () {
+      this.loading = true;
+      this.$api
+	.get('/form')
+        .then((response) => {
+	  this.entries = response.data['forms']
+	})
+      .catch((err) => {
+	this.loadError = true;
+      })
+	.finally(() => {
+	  this.loading = false
+	  this.$emit('refresh-done')
+	});
+    },
+    selectForm(props) {
+      this.$emit('update:modelValue', props.row.identifier);
+    },
+  },
+})
+</script>
diff --git a/frontend/src/components/FormConfig.vue b/frontend/src/components/FormConfig.vue
new file mode 100644
index 0000000..9f00f5e
--- /dev/null
+++ b/frontend/src/components/FormConfig.vue
@@ -0,0 +1,240 @@
+<template>
+<div v-if="Object.keys(editData).length > 0">
+  <q-list dense>
+    <q-item>
+      <q-item-section>
+	<q-input
+	  v-model="editData.identifier"
+	  outlined
+	  label="Identifier"
+	  readonly
+	  />
+      </q-item-section>
+    </q-item>
+
+    <q-item>
+      <q-item-section>
+	<q-input
+	  v-model="editData.title"
+	  outlined
+	  label="Title"
+	  />
+      </q-item-section>
+    </q-item>
+
+    <q-item>
+      <q-item-section>
+	<q-input
+	  v-model="editData.redirect"
+	  outlined
+	  label="Redirect to"
+	  />
+      </q-item-section>
+    </q-item>
+
+    <q-item>
+      <q-item-section>
+	<q-input
+	  v-model="editData.recaptcha_secret"
+	  outlined
+	  label="Recaptcha secret"
+	  />
+      </q-item-section>
+    </q-item>
+
+    <q-item>
+      <q-item-section>
+	<str-list-editor
+	  v-model="editData.email_recipients"
+	  field-title="Email Recipients"
+	  />
+      </q-item-section>
+    </q-item>
+
+    <div v-show="editData.email_recipients.length > 0">
+      <q-item>
+        <q-item-section>
+	  <q-input
+	    v-model="editData.email_title"
+	    outlined
+	    label="Email title"
+	    />
+        </q-item-section>
+      </q-item>
+      <q-item>
+	<q-item-section>
+	  <q-toggle
+	    v-model="editData.email_custom"
+	    label="Use custom email templates"
+	    />
+	  <q-space />
+	  <transition
+	    appear
+	    enter-active-class="animated fadeIn"
+	    leave-active-class="animated fadeOut"
+	    >
+	    <div
+	      v-show="editData.email_custom"
+	      class="flex justify-between item-stretch content-stretch">
+	      <q-input
+		v-model="editData.email_text_template"
+		class="col-6"
+		style="min-width: 49%"
+		autogrow
+		outlined
+		type="textarea"
+		label="Email text template"
+		/>
+	      <q-input
+		v-model="editData.email_html_template"
+		class="col-6"
+		style="min-width: 49%"
+		autogrow
+		outlined
+		type="textarea"
+		label="Email HTML template"
+		/>
+	    </div>
+	  </transition>
+	</q-item-section>
+      </q-item>
+    </div>
+    <q-item>
+      <q-item-section>
+	<str-list-editor
+	  v-model="editData.owners"
+	  field-title="Form Owners"
+	  :static-current-user="true"
+	  />
+      </q-item-section>
+    </q-item>
+    <q-item>
+      <q-item-section>
+	<div class="items-end">
+	  <q-btn
+	    size="md"
+	    icon="check"
+	    label="Save"
+	    color="positive"
+	    :loading="editData.saving"
+	    @click="save" />
+	  <q-btn
+	    class="q-ml-md"
+	    bg-color="positive"
+	    size="md"
+	    icon="delete"
+	    label="Delete"
+	    color="negative"
+	    @click="confirmDelete(props)" />
+	  <span v-show="editData.saveError" class="text-negative">Save failed</span>
+	</div>
+      </q-item-section>
+    </q-item>
+  </q-list>
+  <delete-dialog
+    v-model="showDeleteWarning"
+    @delete-confirmed="deleteForm" />
+</div>
+</template>
+
+<script>
+import { defineComponent } from 'vue'
+
+import StringListEditor from 'components/StringListEditor.vue'
+import DeleteDialog from 'components/DeleteDialog.vue'
+
+export default defineComponent({
+  name: 'FormConfig',
+  components: {
+    'delete-dialog': DeleteDialog,
+    'str-list-editor': StringListEditor,
+  },
+
+  props: {
+    identifier: {
+      type: String,
+      required: true,
+    }
+  },
+
+  emits: ['form-deleted'],
+
+  data () {
+    return {
+      entry: {},
+      editData: {},
+      isDeleting: false,
+      toDelete: {},
+      loading: false,
+      loadError: false,
+      showEditTemplateDialog: false,
+      showDeleteWarning: false,
+    }
+  },
+
+  computed : {
+    dataChanged: {
+      get () {
+	return this.entry != this.editData;
+      }
+    }
+  },
+
+  mounted () {
+    this.getEntry();
+  },
+  
+  methods: {
+    getEntry() {
+      this.loading = true;
+      this.$api
+	.get('/form/' + this.identifier)
+        .then((response) => {
+	  this.entry = response.data['form']
+	  this.editData = JSON.parse(JSON.stringify(this.entry))
+	})
+      .catch((err) => {
+	this.loadError = true;
+      })
+      .finally(() => this.loading = false);
+    },
+
+    confirmDelete(entry) {
+      this.toDelete = entry;
+      this.showDeleteWarning = true;
+    },
+
+    deleteForm() {
+      this.isDeleting = true;
+      this.$api
+	.delete('/form/' + this.identifier,
+		{headers: {'X-CSRFToken': this.$q.cookies.get('_csrf_token')}})
+        .then(() => {
+	  this.showDeleteWarning = false;
+	  delete this.editData;
+	  delete this.entry;
+	  this.$emit('form-deleted');
+	})
+	.finally(() => this.isDeleting = false);
+    },
+
+    save() {
+      this.saving = true;
+      this.saveError = false;
+      let outgoing = JSON.parse(JSON.stringify(this.editData));
+      this.$api
+	.patch('/form/' + this.identifier,
+	       outgoing,
+	       {headers: {'X-CSRFToken': this.$q.cookies.get('_csrf_token')}}
+	      )
+        .then((response) => {
+	  this.getEntry();
+	})
+	.catch((err) => {
+	  this.saveError = true
+	  this.saving = false
+	})
+    },
+  },
+})
+</script>
diff --git a/frontend/src/pages/FormResponses.vue b/frontend/src/components/FormSubmissions.vue
similarity index 91%
rename from frontend/src/pages/FormResponses.vue
rename to frontend/src/components/FormSubmissions.vue
index 1d136d5..8d360af 100644
--- a/frontend/src/pages/FormResponses.vue
+++ b/frontend/src/components/FormSubmissions.vue
@@ -1,15 +1,8 @@
 <template>
-<q-page class="fit column justify-center items-center content-center">
-  <q-btn
-    label="Back to Form Browser"
-    icon="arrow_back"
-    class="q-my-lg"
-    color="primary"
-    :to="{ name: 'FormBrowser' }"
-    />
-  
+<div>
   <q-card
     v-if="Object.keys(urlInfo).length > 0"
+    bordered
     class="q-my-sm">
     <q-card-section>
       &lt;form action="{{ urlInfo.submission_url }}" method="{{ urlInfo.method }}" accept-charset="utf-8"&gt;
@@ -17,6 +10,7 @@
   </q-card>
   
   <q-table
+    flat
     class="q-my-lg"
     :title="formInfo.title"
     :rows="listingType === 'submission' ? rawSubmissions : questions"
@@ -72,13 +66,15 @@
           >
           {{ col.value }}
         </q-td>
-	<q-td>
+	<q-td auto-width>
 	  <q-btn
 	    v-if="listingType === 'submission'"
 	    color="red"
 	    icon="delete"
 	    flat
-	    @click="deleteSubmission(props.row.id)"
+	    round
+            dense
+	    @click="confirmDelete(props.row.id)"
 	    />
 	</q-td>
       </q-tr>
@@ -131,15 +127,27 @@
     color="secondary"
     @click="jsonToClipboard(listingType === 'submission' ? rawSubmissions : questions)"
     />
-</q-page>
+
+  <delete-dialog
+    v-model="showDeleteWarning"
+    entry-type="submission"
+    @delete-confirmed="deleteSubmission" />
+</div>
 </template>
 
 <script>
 import { defineComponent } from 'vue'
 import { copyToClipboard } from 'quasar'
 
+import DeleteDialog from 'components/DeleteDialog.vue'
+
 export default defineComponent({
   name: 'FormSubmissions',
+
+  components: {
+    'delete-dialog': DeleteDialog,
+  },
+  
   props: {
     identifier: {
       type: String,
@@ -200,6 +208,8 @@ export default defineComponent({
       urlInfo: {},
       listingType: 'submission',
       showCopyInfo: false,
+      toDelete: {},
+      showDeleteWarning: false,
     }
   },
 
@@ -269,9 +279,15 @@ export default defineComponent({
 	.catch((err) => this.urlError = true)
       	.finally(() => this.urlLoading = false);
     },
-    deleteSubmission(subid) {
+
+    confirmDelete(entry) {
+      this.toDelete = entry;
+      this.showDeleteWarning = true;
+    },
+
+    deleteSubmission() {
       this.$axios
-	.delete('/api/v1/form/' + this.identifier + '/submission/' + subid,
+	.delete('/api/v1/form/' + this.identifier + '/submission/' + this.toDelete,
 	       {headers: {'X-CSRFToken': this.$q.cookies.get('_csrf_token')}})
         .then(() => this.getEntry())
 	.catch(() => console.log('Failed to delete entry ' + subid))
diff --git a/frontend/src/components/StringListEditor.vue b/frontend/src/components/StringListEditor.vue
index 3af12c9..3ef9de9 100644
--- a/frontend/src/components/StringListEditor.vue
+++ b/frontend/src/components/StringListEditor.vue
@@ -3,7 +3,6 @@
   <div>
     <q-input
       v-model="newValue"
-      dense
       stack-label
       hide-bottom-space
       outlined
diff --git a/frontend/src/pages/FormBrowser.vue b/frontend/src/pages/FormBrowser.vue
deleted file mode 100644
index 5422c54..0000000
--- a/frontend/src/pages/FormBrowser.vue
+++ /dev/null
@@ -1,434 +0,0 @@
-<template>
-<q-page class="flex items-center justify-center">
-  <q-table
-    style="max-width: 97% ;min-width: 850px"
-    title="Forms"
-    :rows="entries"
-    :columns="columns"
-    row-key="identifier"
-    :pagination="pagination"
-    :filter="filter"
-    :loading="loading"
-    no-data-label="No entries found"
-    :no-results-label="filter + ' does not match any entries'"
-    >
-    <template #top-right>
-      <q-btn
-	class="q-mx-sm"
-	dense
-	round
-	outline
-	icon="add"
-	@click="addForm" />      
-      <q-input v-model="filter" rounded outlined dense debounce="300" placeholder="Search">
-        <template #append>
-          <q-icon name="search" />
-        </template>
-      </q-input>
-    </template>
-    <template #header="props">
-      <q-tr :props="props">
-	<q-th auto-width />
-        <q-th
-          v-for="col in props.cols"
-          :key="col.name"
-          :props="props"
-          >
-          {{ col.label }}
-        </q-th>
-	<q-th auto-width />
-      </q-tr>
-    </template>
-    <template #body="props">
-      <q-tr :props="props">
-	<q-td auto-width>
-          <q-btn
-            color="primary"
-            :icon="props.expand ? 'expand_less' : 'expand_more'"
-            size="sm"
-            round
-            dense
-	    @click="expandItem(props)"
-            />
-	</q-td>
-        <q-td key="title" :props="props">
-          {{ props.row.title }}
-        </q-td>
-        <q-td key="identifier" :props="props">
-          {{ props.row.identifier }}
-        </q-td>
-        <q-td key="recaptcha" :props="props">
-          <q-icon
-	    :name="props.row.recaptcha_secret.length ? 'check_circle' : 'cancel'"
-	    :color="props.row.recaptcha_secret.length ? 'positive' : 'negative'"
-	    size="1.5em">
-          </q-icon>
-        </q-td>
-        <q-td key="sendEmail" :props="props">
-          <q-icon
-	    :name="props.row.email_recipients.length ? 'check_circle' : 'cancel'"
-	    :color="props.row.email_recipients.length ? 'accent' : 'secondary'"
-	    size="1.5em">
-          </q-icon>
-        </q-td>
-        <q-td key="redirect" :props="props">
-          <q-icon
-	    :name="props.row.redirect.length ? 'check_circle' : 'cancel'"
-	    :color="props.row.redirect.length ? 'accent' : 'secondary'"
-	    size="1.5em">
-          </q-icon>
-        </q-td>
-	<q-td auto-width>
-          <q-btn
-            color="primary"
-            icon="account_tree"
-            size="sm"
-            round
-            dense
-	    @click=gotoEntry(props.row.identifier)
-            />
-	</q-td>
-      </q-tr>
-      <q-tr v-if="props.expand" :props="props">
-        <q-td colspan="100%">
-	  <q-list dense>
-            <q-item>
-              <q-item-section>
-		<q-input
-		  v-model="editData[props.key].title"
-		  dense
-		  outlined
-		  label="Title"
-		  />
-              </q-item-section>
-            </q-item>
-            <q-item>
-              <q-item-section>
-		<q-input
-		  v-model="editData[props.key].redirect"
-		  dense
-		  outlined
-		  label="Redirect to"
-		  />
-              </q-item-section>
-            </q-item>
-            <q-item>
-              <q-item-section>
-		<q-input
-		  v-model="editData[props.key].recaptcha_secret"
-		  dense
-		  outlined
-		  label="Recaptcha secret"
-		  />
-              </q-item-section>
-            </q-item>
-            <q-item>
-              <q-item-section>
-		<str-list-editor
-		  v-model="editData[props.key].email_recipients"
-		  field-title="Email Recipients"
-		  />
-              </q-item-section>
-            </q-item>
-	    <div v-show="editData[props.key].email_recipients.length > 0">
-	    <q-item>
-              <q-item-section>
-		<q-input
-		  v-model="editData[props.key].email_title"
-		  dense
-		  outlined
-		  label="Email title"
-		  />
-              </q-item-section>
-	    </q-item>
-	    <q-item>
-	      <q-item-section>
-		<q-toggle
-		  v-model="editData[props.key].email_custom"
-		  label="Custom email template"
-		  />
-		<q-space />
-		<div v-show="editData[props.key].email_custom">
-		  <q-btn
-		    flat
-		    label="Edit text email"
-		    @click="openTemplateDialog(editData[props.key], 'text')"
-		    />
-		  <q-btn
-		    flat
-		    label="Edit html email"
-		    @click="openTemplateDialog(editData[props.key], 'html')"
-		    />
-		</div>
-	      </q-item-section>
-	    </q-item>
-	    </div>
-            <q-item>
-              <q-item-section>
-		<str-list-editor
-		  v-model="editData[props.key].owners"
-		  field-title="Form Owners"
-		  :static-current-user="true"
-		  />
-              </q-item-section>
-            </q-item>
-	    <q-item>
-	      <q-item-section>
-		<div class="items-end">
-		  <q-btn
-		    flat
-		    round
-		    dense
-		    size="md"
-		    icon="check"
-		    color="positive"
-		    :loading="editData[props.key].saving"
-		    @click="saveEdit(props)" />
-		  <q-btn
-		    flat
-		    round
-		    dense
-		    bg-color="positive"
-		    size="md"
-		    icon="cancel"
-		    color="negative"
-		    @click="cancelEdit(props)" />
-		  <q-btn
-		    flat
-		    round
-		    dense
-		    class="q-ml-md"
-		    bg-color="positive"
-		    size="md"
-		    icon="delete"
-		    color="negative"
-		    @click="confirmDelete(props)" />
-		  <span v-show="editData[props.key].saveError" class="text-negative">Save failed</span>
-		</div>
-	      </q-item-section>
-	    </q-item>
-	  </q-list>
-        </q-td>
-      </q-tr>
-    </template>
-  </q-table>
-  <q-dialog v-model="showEditTemplateDialog">
-    <q-card style="min-width: 600px">
-      <q-card-section class="column">
-	<div class="text-h5 q-mb-sm">Edit Email Template</div>
-	<q-input
-	  v-model="currentEditTemplateText"
-	  autogrow
-	  outlined
-	  type="textarea"
-	  />
-      </q-card-section>
-
-      <q-card-actions align="right">
-        <q-btn
-	  flat
-          label="Keep"
-          color="positive"
-          @click="saveTemplate" />
-        <q-btn
-	  v-close-popup
-	  flat
-	  label="Cancel"
-	  color="grey-7" />
-      </q-card-actions>
-    </q-card>
-  </q-dialog>
-  <q-dialog v-model="showDeleteWarning">
-    <q-card>
-      <q-card-section class="row items-center">
-        <q-avatar icon="fas fa-trash" color="alert" text-color="primary" />
-        <span class="q-ml-sm">Are you sure you want to delete this form?</span>
-      </q-card-section>
-
-      <q-card-actions align="right">
-        <q-btn
-	  flat
-          :loading="isDeleting"
-          label="Delete"
-          color="negative"
-          class="user-edit-confirm-delete"
-          @click="deleteForm" />
-        <q-btn
-	  v-close-popup
-	  flat
-	  label="Cancel"
-	  color="grey-7" />
-      </q-card-actions>
-    </q-card>
-  </q-dialog>
-
-</q-page>
-</template>
-
-<script>
-import { defineComponent } from 'vue'
-
-import StringListEditor from 'components/StringListEditor.vue'
-
-export default defineComponent({
-  name: 'FormBrowser',
-  components: {
-    'str-list-editor': StringListEditor,
-  },
-
-  data () {
-    return {
-      entries: [],
-      editData: {},
-      isDeleting: false,
-      toDelete: {},
-      filter: '',
-      loading: false,
-      loadError: false,
-      showEditTemplateDialog: false,
-      showDeleteWarning: false,
-      currrentEditTemplate: {},
-      currrentEditTemplateText: "",
-      currrentEditTemplateType: "",
-      pagination: {
-        rowsPerPage: 20
-      },
-      columns: [
-        {
-          name: 'title',
-          label: 'Title',
-          field: 'title',
-          required: true,
-	  align: 'left',
-          sortable: true
-        },
-        {
-          name: 'identifier',
-          label: 'Identifier',
-          field: 'identifier',
-          required: true,
-          sortable: true,
-        },
-        {
-          name: 'recaptcha',
-          label: 'reCAPTCHA',
-          field: 'recaptcha',
-          required: true,
-          sortable: true,
-        },
-        {
-          name: 'sendEmail',
-          label: 'Send email',
-          field: 'email',
-          required: true,
-          sortable: true,
-        },
-        {
-          name: 'redirect',
-          label: 'Redirect',
-          field: 'redirect',
-          required: true,
-          sortable: true,
-        },
-      ]
-    }
-  },
-
-  mounted () {
-    this.getEntries();
-  },
-
-  methods: {
-    getEntries () {
-      this.loading = true;
-      this.$axios
-	.get('/api/v1/form')
-        .then((response) => {
-	  this.entries = response.data['forms']
-	})
-      .catch((err) => {
-	this.loadError = true;
-      })
-      .finally(() => this.loading = false);
-    },
-    gotoEntry(identifier) {
-      this.$router.push({name: 'FormResponses', params: {identifier: identifier}});
-    },
-
-    confirmDelete(entry) {
-      this.toDelete = entry;
-      this.showDeleteWarning = true;
-    },
-
-    deleteForm() {
-      this.isDeleting = true;
-      this.$axios
-	.delete('/api/v1/form/' + this.toDelete.row.identifier,
-		{headers: {'X-CSRFToken': this.$q.cookies.get('_csrf_token')}})
-        .then(() => {
-	  this.toDelete.expand = false;
-	  this.showDeleteWarning = false;
-	  delete this.editData[this.toDelete.row.identifier];
-	  this.getEntries();
-	})
-	.finally(() => this.isDeleting = false);
-    },
-    addForm() {
-      this.$axios
-	.post('/api/v1/form', {}, {headers: {'X-CSRFToken': this.$q.cookies.get('_csrf_token')}})
-        .then(() => this.getEntries())
-    },
-    expandItem(entry) {
-      entry.expand = !entry.expand;
-      if (!(entry.key in this.editData)) {
-	this.editData[entry.key] = {
-	  title: entry.row.title,
-	  recaptcha_secret: entry.row.recaptcha_secret,
-	  email_recipients: JSON.parse(JSON.stringify(entry.row.email_recipients)),
-	  email_custom: entry.row.email_custom,
-	  email_text_template: entry.row.email_text_template,
-	  email_html_template: entry.row.email_html_template,
-	  email_title: entry.row.email_title,
-	  owners: JSON.parse(JSON.stringify(entry.row.owners)),
-	  redirect: entry.row.redirect,
-	  saving: false,
-	}
-      }
-    },
-    saveEdit(entry) {
-      this.editData[entry.key].saving = true;
-      this.editData[entry.key].saveError = false;
-      let outgoing = JSON.parse(JSON.stringify(this.editData[entry.key]));
-      delete outgoing.saving;
-      delete outgoing.saveError;
-      this.$axios
-	.patch('/api/v1/form/' + entry.row.identifier, outgoing, {headers: {'X-CSRFToken': this.$q.cookies.get('_csrf_token')}})
-        .then((response) => {
-	  entry.expand = false;
-	  delete this.editData[entry.key];
-	  this.getEntries();
-	  })
-	.catch((err) => {
-	  this.editData[entry.key].saveError = true
-	  this.editData[entry.key].saving = false
-	})
-    },
-    cancelEdit(entry) {
-      entry.expand = false;
-      delete this.editData[entry.key];
-    },
-    openTemplateDialog(entry, type) {
-      this.showEditTemplateDialog = true;
-      let prop = "email_" + type + "_template";
-      this.currentEditTemplate = entry;
-      console.log(this.currentEditTemplate)
-      this.currentEditTemplateType = prop;
-      this.currentEditTemplateText = entry[prop];
-    },
-    saveTemplate() {
-      this.currentEditTemplate[this.currentEditTemplateType] = this.currentEditTemplateText;
-      this.showEditTemplateDialog = false;
-    },
-  },
-})
-</script>
diff --git a/frontend/src/pages/FormHandler.vue b/frontend/src/pages/FormHandler.vue
new file mode 100644
index 0000000..6c7439a
--- /dev/null
+++ b/frontend/src/pages/FormHandler.vue
@@ -0,0 +1,136 @@
+<template>
+<q-page class="flex items-start justify-center q-mt-xl">
+  <div v-if="selected.length === 0">
+    <transition
+      appear
+      enter-active-class="animated fadeIn"
+      leave-active-class="animated fadeOut"
+      >
+      <form-browser
+	v-model="selected"
+	:refresh-needed="refreshNeeded"
+	@refresh-done="refreshNeeded = false" />
+    </transition>
+  </div>
+  <div v-else>
+    <transition
+      appear
+      enter-active-class="animated fadeIn"
+      leave-active-class="animated fadeOut"
+      >
+      <div style="min-width: 850px">
+	<div class="q-my-md">
+	  <q-btn
+	    rounded
+	    icon="arrow_back"
+	    label="Choose another form"
+	    size="l"
+	    @click="getLeaveConfirmation" />
+	</div>
+	<q-card>
+	  <q-tabs
+	    v-model="tab"
+	    dense
+	    class="text-grey"
+	    active-color="primary"
+	    indicator-color="primary"
+	    align="justify"
+	    >
+	    <q-tab name="config" label="Configuration" />
+	    <q-tab name="submissions" label="Submissions" />
+	  </q-tabs>
+	  
+	  <q-separator />
+	  
+	  <q-tab-panels v-model="tab" animated>
+	    <q-tab-panel name="config">
+	      <form-config
+		:identifier="selected"
+		@form-deleted="leaveForm" />
+	    </q-tab-panel>
+	    
+	    <q-tab-panel name="submissions">
+	      <form-submissions :identifier="selected" />
+	    </q-tab-panel>
+	  </q-tab-panels>
+	</q-card>
+      </div>
+    </transition>
+  </div>
+  <q-btn
+    class="q-ma-md"
+    icon="add"
+    label="Add new form"
+    color="primary"
+    @click="addForm" />
+
+  <q-dialog v-model="showLeaveFormDialog">
+    <q-card>
+      <q-card-section class="row items-center">
+        <q-avatar icon="warning" text-color="negative" />
+        <span class="q-ml-sm">Are you sure you want to abandon you changes to the form?</span>
+      </q-card-section>
+      
+      <q-card-actions align="right">
+        <q-btn
+	  v-close-popup
+	  flat
+          label="Yes"
+          color="primary"
+	  class="confirm-leave"
+          @click="leaveForm" />
+        <q-btn
+	  v-close-popup
+	  flat
+	  label="Cancel"
+	  color="grey-7" />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</q-page>
+</template>
+
+<script>
+import { defineComponent } from 'vue'
+
+import FormBrowser from 'components/FormBrowser.vue'
+import FormConfig from 'components/FormConfig.vue'
+import FormSubmissions from 'components/FormSubmissions.vue'
+
+export default defineComponent({
+  name: 'FormHandler',
+
+  components: {
+    'form-browser': FormBrowser,
+    'form-config': FormConfig,
+    'form-submissions': FormSubmissions,
+  },
+  
+  data () {
+    return {
+      selected: '',
+      tab: 'config',
+      refreshNeeded: false,
+      showLeaveFormDialog: false,
+    }
+  },
+
+  methods: {
+    getLeaveConfirmation () {
+      this.showLeaveFormDialog = true
+    },
+
+    leaveForm () {
+      this.selected = ''
+      this.tab = 'config'
+    },
+
+    addForm() {
+      this.$api
+	.post('/form', {}, {headers: {'X-CSRFToken': this.$q.cookies.get('_csrf_token')}})
+        .then(() => this.refreshNeeded = true);
+    },
+
+  }
+})
+</script>
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
index b24cd31..d8df507 100644
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -39,7 +39,7 @@ export default route(function (/* { store, ssrContext } */) {
 	      next()
 	  }
 	  else if (to.name === 'Login')
-	    next({name: 'FormBrowser'})
+	    next({name: 'FormHandler'})
 	  else
 	    next()
 	})
@@ -53,7 +53,7 @@ export default route(function (/* { store, ssrContext } */) {
 	  next()
       }
       else if (to.name === 'Login')
-	next({name: 'FormBrowser'})
+	next({name: 'FormHandler'})
       else
 	next()
     }
diff --git a/frontend/src/router/routes.js b/frontend/src/router/routes.js
index 094a9a7..3342f6d 100644
--- a/frontend/src/router/routes.js
+++ b/frontend/src/router/routes.js
@@ -5,13 +5,7 @@ const routes = [
     component: () => import('layouts/MainLayout.vue'),
     meta: { 'loginRequired': true },
     children: [
-      { path: '', name: "FormBrowser", component: () => import('pages/FormBrowser.vue')},
-      {
-	path: 'responses/:identifier',
-	name: "FormResponses",
-	component: () => import('pages/FormResponses.vue'),
-	props: route => ({'identifier': route.params.identifier})
-      }
+      { path: '', name: "FormHandler", component: () => import('pages/FormHandler.vue')},
     ]
   },