diff --git a/css/style.css b/css/style.css
index 4e52ffb..4b0bb55 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,76 +1,127 @@
-/* google font */
-@import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');
-
-/* css reset */
-  *{
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-  }
-
-  body {
-    font-family: 'Raleway', sans-serif;
-    background-image: url("../images/Background.jpg");
-    width: 100%;
-    height: auto;
-    background-repeat: no-repeat;
-    background-size: cover;
-    background-color: #45b6eb;
-    color: #fff;
-    font-size: 1.2vw;
-   }
-
-  #heading {
-    max-width: 750px;
-    margin: 4rem auto;
-    padding: .6rem;
-  }
-  #main {
-      padding: 0% 20% 0% 20%;
-  }
-
-  #title {
-    font-size: 2.2rem;
-    text-align: center;
-    line-height: 1.2;
-    padding: .6rem;
-  }
-
-  #description {
-    font-size: 1.1rem;
-    text-align: center;
-    padding: .2rem;
-  }
-
-  #survey-form {
-    background-color: #2222425d;
-    padding: 3rem 2.5rem;
-    border-radius: 7px;
-  }
-
-  #submit {
-    background: #22d87d;
-    color: #fff;
-    padding: .7rem;
-    font-size: 1.15rem;
-    cursor: pointer;
-  }
-
-  #submit:hover {
-    background: rgb(9, 168, 89);
-  }
-
-.form {
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600;700;800');
+
+body {
+  font-family: 'Poppins', sans-serif;
+  background-image: url('https://img.freepik.com/free-vector/big-meeting-room-concept-illustration_114360-24589.jpg?t=st=1720079277~exp=1720082877~hmac=56dd244c77917795eeb15897bfcb41975b85b27005cf853681876bb4a897908c&w=996');
+  background-repeat: repeat;
+  background-size: fit;
+  opacity: 0.9;
+  margin: 0;
+  padding: 0;
+}
+
+#container {
+  background-color: #6a5acd;
+  opacity: 1;
+  margin: 0 auto;
+  padding: 50px;
+  text-align: center;
+  color: #ffffff;
+}
+
+#title, #description {
+  color: #ffffff;
+}
+
+#description {
+  font-size: 18px;
+  font-style: italic;
+}
+
+#survey-form {
+  background-color: #f6f6f6;
+  max-width: 800px;
+  padding: 40px;
+  margin: 0 auto;
+  border-radius: 8px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+  text-align: left;
+}
+
+label {
+  display: block;
+  margin-bottom: 5px;
+  color: #6a5acd;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+input[type="text"], input[type="email"], input[type="number"], select, textarea {
   width: 100%;
-  padding: .7rem;
-  border-radius: 6px;
-  font-size: 1.0rem;
-  border: none;
+  padding: 10px;
+  margin-bottom: 10px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  font-family: inherit;
+  font-size: 16px;
+  font-weight: 600;
+  color: #f8554e;
+  background-color: #ffffff;
+}
+
+input[type="text"]:hover, input[type="email"]:hover, input[type="number"]:hover, select:hover, textarea:hover {
+  border-color: #f8554e;
+  background-color: #f6f6f6;
+}
+
+input[type="text"]::placeholder, input[type="email"]::placeholder, input[type="number"]::placeholder, textarea::placeholder {
+  color: #808080;
 }
 
-  @media only screen and (max-width:480px){
+option{
+  font-weight:600;
+}
 
-  #main {
-    padding: 0% 0% 0% 0%;
-    }
-  }
\ No newline at end of file
+input[type="radio"], input[type="checkbox"] {
+  display: none;
+}
+
+input[type="radio"] + label, input[type="checkbox"] + label {
+  display: inline-block;
+  position: relative;
+  padding-left: 30px;
+  cursor: pointer;
+  line-height: 10px;
+  color: #f8554e;
+	word-wrap:wrap;
+}
+
+input[type="radio"] + label:before, input[type="checkbox"] + label:before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 15px;
+  height: 15px;
+  border: 2px solid #f8554e;
+  border-radius: 50%;
+  transition: background-color 0.3s ease;
+	word-wrap:wrap;
+}
+
+input[type="checkbox"] + label:before {
+  border-radius: 5px;
+}
+
+input[type="radio"]:checked + label:before, input[type="checkbox"]:checked + label:before {
+  background-color: #f8554e;
+}
+
+button {
+  background-color: #6a5acd;
+  color: #fff;
+  padding: 10px 20px;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  width: 100%;
+  font-family: 'Roboto', sans-serif;
+  font-weight: 700;
+  font-size: medium;
+}
+
+button:hover {
+  background-color: #f8554e;
+  color: #fff;
+}
diff --git a/index.html b/index.html
index de38797..624545d 100644
--- a/index.html
+++ b/index.html
@@ -1,89 +1,124 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Programmers Survey Form</title>
-    <link rel="stylesheet" type="text/css" href="css/style.css">
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Programmers Survey Form</title>
+  <link rel="stylesheet" href="css/style.css">
 </head>
 <body>
