From 4d017dc8a9fd5f18c064b20f5398831fe2ffc8bd Mon Sep 17 00:00:00 2001
From: James Cole <thegrumpydictator@gmail.com>
Date: Sat, 20 Jun 2015 07:29:25 +0200
Subject: [PATCH] Updated boxes and what-not.

---
 config/firefly.php                            |   1 +
 resources/twig/accounts/create.twig           |  18 +-
 resources/twig/accounts/delete.twig           |   4 +-
 resources/twig/accounts/edit.twig             |  24 +-
 resources/twig/accounts/index.twig            |   4 +-
 resources/twig/accounts/show.twig             |  12 +-
 resources/twig/auth/login.twig                |   4 +-
 resources/twig/auth/password.twig             |   4 +-
 resources/twig/auth/register.twig             |   4 +-
 resources/twig/bills/create.twig              |  18 +-
 resources/twig/bills/delete.twig              |   4 +-
 resources/twig/bills/edit.twig                |  18 +-
 resources/twig/bills/index.twig               |   4 +-
 resources/twig/bills/show.twig                |  24 +-
 resources/twig/budgets/create.twig            |  12 +-
 resources/twig/budgets/delete.twig            |   4 +-
 resources/twig/budgets/edit.twig              |  12 +-
 resources/twig/budgets/index.twig             |  28 +-
 resources/twig/budgets/noBudget.twig          |   6 +-
 resources/twig/budgets/show.twig              |  16 +-
 resources/twig/categories/create.twig         |  12 +-
 resources/twig/categories/delete.twig         |   4 +-
 resources/twig/categories/edit.twig           |  12 +-
 resources/twig/categories/index.twig          |   4 +-
 resources/twig/categories/noCategory.twig     |   6 +-
 resources/twig/categories/show.twig           |  18 +-
 resources/twig/currency/create.twig           |  12 +-
 resources/twig/currency/delete.twig           |   4 +-
 resources/twig/currency/edit.twig             |  12 +-
 resources/twig/currency/index.twig            |   6 +-
 resources/twig/index.twig                     |  58 +-
 resources/twig/layout/default.twig            | 744 +-----------------
 resources/twig/list/reminders.twig            |   6 +-
 resources/twig/partials/boxes.twig            |  98 +--
 resources/twig/partials/control-bar.twig      |  33 +
 resources/twig/partials/reports/accounts.twig |   4 +-
 resources/twig/partials/reports/balance.twig  |   4 +-
 resources/twig/partials/reports/bills.twig    |   4 +-
 resources/twig/partials/reports/budgets.twig  |   4 +-
 .../twig/partials/reports/categories.twig     |   4 +-
 resources/twig/partials/reports/expenses.twig |   4 +-
 .../partials/reports/income-vs-expenses.twig  |   4 +-
 resources/twig/partials/reports/income.twig   |   4 +-
 resources/twig/piggy-banks/create.twig        |  18 +-
 resources/twig/piggy-banks/delete.twig        |   4 +-
 resources/twig/piggy-banks/edit.twig          |  18 +-
 resources/twig/piggy-banks/index.twig         |   8 +-
 resources/twig/piggy-banks/show.twig          |  14 +-
 resources/twig/preferences/index.twig         |  24 +-
 resources/twig/profile/change-password.twig   |   6 +-
 resources/twig/profile/delete-account.twig    |   4 +-
 resources/twig/profile/index.twig             |   6 +-
 resources/twig/reminders/show.twig            |   6 +-
 resources/twig/reports/index.twig             |  12 +-
 resources/twig/reports/month.twig             |  12 +-
 resources/twig/reports/year.twig              |  24 +-
 resources/twig/search/index.twig              |  36 +-
 resources/twig/tags/create.twig               |  18 +-
 resources/twig/tags/delete.twig               |   4 +-
 resources/twig/tags/edit.twig                 |  18 +-
 resources/twig/tags/index.twig                |  12 +-
 resources/twig/tags/show.twig                 |  10 +-
 resources/twig/transactions/create.twig       |  18 +-
 resources/twig/transactions/delete.twig       |   4 +-
 resources/twig/transactions/edit.twig         |  18 +-
 resources/twig/transactions/index.twig        |   4 +-
 resources/twig/transactions/show.twig         |  14 +-
 67 files changed, 427 insertions(+), 1167 deletions(-)
 create mode 100644 resources/twig/partials/control-bar.twig

