diff --git a/pom.xml b/pom.xml
index 06ad41e..5b821a3 100644
--- a/pom.xml
+++ b/pom.xml
@@ -1,78 +1,78 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
-	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
-	<modelVersion>4.0.0</modelVersion>
-	<parent>
-		<groupId>org.springframework.boot</groupId>
-		<artifactId>spring-boot-starter-parent</artifactId>
-		<version>2.7.6</version>
-		<relativePath/> <!-- lookup parent from repository -->
-	</parent>
-	<groupId>com.asset</groupId>
-	<artifactId>asset_details</artifactId>
-	<version>0.0.1-SNAPSHOT</version>
-	<packaging>war</packaging>
-	<name>asset_details</name>
-	<description>Project for Asset Detail Feedback</description>
-	<properties>
-		<java.version>1.8</java.version>
-		<maven.compiler.source>8</maven.compiler.source>
-		<maven.compiler.target>8</maven.compiler.target>
-	</properties>
-	<dependencies>
-		<dependency>
-			<groupId>org.springframework.boot</groupId>
-			<artifactId>spring-boot-starter-thymeleaf</artifactId>
-		</dependency>
-		<dependency>
-			<groupId>org.springframework.boot</groupId>
-			<artifactId>spring-boot-starter-web</artifactId>
-		</dependency>
-		<dependency>
-			<groupId>com.google.zxing</groupId>
-			<artifactId>javase</artifactId>
-			<version>3.4.0</version>
-		</dependency>
-		<dependency>
-			<groupId>org.springframework.boot</groupId>
-			<artifactId>spring-boot-starter-data-jpa</artifactId>
-		</dependency>
-		<dependency>
-			<groupId>org.springframework.boot</groupId>
-			<artifactId>spring-boot-starter-jdbc</artifactId>
-		</dependency>
-		<dependency>
-			<groupId>mysql</groupId>
-			<artifactId>mysql-connector-java</artifactId>
-			<scope>runtime</scope>
-		</dependency>
-		<dependency>
-			<groupId>org.projectlombok</groupId>
-			<artifactId>lombok</artifactId>
-			<optional>true</optional>
-		</dependency>
+<project xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://maven.apache.org/POM/4.0.0"
+         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
+    <modelVersion>4.0.0</modelVersion>
+    <parent>
+        <groupId>org.springframework.boot</groupId>
+        <artifactId>spring-boot-starter-parent</artifactId>
+        <version>2.7.6</version>
+        <relativePath/> <!-- lookup parent from repository -->
+    </parent>
+    <groupId>com.asset</groupId>
+    <artifactId>asset_details</artifactId>
+    <version>0.0.1-SNAPSHOT</version>
+    <packaging>war</packaging>
+    <name>asset_details</name>
+    <description>Project for Asset Detail Feedback</description>
+    <properties>
+        <java.version>1.8</java.version>
+        <maven.compiler.source>8</maven.compiler.source>
+        <maven.compiler.target>8</maven.compiler.target>
+    </properties>
+    <dependencies>
+        <dependency>
+            <groupId>org.springframework.boot</groupId>
+            <artifactId>spring-boot-starter-thymeleaf</artifactId>
+        </dependency>
+        <dependency>
+            <groupId>org.springframework.boot</groupId>
+            <artifactId>spring-boot-starter-web</artifactId>
+        </dependency>
+        <dependency>
+            <groupId>com.google.zxing</groupId>
+            <artifactId>javase</artifactId>
+            <version>3.4.0</version>
+        </dependency>
+        <dependency>
+            <groupId>org.springframework.boot</groupId>
+            <artifactId>spring-boot-starter-data-jpa</artifactId>
+        </dependency>
+        <dependency>
+            <groupId>org.springframework.boot</groupId>
+            <artifactId>spring-boot-starter-jdbc</artifactId>
+        </dependency>
+        <dependency>
+            <groupId>com.mysql</groupId>
+            <artifactId>mysql-connector-j</artifactId>
+            <version>8.0.31</version>
+        </dependency>
+        <dependency>
+            <groupId>org.projectlombok</groupId>
+            <artifactId>lombok</artifactId>
+            <optional>true</optional>
+        </dependency>
 
