diff --git a/templates/index.html b/templates/index.html
index abbe436..7d7e050 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -3,93 +3,106 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Translator</title>
+    <title>SMART-SPEAK Translator</title>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
-    <link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&display=swap" rel="stylesheet">
     <style>
         body {
-    font-family: 'Oswald', sans-serif;
-    background-color:  #f5f5f5;
-    color: #333;
-    margin: 0;
-    padding: 0;
-}
+            font-family: 'Oswald', sans-serif;
+            background-color: #f9f9f9;
+            color: #333;
+            margin: 0;
+            padding: 0;
+        }
 
-h1 {
-    font-weight: bold;
-    font-size: 2em;
-    text-align: center;
-    margin-top: 20px;
-    color: #a76cfd;
-}
+        .jumbotron {
+            background-color: #663399;
+            color: #fff;
+            border-radius: 15px;
+            padding: 30px;
+            margin-bottom: 30px;
+        }
 
-.form-group {
-    margin-bottom: 20px;
-}
+        h1 {
+            font-weight: bold;
+            font-size: 3em;
+            text-align: center;
+            margin-top: 20px;
+            color: #fff;
+        }
 
-.form-control {
-    border: 2px solid #a76cfd;
-    border-radius: 8px;
-    padding: 12px;
-    width: 100%;
-    box-sizing: border-box;
-    font-family: 'Oswald', sans-serif;
-    color: #333;
-    background-color: #fff;
-    transition: border-color 0.3s ease;
-}
+        p {
+            text-align: center;
+            font-size: 1.2em;
+            color: #eee;
+        }
 
-.form-control:focus {
-    border-color: #a76cfd;
-    outline: none;
-}
+        .form-group {
+            margin-bottom: 30px;
+        }
 
-.btn,
-.btn-success {
-    border: none;
-    border-radius: 8px;
-    font-weight: bold;
-    width: 100%;
-    margin: 10px 0;
-    padding: 12px;
-    font-family: 'Oswald', sans-serif;
-    cursor: pointer;
-    transition: background-color 0.3s ease;
-    background-color: #a76cfd;
-    color: #fff;
-}
+        .form-control {
+            border: 2px solid #663399;
+            border-radius: 8px;
+            padding: 15px;
+            width: 100%;
+            box-sizing: border-box;
+            font-family: 'Oswald', sans-serif;
+            color: #333;
+            background-color: #fff;
+            transition: border-color 0.3s ease;
+        }
 
-.btn:hover,
-.btn-success:hover {
-    background-color: #8e63c1;
-}
+        .form-control:focus {
+            border-color: #663399;
+            outline: none;
+        }
 
-table {
-    width: 100%;
-    border-collapse: collapse;
-    margin-top: 30px;
-}
+        .btn,
+        .btn-primary {
+            border: none;
+            border-radius: 8px;
+            font-weight: bold;
+            width: 100%;
+            margin: 10px 0;
+            padding: 15px;
+            font-family: 'Oswald', sans-serif;
+            cursor: pointer;
+            transition: background-color 0.3s ease;
+            background-color: #663399;
+            color: #fff;
+        }
 
-th,
-td {
-    border: 1px solid #ccc;
-    padding: 10px;
-    text-align: left;
-}
+        .btn:hover,
+        .btn-primary:hover {
+            background-color: #542b78;
+        }
 
-th {
-    background-color: #a76cfd;
-    color: #fff;
-}
+        table {
+            width: 100%;
+            border-collapse: collapse;
+            margin-top: 30px;
+        }
 
+        th,
+        td {
+            border: 1px solid #ccc;
+            padding: 20px;
+            text-align: left;
+        }
+
+        th {
+            background-color: #663399;
+            color: #fff;
+        }
     </style>
 </head>
 <body>
     <div class="container mt-4">
         <div class="jumbotron">
-            <h1>SMART-SPEAK</h1>
-            <p>"SMART-SPEAK" Imagine a personalized translation platform that offers various language services, making communication smooth and easy across different cultures and languages.</p>
-            
+            <h1>SMART-SPEAK Translator</h1>
+            <p>"SMART-SPEAK" - Imagine a personalized translation platform that offers various language services, making communication smooth and easy across different cultures and languages.</p>
+
             <div class="row">
                 <div class="col-md-6">
                     <form method="POST">
