diff --git a/resources/assets/images/10107.jpg b/resources/assets/images/10107.jpg
new file mode 100644
index 00000000..cffb1f8f
Binary files /dev/null and b/resources/assets/images/10107.jpg differ
diff --git a/resources/assets/images/hot.png b/resources/assets/images/hot.png
new file mode 100644
index 00000000..46520b44
Binary files /dev/null and b/resources/assets/images/hot.png differ
diff --git a/resources/assets/images/new-icon.png b/resources/assets/images/new-icon.png
new file mode 100644
index 00000000..4131f31e
Binary files /dev/null and b/resources/assets/images/new-icon.png differ
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/sass/_responsive.scss b/resources/assets/sass/_responsive.scss
index 622c734a..fa7bb2f7 100644
--- a/resources/assets/sass/_responsive.scss
+++ b/resources/assets/sass/_responsive.scss
@@ -1184,4 +1184,8 @@
   border: 1px solid #d9d9d9;
   border-top: none;
   pointer-events: none;
+}
+
+.top-0 {
+  top: 0;
 }
\ No newline at end of file
diff --git a/resources/assets/sass/modules/_typography.scss b/resources/assets/sass/modules/_typography.scss
index 6e9934dc..605b8e7c 100644
--- a/resources/assets/sass/modules/_typography.scss
+++ b/resources/assets/sass/modules/_typography.scss
@@ -439,6 +439,10 @@ hr{
     background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 75%);
     background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 75%);
 }
