diff --git a/src/main/java/com/gcc/publicgrievance/Service/ComplaintService.java b/src/main/java/com/gcc/publicgrievance/Service/ComplaintService.java
index 6e69f94..6d9791c 100644
--- a/src/main/java/com/gcc/publicgrievance/Service/ComplaintService.java
+++ b/src/main/java/com/gcc/publicgrievance/Service/ComplaintService.java
@@ -1,4 +1,7 @@
 package com.gcc.publicgrievance.Service;
+
+import java.util.ArrayList;
+import java.util.Collections;
 import java.util.HashMap;
 
 import java.util.List;
@@ -13,41 +16,52 @@ import org.springframework.web.client.RestTemplate;
 @Service
 public class ComplaintService {
 
-    private final String baseUrl = "https://erp.chennaicorporation.gov.in/pgr/external/mobileservice";
-
-    public String fetchComplaintCategories() {
-        RestTemplate restTemplate = new RestTemplate();
-        String url = baseUrl + "?serviceId=getComplCategory&ComplaintGroupId=null";
-        return restTemplate.getForObject(url, String.class);
-    }
-
-    public String fetchComplaintSubTypes(String groupId) {
-        RestTemplate restTemplate = new RestTemplate();
-        String url = baseUrl + "?serviceId=getComplCategory&ComplaintGroupId=" + groupId;
-        return restTemplate.getForObject(url, String.class);
-    }
-    
-//    public String fetchComplaintdetailsbyId(String complaintid) {
-//        RestTemplate restTemplate = new RestTemplate();
-//        String url = baseUrl + "?serviceId=getComplaintByID&ComplaintId=" + complaintid;
-//        return restTemplate.getForObject(url, String.class);
-//    }
-    
-    public List<Map<String, Object>> fetchComplaintDetailsById(String complaintId) {
-        RestTemplate restTemplate = new RestTemplate();
-        String url = baseUrl + "?serviceId=getComplaintByID&ComplaintId=" + complaintId;
-        String response = restTemplate.getForObject(url, String.class);
-
-        try {
-            ObjectMapper objectMapper = new ObjectMapper();
-            return objectMapper.readValue(response, new TypeReference<List<Map<String, Object>>>() {});
-        } catch (Exception e) {
-            e.printStackTrace();
-            return null;
-        }
-    }
-    
-    
-
-    
+	private final String baseUrl = "https://erp.chennaicorporation.gov.in/pgr/external/mobileservice";
+
+	public String fetchComplaintCategories() {
+		RestTemplate restTemplate = new RestTemplate();
+		String url = baseUrl + "?serviceId=getComplCategory&ComplaintGroupId=null";
+		return restTemplate.getForObject(url, String.class);
+	}
+
+	public String fetchComplaintSubTypes(String groupId) {
+		RestTemplate restTemplate = new RestTemplate();
+		String url = baseUrl + "?serviceId=getComplCategory&ComplaintGroupId=" + groupId;
+		return restTemplate.getForObject(url, String.class);
+	}
+
+	public List<Map<String, Object>> fetchComplaintDetailsById(String complaintId) {
+		RestTemplate restTemplate = new RestTemplate();
+		String url = baseUrl + "?serviceId=getComplaintByID&ComplaintId=" + complaintId;
+		String response = restTemplate.getForObject(url, String.class);
+
+		try {
+			ObjectMapper objectMapper = new ObjectMapper();
+			return objectMapper.readValue(response, new TypeReference<List<Map<String, Object>>>() {
+			});
+		} catch (Exception e) {
+			e.printStackTrace();
+			return null;
+		}
+	}
+
+	public List<Map<String, Object>> fetchComplaintDetailsByMobile(String mobileNo) {
+		RestTemplate restTemplate = new RestTemplate();
+		String url = baseUrl
+				+ "?serviceId=getComplaintListWithImg&From_date=01/01/2024&To_date=20/08/2024&jsonResp=Yes&UserType=Public&MobileNo="
+				+ mobileNo + "&PageIndex=null&Status=null&repYear=2024";
+		String response = restTemplate.getForObject(url, String.class);
+
+		try {
+			ObjectMapper objectMapper = new ObjectMapper();
+			return objectMapper.readValue(response, new TypeReference<List<Map<String, Object>>>() {
+			});
+		} catch (Exception e) {
+			e.printStackTrace();
+			return null;
+		}
+	}
+
+
+
 }
