diff --git a/app/Classes/Modules/Bookings/ControllersLogic/CreateBookingLogic.php b/app/Classes/Modules/Bookings/ControllersLogic/CreateBookingLogic.php
index 61f78dcb..47aa11cb 100644
--- a/app/Classes/Modules/Bookings/ControllersLogic/CreateBookingLogic.php
+++ b/app/Classes/Modules/Bookings/ControllersLogic/CreateBookingLogic.php
@@ -2,6 +2,7 @@
 
 namespace App\Classes\Modules\Bookings\ControllersLogic;
 
+use App\Classes\Exceptions\MalformedRequestException;
 use App\Classes\General\Abstracts\AbstractControllerLogic;
 
 use App\Classes\Modules\Companies\Services\FetchesCompany;
@@ -15,6 +16,7 @@ use App\Classes\Modules\Bookings\Services\GeneratesBookingMarking;
 use App\Classes\Modules\Bookings\DataTransferObjects\BookingObject;
 use App\Classes\Modules\PerfexCRM\Processors\BookingToPerfexCRMProcessor;
 use App\Classes\Modules\Milestones\Processors\CheckMilestonesForRewardProcessor;
+use App\Classes\ValueObjects\Constants\BookingAttributeNames;
 use App\Classes\ValueObjects\Constants\Milestones;
 use App\Http\Resources\BookingResource;
 
@@ -84,6 +86,21 @@ class CreateBookingLogic extends AbstractControllerLogic
      */
     public function logic(Request $request) : JsonResponse
     {
+        if (in_array($request->input('service_id'), [4, 10])) {
+            if (!$request['order_reference_no']) {
+                throw new MalformedRequestException('At least 1 order reference required.');
+            }
+
+            if ($request['order_reference_no']) {
+                foreach ($request['order_reference_no'] as $index => $reference) {
+                    if (!$reference) {
+                        $index += 1;
+                        throw new MalformedRequestException("Order reference {$index} cannot be empty");
+                    }
+                }
+            }
+        }
+
         $company = $this->fetchesCompany->execute(['id' => $request->input('company_id')]);
 
         $object = new BookingObject($request->input('service_id'), $request->input('transferable_bank_id'), $this->generatesBookingMarking->execute(), number_format( floatval(str_replace(',', '', $request->input('fix_amount'))), 5, '.', ''), $request->input('type') === 1 ? $request->input('convertible_currency_id') : 1, $request->input('convertible_currency_id'), 1);
@@ -97,6 +114,15 @@ class CreateBookingLogic extends AbstractControllerLogic
             $this->bookingToPerfexCRMProcessor->execute($booking);
         }
 
+        if (in_array($request->input('service_id'), [4, 10])) {
+            foreach ($request['order_reference_no'] as $order_reference) {
+                $booking->modelAttributes()->create([
+                    'name' => BookingAttributeNames::ORDER_REFERENCE_NO,
+                    'value' => $order_reference
+                ]);
+            }
+        }
+
         //cief todo: case study 5
         // $user = $company->employees()->first();
         // $this->checkMilestonesForRewardProcessor->execute($user, [Milestones::MILESTONE_5]);
