diff --git a/index.html b/index.html
index ac30b82d..98e16847 100644
--- a/index.html
+++ b/index.html
@@ -6091,7 +6091,23 @@ <h3>Rateus</h3>
 
                 document.getElementById("submit-btn").addEventListener("click", function(event) {
                   event.preventDefault(); // Prevent default form submission
+  <div class="user-info">
+    <input type="text" id="name" placeholder="Your Name">
+    <input type="email" id="email" placeholder="Your Email">
+  </div>
 
+  <div class="stars">
+    <input type="radio" id="star5" name="rate" value="5">
+    <label for="star5" class="emoji-label">😭</label>
+    <input type="radio" id="star4" name="rate" value="4">
+    <label for="star4" class="emoji-label">😢</label>
+    <input type="radio" id="star3" name="rate" value="3">
+    <label for="star3" class="emoji-label">😐</label>
+    <input type="radio" id="star2" name="rate" value="2">
+    <label for="star2" class="emoji-label">😊</label>
+    <input type="radio" id="star1" name="rate" value="1">
+    <label for="star1" class="emoji-label">😍</label>
+  </div>
                 let selectedEmoji = document.querySelector('input[name="rate"]:checked');
                 let feedback = document.getElementById("feedback").value.trim();
 
@@ -6155,7 +6171,27 @@ <h3>Rateus</h3>
     z-index: 999; /* Ensure it's above other elements */
 }
 
+#feedback {
+  width: 100%;
+  padding: 15px;
+  border: 1px solid #d1d1d1;
+  border-radius: 10px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  font-size: 1em;
+  color: #5e5d5d;
+  background-color: #f9f9f9;
+  resize: none;
+  transition: border-color 0.3s ease, box-shadow 0.3s ease;
+}
 
+#feedback::placeholder {
+  color: #a9a9a9;
+}
+#feedback:focus {
+  border-color: #4b9cd3;
+  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
+  outline: none;
+}
 
 
 .toast-message.show {