diff --git a/resources/assets/v2/src/pages/dashboard/subscriptions.js b/resources/assets/v2/src/pages/dashboard/subscriptions.js
index 57f314d949..bb632f2514 100644
--- a/resources/assets/v2/src/pages/dashboard/subscriptions.js
+++ b/resources/assets/v2/src/pages/dashboard/subscriptions.js
@@ -163,8 +163,8 @@ function downloadSubscriptions(params) {
                                     currency_code: bill.currency_code,
                                     paid: 0,
                                     unpaid: 0,
-                                    native_currency_code: bill.native_currency_code,
-                                    native_paid: 0,
+                                    // native_currency_code: bill.native_currency_code,
+                                    // native_paid: 0,
                                     //native_unpaid: 0,
                                 };
                             }
@@ -218,6 +218,9 @@ export default () => ({
     loading: false,
     convertToNative: false,
     subscriptions: [],
+    formatMoney(amount, currencyCode) {
+        return formatMoney(amount, currencyCode);
+    },
     startSubscriptions() {
         this.loading = true;
         let start = new Date(window.store.get('start'));
@@ -256,6 +259,7 @@ export default () => ({
                     //console.log(group);
                 }
             }
+            console.log('Subscriptions: ', this.subscriptions);
 
             // then assign to this.subscriptions.
             this.loading = false;
diff --git a/resources/lang/en_US/firefly.php b/resources/lang/en_US/firefly.php
index ed675e71eb..f9c07625ad 100644
--- a/resources/lang/en_US/firefly.php
+++ b/resources/lang/en_US/firefly.php
@@ -1864,6 +1864,7 @@ return [
     'remove_budgeted_amount'                                                    => 'Remove budgeted amount in :currency',
 
     // bills:
+    'left_to_pay_lc' => 'left to pay',
     'skip_help_text'                                                            => 'Use the skip field to create bi-monthly (skip = 1) or other custom intervals.',
     'subscription'                                                              => 'Subscription',
     'not_expected_period'                                                       => 'Not expected this period',
diff --git a/resources/views/v2/partials/dashboard/piggy-banks.blade.php b/resources/views/v2/partials/dashboard/piggy-banks.blade.php
index 971bc5c595..53bdd2a23f 100644
--- a/resources/views/v2/partials/dashboard/piggy-banks.blade.php
+++ b/resources/views/v2/partials/dashboard/piggy-banks.blade.php
@@ -3,10 +3,8 @@
     <template x-for="group in piggies">
         <div class="card mb-2">
             <div class="card-header">
-                <h3 class="card-title"><a href="{{ route('piggy-banks.index')  }}"
-                                          title="{{ __('firefly.go_to_piggies')  }}">{{ __('firefly.piggy_banks') }}
-                        (<span
-                            x-text="group.title"></span>)</a></h3>
+                <h3 class="card-title"><a href="{{ route('piggy-banks.index')  }}" title="{{ __('firefly.go_to_piggies')  }}">{{ __('firefly.piggy_banks') }}
+                        (<span x-text="group.title"></span>)</a></h3>
             </div>
             <ul class="list-group list-group-flush">
                 <template x-for="piggy in group.piggies">
diff --git a/resources/views/v2/partials/dashboard/subscriptions.blade.php b/resources/views/v2/partials/dashboard/subscriptions.blade.php
index b8938c5360..b8e92ba9a3 100644
--- a/resources/views/v2/partials/dashboard/subscriptions.blade.php
+++ b/resources/views/v2/partials/dashboard/subscriptions.blade.php
@@ -9,18 +9,21 @@
                 </h3>
             </div>
             <div class="card-body">
+                <template x-for="pi in group.payment_info">
                 <div class="row mb-2">
-                    <!--
-                    <template x-for="pie in group.payment_info">
-                        <div :class='group.col_size'>
-                            <canvas :id='"pie_" + group.id + "_" + pie.currency_code'
-                                    :width="group.width"
-                                    x-init="drawPieChart(group.id, group.title, pie)"></canvas>
+                    <div class="col">
+                        <div class="progress" role="progressbar" aria-label="Example with label"
+                             :aria-valuenow="(pi.paid*-1/pi.unpaid)*100" aria-valuemin="0" aria-valuemax="100">
+                            <div class="progress-bar progress-bar-striped" :style="'width: ' + (pi.paid*-1/pi.unpaid)*100 + '%'">
+                                <span x-text="formatMoney(pi.paid*-1,pi.currency_code)"></span>
+                            </div>
                         </div>
-                    </template>
-                    -->
-                    Here was chart.
+                        <p>
+                        <small>~ <span x-text="formatMoney(pi.unpaid, pi.currency_code)"></span> {{ __('firefly.left_to_pay_lc') }}</small>
+                        </p>
+                    </div>
                 </div>
+                </template>
                 <div class="row mb-2">
                     <table class="table table-striped table-hover">
                         <thead>
@@ -33,9 +36,7 @@
                         <template x-for="bill in group.bills">
                             <tr>
                                 <td>
-                                    <a :href="'{{ route('subscriptions.show',[''])  }}/' + bill.id" :title="bill.name">
-                                        <span x-text="bill.name"></span>
-                                    </a>
+                                    <a :href="'{{ route('subscriptions.show',[''])  }}/' + bill.id" :title="bill.name"><span x-text="bill.name"></span></a>
                                     <template x-if="bill.paid">
                                         <small class="text-muted"><br>{{ __('firefly.paid')  }}</small>
                                     </template>
@@ -60,8 +61,8 @@
                                         <ul class="list-unstyled">
                                             <template x-for="transaction in bill.transactions">
                                                 <li>
-                                                    <span x-text="transaction.amount"></span>
-                                                    (<span x-text="transaction.percentage"></span>%)
+                                                    <span :title="transaction.amount" x-text="transaction.amount"></span>
+                                                    (<span title="Less or more than expected." x-text="transaction.percentage"></span>%)
                                                 </li>
                                             </template>
                                         </ul>