diff --git a/app/Classes/Modules/Bookings/ControllersLogic/UpdateBookingOrderReferenceLogic.php b/app/Classes/Modules/Bookings/ControllersLogic/UpdateBookingOrderReferenceLogic.php
new file mode 100644
index 00000000..ab096c69
--- /dev/null
+++ b/app/Classes/Modules/Bookings/ControllersLogic/UpdateBookingOrderReferenceLogic.php
@@ -0,0 +1,73 @@
+<?php
+
+namespace App\Classes\Modules\Bookings\ControllersLogic;
+
+use App\Http\Resources\BookingResource;
+
+use App\Classes\General\Abstracts\AbstractControllerLogic;
+
+use App\Classes\Modules\Bookings\Services\FetchesBooking;
+
+use Illuminate\Http\JsonResponse;
+use Illuminate\Http\Request;
+use App\Classes\Exceptions\MalformedRequestException;
+use App\Classes\ValueObjects\Constants\BookingAttributeNames;
+
+class UpdateBookingOrderReferenceLogic extends AbstractControllerLogic
+{
+    /**
+     * @return array
+     */
+    protected function notification():array {
+        return [
+            'title' => 'Updated Booking Order References',
+            'message' => 'You have successfully updated the Booking Order References'
+        ];
+    }
+
+    /** @var FetchesBooking */
+    private $fetchesBooking;
+
+    /**
+     * UpdateBookingOrderReferenceLogic constructor.
+     * @param FetchesBooking $fetchesBooking
+     */
+    public function __construct(FetchesBooking $fetchesBooking)
+    {
+        $this->fetchesBooking = $fetchesBooking;
+    }
+
+    /**
+     * @param Request $request
+     * @return JsonResponse
+     * @throws MalformedRequestException
+     */
+    public function logic(Request $request) : JsonResponse
+    {
+        if (!$request['order_reference_no']) {
+            throw new MalformedRequestException('At least 1 order reference required.');
+        }
+
+        if ($request['order_reference_no']) {
+            foreach ($request['order_reference_no'] as $index => $reference) {
+                if (!$reference) {
+                    $index += 1;
+                    throw new MalformedRequestException("Order reference {$index} cannot be empty");
+                }
+            }
+        }
+
+        $booking = $this->fetchesBooking->execute(['id' => $request->route('id')]);
+        $booking->modelAttributes()->delete();
+
+        foreach ($request['order_reference_no'] as $order_reference) {
+            $booking->modelAttributes()->create([
+                'name' => BookingAttributeNames::ORDER_REFERENCE_NO,
+                'value' => $order_reference
+            ]);
+        }
+
+        return $this->resourceResponse(new BookingResource($booking));
+    }
+
+}
\ No newline at end of file
diff --git a/app/Classes/ValueObjects/Constants/BookingAttributeNames.php b/app/Classes/ValueObjects/Constants/BookingAttributeNames.php
new file mode 100644
index 00000000..491ad0a2
--- /dev/null
+++ b/app/Classes/ValueObjects/Constants/BookingAttributeNames.php
@@ -0,0 +1,8 @@
+<?php
+
+namespace App\Classes\ValueObjects\Constants;
+
+class BookingAttributeNames
+{
+    public const ORDER_REFERENCE_NO = 'ORDER_REFERENCE_NO';
+}
diff --git a/app/Http/Controllers/Bookings/UpdateBookingOrderReferenceController.php b/app/Http/Controllers/Bookings/UpdateBookingOrderReferenceController.php
new file mode 100644
index 00000000..64af979e
--- /dev/null
+++ b/app/Http/Controllers/Bookings/UpdateBookingOrderReferenceController.php
@@ -0,0 +1,20 @@
+<?php
+
+namespace App\Http\Controllers\Bookings;
+
+use App\Classes\Modules\Bookings\ControllersLogic\UpdateBookingOrderReferenceLogic;
+use Illuminate\Http\JsonResponse;
+use Illuminate\Http\Request;
+
+class UpdateBookingOrderReferenceController
+{
+    /**
+     * @param Request $request
+     * @param UpdateBookingOrderReferenceLogic $logic
+     * @return JsonResponse
+     */
+    public function update(Request $request, UpdateBookingOrderReferenceLogic $logic): JsonResponse {
+        return $logic->execute($request);
+    }
+
+}   
\ No newline at end of file
diff --git a/app/Http/Resources/BookingResource.php b/app/Http/Resources/BookingResource.php
index 2612c5b4..83e53249 100644
--- a/app/Http/Resources/BookingResource.php
+++ b/app/Http/Resources/BookingResource.php
@@ -7,6 +7,7 @@ use App\Classes\Modules\Bookings\Services\CalculatesBookingOutstanding;
 use App\Classes\Modules\Bookings\Services\CalculatesBookingPayableAmount;
 use App\Classes\Modules\Bookings\Services\CalculatesBookingRefundAmount;
 use App\Classes\ValueObjects\Constants\ApprovalStatus;
