diff --git a/app/Classes/Modules/Wallets/ControllersLogic/TopUpWalletLogic.php b/app/Classes/Modules/Wallets/ControllersLogic/TopUpWalletLogic.php
index 0c51118a..6149d69d 100644
--- a/app/Classes/Modules/Wallets/ControllersLogic/TopUpWalletLogic.php
+++ b/app/Classes/Modules/Wallets/ControllersLogic/TopUpWalletLogic.php
@@ -15,7 +15,7 @@ use App\Classes\ValueObjects\Constants\TransactionType;
 use App\Classes\ValueObjects\Constants\PaymentMethodType;
 use App\Classes\ValueObjects\Constants\ApprovalStatus;
 use App\Http\Resources\WalletResource;
-
+use App\Http\Resources\WalletTransactionResource;
 use ErrorException;
 use Illuminate\Http\JsonResponse;
 use Illuminate\Http\Request;
@@ -86,6 +86,7 @@ class TopUpWalletLogic extends AbstractControllerLogic
      */
     public function logic(Request $request) : JsonResponse
     {
+        $amount = floatval(str_replace(',', '', $request->input('amount')));
         $company = $this->fetchesCompany->execute(['id' => $request->input('company_id')]);
         if (!$company->wallets()->first()) {
             $object = new WalletObject($company->id, 1, $this->generatesWalletCode->execute());
@@ -99,7 +100,7 @@ class TopUpWalletLogic extends AbstractControllerLogic
             $user->name, 
             $user->email, 
             'This payment is made for wallet topup. ' . $company->reference, 
-            $request->input('amount'), 
+            $amount, 
             $billNumber, 
             $request->input('bank_code')
         );
@@ -111,8 +112,8 @@ class TopUpWalletLogic extends AbstractControllerLogic
             $company->id,
             1, 
             PaymentMethodType::PAYMENT_GATEWAY,
-            $request->input('amount'), 
-            $request->input('amount'), 
+            $amount, 
+            $amount, 
             1,
             1, 
             1,
@@ -126,6 +127,6 @@ class TopUpWalletLogic extends AbstractControllerLogic
 
         $transaction = $this->createsTransaction->execute($company->wallets()->first(), $transaction_object);
 
-        return $this->resourceResponse(new WalletResource($wallet));
+        return $this->resourceResponse(new WalletTransactionResource($transaction));
     }
 }
diff --git a/app/Http/Resources/WalletTransactionResource.php b/app/Http/Resources/WalletTransactionResource.php
index 1d0037fe..af634f3b 100644
--- a/app/Http/Resources/WalletTransactionResource.php
+++ b/app/Http/Resources/WalletTransactionResource.php
@@ -23,7 +23,8 @@ class WalletTransactionResource extends JsonResource
             'currency_id' => (int) $this->currency_id,
             'original_amount' => (double) $this->original_amount,
             'original_currency_id' => (int) $this->original_currency_id,
-            'currency_rate' => (double) $this->currency_rate
+            'currency_rate' => (double) $this->currency_rate,
+            'reference' => $this->payment_reference
         ];
     }
 }
diff --git a/resources/assets/vue/components/companies/sections/CustomerProfileSectionComponent.vue b/resources/assets/vue/components/companies/sections/CustomerProfileSectionComponent.vue
index b95f385f..50ecbacd 100644
--- a/resources/assets/vue/components/companies/sections/CustomerProfileSectionComponent.vue
+++ b/resources/assets/vue/components/companies/sections/CustomerProfileSectionComponent.vue
@@ -138,10 +138,10 @@
                 </div>
             </div>
         </div>
-        <div class="col-3">
+        <div class="col">
             <div class="row">
-                <div class="col-10 m-b-15">
-                    <wallet-component></wallet-component>
+                <div class="col m-b-15">
+                    <wallet-component :data="company"></wallet-component>
                 </div>
             </div>
             <booking-form-component :data="company" section="customerProfileSection"></booking-form-component>
diff --git a/resources/assets/vue/components/companies/sections/customerDashboardSectionComponent.vue b/resources/assets/vue/components/companies/sections/customerDashboardSectionComponent.vue
index 4db667e7..fc3ad852 100644
--- a/resources/assets/vue/components/companies/sections/customerDashboardSectionComponent.vue
+++ b/resources/assets/vue/components/companies/sections/customerDashboardSectionComponent.vue
@@ -571,7 +571,7 @@
                 </div>
                 <div class="col-2 p-l-0 p-r-0 order-last">
                     <verification-warning-component v-if="!isLoading && company.bookings.length" :data="company"></verification-warning-component>
-                    <wallet-component></wallet-component>
+                    <wallet-component :data="company"></wallet-component>
                 </div>
             </div>
         </div>
