diff --git a/app/controllers/API/Pay.php b/app/controllers/API/Pay.php
index 5b7a78e..dd75d1c 100644
--- a/app/controllers/API/Pay.php
+++ b/app/controllers/API/Pay.php
@@ -135,6 +135,43 @@ public function fullPay(string $a = '', string $b = '', string $c = ''):void {
 
 
 
+    }
+
+    public function unpaid(string $a = '', string $b = '', string $c = ''):void {
+        AuthorizationMiddleware::authorize(['customer']);
+
+        $request = new JSONRequest();
+        $response = new JSONResponse();
+
+        $payment = new PaymentModel;
+
+        $data['payments'] = $payment->first($request->getAll());
+
+        $merchant_id = MERCHANT_ID;
+        $merchant_secret = MERCHANT_SECRET;
+
+        $hash = strtoupper(
+            md5(
+                $merchant_id . 
+                $data['payments']->reference_number . 
+                // number_format($order->totalAmount, 2, '.', '') .
+                $data['payments']->amount .
+                'LKR' .  
+                strtoupper(md5($merchant_secret))
+            ) 
+        );
+
+        $data['hash'] = $hash;
+        $data['merchant_id'] = $merchant_id;
+        $data['orderId'] = $data['payments']->reference_number;
+        $data['amount'] = $data['payments']->amount;
+
+        $response->data($data)->statusCode(200)->send();
+
+
+       
+
+
     }
 
 }
diff --git a/app/views/customer/components/items.view.php b/app/views/customer/components/items.view.php
index dd056ef..46f6867 100644
--- a/app/views/customer/components/items.view.php
+++ b/app/views/customer/components/items.view.php
@@ -24,7 +24,7 @@
                     <i class="fa fa-star-half-o" aria-hidden="true"></i>
                     <i class="fa fa-star-o" aria-hidden="true"></i>
                     </div> -->
-                    <button  class="btn btn-primary">Add to Cart</button>
+                    <button  class="btn btn-primary">View</button>
                 </div>
             </div>
             </div>
diff --git a/app/views/customer/components/orderlist.view.php b/app/views/customer/components/orderlist.view.php
index 983d2ee..425df3d 100644
--- a/app/views/customer/components/orderlist.view.php
+++ b/app/views/customer/components/orderlist.view.php
@@ -3,7 +3,8 @@
 <?php
 
 
