diff --git a/resources/twig/budgets/index.twig b/resources/twig/budgets/index.twig
index cc2134abe1..1cfc78fcf4 100644
--- a/resources/twig/budgets/index.twig
+++ b/resources/twig/budgets/index.twig
@@ -24,8 +24,7 @@
                         </div>
                         <div class="col-lg-6 col-md-4 col-sm-3" style="text-align:right;">
                             <small>{{ trans('firefly.availableIn',{date : period }) }}:
-                                <a href="#" class="updateIncome"><span id="budgetIncomeTotal"
-                                                                       data-value="{{ budgetIncomeTotal }}">{{ budgetIncomeTotal|formatAmount }}</span></a>
+                                <a href="#" class="updateIncome"><span id="budgetIncomeTotal" data-value="{{ budgetIncomeTotal }}">{{ budgetIncomeTotal|formatAmount }}</span></a>
                             </small>
                         </div>
                     </div>
@@ -44,7 +43,7 @@
                     </div>
                     <div class="row">
                         <div class="col-lg-6 col-md-4 col-sm-3">
-                            <small>{{ 'spent'|_ }}: {{ spent|formatAmount }}</small>
+                            <small>{{ 'spent'|_ }}: <span class="text-danger">{{ (spent*-1)|formatAmountPlain }}</span></small>
                         </div>
                     </div>
                     <div class="row">
@@ -77,7 +76,7 @@
                 <div class="box-body">
                     <p>
                         <a href="{{ route('budgets.noBudget') }}">
-                            {{ trans('firefly.transactionsWithoutBudgetDate', {date: Session.get('start').formatLocalized(monthFormat)}) }}
+                            {{ trans('firefly.transactionsWithoutBudgetDate', {date: period|lower }) }}
                         </a>
                     </p>
                 </div>
@@ -145,7 +144,7 @@
                             </tr>
                             <tr>
                                 <td style="width:50%;">{{ 'spent'|_ }}</td>
-                                <td>{{ budget.spent|formatAmount }}</td>
+                                <td><span class="text-danger">{{ (budget.spent*-1)|formatAmountPlain }}</a></td>
                             </tr>
                         </table>
                     </div>
@@ -180,7 +179,7 @@
 {% block scripts %}
     <script type="text/javascript">
         // actually spent bar data:
-        var spent = {{ spent }};
+        var spent = {{ spent * -1 }};
         var currencySymbol = "{{ getCurrencySymbol()|raw }}";
 
         // budgeted data: