diff --git a/app/Classes/Modules/Bookings/ControllersLogic/CreateBookingPaymentLogic.php b/app/Classes/Modules/Bookings/ControllersLogic/CreateBookingPaymentLogic.php
index ab741b6b..b2a0732a 100644
--- a/app/Classes/Modules/Bookings/ControllersLogic/CreateBookingPaymentLogic.php
+++ b/app/Classes/Modules/Bookings/ControllersLogic/CreateBookingPaymentLogic.php
@@ -29,8 +29,8 @@ class CreateBookingPaymentLogic extends AbstractControllerLogic
      */
     protected function notification():array {
         return [
-            'title' => 'Create Payment Attempt',
-            'message' => 'You have successfully created a payment attempt'
+            'title' => 'Create Payment Booking',
+            'message' => 'You have successfully created a payment booking'
         ];
     }
 
diff --git a/app/Classes/Modules/Documents/ControllersLogic/RenderDocumentLogic.php b/app/Classes/Modules/Documents/ControllersLogic/RenderDocumentLogic.php
index 84759f14..2d095750 100644
--- a/app/Classes/Modules/Documents/ControllersLogic/RenderDocumentLogic.php
+++ b/app/Classes/Modules/Documents/ControllersLogic/RenderDocumentLogic.php
@@ -59,12 +59,6 @@ class RenderDocumentLogic extends AbstractControllerLogic
             throw new ResourceNotFoundException();
         }
 
-        $extention = explode('.', $file);
-        if ($extention[1] == 'pdf') {
-            return $this->response(['src' => chunk_split(base64_encode(Storage::disk('documents')->get($file)))]);
-        }
-        else {
-            return $this->response(['src' => Storage::disk('documents')->get($file)]);
-        }
+        return $this->response(['src' => explode('.', $file)[1] == 'pdf' ? chunk_split(base64_encode(Storage::disk('documents')->get($file))) : Storage::disk('documents')->get($file) ]);
     }
 }
\ No newline at end of file
diff --git a/app/Classes/Modules/Transactions/ControllersLogic/CreateSupplierTransactionLogic.php b/app/Classes/Modules/Transactions/ControllersLogic/CreateSupplierTransactionLogic.php
index 95fd6b59..3e627645 100644
--- a/app/Classes/Modules/Transactions/ControllersLogic/CreateSupplierTransactionLogic.php
+++ b/app/Classes/Modules/Transactions/ControllersLogic/CreateSupplierTransactionLogic.php
@@ -17,6 +17,7 @@ use App\Classes\ValueObjects\Constants\ApprovalStatus;
 use App\Classes\ValueObjects\Constants\PaymentMethodType;
 use App\Classes\ValueObjects\Constants\TransactionType;
 use App\Classes\ValueObjects\Constants\DocumentType;
+use App\Models\Document;
 use App\Models\Transaction;
 use Barryvdh\DomPDF\PDF;
 use Carbon\Carbon;
@@ -115,12 +116,13 @@ class CreateSupplierTransactionLogic extends AbstractControllerLogic
         $object = new DocumentObject(
             DocumentType::CUSTOMER_PAYMENT_PROOF,
             [chunk_split('data:application/pdf;base64,'.base64_encode($pdf->output()))],
-            '', 
-            ApprovalStatus::COMPLETED, 
+            '',
+            ApprovalStatus::COMPLETED,
             'supplier_orders'
         );
 
         foreach ($transactions as $key => $row) {
+            /** @var Document $document */
             $document = $this->createsDocument->execute($row, $object);
             $this->createsFile->execute($document, $object);
         }
diff --git a/app/Classes/Modules/Transactions/ControllersLogic/SuspendTransactionLogic.php b/app/Classes/Modules/Transactions/ControllersLogic/SuspendTransactionLogic.php
index 07050078..e824547e 100644
--- a/app/Classes/Modules/Transactions/ControllersLogic/SuspendTransactionLogic.php
+++ b/app/Classes/Modules/Transactions/ControllersLogic/SuspendTransactionLogic.php
@@ -22,7 +22,7 @@ class SuspendTransactionLogic extends AbstractControllerLogic
     protected function notification():array {
         return [
             'title' => 'Suspend Transaction',
-            'message' => 'You have successfully suspended the payment attempt'
+            'message' => 'You have successfully suspended the payment booking'
         ];
     }
 
diff --git a/resources/assets/vue/components/accounts/forms/RegistrationFormComponent.vue b/resources/assets/vue/components/accounts/forms/RegistrationFormComponent.vue
index 1789325a..e3445491 100644
--- a/resources/assets/vue/components/accounts/forms/RegistrationFormComponent.vue
+++ b/resources/assets/vue/components/accounts/forms/RegistrationFormComponent.vue
@@ -1,79 +1,115 @@
 <template>
-    <div class="row text-left" @keyup.enter="submitForm">
+    <div class="row">
         <div class="col">
-            <div class="row m-b-20">
+            <loading-component style="height: 300px; top: 0;" key="1" color="success" v-show="isLoading" ></loading-component>
+            <div class="row text-left" v-if="!isLoading" @keyup.enter="submitForm">
                 <div class="col">
-                    <div class="font-heading fs-18 text-primary all-caps">Create Account</div>
-                    <div class="fs-11 muted">Create your account by filling in the form below.</div>
-                </div>
-            </div>
-            <error-message-component class="m-b-20" :error="error"></error-message-component>
-            <div class="row">
-                <div class="col">
-                    <div class="row" v-show="step === 1">
+                    <div class="row m-b-20">
                         <div class="col">
-                            <div class="row m-b-15 animate__animated animate__fadeInUpBig">
+                            <div class="font-heading fs-18 text-primary all-caps">Create Account</div>
+                            <div class="fs-11 muted">Create your account by filling in the form below.</div>
+                        </div>
+                    </div>
+                    <error-message-component class="m-b-20" :error="error"></error-message-component>
+                    <div class="row">
+                        <div class="col">
+                            <div class="row" v-show="step === 1">
                                 <div class="col">
-                                    <div class="row">
-                                        <div class="col">
-                                            <p class="bold fs-11 all-caps muted">Select your account type</p>
-                                        </div>
-                                    </div>
-                                    <div class="row text-center fs-10">
+                                    <div class="row m-b-15">
                                         <div class="col">
                                             <div class="row">
-                                                <div class="col-auto p-r-0">
-                                                    <div class="b-a b-grey bg-white p-t-20 p-b-20 p-l-45 p-r-45 pointer" :class="{ 'b-primary': parameters.type === 1, 'text-primary': parameters.type === 1, 'b-grey': parameters.type !== 1 }" @click="parameters.type = 1">
-                                                        <div class="m-b-15">
-                                                            <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
-                                                                 width="45" height="45"
-                                                                 viewBox="0 0 172 172"
-                                                                 style=" fill:#000000;"><defs><linearGradient x1="107.5" y1="82.30469" x2="107.5" y2="101.12525" gradientUnits="userSpaceOnUse" id="color-1_114458_gr1"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="107.5" y1="56.10156" x2="107.5" y2="73.73962" gradientUnits="userSpaceOnUse" id="color-2_114458_gr2"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="123.625" y1="82.30469" x2="123.625" y2="101.12525" gradientUnits="userSpaceOnUse" id="color-3_114458_gr3"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="123.625" y1="56.10156" x2="123.625" y2="73.73962" gradientUnits="userSpaceOnUse" id="color-4_114458_gr4"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="86" y1="25.98006" x2="86" y2="147.8125" gradientUnits="userSpaceOnUse" id="color-5_114458_gr5"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="115.5625" y1="25.98006" x2="115.5625" y2="147.8125" gradientUnits="userSpaceOnUse" id="color-6_114458_gr6"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="115.5625" y1="25.98006" x2="115.5625" y2="147.8125" gradientUnits="userSpaceOnUse" id="color-7_114458_gr7"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="53.75" y1="99.4375" x2="53.75" y2="106.82813" gradientUnits="userSpaceOnUse" id="color-8_114458_gr8"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="63.15625" y1="85.88713" x2="63.15625" y2="94.23719" gradientUnits="userSpaceOnUse" id="color-9_114458_gr9"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="44.34375" y1="85.94356" x2="44.34375" y2="94.00606" gradientUnits="userSpaceOnUse" id="color-10_114458_gr10"><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><path d="M104.8125,83.3125h5.375v16.125h-5.375z" fill="url(#color-1_114458_gr1)"></path><path d="M104.8125,56.4375h5.375v16.125h-5.375z" fill="url(#color-2_114458_gr2)"></path><path d="M120.9375,83.3125h5.375v16.125h-5.375z" fill="url(#color-3_114458_gr3)"></path><path d="M120.9375,56.4375h5.375v16.125h-5.375z" fill="url(#color-4_114458_gr4)"></path><path d="M155.875,37.625v-5.375c0,-2.96431 -2.41069,-5.375 -5.375,-5.375h-102.125c-2.96431,0 -5.375,2.41069 -5.375,5.375v5.375c0,2.96431 2.41069,5.375 5.375,5.375v16.7485c-10.01631,2.28438 -17.68644,10.78494 -18.69425,21.2205c-4.68431,1.15831 -8.18075,5.36694 -8.18075,10.406c0,5.47444 4.12531,9.9545 9.42506,10.61563c0.47569,1.36256 1.05888,2.67406 1.75763,3.91569c-10.38181,7.02512 -16.55769,18.57062 -16.55769,31.15619v8.0625h69.875h5.375h64.5v-5.375h-5.375v-96.75c2.96431,0 5.375,-2.41069 5.375,-5.375zM48.375,32.25h102.125l0.00538,5.375h-102.13038zM34.9375,83.3125c0,-10.37106 8.44144,-18.8125 18.8125,-18.8125c10.37106,0 18.8125,8.44144 18.8125,18.8125v10.75c0,10.37106 -8.44144,18.8125 -18.8125,18.8125c-10.37106,0 -18.8125,-8.44144 -18.8125,-18.8125zM26.875,91.375c0,-1.98069 1.08844,-3.69531 2.6875,-4.62788v7.31538c0,0.67188 0.04838,1.33569 0.10213,1.99412c-1.6555,-0.91644 -2.78963,-2.66062 -2.78963,-4.68162zM53.75,118.25c7.095,0 13.46437,-3.08794 17.89338,-7.97113c1.51575,1.01319 2.90788,2.15 4.20862,3.37281c-5.58194,6.28069 -13.62831,9.97331 -22.102,9.97331c-8.47637,0 -16.52275,-3.68994 -22.102,-9.97062c1.30075,-1.22281 2.69288,-2.35963 4.20863,-3.37281c4.429,4.8805 10.79838,7.96844 17.89338,7.96844zM21.5,139.75v-2.6875c0,-7.14875 2.3435,-13.89169 6.49837,-19.393c6.57631,7.15681 15.9315,11.3305 25.75163,11.3305c9.81744,0 19.17531,-4.17369 25.75163,-11.33319c4.15487,5.504 6.49837,12.24962 6.49837,19.39569v2.6875zM115.5625,139.75v-5.375h29.5625v5.375zM145.125,118.25h-18.8125v5.375h18.8125v5.375h-29.5625v-13.4375c0,-4.44512 -3.61738,-8.0625 -8.0625,-8.0625h-13.4375v5.375h13.4375c1.4835,0 2.6875,1.204 2.6875,2.6875v24.1875h-18.8125v-2.6875c0,-12.58556 -6.17588,-24.13106 -16.55769,-31.15619c0.70144,-1.24162 1.28463,-2.55044 1.75762,-3.91569c5.29975,-0.66112 9.42506,-5.14119 9.42506,-10.61562c0,-5.03906 -3.49644,-9.24769 -8.18075,-10.406c-1.1825,-12.24156 -11.52131,-21.844 -24.06925,-21.844v-16.125h91.375zM77.9375,94.0625v-7.31538c1.59906,0.93256 2.6875,2.64719 2.6875,4.62788c0,2.021 -1.13412,3.76519 -2.78963,4.68162c0.05375,-0.65844 0.10213,-1.32225 0.10213,-1.99412z" fill="url(#color-5_114458_gr5)"></path><path d="M99.4375,102.125h32.25c2.96431,0 5.375,-2.41069 5.375,-5.375v-10.75c0,-2.96431 -2.41069,-5.375 -5.375,-5.375h-32.25c-2.96431,0 -5.375,2.41069 -5.375,5.375v10.75c0,2.96431 2.41069,5.375 5.375,5.375zM99.4375,86h32.25l0.00538,10.75h-32.25538z" fill="url(#color-6_114458_gr6)"></path><path d="M99.4375,75.25h32.25c2.96431,0 5.375,-2.41069 5.375,-5.375v-10.75c0,-2.96431 -2.41069,-5.375 -5.375,-5.375h-32.25c-2.96431,0 -5.375,2.41069 -5.375,5.375v10.75c0,2.96431 2.41069,5.375 5.375,5.375zM99.4375,59.125h32.25l0.00538,10.75h-32.25538z" fill="url(#color-7_114458_gr7)"></path><path d="M53.75,107.5c4.45319,0 8.0625,-3.60931 8.0625,-8.0625h-16.125c0,4.45319 3.60931,8.0625 8.0625,8.0625z" fill="url(#color-8_114458_gr8)"></path><path d="M63.15625,86c-2.2264,0 -4.03125,1.80485 -4.03125,4.03125c0,2.2264 1.80485,4.03125 4.03125,4.03125c2.2264,0 4.03125,-1.80485 4.03125,-4.03125c0,-2.2264 -1.80485,-4.03125 -4.03125,-4.03125z" fill="url(#color-9_114458_gr9)"></path><path d="M44.34375,86c-2.2264,0 -4.03125,1.80485 -4.03125,4.03125c0,2.2264 1.80485,4.03125 4.03125,4.03125c2.2264,0 4.03125,-1.80485 4.03125,-4.03125c0,-2.2264 -1.80485,-4.03125 -4.03125,-4.03125z" fill="url(#color-10_114458_gr10)"></path></g></g></svg>
+                                                <div class="col">
+                                                    <p class="bold fs-11 all-caps muted">Select your account type</p>
+                                                </div>
+                                            </div>
+                                            <div class="row text-center fs-10">
+                                                <div class="col">
+                                                    <div class="row">
+                                                        <div class="col-auto p-r-0">
+                                                            <div class="b-a b-grey bg-white p-t-20 p-b-20 p-l-45 p-r-45 pointer" :class="{ 'b-primary': parameters.type === 1, 'text-primary': parameters.type === 1, 'b-grey': parameters.type !== 1 }" @click="parameters.type = 1">
+                                                                <div class="m-b-15">
+                                                                    <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
+                                                                         width="45" height="45"
+                                                                         viewBox="0 0 172 172"
+                                                                         style=" fill:#000000;"><defs><linearGradient x1="107.5" y1="82.30469" x2="107.5" y2="101.12525" gradientUnits="userSpaceOnUse" id="color-1_114458_gr1"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="107.5" y1="56.10156" x2="107.5" y2="73.73962" gradientUnits="userSpaceOnUse" id="color-2_114458_gr2"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="123.625" y1="82.30469" x2="123.625" y2="101.12525" gradientUnits="userSpaceOnUse" id="color-3_114458_gr3"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="123.625" y1="56.10156" x2="123.625" y2="73.73962" gradientUnits="userSpaceOnUse" id="color-4_114458_gr4"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="86" y1="25.98006" x2="86" y2="147.8125" gradientUnits="userSpaceOnUse" id="color-5_114458_gr5"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="115.5625" y1="25.98006" x2="115.5625" y2="147.8125" gradientUnits="userSpaceOnUse" id="color-6_114458_gr6"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="115.5625" y1="25.98006" x2="115.5625" y2="147.8125" gradientUnits="userSpaceOnUse" id="color-7_114458_gr7"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="53.75" y1="99.4375" x2="53.75" y2="106.82813" gradientUnits="userSpaceOnUse" id="color-8_114458_gr8"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="63.15625" y1="85.88713" x2="63.15625" y2="94.23719" gradientUnits="userSpaceOnUse" id="color-9_114458_gr9"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="44.34375" y1="85.94356" x2="44.34375" y2="94.00606" gradientUnits="userSpaceOnUse" id="color-10_114458_gr10"><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><path d="M104.8125,83.3125h5.375v16.125h-5.375z" fill="url(#color-1_114458_gr1)"></path><path d="M104.8125,56.4375h5.375v16.125h-5.375z" fill="url(#color-2_114458_gr2)"></path><path d="M120.9375,83.3125h5.375v16.125h-5.375z" fill="url(#color-3_114458_gr3)"></path><path d="M120.9375,56.4375h5.375v16.125h-5.375z" fill="url(#color-4_114458_gr4)"></path><path d="M155.875,37.625v-5.375c0,-2.96431 -2.41069,-5.375 -5.375,-5.375h-102.125c-2.96431,0 -5.375,2.41069 -5.375,5.375v5.375c0,2.96431 2.41069,5.375 5.375,5.375v16.7485c-10.01631,2.28438 -17.68644,10.78494 -18.69425,21.2205c-4.68431,1.15831 -8.18075,5.36694 -8.18075,10.406c0,5.47444 4.12531,9.9545 9.42506,10.61563c0.47569,1.36256 1.05888,2.67406 1.75763,3.91569c-10.38181,7.02512 -16.55769,18.57062 -16.55769,31.15619v8.0625h69.875h5.375h64.5v-5.375h-5.375v-96.75c2.96431,0 5.375,-2.41069 5.375,-5.375zM48.375,32.25h102.125l0.00538,5.375h-102.13038zM34.9375,83.3125c0,-10.37106 8.44144,-18.8125 18.8125,-18.8125c10.37106,0 18.8125,8.44144 18.8125,18.8125v10.75c0,10.37106 -8.44144,18.8125 -18.8125,18.8125c-10.37106,0 -18.8125,-8.44144 -18.8125,-18.8125zM26.875,91.375c0,-1.98069 1.08844,-3.69531 2.6875,-4.62788v7.31538c0,0.67188 0.04838,1.33569 0.10213,1.99412c-1.6555,-0.91644 -2.78963,-2.66062 -2.78963,-4.68162zM53.75,118.25c7.095,0 13.46437,-3.08794 17.89338,-7.97113c1.51575,1.01319 2.90788,2.15 4.20862,3.37281c-5.58194,6.28069 -13.62831,9.97331 -22.102,9.97331c-8.47637,0 -16.52275,-3.68994 -22.102,-9.97062c1.30075,-1.22281 2.69288,-2.35963 4.20863,-3.37281c4.429,4.8805 10.79838,7.96844 17.89338,7.96844zM21.5,139.75v-2.6875c0,-7.14875 2.3435,-13.89169 6.49837,-19.393c6.57631,7.15681 15.9315,11.3305 25.75163,11.3305c9.81744,0 19.17531,-4.17369 25.75163,-11.33319c4.15487,5.504 6.49837,12.24962 6.49837,19.39569v2.6875zM115.5625,139.75v-5.375h29.5625v5.375zM145.125,118.25h-18.8125v5.375h18.8125v5.375h-29.5625v-13.4375c0,-4.44512 -3.61738,-8.0625 -8.0625,-8.0625h-13.4375v5.375h13.4375c1.4835,0 2.6875,1.204 2.6875,2.6875v24.1875h-18.8125v-2.6875c0,-12.58556 -6.17588,-24.13106 -16.55769,-31.15619c0.70144,-1.24162 1.28463,-2.55044 1.75762,-3.91569c5.29975,-0.66112 9.42506,-5.14119 9.42506,-10.61562c0,-5.03906 -3.49644,-9.24769 -8.18075,-10.406c-1.1825,-12.24156 -11.52131,-21.844 -24.06925,-21.844v-16.125h91.375zM77.9375,94.0625v-7.31538c1.59906,0.93256 2.6875,2.64719 2.6875,4.62788c0,2.021 -1.13412,3.76519 -2.78963,4.68162c0.05375,-0.65844 0.10213,-1.32225 0.10213,-1.99412z" fill="url(#color-5_114458_gr5)"></path><path d="M99.4375,102.125h32.25c2.96431,0 5.375,-2.41069 5.375,-5.375v-10.75c0,-2.96431 -2.41069,-5.375 -5.375,-5.375h-32.25c-2.96431,0 -5.375,2.41069 -5.375,5.375v10.75c0,2.96431 2.41069,5.375 5.375,5.375zM99.4375,86h32.25l0.00538,10.75h-32.25538z" fill="url(#color-6_114458_gr6)"></path><path d="M99.4375,75.25h32.25c2.96431,0 5.375,-2.41069 5.375,-5.375v-10.75c0,-2.96431 -2.41069,-5.375 -5.375,-5.375h-32.25c-2.96431,0 -5.375,2.41069 -5.375,5.375v10.75c0,2.96431 2.41069,5.375 5.375,5.375zM99.4375,59.125h32.25l0.00538,10.75h-32.25538z" fill="url(#color-7_114458_gr7)"></path><path d="M53.75,107.5c4.45319,0 8.0625,-3.60931 8.0625,-8.0625h-16.125c0,4.45319 3.60931,8.0625 8.0625,8.0625z" fill="url(#color-8_114458_gr8)"></path><path d="M63.15625,86c-2.2264,0 -4.03125,1.80485 -4.03125,4.03125c0,2.2264 1.80485,4.03125 4.03125,4.03125c2.2264,0 4.03125,-1.80485 4.03125,-4.03125c0,-2.2264 -1.80485,-4.03125 -4.03125,-4.03125z" fill="url(#color-9_114458_gr9)"></path><path d="M44.34375,86c-2.2264,0 -4.03125,1.80485 -4.03125,4.03125c0,2.2264 1.80485,4.03125 4.03125,4.03125c2.2264,0 4.03125,-1.80485 4.03125,-4.03125c0,-2.2264 -1.80485,-4.03125 -4.03125,-4.03125z" fill="url(#color-10_114458_gr10)"></path></g></g></svg>
+                                                                </div>
+                                                                <p class="no-margin bold">Company</p>
+                                                            </div>
+                                                        </div>
+                                                        <div class="col-auto">
+                                                            <div class="b-a b-grey bg-white p-t-20 p-b-20 p-l-45 p-r-45 pointer" :class="{ 'b-primary': parameters.type === 0, 'text-primary': parameters.type === 0, 'b-grey': parameters.type !== 0 }"  @click="parameters.type = 0">
+                                                                <div class="m-b-15">
+                                                                    <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
+                                                                         width="45" height="45"
+                                                                         viewBox="0 0 172 172"
+                                                                         style=" fill:#000000;"><defs><linearGradient x1="99.4375" y1="82.64063" x2="99.4375" y2="95.42506" gradientUnits="userSpaceOnUse" id="color-1_43595_gr1"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="72.5625" y1="82.64063" x2="72.5625" y2="95.42506" gradientUnits="userSpaceOnUse" id="color-2_43595_gr2"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="86" y1="99.21444" x2="86" y2="110.1875" gradientUnits="userSpaceOnUse" id="color-3_43595_gr3"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="86" y1="16.57381" x2="86" y2="157.67563" gradientUnits="userSpaceOnUse" id="color-4_43595_gr4"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></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><path d="M99.4375,83.3125c-2.96853,0 -5.375,2.40647 -5.375,5.375c0,2.96853 2.40647,5.375 5.375,5.375c2.96853,0 5.375,-2.40647 5.375,-5.375c0,-2.96853 -2.40647,-5.375 -5.375,-5.375z" fill="url(#color-1_43595_gr1)"></path><path d="M72.5625,83.3125c-2.96853,0 -5.375,2.40647 -5.375,5.375c0,2.96853 2.40647,5.375 5.375,5.375c2.96853,0 5.375,-2.40647 5.375,-5.375c0,-2.96853 -2.40647,-5.375 -5.375,-5.375z" fill="url(#color-2_43595_gr2)"></path><path d="M91.375,99.4375h-10.75c-1.4835,0 -2.6875,1.204 -2.6875,2.6875c0,4.45319 3.60931,8.0625 8.0625,8.0625c4.45319,0 8.0625,-3.60931 8.0625,-8.0625c0,-1.4835 -1.204,-2.6875 -2.6875,-2.6875z" fill="url(#color-3_43595_gr3)"></path><path d="M120.40538,103.85575c1.02662,-2.31931 1.83288,-4.75419 2.37575,-7.29119c6.53062,-0.91106 11.59387,-6.47419 11.59387,-13.25206c0,-4.37256 -2.13119,-8.22644 -5.375,-10.68281v-5.44219c0,-18.00625 -11.137,-33.43787 -26.875,-39.83412v-5.84263c0,-2.96969 -2.41606,-5.38575 -5.38575,-5.38575h-2.67675c-3.225,0 -6.08987,1.45662 -8.0625,3.71412c-1.97263,-2.2575 -4.8375,-3.71412 -8.0625,-3.71412h-2.6875c-2.96431,0 -5.375,2.41069 -5.375,5.375v5.85338c-15.738,6.39625 -26.875,21.82787 -26.875,39.83413v5.44219c-3.24381,2.45637 -5.375,6.31025 -5.375,10.68281c0,6.77787 5.06325,12.341 11.59387,13.25206c0.54288,2.537 1.34913,4.97187 2.37575,7.29119c-12.30875,10.25281 -19.34462,25.18456 -19.34462,41.26925v10.75h107.5v-10.75c0,-16.08469 -7.03588,-31.01644 -19.34463,-41.26925zM120.97781,111.72206l-19.64025,19.64025c-1.01856,1.01319 -2.78156,1.01319 -3.80013,0l-5.5685,-5.5685c10.87631,-1.74419 20.19119,-8.14581 25.84569,-17.11131c1.10994,0.9675 2.15538,1.98875 3.16319,3.03956zM53.75,88.6875v-13.4375h5.375c6.84775,0 12.83281,-3.68994 16.125,-9.17513c3.29219,5.48519 9.27725,9.17513 16.125,9.17513h26.875v13.4375c0,17.78319 -14.46681,32.25 -32.25,32.25c-17.78319,0 -32.25,-14.46681 -32.25,-32.25zM123.51213,90.91544c0.043,-0.74175 0.11288,-1.47544 0.11288,-2.22794v-12.943c3.12287,1.11531 5.375,4.06888 5.375,7.568c0,3.53944 -2.30856,6.52256 -5.48788,7.60294zM94.0625,21.5l2.6875,0.01075v4.09038c-2.39725,-0.62081 -4.86706,-1.04813 -7.40675,-1.24431c0.90838,-1.69044 2.67137,-2.85681 4.71925,-2.85681zM75.25,21.5h2.6875c2.04788,0 3.81087,1.16637 4.71925,2.85681c-2.53969,0.19619 -5.0095,0.6235 -7.40675,1.24431zM86,29.5625c17.97669,0 33.02938,12.67963 36.73275,29.5625h-31.35775c-1.4835,0 -2.6875,-1.204 -2.6875,-2.6875v-5.375h-5.375v5.375c0,4.44512 3.61738,8.0625 8.0625,8.0625h32.11294c0.0645,0.89225 0.13706,1.78181 0.13706,2.6875v2.6875h-2.6875h-2.6875h-26.875c-7.40944,0 -13.4375,-6.02806 -13.4375,-13.4375v-5.375h-5.375v5.375c0,7.40944 -6.02806,13.4375 -13.4375,13.4375h-5.375h-2.6875h-2.6875v-2.6875c0,-0.90569 0.07256,-1.79525 0.13706,-2.6875h10.61294c4.44512,0 8.0625,-3.61738 8.0625,-8.0625v-5.375h-5.375v5.375c0,1.4835 -1.204,2.6875 -2.6875,2.6875h-9.85775c3.70338,-16.88287 18.75606,-29.5625 36.73275,-29.5625zM43,83.3125c0,-3.49912 2.25212,-6.45269 5.375,-7.568v12.943c0,0.7525 0.06987,1.48619 0.11288,2.22794c-3.17931,-1.08038 -5.48788,-4.0635 -5.48788,-7.60294zM80.07406,125.79919l-5.6115,5.6115c-1.01856,1.01319 -2.78156,1.01319 -3.80013,0l-19.66175,-19.66175c1.01319,-1.05887 2.06669,-2.08819 3.18469,-3.06375c5.66256,8.97356 14.99356,15.37788 25.88869,17.114zM37.625,145.125c0,-10.7715 3.51525,-20.96519 9.8685,-29.283l19.36881,19.36881c1.57219,1.57219 3.63619,2.35694 5.70019,2.35694c2.064,0 4.128,-0.78475 5.70019,-2.35694l5.04981,-5.04981v20.339h-45.6875zM134.375,150.5h-5.375c0,-2.96431 -2.41069,-5.375 -5.375,-5.375h-10.75c-2.96431,0 -5.375,2.41069 -5.375,5.375h-18.8125v-20.38737l5.04981,5.04981c1.57219,1.57219 3.63619,2.35694 5.70019,2.35694c2.064,0 4.128,-0.78475 5.70019,-2.35694l19.34731,-19.34731c6.36669,8.32319 9.89,18.52494 9.89,29.30987z" fill="url(#color-4_43595_gr4)"></path></g></g></svg></div>
+                                                                <p class="no-margin bold">Personal</p>
+                                                            </div>
                                                         </div>
-                                                        <p class="no-margin bold">Company</p>
                                                     </div>
                                                 </div>
-                                                <div class="col-auto">
-                                                    <div class="b-a b-grey bg-white p-t-20 p-b-20 p-l-45 p-r-45 pointer" :class="{ 'b-primary': parameters.type === 0, 'text-primary': parameters.type === 0, 'b-grey': parameters.type !== 0 }"  @click="parameters.type = 0">
-                                                        <div class="m-b-15">
-                                                            <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
-                                                                 width="45" height="45"
-                                                                 viewBox="0 0 172 172"
-                                                                 style=" fill:#000000;"><defs><linearGradient x1="99.4375" y1="82.64063" x2="99.4375" y2="95.42506" gradientUnits="userSpaceOnUse" id="color-1_43595_gr1"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="72.5625" y1="82.64063" x2="72.5625" y2="95.42506" gradientUnits="userSpaceOnUse" id="color-2_43595_gr2"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="86" y1="99.21444" x2="86" y2="110.1875" gradientUnits="userSpaceOnUse" id="color-3_43595_gr3"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="86" y1="16.57381" x2="86" y2="157.67563" gradientUnits="userSpaceOnUse" id="color-4_43595_gr4"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></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><path d="M99.4375,83.3125c-2.96853,0 -5.375,2.40647 -5.375,5.375c0,2.96853 2.40647,5.375 5.375,5.375c2.96853,0 5.375,-2.40647 5.375,-5.375c0,-2.96853 -2.40647,-5.375 -5.375,-5.375z" fill="url(#color-1_43595_gr1)"></path><path d="M72.5625,83.3125c-2.96853,0 -5.375,2.40647 -5.375,5.375c0,2.96853 2.40647,5.375 5.375,5.375c2.96853,0 5.375,-2.40647 5.375,-5.375c0,-2.96853 -2.40647,-5.375 -5.375,-5.375z" fill="url(#color-2_43595_gr2)"></path><path d="M91.375,99.4375h-10.75c-1.4835,0 -2.6875,1.204 -2.6875,2.6875c0,4.45319 3.60931,8.0625 8.0625,8.0625c4.45319,0 8.0625,-3.60931 8.0625,-8.0625c0,-1.4835 -1.204,-2.6875 -2.6875,-2.6875z" fill="url(#color-3_43595_gr3)"></path><path d="M120.40538,103.85575c1.02662,-2.31931 1.83288,-4.75419 2.37575,-7.29119c6.53062,-0.91106 11.59387,-6.47419 11.59387,-13.25206c0,-4.37256 -2.13119,-8.22644 -5.375,-10.68281v-5.44219c0,-18.00625 -11.137,-33.43787 -26.875,-39.83412v-5.84263c0,-2.96969 -2.41606,-5.38575 -5.38575,-5.38575h-2.67675c-3.225,0 -6.08987,1.45662 -8.0625,3.71412c-1.97263,-2.2575 -4.8375,-3.71412 -8.0625,-3.71412h-2.6875c-2.96431,0 -5.375,2.41069 -5.375,5.375v5.85338c-15.738,6.39625 -26.875,21.82787 -26.875,39.83413v5.44219c-3.24381,2.45637 -5.375,6.31025 -5.375,10.68281c0,6.77787 5.06325,12.341 11.59387,13.25206c0.54288,2.537 1.34913,4.97187 2.37575,7.29119c-12.30875,10.25281 -19.34462,25.18456 -19.34462,41.26925v10.75h107.5v-10.75c0,-16.08469 -7.03588,-31.01644 -19.34463,-41.26925zM120.97781,111.72206l-19.64025,19.64025c-1.01856,1.01319 -2.78156,1.01319 -3.80013,0l-5.5685,-5.5685c10.87631,-1.74419 20.19119,-8.14581 25.84569,-17.11131c1.10994,0.9675 2.15538,1.98875 3.16319,3.03956zM53.75,88.6875v-13.4375h5.375c6.84775,0 12.83281,-3.68994 16.125,-9.17513c3.29219,5.48519 9.27725,9.17513 16.125,9.17513h26.875v13.4375c0,17.78319 -14.46681,32.25 -32.25,32.25c-17.78319,0 -32.25,-14.46681 -32.25,-32.25zM123.51213,90.91544c0.043,-0.74175 0.11288,-1.47544 0.11288,-2.22794v-12.943c3.12287,1.11531 5.375,4.06888 5.375,7.568c0,3.53944 -2.30856,6.52256 -5.48788,7.60294zM94.0625,21.5l2.6875,0.01075v4.09038c-2.39725,-0.62081 -4.86706,-1.04813 -7.40675,-1.24431c0.90838,-1.69044 2.67137,-2.85681 4.71925,-2.85681zM75.25,21.5h2.6875c2.04788,0 3.81087,1.16637 4.71925,2.85681c-2.53969,0.19619 -5.0095,0.6235 -7.40675,1.24431zM86,29.5625c17.97669,0 33.02938,12.67963 36.73275,29.5625h-31.35775c-1.4835,0 -2.6875,-1.204 -2.6875,-2.6875v-5.375h-5.375v5.375c0,4.44512 3.61738,8.0625 8.0625,8.0625h32.11294c0.0645,0.89225 0.13706,1.78181 0.13706,2.6875v2.6875h-2.6875h-2.6875h-26.875c-7.40944,0 -13.4375,-6.02806 -13.4375,-13.4375v-5.375h-5.375v5.375c0,7.40944 -6.02806,13.4375 -13.4375,13.4375h-5.375h-2.6875h-2.6875v-2.6875c0,-0.90569 0.07256,-1.79525 0.13706,-2.6875h10.61294c4.44512,0 8.0625,-3.61738 8.0625,-8.0625v-5.375h-5.375v5.375c0,1.4835 -1.204,2.6875 -2.6875,2.6875h-9.85775c3.70338,-16.88287 18.75606,-29.5625 36.73275,-29.5625zM43,83.3125c0,-3.49912 2.25212,-6.45269 5.375,-7.568v12.943c0,0.7525 0.06987,1.48619 0.11288,2.22794c-3.17931,-1.08038 -5.48788,-4.0635 -5.48788,-7.60294zM80.07406,125.79919l-5.6115,5.6115c-1.01856,1.01319 -2.78156,1.01319 -3.80013,0l-19.66175,-19.66175c1.01319,-1.05887 2.06669,-2.08819 3.18469,-3.06375c5.66256,8.97356 14.99356,15.37788 25.88869,17.114zM37.625,145.125c0,-10.7715 3.51525,-20.96519 9.8685,-29.283l19.36881,19.36881c1.57219,1.57219 3.63619,2.35694 5.70019,2.35694c2.064,0 4.128,-0.78475 5.70019,-2.35694l5.04981,-5.04981v20.339h-45.6875zM134.375,150.5h-5.375c0,-2.96431 -2.41069,-5.375 -5.375,-5.375h-10.75c-2.96431,0 -5.375,2.41069 -5.375,5.375h-18.8125v-20.38737l5.04981,5.04981c1.57219,1.57219 3.63619,2.35694 5.70019,2.35694c2.064,0 4.128,-0.78475 5.70019,-2.35694l19.34731,-19.34731c6.36669,8.32319 9.89,18.52494 9.89,29.30987z" fill="url(#color-4_43595_gr4)"></path></g></g></svg></div>
-                                                        <p class="no-margin bold">Personal</p>
-                                                    </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="row">
+                                        <div class="col">
+                                            <div class="row">
+                                                <div class="col">
+                                                    <p class="bold fs-11 all-caps muted">Personal Information</p>
+                                                </div>
+                                            </div>
+                                            <div class="row m-b-15" v-show="parameters.type === 1">
+                                                <div class="col">
+                                                    <validation-wrapper-component :validator="$v.parameters.company_name">
+                                                        <label class="muted">Company Name</label>
+                                                        <input class="form-control" v-model="parameters.company_name">
+                                                    </validation-wrapper-component>
+                                                </div>
+                                            </div>
+                                            <div class="row m-b-15">
+                                                <div class="col p-r-5">
+                                                    <validation-wrapper-component :validator="$v.parameters.name">
+                                                        <label class="muted">Full Name</label>
+                                                        <input class="form-control" v-model="parameters.name">
+                                                    </validation-wrapper-component>
+                                                </div>
+                                                <div class="col p-l-5">
+                                                    <validation-wrapper-component :validator="$v.parameters.phone">
+                                                        <label class="muted">Phone</label>
+                                                        <input class="form-control" v-model="parameters.phone">
+                                                    </validation-wrapper-component>
                                                 </div>
                                             </div>
                                         </div>
                                     </div>
                                 </div>
                             </div>