+.gradient-white {
+    background: -webkit-linear-gradient(top, rgba(255,255,255, 0.5) 0%, rgba(255,255,255, 0.9) 75%);
+    background: linear-gradient(to bottom, rgba(255,255,255, 0.5) 0%, rgba(255,255,255, 0.9) 75%);
+}
 
 /* Other Colors
 ------------------------------------
diff --git a/resources/assets/vue/components/bookings/forms/BookingFormComponent.vue b/resources/assets/vue/components/bookings/forms/BookingFormComponent.vue
index 65b355f8..6b285afd 100644
--- a/resources/assets/vue/components/bookings/forms/BookingFormComponent.vue
+++ b/resources/assets/vue/components/bookings/forms/BookingFormComponent.vue
@@ -26,7 +26,7 @@
                                 <div class="col">
                                     <div class="row p-t-5 p-b-20">
                                         <div class="col">
-                                            <div class="row m-b-20" v-if="data.services.length > 1">
+                                            <div class="row" v-if="data.services.length > 1">
                                                 <div class="col">
                                                     <div class="row m-l-0 m-r-0 m-b-5">
                                                         <div class="col-auto p-l-0">
@@ -40,7 +40,17 @@
                                                             </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-xs b-rad-none padding-25 btn-block" :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="/images/new-icon.png" class="w-100">
+                                                                </span>
+                                                            </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 +72,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">
@@ -81,6 +91,12 @@
                                                     </div>
                                                 </div>
                                             </div>
+                                            <div class="row m-b-20">
+                                                <div class="col">
+                                                    <p class="no-margin" v-if="serviceType.id === 1">Recipient will receive the transfer on the <span class="text-success bold">next working day</span>. Check out on another three-day transfer option to get a better rate!</p>
+                                                    <p class="no-margin" v-if="serviceType.id === 3">Enjoy a <span class="bold text-underline">better rate</span> with this option! The recipient will receive the transfer after <span class="text-success bold">three working days</span>.</p>
+                                                </div>
+                                            </div>
                                             <div class="row">
                                                 <div class="col">
                                                     <div class="row m-l-0 m-r-0 m-b-5">
@@ -97,8 +113,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/bookings/forms/BookingPaymentQuotationComponent.vue b/resources/assets/vue/components/bookings/forms/BookingPaymentQuotationComponent.vue
index 4c859f8e..d43eb47b 100644
--- a/resources/assets/vue/components/bookings/forms/BookingPaymentQuotationComponent.vue
+++ b/resources/assets/vue/components/bookings/forms/BookingPaymentQuotationComponent.vue
@@ -235,7 +235,9 @@
                                                                      style=" fill:#000000;"><defs><linearGradient x1="47.41556" y1="114.21875" x2="47.41556" y2="136.68625" gradientUnits="userSpaceOnUse" id="color-1_DGsE9caX0XGr_gr1"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="86" y1="21.78488" x2="86" y2="154.10125" gradientUnits="userSpaceOnUse" id="color-2_DGsE9caX0XGr_gr2"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="111.53125" y1="27.50388" x2="111.53125" y2="49.92569" gradientUnits="userSpaceOnUse" id="color-3_DGsE9caX0XGr_gr3"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="63.15625" y1="54.32244" x2="63.15625" y2="64.45969" gradientUnits="userSpaceOnUse" id="color-4_DGsE9caX0XGr_gr4"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient></defs><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"></path><g id="Layer_2"><path d="M55.9,134.375h-15.5875c-1.6125,0 -2.6875,-1.075 -2.6875,-2.6875v-15.5875c0,-1.075 1.34375,-1.88125 2.41875,-1.075l16.93125,16.93125c0.80625,1.075 0,2.41875 -1.075,2.41875z" fill="url(#color-1_DGsE9caX0XGr_gr1)"></path><path d="M150.5,96.75v-37.625c0,-5.9125 -4.8375,-10.75 -10.75,-10.75h-7.525c1.34375,-2.95625 2.15,-6.18125 2.15,-9.40625c0,-12.63125 -10.2125,-22.84375 -22.84375,-22.84375c-12.63125,0 -22.84375,10.2125 -22.84375,22.84375c0,3.225 0.80625,6.45 2.15,9.40625h-12.9c-4.03125,-3.225 -9.1375,-5.375 -14.78125,-5.375c-5.64375,0 -10.75,2.15 -14.78125,5.375h-21.5c-2.95625,0 -5.64375,1.34375 -7.79375,3.225c-1.88125,2.15 -2.95625,4.8375 -2.95625,7.525v0v83.3125c0,7.525 5.9125,13.4375 13.4375,13.4375h107.5c7.525,0 13.4375,-5.9125 13.4375,-13.4375v-18.8125c2.95625,0 5.375,-2.41875 5.375,-5.375v-16.125c0,-2.95625 -2.41875,-5.375 -5.375,-5.375zM111.53125,21.5c9.675,0 17.46875,7.79375 17.46875,17.46875c0,9.675 -7.79375,17.46875 -17.46875,17.46875c-9.675,0 -17.46875,-7.79375 -17.46875,-17.46875c0,-9.675 7.79375,-17.46875 17.46875,-17.46875zM111.53125,61.8125c6.9875,0 13.16875,-3.225 17.46875,-8.0625h10.75c2.95625,0 5.375,2.41875 5.375,5.375v8.0625c-2.15,-1.6125 -5.10625,-2.6875 -8.0625,-2.6875h-51.0625c-0.26875,-4.03125 -1.34375,-7.525 -3.49375,-10.75h11.55625c4.3,4.8375 10.48125,8.0625 17.46875,8.0625zM80.625,64.5h-34.9375c0.80625,-9.1375 8.33125,-16.125 17.46875,-16.125c9.1375,0 16.6625,6.9875 17.46875,16.125zM23.1125,55.3625c0.80625,-1.075 2.15,-1.6125 3.7625,-1.6125h16.93125c-1.88125,3.225 -3.225,6.71875 -3.49375,10.75h-13.16875c-2.95625,0 -5.375,-2.15 -5.64375,-5.10625c0,-1.34375 0.5375,-2.95625 1.6125,-4.03125zM145.125,142.4375c0,4.56875 -3.49375,8.0625 -8.0625,8.0625h-107.5c-4.56875,0 -8.0625,-3.49375 -8.0625,-8.0625v-74.175c1.6125,1.075 3.7625,1.6125 5.9125,1.6125h13.16875h42.73125h53.75c4.56875,0 8.0625,3.49375 8.0625,8.0625v18.8125h-5.375v-13.4375c0,-4.56875 -3.49375,-8.0625 -8.0625,-8.0625h-96.75c-4.56875,0 -8.0625,3.49375 -8.0625,8.0625v53.75c0,4.56875 3.49375,8.0625 8.0625,8.0625h96.75c4.56875,0 8.0625,-3.49375 8.0625,-8.0625v-13.4375h5.375zM120.9375,96.75c-7.525,0 -13.4375,5.9125 -13.4375,13.4375c0,7.525 5.9125,13.4375 13.4375,13.4375h13.4375v13.4375c0,1.6125 -1.075,2.6875 -2.6875,2.6875h-96.75c-1.6125,0 -2.6875,-1.075 -2.6875,-2.6875v-53.75c0,-1.6125 1.075,-2.6875 2.6875,-2.6875h96.75c1.6125,0 2.6875,1.075 2.6875,2.6875v13.4375zM129,110.1875c0,4.56875 -3.49375,8.0625 -8.0625,8.0625c-4.56875,0 -8.0625,-3.49375 -8.0625,-8.0625c0,-4.56875 3.49375,-8.0625 8.0625,-8.0625c4.56875,0 8.0625,3.49375 8.0625,8.0625zM131.6875,118.25c1.6125,-2.15 2.6875,-5.10625 2.6875,-8.0625c0,-2.95625 -1.075,-5.9125 -2.6875,-8.0625h18.8125v16.125z" fill="url(#color-2_DGsE9caX0XGr_gr2)"></path><circle cx="41.5" cy="14.5" transform="scale(2.6875,2.6875)" r="4.5" fill="url(#color-3_DGsE9caX0XGr_gr3)"></circle><path d="M74.98125,64.5c-0.80625,-5.9125 -5.64375,-10.75 -11.825,-10.75c-6.18125,0 -11.2875,4.8375 -11.825,10.75z" fill="url(#color-4_DGsE9caX0XGr_gr4)"></path></g></g></svg>
                                                             </div>
                                                             <p class="no-margin bold all-caps">Wallet Credit</p>
+                                                            <p class="no-margin bold text-primary fs-10">(Better Rate)</p>
                                                         </div>
+                                                        <span class="absolute" style="right: 5px;top: 5px;width: 25px;"><img src="/images/hot.png" class="w-100"></span>
                                                     </div>
                                                 </div>
                                             </div>
diff --git a/resources/assets/vue/components/wallets/elements/WalletComponent.vue b/resources/assets/vue/components/wallets/elements/WalletComponent.vue
index a6b0dec6..7d3e53e0 100644
--- a/resources/assets/vue/components/wallets/elements/WalletComponent.vue
+++ b/resources/assets/vue/components/wallets/elements/WalletComponent.vue
@@ -1,6 +1,50 @@
 <template>
     <div class="row">
         <div class="col">
+            <div class="row m-l-0 m-r-0 m-b-15">
+                <div class="col bg-white padding-15">
+                    <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/10107.jpg" />
+                        </div>
+                    </div>
+                    <div class="row" :class="[{'h-25': !expanded}, {'overflow-hidden': !expanded}]">
+                        <div class="col position-relative">
+                            <div class="row">
+                                <div class="col">
+                                    <p>Transferring your payments by using the wallet just got a lot easier.</p>
+                                    <div class="row">
+                                        <div class="col" v-if="expanded">
+                                            <p class="no-margin">This release you 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>
+                                </div>
+                            </div>
+                            <div class="row position-absolute top-0 w-100 gradient-white p-t-15 p-b-15" v-if="!expanded">
+                                <div class="col">
+                                    <div class="m-b-0 m-t-5 d-flex justify-content-center cursor" @click="expanded = !expanded">Show more <i class="fa fa-angle-down fs-20 bold m-l-10"></i></div>
+                                </div>
+                            </div>
+                            <div class="row" v-if="expanded">
+                                <div class="col">
+                                    <div class="m-b-0 m-t-5 d-flex justify-content-center cursor" @click="expanded = !expanded">Show less <i class="fa fa-angle-up fs-20 bold m-l-10"></i></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
             <div class="row" v-if="!reload">
                 <div class="col">
                     <div class="bg-complete" :class="[{'padding-25': !mini}, {'padding-15': mini}]">
@@ -56,6 +100,7 @@
         data(){
             return {
                 reload: false,
+                expanded: false
             }
         },
         mixins: [componentHandler],