diff --git a/app/Http/Controllers/Json/BoxController.php b/app/Http/Controllers/Json/BoxController.php
index 7646e1ba70..01ad80dabf 100644
--- a/app/Http/Controllers/Json/BoxController.php
+++ b/app/Http/Controllers/Json/BoxController.php
@@ -66,21 +66,25 @@ class BoxController extends Controller
         // get spent amount:
         $budgets           = $repository->getActiveBudgets();
         $budgetInformation = $repository->collectBudgetInformation($budgets, $start, $end);
-        $spent             = strval(array_sum(array_column($budgetInformation, 'spent')));
+        $spent             = (string)array_sum(array_column($budgetInformation, 'spent'));
         $left              = bcadd($available, $spent);
-        // left less than zero? then it's zero:
+        $days              = $today->diffInDays($end) + 1;
+        $perDay            = '0';
+        $text              = (string)trans('firefly.left_to_spend');
+        $overspent         = false;
         if (bccomp($left, '0') === -1) {
-            $left = '0';
+            $text      = (string)trans('firefly.overspent');
+            $overspent = true;
         }
-        $days   = $today->diffInDays($end) + 1;
-        $perDay = '0';
-        if (0 !== $days) {
-            $perDay = bcdiv($left, strval($days));
+        if (0 !== $days && bccomp($left, '0') > -1) {
+            $perDay = bcdiv($left, (string)$days);
         }
 
         $return = [
-            'perDay' => app('amount')->formatAnything($currency, $perDay, false),
-            'left'   => app('amount')->formatAnything($currency, $left, false),
+            'perDay'    => app('amount')->formatAnything($currency, $perDay, false),
+            'left'      => app('amount')->formatAnything($currency, $left, false),
+            'text'      => $text,
+            'overspent' => $overspent,
         ];
 
         $cache->store($return);
@@ -135,7 +139,7 @@ class BoxController extends Controller
         $set = $collector->getJournals();
         /** @var Transaction $transaction */
         foreach ($set as $transaction) {
-            $currencyId            = intval($transaction->transaction_currency_id);
+            $currencyId            = (int)$transaction->transaction_currency_id;
             $expenses[$currencyId] = $expenses[$currencyId] ?? '0';
             $expenses[$currencyId] = bcadd($expenses[$currencyId], $transaction->transaction_amount);
             $sums[$currencyId]     = $sums[$currencyId] ?? '0';
@@ -236,7 +240,7 @@ class BoxController extends Controller
         foreach ($accounts as $account) {
             $accountCurrency = $currency;
             $balance         = $balances[$account->id] ?? '0';
-            $currencyId      = intval($repository->getMetaValue($account, 'currency_id'));
+            $currencyId      = (int)$repository->getMetaValue($account, 'currency_id');
             if ($currencyId !== 0) {
                 $accountCurrency = $currencyRepos->findNull($currencyId);
             }
diff --git a/public/js/ff/index.js b/public/js/ff/index.js
index 88b15cfccb..34f743f1e8 100644
--- a/public/js/ff/index.js
+++ b/public/js/ff/index.js
@@ -76,6 +76,10 @@ function getAvailableBox() {
     $.getJSON('json/box/available').done(function (data) {
         $('#box-left-to-spend').html(data.left);
         $('#box-left-per-day').html(data.perDay);
+        $('#box-left-to-spend-text').text(data.text);
+        if(data.overspent === true) {
+            $('#box-left-to-spend-box').removeClass('bg-green-gradient').addClass('bg-red-gradient');
+        }
     });
 }
 
diff --git a/resources/views/partials/boxes.twig b/resources/views/partials/boxes.twig
index d8b38146e6..583e00f2a2 100644
--- a/resources/views/partials/boxes.twig
+++ b/resources/views/partials/boxes.twig
@@ -42,10 +42,10 @@
 
     {#  available to spend total / per day #}
     <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
-        <div class="info-box bg-green-gradient">
+        <div class="info-box bg-green-gradient" id="box-left-to-spend-box">
             <span class="info-box-icon"><i class="fa fa-money"></i></span>
             <div class="info-box-content">
-                <span class="info-box-text">{{ 'left_to_spend'|_ }}</span>
+                <span class="info-box-text" id="box-left-to-spend-text">{{ 'left_to_spend'|_ }}</span>
                 <span class="info-box-number" id="box-left-to-spend"></span>
 
                 <div class="progress">