-                            <div class="row">
+                            <div class="row" v-show="step === 2">
                                 <div class="col">
                                     <div class="row">
                                         <div class="col">
-                                            <p class="bold fs-11 all-caps muted">Personal Information</p>
+                                            <p class="bold fs-11 all-caps muted">Account Information</p>
                                         </div>
                                     </div>
-                                    <div class="row m-b-15" v-show="parameters.type === 1">
+                                    <div class="row m-b-15">
                                         <div class="col">
-                                            <validation-wrapper-component :validator="$v.parameters.company_name">
-                                                <label class="muted">Company Name</label>
-                                                <input class="form-control" v-model="parameters.company_name">
+                                            <validation-wrapper-component :validator="$v.parameters.email">
+                                                <label class="muted">Email</label>
+                                                <input class="form-control" v-model="parameters.email">
                                             </validation-wrapper-component>
                                         </div>
                                     </div>
                                     <div class="row m-b-15">
                                         <div class="col p-r-5">
-                                            <validation-wrapper-component :validator="$v.parameters.name">
-                                                <label class="muted">Full Name</label>
-                                                <input class="form-control" v-model="parameters.name">
+                                            <validation-wrapper-component :validator="$v.parameters.password">
+                                                <label class="muted">Password</label>
+                                                <input class="form-control" type="password" v-model="parameters.password">
                                             </validation-wrapper-component>
                                         </div>
                                         <div class="col p-l-5">