+use App\Classes\ValueObjects\Constants\BookingAttributeNames;
 use App\Classes\ValueObjects\Constants\TransactionType;
 use App\Classes\ValueObjects\Constants\DocumentType;
 use Carbon\Carbon;
@@ -45,6 +46,12 @@ class BookingResource extends JsonResource
                 'proforma_invoice' => new DocumentResource($this->documents()->where('document_type', DocumentType::PROFORMA_INVOICE)->whereNotIn('status', [ApprovalStatus::REJECTED, ApprovalStatus::EXPIRED])->orderByDesc('id')->first()),
                 'ecommerce_purchase_order' => new DocumentResource($this->documents()->where('document_type', DocumentType::ECOMMERCE_PURCHASE_ORDER)->first()),
             ],
+            'order_reference_no' => $this->modelAttributes()->where('name', BookingAttributeNames::ORDER_REFERENCE_NO)->get()->map(function ($attr) {
+                return [
+                    'id' => $attr->id,
+                    'value' => $attr->value
+                ];
+            }),
             'status' => $this->status,
             'created_at' => Carbon::parse($this->created_at)->format('d-m-Y'),
             'created_at_with_time' => Carbon::parse($this->created_at)->format('d-m-Y h:i:s A'),
diff --git a/app/Models/Booking.php b/app/Models/Booking.php
index ca80d0c3..ff0b45b9 100644
--- a/app/Models/Booking.php
+++ b/app/Models/Booking.php
@@ -107,6 +107,11 @@ class Booking extends AbstractModel implements Documentable, Transactionable
         return $this->hasManyDeep(Transaction::class, [Transaction::class.' as alias'], [['owner_type', 'owner_id'], ['owner_type', 'owner_id']], [null, null]);
     }
 