-		<dependency>
-			<groupId>org.springframework.boot</groupId>
-			<artifactId>spring-boot-starter-test</artifactId>
-			<scope>test</scope>
-		</dependency>
-		<dependency>
-			<groupId>org.json</groupId>
-			<artifactId>json</artifactId>
-			<version>20220924</version>
-		</dependency>
-	</dependencies>
+        <dependency>
+            <groupId>org.springframework.boot</groupId>
+            <artifactId>spring-boot-starter-test</artifactId>
+            <scope>test</scope>
+        </dependency>
+        <dependency>
+            <groupId>org.json</groupId>
+            <artifactId>json</artifactId>
+            <version>20220924</version>
+        </dependency>
+    </dependencies>
 
 
-	<build>
-		<plugins>
-			<plugin>
-				<groupId>org.springframework.boot</groupId>
-				<artifactId>spring-boot-maven-plugin</artifactId>
-			</plugin>
-		</plugins>
-		<defaultGoal>package</defaultGoal>
-	</build>
+    <build>
+        <plugins>
+            <plugin>
+                <groupId>org.springframework.boot</groupId>
+                <artifactId>spring-boot-maven-plugin</artifactId>
+            </plugin>
+        </plugins>
+        <defaultGoal>package</defaultGoal>
+    </build>
 
 </project>
diff --git a/src/main/resources/application.properties b/src/main/resources/application.properties
index 9593a44..7ad49fa 100644
--- a/src/main/resources/application.properties
+++ b/src/main/resources/application.properties
@@ -1,7 +1,7 @@
 spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
-spring.datasource.url=jdbc:mysql://localhost:3306/gcc
+spring.datasource.url=jdbc:mysql://localhost:3306/asset
 spring.datasource.username=root
-spring.datasource.password=Test@1234
+spring.datasource.password=password
 spring.jpa.show-sql=true
 spring.jpa.hibernate.ddl-auto=update
 spring.jpa.properties.hibernate.dialect=org.hibernate.dialect.MySQL5Dialect
diff --git a/src/main/resources/static/assets/img/img/logocp.png b/src/main/resources/static/assets/img/img/logocp.png
new file mode 100644
index 0000000..e7decc5
Binary files /dev/null and b/src/main/resources/static/assets/img/img/logocp.png differ
diff --git a/src/main/resources/static/assets/img/img/meadiaquriy2.jpg b/src/main/resources/static/assets/img/img/meadiaquriy2.jpg
new file mode 100644
index 0000000..469c6a6
Binary files /dev/null and b/src/main/resources/static/assets/img/img/meadiaquriy2.jpg differ
diff --git a/src/main/resources/static/assets/img/img/meadiaquriymob.jpg b/src/main/resources/static/assets/img/img/meadiaquriymob.jpg
new file mode 100644
index 0000000..532b61c
Binary files /dev/null and b/src/main/resources/static/assets/img/img/meadiaquriymob.jpg differ
diff --git a/src/main/resources/static/assets/img/img/mediaqurey.jpg b/src/main/resources/static/assets/img/img/mediaqurey.jpg
new file mode 100644
index 0000000..da0df72
Binary files /dev/null and b/src/main/resources/static/assets/img/img/mediaqurey.jpg differ
diff --git a/src/main/resources/static/assets/img/img/todaybgbaner.jpg b/src/main/resources/static/assets/img/img/todaybgbaner.jpg
new file mode 100644
index 0000000..8edf868
Binary files /dev/null and b/src/main/resources/static/assets/img/img/todaybgbaner.jpg differ
diff --git a/src/main/resources/templates/fragment/Head.html b/src/main/resources/templates/fragment/Head.html
index 68d4c24..11de281 100644
--- a/src/main/resources/templates/fragment/Head.html
+++ b/src/main/resources/templates/fragment/Head.html
@@ -2,48 +2,49 @@
 <html xmlns:th="https://www.thymeleaf.org"> -->
 <!-- <div th:fragment="head"> -->
 <head th:fragment="head">