-                                            <validation-wrapper-component :validator="$v.parameters.phone">
-                                                <label class="muted">Phone</label>
-                                                <input class="form-control" v-model="parameters.phone">
+                                            <validation-wrapper-component :validator="$v.parameters.password_confirmation">
+                                                <label class="muted">Password Confirmation</label>
+                                                <input class="form-control" type="password" v-model="parameters.password_confirmation">
                                             </validation-wrapper-component>
                                         </div>
                                     </div>
@@ -81,83 +117,53 @@
                             </div>
                         </div>
                     </div>
+                    <div class="row" v-show="step === 1">
+                        <div class="col">
+                            <div class="row">
+                                <div class="col">
+                                    <button type="button" class="btn btn-sm p-t-10 p-b-10 btn-default bg-master-lighter b-rad-none" @click="$v.$reset;$store.dispatch('toggleSection', {name: 'registrationForm', status: false})">
+                                        <div class="row align-items-center">
+                                            <div class="col-auto p-r-10">
+                                                <i class="fa fa-angle-left fs-16" style="margin-top: 1px;"></i>
+                                            </div>
+                                            <div class="col p-l-5">
+                                                Back To Login
+                                            </div>
+                                        </div>
+                                    </button>
+                                </div>
+                                <div class="col text-right">
+                                    <button type="button" class="btn btn-sm p-t-10 p-b-10 p-r-35 p-l-35 btn-success b-rad-none" @click="changeStep('next')">Next</button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
                     <div class="row" v-show="step === 2">
                         <div class="col">
                             <div class="row">
                                 <div class="col">
