diff --git a/app/Http/Controllers/ReportController.php b/app/Http/Controllers/ReportController.php
index f13dfcfaa6..b3b8cbb409 100644
--- a/app/Http/Controllers/ReportController.php
+++ b/app/Http/Controllers/ReportController.php
@@ -260,12 +260,14 @@ class ReportController extends Controller
      */
     public function year($year, $shared = false)
     {
-        $date         = new Carbon('01-01-' . $year);
-        $end          = clone $date;
-        $subTitle     = trans('firefly.reportForYear', ['year' => $year]);
-        $subTitleIcon = 'fa-bar-chart';
-        $totalExpense = 0;
-        $totalIncome  = 0;
+        $date             = new Carbon('01-01-' . $year);
+        $end              = clone $date;
+        $subTitle         = trans('firefly.reportForYear', ['year' => $year]);
+        $subTitleIcon     = 'fa-bar-chart';
+        $totalExpense     = 0;
+        $totalIncome      = 0;
+        $incomeTopLength  = 5;
+        $expenseTopLength = 10;
 
         if ($shared == 'shared') {
             $shared   = true;
@@ -305,9 +307,20 @@ class ReportController extends Controller
                     'amount' => floatval($entry->queryAmount),
                     'name'   => $entry->name,
                     'count'  => 1,
+                    'id'     => $id,
                 ];
             }
         }
