diff --git a/index.html b/index.html
index 89bdf35..654cdf8 100644
--- a/index.html
+++ b/index.html
@@ -8,16 +8,12 @@
     <script src="script.js" defer></script>
     <script src="https://cdn.tailwindcss.com"></script>
   </head>
-  <body class="h-screen bg-gray-500 flex justify-center items-center">
+  <body class="h-screen bg-gray-500 flex flex-col justify-center items-center">
+    <h1 class="text-4xl font-bold mb-6">Multi-Step Form Wizard</h1>
     <div class="px-12 py-10 bg-gray-100 w-[70vw]">
-      <form
-        action="index.php"
-        method="post"
-        id="personal-details-form"
-        class="flex justify-center"
-      >
+      <form action="" id="personal-details-form" class="flex justify-center">
         <section data-form="0" class="active none flex-col items-start">
-          <h3 class="text-xl font-bold">Step 1: Personal Details</h3>
+          <h3 class="text-2xl font-bold mb-4">Step 1: Personal Details</h3>
 
           <label for="full_name" class="text-lg">Full Name</label>
           <input
@@ -29,7 +25,7 @@
             pattern="^[A-Za-z]+(?: [A-Za-z]+)*$"
             class="rounded p-1"
           />
-          <label for="" class="text-lg">Email</label>
+          <label for="email" class="text-lg">Email</label>
           <input
             type="email"
             name="email"
@@ -37,15 +33,15 @@
             class="rounded p-1"
             required
           />
-          <label for="" class="text-lg">Phone</label>
+          <label for="phone" class="text-lg">Phone</label>
           <input
-            type="number"
+            type="tel"
             name="phone"
             id="phone"
             class="rounded p-1"
             minlength="10"
             maxlength="10"
-            pattern="^(\+\d{1,2}\s)?\(?\d{3}\)?[\s.-]\d{3}[\s.-]\d{4}$"
+            pattern="[0-9]{10}"
             required
           />
           <div>
@@ -55,17 +51,19 @@
               name="gender"
               value="male"
               class="rounded p-1"
+              id="male"
               required
             />
-            <label for="" class="text-lg">Male</label>
+            <label for="male" class="text-lg">Male</label>
             <input
               type="radio"
               name="gender"
               value="female"
               class="rounded p-1"
+              id="female"
               required
             />
-            <label for="" class="text-lg">Female</label>
+            <label for="female" class="text-lg">Female</label>
             <input
               type="radio"
               name="gender"
@@ -73,15 +71,16 @@
               class="rounded p-1"
               required
             />
-            <label for="" class="text-lg">Others</label>
+            <label for="others" class="text-lg">Others</label>
           </div>
-          <label for="" class="text-lg">Age</label>
+          <label for="age" class="text-lg">Age</label>
           <input
             type="number"
             name="age"
             id="age"
             class="rounded p-1"
-            pattern="^(1[89]|[2-9][0-9]|100)*$"
+            min="18"
+            max="100"
             required
           />
           <button
@@ -104,24 +103,26 @@
           <div>
             <label class="text-lg">Skills:</label>
             <div>
-              <input type="checkbox" name="mean" id="mean" />
+              <input type="checkbox" name="skills" id="mean" />
               <label for="mean">MEAN</label>
-              <input type="checkbox" name="mern" id="mern" />
+              <input type="checkbox" name="skills" id="mern" />
               <label for="mern">MERN</label>
-              <input type="checkbox" name="java" id="java" />
+              <input type="checkbox" name="skills" id="java" />
               <label for="java">Java</label>
-              <input type="checkbox" name="flutter" id="flutter" />
+              <input type="checkbox" name="skills" id="flutter" />
               <label for="flutter">Flutter</label>
-              <input type="checkbox" name="dotnet" id="dotnet" />
+              <input type="checkbox" name="skills" id="dotnet" />
               <label for="dotnet">.Net</label>
             </div>
           </div>
-          <label class="text-lg" for="experience">Experience</label>
+          <label class="text-lg" for="experience">Experience (in years)</label>
           <input
             class="rounded p-1"
             type="number"
             name="experience"
             id="experience"
+            min="0"
+            max="50"
             required
           />
           <label class="text-lg" for="current-role">Current Role</label>
@@ -130,6 +131,7 @@
             type="text"
             name="current-role"
             id="current-role"
+            pattern="^[A-Za-z]+(?: [A-Za-z]+)*$"
             required
           />
           <div>
@@ -149,7 +151,19 @@
             </button>
           </div>
         </section>
