From 6da6a68e3383c77f60be9589d92b88d77911db49 Mon Sep 17 00:00:00 2001
From: James Cole <thegrumpydictator@gmail.com>
Date: Sat, 29 Jan 2022 14:15:34 +0100
Subject: [PATCH] Move v1 views

---
 resources/views/accounts/create.twig          |  97 ++++
 resources/views/accounts/delete.twig          |  58 +++
 resources/views/accounts/edit.twig            | 128 +++++
 resources/views/accounts/index.twig           |  83 +++
 resources/views/accounts/reconcile/edit.twig  | 119 +++++
 resources/views/accounts/reconcile/index.twig | 137 +++++
 .../views/accounts/reconcile/overview.twig    | 107 ++++
 resources/views/accounts/reconcile/show.twig  | 109 ++++
 .../accounts/reconcile/transactions.twig      | 176 +++++++
 resources/views/accounts/show.twig            | 220 ++++++++
 .../views/admin/configuration/index.twig      |  69 +++
 resources/views/admin/index.twig              |  67 +++
 resources/views/admin/link/create.twig        |  46 ++
 resources/views/admin/link/delete.twig        |  53 ++
 resources/views/admin/link/edit.twig          |  50 ++
 resources/views/admin/link/index.twig         |  68 +++
 resources/views/admin/link/show.twig          |  87 ++++
 resources/views/admin/update/index.twig       |  75 +++
 resources/views/admin/users/delete.twig       |  38 ++
 resources/views/admin/users/edit.twig         |  57 +++
 resources/views/admin/users/index.twig        |  93 ++++
 resources/views/admin/users/show.twig         | 121 +++++
 resources/views/attachments/delete.twig       |  34 ++
 resources/views/attachments/edit.twig         |  61 +++
 resources/views/attachments/index.twig        |  77 +++
 resources/views/auth/login.twig               |  98 ++++
 resources/views/auth/lost-two-factor.twig     |  47 ++
 resources/views/auth/mfa.twig                 |  32 ++
 resources/views/auth/passwords/email.twig     |  53 ++
 resources/views/auth/passwords/reset.twig     |  49 ++
 resources/views/auth/register.twig            |  50 ++
 resources/views/auth/two-factor.twig          |  37 ++
 resources/views/bills/create.twig             |  80 +++
 resources/views/bills/delete.twig             |  40 ++
 resources/views/bills/edit.twig               |  86 ++++
 resources/views/bills/index.twig              |  46 ++
 resources/views/bills/show.twig               | 177 +++++++
 .../available-budgets/create-alternative.twig |  37 ++
 .../budgets/available-budgets/create.twig     |  37 ++
 .../views/budgets/available-budgets/edit.twig |  33 ++
 .../views/budgets/budget-limits/create.twig   |  36 ++
 resources/views/budgets/create.twig           |  64 +++
 resources/views/budgets/delete.twig           |  44 ++
 resources/views/budgets/edit.twig             |  62 +++
 resources/views/budgets/index.twig            | 482 ++++++++++++++++++
 resources/views/budgets/no-budget.twig        |  64 +++
 resources/views/budgets/show.twig             | 229 +++++++++
 resources/views/categories/create.twig        |  57 +++
 resources/views/categories/delete.twig        |  41 ++
 resources/views/categories/edit.twig          |  58 +++
 resources/views/categories/index.twig         |  49 ++
 resources/views/categories/no-category.twig   |  64 +++
 resources/views/categories/show.twig          | 122 +++++
 resources/views/currencies/create.twig        |  47 ++
 resources/views/currencies/delete.twig        |  35 ++
 resources/views/currencies/edit.twig          |  48 ++
 resources/views/currencies/index.twig         | 108 ++++
 resources/views/demo/accounts/index.twig      |   1 +
 resources/views/demo/budgets/index.twig       |   1 +
 resources/views/demo/currencies/index.twig    |   1 +
 resources/views/demo/home.twig                |   1 +
 resources/views/demo/index.twig               |   1 +
 resources/views/demo/no-demo-text.twig        |   3 +
 resources/views/demo/piggy-banks/index.twig   |   1 +
 resources/views/demo/profile/index.twig       |   1 +
 resources/views/demo/recurring/index.twig     |   1 +
 .../demo/recurring/recurring-create.twig      |   1 +
 resources/views/demo/reports/index.twig       |   7 +
 resources/views/demo/transactions/index.twig  |   1 +
 resources/views/error.twig                    |  32 ++
 resources/views/export/index.twig             |  36 ++
 resources/views/form/amount-no-currency.twig  |   8 +
 resources/views/form/amount-small.twig        |  24 +
 resources/views/form/amount.twig              |  33 ++
 .../views/form/assetAccountCheckList.twig     |  24 +
 resources/views/form/balance.twig             |  33 ++
 resources/views/form/checkbox.twig            |  19 +
 resources/views/form/date.twig                |  14 +
 resources/views/form/feedback.twig            |   4 +
 resources/views/form/file.twig                |   9 +
 resources/views/form/help.twig                |   3 +
 resources/views/form/integer.twig             |   9 +
 resources/views/form/location.twig            | 114 +++++
 .../views/form/non-selectable-amount.twig     |  11 +
 resources/views/form/number.twig              |   9 +
 resources/views/form/object_group.twig        |   9 +
 resources/views/form/options.twig             |  34 ++
 resources/views/form/password.twig            |   9 +
 resources/views/form/percentage.twig          |  12 +
 resources/views/form/select.twig              |  10 +
 resources/views/form/static.twig              |   7 +
 resources/views/form/tags.twig                |   8 +
 resources/views/form/text.twig                |   9 +
 resources/views/form/textarea.twig            |   9 +
 resources/views/index.twig                    | 191 +++++++
 resources/views/install/index.twig            |  24 +
 resources/views/javascript/accounts.twig      |   4 +
 resources/views/javascript/currencies.twig    |   4 +
 resources/views/javascript/variables.twig     |  66 +++
 resources/views/json/piggy-banks.twig         |  22 +
 resources/views/layout/default.twig           | 247 +++++++++
 resources/views/layout/empty.twig             |  77 +++
 resources/views/layout/guest.twig             |  92 ++++
 resources/views/layout/install.twig           |  52 ++
 resources/views/list/accounts.twig            | 121 +++++
 resources/views/list/attachments.twig         |  47 ++
 resources/views/list/bills.twig               | 210 ++++++++
 resources/views/list/categories.twig          |  47 ++
 resources/views/list/groups-tiny.twig         |  65 +++
 resources/views/list/groups.twig              | 314 ++++++++++++
 resources/views/list/journals-array-tiny.twig |  12 +
 resources/views/list/periods.twig             |  84 +++
 resources/views/list/piggy-bank-events.twig   |  35 ++
 resources/views/list/piggy-banks.twig         | 131 +++++
 resources/views/new-user/index.twig           |  71 +++
 resources/views/object-groups/delete.twig     |  42 ++
 resources/views/object-groups/edit.twig       |  58 +++
 resources/views/object-groups/index.twig      |  77 +++
 .../views/pagination/bootstrap-4.blade.php    |  46 ++
 resources/views/pagination/default.blade.php  |  46 ++
 .../views/pagination/semantic-ui.blade.php    |  36 ++
 .../pagination/simple-bootstrap-4.blade.php   |  27 +
 .../views/pagination/simple-default.blade.php |  19 +
 .../pagination/simple-tailwind.blade.php      |  25 +
 resources/views/pagination/tailwind.blade.php | 102 ++++
 resources/views/partials/boxes.twig           |  78 +++
 resources/views/partials/control-bar.twig     | 132 +++++
 resources/views/partials/empty.twig           |  26 +
 resources/views/partials/favicons.twig        |  11 +
 resources/views/partials/flashes.twig         | 108 ++++
 resources/views/partials/journal-row.twig     |   1 +
 .../views/partials/layout/breadcrumbs.twig    |  13 +
 resources/views/partials/menu-sidebar.twig    | 234 +++++++++
 resources/views/partials/page-header.twig     |  14 +
 resources/views/partials/password-modal.twig  |  35 ++
 resources/views/partials/transaction-row.twig |   1 +
 resources/views/piggy-banks/add-mobile.twig   |  44 ++
 resources/views/piggy-banks/add.twig          |  37 ++
 resources/views/piggy-banks/create.twig       |  75 +++
 resources/views/piggy-banks/delete.twig       |  35 ++
 resources/views/piggy-banks/edit.twig         |  77 +++
 resources/views/piggy-banks/index.twig        |  80 +++
 .../views/piggy-banks/remove-mobile.twig      |  40 ++
 resources/views/piggy-banks/remove.twig       |  30 ++
 resources/views/piggy-banks/show.twig         | 146 ++++++
 resources/views/popup/list/journals.twig      | 151 ++++++
 .../views/popup/report/balance-amount.twig    |  18 +
 .../popup/report/budget-spent-amount.twig     |  17 +
 .../views/popup/report/category-entry.twig    |  16 +
 .../views/popup/report/expense-entry.twig     |  16 +
 .../views/popup/report/income-entry.twig      |  19 +
 resources/views/preferences/index.twig        | 251 +++++++++
 resources/views/profile/change-email.twig     |  47 ++
 resources/views/profile/change-password.twig  |  69 +++
 resources/views/profile/code.twig             |  62 +++
 resources/views/profile/delete-account.twig   |  55 ++
 resources/views/profile/index.twig            | 294 +++++++++++
 .../views/profile/logout-other-sessions.twig  |  35 ++
 resources/views/profile/new-backup-codes.twig |  29 ++
 resources/views/recurring/create.twig         | 223 ++++++++
 resources/views/recurring/delete.twig         |  41 ++
 resources/views/recurring/edit.twig           | 220 ++++++++
 resources/views/recurring/index.twig          | 166 ++++++
 resources/views/recurring/show.twig           | 185 +++++++
 resources/views/reports/audit/report.twig     |  92 ++++
 resources/views/reports/budget/month.twig     | 186 +++++++
 .../budget/partials/account-per-budget.twig   |  30 ++
 .../reports/budget/partials/accounts.twig     |  32 ++
 .../reports/budget/partials/avg-expenses.twig |  46 ++
 .../reports/budget/partials/budgets.twig      |  44 ++
 .../reports/budget/partials/top-expenses.twig |  54 ++
 resources/views/reports/category/month.twig   | 257 ++++++++++
 .../partials/account-per-category.twig        |  31 ++
 .../reports/category/partials/accounts.twig   |  46 ++
 .../category/partials/avg-expenses.twig       |  46 ++
 .../reports/category/partials/avg-income.twig |  46 ++
 .../reports/category/partials/categories.twig |  56 ++
 .../category/partials/top-expenses.twig       |  54 ++
 .../reports/category/partials/top-income.twig |  54 ++
 resources/views/reports/default/month.twig    | 180 +++++++
 .../views/reports/default/multi-year.twig     | 224 ++++++++
 resources/views/reports/default/year.twig     | 222 ++++++++
 .../double/partials/accounts-per-asset.twig   |  44 ++
 .../reports/double/partials/accounts.twig     |  55 ++
 .../reports/double/partials/avg-expenses.twig |  46 ++
 .../reports/double/partials/avg-income.twig   |  46 ++
 .../reports/double/partials/top-expenses.twig |  55 ++
 .../reports/double/partials/top-income.twig   |  55 ++
 resources/views/reports/double/report.twig    | 234 +++++++++
 resources/views/reports/index.twig            | 195 +++++++
 resources/views/reports/options/budget.twig   |  10 +
 resources/views/reports/options/category.twig |  11 +
 resources/views/reports/options/double.twig   |  10 +
 .../views/reports/options/no-options.twig     |   3 +
 resources/views/reports/options/tag.twig      |  10 +
 .../views/reports/partials/accounts.twig      |  48 ++
 resources/views/reports/partials/balance.twig |  61 +++
 resources/views/reports/partials/bills.twig   |  84 +++
 .../views/reports/partials/budget-period.twig |  46 ++
 resources/views/reports/partials/budgets.twig | 100 ++++
 .../views/reports/partials/categories.twig    |  54 ++
 .../reports/partials/category-period.twig     |  50 ++
 .../views/reports/partials/exp-budgets.twig   |  30 ++
 .../reports/partials/exp-categories.twig      |  41 ++
 .../reports/partials/exp-not-grouped.twig     |  32 ++
 .../reports/partials/income-expenses.twig     |  61 +++
 .../reports/partials/journals-audit.twig      | 184 +++++++
 .../views/reports/partials/operations.twig    |  26 +
 resources/views/reports/partials/tags.twig    |  23 +
 .../reports/partials/top-transactions.twig    |  31 ++
 resources/views/reports/tag/month.twig        | 290 +++++++++++
 .../reports/tag/partials/account-per-tag.twig |  40 ++
 .../views/reports/tag/partials/accounts.twig  |  46 ++
 .../reports/tag/partials/avg-expenses.twig    |  46 ++
 .../reports/tag/partials/avg-income.twig      |  46 ++
 .../views/reports/tag/partials/tags.twig      |  64 +++
 .../reports/tag/partials/top-expenses.twig    |  54 ++
 .../reports/tag/partials/top-income.twig      |  54 ++
 resources/views/rules/index.twig              | 204 ++++++++
 resources/views/rules/partials/action.twig    |  32 ++
 .../rules/partials/test-trigger-modal.twig    |  21 +
 resources/views/rules/partials/trigger.twig   |  34 ++
 resources/views/rules/rule-group/create.twig  |  56 ++
 resources/views/rules/rule-group/delete.twig  |  54 ++
 resources/views/rules/rule-group/edit.twig    |  60 +++
 .../rules/rule-group/select-transactions.twig |  56 ++
 resources/views/rules/rule/create.twig        | 158 ++++++
 resources/views/rules/rule/delete.twig        |  34 ++
 resources/views/rules/rule/edit.twig          | 139 +++++
 .../views/rules/rule/select-transactions.twig |  56 ++
 resources/views/search/index.twig             | 154 ++++++
 resources/views/search/search.twig            |  11 +
 resources/views/tags/create.twig              |  73 +++
 resources/views/tags/delete.twig              |  40 ++
 resources/views/tags/edit.twig                |  78 +++
 resources/views/tags/index.twig               |  76 +++
 resources/views/tags/show.twig                | 308 +++++++++++
 resources/views/test/test.twig                |   2 +
 resources/views/transactions/bulk/edit.twig   | 199 ++++++++
 resources/views/transactions/convert.twig     | 285 +++++++++++
 resources/views/transactions/create.twig      |  20 +
 resources/views/transactions/delete.twig      |  35 ++
 resources/views/transactions/edit.twig        |  28 +
 resources/views/transactions/index.twig       | 140 +++++
 .../views/transactions/links/delete.twig      |  33 ++
 resources/views/transactions/links/modal.twig |  52 ++
 resources/views/transactions/mass/delete.twig | 109 ++++
 resources/views/transactions/mass/edit.twig   | 182 +++++++
 resources/views/transactions/show.twig        | 455 +++++++++++++++++
 .../views/transactions/single/delete.twig     |  43 ++
 resources/views/transactions/single/edit.twig |   1 +
 251 files changed, 17989 insertions(+)
 create mode 100644 resources/views/accounts/create.twig
 create mode 100644 resources/views/accounts/delete.twig
 create mode 100644 resources/views/accounts/edit.twig
 create mode 100644 resources/views/accounts/index.twig
 create mode 100644 resources/views/accounts/reconcile/edit.twig
 create mode 100644 resources/views/accounts/reconcile/index.twig
 create mode 100644 resources/views/accounts/reconcile/overview.twig
 create mode 100644 resources/views/accounts/reconcile/show.twig
 create mode 100644 resources/views/accounts/reconcile/transactions.twig
 create mode 100644 resources/views/accounts/show.twig
 create mode 100644 resources/views/admin/configuration/index.twig
 create mode 100644 resources/views/admin/index.twig
 create mode 100644 resources/views/admin/link/create.twig
 create mode 100644 resources/views/admin/link/delete.twig
 create mode 100644 resources/views/admin/link/edit.twig
 create mode 100644 resources/views/admin/link/index.twig
 create mode 100644 resources/views/admin/link/show.twig
 create mode 100644 resources/views/admin/update/index.twig
 create mode 100644 resources/views/admin/users/delete.twig
 create mode 100644 resources/views/admin/users/edit.twig
 create mode 100644 resources/views/admin/users/index.twig
 create mode 100644 resources/views/admin/users/show.twig
 create mode 100644 resources/views/attachments/delete.twig
 create mode 100644 resources/views/attachments/edit.twig
 create mode 100644 resources/views/attachments/index.twig
 create mode 100644 resources/views/auth/login.twig
 create mode 100644 resources/views/auth/lost-two-factor.twig
 create mode 100644 resources/views/auth/mfa.twig
 create mode 100644 resources/views/auth/passwords/email.twig
 create mode 100644 resources/views/auth/passwords/reset.twig
 create mode 100644 resources/views/auth/register.twig
 create mode 100644 resources/views/auth/two-factor.twig
 create mode 100644 resources/views/bills/create.twig
 create mode 100644 resources/views/bills/delete.twig
 create mode 100644 resources/views/bills/edit.twig
 create mode 100644 resources/views/bills/index.twig
 create mode 100644 resources/views/bills/show.twig
 create mode 100644 resources/views/budgets/available-budgets/create-alternative.twig
 create mode 100644 resources/views/budgets/available-budgets/create.twig
 create mode 100644 resources/views/budgets/available-budgets/edit.twig
 create mode 100644 resources/views/budgets/budget-limits/create.twig
 create mode 100644 resources/views/budgets/create.twig
 create mode 100644 resources/views/budgets/delete.twig
 create mode 100644 resources/views/budgets/edit.twig
 create mode 100644 resources/views/budgets/index.twig
 create mode 100644 resources/views/budgets/no-budget.twig
 create mode 100644 resources/views/budgets/show.twig
 create mode 100644 resources/views/categories/create.twig
 create mode 100644 resources/views/categories/delete.twig
 create mode 100644 resources/views/categories/edit.twig
 create mode 100644 resources/views/categories/index.twig
 create mode 100644 resources/views/categories/no-category.twig
 create mode 100644 resources/views/categories/show.twig
 create mode 100644 resources/views/currencies/create.twig
 create mode 100644 resources/views/currencies/delete.twig
 create mode 100644 resources/views/currencies/edit.twig
 create mode 100644 resources/views/currencies/index.twig
 create mode 100644 resources/views/demo/accounts/index.twig
 create mode 100644 resources/views/demo/budgets/index.twig
 create mode 100644 resources/views/demo/currencies/index.twig
 create mode 100644 resources/views/demo/home.twig
 create mode 100644 resources/views/demo/index.twig
 create mode 100644 resources/views/demo/no-demo-text.twig
 create mode 100644 resources/views/demo/piggy-banks/index.twig
 create mode 100644 resources/views/demo/profile/index.twig
 create mode 100644 resources/views/demo/recurring/index.twig
 create mode 100644 resources/views/demo/recurring/recurring-create.twig
 create mode 100644 resources/views/demo/reports/index.twig
 create mode 100644 resources/views/demo/transactions/index.twig
 create mode 100644 resources/views/error.twig
 create mode 100644 resources/views/export/index.twig
 create mode 100644 resources/views/form/amount-no-currency.twig
 create mode 100644 resources/views/form/amount-small.twig
 create mode 100644 resources/views/form/amount.twig
 create mode 100644 resources/views/form/assetAccountCheckList.twig
 create mode 100644 resources/views/form/balance.twig
 create mode 100644 resources/views/form/checkbox.twig
 create mode 100644 resources/views/form/date.twig
 create mode 100644 resources/views/form/feedback.twig
 create mode 100644 resources/views/form/file.twig
 create mode 100644 resources/views/form/help.twig
 create mode 100644 resources/views/form/integer.twig
 create mode 100644 resources/views/form/location.twig
 create mode 100644 resources/views/form/non-selectable-amount.twig
 create mode 100644 resources/views/form/number.twig
 create mode 100644 resources/views/form/object_group.twig
 create mode 100644 resources/views/form/options.twig
 create mode 100644 resources/views/form/password.twig
 create mode 100644 resources/views/form/percentage.twig
 create mode 100644 resources/views/form/select.twig
 create mode 100644 resources/views/form/static.twig
 create mode 100644 resources/views/form/tags.twig
 create mode 100644 resources/views/form/text.twig
 create mode 100644 resources/views/form/textarea.twig
 create mode 100644 resources/views/index.twig
 create mode 100644 resources/views/install/index.twig
 create mode 100644 resources/views/javascript/accounts.twig
 create mode 100644 resources/views/javascript/currencies.twig
 create mode 100644 resources/views/javascript/variables.twig
 create mode 100644 resources/views/json/piggy-banks.twig
 create mode 100644 resources/views/layout/default.twig
 create mode 100644 resources/views/layout/empty.twig
 create mode 100644 resources/views/layout/guest.twig
 create mode 100644 resources/views/layout/install.twig
 create mode 100644 resources/views/list/accounts.twig
 create mode 100644 resources/views/list/attachments.twig
 create mode 100644 resources/views/list/bills.twig
 create mode 100644 resources/views/list/categories.twig
 create mode 100644 resources/views/list/groups-tiny.twig
 create mode 100644 resources/views/list/groups.twig
 create mode 100644 resources/views/list/journals-array-tiny.twig
 create mode 100644 resources/views/list/periods.twig
 create mode 100644 resources/views/list/piggy-bank-events.twig
 create mode 100644 resources/views/list/piggy-banks.twig
 create mode 100644 resources/views/new-user/index.twig
 create mode 100644 resources/views/object-groups/delete.twig
 create mode 100644 resources/views/object-groups/edit.twig
 create mode 100644 resources/views/object-groups/index.twig
 create mode 100644 resources/views/pagination/bootstrap-4.blade.php
 create mode 100644 resources/views/pagination/default.blade.php
 create mode 100644 resources/views/pagination/semantic-ui.blade.php
 create mode 100644 resources/views/pagination/simple-bootstrap-4.blade.php
 create mode 100644 resources/views/pagination/simple-default.blade.php
 create mode 100644 resources/views/pagination/simple-tailwind.blade.php
 create mode 100644 resources/views/pagination/tailwind.blade.php
 create mode 100644 resources/views/partials/boxes.twig
 create mode 100644 resources/views/partials/control-bar.twig
 create mode 100644 resources/views/partials/empty.twig
 create mode 100644 resources/views/partials/favicons.twig
 create mode 100644 resources/views/partials/flashes.twig
 create mode 100644 resources/views/partials/journal-row.twig
 create mode 100644 resources/views/partials/layout/breadcrumbs.twig
 create mode 100644 resources/views/partials/menu-sidebar.twig
 create mode 100644 resources/views/partials/page-header.twig
 create mode 100644 resources/views/partials/password-modal.twig
 create mode 100644 resources/views/partials/transaction-row.twig
 create mode 100644 resources/views/piggy-banks/add-mobile.twig
 create mode 100644 resources/views/piggy-banks/add.twig
 create mode 100644 resources/views/piggy-banks/create.twig
 create mode 100644 resources/views/piggy-banks/delete.twig
 create mode 100644 resources/views/piggy-banks/edit.twig
 create mode 100644 resources/views/piggy-banks/index.twig
 create mode 100644 resources/views/piggy-banks/remove-mobile.twig
 create mode 100644 resources/views/piggy-banks/remove.twig
 create mode 100644 resources/views/piggy-banks/show.twig
 create mode 100644 resources/views/popup/list/journals.twig
 create mode 100644 resources/views/popup/report/balance-amount.twig
 create mode 100644 resources/views/popup/report/budget-spent-amount.twig
 create mode 100644 resources/views/popup/report/category-entry.twig
 create mode 100644 resources/views/popup/report/expense-entry.twig
 create mode 100644 resources/views/popup/report/income-entry.twig
 create mode 100644 resources/views/preferences/index.twig
 create mode 100644 resources/views/profile/change-email.twig
 create mode 100644 resources/views/profile/change-password.twig
 create mode 100644 resources/views/profile/code.twig
 create mode 100644 resources/views/profile/delete-account.twig
 create mode 100644 resources/views/profile/index.twig
 create mode 100644 resources/views/profile/logout-other-sessions.twig
 create mode 100644 resources/views/profile/new-backup-codes.twig
 create mode 100644 resources/views/recurring/create.twig
 create mode 100644 resources/views/recurring/delete.twig
 create mode 100644 resources/views/recurring/edit.twig
 create mode 100644 resources/views/recurring/index.twig
 create mode 100644 resources/views/recurring/show.twig
 create mode 100644 resources/views/reports/audit/report.twig
 create mode 100644 resources/views/reports/budget/month.twig
 create mode 100644 resources/views/reports/budget/partials/account-per-budget.twig
 create mode 100644 resources/views/reports/budget/partials/accounts.twig
 create mode 100644 resources/views/reports/budget/partials/avg-expenses.twig
 create mode 100644 resources/views/reports/budget/partials/budgets.twig
 create mode 100644 resources/views/reports/budget/partials/top-expenses.twig
 create mode 100644 resources/views/reports/category/month.twig
 create mode 100644 resources/views/reports/category/partials/account-per-category.twig
 create mode 100644 resources/views/reports/category/partials/accounts.twig
 create mode 100644 resources/views/reports/category/partials/avg-expenses.twig
 create mode 100644 resources/views/reports/category/partials/avg-income.twig
 create mode 100644 resources/views/reports/category/partials/categories.twig
 create mode 100644 resources/views/reports/category/partials/top-expenses.twig
 create mode 100644 resources/views/reports/category/partials/top-income.twig
 create mode 100644 resources/views/reports/default/month.twig
 create mode 100644 resources/views/reports/default/multi-year.twig
 create mode 100644 resources/views/reports/default/year.twig
 create mode 100644 resources/views/reports/double/partials/accounts-per-asset.twig
 create mode 100644 resources/views/reports/double/partials/accounts.twig
 create mode 100644 resources/views/reports/double/partials/avg-expenses.twig
 create mode 100644 resources/views/reports/double/partials/avg-income.twig
 create mode 100644 resources/views/reports/double/partials/top-expenses.twig
 create mode 100644 resources/views/reports/double/partials/top-income.twig
 create mode 100644 resources/views/reports/double/report.twig
 create mode 100644 resources/views/reports/index.twig
 create mode 100644 resources/views/reports/options/budget.twig
 create mode 100644 resources/views/reports/options/category.twig
 create mode 100644 resources/views/reports/options/double.twig
 create mode 100644 resources/views/reports/options/no-options.twig
 create mode 100644 resources/views/reports/options/tag.twig
 create mode 100644 resources/views/reports/partials/accounts.twig
 create mode 100644 resources/views/reports/partials/balance.twig
 create mode 100644 resources/views/reports/partials/bills.twig
 create mode 100644 resources/views/reports/partials/budget-period.twig
 create mode 100644 resources/views/reports/partials/budgets.twig
 create mode 100644 resources/views/reports/partials/categories.twig
 create mode 100644 resources/views/reports/partials/category-period.twig
 create mode 100644 resources/views/reports/partials/exp-budgets.twig
 create mode 100644 resources/views/reports/partials/exp-categories.twig
 create mode 100644 resources/views/reports/partials/exp-not-grouped.twig
 create mode 100644 resources/views/reports/partials/income-expenses.twig
 create mode 100644 resources/views/reports/partials/journals-audit.twig
 create mode 100644 resources/views/reports/partials/operations.twig
 create mode 100644 resources/views/reports/partials/tags.twig
 create mode 100644 resources/views/reports/partials/top-transactions.twig
 create mode 100644 resources/views/reports/tag/month.twig
 create mode 100644 resources/views/reports/tag/partials/account-per-tag.twig
 create mode 100644 resources/views/reports/tag/partials/accounts.twig
 create mode 100644 resources/views/reports/tag/partials/avg-expenses.twig
 create mode 100644 resources/views/reports/tag/partials/avg-income.twig
 create mode 100644 resources/views/reports/tag/partials/tags.twig
 create mode 100644 resources/views/reports/tag/partials/top-expenses.twig
 create mode 100644 resources/views/reports/tag/partials/top-income.twig
 create mode 100644 resources/views/rules/index.twig
 create mode 100644 resources/views/rules/partials/action.twig
 create mode 100644 resources/views/rules/partials/test-trigger-modal.twig
 create mode 100644 resources/views/rules/partials/trigger.twig
 create mode 100644 resources/views/rules/rule-group/create.twig
 create mode 100644 resources/views/rules/rule-group/delete.twig
 create mode 100644 resources/views/rules/rule-group/edit.twig
 create mode 100644 resources/views/rules/rule-group/select-transactions.twig
 create mode 100644 resources/views/rules/rule/create.twig
 create mode 100644 resources/views/rules/rule/delete.twig
 create mode 100644 resources/views/rules/rule/edit.twig
 create mode 100644 resources/views/rules/rule/select-transactions.twig
 create mode 100644 resources/views/search/index.twig
 create mode 100644 resources/views/search/search.twig
 create mode 100644 resources/views/tags/create.twig
 create mode 100644 resources/views/tags/delete.twig
 create mode 100644 resources/views/tags/edit.twig
 create mode 100644 resources/views/tags/index.twig
 create mode 100644 resources/views/tags/show.twig
 create mode 100644 resources/views/test/test.twig
 create mode 100644 resources/views/transactions/bulk/edit.twig
 create mode 100644 resources/views/transactions/convert.twig
 create mode 100644 resources/views/transactions/create.twig
 create mode 100644 resources/views/transactions/delete.twig
 create mode 100644 resources/views/transactions/edit.twig
 create mode 100644 resources/views/transactions/index.twig
 create mode 100644 resources/views/transactions/links/delete.twig
 create mode 100644 resources/views/transactions/links/modal.twig
 create mode 100644 resources/views/transactions/mass/delete.twig
 create mode 100644 resources/views/transactions/mass/edit.twig
 create mode 100644 resources/views/transactions/show.twig
 create mode 100644 resources/views/transactions/single/delete.twig
 create mode 100644 resources/views/transactions/single/edit.twig

diff --git a/resources/views/accounts/create.twig b/resources/views/accounts/create.twig
new file mode 100644
index 0000000000..f5e4aeceb8
--- /dev/null
+++ b/resources/views/accounts/create.twig
@@ -0,0 +1,97 @@
+{% extends './v1/layout/default' %}
+{% block breadcrumbs %}
+    {{ Breadcrumbs.render(Route.getCurrentRoute.getName, objectType) }}
+{% endblock %}
+{% block content %}
+    <!-- set location data high up -->
+    <script type="text/javascript" nonce="{{ JS_NONCE }}">
+        var locations = {{ locations|json_encode|raw }};
+        var mapboxToken = "{{ config('firefly.mapbox_api_key') }}";
+    </script>
+
+    <form action="{{ route('accounts.store') }}" method="post" id="store" class="form-horizontal" enctype="multipart/form-data">
+        <input type="hidden" name="_token" value="{{ csrf_token() }}"/>
+        <input type="hidden" name="objectType" value="{{ objectType }}"/>
+        <input type="hidden" name="active" value="1"/>
+
+        <div class="row">
+            <div class="col-lg-6 col-md-6 col-sm-12">
+                <div class="box box-primary">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ 'mandatoryFields'|_ }}</h3>
+                    </div>
+                    <div class="box-body">
+                        {{ ExpandedForm.text('name') }}
+                        {% if objectType == 'asset' or objectType == 'liabilities' %}
+                            {{ CurrencyForm.currencyList('currency_id', null, {helpText:'account_default_currency'|_}) }}
+                        {% endif %}
+                        {% if objectType == 'liabilities' %}
+                            {{ ExpandedForm.select('liability_type_id', liabilityTypes) }}
+                            {{ ExpandedForm.amountNoCurrency('opening_balance', null, {label:'debt_start_amount'|_}) }}
+                            {{ ExpandedForm.select('liability_direction', liabilityDirections) }}
+                            {{ ExpandedForm.date('opening_balance_date', null, {label:'debt_start_date'|_}) }}
+                            {{ ExpandedForm.percentage('interest') }}
+                            {{ ExpandedForm.select('interest_period', interestPeriods, null, {helpText: 'interest_period_help'|_}) }}
+                        {% endif %}
+                    </div>
+                </div>
+            </div>
+
+            <div class="col-lg-6 col-md-6 col-sm-12">
+                <div class="box">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ 'optionalFields'|_ }}</h3>
+                    </div>
+                    <div class="box-body">
+
+                        {{ ExpandedForm.text('iban') }}
+                        {{ ExpandedForm.text('BIC', null, {maxlength: 11}) }}
+                        {{ ExpandedForm.text('account_number') }}
+
+                        {% if objectType == 'asset' %}
+
+                            {{ ExpandedForm.amountNoCurrency('opening_balance') }}
+                            {{ ExpandedForm.date('opening_balance_date') }}
+                            {{ ExpandedForm.select('account_role', roles,null,{helpText : 'asset_account_role_help'|_}) }}
+                            {{ ExpandedForm.amountNoCurrency('virtual_balance') }}
+                        {% endif %}
+                        {# only correct way to do active checkbox #}
+                        {{ ExpandedForm.checkbox('include_net_worth', 1) }}
+                        {{ ExpandedForm.textarea('notes',null,{helpText: trans('firefly.field_supports_markdown')}) }}
+                        {{ ExpandedForm.location('location', null, {locations: locations}) }}
+                        {{ ExpandedForm.file('attachments[]', {'multiple': 'multiple','helpText': trans('firefly.upload_max_file_size', {'size': uploadSize|filesize}) }) }}
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-lg-6 col-md-6 col-sm-12">
+                <div class="box">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ 'options'|_ }}</h3>
+                    </div>
+                    <div class="box-body">
+                        {{ ExpandedForm.optionsList('create','account') }}
+                    </div>
+                    <div class="box-footer">
+                        <button type="submit" class="btn pull-right btn-success">
+                            {{ ('store_new_' ~ objectType ~ '_account')|_ }}
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </form>
+{% endblock %}
+{% block scripts %}
+    <script src="v1/lib/leaflet/leaflet.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/lib/modernizr-custom.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/lib/jquery-ui.min.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/ff/accounts/create.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+{% endblock %}
+
+{% block styles %}
+    <link href="v1/css/jquery-ui/jquery-ui.structure.min.css?v={{ FF_VERSION }}" type="text/css" rel="stylesheet" media="all" nonce="{{ JS_NONCE }}">
+    <link href="v1/css/jquery-ui/jquery-ui.theme.min.css?v={{ FF_VERSION }}" type="text/css" rel="stylesheet" media="all" nonce="{{ JS_NONCE }}">
+    <link rel="stylesheet" href="v1/lib/leaflet/leaflet.css?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}">
+{% endblock %}
diff --git a/resources/views/accounts/delete.twig b/resources/views/accounts/delete.twig
new file mode 100644
index 0000000000..c005555dd0
--- /dev/null
+++ b/resources/views/accounts/delete.twig
@@ -0,0 +1,58 @@
+{% extends './v1/layout/default' %}
+
+{% block breadcrumbs %}
+    {{ Breadcrumbs.render(Route.getCurrentRoute.getName, account) }}
+{% endblock %}
+
+{% block content %}
+
+    <form method="POST" action="{{ route('accounts.destroy',account.id) }}" accept-charset="UTF-8" class="form-horizontal" id="destroy">
+        <input name="_token" type="hidden" value="{{ csrf_token() }}">
+        <div class="row">
+            <div class="col-lg-6 col-lg-offset-3 col-md-12 col-sm-12">
+                <div class="box box-danger">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ trans('form.delete_account', {'name': account.name}) }}</h3>
+                    </div>
+                    <div class="box-body">
+                        <p class="text-danger">
+                            {{ trans('form.permDeleteWarning') }}
+                        </p>
+
+                        <p>
+                            {{ trans('form.account_areYouSure', {'name': account.name}) }}
+                        </p>
+
+                        {% if account.transactions|length > 0 or account.piggyBanks|length > 0 %}
+                            <p>
+                                {% if account.transactions|length > 0 %}
+                                    {{ Lang.choice('form.also_delete_transactions', account.transactions|length, {count: account.transactions|length}) }}
+                                {% endif %}<br/>
+                                {% if account.piggyBanks|length > 0 %}
+                                    {{ Lang.choice('form.also_delete_piggyBanks', account.piggyBanks|length, {count: account.piggyBanks|length}) }}
+                                {% endif %}
+                            </p>
+                        {% endif %}
+                        {% if account.transactions.count() > 0 and account.accountType.type == 'Asset account' %}
+                            <p class="text-success">
+                                {{ trans_choice('firefly.save_transactions_by_moving', account.transactions|length ) }}
+                            </p>
+
+                            <p>
+                                {{ Form.select('move_account_before_delete', accountList, null, {class: 'form-control'}) }}
+                            </p>
+                        {% else %}
+                            <input type="hidden" name="move_account_before_delete" value="0"/>
+                        {% endif %}
+
+                    </div>
+                    <div class="box-footer">
+                        <input type="submit" name="submit" value="{{ trans('form.deletePermanently') }}" class="btn pull-right btn-danger"/>
+                        <a href="{{ URL.previous() }}" class="btn-default btn">{{ trans('form.cancel') }}</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+    </form>
+{% endblock %}
diff --git a/resources/views/accounts/edit.twig b/resources/views/accounts/edit.twig
new file mode 100644
index 0000000000..a52a1e5f56
--- /dev/null
+++ b/resources/views/accounts/edit.twig
@@ -0,0 +1,128 @@
+{% extends './v1/layout/default' %}
+
+{% block breadcrumbs %}
+    {{ Breadcrumbs.render(Route.getCurrentRoute().getName(), account) }}
+{% endblock %}
+
+{% block content %}
+    <!-- set location data high up -->
+    <script type="text/javascript" nonce="{{ JS_NONCE }}">
+        var locations = {{ locations|json_encode|raw }};
+        var mapboxToken = "{{ config('firefly.mapbox_api_key') }}";
+    </script>
+
+    {{ Form.model(account, {
+        'class': 'form-horizontal',
+        'id': 'update',
+        'url': route('accounts.update',account.id),
+        'enctype': 'multipart/form-data'
+    } ) }}
+    <input type="hidden" name="id" value="{{ account.id }}"/>
+    <input type="hidden" name="objectType" value="{{ objectType }}"/>
+
+    <div class="row">
+        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
+            <div class="box box-primary">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'mandatoryFields'|_ }}</h3>
+                </div>
+                <div class="box-body">
+                    {{ ExpandedForm.text('name') }}
+                    {% if account.accountType.type == 'Default account' or account.accountType.type == 'Asset account' or objectType == 'liabilities' %}
+                        {{ CurrencyForm.currencyList('currency_id', null, {helpText:'account_default_currency'|_}) }}
+
+                    {% endif %}
+
+                    {% if objectType == 'liabilities' %}
+                        {{ ExpandedForm.select('liability_type_id', liabilityTypes) }}
+                        {{ ExpandedForm.amountNoCurrency('opening_balance', null, {label:'debt_start_amount'|_, helpText: 'debt_start_amount_help'|_}) }}
+                        {{ ExpandedForm.select('liability_direction', liabilityDirections) }}
+                        {{ ExpandedForm.date('opening_balance_date', null, {label:'debt_start_date'|_}) }}
+                        {{ ExpandedForm.percentage('interest') }}
+                        {{ ExpandedForm.select('interest_period', interestPeriods) }}
+                    {% endif %}
+                </div>
+            </div>
+
+        </div>
+        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'optionalFields'|_ }}</h3>
+                </div>
+                <div class="box-body">
+                    {{ ExpandedForm.text('iban') }}
+                    {{ ExpandedForm.text('BIC', null, {maxlength: 11}) }}
+                    {% if preFilled.account_role == 'ccAsset' %}
+                        {{ ExpandedForm.text('account_number', null , {label:trans('form.creditCardNumber')}) }}
+                    {% else %}
+                        {{ ExpandedForm.text('account_number') }}
+                    {% endif %}
+
+                    {% if account.accounttype.type == 'Default account' or account.accounttype.type == 'Asset account' %}
+
+                        {# get opening balance entry for this thing! #}
+                        {{ ExpandedForm.amountNoCurrency('opening_balance',null) }}
+                        {{ ExpandedForm.date('opening_balance_date') }}
+                        {{ ExpandedForm.select('account_role', roles) }}
+                        {{ ExpandedForm.amountNoCurrency('virtual_balance',null) }}
+
+                    {% endif %}
+                    {{ ExpandedForm.checkbox('include_net_worth', 1) }}
+                    {{ ExpandedForm.textarea('notes',preFilled.notes,{helpText: trans('firefly.field_supports_markdown')}) }}
+                    {# only correct way to do active checkbox #}
+                    {{ ExpandedForm.checkbox('active', 1) }}
+                    {# only correct way to do active checkbox #}
+
+                    {{ ExpandedForm.location('location', null, {locations: locations}) }}
+                    {{ ExpandedForm.file('attachments[]', {'multiple': 'multiple','helpText': trans('firefly.upload_max_file_size', {'size': uploadSize|filesize}) }) }}
+
+                </div>
+            </div>
+
+            {# panel for credit card options #}
+            {% if preFilled.account_role == 'ccAsset' %}
+                <div class="box">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ 'credit_card_options'|_ }}</h3>
+                    </div>
+                    <div class="box-body">
+                        {{ ExpandedForm.select('cc_type',Config.get('firefly.ccTypes')) }}
+                        {{ ExpandedForm.date('cc_monthly_payment_date',null,{'helpText' : trans('firefly.cc_monthly_payment_date_help')}) }}
+                    </div>
+                </div>
+            {% endif %}
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-lg-6 col-md-6 col-sm-12">
+            {# panel for options  #}
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'options'|_ }}</h3>
+                </div>
+                <div class="box-body">
+                    {{ ExpandedForm.optionsList('update','account') }}
+                </div>
+                <div class="box-footer">
+                    <button type="submit" class="btn pull-right btn-success">
+                        {{ ('update_' ~ objectType ~ '_account')|_ }}
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+    </form>
+{% endblock %}
+{% block scripts %}
+    <script src="v1/lib/leaflet/leaflet.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/lib/modernizr-custom.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/lib/jquery-ui.min.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/ff/accounts/edit.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+{% endblock %}
+
+{% block styles %}
+    <link href="v1/css/jquery-ui/jquery-ui.structure.min.css?v={{ FF_VERSION }}" type="text/css" rel="stylesheet" media="all" nonce="{{ JS_NONCE }}">
+    <link href="v1/css/jquery-ui/jquery-ui.theme.min.css?v={{ FF_VERSION }}" type="text/css" rel="stylesheet" media="all" nonce="{{ JS_NONCE }}">
+    <link rel="stylesheet" href="v1/lib/leaflet/leaflet.css?v={{ FF_VERSION }}"  nonce="{{ JS_NONCE }}">
+{% endblock %}
diff --git a/resources/views/accounts/index.twig b/resources/views/accounts/index.twig
new file mode 100644
index 0000000000..cb13757c87
--- /dev/null
+++ b/resources/views/accounts/index.twig
@@ -0,0 +1,83 @@
+{% extends './v1/layout/default' %}
+
+{% block breadcrumbs %}
+    {{ Breadcrumbs.render(Route.getCurrentRoute.getName, objectType) }}
+{% endblock %}
+
+{% block content %}
+    {% if accounts.count() > 0 %}
+        <div class="row">
+            <div class="col-lg-12 col-md-12 col-sm-12">
+                <div class="box" id="account-index-{{ objectType }}">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">
+                            {{ subTitle }}
+                        </h3>
+                        <div class="box-tools pull-right">
+                            <div class="btn-group">
+                                <button class="btn btn-box-tool dropdown-toggle" data-toggle="dropdown"><span class="fa fa-ellipsis-v"></span></button>
+                                <ul class="dropdown-menu" role="menu">
+                                    <li><a href="{{ route('accounts.create', objectType) }}"><span
+                                                    class="fa fa-plus fa-fw"></span> {{ ('make_new_' ~ objectType ~ '_account')|_ }}
+                                        </a></li>
+                                </ul>
+                            </div>
+                        </div>
+
+
+                    </div>
+
+                    <div class="box-body no-padding">
+                        <div style="padding:8px;">
+                            <a href="{{ route('accounts.create', objectType) }}" class="btn btn-success"><span class="fa fa-plus fa-fw"></span> {{ ('make_new_' ~ objectType ~ '_account')|_ }}</a>
+                        </div>
+
+                        {% include 'list.accounts' %}
+                    </div>
+                    <div class="box-footer">
+                        <p>
+                            <a href="{{ route('accounts.create', objectType) }}" class="btn btn-success"><span
+                                        class="fa fa-plus fa-fw"></span> {{ ('make_new_' ~ objectType ~ '_account')|_ }}</a>
+                        </p>
+                        {% if inactiveCount > 0 %}
+                            <p><small>
+                                    <em>
+                                        <a href="{{ route('accounts.inactive.index', objectType) }}" class="text-muted">
+                                            {{ trans_choice('firefly.inactive_account_link', inactiveCount) }}
+                                        </a>
+                                    </em>
+                                </small>
+                            </p>
+                        {% endif %}
+                        {% if inactivePage %}
+                            <p><small class="text-muted">
+                                    <em>
+                                        {{ 'all_accounts_inactive'|_ }}
+                                        <a href="{{ route('accounts.index', objectType) }}">
+                                            {{ trans('firefly.active_account_link', {count: inactiveCount}) }}
+                                        </a>
+                                    </em>
+                                </small>
+                            </p>
+                        {% endif %}
+                    </div>
+                </div>
+            </div>
+        </div>
+    {% endif %}
+    {% if accounts.count() == 0 and page == 1 %}
+        {% include 'partials.empty' with {objectType: objectType, type: 'accounts',route: route('accounts.create', [objectType])} %}
+    {% endif %}
+{% endblock %}
+
+{% block styles %}
+
+{% endblock %}
+
+{% block scripts %}
+    <script type="text/javascript" nonce="{{ JS_NONCE }}">
+        var objectType = '{{ objectType|escape }}';
+    </script>
+    <script src="v1/js/lib/jquery-ui.min.js?v={{ FF_VERSION }}" type="text/javascript" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" nonce="{{ JS_NONCE }}" src="v1/js/ff/accounts/index.js?v={{ FF_VERSION }}"></script>
+{% endblock %}
diff --git a/resources/views/accounts/reconcile/edit.twig b/resources/views/accounts/reconcile/edit.twig
new file mode 100644
index 0000000000..72f76ea93f
--- /dev/null
+++ b/resources/views/accounts/reconcile/edit.twig
@@ -0,0 +1,119 @@
+{% extends './v1/layout/default' %}
+
+{% block breadcrumbs %}
+    {{ Breadcrumbs.render(Route.getCurrentRoute.getName, journal) }}
+{% endblock %}
+
+{% block content %}
+    <form method="POST" action="{{ route('accounts.reconcile.update',journal.id) }}" accept-charset="UTF-8" class="form-horizontal" id="update"
+          enctype="multipart/form-data">
+
+        <input name="_token" type="hidden" value="{{ csrf_token() }}">
+        <input type="hidden" name="id" value="{{ journal.id }}"/>
+
+        {% if errors.all|length > 0 %}
+            <div class="row">
+                <div class="col-lg-12">
+                    <h3 class="text-danger">{{ 'errors'|_ }}</h3>
+                    <ul>
+                        {% for err in errors.all %}
+                            <li class="text-danger">{{ err }}</li>
+                        {% endfor %}
+                    </ul>
+                </div>
+            </div>
+        {% endif %}
+
+
+        <div class="row">
+            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
+                <div class="box box-primary">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ 'mandatoryFields'|_ }}</h3>
+                    </div>
+                    <div class="box-body">
+                        {# ALWAYS AVAILABLE #}
+                        {{ ExpandedForm.staticText('description',journal.description) }}
+
+                        {# ALWAYS SHOW AMOUNT #}
+                        {{ ExpandedForm.nonSelectableAmount('amount',data.amount, {'currency' : data.currency}) }}
+
+                        {# ALWAYS SHOW DATE #}
+                        {{ ExpandedForm.staticText('date',journal.date.formatLocalized(monthAndDayFormat)) }}
+                    </div>
+                </div>
+
+            </div>
+            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
+                <div class="box">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ 'optionalFields'|_ }}</h3>
+                    </div>
+                    <div class="box-body">
+                        {# category always #}
+                        {{ ExpandedForm.text('category',data.category) }}
+
+                        {# tags #}
+                        {{ ExpandedForm.text('tags') }}
+                    </div>
+                </div>
+
+                {# box for attachments #}
+                {% if optionalFields.attachments %}
+                    <div class="box">
+                        <div class="box-header with-border">
+                            <h3 class="box-title">{{ 'optional_field_attachments'|_ }}</h3>
+                        </div>
+                        <div class="box-body">
+                            {% if optionalFields.attachments %}
+                                {# attachments #}
+                                {{ ExpandedForm.file('attachments[]', {'multiple': 'multiple','helpText': trans('firefly.upload_max_file_size', {'size': uploadSize|filesize}) }) }}
+                            {% endif %}
+                        </div>
+                    </div>
+                {% endif %}
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-lg-6 col-md-6 col-sm-12">
+                {# panel for options #}
+                <div class="box">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ 'options'|_ }}</h3>
+                    </div>
+                    <div class="box-body">
+                        {{ ExpandedForm.optionsList('update','transaction') }}
+                    </div>
+                    <div class="box-footer">
+                        <button type="submit" class="pull-right btn btn-success">{{ ('update_reconciliation')|_ }}</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+    </form>
+
+
+{% endblock %}
+{% block scripts %}
+    <script type="text/javascript" nonce="{{ JS_NONCE }}">
+        var what = "{{ what }}";
+    </script>
+    <script type="text/javascript" src="v1/js/lib/typeahead/typeahead.bundle.min.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/ff/common/autocomplete.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/lib/bootstrap-tagsinput.min.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/lib/jquery-ui.min.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/lib/modernizr-custom.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/jscript/accounts?ext=.js&amp;v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/jscript/currencies?ext=.js&amp;v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript">
+        var journal = {{ journal.toArray()|json_encode|raw }};
+        var journalData = {{ data|json_encode|raw }};
+    </script>
+    <script type="text/javascript" src="v1/js/ff/accounts/edit-reconciliation.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+{% endblock %}
+{% block styles %}
+    <link href="v1/css/bootstrap-tagsinput.css?v={{ FF_VERSION }}" type="text/css" rel="stylesheet"  media="all" nonce="{{ JS_NONCE }}">
+    <link href="v1/css/jquery-ui/jquery-ui.structure.min.css?v={{ FF_VERSION }}" type="text/css" rel="stylesheet"  media="all" nonce="{{ JS_NONCE }}">
+    <link href="v1/css/jquery-ui/jquery-ui.theme.min.css?v={{ FF_VERSION }}" type="text/css" rel="stylesheet"  media="all" nonce="{{ JS_NONCE }}">
+{% endblock %}
diff --git a/resources/views/accounts/reconcile/index.twig b/resources/views/accounts/reconcile/index.twig
new file mode 100644
index 0000000000..cdc9299848
--- /dev/null
+++ b/resources/views/accounts/reconcile/index.twig
@@ -0,0 +1,137 @@
+{% extends './v1/layout/default' %}
+
+{% block breadcrumbs %}
+    {{ Breadcrumbs.render(Route.getCurrentRoute.getName, account, start, end) }}
+{% endblock %}
+
+{% block content %}
+
+    <div class="row">
+        <div class="col-lg-9 col-md-12 col-sm-12 col-xs-12">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'reconcile_range'|_ }}</h3>
+                </div>
+                <div class="box-body no-padding">
+                    <table class="table table-hover">
+                        <thead>
+                        <tr>
+                            <th colspan="2" style="width:50%;">{{ 'start_balance'|_ }}</th>
+                            <th colspan="2">{{ 'end_balance'|_ }}</th>
+                        </tr>
+                        </thead>
+                        <tbody>
+                        <tr>
+                            <td style="width:25%;">
+                                {{ 'date'|_ }}
+                            </td>
+                            <td style="width:25%;">
+                                {{ 'balance'|_ }}
+                            </td>
+                            <td style="width:25%;">
+                                {{ 'date'|_ }}
+                            </td>
+                            <td style="width:25%;">
+                                {{ 'balance'|_ }}
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <div class="input-group">
+                                    <div class="input-group-addon">
+                                        <span class="fa fa-calendar"></span>
+                                    </div>
+                                    <input type="date" value="{{ start.format('Y-m-d') }}" name="start_date" class="form-control">
+                                </div>
+                            </td>
+                            <td>
+                                <div class="input-group">
+                                    <span class="input-group-addon non-selectable-currency-symbol">{{ currency.symbol }}</span>
+                                    <input type="number" value="{{ startBalance }}" name="start_balance" class="form-control">
+                                </div>
+                            </td>
+                            <td>
+                                <div class="input-group">
+                                    <div class="input-group-addon">
+                                        <span class="fa fa-calendar"></span>
+                                    </div>
+                                    <input type="date" value="{{ end.format('Y-m-d') }}" name="end_date" class="form-control">
+                                </div>
+                            </td>
+                            <td>
+                                <div class="input-group">
+                                    <span class="input-group-addon non-selectable-currency-symbol">{{ currency.symbol }}</span>
+                                    <input type="number" value="{{ endBalance }}" name="end_balance" class="form-control">
+                                </div>
+                            </td>
+                        </tr>
+                        </tbody>
+                        <tfoot>
+                        <tr>
+                            <td colspan="3">
+                                <div class="update_balance_instruction">
+                                    {{ 'update_balance_dates_instruction'|_ }}
+                                </div>
+                                <div class="select_transactions_instruction" style="display:none;">
+                                    {{ 'select_transactions_instruction'|_ }}
+                                </div>
+                                <div class="date_change_warning text-danger" style="display:none;">
+                                    {{ 'date_change_instruction'|_ }}
+                                </div>
+                            </td>
+                            <td>
+                                <a href="#" class="btn btn-default start_reconcile">{{ 'start_reconcile'|_ }}</a>
+                                <a href="#" class="btn btn-default change_date_button" style="display: none;">{{ 'update_selection'|_ }}</a>
+                            </td>
+                        </tr>
+                        </tfoot>
+                    </table>
+                </div>
+            </div>
+        </div>
+        <div class="col-lg-3 col-md-12 col-sm-12 col-xs-12">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'reconcile_options'|_ }}</h3>
+                </div>
+                <div class="box-body">
+                    <p class="lead" id="difference"></p>
+
+                    <div class="btn-group">
+                        <button class="btn btn-default store_reconcile" disabled><span class="fa fa-fw fa-check"></span> {{ 'store_reconcile'|_ }}</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+    </div>
+
+    <div class="row">
+        <div class="col-lg-12 col-md-12 col-sm-12">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'transactions'|_ }}</h3>
+                </div>
+                <div class="box-body">
+                    <div id="transactions_holder">
+                        <p class="text-center lead">{{ 'select_range_and_balance'|_ }}</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+{% endblock %}
+
+{% block scripts %}
+    <script type="text/javascript" nonce="{{ JS_NONCE }}">
+        currencySymbol = "{{ currency.symbol }}";
+        var accountID = {{ account.id }};
+        var startBalance = {{ startBalance }};
+        var endBalance = {{ endBalance }};
+        var transactionsUri = '{{ transactionsUri }}';
+        var overviewUri = '{{ overviewUri }}';
+        var indexUri = '{{ indexUri }}';
+        var selectRangeAndBalance = '{{ 'select_range_and_balance'|_|escape('js') }}';
+    </script>
+    <script src="v1/js/ff/accounts/reconcile.js?v={{ FF_VERSION }}" type="text/javascript" nonce="{{ JS_NONCE }}"></script>
+{% endblock %}
diff --git a/resources/views/accounts/reconcile/overview.twig b/resources/views/accounts/reconcile/overview.twig
new file mode 100644
index 0000000000..7116cf6ed4
--- /dev/null
+++ b/resources/views/accounts/reconcile/overview.twig
@@ -0,0 +1,107 @@
+<div class="modal-dialog modal-lg">
+    <div class="modal-content">
+        <div class="modal-header">
+            <button type="button" class="close" data-dismiss="modal"><span>&times;</span><span class="sr-only">{{ 'close'|_ }}</span>
+            </button>
+            <h4 class="modal-title">
+                {{ 'overview_of_reconcile_modal'|_ }}
+            </h4>
+        </div>
+
+        <form style="display: inline;" class="form-horizontal" id="income" action="{{ route }}" method="POST">
+            <div class="modal-body">
+                <input type="hidden" name="_token" value="{{ csrf_token() }}"/>
+                <input type="hidden" name="start" value="{{ start.format('Y-m-d') }}"/>
+                <input type="hidden" name="end" value="{{ end.format('Y-m-d') }}"/>
+                <input type="hidden" name="startBalance" value="{{ startBalance }}"/>
+                <input type="hidden" name="endBalance" value="{{ endBalance }}"/>
+                {% for id in selectedIds %}
+                    <input type="hidden" name="journals[]" value="{{ id }}"/>
+                {% endfor %}
+
+                <table class="table table-striped table-bordered">
+                    <tr>
+                        <td>{{ 'submitted_start_balance'|_ }} ({{ start.formatLocalized(monthAndDayFormat) }})</td>
+                        <td>{{ formatAmountByAccount(account, startBalance) }}</td>
+                    </tr>
+                    <tr>
+                        <td>{{ trans('firefly.selected_transactions', {count: selectedIds|length}) }}</td>
+                        <td>{{ formatAmountByAccount(account, amount) }}</td>
+                    </tr>
+                    <tr>
+                        <td>{{ trans('firefly.already_cleared_transactions', {count: countCleared}) }}</td>
+                        <td>{{ formatAmountByAccount(account, clearedAmount) }}</td>
+                    </tr>
+                    <tr>
+                        <td>{{ 'submitted_end_balance'|_ }} ({{ end.formatLocalized(monthAndDayFormat) }})</td>
+                        <td>{{ formatAmountByAccount(account, endBalance) }}</td>
+                    </tr>
+                    <tr>
+                        <td>{{ 'sum_of_reconciliation'|_ }}</td>
+                        <td>{{ formatAmountByAccount(account, reconSum) }}</td>
+                    </tr>
+
+                    <tr>
+                        <td>{{ 'difference'|_ }}</td>
+                        <td>
+                            {{ formatAmountByAccount(account, difference) }}
+                            <input type="hidden" name="difference" value="{{ difference }}"/>
+                        </td>
+
+                    </tr>
+                </table>
+                <p>
+                    {% if diffCompare > 0 %}
+                        {{ 'reconcile_has_more'|_ }}
+                    {% endif %}
+                    {% if diffCompare < 0 %}
+                        {{ 'reconcile_has_less'|_ }}
+                    {% endif %}
+                </p>
+                {% if diffCompare == 0 %}
+                    <p>
+                        {{ 'reconcile_is_equal'|_ }}
+                    </p>
+                    <input type="hidden" name="reconcile" value="nothing">
+                {% endif %}
+                {% if diffCompare != 0 %}
+                    <div class="form-group">
+                        <div class="col-lg-12">
+                            <div class="radio">
+                                <label>
+
+                                    <input type="radio" name="reconcile" value="create">
+                                    {% if diffCompare > 0 %}
+                                        {{ trans('firefly.create_neg_reconcile_transaction', {amount: formatAmountByAccount(account, (difference*-1))})|raw }}
+                                    {% endif %}
+                                    {% if diffCompare < 0 %}
+                                        {{ trans('firefly.create_pos_reconcile_transaction', {amount: formatAmountByAccount(account, (difference*-1))})|raw }}
+                                    {% endif %}
+                                </label>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="form-group">
+                        <div class="col-lg-12">
+                            <div class="radio">
+                                <label>
+                                    <input type="radio" checked name="reconcile" value="nothing"> {{ 'reconcile_do_nothing'|_ }}
+                                </label>
+                            </div>
+                        </div>
+                    </div>
+
+                    <p>
+                        {{ 'reconcile_go_back'|_ }}
+                    </p>
+                {% endif %}
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-default" data-dismiss="modal">{{ 'close'|_ }}</button>
+                <button type="submit" class="btn btn-primary">{{ 'confirm_reconciliation'|_ }}</button>
+            </div>
+        </form>
+    </div>
+</div>
+
diff --git a/resources/views/accounts/reconcile/show.twig b/resources/views/accounts/reconcile/show.twig
new file mode 100644
index 0000000000..4a74ec2dd9
--- /dev/null
+++ b/resources/views/accounts/reconcile/show.twig
@@ -0,0 +1,109 @@
+{% extends './v1/layout/default' %}
+
+{% block breadcrumbs %}
+    {{ Breadcrumbs.render(Route.getCurrentRoute.getName, account, journal) }}
+{% endblock %}
+
+{% block content %}
+    <div class="row">
+        <div class="col-lg-6 col-md-6 col-sm-12">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'transaction_journal_information'|_ }}</h3>
+
+                    <div class="box-tools pull-right">
+                        <div class="btn-group">
+                            <button id="transaction_menu" class="btn btn-box-tool dropdown-toggle" data-toggle="dropdown"><span class="fa fa-ellipsis-v"></span>
+                            </button>
+                            <ul class="dropdown-menu" role="menu">
+                                <li><a href="{{ route('transactions.edit',journal.id) }}"><span class="fa fa-pencil fa-fw"></span> {{ 'edit'|_ }}</a></li>
+                                <li><a href="{{ route('transactions.delete',journal.id) }}"><span class="fa fa-trash fa-fw"></span> {{ 'delete'|_ }}</a></li>
+                            </ul>
+                        </div>
+                    </div>
+
+                </div>
+                <div class="box-body no-padding">
+                    <table class="table table-hover">
+                        <tbody>
+                        <tr>
+                            <td>{{ trans('list.type') }}</td>
+                            <td>{{ journal.transactiontype.type|_ }}</td>
+                        </tr>
+                        <tr>
+                            <td>{{ trans('list.description') }}</td>
+                            <td>{{ journal.description }}</td>
+                        </tr>
+                        {# total amount #}
+                        <tr>
+                            <td>{{ 'total_amount'|_ }}</td>
+                            <td>
+                                {{ formatAmountByAccount(transaction.account, transaction.amount) }}
+
+                            </td>
+                        </tr>
+                        <tr>
+                            <td style="width:30%;">{{ trans('list.date') }}</td>
+                            <td>{{ journal.date.formatLocalized(monthAndDayFormat) }}</td>
+                        </tr>
+                        </tbody>
+                    </table>
+                </div>
+                <div class="box-footer">
+                    <div class="pull-right">
+                        <div class="btn-group">
+                            <a class="btn btn-default" href="{{ route('transactions.edit',journal.id) }}"><span class="fa fa-pencil fa-fw"></span> {{ 'edit'|_ }}</a>
+                            <a href="{{ route('transactions.delete',journal.id) }}" class="btn btn-danger"><span class="fa fa-trash fa-fw"></span> {{ 'delete'|_ }}
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="col-lg-6 col-md-6 col-sm-12">
+
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'transaction_journal_meta'|_ }}</h3>
+                </div>
+                <div class="box-body no-padding">
+                    <table class="table table-responsive table-hover">
+                        <tbody>
+                        {#
+                        <tr>
+                            <td>{{ 'categories'|_ }}</td>
+                            <td>{{ journalCategories(journal)|raw }}</td>
+                        </tr>
+                        #}
+                        {% if journal.tags|length > 0 %}
+                            <tr>
+                                <td>{{ 'tags'|_ }}</td>
+                                <td>
+                                    {% for tag in journal.tags %}
+
+                                        <h4 style="display: inline;"><a class="label label-success" href="{{ route('tags.show',tag) }}">
+                                                {% if tag.tagMode == 'nothing' %}
+                                                    <span class="fa fa-fw fa-tag"></span>
+                                                {% endif %}
+                                                {% if tag.tagMode == 'balancingAct' %}
+                                                    <span class="fa fa-fw fa-refresh"></span>
+                                                {% endif %}
+                                                {% if tag.tagMode == 'advancePayment' %}
+                                                    <span class="fa fa-fw fa-sort-numeric-desc"></span>
+                                                {% endif %}
+                                                {{ tag.tag }}</a>
+                                        </h4>
+                                    {% endfor %}
+                                </td>
+                            </tr>
+                        {% endif %}
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+    </div>
+
+{% endblock %}
+{% block scripts %}
+{% endblock %}
diff --git a/resources/views/accounts/reconcile/transactions.twig b/resources/views/accounts/reconcile/transactions.twig
new file mode 100644
index 0000000000..0b3389205e
--- /dev/null
+++ b/resources/views/accounts/reconcile/transactions.twig
@@ -0,0 +1,176 @@
+<table class="table table-striped table-condensed">
+    <thead>
+    <tr class="ignore">
+        <th class="hidden-xs" colspan="2">&nbsp;</th>
+        <th>{{ trans('list.description') }}</th>
+        <th style="text-align:right;">{{ trans('list.amount') }}</th>
+        <th class="hidden-xs hidden-sm hidden-md">{{ trans('list.reconcile') }}</th>
+        <th class="hidden-xs hidden-sm">{{ trans('list.date') }}</th>
+        <th class="hidden-xs hidden-sm hidden-md">{{ trans('list.from') }}</th>
+        <th class="hidden-xs hidden-sm hidden-md">{{ trans('list.to') }}</th>
+        <th class="hidden-xs"><span class="fa fa-pie-chart fa-fw" title="{{ trans('list.budget') }}"></span></th>
+        <th class="hidden-xs"><span class="fa fa-bookmark fa-fw" title="{{ trans('list.category') }}"></span></th>
+    </tr>
+    </thead>
+    <tbody>
+    {# data for previous/next markers #}
+    {% set endSet = false %}
+    {% set startSet = false %}
+    {% for journal in journals %}
+        {# start marker #}
+        {% if journal.date < start and startSet == false %}
+            <tr>
+                <td colspan="4">
+                    &nbsp;
+                </td>
+                <td>
+                    <input type="checkbox" class="check_all_btn">
+                </td>
+                <td colspan="3">
+                    <span class="label label-default">
+                        {{ trans('firefly.start_of_reconcile_period', {period: start.formatLocalized(monthAndDayFormat) }) }}
+                    </span>
+                </td>
+                <td colspan="2">
+                    &nbsp;
+                </td>
+            </tr>
+            {% set startSet = true %}
+        {% endif %}
+
+        {# end marker #}
+        {% if journal.date <= end and endSet == false %}
+            <tr>
+                <td colspan="4">
+                    &nbsp;
+                </td>
+                <td>
+                    <input type="checkbox" class="check_all_btn">
+                </td>
+                <td colspan="3">
+                    <span class="label label-default">
+                        {{ trans('firefly.end_of_reconcile_period', {period: end.formatLocalized(monthAndDayFormat) }) }}
+                    </span>
+                </td>
+                <td colspan="2">
+                    &nbsp;
+                </td>
+            </tr>
+            {% set endSet = true %}
+        {% endif %}
+        <tr data-date="{{ journal.date.format('Y-m-d') }}" data-id="{{ journal.transaction_journal_id }}">
+            <td class="hidden-xs">
+                <div class="btn-group btn-group-xs">
+                    <a href="{{ route('transactions.edit', [journal.transaction_group_id]) }}" class="btn btn-xs btn-default"><span
+                                class="fa fa-fw fa-pencil"></span></a>
+                </div>
+
+            </td>
+
+            <!-- icon -->
+            <td class="hidden-xs">
+                {% if journal.transaction_type_type == 'Withdrawal' %}
+                    <span class="fa fa-long-arrow-left fa-fw" title="{{ trans('firefly.Withdrawal') }}"></span>
+                {% endif %}
+
+                {% if journal.transaction_type_type == 'Deposit' %}
+                    <span class="fa fa-long-arrow-right fa-fw" title="{{ trans('firefly.Deposit') }}"></span>
+                {% endif %}
+
+                {% if journal.transaction_type_type == 'Transfer' %}
+                    <span class="fa fa-exchange fa-fw" title="{{ trans('firefly.Deposit') }}"></span>
+                {% endif %}
+
+                {% if journal.transaction_type_type == 'Reconciliation' %}
+                    <span class="fa-fw fa fa-calculator" title="{{ trans('firefly.reconciliation_transaction') }}"></span>
+                {% endif %}
+                {% if journal.transaction_type_type == 'Opening balance' %}
+                    <span class="fa-fw fa fa-star-o" title="{{ trans('firefly.Opening balance') }}"></span>
+                {% endif %}
+            </td>
+
+            <!-- description -->
+            <td>
+                <a href="{{ route('transactions.show', [journal.transaction_group_id]) }}" title="{{ journal.description }}">
+                    {% if journal.group_title %}
+                        <span class="text-muted"><span class="fa fa-fw fa-share-alt" aria-hidden="true"></span></span> {{ journal.group_title }}:
+                    {% endif %}
+                    {{ journal.description }}</a>
+            </td>
+
+            <td style="text-align: right;">
+                <span style="margin-right:5px;">
+                    {{ formatAmountBySymbol(journal.amount, journal.currency_symbol, journal.currency_decimal_places) }}
+                {% if null != journal.foreign_amount %}
+                    ({{ formatAmountBySymbol(journal.foreign_amount, journal.foreign_currency_symbol, journal.foreign_currency_decimal_places) }})
+                {% endif %}
+                </span>
+            </td>
+
+            <td>
+                {% if journal.date >= start and journal.date <= end  %}
+                    {% if journal.reconciled %}
+                        <span class="fa fa-check" aria-hidden="true"></span>
+                        <input type="hidden" name="cleared[]" data-younger="{% if journal.date < start %}true{% else %}false{% endif %}"
+                        data-inrange="{% if journal.date >= start and journal.date <= end  %}true{% else %}false"{% endif %}"
+                        class="cleared" data-id="{{ journal.transaction_journal_id }}" value="{{ journal.amount }}">
+                    {% else %}
+                        <input type="checkbox" name="reconciled[]"
+                               data-younger="{% if journal.date < start %}true{% else %}false{% endif %}"
+                        data-inrange="{% if journal.date >= start and journal.date <= end  %}true{% else %}false"{% endif %}"
+                        value="{{ journal.amount }}" data-id="{{ journal.transaction_journal_id }}" disabled class="reconcile_checkbox">
+                    {% endif %}
+                {% else %}
+                    <!-- if not in range, just show reconciliation status -->
+                    {% if journal.reconciled %}
+                        <span class="fa fa-check" aria-hidden="true"></span>
+                    {% else %}
+<!-- See reference nr. 1 --> 
+                    {% endif %}
+
+                {% endif %}
+
+            </td>
+
+            <td class="hidden-sm hidden-xs">
+                {{ journal.date.formatLocalized(monthAndDayFormat) }}
+            </td>
+
+            <td class="hidden-xs hidden-sm hidden-md">
+                <a href="{{ route('accounts.show', [journal.source_account_id]) }}" title="{{ journal.source_account_iban|default(journal.source_account_name) }}">{{ journal.source_account_name }}</a>
+            </td>
+
+            <td class="hidden-xs hidden-sm hidden-md">
+                <a href="{{ route('accounts.show', [journal.destination_account_id]) }}" title="{{ journal.destination_account_iban|default(journal.destination_account_name) }}">{{ journal.destination_account_name }}</a>
+            </td>
+            {#
+            <td class="hidden-xs">
+                {{ transaction|transactionBudgets }}
+            </td>
+            <td class="hidden-xs">
+                {{ transaction|transactionCategories }}
+            </td>
+            #}
+        </tr>
+
+    {% endfor %}
+
+    {# if the start marker has not been generated yet, do it now, at the end of the loop. #}
+    {% if startSet == false %}
+        <tr>
+            <td colspan="5">
+                &nbsp;
+            </td>
+            <td colspan="3">
+                <span class="label label-default">
+                    {{ trans('firefly.start_of_reconcile_period', {period: start.formatLocalized(monthAndDayFormat) }) }}
+                </span>
+            </td>
+            <td colspan="2">
+                &nbsp;
+            </td>
+        </tr>
+        {% set startSet = true %}
+    {% endif %}
+    </tbody>
+</table>
diff --git a/resources/views/accounts/show.twig b/resources/views/accounts/show.twig
new file mode 100644
index 0000000000..ffaf5a8395
--- /dev/null
+++ b/resources/views/accounts/show.twig
@@ -0,0 +1,220 @@
+{% extends './v1/layout/default' %}
+
+{% block breadcrumbs %}
+    {{ Breadcrumbs.render(Route.getCurrentRoute.getName, account, start, end) }}
+{% endblock %}
+
+{% block content %}
+
+    <div class="row">
+        <div class="{% if attachments.count() == 0 %}col-lg-12 col-md-12 col-sm-12 col-xs-12{% else %}col-lg-8 col-md-6 col-sm-12 col-xs-12{% endif %}">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">
+                        {{ trans('firefly.chart_account_in_period', {
+                            balance: formatAmountBySymbol(balance, currency.symbol, currency.decimal_places, true),
+                            name: account.name|escape, start: start.formatLocalized(monthAndDayFormat), end: end.formatLocalized(monthAndDayFormat) })|raw }}
+                    </h3>
+                    <div class="box-tools pull-right">
+                        <div class="btn-group">
+                            <button class="btn btn-box-tool dropdown-toggle" data-toggle="dropdown"><span class="fa fa-ellipsis-v"></span></button>
+                            <ul class="dropdown-menu" role="menu">
+                                <li><a href="{{ route('accounts.edit', account.id) }}"><span class="fa fa-pencil fa-fw"></span> {{ 'edit'|_ }}</a></li>
+                                <li><a href="{{ route('accounts.delete', account.id) }}"><span class="fa fa-trash fa-fw"></span> {{ 'delete'|_ }}</a></li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+                <div class="box-body">
+                    <div>
+                        <canvas id="overview-chart" style="width:100%;height:400px;" height="400" width="100%"></canvas>
+                    </div>
+                </div>
+            </div>
+        </div>
+        {% if attachments.count() > 0 %}
+            <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
+                <div class="box">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">
+                            {{ 'attachments'|_ }}
+                        </h3>
+                    </div>
+                    <div class="box-body no-padding">
+                        {% include 'list.attachments' %}
+                    </div>
+                </div>
+            </div>
+        {% endif %}
+    </div>
+    {% if not showAll and isLiability %}
+        <div class="row">
+            <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
+                <div class="box">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">pay-off by date</h3>
+                    </div>
+                    <div class="box-body">
+                        Content
+                    </div>
+                </div>
+            </div>
+        </div>
+    {% endif %}
+    {% if not showAll and not isLiability %}
+        <div class="row">
+            <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
+                <div class="box">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ 'expenses_by_category'|_ }}</h3>
+                    </div>
+                    <div class="box-body">
+                        <div style="width:100%;margin:0 auto;">
+                            <canvas id="account-cat-out" style="width:100%;height:250px;" height="250"></canvas>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
+                <div class="box">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ 'expenses_by_budget'|_ }}</h3>
+                    </div>
+                    <div class="box-body">
+                        <div style="width:100%;margin:0 auto;">
+                            <canvas id="account-budget-out" style="width:100%;height:250px;" height="250"></canvas>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
+                <div class="box">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ 'income_by_category'|_ }}</h3>
+                    </div>
+                    <div class="box-body">
+                        <div style="width:100%;margin:0 auto;">
+                            <canvas id="account-cat-in" style="width:100%;height:250px;" height="250"></canvas>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    {% endif %}
+
+    <div class="row">
+        {% if(location) %}
+        <div class="col-lg-6">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'location'|_ }}</h3>
+                </div>
+                <div class="box-body">
+                    <div id="location_map" style="width:100%;height:300px;"></div>
+                </div>
+            </div>
+        </div>
+        {% endif %}
+        {% if account.notes.count() == 1 %}
+            <div class="col-lg-6">
+                <div class="box">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ 'notes'|_ }}</h3>
+                    </div>
+                    <div class="box-body">
+                        {{ account.notes.first().text|markdown }}
+                    </div>
+                </div>
+            </div>
+        {% endif %}
+    </div>
+
+    <div class="row">
+        <div class="{% if periods|length > 0 %}col-lg-10 col-md-8 col-sm-12{% else %}col-lg-12 col-md-12 col-sm-12{% endif %}">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'transactions'|_ }} ({{ formatAmountBySymbol(balance, currency.symbol, currency.decimal_places, true)|raw }})</h3>
+                </div>
+                <div class="box-body">
+                    {% if account.accountType.type == 'Asset account' %}
+                        {% set showReconcile = true %}
+                    {% else %}
+                        {% set showReconcile = false %}
+                    {% endif %}
+
+                    {% include 'list.groups' %}
+                    <p>
+                        <span class="fa fa-calendar"></span>
+                        {% if periods|length > 0 %}
+                            <a href="{{ route('accounts.show.all', [account.id]) }}">
+                                {{ 'show_all_no_filter'|_ }}
+                            </a>
+                        {% else %}
+                            <a href="{{ route('accounts.show', [account.id]) }}">
+                                {{ 'show_the_current_period_and_overview'|_ }}
+                            </a>
+                        {% endif %}
+                    </p>
+                </div>
+            </div>
+        </div>
+        {% if periods|length > 0 %}
+            <div class="col-lg-2 col-md-4 col-sm-12 col-xs-12">
+                {% include 'list.periods' %}
+            </div>
+        {% endif %}
+    </div>
+{% endblock %}
+
+{% block scripts %}
+    <script type="text/javascript" nonce="{{ JS_NONCE }}">
+        var doPlaceMarker = false;
+        // location stuff
+        {% if location %}
+            var latitude = {{ location.latitude|default("52.3167") }};
+            var longitude = {{ location.longitude|default("5.5500") }};
+            var zoomLevel = {{ location.zoom_level|default("6") }};
+            doPlaceMarker = true;
+            // token for Mapbox:
+            var mapboxToken = "{{ config('firefly.mapbox_api_key') }}";
+        {% endif %}
+
+        var showAll = true;
+        currencySymbol = "{{ currency.symbol }}";
+        var accountID = {{ account.id }};
+        var chartUri = '{{ chartUri }}';
+        {% if not showAll %}
+        showAll = false;
+        // uri's for charts:
+
+        var incomeCategoryUri = '{{ route('chart.account.income-category', [account.id, start.format('Ymd'), end.format('Ymd')]) }}';
+        var expenseCategoryUri = '{{ route('chart.account.expense-category', [account.id, start.format('Ymd'), end.format('Ymd')]) }}';
+        var expenseBudgetUri = '{{ route('chart.account.expense-budget', [account.id, start.format('Ymd'), end.format('Ymd')]) }}';
+        var drawVerticalLine = '';
+        {# render vertical line with text "today"  #}
+        {% if start.lte(today) and end.gte(today) %}
+        drawVerticalLine = '{{ today.formatLocalized(monthAndDayFormat) }}';
+        {% endif %}
+        {% endif %}
+
+    </script>
+    {% if location %}
+        <script src="v1/lib/leaflet/leaflet.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    {% endif %}
+    <script type="text/javascript" src="v1/js/lib/Chart.bundle.min.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/lib/chartjs-plugin-annotation.min.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/ff/charts.defaults.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/ff/charts.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+
+    <script src="v1/js/lib/jquery-ui.min.js?v={{ FF_VERSION }}" type="text/javascript" nonce="{{ JS_NONCE }}"></script>
+    <script src="v1/js/lib/jquery.color-2.1.2.min.js?v={{ FF_VERSION }}" type="text/javascript" nonce="{{ JS_NONCE }}"></script>
+    <script src="v1/js/ff/accounts/show.js?v={{ FF_VERSION }}" type="text/javascript" nonce="{{ JS_NONCE }}"></script>
+    {# required for groups.twig #}
+    <script type="text/javascript" src="v1/js/ff/list/groups.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+{% endblock %}
+
+{% block styles %}
+    {% if location %}
+        <link rel="stylesheet" href="v1/lib/leaflet/leaflet.css?v={{ FF_VERSION }}"  nonce="{{ JS_NONCE }}">
+    {% endif %}
+{% endblock %}
diff --git a/resources/views/admin/configuration/index.twig b/resources/views/admin/configuration/index.twig
new file mode 100644
index 0000000000..bd07e74df3
--- /dev/null
+++ b/resources/views/admin/configuration/index.twig
@@ -0,0 +1,69 @@
+{% extends './v1/layout/default' %}
+
+{% block breadcrumbs %}
+    {{ Breadcrumbs.render }}
+{% endblock %}
+{% block content %}
+    <form action="{{ route('admin.configuration.index.post') }}" method="post" id="store" class="form-horizontal">
+
+        <div class="row">
+
+            <input type="hidden" name="_token" value="{{ csrf_token() }}"/>
+
+            {# single user mode #}
+            <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
+                <div class="box box-default">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ 'setting_single_user_mode'|_ }}</h3>
+                    </div>
+                    <div class="box-body">
+                        <p class="text-info">
+                            {{ 'setting_single_user_mode_explain'|_ }}
+                        </p>
+                        {{ ExpandedForm.checkbox('single_user_mode','1', singleUserMode) }}
+                    </div>
+                </div>
+            </div>
+
+            {# installation is demo site #}
+            <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
+                <div class="box box-default">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ 'setting_is_demo_site'|_ }}</h3>
+                    </div>
+                    <div class="box-body">
+                        <p class="text-info">
+                            {{ 'setting_is_demo_site_explain'|_ }}
+                        </p>
+                        {{ ExpandedForm.checkbox('is_demo_site','1', isDemoSite) }}
+                    </div>
+                </div>
+            </div>
+
+            {# block for config setting #}
+            {#
+            <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
+                <div class="box box-default">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ 'setting_x'|_ }}</h3>
+                    </div>
+                    <div class="box-body">
+                        <p class="text-info">
+                            {{ 'setting_x_explain'|_ }}
+                        </p>
+                    </div>
+                </div>
+            </div>
+            #}
+        </div>
+        <div class="row">
+            <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
+                <button type="submit" class="btn btn-success">
+                    {{ ('store_configuration')|_ }}
+                </button>
+            </div>
+        </div>
+
+    </form>
+
+{% endblock %}
diff --git a/resources/views/admin/index.twig b/resources/views/admin/index.twig
new file mode 100644
index 0000000000..5cd009cffc
--- /dev/null
+++ b/resources/views/admin/index.twig
@@ -0,0 +1,67 @@
+{% extends './v1/layout/default' %}
+
+{% block breadcrumbs %}
+    {{ Breadcrumbs.render }}
+{% endblock %}
+{% block content %}
+    <div class="row">
+        <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12">
+            <div class="box box-default">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'instance_configuration'|_ }}</h3>
+                </div>
+                <div class="box-body">
+                    <ul>
+                        <li><a href="{{ route('admin.configuration.index') }}">{{ 'firefly_instance_configuration'|_ }}</a></li>
+                        <li><a href="{{ route('admin.links.index') }}">{{ 'journal_link_configuration'|_ }}</a></li>
+                        <li><a href="{{ route('admin.update-check') }}">{{ 'update_check_title'|_ }}</a></li>
+                    </ul>
+                </div>
+            </div>
+            <div class="box box-default">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'user_administration'|_ }}</h3>
+                </div>
+                <div class="box-body">
+                    <ul>
+                        <li><a href="{{ route('admin.users') }}">{{ 'list_all_users'|_ }}</a></li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+        <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12">
+            <div class="box box-default">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'send_test_email'|_ }}</h3>
+                </div>
+                <form action="{{ route('admin.test-message') }}" method="post">
+                    <div class="box-body">
+                        <p>
+                            {{ trans('firefly.send_test_email_text', {email:email})|raw }}
+                        </p>
+                        <input type="hidden" name="_token" value="{{ csrf_token() }}">
+                    </div>
+                    <div class="box-footer">
+                        <button type="submit" class="btn btn-success">
+                            <span class="fa fa-envelope"></span> {{ ('send_message')|_ }}
+                        </button>
+                    </div>
+                </form>
+            </div>
+            <div class="box box-default">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'admin_maintanance_title'|_ }}</h3>
+                </div>
+                <div class="box-body">
+                    <p>
+                        {{ 'admin_maintanance_expl'|_ }}
+                    </p>
+                    <p>
+                        <a href="{{ route('flush') }}" class="btn btn-warning">{{ 'admin_maintenance_clear_cache'|_ }}</a>
+                    </p>
+                </div>
+            </div>
+        </div>
+    </div>
+
+{% endblock %}
diff --git a/resources/views/admin/link/create.twig b/resources/views/admin/link/create.twig
new file mode 100644
index 0000000000..76eac6df3d
--- /dev/null
+++ b/resources/views/admin/link/create.twig
@@ -0,0 +1,46 @@
+{% extends './v1/layout/default' %}
+
+{% block breadcrumbs %}
+    {{ Breadcrumbs.render(Route.getCurrentRoute.getName) }}
+{% endblock %}
+
+{% block content %}
+
+    <form method="POST" action="{{ route('admin.links.store') }}" accept-charset="UTF-8" class="form-horizontal">
+        <input name="_token" type="hidden" value="{{ csrf_token() }}">
+        <div class="row">
+            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
+                <div class="box box-primary">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ 'mandatoryFields'|_ }}</h3>
+                    </div>
+                    <div class="box-body">
+                        {{ ExpandedForm.text('name', null, {helpText: trans('firefly.link_type_help_name')}) }}
+                        {{ ExpandedForm.text('inward', null, {helpText: trans('firefly.link_type_help_inward')}) }}
+                        {{ ExpandedForm.text('outward', null, {helpText: trans('firefly.link_type_help_outward')}) }}
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
+                {# panel for options #}
+                <div class="box">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ 'options'|_ }}</h3>
+                    </div>
+                    <div class="box-body">
+                        {{ ExpandedForm.optionsList('create','link_type') }}
+                    </div>
+                    <div class="box-footer">
+                        <button type="submit" class="btn pull-right btn-success">{{ 'store_new_link_type'|_ }}</button>
+                    </div>
+                </div>
+
+            </div>
+
+        </div>
+    </form>
+
+
+{% endblock %}
diff --git a/resources/views/admin/link/delete.twig b/resources/views/admin/link/delete.twig
new file mode 100644
index 0000000000..7aa4a5529a
--- /dev/null
+++ b/resources/views/admin/link/delete.twig
@@ -0,0 +1,53 @@
+{% extends './v1/layout/default' %}
+
+{% block breadcrumbs %}
+    {{ Breadcrumbs.render(Route.getCurrentRoute.getName, linkType) }}
+{% endblock %}
+
+{% block content %}
+
+    <form method="POST" action="{{ route('admin.links.destroy',linkType.id) }}" accept-charset="UTF-8" class="form-horizontal" id="destroy">
+        <input name="_token" type="hidden" value="{{ csrf_token() }}">
+        <div class="row">
+            <div class="col-lg-6 col-lg-offset-3 col-md-12 col-sm-12">
+                <div class="box box-danger">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ trans('form.delete_link_type', {'name': linkType.name}) }}</h3>
+                    </div>
+                    <div class="box-body">
+                        <p class="text-danger">
+                            {{ trans('form.permDeleteWarning') }}
+                        </p>
+
+                        <p>
+                            {{ trans('form.linkType_areYouSure', {'name': linkType.name,'inward': linkType.inward,'outward': linkType.outward}) }}
+                        </p>
+
+                        {% if count > 0 %}
+                            <p>
+                                {{ Lang.choice('form.also_delete_connections', count, {count: count}) }}
+                            </p>
+                        {% endif %}
+                        {% if count > 0 %}
+                            <p class="text-success">
+                                {{ 'save_connections_by_moving'|_ }}
+                            </p>
+
+                            <p>
+                                {{ Form.select('move_link_type_before_delete', moveTo, null, {class: 'form-control'}) }}
+                            </p>
+                        {% else %}
+                            <input type="hidden" name="move_link_type_before_delete" value="0"/>
+                        {% endif %}
+
+                    </div>
+                    <div class="box-footer">
+                        <input type="submit" name="submit" value="{{ trans('form.deletePermanently') }}" class="btn pull-right btn-danger"/>
+                        <a href="{{ URL.previous() }}" class="btn-default btn">{{ trans('form.cancel') }}</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+    </form>
+{% endblock %}
diff --git a/resources/views/admin/link/edit.twig b/resources/views/admin/link/edit.twig
new file mode 100644
index 0000000000..4f996c8ac1
--- /dev/null
+++ b/resources/views/admin/link/edit.twig
@@ -0,0 +1,50 @@
+{% extends './v1/layout/default' %}
+
+{% block breadcrumbs %}
+    {{ Breadcrumbs.render(Route.getCurrentRoute.getName, linkType) }}
+{% endblock %}
+
+{% block content %}
+
+    {{ Form.model(linkType, {'class' : 'form-horizontal','id' : 'update','url' : route('admin.links.update', linkType.id) } ) }}
+    <input type="hidden" name="id" value="{{ linkType.id }}"/>
+    <input name="_token" type="hidden" value="{{ csrf_token() }}">
+    <div class="row">
+        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
+            <div class="box box-primary">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'mandatoryFields'|_ }}</h3>
+                </div>
+                <div class="box-body">
+                    {{ ExpandedForm.text('name', null, {helpText: trans('firefly.link_type_help_name')}) }}
+                    {{ ExpandedForm.text('inward', null, {helpText: trans('firefly.link_type_help_inward')}) }}
+                    {{ ExpandedForm.text('outward', null, {helpText: trans('firefly.link_type_help_outward')}) }}
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
+
+            {# panel for options #}
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'options'|_ }}</h3>
+                </div>
+                <div class="box-body">
+                    {{ ExpandedForm.optionsList('update','link_type') }}
+                </div>
+                <div class="box-footer">
+                    <button type="submit" class="btn pull-right btn-success">
+                        {{ ('update_link_type')|_ }}
+                    </button>
+                </div>
+            </div>
+
+        </div>
+
+    </div>
+    </form>
+
+
+{% endblock %}
diff --git a/resources/views/admin/link/index.twig b/resources/views/admin/link/index.twig
new file mode 100644
index 0000000000..57fa4b64be
--- /dev/null
+++ b/resources/views/admin/link/index.twig
@@ -0,0 +1,68 @@
+{% extends './v1/layout/default' %}
+
+{% block breadcrumbs %}
+    {{ Breadcrumbs.render }}
+{% endblock %}
+{% block content %}
+    <div class="row">
+        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
+            <div class="box box-default">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'journal_link_configuration'|_ }}</h3>
+                </div>
+                <div class="box-body no-padding">
+                    <table class="table table-hover sortable">
+                        <thead>
+                        <tr>
+                            <th class="hidden-sm hidden-xs" data-defaultsort="disabled">&nbsp;</th>
+                            <th data-defaultsign="az">{{ trans('list.name') }}</th>
+                            <th class="hidden-sm hidden-xs" data-defaultsign="az">{{ trans('list.inward') }}</th>
+                            <th class="hidden-sm hidden-xs" data-defaultsign="az">{{ trans('list.outward') }}</th>
+                            <th data-defaultsign="_19">{{ trans('list.number_of_transactions') }}</th>
+                        </tr>
+                        </thead>
+                        <tbody>
+                        {% for linkType in linkTypes %}
+                            <tr>
+                                <td>
+                                    {% if linkType.editable %}
+                                        <div class="btn-group btn-group-xs">
+                                            <a class="btn btn-default btn-xs" href="{{ route('admin.links.edit',linkType.id) }}"><span
+                                                        class="fa fa-fw fa-pencil"></span></a>
+                                            <a class="btn btn-danger btn-xs" href="{{ route('admin.links.delete',linkType.id) }}"><span
+                                                        class="fa fa-fw fa-trash-o"></span></a>
+                                        </div>
+                                    {% endif %}
+                                </td>
+                                <td>
+                                    <strong>{{ journalLinkTranslation('name', linkType.name) }}</strong>
+                                </td>
+                                <td>
+                                    {{ journalLinkTranslation('inward', linkType.inward) }}
+                                </td>
+                                <td>
+                                    {{ journalLinkTranslation('outward', linkType.outward) }}
+                                </td>
+                                <td data-value="{{ linkType.journalCount }}">
+                                    <a href="{{ route('admin.links.show', [linkType.id]) }}">{{ linkType.journalCount }}</a>
+                                </td>
+                            </tr>
+                        {% endfor %}
+                        </tbody>
+                    </table>
+                </div>
+                <div class="box-footer">
+                    <a href="{{ route('admin.links.create') }}" class="btn btn-success">{{ 'create_new_link_type'|_ }}</a>
+                </div>
+            </div>
+        </div>
+    </div>
+{% endblock %}
+
+{% block scripts %}
+    <script type="text/javascript" src="v1/js/lib/bootstrap-sortable.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+{% endblock %}
+
+{% block styles %}
+    <link rel="stylesheet" href="v1/css/bootstrap-sortable.css?v={{ FF_VERSION }}" type="text/css" media="all" nonce="{{ JS_NONCE }}">
+{% endblock %}
diff --git a/resources/views/admin/link/show.twig b/resources/views/admin/link/show.twig
new file mode 100644
index 0000000000..72840d920c
--- /dev/null
+++ b/resources/views/admin/link/show.twig
@@ -0,0 +1,87 @@
+{% extends './v1/layout/default' %}
+
+{% block breadcrumbs %}
+    {{ Breadcrumbs.render(Route.getCurrentRoute.getName, linkType) }}
+{% endblock %}
+{% block content %}
+    <div class="row">
+        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
+            <div class="box box-default">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ trans('firefly.overview_for_link', {name: journalLinkTranslation('name', linkType.name)}) }}</h3>
+                </div>
+                <div class="box-body no-padding">
+                    <table class="table table-hover sortable">
+                        <thead>
+                        <tr>
+                            <th>&nbsp;</th>
+                            <th>{{ trans('firefly.inward_transaction') }}</th>
+                            <th>&nbsp;</th>
+                            <th>{{ trans('firefly.link_description') }}</th>
+                            <th>{{ trans('firefly.outward_transaction') }}</th>
+                            <th>&nbsp;</th>
+                        </tr>
+                        </thead>
+                        <tbody>
+                        {% for link in links %}
+                            <tr>
+                                <td>
+                                    <div class="btn-group btn-group-xs">
+                                        <a href="{{ route('transactions.link.delete', [link.id]) }}" class="btn btn-danger delete-link"  data-id="{{ link.id }}"><span class="fa fa-trash"></span></a>
+                                        <a href="#" class="btn btn-default switch-link" data-id="{{ link.id }}"><span
+                                                    class="fa fa-fw fa-arrows-h"></span></a>
+                                    </div>
+                                </td>
+                                <td data-value="{{ link.source.description }}">
+                                    <a href="{{ route('transactions.show', [link.source.transaction_group_id]) }}">{{ link.source.description }}</a>
+                                </td>
+                                <td>
+                                    {{ journalObjectAmount(link.source) }}
+                                </td>
+                                <td>{{ journalLinkTranslation('outward', linkType.outward) }}</td>
+                                <td data-value="{{ link.destination.description }}">
+                                    <a href="{{ route('transactions.show', [link.destination.transaction_group_id]) }}">{{ link.destination.description }}</a>
+                                </td>
+                                <td>
+                                    {{ journalObjectAmount(link.destination) }}
+                                </td>
+                            </tr>
+                        {% endfor %}
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+    </div>
+
+
+{% endblock %}
+{% block scripts %}
+    <script type="text/javascript" src="v1/js/lib/bootstrap-sortable.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script nonce="{{ JS_NONCE }}">
+        $('.switch-link').on('click', switchLink);
+        var switchLinkUrl = '{{ route('transactions.link.switch') }}';
+        function switchLink(e) {
+            e.preventDefault();
+            var obj = $(e.currentTarget);
+
+            $.post(switchLinkUrl, {
+                _token: token,
+                id: obj.data('id')
+            }).done(function () {
+                location.reload();
+            }).fail(function () {
+                console.error('I failed :(');
+            });
+
+            //alert(obj.data('id'));
+
+            return false
+        }
+
+    </script>
+{% endblock %}
+
+{% block styles %}
+    <link rel="stylesheet" href="v1/css/bootstrap-sortable.css?v={{ FF_VERSION }}" type="text/css" media="all" nonce="{{ JS_NONCE }}">
+{% endblock %}
diff --git a/resources/views/admin/update/index.twig b/resources/views/admin/update/index.twig
new file mode 100644
index 0000000000..8a192b7a2b
--- /dev/null
+++ b/resources/views/admin/update/index.twig
@@ -0,0 +1,75 @@
+{% extends './v1/layout/default' %}
+
+{% block breadcrumbs %}
+    {{ Breadcrumbs.render }}
+{% endblock %}
+{% block content %}
+    <form action="{{ route('admin.update-check.post') }}" method="post" id="store" class="form-horizontal">
+
+        <div class="row">
+
+            <input type="hidden" name="_token" value="{{ csrf_token() }}"/>
+
+            <div class="col-lg-6 col-md-8 col-sm-12 col-xs-12">
+                <div class="box box-default">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ 'admin_update_channel_title'|_ }}</h3>
+                    </div>
+                    <div class="box-body">
+                        <p class="text-info">
+                            {{ 'admin_update_channel_explain'|_ }}
+                        </p>
+                        {{ ExpandedForm.select('update_channel', channelOptions, channelSelected) }}
+                    </div>
+                </div>
+            </div>
+
+            {# do update check. #}
+            <div class="col-lg-6 col-md-8 col-sm-12 col-xs-12">
+                <div class="box box-default">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ 'admin_update_check_title'|_ }}</h3>
+                    </div>
+                    <div class="box-body">
+                        <p class="text-info">
+                            {{ 'admin_update_check_explain'|_ }}
+                        </p>
+                        {{ ExpandedForm.select('check_for_updates',options, selected) }}
+                    </div>
+                </div>
+            </div>
+
+            {# check now button #}
+            <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
+                <div class="box box-default">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ 'admin_update_check_now_title'|_ }}</h3>
+                    </div>
+                    <div class="box-body">
+                        <p class="text-info">
+                            {{ 'admin_update_check_now_explain'|_ }}
+                        </p>
+                        <p>
+                            <a href="{{ route('admin.update-check.manual') }}" class="btn btn-info">{{ 'check_for_updates_button'|_ }}</a>
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
+                <button type="submit" class="btn btn-success">
+                    {{ ('store_configuration')|_ }}
+                </button>
+            </div>
+        </div>
+
+    </form>
+
+{% endblock %}
+{% block scripts %}
+    <script type="text/javascript" nonce="{{ JS_NONCE }}">
+        var updateCheckUri = '{{ route('admin.update-check.manual') }}';
+    </script>
+    <script type="text/javascript" src="v1/js/ff/admin/update/index.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+{% endblock %}
diff --git a/resources/views/admin/users/delete.twig b/resources/views/admin/users/delete.twig
new file mode 100644
index 0000000000..0d190e4a3c
--- /dev/null
+++ b/resources/views/admin/users/delete.twig
@@ -0,0 +1,38 @@
+{% extends './v1/layout/default' %}
+
+{% block breadcrumbs %}
+    {{ Breadcrumbs.render(Route.getCurrentRoute.getName, user) }}
+{% endblock %}
+
+{% block content %}
+
+    <form method="POST" action="{{ route('admin.users.destroy',user.id) }}" accept-charset="UTF-8" class="form-horizontal" id="destroy">
+        <input name="_token" type="hidden" value="{{ csrf_token() }}">
+
+        <div class="row">
+            <div class="col-lg-6 col-lg-offset-3 col-md-12 col-sm-12">
+                <div class="box box-danger">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ trans('form.delete_user', {'email': user.email}) }}</h3>
+                    </div>
+                    <div class="box-body">
+                        <p class="text-danger">
+                            {{ trans('form.permDeleteWarning') }}
+                        </p>
+
+                        <p>
+                            {{ trans('form.user_areYouSure', {'email': user.email}) }}
+                        </p>
+                    </div>
+                    <div class="box-footer">
+                        <input type="submit" onclick="return confirm('{{ trans('firefly.are_you_sure')|escape('js') }}');" name="submit"
+                               value="{{ trans('form.deletePermanently') }}" class="btn btn-danger pull-right"/>
+                        <a href="{{ URL.previous() }}" class="btn-default btn">{{ trans('form.cancel') }}</a>
+                    </div>
+
+
+                </div>
+            </div>
+        </div>
+    </form>
+{% endblock %}
diff --git a/resources/views/admin/users/edit.twig b/resources/views/admin/users/edit.twig
new file mode 100644
index 0000000000..e9ec513dc2
--- /dev/null
+++ b/resources/views/admin/users/edit.twig
@@ -0,0 +1,57 @@
+{% extends './v1/layout/default' %}
+
+{% block breadcrumbs %}
+    {{ Breadcrumbs.render(Route.getCurrentRoute.getName, user) }}
+{% endblock %}
+{% block content %}
+
+
+    {{ Form.model(user, {'class' : 'form-horizontal','id' : 'update','url' : route('admin.users.update',user.id) } ) }}
+
+    <input type="hidden" name="id" value="{{ user.id }}"/>
+
+    <div class="row">
+        <div class="col-lg-6 col-md-6 col-sm-12">
+            <div class="box box-primary">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'mandatoryFields'|_ }}</h3>
+                </div>
+                <div class="box-body">
+                    {% if canEditDetails %}
+                        {{ ExpandedForm.text('email',null,{'helpText': trans('firefly.admin_update_email')}) }}
+                        {{ ExpandedForm.password('password') }}
+                        {{ ExpandedForm.password('password_confirmation') }}
+                    {% else %}
+                        <input type="hidden" name="email" value="{{ user.email }}"/>
+                        <input type="hidden" name="password" value=""/>
+                        <input type="hidden" name="password_confirmation" value=""/>
+                    {% endif %}
+                    {{ ExpandedForm.checkbox('blocked') }}
+                    {{ ExpandedForm.select('blocked_code', codes, user.blocked_code) }}
+                    {% if user.id != currentUser.id %}
+                        {{ ExpandedForm.checkbox('is_owner',1,isAdmin) }}
+                    {% endif %}
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
+            {# panel for options #}
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'options'|_ }}</h3>
+                </div>
+                <div class="box-body">
+                    {{ ExpandedForm.optionsList('update','account') }}
+                </div>
+                <div class="box-footer">
+                    <button type="submit" class="btn pull-right btn-success">
+                        {{ ('update_user')|_ }}
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+    </form>
+{% endblock %}
diff --git a/resources/views/admin/users/index.twig b/resources/views/admin/users/index.twig
new file mode 100644
index 0000000000..9e0cf78e80
--- /dev/null
+++ b/resources/views/admin/users/index.twig
@@ -0,0 +1,93 @@
+{% extends './v1/layout/default' %}
+
+{% block breadcrumbs %}
+    {{ Breadcrumbs.render }}
+{% endblock %}
+{% block content %}
+    <div class="row">
+        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
+            <div class="box box-primary">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'all_users'|_ }}</h3>
+                </div>
+                <div class="box-body no-padding">
+                    <table class="table table-responsive table-condensed sortable">
+                        <thead>
+                        <tr>
+                            <th data-defaultsign="_19" class="hidden-xs" colspan="2">&nbsp;</th>
+                            <th data-defaultsign="az">{{ trans('list.email') }}</th>
+                            <th data-defaultsign="month" class="hidden-xs">{{ trans('list.registered_at') }}</th>
+                            <th data-defaultsign="month" class="hidden-xs">{{ trans('list.updated_at') }}</th>
+                            <th class="hidden-xs">{{ trans('list.is_admin') }}</th>
+                            <th class="hidden-xs">{{ trans('list.has_two_factor') }}</th>
+                            <th>{{ trans('list.is_blocked') }}</th>
+                            <th data-defaultsign="az" class="hidden-xs">{{ trans('list.blocked_code') }}</th>
+                        </tr>
+                        </thead>
+                        <tbody>
+                        {% for user in users %}
+                            <tr>
+                                <td class="hidden-xs" data-value="{{ user.id }}">
+                                    <div class="btn-group btn-group-xs">
+                                        <a class="btn btn-default" href="{{ route('admin.users.edit',user.id) }}"><span class="fa fa-pencil"></span></a>
+                                        <a class="btn btn-danger" href="{{ route('admin.users.delete',user.id) }}"><span class="fa fa-trash"></span></a>
+                                    </div>
+                                </td>
+                                <td class="hidden-xs" data-value="{{ user.id }}">#{{ user.id }}</td>
+                                <td data-value="{{ user.email }}">
+                                    <a href="{{ route('admin.users.show',user.id) }}">{{ user.email }}</a></td>
+                                <td class="hidden-xs" data-value="{{ user.created_at.format('Y-m-d H-i-s') }}">
+                                    {{ user.created_at.formatLocalized(monthAndDayFormat) }}
+                                    {{ user.created_at.format('H:i') }}
+                                </td>
+                                <td class="hidden-xs" data-value="{{ user.updated_at.format('Y-m-d H-i-s') }}">
+                                    {{ user.updated_at.formatLocalized(monthAndDayFormat) }}
+                                    {{ user.updated_at.format('H:i') }}
+                                </td>
+                                <td class="hidden-xs" data-value="{% if user.isAdmin %}1{% else %}0{% endif %}">
+                                    {% if user.isAdmin %}
+                                        <small class="text-success"><span class="fa fa-fw fa-check"></span></small>
+                                    {% else %}
+                                        <small class="text-danger"><span class="fa fa-fw fa-times"></span></small>
+                                    {% endif %}
+                                </td>
+                                <td class="hidden-xs" data-value="{% if user.has2FA %}1{% else %}0{% endif %}">
+                                    {% if user.has2FA %}
+                                        <small class="text-success"><span class="fa fa-fw fa-check"></span></small>
+                                    {% else %}
+                                        <small class="text-danger"><span class="fa fa-fw fa-times"></span></small>
+                                    {% endif %}
+                                </td>
+                                <td data-value="{% if user.blocked %}1{% else %}0{% endif %}">
+                                    {% if user.blocked == 1 %}
+                                        <small class="text-danger"><span class="fa fa-fw fa-check" title="{{ 'yes'|_ }}"></span></small>
+                                    {% else %}
+                                        <small class="text-success"><span class="fa fa-fw fa-times" title="{{ 'no'|_ }}"></span></small>
+                                    {% endif %}
+                                </td>
+                                <td class="hidden-xs">
+                                    <small>
+                                        {% if user.blocked == 1 %}
+                                            {% if user.blocked_code == "" %}
+                                                <em>~</em>
+                                            {% else %}
+                                                {{ user.blocked_code }}
+                                            {% endif %}
+                                        {% endif %}
+                                    </small>
+                                </td>
+                            </tr>
+                        {% endfor %}
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+    </div>
+{% endblock %}
+{% block styles %}
+    <link rel="stylesheet" href="v1/css/bootstrap-sortable.css?v={{ FF_VERSION }}" type="text/css" media="all" nonce="{{ JS_NONCE }}">
+{% endblock %}
+{% block scripts %}
+    <script type="text/javascript" src="v1/js/lib/bootstrap-sortable.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+{% endblock %}
diff --git a/resources/views/admin/users/show.twig b/resources/views/admin/users/show.twig
new file mode 100644
index 0000000000..1f0eb5233e
--- /dev/null
+++ b/resources/views/admin/users/show.twig
@@ -0,0 +1,121 @@
+{% extends './v1/layout/default' %}
+
+{% block breadcrumbs %}
+    {{ Breadcrumbs.render(Route.getCurrentRoute.getName, user) }}
+{% endblock %}
+{% block content %}
+    <div class="row">
+        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
+            <div class="box box-primary">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'user_information'|_ }}</h3>
+                </div>
+                <div class="box-body">
+                    <table class="table table-striped table-bordered table-responsive">
+                        <tbody>
+                        <tr>
+                            <td>{{ trans('list.id') }}</td>
+                            <td>#{{ user.id }}</td>
+                        </tr>
+                        <tr>
+                            <td>{{ trans('list.email') }}</td>
+                            <td><a href="mailto:{{ user.email }}">{{ user.email }}</a>
+                            <td>
+                        </tr>
+                        <tr>
+                            <td>{{ trans('list.created_at') }}</td>
+                            <td>
+                                {{ user.created_at.formatLocalized(monthAndDayFormat) }}
+                                {{ user.created_at.format('H:i') }}</td>
+                        </tr>
+                        <tr>
+                            <td>{{ trans('list.is_admin') }}</td>
+                            <td>
+                                {% if information.is_admin %}
+                                    <small class="text-success"><span class="fa fa-fw fa-check"></span></small> {{ 'yes'|_ }}
+                                {% else %}
+                                    <small class="text-danger"><span class="fa fa-fw fa-times"></span></small> {{ 'no'|_ }}
+                                {% endif %}
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>{{ trans('list.has_two_factor') }}</td>
+                            <td>
+                                {% if information.has_2fa %}
+                                    <small class="text-success"><span class="fa fa-fw fa-check"></span></small> {{ 'yes'|_ }}
+                                {% else %}
+                                    <small class="text-danger"><span class="fa fa-fw fa-times"></span></small> {{ 'no'|_ }}
+                                {% endif %}
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>{{ trans('list.is_blocked') }}</td>
+                            <td>
+                                {% if information.blocked %}
+                                    <small class="text-danger"><span class="fa fa-fw fa-check" title="{{ 'yes'|_ }}"></span></small> {{ 'yes'|_ }}:
+
+                                    {% if information.blocked_code == "" %}
+                                        <em>~</em>
+                                    {% else %}
+                                        {{ information.blocked_code }}
+                                    {% endif %}
+
+                                {% else %}
+                                    <small class="text-success"><span class="fa fa-fw fa-times" title="{{ 'no'|_ }}"></span></small> {{ 'no'|_ }}
+                                {% endif %}
+                            </td>
+                        </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
+            <div class="box box-primary">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'user_data_information'|_ }}</h3>
+                </div>
+                <div class="box-body">
+                    <table class="table table-striped table-bordered table-responsive">
+                        <tr>
+                            <td>{{ trans('list.accounts_count') }}</td>
+                            <td>{{ information.accounts }}</td>
+                        </tr>
+                        <tr>
+                            <td>{{ trans('list.journals_count') }}</td>
+                            <td>{{ information.journals }} ({{ information.transactions }} {{ trans('firefly.transactions') }})</td>
+                        </tr>
+                        <tr>
+                            <td>{{ trans('list.attachments_count') }}</td>
+                            <td>{{ information.attachments }} ({{ trans('firefly.total_size') }}: {{ information.attachments_size|filesize }})</td>
+                        </tr>
+                        <tr>
+                            <td>{{ trans('list.bills_count') }}</td>
+                            <td>{{ information.bills }}</td>
+                        </tr>
+                        <tr>
+                            <td>{{ trans('list.categories_count') }}</td>
+                            <td>{{ information.categories }}</td>
+                        </tr>
+                        <tr>
+                            <td>{{ trans('list.budget_count') }}</td>
+                            <td>{{ trans_choice('firefly.budget_or_budgets', information.budgets ) }},
+                                {{ trans_choice('firefly.budgets_with_limits', information.budgets_with_limits ) }}</td>
+                        </tr>
+                        <tr>
+                            <td>{{ trans('list.rule_and_groups_count') }}</td>
+                            <td>
+                                {{ trans('firefly.nr_of_rules_in_total_groups', {count_rules: information.rules, count_groups: information.rule_groups}) }}
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>{{ trans('list.tags_count') }}</td>
+                            <td>{{ trans_choice('firefly.tag_or_tags', information.tags ) }}</td>
+                        </tr>
+
+                    </table>
+                </div>
+            </div>
+        </div>
+    </div>
+{% endblock %}
diff --git a/resources/views/attachments/delete.twig b/resources/views/attachments/delete.twig
new file mode 100644
index 0000000000..db78a162a6
--- /dev/null
+++ b/resources/views/attachments/delete.twig
@@ -0,0 +1,34 @@
+{% extends './v1/layout/default' %}
+
+{% block breadcrumbs %}
+    {{ Breadcrumbs.render(Route.getCurrentRoute().getName(), attachment) }}
+{% endblock %}
+
+{% block content %}
+
+    <form method="POST" action="{{ route('attachments.destroy',attachment.id) }}" accept-charset="UTF-8" class="form-horizontal" id="destroy">
+        <input name="_token" type="hidden" value="{{ csrf_token() }}">
+        <div class="row">
+            <div class="col-lg-6 col-lg-offset-3 col-md-12 col-sm-12">
+                <div class="box box-danger">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ trans('form.delete_attachment', {'name': attachment.filename}) }}</h3>
+                    </div>
+                    <div class="box-body">
+                        <p class="text-danger">
+                            {{ trans('form.permDeleteWarning') }}
+                        </p>
+
+                        <p>
+                            {{ trans('form.attachment_areYouSure', {'name': attachment.filename}) }}
+                        </p>
+                    </div>
+                    <div class="box-footer">
+                        <input type="submit" name="submit" value="{{ trans('form.deletePermanently') }}" class="btn pull-right btn-danger"/>
+                        <a href="{{ URL.previous() }}" class="btn-default btn">{{ trans('form.cancel') }}</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </form>
+{% endblock %}
diff --git a/resources/views/attachments/edit.twig b/resources/views/attachments/edit.twig
new file mode 100644
index 0000000000..d7ab2eb582
--- /dev/null
+++ b/resources/views/attachments/edit.twig
@@ -0,0 +1,61 @@
+{% extends './v1/layout/default' %}
+
+{% block breadcrumbs %}
+    {{ Breadcrumbs.render(Route.getCurrentRoute().getName(), attachment) }}
+{% endblock %}
+
+{% block content %}
+    <form method="POST" action="{{ route('attachments.update', attachment.id) }}" accept-charset="UTF-8" class="form-horizontal" id="update">
+
+        <input type="hidden" name="_token" value="{{ csrf_token() }}"/>
+        <input type="hidden" name="id" value="{{ attachment.id }}"/>
+
+
+        <div class="row">
+            <div class="col-lg-6 col-md-6 col-sm-12">
+                <div class="box box-primary">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ 'mandatoryFields'|_ }}</h3>
+                    </div>
+                    <div class="box-body">
+                        {{ ExpandedForm.staticText('filename',attachment.filename|escape) }}
+                        {{ ExpandedForm.staticText('mime',attachment.mime|escape) }}
+                        {{ ExpandedForm.staticText('size',attachment.size|filesize) }}
+                    </div>
+                </div>
+
+            </div>
+            <div class="col-lg-6 col-md-6 col-sm-12">
+                <div class="box">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ 'optionalFields'|_ }}</h3>
+                    </div>
+                    <div class="box-body">
+                        {{ ExpandedForm.text('title', attachment.title) }}
+                        {{ ExpandedForm.textarea('notes',null,{helpText: trans('firefly.field_supports_markdown')}) }}
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
+                {# panel for options #}
+                <div class="box">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ 'options'|_ }}</h3>
+                    </div>
+                    <div class="box-body">
+                        {{ ExpandedForm.optionsList('update','attachment') }}
+                    </div>
+                    <div class="box-footer">
+                        <button type="submit" class="btn pull-right btn-success">
+                            {{ 'update_attachment'|_ }}
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+
+    </form>
+{% endblock %}
diff --git a/resources/views/attachments/index.twig b/resources/views/attachments/index.twig
new file mode 100644
index 0000000000..13c945d304
--- /dev/null
+++ b/resources/views/attachments/index.twig
@@ -0,0 +1,77 @@
+{% extends './v1/layout/default' %}
+
+{% block breadcrumbs %}
+    {{ Breadcrumbs.render(Route.getCurrentRoute.getName) }}
+{% endblock %}
+
+{% block content %}
+    <div class="row">
+        <div class="col-lg-12 col-md-12 col-sm-12">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">
+                        {{ 'list_all_attachments'|_ }}
+                    </h3>
+                </div>
+                <div class="box-body no-padding">
+                    <table class="table table-striped sortable">
+                        <thead>
+                        <tr>
+                            <th data-defaultsign="_19">&nbsp;</th>
+                            <th data-defaultsign="az">{{ trans('list.file_name') }}</th>
+                            <th data-defaultsign="_19">{{ trans('list.file_size') }}</th>
+                            <th data-defaultsign="az">{{ trans('list.file_type') }}</th>
+                            <th data-defaultsign="az">{{ trans('list.attached_to') }}</th>
+                            <th data-defaultsign="_19">{{ trans('list.file_exists') }}</th>
+                        </tr>
+                        </thead>
+                        <tbody>
+                        {% for att in set %}
+                            <tr>
+                                <td data-value="{{ att.id }}">
+                                    <div class="btn-group btn-group-xs">
+                                        <a href="{{ route('attachments.edit', att.id) }}" class="btn btn-default"><span class="fa fa-pencil"></span></a>
+                                        <a href="{{ route('attachments.delete', att.id) }}" class="btn btn-danger"><span class="fa fa-trash"></span></a>
+                                        <a href="{{ route('attachments.download', att.id) }}" class="btn btn-default"><span class="fa fa-download"></span></a>
+                                    </div>
+                                </td>
+                                <td data-value="{{ att.filename }}">
+                                    <a href="{{ route('attachments.view', att.id) }}" title="{{ att.filename }}">
+                                        {{ att.filename }}
+                                    </a>
+                                </td>
+                                <td data-value="{{ att.size }}">{{ att.size|filesize }}</td>
+                                <td data-value="{{ att.mime }}">{{ att.mime }}</td>
+                                <td data-value="{{ att.attachable_type }}_{{ att.attachable_id }}">
+                                    {% if att.attachable_type == 'FireflyIII\\Models\\TransactionJournal' %}
+                                        <a href="{{ route('transactions.show', [att.attachable_id]) }}">
+                                            {{ att.attachable.description }}
+                                        </a>
+                                    {% else %}
+                                        {{ att.attachable_type }}
+                                    {% endif %}
+                                </td>
+                                <td data-value="{% if att.file_exists %}1{% else %}0{% endif %}">
+                                    {% if att.file_exists %}
+                                        <span class="fa fa-check text-success"></span>
+                                    {% else %}
+                                        <span class="fa fa-warning text-danger"></span>
+                                    {% endif %}
+                                </td>
+                            </tr>
+                        {% endfor %}
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+    </div>
+{% endblock %}
+{% block scripts %}
+    <script type="text/javascript" src="v1/js/lib/bootstrap-sortable.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+{% endblock %}
+
+{% block styles %}
+    <link rel="stylesheet" href="v1/css/bootstrap-sortable.css?v={{ FF_VERSION }}" type="text/css" media="all" nonce="{{ JS_NONCE }}">
+{% endblock %}
+
diff --git a/resources/views/auth/login.twig b/resources/views/auth/login.twig
new file mode 100644
index 0000000000..d9d7c98adc
--- /dev/null
+++ b/resources/views/auth/login.twig
@@ -0,0 +1,98 @@
+{% extends "./v1/layout/guest" %}
+{% block content %}
+    {% if IS_DEMO_SITE %}
+        <div class="row">
+            <div class="col-lg-12">
+                <p class="well">
+                    Welcome to the Firefly III demonstration website!<br/>
+                    <br/>
+                    To log in, please use email address <strong>{{ DEMO_USERNAME }}</strong> with password <strong>{{ DEMO_PASSWORD }}</strong>
+                </p>
+            </div>
+        </div>
+    {% endif %}
+
+    {# SUCCESS MESSAGE (ALWAYS SINGULAR) #}
+    {% if Session.has('success') %}
+        <div class="alert alert-success alert-dismissible" role="alert">
+            <button type="button" class="close" data-dismiss="alert">
+                <span>&times;</span><span class="sr-only">{{ 'close'|_ }}</span>
+            </button>
+            <strong>{{ 'flash_success'|_ }}</strong> {{ session('success') }}
+        </div>
+    {% endif %}
+
+
+    {% if errors.count > 0 %}
+        <div class="row">
+            <div class="col-lg-12">
+                <div class="alert alert-danger alert-dismissible" role="alert">
+                    <button type="button" class="close" data-dismiss="alert"><span>&times;</span><span class="sr-only">{{ 'close'|_ }}</span>
+                    </button>
+                    <strong>{{ 'flash_error'|_ }}</strong> {{ errors.first }}
+                </div>
+            </div>
+        </div>
+    {% endif %}
+
+    {% if session('logoutMessage') %}
+        <div class="row">
+            <div class="col-lg-12">
+                <div class="alert alert-info alert-dismissible" role="alert">
+                    <button type="button" class="close" data-dismiss="alert"><span>&times;</span><span class="sr-only">{{ 'close'|_ }}</span>
+                    </button>
+                    {{ session('logoutMessage') }}
+                </div>
+            </div>
+        </div>
+    {% endif %}
+
+    {# LDAP warning #}
+    {% if ldapWarning %}
+    <div class="row">
+        <div class="col-lg-12">
+            <div class="alert alert-danger alert-dismissible" role="alert">
+                <a target="_blank" href="https://docs.firefly-iii.org/firefly-iii/advanced-installation/authentication/#ldap">Please upgrade LDAP configuration</a>
+            </div>
+        </div>
+    </div>
+    {% endif %}
+
+    <div class="login-box-body">
+        <p class="login-box-msg">{{ 'sign_in_to_start'|_ }}</p>
+
+        <form action="{{ route('login') }}" method="post">
+            <input type="hidden" name="_token" value="{{ csrf_token() }}"/>
+
+            <div class="form-group has-feedback">
+                {% if config('firefly.authentication_guard') == 'web' %}
+                    <input type="email" autocomplete="email" name="email" value="{% if not IS_DEMO_SITE %}{{ email }}{% else %}{{ DEMO_USERNAME }}{% endif %}" class="form-control" placeholder="{{ trans('form.email') }}"/>
+                {% else %}
+                    <input type="text" autocomplete="username" name="{{ usernameField }}" value="{{ email }}" class="form-control" placeholder="{{ trans('form.login_name') }}"/>
+                {% endif %}
+            </div>
+            <div class="form-group has-feedback">
+                <input type="password" name="password" autocomplete="current-password" {% if IS_DEMO_SITE %}value="{{ DEMO_PASSWORD }}"{% endif%} class="form-control" placeholder="{{ trans('form.password') }}"/>
+            </div>
+            <div class="row">
+                <div class="col-xs-6">
+                    <div class="checkbox">
+                        <label>
+                            <input type="checkbox" name="remember" {% if remember %}checked="checked"{% endif %} value="1"> {{ trans('form.remember_me') }}
+                        </label>
+                    </div>
+                </div>
+                <div class="col-xs-6">
+                    <button type="submit" class="btn btn-primary btn-block btn-flat">{{ 'sign_in'|_ }}</button>
+                </div>
+            </div>
+        </form>
+        {% if allowRegistration %}
+            <a href="{{ route('register') }}" class="text-center">{{ 'register_new_account'|_ }}</a><br>
+        {% endif %}
+        {% if allowReset %}
+            <a href="{{ route('password.reset.request') }}">{{ 'forgot_my_password'|_ }}</a>
+        {% endif %}
+    </div>
+{% endblock %}
+
diff --git a/resources/views/auth/lost-two-factor.twig b/resources/views/auth/lost-two-factor.twig
new file mode 100644
index 0000000000..dabf4dae0c
--- /dev/null
+++ b/resources/views/auth/lost-two-factor.twig
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <meta name="robots" content="noindex, nofollow, noarchive, noodp, NoImageIndex, noydir">
+    <title>Firefly III</title>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
+    <base href="{{ route('index') }}/">
+    <link rel="stylesheet" href="v1/lib/bs/css/bootstrap.min.css?v={{ FF_VERSION }}" type="text/css" media="all" nonce="{{ JS_NONCE }}">
+    <link rel="stylesheet" href="v1/lib/fa/css/font-awesome.min.css?v={{ FF_VERSION }}" type="text/css" media="all" nonce="{{ JS_NONCE }}">
+    <link href="v1/lib/adminlte/css/AdminLTE.min.css?v={{ FF_VERSION }}" rel="stylesheet" type="text/css" nonce="{{ JS_NONCE }}">
+
+    {# favicons #}
+    {% include('v1.partials.favicons') %}
+
+</head>
+<body class="container">
+<div class="row">
+    <div class="col-lg-10 col-lg-offset-1 col-md-12 col-sm-12 col-xs-12">
+        <h1><a href="{{ route('index') }}"><b>Firefly</b>III</a></h1>
+    </div>
+</div>
+
+<div class="row">
+    <div class="col-lg-10 col-lg-offset-1 col-md-12 col-sm-12 col-xs-12">
+        <h3 class="text-info">{{ 'two_factor_lost_header'|_ }}</h3>
+    </div>
+</div>
+
+<div class="row">
+    <div class="col-lg-10 col-lg-offset-1 col-md-12 col-sm-12 col-xs-12">
+        <p>
+            {{ 'two_factor_lost_intro'|_ }}
+        </p>
+        <ul>
+            <li>
+                {{ 'two_factor_lost_fix_self'|_ }}
+            </li>
+            <li>
+                {{ trans('firefly.two_factor_lost_fix_owner', {site_owner: siteOwner})|raw }}
+            </li>
+        </ul>
+    </div>
+</div>
+</body>
+</html>
diff --git a/resources/views/auth/mfa.twig b/resources/views/auth/mfa.twig
new file mode 100644
index 0000000000..403b3a4845
--- /dev/null
+++ b/resources/views/auth/mfa.twig
@@ -0,0 +1,32 @@
+{% extends "./v1/layout/guest" %}
+
+{% block content %}
+    {% if session_has('error') %}
+        <div class="alert alert-danger alert-dismissible" role="alert">
+            <button type="button" class="close" data-dismiss="alert">
+                <span>&times;</span><span class="sr-only">{{ 'close'|_ }}</span>
+            </button>
+            <strong>{{ 'flash_error'|_ }}</strong> {{ session('error') }}
+        </div>
+    {% endif %}
+
+    <div class="login-box-body">
+        <p class="login-box-msg">{{ trans('firefly.two_factor_welcome', {user: user.email}) }}</p>
+        <p class="login-box-msg">{{ 'two_factor_enter_code'|_ }}</p>
+
+        <form action="{{ route('two-factor.submit') }}" method="POST">
+            <input type="hidden" name="_token" value="{{ csrf_token() }}"/>
+
+            <div class="form-group has-feedback">
+                <input type="text" name="one_time_password" class="form-control" placeholder="{{ 'two_factor_code_here'|_ }}" autocomplete="off"/>
+            </div>
+
+            <div class="row">
+                <div class="col-xs-6 col-xs-offset-6">
+                    <button type="submit" class="btn btn-primary btn-block btn-flat">{{ 'authenticate'|_ }}</button>
+                </div>
+            </div>
+        </form>
+        <a href="{{ route('two-factor.lost') }}">{{ 'two_factor_forgot'|_ }}</a>
+    </div>
+{% endblock %}
diff --git a/resources/views/auth/passwords/email.twig b/resources/views/auth/passwords/email.twig
new file mode 100644
index 0000000000..748949fcfe
--- /dev/null
+++ b/resources/views/auth/passwords/email.twig
@@ -0,0 +1,53 @@
+{% extends "./v1/layout/guest" %}
+
+{% block content %}
+
+
+    {% if session.status %}
+        <div class="alert alert-success">
+            {{ session.status }}
+        </div>
+    {% endif %}
+
+    {% if errors|length > 0 %}
+        <div class="alert alert-danger">
+            <strong>{{ 'flash_error'|_ }}</strong> {{ 'problems_with_input'|_ }}<br><br>
+            <ul>
+                {% for error in errors.all %}
+                    <li>{{ error }}</li>
+                {% endfor %}
+            </ul>
+        </div>
+    {% endif %}
+    <div class="login-box-body">
+        {% if session('status') %}
+            <p class="login-box-msg text-success">
+                {{ session('status') }}
+            </p>
+        {% else %}
+            <p class="login-box-msg">{{ 'reset_password'|_ }}</p>
+
+            <form role="form" method="POST" action="{{ route('password.email') }}">
+                <input type="hidden" name="_token" value="{{ csrf_token() }}"/>
+
+                <div class="form-group has-feedback">
+                    <input type="email" class="form-control" name="email" placeholder="{{ trans('form.email') }}"/>
+                </div>
+
+                <div class="row">
+                    <div class="col-xs-12">
+                        <button type="submit" class="btn btn-primary btn-flat pull-right">{{ 'reset_button'|_ }}</button>
+                    </div>
+                </div>
+
+            </form>
+
+        {% endif %}
+        <a href="{{ route('login') }}">{{ 'want_to_login'|_ }}</a><br>
+        {% if allowRegistration %}
+            <a href="{{ route('register') }}" class="text-center">{{ 'register_new_account'|_ }}</a><br>
+        {% endif %}
+
+    </div>
+
+{% endblock %}
diff --git a/resources/views/auth/passwords/reset.twig b/resources/views/auth/passwords/reset.twig
new file mode 100644
index 0000000000..82512ed5fb
--- /dev/null
+++ b/resources/views/auth/passwords/reset.twig
@@ -0,0 +1,49 @@
+{% extends "./v1/layout/guest" %}
+
+{% block content %}
+
+    {% if errors|length > 0 %}
+        <div class="alert alert-danger">
+            <strong>{{ 'flash_error'|_ }}</strong> {{ 'problems_with_input'|_ }}<br><br>
+            <ul>
+                {% for error in errors.all %}
+                    <li>{{ error }}</li>
+                {% endfor %}
+            </ul>
+        </div>
+    {% endif %}
+
+    <div class="register-box-body">
+        <p class="login-box-msg">{{ 'reset_password'|_ }}</p>
+        <form method="POST" action="{{ url('/password/reset') }}">
+            <input type="hidden" name="_token" value="{{ csrf_token() }}">
+            <input type="hidden" name="token" value="{{ token }}">
+
+            <div class="form-group has-feedback">
+                <input type="email" name="email" class="form-control" value="{{ old('email') }}" placeholder="{{ trans('form.email') }}"/>
+            </div>
+
+            <div class="form-group has-feedback">
+                <input type="password" class="form-control" placeholder="{{ trans('form.password') }}" name="password"/>
+            </div>
+
+            <div class="form-group has-feedback">
+                <input type="password" class="form-control" placeholder="{{ trans('form.password_confirmation') }}" name="password_confirmation"/>
+            </div>
+
+
+            <div class="row">
+                <div class="col-xs-12">
+                    <button type="submit" class="btn btn-primary pull-right btn-flat">{{ 'button_reset_password'|_ }}</button>
+                </div>
+            </div>
+
+        </form>
+
+        <a href="{{ route('login') }}">{{ 'want_to_login'|_ }}</a><br>
+        {% if allowRegistration %}
+            <a href="{{ route('register') }}" class="text-center">{{ 'register_new_account'|_ }}</a><br>
+        {% endif %}
+    </div>
+
+{% endblock %}
diff --git a/resources/views/auth/register.twig b/resources/views/auth/register.twig
new file mode 100644
index 0000000000..873870cf42
--- /dev/null
+++ b/resources/views/auth/register.twig
@@ -0,0 +1,50 @@
+{% extends "./v1/layout/guest" %}
+
+{% block content %}
+
+    {% if errors|length > 0 %}
+        <div class="alert alert-danger">
+            <strong>{{ 'flash_error'|_ }}</strong> {{ 'problems_with_input'|_ }}<br><br>
+            <ul>
+                {% for error in errors.all %}
+                    <li>{{ error }}</li>
+                {% endfor %}
+            </ul>
+        </div>
+    {% endif %}
+    <div class="register-box-body">
+        <p class="login-box-msg">{{ 'register_new_account'|_ }}</p>
+
+        <form id="register" method="POST" action="{{ route('register') }}">
+            <input type="hidden" name="_token" value="{{ csrf_token() }}">
+
+            <div class="form-group has-feedback">
+                <input type="email" name="email" value="{{ email }}" class="form-control" placeholder="{{ trans('form.email') }}"/>
+            </div>
+            <div class="form-group has-feedback">
+                <input type="password" autocomplete="new-password" class="form-control" placeholder="{{ trans('form.password') }}" name="password"/>
+            </div>
+            <div class="form-group has-feedback">
+                <input type="password" autocomplete="new-password" class="form-control" placeholder="{{ trans('form.password_confirmation') }}" name="password_confirmation"/>
+            </div>
+            <div class="row">
+                <div class="col-xs-8">
+                    <div class="checkbox">
+                        <label>
+                            <input type="checkbox" checked name="verify_password" value="1"> {{ trans('form.verify_password') }} <a data-toggle="modal" data-target="#passwordModal" href="#passwordModal"><span class="fa fa-fw fa-question-circle"></span></a>
+                        </label>
+                    </div>
+                </div>
+                <div class="col-xs-4">
+                    <button class="btn btn-primary pull-right btn-flat">{{ 'button_register'|_ }}</button>
+                </div>
+            </div>
+        </form>
+
+        <a href="{{ route('login') }}">{{ 'want_to_login'|_ }}</a><br>
+        <a href="{{ route('password.reset.request') }}">{{ 'forgot_my_password'|_ }}</a>
+    </div>
+
+    {% include 'v1.partials.password-modal' %}
+
+{% endblock %}
diff --git a/resources/views/auth/two-factor.twig b/resources/views/auth/two-factor.twig
new file mode 100644
index 0000000000..76822f7bca
--- /dev/null
+++ b/resources/views/auth/two-factor.twig
@@ -0,0 +1,37 @@
+{% extends "./v1/layout/guest" %}
+
+{% block content %}
+
+    {% if errors.has('code') %}
+        <div class="row">
+            <div class="col-lg-12">
+                <div class="alert alert-danger alert-dismissible" role="alert">
+                    <button type="button" class="close" data-dismiss="alert"><span>&times;</span><span class="sr-only">{{ 'close'|_ }}</span>
+                    </button>
+                    <strong>{{ 'flash_error'|_ }}</strong> {{ errors.get('code')[0] }}
+                </div>
+            </div>
+        </div>
+    {% endif %}
+
+    <div class="login-box-body">
+        <p class="login-box-msg">{{ trans('firefly.two_factor_welcome', {user: user.email}) }}</p>
+        <p class="login-box-msg">{{ 'two_factor_enter_code'|_ }}</p>
+
+        <form action="{{ route('two-factor.post') }}" method="post">
+            <input type="hidden" name="_token" value="{{ csrf_token() }}"/>
+
+            <div class="form-group has-feedback">
+                <input type="number" name="code" class="form-control" placeholder="{{ 'two_factor_code_here'|_ }}"/>
+            </div>
+
+            <div class="row">
+                <div class="col-xs-6 col-xs-offset-6">
+                    <button type="submit" class="btn btn-primary btn-block btn-flat">{{ 'authenticate'|_ }}</button>
+                </div>
+            </div>
+        </form>
+        <a href="{{ route('two-factor.lost') }}">{{ 'two_factor_forgot'|_ }}</a>
+    </div>
+{% endblock %}
+
diff --git a/resources/views/bills/create.twig b/resources/views/bills/create.twig
new file mode 100644
index 0000000000..1c5bb19716
--- /dev/null
+++ b/resources/views/bills/create.twig
@@ -0,0 +1,80 @@
+{% extends './v1/layout/default' %}
+
+{% block breadcrumbs %}
+    {{ Breadcrumbs.render(Route.getCurrentRoute.getName, piggyBank) }}
+{% endblock %}
+
+{% block content %}
+
+    <form method="POST" action="{{ route('bills.store') }}" accept-charset="UTF-8" class="form-horizontal" id="store" enctype="multipart/form-data">
+        <input name="_token" type="hidden" value="{{ csrf_token() }}">
+
+        <div class="row">
+            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
+                <div class="box box-primary">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ 'mandatoryFields'|_ }}</h3>
+                    </div>
+                    <div class="box-body">
+                        {{ ExpandedForm.text('name') }}
+                        {{ CurrencyForm.currencyList('transaction_currency_id', defaultCurrency.id) }}
+                        {{ ExpandedForm.amountNoCurrency('amount_min') }}
+                        {{ ExpandedForm.amountNoCurrency('amount_max') }}
+                        {{ ExpandedForm.date('date',phpdate('Y-m-d')) }}
+                        {{ ExpandedForm.select('repeat_freq',periods,'monthly') }}
+                    </div>
+                </div>
+
+            </div>
+            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
+                <div class="box">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ 'optionalFields'|_ }}</h3>
+                    </div>
+                    <div class="box-body">
+                        {{ ExpandedForm.textarea('notes',null,{helpText: trans('firefly.field_supports_markdown')}) }}
+                        {{ ExpandedForm.file('attachments[]', {'multiple': 'multiple','helpText': trans('firefly.upload_max_file_size', {'size': uploadSize|filesize}) }) }}
+                        {{ ExpandedForm.integer('skip',0) }}
+                        {{ ExpandedForm.objectGroup() }}
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
+                {# panel for options #}
+                <div class="box">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ 'options'|_ }}</h3>
+                    </div>
+                    <div class="box-body">
+                        {{ ExpandedForm.optionsList('create','bill') }}
+                    </div>
+                    <div class="box-footer">
+                        <button type="submit" class="btn pull-right btn-success">
+                            {{ 'store_new_bill'|_ }}
+                        </button>
+                    </div>
+                </div>
+
+            </div>
+        </div>
+    </form>
+
+{% endblock %}
+
+{% block styles %}
+    <link href="v1/css/bootstrap-tagsinput.css?v={{ FF_VERSION }}" type="text/css" rel="stylesheet"  media="all" nonce="{{ JS_NONCE }}">
+    <link href="v1/css/jquery-ui/jquery-ui.structure.min.css?v={{ FF_VERSION }}" type="text/css" rel="stylesheet"  media="all" nonce="{{ JS_NONCE }}">
+    <link href="v1/css/jquery-ui/jquery-ui.theme.min.css?v={{ FF_VERSION }}" type="text/css" rel="stylesheet"  media="all" nonce="{{ JS_NONCE }}">
+{% endblock %}
+{% block scripts %}
+    <script type="text/javascript" src="v1/js/lib/bootstrap-tagsinput.min.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/lib/modernizr-custom.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/lib/jquery-ui.min.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/ff/bills/create.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+
+    {# auto complete for object groups #}
+    <script type="text/javascript" src="v1/js/lib/typeahead/typeahead.bundle.min.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/ff/object-groups/create-edit.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+{% endblock %}
diff --git a/resources/views/bills/delete.twig b/resources/views/bills/delete.twig
new file mode 100644
index 0000000000..8d10d2785b
--- /dev/null
+++ b/resources/views/bills/delete.twig
@@ -0,0 +1,40 @@
+{% extends './v1/layout/default' %}
+
+{% block breadcrumbs %}
+    {{ Breadcrumbs.render(Route.getCurrentRoute.getName, bill) }}
+{% endblock %}
+
+{% block content %}
+
+    <form method="POST" action="{{ route('bills.destroy',bill.id) }}" accept-charset="UTF-8" class="form-horizontal" id="destroy">
+        <input name="_token" type="hidden" value="{{ csrf_token() }}">
+        <div class="row">
+            <div class="col-lg-6 col-lg-offset-3 col-md-12 col-sm-12">
+                <div class="box box-danger">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ trans('form.delete_bill', {'name': bill.name}) }}</h3>
+                    </div>
+                    <div class="box-body">
+                        <p class="text-danger">
+                            {{ trans('form.permDeleteWarning') }}
+                        </p>
+
+                        <p>
+                            {{ trans('form.bill_areYouSure', {'name': bill.name}) }}
+                        </p>
+
+                        <p>
+                            {% if bill.transactionjournals.count() > 0 %}
+                                {{ Lang.choice('form.bill_keep_transactions', bill.transactionjournals.count(),{count: bill.transactionjournals.count()}) }}
+                            {% endif %}
+                        </p>
+                    </div>
+                    <div class="box-footer">
+                        <input type="submit" name="submit" value="{{ trans('form.deletePermanently') }}" class="btn btn-danger pull-right"/>
+                        <a href="{{ URL.previous() }}" class="btn-default btn">{{ trans('form.cancel') }}</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </form>
+{% endblock %}
diff --git a/resources/views/bills/edit.twig b/resources/views/bills/edit.twig
new file mode 100644
index 0000000000..8c90123d32
--- /dev/null
+++ b/resources/views/bills/edit.twig
@@ -0,0 +1,86 @@
+{% extends './v1/layout/default' %}
+
+{% block breadcrumbs %}
+    {{ Breadcrumbs.render(Route.getCurrentRoute.getName, bill) }}
+{% endblock %}
+
+{% block content %}
+
+    {{ Form.model(bill, {'class' : 'form-horizontal','enctype': 'multipart/form-data','id' : 'update','url' : route('bills.update', bill.id)}) }}
+
+    <input type="hidden" name="id" value="{{ bill.id }}"/>
+
+    <div class="row">
+        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
+            <div class="box box-primary">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'mandatoryFields'|_ }}</h3>
+                </div>
+                <div class="box-body">
+                    {% if rules.count() > 0 %}
+                        {{ ExpandedForm.text('name',null, {helpText: trans_choice('firefly.bill_edit_rules', rules.count())}) }}
+                    {% else %}
+                        {{ ExpandedForm.text('name') }}
+                    {% endif %}
+                    {{ CurrencyForm.currencyList('transaction_currency_id') }}
+                    {{ ExpandedForm.amountNoCurrency('amount_min') }}
+                    {{ ExpandedForm.amountNoCurrency('amount_max') }}
+                    {{ ExpandedForm.date('date',bill.date.format('Y-m-d')) }}
+                    {{ ExpandedForm.select('repeat_freq',periods) }}
+                </div>
+            </div>
+
+
+        </div>
+        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'optionalFields'|_ }}</h3>
+                </div>
+                <div class="box-body">
+                    {{ ExpandedForm.textarea('notes',null,{helpText: trans('firefly.field_supports_markdown')}) }}
+                    {{ ExpandedForm.file('attachments[]', {'multiple': 'multiple','helpText': trans('firefly.upload_max_file_size', {'size': uploadSize|filesize}) }) }}
+                    {{ ExpandedForm.integer('skip') }}
+                    {{ ExpandedForm.objectGroup() }}
+                    {# only correct way to do active checkbox #}
+                    {{ ExpandedForm.checkbox('active', 1) }}
+
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'options'|_ }}</h3>
+                </div>
+                <div class="box-body">
+                    {{ ExpandedForm.optionsList('update','bill') }}
+                </div>
+                <div class="box-footer">
+                    <button type="submit" class="btn pull-right btn-success">
+                        {{ 'update_bill'|_ }}
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+    </form>
+
+{% endblock %}
+{% block styles %}
+    <link href="v1/css/bootstrap-tagsinput.css?v={{ FF_VERSION }}" type="text/css" rel="stylesheet"  media="all" nonce="{{ JS_NONCE }}">
+    <link href="v1/css/jquery-ui/jquery-ui.structure.min.css?v={{ FF_VERSION }}" type="text/css" rel="stylesheet"  media="all" nonce="{{ JS_NONCE }}">
+    <link href="v1/css/jquery-ui/jquery-ui.theme.min.css?v={{ FF_VERSION }}" type="text/css" rel="stylesheet"  media="all" nonce="{{ JS_NONCE }}">
+{% endblock %}
+{% block scripts %}
+    <script type="text/javascript" src="v1/js/lib/bootstrap-tagsinput.min.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/lib/modernizr-custom.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/lib/jquery-ui.min.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/ff/accounts/edit.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+
+    {# auto complete for object groups #}
+    <script type="text/javascript" src="v1/js/lib/typeahead/typeahead.bundle.min.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/ff/object-groups/create-edit.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+{% endblock %}
diff --git a/resources/views/bills/index.twig b/resources/views/bills/index.twig
new file mode 100644
index 0000000000..2051403308
--- /dev/null
+++ b/resources/views/bills/index.twig
@@ -0,0 +1,46 @@
+{% extends './v1/layout/default' %}
+
+{% block breadcrumbs %}
+    {{ Breadcrumbs.render(Route.getCurrentRoute.getName) }}
+{% endblock %}
+
+{% block content %}
+    {% if total == 0 %}
+        {% include 'partials.empty' with {objectType: 'default', type: 'bills',route: route('bills.create')} %}
+    {% else %}
+<div class="row">
+    <div class="col-lg-12 col-sm-12 col-md-12">
+        <div class="box">
+            <div class="box-header with-border">
+                <h3 class="box-title">{{ title }}</h3>
+                <div class="box-tools pull-right">
+                    <div class="btn-group">
+                        <button class="btn btn-box-tool dropdown-toggle" data-toggle="dropdown"><span class="fa fa-ellipsis-v"></span></button>
+                        <ul class="dropdown-menu" role="menu">
+                            <li><a href="{{ route('bills.create') }}"><span class="fa fa-plus fa-fw"></span> {{ 'new_bill'|_ }}</a></li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+            <div class="box-body no-padding">
+                <div style="padding:8px;">
+                    <a class="btn btn-success" href="{{ route('bills.create') }}"><span class="fa fa-plus fa-fw"></span> {{ 'create_new_bill'|_ }}</a>
+                </div>
+                {% include 'list/bills' %}
+            </div>
+            <div class="box-footer">
+                <a class="btn btn-success" href="{{ route('bills.create') }}"><span class="fa fa-plus fa-fw"></span> {{ 'create_new_bill'|_ }}</a>
+            </div>
+        </div>
+    </div>
+</div>
+{% endif %}
+{% endblock %}
+
+{% block styles %}
+{% endblock %}
+
+{% block scripts %}
+    <script src="v1/js/lib/jquery-ui.min.js?v={{ FF_VERSION }}" type="text/javascript" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/ff/bills/index.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+{% endblock %}
diff --git a/resources/views/bills/show.twig b/resources/views/bills/show.twig
new file mode 100644
index 0000000000..9ca38d57b8
--- /dev/null
+++ b/resources/views/bills/show.twig
@@ -0,0 +1,177 @@
+{% extends './v1/layout/default' %}
+
+{% block breadcrumbs %}
+    {{ Breadcrumbs.render(Route.getCurrentRoute.getName, bill) }}
+{% endblock %}
+
+{% block content %}
+
+    <div class="row">
+        <div class="col-lg-6 col-sm-12 col-md-12">
+            <div class="box" id="billInfo">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ object.data.name }}</h3>
+
+                    <div class="box-tools pull-right">
+                        <div class="btn-group">
+                            <button class="btn btn-box-tool dropdown-toggle" data-toggle="dropdown"><span class="fa fa-ellipsis-v"></span></button>
+                            <ul class="dropdown-menu" role="menu">
+                                <li><a href="{{ route('bills.edit', object.data.id) }}"><span class="fa fa-fw fa-pencil"></span> {{ 'edit'|_ }}</a></li>
+                                <li><a href="{{ route('bills.delete', object.data.id) }}"><span class="fa fa-fw fa-trash-o"></span> {{ 'delete'|_ }}</a></li>
+                            </ul>
+                        </div>
+                    </div>
+
+                </div>
+                <div class="box-body">
+                    <table class="table table-striped">
+                        <tr>
+                            <td colspan="2">
+                                {{ trans('firefly.match_between_amounts', {low: formatAmountByCurrency(object.data.currency,object.data.amount_min), high: formatAmountByCurrency(object.data.currency,object.data.amount_max) })|raw }}
+                                {{ 'repeats'|_ }}
+                                {{ trans('firefly.repeat_freq_' ~object.data.repeat_freq) }}.
+                            </td>
+                        </tr>
+
+                        <tr>
+                            <td style="width:50%;">{{ 'bill_is_active'|_ }}</td>
+                            <td>
+                                {% if object.data.active %}
+                                    <span class="fa fa-check fa-fw" title="{{ 'active'|_ }}"></span> {{ 'yes'|_ }}
+                                {% else %}
+                                    <span class="fa fa-times fa-fw" title="{{ 'inactive'|_ }}"></span> {{ 'no'|_ }}
+                                {% endif %}
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>{{ 'next_expected_match'|_ }}</td>
+                            <td>
+                                {% if object.data.next_expected_match|length > 0 %}
+                                    {{ formatDate(object.data.next_expected_match, monthAndDayFormat) }}
+                                {% else %}
+                                    {{ 'unknown'|_ }}
+                                {% endif %}
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>{{ trans('firefly.average_bill_amount_year', {year: year}) }}</td>
+                            <td>
+                                {% for avg in yearAverage %}
+                                    {{ formatAmountBySymbol(avg.avg, avg.currency_symbol, avg.currency_decimal_places, true) }}<br>
+                                {% endfor %}
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>{{ 'average_bill_amount_overall'|_ }}</td>
+                            <td>
+                                {% for avg in overallAverage %}
+                                    {{ formatAmountBySymbol(avg.avg, avg.currency_symbol, avg.currency_decimal_places, true) }}<br>
+                                {% endfor %}
+                            </td>
+                        </tr>
+                    </table>
+                </div>
+                <div class="box-footer">
+                    <div class="btn-group">
+                        <a class="btn btn-default" href="{{ route('bills.edit', [object.data.id]) }}">{{ 'edit'|_ }}</a>
+                        <a class="btn btn-danger" href="{{ route('bills.delete', [object.data.id]) }}">{{ 'delete'|_ }}</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="col-lg-6 col-sm-12 col-md-12">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'bill_related_rules'|_ }}</h3>
+                </div>
+                <div class="box-body">
+                    {% if rules.count() > 0 %}
+                        <ul>
+                            {% for rule in rules %}
+                                <li><a href="{{ route('rules.edit', [rule.id]) }}">{{ rule.title }}</a>
+                                    {% if not rule.active %}({{ 'list_inactive_rule'|_|lower }}){% endif %}
+                                </li>
+                            {% endfor %}
+                        </ul>
+                    {% endif %}
+                </div>
+                <div class="box-footer">
+                    <form action="{{ route('bills.rescan',object.data.id) }}" method="post">
+                        <input type="hidden" name="_token" value="{{ csrf_token() }}"/>
+                        <p>
+                            <input type="submit" name="submit" value="{{ 'rescan_old'|_ }}" class="btn btn-default" />
+                        </p>
+                    </form>
+
+                    <p><small class="text-muted">
+                            {{ 'running_again_loss'|_ }}
+                        </small>
+
+                    </p>
+                </div>
+            </div>
+            {% if object.data.notes %}
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'notes'|_ }}</h3>
+                </div>
+                <div class="box-body">
+                    {{ object.data.notes|default('')|markdown }}
+                </div>
+            </div>
+            {% endif %}
+
+
+            {% if attachments.count() > 0 %}
+                <div class="box">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ 'attachments'|_ }}</h3>
+                    </div>
+                    <div class="box-body no-padding">
+                        {% include 'list.attachments' %}
+                    </div>
+                </div>
+            {% endif %}
+        </div>
+    </div>
+
+    <div class="row">
+        <div class="col-lg-12 col-sm-12 col-md-12">
+            <div class="box" id="billChart">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'chart'|_ }}</h3>
+                </div>
+                <div class="box-body">
+                    <canvas id="bill-overview" style="width:100%;height:400px;" height="400" width="100%"></canvas>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="row">
+        <div class="col-lg-12 col-sm-12 col-md-12">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'connected_journals'|_ }}</h3>
+                </div>
+                <div class="box-body">
+                    {% include 'list.groups' %}
+                </div>
+            </div>
+        </div>
+    </div>
+
+{% endblock %}
+
+{% block scripts %}
+    <script type="text/javascript" nonce="{{ JS_NONCE }}">
+        var billCurrencySymbol = "{{ object.data.currency.symbol }}";
+        var billUri = '{{ route('chart.bill.single', [object.data.id]) }}';
+    </script>
+    <script type="text/javascript" src="v1/js/lib/Chart.bundle.min.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/ff/charts.defaults.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/ff/charts.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/ff/bills/show.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    {# required for groups.twig #}
+    <script type="text/javascript" src="v1/js/ff/list/groups.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+{% endblock %}
diff --git a/resources/views/budgets/available-budgets/create-alternative.twig b/resources/views/budgets/available-budgets/create-alternative.twig
new file mode 100644
index 0000000000..d212385217
--- /dev/null
+++ b/resources/views/budgets/available-budgets/create-alternative.twig
@@ -0,0 +1,37 @@
+<div class="modal-dialog">
+    <div class="modal-content">
+        <div class="modal-header">
+            <button type="button" class="close" data-dismiss="modal"><span>&times;</span><span class="sr-only">{{ 'close'|_ }}</span>
+            </button>
+            <h4 class="modal-title">
+                {{ trans('firefly.update_budget_amount_range',
+                    {start: start.formatLocalized(monthAndDayFormat), end: end.formatLocalized(monthAndDayFormat)}) }}
+            </h4>
+        </div>
+
+        <form style="display: inline;" id="income" action="{{ route('available-budgets.store') }}" method="POST">
+            <div class="modal-body">
+                <input type="hidden" name="_token" value="{{ csrf_token() }}"/>
+                <input type="hidden" name="start" value="{{ start.format('Y-m-d') }}"/>
+                <input type="hidden" name="end" value="{{ end.format('Y-m-d') }}"/>
+                <input type="hidden" name="page" value="{{ page }}"/>
+
+                <div class="form-group">
+                    <select class="form-control" name="currency_id">
+                        {% for currency in currencies %}
+                            <option label="{{ currency.name }}" value="{{ currency.id }}">{{ currency.name }}</option>
+                        {% endfor %}
+                    </select>
+                </div>
+                <div class="form-group">
+                    <input step="any" required class="form-control" id="amount" value="" autocomplete="off" name="amount" type="number"/>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-default" data-dismiss="modal">{{ 'close'|_ }}</button>
+                <button type="submit" class="btn btn-primary">{{ 'set_available_amount'|_ }}</button>
+            </div>
+        </form>
+    </div>
+</div>
+
diff --git a/resources/views/budgets/available-budgets/create.twig b/resources/views/budgets/available-budgets/create.twig
new file mode 100644
index 0000000000..9a77295ea4
--- /dev/null
+++ b/resources/views/budgets/available-budgets/create.twig
@@ -0,0 +1,37 @@
+<div class="modal-dialog">
+    <div class="modal-content">
+        <div class="modal-header">
+            <button type="button" class="close" data-dismiss="modal"><span>&times;</span><span class="sr-only">{{ 'close'|_ }}</span>
+            </button>
+            <h4 class="modal-title">
+                {{ trans('firefly.update_budget_amount_range',
+                    {start: start.formatLocalized(monthAndDayFormat), end: end.formatLocalized(monthAndDayFormat)}) }}
+            </h4>
+        </div>
+
+        <form style="display: inline;" id="income" action="{{ route('available-budgets.store') }}" method="POST">
+            <div class="modal-body">
+                <input type="hidden" name="_token" value="{{ csrf_token() }}"/>
+                <input type="hidden" name="start" value="{{ start.format('Y-m-d') }}"/>
+                <input type="hidden" name="end" value="{{ end.format('Y-m-d') }}"/>
+                <input type="hidden" name="page" value="{{ page }}"/>
+                <input type="hidden" name="currency_id" value="{{ currency.id }}"/>
+
+                <div class="form-group">
+                    <p class="form-control-static">{{ trans('firefly.ab_basic_modal_explain', {currency: currency.name}) }}</p>
+                </div>
+
+
+                <div class="input-group">
+                    <div class="input-group-addon">{{ currency.symbol|raw }}</div>
+                    <input step="any" required class="form-control" id="amount" value="" autocomplete="off" name="amount" type="number"/>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-default" data-dismiss="modal">{{ 'close'|_ }}</button>
+                <button type="submit" class="btn btn-primary">{{ 'set_available_amount'|_ }}</button>
+            </div>
+        </form>
+    </div>
+</div>
+
diff --git a/resources/views/budgets/available-budgets/edit.twig b/resources/views/budgets/available-budgets/edit.twig
new file mode 100644
index 0000000000..bdb04fc34b
--- /dev/null
+++ b/resources/views/budgets/available-budgets/edit.twig
@@ -0,0 +1,33 @@
+<div class="modal-dialog">
+    <div class="modal-content">
+        <div class="modal-header">
+            <button type="button" class="close" data-dismiss="modal"><span>&times;</span><span class="sr-only">{{ 'close'|_ }}</span>
+            </button>
+            <h4 class="modal-title">
+                {{ trans('firefly.update_budget_amount_range',
+                    {start: availableBudget.start_date.formatLocalized(monthAndDayFormat), end: availableBudget.end_date.formatLocalized(monthAndDayFormat)}) }}
+            </h4>
+        </div>
+
+        <form style="display: inline;" id="income" action="{{ route('available-budgets.update', [availableBudget.id, start.format('Y-m-d'), end.format('Y-m-d')]) }}" method="POST">
+            <div class="modal-body">
+                <input type="hidden" name="_token" value="{{ csrf_token() }}"/>
+                <input type="hidden" name="page" value="{{ page }}"/>
+                <div class="form-group">
+                    <p class="form-control-static">{{ trans('firefly.ab_basic_modal_explain', {currency: availableBudget.transactionCurrency.name}) }}</p>
+                </div>
+
+
+                <div class="input-group">
+                    <div class="input-group-addon">{{ availableBudget.transactionCurrency.symbol|raw }}</div>
+                    <input step="any" required class="form-control" id="amount" value="{{ availableBudget.amount }}" autocomplete="off" name="amount" type="number"/>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-default" data-dismiss="modal">{{ 'close'|_ }}</button>
+                <button type="submit" class="btn btn-primary">{{ 'update_available_amount'|_ }}</button>
+            </div>
+        </form>
+    </div>
+</div>
+
diff --git a/resources/views/budgets/budget-limits/create.twig b/resources/views/budgets/budget-limits/create.twig
new file mode 100644
index 0000000000..be92a9849b
--- /dev/null
+++ b/resources/views/budgets/budget-limits/create.twig
@@ -0,0 +1,36 @@
+<div class="modal-dialog">
+    <div class="modal-content">
+        <div class="modal-header">
+            <button type="button" class="close" data-dismiss="modal"><span>&times;</span><span class="sr-only">{{ 'close'|_ }}</span>
+            </button>
+            <h4 class="modal-title">
+                {{ trans('firefly.set_budget_limit_title',
+                    {start: start.formatLocalized(monthAndDayFormat), end: end.formatLocalized(monthAndDayFormat), budget: budget.name}) }}
+            </h4>
+        </div>
+
+        <form style="display: inline;" id="income" action="{{ route('budget-limits.store') }}" method="POST">
+            <div class="modal-body">
+                <input type="hidden" name="_token" value="{{ csrf_token() }}"/>
+                <input type="hidden" name="start" value="{{ start.format('Y-m-d') }}"/>
+                <input type="hidden" name="end" value="{{ end.format('Y-m-d') }}"/>
+                <input type="hidden" name="budget_id" value="{{ budget.id }}"/>
+                <div class="form-group">
+                    <select class="form-control" name="transaction_currency_id">
+                        {% for currency in currencies %}
+                            <option label="{{ currency.name }}" value="{{ currency.id }}">{{ currency.name }}</option>
+                        {% endfor %}
+                    </select>
+                </div>
+                <div class="form-group">
+                    <input step="any" class="form-control" id="amount" value="" autocomplete="off" name="amount" type="number"/>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-default" data-dismiss="modal">{{ 'close'|_ }}</button>
+                <button type="submit" class="btn btn-primary">{{ 'set_budget_limit'|_ }}</button>
+            </div>
+        </form>
+    </div>
+</div>
+
diff --git a/resources/views/budgets/create.twig b/resources/views/budgets/create.twig
new file mode 100644
index 0000000000..cc12b1296d
--- /dev/null
+++ b/resources/views/budgets/create.twig
@@ -0,0 +1,64 @@
+{% extends './v1/layout/default' %}
+
+{% block breadcrumbs %}
+    {{ Breadcrumbs.render(Route.getCurrentRoute.getName) }}
+{% endblock %}
+
+{% block content %}
+
+    <form method="POST" action="{{ route('budgets.store') }}" accept-charset="UTF-8" class="form-horizontal" id="store" enctype="multipart/form-data">
+        <input name="_token" type="hidden" value="{{ csrf_token() }}">
+        <input name="active" type="hidden" value="1">
+
+        <div class="row">
+            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
+                <div class="box box-primary">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ 'mandatoryFields'|_ }}</h3>
+                    </div>
+                    <div class="box-body">
+                        {{ ExpandedForm.text('name') }}
+                    </div>
+                </div>
+            </div>
+            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
+                {# panel for auto-budget#}
+                <div class="box">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ 'optionalFields'|_ }}</h3>
+                    </div>
+                    <div class="box-body">
+                        {{ ExpandedForm.select('auto_budget_type', autoBudgetTypes,null, {helpText: trans('firefly.auto_budget_help')}) }}
+                        {{ CurrencyForm.currencyList('auto_budget_currency_id') }}
+                        {{ ExpandedForm.amountNoCurrency('auto_budget_amount') }}
+                        {{ ExpandedForm.select('auto_budget_period', autoBudgetPeriods, null) }}
+                        {{ ExpandedForm.file('attachments[]', {'multiple': 'multiple','helpText': trans('firefly.upload_max_file_size', {'size': uploadSize|filesize}) }) }}
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
+                {# panel for options #}
+                <div class="box">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ 'options'|_ }}</h3>
+                    </div>
+                    <div class="box-body">
+                        {{ ExpandedForm.optionsList('create','budget') }}
+                    </div>
+                    <div class="box-footer">
+                        <button type="submit" class="btn pull-right btn-success">{{ 'store_new_budget'|_ }}</button>
+                    </div>
+                </div>
+
+            </div>
+
+        </div>
+    </form>
+
+
+{% endblock %}
+{% block scripts %}
+    <script type="text/javascript" src="v1/js/ff/budgets/create.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+{% endblock %}
diff --git a/resources/views/budgets/delete.twig b/resources/views/budgets/delete.twig
new file mode 100644
index 0000000000..cf7439c288
--- /dev/null
+++ b/resources/views/budgets/delete.twig
@@ -0,0 +1,44 @@
+{% extends './v1/layout/default' %}
+
+{% block breadcrumbs %}
+    {{ Breadcrumbs.render(Route.getCurrentRoute.getName, budget) }}
+{% endblock %}
+
+{% block content %}
+
+    <form method="POST" action="{{ route('budgets.destroy',budget.id) }}" accept-charset="UTF-8" class="form-horizontal" id="destroy">
+        <input name="_token" type="hidden" value="{{ csrf_token() }}">
+
+        <div class="row">
+            <div class="col-lg-6 col-lg-offset-3 col-md-12 col-sm-12">
+                <div class="box box-danger">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ trans('form.delete_budget', {'name': budget.name}) }}</h3>
+                    </div>
+                    <div class="box-body">
+                        <p class="text-danger">
+                            {{ trans('form.permDeleteWarning') }}
+                        </p>
+
+                        <p>
+                            {{ trans('form.budget_areYouSure', {'name': budget.name}) }}
+                        </p>
+
+                        <p>
+                            {% if budget.transactionjournals.count() > 0 %}
+                                {{ Lang.choice('form.budget_keep_transactions', budget.transactionjournals.count(), {count: budget.transactionjournals.count() }) }}
+                            {% endif %}
+                        </p>
+
+                    </div>
+                    <div class="box-footer">
+                        <input type="submit" name="submit" value="{{ trans('form.deletePermanently') }}" class="btn btn-danger pull-right"/>
+                        <a href="{{ URL.previous() }}" class="btn-default btn">{{ trans('form.cancel') }}</a>
+                    </div>
+
+
+                </div>
+            </div>
+        </div>
+    </form>
+{% endblock %}
diff --git a/resources/views/budgets/edit.twig b/resources/views/budgets/edit.twig
new file mode 100644
index 0000000000..e313778c18
--- /dev/null
+++ b/resources/views/budgets/edit.twig
@@ -0,0 +1,62 @@
+{% extends './v1/layout/default' %}
+
+{% block breadcrumbs %}
+    {{ Breadcrumbs.render(Route.getCurrentRoute.getName, budget) }}
+{% endblock %}
+
+{% block content %}
+    {{ Form.model(budget, {'class' : 'form-horizontal','enctype': 'multipart/form-data','id' : 'update','url' : route('budgets.update',budget.id) } ) }}
+    <input type="hidden" name="id" value="{{ budget.id }}"/>
+    <div class="row">
+        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
+            <div class="box box-primary">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'mandatoryFields'|_ }}</h3>
+                </div>
+                <div class="box-body">
+                    {# only correct way to do active checkbox #}
+                    {{ ExpandedForm.checkbox('active', 1) }}
+                    {{ ExpandedForm.text('name') }}
+                </div>
+            </div>
+
+        </div>
+        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
+            {# panel for auto-budget #}
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'optionalFields'|_ }}</h3>
+                </div>
+                <div class="box-body">
+                    {{ ExpandedForm.select('auto_budget_type', autoBudgetTypes, autoBudget.auto_budget_type) }}
+                    {{ CurrencyForm.currencyList('auto_budget_currency_id', autoBudget.transaction_currency_id) }}
+                    {{ ExpandedForm.amountNoCurrency('auto_budget_amount', preFilled.auto_budget_amount) }}
+                    {{ ExpandedForm.select('auto_budget_period', autoBudgetPeriods, autoBudget.period) }}
+                    {{ ExpandedForm.file('attachments[]', {'multiple': 'multiple','helpText': trans('firefly.upload_max_file_size', {'size': uploadSize|filesize}) }) }}
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
+            {# panel for options #}
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'options'|_ }}</h3>
+                </div>
+                <div class="box-body">
+                    {{ ExpandedForm.optionsList('update','budget') }}
+                </div>
+                <div class="box-footer">
+                    <button type="submit" class="btn pull-right btn-success">{{ 'update_budget'|_ }}</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    </form>
+
+{% endblock %}
+{% block scripts %}
+    <script type="text/javascript" src="v1/js/ff/budgets/edit.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+{% endblock %}
diff --git a/resources/views/budgets/index.twig b/resources/views/budgets/index.twig
new file mode 100644
index 0000000000..5e66c97b28
--- /dev/null
+++ b/resources/views/budgets/index.twig
@@ -0,0 +1,482 @@
+{% extends './v1/layout/default' %}
+
+{% block breadcrumbs %}
+    {{ Breadcrumbs.render(Route.getCurrentRoute.getName) }}
+{% endblock %}
+
+{% block content %}
+    <!-- date selector -->
+    <div class="row">
+        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'budget_period_navigator'|_ }}</h3>
+                </div>
+                <div class="box-body">
+                    <div class="row" id="periodNavigator">
+                        <div class="col-lg-2 col-md-4 col-sm-12 col-xs-12">
+                            <select class="form-control selectPeriod" name="previous">
+                                <option label="{{ 'select_date'|_ }}" value="x">{{ 'select_date'|_ }}</option>
+                                {% for array in prevLoop %}
+                                    <option label="{{ array.title }}" value="{{ array.label }}" data-start="{{ array.start.format('Y-m-d') }}"
+                                            data-end="{{ array.end.format('Y-m-d') }}">{{ array.title }}</option>
+                                {% endfor %}
+                            </select>
+                        </div>
+                        <div class="col-lg-8 col-md-4 col-sm-12 col-xs-12 text-center">
+                            <div class="btn btn-group btn-group-lg" style="padding-top:0;">
+                                <a href="{{ route('budgets.index', [prevLoop[0].start.format('Y-m-d'), prevLoop[0].end.format('Y-m-d')]) }}"
+                                   class="btn btn-default" title="{{ prevLoop[0].title }}">&larr;</a>
+                                <a title="{{ start.formatLocalized(monthAndDayFormat) }} - {{ end.formatLocalized(monthAndDayFormat) }}"
+                                   href="{{ route('budgets.index', [start.format('Y-m-d'), end.format('Y-m-d')]) }}"
+                                   class="btn btn-default">{{ periodTitle }}</a>
+                                <a href="{{ route('budgets.index', [nextLoop[0].start.format('Y-m-d'), nextLoop[0].end.format('Y-m-d')]) }}"
+                                   class="btn btn-default" title="{{ nextLoop[0].title }}">&rarr;</a>
+                            </div>
+                        </div>
+                        <div class="col-lg-2 col-md-4 col-sm-12 col-xs-12 text-right">
+                            <select class="form-control selectPeriod" name="next">
+                                <option label="{{ 'select_date'|_ }}" value="x">{{ 'select_date'|_ }}</option>
+                                {% for array in nextLoop %}
+                                    <option label="{{ array.title }}" value="{{ array.label }}" data-start="{{ array.start.format('Y-m-d') }}"
+                                            data-end="{{ array.end.format('Y-m-d') }}">{{ array.title }}</option>
+                                {% endfor %}
+                            </select>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- available budget configurator. -->
+    {% if availableBudgets|length == 0 %}
+        <div class="row">
+            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
+                <div class="box">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">
+                            {{ trans('firefly.total_available_budget_in_currency', {currency: defaultCurrency.name}) }}
+                            <br>
+                            <small>{{ trans('firefly.between_dates_breadcrumb', {start: start.formatLocalized(monthAndDayFormat), end: end.formatLocalized(monthAndDayFormat)}) }}</small>
+                        </h3>
+                    </div>
+                    <div class="box-body">
+                        <div class="row">
+                            {# info about the amount budgeted #}
+                            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
+                                <small>{{ 'budgeted'|_ }} ({{ 'see_below'|_ }}):
+                                    <span class="budgeted_amount" data-value="{{ budgeted }}" data-id="0" data-currency="{{ defaultCurrency.id }}">
+                                        {{ formatAmountBySymbol(budgeted, defaultCurrency.symbol, defaultCurrency.decimal_places) }}
+                                    </span>
+                                </small>
+                            </div>
+                            {# info about the amount spent #}
+                            <div class="col-lg-9 col-md-9 col-sm-9 col-xs-9" style="text-align:right;margin-bottom:3px;">
+                                <small class="available_bar"
+                                       data-id="0">{{ trans('firefly.available_between', {start: start.formatLocalized(monthAndDayFormat), end: end.formatLocalized(monthAndDayFormat) }) }}
+                                    :
+                                    <span class="available_amount" data-id="0" data-value="0" data-currency="{{ defaultCurrency.id }}"
+                                          data-value="0">{{ formatAmountBySymbol(0, defaultCurrency.symbol, defaultCurrency.decimal_places, true) }}</span>
+                                    <a href="#" data-id="0" class="update_ab btn btn-default btn-xs"><span class="fa fa-pencil"></span></a>
+                                </small>
+                            </div>
+                        </div>
+                        {# info text to show how much is spent (in currency). #}
+                        <div class="row spentInfo" data-id="0" data-value="{{ spent }}">
+                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
+                                <small>{{ trans('firefly.spent_between', {start: start.formatLocalized(monthAndDayFormat), end: end.formatLocalized(monthAndDayFormat)}) }}
+                                    : {{ formatAmountBySymbol(spent, defaultCurrency.symbol, defaultCurrency.decimal_places) }} </small>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                {% if enableAddButton %}
+                    <div class="col-lg-12">
+                        <p class="pull-right">
+                            <a href="#" class="btn btn-light btn-xs create_ab_alt">
+                                <span class="fa fa-plus-circle"></span>
+                                {{ 'alt_currency_ab_create'|_ }}</a>
+                        </p>
+                    </div>
+                {% endif %}
+            </div>
+        </div>
+    {% endif %}
+
+    {% set boxSize = 12 %}
+    {% if availableBudgets|length > 1 %}
+        {% set boxSize = 6 %}
+    {% endif %}
+    {% if availableBudgets|length > 0 %}
+        <div class="row">
+            {% for budget in availableBudgets %}
+                <div class="col-lg-{{ boxSize }} col-md-12 col-sm-12 col-xs-12">
+                    <div class="box">
+                        <div class="box-header with-border">
+                            <h3 class="box-title">
+                                {{ trans('firefly.total_available_budget_in_currency', {currency: budget.transaction_currency.name}) }}
+                                <br>
+                                <small>{{ trans('firefly.between_dates_breadcrumb', {start: budget.start_date.formatLocalized(monthAndDayFormat), end: budget.end_date.formatLocalized(monthAndDayFormat)}) }}</small>
+                            </h3>
+                        </div>
+                        <div class="box-body">
+                            <div class="row">
+                                {# info about the amount budgeted #}
+                                <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
+                                    <small>{{ 'budgeted'|_ }}:
+                                        <span class="text-success budgeted_amount" data-id="{{ budget.id }}" data-currency="{{ budget.transaction_currency.id }}">
+                                        {{ formatAmountBySymbol(budget.budgeted, budget.transaction_currency.symbol, budget.transaction_currency.decimal_places, false) }}
+                                    </span>
+                                    </small>
+                                </div>
+                                {# info about the amount spent #}
+                                <div class="col-lg-9 col-md-9 col-sm-9 col-xs-9" style="text-align:right;margin-bottom:3px;">
+                                    <small class="available_bar"
+                                           data-id="{{ budget.id }}">{{ trans('firefly.available_between', {start: budget.start_date.formatLocalized(monthAndDayFormat), end: budget.end_date.formatLocalized(monthAndDayFormat) }) }}
+                                        :
+                                        <span class="available_amount" data-id="{{ budget.id }}"
+                                              data-value="{{ budget.amount }}">{{ formatAmountBySymbol(budget.amount, budget.transaction_currency.symbol, budget.transaction_currency.decimal_places, true) }}</span>
+                                        <a href="#" data-id="{{ budget.id }}" class="update_ab btn btn-default btn-xs"><span class="fa fa-pencil"></span></a>
+                                        <a href="#" data-id="{{ budget.id }}" class="delete_ab btn btn-danger btn-xs"><span class="fa fa-trash"></span></a>
+                                    </small>
+                                </div>
+                            </div>
+                            {# progresss bar to visualise available vs budgeted. #}
+                            <div class="row">
+                                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
+                                    <div class="progress budgeted_bar" data-id="{{ budget.id }}" data-budgeted="{{ budget.budgeted }}"
+                                         data-available="{{ budget.amount }}" data-currency="{{ budget.transaction_currency.id }}">
+                                        {# red: the exact amount of the available budget, if more has budgeted. #}
+                                        <div class="progress-bar progress-bar-danger" data-id="{{ budget.id }}" role="progressbar" aria-valuenow="10"
+                                             aria-valuemin="0"
+                                             aria-valuemax="100" style="width: 0;"></div>
+
+                                        {# orange: overbudgeted amount #}
+                                        <div class="progress-bar progress-bar-warning" data-id="{{ budget.id }}" role="progressbar" aria-valuenow="0"
+                                             aria-valuemin="0"
+                                             aria-valuemax="100" style="width: 0;"></div>
+
+                                        {# budgeted amount if enough or les #}
+                                        <div class="progress-bar progress-bar-info" data-id="{{ budget.id }}" role="progressbar" aria-valuenow="0"
+                                             aria-valuemin="0"
+                                             aria-valuemax="100" style="width: 0;"></div>
+                                    </div>
+                                </div>
+                            </div>
+                            {# info text to show how much is spent (in currency). #}
+                            <div class="row spentInfo" data-id="{{ budget.id }}">
+                                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
+                                    <small>{{ trans('firefly.spent_between', {start: budget.start_date.formatLocalized(monthAndDayFormat), end: budget.end_date.formatLocalized(monthAndDayFormat)}) }}
+                                        : {{ formatAmountBySymbol(budget.spent, budget.transaction_currency.symbol, budget.transaction_currency.decimal_places) }} </small>
+                                </div>
+                            </div>
+
+                            {# bar to visualise spending in budget .#}
+                            <div class="row">
+                                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
+                                    <div class="progress spent_bar" data-id="{{ budget.id }}" data-budgeted="{{ budget.budgeted }}"
+                                         data-spent="{{ budget.spent }}">
+                                        <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="0" aria-valuemin="0"
+                                             aria-valuemax="100"
+                                             style="width: 0;"></div>
+                                        <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"
+                                             style="width: 0;"></div>
+                                        <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"
+                                             style="width: 0;"></div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            {% endfor %}
+            {% if enableAddButton %}
+                <div class="col-lg-12">
+                    <p class="pull-right">
+                        <a href="#" class="btn btn-light btn-xs create_ab_alt">
+                            <span class="fa fa-plus-circle"></span>
+                            {{ 'alt_currency_ab_create'|_ }}</a>
+                    </p>
+                </div>
+            {% endif %}
+        </div>
+    {% endif %}
+    {% if budgets|length == 0 and inactive.count() == 0 %}
+        {% include 'partials.empty' with {objectType: 'default', type: 'budgets',route: route('budgets.create')} %}
+        {# make FF ignore demo for now. #}
+        {% set shownDemo = true %}
+    {% else %}
+    
+        <div class="row">
+            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
+                <div class="box">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ 'budgets'|_ }}</h3>
+                    </div>
+                    <div class="box-body no-padding">
+                        <div style="padding:8px;">
+                            <a href="{{ route('budgets.create') }}" class="btn btn-success"><span class="fa fa-plus fa-fw"></span> {{ 'createBudget'|_ }}</a>
+                        </div>
+                        <table class="table table-bordered sortable-table table-striped sortable" id="budgetList">
+                            <thead>
+                            <tr>
+                                <th class="hidden-sm hidden-xs" style="width:10%;">&nbsp;</th>
+                                <th>{{ 'budget'|_ }}</th>
+                                <th style="width:25%;">{{ 'budgeted'|_ }}</th>
+                                <th class="hidden-sm hidden-xs">{{ 'spent'|_ }} ({{ 'per_day'|_|lower }})</th>
+                                <th>{{ 'left'|_ }} ({{ 'per_day'|_|lower }})</th>
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {% for budget in budgets %}
+                                <tr data-id="{{ budget.id }}">
+                                    <td class="hidden-sm hidden-xs">
+                                        <div class="btn-group btn-group-xs">
+                                            <a href="#" class="handle object-handle btn btn-default"><span class="fa fa-fw fa-bars"></span></a>
+                                            <a href="{{ route('budgets.edit', budget.id) }}" class="btn btn-xs btn-default"><span class="fa fa-fw fa-pencil"></span></a>
+                                            <a href="{{ route('budgets.delete', budget.id) }}" class="btn btn-xs btn-danger"><span class="fa fa-fw fa-trash-o"></span></a>
+                                        </div>
+                                    </td>
+                                    <td>
+                                        {% if 0 == budget.budgeted|length %}
+                                            <a href="{{ route('budgets.show', budget.id) }}" data-id="{{ budget.id }}">{{ budget.name }}</a>
+                                        {% endif %}
+                                        {% if 1 == budget.budgeted|length %}
+                                            {% for budgetLimit in budget.budgeted %}
+                                                <a href="{{ route('budgets.show.limit', [budget.id, budgetLimit.id]) }}" data-id="{{ budget.id }}">{{ budget.name }}</a>
+                                                {% endfor %}
+                                        {% endif %}
+
+                                        {% if budget.budgeted|length > 1 %}
+                                            {% for budgetLimit in budget.budgeted %}
+                                                <a href="{{ route('budgets.show.limit', [budget.id, budgetLimit.id]) }}" data-id="{{ budget.id }}">{{ budget.name }} ({{ budgetLimit.currency_name }})</a><br>
+                                            {% endfor %}
+                                        {% endif %}
+
+                                        {% if budget.auto_budget %}
+                                        {% if 1 == budget.auto_budget.auto_budget_type %}
+                                            <span class="fa fa-fw fa-calendar-check-o" title="{{ 'auto_budget_reset_icon'|_ }}"></span>
+                                        {% endif %}
+                                        {% if 2 == budget.auto_budget.auto_budget_type %}
+                                            <span class="fa fa-fw fa-calendar-plus-o" title="{{ 'auto_budget_rollover_icon'|_ }}"></span>
+                                        {% endif %}
+                                        {% endif %}
+                                        {% if budget.attachments.count() > 0 %}
+                                            <span class="fa fa-paperclip"></span>
+                                        {% endif %}
+                                    </td>
+                                    <td>
+                                        {% if 0==budget.budgeted|length %}
+                                            <div class="input-group">
+                                                <div class="input-group-addon">{{ defaultCurrency.symbol }}</div>
+                                                <input type="hidden" name="balance_currency_id" value="{{ defaultCurrency.id }}"/>
+                                                <input class="form-control budget_amount" data-original="0" data-id="{{ budget.id }}"
+                                                    data-currency="{{ defaultCurrency.id }}" data-limit="0" value="0" autocomplete="off" min="0" name="amount"
+                                                    type="number">
+                                            </div>
+                                            <span class="text-danger budget_warning" data-id="{{ budget.id }}" data-budgetLimit="{{ budgetLimit.id }}"
+                                                style="display:none;"></span>
+                                        {% endif %}
+                                        {% if budget.budgeted|length > 0 %}
+                                            {% for budgetLimit in budget.budgeted %}
+                                                {% if not budgetLimit.in_range %}
+                                                    <small class="text-muted">
+                                                        {{ trans('firefly.budget_limit_not_in_range', {start: budgetLimit.start_date, end: budgetLimit.end_date}) }}
+                                                    </small><br>
+                                                {% endif %}
+                                                <div class="input-group bl_entry" data-budget-limit-id="{{ budgetLimit.id }}">
+                                                    <div class="input-group-addon">{{ budgetLimit.currency_symbol }}</div>
+                                                    <input class="form-control budget_amount" data-original="{{ budgetLimit.amount }}"
+                                                        data-id="{{ budget.id }}" data-limit="{{ budgetLimit.id }}" value="{{ budgetLimit.amount }}"
+                                                        autocomplete="off"
+                                                        min="0" name="amount" type="number">
+                                                    <div class="input-group-btn">
+                                                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
+                                                                aria-expanded="false"><span class="caret"></span></button>
+                                                        <ul class="dropdown-menu">
+                                                            <li>
+                                                                <a class="delete_bl" href="#" data-budget-limit-id="{{ budgetLimit.id }}">{{ trans('firefly.remove_budgeted_amount', {currency: budgetLimit.currency_name }) }}</a>
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                </div>
+                                                <span class="text-danger budget_warning" data-id="{{ budget.id }}" data-budgetLimit="{{ budgetLimit.id }}"
+                                                    style="display:none;"></span>
+                                            {% endfor %}
+                                        {% endif %}
+                                        {% if budget.budgeted|length < currencies.count() %}
+                                            <a href="#" class="btn btn-light btn-xs create_bl" data-id="{{ budget.id }}">
+                                                <span class="fa fa-plus-circle"></span>
+                                            </a>
+                                        {% endif %}
+                                    </td>
+                                    <td class="hidden-sm hidden-xs spent" data-id="{{ budget.id }}" style="text-align:right;">
+                                        {% for spentInfo in budget.spent %}
+                                            {{ formatAmountBySymbol(spentInfo.spent, spentInfo.currency_symbol, spentInfo.currency_decimal_places) }}
+                                            ({{ formatAmountBySymbol(spentInfo.spent / activeDaysPassed, spentInfo.currency_symbol, spentInfo.currency_decimal_places) }})
+                                            <br/>
+                                        {% endfor %}
+                                        {% for budgetLimit in budget.budgeted %}
+                                            {% if null == budget.spent[budgetLimit.currency_id] %}
+                                                {{ formatAmountBySymbol(0, budgetLimit.currency_symbol, budgetLimit.currency_decimal_places) }}<br/>
+                                            {% endif %}
+                                        {% endfor %}
+                                    </td>
+                                    <td class="left" data-id="{{ budget.id }}" style="text-align: right;">
+                                        {% for spentInfo in budget.spent %}
+                                            {% set countLimit = 0 %}
+                                            {% for budgetLimit in budget.budgeted %}
+                                                {% if spentInfo.currency_id == budgetLimit.currency_id and budgetLimit.in_range %}
+                                                    {% set countLimit = countLimit + 1 %}
+                                                    <span class="left_span" data-currency="{{ spentInfo.currency_id }}" data-limit="{{ budgetLimit.id }}"
+                                                        data-value="{{ spentInfo.spent + budgetLimit.amount }}" class="amount_left">
+                                                        {{ formatAmountBySymbol(spentInfo.spent + budgetLimit.amount, spentInfo.currency_symbol, spentInfo.currency_decimal_places) }}
+                                                        {% if spentInfo.spent + budgetLimit.amount > 0 %}
+                                                            ({{ formatAmountBySymbol((spentInfo.spent + budgetLimit.amount) / activeDaysLeft, spentInfo.currency_symbol, spentInfo.currency_decimal_places) }})
+                                                        {% else %}
+                                                            ({{ formatAmountBySymbol(0, spentInfo.currency_symbol, spentInfo.currency_decimal_places) }})
+                                                        {% endif %}
+                                                    </span>
+                                                    <br/>
+                                                {% endif %}
+                                            {% endfor %}
+                                            {% if countLimit == 0 %}
+                                                <span class="left_span" data-id="{{ budget.id }}" data-currency="{{ spentInfo.currency_id }}" data-limit="0"
+                                                    class="amount_left" data-value="{{ spentInfo.spent }}">
+                                                    {{ formatAmountBySymbol(spentInfo.spent, spentInfo.currency_symbol, spentInfo.currency_decimal_places) }}
+                                                </span>
+                                                <br/>
+                                            {% endif %}
+                                        {% endfor %}
+                                        {% for budgetLimit in budget.budgeted %}
+                                            {% if null == budget.spent[budgetLimit.currency_id] %}
+                                            <span class="left_span" data-currency="{{ spentInfo.currency_id }}" data-limit="{{ budgetLimit.id }}"
+                                                data-value="{{ spentInfo.spent + budgetLimit.amount }}" class="amount_left">
+                                                {{ formatAmountBySymbol(budgetLimit.amount, budgetLimit.currency_symbol, budgetLimit.currency_decimal_places) }}
+                                                {% if budgetLimit.in_range %}
+                                                    ({{ formatAmountBySymbol(budgetLimit.amount / activeDaysLeft, budgetLimit.currency_symbol, budgetLimit.currency_decimal_places) }})
+                                                {% endif %}
+                                            </span>
+                                            <br/>
+                                            {% endif %}
+                                        {% endfor %}
+                                    </td>
+                                </tr>
+                            {% endfor %}
+                            </tbody>
+                            <tfoot>
+                            <tr>
+                                <td>&nbsp;</td>
+                                <td><em>{{ 'sum'|_ }}</em></td>
+                                <td class="hidden-sm hidden-xs" style="text-align:right;">
+                                    {% for arr in sums.budgeted %}
+                                        {{ formatAmountBySymbol(arr.amount, arr.currency_symbol, arr.currency_decimal_places) }}<br/>
+                                    {% endfor %}
+                                </td>
+                                <td class="hidden-sm hidden-xs" style="text-align:right;">
+                                    {% for arr in sums.spent %}
+                                        {{ formatAmountBySymbol(arr.amount, arr.currency_symbol, arr.currency_decimal_places) }}
+                                        ({{ formatAmountBySymbol(arr.amount / activeDaysPassed, arr.currency_symbol, arr.currency_decimal_places) }})
+                                        <br/>
+                                    {% endfor %}
+                                </td>
+                                <td style="text-align: right;">
+                                    {% for arr in sums.left %}
+                                        {{ formatAmountBySymbol(arr.amount, arr.currency_symbol, arr.currency_decimal_places) }}
+                                        ({{ formatAmountBySymbol(arr.amount / activeDaysLeft, arr.currency_symbol, arr.currency_decimal_places) }})
+                                        <br/>
+                                    {% endfor %}
+                                </td>
+                            </tr>
+                            </tfoot>
+                        </table>
+                    </div>
+                    <div class="box-footer">
+                        <a href="{{ route('budgets.create') }}" class="btn btn-success"><span class="fa fa-plus fa-fw"></span> {{ 'createBudget'|_ }}</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+
+        <div class="row">
+            <div class="col-lg-3 col-md-4 col-sm-12 col-xs-12">
+                <div class="box">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ 'transactionsWithoutBudget'|_ }}</h3>
+                    </div>
+                    <div class="box-body">
+                        <p>
+                            <a href="{{ route('budgets.no-budget', [start.format('Y-m-d'), end.format('Y-m-d')]) }}">
+                                {{ trans('firefly.transactions_no_budget', {start: start.formatLocalized(monthAndDayFormat), end: end.formatLocalized(monthAndDayFormat)}) }}
+                            </a>
+                        </p>
+                    </div>
+                </div>
+            </div>
+            {% if paginator.count() > 0 and inactive.count() > 0 %}
+                <div class="col-lg-3 col-md-4 col-sm-12 col-xs-12">
+                    <div class="box" id="createBudgetBox">
+                        <div class="box-header with-border">
+                            <h3 class="box-title">{{ 'createBudget'|_ }}</h3>
+                        </div>
+                        <div class="box-body">
+                            <a href="{{ route('budgets.create') }}" class="btn btn-success pull-right">{{ 'createBudget'|_ }}</a>
+                        </div>
+                    </div>
+                </div>
+            {% endif %}
+            {% if inactive|length > 0 %}
+                <div class="col-lg-3 col-sm-4 col-md-6">
+                    <div class="box">
+                        <div class="box-header with-border">
+                            <h3 class="box-title">{{ 'inactiveBudgets'|_ }}</h3>
+                        </div>
+                        <div class="box-body">
+                            {% for budget in inactive %}
+                                {% if loop.index == inactive.count() %}
+                                    <a href="{{ route('budgets.show',budget.id) }}">{{ budget.name }}</a>
+                                {% else %}
+                                    <a href="{{ route('budgets.show',budget.id) }}">{{ budget.name }}</a>,
+                                {% endif %}
+                            {% endfor %}
+                        </div>
+                    </div>
+                </div>
+            {% endif %}
+        </div>
+    {% endif %}
+
+{% endblock %}
+
+{% block styles %}
+    <link href="v1/css/bootstrap-sortable.css?v={{ FF_VERSION }}" type="text/css" rel="stylesheet"  media="all" nonce="{{ JS_NONCE }}">
+{% endblock %}
+
+{% block scripts %}
+    <script src="v1/js/lib/jquery-ui.min.js?v={{ FF_VERSION }}" type="text/javascript" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" nonce="{{ JS_NONCE }}">
+
+        // index route.
+        var budgetIndexUri = "{{ route('budgets.index',['START','END']) }}";
+
+        // create available budgets / edit
+        var createAvailableBudgetUri = "{{ route('available-budgets.create', [start.format('Y-m-d'), end.format('Y-m-d')]) }}";
+        var createAltAvailableBudgetUri = "{{ route('available-budgets.create-alternative', [start.format('Y-m-d'), end.format('Y-m-d')]) }}";
+        var editAvailableBudgetUri = "{{ route('available-budgets.edit', ['REPLACEME', start.format('Y-m-d'), end.format('Y-m-d')]) }}";
+        var deleteABUrl = "{{ route('available-budgets.delete') }}";
+
+        // budget limit create form.
+        var createBudgetLimitUri = "{{ route('budget-limits.create', ['REPLACEME', start.format('Y-m-d'), end.format('Y-m-d')]) }}";
+        var storeBudgetLimitUri = "{{ route('budget-limits.store') }}";
+        var updateBudgetLimitUri = "{{ route('budget-limits.update', ['REPLACEME']) }}";
+        var deleteBudgetLimitUrl = "{{ route('budget-limits.delete', ['REPLACEME']) }}";
+        var totalBudgetedUri = "{{ route('json.budget.total-budgeted', ['REPLACEME', start.format('Y-m-d'), end.format('Y-m-d')]) }}";
+
+        // period thing:
+        var periodStart = "{{ start.format('Y-m-d') }}";
+        var periodEnd = "{{ end.format('Y-m-d') }}";
+    </script>
+    <script type="text/javascript" src="v1/js/lib/bootstrap-sortable.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/ff/budgets/index.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+{% endblock %}
diff --git a/resources/views/budgets/no-budget.twig b/resources/views/budgets/no-budget.twig
new file mode 100644
index 0000000000..138a332eac
--- /dev/null
+++ b/resources/views/budgets/no-budget.twig
@@ -0,0 +1,64 @@
+{% extends './v1/layout/default' %}
+
+{% block breadcrumbs %}
+    {{ Breadcrumbs.render(Route.getCurrentRoute.getName, start, end) }}
+{% endblock %}
+
+{% block content %}
+
+    {# upper show-all instruction #}
+    {% if periods|length > 0 %}
+        <div class="row">
+            <div class="col-lg-offset-9 col-lg-3 col-md-offset-9 col-md-3 col-sm-12 col-xs-12">
+                <p class="small text-center"><a href="{{ route('budgets.no-budget',['all']) }}">{{ 'showEverything'|_ }}</a></p>
+            </div>
+        </div>
+    {% endif %}
+
+    <div class="row">
+        <div class="{% if periods|length > 0 %}col-lg-9 col-md-9 col-sm-12{% else %}col-lg-12 col-md-12 col-sm-12{% endif %}">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ subTitle }}</h3>
+                </div>
+                <div class="box-body ">
+
+                    {% if periods|length > 0 %}
+                        {% include 'list.groups' %}
+                        <p>
+                            <span class="fa fa-calendar"></span>
+                            <a href="{{ route('budgets.no-budget-all') }}">{{ 'show_all_no_filter'|_ }}</a>
+                        </p>
+                    {% else %}
+                        {% include 'list.groups' %}
+                        <p>
+                            <span class="fa fa-calendar"></span>
+                            <a href="{{ route('budgets.no-budget') }}">{{ 'show_the_current_period_and_overview'|_ }}</a>
+                        </p>
+                    {% endif %}
+                </div>
+            </div>
+        </div>
+
+        {% if periods|length > 0 %}
+            <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
+                {% include 'list.periods' %}
+            </div>
+        {% endif %}
+
+    </div>
+
+    {# lower show-all instruction #}
+    {% if periods|length > 0 %}
+        <div class="row">
+            <div class="col-lg-offset-9 col-lg-3 col-md-offset-9 col-md-3 col-sm-12 col-xs-12">
+                <p class="small text-center"><a href="{{ route('budgets.no-budget-all') }}">{{ 'showEverything'|_ }}</a></p>
+            </div>
+        </div>
+    {% endif %}
+
+{% endblock %}
+{% block scripts %}
+    {# required for groups.twig #}
+    <script type="text/javascript" src="v1/js/ff/list/groups.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+{% endblock %}
diff --git a/resources/views/budgets/show.twig b/resources/views/budgets/show.twig
new file mode 100644
index 0000000000..eb8506fd7c
--- /dev/null
+++ b/resources/views/budgets/show.twig
@@ -0,0 +1,229 @@
+{% extends './v1/layout/default' %}
+
+{% block breadcrumbs %}
+    {{ Breadcrumbs.render(Route.getCurrentRoute.getName, budget, budgetLimit) }}
+{% endblock %}
+
+{% block content %}
+    <div class="row">
+        <div class="{% if attachments.count() == 0 %}col-lg-12 col-md-12 col-sm-12 col-xs-12{% else %}col-lg-8 col-md-6 col-sm-12 col-xs-12{% endif %}">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">
+                        {% if budgetLimit %}
+                            {{ trans('firefly.chart_budget_in_period', {name: budget.name, start: budgetLimit.start_date.formatLocalized(monthAndDayFormat), end: budgetLimit.end_date.formatLocalized(monthAndDayFormat),currency: budgetLimit.transactionCurrency.name }) }}
+                        {% else %}
+                            {{ trans('firefly.chart_all_journals_for_budget', {name:budget.name}) }}
+                        {% endif %}
+                    </h3>
+                    <div class="box-tools pull-right">
+                        <div class="btn-group">
+                            <button class="btn btn-box-tool dropdown-toggle" data-toggle="dropdown"><span class="fa fa-ellipsis-v"></span></button>
+                            <ul class="dropdown-menu" role="menu">
+                                <li><a href="{{ route('budgets.edit',budget.id) }}"><span class="fa fa-pencil fa-fw"></span> {{ 'edit'|_ }}</a></li>
+                                <li><a href="{{ route('budgets.delete',budget.id) }}"><span class="fa fa-trash fa-fw"></span> {{ 'delete'|_ }}</a></li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+                <div class="box-body">
+                    <canvas id="budgetOverview" style="width:100%;height:400px;" height="400" width="100%"></canvas>
+                </div>
+                {% if budgetLimit %}
+                    <div class="box-footer">
+                        <p class="text-muted">
+                            {{ trans('firefly.chart_budget_in_period_only_currency', {currency: budgetLimit.transactionCurrency.name}) }}
+                        </p>
+                    </div>
+                {% endif %}
+            </div>
+        </div>
+        {% if attachments.count() > 0 %}
+            <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
+                <div class="box">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">
+                            {{ 'attachments'|_ }}
+                        </h3>
+                    </div>
+                    <div class="box-body no-padding">
+                        {% include 'list.attachments' %}
+                    </div>
+                </div>
+            </div>
+        {% endif %}
+    </div>
+    <div class="row">
+        <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'expenses_by_category'|_ }}</h3>
+                </div>
+                <div class="box-body">
+                    <div style="width:100%;margin:0 auto;">
+                        <canvas id="budget-cat-out" style="width:100%;height:250px;" height="250"></canvas>
+                    </div>
+                </div>
+                {% if budgetLimit %}
+                    <div class="box-footer">
+                        <p class="text-muted">
+                            {{ trans('firefly.chart_budget_in_period_only_currency', {currency: budgetLimit.transactionCurrency.name}) }}
+                        </p>
+                    </div>
+                {% endif %}
+            </div>
+        </div>
+        <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'expenses_by_asset_account'|_ }}</h3>
+                </div>
+                <div class="box-body">
+                    <div style="width:100%;margin:0 auto;">
+                        <canvas id="budget-asset-out" style="width:100%;height:250px;" height="250"></canvas>
+                    </div>
+                </div>
+                {% if budgetLimit %}
+                    <div class="box-footer">
+                        <p class="text-muted">
+                            {{ trans('firefly.chart_budget_in_period_only_currency', {currency: budgetLimit.transactionCurrency.name}) }}
+                        </p>
+                    </div>
+                {% endif %}
+            </div>
+        </div>
+        <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'expenses_by_expense_account'|_ }}</h3>
+                </div>
+                <div class="box-body">
+                    <div style="width:100%;margin:0 auto;">
+                        <canvas id="budget-expense-out" style="width:100%;height:250px;" height="250"></canvas>
+                    </div>
+                </div>
+                {% if budgetLimit %}
+                    <div class="box-footer">
+                        <p class="text-muted">
+                            {{ trans('firefly.chart_budget_in_period_only_currency', {currency: budgetLimit.transactionCurrency.name}) }}
+                        </p>
+                    </div>
+                {% endif %}
+            </div>
+        </div>
+    </div>
+    {% if limits|length > 0 %}
+    <div class="row">
+        <div class="col-lg-offset-9 col-lg-3 col-md-offset-9 col-md-3 col-sm-12 col-xs-12">
+            <p class="small text-center"><a href="{{ route('budgets.show',budget.id) }}">{{ 'showEverything'|_ }}</a></p>
+        </div>
+    </div>
+    {% endif %}
+
+    <div class="row">
+        <div class="{% if limits|length > 0 %}col-lg-9 col-md-9 col-sm-12 col-xs-12{% else %}col-lg-12 col-md-12 col-sm-12 col-xs-12{% endif %}">
+
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'transactions'|_ }}</h3>
+                </div>
+                <div class="box-body">
+                    {% include 'list.groups' %}
+                    {% if budgetLimit %}
+                        <p>
+                            <span class="fa fa-calendar"></span>
+                            <a href="{{ route('budgets.show', [budget.id]) }}">
+                                {{ 'show_all_no_filter'|_ }}
+                            </a>
+                        </p>
+                    {% endif %}
+                </div>
+            </div>
+        </div>
+        {% if limits|length > 0 %}
+        <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
+            {% for limit in limits %}
+                <div class="box {% if limit.start_date == budgetLimit.start_date %}box-primary box-solid{% endif %}">
+                    <div class="box-header with-border">
+                        <h3 class="box-title"><a
+                                    href="{{ route('budgets.show.limit',[budget.id,limit.id]) }}">
+                                {{ limit.start_date.formatLocalized(monthAndDayFormat) }} &mdash;
+                                {{ limit.end_date.formatLocalized(monthAndDayFormat) }}
+                            </a>
+                        </h3>
+                    </div>
+                    <div class="box-body no-padding">
+                        <table class="table table-hover">
+                            <tr>
+                                <td style="width:33%;">{{ 'amount'|_ }}</td>
+                                <td>
+                                    {{ formatAmountBySymbol(limit.amount, limit.transactionCurrency.symbol, limit.transactionCurrency.decimal_places) }}
+                                </td>
+                            </tr>
+                            <tr>
+                                <td style="width:33%;">{{ 'spent'|_ }}</td>
+                                <td>
+                                    {{ formatAmountBySymbol(limit.spent, limit.transactionCurrency.symbol, limit.transactionCurrency.decimal_places) }}
+                                </td>
+                            </tr>
+                            {% if limit.spent > 0 %}
+                                <tr>
+                                    <td colspan="2">
+                                        {% set overspent = limit.amount + limit.spent < 0 %}
+
+                                        {% if overspent %}
+                                            {% set pct = (limit.spent != 0 ? (limit.amount / (limit.spent*-1))*100 : 0) %} {# must have -1 here #}
+                                            <div class="progress progress-striped">
+                                                <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="{{ pct|round }}"
+                                                     aria-valuemin="0"
+                                                     aria-valuemax="100" style="width: {{ pct|round }}%;"></div>
+                                                <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="{{ (100-pct)|round }}"
+                                                     aria-valuemin="0" aria-valuemax="100" style="width: {{ (100-pct)|round }}%;"></div>
+                                            </div>
+                                        {% else %}
+                                            {% set pct = (limit.amount != 0 ? (((limit.spent*-1) / limit.amount)*100) : 0) %} {# must have -1 here #}
+                                            <div class="progress progress-striped">
+                                                <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="{{ pct|round }}"
+                                                     aria-valuemin="0"
+                                                     aria-valuemax="100" style="width: {{ pct|round }}%;"></div>
+                                            </div>
+                                        {% endif %}
+                                    </td>
+                                </tr>
+                            {% endif %}
+                        </table>
+                    </div>
+                </div>
+            {% endfor %}
+            <p class="small text-center"><a href="{{ route('budgets.show',budget.id) }}">{{ 'showEverything'|_ }}</a></p>
+        </div>
+        {% endif %}
+    </div>
+
+{% endblock %}
+{% block scripts %}
+    <script type="text/javascript" nonce="{{ JS_NONCE }}">
+        var budgetID = {{ budget.id }};
+        var budgetLimitID = 0;
+        {% if budgetLimit.id %}
+            budgetLimitID = {{ budgetLimit.id }};
+            var budgetChartUri = '{{ route('chart.budget.budget-limit', [budget.id, budgetLimit.id] ) }}';
+            var currencySymbol = '{{ budgetLimit.transactionCurrency.symbol }}';
+            var expenseCategoryUri = '{{ route('chart.budget.expense-category', [budget.id, budgetLimit.id]) }}';
+            var expenseAssetUri = '{{ route('chart.budget.expense-asset', [budget.id, budgetLimit.id]) }}';
+            var expenseExpenseUri = '{{ route('chart.budget.expense-expense', [budget.id, budgetLimit.id]) }}';
+        {% else %}
+            var budgetChartUri = '{{ route('chart.budget.budget', [budget.id] ) }}';
+            var expenseCategoryUri = '{{ route('chart.budget.expense-category', [budget.id]) }}';
+            var expenseAssetUri = '{{ route('chart.budget.expense-asset', [budget.id]) }}';
+            var expenseExpenseUri = '{{ route('chart.budget.expense-expense', [budget.id]) }}';
+        {% endif %}
+    </script>
+
+    <script type="text/javascript" src="v1/js/lib/Chart.bundle.min.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/ff/charts.defaults.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/ff/charts.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/ff/budgets/show.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    {# required for groups.twig #}
+    <script type="text/javascript" src="v1/js/ff/list/groups.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+{% endblock %}
diff --git a/resources/views/categories/create.twig b/resources/views/categories/create.twig
new file mode 100644
index 0000000000..b3a2b83b19
--- /dev/null
+++ b/resources/views/categories/create.twig
@@ -0,0 +1,57 @@
+{% extends './v1/layout/default' %}
+
+{% block breadcrumbs %}
+    {{ Breadcrumbs.render(Route.getCurrentRoute.getName) }}
+{% endblock %}
+
+{% block content %}
+
+    <form method="POST" action="{{ route('categories.store') }}" accept-charset="UTF-8" class="form-horizontal" id="store" enctype="multipart/form-data">
+        <input name="_token" type="hidden" value="{{ csrf_token() }}">
+        <div class="row">
+            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
+                <div class="box box-primary">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ 'mandatoryFields'|_ }}</h3>
+                    </div>
+                    <div class="box-body">
+                        {{ ExpandedForm.text('name') }}
+                    </div>
+                </div>
+            </div>
+            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
+                {# panel for optional fields#}
+                <div class="box">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ 'optionalFields'|_ }}</h3>
+                    </div>
+                    <div class="box-body">
+                        {{ ExpandedForm.textarea('notes', null, {helpText: trans('firefly.field_supports_markdown')} ) }}
+                        {{ ExpandedForm.file('attachments[]', {'multiple': 'multiple','helpText': trans('firefly.upload_max_file_size', {'size': uploadSize|filesize}) }) }}
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
+                {# panel for options #}
+                <div class="box">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ 'options'|_ }}</h3>
+                    </div>
+                    <div class="box-body">
+                        {{ ExpandedForm.optionsList('create','category') }}
+                    </div>
+                    <div class="box-footer">
+                        <button type="submit" class="btn pull-right btn-success">
+                            {{ 'store_category'|_ }}
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </form>
+{% endblock %}
+{% block scripts %}
+    <script type="text/javascript" src="v1/js/ff/budgets/create.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+{% endblock %}
diff --git a/resources/views/categories/delete.twig b/resources/views/categories/delete.twig
new file mode 100644
index 0000000000..600f8fda52
--- /dev/null
+++ b/resources/views/categories/delete.twig
@@ -0,0 +1,41 @@
+{% extends './v1/layout/default' %}
+
+{% block breadcrumbs %}
+    {{ Breadcrumbs.render(Route.getCurrentRoute.getName, category) }}
+{% endblock %}
+
+{% block content %}
+
+    <form method="POST" action="{{ route('categories.destroy',category.id) }}" accept-charset="UTF-8" class="form-horizontal" id="destroy">
+        <input name="_token" type="hidden" value="{{ csrf_token() }}">
+        <div class="row">
+            <div class="col-lg-6 col-lg-offset-3 col-md-12 col-sm-12">
+                <div class="box box-danger">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ trans('form.delete_category', {'name': category.name}) }}</h3>
+                    </div>
+                    <div class="box-body">
+                        <p class="text-danger">
+                            {{ trans('form.permDeleteWarning') }}
+                        </p>
+
+                        <p>
+                            {{ trans('form.category_areYouSure', {'name': category.name}) }}
+                        </p>
+
+                        <p>
+                            {% if category.transactionjournals.count() > 0 %}
+                                {{ Lang.choice('form.category_keep_transactions', category.transactionjournals.count(), {count: category.transactionjournals.count() }) }}
+                            {% endif %}
+                        </p>
+                    </div>
+                    <div class="box-footer">
+                        <input type="submit" name="submit" value="{{ trans('form.deletePermanently') }}" class="btn btn-danger pull-right"/>
+                        <a href="{{ URL.previous() }}" class="btn-default btn">{{ trans('form.cancel') }}</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+    </form>
+{% endblock %}
diff --git a/resources/views/categories/edit.twig b/resources/views/categories/edit.twig
new file mode 100644
index 0000000000..6abbbb0da9
--- /dev/null
+++ b/resources/views/categories/edit.twig
@@ -0,0 +1,58 @@
+{% extends './v1/layout/default' %}
+
+{% block breadcrumbs %}
+    {{ Breadcrumbs.render(Route.getCurrentRoute.getName, category) }}
+{% endblock %}
+
+{% block content %}
+    {{ Form.model(category, {'class' : 'form-horizontal','enctype': 'multipart/form-data','id' : 'update','url' : route('categories.update',category.id)}) }}
+    <input type="hidden" name="id" value="{{ category.id }}"/>
+    <div class="row">
+        <div class="col-lg-6 col-md-6 col-sm-12">
+            <div class="box box-primary">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'mandatoryFields'|_ }}</h3>
+                </div>
+                <div class="box-body">
+                    {{ ExpandedForm.text('name') }}
+                </div>
+            </div>
+        </div>
+        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
+            {# panel for optional fields#}
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'optionalFields'|_ }}</h3>
+                </div>
+                <div class="box-body">
+                    {{ ExpandedForm.textarea('notes', preFilled.notes, {helpText: trans('firefly.field_supports_markdown')} ) }}
+                    {{ ExpandedForm.file('attachments[]', {'multiple': 'multiple','helpText': trans('firefly.upload_max_file_size', {'size': uploadSize|filesize}) }) }}
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-lg-6 col-md-6 col-sm-12">
+
+
+            {# panel for options #}
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'options'|_ }}</h3>
+                </div>
+                <div class="box-body">
+                    {{ ExpandedForm.optionsList('update','category') }}
+                </div>
+                <div class="box-footer">
+                    <button type="submit" class="btn pull-right btn-success">
+                        {{ 'update_category'|_ }}
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+    </form>
+{% endblock %}
+{% block scripts %}
+    <script type="text/javascript" src="v1/js/ff/categories/edit.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+{% endblock %}
diff --git a/resources/views/categories/index.twig b/resources/views/categories/index.twig
new file mode 100644
index 0000000000..2175f264ba
--- /dev/null
+++ b/resources/views/categories/index.twig
@@ -0,0 +1,49 @@
+{% extends './v1/layout/default' %}
+
+{% block breadcrumbs %}
+    {{ Breadcrumbs.render(Route.getCurrentRoute.getName) }}
+{% endblock %}
+
+{% block content %}
+    {% if categories.count() > 0 %}
+<div class="row">
+    <div class="col-lg-12 col-md-12 col-sm-12">
+        <div class="box">
+            <div class="box-header with-border">
+                <h3 class="box-title">{{ 'categories'|_ }}</h3>
+                <div class="box-tools pull-right">
+                    <div class="btn-group">
+                        <button class="btn btn-box-tool dropdown-toggle" data-toggle="dropdown"><span class="fa fa-ellipsis-v"></span></button>
+                        <ul class="dropdown-menu" role="menu">
+                            <li><a href="{{ route('categories.create') }}"><span class="fa fa-plus fa-fw"></span> {{ 'new_category'|_ }}</a></li>
+                        </ul>
+                    </div>
+                </div>
+
+            </div>
+            <div class="box-body no-padding">
+                <div style="padding:8px;">
+                    <a class="btn btn-success" href="{{ route('categories.create') }}"><span class="fa fa-plus fa-fw"></span> {{ 'new_category'|_ }}</a>
+                </div>
+                {% include 'list/categories' %}
+            </div>
+            <div class="box-footer">
+                <a class="btn btn-success" href="{{ route('categories.create') }}"><span class="fa fa-plus fa-fw"></span> {{ 'new_category'|_ }}</a>
+            </div>
+        </div>
+
+    </div>
+</div>
+{% else %}
+        {% include 'partials.empty' with {objectType: 'default', type: 'categories',route: route('categories.create')} %}
+    {% endif %}
+{% endblock %}
+
+{% block styles %}
+    <link href="v1/css/bootstrap-sortable.css?v={{ FF_VERSION }}" type="text/css" rel="stylesheet"  media="all" nonce="{{ JS_NONCE }}">
+{% endblock %}
+
+{% block scripts %}
+    <script type="text/javascript" src="v1/js/lib/bootstrap-sortable.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/ff/categories/index.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+{% endblock %}
diff --git a/resources/views/categories/no-category.twig b/resources/views/categories/no-category.twig
new file mode 100644
index 0000000000..c093435b93
--- /dev/null
+++ b/resources/views/categories/no-category.twig
@@ -0,0 +1,64 @@
+{% extends './v1/layout/default' %}
+
+{% block breadcrumbs %}
+    {{ Breadcrumbs.render(Route.getCurrentRoute.getName, start, end) }}
+{% endblock %}
+
+{% block content %}
+
+    {# upper show-all instruction #}
+    {% if periods|length > 0 %}
+        <div class="row">
+            <div class="col-lg-offset-10 col-lg-2 col-md-offset-9 col-md-3 col-sm-12 col-xs-12">
+                <p class="small text-center"><a href="{{ route('categories.no-category.all') }}">{{ 'showEverything'|_ }}</a></p>
+            </div>
+        </div>
+    {% endif %}
+
+    <div class="row">
+        <div class="{% if periods|length > 0 %}col-lg-10 col-md-9 col-sm-12 col-xs-12{% else %}col-lg-12 col-md-12 col-sm-12 col-xs-12{% endif %}">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ subTitle }}</h3>
+                </div>
+                <div class="box-body ">
+
+                    {% if periods|length > 0 %}
+                        {% include 'list.groups' %}
+                        <p>
+                            <span class="fa fa-calendar"></span>
+                            <a href="{{ route('categories.no-category.all') }}">{{ 'show_all_no_filter'|_ }}</a>
+                        </p>
+                    {% else %}
+                        {% include 'list.groups' %}
+                        <p>
+                            <span class="fa fa-calendar"></span>
+                            <a href="{{ route('categories.no-category') }}">{{ 'show_the_current_period_and_overview'|_ }}</a>
+                        </p>
+                    {% endif %}
+                </div>
+            </div>
+        </div>
+
+        {% if periods|length > 0 %}
+            <div class="col-lg-2 col-md-4 col-sm-12 col-xs-12">
+                {% include 'list.periods' %}
+            </div>
+        {% endif %}
+
+    </div>
+
+    {# lower show-all instruction #}
+    {% if periods|length > 0 %}
+        <div class="row">
+            <div class="col-lg-offset-10 col-lg-2 col-md-offset-9 col-md-3 col-sm-12 col-xs-12">
+                <p class="small text-center"><a href="{{ route('categories.no-category',['all']) }}">{{ 'showEverything'|_ }}</a></p>
+            </div>
+        </div>
+    {% endif %}
+
+{% endblock %}
+{% block scripts %}
+    {# required for groups.twig #}
+    <script type="text/javascript" src="v1/js/ff/list/groups.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+{% endblock %}
diff --git a/resources/views/categories/show.twig b/resources/views/categories/show.twig
new file mode 100644
index 0000000000..5a061c4b76
--- /dev/null
+++ b/resources/views/categories/show.twig
@@ -0,0 +1,122 @@
+{% extends './v1/layout/default' %}
+
+{% block breadcrumbs %}
+    {{ Breadcrumbs.render(Route.getCurrentRoute.getName, category, start, end) }}
+{% endblock %}
+
+{% block content %}
+    <div class="row">
+        {% if Route.getCurrentRoute.getName == 'categories.show' %}
+            {# both charts #}
+            <div class="{% if attachments.count() == 0 %}col-lg-6 col-md-12 col-sm-12 col-xs-12{% else %}col-lg-4 col-md-12 col-sm-12 col-xs-12{% endif %}">
+                <div class="box">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">
+                            {{ trans('firefly.chart_category_in_period', {name: category.name, start: start.formatLocalized(monthAndDayFormat), end: end.formatLocalized(monthAndDayFormat) }) }}
+                        </h3>
+                    </div>
+                    <div class="box-body">
+                        <canvas id="specific-period" style="width:100%;height:400px;" height="400" width="100%"></canvas>
+                    </div>
+                </div>
+            </div>
+            <div class="{% if attachments.count() == 0 %}col-lg-6 col-md-12 col-sm-12 col-xs-12{% else %}col-lg-4 col-md-12 col-sm-12 col-xs-12{% endif %}">
+                <div class="box">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">
+                            {{ trans('firefly.chart_category_all', {name: category.name }) }}
+                        </h3>
+                    </div>
+                    <div class="box-body">
+                        <canvas id="category-everything" style="width:100%;height:400px;" height="400" width="100%"></canvas>
+                    </div>
+                </div>
+            </div>
+        {% endif %}
+        {% if Route.getCurrentRoute.getName == 'categories.show.all' %}
+            {# all chart #}
+            <div class="{% if attachments.count() == 0 %}col-lg-12 col-md-12 col-sm-12 col-xs-12{% else %}col-lg-8 col-md-12 col-sm-12 col-xs-12{% endif %}">
+                <div class="box">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">
+                            {{ trans('firefly.chart_category_all', {name: category.name }) }}
+                        </h3>
+                    </div>
+                    <div class="box-body">
+                        <canvas id="category-everything" style="width:100%;height:400px;" height="400" width="100%"></canvas>
+                    </div>
+                </div>
+            </div>
+        {% endif %}
+        {% if attachments.count() > 0 %}
+            <div class="col-lg-4 col-md-12 col-sm-12 col-xs-12">
+                <div class="box">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">
+                            {{ 'attachments'|_ }}
+                        </h3>
+                    </div>
+                    <div class="box-body no-padding">
+                        {% include 'list.attachments' %}
+                    </div>
+                </div>
+            </div>
+        {% endif %}
+    </div>
+    {% if periods|length > 0 %}
+        <div class="row">
+            <div class="col-lg-offset-10 col-lg-2 col-md-offset-10 col-md-2 col-sm-12 col-xs-12">
+                <p class="small text-center"><a href="{{ route('categories.show.all',[category.id]) }}">{{ 'showEverything'|_ }}</a></p>
+            </div>
+        </div>
+    {% endif %}
+
+    <div class="row">
+        <div class="{% if periods|length > 0 %}col-lg-10 col-md-8 col-sm-12 col-xs-12{% else %}col-lg-12 col-md-12 col-sm-12 col-xs-12{% endif %}">
+
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'transactions'|_ }}</h3>
+                </div>
+                <div class="box-body">
+                    {% if periods|length > 0 %}
+                        {% include 'list.groups' %}
+                        <p>
+                            <span class="fa fa-calendar"></span>
+                            <a href="{{ route('categories.show.all', [category.id]) }}">
+                                {{ 'show_all_no_filter'|_ }}
+                            </a>
+                        </p>
+                    {% else %}
+                        {% include 'list.groups'  %}
+                        <p>
+                            <span class="fa fa-calendar"></span>
+                            <a href="{{ route('categories.show', [category.id]) }}">
+                                {{ 'show_the_current_period_and_overview'|_ }}
+                            </a>
+                        </p>
+                    {% endif %}
+                </div>
+            </div>
+        </div>
+        {% if periods|length > 0 %}
+            <div class="col-lg-2 col-md-4 col-sm-12 col-xs-12">
+                {% include 'list.periods' %}
+            </div>
+        {% endif %}
+    </div>
+
+{% endblock %}
+{% block scripts %}
+    <script type="text/javascript" nonce="{{ JS_NONCE }}">
+        var current = '{{ route('chart.category.current', [category.id]) }}';
+        var everything = '{{ route('chart.category.all', [category.id]) }}';
+        var specific = '{{ route('chart.category.specific', [category.id, start.format('Ymd')]) }}';
+    </script>
+    <script type="text/javascript" src="v1/js/lib/Chart.bundle.min.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/ff/charts.defaults.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/ff/charts.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/ff/categories/show.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    {# required for groups.twig #}
+    <script type="text/javascript" src="v1/js/ff/list/groups.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+{% endblock %}
diff --git a/resources/views/currencies/create.twig b/resources/views/currencies/create.twig
new file mode 100644
index 0000000000..5295540adc
--- /dev/null
+++ b/resources/views/currencies/create.twig
@@ -0,0 +1,47 @@
+{% extends './v1/layout/default' %}
+
+{% block breadcrumbs %}
+    {{ Breadcrumbs.render(Route.getCurrentRoute.getName) }}
+{% endblock %}
+
+{% block content %}
+    <form method="POST" action="{{ route('currencies.store') }}" accept-charset="UTF-8" class="form-horizontal" id="store">
+        <input name="_token" type="hidden" value="{{ csrf_token() }}">
+        <div class="row">
+            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
+                <div class="box box-primary">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ 'mandatoryFields'|_ }}</h3>
+                    </div>
+                    <div class="box-body">
+                        {{ ExpandedForm.text('name',null,{'maxlength' : 48}) }}
+                        {{ ExpandedForm.text('symbol',null,{'maxlength': 51}) }}
+                        {{ ExpandedForm.text('code',null,{'maxlength' : 51}) }}
+                        {{ ExpandedForm.integer('decimal_places',2,{'maxlength' : 2,'min': 0,'max': 12}) }}
+                    </div>
+                </div>
+
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
+
+                {# panel for options #}
+                <div class="box">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ 'options'|_ }}</h3>
+                    </div>
+                    <div class="box-body">
+                        {{ ExpandedForm.optionsList('create','currency') }}
+                    </div>
+                    <div class="box-footer">
+                        <button type="submit" class="btn pull-right btn-success">
+                            {{ 'store_currency'|_ }}
+                        </button>
+                    </div>
+                </div>
+
+            </div>
+        </div>
+    </form>
+{% endblock %}
diff --git a/resources/views/currencies/delete.twig b/resources/views/currencies/delete.twig
new file mode 100644
index 0000000000..1ef83a4dc6
--- /dev/null
+++ b/resources/views/currencies/delete.twig
@@ -0,0 +1,35 @@
+{% extends './v1/layout/default' %}
+
+{% block breadcrumbs %}
+    {{ Breadcrumbs.render(Route.getCurrentRoute.getName, currency) }}
+{% endblock %}
+
+{% block content %}
+
+    <form method="POST" action="{{ route('currencies.destroy',currency.id) }}" accept-charset="UTF-8" class="form-horizontal" id="destroy">
+        <input name="_token" type="hidden" value="{{ csrf_token() }}">
+        <div class="row">
+            <div class="col-lg-6 col-lg-offset-3 col-md-12 col-sm-12">
+                <div class="box box-danger">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ trans('form.delete_currency', {'name': currency.name}) }}</h3>
+                    </div>
+                    <div class="box-body">
+                        <p class="text-danger">
+                            {{ trans('form.permDeleteWarning') }}
+                        </p>
+
+                        <p>
+                            {{ trans('form.currency_areYouSure', {'name': currency.name}) }}
+                        </p>
+                    </div>
+                    <div class="box-footer">
+                        <input type="submit" name="submit" value="{{ trans('form.deletePermanently') }}" class="btn btn-danger pull-right"/>
+                        <a href="{{ URL.previous }}" class="btn-default btn">{{ trans('form.cancel') }}</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </form>
+
+{% endblock %}
diff --git a/resources/views/currencies/edit.twig b/resources/views/currencies/edit.twig
new file mode 100644
index 0000000000..6dd3fb8f6d
--- /dev/null
+++ b/resources/views/currencies/edit.twig
@@ -0,0 +1,48 @@
+{% extends './v1/layout/default' %}
+
+{% block breadcrumbs %}
+    {{ Breadcrumbs.render(Route.getCurrentRoute.getName, currency) }}
+{% endblock %}
+
+{% block content %}
+    {{ Form.model(currency, {'class' : 'form-horizontal','id' : 'update','url' : route('currencies.update',currency.id)}) }}
+
+    <input type="hidden" name="id" value="{{ currency.id }}"/>
+    <div class="row">
+        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
+            <div class="box box-primary">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'mandatoryFields'|_ }}</h3>
+                </div>
+                <div class="box-body">
+                    {{ ExpandedForm.text('name',null,{'maxlength' : 48}) }}
+                    {{ ExpandedForm.text('symbol',null,{'maxlength' : 51}) }}
+                    {{ ExpandedForm.text('code',null,{'maxlength' : 51}) }}
+                    {{ ExpandedForm.integer('decimal_places',null,{'maxlength' : 2,'min': 0,'max': 12}) }}
+                    {{ ExpandedForm.checkbox('enabled',null) }}
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
+
+            {# panel for options #}
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'options'|_ }}</h3>
+                </div>
+                <div class="box-body">
+                    {{ ExpandedForm.optionsList('update','currency') }}
+                </div>
+                <div class="box-footer">
+                    <button type="submit" class="btn btn-success pull-right">
+                        {{ 'update_currency'|_ }}
+                    </button>
+                </div>
+            </div>
+
+        </div>
+    </div>
+    </form>
+{% endblock %}
diff --git a/resources/views/currencies/index.twig b/resources/views/currencies/index.twig
new file mode 100644
index 0000000000..15a99e1064
--- /dev/null
+++ b/resources/views/currencies/index.twig
@@ -0,0 +1,108 @@
+{% extends './v1/layout/default' %}
+
+{% block breadcrumbs %}
+    {{ Breadcrumbs.render(Route.getCurrentRoute.getName) }}
+{% endblock %}
+
+{% block content %}
+    <div class="row">
+        <div class="col-lg-12 col-sm-12 col-md-12">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'currencies'|_ }}</h3>
+                    <a class="btn btn-success pull-right" href="{{ route('currencies.create') }}">{{ 'create_currency'|_ }}</a>
+                </div>
+                <div class="box-body">
+                    <p class="text-info">
+                        {{ 'currencies_intro'|_ }}
+                    </p>
+                    <p class="text-info">
+                        {{ 'currencies_default_disabled'|_ }}
+                    </p>
+                    {% if currencies|length > 0 %}
+                        <div style="padding-left:8px;">
+                            {{ currencies.links('pagination.bootstrap-4')|raw }}
+                        </div>
+                        <table class="table table-hover">
+                            <thead>
+                            <tr>
+                                {% if isOwner %}
+                                    <th>&nbsp;</th>
+                                {% endif %}
+                                <th>{{ 'currency'|_ }}</th>
+                                <th>{{ 'number_of_decimals'|_ }}</th>
+                                <th>&nbsp;</th>
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {% for currency in currencies %}
+                                <tr>
+                                    {% if isOwner %}
+                                        <td>
+                                            <div class="btn-group btn-group-xs">
+                                                <a class="btn btn-default" href="{{ route('currencies.edit',currency.id) }}"><span
+                                                            class="fa fa-fw fa-pencil"></span></a>
+                                                <a class="btn btn-danger" href="{{ route('currencies.delete',currency.id) }}"><span
+                                                            class="fa fa-fw fa-trash"></span></a>
+                                            </div>
+                                        </td>
+                                    {% endif %}
+                                    <td>
+                                        {% if currency.enabled == false %}
+                                        <span class="text-muted">
+                                        {% endif %}
+                                            {{ currency.name }} ({{ currency.code }}) ({{ currency.symbol|raw }})
+                                        {% if currency.id == defaultCurrency.id %}
+                                            <span class="label label-success" id="default-currency">{{ 'default_currency'|_ }}</span>
+                                        {% endif %}
+                                            {% if currency.enabled == false %}
+                                        </span>
+                                    <br><small class="text-danger">{{ 'currency_is_disabled'|_ }}</small>
+                                        {% endif %}
+                                    </td>
+
+                                    <td>{{ currency.decimal_places }}</td>
+                                    <td class="buttons">
+                                        <div class="btn-group">
+                                            {% if currency.id != defaultCurrency.id %}
+                                                <button data-id="{{ currency.id }}" class="make_default btn btn-default"><span
+                                                            class="fa fa-fw fa-star"></span> {{ 'make_default_currency'|_ }}</button>
+                                            {% endif %}
+                                            {% if currency.enabled %}
+                                                <a class="btn btn-default disable-currency" data-id="{{ currency.id }}"
+                                                   href="#">
+                                                    <span class="fa fa-fw fa-square-o"></span>
+                                                    {{ 'disable_currency'|_ }}</a>
+                                            {% endif %}
+                                            {% if not currency.enabled %}
+                                                <a class="btn btn-default enable-currency" data-id="{{ currency.id }}"
+                                                   href="#">
+                                                    <span class="fa fa-fw fa-check-square-o"></span>
+                                                    {{ 'enable_currency'|_ }}</a>
+                                            {% endif %}
+                                        </div>
+                                    </td>
+                                </tr>
+                            {% endfor %}
+                            </tbody>
+                        </table>
+                        <div style="padding-left:8px;">
+                            {{ currencies.links('pagination.bootstrap-4')|raw }}
+                        </div>
+                    {% endif %}
+                </div>
+                <div class="box-footer">
+                    <a class="btn btn-success pull-right" href="{{ route('currencies.create') }}">{{ 'create_currency'|_ }}</a>
+                </div>
+            </div>
+        </div>
+    </div>
+{% endblock %}
+{% block scripts %}
+    <script type="text/javascript" nonce="{{ JS_NONCE }}">
+        var makeDefaultUrl = "{{ route('currencies.default') }}";
+        var disableCurrencyUrl = "{{ route('currencies.disable') }}";
+        var enableCurrencyUrl = "{{ route('currencies.enable') }}";
+    </script>
+    <script type="text/javascript" src="v1/js/ff/currencies/index.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+{% endblock %}
diff --git a/resources/views/demo/accounts/index.twig b/resources/views/demo/accounts/index.twig
new file mode 100644
index 0000000000..9d3cf18a02
--- /dev/null
+++ b/resources/views/demo/accounts/index.twig
@@ -0,0 +1 @@
+{{ trans('demo.accounts-index') }}
diff --git a/resources/views/demo/budgets/index.twig b/resources/views/demo/budgets/index.twig
new file mode 100644
index 0000000000..5717ecfce4
--- /dev/null
+++ b/resources/views/demo/budgets/index.twig
@@ -0,0 +1 @@
+{{ trans('demo.budgets-index') }}
diff --git a/resources/views/demo/currencies/index.twig b/resources/views/demo/currencies/index.twig
new file mode 100644
index 0000000000..1ea152a0f2
--- /dev/null
+++ b/resources/views/demo/currencies/index.twig
@@ -0,0 +1 @@
+{{ trans('demo.currencies-index') }}
diff --git a/resources/views/demo/home.twig b/resources/views/demo/home.twig
new file mode 100644
index 0000000000..85268e795a
--- /dev/null
+++ b/resources/views/demo/home.twig
@@ -0,0 +1 @@
+{{ trans('demo.index', {asset: route('accounts.index', ['asset']), budgets: route('budgets.index'), reports: route('reports.index')})|raw }}
diff --git a/resources/views/demo/index.twig b/resources/views/demo/index.twig
new file mode 100644
index 0000000000..85268e795a
--- /dev/null
+++ b/resources/views/demo/index.twig
@@ -0,0 +1 @@
+{{ trans('demo.index', {asset: route('accounts.index', ['asset']), budgets: route('budgets.index'), reports: route('reports.index')})|raw }}
diff --git a/resources/views/demo/no-demo-text.twig b/resources/views/demo/no-demo-text.twig
new file mode 100644
index 0000000000..1e7116dc6b
--- /dev/null
+++ b/resources/views/demo/no-demo-text.twig
@@ -0,0 +1,3 @@
+{{ trans('demo.no_demo_text', {route: Route.getCurrentRoute.getName})|raw }}
+
+{{ trans('demo.see_help_icon')|raw }}
diff --git a/resources/views/demo/piggy-banks/index.twig b/resources/views/demo/piggy-banks/index.twig
new file mode 100644
index 0000000000..7c0415fc31
--- /dev/null
+++ b/resources/views/demo/piggy-banks/index.twig
@@ -0,0 +1 @@
+{{ trans('demo.piggy-banks-index') }}
diff --git a/resources/views/demo/profile/index.twig b/resources/views/demo/profile/index.twig
new file mode 100644
index 0000000000..4ab30d6088
--- /dev/null
+++ b/resources/views/demo/profile/index.twig
@@ -0,0 +1 @@
+{{ trans('demo.profile-index') }}
diff --git a/resources/views/demo/recurring/index.twig b/resources/views/demo/recurring/index.twig
new file mode 100644
index 0000000000..366736f634
--- /dev/null
+++ b/resources/views/demo/recurring/index.twig
@@ -0,0 +1 @@
+{{ trans('demo.recurring-index') }}
diff --git a/resources/views/demo/recurring/recurring-create.twig b/resources/views/demo/recurring/recurring-create.twig
new file mode 100644
index 0000000000..f97b5249ed
--- /dev/null
+++ b/resources/views/demo/recurring/recurring-create.twig
@@ -0,0 +1 @@
+{{ trans('demo.recurring-create') }}
diff --git a/resources/views/demo/reports/index.twig b/resources/views/demo/reports/index.twig
new file mode 100644
index 0000000000..adf49baea5
--- /dev/null
+++ b/resources/views/demo/reports/index.twig
@@ -0,0 +1,7 @@
+{{ trans('demo.reports-index-start')|raw }}
+<br/>
+<br/>
+{{ trans('demo.reports-index-examples', {
+    one: route('reports.report.default', ['1,2,3','currentMonthStart','currentMonthEnd']),
+    two: route('reports.report.default', ['1,2,3','20160101','20161231']),
+    three: route('reports.report.budget', ['1,2,3','2,1','20160101','20161231'])})|raw }}
diff --git a/resources/views/demo/transactions/index.twig b/resources/views/demo/transactions/index.twig
new file mode 100644
index 0000000000..247ad41218
--- /dev/null
+++ b/resources/views/demo/transactions/index.twig
@@ -0,0 +1 @@
+{{ trans('demo.transactions-index') }}
diff --git a/resources/views/error.twig b/resources/views/error.twig
new file mode 100644
index 0000000000..f402e8478d
--- /dev/null
+++ b/resources/views/error.twig
@@ -0,0 +1,32 @@
+{% extends "./v1/layout/guest" %}
+
+{% block content %}
+
+    <div class="row">
+        <div class="col-lg-12 col-md-12 col-sm-12">
+            <h3 class="text-danger">Sorry, an error occurred.</h3>
+        </div>
+    </div>
+
+    <div class="row">
+        <div class="col-lg-12 col-md-12 col-sm-12">
+            <p>{{ message |default('General unknown errror')|raw }}</p>
+        </div>
+    </div>
+
+    <div class="row">
+        <div class="col-lg-12 col-md-12 col-sm-12">
+            <p>
+                If you do not know how to handle this error, please open an issue on
+                <a href="https://github.com/firefly-iii/firefly-iii/issues">GitHub</a>
+                or <a href="mailto:james@firefly-iii.org">send me a message</a>.
+            </p>
+        </div>
+    </div>
+
+    <div class="row">
+        <div class="col-lg-12 col-md-12 col-sm-12">
+            <p><a href="{{ route('index') }}">Follow this link back to the index.</a></p>
+        </div>
+    </div>
+{% endblock %}
diff --git a/resources/views/export/index.twig b/resources/views/export/index.twig
new file mode 100644
index 0000000000..7df7cf179c
--- /dev/null
+++ b/resources/views/export/index.twig
@@ -0,0 +1,36 @@
+{% extends './v1/layout/default' %}
+
+{% block breadcrumbs %}
+    {{ Breadcrumbs.render(Route.getCurrentRoute.getName) }}
+{% endblock %}
+
+{% block content %}
+    <div class="row">
+        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
+            <div class="box box-primary">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'export_data_main_title'|_ }}</h3>
+                </div>
+                <div class="box-body">
+                    <p>
+                        {{ 'export_data_expl'|_ }}
+                    </p>
+                    <form action="{{ route('export.export') }}" method="post">
+                        <input type="hidden" name="_token" value="{{ csrf_token() }}"/>
+                        <button type="submit"><span class="fa fa-fw fa-download"></span> {{ 'export_data_all_transactions'|_ }}</button>
+                    </form>
+                    <p>
+                        {{ 'export_data_advanced_expl'|_ }}
+                    </p>
+                </div>
+            </div>
+        </div>
+    </div>
+
+{% endblock %}
+
+{% block styles %}
+{% endblock %}
+
+{% block scripts %}
+{% endblock %}
diff --git a/resources/views/form/amount-no-currency.twig b/resources/views/form/amount-no-currency.twig
new file mode 100644
index 0000000000..411bd76787
--- /dev/null
+++ b/resources/views/form/amount-no-currency.twig
@@ -0,0 +1,8 @@
+<div class="{{ classes }}" id="{{ name }}_holder">
+    <label for="{{ options.id }}" class="col-sm-4 control-label">{{ label }}</label>
+    <div class="col-sm-8">
+        {{ Form.input('number', name, value, options) }}
+        {% include 'form.help' %}
+        {% include 'form.feedback' %}
+    </div>
+</div>
diff --git a/resources/views/form/amount-small.twig b/resources/views/form/amount-small.twig
new file mode 100644
index 0000000000..213c3f25ad
--- /dev/null
+++ b/resources/views/form/amount-small.twig
@@ -0,0 +1,24 @@
+<div class="input-group">
+    <div class="input-group-btn">
+        <button type="button"
+                class="btn btn-default dropdown-toggle currency-dropdown" id="currency_dropdown_{{ name }}" data-toggle="dropdown"
+                aria-expanded="false">
+            <span id="currency_select_symbol_{{ name }}">{{ defaultCurrency.symbol|raw }}</span> <span class="caret"></span>
+        </button>
+        <ul class="dropdown-menu currency-dropdown-menu" role="menu">
+            {% for currency in currencies %}
+                <li>
+                    <a href="#"
+                       class="currency-option"
+                       data-id="{{ currency.id }}"
+                       data-name="{{ name }}"
+                       data-currency="{{ currency.code }}"
+                       data-symbol="{{ currency.symbol|raw }}">{{ currency.name }}</a></li>
+            {% endfor %}
+        </ul>
+    </div>
+    {{ Form.input('number', name, value, options) }}
+
+
+</div>
+<input type="hidden" name="amount_currency_id_{{ name }}" value="{{ defaultCurrency.id }}"/>
diff --git a/resources/views/form/amount.twig b/resources/views/form/amount.twig
new file mode 100644
index 0000000000..4f318676b3
--- /dev/null
+++ b/resources/views/form/amount.twig
@@ -0,0 +1,33 @@
+<div class="{{ classes }}" id="{{ name }}_holder">
+    <label for="{{ options.id }}" class="col-sm-4 control-label">{{ label }}</label>
+
+    <div class="col-sm-8">
+        <div class="input-group">
+            <div class="input-group-btn">
+                <button type="button"
+                        class="btn btn-default dropdown-toggle currency-dropdown" id="currency_dropdown_{{ name }}" data-toggle="dropdown"
+                        aria-expanded="false">
+                    <span id="currency_select_symbol_{{ name }}">{{ defaultCurrency.symbol|raw }}</span> <span class="caret"></span>
+                </button>
+                <ul class="dropdown-menu currency-dropdown-menu" role="menu">
+                    {% for currency in currencies %}
+                        <li>
+                            <a href="#"
+                               class="currency-option"
+                               data-id="{{ currency.id }}"
+                               data-name="{{ name }}"
+                               data-currency="{{ currency.code }}"
+                               data-symbol="{{ currency.symbol|raw }}">{{ currency.name }}</a></li>
+                    {% endfor %}
+                </ul>
+            </div>
+            {{ Form.input('number', name, value, options) }}
+
+
+        </div>
+
+        {% include 'form.feedback' %}
+    </div>
+    <!-- Going to put in this value: {{ defaultCurrency.id }} -->
+    <input type="hidden" name="amount_currency_id_{{ name }}" value="{{ defaultCurrency.id }}" data-backup="{{ defaultCurrency.id }}"/>
+</div>
diff --git a/resources/views/form/assetAccountCheckList.twig b/resources/views/form/assetAccountCheckList.twig
new file mode 100644
index 0000000000..836ab52449
--- /dev/null
+++ b/resources/views/form/assetAccountCheckList.twig
@@ -0,0 +1,24 @@
+<div class="{{ classes }}" id="{{ name }}_holder">
+    <label for="{{ options.id }}" class="col-sm-4 control-label">{{ label }}</label>
+
+    <div class="col-sm-8">
+        {% for groupName, accounts in grouped %}
+            <strong>{{ groupName }}</strong><br />
+            {% for id, account in accounts %}
+                <div class="checkbox" style="margin-left:2em;">
+                    <label>
+                        {% if account in selected or (selected|length == 0 and options.select_all == true) %}
+                            {{ Form.checkbox(name~'[]', id, true, options) }}
+                        {% else %}
+                            {{ Form.checkbox(name~'[]', id, false, options) }}
+                        {% endif %}
+                        {{ account|escape }}
+                    </label>
+                </div>
+            {% endfor %}
+        {% endfor %}
+        {% include 'form.help' %}
+        {% include 'form.feedback' %}
+
+    </div>
+</div>
diff --git a/resources/views/form/balance.twig b/resources/views/form/balance.twig
new file mode 100644
index 0000000000..627bd5ce8c
--- /dev/null
+++ b/resources/views/form/balance.twig
@@ -0,0 +1,33 @@
+<div class="{{ classes }}" id="{{ name }}_holder">
+    <label for="{{ options.id }}" class="col-sm-4 control-label">{{ label }}</label>
+
+    <div class="col-sm-8">
+        <div class="input-group">
+            <div class="input-group-btn">
+                <button type="button"
+                        class="btn btn-default dropdown-toggle currency-dropdown" id="currency_dropdown_{{ name }}" data-toggle="dropdown"
+                        aria-expanded="false">
+                    <span id="currency_select_symbol_{{ name }}">{{ defaultCurrency.symbol|raw }}</span> <span class="caret"></span>
+                </button>
+                <ul class="dropdown-menu currency-dropdown-menu" role="menu">
+                    {% for currency in currencies %}
+                        <li>
+                            <a href="#"
+                               class="currency-option"
+                               data-id="{{ currency.id }}"
+                               data-name="{{ name }}"
+                               data-currency="{{ currency.code }}"
+                               data-symbol="{{ currency.symbol|raw }}">{{ currency.name }}</a></li>
+                    {% endfor %}
+                </ul>
+            </div>
+            {{ Form.input('number', name, value, options) }}
+
+
+        </div>
+
+        {% include 'form.feedback' %}
+    </div>
+
+    <input type="hidden" name="amount_currency_id_{{ name }}" value="{{ defaultCurrency.id }}"/>
+</div>
diff --git a/resources/views/form/checkbox.twig b/resources/views/form/checkbox.twig
new file mode 100644
index 0000000000..e235ffc557
--- /dev/null
+++ b/resources/views/form/checkbox.twig
@@ -0,0 +1,19 @@
+<div class="{{ classes }}" id="{{ name }}_holder">
+    <label for="{{ options.id }}" class="
+    {% if options.small %}
+    col-sm-8
+    {% else %}
+    col-sm-4
+    {% endif %}
+    control-label">{{ label }}</label>
+
+    <div class="{% if options.small %}col-sm-4{% else %}col-sm-8{% endif %}">
+        <div class="checkbox">
+            <label>
+                {{ Form.checkbox(name, value, options.checked, options) }}
+            </label>
+        </div>
+        {% include 'form.help' %}
+        {% include 'form.feedback' %}
+    </div>
+</div>
diff --git a/resources/views/form/date.twig b/resources/views/form/date.twig
new file mode 100644
index 0000000000..4eba6608ea
--- /dev/null
+++ b/resources/views/form/date.twig
@@ -0,0 +1,14 @@
+<div class="{{ classes }}" id="{{ name }}_holder">
+    <label for="{{ options.id }}" class="col-sm-4 control-label">{{ label }}</label>
+
+    <div class="col-sm-8">
+        <div class="input-group">
+            <div class="input-group-addon">
+                <span class="fa fa-calendar"></span>
+            </div>
+            {{ Form.input('date', name, value, options) }}
+        </div>
+        {% include 'form.help' %}
+        {% include 'form.feedback' %}
+    </div>
+</div>
diff --git a/resources/views/form/feedback.twig b/resources/views/form/feedback.twig
new file mode 100644
index 0000000000..64d5875b83
--- /dev/null
+++ b/resources/views/form/feedback.twig
@@ -0,0 +1,4 @@
+{% if errors.has(name) %}
+    <span class="form-control-feedback"><span class="fa fa-fw fa-remove"></span></span>
+    <p class="text-danger">{{ errors.first(name) }}</p>
+{% endif %}
diff --git a/resources/views/form/file.twig b/resources/views/form/file.twig
new file mode 100644
index 0000000000..0533dda5dc
--- /dev/null
+++ b/resources/views/form/file.twig
@@ -0,0 +1,9 @@
+<div class="{{ classes }}" id="{{ name }}_holder">
+    <label for="{{ options.id }}" class="col-sm-4 control-label">{{ label }}</label>
+
+    <div class="col-sm-8">
+        {{ Form.file(name, options) }}
+        {% include 'form.help' %}
+        {% include 'form.feedback' %}
+    </div>
+</div>
diff --git a/resources/views/form/help.twig b/resources/views/form/help.twig
new file mode 100644
index 0000000000..d402fb623b
--- /dev/null
+++ b/resources/views/form/help.twig
@@ -0,0 +1,3 @@
+{% if options.helpText %}
+    <p class="help-block">{{ options.helpText|raw }}</p>
+{% endif %}
diff --git a/resources/views/form/integer.twig b/resources/views/form/integer.twig
new file mode 100644
index 0000000000..1eac145903
--- /dev/null
+++ b/resources/views/form/integer.twig
@@ -0,0 +1,9 @@
+<div class="{{ classes }}" id="{{ name }}_holder">
+    <label for="{{ options.id }}" class="col-sm-4 control-label">{{ label }}</label>
+
+    <div class="col-sm-8">
+        {{ Form.input('number', name, value, options) }}
+        {% include 'form.help' %}
+        {% include 'form.feedback' %}
+    </div>
+</div>
diff --git a/resources/views/form/location.twig b/resources/views/form/location.twig
new file mode 100644
index 0000000000..df18f28068
--- /dev/null
+++ b/resources/views/form/location.twig
@@ -0,0 +1,114 @@
+<div class="{{ classes }}" id="{{ name }}_holder">
+    <label for="{{ options.id }}" class="col-sm-4 control-label">{{ label }}</label>
+    <div class="col-sm-8">
+        {% if config('firefly.mapbox_api_key') == '' %}
+            <p class="text-danger">
+                {{ trans('firefly.mapbox_api_key')|raw }}
+            </p>
+        {% else %}
+            <div id="{{ name }}_map" style="width:100%;height:300px;"></div>
+            <div id="{{ name }}_map_canvas"></div>
+            <p class="help-block">
+                {{ 'press_object_location'|_ }}
+                <button class="btn btn-default btn-xs" type="button" id="{{ name }}_clear_location">{{ 'clear_location'|_ }}</button>
+            </p>
+            {# latitude #}
+            <input type="hidden" name="{{ name }}_latitude" value="{{ options.locations[name].latitude|default('52.3167') }}"/>
+
+            {# longitude #}
+            <input type="hidden" name="{{ name }}_longitude" value="{{ options.locations[name].longitude|default('5.5500') }}"/>
+
+            {# zoomlevel #}
+            <input type="hidden" name="{{ name }}_zoom_level" value="{{ options.locations[name].zoom_level|default('6') }}"/>
+
+            {# has location set? #}
+            <input type="hidden" name="{{ name }}_has_location" value="{{ options.locations[name].has_location|default('false') }}"/>
+            {% include 'form.feedback' %}
+        {% endif %}
+    </div>
+</div>
+
+{% if config('firefly.mapbox_api_key') != '' %}
+    {% set latitudevar = name~'_latitude' %}
+    {% set longitudevar = name~'_longitude' %}
+    {% set zoomlevelvar = name~'_zoom_level' %}
+    {% set haslocationvar = name~'_has_location' %}
+    {% set clearvar = name~'_clear_location' %}
+
+    <script type="text/javascript" nonce="{{ JS_NONCE }}">
+        var mymap;
+        var marker;
+        if (typeof locations.{{ name }}.latitude === 'undefined') {
+            locations.{{ name }}.latitude = '52.3167';
+        }
+        if (typeof locations.{{ name }}.longitude === 'undefined') {
+            locations.{{ name }}.longitude = '5.5500';
+        }
+        if (typeof locations.{{ name }}.zoom_level === 'undefined') {
+            locations.{{ name }}.zoom_level = '6';
+        }
+
+        if (typeof mapboxToken === 'undefined') {
+            var mapboxToken = 'invalid';
+        }
+        window.onload = function () {
+            document.getElementById('{{ clearvar }}').addEventListener('click', function () {
+                if (typeof marker !== 'undefined') {
+                    marker.remove();
+                    $('input[name="{{ haslocationvar }}"]').val('false');
+                    $('input[name="{{ latitudevar }}"]').val('');
+                    $('input[name="{{ longitudevar }}"]').val('');
+                    $('input[name="{{ zoomlevelvar }}"]').val('');
+                }
+            });
+        };
+
+
+        // set location thing:
+        function setObjectLocation(e) {
+            if (typeof e.latlng !== 'undefined') {
+                console.log('Set object location: lat(' + e.latlng.lat + '), long(' + e.latlng.lng + '), zoom (' + mymap.getZoom() + ')');
+                $('input[name="{{ latitudevar }}"]').val(e.latlng.lat);
+                $('input[name="{{ longitudevar }}"]').val(e.latlng.lng);
+                $('input[name="{{ haslocationvar }}"]').val('true');
+            }
+            if (typeof e.latlng === 'undefined') {
+                console.log('Set object zoom level to ' + mymap.getZoom());
+            }
+            $('input[name="{{ zoomlevelvar }}"]').val(mymap.getZoom());
+
+
+            // remove existing marker:
+            if (typeof marker !== 'undefined' && typeof e.latlng !== 'undefined') {
+                marker.remove();
+            }
+            if (typeof e.latlng !== 'undefined') {
+                // new marker
+                marker = L.marker({lat: e.latlng.lat, lng: e.latlng.lng}).addTo(mymap);
+            }
+        }
+
+
+        document.addEventListener("DOMContentLoaded", function () {
+            "use strict";
+
+            // make map:
+            mymap = L.map('{{ name }}_map').setView({lat: locations.{{ name }}.latitude, lng: locations.{{ name }}.longitude}, locations.{{ name }}.zoom_level);
+
+            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png?access_token={accessToken}', {
+                attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+                maxZoom: 18,
+                id: 'mapbox.streets',
+                accessToken: mapboxToken
+            }).addTo(mymap);
+
+            mymap.on('contextmenu', setObjectLocation);
+            mymap.on('zoomend', setObjectLocation);
+
+            // add marker
+            if (typeof locations.{{ name }}.has_location !== 'undefined' && locations.{{ name }}.has_location === true) {
+                marker = L.marker({lat: locations.{{ name }}.latitude, lng: locations.{{ name }}.longitude}).addTo(mymap);
+            }
+        });
+    </script>
+{% endif %}
diff --git a/resources/views/form/non-selectable-amount.twig b/resources/views/form/non-selectable-amount.twig
new file mode 100644
index 0000000000..e9eb950ebf
--- /dev/null
+++ b/resources/views/form/non-selectable-amount.twig
@@ -0,0 +1,11 @@
+<div class="{{ classes }}" id="{{ name }}_holder">
+    <label for="{{ options.id }}" class="col-sm-4 control-label">{{ label }}</label>
+
+    <div class="col-sm-8">
+        <div class="input-group">
+            <span class="input-group-addon non-selectable-currency-symbol">{{ selectedCurrency.symbol }}</span>
+            {{ Form.input('number', name, value, options) }}
+        </div>
+        {% include 'v1.form.feedback' %}
+    </div>
+</div>
diff --git a/resources/views/form/number.twig b/resources/views/form/number.twig
new file mode 100644
index 0000000000..1eac145903
--- /dev/null
+++ b/resources/views/form/number.twig
@@ -0,0 +1,9 @@
+<div class="{{ classes }}" id="{{ name }}_holder">
+    <label for="{{ options.id }}" class="col-sm-4 control-label">{{ label }}</label>
+
+    <div class="col-sm-8">
+        {{ Form.input('number', name, value, options) }}
+        {% include 'form.help' %}
+        {% include 'form.feedback' %}
+    </div>
+</div>
diff --git a/resources/views/form/object_group.twig b/resources/views/form/object_group.twig
new file mode 100644
index 0000000000..565c8332e0
--- /dev/null
+++ b/resources/views/form/object_group.twig
@@ -0,0 +1,9 @@
+<div class="{{ classes }}" id="{{ name }}_holder">
+    <label for="{{ options.id }}" class="col-sm-4 control-label">{{ label }}</label>
+
+    <div class="col-sm-8">
+        {{ Form.input('text', name, value, options) }}
+        {% include 'form.help' %}
+        {% include 'form.feedback' %}
+    </div>
+</div>
diff --git a/resources/views/form/options.twig b/resources/views/form/options.twig
new file mode 100644
index 0000000000..ee638c0460
--- /dev/null
+++ b/resources/views/form/options.twig
@@ -0,0 +1,34 @@
+{% if type == 'create' %}
+    <div class="form-group">
+        <label for="{{ name }}_return_to_form" class="col-sm-4 control-label">
+            {{ trans('form.returnHere') }}
+        </label>
+
+        <div class="col-sm-8">
+            <div class="checkbox">
+                <label>
+                    {{ Form.checkbox('create_another', '1', false, {'id': name ~ '_return_to_form'}) }}
+                    {{ trans('form.returnHereExplanation') }}
+
+                </label>
+            </div>
+        </div>
+    </div>
+{% endif %}
+
+{% if type == 'update' %}
+    <div class="form-group">
+        <label for="{{ name }}_return_to_edit" class="col-sm-4 control-label">
+            {{ trans('form.returnHere') }}
+        </label>
+
+        <div class="col-sm-8">
+            <div class="checkbox"><label>
+                    {{ Form.checkbox('return_to_edit', '1', null, {'id': name ~ '_return_to_edit'}) }}
+                    {{ trans('form.returnHereUpdateExplanation') }}
+                </label>
+            </div>
+        </div>
+    </div>
+{% endif %}
+
diff --git a/resources/views/form/password.twig b/resources/views/form/password.twig
new file mode 100644
index 0000000000..b4536fb876
--- /dev/null
+++ b/resources/views/form/password.twig
@@ -0,0 +1,9 @@
+<div class="{{ classes }}" id="{{ name }}_holder">
+    <label for="{{ options.id }}" class="col-sm-4 control-label">{{ label }}</label>
+
+    <div class="col-sm-8">
+        {{ Form.input('password', name, value, options) }}
+        {% include 'form.help' %}
+        {% include 'form.feedback' %}
+    </div>
+</div>
diff --git a/resources/views/form/percentage.twig b/resources/views/form/percentage.twig
new file mode 100644
index 0000000000..03b5275cbd
--- /dev/null
+++ b/resources/views/form/percentage.twig
@@ -0,0 +1,12 @@
+<div class="{{ classes }}" id="{{ name }}_holder">
+    <label for="{{ options.id }}" class="col-sm-4 control-label">{{ label }}</label>
+
+    <div class="col-sm-8">
+        <div class="input-group">
+            {{ Form.input('number', name, value, options) }}
+            <div class="input-group-addon">%</div>
+        </div>
+        {% include 'form.help' %}
+        {% include 'form.feedback' %}
+    </div>
+</div>
diff --git a/resources/views/form/select.twig b/resources/views/form/select.twig
new file mode 100644
index 0000000000..01d24305fa
--- /dev/null
+++ b/resources/views/form/select.twig
@@ -0,0 +1,10 @@
+<div class="{{ classes }}" id="{{ name }}_holder">
+    <label for="{{ options.id }}" class="col-sm-4 control-label">{{ label }}</label>
+
+    <div class="col-sm-8">
+        {{ Form.select(name, list, selected , options ) }}
+        {% include 'form.help' %}
+        {% include 'form.feedback' %}
+
+    </div>
+</div>
diff --git a/resources/views/form/static.twig b/resources/views/form/static.twig
new file mode 100644
index 0000000000..7600723086
--- /dev/null
+++ b/resources/views/form/static.twig
@@ -0,0 +1,7 @@
+<div class="{{ classes }}" id="{{ name }}_holder">
+    <label for="{{ options.id }}" class="col-sm-4 control-label">{{ label }}</label>
+
+    <div class="col-sm-8">
+        <p class="form-control-static" id="{{ options.id }}">{{ value|raw }}</p>
+    </div>
+</div>
diff --git a/resources/views/form/tags.twig b/resources/views/form/tags.twig
new file mode 100644
index 0000000000..41780c98d4
--- /dev/null
+++ b/resources/views/form/tags.twig
@@ -0,0 +1,8 @@
+<div class="{{ classes }}" id="{{ name }}_holder">
+    <label for="{{ options.id }}" class="col-sm-4 control-label">{{ label }}</label>
+
+    <div class="col-sm-8">
+        {{ Form.input('text', name, value, options) }}
+        {% include 'form.feedback' %}
+    </div>
+</div>
diff --git a/resources/views/form/text.twig b/resources/views/form/text.twig
new file mode 100644
index 0000000000..565c8332e0
--- /dev/null
+++ b/resources/views/form/text.twig
@@ -0,0 +1,9 @@
+<div class="{{ classes }}" id="{{ name }}_holder">
+    <label for="{{ options.id }}" class="col-sm-4 control-label">{{ label }}</label>
+
+    <div class="col-sm-8">
+        {{ Form.input('text', name, value, options) }}
+        {% include 'form.help' %}
+        {% include 'form.feedback' %}
+    </div>
+</div>
diff --git a/resources/views/form/textarea.twig b/resources/views/form/textarea.twig
new file mode 100644
index 0000000000..5c553dc07e
--- /dev/null
+++ b/resources/views/form/textarea.twig
@@ -0,0 +1,9 @@
+<div class="{{ classes }}" id="{{ name }}_holder">
+    <label for="{{ options.id }}" class="col-sm-4 control-label">{{ label }}</label>
+
+    <div class="col-sm-8">
+        {{ Form.textarea(name, value, options) }}
+        {% include 'form.help' %}
+        {% include 'form.feedback' %}
+    </div>
+</div>
diff --git a/resources/views/index.twig b/resources/views/index.twig
new file mode 100644
index 0000000000..254bd66297
--- /dev/null
+++ b/resources/views/index.twig
@@ -0,0 +1,191 @@
+{% extends "./layout/default" %}
+
+{% block breadcrumbs %}
+    {{ Breadcrumbs.render }}
+{% endblock %}
+{% block content %}
+    {% include 'v1.partials.boxes' %}
+    <div class="row">
+        <div class="col-lg-8 col-md-12 col-sm-12">
+            {# ACCOUNTS #}
+            <div class="box box-primary">
+                <div class="box-header with-border">
+                    <h3 class="box-title"><a href="{{ route('accounts.index',['asset']) }}" title="{{ 'yourAccounts'|_ }}">{{ 'yourAccounts'|_ }}</a></h3>
+                </div>
+                <div class="box-body">
+                    <canvas id="accounts-chart" style="width:100%;height:400px;" height="400" width="100%"></canvas>
+                </div>
+                <div class="box-footer">
+                    <a href="{{ route('accounts.index','asset') }}" class="btn btn-default button-sm"><span
+                                class="fa fa-money"></span> {{ 'go_to_asset_accounts'|_ }}</a>
+                </div>
+            </div>
+
+            {# BUDGETS #}
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title"><a href="{{ route('budgets.index') }}" title="{{ 'budgetsAndSpending'|_ }}">{{ 'budgetsAndSpending'|_ }}</a></h3>
+                </div>
+                <div class="box-body">
+                    <canvas id="budgets-chart" style="width:100%;height:400px;" height="400" width="100%"></canvas>
+                </div>
+                <div class="box-footer">
+                    <a href="{{ route('budgets.index') }}" class="btn btn-default button-sm">
+                        <span class="fa fa-pie-chart"></span>
+                        <span>{{ 'go_to_budgets'|_ }}</span>
+                    </a>
+                </div>
+            </div>
+            {# CATEGORIES #}
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title"><a href="{{ route('categories.index') }}" title="{{ 'categories'|_ }}">{{ 'categories'|_ }}</a></h3>
+
+                </div>
+                <div class="box-body">
+                    <canvas id="categories-chart" style="width:100%;height:400px;" height="400" width="100%"></canvas>
+                </div>
+                <div class="box-footer">
+                    <a href="{{ route('categories.index') }}" class="btn btn-default button-sm">
+                        <span class="fa fa-bookmark"></span>
+                        <span>{{ 'go_to_categories'|_ }}</span>
+                    </a>
+                </div>
+            </div>
+        </div>
+        <div class="col-lg-4 col-md-6 col-sm-12">
+
+            {# TRANSACTIONS #}
+            <div id="all_transactions">
+                {% for data in transactions %}
+                    <div class="box">
+                        <div class="box-header with-border">
+                            <h3 class="box-title"><a href="{{ route('accounts.show', data.account.id) }}">{{ data.account.name }}</a></h3>
+                        </div>
+
+                        {% if data.transactions|length > 0 %}
+                            <div class="box-body no-padding">
+                                {% include 'v1.list.groups-tiny' with {'transactions': data.transactions,'account': data.account} %}
+                            </div>
+                        {% else %}
+                            <div class="box-body">
+                                <p>
+                                    <em>
+                                        {{ trans('firefly.no_transactions_account', {name: data.account.name}) }}
+                                    </em>
+                                </p>
+
+                            </div>
+                        {% endif %}
+
+                        <div class="box-footer clearfix">
+                            <!-- Single button -->
+                            <div class="btn-group">
+                                <a type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                                    {{ 'sidebar_frontpage_create'|_ }} <span class="caret"></span>
+                                </a>
+                                <ul class="dropdown-menu">
+                                    <li><a href="{{ route('transactions.create', ['withdrawal']) }}?source={{ data.account.id }}">{{ 'create_new_withdrawal'|_ }}</a></li>
+                                    <li><a href="{{ route('transactions.create', ['deposit']) }}?destination={{ data.account.id }}">{{ 'create_new_deposit'|_ }}</a></li>
+                                    <li><a href="{{ route('transactions.create', ['transfer']) }}?source={{ data.account.id }}">{{ 'create_new_transfer'|_ }}</a></li>
+                                </ul>
+                            </div>
+                            <div class="btn-group">
+                                <a type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
+                                   href="{{ route('accounts.show', [data.account.id]) }}">{{ formatAmountByAccount(data.account, data.account|balance, false) }}
+                                    <span class="caret"></span>
+                                </a>
+                                <ul class="dropdown-menu">
+                                    <li><a href="{{ route('accounts.show', [data.account.id]) }}">{{ 'show'|_ }}</a></li>
+                                    <li><a href="{{ route('accounts.reconcile', [data.account.id]) }}">{{ 'reconcile'|_ }}</a></li>
+                                    <li><a href="{{ route('accounts.edit', [data.account.id]) }}">{{ 'edit'|_ }}</a></li>
+                                    <li><a href="{{ route('accounts.delete', [data.account.id]) }}">{{ 'delete'|_ }}</a></li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                {% endfor %}
+            </div>
+
+            {% if billCount > 0 %}
+                {# BILLS #}
+                <div class="box">
+                    <div class="box-header with-border">
+                        <h3 class="box-title"><a href="{{ route('bills.index') }}" title="{{ 'bills'|_ }}">{{ 'bills'|_ }}</a></h3>
+
+                    </div>
+                    <div class="box-body">
+                        <div style="width:100%;margin:0 auto;">
+                            <canvas id="bills-chart" style="width:100%;height:200px;" height="200"></canvas>
+                        </div>
+                    </div>
+                    <div class="box-footer">
+                        <a href="{{ route('bills.index') }}" class="btn btn-default button-sm"><span
+                                    class="fa fa-calendar"></span> {{ 'go_to_bills'|_ }}</a>
+                    </div>
+                </div>
+            {% endif %}
+
+            {# box for piggy bank data (JSON) #}
+            <div id="piggy_bank_overview">
+
+            </div>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-lg-12 col-md-12 col-sm-12">
+            {# EXPENSE ACCOUNTS #}
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title"><a href="{{ route('accounts.index',['expense']) }}"
+                                             title="{{ 'expense_accounts'|_ }}">{{ 'expense_accounts'|_ }}</a>
+                    </h3>
+                </div>
+                <div class="box-body">
+                    <canvas id="expense-accounts-chart" style="width:100%;height:400px;" height="400" width="100%"></canvas>
+                </div>
+                <div class="box-footer">
+                    <a href="{{ route('accounts.index', ['expense']) }}" class="btn btn-default button-sm"><span
+                                class="fa fa-shopping-cart"></span> {{ 'go_to_expense_accounts'|_ }}</a>
+                </div>
+            </div>
+            {# OPTIONAL REVENUE ACCOUNTS #}
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title"><a href="{{ route('accounts.index',['revenue']) }}"
+                                             title="{{ 'revenue_accounts'|_ }}">{{ 'revenue_accounts'|_ }}</a></h3>
+
+                </div>
+                <div class="box-body">
+                    <canvas id="revenue-accounts-chart" style="width:100%;height:400px;" height="400" width="100%"></canvas>
+                </div>
+                <div class="box-footer">
+                    <a href="{{ route('accounts.index', ['revenue']) }}" class="btn btn-default button-sm"><span
+                                class="fa fa-download"></span> {{ 'go_to_revenue_accounts'|_ }}</a>
+                </div>
+            </div>
+        </div>
+    </div>
+{% endblock %}
+{% block scripts %}
+    <script type="text/javascript" nonce="{{ JS_NONCE }}">
+        var billCount = {{ billCount }};
+        var accountFrontpageUri = '{{ route('chart.account.frontpage') }}';
+        var accountRevenueUri = '{{ route('chart.account.revenue') }}';
+        var accountExpenseUri = '{{ route('chart.account.expense') }}';
+        var piggyInfoUri = '{{ route('json.fp.piggy-banks') }}';
+        var drawVerticalLine = '';
+        {# render vertical line with text "today"  #}
+        {% if start.lte(today) and end.gte(today) %}
+        drawVerticalLine = '{{ today.formatLocalized(monthAndDayFormat) }}';
+        {% endif %}
+    </script>
+
+    <script type="text/javascript" src="v1/js/lib/Chart.bundle.min.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/lib/chartjs-plugin-annotation.min.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/ff/charts.defaults.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/ff/charts.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/ff/index.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+{% endblock %}
+{% block styles %}
+{% endblock %}
diff --git a/resources/views/install/index.twig b/resources/views/install/index.twig
new file mode 100644
index 0000000000..38ce44ef28
--- /dev/null
+++ b/resources/views/install/index.twig
@@ -0,0 +1,24 @@
+{% extends "./v1/layout/install" %}
+
+{% block content %}
+    <div class="login-box-body">
+        <p class="login-box-msg">Please wait...</p>
+        <div class="row">
+            <div class="col-lg-12">
+                <div id="status-box" style="border:1px #ddd solid;padding:5px;">
+                    <span class="fa fa-spin fa-spinner"></span> Waiting to start...
+                </div>
+            </div>
+        </div>
+    </div>
+{% endblock %}
+{% block scripts %}
+    <script type="text/javascript" nonce="{{ JS_NONCE }}">
+        var token = '{{ csrf_token() }}';
+        var index = 0;
+        var runCommandUri = '{{ route('installer.runCommand') }}';
+        var homeUri = '{{ route('flush') }}';
+    </script>
+    <script type="text/javascript" src="v1/js/ff/install/index.js" nonce="{{ JS_NONCE }}"></script>
+{% endblock %}
+
diff --git a/resources/views/javascript/accounts.twig b/resources/views/javascript/accounts.twig
new file mode 100644
index 0000000000..9382fdbd6a
--- /dev/null
+++ b/resources/views/javascript/accounts.twig
@@ -0,0 +1,4 @@
+var accountInfo = [];
+{% for id, account in accounts %}
+    accountInfo[{{ id }}] = {preferredCurrency: {{ account.preferredCurrency }}, name: "{{ account.name }}"};
+{% endfor %}
diff --git a/resources/views/javascript/currencies.twig b/resources/views/javascript/currencies.twig
new file mode 100644
index 0000000000..12e04fcd9a
--- /dev/null
+++ b/resources/views/javascript/currencies.twig
@@ -0,0 +1,4 @@
+var currencyInfo = [];
+{% for id, currency in currencies %}
+    currencyInfo[{{ id }}] = {name: "{{ currency.name }}", symbol: "{{ currency.symbol }}", code: "{{ currency.code }}"};
+{% endfor %}
diff --git a/resources/views/javascript/variables.twig b/resources/views/javascript/variables.twig
new file mode 100644
index 0000000000..2efd9f9125
--- /dev/null
+++ b/resources/views/javascript/variables.twig
@@ -0,0 +1,66 @@
+// date ranges
+var ranges = {};
+{% for title, range in dateRangeConfig.ranges %}
+    ranges["{{ title }}"] = [moment("{{ range[0].format('Y-m-d') }}"), moment("{{ range[1].format('Y-m-d') }}")];
+{% endfor %}
+
+// date range meta configuration
+var dateRangeMeta = {
+title: "{{ dateRangeTitle }}",
+uri: "{{ route('daterange') }}",
+labels: {
+apply: "{{ 'apply'|_ }}",
+cancel: "{{ 'cancel'|_ }}",
+from: "{{ 'from'|_ }}",
+to: "{{ 'to'|_ }}",
+customRange: "{{ 'customRange'|_ }}"
+}
+};
+
+// date range actual configuration:
+var dateRangeConfig = {
+startDate: moment("{{ dateRangeConfig.start }}"),
+endDate: moment("{{ dateRangeConfig.end }}"),
+ranges: ranges
+
+};
+
+var uid = "{{ uid }}";
+var language = "{{ language|escape }}";
+var locale = "{{ locale|escape }}";
+var currencyCode = '{{ currencyCode|escape('js') }}';
+var currencySymbol = '{{ currencySymbol|escape('js') }}';
+var mon_decimal_point = "{{ accountingLocaleInfo.mon_decimal_point|escape('js') }}";
+var mon_thousands_sep = "{{ accountingLocaleInfo.mon_thousands_sep|escape('js') }}";
+var frac_digits = {{ accountingLocaleInfo.frac_digits|default('0') }};
+var noDataForChart = '{{ trans('firefly.no_data_for_chart')|escape('js') }}';
+var showFullList = '{{ trans('firefly.show_full_list')|escape('js') }}';
+var showOnlyTop = '{{ trans('firefly.show_only_top',{number:listLength})|escape('js') }}';
+var accountingConfig = {{ accountingLocaleInfo.format|json_encode|raw }};
+var token = '{{ csrf_token() }}';
+var sessionStart = '{{ session('start').format('Y-m-d') }}';
+var sessionEnd = '{{ session('end').format('Y-m-d') }}';
+var todayText = ' {{ trans('firefly.today')|escape('js') }}';
+
+// some formatting stuff:
+var month_and_day_js = "{{ trans('config.month_and_day_js') }}";
+var acc_config_new = {format: accountingConfig};
+
+// strings and translations used often:
+var helpPageTitle = "{{ trans('firefly.help_for_this_page')|escape('js') }}";
+var noHelpForPage = "{{ trans('firefly.no_help_could_be_found')|escape('js') }}";
+var noHelpForPageTitle = "{{ trans('firefly.no_help_title')|escape('js') }}";
+
+var edit_selected_txt = "{{ trans('firefly.mass_edit')|escape('js') }}";
+var edit_bulk_selected_txt = "{{ trans('firefly.bulk_edit')|escape('js') }}";
+var delete_selected_txt = "{{ trans('firefly.mass_delete')|escape('js') }}";
+
+var mass_edit_url   = '{{ route('transactions.mass.edit', ['']) }}';
+var bulk_edit_url   = '{{ route('transactions.bulk.edit', ['']) }}';
+var mass_delete_url = '{{ route('transactions.mass.delete', ['']) }}';
+
+// for demo:
+var nextLabel = "{{ trans('firefly.intro_next_label')|escape('js') }}";
+var prevLabel = "{{ trans('firefly.intro_prev_label')|escape('js') }}";
+var skipLabel = "{{ trans('firefly.intro_skip_label')|escape('js') }}";
+var doneLabel = "{{ trans('firefly.intro_done_label')|escape('js') }}";
diff --git a/resources/views/json/piggy-banks.twig b/resources/views/json/piggy-banks.twig
new file mode 100644
index 0000000000..3938f4a3ad
--- /dev/null
+++ b/resources/views/json/piggy-banks.twig
@@ -0,0 +1,22 @@
+<div class="box">
+    <div class="box-header with-border">
+        <h3 class="box-title"><a href="{{ route('piggy-banks.index') }}" title="{{ 'piggyBanks'|_ }}">{{ 'piggyBanks'|_ }}</a></h3>
+
+    </div>
+    <div class="box-body">
+        {% for entry in info %}
+            <strong>{{ entry.name }}</strong><br/>
+            <div class="progress">
+                <div class="progress-bar" role="progressbar" aria-valuenow="{{ entry.percentage }}" aria-valuemin="0" aria-valuemax="100"
+                     style="width: {{ entry.percentage }}%;">
+                    {% if entry.percentage >=20 %}{{ entry.amount|formatAmountPlain }}{% endif %}
+                </div>
+                {% if entry.percentage < 20 %}&nbsp;{{ entry.amount|formatAmountPlain }}{% endif %}
+            </div>
+        {% endfor %}
+    </div>
+    <div class="box-footer">
+        <a href="{{ route('piggy-banks.index') }}" class="btn btn-default button-sm"><span
+                    class="fa fa-download"></span> {{ 'go_to_piggies'|_ }}</a>
+    </div>
+</div>
diff --git a/resources/views/layout/default.twig b/resources/views/layout/default.twig
new file mode 100644
index 0000000000..02edacd333
--- /dev/null
+++ b/resources/views/layout/default.twig
@@ -0,0 +1,247 @@
+<!DOCTYPE html>
+<html lang="{{ trans('config.html_language') }}">
+<head>
+    <base href="{{ route('index') }}/">
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="csrf-token" content="{{ csrf_token() }}">
+    <meta name="robots" content="noindex, nofollow, noarchive, noodp, NoImageIndex, noydir">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+
+    <title>
+        {% if subTitle %}
+            {{ subTitle }} »
+        {% endif %}
+        {% if title != "Firefly III" %}
+            {{ title }} »
+        {% endif %}
+
+        Firefly III
+
+    </title>
+    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
+    {# CSS things #}
+    {# libraries #}
+    <link href="v1/lib/bs/css/bootstrap.min.css?v={{ FF_VERSION }}" rel="stylesheet" type="text/css" nonce="{{ JS_NONCE }}">
+    <link href="v1/lib/fa/css/font-awesome.min.css?v={{ FF_VERSION }}" rel="stylesheet" type="text/css" nonce="{{ JS_NONCE }}">
+    <link href="v1/css/daterangepicker.css?v={{ FF_VERSION }}" rel="stylesheet" type="text/css" nonce="{{ JS_NONCE }}">
+
+    {# the theme #}
+    <link href="v1/lib/adminlte/css/AdminLTE.min.css?v={{ FF_VERSION }}" rel="stylesheet" type="text/css" nonce="{{ JS_NONCE }}">
+    <link href="v1/lib/adminlte/css/skins/skin-blue-light.min.css?v={{ FF_VERSION }}" rel="stylesheet" type="text/css" nonce="{{ JS_NONCE }}">
+
+    {# Firefly III customisations #}
+    <link href="v1/css/firefly.css?v={{ FF_VERSION }}" rel="stylesheet" type="text/css" nonce="{{ JS_NONCE }}">
+
+    {# Extra CSS for the demo: #}
+    {% if not shownDemo %}
+        <link href="v1/lib/intro/introjs.min.css?v={{ FF_VERSION }}" rel="stylesheet" type="text/css" nonce="{{ JS_NONCE }}">
+    {% endif %}
+
+    {# Any local custom CSS.  #}
+    {% block styles %}{% endblock %}
+    <!--[if lt IE 9]>
+    <script src="v1/js/lib/html5shiv.min.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script src="v1/js/lib/respond.min.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <![endif]-->
+
+    {# this entry is in the header so it's loaded early #}
+    <script type="text/javascript" nonce="{{ JS_NONCE }}">var forceDemoOff = false;</script>
+
+    {# favicons #}
+    {% include 'partials.favicons' %}
+
+</head>
+<body class="skin-blue-light sidebar-mini hold-transition">
+<div class="wrapper" id="app">
+
+    <header class="main-header">
+
+        {# Logo #}
+        <a href="{{ route('index') }}" class="logo">
+            {# mini logo for sidebar mini 50x50 pixels #}
+            <span class="logo-mini">FF</span>
+            {# logo for regular state and mobile devices #}
+            <span class="logo-lg"><b>Firefly</b>III</span>
+        </a>
+
+        <nav class="navbar navbar-static-top" role="navigation">
+            <a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
+                <span class="sr-only">{{ 'toggleNavigation'|_ }}</span>
+            </a>
+            <div class="navbar-custom-menu">
+                <ul class="nav navbar-nav">
+
+                    <li class="hidden-sm hidden-xs">
+                        <a href="#" id="help" data-route="{{ original_route_name }}" data-extra="{{ objectType|default("") }}">
+                            <span class="fa fa-question-circle" data-route="{{ original_route_name }}" data-extra="{{ objectType|default("") }}"></span>
+                        </a>
+                    </li>
+
+                    <li>
+                        <span style="color:#fff;padding: 15px;display: block;line-height: 20px;">
+                            <span id="daterange"></span>
+                        </span>
+                    </li>
+
+                    <li class="dropdown user user-menu">
+                    <span style="cursor:default;color:#fff;padding: 15px;display: block;line-height: 20px;">
+                        <span class="hidden-xs">{{ Auth.user.email }}</span>
+                    </span>
+                    </li>
+                    <li id="sidebar-toggle">
+                        <a href="#" data-toggle="control-sidebar"><span class="fa fa-plus-circle"></span></a>
+                    </li>
+                </ul>
+            </div>
+
+        </nav>
+    </header>
+    <aside class="main-sidebar">
+        <section class="sidebar">
+            <form action="{{ route('search.index') }}" method="get" class="sidebar-form">
+                <div class="input-group">
+                    <input autocomplete="off" type="text" name="search" class="form-control" placeholder="{{ 'searchPlaceholder'|_ }}" value="{{ query }}"/>
+                    <span class="input-group-btn">
+                <button type='submit' name='go' id='search-btn' class="btn btn-flat"><span class="fa fa-search"></span></button>
+              </span>
+                </div>
+            </form>
+            {% include('partials.menu-sidebar') %}
+        </section>
+    </aside>
+
+    <div class="content-wrapper">
+        <section class="content-header">
+            {% include('partials.page-header') %}
+            {% block breadcrumbs %}{% endblock %}
+        </section>
+
+        <section class="content">
+            {% if IS_DEMO_SITE %}
+                <div class="row no-print">
+                    <div class="col-lg-12">
+                        <p class="well">
+                            {% include ['demo.' ~ Route.getCurrentRoute.getName, 'demo.no-demo-text'] %}
+                        </p>
+                    </div>
+                </div>
+            {% endif %}
+
+            {% include('partials.flashes') %}
+
+            {% block content %}{% endblock %}
+        </section>
+    </div>
+    <footer class="main-footer">
+        <div class="pull-right">
+            <b class="hidden-xs">{{ 'version'|_ }}</b> <a href="{{ route('debug') }}">{{ Config.get('firefly.version') }}</a>
+        </div>
+        <strong><a href="https://github.com/firefly-iii/firefly-iii">Firefly III</a></strong>
+        <small class="text-muted">&copy; James Cole, <a href="https://www.gnu.org/licenses/agpl-3.0.html">AGPL-3.0-or-later</a>.</small>
+        {% if FF_IS_ALPHA %}<small class="text-danger hidden-xs"><br>{{ 'is_alpha_warning'|_ }}</small>{% endif %}
+        {% if FF_IS_BETA %}<small class="text-warning hidden-xs"><br>{{ 'is_beta_warning'|_ }}</small>{% endif %}
+    </footer>
+
+    {% include('partials.control-bar') %}
+
+</div>
+<div class="modal fade" id="defaultModal" tabindex="-1" role="dialog">
+</div>
+
+<div class="modal fade" tabindex="-1" role="dialog" id="helpModal">
+    <div class="modal-dialog modal-lg">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h4 class="modal-title" id="helpTitle">&nbsp;</h4>
+            </div>
+            <div class="modal-body" id="helpBody">&nbsp;</div>
+            <div class="modal-footer">
+                <small class="pull-left">
+                    {{ 'need_more_help'|_ }}
+                </small>
+                <br/>
+                <small class="pull-left">
+                    {{ trans('firefly.reenable_intro_text')|raw }}
+                </small>
+                <button type="button" class="btn btn-default" data-dismiss="modal">{{ 'close'|_ }}</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+{# Java libraries and stuff: #}
+
+{% block definitions %}{% endblock %}
+
+{# Moment JS #}
+<script src="v1/js/lib/moment.min.js?v={{ FF_VERSION }}" type="text/javascript" nonce="{{ JS_NONCE }}"></script>
+<script src="v1/js/lib/moment/{{ language }}.js?v={{ FF_VERSION }}" type="text/javascript" nonce="{{ JS_NONCE }}"></script>
+
+{# All kinds of variables. #}
+<script src="{{ route('javascript.variables') }}?ext=.js&amp;v={{ FF_VERSION }}{% if account %}&amp;account={{ account.id }}{% endif %}" type="text/javascript" nonce="{{ JS_NONCE }}"></script>
+
+{# Base script: jquery and bootstrap #}
+<script src="v1/js/app.js?v={{ FF_VERSION }}" type="text/javascript" nonce="{{ JS_NONCE }}"></script>
+
+{# Vue scripts and components. Only loaded when needed #}
+{% if VUE_SCRIPT_NAME %}
+    <script src="v1/js/app_vue.js?v={{ FF_VERSION }}" type="text/javascript" nonce="{{ JS_NONCE }}"></script>
+    <script src="v1/js/{{ VUE_SCRIPT_NAME }}.js?v={{ FF_VERSION }}" type="text/javascript" nonce="{{ JS_NONCE }}"></script>
+{% endif %}
+
+{# date range picker, current template, etc.#}
+<script src="v1/js/lib/daterangepicker.js?v={{ FF_VERSION }}" type="text/javascript" nonce="{{ JS_NONCE }}"></script>
+<script src="v1/lib/adminlte/js/adminlte.min.js?v={{ FF_VERSION }}" type="text/javascript" nonce="{{ JS_NONCE }}"></script>
+<script type="text/javascript" src="v1/js/lib/accounting.min.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+
+{# Firefly III code#}
+<script type="text/javascript" src="v1/js/ff/firefly.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+<script type="text/javascript" src="v1/js/ff/help.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+{% if not shownDemo %}
+    <script type="text/javascript" nonce="{{ JS_NONCE }}">
+        var routeForTour = "{{ current_route_name }}";
+        var routeStepsUri = "{{ route('json.intro', [current_route_name, objectType|default("")]) }}";
+        var routeForFinishedTour = "{{ route('json.intro.finished', [current_route_name, objectType|default("")]) }}";
+    </script>
+    <script type="text/javascript" src="v1/lib/intro/intro.min.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/ff/intro/intro.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+{% endif %}
+
+{% block scripts %}{% endblock %}
+
+{% if config('firefly.tracker_site_id') != '' and config('firefly.tracker_url') != '' %}
+    <!-- This tracker tag is only here because this instance of Firefly III was purposefully configured to include it -->
+    <!-- Your own installation will NOT include it, unless you explicitely configure it to have it. -->
+    <script type="text/javascript" nonce="{{ JS_NONCE }}">
+        var _paq = window._paq || [];
+        _paq.push(['trackPageView']);
+        _paq.push(['enableLinkTracking']);
+        (function() {
+            var u="//{{ config('firefly.tracker_url') }}/";
+            _paq.push(['setTrackerUrl', u+'matomo.php']);
+            _paq.push(['setSiteId', '{{ config('firefly.tracker_site_id') }}']);
+            var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
+            g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
+        })();
+    </script>
+    <noscript><p><img src="//{{ config('firefly.tracker_url') }}/matomo.php?idsite={{ config('firefly.tracker_site_id') }}&amp;rec=1" style="border:0;" alt="" /></p></noscript>
+{% endif %}
+
+<script nonce="{{ JS_NONCE }}">
+    // Initialize the service worker
+    if ('serviceWorker' in navigator) {
+        navigator.serviceWorker.register('serviceworker.js?v={{ FF_VERSION }}', {
+            scope: '{{ route('index') }}'
+        }).then(
+            () => console.log('ServiceWorker registration successful'),
+            (err) => console.log('ServiceWorker registration failed: ', err)
+        );
+    }
+</script>
+<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
+    <input type="hidden" name="_token" value="{{ csrf_token() }}" />
+</form>
+
+</body>
+</html>
diff --git a/resources/views/layout/empty.twig b/resources/views/layout/empty.twig
new file mode 100644
index 0000000000..66d336b59c
--- /dev/null
+++ b/resources/views/layout/empty.twig
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="{{ trans('config.html_language') }}">
+<head>
+    <base href="{{ route('index') }}/">
+    <meta charset="UTF-8">
+    <meta name="robots" content="noindex, nofollow, noarchive, noodp, NoImageIndex, noydir">
+    <title>Firefly III</title>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="csrf-token" content="{{ csrf_token() }}">
+    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
+    <meta name="apple-mobile-web-app-capable" content="yes">
+
+    {# CSS things #}
+
+    {# libraries #}
+    <link href="v1/lib/bs/css/bootstrap.min.css?v={{ FF_VERSION }}" rel="stylesheet" type="text/css" nonce="{{ JS_NONCE }}">
+    <link href="v1/lib/fa/css/font-awesome.min.css?v={{ FF_VERSION }}" rel="stylesheet" type="text/css" nonce="{{ JS_NONCE }}">
+    <link href="v1/css/daterangepicker.css?v={{ FF_VERSION }}" rel="stylesheet" type="text/css" nonce="{{ JS_NONCE }}">
+
+    {# the theme #}
+    <link href="v1/lib/adminlte/css/AdminLTE.min.css?v={{ FF_VERSION }}" rel="stylesheet" type="text/css" nonce="{{ JS_NONCE }}">
+    <link href="v1/lib/adminlte/css/skins/skin-blue-light.min.css?v={{ FF_VERSION }}" rel="stylesheet" type="text/css" nonce="{{ JS_NONCE }}">
+
+    {# Firefly III customisations #}
+    <link href="v1/css/firefly.css?v={{ FF_VERSION }}" rel="stylesheet" type="text/css" nonce="{{ JS_NONCE }}">
+
+    <!--[if lt IE 9]>
+    <script src="v1/js/lib/html5shiv.min.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script src="v1/js/lib/respond.min.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <![endif]-->
+
+    {# favicons #}
+    {% include('partials.favicons') %}
+
+</head>
+<body class="login-page">
+<div class="login-box">
+    <div class="login-logo">
+        <a href="{{ route('index') }}"><b>Firefly</b>III</a>
+    </div>
+    {% block content %}{% endblock %}
+</div>
+
+<script src="v1/js/app.js?v={{ FF_VERSION }}" type="text/javascript" nonce="{{ JS_NONCE }}"></script>
+
+{% if config('firefly.tracker_site_id') != '' and config('firefly.tracker_url') != '' %}
+    <!-- This tracker tag is only here because this instance of Firefly III was purposefully configured to include it -->
+    <!-- Your own installation will NOT include it, unless you explicitely configure it to have it. -->
+    <script type="text/javascript" nonce="{{ JS_NONCE }}">
+        var _paq = window._paq || [];
+        _paq.push(['trackPageView']);
+        _paq.push(['enableLinkTracking']);
+        (function() {
+            var u="//{{ config('firefly.tracker_url') }}/";
+            _paq.push(['setTrackerUrl', u+'matomo.php']);
+            _paq.push(['setSiteId', '{{ config('firefly.tracker_site_id') }}']);
+            var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
+            g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
+        })();
+    </script>
+    <noscript><p><img src="//{{ config('firefly.tracker_url') }}/matomo.php?idsite={{ config('firefly.tracker_site_id') }}&amp;rec=1" style="border:0;" alt="" /></p></noscript>
+{% endif %}
+
+<script nonce="{{ JS_NONCE }}">
+    // Initialize the service worker
+    if ('serviceWorker' in navigator) {
+        navigator.serviceWorker.register('serviceworker.js?v={{ FF_VERSION }}', {
+            scope: '{{ route('index') }}'
+        }).then(
+            () => console.log('ServiceWorker registration successful'),
+            (err) => console.log('ServiceWorker registration failed: ', err)
+        );
+    }
+</script>
+
+</body>
+</html>
diff --git a/resources/views/layout/guest.twig b/resources/views/layout/guest.twig
new file mode 100644
index 0000000000..8e2ce34b15
--- /dev/null
+++ b/resources/views/layout/guest.twig
@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html lang="{{ trans('config.html_language') }}">
+<head>
+    <base href="{{ route('index') }}/">
+    <meta charset="UTF-8">
+    <meta name="robots" content="noindex, nofollow, noarchive, noodp, NoImageIndex, noydir">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+
+    <title>Firefly III
+
+        {% if title != "Firefly" and title != "" %}
+            // {{ title }}
+        {% endif %}
+
+        {% if subTitle %}
+            // {{ subTitle }}
+        {% endif %}
+    </title>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="csrf-token" content="{{ csrf_token() }}">
+    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
+
+    {# CSS things #}
+
+    {# libraries #}
+    <link href="v1/lib/bs/css/bootstrap.min.css?v={{ FF_VERSION }}" rel="stylesheet" type="text/css" nonce="{{ JS_NONCE }}">
+    <link href="v1/lib/fa/css/font-awesome.min.css?v={{ FF_VERSION }}" rel="stylesheet" type="text/css" nonce="{{ JS_NONCE }}">
+    <link href="v1/css/daterangepicker.css?v={{ FF_VERSION }}" rel="stylesheet" type="text/css" nonce="{{ JS_NONCE }}">
+
+    {# the theme #}
+    <link href="v1/lib/adminlte/css/AdminLTE.min.css?v={{ FF_VERSION }}" rel="stylesheet" type="text/css" nonce="{{ JS_NONCE }}">
+    <link href="v1/lib/adminlte/css/skins/skin-blue-light.min.css?v={{ FF_VERSION }}" rel="stylesheet" type="text/css" nonce="{{ JS_NONCE }}">
+
+    {# Firefly III customisations #}
+    <link href="v1/css/firefly.css?v={{ FF_VERSION }}" rel="stylesheet" type="text/css" nonce="{{ JS_NONCE }}">
+
+    <!--[if lt IE 9]>
+    <script src="v1/js/lib/html5shiv.min.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script src="v1/js/lib/respond.min.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <![endif]-->
+
+    {# favicons #}
+    {% include('partials.favicons') %}
+
+</head>
+<body class="login-page">
+<div class="login-box">
+    <div class="login-logo">
+        <a href="{{ route('index') }}"><b>Firefly</b>III</a>
+    </div>
+    {% block content %}{% endblock %}
+</div>
+<div class="text-center text-muted">
+    <small>
+        Developed by James Cole, the source code is licensed under the <a href="https://www.gnu.org/licenses/agpl-3.0.html">AGPL-3.0-or-later</a>.
+    </small>
+</div>
+<script src="v1/js/app.js?v={{ FF_VERSION }}" type="text/javascript" nonce="{{ JS_NONCE }}"></script>
+<script type="text/javascript" src="v1/js/ff/guest.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+
+{% if config('firefly.tracker_site_id') != '' and config('firefly.tracker_url') != '' %}
+    <!-- This tracker tag is only here because this instance of Firefly III was purposefully configured to include it -->
+    <!-- Your own installation will NOT include it, unless you explicitely configure it to have it. -->
+    <script type="text/javascript" nonce="{{ JS_NONCE }}">
+        var _paq = window._paq || [];
+        _paq.push(['trackPageView']);
+        _paq.push(['enableLinkTracking']);
+        (function() {
+            var u="//{{ config('firefly.tracker_url') }}/";
+            _paq.push(['setTrackerUrl', u+'matomo.php']);
+            _paq.push(['setSiteId', '{{ config('firefly.tracker_site_id') }}']);
+            var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
+            g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
+        })();
+    </script>
+    <noscript><p><img src="//{{ config('firefly.tracker_url') }}/matomo.php?idsite={{ config('firefly.tracker_site_id') }}&amp;rec=1" style="border:0;" alt="" /></p></noscript>
+{% endif %}
+
+<script nonce="{{ JS_NONCE }}">
+    // Initialize the service worker
+    if ('serviceWorker' in navigator) {
+        navigator.serviceWorker.register('serviceworker.js?v={{ FF_VERSION }}', {
+            scope: '{{ route('index') }}'
+        }).then(
+            () => console.log('ServiceWorker registration successful'),
+            (err) => console.log('ServiceWorker registration failed: ', err)
+        );
+    }
+</script>
+
+</body>
+</html>
diff --git a/resources/views/layout/install.twig b/resources/views/layout/install.twig
new file mode 100644
index 0000000000..459e3f03dd
--- /dev/null
+++ b/resources/views/layout/install.twig
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <base href="{{ route('index') }}/">
+    <meta charset="UTF-8">
+    <meta name="robots" content="noindex, nofollow, noarchive, noodp, NoImageIndex, noydir">
+    <title>Firefly III - Installation and update</title>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="csrf-token" content="{{ csrf_token() }}">
+    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
+    <meta name="apple-mobile-web-app-capable" content="yes">
+
+    {# libraries #}
+    <link href="v1/lib/bs/css/bootstrap.min.css?v={{ FF_VERSION }}" rel="stylesheet" type="text/css" nonce="{{ JS_NONCE }}">
+    <link href="v1/lib/fa/css/font-awesome.min.css?v={{ FF_VERSION }}" rel="stylesheet" type="text/css" nonce="{{ JS_NONCE }}">
+
+    <link href="v1/lib/adminlte/css/AdminLTE.min.css?v={{ FF_VERSION }}" rel="stylesheet" type="text/css" nonce="{{ JS_NONCE }}">
+    <link href="v1/css/firefly.css?v={{ FF_VERSION }}" rel="stylesheet" type="text/css" nonce="{{ JS_NONCE }}">
+
+    <!--[if lt IE 9]>
+    <script src="v1/js/lib/html5shiv.min.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script src="v1/js/lib/respond.min.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <![endif]-->
+
+    {# favicons #}
+    {% include('partials.favicons') %}
+
+</head>
+<body class="login-page">
+<div class="login-box">
+    <div class="login-logo">
+        <b>Firefly</b>III<br />
+        <span style="font-family: monospace;font-size:16pt;">installation and upgrade</span>
+    </div>
+    {% block content %}{% endblock %}
+</div>
+<script src="v1/js/app.js?v={{ FF_VERSION }}" type="text/javascript" nonce="{{ JS_NONCE }}"></script>
+{% block scripts %}{% endblock %}
+
+<script nonce="{{ JS_NONCE }}">
+    // Initialize the service worker
+    if ('serviceWorker' in navigator) {
+        navigator.serviceWorker.register('serviceworker.js?v={{ FF_VERSION }}', {
+            scope: '{{ route('index') }}'
+        }).then(
+            () => console.log('ServiceWorker registration successful'),
+            (err) => console.log('ServiceWorker registration failed: ', err)
+        );
+    }
+</script>
+</body>
+</html>
diff --git a/resources/views/list/accounts.twig b/resources/views/list/accounts.twig
new file mode 100644
index 0000000000..c470d93b5a
--- /dev/null
+++ b/resources/views/list/accounts.twig
@@ -0,0 +1,121 @@
+<div style="padding-left:8px;">
+    {{ accounts.links('pagination.bootstrap-4')|raw }}
+</div>
+<table class="table table-responsive table-hover" id="sortable-table">
+    <thead>
+    <tr>
+        <th class="hidden-sm hidden-xs">&nbsp;</th>
+        <th>{{ trans('list.name') }}</th>
+        {% if objectType == 'asset' %}
+            <th class="hidden-sm hidden-xs hidden-md">{{ trans('list.role') }}</th>
+        {% endif %}
+        {% if objectType == 'liabilities' %}
+            <th>{{ trans('list.liability_type') }}</th>
+            <th>{{ trans('form.liability_direction') }}</th>
+            <th>{{ trans('list.interest') }} ({{ trans('list.interest_period') }})</th>
+        {% endif %}
+        <th class="hidden-sm hidden-xs">{{ trans('form.account_number') }}</th>
+        <th style="text-align: right;">{{ trans('list.currentBalance') }}</th>
+        {% if objectType == 'liabilities' %}
+            <th style="text-align: right;">
+                {{ trans('firefly.left_in_debt') }}
+            </th>
+        {% endif %}
+        <th class="hidden-sm hidden-xs">{{ trans('list.active') }}</th>
+        {# hide last activity to make room for other stuff #}
+        {% if objectType != 'liabilities' %}
+            <th class="hidden-sm hidden-xs hidden-md">{{ trans('list.lastActivity') }}</th>
+        {% endif %}
+        <th style="width:15%;"
+            class="hidden-sm hidden-xs hidden-md">{{ trans('list.balanceDiff') }}</th>
+        <th class="hidden-sm hidden-xs">&nbsp;</th>
+    </tr>
+    </thead>
+    <tbody>
+    {% for account in accounts %}
+        <tr class="sortable-object" data-id="{{ account.id }}" data-order="{{ account.order }}" data-position="{{ loop.index0 }}">
+            <td class="hidden-sm hidden-xs">
+                <span class="fa fa-fw fa-bars object-handle"></span>
+            </td>
+            <td>
+                <a href="{{ route('accounts.show',account.id) }}">{{ account.name }}</a>
+                {% if account.location %}
+                    <span class="fa fa-fw fa-map-marker"></span>
+                {% endif %}
+                {% if account.attachments.count() > 0 %}
+                    <span class="fa fa-fw fa-paperclip"></span>
+                {% endif %}
+            </td>
+            {% if objectType == "asset" %}
+                <td class="hidden-sm hidden-xs hidden-md">
+                    {% for entry in account.accountmeta %}
+                        {% if entry.name == 'account_role' %}
+                            {{ ('account_role_'~entry.data)|_ }}
+                        {% endif %}
+                    {% endfor %}
+                </td>
+            {% endif %}
+            {% if objectType == 'liabilities' %}
+            <td>{{ account.accountTypeString }}</td>
+            <td>{{ trans('firefly.liability_direction_'~account.liability_direction~'_short')  }}</td>
+            <td>{{ account.interest }}% ({{ account.interestPeriod|lower }})</td>
+            {% endif %}
+            <td class="hidden-sm hidden-xs">{{ account.iban }}{% if account.iban == '' %}{{ accountGetMetaField(account, 'account_number') }}{% endif %}</td>
+            <td style="text-align: right;">
+                <span style="margin-right:5px;">
+                {{ formatAmountByAccount(account, account.endBalance) }}
+                </span>
+            </td>
+            {% if objectType == 'liabilities' %}
+            <td style="text-align: right;">
+                {% if '-' != account.current_debt %}
+                    <span class="text-info">{{ formatAmountByAccount(account, account.current_debt, false) }}</span>
+                {% endif %}
+            </td>
+            {% endif %}
+            <td class="hidden-sm hidden-xs">
+                {% if account.active %}
+                    <span class="fa fa-fw fa-check"></span>
+                {% else %}
+                    <span class="fa fa-fw fa-ban"></span>
+                {% endif %}
+            </td>
+            {# hide last activity to make room for other stuff #}
+            {% if objectType != 'liabilities' %}
+                {% if account.lastActivityDate %}
+                    <td class="hidden-sm hidden-xs hidden-md">
+                        <!-- {{ account.lastActivityDate }} -->
+                        {{ account.lastActivityDate.formatLocalized(monthAndDayFormat) }}
+                    </td>
+                {% else %}
+                    <td class="hidden-sm hidden-xs hidden-md">
+                        <em>{{ 'never'|_ }}</em>
+                    </td>
+                {% endif %}
+            {% endif %}
+            <td class="hidden-sm hidden-xs hidden-md" style="text-align: right;">
+                <span style="margin-right:5px;">
+                    {{ formatAmountByAccount(account, account.difference) }}
+                </span>
+            </td>
+            <td class="hidden-sm hidden-xs">
+                <div class="btn-group btn-group-xs pull-right">
+                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                        {{ 'actions'|_ }} <span class="caret"></span></button>
+                    <ul class="dropdown-menu dropdown-menu-right" role="menu">
+                        <li><a href="{{ route('accounts.edit',account.id) }}"><span class="fa fa-fw fa-pencil"></span> {{ 'edit'|_ }}</a></li>
+                        <li><a href="{{ route('accounts.delete',account.id) }}"><span class="fa fa-fw fa-trash"></span> {{ 'delete'|_ }}</a></li>
+                        {% if objectType == 'asset' %}
+                        <li><a href="{{ route('accounts.reconcile',account.id) }}"><span class="fa fa-fw fa-check"></span> {{ 'reconcile_this_account'|_ }}</a></li>
+                        {% endif %}
+                    </ul>
+                </div>
+            </td>
+        </tr>
+
+    {% endfor %}
+    </tbody>
+</table>
+<div style="padding-left:8px;">
+    {{ accounts.links('pagination.bootstrap-4')|raw }}
+</div>
diff --git a/resources/views/list/attachments.twig b/resources/views/list/attachments.twig
new file mode 100644
index 0000000000..e67e669062
--- /dev/null
+++ b/resources/views/list/attachments.twig
@@ -0,0 +1,47 @@
+<table class="table table-responsive table-hover">
+    {% for attachment in attachments %}
+        <tr>
+            <td style="width:120px;">
+                <div class="btn-group btn-group-xs">
+                    <a href="{{ route('attachments.edit', attachment.id) }}" class="btn btn-default"><span
+                                class="fa fa-pencil"></span></a>
+                    <a href="{{ route('attachments.delete', attachment.id) }}" class="btn btn-danger"><span
+                                class="fa fa-trash"></span></a>
+                    {% if attachment.file_exists %}
+                        <a href="{{ route('attachments.download', attachment.id) }}" class="btn btn-default"><span
+                                    class="fa fa-download"></span></a>
+                    {% endif %}
+                    {% if not attachment.file_exists %}
+                        <a href="#" class="btn btn-danger"><span class="fa fa-exclamation-triangle"></span></a>
+                    {% endif %}
+                </div>
+            </td>
+            <td>
+                {% if attachment.file_exists %}
+                    <span class="fa {{ attachment.mime|mimeIcon }}"></span>
+                    <a href="{{ route('attachments.view', attachment.id) }}" title="{{ attachment.filename }}">
+                        {% if attachment.title %}
+                            {{ attachment.title }}
+                        {% else %}
+                            {{ attachment.filename }}
+                        {% endif %}
+                    </a>
+                    ({{ attachment.size|filesize }})
+                    {% if null != attachment.notes_text  and '' != attachment.notes_text %}
+                        {{ attachment.notes_text|default('')|markdown }}
+                    {% endif %}
+                {% endif %}
+                {% if not attachment.file_exists %}
+                    <span class="fa fa-fw fa-exclamation-triangle"></span>
+                    {% if attachment.title %}
+                        {{ attachment.title }}
+                    {% else %}
+                        {{ attachment.filename }}
+                    {% endif %}
+                    <br>
+                    <span class="text-danger">{{ 'attachment_not_found'|_ }}</span>
+                {% endif %}
+            </td>
+        </tr>
+    {% endfor %}
+</table>
diff --git a/resources/views/list/bills.twig b/resources/views/list/bills.twig
new file mode 100644
index 0000000000..47ac1bcfe4
--- /dev/null
+++ b/resources/views/list/bills.twig
@@ -0,0 +1,210 @@
+<div style="padding-left:8px;">
+    {{ paginator.links('pagination.bootstrap-4')|raw }}
+</div>
+<table class="table table-responsive table-hover" id="bill-sortable">
+    <thead>
+    <tr>
+        <th class="hidden-sm hidden-xs">&nbsp;</th>
+        <th class="hidden-sm hidden-xs">&nbsp;</th>
+        <th>{{ trans('list.name') }}</th>
+        <th class="hidden-sm hidden-md hidden-xs">{{ trans('list.linked_to_rules') }}</th>
+        <th style="text-align: right;">{{ trans('list.matchingAmount') }}</th>
+        <th class="hidden-sm hidden-xs">{{ trans('list.paid_current_period') }}</th>
+        <th class="hidden-sm hidden-xs">{{ trans('list.next_expected_match') }}</th>
+        <th class="hidden-sm hidden-xs">{{ trans('list.repeat_freq') }}</th>
+    </tr>
+    </thead>
+    {% for objectGroupOrder, objectGroup in bills %}
+        {% if objectGroup.bills|length > 0 %}
+            <tbody class="bill-connected-list" {% if objectGroupOrder != 0 %}data-title="{{ objectGroup.object_group_title }}" {% else %}data-title=""{% endif %}>
+            <tr>
+                <td class="hidden-sm hidden-xs">&nbsp;</td>
+                <td class="hidden-sm hidden-xs">&nbsp;</td>
+                <td colspan="6"><small>{{ objectGroup.object_group_title }}</small></td>
+            </tr>
+            {% for entry in objectGroup.bills %}
+                <tr class="bill-sortable" data-id="{{ entry.id }}" data-name="{{ entry.name }}" data-order="{{ entry.order }}" data-position="{{ loop.index0 }}">
+                    <td class="hidden-sm hidden-xs">
+                        <span class="fa fa-fw fa-bars bill-handle"></span>
+                    </td>
+                    <td class="hidden-sm hidden-xs">
+                        <div class="btn-group btn-group-xs edit_tr_buttons"><a href="{{ route('bills.edit',entry.id) }}" class="btn btn-default btn-xs"><span
+                                        class="fa fa-fw fa-pencil"></span></a><a href="{{ route('bills.delete',entry.id) }}" class="btn btn-danger btn-xs"><span
+                                        class="fa fa-fw fa-trash-o"></span></a></div>
+                    </td>
+                    <td>
+                        {% if not entry.active %}
+                            <span class="fa fa-fw fa-ban"></span>
+                        {% endif %}
+                        <a href="{{ route('bills.show',entry.id) }}" title="{{ entry.name }}">{{ entry.name }}</a>
+                        {# count attachments #}
+                        {% if entry.attachments.count() > 0 %}
+                            <span class="fa fa-paperclip"></span>
+                        {% endif %}
+
+                    </td>
+                    <td class="hidden-sm hidden-md hidden-xs rules">
+                        {% if entry.rules|length > 0 %}
+                            <ul class="list-unstyled">
+                                {% for rule in entry.rules %}
+                                    <li>
+                                        <a href="{{ route('rules.edit', [rule.id]) }}">
+                                            {{ rule.title }}
+                                        </a>
+                                        {% if not rule.active %}({{ 'list_inactive_rule'|_|lower }}){% endif %}
+                                    </li>
+                                {% endfor %}
+                            </ul>
+                        {% endif %}
+                    </td>
+                    <td style="text-align: right;">
+                <span style="margin-right:5px;"
+                      title="{{ formatAmountBySymbol(entry.amount_min, entry.currency_symbol, entry.currency_decimal_places, false)|escape }} -- {{ formatAmountBySymbol(entry.amount_max, entry.currency_symbol, entry.currency_decimal_places, false)|escape }}"
+                >
+                    ~ {{ formatAmountBySymbol((entry.amount_max + entry.amount_min)/2, entry.currency_symbol, entry.currency_decimal_places) }}
+                </span>
+                    </td>
+
+                    {#
+                    paidDates = 0 (bill not paid in period)
+                    pay_dates  = 0 (bill not expected to be paid in this period)
+                    bill is active.
+                    #}
+                    {% if entry.paid_dates|length == 0 and entry.pay_dates|length == 0 and entry.active %}
+                        <td class="paid_in_period text-muted">
+                            {{ trans('firefly.not_expected_period') }}
+                        </td>
+                        <td class="expected_in_period hidden-sm hidden-xs">
+                            {{ formatDate(entry.next_expected_match, monthAndDayFormat) }}
+                        </td>
+                    {% endif %}
+
+                    {#
+                    paid_dates = 0 (bill not paid in period)
+                    pay_dates  > 0 (bill IS expected to be paid in this period)
+                    bill is active
+                    first pay date is in the past.
+                    #}
+                    {% if entry.paid_dates|length == 0 and entry.pay_dates|length > 0 and entry.active %}
+                        <td class="paid_in_period text-warning">
+                            {{ trans('firefly.bill_expected_date', {date: entry.next_expected_match_diff }) }}
+                        </td>
+                        <td class="expected_in_period hidden-sm hidden-xs">
+                            {% for date in entry.pay_dates %}
+                                {{ formatDate(date, monthAndDayFormat) }}<br>
+                            {% endfor %}
+
+                        </td>
+                    {% endif %}
+
+                    {#
+                    paid_dates >= 0 (bill is paid X times).
+                    Don't care about pay_dates.
+                    #}
+                    {% if entry.paid_dates|length > 0 and entry.active %}
+                        <td class="paid_in_period text-success">
+                            {% for currentPaid in entry.paid_dates %}
+                                <a href="{{ route('transactions.show',currentPaid.transaction_group_id) }}">
+                                    {{ formatDate(currentPaid.date, monthAndDayFormat) }}
+                                </a>
+                                <br/>
+                            {% endfor %}
+                        </td>
+                        <td class="expected_in_period hidden-sm hidden-xs">
+                            {{ formatDate(entry.next_expected_match, monthAndDayFormat) }}
+                        </td>
+                    {% endif %}
+                    {# bill is not active #}
+                    {% if not entry.active %}
+                        <td class="paid_in_period text-muted">
+                            ~
+                        </td>
+                        <td class="expected_in_period text-muted hidden-sm hidden-xs">~</td>
+                    {% endif %}
+                    <td class="hidden-sm hidden-xs">
+                        {{ ('repeat_freq_'~entry.repeat_freq)|_ }}
+                        {% if entry.skip > 0 %}
+                            {{ 'skips_over'|_ }} {{ entry.skip }}
+                        {% endif %}
+                    </td>
+                </tr>
+            {% endfor %}
+            {% for sum in sums[objectGroupOrder] %}
+                {% if '0' != sum.avg %}
+                    <tr>
+                        <td class="hidden-sm hidden-xs">&nbsp;</td> <!-- handle -->
+                        <td class="hidden-sm hidden-xs">&nbsp;</td> <!-- buttons -->
+                        <td colspan="2" style="text-align: right;"> <!-- title -->
+                            <small>{{ 'sum'|_ }} ({{ sum.currency_name }}) ({{ 'active_exp_bills_only'|_ }})</small>
+                        </td>
+                        <td style="text-align: right;"> <!-- amount -->
+                            {{ formatAmountBySymbol(sum.avg, sum.currency_symbol, sum.currency_decimal_places) }}
+                        </td>
+                        <td>&nbsp;</td> <!-- paid in period -->
+                        <td class="hidden-sm hidden-xs">&nbsp;</td> <!-- next expected match -->
+                        <td class="hidden-sm hidden-xs">&nbsp;</td><!-- repeats -->
+                    </tr>
+                {% endif %}
+                {% if '0' != sum.per_period %}
+                    <tr>
+                        <td class="hidden-sm hidden-xs">&nbsp;</td> <!-- handle -->
+                        <td class="hidden-sm hidden-xs">&nbsp;</td> <!-- buttons -->
+                        <td colspan="2" style="text-align: right;"> <!-- title -->
+                            <small>{{ ('per_period_sum_'~sum.period)|_ }} ({{ sum.currency_name }}) ({{ 'active_bills_only'|_ }})</small>
+                        </td>
+                        <td style="text-align: right;"> <!-- amount -->
+                            {{ formatAmountBySymbol(sum.per_period, sum.currency_symbol, sum.currency_decimal_places) }}
+                        </td>
+                        <td>&nbsp;</td> <!-- paid in period -->
+                        <td class="hidden-sm hidden-xs">&nbsp;</td> <!-- next expected match -->
+                        <td class="hidden-sm hidden-xs">&nbsp;</td><!-- repeats -->
+                    </tr>
+                {% endif %}
+            {% endfor %}
+            </tbody>
+        {% endif %}
+    {% endfor %}
+    {% if totals|length > 0 %}
+    <tfoot>
+    <tr>
+        <td colspan="8" style="border-top:1px #777 solid;"></td>
+    </tr>
+    {% for sum in totals %}
+        {% if '0' != sum.avg %}
+            <tr>
+                <td class="hidden-sm hidden-xs">&nbsp;</td> <!-- handle -->
+                <td class="hidden-sm hidden-xs">&nbsp;</td> <!-- buttons -->
+                <td colspan="2" style="text-align: right;"> <!-- title -->
+                    <small>{{ 'sum'|_ }} ({{ sum.currency_name }}) ({{ 'active_exp_bills_only_total'|_ }})</small>
+                </td>
+                <td style="text-align: right;"> <!-- amount -->
+                    {{ formatAmountBySymbol(sum.avg, sum.currency_symbol, sum.currency_decimal_places) }}
+                </td>
+                <td>&nbsp;</td> <!-- paid in period -->
+                <td class="hidden-sm hidden-xs">&nbsp;</td> <!-- next expected match -->
+                <td class="hidden-sm hidden-xs">&nbsp;</td><!-- repeats -->
+            </tr>
+        {% endif %}
+        {% if '0' != sum.per_period %}
+            <tr>
+                <td class="hidden-sm hidden-xs">&nbsp;</td> <!-- handle -->
+                <td class="hidden-sm hidden-xs">&nbsp;</td> <!-- buttons -->
+                <td colspan="2" style="text-align: right;"> <!-- title -->
+                    <small>{{ ('per_period_sum_'~sum.period)|_ }} ({{ sum.currency_name }}) ({{ 'active_bills_only_total'|_ }})</small>
+                </td>
+                <td style="text-align: right;"> <!-- amount -->
+                    {{ formatAmountBySymbol(sum.per_period, sum.currency_symbol, sum.currency_decimal_places) }}
+                </td>
+                <td>&nbsp;</td> <!-- paid in period -->
+                <td class="hidden-sm hidden-xs">&nbsp;</td> <!-- next expected match -->
+                <td class="hidden-sm hidden-xs">&nbsp;</td><!-- repeats -->
+            </tr>
+        {% endif %}
+    {% endfor %}
+    </tfoot>
+    {% endif %}
+
+</table>
+<div style="padding-left:8px;">
+    {{ paginator.links('pagination.bootstrap-4')|raw }}
+</div>
diff --git a/resources/views/list/categories.twig b/resources/views/list/categories.twig
new file mode 100644
index 0000000000..7438f4311e
--- /dev/null
+++ b/resources/views/list/categories.twig
@@ -0,0 +1,47 @@
+<div style="padding-left:8px;">
+    {{ categories.links('pagination.bootstrap-4')|raw }}
+</div>
+<table class="table table-hover sortable">
+    <thead>
+    <tr>
+        <th data-defaultsort="disabled">&nbsp;</th>
+        <th data-defaultsign="az">{{ trans('list.name') }}</th>
+        <th data-defaultsign="month" class="hidden-sm hidden-xs">{{ trans('list.lastActivity') }}</th>
+    </tr>
+    </thead>
+    <tbody>
+    <tr>
+        <td>&nbsp;</td>
+        <td><a href="{{ route('categories.no-category') }}"><em>{{ 'without_category'|_ }}</em></a></td>
+        <td class="hidden-sm hidden-xs">&nbsp;</td>
+    </tr>
+    {% for category in categories %}
+        <tr>
+            <td>
+                <div class="btn-group btn-group-xs">
+                    <a href="{{ route('categories.edit', category.id) }}" class="btn btn-default btn-xs"><span class="fa fa-fw fa-pencil"></span></a>
+                    <a href="{{ route('categories.delete', category.id) }}" class="btn btn-danger btn-xs"><span class="fa fa-fw fa-trash-o"></span></a>
+                </div>
+            </td>
+            <td data-value="{{ category.name }}">
+                <a href="{{ route('categories.show', category.id) }}" title="{{ category.name }}">{{ category.name }}</a>
+                {% if category.attachments.count() > 0 %}
+                    <span class="fa fa-fw fa-paperclip"></span>
+                {% endif %}
+            </td>
+            {% if category.lastActivity %}
+                <td class="hidden-sm hidden-xs" data-value="{{ category.lastActivity.format('Y-m-d H-i-s') }}">
+                    {{ category.lastActivity.formatLocalized(monthAndDayFormat) }}
+                </td>
+            {% else %}
+                <td class="hidden-sm hidden-xs" data-value="0000-00-00 00-00-00">
+                    <em>{{ 'never'|_ }}</em>
+                </td>
+            {% endif %}
+        </tr>
+    {% endfor %}
+    </tbody>
+</table>
+<div style="padding-left:8px;">
+    {{ categories.links('pagination.bootstrap-4')|raw }}
+</div>
diff --git a/resources/views/list/groups-tiny.twig b/resources/views/list/groups-tiny.twig
new file mode 100644
index 0000000000..722f7d2f0a
--- /dev/null
+++ b/resources/views/list/groups-tiny.twig
@@ -0,0 +1,65 @@
+<div class="list-group">
+    {% for transaction in transactions %}
+        <a class="list-group-item" href="{{ route('transactions.show', [transaction.transaction_group_id]) }}">
+            {% if transaction.transaction_group_title %}
+                {{ transaction.transaction_group_title }}:
+            {% endif %}
+            {{ transaction.description }}
+
+            <span class="pull-right small">
+          {% if transaction.transaction_type_type == 'Deposit' %}
+              {{ formatAmountBySymbol(transaction.amount*-1, transaction.currency_symbol, transaction.currency_decimal_places) }}
+              {% if null != transaction.foreign_amount %}
+                  ({{ formatAmountBySymbol(transaction.foreign_amount*-1, transaction.foreign_currency_symbol, transaction.foreign_currency_decimal_places) }})
+              {% endif %}
+          {% elseif transaction.transaction_type_type == 'Transfer' %}
+              <span class="text-info">
+                  {#  transfer away:  #}
+                  {% if transaction.source_account_id == account.id %}
+                      {{ formatAmountBySymbol(transaction.amount, transaction.currency_symbol, transaction.currency_decimal_places, false) }}
+                      {% if null != transaction.foreign_amount %}
+                          ({{ formatAmountBySymbol(transaction.foreign_amount, transaction.foreign_currency_symbol, transaction.foreign_currency_decimal_places, false) }})
+                      {% endif %}
+                  {% else %}
+                      {{ formatAmountBySymbol(transaction.amount*-1, transaction.currency_symbol, transaction.currency_decimal_places, false) }}
+                      {% if null != transaction.foreign_amount %}
+                          ({{ formatAmountBySymbol(transaction.foreign_amount*-1, transaction.foreign_currency_symbol, transaction.foreign_currency_decimal_places, false) }})
+                      {% endif %}
+                  {% endif %}
+
+                  {#  transfer to #}
+            </span>
+          {% elseif transaction.transaction_type_type == 'Opening balance' %}
+              {% if transaction.source_account_type == 'Initial balance account' %}
+                  {{ formatAmountBySymbol(transaction.amount*-1, transaction.currency_symbol, transaction.currency_decimal_places) }}
+                  {% if null != transaction.foreign_amount %}
+                      ({{ formatAmountBySymbol(transaction.foreign_amount*-1, transaction.foreign_currency_symbol, transaction.foreign_currency_decimal_places) }})
+                  {% endif %}
+              {% else %}
+                  {{ formatAmountBySymbol(transaction.amount, transaction.currency_symbol, transaction.currency_decimal_places) }}
+                  {% if null != transaction.foreign_amount %}
+                      ({{ formatAmountBySymbol(transaction.foreign_amount, transaction.foreign_currency_symbol, transaction.foreign_currency_decimal_places) }})
+                  {% endif %}
+              {% endif %}
+          {% elseif transaction.transaction_type_type == 'Reconciliation' %}
+              {% if transaction.source_account_type == 'Reconciliation account' %}
+                  {{ formatAmountBySymbol(transaction.amount*-1, transaction.currency_symbol, transaction.currency_decimal_places) }}
+                  {% if null != transaction.foreign_amount %}
+                      ({{ formatAmountBySymbol(transaction.foreign_amount*-1, transaction.foreign_currency_symbol, transaction.foreign_currency_decimal_places) }})
+                  {% endif %}
+              {% else %}
+                  {{ formatAmountBySymbol(transaction.amount, transaction.currency_symbol, transaction.currency_decimal_places) }}
+                  {% if null != transaction.foreign_amount %}
+                      ({{ formatAmountBySymbol(transaction.foreign_amount, transaction.foreign_currency_symbol, transaction.foreign_currency_decimal_places) }})
+                  {% endif %}
+              {% endif %}
+          {% else %}
+              {{ formatAmountBySymbol(transaction.amount, transaction.currency_symbol, transaction.currency_decimal_places) }}
+              {% if null != transaction.foreign_amount %}
+                  ({{ formatAmountBySymbol(transaction.foreign_amount, transaction.foreign_currency_symbol, transaction.foreign_currency_decimal_places) }})
+              {% endif %}
+          {% endif %}
+                </span>
+        </a>
+    {% endfor %}
+</div>
diff --git a/resources/views/list/groups.twig b/resources/views/list/groups.twig
new file mode 100644
index 0000000000..436cf28129
--- /dev/null
+++ b/resources/views/list/groups.twig
@@ -0,0 +1,314 @@
+<table class="table table-condensed table-hover table-responsive table-sortable">
+    <thead>
+    <tr>
+        {% if showCategory or showBudget %}
+            <td colspan="7" class="no-margin-pagination">{{ groups.links('pagination.bootstrap-4')|raw }}</td>
+        {% else %}
+            <td colspan="6" class="no-margin-pagination">{{ groups.links('pagination.bootstrap-4')|raw }}</td>
+        {% endif %}
+        <td colspan="1" class="hidden-xs">
+            <!-- Single button -->
+            <div class="btn-group btn-group-xs action-menu pull-right" style="display: none;">
+                <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown"
+                        aria-haspopup="true" aria-expanded="false">
+                    {{ 'actions'|_ }} <span class="caret"></span>
+                </button>
+                <ul class="dropdown-menu dropdown-menu-right">
+                    <li><a href="#" class="mass-edit"><span class="fa fa-fw fa-pencil"></span>
+                            <span class="txt">{{ 'mass_edit'|_ }}</span></a></li>
+                    <li><a href="#" class="bulk-edit"><span class="fa fa-fw fa-pencil-square-o"></span>
+                            <span class="txt">{{ 'bulk_edit'|_ }}</span></a></li>
+                    <li><a href="#" class="mass-delete"><span class="fa fa-fw fa-trash"></span>
+                            <span class="txt">{{ 'mass_delete'|_ }}</span></a></li>
+                </ul>
+            </div>
+        </td>
+        <td colspan="1" class="hidden-xs">
+            <div class="pull-right">
+                <input id="list_ALL" value="1" name="select-all" type="checkbox" class="select-all form-check-inline"/>
+            </div>
+        </td>
+    </tr>
+    <tr>
+        <th class="hidden-xs">&nbsp;</th>
+        <th>{{ trans('list.description') }}</th>
+        <th>{{ trans('list.amount') }}</th>
+        <th class="hidden-xs">{{ trans('list.date') }}</th>
+        <th>{{ trans('list.source_account') }}</th>
+        <th>{{ trans('list.destination_account') }}</th>
+        {% if showCategory %}
+            <th class="hidden-xs">{{ trans('list.category') }}</th>
+        {% endif %}
+        {% if showBudget %}
+            <th class="hidden-xs">{{ trans('list.budget') }}</th>
+        {% endif %}
+        <th class="hidden-xs">&nbsp;</th><!-- actions -->
+        <th class="hidden-xs">&nbsp;</th><!-- checkbox -->
+    </tr>
+    </thead>
+    <tbody>
+    {% for group in groups %}
+        {% if group.count > 1 %}
+            <tr style="border-top:1px #aaa solid;" class="unsortable">
+                <td colspan="2" style="border-top:1px #aaa solid;">
+                    <small><strong>
+                            <a href="{{ route('transactions.show', [group.id]) }}"
+                               title="{{ group.title }}">{{ group.title }}</a>
+                        </strong></small>
+                </td>
+                <td colspan="2" style="border-top:1px #aaa solid;">
+                    {% for sum in group.sums %}
+                        {% if group.transaction_type == 'Deposit' %}
+                            {{ formatAmountBySymbol(sum.amount*-1, sum.currency_symbol, sum.currency_decimal_places) }}{% if loop.index != group.sums|length %},{% endif %}
+                        {% elseif group.transaction_type == 'Transfer' %}
+                            <span class="text-info">
+                            {{ formatAmountBySymbol(sum.amount*-1, sum.currency_symbol, sum.currency_decimal_places, false) }}{% if loop.index != group.sums|length %},{% endif %}X
+                            </span>
+                        {% else %}
+                            {{ formatAmountBySymbol(sum.amount, sum.currency_symbol, sum.currency_decimal_places) }}{% if loop.index != group.sums|length %},{% endif %}
+                        {% endif %}
+                    {% endfor %}
+                </td>
+                <!-- column to span accounts + extra fields -->
+                {% if showCategory or showBudget %}
+                    <td style="border-top:1px #aaa solid;" colspan="3">&nbsp;</td>
+                {% else %}
+                    <td style="border-top:1px #aaa solid;" colspan="2">&nbsp;</td>
+                {% endif %}
+                <td style="border-top:1px #aaa solid;" class="hidden-xs">
+                    <div class="btn-group btn-group-xs pull-right">
+                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
+                                aria-haspopup="true" aria-expanded="false">
+                            {{ 'actions'|_ }} <span class="caret"></span></button>
+                        <ul class="dropdown-menu dropdown-menu-right" role="menu">
+                            <li><a href="{{ route('transactions.edit', [group.id]) }}"><span
+                                            class="fa fa-fw fa-pencil"></span> {{ 'edit'|_ }}</a></li>
+                            <li><a href="{{ route('transactions.delete', [group.id]) }}"><span
+                                            class="fa fa-fw fa-trash"></span> {{ 'delete'|_ }}</a></li>
+                            <li><a href="#" data-id="{{ group.id }}" class="clone-transaction"><span
+                                            class="fa fa-copy fa-fw"></span> {{ 'clone'|_ }}</a></li>
+                        </ul>
+                    </div>
+                </td>
+                <td style="border-top:1px #aaa solid;" class="hidden-xs">&nbsp;</td>
+            </tr>
+        {% endif %}
+        {% for index, transaction in group.transactions %}
+            {% set style="" %}
+            {% if group.transactions|length == loop.index and group.count > 1 %}
+                {% set style="border-bottom:1px #aaa solid;" %}
+            {% endif %}
+            <tr data-date="{{ transaction.date.format('Y-m-d') }}" data-count="{{ group.count }}" data-id="{{ group.id }}">
+                <td style=" {{ style|raw }}" class="hidden-xs">
+                    {% if transaction.transaction_type_type == 'Withdrawal' %}
+                        <span class="object-handle fa fa-long-arrow-left fa-fw" title="{{ trans('firefly.Withdrawal') }}"></span>
+                    {% endif %}
+
+                    {% if transaction.transaction_type_type == 'Deposit' %}
+                        <span class="object-handle fa fa-long-arrow-right fa-fw" title="{{ trans('firefly.Deposit') }}"></span>
+                    {% endif %}
+
+                    {% if transaction.transaction_type_type == 'Transfer' %}
+                        <span class="object-handle fa fa-exchange fa-fw" title="{{ trans('firefly.Transfer') }}"></span>
+                    {% endif %}
+
+                    {% if transaction.transaction_type_type == 'Reconciliation' %}
+                        <span class="object-handle fa-fw fa fa-calculator" title="{{ trans('firefly.reconciliation_transaction') }}"></span>
+                    {% endif %}
+                    {% if transaction.transaction_type_type == 'Opening balance' %}
+                        <span class="object-handle fa-fw fa fa-star-o" title="{{ trans('firefly.Opening balance') }}"></span>
+                    {% endif %}
+                    {% if transaction.transaction_type_type == 'Liability credit' %}
+                        <span class="object-handle fa-fw fa fa-star-o" title="{{ trans('firefly.Liability credit') }}"></span>
+                    {% endif %}
+
+                </td>
+                <td style=" {{ style|raw }}">
+                    {% if transaction.reconciled %}
+                        <span class="fa fa-check"></span>
+                    {% endif %}
+                    {% if transaction.attachments|length > 0 %}
+                        <span class="fa fa-paperclip"></span>
+                    {% endif %}
+                    {% if group.count == 1 %}
+                    <a href="{{ route('transactions.show', [group.id]) }}" title="{{ transaction.description }}">
+                        {% endif %}
+                        {{ transaction.description }}
+                        {% if group.count == 1 %}
+                    </a>
+                    {% endif %}
+                </td>
+                <td style=" {{ style|raw }}">
+                    {#  deposit #}
+                    {% if transaction.transaction_type_type == 'Deposit' %}
+                        {{ formatAmountBySymbol(transaction.amount*-1, transaction.currency_symbol, transaction.currency_decimal_places) }}
+                        {% if null != transaction.foreign_amount %}
+                            ({{ formatAmountBySymbol(transaction.foreign_amount*-1, transaction.foreign_currency_symbol, transaction.foreign_currency_decimal_places) }})
+                        {% endif %}
+                    {# transfer #}
+                    {% elseif transaction.transaction_type_type == 'Transfer' %}
+                        <span class="text-info">
+                        {{ formatAmountBySymbol(transaction.amount*-1, transaction.currency_symbol, transaction.currency_decimal_places, false) }}
+                            {% if null != transaction.foreign_amount %}
+                                ({{ formatAmountBySymbol(transaction.foreign_amount*-1, transaction.foreign_currency_symbol, transaction.foreign_currency_decimal_places, false) }})
+                            {% endif %}
+                            </span>
+                    {# opening balance #}
+                    {% elseif transaction.transaction_type_type == 'Opening balance' %}
+                        {% if transaction.source_account_type == 'Initial balance account' %}
+                            {{ formatAmountBySymbol(transaction.amount*-1, transaction.currency_symbol, transaction.currency_decimal_places) }}
+                            {% if null != transaction.foreign_amount %}
+                                ({{ formatAmountBySymbol(transaction.foreign_amount*-1, transaction.foreign_currency_symbol, transaction.foreign_currency_decimal_places) }})
+                            {% endif %}
+                        {% else %}
+                            {{ formatAmountBySymbol(transaction.amount, transaction.currency_symbol, transaction.currency_decimal_places) }}
+                            {% if null != transaction.foreign_amount %}
+                                ({{ formatAmountBySymbol(transaction.foreign_amount, transaction.foreign_currency_symbol, transaction.foreign_currency_decimal_places) }})
+                            {% endif %}
+                        {% endif %}
+                    {# reconciliation #}
+                    {% elseif transaction.transaction_type_type == 'Reconciliation' %}
+                        {% if transaction.source_account_type == 'Reconciliation account' %}
+                            {{ formatAmountBySymbol(transaction.amount*-1, transaction.currency_symbol, transaction.currency_decimal_places) }}
+                            {% if null != transaction.foreign_amount %}
+                                ({{ formatAmountBySymbol(transaction.foreign_amount*-1, transaction.foreign_currency_symbol, transaction.foreign_currency_decimal_places) }})
+                            {% endif %}
+                        {% else %}
+                            {{ formatAmountBySymbol(transaction.amount, transaction.currency_symbol, transaction.currency_decimal_places) }}
+                            {% if null != transaction.foreign_amount %}
+                                ({{ formatAmountBySymbol(transaction.foreign_amount, transaction.foreign_currency_symbol, transaction.foreign_currency_decimal_places) }})
+                            {% endif %}
+                        {% endif %}
+                    {# liability credit #}
+                    {% elseif transaction.transaction_type_type == 'Liability credit' %}
+                        {% if transaction.source_account_type == 'Liability credit' %}
+                            {{ formatAmountBySymbol(transaction.amount, transaction.currency_symbol, transaction.currency_decimal_places) }}
+                            {% if null != transaction.foreign_amount %}
+                                ({{ formatAmountBySymbol(transaction.foreign_amount, transaction.foreign_currency_symbol, transaction.foreign_currency_decimal_places) }})
+                            {% endif %}
+                        {% else %}
+                            {{ formatAmountBySymbol(transaction.amount*-1, transaction.currency_symbol, transaction.currency_decimal_places) }}
+                            {% if null != transaction.foreign_amount %}
+                                ({{ formatAmountBySymbol(transaction.foreign_amount*-1, transaction.foreign_currency_symbol, transaction.foreign_currency_decimal_places) }})
+                            {% endif %}
+                        {% endif %}
+
+
+                        {# THE REST #}
+                    {% else %}
+                        {{ formatAmountBySymbol(transaction.amount, transaction.currency_symbol, transaction.currency_decimal_places) }}
+                        {% if null != transaction.foreign_amount %}
+                            ({{ formatAmountBySymbol(transaction.foreign_amount, transaction.foreign_currency_symbol, transaction.foreign_currency_decimal_places) }})
+                        {% endif %}
+                    {% endif %}
+                </td>
+                <td style=" {{ style|raw }}" class="hidden-xs">
+                    {{ transaction.date.formatLocalized(monthAndDayFormat) }}
+                </td>
+                <td style=" {{ style|raw }}">
+                    {% if 'Cash account' == transaction.source_account_type %}
+                        <span class="text-success">({{ 'cash'|_ }})</span>
+                    {% else %}
+                        <a href="{{ route('accounts.show', [transaction.source_account_id|default(1)]) }}"
+                           title="{{ transaction.source_account_iban|default(transaction.source_account_name) }}">{{ transaction.source_account_name }}</a>
+                    {% endif %}
+                </td>
+                <td style=" {{ style|raw }}">
+                    {% if 'Cash account' == transaction.destination_account_type %}
+                        <span class="text-success">({{ 'cash'|_ }})</span>
+                    {% else %}
+                        <a href="{{ route('accounts.show', [transaction.destination_account_id|default(1)]) }}"
+                           title="{{ transaction.destination_account_iban|default(transaction.destination_account_name) }}">{{ transaction.destination_account_name }}</a>
+                    {% endif %}
+                </td>
+                {% if showCategory %}
+                    <td style=" {{ style|raw }}" class="hidden-xs">
+                        {% if transaction.category_id %}
+                            <a href="{{ route('categories.show', [transaction.category_id]) }}"
+                               title="{{ transaction.category_name }}">{{ transaction.category_name }}</a>
+                        {% endif %}
+                    </td>
+                {% endif %}
+                {% if showBudget %}
+                    <td style=" {{ style|raw }}" class="hidden-xs">
+                        {% if transaction.budget_id %}
+                            <a href="{{ route('budgets.show', [transaction.budget_id]) }}"
+                               title="{{ transaction.budget_name }}">{{ transaction.budget_name }}</a>
+                        {% endif %}
+                    </td>
+                {% endif %}
+
+                {% if group.count == 1 %}
+                    <td style=" {{ style|raw }};" class="hidden-xs">
+                        <div class="btn-group btn-group-xs pull-right">
+                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
+                                    aria-haspopup="true" aria-expanded="false">
+                                {{ 'actions'|_ }} <span class="caret"></span></button>
+                            <ul class="dropdown-menu dropdown-menu-right" role="menu">
+                                <li><a href="{{ route('transactions.edit', [group.id]) }}"><span
+                                                class="fa fa-fw fa-pencil"></span> {{ 'edit'|_ }}</a></li>
+                                <li><a href="{{ route('transactions.delete', [group.id]) }}"><span
+                                                class="fa fa-fw fa-trash"></span> {{ 'delete'|_ }}</a></li>
+                                <li><a href="#" data-id="{{ group.id }}" class="clone-transaction"><span
+                                                class="fa fa-copy fa-fw"></span> {{ 'clone'|_ }}</a></li>
+                                <li>
+                                    <a href="{{ route('rules.create-from-journal', [transaction.transaction_journal_id]) }}"><span
+                                                class="fa fa-fw fa-random"></span> {{ 'create_rule_from_transaction'|_ }}
+                                    </a></li>
+                            </ul>
+                        </div>
+                    </td>
+
+                {% endif %}
+                {% if group.count != 1 %}
+                    <td style=" {{ style|raw }};" class="hidden-xs">
+                        &nbsp;
+                    </td>
+                {% endif %}
+                <td style="{{ style|raw }}" class="hidden-xs">
+                    <div class="pull-right">
+                        <input id="list_{{ transaction.transaction_journal_id }}"
+                               value="{{ transaction.transaction_journal_id }}"
+                               name="journals[{{ transaction.transaction_journal_id }}]"
+                               type="checkbox" class="mass-select form-check-inline"
+                               data-value="{{ transaction.transaction_journal_id }}"/>
+                    </div>
+                </td>
+            </tr>
+        {% endfor %}
+    {% endfor %}
+    </tbody>
+    <tfoot>
+    <tr>
+        <td colspan="8">
+            <div class="pull-right">
+                <!-- Single button -->
+                <div class="btn-group action-menu btn-group-xs pull-right" style="display:none;">
+                    <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown"
+                            aria-haspopup="true" aria-expanded="false">
+                        {{ 'actions'|_ }} <span class="caret"></span>
+                    </button>
+                    <ul class="dropdown-menu btn-group-xs dropdown-menu-right">
+                        <li><a href="#" class="mass-edit"><span class="fa fa-fw fa-pencil"></span>
+                                <span>{{ 'mass_edit'|_ }}</span></a></li>
+                        <li><a href="#" class="bulk-edit"><span class="fa fa-fw fa-pencil-square-o"></span>
+                                <span>{{ 'bulk_edit'|_ }}</span></a></li>
+                        <li><a href="#" class="mass-delete"><span class="fa fa-fw fa-trash"></span>
+                                <span>{{ 'mass_delete'|_ }}</span></a></li>
+                    </ul>
+                </div>
+            </div>
+        </td>
+    </tr>
+    <tr>
+        {% if showCategory or showBudget %}
+            <td colspan="9" class="no-margin-pagination">{{ groups.links('pagination.bootstrap-4')|raw }}</td>
+        {% else %}
+            <td colspan="8" class="no-margin-pagination">{{ groups.links('pagination.bootstrap-4')|raw }}</td>
+        {% endif %}
+    </tr>
+    </tfoot>
+</table>
+<script type="text/javascript" nonce="{{ JS_NONCE }}">
+    var cloneGroupUrl = '{{ route('transactions.clone') }}';
+</script>
diff --git a/resources/views/list/journals-array-tiny.twig b/resources/views/list/journals-array-tiny.twig
new file mode 100644
index 0000000000..bdf225d4db
--- /dev/null
+++ b/resources/views/list/journals-array-tiny.twig
@@ -0,0 +1,12 @@
+<div class="list-group">
+    {% for group in groups %}
+        {% for transaction in group.transactions %}
+            <a class="list-group-item" href="{{ route('transactions.show', [transaction.transaction_group_id]) }}">
+                {{ transaction.description }}
+                <span class="pull-right small">
+                    X
+                </span>
+            </a>
+        {% endfor %}
+    {% endfor %}
+</div>
diff --git a/resources/views/list/periods.twig b/resources/views/list/periods.twig
new file mode 100644
index 0000000000..2fde0b1c41
--- /dev/null
+++ b/resources/views/list/periods.twig
@@ -0,0 +1,84 @@
+{% for period in periods %}
+    <div class="box box-default">
+        <div class="box-header with-border">
+            <h3 class="box-title"><a href="{{ period.route }}">{{ period.title }}</a>
+            </h3>
+        </div>
+        <div class="box-body no-padding">
+            <table class="table table-hover">
+                {% if period.total_transactions > 0 %}
+                    <tr>
+                        <td style="width:33%;">{{ 'transactions'|_ }}</td>
+                        <td style="text-align: right;">{{ period.total_transactions }}</td>
+                    </tr>
+                {% endif %}
+
+                {% for entry in period.spent %}
+                    {% if entry.amount != 0 %}
+                        <tr>
+                            <td style="width:33%;">{{ 'spent'|_ }}</td>
+                            <td style="text-align: right;">
+                                <span title="{{ entry.count }}">
+                                    {{ formatAmountBySymbol(entry.amount, entry.currency_symbol, entry.currency_decimal_places) }}
+                                </span>
+                            </td>
+                        </tr>
+                    {% endif %}
+                {% endfor %}
+
+                {% for entry in period.earned %}
+                    {% if entry.amount != 0 %}
+                        <tr>
+                            <td style="width:33%;">{{ 'earned'|_ }}</td>
+                            <td style="text-align: right;">
+                                <span title="{{ entry.count }}">
+                                    {{ formatAmountBySymbol(entry.amount*-1, entry.currency_symbol, entry.currency_decimal_places) }}
+                                </span>
+                            </td>
+                        </tr>
+                    {% endif %}
+                {% endfor %}
+
+                {% for entry in period.transferred %}
+                    {% if entry.amount != 0 %}
+                        <tr>
+                            <td style="width:33%;">{{ 'transferred'|_ }}</td>
+                            <td style="text-align: right;">
+                                <span title="{{ entry.count }}">
+                                    {{ formatAmountBySymbol(entry.amount*-1, entry.currency_symbol, entry.currency_decimal_places) }}
+                                </span>
+                            </td>
+                        </tr>
+                    {% endif %}
+                {% endfor %}
+
+                {% for entry in period.transferred_away %}
+                    {% if entry.amount != 0 %}
+                        <tr>
+                            <td style="width:33%;">{{ 'transferred_away'|_ }}</td>
+                            <td style="text-align: right;">
+                                <span title="{{ entry.count }}">
+                                    {{ formatAmountBySymbol(entry.amount*-1, entry.currency_symbol, entry.currency_decimal_places) }}
+                                </span>
+                            </td>
+                        </tr>
+                    {% endif %}
+                {% endfor %}
+
+                {% for entry in period.transferred_in %}
+                    {% if entry.amount != 0 %}
+                        <tr>
+                            <td style="width:33%;">{{ 'transferred_in'|_ }}</td>
+                            <td style="text-align: right;">
+                                <span title="{{ entry.count }}">
+                                    {{ formatAmountBySymbol(entry.amount*-1, entry.currency_symbol, entry.currency_decimal_places) }}
+                                </span>
+                            </td>
+                        </tr>
+                    {% endif %}
+                {% endfor %}
+            </table>
+        </div>
+    </div>
+
+{% endfor %}
diff --git a/resources/views/list/piggy-bank-events.twig b/resources/views/list/piggy-bank-events.twig
new file mode 100644
index 0000000000..26765de16d
--- /dev/null
+++ b/resources/views/list/piggy-bank-events.twig
@@ -0,0 +1,35 @@
+<table class="table table-hover table-responsive">
+    <tr>
+        {% if showPiggyBank %}
+            <th>{{ trans('list.piggy_bank') }}</th>
+        {% endif %}
+        <th>{{ trans('list.date') }}</th>
+        <th>{{ trans('list.amount') }}</th>
+    </tr>
+    {% for event in events %}
+        <tr>
+            {% if showPiggyBank %}
+                <td>
+                    <a href="{{ route('piggy-banks.show',event.piggyBank.id) }}">{{ event.piggyBank.name }}</a>
+                </td>
+            {% endif %}
+            <td>
+                {% if event.transaction_journal_id %}
+                    <a href="{{ route('transactions.show',event.transactionJournal.transaction_group_id) }}"
+                       title="{{ event.transactionJournal.description }}">{{ event.date.formatLocalized(monthAndDayFormat) }}</a>
+                {% else %}
+                    {{ event.date.formatLocalized(monthAndDayFormat) }}
+                {% endif %}
+            </td>
+
+            <td style="text-align: right;">
+
+                {% if event.amount < 0 %}
+                    <span class="text-danger">{{ trans('firefly.removed_amount', {amount: formatAmountByAccount(event.piggyBank.account, event.amount, false)})|raw }}</span>
+                {% else %}
+                    <span class="text-success">{{ trans('firefly.added_amount', {amount: formatAmountByAccount(event.piggyBank.account, event.amount, false)})|raw }}</span>
+                {% endif %}
+            </td>
+        </tr>
+    {% endfor %}
+</table>
diff --git a/resources/views/list/piggy-banks.twig b/resources/views/list/piggy-banks.twig
new file mode 100644
index 0000000000..c530ff3cb4
--- /dev/null
+++ b/resources/views/list/piggy-banks.twig
@@ -0,0 +1,131 @@
+<table class="table table-hover table-condensed" id="piggy-sortable">
+    <thead>
+    <tr>
+        <th colspan="2">&nbsp;</th>
+        <th>{{ 'piggy_bank'|_ }}</th>
+        <th style="text-align: right;">{{ 'saved_so_far'|_ }}</th>
+        <th colspan="3" class="hidden-sm hidden-xs">&nbsp;</th>
+        <th style="text-align: right;" class="hidden-sm hidden-xs">{{ 'target_amount'|_ }}</th>
+        <th style="text-align: right;" class="hidden-sm hidden-xs">{{ 'left_to_save'|_ }}</th>
+        <th style="text-align: right;" class="hidden-sm hidden-xs">{{ 'suggested_savings_per_month'|_ }}</th>
+    </tr>
+    </thead>
+
+    {% for objectGroupOrder, objectGroup in piggyBanks %}
+        {% if objectGroup.piggy_banks|length > 0 %}
+            <tbody class="piggy-connected-list" {% if objectGroupOrder != 0 %}data-title="{{ objectGroup.object_group_title }}"{% else %}data-title=""{% endif %}>
+            <tr>
+                <td colspan="2">&nbsp;</td>
+                <td colspan="8"><small>{{ objectGroup.object_group_title }}</small></td>
+            </tr>
+            {% for piggy in objectGroup.piggy_banks %}
+                <tr class="piggy-sortable" data-id="{{ piggy.id }}" data-name="{{ piggy.name }}" data-order="{{ piggy.order }}" data-position="{{ loop.index0 }}">
+                    <td class="visible-xs visible-sm hidden-md hidden-lg">
+                        &nbsp;
+                    </td>
+                    <td class="visible-xs visible-sm hidden-md hidden-lg">
+                        <div class="btn-group btn-group-xs">
+                            <a href="{{ route('piggy-banks.remove-money-mobile', piggy.id) }}" class="btn btn-default btn-xs"><span class="fa fa-minus"></span></a>
+                            <a href="{{ route('piggy-banks.add-money-mobile', piggy.id) }}" class="btn btn-default btn-xs"><span class="fa fa-plus"></span></a>
+                        </div>
+                    </td>
+                    <td style="width:60px;" class="hidden-sm hidden-xs">
+                        <span class="fa fa-fw fa-bars piggy-handle"></span>
+                        <span class="loadSpin"></span>
+                    </td>
+                    <td style="width:100px;" class="hidden-sm hidden-xs">
+                        <div class="btn-group btn-group-xs">
+                            <a href="{{ route('piggy-banks.edit', piggy.id) }}" class="btn btn-default btn-xs"><span class="fa fa-pencil fa-fw"></span></a>
+                            <a href="{{ route('piggy-banks.delete', piggy.id) }}" class="btn btn-danger btn-xs"><span class="fa fa-trash fa-fw"></span></a>
+                        </div>
+                    </td>
+                    <td>
+                        <a href="{{ route('piggy-banks.show', piggy.id) }}" title="{{ piggy.account_name }}">{{ piggy.name }}</a>
+                        {% if piggy.attachments.count() > 0 %}
+                            <span class="fa fa-fw fa-paperclip"></span>
+                        {% endif %}
+                    </td>
+                    <td style="text-align: right;" class="piggySaved">
+                    <span title="Saved so far"
+                          style="text-align:right;">{{ formatAmountBySymbol(piggy.current_amount,piggy.currency_symbol,piggy.currency_decimal_places) }}</span>
+                    </td>
+                    <td class="hidden-sm hidden-xs" style="text-align:right;width:40px;">
+                        {% if piggy.current_amount > 0 %}
+                            <a href="{{ route('piggy-banks.remove-money', piggy.id) }}" class="btn btn-default btn-xs removeMoney" data-id="{{ piggy.id }}">
+                                <span data-id="{{ piggy.id }}" class="fa fa-minus"></span></a>
+                        {% endif %}
+                    </td>
+
+                    <td class="hidden-sm hidden-xs piggyBar">
+                        <div class="progress progress" style="margin-bottom:0;">
+                            <div
+                                    {% if piggy.percentage == 100 %}
+                                        class="progress-bar progress-bar-success"
+                                    {% elseif piggy.percentage == 0 %}
+                                        class="progress-bar progress-bar-warning"
+                                    {% else %}
+                                        class="progress-bar progress-bar-info"
+                                    {% endif %}
+                                    role="progressbar" aria-valuenow="{{ piggy.percentage }}" aria-valuemin="0" aria-valuemax="100"
+                                    style="min-width: 30px;width: {{ piggy.percentage }}%;">
+                                {{ piggy.percentage }}%
+                            </div>
+                        </div>
+                    </td>
+
+
+                    <td class="hidden-sm hidden-xs" style="width:40px;">
+                        {% if piggy.left_to_save > 0 %}
+                            <a href="{{ route('piggy-banks.add-money', piggy.id) }}" class="btn btn-default btn-xs addMoney" data-id="{{ piggy.id }}">
+                                <span data-id="{{ piggy.id }}" class="fa fa-plus"></span></a>
+                        {% endif %}
+                    </td>
+                    <td class="hidden-sm hidden-xs" style="text-align:right;">
+                        <span title="{{ 'target_amount'|_ }}">{{ formatAmountBySymbol(piggy.target_amount,piggy.currency_symbol,piggy.currency_decimal_places) }}</span>
+                    </td>
+                    <td class="hidden-sm hidden-xs" style="text-align:right;">
+                        {% if piggy.left_to_save > 0 %}
+                            <span title="{{ 'left_to_save'|_ }}">{{ formatAmountBySymbol(piggy.left_to_save,piggy.currency_symbol,piggy.currency_decimal_places) }}</span>
+                        {% endif %}
+                    </td>
+                    <td class="hidden-sm hidden-xs" style="text-align:right;">
+                        {% if piggy.target_date %}
+                            {{ formatAmountBySymbol(piggy.save_per_month, piggy.currency_symbol, piggy.currency_decimal_places) }}
+                        {% endif %}
+                    </td>
+                </tr>
+            {% endfor %}
+            <tr>
+                <td class="visible-xs visible-sm hidden-md hidden-lg">&nbsp;</td>
+                <td class="visible-xs visible-sm hidden-md hidden-lg">&nbsp;</td>
+                <td class="hidden-sm hidden-xs">&nbsp;</td> {# handle #}
+                <td class="hidden-sm hidden-xs">&nbsp;</td> {# buttons #}
+                <td>&nbsp;</td>
+                <td style="text-align: right;">
+                    {% for sum in objectGroup.sums %}
+                        {{ formatAmountBySymbol(sum.saved, sum.currency_symbol, sum.currency_decimal_places) }}<br />
+                    {% endfor %}
+                    </td>
+                <td class="hidden-sm hidden-xs">&nbsp;</td> {# remove money #}
+                <td class="hidden-sm hidden-xs">&nbsp;</td> {# progress#}
+                <td class="hidden-sm hidden-xs">&nbsp;</td> {# add money #}
+                <td class="hidden-sm hidden-xs" style="text-align: right;">
+                    {% for sum in objectGroup.sums %}
+                        {{ formatAmountBySymbol(sum.target, sum.currency_symbol, sum.currency_decimal_places) }}<br />
+                    {% endfor %}
+                </td>
+                <td class="hidden-sm hidden-xs" style="text-align: right;">
+                    {% for sum in objectGroup.sums %}
+                        {{ formatAmountBySymbol(sum.left_to_save, sum.currency_symbol, sum.currency_decimal_places) }}<br />
+                    {% endfor %}
+                </td>
+                <td class="hidden-sm hidden-xs" style="text-align: right;">
+                    {% for sum in objectGroup.sums %}
+                        {{ formatAmountBySymbol(sum.save_per_month, sum.currency_symbol, sum.currency_decimal_places) }}<br />
+                    {% endfor %}
+                </td>
+            </tr>
+            </tbody>
+        {% endif %}
+    {% endfor %}
+</table>
diff --git a/resources/views/new-user/index.twig b/resources/views/new-user/index.twig
new file mode 100644
index 0000000000..80f0eb1125
--- /dev/null
+++ b/resources/views/new-user/index.twig
@@ -0,0 +1,71 @@
+{% extends './v1/layout/default' %}
+
+{% block breadcrumbs %}
+    {{ Breadcrumbs.render(Route.getCurrentRoute.getName) }}
+{% endblock %}
+
+{% block content %}
+
+    <form action="{{ route('new-user.submit') }}" method="post" id="store" class="form-horizontal">
+        <input type="hidden" name="_token" value="{{ csrf_token() }}"/>
+
+        <div class="row">
+            <div class="col-lg-6 col-lg-offset-3 col-md-12 col-xs-12">
+
+                <div class="box box-primary">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ 'getting_started'|_ }}</h3>
+                    </div>
+                    <div class="box-body">
+                        <p>
+                            <strong>{{ 'welcome'|_ }}</strong>
+                        </p>
+                        <p>
+                            {{ 'to_get_started'|_ }}
+                        </p>
+                        {{ ExpandedForm.text('bank_name') }}
+                        {{ CurrencyForm.balanceAll('bank_balance') }}
+
+                        <p class="text-success">
+                            {{ 'currency_not_present'|_ }}
+                        </p>
+
+                        <p>
+                            {{ 'savings_balance_text'|_ }}
+                        </p>
+
+                        {{ ExpandedForm.number('savings_balance',0) }}
+
+                        <p>
+                            {{ 'set_preferred_language'|_ }}
+                        </p>
+                        <div id="language_holder" class="form-group">
+                            <label for="language_holder_select" class="col-sm-4 control-label">{{ 'language'|_ }}</label>
+                            <div class="col-sm-8">
+                                <select class="form-control" id="lang_holder" name="language">
+                                    {% for key, lang in Config.get('firefly.languages') %}
+                                        <option {% if language == key %}
+                                            selected
+                                        {% endif %} value="{{ key }}">{{ lang.name_locale }} ({{ lang.name_english }})</option>
+
+                                    {% endfor %}
+                                </select>
+                            </div>
+                        </div>
+
+
+                        <p>
+                            {{ 'finish_up_new_user'|_ }}
+                        </p>
+
+                    </div>
+                    <div class="box-footer">
+                        <input type="submit" name="submit" value="{{ 'submit'|_ }}" class="btn btn-success pull-right"/>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </form>
+
+
+{% endblock %}
diff --git a/resources/views/object-groups/delete.twig b/resources/views/object-groups/delete.twig
new file mode 100644
index 0000000000..2358f07b7c
--- /dev/null
+++ b/resources/views/object-groups/delete.twig
@@ -0,0 +1,42 @@
+{% extends './v1/layout/default' %}
+
+{% block breadcrumbs %}
+    {{ Breadcrumbs.render(Route.getCurrentRoute.getName, objectGroup) }}
+{% endblock %}
+
+{% block content %}
+
+    <form method="POST" action="{{ route('object-groups.destroy',objectGroup.id) }}" accept-charset="UTF-8" class="form-horizontal">
+        <input name="_token" type="hidden" value="{{ csrf_token() }}">
+        <div class="row">
+            <div class="col-lg-6 col-lg-offset-3 col-md-12 col-sm-12">
+                <div class="box box-danger">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ trans('form.delete_object_group', {'title': objectGroup.title}) }}</h3>
+                    </div>
+                    <div class="box-body">
+                        <p class="text-danger">
+                            {{ trans('form.permDeleteWarning') }}
+                        </p>
+
+                        <p>
+                            {{ trans('form.object_group_areYouSure', {'title': objectGroup.title}) }}
+                        </p>
+
+                        {% if piggyBanks > 0 %}
+                            <p>
+                                {{ Lang.choice('form.not_delete_piggy_banks', piggyBanks, {count: piggyBanks}) }}
+                            </p>
+                        {% endif %}
+
+                    </div>
+                    <div class="box-footer">
+                        <input type="submit" name="submit" value="{{ trans('form.deletePermanently') }}" class="btn pull-right btn-danger"/>
+                        <a href="{{ URL.previous() }}" class="btn-default btn">{{ trans('form.cancel') }}</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+    </form>
+{% endblock %}
diff --git a/resources/views/object-groups/edit.twig b/resources/views/object-groups/edit.twig
new file mode 100644
index 0000000000..910ec0fee3
--- /dev/null
+++ b/resources/views/object-groups/edit.twig
@@ -0,0 +1,58 @@
+{% extends './v1/layout/default' %}
+
+{% block breadcrumbs %}
+    {{ Breadcrumbs.render(Route.getCurrentRoute.getName, objectGroup) }}
+{% endblock %}
+
+{% block content %}
+    {{ Form.model(objectGroup, {'class' : 'form-horizontal','enctype': 'multipart/form-data','id' : 'update','url' : route('object-groups.update',objectGroup.id)}) }}
+
+    <input type="hidden" name="id" value="{{ objectGroup.id }}"/>
+
+    <div class="row">
+        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
+            <div class="box box-primary">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'mandatoryFields'|_ }}</h3>
+                </div>
+                <div class="box-body">
+                    {{ ExpandedForm.text('title') }}
+                </div>
+            </div>
+
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
+            {# panel for options #}
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'options'|_ }}</h3>
+                </div>
+                <div class="box-body">
+                    {{ ExpandedForm.optionsList('update','object group') }}
+                </div>
+                <div class="box-footer">
+                    <button type="submit" class="btn btn-success pull-right">
+                        {{ 'update_object_group'|_ }}
+                    </button>
+                </div>
+            </div>
+
+        </div>
+    </div>
+    </form>
+{% endblock %}
+{% block scripts %}
+    <script type="text/javascript" src="v1/js/lib/modernizr-custom.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/lib/jquery-ui.min.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/ff/piggy-banks/create.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    {# auto complete for object groups #}
+    <script type="text/javascript" src="v1/js/lib/typeahead/typeahead.bundle.min.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/ff/object-groups/create-edit.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+{% endblock %}
+
+{% block styles %}
+    <link href="v1/css/jquery-ui/jquery-ui.structure.min.css?v={{ FF_VERSION }}" type="text/css" rel="stylesheet"  media="all" nonce="{{ JS_NONCE }}">
+    <link href="v1/css/jquery-ui/jquery-ui.theme.min.css?v={{ FF_VERSION }}" type="text/css" rel="stylesheet"  media="all" nonce="{{ JS_NONCE }}">
+{% endblock %}
diff --git a/resources/views/object-groups/index.twig b/resources/views/object-groups/index.twig
new file mode 100644
index 0000000000..b0085a58f2
--- /dev/null
+++ b/resources/views/object-groups/index.twig
@@ -0,0 +1,77 @@
+{% extends './v1/layout/default' %}
+
+{% block breadcrumbs %}
+    {{ Breadcrumbs.render }}
+{% endblock %}
+{% block content %}
+    <div class="row">
+        <div class="col-lg-12 col-md-12 col-sm-12">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'object_groups'|_ }}</h3>
+                </div>
+                {% if objectGroups|length == 0 %}
+                    <div class="box-body">
+                        <div class="row">
+                            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
+                                <p>
+                                    {{ 'object_groups_empty_explain'|_ }}
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                {% endif %}
+                {% if objectGroups|length > 0 %}
+                    <div class="box-body no-padding">
+                        <table class="table table-condensed" id="sortable">
+                            <thead>
+                            <tr>
+                                <th>&nbsp;</th>
+                                <th>
+                                    {{ 'object_group_title'|_ }}
+                                </th>
+                                <th>
+                                    &nbsp;
+                                </th>
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {% for objectGroup in objectGroups %}
+                                <tr class="group-sortable" data-id="{{ objectGroup.id }}" data-name="{{ objectGroup.title|escape('html') }}" data-order="{{ objectGroup.order }}">
+                                    <td><span class="fa fa-fw fa-bars group-handle"></span></td>
+                                    <td>
+                                        <strong>{{ objectGroup.title }}</strong><br />
+
+                                        {% for piggyBank in objectGroup.piggyBanks %}
+                                            - {{ 'piggy_bank'|_ }}: <a href="{{ route('piggy-banks.show', [piggyBank.id]) }}">{{ piggyBank.name }}</a><br>
+                                        {% endfor %}
+                                        {% for bill in objectGroup.bills %}
+                                            - {{ 'bill'|_ }}: <a href="{{ route('bills.show', [bill.id]) }}">{{ bill.name }}</a><br>
+                                        {% endfor %}
+                                    </td>
+                                    <td>
+                                        <div class="btn-group btn-group-sm">
+                                            <a class="btn btn-default" href="{{ route('object-groups.edit', [objectGroup.id]) }}">
+                                                <span class="fa fa-pencil"></span>
+                                            </a>
+                                            <a class="btn btn-danger" href="{{ route('object-groups.delete', [objectGroup.id]) }}">
+                                                <span class="fa fa-trash"></span>
+                                            </a>
+                                        </div>
+                                    </td>
+                                </tr>
+                            {% endfor %}
+                            </tbody>
+                        </table>
+                    </div>
+                {% endif %}
+            </div>
+        </div>
+    </div>
+{% endblock %}
+{% block scripts %}
+    <script src="v1/js/lib/jquery-ui.min.js?v={{ FF_VERSION }}" type="text/javascript" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/ff/object-groups/index.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+{% endblock %}
+{% block styles %}
+{% endblock %}
diff --git a/resources/views/pagination/bootstrap-4.blade.php b/resources/views/pagination/bootstrap-4.blade.php
new file mode 100644
index 0000000000..63c6f56b59
--- /dev/null
+++ b/resources/views/pagination/bootstrap-4.blade.php
@@ -0,0 +1,46 @@
+@if ($paginator->hasPages())
+    <nav>
+        <ul class="pagination">
+            {{-- Previous Page Link --}}
+            @if ($paginator->onFirstPage())
+                <li class="page-item disabled" aria-disabled="true" aria-label="@lang('pagination.previous')">
+                    <span class="page-link" aria-hidden="true">&lsaquo;</span>
+                </li>
+            @else
+                <li class="page-item">
+                    <a class="page-link" href="{{ $paginator->previousPageUrl() }}" rel="prev" aria-label="@lang('pagination.previous')">&lsaquo;</a>
+                </li>
+            @endif
+
+            {{-- Pagination Elements --}}
+            @foreach ($elements as $element)
+                {{-- "Three Dots" Separator --}}
+                @if (is_string($element))
+                    <li class="page-item disabled" aria-disabled="true"><span class="page-link">{{ $element }}</span></li>
+                @endif
+
+                {{-- Array Of Links --}}
+                @if (is_array($element))
+                    @foreach ($element as $page => $url)
+                        @if ($page == $paginator->currentPage())
+                            <li class="page-item active" aria-current="page"><span class="page-link">{{ $page }}</span></li>
+                        @else
+                            <li class="page-item"><a class="page-link" href="{{ $url }}">{{ $page }}</a></li>
+                        @endif
+                    @endforeach
+                @endif
+            @endforeach
+
+            {{-- Next Page Link --}}
+            @if ($paginator->hasMorePages())
+                <li class="page-item">
+                    <a class="page-link" href="{{ $paginator->nextPageUrl() }}" rel="next" aria-label="@lang('pagination.next')">&rsaquo;</a>
+                </li>
+            @else
+                <li class="page-item disabled" aria-disabled="true" aria-label="@lang('pagination.next')">
+                    <span class="page-link" aria-hidden="true">&rsaquo;</span>
+                </li>
+            @endif
+        </ul>
+    </nav>
+@endif
diff --git a/resources/views/pagination/default.blade.php b/resources/views/pagination/default.blade.php
new file mode 100644
index 0000000000..0db70b5627
--- /dev/null
+++ b/resources/views/pagination/default.blade.php
@@ -0,0 +1,46 @@
+@if ($paginator->hasPages())
+    <nav>
+        <ul class="pagination">
+            {{-- Previous Page Link --}}
+            @if ($paginator->onFirstPage())
+                <li class="disabled" aria-disabled="true" aria-label="@lang('pagination.previous')">
+                    <span aria-hidden="true">&lsaquo;</span>
+                </li>
+            @else
+                <li>
+                    <a href="{{ $paginator->previousPageUrl() }}" rel="prev" aria-label="@lang('pagination.previous')">&lsaquo;</a>
+                </li>
+            @endif
+
+            {{-- Pagination Elements --}}
+            @foreach ($elements as $element)
+                {{-- "Three Dots" Separator --}}
+                @if (is_string($element))
+                    <li class="disabled" aria-disabled="true"><span>{{ $element }}</span></li>
+                @endif
+
+                {{-- Array Of Links --}}
+                @if (is_array($element))
+                    @foreach ($element as $page => $url)
+                        @if ($page == $paginator->currentPage())
+                            <li class="active" aria-current="page"><span>{{ $page }}</span></li>
+                        @else
+                            <li><a href="{{ $url }}">{{ $page }}</a></li>
+                        @endif
+                    @endforeach
+                @endif
+            @endforeach
+
+            {{-- Next Page Link --}}
+            @if ($paginator->hasMorePages())
+                <li>
+                    <a href="{{ $paginator->nextPageUrl() }}" rel="next" aria-label="@lang('pagination.next')">&rsaquo;</a>
+                </li>
+            @else
+                <li class="disabled" aria-disabled="true" aria-label="@lang('pagination.next')">
+                    <span aria-hidden="true">&rsaquo;</span>
+                </li>
+            @endif
+        </ul>
+    </nav>
+@endif
diff --git a/resources/views/pagination/semantic-ui.blade.php b/resources/views/pagination/semantic-ui.blade.php
new file mode 100644
index 0000000000..8d7f8249d6
--- /dev/null
+++ b/resources/views/pagination/semantic-ui.blade.php
@@ -0,0 +1,36 @@
+@if ($paginator->hasPages())
+    <div class="ui pagination menu" role="navigation">
+        {{-- Previous Page Link --}}
+        @if ($paginator->onFirstPage())
+            <a class="icon item disabled" aria-disabled="true" aria-label="@lang('pagination.previous')"> <span class="left chevron icon"></span> </a>
+        @else
+            <a class="icon item" href="{{ $paginator->previousPageUrl() }}" rel="prev" aria-label="@lang('pagination.previous')"> <span class="left chevron icon"></span> </a>
+        @endif
+
+        {{-- Pagination Elements --}}
+        @foreach ($elements as $element)
+            {{-- "Three Dots" Separator --}}
+            @if (is_string($element))
+                <a class="icon item disabled" aria-disabled="true">{{ $element }}</a>
+            @endif
+
+            {{-- Array Of Links --}}
+            @if (is_array($element))
+                @foreach ($element as $page => $url)
+                    @if ($page == $paginator->currentPage())
+                        <a class="item active" href="{{ $url }}" aria-current="page">{{ $page }}</a>
+                    @else
+                        <a class="item" href="{{ $url }}">{{ $page }}</a>
+                    @endif
+                @endforeach
+            @endif
+        @endforeach
+
+        {{-- Next Page Link --}}
+        @if ($paginator->hasMorePages())
+            <a class="icon item" href="{{ $paginator->nextPageUrl() }}" rel="next" aria-label="@lang('pagination.next')"> <span class="right chevron icon"></span> </a>
+        @else
+            <a class="icon item disabled" aria-disabled="true" aria-label="@lang('pagination.next')"> <span class="right chevron icon"></span> </a>
+        @endif
+    </div>
+@endif
diff --git a/resources/views/pagination/simple-bootstrap-4.blade.php b/resources/views/pagination/simple-bootstrap-4.blade.php
new file mode 100644
index 0000000000..4bb491742a
--- /dev/null
+++ b/resources/views/pagination/simple-bootstrap-4.blade.php
@@ -0,0 +1,27 @@
+@if ($paginator->hasPages())
+    <nav>
+        <ul class="pagination">
+            {{-- Previous Page Link --}}
+            @if ($paginator->onFirstPage())
+                <li class="page-item disabled" aria-disabled="true">
+                    <span class="page-link">@lang('pagination.previous')</span>
+                </li>
+            @else
+                <li class="page-item">
+                    <a class="page-link" href="{{ $paginator->previousPageUrl() }}" rel="prev">@lang('pagination.previous')</a>
+                </li>
+            @endif
+
+            {{-- Next Page Link --}}
+            @if ($paginator->hasMorePages())
+                <li class="page-item">
+                    <a class="page-link" href="{{ $paginator->nextPageUrl() }}" rel="next">@lang('pagination.next')</a>
+                </li>
+            @else
+                <li class="page-item disabled" aria-disabled="true">
+                    <span class="page-link">@lang('pagination.next')</span>
+                </li>
+            @endif
+        </ul>
+    </nav>
+@endif
diff --git a/resources/views/pagination/simple-default.blade.php b/resources/views/pagination/simple-default.blade.php
new file mode 100644
index 0000000000..36bdbc18c6
--- /dev/null
+++ b/resources/views/pagination/simple-default.blade.php
@@ -0,0 +1,19 @@
+@if ($paginator->hasPages())
+    <nav>
+        <ul class="pagination">
+            {{-- Previous Page Link --}}
+            @if ($paginator->onFirstPage())
+                <li class="disabled" aria-disabled="true"><span>@lang('pagination.previous')</span></li>
+            @else
+                <li><a href="{{ $paginator->previousPageUrl() }}" rel="prev">@lang('pagination.previous')</a></li>
+            @endif
+
+            {{-- Next Page Link --}}
+            @if ($paginator->hasMorePages())
+                <li><a href="{{ $paginator->nextPageUrl() }}" rel="next">@lang('pagination.next')</a></li>
+            @else
+                <li class="disabled" aria-disabled="true"><span>@lang('pagination.next')</span></li>
+            @endif
+        </ul>
+    </nav>
+@endif
diff --git a/resources/views/pagination/simple-tailwind.blade.php b/resources/views/pagination/simple-tailwind.blade.php
new file mode 100644
index 0000000000..6872cca360
--- /dev/null
+++ b/resources/views/pagination/simple-tailwind.blade.php
@@ -0,0 +1,25 @@
+@if ($paginator->hasPages())
+    <nav role="navigation" aria-label="Pagination Navigation" class="flex justify-between">
+        {{-- Previous Page Link --}}
+        @if ($paginator->onFirstPage())
+            <span class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5 rounded-md">
+                {!! __('pagination.previous') !!}
+            </span>
+        @else
+            <a href="{{ $paginator->previousPageUrl() }}" rel="prev" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 rounded-md hover:text-gray-500 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150">
+                {!! __('pagination.previous') !!}
+            </a>
+        @endif
+
+        {{-- Next Page Link --}}
+        @if ($paginator->hasMorePages())
+            <a href="{{ $paginator->nextPageUrl() }}" rel="next" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 rounded-md hover:text-gray-500 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150">
+                {!! __('pagination.next') !!}
+            </a>
+        @else
+            <span class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5 rounded-md">
+                {!! __('pagination.next') !!}
+            </span>
+        @endif
+    </nav>
+@endif
diff --git a/resources/views/pagination/tailwind.blade.php b/resources/views/pagination/tailwind.blade.php
new file mode 100644
index 0000000000..2dd4d0ef33
--- /dev/null
+++ b/resources/views/pagination/tailwind.blade.php
@@ -0,0 +1,102 @@
+@if ($paginator->hasPages())
+    <nav role="navigation" aria-label="{{ __('Pagination Navigation') }}" class="flex items-center justify-between">
+        <div class="flex justify-between flex-1 sm:hidden">
+            @if ($paginator->onFirstPage())
+                <span class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5 rounded-md">
+                    {!! __('pagination.previous') !!}
+                </span>
+            @else
+                <a href="{{ $paginator->previousPageUrl() }}" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 rounded-md hover:text-gray-500 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150">
+                    {!! __('pagination.previous') !!}
+                </a>
+            @endif
+
+            @if ($paginator->hasMorePages())
+                <a href="{{ $paginator->nextPageUrl() }}" class="relative inline-flex items-center px-4 py-2 ml-3 text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 rounded-md hover:text-gray-500 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150">
+                    {!! __('pagination.next') !!}
+                </a>
+            @else
+                <span class="relative inline-flex items-center px-4 py-2 ml-3 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5 rounded-md">
+                    {!! __('pagination.next') !!}
+                </span>
+            @endif
+        </div>
+
+        <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
+            <div>
+                <p class="text-sm text-gray-700 leading-5">
+                    {!! __('Showing') !!}
+                    <span class="font-medium">{{ $paginator->firstItem() }}</span>
+                    {!! __('to') !!}
+                    <span class="font-medium">{{ $paginator->lastItem() }}</span>
+                    {!! __('of') !!}
+                    <span class="font-medium">{{ $paginator->total() }}</span>
+                    {!! __('results') !!}
+                </p>
+            </div>
+
+            <div>
+                <span class="relative z-0 inline-flex shadow-sm rounded-md">
+                    {{-- Previous Page Link --}}
+                    @if ($paginator->onFirstPage())
+                        <span aria-disabled="true" aria-label="{{ __('pagination.previous') }}">
+                            <span class="relative inline-flex items-center px-2 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default rounded-l-md leading-5" aria-hidden="true">
+                                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+                                    <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
+                                </svg>
+                            </span>
+                        </span>
+                    @else
+                        <a href="{{ $paginator->previousPageUrl() }}" rel="prev" class="relative inline-flex items-center px-2 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-l-md leading-5 hover:text-gray-400 focus:z-10 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-500 transition ease-in-out duration-150" aria-label="{{ __('pagination.previous') }}">
+                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+                                <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
+                            </svg>
+                        </a>
+                    @endif
+
+                    {{-- Pagination Elements --}}
+                    @foreach ($elements as $element)
+                        {{-- "Three Dots" Separator --}}
+                        @if (is_string($element))
+                            <span aria-disabled="true">
+                                <span class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-700 bg-white border border-gray-300 cursor-default leading-5">{{ $element }}</span>
+                            </span>
+                        @endif
+
+                        {{-- Array Of Links --}}
+                        @if (is_array($element))
+                            @foreach ($element as $page => $url)
+                                @if ($page == $paginator->currentPage())
+                                    <span aria-current="page">
+                                        <span class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5">{{ $page }}</span>
+                                    </span>
+                                @else
+                                    <a href="{{ $url }}" class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 hover:text-gray-500 focus:z-10 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150" aria-label="{{ __('Go to page :page', ['page' => $page]) }}">
+                                        {{ $page }}
+                                    </a>
+                                @endif
+                            @endforeach
+                        @endif
+                    @endforeach
+
+                    {{-- Next Page Link --}}
+                    @if ($paginator->hasMorePages())
+                        <a href="{{ $paginator->nextPageUrl() }}" rel="next" class="relative inline-flex items-center px-2 py-2 -ml-px text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-r-md leading-5 hover:text-gray-400 focus:z-10 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-500 transition ease-in-out duration-150" aria-label="{{ __('pagination.next') }}">
+                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+                                <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
+                            </svg>
+                        </a>
+                    @else
+                        <span aria-disabled="true" aria-label="{{ __('pagination.next') }}">
+                            <span class="relative inline-flex items-center px-2 py-2 -ml-px text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default rounded-r-md leading-5" aria-hidden="true">
+                                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+                                    <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
+                                </svg>
+                            </span>
+                        </span>
+                    @endif
+                </span>
+            </div>
+        </div>
+    </nav>
+@endif
diff --git a/resources/views/partials/boxes.twig b/resources/views/partials/boxes.twig
new file mode 100644
index 0000000000..a7c15d9814
--- /dev/null
+++ b/resources/views/partials/boxes.twig
@@ -0,0 +1,78 @@
+<div class="row hidden-xs">
+    {# box for in and out (balance) #}
+    <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
+        <div class="info-box bg-aqua-gradient" id="box_out_holder">
+            <span class="info-box-icon"><span class="fa fa-balance-scale"></span></span>
+
+            <div class="info-box-content">
+                <span class="info-box-text">
+                    <a href="{{ route('reports.report.default', ['allAssetAccounts',start.format('Ymd'),end.format('Ymd')]) }}">{{ 'balance'|_ }}</a></span>
+                <span class="info-box-number" id="box-balance-sums"></span>
+
+                <div class="progress" id="box-balance-progress">
+                    <div class="progress-bar" style="width: 0%"></div>
+                </div>
+                <span class="progress-description">
+                    <span id="box-balance-list" ></span>
+                  </span>
+            </div>
+        </div>
+    </div>
+
+    {# box for bills #}
+    <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
+        <div class="info-box bg-teal-gradient">
+            <span class="info-box-icon"><span class="fa fa-calendar-o"></span></span>
+
+            <div class="info-box-content">
+                <span class="info-box-text"><a href="{{ route('bills.index') }}">{{ 'bills_to_pay'|_ }}</a></span>
+                <span class="info-box-number" id="box-bills-unpaid"></span>
+
+                <div class="progress">
+                    <div class="progress-bar" style="width: 0%"></div>
+                </div>
+                <span class="progress-description">
+                    {{ 'paid'|_ }}:
+                    <span title="{{ 'bills_paid'|_ }}" id="box-bills-paid"></span>
+                  </span>
+            </div>
+        </div>
+    </div>
+
+    {#  available to spend total / per day #}
+    <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
+        <div class="info-box bg-green-gradient" id="box-left-to-spend-box">
+            <span class="info-box-icon"><span class="fa fa-money"></span></span>
+            <div class="info-box-content">
+                <span class="info-box-text"><a id="box-left-to-spend-text" href="{{ route('budgets.index') }}">{{ 'left_to_spend'|_ }}</a></span>
+                <span class="info-box-number" id="box-left-to-spend"></span>
+
+                <div class="progress">
+                    <div class="progress-bar" style="width: 0%"></div>
+                </div>
+                <span class="progress-description">
+                    {{ 'per_day'|_ }}:
+                    <span title="{{ 'left_to_spend_per_day'|_ }}" id="box-left-per-day"></span>
+                  </span>
+            </div>
+        </div>
+    </div>
+
+    {# net worth #}
+    <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
+        <div class="info-box bg-blue-gradient">
+            <span class="info-box-icon"><span class="fa fa-line-chart"></span></span>
+
+            <div class="info-box-content">
+                <span class="info-box-text">
+                    <a href="{{ route('reports.report.default', ['allAssetAccounts','currentYearStart','currentYearEnd']) }}">{{ 'net_worth'|_ }}</a></span>
+                <span class="info-box-number" id="box-net-worth"></span>
+
+                <div class="progress">
+                    <div class="progress-bar" style="width: 0%"></div>
+                </div>
+                <span class="progress-description"></span>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/resources/views/partials/control-bar.twig b/resources/views/partials/control-bar.twig
new file mode 100644
index 0000000000..0ca560f745
--- /dev/null
+++ b/resources/views/partials/control-bar.twig
@@ -0,0 +1,132 @@
+<aside class="control-sidebar control-sidebar-dark">
+    <div class="tab-content">
+        <div class="tab-panel active" id="control-sidebar-home-tab">
+            <h3 class="control-sidebar-heading">{{ 'create_new_stuff'|_ }}</h3>
+            <ul class='control-sidebar-menu'>
+                <li>
+                    <a href="{{ route('transactions.create', 'withdrawal') }}">
+                        <span class="menu-icon fa fa-long-arrow-left bg-red"></span>
+
+                        <div class="menu-info">
+                            <h4 class="control-sidebar-subheading">{{ 'new_withdrawal'|_ }}</h4>
+                        </div>
+                    </a>
+                </li>
+                <li>
+                    <a href="{{ route('transactions.create', 'deposit') }}">
+                        <span class="menu-icon fa fa-long-arrow-right bg-green"></span>
+
+                        <div class="menu-info">
+                            <h4 class="control-sidebar-subheading">{{ 'new_deposit'|_ }}</h4>
+                        </div>
+                    </a>
+                </li>
+                <li>
+                    <a href="{{ route('transactions.create', 'transfer') }}">
+                        <span class="menu-icon fa fa-exchange bg-blue"></span>
+
+                        <div class="menu-info">
+                            <h4 class="control-sidebar-subheading">{{ 'new_transfer'|_ }}</h4>
+                        </div>
+                    </a>
+                </li>
+                <li>
+                    <a href="{{ route('accounts.create', 'asset') }}">
+                        <span class="menu-icon fa fa-money bg-maroon"></span>
+
+                        <div class="menu-info">
+                            <h4 class="control-sidebar-subheading">{{ 'new_asset_account'|_ }}</h4>
+                        </div>
+                    </a>
+                </li>
+                <li>
+                    <a href="{{ route('accounts.create', 'expense') }}">
+                        <span class="menu-icon fa fa-shopping-cart bg-maroon"></span>
+
+                        <div class="menu-info">
+                            <h4 class="control-sidebar-subheading">{{ 'new_expense_account'|_ }}</h4>
+                        </div>
+                    </a>
+                </li>
+                <li>
+                    <a href="{{ route('accounts.create', 'revenue') }}">
+                        <span class="menu-icon fa fa-download bg-maroon"></span>
+
+                        <div class="menu-info">
+                            <h4 class="control-sidebar-subheading">{{ 'new_revenue_account'|_ }}</h4>
+                        </div>
+                    </a>
+                </li>
+                <li>
+                    <a href="{{ route('accounts.create', 'liabilities') }}">
+                        <span class="menu-icon fa fa-ticket bg-maroon"></span>
+
+                        <div class="menu-info">
+                            <h4 class="control-sidebar-subheading">{{ 'new_liabilities_account'|_ }}</h4>
+                        </div>
+                    </a>
+                </li>
+
+                <li>
+                    <a href="{{ route('budgets.create') }}">
+                        <span class="menu-icon fa fa-pie-chart bg-red"></span>
+
+                        <div class="menu-info">
+                            <h4 class="control-sidebar-subheading">{{ 'new_budget'|_ }}</h4>
+                        </div>
+                    </a>
+                </li>
+
+                <li>
+                    <a href="{{ route('categories.create') }}">
+                        <span class="menu-icon fa fa-bookmark bg-red"></span>
+
+                        <div class="menu-info">
+                            <h4 class="control-sidebar-subheading">{{ 'new_category'|_ }}</h4>
+                        </div>
+                    </a>
+                </li>
+
+                <li>
+                    <a href="{{ route('piggy-banks.create') }}">
+                        <span class="menu-icon fa fa-bullseye bg-teal"></span>
+
+                        <div class="menu-info">
+                            <h4 class="control-sidebar-subheading">{{ 'new_piggy_bank'|_ }}</h4>
+                        </div>
+                    </a>
+                </li>
+                <li>
+                    <a href="{{ route('bills.create') }}">
+                        <span class="menu-icon fa fa-calendar-o bg-purple"></span>
+
+                        <div class="menu-info">
+                            <h4 class="control-sidebar-subheading">{{ 'new_bill'|_ }}</h4>
+                        </div>
+                    </a>
+                </li>
+                <li>
+                    <a href="{{ route('rules.create') }}">
+                        <span class="menu-icon fa fa-random bg-red"></span>
+
+                        <div class="menu-info">
+                            <h4 class="control-sidebar-subheading">{{ 'new_rule'|_ }}</h4>
+                        </div>
+                    </a>
+                </li>
+                <li>
+                    <a href="{{ route('recurring.create') }}">
+                        <span class="menu-icon fa fa-paint-brush bg-teal"></span>
+
+                        <div class="menu-info">
+                            <h4 class="control-sidebar-subheading">{{ 'new_recurring_transaction'|_ }}</h4>
+                        </div>
+                    </a>
+                </li>
+
+            </ul>
+
+        </div>
+    </div>
+</aside>
+<div class='control-sidebar-bg'></div>
diff --git a/resources/views/partials/empty.twig b/resources/views/partials/empty.twig
new file mode 100644
index 0000000000..b18079818b
--- /dev/null
+++ b/resources/views/partials/empty.twig
@@ -0,0 +1,26 @@
+<div class="row">
+    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 col-lg-offset-3 col-md-offset-3">
+        <div class="box box-success">
+            <div class="box-header with-border">
+                <h3 class="box-title">{{ ('no_'~type~'_title_'~objectType)|_ }}</h3>
+            </div>
+
+            <div class="box-body">
+                <p>
+                    {{ ('no_'~type~'_intro_'~objectType)|_ }}
+                </p>
+                <p>
+                    {{ ('no_'~type~'_imperative_'~objectType)|_ }}
+
+                </p>
+                <p style="text-align: center;">
+                    <a class="btn btn-lg btn-success" href="{{ route }}">{{ ('no_'~type~'_create_'~objectType)|_ }}</a>
+                </p>
+            </div>
+
+        </div>
+    </div>
+</div>
+<script type="text/javascript" nonce="{{ JS_NONCE }}">
+    forceDemoOff = true;
+</script>
diff --git a/resources/views/partials/favicons.twig b/resources/views/partials/favicons.twig
new file mode 100644
index 0000000000..3d7760d7e3
--- /dev/null
+++ b/resources/views/partials/favicons.twig
@@ -0,0 +1,11 @@
+<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
+<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png?v=3e8AboOwbd">
+<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png?v=3e8AboOwbd">
+<link rel="manifest" href="manifest.webmanifest?v=3e8AboOwbd">
+<link rel="mask-icon" href="safari-pinned-tab.svg" color="#3c8dbc">
+<link rel="shortcut icon" href="favicon.ico?v=3e8AboOwbd">
+<meta name="apple-mobile-web-app-title" content="Firefly III">
+<meta name="application-name" content="Firefly III">
+<meta name="msapplication-TileColor" content="#3c8dbc">
+<meta name="msapplication-TileImage" content="mstile-144x144.png?v=3e8AboOwbd">
+<meta name="theme-color" content="#3c8dbc">
diff --git a/resources/views/partials/flashes.twig b/resources/views/partials/flashes.twig
new file mode 100644
index 0000000000..cd795a2a01
--- /dev/null
+++ b/resources/views/partials/flashes.twig
@@ -0,0 +1,108 @@
+{# LOCALE ERROR MESSAGE #}
+{% if invalidMonetaryLocale %}
+    <div class="alert alert-info alert-dismissible" role="alert">
+        <button type="button" class="close" data-dismiss="alert">
+            <span>&times;</span><span class="sr-only">{{ 'close'|_ }}</span>
+        </button>
+        <strong>{{ 'invalid_server_configuration'|_ }}:</strong> <span class="fa fa-money"></span> {{ 'invalid_locale_settings'|_ }}
+    </div>
+{% endif %}
+
+{# MANDATORY UPDATE MESSAGE #}
+{% if upgrade_security_message and upgrade_security_level %}
+    <div class="alert alert-{{ upgrade_security_level }} alert-dismissible" role="alert">
+        <strong>{{ ('flash_'~upgrade_security_level)|_ }}</strong> <span class="fa fa-exclamation-triangle"></span> {{ upgrade_security_message }}
+    </div>
+{% endif %}
+
+{# SUCCESS MESSAGE (ALWAYS SINGULAR) #}
+{% if session_has('success') %}
+    <div class="alert alert-success alert-dismissible" role="alert">
+        <button type="button" class="close" data-dismiss="alert">
+            <span>&times;</span><span class="sr-only">{{ 'close'|_ }}</span>
+        </button>
+        <strong>{{ 'flash_success'|_ }}</strong>
+        {% if session_has('success_url') %}
+            <a href="{{ session('success_url') }}">
+        {% endif %}
+                {{ session('success') }}
+        {% if session_has('success_url') %}
+            </a>
+        {% endif %}
+
+    </div>
+{% endif %}
+
+{# INFO MESSAGE (CAN BE MULTIPLE) #}
+{% if session_has('info') %}
+    <div class="alert alert-info alert-dismissible" role="alert">
+        <button type="button" class="close" data-dismiss="alert">
+            <span>&times;</span><span class="sr-only">{{ 'close'|_ }}</span>
+        </button>
+
+        {# MULTIPLE INFO MESSAGE #}
+        {% if session('info') is iterable and session('info')|length > 1 %}
+            <strong>
+                {{ Lang.choice('firefly.flash_info_multiple', session('info')|length, {count: session('info')|length}) }}:</strong>
+            <ul class="list-unstyled">
+                {% for inf in session('info') %}
+                    <li>{{ inf|raw }}</li>
+                {% endfor %}
+            </ul>
+        {% endif %}
+        {# SET OF MULTIPLE INFO MESSAGES, BUT THERE IS JUST ONE #}
+        {% if session('info') is iterable and session('info')|length == 1 %}
+            <strong>{{ 'flash_info'|_ }}:</strong> {{ session('info')[0]|raw }}
+        {% endif %}
+        {# SINGLE INFO MESSAGE #}
+        {% if session('info') is not iterable %}
+            <strong>{{ 'flash_info'|_ }}:</strong> {{ session('info')|raw }}
+        {% endif %}
+
+    </div>
+
+{% endif %}
+
+{# WARNING MESSAGE (ALWAYS SINGULAR) #}
+{% if session_has('warning') %}
+    <div class="alert alert-warning alert-dismissible" role="alert">
+        <button type="button" class="close" data-dismiss="alert">
+            <span>&times;</span><span class="sr-only">{{ 'close'|_ }}</span>
+        </button>
+        <strong>{{ 'flash_warning'|_ }}</strong> {{ session('warning') }}
+    </div>
+{% endif %}
+
+{# ERROR MESSAGE (CAN BE MULTIPLE) #}
+{% if session_has('error') %}
+    <div class="alert alert-danger alert-dismissible" role="alert">
+        <button type="button" class="close" data-dismiss="alert">
+            <span>&times;</span><span class="sr-only">{{ 'close'|_ }}</span>
+        </button>
+
+        {# MULTIPLE ERRORS (BAD) #}
+        {% if session('error') is iterable and session('error')|length > 1 %}
+            <strong>
+                {{ Lang.choice('firefly.flash_error_multiple', session('error')|length, {count: session('error')|length}) }}:
+            </strong>
+            <ul class="list-unstyled">
+                {% for err in session('error') %}
+                    <li>{{ err }}</li>
+                {% endfor %}
+            </ul>
+        {% endif %}
+
+        {# SET OF MULTIPLE ERRORS, BUT THERE IS JUST ONE #}
+        {% if session('error') is iterable and session('error')|length == 1 %}
+            <strong>{{ 'flash_error'|_ }}</strong>
+            {{ session('error')[0]|raw }}
+        {% endif %}
+
+        {# SINGLE ERROR #}
+        {% if session('error') is not iterable %}
+            <strong>{{ 'flash_error'|_ }}</strong> {{ session('error')|raw }}
+        {% endif %}
+
+    </div>
+{% endif %}
+
diff --git a/resources/views/partials/journal-row.twig b/resources/views/partials/journal-row.twig
new file mode 100644
index 0000000000..9bd55d9c60
--- /dev/null
+++ b/resources/views/partials/journal-row.twig
@@ -0,0 +1 @@
+<h1 style="color:red;">REPLACE ME</h1>
diff --git a/resources/views/partials/layout/breadcrumbs.twig b/resources/views/partials/layout/breadcrumbs.twig
new file mode 100644
index 0000000000..67679dde97
--- /dev/null
+++ b/resources/views/partials/layout/breadcrumbs.twig
@@ -0,0 +1,13 @@
+
+{% if breadcrumbs|length > 0 %}
+
+<ol class="breadcrumb">
+    {% for breadcrumb in breadcrumbs %}
+        {% if breadcrumb.url and not loop.last %}
+            <li><a href="{{ breadcrumb.url }}">{{ breadcrumb.title }}</a></li>
+        {% else %}
+            <li class="active">{{ breadcrumb.title }}</li>
+        {% endif %}
+    {% endfor %}
+</ol>
+{% endif %}
diff --git a/resources/views/partials/menu-sidebar.twig b/resources/views/partials/menu-sidebar.twig
new file mode 100644
index 0000000000..07a57665c5
--- /dev/null
+++ b/resources/views/partials/menu-sidebar.twig
@@ -0,0 +1,234 @@
+<ul class="sidebar-menu" data-widget="tree">
+    <li class="{{ activeRouteStrict('index') }}">
+        <a href="{{ route('index') }}">
+            <span class="fa fa-dashboard fa-fw"></span>
+            <span>{{ 'dashboard'|_ }}</span>
+        </a>
+    </li>
+
+    <li class="header text-uppercase">{{ 'financial_control'|_ }}</li>
+
+    <li class="{{ activeRoutePartial('budgets') }}" id="budget-menu">
+        <a href="{{ route('budgets.index') }}">
+            <span class="fa fa-pie-chart fa-fw"></span>
+            <span>{{ 'budgets'|_ }}</span>
+        </a>
+    </li>
+
+    <li class="{{ activeRoutePartial('bills') }}">
+        <a href="{{ route('bills.index') }}">
+            <span class="fa fa-calendar-o fa-fw"></span>
+            <span>{{ 'bills'|_ }}</span>
+        </a>
+    </li>
+
+    <li class="{{ activeRoutePartial('piggy-banks') }}">
+        <a href="{{ route('piggy-banks.index') }}">
+            <span class="fa fa-bullseye fa-fw"></span>
+            <span>{{ 'piggyBanks'|_ }}</span>
+        </a>
+    </li>
+
+    <li class="header text-uppercase">{{ 'accounting'|_ }}</li>
+
+    <li class="{{ activeRoutePartial('transactions') }} treeview" id="transaction-menu">
+        <a href="#">
+            <span class="fa fa-exchange fa-fw"></span>
+            <span>{{ 'transactions'|_ }}</span>
+            <span class="pull-right-container">
+        <span class="fa fa-angle-left pull-right"></span>
+      </span>
+        </a>
+
+        <ul class="treeview-menu">
+            <li class="{{ activeRoutePartialObjectType('transactions', 'withdrawal') }}">
+                <a href="{{ route('transactions.index', 'withdrawal') }}">
+                    <span class="fa fa-angle-right fa-fw"></span>
+                    <span>{{ 'expenses'|_ }}</span>
+                </a>
+            </li>
+            <li class="{{ activeRoutePartialObjectType('transactions', 'deposit') }}">
+                <a href="{{ route('transactions.index', 'deposit') }}">
+                    <span class="fa fa-angle-right fa-fw"></span>
+                    <span>{{ 'income'|_ }}</span>
+                </a>
+            </li>
+            <li class="{{ activeRoutePartialObjectType('transactions', 'transfers') }}">
+                <a href="{{ route('transactions.index', 'transfers') }}">
+                    <span class="fa fa-angle-right fa-fw"></span>
+                    <span>{{ 'transfers'|_ }}</span>
+                </a>
+            </li>
+        </ul>
+    </li>
+
+    <li class="{{ activeRoutePartial('recurring') }} {{ activeRoutePartial('rules') }} treeview">
+        <a href="#">
+            <span class="fa fa-microchip fa-fw"></span>
+            <span>{{ 'automation'|_ }}</span>
+            <span class="pull-right-container">
+        <span class="fa fa-angle-left pull-right"></span>
+      </span>
+        </a>
+
+        <ul class="treeview-menu">
+            <li class="{{ activeRoutePartial('rules') }}">
+                <a href="{{ route('rules.index') }}">
+                    <span class="fa fa-angle-right fa-fw"></span>
+                    <span>{{ 'rules'|_ }}</span>
+                </a>
+            </li>
+            <li class="{{ activeRoutePartial('recurring') }}">
+                <a href="{{ route('recurring.index') }}">
+                    <span class="fa fa-angle-right fa-fw"></span>
+                    <span>{{ 'recurrences'|_ }}</span>
+                </a>
+            </li>
+        </ul>
+    </li>
+
+    <li class="header text-uppercase">{{ 'others'|_ }}</li>
+
+    <li class="{{ activeRoutePartial('accounts') }} treeview" id="account-menu">
+        <a href="#">
+            <span class="fa fa-credit-card fa-fw"></span>
+            <span>{{ 'accounts'|_ }}</span>
+            <span class="pull-right-container">
+        <span class="fa fa-angle-left pull-right"></span>
+      </span>
+        </a>
+
+        <ul class="treeview-menu">
+            <li class="{{ activeRoutePartialObjectType('accounts', 'asset') }}">
+                <a href="{{ route('accounts.index', 'asset') }}">
+                    <span class="fa fa-angle-right fa-fw"></span>
+                    <span>{{ 'asset_accounts'|_ }}</span>
+                </a>
+            </li>
+            <li class="{{ activeRoutePartialObjectType('accounts', 'expense') }}">
+                <a href="{{ route('accounts.index', 'expense') }}">
+                    <span class="fa fa-angle-right fa-fw"></span>
+                    <span>{{ 'expense_accounts'|_ }}</span>
+                </a>
+            </li>
+            <li class="{{ activeRoutePartialObjectType('accounts', 'revenue') }}">
+                <a href="{{ route('accounts.index', 'revenue') }}">
+                    <span class="fa fa-angle-right fa-fw"></span>
+                    <span>{{ 'revenue_accounts'|_ }}</span>
+                </a>
+            </li>
+            <li class="{{ activeRoutePartialObjectType('accounts', 'liabilities') }}">
+                <a href="{{ route('accounts.index', 'liabilities') }}">
+                    <span class="fa fa-angle-right fa-fw"></span>
+                    <span>{{ 'liabilities_accounts'|_ }}</span>
+                </a>
+            </li>
+        </ul>
+    </li>
+
+    <li class="{{ activeRoutePartial('categories') }} {{ activeRoutePartial('tags') }} {{ activeRoutePartial('groups') }} treeview">
+        <a href="#">
+            <span class="fa fa-tags fa-fw"></span>
+            <span>{{ 'classification'|_ }}</span>
+            <span class="pull-right-container">
+        <span class="fa fa-angle-left pull-right"></span>
+      </span>
+        </a>
+
+        <ul class="treeview-menu">
+            <li class="{{ activeRoutePartial('categories') }}">
+                <a href="{{ route('categories.index') }}">
+                    <span class="fa fa-angle-right fa-fw"></span>
+                    <span>{{ 'categories'|_ }}</span>
+                </a>
+            </li>
+            <li class="{{ activeRoutePartial('tags') }}">
+                <a href="{{ route('tags.index') }}">
+                    <span class="fa fa-angle-right fa-fw"></span>
+                    <span>{{ 'tags'|_ }}</span>
+                </a>
+            </li>
+            <li class="{{ activeRoutePartial('object-groups') }}">
+                <a href="{{ route('object-groups.index') }}">
+                    <span class="fa fa-angle-right fa-fw"></span>
+                    <span>{{ 'object_groups_menu_bar'|_ }}</span>
+                </a>
+            </li>
+        </ul>
+    </li>
+
+    <li class="{{ activeRoutePartial('reports') }}" id="report-menu">
+        <a href="{{ route('reports.index') }}">
+            <span class="fa fa-bar-chart fa-fw"></span>
+            <span>{{ 'reports'|_ }}</span>
+        </a>
+    </li>
+
+
+    {% if config('firefly.feature_flags.export') %}
+        <li class="{{ activeRoutePartial('export') }}" id="report-menu">
+            <a href="{{ route('export.index') }}">
+                <span class="fa fa-upload fa-fw"></span>
+                <span>{{ 'export_data_menu'|_ }}</span>
+            </a>
+        </li>
+    {% endif %}
+
+    <li class="{{ activeRoutePartial('admin') }} {{ activeRoutePartial('profile') }} {{ activeRoutePartial('preferences') }} {{ activeRoutePartial('currencies') }} treeview"
+        id="option-menu">
+        <a href="#">
+            <span class="fa fa-sliders fa-fw"></span>
+            <span>{{ 'options'|_ }}</span>
+            <span class="pull-right-container">
+        <span class="fa fa-angle-left pull-right"></span>
+      </span>
+        </a>
+
+        <ul class="treeview-menu">
+            <li class="{{ activeRoutePartial('profile') }}">
+                <a class="{{ activeRouteStrict('profile.index') }}" href="{{ route('profile.index') }}">
+                    <span class="fa fa-angle-right fa-fw"></span>
+                    <span>{{ 'profile'|_ }}</span>
+                </a>
+            </li>
+            <li class="{{ activeRoutePartial('preferences') }}">
+                <a class="{{ activeRouteStrict('preferences.index') }}" href="{{ route('preferences.index') }}">
+                    <span class="fa fa-angle-right fa-fw"></span>
+                    <span>{{ 'preferences'|_ }}</span>
+                </a>
+            </li>
+            <li class="{{ activeRoutePartial('currencies') }}">
+                <a class="{{ activeRoutePartial('currencies') }}" href="{{ route('currencies.index') }}">
+                    <span class="fa fa-angle-right fa-fw"></span>
+                    <span>{{ 'currencies'|_ }}</span>
+                </a>
+            </li>
+            {% if true == featuringWebhooks %}
+                <li class="{{ activeRoutePartial('webhooks') }}">
+                    <a class="{{ activeRoutePartial('webhooks') }}" href="{{ route('webhooks.index') }}">
+                        <span class="fa fa-angle-right fa-fw"></span>
+                        <span>{{ 'webhooks'|_ }}</span>
+                    </a>
+                </li>
+            {% endif %}
+            {% if hasRole('owner') %}
+                <li class="{{ activeRoutePartial('admin') }}">
+                    <a class="{{ activeRoutePartial('admin') }}" href="{{ route('admin.index') }}">
+                        <span class="fa fa-angle-right fa-fw"></span>
+                        <span>{{ 'administration'|_ }}</span>
+                    </a>
+                </li>
+            {% endif %}
+        </ul>
+    </li>
+
+
+    {% if 'remote_user_guard' != authGuard or '' != logoutUri %}
+        <li>
+            <a href="{{ route('logout') }}" class="logout-link">
+                <span class="fa fa-sign-out fa-fw"></span>
+                <span>{{ 'logout'|_ }}</span>
+            </a>
+        </li>
+    {% endif %}
+</ul>
diff --git a/resources/views/partials/page-header.twig b/resources/views/partials/page-header.twig
new file mode 100644
index 0000000000..ec7215d523
--- /dev/null
+++ b/resources/views/partials/page-header.twig
@@ -0,0 +1,14 @@
+<h1>
+    {% if mainTitleIcon %}
+        <span class="hidden-xs fa {{ mainTitleIcon }}"></span>
+    {% endif %}
+    {{ title }}
+    {% if subTitle %}
+        <small id="subTitle">
+            {% if subTitleIcon %}
+                <span class="hidden-xs fa {{ subTitleIcon }}"></span>
+            {% endif %}
+            {{ subTitle }}
+        </small>
+    {% endif %}
+</h1>
diff --git a/resources/views/partials/password-modal.twig b/resources/views/partials/password-modal.twig
new file mode 100644
index 0000000000..cdb8c48654
--- /dev/null
+++ b/resources/views/partials/password-modal.twig
@@ -0,0 +1,35 @@
+<div class="modal fade" id="passwordModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span>&times;</span></button>
+                <h4 class="modal-title">
+                    {{ 'secure_pw_title'|_ }}
+                </h4>
+            </div>
+            <div class="modal-body">
+                <p>
+                    {{ 'secure_pw_history'|_ }}
+                </p>
+                <p>
+                    {{ 'secure_pw_ff'|_ }}
+                </p>
+                <p>
+                    {{ 'secure_pw_check_box'|_ }}
+                </p>
+
+                <h4>{{ 'secure_pw_working_title'|_ }}</h4>
+                <p>
+                    {{ 'secure_pw_working'|_ }}
+                </p>
+                <h4>{{ 'secure_pw_should'|_ }}</h4>
+                <p>
+                    {{ 'secure_pw_long_password'|_ }}
+                </p>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-default" data-dismiss="modal">{{ 'close'|_ }}</button>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/resources/views/partials/transaction-row.twig b/resources/views/partials/transaction-row.twig
new file mode 100644
index 0000000000..9bd55d9c60
--- /dev/null
+++ b/resources/views/partials/transaction-row.twig
@@ -0,0 +1 @@
+<h1 style="color:red;">REPLACE ME</h1>
diff --git a/resources/views/piggy-banks/add-mobile.twig b/resources/views/piggy-banks/add-mobile.twig
new file mode 100644
index 0000000000..cf1c811d1c
--- /dev/null
+++ b/resources/views/piggy-banks/add-mobile.twig
@@ -0,0 +1,44 @@
+{% extends './v1/layout/default' %}
+
+{% block breadcrumbs %}
+    {{ Breadcrumbs.render(Route.getCurrentRoute.getName, piggyBank) }}
+{% endblock %}
+
+{% block content %}
+    <form method="POST" action="{{ route('piggy-banks.add', piggyBank.id) }}" accept-charset="UTF-8" class="form-horizontal" id="store">
+        <input name="_token" type="hidden" value="{{ csrf_token() }}">
+        <div class="row">
+            <div class="col-lg-12 col-md-12 col-sm-12">
+                <div class="box box-primary">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ trans('firefly.add_money_to_piggy', {name: piggyBank.name}) }}</h3>
+                    </div>
+                    <div class="box-body">
+                        {% if maxAmount > 0 %}
+                            <p>
+                                {{ 'max_amount_add'|_ }}: {{ formatAmountByCurrency(currency,maxAmount) }}.
+                            </p>
+
+                            <div class="input-group">
+                                <div class="input-group-addon">{{ currency.symbol|raw }}</div>
+                                <input step="any" class="form-control" id="amount" autocomplete="off" name="amount" max="{{ maxAmount|round(2) }}"
+                                       type="number"/>
+                            </div>
+                            <p>
+                                &nbsp;
+                            </p>
+                            <button type="submit" class="btn btn-success pull-right">
+                                {{ 'add'|_ }}
+                            </button>
+                        {% else %}
+                            <p class="text-danger">{{ 'no_money_for_piggy'|_ }}</p>
+                        {% endif %}
+
+
+                    </div>
+                </div>
+            </div>
+
+        </div>
+    </form>
+{% endblock %}
diff --git a/resources/views/piggy-banks/add.twig b/resources/views/piggy-banks/add.twig
new file mode 100644
index 0000000000..9c4da8d832
--- /dev/null
+++ b/resources/views/piggy-banks/add.twig
@@ -0,0 +1,37 @@
+<div class="modal-dialog">
+    <div class="modal-content">
+        <div class="modal-header">
+            <button type="button" class="close" data-dismiss="modal"><span>&times;</span><span class="sr-only">{{ 'close'|_ }}</span>
+            </button>
+            <h4 class="modal-title">{{ trans('firefly.add_money_to_piggy_title', {name: piggyBank.name}) }}</h4>
+        </div>
+        {% if maxAmount > 0 %}
+            <form style="display: inline;" id="add" action="{{ route('piggy-banks.add', piggyBank.id) }}" method="POST">
+                <div class="modal-body">
+                    <input type="hidden" name="_token" value="{{ csrf_token() }}"/>
+
+                    <p>
+                        {{ 'max_amount_add'|_ }}: {{ formatAmountByCurrency(currency,maxAmount) }}.
+                    </p>
+
+                    <div class="input-group">
+                        <div class="input-group-addon">{{ currency.symbol|raw }}</div>
+                        <input step="any" class="form-control" id="amount" autocomplete="off" name="amount" max="{{ maxAmount|round(currency.decimal_places) }}" type="number"/>
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-default" data-dismiss="modal">{{ 'close'|_ }}</button>
+                    <button type="submit" class="btn btn-primary">{{ 'add'|_ }}</button>
+                </div>
+            </form>
+        {% else %}
+            <div class="modal-body">
+                <p class="text-danger">{{ 'no_money_for_piggy'|_ }}</p>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-default" data-dismiss="modal">{{ 'close'|_ }}</button>
+            </div>
+        {% endif %}
+    </div>
+</div>
+
diff --git a/resources/views/piggy-banks/create.twig b/resources/views/piggy-banks/create.twig
new file mode 100644
index 0000000000..bcb5c84ece
--- /dev/null
+++ b/resources/views/piggy-banks/create.twig
@@ -0,0 +1,75 @@
+{% extends './v1/layout/default' %}
+
+{% block breadcrumbs %}
+    {{ Breadcrumbs.render(Route.getCurrentRoute.getName) }}
+{% endblock %}
+
+{% block content %}
+
+    <form method="POST" action="{{ route('piggy-banks.store') }}" accept-charset="UTF-8" class="form-horizontal" id="store" enctype="multipart/form-data">
+        <input name="_token" type="hidden" value="{{ csrf_token() }}">
+        <input type="hidden" name="repeats" value="0"/>
+        <div class="row">
+            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
+                <div class="box box-primary">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ 'mandatoryFields'|_ }}</h3>
+                    </div>
+                    <div class="box-body">
+
+                        {{ ExpandedForm.text('name') }}
+                        {{ AccountForm.assetAccountList('account_id', null, {label: 'saveOnAccount'|_   }) }}
+                        {{ ExpandedForm.amountNoCurrency('targetamount') }}
+
+                    </div>
+                </div>
+            </div>
+            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
+                <div class="box">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ 'optionalFields'|_ }}</h3>
+                    </div>
+                    <div class="box-body">
+                        {{ ExpandedForm.date('targetdate') }}
+                        {{ ExpandedForm.textarea('notes', null, {helpText: trans('firefly.field_supports_markdown')} ) }}
+                        {{ ExpandedForm.file('attachments[]', {'multiple': 'multiple','helpText': trans('firefly.upload_max_file_size', {'size': uploadSize|filesize}) }) }}
+                        {{ ExpandedForm.objectGroup() }}
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
+                {# panel for options #}
+                <div class="box">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ 'options'|_ }}</h3>
+                    </div>
+                    <div class="box-body">
+                        {{ ExpandedForm.optionsList('create','piggy bank') }}
+                    </div>
+                    <div class="box-footer">
+                        <button type="submit" class="btn btn-success pull-right">
+                            {{ 'store_piggy_bank'|_ }}
+                        </button>
+                    </div>
+                </div>
+
+            </div>
+        </div>
+    </form>
+{% endblock %}
+{% block scripts %}
+    <script type="text/javascript" src="v1/js/lib/modernizr-custom.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/lib/jquery-ui.min.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/ff/piggy-banks/create.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+
+    {# auto complete for object groups #}
+    <script type="text/javascript" src="v1/js/lib/typeahead/typeahead.bundle.min.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/ff/object-groups/create-edit.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+{% endblock %}
+
+{% block styles %}
+    <link href="v1/css/jquery-ui/jquery-ui.structure.min.css?v={{ FF_VERSION }}" type="text/css" rel="stylesheet"  media="all" nonce="{{ JS_NONCE }}">
+    <link href="v1/css/jquery-ui/jquery-ui.theme.min.css?v={{ FF_VERSION }}" type="text/css" rel="stylesheet"  media="all" nonce="{{ JS_NONCE }}">
+{% endblock %}
diff --git a/resources/views/piggy-banks/delete.twig b/resources/views/piggy-banks/delete.twig
new file mode 100644
index 0000000000..2cb1982a74
--- /dev/null
+++ b/resources/views/piggy-banks/delete.twig
@@ -0,0 +1,35 @@
+{% extends './v1/layout/default' %}
+
+{% block breadcrumbs %}
+    {{ Breadcrumbs.render(Route.getCurrentRoute.getName, piggyBank) }}
+{% endblock %}
+
+{% block content %}
+
+    <form method="POST" action="{{ route('piggy-banks.destroy',piggyBank.id) }}" accept-charset="UTF-8" class="form-horizontal" id="destroy">
+        <input name="_token" type="hidden" value="{{ csrf_token() }}">
+        <div class="row">
+            <div class="col-lg-6 col-lg-offset-3 col-md-12 col-sm-12">
+                <div class="box box-danger">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ trans('firefly.delete_piggy_bank', {'name': piggyBank.name}) }}</h3>
+                    </div>
+                    <div class="box-body">
+                        <p class="text-danger">
+                            {{ trans('form.permDeleteWarning') }}
+                        </p>
+
+                        <p>
+                            {{ trans('form.piggyBank_areYouSure', {'name': piggyBank.name}) }}
+                        </p>
+                    </div>
+                    <div class="box-footer">
+                        <input type="submit" name="submit" value="{{ trans('form.deletePermanently') }}" class="btn btn-danger pull-right"/>
+                        <a href="{{ URL.previous() }}" class="btn-default btn">{{ trans('form.cancel') }}</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+    </form>
+{% endblock %}
diff --git a/resources/views/piggy-banks/edit.twig b/resources/views/piggy-banks/edit.twig
new file mode 100644
index 0000000000..963ddfa1ba
--- /dev/null
+++ b/resources/views/piggy-banks/edit.twig
@@ -0,0 +1,77 @@
+{% extends './v1/layout/default' %}
+
+{% block breadcrumbs %}
+    {{ Breadcrumbs.render(Route.getCurrentRoute.getName, piggyBank) }}
+{% endblock %}
+
+{% block content %}
+    {{ Form.model(piggyBank, {'class' : 'form-horizontal','enctype': 'multipart/form-data','id' : 'update','url' : route('piggy-banks.update',piggyBank.id)}) }}
+
+    <input type="hidden" name="repeats" value="0"/>
+    <input type="hidden" name="id" value="{{ piggyBank.id }}"/>
+
+    <div class="row">
+        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
+            <div class="box box-primary">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'mandatoryFields'|_ }}</h3>
+                </div>
+                <div class="box-body">
+
+                    {{ ExpandedForm.text('name') }}
+                    {{ AccountForm.assetAccountList('account_id', null, {label: 'saveOnAccount'|_   }) }}
+                    {{ ExpandedForm.amountNoCurrency('targetamount') }}
+
+                </div>
+            </div>
+
+        </div>
+        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'optionalFields'|_ }}</h3>
+                </div>
+                <div class="box-body">
+                    {{ ExpandedForm.date('startdate') }}
+                    {{ ExpandedForm.date('targetdate') }}
+                    {{ ExpandedForm.textarea('notes', null, {helpText: trans('firefly.field_supports_markdown')}) }}
+                    {{ ExpandedForm.file('attachments[]', {'multiple': 'multiple','helpText': trans('firefly.upload_max_file_size', {'size': uploadSize|filesize}) }) }}
+                    {{ ExpandedForm.objectGroup() }}
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
+            {# panel for options #}
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'options'|_ }}</h3>
+                </div>
+                <div class="box-body">
+                    {{ ExpandedForm.optionsList('update','piggy bank') }}
+                </div>
+                <div class="box-footer">
+                    <button type="submit" class="btn btn-success pull-right">
+                        {{ 'update_piggy_button'|_ }}
+                    </button>
+                </div>
+            </div>
+
+        </div>
+    </div>
+    </form>
+{% endblock %}
+{% block scripts %}
+    <script type="text/javascript" src="v1/js/lib/modernizr-custom.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/lib/jquery-ui.min.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/ff/piggy-banks/create.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    {# auto complete for object groups #}
+    <script type="text/javascript" src="v1/js/lib/typeahead/typeahead.bundle.min.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/ff/object-groups/create-edit.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+{% endblock %}
+
+{% block styles %}
+    <link href="v1/css/jquery-ui/jquery-ui.structure.min.css?v={{ FF_VERSION }}" type="text/css" rel="stylesheet"  media="all" nonce="{{ JS_NONCE }}">
+    <link href="v1/css/jquery-ui/jquery-ui.theme.min.css?v={{ FF_VERSION }}" type="text/css" rel="stylesheet"  media="all" nonce="{{ JS_NONCE }}">
+{% endblock %}
diff --git a/resources/views/piggy-banks/index.twig b/resources/views/piggy-banks/index.twig
new file mode 100644
index 0000000000..6348dc3803
--- /dev/null
+++ b/resources/views/piggy-banks/index.twig
@@ -0,0 +1,80 @@
+{% extends './v1/layout/default' %}
+
+{% block breadcrumbs %}
+    {{ Breadcrumbs.render(Route.getCurrentRoute.getName) }}
+{% endblock %}
+
+{% block content %}
+    {% if piggyBanks|length == 0 %}
+        {% include 'partials.empty' with {objectType: 'default', type: 'piggies',route: route('piggy-banks.create')} %}
+    {% else %}
+<div class="row">
+    <div class="col-lg-12 col-md-12 col-sm-12">
+        <div class="box">
+            <div class="box-header with-border">
+                <h3 class="box-title">{{ 'piggyBanks'|_ }}</h3>
+            </div>
+            <div class="box-body no-padding">
+                <div style="padding:8px;">
+                    <a class="btn btn-success" href="{{ route('piggy-banks.create') }}"><span class="fa fa-plus fa-fw"></span> {{ 'create_new_piggy_bank'|_ }}</a>
+                </div>
+                {% include 'list/piggy-banks' %}
+            </div>
+            <div class="box-footer">
+                <a class="btn btn-success" href="{{ route('piggy-banks.create') }}"><span class="fa fa-plus fa-fw"></span> {{ 'create_new_piggy_bank'|_ }}</a>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="row">
+    <div class="col-lg-12 col-md-12 col-sm-12">
+        <div class="box">
+            <div class="box-header with-border">
+                <h3 class="box-title">{{ 'account_status'|_ }}</h3>
+            </div>
+            <div class="box-body no-padding">
+                <table class="table table-responsive table-hover" id="accountStatus">
+                    <thead>
+                    <tr>
+                        <th>{{ 'account'|_ }}</th>
+                        <th style="text-align:right;" class="hidden-sm hidden-xs">{{ 'balance'|_ }}</th>
+                        <th style="text-align:right;">{{ 'left_for_piggy_banks'|_ }}</th>
+                        <th style="text-align:right;" class="hidden-sm hidden-xs">{{ 'sum_of_piggy_banks'|_ }}</th>
+                        <th style="text-align:right;" class="hidden-sm hidden-xs">{{ 'saved_so_far'|_ }}</th>
+                        <th style="text-align:right;" class="hidden-sm hidden-xs">{{ 'left_to_save'|_ }}</th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    {% for id,info in accounts %}
+                        <tr>
+                            <td><a href="{{ route('accounts.show',id) }}" title="{{ info.name }}">{{ info.name }}</a></td>
+                            <td style="text-align:right;" class="hidden-sm hidden-xs">
+                                {{ formatAmountBySymbol(info.current_balance,info.currency_symbol,info.currency_decimal_places) }}
+                                </td>
+                            <td style="text-align:right;">
+                                {{ formatAmountBySymbol(info.left,info.currency_symbol,info.currency_decimal_places) }}
+                            </td>
+                            <td style="text-align:right;" class="hidden-sm hidden-xs">
+                                {{ formatAmountBySymbol(info.target,info.currency_symbol,info.currency_decimal_places) }}
+                            </td>
+                            <td style="text-align:right;" class="hidden-sm hidden-xs">
+                                {{ formatAmountBySymbol(info.saved,info.currency_symbol,info.currency_decimal_places) }}
+                                </td>
+                            <td style="text-align:right;" class="hidden-sm hidden-xs">
+                                {{ formatAmountBySymbol(info.to_save,info.currency_symbol,info.currency_decimal_places) }}
+                            </td>
+                        </tr>
+                    {% endfor %}
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+</div>
+{% endif %}
+{% endblock %}
+{% block scripts %}
+    <script src="v1/js/lib/jquery-ui.min.js?v={{ FF_VERSION }}" type="text/javascript" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/ff/piggy-banks/index.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+{% endblock %}
diff --git a/resources/views/piggy-banks/remove-mobile.twig b/resources/views/piggy-banks/remove-mobile.twig
new file mode 100644
index 0000000000..71594408bb
--- /dev/null
+++ b/resources/views/piggy-banks/remove-mobile.twig
@@ -0,0 +1,40 @@
+{% extends './v1/layout/default' %}
+{% block breadcrumbs %}
+    {{ Breadcrumbs.render(Route.getCurrentRoute.getName, piggyBank) }}
+{% endblock %}
+
+{% block content %}
+    <form id="remove" class="form-horizontal" action="{{ route('piggy-banks.remove', piggyBank.id) }}" method="POST">
+        <input type="hidden" name="_token" value="{{ csrf_token() }}"/>
+        <div class="row">
+            <div class="col-lg-12 col-md-12 col-sm-12">
+                <div class="box box-primary">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ trans('firefly.remove_money_from_piggy_title', {name: piggyBank.name}) }}</h3>
+                    </div>
+                    <div class="box-body">
+
+                        <p>
+                            {{ 'max_amount_remove'|_ }}: {{ formatAmountByCurrency(currency, repetition.currentamount) }}.
+                        </p>
+
+                        <div class="input-group">
+                            <div class="input-group-addon">{{ currency.symbol|raw }}</div>
+                            <input step="any" class="form-control" id="amount" autocomplete="off" name="amount" max="{{ repetition.currentamount }}"
+                                   type="number"/>
+                        </div>
+                        <p>
+                            &nbsp;
+                        </p>
+                        <button type="submit" class="btn btn-success pull-right">
+                            {{ 'remove'|_ }}
+                        </button>
+
+
+                    </div>
+                </div>
+            </div>
+
+        </div>
+    </form>
+{% endblock %}
diff --git a/resources/views/piggy-banks/remove.twig b/resources/views/piggy-banks/remove.twig
new file mode 100644
index 0000000000..7527b7d798
--- /dev/null
+++ b/resources/views/piggy-banks/remove.twig
@@ -0,0 +1,30 @@
+<div class="modal-dialog">
+    <div class="modal-content">
+        <form style="display: inline;" id="remove" action="{{ route('piggy-banks.remove', piggyBank.id) }}" method="POST">
+            <input type="hidden" name="_token" value="{{ csrf_token() }}"/>
+
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal"><span>&times;</span><span class="sr-only">{{ 'close'|_ }}</span>
+                </button>
+                <h4 class="modal-title">{{ trans('firefly.remove_money_from_piggy_title', {name: piggyBank.name}) }}</h4>
+            </div>
+
+            <div class="modal-body">
+                <p>
+                    {{ 'max_amount_remove'|_ }}: {{ formatAmountByCurrency(currency, repetition.currentamount) }}.
+                </p>
+
+                <div class="input-group">
+                    <div class="input-group-addon">{{ currency.symbol|raw }}</div>
+                    <input step="any" class="form-control" id="amount" autocomplete="off" name="amount" max="{{ repetition.currentamount }}"
+                           type="number">
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-default" data-dismiss="modal">{{ 'close'|_ }}</button>
+                <button type="submit" class="btn btn-primary">{{ 'remove'|_ }}</button>
+            </div>
+        </form>
+    </div>
+
+</div>
diff --git a/resources/views/piggy-banks/show.twig b/resources/views/piggy-banks/show.twig
new file mode 100644
index 0000000000..1d3b9c55b7
--- /dev/null
+++ b/resources/views/piggy-banks/show.twig
@@ -0,0 +1,146 @@
+{% extends './v1/layout/default' %}
+
+{% block breadcrumbs %}
+    {{ Breadcrumbs.render(Route.getCurrentRoute.getName, piggyBank) }}
+{% endblock %}
+
+{% block content %}
+    <div class="row">
+        <div class="col-lg-8 col-md-8 col-sm-6">
+            <div class="box" id="piggyChart">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'events'|_ }}</h3>
+                </div>
+                <div class="box-body">
+                    <canvas id="piggy-bank-history" style="width:100%;height:400px;" height="400" width="100%"></canvas>
+                </div>
+            </div>
+        </div>
+        <div class="col-lg-4 col-md-4 col-sm-6">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'details'|_ }}</h3>
+                    <div class="box-tools pull-right">
+                        <div class="btn-group">
+                            <button class="btn btn-box-tool dropdown-toggle" data-toggle="dropdown"><span class="fa fa-ellipsis-v"></span></button>
+                            <ul class="dropdown-menu" role="menu">
+                                <li><a href="{{ route('piggy-banks.edit', piggy.id) }}"><span class="fa fa-pencil fa-fw"></span> {{ 'edit'|_ }}</a></li>
+                                <li><a href="{{ route('piggy-banks.delete', piggy.id) }}"><span class="fa fa-trash fa-fw"></span> {{ 'delete'|_ }}</a></li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+                <div class="box-body no-padding">
+                    <table class="table table-responsive table-hover" id="piggyDetails">
+                        <tr>
+                            <td style="width:40%;">{{ 'account'|_ }}</td>
+                            <td><a href="{{ route('accounts.show', piggyBank.account_id) }}">{{ piggyBank.account.name }}</a></td>
+                        </tr>
+                        {% if piggy.object_group_title %}
+                        <tr>
+                            <td style="width:40%;">{{ 'object_group'|_ }}</td>
+                            <td>{{ piggy.object_group_title }}</a></td>
+                        </tr>
+                        {% endif %}
+                        <tr>
+                            <td>{{ 'target_amount'|_ }}</td>
+                            <td>
+                                {{ formatAmountBySymbol(piggy.target_amount, piggy.currency_symbol, piggy.currency_decimal_places) }}
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>{{ 'saved_so_far'|_ }}</td>
+                            <td>
+                                {{ formatAmountBySymbol(piggy.current_amount, piggy.currency_symbol, piggy.currency_decimal_places) }}
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>{{ 'left_to_save'|_ }}</td>
+                            <td>
+                                {{ formatAmountBySymbol(piggy.left_to_save, piggy.currency_symbol, piggy.currency_decimal_places) }}
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>{{ 'start_date'|_ }}</td>
+                            <td>
+                                {% if piggyBank.startdate %}
+                                    {{ piggyBank.startdate.formatLocalized(monthAndDayFormat) }}
+                                {% else %}
+                                    <em>{{ 'no_start_date'|_ }}</em>
+                                {% endif %}
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>{{ 'target_date'|_ }}</td>
+                            <td>
+                                {% if piggyBank.targetdate %}
+                                    {{ piggyBank.targetdate.formatLocalized(monthAndDayFormat) }}
+                                {% else %}
+                                    <em>{{ 'no_target_date'|_ }}</em>
+                                {% endif %}
+                            </td>
+                        </tr>
+                        {% if piggyBank.targetdate %}
+                            <tr>
+                                <td>{{ 'suggested_amount'|_ }}</td>
+                                <td>
+                                    {{ formatAmountBySymbol(piggy.save_per_month, piggy.currency_symbol, piggy.currency_decimal_places) }}
+
+                                </td>
+                            </tr>
+                        {% endif %}
+                    </table>
+                </div>
+            </div>
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'transactions'|_ }}</h3>
+                </div>
+                <div class="box-body no-padding" id="piggyEvents">
+                    {% include 'list/piggy-bank-events' %}
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="row">
+
+        {% if piggy.notes %}
+            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
+
+                <div class="box">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ trans('form.notes') }}</h3>
+                    </div>
+                    <div class="box-body markdown">{{ piggy.notes|default('')|markdown }}
+                    </div>
+                </div>
+
+            </div>
+        {% endif %}
+        {% if attachments.count() > 0 %}
+            <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
+                <div class="box">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">
+                            {{ 'attachments'|_ }}
+                        </h3>
+                    </div>
+                    <div class="box-body no-padding">
+                        {% include 'list.attachments' %}
+                    </div>
+                </div>
+            </div>
+        {% endif %}
+    </div>
+{% endblock %}
+
+{% block scripts %}
+    <script type="text/javascript" nonce="{{ JS_NONCE }}">
+        var piggyBankID = {{ piggyBank.id }};
+    </script>
+
+    <script type="text/javascript" src="v1/js/lib/Chart.bundle.min.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/ff/charts.defaults.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/ff/charts.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/ff/piggy-banks/show.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+{% endblock %}
diff --git a/resources/views/popup/list/journals.twig b/resources/views/popup/list/journals.twig
new file mode 100644
index 0000000000..90ff182770
--- /dev/null
+++ b/resources/views/popup/list/journals.twig
@@ -0,0 +1,151 @@
+<table class="table table-hover table-condensed">
+    <thead>
+    <tr>
+        <th>&nbsp;</th>
+        <th>{{ trans('list.description') }}</th>
+        <th>{{ trans('list.amount') }}</th>
+        <th class="hidden-sm hidden-xs">{{ trans('list.date') }}</th>
+        {% if not hideSource %}
+            <th class="hidden-xs">{{ trans('list.from') }}</th>
+        {% endif %}
+        {% if not hideDestination %}
+            <th class="hidden-xs">{{ trans('list.to') }}</th>
+        {% endif %}
+
+        {# Hide budgets? #}
+        {% if not hideBudget %}
+            <th class="hidden-xs">
+                <span class="fa fa-pie-chart fa-fw" title="{{ trans('list.budget') }}"></span>
+            </th>
+        {% endif %}
+
+        {# Hide categories? #}
+        {% if not hideCategory %}
+            <th class="hidden-xs">
+                <span class="fa fa-bookmark fa-fw" title="{{ trans('list.category') }}"></span>
+            </th>
+        {% endif %}
+    </tr>
+    </thead>
+    <tbody>
+    {# Make sum: #}
+    {% set sum = 0 %}
+    {% set symbol = '' %}
+    {% set decimal_places =2 %}
+    {% for transaction in journals %}
+        {# add to sum #}
+        {% set symbol = transaction.currency_symbol %}
+        {% set decimal_places = transaction.currency_decimal_places %}
+        <tr class="drag" data-date="{{ transaction.date.format('Y-m-d') }}" data-id="{{ transaction.journal_id }}">
+            <td class="hidden-xs">
+                {% if transaction.transaction_type_type == 'Withdrawal' %}
+                    <span class="fa fa-long-arrow-left fa-fw" title="{{ trans('firefly.Withdrawal') }}"></span>
+                {% endif %}
+
+                {% if transaction.transaction_type_type == 'Deposit' %}
+                    <span class="fa fa-long-arrow-right fa-fw" title="{{ trans('firefly.Deposit') }}"></span>
+                {% endif %}
+
+                {% if transaction.transaction_type_type == 'Transfer' %}
+                    <span class="fa fa-exchange fa-fw" title="{{ trans('firefly.Deposit') }}"></span>
+                {% endif %}
+
+                {% if transaction.transaction_type_type == 'Reconciliation' %}
+                    XX
+                {% endif %}
+
+                {% if transaction.transaction_type_type == 'Opening balance' %}
+                    XX
+                {% endif %}
+            </td>
+
+            <td>
+                <a href="{{ route('transactions.show',transaction.transaction_group_id) }}">
+                    {% if transaction.group_title|length > 0 %}
+                        {{ transaction.group_title }} ({{ transaction.description }})
+                    {% else %}
+                        {{ transaction.description }}
+                    {% endif %}
+                </a>
+            </td>
+
+            <td>
+                {% if transaction.transaction_type_type == 'Deposit' %}
+                    {{ formatAmountBySymbol(transaction.amount*-1, transaction.currency_symbol, transaction.currency_decimal_places) }}
+                    {% if null != transaction.foreign_amount %}
+                        ({{ formatAmountBySymbol(transaction.foreign_amount*-1, transaction.foreign_currency_symbol, transaction.foreign_currency_decimal_places) }})
+                    {% endif %}
+                    {% set sum = (sum + (transaction.amount*-1)) %}
+                {% elseif transaction.transaction_type_type == 'Transfer' %}
+                    <span class="text-info">
+                        {{ formatAmountBySymbol(transaction.amount*-1, transaction.currency_symbol, transaction.currency_decimal_places, false) }}
+                        {% if null != transaction.foreign_amount %}
+                            ({{ formatAmountBySymbol(transaction.foreign_amount*-1, transaction.foreign_currency_symbol, transaction.foreign_currency_decimal_places, false) }})
+                        {% endif %}
+                            </span>
+                    {% set sum = (sum + transaction.amount*-1) %}
+                {% else %}
+                    {{ formatAmountBySymbol(transaction.amount, transaction.currency_symbol, transaction.currency_decimal_places) }}
+                    {% if null != transaction.foreign_amount %}
+                        ({{ formatAmountBySymbol(transaction.foreign_amount, transaction.foreign_currency_symbol, transaction.foreign_currency_decimal_places) }})
+                    {% endif %}
+                    {% set sum = (sum + transaction.amount) %}
+                {% endif %}
+
+            </td>
+
+            <td class="hidden-sm hidden-xs">
+                {{ transaction.date.formatLocalized(monthAndDayFormat) }}
+            </td>
+
+            {% if not hideSource %}
+                <td class="hidden-xs">
+                    <a href="{{ route('accounts.show', transaction.source_account_id) }}">
+                        {{ transaction.source_account_name }}
+                    </a>
+                </td>
+            {% endif %}
+
+            {% if not hideDestination %}
+                <td class="hidden-xs">
+                    <a href="{{ route('accounts.show', transaction.destination_account_id) }}">
+                        {{ transaction.destination_account_name }}
+                    </a>
+                </td>
+            {% endif %}
+
+            <!-- Do NOT hide the budget? -->
+            {% if not hideBudget %}
+                <td class="hidden-xs">
+                    {% if transaction.budget_id %}
+                        <a href="{{ route('budgets.show', [transaction.budget_id]) }}">
+                            {{ transaction.budget_name }}
+                        </a>
+                    {% endif %}
+                </td>
+            {% endif %}
+
+            <!-- Do NOT hide the category? -->
+            {% if not hideCategory %}
+                <td class="hidden-xs">
+                    {% if transaction.category_id %}
+                        <a href="{{ route('categories.show', [transaction.category_id]) }}">
+                            {{ transaction.category_name }}
+                        </a>
+                    {% endif %}
+                </td>
+            {% endif %}
+        </tr>
+    {% endfor %}
+    </tbody>
+    <tfoot>
+    <tr>
+        <td colspan="2" style="text-align: right;"><em>{{ 'sum'|_ }}:</em></td>
+        <td>
+            {% if sum != 0 %}
+                {{ formatAmountBySymbol(sum, symbol, decimal_places) }}
+            {% endif %}
+        </td>
+    </tr>
+    </tfoot>
+</table>
diff --git a/resources/views/popup/report/balance-amount.twig b/resources/views/popup/report/balance-amount.twig
new file mode 100644
index 0000000000..c0d779ae57
--- /dev/null
+++ b/resources/views/popup/report/balance-amount.twig
@@ -0,0 +1,18 @@
+<div class="modal-dialog modal-lg" role="document">
+    <div class="modal-content">
+        <div class="modal-header">
+            <button type="button" class="close" data-dismiss="modal" aria-label="{{ 'close'|_ }}"><span>&times;</span></button>
+            <h4 class="modal-title" id="balanceAmountTitle">{{ trans('firefly.balance_amount',
+                    {budget: budget.name, account: account.name,  start: start.formatLocalized(monthAndDayFormat), end: end.formatLocalized(monthAndDayFormat)}
+                ) }}</h4>
+        </div>
+        <div class="modal-body">
+            {% set hideSource = true %}
+            {% set hideBudget = true %}
+            {% include 'popup.list.journals' %}
+        </div>
+        <div class="modal-footer">
+            <button type="button" class="btn btn-default" data-dismiss="modal">{{ 'close'|_ }}</button>
+        </div>
+    </div>
+</div>
diff --git a/resources/views/popup/report/budget-spent-amount.twig b/resources/views/popup/report/budget-spent-amount.twig
new file mode 100644
index 0000000000..ca6fc60058
--- /dev/null
+++ b/resources/views/popup/report/budget-spent-amount.twig
@@ -0,0 +1,17 @@
+<div class="modal-dialog modal-lg" role="document">
+    <div class="modal-content">
+        <div class="modal-header">
+            <button type="button" class="close" data-dismiss="modal" aria-label="{{ 'close'|_ }}"><span>&times;</span></button>
+            <h4 class="modal-title" id="budgetSpentAmountLabel">
+                {{ trans('firefly.budget_spent_amount', {start: start.formatLocalized(monthAndDayFormat), end: end.formatLocalized(monthAndDayFormat), budget: budget.name}) }}
+            </h4>
+        </div>
+        <div class="modal-body">
+            {% set hideBudget = true %}
+            {% include 'popup.list.journals' %}
+        </div>
+        <div class="modal-footer">
+            <button type="button" class="btn btn-default" data-dismiss="modal">{{ 'close'|_ }}</button>
+        </div>
+    </div>
+</div>
diff --git a/resources/views/popup/report/category-entry.twig b/resources/views/popup/report/category-entry.twig
new file mode 100644
index 0000000000..ac2b1059a7
--- /dev/null
+++ b/resources/views/popup/report/category-entry.twig
@@ -0,0 +1,16 @@
+<div class="modal-dialog modal-lg" role="document">
+    <div class="modal-content">
+        <div class="modal-header">
+            <button type="button" class="close" data-dismiss="modal" aria-label="{{ 'close'|_ }}"><span>&times;</span></button>
+            <h4 class="modal-title"
+                id="expenseEntryTitle">{{ trans('firefly.category_entry', {name: category.name, start: start.formatLocalized(monthAndDayFormat), end: end.formatLocalized(monthAndDayFormat)}) }}</h4>
+        </div>
+        <div class="modal-body">
+            {% set hideCategory = true %}
+            {% include 'popup.list.journals' %}
+        </div>
+        <div class="modal-footer">
+            <button type="button" class="btn btn-default" data-dismiss="modal">{{ 'close'|_ }}</button>
+        </div>
+    </div>
+</div>
diff --git a/resources/views/popup/report/expense-entry.twig b/resources/views/popup/report/expense-entry.twig
new file mode 100644
index 0000000000..e6d27a5a77
--- /dev/null
+++ b/resources/views/popup/report/expense-entry.twig
@@ -0,0 +1,16 @@
+<div class="modal-dialog modal-lg" role="document">
+    <div class="modal-content">
+        <div class="modal-header">
+            <button type="button" class="close" data-dismiss="modal" aria-label="{{ 'close'|_ }}"><span>&times;</span></button>
+            <h4 class="modal-title"
+                id="expenseEntryTitle">{{ trans('firefly.expense_entry', {name: account.name, start: start.formatLocalized(monthAndDayFormat), end: end.formatLocalized(monthAndDayFormat)}) }}</h4>
+        </div>
+        <div class="modal-body">
+            {% set hideDestination = true %}
+            {% include 'popup.list.journals' %}
+        </div>
+        <div class="modal-footer">
+            <button type="button" class="btn btn-default" data-dismiss="modal">{{ 'close'|_ }}</button>
+        </div>
+    </div>
+</div>
diff --git a/resources/views/popup/report/income-entry.twig b/resources/views/popup/report/income-entry.twig
new file mode 100644
index 0000000000..6f6d5c7d26
--- /dev/null
+++ b/resources/views/popup/report/income-entry.twig
@@ -0,0 +1,19 @@
+<div class="modal-dialog modal-lg" role="document">
+    <div class="modal-content">
+        <div class="modal-header">
+            <button type="button" class="close" data-dismiss="modal" aria-label="{{ 'close'|_ }}"><span>&times;</span></button>
+            <h4 class="modal-title"
+                id="incomeEntryTitle">{{ trans('firefly.income_entry', {name: account.name, start: start.formatLocalized(monthAndDayFormat), end: end.formatLocalized(monthAndDayFormat)}) }}</h4>
+        </div>
+        <div class="modal-body">
+            {% set hideBudget = true %}
+            {% set hideSource = true %}
+            {% set accountPerspective = account %}
+            {% set inverseAmount = true %}
+            {% include 'popup.list.journals' %}
+        </div>
+        <div class="modal-footer">
+            <button type="button" class="btn btn-default" data-dismiss="modal">{{ 'close'|_ }}</button>
+        </div>
+    </div>
+</div>
diff --git a/resources/views/preferences/index.twig b/resources/views/preferences/index.twig
new file mode 100644
index 0000000000..7bc52c708a
--- /dev/null
+++ b/resources/views/preferences/index.twig
@@ -0,0 +1,251 @@
+{% extends './v1/layout/default' %}
+
+{% block breadcrumbs %}
+    {{ Breadcrumbs.render(Route.getCurrentRoute.getName) }}
+{% endblock %}
+
+{% block content %}
+    <form method="POST" action="{{ route('preferences.update') }}" accept-charset="UTF-8" class="form-horizontal" id="preferences">
+        <input name="_token" type="hidden" value="{{ csrf_token() }}">
+
+        <div class="row">
+            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
+                {# start of preferences tabs #}
+                <div class="nav-tabs-custom">
+                    <ul class="nav nav-tabs">
+                        <li class="active"><a href="#general" data-toggle="tab" aria-expanded="true">{{ 'preferences_general'|_ }}</a></li>
+                        <li class=""><a href="#frontpage" data-toggle="tab" aria-expanded="false">{{ 'preferences_frontpage'|_ }}</a></li>
+                        <li class=""><a href="#layout" data-toggle="tab" aria-expanded="false">{{ 'preferences_layout'|_ }}</a></li>
+                    </ul>
+                    <div class="tab-content">
+                        <div class="tab-pane active" id="general">
+                            {# general settings here #}
+                            <div class="row">
+                                {# general settings column A #}
+                                <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
+                                    {# language #}
+                                    <div class="preferences-box">
+                                        <h3>{{ 'pref_languages'|_ }}</h3>
+                                        <p class="text-info">{{ 'pref_languages_help'|_ }}</p>
+                                        <div class="form-group">
+                                            <div class="col-sm-12">
+                                                <select class="form-control" id="lang_holder" name="language">
+                                                    {% for key, lang in languages %}
+                                                    <option {% if language == key %}
+                                                        selected
+                                                    {% endif %} value="{{ key }}">{{ lang.name_locale }} ({{ lang.name_english }})</option>
+
+                                                    {% endfor %}
+                                                </select>
+
+
+                                            </div></div>
+
+
+                                        <p class="text-info">
+                                            <br/>
+                                            {{ 'pref_languages_locale'|_ }}
+                                        </p>
+                                    </div>
+
+                                    {# locale #}
+                                    {% if not isDocker %}
+                                    <div class="preferences-box">
+                                        <h3>{{ 'pref_locale'|_ }}</h3>
+                                        <p class="text-info">{{ 'pref_locale_help'|_ }}</p>
+                                        <div class="form-group">
+                                            <div class="col-sm-12">
+                                                <select class="form-control" id="locale_holder" name="locale">
+                                                    {% for key, loc in locales %}
+                                                        <option {% if locale == key %}
+                                                            selected
+                                                        {% endif %} value="{{ key }}">
+                                                            {% if key == 'equal' %}
+                                                                {{ 'equal_to_language'|_ }}
+                                                            {% else %}
+                                                                {{ loc }}
+                                                            {% endif %}</option>
+
+                                                    {% endfor %}
+                                                </select>
+                                            </div></div>
+                                        <ul class="text-warning">
+
+                                            {% if IS_DEMO_SITE %}<li class="text-danger">{{ 'pref_locale_no_demo'|_ }}</li>{% endif %}
+                                        </ul>
+                                    </div>
+                                    {% else %}
+                                    <input type="hidden" name="locale" value="equal" />
+                                    {% endif %}
+
+                                    {# fiscal year #}
+                                    <div class="preferences-box">
+                                        <h3>{{ 'pref_custom_fiscal_year'|_ }}</h3>
+                                        <p class="text-info">
+                                            {{ 'pref_custom_fiscal_year_help'|_ }}
+                                        </p>
+                                        {% set isCustomFiscalYear = customFiscalYear == 1 ? true : false %}
+                                        {{ ExpandedForm.checkbox('customFiscalYear','1',isCustomFiscalYear,{ 'label' : 'pref_custom_fiscal_year_label'|_ }) }}
+                                        {{ ExpandedForm.date('fiscalYearStart',fiscalYearStart,{ 'label' : 'pref_fiscal_year_start_label'|_ }) }}
+                                    </div>
+                                </div>
+
+                                {# general settings column B #}
+                                <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
+
+                                    {# transaction preferences #}
+                                    <div class="preferences-box">
+                                        <h3>{{ 'pref_optional_fields_transaction'|_ }}</h3>
+                                        <p class="text-info">
+                                            {{ 'pref_optional_fields_transaction_help'|_ }}
+                                        </p>
+                                        <h4>{{ 'optional_tj_date_fields'|_ }}</h4>
+                                        {{ ExpandedForm.checkbox('tj[interest_date]','1', tjOptionalFields.interest_date,{ 'label' : 'pref_optional_tj_interest_date'|_ }) }}
+                                        {{ ExpandedForm.checkbox('tj[book_date]','1', tjOptionalFields.book_date,{ 'label' : 'pref_optional_tj_book_date'|_ }) }}
+                                        {{ ExpandedForm.checkbox('tj[process_date]','1', tjOptionalFields.process_date,{ 'label' : 'pref_optional_tj_process_date'|_ }) }}
+                                        {{ ExpandedForm.checkbox('tj[due_date]','1', tjOptionalFields.due_date,{ 'label' : 'pref_optional_tj_due_date'|_ }) }}
+                                        {{ ExpandedForm.checkbox('tj[payment_date]','1', tjOptionalFields.payment_date,{ 'label' : 'pref_optional_tj_payment_date'|_ }) }}
+                                        {{ ExpandedForm.checkbox('tj[invoice_date]','1', tjOptionalFields.invoice_date,{ 'label' : 'pref_optional_tj_invoice_date'|_ }) }}
+
+                                        <h4>{{ 'optional_tj_other_fields'|_ }}</h4>
+                                        {{ ExpandedForm.checkbox('tj[internal_reference]','1', tjOptionalFields.internal_reference,{ 'label' : 'pref_optional_tj_internal_reference'|_ }) }}
+                                        {{ ExpandedForm.checkbox('tj[external_url]','1', tjOptionalFields.external_url,{ 'label' : 'pref_optional_tj_external_url'|_ }) }}
+                                        {{ ExpandedForm.checkbox('tj[notes]','1', tjOptionalFields.notes,{ 'label' : 'pref_optional_tj_notes'|_ }) }}
+                                        {{ ExpandedForm.checkbox('tj[location]','1', tjOptionalFields.location,{ 'label' : 'pref_optional_tj_location'|_ }) }}
+                                        {{ ExpandedForm.checkbox('tj[links]','1', tjOptionalFields.links,{ 'label' : 'pref_optional_tj_links'|_ }) }}
+
+                                        <h4>{{ 'optional_tj_attachment_fields'|_ }}</h4>
+                                        {{ ExpandedForm.checkbox('tj[attachments]','1', tjOptionalFields.attachments,{ 'label' : 'pref_optional_tj_attachments'|_ }) }}
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="tab-pane" id="frontpage">
+                            {# frontpage settings here #}
+                            <div class="row">
+                                {# frontpage settings column a #}
+                                <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
+                                    <div class="preferences-box">
+                                        <h3>{{ 'pref_home_screen_accounts'|_ }}</h3>
+                                        <p class="text-info">{{ 'pref_home_screen_accounts_help'|_ }}</p>
+                                        {% for type, accounts in groupedAccounts %}
+                                            <strong>{{ type }}</strong>
+                                            {% for id, name in accounts %}
+                                            <div class="form-group">
+                                                <div class="col-sm-10">
+                                                    <div class="checkbox">
+                                                        <label>
+                                                            {% if id in frontPageAccounts.data or frontPageAccounts.data|length == 0 %}
+                                                                <input type="checkbox" name="frontPageAccounts[]" value="{{ id }}"
+                                                                       checked> {{ name }}
+                                                            {% else %}
+                                                                <input type="checkbox" name="frontPageAccounts[]"
+                                                                       value="{{ id }}"> {{ name }}
+                                                            {% endif %}
+                                                        </label>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        {% endfor %}
+                                        {% endfor %}
+                                    </div>
+                                </div>
+                                {# frontpage settings column b #}
+                                <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
+                                </div>
+                            </div>
+                        </div>
+                        <div class="tab-pane" id="layout">
+                            {# layout settings here #}
+                            <div class="row">
+                                {# layout settings column A #}
+                                <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
+                                    {# view range #}
+                                    <div class="preferences-box">
+                                        <h3>{{ 'pref_view_range'|_ }}</h3>
+                                        <p class="text-info">{{ 'pref_view_range_help'|_ }}</p>
+
+                                        <div class="radio">
+                                            <label>
+                                                <input type="radio" name="viewRange"
+                                                       value="1D" {% if viewRange == '1D' %} checked {% endif %}>
+                                                {{ 'pref_1D'|_ }}
+                                            </label>
+                                        </div>
+
+                                        <div class="radio">
+                                            <label>
+                                                <input type="radio" name="viewRange"
+                                                       value="1W" {% if viewRange == '1W' %} checked {% endif %}>
+                                                {{ 'pref_1W'|_ }}
+                                            </label>
+                                        </div>
+
+                                        <div class="radio">
+                                            <label>
+                                                <input type="radio" name="viewRange"
+                                                       value="1M" {% if viewRange == '1M' %} checked {% endif %}>
+                                                {{ 'pref_1M'|_ }}
+                                            </label>
+                                        </div>
+
+                                        <div class="radio">
+                                            <label>
+                                                <input type="radio" name="viewRange"
+                                                       value="3M" {% if viewRange == '3M' %} checked {% endif %}>
+                                                {{ 'pref_3M'|_ }}
+                                            </label>
+                                        </div>
+
+                                        <div class="radio">
+                                            <label>
+                                                <input type="radio" name="viewRange"
+                                                       value="6M" {% if viewRange == '6M' %} checked {% endif %}>
+                                                {{ 'pref_6M'|_ }}
+                                            </label>
+                                        </div>
+                                        <div class="radio">
+                                            <label>
+                                                <input type="radio" name="viewRange"
+                                                       value="1Y" {% if viewRange == '1Y' %} checked {% endif %}>
+                                                {{ 'pref_1Y'|_ }}
+                                            </label>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                {# layout settings column B #}
+                                <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
+                                    <div class="preferences-box">
+                                        <h3>{{ 'list_page_size_title'|_ }}</h3>
+                                        <p class="text-info">{{ 'list_page_size_help'|_ }}</p>
+                                        {{ ExpandedForm.integer('listPageSize',listPageSize,{'label' : 'list_page_size_label'|_}) }}
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-lg-12 col-md-12 col-sm-12">
+                <div class="form-group">
+                    <div class="col-sm-12">
+                        <button type="submit" class="btn btn-success btn-lg">{{ 'pref_save_settings'|_ }}</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </form>
+{% endblock %}
+{% block scripts %}
+    <script type="text/javascript" src="v1/js/lib/modernizr-custom.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/lib/jquery-ui.min.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/ff/preferences/index.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+{% endblock %}
+
+{% block styles %}
+    <link href="v1/css/jquery-ui/jquery-ui.structure.min.css?v={{ FF_VERSION }}" type="text/css" rel="stylesheet"  media="all" nonce="{{ JS_NONCE }}">
+    <link href="v1/css/jquery-ui/jquery-ui.theme.min.css?v={{ FF_VERSION }}" type="text/css" rel="stylesheet"  media="all" nonce="{{ JS_NONCE }}">
+{% endblock %}
diff --git a/resources/views/profile/change-email.twig b/resources/views/profile/change-email.twig
new file mode 100644
index 0000000000..d0bd49ab5d
--- /dev/null
+++ b/resources/views/profile/change-email.twig
@@ -0,0 +1,47 @@
+{% extends './v1/layout/default' %}
+
+{% block breadcrumbs %}
+    {{ Breadcrumbs.render(Route.getCurrentRoute.getName) }}
+{% endblock %}
+
+{% block content %}
+    <form method="POST" action="{{ route('profile.change-email.post') }}" accept-charset="UTF-8" class="form-horizontal" id="change-password">
+        <input name="_token" type="hidden" value="{{ csrf_token() }}">
+
+        <div class="row">
+            <div class="col-lg-6 col-md-12 col-sm-12">
+                <div class="box box-primary">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ 'change_your_email'|_ }}</h3>
+                    </div>
+                    <div class="box-body">
+
+                        {% if errors|length > 0 %}
+                            <ul>
+                                {% for error in errors.all %}
+                                    <li class="text-danger">{{ error }}</li>
+                                {% endfor %}
+                            </ul>
+
+                        {% endif %}
+
+
+                        <div class="form-group">
+                            <label for="email" class="col-sm-4 control-label">{{ trans('form.new_email_address') }}</label>
+                            <div class="col-sm-8">
+                                <input type="email" class="form-control" id="email" placeholder="{{ 'new_email_address'|_ }}"
+                                       value="{{ old('email')|default(email) }}"
+                                       name="email">
+                            </div>
+                        </div>
+                        {{ ExpandedForm.staticText('verification',trans('firefly.email_verification')) }}
+
+                    </div>
+                    <div class="box-footer">
+                        <button type="submit" class="btn btn-success pull-right">{{ 'change_your_email'|_ }}</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </form>
+{% endblock %}
diff --git a/resources/views/profile/change-password.twig b/resources/views/profile/change-password.twig
new file mode 100644
index 0000000000..1ef8b2207f
--- /dev/null
+++ b/resources/views/profile/change-password.twig
@@ -0,0 +1,69 @@
+{% extends './v1/layout/default' %}
+
+{% block breadcrumbs %}
+    {{ Breadcrumbs.render(Route.getCurrentRoute.getName) }}
+{% endblock %}
+
+{% block content %}
+    <form method="POST" action="{{ route('profile.change-password.post') }}" accept-charset="UTF-8" class="form-horizontal" id="change-password">
+        <input name="_token" type="hidden" value="{{ csrf_token() }}">
+
+        <div class="row">
+            <div class="col-lg-6 col-md-12 col-sm-12">
+                <div class="box box-primary">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ 'change_your_password'|_ }}</h3>
+                    </div>
+                    <div class="box-body">
+
+                        {% if errors|length > 0 %}
+                            <ul>
+                                {% for error in errors.all %}
+                                    <li class="text-danger">{{ error }}</li>
+                                {% endfor %}
+                            </ul>
+
+                        {% endif %}
+
+
+                        <div class="form-group">
+                            <label for="inputOldPassword" class="col-sm-4 control-label">{{ 'current_password'|_ }}</label>
+
+                            <div class="col-sm-8">
+                                <input type="password" class="form-control" id="inputOldPassword" placeholder="{{ 'current_password'|_ }}"
+                                       name="current_password">
+                            </div>
+                        </div>
+
+                        <div class="form-group">
+                            <label for="inputNewPassword1" class="col-sm-4 control-label">{{ 'new_password'|_ }}</label>
+
+                            <div class="col-sm-8">
+                                <input type="password" class="form-control" id="inputNewPassword1" placeholder="{{ 'new_password'|_ }}" name="new_password">
+                            </div>
+                        </div>
+
+                        <div class="form-group">
+                            <label for="inputNewPassword2" class="col-sm-4 control-label">{{ 'new_password_again'|_ }}</label>
+
+                            <div class="col-sm-8">
+                                <input type="password" class="form-control" id="inputNewPassword2" placeholder="{{ 'new_password_again'|_ }}"
+                                       name="new_password_confirmation">
+                            </div>
+                        </div>
+
+                        {{ ExpandedForm.checkbox('verify_password','1', true) }}
+                        <p>
+                            <a data-toggle="modal" data-target="#passwordModal" href="#passwordModal">{{ 'what_is_pw_security'|_ }}</a>
+                        </p>
+
+                    </div>
+                    <div class="box-footer">
+                        <button type="submit" class="btn btn-success pull-right">{{ 'change_your_password'|_ }}</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </form>
+    {% include 'partials.password-modal' %}
+{% endblock %}
diff --git a/resources/views/profile/code.twig b/resources/views/profile/code.twig
new file mode 100644
index 0000000000..2e8edf81d0
--- /dev/null
+++ b/resources/views/profile/code.twig
@@ -0,0 +1,62 @@
+{% extends './v1/layout/default' %}
+
+{% block breadcrumbs %}
+    {{ Breadcrumbs.render(Route.getCurrentRoute.getName) }}
+{% endblock %}
+
+{% block content %}
+    <form method="POST" action="{{ route('profile.code.store') }}" accept-charset="UTF-8" class="form-horizontal" id="preferences_code">
+        <input name="_token" type="hidden" value="{{ csrf_token() }}">
+        <div class="row">
+            <div class="col-lg-6 col-lg-offset-3 col-md-12 col-sm-12 col-xs-12">
+                <div class="box">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ 'pref_two_factor_auth_code'|_ }}</h3>
+                    </div>
+                    <div class="box-body">
+                        <p class="text-info">
+                            {{ 'pref_two_factor_auth_code_help'|_ }}
+                        </p>
+                        <div class="form group">
+                            <div class="col-sm-8 col-md-offset-4">
+                                <!--<img src="" alt="" title=""
+                                     style="border:1px #ddd solid;"/>
+                                     -->
+                                {{ image|raw }}
+                            </div>
+                            <p>
+                                {{ trans('firefly.2fa_use_secret_instead', {secret: secret|escape})|raw }}
+                            </p>
+                            <p>
+                                {{ '2fa_backup_codes'|_ }}
+                            </p>
+                            <pre>{{ codes }}</pre>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-lg-6 col-lg-offset-3 col-md-12 col-sm-12 col-xs-12">
+                <div class="box">
+                    <div class="box-body">
+                        {{ ExpandedForm.text('code', code) }}
+                    </div>
+                    <div class="box-footer">
+                        <button type="submit" class="btn btn-success btn-lg">{{ 'pref_save_settings'|_ }}</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </form>
+{% endblock %}
+{% block scripts %}
+    <script type="text/javascript" nonce="{{ JS_NONCE }}">
+        $(function () {
+            "use strict";
+
+            // Focus first visible form element.
+            $("form#preferences_code input:enabled:visible:first").first().select();
+        });
+    </script>
+{% endblock %}
diff --git a/resources/views/profile/delete-account.twig b/resources/views/profile/delete-account.twig
new file mode 100644
index 0000000000..64bb5cf8e0
--- /dev/null
+++ b/resources/views/profile/delete-account.twig
@@ -0,0 +1,55 @@
+{% extends './v1/layout/default' %}
+
+{% block breadcrumbs %}
+    {{ Breadcrumbs.render(Route.getCurrentRoute.getName) }}
+{% endblock %}
+
+{% block content %}
+    <form method="POST" action="{{ route('profile.delete-account.post') }}" accept-charset="UTF-8" class="form-horizontal" id="delete-account">
+        <input name="_token" type="hidden" value="{{ csrf_token() }}">
+
+        <div class="row">
+            <div class="col-lg-6 col-md-12 col-sm-12">
+                <div class="box box-danger">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ 'delete_your_account'|_ }}</h3>
+                    </div>
+                    <div class="box-body">
+
+                        <p class="text-danger">
+                            {{ 'delete_your_account_help'|_ }}
+                        </p>
+
+                        <p class="text-danger">
+                            {{ 'delete_your_account_password'|_ }}
+
+                        </p>
+
+                        {% if errors|length > 0 %}
+                            <ul>
+                                {% for error in errors.all %}
+                                    <li class="text-danger">{{ error }}</li>
+                                {% endfor %}
+                            </ul>
+
+                        {% endif %}
+
+                        <div class="form-group">
+                            <label for="password" class="col-sm-4 control-label">{{ 'password'|_ }}</label>
+
+                            <div class="col-sm-8">
+                                <input type="password" class="form-control" id="password" placeholder="{{ 'password'|_ }}" name="password">
+                            </div>
+                        </div>
+                    </div>
+                    <div class="box-footer">
+                        <button type="submit" onclick="return confirm('{{ 'are_you_sure'|_ }}');" class="btn btn-danger pull-right">
+                            {{ 'delete_account_button'|_ }}
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </form>
+
+{% endblock %}
diff --git a/resources/views/profile/index.twig b/resources/views/profile/index.twig
new file mode 100644
index 0000000000..3c7e7db198
--- /dev/null
+++ b/resources/views/profile/index.twig
@@ -0,0 +1,294 @@
+{% set VUE_SCRIPT_NAME = 'profile' %}
+{% extends './v1/layout/default' %}
+
+{% block breadcrumbs %}
+    {{ Breadcrumbs.render(Route.getCurrentRoute.getName) }}
+{% endblock %}
+
+{% block content %}
+
+    <div class="row">
+        <div class="col-lg-8 col-lg-offset-2 col-md-12 col-sm-12">
+
+            <!-- Nav tabs -->
+            <ul class="nav nav-tabs" role="tablist">
+                <li role="presentation" class="active">
+                    <a href="{{ route('profile.index') }}#options" aria-controls="home" role="tab" data-toggle="tab">{{ 'options'|_ }}</a>
+                </li>
+                <li role="presentation">
+                    <a href="#cmd" aria-controls="profile" role="tab" data-toggle="tab">{{ 'command_line_token'|_ }}</a>
+                </li>
+                <li role="presentation">
+                    <a href="#oauth" aria-controls="messages" role="tab" data-toggle="tab">{{ 'oauth'|_ }}</a>
+                </li>
+                {% if true == isInternalAuth and true == isInternalIdentity %}
+                <li role="presentation">
+                    <a href="#mfa" aria-controls="settings" role="tab" data-toggle="tab">{{ 'pref_two_factor_auth'|_ }}</a>
+                </li>
+                {% endif %}
+                {% if true == isInternalAuth and true == isInternalIdentity %}
+                <li role="presentation">
+                    <a href="#delete" aria-controls="settings" role="tab" data-toggle="tab">{{ 'delete_stuff_header'|_ }}</a>
+                </li>
+                {% endif %}
+            </ul>
+            <div class="tab-content">
+
+                <!-- main options -->
+                <div role="tabpanel" class="tab-pane active" id="options">
+                    <div class="box box-default">
+                        <div class="box-body">
+                            <p>
+                                {{ trans('firefly.user_id_is',{user: userId})|raw }}
+                            </p>
+                            <div class="row">
+                                <div class="col-lg-6">
+                                    <ul>
+                                        {% if true == isInternalAuth and true == isInternalIdentity %}
+                                        <li>
+                                            <a href="{{ route('profile.change-email') }}">{{ 'change_your_email'|_ }}</a>
+                                        </li>
+                                        <li>
+                                            <a href="{{ route('profile.change-password') }}">{{ 'change_your_password'|_ }}</a>
+                                        </li>
+                                        {% endif %}
+
+                                        <li><a href="{{ route('logout') }}" class="logout-link">{{ 'logout'|_ }}</a></li>
+
+                                        {% if true == isInternalAuth and true == isInternalIdentity %}
+                                        <li>
+                                            <a href="{{ route('profile.logout-others') }}">{{ 'logout_other_sessions'|_ }}</a>
+                                        </li>
+                                        <li><a class="text-danger"
+                                               href="{{ route('profile.delete-account') }}">{{ 'delete_account'|_ }}</a>
+                                        </li>
+                                        {% endif %}
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- command line options -->
+                <div role="tabpanel" class="tab-pane" id="cmd">
+                    <div class="box box-default">
+                        <div class="box-body">
+                            <p>
+                                {{ 'explain_command_line_token'|_ }}
+                            </p>
+                            <p>
+                                <input id="token" type="text" class="form-control" name="token"
+                                       value="{{ accessToken.data }}"
+                                       size="32" maxlength="32" readonly/>
+
+                            </p>
+                            <form action="{{ route('profile.regenerate') }}" method="post">
+                                <p>
+
+                                    <input type="hidden" name="_token" value="{{ csrf_token() }}"/>
+                                    <button type="submit" class="btn btn-danger btn-xs"><span
+                                                class="fa fa-refresh"></span> {{ 'regenerate_command_line_token'|_ }}
+                                    </button>
+                                </p>
+                            </form>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- OAuth -->
+                <div role="tabpanel" class="tab-pane" id="oauth">
+                    <div id="passport_clients"></div>
+                </div>
+
+                {% if true == isInternalAuth and true == isInternalIdentity %}
+                <!-- MFA -->
+                <div role="tabpanel" class="tab-pane" id="mfa">
+                    <div class="box box-default">
+                        <div class="box-body">
+                            <p class="text-info">{{ 'pref_two_factor_auth_help'|_ }}</p>
+                            {% if enabled2FA == true %}
+                                <p class="text-info">
+                                    {{ trans_choice('firefly.pref_two_factor_backup_code_count', mfaBackupCount) }}
+                                </p>
+
+                                <div class="btn-group">
+                                    <a class="btn btn-info" href="{{ route('profile.code') }}">
+                                        <span class="fa fa-recycle"></span>
+                                        {{ 'pref_two_factor_auth_reset_code'|_ }}</a>
+                                </div>
+                                <form method="post" action="{{ route('profile.delete-code') }}">
+                                    <input type="hidden" name="_token" value="{{ csrf_token() }}" />
+                                    <input class="btn btn-danger" style="margin-top:20px;" type="submit" name="submit" value="{{ 'pref_two_factor_auth_disable_2fa'|_ }}" />
+                                </form>
+                                <form method="post" action="{{ route('profile.new-backup-codes') }}">
+                                    <input type="hidden" name="_token" value="{{ csrf_token() }}" />
+                                    <input class="btn btn-default" style="margin-top:20px;" type="submit" name="submit" value="{{ 'pref_two_factor_new_backup_codes'|_ }}" />
+                                </form>
+                            {% else %}
+                                <form action="{{ route('profile.enable2FA') }}" method="post">
+                                    <input type="hidden" name="_token" value="{{ csrf_token() }}"/>
+                                    <button type="submit" class="btn btn-info"><span
+                                                class="fa fa-lock"></span> {{ 'pref_enable_two_factor_auth'|_ }}</button>
+                                </form>
+                            {% endif %}
+                        </div>
+                    </div>
+                </div>
+                {% endif %}
+
+                <!-- delete stuff -->
+                <div role="tabpanel" class="tab-pane" id="delete">
+                    <div class="box box-default">
+                        <div class="box-body with-border">
+                            <div class="col-lg-12">
+                                <p>
+                                    {{ 'permanent_delete_stuff'|_ }}
+                                </p>
+                                <h4>{{ 'financial_control'|_ }}</h4>
+                                <p>
+                                    <button type="button"
+                                            data-success="{{ trans('firefly.deleted_all_budgets')|escape('html') }}"
+                                            data-type="budgets" class="confirm btn btn-danger btn-sm"><span
+                                                class="fa fa-pie-chart"></span> {{ 'delete_all_budgets'|_ }}</button>
+
+                                    <button type="button"
+                                            data-success="{{ trans('firefly.deleted_all_bills')|escape('html') }}"
+                                            data-type="bills" class="confirm btn btn-danger btn-sm"><span
+                                                class="fa fa-calendar-o"></span> {{ 'delete_all_bills'|_ }}</button>
+
+                                    <button type="button"
+                                            data-success="{{ trans('firefly.deleted_all_piggy_banks')|escape('html') }}"
+                                            data-type="piggy_banks" class="confirm btn btn-danger btn-sm"><span
+                                                class="fa fa-bullseye"></span> {{ 'delete_all_piggy_banks'|_ }}</button>
+                                </p>
+                                <h4>{{ 'automation'|_ }}</h4>
+                                <p>
+                                    <button type="button"
+                                            data-success="{{ trans('firefly.deleted_all_rules')|escape('html') }}"
+                                            data-type="rules" class="confirm btn btn-danger btn-sm"><span
+                                                class="fa fa-random"></span> {{ 'delete_all_rules'|_ }}</button>
+
+                                    <button type="button"
+                                            data-success="{{ trans('firefly.deleted_all_recurring')|escape('html') }}"
+                                            data-type="recurring" class="confirm btn btn-danger btn-sm"><span
+                                                class="fa fa-paint-brush"></span> {{ 'delete_all_recurring'|_ }}</button>
+                                </p>
+
+                                <h4>{{ 'classification'|_ }}</h4>
+                                <p>
+                                    <button type="button"
+                                            data-success="{{ trans('firefly.deleted_all_categories')|escape('html') }}"
+                                            data-type="categories" class="confirm btn btn-danger btn-sm"><span
+                                                class="fa fa-bookmark"></span> {{ 'delete_all_categories'|_ }}</button>
+
+                                    <button type="button"
+                                            data-success="{{ trans('firefly.deleted_all_tags')|escape('html') }}"
+                                            data-type="tags" class="confirm btn btn-danger btn-sm"><span
+                                                class="fa fa-tag"></span> {{ 'delete_all_tags'|_ }}</button>
+
+                                    <button type="button"
+                                            data-success="{{ trans('firefly.deleted_all_object_groups')|escape('html') }}"
+                                            data-type="object_groups" class="confirm btn btn-danger btn-sm"><span
+                                                class="fa fa-envelope-o"></span> {{ 'delete_all_object_groups'|_ }}</button>
+                                </p>
+
+                                <h4>{{ 'accounts'|_ }}</h4>
+                                <p>
+                                    <em class="text-danger">{{ 'also_delete_transactions'|_ }}</em>
+                                </p>
+                                <p>
+                                    <button type="button"
+                                            data-success="{{ trans('firefly.deleted_all_accounts')|escape('html') }}"
+                                            data-type="accounts" class="confirm btn btn-danger btn-sm"><span
+                                                class="fa fa-credit-card"></span> {{ 'delete_all_accounts'|_ }}</button>
+
+                                    <button type="button"
+                                            data-success="{{ trans('firefly.deleted_all_asset_accounts')|escape('html') }}"
+                                            data-type="asset_accounts" class="confirm btn btn-danger btn-sm"><span
+                                                class="fa fa-money"></span> {{ 'delete_all_asset_accounts'|_ }}</button>
+
+                                    <button type="button"
+                                            data-success="{{ trans('firefly.deleted_all_expense_accounts')|escape('html') }}"
+                                            data-type="expense_accounts" class="confirm btn btn-danger btn-sm"><span
+                                                class="fa fa-shopping-cart"></span> {{ 'delete_all_expense_accounts'|_ }}</button>
+                                </p>
+                                <p>
+                                    <button type="button"
+                                            data-success="{{ trans('firefly.deleted_all_revenue_accounts')|escape('html') }}"
+                                            data-type="revenue_accounts" class="confirm btn btn-danger btn-sm"><span
+                                                class="fa fa-download"></span> {{ 'delete_all_revenue_accounts'|_ }}</button>
+
+                                    <button type="button"
+                                            data-success="{{ trans('firefly.deleted_all_liabilities')|escape('html') }}"
+                                            data-type="liabilities" class="confirm btn btn-danger btn-sm"><span
+                                                class="fa fa-ticket"></span> {{ 'delete_all_liabilities'|_ }}</button>
+                                </p>
+                                <h4>{{ 'transactions'|_ }}</h4>
+                                <p>
+                                    <button type="button"
+                                            data-success="{{ trans('firefly.deleted_all_transactions')|escape('html') }}"
+                                            data-type="transactions" class="confirm btn btn-danger btn-sm"><span
+                                                class="fa fa-exchange"></span> {{ 'delete_all_transactions'|_ }}</button>
+
+                                    <button type="button"
+                                            data-success="{{ trans('firefly.deleted_all_withdrawals')|escape('html') }}"
+                                            data-type="withdrawals" class="confirm btn btn-danger btn-sm"><span
+                                                class="fa fa-long-arrow-left"></span> {{ 'delete_all_withdrawals'|_ }}</button>
+
+                                    <button type="button"
+                                            data-success="{{ trans('firefly.deleted_all_deposits')|escape('html') }}"
+                                            data-type="deposits" class="confirm btn btn-danger btn-sm"><span
+                                                class="fa fa-long-arrow-right"></span> {{ 'delete_all_deposits'|_ }}</button>
+
+
+                                </p>
+                                <p>
+                                    <button type="button"
+                                            data-success="{{ trans('firefly.deleted_all_transfers')|escape('html') }}"
+                                            data-type="transfers" class="confirm btn btn-danger btn-sm"><span
+                                                class="fa fa-exchange"></span> {{ 'delete_all_transfers'|_ }}</button>
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+            </div>
+
+        </div>
+    </div>
+{% endblock %}
+{% block scripts %}
+    <script type="text/javascript" nonce="{{ JS_NONCE }}">
+        var deleteAPIRoute = '{{ route('api.v1.data.destroy') }}';
+        var confirmText = '{{ trans('firefly.are_you_sure')|escape('js') }}';
+        $(document).ready(function () {
+            $('.confirm').on('click', function (e) {
+                var link = $(e.currentTarget);
+                var classes = link.find('i').attr('class');
+
+                // replace icon with loading thing
+                link.prop('disabled', true);
+                link.find('i').removeClass().addClass('fa fa-spin fa-spinner');
+
+                // call API:
+                $.ajax({
+                    method: 'DELETE',
+                    url: deleteAPIRoute + '?objects=' + link.data('type'),
+                }).done(
+                    function () {
+                        // enable button again:
+                        link.prop('disabled', false);
+                        link.find('i').removeClass().addClass(classes);
+                        alert(link.data('success'));
+                    }
+                ).fail(function () {
+                    link.find('i').removeClass().addClass('fa fa-exclamation-triangle');
+                    alert('Could not delete. Sorry.');
+                });
+                return false;
+            });
+        });
+    </script>
+{% endblock %}
diff --git a/resources/views/profile/logout-other-sessions.twig b/resources/views/profile/logout-other-sessions.twig
new file mode 100644
index 0000000000..bc59bffa81
--- /dev/null
+++ b/resources/views/profile/logout-other-sessions.twig
@@ -0,0 +1,35 @@
+{% extends './v1/layout/default' %}
+
+{% block breadcrumbs %}
+    {{ Breadcrumbs.render(Route.getCurrentRoute.getName) }}
+{% endblock %}
+
+{% block content %}
+    <form method="POST" action="{{ route('profile.logout-others.post') }}" accept-charset="UTF-8" class="form-horizontal">
+        <input name="_token" type="hidden" value="{{ csrf_token() }}">
+
+        <div class="row">
+            <div class="col-lg-6 col-md-12 col-sm-12">
+                <div class="box box-primary">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ 'logout_other_sessions'|_ }}</h3>
+                    </div>
+                    <div class="box-body">
+                        <div class="form-group">
+                            <label for="inputOldPassword" class="col-sm-4 control-label">{{ 'current_password'|_ }}</label>
+
+                            <div class="col-sm-8">
+                                <input type="password" class="form-control" id="inputOldPassword" placeholder="{{ 'current_password'|_ }}"
+                                       name="password">
+                            </div>
+                        </div>
+                    </div>
+                    <div class="box-footer">
+                        <button type="submit" class="btn btn-success pull-right">{{ 'logout_other_sessions'|_ }}</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </form>
+    {% include 'partials.password-modal' %}
+{% endblock %}
diff --git a/resources/views/profile/new-backup-codes.twig b/resources/views/profile/new-backup-codes.twig
new file mode 100644
index 0000000000..a8fffec93d
--- /dev/null
+++ b/resources/views/profile/new-backup-codes.twig
@@ -0,0 +1,29 @@
+{% extends './v1/layout/default' %}
+
+{% block breadcrumbs %}
+    {{ Breadcrumbs.render(Route.getCurrentRoute.getName) }}
+{% endblock %}
+
+{% block content %}
+        <div class="row">
+            <div class="col-lg-6 col-lg-offset-3 col-md-12 col-sm-12 col-xs-12">
+                <div class="box">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ 'pref_two_factor_auth_code'|_ }}</h3>
+                    </div>
+                    <div class="box-body">
+                        <div class="form group">
+                            <p>
+                                {{ '2fa_backup_codes'|_ }}
+                            </p>
+                            <pre>{{ codes }}</pre>
+                        </div>
+                    </div>
+                    <div class="box-footer">
+                        <a class="btn btn-success" href="{{ route('profile.index') }}">{{ '2fa_i_have_them'|_ }}</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+{% endblock %}
diff --git a/resources/views/recurring/create.twig b/resources/views/recurring/create.twig
new file mode 100644
index 0000000000..f2203b34c8
--- /dev/null
+++ b/resources/views/recurring/create.twig
@@ -0,0 +1,223 @@
+{% extends './v1/layout/default' %}
+{% block breadcrumbs %}
+    {{ Breadcrumbs.render(Route.getCurrentRoute.getName) }}
+{% endblock %}
+{% block content %}
+
+    <form action="{{ route('recurring.store') }}" method="post" id="store" class="form-horizontal" enctype="multipart/form-data">
+        <input type="hidden" name="_token" value="{{ csrf_token() }}"/>
+        {# row with recurrence information #}
+        <div class="row">
+
+            <div class="col-lg-6 col-md-6 col-sm-12">
+                {# mandatory recurrence stuff #}
+                <div class="box box-primary">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ 'mandatory_for_recurring'|_ }}</h3>
+                    </div>
+                    <div class="box-body">
+                        {{ ExpandedForm.text('title') }}
+                        {{ preFilled.first_date.format('Y-m-d') }}
+                        {{ ExpandedForm.date('first_date',null, {helpText: trans('firefly.help_first_date'), min: preFilled.first_date}) }}
+                        {{ ExpandedForm.select('repetition_type', [], null, {helpText: trans('firefly.change_date_other_options')}) }}
+                        {{ ExpandedForm.number('skip', 0) }}
+                        {{ ExpandedForm.select('weekend', weekendResponses, null, {helpText: trans('firefly.help_weekend')}) }}
+                        {{ ExpandedForm.select('repetition_end', repetitionEnds) }}
+                        {{ ExpandedForm.date('repeat_until',null) }}
+                        {{ ExpandedForm.number('repetitions',null) }}
+
+                        {# calendar in popup #}
+                        <div class="form-group" id="calendar_holder">
+                            <label for="ffInput_calendar" class="col-sm-4 control-label">{{ trans('form.calendar') }}</label>
+
+                            <div class="col-sm-8">
+                                <p class="form-control-static" id="ffInput_calendar">
+                                    <a href="#" id="calendar-link">{{ 'click_for_calendar'|_ }}</a>
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="col-lg-6 col-md-6 col-sm-12">
+                {# optional recurrence stuff #}
+                <div class="box">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ 'optional_for_recurring'|_ }}</h3>
+                    </div>
+                    <div class="box-body">
+                        {{ ExpandedForm.textarea('recurring_description') }}
+
+                        {# only correct way to do active checkbox #}
+                        {{ ExpandedForm.checkbox('active', 1) }}
+                        {{ ExpandedForm.checkbox('apply_rules',1) }}
+                        {{ ExpandedForm.file('attachments[]', {'multiple': 'multiple','helpText': trans('firefly.upload_max_file_size', {'size': uploadSize|filesize}) }) }}
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="row">
+            <div class="col-lg-6 col-md-6 col-sm-12">
+                {# mandatory transaction information #}
+                <div class="box box-primary">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ 'mandatory_for_transaction'|_ }}</h3>
+                    </div>
+                    <div class="box-body">
+                        <p><em>{{ 'mandatory_fields_for_tranaction'|_ }}</em></p>
+                        {# three buttons to distinguish type of transaction#}
+                        <div class="form-group" id="name_holder">
+                            <label for="ffInput_type" class="col-sm-4 control-label">
+                                {{ trans('form.transaction_type') }}
+                            </label>
+
+                            <div class="col-sm-8">
+                                <div class="btn-group btn-group-sm">
+                                    <a href="#" class="btn btn-default switch-button" data-value="withdrawal">{{ 'withdrawal'|_ }}</a>
+                                    <a href="#" class="btn btn-default switch-button" data-value="deposit">{{ 'deposit'|_ }}</a>
+                                    <a href="#" class="btn btn-default switch-button" data-value="transfer">{{ 'transfer'|_ }}</a>
+                                </div>
+                            </div>
+                        </div>
+                        <input type="hidden" name="transaction_type" value="">
+                        {# end of three buttons#}
+
+                        {{ ExpandedForm.text('transaction_description') }}
+                        {# transaction information (mandatory) #}
+                        {{ CurrencyForm.currencyList('transaction_currency_id', defaultCurrency.id) }}
+                        {{ ExpandedForm.amountNoCurrency('amount') }}
+
+                        {# source account if withdrawal, or if transfer: #}
+                        {{ AccountForm.longAccountList('source_id', null, {label: trans('form.asset_source_account')}) }}
+
+                        {# for deposits, a drop down with revenue accounts, loan debt cash and mortgage #}
+                        {{ AccountForm.activeDepositDestinations('deposit_source_id', null, {label: trans('form.deposit_source_id')}) }}
+
+                        {# destination if deposit or transfer: #}
+                        {{ AccountForm.longAccountList('destination_id', null, {label: trans('form.asset_destination_account')} ) }}
+
+                        {# destination account name for withdrawals #}
+                        {#{{ ExpandedForm.text('destination_name', null, {label: trans('form.expense_account')}) }} #}
+
+                        {# NEW for withdrawals, also a drop down with expense accounts, loans, debts, mortgages or (cash). #}
+                        {{ AccountForm.activeWithdrawalDestinations('withdrawal_destination_id', null, {label: trans('form.withdrawal_destination_id')}) }}
+                    </div>
+                </div>
+            </div>
+
+            <div class="col-lg-6 col-md-6 col-sm-12">
+                {# optional transaction information #}
+                <div class="box">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ 'optional_for_transaction'|_ }}</h3>
+                    </div>
+                    <div class="box-body">
+                        {# transaction information (optional) #}
+                        {{ CurrencyForm.currencyListEmpty('foreign_currency_id') }}
+                        {{ ExpandedForm.amountNoCurrency('foreign_amount') }}
+
+                        {# BUDGET ONLY WHEN CREATING A WITHDRAWAL #}
+                        {% if budgets|length > 1 %}
+                            {{ ExpandedForm.select('budget_id', budgets, null) }}
+                        {% else %}
+                            {{ ExpandedForm.select('budget_id', budgets, null, {helpText: trans('firefly.no_budget_pointer', {link: route('budgets.index')})}) }}
+                        {% endif %}
+
+                        {# CATEGORY ALWAYS #}
+                        {{ ExpandedForm.text('category') }}
+
+                        {# BILL / SUBSCRIPTION ONLY FOR WITHDRAWALS #}
+                        {% if bills|length > 1 %}
+                            {{ ExpandedForm.select('bill_id', bills, null) }}
+                        {% else %}
+                            {{ ExpandedForm.select('bill_id', bills, null, {helpText: trans('firefly.no_bill_pointer', {link: route('bills.index')})}) }}
+                        {% endif %}
+
+                        {# TAGS #}
+                        {{ ExpandedForm.text('tags') }}
+
+                        {# RELATE THIS TRANSFER TO A PIGGY BANK #}
+                        {{ PiggyBankForm.piggyBankList('piggy_bank_id') }}
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        {# row with submit stuff. #}
+        <div class="row">
+            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
+                <div class="box">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ 'options'|_ }}</h3>
+                    </div>
+                    <div class="box-body">
+                        {{ ExpandedForm.optionsList('create','recurrence') }}
+                    </div>
+                    <div class="box-footer">
+                        <button type="submit" class="btn pull-right btn-success">
+                            {{ ('store_new_recurrence')|_ }}
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+        {#
+            <div class="row">
+                <div class="box box-primary">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ 'expected_repetitions'|_ }}</h3>
+                    </div>
+                    <div class="box-body">
+                        Here.
+                    </div>
+                </div>
+            </div>
+        </div>
+        </div>
+        #}
+    </form>
+
+    {# calendar modal #}
+    <div class="modal fade" id="calendarModal" tabindex="-1" role="dialog">
+    <div class="modal-dialog modal-lg">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h4 class="modal-title">{{ 'recurring_calendar_view'|_ }}</h4>
+            </div>
+            <div class="modal-body">
+                <div id="recurring_calendar" style="max-width: 400px;margin: 0 auto;">
+
+                </div>
+
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+            </div>
+        </div>
+    </div>
+    </div>
+{% endblock %}
+{% block scripts %}
+    <script type="text/javascript" src="v1/js/lib/modernizr-custom.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/lib/typeahead/typeahead.bundle.min.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/ff/common/autocomplete.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/lib/bootstrap-tagsinput.min.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/lib/jquery-ui.min.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/lib/fc/fullcalendar.min.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" nonce="{{ JS_NONCE }}">
+        var transactionType = "{{ preFilled.transaction_type }}";
+        var suggestUri = "{{ route('recurring.suggest') }}";
+        var eventsUri = "{{ route('recurring.events') }}";
+        var oldRepetitionType= "{{ oldRepetitionType }}";
+    </script>
+    <script type="text/javascript" src="v1/js/ff/recurring/create.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+{% endblock %}
+
+{% block styles %}
+    <link href="v1/css/bootstrap-tagsinput.css?v={{ FF_VERSION }}" type="text/css" rel="stylesheet"  media="all" nonce="{{ JS_NONCE }}">
+    <link href="v1/css/jquery-ui/jquery-ui.structure.min.css?v={{ FF_VERSION }}" type="text/css" rel="stylesheet"  media="all" nonce="{{ JS_NONCE }}">
+    <link href="v1/css/jquery-ui/jquery-ui.theme.min.css?v={{ FF_VERSION }}" type="text/css" rel="stylesheet"  media="all" nonce="{{ JS_NONCE }}">
+    <link href="v1/lib/fc/fullcalendar.min.css?v={{ FF_VERSION }}" type="text/css" rel="stylesheet"  media="all" nonce="{{ JS_NONCE }}">
+{% endblock %}
diff --git a/resources/views/recurring/delete.twig b/resources/views/recurring/delete.twig
new file mode 100644
index 0000000000..bb0ba4005d
--- /dev/null
+++ b/resources/views/recurring/delete.twig
@@ -0,0 +1,41 @@
+{% extends './v1/layout/default' %}
+
+{% block breadcrumbs %}
+    {{ Breadcrumbs.render(Route.getCurrentRoute.getName, recurrence) }}
+{% endblock %}
+
+{% block content %}
+
+    <form method="POST" action="{{ route('recurring.destroy',recurrence.id) }}" accept-charset="UTF-8" class="form-horizontal" id="destroy">
+        <input name="_token" type="hidden" value="{{ csrf_token() }}">
+        <div class="row">
+            <div class="col-lg-6 col-lg-offset-3 col-md-12 col-sm-12">
+                <div class="box box-danger">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ trans('form.delete_recurring', {'title': recurrence.title}) }}</h3>
+                    </div>
+                    <div class="box-body">
+                        <p class="text-danger">
+                            {{ trans('form.permDeleteWarning') }}
+                        </p>
+
+                        <p>
+                            {{ trans('form.recurring_areYouSure', {'title': recurrence.title}) }}
+                        </p>
+
+                        <p>
+                            {% if journalsCreated > 0 %}
+                                {{ Lang.choice('form.recurring_keep_transactions', journalsCreated, {count: journalsCreated }) }}
+                            {% endif %}
+                        </p>
+                    </div>
+                    <div class="box-footer">
+                        <input type="submit" name="submit" value="{{ trans('form.deletePermanently') }}" class="btn btn-danger pull-right"/>
+                        <a href="{{ URL.previous() }}" class="btn-default btn">{{ trans('form.cancel') }}</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+    </form>
+{% endblock %}
diff --git a/resources/views/recurring/edit.twig b/resources/views/recurring/edit.twig
new file mode 100644
index 0000000000..f76435b9fc
--- /dev/null
+++ b/resources/views/recurring/edit.twig
@@ -0,0 +1,220 @@
+{% extends './v1/layout/default' %}
+{% block breadcrumbs %}
+    {{ Breadcrumbs.render(Route.getCurrentRoute.getName, recurrence) }}
+{% endblock %}
+{% block content %}
+
+    {{ Form.model(recurrence, {'class' : 'form-horizontal','enctype': 'multipart/form-data','id' : 'update','url' : route('recurring.update', recurrence.id)}) }}
+        <input type="hidden" name="_token" value="{{ csrf_token() }}"/>
+        {# row with recurrence information #}
+        <div class="row">
+
+            <div class="col-lg-6 col-md-6 col-sm-12">
+                {# mandatory recurrence stuff #}
+                <div class="box box-primary">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ 'mandatory_for_recurring'|_ }}</h3>
+                    </div>
+                    <div class="box-body">
+                        <input type="hidden" name="id" value="{{ array.id }}" />
+                        {{ ExpandedForm.text('title') }}
+                        {{ ExpandedForm.date('first_date',array.first_date, {helpText: trans('firefly.help_first_date_no_past')}) }}
+                        {{ ExpandedForm.select('repetition_type', [], null, {helpText: trans('firefly.change_date_other_options')}) }}
+                        {{ ExpandedForm.number('skip', array.repetitions[0].skip) }}
+                        {{ ExpandedForm.select('weekend', weekendResponses, array.repetitions[0].weekend, {helpText: trans('firefly.help_weekend')}) }}
+                        {{ ExpandedForm.select('repetition_end', repetitionEnds, repetitionEnd) }}
+                        {{ ExpandedForm.date('repeat_until',array.repeat_until) }}
+                        {{ ExpandedForm.number('repetitions', array.nr_of_repetitions) }}
+
+                        {# calendar in popup #}
+                        <div class="form-group" id="calendar_holder">
+                            <label for="ffInput_calendar" class="col-sm-4 control-label">{{ trans('form.calendar') }}</label>
+
+                            <div class="col-sm-8">
+                                <p class="form-control-static" id="ffInput_calendar">
+                                    <a href="#" id="calendar-link">{{ 'click_for_calendar'|_ }}</a>
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="col-lg-6 col-md-6 col-sm-12">
+                {# optional recurrence stuff #}
+                <div class="box">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ 'optional_for_recurring'|_ }}</h3>
+                    </div>
+                    <div class="box-body">
+                        {{ ExpandedForm.textarea('recurring_description',array.description) }}
+
+                        {# only correct way to do active checkbox #}
+                        {{ ExpandedForm.checkbox('active', 1, preFilled.active) }}
+                        {{ ExpandedForm.checkbox('apply_rules', 1, preFilled.apply_rules) }}
+                        {{ ExpandedForm.file('attachments[]', {'multiple': 'multiple','helpText': trans('firefly.upload_max_file_size', {'size': uploadSize|filesize}) }) }}
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="row">
+            <div class="col-lg-6 col-md-6 col-sm-12">
+                {# mandatory transaction information #}
+                <div class="box box-primary">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ 'mandatory_for_transaction'|_ }}</h3>
+                    </div>
+                    <div class="box-body">
+                        <p><em>{{ 'mandatory_fields_for_tranaction'|_ }}</em></p>
+                        {# three buttons to distinguish type of transaction#}
+                        <div class="form-group" id="name_holder">
+                            <label for="ffInput_type" class="col-sm-4 control-label">
+                                {{ trans('form.transaction_type') }}
+                            </label>
+
+                            <div class="col-sm-8">
+                                <div class="btn-group btn-group-sm">
+                                    <a href="#" class="btn btn-default switch-button" data-value="withdrawal">{{ 'withdrawal'|_ }}</a>
+                                    <a href="#" class="btn btn-default switch-button" data-value="deposit">{{ 'deposit'|_ }}</a>
+                                    <a href="#" class="btn btn-default switch-button" data-value="transfer">{{ 'transfer'|_ }}</a>
+                                </div>
+                            </div>
+                        </div>
+                        <input type="hidden" name="transaction_type" value="">
+                        {# end of three buttons#}
+                        {{ ExpandedForm.text('transaction_description', array.transactions[0].description) }}
+                        {# transaction information (mandatory) #}
+                        {{ CurrencyForm.currencyList('transaction_currency_id', array.transactions[0].currency_id) }}
+                        {{ ExpandedForm.amountNoCurrency('amount', array.transactions[0].amount) }}
+
+                        {# source account if withdrawal, or if transfer: #}
+                        {{ AccountForm.longAccountList('source_id', array.transactions[0].source_id, {label: trans('form.asset_source_account')}) }}
+
+                        {# NEW for deposits, a drop down with revenue accounts, loan debt cash and mortgage #}
+                        {{ AccountForm.activeDepositDestinations('deposit_source_id', preFilled.deposit_source_id, {label: trans('form.deposit_source_id')}) }}
+
+                        {# destination if deposit or transfer: #}
+                        {{ AccountForm.longAccountList('destination_id', array.transactions[0].destination_id, {label: trans('form.asset_destination_account')} ) }}
+
+                        {# NEW for withdrawals, also a drop down with expense accounts, loans, debts, mortgages or (cash). #}
+                        {{ AccountForm.activeWithdrawalDestinations('withdrawal_destination_id', preFilled.withdrawal_destination_id, {label: trans('form.withdrawal_destination_id')}) }}
+                    </div>
+                </div>
+            </div>
+
+            <div class="col-lg-6 col-md-6 col-sm-12">
+                {# optional transaction information #}
+                <div class="box">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ 'optional_for_transaction'|_ }}</h3>
+                    </div>
+                    <div class="box-body">
+                        {# transaction information (optional) #}
+                        {{ CurrencyForm.currencyListEmpty('foreign_currency_id', array.transactions[0].foreign_currency_id) }}
+                        {{ ExpandedForm.amountNoCurrency('foreign_amount', array.transactions[0].foreign_amount) }}
+
+                        {# BUDGET ONLY WHEN CREATING A WITHDRAWAL #}
+                        {% if budgets|length > 1 %}
+                            {{ ExpandedForm.select('budget_id', budgets, array.transactions[0].budget_id) }}
+                        {% else %}
+                            {{ ExpandedForm.select('budget_id', budgets, array.transactions[0].budget_id, {helpText: trans('firefly.no_budget_pointer', {link: route('budgets.index')})}) }}
+                            {#budgets#}
+                        {% endif %}
+
+                        {# CATEGORY ALWAYS #}
+                        {{ ExpandedForm.text('category',array.transactions[0].category_name) }}
+
+                        {# BILL ONLY WHEN CREATING A WITHDRAWAL #}
+                        {% if bills|length > 1 %}
+                            {{ ExpandedForm.select('bill_id', bills, array.transactions[0].bill_id) }}
+                        {% else %}
+                            {{ ExpandedForm.select('bill_id', bills, array.transactions[0].bill_id, {helpText: trans('firefly.no_bill_pointer', {link: route('bills.index')})}) }}
+                        {% endif %}
+
+                        {# TAGS #}
+                        {{ ExpandedForm.text('tags', array.transactions[0].tags) }}
+
+                        {# RELATE THIS TRANSFER TO A PIGGY BANK #}
+                        {{ PiggyBankForm.piggyBankList('piggy_bank_id',array.transactions[0].piggy_bank_id) }}
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        {# row with submit stuff. #}
+    <div class="row">
+        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
+                <div class="box">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ 'options'|_ }}</h3>
+                    </div>
+                    <div class="box-body">
+                        {{ ExpandedForm.optionsList('update','recurrence') }}
+                    </div>
+                    <div class="box-footer">
+                        <button type="submit" class="btn pull-right btn-success">
+                            {{ ('update_recurrence')|_ }}
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+        {#
+            <div class="row">
+                <div class="box box-primary">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ 'expected_repetitions'|_ }}</h3>
+                    </div>
+                    <div class="box-body">
+                        Here.
+                    </div>
+                </div>
+            </div>
+        </div>
+        </div>
+        #}
+    </form>
+
+    {# calendar modal #}
+    <div class="modal fade" id="calendarModal" tabindex="-1" role="dialog">
+    <div class="modal-dialog modal-lg">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h4 class="modal-title">{{ 'recurring_calendar_view'|_ }}</h4>
+            </div>
+            <div class="modal-body">
+                <div id="recurring_calendar" style="max-width: 400px;margin: 0 auto;">
+
+                </div>
+
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+            </div>
+        </div>
+    </div>
+    </div>
+{% endblock %}
+{% block scripts %}
+    <script type="text/javascript" src="v1/js/lib/modernizr-custom.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/lib/typeahead/typeahead.bundle.min.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/ff/common/autocomplete.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/lib/bootstrap-tagsinput.min.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/lib/jquery-ui.min.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/lib/fc/fullcalendar.min.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" nonce="{{ JS_NONCE }}">
+        var transactionType = "{{ preFilled.transaction_type }}";
+        var suggestUri = "{{ route('recurring.suggest') }}";
+        var eventsUri = "{{ route('recurring.events') }}";
+        var currentRepType = "{{ currentRepType }}";
+    </script>
+    <script type="text/javascript" src="v1/js/ff/recurring/edit.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+{% endblock %}
+
+{% block styles %}
+    <link href="v1/css/bootstrap-tagsinput.css?v={{ FF_VERSION }}" type="text/css" rel="stylesheet"  media="all" nonce="{{ JS_NONCE }}">
+    <link href="v1/css/jquery-ui/jquery-ui.structure.min.css?v={{ FF_VERSION }}" type="text/css" rel="stylesheet"  media="all" nonce="{{ JS_NONCE }}">
+    <link href="v1/css/jquery-ui/jquery-ui.theme.min.css?v={{ FF_VERSION }}" type="text/css" rel="stylesheet"  media="all" nonce="{{ JS_NONCE }}">
+    <link href="v1/lib/fc/fullcalendar.min.css?v={{ FF_VERSION }}" type="text/css" rel="stylesheet"  media="all" nonce="{{ JS_NONCE }}">
+{% endblock %}
diff --git a/resources/views/recurring/index.twig b/resources/views/recurring/index.twig
new file mode 100644
index 0000000000..b85d62a593
--- /dev/null
+++ b/resources/views/recurring/index.twig
@@ -0,0 +1,166 @@
+{% extends './v1/layout/default' %}
+
+{% block breadcrumbs %}
+    {{ Breadcrumbs.render(Route.getCurrentRoute.getName) }}
+{% endblock %}
+
+{% block content %}
+    <!-- block with list of recurring transaction -->
+    {% if total > 0 %}
+        <div class="row">
+            <div class="col-lg-12 col-md-12 col-sm-12">
+                <div class="box">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">
+                            {{ 'recurrences'|_ }}
+                        </h3>
+                        <div class="box-tools pull-right">
+                            <div class="btn-group">
+                                <button class="btn btn-box-tool dropdown-toggle" data-toggle="dropdown"><span class="fa fa-ellipsis-v"></span></button>
+                                <ul class="dropdown-menu" role="menu">
+                                    <li><a href="{{ route('recurring.create') }}"><span class="fa fa-plus fa-fw"></span> {{ ('make_new_recurring')|_ }}</a></li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="box-body no-padding">
+                        <div style="padding:8px;">
+                            <a href="{{ route('recurring.create') }}" class="btn btn-success"><span class="fa fa-plus fa-fw"></span> {{ ('make_new_recurring')|_ }}
+                            </a>
+                        </div>
+
+                        <!-- list of recurring here -->
+                        <div style="padding-left:8px;">
+                            {{ paginator.links('pagination.bootstrap-4')|raw }}
+                        </div>
+                        <table class="table table-responsive  table-hover sortable">
+                            <thead>
+                            <tr>
+                                <th class="hidden-sm hidden-xs" data-defaultsort="disabled">&nbsp;</th>
+                                <th data-defaultsign="az">{{ trans('list.title') }}</th>
+                                <th data-defaultsort="disabled">{{ trans('list.transaction_s') }}</th>
+                                <th data-defaultsort="disabled">{{ trans('list.repetitions') }}</th>
+                                <th data-defaultsign="month" data-dateformat="{{ madMomentJS }}">{{ trans('list.next_due') }}</th>
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {% for rt in paginator %}
+                                <tr>
+                                    <td class="hidden-sm hidden-xs">
+                                        <div class="btn-group btn-group-xs edit_tr_buttons">
+                                            <a class="btn btn-default btn-xs" title="{{ 'edit'|_ }}" href="{{ route('recurring.edit',rt.id) }}"><span
+                                                        class="fa fa-fw fa-pencil"></span></a><a class="btn btn-danger btn-xs" title="{{ 'delete'|_ }}"
+                                                                                              href="{{ route('recurring.delete',rt.id) }}"><span
+                                                        class="fa fa-fw fa-trash-o"></span></a>
+                                        </div>
+                                    </td>
+                                    <td data-value="{{ rt.title }}">
+                                        {% if rt.attachments > 0 %}
+                                            <span class="fa fa-fw fa-paperclip"></span>
+                                        {% endif %}
+                                        {% if rt.active == false %}<s>{% endif %}
+                                            {{ rt.type|_ }}:
+                                            <a href="{{ route('recurring.show',rt.id) }}">{{ rt.title }}</a>
+                                            {% if rt.active == false %}</s> ({{ 'inactive'|_|lower }}){% endif %}
+                                        {% if rt.description|length > 0 %}
+                                            <small><br>{{ rt.description }}</small>
+                                        {% endif %}
+
+
+                                    </td>
+                                    <td data-value="0">
+                                        <ol>
+                                            {% for rtt in rt.transactions %}
+                                                <li>
+                                                    {# normal amount + comma#}
+                                                    {{ formatAmountBySymbol(rtt['amount'],rtt['currency_symbol'],rtt['currency_decimal_places']) }}{% if rtt['foreign_amount'] == null %},{% endif %}
+
+                                                    {# foreign amount + comma #}
+                                                    {% if null != rtt['foreign_amount'] %}
+                                                        ({{ formatAmountBySymbol(rtt['foreign_amount'],rtt['foreign_currency_symbol'],rtt['foreign_currency_decimal_places']) }}),
+                                                    {% endif %}
+                                                    <a href="{{ route('accounts.show', rtt['source_id']) }}">{{ rtt['source_name'] }}</a>
+                                                    &rarr;
+                                                    <a href="{{ route('accounts.show', rtt['destination_id']) }}">{{ rtt['destination_name'] }}</a>
+                                                </li>
+                                            {% endfor %}
+                                        </ol>
+                                    </td>
+                                    <td>
+                                        {% if null != rt.repeat_until and today > rt.repeat_until %}
+                                        <span class="text-danger">
+                                            {{ trans('firefly.repeat_until_in_past', {date: rt.repeat_until.formatLocalized(monthAndDayFormat) }) }}
+                                        </span>
+                                        {% endif %}
+                                        <ul>
+                                            {% for rep in rt.repetitions %}
+                                                <li>{{ rep.description }}
+                                                    {% if rep.repetition_skip == 1 %}
+                                                        ({{ trans('firefly.recurring_skips_one')|lower }}).
+                                                    {% endif %}
+                                                    {% if rep.repetition_skip > 1 %}
+                                                        ({{ trans('firefly.recurring_skips_more', {count: rep.repetition_skip})|lower }}).
+                                                    {% endif %}
+                                                    {% if rep.weekend == 3 %}
+                                                        <br>{{ 'will_jump_friday'|_ }}
+                                                    {% endif %}
+                                                    {% if rep.weekend == 4 %}
+                                                        <br>{{ 'will_jump_monday'|_ }}
+                                                    {% endif %}
+                                                    {% if rep.weekend == 2 %}
+                                                        <br>{{ 'except_weekends'|_ }}
+                                                    {% endif %}
+                                                </li>
+                                            {% endfor %}
+                                        </ul>
+                                        <p>
+                                            {% if null == rt.repeat_until and rt.repetitions == 0 %}
+                                                {{ 'recurring_repeats_forever'|_ }}.
+                                            {% endif %}
+                                            {% if null != rt.repeat_until and rt.repetitions == 0 %}
+                                                {{ trans('firefly.recurring_repeats_until', {date: rt.repeat_until.formatLocalized(monthAndDayFormat)}) }}.
+                                            {% endif %}
+                                            {% if null == rt.repeat_until and rt.nr_of_repetitions != 0 %}
+                                                {{ trans_choice('firefly.recurring_repeats_x_times', rt.nr_of_repetitions) }}.
+                                            {% endif %}
+                                        </p>
+                                    </td>
+                                    <td>
+                                        <ul>
+                                            {% for rep in rt.repetitions %}
+                                                {% for occ in rep.occurrences %}
+                                                    {% if loop.index0 < 2 %}
+                                                    <li>{{ occ.formatLocalized(monthAndDayFormat) }}</li>
+                                                    {% endif %}
+                                                {% endfor %}
+                                            {% endfor %}
+                                        </ul>
+                                    </td>
+                                </tr>
+                            {% endfor %}
+                            </tbody>
+                        </table>
+                        <div style="padding-left:8px;">
+                            {{ paginator.links('pagination.bootstrap-4')|raw }}
+                        </div>
+                    </div>
+                    <div class="box-footer">
+                        <a href="{{ route('recurring.create') }}" class="btn btn-success"><span class="fa fa-plus fa-fw"></span> {{ ('make_new_recurring')|_ }}</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    {% endif %}
+    {% if total == 0 and page == 1 %}
+        {% include 'partials.empty' with {objectType: 'default', type: 'recurring',route: route('recurring.create')} %}
+    {% endif %}
+{% endblock %}
+
+{% block styles %}
+    <link rel="stylesheet" href="v1/css/bootstrap-sortable.css?v={{ FF_VERSION }}" type="text/css" media="all" nonce="{{ JS_NONCE }}">
+{% endblock %}
+
+{% block scripts %}
+    <script type="text/javascript" src="v1/js/lib/bootstrap-sortable.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+{% endblock %}
diff --git a/resources/views/recurring/show.twig b/resources/views/recurring/show.twig
new file mode 100644
index 0000000000..fa073bff55
--- /dev/null
+++ b/resources/views/recurring/show.twig
@@ -0,0 +1,185 @@
+{% extends './v1/layout/default' %}
+
+{% block breadcrumbs %}
+    {{ Breadcrumbs.render(Route.getCurrentRoute.getName, recurrence) }}
+{% endblock %}
+
+{% block content %}
+<div class="row">
+    <!-- basic info -->
+    <div class="col-lg-8 col-md-12 col-sm-12">
+        <div class="box">
+            <div class="box-header with-border">
+                <h3 class="box-title">
+                    {{ array.title }}
+
+                    ({{ array.type }})
+
+                    {% if array.active == false %}
+                        ({{ 'inactive'|_|lower }})
+                    {% endif %}
+                </h3>
+            </div>
+            <div class="box-body">
+                <p><em>{{ array.description }}</em></p>
+
+                {% if array.active == false %}
+                    <p>
+                        {{ 'recurrence_is_inactive'|_ }}
+                    </p>
+                {% endif %}
+
+                <ul>
+                    {% for rep in array.repetitions %}
+                        <li>{{ rep.description }}</li>
+                    {% endfor %}
+                </ul>
+            </div>
+            <div class="box-footer">
+                <div class="btn-group">
+                    <a href="{{ route('recurring.edit', [array.id]) }}" class="btn btn-sm btn-default"><span class="fa fa-pencil"></span> {{ 'edit'|_ }}</a>
+                    <a href="{{ route('recurring.delete', [array.id]) }}" class="btn btn-sm btn-danger">{{ 'delete'|_ }} <span class="fa fa-trash"></span></a>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- next and previous repetitions -->
+    <div class="col-lg-4 col-md-12 col-sm-12">
+        <div class="box">
+            <div class="box-header with-border">
+                <h3 class="box-title">
+                    {{ ('expected_'~array.type~'s')|_ }}
+                </h3>
+            </div>
+            <div class="box-body">
+                {% if null != array.repeat_until and today > array.repeat_until %}
+                    <span class="text-danger">
+                                            {{ trans('firefly.repeat_until_in_past', {date: array.repeat_until.formatLocalized(monthAndDayFormat) }) }}
+                                        </span>
+                {% endif %}
+                <ul>
+                    {% for rep in array.repetitions %}
+                        <li>
+                            {{ rep.description }}
+                            {% if rep.repetition_skip == 1 %}
+                                ({{ trans('firefly.recurring_skips_one')|lower }})
+                            {% endif %}
+                            {% if rep.repetition_skip > 1 %}
+                                ({{ trans('firefly.recurring_skips_more', {count: rep.repetition_skip})|lower }})
+                            {% endif %}
+                            <ul>
+                                {% for occ in rep.occurrences %}
+                                    <li>{{ occ.formatLocalized(trans('config.month_and_date_day')) }}</li>
+                                {% endfor %}
+                            </ul>
+                        </li>
+                    {% endfor %}
+                </ul>
+            </div>
+            <div class="box-footer">
+                <small>
+                    <em>{{ 'warning_duplicates_repetitions'|_ }}</em>
+                </small>
+            </div>
+        </div>
+    </div>
+</div>
+<div class="row">
+    <!-- transactions -->
+    <div class="col-lg-12 col-md-12 col-sm-12">
+        <div class="box">
+            <div class="box-header with-border">
+                <h3 class="box-title">
+                    {{ 'transaction_data'|_ }}
+                </h3>
+            </div>
+            <div class="box-body no-padding">
+                <table class="table table-hover sortable">
+                    <thead>
+                    <tr>
+                        <th data-defaultsign="az">{{ trans('list.description') }}</th>
+                        <th data-defaultsign="az">{{ trans('list.source') }}</th>
+                        <th data-defaultsign="az">{{ trans('list.destination') }}</th>
+                        <th data-defaultsign="_19">{{ trans('list.amount') }}</th>
+                        <th data-defaultsign="az">{{ trans('list.category') }}</th>
+                        <th data-defaultsign="az">{{ trans('list.budget') }}</th>
+                        <th>{{ trans('list.other_meta_data') }}</th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    {% for transaction in array.transactions %}
+                        <tr>
+                            <td data-value="{{ transaction.description }}">
+                                {{ transaction.description }}
+                            </td>
+                            <td data-value="{{ transaction.source_name }}">
+                                <a href="{{ route('accounts.show', [transaction.source_id]) }}">{{ transaction.source_name }}</a>
+                            </td>
+                            <td data-value="{{ transaction.destination_name }}">
+                                <a href="{{ route('accounts.show', [transaction.destination_id]) }}">{{ transaction.destination_name }}</a>
+                            </td>
+                            <td>
+                                {{ formatAmountBySymbol(transaction.amount,transaction.currency_symbol,transaction.currency_decimal_places) }}
+                                {% if null != transaction.foreign_amount %}
+                                    ({{ formatAmountBySymbol(transaction.foreign_amount,transaction.foreign_currency_symbol,transaction.foreign_currency_decimal_places) }})
+                                {% endif %}
+                            </td>
+                            <td data-value="{{ transaction.category_id|default(0) }}">
+                                {% if '' != transaction.category_name %}
+                                    <a href="{{ route('categories.show', [transaction.category_id]) }}">
+                                        {{ transaction.category_name }}
+                                    </a>
+                                {% endif %}
+                            </td>
+                            <td data-value="{{ transaction.budget_id|default(0) }}">
+                                {% if '' != transaction.budget_name %}
+                                    <a href="{{ route('budgets.show', [transaction.budget_id]) }}">
+                                        {{ transaction.budget_name }}
+                                    </a>
+                                {% endif %}
+                            </td>
+                            <td>
+                                {% if transaction.tags|length > 0 %}
+                                    <p>
+                                        {% for tag in transaction.tags %}
+                                            <span class="label label-success">{{ tag }}</span>
+                                        {% endfor %}
+                                    </p>
+                                {% endif %}
+                                {% if 0 != transaction.piggy_bank_id and array.type == 'Transfer' %}
+                                    <a href="{{ route('piggy-banks.show', [transaction.piggy_bank_id]) }}">{{ transaction.piggy_bank_name }}</a>
+                                {% endif %}
+                            </td>
+                        </tr>
+                    {% endfor %}
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+    <div class="row">
+        <!-- meta data -->
+        <div class="col-lg-12 col-md-12 col-sm-12">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">
+                        {{ ('created_'~array.type~'s')|_ }}
+                    </h3>
+                </div>
+                <div class="box-body">
+                    {% include 'list.groups' %}
+                </div>
+            </div>
+        </div>
+    </div>
+    {% endblock %}
+
+    {% block styles %}
+        <link rel="stylesheet" href="v1/css/bootstrap-sortable.css?v={{ FF_VERSION }}" type="text/css" media="all" nonce="{{ JS_NONCE }}">
+    {% endblock %}
+
+    {% block scripts %}
+        <script type="text/javascript" src="v1/js/lib/bootstrap-sortable.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+        {# required for groups.twig #}
+        <script type="text/javascript" src="v1/js/ff/list/groups.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    {% endblock %}
diff --git a/resources/views/reports/audit/report.twig b/resources/views/reports/audit/report.twig
new file mode 100644
index 0000000000..08328174a7
--- /dev/null
+++ b/resources/views/reports/audit/report.twig
@@ -0,0 +1,92 @@
+{% extends './v1/layout/default' %}
+
+{% block breadcrumbs %}
+    {{ Breadcrumbs.render(Route.getCurrentRoute.getName, accountIds, start, end) }}
+{% endblock %}
+
+{% block content %}
+
+<div class="row no-print">
+    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
+        <div class="box" id="optionsBox">
+            <div class="box-header with-border">
+                <h3 class="box-title">{{ 'options'|_ }}</h3>
+            </div>
+            <div class="box-body">
+                <ul class="list-inline">
+                    {% for hide in hideable %}
+                        <li><input
+                                    {% if hide in defaultShow %}checked{% endif %}
+                                    type="checkbox" class="audit-option-checkbox" name="option[]" value="{{ hide }}" id="option_{{ hide }}"/> <label
+                                    for="option_{{ hide }}" style="font-weight:normal;">{{ trans('list.'~hide) }}</label></li>
+                    {% endfor %}
+
+                </ul>
+            </div>
+        </div>
+    </div>
+</div>
+
+
+{% for account in accounts %}
+<div class="row">
+    <div class="col-lg-12 col-md-12 col-sm-12">
+        <div class="box">
+            <div class="box-header with-border">
+                <h3 class="box-title">{{ account.name }}</h3>
+            </div>
+            {% set url = route('accounts.show',account.id) %}
+            {% if not auditData[account.id].exists %}
+            <div class="box-body">
+
+                <em>
+                    {{ trans('firefly.no_audit_activity',
+                        {
+                            account_name: account.name|escape,
+                            url: url,
+                            start: start.formatLocalized(monthAndDayFormat),
+                            end: end.formatLocalized(monthAndDayFormat),
+                        })|raw }}
+
+                </em>
+            </div>
+            {% else %}
+            <div class="box-body no-padding">
+                <p style="padding:10px;">
+                    {{ trans('firefly.audit_end_balance',
+                        {
+                            account_name: account.name|escape,
+                            url: url,
+                            end: auditData[account.id].dayBefore,
+                            balance: formatAmountByAccount(account, auditData[account.id].dayBeforeBalance)
+                        })|raw }}
+                </p>
+                {% include 'v1.reports.partials.journals-audit'  with {'journals': auditData[account.id].journals,'account':account} %}
+
+                <p style="padding:10px;">
+
+                    {{ trans('firefly.audit_end_balance',
+                        {
+                            account_name: account.name|escape,
+                            url: url,
+                            end: auditData[account.id].end,
+                            balance: formatAmountByAccount(account,auditData[account.id].endBalance)
+                        })|raw }}
+                </p>
+            </div>
+            {% endif %}
+        </div>
+    </div>
+</div>
+{% endfor %}
+
+{% endblock %}
+{% block styles %}
+{% endblock %}
+{% block scripts %}
+    <script type="text/javascript" nonce="{{ JS_NONCE }}">
+        var hideable = {{ hideable|json_encode|raw }};
+    </script>
+    <script type="text/javascript" src="v1/js/ff/reports/all.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/ff/reports/audit/all.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+{% endblock %}
diff --git a/resources/views/reports/budget/month.twig b/resources/views/reports/budget/month.twig
new file mode 100644
index 0000000000..7aed5e046e
--- /dev/null
+++ b/resources/views/reports/budget/month.twig
@@ -0,0 +1,186 @@
+{% extends './v1/layout/default' %}
+
+{% block breadcrumbs %}
+    {{ Breadcrumbs.render(Route.getCurrentRoute.getName, accountIds, budgetIds, start, end) }}
+{% endblock %}
+
+{% block content %}
+
+    <div class="row">
+        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'accounts'|_ }}</h3>
+                </div>
+                <div class="box-body table-responsive no-padding" id="accountsHolder">
+                </div>
+                {# loading indicator #}
+                <div class="overlay">
+                    <span class="fa fa-refresh fa-spin"></span>
+                </div>
+            </div>
+        </div>
+        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'budgets'|_ }}</h3>
+                </div>
+                <div class="box-body table-responsive no-padding" id="budgetsHolder">
+                </div>
+                {# loading indicator #}
+                <div class="overlay">
+                    <span class="fa fa-refresh fa-spin"></span>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'account_per_budget'|_ }}</h3>
+                </div>
+                <div class="box-body table-responsive no-padding" id="accountPerbudgetHolder">
+                </div>
+                {# loading indicator #}
+                <div class="overlay">
+                    <span class="fa fa-refresh fa-spin"></span>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-lg-6 col-md-6">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'expense_per_budget'|_ }}</h3>
+                </div>
+                <div class="box-body">
+                    <div style="width:100%;margin:0 auto;">
+                        <canvas id="budgets-out-pie-chart" style="width:100%;height:250px;" height="250"></canvas>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="col-lg-6 col-md-6">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'expense_per_category'|_ }}</h3>
+                </div>
+                <div class="box-body">
+                    <div style="width:100%;margin:0 auto;">
+                        <canvas id="categories-out-pie-chart" style="width:100%;height:250px;" height="250"></canvas>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-lg-6 col-md-6">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'expense_per_source_account'|_ }}</h3>
+                </div>
+                <div class="box-body">
+                    <div style="width:100%;margin:0 auto;">
+                        <canvas id="source-accounts-pie-chart" style="width:100%;height:250px;" height="250"></canvas>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="col-lg-6 col-md-6">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'expense_per_destination_account'|_ }}</h3>
+                </div>
+                <div class="box-body">
+                    <div style="width:100%;margin:0 auto;">
+                        <canvas id="dest-accounts-pie-chart" style="width:100%;height:250px;" height="250"></canvas>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    {% for budget in budgets %}
+    <div class="row">
+        <div class="col-lg-12">
+            <div class="box main_budget_chart">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'expenses'|_ }} ({{ budget.name }})</h3>
+                </div>
+                <div class="box-body">
+                    <canvas class="main_budget_canvas" data-url="{{ route('chart.budget.main', [accountIds, budget.id, start.format('Ymd'), end.format('Ymd')]) }}" id="in-out-chart-{{ budget.id }}" style="width:100%;height:400px;" height="400" width="100%"></canvas>
+                </div>
+            </div>
+        </div>
+    </div>
+    {% endfor %}
+    <div class="row">
+        <div class="col-lg-6">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'average_spending_per_destination'|_ }}</h3>
+                </div>
+                <div class="box-body table-responsive no-padding" id="avgExpensesHolder">
+                </div>
+                {# loading indicator #}
+                <div class="overlay">
+                    <span class="fa fa-refresh fa-spin"></span>
+                </div>
+            </div>
+        </div>
+        <div class="col-lg-6">
+
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'expenses'|_ }} ({{ trans('firefly.topX', {number: listLength}) }})</h3>
+                </div>
+                <div class="box-body table-responsive no-padding" id="topExpensesHolder">
+                </div>
+                {# loading indicator #}
+                <div class="overlay">
+                    <span class="fa fa-refresh fa-spin"></span>
+                </div>
+            </div>
+        </div>
+    </div>
+
+{% endblock %}
+
+{% block scripts %}
+    <script type="text/javascript" src="v1/js/lib/Chart.bundle.min.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/ff/charts.defaults.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/ff/charts.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/lib/bootstrap-sortable.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+
+    <script type="text/javascript" nonce="{{ JS_NONCE }}">
+        // to report another URL:
+        var startDate = '{{ start.format('Ymd') }}';
+        var endDate = '{{ end.format('Ymd') }}';
+        var accountIds = '{{ accountIds }}';
+        var budgetIds = '{{ budgetIds }}';
+
+        // html block URI's:
+        var accountsUri = '{{ route('report-data.budget.accounts', [accountIds, budgetIds, start.format('Ymd'), end.format('Ymd')]) }}';
+        var budgetsUri = '{{ route('report-data.budget.budgets', [accountIds, budgetIds, start.format('Ymd'), end.format('Ymd')]) }}';
+        var accountPerBudgetUri = '{{ route('report-data.budget.account-per-budget', [accountIds, budgetIds, start.format('Ymd'), end.format('Ymd')]) }}';
+        var avgExpensesUri = '{{ route('report-data.budget.avg-expenses', [accountIds, budgetIds, start.format('Ymd'), end.format('Ymd')]) }}';
+        var topExpensesUri = '{{ route('report-data.budget.top-expenses', [accountIds, budgetIds, start.format('Ymd'), end.format('Ymd')]) }}';
+
+        // chart uri's
+        var budgetExpenseUri = '{{ route('chart.budget.budget-expense', [accountIds, budgetIds, start.format('Ymd'), end.format('Ymd')]) }}';
+        var categoryExpenseUri = '{{ route('chart.budget.category-expense', [accountIds, budgetIds, start.format('Ymd'), end.format('Ymd')]) }}';
+        var sourceExpenseUri = '{{ route('chart.budget.source-account-expense', [accountIds, budgetIds, start.format('Ymd'), end.format('Ymd')]) }}';
+        var destinationExpenseUri = '{{ route('chart.budget.destination-account-expense', [accountIds, budgetIds, start.format('Ymd'), end.format('Ymd')]) }}';
+    </script>
+
+
+    <script type="text/javascript" src="v1/js/ff/reports/all.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/ff/reports/budget/month.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+
+{% endblock %}
+
+{% block styles %}
+    <link rel="stylesheet" href="v1/css/bootstrap-sortable.css?v={{ FF_VERSION }}" type="text/css" media="all" nonce="{{ JS_NONCE }}">
+{% endblock %}
diff --git a/resources/views/reports/budget/partials/account-per-budget.twig b/resources/views/reports/budget/partials/account-per-budget.twig
new file mode 100644
index 0000000000..0266078590
--- /dev/null
+++ b/resources/views/reports/budget/partials/account-per-budget.twig
@@ -0,0 +1,30 @@
+<table class="table table-hover sortable">
+    <thead>
+    <tr>
+        <th data-defaultsign="az">{{ 'name'|_ }}</th>
+        {% for budget in budgets %}
+            <th data-defaultsign="_19" style="text-align: right;">{{ budget.name }}</th>
+        {% endfor %}
+    </tr>
+    </thead>
+    <tbody>
+    {% for account in report %}
+        {% for currency in account.currencies %}
+            <tr>
+                <td data-value="{{ account.name }} ({{ currency.currency_name }})">
+                    <a href="{{ route('accounts.show', account.id) }}" title="{{ account.iban }}">{{ account.name }} ({{ currency.currency_name }})</a>
+                </td>
+                {% for budget in budgets %}
+                    <td style="text-align: right;">
+                        {% if currency.budgets[budget.id] %}
+                            {{ formatAmountBySymbol(currency.budgets[budget.id], currency.currency_symbol, currency.currency_decimal_places) }}
+                        {% else %}
+                            &mdash;
+                        {% endif %}
+                    </td>
+                {% endfor %}
+            </tr>
+        {% endfor %}
+    {% endfor %}
+    </tbody>
+</table>
diff --git a/resources/views/reports/budget/partials/accounts.twig b/resources/views/reports/budget/partials/accounts.twig
new file mode 100644
index 0000000000..cb21e4f5f5
--- /dev/null
+++ b/resources/views/reports/budget/partials/accounts.twig
@@ -0,0 +1,32 @@
+<table class="table table-hover sortable">
+    <thead>
+    <tr>
+        <th data-defaultsign="az">{{ 'name'|_ }}</th>
+        <th data-defaultsign="_19" style="text-align: right;">{{ 'spent'|_ }}</th>
+    </tr>
+    </thead>
+    <tbody>
+    {% for account in report %}
+        {% for currency in account.currencies %}
+            <tr>
+                <td data-value="{{ account.name }} ({{ currency.currency_name }})">
+                    <a href="{{ route('accounts.show', account.id) }}" title="{{ account.iban }}">{{ account.name }} ({{ currency.currency_name }})</a>
+                </td>
+                <td data-value="{{ currency.sum }}" style="text-align: right;">
+                    {{ formatAmountBySymbol(currency.sum, currency.currency_symbol, currency.currency_decimal_places) }}
+                </td>
+            </tr>
+        {% endfor %}
+    {% endfor %}
+    </tbody>
+    <tfoot>
+    {% for sum in sums %}
+        <tr>
+            <td>{{ 'sum'|_ }} ({{ sum.currency_name }})</td>
+            <td style="text-align: right;">
+                {{ formatAmountBySymbol(sum.sum, sum.currency_symbol, sum.currency_decimal_places) }}
+            </td>
+        </tr>
+    {% endfor %}
+    </tfoot>
+</table>
diff --git a/resources/views/reports/budget/partials/avg-expenses.twig b/resources/views/reports/budget/partials/avg-expenses.twig
new file mode 100644
index 0000000000..b34a2ecc63
--- /dev/null
+++ b/resources/views/reports/budget/partials/avg-expenses.twig
@@ -0,0 +1,46 @@
+<table class="table table-hover sortable">
+    <thead>
+    <tr>
+        <th data-defaultsign="az">{{ 'account'|_ }}</th>
+        <th data-defaultsign="_19" style="text-align: right;">{{ 'spent_average'|_ }}</th>
+        <th data-defaultsign="_19" style="text-align: right;">{{ 'total'|_ }}</th>
+        <th data-defaultsign="_19">{{ 'transaction_count'|_ }}</th>
+    </tr>
+    </thead>
+    <tbody>
+    {% for row in result %}
+        {% if loop.index > listLength %}
+            <tr class="overListLength">
+        {% else %}
+            <tr>
+        {% endif %}
+        <td data-sortable="false">
+            <a href="{{ route('accounts.show', row.destination_account_id) }}">
+                {{ row.destination_account_name }}
+            </a>
+        </td>
+        <td data-value="{{ row.avg }}" style="text-align: right;">
+            {{ formatAmountBySymbol(row.avg, row.currency_symbol, row.currency_decimal_places) }}
+        </td>
+
+        <td data-value="{{ row.sum }}" style="text-align: right;">
+            {{ formatAmountBySymbol(row.sum, row.currency_symbol, row.currency_decimal_places) }}
+        </td>
+
+        <td data-value="{{ row.transactions }}">
+            {{ row.transactions }}
+        </td>
+
+        </tr>
+    {% endfor %}
+    </tbody>
+    <tfoot>
+    {% if result|length > listLength %}
+        <tr>
+            <td colspan="5" class="active">
+                <a href="#" class="listLengthTrigger">{{ trans('firefly.show_full_list',{number:incomeTopLength}) }}</a>
+            </td>
+        </tr>
+    {% endif %}
+    </tfoot>
+</table>
diff --git a/resources/views/reports/budget/partials/budgets.twig b/resources/views/reports/budget/partials/budgets.twig
new file mode 100644
index 0000000000..66dab99ab5
--- /dev/null
+++ b/resources/views/reports/budget/partials/budgets.twig
@@ -0,0 +1,44 @@
+<table class="table table-hover sortable">
+    <thead>
+    <tr>
+        <th data-defaultsign="az">{{ 'name'|_ }}</th>
+        <th data-defaultsign="_19" style="text-align: right;">{{ 'spent'|_ }}</th>
+        <th data-defaultsign="_19">{{ trans('list.percentage') }}</th>
+    </tr>
+    </thead>
+    <tbody>
+    {% for budget in report %}
+        {% if budget.currencies|length == 0 %}
+            <tr>
+                <td data-value="{{ budget.name }}">
+                    <a href="{{ route('budgets.show', budget.id) }}" title="{{ budget.name }}">{{ budget.name }}</a>
+                </td>
+                <td style="text-align: right;">&mdash;</td>
+                <td>&nbsp;</td>
+            </tr>
+        {% endif %}
+        {% for currency in budget.currencies %}
+            <tr>
+                <td data-value="{{ budget.name }} ({{ currency.currency_name }})">
+                    <a href="{{ route('budgets.show', budget.id) }}" title="{{ budget.name }}">{{ budget.name }} ({{ currency.currency_name }})</a>
+                </td>
+                <td data-value="{{ currency.sum }}" style="text-align: right;">
+                    {{ formatAmountBySymbol(currency.sum, currency.currency_symbol, currency.currency_decimal_places) }}
+                </td>
+                <td data-value="{{ currency.sum_pct }}">{{ currency.sum_pct }}%</td>
+            </tr>
+        {% endfor %}
+    {% endfor %}
+    </tbody>
+    <tfoot>
+    {% for sum in sums %}
+        <tr>
+            <td>{{ 'sum'|_ }} ({{ sum.currency_name }})</td>
+            <td style="text-align: right;">
+                {{ formatAmountBySymbol(sum.sum, sum.currency_symbol, sum.currency_decimal_places) }}
+            </td>
+            <td>&nbsp;</td>
+        </tr>
+    {% endfor %}
+    </tfoot>
+</table>
diff --git a/resources/views/reports/budget/partials/top-expenses.twig b/resources/views/reports/budget/partials/top-expenses.twig
new file mode 100644
index 0000000000..8b5d71bd6b
--- /dev/null
+++ b/resources/views/reports/budget/partials/top-expenses.twig
@@ -0,0 +1,54 @@
+<table class="table table-hover sortable">
+    <thead>
+    <tr>
+        <th data-defaultsort="disabled">{{ 'description'|_ }}</th>
+        <th data-defaultsign="month">{{ 'date'|_ }}</th>
+        <th data-defaultsign="az">{{ 'account'|_ }}</th>
+        <th data-defaultsign="az">{{ 'budget'|_ }}</th>
+        <th data-defaultsign="_19" style="text-align: right;">{{ 'amount'|_ }}</th>
+    </tr>
+    </thead>
+    <tbody>
+    {% for row in result %}
+        {% if loop.index > listLength %}
+            <tr class="overListLength">
+        {% else %}
+            <tr>
+        {% endif %}
+        <td data-sortable="false">
+            <a href="{{ route('transactions.show', row.transaction_group_id) }}">
+                {{ row.description }}
+            </a>
+        </td>
+        <td data-value="{{ row.date_sort }}">
+            {{ row.date }}
+        </td>
+
+        <td data-sortable="false">
+            <a href="{{ route('accounts.show', row.destination_account_id) }}">
+                {{ row.destination_account_name }}
+            </a>
+        </td>
+        <td data-sortable="false">
+            <a href="{{ route('budgets.show', row.budget_id) }}">
+                {{ row.budget_name }}
+            </a>
+        </td>
+
+        <td data-value="{{ row.amount }}" style="text-align: right;">
+            {{ formatAmountBySymbol(row.amount, row.currency_symbol, row.currency_decimal_places) }}
+        </td>
+
+        </tr>
+    {% endfor %}
+    </tbody>
+    <tfoot>
+    {% if result|length > listLength %}
+        <tr>
+            <td colspan="5" class="active">
+                <a href="#" class="listLengthTrigger">{{ trans('firefly.show_full_list',{number:incomeTopLength}) }}</a>
+            </td>
+        </tr>
+    {% endif %}
+    </tfoot>
+</table>
diff --git a/resources/views/reports/category/month.twig b/resources/views/reports/category/month.twig
new file mode 100644
index 0000000000..963d855eb5
--- /dev/null
+++ b/resources/views/reports/category/month.twig
@@ -0,0 +1,257 @@
+{% extends './v1/layout/default' %}
+
+{% block breadcrumbs %}
+    {{ Breadcrumbs.render(Route.getCurrentRoute.getName, accountIds, categoryIds, start, end) }}
+{% endblock %}
+
+{% block content %}
+
+    <div class="row">
+        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'accounts'|_ }}</h3>
+                </div>
+                <div class="box-body table-responsive no-padding" id="accountsHolder">
+                </div>
+                {# loading indicator #}
+                <div class="overlay">
+                    <span class="fa fa-refresh fa-spin"></span>
+                </div>
+            </div>
+        </div>
+        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'categories'|_ }}</h3>
+                </div>
+                <div class="box-body table-responsive no-padding" id="categoriesHolder">
+                </div>
+                {# loading indicator #}
+                <div class="overlay">
+                    <span class="fa fa-refresh fa-spin"></span>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'account_per_category'|_ }}</h3>
+                </div>
+                <div class="box-body table-responsive no-padding" id="accountPerCategoryHolder">
+                </div>
+                {# loading indicator #}
+                <div class="overlay">
+                    <span class="fa fa-refresh fa-spin"></span>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-lg-4 col-md-6">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'expense_per_category'|_ }}</h3>
+                </div>
+                <div class="box-body">
+                    <div style="width:100%;margin:0 auto;">
+                        <canvas id="category-out-pie-chart" style="width:100%;height:250px;" height="250"></canvas>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="col-lg-4 col-md-6">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'income_per_category'|_ }}</h3>
+                </div>
+                <div class="box-body">
+                    <div style="width:100%;margin:0 auto;">
+                        <canvas id="category-in-pie-chart" style="width:100%;height:250px;" height="250"></canvas>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="col-lg-4 col-md-6">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'expense_per_budget'|_ }}</h3>
+                </div>
+                <div class="box-body">
+                    <div style="width:100%;margin:0 auto;">
+                        <canvas id="budgets-out-pie-chart" style="width:100%;height:250px;" height="250"></canvas>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-lg-6 col-md-6">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'expense_per_source_account'|_ }}</h3>
+                </div>
+                <div class="box-body">
+                    <div style="width:100%;margin:0 auto;">
+                        <canvas id="source-out-pie-chart" style="width:100%;height:250px;" height="250"></canvas>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="col-lg-6 col-md-6">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'income_per_source_account'|_ }}</h3>
+                </div>
+                <div class="box-body">
+                    <div style="width:100%;margin:0 auto;">
+                        <canvas id="source-in-pie-chart" style="width:100%;height:250px;" height="250"></canvas>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-lg-6 col-md-6">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'expense_per_destination_account'|_ }}</h3>
+                </div>
+                <div class="box-body">
+                    <div style="width:100%;margin:0 auto;">
+                        <canvas id="dest-out-pie-chart" style="width:100%;height:250px;" height="250"></canvas>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="col-lg-6 col-md-6">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'income_per_destination_account'|_ }}</h3>
+                </div>
+                <div class="box-body">
+                    <div style="width:100%;margin:0 auto;">
+                        <canvas id="dest-in-pie-chart" style="width:100%;height:250px;" height="250"></canvas>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    {% for category in categories %}
+        <div class="row">
+            <div class="col-lg-12">
+                <div class="box main_budget_chart">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ 'income_and_expenses'|_ }} ({{ category.name }})</h3>
+                    </div>
+                    <div class="box-body">
+                        <canvas class="main_category_canvas" data-url="{{ route('chart.category.main', [accountIds, category.id, start.format('Ymd'), end.format('Ymd')]) }}" id="in-out-chart-{{ category.id }}" style="width:100%;height:400px;" height="400" width="100%"></canvas>
+                    </div>
+                </div>
+            </div>
+        </div>
+    {% endfor %}
+    <div class="row">
+        <div class="col-lg-6">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'average_spending_per_destination'|_ }}</h3>
+                </div>
+                <div class="box-body table-responsive no-padding" id="avgExpensesHolder">
+                </div>
+                {# loading indicator #}
+                <div class="overlay">
+                    <span class="fa fa-refresh fa-spin"></span>
+                </div>
+            </div>
+        </div>
+        <div class="col-lg-6">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'average_earning_per_source'|_ }}</h3>
+                </div>
+                <div class="box-body table-responsive no-padding" id="avgIncomeHolder">
+                </div>
+                {# loading indicator #}
+                <div class="overlay">
+                    <span class="fa fa-refresh fa-spin"></span>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-lg-6">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'expenses'|_ }} ({{ trans('firefly.topX', {number: listLength}) }})</h3>
+                </div>
+                <div class="box-body table-responsive no-padding" id="topExpensesHolder">
+                </div>
+                {# loading indicator #}
+                <div class="overlay">
+                    <span class="fa fa-refresh fa-spin"></span>
+                </div>
+            </div>
+        </div>
+        <div class="col-lg-6">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'income'|_ }} ({{ trans('firefly.topX', {number: listLength}) }})</h3>
+                </div>
+                <div class="box-body table-responsive no-padding" id="topIncomeHolder">
+                </div>
+                {# loading indicator #}
+                <div class="overlay">
+                    <span class="fa fa-refresh fa-spin"></span>
+                </div>
+            </div>
+        </div>
+    </div>
+
+{% endblock %}
+
+{% block scripts %}
+    <script type="text/javascript" src="v1/js/lib/Chart.bundle.min.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/ff/charts.defaults.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/ff/charts.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/lib/bootstrap-sortable.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+
+    <script type="text/javascript" src="v1/js/ff/reports/all.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" nonce="{{ JS_NONCE }}">
+        // to report another URL:
+        var startDate = '{{ start.format('Ymd') }}';
+        var endDate = '{{ end.format('Ymd') }}';
+        var accountIds = '{{ accountIds }}';
+        var categoryIds = '{{ categoryIds }}';
+
+        // html block URI's:
+
+        var accountsUri = '{{ route('report-data.category.accounts', [accountIds, categoryIds, start.format('Ymd'), end.format('Ymd')]) }}';
+        var categoriesUri = '{{ route('report-data.category.categories', [accountIds, categoryIds, start.format('Ymd'), end.format('Ymd')]) }}';
+        var accountPerCategoryUri = '{{ route('report-data.category.account-per-category', [accountIds, categoryIds, start.format('Ymd'), end.format('Ymd')]) }}';
+
+        // pie charts:
+        var categoryOutUri = '{{ route('chart.category.category-expense', [accountIds, categoryIds, start.format('Ymd'), end.format('Ymd')]) }}';
+        var categoryInUri = '{{ route('chart.category.category-income', [accountIds, categoryIds, start.format('Ymd'), end.format('Ymd')]) }}';
+        var budgetsOutUri = '{{ route('chart.category.budget-expense', [accountIds, categoryIds, start.format('Ymd'), end.format('Ymd')]) }}';
+        var sourceOutUri = '{{ route('chart.category.source-expense', [accountIds, categoryIds, start.format('Ymd'), end.format('Ymd')]) }}';
+        var sourceInUri = '{{ route('chart.category.source-income', [accountIds, categoryIds, start.format('Ymd'), end.format('Ymd')]) }}';
+        var destOutUri = '{{ route('chart.category.dest-expense', [accountIds, categoryIds, start.format('Ymd'), end.format('Ymd')]) }}';
+        var destInUri = '{{ route('chart.category.dest-income', [accountIds, categoryIds, start.format('Ymd'), end.format('Ymd')]) }}';
+
+        var avgExpensesUri = '{{ route('report-data.category.avg-expenses', [accountIds, categoryIds, start.format('Ymd'), end.format('Ymd')]) }}';
+        var topExpensesUri = '{{ route('report-data.category.top-expenses', [accountIds, categoryIds, start.format('Ymd'), end.format('Ymd')]) }}';
+        var avgIncomeUri = '{{ route('report-data.category.avg-income', [accountIds, categoryIds, start.format('Ymd'), end.format('Ymd')]) }}';
+        var topIncomeUri = '{{ route('report-data.category.top-income', [accountIds, categoryIds, start.format('Ymd'), end.format('Ymd')]) }}';
+
+    </script>
+    <script type="text/javascript" src="v1/js/ff/reports/category/month.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+
+{% endblock %}
+
+{% block styles %}
+    <link rel="stylesheet" href="v1/css/bootstrap-sortable.css?v={{ FF_VERSION }}" type="text/css" media="all" nonce="{{ JS_NONCE }}">
+{% endblock %}
diff --git a/resources/views/reports/category/partials/account-per-category.twig b/resources/views/reports/category/partials/account-per-category.twig
new file mode 100644
index 0000000000..cb960c33bb
--- /dev/null
+++ b/resources/views/reports/category/partials/account-per-category.twig
@@ -0,0 +1,31 @@
+<table class="table table-hover sortable">
+    <thead>
+    <tr>
+        <th data-defaultsign="az">{{ 'name'|_ }}</th>
+        {% for category in categories %}
+            <th data-defaultsign="_19" style="text-align: right;">{{ category.name }}</th>
+        {% endfor %}
+    </tr>
+    </thead>
+    <tbody>
+    {% for account in report %}
+        {% for currency in account.currencies %}
+            <tr>
+                <td data-value="{{ account.name }} ({{ currency.currency_name }})">
+                    <a href="{{ route('accounts.show', account.id) }}" title="{{ account.iban }}">{{ account.name }} ({{ currency.currency_name }})</a>
+                </td>
+                {% for category in categories %}
+                    <td style="text-align: right;">
+                        {% if currency.categories[category.id] %}
+                            <span title="{{ 'earned'|_ }}: {{ formatAmountBySymbol(currency.categories[category.id].earned, currency.currency_symbol, currency.currency_decimal_places, false) }}, {{ 'spent'|_ }}: {{ formatAmountBySymbol(currency.categories[category.id].spent, currency.currency_symbol, currency.currency_decimal_places, false) }}"
+                            {{ formatAmountBySymbol(currency.categories[category.id].sum, currency.currency_symbol, currency.currency_decimal_places) }}
+                        {% else %}
+                            &mdash;
+                        {% endif %}
+                    </td>
+                {% endfor %}
+            </tr>
+        {% endfor %}
+    {% endfor %}
+    </tbody>
+</table>
diff --git a/resources/views/reports/category/partials/accounts.twig b/resources/views/reports/category/partials/accounts.twig
new file mode 100644
index 0000000000..4e9ce9e9a2
--- /dev/null
+++ b/resources/views/reports/category/partials/accounts.twig
@@ -0,0 +1,46 @@
+<table class="table table-hover sortable">
+    <thead>
+    <tr>
+        <th data-defaultsign="az">{{ 'name'|_ }}</th>
+        <th data-defaultsign="_19" style="text-align: right;">{{ 'spent'|_ }}</th>
+        <th data-defaultsign="_19" style="text-align: right;">{{ 'earned'|_ }}</th>
+        <th data-defaultsign="_19" style="text-align: right;">{{ 'sum'|_ }}</th>
+    </tr>
+    </thead>
+    <tbody>
+    {% for account in report %}
+        {% for currency in account.currencies %}
+            <tr>
+                <td data-value="{{ account.name }} ({{ currency.currency_name }})">
+                    <a href="{{ route('accounts.show', account.id) }}" title="{{ account.iban }}">{{ account.name }} ({{ currency.currency_name }})</a>
+                </td>
+                <td data-value="{{ currency.spent }}" style="text-align: right;">
+                    {{ formatAmountBySymbol(currency.spent, currency.currency_symbol, currency.currency_decimal_places) }}
+                </td>
+                <td data-value="{{ currency.earned }}" style="text-align: right;">
+                    {{ formatAmountBySymbol(currency.earned, currency.currency_symbol, currency.currency_decimal_places) }}
+                </td>
+                <td data-value="{{ currency.sum }}" style="text-align: right;">
+                    {{ formatAmountBySymbol(currency.sum, currency.currency_symbol, currency.currency_decimal_places) }}
+                </td>
+            </tr>
+        {% endfor %}
+    {% endfor %}
+    </tbody>
+    <tfoot>
+    {% for sum in sums %}
+        <tr>
+            <td>{{ 'sum'|_ }} ({{ sum.currency_name }})</td>
+            <td style="text-align: right;">
+                {{ formatAmountBySymbol(sum.spent_sum, sum.currency_symbol, sum.currency_decimal_places) }}
+            </td>
+            <td style="text-align: right;">
+                {{ formatAmountBySymbol(sum.earned_sum, sum.currency_symbol, sum.currency_decimal_places) }}
+            </td>
+            <td style="text-align: right;">
+                {{ formatAmountBySymbol(sum.total_sum, sum.currency_symbol, sum.currency_decimal_places) }}
+            </td>
+        </tr>
+    {% endfor %}
+    </tfoot>
+</table>
diff --git a/resources/views/reports/category/partials/avg-expenses.twig b/resources/views/reports/category/partials/avg-expenses.twig
new file mode 100644
index 0000000000..b34a2ecc63
--- /dev/null
+++ b/resources/views/reports/category/partials/avg-expenses.twig
@@ -0,0 +1,46 @@
+<table class="table table-hover sortable">
+    <thead>
+    <tr>
+        <th data-defaultsign="az">{{ 'account'|_ }}</th>
+        <th data-defaultsign="_19" style="text-align: right;">{{ 'spent_average'|_ }}</th>
+        <th data-defaultsign="_19" style="text-align: right;">{{ 'total'|_ }}</th>
+        <th data-defaultsign="_19">{{ 'transaction_count'|_ }}</th>
+    </tr>
+    </thead>
+    <tbody>
+    {% for row in result %}
+        {% if loop.index > listLength %}
+            <tr class="overListLength">
+        {% else %}
+            <tr>
+        {% endif %}
+        <td data-sortable="false">
+            <a href="{{ route('accounts.show', row.destination_account_id) }}">
+                {{ row.destination_account_name }}
+            </a>
+        </td>
+        <td data-value="{{ row.avg }}" style="text-align: right;">
+            {{ formatAmountBySymbol(row.avg, row.currency_symbol, row.currency_decimal_places) }}
+        </td>
+
+        <td data-value="{{ row.sum }}" style="text-align: right;">
+            {{ formatAmountBySymbol(row.sum, row.currency_symbol, row.currency_decimal_places) }}
+        </td>
+
+        <td data-value="{{ row.transactions }}">
+            {{ row.transactions }}
+        </td>
+
+        </tr>
+    {% endfor %}
+    </tbody>
+    <tfoot>
+    {% if result|length > listLength %}
+        <tr>
+            <td colspan="5" class="active">
+                <a href="#" class="listLengthTrigger">{{ trans('firefly.show_full_list',{number:incomeTopLength}) }}</a>
+            </td>
+        </tr>
+    {% endif %}
+    </tfoot>
+</table>
diff --git a/resources/views/reports/category/partials/avg-income.twig b/resources/views/reports/category/partials/avg-income.twig
new file mode 100644
index 0000000000..b859f13a09
--- /dev/null
+++ b/resources/views/reports/category/partials/avg-income.twig
@@ -0,0 +1,46 @@
+<table class="table table-hover sortable">
+    <thead>
+    <tr>
+        <th data-defaultsign="az">{{ 'account'|_ }}</th>
+        <th data-defaultsign="_19" style="text-align: right;">{{ 'spent_average'|_ }}</th>
+        <th data-defaultsign="_19" style="text-align: right;">{{ 'total'|_ }}</th>
+        <th data-defaultsign="_19">{{ 'transaction_count'|_ }}</th>
+    </tr>
+    </thead>
+    <tbody>
+    {% for row in result %}
+        {% if loop.index > listLength %}
+            <tr class="overListLength">
+        {% else %}
+            <tr>
+        {% endif %}
+        <td data-sortable="false">
+            <a href="{{ route('accounts.show', row.source_account_id) }}">
+                {{ row.source_account_name }}
+            </a>
+        </td>
+        <td data-value="{{ row.avg }}" style="text-align: right;">
+            {{ formatAmountBySymbol(row.avg, row.currency_symbol, row.currency_decimal_places) }}
+        </td>
+
+        <td data-value="{{ row.sum }}" style="text-align: right;">
+            {{ formatAmountBySymbol(row.sum, row.currency_symbol, row.currency_decimal_places) }}
+        </td>
+
+        <td data-value="{{ row.transactions }}">
+            {{ row.transactions }}
+        </td>
+
+        </tr>
+    {% endfor %}
+    </tbody>
+    <tfoot>
+    {% if result|length > listLength %}
+        <tr>
+            <td colspan="5" class="active">
+                <a href="#" class="listLengthTrigger">{{ trans('firefly.show_full_list',{number:incomeTopLength}) }}</a>
+            </td>
+        </tr>
+    {% endif %}
+    </tfoot>
+</table>
diff --git a/resources/views/reports/category/partials/categories.twig b/resources/views/reports/category/partials/categories.twig
new file mode 100644
index 0000000000..0846294049
--- /dev/null
+++ b/resources/views/reports/category/partials/categories.twig
@@ -0,0 +1,56 @@
+<table class="table table-hover sortable">
+    <thead>
+    <tr>
+        <th data-defaultsign="az">{{ 'name'|_ }}</th>
+        <th data-defaultsign="_19" style="text-align: right;">{{ 'spent'|_ }}</th>
+        <th data-defaultsign="_19" style="text-align: right;">{{ 'earned'|_ }}</th>
+        <th data-defaultsign="_19" style="text-align: right;">{{ 'sum'|_ }}</th>
+    </tr>
+    </thead>
+    <tbody>
+    {% for category in report %}
+        {% if category.currencies|length == 0 %}
+            <tr>
+                <td data-value="{{ category.name }}">
+                    <a href="{{ route('categories.show', category.id) }}" title="{{ category.name }}">{{ category.name }}</a>
+                </td>
+                <td style="text-align: right;">&mdash;</td>
+                <td style="text-align: right;">&mdash;</td>
+                <td style="text-align: right;">&mdash;</td>
+            </tr>
+        {% endif %}
+        {% for currency in category.currencies %}
+            <tr>
+                <td data-value="{{ category.name }} ({{ currency.currency_name }})">
+                    <a href="{{ route('categories.show', category.id) }}" title="{{ category.name }}">{{ category.name }} ({{ currency.currency_name }})</a>
+                </td>
+                <td data-value="{{ currency.spent }}" style="text-align: right;">
+                    {{ formatAmountBySymbol(currency.spent, currency.currency_symbol, currency.currency_decimal_places) }}
+                </td>
+                <td data-value="{{ currency.earned }}" style="text-align: right;">
+                    {{ formatAmountBySymbol(currency.earned, currency.currency_symbol, currency.currency_decimal_places) }}
+                </td>
+                <td data-value="{{ currency.sum }}" style="text-align: right;">
+                    {{ formatAmountBySymbol(currency.sum, currency.currency_symbol, currency.currency_decimal_places) }}
+                </td>
+            </tr>
+        {% endfor %}
+    {% endfor %}
+    </tbody>
+    <tfoot>
+    {% for sum in sums %}
+        <tr>
+            <td>{{ 'sum'|_ }} ({{ sum.currency_name }})</td>
+            <td style="text-align: right;">
+                {{ formatAmountBySymbol(sum.spent_sum, sum.currency_symbol, sum.currency_decimal_places) }}
+            </td>
+            <td style="text-align: right;">
+                {{ formatAmountBySymbol(sum.earned_sum, sum.currency_symbol, sum.currency_decimal_places) }}
+            </td>
+            <td style="text-align: right;">
+                {{ formatAmountBySymbol(sum.total_sum, sum.currency_symbol, sum.currency_decimal_places) }}
+            </td>
+        </tr>
+    {% endfor %}
+    </tfoot>
+</table>
diff --git a/resources/views/reports/category/partials/top-expenses.twig b/resources/views/reports/category/partials/top-expenses.twig
new file mode 100644
index 0000000000..f435d41189
--- /dev/null
+++ b/resources/views/reports/category/partials/top-expenses.twig
@@ -0,0 +1,54 @@
+<table class="table table-hover sortable">
+    <thead>
+    <tr>
+        <th data-defaultsort="disabled">{{ 'description'|_ }}</th>
+        <th data-defaultsign="month">{{ 'date'|_ }}</th>
+        <th data-defaultsign="az">{{ 'account'|_ }}</th>
+        <th data-defaultsign="az">{{ 'category'|_ }}</th>
+        <th data-defaultsign="_19" style="text-align: right;">{{ 'amount'|_ }}</th>
+    </tr>
+    </thead>
+    <tbody>
+    {% for row in result %}
+        {% if loop.index > listLength %}
+            <tr class="overListLength">
+        {% else %}
+            <tr>
+        {% endif %}
+        <td data-sortable="false">
+            <a href="{{ route('transactions.show', row.transaction_group_id) }}">
+                {{ row.description }}
+            </a>
+        </td>
+        <td data-value="{{ row.date_sort }}">
+            {{ row.date }}
+        </td>
+
+        <td data-sortable="false">
+            <a href="{{ route('accounts.show', row.destination_account_id) }}">
+                {{ row.destination_account_name }}
+            </a>
+        </td>
+        <td data-sortable="false">
+            <a href="{{ route('categories.show', row.category_id) }}">
+                {{ row.category_name }}
+            </a>
+        </td>
+
+        <td data-value="{{ row.amount }}" style="text-align: right;">
+            {{ formatAmountBySymbol(row.amount, row.currency_symbol, row.currency_decimal_places) }}
+        </td>
+
+        </tr>
+    {% endfor %}
+    </tbody>
+    <tfoot>
+    {% if result|length > listLength %}
+        <tr>
+            <td colspan="5" class="active">
+                <a href="#" class="listLengthTrigger">{{ trans('firefly.show_full_list',{number:incomeTopLength}) }}</a>
+            </td>
+        </tr>
+    {% endif %}
+    </tfoot>
+</table>
diff --git a/resources/views/reports/category/partials/top-income.twig b/resources/views/reports/category/partials/top-income.twig
new file mode 100644
index 0000000000..e5d566d468
--- /dev/null
+++ b/resources/views/reports/category/partials/top-income.twig
@@ -0,0 +1,54 @@
+<table class="table table-hover sortable">
+    <thead>
+    <tr>
+        <th data-defaultsort="disabled">{{ 'description'|_ }}</th>
+        <th data-defaultsign="month">{{ 'date'|_ }}</th>
+        <th data-defaultsign="az">{{ 'account'|_ }}</th>
+        <th data-defaultsign="az">{{ 'category'|_ }}</th>
+        <th data-defaultsign="_19" style="text-align: right;">{{ 'amount'|_ }}</th>
+    </tr>
+    </thead>
+    <tbody>
+    {% for row in result %}
+        {% if loop.index > listLength %}
+            <tr class="overListLength">
+        {% else %}
+            <tr>
+        {% endif %}
+        <td data-sortable="false">
+            <a href="{{ route('transactions.show', row.transaction_group_id) }}">
+                {{ row.description }}
+            </a>
+        </td>
+        <td data-value="{{ row.date_sort }}">
+            {{ row.date }}
+        </td>
+
+        <td data-sortable="false">
+            <a href="{{ route('accounts.show', row.source_account_id) }}">
+                {{ row.source_account_name }}
+            </a>
+        </td>
+        <td data-sortable="false">
+            <a href="{{ route('categories.show', row.category_id) }}">
+                {{ row.category_name }}
+            </a>
+        </td>
+
+        <td data-value="{{ row.amount }}" style="text-align: right;">
+            {{ formatAmountBySymbol(row.amount, row.currency_symbol, row.currency_decimal_places) }}
+        </td>
+
+        </tr>
+    {% endfor %}
+    </tbody>
+    <tfoot>
+    {% if result|length > listLength %}
+        <tr>
+            <td colspan="5" class="active">
+                <a href="#" class="listLengthTrigger">{{ trans('firefly.show_full_list',{number:incomeTopLength}) }}</a>
+            </td>
+        </tr>
+    {% endif %}
+    </tfoot>
+</table>
diff --git a/resources/views/reports/default/month.twig b/resources/views/reports/default/month.twig
new file mode 100644
index 0000000000..7b5768db60
--- /dev/null
+++ b/resources/views/reports/default/month.twig
@@ -0,0 +1,180 @@
+{% extends './v1/layout/default' %}
+
+{% block breadcrumbs %}
+    {{ Breadcrumbs.render(Route.getCurrentRoute.getName, accountIds, start, end) }}
+{% endblock %}
+
+{% block content %}
+
+    {# chart #}
+    <div class="row">
+        <div class="col-lg-12 col-md-12 col-sm-12">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'accountBalances'|_ }}</h3>
+                </div>
+                <div class="box-body">
+                    <canvas id="account-balances-chart" style="width:100%;height:400px;" height="400" width="100%"></canvas>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    {# account balances and income vs. expense #}
+    <div class="row">
+        <div class="col-lg-6 col-md-6 col-sm-6">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'accountBalances'|_ }}</h3>
+                </div>
+                <div class="box-body table-responsive no-padding" id="accountReport">
+                </div>
+                {# loading indicator #}
+                <div class="overlay">
+                    <span class="fa fa-refresh fa-spin"></span>
+                </div>
+            </div>
+        </div>
+        <div class="col-lg-6 col-md-6 col-sm-6">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'incomeVsExpenses'|_ }}</h3>
+                </div>
+                <div class="box-body table-responsive no-padding" id="incomeVsExpenseReport">
+                </div>
+                {# loading indicator #}
+                <div class="overlay">
+                    <span class="fa fa-refresh fa-spin"></span>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    {# in and out #}
+    <div class="row">
+        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'income'|_ }}</h3>
+                </div>
+                <div class="box-body table-responsive no-padding" id="incomeReport">
+                </div>
+                {# loading indicator #}
+                <div class="overlay">
+                    <span class="fa fa-refresh fa-spin"></span>
+                </div>
+            </div>
+        </div>
+        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'expenses'|_ }}</h3>
+                </div>
+                <div class="box-body table-responsive no-padding" id="expenseReport">
+                </div>
+                {# loading indicator #}
+                <div class="overlay">
+                    <span class="fa fa-refresh fa-spin"></span>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="row">
+        <div class="col-lg-8 col-md-8 col-sm-12">
+            <div class="box">
+
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'budgets'|_ }}</h3>
+                </div>
+                <div class="box-body table-responsive no-padding" id="budgetReport">
+                </div>
+                {# loading indicator #}
+                <div class="overlay">
+                    <span class="fa fa-refresh fa-spin"></span>
+                </div>
+            </div>
+
+
+        </div>
+        <div class="col-lg-4 col-md-4 col-sm-12">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'categories'|_ }}</h3>
+                </div>
+                <div class="box-body table-responsive no-padding" id="categoryReport"></div>
+                {# loading indicator #}
+                <div class="overlay">
+                    <span class="fa fa-refresh fa-spin"></span>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-lg-12 col-md-12 col-sm-12">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'budgets'|_ }} ({{ 'splitByAccount'|_|lower }})</h3>
+                </div>
+                <div class="box-body table-responsive no-padding" id="balanceReport">
+                </div>
+                {# loading indicator #}
+                <div class="overlay">
+                    <span class="fa fa-refresh fa-spin"></span>
+                </div>
+            </div>
+
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-lg-12 col-md-12 col-sm-12">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'bills'|_ }}</h3>
+                </div>
+                <div class="box-body table-responsive no-padding" id="billReport"></div>
+                {# loading indicator #}
+                <div class="overlay">
+                    <span class="fa fa-refresh fa-spin"></span>
+                </div>
+            </div>
+        </div>
+    </div>
+{% endblock %}
+{% block styles %}
+    <link rel="stylesheet" href="v1/css/bootstrap-sortable.css?v={{ FF_VERSION }}" type="text/css" media="all" nonce="{{ JS_NONCE }}">
+{% endblock %}
+{% block scripts %}
+
+    <script type="text/javascript" src="v1/js/lib/bootstrap-sortable.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/lib/Chart.bundle.min.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/ff/charts.defaults.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/ff/charts.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" nonce="{{ JS_NONCE }}">
+        var year = {{ start.year }};
+        var month = {{ start.month }};
+
+        // to report another URL:
+        var startDate = '{{ start.format('Ymd') }}';
+        var endDate = '{{ end.format('Ymd') }}';
+        var reportType = '{{ reportType }}';
+        var accountIds = '{{ accountIds }}';
+
+        // uri's for data
+        var accountReportUri = '{{ route('report-data.account.general', [accountIds, start.format('Ymd'), end.format('Ymd')]) }}';
+        var categoryReportUri = '{{ route('report-data.category.operations', [accountIds, start.format('Ymd'), end.format('Ymd')]) }}';
+        var budgetReportUri = '{{ route('report-data.budget.general', [accountIds, start.format('Ymd'), end.format('Ymd')]) }}';
+        var balanceReportUri = '{{ route('report-data.balance.general', [accountIds, start.format('Ymd'), end.format('Ymd')]) }}';
+        var incomeReportUri = '{{ route('report-data.operations.income', [accountIds, start.format('Ymd'), end.format('Ymd')]) }}';
+        var expenseReportUri = '{{ route('report-data.operations.expenses', [accountIds, start.format('Ymd'), end.format('Ymd')]) }}';
+        var incExpReportUri = '{{ route('report-data.operations.operations', [accountIds, start.format('Ymd'), end.format('Ymd')]) }}';
+        var billReportUri = '{{ route('report-data.bills.overview', [accountIds, start.format('Ymd'), end.format('Ymd')]) }}';
+
+        // uri's for charts:
+        var accountChartUri = '{{ route('chart.account.report', [accountIds, start.format('Ymd'), end.format('Ymd')]) }}';
+
+    </script>
+    <script type="text/javascript" src="v1/js/ff/reports/all.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/ff/reports/default/all.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/ff/reports/default/month.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+{% endblock %}
diff --git a/resources/views/reports/default/multi-year.twig b/resources/views/reports/default/multi-year.twig
new file mode 100644
index 0000000000..9400bb6c5c
--- /dev/null
+++ b/resources/views/reports/default/multi-year.twig
@@ -0,0 +1,224 @@
+{% extends './v1/layout/default' %}
+
+{% block breadcrumbs %}
+    {{ Breadcrumbs.render(Route.getCurrentRoute.getName, accountIds, start, end) }}
+{% endblock %}
+
+{% block content %}
+
+    {# charts #}
+    <div class="row">
+        <div class="col-lg-12 col-md-12 col-sm-12">
+            <div class="box" id="year-inc-exp">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'incomeVsExpenses'|_ }}</h3>
+                </div>
+                <div class="box-body">
+                    <canvas id="income-expenses-chart" style="width:100%;height:400px;" height="400" width="100%"></canvas>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    {# balances and income vs. expense. #}
+    <div class="row">
+        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'accountBalances'|_ }}</h3>
+                </div>
+                <div class="box-body table-responsive no-padding" id="accountReport">
+                </div>
+                {# loading indicator #}
+                <div class="overlay">
+                    <span class="fa fa-refresh fa-spin"></span>
+                </div>
+            </div>
+        </div>
+        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'incomeVsExpenses'|_ }}</h3>
+                </div>
+                <div class="box-body table-responsive no-padding" id="incomeVsExpenseReport">
+                </div>
+                {# loading indicator #}
+                <div class="overlay">
+                    <span class="fa fa-refresh fa-spin"></span>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    {# block with income #}
+    <div class="row">
+        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'income'|_ }}</h3>
+                </div>
+                <div class="box-body table-responsive no-padding" id="incomeReport">
+                </div>
+                {# loading indicator #}
+                <div class="overlay">
+                    <span class="fa fa-refresh fa-spin"></span>
+                </div>
+            </div>
+        </div>
+        {# block with expenses #}
+        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'expenses'|_ }}</h3>
+                </div>
+                <div class="box-body table-responsive no-padding" id="expenseReport">
+                </div>
+                {# loading indicator #}
+                <div class="overlay">
+                    <span class="fa fa-refresh fa-spin"></span>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    {# net worth #}
+    <div class="row">
+        <div class="col-lg-12 col-md-12 col-sm-12">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'net_worth'|_ }}</h3>
+                </div>
+                <div class="box-body">
+                    <canvas id="net-worth" style="width:100%;height:400px;" height="400" width="100%"></canvas>
+                </div>
+                <div class="box-footer">
+                    <small>
+                        {{ 'net_filtered_prefs'|_ }}
+                    </small>
+                </div>
+            </div>
+        </div>
+    </div>
+
+
+    {# This is the budget overview generated by budget period report #}
+    <div class="row">
+        <div class="col-lg-12 col-md-12 col-sm-12">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'budgets'|_ }}</h3>
+                </div>
+                <div class="box-body no-padding table-responsive" id="budgetPeriodReport">
+                </div>
+                {# loading indicator #}
+                <div class="overlay">
+                    <span class="fa fa-refresh fa-spin"></span>
+                </div>
+            </div>
+        </div>
+    </div>
+
+
+    {# This is the chart that belongs to the above overview. #}
+    <div class="row">
+        <div class="col-lg-12 col-md-12 col-sm-12">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'chart'|_ }}</h3>
+                </div>
+                <div class="box-body">
+                    <p id="budget_help" class="text-muted text-center">{{ 'budget_chart_click'|_ }}</p>
+                    <canvas id="budget_chart" style="width:100%;height:400px;" height="400" width="100%"></canvas>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    {# same thing but for categories (expenses) #}
+    <div class="row">
+        <div class="col-lg-12 col-md-12 col-sm-12">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'categories'|_ }} ({{ 'expenses'|_ }})</h3>
+                </div>
+                <div class="box-body no-padding table-responsive" id="categoryExpense">
+                </div>
+                {# loading indicator #}
+                <div class="overlay">
+                    <span class="fa fa-refresh fa-spin"></span>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    {# same thing but for categories (income) #}
+    <div class="row">
+        <div class="col-lg-12 col-md-12 col-sm-12">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'categories'|_ }} ({{ 'income'|_ }})</h3>
+                </div>
+                <div class="box-body no-padding table-responsive" id="categoryIncome">
+                </div>
+                {# loading indicator #}
+                <div class="overlay">
+                    <span class="fa fa-refresh fa-spin"></span>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    {# and the same chart too! #}
+    <div class="row">
+        <div class="col-lg-12 col-md-12 col-sm-12">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'chart'|_ }}</h3>
+                </div>
+                <div class="box-body">
+                    <p id="category_help" class="text-muted text-center">{{ 'category_chart_click'|_ }}</p>
+                    <canvas id="category_chart" style="width:100%;height:400px;" height="400" width="100%"></canvas>
+                </div>
+            </div>
+        </div>
+    </div>
+
+{% endblock %}
+{% block styles %}
+    <link rel="stylesheet" href="v1/css/bootstrap-sortable.css?v={{ FF_VERSION }}" type="text/css" media="all" nonce="{{ JS_NONCE }}">
+{% endblock %}
+{% block scripts %}
+
+    <script type="text/javascript" src="v1/js/lib/bootstrap-sortable.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/lib/Chart.bundle.min.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/ff/charts.defaults.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/ff/charts.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" nonce="{{ JS_NONCE }}">
+        var year = {{ start.year }};
+        var month = {{ start.month }};
+
+        // to report another URL:
+        var startDate = '{{ start.format('Ymd') }}';
+        var endDate = '{{ end.format('Ymd') }}';
+        var accountIds = '{{ accountIds }}';
+
+        // report uri's
+        var opChartUri = '{{ route('chart.report.operations', [accountIds, start.format('Ymd'), end.format('Ymd')]) }}';
+        var netWorthUri = '{{ route('chart.report.net-worth', [accountIds, start.format('Ymd'), end.format('Ymd')]) }}';
+
+        // data uri's
+        var accountReportUri = '{{ route('report-data.account.general', [accountIds, start.format('Ymd'), end.format('Ymd')]) }}';
+        var incomeReportUri = '{{ route('report-data.operations.income', [accountIds, start.format('Ymd'), end.format('Ymd')]) }}';
+        var expenseReportUri = '{{ route('report-data.operations.expenses', [accountIds, start.format('Ymd'), end.format('Ymd')]) }}';
+        var incExpReportUri = '{{ route('report-data.operations.operations', [accountIds, start.format('Ymd'), end.format('Ymd')]) }}';
+
+        var budgetPeriodReportUri = '{{ route('report-data.budget.period', [accountIds, start.format('Ymd'), end.format('Ymd')]) }}';
+        var categoryExpenseUri = '{{ route('report-data.category.expenses', [accountIds, start.format('Ymd'), end.format('Ymd')]) }}';
+        var categoryIncomeUri = '{{ route('report-data.category.income', [accountIds, start.format('Ymd'), end.format('Ymd')]) }}';
+        var billReportUri = '';
+
+    </script>
+    <script type="text/javascript" src="v1/js/ff/reports/all.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/ff/reports/default/all.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/ff/reports/default/multi-year.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+{% endblock %}
diff --git a/resources/views/reports/default/year.twig b/resources/views/reports/default/year.twig
new file mode 100644
index 0000000000..3f852c57c4
--- /dev/null
+++ b/resources/views/reports/default/year.twig
@@ -0,0 +1,222 @@
+{% extends './v1/layout/default' %}
+
+{% block breadcrumbs %}
+    {{ Breadcrumbs.render(Route.getCurrentRoute.getName, accountIds, start, end) }}
+{% endblock %}
+
+{% block content %}
+
+    {# charts #}
+    <div class="row">
+        <div class="col-lg-12 col-md-12 col-sm-12">
+            <div class="box" id="year-inc-exp">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'incomeVsExpenses'|_ }}</h3>
+                </div>
+                <div class="box-body">
+                    <canvas id="income-expenses-chart" style="width:100%;height:400px;" height="400" width="100%"></canvas>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    {# balances and inc vs exp #}
+    <div class="row">
+        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'accountBalances'|_ }}</h3>
+                </div>
+                <div class="box-body table-responsive no-padding" id="accountReport">
+                </div>
+                {# loading indicator #}
+                <div class="overlay">
+                    <span class="fa fa-refresh fa-spin"></span>
+                </div>
+            </div>
+        </div>
+        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'incomeVsExpenses'|_ }}</h3>
+                </div>
+                <div class="box-body table-responsive no-padding" id="incomeVsExpenseReport">
+                </div>
+                {# loading indicator #}
+                <div class="overlay">
+                    <span class="fa fa-refresh fa-spin"></span>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    {# income and expenses. #}
+    <div class="row">
+        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'income'|_ }}</h3>
+                </div>
+                <div class="box-body table-responsive no-padding" id="incomeReport">
+                </div>
+                {# loading indicator #}
+                <div class="overlay">
+                    <span class="fa fa-refresh fa-spin"></span>
+                </div>
+            </div>
+        </div>
+        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'expenses'|_ }}</h3>
+                </div>
+                <div class="box-body table-responsive no-padding" id="expenseReport">
+                </div>
+                {# loading indicator #}
+                <div class="overlay">
+                    <span class="fa fa-refresh fa-spin"></span>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    {# net worth #}
+    <div class="row">
+        <div class="col-lg-12 col-md-12 col-sm-12">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'net_worth'|_ }}</h3>
+                </div>
+                <div class="box-body">
+                    <canvas id="net-worth" style="width:100%;height:400px;" height="400" width="100%"></canvas>
+                </div>
+                <div class="box-footer">
+                    <small>
+                        {{ 'net_filtered_prefs'|_ }}
+                    </small>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    {# This is the budget overview generated by budget period report #}
+    <div class="row">
+        <div class="col-lg-12 col-md-12 col-sm-12">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'budgets'|_ }}</h3>
+                </div>
+                <div class="box-body no-padding table-responsive" id="budgetPeriodReport">
+                </div>
+                {# loading indicator #}
+                <div class="overlay">
+                    <span class="fa fa-refresh fa-spin"></span>
+                </div>
+            </div>
+        </div>
+    </div>
+
+
+    {# This is the chart that belongs to the above overview. #}
+    <div class="row">
+        <div class="col-lg-12 col-md-12 col-sm-12">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'chart'|_ }}</h3>
+                </div>
+                <div class="box-body">
+                    <p id="budget_help" class="text-muted text-center">{{ 'budget_chart_click'|_ }}</p>
+                    <canvas id="budget_chart" style="width:100%;height:400px;" height="400" width="100%"></canvas>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    {# same thing but for categories (expenses) #}
+    <div class="row">
+        <div class="col-lg-12 col-md-12 col-sm-12">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'categories'|_ }} ({{ 'expenses'|_ }})</h3>
+                </div>
+                <div class="box-body no-padding table-responsive" id="categoryExpense">
+                </div>
+                {# loading indicator #}
+                <div class="overlay">
+                    <span class="fa fa-refresh fa-spin"></span>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    {# same thing but for categories (income) #}
+    <div class="row">
+        <div class="col-lg-12 col-md-12 col-sm-12">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'categories'|_ }} ({{ 'income'|_ }})</h3>
+                </div>
+                <div class="box-body no-padding table-responsive" id="categoryIncome">
+                </div>
+                {# loading indicator #}
+                <div class="overlay">
+                    <span class="fa fa-refresh fa-spin"></span>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    {# and the same chart too! #}
+    <div class="row">
+        <div class="col-lg-12 col-md-12 col-sm-12">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'chart'|_ }}</h3>
+                </div>
+                <div class="box-body">
+                    <p id="category_help" class="text-muted text-center">{{ 'category_chart_click'|_ }}</p>
+                    <canvas id="category_chart" style="width:100%;height:400px;" height="400" width="100%"></canvas>
+                </div>
+            </div>
+        </div>
+    </div>
+
+
+{% endblock %}
+{% block scripts %}
+    <script type="text/javascript" src="v1/js/lib/bootstrap-sortable.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/lib/Chart.bundle.min.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/ff/charts.defaults.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/ff/charts.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" nonce="{{ JS_NONCE }}">
+        var year = '{{ start.year }}';
+
+        // to report another URL:
+        var startDate = '{{ start.format('Ymd') }}';
+        var endDate = '{{ end.format('Ymd') }}';
+        var accountIds = '{{ accountIds }}';
+
+        // report uri's
+        var opChartUri = '{{ route('chart.report.operations', [accountIds, start.format('Ymd'), end.format('Ymd')]) }}';
+        var netWorthUri = '{{ route('chart.report.net-worth', [accountIds, start.format('Ymd'), end.format('Ymd')]) }}';
+
+        // data uri's
+        var accountReportUri = '{{ route('report-data.account.general', [accountIds, start.format('Ymd'), end.format('Ymd')]) }}';
+        var incomeReportUri = '{{ route('report-data.operations.income', [accountIds, start.format('Ymd'), end.format('Ymd')]) }}';
+        var expenseReportUri = '{{ route('report-data.operations.expenses', [accountIds, start.format('Ymd'), end.format('Ymd')]) }}';
+        var incExpReportUri = '{{ route('report-data.operations.operations', [accountIds, start.format('Ymd'), end.format('Ymd')]) }}';
+
+        var budgetPeriodReportUri = '{{ route('report-data.budget.period', [accountIds, start.format('Ymd'), end.format('Ymd')]) }}';
+        var categoryExpenseUri = '{{ route('report-data.category.expenses', [accountIds, start.format('Ymd'), end.format('Ymd')]) }}';
+        var categoryIncomeUri = '{{ route('report-data.category.income', [accountIds, start.format('Ymd'), end.format('Ymd')]) }}';
+        var billReportUri = '';
+
+    </script>
+    <script type="text/javascript" src="v1/js/ff/reports/all.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/ff/reports/default/all.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/ff/reports/default/year.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+
+{% endblock %}
+{% block styles %}
+    <link rel="stylesheet" href="v1/css/bootstrap-sortable.css?v={{ FF_VERSION }}" type="text/css" media="all" nonce="{{ JS_NONCE }}">
+{% endblock %}
diff --git a/resources/views/reports/double/partials/accounts-per-asset.twig b/resources/views/reports/double/partials/accounts-per-asset.twig
new file mode 100644
index 0000000000..6a19774fbf
--- /dev/null
+++ b/resources/views/reports/double/partials/accounts-per-asset.twig
@@ -0,0 +1,44 @@
+<table class="table table-hover sortable">
+    <thead>
+    <tr>
+        <th data-defaultsign="az">{{ 'name'|_ }}</th>
+        <th data-defaultsign="_19" style="text-align: right;">{{ 'spent'|_ }}</th>
+        <th data-defaultsign="_19" style="text-align: right;">{{ 'earned'|_ }}</th>
+        <th data-defaultsign="_19" style="text-align: right;">{{ 'sum'|_ }}</th>
+    </tr>
+    </thead>
+    <tbody>
+    {% for account in report %}
+        <tr>
+            <td>
+                <a href="{{ route('accounts.show', [account.account_id]) }}" title="{{ account.account_name }}">{{ account.account_name }}</a>
+            </td>
+            <td style="text-align: right;">
+                {{ formatAmountBySymbol(account.spent, account.currency_symbol, account.currency_decimal_places) }}
+            </td>
+            <td style="text-align: right;">
+                {{ formatAmountBySymbol(account.earned, account.currency_symbol, account.currency_decimal_places) }}
+            </td>
+            <td style="text-align: right;">
+                {{ formatAmountBySymbol(account.sum, account.currency_symbol, account.currency_decimal_places) }}
+            </td>
+        </tr>
+    {% endfor %}
+    </tbody>
+    <tfoot>
+    {% for sum in sums %}
+        <tr>
+            <td>{{ 'sum'|_ }} ({{ sum.currency_name }})</td>
+            <td style="text-align: right;">
+                {{ formatAmountBySymbol(sum.spent, sum.currency_symbol, sum.currency_decimal_places) }}
+            </td>
+            <td style="text-align: right;">
+                {{ formatAmountBySymbol(sum.earned, sum.currency_symbol, sum.currency_decimal_places) }}
+            </td>
+            <td style="text-align: right;">
+                {{ formatAmountBySymbol(sum.sum, sum.currency_symbol, sum.currency_decimal_places) }}
+            </td>
+        </tr>
+    {% endfor %}
+    </tfoot>
+</table>
diff --git a/resources/views/reports/double/partials/accounts.twig b/resources/views/reports/double/partials/accounts.twig
new file mode 100644
index 0000000000..7149f2f45e
--- /dev/null
+++ b/resources/views/reports/double/partials/accounts.twig
@@ -0,0 +1,55 @@
+<table class="table table-hover sortable">
+    <thead>
+    <tr>
+        <th data-defaultsign="az">{{ 'name'|_ }}</th>
+        <th data-defaultsign="_19" style="text-align: right;">{{ 'spent'|_ }}</th>
+        <th data-defaultsign="_19" style="text-align: right;">{{ 'earned'|_ }}</th>
+        <th data-defaultsign="_19" style="text-align: right;">{{ 'sum'|_ }}</th>
+    </tr>
+    </thead>
+    <tbody>
+    {% for account in report %}
+        <tr>
+            <td>
+                {% if account.source_name == account.dest_name %}
+                    {{ account.source_name }}
+                {% else %}
+                    {{ account.source_name }} / {{ account.dest_name }}
+                {% endif %}
+                {% if account.source_iban != '' and account.dest_iban != '' %}
+                    {% if account.source_iban == account.dest_iban %}
+                        ({{ account.source_iban }})
+                    {% else %}
+                        ({{ account.source_iban }} / ({{ account.dest_iban }}))
+                    {% endif %}
+                {% endif %}
+            </td>
+            <td style="text-align: right;">
+                {{ formatAmountBySymbol(account.spent, account.currency_symbol, account.currency_decimal_places) }}
+            </td>
+            <td style="text-align: right;">
+                {{ formatAmountBySymbol(account.earned, account.currency_symbol, account.currency_decimal_places) }}
+            </td>
+            <td style="text-align: right;">
+                {{ formatAmountBySymbol(account.sum, account.currency_symbol, account.currency_decimal_places) }}
+            </td>
+        </tr>
+    {% endfor %}
+    </tbody>
+    <tfoot>
+    {% for sum in sums %}
+        <tr>
+            <td>{{ 'sum'|_ }} ({{ sum.currency_name }})</td>
+            <td style="text-align: right;">
+                {{ formatAmountBySymbol(sum.spent, sum.currency_symbol, sum.currency_decimal_places) }}
+            </td>
+            <td style="text-align: right;">
+                {{ formatAmountBySymbol(sum.earned, sum.currency_symbol, sum.currency_decimal_places) }}
+            </td>
+            <td style="text-align: right;">
+                {{ formatAmountBySymbol(sum.sum, sum.currency_symbol, sum.currency_decimal_places) }}
+            </td>
+        </tr>
+    {% endfor %}
+    </tfoot>
+</table>
diff --git a/resources/views/reports/double/partials/avg-expenses.twig b/resources/views/reports/double/partials/avg-expenses.twig
new file mode 100644
index 0000000000..b859f13a09
--- /dev/null
+++ b/resources/views/reports/double/partials/avg-expenses.twig
@@ -0,0 +1,46 @@
+<table class="table table-hover sortable">
+    <thead>
+    <tr>
+        <th data-defaultsign="az">{{ 'account'|_ }}</th>
+        <th data-defaultsign="_19" style="text-align: right;">{{ 'spent_average'|_ }}</th>
+        <th data-defaultsign="_19" style="text-align: right;">{{ 'total'|_ }}</th>
+        <th data-defaultsign="_19">{{ 'transaction_count'|_ }}</th>
+    </tr>
+    </thead>
+    <tbody>
+    {% for row in result %}
+        {% if loop.index > listLength %}
+            <tr class="overListLength">
+        {% else %}
+            <tr>
+        {% endif %}
+        <td data-sortable="false">
+            <a href="{{ route('accounts.show', row.source_account_id) }}">
+                {{ row.source_account_name }}
+            </a>
+        </td>
+        <td data-value="{{ row.avg }}" style="text-align: right;">
+            {{ formatAmountBySymbol(row.avg, row.currency_symbol, row.currency_decimal_places) }}
+        </td>
+
+        <td data-value="{{ row.sum }}" style="text-align: right;">
+            {{ formatAmountBySymbol(row.sum, row.currency_symbol, row.currency_decimal_places) }}
+        </td>
+
+        <td data-value="{{ row.transactions }}">
+            {{ row.transactions }}
+        </td>
+
+        </tr>
+    {% endfor %}
+    </tbody>
+    <tfoot>
+    {% if result|length > listLength %}
+        <tr>
+            <td colspan="5" class="active">
+                <a href="#" class="listLengthTrigger">{{ trans('firefly.show_full_list',{number:incomeTopLength}) }}</a>
+            </td>
+        </tr>
+    {% endif %}
+    </tfoot>
+</table>
diff --git a/resources/views/reports/double/partials/avg-income.twig b/resources/views/reports/double/partials/avg-income.twig
new file mode 100644
index 0000000000..b34a2ecc63
--- /dev/null
+++ b/resources/views/reports/double/partials/avg-income.twig
@@ -0,0 +1,46 @@
+<table class="table table-hover sortable">
+    <thead>
+    <tr>
+        <th data-defaultsign="az">{{ 'account'|_ }}</th>
+        <th data-defaultsign="_19" style="text-align: right;">{{ 'spent_average'|_ }}</th>
+        <th data-defaultsign="_19" style="text-align: right;">{{ 'total'|_ }}</th>
+        <th data-defaultsign="_19">{{ 'transaction_count'|_ }}</th>
+    </tr>
+    </thead>
+    <tbody>
+    {% for row in result %}
+        {% if loop.index > listLength %}
+            <tr class="overListLength">
+        {% else %}
+            <tr>
+        {% endif %}
+        <td data-sortable="false">
+            <a href="{{ route('accounts.show', row.destination_account_id) }}">
+                {{ row.destination_account_name }}
+            </a>
+        </td>
+        <td data-value="{{ row.avg }}" style="text-align: right;">
+            {{ formatAmountBySymbol(row.avg, row.currency_symbol, row.currency_decimal_places) }}
+        </td>
+
+        <td data-value="{{ row.sum }}" style="text-align: right;">
+            {{ formatAmountBySymbol(row.sum, row.currency_symbol, row.currency_decimal_places) }}
+        </td>
+
+        <td data-value="{{ row.transactions }}">
+            {{ row.transactions }}
+        </td>
+
+        </tr>
+    {% endfor %}
+    </tbody>
+    <tfoot>
+    {% if result|length > listLength %}
+        <tr>
+            <td colspan="5" class="active">
+                <a href="#" class="listLengthTrigger">{{ trans('firefly.show_full_list',{number:incomeTopLength}) }}</a>
+            </td>
+        </tr>
+    {% endif %}
+    </tfoot>
+</table>
diff --git a/resources/views/reports/double/partials/top-expenses.twig b/resources/views/reports/double/partials/top-expenses.twig
new file mode 100644
index 0000000000..8c957eb6e3
--- /dev/null
+++ b/resources/views/reports/double/partials/top-expenses.twig
@@ -0,0 +1,55 @@
+<table class="table table-hover sortable">
+    <thead>
+    <tr>
+        <th data-defaultsort="disabled">{{ 'description'|_ }}</th>
+        <th data-defaultsign="month">{{ 'date'|_ }}</th>
+        <th data-defaultsign="az">{{ 'source_account'|_ }}</th>
+        <th data-defaultsign="az">{{ 'destination_account'|_ }}</th>
+        <th data-defaultsign="_19" style="text-align: right;">{{ 'amount'|_ }}</th>
+    </tr>
+    </thead>
+    <tbody>
+    {% for row in result %}
+        {% if loop.index > listLength %}
+            <tr class="overListLength">
+        {% else %}
+            <tr>
+        {% endif %}
+        <td data-sortable="false">
+            <a href="{{ route('transactions.show', row.transaction_group_id) }}">
+                {{ row.description }}
+            </a>
+        </td>
+        <td data-value="{{ row.date_sort }}">
+            {{ row.date }}
+        </td>
+
+        <td data-sortable="false">
+            <a href="{{ route('accounts.show', row.source_account_id) }}">
+                {{ row.source_account_name }}
+            </a>
+        </td>
+        <td data-sortable="false">
+            <a href="{{ route('accounts.show', row.destination_account_id) }}">
+                {{ row.destination_account_name }}
+            </a>
+        </td>
+
+
+        <td data-value="{{ row.amount }}" style="text-align: right;">
+            {{ formatAmountBySymbol(row.amount, row.currency_symbol, row.currency_decimal_places) }}
+        </td>
+
+        </tr>
+    {% endfor %}
+    </tbody>
+    <tfoot>
+    {% if result|length > listLength %}
+        <tr>
+            <td colspan="5" class="active">
+                <a href="#" class="listLengthTrigger">{{ trans('firefly.show_full_list',{number:incomeTopLength}) }}</a>
+            </td>
+        </tr>
+    {% endif %}
+    </tfoot>
+</table>
diff --git a/resources/views/reports/double/partials/top-income.twig b/resources/views/reports/double/partials/top-income.twig
new file mode 100644
index 0000000000..8c957eb6e3
--- /dev/null
+++ b/resources/views/reports/double/partials/top-income.twig
@@ -0,0 +1,55 @@
+<table class="table table-hover sortable">
+    <thead>
+    <tr>
+        <th data-defaultsort="disabled">{{ 'description'|_ }}</th>
+        <th data-defaultsign="month">{{ 'date'|_ }}</th>
+        <th data-defaultsign="az">{{ 'source_account'|_ }}</th>
+        <th data-defaultsign="az">{{ 'destination_account'|_ }}</th>
+        <th data-defaultsign="_19" style="text-align: right;">{{ 'amount'|_ }}</th>
+    </tr>
+    </thead>
+    <tbody>
+    {% for row in result %}
+        {% if loop.index > listLength %}
+            <tr class="overListLength">
+        {% else %}
+            <tr>
+        {% endif %}
+        <td data-sortable="false">
+            <a href="{{ route('transactions.show', row.transaction_group_id) }}">
+                {{ row.description }}
+            </a>
+        </td>
+        <td data-value="{{ row.date_sort }}">
+            {{ row.date }}
+        </td>
+
+        <td data-sortable="false">
+            <a href="{{ route('accounts.show', row.source_account_id) }}">
+                {{ row.source_account_name }}
+            </a>
+        </td>
+        <td data-sortable="false">
+            <a href="{{ route('accounts.show', row.destination_account_id) }}">
+                {{ row.destination_account_name }}
+            </a>
+        </td>
+
+
+        <td data-value="{{ row.amount }}" style="text-align: right;">
+            {{ formatAmountBySymbol(row.amount, row.currency_symbol, row.currency_decimal_places) }}
+        </td>
+
+        </tr>
+    {% endfor %}
+    </tbody>
+    <tfoot>
+    {% if result|length > listLength %}
+        <tr>
+            <td colspan="5" class="active">
+                <a href="#" class="listLengthTrigger">{{ trans('firefly.show_full_list',{number:incomeTopLength}) }}</a>
+            </td>
+        </tr>
+    {% endif %}
+    </tfoot>
+</table>
diff --git a/resources/views/reports/double/report.twig b/resources/views/reports/double/report.twig
new file mode 100644
index 0000000000..95a395ce49
--- /dev/null
+++ b/resources/views/reports/double/report.twig
@@ -0,0 +1,234 @@
+{% extends './v1/layout/default' %}
+
+{% block breadcrumbs %}
+    {{ Breadcrumbs.render(Route.getCurrentRoute.getName, accountIds, doubleIds, start, end) }}
+{% endblock %}
+
+{% block content %}
+
+    <div class="row">
+        <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'in_out_accounts'|_ }}</h3>
+                </div>
+                <div class="box-body table-responsive no-padding" id="opsAccounts">
+                    {# loading indicator #}
+                    <div class="overlay">
+                        <span class="fa fa-refresh fa-spin"></span>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'in_out_accounts_per_asset'|_ }}</h3>
+                </div>
+                <div class="box-body table-responsive no-padding" id="opsAccountsAsset">
+                    {# loading indicator #}
+                    <div class="overlay">
+                        <span class="fa fa-refresh fa-spin"></span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="row">
+        <div class="col-lg-4 col-md-6">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'expense_per_category'|_ }}</h3>
+                </div>
+                <div class="box-body">
+                    <div style="width:100%;margin:0 auto;">
+                        <canvas id="category-out-pie-chart" style="width:100%;height:250px;" height="250"></canvas>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="col-lg-4 col-md-6">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'income_per_category'|_ }}</h3>
+                </div>
+                <div class="box-body">
+                    <div style="width:100%;margin:0 auto;">
+                        <canvas id="category-in-pie-chart" style="width:100%;height:250px;" height="250"></canvas>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="col-lg-4 col-md-6">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'expense_per_budget'|_ }}</h3>
+                </div>
+                <div class="box-body">
+                    <div style="width:100%;margin:0 auto;">
+                        <canvas id="budgets-out-pie-chart" style="width:100%;height:250px;" height="250"></canvas>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="row">
+        <div class="col-lg-6 col-md-6">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'expense_per_tag'|_ }}</h3>
+                </div>
+                <div class="box-body">
+                    <div style="width:100%;margin:0 auto;">
+                        <canvas id="tag-out-pie-chart" style="width:100%;height:250px;" height="250"></canvas>
+                    </div>
+                </div>
+                <div class="box-footer">
+                    <p class="text-info">
+                        <em>{{ 'double_report_expenses_charted_once'|_ }}</em>
+                    </p>
+                </div>
+            </div>
+        </div>
+        <div class="col-lg-6 col-md-6">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'income_per_tag'|_ }}</h3>
+                </div>
+                <div class="box-body">
+                    <div style="width:100%;margin:0 auto;">
+                        <canvas id="tag-in-pie-chart" style="width:100%;height:250px;" height="250"></canvas>
+                    </div>
+                </div>
+                <div class="box-footer">
+                    <p class="text-info">
+                        <em>{{ 'double_report_expenses_charted_once'|_ }}</em>
+                    </p>
+                </div>
+            </div>
+        </div>
+    </div>
+
+
+    {% for account in doubles %}
+        <div class="row">
+            <div class="col-lg-12">
+                <div class="box" id="incomeAndExpensesChart">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ 'income_and_expenses'|_ }} ({{ account.name }}) {% if account.iban %}({{ account.iban }}){% endif %}</h3>
+                    </div>
+                    <div class="box-body">
+                        <canvas class="main_double_canvas"
+                                data-url="{{ route('chart.double.main', [accountIds, account.id, start.format('Ymd'), end.format('Ymd')]) }}"
+                                id="in-out-chart-{{ account.id }}" style="width:100%;height:400px;" height="400" width="100%"></canvas>
+                    </div>
+                </div>
+            </div>
+        </div>
+    {% endfor %}
+
+    <div class="row">
+        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'expenses'|_ }} ({{ trans('firefly.topX', {number: listLength}) }})</h3>
+                </div>
+                <div class="box-body table-responsive no-padding" id="topExpensesHolder">
+                    {# loading indicator #}
+                    <div class="overlay">
+                        <span class="fa fa-refresh fa-spin"></span>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'income'|_ }} ({{ trans('firefly.topX', {number: listLength}) }})</h3>
+                </div>
+                <div class="box-body table-responsive no-padding" id="topIncomeHolder">
+                    {# loading indicator #}
+                    <div class="overlay">
+                        <span class="fa fa-refresh fa-spin"></span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="row">
+        <div class="col-lg-6">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'average_spending_per_source'|_ }}</h3>
+                </div>
+                <div class="box-body table-responsive no-padding" id="avgExpensesHolder">
+                </div>
+                {# loading indicator #}
+                <div class="overlay">
+                    <span class="fa fa-refresh fa-spin"></span>
+                </div>
+            </div>
+        </div>
+        <div class="col-lg-6">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'average_earning_per_destination'|_ }}</h3>
+                </div>
+                <div class="box-body table-responsive no-padding" id="avgIncomeHolder">
+                </div>
+                {# loading indicator #}
+                <div class="overlay">
+                    <span class="fa fa-refresh fa-spin"></span>
+                </div>
+            </div>
+        </div>
+    </div>
+
+{% endblock %}
+
+{% block scripts %}
+    <script type="text/javascript" src="v1/js/lib/Chart.bundle.min.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/ff/charts.defaults.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/ff/charts.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/lib/bootstrap-sortable.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+
+    <script type="text/javascript" nonce="{{ JS_NONCE }}">
+        // to report another URL:
+        var startDate = '{{ start.format('Ymd') }}';
+        var endDate = '{{ end.format('Ymd') }}';
+        var accountIds = '{{ accountIds }}';
+        var doubleIds = '{{ doubleIds }}';
+
+        // chart uri's
+        {#var mainUri = '{{ route('chart.expense.main', [accountIds, expenseIds, start.format('Ymd'), end.format('Ymd')]) }}';#}
+
+        // html blocks.
+        var opsAccountsUri = '{{ route('report-data.double.operations', [accountIds, doubleIds, start.format('Ymd'), end.format('Ymd')]) }}';
+        var opsAccountsAssetUri = '{{ route('report-data.double.ops-asset', [accountIds, doubleIds, start.format('Ymd'), end.format('Ymd')]) }}';
+
+        // pie charts:
+        var categoryOutUri = '{{ route('chart.double.category-expense', [accountIds, doubleIds, start.format('Ymd'), end.format('Ymd')]) }}';
+        var categoryInUri = '{{ route('chart.double.category-income', [accountIds, doubleIds, start.format('Ymd'), end.format('Ymd')]) }}';
+        var budgetsOutUri = '{{ route('chart.double.budget-expense', [accountIds, doubleIds, start.format('Ymd'), end.format('Ymd')]) }}';
+        var tagOutUri = '{{ route('chart.double.tag-expense', [accountIds, doubleIds, start.format('Ymd'), end.format('Ymd')]) }}';
+        var tagInUri = '{{ route('chart.double.tag-income', [accountIds, doubleIds, start.format('Ymd'), end.format('Ymd')]) }}';
+
+        var avgExpensesUri = '{{ route('report-data.double.avg-expenses', [accountIds, doubleIds, start.format('Ymd'), end.format('Ymd')]) }}';
+        var topExpensesUri = '{{ route('report-data.double.top-expenses', [accountIds, doubleIds, start.format('Ymd'), end.format('Ymd')]) }}';
+        var avgIncomeUri = '{{ route('report-data.double.avg-income', [accountIds, doubleIds, start.format('Ymd'), end.format('Ymd')]) }}';
+        var topIncomeUri = '{{ route('report-data.double.top-income', [accountIds, doubleIds, start.format('Ymd'), end.format('Ymd')]) }}';
+
+    </script>
+    <script type="text/javascript" src="v1/js/ff/reports/all.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/ff/reports/double/month.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+
+{% endblock %}
+
+{% block styles %}
+    <link rel="stylesheet" href="v1/css/bootstrap-sortable.css?v={{ FF_VERSION }}" type="text/css" media="all" nonce="{{ JS_NONCE }}">
+{% endblock %}
diff --git a/resources/views/reports/index.twig b/resources/views/reports/index.twig
new file mode 100644
index 0000000000..8d764665ad
--- /dev/null
+++ b/resources/views/reports/index.twig
@@ -0,0 +1,195 @@
+{% extends './v1/layout/default' %}
+
+{% block breadcrumbs %}
+    {{ Breadcrumbs.render(Route.getCurrentRoute.getName) }}
+{% endblock %}
+
+{% block content %}
+
+    <div class="row">
+        <form class="form-horizontal nodisablebutton" id="report-form" action="{{ route('reports.index.post') }}" method="post">
+            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
+                <div class="box">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ 'reports'|_ }}</h3>
+                    </div>
+                    <div class="box-body">
+                        <p class="text-info">
+                            {{ 'more_info_help'|_ }}
+                        </p>
+
+                        <input type="hidden" name="_token" value="{{ csrf_token() }}"/>
+                        <div class="form-group">
+                            <label for="inputReportType" class="col-sm-3 control-label">{{ 'report_type'|_ }}</label>
+
+                            <div class="col-sm-9">
+                                <select name="report_type" class="form-control" id="inputReportType">
+                                    <option selected label="{{ 'report_type_default'|_ }}" value="default">{{ 'report_type_default'|_ }}</option>
+                                    <option label="{{ 'report_type_audit'|_ }}" value="audit">{{ 'report_type_audit'|_ }}</option>
+                                    <option label="{{ 'report_type_budget'|_ }}" value="budget">{{ 'report_type_budget'|_ }}</option>
+                                    <option label="{{ 'report_type_category'|_ }}" value="category">{{ 'report_type_category'|_ }}</option>
+                                    <option label="{{ 'report_type_tag'|_ }}" value="tag">{{ 'report_type_tag'|_ }}</option>
+                                    <option label="{{ 'report_type_double'|_ }}" value="double">{{ 'report_type_double'|_ }}</option>
+                                </select>
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <label for="inputAccounts" class="col-sm-3 control-label">{{ 'report_included_accounts'|_ }}</label>
+
+                            <div class="col-sm-9" id="inputAccountsSelect">
+                                <select id="inputAccounts" name="accounts[]" multiple class="form-control">
+                                    {% for role, accountList in groupedAccounts  %}
+                                        <optgroup label="{{ role }}">
+                                    {% for account in accountList %}
+                                        <option
+                                                value="{{ account.id }}"
+                                                label="{{ account.name }}{% if accountGetMetaField(account, 'accountRole') == 'sharedAsset' %} ({{ 'shared'|_|lower }}){% endif %}">
+                                            {{ account.name }}{% if accountGetMetaField(account, 'accountRole') == 'sharedAsset' %} ({{ 'shared'|_|lower }}){% endif %}
+                                        </option>
+                                    {% endfor %}
+                                        </optgroup>
+                                    {% endfor %}
+                                </select>
+
+                            </div>
+                        </div>
+
+
+                        <div class="form-group">
+                            <label for="inputDateRange" class="col-sm-3 control-label">{{ 'report_date_range'|_ }}</label>
+
+                            <div class="col-sm-9">
+                                <input autocomplete="off" type="text" class="form-control" id="inputDateRange" name="daterange"
+                                       value="{{ Session.get('start').format('Y-m-d') }} - {{ Session.get('end').format('Y-m-d') }}">
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <label for="__none__" class="col-sm-3 control-label">{{ 'report_preset_ranges'|_ }}</label>
+
+                            <div class="col-sm-9">
+                                {% for year, data in months %}
+                                    <a href="#" class="date-select" data-start="{{ data.start }}" data-end="{{ data.end }}">{{ year }}</a>
+                                    {% if customFiscalYear == 1 %}
+                                        <br/>
+                                        <a href="#" class="date-select" data-start="{{ data.fiscal_start }}" data-end="{{ data.fiscal_end }}">{{ year }}
+                                            ({{ 'fiscal_year'|_|lower }})</a>
+                                    {% endif %}
+                                    <ul class="list-inline">
+                                        {% for month in data.months %}
+                                            <li>
+                                                <a data-start="{{ month.start }}" data-end="{{ month.end }}" class="date-select"
+                                                   href="#">{{ month.formatted }}</a>
+                                            </li>
+                                        {% endfor %}
+                                    </ul>
+                                {% endfor %}
+                            </div>
+                        </div>
+
+                    </div>
+                </div>
+                <div class="box" id="extra-options-box">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ 'reports_extra_options'|_ }}</h3>
+                    </div>
+                    <div class="box-body" id="extra-options">
+                    </div>
+                    {# loading indicator #}
+                    <div class="overlay">
+                        <span class="fa fa-refresh fa-spin"></span>
+                    </div>
+                </div>
+
+                <div class="box">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ 'reports_submit'|_ }}</h3>
+                    </div>
+                    <div class="box-body">
+                        <div class="form-group">
+                            <div class="col-sm-offset-3 col-sm-9">
+                                <button type="submit" class="btn btn-default">{{ 'submit'|_ }}</button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </form>
+
+
+        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'quick_link_reports'|_ }}</h3>
+                </div>
+                <div class="box-body">
+                    <p>
+                        {{ 'quick_link_examples'|_ }}
+                    </p>
+                    <h4>{{ ('quick_link_default_report')|_ }}</h4>
+                    <ul>
+                        <li>
+                            <a href="{{ route('reports.report.default',[accountList, 'currentMonthStart','currentMonthEnd']) }}">{{ 'report_this_month_quick'|_ }}</a>
+                        </li>
+                        <li>
+                            <a href="{{ route('reports.report.default',[accountList, 'currentYearStart','currentYearEnd']) }}">{{ 'report_this_year_quick'|_ }}</a>
+                        </li>
+                        {% if customFiscalYear == 1 %}
+                            <li>
+                                <a href="{{ route('reports.report.default',[accountList, 'currentFiscalYearStart','currentFiscalYearEnd']) }}">{{ 'report_this_fiscal_year_quick'|_ }}</a>
+                            </li>
+                        {% endif %}
+                        <li>
+                            <a href="{{ route('reports.report.default',[accountList, 'previousMonthStart','previousMonthEnd']) }}">{{ 'report_last_month_quick'|_ }}</a>
+                        </li>
+                        <li>
+                            <a href="{{ route('reports.report.default',[accountList, start.format('Ymd'),'currentMonthEnd']) }}">{{ 'report_all_time_quick'|_ }}</a>
+                        </li>
+                    </ul>
+
+                    <h4>{{ ('quick_link_audit_report')|_ }}</h4>
+                    <ul>
+                        <li>
+                            <a href="{{ route('reports.report.audit',[accountList, 'currentMonthStart','currentMonthEnd']) }}">{{ 'report_this_month_quick'|_ }}</a>
+                        </li>
+                        <li>
+                            <a href="{{ route('reports.report.audit',[accountList, 'currentYearStart','currentYearEnd']) }}">{{ 'report_this_year_quick'|_ }}</a>
+                        </li>
+                        {% if customFiscalYear == 1 %}
+                            <li>
+                                <a href="{{ route('reports.report.audit',[accountList, 'currentFiscalYearStart','currentFiscalYearEnd']) }}">{{ 'report_this_fiscal_year_quick'|_ }}</a>
+                            </li>
+                        {% endif %}
+                        <li>
+                            <a href="{{ route('reports.report.audit',[accountList, start.format('Ymd'),'currentMonthEnd']) }}">{{ 'report_all_time_quick'|_ }}</a>
+                        </li>
+                    </ul>
+                    <p>
+                        <em>{{ 'reports_can_bookmark'|_ }}</em>
+                    </p>
+                </div>
+            </div>
+
+        </div>
+    </div>
+    <div style="height:400px;">&nbsp;</div>
+
+{% endblock %}
+
+{% block styles %}
+    <link href="v1/css/bootstrap-multiselect.css?v={{ FF_VERSION }}" rel="stylesheet" type="text/css" nonce="{{ JS_NONCE }}">
+{% endblock %}
+
+{% block scripts %}
+    <script type="text/javascript" nonce="{{ JS_NONCE }}">
+        var minDate = "{{ start.format('Y-m-d') }}";
+        var picker;
+        var selectAllText = "{{ trans('firefly.multi_select_select_all')|escape('js') }}";
+        var nonSelectedText = "{{ trans('firefly.multi_select_no_selection')|escape('js') }}";
+        var nSelectedText = "{{ trans('firefly.multi_select_n_selected')|escape('js') }}";
+        var allSelectedText = "{{ trans('firefly.multi_select_all_selected')|escape('js')   }}";
+        var filterPlaceholder = "{{ trans('firefly.multi_select_filter_placeholder')|escape('js') }}";
+    </script>
+    <script type="text/javascript" src="v1/js/lib/bootstrap-multiselect.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/ff/reports/all.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/ff/reports/index.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+{% endblock %}
diff --git a/resources/views/reports/options/budget.twig b/resources/views/reports/options/budget.twig
new file mode 100644
index 0000000000..103363f156
--- /dev/null
+++ b/resources/views/reports/options/budget.twig
@@ -0,0 +1,10 @@
+<div class="form-group">
+    <label for="inputBudgets" class="col-sm-3 control-label">{{ 'select_budget'|_ }}</label>
+    <div class="col-sm-9">
+        <select id="inputBudgets" name="budget[]" multiple="multiple" class="form-control">
+            {% for budget in budgets %}
+                <option value="{{ budget.id }}" label="{{ budget.name }}">{{ budget.name }}</option>
+            {% endfor %}
+        </select>
+    </div>
+</div>
diff --git a/resources/views/reports/options/category.twig b/resources/views/reports/options/category.twig
new file mode 100644
index 0000000000..2ff52d301a
--- /dev/null
+++ b/resources/views/reports/options/category.twig
@@ -0,0 +1,11 @@
+<div class="form-group">
+    <label for="inputCategories" class="col-sm-3 control-label">{{ 'select_category'|_ }}</label>
+    <div class="col-sm-9">
+        <select id="inputCategories" name="category[]" multiple="multiple" class="form-control">
+            {% for category in categories %}
+                <option value="{{ category.id }}" label="{{ category.name }}">{{ category.name }}</option>
+            {% endfor %}
+        </select>
+
+    </div>
+</div>
diff --git a/resources/views/reports/options/double.twig b/resources/views/reports/options/double.twig
new file mode 100644
index 0000000000..4babc4e177
--- /dev/null
+++ b/resources/views/reports/options/double.twig
@@ -0,0 +1,10 @@
+<div class="form-group">
+    <label for="inputDoubleAccounts" class="col-sm-3 control-label">{{ 'select_expense_revenue'|_ }}</label>
+    <div class="col-sm-9">
+        <select id="inputDoubleAccounts" name="double[]" multiple="multiple" class="form-control">
+            {% for account in set %}
+                <option value="{{ account.id }}" label="{{ account.name }}{% if account.iban !='' %} ({{ account.iban }}){% endif %}">{{ account.name }}{% if account.iban !='' %} ({{ account.iban }}){% endif %}</option>
+            {% endfor %}
+        </select>
+    </div>
+</div>
diff --git a/resources/views/reports/options/no-options.twig b/resources/views/reports/options/no-options.twig
new file mode 100644
index 0000000000..0563b9dca3
--- /dev/null
+++ b/resources/views/reports/options/no-options.twig
@@ -0,0 +1,3 @@
+<p id="no_extra_options">
+    <em>{{ 'report_has_no_extra_options'|_ }}</em>
+</p>
diff --git a/resources/views/reports/options/tag.twig b/resources/views/reports/options/tag.twig
new file mode 100644
index 0000000000..bcaec1bf17
--- /dev/null
+++ b/resources/views/reports/options/tag.twig
@@ -0,0 +1,10 @@
+<div class="form-group">
+    <label for="inputTags" class="col-sm-3 control-label">{{ 'select_tag'|_ }}</label>
+    <div class="col-sm-9">
+        <select id="inputTags" name="tag[]" multiple="multiple" class="form-control">
+            {% for tag in tags %}
+                <option value="{{ tag.id }}" label="{{ tag.tag|e('html') }}">{{ tag.tag|e('html') }}</option>
+            {% endfor %}
+        </select>
+    </div>
+</div>
diff --git a/resources/views/reports/partials/accounts.twig b/resources/views/reports/partials/accounts.twig
new file mode 100644
index 0000000000..53a9e5e0c5
--- /dev/null
+++ b/resources/views/reports/partials/accounts.twig
@@ -0,0 +1,48 @@
+<table class="table table-hover sortable">
+    <thead>
+    <tr>
+        <th data-defaultsign="az">{{ 'name'|_ }}</th>
+        <th data-defaultsign="_19" class="hidden-xs" style="text-align: right;">{{ 'balanceStart'|_ }}</th>
+        <th data-defaultsign="_19" class="hidden-xs" style="text-align: right;">{{ 'balanceEnd'|_ }}</th>
+        <th data-defaultsign="_19" style="text-align: right;">{{ 'difference'|_ }}</th>
+    </tr>
+    </thead>
+    <tbody>
+    {% for account in accountReport.accounts %}
+        <tr>
+            <td data-value="{{ account.name }}">
+                <a href="{{ route('accounts.show',account.id) }}" title="{{ account.name }}">{{ account.name }}</a>
+            </td>
+            <td class="hidden-xs" data-value="{{ account.start_balance }}" style="text-align: right;">
+                {{ formatAmountBySymbol(account.start_balance, account.currency_symbol, account.currency_decimal_places) }}
+            </td>
+            <td class="hidden-xs" data-value="{{ account.end_balance }}" style="text-align: right;">
+                {{ formatAmountBySymbol(account.end_balance, account.currency_symbol, account.currency_decimal_places) }}
+            </td>
+            <td style="text-align: right;"
+                data-value="{{ (account.end_balance - account.start_balance) }}">
+                {{ formatAmountBySymbol(account.end_balance - account.start_balance, account.currency_symbol, account.currency_decimal_places) }}
+            </td>
+        </tr>
+    {% endfor %}
+    <tr>
+        <td colspan="4"><em>{{ 'sumOfSums'|_ }}</em></td>
+    </tr>
+    {% for sum in accountReport.sums %}
+    <tr>
+        <td>
+            &nbsp;
+        </td>
+        <td style="text-align: right;">
+            {{ formatAmountBySymbol(sum.start, sum.currency_symbol, sum.currency_decimal_places) }}
+        </td>
+        <td style="text-align: right;">
+            {{ formatAmountBySymbol(sum.end, sum.currency_symbol, sum.currency_decimal_places) }}
+        </td>
+        <td style="text-align: right;">
+            {{ formatAmountBySymbol(sum.difference, sum.currency_symbol, sum.currency_decimal_places) }}
+        </td>
+    </tr>
+    {% endfor %}
+    </tbody>
+</table>
diff --git a/resources/views/reports/partials/balance.twig b/resources/views/reports/partials/balance.twig
new file mode 100644
index 0000000000..5c44dac93b
--- /dev/null
+++ b/resources/views/reports/partials/balance.twig
@@ -0,0 +1,61 @@
+<table class="table table-hover">
+    <thead>
+    <tr>
+        <th>{{ 'budgets'|_ }}</th>
+        {% for account in report.accounts %}
+            {% if account.sum != 0 %}
+                <th class="hidden-xs" style="text-align: right;"><a href="{{ route('accounts.show',account.id) }}"
+                                                                    title="{{ account.iban|default(account.name) }}">{{ account.name }}</a></th>
+            {% endif %}
+        {% endfor %}
+        <th style="text-align: right;">{{ 'sum'|_ }}</th>
+    </tr>
+    </thead>
+    <tbody>
+
+    {% for budget in report.budgets %}
+        {% if budget.spent|length > 0 %}
+            <tr>
+                <td>
+                    <a href="{{ route('budgets.show', [budget.budget_id]) }}">{{ budget.budget_name }}</a>
+                </td>
+                {% for account in report.accounts %}
+                    {% if budget.spent[account.id] %}
+                        <td style="text-align: right;">
+                            {{ formatAmountBySymbol(budget.spent[account.id].spent, budget.spent[account.id].currency_symbol, budget.spent[account.id].currency_decimal_places) }}
+                            <span data-location="budget-entry"
+                               data-budget-id="{{ budget.budget_id }}"
+                               data-account-id="{{ account.id }}"
+                               data-currency-id="{{ budget.spent[account.id].currency_id }}"
+                               class="fa fa-fw fa-info-circle text-muted firefly-info-button"></span>
+                        </td>
+                    {% else %}
+                        {% if report.accounts[account.id].sum != 0 %}
+                            <td>&nbsp;</td>
+                        {% endif %}
+                    {% endif %}
+
+                {% endfor %}
+                <td style="text-align: right;">
+                    {% for sum in report.sums[budget.budget_id] %}
+                        {{ formatAmountBySymbol(sum.sum, sum.currency_symbol, sum.currency_decimal_places) }} <span class="fa fa-fw fa-info-circle text-muted"></span>
+                        <br/>
+                    {% endfor %}
+                </td>
+            </tr>
+        {% endif %}
+    {% endfor %}
+    </tbody>
+    <tfoot>
+    <tr>
+        <td><em>{{ 'sum'|_ }}</em></td>
+        {% for account in report.accounts %}
+            {% if account.sum != 0 %}
+                <td style="text-align: right;">
+                    {{ formatAmountBySymbol(account.sum, account.currency_symbol, account.currency_decimal_places) }}
+                </td>
+            {% endif %}
+        {% endfor %}
+    </tr>
+    </tfoot>
+</table>
diff --git a/resources/views/reports/partials/bills.twig b/resources/views/reports/partials/bills.twig
new file mode 100644
index 0000000000..19722deb21
--- /dev/null
+++ b/resources/views/reports/partials/bills.twig
@@ -0,0 +1,84 @@
+<table class="table table-hover sortable">
+    <thead>
+    <tr>
+        <th data-defaultsign="az">{{ trans('form.name') }}</th>
+        <th data-defaultsign="_19" class="hidden-xs" style="text-align: right;">{{ trans('form.amount_min') }}</th>
+        <th data-defaultsign="_19" class="hidden-xs" style="text-align: right;">{{ trans('form.amount_max') }}</th>
+        <th data-defaultsign="_19">{{ trans('form.expected_on') }}</th>
+        <th data-defaultsign="_19" style="text-align: right;">{{ trans('form.paid') }}</th>
+    </tr>
+    </thead>
+    <tbody>
+    {% for bill in report.bills %}
+        {% if (bill.expected_dates|length > 0 or bill.paid_moments|length > 0) and bill.active %}
+            <tr>
+                <td>
+                    <a href="{{ route('bills.show',bill.id) }}">{{ bill.name }}</a>
+                </td>
+                <td class="hidden-xs" style="text-align:right;">
+                    {{ formatAmountBySymbol(bill.amount_min, bill.currency_symbol, bill.currency_decimal_places) }}
+                </td>
+                <td class="hidden-xs" style="text-align:right;">
+                    {{ formatAmountBySymbol(bill.amount_max, bill.currency_symbol, bill.currency_decimal_places) }}
+                </td>
+                <td data-value="{{ bill.expected_dates[0].format('Y-m-d')|default('0000-00-00') }}">
+                    {% for date in bill.expected_dates %}
+                        {{ date.formatLocalized(monthAndDayFormat) }}<br/>
+                    {% endfor %}
+                </td>
+                <td style="text-align:right;">
+                    {% set hitCount = 0 %}
+                    {% for journals in bill.paid_moments %}
+                        {% for journal in journals %}
+                            {% set hitCount = hitCount+1 %}
+                            <a title="{{ journal.date.formatLocalized(monthAndDayFormat) }}"
+                               href="{{ route('transactions.show', [journal.transaction_group_id]) }}">{{ journal.description }}</a>,
+                            {{ formatAmountBySymbol(journal.amount, journal.currency_symbol, journal.currency_decimal_places) }}
+                            <br/>
+                        {% endfor %}
+                    {% endfor %}
+                    {% if hitCount == 0 %}
+                        <em>{{ 'notCharged'|_ }}</em>
+                    {% endif %}
+                </td>
+            </tr>
+        {% endif %}
+    {% endfor %}
+
+
+    {% for line in bills.getBills %}
+        <tr>
+            <td data-value="{{ line.getBill.name }}">
+                <a href="{{ route('bills.show',line.getBill.id) }}">{{ line.getBill.name }}</a>
+                <small class="text-muted"><br/>
+                    {{ trans('firefly.bill_expected_between', {start: line.getPayDate.formatLocalized(monthAndDayFormat), end: line.getEndOfPayDate.formatLocalized(monthAndDayFormat) }) }}
+                </small>
+            </td>
+            <td class="hidden-xs" data-value="{{ line.getMin }}" style="text-align: right;">{{ formatAmountByCurrency(line.getCurrency, line.getMin) }}</td>
+            <td class="hidden-xs" data-value="{{ line.getMax }}" style="text-align: right;">{{ formatAmountByCurrency(line.getCurrency, line.getMax) }}</td>
+
+            {# if bill is hit, show hit amount #}
+            {% if line.isHit %}
+                <td data-value="{{ line.getAmount }}" style="text-align: right;">
+                    <a href="{{ route('transactions.show', line.getTransactionJournalId) }}">
+                        {{ formatAmountByCurrency(line.getCurrency, line.getAmount) }}
+                    </a>
+                </td>
+            {% endif %}
+            {# if not but is active, show "not yet charged #}
+            {% if not line.isHit and line.isActive %}
+                <td data-value="0" class="bg-success">{{ 'notCharged'|_ }}</td>
+            {% endif %}
+            {% if not line.isActive and not line.isHit %}
+                <td data-value="-1">&nbsp;</td>
+            {% endif %}
+            <td data-value="{{ (line.getMax - line.getAmount) }}" style="text-align: right;" class="hidden-xs">
+                {% if line.isHit %}
+                    {{ formatAmountByCurrency(line.getCurrency, (line.getMax + line.getAmount)) }}
+                {% endif %}
+            </td>
+        </tr>
+
+    {% endfor %}
+    </tbody>
+</table>
diff --git a/resources/views/reports/partials/budget-period.twig b/resources/views/reports/partials/budget-period.twig
new file mode 100644
index 0000000000..bf672d0ab7
--- /dev/null
+++ b/resources/views/reports/partials/budget-period.twig
@@ -0,0 +1,46 @@
+<table class="table table-hover sortable">
+    <thead>
+    <tr>
+        <th data-defaultsign="az" colspan="2">{{ 'budget'|_ }}</th>
+        {% for period in periods %}
+            <th data-defaultsign="_19" style="text-align: right;">{{ period }}</th>
+        {% endfor %}
+        <th data-defaultsign="_19" style="text-align: right;">{{ 'average'|_ }}</th>
+        <th data-defaultsign="_19" style="text-align: right;">{{ 'sum'|_ }}</th>
+    </tr>
+    </thead>
+    <tbody>
+    {% for key, info in report %}
+        <tr>
+            <td data-value="{{ info.name }}">
+                {% if info.id != 0 %}
+                    <a class="btn btn-default btn-xs" href="{{ route('budgets.show', [info.id]) }}"><span class="fa fa-external-link"></span></a>
+                {% else %}
+                    <a class="btn btn-default btn-xs" href="{{ route('budgets.no-budget') }}"><span class="fa fa-external-link"></span></a>
+                {% endif %}
+            </td>
+            <td data-value="{{ info.name }}">
+                <a title="{{ info.name }}" href="#" data-budget="{{ info.id }}" data-currency="{{ info.currency_id }}" class="budget-chart-activate">{{ info.name }}</a>
+            </td>
+            {% for key, period in periods %}
+                {% if(info.entries[key]) %}
+                    <td data-value="{{ info.entries[key] }}" style="text-align: right;">
+                        {{ formatAmountBySymbol(info.entries[key], info.currency_symbol, info.currency_decimal_places) }}
+                    </td>
+                {% else %}
+                    <td data-value="0" style="text-align: right;">
+                        {{ formatAmountBySymbol(0, info.currency_symbol, info.currency_decimal_places) }}
+                    </td>
+                {% endif %}
+
+            {% endfor %}
+            <td data-value="{{ info.avg }}" style="text-align: right;">
+                {{ formatAmountBySymbol(info.avg, info.currency_symbol, info.currency_decimal_places) }}
+            </td>
+            <td data-value="{{ info.sum }}" style="text-align: right;">
+                {{ formatAmountBySymbol(info.sum, info.currency_symbol, info.currency_decimal_places) }}
+            </td>
+        </tr>
+    {% endfor %}
+    </tbody>
+</table>
diff --git a/resources/views/reports/partials/budgets.twig b/resources/views/reports/partials/budgets.twig
new file mode 100644
index 0000000000..56b80cc5b5
--- /dev/null
+++ b/resources/views/reports/partials/budgets.twig
@@ -0,0 +1,100 @@
+<table class="table table-hover sortable">
+    <thead>
+    <tr>
+        <th data-defaultsign="az">{{ 'budget'|_ }}</th>
+        <th data-defaultsign="month" class="hidden-xs">{{ 'date'|_ }}</th>
+        <th data-defaultsign="_19" style="text-align: right;" class="hidden-xs">{{ 'budgeted'|_ }}</th>
+        <th data-defaultsign="_19" class="hidden-xs">{{ trans('list.percentage') }}</th>
+        <th data-defaultsign="_19" style="text-align: right;">{{ 'spent'|_ }}</th>
+        <th data-defaultsign="_19" class="hidden-xs">{{ trans('list.percentage') }}</th>
+        <th data-defaultsort="disabled" class="hidden-xs">&nbsp;</th>
+        <th data-defaultsign="_19" style="text-align: right;" class="hidden-xs">{{ 'left'|_ }}</th>
+        <th data-defaultsign="_19" style="text-align: right;">{{ 'overspent'|_ }}</th>
+    </tr>
+    </thead>
+    <tbody>
+    {% for budget in report.budgets %}
+        {% for budget_limit in budget.budget_limits %}
+            <tr>
+                {% if budget.no_budget %}
+                    <td data-value="zzz">
+                        <em>{{ 'no_budget'|_ }} ({{ budget_limit.currency_name }})</em>
+                    </td>
+                {% else %}
+                    <td data-value="{{ budget.budget_name }}">
+                        <a href="{{ route('budgets.show', [budget.budget_id]) }}">{{ budget.budget_name }}</a>
+                    </td>
+                {% endif %}
+                <!-- date, hidden on mobile  -->
+                <td class="hidden-xs" data-value="{{ budget_limit.start_date.format('Y-m-d')|default('0000-00-00') }}">
+                    {% if null != budget_limit.budget_limit_id %}
+                        <a href="{{ route('budgets.show.limit', [budget.budget_id, budget_limit.budget_limit_id]) }}">
+                            {{ budget_limit.start_date.formatLocalized(monthAndDayFormat) }}
+                            &mdash;
+                            {{ budget_limit.end_date.formatLocalized(monthAndDayFormat) }}
+                        </a>
+                    {% endif %}
+                </td>
+
+                <!-- budgeted, hidden on mobile -->
+                <td data-value="{{ budget_limit.budgeted|default(0) }}" style="text-align: right;" class="hidden-xs">
+                    {% if null != budget_limit.budgeted %}
+                        {{ formatAmountBySymbol(budget_limit.budgeted, budget_limit.currency_symbol, budget_limit.currency_decimal_places) }}
+                    {% endif %}
+                </td>
+                <!-- percentage, hidden -->
+                <td data-value="{{ budget_limit.budgeted_pct|default(0) }}" class="hidden-xs">
+                    {{ budget_limit.budgeted_pct }}%
+                </td>
+
+
+                <!-- spent, visible on mobile -->
+                <td data-value="{{ budget_limit.spent|default(0) }}" style="text-align: right;">
+                    {{ formatAmountBySymbol(budget_limit.spent, budget_limit.currency_symbol, budget_limit.currency_decimal_places) }}
+                </td>
+                <!-- percentage, hidden -->
+                <td data-value="{{ budget_limit.spent_pct|default(0) }}" class="hidden-xs">
+                    {{ budget_limit.spent_pct }}%
+                </td>
+
+                <!-- info button, not visible on mobile -->
+                <td class="hidden-xs">
+                    {% if budget_limit.spent != 0 %}
+                        <span class="fa fa-fw text-muted fa-info-circle firefly-info-button"
+                           data-location="budget-spent-amount" data-currency-id="{{ budget_limit.currency_id }}" data-budget-id="{{ budget.budget_id }}"></span>
+                    {% endif %}
+                </td>
+
+
+                <!-- left, hidden on mobile  -->
+                <td data-value="{{ budget_limit.left|default(0) }}" style="text-align: right;" class="hidden-xs">
+                    {% if null != budget_limit.left %}
+                        {{ formatAmountBySymbol(budget_limit.left, budget_limit.currency_symbol, budget_limit.currency_decimal_places) }}
+                    {% endif %}
+                </td>
+                <!-- overspent, visible. -->
+                <td data-value="{{ budget_limit.overspent|default(0) }}" style="text-align: right;">
+                    {% if null != budget_limit.overspent %}
+                        {{ formatAmountBySymbol(budget_limit.overspent, budget_limit.currency_symbol, budget_limit.currency_decimal_places) }}
+                    {% endif %}
+                </td>
+            </tr>
+        {% endfor %}
+    {% endfor %}
+    </tbody>
+    <tfoot>
+    {% for sum in report.sums %}
+        <tr>
+            <td colspan="2"><em>{{ 'sum'|_ }} ({{ sum.currency_name }})</em></td>
+            <td style="text-align: right;">{{ formatAmountBySymbol(sum.budgeted, sum.currency_symbol, sum.currency_decimal_places) }}</td>
+            <td>&nbsp;</td>
+            <td style="text-align: right;">{{ formatAmountBySymbol(sum.spent, sum.currency_symbol, sum.currency_decimal_places) }}</td>
+            <td>&nbsp;</td>
+            <td>&nbsp;</td>
+            <td style="text-align: right;">{{ formatAmountBySymbol(sum.left, sum.currency_symbol, sum.currency_decimal_places) }}</td>
+            <td style="text-align: right;">{{ formatAmountBySymbol(sum.overspent, sum.currency_symbol, sum.currency_decimal_places) }}</td>
+
+        </tr>
+        {% endfor %}
+    </tfoot>
+</table>
diff --git a/resources/views/reports/partials/categories.twig b/resources/views/reports/partials/categories.twig
new file mode 100644
index 0000000000..f45abde45d
--- /dev/null
+++ b/resources/views/reports/partials/categories.twig
@@ -0,0 +1,54 @@
+<table class="table table-hover sortable">
+    <thead>
+    <tr>
+        <th data-defaultsign="az">{{ 'category'|_ }}</th>
+        <th data-defaultsign="_19" style="text-align: right;">{{ 'spent'|_ }}</th>
+        <th data-defaultsign="_19" style="text-align: right;">{{ 'earned'|_ }}</th>
+        <th data-defaultsign="_19" style="text-align: right;">{{ 'sum'|_ }}</th>
+        <th data-defaultsort="disabled">&nbsp;</th>
+    </tr>
+    </thead>
+    <tbody>
+    {% for category in report.categories %}
+        {% if loop.index > listLength %}
+            <tr class="overListLength">
+        {% else %}
+            <tr>
+        {% endif %}
+        <td data-value="{{ category.title }}">
+            <a href="{{ route('categories.show', category.id) }}">{{ category.title }}</a>
+        </td>
+        <td data-value="{{ category.spent }}" style="text-align: right;">{{ formatAmountBySymbol(category.spent, category.currency_symbol, category.currency_decimal_places, true) }}</td>
+        <td data-value="{{ category.earned }}" style="text-align: right;">{{ formatAmountBySymbol(category.earned, category.currency_symbol, category.currency_decimal_places, true) }}</td>
+        <td data-value="{{ category.sum }}" style="text-align: right;">{{ formatAmountBySymbol(category.sum, category.currency_symbol, category.currency_decimal_places, true) }}</td>
+        <td style="width:20px;">
+            <span class="fa fa-fw fa-info-circle text-muted firefly-info-button" data-location="category-entry" data-category-id="{{ category.id }}" data-currency-id="{{ category.currency_id }}"
+            ></span>
+        </td>
+    </tr>
+    {% endfor %}
+    </tbody>
+    <tfoot>
+    {% if report.categories|length > listLength %}
+        <tr>
+            <td colspan="4" class="active">
+                <a href="#" class="listLengthTrigger">{{ trans('firefly.show_full_list',{number:incomeTopLength}) }}</a>
+            </td>
+        </tr>
+    {% endif %}
+    {% for sum in report.sums %}
+    <tr>
+        <td><em>{{ 'sum'|_ }} ({{ sum.currency_name }})</em></td>
+        <td style="text-align: right;">
+            {{ formatAmountBySymbol(sum.spent, sum.currency_symbol, sum.currency_decimal_places) }}
+        </td>
+        <td style="text-align: right;">
+            {{ formatAmountBySymbol(sum.earned, sum.currency_symbol, sum.currency_decimal_places) }}
+        </td>
+        <td style="text-align: right;">
+            {{ formatAmountBySymbol(sum.sum, sum.currency_symbol, sum.currency_decimal_places) }}
+        </td>
+    </tr>
+    {% endfor %}
+    </tfoot>
+</table>
diff --git a/resources/views/reports/partials/category-period.twig b/resources/views/reports/partials/category-period.twig
new file mode 100644
index 0000000000..2660eed70b
--- /dev/null
+++ b/resources/views/reports/partials/category-period.twig
@@ -0,0 +1,50 @@
+<table class="table table-hover sortable table-condensed">
+    <thead>
+    <tr>
+        <th data-defaultsign="az" colspan="2">{{ 'category'|_ }}</th>
+        {% for period in periods %}
+            <th data-defaultsign="_19" style="text-align: right;">{{ period }}</th>
+        {% endfor %}
+        <th data-defaultsign="_19" style="text-align: right;">{{ 'sum'|_ }}</th>
+    </tr>
+    </thead>
+    <tbody>
+    {% for info in report %}
+        <tr>
+            <td data-value="{{ info.title }}">
+                {% if info.id != 0 %}
+                    <a class="btn btn-default btn-xs" href="{{ route('categories.show', [info.id]) }}"><span class="fa fa-external-link"></span></a>
+                {% else %}
+                    <a class="btn btn-default btn-xs" href="{{ route('categories.no-category') }}"><span class="fa fa-external-link"></span></a>
+                {% endif %}
+            </td>
+            <td data-value="{{ info.title }}">
+                <a title="{{ info.title }}" href="#" data-currency="{{ info.currency_id }}" data-category="{{ info.id }}" class="category-chart-activate">{{ info.title }}</a>
+            </td>
+            {% for key, period in periods %}
+                {# income first #}
+                {% if(info.entries[key]) %}
+                    <td data-value="{{ info.entries[key] }}" style="text-align: right;">
+                        {{ formatAmountBySymbol(info.entries[key], info.currency_symbol, info.currency_decimal_places) }}
+                    </td>
+                {% else %}
+                    <td data-value="0" style="text-align: right;">
+                        {{ formatAmountBySymbol(0, info.currency_symbol, info.currency_decimal_places) }}
+                    </td>
+                {% endif %}
+            {% endfor %}
+
+            {# if sum of income, display: #}
+            {% if info.sum %}
+                <td data-value="{{ info.sum }}" style="text-align: right;">
+                    {{ formatAmountBySymbol(info.sum, info.currency_symbol, info.currency_decimal_places) }}
+                </td>
+            {% else %}
+                <td data-value="0" style="text-align: right;">
+                    {{ formatAmountBySymbol(0, info.currency_symbol, info.currency_decimal_places) }}
+                </td>
+            {% endif %}
+        </tr>
+    {% endfor %}
+    </tbody>
+</table>
diff --git a/resources/views/reports/partials/exp-budgets.twig b/resources/views/reports/partials/exp-budgets.twig
new file mode 100644
index 0000000000..d1cc577e1d
--- /dev/null
+++ b/resources/views/reports/partials/exp-budgets.twig
@@ -0,0 +1,30 @@
+<table class="table table-hover sortable">
+    <thead>
+    <tr>
+        <th style="width:66%;" data-defaultsign="az" data-defaultsort="asc">{{ 'category'|_ }}</th>
+        <th style="width:34%;" data-defaultsign="_19">{{ 'spent'|_ }}</th>
+    </tr>
+    </thead>
+    <tbody>
+    {% for budgetId, entry in together %}
+        <tr>
+            <td data-value="{% if entry.budget == null %}zzzzzzzzzzz{% else %}{{ entry.budget }}{% endif %}">
+                {% if entry.budget == null %}
+                    <a href="{{ route('budgets.no-budget') }}">{{ 'no_budget_squared'|_ }}</a>
+                {% else %}
+                    <a href="{{ route('budgets.show', budgetId) }}">{{ entry.budget }}</a>
+                {% endif %}
+            </td>
+            <td data-value="{{ entry.spent.grand_total }}">
+                {% if entry.spent.per_currency|length ==0 %}
+                    {{ '0'|formatAmount }}
+                {% else %}
+                    {% for expense in entry.spent.per_currency %}
+                        {{ formatAmountBySymbol(expense.sum, expense.currency.symbol, expense.currency.dp) }}<br/>
+                    {% endfor %}
+                {% endif %}
+            </td>
+        </tr>
+    {% endfor %}
+    </tbody>
+</table>
diff --git a/resources/views/reports/partials/exp-categories.twig b/resources/views/reports/partials/exp-categories.twig
new file mode 100644
index 0000000000..bfa38f242b
--- /dev/null
+++ b/resources/views/reports/partials/exp-categories.twig
@@ -0,0 +1,41 @@
+<table class="table table-hover sortable">
+    <thead>
+    <tr>
+        <th style="width:50%;" data-defaultsign="az" data-defaultsort="asc">{{ 'category'|_ }}</th>
+        <th style="width:25%;" data-defaultsign="_19">{{ 'spent'|_ }}</th>
+        <th style="width:25%;" data-defaultsign="_19">{{ 'earned'|_ }}</th>
+    </tr>
+    </thead>
+    <tbody>
+    {% for categoryId, entry in together %}
+        <tr>
+            <td data-value="{% if entry.category == null %}zzzzzzzzzzz{% else %}{{ entry.category }}{% endif %}">
+                {% if entry.category == null %}
+                    <a href="{{ route('categories.no-category') }}">{{ 'noCategory'|_ }}</a>
+                {% else %}
+                    <a href="{{ route('categories.show', categoryId) }}">{{ entry.category }}</a>
+
+                {% endif %}
+            </td>
+            <td data-value="{{ entry.spent.grand_total }}">
+                {% if entry.spent.per_currency|length ==0 %}
+                    {{ '0'|formatAmount }}
+                {% else %}
+                    {% for expense in entry.spent.per_currency %}
+                        {{ formatAmountBySymbol(expense.sum, expense.currency.symbol, expense.currency.dp) }}<br/>
+                    {% endfor %}
+                {% endif %}
+            </td>
+            <td data-value="{{ entry.earned.grand_total }}">
+                {% if entry.earned.per_currency|length ==0 %}
+                    {{ '0'|formatAmount }}
+                {% else %}
+                    {% for income in entry.earned.per_currency %}
+                        {{ formatAmountBySymbol(income.sum * -1, income.currency.symbol, income.currency.dp) }}<br/>
+                    {% endfor %}
+                {% endif %}
+            </td>
+        </tr>
+    {% endfor %}
+    </tbody>
+</table>
diff --git a/resources/views/reports/partials/exp-not-grouped.twig b/resources/views/reports/partials/exp-not-grouped.twig
new file mode 100644
index 0000000000..ec26868ce6
--- /dev/null
+++ b/resources/views/reports/partials/exp-not-grouped.twig
@@ -0,0 +1,32 @@
+<table class="table table-hover sortable">
+    <thead>
+    <tr>
+        <th style="width:50%;" data-defaultsign="az">{{ 'name'|_ }}</th>
+        <th style="width:25%;" class="hidden-xs" data-defaultsign="_19">{{ 'spent'|_ }}</th>
+        <th style="width:25%;" class="hidden-xs" data-defaultsign="_19">{{ 'earned'|_ }}</th>
+    </tr>
+    </thead>
+    <tbody>
+    {% for name, amounts in result %}
+        <tr>
+            <td data-value="{{ name }}">{{ name }}</td>
+            <td data-value="{{ amounts.spent.grand_sum }}">
+                {% if amounts.spent.per_currency|length == 0 %}
+                    {{ '0'|formatAmount }}
+                {% endif %}
+                {% for expense in amounts.spent.per_currency %}
+                    {{ formatAmountBySymbol(expense.sum, expense.currency.symbol, expense.currency.dp) }}<br/>
+                {% endfor %}
+            </td>
+            <td data-value="{{ amounts.earned.grand_sum }}">
+                {% if amounts.earned.per_currency|length == 0 %}
+                    {{ '0'|formatAmount }}
+                {% endif %}
+                {% for income in amounts.earned.per_currency %}
+                    {{ formatAmountBySymbol(income.sum * -1, income.currency.symbol, income.currency.dp) }}<br/>
+                {% endfor %}
+            </td>
+        </tr>
+    {% endfor %}
+    </tbody>
+</table>
diff --git a/resources/views/reports/partials/income-expenses.twig b/resources/views/reports/partials/income-expenses.twig
new file mode 100644
index 0000000000..ad3767f87d
--- /dev/null
+++ b/resources/views/reports/partials/income-expenses.twig
@@ -0,0 +1,61 @@
+<table class="table table-hover sortable">
+    <thead>
+    <tr>
+        <th data-defaultsign="az">{{ 'name'|_ }}</th>
+        <th data-defaultsign="_19" style="text-align: right;">{{ 'total'|_ }}</th>
+        <th data-defaultsign="_19" class="hidden-xs" style="text-align: right;">{{ 'average'|_ }}</th>
+        <th data-defaultsort="disabled"></th>
+    </tr>
+    </thead>
+    <tbody>
+    {% for account in report.accounts %}
+        {% if loop.index > listLength %}
+            <tr class="overListLength">
+        {% else %}
+            <tr>
+        {% endif %}
+        <td data-value="{{ account.name }}">
+            <a href="{{ route('accounts.show',account.id) }}">{{ account.name }}</a>
+            {% if account.count > 1 %}
+                <br/>
+                <small>
+                    {{ account.count }} {{ 'transactions'|_|lower }}
+                </small>
+            {% endif %}
+        </td>
+        <td data-value="{{ account.sum }}" style="text-align: right;">
+            {{ formatAmountBySymbol(account.sum, account.currency_symbol, account.currency_decimal_places) }}
+        </td>
+        <td class="hidden-xs" data-value="{{ account.average }}" style="text-align: right;">
+            {% if account.count > 1 %}
+                {{ formatAmountBySymbol(account.average, account.currency_symbol, account.currency_decimal_places) }}
+            {% else %}
+                &mdash;
+            {% endif %}
+        </td>
+        <td>
+            <span class="fa fa-fw text-muted fa-info-circle firefly-info-button" data-location="{{ type }}"
+               data-account-id="{{ account.id }}" data-currency-id="{{ account.currency_id }}"></span>
+        </td>
+        </tr>
+    {% endfor %}
+    </tbody>
+
+    <tfoot>
+    {% if report.accounts|length > listLength %}
+        <tr>
+            <td colspan="4" class="active">
+                <a href="#" class="listLengthTrigger">{{ trans('firefly.show_full_list',{number:incomeTopLength}) }}</a>
+            </td>
+        </tr>
+    {% endif %}
+    {% for sum in report.sums %}
+        <tr>
+            <td><em>{{ 'sum'|_ }} ({{ sum.currency_name }})</em></td>
+            <td style="text-align: right;">
+                {{ formatAmountBySymbol(sum.sum, sum.currency_symbol, sum.currency_decimal_places) }}
+            </td>
+            <td>&nbsp;</td>
+        </tr>
+    {% endfor %}
+</table>
diff --git a/resources/views/reports/partials/journals-audit.twig b/resources/views/reports/partials/journals-audit.twig
new file mode 100644
index 0000000000..d88485ebb5
--- /dev/null
+++ b/resources/views/reports/partials/journals-audit.twig
@@ -0,0 +1,184 @@
+<table class="table table-hover table-compressed table-responsive ">
+    <thead>
+    <tr class="ignore">
+        <th class="hide-buttons">&nbsp;</th>
+        <th class="hide-icon">&nbsp;</th>
+
+        <th class="hide-description">{{ trans('list.description') }}</th>
+        <th class="hide-balance_before" style="text-align: right;">{{ trans('list.balance_before') }}</th>
+        <th class="hide-amount" style="text-align: right;">{{ trans('list.amount') }}</th>
+        <th class="hide-balance_after" style="text-align: right;">{{ trans('list.balance_after') }}</th>
+
+        <th class="hide-date">{{ trans('list.date') }}</th>
+        {# new optional fields (3x) #}
+        <th class="hide-from">{{ trans('list.from') }}</th>
+        <th class="hide-to">{{ trans('list.to') }}</th>
+
+        <th class="hide-budget"><span class="fa fa-pie-chart fa-fw" title="{{ trans('list.budget') }}"></span></th>
+        <th class="hide-category"><span class="fa fa-bookmark fa-fw" title="{{ trans('list.category') }}"></span></th>
+        <th class="hide-bill">{{ trans('list.bill') }}</th>
+
+        {# more optional fields (2x) #}
+        <th class="hide-create_date">{{ trans('list.create_date') }}</th>
+        <th class="hide-update_date">{{ trans('list.update_date') }}</th>
+
+        {# even more optional fields #}
+        <th class="hide-interest_date">{{ trans('list.interest_date') }}</th>
+        <th class="hide-book_date">{{ trans('list.book_date') }}</th>
+        <th class="hide-process_date">{{ trans('list.process_date') }}</th>
+        <th class="hide-due_date">{{ trans('list.due_date') }}</th>
+        <th class="hide-payment_date">{{ trans('list.payment_date') }}</th>
+        <th class="hide-invoice_date">{{ trans('list.invoice_date') }}</th>
+
+    </tr>
+    </thead>
+    <tbody>
+    {% for journal in journals %}
+        <tr data-date="{{ journal.date.format('Y-m-d') }}" data-id="{{ journal.id }}">
+
+            <td class="hide-buttons">
+                <div class="btn-group btn-group-xs">
+                    <a href="{{ route('transactions.edit',journal.transaction_group_id) }}" class="btn btn-xs btn-default"><span class="fa fa-fw fa-pencil"></span></a>
+                    <a href="{{ route('transactions.delete',journal.transaction_group_id) }}" class="btn btn-xs btn-danger"><span class="fa fa-fw fa-trash-o"></span></a>
+                </div>
+            </td>
+
+            <td class="hide-icon">
+                {% if journal.transaction_type_type == 'Withdrawal' %}
+                    <span class="fa fa-long-arrow-left fa-fw" title="{{ trans('firefly.Withdrawal') }}"></span>
+                {% endif %}
+
+                {% if journal.transaction_type_type == 'Deposit' %}
+                    <span class="fa fa-long-arrow-right fa-fw" title="{{ trans('firefly.Deposit') }}"></span>
+                {% endif %}
+
+                {% if journal.transaction_type_type == 'Transfer' %}
+                    <span class="fa fa-exchange fa-fw" title="{{ trans('firefly.Deposit') }}"></span>
+                {% endif %}
+
+                {% if journal.transaction_type_type == 'Reconciliation' %}
+                    <span class="fa-fw fa fa-calculator" title="{{ trans('firefly.reconciliation_transaction') }}"></span>
+                {% endif %}
+
+                {% if journal.transaction_type_type == 'Opening balance' %}
+                    <span class="fa-fw fa fa-star-o" title="{{ trans('firefly.Opening balance') }}"></span>
+                {% endif %}
+
+            </td>
+
+            <td class="hide-description">
+                <a href="{{ route('transactions.show',journal.transaction_group_id) }}">
+                    {% if journal.group_title|length > 0 %}
+                        {{ journal.group_title }} ({{ journal.description }})
+                    {% else %}
+                        {{ journal.description }}
+                    {% endif %}
+                </a>
+            </td>
+
+            <td class="hide-balance_before" style="text-align: right;">
+                {{ formatAmountBySymbol(journal.balance_before, auditData[account.id].currency.symbol, auditData[account.id].currency.decimal_places) }}
+            </td>
+            <td class="hide-amount" style="text-align: right;">
+
+                {% if auditData[account.id].currency.id == journal.currency_id %}
+                    {% if account.id == journal.destination_account_id and journal.transaction_type_type == 'Opening balance' %}
+                        {{ formatAmountBySymbol(journal.amount*-1, journal.currency_symbol, journal.currency_decimal_places) }}
+                    {% elseif account.id == journal.destination_account_id and journal.transaction_type_type == 'Deposit' %}
+                        {{ formatAmountBySymbol(journal.amount*-1, journal.currency_symbol, journal.currency_decimal_places) }}
+                    {% elseif account.id == journal.destination_account_id and journal.transaction_type_type == 'Transfer' %}
+                        {{ formatAmountBySymbol(journal.amount*-1, journal.currency_symbol, journal.currency_decimal_places) }}
+                    {% else %}
+                        {{ formatAmountBySymbol(journal.amount, journal.currency_symbol, journal.currency_decimal_places) }}
+                    {% endif %}
+                {% endif %}
+
+                {% if auditData[account.id].currency.id == journal.foreign_currency_id %}
+                    {% if account.id == journal.destination_account_id and journal.transaction_type_type == 'Opening balance' %}
+                        {{ formatAmountBySymbol(journal.foreign_amount*-1, journal.foreign_currency_symbol, journal.foreign_currency_decimal_places) }}
+                    {% elseif account.id == journal.destination_account_id and journal.transaction_type_type == 'Deposit' %}
+                        {{ formatAmountBySymbol(journal.foreign_amount*-1, journal.foreign_currency_symbol, journal.foreign_currency_decimal_places) }}
+                    {% elseif account.id == journal.destination_account_id and journal.transaction_type_type == 'Transfer' %}
+                        {{ formatAmountBySymbol(journal.foreign_amount*-1, journal.foreign_currency_symbol, journal.foreign_currency_decimal_places) }}
+                    {% else %}
+                        {{ formatAmountBySymbol(journal.foreign_amount, journal.foreign_currency_symbol, journal.foreign_currency_decimal_places) }}
+                    {% endif %}
+                {% endif %}
+
+            </td>
+
+            <td class="hide-balance_after" style="text-align: right;">
+                {{ formatAmountBySymbol(journal.balance_after, auditData[account.id].currency.symbol, auditData[account.id].currency.decimal_places) }}
+            </td>
+
+            <td class="hide-date">{{ journal.date.formatLocalized(monthAndDayFormat) }}</td>
+
+            <td class="hide-from">
+                <a href="{{ route('accounts.show', [journal.source_account_id]) }}" title="{{ journal.source_account_iban|default(journal.source_account_name) }}">{{ journal.source_account_name }}</a>
+            </td>
+
+            <td class="hide-to">
+                <a href="{{ route('accounts.show', [journal.destination_account_id]) }}" title="{{ journal.destination_account_iban|default(journal.destination_account_name) }}">{{ journal.destination_account_name }}</a>
+            </td>
+            <td class="hide-budget">
+                {% if journal.budget_id %}
+                    <a href="{{ route('budgets.show', [journal.budget_id]) }}" title="{{ journal.budget_name }}">{{ journal.budget_name }}</a>
+                {% endif %}
+            </td>
+            <td class="hide-category">
+                {% if journal.category_id %}
+                    <a href="{{ route('categories.show', [journal.category_id]) }}" title="{{ journal.category_name }}">{{ journal.category_name }}</a>
+                {% endif %}
+            </td>
+            <td class="hide-bill">
+                {% if journal.bill_id %}
+                    <a href="{{ route('bills.show', [journal.bill_id]) }}" title="{{ journal.bill_name }}">{{ journal.bill_name }}</a>
+                {% endif %}
+            </td>
+
+            <!-- new optional fields (2x) -->
+            <td class="hide-create_date">
+                {{ journal.created_at.formatLocalized(dateTimeFormat) }}
+            </td>
+
+            <td class="hide-update_date">
+                {{ journal.updated_at.formatLocalized(dateTimeFormat) }}
+            </td>
+
+            <!-- more new dates -->
+            <td class="hide-interest_date">
+                {% if null != journal.interest_date %}
+                    {{ journal.interest_date.formatLocalized(monthAndDayFormat) }}
+                {% endif %}
+            </td>
+            <td class="hide-book_date">
+                {% if null != journal.book_date %}
+                    {{ journal.book_date.formatLocalized(monthAndDayFormat) }}
+                {% endif %}
+            </td>
+            <td class="hide-process_date">
+                {% if null != journal.process_date %}
+                    {{ journal.process_date.formatLocalized(monthAndDayFormat) }}
+                {% endif %}
+            </td>
+            <td class="hide-due_date">
+                {% if null != journal.due_date %}
+                    {{ journal.due_date.formatLocalized(monthAndDayFormat) }}
+                {% endif %}
+            </td>
+            <td class="hide-payment_date">
+                {% if null != journal.payment_date %}
+                    {{ journal.payment_date.formatLocalized(monthAndDayFormat) }}
+                {% endif %}
+            </td>
+            <td class="hide-invoice_date">
+                {% if null != journal.invoice_date %}
+                    {{ journal.invoice_date.formatLocalized(monthAndDayFormat) }}
+                {% endif %}
+            </td>
+        </tr>
+
+    {% endfor %}
+
+    </tbody>
+</table>
diff --git a/resources/views/reports/partials/operations.twig b/resources/views/reports/partials/operations.twig
new file mode 100644
index 0000000000..70dc36bb87
--- /dev/null
+++ b/resources/views/reports/partials/operations.twig
@@ -0,0 +1,26 @@
+<table class="table table-hover sortable">
+    <thead>
+    <tr>
+        <th data-defaultsign="az">{{'currency'|_}}</th>
+        <th data-defaultsign="_19">{{ 'money_flowing_in'|_ }}</th>
+        <th data-defaultsign="_19">{{ 'money_flowing_out'|_ }}</th>
+        <th data-defaultsign="_19">{{ 'difference'|_ }}</th>
+    </tr>
+    </thead>
+    <tbody>
+    {% for sum in sums %}
+    <tr>
+        <td>{{ sum.currency_name }} ({{ sum.currency_symbol }})</td>
+        <td data-value="{{ sum.in }}">
+            {{ formatAmountBySymbol(sum.in, sum.currency_symbol, sum.currency_decimal_places) }}
+        </td>
+        <td data-value="{{ sum.out }}">
+            {{ formatAmountBySymbol(sum.out, sum.currency_symbol, sum.currency_decimal_places) }}
+        </td>
+        <td data-value="{{ sum.sum }}">
+            {{ formatAmountBySymbol(sum.sum, sum.currency_symbol, sum.currency_decimal_places) }}
+        </td>
+    </tr>
+    {% endfor %}
+    </tbody>
+</table>
diff --git a/resources/views/reports/partials/tags.twig b/resources/views/reports/partials/tags.twig
new file mode 100644
index 0000000000..7a4bc259c2
--- /dev/null
+++ b/resources/views/reports/partials/tags.twig
@@ -0,0 +1,23 @@
+{% if tags|length > 0 %}
+    <div class="box">
+        <div class="box-header with-border">
+            <h3 class="box-title">{{ 'tags'|_ }}</h3>
+        </div>
+        <div class="box-body">
+
+            {% if tags|length == 1 %}
+                {% set multiplier = 12 %}
+            {% else %}
+                {% set multiplier = 30 %}
+            {% endif %}
+
+            {% for tag in tags %}
+                <span title="{{ tag.amount|formatAmountPlain }}"
+                      style="font-size: {{ tag.fontsize * multiplier }}px"
+
+                >&nbsp;<a href="{{ route('tags.show', tag.id) }}">{{ tag.tag }}</a>&nbsp;</span>
+            {% endfor %}
+        </div>
+    </div>
+
+{% endif %}
diff --git a/resources/views/reports/partials/top-transactions.twig b/resources/views/reports/partials/top-transactions.twig
new file mode 100644
index 0000000000..9fcd16a9cd
--- /dev/null
+++ b/resources/views/reports/partials/top-transactions.twig
@@ -0,0 +1,31 @@
+<table class="table table-hover sortable">
+    <thead>
+    <tr>
+        <th data-defaultsign="az">{{ 'account'|_ }}</th>
+        <th data-defaultsign="az">{{ 'description'|_ }}</th>
+        <th data-defaultsign="month">{{ 'date'|_ }}</th>
+        <th style="width:25%;" class="hidden-xs" data-defaultsign="_19">{{ 'amount'|_ }}</th>
+    </tr>
+    </thead>
+    <tbody>
+    {% for transaction in sorted %}
+        <tr>
+            <td data-value="{{ transaction.destination_account_name }}">
+                <a href="{{ route('accounts.show',transaction.destination_account_id) }}">{{ transaction.destination_account_name }}</a>
+            </td>
+            <td data-value="{{ transaction.description }}">{{ transaction.description }}</td>
+            <td data-value="{{ transaction.date.format('Y-m-d') }}">
+                {{ transaction.date.formatLocalized(monthAndDayFormat) }}
+            </td><!-- See reference nr. 3 -->
+            <td style="text-align: right;" data-value="{{ transaction.amount}}"><span
+                        style="margin-right:5px;">
+
+                    {{ formatAmountBySymbol(transaction.amount, transaction.currency_symbol, transaction.currency_decimal_places) }}
+                    {% if null != transaction.foreign_amount %}
+                        ({{ formatAmountBySymbol(transaction.foreign_amount, transaction.foreign_currency_symbol, transaction.foreign_currency_decimal_places) }})
+                    {% endif %}
+                </span></td>
+        </tr>
+    {% endfor %}
+    </tbody>
+</table>
diff --git a/resources/views/reports/tag/month.twig b/resources/views/reports/tag/month.twig
new file mode 100644
index 0000000000..2294bc2e91
--- /dev/null
+++ b/resources/views/reports/tag/month.twig
@@ -0,0 +1,290 @@
+{% extends './v1/layout/default' %}
+
+{% block breadcrumbs %}
+    {{ Breadcrumbs.render(Route.getCurrentRoute.getName, accountIds, tagIds, start, end) }}
+{% endblock %}
+
+{% block content %}
+
+    <div class="row">
+        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'accounts'|_ }}</h3>
+                </div>
+                <div class="box-body table-responsive no-padding" id="accountsHolder">
+                </div>
+                {# loading indicator #}
+                <div class="overlay">
+                    <span class="fa fa-refresh fa-spin"></span>
+                </div>
+            </div>
+        </div>
+        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'tags'|_ }}</h3>
+                </div>
+                <div class="box-body table-responsive no-padding" id="tagsHolder">
+                </div>
+                {# loading indicator #}
+                <div class="overlay">
+                    <span class="fa fa-refresh fa-spin"></span>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'account_per_tag'|_ }}</h3>
+                </div>
+                <div class="box-body table-responsive no-padding" id="accountPerTagHolder">
+                </div>
+                {# loading indicator #}
+                <div class="overlay">
+                    <span class="fa fa-refresh fa-spin"></span>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-lg-6 col-md-6">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'expense_per_tag'|_ }}</h3>
+                </div>
+                <div class="box-body">
+                    <div style="width:100%;margin:0 auto;">
+                        <canvas id="tag-out-pie-chart" style="width:100%;height:250px;" height="250"></canvas>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="col-lg-6 col-md-6">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'income_per_tag'|_ }}</h3>
+                </div>
+                <div class="box-body">
+                    <div style="width:100%;margin:0 auto;">
+                        <canvas id="tag-in-pie-chart" style="width:100%;height:250px;" height="250"></canvas>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-lg-4 col-md-6">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'expense_per_category'|_ }}</h3>
+                </div>
+                <div class="box-body">
+                    <div style="width:100%;margin:0 auto;">
+                        <canvas id="category-out-pie-chart" style="width:100%;height:250px;" height="250"></canvas>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="col-lg-4 col-md-6">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'income_per_category'|_ }}</h3>
+                </div>
+                <div class="box-body">
+                    <div style="width:100%;margin:0 auto;">
+                        <canvas id="category-in-pie-chart" style="width:100%;height:250px;" height="250"></canvas>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="col-lg-4 col-md-6">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'expense_per_budget'|_ }}</h3>
+                </div>
+                <div class="box-body">
+                    <div style="width:100%;margin:0 auto;">
+                        <canvas id="budgets-out-pie-chart" style="width:100%;height:250px;" height="250"></canvas>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-lg-6 col-md-6">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'expense_per_source_account'|_ }}</h3>
+                </div>
+                <div class="box-body">
+                    <div style="width:100%;margin:0 auto;">
+                        <canvas id="source-out-pie-chart" style="width:100%;height:250px;" height="250"></canvas>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="col-lg-6 col-md-6">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'income_per_source_account'|_ }}</h3>
+                </div>
+                <div class="box-body">
+                    <div style="width:100%;margin:0 auto;">
+                        <canvas id="source-in-pie-chart" style="width:100%;height:250px;" height="250"></canvas>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-lg-6 col-md-6">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'expense_per_destination_account'|_ }}</h3>
+                </div>
+                <div class="box-body">
+                    <div style="width:100%;margin:0 auto;">
+                        <canvas id="dest-out-pie-chart" style="width:100%;height:250px;" height="250"></canvas>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="col-lg-6 col-md-6">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'income_per_destination_account'|_ }}</h3>
+                </div>
+                <div class="box-body">
+                    <div style="width:100%;margin:0 auto;">
+                        <canvas id="dest-in-pie-chart" style="width:100%;height:250px;" height="250"></canvas>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    {% for tag in tags %}
+        <div class="row">
+            <div class="col-lg-12">
+                <div class="box main_budget_chart">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ 'income_and_expenses'|_ }} ({{ tag.tag }})</h3>
+                    </div>
+                    <div class="box-body">
+                        <canvas class="main_tag_canvas"
+                                data-url="{{ route('chart.tag.main', [accountIds, tag.id, start.format('Ymd'), end.format('Ymd')]) }}"
+                                id="in-out-chart-{{ tag.id }}" style="width:100%;height:400px;" height="400" width="100%"></canvas>
+                    </div>
+                    <div class="box-footer">
+                        <p class="text-info"><em>{{ 'tag_report_chart_single_tag'|_ }}</em></p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    {% endfor %}
+    <div class="row">
+        <div class="col-lg-6">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'average_spending_per_destination'|_ }}</h3>
+                </div>
+                <div class="box-body table-responsive no-padding" id="avgExpensesHolder">
+                </div>
+                {# loading indicator #}
+                <div class="overlay">
+                    <span class="fa fa-refresh fa-spin"></span>
+                </div>
+            </div>
+        </div>
+        <div class="col-lg-6">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'average_earning_per_source'|_ }}</h3>
+                </div>
+                <div class="box-body table-responsive no-padding" id="avgIncomeHolder">
+                </div>
+                {# loading indicator #}
+                <div class="overlay">
+                    <span class="fa fa-refresh fa-spin"></span>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-lg-6">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'expenses'|_ }} ({{ trans('firefly.topX', {number: listLength}) }})</h3>
+                </div>
+                <div class="box-body table-responsive no-padding" id="topExpensesHolder">
+                </div>
+                {# loading indicator #}
+                <div class="overlay">
+                    <span class="fa fa-refresh fa-spin"></span>
+                </div>
+            </div>
+        </div>
+        <div class="col-lg-6">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'income'|_ }} ({{ trans('firefly.topX', {number: listLength}) }})</h3>
+                </div>
+                <div class="box-body table-responsive no-padding" id="topIncomeHolder">
+                </div>
+                {# loading indicator #}
+                <div class="overlay">
+                    <span class="fa fa-refresh fa-spin"></span>
+                </div>
+            </div>
+        </div>
+    </div>
+
+{% endblock %}
+
+{% block scripts %}
+    <script type="text/javascript" src="v1/js/lib/Chart.bundle.min.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/ff/charts.defaults.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/ff/charts.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/lib/bootstrap-sortable.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+
+    <script type="text/javascript" src="v1/js/ff/reports/all.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" nonce="{{ JS_NONCE }}">
+        // to report another URL:
+        var startDate = '{{ start.format('Ymd') }}';
+        var endDate = '{{ end.format('Ymd') }}';
+        var accountIds = '{{ accountIds }}';
+        var tagIds = '{{ tagIds }}';
+
+        // html block URI's:
+
+        var accountsUri = '{{ route('report-data.tag.accounts', [accountIds, tagIds, start.format('Ymd'), end.format('Ymd')]) }}';
+        var tagsUri = '{{ route('report-data.tag.tags', [accountIds, tagIds, start.format('Ymd'), end.format('Ymd')]) }}';
+        var accountPerTagUri = '{{ route('report-data.tag.account-per-tag', [accountIds, tagIds, start.format('Ymd'), end.format('Ymd')]) }}';
+
+        // pie charts:
+        var tagOutUri = '{{ route('chart.tag.tag-expense', [accountIds, tagIds, start.format('Ymd'), end.format('Ymd')]) }}';
+        var tagInUri = '{{ route('chart.tag.tag-income', [accountIds, tagIds, start.format('Ymd'), end.format('Ymd')]) }}';
+        var categoryOutUri = '{{ route('chart.tag.category-expense', [accountIds, tagIds, start.format('Ymd'), end.format('Ymd')]) }}';
+        var categoryInUri = '{{ route('chart.tag.category-income', [accountIds, tagIds, start.format('Ymd'), end.format('Ymd')]) }}';
+        var budgetsOutUri = '{{ route('chart.tag.budget-expense', [accountIds, tagIds, start.format('Ymd'), end.format('Ymd')]) }}';
+        var sourceOutUri = '{{ route('chart.tag.source-expense', [accountIds, tagIds, start.format('Ymd'), end.format('Ymd')]) }}';
+        var sourceInUri = '{{ route('chart.tag.source-income', [accountIds, tagIds, start.format('Ymd'), end.format('Ymd')]) }}';
+        var destOutUri = '{{ route('chart.tag.dest-expense', [accountIds, tagIds, start.format('Ymd'), end.format('Ymd')]) }}';
+        var destInUri = '{{ route('chart.tag.dest-income', [accountIds, tagIds, start.format('Ymd'), end.format('Ymd')]) }}';
+
+        var avgExpensesUri = '{{ route('report-data.tag.avg-expenses', [accountIds, tagIds, start.format('Ymd'), end.format('Ymd')]) }}';
+        var topExpensesUri = '{{ route('report-data.tag.top-expenses', [accountIds, tagIds, start.format('Ymd'), end.format('Ymd')]) }}';
+        var avgIncomeUri = '{{ route('report-data.tag.avg-income', [accountIds, tagIds, start.format('Ymd'), end.format('Ymd')]) }}';
+        var topIncomeUri = '{{ route('report-data.tag.top-income', [accountIds, tagIds, start.format('Ymd'), end.format('Ymd')]) }}';
+
+    </script>
+    <script type="text/javascript" src="v1/js/ff/reports/tag/month.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+
+{% endblock %}
+
+{% block styles %}
+    <link rel="stylesheet" href="v1/css/bootstrap-sortable.css?v={{ FF_VERSION }}" type="text/css" media="all" nonce="{{ JS_NONCE }}">
+{% endblock %}
diff --git a/resources/views/reports/tag/partials/account-per-tag.twig b/resources/views/reports/tag/partials/account-per-tag.twig
new file mode 100644
index 0000000000..871cf05d71
--- /dev/null
+++ b/resources/views/reports/tag/partials/account-per-tag.twig
@@ -0,0 +1,40 @@
+<table class="table table-hover sortable">
+    <thead>
+    <tr>
+        <th data-defaultsign="az">{{ 'name'|_ }}</th>
+        {% for tag in tags %}
+            <th data-defaultsign="_19" style="text-align: right;">{{ tag.tag }}</th>
+        {% endfor %}
+    </tr>
+    </thead>
+    <tbody>
+    {% for account in report %}
+        {% for currency in account.currencies %}
+            <tr>
+                <td data-value="{{ account.name }} ({{ currency.currency_name }})">
+                    <a href="{{ route('accounts.show', account.id) }}" title="{{ account.iban }}">{{ account.name }} ({{ currency.currency_name }})</a>
+                </td>
+                {% for tag in tags %}
+                    <td style="text-align: right;">
+                        {% if currency.tags[tag.id] %}
+                            <span title="{{ 'earned'|_ }}: {{ formatAmountBySymbol(currency.tags[tag.id].earned, currency.currency_symbol, currency.currency_decimal_places, false) }}, {{ 'spent'|_ }}: {{ formatAmountBySymbol(currency.tags[tag.id].spent, currency.currency_symbol, currency.currency_decimal_places, false) }}"
+                            {{ formatAmountBySymbol(currency.tags[tag.id].sum, currency.currency_symbol, currency.currency_decimal_places) }}
+                        {% else %}
+                            &mdash;
+                        {% endif %}
+                    </td>
+                {% endfor %}
+            </tr>
+        {% endfor %}
+    {% endfor %}
+    </tbody>
+    <tfoot>
+    <tr>
+        <td colspan="{{ 1 + tags|length }}">
+            <p class="text-info">
+                <em>{{ 'tag_report_expenses_listed_once'|_ }}</em>
+            </p>
+        </td>
+    </tr>
+    </tfoot>
+</table>
diff --git a/resources/views/reports/tag/partials/accounts.twig b/resources/views/reports/tag/partials/accounts.twig
new file mode 100644
index 0000000000..4e9ce9e9a2
--- /dev/null
+++ b/resources/views/reports/tag/partials/accounts.twig
@@ -0,0 +1,46 @@
+<table class="table table-hover sortable">
+    <thead>
+    <tr>
+        <th data-defaultsign="az">{{ 'name'|_ }}</th>
+        <th data-defaultsign="_19" style="text-align: right;">{{ 'spent'|_ }}</th>
+        <th data-defaultsign="_19" style="text-align: right;">{{ 'earned'|_ }}</th>
+        <th data-defaultsign="_19" style="text-align: right;">{{ 'sum'|_ }}</th>
+    </tr>
+    </thead>
+    <tbody>
+    {% for account in report %}
+        {% for currency in account.currencies %}
+            <tr>
+                <td data-value="{{ account.name }} ({{ currency.currency_name }})">
+                    <a href="{{ route('accounts.show', account.id) }}" title="{{ account.iban }}">{{ account.name }} ({{ currency.currency_name }})</a>
+                </td>
+                <td data-value="{{ currency.spent }}" style="text-align: right;">
+                    {{ formatAmountBySymbol(currency.spent, currency.currency_symbol, currency.currency_decimal_places) }}
+                </td>
+                <td data-value="{{ currency.earned }}" style="text-align: right;">
+                    {{ formatAmountBySymbol(currency.earned, currency.currency_symbol, currency.currency_decimal_places) }}
+                </td>
+                <td data-value="{{ currency.sum }}" style="text-align: right;">
+                    {{ formatAmountBySymbol(currency.sum, currency.currency_symbol, currency.currency_decimal_places) }}
+                </td>
+            </tr>
+        {% endfor %}
+    {% endfor %}
+    </tbody>
+    <tfoot>
+    {% for sum in sums %}
+        <tr>
+            <td>{{ 'sum'|_ }} ({{ sum.currency_name }})</td>
+            <td style="text-align: right;">
+                {{ formatAmountBySymbol(sum.spent_sum, sum.currency_symbol, sum.currency_decimal_places) }}
+            </td>
+            <td style="text-align: right;">
+                {{ formatAmountBySymbol(sum.earned_sum, sum.currency_symbol, sum.currency_decimal_places) }}
+            </td>
+            <td style="text-align: right;">
+                {{ formatAmountBySymbol(sum.total_sum, sum.currency_symbol, sum.currency_decimal_places) }}
+            </td>
+        </tr>
+    {% endfor %}
+    </tfoot>
+</table>
diff --git a/resources/views/reports/tag/partials/avg-expenses.twig b/resources/views/reports/tag/partials/avg-expenses.twig
new file mode 100644
index 0000000000..b34a2ecc63
--- /dev/null
+++ b/resources/views/reports/tag/partials/avg-expenses.twig
@@ -0,0 +1,46 @@
+<table class="table table-hover sortable">
+    <thead>
+    <tr>
+        <th data-defaultsign="az">{{ 'account'|_ }}</th>
+        <th data-defaultsign="_19" style="text-align: right;">{{ 'spent_average'|_ }}</th>
+        <th data-defaultsign="_19" style="text-align: right;">{{ 'total'|_ }}</th>
+        <th data-defaultsign="_19">{{ 'transaction_count'|_ }}</th>
+    </tr>
+    </thead>
+    <tbody>
+    {% for row in result %}
+        {% if loop.index > listLength %}
+            <tr class="overListLength">
+        {% else %}
+            <tr>
+        {% endif %}
+        <td data-sortable="false">
+            <a href="{{ route('accounts.show', row.destination_account_id) }}">
+                {{ row.destination_account_name }}
+            </a>
+        </td>
+        <td data-value="{{ row.avg }}" style="text-align: right;">
+            {{ formatAmountBySymbol(row.avg, row.currency_symbol, row.currency_decimal_places) }}
+        </td>
+
+        <td data-value="{{ row.sum }}" style="text-align: right;">
+            {{ formatAmountBySymbol(row.sum, row.currency_symbol, row.currency_decimal_places) }}
+        </td>
+
+        <td data-value="{{ row.transactions }}">
+            {{ row.transactions }}
+        </td>
+
+        </tr>
+    {% endfor %}
+    </tbody>
+    <tfoot>
+    {% if result|length > listLength %}
+        <tr>
+            <td colspan="5" class="active">
+                <a href="#" class="listLengthTrigger">{{ trans('firefly.show_full_list',{number:incomeTopLength}) }}</a>
+            </td>
+        </tr>
+    {% endif %}
+    </tfoot>
+</table>
diff --git a/resources/views/reports/tag/partials/avg-income.twig b/resources/views/reports/tag/partials/avg-income.twig
new file mode 100644
index 0000000000..b859f13a09
--- /dev/null
+++ b/resources/views/reports/tag/partials/avg-income.twig
@@ -0,0 +1,46 @@
+<table class="table table-hover sortable">
+    <thead>
+    <tr>
+        <th data-defaultsign="az">{{ 'account'|_ }}</th>
+        <th data-defaultsign="_19" style="text-align: right;">{{ 'spent_average'|_ }}</th>
+        <th data-defaultsign="_19" style="text-align: right;">{{ 'total'|_ }}</th>
+        <th data-defaultsign="_19">{{ 'transaction_count'|_ }}</th>
+    </tr>
+    </thead>
+    <tbody>
+    {% for row in result %}
+        {% if loop.index > listLength %}
+            <tr class="overListLength">
+        {% else %}
+            <tr>
+        {% endif %}
+        <td data-sortable="false">
+            <a href="{{ route('accounts.show', row.source_account_id) }}">
+                {{ row.source_account_name }}
+            </a>
+        </td>
+        <td data-value="{{ row.avg }}" style="text-align: right;">
+            {{ formatAmountBySymbol(row.avg, row.currency_symbol, row.currency_decimal_places) }}
+        </td>
+
+        <td data-value="{{ row.sum }}" style="text-align: right;">
+            {{ formatAmountBySymbol(row.sum, row.currency_symbol, row.currency_decimal_places) }}
+        </td>
+
+        <td data-value="{{ row.transactions }}">
+            {{ row.transactions }}
+        </td>
+
+        </tr>
+    {% endfor %}
+    </tbody>
+    <tfoot>
+    {% if result|length > listLength %}
+        <tr>
+            <td colspan="5" class="active">
+                <a href="#" class="listLengthTrigger">{{ trans('firefly.show_full_list',{number:incomeTopLength}) }}</a>
+            </td>
+        </tr>
+    {% endif %}
+    </tfoot>
+</table>
diff --git a/resources/views/reports/tag/partials/tags.twig b/resources/views/reports/tag/partials/tags.twig
new file mode 100644
index 0000000000..fb12820f3d
--- /dev/null
+++ b/resources/views/reports/tag/partials/tags.twig
@@ -0,0 +1,64 @@
+<table class="table table-hover sortable">
+    <thead>
+    <tr>
+        <th data-defaultsign="az">{{ 'name'|_ }}</th>
+        <th data-defaultsign="_19" style="text-align: right;">{{ 'spent'|_ }}</th>
+        <th data-defaultsign="_19" style="text-align: right;">{{ 'earned'|_ }}</th>
+        <th data-defaultsign="_19" style="text-align: right;">{{ 'sum'|_ }}</th>
+    </tr>
+    </thead>
+    <tbody>
+    {% for tag in report %}
+        {% if tag.currencies|length == 0 %}
+            <tr>
+                <td data-value="{{ tag.name }}">
+                    <a href="{{ route('tags.show', tag.id) }}" title="{{ tag.name }}">{{ tag.name }}</a>
+                </td>
+                <td style="text-align: right;">&mdash;</td>
+                <td style="text-align: right;">&mdash;</td>
+                <td style="text-align: right;">&mdash;</td>
+            </tr>
+        {% endif %}
+        {% for currency in tag.currencies %}
+            <tr>
+                <td data-value="{{ tag.name }} ({{ currency.currency_name }})">
+                    <a href="{{ route('tags.show', tag.id) }}" title="{{ tag.name }}">{{ tag.name }} ({{ currency.currency_name }})</a>
+                </td>
+                <td data-value="{{ currency.spent }}" style="text-align: right;">
+                    {{ formatAmountBySymbol(currency.spent, currency.currency_symbol, currency.currency_decimal_places) }}
+                </td>
+                <td data-value="{{ currency.earned }}" style="text-align: right;">
+                    {{ formatAmountBySymbol(currency.earned, currency.currency_symbol, currency.currency_decimal_places) }}
+                </td>
+                <td data-value="{{ currency.sum }}" style="text-align: right;">
+                    {{ formatAmountBySymbol(currency.sum, currency.currency_symbol, currency.currency_decimal_places) }}
+                </td>
+            </tr>
+        {% endfor %}
+    {% endfor %}
+    </tbody>
+    <tfoot>
+    {% for sum in sums %}
+        <tr>
+            <td>{{ 'sum'|_ }} ({{ sum.currency_name }})</td>
+            <td style="text-align: right;">
+                {{ formatAmountBySymbol(sum.spent_sum, sum.currency_symbol, sum.currency_decimal_places) }}
+            </td>
+            <td style="text-align: right;">
+                {{ formatAmountBySymbol(sum.earned_sum, sum.currency_symbol, sum.currency_decimal_places) }}
+            </td>
+            <td style="text-align: right;">
+                {{ formatAmountBySymbol(sum.total_sum, sum.currency_symbol, sum.currency_decimal_places) }}
+            </td>
+        </tr>
+    {% endfor %}
+    <tr>
+        <td colspan="4">
+            <p class="text-info">
+                <em>{{ 'tag_report_expenses_listed_once'|_ }}</em>
+            </p>
+        </td>
+    </tr>
+    </tfoot>
+</table>
+
diff --git a/resources/views/reports/tag/partials/top-expenses.twig b/resources/views/reports/tag/partials/top-expenses.twig
new file mode 100644
index 0000000000..1e88ec350b
--- /dev/null
+++ b/resources/views/reports/tag/partials/top-expenses.twig
@@ -0,0 +1,54 @@
+<table class="table table-hover sortable">
+    <thead>
+    <tr>
+        <th data-defaultsort="disabled">{{ 'description'|_ }}</th>
+        <th data-defaultsign="month">{{ 'date'|_ }}</th>
+        <th data-defaultsign="az">{{ 'account'|_ }}</th>
+        <th data-defaultsign="az">{{ 'tag'|_ }}</th>
+        <th data-defaultsign="_19" style="text-align: right;">{{ 'amount'|_ }}</th>
+    </tr>
+    </thead>
+    <tbody>
+    {% for row in result %}
+        {% if loop.index > listLength %}
+            <tr class="overListLength">
+        {% else %}
+            <tr>
+        {% endif %}
+        <td data-sortable="false">
+            <a href="{{ route('transactions.show', row.transaction_group_id) }}">
+                {{ row.description }}
+            </a>
+        </td>
+        <td data-value="{{ row.date_sort }}">
+            {{ row.date }}
+        </td>
+
+        <td data-sortable="false">
+            <a href="{{ route('accounts.show', row.destination_account_id) }}">
+                {{ row.destination_account_name }}
+            </a>
+        </td>
+        <td data-sortable="false">
+            <a href="{{ route('tags.show', row.tag_id) }}">
+                {{ row.tag_name }}
+            </a>
+        </td>
+
+        <td data-value="{{ row.amount }}" style="text-align: right;">
+            {{ formatAmountBySymbol(row.amount, row.currency_symbol, row.currency_decimal_places) }}
+        </td>
+
+        </tr>
+    {% endfor %}
+    </tbody>
+    <tfoot>
+    {% if result|length > listLength %}
+        <tr>
+            <td colspan="5" class="active">
+                <a href="#" class="listLengthTrigger">{{ trans('firefly.show_full_list',{number:incomeTopLength}) }}</a>
+            </td>
+        </tr>
+    {% endif %}
+    </tfoot>
+</table>
diff --git a/resources/views/reports/tag/partials/top-income.twig b/resources/views/reports/tag/partials/top-income.twig
new file mode 100644
index 0000000000..12dc972911
--- /dev/null
+++ b/resources/views/reports/tag/partials/top-income.twig
@@ -0,0 +1,54 @@
+<table class="table table-hover sortable">
+    <thead>
+    <tr>
+        <th data-defaultsort="disabled">{{ 'description'|_ }}</th>
+        <th data-defaultsign="month">{{ 'date'|_ }}</th>
+        <th data-defaultsign="az">{{ 'account'|_ }}</th>
+        <th data-defaultsign="az">{{ 'tag'|_ }}</th>
+        <th data-defaultsign="_19" style="text-align: right;">{{ 'amount'|_ }}</th>
+    </tr>
+    </thead>
+    <tbody>
+    {% for row in result %}
+        {% if loop.index > listLength %}
+            <tr class="overListLength">
+        {% else %}
+            <tr>
+        {% endif %}
+        <td data-sortable="false">
+            <a href="{{ route('transactions.show', row.transaction_group_id) }}">
+                {{ row.description }}
+            </a>
+        </td>
+        <td data-value="{{ row.date_sort }}">
+            {{ row.date }}
+        </td>
+
+        <td data-sortable="false">
+            <a href="{{ route('accounts.show', row.source_account_id) }}">
+                {{ row.source_account_name }}
+            </a>
+        </td>
+        <td data-sortable="false">
+            <a href="{{ route('tags.show', row.tag_id) }}">
+                {{ row.tag_name }}
+            </a>
+        </td>
+
+        <td data-value="{{ row.amount }}" style="text-align: right;">
+            {{ formatAmountBySymbol(row.amount, row.currency_symbol, row.currency_decimal_places) }}
+        </td>
+
+        </tr>
+    {% endfor %}
+    </tbody>
+    <tfoot>
+    {% if result|length > listLength %}
+        <tr>
+            <td colspan="5" class="active">
+                <a href="#" class="listLengthTrigger">{{ trans('firefly.show_full_list',{number:incomeTopLength}) }}</a>
+            </td>
+        </tr>
+    {% endif %}
+    </tfoot>
+</table>
diff --git a/resources/views/rules/index.twig b/resources/views/rules/index.twig
new file mode 100644
index 0000000000..4e66394ae8
--- /dev/null
+++ b/resources/views/rules/index.twig
@@ -0,0 +1,204 @@
+{% extends './v1/layout/default' %}
+{% block breadcrumbs %}
+    {{ Breadcrumbs.render(Route.getCurrentRoute.getName) }}
+{% endblock %}
+{% block content %}
+
+    <div class="row">
+        <div class="col-lg-12 col-md-12 col-sm-12">
+            <p>
+                <a href="{{ route('rule-groups.create') }}" id="new_rule_group" class="btn btn-success">{{ 'new_rule_group'|_ }}</a>
+            </p>
+        </div>
+    </div>
+
+    {% if ruleGroups|length == 1 and ruleGroups[0].rules.count() == 0 %}
+    {% include 'v1.partials.empty' with {objectType: 'default', type: 'rules',route: route('rules.create')} %}
+    {# make FF ignore demo for now. #}
+    {% set shownDemo = true %}
+    {% endif %}
+
+    {% for ruleGroup in ruleGroups %}
+        <div class="row">
+            <div class="col-lg-12 col-md-12 col-sm-12">
+                <div class="box rules-box" data-group="{{ ruleGroup.id }}">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">
+                            {% if ruleGroup.active %}
+                                {{ ruleGroup.title }}
+                            {% else %}
+                                <s>{{ ruleGroup.title }}</s> ({{ 'inactive'|_|lower }})
+                            {% endif %}
+                        </h3>
+
+
+                        <div class="box-tools pull-right">
+                            <div class="btn-group">
+                                <button type="button" class="btn btn-box-tool" data-widget="collapse"><span class="fa fa-minus"></span>
+                                </button>
+                                <button class="btn btn-box-tool dropdown-toggle" data-toggle="dropdown"><span
+                                            class="fa fa-ellipsis-v"></span></button>
+                                <ul class="dropdown-menu" role="menu">
+                                    <li><a href="{{ route('rule-groups.edit',ruleGroup.id) }}"><span class="fa fa-fw fa-pencil"></span> {{ 'edit'|_ }}</a></li>
+                                    <li><a href="{{ route('rule-groups.delete',ruleGroup.id) }}"><span class="fa fa-fw fa-trash"></span> {{ 'delete'|_ }}</a></li>
+                                    <li><a href="{{ route('rule-groups.select-transactions',ruleGroup.id) }}"><span
+                                                    class="fa fa-fw fa-power-off"></span> {{ trans('firefly.apply_rule_group_selection', {title: ruleGroup.title}) }}
+                                        </a></li>
+                                    {% if ruleGroup.order > 1 %}
+                                        <li><a href="#" class="move-group" data-direction="up" data-id="{{ ruleGroup.id }}"><span
+                                                        class="fa fa-fw fa-arrow-up"></span> {{ 'move_rule_group_up'|_ }}</a></li>
+                                    {% endif %}
+                                    {% if ruleGroup.order < ruleGroups|length %}
+                                        <li><a href="#" class="move-group" data-direction="down" data-id="{{ ruleGroup.id }}"><span
+                                                        class="fa fa-fw fa-arrow-down"></span> {{ 'move_rule_group_down'|_ }}
+                                            </a></li>
+                                    {% endif %}
+                                </ul>
+                            </div>
+                        </div>
+
+                    </div>
+                    <div class="box-body">
+                        <p>
+                            <em>{{ ruleGroup.description }}</em>
+                        </p>
+
+                        {% if ruleGroup.rules.count() > 0 %}
+                            <table class="table table-hover table-striped group-rules">
+                                <thead>
+                                <tr>
+                                    <th style="width:5%;">&nbsp;</th>
+                                    <th style="width:10%;">&nbsp;</th>
+                                    <th style="width:10%;">&nbsp;</th>
+                                    <th style="width:25%;">{{ 'rule_name'|_ }}</th>
+                                    <th style="width:25%;" class="hidden-xs">{{ 'rule_triggers'|_ }}</th>
+                                    <th style="width:25%;" class="hidden-xs">{{ 'rule_actions'|_ }}</th>
+                                </tr>
+                                </thead>
+                                <tbody class="rule-connected-list">
+                                {% for rule in ruleGroup.rules %}
+                                    <tr class="single-rule" data-order="{{ rule.order }}"  data-id="{{ rule.id }}" data-group-id="{{ ruleGroup.id }}" data-position="{{ loop.index0 }}">
+                                        <td>
+                                            <div class="btn-group btn-group-xs prio_buttons">
+                                                <span class="fa fa-fw fa-bars rule-handle"></span>
+                                            </div>
+                                        </td>
+                                        <td>
+                                            <div class="btn-group btn-group-xs edit_buttons">
+                                                <a title="{{ 'edit'|_ }}" href="{{ route('rules.edit', rule.id) }}"
+                                                   class="btn btn-default"><span
+                                                            class="fa fa-fw fa-pencil"></span></a>
+                                                <a title="{{ 'delete'|_ }}"
+                                                   href="{{ route('rules.delete', rule.id) }}"
+                                                   class="btn btn-danger"><span
+                                                            class="fa fa-fw fa-trash"></span></a>
+                                            </div>
+                                        </td>
+                                        <td>
+                                            <div class="btn-group btn-group-xs test_buttons">
+                                                {% if rule.active %}
+                                                    {# show which transactions would match #}
+                                                    <a href="{{ route('rules.search',rule.id) }}" class="btn btn-default {% if false == rule.strict %}test_rule_triggers{% endif %}" data-id="{{ rule.id }}" title="{{ 'test_rule_triggers'|_ }}"><span data-id="{{ rule.id }}" class="fa fa-fw fa-flask"></span></a>
+
+                                                    {# actually execute rule #}
+                                                <a href="{{ route('rules.select-transactions',rule.id) }}" class="btn btn-default" title=" {{ trans('firefly.apply_rule_selection', {title: rule.title}) }}"><span class="fa fa-fw fa-power-off "></span></a>
+                                                {% endif %}
+
+                                                {# duplicate rule #}
+                                                <a href="#" class="btn btn-default duplicate-rule" data-id="{{ rule.id }}" title=" {{ trans('firefly.duplicate_rule', {title: rule.title}) }}"><span class="fa fa-fw fa-copy"></span></a>
+                                            </div>
+                                        </td>
+                                        <td class="markdown">
+                                            {% if rule.active %}
+                                                {{ rule.title }}
+                                            {% else %}
+                                                <s>{{ rule.title }}</s> ({{ 'inactive'|_|lower }})
+                                            {% endif %}
+                                            {% if rule.stop_processing %}
+                                                <span class="fa fa-stop-circle-o"></span>
+                                            {% endif %}
+
+                                            {% if rule.description != "" %}
+                                                <small class="hidden-xs"
+                                                        {% if not rule.active %}
+                                                            class="text-muted"
+                                                        {% endif %}
+                                                ><br/>{{ rule.description|default('')|markdown }}</small>
+                                            {% endif %}
+                                            <small><br />{% if rule.strict %}<span class="text-danger">{{ 'rule_is_strict'|_ }}</span>{% else %}<span class="text-success">{{ 'rule_is_not_strict'|_ }}</span>{% endif %}</small>
+                                        </td>
+                                        <td class="hidden-xs">
+                                            {% if rule.ruleTriggers.count() > 0 %}
+                                                <ul class="small" data-id="{{ rule.id }}">
+                                                    {% for trigger in rule.ruleTriggers %}
+                                                        {% if trigger.trigger_type != "user_action" %}
+                                                            <li
+                                                                    {% if not rule.active %}
+                                                                        class="text-muted"
+                                                                    {% endif %}
+                                                                    data-id="{{ trigger.id }}">
+                                                                {{ trans(('firefly.rule_trigger_' ~ getRootSearchOperator(trigger.trigger_type)), {trigger_value: trigger.trigger_value}) }}
+
+                                                                {% if trigger.stop_processing %}
+                                                                    <span class="fa fa-stop-circle-o"></span>
+                                                                {% endif %}
+                                                            </li>
+                                                        {% endif %}
+                                                    {% endfor %}
+                                                </ul>
+                                            {% endif %}
+                                        </td>
+                                        <td class="hidden-xs">
+                                            {% if rule.ruleActions.count() > 0 %}
+                                                <ul class="small" data-id="{{ rule.id }}">
+                                                    {% for action in rule.ruleActions %}
+                                                        <li
+                                                                {% if not rule.active %}
+                                                                    class="text-muted"
+                                                                {% endif %}
+                                                                data-id="{{ action.id }}">{{ trans(('firefly.rule_action_' ~ action.action_type), {action_value: action.action_value}) }}
+                                                            {% if action.stop_processing %}
+                                                                <span class="fa fa-stop-circle-o"></span>
+                                                            {% endif %}
+                                                        </li>
+                                                    {% endfor %}
+                                                </ul>
+                                            {% endif %}
+                                        </td>
+                                    </tr>
+                                {% endfor %}
+                                </tbody>
+                            </table>
+                        {% else %}
+                            <p>
+                                <em>{{ 'no_rules_in_group'|_ }}</em>
+                            </p>
+                        {% endif %}
+                        <p>
+                            <br/>
+                            <a href="{{ route('rules.create', ruleGroup.id) }}"
+                               class="btn btn-success new_rule">{{ 'new_rule'|_ }}</a>
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    {% endfor %}
+
+    {% include 'v1.rules.partials.test-trigger-modal' %}
+
+    <div class="row">
+        <div class="col-lg-12 col-md-12 col-sm-12">
+            <a href="{{ route('rule-groups.create') }}" class="btn btn-success">{{ 'new_rule_group'|_ }}</a>
+        </div>
+    </div>
+
+{% endblock %}
+{% block scripts %}
+    <script type="text/javascript" nonce="{{ JS_NONCE }}">
+        var moveRuleGroupUrl = '{{ route('rule-groups.move') }}';
+        var duplicateRuleUrl = '{{ route('rules.duplicate') }}';
+    </script>
+    <script type="text/javascript" src="v1/js/lib/jquery-ui.min.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/ff/rules/index.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+{% endblock %}
diff --git a/resources/views/rules/partials/action.twig b/resources/views/rules/partials/action.twig
new file mode 100644
index 0000000000..981d2a2e61
--- /dev/null
+++ b/resources/views/rules/partials/action.twig
@@ -0,0 +1,32 @@
+<tr data-count="{{ count }}" class="rule-action-holder">
+    <td style="width:40px;">
+        <a href="#" class="btn btn-danger btn-sm remove-action"><span class="fa fa-trash"></span></a>
+    </td>
+    <td style="width:30%;">
+{# See reference nr. 2 #} 
+        <select name="actions[{{ count }}][type]" class="form-control">
+            {% for key,type in allRuleActions() %}
+                <option value="{{ key }}" label="{{ type }}" {% if key == oldAction %} selected{% endif %}>{{ type }}</option>
+            {% endfor %}
+        </select>
+    </td>
+    <td style="position: relative;">
+
+        <input autocomplete="off" type="text" value="{{ oldValue }}" name="actions[{{ count }}][value]"
+               class="form-control">
+        {% if errors.has('actions.'~count~'.value') %}
+            <p class="text-danger">
+                {{ errors.first('actions.'~count~'.value') }}
+            </p>
+        {% endif %}
+    </td>
+    <td style="width:20%;">
+        <div class="checkbox">
+            <label>
+                <input type="checkbox" name="actions[{{ count }}][stop_processing]" value="1"
+                       {% if oldChecked %}checked{% endif %}
+                />
+            </label>
+        </div>
+    </td>
+</tr>
diff --git a/resources/views/rules/partials/test-trigger-modal.twig b/resources/views/rules/partials/test-trigger-modal.twig
new file mode 100644
index 0000000000..11b03b288a
--- /dev/null
+++ b/resources/views/rules/partials/test-trigger-modal.twig
@@ -0,0 +1,21 @@
+<div class="modal fade" id="testTriggerModal" tabindex="-1" role="dialog" aria-labelledby="testTriggerLabel">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span>&times;</span></button>
+                <h4 class="modal-title" id="testTriggerLabel">{{ 'test_rule_triggers'|_ }}</h4>
+            </div>
+            <div class="modal-body">
+                <div class="transaction-warning alert alert-warning">
+                    <h4><span class="icon fa fa-warning"></span> {{ 'flash_warning'|_ }}</h4>
+                    <span class="warning-contents"></span>
+                </div>
+                <div class="transactions-list">
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-default" data-dismiss="modal">{{ 'close'|_ }}</button>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/resources/views/rules/partials/trigger.twig b/resources/views/rules/partials/trigger.twig
new file mode 100644
index 0000000000..88758b9e98
--- /dev/null
+++ b/resources/views/rules/partials/trigger.twig
@@ -0,0 +1,34 @@
+<tr data-count="{{ count }}" class="rule-trigger-holder">
+    <td style="width:40px;">
+        <a href="#" class="btn btn-danger btn-sm remove-trigger"><span class="fa fa-trash"></span></a>
+    </td>
+    <td style="width:30%;">
+        <select name="triggers[{{ count }}][type]" class="form-control">
+            {% for key,type in triggers %}
+                <option value="{{ key }}" label="{{ type }}"
+                        {% if key == oldTrigger %}
+                            selected
+                        {% endif %}
+                >{{ type }}</option>
+            {% endfor %}
+        </select>
+    </td>
+    <td>
+        <input autocomplete="off" type="text" value="{{ oldValue }}" name="triggers[{{ count }}][value]"
+               class="form-control">
+        {% if errors.has('triggers.'~count~'.value') %}
+            <p class="text-danger">
+                {{ errors.first('triggers.'~count~'.value') }}
+            </p>
+        {% endif %}
+    </td>
+    <td style="width:20%;">
+        <div class="checkbox">
+            <label>
+                <input type="checkbox" name="triggers[{{ count }}][stop_processing]" value="1"
+                       {% if oldChecked %}checked{% endif %}
+                />
+            </label>
+        </div>
+    </td>
+</tr>
diff --git a/resources/views/rules/rule-group/create.twig b/resources/views/rules/rule-group/create.twig
new file mode 100644
index 0000000000..019a7cb858
--- /dev/null
+++ b/resources/views/rules/rule-group/create.twig
@@ -0,0 +1,56 @@
+{% extends './v1/layout/default' %}
+
+{% block breadcrumbs %}
+    {{ Breadcrumbs.render(Route.getCurrentRoute.getName) }}
+{% endblock %}
+
+{% block content %}
+    <form method="POST" action="{{ route('rule-groups.store') }}" accept-charset="UTF-8" class="form-horizontal" id="store">
+        <input name="_token" type="hidden" value="{{ csrf_token() }}">
+        <div class="row">
+            <div class="col-lg-6 col-md-6 col-sm-12">
+                <div class="box box-primary">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ 'mandatoryFields'|_ }}</h3>
+                    </div>
+                    <div class="box-body">
+                        {{ ExpandedForm.text('title') }}
+                    </div>
+                </div>
+            </div>
+            <div class="col-lg-6 col-md-6 col-sm-12">
+
+                {# optional fields #}
+                <div class="box">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ 'optionalFields'|_ }}</h3>
+                    </div>
+                    <div class="box-body">
+                        {{ ExpandedForm.textarea('description') }}
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
+                {# panel for options #}
+                <div class="box">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ 'options'|_ }}</h3>
+                    </div>
+                    <div class="box-body">
+                        {{ ExpandedForm.optionsList('create','rule-group') }}
+                    </div>
+                    <div class="box-footer">
+                        <button type="submit" class="btn pull-right btn-success">{{ 'store_new_rule_group'|_ }}</button>
+                    </div>
+                </div>
+
+            </div>
+
+        </div>
+    </form>
+{% endblock %}
+{% block scripts %}
+    <script type="text/javascript" src="v1/js/ff/rule-groups/create.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+{% endblock %}
diff --git a/resources/views/rules/rule-group/delete.twig b/resources/views/rules/rule-group/delete.twig
new file mode 100644
index 0000000000..ae74987cdf
--- /dev/null
+++ b/resources/views/rules/rule-group/delete.twig
@@ -0,0 +1,54 @@
+{% extends './v1/layout/default' %}
+
+{% block breadcrumbs %}
+    {{ Breadcrumbs.render(Route.getCurrentRoute.getName, ruleGroup) }}
+{% endblock %}
+
+{% block content %}
+
+    <form method="POST" action="{{ route('rule-groups.destroy',ruleGroup.id) }}" accept-charset="UTF-8" class="form-horizontal" id="destroy">
+        <input name="_token" type="hidden" value="{{ csrf_token() }}">
+        <div class="row">
+            <div class="col-lg-6 col-lg-offset-3 col-md-12 col-sm-12">
+                <div class="box box-danger">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ trans('form.delete_rule_group', {'title': ruleGroup.title}) }}</h3>
+                    </div>
+                    <div class="box-body">
+                        <p class="text-danger">
+                            {{ trans('form.permDeleteWarning') }}
+                        </p>
+
+                        <p>
+                            {{ trans('form.ruleGroup_areYouSure', {'title': ruleGroup.title}) }}
+                        </p>
+
+
+                        {% if ruleGroup.rules|length > 0 %}
+                            <p class="text-danger">
+                                {{ trans_choice('form.also_delete_rules', ruleGroup.rules|length) }}
+                            </p>
+
+                            <p class="text-success">
+                                {{ trans_choice('firefly.save_rules_by_moving', ruleGroup.rules|length) }}
+                            </p>
+
+                            <p>
+                                {{ RuleForm.ruleGroupListWithEmpty('move_rules_before_delete',null, {'hidden': ruleGroup.id}) }}
+                            </p>
+                        {% else %}
+                            <input type="hidden" name="move_rules_before_delete" value="0"/>
+                        {% endif %}
+
+                    </div>
+                    <div class="box-footer">
+                        <input type="submit" name="submit" value="{{ trans('form.deletePermanently') }}" class="btn btn-danger pull-right"/>
+                        <a href="{{ URL.previous() }}" class="btn-default btn">{{ trans('form.cancel') }}</a>
+                    </div>
+
+
+                </div>
+            </div>
+        </div>
+    </form>
+{% endblock %}
diff --git a/resources/views/rules/rule-group/edit.twig b/resources/views/rules/rule-group/edit.twig
new file mode 100644
index 0000000000..43a72103e5
--- /dev/null
+++ b/resources/views/rules/rule-group/edit.twig
@@ -0,0 +1,60 @@
+{% extends './v1/layout/default' %}
+
+{% block breadcrumbs %}
+    {{ Breadcrumbs.render(Route.getCurrentRoute.getName, ruleGroup) }}
+{% endblock %}
+
+{% block content %}
+    {{ Form.model(ruleGroup, {'class' : 'form-horizontal','id' : 'update','url' : route('rule-groups.update',ruleGroup.id) } ) }}
+    <input type="hidden" name="id" value="{{ ruleGroup.id }}"/>
+    <div class="row">
+        <div class="col-lg-6 col-md-12 col-sm-6">
+            <div class="box box-primary">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'mandatoryFields'|_ }}</h3>
+                </div>
+                <div class="box-body">
+                    {# only correct way to do active checkbox #}
+                    {{ ExpandedForm.checkbox('active', 1) }}
+
+                    {{ ExpandedForm.text('title') }}
+                </div>
+            </div>
+
+        </div>
+        <div class="col-lg-6 col-md-12 col-sm-6">
+
+            {# optional fields #}
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'optionalFields'|_ }}</h3>
+                </div>
+                <div class="box-body">
+                    {{ ExpandedForm.textarea('description', ruleGroup.description) }}
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
+            {# panel for options #}
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'options'|_ }}</h3>
+                </div>
+                <div class="box-body">
+                    {{ ExpandedForm.optionsList('update','rule-group') }}
+                </div>
+                <div class="box-footer">
+                    <button type="submit" class="btn pull-right btn-success">{{ 'update_rule_group'|_ }}</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    </form>
+
+{% endblock %}
+{% block scripts %}
+    <script type="text/javascript" src="v1/js/ff/rule-groups/edit.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+{% endblock %}
diff --git a/resources/views/rules/rule-group/select-transactions.twig b/resources/views/rules/rule-group/select-transactions.twig
new file mode 100644
index 0000000000..cce4659467
--- /dev/null
+++ b/resources/views/rules/rule-group/select-transactions.twig
@@ -0,0 +1,56 @@
+{% extends './v1/layout/default' %}
+
+{% block breadcrumbs %}
+    {{ Breadcrumbs.render(Route.getCurrentRoute.getName, ruleGroup) }}
+{% endblock %}
+
+{% block content %}
+
+    <form method="POST" action="{{ route('rule-groups.execute', ruleGroup.id) }}" accept-charset="UTF-8" class="form-horizontal" id="execute-rule-group">
+        <input name="_token" type="hidden" value="{{ csrf_token() }}">
+
+        <div class="row">
+            <div class="col-lg-12 col-sm-12 col-xs-12">
+
+                <div class="box box-primary">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ subTitle }}</h3>
+                    </div>
+                    <div class="box-body">
+                        <div id="form-body">
+                            <p>
+                                {{ trans('firefly.apply_rule_group_selection_intro', {title: ruleGroup.title}) }}
+                            </p>
+                            <p class="text-danger">
+                                {{ 'apply_rule_warning'|_ }}
+                            </p>
+                            <div class="row">
+                                <div class="col-lg-6 col-md-8 col-sm-12 col-xs-12">
+                                    {{ ExpandedForm.date('start', first) }}
+                                    {{ ExpandedForm.date('end', today) }}
+                                    {{ AccountForm.assetAccountCheckList('accounts', {'select_all': true,'class': 'account-checkbox', 'label': trans('firefly.include_transactions_from_accounts') }) }}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="box-footer">
+                        <input type="submit" name="submit" value="{{ 'execute'|_ }}" id="do-execute-button" class="btn btn-success pull-right"/>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </form>
+{% endblock %}
+{% block scripts %}
+    <script type="text/javascript" nonce="{{ JS_NONCE }}">
+        var askReadWarning = "{{ trans('firefly.rules_have_read_warning')|escape('js') }}";
+    </script>
+    <script type="text/javascript" src="v1/js/lib/modernizr-custom.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/lib/jquery-ui.min.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/ff/rules/select-transactions.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+{% endblock %}
+
+{% block styles %}
+    <link href="v1/css/jquery-ui/jquery-ui.structure.min.css?v={{ FF_VERSION }}" type="text/css" rel="stylesheet"  media="all" nonce="{{ JS_NONCE }}">
+    <link href="v1/css/jquery-ui/jquery-ui.theme.min.css?v={{ FF_VERSION }}" type="text/css" rel="stylesheet"  media="all" nonce="{{ JS_NONCE }}">
+{% endblock %}
diff --git a/resources/views/rules/rule/create.twig b/resources/views/rules/rule/create.twig
new file mode 100644
index 0000000000..ee4d6f9b5b
--- /dev/null
+++ b/resources/views/rules/rule/create.twig
@@ -0,0 +1,158 @@
+{% extends './v1/layout/default' %}
+
+{% block breadcrumbs %}
+    {{ Breadcrumbs.render(Route.getCurrentRoute.getName, ruleGroup) }}
+{% endblock %}
+
+{% block content %}
+
+    <form method="POST" action="{{ route('rules.store') }}" accept-charset="UTF-8" class="form-horizontal" id="store">
+        <input name="_token" type="hidden" value="{{ csrf_token() }}">
+        <input type="hidden" name="rule_group_id" value="{{ ruleGroup.id }}"/>
+        <input type="hidden" name="return_to_bill" value="{% if returnToBill %}true{% else %}false{% endif %}"/>
+        <input type="hidden" name="bill_id" value="{% if bill %}{{ bill.id }}{% else %}0{% endif %}"/>
+
+        <input type="hidden" name="active" value="1"/>
+        {% if bill %}
+            <div class="row">
+                <div class="col-lg-12 col-md-12 col-sm-12">
+                    <div class="box box-success" id="mandatory">
+                        <div class="box-header with-border">
+                            <h3 class="box-title">{{ trans('firefly.create_rule_for_bill', {name: bill.name}) }}</h3>
+                        </div>
+                        <div class="box-body">
+                            <p class="text-info">
+                                {{ trans('firefly.create_rule_for_bill_txt', {name: bill.name}) }}
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        {% endif %}
+        <div class="row">
+            <div class="col-lg-6 col-md-6 col-sm-12">
+                <div class="box box-primary" id="mandatory">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ 'mandatoryFields'|_ }}</h3>
+                    </div>
+                    <div class="box-body">
+                        {{ ExpandedForm.text('title') }}
+                        {{ ExpandedForm.select('trigger',allJournalTriggers()) }}
+                        {{ RuleForm.ruleGroupList('rule_group_id', ruleGroup.id) }}
+                        {{ ExpandedForm.checkbox('stop_processing',1,null, {helpText: trans('firefly.rule_help_stop_processing')}) }}
+                        {{ ExpandedForm.checkbox('strict',1, null,{helpText: trans('firefly.rule_help_strict')}) }}
+                    </div>
+                </div>
+            </div>
+            <div class="col-lg-6 col-md-6 col-sm-12">
+
+                {# optional fields #}
+                <div class="box">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ 'optionalFields'|_ }}</h3>
+                    </div>
+                    <div class="box-body">
+                        {{ ExpandedForm.textarea('description', null, {helpText: trans('firefly.field_supports_markdown')}) }}
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="row">
+            <div class="col-lg-12 col-md-12 col-sm-12">
+                <div class="box">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ 'rule_triggers'|_ }}</h3>
+                    </div>
+                    <div class="box-body rule-trigger-box">
+                        <table class="table table-condensed table-bordered table-striped">
+                            <thead>
+                            <tr>
+                                <th colspan="2">{{ 'trigger'|_ }}</th>
+                                <th>{{ 'trigger_value'|_ }}</th>
+                                <th>{{ 'stop_processing_other_triggers'|_ }}</th>
+                            </tr>
+                            </thead>
+                            <tbody class="rule-trigger-tbody">
+                            {% for trigger in oldTriggers %}
+                                {{ trigger|raw }}
+                            {% endfor %}
+                            </tbody>
+
+                        </table>
+                        <p>
+                            <br/>
+                            <button type="button" class="btn btn-default add_rule_trigger">{{ 'add_rule_trigger'|_ }}</button>
+                            <a href="#" class="btn btn-default test_rule_triggers"><span class="fa fa-flask"></span> {{ 'test_rule_triggers'|_ }}</a>
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        {% include 'v1.rules.partials.test-trigger-modal' %}
+
+        <div class="row">
+            <div class="col-lg-12 col-md-12 col-sm-12">
+                <div class="box">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ 'rule_actions'|_ }}</h3>
+                    </div>
+                    <div class="box-body rule-action-box">
+                        <table class="table table-condensed table-bordered table-striped">
+                            <thead>
+                            <tr>
+                                <th colspan="2">{{ 'action'|_ }}</th>
+                                <th>{{ 'action_value'|_ }}</th>
+                                <th>{{ 'stop_executing_other_actions'|_ }}</th>
+                            </tr>
+                            </thead>
+                            <tbody class="rule-action-tbody">
+                            {% for action in oldActions %}
+                                {{ action|raw }}
+                            {% endfor %}
+                            </tbody>
+
+                        </table>
+                        <p>
+                            <br/>
+                            <a href="#" class="btn btn-default add_rule_action">{{ 'add_rule_action'|_ }}</a>
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="row">
+            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
+                {# panel for options #}
+                <div class="box">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ 'options'|_ }}</h3>
+                    </div>
+                    <div class="box-body">
+                        {{ ExpandedForm.optionsList('create','rule') }}
+                    </div>
+                    <div class="box-footer">
+                        <button type="submit" class="btn pull-right btn-success">{{ 'store_new_rule'|_ }}</button>
+                    </div>
+                </div>
+
+            </div>
+
+        </div>
+    </form>
+
+{% endblock %}
+{% block scripts %}
+    <script type="text/javascript" src="v1/js/lib/typeahead/typeahead.bundle.min.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" nonce="{{ JS_NONCE }}">
+        var triggerCount = {{ triggerCount }};
+        var actionCount = {{ actionCount }};
+        var testRuleTriggersText = '{{ 'test_rule_triggers'|_|escape('js') }}';
+    </script>
+    <script type="text/javascript" src="v1/js/ff/rules/create-edit.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+
+{% endblock %}
+{% block styles %}
+{% endblock %}
diff --git a/resources/views/rules/rule/delete.twig b/resources/views/rules/rule/delete.twig
new file mode 100644
index 0000000000..7013e30a94
--- /dev/null
+++ b/resources/views/rules/rule/delete.twig
@@ -0,0 +1,34 @@
+{% extends './v1/layout/default' %}
+
+{% block breadcrumbs %}
+    {{ Breadcrumbs.render(Route.getCurrentRoute.getName, rule) }}
+{% endblock %}
+
+{% block content %}
+
+    <form method="POST" action="{{ route('rules.destroy',rule.id) }}" accept-charset="UTF-8" class="form-horizontal" id="destroy">
+        <input name="_token" type="hidden" value="{{ csrf_token() }}">
+        <div class="row">
+            <div class="col-lg-6 col-lg-offset-3 col-md-12 col-sm-12">
+                <div class="box box-danger">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ trans('form.delete_rule', {'title': rule.title}) }}</h3>
+                    </div>
+                    <div class="box-body">
+                        <p class="text-danger">
+                            {{ trans('form.permDeleteWarning') }}
+                        </p>
+
+                        <p>
+                            {{ trans('form.rule_areYouSure', {'title': rule.title}) }}
+                        </p>
+                    </div>
+                    <div class="box-footer">
+                        <input type="submit" name="submit" value="{{ trans('form.deletePermanently') }}" class="btn btn-danger pull-right"/>
+                        <a href="{{ URL.previous() }}" class="btn-default btn">{{ trans('form.cancel') }}</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </form>
+{% endblock %}
diff --git a/resources/views/rules/rule/edit.twig b/resources/views/rules/rule/edit.twig
new file mode 100644
index 0000000000..f533768793
--- /dev/null
+++ b/resources/views/rules/rule/edit.twig
@@ -0,0 +1,139 @@
+{% extends './v1/layout/default' %}
+
+{% block breadcrumbs %}
+    {{ Breadcrumbs.render(Route.getCurrentRoute.getName, rule) }}
+{% endblock %}
+
+{% block content %}
+    {{ Form.model(rule, {'class' : 'form-horizontal','id' : 'store','url' : route('rules.update', rule.id)}) }}
+    <input type="hidden" name="id" value="{{ rule.id }}"/>
+    <div class="row">
+        <div class="col-lg-6 col-md-6 col-sm-12">
+            <div class="box box-primary">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'mandatoryFields'|_ }}</h3>
+                </div>
+                <div class="box-body">
+                    {{ ExpandedForm.text('title') }}
+                    {{ RuleForm.ruleGroupList('rule_group_id', ruleGroup.id) }}
+                    {{ ExpandedForm.select('trigger',allJournalTriggers(), primaryTrigger) }}
+
+                    {# only correct way to do active checkbox #}
+                    {{ ExpandedForm.checkbox('active', 1, null, {helpText: trans('firefly.rule_help_active')}) }}
+
+                    {{ ExpandedForm.checkbox('stop_processing',1,rule.stop_processing, {helpText: trans('firefly.rule_help_stop_processing')}) }}
+                    {{ ExpandedForm.checkbox('strict',1,rule.strict, {helpText: trans('firefly.rule_help_strict')}) }}
+                </div>
+            </div>
+        </div>
+        <div class="col-lg-6 col-md-6 col-sm-12">
+
+            {# optional fields #}
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'optionalFields'|_ }}</h3>
+                </div>
+                <div class="box-body">
+                    {{ ExpandedForm.textarea('description', rule.description, {helpText: trans('firefly.field_supports_markdown')}) }}
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="row">
+        <div class="col-lg-12 col-md-12 col-sm-12">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'rule_triggers'|_ }}</h3>
+                </div>
+                <div class="box-body rule-trigger-box">
+                    <table class="table table-condensed table-bordered table-striped">
+                        <thead>
+                        <tr>
+                            <th colspan="2">{{ 'trigger'|_ }}</th>
+                            <th>{{ 'trigger_value'|_ }}</th>
+                            <th>{{ 'stop_processing_other_triggers'|_ }}</th>
+                        </tr>
+                        </thead>
+                        <tbody class="rule-trigger-tbody">
+                        {% for trigger in oldTriggers %}
+                            {{ trigger|raw }}
+                        {% endfor %}
+                        </tbody>
+
+                    </table>
+                    <p>
+                        <br/>
+                        <a href="#" class="btn btn-default add_rule_trigger">{{ 'add_rule_trigger'|_ }}</a>
+                        <a href="#" class="btn btn-default test_rule_triggers"><span class="fa fa-flask"></span> {{ 'test_rule_triggers'|_ }}</a>
+                    </p>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    {% include 'v1.rules.partials.test-trigger-modal' %}
+
+    <div class="row">
+        <div class="col-lg-12 col-md-12 col-sm-12">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'rule_actions'|_ }}</h3>
+                </div>
+                <div class="box-body">
+                    <table class="table table-condensed table-bordered table-striped">
+                        <thead>
+                        <tr>
+                            <th colspan="2">{{ 'action'|_ }}</th>
+                            <th>{{ 'action_value'|_ }}</th>
+                            <th>{{ 'stop_executing_other_actions'|_ }}</th>
+                        </tr>
+                        </thead>
+                        <tbody class="rule-action-tbody">
+                        {% for action in oldActions %}
+                            {{ action|raw }}
+                        {% endfor %}
+                        </tbody>
+
+                    </table>
+                    <p>
+                        <br/>
+                        <a href="#" class="btn btn-default add_rule_action">{{ 'add_rule_action'|_ }}</a>
+                    </p>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="row">
+        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
+            {# panel for options #}
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'options'|_ }}</h3>
+                </div>
+                <div class="box-body">
+                    {{ ExpandedForm.optionsList('update','rule') }}
+                </div>
+                <div class="box-footer">
+                    <button type="submit" class="btn pull-right btn-success">{{ 'update_rule'|_ }}</button>
+                </div>
+            </div>
+
+        </div>
+
+    </div>
+    </form>
+
+
+{% endblock %}
+{% block scripts %}
+    <script type="text/javascript" src="v1/js/lib/typeahead/typeahead.bundle.min.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" nonce="{{ JS_NONCE }}">
+        var triggerCount = {{ triggerCount }};
+        var actionCount = {{ actionCount }};
+        var testRuleTriggersText = '{{ 'test_rule_triggers'|_|escape('js') }}';
+    </script>
+    <script type="text/javascript" src="v1/js/ff/rules/create-edit.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+
+{% endblock %}
diff --git a/resources/views/rules/rule/select-transactions.twig b/resources/views/rules/rule/select-transactions.twig
new file mode 100644
index 0000000000..976b5e0afc
--- /dev/null
+++ b/resources/views/rules/rule/select-transactions.twig
@@ -0,0 +1,56 @@
+{% extends './v1/layout/default' %}
+
+{% block breadcrumbs %}
+    {{ Breadcrumbs.render(Route.getCurrentRoute.getName, rule) }}
+{% endblock %}
+
+{% block content %}
+
+    <form method="POST" action="{{ route('rules.execute', rule.id) }}" accept-charset="UTF-8" class="form-horizontal" id="execute-rule">
+        <input name="_token" type="hidden" value="{{ csrf_token() }}">
+
+        <div class="row">
+            <div class="col-lg-12 col-sm-12 col-xs-12">
+
+                <div class="box box-primary">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ subTitle }}</h3>
+                    </div>
+                    <div class="box-body">
+                        <div id="form-body">
+                            <p>
+                                {{ trans('firefly.apply_rule_selection_intro', {title: rule.title}) }}
+                            </p>
+                            <p class="text-danger">
+                                {{ 'apply_rule_warning'|_ }}
+                            </p>
+                            <div class="row">
+                                <div class="col-lg-6 col-md-8 col-sm-12 col-xs-12">
+                                    {{ ExpandedForm.date('start', first) }}
+                                    {{ ExpandedForm.date('end', today) }}
+                                    {{ AccountForm.assetAccountCheckList('accounts', {'select_all': true,  'class': 'account-checkbox', 'label': trans('firefly.include_transactions_from_accounts') }) }}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="box-footer">
+                        <input type="submit" name="submit" value="{{ 'execute'|_ }}" id="do-execute-button" class="btn btn-success pull-right"/>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </form>
+{% endblock %}
+{% block scripts %}
+    <script type="text/javascript" nonce="{{ JS_NONCE }}">
+        var askReadWarning = "{{ trans('firefly.rules_have_read_warning')|escape('js') }}";
+    </script>
+    <script type="text/javascript" src="v1/js/lib/modernizr-custom.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/lib/jquery-ui.min.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/ff/rules/select-transactions.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+{% endblock %}
+
+{% block styles %}
+    <link href="v1/css/jquery-ui/jquery-ui.structure.min.css?v={{ FF_VERSION }}" type="text/css" rel="stylesheet"  media="all" nonce="{{ JS_NONCE }}">
+    <link href="v1/css/jquery-ui/jquery-ui.theme.min.css?v={{ FF_VERSION }}" type="text/css" rel="stylesheet"  media="all" nonce="{{ JS_NONCE }}">
+{% endblock %}
diff --git a/resources/views/search/index.twig b/resources/views/search/index.twig
new file mode 100644
index 0000000000..4871b3f85e
--- /dev/null
+++ b/resources/views/search/index.twig
@@ -0,0 +1,154 @@
+{% extends './v1/layout/default' %}
+
+{% block breadcrumbs %}
+    {{ Breadcrumbs.render(Route.getCurrentRoute.getName, fullQuery) }}
+{% endblock %}
+
+{% block content %}
+    <div class="row">
+        <div class="col-lg-12">
+            <div class="box box-primary">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'search_box'|_ }}</h3>
+                </div>
+                <div class="box-body">
+                    <p>
+                        {{ 'search_box_intro'|_ }}
+                    </p>
+                    {# search form #}
+                    <form class="form-horizontal" action="{{ route('search.index') }}" method="get">
+                        <div class="form-group">
+                            <label for="query" class="col-sm-1 control-label">{{ 'search_query'|_ }}</label>
+                            <div class="col-sm-10">
+                                <input autocomplete="off" maxlength="255" type="text" name="search" id="query" value="{{ fullQuery }}" class="form-control"
+                                       placeholder="{{ fullQuery }}">
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <div class="col-sm-offset-1 col-sm-10">
+                                <button type="submit" class="btn btn-info"><span class="fa fa-search"></span> {{ 'search'|_ }}</button>
+                                {% if ruleId > 0 and ruleChanged %}
+                                    <a href="{{ route('rules.edit', [ruleId]) }}?from_query={{ fullQuery }}"
+                                       class="btn btn-default">{{ trans('firefly.update_rule_from_query', {rule: rule.title}) }}</a>
+                                {% endif %}
+                                <a href="{{ route('rules.create') }}?from_query={{ fullQuery }}" class="btn btn-default">{{ 'create_rule_from_query'|_ }}</a>
+                            </div>
+                        </div>
+                        {% if 0 != ruleId %}
+                            <input type="hidden" name="rule" value="{{ ruleId }}"/>
+                        {% endif %}
+                    </form>
+                    {% if '' != query %}
+                        <p>
+                            {{ trans('firefly.search_for_query', {query: query|escape})|raw }}
+                        </p>
+                    {% endif %}
+
+                    {% if invalidOperators|length > 0 %}
+                        <p>{{ trans('firefly.invalid_operators_list') }}</p>
+                        <ul>
+                            {% for operator in invalidOperators %}
+                                <li class="text-danger">{{ operator.type  }}:{{ operator.value }}</li>
+                            {% endfor %}
+                        </ul>
+                    {% endif %}
+
+                    {% if operators|length > 0 %}
+                        <p>{{ trans('firefly.modifiers_applies_are') }}</p>
+                        <ul>
+                            {% for operator in operators %}
+                                <li>{{ trans('firefly.search_modifier_'~operator.type, {value: operator.value}) }}</li>
+                            {% endfor %}
+                        </ul>
+                    {% endif %}
+                </div>
+            </div>
+        </div>
+    </div>
+    {% if query or operators|length > 0 %}
+        <div class="row result_row">
+            <div class="col-lg-12 col-md-12 col-sm-12">
+                <div class="box search_box">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ 'transactions'|_ }}</h3>
+                    </div>
+                    <div class="box-body">
+                        <p class="search_ongoing text-center" style="margin-top:70px;">
+                            {{ 'search_searching'|_ }}
+                        </p>
+                        <div class="search_results" style="display: none;"></div>
+                        {# loading indicator #}
+                        <div class="overlay">
+                            <span class="fa fa-refresh fa-spin"></span>
+                        </div>
+
+                        <div class="row mass_edit_all hidden-xs" style="display: none;">
+                            <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12">
+                                <div class="mass_button_options btn-group btn-group" style="display:none;">
+                                    <a href="#" class="btn btn-default mass_edit"><span class="fa fa-fw fa-pencil"></span> <span>{{ 'edit_selected'|_ }}</span></a>
+                                    <a href="#" class="btn btn-default bulk_edit"><span>{{ 'bulk_edit'|_ }}</span></a>
+                                    <a href="#" class="btn btn-danger mass_delete"><span class="fa fa-fw fa-trash"></span>
+                                        <span>{{ 'delete_selected'|_ }}</span></a>
+                                </div>
+                            </div>
+                            <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12 hidden-xs">
+
+                                <div class="mass_buttons btn-group btn-group pull-right">
+                                    <a href="#" class="btn btn-default mass_select"><span
+                                                class="fa fa-fw fa-check-square-o"></span> {{ 'select_transactions'|_ }}</a>
+                                    <a href="#" class="btn btn-default mass_stop_select" style="display:none;"><span class="fa faw-fw fa-square-o"
+                                        ></span> {{ 'stop_selection'|_ }}</a>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="row error_row" style="display:none; ">
+            <div class="col-lg-12 col-md-12 col-sm-12">
+                <div class="box box-danger">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ 'search_error'|_ }}</h3>
+                    </div>
+                    <div class="box-body">
+                        <p class="search_ongoing">
+                            {{ 'general_search_error'|_ }}
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    {% endif %}
+    {% if query == "" and operators|length == 0 %}
+        <div class="row">
+            <div class="col-lg-12 col-md-12 col-sm-12">
+                <div class="box">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ 'search_results'|_ }}</h3>
+                    </div>
+                    <div class="box-body">
+                        <p>{{ 'no_results_for_empty_search'|_ }}</p>
+                    </div>
+                </div>
+            </div>
+
+        </div>
+    {% endif %}
+{% endblock %}
+{% block scripts %}
+    <script type="text/javascript" nonce="{{ JS_NONCE }}">
+        var edit_selected_txt = "{{ trans('firefly.edit')|escape('js') }}";
+        var delete_selected_txt = "{{ trans('firefly.delete')|escape('js') }}";
+        var edit_bulk_selected_txt = "{{ trans('firefly.bulk_edit')|escape('js') }}";
+
+        var searchQuery = "{{ fullQuery|escape('js') }}";
+        var searchUri = "{{ route('search.search') }}?page={{ page }}";
+        var searchPage = {{ page }};
+        var cloneGroupUrl = '{{ route('transactions.clone') }}';
+    </script>
+    {# required for groups.twig #}
+    <script type="text/javascript" src="v1/js/ff/list/groups.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/ff/search/index.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+
+{% endblock %}
diff --git a/resources/views/search/search.twig b/resources/views/search/search.twig
new file mode 100644
index 0000000000..4a3e8ddb0f
--- /dev/null
+++ b/resources/views/search/search.twig
@@ -0,0 +1,11 @@
+<p class="search_count">
+    {% if true == hasPages %}
+        {{ trans('firefly.search_found_more_transactions', {count: groups.count(), time: searchTime}) }}
+    {% elseif 0 == groups.count() %}
+        {{ trans_choice('firefly.search_found_transactions', 0, {time: searchTime}) }}
+    {% else %}
+        {{ trans_choice('firefly.search_found_transactions', groups.count(), {time: searchTime}) }}
+    {% endif %}
+</p>
+
+{% include 'list.groups' %}
diff --git a/resources/views/tags/create.twig b/resources/views/tags/create.twig
new file mode 100644
index 0000000000..06cca5314a
--- /dev/null
+++ b/resources/views/tags/create.twig
@@ -0,0 +1,73 @@
+{% extends './v1/layout/default' %}
+
+{% block breadcrumbs %}
+    {{ Breadcrumbs.render(Route.getCurrentRoute.getName) }}
+{% endblock %}
+
+{% block content %}
+    <!-- set location data high up -->
+    <script type="text/javascript" nonce="{{ JS_NONCE }}">
+        var locations = {{ locations|json_encode|raw }};
+        var mapboxToken = "{{ config('firefly.mapbox_api_key') }}";
+    </script>
+    <form method="POST" action="{{ route('tags.store') }}" accept-charset="UTF-8" class="form-horizontal" id="store" enctype="multipart/form-data">
+        <input name="_token" type="hidden" value="{{ csrf_token() }}">
+        <div class="row">
+            <div class="col-lg-5 col-md-5 col-sm-12">
+                <div class="box box-primary">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ 'mandatoryFields'|_ }}</h3>
+                    </div>
+                    <div class="box-body">
+                        {{ ExpandedForm.text('tag') }}
+                    </div>
+                </div>
+            </div>
+
+            <div class="col-lg-7 col-md-7 col-sm-12">
+
+                <div class="box">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ 'optionalFields'|_ }}</h3>
+                    </div>
+                    <div class="box-body">
+                        {{ ExpandedForm.date('date') }}
+                        {{ ExpandedForm.textarea('description') }}
+                        {{ ExpandedForm.location('location', null, {locations: locations}) }}
+                        {{ ExpandedForm.file('attachments[]', {'multiple': 'multiple','helpText': trans('firefly.upload_max_file_size', {'size': uploadSize|filesize}) }) }}
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
+                {# panel for options #}
+                <div class="box">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ 'options'|_ }}</h3>
+                    </div>
+                    <div class="box-body">
+                        {{ ExpandedForm.optionsList('create','tag') }}
+                    </div>
+                    <div class="box-footer">
+                        <button type="submit" class="btn btn-success pull-right">
+                            {{ 'store_new_tag'|_ }}
+                        </button>
+                    </div>
+                </div>
+
+            </div>
+        </div>
+    </form>
+{% endblock %}
+{% block scripts %}
+    <script src="v1/lib/leaflet/leaflet.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/lib/modernizr-custom.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/lib/jquery-ui.min.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script src="v1/js/ff/tags/create-edit.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+{% endblock %}
+{% block styles %}
+    <link rel="stylesheet" href="v1/lib/leaflet/leaflet.css?v={{ FF_VERSION }}"/>
+    <link href="v1/css/jquery-ui/jquery-ui.structure.min.css?v={{ FF_VERSION }}" type="text/css" rel="stylesheet"  media="all" nonce="{{ JS_NONCE }}">
+    <link href="v1/css/jquery-ui/jquery-ui.theme.min.css?v={{ FF_VERSION }}" type="text/css" rel="stylesheet"  media="all" nonce="{{ JS_NONCE }}">
+{% endblock %}
diff --git a/resources/views/tags/delete.twig b/resources/views/tags/delete.twig
new file mode 100644
index 0000000000..e9519698a1
--- /dev/null
+++ b/resources/views/tags/delete.twig
@@ -0,0 +1,40 @@
+{% extends './v1/layout/default' %}
+
+{% block breadcrumbs %}
+    {{ Breadcrumbs.render(Route.getCurrentRoute.getName, tag) }}
+{% endblock %}
+
+{% block content %}
+
+    <form method="POST" action="{{ route('tags.destroy',tag.id) }}" accept-charset="UTF-8" class="form-horizontal" id="destroy">
+        <input name="_token" type="hidden" value="{{ csrf_token() }}">
+        <div class="row">
+            <div class="col-lg-6 col-lg-offset-3 col-md-6 col-sm-12">
+                <div class="box box-danger">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ trans('firefly.delete_tag',{tag: tag.tag}) }}</h3>
+                    </div>
+                    <div class="box-body">
+                        <p class="text-danger">
+                            {{ trans('form.permDeleteWarning') }}
+                        </p>
+
+                        <p>
+                            {{ trans('form.tag_areYouSure', {'tag': tag.tag}) }}
+                        </p>
+
+                        <p>
+                            {% if tag.transactionjournals.count() > 0 %}
+                                {{ Lang.choice('form.tag_keep_transactions', tag.transactionjournals.count(), {count: tag.transactionjournals.count()}) }}
+                            {% endif %}
+                        </p>
+                    </div>
+                    <div class="box-footer">
+                        <input type="submit" name="submit" value="{{ trans('form.deletePermanently') }}" class="btn pull-right btn-danger"/>
+                        <a href="{{ URL.previous() }}" class="btn-default btn">{{ trans('form.cancel') }}</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </form>
+{% endblock %}
diff --git a/resources/views/tags/edit.twig b/resources/views/tags/edit.twig
new file mode 100644
index 0000000000..1e0045422c
--- /dev/null
+++ b/resources/views/tags/edit.twig
@@ -0,0 +1,78 @@
+{% extends './v1/layout/default' %}
+
+{% block breadcrumbs %}
+    {{ Breadcrumbs.render(Route.getCurrentRoute.getName, tag) }}
+{% endblock %}
+
+{% block content %}
+    <!-- set location data high up -->
+    <script type="text/javascript" nonce="{{ JS_NONCE }}">
+        var locations = {{ locations|json_encode|raw }};
+        var mapboxToken = "{{ config('firefly.mapbox_api_key') }}";
+    </script>
+
+    {{ Form.model(tag, {'class' : 'form-horizontal','enctype': 'multipart/form-data','id' : 'update','url' : route('tags.update',tag.id)}) }}
+
+    <input type="hidden" name="id" value="{{ tag.id }}"/>
+
+    <div class="row">
+        <div class="col-lg-5 col-md-5 col-sm-12">
+            <div class="box box-primary">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'mandatoryFields'|_ }}</h3>
+                </div>
+                <div class="box-body">
+                    {{ ExpandedForm.text('tag') }}
+                </div>
+            </div>
+        </div>
+
+        <div class="col-lg-7 col-md-7 col-sm-12">
+
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'optionalFields'|_ }}</h3>
+                </div>
+                <div class="box-body">
+                    {{ ExpandedForm.date('date', tag.date.format('Y-m-d')) }}
+                    {{ ExpandedForm.textarea('description', tag.description) }}
+                    {{ ExpandedForm.location('location', null, {locations: locations}) }}
+                    {{ ExpandedForm.file('attachments[]', {'multiple': 'multiple','helpText': trans('firefly.upload_max_file_size', {'size': uploadSize|filesize}) }) }}
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
+            {# panel for options #}
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'options'|_ }}</h3>
+                </div>
+                <div class="box-body">
+                    {{ ExpandedForm.optionsList('update','tag') }}
+                </div>
+                <div class="box-footer">
+                    <button type="submit" class="btn pull-right btn-success">
+                        {{ 'update_tag'|_ }}
+                    </button>
+                </div>
+            </div>
+
+        </div>
+    </div>
+
+    </form>
+
+{% endblock %}
+{% block scripts %}
+    <script src="v1/lib/leaflet/leaflet.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/lib/modernizr-custom.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/lib/jquery-ui.min.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script src="v1/js/ff/tags/create-edit.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+{% endblock %}
+{% block styles %}
+    <link rel="stylesheet" href="v1/lib/leaflet/leaflet.css?v={{ FF_VERSION }}"/>
+    <link href="v1/css/jquery-ui/jquery-ui.structure.min.css?v={{ FF_VERSION }}" type="text/css" rel="stylesheet"  media="all" nonce="{{ JS_NONCE }}">
+    <link href="v1/css/jquery-ui/jquery-ui.theme.min.css?v={{ FF_VERSION }}" type="text/css" rel="stylesheet"  media="all" nonce="{{ JS_NONCE }}">
+{% endblock %}
diff --git a/resources/views/tags/index.twig b/resources/views/tags/index.twig
new file mode 100644
index 0000000000..7ec762fbb1
--- /dev/null
+++ b/resources/views/tags/index.twig
@@ -0,0 +1,76 @@
+{% extends './v1/layout/default' %}
+
+{% block breadcrumbs %}
+    {{ Breadcrumbs.render(Route.getCurrentRoute.getName) }}
+{% endblock %}
+
+{% block content %}
+    {% if count == 0 %}
+        {% include 'partials.empty' with {objectType: 'default', type: 'tags',route: route('tags.create')} %}
+    {% else %}
+        <div class="row">
+            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
+                <p>
+                    <a class="btn btn-success" href="{{ route('tags.create') }}"><span class="fa fa-plus fa-fw"></span> {{ ('no_tags_create_default')|_ }}</a>
+                </p>
+            </div>
+        </div>
+        <form action="{{ route('tags.mass-destroy') }}" method="post">
+            <input type="hidden" name="_token" value="{{ csrf_token() }}"/>
+            {% for period, entries in tags %}
+                {% if entries|length > 0 %}
+                    <div class="row">
+                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
+                            <div class="box">
+                                <div class="box-header with-border">
+                                    <h3 class="box-title">
+                                        {% if period == 'no-date' %}{{ 'without_date'|_ }}{% else %}{{ period }}{% endif %}
+                                    </h3>
+                                </div>
+                                <div class="box-body">
+                                    <div class="row">
+                                        {% for tagInfo in entries %}
+                                            <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"
+                                            style="line-height: 1.7em;"
+                                            ><input type="checkbox" name="tags[]" value="{{ tagInfo.id }}"> <a
+                                                        class="label label-success"
+                                                        style="font-weight: normal;font-size:0.9em;"
+
+                                                                                                     title="{{ tagInfo.created_at.formatLocalized(monthAndDayFormat) }}"
+                                                                                                     href="{{ route('tags.show',tagInfo.id) }}">{% if tagInfo.location %}<span class="fa fa-fw fa-map-marker"></span>{% endif %}<span class="fa fa-fw fa-tag"></span>{{ tagInfo.tag }}{% if tagInfo.attachments.count() > 0 %}<span class="fa fa-fw fa-paperclip"></span>{% endif %}</a></div>
+
+                                        {% endfor %}
+                                    </div>
+
+                                    <ul class="list-inline">
+                                        {% for tagInfo in entries %}
+                                            <li>
+                                            <!--&nbsp;-->
+
+                                            </li>
+                                        {% endfor %}
+                                    </ul>
+
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                {% endif %}
+            {% endfor %}
+            <div class="row">
+                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
+                    <p>
+                        <a class="btn btn-success" href="{{ route('tags.create') }}"><span class="fa fa-plus fa-fw"></span> {{ ('no_tags_create_default')|_ }}</a>
+                        <button type="submit" class="btn pull-right btn-danger" onclick="return confirm('{{ 'are_you_sure'|_|escape('js') }}');">
+                            <span class="fa fa-fw fa-trash"></span> {{ 'delete_all_selected_tags'|_ }}
+                        </button>
+                    </p>
+                </div>
+            </div>
+        </form>
+    {% endif %}
+
+{% endblock %}
+{% block scripts %}
+    <script src="v1/js/ff/tags/index.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+{% endblock %}
diff --git a/resources/views/tags/show.twig b/resources/views/tags/show.twig
new file mode 100644
index 0000000000..1488514e4f
--- /dev/null
+++ b/resources/views/tags/show.twig
@@ -0,0 +1,308 @@
+{% extends './v1/layout/default' %}
+
+{% block breadcrumbs %}
+    {{ Breadcrumbs.render(Route.getCurrentRoute.getName, tag, start, end) }}
+{% endblock %}
+
+{% block content %}
+    <div class="row">
+        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'meta_data'|_ }}</h3>
+
+
+                    <div class="box-tools pull-right">
+                        <div class="btn-group">
+                            <button class="btn btn-box-tool dropdown-toggle" data-toggle="dropdown"><span
+                                        class="fa fa-ellipsis-v"></span></button>
+                            <ul class="dropdown-menu" role="menu">
+                                <li><a href="{{ route('tags.edit',tag.id) }}"><span
+                                                class="fa fa-pencil fa-fw"></span> {{ trans('firefly.edit_tag',{tag: tag.tag}) }}
+                                    </a></li>
+                                <li><a href="{{ route('tags.delete',tag.id) }}"><span
+                                                class="fa fa-trash fa-fw"></span> {{ trans('firefly.delete_tag',{tag: tag.tag}) }}
+                                    </a></li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+                <div class="box-body no-padding">
+                    <table class="table table-bordered">
+                        {% if tag.description %}
+                            <tr>
+                                <td>
+                                    {{ trans('list.description') }}
+                                </td>
+                                <td>{{ tag.description }}</td>
+                            </tr>
+                        {% endif %}
+                        {% if tag.date %}
+                            <tr>
+                                <td>
+                                    {{ trans('list.date') }}
+                                </td>
+                                <td>
+                                    {{ tag.date.formatLocalized(monthAndDayFormat) }}
+                                </td>
+                            </tr>
+                        {% endif %}
+
+                        {# total amount #}
+                        {% set currentSum = 0 %}
+                        {% for set in sums %}
+                            {% set currentSum = currentSum + set.Withdrawal + set.Transfer + set.Deposit %}
+                        {% endfor %}
+
+                        {% if currentSum != 0 %}
+                            <tr>
+                                <td style="width:40%;">{{ trans('list.sum') }}</td>
+                                <td>
+                                    {% for set in sums %}
+                                        {{ formatAmountBySymbol(set.Withdrawal + set.Transfer + set.Deposit, set.currency_symbol, set.currency_decimal_places, true) }}{% if loop.index != sums|length %},{% endif %}
+                                    {% endfor %}
+                                </td>
+                            </tr>
+                        {% endif %}
+
+                        {# total expense excl. transfer #}
+                        {% set currentSum = 0 %}
+                        {% for set in sums %}
+                            {% set currentSum = currentSum + set.Withdrawal + set.Deposit %}
+                        {% endfor %}
+                        {% if currentSum != 0 %}
+                            <tr>
+                                <td style="width:40%;">{{ trans('list.sum_excluding_transfers') }}</td>
+                                <td>
+                                    {% for set in sums %}
+                                        {{ formatAmountBySymbol(set.Withdrawal + set.Deposit, set.currency_symbol, set.currency_decimal_places, true) }}{% if loop.index != sums|length %},{% endif %}
+                                    {% endfor %}
+                                </td>
+                            </tr>
+                        {% endif %}
+
+                        {# withdrawals #}
+                        {% set currentSum = 0 %}
+                        {% for set in sums %}
+                            {% set currentSum = currentSum + set.Withdrawal %}
+                        {% endfor %}
+                        {% if currentSum != 0 %}
+                            <tr>
+                                <td style="width:40%;">{{ trans('list.sum_withdrawals') }}</td>
+                                <td>
+                                    {% for set in sums %}
+                                        {{ formatAmountBySymbol(set.Withdrawal, set.currency_symbol, set.currency_decimal_places, true) }}{% if loop.index != sums|length %},{% endif %}
+                                    {% endfor %}
+                                </td>
+                            </tr>
+                        {% endif %}
+
+                        {# deposits #}
+                        {% set currentSum = 0 %}
+                        {% for set in sums %}
+                            {% set currentSum = currentSum + set.Deposit %}
+                        {% endfor %}
+                        {% if currentSum != 0 %}
+                            <tr>
+                                <td style="width:40%;">{{ trans('list.sum_deposits') }}</td>
+                                <td>
+                                    {% for set in sums %}
+                                        {{ formatAmountBySymbol(set.Deposit, set.currency_symbol, set.currency_decimal_places, true) }}{% if loop.index != sums|length %},{% endif %}
+                                    {% endfor %}
+                                </td>
+                            </tr>
+                        {% endif %}
+
+                        {# transfers #}
+                        {% set currentSum = 0 %}
+                        {% for set in sums %}
+                            {% set currentSum = currentSum + set.Transfer %}
+                        {% endfor %}
+                        {% if currentSum != 0 %}
+                            <tr>
+                                <td style="width:40%;">{{ trans('list.sum_transfers') }}</td>
+                                <td>
+                                    {% for set in sums %}
+                                        {{ formatAmountBySymbol(set.Transfer, set.currency_symbol, set.currency_decimal_places, true) }}{% if loop.index != sums|length %},{% endif %}
+                                    {% endfor %}
+                                </td>
+                            </tr>
+                        {% endif %}
+
+                        {# reconciliation #}
+                        {% set currentSum = 0 %}
+                        {% for set in sums %}
+                            {% set currentSum = currentSum + set.Reconciliation %}
+                        {% endfor %}
+                        {% if currentSum != 0 %}
+                            <tr>
+                                <td style="width:40%;">{{ trans('list.sum_reconciliations') }}</td>
+                                <td>
+                                    {% for set in sums %}
+                                        {{ formatAmountBySymbol(set.Reconciliation, set.currency_symbol, set.currency_decimal_places, true) }}{% if loop.index != sums|length %},{% endif %}
+                                    {% endfor %}
+                                </td>
+                            </tr>
+                        {% endif %}
+
+                        {#
+                        {% if sums.Transfer != 0 %}
+                            <tr>
+                                <td>{{ trans('list.sum_transfers') }}</td>
+                                <td> {{ sums.Transfer|formatAmount }}</td>
+                            </tr>
+                        {% endif %}
+                        {% if sums.Reconciliation != 0 %}
+                            <tr>
+                                <td>{{ trans('list.sum_reconciliations') }}</td>
+                                <td> {{ sums.Reconciliation|formatAmount }}</td>
+                            </tr>
+                        {% endif %}
+                        #}
+                    </table>
+                </div>
+                <div class="box-footer">
+                    <div class="btn-group btn-group-sm">
+                        <a href="{{ route('tags.edit',tag.id) }}" class="btn btn-default"><span
+                                    class="fa fa-pencil fa-fw"></span></a>
+                        <a href="{{ route('tags.delete',tag.id) }}" class="btn btn-danger"><span
+                                    class="fa fa-trash fa-fw"></span></a>
+                    </div>
+                    <p class="text-muted">
+                        <small>{{ 'sums_apply_to_range'|_ }}</small>
+                    </p>
+                </div>
+            </div>
+        </div>
+        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'location'|_ }}</h3>
+                    <div class="box-tools pull-right">
+                        <div class="btn-group">
+                            <button class="btn btn-box-tool dropdown-toggle" data-toggle="dropdown"><span
+                                        class="fa fa-ellipsis-v"></span></button>
+                            <ul class="dropdown-menu" role="menu">
+                                <li><a href="{{ route('tags.edit',tag.id) }}"><span
+                                                class="fa fa-pencil fa-fw"></span> {{ trans('firefly.edit_tag',{tag: tag.tag}) }}
+                                    </a></li>
+                                <li><a href="{{ route('tags.delete',tag.id) }}"><span
+                                                class="fa fa-trash fa-fw"></span> {{ trans('firefly.delete_tag',{tag: tag.tag}) }}
+                                    </a></li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+                <div class="box-body">
+                    {% if(location) %}
+                        <div id="location_map" style="width:100%;height:300px;"></div>
+                    {% else %}
+                        <p>{{ 'no_location_set'|_ }}</p>
+                    {% endif %}
+                </div>
+            </div>
+        </div>
+    </div>
+    {% if attachments.count() > 0 %}
+        <div class="row">
+            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
+                <div class="box">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">
+                            {{ 'attachments'|_ }}
+                        </h3>
+                    </div>
+                    <div class="box-body no-padding">
+                        {% include 'list.attachments' %}
+                    </div>
+                </div>
+            </div>
+        </div>
+    {% endif %}
+
+    {% if periods|length > 0 %}
+        <div class="row">
+            <div class="col-lg-offset-10 col-lg-2 col-md-offset-10 col-md-2 col-sm-12 col-xs-12">
+                <p class="small text-center"><a
+                            href="{{ route('tags.show',[tag.id,'all']) }}">{{ 'showEverything'|_ }}</a></p>
+            </div>
+        </div>
+    {% endif %}
+    <div class="row">
+        <div class="{% if periods|length > 0 %}col-lg-10 col-md-10 col-sm-12 col-xs-12{% else %}col-lg-12 col-md-12 col-sm-12 col-xs-12{% endif %}">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'transactions'|_ }}</h3>
+
+
+                    <div class="box-tools pull-right">
+                        <div class="btn-group">
+                            <button class="btn btn-box-tool dropdown-toggle" data-toggle="dropdown"><span
+                                        class="fa fa-ellipsis-v"></span></button>
+                            <ul class="dropdown-menu" role="menu">
+                                <li><a href="{{ route('tags.edit',tag.id) }}"><span
+                                                class="fa fa-pencil fa-fw"></span> {{ trans('firefly.edit_tag',{tag: tag.tag}) }}
+                                    </a></li>
+                                <li><a href="{{ route('tags.delete',tag.id) }}"><span
+                                                class="fa fa-trash fa-fw"></span> {{ trans('firefly.delete_tag',{tag: tag.tag}) }}
+                                    </a></li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+                <div class="box-body">
+                    {% include 'list.groups' with {showBudget:true, showCategory: true} %}
+
+                    {% if periods|length > 0 %}
+                        <p>
+                            <span class="fa fa-calendar"></span>
+                            <a href="{{ route('tags.show', [tag.id,'all']) }}">
+                                {{ 'show_all_no_filter'|_ }}
+                            </a>
+                        </p>
+                    {% else %}
+                        <p>
+                            <span class="fa fa-calendar"></span>
+                            <a href="{{ route('tags.show', [tag.id]) }}">
+                                {{ 'show_the_current_period_and_overview'|_ }}
+                            </a>
+                        </p>
+                    {% endif %}
+                </div>
+            </div>
+        </div>
+        {% if periods|length > 0 %}
+            <div class="col-lg-2 col-md-2 col-sm-12 col-xs-12">
+                {% include 'list.periods' %}
+            </div>
+        {% endif %}
+    </div>
+    {% if periods|length > 0 %}
+        <div class="row">
+            <div class="col-lg-offset-10 col-lg-2 col-md-offset-10 col-md-2 col-sm-12 col-xs-12">
+                <p class="small text-center"><a href="{{ route('tags.show',[tag.id]) }}">{{ 'showEverything'|_ }}</a>
+                </p>
+            </div>
+        </div>
+    {% endif %}
+
+{% endblock %}
+{% block styles %}
+    <link rel="stylesheet" href="v1/lib/leaflet/leaflet.css?v={{ FF_VERSION }}"/>
+{% endblock %}
+{% block scripts %}
+    <script type="text/javascript" nonce="{{ JS_NONCE }}">
+        // location stuff
+        {% if location %}
+        var latitude = {{ location.latitude|default("52.3167") }};
+        var longitude = {{ location.longitude|default("5.5500") }};
+        var zoomLevel = {{ location.zoom_level|default("6") }};
+        var doPlaceMarker = true;
+        // token for Mapbox:
+        var mapboxToken = "{{ config('firefly.mapbox_api_key') }}";
+        {% endif %}
+    </script>
+    <script src="v1/lib/leaflet/leaflet.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script src="v1/js/ff/tags/show.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/ff/list/groups.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+{% endblock %}
diff --git a/resources/views/test/test.twig b/resources/views/test/test.twig
new file mode 100644
index 0000000000..6befc1f428
--- /dev/null
+++ b/resources/views/test/test.twig
@@ -0,0 +1,2 @@
+list-length: {{ listLength }}
+user-email: {{ Auth.user.email }}
diff --git a/resources/views/transactions/bulk/edit.twig b/resources/views/transactions/bulk/edit.twig
new file mode 100644
index 0000000000..4786b49eb7
--- /dev/null
+++ b/resources/views/transactions/bulk/edit.twig
@@ -0,0 +1,199 @@
+{% extends './v1/layout/default' %}
+
+{% block breadcrumbs %}
+    {{ Breadcrumbs.render(Route.getCurrentRoute.getName, journals) }}
+{% endblock %}
+
+{% block content %}
+    <form method="POST" action="{{ route('transactions.bulk.update') }}" accept-charset="UTF-8" class="form-horizontal" id="update">
+        <input name="_token" type="hidden" value="{{ csrf_token() }}">
+
+        <div class="row">
+            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
+                <div class="box box-default">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ 'mass_bulk_journals'|_ }}</h3>
+                    </div>
+
+                    <div class="box-body">
+                        <p>
+                            {{ 'mass_bulk_journals_explain'|_ }}
+                        </p>
+
+                        <div class="row">
+                            <div class="col-lg-8 col-md-12 col-sm-12 col-xs-12">
+                                <table class="table table-striped table-condensed">
+                                    <thead>
+                                    <tr>
+                                        <th>{{ trans('list.description') }}</th>
+                                        <th>{{ trans('list.amount') }}</th>
+                                        <th>{{ trans('list.date') }}</th>
+                                        <th>{{ trans('list.category') }}</th>
+                                        <th>{{ trans('list.budget') }}</th>
+                                        <th>{{ trans('list.tags') }}</th>
+                                        <th>&nbsp;</th>
+                                    </tr>
+                                    </thead>
+                                    <tbody>
+                                    {% for journal in journals %}
+                                        <input type="hidden" name="journals[]" value="{{ journal.transaction_journal_id }}"/>
+                                        <tr>
+                                            <td>
+                                                <a href="{{ route('transactions.show', [journal.transaction_group_id]) }}">
+                                                {{ journal.description }}</a></td>
+                                            <td>
+                                                {% if journal.transaction_type_type == 'Deposit' %}
+                                                    {{ formatAmountBySymbol(journal.amount*-1, journal.currency_symbol, journal.currency_decimal_places) }}
+                                                    {% if null != journal.foreign_amount %}
+                                                        ({{ formatAmountBySymbol(journal.foreign_amount*-1, journal.foreign_currency_symbol, journal.foreign_currency_decimal_places) }})
+                                                    {% endif %}
+                                                {% elseif journal.transaction_type_type == 'Transfer' %}
+                                                    <span class="text-info">
+                                                        {{ formatAmountBySymbol(journal.amount*-1, journal.currency_symbol, journal.currency_decimal_places, false) }}
+                                                        {% if null != journal.foreign_amount %}
+                                                            ({{ formatAmountBySymbol(journal.foreign_amount*-1, journal.foreign_currency_symbol, journal.foreign_currency_decimal_places, false) }})
+                                                        {% endif %}
+                                                    </span>
+                                                {% else %}
+                                                    {{ formatAmountBySymbol(journal.amount, journal.currency_symbol, journal.currency_decimal_places) }}
+                                                    {% if null != journal.foreign_amount %}
+                                                        ({{ formatAmountBySymbol(journal.foreign_amount, journal.foreign_currency_symbol, journal.foreign_currency_decimal_places) }})
+                                                    {% endif %}
+                                                {% endif %}
+                                                
+                                                
+                                            </td>
+                                            <td>{{ journal.date.formatLocalized(monthAndDayFormat) }}</td>
+                                            <td>
+                                                {% if journal.category_id != null %}
+                                                    <a href="{{ route('categories.show', [journal.category_id]) }}" title="{{ journal.category_name }}">{{ journal.category_name }}</a>
+                                                {% endif %}
+                                            </td>
+                                            <td>
+                                                {% if journal.budget_id != null %}
+                                                    <a href="{{ route('budgets.show', [journal.budget_id]) }}" title="{{ journal.budget_name }}">{{ journal.budget_name }}</a>
+                                                {% endif %}
+                                            </td>
+                                            <td>
+                                                {% for tag in journal.tags %}
+                                                    {% if 0 != tag.id %}
+                                                <span style="display: inline;"><a class="label label-success" href="{{ route('tags.show', [tag.id]) }}">
+                                                        <span class="fa fa-fw fa-tag"></span>
+                                                        {{ tag.name }}</a>
+                                                </span>
+                                                    {% endif %}
+                                                {% endfor %}
+                                            </td>
+                                            <td>
+                                                {% if journal.journals_in_group > 1  %}
+                                                    <span title="{{ 'part_of_split'|_ }}" class="text-danger fa fa-fw fa-exclamation-triangle"></span>
+                                                {% endif %}
+                                            </td>
+                                        </tr>
+                                    {% endfor %}
+                                    </tbody>
+                                </table>
+                            </div>
+                        </div>
+                        <p>
+                            {{ 'bulk_set_new_values'|_ }}
+                        </p>
+                        <div class="row">
+                            <div class="col-lg-8 col-md-12 col-sm-12 col-xs-12">
+                                <table class="table table-striped table-condensed">
+                                    <tr>
+                                        <th style="width:25%;">{{ trans('list.category') }}</th>
+                                        <td>
+                                            <input class="form-control" placeholder="" name="category" autocomplete="off" type="text" value="">
+                                        </td>
+                                        <td>
+                                            <div class="checkbox">
+                                                <label>
+                                                    <input name="ignore_category" type="checkbox" value="1" checked>
+                                                    {{ 'no_bulk_category'|_ }}
+                                                </label>
+                                            </div>
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                        <th>{{ trans('list.budget') }}</th>
+                                        <td>
+                                            <select class="form-control" name="budget_id">
+                                                {% for id, budget in budgetList %}
+                                                    <option value="{{ id }}" label="{{ budget }}">{{ budget }}</option>
+                                                {% endfor %}
+                                            </select>
+                                        </td>
+                                        <td>
+                                            <div class="checkbox">
+                                                <label>
+                                                    <input name="ignore_budget" type="checkbox" value="1" checked>
+                                                    {{ 'no_bulk_budget'|_ }}
+                                                </label>
+                                            </div>
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                        <th>{{ trans('list.tags') }}</th>
+                                        <td>
+                                            <input class="form-control" placeholder="" name="tags" autocomplete="off" type="text" value="">
+                                        </td>
+                                        <td>
+                                            <div class="radio">
+                                                <label>
+                                                    <input type="radio" name="tags_action" id="tags_action_do_nothing" value="no_nothing" checked />
+                                                    {{ 'no_bulk_tags'|_ }}
+                                                </label>
+                                            </div>
+                                            <div class="radio">
+                                                <label>
+                                                    <input type="radio" name="tags_action" id="tags_action_do_replace" value="do_replace" />
+                                                    {{ 'replace_with_these_tags'|_ }}
+                                                </label>
+                                            </div>
+                                            <div class="radio">
+                                                <label>
+                                                    <input type="radio" name="tags_action" id="tags_action_do_append" value="do_append" />
+                                                    {{ 'append_these_tags'|_ }}
+                                                </label>
+                                            </div>
+                                        </td>
+                                    </tr>
+                                </table>
+
+                            </div>
+                        </div>
+
+                    </div>
+
+                    <div class="box-footer">
+                        <div class="row">
+                            <div class="col-lg-8">
+                                <input type="submit" name="submit" value="{{ trans('form.update_all_journals') }}" class="btn btn-success pull-right"/>
+                                <a href="{{ route('index') }}" class="btn-default btn">{{ trans('form.cancel') }}</a>
+                            </div>
+                        </div>
+
+
+                    </div>
+
+                </div>
+
+            </div>
+
+        </div>
+
+    </form>
+{% endblock %}
+{% block scripts %}
+    <script type="text/javascript" nonce="{{ JS_NONCE }}">
+        var what = "";
+    </script>
+    <script type="text/javascript" src="v1/js/lib/typeahead/typeahead.bundle.min.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/ff/common/autocomplete.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/lib/bootstrap-tagsinput.min.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/ff/transactions/mass/edit-bulk.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+{% endblock %}
+{% block styles %}
+    <link href="v1/css/bootstrap-tagsinput.css?v={{ FF_VERSION }}" type="text/css" rel="stylesheet"  media="all" nonce="{{ JS_NONCE }}">
+{% endblock %}
diff --git a/resources/views/transactions/convert.twig b/resources/views/transactions/convert.twig
new file mode 100644
index 0000000000..dfb37d0618
--- /dev/null
+++ b/resources/views/transactions/convert.twig
@@ -0,0 +1,285 @@
+{% extends './v1/layout/default' %}
+
+{% block breadcrumbs %}
+    {{ Breadcrumbs.render(Route.getCurrentRoute.getName, group, groupTitle) }}
+{% endblock %}
+
+{% block content %}
+    <form method="POST" action="{{ route('transactions.convert.index.post', [destinationType.type|lower, group.id]) }}" accept-charset="UTF-8"
+          class="form-horizontal"
+          enctype="multipart/form-data">
+        <input name="_token" type="hidden" value="{{ csrf_token() }}">
+        <div class="row">
+            <div class="col-lg-8 col-lg-offset-2 col-md-12 col-sm-12">
+                <div class="box box-primary">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ ('convert_options_'~sourceType.type~destinationType.type)|_ }}</h3>
+                    </div>
+                    <div class="box-body">
+                        <p>
+                            {# ONE: WITHDRAWAL TO DEPOSIT #}
+                            {% if sourceType.type == 'Withdrawal' and destinationType.type == 'Deposit' %}
+                                {{ trans_choice('firefly.convert_expl_w_d', groupArray.transactions|length) }}
+                                {{ trans_choice('firefly.convert_select_sources', groupArray.transactions|length) }}
+                            {% endif %}
+
+                            {# TWO: WITHDRAWAL TO TRANSFER #}
+                            {% if sourceType.type == 'Withdrawal' and destinationType.type == 'Transfer' %}
+                                {{ trans_choice('firefly.convert_expl_w_t', groupArray.transactions|length) }}
+                                {{ trans_choice('firefly.convert_select_destinations', groupArray.transactions|length) }}
+                            {% endif %}
+
+                            {# THREE: DEPOSIT TO WITHDRAWAL #}
+                            {% if sourceType.type == 'Deposit' and destinationType.type == 'Withdrawal' %}
+                                {{ trans_choice('firefly.convert_expl_d_w', groupArray.transactions|length) }}
+                                {{ trans_choice('firefly.convert_select_destinations', groupArray.transactions|length) }}
+                            {% endif %}
+
+                            {# FOUR: DEPOSIT TO TRANSFER#}
+                            {% if sourceType.type == 'Deposit' and destinationType.type == 'Transfer' %}
+                                {{ trans_choice('firefly.convert_expl_d_t', groupArray.transactions|length) }}
+                                {{ trans_choice('firefly.convert_select_sources', groupArray.transactions|length) }}
+                            {% endif %}
+
+                            {# FIVE: TRANSFER TO WITHDRAWAL #}
+                            {% if sourceType.type == 'Transfer' and destinationType.type == 'Withdrawal' %}
+                                {{ trans_choice('firefly.convert_expl_t_w', groupArray.transactions|length) }}
+                                {{ trans_choice('firefly.convert_select_destinations', groupArray.transactions|length) }}
+                            {% endif %}
+
+                            {# SIX: TRANSFER TO DEPOSIT #}
+                            {% if sourceType.type == 'Transfer' and destinationType.type == 'Deposit' %}
+                                {{ trans_choice('firefly.convert_expl_t_d', groupArray.transactions|length) }}
+                                {{ trans_choice('firefly.convert_select_sources', groupArray.transactions|length) }}
+                            {% endif %}
+                        </p>
+
+                        <table class="table">
+                            <tr>
+                                <th style="width:10%;">ID</th>
+                                <th style="width:25%;">Description</th>
+                                <th style="width:25%;">Source account</th>
+                                <th style="width:25%;">Destination account</th>
+                                <th style="width:15%;">Amount</th>
+                            </tr>
+                            {% for transaction in groupArray.transactions %}
+                                <tr>
+                                    <td>#{{ transaction.transaction_journal_id }}</td>
+                                    <td>{{ transaction.description }}</td>
+                                    <td>
+                                        {# ONE: WITHDRAWAL TO DEPOSIT #}
+                                        {% if sourceType.type == 'Withdrawal' and destinationType.type == 'Deposit' %}
+                                            {# NEW DESTINATION = Asset, SOURCE MUST BE [Revenue, Cash, Loan, Debt, Mortgage] #}
+                                            {% if transaction.source_type == 'Asset account' %}
+                                                {{ Form.select('source_id['~transaction.transaction_journal_id~']', validDepositSources, null, {class: 'form-control'}) }}
+                                            {% endif %}
+
+                                            {# NEW DESTINATION = [Loan, Debt, Mortgage], SOURCE MUST BE [Revenue] #}
+                                            {% if
+                                                transaction.source_type == 'Loan' or
+                                                transaction.source_type == 'Debt' or
+                                                transaction.source_type == 'Mortgage' %}
+                                                <input
+                                                        autocomplete="off"
+                                                        placeholder="Source account"
+                                                        name="source_name[{{ transaction.transaction_journal_id }}]"
+                                                        type="text"
+                                                        value="{% if transaction.destination_type != "Cash account" %}{{ preFilled.source_name[transaction.transaction_journal_id]|default(transaction.destination_name) }}{% endif %}"
+                                                        class="form-control tt-input input-revenue"
+                                                        spellcheck="false" dir="auto">
+                                            {% endif %}
+                                        {% endif %}
+
+                                        {# TWO: WITHDRAWAL TO TRANSFER #}
+                                        {% if sourceType.type == 'Withdrawal' and destinationType.type == 'Transfer' %}
+
+                                            <a href="{{ route('accounts.show', [transaction.source_id]) }}"
+                                               title="{{ transaction.source_iban|default(transaction.source_name) }}">{{ transaction.source_name }}</a>
+                                            {# hide source in hidden input #}
+                                            <input type="hidden" name="source_id[{{ transaction.transaction_journal_id }}]" value="{{ transaction.source_id }}">
+                                        {% endif %}
+
+                                        {# THREE: DEPOSIT TO WITHDRAWAL #}
+                                        {% if sourceType.type == 'Deposit' and destinationType.type == 'Withdrawal' %}
+                                            <a href="{{ route('accounts.show', [transaction.destination_id]) }}"
+                                               title="{{ transaction.destination_iban|default(transaction.destination_name) }}">{{ transaction.destination_name }}</a>
+
+                                            {# hide new source in hidden input #}
+                                            <input type="hidden" name="source_id[{{ transaction.transaction_journal_id }}]" value="{{ transaction.destination_id }}">
+                                        {% endif %}
+
+                                        {# FOUR: DEPOSIT TO TRANSFER#}
+                                        {% if sourceType.type == 'Deposit' and destinationType.type == 'Transfer' %}
+                                            {# if new destination is asset, then asset#}
+                                            {% if transaction.destination_type == 'Asset account' %}
+                                                {{ Form.select('source_id['~transaction.transaction_journal_id~']', assets,null, {class: 'form-control'}) }}
+                                            {% endif %}
+                                            {% if transaction.destination_type == 'Loan' or
+                                                transaction.destination_type == 'Debt' or
+                                                transaction.destination_type == 'Mortgage' %}
+                                                {{ Form.select('source_id['~transaction.transaction_journal_id~']', liabilities,null, {class: 'form-control'}) }}
+                                            {% endif %}
+
+                                            {# if new destination liability, then liability.#}
+
+                                        {% endif %}
+
+                                        {# FIVE: TRANSFER TO WITHDRAWAL #}
+                                        {% if sourceType.type == 'Transfer' and destinationType.type == 'Withdrawal' %}
+                                            <a href="{{ route('accounts.show', [transaction.source_id]) }}"
+                                               title="{{ transaction.source_iban|default(transaction.source_name) }}">{{ transaction.source_name }}</a>
+
+                                            {# hide source in hidden input #}
+                                            <input type="hidden" name="source_id[{{ transaction.transaction_journal_id }}]" value="{{ transaction.source_id }}">
+                                        {% endif %}
+
+                                        {# SIX: TRANSFER TO DEPOSIT #}
+                                        {% if sourceType.type == 'Transfer' and destinationType.type == 'Deposit' %}
+                                            {# NEW DESTINATION = Asset, SOURCE MUST BE [Revenue, Cash, Loan, Debt, Mortgage] #}
+                                            {% if
+                                                transaction.source_type == 'Asset account' %}
+                                                {{ Form.select('source_id['~transaction.transaction_journal_id~']', validDepositSources, null, {class: 'form-control'}) }}
+                                            {% endif %}
+                                            {# NEW DESTINATION = [Debt, Mortgage, Load], SOURCE MUST BE [Revenue] #}
+                                            {% if
+                                                transaction.source_type == 'Loan' or
+                                                transaction.source_type == 'Debt' or
+                                                transaction.source_type == 'Mortgage' %}
+                                                <input
+                                                        autocomplete="off"
+                                                        placeholder="Source account"
+                                                        name="source_name[{{ transaction.transaction_journal_id }}]"
+                                                        type="text"
+                                                        value="{% if transaction.destination_type != "Cash account" %}{{ transaction.source_name }}{% endif %}"
+                                                        class="form-control tt-input"
+                                                        spellcheck="false" dir="auto">
+                                            {% endif %}
+
+                                        {% endif %}
+
+                                    </td>
+                                    <td>
+                                        {# ONE: WITHDRAWAL TO DEPOSIT #}
+                                        {% if sourceType.type == 'Withdrawal' and destinationType.type == 'Deposit' %}
+                                            <a href="{{ route('accounts.show', [transaction.source_id]) }}"
+                                               title="{{ transaction.source_iban|default(transaction.source_name) }}">{{ transaction.source_name }}</a>
+
+                                            {# hide destination in hidden input #}
+                                            <input type="hidden" name="destination_id[{{ transaction.transaction_journal_id }}]" value="{{ transaction.source_id }}">
+                                        {% endif %}
+
+                                        {# TWO: WITHDRAWAL TO TRANSFER #}
+                                        {% if sourceType.type == 'Withdrawal' and destinationType.type == 'Transfer' %}
+                                            {#if the source is a liability, destination must also be a liability.#}
+                                            {% if
+                                                transaction.source_type == 'Loan' or
+                                                transaction.source_type == 'Debt' or
+                                                transaction.source_type == 'Mortgage' %}
+                                                {{ Form.select('destination_id['~transaction.transaction_journal_id~']', liabilities, null, {class: 'form-control'}) }}
+                                            {% endif %}
+
+                                            {# if the source is an asset, destination can only be an asset. #}
+                                            {% if transaction.source_type == 'Asset account' %}
+                                                {{ Form.select('destination_id['~transaction.transaction_journal_id~']', assets, null, {class: 'form-control'}) }}
+                                            {% endif %}
+                                        {% endif %}
+
+                                        {# THREE: DEPOSIT TO WITHDRAWAL #}
+                                        {% if sourceType.type == 'Deposit' and destinationType.type == 'Withdrawal' %}
+
+                                            {# if new source is Asset, destination must be [Expense, Loan, Debt or Mortgage] #}
+                                            {% if transaction.destination_type == 'Asset account' %}
+                                                {{ Form.select('destination_id['~transaction.transaction_journal_id~']', validWithdrawalDests, null, {class: 'form-control'}) }}
+                                            {% endif %}
+                                            {% if transaction.destination_type == 'Loan' or
+                                                transaction.destination_type == 'Debt' or
+                                                transaction.destination_type == 'Mortgage' %}
+                                                {# if new source is Liability, destination must be expense account. #}
+
+                                                <input
+                                                        autocomplete="off"
+                                                        placeholder="Destination account"
+                                                        name="destination_name[{{ transaction.transaction_journal_id }}]"
+                                                        type="text"
+                                                        value="{% if transaction.source_type != "Cash account" %}{{ transaction.source_name }}{% endif %}"
+                                                        class="form-control tt-input"
+                                                        spellcheck="false" dir="auto">
+                                            {% endif %}
+                                        {% endif %}
+
+                                        {# FOUR: DEPOSIT TO TRANSFER#}
+                                        {% if sourceType.type == 'Deposit' and destinationType.type == 'Transfer' %}
+                                            <a href="{{ route('accounts.show', [transaction.destination_id]) }}"
+                                               title="{{ transaction.destination_iban|default(transaction.destination_name) }}">{{ transaction.destination_name }}</a>
+
+                                            {# hide destination in hidden input #}
+                                            <input type="hidden" name="destination_id[{{ transaction.transaction_journal_id }}]" value="{{ transaction.destination_id }}">
+                                        {% endif %}
+
+                                        {# FIVE: TRANSFER TO WITHDRAWAL #}
+                                        {% if sourceType.type == 'Transfer' and destinationType.type == 'Withdrawal' %}
+
+                                            {% if transaction.source_type == 'Asset account' %}
+                                                {{ Form.select('destination_id['~transaction.transaction_journal_id~']', validWithdrawalDests, null, {class: 'form-control'}) }}
+                                            {% endif %}
+                                            {% if transaction.source_type == 'Loan' or
+                                                transaction.source_type == 'Debt' or
+                                                transaction.source_type == 'Mortgage' %}
+                                                <input
+                                                        autocomplete="off"
+                                                        placeholder="Destination account"
+                                                        name="destination_name[{{ transaction.transaction_journal_id }}]"
+                                                        type="text"
+                                                        value="{% if transaction.source_type != "Cash account" %}{{ transaction.destination_name }}{% endif %}"
+                                                        class="form-control tt-input"
+                                                        spellcheck="false" dir="auto">
+                                            {% endif %}
+                                        {% endif %}
+
+                                        {# SIX: TRANSFER TO DEPOSIT #}
+                                        {% if sourceType.type == 'Transfer' and destinationType.type == 'Deposit' %}
+                                            <a href="{{ route('accounts.show', [transaction.destination_id]) }}"
+                                               title="{{ transaction.destination_iban|default(transaction.destination_name) }}">{{ transaction.destination_name }}</a>
+
+                                            {# hide destination in hidden input #}
+                                            <input type="hidden" name="destination_id[{{ transaction.transaction_journal_id }}]" value="{{ transaction.destination_id }}">
+                                        {% endif %}
+                                    </td>
+                                    <td>
+                                        {% if transaction.transaction_type_type == 'Deposit' %}
+                                            {{ formatAmountBySymbol(transaction.amount*-1, transaction.currency_symbol, transaction.currency_decimal_places) }}
+                                            {% if null != transaction.foreign_amount %}
+                                                ({{ formatAmountBySymbol(transaction.foreign_amount*-1, transaction.foreign_currency_symbol, transaction.foreign_currency_decimal_places) }})
+                                            {% endif %}
+                                        {% elseif transaction.transaction_type_type == 'Transfer' %}
+                                            <span class="text-info">{{ formatAmountBySymbol(transaction.amount*-1, transaction.currency_symbol, transaction.currency_decimal_places, false) }}
+                                                {% if null != transaction.foreign_amount %}
+                                                    ({{ formatAmountBySymbol(transaction.foreign_amount*-1, transaction.foreign_currency_symbol, transaction.foreign_currency_decimal_places, false) }})
+                                                {% endif %}</span>
+                                        {% else %}
+                                            {{ formatAmountBySymbol(transaction.amount, transaction.currency_symbol, transaction.currency_decimal_places) }}
+                                            {% if null != transaction.foreign_amount %}
+                                                ({{ formatAmountBySymbol(transaction.foreign_amount, transaction.foreign_currency_symbol, transaction.foreign_currency_decimal_places) }})
+                                            {% endif %}
+                                        {% endif %}
+                                    </td>
+                                </tr>
+                            {% endfor %}
+                        </table>
+                    </div>
+                    <div class="box-footer">
+                        <a href="{{ route('transactions.show', group.id) }}" class="btn btn-danger">{{ 'cancel'|_ }}</a>
+                        <button type="submit" id="transaction-btn" class="btn btn-success pull-right">
+                            {{ trans('form.convert_'~sourceType.type) }}
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </form>
+
+{% endblock %}
+{% block scripts %}
+    <script type="text/javascript" src="v1/js/lib/typeahead/typeahead.bundle.min.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/ff/transactions/convert.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+{% endblock %}
diff --git a/resources/views/transactions/create.twig b/resources/views/transactions/create.twig
new file mode 100644
index 0000000000..bbe1ce6073
--- /dev/null
+++ b/resources/views/transactions/create.twig
@@ -0,0 +1,20 @@
+{% set VUE_SCRIPT_NAME = 'create_transaction' %}
+{% extends './v1/layout/default' %}
+{% block breadcrumbs %}
+    {{ Breadcrumbs.render(Route.getCurrentRoute.getName, objectType) }}
+{% endblock %}
+
+{% block content %}
+    <div id="create_transaction"></div>
+{% endblock %}
+{% block scripts %}
+    <script type="text/javascript" nonce="{{ JS_NONCE }}">
+        var allowedOpposingTypes = {{ allowedOpposingTypes|json_encode|raw }};
+        var accountToTypes = {{ accountToTypes|json_encode|raw }};
+        var defaultCurrency = {{ defaultCurrency.toArray()|json_encode|raw }};
+        var cashAccountId = {{ cash.id }};
+        var previousUrl = '{{ previousUrl }}';
+        window.sourceId = {{ sourceId }};
+        window.destinationId = {{ destinationId }};
+    </script>
+{% endblock %}
diff --git a/resources/views/transactions/delete.twig b/resources/views/transactions/delete.twig
new file mode 100644
index 0000000000..3b636fe5ba
--- /dev/null
+++ b/resources/views/transactions/delete.twig
@@ -0,0 +1,35 @@
+{% extends './v1/layout/default' %}
+
+{% block breadcrumbs %}
+    {{ Breadcrumbs.render(Route.getCurrentRoute.getName, group) }}
+{% endblock %}
+
+{% block content %}
+    <form method="POST" action="{{ route('transactions.destroy',group.id) }}" accept-charset="UTF-8" class="form-horizontal" id="destroy">
+        <input name="_token" type="hidden" value="{{ csrf_token() }}">
+
+        <div class="row">
+            <div class="col-lg-6 col-lg-offset-3 col-md-6 col-sm-12">
+                <div class="box box-danger">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ trans('form.delete_journal', {'description': group.title|default(journal.description)}) }}</h3>
+                    </div>
+                    <div class="box-body">
+                        <p class="text-danger">
+                            {{ trans('form.permDeleteWarning') }}
+                        </p>
+
+                        <p>
+                            {{ trans('form.journal_areYouSure', {'description': group.title|default(journal.description)}) }}
+                        </p>
+                    </div>
+                    <div class="box-footer">
+                        <input type="submit" name="submit" value="{{ trans('form.deletePermanently') }}" class="btn btn-danger pull-right"/>
+                        <a href="{{ previous }}" class="btn-default btn">{{ trans('form.cancel') }}</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+    </form>
+{% endblock %}
diff --git a/resources/views/transactions/edit.twig b/resources/views/transactions/edit.twig
new file mode 100644
index 0000000000..560a2c96b0
--- /dev/null
+++ b/resources/views/transactions/edit.twig
@@ -0,0 +1,28 @@
+{% set VUE_SCRIPT_NAME = 'edit_transaction' %}
+{% extends './v1/layout/default' %}
+{% block breadcrumbs %}
+    {{ Breadcrumbs.render(Route.getCurrentRoute.getName, transactionGroup) }}
+{% endblock %}
+
+{% block content %}
+    <div id="edit_transaction"></div>
+{% endblock %}
+
+
+{% block definitions %}
+    <script type="text/javascript" nonce="{{ JS_NONCE }}">
+        var allowedOpposingTypes = {{ allowedOpposingTypes|json_encode|raw }};
+        var accountToTypes = {{ accountToTypes|json_encode|raw }};
+        var defaultCurrency = {{ defaultCurrency.toArray()|json_encode|raw }};
+        var allowedSourceDests = {{ allowedSourceDests|json_encode|raw }};
+        var expectedSourceTypes = {{ expectedSourceTypes|json_encode|raw }};
+        var cashAccountId = {{ cash.id }};
+        var previousUrl = '{{ previousUrl }}';
+    </script>
+{% endblock %}
+
+{% block scripts %}
+
+{% endblock %}
+{% block styles %}
+{% endblock %}
diff --git a/resources/views/transactions/index.twig b/resources/views/transactions/index.twig
new file mode 100644
index 0000000000..6540483763
--- /dev/null
+++ b/resources/views/transactions/index.twig
@@ -0,0 +1,140 @@
+{% extends './v1/layout/default' %}
+
+{% block breadcrumbs %}
+    {{ Breadcrumbs.render(Route.getCurrentRoute.getName, objectType, start, end) }}
+{% endblock %}
+
+{% block content %}
+
+    {# upper show-all instruction #}
+    {% if periods|length > 0 %}
+        <div class="row">
+            <div class="col-lg-offset-10 col-lg-2 col-md-offset-10 col-md-2 col-sm-12 col-xs-12">
+                <p class="small text-center"><a href="{{ route('transactions.index.all',[objectType]) }}">{{ 'showEverything'|_ }}</a></p>
+            </div>
+        </div>
+    {% endif %}
+
+    {% if periods|length > 0 %}
+
+        {% set boxSize = 'col-lg-4 col-md-6 col-sm-12 col-xs-12' %}
+        <div class="row">
+            {# for withdrawals, deposits and transfers #}
+            <div class="{{ boxSize }}">
+                <div class="box">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ 'categories'|_ }}</h3>
+                    </div>
+                    <div class="box-body">
+                        <canvas id="category_chart" style="width:100%;height:250px;" height="250"></canvas>
+                    </div>
+                </div>
+            </div>
+            {# only for withdrawals #}
+            {% if objectType == 'withdrawal' %}
+                <div class="{{ boxSize }}">
+                    <div class="box">
+                        <div class="box-header with-border">
+                            <h3 class="box-title">{{ 'budgets'|_ }}</h3>
+                        </div>
+                        <div class="box-body">
+                            <canvas id="budget_chart" style="width:100%;height:250px;" height="250"></canvas>
+                        </div>
+                    </div>
+                </div>
+            {% endif %}
+            {% if objectType != 'withdrawal' %}
+                <div class="{{ boxSize }}">
+                    <div class="box">
+                        <div class="box-header with-border">
+                            <h3 class="box-title">{{ 'all_source_accounts'|_ }}</h3>
+                        </div>
+                        <div class="box-body">
+                            <canvas id="source_chart" style="width:100%;height:250px;" height="250"></canvas>
+                        </div>
+                    </div>
+                </div>
+            {% endif %}
+            {# for all #}
+            <div class="{{ boxSize }}">
+                <div class="box">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ 'all_destination_accounts'|_ }}</h3>
+                    </div>
+                    <div class="box-body">
+                        <canvas id="destination_chart" style="width:100%;height:250px;" height="250"></canvas>
+                    </div>
+                </div>
+            </div>
+        </div>
+    {% endif %}
+
+    {# list with journals #}
+    <div class="row">
+        <div class="{% if periods|length > 0 %}col-lg-10 col-md-10 col-sm-12{% else %}col-lg-12 col-md-12 col-sm-12{% endif %}">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ subTitle }}</h3>
+                </div>
+                <div class="box-body no-padding">
+                    <div style="padding:8px;">
+                        <a href="{{ route('transactions.create', [objectType]) }}" class="btn btn-success"><span class="fa fa-plus fa-fw"></span> {{ 'create_new_transaction'|_ }}</a>
+                    </div>
+                    {# actual list #}
+                    {% include 'v1.list.groups' %}
+                </div>
+                <div class="box-footer">
+                    {# links for other views #}
+                    {% if periods|length > 0 %}
+                        <p>
+                            <span class="fa fa-calendar"></span>
+                            <a href="{{ route('transactions.index.all', [objectType]) }}">{{ 'show_all_no_filter'|_ }}</a>
+                        </p>
+                    {% else %}
+                        <p>
+                            <span class="fa fa-calendar"></span>
+                            <a href="{{ route('transactions.index', [objectType]) }}">{{ 'show_the_current_period_and_overview'|_ }}</a>
+                        </p>
+                    {% endif %}
+                </div>
+            </div>
+        </div>
+
+        {# boxes with info #}
+        {% if periods|length > 0 %}
+            <div class="col-lg-2 col-md-2 col-sm-12 col-xs-12">
+                {% include 'v1.list.periods' %}
+            </div>
+        {% endif %}
+
+    </div>
+
+    {# lower show-all instruction #}
+    {% if periods|length > 0 %}
+        <div class="row">
+            <div class="col-lg-offset-10 col-lg-2 col-md-offset-10 col-md-2 col-sm-12 col-xs-12">
+                <p class="small text-center"><a href="{{ route('transactions.index.all', [objectType]) }}">{{ 'showEverything'|_ }}</a></p>
+            </div>
+        </div>
+    {% endif %}
+
+{% endblock %}
+{% block scripts %}
+    {# required for groups.twig #}
+    <script type="text/javascript" src="v1/js/ff/list/groups.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" nonce="{{ JS_NONCE }}">
+        var showAll = {% if periods|length > 0 %}false{% else %}true{% endif %};
+
+        var categoryChartUri = '{{ route('chart.transactions.categories', [objectType, start.format('Y-m-d'), end.format('Y-m-d')]) }}';
+        var budgetChartUri = '{{ route('chart.transactions.budgets', [start.format('Y-m-d'), end.format('Y-m-d')]) }}';
+        var destinationChartUri = '{{ route('chart.transactions.destinationAccounts', [objectType, start.format('Y-m-d'), end.format('Y-m-d')]) }}';
+        var sourceChartUri = '{{ route('chart.transactions.sourceAccounts', [objectType, start.format('Y-m-d'), end.format('Y-m-d')]) }}';
+
+    </script>
+    <script type="text/javascript" src="v1/js/lib/Chart.bundle.min.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/lib/chartjs-plugin-annotation.min.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/ff/charts.defaults.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/ff/charts.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+
+    <script type="text/javascript" src="v1/js/ff/transactions/index.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+{% endblock %}
diff --git a/resources/views/transactions/links/delete.twig b/resources/views/transactions/links/delete.twig
new file mode 100644
index 0000000000..fb18fb1c19
--- /dev/null
+++ b/resources/views/transactions/links/delete.twig
@@ -0,0 +1,33 @@
+{% extends './v1/layout/default' %}
+
+{% block breadcrumbs %}
+    {{ Breadcrumbs.render(Route.getCurrentRoute.getName, link) }}
+{% endblock %}
+
+{% block content %}
+
+    <form method="POST" action="{{ route('transactions.link.destroy', [link.id]) }}" accept-charset="UTF-8" class="form-horizontal" id="destroy">
+        <input name="_token" type="hidden" value="{{ csrf_token() }}">
+        <div class="row">
+            <div class="col-lg-6 col-lg-offset-3 col-md-6 col-sm-12">
+                <div class="box box-danger">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ trans('firefly.delete_journal_link', {source: link.source.description|escape, destination: link.destination.description|escape, source_link: route('transactions.show', [link.source_id]) , destination_link: route('transactions.show',link.destination_id)})|raw }}</h3>
+                    </div>
+                    <div class="box-body">
+                        <p class="text-danger">
+                            {{ trans('form.permDeleteWarning') }}
+                        </p>
+                        <p>
+                            {{ trans('form.journal_link_areYouSure', {source: link.source.description|escape, destination: link.destination.description|escape, source_link: route('transactions.show', [link.source_id]) , destination_link: route('transactions.show',link.destination_id)})|raw }}
+                        </p>
+                    </div>
+                    <div class="box-footer">
+                        <input type="submit" name="submit" value="{{ trans('form.deletePermanently') }}" class="btn pull-right btn-danger"/>
+                        <a href="{{ URL.previous() }}" class="btn-default btn">{{ trans('form.cancel') }}</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </form>
+{% endblock %}
diff --git a/resources/views/transactions/links/modal.twig b/resources/views/transactions/links/modal.twig
new file mode 100644
index 0000000000..ecd38eaf0f
--- /dev/null
+++ b/resources/views/transactions/links/modal.twig
@@ -0,0 +1,52 @@
+<form action="{{ route('transactions.link.store', [journal.id]) }}" method="post" class="form-horizontal">
+    <input type="hidden" name="_token" value="{{ csrf_token() }}">
+    <input type="hidden" name="opposing" value="">
+    <div class="modal-dialog modal-lg">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h4 class="modal-title">{{ 'link_to_other_transaction'|_ }}</h4>
+            </div>
+            <div class="modal-body" id="helpBody">
+                <p>{{ 'select_transaction_to_link'|_ }}</p>
+                <div class="form-group">
+                    <label for="link_type" class="col-sm-4 control-label">{{ 'this_transaction'|_ }}</label>
+                    <div class="col-sm-8">
+                        <select id="link_type" class="form-control" name="link_type">
+                            {% for linkType in linkTypes %}
+                                <option label="{{ journalLinkTranslation('inward', linkType.inward) }}"
+                                        value="{{ linkType.id }}_inward">{{ journalLinkTranslation('inward', linkType.inward) }}</option>
+                                <option label="{{ journalLinkTranslation('outward', linkType.outward) }}"
+                                        value="{{ linkType.id }}_outward">{{ journalLinkTranslation('outward', linkType.outward) }}</option>
+                            {% endfor %}
+                        </select>
+                    </div>
+                </div>
+                <div class="form-group" id="journal-selection">
+                    <label for="selected" class="col-sm-4 control-label">{{ 'selected_transaction'|_ }}</label>
+                    <div class="col-sm-8">
+                        <p class="form-control-static" id="selected-journal">
+                        </p>
+                    </div>
+                </div>
+                <div class="form-group" id="journal-selector">
+                    <label for="link_other" class="col-sm-4 control-label">{{ 'transaction'|_ }}</label>
+                    <div class="col-sm-8">
+                        <input type="text" name="link_other" autocomplete="off" id="link_other" value="" class="form-control link-journal">
+                    </div>
+                </div>
+                <div class="form-group">
+                    <label for="notes" class="col-sm-4 control-label">{{ 'link_notes'|_ }}</label>
+                    <div class="col-sm-8">
+                        <textarea id="notes" name="notes" class="form-control"></textarea>
+                    </div>
+                </div>
+
+
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-default" data-dismiss="modal">{{ 'close'|_ }}</button>
+                <button type="submit" class="btn btn-primary">{{ 'submit'|_ }}</button>
+            </div>
+        </div>
+    </div>
+</form>
diff --git a/resources/views/transactions/mass/delete.twig b/resources/views/transactions/mass/delete.twig
new file mode 100644
index 0000000000..135ef46d10
--- /dev/null
+++ b/resources/views/transactions/mass/delete.twig
@@ -0,0 +1,109 @@
+{% extends './v1/layout/default' %}
+
+{% block breadcrumbs %}
+    {{ Breadcrumbs.render(Route.getCurrentRoute.getName, journals) }}
+{% endblock %}
+
+{% block content %}
+    <form method="POST" action="{{ route('transactions.mass.destroy') }}" accept-charset="UTF-8" class="form-horizontal" id="destroy">
+        <input name="_token" type="hidden" value="{{ csrf_token() }}">
+
+        <div class="row">
+            <div class="col-lg-8 col-lg-offset-2 col-md-8 coll-offset-md-2 col-sm-12">
+                <div class="box box-danger">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ 'mass_delete_journals'|_ }}</h3>
+                    </div>
+                    <div class="box-body">
+                        <p class="text-danger">
+                            {{ trans('form.permDeleteWarning') }}
+                            {{ 'perm-delete-many'|_ }}
+                        </p>
+                        <p>
+                            {{ trans('form.mass_journal_are_you_sure') }}
+                            {{ trans('form.mass_make_selection') }}
+                        </p>
+
+                        <table class="table table-striped table-condensed">
+                            <tr>
+                                <th>&nbsp;</th>
+                                <th>{{ trans('list.transaction_type') }}</th>
+                                <th>{{ trans('list.description') }}</th>
+                                <th>{{ trans('list.amount') }}</th>
+                                <th class="hidden-sm hidden-xs">{{ trans('list.date') }}</th>
+                                <th class="hidden-xs">{{ trans('list.from') }}</th>
+                                <th class="hidden-xs">{{ trans('list.to') }}</th>
+                            </tr>
+                            {% for journal in journals %}
+                                <tr>
+                                    <td>
+                                        <input type="checkbox" name="confirm_mass_delete[]" value="{{ journal.transaction_journal_id }}" checked/>
+                                    </td>
+                                    <td>
+                                        {% if journal.transaction_type_type == 'Withdrawal' %}
+                                            <span class="fa fa-long-arrow-left fa-fw" title="{{ trans('firefly.Withdrawal') }}"></span>
+                                        {% endif %}
+
+                                        {% if journal.transaction_type_type == 'Deposit' %}
+                                            <span class="fa fa-long-arrow-right fa-fw" title="{{ trans('firefly.Deposit') }}"></span>
+                                        {% endif %}
+
+                                        {% if journal.transaction_type_type == 'Transfer' %}
+                                            <span class="fa fa-exchange fa-fw" title="{{ trans('firefly.Deposit') }}"></span>
+                                        {% endif %}
+
+                                        {% if journal.transaction_type_type == 'Reconciliation' %}
+                                            <span class="fa-fw fa fa-calculator" title="{{ trans('firefly.reconciliation_transaction') }}"></span>
+                                        {% endif %}
+                                        {% if journal.transaction_type_type == 'Opening balance' %}
+                                            <span class="fa-fw fa fa-star-o" title="{{ trans('firefly.Opening balance') }}"></span>
+                                        {% endif %}
+                                    </td>
+                                    <td>
+                                        <a href="{{ route('transactions.show',journal.transaction_journal_id) }}"
+                                           title="{{ journal.description }}">{{ journal.description }}</a>
+                                    </td>
+                                    <td>
+                                        {% if journal.transaction_type_type == 'Deposit' %}
+                                            {{ formatAmountBySymbol(journal.amount*-1, journal.currency_symbol, journal.currency_decimal_places) }}
+                                            {% if null != journal.foreign_amount %}
+                                                ({{ formatAmountBySymbol(journal.foreign_amount*-1, journal.foreign_currency_symbol, journal.foreign_currency_decimal_places) }})
+                                            {% endif %}
+                                        {% elseif journal.transaction_type_type == 'Transfer' %}
+                                            <span class="text-info">{{ formatAmountBySymbol(journal.amount*-1, journal.currency_symbol, journal.currency_decimal_places, false) }}
+                                                {% if null != journal.foreign_amount %}
+                                                    ({{ formatAmountBySymbol(journal.foreign_amount*-1, journal.foreign_currency_symbol, journal.foreign_currency_decimal_places, false) }})
+                                                {% endif %}
+                                            </span>
+                                        {% else %}
+                                            {{ formatAmountBySymbol(journal.amount, journal.currency_symbol, journal.currency_decimal_places) }}
+                                            {% if null != journal.foreign_amount %}
+                                                ({{ formatAmountBySymbol(journal.foreign_amount, journal.foreign_currency_symbol, journal.foreign_currency_decimal_places) }})
+                                            {% endif %}
+                                        {% endif %}
+                                    </td>
+                                    <td>
+                                        {{ journal.date.formatLocalized(monthAndDayFormat) }}
+                                    </td>
+                                    <td>
+                                        <a href="{{ route('accounts.show', [journal.source_account_id]) }}"
+                                           title="{{ journal.source_account_iban|default(journal.source_account_name) }}">{{ journal.source_account_name }}</a>
+                                    </td>
+                                    <td>
+                                        <a href="{{ route('accounts.show', [journal.destination_account_id]) }}"
+                                           title="{{ journal.destination_account_iban|default(journal.destination_account_name) }}">{{ journal.destination_account_name }}</a>
+                                    </td>
+                                </tr>
+                            {% endfor %}
+                        </table>
+
+                    </div>
+                    <div class="box-footer">
+                        <input type="submit" name="submit" value="{{ trans('form.delete_all_permanently') }}" class="btn btn-danger pull-right"/>
+                        <a href="{{ route('index') }}" class="btn-default btn">{{ trans('form.cancel') }}</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </form>
+{% endblock %}
diff --git a/resources/views/transactions/mass/edit.twig b/resources/views/transactions/mass/edit.twig
new file mode 100644
index 0000000000..8ab5e6926e
--- /dev/null
+++ b/resources/views/transactions/mass/edit.twig
@@ -0,0 +1,182 @@
+{% extends './v1/layout/default' %}
+
+{% block breadcrumbs %}
+    {{ Breadcrumbs.render(Route.getCurrentRoute.getName, journals) }}
+{% endblock %}
+
+{% block content %}
+    <form method="POST" action="{{ route('transactions.mass.update') }}" accept-charset="UTF-8" class="form-horizontal" id="destroy">
+        <input name="_token" type="hidden" value="{{ csrf_token() }}">
+
+        <div class="row">
+            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
+                <div class="box box-default">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ 'mass_edit_journals'|_ }}</h3>
+                    </div>
+                    <div class="box-body">
+                        <p>
+                            {{ 'cannot_edit_other_fields'|_ }}
+                            <span class="text-danger">{{ 'cannot_change_amount_reconciled'|_ }}</span>
+                        </p>
+
+                        <table class="table table-striped table-condensed">
+                            <tr>
+                                <th class="">&nbsp;</th>
+                                <th class="col-lg-2 col-md-2 col-sm-2">{{ trans('list.description') }}</th>
+                                <th class="col-lg-1 col-md-1 col-sm-1">{{ trans('list.amount') }}</th>
+                                <th class="col-lg-1 col-md-1 col-sm-1">{{ trans('list.date') }}</th>
+                                <th class="col-lg-2 col-md-2 col-sm-2">{{ trans('list.from') }}</th>
+                                <th class="col-lg-2 col-md-2 col-sm-2">{{ trans('list.to') }}</th>
+                                <th class="col-lg-2 col-md-2 col-sm-2">{{ trans('list.category') }}</th>
+                                <th class="col-lg-2 col-md-2 col-sm-2">{{ trans('list.budget') }}</th>
+                            </tr>
+                            {% for journal in journals %}
+                                <tr>
+                                    <td>
+                                        {# LINK TO EDIT FORM #}
+                                        <a href="{{ route('transactions.edit', journal.transaction_group_id) }}" class="btn btn-xs btn-default"><span
+                                                    class="fa fa-fw fa-pencil"></span></a>
+                                        <input type="hidden" name="journals[]" value="{{ journal.transaction_journal_id }}"/>
+                                    </td>
+                                    <td>
+                                        {# DESCRIPTION #}
+                                        <input class="form-control input-sm" autocomplete="off"
+                                               placeholder="{{ journal.description }}" name="description[{{ journal.transaction_journal_id }}]"
+                                               type="text" value="{{ journal.description }}">
+                                    </td>
+                                    {# AMOUNT #}
+                                    <td>
+                                        {% if journal.reconciled == false %}
+                                            <div class="input-group input-group-sm">
+                                                <span class="input-group-addon">{{ journal.currency_symbol }}</span>
+                                                <input name="amount[{{ journal.transaction_journal_id }}]" class="form-control" autocomplete="off"
+                                                       step="any" type="number" value="{{ journal.amount }}">
+                                                <input type="hidden" name="transaction_currency_id[{{ journal.transaction_journal_id }}]"
+                                                       value="{{ journal.currency_id }}">
+                                            </div>
+                                            {% if journal.foreign_amount %}
+                                                {# insert foreign data #}
+                                                <div class="input-group input-group-sm">
+                                                    <span class="input-group-addon">{{ journal.foreign_currency_symbol }}</span>
+                                                    <input name="foreign_amount[{{ journal.transaction_journal_id }}]" class="form-control" autocomplete="off"
+                                                           step="any" type="number" value="{{ journal.foreign_amount }}">
+                                                    <input type="hidden" name="foreign_currency_id[{{ journal.transaction_journal_id }}]"
+                                                           value="{{ journal.foreign_currency_id }}">
+                                                </div>
+                                            {% endif %}
+                                        {% endif %}
+                                        <span class="text-sm">
+                                        {% if journal.reconciled != false %}
+                                            {% if journal.transaction_type_type == 'Deposit' %}
+                                                {{ formatAmountBySymbol(journal.amount*-1, journal.currency_symbol, journal.currency_decimal_places) }}
+                                                {% if null != journal.foreign_amount %}
+                                                    ({{ formatAmountBySymbol(journal.foreign_amount*-1, journal.foreign_currency_symbol, journal.foreign_currency_decimal_places) }})
+                                                {% endif %}
+                                            {% elseif journal.transaction_type_type == 'Transfer' %}
+                                                <span class="text-info">
+                        {{ formatAmountBySymbol(journal.amount*-1, journal.currency_symbol, journal.currency_decimal_places, false) }}
+                                                    {% if null != journal.foreign_amount %}
+                                                        ({{ formatAmountBySymbol(journal.foreign_amount*-1, journal.foreign_currency_symbol, journal.foreign_currency_decimal_places, false) }})
+                                                    {% endif %}
+                                                </span>
+                                            {% else %}
+                                                {{ formatAmountBySymbol(journal.amount, journal.currency_symbol, journal.currency_decimal_places) }}
+                                                {% if null != journal.foreign_amount %}
+                                                    ({{ formatAmountBySymbol(journal.foreign_amount, journal.foreign_currency_symbol, journal.foreign_currency_decimal_places) }})
+                                                {% endif %}
+                                            {% endif %}
+                                        {% endif %}
+                                            </span>
+                                    </td>
+                                    <td>
+                                        {# DATE #}
+                                        <input class="form-control input-sm" autocomplete="off"
+                                               name="date[{{ journal.transaction_journal_id }}]" type="date" value="{{ journal.date|slice(0,10) }}">
+                                    </td>
+                                    <!-- {{ journal.transaction_type_type }} -->
+                                    <!-- Source: {{ journal.source_account_name }} ({{ journal.source_account_id }}) -->
+                                    <!-- Destination: {{ journal.destination_account_name }} ({{ journal.destination_account_id }}) -->
+                                    <td style="position: relative;">
+
+                                        {# SOURCE ACCOUNT ID FOR TRANSFER OR WITHDRAWAL #}
+                                        {% if journal.transaction_type_type == 'Transfer' or journal.transaction_type_type == 'Withdrawal' %}
+                                            <select class="form-control input-sm" name="source_id[{{ journal.transaction_journal_id }}]">
+                                                {% for account in withdrawalSources %}
+                                                    <option value="{{ account.id }}"{% if account.id == journal.source_account_id %} selected{% endif %}
+                                                            label="{{ account.name }}">{{ account.name }}</option>
+                                                {% endfor %}
+                                            </select>
+                                        {% endif %}
+
+                                        {# SOURCE ACCOUNT NAME FOR DEPOSIT #}
+                                        {% if journal.transaction_type_type == 'Deposit' %}
+                                            <input class="form-control input-sm"
+                                                   placeholder="{% if journal.source_type != 'Cash account' %}{{ journal.source_account_name }}{% endif %}"
+                                                   autocomplete="off"
+                                                   name="source_name[{{ journal.transaction_journal_id }}]" type="text"
+                                                   value="{% if journal.source_type != 'Cash account' %}{{ journal.source_account_name }}{% endif %}">
+                                        {% endif %}
+                                    </td>
+                                    <td style="position: relative;">
+
+                                        {# DESTINATION ACCOUNT NAME FOR TRANSFER AND DEPOSIT #}
+                                        {% if journal.transaction_type_type == 'Transfer' or journal.transaction_type_type == 'Deposit' %}
+
+                                            <select class="form-control input-sm" name="destination_id[{{ journal.transaction_journal_id }}]">
+                                                {% for account in depositDestinations %}
+                                                    <option value="{{ account.id }}"{% if account.id == journal.destination_account_id %} selected="selected"{% endif %}
+                                                            label="{{ account.name }}">{{ account.name }}</option>
+                                                {% endfor %}
+                                            </select>
+                                        {% endif %}
+
+                                        {# DESTINATION ACCOUNT NAME FOR WITHDRAWAL #}
+                                        {% if journal.transaction_type_type == 'Withdrawal' %}
+                                            <input class="form-control input-sm"
+                                                   placeholder="{% if journal.destination_type != 'Cash account' %}{{ journal.destination_account_name }}{% endif %}"
+                                                   name="destination_name[{{ journal.transaction_journal_id }}]" type="text" autocomplete="off"
+                                                   value="{% if journal.destination_type != 'Cash account' %}{{ journal.destination_account_name }}{% endif %}">
+                                        {% endif %}
+                                    </td>
+                                    {# category #}
+                                    <td style="position: relative;">
+                                        <input class="form-control input-sm" placeholder="{{ journal.category_name }}" autocomplete="off"
+                                               name="category[{{ journal.transaction_journal_id }}]" type="text" value="{{ journal.category_name }}">
+                                    </td>
+                                    {# budget #}
+                                    <td>
+                                        {% if journal.transaction_type_type == 'Withdrawal' %}
+                                            <select class="form-control input-sm" name="budget_id[{{ journal.transaction_journal_id }}]">
+                                                <option value="0" label="({{ 'no_budget'|_ }})"
+                                                        {% if journal.budget_id == 0 %}selected="selected"{% endif %}
+                                                >{{ 'no_budget'|_ }}
+                                                </option>
+                                                {% for budget in budgets %}
+                                                    <option value="{{ budget.id }}"{% if budget.id == journal.budget_id %} selected="selected"{% endif %}
+                                                            label="{{ budget.name }}">{{ budget.name }}</option>
+                                                {% endfor %}
+                                            </select>
+                                        {% endif %}
+                                    </td>
+                                </tr>
+                            {% endfor %}
+                        </table>
+                    </div>
+                    <div class="box-footer">
+                        <input type="submit" name="submit" value="{{ trans('form.update_all_journals') }}" class="btn btn-success pull-right"/>
+                        <a href="{{ route('index') }}" class="btn-default btn">{{ trans('form.cancel') }}</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </form>
+{% endblock %}
+{% block scripts %}
+    <script type="text/javascript" nonce="{{ JS_NONCE }}">
+        var what = "";
+    </script>
+    <script type="text/javascript" src="v1/js/lib/typeahead/typeahead.bundle.min.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/ff/common/autocomplete.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/ff/transactions/mass/edit.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+{% endblock %}
diff --git a/resources/views/transactions/show.twig b/resources/views/transactions/show.twig
new file mode 100644
index 0000000000..29542300b7
--- /dev/null
+++ b/resources/views/transactions/show.twig
@@ -0,0 +1,455 @@
+{% extends './v1/layout/default' %}
+
+{% block breadcrumbs %}
+    {{ Breadcrumbs.render(Route.getCurrentRoute.getName, transactionGroup) }}
+{% endblock %}
+
+{% block content %}
+    <div class="row">
+        <div class="col-lg-6">
+            <div class="box box-primary">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'transaction_journal_information'|_ }}</h3>
+                    <div class="btn-group btn-group-xs pull-right">
+                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                            {{ 'actions'|_}} <span class="caret"></span>
+                        </button>
+                        <ul class="dropdown-menu">
+                            {# edit + delete #}
+                            <li><a href="{{ route('transactions.edit', [transactionGroup.id]) }}"><span class="fa fa-pencil"></span> {{ 'edit'|_ }}</a></li>
+                            <li><a href="{{ route('transactions.delete', [transactionGroup.id]) }}"><span class="fa fa-trash"></span> {{ 'delete'|_ }}</a></li>
+                            <li role="separator" class="divider"></li>
+
+                            {# convert to different type #}
+                            {% if groupArray.transactions[0].type != 'withdrawal' %}
+                                <li><a href="{{ route('transactions.convert.index', ['withdrawal', transactionGroup.id]) }}"><span class="fa fa-exchange"></span> {{ 'convert_to_withdrawal'|_ }}</a></li>
+                            {% endif %}
+
+                            {% if groupArray.transactions[0].type != 'deposit' %}
+                                <li><a href="{{ route('transactions.convert.index', ['deposit', transactionGroup.id]) }}"><span class="fa fa-exchange"></span> {{ 'convert_to_deposit'|_ }}</a></li>
+                            {% endif %}
+
+                            {% if groupArray.transactions[0].type != 'transfer' %}
+                                <li><a href="{{ route('transactions.convert.index', ['transfer', transactionGroup.id]) }}"><span class="fa fa-exchange"></span> {{ 'convert_to_transfer'|_ }}</a></li>
+                            {% endif %}
+
+                            {#  clone #}
+                            {% if groupArray.transactions[0].type != 'opening balance' and groupArray.transactions[0].type != 'reconciliation' %}
+                                <li role="separator" class="divider"></li>
+                                <li><a href="#" class="clone-transaction" data-id="{{ transactionGroup.id }}"><span class="fa fa-copy"></span> {{ 'clone'|_ }}</a></li>
+                            {% endif %}
+
+                        </ul>
+                    </div>
+                </div>
+                <div class="box-body no-padding">
+                    <table class="table table-hover">
+                        <tbody>
+                        <tr>
+                            <td>{{ trans('list.type') }}</td>
+                            <td>{{ first.transactiontype.type|_ }}</td>
+                        </tr>
+                        <tr>
+                            <td>{{ trans('list.description') }}</td>
+                            <td>
+                                {% if splits == 1 %}
+                                    {{ first.description }}
+                                {% else %}
+                                    {{ transactionGroup.title }}
+                                {% endif %}
+                            </td>
+                        </tr>
+                        <tr>
+                            <td style="width:30%;">{{ trans('list.date') }}</td>
+                            <td>
+                                {{ first.date.formatLocalized(dateTimeFormat) }}
+                            </td>
+                        </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+        <div class="col-lg-6">
+            <div class="box box-primary">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'transaction_journal_meta'|_ }}</h3>
+                </div>
+                <div class="box-body no-padding">
+                    <table class="table table-hover">
+                        <tbody>
+                        {% if first.transactiontype.type != 'Withdrawal' or splits == 1 %}
+                            <tr>
+                                <td>
+                                    {{ trans_choice('firefly.source_accounts', accounts['source']|length ) }}
+                                </td>
+                                <td>
+                                    {% for account in accounts['source'] %}
+                                        {% if 'Cash account' == account.type %}
+                                            <span class="text-success">({{ 'cash'|_ }})</span>
+                                        {% else %}
+                                            <a href="{{ route('accounts.show',account.id) }}"
+                                               title="{{ account.iban|default(account.name) }}">
+                                                {{ account.name }}
+                                            </a>
+                                        {% endif %}
+                                        {% if loop.index0 != accounts['source']|length -1 %}, {% endif %}
+                                    {% endfor %}
+                                </td>
+                            </tr>
+                        {% endif %}
+
+                        {% if first.transactiontype.type != 'Deposit' or splits == 1 %}
+                            <tr>
+                                <td>
+                                    {{ trans_choice('firefly.destination_accounts', accounts['destination']|length ) }}
+
+                                </td>
+                                <td>
+                                    {% for account in accounts['destination'] %}
+                                        {% if 'Cash account' == account.type %}
+                                            <span class="text-success">({{ 'cash'|_ }})</span>
+                                        {% else %}
+                                            <a href="{{ route('accounts.show',account.id) }}"
+                                               title="{{ account.iban|default(account.name) }}">
+                                                {{ account.name }}
+                                            </a>
+                                        {% endif %}
+                                        {% if loop.index0 != accounts['destination']|length -1 %}, {% endif %}
+                                    {% endfor %}
+                                </td>
+                            </tr>
+                        {% endif %}
+                        <tr>
+                            <td style="width:30%;">{{ 'total_amount'|_ }}</td>
+                            <td>
+                                {% for amount in amounts %}
+                                    {% if first.transactiontype.type == 'Withdrawal' or first.transactiontype.type == 'Deposit' %}
+                                        {{ formatAmountBySymbol(amount.amount*-1,amount.symbol, amount.decimal_places) }}{% if loop.index0 != amounts|length -1 %}, {% endif %}
+                                    {% elseif first.transactiontype.type == 'Transfer' %}
+                                        <span class="text-info">
+                                        {{ formatAmountBySymbol(amount.amount, amount.symbol, amount.decimal_places, false) }}{% if loop.index0 != amounts|length -1 %}, {% endif %}
+                                    </span>
+                                    {% elseif first.transactiontype.type == 'Opening balance' %}
+                                        {# Opening balance stored amount is always negative: find out which way the money goes #}
+                                        {% if groupArray.transactions[0].source_type == 'Initial balance account' %}
+                                            {{ formatAmountBySymbol(amount.amount*-1,amount.symbol, amount.decimal_places) }}
+                                        {% else %}
+                                            {{ formatAmountBySymbol(amount.amount,amount.symbol, amount.decimal_places) }}
+                                        {% endif %}
+                                    {% endif %}
+                                {% endfor %}
+                            </td>
+                        </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="row">
+
+    </div>
+    {% if splits > 1 %}
+        <div class="row">
+            <div class="col-lg-12">
+                <h3>{{ 'splits'|_ }}</h3>
+            </div>
+        </div>
+    {% endif %}
+    {% set boxSize=6 %}
+    {% if(splits == 2) %}
+        {% set boxSize=6 %}
+    {% endif %}
+    {% if (splits > 2) %}
+        {% set boxSize = 4 %}
+    {% endif %}
+    <div class="row">
+        {% for index,journal in groupArray.transactions %}
+            <div class="col-lg-{{ boxSize }}">
+                <div class="box">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">
+                            {{ journal.description }}
+                            {% if journal.reconciled %}
+                                <span class="fa fa-check"></span>
+                            {% endif %}
+                            {% if splits > 1 %}
+                                <small>
+                                    {{ index+1 }} / {{ splits }}
+                                </small>
+                            {% endif %}
+                        </h3>
+
+
+                        <div class="btn-group btn-group-xs pull-right">
+                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                                {{ 'actions'|_}} <span class="caret"></span>
+                            </button>
+                            <ul class="dropdown-menu">
+                                {# edit + delete #}
+                                <li><a href="{{ route('transactions.edit', [transactionGroup.id]) }}"><span class="fa fa-pencil"></span> {{ 'edit'|_ }}</a></li>
+                                <li><a href="{{ route('transactions.delete', [transactionGroup.id]) }}"><span class="fa fa-trash"></span> {{ 'delete'|_ }}</a></li>
+                                <li role="separator" class="divider"></li>
+
+                                {# convert to different type #}
+                                {% if groupArray.transactions[0].type != 'withdrawal' %}
+                                    <li><a href="{{ route('transactions.convert.index', ['withdrawal', transactionGroup.id]) }}"><span class="fa fa-exchange"></span> {{ 'convert_to_withdrawal'|_ }}</a></li>
+                                {% endif %}
+
+                                {% if groupArray.transactions[0].type != 'deposit' %}
+                                    <li><a href="{{ route('transactions.convert.index', ['deposit', transactionGroup.id]) }}"><span class="fa fa-exchange"></span> {{ 'convert_to_deposit'|_ }}</a></li>
+                                {% endif %}
+
+                                {% if groupArray.transactions[0].type != 'transfer' %}
+                                    <li><a href="{{ route('transactions.convert.index', ['transfer', transactionGroup.id]) }}"><span class="fa fa-exchange"></span> {{ 'convert_to_transfer'|_ }}</a></li>
+                                {% endif %}
+
+                                {#  clone #}
+                                {% if groupArray.transactions[0].type != 'opening balance' and groupArray.transactions[0].type != 'reconciliation' %}
+                                    <li role="separator" class="divider"></li>
+                                    <li><a href="#" data-id="{{ transactionGroup.id }}" class="clone-transaction"><span class="fa fa-copy"></span> {{ 'clone'|_ }}</a></li>
+                                {% endif %}
+
+                                <li><a href="#" class="link-modal" data-journal="{{ journal.transaction_journal_id }}"><span class="fa fa-fw fa-link"></span>{{ 'link_transaction'|_ }}</a></li>
+                                <li role="separator" class="divider"></li>
+                                <li><a href="{{ route('rules.create-from-journal', [journal.transaction_journal_id]) }}"><span class="fa fa-fw fa-random"></span>{{ 'create_rule_from_transaction'|_ }}</a></li>
+                                <li><a href="{{ route('recurring.create-from-journal', [journal.transaction_journal_id]) }}"><span class="fa fa-fw fa-paint-brush"></span>{{ 'create_recurring_from_transaction'|_ }}</a></li>
+                            </ul>
+                        </div>
+                    </div>
+                    <div class="box-body no-padding">
+                        <table class="table">
+                            <tr>
+                                <td colspan="2">
+                                    <!-- type is: "{{ first.transactiontype.type }}" -->
+                                    {% if 'Cash account' == journal.source_type %}
+                                        <span class="text-success">({{ 'cash'|_ }})</span>
+                                    {% else %}
+                                        <a href="{{ route('accounts.show', journal.source_id) }}"
+                                           title="{{ journal.source_iban|default(journal.source_name) }}">{{ journal.source_name }}</a> &rarr;
+                                    {% endif %}
+
+                                    {% if first.transactiontype.type == 'Withdrawal' or first.transactiontype.type == 'Deposit' %}
+                                        {{ formatAmountBySymbol(journal.amount*-1, journal.currency_symbol, journal.currency_decimal_places) }}
+                                    {% elseif first.transactiontype.type == 'Transfer' or first.transactiontype.type == 'Opening balance' %}
+                                        <span class="text-info">
+                                        {{ formatAmountBySymbol(journal.amount, journal.currency_symbol, journal.currency_decimal_places, false) }}
+                                    </span>
+                                    {% elseif first.transactiontype.type == 'Liability credit' %}
+                                        <span class="text-info">
+                                        {{ formatAmountBySymbol(journal.amount*-1, journal.currency_symbol, journal.currency_decimal_places, false) }}
+                                    </span>
+                                    {% endif %}
+
+                                    <!-- do foreign amount -->
+                                    {% if null != journal.foreign_amount %}
+                                        {% if first.transactiontype.type == 'Withdrawal' or first.transactiontype.type == 'Deposit' %}
+                                            ({{ formatAmountBySymbol(journal.foreign_amount*-1, journal.foreign_currency_symbol, journal.foreign_currency_decimal_places) }})
+                                        {% elseif first.transactiontype.type == 'Transfer' %}
+                                            <span class="text-info">
+                                        ({{ formatAmountBySymbol(journal.foreign_amount, journal.foreign_currency_symbol, journal.foreign_currency_decimal_places, false) }})
+                                    </span>
+                                        {% endif %}
+                                    {% endif %}
+
+                                    &rarr;
+                                    {% if 'Cash account' == journal.destination_type %}
+                                        <span class="text-success">({{ 'cash'|_ }})</span>
+                                    {% else %}
+                                        <a href="{{ route('accounts.show', journal.destination_id) }}"
+                                           title="{{ journal.destination_iban|default(journal.destination_name) }}">{{ journal.destination_name }}</a>
+                                    {% endif %}
+                                </td>
+                            </tr>
+                            {% if null != journal.category_id %}
+                                <tr>
+                                    <td style="width:30%;">{{ 'category'|_ }}</td>
+                                    <td><a href="{{ route('categories.show', [journal.category_id]) }}">{{ journal.category_name }}</a></td>
+                                </tr>
+                            {% endif %}
+                            {% if null != journal.budget_id and first.transactiontype.type == 'Withdrawal' %}
+                                <tr>
+                                    <td>{{ 'budget'|_ }}</td>
+                                    <td><a href="{{ route('budgets.show', [journal.budget_id]) }}">{{ journal.budget_name }}</a></td>
+                                </tr>
+                            {% endif %}
+                            {% if null != journal.bill_id and first.transactiontype.type == 'Withdrawal' %}
+                                <tr>
+                                    <td>{{ 'bill'|_ }}</td>
+                                    <td><a href="{{ route('bills.show', [journal.bill_id]) }}">{{ journal.bill_name }}</a></td>
+                                </tr>
+                            {% endif %}
+                            <!-- other fields -->
+                            {% for dateField in ['interest_date','book_date','process_date','due_date','payment_date','invoice_date'] %}
+                                {% if journalHasMeta(journal.transaction_journal_id, dateField) %}
+                                    <tr>
+                                        <td>{{ trans('list.'~dateField) }}</td>
+                                        <td>{{ journalGetMetaDate(journal.transaction_journal_id, dateField).formatLocalized(monthAndDayFormat) }}</td>
+                                    </tr>
+                                {% endif %}
+                            {% endfor %}
+                            {% for metaField in ['external_id','bunq_payment_id','internal_reference','sepa_batch_id','sepa_ct_id','sepa_ct_op','sepa_db','sepa_country','sepa_cc','sepa_ep','sepa_ci','external_url'] %}
+                                {% if journalHasMeta(journal.transaction_journal_id, metaField) %}
+                                    <tr>
+                                        <td>{{ trans('list.'~metaField) }}</td>
+                                        <td>
+                                            {% if 'external_url' == metaField  %}
+                                                {% set uri = journalGetMetaField(journal.transaction_journal_id, metaField) %}
+                                                <a href="{{ uri }}" rel="noopener noreferrer nofollow" target="_blank">
+                                                    {% if uri|length > 60 %}
+                                                        {{ uri|slice(0, 60) ~ '...' }}
+                                                    {% else %}
+                                                        {{ uri }}
+                                                    {% endif %}
+                                                </a>
+                                            {% endif %}
+                                            {% if 'external_url' != metaField  %}
+                                                {{ journalGetMetaField(journal.transaction_journal_id, metaField) }}
+                                            {% endif %}
+                                        </td>
+                                    </tr>
+                                {% endif %}
+                            {% endfor %}
+                            {% if null != journal.notes and '' != journal.notes %}
+                                <tr>
+                                    <td>{{ trans('list.notes') }}</td>
+                                    <td class="markdown">{{ journal.notes|default('')|markdown }}</td>
+                                </tr>
+                            {% endif %}
+                            {% if journalHasMeta(journal.transaction_journal_id, 'recurring_total') and journalHasMeta(journal.transaction_journal_id, 'recurring_count')  %}
+                                {% set recurringTotal = journalGetMetaField(journal.transaction_journal_id, 'recurring_total') %}
+                                {% if 0 == recurringTotal %}
+                                    {% set recurringTotal = '∞' %}
+                                {% endif %}
+                                <tr>
+                                    <td>{{ trans('list.recurring_transaction') }}</td>
+                                    <td>{{ trans('firefly.recurring_info', {total: recurringTotal, count: journalGetMetaField(journal.transaction_journal_id, 'recurring_count') }) }}</td>
+                                </tr>
+                            {% endif %}
+                            {% if journal.tags|length > 0 %}
+                                <tr>
+                                    <td>{{ 'tags'|_ }}</td>
+                                    <td>
+                                        {% for tag in journal.tags %}
+                                            <h4 style="display: inline;"><a class="label label-success" href="{{ route('tags.show', tag.id) }}">
+                                                    <span class="fa fa-fw fa-tag"></span>{{ tag.tag }}</a>
+                                            </h4>
+                                        {% endfor %}
+                                    </td>
+                                </tr>
+                            {% endif %}
+                        </table>
+                    </div>
+                </div>
+
+                <!-- Transaction links -->
+                {% if links[journal.transaction_journal_id]|length > 0 %}
+                    <div class="box">
+                        <div class="box-header with-border">
+                            <h3 class="box-title">
+                                {{ 'journal_links'|_ }}
+                            </h3>
+                        </div>
+                        <div class="box-body no-padding">
+                            <table class="table">
+                                {% for link in links[journal.transaction_journal_id] %}
+                                    <tr>
+                                        <td style="width:120px;">
+                                            <div class="btn-group btn-group-xs">
+                                                <a href="#" class="btn btn-default switch-link" data-id="{{ link.id }}"><span
+                                                            class="fa fa-fw fa-arrows-h"></span></a>
+                                                <a href="{{ route('transactions.link.delete', [link.id]) }}" class="btn btn-danger"><span class="fa fa-trash"></span></a>
+                                            </div>
+                                        </td>
+                                        <td>
+                                            {% if link.editable %}
+                                            {{ link.link }}
+                                            {% else %}
+                                                {{ trans('firefly.'~link.link) }}
+                                                {% endif %}
+                                            "<a href="{{ route('transactions.show', link.group) }}"
+                                                                title="{{ link.description }}">{{ link.description }}</a>"
+
+                                            ({{ link.amount|raw }})
+                                            {% if '' != link.foreign_amount %}
+                                                ({{ link.foreign_amount|raw }})
+                                            {% endif %}
+                                        </td>
+                                    </tr>
+                                {% endfor %}
+
+                            </table>
+                        </div>
+                    </div>
+                {% endif %}
+
+                <!-- Attachments -->
+                {% if attachments[journal.transaction_journal_id]|length > 0 %}
+                    <div class="box">
+                        <div class="box-header with-border">
+                            <h3 class="box-title">{{ 'attachments'|_ }}</h3>
+                        </div>
+                        <div class="box-body no-padding">
+                            {% include 'v1.list.attachments' with {attachments: attachments[journal.transaction_journal_id]} %}
+                        </div>
+                    </div>
+                {% endif %}
+
+                <!-- Piggy bank events -->
+                {% if events[journal.transaction_journal_id]|length > 0 %}
+                    <div class="box">
+                        <div class="box-header with-border">
+                            <h3 class="box-title">{{ 'piggy_events'|_ }}</h3>
+                        </div>
+                        <div class="box-body no-padding">
+                            <table class="table table-hover">
+                                {% for event in events[journal.transaction_journal_id] %}
+                                    <tr>
+                                        <td style="width:30%;">{{ event.amount|raw }}</td>
+                                        <td>
+                                            <a href="{{ route('piggy-banks.show', [event.piggy_id]) }}">{{ event.piggy }}</a></td>
+
+                                    </tr>
+                                {% endfor %}
+                            </table>
+                        </div>
+                    </div>
+                {% endif %}
+            </div>
+        {% endfor %}
+    </div>
+    {# modal for linking journals. Will be filled by AJAX #}
+    <div class="modal fade" tabindex="-1" role="dialog" id="linkJournalModal">
+    </div>
+{% endblock %}
+{% block scripts %}
+    <script type="text/javascript" nonce="{{ JS_NONCE }}">
+        var modalDialogURI = '{{ route('transactions.link.modal', ['%JOURNAL%']) }}';
+        var acURI = '{{ route('api.v1.autocomplete.transactions-with-id') }}';
+        var groupURI = '{{ route('transactions.show',['%GROUP%']) }}';
+        var cloneGroupUrl = '{{ route('transactions.clone') }}';
+
+        $('.switch-link').on('click', switchLink);
+        var switchLinkUrl = '{{ route('transactions.link.switch') }}';
+        function switchLink(e) {
+            e.preventDefault();
+            var obj = $(e.currentTarget);
+            $.post(switchLinkUrl, {
+                _token: token,
+                id: obj.data('id')
+            }).done(function () {
+                location.reload();
+            }).fail(function () {
+                console.error('I failed :(');
+            });
+
+            //alert(obj.data('id'));
+
+            return false
+        }
+    </script>
+    <script type="text/javascript" src="v1/js/lib/typeahead/typeahead.bundle.min.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/ff/transactions/show.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
+{% endblock %}
+
diff --git a/resources/views/transactions/single/delete.twig b/resources/views/transactions/single/delete.twig
new file mode 100644
index 0000000000..8bf7ffd3e2
--- /dev/null
+++ b/resources/views/transactions/single/delete.twig
@@ -0,0 +1,43 @@
+{% extends './v1/layout/default' %}
+
+{% block breadcrumbs %}
+    {{ Breadcrumbs.render(Route.getCurrentRoute.getName, journal) }}
+{% endblock %}
+
+{% block content %}
+    <form method="POST" action="{{ route('transactions.destroy',journal.id) }}" accept-charset="UTF-8" class="form-horizontal" id="destroy">
+        <input name="_token" type="hidden" value="{{ csrf_token() }}">
+
+        <div class="row">
+            <div class="col-lg-6 col-lg-offset-3 col-md-6 col-sm-12">
+                <div class="box box-danger">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ trans('form.delete_journal', {'description': journal.description}) }}</h3>
+                    </div>
+                    <div class="box-body">
+                        <p class="text-danger">
+                            {{ trans('form.permDeleteWarning') }}
+                        </p>
+
+                        <p>
+                            {{ trans('form.journal_areYouSure', {'description': journal.description}) }}
+                        </p>
+                    </div>
+                    <div class="box-footer">
+                        <input type="submit" name="submit" value="{{ trans('form.deletePermanently') }}" class="btn btn-danger pull-right"/>
+                        {% if journal.transactiontype.type == 'Withdrawal' %}
+                            <a href="{{ route('transactions.index','withdrawal') }}" class="btn-default btn">{{ trans('form.cancel') }}</a>
+                        {% endif %}
+                        {% if journal.transactiontype.type == 'Deposit' %}
+                            <a href="{{ route('transactions.index','deposit') }}" class="btn-default btn">{{ trans('form.cancel') }}</a>
+                        {% endif %}
+                        {% if journal.transactiontype.type == 'Transfer' %}
+                            <a href="{{ route('transactions.index','transfers') }}" class="btn-default btn">{{ trans('form.cancel') }}</a>
+                        {% endif %}
+                    </div>
+                </div>
+            </div>
+        </div>
+
+    </form>
+{% endblock %}
diff --git a/resources/views/transactions/single/edit.twig b/resources/views/transactions/single/edit.twig
new file mode 100644
index 0000000000..8faafdbec8
--- /dev/null
+++ b/resources/views/transactions/single/edit.twig
@@ -0,0 +1 @@
+<!-- do not use -->