-  <meta charset="utf-8">
-  <meta content="width=device-width, initial-scale=1.0" name="viewport">
-
-  <title>Assets Feedback</title>
-  <meta content="" name="description">
-  <meta content="" name="keywords">
-
-  <!-- Favicons -->
-  <link href="../../assets/img/favicon.png" rel="icon">
-  <link href="../../assets/img/apple-touch-icon.png" rel="apple-touch-icon">
-
-  <!-- Google Fonts -->
-  <link href="https://fonts.gstatic.com" rel="preconnect">
-  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Nunito:300,300i,400,400i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">
-
-  <!-- Vendor CSS Files -->
-  <link href="../../assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
-  <link href="../../assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
-  <link href="../../assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
-  <link href="../../assets/vendor/quill/quill.snow.css" rel="stylesheet">
-  <link href="../../assets/vendor/quill/quill.bubble.css" rel="stylesheet">
-  <link href="../../assets/vendor/remixicon/remixicon.css" rel="stylesheet">
-  <link href="../../assets/vendor/simple-datatables/style.css" rel="stylesheet">
-
-  <!-- Template Main CSS File -->
-  <link href="../../assets/css/style.css" rel="stylesheet">
-
-  <!-- Template Local CSS File -->
-  <link href="../../assets/css/local.css" rel="stylesheet">
-  
-	
-	<!-- For QR Code (Start)-->  
-	<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcode-generator/1.4.1/qrcode.js"></script>
-	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
-	<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> -->
-	<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/p opper.js/1.14.3/umd/popper.min.js"> </script> -->
-	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
-	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
-	<!-- For QR Code (End)-->
-	
-	<!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
-	<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
-	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script> -->
+    <meta charset="utf-8">
+    <meta content="width=device-width, initial-scale=1.0" name="viewport">
+
+    <title>Assets Feedback</title>
+    <meta content="" name="description">
+    <meta content="" name="keywords">
+
+    <!-- Favicons -->
+    <link href="../assets/img/favicon.png" rel="icon">
+    <link href="../assets/img/apple-touch-icon.png" rel="apple-touch-icon">
+
+    <!-- Google Fonts -->
+    <link href="https://fonts.gstatic.com" rel="preconnect">
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Nunito:300,300i,400,400i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i"
+          rel="stylesheet">
+
+    <!-- Vendor CSS Files -->
+    <link href="../assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
+    <link href="../assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
+    <link href="../assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
+    <link href="../assets/vendor/quill/quill.snow.css" rel="stylesheet">
+    <link href="../assets/vendor/quill/quill.bubble.css" rel="stylesheet">
+    <link href="../assets/vendor/remixicon/remixicon.css" rel="stylesheet">
+    <link href="../assets/vendor/simple-datatables/style.css" rel="stylesheet">
+
+    <!-- Template Main CSS File -->
+    <link href="../assets/css/style.css" rel="stylesheet">
+
+    <!-- Template Local CSS File -->
+    <link href="../assets/css/local.css" rel="stylesheet">
+
+
+    <!-- For QR Code (Start)-->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcode-generator/1.4.1/qrcode.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+    <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> -->
+    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/p opper.js/1.14.3/umd/popper.min.js"> </script> -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
+    <!-- For QR Code (End)-->
+
+    <!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
+    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script> -->
 </head>
 <!-- </div> -->
\ No newline at end of file
diff --git a/src/main/resources/templates/fragment/Header.html b/src/main/resources/templates/fragment/Header.html
index de9c777..dd83f22 100644
--- a/src/main/resources/templates/fragment/Header.html
+++ b/src/main/resources/templates/fragment/Header.html
@@ -1,21 +1,21 @@
 <!DOCTYPE html>
 <html xmlns:th="https://www.thymeleaf.org">
-<header th:fragment="header" id="header" class="header fixed-top d-flex align-items-center">
+<header class="header fixed-top d-flex align-items-center" id="header" th:fragment="header">
 
     <div class="d-flex align-items-center justify-content-between">
-      <a th:href="@{/qr-feedback/dashboard}" class="logo d-flex align-items-center">
-        <img src="../../assets/img/logo.png" alt="">
-        <span class="d-none d-lg-block">Assets</span>
-      </a>
-      <i class="bi bi-list toggle-sidebar-btn"></i>
+        <a class="logo d-flex align-items-center" th:href="@{/qr-feedback/dashboard}">
+            <img alt="" src="../assets/img/img/logocp.png">
+            <span class="d-none d-lg-block">Assets</span>
+        </a>
+        <i class="bi bi-list toggle-sidebar-btn"></i>
     </div><!-- End Logo -->
 