-                                    <p class="bold fs-11 all-caps muted">Account Information</p>
+                                    <button type="button" class="btn btn-sm p-t-10 p-b-10 btn-default bg-master-lighter b-rad-none" @click="changeStep('back')">
+                                        <div class="row align-items-center">
+                                            <div class="col-auto p-r-10">
+                                                <i class="fa fa-angle-left fs-16" style="margin-top: 1px;"></i>
+                                            </div>
+                                            <div class="col p-l-5">
+                                                Go Back
+                                            </div>
+                                        </div>
+                                    </button>
+                                </div>
+                                <div class="col text-right">
+                                    <button type="button" class="btn btn-sm p-t-10 p-b-10 p-r-35 p-l-35 btn-success b-rad-none" @click="submitForm">Complete Registration</button>
                                 </div>
                             </div>
-                            <div class="row m-b-15">
-                                <div class="col">
-                                    <validation-wrapper-component :validator="$v.parameters.email">
-                                        <label class="muted">Email</label>
-                                        <input class="form-control" v-model="parameters.email">
-                                    </validation-wrapper-component>
-                                </div>
-                            </div>
-                            <div class="row m-b-15">
-                                <div class="col p-r-5">
-                                    <validation-wrapper-component :validator="$v.parameters.password">
-                                        <label class="muted">Password</label>
-                                        <input class="form-control" type="password" v-model="parameters.password">
-                                    </validation-wrapper-component>
-                                </div>
-                                <div class="col p-l-5">
-                                    <validation-wrapper-component :validator="$v.parameters.password_confirmation">
-                                        <label class="muted">Password Confirmation</label>
-                                        <input class="form-control" type="password" v-model="parameters.password_confirmation">
-                                    </validation-wrapper-component>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="row" v-show="step === 1">
-                <div class="col">
-                    <div class="row">
-                        <div class="col">
-                            <button type="button" class="btn btn-sm p-t-10 p-b-10 btn-default bg-master-lighter b-rad-none" @click="$v.$reset;$store.dispatch('toggleSection', {name: 'registrationForm', status: false})">
-                                <div class="row align-items-center">
-                                    <div class="col-auto p-r-10">
-                                        <i class="fa fa-angle-left fs-16" style="margin-top: 1px;"></i>
-                                    </div>
-                                    <div class="col p-l-5">
-                                        Back To Login
-                                    </div>
-                                </div>
-                            </button>
-                        </div>
-                        <div class="col text-right">
-                            <button type="button" class="btn btn-sm p-t-10 p-b-10 p-r-35 p-l-35 btn-success b-rad-none" @click="changeStep('next')">Next</button>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="row" v-show="step === 2">
-                <div class="col">
-                    <div class="row">
-                        <div class="col">
-                            <button type="button" class="btn btn-sm p-t-10 p-b-10 btn-default bg-master-lighter b-rad-none" @click="changeStep('back')">
-                                <div class="row align-items-center">
-                                    <div class="col-auto p-r-10">
-                                        <i class="fa fa-angle-left fs-16" style="margin-top: 1px;"></i>
-                                    </div>
-                                    <div class="col p-l-5">
-                                        Go Back
-                                    </div>
-                                </div>
-                            </button>
-                        </div>
-                        <div class="col text-right">
-                            <button type="button" class="btn btn-sm p-t-10 p-b-10 p-r-35 p-l-35 btn-success b-rad-none" @click="submitForm">Complete Registration</button>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
     </div>
+
 </template>
 <script>
     import registrationFormValidation from '../../../general/mixins/accounts/validation/registrationFormValidation'
diff --git a/resources/assets/vue/components/banks/forms/BankAccountFormComponent.vue b/resources/assets/vue/components/banks/forms/BankAccountFormComponent.vue
index df2212d7..a9327b71 100644
--- a/resources/assets/vue/components/banks/forms/BankAccountFormComponent.vue
+++ b/resources/assets/vue/components/banks/forms/BankAccountFormComponent.vue
@@ -38,35 +38,40 @@
                             </validation-wrapper-component>
                         </div>
                     </div>
-
-
-                    <div class="row m-b-10">
+                    <div class="row"  v-if="type === 2">
                         <div class="col">
-                            <validation-wrapper-component :validator="$v.parameters.bank_branch">
-                                <label class="muted">Bank Branch</label>
-                                <input type="text" class="form-control" v-model="parameters.bank_branch">
-                            </validation-wrapper-component>
+                            <div class="row m-b-10">
+                                <div class="col">
+                                    <validation-wrapper-component :validator="$v.parameters.bank_branch">
+                                        <label class="muted">Bank Branch</label>
+                                        <input type="text" class="form-control" v-model="parameters.bank_branch">
+                                    </validation-wrapper-component>
+                                </div>
+                            </div>
+                            <div class="row m-b-10">
+                                <div class="col p-r-5">
+                                    <validation-wrapper-component :validator="$v.parameters.swift">
+                                        <label class="muted">Swift</label>
+                                        <input type="text" class="form-control" v-model="parameters.swift">
+                                    </validation-wrapper-component>
+                                </div>
+                                <div class="col p-l-5">
+                                    <validation-wrapper-component :validator="$v.parameters.snap">
+                                        <label class="muted">Snap</label>
+                                        <input type="text" class="form-control" v-model="parameters.snap">
+                                    </validation-wrapper-component>
+                                </div>
+                            </div>
+                            <div class="row m-b-10">
+                                <div class="col">
+                                    <validation-wrapper-component :validator="$v.parameters.bank_name">
+                                        <label class="muted">Bank Name</label>
+                                        <input type="text" class="form-control" v-model="parameters.bank_name">
+                                    </validation-wrapper-component>
+                                </div>
+                            </div>
                         </div>
                     </div>
-                    <div class="row m-b-10">
-                        <div class="col">
-                            <validation-wrapper-component :validator="$v.parameters.swift">
-                                <label class="muted">Swift</label>
-                                <input type="text" class="form-control" v-model="parameters.swift">
-                            </validation-wrapper-component>
-                        </div>
-                    </div>
-                    <div class="row m-b-10">
-                        <div class="col">
-                            <validation-wrapper-component :validator="$v.parameters.snap">
-                                <label class="muted">Snap</label>
-                                <input type="text" class="form-control" v-model="parameters.snap">
-                            </validation-wrapper-component>
-                        </div>
-                    </div>
-
-
-
                     <div class="row m-b-20" v-if="type !== 2">
                         <div class="col">
                             <validation-wrapper-component selecatable :validator="$v.parameters.bank_name">
@@ -75,14 +80,6 @@
                             </validation-wrapper-component>
                         </div>
                     </div>
-                    <div class="row m-b-10" v-if="type === 2">
-                        <div class="col">
-                            <validation-wrapper-component :validator="$v.parameters.bank_name">
-                                <label class="muted">Bank Name</label>
-                                <input type="text" class="form-control" v-model="parameters.bank_name">
-                            </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="type !== 2 ? 'modal':''" @click="$emit('close')">Cancel</div>
diff --git a/resources/assets/vue/components/bookings/elements/PaymentVerificationComponent.vue b/resources/assets/vue/components/bookings/elements/PaymentVerificationComponent.vue
index 8935e61b..95c10674 100644
--- a/resources/assets/vue/components/bookings/elements/PaymentVerificationComponent.vue
+++ b/resources/assets/vue/components/bookings/elements/PaymentVerificationComponent.vue
@@ -30,7 +30,13 @@
                                 <div class="col">
                                     <div class="row no-margin">
                                         <div v-for="file in item.documents.files" v-bind:key="file.id"  class="col-auto no-padding m-r-5">