diff --git a/src/main/java/com/gcc/publicgrievance/controller/ComplaintController.java b/src/main/java/com/gcc/publicgrievance/controller/ComplaintController.java
index 0ecd90c..50034ea 100644
--- a/src/main/java/com/gcc/publicgrievance/controller/ComplaintController.java
+++ b/src/main/java/com/gcc/publicgrievance/controller/ComplaintController.java
@@ -57,182 +57,11 @@ public class ComplaintController {
 	public List<Map<String, Object>> getComplaintDetailsById(@RequestParam String complaintid) {
 		return complaintService.fetchComplaintDetailsById(complaintid);
 	}
-	// save api
 
-	/*@PostMapping("/register")
-	public ResponseEntity<String> registerComplaint(
-
-			@RequestParam("ComplainantName") String complainantName,
-
-			@RequestParam("ComplainantAddr") String complainantAddr,
-
-			@RequestParam("MobileNo") String mobileNo,
-
-			@RequestParam("Email") String email,
-
-			@RequestParam("ComplaintType") String complaintType,
-
-			@RequestParam("ComplaintTitle") String complaintTitle,
-
-			@RequestParam("ComplaintDetails") String complaintDetails,
-
-			@RequestParam("StreetId") String streetId,
-
-			@RequestParam("Comp_Image") String compImage,
-
-			@RequestParam("latitude") String latitude,
-
-			@RequestParam("longtitude") String longtitude,
-
-			@RequestParam("Landmark") String landmark,
-
-			@RequestParam("gender") String gender) {
-
-		String externalUrl = "https://erp.chennaicorporation.gov.in/pgr/external/mobileservice"; // // //
-		// Build the URI with parameters
-		UriComponentsBuilder uriBuilder = UriComponentsBuilder.fromHttpUrl(externalUrl)
-				.queryParam("serviceId", "RegComplaint").queryParam("ComplainantName", complainantName)
-				.queryParam("ComplainantAddr", complainantAddr).queryParam("MobileNo", mobileNo)
-				.queryParam("Email", email).queryParam("ComplaintType", complaintType)
-				.queryParam("ComplaintTitle", complaintTitle).queryParam("ComplaintDetails", complaintDetails)
-				.queryParam("StreetId", streetId).queryParam("Comp_Image", compImage).queryParam("latitude", latitude)
-				.queryParam("longtitude", longtitude).queryParam("Landmark", landmark).queryParam("gender", gender); // //
-																											// the
-		// external API
-		ResponseEntity<String> response = restTemplate.postForEntity(uriBuilder.toUriString(), null, String.class); //
-		// // Return the response from the external API
-		return ResponseEntity.status(response.getStatusCode()).body(response.getBody());
-	}*/
-
-	/*
-	 * @PostMapping("/register") public ResponseEntity<String>
-	 * registerComplaint(@RequestParam("ComplainantName") String complainantName,
-	 * 
-	 * @RequestParam("ComplainantAddr") String
-	 * complainantAddr, @RequestParam("MobileNo") String mobileNo,
-	 * 
-	 * @RequestParam("Email") String email, @RequestParam("ComplaintType") String
-	 * complaintType,
-	 * 
-	 * @RequestParam("ComplaintTitle") String complaintTitle,
-	 * 
-	 * @RequestParam("ComplaintDetails") String
-	 * complaintDetails, @RequestParam("StreetId") String streetId,
-	 * 
-	 * @RequestParam("Comp_Image") MultipartFile
-	 * compImage, @RequestParam("latitude") String latitude,
-	 * 
-	 * @RequestParam("longtitude") String longtitude, @RequestParam("Landmark")
-	 * String landmark,
-	 * 
-	 * @RequestParam("gender") String gender) {
-	 * 
-	 * String externalUrl =
-	 * "https://erp.chennaicorporation.gov.in/pgr/external/mobileservice";
-	 * 
-	 * // Convert the image to a Base64 string String base64Image = ""; if
-	 * (!compImage.isEmpty()) { try { byte[] imageBytes = compImage.getBytes();
-	 * base64Image = Base64.getEncoder().encodeToString(imageBytes); } catch
-	 * (IOException e) { return
-	 * ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).
-	 * body("Error encoding image."); } }
-	 * 
-	 * // Build the URI with parameters UriComponentsBuilder uriBuilder =
-	 * UriComponentsBuilder.fromHttpUrl(externalUrl) .queryParam("serviceId",
-	 * "RegComplaint").queryParam("ComplainantName", complainantName)
-	 * .queryParam("ComplainantAddr", complainantAddr).queryParam("MobileNo",
-	 * mobileNo) .queryParam("Email", email).queryParam("ComplaintType",
-	 * complaintType) .queryParam("ComplaintTitle",
-	 * complaintTitle).queryParam("ComplaintDetails", complaintDetails)
-	 * .queryParam("StreetId", streetId).queryParam("Comp_Image", base64Image) //
-	 * Use base64 image here .queryParam("latitude",
-	 * latitude).queryParam("longtitude", longtitude).queryParam("Landmark",
-	 * landmark) .queryParam("gender", gender);
-	 * 
-	 * // Make a POST request to the external API ResponseEntity<String> response =
-	 * restTemplate.postForEntity(uriBuilder.toUriString(), null, String.class);
-	 * 
-	 * // Return the response from the external API return
-	 * ResponseEntity.status(response.getStatusCode()).body(response.getBody());
-	 * 
-	 * }
-	 */
-	/*@PostMapping("/register")
-	public ResponseEntity<String> registerComplaint(
-	        @RequestParam("ComplainantName") String complainantName,
-	        @RequestParam("ComplainantAddr") String complainantAddr,
-	        @RequestParam("MobileNo") String mobileNo,
-	        @RequestParam("Email") String email,
-	        @RequestParam("ComplaintType") String complaintType,
-	        @RequestParam("ComplaintTitle") String complaintTitle,
-	        @RequestParam("ComplaintDetails") String complaintDetails,
-	        @RequestParam("StreetId") String streetId,
-	        @RequestParam("Comp_Image") String compImage,
-	        @RequestParam("latitude") String latitude,
-	        @RequestParam("longtitude") String longtitude,
-	        @RequestParam("Landmark") String landmark,
-	        @RequestParam("gender") String gender) {
-
-	    String externalUrl = "https://erp.chennaicorporation.gov.in/pgr/external/mobileservice";
-
-	    try {
-	        // Create the URL object
-	        URL url = new URL(externalUrl);
-
-	        // Create the HttpURLConnection object
-	        HttpURLConnection conn = (HttpURLConnection) url.openConnection();
-	        conn.setRequestMethod("POST");
-	        conn.setRequestProperty("Content-Type", "application/x-www-form-urlencoded");
-	        conn.setDoOutput(true);
-
-	        // Create the parameters string
-	        String params = "serviceId=RegComplaint" +
-	                "&ComplainantName=" + URLEncoder.encode(complainantName, "UTF-8") +
-	                "&ComplainantAddr=" + URLEncoder.encode(complainantAddr, "UTF-8") +
-	                "&MobileNo=" + URLEncoder.encode(mobileNo, "UTF-8") +
-	                "&Email=" + URLEncoder.encode(email, "UTF-8") +
-	                "&ComplaintType=" + URLEncoder.encode(complaintType, "UTF-8") +
-	                "&ComplaintTitle=" + URLEncoder.encode(complaintTitle, "UTF-8") +
-	                "&ComplaintDetails=" + URLEncoder.encode(complaintDetails, "UTF-8") +
-	                "&StreetId=" + URLEncoder.encode(streetId, "UTF-8") +
-	                "&Comp_Image=" + URLEncoder.encode(compImage, "UTF-8") +
-	                "&latitude=" + URLEncoder.encode(latitude, "UTF-8") +
-	                "&longtitude=" + URLEncoder.encode(longtitude, "UTF-8") +
-	                "&Landmark=" + URLEncoder.encode(landmark, "UTF-8") +
-	                "&gender=" + URLEncoder.encode(gender, "UTF-8");
-
-	        // Write parameters to request body
-	        try (OutputStream os = conn.getOutputStream()) {
-	            byte[] input = params.getBytes("UTF-8");
-	            os.write(input, 0, input.length);
-	        }
-
-	        // Read the response
-	        int responseCode = conn.getResponseCode();
-	        BufferedReader reader;
-	        if (responseCode == HttpURLConnection.HTTP_OK) {
-	            reader = new BufferedReader(new InputStreamReader(conn.getInputStream()));
-	        } else {
-	            reader = new BufferedReader(new InputStreamReader(conn.getErrorStream()));
-	        }
-
-	        StringBuilder response = new StringBuilder();
-	        String line;
-	        while ((line = reader.readLine()) != null) {
-	            response.append(line);
-	        }
-	        reader.close();
-
-	        // Return the response from the external API
-	        return ResponseEntity.status(responseCode).body(response.toString());
-
-	    } catch (IOException e) {
-	        e.printStackTrace();
-	        return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body("An error occurred while processing the request.");
-	    }
+	@GetMapping("/api/getComplaintDetailsByMobile")
+	public List<Map<String, Object>> getComplaintDetailsByMobile(@RequestParam String mobileNo) {
+	    return complaintService.fetchComplaintDetailsByMobile(mobileNo);
 	}
-
-*/
 	@PostMapping("/register")
 	public ResponseEntity<String> registerComplaint(
 	        @RequestParam(value = "ComplainantName", required = false) String complainantName,
@@ -307,5 +136,70 @@ public class ComplaintController {
 	        return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body("An error occurred while processing the request.");
 	    }
 	}
+	
+	
+	 @PostMapping("/updateComplaint")
+	    public ResponseEntity<String> updateComplaint(
+	            @RequestParam("ComplaintId") String complaintId,
+	            @RequestParam(value = "Message", required = false) String message,
+	            @RequestParam(value = "UserType", required = false) String userType,
+	            @RequestParam(value = "Status", required = false) String status,
+	            @RequestParam(value = "Comp_Image", required = false) String compImage) {
+
+	        String externalUrl = "https://erp.chennaicorporation.gov.in/pgr/external/mobileservice";
+
+	        try {
+	            // Create the URL object
+	            URL url = new URL(externalUrl);
+
+	            // Create the HttpURLConnection object
+	            HttpURLConnection conn = (HttpURLConnection) url.openConnection();
+	            conn.setRequestMethod("POST");
+	            conn.setRequestProperty("Content-Type", "application/x-www-form-urlencoded");
+	            conn.setDoOutput(true);
+
+	            // Create the parameters string, handling null values
+	            String params = "serviceId=UpdateComplaint"+
+	                    "&ComplaintId=" + URLEncoder.encode(complaintId != null ? complaintId : "", "UTF-8") +
+	                    "&Message=" + URLEncoder.encode(message != null ? message : "", "UTF-8") +
+	                    "&UserType=" + URLEncoder.encode(userType != null ? userType : "", "UTF-8") +
+	                    "&Status=" + URLEncoder.encode(status != null ? status : "", "UTF-8") +
+	                    "&Comp_Image=" + URLEncoder.encode(compImage != null ? compImage : "", "UTF-8") +
+	                    "&Token=718333469976265947044293";
+
+	            // Write parameters to request body
+	            try (OutputStream os = conn.getOutputStream()) {
+	                byte[] input = params.getBytes("UTF-8");
+	                os.write(input, 0, input.length);
+	            }
+
+	            // Read the response
+	            int responseCode = conn.getResponseCode();
+	            BufferedReader reader;
+	            if (responseCode == HttpURLConnection.HTTP_OK) {
+	                reader = new BufferedReader(new InputStreamReader(conn.getInputStream()));
+	            } else {
+	                reader = new BufferedReader(new InputStreamReader(conn.getErrorStream()));
+	            }
+
+	            StringBuilder response = new StringBuilder();
+	            String line;
+	            while ((line = reader.readLine()) != null) {
+	                response.append(line);
+	            }
+	            reader.close();
+
+	            // Return the response from the external API
+	            return ResponseEntity.status(responseCode).body(response.toString());
+
+	        } catch (IOException e) {
+	            e.printStackTrace();
+	            return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body("An error occurred while processing the request.");
+	        }
+	    }
+	
+	
+	
+	
 
 }
