diff --git a/CSS3/Survey Form/index.html b/CSS3/Survey Form/index.html
index b1879c9..880555b 100644
--- a/CSS3/Survey Form/index.html	
+++ b/CSS3/Survey Form/index.html	
@@ -213,6 +213,8 @@ <h1 id="title" class="text-center">freeCodeCamp Survey Form</h1>
         </div> 
       </fieldset>
     </form> 
-  </div>    
+  </div> 
+  <a href="mailto:support@example.com" class="support-btn">Support</a>
+   
 </body>
 </html>
\ No newline at end of file
diff --git a/CSS3/Survey Form/mystyle.css b/CSS3/Survey Form/mystyle.css
index 072883e..01d9715 100644
--- a/CSS3/Survey Form/mystyle.css	
+++ b/CSS3/Survey Form/mystyle.css	
@@ -1,152 +1,164 @@
-@import url('https://fonts.googleapis.com/css?family=Poppins:200i,400&display=swap');
- 
-:root {
-  --color-white: #f3f3f3;
-  --color-dark-blue: #1b1b32;
-  --color-dark-blue-alpha: rgba(27,27,50,0.7);
-  --color-green: #229e51;
-}
-
-*,
-*::before,
-*::after {
+/* ====== Global Reset ====== */
+* {
+  margin: 0;
+  padding: 0;
   box-sizing: border-box;
+  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
 }
 
-/* mobile friendly alternative to using background-attachment: fixed */
-body::before {
-  content: '';
-  position: fixed;
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 100%;
-  z-index: -1;
-  background: var(--color-darkblue);
-  background-image: linear-gradient(115deg,rgba(58, 58, 158, 0.8),rgba(136, 136, 206, 0.7)
-    ),
-    url(https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg);
-  background-size: cover;
-  background-repeat: no-repeat;
-  background-position: center;
-}
-
-
+/* ====== Body Background ====== */
 body {
-  font-family: 'Poppins', sans-serif;
-  font-size: 1rem; 
-  line-height: 1.4;
-  color: var(--color-white);
-  font-weight: 100px;
-  margin: 0;
+  min-height: 100vh;
+  background: linear-gradient(135deg, #4f46e5, #06b6d4);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 30px;
 }
 
-/*   bring everything together at center for all devices     */
+/* ====== Container ====== */
 .container {
+  background: #ffffff;
   width: 100%;
-  margin: 3.125rem auto 0 auto;
-}
-
-@media (min-width: 576px) {
-  .container {
-    max-width: 540px;
-  }
-}
-
-@media (min-width: 768px) {
-  .container {
-    max-width: 720px;
-  }
+  max-width: 720px;
+  border-radius: 14px;
+  padding: 30px 35px;
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
 }
 
-header {
+/* ====== Header ====== */
+.header {
   text-align: center;
-  line-height: 1.5rem; 
-  margin-top: 2rem;
+  margin-bottom: 25px;
 }
 
-h1{
-  font-size: 2.5rem;
-  padding-top:2.5rem;
-  font-weight: bold;
+.header h1 {
+  color: #1e293b;
+  font-size: 28px;
+  margin-bottom: 8px;
 }
-#description {
-  font-size: 1.125rem;
-  font-style: italic;
-}
-
-#survey-form {
-  background-color: var(--color-dark-blue);
-  background-color: var(--color-dark-blue-alpha);
-  padding: 1.5rem 1.5rem;
-  border-radius: 0.25rem;
 
+.header p {
+  color: #64748b;
+  font-size: 15px;
 }
 
-.clue {
-  margin-left: 0.25rem;
-  font-size: 0.9rem;
-  color: #e4e4e4;
+/* ====== Fieldset ====== */
+fieldset {
+  border: none;
 }
 
-
 legend {
-  font-weight: 200;
-  font-size: 1.2rem;
+  font-size: 18px;
+  font-weight: 600;
+  margin-bottom: 15px;
+  color: #334155;
 }
 
-div {
-  margin-left: 1.5rem;
+/* ====== Form Group ====== */
+#form-group,
+.form-group {
+  margin-bottom: 18px;
 }
 
-#form-group {
-  margin: 1.5rem !important;
-}
-
-form , label , p, input, select, textarea {
-  font-size: 1.25rem;
-  font-weight: 100;
-  padding: 1rem;
-  margin: 0.25rem;
+/* ====== Labels ====== */
+label {
+  display: block;
+  font-size: 14px;
+  font-weight: 600;
+  color: #334155;
+  margin-bottom: 6px;
 }
 
-
-input[type="text"], [type="email"] ,[type="number"], select{
+/* ====== Inputs & Select ====== */
+.form-control,
+.input-textarea {
   width: 100%;
-  border: 1px solid blue;  
+  padding: 11px 12px;
+  border-radius: 8px;
+  border: 1px solid #cbd5e1;
+  font-size: 14px;
+  outline: none;
+  transition: all 0.25s ease;
+}
 
+.form-control:focus,
+.input-textarea:focus {
+  border-color: #4f46e5;
+  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
 }
 
+/* ====== Radio & Checkbox ====== */
 .input-radio,
 .input-checkbox {
-  display: inline-block;
-  margin-right: 0.25rem;
-  min-height: 1.25rem;
-  min-width: 1.25rem;
+  margin-right: 8px;
+  transform: scale(1.1);
+  accent-color: #4f46e5;
 }
 
+.form-group div {
+  margin-top: 6px;
+}
 
+/* ====== Clue text ====== */
+.clue {
+  font-size: 12px;
+  color: #64748b;
+}
+
+/* ====== Textarea ====== */
 .input-textarea {
-  width: 100%;
-  font-size: 1.5rem;
-  background-color: var(--color-white);
-  padding: 0.5rem;
+  resize: vertical;
 }
 
-button{
+/* ====== Submit Button ====== */
+.submit-button {
   width: 100%;
-  display: block;
-  padding: 0.75rem;
-  font-size: 1.5rem;
+  padding: 13px;
+  font-size: 16px;
+  font-weight: 600;
+  color: #ffffff;
+  background: linear-gradient(135deg, #4f46e5, #06b6d4);
+  border: none;
+  border-radius: 10px;
   cursor: pointer;
-  color: #fff;
-  font-weight: 100;
-  border-radius: 2px;
-  background-color: var(--color-green);
-
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
 }
 
+.submit-button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
+}
 
+/* ====== Floating Support Button ====== */
+.support-btn {
+  position: fixed;
+  right: 25px;
+  bottom: 25px;
+  background: #22c55e;
+  color: #ffffff;
+  padding: 14px 18px;
+  border-radius: 50px;
+  font-size: 15px;
+  font-weight: 600;
+  text-decoration: none;
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
+  transition: all 0.25s ease;
+  z-index: 999;
+}
+
+.support-btn:hover {
+  background: #16a34a;
+  transform: scale(1.05);
+}
+
+/* ====== Responsive ====== */
+@media (max-width: 600px) {
+  .container {
+    padding: 25px 20px;
+  }
 
-
- 
\ No newline at end of file
+  .header h1 {
+    font-size: 22px;
+  }
+}