-    <div id="heading">
-    <h1 id=title>Programmers Voice! Tell us your choice!</h1>
+  <div id="container">
+	  
+    <h1 id="title">Programmers Voice!<br>Tell us your choice!</h1>
     <p id="description">We love to know about which technology and tools software engineers are using world wide! Each and every Developers opinions are very precious to us!</p>
-    </div>
-    <div id="main">
-        <form id="survey-form">
-        <div id="input-fields">
-            <label id="name-label"><b>Name:</b></label>
-            <input id="name" type="name" name="name" class="form" required placeholder="Full Name"><br>
-            <br>
-            <label id="email-label"><b>Email:</b></label>
-            <input id="email" type="email" name="email" class="form" required placeholder="example@mail.com"><br>
-            <br>
-            <label id="number-label"><b>Age:</b></label>
-            <input id="number" type="number" name="number" class="form" min="5" max="99" placeholder="12+">
-         </div>
-         <div id="dropdown-div"><br>
-            <label id="dropdown-label"><strong>Programming language you are expert at: </strong></label><br>
-            <select id="dropdown" name="code-lang" class="form">
-                <option value="C">C (Programming Language)</option>
-                <option value="Python">Python</option>
-                <option value="C#">C#</option>
-                <option value="php">PHP</option>
-                <option value="Js">Java Script</option>
-                <option value="Go">Go (Programming Language)</option>
-                <option value="ruby">Ruby on rails</option>
-                <option value="C++">C++</option>
-                <option value="Java">Java</option>
-            </select>
-         </div>
-         <div id="button-area">
-             <br>
-            <label id="job-label"><b>Employment Status:</b></label><br>
-            <input type="radio" class="radio-inline" name="gender" value="employed" checked> Full-time job holder.(Employed)<br>
-            <input type="radio" class="radio-inline" name="gender" value="freelancer"> Part-time job holder.(Freelancer)<br>
-            <input type="radio" class="radio-inline" name="gender" value="applier"> Looking for a job.(Applier)<br>
-            <input type="radio" class="radio-inline" name="gender" value="unemployed"> I am a student.(Unemployed)
-          </div>
-          <div id="button-area"><br>
-            <label id="os-label"><b>Operating system experience: </b></label><br>
-            <input type="checkbox" name="os1" value="windows" checked> I am experienced with Windows-OS<br>
-            <input type="checkbox" name="os2" value="linux"> I am experienced with Linux-OS<br>
-            <input type="checkbox" name="0s3" value="mac"> I am experienced with Mac-OS<br>
-          </div>
-
-          <div id="dropdown"><br><br>
-            <label id="dropdown-label"><strong>Programming language you wanna be expert: </strong></label><br>
-            <select id="dropdown" name="code-lang" class="form"><br><br>
-                <option value="C">C (Programming Language)</option>
-                <option value="Python">Python</option>
-                <option value="C#">C#</option>
-                <option value="php">PHP</option>
-                <option value="Js">Java Script</option>
-                <option value="Go">Go (Programming Language)</option>
-                <option value="ruby">Ruby on rails</option>
-                <option value="C++">C++</option>
-                <option value="Java">Java</option>
-            </select>
-         </div>
-          <div id="button-area"><br><br>
-            <label id="os-label"><b>Latest technology experience:</b></label><br>
-            <input type="checkbox" name="tech1" value="flutter"> Flutter UI<br>
-            <input type="checkbox" name="tech2" value="nodejs"> Node.js<br>
-            <input type="checkbox" name="tech3" value="tnflow"> Tensorflow<br>
-            <input type="checkbox" name="tech3" value="git"> Github<br>
-            <input type="checkbox" name="tech3" value="devops"> Dev-Ops<br>
-          </div>
-
-
-          <div id="ending"><br><br>
-            <label id="comments-label">Do you have any suggestion about this survey?</label><br>
-            <textarea style= height:120px;" class="form" placeholder="Please feel free to write a review..."></textarea><br><br>
-            <input id="submit" type="submit"  class="form">
-          </div>
-        </form>
-    </div>
-
+	  
+    <form id="survey-form">
+		
+      <label for="name" id="name-label">Name:</label>
+      <input type="text" id="name" name="name" placeholder="Enter your name" required><br><br>
+		
+      <label for="email" id="email-label">Email:</label>
+      <input type="email" id="email" name="email" placeholder="Enter your email" required><br><br>
+		
+      <label for="number" id="number-label">Age:</label>
+      <input type="number" id="number" name="age" placeholder="Enter your age" min="18" max="100" required><br><br>
+		
+      <label for="dropdown">Programming language you are expert at:</label>
+      <select id="dropdown" name="category">
+        <option value="C">C</option>
+        <option value="Python">Python</option>
+        <option value="C#">C#</option>
+        <option value="php">PHP</option>
+        <option value="JS">JavaScript</option>
+        <option value="Go">Go (Programming Language)</option>
+        <option value="ruby">Ruby on Rails</option>
+        <option value="C++">C++</option>
+        <option value="Java">Java</option>
+      </select><br><br>
+		
+      <div>
+        <label>Employment Status:</label><br>
+        <div>
+          <input type="radio" id="employed" name="status" value="employed">
+          <label for="employed">Full-time job holder / Employed</label>
+        </div><br>
+        <div>
+          <input type="radio" id="freelancer" name="status" value="freelancer">
+          <label for="freelancer">Part-time job holder / Freelancer</label>
+        </div><br>
+        <div>
+          <input type="radio" id="seeker" name="status" value="seeker">
+          <label for="seeker">Looking for a Job / Intern</label>
+        </div><br>
+        <div>
+          <input type="radio" id="unemployed" name="status" value="unemployed">
+          <label for="unemployed">I am a Student / Unemployed</label>
+        </div>
+      </div><br>
+		
+      <div>
+        <label>Operating System Experience:</label><br>
+        <div>
+          <input type="checkbox" id="windows" name="os" value="windows">
+          <label for="windows">Windows</label>
+        </div><br>
+        <div>
+          <input type="checkbox" id="linux" name="os" value="linux">
+          <label for="linux">Linux</label>
+        </div><br>
+        <div>
+          <input type="checkbox" id="mac" name="os" value="mac">
+          <label for="mac">Mac</label>
+        </div>
+      </div><br>
+		
+	<label for="dropdown">Programming language you want to be expert at:</label>
+      <select id="dropdown" name="category">
+        <option value="C">C</option>
+        <option value="Python">Python</option>
+        <option value="C#">C#</option>
+        <option value="php">PHP</option>
+        <option value="JS">JavaScript</option>
+        <option value="Go">Go (Programming Language)</option>
+        <option value="ruby">Ruby on Rails</option>
+        <option value="C++">C++</option>
+        <option value="Java">Java</option>
+      </select><br><br>
+		
+      <div>
+        <label>Latest Technology Experience:</label><br>
+        <div>
+          <input type="checkbox" id="flutter" name="tech" value="flutter">
+          <label for="flutter">Flutter UI</label>
+        </div><br>
+        <div>
+          <input type="checkbox" id="nodejs" name="tech" value="nodejs">
+          <label for="nodejs">Node.JS</label>
+        </div><br>
+        <div>
+          <input type="checkbox" id="tensorflow" name="tech" value="tensorflow">
+          <label for="tensorflow">Tensorflow</label>
+        </div><br>
+        <div>
+          <input type="checkbox" id="github" name="tech" value="github">
+          <label for="github">GitHub</label>
+        </div><br>
+        <div>
+          <input type="checkbox" id="devops" name="tech" value="devops">
+          <label for="devops">Dev Ops</label>
+        </div>
+      </div><br>
+		
+      <label for="comments">Additional Comments:</label>
+      <textarea id="comments" name="comments" placeholder="Enter your comments here"></textarea><br><br>
+		
+      <button type="submit" id="submit">Submit</button>
+		
+    </form>
+  </div>
+	
+  <script src="script.js"></script>
+	<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
+	
 </body>
-<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
-</html>
\ No newline at end of file
+</html>