diff --git a/src/main/resources/templates/User/home.html b/src/main/resources/templates/User/home.html
index 30e4cd2..e82d8a4 100644
--- a/src/main/resources/templates/User/home.html
+++ b/src/main/resources/templates/User/home.html
@@ -6,6 +6,9 @@
 	<title>Main Page</title>
 	<!--Google Font -->
 	<link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap" rel="stylesheet">
+	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
+		integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg=="
+		crossorigin="anonymous" referrerpolicy="no-referrer" />
 	<!--Bootstrap CSS-->
 	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
 	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
@@ -172,15 +175,41 @@
 			font-size: 14px;
 			cursor: pointer;
 		}
+
+		/*for radio button style*/
+		.radio-group {
+			display: flex;
+			align-items: center;
+			/* Ensures all items are aligned to the center */
+		}
+
+		.radio-item {
+			display: flex;
+			align-items: center;
+			margin-right: 20px;
+			/* Adds space between each radio item */
+		}
+
+		.radio-item input[type="radio"] {
+			margin-right: 10px;
+			/* Adds space between the radio button and its label */
+			vertical-align: middle;
+			/* Ensures vertical alignment */
+		}
+
+		.radio-item label {
+			margin: 0;
+			/* Removes any default margins that might affect alignment */
+		}
 	</style>
 </head>
 
 
 <body>
 	<div th:insert="~{fragments/accessibility :: accessibility}"></div>