-
+($orders) ?  :print('<div class="col-lg-12 mih-100px flex-d justify-content-center
+align-items-center text-center"><h2>No Orders</h2></div>');
 
 
 foreach ($orders as $order) {
@@ -31,7 +32,8 @@
 
                 
                 <?php if ($order->payment_status == 'pending') { ?>
-                    <button class="btn-text-blue order-pay-button"><i class="fa fa-credit-card" aria-hidden="true"></i> Pay</button>
+                    <button data-id="<?php echo $order->reference_number; ?>"
+                     class="btn-text-blue order-pay-button"><i class="fa fa-credit-card" aria-hidden="true"></i> Pay</button>
                 <?php } ?>
 
                 <?php if ($order->rent_status == 'rented') { ?>
diff --git a/app/views/customer/orders.view.php b/app/views/customer/orders.view.php
index 849a861..66d0907 100644
--- a/app/views/customer/orders.view.php
+++ b/app/views/customer/orders.view.php
@@ -342,6 +342,37 @@ function loadOrders(status = 'all') {
     });
 
 
+    // Pay button for unpaid
+    $(document).on('click','.order-pay-button', function() {
+        var referenceNo = $(this).closest('button').attr('data-id');
+        console.log(referenceNo);
+        showLoader();
+        // open pay modal
+        $.ajax({
+            url: '<?= ROOT_DIR ?>/api/pay/unpaid',
+            headers: {
+                'Authorization': 'Bearer ' +  getCookie('jwt_auth_token')
+            },
+            type: 'POST',
+            data: JSON.stringify({
+                reference_number: referenceNo
+            }),
+            contentType: 'application/json',
+            success: function(data) {
+                paymentGateWay(data.data);
+              
+            },
+            error: function(data) {
+                console.log(data);
+                alertmsg('Error loading payment details', 'error');
+                hideLoader();
+            }
+
+        });
+
+    });
+
+
 
     function paymentGateWay(data) {
             console.log("Payment gateway");
diff --git a/app/views/rental/components/equipment.view.php b/app/views/rental/components/equipment.view.php
index 9adc32a..a327abe 100644
--- a/app/views/rental/components/equipment.view.php
+++ b/app/views/rental/components/equipment.view.php
@@ -273,7 +273,7 @@
 
        
             <label for="equipment-image">Equipment Image</label>
-            <input type="file" id="equipment-image" class="form-control-lg" name="equipment_image" >
+            <input type="file" id="equipment-image" class="form-control-lg" name="equipment_image" accept="image/*">
 
 
             </div>
diff --git a/app/views/rental/equipments.view.php b/app/views/rental/equipments.view.php
index 0adf16e..b7f5def 100644
--- a/app/views/rental/equipments.view.php
+++ b/app/views/rental/equipments.view.php
@@ -216,7 +216,7 @@
         <h2>Upload Equipment Images</h2>
         <!-- Equipment image upload form -->
         <form method="post" enctype="multipart/form-data">
-            <input type="file" name="equipment_images[]" id="equipment-image-input" class="form-control-lg" accept="image/png, image/jpg, image/gif, image/jpeg" multiple required>
+            <input type="file" name="equipment_images[]" id="equipment-image-input" class="form-control-lg" accept="image/png, image/jpg, image/gif, image/jpeg , image/webp" required>
             <div class="equipment-image-preview-container flex-d mt-2  align-items-center" id="equipment-image-preview"></div>
             <input type="submit" class="btn mt-4" name="submit" value="Select Images" id="equipment-image-submit">
         </form>
@@ -236,6 +236,15 @@
             var imgContainer = $('<div/>', { 'class': 'img-preview-item' });
             var img = $('<img>', { 'class': 'image-preview' }).appendTo(imgContainer);
 
+            // validate file type
+            var fileType = file['type'];
+            var validImageTypes = ['image/jpeg', 'image/png', 'image/jpg', 'image/gif', 'image/webp'];
+            if (!validImageTypes.includes(fileType)) {
+                alertmsg('Invalid file type. Please select an image file' , 'error');
+                // clear 
+                $('#equipment-image-input').val('');
+                return;
+            }
 
 
             var removeButton = $('<button/>', {
@@ -803,9 +812,22 @@ function filterEquipment() {
 
             formData.append('json', JSON.stringify(jsonData));
 
+
+
+
+
+
             if (formData.get('equipment_image') != '') {
                 var image = formData.get('equipment_image');
 
+                // validate file type
+                var fileType = image['type'];
+                var validImageTypes = ['image/jpeg', 'image/png', 'image/jpg', 'image/gif', 'image/webp'];
+                if (!validImageTypes.includes(fileType)) {
+                    alertmsg('Invalid file type. Please select an image file' , 'error');
+                    return;
+                }
+
                 formData.append('image', image);
 
 
diff --git a/app/views/rental/layout/sidebar.php b/app/views/rental/layout/sidebar.php
index a2269c5..d2ccd90 100755
--- a/app/views/rental/layout/sidebar.php
+++ b/app/views/rental/layout/sidebar.php
@@ -228,7 +228,7 @@ function toggleSidebar() {
             </form> -->
             <!-- With image preview -->
             <form method="post" enctype="multipart/form-data">
-                <input type="file" name="image" id="profile-image-input" class="form-control-lg"  accept="image/png, image/jpg, image/gif, image/jpeg" required>
+                <input type="file" name="image" id="profile-image-input" class="form-control-lg"  accept="image/png, image/jpg, image/gif, image/jpeg , image/webp" required>
                 <div class="image-preview-container flex-d-c align-items-center">
                     
                     
@@ -305,7 +305,7 @@ function toggleSidebar() {
                         alertmsg('Image uploaded successfully','success');
                         $('#image-upload').css('display', 'none');
 
-                        $('.profile-image').attr('src', '<?= ROOT_DIR ?>/uploads/images/rental_services/' + data.image);
+                        $('.profile-image').attr('src', '<?= ROOT_DIR ?>/uploads/images/rental_services/' + data.data.image);
                         // $('#profile-image-input').val('');
                         // $('#image-preview').attr('src', '');
                         // location.reload();