-	<div class="d-flex align-items-center justify-content-between">
-      <a th:href="@{/qr-feedback/dashboard}" class="logo">
-        <span class="d-none d-lg-block" style="width: max-content;">GREATER CHENNAI CORPORATION</span>
-      </a>
+    <div class="d-flex align-items-center justify-content-between">
+        <a class="logo" th:href="@{/qr-feedback/dashboard}">
+            <span class="d-none d-lg-block" style="width: max-content;">GREATER CHENNAI CORPORATION</span>
+        </a>
     </div><!-- End Logo -->
-    
+
     <!-- <div class="search-bar">
       <form class="search-form d-flex align-items-center" method="POST" action="#">
         <input type="text" name="query" placeholder="Search" title="Enter search keyword">
@@ -25,73 +25,73 @@
     <!-- End Search Bar -->
 
     <nav class="header-nav ms-auto">
-      <ul class="d-flex align-items-center">
+        <ul class="d-flex align-items-center">
 
-        <li class="nav-item d-block d-lg-none">
-          <a class="nav-link nav-icon search-bar-toggle " href="#">
-            <i class="bi bi-search"></i>
-          </a>
-        </li><!-- End Search Icon-->
+            <li class="nav-item d-block d-lg-none">
+                <a class="nav-link nav-icon search-bar-toggle " href="#">
+                    <i class="bi bi-search"></i>
+                </a>
+            </li><!-- End Search Icon-->
 
-        <li class="nav-item dropdown pe-3">
+            <li class="nav-item dropdown pe-3">
 
-          <a class="nav-link nav-profile d-flex align-items-center pe-0" href="#" data-bs-toggle="dropdown">
-            <img src="../../assets/img/user-profile.png" alt="Profile" class="rounded-circle">
-            <span class="d-none d-md-block dropdown-toggle ps-2" th:text="${user.userName}">User</span>
-          </a><!-- End Profile Iamge Icon -->
+                <a class="nav-link nav-profile d-flex align-items-center pe-0" data-bs-toggle="dropdown" href="#">
+                    <img alt="Profile" class="rounded-circle" src="../assets/img/user-profile.png">
+                    <span class="d-none d-md-block dropdown-toggle ps-2" th:text="${user.userName}">User</span>
+                </a><!-- End Profile Iamge Icon -->
 
-          <ul class="dropdown-menu dropdown-menu-end dropdown-menu-arrow profile">
-            <li class="dropdown-header">
-              <h6 th:text="${user.userDisplayName}"></h6>
-              <span th:text="${user.userRole}">Admin</span>
-            </li>
-            <li>
-              <hr class="dropdown-divider">
-            </li>
+                <ul class="dropdown-menu dropdown-menu-end dropdown-menu-arrow profile">
+                    <li class="dropdown-header">
+                        <h6 th:text="${user.userDisplayName}"></h6>
+                        <span th:text="${user.userRole}">Admin</span>
+                    </li>
+                    <li>
+                        <hr class="dropdown-divider">
+                    </li>
 
-            <li>
-              <a class="dropdown-item d-flex align-items-center" href="users-profile.html">
-                <i class="bi bi-person"></i>
-                <span>My Profile</span>
-              </a>
-            </li>
-            <li>
-              <hr class="dropdown-divider">
-            </li>
+                    <li>
+                        <a class="dropdown-item d-flex align-items-center" href="users-profile.html">
+                            <i class="bi bi-person"></i>
+                            <span>My Profile</span>
+                        </a>
+                    </li>
+                    <li>
+                        <hr class="dropdown-divider">
+                    </li>
 
-            <li>
-              <a class="dropdown-item d-flex align-items-center" href="users-profile.html">
-                <i class="bi bi-gear"></i>
-                <span>Account Settings</span>
-              </a>
-            </li>
-            <li>
-              <hr class="dropdown-divider">
-            </li>
+                    <li>
+                        <a class="dropdown-item d-flex align-items-center" href="users-profile.html">
+                            <i class="bi bi-gear"></i>
+                            <span>Account Settings</span>
+                        </a>
+                    </li>
+                    <li>
+                        <hr class="dropdown-divider">
+                    </li>
 