-	
 
-<!--	<div class="header">
+
+	<!--	<div class="header">
 
 		<div class="logo-left">
 			<img src="images/gcc1.png" alt="Greater Chennai Corporation Logo">
@@ -201,12 +230,15 @@
 
 
 	<!-- Insert the header fragment -->
-		<div th:insert="fragments/header :: headerFragment"></div>=
+	<div th:insert="fragments/header :: headerFragment"></div>
 	<!--<button id="reader-btn" onclick="toggleReader()">Enable Reader</button>-->
 
 
 	<!-- Cards Section -->
 	<div class="container mt-3">
+		<div id="loader" style="display: none; text-align: center;">
+			<img src="images/Thin broken ring.gif" alt="Loading..." />
+		</div>
 		<!--<button id="invertColorBtn" onclick="invertColors()">Invert Colors</button>-->
 		<div class="row">
 			<div class="col-md-4">
@@ -252,51 +284,147 @@
 						</div>
 					</div>
 				</div>
-			</div>	
+			</div>
 		</div>
 
-		<div class="row">
-			<div class="col-md-12">
+
+		<!-- Form to Check by Complaint Number -->
+		<div class="col-md-12">
+			<div class="card readable">
+				<div class="card-body">
+					<img src="images/search.png" alt="Status" class="card-img">
+					<div class="card-content">
+						<h5 class="card-title">Check Your Complaint Status</h5>
+						<div class="form-group">
+							<input type="radio" id="c_number" name="check_method" value="c_number" checked
+								onchange="toggleInput()">
+							<label class="readable">Check By Complaint Number</label>
+
+							<input type="radio" id="m_number" name="check_method" value="m_number"
+								onchange="toggleInput()">
+							<label class="readable">Check By Mobile Number</label>
+						</div>
+
+						<!-- Input for Complaint Number -->
+						<div class="form-group" id="complaint-number-input">
+							<input type="text" class="form-control" id="complaint-number"
+								placeholder="Enter Complaint Number">
+						</div>
+
+						<!-- Input for Mobile Number (hidden by default) -->
+						<div class="form-group" id="complaint-mobile-input" style="display: none;">
+							<input type="text" class="form-control" id="complaint-mobile"
+								placeholder="Enter Mobile Number">
+						</div>
+					</div>
+				</div>
+
+				<div class="card-footer">
+					<!-- Button for Complaint Number -->
+					<button class="btn btn-danger" id="check-now-btn">Check Now <i
+							class="fa fa-arrow-right"></i></button>
+
+					<!-- Button for Mobile Number (hidden by default) -->
+					<button class="btn btn-primary readable" id="check-mobile-btn" style="display: none;">Check Now <i
+							class="fa fa-arrow-right"></i></button>
+
+				</div>
+			</div>
+		</div>
+
+
+		<!-- Form to Check by Mobile Number -->
+		<!--<div class="col-md-6">
 				<div class="card readable">
 					<div class="card-body">
 						<img src="images/search.png" alt="Status" class="card-img">
 						<div class="card-content">
 							<h5 class="card-title">Check Your Complaint Status</h5>
 							<div class="form-group">
-								<label class="readable">Check By Complaint Number</label>
+								<label class="readable">Check By Mobile Number</label>
 							</div>
 							<div class="form-group">
-								<input type="text" class="form-control" id="complaint-number"
-									placeholder="Enter Complaint Number">
+								<input type="text" class="form-control" id="complaint-mobile"
+									placeholder="Enter Mobile Number">
 							</div>
 						</div>
 					</div>
 					<div class="card-footer">
-						<button class="btn btn-primary readable" id="check-now-btn">
-							Check Now <i class="fa fa-arrow-right"></i>
-						</button>
+						<button class="btn btn-primary readable" id="check-mobile-btn">Check Now <i
+								class="fa fa-arrow-right"></i></button>
 					</div>
 				</div>