diff --git a/config/firefly.php b/config/firefly.php
index 95182d0d21..9aa03c3dc0 100644
--- a/config/firefly.php
+++ b/config/firefly.php
@@ -1,6 +1,7 @@
 <?php
 
 return [
+    'version' => '3.3.3',
     'index_periods'            => ['1D', '1W', '1M', '3M', '6M', '1Y', 'custom'],
     'budget_periods'           => ['daily', 'weekly', 'monthly', 'quarterly', 'half-year', 'yearly'],
     'piggy_bank_periods'       => [
diff --git a/resources/twig/accounts/create.twig b/resources/twig/accounts/create.twig
index b3a23b96c2..6c2e749133 100644
--- a/resources/twig/accounts/create.twig
+++ b/resources/twig/accounts/create.twig
@@ -10,11 +10,11 @@
 
         <div class="row">
             <div class="col-lg-6 col-md-6 col-sm-12">
-                <div class="panel panel-primary">
-                    <div class="panel-heading">
+                <div class="box box-primary">
+                    <div class="box-header with-border">
                         <i class="fa {{ subTitleIcon }}"></i> {{ 'mandatoryFields'|_ }}
                     </div>
-                    <div class="panel-body">
+                    <div class="box-body">
                         {{ ExpandedForm.text('name') }}
                     </div>
                 </div>
@@ -23,11 +23,11 @@
             <div class="col-lg-6 col-md-6 col-sm-12">
 
                 {% if what == 'asset' %}
-                    <div class="panel panel-default">
-                        <div class="panel-heading">
+                    <div class="box">
+                        <div class="box-header with-border">
                             <i class="fa fa-smile-o"></i> {{ 'optionalFields'|_ }}
                         </div>
-                        <div class="panel-body">
+                        <div class="box-body">
 
                             {{ ExpandedForm.balance('openingBalance') }}
                             {{ ExpandedForm.date('openingBalanceDate', phpdate('Y-m-d')) }}
@@ -38,11 +38,11 @@
                     </div>
                 {% endif %}
                 
-                <div class="panel panel-default">
-                    <div class="panel-heading">
+                <div class="box">
+                    <div class="box-header with-border">
                         <i class="fa fa-bolt"></i> {{ 'options'|_ }}
                     </div>
-                    <div class="panel-body">
+                    <div class="box-body">
                         {{ ExpandedForm.optionsList('create','account') }}
                     </div>
                 </div>
diff --git a/resources/twig/accounts/delete.twig b/resources/twig/accounts/delete.twig
index a45377c6b1..9f90e66ce1 100644
--- a/resources/twig/accounts/delete.twig
+++ b/resources/twig/accounts/delete.twig
@@ -10,11 +10,11 @@
 <div class="row">
     <div class="col-lg-6 col-lg-offset-3 col-md-12 col-sm-12">
         <div class="panel panel-red">
-            <div class="panel-heading">
+            <div class="box-header with-border">
                 <i class="fa fa-exclamation-circle"></i>
                 {{ trans('form.delete_account', {'name': account.name}) }}
             </div>
-            <div class="panel-body">
+            <div class="box-body">
                 <p class="text-danger">
                     {{ trans('form.permDeleteWarning') }}
                 </p>
diff --git a/resources/twig/accounts/edit.twig b/resources/twig/accounts/edit.twig
index 3df84adf79..b6818f6cdb 100644
--- a/resources/twig/accounts/edit.twig
+++ b/resources/twig/accounts/edit.twig
@@ -11,22 +11,22 @@
 
 <div class="row">
     <div class="col-lg-6 col-md-6 col-sm-12">
-        <div class="panel panel-primary">
-            <div class="panel-heading">
+        <div class="box box-primary">
+            <div class="box-header with-border">
                 <i class="fa {{ subTitleIcon }}"></i> {{ 'mandatoryFields'|_ }}
             </div>
-            <div class="panel-body">
+            <div class="box-body">
                 {{  ExpandedForm.text('name')  }}
             </div>
         </div>
 
     </div>
     <div class="col-lg-6 col-md-6 col-sm-12">
-        <div class="panel panel-default">
-            <div class="panel-heading">
+        <div class="box">
+            <div class="box-header with-border">
                 <i class="fa fa-smile-o"></i> {{ 'optionalFields'|_ }}
             </div>
-            <div class="panel-body">
+            <div class="box-body">
                 {% if account.accounttype.type == 'Default account' or account.accounttype.type == 'Asset account' %}
                     {{  ExpandedForm.balance('openingBalance',null, {'currency' : openingBalance ? openingBalance.transactionCurrency : null})  }}
                     {{  ExpandedForm.date('openingBalanceDate')  }}
@@ -40,11 +40,11 @@
 
         <!-- panel for credit card options -->
         {% if Session.get('preFilled').accountRole == 'ccAsset' %}
-        <div class="panel panel-default">
-            <div class="panel-heading">
+        <div class="box">
+            <div class="box-header with-border">
                 <i class="fa fa-credit-card"></i> Credit card options
             </div>
-            <div class="panel-body">
+            <div class="box-body">
                 {{  ExpandedForm.select('ccType',Config.get('firefly.ccTypes'))  }}
                 {{  ExpandedForm.date('ccMonthlyPaymentDate',null,{'helpText' : 'Select any year and any month, it will be ignored anway. Only the day of the month is relevant.'})  }}
             </div>
@@ -52,11 +52,11 @@
         {% endif %}
 
         <!-- panel for options  -->
-        <div class="panel panel-default">
-            <div class="panel-heading">
+        <div class="box">
+            <div class="box-header with-border">
                 <i class="fa fa-bolt"></i> {{ 'options'|_ }}
             </div>
-            <div class="panel-body">
+            <div class="box-body">
                 {{  ExpandedForm.optionsList('update','account')  }}
             </div>
         </div>
diff --git a/resources/twig/accounts/index.twig b/resources/twig/accounts/index.twig
index bed25ed3bc..e10a6457d3 100644
--- a/resources/twig/accounts/index.twig
+++ b/resources/twig/accounts/index.twig
@@ -15,8 +15,8 @@
 </div>
 <div class="row">
     <div class="col-lg-12 col-md-12 col-sm-12">
-        <div class="panel panel-default">
-            <div class="panel-heading">
+        <div class="box">
+            <div class="box-header with-border">
                 <i class="fa {{ subTitleIcon }}"></i> {{ subTitle}}
 
                 <!-- ACTIONS MENU -->
diff --git a/resources/twig/accounts/show.twig b/resources/twig/accounts/show.twig
index 02477a94dc..dc7d6566c9 100644
--- a/resources/twig/accounts/show.twig
+++ b/resources/twig/accounts/show.twig
@@ -7,8 +7,8 @@
 {% block content %}
     <div class="row">
     <div class="col-lg-12 col-md-12 col-sm-12">
-        <div class="panel panel-default">
-            <div class="panel-heading">
+        <div class="box">
+            <div class="box-header with-border">
                 <i class="fa fa-fw {{ subTitleIcon }} fa-fw"></i> {{ account.name }}
 
 
@@ -26,7 +26,7 @@
                     </div>
                 </div>
             </div>
-            <div class="panel-body">
+            <div class="box-body">
                 <div id="overview-chart"></div>
             </div>
         </div>
@@ -36,11 +36,11 @@
 
 <div class="row">
     <div class="col-lg-12 col-md-12 col-sm-12">
-        <div class="panel panel-default">
-            <div class="panel-heading">
+        <div class="box">
+            <div class="box-header with-border">
                 <i class="fa fa-repeat fa-fw"></i> {{ 'transactions'|_ }}
             </div>
-            <div class="panel-body">
+            <div class="box-body">
                 {% include 'list/journals.twig' with {sorting:true} %}
             </div>
     </div>
diff --git a/resources/twig/auth/login.twig b/resources/twig/auth/login.twig
index 9273e51566..8cd48afb22 100644
--- a/resources/twig/auth/login.twig
+++ b/resources/twig/auth/login.twig
@@ -17,10 +17,10 @@
 <div class="row">
     <div class="col-md-4 col-md-offset-4">
         <div class="login-panel panel panel-default">
-            <div class="panel-heading">
+            <div class="box-header with-border">
                 <h3 class="panel-title">Firefly III &mdash; Sign In</h3>
             </div>
-            <div class="panel-body">
+            <div class="box-body">
                 <form role="form" method="POST" id="login" action="/auth/login">
                     <input type="hidden" name="_token" value="{{ csrf_token() }}">
                     <div class="form-group">
diff --git a/resources/twig/auth/password.twig b/resources/twig/auth/password.twig
index 8d209f1ab4..4cd8359490 100644
--- a/resources/twig/auth/password.twig
+++ b/resources/twig/auth/password.twig
@@ -4,10 +4,10 @@
     <div class="row">
         <div class="col-md-4 col-md-offset-4">
             <div class="login-panel panel panel-default">
-                <div class="panel-heading">
+                <div class="box-header with-border">
                     <h3 class="panel-title">Firefly III &mdash; Reset Password</h3>
                 </div>
-				<div class="panel-body">
+				<div class="box-body">
 					{% if session.status %}
 						<div class="alert alert-success">
 							{{ session.status }}
diff --git a/resources/twig/auth/register.twig b/resources/twig/auth/register.twig
index d564378099..2080c56768 100644
--- a/resources/twig/auth/register.twig
+++ b/resources/twig/auth/register.twig
@@ -4,10 +4,10 @@
 	<div class="row">
 		<div class="col-md-4 col-md-offset-4">
             <div class="login-panel panel panel-default">
-				<div class="panel-heading">
+				<div class="box-header with-border">
                     <h3 class="panel-title">Firefly III &mdash; Register</h3>
                 </div>
-				<div class="panel-body">
+				<div class="box-body">
 					<p>
 						Registering an account on Firefly requires an e-mail address.
 					</p>
diff --git a/resources/twig/bills/create.twig b/resources/twig/bills/create.twig
index c1e19140a0..72103ab3b0 100644
--- a/resources/twig/bills/create.twig
+++ b/resources/twig/bills/create.twig
@@ -10,11 +10,11 @@
 
 <div class="row">
     <div class="col-lg-6 col-md-12 col-sm-6">
-        <div class="panel panel-primary">
-            <div class="panel-heading">
+        <div class="box box-primary">
+            <div class="box-header with-border">
                 <i class="fa fa-exclamation-circle"></i> {{ 'mandatoryFields'|_ }}
             </div>
-            <div class="panel-body">
+            <div class="box-body">
                 {{ ExpandedForm.text('name') }}
                 {{ ExpandedForm.tags('match') }}
                 {{ ExpandedForm.amount('amount_min') }}
@@ -26,11 +26,11 @@
 
     </div>
     <div class="col-lg-6 col-md-12 col-sm-6">
-        <div class="panel panel-default">
-            <div class="panel-heading">
+        <div class="box">
+            <div class="box-header with-border">
                 <i class="fa fa-smile-o"></i> {{ 'optionalFields'|_ }}
             </div>
-            <div class="panel-body">
+            <div class="box-body">
                 {{ ExpandedForm.integer('skip',0) }}
                 {{ ExpandedForm.checkbox('automatch',1,true) }}
                 {{ ExpandedForm.checkbox('active',1,true) }}
@@ -38,11 +38,11 @@
         </div>
 
         <!-- panel for options -->
-        <div class="panel panel-default">
-            <div class="panel-heading">
+        <div class="box">
+            <div class="box-header with-border">
                 <i class="fa fa-bolt"></i> {{ 'options'|_ }}
             </div>
-            <div class="panel-body">
+            <div class="box-body">
             {{ ExpandedForm.optionsList('create','bill') }}
         </div>
     </div>
diff --git a/resources/twig/bills/delete.twig b/resources/twig/bills/delete.twig
index 15f60530c7..67ad0b4b32 100644
--- a/resources/twig/bills/delete.twig
+++ b/resources/twig/bills/delete.twig
@@ -10,11 +10,11 @@
 <div class="row">
     <div class="col-lg-6 col-lg-offset-3 col-md-12 col-sm-12">
         <div class="panel panel-red">
-            <div class="panel-heading">
+            <div class="box-header with-border">
                 <i class="fa fa-exclamation-circle"></i>
                 {{ trans('form.delete_bill', {'name': bill.name}) }}
             </div>
-            <div class="panel-body">
+            <div class="box-body">
                 <p class="text-danger">
                     {{ trans('form.permDeleteWarning') }}
                 </p>
diff --git a/resources/twig/bills/edit.twig b/resources/twig/bills/edit.twig
index 5cfac2022f..69a3b7ba48 100644
--- a/resources/twig/bills/edit.twig
+++ b/resources/twig/bills/edit.twig
@@ -12,11 +12,11 @@
 
 <div class="row">
     <div class="col-lg-6 col-md-12 col-sm-6">
-        <div class="panel panel-primary">
-            <div class="panel-heading">
+        <div class="box box-primary">
+            <div class="box-header with-border">
                 <i class="fa fa-exclamation-circle"></i> {{ 'mandatoryFields'|_ }}
             </div>
-            <div class="panel-body">
+            <div class="box-body">
                 {{ ExpandedForm.text('name') }}
                 {{ ExpandedForm.tags('match') }}
                 {{ ExpandedForm.amount('amount_min') }}
@@ -29,22 +29,22 @@
 
 </div>
     <div class="col-lg-6 col-md-12 col-sm-6">
-        <div class="panel panel-default">
-            <div class="panel-heading">
+        <div class="box">
+            <div class="box-header with-border">
                 <i class="fa fa-smile-o"></i> {{ 'optionalFields'|_ }}
             </div>
-            <div class="panel-body">
+            <div class="box-body">
                 {{ ExpandedForm.integer('skip') }}
                 {{ ExpandedForm.checkbox('automatch',1) }}
                 {{ ExpandedForm.checkbox('active',1) }}
 
             </div>
         </div>
-            <div class="panel panel-default">
-                <div class="panel-heading">
+            <div class="box">
+                <div class="box-header with-border">
                     <i class="fa fa-bolt"></i> {{ 'options'|_ }}
                 </div>
-                <div class="panel-body">
+                <div class="box-body">
                     {{ ExpandedForm.optionsList('update','bill') }}
                 </div>
 
diff --git a/resources/twig/bills/index.twig b/resources/twig/bills/index.twig
index 9a2b4e66f7..de0d27ab2e 100644
--- a/resources/twig/bills/index.twig
+++ b/resources/twig/bills/index.twig
@@ -7,8 +7,8 @@
 {% block content %}
     <div class="row">
         <div class="col-lg-12 col-sm-12 col-md-12">
-        <div class="panel panel-default">
-            <div class="panel-heading">
+        <div class="box">
+            <div class="box-header with-border">
                 <i class="fa {{ mainTitleIcon }}"></i> {{ title }}
 
                 <!-- ACTIONS MENU -->
diff --git a/resources/twig/bills/show.twig b/resources/twig/bills/show.twig
index 7ce4add9b6..23350f7a46 100644
--- a/resources/twig/bills/show.twig
+++ b/resources/twig/bills/show.twig
@@ -8,8 +8,8 @@
 
 <div class="row">
     <div class="col-lg-6 col-sm-12 col-md-12">
-        <div class="panel panel-default">
-            <div class="panel-heading">
+        <div class="box">
+            <div class="box-header with-border">
                 <i class="fa fa-rotate-right"></i> {{ bill.name }}
 
                 {% if bill.active %}
@@ -38,7 +38,7 @@
                 </div>
 
             </div>
-            <div class="panel-body">
+            <div class="box-body">
                 <table class="table">
                     <tr>
                         <td colspan="2">
@@ -65,11 +65,11 @@
         </div>
     </div>
     <div class="col-lg-6 col-sm-12 col-md-12">
-        <div class="panel panel-default">
-            <div class="panel-heading">
+        <div class="box">
+            <div class="box-header with-border">
                 More
             </div>
-            <div class="panel-body">
+            <div class="box-body">
                 <p>
                     <a href="{{route('bills.rescan',bill.id)}}" class="btn btn-default">Rescan old transactions</a>
                 </p>
@@ -80,11 +80,11 @@
 
 <div class="row">
     <div class="col-lg-12 col-sm-12 col-md-12">
-        <div class="panel panel-default">
-            <div class="panel-heading">
+        <div class="box">
+            <div class="box-header with-border">
                 Chart
             </div>
-            <div class="panel-body">
+            <div class="box-body">
                 <div id="bill-overview"></div>
             </div>
         </div>
@@ -93,11 +93,11 @@
 
 <div class="row">
     <div class="col-lg-12 col-sm-12 col-md-12">
-        <div class="panel panel-default">
-            <div class="panel-heading">
+        <div class="box">
+            <div class="box-header with-border">
                 Connected transaction journals
             </div>
-            <div class="panel-body">
+            <div class="box-body">
                 {% include 'list/journals' %}
             </div>
         </div>
diff --git a/resources/twig/budgets/create.twig b/resources/twig/budgets/create.twig
index 391c4e880d..bafbf2f0a5 100644
--- a/resources/twig/budgets/create.twig
+++ b/resources/twig/budgets/create.twig
@@ -8,22 +8,22 @@
     {{ Form.open({'class' : 'form-horizontal','id' : 'store','url' : route('budgets.store')}) }}
 <div class="row">
     <div class="col-lg-6 col-md-6 col-sm-12">
-        <div class="panel panel-primary">
-            <div class="panel-heading">
+        <div class="box box-primary">
+            <div class="box-header with-border">
                 <i class="fa fa-exclamation"></i> {{ 'mandatoryFields'|_ }}
             </div>
-            <div class="panel-body">
+            <div class="box-body">
                 {{ ExpandedForm.text('name') }}
             </div>
         </div>
     </div>
     <div class="col-lg-6 col-md-6 col-sm-12">
             <!-- panel for options -->
-            <div class="panel panel-default">
-                <div class="panel-heading">
+            <div class="box">
+                <div class="box-header with-border">
                     <i class="fa fa-bolt"></i> {{ 'options'|_ }}
                 </div>
-                <div class="panel-body">
+                <div class="box-body">
                     {{ ExpandedForm.optionsList('create','budget')  }}
                 </div>
             </div>
diff --git a/resources/twig/budgets/delete.twig b/resources/twig/budgets/delete.twig
index 1c67b2de24..dd96f0483f 100644
--- a/resources/twig/budgets/delete.twig
+++ b/resources/twig/budgets/delete.twig
@@ -9,11 +9,11 @@
         <div class="row">
     <div class="col-lg-6 col-lg-offset-3 col-md-12 col-sm-12">
         <div class="panel panel-red">
-            <div class="panel-heading">
+            <div class="box-header with-border">
                 <i class="fa fa-exclamation-circle"></i>
                 {{ trans('form.delete_budget', {'name': budget.name}) }}
             </div>
-            <div class="panel-body">
+            <div class="box-body">
                 <p class="text-danger">
                     {{ trans('form.permDeleteWarning') }}
                 </p>
diff --git a/resources/twig/budgets/edit.twig b/resources/twig/budgets/edit.twig
index 4ddbae87e2..8996e5782b 100644
--- a/resources/twig/budgets/edit.twig
+++ b/resources/twig/budgets/edit.twig
@@ -9,11 +9,11 @@
     <input type="hidden" name="id" value="{{budget.id}}" />
     <div class="row">
         <div class="col-lg-6 col-md-12 col-sm-6">
-            <div class="panel panel-primary">
-                <div class="panel-heading">
+            <div class="box box-primary">
+                <div class="box-header with-border">
                     <i class="fa fa-fw fa-exclamation"></i> {{ 'mandatoryFields'|_ }}
                 </div>
-                <div class="panel-body">
+                <div class="box-body">
                     {{ ExpandedForm.checkbox('active') }}
                     {{ ExpandedForm.text('name') }}
                 </div>
@@ -22,11 +22,11 @@
         </div>
         <div class="col-lg-6 col-md-12 col-sm-6">
             <!-- panel for options -->
-            <div class="panel panel-default">
-                <div class="panel-heading">
+            <div class="box">
+                <div class="box-header with-border">
                     <i class="fa fa-bolt"></i> {{ 'options'|_ }}
                 </div>
-                <div class="panel-body">
+                <div class="box-body">
                     {{ ExpandedForm.optionsList('update','budget')  }}
                 </div>
             </div>
diff --git a/resources/twig/budgets/index.twig b/resources/twig/budgets/index.twig
index fd7db4ef68..e843de6475 100644
--- a/resources/twig/budgets/index.twig
+++ b/resources/twig/budgets/index.twig
@@ -7,12 +7,12 @@
 {% block content %}
     <div class="row">
         <div class="col-lg-9 col-sm-8 col-md-8">
-            <div class="panel panel-default">
-                <div class="panel-heading">
+            <div class="box">
+                <div class="box-header with-border">
                     <i class="fa fa-calendar fa-fw"></i>
                     {{ Session.get('start').formatLocalized(monthFormat) }}
                 </div>
-                <div class="panel-body">
+                <div class="box-body">
                     <div class="row">
                         <div class="col-lg-6 col-md-4 col-sm-3">
                             <small>{{ 'budgeted'|_ }}: <span id="budgetedAmount" class="text-success">{{ budgeted|formatAmountPlain }}</span></small>
@@ -52,12 +52,12 @@
         </div>
         <div class="col-lg-3 col-sm-4 col-md-4">
 
-            <div class="panel panel-default">
-                <div class="panel-heading">
+            <div class="box">
+                <div class="box-header with-border">
                     <i class="fa fa-fw fa-tags"></i>
                     {{ 'transactionsWithoutBudget'|_ }}
                 </div>
-                <div class="panel-body">
+                <div class="box-body">
                     <p>
                         <a href="{{ route('budgets.noBudget') }}">
                             {{ trans('firefly.transactionsWithoutBudgetDate', {date: Session.get('start').formatLocalized(monthFormat)}) }}
@@ -72,8 +72,8 @@
     <div class="row">
         {% for budget in budgets %}
             <div class="col-lg-3 col-sm-4 col-md-6" style="height:180px;">
-                <div class="panel panel-default">
-                    <div class="panel-heading">
+                <div class="box">
+                    <div class="box-header with-border">
                         <i class="fa fa-fw fa-tasks"></i>
                         <!-- link in header -->
                         {% if budget.currentRep %}
@@ -119,24 +119,24 @@
         </div>
         {% endfor %}
         <div class="col-lg-3 col-sm-4 col-md-6">
-            <div class="panel panel-default">
-                <div class="panel-heading">
+            <div class="box">
+                <div class="box-header with-border">
                     <i class="fa fa-fw fa-plus-circle"></i>
                     {{ 'createBudget'|_ }}
                 </div>
-                <div class="panel-body">
+                <div class="box-body">
                     <a href="{{ route('budgets.create') }}" class="btn btn-success"><i class="fa fa-fw fa-plus"></i> {{ 'createBudget'|_ }}</a>
                 </div>
             </div>
         </div>
         {% if inactive|length > 0 %}
             <div class="col-lg-3 col-sm-4 col-md-6">
-                <div class="panel panel-default">
-                    <div class="panel-heading">
+                <div class="box">
+                    <div class="box-header with-border">
                         <i class="fa fa-fw fa-minus-circle"></i>
                         {{ 'inactiveBudgets'|_ }}
                     </div>
-                    <div class="panel-body">
+                    <div class="box-body">
                         {% for index,budget in inactive %}
                             {% if index != inactive|length-1 %}
                                 <a href="{{ route('budgets.show',budget.id) }}">{{ budget.name }}</a>,
diff --git a/resources/twig/budgets/noBudget.twig b/resources/twig/budgets/noBudget.twig
index 4ea747a512..94c0a1048d 100644
--- a/resources/twig/budgets/noBudget.twig
+++ b/resources/twig/budgets/noBudget.twig
@@ -7,11 +7,11 @@
 {% block content %}
 <div class="row">
     <div class="col-lg-12 col-md-12 col-sm-12">
-        <div class="panel panel-default">
-            <div class="panel-heading">
+        <div class="box">
+            <div class="box-header with-border">
                 {{ subTitle }}
             </div>
-            <div class="panel-body">
+            <div class="box-body">
                 {% include 'list/journals.twig' with {'journals': list} %}
             </div>
         </div>
diff --git a/resources/twig/budgets/show.twig b/resources/twig/budgets/show.twig
index 5d2e903b2c..bd8115e6bc 100644
--- a/resources/twig/budgets/show.twig
+++ b/resources/twig/budgets/show.twig
@@ -7,8 +7,8 @@
 {% block content %}
 <div class="row">
     <div class="col-lg-9 col-md-9 col-sm-7">
-        <div class="panel panel-default">
-            <div class="panel-heading">
+        <div class="box">
+            <div class="box-header with-border">
                 {{ 'overview'|_ }}
 
 
@@ -26,13 +26,13 @@
                     </div>
                 </div>
             </div>
-            <div class="panel-body">
+            <div class="box-body">
                 <div id="budgetOverview"></div>
             </div>
         </div>
 
-         <div class="panel panel-default">
-            <div class="panel-heading">
+         <div class="box">
+            <div class="box-header with-border">
                 {{ 'transactions'|_ }}
             </div>
              {% include 'list/journals.twig' %}
@@ -45,11 +45,11 @@
 
         {% for limit in limits %}
             {% for rep in limit.limitRepetitions %}
-                <div class="panel panel-default">
-                    <div class="panel-heading">
+                <div class="box">
+                    <div class="box-header with-border">
                         <a href="{{route('budgets.show',[budget.id,rep.id])}}">{{rep.startdate.formatLocalized(monthFormat)}}</a>
                     </div>
-                    <div class="panel-body">
+                    <div class="box-body">
                         <div class="row">
                             <div class="col-lg-6 col-md-6 col-sm-6">
                                 {{ 'amount'|_ }}: {{ rep.amount|formatAmount  }}
diff --git a/resources/twig/categories/create.twig b/resources/twig/categories/create.twig
index 65ba3cc77b..d5696abebf 100644
--- a/resources/twig/categories/create.twig
+++ b/resources/twig/categories/create.twig
@@ -9,11 +9,11 @@
 
 <div class="row">
     <div class="col-lg-6 col-md-6 col-sm-12">
-        <div class="panel panel-primary">
-            <div class="panel-heading">
+        <div class="box box-primary">
+            <div class="box-header with-border">
                 <i class="fa fa-exclamation"></i> {{ 'mandatoryFields'|_ }}
             </div>
-            <div class="panel-body">
+            <div class="box-body">
                 {{ ExpandedForm.text('name') }}
             </div>
         </div>
@@ -22,11 +22,11 @@
     <div class="col-lg-6 col-md-6 col-sm-12">
 
         <!-- panel for options -->
-        <div class="panel panel-default">
-            <div class="panel-heading">
+        <div class="box">
+            <div class="box-header with-border">
                 <i class="fa fa-bolt"></i> {{ 'options'|_ }}
             </div>
-            <div class="panel-body">
+            <div class="box-body">
                 {{ ExpandedForm.optionsList('create','category')  }}
             </div>
         </div>
diff --git a/resources/twig/categories/delete.twig b/resources/twig/categories/delete.twig
index 81c29775fd..6bd776df01 100644
--- a/resources/twig/categories/delete.twig
+++ b/resources/twig/categories/delete.twig
@@ -9,11 +9,11 @@
 <div class="row">
     <div class="col-lg-6 col-lg-offset-3 col-md-12 col-sm-12">
         <div class="panel panel-red">
-            <div class="panel-heading">
+            <div class="box-header with-border">
                 <i class="fa fa-exclamation-circle"></i>
                 {{ trans('form.delete_category', {'name': category.name}) }}
             </div>
-            <div class="panel-body">
+            <div class="box-body">
                 <p class="text-danger">
                     {{ trans('form.permDeleteWarning') }}
                 </p>
diff --git a/resources/twig/categories/edit.twig b/resources/twig/categories/edit.twig
index f64965889d..36469d4b25 100644
--- a/resources/twig/categories/edit.twig
+++ b/resources/twig/categories/edit.twig
@@ -9,11 +9,11 @@
 <input type="hidden" name="id" value="{{ category.id }}" />
 <div class="row">
     <div class="col-lg-6 col-md-6 col-sm-12">
-        <div class="panel panel-primary">
-            <div class="panel-heading">
+        <div class="box box-primary">
+            <div class="box-header with-border">
                 <i class="fa fa-exclamation"></i> {{ 'mandatoryFields'|_ }}
             </div>
-            <div class="panel-body">
+            <div class="box-body">
                 {{ ExpandedForm.text('name') }}
             </div>
         </div>
@@ -23,11 +23,11 @@
 
 
         <!-- panel for options -->
-        <div class="panel panel-default">
-            <div class="panel-heading">
+        <div class="box">
+            <div class="box-header with-border">
                 <i class="fa fa-bolt"></i> {{ 'options'|_ }}
             </div>
-            <div class="panel-body">
+            <div class="box-body">
                 {{ ExpandedForm.optionsList('update','category') }}
             </div>
         </div>
diff --git a/resources/twig/categories/index.twig b/resources/twig/categories/index.twig
index 47518612e8..7de7d594eb 100644
--- a/resources/twig/categories/index.twig
+++ b/resources/twig/categories/index.twig
@@ -7,8 +7,8 @@
 {% block content %}
 <div class="row">
     <div class="col-lg-12 col-md-12 col-sm-12">
-        <div class="panel panel-default">
-            <div class="panel-heading">
+        <div class="box">
+            <div class="box-header with-border">
                 <i class="fa {{ mainTitleIcon }}"></i> {{ 'categories'|_ }}
 
                 <!-- ACTIONS MENU -->
diff --git a/resources/twig/categories/noCategory.twig b/resources/twig/categories/noCategory.twig
index 36bea404ac..b616b6899d 100644
--- a/resources/twig/categories/noCategory.twig
+++ b/resources/twig/categories/noCategory.twig
@@ -7,11 +7,11 @@
 {% block content %}
 <div class="row">
     <div class="col-lg-12 col-md-12 col-sm-12">
-        <div class="panel panel-default">
-            <div class="panel-heading">
+        <div class="box">
+            <div class="box-header with-border">
                 {{ subTitle }}
             </div>
-            <div class="panel-body">
+            <div class="box-body">
                 {% include 'list/journals.twig' with {'journals': list} %}
             </div>
         </div>
diff --git a/resources/twig/categories/show.twig b/resources/twig/categories/show.twig
index b45ebcfc02..c7f3ba4c00 100644
--- a/resources/twig/categories/show.twig
+++ b/resources/twig/categories/show.twig
@@ -7,23 +7,23 @@
 {% block content %}
 <div class="row">
     <div class="col-lg-6 col-md-6 col-sm-12">
-        <div class="panel panel-default">
-            <div class="panel-heading">
+        <div class="box">
+            <div class="box-header with-border">
                 <i class="fa fa-calendar fa-fw"></i>
                 {{ 'overview'|_ }} (month)
             </div>
-            <div class="panel-body">
+            <div class="box-body">
                 <div id="month"></div>
             </div>
         </div>
     </div>
     <div class="col-lg-6 col-md-6 col-sm-12">
-        <div class="panel panel-default">
-            <div class="panel-heading">
+        <div class="box">
+            <div class="box-header with-border">
                 <i class="fa fa-calendar-o fa-fw"></i>
                 {{ 'overview'|_ }} (all)
             </div>
-            <div class="panel-body">
+            <div class="box-body">
                 <div id="all"></div>
             </div>
         </div>
@@ -32,12 +32,12 @@
 <div class="row">
     <div class="col-lg-12 col-md-12">
 
-         <div class="panel panel-default">
-            <div class="panel-heading">
+         <div class="box">
+            <div class="box-header with-border">
                 <i class="fa fa-repeat fa-fw"></i>
                 {{ 'transactions'|_ }}
             </div>
-            <div class="panel-body">
+            <div class="box-body">
                 {% include 'list/journals' %}
             </div>
         </div>
diff --git a/resources/twig/currency/create.twig b/resources/twig/currency/create.twig
index 86e93c0a4b..72575e2f4c 100644
--- a/resources/twig/currency/create.twig
+++ b/resources/twig/currency/create.twig
@@ -8,11 +8,11 @@
     {{ Form.open({'class' : 'form-horizontal','id' : 'store','route' : 'currency.store'}) }}
 <div class="row">
     <div class="col-lg-6 col-md-6 col-sm-12">
-        <div class="panel panel-primary">
-            <div class="panel-heading">
+        <div class="box box-primary">
+            <div class="box-header with-border">
                 <i class="fa {{ subTitleIcon }}"></i> {{ 'mandatoryFields'|_ }}
             </div>
-            <div class="panel-body">
+            <div class="box-body">
                 {{ ExpandedForm.text('name',null,{'maxlength' : 48}) }}
                 {{ ExpandedForm.text('symbol',null,{'maxlength': 8}) }}
                 {{ ExpandedForm.text('code',null,{'maxlength' : 3}) }}
@@ -24,11 +24,11 @@
     <div class="col-lg-6 col-md-6 col-sm-12">
 
         <!-- panel for options -->
-        <div class="panel panel-default">
-            <div class="panel-heading">
+        <div class="box">
+            <div class="box-header with-border">
                 <i class="fa fa-bolt"></i> {{ 'options'|_ }}
             </div>
-            <div class="panel-body">
+            <div class="box-body">
                 {{ ExpandedForm.optionsList('create','currency') }}
             </div>
         </div>
diff --git a/resources/twig/currency/delete.twig b/resources/twig/currency/delete.twig
index bba00f221d..823e597040 100644
--- a/resources/twig/currency/delete.twig
+++ b/resources/twig/currency/delete.twig
@@ -10,11 +10,11 @@
 <div class="row">
     <div class="col-lg-6 col-lg-offset-3 col-md-12 col-sm-12">
         <div class="panel panel-red">
-            <div class="panel-heading">
+            <div class="box-header with-border">
                 <i class="fa fa-exclamation-circle"></i>
                 {{ trans('form.delete_currency', {'name': currency.name}) }}
             </div>
-            <div class="panel-body">
+            <div class="box-body">
                 <p class="text-danger">
                     {{ trans('form.permDeleteWarning') }}
                 </p>
diff --git a/resources/twig/currency/edit.twig b/resources/twig/currency/edit.twig
index 62c0c1fd2d..30538b8bc0 100644
--- a/resources/twig/currency/edit.twig
+++ b/resources/twig/currency/edit.twig
@@ -10,11 +10,11 @@
 <input type="hidden" name="id" value="{{currency.id}}" />
 <div class="row">
     <div class="col-lg-6 col-md-6 col-sm-12">
-        <div class="panel panel-primary">
-            <div class="panel-heading">
+        <div class="box box-primary">
+            <div class="box-header with-border">
                 <i class="fa {{ subTitleIcon }}"></i> {{ 'mandatoryFields'|_ }}
             </div>
-            <div class="panel-body">
+            <div class="box-body">
                 {{ ExpandedForm.text('name',null,{'maxlength' : 48}) }}
                 {{ ExpandedForm.text('symbol',null,{'maxlength' : 8}) }}
                 {{ ExpandedForm.text('code',null,{'maxlength' : 3}) }}
@@ -25,11 +25,11 @@
     <div class="col-lg-6 col-md-6 col-sm-12">
 
         <!-- panel for options -->
-        <div class="panel panel-default">
-            <div class="panel-heading">
+        <div class="box">
+            <div class="box-header with-border">
                 <i class="fa fa-bolt"></i> {{ 'options'|_ }}
             </div>
-            <div class="panel-body">
+            <div class="box-body">
                 {{ ExpandedForm.optionsList('update','currency') }}
             </div>
         </div>
diff --git a/resources/twig/currency/index.twig b/resources/twig/currency/index.twig
index d5a0059eb8..b269645a11 100644
--- a/resources/twig/currency/index.twig
+++ b/resources/twig/currency/index.twig
@@ -7,11 +7,11 @@
 {% block content %}
     <div class="row">
         <div class="col-lg-12 col-sm-12 col-md-12">
-            <div class="panel panel-default">
-                <div class="panel-heading">
+            <div class="box">
+                <div class="box-header with-border">
                     Currencies
                 </div>
-                <div class="panel-body">
+                <div class="box-body">
                     <p class="text-info">
                         Firefly III supports various currencies which you can set and enable here.
                     </p>
diff --git a/resources/twig/index.twig b/resources/twig/index.twig
index 495d8178b0..ce8a627f22 100644
--- a/resources/twig/index.twig
+++ b/resources/twig/index.twig
@@ -11,9 +11,12 @@
 <div class="row">
     <div class="col-lg-8 col-md-12 col-sm-12">
         <!-- ACCOUNTS -->
-        <div class="box">
+        <div class="box box-primary">
             <div class="box-header with-border">
-                <h3 class="box-title"><i class="fa fa-credit-card fa-fw"></i> <a href="#">{{ 'yourAccounts'|_ }}</a></h3>
+                <h3 class="box-title">{{ 'yourAccounts'|_ }}</h3>
+                <div class="box-tools pull-right">
+                    <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
+                </div>
             </div>
             <div class="box-body">
                 <div id="accounts-chart"></div>
@@ -23,7 +26,10 @@
         <!-- BUDGETS -->
         <div class="box">
             <div class="box-header with-border">
-                <i class="fa fa-tasks fa-fw"></i> <a href="{{route('budgets.index')}}">{{ 'budgetsAndSpending'|_ }}</a>
+                <h3 class="box-title">{{ 'budgetsAndSpending'|_ }}</h3>
+                <div class="box-tools pull-right">
+                    <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
+                </div>
             </div>
             <div class="box-body">
                 <div id="budgets-chart"></div>
@@ -32,7 +38,10 @@
         <!-- CATEGORIES -->
         <div class="box">
             <div class="box-header with-border">
-                <i class="fa fa-bar-chart fa-fw"></i> <a href="{{route('categories.index')}}">{{ 'categories'|_ }}</a>
+                <h3 class="box-title">{{ 'categories'|_ }}</h3>
+                <div class="box-tools pull-right">
+                    <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
+                </div>
             </div>
             <div class="box-body">
                 <div id="categories-chart"></div>
@@ -42,8 +51,10 @@
         <!-- SAVINGS -->
         <div class="box">
             <div class="box-header with-border">
-                <i class="fa fa-line-chart"></i> {{ 'savings'|_ }}
-                <span class="pull-right">{{ savingsTotal|formatAmount }}</span>
+                <h3 class="box-title">{{ 'savings'|_ }}</h3>
+                <div class="box-tools pull-right">
+                    <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
+                </div>
             </div>
             <div class="box-body">
                 {% if savings|length == 0 %}
@@ -96,12 +107,18 @@
                     {% endfor %}
                 {% endif %}
             </div>
+            <div class="box-footer clearfix">
+                <span class="pull-right">{{ 'sum'|_ }}: {{ savingsTotal|formatAmount }}</span>
+            </div>
         </div>
 
         <!-- PIGGY BANKS -->
         <div class="box">
             <div class="box-header with-border">
-                <i class="fa fa-sort-amount-asc fa-fw"></i> {{ 'piggyBanks'|_ }}
+                <h3 class="box-title">{{ 'piggyBanks'|_ }}</h3>
+                <div class="box-tools pull-right">
+                    <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
+                </div>
             </div>
             <div class="box-body">
                 {% if piggyBankAccounts|length  == 0%}
@@ -142,10 +159,14 @@
     </div>
     <div class="col-lg-4 col-md-6 col-sm-12">
 
-        <!-- REMINDERS -->
+        <!-- BILLS -->
         <div class="box">
             <div class="box-header with-border">
-                <i class="fa fa-calendar-o"></i> <a href="{{route('bills.index')}}">{{ 'bills'|_ }}</a>
+                <h3 class="box-title">{{ 'bills'|_ }}</h3>
+                <!-- ACTIONS MENU -->
+                <div class="box-tools pull-right">
+                    <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
+                </div>
             </div>
             <div class="box-body">
                 <div id="bills-chart"></div>
@@ -156,18 +177,14 @@
         {% for data in transactions %}
         <div class="box">
             <div class="box-header with-border">
-                <i class="fa fa-money fa-fw"></i>
-                <a href="{{route('accounts.show',data[1].id)}}">{{data[1].name}}</a> ({{ (data[1]|balance)|formatAmount }})
-
+                <h3 class="box-title">{{data[1].name}} ({{ (data[1]|balance)|formatAmount }})</h3>
 
                 <!-- ACTIONS MENU -->
-                <div class="pull-right">
+                <div class="box-tools pull-right">
+                    <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                     <div class="btn-group">
-                        <button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">
-                            {{ 'actions'|_ }}
-                            <span class="caret"></span>
-                        </button>
-                        <ul class="dropdown-menu pull-right" role="menu">
+                        <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')}}?account_id={{data[1].id}}"><i class="fa fa-long-arrow-left fa-fw"></i> {{ 'newWithdrawal'|_ }}</a></li>
                             <li><a href="{{route('transactions.create','deposit')}}?account_id={{data[1].id}}"><i class="fa fa-long-arrow-right fa-fw"></i> {{ 'newDeposit'|_ }}</a></li>
                             <li><a href="{{route('transactions.create','transfer')}}?account_from_id={{data[1].id}}"><i class="fa fa-fw fa-exchange"></i> {{ 'newTransfer'|_ }}</a></li>
@@ -178,7 +195,12 @@
 
 
             </div>
+            <div class="box-body">
                 {% include 'list/journals-tiny.twig' with {'transactions': data[0],'account': data[1]} %}
+            </div>
+            <div class="box-footer clearfix">
+                <a class="btn btn-sm btn-default btn-flat pull-right" href="{{route('accounts.show',data[1].id)}}">{{ (data[1]|balance)|formatAmountPlain }}</a>
+            </div>
         </div>
         {% endfor %}
     </div>
diff --git a/resources/twig/layout/default.twig b/resources/twig/layout/default.twig
index fa0216e268..9bae41c26b 100644
--- a/resources/twig/layout/default.twig
+++ b/resources/twig/layout/default.twig
@@ -31,7 +31,7 @@
     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
     <![endif]-->
 </head>
-<body class="skin-green sidebar-mini">
+<body class="skin-black sidebar-mini">
 <div class="wrapper">
 
     <header class="main-header">
@@ -148,6 +148,9 @@
                             </li>
                         </ul>
                     </li>
+                    <li>
+                        <a href="#" data-toggle="control-sidebar"><i class="fa fa-plus-circle"></i></a>
+                    </li>
                 </ul>
             </div>
 
@@ -169,141 +172,6 @@
             <!-- /.search form -->
             <!-- sidebar menu: : style can be found in sidebar.less -->
             {% include('partials/menu-sidebar.twig') %}
-            <!--
-            <ul class="sidebar-menu">
-                <li class="active treeview">
-                    <a href="#">
-                        <i class="fa fa-dashboard"></i> <span>Dashboard</span> <i class="fa fa-angle-left pull-right"></i>
-                    </a>
-                    <ul class="treeview-menu">
-                        <li><a href="index.html"><i class="fa fa-circle-o"></i> Dashboard v1</a></li>
-                        <li class="active"><a href="index2.html"><i class="fa fa-circle-o"></i> Dashboard v2</a></li>
-                    </ul>
-                </li>
-                <li class="treeview">
-                    <a href="#">
-                        <i class="fa fa-files-o"></i>
-                        <span>Layout Options</span>
-                        <span class="label label-primary pull-right">4</span>
-                    </a>
-                    <ul class="treeview-menu">
-                        <li><a href="pages/layout/top-nav.html"><i class="fa fa-circle-o"></i> Top Navigation</a></li>
-                        <li><a href="pages/layout/boxed.html"><i class="fa fa-circle-o"></i> Boxed</a></li>
-                        <li><a href="pages/layout/fixed.html"><i class="fa fa-circle-o"></i> Fixed</a></li>
-                        <li><a href="pages/layout/collapsed-sidebar.html"><i class="fa fa-circle-o"></i> Collapsed Sidebar</a></li>
-                    </ul>
-                </li>
-                <li>
-                    <a href="pages/widgets.html">
-                        <i class="fa fa-th"></i> <span>Widgets</span> <small class="label pull-right bg-green">new</small>
-                    </a>
-                </li>
-                <li class="treeview">
-                    <a href="#">
-                        <i class="fa fa-pie-chart"></i>
-                        <span>Charts</span>
-                        <i class="fa fa-angle-left pull-right"></i>
-                    </a>
-                    <ul class="treeview-menu">
-                        <li><a href="pages/charts/chartjs.html"><i class="fa fa-circle-o"></i> ChartJS</a></li>
-                        <li><a href="pages/charts/morris.html"><i class="fa fa-circle-o"></i> Morris</a></li>
-                        <li><a href="pages/charts/flot.html"><i class="fa fa-circle-o"></i> Flot</a></li>
-                        <li><a href="pages/charts/inline.html"><i class="fa fa-circle-o"></i> Inline charts</a></li>
-                    </ul>
-                </li>
-                <li class="treeview">
-                    <a href="#">
-                        <i class="fa fa-laptop"></i>
-                        <span>UI Elements</span>
-                        <i class="fa fa-angle-left pull-right"></i>
-                    </a>
-                    <ul class="treeview-menu">
-                        <li><a href="pages/UI/general.html"><i class="fa fa-circle-o"></i> General</a></li>
-                        <li><a href="pages/UI/icons.html"><i class="fa fa-circle-o"></i> Icons</a></li>
-                        <li><a href="pages/UI/buttons.html"><i class="fa fa-circle-o"></i> Buttons</a></li>
-                        <li><a href="pages/UI/sliders.html"><i class="fa fa-circle-o"></i> Sliders</a></li>
-                        <li><a href="pages/UI/timeline.html"><i class="fa fa-circle-o"></i> Timeline</a></li>
-                        <li><a href="pages/UI/modals.html"><i class="fa fa-circle-o"></i> Modals</a></li>
-                    </ul>
-                </li>
-                <li class="treeview">
-                    <a href="#">
-                        <i class="fa fa-edit"></i> <span>Forms</span>
-                        <i class="fa fa-angle-left pull-right"></i>
-                    </a>
-                    <ul class="treeview-menu">
-                        <li><a href="pages/forms/general.html"><i class="fa fa-circle-o"></i> General Elements</a></li>
-                        <li><a href="pages/forms/advanced.html"><i class="fa fa-circle-o"></i> Advanced Elements</a></li>
-                        <li><a href="pages/forms/editors.html"><i class="fa fa-circle-o"></i> Editors</a></li>
-                    </ul>
-                </li>
-                <li class="treeview">
-                    <a href="#">
-                        <i class="fa fa-table"></i> <span>Tables</span>
-                        <i class="fa fa-angle-left pull-right"></i>
-                    </a>
-                    <ul class="treeview-menu">
-                        <li><a href="pages/tables/simple.html"><i class="fa fa-circle-o"></i> Simple tables</a></li>
-                        <li><a href="pages/tables/data.html"><i class="fa fa-circle-o"></i> Data tables</a></li>
-                    </ul>
-                </li>
-                <li>
-                    <a href="pages/calendar.html">
-                        <i class="fa fa-calendar"></i> <span>Calendar</span>
-                        <small class="label pull-right bg-red">3</small>
-                    </a>
-                </li>
-                <li>
-                    <a href="pages/mailbox/mailbox.html">
-                        <i class="fa fa-envelope"></i> <span>Mailbox</span>
-                        <small class="label pull-right bg-yellow">12</small>
-                    </a>
-                </li>
-                <li class="treeview">
-                    <a href="#">
-                        <i class="fa fa-folder"></i> <span>Examples</span>
-                        <i class="fa fa-angle-left pull-right"></i>
-                    </a>
-                    <ul class="treeview-menu">
-                        <li><a href="pages/examples/invoice.html"><i class="fa fa-circle-o"></i> Invoice</a></li>
-                        <li><a href="pages/examples/login.html"><i class="fa fa-circle-o"></i> Login</a></li>
-                        <li><a href="pages/examples/register.html"><i class="fa fa-circle-o"></i> Register</a></li>
-                        <li><a href="pages/examples/lockscreen.html"><i class="fa fa-circle-o"></i> Lockscreen</a></li>
-                        <li><a href="pages/examples/404.html"><i class="fa fa-circle-o"></i> 404 Error</a></li>
-                        <li><a href="pages/examples/500.html"><i class="fa fa-circle-o"></i> 500 Error</a></li>
-                        <li><a href="pages/examples/blank.html"><i class="fa fa-circle-o"></i> Blank Page</a></li>
-                    </ul>
-                </li>
-                <li class="treeview">
-                    <a href="#">
-                        <i class="fa fa-share"></i> <span>Multilevel</span>
-                        <i class="fa fa-angle-left pull-right"></i>
-                    </a>
-                    <ul class="treeview-menu">
-                        <li><a href="#"><i class="fa fa-circle-o"></i> Level One</a></li>
-                        <li>
-                            <a href="#"><i class="fa fa-circle-o"></i> Level One <i class="fa fa-angle-left pull-right"></i></a>
-                            <ul class="treeview-menu">
-                                <li><a href="#"><i class="fa fa-circle-o"></i> Level Two</a></li>
-                                <li>
-                                    <a href="#"><i class="fa fa-circle-o"></i> Level Two <i class="fa fa-angle-left pull-right"></i></a>
-                                    <ul class="treeview-menu">
-                                        <li><a href="#"><i class="fa fa-circle-o"></i> Level Three</a></li>
-                                        <li><a href="#"><i class="fa fa-circle-o"></i> Level Three</a></li>
-                                    </ul>
-                                </li>
-                            </ul>
-                        </li>
-                        <li><a href="#"><i class="fa fa-circle-o"></i> Level One</a></li>
-                    </ul>
-                </li>
-                <li><a href="documentation/index.html"><i class="fa fa-book"></i> <span>Documentation</span></a></li>
-                <li class="header">LABELS</li>
-                <li><a href="#"><i class="fa fa-circle-o text-red"></i> <span>Important</span></a></li>
-                <li><a href="#"><i class="fa fa-circle-o text-yellow"></i> <span>Warning</span></a></li>
-                <li><a href="#"><i class="fa fa-circle-o text-aqua"></i> <span>Information</span></a></li>
-            </ul>
-            -->
         </section>
         <!-- /.sidebar -->
     </aside>
@@ -322,609 +190,18 @@
 
             <!-- actual content -->
             {% block content %}{% endblock %}
-            <div class="row">
-                <div class="col-md-12">
-                    <div class="box">
-                        <div class="box-header with-border">
-                            <h3 class="box-title">Monthly Recap Report</h3>
-                            <div class="box-tools pull-right">
-                                <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
-                                <div class="btn-group">
-                                    <button class="btn btn-box-tool dropdown-toggle" data-toggle="dropdown"><i class="fa fa-wrench"></i></button>
-                                    <ul class="dropdown-menu" role="menu">
-                                        <li><a href="#">Action</a></li>
-                                        <li><a href="#">Another action</a></li>
-                                        <li><a href="#">Something else here</a></li>
-                                        <li class="divider"></li>
-                                        <li><a href="#">Separated link</a></li>
-                                    </ul>
-                                </div>
-                                <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
-                            </div>
-                        </div><!-- /.box-header -->
-                        <div class="box-body">
-                            <div class="row">
-                                <div class="col-md-8">
-                                    <p class="text-center">
-                                        <strong>Sales: 1 Jan, 2014 - 30 Jul, 2014</strong>
-                                    </p>
-                                    <div class="chart">
-                                        <!-- Sales Chart Canvas -->
-                                        <canvas id="salesChart" height="180"></canvas>
-                                    </div><!-- /.chart-responsive -->
-                                </div><!-- /.col -->
-                                <div class="col-md-4">
-                                    <p class="text-center">
-                                        <strong>Goal Completion</strong>
-                                    </p>
-                                    <div class="progress-group">
-                                        <span class="progress-text">Add Products to Cart</span>
-                                        <span class="progress-number"><b>160</b>/200</span>
-                                        <div class="progress sm">
-                                            <div class="progress-bar progress-bar-aqua" style="width: 80%"></div>
-                                        </div>
-                                    </div><!-- /.progress-group -->
-                                    <div class="progress-group">
-                                        <span class="progress-text">Complete Purchase</span>
-                                        <span class="progress-number"><b>310</b>/400</span>
-                                        <div class="progress sm">
-                                            <div class="progress-bar progress-bar-red" style="width: 80%"></div>
-                                        </div>
-                                    </div><!-- /.progress-group -->
-                                    <div class="progress-group">
-                                        <span class="progress-text">Visit Premium Page</span>
-                                        <span class="progress-number"><b>480</b>/800</span>
-                                        <div class="progress sm">
-                                            <div class="progress-bar progress-bar-green" style="width: 80%"></div>
-                                        </div>
-                                    </div><!-- /.progress-group -->
-                                    <div class="progress-group">
-                                        <span class="progress-text">Send Inquiries</span>
-                                        <span class="progress-number"><b>250</b>/500</span>
-                                        <div class="progress sm">
-                                            <div class="progress-bar progress-bar-yellow" style="width: 80%"></div>
-                                        </div>
-                                    </div><!-- /.progress-group -->
-                                </div><!-- /.col -->
-                            </div><!-- /.row -->
-                        </div><!-- ./box-body -->
-                        <div class="box-footer">
-                            <div class="row">
-                                <div class="col-sm-3 col-xs-6">
-                                    <div class="description-block border-right">
-                                        <span class="description-percentage text-green"><i class="fa fa-caret-up"></i> 17%</span>
-                                        <h5 class="description-header">$35,210.43</h5>
-                                        <span class="description-text">TOTAL REVENUE</span>
-                                    </div><!-- /.description-block -->
-                                </div><!-- /.col -->
-                                <div class="col-sm-3 col-xs-6">
-                                    <div class="description-block border-right">
-                                        <span class="description-percentage text-yellow"><i class="fa fa-caret-left"></i> 0%</span>
-                                        <h5 class="description-header">$10,390.90</h5>
-                                        <span class="description-text">TOTAL COST</span>
-                                    </div><!-- /.description-block -->
-                                </div><!-- /.col -->
-                                <div class="col-sm-3 col-xs-6">
-                                    <div class="description-block border-right">
-                                        <span class="description-percentage text-green"><i class="fa fa-caret-up"></i> 20%</span>
-                                        <h5 class="description-header">$24,813.53</h5>
-                                        <span class="description-text">TOTAL PROFIT</span>
-                                    </div><!-- /.description-block -->
-                                </div><!-- /.col -->
-                                <div class="col-sm-3 col-xs-6">
-                                    <div class="description-block">
-                                        <span class="description-percentage text-red"><i class="fa fa-caret-down"></i> 18%</span>
-                                        <h5 class="description-header">1200</h5>
-                                        <span class="description-text">GOAL COMPLETIONS</span>
-                                    </div><!-- /.description-block -->
-                                </div>
-                            </div><!-- /.row -->
-                        </div><!-- /.box-footer -->
-                    </div><!-- /.box -->
-                </div><!-- /.col -->
-            </div><!-- /.row -->
-
-            <!-- Main row -->
-            <div class="row">
-                <!-- Left col -->
-                <div class="col-md-8">
-                    <!-- MAP & BOX PANE -->
-                    <div class="box box-success">
-                        <div class="box-header with-border">
-                            <h3 class="box-title">Visitors Report</h3>
-                            <div class="box-tools pull-right">
-                                <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
-                                <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
-                            </div>
-                        </div><!-- /.box-header -->
-                        <div class="box-body no-padding">
-                            <div class="row">
-                                <div class="col-md-9 col-sm-8">
-                                    <div class="pad">
-                                        <!-- Map will be created here -->
-                                        <div id="world-map-markers" style="height: 325px;"></div>
-                                    </div>
-                                </div><!-- /.col -->
-                                <div class="col-md-3 col-sm-4">
-                                    <div class="pad box-pane-right bg-green" style="min-height: 280px">
-                                        <div class="description-block margin-bottom">
-                                            <div class="sparkbar pad" data-color="#fff">90,70,90,70,75,80,70</div>
-                                            <h5 class="description-header">8390</h5>
-                                            <span class="description-text">Visits</span>
-                                        </div><!-- /.description-block -->
-                                        <div class="description-block margin-bottom">
-                                            <div class="sparkbar pad" data-color="#fff">90,50,90,70,61,83,63</div>
-                                            <h5 class="description-header">30%</h5>
-                                            <span class="description-text">Referrals</span>
-                                        </div><!-- /.description-block -->
-                                        <div class="description-block">
-                                            <div class="sparkbar pad" data-color="#fff">90,50,90,70,61,83,63</div>
-                                            <h5 class="description-header">70%</h5>
-                                            <span class="description-text">Organic</span>
-                                        </div><!-- /.description-block -->
-                                    </div>
-                                </div><!-- /.col -->
-                            </div><!-- /.row -->
-                        </div><!-- /.box-body -->
-                    </div><!-- /.box -->
-                    <div class="row">
-                        <div class="col-md-6">
-                            <!-- DIRECT CHAT -->
-                            <div class="box box-warning direct-chat direct-chat-warning">
-                                <div class="box-header with-border">
-                                    <h3 class="box-title">Direct Chat</h3>
-                                    <div class="box-tools pull-right">
-                                        <span data-toggle="tooltip" title="3 New Messages" class='badge bg-yellow'>3</span>
-                                        <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
-                                        <button class="btn btn-box-tool" data-toggle="tooltip" title="Contacts" data-widget="chat-pane-toggle"><i class="fa fa-comments"></i></button>
-                                        <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
-                                    </div>
-                                </div><!-- /.box-header -->
-                                <div class="box-body">
-                                    <!-- Conversations are loaded here -->
-                                    <div class="direct-chat-messages">
-                                        <!-- Message. Default to the left -->
-                                        <div class="direct-chat-msg">
-                                            <div class='direct-chat-info clearfix'>
-                                                <span class='direct-chat-name pull-left'>Alexander Pierce</span>
-                                                <span class='direct-chat-timestamp pull-right'>23 Jan 2:00 pm</span>
-                                            </div><!-- /.direct-chat-info -->
-                                            <img class="direct-chat-img" src="dist/img/user1-128x128.jpg" alt="message user image" /><!-- /.direct-chat-img -->
-                                            <div class="direct-chat-text">
-                                                Is this template really for free? That's unbelievable!
-                                            </div><!-- /.direct-chat-text -->
-                                        </div><!-- /.direct-chat-msg -->
-
-                                        <!-- Message to the right -->
-                                        <div class="direct-chat-msg right">
-                                            <div class='direct-chat-info clearfix'>
-                                                <span class='direct-chat-name pull-right'>Sarah Bullock</span>
-                                                <span class='direct-chat-timestamp pull-left'>23 Jan 2:05 pm</span>
-                                            </div><!-- /.direct-chat-info -->
-                                            <img class="direct-chat-img" src="dist/img/user3-128x128.jpg" alt="message user image" /><!-- /.direct-chat-img -->
-                                            <div class="direct-chat-text">
-                                                You better believe it!
-                                            </div><!-- /.direct-chat-text -->
-                                        </div><!-- /.direct-chat-msg -->
-
-                                        <!-- Message. Default to the left -->
-                                        <div class="direct-chat-msg">
-                                            <div class='direct-chat-info clearfix'>
-                                                <span class='direct-chat-name pull-left'>Alexander Pierce</span>
-                                                <span class='direct-chat-timestamp pull-right'>23 Jan 5:37 pm</span>
-                                            </div><!-- /.direct-chat-info -->
-                                            <img class="direct-chat-img" src="dist/img/user1-128x128.jpg" alt="message user image" /><!-- /.direct-chat-img -->
-                                            <div class="direct-chat-text">
-                                                Working with AdminLTE on a great new app! Wanna join?
-                                            </div><!-- /.direct-chat-text -->
-                                        </div><!-- /.direct-chat-msg -->
-
-                                        <!-- Message to the right -->
-                                        <div class="direct-chat-msg right">
-                                            <div class='direct-chat-info clearfix'>
-                                                <span class='direct-chat-name pull-right'>Sarah Bullock</span>
-                                                <span class='direct-chat-timestamp pull-left'>23 Jan 6:10 pm</span>
-                                            </div><!-- /.direct-chat-info -->
-                                            <img class="direct-chat-img" src="dist/img/user3-128x128.jpg" alt="message user image" /><!-- /.direct-chat-img -->
-                                            <div class="direct-chat-text">
-                                                I would love to.
-                                            </div><!-- /.direct-chat-text -->
-                                        </div><!-- /.direct-chat-msg -->
-
-                                    </div><!--/.direct-chat-messages-->
-
-
-                                    <!-- Contacts are loaded here -->
-                                    <div class="direct-chat-contacts">
-                                        <ul class='contacts-list'>
-                                            <li>
-                                                <a href='#'>
-                                                    <img class='contacts-list-img' src='dist/img/user1-128x128.jpg'/>
-                                                    <div class='contacts-list-info'>
-                                <span class='contacts-list-name'>
-                                  Count Dracula
-                                  <small class='contacts-list-date pull-right'>2/28/2015</small>
-                                </span>
-                                                        <span class='contacts-list-msg'>How have you been? I was...</span>
-                                                    </div><!-- /.contacts-list-info -->
-                                                </a>
-                                            </li><!-- End Contact Item -->
-                                            <li>
-                                                <a href='#'>
-                                                    <img class='contacts-list-img' src='dist/img/user7-128x128.jpg'/>
-                                                    <div class='contacts-list-info'>
-                                <span class='contacts-list-name'>
-                                  Sarah Doe
-                                  <small class='contacts-list-date pull-right'>2/23/2015</small>
-                                </span>
-                                                        <span class='contacts-list-msg'>I will be waiting for...</span>
-                                                    </div><!-- /.contacts-list-info -->
-                                                </a>
-                                            </li><!-- End Contact Item -->
-                                            <li>
-                                                <a href='#'>
-                                                    <img class='contacts-list-img' src='dist/img/user3-128x128.jpg'/>
-                                                    <div class='contacts-list-info'>
-                                <span class='contacts-list-name'>
-                                  Nadia Jolie
-                                  <small class='contacts-list-date pull-right'>2/20/2015</small>
-                                </span>
-                                                        <span class='contacts-list-msg'>I'll call you back at...</span>
-                                                    </div><!-- /.contacts-list-info -->
-                                                </a>
-                                            </li><!-- End Contact Item -->
-                                            <li>
-                                                <a href='#'>
-                                                    <img class='contacts-list-img' src='dist/img/user5-128x128.jpg'/>
-                                                    <div class='contacts-list-info'>
-                                <span class='contacts-list-name'>
-                                  Nora S. Vans
-                                  <small class='contacts-list-date pull-right'>2/10/2015</small>
-                                </span>
-                                                        <span class='contacts-list-msg'>Where is your new...</span>
-                                                    </div><!-- /.contacts-list-info -->
-                                                </a>
-                                            </li><!-- End Contact Item -->
-                                            <li>
-                                                <a href='#'>
-                                                    <img class='contacts-list-img' src='dist/img/user6-128x128.jpg'/>
-                                                    <div class='contacts-list-info'>
-                                <span class='contacts-list-name'>
-                                  John K.
-                                  <small class='contacts-list-date pull-right'>1/27/2015</small>
-                                </span>
-                                                        <span class='contacts-list-msg'>Can I take a look at...</span>
-                                                    </div><!-- /.contacts-list-info -->
-                                                </a>
-                                            </li><!-- End Contact Item -->
-                                            <li>
-                                                <a href='#'>
-                                                    <img class='contacts-list-img' src='dist/img/user8-128x128.jpg'/>
-                                                    <div class='contacts-list-info'>
-                                <span class='contacts-list-name'>
-                                  Kenneth M.
-                                  <small class='contacts-list-date pull-right'>1/4/2015</small>
-                                </span>
-                                                        <span class='contacts-list-msg'>Never mind I found...</span>
-                                                    </div><!-- /.contacts-list-info -->
-                                                </a>
-                                            </li><!-- End Contact Item -->
-                                        </ul><!-- /.contatcts-list -->
-                                    </div><!-- /.direct-chat-pane -->
-                                </div><!-- /.box-body -->
-                                <div class="box-footer">
-                                    <form action="#" method="post">
-                                        <div class="input-group">
-                                            <input type="text" name="message" placeholder="Type Message ..." class="form-control"/>
-                          <span class="input-group-btn">
-                            <button type="button" class="btn btn-warning btn-flat">Send</button>
-                          </span>
-                                        </div>
-                                    </form>
-                                </div><!-- /.box-footer-->
-                            </div><!--/.direct-chat -->
-                        </div><!-- /.col -->
-
-                        <div class="col-md-6">
-                            <!-- USERS LIST -->
-                            <div class="box box-danger">
-                                <div class="box-header with-border">
-                                    <h3 class="box-title">Latest Members</h3>
-                                    <div class="box-tools pull-right">
-                                        <span class="label label-danger">8 New Members</span>
-                                        <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
-                                        <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
-                                    </div>
-                                </div><!-- /.box-header -->
-                                <div class="box-body no-padding">
-                                    <ul class="users-list clearfix">
-                                        <li>
-                                            <img src="dist/img/user1-128x128.jpg" alt="User Image"/>
-                                            <a class="users-list-name" href="#">Alexander Pierce</a>
-                                            <span class="users-list-date">Today</span>
-                                        </li>
-                                        <li>
-                                            <img src="dist/img/user8-128x128.jpg" alt="User Image"/>
-                                            <a class="users-list-name" href="#">Norman</a>
-                                            <span class="users-list-date">Yesterday</span>
-                                        </li>
-                                        <li>
-                                            <img src="dist/img/user7-128x128.jpg" alt="User Image"/>
-                                            <a class="users-list-name" href="#">Jane</a>
-                                            <span class="users-list-date">12 Jan</span>
-                                        </li>
-                                        <li>
-                                            <img src="dist/img/user6-128x128.jpg" alt="User Image"/>
-                                            <a class="users-list-name" href="#">John</a>
-                                            <span class="users-list-date">12 Jan</span>
-                                        </li>
-                                        <li>
-                                            <img src="dist/img/user2-160x160.jpg" alt="User Image"/>
-                                            <a class="users-list-name" href="#">Alexander</a>
-                                            <span class="users-list-date">13 Jan</span>
-                                        </li>
-                                        <li>
-                                            <img src="dist/img/user5-128x128.jpg" alt="User Image"/>
-                                            <a class="users-list-name" href="#">Sarah</a>
-                                            <span class="users-list-date">14 Jan</span>
-                                        </li>
-                                        <li>
-                                            <img src="dist/img/user4-128x128.jpg" alt="User Image"/>
-                                            <a class="users-list-name" href="#">Nora</a>
-                                            <span class="users-list-date">15 Jan</span>
-                                        </li>
-                                        <li>
-                                            <img src="dist/img/user3-128x128.jpg" alt="User Image"/>
-                                            <a class="users-list-name" href="#">Nadia</a>
-                                            <span class="users-list-date">15 Jan</span>
-                                        </li>
-                                    </ul><!-- /.users-list -->
-                                </div><!-- /.box-body -->
-                                <div class="box-footer text-center">
-                                    <a href="javascript::" class="uppercase">View All Users</a>
-                                </div><!-- /.box-footer -->
-                            </div><!--/.box -->
-                        </div><!-- /.col -->
-                    </div><!-- /.row -->
-
-                    <!-- TABLE: LATEST ORDERS -->
-                    <div class="box box-info">
-                        <div class="box-header with-border">
-                            <h3 class="box-title">Latest Orders</h3>
-                            <div class="box-tools pull-right">
-                                <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
-                                <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
-                            </div>
-                        </div><!-- /.box-header -->
-                        <div class="box-body">
-                            <div class="table-responsive">
-                                <table class="table no-margin">
-                                    <thead>
-                                    <tr>
-                                        <th>Order ID</th>
-                                        <th>Item</th>
-                                        <th>Status</th>
-                                        <th>Popularity</th>
-                                    </tr>
-                                    </thead>
-                                    <tbody>
-                                    <tr>
-                                        <td><a href="pages/examples/invoice.html">OR9842</a></td>
-                                        <td>Call of Duty IV</td>
-                                        <td><span class="label label-success">Shipped</span></td>
-                                        <td><div class="sparkbar" data-color="#00a65a" data-height="20">90,80,90,-70,61,-83,63</div></td>
-                                    </tr>
-                                    <tr>
-                                        <td><a href="pages/examples/invoice.html">OR1848</a></td>
-                                        <td>Samsung Smart TV</td>
-                                        <td><span class="label label-warning">Pending</span></td>
-                                        <td><div class="sparkbar" data-color="#f39c12" data-height="20">90,80,-90,70,61,-83,68</div></td>
-                                    </tr>
-                                    <tr>
-                                        <td><a href="pages/examples/invoice.html">OR7429</a></td>
-                                        <td>iPhone 6 Plus</td>
-                                        <td><span class="label label-danger">Delivered</span></td>
-                                        <td><div class="sparkbar" data-color="#f56954" data-height="20">90,-80,90,70,-61,83,63</div></td>
-                                    </tr>
-                                    <tr>
-                                        <td><a href="pages/examples/invoice.html">OR7429</a></td>
-                                        <td>Samsung Smart TV</td>
-                                        <td><span class="label label-info">Processing</span></td>
-                                        <td><div class="sparkbar" data-color="#00c0ef" data-height="20">90,80,-90,70,-61,83,63</div></td>
-                                    </tr>
-                                    <tr>
-                                        <td><a href="pages/examples/invoice.html">OR1848</a></td>
-                                        <td>Samsung Smart TV</td>
-                                        <td><span class="label label-warning">Pending</span></td>
-                                        <td><div class="sparkbar" data-color="#f39c12" data-height="20">90,80,-90,70,61,-83,68</div></td>
-                                    </tr>
-                                    <tr>
-                                        <td><a href="pages/examples/invoice.html">OR7429</a></td>
-                                        <td>iPhone 6 Plus</td>
-                                        <td><span class="label label-danger">Delivered</span></td>
-                                        <td><div class="sparkbar" data-color="#f56954" data-height="20">90,-80,90,70,-61,83,63</div></td>
-                                    </tr>
-                                    <tr>
-                                        <td><a href="pages/examples/invoice.html">OR9842</a></td>
-                                        <td>Call of Duty IV</td>
-                                        <td><span class="label label-success">Shipped</span></td>
-                                        <td><div class="sparkbar" data-color="#00a65a" data-height="20">90,80,90,-70,61,-83,63</div></td>
-                                    </tr>
-                                    </tbody>
-                                </table>
-                            </div><!-- /.table-responsive -->
-                        </div><!-- /.box-body -->
-                        <div class="box-footer clearfix">
-                            <a href="javascript::;" class="btn btn-sm btn-info btn-flat pull-left">Place New Order</a>
-                            <a href="javascript::;" class="btn btn-sm btn-default btn-flat pull-right">View All Orders</a>
-                        </div><!-- /.box-footer -->
-                    </div><!-- /.box -->
-                </div><!-- /.col -->
-
-                <div class="col-md-4">
-                    <!-- Info Boxes Style 2 -->
-                    <div class="info-box bg-yellow">
-                        <span class="info-box-icon"><i class="ion ion-ios-pricetag-outline"></i></span>
-                        <div class="info-box-content">
-                            <span class="info-box-text">Inventory</span>
-                            <span class="info-box-number">5,200</span>
-                            <div class="progress">
-                                <div class="progress-bar" style="width: 50%"></div>
-                            </div>
-                  <span class="progress-description">
-                    50% Increase in 30 Days
-                  </span>
-                        </div><!-- /.info-box-content -->
-                    </div><!-- /.info-box -->
-                    <div class="info-box bg-green">
-                        <span class="info-box-icon"><i class="ion ion-ios-heart-outline"></i></span>
-                        <div class="info-box-content">
-                            <span class="info-box-text">Mentions</span>
-                            <span class="info-box-number">92,050</span>
-                            <div class="progress">
-                                <div class="progress-bar" style="width: 20%"></div>
-                            </div>
-                  <span class="progress-description">
-                    20% Increase in 30 Days
-                  </span>
-                        </div><!-- /.info-box-content -->
-                    </div><!-- /.info-box -->
-                    <div class="info-box bg-red">
-                        <span class="info-box-icon"><i class="ion ion-ios-cloud-download-outline"></i></span>
-                        <div class="info-box-content">
-                            <span class="info-box-text">Downloads</span>
-                            <span class="info-box-number">114,381</span>
-                            <div class="progress">
-                                <div class="progress-bar" style="width: 70%"></div>
-                            </div>
-                  <span class="progress-description">
-                    70% Increase in 30 Days
-                  </span>
-                        </div><!-- /.info-box-content -->
-                    </div><!-- /.info-box -->
-                    <div class="info-box bg-aqua">
-                        <span class="info-box-icon"><i class="ion-ios-chatbubble-outline"></i></span>
-                        <div class="info-box-content">
-                            <span class="info-box-text">Direct Messages</span>
-                            <span class="info-box-number">163,921</span>
-                            <div class="progress">
-                                <div class="progress-bar" style="width: 40%"></div>
-                            </div>
-                  <span class="progress-description">
-                    40% Increase in 30 Days
-                  </span>
-                        </div><!-- /.info-box-content -->
-                    </div><!-- /.info-box -->
-
-                    <div class="box box-default">
-                        <div class="box-header with-border">
-                            <h3 class="box-title">Browser Usage</h3>
-                            <div class="box-tools pull-right">
-                                <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
-                                <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
-                            </div>
-                        </div><!-- /.box-header -->
-                        <div class="box-body">
-                            <div class="row">
-                                <div class="col-md-8">
-                                    <div class="chart-responsive">
-                                        <canvas id="pieChart" height="150"></canvas>
-                                    </div><!-- ./chart-responsive -->
-                                </div><!-- /.col -->
-                                <div class="col-md-4">
-                                    <ul class="chart-legend clearfix">
-                                        <li><i class="fa fa-circle-o text-red"></i> Chrome</li>
-                                        <li><i class="fa fa-circle-o text-green"></i> IE</li>
-                                        <li><i class="fa fa-circle-o text-yellow"></i> FireFox</li>
-                                        <li><i class="fa fa-circle-o text-aqua"></i> Safari</li>
-                                        <li><i class="fa fa-circle-o text-light-blue"></i> Opera</li>
-                                        <li><i class="fa fa-circle-o text-gray"></i> Navigator</li>
-                                    </ul>
-                                </div><!-- /.col -->
-                            </div><!-- /.row -->
-                        </div><!-- /.box-body -->
-                        <div class="box-footer no-padding">
-                            <ul class="nav nav-pills nav-stacked">
-                                <li><a href="#">United States of America <span class="pull-right text-red"><i class="fa fa-angle-down"></i> 12%</span></a></li>
-                                <li><a href="#">India <span class="pull-right text-green"><i class="fa fa-angle-up"></i> 4%</span></a></li>
-                                <li><a href="#">China <span class="pull-right text-yellow"><i class="fa fa-angle-left"></i> 0%</span></a></li>
-                            </ul>
-                        </div><!-- /.footer -->
-                    </div><!-- /.box -->
-
-                    <!-- PRODUCT LIST -->
-                    <div class="box box-primary">
-                        <div class="box-header with-border">
-                            <h3 class="box-title">Recently Added Products</h3>
-                            <div class="box-tools pull-right">
-                                <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
-                                <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
-                            </div>
-                        </div><!-- /.box-header -->
-                        <div class="box-body">
-                            <ul class="products-list product-list-in-box">
-                                <li class="item">
-                                    <div class="product-img">
-                                        <img src="dist/img/default-50x50.gif" alt="Product Image"/>
-                                    </div>
-                                    <div class="product-info">
-                                        <a href="javascript::;" class="product-title">Samsung TV <span class="label label-warning pull-right">$1800</span></a>
-                        <span class="product-description">
-                          Samsung 32" 1080p 60Hz LED Smart HDTV.
-                        </span>
-                                    </div>
-                                </li><!-- /.item -->
-                                <li class="item">
-                                    <div class="product-img">
-                                        <img src="dist/img/default-50x50.gif" alt="Product Image"/>
-                                    </div>
-                                    <div class="product-info">
-                                        <a href="javascript::;" class="product-title">Bicycle <span class="label label-info pull-right">$700</span></a>
-                        <span class="product-description">
-                          26" Mongoose Dolomite Men's 7-speed, Navy Blue.
-                        </span>
-                                    </div>
-                                </li><!-- /.item -->
-                                <li class="item">
-                                    <div class="product-img">
-                                        <img src="dist/img/default-50x50.gif" alt="Product Image"/>
-                                    </div>
-                                    <div class="product-info">
-                                        <a href="javascript::;" class="product-title">Xbox One <span class="label label-danger pull-right">$350</span></a>
-                        <span class="product-description">
-                          Xbox One Console Bundle with Halo Master Chief Collection.
-                        </span>
-                                    </div>
-                                </li><!-- /.item -->
-                                <li class="item">
-                                    <div class="product-img">
-                                        <img src="dist/img/default-50x50.gif" alt="Product Image"/>
-                                    </div>
-                                    <div class="product-info">
-                                        <a href="javascript::;" class="product-title">PlayStation 4 <span class="label label-success pull-right">$399</span></a>
-                        <span class="product-description">
-                          PlayStation 4 500GB Console (PS4)
-                        </span>
-                                    </div>
-                                </li><!-- /.item -->
-                            </ul>
-                        </div><!-- /.box-body -->
-                        <div class="box-footer text-center">
-                            <a href="javascript::;" class="uppercase">View All Products</a>
-                        </div><!-- /.box-footer -->
-                    </div><!-- /.box -->
-                </div><!-- /.col -->
-            </div><!-- /.row -->
         </section><!-- /.content -->
     </div><!-- /.content-wrapper -->
 
     <footer class="main-footer">
         <div class="pull-right hidden-xs">
-            <b>Version</b> 2.0
+            <b>Version</b> {{ Config.get('firefly.version') }}
         </div>
-        <strong>Copyright &copy; 2014-2015 <a href="http://almsaeedstudio.com">Almsaeed Studio</a>.</strong> All rights reserved.
+        <strong><a href="https://github.com/JC5/firefly-iii">Firefly III</a></strong>
     </footer>
 
+    {% include('partials/control-bar.twig') %}
+
 </div><!-- ./wrapper -->
 
 <!-- jQuery 2.1.4 -->
@@ -945,12 +222,11 @@
 <!-- ChartJS 1.0.1 -->
 <script src="plugins/chartjs/Chart.min.js" type="text/javascript"></script>
 
+<script src="js/moment.min.js" type="text/javascript"></script>
+
 <!-- AdminLTE dashboard demo (This is only for demo purposes) -->
 <script src="dist/js/pages/dashboard2.js" type="text/javascript"></script>
 
-<!-- AdminLTE for demo purposes -->
-<script src="dist/js/demo.js" type="text/javascript"></script>
-
 <script type="text/javascript">
     var start = "{{Session.get('start').format('d-m-Y')}}";
     var end = "{{Session.get('end').format('d-m-Y')}}";
diff --git a/resources/twig/list/reminders.twig b/resources/twig/list/reminders.twig
index 991b8b37ee..c3d597cc35 100644
--- a/resources/twig/list/reminders.twig
+++ b/resources/twig/list/reminders.twig
@@ -2,8 +2,8 @@
     {% if reminders|length > 0 %}
         {% for reminder in reminders %}
             <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
-                <div class="panel panel-default">
-                    <div class="panel-heading">
+                <div class="box">
+                    <div class="box-header with-border">
                         <a href="{{ route('reminders.show',reminder.id) }}">
                         {% if reminder.notnow %}
                             Dismissed reminder
@@ -13,7 +13,7 @@
                         for piggy bank "{{reminder.remindersable.name}}"
                         </a>
                     </div>
-                    <div class="panel-body">
+                    <div class="box-body">
                         <p>
                             This reminder is active between {{reminder.startdate.format('jS F Y')}}
                             and {{reminder.enddate.format('jS F Y')}}.
diff --git a/resources/twig/partials/boxes.twig b/resources/twig/partials/boxes.twig
index 5766b1e31b..7d8b9a5378 100644
--- a/resources/twig/partials/boxes.twig
+++ b/resources/twig/partials/boxes.twig
@@ -2,7 +2,9 @@
 <div class="row">
     <div class="col-md-3 col-sm-6 col-xs-12">
         <div class="info-box">
-            <span class="info-box-icon bg-aqua"><i class="ion ion-ios-gear-outline"></i></span>
+            <span class="info-box-icon bg-red">
+                <i class="fa fa-upload fa-fw"></i>
+            </span>
             <div class="info-box-content">
                 <span class="info-box-text">{{ 'moneyOut'|_ }}</span>
                 <span class="info-box-number" id="box-out"></span>
@@ -11,7 +13,9 @@
     </div><!-- /.col -->
     <div class="col-md-3 col-sm-6 col-xs-12">
         <div class="info-box">
-            <span class="info-box-icon bg-red"><i class="fa fa-google-plus"></i></span>
+            <span class="info-box-icon bg-green">
+                <i class="fa fa-download faw-fw"></i>
+            </span>
             <div class="info-box-content">
                 <span class="info-box-text">{{ 'moneyIn'|_ }}</span>
                 <span class="info-box-number" id="box-in"></span>
@@ -24,7 +28,9 @@
 
     <div class="col-md-3 col-sm-6 col-xs-12">
         <div class="info-box">
-            <span class="info-box-icon bg-green"><i class="ion ion-ios-cart-outline"></i></span>
+            <span class="info-box-icon bg-blue">
+                <i class="fa fa-calendar fa-fw"></i>
+            </span>
             <div class="info-box-content">
                 <span class="info-box-text">{{ 'billsToPay'|_ }}</span>
                 <span class="info-box-number" id="box-bills-unpaid"></span>
@@ -33,91 +39,13 @@
     </div><!-- /.col -->
     <div class="col-md-3 col-sm-6 col-xs-12">
         <div class="info-box">
-            <span class="info-box-icon bg-yellow"><i class="ion ion-ios-people-outline"></i></span>
+            <span class="info-box-icon bg-aqua">
+                <i class="fa fa-line-chart fa-fw"></i>
+            </span>
             <div class="info-box-content">
                 <span class="info-box-text">{{ 'billsPaid'|_ }}</span>
                 <span class="info-box-number" id="box-bills-paid"></span>
             </div><!-- /.info-box-content -->
         </div><!-- /.info-box -->
     </div><!-- /.col -->
-</div><!-- /.row -->
-
-
-
-<div class="row row-eq-height">
-    <!-- Right -->
-    <div class="col-lg-4 col-md-6 hidden-sm hidden-xs">
-        <div class="row">
-            <div class="col-lg-12 col-md-12">
-                <div class="panel panel-default">
-                    <div class="panel-body" style="padding-top:5px;padding-bottom:5px;padding-left:5px;">
-
-                        <ul class="nav nav-pills">
-                            <li role="presentation" class="dropdown">
-                                <a class="dropdown-toggle" data-toggle="dropdown" href="#"
-                                   role="button" aria-expanded="false" style="padding-top:10px;padding-bottom:10px;padding-left:10px;">
-                                    <i class="fa fa-plus"></i> {{ 'createNew'|_ }} ... <span class="caret"></span>
-                                </a>
-                                <ul class="dropdown-menu" role="menu">
-                                    <li><a href="{{ route('transactions.create','withdrawal') }}"><i class="fa fa-long-arrow-left fa-fw"></i> {{ 'create_new_withdrawal'|_ }}</a></li>
-                                    <li><a href="{{ route('transactions.create','deposit') }}"><i class="fa fa-long-arrow-right fa-fw"></i> {{ 'create_new_deposit'|_ }}</a></li>
-                                    <li><a href="{{ route('transactions.create','transfer') }}"><i class="fa fa-exchange fa-fw"></i> {{ 'create_new_transfer'|_ }}</a></li>
-                                    <li class="divider"></li>
-                                    <li><a href="{{ route('accounts.create','asset') }}"><i class="fa fa-money fa-fw"></i> {{ 'create_new_asset'|_ }}</a></li>
-                                    <li><a href="{{ route('accounts.create','expense') }}"><i class="fa fa-shopping-cart fa-fw"></i> {{ 'create_new_expense'|_ }}</a></li>
-                                    <li><a href="{{ route('accounts.create','revenue') }}"><i class="fa fa-download fa-fw"></i> {{ 'create_new_revenue'|_ }}</a></li>
-                                    <li class="divider"></li>
-                                    <li><a href="{{ route('piggy-banks.create') }}"><i class="fa fa-sort-amount-asc fa-fw"></i> {{ 'create_new_piggy_bank'|_ }}</a></li>
-                                    <li><a href="{{ route('bills.create') }}"><i class="fa fa-calendar-o fa-fw"></i> {{ 'create_new_bill'|_ }}</a></li>
-                                </ul>
-                            </li>
-                        </ul>
-                    </div>
-                </div>
-            </div>
-            <div class="col-lg-12 col-md-12">
-                <div class="panel panel-default">
-                    <div class="panel-body">&nbsp;
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-
-
-<div class="row hidden-xs hidden-sm">
-
-
-</div>
-
-
-<div class="row">
-    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 visible-xs visible-sm hidden-md hidden-lg">
-        <div class="panel panel-default">
-            <div class="panel-body" style="padding-top:5px;padding-bottom:5px;padding-left:5px;">
-
-                <ul class="nav nav-pills">
-                    <li role="presentation" class="dropdown" style="width:100%;">
-                        <a class="dropdown-toggle" data-toggle="dropdown" href="#"
-                           role="button" aria-expanded="false" style="padding-top:10px;padding-bottom:10px;padding-left:10px;">
-                            <i class="fa fa-plus"></i> {{ 'createNew'|_ }} ... <span class="caret"></span>
-                        </a>
-                        <ul class="dropdown-menu" role="menu">
-                            <li><a href="{{ route('transactions.create','withdrawal') }}"><i class="fa fa-long-arrow-left fa-fw"></i> {{ 'create_new_withdrawal'|_ }}</a></li>
-                            <li><a href="{{ route('transactions.create','deposit') }}"><i class="fa fa-long-arrow-right fa-fw"></i> {{ 'create_new_deposit'|_ }}</a></li>
-                            <li><a href="{{ route('transactions.create','transfer') }}"><i class="fa fa-exchange fa-fw"></i> {{ 'create_new_transfer'|_ }}</a></li>
-                            <li class="divider"></li>
-                            <li><a href="{{ route('accounts.create','asset') }}"><i class="fa fa-money fa-fw"></i> {{ 'create_new_asset'|_ }}</a></li>
-                            <li><a href="{{ route('accounts.create','expense') }}"><i class="fa fa-shopping-cart fa-fw"></i> {{ 'create_new_expense'|_ }}</a></li>
-                            <li><a href="{{ route('accounts.create','revenue') }}"><i class="fa fa-download fa-fw"></i> {{ 'create_new_revenue'|_ }}</a></li>
-                            <li class="divider"></li>
-                            <li><a href="{{ route('piggy-banks.create') }}"><i class="fa fa-sort-amount-asc fa-fw"></i> {{ 'create_new_piggy_bank'|_ }}</a></li>
-                            <li><a href="{{ route('bills.create') }}"><i class="fa fa-calendar-o fa-fw"></i> {{ 'create_new_bill'|_ }}</a></li>
-                        </ul>
-                    </li>
-                </ul>
-            </div>
-        </div>
-    </div>
-</div>
+</div><!-- /.row -->
\ No newline at end of file
diff --git a/resources/twig/partials/control-bar.twig b/resources/twig/partials/control-bar.twig
new file mode 100644
index 0000000000..1da645734d
--- /dev/null
+++ b/resources/twig/partials/control-bar.twig
@@ -0,0 +1,33 @@
+
+<!-- Control Sidebar -->
+<aside class="control-sidebar control-sidebar-dark">
+    <!-- Tab panes -->
+    <div class="tab-content">
+        <!-- Home tab content -->
+        <div class="tab-panel active" id="control-sidebar-home-tab">
+            <h3 class="control-sidebar-heading">Create new something.</h3>
+            <ul class='control-sidebar-menu'>
+                <li>
+                    <a href="javascript::;">
+                        <i class="menu-icon fa fa-long-arrow-left bg-red"></i>
+                        <div class="menu-info">
+                            <h4 class="control-sidebar-subheading">New withdrawal</h4>
+                        </div>
+                    </a>
+                </li>
+
+                <li>
+                    <a href="javascript::;">
+                        <h4 class="control-sidebar-subheading">
+                            Create new something
+                        </h4>
+                    </a>
+                </li>
+            </ul><!-- /.control-sidebar-menu -->
+
+        </div><!-- /.tab-pane -->
+    </div>
+</aside><!-- /.control-sidebar -->
+<!-- Add the sidebar's background. This div must be placed
+     immediately after the control sidebar -->
+<div class='control-sidebar-bg'></div>
diff --git a/resources/twig/partials/reports/accounts.twig b/resources/twig/partials/reports/accounts.twig
index f7254a5825..e439ff0a91 100644
--- a/resources/twig/partials/reports/accounts.twig
+++ b/resources/twig/partials/reports/accounts.twig
@@ -1,5 +1,5 @@
-<div class="panel panel-default">
-    <div class="panel-heading">
+<div class="box">
+    <div class="box-header with-border">
         <i class="fa fa-credit-card fa-fw"></i>
         {{ 'accountBalances'|_ }}
     </div>
diff --git a/resources/twig/partials/reports/balance.twig b/resources/twig/partials/reports/balance.twig
index f728d72ca4..7d8a228197 100644
--- a/resources/twig/partials/reports/balance.twig
+++ b/resources/twig/partials/reports/balance.twig
@@ -1,5 +1,5 @@
-<div class="panel panel-default">
-    <div class="panel-heading">
+<div class="box">
+    <div class="box-header with-border">
         <i class="fa fa-sort-amount-asc fa-fw"></i>
         {{ 'budgets'|_ }} ({{ 'splitByAccount'|_|lower }})
     </div>
diff --git a/resources/twig/partials/reports/bills.twig b/resources/twig/partials/reports/bills.twig
index 3d6978fc93..0b951c8c3c 100644
--- a/resources/twig/partials/reports/bills.twig
+++ b/resources/twig/partials/reports/bills.twig
@@ -1,5 +1,5 @@
-<div class="panel panel-default">
-    <div class="panel-heading">
+<div class="box">
+    <div class="box-header with-border">
         <i class="fa fa-calendar-o fa-fw"></i>
         {{ 'bills'|_ }}
     </div>
diff --git a/resources/twig/partials/reports/budgets.twig b/resources/twig/partials/reports/budgets.twig
index 5e69cb0997..de98832aba 100644
--- a/resources/twig/partials/reports/budgets.twig
+++ b/resources/twig/partials/reports/budgets.twig
@@ -1,6 +1,6 @@
-<div class="panel panel-default">
+<div class="box">
 
-    <div class="panel-heading">
+    <div class="box-header with-border">
         <i class="fa fa-tasks fa-fw"></i>
         {{ 'budgets'|_ }}
     </div>
diff --git a/resources/twig/partials/reports/categories.twig b/resources/twig/partials/reports/categories.twig
index be58a3290a..82c0a71c8d 100644
--- a/resources/twig/partials/reports/categories.twig
+++ b/resources/twig/partials/reports/categories.twig
@@ -1,5 +1,5 @@
-<div class="panel panel-default">
-    <div class="panel-heading">
+<div class="box">
+    <div class="box-header with-border">
         <i class="fa fa-bar-chart fa-fw"></i>
         {{ 'categories'|_ }}
     </div>
diff --git a/resources/twig/partials/reports/expenses.twig b/resources/twig/partials/reports/expenses.twig
index b7258b3525..acb6890306 100644
--- a/resources/twig/partials/reports/expenses.twig
+++ b/resources/twig/partials/reports/expenses.twig
@@ -1,5 +1,5 @@
-<div class="panel panel-default">
-    <div class="panel-heading">
+<div class="box">
+    <div class="box-header with-border">
         <i class="fa fa-long-arrow-left fa-fw"></i>
         {{ 'expenses'|_ }} ({{ trans('firefly.topX',{number: expenseTopLength}) }})
     </div>
diff --git a/resources/twig/partials/reports/income-vs-expenses.twig b/resources/twig/partials/reports/income-vs-expenses.twig
index 044c0b952f..0097003fe7 100644
--- a/resources/twig/partials/reports/income-vs-expenses.twig
+++ b/resources/twig/partials/reports/income-vs-expenses.twig
@@ -1,5 +1,5 @@
-<div class="panel panel-default">
-    <div class="panel-heading">
+<div class="box">
+    <div class="box-header with-border">
         <i class="fa fa-fw fa-exchange"></i>
         {{ 'incomeVsExpenses'|_ }}
     </div>
diff --git a/resources/twig/partials/reports/income.twig b/resources/twig/partials/reports/income.twig
index 7f7dcd9e62..9c85dd5ec8 100644
--- a/resources/twig/partials/reports/income.twig
+++ b/resources/twig/partials/reports/income.twig
@@ -1,5 +1,5 @@
-<div class="panel panel-default">
-    <div class="panel-heading">
+<div class="box">
+    <div class="box-header with-border">
         <i class="fa fa-long-arrow-right fa-fw"></i>
         {{ 'income'|_ }} ({{ trans('firefly.topX',{number: incomeTopLength}) }})
     </div>
diff --git a/resources/twig/piggy-banks/create.twig b/resources/twig/piggy-banks/create.twig
index 953dc40312..43bcc06260 100644
--- a/resources/twig/piggy-banks/create.twig
+++ b/resources/twig/piggy-banks/create.twig
@@ -10,11 +10,11 @@
 
 <div class="row">
     <div class="col-lg-6 col-md-12 col-sm-6">
-        <div class="panel panel-primary">
-            <div class="panel-heading">
+        <div class="box box-primary">
+            <div class="box-header with-border">
                 <i class="fa fa-fw fa-exclamation"></i> {{ 'mandatoryFields'|_ }}
             </div>
-            <div class="panel-body">
+            <div class="box-body">
 
                 {{ ExpandedForm.text('name') }}
                 {{ ExpandedForm.select('account_id',accounts,null,{'label' : 'saveOnAccount'|_}) }}
@@ -24,11 +24,11 @@
         </div>
     </div>
     <div class="col-lg-6 col-md-12 col-sm-12">
-        <div class="panel panel-default">
-            <div class="panel-heading">
+        <div class="box">
+            <div class="box-header with-border">
                 <i class="fa fa-smile-o"></i> {{ 'optionalFields'|_ }}
             </div>
-            <div class="panel-body">
+            <div class="box-body">
                 {{ ExpandedForm.date('targetdate') }}
                 {{ ExpandedForm.checkbox('remind_me','1',false) }}
                 {{ ExpandedForm.select('reminder',periods,'month') }}
@@ -36,11 +36,11 @@
         </div>
 
         <!-- panel for options -->
-        <div class="panel panel-default">
-            <div class="panel-heading">
+        <div class="box">
+            <div class="box-header with-border">
                 <i class="fa fa-bolt"></i> {{ 'options'|_ }}
             </div>
-            <div class="panel-body">
+            <div class="box-body">
                 {{ ExpandedForm.optionsList('create','piggy bank') }}
             </div>
         </div>
diff --git a/resources/twig/piggy-banks/delete.twig b/resources/twig/piggy-banks/delete.twig
index 0089503b1e..08fe758dcd 100644
--- a/resources/twig/piggy-banks/delete.twig
+++ b/resources/twig/piggy-banks/delete.twig
@@ -9,11 +9,11 @@
         <div class="row">
     <div class="col-lg-6 col-lg-offset-3 col-md-12 col-sm-12">
         <div class="panel panel-red">
-            <div class="panel-heading">
+            <div class="box-header with-border">
                 <i class="fa fa-exclamation-circle"></i>
                 {{ trans('form.delete_piggyBank', {'name': piggyBank.name}) }}
             </div>
-            <div class="panel-body">
+            <div class="box-body">
                 <p class="text-danger">
                     {{ trans('form.permDeleteWarning') }}
                 </p>
diff --git a/resources/twig/piggy-banks/edit.twig b/resources/twig/piggy-banks/edit.twig
index 6245deac5b..8bb27ee256 100644
--- a/resources/twig/piggy-banks/edit.twig
+++ b/resources/twig/piggy-banks/edit.twig
@@ -12,11 +12,11 @@
 
 <div class="row">
     <div class="col-lg-6 col-md-12 col-sm-6">
-        <div class="panel panel-primary">
-            <div class="panel-heading">
+        <div class="box box-primary">
+            <div class="box-header with-border">
                 <i class="fa fa-fw fa-exclamation"></i> {{ 'mandatoryFields'|_ }}
             </div>
-            <div class="panel-body">
+            <div class="box-body">
 
                 {{ ExpandedForm.text('name') }}
                 {{ ExpandedForm.select('account_id',accounts,null,{'label' : 'saveOnAccount'|_}) }}
@@ -27,11 +27,11 @@
 
     </div>
     <div class="col-lg-6 col-md-12 col-sm-12">
-        <div class="panel panel-default">
-            <div class="panel-heading">
+        <div class="box">
+            <div class="box-header with-border">
                 <i class="fa fa-smile-o"></i> {{ 'optionalFields'|_ }}
             </div>
-            <div class="panel-body">
+            <div class="box-body">
                 {{ ExpandedForm.date('targetdate') }}
                 {{ ExpandedForm.checkbox('remind_me','1',preFilled.remind_me) }}
                 {{ ExpandedForm.select('reminder',periods,preFilled.reminder) }}
@@ -39,11 +39,11 @@
         </div>
 
         <!-- panel for options -->
-        <div class="panel panel-default">
-            <div class="panel-heading">
+        <div class="box">
+            <div class="box-header with-border">
                 <i class="fa fa-bolt"></i> {{ 'options'|_ }}
             </div>
-            <div class="panel-body">
+            <div class="box-body">
                 {{ ExpandedForm.optionsList('update','piggy bank') }}
             </div>
         </div>
diff --git a/resources/twig/piggy-banks/index.twig b/resources/twig/piggy-banks/index.twig
index 92cec00f6e..7259605d34 100644
--- a/resources/twig/piggy-banks/index.twig
+++ b/resources/twig/piggy-banks/index.twig
@@ -15,8 +15,8 @@
 
     <div class="row">
         <div class="col-lg-12 col-md-12 col-sm-12">
-            <div class="panel panel-default">
-                <div class="panel-heading">{{ 'piggyBanks'|_ }}</div>
+            <div class="box">
+                <div class="box-header with-border">{{ 'piggyBanks'|_ }}</div>
                 {% include 'list/piggy-banks.twig' %}
             </div>
         </div>
@@ -24,8 +24,8 @@
 
     <div class="row">
         <div class="col-lg-12 col-md-12 col-sm-12">
-            <div class="panel panel-default">
-                <div class="panel-heading">
+            <div class="box">
+                <div class="box-header with-border">
                     <i class="fa fa-fw fa-money"></i> {{ 'account_status'|_ }}
                 </div>
                 <table class="table table-striped">
diff --git a/resources/twig/piggy-banks/show.twig b/resources/twig/piggy-banks/show.twig
index 22185845b0..09781b7e11 100644
--- a/resources/twig/piggy-banks/show.twig
+++ b/resources/twig/piggy-banks/show.twig
@@ -7,18 +7,18 @@
 {% block content %}
 <div class="row">
     <div class="col-lg-8 col-md-8 col-sm-6">
-        <div class="panel panel-default">
-            <div class="panel-heading">
+        <div class="box">
+            <div class="box-header with-border">
                 <i class="fa fa-fw fa-clock-o"></i> {{ 'events'|_ }}
             </div>
-            <div class="panel-body">
+            <div class="box-body">
                 <div id="piggy-bank-history"></div>
             </div>
         </div>
     </div>
     <div class="col-lg-4 col-md-4 col-sm-6">
-            <div class="panel panel-default">
-                <div class="panel-heading">
+            <div class="box">
+                <div class="box-header with-border">
                     <i class="fa fa-fw fa-info-circle"></i> {{ 'details'|_ }}
 
                     <!-- ACTIONS MENU -->
@@ -100,8 +100,8 @@
                             </tr>
                     </table>
             </div>
-            <div class="panel panel-default">
-                <div class="panel-heading">
+            <div class="box">
+                <div class="box-header with-border">
                     <i class="fa fa-fw fa-clock-o"></i> {{ 'table'|_ }}
                 </div>
                 {% include 'list/piggy-bank-events' %}
diff --git a/resources/twig/preferences/index.twig b/resources/twig/preferences/index.twig
index 5dd5747665..2135f9d005 100644
--- a/resources/twig/preferences/index.twig
+++ b/resources/twig/preferences/index.twig
@@ -9,11 +9,11 @@
 
 <div class="row">
     <div class="col-lg-6 col-md-6 col-sm-6">
-        <div class="panel panel-default">
-          <div class="panel-heading">
+        <div class="box">
+          <div class="box-header with-border">
                 <i class="fa fa-credit-card fa-fw"></i> Home screen accounts
             </div>
-            <div class="panel-body">
+            <div class="box-body">
                 <p class="text-info">Which accounts should be displayed on the home page?</p>
                 {% for account in accounts %}
                     <div class="form-group">
@@ -32,11 +32,11 @@
                 {% endfor %}
             </div>
         </div>
-        <div class="panel panel-default">
-            <div class="panel-heading">
+        <div class="box">
+            <div class="box-header with-border">
                 <i class="fa fa-credit-card fa-fw"></i> Budget settings
             </div>
-            <div class="panel-body">
+            <div class="box-body">
                 <p class="text-info">
                     What's the maximum amount of money a budget envelope may contain?
                 </p>
@@ -46,11 +46,11 @@
 
     </div>
     <div class="col-lg-6 col-md-6 col-sm-6">
-        <div class="panel panel-default">
-          <div class="panel-heading">
+        <div class="box">
+          <div class="box-header with-border">
                 <i class="fa fa-clock-o fa-fw"></i> View range
             </div>
-            <div class="panel-body">
+            <div class="box-body">
                 <p class="text-info">Some charts are automatically grouped in periods. What period would you prefer?</p>
                 <div class="radio">
                     <label>
@@ -90,11 +90,11 @@
         </div>
     </div>
     <div class="col-lg-6 col-md-6 col-sm-6">
-        <div class="panel panel-default">
-            <div class="panel-heading">
+        <div class="box">
+            <div class="box-header with-border">
                 <i class="fa fa-flag fa-fw"></i> Languages
             </div>
-            <div class="panel-body">
+            <div class="box-body">
                 {% for key, lang in Config.get('firefly.lang') %}
                     <div class="radio">
                         <label>
diff --git a/resources/twig/profile/change-password.twig b/resources/twig/profile/change-password.twig
index e8d14cce5a..4f1d4137e7 100644
--- a/resources/twig/profile/change-password.twig
+++ b/resources/twig/profile/change-password.twig
@@ -7,11 +7,11 @@
 {% block content %}
 <div class="row">
     <div class="col-lg-6 col-md-12 col-sm-12">
-        <div class="panel panel-primary">
-            <div class="panel-heading">
+        <div class="box box-primary">
+            <div class="box-header with-border">
                 Change your password
             </div>
-            <div class="panel-body">
+            <div class="box-body">
 
                 {% if errors|length > 0 %}
                     <ul>
diff --git a/resources/twig/profile/delete-account.twig b/resources/twig/profile/delete-account.twig
index f05d102a9e..b77b6a41d4 100644
--- a/resources/twig/profile/delete-account.twig
+++ b/resources/twig/profile/delete-account.twig
@@ -8,10 +8,10 @@
 <div class="row">
     <div class="col-lg-6 col-md-12 col-sm-12">
         <div class="panel panel-red">
-            <div class="panel-heading">
+            <div class="box-header with-border">
                 Delete your account
             </div>
-            <div class="panel-body">
+            <div class="box-body">
 
                 <p class="text-danger">
                     Deleting your account will also delete any accounts, transactions, <em>anything</em>
diff --git a/resources/twig/profile/index.twig b/resources/twig/profile/index.twig
index 3f816cb3db..547b8413f6 100644
--- a/resources/twig/profile/index.twig
+++ b/resources/twig/profile/index.twig
@@ -7,11 +7,11 @@
 {% block content %}
 <div class="row">
     <div class="col-lg-6 col-md-12 col-sm-12">
-        <div class="panel panel-primary">
-            <div class="panel-heading">
+        <div class="box box-primary">
+            <div class="box-header with-border">
                 Options
             </div>
-            <div class="panel-body">
+            <div class="box-body">
                 <ul>
                     <li><a href="{{route('change-password')}}">Change your password</a></li>
                     <li><a class="text-danger" href="{{route('delete-account')}}">Delete account</a></li>
diff --git a/resources/twig/reminders/show.twig b/resources/twig/reminders/show.twig
index 347a7fc072..b732d1b716 100644
--- a/resources/twig/reminders/show.twig
+++ b/resources/twig/reminders/show.twig
@@ -7,8 +7,8 @@
 {% block content %}
 <div class="row">
     <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
-        <div class="panel panel-default">
-            <div class="panel-heading">
+        <div class="box">
+            <div class="box-header with-border">
                 <a href="{{route('reminders.show',reminder.id)}}">
                 {% if reminder.notnow %}
                     Dismissed reminder
@@ -18,7 +18,7 @@
                 for piggy bank "{{reminder.remindersable.name}}"
                 </a>
             </div>
-            <div class="panel-body">
+            <div class="box-body">
                 <p>
                     Active between {{reminder.startdate.format('jS F Y')}}
                     and {{reminder.enddate.format('jS F Y')}}.
diff --git a/resources/twig/reports/index.twig b/resources/twig/reports/index.twig
index 7c7207b089..6c1fc7beee 100644
--- a/resources/twig/reports/index.twig
+++ b/resources/twig/reports/index.twig
@@ -7,12 +7,12 @@
 {% block content %}
     <div class="row">
         <div class="col-lg-12 col-md-12 col-sm-12">
-            <div class="panel panel-default">
-                <div class="panel-heading">
+            <div class="box">
+                <div class="box-header with-border">
                     <i class="fa fa-calendar fa-fw"></i>
                     {{ 'reportsOwnAccounts'|_ }}
                 </div>
-                <div class="panel-body">
+                <div class="box-body">
 
                     {% for year, entries in months %}
                     <h4><a href="{{route('reports.year',year)}}">{{ year }}</a></h4>
@@ -29,12 +29,12 @@
 
     <div class="row">
         <div class="col-lg-12 col-md-12 col-sm-12">
-            <div class="panel panel-default">
-                <div class="panel-heading">
+            <div class="box">
+                <div class="box-header with-border">
                     <i class="fa fa-calendar fa-fw"></i>
                     {{ 'reportsOwnAccountsAndShared'|_ }}
                 </div>
-                <div class="panel-body">
+                <div class="box-body">
 
                     {% for year, entries in months %}
                         <h4><a href="{{route('reports.year',[year, 'shared'])}}">{{ year }}</a></h4>
diff --git a/resources/twig/reports/month.twig b/resources/twig/reports/month.twig
index 4c8f853c15..fd176d57b5 100644
--- a/resources/twig/reports/month.twig
+++ b/resources/twig/reports/month.twig
@@ -8,12 +8,12 @@
 
     <div class="row">
         <div class="col-lg-12 col-md-12 col-sm-12">
-            <div class="panel panel-default">
-                <div class="panel-heading">
+            <div class="box">
+                <div class="box-header with-border">
                     <i class="fa fa-line-chart"></i>
                     {{ 'accountBalances'|_ }}
                 </div>
-                <div class="panel-body">
+                <div class="box-body">
                     <div id="account-balances-chart"></div>
                 </div>
             </div>
@@ -62,12 +62,12 @@
 </div>
 <div class="row">
     <div class="col-lg-12 col-md-12 col-sm-12">
-        <div class="panel panel-default">
-            <div class="panel-heading">
+        <div class="box">
+            <div class="box-header with-border">
                 <i class="fa fa-fw fa-folder-o"></i>
                 {{ 'outsideOfBudgets'|_ }}
             </div>
-            <div class="panel-body">Body</div>
+            <div class="box-body">Body</div>
         </div>
     </div>
 </div>
diff --git a/resources/twig/reports/year.twig b/resources/twig/reports/year.twig
index 3e75d41a63..1273d717bb 100644
--- a/resources/twig/reports/year.twig
+++ b/resources/twig/reports/year.twig
@@ -8,23 +8,23 @@
 
     <div class="row">
         <div class="col-lg-10 col-md-8 col-sm-12">
-            <div class="panel panel-default">
-                <div class="panel-heading">
+            <div class="box">
+                <div class="box-header with-border">
                     <i class="fa fa-line-chart"></i>
                     {{ 'incomeVsExpenses'|_ }}
                 </div>
-                <div class="panel-body">
+                <div class="box-body">
                     <div id="income-expenses-chart"></div>
                 </div>
             </div>
         </div>
         <div class="col-lg-2 col-md-4 col-sm-12">
-            <div class="panel panel-default">
-                <div class="panel-heading">
+            <div class="box">
+                <div class="box-header with-border">
                     <i class="fa fa-calendar"></i>
                     {{ 'incomeVsExpenses'|_ }}
                 </div>
-                <div class="panel-body">
+                <div class="box-body">
                     <div id="income-expenses-sum-chart"></div>
                 </div>
             </div>
@@ -46,12 +46,12 @@
     </div>
     <div class="row">
         <div class="col-lg-12 col-md-12 col-sm-12">
-            <div class="panel panel-default">
-                <div class="panel-heading">
+            <div class="box">
+                <div class="box-header with-border">
                     <i class="fa fa-tasks fa-fw"></i>
                     {{ 'categories'|_ }}
                 </div>
-                <div class="panel-body">
+                <div class="box-body">
                     <div id="categories"></div>
                 </div>
             </div>
@@ -59,12 +59,12 @@
     </div>
     <div class="row">
         <div class="col-lg-12 col-md-12 col-sm-12">
-            <div class="panel panel-default">
-                <div class="panel-heading">
+            <div class="box">
+                <div class="box-header with-border">
                     <i class="fa fa-tasks fa-fw"></i>
                     {{ 'budgets'|_ }}
                 </div>
-                <div class="panel-body">
+                <div class="box-body">
                     <div id="budgets"></div>
                 </div>
             </div>
diff --git a/resources/twig/search/index.twig b/resources/twig/search/index.twig
index 0d7bc6e9e1..52865f83fc 100644
--- a/resources/twig/search/index.twig
+++ b/resources/twig/search/index.twig
@@ -9,11 +9,11 @@
 <div class="row">
     {% if result.transactions|length > 0 %}
     <div class="col-lg-6 col-md-12 col-sm-12">
-        <div class="panel panel-default">
-            <div class="panel-heading">
+        <div class="box">
+            <div class="box-header with-border">
                 <i class="fa fa-repeat"></i> Transactions ({{  result.transactions|length }})
             </div>
-            <div class="panel-body">
+            <div class="box-body">
                 {% include 'list/journals-tiny' with {'transactions' : result.transactions} %}
             </div>
         </div>
@@ -21,11 +21,11 @@
     {% endif %}
     {% if result.categories|length > 0 %}
     <div class="col-lg-6 col-md-12 col-sm-12">
-        <div class="panel panel-default">
-            <div class="panel-heading">
+        <div class="box">
+            <div class="box-header with-border">
                 <i class="fa fa-bar-chart"></i> Categories ({{result['categories'].count()}})
             </div>
-            <div class="panel-body">
+            <div class="box-body">
                 <div class="list-group">
                     {% for category in result.categories %}
                         <a class="list-group-item" title="{{category.name}}" href="{{route('categories.show',category.id)}}">
@@ -39,11 +39,11 @@
     {% endif %}
     {% if result.tags|length > 0 %}
     <div class="col-lg-6 col-md-12 col-sm-12">
-        <div class="panel panel-default">
-            <div class="panel-heading">
+        <div class="box">
+            <div class="box-header with-border">
                 <i class="fa fa-bar-chart"></i> Tags ({{result['tags'].count()}})
             </div>
-            <div class="panel-body">
+            <div class="box-body">
                 <p>Bla bla</p>
             </div>
         </div>
@@ -51,11 +51,11 @@
     {% endif %}
     {% if result.accounts|length > 0 %}
     <div class="col-lg-6 col-md-12 col-sm-12">
-        <div class="panel panel-default">
-            <div class="panel-heading">
+        <div class="box">
+            <div class="box-header with-border">
                 <i class="fa fa-credit-card"></i> Accounts ({{result['accounts'].count()}})
             </div>
-            <div class="panel-body">
+            <div class="box-body">
                 <div class="list-group">
                     {% for account in result.accounts %}
                         <a class="list-group-item" title="{{account.name}}" href="{{route('accounts.show',account.id)}}">
@@ -69,11 +69,11 @@
     {% endif %}
     {% if result.budgets|length > 0 %}
     <div class="col-lg-6 col-md-12 col-sm-12">
-        <div class="panel panel-default">
-            <div class="panel-heading">
+        <div class="box">
+            <div class="box-header with-border">
                 <i class="fa fa-tasks"></i> Budgets ({{result['budgets'].count()}})
             </div>
-            <div class="panel-body">
+            <div class="box-body">
                 <div class="list-group">
                     {% for budget in result.budgets %}
                         <a class="list-group-item" title="{{budget.name}}" href="{{route('budgets.show',budget.id)}}">
@@ -87,11 +87,11 @@
     {% endif %}
     <!--
     <div class="col-lg-6 col-md-12 col-sm-12">
-        <div class="panel panel-default">
-            <div class="panel-heading">
+        <div class="box">
+            <div class="box-header with-border">
                 <i class="fa fa-search-plus"></i> Other results
             </div>
-            <div class="panel-body">
+            <div class="box-body">
                 <p>Bla bla</p>
             </div>
         </div>
diff --git a/resources/twig/tags/create.twig b/resources/twig/tags/create.twig
index fb4b0dc9ff..0740d02a39 100644
--- a/resources/twig/tags/create.twig
+++ b/resources/twig/tags/create.twig
@@ -9,11 +9,11 @@
 
 <div class="row">
     <div class="col-lg-5 col-md-5 col-sm-12">
-        <div class="panel panel-primary">
-            <div class="panel-heading">
+        <div class="box box-primary">
+            <div class="box-header with-border">
                 <i class="fa fa-tag"></i> {{ 'mandatoryFields'|_ }}
             </div>
-            <div class="panel-body">
+            <div class="box-body">
                 {{ ExpandedForm.text('tag') }}
                 {{ ExpandedForm.multiRadio('tagMode',tagOptions) }}
             </div>
@@ -22,11 +22,11 @@
 
     <div class="col-lg-7 col-md-7 col-sm-12">
 
-        <div class="panel panel-default">
-            <div class="panel-heading">
+        <div class="box">
+            <div class="box-header with-border">
                 <i class="fa fa-smile-o"></i> {{ 'optionalFields'|_ }}
             </div>
-            <div class="panel-body">
+            <div class="box-body">
                     {{ ExpandedForm.date('date') }}
                     {{ ExpandedForm.textarea('description') }}
                     {{ ExpandedForm.location('tagPosition') }}
@@ -34,11 +34,11 @@
         </div>
 
         <!-- panel for options -->
-        <div class="panel panel-default">
-            <div class="panel-heading">
+        <div class="box">
+            <div class="box-header with-border">
                 <i class="fa fa-bolt"></i> {{ 'options'|_ }}
             </div>
-            <div class="panel-body">
+            <div class="box-body">
                 {{ ExpandedForm.optionsList('create','tag') }}
             </div>
         </div>
diff --git a/resources/twig/tags/delete.twig b/resources/twig/tags/delete.twig
index 970486a79a..da0a3d6fbd 100644
--- a/resources/twig/tags/delete.twig
+++ b/resources/twig/tags/delete.twig
@@ -9,10 +9,10 @@
 <div class="row">
     <div class="col-lg-6 col-md-12 col-sm-12">
         <div class="panel panel-red">
-            <div class="panel-heading">
+            <div class="box-header with-border">
                 Delete tag "{{ tag.tag }}"
             </div>
-            <div class="panel-body">
+            <div class="box-body">
                 <p>
                 Are you sure that you want to delete tag "{{ tag.tag }}"?
                 </p>
diff --git a/resources/twig/tags/edit.twig b/resources/twig/tags/edit.twig
index 036b6cb956..f683c88a71 100644
--- a/resources/twig/tags/edit.twig
+++ b/resources/twig/tags/edit.twig
@@ -11,11 +11,11 @@
 
 <div class="row">
     <div class="col-lg-5 col-md-5 col-sm-12">
-        <div class="panel panel-primary">
-            <div class="panel-heading">
+        <div class="box box-primary">
+            <div class="box-header with-border">
                 <i class="fa fa-tag"></i> {{ 'mandatoryFields'|_ }}
             </div>
-            <div class="panel-body">
+            <div class="box-body">
                 {{ ExpandedForm.text('tag') }}
                 {{ ExpandedForm.multiRadio('tagMode',tagOptions) }}
             </div>
@@ -24,11 +24,11 @@
 
     <div class="col-lg-7 col-md-7 col-sm-12">
 
-        <div class="panel panel-default">
-            <div class="panel-heading">
+        <div class="box">
+            <div class="box-header with-border">
                 <i class="fa fa-smile-o"></i> {{ 'optionalFields'|_ }}
             </div>
-            <div class="panel-body">
+            <div class="box-body">
                     {{ ExpandedForm.date('date', tag.date.format('Y-m-d')) }}
                     {{ ExpandedForm.textarea('description') }}
                     {{ ExpandedForm.location('tagPosition') }}
@@ -36,11 +36,11 @@
         </div>
 
         <!-- panel for options -->
-        <div class="panel panel-default">
-            <div class="panel-heading">
+        <div class="box">
+            <div class="box-header with-border">
                 <i class="fa fa-bolt"></i> {{ 'options'|_ }}
             </div>
-            <div class="panel-body">
+            <div class="box-body">
                 {{ ExpandedForm.optionsList('update','tag') }}
             </div>
         </div>
diff --git a/resources/twig/tags/index.twig b/resources/twig/tags/index.twig
index bffc805ea9..bfa621dfe2 100644
--- a/resources/twig/tags/index.twig
+++ b/resources/twig/tags/index.twig
@@ -7,9 +7,9 @@
 {% block content %}
 <div class="row">
     <div class="col-lg-12">
-        <div class="panel panel-default">
-            <div class="panel-heading"><i class="fa fa-fw fa-tags"></i> Tags</div>
-            <div class="panel-body">
+        <div class="box">
+            <div class="box-header with-border"><i class="fa fa-fw fa-tags"></i> Tags</div>
+            <div class="box-body">
                 <div id="tagHelp" class="collapse
                 {% if not helpHidden %}
                 in
@@ -52,9 +52,9 @@
 <div class="row">
     {% for type in types %}
     <div class="col-lg-4">
-        <div class="panel panel-default">
-            <div class="panel-heading"><i class="fa fa-fw fa-tag"></i> {{ ('tag_title_'~type)|_ }}</div>
-            <div class="panel-body">
+        <div class="box">
+            <div class="box-header with-border"><i class="fa fa-fw fa-tag"></i> {{ ('tag_title_'~type)|_ }}</div>
+            <div class="box-body">
                 {% for year,months in collection[type] %}
                     <h4>{{ year }}</h4>
 
diff --git a/resources/twig/tags/show.twig b/resources/twig/tags/show.twig
index aa9bb19094..50180fc24c 100644
--- a/resources/twig/tags/show.twig
+++ b/resources/twig/tags/show.twig
@@ -9,8 +9,8 @@
     {% if tag.latitude and tag.longitude and tag.zoomLevel %}
         <div class="row">
             <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
-                <div class="panel panel-default">
-                    <div class="panel-heading">
+                <div class="box">
+                    <div class="box-header with-border">
                         <i class="fa fa-fw {{subTitleIcon}} fa-fw"></i> {{ tag.tag }}
                         {% if tag.date %}
                             on {{tag.date.format('jS F Y')}}
@@ -29,7 +29,7 @@
                             </div>
                         </div>
                     </div>
-                    <div class="panel-body">
+                    <div class="box-body">
                         {% if tag.description %}
                             <p class="text-info">
                                 {{tag.description}}
@@ -48,8 +48,8 @@
     <!-- if no such thing, show another block maybe? -->
 <div class="row">
     <div class="col-lg-612 col-md-12 col-sm-12 col-xs-12">
-        <div class="panel panel-default">
-            <div class="panel-heading">
+        <div class="box">
+            <div class="box-header with-border">
                 <i class="fa fa-repeat fa-fw"></i> {{ 'transactions'|_ }}
                 <!-- here is the edit menu when there is no meta-data -->
                 {% if not (tag.latitude and tag.longitude and tag.zoomLevel) %}
diff --git a/resources/twig/transactions/create.twig b/resources/twig/transactions/create.twig
index f07a9349ee..18fb15c85f 100644
--- a/resources/twig/transactions/create.twig
+++ b/resources/twig/transactions/create.twig
@@ -10,11 +10,11 @@
     <input type="hidden" name="what" value="{{ what }}" />
     <div class="row">
         <div class="col-lg-6 col-md-12 col-sm-12">
-            <div class="panel panel-primary">
-                <div class="panel-heading">
+            <div class="box box-primary">
+                <div class="box-header with-border">
                     <i class="fa fa-exclamation-circle"></i> {{ 'mandatoryFields'|_ }}
                 </div>
-                <div class="panel-body">
+                <div class="box-body">
                     <div class="form-group">
                         <label class="col-sm-4 control-label">Quickswitch</label>
                             <div class="col-sm-8">
@@ -55,11 +55,11 @@
             </div>
         </div>
         <div class="col-lg-6 col-md-12 col-sm-12">
-            <div class="panel panel-default">
-                <div class="panel-heading">
+            <div class="box">
+                <div class="box-header with-border">
                     <i class="fa fa-smile-o"></i> {{ 'optionalFields'|_ }}
                 </div>
-                <div class="panel-body">
+                <div class="box-body">
                     <!-- BUDGET ONLY WHEN CREATING A WITHDRAWAL -->
                     {{ ExpandedForm.select('budget_id',budgets,0) }}
                     <!-- CATEGORY ALWAYS -->
@@ -75,11 +75,11 @@
             </div>
 
             <!-- panel for options -->
-            <div class="panel panel-default">
-                <div class="panel-heading">
+            <div class="box">
+                <div class="box-header with-border">
                     <i class="fa fa-bolt"></i> {{ 'options'|_ }}
                 </div>
-                <div class="panel-body">
+                <div class="box-body">
                     {{ ExpandedForm.optionsList('create','transaction') }}
                 </div>
             </div>
diff --git a/resources/twig/transactions/delete.twig b/resources/twig/transactions/delete.twig
index 06466761fb..1fe0555f78 100644
--- a/resources/twig/transactions/delete.twig
+++ b/resources/twig/transactions/delete.twig
@@ -10,11 +10,11 @@
 <div class="row">
     <div class="col-lg-6 col-lg-offset-3 col-md-6 col-sm-12">
         <div class="panel panel-red">
-            <div class="panel-heading">
+            <div class="box-header with-border">
                 <i class="fa fa-exclamation-circle"></i>
                 {{ trans('form.delete_journal', {'description': journal.description}) }}
             </div>
-            <div class="panel-body">
+            <div class="box-body">
                 <p class="text-danger">
                     {{ trans('form.permDeleteWarning') }}
                 </p>
diff --git a/resources/twig/transactions/edit.twig b/resources/twig/transactions/edit.twig
index d78a4bdefc..ab0d2a0dca 100644
--- a/resources/twig/transactions/edit.twig
+++ b/resources/twig/transactions/edit.twig
@@ -12,11 +12,11 @@
 
 <div class="row">
     <div class="col-lg-6 col-md-12 col-sm-12">
-            <div class="panel panel-primary">
-                <div class="panel-heading">
+            <div class="box box-primary">
+                <div class="box-header with-border">
                     <i class="fa fa-exclamation-circle"></i> {{ 'mandatoryFields'|_ }}
                 </div>
-                <div class="panel-body">
+                <div class="box-body">
                     <!-- ALWAYS AVAILABLE -->
                     {{ ExpandedForm.text('description',journal.description) }}
 
@@ -51,11 +51,11 @@
 
     </div>
     <div class="col-lg-6 col-md-12 col-sm-12">
-        <div class="panel panel-default">
-            <div class="panel-heading">
+        <div class="box">
+            <div class="box-header with-border">
                 <i class="fa fa-smile-o"></i> {{ 'optionalFields'|_ }}
             </div>
-            <div class="panel-body">
+            <div class="box-body">
                 <!-- BUDGET ONLY WHEN CREATING A WITHDRAWAL -->
                 {% if what == 'withdrawal' %}
                     {{ ExpandedForm.select('budget_id',budgets,data['budget_id']) }}
@@ -76,11 +76,11 @@
             </div><!-- end of panel for options-->
 
             <!-- panel for options -->
-            <div class="panel panel-default">
-                <div class="panel-heading">
+            <div class="box">
+                <div class="box-header with-border">
                     <i class="fa fa-bolt"></i> {{ 'options'|_ }}
                 </div>
-                <div class="panel-body">
+                <div class="box-body">
                     {{ ExpandedForm.optionsList('update','transaction') }}
                 </div>
             </div>
diff --git a/resources/twig/transactions/index.twig b/resources/twig/transactions/index.twig
index f857fb9142..5394682fe7 100644
--- a/resources/twig/transactions/index.twig
+++ b/resources/twig/transactions/index.twig
@@ -7,8 +7,8 @@
 {% block content %}
 <div class="row">
     <div class="col-lg-12 col-sm-12 col-md-12">
-        <div class="panel panel-default">
-            <div class="panel-heading">
+        <div class="box">
+            <div class="box-header with-border">
                 <i class="fa {{ subTitleIcon }}"></i> {{ subTitle }}
             </div>
             {% include 'list.journals' %}
diff --git a/resources/twig/transactions/show.twig b/resources/twig/transactions/show.twig
index 89b90f183e..ba48fbde6b 100644
--- a/resources/twig/transactions/show.twig
+++ b/resources/twig/transactions/show.twig
@@ -7,8 +7,8 @@
 {% block content %}
 <div class="row">
     <div class="col-lg-6 col-md-6 col-sm-12">
-        <div class="panel panel-default">
-            <div class="panel-heading">
+        <div class="box">
+            <div class="box-header with-border">
                 <i class="fa fa-info-circle fa-fw"></i>
                 Metadata
             </div>
@@ -69,11 +69,11 @@
         </div>
         <!-- events, if present -->
         {% if journal.piggyBankEvents|length > 0 %}
-            <div class="panel panel-default">
-                <div class="panel-heading">
+            <div class="box">
+                <div class="box-header with-border">
                     {{ 'piggyBanks'|_ }}
                 </div>
-                <div class="panel-body">
+                <div class="box-body">
                     {% include 'list/piggy-bank-events' with {'events': journal.piggyBankEvents, 'showPiggyBank':true} %}
                 </div>
             </div>
@@ -82,8 +82,8 @@
     <div class="col-lg-6 col-md-6 col-sm-12">
 
     {% for t in journal.transactions %}
-        <div class="panel panel-default">
-            <div class="panel-heading">
+        <div class="box">
+            <div class="box-header with-border">
                 {% if t.account.accounttype.type == 'Asset account' %}
                     <i class="fa fa-money fa-fw"></i>
                 {% endif %}