diff --git a/app/Classes/Modules/Vouchers/DataTransferObjects/CreateVoucherifyOrderObject.php b/app/Classes/Modules/Vouchers/DataTransferObjects/CreateVoucherifyOrderObject.php
index 92dfd592..c483d45e 100644
--- a/app/Classes/Modules/Vouchers/DataTransferObjects/CreateVoucherifyOrderObject.php
+++ b/app/Classes/Modules/Vouchers/DataTransferObjects/CreateVoucherifyOrderObject.php
@@ -14,6 +14,9 @@ class CreateVoucherifyOrderObject implements DataTransferObject
     /** @var int */
     private $companyId;
 
+    /** @var int */
+    private $transactionId;
+
     /** @var float */
     private $amount;
 
@@ -27,14 +30,16 @@ class CreateVoucherifyOrderObject implements DataTransferObject
      * CreateVoucherifyOrderObject constructor.
      * @param User $employee
      * @param int $companyId
+     * @param int $transactionId
      * @param float $amount
      * @param bool $isNoVoucher
      * @param bool $isTopUpWallet
      */
-    public function __construct(User $employee, int $companyId, float $amount, bool $isNoVoucher, bool $isTopUpWallet)
+    public function __construct(User $employee, int $companyId, int $transactionId, float $amount, bool $isNoVoucher, bool $isTopUpWallet)
     {
         $this->employee = $employee;
         $this->companyId = $companyId;
+        $this->transactionId = $transactionId;
         $this->amount = $amount;
         $this->isNoVoucher = $isNoVoucher;
         $this->isTopUpWallet = $isTopUpWallet;
@@ -48,6 +53,14 @@ class CreateVoucherifyOrderObject implements DataTransferObject
         return $this->companyId;
     }
 
+    /**
+     * @return int
+     */
+    public function getTransactionId(): int
+    {
+        return $this->transactionId;
+    }
+
     /**
      * @return float
      */
diff --git a/app/Classes/Modules/Vouchers/DataTransferObjects/RedeemVoucherifyVoucherObject.php b/app/Classes/Modules/Vouchers/DataTransferObjects/RedeemVoucherifyVoucherObject.php
index 01f5431c..325df2f4 100644
--- a/app/Classes/Modules/Vouchers/DataTransferObjects/RedeemVoucherifyVoucherObject.php
+++ b/app/Classes/Modules/Vouchers/DataTransferObjects/RedeemVoucherifyVoucherObject.php
@@ -9,6 +9,9 @@ class RedeemVoucherifyVoucherObject implements DataTransferObject
     /** @var int */
     private $companyId;
 
+    /** @var int */
+    private $transactionId;
+
     /** @var string */
     private $promoCode;
 
@@ -21,13 +24,15 @@ class RedeemVoucherifyVoucherObject implements DataTransferObject
     /**
      * RedeemVoucherifyVoucherObject constructor.
      * @param int $companyId
+     * @param int $transactionId
      * @param string $name
      * @param string $email
      * @param object $employee
      */
-    public function __construct(int $companyId, string $promoCode, string $amount, object $employee)
+    public function __construct(int $companyId, int $transactionId, string $promoCode, string $amount, object $employee)
     {
         $this->companyId = $companyId;
+        $this->transactionId = $transactionId;
         $this->promoCode = $promoCode;
         $this->amount = $amount;
         $this->employee = $employee;
@@ -42,6 +47,15 @@ class RedeemVoucherifyVoucherObject implements DataTransferObject
     }
 
 
+    /**
+     * @return int
+     */
+    public function getTransactionId(): int
+    {
+        return $this->transactionId;
+    }
+
+
     /**
      * @return string
      */
