diff --git a/app/Http/Controllers/BudgetController.php b/app/Http/Controllers/BudgetController.php
index bad2b980dc..565d9bfe8b 100644
--- a/app/Http/Controllers/BudgetController.php
+++ b/app/Http/Controllers/BudgetController.php
@@ -190,6 +190,7 @@ class BudgetController extends Controller
         $next->addDay();
         $prev = clone $start;
         $prev->subDay();
+        $prev = Navigation::startOfPeriod($prev, $range);
 
 
         $this->repository->cleanupBudgets();
@@ -205,6 +206,32 @@ class BudgetController extends Controller
         $spent             = array_sum(array_column($budgetInformation, 'spent'));
         $budgeted          = array_sum(array_column($budgetInformation, 'budgeted'));
 
+        // select thing for last 12 periods:
+        $previousLoop = [];
+        $previousDate = clone $start;
+        $count        = 0;
+        while ($count < 12) {
+            $previousDate->subDay();
+            $previousDate          = Navigation::startOfPeriod($previousDate, $range);
+            $format                = $previousDate->format('Y-m-d');
+            $previousLoop[$format] = Navigation::periodShow($previousDate, $range);
+            $count++;
+        }
+
+        // select thing for next 12 periods:
+        $nextLoop = [];
+        $nextDate = clone $end;
+        $nextDate->addDay();
+        $count = 0;
+
+        while ($count < 12) {
+            $format            = $nextDate->format('Y-m-d');
+            $nextLoop[$format] = Navigation::periodShow($nextDate, $range);
+            $nextDate          = Navigation::endOfPeriod($nextDate, $range);
+            $count++;
+            $nextDate->addDay();
+        }
+
         // display info
         $currentMonth = Navigation::periodShow($start, $range);
         $nextText     = Navigation::periodShow($next, $range);
@@ -214,7 +241,7 @@ class BudgetController extends Controller
             'budgets.index',
             compact(
                 'available', 'currentMonth', 'next', 'nextText', 'prev', 'prevText', 'periodStart', 'periodEnd', 'budgetInformation', 'inactive', 'budgets',
-                'spent', 'budgeted'
+                'spent', 'budgeted', 'previousLoop', 'nextLoop', 'start'
             )
         );
     }
diff --git a/public/js/ff/budgets/index.js b/public/js/ff/budgets/index.js
index 936ae07b7f..ac233b85c4 100644
--- a/public/js/ff/budgets/index.js
+++ b/public/js/ff/budgets/index.js
@@ -8,7 +8,7 @@
  * See the LICENSE file for details.
  */
 
-/** global: spent, budgeted, available, currencySymbol */
+/** global: spent, budgeted, available, currencySymbol, budgetIndexURI */
 
 function drawSpentBar() {
     "use strict";
@@ -99,6 +99,15 @@ $(function () {
      */
     $('input[type="number"]').on('input', updateBudgetedAmounts);
 
+    //
+    $('.selectPeriod').change(function (e) {
+        var sel = $(e.target).val();
+        if (sel !== "x") {
+            var newURI = budgetIndexURI.replace("REPLACE", sel);
+            window.location.assign(newURI);
+        }
+    });
+
 });
 
 function updateIncome() {
diff --git a/resources/lang/en_US/firefly.php b/resources/lang/en_US/firefly.php
index 54f7cbc4ae..501c03430a 100644
--- a/resources/lang/en_US/firefly.php
+++ b/resources/lang/en_US/firefly.php
@@ -20,6 +20,7 @@ return [
     'everything'                                 => 'Everything',
     'customRange'                                => 'Custom range',
     'apply'                                      => 'Apply',
+    'select_date'                                => 'Select date..',
     'cancel'                                     => 'Cancel',
     'from'                                       => 'From',
     'to'                                         => 'To',
@@ -112,8 +113,8 @@ return [
     'budget_in_period'                           => 'All transactions for budget ":name" between :start and :end',
     'chart_budget_in_period'                     => 'Chart for all transactions for budget ":name" between :start and :end',
     'chart_account_in_period'                    => 'Chart for all transactions for account ":name" between :start and :end',
-    'chart_category_in_period'                    => 'Chart for all transactions for category ":name" between :start and :end',
-    'chart_category_all'                    => 'Chart for all transactions for category ":name"',
+    'chart_category_in_period'                   => 'Chart for all transactions for category ":name" between :start and :end',
+    'chart_category_all'                         => 'Chart for all transactions for category ":name"',
     'budget_in_period_breadcrumb'                => 'Between :start and :end',
     'clone_withdrawal'                           => 'Clone this withdrawal',
     'clone_deposit'                              => 'Clone this deposit',
diff --git a/resources/views/budgets/index.twig b/resources/views/budgets/index.twig
index 8f2823cd0f..7f1f5ffc4e 100644
--- a/resources/views/budgets/index.twig
+++ b/resources/views/budgets/index.twig
@@ -98,20 +98,26 @@
                 <div class="box-body">
                     <div class="row">
                         <div class="col-lg-2">
-                            <select class="form-control">
-                                <option>x</option>
+                            <select class="form-control selectPeriod" name="previous">
+                                <option label="{{ 'select_date'|_ }}" value="x">{{ 'select_date'|_ }}</option>
+                                {% for format, previousLabel in previousLoop %}
+                                    <option label="{{ previousLabel }}" value="{{ format }}">{{ previousLabel }}</option>
+                                {% endfor %}
                             </select>
                         </div>
                         <div class="col-lg-8 text-center">
                             <div class="btn btn-group btn-group-lg" style="padding-top:0;">
                                 <a href="{{ route('budgets.index', [prev.format('Y-m-d')]) }}" class="btn btn-default" title="{{ prevText }}">&larr;</a>
-                                <a href="#" class="btn btn-default">{{ currentMonth }}</a>
+                                <a href="{{ route('budgets.index', [start.format('Y-m-d')]) }}" class="btn btn-default">{{ currentMonth }}</a>
                                 <a href="{{ route('budgets.index', [next.format('Y-m-d')]) }}" class="btn btn-default" title="{{ nextText }}">&rarr;</a>
                             </div>
                         </div>
                         <div class="col-lg-2 text-right">
-                            <select class="form-control">
-                                <option>x</option>
+                            <select class="form-control selectPeriod" name="next">
+                                <option label="{{ 'select_date'|_ }}" value="x">{{ 'select_date'|_ }}</option>
+                                {% for format, nextLabel in nextLoop %}
+                                    <option label="{{ nextLabel }}" value="{{ format }}">{{ nextLabel }}</option>
+                                {% endfor %}
                             </select>
                         </div>
                     </div>
@@ -131,10 +137,10 @@
                         <thead>
                         <tr>
                             <th style="width:10%;">&nbsp;</th>
-                            <th>Budget</th>
+                            <th>{{ 'budget'|_ }}</th>
                             <th style="width:25%;">{{ 'budgeted'|_ }}</th>
-                            <th>Spent</th>
-                            <th>Left</th>
+                            <th>{{ 'spent'|_ }}</th>
+                            <th>{{ 'left'|_ }}</th>
                         </tr>
                         </thead>
                         <tbody>
@@ -264,6 +270,7 @@
                 // budgeted data:
                 var budgeted = {{ budgeted }};
                 var available = {{ available }};
+                var budgetIndexURI = "{{ route('budgets.index','REPLACE') }}";
             </script>
 
             <script type="text/javascript" src="js/ff/budgets/index.js"></script>