-                                            <document-file-viewr-component :file="file"></document-file-viewr-component>
+                                            <document-file-viewr-component :file="file">
+                                                <template slot="button">
+                                                    <div class="icon-thumbnail fs-11 text-white icon-25 bg-primary btn-rounded float-left m-r-5">
+                                                        <i class="fa fa-file-image-o fs-10"></i>
+                                                    </div>
+                                                </template>
+                                            </document-file-viewr-component>
                                         </div>
                                     </div>
                                 </div>
diff --git a/resources/assets/vue/components/bookings/forms/BookingFormComponent.vue b/resources/assets/vue/components/bookings/forms/BookingFormComponent.vue
index b05e4c2a..8a7717a8 100644
--- a/resources/assets/vue/components/bookings/forms/BookingFormComponent.vue
+++ b/resources/assets/vue/components/bookings/forms/BookingFormComponent.vue
@@ -120,6 +120,22 @@
                                             <div class="btn btn-sm btn-block btn-success b-rad-none shadow-sm pointer requestModal" data-type="transferSummary" >Transfer Now</div>
                                         </div>
                                     </div>
+                                    <div class="row"  v-if="summary.calculation.total > 0 && data.status === 0">
+                                        <div class="col">
+                                            <div class="alert alert-warning padding-15" role="alert">
+                                                <div class="font-heading fs-12 all-caps bold m-b-15">Create a transfer order</div>
+                                                <div class="row m-b-15">
+                                                    <div class="col">
+                                                        <div class="font-heading fs-10">You are unable to create a new transfer order until you upload your identification document for verification. You can verify your identity by clicking on the button below</div>
+                                                    </div>
+                                                </div>
+                                                <button class="btn btn-xs all-caps b-rad-none btn-warning requestModal" data-type="identificationVerificationModal">Upload identification Document</button>
+                                            </div>
+                                            <modal-component type="identificationVerificationModal">
+                                                <identification-verification-form-component section="customerProfileSection" :data="data"></identification-verification-form-component>
+                                            </modal-component>
+                                        </div>
+                                    </div>
                                     <modal-component v-if="summary.calculation.total > 0" class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="transferSummary" size="large">
                                         <booking-confirmation-component :data="summary" :section="section"></booking-confirmation-component>
                                     </modal-component>
diff --git a/resources/assets/vue/components/bookings/forms/BookingPaymentQuotationComponent.vue b/resources/assets/vue/components/bookings/forms/BookingPaymentQuotationComponent.vue
index a58244b8..71083583 100644
--- a/resources/assets/vue/components/bookings/forms/BookingPaymentQuotationComponent.vue
+++ b/resources/assets/vue/components/bookings/forms/BookingPaymentQuotationComponent.vue
@@ -102,15 +102,6 @@
                                                 <div class="absolute w-100 b-l b-b b-r b-complete" :class="[{'hide': !paymentMethod.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" :class="[{'bg-complete-light': paymentMethod.name === 'Cash Deposit'}, {'text-white': paymentMethod.name === 'Cash Deposit'}, {'hover-complete': paymentMethod.name !== 'Cash Deposit'}]"  @click="updatePaymentType({name: 'Cash Deposit', id: 'cash'})">
-                                                                <div class="col b-b b-grey p-t-10 p-b-10 pointer hover-t-10 p-b-10">
-                                                                    <div class="row align-items-center justify-content-center">
-                                                                        <div class="col">
-                                                                            <div class="font-heading fs-10">Cash Deposit</div>
-                                                                        </div>
-                                                                    </div>
-                                                                </div>
-                                                            </div>
                                                             <div class="row no-margin" :class="[{'bg-complete-light': paymentMethod.name === 'Bank Transfer'}, {'text-white': paymentMethod.name === 'Bank Transfer'}, {'hover-complete': paymentMethod.name !== 'Bank Transfer'}]" @click="updatePaymentType({name: 'Bank Transfer', id: 'cash'})">
                                                                 <div class="col b-b b-grey p-t-10 p-b-10 pointer hover-t-10 p-b-10">
                                                                     <div class="row align-items-center justify-content-center">
@@ -120,6 +111,15 @@
                                                                     </div>
                                                                 </div>
                                                             </div>
+                                                            <div class="row no-margin" :class="[{'bg-complete-light': paymentMethod.name === 'Cash Deposit'}, {'text-white': paymentMethod.name === 'Cash Deposit'}, {'hover-complete': paymentMethod.name !== 'Cash Deposit'}]"  @click="updatePaymentType({name: 'Cash Deposit', id: 'cash'})">
+                                                                <div class="col b-b b-grey p-t-10 p-b-10 pointer hover-t-10 p-b-10">
+                                                                    <div class="row align-items-center justify-content-center">
+                                                                        <div class="col">
+                                                                            <div class="font-heading fs-10">Cash Deposit</div>
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
+                                                            </div>
                                                             <div class="row no-margin" :class="[{'bg-complete-light': paymentMethod.name === 'Cheque'}, {'text-white': paymentMethod.name === 'Cheque'}, {'hover-complete': paymentMethod.name !== 'Cheque'}]" @click="updatePaymentType({name: 'Cheque', id: 'cheque'})">
                                                                 <div class="col b-b b-grey p-t-10 p-b-10 pointer hover-t-10 p-b-10">
                                                                     <div class="row align-items-center justify-content-center">
@@ -166,7 +166,7 @@
                                     <button class="btn btn-xs all-caps b-rad-none btn-default bg-master-lighter btn-block" @click="expandPayment = false">Cancel</button>
                                 </div>
                                 <div class="col p-l-0">
-                                    <button class="btn btn-xs all-caps b-rad-none btn-success btn-block" @click="submitForm()">Get Quotation</button>
+                                    <button class="btn btn-xs all-caps b-rad-none btn-success btn-block" @click="submitForm()">Create Booking</button>
                                 </div>
                             </div>
                         </div>
@@ -246,7 +246,7 @@
                                     <button class="btn btn-xs all-caps b-rad-none btn-default bg-master-lighter btn-block" @click="cancelQuotation()">Cancel</button>
                                 </div>
                                 <div class="col p-l-0">
-                                    <button class="btn btn-xs all-caps b-rad-none btn-success btn-block requestModal" data-type="paymentSummary" >Lock Quotation</button>
+                                    <button class="btn btn-xs all-caps b-rad-none btn-success btn-block requestModal" data-type="paymentSummary" >Lock Booking</button>
                                 </div>
                                 <modal-component v-if="calculation.total > 0" class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="paymentSummary">
                                     <confirm-quotation-form-component v-on:cancelQuotation="cancelQuotation()" :calculation="calculation" :section="section" :id="item.id" :payment_method="paymentMethod.id" :amount="amount"></confirm-quotation-form-component>
@@ -276,7 +276,7 @@
                 error: '',
                 expandPayment: false,
                 paymentMethod: {
-                    name: 'Cash Deposit',
+                    name: 'Bank Transfer',
                     id: 'cash',
                     status: false
                 },
diff --git a/resources/assets/vue/components/bookings/forms/ConfirmQuotationFormComponent.vue b/resources/assets/vue/components/bookings/forms/ConfirmQuotationFormComponent.vue
index 33c85c61..0cf9cdfb 100644
--- a/resources/assets/vue/components/bookings/forms/ConfirmQuotationFormComponent.vue
+++ b/resources/assets/vue/components/bookings/forms/ConfirmQuotationFormComponent.vue
@@ -42,7 +42,7 @@
                     </div>
                     <div class="row m-b-20">
                         <div class="col">
-                            <div class="font-heading text-danger fs-10 m-b-5">Please upload your payment proof before the quotation expires within 12 hours 30 minutes.</div>
+                            <div class="font-heading text-danger fs-10 m-b-5">Please upload your payment proof before the booking expires within 12 hours 30 minutes.</div>
                         </div>
                     </div>
                     <div class="row m-b-5">