-            <li>
-              <a class="dropdown-item d-flex align-items-center" href="pages-faq.html">
-                <i class="bi bi-question-circle"></i>
-                <span>Need Help?</span>
-              </a>
-            </li>
-            <li>
-              <hr class="dropdown-divider">
-            </li>
+                    <li>
+                        <a class="dropdown-item d-flex align-items-center" href="pages-faq.html">
+                            <i class="bi bi-question-circle"></i>
+                            <span>Need Help?</span>
+                        </a>
+                    </li>
+                    <li>
+                        <hr class="dropdown-divider">
+                    </li>
 
-            <li>
-              <a class="dropdown-item d-flex align-items-center" th:href="@{/qr-feedback/logout}">
-                <i class="bi bi-box-arrow-right"></i>
-                <span>Sign Out</span>
-              </a>
-            </li>
+                    <li>
+                        <a class="dropdown-item d-flex align-items-center" th:href="@{/qr-feedback/logout}">
+                            <i class="bi bi-box-arrow-right"></i>
+                            <span>Sign Out</span>
+                        </a>
+                    </li>
 
-          </ul><!-- End Profile Dropdown Items -->
-        </li><!-- End Profile Nav -->
+                </ul><!-- End Profile Dropdown Items -->
+            </li><!-- End Profile Nav -->
 
-      </ul>
+        </ul>
     </nav><!-- End Icons Navigation -->
 
-  </header><!-- End Header -->
+</header><!-- End Header -->
 </html>
      
\ No newline at end of file
diff --git a/src/main/resources/templates/fragment/Js.html b/src/main/resources/templates/fragment/Js.html
index eeb2865..f697988 100644
--- a/src/main/resources/templates/fragment/Js.html
+++ b/src/main/resources/templates/fragment/Js.html
@@ -1,21 +1,21 @@
 <!DOCTYPE html>
 <html xmlns:th="https://www.thymeleaf.org">
 <js class="js" th:fragment="js">
-  <!-- Vendor JS Files -->
-  <script src="../../assets/vendor/apexcharts/apexcharts.min.js"></script>
-  <script src="../../assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
-  <script src="../../assets/vendor/chart.js/chart.min.js"></script>
-  <script src="../../assets/vendor/echarts/echarts.min.js"></script>
-  <script src="../../assets/vendor/quill/quill.min.js"></script>
-  <script src="../../assets/vendor/simple-datatables/simple-datatables.js"></script>
-  <script src="../../assets/vendor/tinymce/tinymce.min.js"></script>
-  <script src="../../assets/vendor/php-email-form/validate.js"></script>
+    <!-- Vendor JS Files -->
+    <script src="../assets/vendor/apexcharts/apexcharts.min.js"></script>
+    <script src="../assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
+    <script src="../assets/vendor/chart.js/chart.min.js"></script>
+    <script src="../assets/vendor/echarts/echarts.min.js"></script>
+    <script src="../assets/vendor/quill/quill.min.js"></script>
+    <script src="../assets/vendor/simple-datatables/simple-datatables.js"></script>
+    <script src="../assets/vendor/tinymce/tinymce.min.js"></script>
+    <script src="../assets/vendor/php-email-form/validate.js"></script>
 
-  <!-- Template Main JS File -->
-  <script src="../../assets/js/main.js"></script>
+    <!-- Template Main JS File -->
+    <script src="../assets/js/main.js"></script>
 
-  <!-- Custom Local JS File -->
-  <script src="../../assets/js/local.js"></script>
-  
- </js> 
- </html>
\ No newline at end of file
+    <!-- Custom Local JS File -->
+    <script src="../assets/js/local.js"></script>
+
+</js>
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/login.html b/src/main/resources/templates/login.html
index 569aad5..9562562 100644
--- a/src/main/resources/templates/login.html
+++ b/src/main/resources/templates/login.html
@@ -1,139 +1,208 @@
 <!DOCTYPE html>
