diff --git a/app/Http/Resources/TransactionResource.php b/app/Http/Resources/TransactionResource.php
index 30ba223c..e35dcc36 100644
--- a/app/Http/Resources/TransactionResource.php
+++ b/app/Http/Resources/TransactionResource.php
@@ -30,6 +30,7 @@ class TransactionResource extends JsonResource
             'payment_method' => (float) $this->payment_method,
             'recipient_bank_account' => new BankResource($booking->bank),
             'issuer_name' => $this->issuerCompany->name,
+            'issuer_id' => $this->issuerCompany->id,
             'amount' => (double) $this->amount,
             'original_amount' => (double) $this->original_amount,
             'currency' => new CurrencyResource($this->currency),
diff --git a/resources/assets/vue/components/bookings/elements/TransactionGroupComponent.vue b/resources/assets/vue/components/bookings/elements/TransactionGroupComponent.vue
index 515e56aa..bad56836 100644
--- a/resources/assets/vue/components/bookings/elements/TransactionGroupComponent.vue
+++ b/resources/assets/vue/components/bookings/elements/TransactionGroupComponent.vue
@@ -34,10 +34,16 @@
                         <div class="col-auto">
                             <div class="row parentContainer">
                                 <div class="col p-l-0">
-                                    <button class="btn btn-xs btn-default bg-danger b-rad-none no-border requestModal" data-type="approveDocument">
+                                    <button class="btn btn-xs btn-default bg-warning b-rad-none no-border requestModal" data-type="editTransactionGroup">
+                                        <i class="fa fa-pencil text-white"></i>
+                                    </button>
+                                    <modal-component small type="editTransactionGroup">
+                                        <edit-transaction-group-form-component :section="section" :currency_rate="item.currency_rate" :supplier_id ="data.transactions[0].issuer_id"></edit-transaction-group-form-component>
+                                    </modal-component>
+                                    <button class="btn btn-xs btn-default bg-danger b-rad-none no-border requestModal" data-type="deleteTransactionGroup">
                                         <i class="fa fa-times text-white"></i>
                                     </button>
-                                    <modal-component small type="approveDocument">
+                                    <modal-component small type="deleteTransactionGroup">
                                         <div class="row">
                                             <div class="col text-center">
                                                 <div class="row">
diff --git a/resources/assets/vue/components/bookings/forms/EditTransactionGroupFormComponent.vue b/resources/assets/vue/components/bookings/forms/EditTransactionGroupFormComponent.vue
new file mode 100644
index 00000000..a2094db9
--- /dev/null
+++ b/resources/assets/vue/components/bookings/forms/EditTransactionGroupFormComponent.vue
@@ -0,0 +1,128 @@
+<template>
+    <div class="row">
+        <div class="col">
+            <div class="row">
+                <div class="col">
+                    <div class="row m-b-10">
+                        <div class="col">
+                            <h5 class="all-caps m-b-5 bold no-margin">Edit Transaction Group</h5>
+                        </div>
+                    </div>
+                    <div class="row m-b-5 animate__animated animate__fadeInUpBig animate__fast" v-if="error">
+                        <div class="col">
+                            <small class="bold fs-10 text-danger">{{error}}</small>
+                        </div>
+                    </div>
+                    <div class="row m-b-10">
+                        <div class="col">
+                            <div class="bg-white bg-hover-complete h-100 btn btn-xs btn-outline-none btn-block text-left b-rad-none p-t-0 p-b-0 p-l-15 p-r-15" @click="selectedSupplier.status = !selectedSupplier.status">
+                                <div class="row h-100">
+                                    <div class="col fs-9 d-flex align-items-center flex-column" style="padding-top: 7px; padding-bottom: 4px;">
+                                        <label class="all-caps w-100 m-b-0" style="font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500;">Supplier</label>
+                                        <span class="w-100 fs-14">{{selectedSupplier.name}}</span>
+                                    </div>
+                                    <div class="col-auto b-l b-grey">
+                                        <div class="row h-100 align-items-center">
+                                            <div class="col">
+                                                <i class="fa" :class="[{'fa-angle-down': !selectedSupplier.status}, {'fa-angle-up': selectedSupplier.status}]"></i>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="relative w-100">
+                                <div class="absolute w-100 b-l b-b b-r b-grey" :class="[{'hide': !selectedSupplier.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="supplier in suppliers"  v-bind:key="supplier.id" :data="supplier">
+                                                <div class="col b-b b-grey p-t-10 p-b-10 pointer hover-t-10 p-b-10" :class="[{'bg-primary-light': selectedSupplier.id === supplier.id}, {'text-white': selectedSupplier.id === supplier.id}, {'hover-primary': selectedSupplier.id !== supplier.id}, {'pointer': selectedSupplier.id !== supplier.id}]" @click="updateSupplier(supplier)">
+                                                    <div class="row align-items-center justify-content-center">
+                                                        <div class="col">
+                                                            <div class="font-heading fs-10">{{supplier.name}}</div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="row m-b-10">
+                        <div class="col">
+                            <validation-wrapper-component :validator="$v.rate">
+                                <label class="all-caps">Purchase Rate</label>
+                                <input type="text" class="form-control" v-model.lazy="rate" v-money="exchangeRate">
+                            </validation-wrapper-component>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col p-r-5">
+                            <div class="btn btn-sm btn-default bg-master-lightest btn-block b-rad-none" data-dismiss="modal">Cancel</div>
+                        </div>
+                        <div class="col p-l-5">
+                            <div class="btn btn-sm btn-success btn-block b-rad-none" @click="submit(route('api.company.team.create'), 'post', section, true, false)">Update</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+    import { required } from "vuelidate/lib/validators";
+    import ModalFormHandler from '../../../general/mixins/modalFormHandler';
+
+    export default {
+        props: {
+            currency_rate:{
+                type: Number,
+                required: true
+            },
+            supplier_id: {
+                type: Number,
+                required: true
+            }
+        },
+        data(){
+            return {
+                error: '',
+                suppliers: [],
+                selectedSupplier: {
+                    id: '',
+                    name: '',
+                    status: false
+                },
+                email: '',
+                rate: (Math.round((this.currency_rate + Number.EPSILON) * 10000) / 10000).toFixed(5)
+            }
+        },
+        created(){
+            this.submit(route('api.company.list')  + '?filters=' + JSON.stringify({'business_type': 3, 'status_in': [2, 0]}), 'get', 'pendingOrdersSection', false, false)
+        },
+        validations: {
+            email: { },
+            rate: { },
+        },
+        methods: {
+            successHandler(response){
+                var selected_supplier_id = this.supplier_id;
+                var selected_supplier = null; 
+                this.suppliers = response.payload.data;
+
+                this.suppliers.forEach(function(supplier) {
+                    supplier.id === selected_supplier_id ? selected_supplier = supplier : ''; 
+                });
+
+                this.selectedSupplier = selected_supplier;
+                this.selectedSupplier.status = false;
+            },
+            updateSupplier(supplier){
+                this.selectedSupplier = supplier;
+                this.selectedSupplier.status = false;
+            },
+        },
+        mixins: [ModalFormHandler]
+    }
+</script>