+        // sort with callback:
+        uasort(
+            $incomes, function ($a, $b) {
+            if ($a['amount'] == $b['amount']) {
+                return 0;
+            }
+
+            return ($a['amount'] < $b['amount']) ? 1 : -1;
+        }
+        );
         unset($set, $id);
 
         /**
@@ -328,7 +341,9 @@ class ReportController extends Controller
                 'accounts', // all accounts
                 'accountsSums', // sums for all accounts
                 'incomes', 'expenses', // expenses and incomes.
-                'subTitle', 'subTitleIcon' // subtitle and subtitle icon.
+                'subTitle', 'subTitleIcon', // subtitle and subtitle icon.
+                'incomeTopLength', // length of income top X
+                'expenseTopLength' // length of expense top X.
             )
         );
     }
diff --git a/public/js/reports.js b/public/js/reports.js
index 1b779bbb9b..c2bc2eaf94 100644
--- a/public/js/reports.js
+++ b/public/js/reports.js
@@ -1,6 +1,5 @@
 if (typeof(google) != 'undefined') {
     google.setOnLoadCallback(drawChart);
-
 }
 
 
@@ -13,6 +12,12 @@ function drawChart() {
 
 $(function () {
     $('.openModal').on('click', openModal);
+
+
+    // click open the top X income list:
+    $('#showIncomes').click(showIncomes);
+    // click open the top X expense list:
+    $('#showExpenses').click(showExpenses);
 });
 
 function openModal(e) {
@@ -29,3 +34,45 @@ function openModal(e) {
 
     return false;
 }
+
+
+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() {
+    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/lang/en/firefly.php b/resources/lang/en/firefly.php
index d100346cca..efaa73bce7 100644
--- a/resources/lang/en/firefly.php
+++ b/resources/lang/en/firefly.php
@@ -95,6 +95,9 @@ return [
     'difference'               => 'Difference',
     'in'                       => 'In',
     'out'                      => 'Out',
+    'topX'                     => 'top :number',
+    'showTheRest'              => 'Show everything',
+    'hideTheRest'              => 'Show only the top :number',
 
     // charts:
     'dayOfMonth'               => 'Day of the month',
diff --git a/resources/lang/nl/firefly.php b/resources/lang/nl/firefly.php
index c743d00d1a..f07a7e3f6b 100644
--- a/resources/lang/nl/firefly.php
+++ b/resources/lang/nl/firefly.php
@@ -95,6 +95,9 @@ return [
     'difference'               => 'Verschil',
     'in'                       => 'In',
     'out'                      => 'Uit',
+    'topX'                     => 'top :number',
+    'showTheRest'              => 'Laat alles zien',
+    'hideTheRest'              => 'Laat alleen de top :number zien',
 
     // charts:
     'dayOfMonth'               => 'Dag vd maand',
diff --git a/resources/twig/reports/year.twig b/resources/twig/reports/year.twig
index d793d1e069..26599d7a69 100644
--- a/resources/twig/reports/year.twig
+++ b/resources/twig/reports/year.twig
@@ -62,11 +62,9 @@
 
             <div class="panel panel-default">
                 <div class="panel-heading">
-                    <i class="fa fa-fw fa-exchange" title="Transfer"></i>
+                    <i class="fa fa-fw fa-exchange"></i>
                     {{ 'incomeVsExpenses'|_ }}
                 </div>
-
-
                 <table class="table table-bordered table-striped">
                     <tr>
                         <td>{{ 'in'|_ }}</td>
@@ -87,11 +85,15 @@
             <div class="panel panel-default">
                 <div class="panel-heading">
                     <i class="fa fa-long-arrow-right fa-fw"></i>
-                    {{ 'income'|_ }}
+                    {{ 'income'|_ }} ({{ trans('firefly.topX',{number: incomeTopLength}) }})
                 </div>
                 <table class="table">
                     {% for id,row in incomes %}
+                    {% if loop.index > incomeTopLength %}
+                        <tr class="collapse out incomesCollapsed">
+                    {% else %}
                         <tr>
+                    {% endif %}
                             <td>
                                 <a href="{{ route('accounts.show',id) }}" title="{{ row.name }}">{{ row.name }}</a>
                                 {% if row.count > 1 %}
@@ -101,7 +103,13 @@
                             <td>{{ row.amount|formatAmount }}</td>
                         </tr>
                     {% endfor %}
-
+                    {% if incomes|length > incomeTopLength %}
+                    <tr>
+                        <td colspan="2" class="active">
+                            <a href="#" id="showIncomes">{{ trans('firefly.showTheRest',{number:incomeTopLength}) }}</a>
+                        </td>
+                    </tr>
+                    {% endif %}
                     <tr>
                         <td><em>{{ 'sum'|_ }}</em></td>
                         <td>{{ totalIncome|formatAmount }}</td>
@@ -113,17 +121,28 @@
             <div class="panel panel-default">
                 <div class="panel-heading">
                     <i class="fa fa-long-arrow-left fa-fw"></i>
-                    {{ 'expenses'|_ }}
+                    {{ 'expenses'|_ }} ({{ trans('firefly.topX',{number: expenseTopLength}) }})
                 </div>
                 <table class="table">
                     {% set sum =0 %}
                     {% for expense in expenses %}
-                        <tr>
+                        {% if loop.index > expenseTopLength %}
+                            <tr class="collapse out expenseCollapsed">
+                        {% else %}
+                            <tr>
+                        {% endif %}
                             <td><a href="{{ route('accounts.show',expense.id) }}">{{ expense.name }}</a></td>
                             <td><span class="text-danger">{{ expense.queryAmount|formatAmountPlain }}</span></td>
                         </tr>
                         {% set sum = sum + (expense.queryAmount * -1) %}
                     {% endfor %}
+                    {% if expenses|length > expenseTopLength %}
+                        <tr>
+                            <td colspan="2" class="active">
+                                <a href="#" id="showExpenses">{{ trans('firefly.showTheRest',{number:incomeTopLength}) }}</a>
+                            </td>
+                        </tr>
+                    {% endif %}
                     <tr>
                         <td><em>{{ 'sum'|_ }}</em></td>
                         <td><span class="text-danger">{{ (sum * -1)|formatAmountPlain }}</span></td>
@@ -132,6 +151,19 @@
             </div>
         </div>
     </div>
+    <div class="row">
+        <div class="col-lg-12 col-md-12 col-sm-12">
+            <div class="panel panel-default">
+                <div class="panel-heading">
+                    <i class="fa fa-tasks fa-fw"></i>
+                    {{ 'categories'|_ }}
+                </div>
+                <div class="panel-body">
+                    <div id="categories">(to do)</div>
+                </div>
+            </div>
+        </div>
+    </div>
     <div class="row">
         <div class="col-lg-12 col-md-12 col-sm-12">
             <div class="panel panel-default">
@@ -155,8 +187,15 @@
 
     <script type="text/javascript">
         var year = '{{date.year}}';
-        var shared = {% if shared %}'/shared'
-        {% else %}''{% endif %};
+        var shared = {% if shared %}'/shared'{% else %}''{% endif %};
+        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.js"></script>