diff --git a/index.html b/index.html
new file mode 100644
index 0000000..9dfdf77
--- /dev/null
+++ b/index.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Register</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+    <div class="form-Container">
+        <div class="step1" id="page1">
+            <form action="script.js" id="personal-datail">
+                <h2>Personal-Details</h2>
+                <fieldset>
+                    <legend>Personal-Details</legend>
+                    <input type="text" id="fullname" pattern="[A-Za-z\s]{3,}" minlength="3" placeholder="Enter your name" required>
+                    <input type="email" placeholder="Enter your email" required>
+                    <input type="tel" placeholder="Enter mobile number" id="phone-number" pattern="[0-9]{10}" maxlength="10" required>
+                    <p id="gender-id">Select your gender:
+                        <label for="male"><input type="radio" name="gender" value="male" id="male" required>Male</label>
+                        <label for="female"><input type="radio" name="gender" value="female" id="female" required>Female</label>
+                        <label for="other"><input type="radio" name="gender" value="other" id="other" required>Other</label>
+                    </p>
+                    <p>Enter your age: 
+                        <input type="tel" id="input-age" min="18" max="100" maxlength="2" required style="width: 80px;"></p>
+                </fieldset>
+            </form>
+        </div>
+        <div class="step2" id="page2">
+            <h2>Professional Details</h2>
+            <p>Education</p>
+            <select name="text" id="education-type" required>
+                <option value="Default">Default</option>
+                <option value="Master's">PG or Above</option>
+                <option value="UG">UG</option>
+                <option value="Higher Secondary"> 12 </option>
+                <option value="High School">10</option>
+                <option value="Below">Below 10</option>
+            </select>
+            
+            <div class="skills">
+                <p>Select your skills</p>
+                <label for="html & css"> <input type="checkbox" id="html & css">HTML ans CSS</label>
+                <label for="js"> <input type="checkbox" id="js">Java Script</label>
+                <label for="React"> <input type="checkbox" id="React">React</label>
+                <label for="dbms"> <input type="checkbox" id="dbms">DBMS</label>
+                <label for="java"> <input type="checkbox" id="java">JAVA</label>
+            </div>
+            <p>Experience</p>
+            <input type="tel" min="0" max="50" maxlength="2" required placeholder="0-50 years">
+            <p>Current - Role</p>
+            <input type="text" placeholder="Current-Role" required>
+        </div>
+        <div class="Review-Submit">
+
+        </div>
+        <div id="btn-div">
+            <button id="prv-btn" >Previous</button>
+            <button id="nxt-btn">Next</button>
+            <button id="review-submit">Review-Submit</button>
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..c2a0ed3
--- /dev/null
+++ b/script.js
@@ -0,0 +1,20 @@
+document.getElementById("nxt-btn").addEventListener('click' ,function(){
+    if(document.getElementById('personal-datail').checkValidity())
+        {
+            document.getElementById('page1').classList.remove('active');
+            document.getElementById('page2').classList.add('active');
+            document.getElementById('prv-btn').style.display = 'block';
+           
+        }
+        else{
+            document.getElementById('personal-detail').reportValidity();
+    }
+
+});
+
+document.getElementById('prv-btn').addEventListener('click',function()
+{
+    document.getElementById('page2').classList.remove('active');
+    document.getElementById('page1').classList.add('active');
+    document.getElementById('prv-btn').style.display = 'none';
+});
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..c1a7779
--- /dev/null
+++ b/style.css
@@ -0,0 +1,76 @@
+body{
+    margin: 0;padding: 0;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    gap: 10rem;
+    background-image: linear-gradient(#FAF6E3,#D8DBBD,#B59F78);
+    height: 100vh;
+    width: 100vw;
+}
+input{
+    border: 1px solid black;
+    border-radius: 8px;
+    padding: 6px;
+}
+input::placeholder{
+    font-size: 12px;
+    color: black;
+}
+.form-Container,
+.personal-detail,
+.step2{
+    margin: 0 auto;
+    width: 75vw;
+}
+    
+
+.form-Container legend{
+    font-size:16px;
+    font-weight: bold;
+}
+#gender-id{
+    font-weight: bold;
+}
+#gender-id label{
+    font-weight: normal;
+}
+
+#btn-div{
+    padding: 20px;
+    display: flex;
+    justify-content: space-evenly;
+}
+#btn-div button{
+    cursor: pointer;
+    border: none;
+    padding: 8px;
+    width: 5rem;
+    border-radius: 10px;
+    background-color: rgb(97, 97, 211);
+    color: white;
+    bottom: 0;
+
+    
+}
+#btn-div button:hover{
+    background-color: #fff;
+    color: rgb(17, 17, 17);
+    font-size: 16px;
+    
+}
+
+.step2
+{
+    display: none;
+
+}
+.step2.active
+{
+    display: inline;
+}
+#prv-btn,#review-submit
+{
+    display: none;
+}
\ No newline at end of file
