diff --git a/css/homeHeader.css b/css/homeHeader.css
index 133975b9..ca839b06 100644
--- a/css/homeHeader.css
+++ b/css/homeHeader.css
@@ -217,4 +217,308 @@
     display: none;
   }
 
+}
+.contact h2 {
+  margin-bottom: 3rem;
+}
+
+.contact form {
+  max-width: 70rem;
+  margin: 1rem auto;
+  text-align: center;
+  margin-bottom: 3rem;
+}
+.contact form .input-box {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+
+.contact form .input-box input,
+.contact form textarea {
+  width: 100%;
+  padding: 1.5rem;
+  font-size: 1.6rem;
+  color: rgb(206, 255, 206);
+  background: var(--second-color);
+  border-radius: 0.8rem;
+  margin: 0.7rem 0;
+  border-radius: 20px;
+  background: #053314;
+  box-shadow: inset 23px 23px 21px #04240e, inset -23px -23px 21px #07421a;
+}
+.contact form .input-box input::placeholder,
+.contact form textarea::placeholder {
+  color: rgb(206, 255, 206);
+}
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+.contact form .input-box input {
+  width: 49%;
+}
+
+.contact form textarea {
+  resize: none;
+}
+.contact form .btn {
+  margin-top: 2rem;
+  cursor: pointer;
+}
+
+#review-btn{
+  padding: 10px 20px;
+  border: none;
+  border-radius: 5px 0 0 5px;
+  background-color:  #B19222;
+  color: white;
+  font-size: 16px;
+  writing-mode: vertical-rl;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+  position: absolute;
+  right: 0; /* Attach to the right edge */
+  top: 50%; /* Vertically center */
+  transform: translateY(-50%); /* Adjust for centering */
+  white-space: nowrap; /* Prevent text from wrapping */
+
+
+
+}
+#review-btn:hover{
+  background-color:#B19222 ;
+}
+.button-container {
+  position: fixed;
+  top: 50%;
+  right: 0;
+  transform: translateY(-50%);
+  z-index: 200; /* Ensure it stays on top */
+}
+
+/* Modal styles */
+.modal {
+
+  display: none;
+  flex-direction: column;
+  /* flex-wrap: nowrap; */
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  z-index: 101;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  /*overflow: auto;*/
+  background-color: rgba(0, 0, 0, 0.4);
+}
+.modal-content {
+  background-color: #ffffff;
+  /* margin: 10% auto; */
+  padding: 50px;
+  border-radius: 10px;
+  width: 90%;
+  max-width: 500px;
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
+  position: relative;
+  text-align: center;
+}
+.close {
+  color: #aaa;
+  float: right;
+  font-size: 24px;
+  font-weight: bold;
+  cursor: pointer;
+}
+.close:hover,
+.close:focus {
+  color: #000;
+}
+.modal-content h2 {
+  margin-top: 0;
+  margin-bottom: 10px;
+  text-align: center;
+  color:black;
+  font-size: 24px;
+}
+
+.form-group {
+  position: relative;
+  margin-bottom: 20px;
+}
+.form-group .icon {
+  position: absolute;
+  top: 50%;
+  left: 10px;
+  transform: translateY(-50%);
+  background-color: #8a2be2;
+  background-color:rgb(161, 216, 217);
+  color: white;
+  border-radius: 50%;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.form-group input,
+.form-group textarea {
+  width: 100%;
+  padding: 10px 10px 10px 40px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  font-size: 14px;
+}
+.form-group input::placeholder,
+.form-group textarea::placeholder {
+  color: #bbb;
+}
+.form-group textarea {
+  height: 80px;
+  padding: 10px;
+}
+
+.modal-content button[type="submit"] {
+  background: linear-gradient(to right, #8a2be2, #f163ed);
+  background: linear-gradient(to right, rgb(75, 120, 179), rgb(165, 153, 209));
+  color: white;
+  border: none;
+  border-radius: 5px;
+  padding: 10px;
+  font-size: 16px;
+  cursor: pointer;
+  width: 100%;
+}
+
+.modal-content button[type="submit"]:hover {
+  background: linear-gradient(to right, #f55ef0, #8a2be2);
+}
+
+
+.modal-content button[type="submit"]:focus {
+  outline: none;
+}
+.close:hover {
+  color: #000;
+}
+.close:focus {
+  color: #000;
+  text-decoration: none;
+  cursor: pointer;
+}
+/* rating stars */
+.rating {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 20px;
+  bottom: 10px;
+}
+.rating h2 {
+  margin: 0;
+  margin-right: 10px;
+  font-size: 18px;
+}
+.rating__star {
+  font-size: 24px;
+  margin: 0 5px;
+  cursor: pointer;
+  color: #dabd18b2;
+}
+.rating__star:hover,
+.rating__star.active {
+  color: #ffc107;
+}
+/* comment */
+#CommentBtn {
+  position: fixed;
+  bottom: 270px;
+  width: 140px;
+  height: 40px;
+  right: -55px;
+  border-radius: 5px;
+  background-color: rgb(161, 216, 217);
+  color: white;
+  border: none;
+  cursor: pointer;
+  font-size: 24px;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  opacity: 0.4;
+  transition: 500ms;
+  transform: rotate(90deg);
+}
+
+#CommentBtn:hover {
+  background-color: #0056b3;
+  opacity: 1;
+}
+
+
+/* Style for the modal background */
+#modalBackground {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+/* Style for the comment form */
+#commentForm {
+  max-width: 500px;
+  padding: 20px;
+  border: 1px solid #ddd;
+  border-radius: 10px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  background: linear-gradient(to right, rgb(161, 216, 217), rgb(105, 106, 134));
+  z-index: 1001;
+}
+
+#commentForm label {
+  display: block;
+  margin-bottom: 10px;
+  font-weight: bold;
+}
+
+#commentForm textarea {
+  width: 96%;
+  padding: 10px;
+  margin-bottom: 10px;
+  border: 1px solid #ddd;
+  border-radius: 5px;
+  resize: vertical;
+}
+
+#commentForm button[type="submit"] {
+  color: white;
+  border: none;
+  padding: 10px 20px;
+  border-radius: 5px;
+  cursor: pointer;
+  font-size: 16px;
+}
+
+#commentForm button[type="submit"]:hover {
+  background-color: #ace3ed;
+}
+#ll{
+  bottom: 5px;
+  border: #8a2be2;
+  background-color: #e1eaeb;
+  border-radius: 4px;
+}
+.rating{
+  background: linear-gradient(to right, rgb(161, 216, 217), rgb(105, 106, 134));
+
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index 692cb3c3..a091a161 100644
--- a/index.html
+++ b/index.html
@@ -15,7 +15,7 @@
 	<link rel="stylesheet" href="css/homeHeader.css">
 	<link rel="stylesheet" type="text/css" href="css/index.css">
 	<link rel="stylesheet" href="css/footer.css">
-
+	<link rel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"/>
 </head>
 
 <body>
@@ -35,6 +35,49 @@
 
 	<!--Header start  -->
 	<header id="homeHeader">
+		<button id="CommentBtn" aria-label="Toggle Comment Form"><i class="fas fa-comment"></i>feedback</button>
+
+				<!-- Comment form -->
+
+				<!-- Modal background -->
+				<div id="modalBackground">
+				  <!-- Comment form -->
+				  <div id="commentForm">
+					<form id="feedback-form">
+					  <label for="userComment" style="color: rgb(229, 230, 239);">Your Feedback:</label>
+					  <div class="form-group">
+						<div class="icon" >
+						  <i class="fas fa-user"></i>
+						</div>
+						<input type="text" id="name" onfocus="changeColor()" placeholder="Your Name" name="name" required style="
+						width: 250px;
+					">
+					  </div>
+					  <div class="form-group">
+						<div class="icon">
+						  <i class="fas fa-envelope"></i>
+						</div>
+						<input type="email" id="email" onfocus="changeColor()" placeholder="Email Id" required style="
+						width: 250px;
+					">
+					  </div>
+					  <div class="form-group">
+						<textarea cols="30" rows="5" placeholder="Your Feedback" required></textarea>
+					  </div>
+					  <div class="rating">
+						<h2>Rate us:</h2>
+						<i class="rating__star far fa-star"></i>
+						<i class="rating__star far fa-star"></i>
+						<i class="rating__star far fa-star"></i>
+						<i class="rating__star far fa-star"></i>
+						<i class="rating__star far fa-star"></i>
+					  </div>
+					  <button id="ll" style="color: rgb(105, 106, 134);">Submit</button>
+					</form>
+				  </div>
+				</div>
+
+				
 		<nav class="navbar homeHeader navbar-expand-lg navbar-light bg-light">
 			<a class="navbar-brand" href="https://flipkart-clone-seven-azure.vercel.app/">
 				<img src="https://static-assets-web.flixcart.com/batman-returns/batman-returns/p/images/fkheaderlogo_exploreplus-44005d.svg"
diff --git a/js/homeHeader.js b/js/homeHeader.js
index 24e32234..6249afc0 100644
--- a/js/homeHeader.js
+++ b/js/homeHeader.js
@@ -42,3 +42,64 @@ try {
   document.getElementById("cartItems").style.display="none"
   console.warn(error)
 }
+const ratingStars = [...document.getElementsByClassName("rating__star")];
+
+function executeRating(stars) {
+  const starClassActive = "rating__star fas fa-star";
+  const starClassInactive = "rating__star far fa-star";
+  const starsLength = stars.length;
+  let i;
+  stars.map((star) => {
+  star.onclick = () => {
+    i = stars.indexOf(star);
+
+    if (star.className===starClassInactive) {
+    for (i; i >= 0; --i) stars[i].className = starClassActive;
+    } else {
+    for (i; i < starsLength; ++i) stars[i].className = starClassInactive;
+    }
+  };
+  });
+}
+executeRating(ratingStars);
+
+
+    const ratingInputs = document.querySelectorAll('input[name="rating"]');
+  ratingInputs.forEach((input) => {
+  input.addEventListener("click", function() {
+    const value = parseInt(input.value);
+    for (let i = 1; i <= value; i++) {
+    document.getElementById(`star${i}`).checked = true;
+    }
+    for (let i = value + 1; i <= 5; i++) {
+    document.getElementById(`star${i}`).checked = false;
+    }
+  });
+  });
+    document.getElementById("CommentBtn").addEventListener("click", function () {
+    document.getElementById("modalBackground").style.display = "flex";
+    });
+
+    // Close the form when clicking outside of it (optional)
+    document.getElementById("modalBackground").addEventListener("click", function (event) {
+    if (event.target === this) {
+      this.style.display = "none";
+    }
+    });
+    let commentForm = document.getElementById("commentForm");
+let modalBackground = document.getElementById("modalBackground");
+
+document.getElementById("CommentBtn").addEventListener("click", function(event) {
+  if (commentForm.style.display === "none") {
+  commentForm.style.display = "block";
+  modalBackground.style.display = "flex";
+  } else {
+  commentForm.style.display = "none";
+  modalBackground.style.display = "none";
+  }
+});
+
+document.getElementById("ll").addEventListener("click", function(event) {
+  commentForm.style.display = "none";
+  modalBackground.style.display = "none";
+});
\ No newline at end of file