diff --git a/app/View/Components/Index/Balance.php b/app/View/Components/Index/Balance.php
new file mode 100644
index 000000000..28c513e22
--- /dev/null
+++ b/app/View/Components/Index/Balance.php
@@ -0,0 +1,71 @@
+<?php
+
+namespace App\View\Components\Index;
+
+use App\Abstracts\View\Component;
+
+class Balance extends Component
+{
+    /**
+     * The balance amount.
+     *
+     * @var float
+     */
+    public $amount;
+
+    /**
+     * The text color class.
+     *
+     * @var string
+     */
+    public $textColor;
+
+    /**
+     * Create a new component instance.
+     *
+     * @return void
+     */
+    public function __construct($amount = 0) {
+        $this->amount = $this->getAmount($amount);
+        $this->textColor = $this->getTextColor($amount);
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     *
+     * @return \Illuminate\Contracts\View\View|string
+     */
+    public function render()
+    {
+        return view('components.index.balance');
+    }
+
+    /**
+     * Formats the amount according to the location context.
+     *
+     * @param float $amount
+     * @return string
+     */
+    protected function getAmount($amount)
+    {
+        return money($amount, setting('default.currency'), true);
+    }
+
+    /**
+     * Gets the class of color considering given amount.
+     *
+     * @param float $amount
+     * @return string|null
+     */
+    protected function getTextColor($amount)
+    {
+        switch ($amount) {
+            case $amount > 0:
+                return 'text-green';
+            case $amount < 0:
+                return 'text-red';
+            default:
+                return '';
+        }
+    }
+}
diff --git a/resources/views/components/index/balance.blade.php b/resources/views/components/index/balance.blade.php
new file mode 100644
index 000000000..7eb4485ac
--- /dev/null
+++ b/resources/views/components/index/balance.blade.php
@@ -0,0 +1,3 @@
+<span @class(['font-medium', $textColor])>
+    {{ $amount }}
+</span>