+			</div>-->
+
+
+
+
+
+
+
+	</div>
+
+
+
+	<div class="modal fade" id="complaintDetailsModal" tabindex="-1" role="dialog"
+		aria-labelledby="complaintDetailsLabel" aria-hidden="true">
+		<div class="modal-dialog modal-lg" role="document">
+			<div class="modal-content">
+				<div class="modal-header" style="background-color: #3c4959;color: white;">
+					<h5 class="modal-title" id="complaintDetailsLabel">Complaint Details</h5>
+					<button type="button" class="close" data-dismiss="modal" aria-label="Close" style="color: white;">
+						<span aria-hidden="true">&times;</span>
+					</button>
+				</div>
+				<div class="modal-body">
+					<table class="table">
+						<thead style="background-color: #3c4959;color: white;">
+							<tr>
+								<th>Complaint Number</th>
+								<th>Complaint Type</th>							
+								<th>View</th> <!-- New column for the eye icon -->
+							</tr>
+						</thead>
+						<tbody>
+							<!-- Dynamic rows will be appended here by JavaScript -->
+						</tbody>
+					</table>
+				</div>
+				<div class="modal-footer">
+					<button type="button" class="btn btn-secondary" data-dismiss="modal"
+						style="background-color:#3c4959 ;">Close</button>
+				</div>
 			</div>
 		</div>
 	</div>
 
 
 
+
+
+
+
+
+
 	<!--	<div th:insert="fragments/footer :: footerFragment"></div>-->
 
-	<!--Bootstrap JS-->
-	<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
+	<!-- Replace Slim jQuery with Full jQuery -->
+	<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
+
+	<!-- Popper.js (for Bootstrap tooltips, popovers, etc.) -->
 	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
+
+	<!-- Bootstrap JS -->
 	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
 
 	<!-- Font Awesome for Icons -->
 	<script src="https://kit.fontawesome.com/a076d05399.js"></script>
 
 	<script>
-		
-		
+
+
 		$(document).ready(function () {
+			// Check by complaint number
 			$('#check-now-btn').click(function () {
 				var complaintNumber = $('#complaint-number').val();
 				if (complaintNumber) {
@@ -305,12 +433,110 @@
 					alert('Please enter a complaint number.');
 				}
 			});
+
+
+
 		});
 
 
 
-		
-    
+
+		function toggleInput() {
+			const checkByComplaint = document.getElementById('c_number').checked;
+			const complaintInput = document.getElementById('complaint-number-input');
+			const mobileInput = document.getElementById('complaint-mobile-input');
+			const checkNowBtn = document.getElementById('check-now-btn');
+			const checkMobileBtn = document.getElementById('check-mobile-btn');
+
+			if (checkByComplaint) {
+				complaintInput.style.display = 'block';
+				checkNowBtn.style.display = 'block';
+				mobileInput.style.display = 'none';
+				checkMobileBtn.style.display = 'none';
+			} else {
+				complaintInput.style.display = 'none';
+				checkNowBtn.style.display = 'none';
+				mobileInput.style.display = 'block';
+				checkMobileBtn.style.display = 'block';
+			}
+		}
+
+		$(document).ready(function () {
+			// Trigger modal and load complaint list based on mobile number
+			$('#check-mobile-btn').on('click', function () {
+				const mobileNumber = $('#complaint-mobile').val(); // Get the entered mobile number
+
+				if (mobileNumber === "") {
+					alert("Please enter a mobile number.");
+					return;
+				}
+				$('#loader').show();
+				// AJAX request to fetch complaint details by mobile number
+				$.ajax({
+					url: '/api/getComplaintDetailsByMobile', // Replace with your correct API path
+					method: 'GET',
+					data: {mobileNo: mobileNumber},
+					success: function (response) {
+						$('#loader').hide();
+						const complaintList = response[0]?.ComplaintListHistory; // Assuming data is inside ComplaintListHistory
+
+						// Clear the table before adding new rows
+						const tableBody = $('#complaintDetailsModal tbody');
+						tableBody.empty();
+
+						// Check if there are complaints
+						if (complaintList && complaintList.length > 0) {
+							// Loop through each complaint and add to the table
+							complaintList.forEach(function (complaint) {
+								const complaintId = complaint.complaintid || 'N/A'; // Fallback to N/A if complaintid is null
+								const complaintType = complaint.complainttype || 'N/A';
+								
+								const newRow = `
+                            <tr>
+                                <td>${complaintId}</td>
+                                <td>${complaintType}</td>
+                                
+                                <td>
+                                    <button class="btn btn-link view-complaint" data-complaintid="${complaintId}">
+                                        <i style="color:#3c4959" class="fa fa-eye"></i>
+                                    </button>
+                                </td>
+                            </tr>`;
+								tableBody.append(newRow); // Append the new row to the table
+							});
+						} else {
+							// No complaints found for the mobile number
+							tableBody.append('<tr><td colspan="2">No complaints found for this mobile number.</td></tr>');
+						}
+
+						// Display the modal after fetching the data
+						$('#complaintDetailsModal').modal('show');
+					},
+					error: function (error) {
+						console.log('Error fetching complaints:', error);
+						alert('There was an error fetching the complaint details. Please try again.');
+						$('#loader').hide();
+					}
+				});
+			});
+
+
+
+
+			// Event delegation to handle click on dynamically generated eye icons
+			$(document).on('click', '.view-complaint', function () {
+				var complaintId = $(this).data('complaintid');
+				if (complaintId) {
+					// Redirect to the complaint details page using complaintId
+					window.location.href = 'checklistofficer?complaintno=' + encodeURIComponent(complaintId);
+				} else {
+					alert('Complaint ID not found.');
+				}
+			});
+
+
+		});
+
 	</script>
 </body>
 
diff --git a/src/main/resources/templates/checklistofficer/checklistofficer.html b/src/main/resources/templates/checklistofficer/checklistofficer.html
index 64b31df..8d3bcba 100644
--- a/src/main/resources/templates/checklistofficer/checklistofficer.html
+++ b/src/main/resources/templates/checklistofficer/checklistofficer.html
@@ -3,11 +3,12 @@
 
 <head>
 	<meta charset="UTF-8">