diff --git a/app/Classes/Modules/Vouchers/Processors/Voucherify/BookingToVoucherifyProcessor.php b/app/Classes/Modules/Vouchers/Processors/Voucherify/BookingToVoucherifyProcessor.php
index 3df08a4c..323b2eaf 100644
--- a/app/Classes/Modules/Vouchers/Processors/Voucherify/BookingToVoucherifyProcessor.php
+++ b/app/Classes/Modules/Vouchers/Processors/Voucherify/BookingToVoucherifyProcessor.php
@@ -82,7 +82,7 @@ class BookingToVoucherifyProcessor
             $voucherify_customer_id = "";
             $voucherify_order_id = "";
             if($voucherCode){
-                $redeemVoucherifyVoucherObject = new RedeemVoucherifyVoucherObject($companyId, $voucherCode, $amount, $user);
+                $redeemVoucherifyVoucherObject = new RedeemVoucherifyVoucherObject($companyId, $transaction->id, $voucherCode, $amount, $user);
                 $redeemVoucherResult = $this->redeemsVoucherifyVoucher->execute($redeemVoucherifyVoucherObject);
                 $redeemedVoucher = $redeemVoucherResult->voucher;
                 $redemptionId = $redeemVoucherResult->id;
@@ -100,7 +100,7 @@ class BookingToVoucherifyProcessor
                 $this->recordVoucherForUserInfo($user, $voucher);
             }
             else{
-                $createVoucherifyOrderObject = new CreateVoucherifyOrderObject($user, $companyId, $amount, true, $transaction->type == TransactionType::TOP_UP);
+                $createVoucherifyOrderObject = new CreateVoucherifyOrderObject($user, $companyId, $transaction->id, $amount, true, $transaction->type == TransactionType::TOP_UP);
                 $createVoucherufyOrderResult = $this->createsVoucherifyOrder->execute($createVoucherifyOrderObject);
 
                 if($createVoucherufyOrderResult && isset($createVoucherufyOrderResult->id)){
diff --git a/app/Classes/Modules/Vouchers/Services/Voucherify/CreatesVoucherifyOrder.php b/app/Classes/Modules/Vouchers/Services/Voucherify/CreatesVoucherifyOrder.php
index e5e6d404..90e5d682 100644
--- a/app/Classes/Modules/Vouchers/Services/Voucherify/CreatesVoucherifyOrder.php
+++ b/app/Classes/Modules/Vouchers/Services/Voucherify/CreatesVoucherifyOrder.php
@@ -31,6 +31,7 @@ class CreatesVoucherifyOrder
     {
         try {
             $orderObj = [
+                "source_id" => $obj->getTransactionId(),
                 "customer" => [
                     "source_id" => $obj->getEmployee()->id,
                     "name" => $obj->getEmployee()->name,
diff --git a/app/Classes/Modules/Vouchers/Services/Voucherify/RedeemsVoucherifyVoucher.php b/app/Classes/Modules/Vouchers/Services/Voucherify/RedeemsVoucherifyVoucher.php
index bd12e27f..7c44889b 100644
--- a/app/Classes/Modules/Vouchers/Services/Voucherify/RedeemsVoucherifyVoucher.php
+++ b/app/Classes/Modules/Vouchers/Services/Voucherify/RedeemsVoucherifyVoucher.php
@@ -39,6 +39,7 @@ class RedeemsVoucherifyVoucher
                     ]
                 ],
                 "order" => [
+                    "source_id" => $redeemVoucherifyVoucherObject->getTransactionId(),
                     "amount" => $redeemVoucherifyVoucherObject->getAmount() * 100  //converting it to cents
                 ]
             ]);
diff --git a/resources/assets/vue/components/bookings/elements/ListVouchers.vue b/resources/assets/vue/components/bookings/elements/AvailableVouchersComponent.vue
similarity index 90%
rename from resources/assets/vue/components/bookings/elements/ListVouchers.vue
rename to resources/assets/vue/components/bookings/elements/AvailableVouchersComponent.vue
index e59ff653..45722aaf 100644
--- a/resources/assets/vue/components/bookings/elements/ListVouchers.vue
+++ b/resources/assets/vue/components/bookings/elements/AvailableVouchersComponent.vue
@@ -1,7 +1,6 @@
 <template>
      <div class="row">
         <div class="col">
-            <loading-component style="height: 100px; top: 0;" key="1" color="success" v-show="isLoading"></loading-component>
             <div class="row text-left no-margin bg-white" v-if="!isLoading" v-for="item in vouchers" v-bind:key="item.id" >
                 <div id="select-option" name="select-option" class="col b-b b-grey p-t-10 p-b-10 pointer  p-t-10 p-b-10" @click="selectVoucher(item)">
                     <div class="row parentContainer">
@@ -28,11 +27,7 @@
         props: {
             section: {
                 type: String,
-                default: 'vouchersDropDownListSection',
-            },
-            isClicked: {
-                type: Boolean,
-                default: false,
+                default: 'availableVouchersSection',
             },
             employee: {
                 type: Object,
diff --git a/resources/assets/vue/components/bookings/elements/ListVouchersComponent.vue b/resources/assets/vue/components/bookings/elements/ListVouchersComponent.vue
new file mode 100644
index 00000000..e55e5151
--- /dev/null
+++ b/resources/assets/vue/components/bookings/elements/ListVouchersComponent.vue
@@ -0,0 +1,93 @@
+<template>
+     <div class="row">
+        <div class="col">
+            <loading-component style="height: 100px; top: 0;" key="1" color="success" v-show="isLoading"></loading-component>
+            <div class="row align-items-center justify-content-center bg-white p-t-50 p-b-50"  v-show="!isLoading && vouchers.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;">You have no vouchers</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="row text-left no-margin bg-white" v-if="!isLoading" v-for="item in vouchers" v-bind:key="item.id" >
+                <div id="select-option" name="select-option" class="col b-b b-grey p-t-10 p-b-10 pointer  p-t-10 p-b-10" @click="selectVoucher(item)">
+                    <div class="row parentContainer">
+                        <div class="col">
+                            <p>{{ item.voucher.code }}</p>
+                            <p v-if="item.voucher.type == 'AMOUNT'">RM{{ item.voucher.value/100 }} Discount</p>
+                            <p v-if="item.voucher.type == 'PERCENT'">{{ item.voucher.value }}% Discount</p>
+                        </div>
+                        <div class="col" v-if="item.voucher.end_date">
+                            Valid till {{ item.voucher.end_date }}
+                        </div>
+                        <div class="col" v-else>
+                            No expiry date
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        props: {
+            section: {
+                type: String,
+                default: 'vouchersDropDownListSection',
+            },
+            employee: {
+                type: Object,
+                default: null
+            },
+        },
+        data(){
+            return {
+                vouchers: null,
+                isLoading: true,
+            }
+        },
+        computed: {
+            pendingQueue () {
+                return this.$store.getters.isInCompleteQueue(this.section);
+            },
+        },
+        watch: {
+            pendingQueue(inComplete){
+                if(inComplete){
+                    this.fetchVouchers();
+                }
+            },
+        },
+        created(){
+            this.$store.dispatch('updateListQueue', {'name': this.section});
+        },
+        methods: {
+            fetchVouchers(){
+                this.isLoading = true;
+                if(this.employee){
+                    this.submit(route('api.voucher.user.list') + '?filters=' + JSON.stringify( { 'has_active_reward':  this.employee.id} ), 'get', this.section, false, false);
+                }
+            },
+            successHandler(response){
+                this.isLoading = false;
+                this.$store.dispatch('completeList', {'name': this.section, 'data': []});
+                this.vouchers = response.payload.data;
+            },
+            selectVoucher(item){
+                this.$emit('selected-voucher', item.voucher.code);
+                this.closeModal();
+            },
+        }
+    }
+</script>
diff --git a/resources/assets/vue/components/bookings/forms/BookingPaymentQuotationComponent.vue b/resources/assets/vue/components/bookings/forms/BookingPaymentQuotationComponent.vue
index 8171725d..6f18170c 100644
--- a/resources/assets/vue/components/bookings/forms/BookingPaymentQuotationComponent.vue
+++ b/resources/assets/vue/components/bookings/forms/BookingPaymentQuotationComponent.vue
@@ -253,7 +253,7 @@
                                             </validation-wrapper-component>
                                         </div>
                                         <!-- <modal-component id="choose-voucher-modal" class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="voucherList">
-                                            <list-vouchers :isClicked="!voucherListDropDownStatus" :employee="data.company.employee" @selected-voucher="handleSelectedVoucher"></list-vouchers>
+                                            <list-vouchers-component :employee="data.company.employee" @selected-voucher="handleSelectedVoucher"></list-vouchers-component>
                                         </modal-component> -->
                                     </div>
                                     <span class="text-primary bold text-underline m-l-5 cursor text-small fs-12" style="margin-bottom: -10px; margin-top: -5px;" @click="showApplyVoucher=!showApplyVoucher" v-show="!showApplyVoucher">Apply a voucher</span>
@@ -262,6 +262,11 @@
                                         <span class="text-danger" v-if="voucherCodeFailedReason">{{ voucherCodeFailedReason }}</span>
                                         <span class="text-success" v-if="voucherCodeFailedReason === '' && voucherValidated">Voucher applied</span>
                                     </div>
+                                    <!-- <div class="row m-l-0 m-r-0">
+                                        <div class="col">
+                                            <available-vouchers-component :employee="data.company.employee" @selected-voucher="handleSelectedVoucher"></available-vouchers-component>
+                                        </div>
+                                    </div> -->
                                     <div class="row m-t-5">
                                         <div class="col">
                                             <div class="row p-l-15 p-r-15">
@@ -600,7 +605,6 @@
                 voucherValidated: false,
                 voucherIsChecking: false,
                 showApplyVoucher: false,
-                voucherListDropDownStatus: false,
             }
         },
         validations () {
@@ -702,12 +706,8 @@
                 this.voucherValidated = false;
                 this.voucherCode = event.target.value;
             },
-            toggleDropdown() {
-                this.voucherListDropDownStatus = !this.voucherListDropDownStatus;
-            },
             handleSelectedVoucher(value){
                 this.voucherCode = value;
-                this.voucherListDropDownStatus = !this.voucherListDropDownStatus;
             }
         },
         mixins: [componentHandler],