diff --git a/app/controllers/Complaints.php b/app/controllers/Complaints.php
index 964bf72..ce832fc 100644
--- a/app/controllers/Complaints.php
+++ b/app/controllers/Complaints.php
@@ -67,11 +67,6 @@ public function returnComplaintsbyCustomer(string $a = '', string $b = '', strin
 
         $this->view('customer/components/complaintlist', $data);
 
-      
-
-        
-
-
     }
     
     public function returnComplaintbyCustomer(string $a = '', string $b = '', string $c = ''):void {
@@ -108,4 +103,14 @@ public function returnComplaintbyCustomer(string $a = '', string $b = '', string
         $this->view('customer/components/complaint', ['complaint' => $complaint, 'order' => $order, 'items' => $items]);
     }
 
+    public function rentCompaints(string $a = '', string $b = '', string $c = ''):void {
+        $rentcomplaint = new RentComplaintModel;
+        $data = ['customer_id' => UserMiddleware::getUser()['id']];
+        $data['complaints'] = $rentcomplaint->getComplaintsByCustomer($data);
+        show ($data['complaints']);
+
+        $this->view('customer/components/customercomplaintlist', $data);
+    }
+
+
 }
\ No newline at end of file
diff --git a/app/models/RentComplaint.php b/app/models/RentComplaint.php
index 89a1bd4..65a0b37 100644
--- a/app/models/RentComplaint.php
+++ b/app/models/RentComplaint.php
@@ -22,6 +22,16 @@ public function createComplaint($data) {
         public function getComplaints(array $data) {
             return $this->where($data);
         }
+
+        public function getComplaintsByCustomer(array $data) {
+            $q = new QueryBuilder;
+            $q->setTable('rent_complaint');
+            $q->select('rent.customer_id as customer_id, rent.id as rent_id, complaint_no as complaint_no, rent_complaint.status as status, rent_complaint.description as description, rent_complaint.created_at as created_at')
+            ->join('rent', 'rent_complaint.rent_id','rent.id')
+            ->where('rent.customer_id', $data['customer_id']);
+
+            return $this->query($q->getQuery(), $q->getData());
+        }
     
     }
 
diff --git a/app/views/customer/complaints.view.php b/app/views/customer/complaints.view.php
index caa037c..1aa4539 100644
--- a/app/views/customer/complaints.view.php
+++ b/app/views/customer/complaints.view.php
@@ -3,16 +3,15 @@
 require_once('../app/views/navbar/customer-navbar.php');
 ?>
 
-<div class="container flex-d flex-md-c justify-content-center mt-5">
-    <div class="cl-lg-12 flex-d-c gap-2 mt-5">
+<div class="container flex-d flex-md-c justify-content-center mt-5 bg-color-primary h-100">
+    <div class="col-lg-10 flex-d-c gap-2 mt-5">
         <div class="card card-normal">
             <!-- <button class="btn-text-green">hi</button> -->
             <h2 class="justufy-content-ceneter flex-d"> Complaints </h2>
 
             <div class="section-switch flex-d gap-3 flex-wrap">
-                <button class="btn-selected">My complaints</button>
-                <button class="btn-selected">Add complaints</button>
-                <button class="btn-selected">Recieved complaints</button>
+                <button class="btn-selected" id="rentCompaints">My complaints</button>
+                <button class="btn-selected" id="returnComplaintsbyCustomer">Recieved complaints</button>
             </div>
 
             <div class="row gap-2">