-<html xmlns:th="https://www.thymeleaf.org">
-
-<!-- head tag -->
-<div th:replace="fragment/Head.html::head"></div>
-
-<style>
-body {
-    font-family: "Open Sans", sans-serif;
-    /* background: #405d97; */
-    background: url("../../assets/img/Loop-twinkle.gif");
-    color: #444444;
-
-    /* background-image: url('../../assets/img/greater-chennai-corporation.jpg');
-	background-position: center;
-	background-repeat: no-repeat;
- 	background-size: cover; */
-}
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>LoginPage</title>
+    <link href="../asset/css/style.css" rel="stylesheet">
+    <!-- Bootstrap CSS -->
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet">
+    <!-- Custom CSS -->
+
+    <style>
+    body {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    }
+
+
+
+    .card {
+      width: 350px;
+      margin: 0 auto;
+      margin-top: 50px;
+      box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
+      border-radius: 5px;
+      align-items: center;
+      /* display: flex; */
+      padding: 20px;
+      text-align: center;
+      background-color: rgba(255, 255, 255, 0.9);
+      opacity: 0.9;
+
+
+    }
+
+    .card-header {
+      font-weight: bold;
+      font-size: 24px;
+    }
+
+    .form-group {
+      margin-bottom: 20px;
+
+    }
+
+    input[type=text], input[type=password] {
+      width: 100%;
+      padding: 12px 20px;
+      margin: 8px 0;
+      display: inline-block;
+      border: 1px solid #ccc;
+      border-radius: 4px;
+      box-sizing: border-box;
+    }
+
+    button {
+      background-color: #007bff;
+      color: white;
+      padding: 17px 109px;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+    }
+
+    button:hover {
+      background-color: #0069d9;
+    }
+
+    .text-muted {
+      font-size: 14px;
+    }
+   .main-section {
+    width: 100%;
+    /* float: left; */
+    padding: 40px;
+    /* margin: 0 auto; */
+    position: relative;
+    display: flex;
 
-.bg {
-    background-image: url('../../assets/img/greater-chennai-corporation.png');
-	background-position: center;
-	background-repeat: no-repeat;
- 	background-size: cover;
-}
 
-.login-span {
+   }
+   .main-section .left-side-contant {
+    float: left;
+    width: 50%;
+    padding-right: 10px;
+
+   }
+   .main-section .right-side-contant {
+    float: left;
+    width: 55%;
+
+
+   }
+   h4 {
     position: relative;
-    bottom: 40px;
-    right: 370px;
-}
+    margin-left: 74px;
+    text-align: center;
+    font-weight: bold;
 
-.login-span2 {
-	position: relative;
-    bottom: 102px;
-    left: 280px;
-}
+   }
+   .container-fluid {
+    position: relative;
+    width: 100%;
+    height: 100%;
+   }
+   .card {
+    position: relative;
+    align-items: center;
+    margin: 0 auto;
+    display: flex;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+   }
+   .bgbanner{
+    background-image: url('../assets/img/img/mediaqurey.jpg');
+    width: 100%;
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-size: 100%;
+    height: 100vh;
+    background-position: center;
+    /* margin-bottom: 30px; */
+    background-size: cover;
+   }
+   .left-side-contant img{
+      width: 35px;
+      margin-left: -40px;
+      float: left;
+      margin-top: -15px;
+      position: absolute;
+      margin-left: 20px;
+   }
+   .left-side-contant h4{
+    line-height: 40px;
+    position: relative;
+    /* position: absolute; */
+    margin-left: 20px;
+   }
+   .main-section{
+    padding: 55px 40px;
+   }
 