-	<title>CheckList Officer</title>
+	<title>CheckList User</title>
 	<!-- Google Font -->
 	<link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap" rel="stylesheet">
 	<!-- Bootstrap CSS -->
 	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
+	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
 	<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
 	<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
@@ -43,6 +44,29 @@
 			font-size: medium;
 			transition: font-size 0.3s ease;
 		}
+
+
+		.comment-table {
+			width: 100%;
+			border-collapse: collapse;
+		}
+
+		.comment-table td {
+			padding: 0.5rem;
+			border: 1px solid #ddd;
+			/* Light border color */
+		}
+
+		.comment-table td:first-child {
+			width: 25%;
+			/* Adjust as needed for label column width */
+			font-weight: bold;
+		}
+
+		.comment-table td:nth-child(2) {
+			width: 75%;
+			/* Adjust as needed for value column width */
+		}
 	</style>
 </head>
 
@@ -53,9 +77,6 @@
 	<div th:insert="~{fragments/header :: headerFragment}"></div>
 
 	<div class="container mt-4">
-		<!--<button class="plus btn btn-primary">A+</button>
-		<button class="minus btn btn-secondary">A-</button>-->
-
 		<!-- Loader GIF -->
 		<div id="loader" style="display: none; text-align: center;">
 			<img src="images/Thin broken ring.gif" alt="Loading..." />
@@ -70,28 +91,15 @@
 		</div>
 		<!-- Card Section -->
 		<div class="card p-3 resizable-content" style="margin-bottom: 8px;color: #414f69;">
-			<div class="row" style="font-weight: bolder;">
-				<div class="col-md-6">
-					Complainant Number:
-				</div>
-				<div class="col-md-6">
-					Date:
-				</div>
-			</div>
-			<div class="row" style="font-weight: bolder;color: #414f69;">
-				<div class="col-md-6">
-					Complainant Mode:
-				</div>
-				<div class="col-md-6">
-					Expiry:
-				</div>
-			</div>
-			<!-- Add the resizable-content class to the card sections -->
 			<div class="card mb-3 resizable-content">
 				<div class="card-header text-white" style="background-color: #414f69;">1. Complaining Person's Details
 				</div>
 				<div class="card-body">
 					<div class="row">
+						<div class="col-md-6">
+							Complainant ID:
+							<input type="text" id="complaintid" class="form-control" value="" disabled>
+						</div>
 						<div class="col-md-6">
 							Complainant Mobile Number:
 							<input type="text" id="complaint-mobile-number" class="form-control" value="" disabled>
@@ -100,19 +108,16 @@
 							Complainant Name:
 							<input type="text" id="complaint-customer-name" class="form-control" value="" disabled>
 						</div>
-						<div class="col-md-6">
-							Complainant Email:
-							<input type="email" class="form-control" value="" disabled>
-						</div>
-						<div class="col-md-6">
+
+						<!--<div class="col-md-6">
 							Gender:
-							<select class="form-control" disabled>
+							<select class="form-control" id="gender" disabled>
 								<option value="0">Select Gender</option>
 								<option value="male">Male</option>
 								<option value="female">Female</option>
 								<option value="transgender">Transgender</option>
 							</select>
-						</div>
+						</div>-->
 					</div>
 				</div>
 			</div>
@@ -155,17 +160,17 @@
 							<input type="text" class="form-control" id="complaintType" disabled>
 						</div>
 
-						<div class="col-md-4">
+						<!--<div class="col-md-4">
 							Complainant Sub-Type:
 							<input type="text" class="form-control" disabled>
 						</div>
 						<div class="col-md-4">
 							Complainant Title:
 							<input type="text" class="form-control" disabled>
-						</div>
+						</div>-->
 						<div class="col-md-12">
 							Complainant Description:
-							<input type="text" class="form-control" id="" disabled>
+							<input type="text" class="form-control" id="complaintdesc" disabled>
 						</div>
 					</div>
 				</div>
@@ -179,52 +184,61 @@
 					<!--<div class="col-md-2" id="">Aug 24<br>7.00 pm</div>-->
 
 					<div class="col-md-4">
+						Complaint Closed Date:
 
 						<input type="text" class="form-control" id="commentDate" disabled>
 					</div>
 					<div class="col-md-4">
+						Official Name:
 						<input type="text" class="form-control" id="commentuser" disabled>
 					</div>
 					<!--<div class="col-md-2"><button class="btn  btn-sm"
 							style="background-color: #414f69;color: white;" id="status"></button></div>-->
 					<div class="col-md-4">
-
+						Status:
 						<input type="text" class="form-control" id="status"
 							style="background-color: #414f69;color: white;" disabled>
 					</div>
 				</div>
 
+
+			</div>
+		</div>
+
+
+		<div class="card mb-3 resizable-content">
+			<div class="card-header text-white" style="background-color: #414f69;">Complaint Action History</div>
+			<div class="card-body">
+				<div id="comments-container"></div> <!-- Container for comments -->
 			</div>
 		</div>
 
+
+
 		<div class="card mb-3 resizable-content">
 			<div class="card-header text-white" style="background-color: #414f69;">Update Complaint</div>
 			<div class="card-body">
 				<div class="row">
 					<div class="col-md-6">
 						Change Complaint Status:
