diff --git a/frontend/package.json b/frontend/package.json
index cae7256744..467f5c0902 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -37,6 +37,7 @@
         "v-calendar": "^2.1.5",
         "vue-chartjs": "^3.5.1",
         "vue-router": "^3.4.9",
+        "vue-typeahead-bootstrap": "^2.5.5",
         "vuex": "^3.6.0"
     }
 }
diff --git a/frontend/src/bootstrap.js b/frontend/src/bootstrap.js
index 3c47f882b3..69b9af9bad 100644
--- a/frontend/src/bootstrap.js
+++ b/frontend/src/bootstrap.js
@@ -23,6 +23,7 @@ import Vue from 'vue';
 import VueI18n from 'vue-i18n'
 import * as uiv from 'uiv';
 
+Vue.config.productionTip = false;
 
 // export jquery for others scripts to use
 window.$ = window.jQuery = require('jquery');
diff --git a/frontend/src/components/dashboard/TopBoxes.vue b/frontend/src/components/dashboard/TopBoxes.vue
index df221163ad..f6ba5b2249 100644
--- a/frontend/src/components/dashboard/TopBoxes.vue
+++ b/frontend/src/components/dashboard/TopBoxes.vue
@@ -27,7 +27,7 @@
         <div class="info-box-content">
           <span class="info-box-text">{{ $t("firefly.balance") }}</span>
           <!-- balance in preferred currency -->
-          <span class="info-box-number" v-for="balance in prefCurrencyBalances" :title="balance.sub_title">(x) {{ balance.value_parsed }}</span>
+          <span class="info-box-number" v-for="balance in prefCurrencyBalances" :title="balance.sub_title">{{ balance.value_parsed }}</span>
 
           <div class="progress bg-info">
             <div class="progress-bar" style="width: 0"></div>
@@ -35,7 +35,6 @@
           <!-- balance in not preferred currency -->
           <span class="progress-description">
                         <span v-for="(balance, index) in notPrefCurrencyBalances" :title="balance.sub_title">
-                          (y)
                           {{ balance.value_parsed }}<span v-if="index+1 !== notPrefCurrencyBalances.length">, </span>
                         </span>
                       <span v-if="0===notPrefCurrencyBalances.length">&nbsp;</span>
diff --git a/frontend/src/components/store/modules/transactions/create.js b/frontend/src/components/store/modules/transactions/create.js
index 32c2b3f9df..fb59ac23c8 100644
--- a/frontend/src/components/store/modules/transactions/create.js
+++ b/frontend/src/components/store/modules/transactions/create.js
@@ -18,12 +18,36 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
+let date = new Date;
 
 // initial state
 const state = () => ({
-    transactionType: 'any',
-    transactions: []
-})
+        transactionType: 'any',
+        transactions: [],
+        sourceAllowedTypes: ['Asset account', 'Revenue account', 'Loan', 'Debt', 'Mortgage'],
+        defaultTransaction: {
+            // basic
+            description: '',
+            date: date.toISOString().split('T')[0],
+            time: ('0' + date.getHours()).slice(-2) + ':' + ('0' + date.getMinutes()).slice(-2) + ':' + ('0' + date.getSeconds()).slice(-2),
+
+            // accounts:
+            source_account: {
+                id: 0,
+                name: "",
+                type: "",
+                currency_id: 0,
+                currency_name: '',
+                currency_code: '',
+                currency_decimal_places: 2
+            },
+            source_allowed_types: ['Asset account', 'Revenue account', 'Loan', 'Debt', 'Mortgage'],
+
+            // meta data
+            budget_id: 0
+        },
+    }
+)
 
 
 // getters
@@ -33,7 +57,13 @@ const getters = {
     },
     transactionType: state => {
         return state.transactionType;
-    }
+    },
+    defaultTransaction: state => {
+        return state.defaultTransaction;
+    },
+    sourceAllowedTypes: state => {
+        return state.sourceAllowedTypes;
+    },
     // // `getters` is localized to this module's getters
     // // you can use rootGetters via 4th argument of getters
     // someGetter (state, getters, rootState, rootGetters) {
