diff --git a/app/Http/Controllers/BudgetController.php b/app/Http/Controllers/BudgetController.php
index 1e4545d518..329f46fdc8 100644
--- a/app/Http/Controllers/BudgetController.php
+++ b/app/Http/Controllers/BudgetController.php
@@ -241,7 +241,8 @@ class BudgetController extends Controller
         return view(
             'budgets.index',
             compact(
-                'available', 'currentMonth', 'next', 'nextText', 'prev', 'prevText', 'periodStart', 'periodEnd', 'budgetInformation', 'inactive', 'budgets',
+                'available', 'currentMonth', 'next', 'nextText', 'prev', 'prevText',
+                'periodStart', 'periodEnd', 'budgetInformation', 'inactive', 'budgets',
                 'spent', 'budgeted', 'previousLoop', 'nextLoop', 'start'
             )
         );
diff --git a/app/Support/Amount.php b/app/Support/Amount.php
index d90a1a2de4..89ef0dea05 100644
--- a/app/Support/Amount.php
+++ b/app/Support/Amount.php
@@ -204,7 +204,7 @@ class Amount
     }
 
     /**
-     * @return TransactionCurrency
+     * @return \FireflyIII\Models\TransactionCurrency
      * @throws FireflyException
      */
     public function getDefaultCurrency(): TransactionCurrency
diff --git a/public/js/ff/budgets/index.js b/public/js/ff/budgets/index.js
index ac233b85c4..01a00c9b0f 100644
--- a/public/js/ff/budgets/index.js
+++ b/public/js/ff/budgets/index.js
@@ -59,9 +59,26 @@ function updateBudgetedAmounts(e) {
     "use strict";
     var target = $(e.target);
     var id = target.data('id');
+
     var value = target.val();
     var original = target.data('original');
     var difference = value - original;
+
+    var spentCell = $('td[class="spent"][data-id="' + id + '"]');
+    var leftCell = $('td[class="left"][data-id="' + id + '"]');
+    var spentAmount = parseFloat(spentCell.data('spent'));
+    var newAmountLeft = spentAmount + parseFloat(value);
+    var amountLeftString = accounting.formatMoney(newAmountLeft);
+    if(newAmountLeft < 0) {
+        leftCell.html('<span class="text-danger">' + amountLeftString + '</span>');
+    }
+    if(newAmountLeft > 0) {
+        leftCell.html('<span class="text-success">' + amountLeftString + '</span>');
+    }
+    if(newAmountLeft === 0.0) {
+        leftCell.html('<span style="color:#999">' + amountLeftString + '</span>');
+    }
+
     if (difference !== 0) {
         // add difference to 'budgeted' var
         budgeted = budgeted + difference;
diff --git a/resources/views/budgets/index.twig b/resources/views/budgets/index.twig
index 240b7e9845..00214b8c6c 100644
--- a/resources/views/budgets/index.twig
+++ b/resources/views/budgets/index.twig
@@ -176,61 +176,12 @@
                                            step="1" min="0" name="amount" type="number">
                                 </div>
                             </td>
-                            <td>
+                            <td class="spent" data-id="{{ budget.id }}" data-spent="{{ budgetInformation[budget.id]['spent'] }}">
                                 {{ budgetInformation[budget.id]['spent']|formatAmount }}
                             </td>
-                            <td>
+                            <td class="left" data-id="{{ budget.id }}">
                                 {{ (repAmount + budgetInformation[budget.id]['spent'])|formatAmount }}
                             </td>
-                            {#
-                                                    <div class="box-body">
-                                                        <table class="table">
-                                                            <tr>
-                                                                <td style="width:40%;">
-
-
-                                                                </td>
-                                                                <td>
-                                                                    <div class="form-group" style="margin-bottom:0;">
-
-                                                                    </div>
-                                                                </td>
-                                                            </tr>
-                                                            <tr>
-                                                                <td style="width:40%;">
-                                                                    {{ 'spent'|_ }}
-                                                                    <span class="small"><br/>
-                                                                        {{ session('start').formatLocalized(monthAndDayFormat) }} -
-                                                                        {{ session('end').formatLocalized(monthAndDayFormat) }}
-                                                                </span>
-                                                                </td>
-                                                                <td>
-
-                                                                </td>
-                                                            </tr>
-                                                            {% if budgetInformation[budget.id]['otherLimits'].count > 0 %}
-                                                                <tr>
-                                                                    <td colspan="2">
-                                                                        <ul class="list-unstyled">
-                                                                            {% for other in budgetInformation[budget.id]['otherLimits'] %}
-                                                                                <li>
-                                                                                    <!-- translate -->
-                                                                                    Budgeted
-                                                                                    <a href="{{ route('budgets.show.limit', [budget.id, other.id]) }}">{{ other.amount|formatAmountPlain }}</a>
-                                                                                    between
-                                                                                    {{ other.start_date.formatLocalized(monthAndDayFormat) }}
-                                                                                    and {{ other.end_date.formatLocalized(monthAndDayFormat) }}.
-                                                                                </li>
-                                                                            {% endfor %}
-                                                                        </ul>
-                                                                    </td>
-                                                                </tr>
-                                                            {% endif %}
-                                                        </table>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                            #}
                         </tr>
                         {% endfor %}
                         </tbody>