-						<select class="form-control">
-							<option value="0">Select Complaint</option>
-							<option value="complaint1">Complaint 1</option>
-							<option value="complaint2">Complaint 2</option>
+						<select class="form-control" name="complaintStatusID" id="complaintStatus">
+							<option value="0">Choose</option>
+							<option value="8">WITHDRAW</option>
+							<option value="9">REOPENED</option>
+							<option value="10" selected="true">CLOSE</option>
 						</select>
 					</div>
-					<div class="col-md-6">
-						<label for="rating" style="display: block; margin-bottom: 4px;">Feedback Rating:</label>
-						<div class="rating">
-							<input type="radio" name="star" id="star1"><label for="star1">★</label>
-							<input type="radio" name="star" id="star2"><label for="star2">★</label>
-							<input type="radio" name="star" id="star3"><label for="star3">★</label>
-							<input type="radio" name="star" id="star4"><label for="star4">★</label>
-							<input type="radio" name="star" id="star5"><label for="star5">★</label>
-						</div>
+
+					<div class="col-md-6" id="img" style="display: none;">
+						Photo:
+						<input type="file" class="form-control" id="photo">
 					</div>
 				</div>
 				<div class="row">
 					<div class="col-md-12">
-						Complainant Locality:
+						Details of Complaint:
 						<textarea class="form-control" id="othercomplaint-details" rows="3"
-							placeholder="Enter complaint details" maxlength="400"></textarea>
+							placeholder="Enter complaint details" maxlength="400" required></textarea>
 					</div>
 				</div>
 				<div class="row align-items-center justify-content-center" style="margin-top: 5px;">
@@ -251,14 +265,11 @@
 	<script>
 
 		//   /api/getComplaintDetailsbyId
-
 		$(document).ready(function () {
-			// Get the complaint number from the URL
 			var urlParams = new URLSearchParams(window.location.search);
 			var complaintNo = urlParams.get('complaintno');
 
 			if (complaintNo) {
-
 				$('#loader').show();
 
 				$.ajax({
@@ -266,18 +277,24 @@
 					type: 'GET',
 					data: {complaintid: complaintNo},
 					success: function (response) {
-						console.log('API response:', response); // Log response for debugging
-
+						console.log('API response:', response);
 						$('#loader').hide();
-						// Check if response is an array and has data
+
 						if (Array.isArray(response) && response.length > 0) {
 							var complaintListHistory = response[0].ComplaintListHistory;
 
-							// Check if complaintListHistory is an array and has data
 							if (Array.isArray(complaintListHistory) && complaintListHistory.length > 0) {
 								var complaintDetails = complaintListHistory[0];
 
-								// Populate the form fields with null/undefined checks
+								// Decode HTML entities before populating fields
+								function decodeHtmlEntities(str) {
+									var txt = document.createElement('textarea');
+									txt.innerHTML = str;
+									return txt.value;
+								}
+
+								// Populate other form fields
+								document.getElementById("complaintid").value = complaintDetails.complaintid || '';
 								document.getElementById("complaint-mobile-number").value = complaintDetails.CustomerMobile || '';
 								document.getElementById("complaint-customer-name").value = complaintDetails.CustomerName || '';
 								document.getElementById("street").value = complaintDetails.Street || '';
@@ -286,20 +303,118 @@
 								document.getElementById("area").value = complaintDetails.Area || '';
 								document.getElementById("location").value = complaintDetails.Location || '';
 								document.getElementById("complaintType").value = complaintDetails.complainttype || '';
+
+								// Decode and populate complaint description
+								document.getElementById("complaintdesc").value = decodeHtmlEntities(complaintDetails.complaintdetails || '');
+
+								document.getElementById("commentDate").value = complaintDetails.complaintcloseddate || '';
+								document.getElementById("commentuser").value = complaintDetails.Officialname || '';
 								document.getElementById("status").value = complaintDetails.complaintcurrentstatus || '';
 
-								// Handle nested Comments array safely
+								// Handle nested Comments array
 								if (Array.isArray(complaintDetails.Comments) && complaintDetails.Comments.length > 0) {
-									// Assuming we want to use the first comment
-									var firstComment = complaintDetails.Comments[0];
-									document.getElementById("commentDate").value = firstComment.comment_date || '';
-									document.getElementById("commentuser").value = firstComment.user || '';
-									document.getElementById("complaintOfficer").value = firstComment.user || '';
+									var commentsContainer = $('#comments-container');
+									commentsContainer.empty(); // Clear the container
+
+									var comments = complaintDetails.Comments;
+									var lastComment = comments[comments.length - 1];
+
+									// Decode HTML entities for last comment
+									function decodeHtmlEntities(str) {
+										var txt = document.createElement('textarea');
+										txt.innerHTML = str;
+										return txt.value;
+									}
+
+									// Handle last comment
+									var userImageHtml = '';
+									if (Array.isArray(lastComment.userimages) && lastComment.userimages.length > 0) {
+										var imageUrl = lastComment.userimages[0].Comp_Image;
+										if (imageUrl && imageUrl !== 'null') {
+											userImageHtml = `
+                                    <div class="col-md-12">
+                                        <img src="${imageUrl}" alt="User Image" class="img-fluid">
+                                    </div>`;
+										}
+									}
+
+									var lastCommentHtml = `
+                            <div class="row mb-3">
+                                <table class="comment-table">
+                                    <tr>
+                                        <td style="color:#3c4959">User:</td>
+                                        <td>${lastComment.user || ''}</td>
+                                    </tr>
+                                    <tr>
+                                        <td style="color:#3c4959">Message:</td>
+                                        <td>${lastComment.message || ''}</td>
+                                    </tr>
+                                    <tr>
+                                        <td style="color:#3c4959">Comment Date:</td>
+                                        <td>${lastComment.comment_date || ''}</td>
+                                    </tr>
+                                    ${userImageHtml}
+                                </table>
+                            </div>
+                            <hr>`;
+
+									commentsContainer.append(lastCommentHtml);
+
+									// Add dropdown button for other comments
+									if (comments.length > 1) {
+										var dropdownHtml = `
+                                <button id="show-all-comments" class="btn  mt-3" style="margin-bottom: 10px;background-color: #3c4959;
+    color: white;">Show All Comments</button>
+                                <div id="all-comments" style="display:none;">`;
+
+										// Add all comments to dropdown
+										comments.forEach(function (comment, index) {
+											if (index < comments.length - 1) { // Skip the last comment
+												var userImageHtml = '';
+												if (Array.isArray(comment.userimages) && comment.userimages.length > 0) {
+													var imageUrl = comment.userimages[0].Comp_Image;
+													if (imageUrl && imageUrl !== 'null') {
+														userImageHtml = `
+                                                <div class="col-md-12">
+                                                    <img src="${imageUrl}" alt="User Image" class="img-fluid">
+                                                </div>`;
+													}
+												}
+
+												dropdownHtml += `
+                                        <div class="row mb-3">
+                                            <table class="comment-table">
+                                                <tr>
+                                                    <td style="color:#3c4959">User:</td>
+                                                    <td>${comment.user || ''}</td>
+                                                </tr>
+                                                <tr>
+                                                    <td style="color:#3c4959">Message:</td>
+                                                    <td>${comment.message || ''}</td>
+                                                </tr>
+                                                <tr>
+                                                    <td style="color:#3c4959">Comment Date:</td>
+                                                    <td>${comment.comment_date || ''}</td>
+                                                </tr>
+                                                ${userImageHtml}
+                                            </table>
+                                        </div>
+                                        <hr>`;
+											}
+										});
+
+										dropdownHtml += '</div>';
+
+										commentsContainer.append(dropdownHtml);
+
+										// Toggle display of all comments
+										$('#show-all-comments').click(function () {
+											$('#all-comments').toggle();
+											$(this).text($(this).text() === 'Show All Comments' ? 'Hide Comments' : 'Show All Comments');
+										});
+									}
 								} else {
-									// Clear fields if Comments are not present
-									document.getElementById("commentDate").value = '';
-									document.getElementById("commentuser").value = '';
-									document.getElementById("complaintOfficer").value = '';
+									$('#comments-container').html('<p>No comments found.</p>');
 								}
 							} else {
 								alert('No complaint details found in ComplaintListHistory.');
@@ -307,25 +422,103 @@
 						} else {
 							alert('Unexpected response structure.');
 						}
-
-
 					},
 					error: function (xhr, status, error) {
 						console.log('Error:', xhr.responseText);
 						alert('An error occurred while fetching complaint details.');
 						$('#loader').hide();
-					},
-
+					}
 				});
-			}
-			else {
+			} else {
 				alert('No complaint number provided.');
 			}
 		});
 
 
 
