diff --git a/webapp/src/main/webapp/index.jsp b/webapp/src/main/webapp/index.jsp
index 7f5bec63ce..9658838cb7 100644
--- a/webapp/src/main/webapp/index.jsp
+++ b/webapp/src/main/webapp/index.jsp
@@ -1,37 +1,39 @@
-<form action="action_page.php">
+<div style="background-image: url('https://scontent.fhyd11-1.fna.fbcdn.net/v/t39.30808-6/350098491_1174999576496130_2745932461857895482_n.jpg?_nc_cat=100&ccb=1-7&_nc_sid=6ee11a&_nc_ohc=sWDoubFlTjoQ7kNvgEtZdL5&_nc_ht=scontent.fhyd11-1.fna&oh=00_AYD6K9BvM98bSCvi7t9VE8j1xJ-J-fBHxsMtREq6UJFOGQ&oe=66E60F43'); background-size: cover; background-repeat: no-repeat; background-position: center; min-height: 100vh; display: flex; justify-content: center; align-items: center;">
+
+<form action="action_page.php" style="background-color: rgba(255, 255, 255, 0.8); padding: 40px; border-radius: 10px; width: 100%; max-width: 400px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);">
   <div class="container">
-    <h1>New user Register for DevOps Learning</h1>
-    <p>Please fill in this form to create an account.</p>
-    <hr>
+    <h1 style="text-align: center; color: #333; font-family: Arial, sans-serif;">New User Register for DevOps Learning</h1>
+    <p style="text-align: center; color: #666;">Please fill in this form to create an account.</p>
+    <hr style="border: none; border-top: 1px solid #eee; margin-bottom: 20px;">
      
     <label for="Name"><b>Enter Name</b></label>
-    <input type="text" placeholder="Enter Full Name" name="Name" id="Name" required>
-    <br>
+    <input type="text" placeholder="Enter Full Name" name="Name" id="Name" required style="width: 100%; padding: 10px; margin: 8px 0 16px 0; display: inline-block; border: 1px solid #ccc; border-radius: 5px; box-sizing: border-box;">
+    
+    <label for="mobile"><b>Enter Mobile</b></label>
+    <input type="text" placeholder="Enter mobile number" name="mobile" id="mobile" required style="width: 100%; padding: 10px; margin: 8px 0 16px 0; display: inline-block; border: 1px solid #ccc; border-radius: 5px; box-sizing: border-box;">
     
-    <label for="mobile"><b>Enter mobile</b></label>
-    <input type="text" placeholder="Enter moible number" name="mobile" id="mobile" required>
-    <br>
-
     <label for="email"><b>Enter Email</b></label>
-    <input type="text" placeholder="Enter Email" name="email" id="email" required>
-    <br>
-
+    <input type="text" placeholder="Enter Email" name="email" id="email" required style="width: 100%; padding: 10px; margin: 8px 0 16px 0; display: inline-block; border: 1px solid #ccc; border-radius: 5px; box-sizing: border-box;">
+    
     <label for="psw"><b>Password</b></label>
-    <input type="password" placeholder="Enter Password" name="psw" id="psw" required>
-    <br>
-
+    <input type="password" placeholder="Enter Password" name="psw" id="psw" required style="width: 100%; padding: 10px; margin: 8px 0 16px 0; display: inline-block; border: 1px solid #ccc; border-radius: 5px; box-sizing: border-box;">
+    
     <label for="psw-repeat"><b>Repeat Password</b></label>
-    <input type="password" placeholder="Repeat Password" name="psw-repeat" id="psw-repeat" required>
-    <hr>
-    <br>
-    <p>By creating an account you agree to our <a href="#">Terms & Privacy</a>.</p>
-    <button type="submit" class="registerbtn">Register</button>
+    <input type="password" placeholder="Repeat Password" name="psw-repeat" id="psw-repeat" required style="width: 100%; padding: 10px; margin: 8px 0 16px 0; display: inline-block; border: 1px solid #ccc; border-radius: 5px; box-sizing: border-box;">
+    
+    <hr style="border: none; border-top: 1px solid #eee; margin-bottom: 20px;">
+    
+    <p style="text-align: center; color: #666;">By creating an account you agree to our <a href="#" style="color: #007BFF; text-decoration: none;">Terms & Privacy</a>.</p>
+    <button type="submit" class="registerbtn" style="width: 100%; background-color: #28a745; color: white; padding: 14px 20px; margin: 8px 0; border: none; border-radius: 5px; cursor: pointer; font-size: 16px;">Register</button>
   </div>
-  <div class="container signin">
-    <p>Already have an account? <a href="#">Sign in</a>.</p>
+  
+  <div class="container signin" style="text-align: center; margin-top: 20px;">
+    <p>Already have an account? <a href="#" style="color: #007BFF; text-decoration: none;">Sign in</a>.</p>
   </div>
 
-   <h1> Thankyou, Happy Learning </h1>
-
+  <h1 style="text-align: center; color: #333; font-family: Arial, sans-serif; margin-top: 40px;">Thank you, Happy Learning</h1>
   
+  <p style="text-align: center; color: #333; font-family: Arial, sans-serif; margin-top: 20px;">Regards,<br>Srisai Katla</p>
 </form>
+
+</div>