diff --git a/app/Views/invoice_form.php b/app/Views/invoice_form.php
index 8b468560..8428f094 100644
--- a/app/Views/invoice_form.php
+++ b/app/Views/invoice_form.php
@@ -9,7 +9,7 @@
                         <div class="form-row">
                             <div class="form-group col-md-6">
                                 <label for="customerName">Customer Name<span class="text-danger"> *</span></label>
-                                <select class="form-control" id="customerName" name="customer_name" required>
+                                <select class="form-control" id="customerName" name="customer_name" required data-toggle="select2">
                                     <option value="">Select a customer</option>
                                     <?php foreach ($customers as $customer) : ?>
                                         <option value="<?= $customer->customer_id ?>" <?php if (isset($invoice_details['customer_id']) && ($invoice_details['customer_id'] === $customer->customer_id)) echo "selected"; ?>>
@@ -21,7 +21,7 @@
 
                             <div class="form-group col-md-6">
                                 <label for="loadShippingDropdown">Shipping Address</label>
-                                <select class="form-control" id="loadShippingDropdown" name="shipping_address_id">
+                                <select class="form-control" id="loadShippingDropdown" name="shipping_address_id" data-toggle="select2">
                                     <option value="">Select an address</option>
                                 </select>
                             </div>
@@ -106,7 +106,7 @@
                             <div class="form-group col-md-12">
                                 <label for="event" class="col-form-label">Events</label>
                                 <input type="hidden" id="hiddenEventNextId" name="event_next_id" placeholder="hidden for event next id" />
-                                <select class="form-control" id="event" name="event_id">
+                                <select class="form-control" id="event" name="event_id" data-toggle="select2">
                                     <option value="">Select an Events</option>
                                     <?php foreach ($events as  $event) : ?>
                                         <!-- <option value="<?= $event->id ?>"><?= $event->event_name ?></option> -->
@@ -127,23 +127,21 @@
                             </div>
                         </div>
                         <div class="form-row">
-                            <div class="form-group col-md-6">
+                            <div class="form-group col-md-4">
                                 <label for="invoiceDate">Invoice Date<span class="text-danger"> *</span></label>
                                 <input type="date" class="form-control" id="invoiceDate" name="invoice_date" value="<?= isset($invoice_details['invoice_date']) ? $invoice_details['invoice_date'] : '' ?>" required>
                             </div>
+                            <?php if ($invoice_type === '1') : ?>
+                                <div class="form-group col-md-4">
+                                        <label for="fromsubcription">From Subcription</label>
+                                        <input type="date" class="form-control" id="fromsubcription" name="from_subscription" value="<?= isset($invoice_item_details[0]['from_subscription']) ? $invoice_item_details[0]['from_subscription'] : '' ?>">
+                                </div>
+                                <div class="form-group col-md-4">
+                                        <label for="tosubcription">To Subcription</label>
+                                        <input type="date" class="form-control" id="to_subcription" name="to_subscription" value="<?= isset($invoice_item_details[0]['to_subscription']) ? $invoice_item_details[0]['to_subscription'] : '' ?>">
+                                </div>
+                            <?php endif; ?>
                         </div>
-                        <?php if ($invoice_type === '1') : ?>
-                            <div class="form-row">
-                                <div class="form-group col-md-6">
-                                    <label for="fromsubcription">From Subcription</label>
-                                    <input type="date" class="form-control" id="fromsubcription" name="from_subscription" value="<?= isset($invoice_item_details[0]['from_subscription']) ? $invoice_item_details[0]['from_subscription'] : '' ?>">
-                                </div>
-                                <div class="form-group col-md-6">
-                                    <label for="tosubcription">To Subcription</label>
-                                    <input type="date" class="form-control" id="to_subcription" name="to_subscription" value="<?= isset($invoice_item_details[0]['to_subscription']) ? $invoice_item_details[0]['to_subscription'] : '' ?>">
-                                </div>
-                            </div>
-                        <?php endif; ?>
                         <div class="form-row">
                             <div class="form-group col-md-12">
                                 <h4>Item Details</h4>
