diff --git a/resources/assets/vue/components/wallets/elements/WalletTopUpHistoryComponent.vue b/resources/assets/vue/components/wallets/elements/WalletTopUpHistoryComponent.vue
index 64250573..2f58caab 100644
--- a/resources/assets/vue/components/wallets/elements/WalletTopUpHistoryComponent.vue
+++ b/resources/assets/vue/components/wallets/elements/WalletTopUpHistoryComponent.vue
@@ -22,6 +22,15 @@
                                             </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="font-heading fs-8 muted all-caps">Customer Marking</div>
+                                            <div class="font-heading fs-10 bold">
+                                                Marking & Link
+                                            </div>
+                                        </div>
+                                    </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> -->
@@ -29,7 +38,7 @@
                                         </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" v-if="item.status !== 3 && item.status !== 2" :class="[{'bg-master-light': 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>
diff --git a/resources/assets/vue/components/wallets/elements/WalletsComponent.vue b/resources/assets/vue/components/wallets/elements/WalletsComponent.vue
new file mode 100644
index 00000000..8f0daa9c
--- /dev/null
+++ b/resources/assets/vue/components/wallets/elements/WalletsComponent.vue
@@ -0,0 +1,178 @@
+<template>
+    <div class="row">
+        <div class="col">
+            <div class="row">
+                <div class="col-12 p-0" style="width: 500px; height:350px">
+                    <canvas id="wallets-chart"></canvas>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col">
+                    <div class="card no-border bg-success text-white widget-loader-bar m-b-10">
+                        <div class="container-xs-height full-height">
+                            <div class="row-xs-height">
+                                <div class="col-xs-height col-top">
+                                    <div class="card-header  top-left top-right">
+                                        <div class="card-title">
+                                            <span class="font-montserrat fs-11 all-caps">Total Amount</span>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="row-xs-height">
+                                <div class="col-xs-height col-top">
+                                    <div class="p-l-20 p-t-50 p-b-40 p-r-20">
+                                        <h3 class="no-margin p-b-5 text-white">MYR 500,123</h3>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="row-xs-height">
+                                <div class="col-xs-height col-bottom">
+                                    <div class="progress progress-small m-b-0">
+                                        <div class="progress-bar progress-bar-success" style="width: 0"></div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="col">
+                    <div class="card no-border bg-success-light text-white widget-loader-bar m-b-10">
+                        <div class="container-xs-height full-height">
+                            <div class="row-xs-height">
+                                <div class="col-xs-height col-top">
+                                    <div class="card-header  top-left top-right">
+                                        <div class="card-title">
+                                            <span class="font-montserrat fs-11 all-caps">Total Incoming Amount</span>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="row-xs-height">
+                                <div class="col-xs-height col-top">
+                                    <div class="p-l-20 p-t-50 p-b-40 p-r-20">
+                                        <h3 class="no-margin p-b-5 text-white">MYR 500,123</h3>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="row-xs-height">
+                                <div class="col-xs-height col-bottom">
+                                    <div class="progress progress-small m-b-0">
+                                        <div class="progress-bar progress-bar-success" style="width: 0"></div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="col">
+                    <div class="card no-border bg-warning widget-loader-bar m-b-10">
+                        <div class="container-xs-height full-height">
+                            <div class="row-xs-height">
+                                <div class="col-xs-height col-top">
+                                    <div class="card-header  top-left top-right">
+                                        <div class="card-title">
+                                            <span class="font-montserrat fs-11 all-caps">Total Outgoing Amount</span>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="row-xs-height">
+                                <div class="col-xs-height col-top">
+                                    <div class="p-l-20 p-t-50 p-b-40 p-r-20">
+                                        <h3 class="no-margin p-b-5">MYR 500,123</h3>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="row-xs-height">
+                                <div class="col-xs-height col-bottom">
+                                    <div class="progress progress-small m-b-0">
+                                        <div class="progress-bar progress-bar-primary" style="width: 0"></div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="col">
+                    <div class="card no-border bg-danger text-white widget-loader-bar m-b-10">
+                        <div class="container-xs-height full-height">
+                            <div class="row-xs-height">
+                                <div class="col-xs-height col-top">
+                                    <div class="card-header  top-left top-right">
+                                        <div class="card-title">
+                                            <span class="font-montserrat fs-11 all-caps">Total Floating Amount</span>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="row-xs-height">
+                                <div class="col-xs-height col-top">
+                                    <div class="p-l-20 p-t-50 p-b-40 p-r-20">
+                                        <h3 class="no-margin p-b-5 text-white">MYR 500,123</h3>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="row-xs-height">
+                                <div class="col-xs-height col-bottom">
+                                    <div class="progress progress-small m-b-0">
+                                        <div class="progress-bar progress-bar-primary" style="width: 0"></div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import componentHandler from '../../../general/mixins/componentHandler';
+    import Chart from 'chart.js';
+
+    export default {
+        watch: {
+            wallet_details: function() {
+                const ctx = document.getElementById('wallets-chart');
+                var xValues = [100,200,300,400,500,600,700,800,900,1000];
+                new Chart(ctx, {
+                    type: "line",
+                    data: {
+                        labels: 'ndcs',
+                        datasets: [{
+                            data: [860,1140,1060,1060,1070,1110,1330,2210,7830,2478],
+                            borderColor: "red",
+                            fill: false
+                        },
+                        {
+                            data: [1600,1700,1700,1900,2000,2700,4000,5000,6000,7000],
+                            borderColor: "green",
+                            fill: false
+                        },
+                        {
+                            data: [300,700,2000,5000,6000,4000,2000,1000,200,100],
+                            borderColor: "blue",
+                            fill: false
+                        }]
+                    },
+                    options: {
+                        responsive: true,
+                        plugins: {
+                            legend: {
+                                position: 'top',
+                            },
+                            title: {
+                                display: true,
+                                text: 'Chart.js Line Chart'
+                            }
+                        }
+                    },
+                });
+            }
+        },
+        mixins: [componentHandler]
+    }
+
+</script>
diff --git a/resources/views/pages/wallet/transactions.blade.php b/resources/views/pages/wallet/transactions.blade.php
index 96c7ecc5..eec36547 100644
--- a/resources/views/pages/wallet/transactions.blade.php
+++ b/resources/views/pages/wallet/transactions.blade.php
@@ -106,7 +106,6 @@
                         </div>
                     </div>
                 </div>
-
                 <wallet-top-up-history-component></wallet-top-up-history-component>
             </div>
         </div>
diff --git a/resources/views/pages/wallet/wallets.blade.php b/resources/views/pages/wallet/wallets.blade.php
new file mode 100644
index 00000000..1a876a4f
--- /dev/null
+++ b/resources/views/pages/wallet/wallets.blade.php
@@ -0,0 +1,54 @@
+
+@extends('layouts.base_portal')
+@section('inner_content')
+    <div class="row">
+        <div class="col">
+            <wallets-component></wallets-component>
+            <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">
+                    <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>
+                            <wallet-top-up-history-component></wallet-top-up-history-component>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+@endsection
\ No newline at end of file
diff --git a/resources/views/partials/header.blade.php b/resources/views/partials/header.blade.php
index c20312df..06dcccb9 100644
--- a/resources/views/partials/header.blade.php
+++ b/resources/views/partials/header.blade.php
@@ -51,6 +51,11 @@
                                             <div class="text-white all-caps fs-12">customers</div>
                                         </a>
                                     </div>
+                                    <div class="col-auto p-r-20"  v-if="$store.getters.isAdmin">
+                                        <a href="{{route('wallet.wallets')}}">
+                                            <div class="text-white all-caps fs-12">Wallets</div>
+                                        </a>
+                                    </div>
                                     <div v-if="$store.getters.isCustomer" class="col-auto p-r-20">
                                         <a href="{{route('banks')}}"><div class="text-white all-caps fs-12">Bank Accounts</div></a>
                                     </div>
diff --git a/routes/web.php b/routes/web.php
index a48b26d2..0f730893 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -75,13 +75,16 @@ Route::get('/transfer/merge/{marking}', function ($marking) {
     return view('pages.bookings.merge', ['marking' => $marking]);
 })->name('booking.merge');
 
-Route::get('/wallet-transactions', function () {
 Route::get('/online_payment/redirect', 'Billplz\CallbackBillplzController@callback')->name('online_payment.redirect');
 
 Route::get('/wallet/{marking}/details', function () {
     return view('pages.wallet.index');
 })->name('wallet.details');
 
+Route::get('/wallets', function () {
+    return view('pages.wallet.wallets');
+})->name('wallet.wallets');
+
 Route::get('/test', function(){
 
 //    Auth::login(User::findOrFail(1));