diff --git a/resources/views/index.twig b/resources/views/index.twig
index 8c9b242d13..474bf3a0de 100644
--- a/resources/views/index.twig
+++ b/resources/views/index.twig
@@ -5,182 +5,183 @@
 {% endblock %}
 {% block content %}
     {% include '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"><i
+                                    class="fa fa-money"></i> {{ 'go_to_asset_accounts'|_ }}</a>
+                    </div>
+                </div>
 
-    <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>
+                {# 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"><i
+                                    class="fa fa-tasks"></i> {{ 'go_to_budgets'|_ }}</a>
+                    </div>
                 </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"><i
-                                class="fa fa-money"></i> {{ 'go_to_asset_accounts'|_ }}</a>
+                {# 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"><i
+                                    class="fa fa-bar-chart"></i> {{ 'go_to_categories'|_ }}</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[1].id) }}">{{ data[1].name }}</a></h3>
 
-            {# 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"><i
-                                class="fa fa-tasks"></i> {{ 'go_to_budgets'|_ }}</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 class="box-tools pull-right">
+                                    <div class="btn-group">
+                                        <button class="btn btn-box-tool dropdown-toggle" data-toggle="dropdown"><i class="fa fa-ellipsis-v"></i></button>
+                                        <ul class="dropdown-menu" role="menu">
+                                            <li><a href="{{ route('transactions.create','withdrawal') }}"><i
+                                                            class="fa fa-long-arrow-left fa-fw"></i> {{ 'newWithdrawal'|_ }}</a></li>
+                                            <li><a href="{{ route('transactions.create','deposit') }}"><i
+                                                            class="fa fa-long-arrow-right fa-fw"></i> {{ 'newDeposit'|_ }}</a></li>
+                                            <li><a href="{{ route('transactions.create','transfer') }}"><i
+                                                            class="fa fa-fw fa-exchange"></i> {{ 'newTransfer'|_ }}</a></li>
+                                        </ul>
+                                    </div>
+                                </div>
+                            </div>
 
+                            {% if data[0].count > 0 %}
+                                <div class="box-body no-padding">
+                                    {% include 'list.journals-tiny' with {'transactions': data[0],'account': data[1]} %}
+                                </div>
+                            {% else %}
+                                <div class="box-body">
+                                    <p>
+                                        <em>
+                                            {{ trans('firefly.no_transactions_account', {name: data[1].name}) }}
+                                        </em>
+                                    </p>
+
+                                </div>
+                            {% endif %}
+
+                            <div class="box-footer clearfix">
+                                <div class="btn-group" role="group">
+
+                                </div>
+
+                                <div class="btn-group" role="group" aria-label="...">
+
+                                    <div class="btn-group" role="group">
+                                        <a href="{{ route('transactions.create','withdrawal') }}" class="btn btn-success"><i
+                                                    class="fa fa-plus fa-fw"></i> {{ 'create_new_transaction'|_ }}</a>
+                                        <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
+                                                aria-expanded="false">
+                                            <span class="caret"></span>
+                                            <span class="sr-only">Toggle Dropdown</span>
+                                        </button>
+                                        <ul class="dropdown-menu">
+                                            <li><a href="{{ route('transactions.create','withdrawal') }}"><i
+                                                            class="fa fa-long-arrow-left fa-fw"></i> {{ 'newWithdrawal'|_ }}</a></li>
+                                            <li><a href="{{ route('transactions.create','deposit') }}"><i
+                                                            class="fa fa-long-arrow-right fa-fw"></i> {{ 'newDeposit'|_ }}</a></li>
+                                            <li><a href="{{ route('transactions.create','transfer') }}"><i
+                                                            class="fa fa-fw fa-exchange"></i> {{ 'newTransfer'|_ }}
+                                                </a></li>
+                                        </ul>
+                                    </div>
+                                    <a class="btn btn-default"
+                                       href="{{ route('accounts.show',data[1].id) }}">{{ formatAmountByAccount(data[1], data[1]|balance, false) }}</a>
+                                </div>
+
+                            </div>
+                        </div>
+                    {% endfor %}
                 </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"><i
-                                class="fa fa-bar-chart"></i> {{ 'go_to_categories'|_ }}</a>
-                </div>
-            </div>
-        </div>
-        <div class="col-lg-4 col-md-6 col-sm-12">
-            {# TRANSACTIONS #}
-            <div id="all_transactions">
-                {% for data in transactions %}
+
+                {% if billCount > 0 %}
+                    {# BILLS #}
                     <div class="box">
                         <div class="box-header with-border">
-                            <h3 class="box-title"><a href="{{ route('accounts.show', data[1].id) }}">{{ data[1].name }}</a></h3>
-
-                            <div class="box-tools pull-right">
-                                <div class="btn-group">
-                                    <button class="btn btn-box-tool dropdown-toggle" data-toggle="dropdown"><i class="fa fa-ellipsis-v"></i></button>
-                                    <ul class="dropdown-menu" role="menu">
-                                        <li><a href="{{ route('transactions.create','withdrawal') }}"><i
-                                                        class="fa fa-long-arrow-left fa-fw"></i> {{ 'newWithdrawal'|_ }}</a></li>
-                                        <li><a href="{{ route('transactions.create','deposit') }}"><i
-                                                        class="fa fa-long-arrow-right fa-fw"></i> {{ 'newDeposit'|_ }}</a></li>
-                                        <li><a href="{{ route('transactions.create','transfer') }}"><i
-                                                        class="fa fa-fw fa-exchange"></i> {{ 'newTransfer'|_ }}</a></li>
-                                    </ul>
-                                </div>
-                            </div>
-                        </div>
-
-                        {% if data[0].count > 0 %}
-                            <div class="box-body no-padding">
-                                {% include 'list.journals-tiny' with {'transactions': data[0],'account': data[1]} %}
-                            </div>
-                        {% else %}
-                            <div class="box-body">
-                                <p>
-                                    <em>
-                                        {{ trans('firefly.no_transactions_account', {name: data[1].name}) }}
-                                    </em>
-                                </p>
-
-                            </div>
-                        {% endif %}
-
-                        <div class="box-footer clearfix">
-                            <div class="btn-group" role="group">
-
-                            </div>
-
-                            <div class="btn-group" role="group" aria-label="...">
-
-                                <div class="btn-group" role="group">
-                                    <a href="{{ route('transactions.create','withdrawal') }}" class="btn btn-success"><i
-                                                class="fa fa-plus fa-fw"></i> {{ 'create_new_transaction'|_ }}</a>
-                                    <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
-                                            aria-expanded="false">
-                                        <span class="caret"></span>
-                                        <span class="sr-only">Toggle Dropdown</span>
-                                    </button>
-                                    <ul class="dropdown-menu">
-                                        <li><a href="{{ route('transactions.create','withdrawal') }}"><i
-                                                        class="fa fa-long-arrow-left fa-fw"></i> {{ 'newWithdrawal'|_ }}</a></li>
-                                        <li><a href="{{ route('transactions.create','deposit') }}"><i
-                                                        class="fa fa-long-arrow-right fa-fw"></i> {{ 'newDeposit'|_ }}</a></li>
-                                        <li><a href="{{ route('transactions.create','transfer') }}"><i class="fa fa-fw fa-exchange"></i> {{ 'newTransfer'|_ }}
-                                            </a></li>
-                                    </ul>
-                                </div>
-                                <a class="btn btn-default" href="{{ route('accounts.show',data[1].id) }}">{{ formatAmountByAccount(data[1], data[1]|balance, false) }}</a>
-                            </div>
+                            <h3 class="box-title"><a href="{{ route('bills.index') }}" title="{{ 'bills'|_ }}">{{ 'bills'|_ }}</a></h3>
 
                         </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 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"><i
+                                        class="fa fa-calendar"></i> {{ 'go_to_bills'|_ }}</a>
                         </div>
                     </div>
-                    <div class="box-footer">
-                        <a href="{{ route('bills.index') }}" class="btn btn-default button-sm"><i
-                                    class="fa fa-calendar"></i> {{ 'go_to_bills'|_ }}</a>
-                    </div>
+                {% endif %}
+
+                {# box for piggy bank data (JSON) #}
+                <div id="piggy_bank_overview">
+
                 </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"><i
-                                class="fa fa-shopping-cart"></i> {{ 'go_to_expense_accounts'|_ }}</a>
-                </div>
-            </div>
-            {# OPTIONAL REVENUE ACCOUNTS #}
-            {% if showDeps %}
+        <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',['revenue']) }}"
-                                                 title="{{ 'revenue_accounts'|_ }}">{{ 'revenue_accounts'|_ }}</a></h3>
-
+                        <h3 class="box-title"><a href="{{ route('accounts.index',['expense']) }}"
+                                                 title="{{ 'expense_accounts'|_ }}">{{ 'expense_accounts'|_ }}</a>
+                        </h3>
                     </div>
                     <div class="box-body">
-                        <canvas id="revenue-accounts-chart" style="width:100%;height:400px;" height="400" width="100%"></canvas>
+                        <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', ['revenue']) }}" class="btn btn-default button-sm"><i
-                                    class="fa fa-download"></i> {{ 'go_to_revenue_accounts'|_ }}</a>
+                        <a href="{{ route('accounts.index', ['expense']) }}" class="btn btn-default button-sm"><i
+                                    class="fa fa-shopping-cart"></i> {{ 'go_to_expense_accounts'|_ }}</a>
                     </div>
                 </div>
-            {% endif %}
-        </div>
-    </div>
+                {# OPTIONAL REVENUE ACCOUNTS #}
+                {% if showDeps %}
+                    <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"><i
+                                        class="fa fa-download"></i> {{ 'go_to_revenue_accounts'|_ }}</a>
+                        </div>
+                    </div>
+                {% endif %}
+            </div>
+        </div>
 {% endblock %}
 {% block scripts %}
     <script type="text/javascript">
diff --git a/resources/views/layout/default.twig b/resources/views/layout/default.twig
index cab96e0533..636a4d4cd7 100644
--- a/resources/views/layout/default.twig
+++ b/resources/views/layout/default.twig
@@ -18,8 +18,7 @@
     </title>
     <base href="{{ route('index') }}/">
     <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
-    <link href="lib/bootstrap/css/bootstrap.min.css?v={{ FF_VERSION }}" rel="stylesheet" type="text/css"/>
-    <link href="lib/font-awesome/css/font-awesome.min.css?v={{ FF_VERSION }}" rel="stylesheet" type="text/css"/>
+    <link href="css/app.css?v={{ FF_VERSION }}" rel="stylesheet" type="text/css"/>
     <link href="lib/adminlte/css/AdminLTE.min.css?v={{ FF_VERSION }}" rel="stylesheet" type="text/css"/>
     <link href="lib/adminlte/css/skins/skin-blue-light.min.css?v={{ FF_VERSION }}" rel="stylesheet" type="text/css"/>
     <link href="css/daterangepicker.css?v={{ FF_VERSION }}" rel="stylesheet" type="text/css"/>
@@ -42,7 +41,7 @@
 
 </head>
 <body class="skin-blue-light sidebar-mini hold-transition">
-<div class="wrapper">
+<div class="wrapper" id="app">
 
     <header class="main-header">
 
@@ -158,8 +157,7 @@
     </div>
 </div>
 
-<script src="js/lib/jquery-3.2.1.min.js?v={{ FF_VERSION }}" type="text/javascript"></script>
-<script src="lib/bootstrap/js/bootstrap.min.js?v={{ FF_VERSION }}" type="text/javascript"></script>
+<script src="js/app.js?v={{ FF_VERSION }}" type="text/javascript"></script>
 <script src="js/lib/moment.min.js?v={{ FF_VERSION }}" type="text/javascript"></script>
 <script src="js/lib/daterangepicker.js?v={{ FF_VERSION }}" type="text/javascript"></script>
 <script src="lib/adminlte/js/app.min.js?v={{ FF_VERSION }}" type="text/javascript"></script>