@@ -165,7 +163,7 @@
                                         <?php if (!empty($invoice_item_details)) {
                                             foreach ($invoice_item_details as $inx => $ii_details) :  ?>
                                                 <tr>
-                                                    <td><select class="form-control" id="<?= "book" . $inx; ?>" name="item_details[]" onchange="displayBookTag(this,<?= $inx; ?>)" required>
+                                                    <td><select class="form-control" id="<?= "book" . $inx; ?>" name="item_details[]" onchange="displayBookTag(this,<?= $inx; ?>)" required data-toggle="select2">
                                                             <option value="">Select a book</option>
                                                             <?php foreach ($books as  $book) : ?>
                                                                 <option value="<?= $book->book_id ?>" <?php if (isset($ii_details['product']) && ($ii_details['product'] === $book->book_id)) echo "selected"; ?>>
@@ -200,7 +198,7 @@
                                             <?php endforeach;
                                         } else { ?>
                                             <tr>
-                                                <td style="width:30%;"><select class="form-control" id="book0" name="item_details[]" onchange="displayBookTag(this,0)" required>
+                                                <td style="width:30%;"><select class="form-control" id="book0" name="item_details[]" onchange="displayBookTag(this,0)" required data-toggle="select2">
                                                         <option value="">Select a book</option>
                                                         <?php foreach ($books as  $book) : ?>
                                                             <option value="<?= $book->book_id ?>"><?= $book->title ?>
@@ -371,27 +369,12 @@
         var cell7 = newRow.insertCell(6);
         var cell8 = newRow.insertCell(7);
 
-
-        const select = document.createElement('select');
-        select.className = 'form-control';
-        select.id = 'book' + counter;
-        select.name = 'item_details[]';
-        select.onchange = function() {
-            displayBookTag(select, counter);
-        };
-        const defaultOption = document.createElement('option');
-        defaultOption.value = '';
-        defaultOption.text = 'Select a book';
-        select.appendChild(defaultOption);
-
-        // Use forEach to add options to the select element
-        bookArray.forEach((option) => {
-            const optionElement = document.createElement('option');
-            optionElement.value = option.book_id;
-            optionElement.text = option.title;
-            select.appendChild(optionElement);
-        });
-        cell1.appendChild(select);
+        cell1.innerHTML = `<select class="form-control book-select" id="book${counter}" name="item_details[]" onchange="displayBookTag(this, ${counter})" data-toggle="select2">
+            <option value="">Select a book</option>
+            <?php foreach ($books as $book) : ?>
+                <option value="<?= $book->book_id ?>"><?= $book->title ?></option>
+            <?php endforeach; ?>
+            </select>`;
         // cell1.innerHTML = '<input type="text" class="form-control" name="item_details[]">';
         cell2.innerHTML = '<input type="number" class="form-control" id="quantity' + counter + '" name="quantity[]" oninput="calculateInvoice(this,' + counter + ')">';
         cell3.innerHTML = '<input type="text" class="form-control" id="rate' + counter + '" name="rate[]" oninput="calculateInvoice(this,' + counter + ')">';
@@ -408,6 +391,7 @@
         newRow.querySelector('.book-select').addEventListener("change", function() {
             displayBookTag(this, counter);
         });
+        $(newRow.querySelector('.book-select')).select2();
         newRow.querySelector('.quantity-input').addEventListener("input", function() {
             calculateInvoice(this, counter);
         });
@@ -420,7 +404,6 @@
         newRow.querySelector('.discount-type-select').addEventListener("change", function() {
             calculateInvoice(this, counter);
         });
-
     });
 
     // cell4.getElementsByTagName("input")[0].addEventListener("change", calculateInvoice);