@@ -50,12 +80,7 @@ const actions = {}
 // mutations
 const mutations = {
     addTransaction(state) {
-        state.transactions.push(
-            {
-                description: '',
-                date: new Date
-            }
-        );
+        state.transactions.push(state.defaultTransaction);
     },
     deleteTransaction(state, index) {
         this.state.transactions.splice(index, 1);
diff --git a/frontend/src/components/transactions/Create.vue b/frontend/src/components/transactions/Create.vue
index dd0673a62f..96cafb2738 100644
--- a/frontend/src/components/transactions/Create.vue
+++ b/frontend/src/components/transactions/Create.vue
@@ -25,125 +25,308 @@
         <div class="card">
           <div class="card-header">
             <h3 class="card-title">
-              {{ $t('firefly.new_transaction')}}
-              <span v-if="transactions.length > 1">({{ $t('firefly.single_split') }} {{ index + 1}} / {{ transactions.length }})</span>
+              <span v-if="0 === transactions.length">{{ $t('firefly.create_new_transaction') }}</span>
+              <span v-if="transactions.length > 1">{{ $t('firefly.single_split') }} {{ index + 1 }} / {{ transactions.length }}</span>
             </h3>
-            <div v-if="transactions.length > 1" class="box-tools pull-right">
+            <div v-if="transactions.length > 1" class="card-tools">
               <button class="btn btn-xs btn-danger" type="button" v-on:click="deleteTransaction(index, $event)"><i
                   class="fa fa-trash"></i></button>
             </div>
           </div>
           <!-- /.card-header -->
           <div class="card-body">
-            <div id="accordion">
-              <!-- we are adding the .class so bootstrap.js collapse plugin detects it -->
-              <div class="card card-primary">
-                <div class="card-header">
-                  <h4 class="card-title">
-                    <a data-toggle="collapse" data-parent="#accordion" :href="'#collapseBasic' + index" class='' aria-expanded="true">
-                      {{ $t('firefly.basic_journal_information') }}
-                    </a>
-                  </h4>
-                </div>
-                <div :id="'collapseBasic' + index" class="panel-collapse in collapse show" style=''>
-                  <div class="card-body">
-                    <div class="row">
-                      <div class="col">
-                        <p>
-                          Source
-                        </p>
-                      </div>
-                      <div class="col">
-                        <p>
-                          Amount
-                          <br>
-                          foreign amount
-                        </p>
-                      </div>
-                      <div class="col">
-                        <p>
-                          Destination
-                        </p>
-                      </div>
-                    </div>
-                    <div class="row">
-                      <div class="col">
-                        <TransactionDescription
-                            :description="transactions[index].description"
-                            :index="index"
-                        ></TransactionDescription>
-                      </div>
-                    </div>
-                    <div class="row">
-                      <div class="col">
-                        <!--
-                        <TransactionDate
-                            :description="transactions[index].date"
-                            :index="index"
-                        ></TransactionDate>
-                        -->
-                        Date and time.
-                      </div>
-                      <div class="col">
-                        Other date
-                      </div>
-                      <div class="col">
-                        Other date
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div class="card card-secondary">
-                <div class="card-header">
-                  <h4 class="card-title">
-                    <a data-toggle="collapse" data-parent="#accordion" :href="'#collapseMeta' + index" class="collapsed" aria-expanded="false">
-                      {{ $t('firefly.transaction_journal_meta') }}
-                    </a>
-                  </h4>
-                </div>
-                <div :id="'collapseMeta' + index" class="panel-collapse collapse">
-                  <div class="card-body">
-                    <div class="row">
-                      <div class="col">
-                        Budget<br>
-                        Cat<br>
-                      </div>
-                      <div class="col">
-                        Bill<br>
-                        Tags<br>
-                        Piggy<br>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div class="card card-secondary">
-                <div class="card-header">
-                  <h4 class="card-title">
-                    <a data-toggle="collapse" data-parent="#accordion" :href="'#collapseExtra' + index" class="collapsed" aria-expanded="false">
-                      {{ $t('firefly.transaction_journal_extra') }}
-                    </a>
-                  </h4>
-                </div>
-                <div :id="'collapseExtra' + index" class="panel-collapse collapse">
-                  <div class="card-body">
-                    <div class="row">
-                      <div class="col">
-                        Internal ref<br/>
-                        External URL<br/>
-                        Notes
-                      </div>
-                      <div class="col">
-                        Transaction links<br/>
-                        Attachments
-                      </div>
+            <h4>{{ $t('firefly.basic_journal_information') }}</h4>
 
-                    </div>
+            <!-- description etc, 3 rows -->
+            <div class="row">
+              <div class="col">
+                <TransactionDescription
+                    :description="transactions[index].description"
+                    :index="index"
+                ></TransactionDescription>
+              </div>
+            </div>
+
+            <div class="row">
+              <div class="col">
+                <p class="d-block d-sm-none">XS</p>
+                <p class="d-none d-sm-block d-md-none">SM</p>
+                <p class="d-none d-md-block d-lg-none">MD</p>
+                <p class="d-none d-lg-block d-xl-none">LG</p>
+                <p class="d-none d-xl-block">XL</p>
+              </div>
+            </div>
+
+            <!-- source and destination -->
+            <div class="row">
+              <div class="col-xl-5 col-lg-5 col-md-10 col-sm-12 col-xs-12">
+                <!-- SOURCE -->
+                <TransactionAccount
+                    :selectedAccount="transactions[index].source_account"
+                    direction="source"
+                    :index="index"
+                  />
+              </div>
+              <!-- switcharoo! -->
+              <div class="col-xl-2 col-lg-2 col-md-2 col-sm-12 text-center d-none d-sm-block">
+                <!--
+                <div class="btn-group d-flex">
+                  <button class="btn btn-light">&harr;</button>
+                </div>
+                -->
+              </div>
+
+              <!-- destination -->
+              <div class="col-xl-5 col-lg-5 col-md-12 col-sm-12 col-xs-12">
+                <!--
+                <div class="input-group">
+                  <input
+                      title="Dest"
+                      autocomplete="off"
+                      autofocus
+                      class="form-control"
+                      name="something[]"
+                      type="text"
+                      placeholder="Dest"
+                  >
+                </div>
+                -->
+              </div>
+            </div>
+
+            <!-- amount  -->
+            <div class="row">
+              <div class="col-xl-5 col-lg-5 col-md-10 col-sm-12 col-xs-12">
+                <!-- SOURCE -->
+                <!--
+                <div class="form-group">
+                  <div class="text-xs">{{ $t('firefly.amount') }}</div>
+                  <div class="input-group">
+                    <input
+                        title="Amount"
+                        autocomplete="off"
+                        autofocus
+                        class="form-control"
+                        name="amount[]"
+                        type="number"
+                        placeholder="Amount"
+                    >
+                  </div>
+                </div>
+                -->
+              </div>
+              <div class="col-xl-2 col-lg-2 col-md-2 col-sm-12 text-center d-none d-sm-block">
+                <!-- SELECT FOR FOREIGN -->
+                <!--
+                (select)
+                -->
+              </div>
+              <div class="col-xl-5 col-lg-5 col-md-12 col-sm-12 col-xs-12">
+                <!-- FOREIGN AMOUNT -->
+                <!--
+                Foreign
+                -->
+              </div>
+            </div>
+
+            <!-- dates -->
+            <div class="row">
+              <div class="col">
+                <TransactionDate
+                    :date="transactions[index].date"
+                    :time="transactions[index].time"
+                    :index="index"
+                />
+              </div>
+              <div class="col">
+                <!-- TODO other time slots -->
+                <div class="form-group">
+                  <div class="text-xs d-none d-lg-block d-xl-block">
+                    other dates
+                  </div>
+                  <div class="input-group">
+                    <input class="form-control" type="date" value="2020-12-12">
+                  </div>
+                </div>
+                <div class="form-group">
+                  <div class="text-xs d-none d-lg-block d-xl-block">
+                    other dates
+                  </div>
+                  <div class="input-group">
+                    <input class="form-control" type="date" value="2020-12-12">
                   </div>
                 </div>
               </div>
             </div>
+
+<!--
+            <p class="d-block d-sm-none">XS</p>
+            <p class="d-none d-sm-block d-md-none">SM</p>
+            <p class="d-none d-md-block d-lg-none">MD</p>
+            <p class="d-none d-lg-block d-xl-none">LG</p>
+            <p class="d-none d-xl-block">XL</p>
+
+
+            <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
+
+            {# top stuff #}
+            <div class="row">
+              <div class="col">
+
+              </div>
+            </div>
+
+
+-->
+
+            <div class="row">
+              <div class="col">
+                <!-- AMOUNT -->
+                <!--
+                <div class="input-group">
+                  <input
+                      title="Amount"
+                      autocomplete="off"
+                      autofocus
+                      class="form-control"
+                      name="something[]"
+                      type="text"
+                      placeholder="Amount"
+                  >
+                </div>
+                <div class="input-group">
+                  <input
+                      title="Foreign"
+                      autocomplete="off"
+                      autofocus
+                      class="form-control"
+                      name="something[]"
+                      type="text"
+                      placeholder="Foreign"
+                  >
+                </div>
+                -->
+              </div>
+              <div class="col">
+
+              </div>
+            </div>
+
+
+            <h4>{{ $t('firefly.transaction_journal_meta') }}</h4>
+
+            <!-- meta -->
+            <div class="row">
+              <div class="col">
+                <TransactionBudget
+                    :budget_id="transactions[index].budget_id"
+                    :index="index"
+                />
+                <div class="input-group">
+                  <input
+                      title="Category"
+                      autocomplete="off"
+                      autofocus
+                      class="form-control"
+                      name="something[]"
+                      type="text"
+                      placeholder="Category"
+                  >
+                </div>
+              </div>
+              <div class="col">
+                <div class="input-group">
+                  <input
+                      title="Bill"
+                      autocomplete="off"
+                      autofocus
+                      class="form-control"
+                      name="something[]"
+                      type="text"
+                      placeholder="Bill"
+                  >
+                </div>
+                <div class="input-group">
+                  <input
+                      title="Tags"
+                      autocomplete="off"
+                      autofocus
+                      class="form-control"
+                      name="something[]"
+                      type="text"
+                      placeholder="Tags"
+                  >
+                </div>
+                <div class="input-group">
+                  <input
+                      title="Piggy"
+                      autocomplete="off"
+                      autofocus
+                      class="form-control"
+                      name="something[]"
+                      type="text"
+                      placeholder="Piggy"
+                  >
+                </div>
+              </div>
+            </div>
+
+            <h4>{{ $t('firefly.transaction_journal_extra') }}</h4>
+
+            <div class="row">
+              <div class="col">
+                <div class="input-group">
+                  <input
+                      title="internal ref"
+                      autocomplete="off"
+                      autofocus
+                      class="form-control"
+                      name="something[]"
+                      type="text"
+                      placeholder="internal ref"
+                  >
+                </div>
+                <div class="input-group">
+                  <input
+                      title="Piggy"
+                      autocomplete="off"
+                      autofocus
+                      class="form-control"
+                      name="something[]"
+                      type="text"
+                      placeholder="external url"
+                  >
+                </div>
+                <div class="input-group">
+                  <textarea class="form-control" placeholder="Notes"></textarea>
+                </div>
+              </div>
+              <div class="col">
+                <div class="input-group">
+                  <input
+                      title="Piggy"
+                      autocomplete="off"
+                      autofocus
+                      class="form-control"
+                      name="something[]"
+                      type="text"
+                      placeholder="transaction links"
+                  >
+                </div>
+                <div class="input-group">
+                  <input
+                      title="Piggy"
+                      autocomplete="off"
+                      autofocus
+                      class="form-control"
+                      name="something[]"
+                      type="text"
+                      placeholder="piggy bank"
+                  >
+                </div>
+              </div>
+
+            </div>
           </div>
           <!-- /.card-body -->
         </div>
@@ -177,14 +360,17 @@
 
 <script>
 import TransactionDescription from "./TransactionDescription";
+import TransactionDate from "./TransactionDate";
+import TransactionBudget from "./TransactionBudget";
 import {createNamespacedHelpers} from 'vuex'
+import TransactionAccount from "./TransactionAccount";
 
 const {mapState, mapGetters, mapActions, mapMutations} = createNamespacedHelpers('transactions/create')
 
 
 export default {
   name: "Create",
-  components: {TransactionDescription},
+  components: {TransactionAccount, TransactionBudget, TransactionDescription, TransactionDate},
   created() {
     this.addTransaction();
   },
@@ -245,7 +431,13 @@ export default {
      */
     convertSplit: function (key, array) {
       let currentSplit = {
-        description: array.description
+        // basic
+        description: array.description,
+        date: array.date + ' ' + array.time,
+
+        // meta
+        budget_id: array.budget_id,
+
       };
 
       // return it.
diff --git a/frontend/src/components/transactions/TransactionAccount.vue b/frontend/src/components/transactions/TransactionAccount.vue
new file mode 100644
index 0000000000..a045dfee11
--- /dev/null
+++ b/frontend/src/components/transactions/TransactionAccount.vue
@@ -0,0 +1,154 @@
+<!--
+  - TransactionAccount.vue
+  - Copyright (c) 2020 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="form-group">
+    <div class="pl-1 pb-2 pt-3">
+      Selected account: <span v-if="selectedAccount">{{ selectedAccount.name }}</span>
+    </div>
+    <vue-typeahead-bootstrap
+        v-model="account"
+        :data="accounts"
+        inputName="source[]"
+        :serializer="item => item.name"
+        @hit="selectedAccount = $event"
+        :minMatchingChars="3"
+        :placeholder="$t('firefly.source_account')"
+        @input="lookupAccount"
+    >
+      <template slot="append">
+        <div class="input-group-append">
+          <button class="btn btn-outline-secondary" type="button"><i class="far fa-trash-alt"></i></button>
+        </div>
+      </template>
+      <template slot="suggestion" slot-scope="{ data, htmlText }">
+        <div class="d-flex align-items-center">
+          <!-- Note: the v-html binding is used, as htmlText contains
+               the suggestion text highlighted with <strong> tags -->
+          <span class="ml-4" v-html="htmlText"></span>
+        </div>
+      </template>
+    </vue-typeahead-bootstrap>
+  </div>
+</template>
+
+<script>
+/*
+- you get an object from the parent.
+- this is the selected account.
+
+
+ */
+
+import VueTypeaheadBootstrap from 'vue-typeahead-bootstrap';
+import {debounce} from 'lodash';
+import {createNamespacedHelpers} from "vuex";
+
+const {mapState, mapGetters, mapActions, mapMutations} = createNamespacedHelpers('transactions/create')
+
+export default {
+  name: "TransactionAccount",
+  components: {VueTypeaheadBootstrap},
+  props: ['index', 'direction'],
+  data() {
+    return {
+      query: '',
+      accounts: [],
+      account: '',
+      accountTypes: []
+    }
+  },
+  methods: {
+    ...mapMutations(
+        [
+          'updateField',
+        ],
+    ),
+    lookupAccount: debounce(function () {
+      console.log('lookup "' + this.account + '"');
+
+      if(0===this.accountTypes.length) {
+        // set the types from the default types for this direction:
+        this.accountTypes = 'source' === this.direction ? this.sourceAllowedTypes : [];
+      }
+
+      // the allowed types array comes from the found (selected) account.
+      // so whatever the user clicks and is stored into selected account.
+      // must also be expanded with the allowed account types for this
+      // search. which in turn depends more on the opposing account than the results of
+      // this particular search and can be changed externally rather than "right here".
+
+      // which means that the allowed types should be separate from the selected account
+      // in the default transaction.
+
+      let accountAutoCompleteURL =
+          document.getElementsByTagName('base')[0].href +
+          'api/v1/autocomplete/accounts' +
+          '?types=' +
+          this.accountTypes.join(',') +
+          '&query=' + this.account;
+      console.log('Auto complete URI is now ' + accountAutoCompleteURL);
+
+      // in practice this action should be debounced
+      axios.get(accountAutoCompleteURL)
+          .then(response => {
+            console.log('Found ' + response.data.length + ' results.');
+            this.accounts = response.data;
+          })
+    }, 500)
+  },
+  computed: {
+    ...mapGetters([
+                    'transactionType',
+                    'transactions',
+                    'defaultTransaction',
+                    'sourceAllowedTypes'
+                  ]),
+    selectedAccount: {
+      get() {
+        let key = 'source' === this.direction ? 'source_account' : 'destination_account';
+        console.log('Will now get ' + key);
+        console.log(this.transactions[this.index][key]);
+        return this.transactions[this.index][key];
+      },
+      set(value) {
+        let key = 'source' === this.direction ? 'source_account' : 'destination_account';
+        console.log('Will now set ' + key + ' to:');
+        console.log(value);
+        if('object' !== typeof value) {
+          // make object manually.
+          let account = this.defaultTransaction.source_account;
+          account.name = value;
+          value = account;
+        }
+        if('object' === typeof value) {
+          console.log('user selected account object:');
+          console.log(value);
+        }
+        this.updateField({field: key, index: this.index, value: value});
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/transactions/TransactionBudget.vue b/frontend/src/components/transactions/TransactionBudget.vue
new file mode 100644
index 0000000000..b1b53b218b
--- /dev/null
+++ b/frontend/src/components/transactions/TransactionBudget.vue
@@ -0,0 +1,115 @@
+<!--
+  - TransactionBudget.vue
+  - Copyright (c) 2020 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="form-group">
+    <div class="text-xs d-none d-lg-block d-xl-block">
+      {{ $t('firefly.budget') }}
+    </div>
+    <div class="input-group">
+      <select
+          ref="budget"
+          :title="$t('firefly.budget')"
+          v-model="budget_id"
+          autocomplete="off"
+          class="form-control"
+          name="budget_id[]"
+          v-on:submit.prevent
+      >
+        <option v-for="budget in this.budgetList" :value="budget.id" :label="budget.name">{{ budget.name }}</option>
+
+      </select>
+    </div>
+  </div>
+</template>
+
+<script>
+
+import {createNamespacedHelpers} from "vuex";
+
+const {mapState, mapGetters, mapActions, mapMutations} = createNamespacedHelpers('transactions/create')
+
+export default {
+  props: ['index'],
+  name: "TransactionBudget",
+  data() {
+    return {
+      budgetList: []
+    }
+  },
+  created() {
+    this.collectData();
+  },
+  methods: {
+    ...mapMutations(
+        [
+          'updateField',
+        ],
+    ),
+    collectData() {
+      this.budgetList.push(
+          {
+            id: 0,
+            name: this.$t('firefly.no_budget'),
+          }
+      );
+      this.getBudgets();
+    },
+    getBudgets() {
+      axios.get('./api/v1/budgets')
+          .then(response => {
+                  this.parseBudgets(response.data);
+                }
+          );
+    },
+    parseBudgets(data) {
+      for (let key in data.data) {
+        if (data.data.hasOwnProperty(key) && /^0$|^[1-9]\d*$/.test(key) && key <= 4294967294) {
+          let current = data.data[key];
+          this.budgetList.push(
+              {
+                id: parseInt(current.id),
+                name: current.attributes.name
+              }
+          );
+        }
+      }
+    },
+  },
+  computed: {
+    ...mapGetters([
+                    'transactionType',
+                    'transactions',
+                  ]),
+    budget_id: {
+      get() {
+        return this.transactions[this.index].budget_id;
+      },
+      set(value) {
+        this.updateField({field: 'budget_id', index: this.index, value: value});
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/transactions/TransactionDate.vue b/frontend/src/components/transactions/TransactionDate.vue
new file mode 100644
index 0000000000..ed5be152b4
--- /dev/null
+++ b/frontend/src/components/transactions/TransactionDate.vue
@@ -0,0 +1,100 @@
+<!--
+  - TransactionDate.vue
+  - Copyright (c) 2020 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="form-group">
+    <div class="text-xs d-none d-lg-block d-xl-block">
+      {{ $t('firefly.date_and_time') }}
+    </div>
+    <div class="input-group">
+      <input
+          class="form-control"
+          type="date"
+          ref="date"
+          :title="$t('firefly.date')"
+          v-model="date"
+          :disabled="index > 0"
+          autocomplete="off"
+          name="date[]"
+          :placeholder="date"
+          v-on:submit.prevent
+      >
+      <input
+          class="form-control"
+          type="time"
+          ref="time"
+          :title="$t('firefly.time')"
+          v-model="time"
+          :disabled="index > 0"
+          autocomplete="off"
+          name="time[]"
+          :placeholder="time"
+          v-on:submit.prevent
+      >
+    </div>
+  </div>
+</template>
+
+<script>
+
+import {createNamespacedHelpers} from "vuex";
+
+const {mapState, mapGetters, mapActions, mapMutations} = createNamespacedHelpers('transactions/create')
+
+export default {
+  name: "TransactionDate",
+  props: ['value', 'index'],
+  methods: {
+    ...mapMutations(
+        [
+          'updateField',
+        ],
+    ),
+  },
+  computed: {
+    ...mapGetters([
+                    'transactionType',
+                    'transactions',
+                  ]),
+    date: {
+      get() {
+        // always return first index.
+        return this.transactions[0].date;
+      },
+      set(value) {
+        this.updateField({field: 'date', index: this.index, value: value});
+      }
+    },
+    time: {
+      get() {
+        // always return first index.
+        return this.transactions[0].time;
+      },
+      set(value) {
+        this.updateField({field: 'time', index: this.index, value: value});
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/transactions/TransactionDescription.vue b/frontend/src/components/transactions/TransactionDescription.vue
index 26c2e11e0c..6f55bdab19 100644
--- a/frontend/src/components/transactions/TransactionDescription.vue
+++ b/frontend/src/components/transactions/TransactionDescription.vue
@@ -20,23 +20,24 @@
 
 <template>
   <div class="form-group">
-    <div class="col">
-      <div class="input-group">
-        <input
-            ref="description"
-            :title="$t('firefly.description')"
-            v-model="description"
-            autocomplete="off"
-            autofocus
-            class="form-control"
-            name="description[]"
-            type="text"
-            :placeholder="$t('firefly.description')"
-            v-on:submit.prevent
-        >
-        <div class="input-group-append">
-          <button v-on:click="clearDescription" class="btn btn-outline-secondary" type="button"><i class="far fa-trash-alt"></i></button>
-        </div>
+    <div class="text-xs d-none d-lg-block d-xl-block">
+      {{ $t('firefly.description') }}
+    </div>
+    <div class="input-group">
+      <input
+          ref="description"
+          :title="$t('firefly.description')"
+          v-model="description"
+          autocomplete="off"
+          autofocus
+          class="form-control"
+          name="description[]"
+          type="text"
+          :placeholder="$t('firefly.description')"
+          v-on:submit.prevent
+      >
+      <div class="input-group-append">
+        <button v-on:click="clearDescription" class="btn btn-outline-secondary" type="button"><i class="far fa-trash-alt"></i></button>
       </div>
     </div>
   </div>
@@ -50,7 +51,7 @@ import {createNamespacedHelpers} from "vuex";
 const {mapState, mapGetters, mapActions, mapMutations} = createNamespacedHelpers('transactions/create')
 
 export default {
-  props: ['value', 'index'],
+  props: ['index'],
   name: "TransactionDescription",
   methods: {
     ...mapMutations(
@@ -58,21 +59,20 @@ export default {
           'updateField',
         ],
     ),
-    clearDescription: function() {
+    clearDescription: function () {
       this.description = '';
     }
   },
   computed: {
     ...mapGetters([
-                    'transactionType', // -> this.someGetter
-                    'transactions', // -> this.someOtherGetter
+                    'transactionType',
+                    'transactions',
                   ]),
     description: {
       get() {
         return this.transactions[this.index].description;
       },
       set(value) {
-        console.log('I am set ' + value + ' ' + this.index);
         this.updateField({field: 'description', index: this.index, value: value});
       }
     }
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index bc71545089..256d249eb0 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -1726,9 +1726,9 @@ caniuse-api@^3.0.0:
     lodash.uniq "^4.5.0"
 
 caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001165:
-  version "1.0.30001170"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001170.tgz#0088bfecc6a14694969e391cc29d7eb6362ca6a7"
-  integrity sha512-Dd4d/+0tsK0UNLrZs3CvNukqalnVTRrxb5mcQm8rHL49t7V5ZaTygwXkrq+FB+dVDf++4ri8eJnFEJAB8332PA==
+  version "1.0.30001171"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001171.tgz#3291e11e02699ad0a29e69b8d407666fc843eba7"
+  integrity sha512-5Alrh8TTYPG9IH4UkRqEBZoEToWRLvPbSQokvzSz0lii8/FOWKG4keO1HoYfPWs8IF/NH/dyNPg1cmJGvV3Zlg==
 
 chalk@^1.1.3:
   version "1.1.3"
@@ -5822,6 +5822,11 @@ requires-port@^1.0.0:
   resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
   integrity sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=
 
+resize-observer-polyfill@^1.5.0:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
+  integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==
+
 resolve-cwd@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"
@@ -6947,7 +6952,16 @@ vue-template-es2015-compiler@^1.9.0:
   resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
   integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==
 
-vue@^2.6.12:
+vue-typeahead-bootstrap@^2.5.5:
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/vue-typeahead-bootstrap/-/vue-typeahead-bootstrap-2.6.1.tgz#5796d5f3affe37522f6767404696115f94f8baeb"
+  integrity sha512-JBOQJB55NQ2PkLWv040OqwxTGHYWJrmpPxyUeRRrfooPhcBBPH5C4GSYvCEMqT4DrN8KelKu307BshA1WXSBgA==
+  dependencies:
+    lodash "^4.17.20"
+    resize-observer-polyfill "^1.5.0"
+    vue "^2.5.17"
+
+vue@^2.5.17, vue@^2.6.12:
   version "2.6.12"
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.12.tgz#f5ebd4fa6bd2869403e29a896aed4904456c9123"
   integrity sha512-uhmLFETqPPNyuLLbsKz6ioJ4q7AZHzD8ZVFNATNyICSZouqP2Sz0rotWQC8UNBF6VGSCs5abnKJoStA6JbCbfg==