-        <section data-form="2">
+        <section data-form="2" class="none flex-col items-start">
+          <h3 class="text-xl font-bold">Step 3: Review & Submit</h3>
+          <div>
+            <p class="text-lg">Full Name: <span id="full-name-review"></span></p>
+            <p class="text-lg">Email: <span id="email-review"></span></p>
+            <p class="text-lg">Phone: <span id="phone-review"></span></p>
+            <p class="text-lg">Gender: <span id="gender-review"></span></p>
+            <p class="text-lg">Age: <span id="age-review"></span></p>
+            <p class="text-lg">Education: <span id="education-review"></span></p>
+            <p class="text-lg">Skills: <span id="skills-review"></span></p>
+            <p class="text-lg">Experience: <span id="experience-review"></span></p>
+            <p class="text-lg">Current Role: <span id="role-review"></span></p>
+          </div>
           <div>
             <button
               type="button"
diff --git a/script.js b/script.js
index 9caccba..b7480fe 100644
--- a/script.js
+++ b/script.js
@@ -1,36 +1,12 @@
-// const form = document.getElementById("personal-details-form"); // Main form element
-
-// const inputs = form.getElementsByTagName("input"); // All the input elements in the form
-
-// var currentForm = form.querySelectorAll("[data-form]") // Get the current form selected
-
-// var currentStep = parseInt(currentForm[0].getAttribute("data-form")); // Get the current step
-// console.log(currentForm[0].getAttribute("data-form"));
-
-// function incrementStep() {
-//     // Check if current form is filled
-//     console.log(currentForm);
-
-//     currentForm[currentStep].classList.remove("active");
-//     currentStep++;
-//     currentForm[currentStep].classList.add("active");
-//     console.log(currentForm[currentStep].getAttribute("data-form"));
-// }
-
-// function decrementStep() {
-//     currentForm[currentStep].classList.remove("active");
-//     currentStep--;
-//     currentForm[currentStep].classList.add("active");
-//     console.log(currentForm[currentStep].getAttribute("data-form"));
-// }
-
 const forms = document.querySelectorAll("[data-form]");
 var currentStep = 0;
 var currentForm = forms[currentStep];
 
-function incrementStep() {
-  // Check if current form is filled
+var data = {};
 
+function incrementStep() {
+
+  // Check if current form is filled
   let inputs = currentForm.getElementsByTagName("input");
   for (const input of inputs) {
     if (!input.checkValidity()) {
@@ -39,9 +15,51 @@ function incrementStep() {
     }
   }
 
+  try {
+    let skills = [];
+
+    data["fullName"] = document.getElementById("full_name").value;
+    document.getElementById("full-name-review").innerText = data["fullName"];
+
+    data["email"] = document.getElementById("email").value;
+    document.getElementById("email-review").innerText = data["email"];
+
+    data["phone"] = document.getElementById("phone").value;
+    document.getElementById("phone-review").innerText = data["phone"];
+
+    data["gender"] = document.querySelector(
+      'input[name="gender"]:checked'
+    ).value;
+    document.getElementById("gender-review").innerText = data["gender"];
+
+    data["age"] = document.getElementById("age").value;
+    document.getElementById("age-review").innerText = data["age"];
+
+    data["education"] = document.getElementById("education").value;
+    document.getElementById("education-review").innerText = data["education"];
+
+    data["skills"] = document.querySelectorAll('input[name="skills"]:checked');
+    // Iterating over the NodeList and extracting the id to store it in skills array
+    data["skills"].forEach((skill) => {
+      skills.push(skill.getAttribute("id"));
+    });
+    data["skills"] = skills;
+    // To clear previous innerText rendered
+    document.getElementById("skills-review").innerText = "";
+    document.getElementById("skills-review").innerText = data["skills"];
+
+    data["experience"] = document.getElementById("experience").value;
+    document.getElementById("experience-review").innerText = data["experience"];
+
+    data["currentRole"] = document.getElementById("current-role").value;
+    document.getElementById("role-review").innerText = data["currentRole"];
+  } catch (error) {
+    // Do nothing
+  }
+
   //  Changing the visiblity of the form
   currentForm.classList.remove("active");
-  currentStep++;
+  currentStep = Math.min(currentStep + 1, forms.length - 1);
   currentForm = forms[currentStep];
   currentForm.classList.add("active");
 }
@@ -50,7 +68,17 @@ function decrementStep() {
   //  Changing the visiblity of the form
 
   currentForm.classList.remove("active");
-  currentStep--;
+  currentStep = Math.max(currentStep - 1, 0);;
   currentForm = forms[currentStep];
   currentForm.classList.add("active");
 }
+document
+  .querySelector('button[type="submit"]')
+  .addEventListener("click", function (event) {
+    event.preventDefault();
+
+    window.localStorage.clear();
+    window.localStorage.setItem("formData", JSON.stringify(data));
+    window.alert("Form submitted successfully");
+    window.location.href = "/";
+  });
