diff --git a/app/Http/Controllers/Json/BudgetController.php b/app/Http/Controllers/Json/BudgetController.php
index 6e70d19f17..30f3a1c38c 100644
--- a/app/Http/Controllers/Json/BudgetController.php
+++ b/app/Http/Controllers/Json/BudgetController.php
@@ -81,12 +81,24 @@ class BudgetController extends Controller
      */
     public function getBudgetInformation(TransactionCurrency $currency, Carbon $start, Carbon $end): JsonResponse
     {
-        $budgeted = $this->blRepository->budgeted($start, $end, $currency,);
+        $budgeted        = $this->blRepository->budgeted($start, $end, $currency,);
+        $availableBudget = $this->abRepository->getByCurrencyDate($start, $end, $currency);
+        $available       = '0';
+        $percentage      = '0';
 
+        if (null !== $availableBudget) {
+            $available  = $availableBudget->amount;
+            $percentage = bcmul(bcdiv($budgeted, $available), '100');
+        }
+
+        // if available, get the AB for this period + currency, so the bar can be redrawn.
         return response()->json(
             [
                 'budgeted'                => $budgeted,
                 'budgeted_formatted'      => app('amount')->formatAnything($currency, $budgeted, true),
+                'available'               => app('amount')->formatAnything($currency, $available, true),
+                'available_formatted'     => $available,
+                'percentage'              => $percentage,
                 'currency_id'             => $currency->id,
                 'currency_code'           => $currency->code,
                 'currency_symbol'         => $currency->symbol,
diff --git a/app/Repositories/Budget/AvailableBudgetRepository.php b/app/Repositories/Budget/AvailableBudgetRepository.php
index f5b7f1b05d..c8602e290d 100644
--- a/app/Repositories/Budget/AvailableBudgetRepository.php
+++ b/app/Repositories/Budget/AvailableBudgetRepository.php
@@ -290,4 +290,16 @@ class AvailableBudgetRepository implements AvailableBudgetRepositoryInterface
     {
         $this->user->availableBudgets()->delete();
     }
+
+    /**
+     * @inheritDoc
+     */
+    public function getByCurrencyDate(Carbon $start, Carbon $end, TransactionCurrency $currency): ?AvailableBudget
+    {
+        return $this->user
+            ->availableBudgets()
+            ->where('transaction_currency_id', $currency->id)
+            ->where('start_date', $start->format('Y-m-d 00:00:00'))
+            ->where('end_date', $end->format('Y-m-d 00:00:00'))->first();
+    }
 }
\ No newline at end of file
diff --git a/app/Repositories/Budget/AvailableBudgetRepositoryInterface.php b/app/Repositories/Budget/AvailableBudgetRepositoryInterface.php
index 58c57908ba..4d930241a6 100644
--- a/app/Repositories/Budget/AvailableBudgetRepositoryInterface.php
+++ b/app/Repositories/Budget/AvailableBudgetRepositoryInterface.php
@@ -66,6 +66,17 @@ interface AvailableBudgetRepositoryInterface
      */
     public function get(?Carbon $start = null, ?Carbon $end = null): Collection;
 
+    /**
+     * Get by transaction currency and date. Should always result in one entry or NULL.
+     *
+     * @param Carbon              $start
+     * @param Carbon              $end
+     * @param TransactionCurrency $currency
+     *
+     * @return null|AvailableBudget
+     */
+    public function getByCurrencyDate(Carbon $start, Carbon $end, TransactionCurrency $currency): ?AvailableBudget;
+
     /**
      * @param TransactionCurrency $currency
      * @param Carbon              $start
diff --git a/public/v1/js/ff/budgets/index.js b/public/v1/js/ff/budgets/index.js
index d20c631870..b19c9158fc 100644
--- a/public/v1/js/ff/budgets/index.js
+++ b/public/v1/js/ff/budgets/index.js
@@ -133,10 +133,34 @@ function updateTotalBudgetedAmount(currencyId) {
 
     // get new amount:
     $.get(totalBudgetedUri.replace('REPLACEME',currencyId)).done(function (data) {
+        // set thing:
         $('span.budgeted_amount[data-currency="' + currencyId + '"]')
             .html(data.budgeted_formatted)
             // fade back:
             .fadeTo(300, 1.0);
+
+        // set bar:
+        var pct = parseFloat(data.percentage);
+        if (pct <= 100) {
+            console.log('<100 (' + pct + ')');
+            console.log($('div.budgeted_bar[data-currency="' + currencyId + '"]'));
+            // red bar to 0
+            $('div.budgeted_bar[data-currency="' + currencyId + '"] div.progress-bar-danger').width('0%');
+            // orange to 0:
+            $('div.budgeted_bar[data-currency="' + currencyId + '"] div.progress-bar-warning').width('0%');
+            // blue to the rest:
+            $('div.budgeted_bar[data-currency="' + currencyId + '"] div.progress-bar-info').width(pct + '%');
+        } else {
+            var newPct = (100 / pct) * 100;
+            // red bar to new pct
+            $('div.budgeted_bar[data-currency="' + currencyId + '"] div.progress-bar-danger').width(newPct + '%');
+            // orange to the rest:
+            $('div.budgeted_bar[data-currency="' + currencyId + '"] div.progress-bar-warning').width((100 - newPct) + '%');
+            // blue to 0:
+            $('div.budgeted_bar[data-currency="' + currencyId + '"] div.progress-bar-info').width('0%');
+        }
+
+
     });
 }
 
diff --git a/resources/views/v1/budgets/index.twig b/resources/views/v1/budgets/index.twig
index 3f82626b07..fec4b38124 100644
--- a/resources/views/v1/budgets/index.twig
+++ b/resources/views/v1/budgets/index.twig
@@ -146,7 +146,7 @@
                             <div class="row">
                                 <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                     <div class="progress budgeted_bar" data-id="{{ budget.id }}" data-budgeted="{{ budget.budgeted }}"
-                                         data-available="{{ budget.amount }}">
+                                         data-available="{{ budget.amount }}" data-currency="{{ budget.transaction_currency.id }}">
                                         <div class="progress-bar progress-bar-danger" data-id="{{ budget.id }}" role="progressbar" aria-valuenow="0"
                                              aria-valuemin="0"
                                              aria-valuemax="100" style="width: 0;"></div>