diff --git a/resources/assets/images/wallet_announcement.png b/resources/assets/images/wallet_announcement.png
new file mode 100644
index 00000000..bb03ce79
Binary files /dev/null and b/resources/assets/images/wallet_announcement.png differ
diff --git a/resources/assets/images/wallet_announcement_2.png b/resources/assets/images/wallet_announcement_2.png
new file mode 100644
index 00000000..79c6a32f
Binary files /dev/null and b/resources/assets/images/wallet_announcement_2.png differ
diff --git a/resources/assets/vue/components/bookings/forms/BookingFormComponent.vue b/resources/assets/vue/components/bookings/forms/BookingFormComponent.vue
index 408fbd58..ed8113a9 100644
--- a/resources/assets/vue/components/bookings/forms/BookingFormComponent.vue
+++ b/resources/assets/vue/components/bookings/forms/BookingFormComponent.vue
@@ -41,9 +41,15 @@
                                                         </div>
                                                     </div>
                                                     <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 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-xs b-rad-none padding-15 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}}
+                                                                <span class="absolute" style="right: -15px;top: -15px;width: 40px;" v-if="index !==0">
+                                                                    <img src="https://icons.iconarchive.com/icons/custom-icon-design/pretty-office-11/256/new-icon.png" class="w-100">
+                                                                </span>
+                                                            </div>
                                                         </div>
+                                                        <div class="col no-padding m-b-10"></div>
                                                     </div>
                                                     <div class="row" v-if="data.services.length > 3">
                                                         <div class="col-8">
@@ -102,8 +108,8 @@
                                                     </div>
                                                     <div class="row m-b-10">
                                                         <div class="col">
-                                                            <div class="btn btn-xs b-rad-none p-l-25 p-r-25 p-t-5 p-b-5" :class="[{'btn-success': paymentType === 1}, {'btn-default': paymentType !== 1}, {'bg-master-lighter': paymentType !== 1}]" @click="paymentType = 1">Full Payment</div>
-                                                            <div class="btn btn-xs  b-rad-none p-l-25 p-r-25 m-r-5 p-t-5 p-b-5" :class="[{'btn-success': paymentType === 0}, {'btn-default': paymentType !== 0}, {'bg-master-lighter': paymentType !== 0}]" @click="paymentType = 0">Deposit</div>
+                                                            <div class="btn btn-xs b-rad-none p-l-25 p-r-25 p-t-5 p-b-5" :class="[{'btn-complete': paymentType === 1}, {'btn-default': paymentType !== 1}, {'bg-master-lighter': paymentType !== 1}]" @click="paymentType = 1">Full Payment</div>
+                                                            <div class="btn btn-xs  b-rad-none p-l-25 p-r-25 m-r-5 p-t-5 p-b-5" :class="[{'btn-complete': paymentType === 0}, {'btn-default': paymentType !== 0}, {'bg-master-lighter': paymentType !== 0}]" @click="paymentType = 0">Deposit</div>
                                                         </div>
                                                     </div>
                                                     <div class="row" v-if="paymentType === 0">
diff --git a/resources/assets/vue/components/wallets/elements/WalletComponent.vue b/resources/assets/vue/components/wallets/elements/WalletComponent.vue
index bfc0153e..1229b2e7 100644
--- a/resources/assets/vue/components/wallets/elements/WalletComponent.vue
+++ b/resources/assets/vue/components/wallets/elements/WalletComponent.vue
@@ -1,18 +1,30 @@
 <template>
     <div class="row">
         <div class="col">
-            <div class="row padding-15">
+            <div class="row m-l-0 m-r-0 m-b-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 class="row">
+                        <div class="col">
+                            <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>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col">
+                            <img class="m-b-10 w-100" src="/images/wallet_announcement_2.png" />
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col">
+                            <p>Transferring your payments by using the wallet just got a lot easier.</p>
+                            <p>This release can:</p>
+                            <p class="no-margin">1. Top up once, pay for multiple transfers</p>
+                            <p class="no-margin">2. Get your refund back to your wallet</p>
+                            <p class="no-margin">3. Get a better exchange rate.</p>
+                        </div>
                     </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">