diff --git a/resources/assets/vue/components/bookings/forms/BookingFormComponent.vue b/resources/assets/vue/components/bookings/forms/BookingFormComponent.vue
index 65b355f8..408fbd58 100644
--- a/resources/assets/vue/components/bookings/forms/BookingFormComponent.vue
+++ b/resources/assets/vue/components/bookings/forms/BookingFormComponent.vue
@@ -40,7 +40,12 @@
                                                             </div>
                                                         </div>
                                                     </div>
-                                                    <div class="row">
+                                                    <div class="row no-margin h-100" v-if="data.services.length <= 3">
+                                                        <div class="col no-padding m-b-10" :class="[{'p-l-5': index != 0}, {'p-r-5': index+1 != data.services.length}]" v-for="(service, index) in data.services" v-bind:key="service.id" >
+                                                            <div class="btn btn-md b-rad-none p-t-5 p-b-5 w-100 h-100 d-flex align-items-center justify-content-center" :class="[{'btn-success': serviceType.id === service.id}, {'bg-master-lighter': serviceType.id != service.id}]" @click="updateServiceType(service)">{{service.name}}</div>
+                                                        </div>
+                                                    </div>
+                                                    <div class="row" v-if="data.services.length > 3">
                                                         <div class="col-8">
                                                             <div class="row">
                                                                 <div class="col p-r-0">
@@ -62,7 +67,7 @@
                                                                         <div class="absolute w-100 b-l b-b b-r b-success" :class="[{'hide': !serviceType.status}]" style="top: 100%; right: 0; z-index: 1;">
                                                                             <div class="row text-left no-margin bg-white">
                                                                                 <div class="col no-padding">
-                                                                                    <div class="row no-margin"  v-for="service in data.services" v-bind:key="service.id" >
+                                                                                    <div class="row no-margin" v-for="service in data.services" v-bind:key="service.id" >
                                                                                         <div class="col b-b b-grey p-t-10 p-b-10 pointer hover-t-10 p-b-10" :class="[{'bg-success-light': serviceType.id === service.id}, {'text-white': serviceType.id === service.id}, {'hover-success': serviceType.id !== service.id}, {'pointer': serviceType.id !== service.id}]" @click="updateServiceType(service)">
                                                                                             <div class="row align-items-center justify-content-center">
                                                                                                 <div class="col">
diff --git a/resources/assets/vue/components/wallets/elements/WalletComponent.vue b/resources/assets/vue/components/wallets/elements/WalletComponent.vue
index a6b0dec6..bfc0153e 100644
--- a/resources/assets/vue/components/wallets/elements/WalletComponent.vue
+++ b/resources/assets/vue/components/wallets/elements/WalletComponent.vue
@@ -1,6 +1,20 @@
 <template>
     <div class="row">
         <div class="col">
+            <div class="row padding-15">
+                <div class="col bg-white padding-15">
+                    <div class="bold d-flex align-items-center m-b-10">
+                        <span class="rounded badge-success m-r-10 padding-5 p-l-15 p-r-15">New</span> March 1, 2020
+                    </div>
+                    <h5 class="bold fs-18">Try out our wallet to get a better rate now.</h5>
+                    <img class="m-b-10" src="http://localhost/others/cief/exchange-2.0/public/images/temp_reload_annnouncement.jpg" />
+                    <p>Transfering your payments by using the wallet just got a lot easier.</p>
+                    <p>This release can:</p>
+                    <p>1. Top up once, upload ONE bankslip and you get to pay multiple transactions</p>
+                    <p>2. Get your refund back to your wallet and easier for you to make the next payment (if applicable)</p>
+                    <p>3. Get a better exchange rate.</p>
+                </div>
+            </div>
             <div class="row" v-if="!reload">
                 <div class="col">
                     <div class="bg-complete" :class="[{'padding-25': !mini}, {'padding-15': mini}]">