diff --git a/frontend/src/pages/Error404.vue b/frontend/src/pages/Error404.vue
new file mode 100644
index 0000000000..de8bedfb36
--- /dev/null
+++ b/frontend/src/pages/Error404.vue
@@ -0,0 +1,31 @@
+<template>
+  <div class="fullscreen bg-blue text-white text-center q-pa-md flex flex-center">
+    <div>
+      <div style="font-size: 30vh">
+        404
+      </div>
+
+      <div class="text-h2" style="opacity:.4">
+        Oops. Nothing here...
+      </div>
+
+      <q-btn
+        class="q-mt-xl"
+        color="white"
+        text-color="blue"
+        unelevated
+        to="/"
+        label="Go Home"
+        no-caps
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'Error404'
+})
+</script>
diff --git a/frontend/src/pages/Index.vue b/frontend/src/pages/Index.vue
new file mode 100644
index 0000000000..da010a68aa
--- /dev/null
+++ b/frontend/src/pages/Index.vue
@@ -0,0 +1,131 @@
+<template>
+  <q-page>
+    <div class="q-ma-md" v-if="0 === assetCount">
+      <NewUser
+      v-on:created-accounts="refreshThenCount"
+      ></NewUser>
+    </div>
+    <div class="q-ma-md" v-if="assetCount > 0">
+      <Boxes></Boxes>
+    </div>
+    <div class="row q-ma-md" v-if="assetCount > 0">
+      <div class="col-12">
+        <q-card bordered>
+          <q-card-section>
+            <div class="text-h6">Firefly III</div>
+            <div class="text-subtitle2">What's playing?</div>
+          </q-card-section>
+          <q-card-section>
+            <HomeChart></HomeChart>
+          </q-card-section>
+        </q-card>
+
+      </div>
+    </div>
+    <!--
+    <div class="row q-ma-md">
+      <div class="col-6 q-pr-sm">
+        <q-card bordered>
+          <q-card-section>
+            <div class="text-h6">Budgets</div>
+            <div class="text-subtitle2">Subheader</div>
+          </q-card-section>
+          <q-card-section>
+            Content
+          </q-card-section>
+        </q-card>
+
+
+      </div>
+      <div class="col-6 q-pl-sm">
+        <q-card bordered>
+          <q-card-section>
+            <div class="text-h6">Categories</div>
+            <div class="text-subtitle2">Subheader</div>
+          </q-card-section>
+          <q-card-section>
+            Content
+          </q-card-section>
+        </q-card>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-6">Expenses</div>
+      <div class="col-6">Income</div>
+    </div>
+    <div class="row">
+      <div class="col-4">Account X</div>
+      <div class="col-4">Account X</div>
+      <div class="col-4">Account X</div>
+    </div>
+    <div class="row">
+      <div class="col-6">Piggies</div>
+      <div class="col-6">Bills</div>
+    </div>
+    -->
+    <q-page-sticky position="bottom-right" :offset="[18, 18]" v-if="assetCount > 0">
+      <q-fab
+        label="Actions"
+        square
+        vertical-actions-align="right"
+        label-position="left"
+        color="green"
+        icon="fas fa-chevron-up"
+        direction="up"
+      >
+        <!-- <q-fab-action color="primary" square icon="fas fa-bullseye" label="New piggy bank"/> -->
+        <q-fab-action color="primary" square icon="fas fa-chart-pie" label="New budget"
+                      :to="{ name: 'budgets.create' }"/>
+        <!-- <q-fab-action color="primary" square icon="fas fa-home" label="New liability"/> -->
+        <q-fab-action color="primary" square icon="far fa-money-bill-alt" label="New asset account"
+                      :to="{ name: 'accounts.create', params: {type: 'asset'} }"/>
+        <q-fab-action color="primary" square icon="fas fa-exchange-alt" label="New transfer"
+                      :to="{ name: 'transactions.create', params: {type: 'transfer'} }"/>
+        <q-fab-action color="primary" square icon="fas fa-long-arrow-alt-right" label="New deposit"
+                      :to="{ name: 'transactions.create', params: {type: 'deposit'} }"/>
+        <q-fab-action color="primary" square icon="fas fa-long-arrow-alt-left" label="New withdrawal"
+                      :to="{ name: 'transactions.create', params: {type: 'withdrawal'} }"/>
+
+      </q-fab>
+    </q-page-sticky>
+  </q-page>
+</template>
+
+<script>
+import {defineAsyncComponent, defineComponent} from "vue";
+import List from "../api/accounts/list";
+import {mapGetters} from "vuex";
+
+export default defineComponent(
+  {
+    name: 'PageIndex',
+    components: {
+      Boxes: defineAsyncComponent(() => import('./dashboard/Boxes.vue')),
+      HomeChart: defineAsyncComponent(() => import('./dashboard/HomeChart')),
+      NewUser: defineAsyncComponent(() => import('../components/dashboard/NewUser')),
+    },
+    data() {
+      return {
+        assetCount: 1
+      }
+    },
+    computed: {
+      ...mapGetters('fireflyiii', ['getCacheKey']),
+    },
+    mounted() {
+      this.countAssetAccounts();
+    },
+    methods: {
+      refreshThenCount: function() {
+        this.$store.dispatch('fireflyiii/refreshCacheKey');
+        this.countAssetAccounts();
+      },
+      countAssetAccounts: function () {
+        let list = new List;
+        list.list('asset',1, this.getCacheKey).then((response) => {
+          this.assetCount = parseInt(response.data.meta.pagination.total);
+        });
+      }
+    }
+  })
+</script>
diff --git a/frontend/src/pages/accounts/Create.vue b/frontend/src/pages/accounts/Create.vue
new file mode 100644
index 0000000000..575f60c7e8
--- /dev/null
+++ b/frontend/src/pages/accounts/Create.vue
@@ -0,0 +1,217 @@
+<!--
+  - Create.vue
+  - Copyright (c) 2022 james@firefly-iii.org
+  -
+  - This file is part of Firefly III (https://github.com/firefly-iii).
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program.  If not, see <https://www.gnu.org/licenses/>.
+  -->
+
+<template>
+  <q-page>
+    <div class="row q-mx-md">
+      <div class="col-12">
+        <q-banner inline-actions rounded class="bg-orange text-white" v-if="'' !== errorMessage">
+          {{ errorMessage }}
+          <template v-slot:action>
+            <q-btn flat @click="dismissBanner" label="Dismiss"/>
+          </template>
+        </q-banner>
+      </div>
+    </div>
+    <div class="row q-mx-md q-mt-md">
+      <div class="col-12">
+        <q-card bordered>
+          <q-card-section>
+            <div class="text-h6">Info for {{ $route.params.type }} {{ index }}</div>
+          </q-card-section>
+          <q-card-section>
+            <div class="row">
+              <div class="col-12 q-mb-xs">
+                <q-input
+                  :error-message="submissionErrors.name"
+                  :error="hasSubmissionErrors.name"
+                  bottom-slots
+                  :disable="disabledInput"
+                  type="text" clearable v-model="name" :label="$t('form.name')"
+                  outlined/>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-12 q-mb-xs">
+                <q-input
+                  :error-message="submissionErrors.iban"
+                  :error="hasSubmissionErrors.iban"
+                  mask="AA## XXXX XXXX XXXX XXXX XXXX XXXX XXXX XX"
+                  bottom-slots :disable="disabledInput" type="text" clearable v-model="iban" :label="$t('form.iban')"
+                  outlined/>
+              </div>
+            </div>
+          </q-card-section>
+        </q-card>
+      </div>
+    </div>
+
+    <div class="row q-mx-md">
+      <div class="col-12">
+        <q-card class="q-mt-xs">
+          <q-card-section>
+            <div class="row">
+              <div class="col-12 text-right">
+                <q-btn :disable="disabledInput" color="primary" label="Submit" @click="submitAccount"/>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-12 text-right">
+                <q-checkbox :disable="disabledInput" v-model="doReturnHere" left-label label="Return here to create another one"/>
+                <br/>
+                <q-checkbox v-model="doResetForm" left-label :disable="!doReturnHere || disabledInput" label="Reset form after submission"/>
+              </div>
+            </div>
+          </q-card-section>
+        </q-card>
+      </div>
+    </div>
+
+  </q-page>
+</template>
+
+<script>
+import Post from "../../api/accounts/post";
+
+export default {
+  name: "Create",
+  data() {
+    return {
+      submissionErrors: {},
+      hasSubmissionErrors: {},
+      submitting: false,
+      doReturnHere: false,
+      doResetForm: false,
+      errorMessage: '',
+      type: '',
+      // account fields:
+      name: '',
+      iban: '',
+    }
+  },
+  computed: {
+    disabledInput: function () {
+      return this.submitting;
+    }
+  },
+  created() {
+    this.resetForm();
+    this.type = this.$route.params.type;
+  },
+  methods: {
+    resetForm: function () {
+      this.name = '';
+      this.iban = '';
+      this.resetErrors();
+
+    },
+    resetErrors: function () {
+      this.submissionErrors =
+        {
+          name: '',
+          iban: '',
+        };
+      this.hasSubmissionErrors = {
+        name: false,
+        iban: false,
+      };
+    },
+    submitAccount: function () {
+      this.submitting = true;
+      this.errorMessage = '';
+
+      // reset errors:
+      this.resetErrors();
+
+      // build account array
+      const submission = this.buildAccount();
+
+      let accounts = new Post();
+      accounts
+        .post(submission)
+        .catch(this.processErrors)
+        .then(this.processSuccess);
+    },
+    buildAccount: function () {
+      let act = {
+        name: this.name,
+        iban: this.iban,
+        type: this.type,
+      };
+      if ('asset' === this.type) {
+        act.account_role = 'defaultAsset';
+      }
+      return act;
+    },
+    dismissBanner: function () {
+      this.errorMessage = '';
+    },
+    processSuccess: function (response) {
+      if (!response) {
+        return;
+      }
+      this.submitting = false;
+      let message = {
+        level: 'success',
+        text: 'I am new account lol',
+        show: true,
+        action: {
+          show: true,
+          text: 'Go to account',
+          link: {name: 'accounts.show', params: {id: parseInt(response.data.data.id)}}
+        }
+      };
+      // store flash
+      this.$q.localStorage.set('flash', message);
+      if (this.doReturnHere) {
+        window.dispatchEvent(new CustomEvent('flash', {
+          detail: {
+            flash: this.$q.localStorage.getItem('flash')
+          }
+        }));
+      }
+      if (!this.doReturnHere) {
+        // return to previous page.
+        this.$router.go(-1);
+      }
+
+    },
+    processErrors: function (error) {
+      if (error.response) {
+        let errors = error.response.data; // => the response payload
+        this.errorMessage = errors.message;
+        console.log(errors);
+        for (let i in errors.errors) {
+          if (errors.errors.hasOwnProperty(i)) {
+            this.submissionErrors[i] = errors.errors[i][0];
+            this.hasSubmissionErrors[i] = true;
+          }
+        }
+      }
+      this.submitting = false;
+    },
+  }
+
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/frontend/src/pages/accounts/Edit.vue b/frontend/src/pages/accounts/Edit.vue
new file mode 100644
index 0000000000..2696856628
--- /dev/null
+++ b/frontend/src/pages/accounts/Edit.vue
@@ -0,0 +1,215 @@
+<!--
+  - Create.vue
+  - Copyright (c) 2022 james@firefly-iii.org
+  -
+  - This file is part of Firefly III (https://github.com/firefly-iii).
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program.  If not, see <https://www.gnu.org/licenses/>.
+  -->
+
+<template>
+  <q-page>
+    <div class="row q-mx-md">
+      <div class="col-12">
+        <q-banner inline-actions rounded class="bg-orange text-white" v-if="'' !== errorMessage">
+          {{ errorMessage }}
+          <template v-slot:action>
+            <q-btn flat @click="dismissBanner" label="Dismiss"/>
+          </template>
+        </q-banner>
+      </div>
+    </div>
+    <div class="row q-mx-md q-mt-md">
+      <div class="col-12">
+        <q-card bordered>
+          <q-card-section>
+            <div class="text-h6">Edit account</div>
+          </q-card-section>
+          <q-card-section>
+            <div class="row">
+              <div class="col-12 q-mb-xs">
+                <q-input
+                  :error-message="submissionErrors.name"
+                  :error="hasSubmissionErrors.name"
+                  bottom-slots :disable="disabledInput" type="text" clearable v-model="name" :label="$t('form.name')"
+                  outlined/>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-12 q-mb-xs">
+                <q-input
+                  :error-message="submissionErrors.iban"
+                  :error="hasSubmissionErrors.iban"
+                  mask="AA## XXXX XXXX XXXX XXXX XXXX XXXX XXXX XX"
+                  bottom-slots :disable="disabledInput" type="text" clearable v-model="iban" :label="$t('form.iban')"
+                  outlined/>
+              </div>
+            </div>
+          </q-card-section>
+        </q-card>
+      </div>
+    </div>
+
+    <div class="row q-mx-md">
+      <div class="col-12">
+        <q-card class="q-mt-xs">
+          <q-card-section>
+            <div class="row">
+              <div class="col-12 text-right">
+                <q-btn :disable="disabledInput" color="primary" label="Update" @click="submitAccount"/>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-12 text-right">
+                <q-checkbox :disable="disabledInput" v-model="doReturnHere" left-label label="Return here"/>
+              </div>
+            </div>
+          </q-card-section>
+        </q-card>
+      </div>
+    </div>
+
+  </q-page>
+</template>
+
+<script>
+import Get from '../../api/accounts/get';
+import Put from '../../api/accounts/put';
+
+export default {
+  name: "Edit",
+  data() {
+    return {
+      tab: 'split-0',
+      submissionErrors: {},
+      hasSubmissionErrors: {},
+      submitting: false,
+      doReturnHere: false,
+      doResetForm: false,
+      errorMessage: '',
+      type: '',
+      // account fields:
+      id: 0,
+      name: '',
+      iban: '',
+    }
+  },
+  computed: {
+    disabledInput: function () {
+      return this.submitting;
+    }
+  },
+  created() {
+    this.id = parseInt(this.$route.params.id);
+    this.collectAccount();
+  },
+  methods: {
+    collectAccount: function() {
+      let get = new Get;
+      get.get(this.id).then((response) => this.parseAccount(response));
+    },
+    parseAccount: function(response) {
+      this.name = response.data.data.attributes.name;
+      this.iban = response.data.data.attributes.iban;
+    },
+    resetErrors: function () {
+      this.submissionErrors =
+        {
+          name: '',
+          iban: '',
+        };
+      this.hasSubmissionErrors = {
+        name: false,
+        iban: false,
+      };
+    },
+    submitAccount: function () {
+      this.submitting = true;
+      this.errorMessage = '';
+
+      // reset errors:
+      this.resetErrors();
+
+      // build account array
+      const submission = this.buildAccount();
+
+      let accounts = new Put();
+      accounts
+        .post(this.id, submission)
+        .catch(this.processErrors)
+        .then(this.processSuccess);
+    },
+    buildAccount: function () {
+      let act = {
+        name: this.name,
+        iban: this.iban,
+      };
+      return act;
+    },
+    dismissBanner: function () {
+      this.errorMessage = '';
+    },
+    processSuccess: function (response) {
+      this.$store.dispatch('fireflyiii/refreshCacheKey');
+      if (!response) {
+        return;
+      }
+      this.submitting = false;
+      let message = {
+        level: 'success',
+        text: 'TODO I am updated lol',
+        show: true,
+        action: {
+          show: true,
+          text: 'Go to account',
+          link: {name: 'accounts.show', params: {id: parseInt(response.data.data.id)}}
+        }
+      };
+      // store flash
+      this.$q.localStorage.set('flash', message);
+      if (this.doReturnHere) {
+        window.dispatchEvent(new CustomEvent('flash', {
+          detail: {
+            flash: this.$q.localStorage.getItem('flash')
+          }
+        }));
+      }
+      if (!this.doReturnHere) {
+        // return to previous page.
+        this.$router.go(-1);
+      }
+
+    },
+    processErrors: function (error) {
+      if (error.response) {
+        let errors = error.response.data; // => the response payload
+        this.errorMessage = errors.message;
+        console.log(errors);
+        for (let i in errors.errors) {
+          if (errors.errors.hasOwnProperty(i)) {
+            this.submissionErrors[i] = errors.errors[i][0];
+            this.hasSubmissionErrors[i] = true;
+          }
+        }
+      }
+      this.submitting = false;
+    },
+  }
+
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/frontend/src/pages/accounts/Index.vue b/frontend/src/pages/accounts/Index.vue
new file mode 100644
index 0000000000..6e91c86a10
--- /dev/null
+++ b/frontend/src/pages/accounts/Index.vue
@@ -0,0 +1,206 @@
+<template>
+  <q-page>
+    <q-table
+      :title="$t('firefly.' + this.type + '_accounts')"
+      :rows="rows"
+      :columns="columns"
+      row-key="id"
+      @request="onRequest"
+      v-model:pagination="pagination"
+      :loading="loading"
+      class="q-ma-md"
+    >
+      <template v-slot:header="props">
+        <q-tr :props="props">
+          <q-th
+            v-for="col in props.cols"
+            :key="col.name"
+            :props="props"
+          >
+            {{ col.label }}
+          </q-th>
+        </q-tr>
+      </template>
+      <template v-slot:body="props">
+        <q-tr :props="props">
+          <q-td key="name" :props="props">
+            <router-link :to="{ name: 'accounts.show', params: {id: props.row.id} }" class="text-primary">
+              {{ props.row.name }}
+            </router-link>
+          </q-td>
+          <q-td key="iban" :props="props">
+            {{ formatIban(props.row.iban) }}
+          </q-td>
+          <q-td key="menu" :props="props">
+            <q-btn-dropdown color="primary" label="Actions" size="sm">
+              <q-list>
+                <q-item clickable v-close-popup :to="{name: 'accounts.edit', params: {id: props.row.id}}">
+                  <q-item-section>
+                    <q-item-label>Edit</q-item-label>
+                  </q-item-section>
+                </q-item>
+                <q-item clickable v-close-popup :to="{name: 'accounts.reconcile', params: {id: props.row.id}}" v-if="'asset' === props.row.type">
+                  <q-item-section>
+                    <q-item-label>Reconcile</q-item-label>
+                  </q-item-section>
+                </q-item>
+                <q-item clickable v-close-popup @click="deleteAccount(props.row.id, props.row.name)">
+                  <q-item-section>
+                    <q-item-label>Delete</q-item-label>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-btn-dropdown>
+          </q-td>
+        </q-tr>
+      </template>
+    </q-table>
+    <q-page-sticky position="bottom-right" :offset="[18, 18]">
+      <q-fab
+        label="Actions"
+        square
+        vertical-actions-align="right"
+        label-position="left"
+        color="green"
+        icon="fas fa-chevron-up"
+        direction="up"
+      >
+        <!--<q-fab-action color="primary" square :to="{ name: 'accounts.create', params: {type: 'liability'} }" icon="fas fa-long-arrow-alt-right" label="New liability"/>-->
+        <q-fab-action color="primary" square :to="{ name: 'accounts.create', params: {type: 'asset'} }" icon="fas fa-exchange-alt" label="New asset account"/>
+      </q-fab>
+    </q-page-sticky>
+  </q-page>
+</template>
+
+<script>
+import {mapGetters, useStore} from "vuex";
+import List from "../../api/accounts/list";
+import Destroy from "../../api/accounts/destroy";
+
+export default {
+  name: 'Index',
+  watch: {
+    $route(to) {
+      // react to route changes...
+      if ('accounts.index' === to.name) {
+        this.type = to.params.type;
+        this.page = 1;
+        this.updateBreadcrumbs();
+        this.triggerUpdate();
+      }
+    }
+  },
+  data() {
+    return {
+      rows: [],
+      type: 'asset',
+      pagination: {
+        sortBy: 'desc',
+        descending: false,
+        page: 1,
+        rowsPerPage: 5,
+        rowsNumber: 100
+      },
+      loading: false,
+      columns: [
+        {name: 'name', label: 'Name', field: 'name', align: 'left'},
+        {name: 'iban', label: 'IBAN', field: 'iban', align: 'left'},
+        {name: 'menu', label: ' ', field: 'menu', align: 'right'},
+      ],
+    }
+  },
+  computed: {
+    ...mapGetters('fireflyiii', ['getRange', 'getCacheKey', 'getListPageSize']),
+  },
+  created() {
+    this.pagination.rowsPerPage = this.getListPageSize;
+  },
+  mounted() {
+    this.type = this.$route.params.type;
+    if (null === this.getRange.start || null === this.getRange.end) {
+      // subscribe, then update:
+      const $store = useStore();
+      $store.subscribe((mutation, state) => {
+        if ('fireflyiii/setRange' === mutation.type) {
+          this.range = {start: mutation.payload.start, end: mutation.payload.end};
+          this.triggerUpdate();
+        }
+      });
+    }
+    if (null !== this.getRange.start && null !== this.getRange.end) {
+      this.range = {start: this.getRange.start, end: this.getRange.end};
+      this.triggerUpdate();
+    }
+  },
+  methods: {
+    deleteAccount: function (id, name) {
+      this.$q.dialog({
+                       title: 'Confirm',
+                       message: 'Do you want to delete account "' + name + '"? Any and all transactions linked to this account will ALSO be deleted.',
+                       cancel: true,
+                       persistent: true
+                     }).onOk(() => {
+        this.destroyAccount(id);
+      });
+    },
+    destroyAccount: function (id) {
+      let destr = new Destroy;
+      destr.destroy(id).then(() => {
+        this.$store.dispatch('fireflyiii/refreshCacheKey');
+        this.triggerUpdate();
+      });
+    },
+    updateBreadcrumbs: function () {
+      this.$route.meta.pageTitle = 'firefly.' + this.type + '_accounts';
+      this.$route.meta.breadcrumbs = [{title: this.type + '_accounts'}];
+
+    },
+    onRequest: function (props) {
+      this.page = props.pagination.page;
+      this.triggerUpdate();
+    },
+    formatIban: function (string) {
+      if (null === string) {
+        return '';
+      }
+      // https://github.com/arhs/iban.js/blob/master/iban.js
+      let NON_ALPHANUM = /[^a-zA-Z0-9]/g,
+        EVERY_FOUR_CHARS = /(.{4})(?!$)/g;
+      return string.replace(NON_ALPHANUM, '').toUpperCase().replace(EVERY_FOUR_CHARS, "$1 ");
+    },
+    triggerUpdate: function () {
+      if (this.loading) {
+        return;
+      }
+      if (null === this.range.start || null === this.range.end) {
+        return;
+      }
+      this.loading = true;
+      const list = new List();
+      this.rows = [];
+      list.list(this.type, this.page, this.getCacheKey).then(
+        (response) => {
+          this.pagination.rowsPerPage = response.data.meta.pagination.per_page;
+          this.pagination.rowsNumber = response.data.meta.pagination.total;
+          this.pagination.page = this.page;
+
+          for (let i in response.data.data) {
+            if (response.data.data.hasOwnProperty(i)) {
+              let current = response.data.data[i];
+              let account = {
+                id: current.id,
+                name: current.attributes.name,
+                iban: current.attributes.iban,
+                type: current.attributes.type,
+              };
+              this.rows.push(account);
+            }
+          }
+          this.loading = false;
+        }
+      )
+      ;
+    }
+  }
+}
+</script>
diff --git a/frontend/src/pages/accounts/Reconcile.vue b/frontend/src/pages/accounts/Reconcile.vue
new file mode 100644
index 0000000000..f529471b41
--- /dev/null
+++ b/frontend/src/pages/accounts/Reconcile.vue
@@ -0,0 +1,228 @@
+<template>
+  <q-page>
+    <div class="row q-mx-md" v-if="!canReconcile">
+      <div class="col-12">
+        <q-card bordered>
+          <q-card-section>
+            This account cannot be reconciled :(
+          </q-card-section>
+        </q-card>
+      </div>
+    </div>
+    <div class="row q-mx-md">
+      <div class="col-9 q-pr-xs">
+        <q-card bordered>
+          <q-card-section>
+            <div class="text-h6">Reconcilliation range</div>
+          </q-card-section>
+          <q-card-section>
+            <div class="row">
+              <div class="col-3 q-pr-xs">
+                <q-input outlined v-model="startDate" hint="Start date" type="date" dense>
+                  <template v-slot:prepend>
+                    <q-icon name="far fa-calendar"/>
+                  </template>
+                </q-input>
+              </div>
+              <div class="col-3 q-px-xs">
+                <q-input outlined v-model="startBalance" hint="Start balance" step="0.00" type="number" dense>
+                  <template v-slot:prepend>
+                    <q-icon name="fas fa-coins"/>
+                  </template>
+                </q-input>
+              </div>
+              <div class="col-3">
+                <q-input outlined v-model="endDate" hint="End date" type="date" dense>
+                  <template v-slot:prepend>
+                    <q-icon name="far fa-calendar"/>
+                  </template>
+                </q-input>
+              </div>
+              <div class="col-3 q-px-xs">
+                <q-input outlined v-model="endBalance" hint="End Balance" step="0.00" type="number" dense>
+                  <template v-slot:prepend>
+                    <q-icon name="fas fa-coins"/>
+                  </template>
+                </q-input>
+              </div>
+            </div>
+          </q-card-section>
+          <q-card-section>
+            <div class="row">
+              <div class="col-9 q-px-xs">
+                Match the amounts and dates above to your bank statement, and press "Start reconciling"
+              </div>
+              <div class="col-3 q-px-xs">
+                <q-btn @click="initReconciliation">Start reconciling</q-btn>
+              </div>
+            </div>
+          </q-card-section>
+
+        </q-card>
+      </div>
+      <div class="col-3 q-pl-xs">
+        <q-card bordered>
+          <q-card-section>
+            <div class="text-h6">Options</div>
+          </q-card-section>
+          <q-card-section>
+            EUR {{ balanceDiff }}
+          </q-card-section>
+          <q-card-actions>
+            Actions
+          </q-card-actions>
+        </q-card>
+      </div>
+    </div>
+    <div class="row q-ma-md">
+      <div class="col">
+        <q-card bordered>
+          <q-card-section>
+            <div class="text-h6">
+              First verify the date-range and balances. Then press "Start reconciling"
+            </div>
+          </q-card-section>
+        </q-card>
+        <p>&nbsp;</p>
+        <p>&nbsp;</p>
+        <p>&nbsp;</p>
+        <p>&nbsp;</p>
+        <p>&nbsp;</p>
+        <p>&nbsp;</p>
+        <p>&nbsp;</p>
+        <p>&nbsp;</p>
+        <p>&nbsp;</p>
+        <p>&nbsp;</p>
+        <p>&nbsp;</p>
+        <p>&nbsp;</p>
+        <p>&nbsp;</p>
+        <p>&nbsp;</p>
+        <p>&nbsp;</p>
+        <p>&nbsp;</p>
+        <p>&nbsp;</p>
+        <p>&nbsp;</p>
+        <p>&nbsp;</p>
+        <p>&nbsp;</p>
+        <p>&nbsp;</p>
+        <p>&nbsp;</p>
+        <p>&nbsp;</p>
+        <p>&nbsp;</p>
+        <p>&nbsp;</p>
+        <p>&nbsp;</p>
+        <p>&nbsp;</p>
+        <p>&nbsp;</p>
+        <p>&nbsp;</p>
+        <p>&nbsp;</p>
+        <p>&nbsp;</p>
+        <p>&nbsp;</p>
+        <p>&nbsp;</p>
+        <p>&nbsp;</p>
+        <p>&nbsp;</p>
+        <p>&nbsp;</p>
+        <p>&nbsp;</p>
+        <p>&nbsp;</p>
+        <p>&nbsp;</p>
+        <p>&nbsp;</p>
+        <p>&nbsp;</p>
+        <p>&nbsp;</p>
+        <p>&nbsp;</p>
+        <p>&nbsp;</p>
+        <p>&nbsp;</p>
+        <p>&nbsp;</p>
+        <p>&nbsp;</p>
+        <p>&nbsp;</p>
+        <p>&nbsp;</p>
+        <p>&nbsp;</p>
+        <p>&nbsp;</p>
+        <p>&nbsp;</p>
+        <p>&nbsp;</p>
+        <p>&nbsp;</p>
+        <p>&nbsp;</p>
+        <p>&nbsp;</p>
+        <p>&nbsp;</p>
+        <p>&nbsp;</p>
+        <p>&nbsp;</p>
+        <p>&nbsp;</p>
+        <p>&nbsp;</p>
+        <p>&nbsp;</p>
+        <p>&nbsp;</p>
+        <p>&nbsp;</p>
+
+      </div>
+    </div>
+    <q-page-scroller position="bottom-right" :offset="[16,16]" scroll-offset="120" v-if="canReconcile">
+      <div class="bg-primary text-white q-px-xl q-pa-md rounded-borders">EUR {{ balanceDiff }}</div>
+    </q-page-scroller>
+  </q-page>
+</template>
+
+<script>
+
+import startOfMonth from "date-fns/startOfMonth";
+import endOfMonth from "date-fns/endOfMonth";
+import subDays from 'date-fns/subDays';
+import format from "date-fns/format";
+import Get from "../../api/accounts/get";
+
+export default {
+  name: "Reconcile",
+  data() {
+    return {
+      startDate: '',
+      startBalance: '0',
+      endDate: '',
+      endBalance: '0',
+      id: 0,
+      canReconcile: true
+    }
+  },
+  computed: {
+    balanceDiff: function () {
+      return parseFloat(this.startBalance) - parseFloat(this.endBalance);
+    }
+  },
+  created() {
+    this.id = parseInt(this.$route.params.id);
+  },
+  mounted() {
+    this.setDates();
+    this.collectBalances();
+  },
+  methods: {
+    initReconciliation: function() {
+      this.$q.dialog({
+        title: 'Todo',
+        message: 'This function does not work yet.',
+        cancel: false,
+        persistent: true
+      });
+    },
+    setDates: function () {
+      let today = new Date;
+      // TODO depends on view range.
+      let start = subDays(startOfMonth(today), 1);
+      let end = endOfMonth(today);
+      this.startDate = format(start, 'yyyy-MM-dd');
+      this.endDate = format(end, 'yyyy-MM-dd');
+    },
+    collectBalances: function () {
+      let getter = new Get;
+      getter.get(this.id, this.startDate).then((response) => {
+        if ('asset' !== response.data.data.attributes.type) {
+          this.canReconcile = false;
+        }
+        this.startBalance = response.data.data.attributes.current_balance;
+      });
+
+      getter.get(this.id, this.endDate).then((response) => {
+        this.endBalance = response.data.data.attributes.current_balance;
+      });
+
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/frontend/src/pages/accounts/Show.vue b/frontend/src/pages/accounts/Show.vue
new file mode 100644
index 0000000000..930419d5b3
--- /dev/null
+++ b/frontend/src/pages/accounts/Show.vue
@@ -0,0 +1,121 @@
+<!--
+  - Show.vue
+  - Copyright (c) 2022 james@firefly-iii.org
+  -
+  - This file is part of Firefly III (https://github.com/firefly-iii).
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program.  If not, see <https://www.gnu.org/licenses/>.
+  -->
+
+<template>
+  <q-page>
+    <div class="row q-mx-md">
+      <div class="col-12">
+        <!-- Balance chart -->
+        <q-card bordered>
+          <q-card-section>
+            <div class="text-h6">{{ account.name }}</div>
+          </q-card-section>
+          <q-card-section>
+            <div class="row">
+              <div class="col-12 q-mb-xs">
+                Name: {{ account.name }}<br>
+                IBAN: {{ account.iban }}<br>
+              </div>
+            </div>
+          </q-card-section>
+        </q-card>
+      </div>
+    </div>
+
+    <div class="row q-mt-sm">
+      <div class="col-12">
+        <LargeTable ref="table"
+                    title="Transactions"
+                    :rows="rows"
+                    :loading="loading"
+                    v-on:on-request="onRequest"
+                    :rows-number="rowsNumber"
+                    :rows-per-page="rowsPerPage"
+                    :page="page"
+        >
+        </LargeTable>
+      </div>
+    </div>
+
+
+  </q-page>
+</template>
+
+<script>
+import Get from "../../api/accounts/get";
+import LargeTable from "../../components/transactions/LargeTable";
+import Parser from "../../api/transactions/parser";
+
+export default {
+  name: "Show",
+  data() {
+    return {
+      account: {},
+      rows: [],
+      rowsNumber: 1,
+      rowsPerPage: 10,
+      page: 1
+    }
+  },
+  created() {
+    this.id = parseInt(this.$route.params.id);
+    this.getAccount();
+  },
+  mounted() {
+    //this.getAccount();
+  },
+  components: {LargeTable},
+  methods: {
+    onRequest: function (payload) {
+      this.page = payload.page;
+      this.getAccount();
+    },
+    getAccount: function () {
+      let get = new Get;
+      get.get(this.id).then((response) => this.parseAccount(response));
+
+      this.loading = true;
+      const parser = new Parser;
+      this.rows = [];
+
+      get.transactions(this.id, this.page, this.getCacheKey).then(
+        (response) => {
+          let resp = parser.parseResponse(response);
+
+          this.rowsPerPage = resp.rowsPerPage;
+          this.rowsNumber = resp.rowsNumber;
+          this.rows = resp.rows;
+          this.loading = false;
+        }
+      );
+    },
+    parseAccount: function (response) {
+      this.account = {
+        name: response.data.data.attributes.name,
+        iban: response.data.data.attributes.iban
+      };
+    },
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/frontend/src/pages/admin/Index.vue b/frontend/src/pages/admin/Index.vue
new file mode 100644
index 0000000000..8253c9a11e
--- /dev/null
+++ b/frontend/src/pages/admin/Index.vue
@@ -0,0 +1,191 @@
+<template>
+  <q-page>
+    <div class="row">
+      <div class="col-6">
+        <q-card bordered class="q-mx-sm">
+          <q-card-section>
+            <div class="text-h6">Firefly III administration</div>
+          </q-card-section>
+          <q-card-section>
+            <div class="row">
+              <div class="col-12">
+                <!-- TODO cloned from Preferences -->
+                configuration.permission_update_check
+              </div>
+            </div>
+          </q-card-section>
+        </q-card>
+      </div>
+      <div class="col-6">
+        <q-card bordered class="q-mx-sm">
+          <q-card-section>
+            <div class="text-h6">Firefly III information</div>
+          </q-card-section>
+          <q-card-section>
+            <div class="row">
+              <div class="col-12">
+                Firefly III: {{ version }}<br>
+                API: {{ api }}<br>
+                OS: {{ os }}
+              </div>
+            </div>
+          </q-card-section>
+        </q-card>
+      </div>
+    </div>
+
+    <div class="row q-mx-md">
+      <div class="col-xl-4 col-lg-6 col-md-12 q-pa-xs">
+        <q-card bordered>
+          <q-card-section>
+            <div class="text-h6">Is demo site?
+              <span class="text-secondary" v-if="true === isOk.is_demo_site"><span
+                class="far fa-check-circle"></span></span>
+              <span class="text-blue" v-if="true === isLoading.is_demo_site"><span
+                class="fas fa-spinner fa-spin"></span></span>
+              <span class="text-red" v-if="true === isFailure.is_demo_site"><span
+                class="fas fa-skull-crossbones"></span> <small>Please refresh the page...</small></span>
+            </div>
+          </q-card-section>
+          <q-card-section>
+            <q-checkbox v-model="isDemoSite" label="Is Demo Site?"/>
+          </q-card-section>
+        </q-card>
+      </div>
+
+      <div class="col-xl-4 col-lg-6 col-md-12 q-pa-xs">
+        <q-card bordered>
+          <q-card-section>
+            <div class="text-h6">Single user mode?
+              <span class="text-secondary" v-if="true === isOk.single_user_mode"><span
+                class="far fa-check-circle"></span></span>
+              <span class="text-blue" v-if="true === isLoading.single_user_mode"><span
+                class="fas fa-spinner fa-spin"></span></span>
+              <span class="text-red" v-if="true === isFailure.single_user_mode"><span
+                class="fas fa-skull-crossbones"></span> <small>Please refresh the page...</small></span>
+            </div>
+          </q-card-section>
+          <q-card-section>
+            <q-checkbox v-model="singleUserMode" label="Single user mode?"/>
+          </q-card-section>
+        </q-card>
+      </div>
+
+      <div class="col-xl-4 col-lg-6 col-md-12 q-pa-xs">
+        <q-card bordered>
+          <q-card-section>
+            <div class="text-h6">Check for updates?
+              <span class="text-secondary" v-if="true === isOk.update_check"><span
+                class="far fa-check-circle"></span></span>
+              <span class="text-blue" v-if="true === isLoading.update_check"><span
+                class="fas fa-spinner fa-spin"></span></span>
+              <span class="text-red" v-if="true === isFailure.update_check"><span
+                class="fas fa-skull-crossbones"></span> <small>Please refresh the page...</small></span>
+            </div>
+          </q-card-section>
+          <q-card-section>
+            <q-select
+              bottom-slots
+              outlined
+              v-model="permissionUpdateCheck" emit-value
+              map-options :options="permissions" label="Check for updates"/>
+          </q-card-section>
+        </q-card>
+      </div>
+    </div>
+
+  </q-page>
+</template>
+
+<script>
+import About from "../../api/system/about";
+import Configuration from "../../api/system/configuration";
+
+export default {
+  name: 'Index',
+  created() {
+    this.getInfo();
+  },
+  mounted() {
+    this.isOk = {
+      is_demo_site: true,
+      single_user_mode: true,
+      update_check: true,
+    };
+    this.isLoading = {
+      is_demo_site: false,
+      single_user_mode: false,
+      update_check: false,
+    };
+    this.isFailure = {
+      is_demo_site: false,
+      single_user_mode: false,
+      update_check: false,
+    };
+  },
+  watch: {
+    // todo these methods PUT on the first load, but shouldn't.
+    isDemoSite: function (newValue, oldValue) {
+      if (oldValue !== newValue) {
+        let value = newValue;
+        (new Configuration()).put('configuration.is_demo_site', {value});
+      }
+    },
+    singleUserMode: function (newValue, oldValue) {
+      if (oldValue !== newValue) {
+        let value = newValue;
+        (new Configuration()).put('configuration.single_user_mode', {value});
+      }
+    },
+    permissionUpdateCheck: function (newValue, oldValue) {
+      if (oldValue !== newValue) {
+        let value = newValue;
+        (new Configuration()).put('configuration.permission_update_check', {value});
+      }
+    }
+  },
+  data() {
+    return {
+      version: '',
+      api: '',
+      os: '',
+
+      // settings
+      isDemoSite: false,
+      singleUserMode: true,
+      permissionUpdateCheck: -1,
+
+      // options
+      permissions: [
+        {value: -1, label: 'Ask me later'},
+        {value: 0, label: 'Lol no'},
+        {value: 1, label: 'Yes plz'},
+      ],
+
+      // info for live update:
+      isOk: {},
+      isLoading: {},
+      isFailure: {},
+    }
+  },
+  methods: {
+    getInfo: function () {
+      (new About).list().then((response) => {
+        this.version = response.data.data.version;
+        this.api = response.data.data.api_version;
+        this.os = response.data.data.os + ' with php ' + response.data.data.php_version;
+      });
+      (new Configuration).get('configuration.is_demo_site').then((response) => {
+        this.isDemoSite = response.data.data.value;
+      });
+      (new Configuration).get('configuration.single_user_mode').then((response) => {
+        this.singleUserMode = response.data.data.value;
+      });
+      (new Configuration).get('configuration.permission_update_check').then((response) => {
+        this.permissionUpdateCheck = response.data.data.value;
+      });
+
+    }
+  },
+}
+</script>
diff --git a/frontend/src/pages/budgets/Create.vue b/frontend/src/pages/budgets/Create.vue
new file mode 100644
index 0000000000..3425a90747
--- /dev/null
+++ b/frontend/src/pages/budgets/Create.vue
@@ -0,0 +1,170 @@
+<template>
+  <q-page>
+    <div class="row q-mx-md">
+      <div class="col-12">
+        <q-banner inline-actions rounded class="bg-orange text-white" v-if="'' !== errorMessage">
+          {{ errorMessage }}
+          <template v-slot:action>
+            <q-btn flat @click="dismissBanner" label="Dismiss"/>
+          </template>
+        </q-banner>
+      </div>
+    </div>
+    <div class="row q-mx-md q-mt-md">
+      <div class="col-12">
+        <q-card bordered>
+          <q-card-section>
+            <div class="text-h6">Info for new budget</div>
+          </q-card-section>
+          <q-card-section>
+            <div class="row">
+              <div class="col-12 q-mb-xs">
+                <q-input
+                  :error-message="submissionErrors.name"
+                  :error="hasSubmissionErrors.name"
+                  bottom-slots :disable="disabledInput" type="text" clearable v-model="name" :label="$t('form.name')"
+                  outlined/>
+              </div>
+            </div>
+          </q-card-section>
+        </q-card>
+      </div>
+    </div>
+
+    <div class="row q-mx-md">
+      <div class="col-12">
+        <q-card class="q-mt-xs">
+          <q-card-section>
+            <div class="row">
+              <div class="col-12 text-right">
+                <q-btn :disable="disabledInput" color="primary" label="Submit" @click="submitBudget"/>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-12 text-right">
+                <q-checkbox :disable="disabledInput" v-model="doReturnHere" left-label label="Return here to create another one"/>
+                <br/>
+                <q-checkbox v-model="doResetForm" left-label :disable="!doReturnHere || disabledInput" label="Reset form after submission"/>
+              </div>
+            </div>
+          </q-card-section>
+        </q-card>
+      </div>
+    </div>
+
+  </q-page>
+</template>
+
+<script>
+import Post from "../../api/budgets/post";
+
+export default {
+  name: 'Create',
+  data() {
+    return {
+      submissionErrors: {},
+      hasSubmissionErrors: {},
+      submitting: false,
+      doReturnHere: false,
+      doResetForm: false,
+      errorMessage: '',
+      type: '',
+      // budget fields:
+      name: '',
+    }
+  },
+  computed: {
+    disabledInput: function () {
+      return this.submitting;
+    }
+  },
+  created() {
+    this.resetForm();
+    this.type = this.$route.params.type;
+  },
+  methods: {
+    resetForm: function () {
+      this.name = '';
+      this.resetErrors();
+
+    },
+    resetErrors: function () {
+      this.submissionErrors =
+        {
+          name: '',
+        };
+      this.hasSubmissionErrors = {
+        name: false,
+      };
+    },
+    submitBudget: function () {
+      this.submitting = true;
+      this.errorMessage = '';
+
+      // reset errors:
+      this.resetErrors();
+
+      // build budget array
+      const submission = this.buildBudget();
+
+      let budgets = new Post();
+      budgets
+        .post(submission)
+        .catch(this.processErrors)
+        .then(this.processSuccess);
+    },
+    buildBudget: function () {
+      return {
+        name: this.name,
+      };
+    },
+    dismissBanner: function () {
+      this.errorMessage = '';
+    },
+    processSuccess: function (response) {
+      if (!response) {
+        return;
+      }
+      this.submitting = false;
+      let message = {
+        level: 'success',
+        text: 'I am new budget',
+        show: true,
+        action: {
+          show: true,
+          text: 'Go to budget',
+          link: {name: 'budgets.show', params: {id: parseInt(response.data.data.id)}}
+        }
+      };
+      // store flash
+      this.$q.localStorage.set('flash', message);
+      if (this.doReturnHere) {
+        window.dispatchEvent(new CustomEvent('flash', {
+          detail: {
+            flash: this.$q.localStorage.getItem('flash')
+          }
+        }));
+      }
+      if (!this.doReturnHere) {
+        // return to previous page.
+        this.$router.go(-1);
+      }
+
+    },
+    processErrors: function (error) {
+      if (error.response) {
+        let errors = error.response.data; // => the response payload
+        this.errorMessage = errors.message;
+        console.log(errors);
+        for (let i in errors.errors) {
+          if (errors.errors.hasOwnProperty(i)) {
+            this.submissionErrors[i] = errors.errors[i][0];
+            this.hasSubmissionErrors[i] = true;
+          }
+        }
+      }
+      this.submitting = false;
+    },
+  }
+}
+</script>
diff --git a/frontend/src/pages/budgets/Edit.vue b/frontend/src/pages/budgets/Edit.vue
new file mode 100644
index 0000000000..5bb710f0e4
--- /dev/null
+++ b/frontend/src/pages/budgets/Edit.vue
@@ -0,0 +1,177 @@
+<template>
+  <q-page>
+    <div class="row q-mx-md">
+      <div class="col-12">
+        <q-banner inline-actions rounded class="bg-orange text-white" v-if="'' !== errorMessage">
+          {{ errorMessage }}
+          <template v-slot:action>
+            <q-btn flat @click="dismissBanner" label="Dismiss"/>
+          </template>
+        </q-banner>
+      </div>
+    </div>
+    <div class="row q-mx-md q-mt-md">
+      <div class="col-12">
+        <q-card bordered>
+          <q-card-section>
+            <div class="text-h6">Edit budget</div>
+          </q-card-section>
+          <q-card-section>
+            <div class="row">
+              <div class="col-12 q-mb-xs">
+                <q-input
+                  :error-message="submissionErrors.name"
+                  :error="hasSubmissionErrors.name"
+                  bottom-slots :disable="disabledInput" type="text" clearable v-model="name" :label="$t('form.name')"
+                  outlined/>
+              </div>
+            </div>
+          </q-card-section>
+        </q-card>
+      </div>
+    </div>
+
+    <div class="row q-mx-md">
+      <div class="col-12">
+        <q-card class="q-mt-xs">
+          <q-card-section>
+            <div class="row">
+              <div class="col-12 text-right">
+                <q-btn :disable="disabledInput" color="primary" label="Update" @click="submitBudget"/>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-12 text-right">
+                <q-checkbox :disable="disabledInput" v-model="doReturnHere" left-label label="Return here"/>
+              </div>
+            </div>
+          </q-card-section>
+        </q-card>
+      </div>
+    </div>
+
+  </q-page>
+</template>
+
+<script>
+import Get from "../../api/budgets/get";
+import Put from "../../api/budgets/put";
+
+export default {
+  name: "Edit",
+  data() {
+    return {
+      submissionErrors: {},
+      hasSubmissionErrors: {},
+      submitting: false,
+      doReturnHere: false,
+      doResetForm: false,
+      errorMessage: '',
+      type: '',
+      // budget fields:
+      id: 0,
+      name: '',
+    }
+  },
+  computed: {
+    disabledInput: function () {
+      return this.submitting;
+    }
+  },
+  created() {
+    this.id = parseInt(this.$route.params.id);
+    this.collectBudget();
+  },
+  methods: {
+    collectBudget: function() {
+      let get = new Get;
+      get.get(this.id).then((response) => this.parseBudget(response));
+    },
+    parseBudget: function(response) {
+      this.name = response.data.data.attributes.name;
+    },
+    resetErrors: function () {
+      this.submissionErrors =
+        {
+          name: '',
+        };
+      this.hasSubmissionErrors = {
+        name: false,
+      };
+    },
+    submitBudget: function () {
+      this.submitting = true;
+      this.errorMessage = '';
+
+      // reset errors:
+      this.resetErrors();
+
+      // build account array
+      const submission = this.buildBudget();
+
+      let budgets = new Put();
+      budgets
+        .post(this.id, submission)
+        .catch(this.processErrors)
+        .then(this.processSuccess);
+    },
+    buildBudget: function () {
+      return {
+        name: this.name,
+      };
+    },
+    dismissBanner: function () {
+      this.errorMessage = '';
+    },
+    processSuccess: function (response) {
+      this.$store.dispatch('fireflyiii/refreshCacheKey');
+      if (!response) {
+        return;
+      }
+      this.submitting = false;
+      let message = {
+        level: 'success',
+        text: 'Budget is updated',
+        show: true,
+        action: {
+          show: true,
+          text: 'Go to budget',
+          link: {name: 'budgets.show', params: {id: parseInt(response.data.data.id)}}
+        }
+      };
+      // store flash
+      this.$q.localStorage.set('flash', message);
+      if (this.doReturnHere) {
+        window.dispatchEvent(new CustomEvent('flash', {
+          detail: {
+            flash: this.$q.localStorage.getItem('flash')
+          }
+        }));
+      }
+      if (!this.doReturnHere) {
+        // return to previous page.
+        this.$router.go(-1);
+      }
+
+    },
+    processErrors: function (error) {
+      if (error.response) {
+        let errors = error.response.data; // => the response payload
+        this.errorMessage = errors.message;
+        console.log(errors);
+        for (let i in errors.errors) {
+          if (errors.errors.hasOwnProperty(i)) {
+            this.submissionErrors[i] = errors.errors[i][0];
+            this.hasSubmissionErrors[i] = true;
+          }
+        }
+      }
+      this.submitting = false;
+    },
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/frontend/src/pages/budgets/Index.vue b/frontend/src/pages/budgets/Index.vue
new file mode 100644
index 0000000000..874c2d7f99
--- /dev/null
+++ b/frontend/src/pages/budgets/Index.vue
@@ -0,0 +1,186 @@
+<template>
+  <q-page>
+    <q-table
+      :title="$t('firefly.budgets')"
+      :rows="rows"
+      :columns="columns"
+      row-key="id"
+      @request="onRequest"
+      v-model:pagination="pagination"
+      :loading="loading"
+      class="q-ma-md"
+    >
+      <template v-slot:header="props">
+        <q-tr :props="props">
+          <q-th
+            v-for="col in props.cols"
+            :key="col.name"
+            :props="props"
+          >
+            {{ col.label }}
+          </q-th>
+        </q-tr>
+      </template>
+      <template v-slot:body="props">
+        <q-tr :props="props">
+          <q-td key="name" :props="props">
+            <router-link :to="{ name: 'budgets.show', params: {id: props.row.id} }" class="text-primary">
+              {{ props.row.name }}
+            </router-link>
+          </q-td>
+          <q-td key="menu" :props="props">
+            <q-btn-dropdown color="primary" label="Actions" size="sm">
+              <q-list>
+                <q-item clickable v-close-popup :to="{name: 'budgets.edit', params: {id: props.row.id}}">
+                  <q-item-section>
+                    <q-item-label>Edit</q-item-label>
+                  </q-item-section>
+                </q-item>
+                <q-item clickable v-close-popup @click="deleteBudget(props.row.id, props.row.name)">
+                  <q-item-section>
+                    <q-item-label>Delete</q-item-label>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-btn-dropdown>
+          </q-td>
+        </q-tr>
+      </template>
+    </q-table>
+    <p>
+      <q-btn :to="{name: 'budgets.show', params: {id: 0}}">Transactions without a budget</q-btn>
+    </p>
+    <q-page-sticky position="bottom-right" :offset="[18, 18]">
+      <q-fab
+        label="Actions"
+        square
+        vertical-actions-align="right"
+        label-position="left"
+        color="green"
+        icon="fas fa-chevron-up"
+        direction="up"
+      >
+        <q-fab-action color="primary" square :to="{ name: 'budgets.create'}" icon="fas fa-exchange-alt" label="New budget"/>
+      </q-fab>
+    </q-page-sticky>
+  </q-page>
+</template>
+
+<script>
+import {mapGetters, useStore} from "vuex";
+import Destroy from "../../api/budgets/destroy";
+import List from "../../api/budgets/list";
+
+export default {
+  name: 'Index',
+  watch: {
+    $route(to) {
+      // react to route changes...
+      if ('budgets.index' === to.name) {
+        this.page = 1;
+        this.updateBreadcrumbs();
+        this.triggerUpdate();
+      }
+    }
+  },
+  data() {
+    return {
+      rows: [],
+      pagination: {
+        sortBy: 'desc',
+        descending: false,
+        page: 1,
+        rowsPerPage: 5,
+        rowsNumber: 100
+      },
+      loading: false,
+      columns: [
+        {name: 'name', label: 'Name', field: 'name', align: 'left'},
+        {name: 'menu', label: ' ', field: 'menu', align: 'right'},
+      ],
+    }
+  },
+  computed: {
+    ...mapGetters('fireflyiii', ['getRange', 'getCacheKey', 'getListPageSize']),
+  },
+  created() {
+    this.pagination.rowsPerPage = this.getListPageSize;
+  },
+  mounted() {
+    this.type = this.$route.params.type;
+    if (null === this.getRange.start || null === this.getRange.end) {
+      // subscribe, then update:
+      const $store = useStore();
+      $store.subscribe((mutation, state) => {
+        if ('fireflyiii/setRange' === mutation.type) {
+          this.range = {start: mutation.payload.start, end: mutation.payload.end};
+          this.triggerUpdate();
+        }
+      });
+    }
+    if (null !== this.getRange.start && null !== this.getRange.end) {
+      this.range = {start: this.getRange.start, end: this.getRange.end};
+      this.triggerUpdate();
+    }
+  },
+  methods: {
+    deleteBudget: function (id, name) {
+      this.$q.dialog({
+        title: 'Confirm',
+        message: 'Do you want to delete budget "' + name + '"? Any and all transactions linked to this budget will be spared.',
+        cancel: true,
+        persistent: true
+      }).onOk(() => {
+        this.destroyBudget(id);
+      });
+    },
+    destroyBudget: function (id) {
+      let destr = new Destroy;
+      destr.destroy(id).then(() => {
+        this.$store.dispatch('fireflyiii/refreshCacheKey');
+        this.triggerUpdate();
+      });
+    },
+    updateBreadcrumbs: function () {
+      this.$route.meta.pageTitle = 'firefly.budgets';
+      this.$route.meta.breadcrumbs = [{title: 'budgets'}];
+
+    },
+    onRequest: function (props) {
+      this.page = props.pagination.page;
+      this.triggerUpdate();
+    },
+    triggerUpdate: function () {
+      if (this.loading) {
+        return;
+      }
+      if (null === this.range.start || null === this.range.end) {
+        return;
+      }
+      this.loading = true;
+      const list = new List();
+      this.rows = [];
+      list.list(this.page, this.getCacheKey).then(
+        (response) => {
+          this.pagination.rowsPerPage = response.data.meta.pagination.per_page;
+          this.pagination.rowsNumber = response.data.meta.pagination.total;
+          this.pagination.page = this.page;
+
+          for (let i in response.data.data) {
+            if (response.data.data.hasOwnProperty(i)) {
+              let current = response.data.data[i];
+              let account = {
+                id: current.id,
+                name: current.attributes.name,
+              };
+              this.rows.push(account);
+            }
+          }
+          this.loading = false;
+        }
+      )
+      ;
+    }
+  }
+}
+</script>
diff --git a/frontend/src/pages/budgets/Show.vue b/frontend/src/pages/budgets/Show.vue
new file mode 100644
index 0000000000..95da169db3
--- /dev/null
+++ b/frontend/src/pages/budgets/Show.vue
@@ -0,0 +1,121 @@
+<template>
+  <q-page>
+    <div class="row q-mx-md">
+      <div class="col-12">
+        <!-- Balance chart -->
+        <q-card bordered>
+          <q-card-section>
+            <div class="text-h6">{{ budget.name }}</div>
+          </q-card-section>
+          <q-card-section>
+            <div class="row">
+              <div class="col-12 q-mb-xs">
+                Name: {{ budget.name }}<br>
+              </div>
+            </div>
+          </q-card-section>
+        </q-card>
+      </div>
+    </div>
+
+    <div class="row q-mt-sm">
+      <div class="col-12">
+        <LargeTable ref="table"
+                    title="Transactions"
+                    :rows="rows"
+                    :loading="loading"
+                    v-on:on-request="onRequest"
+                    :rows-number="rowsNumber"
+                    :rows-per-page="rowsPerPage"
+                    :page="page"
+        >
+        </LargeTable>
+      </div>
+    </div>
+
+
+  </q-page>
+</template>
+
+<script>
+import LargeTable from "../../components/transactions/LargeTable";
+import Get from "../../api/budgets/get";
+import Parser from "../../api/transactions/parser";
+
+export default {
+  name: "Show",
+  data() {
+    return {
+      budget: {},
+      rows: [],
+      rowsNumber: 1,
+      rowsPerPage: 10,
+      page: 1
+    }
+  },
+  created() {
+    if ('no-budget' === this.$route.params.id) {
+      this.id = 0;
+      this.getWithoutBudget();
+    }
+    if ('no-budget' !== this.$route.params.id) {
+      this.id = parseInt(this.$route.params.id);
+      this.getBudget();
+    }
+  },
+  components: {LargeTable},
+  methods: {
+    onRequest: function (payload) {
+      this.page = payload.page;
+      this.getBudget();
+    },
+    getWithoutBudget: function () {
+      this.budget = {name: '(without budget)'};
+
+      this.loading = true;
+      const parser = new Parser;
+      this.rows = [];
+      let get = new Get;
+      get.transactionsWithoutBudget(this.page, this.getCacheKey).then(
+        (response) => {
+          let resp = parser.parseResponse(response);
+
+          this.rowsPerPage = resp.rowsPerPage;
+          this.rowsNumber = resp.rowsNumber;
+          this.rows = resp.rows;
+          this.loading = false;
+        }
+      );
+
+    },
+    getBudget: function () {
+      let get = new Get;
+      get.get(this.id).then((response) => this.parseBudget(response));
+
+      this.loading = true;
+      const parser = new Parser;
+      this.rows = [];
+
+      get.transactions(this.id, this.page, this.getCacheKey).then(
+        (response) => {
+          let resp = parser.parseResponse(response);
+
+          this.rowsPerPage = resp.rowsPerPage;
+          this.rowsNumber = resp.rowsNumber;
+          this.rows = resp.rows;
+          this.loading = false;
+        }
+      );
+    },
+    parseBudget: function (response) {
+      this.budget = {
+        name: response.data.data.attributes.name,
+      };
+    },
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/frontend/src/pages/categories/Create.vue b/frontend/src/pages/categories/Create.vue
new file mode 100644
index 0000000000..d669ad76cd
--- /dev/null
+++ b/frontend/src/pages/categories/Create.vue
@@ -0,0 +1,170 @@
+<template>
+  <q-page>
+    <div class="row q-mx-md">
+      <div class="col-12">
+        <q-banner inline-actions rounded class="bg-orange text-white" v-if="'' !== errorMessage">
+          {{ errorMessage }}
+          <template v-slot:action>
+            <q-btn flat @click="dismissBanner" label="Dismiss"/>
+          </template>
+        </q-banner>
+      </div>
+    </div>
+    <div class="row q-mx-md q-mt-md">
+      <div class="col-12">
+        <q-card bordered>
+          <q-card-section>
+            <div class="text-h6">Info for new category</div>
+          </q-card-section>
+          <q-card-section>
+            <div class="row">
+              <div class="col-12 q-mb-xs">
+                <q-input
+                  :error-message="submissionErrors.name"
+                  :error="hasSubmissionErrors.name"
+                  bottom-slots :disable="disabledInput" type="text" clearable v-model="name" :label="$t('form.name')"
+                  outlined/>
+              </div>
+            </div>
+          </q-card-section>
+        </q-card>
+      </div>
+    </div>
+
+    <div class="row q-mx-md">
+      <div class="col-12">
+        <q-card class="q-mt-xs">
+          <q-card-section>
+            <div class="row">
+              <div class="col-12 text-right">
+                <q-btn :disable="disabledInput" color="primary" label="Submit" @click="submitCategory"/>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-12 text-right">
+                <q-checkbox :disable="disabledInput" v-model="doReturnHere" left-label label="Return here to create another one"/>
+                <br/>
+                <q-checkbox v-model="doResetForm" left-label :disable="!doReturnHere || disabledInput" label="Reset form after submission"/>
+              </div>
+            </div>
+          </q-card-section>
+        </q-card>
+      </div>
+    </div>
+
+  </q-page>
+</template>
+
+<script>
+import Post from "../../api/categories/post";
+
+export default {
+  name: 'Create',
+  data() {
+    return {
+      submissionErrors: {},
+      hasSubmissionErrors: {},
+      submitting: false,
+      doReturnHere: false,
+      doResetForm: false,
+      errorMessage: '',
+      type: '',
+      // category fields:
+      name: '',
+    }
+  },
+  computed: {
+    disabledInput: function () {
+      return this.submitting;
+    }
+  },
+  created() {
+    this.resetForm();
+    this.type = this.$route.params.type;
+  },
+  methods: {
+    resetForm: function () {
+      this.name = '';
+      this.resetErrors();
+
+    },
+    resetErrors: function () {
+      this.submissionErrors =
+        {
+          name: '',
+        };
+      this.hasSubmissionErrors = {
+        name: false,
+      };
+    },
+    submitCategory: function () {
+      this.submitting = true;
+      this.errorMessage = '';
+
+      // reset errors:
+      this.resetErrors();
+
+      // build category array
+      const submission = this.buildCategory();
+
+      let categories = new Post();
+      categories
+        .post(submission)
+        .catch(this.processErrors)
+        .then(this.processSuccess);
+    },
+    buildCategory: function () {
+      return {
+        name: this.name,
+      };
+    },
+    dismissBanner: function () {
+      this.errorMessage = '';
+    },
+    processSuccess: function (response) {
+      if (!response) {
+        return;
+      }
+      this.submitting = false;
+      let message = {
+        level: 'success',
+        text: 'I am new category',
+        show: true,
+        action: {
+          show: true,
+          text: 'Go to category',
+          link: {name: 'categories.show', params: {id: parseInt(response.data.data.id)}}
+        }
+      };
+      // store flash
+      this.$q.localStorage.set('flash', message);
+      if (this.doReturnHere) {
+        window.dispatchEvent(new CustomEvent('flash', {
+          detail: {
+            flash: this.$q.localStorage.getItem('flash')
+          }
+        }));
+      }
+      if (!this.doReturnHere) {
+        // return to previous page.
+        this.$router.go(-1);
+      }
+
+    },
+    processErrors: function (error) {
+      if (error.response) {
+        let errors = error.response.data; // => the response payload
+        this.errorMessage = errors.message;
+        console.log(errors);
+        for (let i in errors.errors) {
+          if (errors.errors.hasOwnProperty(i)) {
+            this.submissionErrors[i] = errors.errors[i][0];
+            this.hasSubmissionErrors[i] = true;
+          }
+        }
+      }
+      this.submitting = false;
+    },
+  }
+}
+</script>
diff --git a/frontend/src/pages/categories/Edit.vue b/frontend/src/pages/categories/Edit.vue
new file mode 100644
index 0000000000..8a118a4d6e
--- /dev/null
+++ b/frontend/src/pages/categories/Edit.vue
@@ -0,0 +1,177 @@
+<template>
+  <q-page>
+    <div class="row q-mx-md">
+      <div class="col-12">
+        <q-banner inline-actions rounded class="bg-orange text-white" v-if="'' !== errorMessage">
+          {{ errorMessage }}
+          <template v-slot:action>
+            <q-btn flat @click="dismissBanner" label="Dismiss"/>
+          </template>
+        </q-banner>
+      </div>
+    </div>
+    <div class="row q-mx-md q-mt-md">
+      <div class="col-12">
+        <q-card bordered>
+          <q-card-section>
+            <div class="text-h6">Edit category</div>
+          </q-card-section>
+          <q-card-section>
+            <div class="row">
+              <div class="col-12 q-mb-xs">
+                <q-input
+                  :error-message="submissionErrors.name"
+                  :error="hasSubmissionErrors.name"
+                  bottom-slots :disable="disabledInput" type="text" clearable v-model="name" :label="$t('form.name')"
+                  outlined/>
+              </div>
+            </div>
+          </q-card-section>
+        </q-card>
+      </div>
+    </div>
+
+    <div class="row q-mx-md">
+      <div class="col-12">
+        <q-card class="q-mt-xs">
+          <q-card-section>
+            <div class="row">
+              <div class="col-12 text-right">
+                <q-btn :disable="disabledInput" color="primary" label="Update" @click="submitCategory"/>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-12 text-right">
+                <q-checkbox :disable="disabledInput" v-model="doReturnHere" left-label label="Return here"/>
+              </div>
+            </div>
+          </q-card-section>
+        </q-card>
+      </div>
+    </div>
+
+  </q-page>
+</template>
+
+<script>
+import Get from "../../api/categories/get";
+import Put from "../../api/categories/put";
+
+export default {
+  name: "Edit",
+  data() {
+    return {
+      submissionErrors: {},
+      hasSubmissionErrors: {},
+      submitting: false,
+      doReturnHere: false,
+      doResetForm: false,
+      errorMessage: '',
+      type: '',
+      // category fields:
+      id: 0,
+      name: '',
+    }
+  },
+  computed: {
+    disabledInput: function () {
+      return this.submitting;
+    }
+  },
+  created() {
+    this.id = parseInt(this.$route.params.id);
+    this.collectCategory();
+  },
+  methods: {
+    collectCategory: function() {
+      let get = new Get;
+      get.get(this.id).then((response) => this.parseCategory(response));
+    },
+    parseCategory: function(response) {
+      this.name = response.data.data.attributes.name;
+    },
+    resetErrors: function () {
+      this.submissionErrors =
+        {
+          name: '',
+        };
+      this.hasSubmissionErrors = {
+        name: false,
+      };
+    },
+    submitCategory: function () {
+      this.submitting = true;
+      this.errorMessage = '';
+
+      // reset errors:
+      this.resetErrors();
+
+      // build account array
+      const submission = this.buildCategory();
+
+      let categories = new Put();
+      categories
+        .post(this.id, submission)
+        .catch(this.processErrors)
+        .then(this.processSuccess);
+    },
+    buildCategory: function () {
+      return {
+        name: this.name,
+      };
+    },
+    dismissBanner: function () {
+      this.errorMessage = '';
+    },
+    processSuccess: function (response) {
+      this.$store.dispatch('fireflyiii/refreshCacheKey');
+      if (!response) {
+        return;
+      }
+      this.submitting = false;
+      let message = {
+        level: 'success',
+        text: 'Category is updated',
+        show: true,
+        action: {
+          show: true,
+          text: 'Go to category',
+          link: {name: 'categories.show', params: {id: parseInt(response.data.data.id)}}
+        }
+      };
+      // store flash
+      this.$q.localStorage.set('flash', message);
+      if (this.doReturnHere) {
+        window.dispatchEvent(new CustomEvent('flash', {
+          detail: {
+            flash: this.$q.localStorage.getItem('flash')
+          }
+        }));
+      }
+      if (!this.doReturnHere) {
+        // return to previous page.
+        this.$router.go(-1);
+      }
+
+    },
+    processErrors: function (error) {
+      if (error.response) {
+        let errors = error.response.data; // => the response payload
+        this.errorMessage = errors.message;
+        console.log(errors);
+        for (let i in errors.errors) {
+          if (errors.errors.hasOwnProperty(i)) {
+            this.submissionErrors[i] = errors.errors[i][0];
+            this.hasSubmissionErrors[i] = true;
+          }
+        }
+      }
+      this.submitting = false;
+    },
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/frontend/src/pages/categories/Index.vue b/frontend/src/pages/categories/Index.vue
new file mode 100644
index 0000000000..be305fa584
--- /dev/null
+++ b/frontend/src/pages/categories/Index.vue
@@ -0,0 +1,186 @@
+<template>
+  <q-page>
+    <q-table
+      :title="$t('firefly.categories')"
+      :rows="rows"
+      :columns="columns"
+      row-key="id"
+      @request="onRequest"
+      v-model:pagination="pagination"
+      :loading="loading"
+      class="q-ma-md"
+    >
+      <template v-slot:header="props">
+        <q-tr :props="props">
+          <q-th
+            v-for="col in props.cols"
+            :key="col.name"
+            :props="props"
+          >
+            {{ col.label }}
+          </q-th>
+        </q-tr>
+      </template>
+      <template v-slot:body="props">
+        <q-tr :props="props">
+          <q-td key="name" :props="props">
+            <router-link :to="{ name: 'categories.show', params: {id: props.row.id} }" class="text-primary">
+              {{ props.row.name }}
+            </router-link>
+          </q-td>
+          <q-td key="menu" :props="props">
+            <q-btn-dropdown color="primary" label="Actions" size="sm">
+              <q-list>
+                <q-item clickable v-close-popup :to="{name: 'categories.edit', params: {id: props.row.id}}">
+                  <q-item-section>
+                    <q-item-label>Edit</q-item-label>
+                  </q-item-section>
+                </q-item>
+                <q-item clickable v-close-popup @click="deleteCategory(props.row.id, props.row.name)">
+                  <q-item-section>
+                    <q-item-label>Delete</q-item-label>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-btn-dropdown>
+          </q-td>
+        </q-tr>
+      </template>
+    </q-table>
+    <p>
+      <q-btn :to="{name: 'categories.show', params: {id: 0}}">Transactions without a category</q-btn>
+    </p>
+    <q-page-sticky position="bottom-right" :offset="[18, 18]">
+      <q-fab
+        label="Actions"
+        square
+        vertical-actions-align="right"
+        label-position="left"
+        color="green"
+        icon="fas fa-chevron-up"
+        direction="up"
+      >
+        <q-fab-action color="primary" square :to="{ name: 'categories.create'}" icon="fas fa-exchange-alt" label="New category"/>
+      </q-fab>
+    </q-page-sticky>
+  </q-page>
+</template>
+
+<script>
+import {mapGetters, useStore} from "vuex";
+import Destroy from "../../api/categories/destroy";
+import List from "../../api/categories/list";
+
+export default {
+  name: 'Index',
+  watch: {
+    $route(to) {
+      // react to route changes...
+      if ('categories.index' === to.name) {
+        this.page = 1;
+        this.updateBreadcrumbs();
+        this.triggerUpdate();
+      }
+    }
+  },
+  data() {
+    return {
+      rows: [],
+      pagination: {
+        sortBy: 'desc',
+        descending: false,
+        page: 1,
+        rowsPerPage: 5,
+        rowsNumber: 100
+      },
+      loading: false,
+      columns: [
+        {name: 'name', label: 'Name', field: 'name', align: 'left'},
+        {name: 'menu', label: ' ', field: 'menu', align: 'right'},
+      ],
+    }
+  },
+  computed: {
+    ...mapGetters('fireflyiii', ['getRange', 'getCacheKey', 'getListPageSize']),
+  },
+  created() {
+    this.pagination.rowsPerPage = this.getListPageSize;
+  },
+  mounted() {
+    this.type = this.$route.params.type;
+    if (null === this.getRange.start || null === this.getRange.end) {
+      // subscribe, then update:
+      const $store = useStore();
+      $store.subscribe((mutation, state) => {
+        if ('fireflyiii/setRange' === mutation.type) {
+          this.range = {start: mutation.payload.start, end: mutation.payload.end};
+          this.triggerUpdate();
+        }
+      });
+    }
+    if (null !== this.getRange.start && null !== this.getRange.end) {
+      this.range = {start: this.getRange.start, end: this.getRange.end};
+      this.triggerUpdate();
+    }
+  },
+  methods: {
+    deleteCategory: function (id, name) {
+      this.$q.dialog({
+        title: 'Confirm',
+        message: 'Do you want to delete category "' + name + '"? Any and all transactions linked to this category will be spared.',
+        cancel: true,
+        persistent: true
+      }).onOk(() => {
+        this.destroyCategory(id);
+      });
+    },
+    destroyCategory: function (id) {
+      let destr = new Destroy;
+      destr.destroy(id).then(() => {
+        this.$store.dispatch('fireflyiii/refreshCacheKey');
+        this.triggerUpdate();
+      });
+    },
+    updateBreadcrumbs: function () {
+      this.$route.meta.pageTitle = 'firefly.categories';
+      this.$route.meta.breadcrumbs = [{title: 'categories'}];
+
+    },
+    onRequest: function (props) {
+      this.page = props.pagination.page;
+      this.triggerUpdate();
+    },
+    triggerUpdate: function () {
+      if (this.loading) {
+        return;
+      }
+      if (null === this.range.start || null === this.range.end) {
+        return;
+      }
+      this.loading = true;
+      const list = new List();
+      this.rows = [];
+      list.list(this.page, this.getCacheKey).then(
+        (response) => {
+          this.pagination.rowsPerPage = response.data.meta.pagination.per_page;
+          this.pagination.rowsNumber = response.data.meta.pagination.total;
+          this.pagination.page = this.page;
+
+          for (let i in response.data.data) {
+            if (response.data.data.hasOwnProperty(i)) {
+              let current = response.data.data[i];
+              let account = {
+                id: current.id,
+                name: current.attributes.name,
+              };
+              this.rows.push(account);
+            }
+          }
+          this.loading = false;
+        }
+      )
+      ;
+    }
+  }
+}
+</script>
diff --git a/frontend/src/pages/categories/Show.vue b/frontend/src/pages/categories/Show.vue
new file mode 100644
index 0000000000..a87971d2fe
--- /dev/null
+++ b/frontend/src/pages/categories/Show.vue
@@ -0,0 +1,122 @@
+<template>
+  <q-page>
+    <div class="row q-mx-md">
+      <div class="col-12">
+        <!-- Balance chart -->
+        <q-card bordered>
+          <q-card-section>
+            <div class="text-h6">{{ category.name }}</div>
+          </q-card-section>
+          <q-card-section>
+            <div class="row">
+              <div class="col-12 q-mb-xs">
+                Name: {{ category.name }}<br>
+              </div>
+            </div>
+          </q-card-section>
+        </q-card>
+      </div>
+    </div>
+
+    <div class="row q-mt-sm">
+      <div class="col-12">
+        <LargeTable ref="table"
+                    title="Transactions"
+                    :rows="rows"
+                    :loading="loading"
+                    v-on:on-request="onRequest"
+                    :rows-number="rowsNumber"
+                    :rows-per-page="rowsPerPage"
+                    :page="page"
+        >
+        </LargeTable>
+      </div>
+    </div>
+
+
+  </q-page>
+</template>
+
+<script>
+import LargeTable from "../../components/transactions/LargeTable";
+import Get from "../../api/categories/get";
+import Parser from "../../api/transactions/parser";
+
+export default {
+  name: "Show",
+  data() {
+    return {
+      category: {},
+      rows: [],
+      rowsNumber: 1,
+      rowsPerPage: 10,
+      page: 1,
+      id: 0
+    }
+  },
+  created() {
+    if ('no-category' === this.$route.params.id) {
+      this.id = 0;
+      this.getWithoutCategory();
+    }
+    if ('no-category' !== this.$route.params.id) {
+      this.id = parseInt(this.$route.params.id);
+      this.getCategory();
+    }
+  },
+  components: {LargeTable},
+  methods: {
+    onRequest: function (payload) {
+      this.page = payload.page;
+      this.getCategory();
+    },
+    getWithoutCategory: function () {
+      this.category = {name: '(without category)'};
+
+      this.loading = true;
+      const parser = new Parser;
+      this.rows = [];
+      let get = new Get;
+      get.transactionsWithoutCategory(this.page, this.getCacheKey).then(
+        (response) => {
+          let resp = parser.parseResponse(response);
+
+          this.rowsPerPage = resp.rowsPerPage;
+          this.rowsNumber = resp.rowsNumber;
+          this.rows = resp.rows;
+          this.loading = false;
+        }
+      );
+
+    },
+    getCategory: function () {
+      let get = new Get;
+      get.get(this.id).then((response) => this.parseCategory(response));
+
+      this.loading = true;
+      const parser = new Parser;
+      this.rows = [];
+
+      get.transactions(this.id, this.page, this.getCacheKey).then(
+        (response) => {
+          let resp = parser.parseResponse(response);
+
+          this.rowsPerPage = resp.rowsPerPage;
+          this.rowsNumber = resp.rowsNumber;
+          this.rows = resp.rows;
+          this.loading = false;
+        }
+      );
+    },
+    parseCategory: function (response) {
+      this.category = {
+        name: response.data.data.attributes.name,
+      };
+    },
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/frontend/src/pages/currencies/Create.vue b/frontend/src/pages/currencies/Create.vue
new file mode 100644
index 0000000000..12021f3605
--- /dev/null
+++ b/frontend/src/pages/currencies/Create.vue
@@ -0,0 +1,201 @@
+<template>
+  <q-page>
+    <div class="row q-mx-md">
+      <div class="col-12">
+        <q-banner inline-actions rounded class="bg-orange text-white" v-if="'' !== errorMessage">
+          {{ errorMessage }}
+          <template v-slot:action>
+            <q-btn flat @click="dismissBanner" label="Dismiss"/>
+          </template>
+        </q-banner>
+      </div>
+    </div>
+    <div class="row q-mx-md q-mt-md">
+      <div class="col-12">
+        <q-card bordered>
+          <q-card-section>
+            <div class="text-h6">Info for new currency</div>
+          </q-card-section>
+          <q-card-section>
+            <div class="row">
+              <div class="col-12 q-mb-xs">
+                <q-input
+                  :error-message="submissionErrors.name"
+                  :error="hasSubmissionErrors.name"
+                  bottom-slots :disable="disabledInput" type="text" clearable v-model="name" :label="$t('form.name')"
+                  outlined/>
+              </div>
+            </div>
+
+            <div class="row">
+              <div class="col-12 q-mb-xs">
+                <q-input
+                  :error-message="submissionErrors.code"
+                  :error="hasSubmissionErrors.code"
+                  bottom-slots :disable="disabledInput" type="text" clearable v-model="code" :label="$t('form.code')"
+                  outlined/>
+              </div>
+            </div>
+
+            <div class="row">
+              <div class="col-12 q-mb-xs">
+                <q-input
+                  :error-message="submissionErrors.symbol"
+                  :error="hasSubmissionErrors.symbol"
+                  bottom-slots :disable="disabledInput" type="text" clearable v-model="symbol" :label="$t('form.symbol')"
+                  outlined/>
+              </div>
+            </div>
+          </q-card-section>
+        </q-card>
+      </div>
+    </div>
+
+    <div class="row q-mx-md">
+      <div class="col-12">
+        <q-card class="q-mt-xs">
+          <q-card-section>
+            <div class="row">
+              <div class="col-12 text-right">
+                <q-btn :disable="disabledInput" color="primary" label="Submit" @click="submitCurrency"/>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-12 text-right">
+                <q-checkbox :disable="disabledInput" v-model="doReturnHere" left-label label="Return here to create another one"/>
+                <br/>
+                <q-checkbox v-model="doResetForm" left-label :disable="!doReturnHere || disabledInput" label="Reset form after submission"/>
+              </div>
+            </div>
+          </q-card-section>
+        </q-card>
+      </div>
+    </div>
+
+  </q-page>
+</template>
+
+<script>
+import Post from "../../api/currencies/post";
+
+export default {
+  name: 'Create',
+  data() {
+    return {
+      submissionErrors: {},
+      hasSubmissionErrors: {},
+      submitting: false,
+      doReturnHere: false,
+      doResetForm: false,
+      errorMessage: '',
+      type: '',
+      // currency fields:
+      name: '',
+      code: '',
+      symbol: '',
+    }
+  },
+  computed: {
+    disabledInput: function () {
+      return this.submitting;
+    }
+  },
+  created() {
+    this.resetForm();
+    this.type = this.$route.params.type;
+  },
+  methods: {
+    resetForm: function () {
+      this.name = '';
+      this.code = '';
+      this.symbol = '';
+      this.resetErrors();
+
+    },
+    resetErrors: function () {
+      this.submissionErrors =
+        {
+          name: '',
+          code: '',
+          symbol: '',
+        };
+      this.hasSubmissionErrors = {
+        name: false,
+        code: false,
+        symbol: false
+      };
+    },
+    submitCurrency: function () {
+      this.submitting = true;
+      this.errorMessage = '';
+
+      // reset errors:
+      this.resetErrors();
+
+      // build currency array
+      const submission = this.buildCurrency();
+
+      let currencies = new Post();
+      currencies
+        .post(submission)
+        .catch(this.processErrors)
+        .then(this.processSuccess);
+    },
+    buildCurrency: function () {
+      return {
+        name: this.name,
+        code: this.code,
+        symbol: this.symbol,
+      };
+    },
+    dismissBanner: function () {
+      this.errorMessage = '';
+    },
+    processSuccess: function (response) {
+      if (!response) {
+        return;
+      }
+      this.$store.dispatch('fireflyiii/refreshCacheKey');
+      this.submitting = false;
+      let message = {
+        level: 'success',
+        text: 'I am new currency',
+        show: true,
+        action: {
+          show: true,
+          text: 'Go to currency',
+          link: {name: 'currencies.show', params: {code: parseInt(response.data.data.attributes.code)}}
+        }
+      };
+      // store flash
+      this.$q.localStorage.set('flash', message);
+      if (this.doReturnHere) {
+        window.dispatchEvent(new CustomEvent('flash', {
+          detail: {
+            flash: this.$q.localStorage.getItem('flash')
+          }
+        }));
+      }
+      if (!this.doReturnHere) {
+        // return to previous page.
+        this.$router.go(-1);
+      }
+
+    },
+    processErrors: function (error) {
+      if (error.response) {
+        let errors = error.response.data; // => the response payload
+        this.errorMessage = errors.message;
+        console.log(errors);
+        for (let i in errors.errors) {
+          if (errors.errors.hasOwnProperty(i)) {
+            this.submissionErrors[i] = errors.errors[i][0];
+            this.hasSubmissionErrors[i] = true;
+          }
+        }
+      }
+      this.submitting = false;
+    },
+  }
+}
+</script>
diff --git a/frontend/src/pages/currencies/Edit.vue b/frontend/src/pages/currencies/Edit.vue
new file mode 100644
index 0000000000..cb0cac531b
--- /dev/null
+++ b/frontend/src/pages/currencies/Edit.vue
@@ -0,0 +1,205 @@
+<template>
+  <q-page>
+    <div class="row q-mx-md">
+      <div class="col-12">
+        <q-banner inline-actions rounded class="bg-orange text-white" v-if="'' !== errorMessage">
+          {{ errorMessage }}
+          <template v-slot:action>
+            <q-btn flat @click="dismissBanner" label="Dismiss"/>
+          </template>
+        </q-banner>
+      </div>
+    </div>
+    <div class="row q-mx-md q-mt-md">
+      <div class="col-12">
+        <q-card bordered>
+          <q-card-section>
+            <div class="text-h6">Edit currency</div>
+          </q-card-section>
+          <q-card-section>
+            <div class="row">
+              <div class="col-12 q-mb-xs">
+                <q-input
+                  :error-message="submissionErrors.name"
+                  :error="hasSubmissionErrors.name"
+                  bottom-slots :disable="disabledInput" type="text" clearable v-model="name" :label="$t('form.name')"
+                  outlined/>
+              </div>
+            </div>
+
+            <div class="row">
+              <div class="col-12 q-mb-xs">
+                <q-input
+                  :error-message="submissionErrors.code"
+                  :error="hasSubmissionErrors.code"
+                  bottom-slots :disable="disabledInput" type="text" clearable v-model="code" :label="$t('form.code')"
+                  outlined/>
+              </div>
+            </div>
+
+            <div class="row">
+              <div class="col-12 q-mb-xs">
+                <q-input
+                  :error-message="submissionErrors.symbol"
+                  :error="hasSubmissionErrors.symbol"
+                  bottom-slots :disable="disabledInput" type="text" clearable v-model="symbol" :label="$t('form.symbol')"
+                  outlined/>
+              </div>
+            </div>
+          </q-card-section>
+        </q-card>
+      </div>
+    </div>
+
+    <div class="row q-mx-md">
+      <div class="col-12">
+        <q-card class="q-mt-xs">
+          <q-card-section>
+            <div class="row">
+              <div class="col-12 text-right">
+                <q-btn :disable="disabledInput" color="primary" label="Update" @click="submitCurrency"/>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-12 text-right">
+                <q-checkbox :disable="disabledInput" v-model="doReturnHere" left-label label="Return here"/>
+              </div>
+            </div>
+          </q-card-section>
+        </q-card>
+      </div>
+    </div>
+
+  </q-page>
+</template>
+
+<script>
+import Get from "../../api/currencies/get";
+import Put from "../../api/currencies/put";
+
+export default {
+  name: "Edit",
+  data() {
+    return {
+      submissionErrors: {},
+      hasSubmissionErrors: {},
+      submitting: false,
+      doReturnHere: false,
+      doResetForm: false,
+      errorMessage: '',
+      type: '',
+      // currency fields:
+      code: '',
+      name: '',
+      symbol: '',
+    }
+  },
+  computed: {
+    disabledInput: function () {
+      return this.submitting;
+    }
+  },
+  created() {
+    this.code = this.$route.params.code;
+    this.collectCurrency();
+  },
+  methods: {
+    collectCurrency: function() {
+      let get = new Get;
+      get.get(this.code).then((response) => this.parseCurrency(response));
+    },
+    parseCurrency: function(response) {
+      this.name = response.data.data.attributes.name;
+      this.symbol = response.data.data.attributes.symbol;
+    },
+    resetErrors: function () {
+      this.submissionErrors =
+        {
+          name: '',
+          code: '',
+          symbol: '',
+        };
+      this.hasSubmissionErrors = {
+        name: false,
+        code: false,
+        symbol: false,
+      };
+    },
+    submitCurrency: function () {
+      this.submitting = true;
+      this.errorMessage = '';
+
+      // reset errors:
+      this.resetErrors();
+
+      // build account array
+      const submission = this.buildCurrency();
+
+      let currencies = new Put();
+      currencies
+        .post(this.code, submission)
+        .catch(this.processErrors)
+        .then(this.processSuccess);
+    },
+    buildCurrency: function () {
+      return {
+        name: this.name,
+        code: this.code,
+        symbol: this.symbol
+      };
+    },
+    dismissBanner: function () {
+      this.errorMessage = '';
+    },
+    processSuccess: function (response) {
+      this.$store.dispatch('fireflyiii/refreshCacheKey');
+      if (!response) {
+        return;
+      }
+      this.submitting = false;
+      let message = {
+        level: 'success',
+        text: 'Currency is updated',
+        show: true,
+        action: {
+          show: true,
+          text: 'Go to currency',
+          link: {name: 'currencies.show', params: {code: response.data.data.code}}
+        }
+      };
+      // store flash
+      this.$q.localStorage.set('flash', message);
+      if (this.doReturnHere) {
+        window.dispatchEvent(new CustomEvent('flash', {
+          detail: {
+            flash: this.$q.localStorage.getItem('flash')
+          }
+        }));
+      }
+      if (!this.doReturnHere) {
+        // return to previous page.
+        this.$router.go(-1);
+      }
+
+    },
+    processErrors: function (error) {
+      if (error.response) {
+        let errors = error.response.data; // => the response payload
+        this.errorMessage = errors.message;
+        console.log(errors);
+        for (let i in errors.errors) {
+          if (errors.errors.hasOwnProperty(i)) {
+            this.submissionErrors[i] = errors.errors[i][0];
+            this.hasSubmissionErrors[i] = true;
+          }
+        }
+      }
+      this.submitting = false;
+    },
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/frontend/src/pages/currencies/Index.vue b/frontend/src/pages/currencies/Index.vue
new file mode 100644
index 0000000000..17264d1a2f
--- /dev/null
+++ b/frontend/src/pages/currencies/Index.vue
@@ -0,0 +1,189 @@
+<template>
+  <q-page>
+    <q-table
+      :title="$t('firefly.currencies')"
+      :rows="rows"
+      :columns="columns"
+      row-key="id"
+      @request="onRequest"
+      v-model:pagination="pagination"
+      :loading="loading"
+      class="q-ma-md"
+    >
+      <template v-slot:header="props">
+        <q-tr :props="props">
+          <q-th
+            v-for="col in props.cols"
+            :key="col.name"
+            :props="props"
+          >
+            {{ col.label }}
+          </q-th>
+        </q-tr>
+      </template>
+      <template v-slot:body="props">
+        <q-tr :props="props">
+          <q-td key="name" :props="props">
+            <router-link :to="{ name: 'currencies.show', params: {code: props.row.code} }" class="text-primary">
+              {{ props.row.name }}
+            </router-link>
+          </q-td>
+          <q-td key="name" :props="props">
+              {{ props.row.code }}
+          </q-td>
+          <q-td key="menu" :props="props">
+            <q-btn-dropdown color="primary" label="Actions" size="sm">
+              <q-list>
+                <q-item clickable v-close-popup :to="{name: 'currencies.edit', params: {code: props.row.code}}">
+                  <q-item-section>
+                    <q-item-label>Edit</q-item-label>
+                  </q-item-section>
+                </q-item>
+                <q-item clickable v-close-popup @click="deleteCurrency(props.row.code, props.row.name)">
+                  <q-item-section>
+                    <q-item-label>Delete</q-item-label>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-btn-dropdown>
+          </q-td>
+        </q-tr>
+      </template>
+    </q-table>
+    <q-page-sticky position="bottom-right" :offset="[18, 18]">
+      <q-fab
+        label="Actions"
+        square
+        vertical-actions-align="right"
+        label-position="left"
+        color="green"
+        icon="fas fa-chevron-up"
+        direction="up"
+      >
+        <q-fab-action color="primary" square :to="{ name: 'currencies.create'}" icon="fas fa-exchange-alt" label="New currency"/>
+      </q-fab>
+    </q-page-sticky>
+  </q-page>
+</template>
+
+<script>
+import {mapGetters, useStore} from "vuex";
+import Destroy from "../../api/currencies/destroy";
+import List from "../../api/currencies/list";
+
+export default {
+  name: 'Index',
+  watch: {
+    $route(to) {
+      // react to route changes...
+      if ('currencies.index' === to.name) {
+        this.page = 1;
+        this.updateBreadcrumbs();
+        this.triggerUpdate();
+      }
+    }
+  },
+  data() {
+    return {
+      rows: [],
+      pagination: {
+        sortBy: 'desc',
+        descending: false,
+        page: 1,
+        rowsPerPage: 5,
+        rowsNumber: 100
+      },
+      loading: false,
+      columns: [
+        {name: 'name', label: 'Name', field: 'name', align: 'left'},
+        {name: 'name', label: 'Code', field: 'code', align: 'left'},
+        {name: 'menu', label: ' ', field: 'menu', align: 'right'},
+      ],
+    }
+  },
+  computed: {
+    ...mapGetters('fireflyiii', ['getRange', 'getCacheKey', 'getListPageSize']),
+  },
+  created() {
+    this.pagination.rowsPerPage = this.getListPageSize;
+  },
+  mounted() {
+    this.type = this.$route.params.type;
+    if (null === this.getRange.start || null === this.getRange.end) {
+      // subscribe, then update:
+      const $store = useStore();
+      $store.subscribe((mutation, state) => {
+        if ('fireflyiii/setRange' === mutation.type) {
+          this.range = {start: mutation.payload.start, end: mutation.payload.end};
+          this.triggerUpdate();
+        }
+      });
+    }
+    if (null !== this.getRange.start && null !== this.getRange.end) {
+      this.range = {start: this.getRange.start, end: this.getRange.end};
+      this.triggerUpdate();
+    }
+  },
+  methods: {
+    deleteCurrency: function (code, name) {
+      this.$q.dialog({
+        title: 'Confirm',
+        message: 'Do you want to delete currency "' + name + '"? Any and all transactions linked to this currency will be deleted as well.',
+        cancel: true,
+        persistent: true
+      }).onOk(() => {
+        this.destroyCurrency(code);
+        // TODO needs error catch.
+      });
+    },
+    destroyCurrency: function (code) {
+      let destr = new Destroy;
+      destr.destroy(code).then(() => {
+        this.$store.dispatch('fireflyiii/refreshCacheKey');
+        this.triggerUpdate();
+      });
+    },
+    updateBreadcrumbs: function () {
+      this.$route.meta.pageTitle = 'firefly.currencies';
+      this.$route.meta.breadcrumbs = [{title: 'currencies'}];
+
+    },
+    onRequest: function (props) {
+      this.page = props.pagination.page;
+      this.triggerUpdate();
+    },
+    triggerUpdate: function () {
+      if (this.loading) {
+        return;
+      }
+      if (null === this.range.start || null === this.range.end) {
+        return;
+      }
+      this.loading = true;
+      const list = new List();
+      this.rows = [];
+      list.list(this.page, this.getCacheKey).then(
+        (response) => {
+          this.pagination.rowsPerPage = response.data.meta.pagination.per_page;
+          this.pagination.rowsNumber = response.data.meta.pagination.total;
+          this.pagination.page = this.page;
+
+          for (let i in response.data.data) {
+            if (response.data.data.hasOwnProperty(i)) {
+              let current = response.data.data[i];
+              let account = {
+                id: current.id,
+                name: current.attributes.name,
+                code: current.attributes.code,
+              };
+              this.rows.push(account);
+            }
+          }
+          this.loading = false;
+        }
+      )
+      ;
+    }
+  }
+}
+</script>
diff --git a/frontend/src/pages/currencies/Show.vue b/frontend/src/pages/currencies/Show.vue
new file mode 100644
index 0000000000..dcc00ab8ae
--- /dev/null
+++ b/frontend/src/pages/currencies/Show.vue
@@ -0,0 +1,99 @@
+<template>
+  <q-page>
+    <div class="row q-mx-md">
+      <div class="col-12">
+        <!-- Balance chart -->
+        <q-card bordered>
+          <q-card-section>
+            <div class="text-h6">{{ currency.name }}</div>
+          </q-card-section>
+          <q-card-section>
+            <div class="row">
+              <div class="col-12 q-mb-xs">
+                Name: {{ currency.name }}<br>
+                Code: {{ currency.code }}<br>
+              </div>
+            </div>
+          </q-card-section>
+        </q-card>
+      </div>
+    </div>
+
+    <div class="row q-mt-sm">
+      <div class="col-12">
+        <LargeTable ref="table"
+                    title="Transactions"
+                    :rows="rows"
+                    :loading="loading"
+                    v-on:on-request="onRequest"
+                    :rows-number="rowsNumber"
+                    :rows-per-page="rowsPerPage"
+                    :page="page"
+        >
+        </LargeTable>
+      </div>
+    </div>
+
+
+  </q-page>
+</template>
+
+<script>
+import LargeTable from "../../components/transactions/LargeTable";
+import Get from "../../api/currencies/get";
+import Parser from "../../api/transactions/parser";
+
+export default {
+  name: "Show",
+  data() {
+    return {
+      currency: {},
+      rows: [],
+      rowsNumber: 1,
+      rowsPerPage: 10,
+      page: 1,
+      code: '',
+    }
+  },
+  created() {
+    this.code = this.$route.params.code;
+    this.getCurrency();
+  },
+  components: {LargeTable},
+  methods: {
+    onRequest: function (payload) {
+      this.page = payload.page;
+      this.getCurrency();
+    },
+    getCurrency: function () {
+      let get = new Get;
+      get.get(this.code).then((response) => this.parseCurrency(response));
+
+      this.loading = true;
+      const parser = new Parser;
+      this.rows = [];
+
+      get.transactions(this.code, this.page, this.getCacheKey).then(
+        (response) => {
+          let resp = parser.parseResponse(response);
+
+          this.rowsPerPage = resp.rowsPerPage;
+          this.rowsNumber = resp.rowsNumber;
+          this.rows = resp.rows;
+          this.loading = false;
+        }
+      );
+    },
+    parseCurrency: function (response) {
+      this.currency = {
+        name: response.data.data.attributes.name,
+        code: response.data.data.attributes.code,
+      };
+    },
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/frontend/src/pages/dashboard/Boxes.vue b/frontend/src/pages/dashboard/Boxes.vue
new file mode 100644
index 0000000000..f9138a38f1
--- /dev/null
+++ b/frontend/src/pages/dashboard/Boxes.vue
@@ -0,0 +1,202 @@
+<!--
+  - Boxes.vue
+  - Copyright (c) 2021 james@firefly-iii.org
+  -
+  - This file is part of Firefly III (https://github.com/firefly-iii).
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program.  If not, see <https://www.gnu.org/licenses/>.
+  -->
+
+<template>
+  <div class="row">
+    <div class="col-4 q-pr-sm q-pr-sm">
+      <q-card bordered>
+        <q-card-section class="q-pt-xs">
+          <div class="text-overline">
+            {{ $t('firefly.bills_to_pay') }}
+            <span class="float-right">
+            <span class="text-grey-4 fas fa-redo-alt" style="cursor: pointer;" @click="triggerForcedUpgrade"></span>
+              </span>
+          </div>
+        </q-card-section>
+        <q-card-section class="q-pt-xs">
+          <span v-for="balance in prefBillsUnpaid">{{ balance.value_parsed }}</span>
+          <span v-for="(bill, index) in notPrefBillsUnpaid">
+                                {{ bill.value_parsed }}<span v-if="index+1 !== notPrefBillsUnpaid.length">, </span>
+                            </span>
+        </q-card-section>
+      </q-card>
+    </div>
+    <div class="col-4 q-pr-sm q-pl-sm">
+
+      <q-card bordered>
+        <q-card-section class="q-pt-xs">
+          <div class="text-overline">
+            {{ $t('firefly.left_to_spend') }}
+            <span class="float-right">
+            <span class="text-grey-4 fas fa-redo-alt" style="cursor: pointer;" @click="triggerForcedUpgrade"></span>
+              </span>
+          </div>
+        </q-card-section>
+        <q-card-section class="q-pt-xs">
+          <!-- left to spend in preferred currency -->
+          <span v-for="left in prefLeftToSpend" :title="left.sub_title">{{ left.value_parsed }}</span>
+          <span v-for="(left, index) in notPrefLeftToSpend">
+                                {{ left.value_parsed }}<span v-if="index+1 !== notPrefLeftToSpend.length">, </span>
+                            </span>
+        </q-card-section>
+      </q-card>
+    </div>
+    <div class="col-4 q-pl-sm">
+      <q-card bordered>
+        <q-card-section class="q-pt-xs">
+          <div class="text-overline">
+            {{ $t('firefly.net_worth') }}
+            <span class="float-right">
+            <span class="text-grey-4 fas fa-redo-alt" style="cursor: pointer;" @click="triggerForcedUpgrade"></span>
+              </span>
+          </div>
+        </q-card-section>
+        <q-card-section class="q-pt-xs">
+          <span v-for="nw in prefNetWorth" :title="nw.sub_title">{{ nw.value_parsed }}</span>
+          <span v-for="(nw, index) in notPrefNetWorth">
+                                {{ nw.value_parsed }}<span v-if="index+1 !== notPrefNetWorth.length">, </span>
+                            </span>
+          <span v-if="0===notPrefNetWorth.length">&nbsp;</span>
+        </q-card-section>
+      </q-card>
+    </div>
+  </div>
+</template>
+
+<script>
+import Basic from "src/api/summary/basic";
+import {mapGetters, useStore} from "vuex";
+
+export default {
+  name: 'Boxes',
+  computed: {
+    ...mapGetters('fireflyiii', ['getCurrencyCode', 'getCurrencyId', 'getRange','getCacheKey']),
+    prefBillsUnpaid: function () {
+      return this.filterOnCurrency(this.billsUnpaid);
+    },
+    notPrefBillsUnpaid: function () {
+      return this.filterOnNotCurrency(this.billsUnpaid);
+    },
+    prefLeftToSpend: function () {
+      return this.filterOnCurrency(this.leftToSpend);
+    },
+    notPrefLeftToSpend: function () {
+      return this.filterOnNotCurrency(this.leftToSpend);
+    },
+    prefNetWorth: function () {
+      return this.filterOnCurrency(this.netWorth);
+    },
+    notPrefNetWorth: function () {
+      return this.filterOnNotCurrency(this.netWorth);
+    },
+  },
+  created() {
+  },
+  data() {
+    return {
+      summary: [],
+      billsPaid: [],
+      billsUnpaid: [],
+      leftToSpend: [],
+      netWorth: [],
+      range: {
+        start: null,
+        end: null,
+      }
+    }
+  },
+  mounted() {
+
+    if (null === this.range.start || null === this.range.end) {
+      // subscribe, then update:
+      const $store = useStore();
+      $store.subscribe((mutation) => {
+        if ('fireflyiii/setRange' === mutation.type) {
+          this.range = mutation.payload;
+          this.triggerUpdate();
+        }
+      });
+    }
+    if (null !== this.getRange.start && null !== this.getRange.end) {
+      this.start = this.getRange.start;
+      this.end = this.getRange.end;
+      this.triggerUpdate();
+    }
+  },
+  methods: {
+    triggerForcedUpgrade: function() {
+      this.$store.dispatch('fireflyiii/refreshCacheKey');
+      this.triggerUpdate();
+    },
+    triggerUpdate: function () {
+      if (null !== this.getRange.start && null !== this.getRange.end) {
+        const basic = new Basic;
+        basic.list({start: this.getRange.start, end: this.getRange.end}, this.getCacheKey).then(data => {
+          this.netWorth = this.getKeyedEntries(data.data, 'net-worth-in-');
+          this.leftToSpend = this.getKeyedEntries(data.data, 'left-to-spend-in-');
+          this.billsPaid = this.getKeyedEntries(data.data, 'bills-paid-in-');
+          this.billsUnpaid = this.getKeyedEntries(data.data, 'bills-unpaid-in-');
+        });
+      }
+    },
+    getKeyedEntries(array, expected) {
+      let result = [];
+      for (const key in array) {
+        if (array.hasOwnProperty(key)) {
+          if (expected === key.substr(0, expected.length)) {
+            result.push(array[key]);
+          }
+        }
+      }
+      return result;
+    },
+    filterOnCurrency(array) {
+      let ret = [];
+      for (const key in array) {
+        if (array.hasOwnProperty(key)) {
+          if (array[key].currency_id === this.getCurrencyId) {
+            ret.push(array[key]);
+          }
+        }
+      }
+      // or just the first one:
+      if (0 === ret.length && array.hasOwnProperty(0)) {
+        ret.push(array[0]);
+      }
+      return ret;
+    },
+    filterOnNotCurrency(array) {
+      let ret = [];
+      for (const key in array) {
+        if (array.hasOwnProperty(key)) {
+          if (array[key].currency_id !== this.getCurrencyId) {
+            ret.push(array[key]);
+          }
+        }
+      }
+      return ret;
+    },
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/frontend/src/pages/dashboard/HomeChart.vue b/frontend/src/pages/dashboard/HomeChart.vue
new file mode 100644
index 0000000000..7509dc083e
--- /dev/null
+++ b/frontend/src/pages/dashboard/HomeChart.vue
@@ -0,0 +1,169 @@
+<!--
+  - HomeChart.vue
+  - Copyright (c) 2022 james@firefly-iii.org
+  -
+  - This file is part of Firefly III (https://github.com/firefly-iii).
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program.  If not, see <https://www.gnu.org/licenses/>.
+  -->
+
+<template>
+  <div>
+    <ApexChart width="100%" ref="chart" height="350" type="line" :options="options" :series="series"></ApexChart>
+  </div>
+</template>
+
+<script>
+
+import {defineAsyncComponent} from "vue";
+import Overview from '../../api/chart/account/overview';
+import {mapGetters, useStore} from "vuex";
+import format from "date-fns/format";
+import {useQuasar} from "quasar";
+
+export default {
+  name: "HomeChart",
+  computed: {
+    ...mapGetters('fireflyiii', ['getRange', 'getCacheKey']),
+  },
+  data() {
+    return {
+      range: {
+        start: null,
+        end: null
+      },
+      loading: false,
+      currencies: [],
+      options: {
+        theme: {
+          mode: 'dark'
+        },
+        dataLabels: {
+          enabled: false
+        },
+        noData: {
+          text: 'Loading...'
+        },
+        chart: {
+          id: 'vuechart-home',
+          toolbar: {
+            show: true,
+            tools: {
+              download: false,
+              selection: false,
+              pan: false
+            }
+          }
+        },
+        yaxis: {
+          labels: {
+            formatter: this.numberFormatter
+          }
+        },
+        labels: [],
+        xaxis: {
+          categories: [],
+        },
+      },
+      series: [],
+      locale: 'en-US',
+      dateFormat: 'MMMM d, y',
+    }
+  },
+  created() {
+    const $q = useQuasar();
+    this.locale = $q.lang.getLocale();
+    this.dateFormat = this.$t('config.month_and_day_fns');
+  },
+  mounted() {
+    const $q = useQuasar();
+    this.options.theme.mode = $q.dark.isActive ? 'dark' : 'light';
+    if (null === this.range.start || null === this.range.end) {
+      // subscribe, then update:
+      const $store = useStore();
+      $store.subscribe((mutation, state) => {
+        if ('fireflyiii/setRange' === mutation.type) {
+          this.range = mutation.payload;
+          this.buildChart();
+        }
+      });
+    }
+    if (null !== this.getRange.start && null !== this.getRange.end) {
+      this.buildChart();
+    }
+  },
+  methods: {
+    numberFormatter: function (value, index) {
+      let currencyCode = this.currencies[index] ?? 'EUR';
+      return Intl.NumberFormat(this.locale, {style: 'currency', currency: currencyCode}).format(value);
+    },
+    buildChart: function () {
+      if (null !== this.getRange.start && null !== this.getRange.end) {
+        let start = this.getRange.start;
+        let end = this.getRange.end;
+        if (false === this.loading) {
+          this.loading = true;
+          const overview = new Overview();
+          // generate labels:
+          this.generateStaticLabels({start: start, end: end});
+          overview.overview({start: start, end: end}, this.getCacheKey).then(data => {
+            this.generateSeries(data.data)
+          });
+        }
+      }
+    },
+    generateSeries: function (data) {
+      this.series = [];
+      let series;
+      for (let i in data) {
+        if (data.hasOwnProperty(i)) {
+          series = {};
+          series.name = data[i].label;
+          series.data = [];
+          this.currencies.push(data[i].currency_code);
+          for (let ii in data[i].entries) {
+            series.data.push(data[i].entries[ii]);
+          }
+          this.series.push(series);
+        }
+      }
+      this.loading = false;
+    },
+    generateStaticLabels: function (range) {
+      let loop = new Date(range.start);
+      let newDate;
+      let labels = [];
+      while (loop <= range.end) {
+        labels.push(format(loop, this.dateFormat));
+        newDate = loop.setDate(loop.getDate() + 1);
+        loop = new Date(newDate);
+      }
+      this.options = {
+        ...this.options,
+        ...{
+          labels: labels
+        },
+      };
+    }
+  },
+
+  components: {
+    ApexChart: defineAsyncComponent(() => import('vue3-apexcharts')),
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/frontend/src/pages/development/Index.vue b/frontend/src/pages/development/Index.vue
new file mode 100644
index 0000000000..0a65a9d9d9
--- /dev/null
+++ b/frontend/src/pages/development/Index.vue
@@ -0,0 +1,79 @@
+<!--
+  - Index.vue
+  - Copyright (c) 2022 james@firefly-iii.org
+  -
+  - This file is part of Firefly III (https://github.com/firefly-iii).
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program.  If not, see <https://www.gnu.org/licenses/>.
+  -->
+
+<template>
+  <q-page>
+    <div class="row q-mx-md">
+      <div class="col-7">
+        <p>
+          Hi! With your active support and feedback I'm capable of building this fancy new layout. So thank you for testing and playing around.
+          I'm grateful for your help.
+        </p>
+        <p>
+          The <strong>v2</strong> layout was built to be perfect for each page. This new <strong>v3</strong> layout has a different approach. I'm
+          building a "minimum viable product", where each page has <em>minimal</em> functionality. But any functionality that's there should work. It
+          may not do everything you need and stuff may be missing. The things that you see are things that work.
+        </p>
+        <p>
+          If you spot problems, feel free to report them. Here are some known issues.
+        </p>
+        <ul>
+          <li class="text-negative">You will lose data when you edit certain objects;</li>
+          <li>Caching is fairly aggressive and a page refresh may be necessary to get new information. This is especially obvious when you make new transactions
+            or accounts;
+          </li>
+          <li>Not all menu's are (un)folded correctly for all pages;</li>
+          <li>Breadcrumbs are missing or incorrect;</li>
+          <li>You can't make transaction splits;</li>
+          <li>Accounts, budgets, transactions, etc. have only limited fields available in the edit, create and view screens;</li>
+          <li>Occasionally, you may spot a "TODO". I've limited their presence, but sometimes I just need a placeholder;</li>
+          <li>Missing translations, <code>firefly.abc</code> references, or transactions formatted in another locale;</li>
+        </ul>
+        <p>
+          If you need to visit a <strong>v1</strong> alternative for the page you are seeing, please change the URL to
+          <code>*/profile</code> (where <code>*</code> is your Firefly III URL). From there, you can navigate to any <strong>v1</strong> page.
+          You may not be able to visit the v1 dashboard.
+        </p>
+        <p>
+          Tickets on GitHub that concern v3 will be <em class="text-negative">closed</em>. This rule may change in the future. Until then, please leave your feedback here:
+        </p>
+        <ul>
+          <li><a href="https://github.com/firefly-iii/firefly-iii/discussions/5589">GitHub discussion</a></li>
+          <li><a href="https://gitter.im/firefly-iii/firefly-iii">Gitter.im chat</a></li>
+          <li><a href="mailto:james@firefly-iii.org">james@firefly-iii.org</a></li>
+        </ul>
+        <p>
+          Thanks again,<br>
+          James
+        </p>
+      </div>
+    </div>
+  </q-page>
+</template>
+
+<script>
+export default {
+  name: "Index"
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/frontend/src/pages/export/Index.vue b/frontend/src/pages/export/Index.vue
new file mode 100644
index 0000000000..b7cd3624a4
--- /dev/null
+++ b/frontend/src/pages/export/Index.vue
@@ -0,0 +1,54 @@
+<template>
+  <q-page>
+    <div class="row q-mx-md">
+      <div class="col-12">
+        <q-card bordered>
+          <q-card-section>
+            <div class="text-h6">Export page</div>
+          </q-card-section>
+          <q-card-section>
+            <p>
+              Just to see if this works. Button defaults to this year.
+            </p>
+          </q-card-section>
+          <q-card-section>
+            <p>
+              <q-btn @click="downloadTransactions">Download transactions</q-btn>
+            </p>
+          </q-card-section>
+        </q-card>
+      </div>
+    </div>
+  </q-page>
+</template>
+
+<script>
+import Export from "../../api/data/export";
+import startOfYear from "date-fns/startOfYear";
+import endOfYear from "date-fns/endOfYear";
+import format from "date-fns/format";
+
+export default {
+  name: "Index",
+  methods: {
+    downloadTransactions: function () {
+      let exp = new Export;
+      let start = format(startOfYear(new Date), 'yyyy-MM-dd');
+      let end = format(endOfYear(new Date), 'yyyy-MM-dd');
+      exp.transactions(start, end).then((response) => {
+        let label = 'export-transactions.csv';
+        const blob = new Blob([response.data], {type: 'application/octet-stream'})
+        const link = document.createElement('a')
+        link.href = URL.createObjectURL(blob)
+        link.download = label;
+        link.click()
+        URL.revokeObjectURL(link.href)
+      });
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/frontend/src/pages/groups/Edit.vue b/frontend/src/pages/groups/Edit.vue
new file mode 100644
index 0000000000..f1d56b3501
--- /dev/null
+++ b/frontend/src/pages/groups/Edit.vue
@@ -0,0 +1,177 @@
+<template>
+  <q-page>
+    <div class="row q-mx-md">
+      <div class="col-12">
+        <q-banner inline-actions rounded class="bg-orange text-white" v-if="'' !== errorMessage">
+          {{ errorMessage }}
+          <template v-slot:action>
+            <q-btn flat @click="dismissBanner" label="Dismiss"/>
+          </template>
+        </q-banner>
+      </div>
+    </div>
+    <div class="row q-mx-md q-mt-md">
+      <div class="col-12">
+        <q-card bordered>
+          <q-card-section>
+            <div class="text-h6">Edit group</div>
+          </q-card-section>
+          <q-card-section>
+            <div class="row">
+              <div class="col-12 q-mb-xs">
+                <q-input
+                  :error-message="submissionErrors.title"
+                  :error="hasSubmissionErrors.title"
+                  bottom-slots :disable="disabledInput" type="text" clearable v-model="title" :label="$t('form.title')"
+                  outlined/>
+              </div>
+            </div>
+          </q-card-section>
+        </q-card>
+      </div>
+    </div>
+
+    <div class="row q-mx-md">
+      <div class="col-12">
+        <q-card class="q-mt-xs">
+          <q-card-section>
+            <div class="row">
+              <div class="col-12 text-right">
+                <q-btn :disable="disabledInput" color="primary" label="Update" @click="submitGroup"/>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-12 text-right">
+                <q-checkbox :disable="disabledInput" v-model="doReturnHere" left-label label="Return here"/>
+              </div>
+            </div>
+          </q-card-section>
+        </q-card>
+      </div>
+    </div>
+
+  </q-page>
+</template>
+
+<script>
+import Get from "../../api/groups/get";
+import Put from "../../api/groups/put";
+
+export default {
+  name: "Edit",
+  data() {
+    return {
+      submissionErrors: {},
+      hasSubmissionErrors: {},
+      submitting: false,
+      doReturnHere: false,
+      doResetForm: false,
+      errorMessage: '',
+      type: '',
+      // group fields:
+      id: 0,
+      title: '',
+    }
+  },
+  computed: {
+    disabledInput: function () {
+      return this.submitting;
+    }
+  },
+  created() {
+    this.id = parseInt(this.$route.params.id);
+    this.collectGroup();
+  },
+  methods: {
+    collectGroup: function() {
+      let get = new Get;
+      get.get(this.id).then((response) => this.parseGroup(response));
+    },
+    parseGroup: function(response) {
+      this.title = response.data.data.attributes.title;
+    },
+    resetErrors: function () {
+      this.submissionErrors =
+        {
+          title: '',
+        };
+      this.hasSubmissionErrors = {
+        title: false,
+      };
+    },
+    submitGroup: function () {
+      this.submitting = true;
+      this.errorMessage = '';
+
+      // reset errors:
+      this.resetErrors();
+
+      // build account array
+      const submission = this.buildGroup();
+
+      let groups = new Put();
+      groups
+        .post(this.id, submission)
+        .catch(this.processErrors)
+        .then(this.processSuccess);
+    },
+    buildGroup: function () {
+      return {
+        title: this.title,
+      };
+    },
+    dismissBanner: function () {
+      this.errorMessage = '';
+    },
+    processSuccess: function (response) {
+      this.$store.dispatch('fireflyiii/refreshCacheKey');
+      if (!response) {
+        return;
+      }
+      this.submitting = false;
+      let message = {
+        level: 'success',
+        text: 'Group is updated',
+        show: true,
+        action: {
+          show: true,
+          text: 'Go to group',
+          link: {name: 'groups.show', params: {id: parseInt(response.data.data.id)}}
+        }
+      };
+      // store flash
+      this.$q.localStorage.set('flash', message);
+      if (this.doReturnHere) {
+        window.dispatchEvent(new CustomEvent('flash', {
+          detail: {
+            flash: this.$q.localStorage.getItem('flash')
+          }
+        }));
+      }
+      if (!this.doReturnHere) {
+        // return to previous page.
+        this.$router.go(-1);
+      }
+
+    },
+    processErrors: function (error) {
+      if (error.response) {
+        let errors = error.response.data; // => the response payload
+        this.errorMessage = errors.message;
+        console.log(errors);
+        for (let i in errors.errors) {
+          if (errors.errors.hasOwnProperty(i)) {
+            this.submissionErrors[i] = errors.errors[i][0];
+            this.hasSubmissionErrors[i] = true;
+          }
+        }
+      }
+      this.submitting = false;
+    },
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/frontend/src/pages/groups/Index.vue b/frontend/src/pages/groups/Index.vue
new file mode 100644
index 0000000000..d45674e526
--- /dev/null
+++ b/frontend/src/pages/groups/Index.vue
@@ -0,0 +1,171 @@
+<template>
+  <q-page>
+    <q-table
+      :title="$t('firefly.object_groups')"
+      :rows="rows"
+      :columns="columns"
+      row-key="id"
+      @request="onRequest"
+      v-model:pagination="pagination"
+      :loading="loading"
+      class="q-ma-md"
+    >
+      <template v-slot:header="props">
+        <q-tr :props="props">
+          <q-th
+            v-for="col in props.cols"
+            :key="col.name"
+            :props="props"
+          >
+            {{ col.label }}
+          </q-th>
+        </q-tr>
+      </template>
+      <template v-slot:body="props">
+        <q-tr :props="props">
+          <q-td key="title" :props="props">
+            <router-link :to="{ name: 'groups.show', params: {id: props.row.id} }" class="text-primary">
+              {{ props.row.title }}
+            </router-link>
+          </q-td>
+          <q-td key="menu" :props="props">
+            <q-btn-dropdown color="primary" label="Actions" size="sm">
+              <q-list>
+                <q-item clickable v-close-popup :to="{name: 'groups.edit', params: {id: props.row.id}}">
+                  <q-item-section>
+                    <q-item-label>Edit</q-item-label>
+                  </q-item-section>
+                </q-item>
+                <q-item clickable v-close-popup @click="deleteGroup(props.row.id, props.row.title)">
+                  <q-item-section>
+                    <q-item-label>Delete</q-item-label>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-btn-dropdown>
+          </q-td>
+        </q-tr>
+      </template>
+    </q-table>
+  </q-page>
+</template>
+
+<script>
+import {mapGetters, useStore} from "vuex";
+import Destroy from "../../api/groups/destroy";
+import List from "../../api/groups/list";
+
+export default {
+  name: 'Index',
+  watch: {
+    $route(to) {
+      // react to route changes...
+      if ('groups.index' === to.name) {
+        this.page = 1;
+        this.updateBreadcrumbs();
+        this.triggerUpdate();
+      }
+    }
+  },
+  data() {
+    return {
+      rows: [],
+      pagination: {
+        sortBy: 'desc',
+        descending: false,
+        page: 1,
+        rowsPerPage: 5,
+        rowsNumber: 100
+      },
+      loading: false,
+      columns: [
+        {name: 'title', label: 'Title', field: 'title', align: 'left'},
+        {name: 'menu', label: ' ', field: 'menu', align: 'right'},
+      ]
+    }
+  },
+  computed: {
+    ...mapGetters('fireflyiii', ['getRange', 'getCacheKey', 'getListPageSize']),
+  },
+  created() {
+    this.pagination.rowsPerPage = this.getListPageSize;
+  },
+  mounted() {
+    this.type = this.$route.params.type;
+    if (null === this.getRange.start || null === this.getRange.end) {
+      // subscribe, then update:
+      const $store = useStore();
+      $store.subscribe((mutation, state) => {
+        if ('fireflyiii/setRange' === mutation.type) {
+          this.range = {start: mutation.payload.start, end: mutation.payload.end};
+          this.triggerUpdate();
+        }
+      });
+    }
+    if (null !== this.getRange.start && null !== this.getRange.end) {
+      this.range = {start: this.getRange.start, end: this.getRange.end};
+      this.triggerUpdate();
+    }
+  },
+  methods: {
+    deleteGroup: function (code, title) {
+      this.$q.dialog({
+        title: 'Confirm',
+        message: 'Do you want to delete group "' + title + '"? Any resources in this group will be saved.',
+        cancel: true,
+        persistent: true
+      }).onOk(() => {
+        this.destroyGroup(code);
+        // TODO needs error catch.
+      });
+    },
+    destroyGroup: function (code) {
+      let destr = new Destroy;
+      destr.destroy(code).then(() => {
+        this.$store.dispatch('fireflyiii/refreshCacheKey');
+        this.triggerUpdate();
+      });
+    },
+    updateBreadcrumbs: function () {
+      this.$route.meta.pageTitle = 'firefly.groups';
+      this.$route.meta.breadcrumbs = [{title: 'groups'}];
+
+    },
+    onRequest: function (props) {
+      this.page = props.pagination.page;
+      this.triggerUpdate();
+    },
+    triggerUpdate: function () {
+      if (this.loading) {
+        return;
+      }
+      if (null === this.range.start || null === this.range.end) {
+        return;
+      }
+      this.loading = true;
+      const list = new List();
+      this.rows = [];
+      list.list(this.page, this.getCacheKey).then(
+        (response) => {
+          this.pagination.rowsPerPage = response.data.meta.pagination.per_page;
+          this.pagination.rowsNumber = response.data.meta.pagination.total;
+          this.pagination.page = this.page;
+
+          for (let i in response.data.data) {
+            if (response.data.data.hasOwnProperty(i)) {
+              let current = response.data.data[i];
+              let group = {
+                id: current.id,
+                title: current.attributes.title,
+              };
+              this.rows.push(group);
+            }
+          }
+          this.loading = false;
+        }
+      )
+      ;
+    }
+  }
+}
+</script>
diff --git a/frontend/src/pages/groups/Show.vue b/frontend/src/pages/groups/Show.vue
new file mode 100644
index 0000000000..95e3c24eab
--- /dev/null
+++ b/frontend/src/pages/groups/Show.vue
@@ -0,0 +1,58 @@
+<template>
+  <q-page>
+    <div class="row q-mx-md">
+      <div class="col-12">
+        <q-card bordered>
+          <q-card-section>
+            <div class="text-h6">{{ group.title }}</div>
+          </q-card-section>
+          <q-card-section>
+            <div class="row">
+              <div class="col-12 q-mb-xs">
+                Title: {{ group.title }}<br>
+              </div>
+            </div>
+          </q-card-section>
+        </q-card>
+      </div>
+    </div>
+  </q-page>
+</template>
+
+<script>
+import Get from "../../api/groups/get";
+
+export default {
+  name: "Show",
+  data() {
+    return {
+      group: {},
+      id: 0
+    }
+  },
+  created() {
+    this.id = parseInt(this.$route.params.id);
+    this.getGroup();
+  },
+  components: {},
+  methods: {
+    onRequest: function (payload) {
+      this.page = payload.page;
+      this.getGroup();
+    },
+    getGroup: function () {
+      let get = new Get;
+      get.get(this.id).then((response) => this.parseGroup(response));
+    },
+    parseGroup: function (response) {
+      this.group = {
+        title: response.data.data.attributes.title,
+      };
+    },
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/frontend/src/pages/piggy-banks/Create.vue b/frontend/src/pages/piggy-banks/Create.vue
new file mode 100644
index 0000000000..0bf2fbc718
--- /dev/null
+++ b/frontend/src/pages/piggy-banks/Create.vue
@@ -0,0 +1,252 @@
+<template>
+  <q-page>
+    <div class="row q-mx-md">
+      <div class="col-12">
+        <q-banner inline-actions rounded class="bg-orange text-white" v-if="'' !== errorMessage">
+          {{ errorMessage }}
+          <template v-slot:action>
+            <q-btn flat @click="dismissBanner" label="Dismiss"/>
+          </template>
+        </q-banner>
+      </div>
+    </div>
+    <div class="row q-mx-md q-mt-md">
+      <div class="col-12">
+        <q-card bordered>
+          <q-card-section>
+            <div class="text-h6">Info for new piggy bank</div>
+          </q-card-section>
+          <q-card-section>
+            <div class="row">
+              <div class="col-12 q-mb-xs">
+                <q-input
+                  :error-message="submissionErrors.name"
+                  :error="hasSubmissionErrors.name"
+                  bottom-slots :disable="disabledInput" type="text" clearable v-model="name" :label="$t('form.name')"
+                  outlined/>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-12 q-mb-xs">
+                <q-select
+                  :error-message="submissionErrors.account_id"
+                  :error="hasSubmissionErrors.account_id"
+                  bottom-slots
+                  :disable="disabledInput"
+                  outlined
+                  v-model="account_id"
+                  emit-value class="q-pr-xs"
+                  map-options :options="accounts" label="Asset account"/>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-12 q-mb-xs">
+                <q-input
+                  :error-message="submissionErrors.target_amount"
+                  :error="hasSubmissionErrors.target_amount"
+                  bottom-slots :disable="disabledInput" clearable :mask="balance_input_mask" reverse-fill-mask
+                  hint="Expects #.##" fill-mask="0"
+                  v-model="target_amount"
+                  :label="$t('firefly.target_amount')" outlined/>
+              </div>
+            </div>
+          </q-card-section>
+        </q-card>
+      </div>
+    </div>
+
+    <div class="row q-mx-md">
+      <div class="col-12">
+        <q-card class="q-mt-xs">
+          <q-card-section>
+            <div class="row">
+              <div class="col-12 text-right">
+                <q-btn :disable="disabledInput" color="primary" label="Submit" @click="submitPiggyBank"/>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-12 text-right">
+                <q-checkbox :disable="disabledInput" v-model="doReturnHere" left-label
+                            label="Return here to create another one"/>
+                <br/>
+                <q-checkbox v-model="doResetForm" left-label :disable="!doReturnHere || disabledInput"
+                            label="Reset form after submission"/>
+              </div>
+            </div>
+          </q-card-section>
+        </q-card>
+      </div>
+    </div>
+
+  </q-page>
+</template>
+
+<script>
+import Post from "../../api/piggy-banks/post";
+import List from "../../api/accounts/list";
+import {mapGetters} from "vuex";
+import {getCacheKey} from "../../store/fireflyiii/getters";
+
+export default {
+  name: 'Create',
+  data() {
+    return {
+      submissionErrors: {},
+      hasSubmissionErrors: {},
+      submitting: false,
+      doReturnHere: false,
+      doResetForm: false,
+      errorMessage: '',
+      balance_input_mask: '#.##',
+
+      // accounts
+      accounts: [],
+
+      // piggy bank fields:
+      name: '',
+      account_id: null,
+      target_amount: '',
+    }
+  },
+  watch: {
+    account_id: function (value) {
+      for (let key in this.accounts) {
+        if (this.accounts.hasOwnProperty(key)) {
+          let account = this.accounts[key];
+          if (account.value === value) {
+            let hash = '#';
+            this.balance_input_mask = '#.' + hash.repeat(account.decimal_places);
+          }
+        }
+      }
+    }
+  },
+  computed: {
+    ...mapGetters('fireflyiii', ['getCacheKey']),
+    disabledInput: function () {
+      return this.submitting;
+    }
+  },
+  created() {
+    this.resetForm();
+    this.getAccounts();
+  },
+  methods: {
+    resetForm: function () {
+      this.name = '';
+      this.account_id = '';
+      this.target_amount = '';
+      this.resetErrors();
+
+    },
+    getAccounts: function () {
+      this.getAccountPage(1);
+    },
+    getAccountPage: function (page) {
+
+      (new List).list('asset', page, this.getCacheKey).then((response) => {
+        let totalPages = parseInt(response.data.meta.pagination.total_pages);
+        // get next page:
+        if (page < totalPages) {
+          this.getAccountPage(page + 1);
+        }
+        // parse these accounts:
+        for (let i in response.data.data) {
+          if (response.data.data.hasOwnProperty(i)) {
+            let account = response.data.data[i];
+            this.accounts.push(
+              {
+                value: parseInt(account.id),
+                label: account.attributes.name,
+                decimal_places: parseInt(account.attributes.currency_decimal_places)
+              }
+            );
+          }
+        }
+      });
+    },
+    resetErrors: function () {
+      this.submissionErrors =
+        {
+          name: '',
+          account_id: '',
+          target_amount: '',
+        };
+      this.hasSubmissionErrors = {
+        name: false,
+        account_id: false,
+        target_amount: false,
+      };
+    },
+    submitPiggyBank: function () {
+      this.submitting = true;
+      this.errorMessage = '';
+
+      // reset errors:
+      this.resetErrors();
+
+      // build category array
+      const submission = this.buildPiggyBank();
+
+      (new Post())
+        .post(submission)
+        .catch(this.processErrors)
+        .then(this.processSuccess);
+    },
+    buildPiggyBank: function () {
+      return {
+        name: this.name,
+        account_id: this.account_id,
+        target_amount: this.target_amount
+      };
+    },
+    dismissBanner: function () {
+      this.errorMessage = '';
+    },
+    processSuccess: function (response) {
+      if (!response) {
+        return;
+      }
+      this.submitting = false;
+      let message = {
+        level: 'success',
+        text: 'I am new piggy',
+        show: true,
+        action: {
+          show: true,
+          text: 'Go to piggy',
+          link: {name: 'piggy-banks.show', params: {id: parseInt(response.data.data.id)}}
+        }
+      };
+      // store flash
+      this.$q.localStorage.set('flash', message);
+      if (this.doReturnHere) {
+        window.dispatchEvent(new CustomEvent('flash', {
+          detail: {
+            flash: this.$q.localStorage.getItem('flash')
+          }
+        }));
+      }
+      if (!this.doReturnHere) {
+        // return to previous page.
+        this.$router.go(-1);
+      }
+
+    },
+    processErrors: function (error) {
+      if (error.response) {
+        let errors = error.response.data; // => the response payload
+        this.errorMessage = errors.message;
+        console.log(errors);
+        for (let i in errors.errors) {
+          if (errors.errors.hasOwnProperty(i)) {
+            this.submissionErrors[i] = errors.errors[i][0];
+            this.hasSubmissionErrors[i] = true;
+          }
+        }
+      }
+      this.submitting = false;
+    },
+  }
+}
+</script>
diff --git a/frontend/src/pages/piggy-banks/Edit.vue b/frontend/src/pages/piggy-banks/Edit.vue
new file mode 100644
index 0000000000..0963dc8b02
--- /dev/null
+++ b/frontend/src/pages/piggy-banks/Edit.vue
@@ -0,0 +1,176 @@
+<template>
+  <q-page>
+    <div class="row q-mx-md">
+      <div class="col-12">
+        <q-banner inline-actions rounded class="bg-orange text-white" v-if="'' !== errorMessage">
+          {{ errorMessage }}
+          <template v-slot:action>
+            <q-btn flat @click="dismissBanner" label="Dismiss"/>
+          </template>
+        </q-banner>
+      </div>
+    </div>
+    <div class="row q-mx-md q-mt-md">
+      <div class="col-12">
+        <q-card bordered>
+          <q-card-section>
+            <div class="text-h6">Edit piggy bank</div>
+          </q-card-section>
+          <q-card-section>
+            <div class="row">
+              <div class="col-12 q-mb-xs">
+                <q-input
+                  :error-message="submissionErrors.name"
+                  :error="hasSubmissionErrors.name"
+                  bottom-slots :disable="disabledInput" type="text" clearable v-model="name" :label="$t('form.name')"
+                  outlined/>
+              </div>
+            </div>
+          </q-card-section>
+        </q-card>
+      </div>
+    </div>
+
+    <div class="row q-mx-md">
+      <div class="col-12">
+        <q-card class="q-mt-xs">
+          <q-card-section>
+            <div class="row">
+              <div class="col-12 text-right">
+                <q-btn :disable="disabledInput" color="primary" label="Update" @click="submitPiggyBank"/>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-12 text-right">
+                <q-checkbox :disable="disabledInput" v-model="doReturnHere" left-label label="Return here"/>
+              </div>
+            </div>
+          </q-card-section>
+        </q-card>
+      </div>
+    </div>
+
+  </q-page>
+</template>
+
+<script>
+import Get from "../../api/piggy-banks/get";
+import Put from "../../api/piggy-banks/put";
+
+export default {
+  name: "Edit",
+  data() {
+    return {
+      submissionErrors: {},
+      hasSubmissionErrors: {},
+      submitting: false,
+      doReturnHere: false,
+      doResetForm: false,
+      errorMessage: '',
+
+      // piggy bank fields:
+      id: 0,
+      name: '',
+    }
+  },
+  computed: {
+    disabledInput: function () {
+      return this.submitting;
+    }
+  },
+  created() {
+    this.id = parseInt(this.$route.params.id);
+    this.collectPiggyBank();
+  },
+  methods: {
+    collectPiggyBank: function() {
+      let get = new Get;
+      get.get(this.id).then((response) => this.parsePiggyBank(response));
+    },
+    parsePiggyBank: function(response) {
+      this.name = response.data.data.attributes.name;
+    },
+    resetErrors: function () {
+      this.submissionErrors =
+        {
+          name: '',
+        };
+      this.hasSubmissionErrors = {
+        name: false,
+      };
+    },
+    submitPiggyBank: function () {
+      this.submitting = true;
+      this.errorMessage = '';
+
+      // reset errors:
+      this.resetErrors();
+
+      // build account array
+      const submission = this.buildPiggyBank();
+
+      (new Put())
+        .post(this.id, submission)
+        .catch(this.processErrors)
+        .then(this.processSuccess);
+    },
+    buildPiggyBank: function () {
+      return {
+        name: this.name,
+      };
+    },
+    dismissBanner: function () {
+      this.errorMessage = '';
+    },
+    processSuccess: function (response) {
+      this.$store.dispatch('fireflyiii/refreshCacheKey');
+      if (!response) {
+        return;
+      }
+      this.submitting = false;
+      let message = {
+        level: 'success',
+        text: 'Piggy is updated',
+        show: true,
+        action: {
+          show: true,
+          text: 'Go to piggy',
+          link: {name: 'piggy-banks.show', params: {id: parseInt(response.data.data.id)}}
+        }
+      };
+      // store flash
+      this.$q.localStorage.set('flash', message);
+      if (this.doReturnHere) {
+        window.dispatchEvent(new CustomEvent('flash', {
+          detail: {
+            flash: this.$q.localStorage.getItem('flash')
+          }
+        }));
+      }
+      if (!this.doReturnHere) {
+        // return to previous page.
+        this.$router.go(-1);
+      }
+
+    },
+    processErrors: function (error) {
+      if (error.response) {
+        let errors = error.response.data; // => the response payload
+        this.errorMessage = errors.message;
+        console.log(errors);
+        for (let i in errors.errors) {
+          if (errors.errors.hasOwnProperty(i)) {
+            this.submissionErrors[i] = errors.errors[i][0];
+            this.hasSubmissionErrors[i] = true;
+          }
+        }
+      }
+      this.submitting = false;
+    },
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/frontend/src/pages/piggy-banks/Index.vue b/frontend/src/pages/piggy-banks/Index.vue
new file mode 100644
index 0000000000..3dac623667
--- /dev/null
+++ b/frontend/src/pages/piggy-banks/Index.vue
@@ -0,0 +1,182 @@
+<template>
+  <q-page>
+    <q-table
+      :title="$t('firefly.piggy-banks')"
+      :rows="rows"
+      :columns="columns"
+      row-key="id"
+      @request="onRequest"
+      v-model:pagination="pagination"
+      :loading="loading"
+      class="q-ma-md"
+    >
+      <template v-slot:header="props">
+        <q-tr :props="props">
+          <q-th
+            v-for="col in props.cols"
+            :key="col.name"
+            :props="props"
+          >
+            {{ col.label }}
+          </q-th>
+        </q-tr>
+      </template>
+      <template v-slot:body="props">
+        <q-tr :props="props">
+          <q-td key="name" :props="props">
+            <router-link :to="{ name: 'piggy-banks.show', params: {id: props.row.id} }" class="text-primary">
+              {{ props.row.name }}
+            </router-link>
+          </q-td>
+          <q-td key="menu" :props="props">
+            <q-btn-dropdown color="primary" label="Actions" size="sm">
+              <q-list>
+                <q-item clickable v-close-popup :to="{name: 'piggy-banks.edit', params: {id: props.row.id}}">
+                  <q-item-section>
+                    <q-item-label>Edit</q-item-label>
+                  </q-item-section>
+                </q-item>
+                <q-item clickable v-close-popup @click="deletePiggyBank(props.row.id, props.row.name)">
+                  <q-item-section>
+                    <q-item-label>Delete</q-item-label>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-btn-dropdown>
+          </q-td>
+        </q-tr>
+      </template>
+    </q-table>
+    <q-page-sticky position="bottom-right" :offset="[18, 18]">
+      <q-fab
+        label="Actions"
+        square
+        vertical-actions-align="right"
+        label-position="left"
+        color="green"
+        icon="fas fa-chevron-up"
+        direction="up"
+      >
+        <q-fab-action color="primary" square :to="{ name: 'piggy-banks.create'}" icon="fas fa-exchange-alt" label="New piggy bank"/>
+      </q-fab>
+    </q-page-sticky>
+  </q-page>
+</template>
+
+<script>
+import {mapGetters, useStore} from "vuex";
+import Destroy from "../../api/piggy-banks/destroy";
+import List from "../../api/piggy-banks/list";
+
+export default {
+  name: 'Index',
+  watch: {
+    $route(to) {
+      // react to route changes...
+      if ('piggy-banks.index' === to.name) {
+        this.page = 1;
+        this.updateBreadcrumbs();
+        this.triggerUpdate();
+      }
+    }
+  },
+  data() {
+    return {
+      rows: [],
+      pagination: {
+        sortBy: 'desc',
+        descending: false,
+        page: 1,
+        rowsPerPage: 5,
+        rowsNumber: 100
+      },
+      loading: false,
+      columns: [
+        {name: 'name', label: 'Name', field: 'name', align: 'left'},
+        {name: 'menu', label: ' ', field: 'menu', align: 'right'},
+      ],
+    }
+  },
+  computed: {
+    ...mapGetters('fireflyiii', ['getRange', 'getCacheKey', 'getListPageSize']),
+  },
+  created() {
+    this.pagination.rowsPerPage = this.getListPageSize;
+  },
+  mounted() {
+    if (null === this.getRange.start || null === this.getRange.end) {
+      // subscribe, then update:
+      const $store = useStore();
+      $store.subscribe((mutation, state) => {
+        if ('fireflyiii/setRange' === mutation.type) {
+          this.range = {start: mutation.payload.start, end: mutation.payload.end};
+          this.triggerUpdate();
+        }
+      });
+    }
+    if (null !== this.getRange.start && null !== this.getRange.end) {
+      this.range = {start: this.getRange.start, end: this.getRange.end};
+      this.triggerUpdate();
+    }
+  },
+  methods: {
+    deletePiggyBank: function (id, name) {
+      this.$q.dialog({
+        title: 'Confirm',
+        message: 'Do you want to delete piggy bank "' + name + '"?',
+        cancel: true,
+        persistent: true
+      }).onOk(() => {
+        this.destroyPiggyBank(id);
+      });
+    },
+    destroyPiggyBank: function (id) {
+      let destr = new Destroy;
+      destr.destroy(id).then(() => {
+        this.$store.dispatch('fireflyiii/refreshCacheKey');
+        this.triggerUpdate();
+      });
+    },
+    updateBreadcrumbs: function () {
+      this.$route.meta.pageTitle = 'firefly.piggy-banks';
+      this.$route.meta.breadcrumbs = [{title: 'piggy-banks'}];
+
+    },
+    onRequest: function (props) {
+      this.page = props.pagination.page;
+      this.triggerUpdate();
+    },
+    triggerUpdate: function () {
+      if (this.loading) {
+        return;
+      }
+      if (null === this.range.start || null === this.range.end) {
+        return;
+      }
+      this.loading = true;
+      const list = new List();
+      this.rows = [];
+      list.list(this.page, this.getCacheKey).then(
+        (response) => {
+          this.pagination.rowsPerPage = response.data.meta.pagination.per_page;
+          this.pagination.rowsNumber = response.data.meta.pagination.total;
+          this.pagination.page = this.page;
+
+          for (let i in response.data.data) {
+            if (response.data.data.hasOwnProperty(i)) {
+              let current = response.data.data[i];
+              let account = {
+                id: current.id,
+                name: current.attributes.name,
+              };
+              this.rows.push(account);
+            }
+          }
+          this.loading = false;
+        }
+      )
+      ;
+    }
+  }
+}
+</script>
diff --git a/frontend/src/pages/piggy-banks/Show.vue b/frontend/src/pages/piggy-banks/Show.vue
new file mode 100644
index 0000000000..2d8b2df690
--- /dev/null
+++ b/frontend/src/pages/piggy-banks/Show.vue
@@ -0,0 +1,57 @@
+<template>
+  <q-page>
+    <div class="row q-mx-md">
+      <div class="col-12">
+        <!-- Balance chart -->
+        <q-card bordered>
+          <q-card-section>
+            <div class="text-h6">{{ piggyBank.name }}</div>
+          </q-card-section>
+          <q-card-section>
+            <div class="row">
+              <div class="col-12 q-mb-xs">
+                Name: {{ piggyBank.name }}<br>
+              </div>
+            </div>
+          </q-card-section>
+        </q-card>
+      </div>
+    </div>
+  </q-page>
+</template>
+
+<script>
+import Get from "../../api/piggy-banks/get";
+
+export default {
+  name: "Show",
+  data() {
+    return {
+      piggyBank: {},
+      id: 0
+    }
+  },
+  created() {
+      this.id = parseInt(this.$route.params.id);
+      this.getPiggyBank();
+  },
+  methods: {
+    onRequest: function (payload) {
+      this.page = payload.page;
+      this.getPiggyBank();
+    },
+    getPiggyBank: function () {
+      (new Get).get(this.id).then((response) => this.parsePiggyBank(response));
+    },
+    parsePiggyBank: function (response) {
+      this.piggyBank = {
+        name: response.data.data.attributes.name,
+      };
+    },
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/frontend/src/pages/preferences/Index.vue b/frontend/src/pages/preferences/Index.vue
new file mode 100644
index 0000000000..32e907cab3
--- /dev/null
+++ b/frontend/src/pages/preferences/Index.vue
@@ -0,0 +1,390 @@
+<template>
+  <q-page>
+    <div class="row q-mx-md">
+      <div class="col-xl-4 col-lg-6 col-md-12 q-pa-xs">
+        <q-card bordered>
+          <q-card-section>
+            <div class="text-h6">Language and locale
+              <span class="text-secondary" v-if="true === isOk.language"><span
+                class="far fa-check-circle"></span></span>
+              <span class="text-blue" v-if="true === isLoading.language"><span
+                class="fas fa-spinner fa-spin"></span></span>
+              <span class="text-red" v-if="true === isFailure.language"><span
+                class="fas fa-skull-crossbones"></span> <small>Please refresh the page...</small></span>
+            </div>
+          </q-card-section>
+          <q-card-section>
+
+            <q-select
+              bottom-slots
+              outlined
+              v-model="language" emit-value
+              map-options :options="languages" label="I prefer the following language"/>
+          </q-card-section>
+        </q-card>
+      </div>
+      <div class="col-xl-4 col-lg-6 col-md-12 q-pa-xs">
+        <q-card bordered>
+          <q-card-section>
+            <div class="text-h6">Accounts on the home screen
+
+              <span class="text-secondary" v-if="true === isOk.accounts"><span
+                class="far fa-check-circle"></span></span>
+              <span class="text-blue" v-if="true === isLoading.accounts"><span
+                class="fas fa-spinner fa-spin"></span></span>
+              <span class="text-red" v-if="true === isFailure.accounts"><span
+                class="fas fa-skull-crossbones"></span> <small>Please refresh the page...</small></span>
+            </div>
+          </q-card-section>
+          <q-card-section>
+            <q-select
+              bottom-slots
+              outlined
+              multiple
+              use-chips
+              v-model="accounts" emit-value
+              map-options :options="allAccounts" label="I want to see these accounts on the dashboard"/>
+          </q-card-section>
+        </q-card>
+      </div>
+      <div class="col-xl-4 col-lg-6 col-md-12 q-pa-xs">
+        <q-card bordered>
+          <q-card-section>
+            <div class="text-h6">View range and list size
+
+              <span class="text-secondary" v-if="true === isOk.pageSize"><span
+                class="far fa-check-circle"></span></span>
+              <span class="text-blue" v-if="true === isLoading.pageSize"><span
+                class="fas fa-spinner fa-spin"></span></span>
+              <span class="text-red" v-if="true === isFailure.pageSize"><span
+                class="fas fa-skull-crossbones"></span> <small>Please refresh the page...</small></span>
+            </div>
+          </q-card-section>
+          <q-card-section>
+            <q-input outlined v-model="pageSize" type="number" step="1" label="Page size"/>
+          </q-card-section>
+          <q-card-section>
+            <q-select
+              bottom-slots
+              outlined
+              v-model="viewRange"
+              emit-value
+              map-options :options="viewRanges" label="Default period and view range"/>
+          </q-card-section>
+        </q-card>
+      </div>
+      <div class="col-xl-4 col-lg-6 col-md-12 q-pa-xs">
+        <q-card bordered>
+          <q-card-section>
+            <div class="text-h6">Optional transaction fields
+
+              <span class="text-secondary" v-if="true === isOk.transactionFields"><span
+                class="far fa-check-circle"></span></span>
+              <span class="text-blue" v-if="true === isLoading.transactionFields"><span
+                class="fas fa-spinner fa-spin"></span></span>
+              <span class="text-red" v-if="true === isFailure.transactionFields"><span
+                class="fas fa-skull-crossbones"></span> <small>Please refresh the page...</small></span>
+            </div>
+          </q-card-section>
+          <q-tabs
+            v-model="tab" dense
+          >
+            <q-tab name="date" label="Date fields"/>
+            <q-tab name="meta" label="Meta data fields"/>
+            <q-tab name="ref" label="Reference fields"/>
+          </q-tabs>
+          <q-tab-panels v-model="tab" animated swipeable>
+            <q-tab-panel name="date">
+              <q-option-group
+                :options="allTransactionFields.date"
+                type="checkbox"
+                v-model="transactionFields.date"
+              />
+            </q-tab-panel>
+            <q-tab-panel name="meta">
+              <q-option-group
+                :options="allTransactionFields.meta"
+                type="checkbox"
+                v-model="transactionFields.meta"
+              />
+            </q-tab-panel>
+            <q-tab-panel name="ref">
+              <q-option-group
+                :options="allTransactionFields.ref"
+                type="checkbox"
+                v-model="transactionFields.ref"
+              />
+            </q-tab-panel>
+          </q-tab-panels>
+        </q-card>
+      </div>
+    </div>
+  </q-page>
+</template>
+
+<script>
+import Configuration from "../../api/system/configuration";
+import Put from "../../api/preferences/put";
+import Preferences from "../../api/preferences";
+import List from "../../api/accounts/list";
+import {mapGetters} from "vuex";
+
+export default {
+  name: 'Index',
+  mounted() {
+    this.isOk = {
+      language: true,
+      accounts: true,
+      pageSize: true,
+      transactionFields: true,
+    };
+    this.isLoading = {
+      language: false,
+      accounts: false,
+      pageSize: false,
+      transactionFields: false,
+    };
+    this.isFailure = {
+      language: false,
+      accounts: false,
+      pageSize: false,
+      transactionFields: false,
+    };
+    // get select lists for certain preferences
+    this.getLanguages();
+    this.getLanguage();
+    this.getAssetAccounts().then(() => {
+      this.getPreferredAccounts()
+    });
+    this.getViewRanges().then(() => {
+      this.getPreferredViewRange()
+    });
+    this.getPageSize();
+    this.getOptionalFields();
+  },
+  data() {
+    return {
+      // data for select lists
+      languages: [],
+      allAccounts: [],
+      tab: 'date',
+      allTransactionFields: {
+        date: [
+          {label: 'Interest date', value: 'interest_date'},
+          {label: 'Book date', value: 'book_date'},
+          {label: 'Processing date', value: 'process_date'},
+          {label: 'Due date', value: 'due_date'},
+          {label: 'Payment date', value: 'payment_date'},
+          {label: 'Invoice date', value: 'invoice_date'},
+        ],
+        meta: [
+          {label: 'Notes', value: 'notes'},
+          {label: 'Location', value: 'location'},
+          {label: 'Attachments', value: 'attachments'},
+        ],
+        ref: [
+          {label: 'Internal reference', value: 'internal_reference'},
+          {label: 'Transaction links', value: 'links'},
+          {label: 'External URL', value: 'external_url'},
+          {label: 'External ID', value: 'external_id'},
+        ]
+      },
+      viewRanges: [],
+
+      // is loading:
+      isOk: {},
+      isLoading: {},
+      isFailure: {},
+
+      // preferences:
+      language: 'en_US',
+      viewRange: '1M',
+      pageSize: 50,
+      accounts: [],
+      transactionFields: {
+        date: [],
+        meta: [],
+        ref: []
+      }
+    }
+  },
+  watch: {
+    pageSize: function (value) {
+      this.isOk.language = false;
+      this.isLoading.language = true;
+      (new Put).put('listPageSize', value).then(() => {
+        this.$store.dispatch('fireflyiii/refreshCacheKey');
+        this.isOk.pageSize = true;
+        this.isLoading.pageSize = false;
+        this.isFailure.pageSize = false;
+      }).catch(() => {
+        this.isOk.pageSize = false;
+        this.isLoading.pageSize = false;
+        this.isFailure.pageSize = true;
+      });
+    },
+    'transactionFields.date': function () {
+      this.submitTransactionFields();
+    },
+    'transactionFields.meta': function () {
+      this.submitTransactionFields();
+    },
+    'transactionFields.ref': function () {
+      this.submitTransactionFields();
+    },
+    language: function (value) {
+      this.isOk.language = false;
+      this.isLoading.language = true;
+      (new Put).put('language', value).then(() => {
+        this.$store.dispatch('fireflyiii/refreshCacheKey');
+        this.isOk.language = true;
+        this.isLoading.language = false;
+        this.isFailure.language = false;
+      }).catch(() => {
+        this.isOk.language = false;
+        this.isLoading.language = false;
+        this.isFailure.language = true;
+      });
+    },
+    accounts: function (value) {
+      (new Put).put('frontpageAccounts', value).then(() => {
+        this.$store.dispatch('fireflyiii/refreshCacheKey');
+        this.isOk.accounts = true;
+        this.isLoading.accounts = false;
+        this.isFailure.accounts = false;
+      }).catch(() => {
+        this.isOk.accounts = false;
+        this.isLoading.accounts = false;
+        this.isFailure.accounts = true;
+      });
+    },
+    viewRange: function (value) {
+      (new Put).put('viewRange', value).then(() => {
+        this.$store.dispatch('fireflyiii/refreshCacheKey');
+        this.isOk.pageSize = true;
+        this.isLoading.pageSize = false;
+        this.isFailure.pageSize = false;
+      }).catch(() => {
+        this.isOk.pageSize = false;
+        this.isLoading.pageSize = false;
+        this.isFailure.pageSize = true;
+      });
+    },
+  },
+  computed: {
+    ...mapGetters('fireflyiii', ['getCacheKey']),
+  },
+  methods: {
+    getAssetAccounts: function () {
+      return this.getAssetAccountPage(1);
+    },
+    getAssetAccountPage: function (page) {
+      return (new List).list('asset', page, this.getCacheKey).then((response) => {
+        let totalPages = parseInt(response.data.meta.pagination.total_pages);
+
+        // parse accounts:
+        for (let i in response.data.data) {
+          if (response.data.data.hasOwnProperty(i)) {
+            let current = response.data.data[i];
+            this.allAccounts.push({value: parseInt(current.id), label: current.attributes.name});
+          }
+        }
+        if (totalPages > page) {
+          this.getAssetAccountPage(page + 1);
+        }
+      });
+    },
+    submitTransactionFields: function() {
+      let submission = {};
+      for(let i in this.transactionFields) {
+        if(this.transactionFields.hasOwnProperty(i)) {
+          let set = this.transactionFields[i];
+          for(let ii in set) {
+            if(set.hasOwnProperty(ii)) {
+              let value = set[ii];
+              submission[value] = true;
+            }
+          }
+        }
+      }
+      (new Put).put('transaction_journal_optional_fields', submission).then(() => {
+        this.$store.dispatch('fireflyiii/refreshCacheKey');
+        this.isOk.transactionFields = true;
+        this.isLoading.transactionFields = false;
+        this.isFailure.transactionFields = false;
+      }).catch(() => {
+        this.isOk.transactionFields = false;
+        this.isLoading.transactionFields = false;
+        this.isFailure.transactionFields = true;
+      });
+    },
+    getOptionalFields: function () {
+      (new Preferences).getByName('transaction_journal_optional_fields').then((response) => {
+        let preferences = response.data.data.attributes.data;
+        for (let i in preferences) {
+          // loop over allTransactionFields
+          for (let ii in this.allTransactionFields) {
+            if (this.allTransactionFields.hasOwnProperty(ii)) {
+              let set = this.allTransactionFields[ii];
+              for (let iii in set) {
+                if (set.hasOwnProperty(iii)) {
+                  let field = set[iii];
+                  if (i === field.value && true === preferences[i]) {
+                    this.transactionFields[ii].push(i);
+                  }
+                }
+              }
+            }
+          }
+        }
+      })
+    },
+    getLanguage: function () {
+      (new Preferences).getByName('language').then((response) => {
+        this.language = response.data.data.attributes.data;
+      })
+    },
+    getPageSize: function () {
+      (new Preferences).getByName('listPageSize').then((response) => {
+        this.pageSize = response.data.data.attributes.data;
+      })
+    },
+    getPreferredAccounts: function () {
+      (new Preferences).getByName('frontpageAccounts').then((response) => {
+        this.accounts = response.data.data.attributes.data;
+      })
+    },
+    getPreferredViewRange: function () {
+      (new Preferences).getByName('viewRange').then((response) => {
+        this.viewRange = response.data.data.attributes.data;
+      })
+    },
+    getLanguages: function () {
+      // get languages
+      let config = new Configuration();
+      config.get('firefly.languages').then((response) => {
+        let obj = response.data.data.value;
+        for (let key in obj) {
+          if (obj.hasOwnProperty(key)) {
+            let lang = obj[key];
+            this.languages.push({value: key, label: lang.name_locale + ' (' + lang.name_english + ')'});
+          }
+        }
+      });
+    },
+    getViewRanges: function () {
+      // get languages
+      let config = new Configuration();
+      return config.get('firefly.valid_view_ranges').then((response) => {
+        let obj = response.data.data.value;
+        for (let key in obj) {
+          if (obj.hasOwnProperty(key)) {
+            let lang = obj[key];
+            this.viewRanges.push({value: lang, label: this.$t('firefly.pref_' + lang)});
+          }
+        }
+      });
+    }
+  }
+}
+</script>
diff --git a/frontend/src/pages/profile/Data.vue b/frontend/src/pages/profile/Data.vue
new file mode 100644
index 0000000000..c164a11336
--- /dev/null
+++ b/frontend/src/pages/profile/Data.vue
@@ -0,0 +1,26 @@
+<template>
+  <q-page>
+    <!-- TODO Authentication different page -->
+
+    <div class="row q-mx-md">
+      <div class="col-xl-4 col-lg-6 col-md-12 q-pa-xs">
+        <q-card bordered>
+          <q-card-section>
+            Empty / TODO
+          </q-card-section>
+        </q-card>
+      </div>
+
+    </div>
+  </q-page>
+</template>
+
+<script>
+
+export default {
+  name: 'Data',
+  data() {
+    return {}
+  },
+}
+</script>
diff --git a/frontend/src/pages/profile/Index.vue b/frontend/src/pages/profile/Index.vue
new file mode 100644
index 0000000000..ff4d62aa78
--- /dev/null
+++ b/frontend/src/pages/profile/Index.vue
@@ -0,0 +1,148 @@
+<template>
+  <q-page>
+    <!-- TODO Authentication different page -->
+
+    <div class="row q-mx-md">
+      <div class="col-xl-4 col-lg-6 col-md-12 q-pa-xs">
+        <q-card bordered>
+          <q-card-section>
+            <div class="text-h6">Email address</div>
+          </q-card-section>
+          <q-card-section>
+            <q-input outlined type="email" required v-model="emailAddress" label="Email address">
+              <template v-slot:prepend>
+                <q-icon name="fas fa-envelope"/>
+              </template>
+            </q-input>
+            <p class="text-primary">
+              If you change your email address you will be logged out. You must confirm your address change before you can login again.
+            </p>
+          </q-card-section>
+          <q-card-actions v-if="emailTouched">
+            <q-btn flat @click="confirmAddressChange">Change address</q-btn>
+          </q-card-actions>
+        </q-card>
+      </div>
+      <!--
+      <div class="col-xl-4 col-lg-6 col-md-12 q-pa-xs">
+        <q-card bordered>
+          <q-card-section>
+            <div class="text-h6">Password</div>
+          </q-card-section>
+          <q-card-section>
+            <p>
+              (input) (input)
+            </p>
+            <p class="text-primary">
+              Change password instructions here. Also needs logout. Button does not work.
+            </p>
+          </q-card-section>
+        </q-card>
+      </div>
+      -->
+
+      <!--
+      <div class="col-xl-4 col-lg-6 col-md-12 q-pa-xs">
+        <q-card bordered>
+          <q-card-section>
+            <div class="text-h6">2FA</div>
+          </q-card-section>
+          <q-card-section>
+            <p class="text-primary">
+              Here
+            </p>
+          </q-card-section>
+        </q-card>
+      </div>
+      -->
+
+      <!--
+      <div class="col-xl-4 col-lg-6 col-md-12 q-pa-xs">
+        <q-card bordered>
+          <q-card-section>
+            <div class="text-h6">Session management</div>
+          </q-card-section>
+          <q-card-section>
+            <p class="text-primary">
+              Explanation here
+            </p>
+          </q-card-section>
+          <q-card-actions>
+            Logout one / Logout all
+          </q-card-actions>
+        </q-card>
+      </div>
+    -->
+    </div>
+
+    <q-page-sticky position="bottom-right" :offset="[18, 18]">
+      <q-fab
+        label="Actions"
+        square
+        vertical-actions-align="right"
+        label-position="left"
+        color="green"
+        icon="fas fa-chevron-up"
+        direction="up">
+        <q-fab-action color="primary" square :to="{ name: 'profile.data' }" icon="fas fa-database" label="Manage data"/>
+      </q-fab>
+    </q-page-sticky>
+  </q-page>
+</template>
+
+<script>
+import AboutUser from "../../api/system/user";
+
+export default {
+  name: 'Index',
+  data() {
+    return {
+      tab: 'mails',
+      id: 0,
+      emailAddress: '',
+      emailOriginal: '',
+      emailTouched: false,
+    }
+  },
+  watch: {
+    emailAddress: function (value) {
+      this.emailTouched = false;
+      if (this.emailOriginal !== value) {
+        this.emailTouched = true;
+      }
+    }
+  },
+  created() {
+    this.getUserInfo();
+  },
+  methods: {
+    getUserInfo: function () {
+      (new AboutUser).get().then((response) => {
+        this.emailAddress = response.data.data.attributes.email;
+        this.emailOriginal = response.data.data.attributes.email;
+        this.id = parseInt(response.data.data.id);
+      });
+    },
+    confirmAddressChange: function () {
+      this.$q.dialog({
+                       title: 'Confirm',
+                       message: 'Are you sure?',
+                       cancel: true,
+                       persistent: false
+                     }).onOk(() => {
+        this.submitAddressChange();
+      }).onCancel(() => {
+        // console.log('>>>> Cancel')
+      }).onDismiss(() => {
+        // console.log('I am triggered on both OK and Cancel')
+      })
+    },
+    submitAddressChange: function () {
+      (new AboutUser).put(this.id, {email: this.emailAddress})
+      .then((response) =>  {
+        (new AboutUser).logout();
+      });
+    }
+  },
+}
+</script>
diff --git a/frontend/src/pages/recurring/Create.vue b/frontend/src/pages/recurring/Create.vue
new file mode 100644
index 0000000000..08869f2084
--- /dev/null
+++ b/frontend/src/pages/recurring/Create.vue
@@ -0,0 +1,570 @@
+<template>
+  <q-page>
+    <div class="row q-mx-md">
+      <div class="col-12">
+        <q-banner inline-actions rounded class="bg-orange text-white" v-if="'' !== errorMessage">
+          {{ errorMessage }}
+          <template v-slot:action>
+            <q-btn flat @click="dismissBanner" label="Dismiss"/>
+          </template>
+        </q-banner>
+      </div>
+    </div>
+    <div class="row q-mx-md q-mt-md">
+      <div class="col-xl-4 col-lg-6 col-md-12 col-xs-12 q-px-xs">
+        <q-card bordered>
+          <q-card-section>
+            <div class="text-h6">Basic options for recurring transaction</div>
+          </q-card-section>
+          <q-card-section>
+            <div class="row">
+              <div class="col-12 q-mb-xs">
+                <q-input
+                  :error-message="submissionErrors.title"
+                  :error="hasSubmissionErrors.title"
+                  bottom-slots :disable="disabledInput" type="text" clearable v-model="title" :label="$t('form.title')"
+                  outlined/>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-12 q-mb-xs">
+                <q-select
+                  :error-message="submissionErrors.type"
+                  :error="hasSubmissionErrors.type"
+                  bottom-slots
+                  :disable="disabledInput"
+                  outlined
+                  v-model="type"
+                  emit-value class="q-pr-xs"
+                  map-options :options="types" label="Transaction type"/>
+              </div>
+            </div>
+          </q-card-section>
+        </q-card>
+      </div>
+      <div class="col-xl-4 col-lg-6 col-md-12 col-xs-12 q-px-xs">
+        <q-card bordered>
+          <q-card-section>
+            <div class="text-h6">Repeat info</div>
+          </q-card-section>
+          <q-card-section>
+            <div class="row">
+              <div class="col-12 q-mb-xs">
+                <q-input
+                  :error-message="submissionErrors.first_date"
+                  :error="hasSubmissionErrors.first_date"
+                  clearable
+                  bottom-slots :disable="disabledInput" type="date" v-model="first_date" :label="$t('form.first_date')"
+                  hint="The first date you want the recurrence"
+                  outlined/>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-12 q-mb-xs">
+                <q-input
+                  :error-message="submissionErrors.nr_of_repetitions"
+                  :error="hasSubmissionErrors.nr_of_repetitions"
+                  clearable
+                  bottom-slots :disable="disabledInput" type="number" step="1" v-model="nr_of_repetitions"
+                  :label="$t('form.repetitions')"
+                  hint="nr_of_repetitions"
+                  outlined/>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-12 q-mb-xs">
+                <q-input
+                  :error-message="submissionErrors.repeat_until"
+                  :error="hasSubmissionErrors.repeat_until"
+                  bottom-slots :disable="disabledInput" type="date" v-model="repeat_until"
+                  hint="repeat_until"
+                  clearable
+                  outlined/>
+              </div>
+            </div>
+          </q-card-section>
+        </q-card>
+      </div>
+    </div>
+
+    <div class="row q-mx-md q-mt-md">
+      <div class="col-xl-4 col-lg-6 col-md-12 col-xs-12 q-px-xs">
+        <q-card bordered>
+          <q-card-section>
+            <div class="text-h6">Single transaction</div>
+          </q-card-section>
+          <q-card-section>
+
+            <q-input
+              :error-message="submissionErrors.transactions[index].description"
+              :error="hasSubmissionErrors.transactions[index].description"
+              bottom-slots :disable="disabledInput" type="text" clearable v-model="transactions[index].description"
+              :label="$t('form.description')"
+              outlined/>
+
+            <q-input
+              :error-message="submissionErrors.transactions[index].amount"
+              :error="hasSubmissionErrors.transactions[index].amount"
+              bottom-slots :disable="disabledInput" clearable :mask="balance_input_mask" reverse-fill-mask
+              hint="Expects #.##" fill-mask="0"
+              v-model="transactions[index].amount"
+              :label="$t('firefly.amount')" outlined/>
+
+
+            <q-select
+              :error-message="submissionErrors.transactions[index].source_id"
+              :error="hasSubmissionErrors.transactions[index].source_id"
+              v-model="transactions[index].source_id"
+              bottom-slots
+              :disable="loading"
+              outlined
+              emit-value class="q-pr-xs"
+              map-options :options="accounts" label="Source account"/>
+
+            <q-select
+              :error-message="submissionErrors.transactions[index].destination_id"
+              :error="hasSubmissionErrors.transactions[index].destination_id"
+              v-model="transactions[index].destination_id"
+              bottom-slots
+              :disable="disabledInput"
+              outlined
+              emit-value class="q-pr-xs"
+              map-options :options="accounts" label="Destination account"/>
+          </q-card-section>
+        </q-card>
+      </div>
+      <div class="col-xl-4 col-lg-6 col-md-12 col-xs-12 q-px-xs">
+        <q-card bordered>
+          <q-card-section>
+            <div class="text-h6">Single repetition</div>
+          </q-card-section>
+          <q-card-section>
+            <q-select
+              :error-message="submissionErrors.repetitions[index].type"
+              :error="hasSubmissionErrors.repetitions[index].type"
+              bottom-slots
+              emit-value
+              outlined
+              v-model="repetitions[index].type"
+              map-options :options="repetition_types" label="Type of repetition"/>
+
+            <q-input
+              :error-message="submissionErrors.repetitions[index].skip"
+              :error="hasSubmissionErrors.repetitions[index].skip"
+              bottom-slots :disable="disabledInput" clearable
+              v-model="repetitions[index].skip"
+              type="number"
+              min="0" max="31"
+              :label="$t('firefly.skip')" outlined
+            />
+
+            <q-select
+              :error-message="submissionErrors.repetitions[index].weekend"
+              :error="hasSubmissionErrors.repetitions[index].weekend"
+              v-model="repetitions[index].weekend"
+              bottom-slots
+              :disable="disabledInput"
+              outlined
+              emit-value class="q-pr-xs"
+              map-options :options="weekends" label="Weekend?"/>
+
+          </q-card-section>
+
+        </q-card>
+      </div>
+    </div>
+
+
+    <div class="row q-mx-md">
+      <div class="col-12 q-pa-xs">
+        <q-card class="q-mt-xs">
+          <q-card-section>
+            <div class="row">
+              <div class="col-12 text-right">
+                <q-btn :disable="disabledInput" color="primary" label="Submit" @click="submitRecurrence"/>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-12 text-right">
+                <q-checkbox :disable="disabledInput" v-model="doReturnHere" left-label
+                            label="Return here to create another one"/>
+                <br/>
+                <q-checkbox v-model="doResetForm" left-label :disable="!doReturnHere || disabledInput"
+                            label="Reset form after submission"/>
+              </div>
+            </div>
+          </q-card-section>
+        </q-card>
+      </div>
+    </div>
+
+  </q-page>
+</template>
+
+<script>
+import Post from "../../api/recurring/post";
+import {mapGetters} from "vuex";
+import {getCacheKey} from "../../store/fireflyiii/getters";
+import format from "date-fns/format";
+import List from "../../api/accounts/list";
+import {parseISO} from "date-fns";
+
+export default {
+  name: 'Create',
+  data() {
+    return {
+      index: 0,
+      loading: true,
+      submissionErrors: {},
+      hasSubmissionErrors: {},
+      submitting: false,
+      doReturnHere: false,
+      doResetForm: false,
+      errorMessage: '',
+      balance_input_mask: '#.##',
+      types: [
+        {value: 'withdrawal', label: 'Withdrawal'},
+        {value: 'deposit', label: 'Deposit'},
+        {value: 'transfer', label: 'Transfer'},
+      ],
+      weekends: [
+        {value: 1, label: 'dont care'},
+        {value: 2, label: 'skip creation'},
+        {value: 3, label: 'jump to previous friday'},
+        {value: 4, label: 'jump to next monday'},
+      ],
+      repetition_types: [],
+
+      // info
+      accounts: [],
+
+      // recurrence fields:
+      title: '',
+      type: 'withdrawal',
+      first_date: '',
+      nr_of_repetitions: null,
+      repeat_until: null,
+      repetitions: {},
+      transactions: {}
+    }
+  },
+  watch: {
+    'first_date': function () {
+      // update actual single repetition value
+      this.recalculateRepetitions();
+    }
+  },
+  computed: {
+    ...mapGetters('fireflyiii', ['getCacheKey']),
+    disabledInput: function () {
+      return this.submitting;
+    }
+  },
+  created() {
+    this.resetForm();
+    this.getAccounts();
+    this.recalculateRepetitions();
+  },
+  methods: {
+    // shared with Edit
+    recalculateRepetitions: function () {
+      console.log('recalculateRepetitions');
+      let date = parseISO(this.first_date + 'T00:00:00');
+      let xthDay = this.getXth(date);
+      this.repetition_types = [
+        {
+          value: 'daily',
+          label: 'Every day',
+        },
+        {
+          value: 'monthly',
+          label: 'Every month on the ' + format(date, 'do') + ' day',
+        },
+        {
+          value: 'ndom',
+          label: 'Every month on the ' + xthDay + '-th ' + format(date, 'EEEE'),
+        },
+        {
+          value: 'yearly',
+          label: 'Every year on ' + format(date, 'd MMMM'),
+        }
+      ];
+    },
+    getXth: function (date) {
+      let expectedDay = format(date, 'EEEE');
+      let start = new Date(date);
+      let count = 0;
+      start.setDate(1);
+      const length = new Date(start.getFullYear(), start.getMonth() + 1, 0).getDate();
+      let loop = 1;
+      while ((start.getDate() <= length && date.getMonth() === start.getMonth()) || loop <= 32) {
+        loop++;
+        if (expectedDay === format(start, 'EEEE')) {
+          count++;
+        }
+        if (start.getDate() === date.getDate()) {
+          return count;
+        }
+        start.setDate(start.getDate() + 1);
+      }
+      return count;
+    },
+
+    resetForm: function () {
+      // default fields:
+      this.title = '';
+      this.type = 'withdrawal';
+      this.nr_of_repetitions = null;
+      this.repeat_until = null;
+
+      // first date field
+      let date = new Date;
+      date.setDate(date.getDate() + 1);
+      this.first_date = format(date, 'y-MM-dd');
+
+      // default repetition:
+      this.repetitions = [
+        {
+          type: 'daily',
+          moment: '',
+          skip: null,
+          weekend: 1,
+        }
+      ];
+
+      // default transaction:
+      this.transactions = [
+        {
+          description: null,
+          amount: null,
+          foreign_amount: null,
+          currency_id: null, // TODO get default currency
+          currency_code: null,
+          foreign_currency_id: null,
+          foreign_currency_code: null,
+          budget_id: null,
+          category_id: null,
+          source_id: null,
+          destination_id: null,
+          tags: null,
+          piggy_bank_id: null,
+        }
+      ];
+      this.resetErrors();
+    },
+    // same function as Edit
+    resetErrors: function () {
+      this.submissionErrors =
+        {
+          title: '',
+          type: '',
+          first_date: '',
+          nr_of_repetitions: '',
+          repeat_until: '',
+          transactions: [
+            {
+              description: '',
+              amount: '',
+              foreign_amount: '',
+              currency_id: '',
+              currency_code: '',
+              foreign_currency_id: '',
+              foreign_currency_code: '',
+              budget_id: '',
+              category_id: '',
+              source_id: '',
+              destination_id: '',
+              tags: '',
+              piggy_bank_id: '',
+            }
+          ],
+          repetitions: [
+            {
+              type: '',
+              moment: '',
+              skip: '',
+              weekend: '',
+            }
+          ],
+        };
+      this.hasSubmissionErrors = {
+        title: false,
+        type: false,
+        first_date: false,
+        nr_of_repetitions: false,
+        repeat_until: false,
+        transactions: [
+          {
+            description: false,
+            amount: false,
+            foreign_amount: false,
+            currency_id: false,
+            currency_code: false,
+            foreign_currency_id: false,
+            foreign_currency_code: false,
+            budget_id: false,
+            category_id: false,
+            source_id: false,
+            destination_id: false,
+            tags: false,
+            piggy_bank_id: false,
+          }
+        ],
+        repetitions: [
+          {
+            type: false,
+            moment: false,
+            skip: false,
+            weekend: false,
+          }
+        ],
+      };
+    },
+    submitRecurrence: function () {
+      this.submitting = true;
+      this.errorMessage = '';
+
+      // reset errors:
+      this.resetErrors();
+
+      // build category array
+      const submission = this.buildRecurrence();
+      (new Post())
+        .post(submission)
+        .catch(this.processErrors)
+        .then(this.processSuccess);
+    },
+    buildRecurrence: function () {
+      let result = {
+        title: this.title,
+        type: this.type,
+        first_date: this.first_date,
+        nr_of_repetitions: this.nr_of_repetitions,
+        repeat_until: this.repeat_until,
+        transactions: this.transactions,
+        repetitions: [],
+      };
+      // repetitions: this.repetitions,
+      for (let i in this.repetitions) {
+        if (this.repetitions.hasOwnProperty(i)) {
+
+          let moment = '';
+          let date = parseISO(this.first_date + 'T00:00:00');
+          // calculate moment for this type:
+          if ('monthly' === this.repetitions[i].type) {
+            moment = date.getDate().toString();
+          }
+          if ('ndom' === this.repetitions[i].type) {
+            let xthDay = this.getXth(date);
+            moment = xthDay + ',' + format(date, 'i');
+          }
+          if ('yearly' === this.repetitions[i].type) {
+            moment = format(date, 'yyyy-MM-dd');
+          }
+
+
+          result.repetitions.push(
+            {
+              type: this.repetitions[i].type,
+              moment: moment,
+              skip: this.repetitions[i].skip,
+              weekend: this.repetitions[i].weekend,
+            }
+          );
+        }
+      }
+      return result;
+    },
+    dismissBanner: function () {
+      this.errorMessage = '';
+    },
+    processSuccess: function (response) {
+      if (!response) {
+        return;
+      }
+      this.submitting = false;
+      let message = {
+        level: 'success',
+        text: 'I am new recurrence',
+        show: true,
+        action: {
+          show: true,
+          text: 'Go to recurrence',
+          link: {name: 'recurring.show', params: {id: parseInt(response.data.data.id)}}
+        }
+      };
+      // store flash
+      this.$q.localStorage.set('flash', message);
+      if (this.doReturnHere) {
+        window.dispatchEvent(new CustomEvent('flash', {
+          detail: {
+            flash: this.$q.localStorage.getItem('flash')
+          }
+        }));
+      }
+      if (!this.doReturnHere) {
+        // return to previous page.
+        this.$router.go(-1);
+      }
+
+    },
+    // todo this method is everywhere
+    processErrors: function (error) {
+      if (error.response) {
+        let errors = error.response.data; // => the response payload
+        this.errorMessage = errors.message;
+        for (let i in errors.errors) {
+          if (errors.errors.hasOwnProperty(i)) {
+            let errorKey = i;
+            if (errorKey.includes('.')) {
+              // it's a split
+              let parts = errorKey.split('.');
+              let series = parts[0];
+              let errorIndex = parseInt(parts[1]);
+              let errorField = parts[2];
+              this.submissionErrors[series][errorIndex][errorField] = errors.errors[i][0]
+              this.hasSubmissionErrors[series][errorIndex][errorField] = true;
+            }
+            if (!errorKey.includes('.')) {
+              this.submissionErrors[i] = errors.errors[i][0];
+              this.hasSubmissionErrors[i] = true;
+            }
+          }
+        }
+      }
+      this.submitting = false;
+    },
+    getAccounts: function () {
+      this.getPage(1);
+    },
+    getPage: function (page) {
+      (new List).list('all', page, this.getCacheKey).then((response) => {
+        let totalPages = parseInt(response.data.meta.pagination.total_pages);
+
+        // parse these accounts:
+        for (let i in response.data.data) {
+          if (response.data.data.hasOwnProperty(i)) {
+            let account = response.data.data[i];
+            this.accounts.push(
+              {
+                value: parseInt(account.id),
+                label: account.attributes.type + ': ' + account.attributes.name,
+                decimal_places: parseInt(account.attributes.currency_decimal_places)
+              }
+            );
+          }
+        }
+
+        if (page < totalPages) {
+          this.getPage(page + 1);
+        }
+        if (page === totalPages) {
+          this.loading = false;
+          this.accounts.sort((a, b) => (a.label > b.label) ? 1 : ((b.label > a.label) ? -1 : 0))
+        }
+      });
+    },
+
+  }
+}
+</script>
diff --git a/frontend/src/pages/recurring/Edit.vue b/frontend/src/pages/recurring/Edit.vue
new file mode 100644
index 0000000000..61d5a853ab
--- /dev/null
+++ b/frontend/src/pages/recurring/Edit.vue
@@ -0,0 +1,583 @@
+<template>
+  <q-page>
+    <div class="row q-mx-md">
+      <div class="col-12">
+        <q-banner inline-actions rounded class="bg-orange text-white" v-if="'' !== errorMessage">
+          {{ errorMessage }}
+          <template v-slot:action>
+            <q-btn flat @click="dismissBanner" label="Dismiss"/>
+          </template>
+        </q-banner>
+      </div>
+    </div>
+    <div class="row q-mx-md q-mt-md">
+      <div class="col-xl-4 col-lg-6 col-md-12 col-xs-12 q-px-xs">
+        <q-card bordered>
+          <q-card-section>
+            <div class="text-h6">Basic options for recurring transaction</div>
+          </q-card-section>
+          <q-card-section>
+            <div class="row">
+              <div class="col-12 q-mb-xs">
+                <q-input
+                  :error-message="submissionErrors.title"
+                  :error="hasSubmissionErrors.title"
+                  bottom-slots :disable="disabledInput" type="text" clearable v-model="title" :label="$t('form.title')"
+                  outlined/>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-12 q-mb-xs">
+                <q-select
+                  :error-message="submissionErrors.type"
+                  :error="hasSubmissionErrors.type"
+                  bottom-slots
+                  :disable="disabledInput"
+                  outlined
+                  v-model="type"
+                  emit-value class="q-pr-xs"
+                  map-options :options="types" label="Transaction type"/>
+              </div>
+            </div>
+          </q-card-section>
+        </q-card>
+      </div>
+      <div class="col-xl-4 col-lg-6 col-md-12 col-xs-12 q-px-xs">
+        <q-card bordered>
+          <q-card-section>
+            <div class="text-h6">Repeat info</div>
+          </q-card-section>
+          <q-card-section>
+            <div class="row">
+              <div class="col-12 q-mb-xs">
+                <q-input
+                  :error-message="submissionErrors.first_date"
+                  :error="hasSubmissionErrors.first_date"
+                  clearable
+                  bottom-slots :disable="disabledInput" type="date" v-model="first_date" :label="$t('form.first_date')"
+                  hint="The first date you want the recurrence"
+                  outlined/>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-12 q-mb-xs">
+                <q-input
+                  :error-message="submissionErrors.nr_of_repetitions"
+                  :error="hasSubmissionErrors.nr_of_repetitions"
+                  clearable
+                  bottom-slots :disable="disabledInput" type="number" step="1" v-model="nr_of_repetitions"
+                  :label="$t('form.repetitions')"
+                  hint="nr_of_repetitions"
+                  outlined/>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-12 q-mb-xs">
+                <q-input
+                  :error-message="submissionErrors.repeat_until"
+                  :error="hasSubmissionErrors.repeat_until"
+                  bottom-slots :disable="disabledInput" type="date" v-model="repeat_until"
+                  hint="repeat_until"
+                  clearable
+                  outlined/>
+              </div>
+            </div>
+          </q-card-section>
+        </q-card>
+      </div>
+    </div>
+
+    <div class="row q-mx-md q-mt-md">
+      <div class="col-xl-4 col-lg-6 col-md-12 col-xs-12 q-px-xs">
+        <q-card bordered>
+          <q-card-section>
+            <div class="text-h6">Single transaction</div>
+          </q-card-section>
+          <q-card-section>
+
+            <q-input
+              :error-message="submissionErrors.transactions[index].description"
+              :error="hasSubmissionErrors.transactions[index].description"
+              bottom-slots :disable="disabledInput" type="text" clearable v-model="transactions[index].description"
+              :label="$t('form.description')"
+              outlined/>
+
+            <q-input
+              :error-message="submissionErrors.transactions[index].amount"
+              :error="hasSubmissionErrors.transactions[index].amount"
+              bottom-slots :disable="disabledInput" clearable :mask="balance_input_mask" reverse-fill-mask
+              hint="Expects #.##" fill-mask="0"
+              v-model="transactions[index].amount"
+              :label="$t('firefly.amount')" outlined/>
+
+
+            <q-select
+              :error-message="submissionErrors.transactions[index].source_id"
+              :error="hasSubmissionErrors.transactions[index].source_id"
+              v-model="transactions[index].source_id"
+              bottom-slots
+              :disable="disabledInput"
+              outlined
+              emit-value class="q-pr-xs"
+              map-options :options="accounts" label="Source account"/>
+
+            <q-select
+              :error-message="submissionErrors.transactions[index].destination_id"
+              :error="hasSubmissionErrors.transactions[index].destination_id"
+              v-model="transactions[index].destination_id"
+              bottom-slots
+              :disable="disabledInput"
+              outlined
+              emit-value class="q-pr-xs"
+              map-options :options="accounts" label="Destination account"/>
+          </q-card-section>
+        </q-card>
+      </div>
+      <div class="col-xl-4 col-lg-6 col-md-12 col-xs-12 q-px-xs">
+        <q-card bordered>
+          <q-card-section>
+            <div class="text-h6">Single repetition</div>
+          </q-card-section>
+          <q-card-section>
+            <q-select
+              :error-message="submissionErrors.repetitions[index].type"
+              :error="hasSubmissionErrors.repetitions[index].type"
+              bottom-slots
+              emit-value
+              :disable="disabledInput"
+              outlined
+              v-model="repetitions[index].type"
+              map-options :options="repetition_types" label="Type of repetition"/>
+
+            <q-input
+              :error-message="submissionErrors.repetitions[index].skip"
+              :error="hasSubmissionErrors.repetitions[index].skip"
+              bottom-slots :disable="disabledInput" clearable
+              v-model="repetitions[index].skip"
+              type="number"
+              min="0" max="31"
+              :label="$t('form.skip')" outlined
+            />
+
+            <q-select
+              :error-message="submissionErrors.repetitions[index].weekend"
+              :error="hasSubmissionErrors.repetitions[index].weekend"
+              v-model="repetitions[index].weekend"
+              bottom-slots
+              :disable="disabledInput"
+              outlined
+              emit-value class="q-pr-xs"
+              map-options :options="weekends" label="Weekend?"/>
+
+          </q-card-section>
+
+        </q-card>
+      </div>
+    </div>
+
+
+    <div class="row q-mx-md">
+      <div class="col-12 q-pa-xs">
+        <q-card class="q-mt-xs">
+          <q-card-section>
+            <div class="row">
+              <div class="col-12 text-right">
+                <q-btn :disable="disabledInput" color="primary" label="Submit" @click="submitRecurringTransaction"/>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-12 text-right">
+                <q-checkbox :disable="disabledInput" v-model="doReturnHere" left-label
+                            label="Return here to create another one"/>
+                <br/>
+                <q-checkbox v-model="doResetForm" left-label :disable="!doReturnHere || disabledInput"
+                            label="Reset form after submission"/>
+              </div>
+            </div>
+          </q-card-section>
+        </q-card>
+      </div>
+    </div>
+
+  </q-page>
+</template>
+
+<script>
+import Get from "../../api/recurring/get";
+import Put from "../../api/recurring/put";
+import {parseISO} from "date-fns";
+import format from "date-fns/format";
+import List from "../../api/accounts/list";
+
+export default {
+  name: "Edit",
+  data() {
+    return {
+      submissionErrors: {},
+      hasSubmissionErrors: {},
+      submitting: false,
+      loading: false,
+      doReturnHere: false,
+      doResetForm: false,
+      errorMessage: '',
+      index: 0,
+      accounts: [],
+      balance_input_mask: '#.##', // shared with lots of methods.
+
+      // shared with Create
+      types: [
+        {value: 'withdrawal', label: 'Withdrawal'},
+        {value: 'deposit', label: 'Deposit'},
+        {value: 'transfer', label: 'Transfer'},
+      ],
+      weekends: [
+        {value: 1, label: 'dont care'},
+        {value: 2, label: 'skip creation'},
+        {value: 3, label: 'jump to previous friday'},
+        {value: 4, label: 'jump to next monday'},
+      ],
+      repetition_types: [],
+
+
+      // recurring transaction fields:
+      id: 0,
+      type: '',
+      title: '',
+      first_date: null,
+      nr_of_repetitions: 0,
+      repeat_until: '',
+      repetitions: {},
+      transactions: {}
+    }
+  },
+  watch: {
+    'first_date': function () {
+      // update actual single repetition value
+      this.recalculateRepetitions();
+    }
+  },
+  computed: {
+    disabledInput: function () {
+      return this.submitting || this.loading;
+    }
+  },
+  // TODO some forms use 'loading' others use 'submitting' or 'disabledInput', needs to be the same.
+  created() {
+    this.loading = true;
+    this.resetErrors();
+    this.resetForm();
+    this.getAccounts().then(() => {
+      this.collectRecurringTransaction().then(() => {
+        this.loading = false;
+      });
+    })
+    this.id = parseInt(this.$route.params.id);
+  },
+  methods: {
+    resetForm: function () {
+      // default transaction:
+      this.transactions = [
+        {
+          description: null,
+          amount: null,
+          foreign_amount: null,
+          currency_id: null, // TODO get default currency
+          currency_code: null,
+          foreign_currency_id: null,
+          foreign_currency_code: null,
+          budget_id: null,
+          category_id: null,
+          source_id: null,
+          destination_id: null,
+          tags: null,
+          piggy_bank_id: null,
+        }
+      ];
+      // default repetition:
+      this.repetitions = [
+        {
+          type: 'daily',
+          moment: '',
+          skip: null,
+          weekend: 1,
+        }
+      ];
+    },
+    recalculateRepetitions: function () {
+      let date = parseISO(this.first_date + 'T00:00:00');
+      let xthDay = this.getXth(date);
+      this.repetition_types = [
+        {
+          value: 'daily',
+          label: 'Every day',
+        },
+        {
+          value: 'monthly',
+          label: 'Every month on the ' + format(date, 'do') + ' day',
+        },
+        {
+          value: 'ndom',
+          label: 'Every month on the ' + xthDay + '-th ' + format(date, 'EEEE'),
+        },
+        {
+          value: 'yearly',
+          label: 'Every year on ' + format(date, 'd MMMM'),
+        }
+      ];
+    },
+    getXth: function (date) {
+      let expectedDay = format(date, 'EEEE');
+      let start = new Date(date);
+      let count = 0;
+      start.setDate(1);
+      const length = new Date(start.getFullYear(), start.getMonth() + 1, 0).getDate();
+      let loop = 1;
+      while ((start.getDate() <= length && date.getMonth() === start.getMonth()) || loop <= 32) {
+        loop++;
+        if (expectedDay === format(start, 'EEEE')) {
+          count++;
+        }
+        if (start.getDate() === date.getDate()) {
+          return count;
+        }
+        start.setDate(start.getDate() + 1);
+      }
+      return count;
+    },
+    collectRecurringTransaction: function () {
+      let get = new Get;
+      return get.get(this.id).then((response) => this.parseRecurringTransaction(response));
+    },
+    parseRecurringTransaction: function (response) {
+      //this.name = response.data.data.attributes.name;
+      let info = response.data.data;
+      let attributes = info.attributes;
+      this.id = parseInt(info.id);
+      this.title = attributes.title;
+      this.type = attributes.type;
+      this.first_date = attributes.first_date.substr(0, 10);
+      this.nr_of_repetitions = attributes.nr_of_repetitions;
+      this.repeat_until = attributes.repeat_until ? attributes.repeat_until.substr(0, 10) : null;
+
+      // for the time being, only parse first transaction.
+      let ft = attributes.transactions[0];
+      this.transactions[0].description = ft.description;
+      this.transactions[0].amount = ft.amount;
+      this.transactions[0].source_id = parseInt(ft.source_id);
+      this.transactions[0].destination_id = parseInt(ft.destination_id);
+
+      // for the time being, only parse first repetition
+      let fr = attributes.repetitions[0];
+      this.repetitions[0].type = fr.type;
+      this.repetitions[0].weekend = fr.weekend;
+      this.repetitions[0].skip = fr.skip;
+    },
+    // same function as Create
+    resetErrors: function () {
+      this.submissionErrors =
+        {
+          title: '',
+          type: '',
+          first_date: '',
+          nr_of_repetitions: '',
+          repeat_until: '',
+          transactions: [
+            {
+              description: '',
+              amount: '',
+              foreign_amount: '',
+              currency_id: '',
+              currency_code: '',
+              foreign_currency_id: '',
+              foreign_currency_code: '',
+              budget_id: '',
+              category_id: '',
+              source_id: '',
+              destination_id: '',
+              tags: '',
+              piggy_bank_id: '',
+            }
+          ],
+          repetitions: [
+            {
+              type: '',
+              moment: '',
+              skip: '',
+              weekend: '',
+            }
+          ],
+        };
+      this.hasSubmissionErrors = {
+        title: false,
+        type: false,
+        first_date: false,
+        nr_of_repetitions: false,
+        repeat_until: false,
+        transactions: [
+          {
+            description: false,
+            amount: false,
+            foreign_amount: false,
+            currency_id: false,
+            currency_code: false,
+            foreign_currency_id: false,
+            foreign_currency_code: false,
+            budget_id: false,
+            category_id: false,
+            source_id: false,
+            destination_id: false,
+            tags: false,
+            piggy_bank_id: false,
+          }
+        ],
+        repetitions: [
+          {
+            type: false,
+            moment: false,
+            skip: false,
+            weekend: false,
+          }
+        ],
+      };
+    },
+    submitRecurringTransaction: function () {
+      this.submitting = true;
+      this.errorMessage = '';
+
+      // reset errors:
+      this.resetErrors();
+
+      // build account array
+      const submission = this.buildRecurringTransaction();
+
+      (new Put())
+        .post(this.id, submission)
+        .catch(this.processErrors)
+        .then(this.processSuccess);
+    },
+    buildRecurringTransaction: function () {
+      let result = {
+        title: this.title,
+        type: this.type,
+        first_date: this.first_date,
+        nr_of_repetitions: this.nr_of_repetitions,
+        repeat_until: this.repeat_until,
+        transactions: this.transactions,
+        repetitions: [],
+      };
+      // repetitions: this.repetitions,
+      for (let i in this.repetitions) {
+        if (this.repetitions.hasOwnProperty(i)) {
+
+          let moment = '';
+          let date = parseISO(this.first_date + 'T00:00:00');
+          // calculate moment for this type:
+          if ('monthly' === this.repetitions[i].type) {
+            moment = date.getDate().toString();
+          }
+          if ('ndom' === this.repetitions[i].type) {
+            let xthDay = this.getXth(date);
+            moment = xthDay + ',' + format(date, 'i');
+          }
+          if ('yearly' === this.repetitions[i].type) {
+            moment = format(date, 'yyyy-MM-dd');
+          }
+
+
+          result.repetitions.push(
+            {
+              type: this.repetitions[i].type,
+              moment: moment,
+              skip: this.repetitions[i].skip,
+              weekend: this.repetitions[i].weekend,
+            }
+          );
+        }
+      }
+      return result;
+    },
+    dismissBanner: function () {
+      this.errorMessage = '';
+    },
+    processSuccess: function (response) {
+      this.$store.dispatch('fireflyiii/refreshCacheKey');
+      if (!response) {
+        return;
+      }
+      this.submitting = false;
+      let message = {
+        level: 'success',
+        text: 'Recurrence is updated',
+        show: true,
+        action: {
+          show: true,
+          text: 'Go to recurrence',
+          link: {name: 'recurring.show', params: {id: parseInt(response.data.data.id)}}
+        }
+      };
+      // store flash
+      this.$q.localStorage.set('flash', message);
+      if (this.doReturnHere) {
+        window.dispatchEvent(new CustomEvent('flash', {
+          detail: {
+            flash: this.$q.localStorage.getItem('flash')
+          }
+        }));
+      }
+      if (!this.doReturnHere) {
+        // return to previous page.
+        this.$router.go(-1);
+      }
+
+    },
+    processErrors: function (error) {
+      if (error.response) {
+        let errors = error.response.data; // => the response payload
+        this.errorMessage = errors.message;
+        for (let i in errors.errors) {
+          if (errors.errors.hasOwnProperty(i)) {
+            this.submissionErrors[i] = errors.errors[i][0];
+            this.hasSubmissionErrors[i] = true;
+          }
+        }
+      }
+      this.submitting = false;
+    },
+    // same as Create
+    getAccounts: function () {
+      return this.getPage(1);
+    },
+    getPage: function (page) {
+      return (new List).list('all', page, this.getCacheKey).then((response) => {
+        let totalPages = parseInt(response.data.meta.pagination.total_pages);
+
+        // parse these accounts:
+        for (let i in response.data.data) {
+          if (response.data.data.hasOwnProperty(i)) {
+            let account = response.data.data[i];
+            this.accounts.push(
+              {
+                value: parseInt(account.id),
+                label: account.attributes.type + ': ' + account.attributes.name,
+                decimal_places: parseInt(account.attributes.currency_decimal_places)
+              }
+            );
+          }
+        }
+
+        if (page < totalPages) {
+          return this.getPage(page + 1);
+        }
+        if (page === totalPages) {
+          this.loading = false;
+          this.accounts.sort((a, b) => (a.label > b.label) ? 1 : ((b.label > a.label) ? -1 : 0))
+        }
+      });
+    },
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/frontend/src/pages/recurring/Index.vue b/frontend/src/pages/recurring/Index.vue
new file mode 100644
index 0000000000..21de60e2f0
--- /dev/null
+++ b/frontend/src/pages/recurring/Index.vue
@@ -0,0 +1,183 @@
+<template>
+  <q-page>
+    <q-table
+      :title="$t('firefly.recurring')"
+      :rows="rows"
+      :columns="columns"
+      row-key="id"
+      @request="onRequest"
+      v-model:pagination="pagination"
+      :loading="loading"
+      class="q-ma-md"
+    >
+      <template v-slot:header="props">
+        <q-tr :props="props">
+          <q-th
+            v-for="col in props.cols"
+            :key="col.name"
+            :props="props"
+          >
+            {{ col.label }}
+          </q-th>
+        </q-tr>
+      </template>
+      <template v-slot:body="props">
+        <q-tr :props="props">
+          <q-td key="name" :props="props">
+            <router-link :to="{ name: 'recurring.show', params: {id: props.row.id} }" class="text-primary">
+              {{ props.row.name }}
+            </router-link>
+          </q-td>
+          <q-td key="menu" :props="props">
+            <q-btn-dropdown color="primary" label="Actions" size="sm">
+              <q-list>
+                <q-item clickable v-close-popup :to="{name: 'recurring.edit', params: {id: props.row.id}}">
+                  <q-item-section>
+                    <q-item-label>Edit</q-item-label>
+                  </q-item-section>
+                </q-item>
+                <q-item clickable v-close-popup @click="deleteRecurring(props.row.id, props.row.name)">
+                  <q-item-section>
+                    <q-item-label>Delete</q-item-label>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-btn-dropdown>
+          </q-td>
+        </q-tr>
+      </template>
+    </q-table>
+    <q-page-sticky position="bottom-right" :offset="[18, 18]">
+      <q-fab
+        label="Actions"
+        square
+        vertical-actions-align="right"
+        label-position="left"
+        color="green"
+        icon="fas fa-chevron-up"
+        direction="up"
+      >
+        <q-fab-action color="primary" square :to="{ name: 'recurring.create'}" icon="fas fa-exchange-alt" label="New recurring transaction"/>
+      </q-fab>
+    </q-page-sticky>
+  </q-page>
+</template>
+
+<script>
+import {mapGetters, useStore} from "vuex";
+import Destroy from "../../api/recurring/destroy";
+import List from "../../api/recurring/list";
+
+export default {
+  name: 'Index',
+  watch: {
+    $route(to) {
+      // react to route changes...
+      if ('recurring.index' === to.name) {
+        this.page = 1;
+        this.updateBreadcrumbs();
+        this.triggerUpdate();
+      }
+    }
+  },
+  data() {
+    return {
+      rows: [],
+      pagination: {
+        sortBy: 'desc',
+        descending: false,
+        page: 1,
+        rowsPerPage: 5,
+        rowsNumber: 100
+      },
+      loading: false,
+      columns: [
+        {name: 'name', label: 'Name', field: 'name', align: 'left'},
+        {name: 'menu', label: ' ', field: 'menu', align: 'right'},
+      ],
+    }
+  },
+  computed: {
+    ...mapGetters('fireflyiii', ['getRange', 'getCacheKey', 'getListPageSize']),
+  },
+  created() {
+    this.pagination.rowsPerPage = this.getListPageSize;
+  },
+  mounted() {
+    this.type = this.$route.params.type;
+    if (null === this.getRange.start || null === this.getRange.end) {
+      // subscribe, then update:
+      const $store = useStore();
+      $store.subscribe((mutation, state) => {
+        if ('fireflyiii/setRange' === mutation.type) {
+          this.range = {start: mutation.payload.start, end: mutation.payload.end};
+          this.triggerUpdate();
+        }
+      });
+    }
+    if (null !== this.getRange.start && null !== this.getRange.end) {
+      this.range = {start: this.getRange.start, end: this.getRange.end};
+      this.triggerUpdate();
+    }
+  },
+  methods: {
+    deleteRecurring: function (id, name) {
+      this.$q.dialog({
+        title: 'Confirm',
+        message: 'Do you want to delete recurring transaction "' + name + '"?',
+        cancel: true,
+        persistent: true
+      }).onOk(() => {
+        this.destroyRecurring(id);
+      });
+    },
+    destroyRecurring: function (id) {
+      let destr = new Destroy;
+      destr.destroy(id).then(() => {
+        this.$store.dispatch('fireflyiii/refreshCacheKey');
+        this.triggerUpdate();
+      });
+    },
+    updateBreadcrumbs: function () {
+      this.$route.meta.pageTitle = 'firefly.Recurring';
+      this.$route.meta.breadcrumbs = [{title: 'Recurring'}];
+
+    },
+    onRequest: function (props) {
+      this.page = props.pagination.page;
+      this.triggerUpdate();
+    },
+    triggerUpdate: function () {
+      if (this.loading) {
+        return;
+      }
+      if (null === this.range.start || null === this.range.end) {
+        return;
+      }
+      this.loading = true;
+      const list = new List();
+      this.rows = [];
+      list.list(this.page, this.getCacheKey).then(
+        (response) => {
+          this.pagination.rowsPerPage = response.data.meta.pagination.per_page;
+          this.pagination.rowsNumber = response.data.meta.pagination.total;
+          this.pagination.page = this.page;
+
+          for (let i in response.data.data) {
+            if (response.data.data.hasOwnProperty(i)) {
+              let current = response.data.data[i];
+              let account = {
+                id: current.id,
+                name: current.attributes.title,
+              };
+              this.rows.push(account);
+            }
+          }
+          this.loading = false;
+        }
+      )
+      ;
+    }
+  }
+}
+</script>
diff --git a/frontend/src/pages/recurring/Show.vue b/frontend/src/pages/recurring/Show.vue
new file mode 100644
index 0000000000..94882c960d
--- /dev/null
+++ b/frontend/src/pages/recurring/Show.vue
@@ -0,0 +1,57 @@
+<template>
+  <q-page>
+    <div class="row q-mx-md">
+      <div class="col-12">
+        <!-- Balance chart -->
+        <q-card bordered>
+          <q-card-section>
+            <div class="text-h6">{{ recurrence.title }}</div>
+          </q-card-section>
+          <q-card-section>
+            <div class="row">
+              <div class="col-12 q-mb-xs">
+                Title: {{ recurrence.title }}<br>
+              </div>
+            </div>
+          </q-card-section>
+        </q-card>
+      </div>
+    </div>
+  </q-page>
+</template>
+
+<script>
+import Get from "../../api/recurring/get";
+
+export default {
+  name: "Show",
+  data() {
+    return {
+      recurrence: {},
+      id: 0
+    }
+  },
+  created() {
+    this.id = parseInt(this.$route.params.id);
+    this.getRecurring();
+  },
+  methods: {
+    onRequest: function (payload) {
+      this.page = payload.page;
+      this.getRecurring();
+    },
+    getRecurring: function () {
+      (new Get).get(this.id).then((response) => this.parseRecurring(response));
+    },
+    parseRecurring: function (response) {
+      this.recurrence = {
+        title: response.data.data.attributes.title,
+      };
+    },
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/frontend/src/pages/reports/Default.vue b/frontend/src/pages/reports/Default.vue
new file mode 100644
index 0000000000..8b14a22a33
--- /dev/null
+++ b/frontend/src/pages/reports/Default.vue
@@ -0,0 +1,15 @@
+<template>
+<q-page>
+  Here be default report.
+</q-page>
+</template>
+
+<script>
+export default {
+  name: "Default"
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/frontend/src/pages/reports/Index.vue b/frontend/src/pages/reports/Index.vue
new file mode 100644
index 0000000000..a3ba2bf302
--- /dev/null
+++ b/frontend/src/pages/reports/Index.vue
@@ -0,0 +1,136 @@
+<template>
+  <q-page>
+    <div class="row q-mx-md">
+      <div class="col-4">
+        <q-card bordered>
+          <q-card-section>
+            <div class="text-h6">Reports</div>
+          </q-card-section>
+          <q-card-section>
+            <q-select
+              bottom-slots
+              outlined
+              v-model="type"
+              emit-value class="q-pr-xs"
+              map-options :options="types" label="Report type"/>
+
+            <q-select
+              bottom-slots
+              outlined
+              :disable="loading"
+              v-model="selectedAccounts"
+              class="q-pr-xs"
+              multiple
+              emit-value
+              use-chips
+              map-options :options="accounts" label="Included accounts"/>
+            <q-input
+              bottom-slots
+              type="date" v-model="start_date" :label="$t('form.start_date')"
+              hint="Start date"
+              outlined/>
+            <q-input
+              bottom-slots
+              type="date" v-model="end_date" :label="$t('form.start_date')"
+              hint="Start date"
+              outlined/>
+          </q-card-section>
+          <q-card-actions>
+            <q-btn :disable="loading || selectedAccounts.length < 1" @click="submit" color="primary" label="View report"/>
+          </q-card-actions>
+        </q-card>
+      </div>
+    </div>
+  </q-page>
+</template>
+
+<script>
+import List from "../../api/accounts/list";
+import {startOfMonth} from "date-fns";
+import {format} from "date-fns";
+import {endOfMonth} from "date-fns";
+export default {
+  name: 'Index',
+  created() {
+    this.getAccounts();
+    this.start_date = format(startOfMonth(new Date), 'yyyy-MM-dd');
+    this.end_date = format(endOfMonth(new Date), 'yyyy-MM-dd');
+  },
+  data() {
+    return {
+      // is loading:
+      loading: false,
+
+      // report settings
+      type: 'default',
+      selectedAccounts: [],
+      accounts: [],
+      start_date: '',
+      end_date: '',
+
+      types: [
+        {value: 'default', label: 'Default financial report'},
+        // value="audit">Transaction history overview (audit)
+        // value="budget">Budget report</option>
+        // value="category">Category report</option>
+        // value="tag">Tag report</option>
+        // value="double">Expense/revenue account report</option> // to be dropped
+      ],
+    }
+  },
+  methods: {
+    submit: function() {
+      let start = this.start_date.replace('-','');
+      let end = this.end_date.replace('-','');
+      let accounts = this.selectedAccounts.join(',');
+      if('default' === this.type) {
+        this.$router.push(
+          {name: 'reports.default',
+            params:
+              {
+                accounts: accounts,
+                start: start,
+                end: end
+              }
+          }
+          );
+      }
+    },
+    // duplicate function
+    getAccounts: function () {
+      this.loading = true;
+      this.getPage(1);
+    },
+    // duplicate function
+    getPage: function (page) {
+      (new List).list('all', page, this.getCacheKey).then((response) => {
+        let totalPages = parseInt(response.data.meta.pagination.total_pages);
+
+        // parse these accounts:
+        for (let i in response.data.data) {
+          if (response.data.data.hasOwnProperty(i)) {
+            let account = response.data.data[i];
+            if ('liabilities' === account.attributes.type || 'asset' === account.attributes.type) {
+              this.accounts.push(
+                {
+                  value: parseInt(account.id),
+                  label: account.attributes.type + ': ' + account.attributes.name,
+                  decimal_places: parseInt(account.attributes.currency_decimal_places)
+                }
+              );
+            }
+          }
+        }
+
+        if (page < totalPages) {
+          this.getPage(page + 1);
+        }
+        if (page === totalPages) {
+          this.loading = false;
+          this.accounts.sort((a, b) => (a.label > b.label) ? 1 : ((b.label > a.label) ? -1 : 0))
+        }
+      });
+    },
+  }
+}
+</script>
diff --git a/frontend/src/pages/rule-groups/Create.vue b/frontend/src/pages/rule-groups/Create.vue
new file mode 100644
index 0000000000..e0593437fb
--- /dev/null
+++ b/frontend/src/pages/rule-groups/Create.vue
@@ -0,0 +1,169 @@
+<template>
+  <q-page>
+    <div class="row q-mx-md">
+      <div class="col-12">
+        <q-banner inline-actions rounded class="bg-orange text-white" v-if="'' !== errorMessage">
+          {{ errorMessage }}
+          <template v-slot:action>
+            <q-btn flat @click="dismissBanner" label="Dismiss"/>
+          </template>
+        </q-banner>
+      </div>
+    </div>
+    <div class="row q-mx-md q-mt-md">
+      <div class="col-12">
+        <q-card bordered>
+          <q-card-section>
+            <div class="text-h6">Info for new rule group</div>
+          </q-card-section>
+          <q-card-section>
+                <q-input
+                  :error-message="submissionErrors.title"
+                  :error="hasSubmissionErrors.title"
+                  bottom-slots :disable="disabledInput" type="text" clearable v-model="title" :label="$t('form.title')"
+                  outlined/>
+          </q-card-section>
+        </q-card>
+      </div>
+    </div>
+
+    <div class="row q-mx-md">
+      <div class="col-12">
+        <q-card class="q-mt-xs">
+          <q-card-section>
+            <div class="row">
+              <div class="col-12 text-right">
+                <q-btn :disable="disabledInput" color="primary" label="Submit" @click="submitRuleGroup"/>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-12 text-right">
+                <q-checkbox :disable="disabledInput" v-model="doReturnHere" left-label
+                            label="Return here to create another one"/>
+                <br/>
+                <q-checkbox v-model="doResetForm" left-label :disable="!doReturnHere || disabledInput"
+                            label="Reset form after submission"/>
+              </div>
+            </div>
+          </q-card-section>
+        </q-card>
+      </div>
+    </div>
+
+  </q-page>
+</template>
+
+<script>
+import Post from "../../api/rule-groups/post";
+import {mapGetters} from "vuex";
+import {getCacheKey} from "../../store/fireflyiii/getters";
+
+export default {
+  name: 'Create',
+  data() {
+    return {
+      submissionErrors: {},
+      hasSubmissionErrors: {},
+      submitting: false,
+      doReturnHere: false,
+      doResetForm: false,
+      errorMessage: '',
+
+      // rule group fields:
+      title: '',
+    }
+  },
+  computed: {
+    ...mapGetters('fireflyiii', ['getCacheKey']),
+    disabledInput: function () {
+      return this.submitting;
+    }
+  },
+  created() {
+    this.resetForm();
+  },
+  methods: {
+    resetForm: function () {
+      this.title = '';
+      this.resetErrors();
+
+    },
+    resetErrors: function () {
+      this.submissionErrors =
+        {
+          title: '',
+        };
+      this.hasSubmissionErrors = {
+        title: false,
+      };
+    },
+    submitRuleGroup: function () {
+      this.submitting = true;
+      this.errorMessage = '';
+
+      // reset errors:
+      this.resetErrors();
+
+      // build category array
+      const submission = this.buildRuleGroup();
+
+      (new Post())
+        .post(submission)
+        .catch(this.processErrors)
+        .then(this.processSuccess);
+    },
+    buildRuleGroup: function () {
+      return {
+        title: this.title,
+      };
+    },
+    dismissBanner: function () {
+      this.errorMessage = '';
+    },
+    processSuccess: function (response) {
+      if (!response) {
+        return;
+      }
+      this.submitting = false;
+      let message = {
+        level: 'success',
+        text: 'I am new rule group',
+        show: true,
+        action: {
+          show: true,
+          text: 'Go to piggy',
+          link: {name: 'rule-groups.show', params: {id: parseInt(response.data.data.id)}}
+        }
+      };
+      // store flash
+      this.$q.localStorage.set('flash', message);
+      if (this.doReturnHere) {
+        window.dispatchEvent(new CustomEvent('flash', {
+          detail: {
+            flash: this.$q.localStorage.getItem('flash')
+          }
+        }));
+      }
+      if (!this.doReturnHere) {
+        // return to previous page.
+        this.$router.go(-1);
+      }
+
+    },
+    processErrors: function (error) {
+      if (error.response) {
+        let errors = error.response.data; // => the response payload
+        this.errorMessage = errors.message;
+        console.log(errors);
+        for (let i in errors.errors) {
+          if (errors.errors.hasOwnProperty(i)) {
+            this.submissionErrors[i] = errors.errors[i][0];
+            this.hasSubmissionErrors[i] = true;
+          }
+        }
+      }
+      this.submitting = false;
+    },
+  }
+}
+</script>
diff --git a/frontend/src/pages/rule-groups/Edit.vue b/frontend/src/pages/rule-groups/Edit.vue
new file mode 100644
index 0000000000..faf44d81c2
--- /dev/null
+++ b/frontend/src/pages/rule-groups/Edit.vue
@@ -0,0 +1,176 @@
+<template>
+  <q-page>
+    <div class="row q-mx-md">
+      <div class="col-12">
+        <q-banner inline-actions rounded class="bg-orange text-white" v-if="'' !== errorMessage">
+          {{ errorMessage }}
+          <template v-slot:action>
+            <q-btn flat @click="dismissBanner" label="Dismiss"/>
+          </template>
+        </q-banner>
+      </div>
+    </div>
+    <div class="row q-mx-md q-mt-md">
+      <div class="col-12">
+        <q-card bordered>
+          <q-card-section>
+            <div class="text-h6">Edit rule group</div>
+          </q-card-section>
+          <q-card-section>
+            <div class="row">
+              <div class="col-12 q-mb-xs">
+                <q-input
+                  :error-message="submissionErrors.title"
+                  :error="hasSubmissionErrors.title"
+                  bottom-slots :disable="disabledInput" type="text" clearable v-model="title" :label="$t('form.title')"
+                  outlined/>
+              </div>
+            </div>
+          </q-card-section>
+        </q-card>
+      </div>
+    </div>
+
+    <div class="row q-mx-md">
+      <div class="col-12">
+        <q-card class="q-mt-xs">
+          <q-card-section>
+            <div class="row">
+              <div class="col-12 text-right">
+                <q-btn :disable="disabledInput" color="primary" label="Update" @click="submitRuleGroup"/>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-12 text-right">
+                <q-checkbox :disable="disabledInput" v-model="doReturnHere" left-label label="Return here"/>
+              </div>
+            </div>
+          </q-card-section>
+        </q-card>
+      </div>
+    </div>
+
+  </q-page>
+</template>
+
+<script>
+import Get from "../../api/rule-groups/get";
+import Put from "../../api/rule-groups/put";
+
+export default {
+  name: "Edit",
+  data() {
+    return {
+      submissionErrors: {},
+      hasSubmissionErrors: {},
+      submitting: false,
+      doReturnHere: false,
+      doResetForm: false,
+      errorMessage: '',
+
+      // rule group fields:
+      id: 0,
+      title: '',
+    }
+  },
+  computed: {
+    disabledInput: function () {
+      return this.submitting;
+    }
+  },
+  created() {
+    this.id = parseInt(this.$route.params.id);
+    this.collectRuleGroup();
+  },
+  methods: {
+    collectRuleGroup: function() {
+      let get = new Get;
+      get.get(this.id).then((response) => this.parseRuleGroup(response));
+    },
+    parseRuleGroup: function(response) {
+      this.title = response.data.data.attributes.title;
+    },
+    resetErrors: function () {
+      this.submissionErrors =
+        {
+          title: '',
+        };
+      this.hasSubmissionErrors = {
+        title: false,
+      };
+    },
+    submitRuleGroup: function () {
+      this.submitting = true;
+      this.errorMessage = '';
+
+      // reset errors:
+      this.resetErrors();
+
+      // build account array
+      const submission = this.buildRuleGroup();
+
+      (new Put())
+        .post(this.id, submission)
+        .catch(this.processErrors)
+        .then(this.processSuccess);
+    },
+    buildRuleGroup: function () {
+      return {
+        title: this.title,
+      };
+    },
+    dismissBanner: function () {
+      this.errorMessage = '';
+    },
+    processSuccess: function (response) {
+      this.$store.dispatch('fireflyiii/refreshCacheKey');
+      if (!response) {
+        return;
+      }
+      this.submitting = false;
+      let message = {
+        level: 'success',
+        text: 'Rule group is is updated',
+        show: true,
+        action: {
+          show: true,
+          text: 'Go to rule group', // todo
+          link: {name: 'rule.index'}
+        }
+      };
+      // store flash
+      this.$q.localStorage.set('flash', message);
+      if (this.doReturnHere) {
+        window.dispatchEvent(new CustomEvent('flash', {
+          detail: {
+            flash: this.$q.localStorage.getItem('flash')
+          }
+        }));
+      }
+      if (!this.doReturnHere) {
+        // return to previous page.
+        this.$router.go(-1);
+      }
+
+    },
+    processErrors: function (error) {
+      if (error.response) {
+        let errors = error.response.data; // => the response payload
+        this.errorMessage = errors.message;
+        console.log(errors);
+        for (let i in errors.errors) {
+          if (errors.errors.hasOwnProperty(i)) {
+            this.submissionErrors[i] = errors.errors[i][0];
+            this.hasSubmissionErrors[i] = true;
+          }
+        }
+      }
+      this.submitting = false;
+    },
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/frontend/src/pages/rules/Create.vue b/frontend/src/pages/rules/Create.vue
new file mode 100644
index 0000000000..627e1b0bfa
--- /dev/null
+++ b/frontend/src/pages/rules/Create.vue
@@ -0,0 +1,573 @@
+<template>
+  <q-page>
+    <div class="row q-mx-md">
+      <div class="col-12">
+        <q-banner inline-actions rounded class="bg-orange text-white" v-if="'' !== errorMessage">
+          {{ errorMessage }}
+          <template v-slot:action>
+            <q-btn flat @click="dismissBanner" label="Dismiss"/>
+          </template>
+        </q-banner>
+      </div>
+    </div>
+    <div class="row q-mx-md q-mt-md">
+      <div class="col-12">
+        <q-card bordered>
+          <q-card-section>
+            <div class="text-h6">Info for new rule</div>
+          </q-card-section>
+          <q-card-section>
+            <q-input
+              :error-message="submissionErrors.title"
+              :error="hasSubmissionErrors.title"
+              bottom-slots :disable="disabledInput" type="text" clearable v-model="title" :label="$t('form.title')"
+              outlined/>
+
+            <q-select
+              :error-message="submissionErrors.rule_group_id"
+              :error="hasSubmissionErrors.rule_group_id"
+              bottom-slots
+              :disable="disabledInput"
+              outlined
+              dense
+              v-model="rule_group_id"
+              class="q-pr-xs"
+              map-options :options="ruleGroups" label="Rule group"/>
+
+            <q-select
+              :error-message="submissionErrors.trigger"
+              :error="hasSubmissionErrors.trigger"
+              bottom-slots
+              :disable="disabledInput"
+              outlined
+              dense
+              emit-value
+              v-model="trigger"
+              class="q-pr-xs"
+              map-options :options="initialTriggers" label="What fires a rule?"/>
+          </q-card-section>
+        </q-card>
+      </div>
+    </div>
+
+    <div class="row q-mx-md q-mt-md">
+      <div class="col-12">
+        <q-card bordered>
+          <q-card-section>
+            <div class="text-h6">Triggers</div>
+          </q-card-section>
+          <q-card-section>
+            <div class="row">
+              <div class="col">
+                <strong>Trigger</strong>
+              </div>
+              <div class="col">
+                <strong>Trigger on value</strong>
+              </div>
+              <div class="col">
+                <strong>Active?</strong>
+              </div>
+              <div class="col">
+                <strong>Stop processing after a hit</strong>
+              </div>
+              <div class="col">
+                del
+              </div>
+            </div>
+            <div v-for="(trigger, index) in triggers" class="row" :key="index">
+              <div class="col">
+                <q-select
+                  :error-message="submissionErrors.triggers[index].type"
+                  :error="hasSubmissionErrors.triggers[index].type"
+                  bottom-slots
+                  :disable="disabledInput"
+                  outlined
+                  dense
+                  v-model="trigger.type"
+                  class="q-pr-xs"
+                  map-options :options="availableTriggers" label="Trigger type"/>
+
+              </div>
+              <div class="col">
+                <q-input
+                  :error-message="submissionErrors.triggers[index].value"
+                  :error="hasSubmissionErrors.triggers[index].value"
+                  bottom-slots
+                  dense
+                  :disable="disabledInput"
+                  v-if="trigger.type.needs_context"
+                  type="text" clearable v-model="trigger.value" label="Trigger value"
+                  outlined/>
+              </div>
+              <div class="col">
+                <q-checkbox v-model="trigger.active"/>
+              </div>
+              <div class="col">
+                <q-checkbox v-model="trigger.stop_processing"/>
+              </div>
+              <div class="col">
+                <q-btn color="secondary" @click="removeTrigger(index)">Del</q-btn>
+              </div>
+            </div>
+          </q-card-section>
+          <q-card-actions>
+            <q-btn color="primary" @click="addTrigger">Add trigger</q-btn>
+          </q-card-actions>
+        </q-card>
+      </div>
+    </div>
+
+    <div class="row q-mx-md q-mt-md">
+      <div class="col-12">
+        <q-card bordered>
+          <q-card-section>
+            <div class="text-h6">Actions</div>
+          </q-card-section>
+          <q-card-section>
+            <div class="row">
+              <div class="col">
+                <strong>Action</strong>
+              </div>
+              <div class="col">
+                <strong>Value</strong>
+              </div>
+              <div class="col">
+                <strong>Active?</strong>
+              </div>
+              <div class="col">
+                <strong>Stop processing other actions</strong>
+              </div>
+              <div class="col">
+                del
+              </div>
+            </div>
+            <div v-for="(action, index) in actions" class="row" :key="index">
+              <div class="col">
+                <q-select
+                  :error-message="submissionErrors.actions[index].type"
+                  :error="hasSubmissionErrors.actions[index].type"
+                  bottom-slots
+                  :disable="disabledInput"
+                  outlined
+                  dense
+                  v-model="action.type"
+                  class="q-pr-xs"
+                  map-options :options="availableActions" label="Action type"/>
+
+              </div>
+              <div class="col">
+                <q-input
+                  :error-message="submissionErrors.actions[index].value"
+                  :error="hasSubmissionErrors.actions[index].value"
+                  bottom-slots
+                  dense
+                  :disable="disabledInput"
+                  v-if="action.type.needs_context"
+                  type="text" clearable v-model="action.value" label="Action value"
+                  outlined/>
+              </div>
+              <div class="col">
+                <q-checkbox v-model="action.active"/>
+              </div>
+              <div class="col">
+                <q-checkbox v-model="action.stop_processing"/>
+              </div>
+              <div class="col">
+                <q-btn color="secondary" @click="removeAction(index)">Del</q-btn>
+              </div>
+            </div>
+          </q-card-section>
+          <q-card-actions>
+            <q-btn color="primary" @click="addAction">Add action</q-btn>
+          </q-card-actions>
+        </q-card>
+      </div>
+    </div>
+
+    <div class="row q-mx-md">
+      <div class="col-12">
+        <q-card class="q-mt-xs">
+          <q-card-section>
+            <div class="row">
+              <div class="col-12 text-right">
+                <q-btn :disable="disabledInput" color="primary" label="Submit" @click="submitRule"/>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-12 text-right">
+                <q-checkbox :disable="disabledInput" v-model="doReturnHere" left-label
+                            label="Return here to create another one"/>
+                <br/>
+                <q-checkbox v-model="doResetForm" left-label :disable="!doReturnHere || disabledInput"
+                            label="Reset form after submission"/>
+              </div>
+            </div>
+          </q-card-section>
+        </q-card>
+      </div>
+    </div>
+
+  </q-page>
+</template>
+
+<script>
+import Post from "../../api/rules/post";
+import {mapGetters} from "vuex";
+import {getCacheKey} from "../../store/fireflyiii/getters";
+import Configuration from "../../api/system/configuration";
+import List from "../../api/rule-groups/list";
+
+export default {
+  name: 'Create',
+  data() {
+    return {
+      submissionErrors: {
+        triggers: [],
+        actions: [],
+      },
+      hasSubmissionErrors: {
+        triggers: [],
+        actions: []
+      },
+      submitting: false,
+      doReturnHere: false,
+      doResetForm: false,
+      errorMessage: '',
+
+      // rule settings things:
+      ruleGroups: [],
+      availableTriggers: [],
+      availableActions: [],
+      initialTriggers: [],
+
+      // rule group fields:
+      title: '',
+      rule_group_id: null,
+      trigger: 'store-journal',
+
+      triggers: [],
+      actions: []
+    }
+  },
+  computed: {
+    ...mapGetters('fireflyiii', ['getCacheKey']),
+    disabledInput: function () {
+      return this.submitting;
+    }
+  },
+  created() {
+    this.resetForm();
+    this.getRuleGroups();
+    this.getRuleTriggers();
+    this.getRuleActions();
+  },
+  methods: {
+    addTrigger: function () {
+      this.triggers.push(
+        this.getDefaultTrigger()
+      );
+      this.submissionErrors.triggers.push(
+        this.getDefaultTriggerError()
+      );
+      this.hasSubmissionErrors.triggers.push(
+        this.getDefaultHasTriggerError()
+      );
+    },
+    addAction: function () {
+      this.actions.push(
+        this.getDefaultAction()
+      );
+      this.submissionErrors.actions.push(
+        this.getDefaultActionError()
+      );
+      this.hasSubmissionErrors.actions.push(
+        this.getDefaultHasActionError()
+      );
+    },
+    getDefaultTriggerError: function () {
+      return {
+        type: '',
+        value: '',
+        stop_processing: '',
+        active: '',
+      };
+    },
+    getDefaultActionError: function () {
+      return {
+        type: '',
+        value: '',
+        stop_processing: '',
+        active: '',
+      };
+    },
+    getDefaultHasTriggerError: function () {
+      return {
+        type: false,
+        value: false,
+        stop_processing: false,
+        active: false,
+      };
+    },
+    getDefaultHasActionError: function () {
+      return {
+        type: false,
+        value: false,
+        stop_processing: false,
+        active: false,
+      };
+    },
+
+    removeTrigger: function (index) {
+      this.triggers.splice(index, 1);
+      this.submissionErrors.triggers.splice(index, 1);
+      this.hasSubmissionErrors.triggers.splice(index, 1);
+    },
+    removeAction: function (index) {
+      this.actions.splice(index, 1);
+      this.submissionErrors.actions.splice(index, 1);
+      this.hasSubmissionErrors.actions.splice(index, 1);
+    },
+    getDefaultTrigger: function () {
+      return {
+        type: {
+          value: 'description_is',
+          needs_context: true,
+          label: this.$t('firefly.rule_trigger_description_is_choice')
+        },
+        value: '',
+        stop_processing: false,
+        active: true
+      };
+    },
+    getDefaultAction: function () {
+      return {
+        type: {
+          value: 'add_tag',
+          needs_context: true,
+          label: this.$t('firefly.rule_action_add_tag_choice')
+        },
+        value: '',
+        stop_processing: false,
+        active: true
+      };
+    },
+    getRuleTriggers: function () {
+      let config = new Configuration;
+      config.get('firefly.search.operators').then((response) => {
+        for (let i in response.data.data.value) {
+          if (response.data.data.value.hasOwnProperty(i)) {
+            let trigger = response.data.data.value[i];
+            if (false === trigger.alias && i !== 'user_action') {
+              this.availableTriggers.push(
+                {
+                  value: i,
+                  needs_context: trigger.needs_context,
+                  label: this.$t('firefly.rule_trigger_' + i + '_choice')
+                }
+              );
+            }
+          }
+        }
+      });
+    },
+    getRuleActions: function () {
+      let config = new Configuration;
+      config.get('firefly.rule-actions').then((response) => {
+        for (let i in response.data.data.value) {
+          if (response.data.data.value.hasOwnProperty(i)) {
+            this.availableActions.push(
+              {
+                value: i,
+                needs_context: false,
+                label: this.$t('firefly.rule_action_' + i + '_choice')
+              }
+            );
+          }
+        }
+      }).then(() => {
+        // get actions that require context:
+        config.get('firefly.context-rule-actions').then((response) => {
+          let contextActions = response.data.data.value;
+          for (let i in contextActions) {
+            let current = contextActions[i];
+            // find it in availableActions and set to true:
+            for (let ii in this.availableActions) {
+              let action = this.availableActions[ii];
+              if (action.value === current) {
+                this.availableActions[ii].needs_context = true;
+              }
+            }
+          }
+        });
+      });
+    },
+    resetForm: function () {
+
+      this.initialTriggers = [
+        {
+          value: 'store-journal',
+          label: 'When a transaction is stored'
+        },
+        {
+          value: 'update-journal',
+          label: 'When a transaction is updated'
+        },
+      ]
+
+      this.title = '';
+      this.rule_group_id = null;
+      this.trigger = 'store-journal';
+      // add new (single) trigger:
+      this.triggers.push(this.getDefaultTrigger());
+      this.actions.push(this.getDefaultAction());
+
+      this.resetErrors();
+
+    },
+    getRuleGroups: function () {
+      this.getGroupPage(1);
+    },
+    getGroupPage: function (page) {
+      let list = new List();
+      list.list(page, this.getCacheKey).then((response) => {
+        if (page < parseInt(response.data.meta.pagination.total_pages)) {
+          this.getGroupPage(page + 1);
+        }
+        let groups = response.data.data;
+        for (let i in groups) {
+          if (groups.hasOwnProperty(i)) {
+            let group = groups[i];
+            this.ruleGroups.push(
+              {
+                value: parseInt(group.id),
+                label: group.attributes.title,
+              }
+            )
+          }
+        }
+      });
+    },
+    resetErrors: function () {
+      this.submissionErrors =
+        {
+          title: '',
+          rule_group_id: '',
+          triggers: [this.getDefaultTriggerError()],
+          actions: [this.getDefaultActionError()],
+        };
+      this.hasSubmissionErrors = {
+        title: false,
+        rule_group_id: false,
+        triggers: [this.getDefaultHasTriggerError()],
+        actions: [this.getDefaultHasActionError()],
+      };
+    },
+    submitRule: function () {
+      this.submitting = true;
+      this.errorMessage = '';
+
+      // reset errors:
+      this.resetErrors();
+
+      // build category array
+      const submission = this.buildRule();
+
+      (new Post())
+        .post(submission)
+        .catch(this.processErrors)
+        .then(this.processSuccess);
+    },
+    buildRule: function () {
+      let rule = {
+        title: this.title,
+        rule_group_id: this.rule_group_id,
+        trigger: this.trigger,
+        triggers: [],
+        actions: [],
+      };
+      for (let i in this.triggers) {
+        // todo leaves room for filtering.
+        rule.triggers.push(
+          {
+            type: this.triggers[i].type.value,
+            value: this.triggers[i].value,
+            stop_processing: this.triggers[i].stop_processing,
+            active: this.triggers[i].active,
+          }
+        );
+      }
+      for (let i in this.actions) {
+        let action = this.actions[i];
+        console.log(action);
+        rule.actions.push(
+          {
+            type: this.actions[i].type.value,
+            value: this.actions[i].value,
+            stop_processing: this.actions[i].stop_processing,
+            active: this.actions[i].active,
+          }
+        );
+      }
+      return rule;
+    },
+    dismissBanner: function () {
+      this.errorMessage = '';
+    },
+    processSuccess: function (response) {
+      if (!response) {
+        return;
+      }
+      this.submitting = false;
+      let message = {
+        level: 'success',
+        text: 'I am new rule',
+        show: true,
+        action: {
+          show: true,
+          text: 'Go to piggy',
+          link: {name: 'rules.show', params: {id: parseInt(response.data.data.id)}}
+        }
+      };
+      // store flash
+      this.$q.localStorage.set('flash', message);
+      if (this.doReturnHere) {
+        window.dispatchEvent(new CustomEvent('flash', {
+          detail: {
+            flash: this.$q.localStorage.getItem('flash')
+          }
+        }));
+      }
+      if (!this.doReturnHere) {
+        // return to previous page.
+        this.$router.go(-1);
+      }
+
+    },
+    processErrors: function (error) {
+      if (error.response) {
+        let errors = error.response.data; // => the response payload
+        this.errorMessage = errors.message;
+        for (let i in errors.errors) {
+          if (errors.errors.hasOwnProperty(i)) {
+            let errorKey = i;
+            if (errorKey.includes('.')) {
+              // it's a split
+              let parts = errorKey.split('.');
+              let series = parts[0];
+              let errorIndex = parseInt(parts[1]);
+              let errorField = parts[2];
+              this.submissionErrors[series][errorIndex][errorField] = errors.errors[i][0]
+              this.hasSubmissionErrors[series][errorIndex][errorField] = true;
+            }
+            if (!errorKey.includes('.')) {
+              this.submissionErrors[i] = errors.errors[i][0];
+              this.hasSubmissionErrors[i] = true;
+            }
+          }
+        }
+      }
+      this.submitting = false;
+    },
+  }
+}
+</script>
diff --git a/frontend/src/pages/rules/Edit.vue b/frontend/src/pages/rules/Edit.vue
new file mode 100644
index 0000000000..8b473c6141
--- /dev/null
+++ b/frontend/src/pages/rules/Edit.vue
@@ -0,0 +1,176 @@
+<template>
+  <q-page>
+    <div class="row q-mx-md">
+      <div class="col-12">
+        <q-banner inline-actions rounded class="bg-orange text-white" v-if="'' !== errorMessage">
+          {{ errorMessage }}
+          <template v-slot:action>
+            <q-btn flat @click="dismissBanner" label="Dismiss"/>
+          </template>
+        </q-banner>
+      </div>
+    </div>
+    <div class="row q-mx-md q-mt-md">
+      <div class="col-12">
+        <q-card bordered>
+          <q-card-section>
+            <div class="text-h6">Edit rule</div>
+          </q-card-section>
+          <q-card-section>
+            <div class="row">
+              <div class="col-12 q-mb-xs">
+                <q-input
+                  :error-message="submissionErrors.title"
+                  :error="hasSubmissionErrors.title"
+                  bottom-slots :disable="disabledInput" type="text" clearable v-model="title" :label="$t('form.title')"
+                  outlined/>
+              </div>
+            </div>
+          </q-card-section>
+        </q-card>
+      </div>
+    </div>
+
+    <div class="row q-mx-md">
+      <div class="col-12">
+        <q-card class="q-mt-xs">
+          <q-card-section>
+            <div class="row">
+              <div class="col-12 text-right">
+                <q-btn :disable="disabledInput" color="primary" label="Update" @click="submitRule"/>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-12 text-right">
+                <q-checkbox :disable="disabledInput" v-model="doReturnHere" left-label label="Return here"/>
+              </div>
+            </div>
+          </q-card-section>
+        </q-card>
+      </div>
+    </div>
+
+  </q-page>
+</template>
+
+<script>
+import Get from "../../api/rules/get";
+import Put from "../../api/rules/put";
+
+export default {
+  name: "Edit",
+  data() {
+    return {
+      submissionErrors: {},
+      hasSubmissionErrors: {},
+      submitting: false,
+      doReturnHere: false,
+      doResetForm: false,
+      errorMessage: '',
+
+      // rule fields:
+      id: 0,
+      title: '',
+    }
+  },
+  computed: {
+    disabledInput: function () {
+      return this.submitting;
+    }
+  },
+  created() {
+    this.id = parseInt(this.$route.params.id);
+    this.collectRule();
+  },
+  methods: {
+    collectRule: function() {
+      let get = new Get;
+      get.get(this.id).then((response) => this.parseRule(response));
+    },
+    parseRule: function(response) {
+      this.title = response.data.data.attributes.title;
+    },
+    resetErrors: function () {
+      this.submissionErrors =
+        {
+          title: '',
+        };
+      this.hasSubmissionErrors = {
+        title: false,
+      };
+    },
+    submitRule: function () {
+      this.submitting = true;
+      this.errorMessage = '';
+
+      // reset errors:
+      this.resetErrors();
+
+      // build account array
+      const submission = this.buildRule();
+
+      (new Put())
+        .post(this.id, submission)
+        .catch(this.processErrors)
+        .then(this.processSuccess);
+    },
+    buildRule: function () {
+      return {
+        title: this.title,
+      };
+    },
+    dismissBanner: function () {
+      this.errorMessage = '';
+    },
+    processSuccess: function (response) {
+      this.$store.dispatch('fireflyiii/refreshCacheKey');
+      if (!response) {
+        return;
+      }
+      this.submitting = false;
+      let message = {
+        level: 'success',
+        text: 'Rule is updated',
+        show: true,
+        action: {
+          show: true,
+          text: 'Go to rule',
+          link: {name: 'rules.show', params: {id: parseInt(response.data.data.id)}}
+        }
+      };
+      // store flash
+      this.$q.localStorage.set('flash', message);
+      if (this.doReturnHere) {
+        window.dispatchEvent(new CustomEvent('flash', {
+          detail: {
+            flash: this.$q.localStorage.getItem('flash')
+          }
+        }));
+      }
+      if (!this.doReturnHere) {
+        // return to previous page.
+        this.$router.go(-1);
+      }
+
+    },
+    processErrors: function (error) {
+      if (error.response) {
+        let errors = error.response.data; // => the response payload
+        this.errorMessage = errors.message;
+        console.log(errors);
+        for (let i in errors.errors) {
+          if (errors.errors.hasOwnProperty(i)) {
+            this.submissionErrors[i] = errors.errors[i][0];
+            this.hasSubmissionErrors[i] = true;
+          }
+        }
+      }
+      this.submitting = false;
+    },
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/frontend/src/pages/rules/Index.vue b/frontend/src/pages/rules/Index.vue
new file mode 100644
index 0000000000..ef12170050
--- /dev/null
+++ b/frontend/src/pages/rules/Index.vue
@@ -0,0 +1,212 @@
+<template>
+  <q-page>
+    <q-card v-for="ruleGroup in ruleGroups" class="q-ma-md">
+        <q-table
+          :title="ruleGroup.title"
+          :rows="ruleGroup.rules"
+          :columns="columns"
+          row-key="id"
+          :pagination="pagination"
+          :dense="$q.screen.lt.md"
+          :loading="ruleGroup.loading"
+
+        >
+          <template v-slot:header="props">
+            <q-tr :props="props">
+              <q-th
+                v-for="col in props.cols"
+                :key="col.name"
+                :props="props"
+              >
+                {{ col.label }}
+              </q-th>
+            </q-tr>
+          </template>
+          <template v-slot:body="props">
+            <q-tr :props="props">
+              <q-td key="name" :props="props">
+                <router-link :to="{ name: 'rules.show', params: {id: props.row.id} }" class="text-primary">
+                  {{ props.row.title }}
+                </router-link>
+              </q-td>
+              <q-td key="menu" :props="props">
+                <q-btn-dropdown color="primary" label="Actions" size="sm">
+                  <q-list>
+                    <q-item clickable v-close-popup :to="{name: 'rules.edit', params: {id: props.row.id}}">
+                      <q-item-section>
+                        <q-item-label>Edit</q-item-label>
+                      </q-item-section>
+                    </q-item>
+                    <q-item clickable v-close-popup @click="deleteRule(props.row.id, props.row.title)">
+                      <q-item-section>
+                        <q-item-label>Delete</q-item-label>
+                      </q-item-section>
+                    </q-item>
+                  </q-list>
+                </q-btn-dropdown>
+              </q-td>
+            </q-tr>
+          </template>
+        </q-table>
+      <q-card-actions>
+        <q-btn-group>
+          <q-btn size="sm" :to="{name: 'rule-groups.edit', params: {id: ruleGroup.id}}" color="primary">Edit group
+          </q-btn>
+          <q-btn size="sm" color="primary" @click="deleteRuleGroup(ruleGroup.id, ruleGroup.title)">Delete group
+          </q-btn>
+        </q-btn-group>
+      </q-card-actions>
+    </q-card>
+
+    <q-page-sticky position="bottom-right" :offset="[18, 18]">
+      <q-fab
+        label="Actions"
+        square
+        vertical-actions-align="right"
+        label-position="left"
+        color="green"
+        icon="fas fa-chevron-up"
+        direction="up"
+      >
+        <q-fab-action color="primary" square :to="{ name: 'rule-groups.create'}" icon="fas fa-exchange-alt"
+                      label="New rule group"/>
+        <q-fab-action color="primary" square :to="{ name: 'rules.create'}" icon="fas fa-exchange-alt" label="New rule"/>
+      </q-fab>
+    </q-page-sticky>
+  </q-page>
+</template>
+
+<script>
+import {mapGetters} from "vuex";
+import List from "../../api/rule-groups/list";
+import Get from "../../api/rule-groups/get";
+import Destroy from "../../api/rule-groups/destroy";
+import DestroyRule from "../../api/rules/destroy";
+
+export default {
+  name: 'Index',
+  watch: {
+    $route(to) {
+      // react to route changes...
+      if ('rules.index' === to.name) {
+        this.triggerUpdate();
+      }
+    }
+  },
+  mounted() {
+    this.triggerUpdate();
+  },
+  data() {
+    return {
+      pagination: {
+        page: 1,
+        rowsPerPage: 0
+      },
+      columns: [
+        {name: 'name', label: 'Name', field: 'name', align: 'left'},
+        {name: 'menu', label: ' ', field: 'menu', align: 'right'},
+      ],
+      ruleGroups: {},
+    }
+  },
+  computed: {
+    ...mapGetters('fireflyiii', ['getRange', 'getCacheKey']),
+  },
+  methods: {
+    triggerUpdate: function () {
+      if (this.loading) {
+        return;
+      }
+      this.loading = true;
+      this.ruleGroups = {};
+      this.getPage(1);
+    },
+    deleteRule: function (id, title) {
+      this.$q.dialog({
+        title: 'Confirm',
+        message: 'Do you want to delete rule "' + title + '"?',
+        cancel: true,
+        persistent: true
+      }).onOk(() => {
+        this.destroyRule(id);
+      });
+    },
+    deleteRuleGroup: function (id, title) {
+      this.$q.dialog({
+        title: 'Confirm',
+        message: 'Do you want to delete rule group "' + title + '"?',
+        cancel: true,
+        persistent: true
+      }).onOk(() => {
+        this.destroyRuleGroup(id);
+      });
+    },
+    destroyRuleGroup: function (id) {
+      let destr = new Destroy;
+      destr.destroy(id).then(() => {
+        this.$store.dispatch('fireflyiii/refreshCacheKey');
+        this.triggerUpdate();
+      });
+    },
+    destroyRule: function (id) {
+      let destr = new DestroyRule;
+      destr.destroy(id).then(() => {
+        this.$store.dispatch('fireflyiii/refreshCacheKey');
+        this.triggerUpdate();
+      });
+    },
+    getPage: function (page) {
+      const list = new List();
+      this.rows = [];
+      list.list(page, this.getCacheKey).then(
+        (response) => {
+          if (page < parseInt(response.data.meta.pagination.total_pages)) {
+            this.getPage(page + 1);
+          }
+          for (let i in response.data.data) {
+            if (response.data.data.hasOwnProperty(i)) {
+              let current = response.data.data[i];
+              let identifier = parseInt(current.id);
+              this.ruleGroups[identifier] = {
+                id: identifier,
+                title: current.attributes.title,
+                rules: [],
+                loading: true
+              };
+              this.getRules(identifier, 1);
+            }
+          }
+          if (page === parseInt(response.data.meta.pagination.total_pages)) {
+            this.loading = false;
+          }
+        }
+      );
+    },
+    getRules: function (identifier, page) {
+      const get = new Get;
+      this.rows = [];
+      get.rules(identifier, page, this.getCacheKey).then(
+        (response) => {
+          if (page < parseInt(response.data.meta.pagination.total_pages)) {
+            this.getRules(identifier, page + 1);
+          }
+          for (let i in response.data.data) {
+            if (response.data.data.hasOwnProperty(i)) {
+              let current = response.data.data[i];
+              let ruleId = parseInt(current.id);
+              let rule = {
+                id: ruleId,
+                title: current.attributes.title,
+              };
+              this.ruleGroups[identifier].rules.push(rule);
+            }
+          }
+          if (page === parseInt(response.data.meta.pagination.total_pages)) {
+            this.ruleGroups[identifier].loading = false;
+          }
+        }
+      );
+    },
+  }
+}
+</script>
diff --git a/frontend/src/pages/rules/Show.vue b/frontend/src/pages/rules/Show.vue
new file mode 100644
index 0000000000..7a861d5148
--- /dev/null
+++ b/frontend/src/pages/rules/Show.vue
@@ -0,0 +1,57 @@
+<template>
+  <q-page>
+    <div class="row q-mx-md">
+      <div class="col-12">
+        <!-- Balance chart -->
+        <q-card bordered>
+          <q-card-section>
+            <div class="text-h6">{{ rule.title }}</div>
+          </q-card-section>
+          <q-card-section>
+            <div class="row">
+              <div class="col-12 q-mb-xs">
+                Rule: {{ rule.title }}<br>
+              </div>
+            </div>
+          </q-card-section>
+        </q-card>
+      </div>
+    </div>
+  </q-page>
+</template>
+
+<script>
+import Get from "../../api/rules/get";
+
+export default {
+  name: "Show",
+  data() {
+    return {
+      rule: {},
+      id: 0
+    }
+  },
+  created() {
+    this.id = parseInt(this.$route.params.id);
+    this.getRule();
+  },
+  methods: {
+    onRequest: function (payload) {
+      this.page = payload.page;
+      this.getRule();
+    },
+    getRule: function () {
+      (new Get).get(this.id).then((response) => this.parseRule(response));
+    },
+    parseRule: function (response) {
+      this.rule = {
+        title: response.data.data.attributes.title,
+      };
+    },
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/frontend/src/pages/subscriptions/Create.vue b/frontend/src/pages/subscriptions/Create.vue
new file mode 100644
index 0000000000..6c19091120
--- /dev/null
+++ b/frontend/src/pages/subscriptions/Create.vue
@@ -0,0 +1,276 @@
+<!--
+  - Create.vue
+  - Copyright (c) 2022 james@firefly-iii.org
+  -
+  - This file is part of Firefly III (https://github.com/firefly-iii).
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program.  If not, see <https://www.gnu.org/licenses/>.
+  -->
+
+<template>
+  <q-page>
+    <div class="row q-mx-md">
+      <div class="col-12">
+        <q-banner inline-actions rounded class="bg-orange text-white" v-if="'' !== errorMessage">
+          {{ errorMessage }}
+          <template v-slot:action>
+            <q-btn flat @click="dismissBanner" label="Dismiss"/>
+          </template>
+        </q-banner>
+      </div>
+    </div>
+    <div class="row q-mx-md q-mt-md">
+      <div class="col-12">
+        <q-card bordered>
+          <q-card-section>
+            <div class="text-h6">Info for new subscription</div>
+          </q-card-section>
+          <q-card-section>
+            <div class="row">
+              <div class="col-12 q-mb-xs">
+                <q-input
+                  :error-message="submissionErrors.name"
+                  :error="hasSubmissionErrors.name"
+                  bottom-slots :disable="disabledInput" type="text" clearable v-model="name" :label="$t('form.name')"
+                  outlined/>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-12 q-mb-xs">
+                <q-input
+                  :error-message="submissionErrors.date"
+                  :error="hasSubmissionErrors.date"
+                  bottom-slots :disable="disabledInput" type="date" v-model="date" :label="$t('form.date')"
+                  hint="The next date you expect the subscription to hit"
+                  outlined/>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-6 q-mb-xs q-pr-xs">
+                <q-input
+                  :error-message="submissionErrors.amount_min"
+                  :error="hasSubmissionErrors.amount_min"
+                  bottom-slots :disable="disabledInput" type="number" v-model="amount_min" :label="$t('form.amount_min')"
+                  outlined/>
+              </div>
+              <div class="col-6 q-mb-xs q-pl-xs">
+                <q-input
+                  :error-message="submissionErrors.amount_max"
+                  :error="hasSubmissionErrors.amount_max"
+                  :rules="[ val => parseFloat(val) >= parseFloat(amount_min) || 'Must be more than minimum amount']"
+                  bottom-slots :disable="disabledInput" type="number" v-model="amount_max" :label="$t('form.amount_max')"
+                  outlined/>
+              </div>
+              <div class="row">
+                <div class="col-12 q-mb-xs">
+                  <q-select
+                    :error-message="submissionErrors.repeat_freq"
+                    :error="hasSubmissionErrors.repeat_freq"
+                    outlined v-model="repeat_freq" :options="repeatFrequencies" label="Outlined"/>
+                </div>
+              </div>
+            </div>
+          </q-card-section>
+        </q-card>
+      </div>
+    </div>
+
+    <div class="row q-mx-md">
+      <div class="col-12">
+        <q-card class="q-mt-xs">
+          <q-card-section>
+            <div class="row">
+              <div class="col-12 text-right">
+                <q-btn :disable="disabledInput" color="primary" label="Submit" @click="submitSubscription"/>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-12 text-right">
+                <q-checkbox :disable="disabledInput" v-model="doReturnHere" left-label label="Return here to create another one"/>
+                <br/>
+                <q-checkbox v-model="doResetForm" left-label :disable="!doReturnHere || disabledInput" label="Reset form after submission"/>
+              </div>
+            </div>
+          </q-card-section>
+        </q-card>
+      </div>
+    </div>
+
+  </q-page>
+</template>
+
+<script>
+import Post from "../../api/subscriptions/post";
+import format from 'date-fns/format';
+
+export default {
+  name: "Create",
+  data() {
+    return {
+      submissionErrors: {},
+      hasSubmissionErrors: {},
+      submitting: false,
+      doReturnHere: false,
+      doResetForm: false,
+      errorMessage: '',
+      repeatFrequencies: [],
+      // subscription fields:
+      name: '',
+      date: '',
+      repeat_freq: 'monthly',
+      amount_min: '',
+      amount_max: ''
+    }
+  },
+  computed: {
+    disabledInput: function () {
+      return this.submitting;
+    }
+  },
+  created() {
+    this.date = format(new Date, 'y-MM-dd');
+    this.repeatFrequencies = [
+      {
+        label: this.$t('firefly.repeat_freq_weekly'),
+        value: 'weekly',
+      },
+      {
+        label: this.$t('firefly.repeat_freq_monthly'),
+        value: 'monthly',
+      },
+      {
+        label: this.$t('firefly.repeat_freq_quarterly'),
+        value: 'quarterly',
+      },
+      {
+        label: this.$t('firefly.repeat_freq_half-year'),
+        value: 'half-year',
+      },
+      {
+        label: this.$t('firefly.repeat_freq_yearly'),
+        value: 'yearly',
+      },
+
+    ];
+
+    this.resetForm();
+  },
+  methods: {
+    resetForm: function () {
+      this.name = '';
+      this.date = format(new Date, 'y-MM-dd');
+      this.repeat_freq = 'monthly';
+      this.amount_min = '';
+      this.amount_max = '';
+      this.resetErrors();
+
+    },
+    resetErrors: function () {
+      this.submissionErrors =
+        {
+          name: '',
+          date: '',
+          repeat_freq: '',
+          amount_min: '',
+          amount_max: '',
+        };
+      this.hasSubmissionErrors = {
+        name: false,
+        date: false,
+        repeat_freq: false,
+        amount_min: false,
+        amount_max: false,
+      };
+    },
+    submitSubscription: function () {
+      this.submitting = true;
+      this.errorMessage = '';
+
+      // reset errors:
+      this.resetErrors();
+
+      // build account array
+      const submission = this.buildSubscription();
+
+      let subscriptions = new Post();
+      subscriptions
+        .post(submission)
+        .catch(this.processErrors)
+        .then(this.processSuccess);
+    },
+    buildSubscription: function () {
+      let subscription = {
+        name: this.name,
+        date: this.date,
+        repeat_freq: this.repeat_freq,
+        amount_min: this.amount_min,
+        amount_max: this.amount_max,
+      };
+      return subscription;
+    },
+    dismissBanner: function () {
+      this.errorMessage = '';
+    },
+    processSuccess: function (response) {
+      if (!response) {
+        return;
+      }
+      this.submitting = false;
+      let message = {
+        level: 'success',
+        text: 'I am new subscription lol',
+        show: true,
+        action: {
+          show: true,
+          text: 'Go to account',
+          link: {name: 'subscriptions.show', params: {id: parseInt(response.data.data.id)}}
+        }
+      };
+      // store flash
+      this.$q.localStorage.set('flash', message);
+      if (this.doReturnHere) {
+        window.dispatchEvent(new CustomEvent('flash', {
+          detail: {
+            flash: this.$q.localStorage.getItem('flash')
+          }
+        }));
+      }
+      if (!this.doReturnHere) {
+        // return to previous page.
+        this.$router.go(-1);
+      }
+
+    },
+    processErrors: function (error) {
+      if (error.response) {
+        let errors = error.response.data; // => the response payload
+        this.errorMessage = errors.message;
+        console.log(errors);
+        for (let i in errors.errors) {
+          if (errors.errors.hasOwnProperty(i)) {
+            this.submissionErrors[i] = errors.errors[i][0];
+            this.hasSubmissionErrors[i] = true;
+          }
+        }
+      }
+      this.submitting = false;
+    },
+  }
+
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/frontend/src/pages/subscriptions/Edit.vue b/frontend/src/pages/subscriptions/Edit.vue
new file mode 100644
index 0000000000..e95ed17a4c
--- /dev/null
+++ b/frontend/src/pages/subscriptions/Edit.vue
@@ -0,0 +1,281 @@
+<!--
+  - Create.vue
+  - Copyright (c) 2022 james@firefly-iii.org
+  -
+  - This file is part of Firefly III (https://github.com/firefly-iii).
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program.  If not, see <https://www.gnu.org/licenses/>.
+  -->
+
+<template>
+  <q-page>
+    <div class="row q-mx-md">
+      <div class="col-12">
+        <q-banner inline-actions rounded class="bg-orange text-white" v-if="'' !== errorMessage">
+          {{ errorMessage }}
+          <template v-slot:action>
+            <q-btn flat @click="dismissBanner" label="Dismiss"/>
+          </template>
+        </q-banner>
+      </div>
+    </div>
+    <div class="row q-mx-md q-mt-md">
+      <div class="col-12">
+        <q-card bordered>
+          <q-card-section>
+            <div class="text-h6">Edit subscription {{ name }}</div>
+          </q-card-section>
+          <q-card-section>
+            <div class="row">
+              <div class="col-12 q-mb-xs">
+                <q-input
+                  :error-message="submissionErrors.name"
+                  :error="hasSubmissionErrors.name"
+                  bottom-slots :disable="disabledInput" type="text" clearable v-model="name" :label="$t('form.name')"
+                  outlined/>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-12 q-mb-xs">
+                <q-input
+                  :error-message="submissionErrors.date"
+                  :error="hasSubmissionErrors.date"
+                  bottom-slots :disable="disabledInput" type="date" v-model="date" :label="$t('form.date')"
+                  hint="The next date you expect the subscription to hit"
+                  outlined/>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-6 q-mb-xs q-pr-xs">
+                <q-input
+                  :error-message="submissionErrors.amount_min"
+                  :error="hasSubmissionErrors.amount_min"
+                  bottom-slots :disable="disabledInput" type="number" v-model="amount_min" :label="$t('form.amount_min')"
+                  outlined/>
+              </div>
+              <div class="col-6 q-mb-xs q-pl-xs">
+                <q-input
+                  :error-message="submissionErrors.amount_max"
+                  :error="hasSubmissionErrors.amount_max"
+                  :rules="[ val => parseFloat(val) >= parseFloat(amount_min) || 'Must be more than minimum amount']"
+                  bottom-slots :disable="disabledInput" type="number" v-model="amount_max" :label="$t('form.amount_max')"
+                  outlined/>
+              </div>
+              <div class="row">
+                <div class="col-12 q-mb-xs">
+                  <q-select
+                    :error-message="submissionErrors.repeat_freq"
+                    :error="hasSubmissionErrors.repeat_freq"
+                    outlined v-model="repeat_freq" :options="repeatFrequencies" label="Outlined"/>
+                </div>
+              </div>
+            </div>
+          </q-card-section>
+        </q-card>
+      </div>
+    </div>
+
+    <div class="row q-mx-md">
+      <div class="col-12">
+        <q-card class="q-mt-xs">
+          <q-card-section>
+            <div class="row">
+              <div class="col-12 text-right">
+                <q-btn :disable="disabledInput" color="primary" label="Submit" @click="submitSubscription"/>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-12 text-right">
+                <q-checkbox :disable="disabledInput" v-model="doReturnHere" left-label label="Return here to create another one"/>
+              </div>
+            </div>
+          </q-card-section>
+        </q-card>
+      </div>
+    </div>
+
+  </q-page>
+</template>
+
+<script>
+import Put from "../../api/subscriptions/put";
+import format from 'date-fns/format';
+import Get from "../../api/subscriptions/get";
+
+export default {
+  name: "Edit",
+  data() {
+    return {
+      tab: 'split-0',
+      submissionErrors: {},
+      hasSubmissionErrors: {},
+      submitting: false,
+      doReturnHere: false,
+      doResetForm: false,
+      errorMessage: '',
+      repeatFrequencies: [],
+      // subscription fields:
+      id: 0,
+      name: '',
+      date: '',
+      repeat_freq: 'monthly',
+      amount_min: '',
+      amount_max: ''
+    }
+  },
+  computed: {
+    disabledInput: function () {
+      return this.submitting;
+    }
+  },
+  created() {
+    this.date = format(new Date, 'y-MM-dd');
+    this.repeatFrequencies = [
+      {
+        label: this.$t('firefly.repeat_freq_weekly'),
+        value: 'weekly',
+      },
+      {
+        label: this.$t('firefly.repeat_freq_monthly'),
+        value: 'monthly',
+      },
+      {
+        label: this.$t('firefly.repeat_freq_quarterly'),
+        value: 'quarterly',
+      },
+      {
+        label: this.$t('firefly.repeat_freq_half-year'),
+        value: 'half-year',
+      },
+      {
+        label: this.$t('firefly.repeat_freq_yearly'),
+        value: 'yearly',
+      },
+
+    ];
+
+    this.id = parseInt(this.$route.params.id);
+    this.collectSubscription();
+  },
+  methods: {
+    resetErrors: function () {
+      this.submissionErrors =
+        {
+          name: '',
+          date: '',
+          repeat_freq: '',
+          amount_min: '',
+          amount_max: '',
+        };
+      this.hasSubmissionErrors = {
+        name: false,
+        date: false,
+        repeat_freq: false,
+        amount_min: false,
+        amount_max: false,
+      };
+    },
+    collectSubscription: function() {
+      let get = new Get;
+      get.get(this.id).then((response) => this.parseSubscription(response));
+    },
+    submitSubscription: function () {
+      this.submitting = true;
+      this.errorMessage = '';
+
+      // reset errors:
+      this.resetErrors();
+
+      // build subscription array
+      const submission = this.buildSubscription();
+
+      let subscriptions = new Put();
+      subscriptions
+        .put(this.id, submission)
+        .catch(this.processErrors)
+        .then(this.processSuccess);
+    },
+    parseSubscription: function(response) {
+      this.name = response.data.data.attributes.name;
+      this.date = response.data.data.attributes.date.substr(0,10);
+      console.log(this.date);
+      this.repeat_freq  = response.data.data.attributes.repeat_freq;
+      this.amount_min  = response.data.data.attributes.amount_min;
+      this.amount_max  = response.data.data.attributes.amount_max;
+    },
+    buildSubscription: function () {
+      let subscription = {
+        name: this.name,
+        date: this.date,
+        repeat_freq: this.repeat_freq,
+        amount_min: this.amount_min,
+        amount_max: this.amount_max,
+      };
+      return subscription;
+    },
+    dismissBanner: function () {
+      this.errorMessage = '';
+    },
+    processSuccess: function (response) {
+      if (!response) {
+        return;
+      }
+      this.submitting = false;
+      let message = {
+        level: 'success',
+        text: 'I am updated subscription ',
+        show: true,
+        action: {
+          show: true,
+          text: 'Go to subscription',
+          link: {name: 'subscriptions.show', params: {id: parseInt(response.data.data.id)}}
+        }
+      };
+      // store flash
+      this.$q.localStorage.set('flash', message);
+      if (this.doReturnHere) {
+        window.dispatchEvent(new CustomEvent('flash', {
+          detail: {
+            flash: this.$q.localStorage.getItem('flash')
+          }
+        }));
+      }
+      if (!this.doReturnHere) {
+        // return to previous page.
+        this.$router.go(-1);
+      }
+
+    },
+    processErrors: function (error) {
+      if (error.response) {
+        let errors = error.response.data; // => the response payload
+        this.errorMessage = errors.message;
+        console.log(errors);
+        for (let i in errors.errors) {
+          if (errors.errors.hasOwnProperty(i)) {
+            this.submissionErrors[i] = errors.errors[i][0];
+            this.hasSubmissionErrors[i] = true;
+          }
+        }
+      }
+      this.submitting = false;
+    },
+  }
+
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/frontend/src/pages/subscriptions/Index.vue b/frontend/src/pages/subscriptions/Index.vue
new file mode 100644
index 0000000000..ec806e9bec
--- /dev/null
+++ b/frontend/src/pages/subscriptions/Index.vue
@@ -0,0 +1,170 @@
+<template>
+  <q-page>
+    <q-table
+      :title="$t('firefly.subscriptions')"
+      :rows="rows"
+      :columns="columns"
+      row-key="id"
+      @request="onRequest"
+      v-model:pagination="pagination"
+      :loading="loading"
+      class="q-ma-md"
+    >
+      <template v-slot:header="props">
+        <q-tr :props="props">
+          <q-th
+            v-for="col in props.cols"
+            :key="col.name"
+            :props="props"
+          >
+            {{ col.label }}
+          </q-th>
+        </q-tr>
+      </template>
+      <template v-slot:body="props">
+        <q-tr :props="props">
+          <q-td key="name" :props="props">
+            <router-link :to="{ name: 'subscriptions.show', params: {id: props.row.id} }" class="text-primary">
+              {{ props.row.name }}
+            </router-link>
+          </q-td>
+          <q-td key="menu" :props="props">
+            <q-btn-dropdown color="primary" label="Actions" size="sm">
+              <q-list>
+                <q-item clickable v-close-popup :to="{name: 'subscriptions.edit', params: {id: props.row.id}}">
+                  <q-item-section>
+                    <q-item-label>Edit</q-item-label>
+                  </q-item-section>
+                </q-item>
+    <q-item clickable v-close-popup @click="deleteSubscription(props.row.id, props.row.name)">
+      <q-item-section>
+        <q-item-label>Delete</q-item-label>
+      </q-item-section>
+    </q-item>
+              </q-list>
+            </q-btn-dropdown>
+          </q-td>
+        </q-tr>
+      </template>
+    </q-table>
+    <q-page-sticky position="bottom-right" :offset="[18, 18]">
+      <q-fab
+        label="Actions"
+        square
+        vertical-actions-align="right"
+        label-position="left"
+        color="green"
+        icon="fas fa-chevron-up"
+        direction="up"
+      >
+        <q-fab-action color="primary" square :to="{ name: 'subscriptions.create', params: {type: 'asset'} }" icon="fas fa-exchange-alt"
+                      label="New subscription"/>
+      </q-fab>
+    </q-page-sticky>
+  </q-page>
+</template>
+
+<script>
+import {mapGetters, useStore} from "vuex";
+import List from "../../api/subscriptions/list";
+import Destroy from "../../api/subscriptions/destroy";
+
+export default {
+  name: 'Index',
+  computed: {
+    ...mapGetters('fireflyiii', ['getRange', 'getCacheKey', 'getListPageSize']),
+  },
+  created() {
+    this.pagination.rowsPerPage = this.getListPageSize;
+  },
+  mounted() {
+    this.type = this.$route.params.type;
+    if (null === this.getRange.start || null === this.getRange.end) {
+      // subscribe, then update:
+      const $store = useStore();
+      $store.subscribe((mutation, state) => {
+        if ('fireflyiii/setRange' === mutation.type) {
+          this.range = {start: mutation.payload.start, end: mutation.payload.end};
+          this.triggerUpdate();
+        }
+      });
+    }
+    if (null !== this.getRange.start && null !== this.getRange.end) {
+      this.range = {start: this.getRange.start, end: this.getRange.end};
+      this.triggerUpdate();
+    }
+  },
+  data() {
+    return {
+      rows: [],
+      pagination: {
+        sortBy: 'desc',
+        descending: false,
+        page: 1,
+        rowsPerPage: 5,
+        rowsNumber: 100
+      },
+      loading: false,
+      columns: [
+        {name: 'name', label: 'Name', field: 'name', align: 'left'},
+        {name: 'menu', label: ' ', field: 'menu', align: 'right'},
+      ],
+    }
+  },
+  methods: {
+    onRequest: function (props) {
+      this.page = props.pagination.page;
+      this.triggerUpdate();
+    },
+    deleteSubscription: function (id, name) {
+      this.$q.dialog({
+                       title: 'Confirm',
+                       message: 'Do you want to delete subscriptions "' + name + '"? Transactions linked to this subscription will not be deleted.',
+                       cancel: true,
+                       persistent: true
+                     }).onOk(() => {
+        this.destroySubscription(id);
+      });
+    },
+    destroySubscription: function (id) {
+      let destr = new Destroy;
+      destr.destroy(id).then(() => {
+        this.$store.dispatch('fireflyiii/refreshCacheKey');
+        this.triggerUpdate();
+      });
+    },
+    triggerUpdate: function () {
+      if (this.loading) {
+        return;
+      }
+      if (null === this.range.start || null === this.range.end) {
+        return;
+      }
+      this.loading = true;
+      const list = new List();
+      this.rows = [];
+      list.list(this.page, this.getCacheKey).then(
+        (response) => {
+          this.pagination.rowsPerPage = response.data.meta.pagination.per_page;
+          this.pagination.rowsNumber = response.data.meta.pagination.total;
+          this.pagination.page = this.page;
+
+          for (let i in response.data.data) {
+            if (response.data.data.hasOwnProperty(i)) {
+              let current = response.data.data[i];
+              let account = {
+                id: current.id,
+                name: current.attributes.name,
+              };
+              this.rows.push(account);
+            }
+          }
+          this.loading = false;
+        }
+      )
+      ;
+    }
+  },
+
+}
+</script>
diff --git a/frontend/src/pages/subscriptions/Show.vue b/frontend/src/pages/subscriptions/Show.vue
new file mode 100644
index 0000000000..9a420f9606
--- /dev/null
+++ b/frontend/src/pages/subscriptions/Show.vue
@@ -0,0 +1,116 @@
+<!--
+  - Show.vue
+  - Copyright (c) 2022 james@firefly-iii.org
+  -
+  - This file is part of Firefly III (https://github.com/firefly-iii).
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program.  If not, see <https://www.gnu.org/licenses/>.
+  -->
+
+<template>
+  <q-page>
+    <div class="row q-mx-md">
+      <div class="col-12">
+        <q-card bordered>
+          <q-card-section>
+            <div class="text-h6">{{ subscription.name }}</div>
+          </q-card-section>
+          <q-card-section>
+            <div class="row">
+              <div class="col-12 q-mb-xs">
+                Name: {{ subscription.name }}<br>
+              </div>
+            </div>
+          </q-card-section>
+        </q-card>
+      </div>
+    </div>
+
+    <div class="row q-mt-sm">
+      <div class="col-12">
+        <LargeTable ref="table"
+                    title="Transactions"
+                    :rows="rows"
+                    :loading="loading"
+                    v-on:on-request="onRequest"
+                    :rows-number="rowsNumber"
+                    :rows-per-page="rowsPerPage"
+                    :page="page"
+        >
+        </LargeTable>
+      </div>
+    </div>
+
+
+  </q-page>
+</template>
+
+<script>
+import LargeTable from "../../components/transactions/LargeTable";
+import Get from "../../api/subscriptions/get";
+import Parser from "../../api/transactions/parser";
+
+export default {
+  name: "Show",
+  data() {
+    return {
+      subscription: {},
+      rows: [],
+      rowsNumber: 1,
+      rowsPerPage: 10,
+      page: 1
+    }
+  },
+  created() {
+    this.id = parseInt(this.$route.params.id);
+    this.getSubscription();
+  },
+  components: {LargeTable},
+  methods: {
+    onRequest: function (payload) {
+      this.page = payload.page;
+      this.getSubscription();
+    },
+    getSubscription: function () {
+      let get = new Get;
+      get.get(this.id).then((response) => this.parseSubscription(response));
+
+      this.loading = true;
+      const parser = new Parser;
+      this.rows = [];
+
+      get.transactions(this.id, this.page, this.getCacheKey).then(
+        (response) => {
+          let resp = parser.parseResponse(response);
+
+          this.rowsPerPage = resp.rowsPerPage;
+          this.rowsNumber = resp.rowsNumber;
+          this.rows = resp.rows;
+          this.loading = false;
+        }
+      );
+    },
+    parseSubscription: function (response) {
+      this.subscription = {
+        name: response.data.data.attributes.name,
+
+      };
+    },
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/frontend/src/pages/tags/Index.vue b/frontend/src/pages/tags/Index.vue
new file mode 100644
index 0000000000..101aec4b6a
--- /dev/null
+++ b/frontend/src/pages/tags/Index.vue
@@ -0,0 +1,114 @@
+<template>
+  <q-page>
+    <q-card>
+      <q-card-section>
+        <span v-for="tag in tags">
+              <q-badge outline class="q-ma-xs" color="blue">
+                <router-link :to="{ name: 'tags.show', params: {id: tag.id} }">
+                {{ tag.attributes.tag }}
+                </router-link>
+
+              </q-badge>
+        </span>
+      </q-card-section>
+    </q-card>
+    <q-page-sticky position="bottom-right" :offset="[18, 18]">
+      <q-fab
+        label="Actions"
+        square
+        vertical-actions-align="right"
+        label-position="left"
+        color="green"
+        icon="fas fa-chevron-up"
+        direction="up"
+      >
+        <q-fab-action color="primary" square :to="{ name: 'tags.create'}" icon="fas fa-exchange-alt" label="New tag"/>
+      </q-fab>
+    </q-page-sticky>
+  </q-page>
+</template>
+
+<script>
+import {mapGetters, useStore} from "vuex";
+import List from "../../api/tags/list";
+
+export default {
+  name: 'Index',
+  watch: {
+    $route(to) {
+      // react to route changes...
+      if ('tags.index' === to.name) {
+        this.page = 1;
+        this.updateBreadcrumbs();
+        this.triggerUpdate();
+      }
+    }
+  },
+  data() {
+    return {
+      tags: [],
+      loading: false,
+    }
+  },
+  computed: {
+    ...mapGetters('fireflyiii', ['getRange', 'getCacheKey']),
+  },
+  created() {
+  },
+  mounted() {
+    if (null === this.getRange.start || null === this.getRange.end) {
+      // subscribe, then update:
+      const $store = useStore();
+      $store.subscribe((mutation, state) => {
+        if ('fireflyiii/setRange' === mutation.type) {
+          this.range = {start: mutation.payload.start, end: mutation.payload.end};
+          this.triggerUpdate();
+        }
+      });
+    }
+    if (null !== this.getRange.start && null !== this.getRange.end) {
+      this.range = {start: this.getRange.start, end: this.getRange.end};
+      this.triggerUpdate();
+    }
+  },
+  methods: {
+    updateBreadcrumbs: function () {
+      this.$route.meta.pageTitle = 'firefly.tags';
+      this.$route.meta.breadcrumbs = [{title: 'tags'}];
+
+    },
+    onRequest: function (props) {
+      this.page = props.pagination.page;
+      this.triggerUpdate();
+    },
+    triggerUpdate: function () {
+      if (this.loading) {
+        return;
+      }
+      this.loading = true;
+      this.getPage(1);
+    },
+    getPage: function (page) {
+      const list = new List();
+      this.rows = [];
+      list.list(page, this.getCacheKey).then(
+        (response) => {
+          for (let i in response.data.data) {
+            if (response.data.data.hasOwnProperty(i)) {
+              let current = response.data.data[i];
+              this.tags.push(current);
+            }
+          }
+          // get next page:
+          if (page < parseInt(response.data.meta.pagination.total_pages)) {
+            this.getPage(page + 1);
+          }
+          if (page === parseInt(response.data.meta.pagination.total_pages)) {
+            this.loading = false;
+          }
+        }
+      );
+    }
+  }
+}
+</script>
diff --git a/frontend/src/pages/tags/Show.vue b/frontend/src/pages/tags/Show.vue
new file mode 100644
index 0000000000..8101b05c47
--- /dev/null
+++ b/frontend/src/pages/tags/Show.vue
@@ -0,0 +1,118 @@
+<!--
+  - Show.vue
+  - Copyright (c) 2022 james@firefly-iii.org
+  -
+  - This file is part of Firefly III (https://github.com/firefly-iii).
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program.  If not, see <https://www.gnu.org/licenses/>.
+  -->
+
+<template>
+  <q-page>
+    <div class="row q-mx-md">
+      <div class="col-12">
+        <!-- Balance chart -->
+        <q-card bordered>
+          <q-card-section>
+            <div class="text-h6">{{ tag.tag }}</div>
+          </q-card-section>
+          <q-card-section>
+            <div class="row">
+              <div class="col-12 q-mb-xs">
+                Tag: {{ tag.tag }}<br>
+              </div>
+            </div>
+          </q-card-section>
+        </q-card>
+      </div>
+    </div>
+
+    <div class="row q-mt-sm">
+      <div class="col-12">
+        <LargeTable ref="table"
+                    title="Transactions"
+                    :rows="rows"
+                    :loading="loading"
+                    v-on:on-request="onRequest"
+                    :rows-number="rowsNumber"
+                    :rows-per-page="rowsPerPage"
+                    :page="page"
+        >
+        </LargeTable>
+      </div>
+    </div>
+
+
+  </q-page>
+</template>
+
+<script>
+import Get from "../../api/tags/get";
+import LargeTable from "../../components/transactions/LargeTable";
+import Parser from "../../api/transactions/parser";
+
+export default {
+  name: "Show",
+  data() {
+    return {
+      tag: {},
+      rows: [],
+      rowsNumber: 1,
+      rowsPerPage: 10,
+      page: 1
+    }
+  },
+  created() {
+    this.id = parseInt(this.$route.params.id);
+    this.getTag();
+  },
+  mounted() {
+  },
+  components: {LargeTable},
+  methods: {
+    onRequest: function (payload) {
+      this.page = payload.page;
+      this.getTag();
+    },
+    getTag: function () {
+      let get = new Get;
+      get.get(this.id).then((response) => this.parseTag(response));
+
+      this.loading = true;
+      const parser = new Parser;
+      this.rows = [];
+
+      get.transactions(this.id, this.page, this.getCacheKey).then(
+        (response) => {
+          let resp = parser.parseResponse(response);
+
+          this.rowsPerPage = resp.rowsPerPage;
+          this.rowsNumber = resp.rowsNumber;
+          this.rows = resp.rows;
+          this.loading = false;
+        }
+      );
+    },
+    parseTag: function (response) {
+      this.tag = {
+        tag: response.data.data.attributes.tag,
+      };
+    },
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/frontend/src/pages/transactions/Create.vue b/frontend/src/pages/transactions/Create.vue
new file mode 100644
index 0000000000..4b212fb9e9
--- /dev/null
+++ b/frontend/src/pages/transactions/Create.vue
@@ -0,0 +1,512 @@
+<template>
+  <q-page>
+    <div class="row q-mx-md">
+      <div class="col-12">
+        <q-banner inline-actions rounded class="bg-orange text-white" v-if="'' !== errorMessage">
+          {{ errorMessage }}
+          <template v-slot:action>
+            <q-btn flat @click="dismissBanner" label="Dismiss"/>
+          </template>
+        </q-banner>
+      </div>
+    </div>
+    <!--
+    <div class="row q-ma-md">
+      <div class="col-12">
+        <q-card>
+          <q-card-section>
+            <div class="row">
+              <q-tabs
+                v-model="tab"
+                inline-label
+                dense
+                align="left"
+                class="text-teal col"
+              >
+                <q-tab v-for="(transaction,index) in transactions" :name="'split-' + index" :label="getSplitLabel(index)"/>
+                <q-btn @click="addTransaction" flat label="Add split" icon="fas fa-plus-circle" class="text-orange"></q-btn>
+              </q-tabs>
+            </div>
+          </q-card-section>
+        </q-card>
+      </div>
+    </div>
+    -->
+    <div class="row">
+      <div class="col-12">
+        <q-tab-panels v-model="tab" animated>
+          <q-tab-panel v-for="(transaction,index) in transactions" :key="index" :name="'split-' + index">
+            <q-card bordered>
+              <q-card-section>
+                <div class="text-h6">Info for {{ $route.params.type }} {{ index }}</div>
+              </q-card-section>
+              <q-card-section>
+                <div class="row">
+                  <div class="col-12 q-mb-xs">
+                    <q-input
+                      :error-message="submissionErrors[index].description"
+                      :error="hasSubmissionErrors[index].description"
+                      bottom-slots :disable="disabledInput" type="text" clearable v-model="transaction.description" :label="$t('firefly.description')"
+                      outlined/>
+                  </div>
+                </div>
+                <div class="row">
+                  <div class="col-4 q-mb-xs q-pr-xs">
+                    <q-input
+                      :error-message="submissionErrors[index].source"
+                      :error="hasSubmissionErrors[index].source"
+                      bottom-slots :disable="disabledInput" clearable v-model="transaction.source" :label="$t('firefly.source_account')" outlined/>
+                  </div>
+                  <div class="col-4 q-px-xs">
+                    <q-input
+                      :error-message="submissionErrors[index].amount"
+                      :error="hasSubmissionErrors[index].amount"
+                      bottom-slots :disable="disabledInput" clearable mask="#.##" reverse-fill-mask hint="Expects #.##" fill-mask="0"
+                      v-model="transaction.amount"
+                      :label="$t('firefly.amount')" outlined/>
+                  </div>
+                  <div class="col-4 q-pl-xs">
+                    <q-input
+                      :error-message="submissionErrors[index].destination"
+                      :error="hasSubmissionErrors[index].destination"
+                      bottom-slots :disable="disabledInput" clearable v-model="transaction.destination" :label="$t('firefly.destination_account')"
+                      outlined/>
+                  </div>
+                </div>
+                <!--
+                <div class="row">
+                  <div class="col-4 offset-4">
+                    Foreign
+                  </div>
+
+                </div>
+                -->
+                <div class="row">
+                  <div class="col-4">
+                    <div class="row">
+                      <div class="col">
+                        <q-input
+                          :error-message="submissionErrors[index].date"
+                          :error="hasSubmissionErrors[index].date"
+                          bottom-slots :disable="disabledInput" v-model="transaction.date" outlined type="date" :hint="$t('firefly.date')"/>
+                      </div>
+                      <div class="col">
+                        <q-input bottom-slots :disable="disabledInput" v-model="transaction.time" outlined type="time" :hint="$t('firefly.time')"/>
+                      </div>
+                    </div>
+                  </div>
+                  <!--
+  <div class="col-4 offset-4">
+    <q-input v-model="transaction.interest_date" filled type="date" hint="Interest date"/>
+    <q-input v-model="transaction.book_date" filled type="date" hint="Book date"/>
+    <q-input v-model="transaction.process_date" filled type="date" hint="Processing date"/>
+    <q-input v-model="transaction.due_date" filled type="date" hint="Due date"/>
+    <q-input v-model="transaction.payment_date" filled type="date" hint="Payment date"/>
+    <q-input v-model="transaction.invoice_date" filled type="date" hint="Invoice date"/>
+  </div>
+-->
+                </div>
+              </q-card-section>
+            </q-card>
+            <!--
+            <q-card bordered class="q-mt-md">
+              <q-card-section>
+                <div class="text-h6">Meta for {{ $route.params.type }}</div>
+              </q-card-section>
+              <q-card-section>
+                <div class="row">
+                  <div class="col-6">
+                    <q-select filled v-model="transaction.budget" :options="tempBudgets" label="Budget"/>
+                  </div>
+                  <div class="col-6">
+                    <q-input filled clearable v-model="transaction.category" :label="$t('firefly.category')" outlined/>
+                  </div>
+                </div>
+                <div class="row">
+                  <div class="col-6">
+                    <q-select filled v-model="transaction.subscription" :options="tempSubscriptions" label="Subscription"/>
+                  </div>
+                  <div class="col-6">
+                    Tags
+                  </div>
+                </div>
+                <div class="row">
+                  <div class="col-6">
+                    Bill
+                  </div>
+                  <div class="col-6">
+                    ???
+                  </div>
+                </div>
+              </q-card-section>
+            </q-card>
+            -->
+            <!--
+            <q-card bordered class="q-mt-md">
+              <q-card-section>
+                <div class="text-h6">Extr for {{ $route.params.type }}</div>
+              </q-card-section>
+              <q-card-section>
+                <div class="row">
+                  <div class="col-6">
+                    Notes
+                  </div>
+                  <div class="col-6">
+                    attachments
+                  </div>
+                </div>
+                <div class="row">
+                  <div class="col-6">
+                    Links
+                  </div>
+                  <div class="col-6">
+                    reference
+                  </div>
+                </div>
+                <div class="row">
+                  <div class="col-6">
+                    url
+                  </div>
+                  <div class="col-6">
+                    location
+                  </div>
+                </div>
+              </q-card-section>
+            </q-card>
+            -->
+          </q-tab-panel>
+
+          <!--
+          <q-tab-panel name="split-1">
+            <div class="text-h6">Alarms1</div>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit.
+          </q-tab-panel>
+
+          <q-tab-panel name="split-2">
+            <div class="text-h6">Movies1</div>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit.
+          </q-tab-panel>
+          -->
+        </q-tab-panels>
+      </div>
+    </div>
+
+    <div class="row q-mx-md">
+      <div class="col-12">
+        <q-card class="q-mt-xs">
+          <q-card-section>
+            <div class="row">
+              <div class="col-12 text-right">
+                <q-btn :disable="disabledInput" color="primary" label="Submit" @click="submitTransaction"/>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-12 text-right">
+                <q-checkbox :disable="disabledInput" v-model="doReturnHere" left-label label="Return here to create another one"/>
+                <br/>
+                <q-checkbox v-model="doResetForm" left-label :disable="!doReturnHere || disabledInput" label="Reset form after submission"/>
+              </div>
+            </div>
+          </q-card-section>
+        </q-card>
+      </div>
+    </div>
+  </q-page>
+</template>
+
+<script>
+import format from 'date-fns/format';
+import formatISO from 'date-fns/formatISO';
+import Post from "../../api/transactions/post";
+import { useQuasar } from 'quasar';
+
+export default {
+  name: 'Create',
+  data() {
+    return {
+      tab: 'split-0',
+      transactions: [],
+      submissionErrors: [],
+      hasSubmissionErrors: [],
+      submitting: false,
+      doReturnHere: false,
+      doResetForm: false,
+      group_title: '',
+      //tempModels: ['A', 'B', 'C'],
+      //tempBudgets: [{label: 'Budget A', value: 1}, {label: 'Budget B', value: 2}, {label: 'Budget C', value: 3}],
+      //tempSubscriptions: [{label: 'Sub A', value: 1}, {label: 'Sub B', value: 2}, {label: 'Sub C', value: 3}]
+
+      errorMessage: ''
+    }
+  },
+  computed: {
+    disabledInput: function () {
+      return this.submitting;
+    }
+  },
+  created() {
+    this.resetForm();
+  },
+  methods: {
+    resetForm: function () {
+      this.transactions = [];
+      const info = this.getDefaultTransaction();
+      this.transactions.push(info.transaction);
+      this.submissionErrors.push(info.submissionError);
+      this.hasSubmissionErrors.push(info.hasSubmissionError);
+    },
+    addTransaction: function () {
+      const transaction = this.getDefaultTransaction();
+      this.transactions.push(transaction);
+      this.tab = 'split-' + (parseInt(this.transactions.length) - 1);
+    },
+    getSplitLabel: function (index) {
+      if (this.transactions.hasOwnProperty(index) && null !== this.transactions[index].description && this.transactions[index].description.length > 0) {
+        return this.transactions[index].description
+      }
+      return this.$t('firefly.single_split') + ' ' + (index + 1);
+    },
+    dismissBanner: function () {
+      this.errorMessage = '';
+    },
+    submitTransaction: function () {
+      this.submitting = true;
+      this.errorMessage = '';
+
+      // reset errors:
+      this.resetErrors();
+
+      // build transaction array
+      const submission = this.buildTransaction();
+
+      let transactions = new Post();
+      transactions
+        .post(submission)
+        .catch(this.processErrors)
+        .then(this.processSuccess);
+    },
+    processSuccess: function (response) {
+      this.submitting = false;
+      let message = {
+        level: 'success',
+        text: 'I am text',
+        show: true,
+        action: {
+          show: true,
+          text: 'Go to transaction',
+          link: { name: 'transactions.show', params: {id: parseInt(response.data.data.id)} }
+        }
+      };
+      // store flash
+      this.$q.localStorage.set('flash', message);
+      if(this.doReturnHere) {
+        window.dispatchEvent(new CustomEvent('flash', {
+          detail: {
+            flash: this.$q.localStorage.getItem('flash')
+          }
+        }));
+      }
+      if(!this.doReturnHere) {
+        // return to previous page.
+        this.$router.go(-1);
+      }
+
+    },
+    resetErrors: function () {
+      let length = this.transactions.length;
+      let transaction = this.getDefaultTransaction();
+      for (let i = 0; i < length; i++) {
+        this.submissionErrors[i] = transaction.submissionError;
+        this.hasSubmissionErrors[i] = transaction.hasSubmissionError;
+      }
+    },
+    processErrors: function (error) {
+      if (error.response) {
+        let errors = error.response.data; // => the response payload
+        this.errorMessage = errors.message;
+        for (let i in errors.errors) {
+          if (errors.errors.hasOwnProperty(i)) {
+            this.processSingleError(i, errors.errors[i]);
+          }
+        }
+      }
+      this.submitting = false;
+    },
+    processSingleError: function (key, errors) {
+      // lol dumbest way to explode "transactions.0.something" ever.
+      let index = parseInt(key.split('.')[1]);
+      let fieldName = key.split('.')[2];
+      switch (fieldName) {
+        case 'amount':
+        case 'date':
+        case 'description':
+          this.submissionErrors[index][fieldName] = errors[0];
+          this.hasSubmissionErrors[index][fieldName] = true;
+          break;
+        case 'source_id':
+        case 'source_name':
+          this.submissionErrors[index].source = errors[0];
+          this.hasSubmissionErrors[index].source = true;
+          break;
+        case 'destination_id':
+        case 'destination_name':
+          this.submissionErrors[index].source = errors[0];
+          this.hasSubmissionErrors[index].source = true;
+          break;
+      }
+    },
+    buildTransaction: function () {
+      const obj = {
+        transactions: []
+      };
+      this.transactions.forEach(element => {
+        let dateStr = formatISO(new Date(element.date + ' ' + element.time));
+        let row = {
+          type: this.$route.params.type,
+          description: element.description,
+          source_name: element.source,
+          destination_name: element.destination,
+          amount: element.amount,
+          date: dateStr
+        };
+        obj.transactions.push(row);
+      });
+      return obj;
+    },
+    getDefaultTransaction: function () {
+      let date = '';
+      let time = '00:00';
+
+      if (0 === this.transactions.length) {
+        date = format(new Date, 'yyyy-MM-dd');
+      }
+
+      return {
+        submissionError: {
+          description: '',
+          amount: '',
+          date: '',
+          source: '',
+          destination: '',
+        },
+        hasSubmissionError: {
+          description: false,
+          amount: false,
+          date: false,
+          source: false,
+          destination: false,
+        },
+        transaction: {
+          description: '',
+          date: date,
+          time: time,
+          amount: 0,
+
+          // source and destination
+          source: '',
+          destination: '',
+
+          // categorisation
+          budget: '',
+          category: '',
+          subscription: '',
+
+          // custom dates
+          interest_date: '',
+          book_date: '',
+          process_date: '',
+          due_date: '',
+          payment_date: '',
+          invoice_date: '',
+        }
+      };
+      // date: "",
+      // amount: "",
+      // category: "",
+      // piggy_bank: 0,
+      // errors: {
+      //   source_account: [],
+      //   destination_account: [],
+      //   description: [],
+      //   amount: [],
+      //   date: [],
+      //   budget_id: [],
+      //   bill_id: [],
+      //   foreign_amount: [],
+      //   category: [],
+      //   piggy_bank: [],
+      //   tags: [],
+      //   custom fields:
+      // custom_errors: {
+      //   interest_date: [],
+      //   book_date: [],
+      //   process_date: [],
+      //   due_date: [],
+      //   payment_date: [],
+      //   invoice_date: [],
+      //   internal_reference: [],
+      //   notes: [],
+      //   attachments: [],
+      //   external_uri: [],
+      // },
+      // },
+      // budget: 0,
+      // bill: 0,
+      // tags: [],
+      // custom_fields: {
+      //   "interest_date": "",
+      //   "book_date": "",
+      //   "process_date": "",
+      //   "due_date": "",
+      //   "payment_date": "",
+      //   "invoice_date": "",
+      //   "internal_reference": "",
+      //   "notes": "",
+      //   "attachments": [],
+      //   "external_uri": "",
+      // },
+      // foreign_amount: {
+      //   amount: "",
+      //   currency_id: 0
+      // },
+      // source_account: {
+      //   id: 0,
+      //   name: "",
+      //   type: "",
+      //   currency_id: 0,
+      //   currency_name: '',
+      //   currency_code: '',
+      //   currency_decimal_places: 2,
+      //   allowed_types: ['Asset account', 'Revenue account', 'Loan', 'Debt', 'Mortgage'],
+      //   default_allowed_types: ['Asset account', 'Revenue account', 'Loan', 'Debt', 'Mortgage']
+      // },
+      // destination_account: {
+      //   id: 0,
+      //   name: "",
+      //   type: "",
+      //   currency_id: 0,
+      //   currency_name: '',
+      //   currency_code: '',
+      //   currency_decimal_places: 2,
+      //   allowed_types: ['Asset account', 'Expense account', 'Loan', 'Debt', 'Mortgage'],
+      //   default_allowed_types: ['Asset account', 'Expense account', 'Loan', 'Debt', 'Mortgage']
+      // }
+      // });
+      // if (this.transactions.length === 1) {
+      //   // console.log('Length == 1, set date to today.');
+      //   // set first date.
+      //   let today = new Date();
+      //   this.transactions[0].date = today.getFullYear() + '-' + ("0" + (today.getMonth() + 1)).slice(-2) + '-' + ("0" + today.getDate()).slice(-2);
+      //   // call for extra clear thing:
+      //   // this.clearSource(0);
+      //   //this.clearDestination(0);
+      // }
+      // ];
+      // };
+    }
+  },
+  preFetch() {
+
+  }
+}
+</script>
diff --git a/frontend/src/pages/transactions/Edit.vue b/frontend/src/pages/transactions/Edit.vue
new file mode 100644
index 0000000000..fe69759701
--- /dev/null
+++ b/frontend/src/pages/transactions/Edit.vue
@@ -0,0 +1,419 @@
+<template>
+  <q-page>
+    <div class="row q-mx-md">
+      <div class="col-12">
+        <q-banner inline-actions rounded class="bg-orange text-white" v-if="'' !== errorMessage">
+          {{ errorMessage }}
+          <template v-slot:action>
+            <q-btn flat @click="dismissBanner" label="Dismiss"/>
+          </template>
+        </q-banner>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-12">
+        <q-tab-panels v-model="tab" animated>
+          <q-tab-panel v-for="(transaction, index) in transactions" :key="index" :name="'split-' + index">
+            <q-card bordered>
+              <q-card-section>
+                <div class="text-h6">Info for {{ $route.params.type }} {{ index }}</div>
+              </q-card-section>
+              <q-card-section>
+                <div class="row">
+                  <div class="col-12 q-mb-xs">
+                    <q-input
+                      :error-message="submissionErrors[index].description"
+                      :error="hasSubmissionErrors[index].description"
+                      bottom-slots :disable="disabledInput" type="text" clearable v-model="transaction.description" :label="$t('firefly.description')"
+                      outlined/>
+                  </div>
+                </div>
+                <div class="row">
+                  <div class="col-4 q-mb-xs q-pr-xs">
+                    <q-input
+                      :error-message="submissionErrors[index].source"
+                      :error="hasSubmissionErrors[index].source"
+                      bottom-slots :disable="disabledInput" clearable v-model="transaction.source" :label="$t('firefly.source_account')" outlined/>
+                  </div>
+                  <div class="col-4 q-px-xs">
+                    <q-input
+                      :error-message="submissionErrors[index].amount"
+                      :error="hasSubmissionErrors[index].amount"
+                      bottom-slots :disable="disabledInput" clearable mask="#.##" reverse-fill-mask hint="Expects #.##" fill-mask="0"
+                      v-model="transaction.amount"
+                      :label="$t('firefly.amount')" outlined/>
+                  </div>
+                  <div class="col-4 q-pl-xs">
+                    <q-input
+                      :error-message="submissionErrors[index].destination"
+                      :error="hasSubmissionErrors[index].destination"
+                      bottom-slots :disable="disabledInput" clearable v-model="transaction.destination" :label="$t('firefly.destination_account')"
+                      outlined/>
+                  </div>
+                </div>
+                <div class="row">
+                  <div class="col-4">
+                    <div class="row">
+                      <div class="col">
+                        <q-input
+                          :error-message="submissionErrors[index].date"
+                          :error="hasSubmissionErrors[index].date"
+                          bottom-slots :disable="disabledInput" v-model="transaction.date" outlined type="date" :hint="$t('firefly.date')"/>
+                      </div>
+                      <div class="col">
+                        <q-input bottom-slots :disable="disabledInput" v-model="transaction.time" outlined type="time" :hint="$t('firefly.time')"/>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </q-card-section>
+            </q-card>
+          </q-tab-panel>
+        </q-tab-panels>
+      </div>
+    </div>
+
+    <div class="row q-mx-md">
+      <div class="col-12">
+        <q-card class="q-mt-xs">
+          <q-card-section>
+            <div class="row">
+              <div class="col-12 text-right">
+                <q-btn :disable="disabledInput" color="primary" label="Submit" @click="submitTransaction"/>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-12 text-right">
+                <q-checkbox :disable="disabledInput" v-model="doReturnHere" left-label label="Return here"/>
+              </div>
+            </div>
+          </q-card-section>
+        </q-card>
+      </div>
+    </div>
+  </q-page>
+</template>
+
+<script>
+import format from 'date-fns/format';
+import formatISO from 'date-fns/formatISO';
+import Put from "../../api/transactions/put";
+import { useQuasar } from 'quasar';
+import Get from "../../api/transactions/get";
+
+export default {
+  name: 'Edit',
+  data() {
+    return {
+      tab: 'split-0',
+      transactions: [],
+      submissionErrors: [],
+      hasSubmissionErrors: [],
+      submitting: false,
+      doReturnHere: false,
+      index: 0,
+      doResetForm: false,
+      group_title: '',
+      errorMessage: ''
+    }
+  },
+  computed: {
+    disabledInput: function () {
+      return this.submitting;
+    }
+  },
+  created() {
+    this.id = parseInt(this.$route.params.id);
+    this.resetForm();
+    this.collectTransaction();
+  },
+  methods: {
+    collectTransaction: function() {
+      let get = new Get;
+      get.get(this.id).then((response) => this.parseTransaction(response));
+    },
+    parseTransaction: function(response) {
+      this.group_title = response.data.data.attributes.group_title;
+      // parse transactions:
+      let transactions = response.data.data.attributes.transactions;
+      transactions.reverse();
+      for(let i in transactions) {
+        if(transactions.hasOwnProperty(i)) {
+          let transaction = transactions[i];
+          let index = parseInt(i);
+          // parse first transaction only:
+          if(0 === index) {
+            let parts = transaction.date.split('T');
+            let date = parts[0];
+            let time = parts[1].substr(0,8);
+            this.transactions.push(
+              {
+                description: transaction.description,
+                type: transaction.type,
+                date: date,
+                time: time,
+                amount: parseFloat(transaction.amount).toFixed(transaction.currency_decimal_places),
+
+                // source and destination
+                source: transaction.source_name,
+                destination: transaction.destination_name,
+
+              }
+            );
+          }
+        }
+      }
+    },
+    resetForm: function () {
+      this.transactions = [];
+      const info = this.getDefaultTransaction();
+      this.transactions = [];
+      this.submissionErrors.push(info.submissionError);
+      this.hasSubmissionErrors.push(info.hasSubmissionError);
+    },
+    dismissBanner: function () {
+      this.errorMessage = '';
+    },
+    submitTransaction: function () {
+      this.submitting = true;
+      this.errorMessage = '';
+
+      // reset errors:
+      this.resetErrors();
+
+      // build transaction array
+      const submission = this.buildTransaction();
+
+      let transactions = new Put();
+      transactions
+        .put(this.id, submission)
+        .catch(this.processErrors)
+        .then(this.processSuccess);
+    },
+    processSuccess: function (response) {
+      this.submitting = false;
+      this.$store.dispatch('fireflyiii/refreshCacheKey');
+      let message = {
+        level: 'success',
+        text: 'Updated transaction',
+        show: true,
+        action: {
+          show: true,
+          text: 'Go to transaction',
+          link: { name: 'transactions.show', params: {id: parseInt(response.data.data.id)} }
+        }
+      };
+      // store flash
+      this.$q.localStorage.set('flash', message);
+      if(this.doReturnHere) {
+        window.dispatchEvent(new CustomEvent('flash', {
+          detail: {
+            flash: this.$q.localStorage.getItem('flash')
+          }
+        }));
+      }
+      if(!this.doReturnHere) {
+        // return to previous page.
+        this.$router.go(-1);
+      }
+
+    },
+    resetErrors: function () {
+      let length = this.transactions.length;
+      let transaction = this.getDefaultTransaction();
+      for (let i = 0; i < length; i++) {
+        this.submissionErrors[i] = transaction.submissionError;
+        this.hasSubmissionErrors[i] = transaction.hasSubmissionError;
+      }
+    },
+    processErrors: function (error) {
+      if (error.response) {
+        let errors = error.response.data; // => the response payload
+        this.errorMessage = errors.message;
+        for (let i in errors.errors) {
+          // TODO rule and recurring have similar code
+          if (errors.errors.hasOwnProperty(i)) {
+            this.processSingleError(i, errors.errors[i]);
+          }
+        }
+      }
+      this.submitting = false;
+    },
+    processSingleError: function (key, errors) {
+      // lol dumbest way to explode "transactions.0.something" ever.
+      let index = parseInt(key.split('.')[1]);
+      let fieldName = key.split('.')[2];
+      switch (fieldName) {
+        case 'amount':
+        case 'date':
+        case 'description':
+          this.submissionErrors[index][fieldName] = errors[0];
+          this.hasSubmissionErrors[index][fieldName] = true;
+          break;
+        case 'source_id':
+        case 'source_name':
+          this.submissionErrors[index].source = errors[0];
+          this.hasSubmissionErrors[index].source = true;
+          break;
+        case 'destination_id':
+        case 'destination_name':
+          this.submissionErrors[index].source = errors[0];
+          this.hasSubmissionErrors[index].source = true;
+          break;
+      }
+    },
+    buildTransaction: function () {
+      const obj = {
+        transactions: []
+      };
+      this.transactions.forEach(element => {
+        let dateStr = formatISO(new Date(element.date + ' ' + element.time));
+        let row = {
+          type: element.type,
+          description: element.description,
+          source_name: element.source,
+          destination_name: element.destination,
+          amount: element.amount,
+          date: dateStr
+        };
+        obj.transactions.push(row);
+      });
+      return obj;
+    },
+    getDefaultTransaction: function () {
+      let date = '';
+      let time = '00:00';
+
+      if (0 === this.transactions.length) {
+        date = format(new Date, 'yyyy-MM-dd');
+      }
+
+      return {
+        submissionError: {
+          description: '',
+          amount: '',
+          date: '',
+          source: '',
+          destination: '',
+        },
+        hasSubmissionError: {
+          description: false,
+          amount: false,
+          date: false,
+          source: false,
+          destination: false,
+        },
+        transaction: {
+          description: '',
+          date: date,
+          time: time,
+          amount: 0,
+
+          // source and destination
+          source: '',
+          destination: '',
+
+          // categorisation
+          budget: '',
+          category: '',
+          subscription: '',
+
+          // custom dates
+          interest_date: '',
+          book_date: '',
+          process_date: '',
+          due_date: '',
+          payment_date: '',
+          invoice_date: '',
+        }
+      };
+      // date: "",
+      // amount: "",
+      // category: "",
+      // piggy_bank: 0,
+      // errors: {
+      //   source_account: [],
+      //   destination_account: [],
+      //   description: [],
+      //   amount: [],
+      //   date: [],
+      //   budget_id: [],
+      //   bill_id: [],
+      //   foreign_amount: [],
+      //   category: [],
+      //   piggy_bank: [],
+      //   tags: [],
+      //   custom fields:
+      // custom_errors: {
+      //   interest_date: [],
+      //   book_date: [],
+      //   process_date: [],
+      //   due_date: [],
+      //   payment_date: [],
+      //   invoice_date: [],
+      //   internal_reference: [],
+      //   notes: [],
+      //   attachments: [],
+      //   external_uri: [],
+      // },
+      // },
+      // budget: 0,
+      // bill: 0,
+      // tags: [],
+      // custom_fields: {
+      //   "interest_date": "",
+      //   "book_date": "",
+      //   "process_date": "",
+      //   "due_date": "",
+      //   "payment_date": "",
+      //   "invoice_date": "",
+      //   "internal_reference": "",
+      //   "notes": "",
+      //   "attachments": [],
+      //   "external_uri": "",
+      // },
+      // foreign_amount: {
+      //   amount: "",
+      //   currency_id: 0
+      // },
+      // source_account: {
+      //   id: 0,
+      //   name: "",
+      //   type: "",
+      //   currency_id: 0,
+      //   currency_name: '',
+      //   currency_code: '',
+      //   currency_decimal_places: 2,
+      //   allowed_types: ['Asset account', 'Revenue account', 'Loan', 'Debt', 'Mortgage'],
+      //   default_allowed_types: ['Asset account', 'Revenue account', 'Loan', 'Debt', 'Mortgage']
+      // },
+      // destination_account: {
+      //   id: 0,
+      //   name: "",
+      //   type: "",
+      //   currency_id: 0,
+      //   currency_name: '',
+      //   currency_code: '',
+      //   currency_decimal_places: 2,
+      //   allowed_types: ['Asset account', 'Expense account', 'Loan', 'Debt', 'Mortgage'],
+      //   default_allowed_types: ['Asset account', 'Expense account', 'Loan', 'Debt', 'Mortgage']
+      // }
+      // });
+      // if (this.transactions.length === 1) {
+      //   // console.log('Length == 1, set date to today.');
+      //   // set first date.
+      //   let today = new Date();
+      //   this.transactions[0].date = today.getFullYear() + '-' + ("0" + (today.getMonth() + 1)).slice(-2) + '-' + ("0" + today.getDate()).slice(-2);
+      //   // call for extra clear thing:
+      //   // this.clearSource(0);
+      //   //this.clearDestination(0);
+      // }
+      // ];
+      // };
+    }
+  },
+  preFetch() {
+
+  }
+}
+</script>
diff --git a/frontend/src/pages/transactions/Index.vue b/frontend/src/pages/transactions/Index.vue
new file mode 100644
index 0000000000..f853b18972
--- /dev/null
+++ b/frontend/src/pages/transactions/Index.vue
@@ -0,0 +1,154 @@
+<template>
+  <q-page>
+
+    <!-- insert LargeTable -->
+    <LargeTable ref="table"
+                :title="$t('firefly.title_' + this.type)"
+                :rows="rows"
+                :loading="loading"
+                v-on:on-request="onRequest"
+                :rows-number="rowsNumber"
+                :rows-per-page="rowsPerPage"
+                :page="page"
+    >
+
+    </LargeTable>
+    <p>&nbsp;</p>
+    <p>&nbsp;</p>
+    <p>&nbsp;</p>
+    <p>&nbsp;</p>
+    <q-page-sticky position="bottom-right" :offset="[18, 18]">
+      <q-fab
+        label="Actions"
+        square
+        vertical-actions-align="right"
+        label-position="left"
+        color="green"
+        icon="fas fa-chevron-up"
+        direction="up"
+      >
+        <q-fab-action color="primary" square :to="{ name: 'transactions.create', params: {type: 'transfer'} }" icon="fas fa-exchange-alt" label="New transfer"/>
+        <q-fab-action color="primary" square :to="{ name: 'transactions.create', params: {type: 'deposit'} }" icon="fas fa-long-arrow-alt-right"
+                      label="New deposit"/>
+        <q-fab-action color="primary" square :to="{ name: 'transactions.create', params: {type: 'withdrawal'} }" icon="fas fa-long-arrow-alt-left"
+                      label="New withdrawal"/>
+
+      </q-fab>
+    </q-page-sticky>
+  </q-page>
+</template>
+
+<script>
+import {mapGetters, useStore} from "vuex";
+import List from "../../api/transactions/list";
+import LargeTable from "../../components/transactions/LargeTable";
+import Parser from "../../api/transactions/parser";
+
+export default {
+  name: 'Index',
+  components: {LargeTable},
+  watch: {
+    $route(to) {
+      // react to route changes...
+      if ('transactions.index' === to.name) {
+        this.type = to.params.type;
+        this.page = 1;
+
+        // update meta for breadcrumbs and page title:
+        //this.$route.meta.pageTitle = 'firefly.title_' + this.type;
+        //this.$route.meta.breadcrumbs = [{title: 'title_' + this.type}];
+
+        this.triggerUpdate();
+      }
+    }
+  },
+  data() {
+    return {
+      loading: false,
+      rows: [],
+      columns: [
+        {name: 'type', label: ' ', field: 'type', style: 'width: 30px'},
+        {name: 'description', label: 'Description', field: 'description', align: 'left'},
+        {
+          name: 'amount', label: 'Amount', field: 'amount'
+        },
+        {
+          name: 'date', label: 'Date', field: 'date',
+          align: 'left',
+        },
+        {name: 'source', label: 'Source', field: 'source', align: 'left'},
+        {name: 'destination', label: 'Destination', field: 'destination', align: 'left'},
+        {name: 'category', label: 'Category', field: 'category', align: 'left'},
+        {name: 'budget', label: 'Budget', field: 'budget', align: 'left'},
+        {name: 'menu', label: ' ', field: 'menu', align: 'left'},
+      ],
+      type: 'withdrawal',
+      page: 1,
+      rowsPerPage: 50,
+      rowsNumber: 100,
+      range: {
+        start: null,
+        end: null
+      }
+    }
+  },
+  computed: {
+    ...mapGetters('fireflyiii', ['getRange', 'getCacheKey', 'getListPageSize']),
+  },
+  created() {
+    this.rowsPerPage = this.getListPageSize;
+  },
+  mounted() {
+    this.type = this.$route.params.type;
+    if (null === this.getRange.start || null === this.getRange.end) {
+      // subscribe, then update:
+      const $store = useStore();
+      $store.subscribe((mutation, state) => {
+        if ('fireflyiii/setRange' === mutation.type) {
+          this.range = {start: mutation.payload.start, end: mutation.payload.end};
+          this.triggerUpdate();
+        }
+      });
+    }
+    if (null !== this.getRange.start && null !== this.getRange.end) {
+      this.range = {start: this.getRange.start, end: this.getRange.end};
+      this.triggerUpdate();
+    }
+  },
+  methods: {
+    onRequest: function (payload) {
+      this.page = payload.page;
+      this.triggerUpdate();
+    },
+    formatAmount: function (currencyCode, amount) {
+      return Intl.NumberFormat('en-US', {style: 'currency', currency: currencyCode}).format(amount);
+    },
+    gotoTransaction: function (event, row) {
+      this.$router.push({name: 'transactions.show', params: {id: 1}});
+    },
+    triggerUpdate: function () {
+      if (this.loading) {
+        return;
+      }
+      if (null === this.range.start || null === this.range.end) {
+        return;
+      }
+      this.loading = true;
+      const list = new List();
+      const parser = new Parser;
+      this.rows = [];
+
+      list.list(this.type, this.page, this.getCacheKey).then(
+        (response) => {
+          let resp = parser.parseResponse(response);
+
+          this.rowsPerPage = resp.rowsPerPage;
+          this.rowsNumber = resp.rowsNumber;
+          this.rows = resp.rows;
+          this.loading = false;
+        }
+      );
+    },
+  }
+}
+</script>
diff --git a/frontend/src/pages/transactions/Show.vue b/frontend/src/pages/transactions/Show.vue
new file mode 100644
index 0000000000..b950d9f57a
--- /dev/null
+++ b/frontend/src/pages/transactions/Show.vue
@@ -0,0 +1,108 @@
+<!--
+  - Show.vue
+  - Copyright (c) 2022 james@firefly-iii.org
+  -
+  - This file is part of Firefly III (https://github.com/firefly-iii).
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program.  If not, see <https://www.gnu.org/licenses/>.
+  -->
+
+<template>
+  <q-page>
+    <div class="row q-mx-md">
+      <div class="col-12">
+        <!-- Balance chart -->
+        <q-card bordered>
+          <q-card-section>
+            <div class="text-h6">Transaction: {{ title }}
+            </div>
+          </q-card-section>
+          <q-card-section>
+            <div class="row" v-for="(transaction, index) in group.transactions">
+              <div class="col-12 q-mb-xs">
+                <strong>index {{ index }}</strong><br>
+                {{ transaction.description }}<br>
+                {{ transaction.amount }}<br>
+                {{ transaction.source_name }} --&gt; {{ transaction.destination_name }}
+              </div>
+            </div>
+          </q-card-section>
+        </q-card>
+      </div>
+    </div>
+  </q-page>
+</template>
+
+<script>
+import Get from "../../api/transactions/get";
+import LargeTable from "../../components/transactions/LargeTable";
+
+export default {
+  name: "Show",
+  data() {
+    return {
+      title: '',
+      group: {
+        transactions: []
+      },
+      rows: [],
+      rowsNumber: 1,
+      rowsPerPage: 10,
+      page: 1
+    }
+  },
+  created() {
+    this.id = parseInt(this.$route.params.id);
+    this.getTransaction();
+  },
+  mounted() {
+  },
+  components: {LargeTable},
+  methods: {
+    onRequest: function (payload) {
+      this.page = payload.page;
+      this.getTag();
+    },
+    getTransaction: function () {
+      let get = new Get;
+      this.loading = true;
+      get.get(this.id).then((response) => this.parseTransaction(response.data.data));
+    },
+    parseTransaction: function (data) {
+      this.group = {
+        group_title: data.attributes.group_title,
+        transactions: [],
+      };
+      if(null !== data.attributes.group_title) {
+        this.title = data.attributes.group_title;
+      }
+      for(let i in data.attributes.transactions) {
+        if(data.attributes.transactions.hasOwnProperty(i)) {
+          let transaction = data.attributes.transactions[i];
+          this.group.transactions.push(transaction);
+
+          if(0 === parseInt(i) && null === data.attributes.group_title) {
+            this.title = transaction.description;
+          }
+        }
+      }
+      this.loading = false;
+    },
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/frontend/src/pages/webhooks/Create.vue b/frontend/src/pages/webhooks/Create.vue
new file mode 100644
index 0000000000..b0fcd8b57e
--- /dev/null
+++ b/frontend/src/pages/webhooks/Create.vue
@@ -0,0 +1,260 @@
+<template>
+  <q-page>
+    <div class="row q-mx-md">
+      <div class="col-12">
+        <q-banner inline-actions rounded class="bg-orange text-white" v-if="'' !== errorMessage">
+          {{ errorMessage }}
+          <template v-slot:action>
+            <q-btn flat @click="dismissBanner" label="Dismiss"/>
+          </template>
+        </q-banner>
+      </div>
+    </div>
+    <div class="row q-mx-md q-mt-md">
+      <div class="col-12">
+        <q-card bordered>
+          <q-card-section>
+            <div class="text-h6">Info for new webhook</div>
+          </q-card-section>
+          <q-card-section>
+            <div class="row">
+              <div class="col-12 q-mb-xs">
+                <q-input
+                  :error-message="submissionErrors.title"
+                  :error="hasSubmissionErrors.title"
+                  bottom-slots :disable="disabledInput" type="text" clearable v-model="title" :label="$t('form.title')"
+                  outlined/>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-12 q-mb-xs">
+                <q-input
+                  :error-message="submissionErrors.url"
+                  :error="hasSubmissionErrors.url"
+                  bottom-slots :disable="disabledInput" type="text" clearable v-model="url" :label="$t('form.url')"
+                  outlined/>
+              </div>
+            </div>
+
+
+            <div class="row">
+              <div class="col-12 q-mb-xs">
+                <q-select
+                  :error-message="submissionErrors.response"
+                  :error="hasSubmissionErrors.response"
+                  bottom-slots
+                  :disable="disabledInput"
+                  outlined
+                  v-model="response"
+                  emit-value class="q-pr-xs"
+                  map-options :options="responses" label="Response"/>
+              </div>
+            </div>
+
+            <div class="row">
+              <div class="col-12 q-mb-xs">
+                <q-select
+                  :error-message="submissionErrors.delivery"
+                  :error="hasSubmissionErrors.delivery"
+                  bottom-slots
+                  :disable="disabledInput"
+                  outlined
+                  v-model="delivery"
+                  emit-value class="q-pr-xs"
+                  map-options :options="deliveries" label="Delivery"/>
+              </div>
+            </div>
+
+
+            <div class="row">
+              <div class="col-12 q-mb-xs">
+                <q-select
+                  :error-message="submissionErrors.trigger"
+                  :error="hasSubmissionErrors.trigger"
+                  bottom-slots
+                  :disable="disabledInput"
+                  outlined
+                  v-model="trigger"
+                  emit-value class="q-pr-xs"
+                  map-options :options="triggers" label="Triggers"/>
+              </div>
+            </div>
+          </q-card-section>
+        </q-card>
+      </div>
+    </div>
+
+    <div class="row q-mx-md">
+      <div class="col-12">
+        <q-card class="q-mt-xs">
+          <q-card-section>
+            <div class="row">
+              <div class="col-12 text-right">
+                <q-btn :disable="disabledInput" color="primary" label="Submit" @click="submitWebhook"/>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-12 text-right">
+                <q-checkbox :disable="disabledInput" v-model="doReturnHere" left-label
+                            label="Return here to create another one"/>
+                <br/>
+                <q-checkbox v-model="doResetForm" left-label :disable="!doReturnHere || disabledInput"
+                            label="Reset form after submission"/>
+              </div>
+            </div>
+          </q-card-section>
+        </q-card>
+      </div>
+    </div>
+
+  </q-page>
+</template>
+
+<script>
+import Post from "../../api/webhooks/post";
+import {mapGetters} from "vuex";
+import {getCacheKey} from "../../store/fireflyiii/getters";
+
+export default {
+  name: 'Create',
+  data() {
+    return {
+      submissionErrors: {},
+      hasSubmissionErrors: {},
+      submitting: false,
+      doReturnHere: false,
+      doResetForm: false,
+      errorMessage: '',
+      balance_input_mask: '#.##',
+
+      // values:
+      triggers: [
+        {value: 'TRIGGER_STORE_TRANSACTION', label: 'When transaction stored'},
+        {value: 'TRIGGER_UPDATE_TRANSACTION', label: 'When transaction updated'},
+        {value: 'TRIGGER_DESTROY_TRANSACTION', label: 'When transaction deleted'}
+      ],
+
+      responses: [
+        {value: 'RESPONSE_TRANSACTIONS', label: 'Send transaction'},
+        {value: 'RESPONSE_ACCOUNTS', label: 'Send accounts'},
+        {value: 'RESPONSE_NONE', label: 'Send nothing'},
+      ],
+      deliveries: [
+        {value: 'DELIVERY_JSON', label: 'JSON'}
+      ],
+
+
+      // webhook fields:
+      title: '',
+      url: '',
+      response: 'RESPONSE_TRANSACTIONS',
+      delivery: 'DELIVERY_JSON',
+      trigger: 'TRIGGER_STORE_TRANSACTION',
+    }
+  },
+  watch: {},
+  computed: {
+    ...mapGetters('fireflyiii', ['getCacheKey']),
+    disabledInput: function () {
+      return this.submitting;
+    }
+  },
+  created() {
+    this.resetForm();
+  },
+  methods: {
+    resetForm: function () {
+      this.title = '';
+    },
+    resetErrors: function () {
+      this.submissionErrors =
+        {
+          title: '',
+          url: '',
+          response: '',
+          delivery: '',
+          trigger: '',
+        };
+      this.hasSubmissionErrors = {
+        title: false,
+        url: false,
+        response: false,
+        delivery: false,
+        trigger: false,
+      };
+    },
+    submitWebhook: function () {
+      this.submitting = true;
+      this.errorMessage = '';
+
+      // reset errors:
+      this.resetErrors();
+
+      // build category array
+      const submission = this.buildWebhook();
+
+      (new Post())
+        .post(submission)
+        .catch(this.processErrors)
+        .then(this.processSuccess);
+    },
+    buildWebhook: function () {
+      return {
+        title: this.title,
+        url: this.url,
+        response: this.response,
+        delivery: this.delivery,
+        trigger: this.trigger,
+        active: true,
+      };
+    },
+    dismissBanner: function () {
+      this.errorMessage = '';
+    },
+    processSuccess: function (response) {
+      if (!response) {
+        return;
+      }
+      this.submitting = false;
+      let message = {
+        level: 'success',
+        text: 'I am new webhook',
+        show: true,
+        action: {
+          show: true,
+          text: 'Go to webhook',
+          link: {name: 'webhooks.show', params: {id: parseInt(response.data.data.id)}}
+        }
+      };
+      // store flash
+      this.$q.localStorage.set('flash', message);
+      if (this.doReturnHere) {
+        window.dispatchEvent(new CustomEvent('flash', {
+          detail: {
+            flash: this.$q.localStorage.getItem('flash')
+          }
+        }));
+      }
+      if (!this.doReturnHere) {
+        // return to previous page.
+        this.$router.go(-1);
+      }
+
+    },
+    processErrors: function (error) {
+      if (error.response) {
+        let errors = error.response.data; // => the response payload
+        this.errorMessage = errors.message;
+        console.log(errors);
+        for (let i in errors.errors) {
+          if (errors.errors.hasOwnProperty(i)) {
+            this.submissionErrors[i] = errors.errors[i][0];
+            this.hasSubmissionErrors[i] = true;
+          }
+        }
+      }
+      this.submitting = false;
+    },
+  }
+}
+</script>
diff --git a/frontend/src/pages/webhooks/Edit.vue b/frontend/src/pages/webhooks/Edit.vue
new file mode 100644
index 0000000000..2f1d408f70
--- /dev/null
+++ b/frontend/src/pages/webhooks/Edit.vue
@@ -0,0 +1,266 @@
+<template>
+  <q-page>
+    <div class="row q-mx-md">
+      <div class="col-12">
+        <q-banner inline-actions rounded class="bg-orange text-white" v-if="'' !== errorMessage">
+          {{ errorMessage }}
+          <template v-slot:action>
+            <q-btn flat @click="dismissBanner" label="Dismiss"/>
+          </template>
+        </q-banner>
+      </div>
+    </div>
+    <div class="row q-mx-md q-mt-md">
+      <div class="col-12">
+        <q-card bordered>
+          <q-card-section>
+            <div class="text-h6">Edit webhook</div>
+          </q-card-section>
+          <q-card-section>
+            <div class="row">
+              <div class="col-12 q-mb-xs">
+                <q-input
+                  :error-message="submissionErrors.title"
+                  :error="hasSubmissionErrors.title"
+                  bottom-slots :disable="disabledInput" type="text" clearable v-model="title" :label="$t('form.title')"
+                  outlined/>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-12 q-mb-xs">
+                <q-input
+                  :error-message="submissionErrors.url"
+                  :error="hasSubmissionErrors.url"
+                  bottom-slots :disable="disabledInput" type="text" clearable v-model="url" :label="$t('form.url')"
+                  outlined/>
+              </div>
+            </div>
+
+
+            <div class="row">
+              <div class="col-12 q-mb-xs">
+                <q-select
+                  :error-message="submissionErrors.response"
+                  :error="hasSubmissionErrors.response"
+                  bottom-slots
+                  :disable="disabledInput"
+                  outlined
+                  v-model="response"
+                  emit-value class="q-pr-xs"
+                  map-options :options="responses" label="Response"/>
+              </div>
+            </div>
+
+            <div class="row">
+              <div class="col-12 q-mb-xs">
+                <q-select
+                  :error-message="submissionErrors.delivery"
+                  :error="hasSubmissionErrors.delivery"
+                  bottom-slots
+                  :disable="disabledInput"
+                  outlined
+                  v-model="delivery"
+                  emit-value class="q-pr-xs"
+                  map-options :options="deliveries" label="Delivery"/>
+              </div>
+            </div>
+
+
+            <div class="row">
+              <div class="col-12 q-mb-xs">
+                <q-select
+                  :error-message="submissionErrors.trigger"
+                  :error="hasSubmissionErrors.trigger"
+                  bottom-slots
+                  :disable="disabledInput"
+                  outlined
+                  v-model="trigger"
+                  emit-value class="q-pr-xs"
+                  map-options :options="triggers" label="Triggers"/>
+              </div>
+            </div>
+
+          </q-card-section>
+        </q-card>
+      </div>
+    </div>
+
+    <div class="row q-mx-md">
+      <div class="col-12">
+        <q-card class="q-mt-xs">
+          <q-card-section>
+            <div class="row">
+              <div class="col-12 text-right">
+                <q-btn :disable="disabledInput" color="primary" label="Update" @click="submitWebhook"/>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-12 text-right">
+                <q-checkbox :disable="disabledInput" v-model="doReturnHere" left-label label="Return here"/>
+              </div>
+            </div>
+          </q-card-section>
+        </q-card>
+      </div>
+    </div>
+
+  </q-page>
+</template>
+
+<script>
+import Get from "../../api/webhooks/get";
+import Put from "../../api/webhooks/put";
+
+export default {
+  name: "Edit",
+  data() {
+    return {
+      submissionErrors: {},
+      hasSubmissionErrors: {},
+      submitting: false,
+      doReturnHere: false,
+      doResetForm: false,
+      errorMessage: '',
+
+      // webhook options
+      triggers: [
+        {value: 'TRIGGER_STORE_TRANSACTION', label: 'When transaction stored'},
+        {value: 'TRIGGER_UPDATE_TRANSACTION', label: 'When transaction updated'},
+        {value: 'TRIGGER_DESTROY_TRANSACTION', label: 'When transaction deleted'}
+      ],
+
+      responses: [
+        {value: 'RESPONSE_TRANSACTIONS', label: 'Send transaction'},
+        {value: 'RESPONSE_ACCOUNTS', label: 'Send accounts'},
+        {value: 'RESPONSE_NONE', label: 'Send nothing'},
+      ],
+      deliveries: [
+        {value: 'DELIVERY_JSON', label: 'JSON'}
+      ],
+
+      // webhook fields:
+      id: 0,
+      title: '',
+      url: '',
+      response: '',
+      delivery: '',
+      trigger: '',
+    }
+  },
+  computed: {
+    disabledInput: function () {
+      return this.submitting;
+    }
+  },
+  created() {
+    this.id = parseInt(this.$route.params.id);
+    this.collectWebhook();
+  },
+  methods: {
+    collectWebhook: function () {
+      let get = new Get;
+      get.get(this.id).then((response) => this.parseWebhook(response));
+    },
+    parseWebhook: function (response) {
+      this.title = response.data.data.attributes.title;
+      this.url = response.data.data.attributes.url;
+      this.response = response.data.data.attributes.response;
+      this.delivery = response.data.data.attributes.delivery;
+      this.trigger = response.data.data.attributes.trigger;
+    },
+    resetErrors: function () {
+      this.submissionErrors =
+        {
+          title: '',
+          url: '',
+          response: '',
+          delivery: '',
+          trigger: '',
+        };
+      this.hasSubmissionErrors = {
+        title: false,
+        url: false,
+        response: false,
+        delivery: false,
+        trigger: false,
+      };
+    },
+    submitWebhook: function () {
+      this.submitting = true;
+      this.errorMessage = '';
+
+      // reset errors:
+      this.resetErrors();
+
+      // build account array
+      const submission = this.buildWebhook();
+
+      (new Put())
+        .put(this.id, submission)
+        .catch(this.processErrors)
+        .then(this.processSuccess);
+    },
+    buildWebhook: function () {
+      return {
+        title: this.title,
+        url: this.url,
+        response: this.response,
+        delivery: this.delivery,
+        trigger: this.trigger
+      };
+    },
+    dismissBanner: function () {
+      this.errorMessage = '';
+    },
+    processSuccess: function (response) {
+      this.$store.dispatch('fireflyiii/refreshCacheKey');
+      if (!response) {
+        return;
+      }
+      this.submitting = false;
+      let message = {
+        level: 'success',
+        text: 'Webhook is updated',
+        show: true,
+        action: {
+          show: true,
+          text: 'Go to webhook',
+          link: {name: 'webhooks.show', params: {id: parseInt(response.data.data.id)}}
+        }
+      };
+      // store flash
+      this.$q.localStorage.set('flash', message);
+      if (this.doReturnHere) {
+        window.dispatchEvent(new CustomEvent('flash', {
+          detail: {
+            flash: this.$q.localStorage.getItem('flash')
+          }
+        }));
+      }
+      if (!this.doReturnHere) {
+        // return to previous page.
+        this.$router.go(-1);
+      }
+
+    },
+    processErrors: function (error) {
+      if (error.response) {
+        let errors = error.response.data; // => the response payload
+        this.errorMessage = errors.message;
+        console.log(errors);
+        for (let i in errors.errors) {
+          if (errors.errors.hasOwnProperty(i)) {
+            this.submissionErrors[i] = errors.errors[i][0];
+            this.hasSubmissionErrors[i] = true;
+          }
+        }
+      }
+      this.submitting = false;
+    },
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/frontend/src/pages/webhooks/Index.vue b/frontend/src/pages/webhooks/Index.vue
new file mode 100644
index 0000000000..c7b6c47007
--- /dev/null
+++ b/frontend/src/pages/webhooks/Index.vue
@@ -0,0 +1,166 @@
+<template>
+  <q-page>
+    <q-table
+      :title="$t('firefly.webhooks')"
+      :rows="rows"
+      :columns="columns"
+      row-key="id"
+      @request="onRequest"
+      v-model:pagination="pagination"
+      :loading="loading"
+      class="q-ma-md"
+    >
+      <template v-slot:header="props">
+        <q-tr :props="props">
+          <q-th
+            v-for="col in props.cols"
+            :key="col.name"
+            :props="props"
+          >
+            {{ col.label }}
+          </q-th>
+        </q-tr>
+      </template>
+      <template v-slot:body="props">
+        <q-tr :props="props">
+          <q-td key="title" :props="props">
+            <router-link :to="{ name: 'webhooks.show', params: {id: props.row.id} }" class="text-primary">
+              {{ props.row.title }}
+            </router-link>
+          </q-td>
+          <q-td key="menu" :props="props">
+            <q-btn-dropdown color="primary" label="Actions" size="sm">
+              <q-list>
+                <q-item clickable v-close-popup :to="{name: 'webhooks.edit', params: {id: props.row.id}}">
+                  <q-item-section>
+                    <q-item-label>Edit</q-item-label>
+                  </q-item-section>
+                </q-item>
+                <q-item clickable v-close-popup @click="deleteWebhook(props.row.id, props.row.title)">
+                  <q-item-section>
+                    <q-item-label>Delete</q-item-label>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-btn-dropdown>
+          </q-td>
+        </q-tr>
+      </template>
+    </q-table>
+    <q-page-sticky position="bottom-right" :offset="[18, 18]">
+      <q-fab
+        label="Actions"
+        square
+        vertical-actions-align="right"
+        label-position="left"
+        color="green"
+        icon="fas fa-chevron-up"
+        direction="up"
+      >
+        <q-fab-action color="primary" square :to="{ name: 'webhooks.create'}" icon="fas fa-exchange-alt"
+                      label="New webhook"/>
+      </q-fab>
+    </q-page-sticky>
+  </q-page>
+</template>
+
+<script>
+import {mapGetters} from "vuex";
+import Destroy from "../../api/webhooks/destroy";
+import List from "../../api/webhooks/list";
+
+export default {
+  name: 'Index',
+  watch: {
+    $route(to) {
+      // react to route changes...
+      if ('webhooks.index' === to.name) {
+        this.page = 1;
+        this.updateBreadcrumbs();
+        this.triggerUpdate();
+      }
+    }
+  },
+  data() {
+    return {
+      rows: [],
+      pagination: {
+        sortBy: 'desc',
+        descending: false,
+        page: 1,
+        rowsPerPage: 5,
+        rowsNumber: 100
+      },
+      loading: false,
+      columns: [
+        {name: 'title', label: 'Title', field: 'title', align: 'left'},
+        {name: 'menu', label: ' ', field: 'menu', align: 'right'},
+      ],
+    }
+  },
+  computed: {
+    ...mapGetters('fireflyiii', ['getCacheKey', 'getListPageSize']),
+  },
+  created() {
+    this.pagination.rowsPerPage = this.getListPageSize;
+  },
+  mounted() {
+    this.triggerUpdate();
+  },
+  methods: {
+    deleteWebhook: function (id, name) {
+      this.$q.dialog({
+        title: 'Confirm',
+        message: 'Do you want to delete webhook "' + name + '"?',
+        cancel: true,
+        persistent: true
+      }).onOk(() => {
+        this.destroyWebhook(id);
+      });
+    },
+    destroyWebhook: function (id) {
+      let destr = new Destroy;
+      destr.destroy(id).then(() => {
+        this.$store.dispatch('fireflyiii/refreshCacheKey');
+        this.triggerUpdate();
+      });
+    },
+    updateBreadcrumbs: function () {
+      this.$route.meta.pageTitle = 'firefly.webhooks';
+      this.$route.meta.breadcrumbs = [{title: 'webhooks'}];
+    },
+    onRequest: function (props) {
+      this.page = props.pagination.page;
+      this.triggerUpdate();
+    },
+    triggerUpdate: function () {
+      if (this.loading) {
+        return;
+      }
+      this.loading = true;
+      const list = new List();
+      this.rows = [];
+      list.list(this.page, this.getCacheKey).then(
+        (response) => {
+          this.pagination.rowsPerPage = response.data.meta.pagination.per_page;
+          this.pagination.rowsNumber = response.data.meta.pagination.total;
+          this.pagination.page = this.page;
+
+          for (let i in response.data.data) {
+            if (response.data.data.hasOwnProperty(i)) {
+              let current = response.data.data[i];
+              let account = {
+                id: current.id,
+                title: current.attributes.title,
+              };
+              this.rows.push(account);
+            }
+          }
+          this.loading = false;
+        }
+      )
+      ;
+    }
+  }
+}
+</script>
diff --git a/frontend/src/pages/webhooks/Show.vue b/frontend/src/pages/webhooks/Show.vue
new file mode 100644
index 0000000000..ec936690f5
--- /dev/null
+++ b/frontend/src/pages/webhooks/Show.vue
@@ -0,0 +1,53 @@
+<template>
+  <q-page>
+    <div class="row q-mx-md">
+      <div class="col-12">
+        <!-- Balance chart -->
+        <q-card bordered>
+          <q-card-section>
+            <div class="text-h6">{{ webhook.title }}</div>
+          </q-card-section>
+          <q-card-section>
+            <div class="row">
+              <div class="col-12 q-mb-xs">
+                Name: {{ webhook.title }}<br>
+              </div>
+            </div>
+          </q-card-section>
+        </q-card>
+      </div>
+    </div>
+  </q-page>
+</template>
+
+<script>
+import Get from "../../api/webhooks/get";
+
+export default {
+  name: "Show",
+  data() {
+    return {
+      webhook: {},
+      id: 0
+    }
+  },
+  created() {
+      this.id = parseInt(this.$route.params.id);
+      this.getWebhook();
+  },
+  methods: {
+    getWebhook: function () {
+      (new Get).get(this.id).then((response) => this.parseWebhook(response));
+    },
+    parseWebhook: function (response) {
+      this.webhook = {
+        title: response.data.data.attributes.title,
+      };
+    },
+  }
+}
+</script>
+
+<style scoped>
+
+</style>