diff --git a/app/Http/Controllers/ReportController.php b/app/Http/Controllers/ReportController.php
index 874b254664..59f4f112b4 100644
--- a/app/Http/Controllers/ReportController.php
+++ b/app/Http/Controllers/ReportController.php
@@ -163,10 +163,14 @@ class ReportController extends Controller
     public function defaultMultiYear($reportType, $start, $end, $accounts)
     {
 
-
+        $incomeTopLength  = 8;
+        $expenseTopLength = 8;
         // list of users stuff:
-        $budgets    = app('FireflyIII\Repositories\Budget\BudgetRepositoryInterface')->getActiveBudgets();
-        $categories = app('FireflyIII\Repositories\Category\CategoryRepositoryInterface')->listCategories();
+        $budgets       = app('FireflyIII\Repositories\Budget\BudgetRepositoryInterface')->getActiveBudgets();
+        $categories    = app('FireflyIII\Repositories\Category\CategoryRepositoryInterface')->listCategories();
+        $accountReport = $this->helper->getAccountReport($start, $end, $accounts); // done (+2)
+        $incomes       = $this->helper->getIncomeReport($start, $end, $accounts); // done (+3)
+        $expenses      = $this->helper->getExpenseReport($start, $end, $accounts); // done (+1)
 
         // and some id's, joined:
         $accountIds = [];
@@ -177,7 +181,11 @@ class ReportController extends Controller
         $accountIds = join(',', $accountIds);
 
         return view(
-            'reports.default.multi-year', compact('budgets', 'accounts', 'categories', 'start', 'end', 'accountIds', 'reportType')
+            'reports.default.multi-year',
+            compact(
+                'budgets', 'accounts', 'categories', 'start', 'end', 'accountIds', 'reportType', 'accountReport', 'incomes', 'expenses',
+                'incomeTopLength', 'expenseTopLength'
+            )
         );
     }
 
diff --git a/public/js/reports/default/multi-year.js b/public/js/reports/default/multi-year.js
index d43475f6c1..61931c1d78 100644
--- a/public/js/reports/default/multi-year.js
+++ b/public/js/reports/default/multi-year.js
@@ -5,6 +5,11 @@ $(function () {
     "use strict";
     drawChart();
 
+    // click open the top X income list:
+    $('#showIncomes').click(showIncomes);
+    // click open the top X expense list:
+    $('#showExpenses').click(showExpenses);
+
 });
 
 
@@ -152,4 +157,48 @@ function readCookie(name) {
 
 function eraseCookie(name) {
     createCookie(name, "", -1);
+}
+
+
+
+function showIncomes() {
+    "use strict";
+    if (incomeRestShow) {
+        // hide everything, make button say "show"
+        $('#showIncomes').text(showTheRest);
+        $('.incomesCollapsed').removeClass('in').addClass('out');
+
+        // toggle:
+        incomeRestShow = false;
+    } else {
+        // show everything, make button say "hide".
+        $('#showIncomes').text(hideTheRest);
+        $('.incomesCollapsed').removeClass('out').addClass('in');
+
+        // toggle:
+        incomeRestShow = true;
+    }
+
+    return false;
+}
+
+function showExpenses() {
+    "use strict";
+    if (expenseRestShow) {
+        // hide everything, make button say "show"
+        $('#showExpenses').text(showTheRestExpense);
+        $('.expenseCollapsed').removeClass('in').addClass('out');
+
+        // toggle:
+        expenseRestShow = false;
+    } else {
+        // show everything, make button say "hide".
+        $('#showExpenses').text(hideTheRestExpense);
+        $('.expenseCollapsed').removeClass('out').addClass('in');
+
+        // toggle:
+        expenseRestShow = true;
+    }
+
+    return false;
 }
\ No newline at end of file
diff --git a/resources/twig/reports/default/multi-year.twig b/resources/twig/reports/default/multi-year.twig
index 1d1334b1b9..bb18c3abb4 100644
--- a/resources/twig/reports/default/multi-year.twig
+++ b/resources/twig/reports/default/multi-year.twig
@@ -29,6 +29,22 @@
         </div>
     </div>
 
+
+    <div class="row">
+        <div class="col-lg-6 col-md-6 col-sm-6">
+            {% include 'reports/partials/accounts.twig' %}
+            {% include 'reports/partials/income-vs-expenses.twig' %}
+        </div>
+        <div class="col-lg-3 col-md-3 col-sm-3">
+            <!-- income -->
+            {% include 'reports/partials/income.twig' %}
+        </div>
+        <div class="col-lg-3 col-md-3 col-sm-3">
+            <!-- expenses -->
+            {% include 'reports/partials/expenses.twig' %}
+        </div>
+    </div>
+
     {% for account in accounts %}
         <div class="row" style="display:none;">
             <div class="col-lg-12 col-md-12 col-sm-12">
@@ -127,6 +143,16 @@
         var endDate = '{{ end.format('Ymd') }}';
         var reportType = '{{ reportType }}';
         var accountIds = '{{ accountIds }}';
+
+        var incomeTopLength = {{ incomeTopLength }};
+        var expenseTopLength = {{ expenseTopLength }};
+        var incomeRestShow = false; // starts hidden.
+        var expenseRestShow = false; // starts hidden.
+        var showTheRest = '{{ trans('firefly.showTheRest',{number:incomeTopLength}) }}';
+        var hideTheRest = '{{ trans('firefly.hideTheRest',{number:incomeTopLength}) }}';
+        var showTheRestExpense = '{{ trans('firefly.showTheRest',{number:expenseTopLength}) }}';
+        var hideTheRestExpense = '{{ trans('firefly.hideTheRest',{number:expenseTopLength}) }}';
+
     </script>
     <script type="text/javascript" src="js/reports/default/multi-year.js"></script>
 {% endblock %}