@@ -50,7 +50,7 @@
                             <button class="btn btn-sm all-caps b-rad-none btn-default bg-master-lighter" data-dismiss="modal">Cancel</button>
                         </div>
                         <div class="col-auto">
-                            <button class="btn btn-sm all-caps b-rad-none btn-success" @click="submitForm()">Confirm Quotation</button>
+                            <button class="btn btn-sm all-caps b-rad-none btn-success" @click="submitForm()">Confirm Booking</button>
                         </div>
                     </div>
                     <div class="row text-right">
diff --git a/resources/assets/vue/components/bookings/forms/DeletePaymentAttemptFormComponent.vue b/resources/assets/vue/components/bookings/forms/DeletePaymentAttemptFormComponent.vue
index 39180940..ba371bd4 100644
--- a/resources/assets/vue/components/bookings/forms/DeletePaymentAttemptFormComponent.vue
+++ b/resources/assets/vue/components/bookings/forms/DeletePaymentAttemptFormComponent.vue
@@ -7,7 +7,7 @@
                     <div class="row m-b-20">
                         <div class="col">
                             <h3 class="all-caps">Are you Sure?</h3>
-                            <div class="fs-11">Are you sure you want to delete payment quotation? you will not be able to recover your quotation after confirming your action.</div>
+                            <div class="fs-11">Are you sure you want to delete payment booking? you will not be able to recover your booking after confirming your action.</div>
                         </div>
                     </div>
                     <div class="row">
diff --git a/resources/assets/vue/components/bookings/forms/PaymentVerificationFormComponent.vue b/resources/assets/vue/components/bookings/forms/PaymentVerificationFormComponent.vue
index dde8d47f..958a6ce5 100644
--- a/resources/assets/vue/components/bookings/forms/PaymentVerificationFormComponent.vue
+++ b/resources/assets/vue/components/bookings/forms/PaymentVerificationFormComponent.vue
@@ -45,7 +45,7 @@
                                         <div class="col">
                                             <div class="row m-b-10">
                                                 <div class="col">
-                                                    <div class="font-heading fs-11 text-warning m-b-10">Your payment total shown in the photo should tally with payment attempt total.</div>
+                                                    <div class="font-heading fs-11 text-warning m-b-10">Your payment total shown in the photo should tally with payment booking total.</div>
                                                 </div>
                                             </div>
                                         </div>
diff --git a/resources/assets/vue/components/bookings/sections/BookingDetailsSectionComponent.vue b/resources/assets/vue/components/bookings/sections/BookingDetailsSectionComponent.vue
index 67de1163..0ed00850 100644
--- a/resources/assets/vue/components/bookings/sections/BookingDetailsSectionComponent.vue
+++ b/resources/assets/vue/components/bookings/sections/BookingDetailsSectionComponent.vue
@@ -104,7 +104,7 @@
                         <div class="col">
                             <div class="row m-b-10">
                                 <div class="col">
-                                    <div class="font-head fs-10 all-caps">Payment Attempts</div>
+                                    <div class="font-head fs-10 all-caps">Payment Bookings</div>
                                 </div>
                             </div>
                             <div class="row ">
@@ -169,7 +169,7 @@
                         <div class="col">
                             <div class="row m-b-10">
                                 <div class="col">
-                                    <div class="font-head fs-10 all-caps">Expired Payment Attempts</div>
+                                    <div class="font-head fs-10 all-caps">Expired Payment Bookings</div>
                                 </div>
                             </div>
                             <div class="row">
@@ -248,7 +248,7 @@
                                         <div class="col-auto" :class="[{'bg-master-light': item.status === 1}, {'bg-master-lighter': item.status === 2}, {'bg-primary': item.status === 3}, {'pointer': item.status === 3}]">
                                             <div class="row align-items-center h-100">
                                                 <div class="col">
-                                                    <i class="fa" :class="[{'fa-spinner': item.status === 1 || item.status === 2}, {'fa-cloud-download': item.status === 3}, {'fa-ban': item.status === 4}, {'text-white': item.status === 3}, {'text-danger':  item.status === 4}]"></i>
+                                                    <i class="fa" :class="[{'fa-cloud-download': item.status === 3 || item.status === 1 || item.status === 2}, {'fa-ban': item.status === 4}, {'text-white': item.status === 3}, {'muted': item.status === 1 || item.status === 2}, {'text-danger':  item.status === 4}]"></i>
                                                 </div>
                                             </div>
                                         </div>
diff --git a/resources/assets/vue/components/companies/elements/IdentificationVerificationComponent.vue b/resources/assets/vue/components/companies/elements/IdentificationVerificationComponent.vue
index 3c139e5d..bc27b658 100644
--- a/resources/assets/vue/components/companies/elements/IdentificationVerificationComponent.vue
+++ b/resources/assets/vue/components/companies/elements/IdentificationVerificationComponent.vue
@@ -79,7 +79,13 @@
                                     </div>
                                     <div class="row no-margin">
                                         <div v-for="file in item.files" v-bind:key="file.id"  class="col-auto no-padding m-r-5">
-                                            <document-file-viewr-component :file="file"></document-file-viewr-component>
+                                            <document-file-viewr-component :file="file">
+                                                <template slot="button">
+                                                    <div class="icon-thumbnail fs-11 text-white icon-25 bg-primary btn-rounded float-left m-r-5">
+                                                        <i class="fa fa-file-image-o fs-10"></i>
+                                                    </div>
+                                                </template>
+                                            </document-file-viewr-component>
                                         </div>
                                     </div>
                                 </div>
diff --git a/resources/assets/vue/components/general/elements/DocumentFileViewrComponent.vue b/resources/assets/vue/components/general/elements/DocumentFileViewrComponent.vue
index 6334f82e..85959a5e 100644
--- a/resources/assets/vue/components/general/elements/DocumentFileViewrComponent.vue
+++ b/resources/assets/vue/components/general/elements/DocumentFileViewrComponent.vue
@@ -1,15 +1,15 @@
 <template>
     <div class="row parentContainer">
         <div class="col">
-            <div class="icon-thumbnail fs-11 text-white icon-25 bg-primary btn-rounded float-left m-r-5 requestModal pointer" @click="loadFile" data-type="filePreview">
-                <i class="fa fa-file-image-o fs-10"></i>
+            <div class="requestModal pointer" @click="loadFile" data-type="filePreview">
+                <slot name="button" ></slot>
             </div>
             <modal-component styleType="fill-in" type="filePreview">
                 <loading-component style="height: 200px; top: 0;" key="1" color="success" v-show="isLoading"></loading-component>
                 <div class="row">
                     <div class="col text-center">
                         <img :src="src" class="w-100" v-if="type !== 'pdf'">
-                        <iframe v-if="type === 'pdf'" class="pdf-display" :src="'data:application/pdf;base64,'+src"></iframe>
+                        <iframe v-if="type === 'pdf'" class="pdf-display w-100 scrollable" style="height: 80vh" :src="'data:application/pdf;base64,'+src"></iframe>
                     </div>
                 </div>
             </modal-component>
@@ -42,7 +42,7 @@
                 if(!this.loaded) {
                     this.isLoading = true;
                     let filePath = this.type === 'pdf' ? this.file.file.file_info.original.file : this.file.file.file_info[0].original.file;
-                    this.submit(this.route('api.storage.document.file', filePath), 'get', 'imagePreviewSection', false, false)
+                    this.submit(this.route('api.storage.document.file', filePath)+'/', 'get', 'imagePreviewSection', false, false)
                 }
             },
             renderPdf() {
diff --git a/routes/api.php b/routes/api.php
index d82807ca..7318ce13 100644
--- a/routes/api.php
+++ b/routes/api.php
@@ -27,7 +27,7 @@ Route::group(['middleware' => 'api', 'prefix' => 'v1', 'as' => 'api.'], function
 
     Route::group(['middleware' => 'valid.token'], function () {
 
-        Route::get('/storage/{fileName}', 'Documents\RenderDocumentController@fileStorageServe')->where(['fileName' => '.*'])->name('storage.document.file');
+        Route::get('/storage/{fileName}/fetch', 'Documents\RenderDocumentController@fileStorageServe')->where(['fileName' => '.*'])->name('storage.document.file');
 
         require __DIR__ . '/company.php';