diff --git a/app/controllers/BudgetController.php b/app/controllers/BudgetController.php
index 8636aee2ab..78f7dc2dd8 100644
--- a/app/controllers/BudgetController.php
+++ b/app/controllers/BudgetController.php
@@ -89,10 +89,12 @@ class BudgetController extends BaseController
 
         // get the limits for the current month.
         $date = \Session::get('start');
+        $spent = 0;
         /** @var \Budget $budget */
         foreach ($budgets as $budget) {
 
             $budget->spent = $repos->spentInMonth($budget, $date);
+            $spent += $budget->spent;
             $budget->pct   = 0;
             $budget->limit = 0;
 
@@ -116,8 +118,17 @@ class BudgetController extends BaseController
         }
 
         $budgetAmount = $preferences->get('budgetIncomeTotal' . $date->format('FY'), 1000);
+        $amount = floatval($budgetAmount->data);
+        $overspent = $spent > $amount;
+        if($overspent) {
+            // overspent on total amount
+            $spentPCT = ceil($amount / $spent * 100);
+        } else {
+            // not overspent on total amount.
+            $spentPCT = ceil($spent / $amount * 100);
+        }
 
-        return View::make('budgets.index', compact('budgets'))->with('budgetAmount', $budgetAmount);
+        return View::make('budgets.index', compact('budgets','spent','spentPCT','overspent'))->with('budgetAmount', $budgetAmount);
     }
 
     /**
diff --git a/app/views/budgets/index.blade.php b/app/views/budgets/index.blade.php
index 82a035cfcf..9dd76b21e6 100644
--- a/app/views/budgets/index.blade.php
+++ b/app/views/budgets/index.blade.php
@@ -26,6 +26,23 @@
                         </div>
                     </div>
                 </div>
+                <div class="row">
+                    <div class="col-lg-6 col-md-4 col-sm-3">
+                        <small>Spent: {{mf($spent)}}</small>
+                    </div>
+                </div>
+                <div class="row">
+                    <div class="col-lg-12 col-md-12 col-sm-12">
+                        <div class="progress">
+                            @if($overspent)
+                                <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="{{$spentPCT}}" aria-valuemin="0" aria-valuemax="100" style="width: {{$spentPCT}}%;"></div>
+                                <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="{{100-$spentPCT}}" aria-valuemin="0" aria-valuemax="100" style="width: {{100-$spentPCT}}%;"></div>
+                            @else
+                                <div class="progress-bar" role="progressbar" aria-valuenow="{{$spentPCT}}" aria-valuemin="0" aria-valuemax="100" style="width: {{$spentPCT}}%;"></div>
+                            @endif
+                        </div>
+                    </div>
+                </div>
 
             </div>
         </div>