diff --git a/resources/assets/vue/components/wallets/elements/CustomerTransactionSectionComponent.vue b/resources/assets/vue/components/wallets/elements/CustomerTransactionSectionComponent.vue
new file mode 100644
index 00000000..b4fcd9ae
--- /dev/null
+++ b/resources/assets/vue/components/wallets/elements/CustomerTransactionSectionComponent.vue
@@ -0,0 +1,140 @@
+<template>
+    <div class="row">
+        <div class="col">
+            <div class="row">
+                <div class="col-8">
+                    <div class="row p-b-5 b-b b-grey m-b-10 m-l-0 m-r-0">
+                        <div class="col no-padding">
+                            <h6>Transaction History</h6>
+                        </div>
+                    </div>
+
+                    <div class="row" v-show="company.wallet.length > 0">
+                        <div class="col">
+                            <div class="row padding-10">
+                                <div class="col-2 fs-10">Date</div>
+                                <div class="col fs-10">Description</div>
+                                <div class="col-2 fs-10">Incoming</div>
+                                <div class="col-2 fs-10">Outgoing</div>
+                                <div class="col-2 fs-10">Balance</div>
+                            </div>
+
+                            <div class="row bg-white padding-10 m-b-10 rounded"  v-for="item in company.wallet[0].transactions" v-bind:key="item.id" :data="item">
+                                <div class="col-2">{{item.created_at}}</div>
+                                <div class="col">{{item.type == 5 ? 'Top Up' : 'Payment to bill'}}</div>
+                                <div class="col-2 text-success">{{item.type == 5 ? (Math.round((item.amount + Number.EPSILON) * 100) / 100).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") : ''}}</div>
+                                <div class="col-2 text-danger">{{item.type != 5 ? '- ' + (Math.round((item.amount + Number.EPSILON) * 100) / 100).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") : ''}}</div>
+                                <div class="col-2">Balance</div>
+                            </div>  
+                        </div>
+                    </div>
+
+                    <div class="row align-items-center justify-content-center p-t-50 p-b-50" v-show="company.wallet.length == 0">
+                        <div class="col-10">
+                            <div class="row align-items-center justify-content-center  hint-text">
+                                <div class="col-4 hint-text"><img src="/images/not-found-illustration.png" class="w-100 hint-text"/></div>
+                            </div>
+                            <div class="row text-center">
+                                <div class="col">
+                                    <div class="row m-t-20">
+                                        <div class="col">
+                                            <p class="all-caps no-margin fs-11" style="letter-spacing: 2px;">Nothing To Show Here</p>
+                                        </div>
+                                    </div>
+                                    <div class="row m-t-5 align-items-center justify-content-center">
+                                        <div class="col">
+                                            <small class="fs-9 muted all-caps font-lato" style="letter-spacing: 2px">There is no results found, Try adjusting your filters to find what you are looking for.</small>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-3 m-l-15">
+                    <wallet-component :data="company"></wallet-component>
+                    <div class="row m-t-20">
+                        <div class="col">
+                            <div class="row m-b-10">
+                                <div class="col">
+                                    <div class="font-head fs-10 all-caps">Top Up Records</div>
+                                </div>
+                            </div>
+
+                            <div class="row" v-show="company.wallet.length > 0">
+                                <div class="col">
+                                    <wallet-top-up-history-component v-for="item in company.wallet[0].topup_transactions" v-bind:key="item.id" :data="item"></wallet-top-up-history-component>
+                                </div>
+                            </div>
+
+                            <div class="row align-items-center justify-content-center p-t-50 p-b-50" v-show="company.wallet.length == 0">
+                                <div class="col-10">
+                                    <div class="row align-items-center justify-content-center  hint-text">
+                                        <div class="col-4 hint-text"><img src="/images/not-found-illustration.png" class="w-100 hint-text"/></div>
+                                    </div>
+                                    <div class="row text-center">
+                                        <div class="col">
+                                            <div class="row m-t-20">
+                                                <div class="col">
+                                                    <p class="all-caps no-margin fs-11" style="letter-spacing: 2px;">Nothing To Show Here</p>
+                                                </div>
+                                            </div>
+                                            <div class="row m-t-5 align-items-center justify-content-center">
+                                                <div class="col">
+                                                    <small class="fs-9 muted all-caps font-lato" style="letter-spacing: 2px">There is no results found, Try adjusting your filters to find what you are looking for.</small>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    props: {
+        id: {
+            type: Number,
+            required: true
+        }
+    },
+    data(){
+        return {
+            section: 'customerTransactionSection',
+            isLoading: true,
+            company: null,
+            attention: false
+        }
+    },
+    computed: {
+        pendingQueue () {
+            return this.$store.getters.isInCompleteQueue(this.section);
+        }
+    },
+    watch: {
+        pendingQueue(inComplete){
+            if(inComplete){
+                this.fetchCompany();
+            }
+        }
+    },
+    created(){
+        this.$store.dispatch('updateListQueue', {'name': this.section});
+    },
+    methods: {
+        fetchCompany(){
+            this.isLoading = true;
+            this.submit(route('api.company.show', this.id), 'get', this.section, false, false)
+        },
+        successHandler(response){
+            this.isLoading = false;
+            this.company = response.payload.data;
+        }
+    }
+}
+</script>
diff --git a/resources/assets/vue/components/wallets/elements/WalletComponent.vue b/resources/assets/vue/components/wallets/elements/WalletComponent.vue
index af0398d5..92b2e275 100644
--- a/resources/assets/vue/components/wallets/elements/WalletComponent.vue
+++ b/resources/assets/vue/components/wallets/elements/WalletComponent.vue
@@ -1,4 +1,4 @@
-f<template>
+<template>
     <div class="row">
         <div class="col">
             <div class="row" v-if="step === 1">
@@ -6,7 +6,7 @@ f<template>
                     <div class="row">
                         <div class="col">
                             <label class="fs-10 text-white m-b-0 text-uppercase">Wallet Balance</label>
-                            <div class="fs-12 text-primary-lighter">MYR 0.00</div>
+                            <div class="fs-12 text-primary-lighter">MYR {{ data.wallet.length > 0 ? (Math.round((data.wallet[0].amount + Number.EPSILON) * 100) / 100).toFixed(2) : '0.00'}}</div>
                         </div>
                     </div>
                     <div class="row m-t-10 d-flex align-items-center" v-if="!$store.getters.isAdmin">
@@ -14,7 +14,7 @@ f<template>
                             <span class="col-auto font-heading fs-8 all-caps text-master btn-rounded p-l-15 p-r-15 bg-white d-flex justify-content-center align-items-center cursor" @click="step++">Top Up <i class="fa fa-plus m-l-5"></i></span>
                         </div>
                         <div class="col-auto cursor">
-                            <a class="fs-8 d-flex justify-content-center align-items-center lh-15 text-white" :href="route('wallet.details', 2)">Transaction History<i class="fa fa-angle-right p-l-5"></i></a>
+                            <a class="fs-8 d-flex justify-content-center align-items-center lh-15 text-white" :href="route('wallet.details', data.id)">Transaction History<i class="fa fa-angle-right p-l-5"></i></a>
                         </div>
                     </div>
                     <div class="row p-l-15 p-t-10 p-r-15 m-b-10 parentContainer" v-if="$store.getters.isAdmin">
@@ -25,18 +25,15 @@ f<template>
                                 </div>
                             </div>
                             <div class="row m-t-10">
-                                <div class="col margin-10 b-a b-grey bg-white padding-10 pointer b-primary text-primary fs-8 d-flex align-items-center justify-content-between flex-column requestModal" data-type="adminTopUpModal" @click="updateTopUpType('deposit')">
+                                <div class="col margin-10 b-a b-grey bg-white padding-10 m-r-5 pointer b-primary text-primary fs-8 d-flex align-items-center justify-content-between flex-column rounded" @click="updateTransactionType('credit')">
                                     <svg class="m-t-5" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="20" height="20" viewBox="0 0 172 172" style=" fill:#000000;"><g transform="translate(4.988,4.988) scale(0.942,0.942)"><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="none" stroke-linecap="butt" stroke-linejoin="none" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g id="original-icon 1" fill="#000000" stroke="#cccccc" stroke-width="10" stroke-linejoin="round"><path d="M88.4725,4.4075l27.52,27.52c1.37063,1.37063 1.37063,3.57438 0,4.945c-1.37062,1.37063 -3.57437,1.37063 -4.945,0l-21.6075,-21.6075v94.815c0.01344,1.23625 -0.63156,2.39188 -1.70656,3.02344c-1.075,0.61813 -2.39187,0.61813 -3.46687,0c-1.075,-0.63156 -1.72,-1.78719 -1.70656,-3.02344v-94.815l-21.6075,21.6075c-1.37062,1.37063 -3.57437,1.37063 -4.945,0c-1.37062,-1.37062 -1.37062,-3.57437 0,-4.945l27.52,-27.52l2.4725,-2.365zM58.48,55.04c1.23625,-0.01344 2.39188,0.63156 3.02344,1.70656c0.61813,1.075 0.61813,2.39187 0,3.46687c-0.63156,1.075 -1.78719,1.72 -3.02344,1.70656h-27.52v103.2h110.08v-103.2h-27.52c-1.23625,0.01344 -2.39187,-0.63156 -3.02344,-1.70656c-0.61813,-1.075 -0.61813,-2.39187 0,-3.46687c0.63156,-1.075 1.78719,-1.72 3.02344,-1.70656h34.4v116.96h-123.84v-116.96z"></path></g><path d="M0,172v-172h172v172z" fill="none" stroke="none" stroke-width="1" stroke-linejoin="miter"></path><path d="" fill="none" stroke="none" stroke-width="1" stroke-linejoin="miter"></path><g id="original-icon" fill="#000000" stroke="none" stroke-width="1" stroke-linejoin="miter"><path d="M86,2.0425l-2.4725,2.365l-27.52,27.52c-1.37062,1.37063 -1.37062,3.57438 0,4.945c1.37063,1.37063 3.57438,1.37063 4.945,0l21.6075,-21.6075v94.815c-0.01344,1.23625 0.63156,2.39188 1.70656,3.02344c1.075,0.61813 2.39187,0.61813 3.46687,0c1.075,-0.63156 1.72,-1.78719 1.70656,-3.02344v-94.815l21.6075,21.6075c1.37063,1.37063 3.57438,1.37063 4.945,0c1.37063,-1.37062 1.37063,-3.57437 0,-4.945l-27.52,-27.52zM24.08,55.04v116.96h123.84v-116.96h-34.4c-1.23625,-0.01344 -2.39187,0.63156 -3.02344,1.70656c-0.61813,1.075 -0.61813,2.39187 0,3.46687c0.63156,1.075 1.78719,1.72 3.02344,1.70656h27.52v103.2h-110.08v-103.2h27.52c1.23625,0.01344 2.39188,-0.63156 3.02344,-1.70656c0.61813,-1.075 0.61813,-2.39187 0,-3.46687c-0.63156,-1.075 -1.78719,-1.72 -3.02344,-1.70656z"></path></g><path d="" fill="none" stroke="none" stroke-width="1" stroke-linejoin="miter"></path><path d="" fill="none" stroke="none" stroke-width="1" stroke-linejoin="miter"></path></g></g></svg>
                                     <span class="m-t-5 d-block">Top Up</span>
                                 </div>
-                                <div class="col margin-10 b-a b-grey bg-white padding-10 pointer b-primary text-primary fs-8 d-flex align-items-center justify-content-between flex-column requestModal" data-type="adminTopUpModal" @click="updateTopUpType('withdraw')">
+                                <div class="col margin-10 b-a b-grey bg-white padding-10 m-l-5 pointer b-primary text-primary fs-8 d-flex align-items-center justify-content-between flex-column rounded"  @click="updateTransactionType('debit')">
                                     <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="30" height="30" viewBox="0 0 172 172" style=" fill:#000000;"><g transform="translate(25.8,25.8) scale(0.7,0.7)"><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,172v-172h172v172z" fill="none" stroke="none"></path><g fill="#000000" stroke="none"><path d="M86,8.6c-4.64434,0 -8.53281,3.02344 -10.01934,7.17227c-1.91484,-1.73848 -4.40078,-2.87227 -7.18066,-2.87227c-5.9125,0 -10.75,4.8375 -10.75,10.75v4.00605c-1.56211,-1.075 -3.34258,-1.85605 -5.375,-1.85605c-5.31621,0 -9.675,4.35879 -9.675,9.675v5.375h-32.25v86h32.45156l0.57109,5.74453c0.5375,5.34141 3.64492,9.70859 7.82734,12.53047v18.275h4.3v-17.2c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15c-0.44512,0 -0.87344,0.13437 -1.24297,0.39473c-3.59453,-2.05762 -6.16445,-5.73613 -6.60117,-10.13691l-0.5291,-5.30781h52.07871l18.2834,-15.91504l0.19316,-0.46191c0,0 4.55195,-11.57305 18.96367,-11.57305c5.94609,0 7.91972,2.94785 8.62519,4.22441c-1.57051,1.99043 -12.82441,16.25938 -14.13457,17.88867l-18.70332,23.34766c-0.92383,1.14219 -5.33301,5.65215 -5.33301,12.53047v6.50879h4.3v-6.50879c0,-5.12305 2.95625,-8.0709 4.37559,-9.83457h0.0084l16.19219,-20.20664h28.87383v-86h-47.3v-17.2c0,-5.9125 -4.8375,-10.75 -10.75,-10.75c-2.77988,0 -5.26582,1.13379 -7.18066,2.87227c-1.48652,-4.14883 -5.375,-7.17227 -10.01934,-7.17227zM86,12.9c3.58613,0 6.45,2.86387 6.45,6.45v4.3h4.3c0,-3.58613 2.86387,-6.45 6.45,-6.45c3.58613,0 6.45,2.86387 6.45,6.45v17.2h-12.9c0,-1.18418 -0.96582,-2.15 -2.15,-2.15c-1.18418,0 -2.15,0.96582 -2.15,2.15h-12.9c0,-1.18418 -0.96582,-2.15 -2.15,-2.15c-1.18418,0 -2.15,0.96582 -2.15,2.15h-27.95v-5.375c0,-2.98984 2.38516,-5.375 5.375,-5.375c2.98984,0 5.375,2.38516 5.375,5.375h4.3v-11.825c0,-3.58613 2.86387,-6.45 6.45,-6.45c3.58613,0 6.45,2.86387 6.45,6.45c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15v-4.3c0,-3.58613 2.86387,-6.45 6.45,-6.45zM77.4,30.1c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM94.6,30.1c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM15.05,45.15h141.9v77.4h-21.14726c2.74629,-3.45176 14.23535,-18.01465 14.23535,-18.01465l0.80625,-1.03301l-0.5375,-1.18418c0,0 -3.7625,-7.71816 -13.26113,-7.71816c-15.70508,0 -21.86953,12.06016 -22.62539,13.65586l-16.42734,14.29414h-82.94297zM34.4,49.45c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM40.85,49.45c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM47.3,49.45c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM53.75,49.45c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM60.2,49.45c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM66.65,49.45c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM73.1,49.45c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM79.55,49.45c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM86,49.45c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM92.45,49.45c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM98.9,49.45c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM105.35,49.45c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM111.8,49.45c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM118.25,49.45c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM124.7,49.45c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM131.15,49.45c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM137.6,49.45c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM32.25,55.9c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM139.75,55.9c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM27.95,60.2c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM86,60.2c-13.03437,0 -23.65,10.61563 -23.65,23.65c0,13.03437 10.61563,23.65 23.65,23.65c13.03437,0 23.65,-10.61563 23.65,-23.65c0,-13.03437 -10.61562,-23.65 -23.65,-23.65zM144.05,60.2c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM21.5,62.35c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM150.5,62.35c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM86,64.5c10.70801,0 19.35,8.64199 19.35,19.35c0,10.70801 -8.64199,19.35 -19.35,19.35c-10.70801,0 -19.35,-8.64199 -19.35,-19.35c0,-10.70801 8.64199,-19.35 19.35,-19.35zM21.5,68.8c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM150.5,68.8c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM21.5,75.25c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM40.85,75.25c-4.72832,0 -8.6,3.87168 -8.6,8.6c0,4.72832 3.87168,8.6 8.6,8.6c4.72832,0 8.6,-3.87168 8.6,-8.6c0,-4.72832 -3.87168,-8.6 -8.6,-8.6zM129,75.25c-4.72832,0 -8.6,3.87168 -8.6,8.6c0,4.72832 3.87168,8.6 8.6,8.6c4.72832,0 8.6,-3.87168 8.6,-8.6c0,-4.72832 -3.87168,-8.6 -8.6,-8.6zM150.5,75.25c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM40.85,79.55c2.40195,0 4.3,1.89805 4.3,4.3c0,2.40195 -1.89805,4.3 -4.3,4.3c-2.40195,0 -4.3,-1.89805 -4.3,-4.3c0,-2.40195 1.89805,-4.3 4.3,-4.3zM129,79.55c2.40195,0 4.3,1.89805 4.3,4.3c0,2.40195 -1.89805,4.3 -4.3,4.3c-2.40195,0 -4.3,-1.89805 -4.3,-4.3c0,-2.40195 1.89805,-4.3 4.3,-4.3zM21.5,81.7c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM150.5,81.7c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM21.5,88.15c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM150.5,88.15c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM21.5,94.6c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM21.5,101.05c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM27.95,103.2c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM32.25,107.5c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM34.4,113.95c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM40.85,113.95c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM47.3,113.95c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM53.75,113.95c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM60.2,113.95c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM66.65,113.95c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM73.1,113.95c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM79.55,113.95c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM86,113.95c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM92.45,113.95c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM98.9,113.95c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM64.5,141.9c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM73.1,141.9c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15z"></path></g><path d="" fill="none" stroke="none"></path></g></g></svg>
                                     <span>Redraw</span>
                                 </div>
                             </div>
-                            <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="adminTopUpModal">
-                                <wallet-top-up-form-component :section="section" :topUpType="topUpType"></wallet-top-up-form-component>
-                            </modal-component>
                         </div>
                     </div>
                 </div>
@@ -48,29 +45,7 @@ f<template>
                             <label class="fs-10 text-white m-b-0 text-uppercase cursor" @click="step--"><i class="fa fa-angle-left p-r-15"></i>Top Up Wallet</label>
                         </div>
                     </div>
-                    <div class="row m-t-15">
-                        <div class="col">
-                            <validation-wrapper-component :validator="$v.amount">
-                                <label>Top Up Amount (MYR)</label>
-                                <input class="form-control" name="amount" v-model.lazy="amount" v-money="{decimal: '.',thousands: ',', precision: 2}">
-                            </validation-wrapper-component>
-                        </div>
-                    </div>
-                    <div class="row m-t-15 p-l-15 p-r-15">
-                        <div class="col bg-master-lightest b-grey b-a m-l-5 m-r-5 p-t-5 p-b-5 btn-rounded text-center font-heading fs-10 all-caps text-master cursor" :class="[{'bg-info-lighter': parseInt(amount.replace(/\,/g,'')) == 500}]" @click="updateTopUpAmount(500)">MYR<br>500</div>
-                        <div class="col bg-master-lightest b-grey b-a m-l-5 m-r-5 p-t-5 p-b-5 btn-rounded text-center font-heading fs-10 all-caps text-master cursor" :class="[{'bg-info-lighter': parseInt(amount.replace(/\,/g,'')) == 1000}]" @click="updateTopUpAmount(1000)">MYR<br>1000</div>
-                        <div class="col bg-master-lightest b-grey b-a m-l-5 m-r-5 p-t-5 p-b-5 btn-rounded text-center font-heading fs-10 all-caps text-master cursor" :class="[{'bg-info-lighter': parseInt(amount.replace(/\,/g,'')) == 3000}]" @click="updateTopUpAmount(3000)">MYR<br>3000</div>
-                    </div>
-                    <div class="row m-t-10 p-l-15 p-r-15">
-                        <div class="col bg-master-lightest b-grey b-a m-l-5 m-r-5 p-t-5 p-b-5 btn-rounded text-center font-heading fs-10 all-caps text-master cursor" :class="[{'bg-info-lighter': parseInt(amount.replace(/\,/g,'')) == 5000}]" @click="updateTopUpAmount(5000)">MYR<br>5000</div>
-                        <div class="col bg-master-lightest b-grey b-a m-l-5 m-r-5 p-t-5 p-b-5 btn-rounded text-center font-heading fs-10 all-caps text-master cursor" :class="[{'bg-info-lighter': parseInt(amount.replace(/\,/g,'')) == 10000}]" @click="updateTopUpAmount(10000)">MYR<br>10000</div>
-                        <div class="col bg-master-lightest b-grey b-a m-l-5 m-r-5 p-t-5 p-b-5 btn-rounded text-center font-heading fs-10 all-caps text-master cursor" :class="[{'bg-info-lighter': parseInt(amount.replace(/\,/g,'')) == 50000}]" @click="updateTopUpAmount(50000)">MYR<br>50000</div>
-                    </div>
-                    <div class="row m-t-15">
-                        <div class="col">
-                            <div class="btn btn-xs btn-success btn-block b-rad-none rounded">Confirm</div>
-                        </div>
-                    </div>
+                    <wallet-top-up-form-component :data="data"></wallet-top-up-form-component>
                 </div>
             </div>
         </div>
@@ -79,38 +54,13 @@ f<template>
 
 <script>
     import componentHandler from '../../../general/mixins/componentHandler';
-    import { required } from "vuelidate/lib/validators";
-    import { VMoney } from 'v-money';
 
     export default {
-        props: {
-            section: {
-                default: "WalletBalanceSection",
-            },
-        },
-        data() {
+        data(){
             return {
                 step: 1,
-                amount: '',
-                topUpType: '',
-            }
-        },
-        validations () {
-            return {
-                amount: {
-                    required,
-                }
-            }
-        },
-        methods: {
-            updateTopUpAmount(amount){
-                this.amount = (Math.round((amount + Number.EPSILON) * 100) / 100).toFixed(2);
-            },
-            updateTopUpType(topUpType){
-                this.topUpType = topUpType;
             }
         },
         mixins: [componentHandler],
-        directives: {money: VMoney}
     }
 </script>
\ No newline at end of file
diff --git a/resources/assets/vue/components/wallets/elements/WalletTopUpHistoryComponent.vue b/resources/assets/vue/components/wallets/elements/WalletTopUpHistoryComponent.vue
index 2f58caab..ff392682 100644
--- a/resources/assets/vue/components/wallets/elements/WalletTopUpHistoryComponent.vue
+++ b/resources/assets/vue/components/wallets/elements/WalletTopUpHistoryComponent.vue
@@ -3,28 +3,26 @@
         <div class="col">
             <div class="row m-l-0 m-b-10 m-r-0 parentContainer" :class="[{'b-a': item.status === 4}, {'b-danger': item.status === 4}]" >
                 <div class="col">
-                    <div class="row" v-if="item.type === 3">
+                    <div class="row">
                         <div class="col">
                             <div class="row">
-                                <div class="col p-t-10 p-b-10 p-r-0" :class="[{'bg-master-lighter': item.status === 1}, {'bg-white': item.status !== 1 && item.status !== 4}]">
+                                <div class="col p-t-10 p-b-10 p-r-0" :class="[{'bg-master-lighter': item.status === 1 || item.status === 0}, {'bg-white': item.status !== 1 && item.status !== 4}]">
                                     <div class="row m-b-5">
                                         <div class="col-auto">
                                             <div class="font-heading fs-8 muted all-caps">Status</div>
-                                            <div class="font-heading fs-10 bold" :class="[{'text-danger': item.status === 1 || item.status === 4}, {'text-success': item.status !== 1 && item.status !== 4}]">
-                                                {{ item.status === 1 ? 'Processing Payment' : 'Success'}}
+                                            <div class="font-heading fs-10 bold" :class="[{'text-warning': item.status === 0}, {'text-danger': item.status === 1 || item.status === 4}, {'text-success': item.status == 2 && item.status == 3}]">
+                                                {{ item.status === 0 ? 'Pedning Verification' : ''}}
                                             </div>
                                         </div>
                                         <div class="col-auto p-l-0">
                                             <div class="font-heading fs-8 muted all-caps">Payment Amount</div>
                                             <div class="font-heading fs-10 bold">
-                                                <!-- {{item.original_currency.short_code}} {{(Math.round((item.original_amount + Number.EPSILON) * 100) / 100).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}} -->
-                                                MYR 1000
+                                                MYR {{(Math.round((item.amount + Number.EPSILON) * 100) / 100).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}}
                                             </div>
                                         </div>
                                     </div>
                                     <div class="row m-b-5" v-if="$store.getters.isAdmin">
-                                        <!-- <div class="col" v-if="$store.getters.isAdmin && item.type === 3"> -->
-                                        <div class="col">
+                                        <div class="col" v-if="$store.getters.isAdmin && item.type === 3">
                                             <div class="font-heading fs-8 muted all-caps">Customer Marking</div>
                                             <div class="font-heading fs-10 bold">
                                                 Marking & Link
@@ -33,20 +31,20 @@
                                     </div>
                                     <div class="row">
                                         <div class="col">
-                                            <!-- <div class="font-heading fs-8 all-caps" >{{ item.status === 1 ? 'Paid On: ' + customerBooking.updated_at : 'Transferred On:' + item.updated_at }}</div> -->
-                                            <div class="font-heading fs-8 all-caps">Paid On: 25-12-2021 11:15:45 AM </div>
+                                            <div class="font-heading fs-8 all-caps" >{{ item.status === 1 ? 'Created On: ' + item.updated_at : 'Paid On:' + item.updated_at }}</div>
                                         </div>
                                     </div>
                                 </div>
-                                <div class="col-auto pointer" v-if="item.status !== 3 && item.status !== 2" :class="[{'bg-master-light': item.status === 1}, {'bg-master-lighter': item.status === 2}]">
+                                <div class="col-auto pointer" :class="[{'bg-master-light': item.status === 0 || item.status === 1 }, {'bg-master-lighter': item.status === 2}]">
                                     <div class="row align-items-center h-100">
                                         <div class="col">
                                             <i class="fa" :class="[{'fa-cloud-download': item.status === 1 || item.status === 2}, {'fa-ban': item.status === 4}, {'muted': item.status === 1 || item.status === 2}, {'text-danger':  item.status === 4}]"></i>
+                                            <a :href="'https://www.billplz-sandbox.com/bills/'+item.payment_reference"><i class="fa fa-repeat text-muted"></i></a>
                                         </div>
                                     </div>
                                 </div>
                                 <div class="col-auto bg-success" v-if="item.status === 2 || item.status === 3">
-                                    <!-- <document-file-viewer-component class="h-100" :file="item.documents.files[0]">
+                                    <document-file-viewer-component class="h-100" :file="item.documents.files[0]">
                                         <template slot="button">
                                             <div class="row align-items-center h-100">
                                                 <div class="col">
@@ -54,7 +52,7 @@
                                                 </div>
                                             </div>
                                         </template>
-                                    </document-file-viewer-component> -->
+                                    </document-file-viewer-component>
                                 </div>
                             </div>
                         </div>
@@ -70,11 +68,6 @@
     export default {
         data(){
             return {
-                // expandPaymentDetails: false,
-                item: {
-                    status: 1,
-                    type: 3
-                },
             }
         },
         mixins: [componentHandler]
diff --git a/resources/assets/vue/components/wallets/forms/WalletTopUpFormComponent.vue b/resources/assets/vue/components/wallets/forms/WalletTopUpFormComponent.vue
index 00a6629e..6540c406 100644
--- a/resources/assets/vue/components/wallets/forms/WalletTopUpFormComponent.vue
+++ b/resources/assets/vue/components/wallets/forms/WalletTopUpFormComponent.vue
@@ -1,41 +1,66 @@
 <template>
     <div class="row">
-        <div class="col bg-white padding-40 b-rad-lg">
-              <div class="row m-b-10">
-                <div class="col text-center">
-                    <div class="fs-11">Plese enter the {{topUpType}} amount.</div>
+        <div class="col">
+            <div class="row m-t-15">
+                <div class="col">
+                    <validation-wrapper-component :validator="$v.parameters.amount">
+                        <label>Top Up Amount (MYR)</label>
+                        <input class="form-control" v-model.lazy="parameters.amount" v-money="{decimal: '.',thousands: ',', precision: 2}">
+                    </validation-wrapper-component>
                 </div>
             </div>
-             <div class="row m-b-20">
-                <div class="col no-padding">
-                    <div class="form-group form-group-default m-b-0">
-                        <label>Amount</label>
-                        <input type="text" placeholder="0.00" value="0" class="form-control" v-money="money">
-                    </div>
-                </div>
+            <div class="row m-t-15 p-l-15 p-r-15">
+                <div class="col bg-master-lightest b-grey b-a m-l-5 m-r-5 p-t-5 p-b-5 btn-rounded text-center font-heading fs-10 all-caps text-master cursor" :class="[{'bg-info-lighter': parseInt(parameters.amount.replace(/\,/g,'')) == 500}]" @click="updateTopUpAmount(500)">MYR<br>500</div>
+                <div class="col bg-master-lightest b-grey b-a m-l-5 m-r-5 p-t-5 p-b-5 btn-rounded text-center font-heading fs-10 all-caps text-master cursor" :class="[{'bg-info-lighter': parseInt(parameters.amount.replace(/\,/g,'')) == 1000}]" @click="updateTopUpAmount(1000)">MYR<br>1000</div>
+                <div class="col bg-master-lightest b-grey b-a m-l-5 m-r-5 p-t-5 p-b-5 btn-rounded text-center font-heading fs-10 all-caps text-master cursor" :class="[{'bg-info-lighter': parseInt(parameters.amount.replace(/\,/g,'')) == 3000}]" @click="updateTopUpAmount(3000)">MYR<br>3000</div>
             </div>
-            <div class="row">
-                <div class="col-4 p-l-0 p-r-0">
-                    <button class="btn btn-sm all-caps b-rad-none btn-default bg-master-lighter btn-block" data-dismiss="modal">Cancel</button>
-                </div>
-                <div class="col p-l-0 p-r-0">
-                    <button class="btn btn-sm all-caps b-rad-none btn-success btn-block">Confirm</button>
+            <div class="row m-t-10 p-l-15 p-r-15">
+                <div class="col bg-master-lightest b-grey b-a m-l-5 m-r-5 p-t-5 p-b-5 btn-rounded text-center font-heading fs-10 all-caps text-master cursor" :class="[{'bg-info-lighter': parseInt(parameters.amount.replace(/\,/g,'')) == 5000}]" @click="updateTopUpAmount(5000)">MYR<br>5000</div>
+                <div class="col bg-master-lightest b-grey b-a m-l-5 m-r-5 p-t-5 p-b-5 btn-rounded text-center font-heading fs-10 all-caps text-master cursor" :class="[{'bg-info-lighter': parseInt(parameters.amount.replace(/\,/g,'')) == 10000}]" @click="updateTopUpAmount(10000)">MYR<br>10000</div>
+                <div class="col bg-master-lightest b-grey b-a m-l-5 m-r-5 p-t-5 p-b-5 btn-rounded text-center font-heading fs-10 all-caps text-master cursor" :class="[{'bg-info-lighter': parseInt(parameters.amount.replace(/\,/g,'')) == 50000}]" @click="updateTopUpAmount(50000)">MYR<br>50000</div>
+            </div>
+            <div class="row m-t-15">
+                <div class="col">
+                    <div class="btn btn-xs btn-success btn-block b-rad-none rounded" @click="submit(route('api.wallet.topup'), 'post', '', true, true)">Confirm</div>
                 </div>
             </div>
         </div>
     </div>
 </template>
+
 <script>
-    import ModalFormHandler from '../../../general/mixins/modalFormHandler';
+    import componentHandler from '../../../general/mixins/componentHandler';
     import {VMoney} from 'v-money'
+    import { required, minValue} from "vuelidate/lib/validators";
+
     export default {
-        props: {
-            topUpType:{
-                type: String,
-                required: true
+        data(){
+            return {
+                parameters: {
+                    company_id: this.data,   
+                    amount: '0.00',
+                }
             }
         },
-        mixins: [ModalFormHandler],
+        validations () {
+            return {
+                parameters: {
+                    amount: {
+                        required,
+                        minValue: 10.00,
+                    }
+                }
+            }
+        },
+        methods: {
+            updateTopUpAmount(amount){
+                this.parameters.amount = (Math.round((amount + Number.EPSILON) * 100) / 100).toFixed(2);
+            },
+            successHandler(response){
+                window.location.href = 'https://www.billplz-sandbox.com/bills/' + response.payload.data.reference + '?auto_submit=true';
+            },
+        },
+        mixins: [componentHandler],
         directives: {money: VMoney}
     }
 </script>
\ No newline at end of file
diff --git a/resources/views/pages/wallet/transactions.blade.php b/resources/views/pages/wallet/transactions.blade.php
index eec36547..ce31dec6 100644
--- a/resources/views/pages/wallet/transactions.blade.php
+++ b/resources/views/pages/wallet/transactions.blade.php
@@ -1,113 +1,5 @@
 <div class="row">
-    <div class="col-8">
-        <div class="row p-b-5 b-b b-grey m-b-10 m-l-0 m-r-0">
-            <div class="col no-padding">
-                <h6>Transaction History</h6>
-            </div>
-        </div>
-
-        <div class="row padding-10">
-            <div class="col-2 fs-10">Date</div>
-            <div class="col fs-10">Description</div>
-            <div class="col-2 fs-10">Incoming</div>
-            <div class="col-2 fs-10">Outgoing</div>
-            <div class="col-2 fs-10">Balance</div>
-        </div>
-
-        <div class="row bg-white padding-10 m-b-10 rounded">
-            <div class="col-2">25/11/2015</div>
-            <div class="col">Payment to bill #121221121</div>
-            <div class="col-2"></div>
-            <div class="col-2 text-danger">- 2,123</div>
-            <div class="col-2">12,123</div>
-        </div>
-
-        <div class="row bg-white padding-10 m-b-10 rounded">
-            <div class="col-2">115/11/2015</div>
-            <div class="col">Top Up</div>
-            <div class="col-2 text-success">1,234</div>
-            <div class="col-2"></div>
-            <div class="col-2">14,246</div>
-        </div>
-    </div>
-    <div class="col-3 m-l-15">
-        <wallet-component></wallet-component>
-        <div class="row m-t-20">
-            <div class="col">
-                <div class="row m-b-10">
-                    <div class="col">
-                        <div class="font-head fs-10 all-caps">Top Up Records</div>
-                    </div>
-                </div>
-
-                <!-- start top up records  -->
-                <div class="row m-b-10">
-                    <div class="col bg-white m-l-15 m-r-15 padding-15 rounded">
-                        <div class="row m-l-5">
-                            <div class="col">
-                                <div class="row">
-                                    <div class="col">
-                                        <div class="text-master fs-11">Payment Method <span class="b-success b-a text-success fs-10 rounded p-l-5 p-r-5 m-l-5 bg-white">Success</span></div>
-                                    </div>
-                                    <div class="col-auto">
-                                        <p>$123,123</p>
-                                    </div>
-                                </div>
-                                <div class="row">
-                                    <div class="col">
-                                        <span class="fs-10">12-03-2021</span>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="row m-b-10">
-                    <div class="col bg-white m-l-15 m-r-15 padding-15 rounded">
-                        <div class="row m-l-5">
-                            <div class="col">
-                                <div class="row">
-                                    <div class="col">
-                                        <div class="text-master fs-11">Payment Method <span class="b-danger b-a text-danger fs-10 rounded p-l-5 p-r-5 m-l-5 bg-white">Failed</span></div>
-                                    </div>
-                                    <div class="col-auto">
-                                        <p>$123,123</p>
-                                    </div>
-                                </div>
-                                <div class="row">
-                                    <div class="col">
-                                        <span class="fs-10">12-03-2021</span>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="row m-b-10">
-                    <div class="col bg-white m-l-15 m-r-15 padding-15 rounded">
-                        <div class="row m-l-5">
-                            <div class="col">
-                                <div class="row">
-                                    <div class="col">
-                                        <div class="text-master fs-11">Payment Method <span class="b-info b-a text-info fs-10 rounded p-l-5 p-r-5 m-l-5 bg-white">Processing</span></div>
-                                    </div>
-                                    <div class="col-auto">
-                                        <p>$123,123</p>
-                                    </div>
-                                </div>
-                                <div class="row">
-                                    <div class="col">
-                                        <span class="fs-10">12-03-2021</span>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <wallet-top-up-history-component></wallet-top-up-history-component>
-            </div>
-        </div>
+    <div class="col">
+        <customer-transaction-section-component :id="{{$id}}"></customer-transaction-section-component>
     </div>
 </div>
\ No newline at end of file
diff --git a/routes/web.php b/routes/web.php
index b9afa596..1c958616 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -77,8 +77,8 @@ Route::get('/transfer/merge/{marking}', function ($marking) {
 
 Route::get('/online_payment/redirect', 'Billplz\CallbackBillplzController@callback')->name('online_payment.redirect');
 
-Route::get('/wallet/{marking}/details', function () {
-    return view('pages.wallet.index');
+Route::get('/wallet/{id}/details', function ($id) {
+    return view('pages.wallet.index', ['id' => $id]);
 })->name('wallet.details');
 
 Route::get('/wallets', function () {