diff --git a/templates/index.html b/templates/index.html
index 10d354a..f96e516 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,55 +1,158 @@
+<!-- GOURAV SAHA = UI UPDATE TASK 1 -->
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>VOCALSHIFT</title>
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
     <style>
+        
         body {
-            background-color: #f8f9fa;
+            font-family: 'Montserrat', sans-serif;
+            background: linear-gradient(135deg, #6f42c1, #e83e8c);
+            color: #333;
+            margin: 0;
+            padding: 0;
         }
+        
         .container {
-            max-width: 600px;
-            margin-top: 50px;
-            padding: 20px;
-            background-color: #ffffff;
+            max-width: 700px;
+            margin-top: 100px;
+            padding: 40px;
+            background-color: rgba(255, 255, 255, 0.9);
+            border-radius: 12px;
+            box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
+            transition: transform 0.3s ease;
+        }
+        
+        .container:hover {
+            transform: translateY(-10px);
+        }
+
+        
+        h1 {
+            text-align: center;
+            font-size: 2.5rem;
+            margin-bottom: 30px;
+            color: #6f42c1; 
+            font-weight: 600;
+        }
+
+        
+        .form-group label {
+            font-size: 1.1rem;
+            font-weight: 600;
+            color: #555;
+        }
+
+        
+        .form-control, .form-control-file {
             border-radius: 8px;
-            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+            border: 1px solid #ddd;
+            padding: 12px;
+            font-size: 1rem;
+            transition: border-color 0.3s ease;
+        }
+
+        
+        .form-control:focus, .form-control-file:focus {
+            border-color: #6f42c1; 
+            box-shadow: 0 0 10px rgba(111, 66, 193, 0.5);
+        }
+
+        
+        .btn-primary {
+            background-color: #6f42c1; 
+            border-color: #6f42c1;
+            font-weight: 600;
+            padding: 15px;
+            font-size: 1.1rem;
+            border-radius: 8px;
+            transition: background-color 0.3s ease;
+        }
+
+        
+        .btn-primary:hover {
+            background-color: #5a2d9f;
+            border-color: #5a2d9f;
         }
+
+        
         .progress {
             display: none;
             margin-top: 20px;
         }
+
+        
+        .progress-bar {
+            background-color: #e83e8c;
+        }
+
+        
+        .alert {
+            border-radius: 8px;
+            font-size: 1rem;
+            margin-top: 20px;
+            padding: 15px;
+        }
+        
+        .alert-success {
+            background-color: #28a745;
+            color: white;
+        }
+
+        
+        .alert-danger {
+            background-color: #dc3545;
+            color: white;
+        }
+        
+        .alert-warning {
+            background-color: #ffc107;
+            color: white;
+        }
+
+        
     </style>
 </head>
 <body>
     <div class="container">
-        <h1 class="mt-3 mb-4 text-center">VOCALSHIFT</h1>
+        <h1 class="mt-3 mb-4">VOCALSHIFT</h1>
         <form method="post" enctype="multipart/form-data" id="tts-form">
             <div class="form-group">
                 <label for="text">Text</label>
-                <textarea class="form-control" id="text" name="text" rows="3"></textarea>
+                <textarea class="form-control" id="text" name="text" rows="3" placeholder="Enter text to convert"></textarea>
             </div>
             <div class="form-group">
                 <label for="language">Language</label>
-                <input type="text" class="form-control" id="language" name="language" value="en">
+                <input type="text" class="form-control" id="language" name="language" value="en" placeholder="Enter language code (e.g., en)">
             </div>
+
+            
             <div class="form-group">
                 <label for="speaker">Speaker Voice Sample (optional)</label>
                 <input type="file" class="form-control-file" id="speaker" name="speaker">
             </div>
+
+            
             <div class="form-group">
                 <label for="audio">Upload Audio for Transformation (optional)</label>
                 <input type="file" class="form-control-file" id="audio" name="audio">
             </div>
+
+            
             <button type="submit" class="btn btn-primary btn-block">Convert</button>
         </form>
+        
         <div class="progress">
             <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 100%"></div>
         </div>
+        
         {% with messages = get_flashed_messages(with_categories=true) %}
             {% if messages %}
+        
                 <div class="mt-3">
                     {% for category, message in messages %}
                         <div class="alert alert-{{ category }}">{{ message }}</div>
@@ -58,6 +161,7 @@ <h1 class="mt-3 mb-4 text-center">VOCALSHIFT</h1>
             {% endif %}
         {% endwith %}
     </div>
+
     <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
     <script>
         $(document).ready(function() {
@@ -67,4 +171,4 @@ <h1 class="mt-3 mb-4 text-center">VOCALSHIFT</h1>
         });
     </script>
 </body>
-</html>
\ No newline at end of file
+</html>