@@ -33,7 +32,7 @@ function getComplaints(status) {
             headers:{
                 'Authorization': 'Bearer' + getCookie('jwt_auth_token')
             },
-            url: '<?= ROOT_DIR ?>/complaints/returnComplaintsbyCustomer/' + status,
+            url: '<?= ROOT_DIR ?>/complaints/' + status,
             type: 'GET',
             success: function(response) {
                 //if complain-list-content in document remove it
@@ -46,7 +45,7 @@ function getComplaints(status) {
     }
 
     $(document).ready(function(){
-        getComplaints('myComplaints');
+        getComplaints('returnComplaintsbyCustomer');
         $('.section-switch button').click(function() {
             $('.section-switch button').removeClass('active');
             $(this).addClass('active');
diff --git a/app/views/customer/components/customercomplaintlist.view.php b/app/views/customer/components/customercomplaintlist.view.php
new file mode 100644
index 0000000..16a3a4f
--- /dev/null
+++ b/app/views/customer/components/customercomplaintlist.view.php
@@ -0,0 +1,111 @@
+
+<div id="complaint-list-content" class=" col-lg-12">
+
+    
+<?php
+
+//  oreders list 
+  ($complaints) ?  : print('<div class="col-lg-12"><h1>No Complaints</h1></div>');  
+
+    foreach ($complaints as $complaint) {
+        ?>
+        
+        <div class = "row flex-d col-lg-12 complaint-card-item row-content" id="complaint-card">
+        <div class="complaint card  card-normal3 col-lg-12 flex-md-c miw-200px" data-id="<?= $complaint->id ?>">
+            <div class="complaint-header">
+                <div class="complaint-id">Complaint ID: <?= $complaint->complaint_no ?></div>
+                <div class="complaint-status">Status: <?= $complaint->status ?></div>
+            </div>
+
+            <div class="complaint-body">
+                <div class="complaint-description"> <?= $complaint->description ?></div>
+            </div>
+
+            <div class="complaint-actions flex-d gap-3">
+                <button class="btn-text-green" id="view-button"><i class="fa fa-list" aria-hidden="true"></i> View</button>
+                <button class="btn-text-red" id="cancel-complaint"><i class="fa fa-times" aria-hidden="true"></i> Cancel</button>  
+                <!-- if status pending set show  -->
+                <!-- <?php if ($complaint->status == 'myComplaints') {
+                   
+
+                    
+                        
+                    
+                    ?>
+                    <div class="flex-d-c">
+                    <button class="btn-text-red" id="cancel-complaint"><i class="fa fa-times" aria-hidden="true"></i> Cancel</button>  
+
+
+                    <button class="btn-text-red" id="cancel-rented" hidden>Cancel</button>
+                    </div>
+                <?php 
+                 }
+                elseif ($complaint->status == 'rented') { ?>
+                    <button class="btn btn-primary" id="mark-as-returned">Mark as Returned</button>
+                <?php }
+                elseif ($complaint->status == 'pending') { ?>
+                    <button class="btn-text-orange" id="accept-complaint"><i class="fa fa-check" aria-hidden="true"></i> Accept</button>
+                    <button class="btn-text-red" id="cancel-complaint"><i class="fa fa-times" aria-hidden="true"></i> Cancel</button>  
+                <?php }
+                ?> -->
+
+  
+            </div>
+        </div>
+        </div>
+        <?php
+    }
+
+
+
+?>
+
+
+</div>
+
+
+
+
+<!-- View modal -->
+
+<div class="modal" id="complaint-view-modal">
+    <div class="modal-content">
+        <span class="close">&times;</span>
+        
+        
+        <div id="complaint-data">   </div>
+    </div>
+</div>
+
+
+
+<!-- Complaint Modals -->
+
+<div id="report-complaint-modal" class="modal">
+    <div class="modal-content">
+        <span class="close">&times;</span>
+        
+        <div id="complaint-form-data">
+
+        </div>
+    </div>
+</div>
+
+
+<!-- complaint cancel -->
+
+<div id="cancel-complaint-modal" class="modal">
+    <div class="modal-content">
+        <span class="close">&times;</span>
+        <h2>Cancel Complaint</h2>
+        <p>Are you sure you want to cancel this complaint?</p>
+        <div class="flex-d gap-3 mt-3">
+            <button class="btn btn-primary" id="cancel-complaint-confirm">Yes</button>
+            <button class="btn btn-danger modal-close" id="cancel-complaint-cancel">No</button>
+        </div>
+    </div>
+</div>
+
+<style>
+ 
+</style>
\ No newline at end of file
diff --git a/app/views/customer/orders.view.php b/app/views/customer/orders.view.php
index 21bb5e5..1211653 100644
--- a/app/views/customer/orders.view.php
+++ b/app/views/customer/orders.view.php
@@ -5,8 +5,8 @@
 
 ?>
 
-<div class="container flex-d flex-md-c justify-content-center mt-5">
-    <div class=" col-lg-12 flex-d-c gap-2 mt-5 ">
+<div class="container flex-d flex-md-c justify-content-center mt-5 bg-color-primary">
+    <div class=" col-lg-10 flex-d-c gap-2 mt-5 ">
 
         <div class="card card-normal ">
 
diff --git a/app/views/customer/rent.view.php b/app/views/customer/rent.view.php
index 4bab071..f3df616 100644
--- a/app/views/customer/rent.view.php
+++ b/app/views/customer/rent.view.php
@@ -8,7 +8,7 @@
 
 
 
-<div class="container flex-d-c justify-content-center gap-2">
+<div class="container flex-d-c justify-content-center gap-2 bg-color-primary">
 
 <div class="row gap-2 justify-content-end mt-7">
     <!-- Cart -->
@@ -23,41 +23,57 @@
  
 </div>
 
-    <div class="row gap-2">
-        <!-- Change date -->
-        <button id="change-date" class="btn" type="button">Change Date</button>
-        
+<div class="customer-header w-100 flex-d-c justify-content-center align-items-center">
+    
+
+
+
+
+<div class="col-lg-6 flex-d justify-content-center w-100 p-1 ">
+    <div class="card-normal mw-100 pl-10 w-100">
+        <div class="col gap-2">
+            <!-- Change date -->
+            <div>
+                 <p class="date-change-phase" id="date-change-phase" ><? echo isset($cart) ? "Selected Date: " . $cart->start_date . " - " . $cart->end_date : "Select Date"; ?></p>
+            </div>
+            <div>
+            <button id="change-date" class="btn-text-green" type="button"><i class="fa fa-calendar"></i> Change Date</button>
+            </div>
+        </div>
     </div>
+</div>
 
 
 
-<div class="row">
-    <div class="col-lg-8 flex-d justify-content-center " >
 
+<div class="col-lg-6 flex-d justify-content-center w-100 p-1">
+    <div class="card-normal mw-100 pl-10 w-100">
+        <div class="row">
+            <div class="col-lg-8 flex-d justify-content-center">
+                <div class = "search-container col-lg-12">
+                <form action="<?= ROOT_DIR ?>/search" method="get">
+                    <div class="row gap-2 w-100">
+                        <input type="text" id="search-input" class="form-control-lg"  placeholder="Search item by name.." name="search">
+           
+                        <input type="text" class="form-control no-display" id="latitude" name="latitude" hidden/>
+                        <input type="text" class="form-control no-display" id="longitude" name="longitude" hidden/>
+                        <button id="get-location" class="btn-icon" > <i class="fa fa-map-marker"></i></button>
+                        <button id="search-button"  class="btn-icon" type="submit"><i class="fa fa-search"></i></button>
 
-        <div class = "search-container col-lg-12">
-            <form action="<?= ROOT_DIR ?>/search" method="get">
-            <div class="row gap-2">
-                <input type="text" id="search-input"  placeholder="Search.." name="search">
-                <!-- Select Type of result -->
-                <select name="type" id="type">
-                    <option value="all">All</option>
-                    <option value="shops">Shops</option>
-                    <option value="items">Items</option>
-                </select>
-                <!-- Select location button  -->
-                <input type="text" class="form-control no-display" id="latitude" name="latitude" hidden/>
-                <input type="text" class="form-control no-display" id="longitude" name="longitude" hidden/>
-                <button id="get-location" class="btn-icon" > <i class="fa fa-map-marker"></i></button>
-                <button id="search-button"  class="btn-icon" type="submit"><i class="fa fa-search"></i></button>
+                        
+                    </div>
+                </form>
+                </div>
             </div>
-            </form>
+        </div>
     </div>
-
 </div>
 
 
 
+</div>
+
+
 <div class="row" id="search-result"> 
 </div>
 <div class="row" id="item-list">
@@ -69,10 +85,11 @@
     <div class="modal-content ">
     <span class="close">&times;</span>
 
-    <div class=" col-lg-12 flex-d-c gap-2 ">
-
-        <input id="pac-input" class="controls " type="text" placeholder="Enter Location" />
+    <div class=" col-lg-12 flex-d-c gap-2 location-container">
 
+    <div class="location-form-element">    
+    <input id="pac-input" class="controls " type="text" placeholder="Enter Location" />
+    </div>
         <div id="map-canvas" class="map-canvas"> </div>
 
             <!-- <input type="text" class="form-control" id="latitude"  hidden/>
@@ -81,7 +98,6 @@
         <div class="location-button-container">
             <button id="confirm-location" class="location-button btn" type="button">Confirm Location</button>
         </div>
-
     </div>
     </div>
 
@@ -97,12 +113,11 @@
         <div class="row gap-2">
 
             <div class="date"><label for="start-date">Start Date</label></div>
-            <div class="date"><input type="date" id="start-date" class="form-control-lg " name="start-date" required value="<?php isset($cart)  && print($cart->start_date); ?>"
-            ></div>
+            <div class="date"><input type="date" id="start-date" class="form-control-lg " name="start-date" required value="<?php isset($cart)  && print($cart->start_date); ?>"></div>
             <div class="date"><label for="end-date">End Date</label></div>
             <div class="date"><input type="date" id="end-date" class="form-control-lg" name="end-date" required value="<?php isset($cart)  && print($cart->end_date); ?>"></div>
             <div class="date">
-            <h5>Select days you want to rent camping equipment. If you change the date new cart will be created. Items added to the previous cart will be removed.</h5>
+            <div class="date-para"><h5>Select days you want to rent camping equipment. If you change the date new cart will be created. Items added to the previous cart will be removed.</h5></div>
         </div>
         </div>  
         <div class="row gap-2">
@@ -475,6 +490,8 @@ function setNewDate(start, end) {
 
     });
 
+    $('#date-change-phase').text("Selected Date: " + start + " - " + end);
+
 
     
 
@@ -528,9 +545,9 @@ function setNewDate(start, end) {
 
     // function / use jQuery
     function disableButton(id) {
-        var button = $(`[data-id=${id}]`).find('#add-to-cart');
-        button.text('Added');
-        button.prop('disabled', true);
+        // var button = $(`[data-id=${id}]`).find('#add-to-cart');
+        // button.text('Added');
+        // button.prop('disabled', true);
     }
 
     // get cart count
diff --git a/database/sarani/rent_complaint.sql b/database/sarani/rent_complaint.sql
new file mode 100644
index 0000000..6c9f5a3
--- /dev/null
+++ b/database/sarani/rent_complaint.sql
@@ -0,0 +1,62 @@
+-- phpMyAdmin SQL Dump
+-- version 5.2.1
+-- https://www.phpmyadmin.net/
+--
+-- Host: mysql-server
+-- Generation Time: Apr 23, 2024 at 06:11 AM
+-- Server version: 8.2.0
+-- PHP Version: 8.2.8
+
+SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
+START TRANSACTION;
+SET time_zone = "+00:00";
+
+
+/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
+/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
+/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
+/*!40101 SET NAMES utf8mb4 */;
+
+--
+-- Database: `wanderlust`
+--
+
+-- --------------------------------------------------------
+
+--
+-- Table structure for table `rent_complaint`
+--
+
+CREATE TABLE `rent_complaint` (
+  `id` int NOT NULL,
+  `rent_id` int DEFAULT NULL,
+  `title` varchar(255) DEFAULT NULL,
+  `description` text,
+  `created_at` timestamp NULL DEFAULT CURRENT_TIMESTAMP,
+  `status` enum('pending','cancelled','resolved') DEFAULT NULL
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;
+
+--
+-- Indexes for dumped tables
+--
+
+--
+-- Indexes for table `rent_complaint`
+--
+ALTER TABLE `rent_complaint`
+  ADD PRIMARY KEY (`id`);
+
+--
+-- AUTO_INCREMENT for dumped tables
+--
+
+--
+-- AUTO_INCREMENT for table `rent_complaint`
+--
+ALTER TABLE `rent_complaint`
+  MODIFY `id` int NOT NULL AUTO_INCREMENT;
+COMMIT;
+
+/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
+/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
+/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
diff --git a/public/assets/scss/wl/dashboard/_card.scss b/public/assets/scss/wl/dashboard/_card.scss
index 29c399e..d1cdb36 100644
--- a/public/assets/scss/wl/dashboard/_card.scss
+++ b/public/assets/scss/wl/dashboard/_card.scss
@@ -79,6 +79,23 @@
     border: $gray-text 3px inherit;
 }
 
+.card-normal-green {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    min-width: 300px;
+    margin: 20px;
+    margin-bottom: 1.5rem;
+    padding: 20px;
+    background-color: $color-primary;
+    border-radius: 15px;
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+    transition: all 0.3s ease-in-out;
+    gap: 20px;
+    flex-grow: inherit;
+}
 
 .card-invert {
     display: flex;
diff --git a/public/assets/scss/wl/dashboard/_complaints.scss b/public/assets/scss/wl/dashboard/_complaints.scss
index f448cd5..286da74 100644
--- a/public/assets/scss/wl/dashboard/_complaints.scss
+++ b/public/assets/scss/wl/dashboard/_complaints.scss
@@ -14,6 +14,18 @@
     }
 }
 
+.complaint-body { 
+    .complaint-description {
+      display: flex;
+      // justify-content: center;
+      font-weight: 400;
+      font-family: sans-serif, 'Poppins';
+      font-size: $header4 ;
+      color: $gray-text;
+      font-style: italic;
+    }
+  }
+
 .modal-content {
     border-radius: 20px;
     padding: 10px 20px  10px  10px;
diff --git a/public/assets/scss/wl/dashboard/_customer.scss b/public/assets/scss/wl/dashboard/_customer.scss
index 815d35c..4ecd524 100644
--- a/public/assets/scss/wl/dashboard/_customer.scss
+++ b/public/assets/scss/wl/dashboard/_customer.scss
@@ -614,3 +614,66 @@ margin: 1px 0;
     }
 }
 
+.search-bar {
+  display: flex;
+  flex-direction: row;
+  background-color: $color-white;
+}
+
+.date-change-phase{
+  font-style: italic;
+}
+
+.date-para {
+  justify-content: center;
+}
+
+.customer-header {
+  // background-color: $color-dark;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  // padding: 0 30rem 0 30rem;
+  max-width: 100%;
+}
+
+.location-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 30px;
+  transform: translate(10px, 20px);
+
+  
+}
+
+.location-form-element {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 10px;
+  width: 100%;
+  border-radius: 10px;
+  transition: all 0.3s ease-in-out;
+
+  input {
+    width: 100%;
+    padding: 10px;
+    border: none;
+    border-radius: 10px;
+    outline: none;
+    font-family: sans-serif, 'Poppins';
+    font-size: $header4 ;
+    color: $gray-text;
+    background-color: $color-lighter;
+  }
+
+}
+
+.location-button-container {
+  display: flex;
+  justify-content: center;
+  padding: 15px 0 0 0;
+}
diff --git a/public/assets/scss/wl/dashboard/_rowcol.scss b/public/assets/scss/wl/dashboard/_rowcol.scss
index 7ca11fd..b117a71 100644
--- a/public/assets/scss/wl/dashboard/_rowcol.scss
+++ b/public/assets/scss/wl/dashboard/_rowcol.scss
@@ -47,6 +47,12 @@
 
   }
 
+  .col-lg-10{
+    flex: 0 0 83.333333%;
+    max-width: 83.333333%;
+    width: 83.333333%;
+  }
+
   .col-lg-12 {
     flex: 0 0 100%;
     max-width: 100%;
diff --git a/public/assets/scss/wl/dashboard/common/_colors.scss b/public/assets/scss/wl/dashboard/common/_colors.scss
new file mode 100644
index 0000000..5df7a76
--- /dev/null
+++ b/public/assets/scss/wl/dashboard/common/_colors.scss
@@ -0,0 +1,3 @@
+.bg-color-primary {
+    background-color: $color-lighter;
+}
\ No newline at end of file
diff --git a/public/assets/scss/wl/dashboard/index.scss b/public/assets/scss/wl/dashboard/index.scss
index fd0a1a1..efbb4b1 100644
--- a/public/assets/scss/wl/dashboard/index.scss
+++ b/public/assets/scss/wl/dashboard/index.scss
@@ -29,6 +29,7 @@
 @import "./common/width";
 @import "./common/rounded";
 @import "./common/position";
+@import "./common/colors";
 
 
 @import "./navbar/navbar";