-	// Utility function to format date and time from datetime string
+
+
+		$(document).ready(function () {
+			$('#complaintStatus').change(function () {
+				if ($(this).val() == '9') { // Show the image field if 'REOPENED' is selected
+					$('#img').show();
+				} else {
+					$('#img').hide();
+				}
+			});
+
+			// Handle the form submission
+			$('.btn').click(function (e) {
+				e.preventDefault();
+
+				var complaintId = 'YOUR_COMPLAINT_ID'; // You should fetch this dynamically
+				var status = $('#complaintStatus').val();
+				var message = $('#othercomplaint-details').val();
+
+				// Validate the "Details of Complaint" field
+				if (message.trim() === "") {
+					// Display a SweetAlert validation message if the field is empty
+					Swal.fire({
+						title: 'Validation Error!',
+						text: 'Please enter the details of the complaint.',
+						icon: 'warning',
+						confirmButtonText: 'OK'
+					});
+					return; // Stop the form submission if the field is empty
+				}
+
+				// Convert image to base64 if it's selected
+				var imageFile = $('#photo')[0].files[0];
+				var compImage = '';
+
+				if (imageFile) {
+					var reader = new FileReader();
+					reader.readAsDataURL(imageFile);
+					reader.onload = function () {
+						compImage = reader.result.split(',')[1]; // Extract base64 part
+
+						// Proceed with the AJAX call after the image is converted
+						updateComplaint(complaintId, message, status, compImage);
+					};
+				} else {
+					// No image selected, proceed with the AJAX call without the image
+					updateComplaint(complaintId, message, status, '');
+				}
+			});
+
+			// Function to send the AJAX request to the backend
+			function updateComplaint(complaintId, message, status, compImage) {
+				$.ajax({
+					url: '/updateComplaint', // Adjust this to match your endpoint
+					type: 'POST',
+					data: {
+						ComplaintId: complaintId,   // complaintId mapped from your backend
+						Message: message,           // message field
+						Status: status,             // status dropdown
+						Comp_Image: compImage       // base64 image data
+					},
+					success: function (response) {
+						// Display SweetAlert and redirect on 'OK'
+						Swal.fire({
+							title: 'Success!',
+							text: 'Complaint updated successfully.',
+							icon: 'success',
+							confirmButtonText: 'OK'
+						}).then((result) => {
+							if (result.isConfirmed) {
+								// Redirect to home.html after clicking OK
+								window.location.href = 'home';
+							}
+						});
+					},
+					error: function (xhr, status, error) {
+						// Handle error
+						console.error('Error updating complaint:', error);
+					}
+				});
+			}
+		});
+
 
 	</script>