-.logo-span3 {
-	position: relative;
-    bottom: 100px;
-    left: 285px;
-}
+   @media only screen and (max-width: 768px) {
+    .cardbody {
 
-.login-logo {
-	position: relative;
-    bottom: 35px;
-    right: 380px;
+
+  }
 }
 
 
-</style>
 
+
+
+    </style>
 <body>
-<div class="bg">
-    <main class="container">
-        <div class="container">
-
-            <section
-                    class="section register min-vh-100 d-flex flex-column align-items-center justify-content-center py-4">
-                <!-- <div class="container"> -->
-                <div class="row justify-content-center">
-                    <div class="d-flex justify-content-center py-1">
-                        <a class="logo d-flex align-items-center w-auto" href="#">
-                            <img alt="" class="login-logo" src="../../assets/img/logo.png" style="max-height: 80px;">
-                            <span class="d-none d-lg-block login-span" style="color: #ffffff; font-size: 28px;">GREATER CHENNAI CORPORATION</span>
-                        </a>
-                    </div><!-- End Logo -->
-                    <div class="d-flex justify-content-center py-1">
-                        <a class="logo d-flex align-items-center w-auto" href="#">
-                            <span class="d-none d-lg-block login-span2" style="color: #ffffff; font-size: 28px;">SMART GOVERNANCE</span>
-                        </a>
-                    </div><!-- End Logo -->
-                    <div class="d-flex justify-content-center py-1">
-                        <a class="logo d-flex align-items-center w-auto" href="#">
-                            <span class="d-none d-lg-block logo-span3" style="color: #ffffff; font-size: 28px;">CITIZEN FEEDBACK USING QR</span>
-                        </a>
-                    </div><!-- End Logo -->
-                    <div class="col-lg-4 col-md-6 d-flex flex-column align-items-center justify-content-center">
-
-                        <div class="card mb-3" style="opacity: 0.90;">
-
-                            <div class="card-body">
-
-                                <div class="pt-4 pb-2">
-                                    <h5 class="card-title text-center pb-0 fs-4">Login to Your Account</h5>
-                                    <p class="text-center small">Enter your username & password to login</p>
-                                    <span style="color: red;" th:text="${errorMsg}"></span>
-
-                                </div>
-
-                                <form class="row g-3 needs-validation" method="POST"
-                                      name='loginForm' th:action="@{/qr-feedback/dashboard}">
-
-                                    <div class="col-12">
-                                        <label class="form-label" for="yourUsername">Username</label>
-                                        <div class="input-group has-validation">
-                                            <!-- <span class="input-group-text" id="inputGroupPrepend">@</span> -->
-                                            <input class="form-control" id="yourUsername" name="username" required
-                                                   type="text">
-                                            <div class="invalid-feedback">Please enter your username.</div>
-                                        </div>
-                                    </div>
-
-                                    <div class="col-12">
-                                        <label class="form-label" for="yourPassword">Password</label>
-                                        <input class="form-control" id="yourPassword" name="password" required
-                                               type="password">
-                                        <div class="invalid-feedback">Please enter your password!</div>
-                                    </div>
-
-                                    <div class="col-12">
-                                        <!-- <div class="form-check">
-                                          <input class="form-check-input" type="checkbox" name="remember" value="true" id="rememberMe">
-                                          <label class="form-check-label" for="rememberMe">Remember me</label>
-                                        </div> -->
-                                    </div>
-                                    <div class="col-12">
-                                        <button class="btn btn-primary w-100" type="submit">Login</button>
-                                    </div>
-                                    <!-- <div class="col-12">
-                                      <p class="small mb-0">Don't have account? <a href="pages-register.html">Create an account</a></p>
-                                    </div> -->
-                                </form>
-
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <!-- </div> -->
+<div class="bgbanner">
+
+    <div class="container-fluid">
 
+        <header class="main-section">
+
+            <section class="left-side-contant">
+                <img alt="chennai-logo" src="../assets/img/img/logocp.png" style="width: 65px;">
+                <h4 style="color: #f5f5f5; font-size: 25px;">GREATER CHENNAI CORPORATION</h4>
+            </section>
+            <section class="right-side-contant">
+                <h4 style="color: #ffffff; font-size: 25px;">SMART GOVERNANCE<br>CITIZEN FEEDBACK USING QR</h4>
             </section>
+        </header>
+        <div class="card">
+            <div class="card-header" style="color:rgb(47, 163, 235); font-size: 20px;">Login to Your Account</div>
+            <div class="card-body">
+
+                <form class="row g-3 needs-validation" method="POST"
+                      name='loginForm' th:action="@{/qr-feedback/dashboard}">
+
+
+                    <div class="col-12">
+                        <input class="form-control" id="yourUsername" name="username" placeholder="Username" required
+                               type="text">
+                        <div class="invalid-feedback">Please enter your username.</div>
+                    </div>
+
+                    <div class="col-12">
+                        <input class="form-control" id="yourPassword" name="password" placeholder="Password"
+                               required type="password">
+                        <div class="invalid-feedback">Please enter your password!</div>
+                    </div>
 
+                    <div class="col-12">
+                        <button class="btn btn-primary w-100" type="submit">Login</button>
+                    </div>
+                </form>
+
+            </div>
         </div>
-    </main><!-- End #main -->
+
+        <!-- Bootstrap JS -->
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
+    </div>
 </div>
 </body>
-
 </html>
\ No newline at end of file