+    public function modelAttributes(): MorphMany
+    {
+        return $this->morphMany(ModelAttribute::class, 'owner');
+    }
+
     protected static function booted()
     {
         if (auth()->user()) {
diff --git a/app/Models/ModelAttribute.php b/app/Models/ModelAttribute.php
new file mode 100644
index 00000000..bbd3511c
--- /dev/null
+++ b/app/Models/ModelAttribute.php
@@ -0,0 +1,27 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Relations\MorphTo;
+
+
+class ModelAttribute extends Model
+{
+    protected $table = 'model_attributes';
+
+    protected $fillable = [
+        "name",
+        "value"
+    ];
+
+    protected $casts = [
+        "value" => "array"
+    ];
+
+    public function owner(): morphTo
+    {
+        return $this->morphTo();
+    }
+
+}
diff --git a/database/migrations/2024_07_14_175408_create_model_attributes_table.php b/database/migrations/2024_07_14_175408_create_model_attributes_table.php
new file mode 100644
index 00000000..f05f6f8f
--- /dev/null
+++ b/database/migrations/2024_07_14_175408_create_model_attributes_table.php
@@ -0,0 +1,24 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+class CreateModelAttributesTable extends Migration
+{
+    public function up()
+    {
+        Schema::create('model_attributes', function (Blueprint $table) {
+            $table->id();
+            $table->morphs('owner');
+            $table->string('name');
+            $table->json('value');
+            $table->timestamps();
+        });
+    }
+
+    public function down()
+    {
+        Schema::dropIfExists('model_attributes');
+    }
+}
diff --git a/resources/assets/vue/components/banks/forms/AlipayAccountFormComponent.vue b/resources/assets/vue/components/banks/forms/AlipayAccountFormComponent.vue
index e1d71d62..e8a02a23 100644
--- a/resources/assets/vue/components/banks/forms/AlipayAccountFormComponent.vue
+++ b/resources/assets/vue/components/banks/forms/AlipayAccountFormComponent.vue
@@ -26,7 +26,7 @@
                         </div>
                     </div>
                     <div class="row">
-                        <div class="col p-r-5">
+                        <div class="col" :class="[{'p-r-15': disabled}, {'p-r-5': !disabled}]">
                             <div class="btn btn-sm btn-default bg-master-lightest btn-block b-rad-none" :data-dismiss="closable ? 'modal' : ''" @click="$emit('close')">{{disabled ? 'Change Recipient Account' : 'Cancel'}}</div>
                         </div>
                         <div class="col p-l-5" v-if="!disabled">
diff --git a/resources/assets/vue/components/banks/forms/BankAccountFormComponent.vue b/resources/assets/vue/components/banks/forms/BankAccountFormComponent.vue
index 9c89c89d..17be80c6 100644
--- a/resources/assets/vue/components/banks/forms/BankAccountFormComponent.vue
+++ b/resources/assets/vue/components/banks/forms/BankAccountFormComponent.vue
@@ -133,7 +133,7 @@
                         </div>
                     </div>
                     <div class="row">
-                        <div class="col p-r-5">
+                        <div class="col" :class="[{'p-r-15': disabled}, {'p-r-5': !disabled}]">
                             <div class="btn btn-sm btn-default bg-master-lightest btn-block b-rad-none" :data-dismiss="closable ? 'modal' : ''" @click="$emit('close')">{{disabled ? 'Change Recipient Account' : 'Cancel'}}</div>
                         </div>
                         <div class="col p-l-5" v-if="!disabled">
diff --git a/resources/assets/vue/components/banks/forms/PhoneAccountFormComponent.vue b/resources/assets/vue/components/banks/forms/PhoneAccountFormComponent.vue
index 76401d2b..e1627020 100644
--- a/resources/assets/vue/components/banks/forms/PhoneAccountFormComponent.vue
+++ b/resources/assets/vue/components/banks/forms/PhoneAccountFormComponent.vue
@@ -39,7 +39,7 @@
                         </div>
                     </div>
                     <div class="row">
-                        <div class="col p-r-5">
+                        <div class="col" :class="[{'p-r-15': disabled}, {'p-r-5': !disabled}]">
                             <div class="btn btn-sm btn-default bg-master-lightest btn-block b-rad-none" :data-dismiss="closable ? 'modal' : ''" @click="$emit('close')">{{disabled ? 'Change Recipient Account' : 'Cancel'}}</div>
                         </div>
                         <div class="col p-l-5" v-if="!disabled">
diff --git a/resources/assets/vue/components/bookings/elements/BookingConfirmationComponent.vue b/resources/assets/vue/components/bookings/elements/BookingConfirmationComponent.vue
index 3e19e8e3..01974869 100644
--- a/resources/assets/vue/components/bookings/elements/BookingConfirmationComponent.vue
+++ b/resources/assets/vue/components/bookings/elements/BookingConfirmationComponent.vue
@@ -157,6 +157,31 @@
                                                             <alipay-account-form-component v-if="isAlipayOrder" section="customerProfileSection" :disabled="formDisabled" :data="Object.keys(parameters.bankAccount).length ? parameters.bankAccount  : {account_no: account_no, company_id: data.company.id, country_id: 2, account_type: 2}" :company_id="data.company.id" :country_id="2" :type="2" v-on:createdBank="updateBank($event)" :serviceType="data.serviceType" :closable=false v-on:close="clearAccount()"></alipay-account-form-component>
                                                         </div>
                                                     </div>
+                                                    <div v-if="isOneSizEightEightOrder">
+                                                        <div class="row p-r-15 m-t-10" v-for="(order, index) in order_reference_no">
+                                                            <div class="col p-r-0">
+                                                                <div class="form-group no-margin form-group-default">
+                                                                    <label>
+                                                                        Order Reference No. {{ index + 1 }}
+                                                                    </label>
+                                                                    <input type="text" class="form-control" v-model="order_reference_no[index]">
+                                                                </div>
+                                                            </div>
+                                                            <div class="col-auto bg-danger pointer" v-if="index !== 0" @click="order_reference_no.splice(index, 1)">
+                                                                <div class="row h-100 align-items-center">
+                                                                    <div class="col">
+                                                                        <i class="fa fa-times fa-fw text-white"></i>
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                        <div class="row">
+                                                            <div class="col">
+                                                                <div class="btn btn-sm btn-success btn-block b-rad-none" @click="order_reference_no.push('')">Add Order Reference</div>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                    
                                                 </div>
                                             </div>
                                             <!--<div class="row">-->
@@ -294,7 +319,7 @@
                             </div>
                         </div>
                     </div>
-                    <confirm-booking-component :section="section" :data="data" v-if="parameters.bankAccount"></confirm-booking-component>
+                    <confirm-booking-component :section="section" :data="data" :order_reference_no="order_reference_no" v-if="parameters.bankAccount"></confirm-booking-component>
                 </div>
             </div>
             <div class="row" v-else>
@@ -312,7 +337,7 @@
 
 <script>
     import FormHandler from '../../../general/mixins/formHandler';
-    import ConfirmBookingComponent from "../forms/confirmBookingComponent";
+    import ConfirmBookingComponent from "../forms/confirmBookingComponent";    
     export default {
         components: {ConfirmBookingComponent},
         data(){
@@ -322,6 +347,7 @@
               recipientBanks: [],
               dropdownStatus: false,
               account_no: '',
+              order_reference_no: [''],
               step:1,
               promoCode:"",
               oneSixEightEightServiceIds: [4, 10],
diff --git a/resources/assets/vue/components/bookings/forms/BookingOrderReferenceFormComponent.vue b/resources/assets/vue/components/bookings/forms/BookingOrderReferenceFormComponent.vue
new file mode 100644
index 00000000..89db55e6
--- /dev/null
+++ b/resources/assets/vue/components/bookings/forms/BookingOrderReferenceFormComponent.vue
@@ -0,0 +1,116 @@
+<template>
+    <div class="row m-t-15">
+        <div class="col">
+            <div class="row align-items-end">
+                <div class="col">
+                    <div class="row">
+                        <div class="col">
+                            <div class="font-heading fs-10 muted all-caps">Order Reference No</div>
+                            <p class="m-b-0 fs-12" v-if="!isUpdate">
+                                {{ parameters.order_reference_no.join(', ') }}
+                            </p>                            
+                            <div class="row p-r-15 m-t-10" v-for="(order, index) in parameters.order_reference_no" v-else>
+                                <div class="col p-r-0">
+                                    <div class="form-group no-margin form-group-default">
+                                        <label>
+                                            Order Reference No. {{ index + 1 }}
+                                        </label>
+                                        <input type="text" class="form-control" v-model="parameters.order_reference_no[index]">
+                                    </div>
+                                </div>
+                                <div class="col-auto bg-danger pointer" v-if="parameters.order_reference_no.length > 1" @click="parameters.order_reference_no.splice(index, 1)">
+                                    <div class="row h-100 align-items-center">
+                                        <div class="col">
+                                            <i class="fa fa-times fa-fw text-white"></i>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="row m-t-5" v-if="booking_status !== 3 && !isUpdate">
+                        <div class="col-auto">
+                            <p class="text-complete text-underline m-b-0 fs-12 pointer" @click="isUpdate = true">Update Order References</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="row" v-show="isUpdate">
+                <div class="col">
+                    <div class="row m-t-10">
+                        <div class="col">
+                            <button class="btn btn-xs btn-outline-primary b-rad-none" @click="parameters.order_reference_no.push('')">
+                                <i class="fa fa-plus m-r-5"></i>
+                                Add Order Reference
+                            </button>
+                        </div>
+                    </div>
+                    <div class="row m-t-10">
+                        <div class="col">
+                            <button class="btn btn-block btn-sm btn-success b-rad-none" @click="updateOrderReferences">Update Order References</button>
+                        </div>
+                    </div>
+                    <div class="row m-t-10">
+                        <div class="col">
+                            <button class="btn btn-block btn-sm btn-default b-rad-none" @click="resetOrderReference">Cancel</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import FormHandler from '../../../general/mixins/formHandler';
+
+    export default {
+        props: {
+            order_reference_no: {
+                type: Array,
+                default: [],
+                required: true
+            },
+            booking_id: {
+                type: Number,
+                required: true
+            },
+            booking_status: {
+                type: Number,
+                required: true
+            }
+        },
+        data(){
+          return {
+                parameters: {
+                    order_reference_no: []
+                },
+                isUpdate: false
+            }
+        },
+        watch: {
+            pendingQueue(inComplete){
+                if(inComplete){
+                    this.fetchBillingAddress();
+                }
+            }
+        },
+        created(){
+            this.parameters.order_reference_no = this.order_reference_no.map(attr => attr.value); 
+        },
+        methods: {
+            resetOrderReference() {
+                this.isUpdate = false;
+                this.parameters.order_reference_no = this.order_reference_no.map(attr => attr.value); 
+            },
+            updateOrderReferences(){
+                this.submit(this.route('api.booking.booking_order_reference.update', this.booking_id), 'put', this.section, true, true)
+            },
+            successHandler(response){
+                this.isUpdate = false;
+                this.updateList()
+            },
+        },
+        mixins: [FormHandler]
+    }
+</script>
\ No newline at end of file
diff --git a/resources/assets/vue/components/bookings/forms/confirmBookingComponent.vue b/resources/assets/vue/components/bookings/forms/confirmBookingComponent.vue
index 2cb67ca0..d0a92e59 100644
--- a/resources/assets/vue/components/bookings/forms/confirmBookingComponent.vue
+++ b/resources/assets/vue/components/bookings/forms/confirmBookingComponent.vue
@@ -12,6 +12,13 @@
 <script>
     import ModalFormHandler from '../../../general/mixins/modalFormHandler';
     export default {
+        props:{
+            order_reference_no: {
+                type: Array,
+                default: [],
+                required: false
+            }
+        },
         data(){
             return {
                 parameters: {}
@@ -28,6 +35,10 @@
                     convertible_currency_id: this.data.serviceType.selectedCurrency.id,
                 };
 
+                if ([4, 10].includes(this.data.serviceType.id)) {
+                    this.parameters.order_reference_no = this.order_reference_no
+                }
+
                 this.submit(route('api.booking.create'), 'post', this.section, true, true)
             },
             successHandler(response){
diff --git a/resources/assets/vue/components/bookings/sections/BookingDetailsSectionComponent.vue b/resources/assets/vue/components/bookings/sections/BookingDetailsSectionComponent.vue
index 06f5ef8b..9d05e193 100644
--- a/resources/assets/vue/components/bookings/sections/BookingDetailsSectionComponent.vue
+++ b/resources/assets/vue/components/bookings/sections/BookingDetailsSectionComponent.vue
@@ -211,6 +211,7 @@
                                                             </div>
                                                         </div>
                                                     </div>
+                                                    <booking-order-reference-form-component v-if='oneSixEightEightServiceIds.includes(booking.service.id)' :order_reference_no="booking.order_reference_no" :booking_status="booking.status" :booking_id="booking.id" :section="section"></booking-order-reference-form-component>
                                                 </div>
                                             </div>
                                         </div>
diff --git a/routes/booking.php b/routes/booking.php
index 119d24fa..3938ee3a 100644
--- a/routes/booking.php
+++ b/routes/booking.php
@@ -32,6 +32,7 @@ Route::group(['prefix' => 'booking', 'as' => 'booking.', 'namespace' => 'Booking
     Route::delete('{id}/purchase_order/pdf', 'DeletePurchaseOrderPdfController@delete')->name('po.pdf.delete');
 
     Route::put('{id}/updateAmount', 'UpdateBookingAmountController@update')->name('booking_amount.update');
+    Route::put('{id}/updateOrderReferences', 'UpdateBookingOrderReferenceController@update')->name('booking_order_reference.update');
 
     Route::post('/merge', 'MergeBookingController@merge')->name('merge');