diff --git a/templates/index.html b/templates/index.html
index c6f057b..8d96ccf 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,9 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>LLAMA 3 Chat</title>
   <style>
     body {
       font-family: Arial, sans-serif;
@@ -22,7 +20,7 @@
       background-color: #f9f9f9;
       padding: 20px;
       max-width: 500px;
-      width: 90%; /* Adjusted width to maintain shape */
+      width: 90%;
       box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
       transition: background-color 0.3s ease, box-shadow 0.3s ease;
       animation: fadeIn 0.5s ease forwards;
@@ -183,17 +181,17 @@
     }
   </style>
 </head>
-<body onload="focusInput()">
+<body>
   <div class="chat-container">
     <h1>Chat with LLAMA 3 🦙🦙🦙</h1>
-    <div id="result" aria-live="polite" aria-atomic="true"></div>
+    <div id="result"></div>
     <div id="message-container">
-      <input type="text" id="message" placeholder="Type your message here" aria-label="Message input">
-      <button onclick="sendMessage()" aria-label="Send Message">Send Message</button>
+      <input type="text" id="message" placeholder="Type your message here" />
+      <button onclick="sendMessage()">Send Message</button>
     </div>
     <div id="mode-switch">
       <label id="dark-mode-label" for="dark-mode">Dark Mode</label>
-      <input type="range" min="0" max="1" value="0" class="slider" id="dark-mode" aria-label="Dark mode switch" onchange="toggleDarkMode()">
+      <input type="range" min="0" max="1" value="0" class="slider" id="dark-mode" onchange="toggleDarkMode()">
     </div>
     <footer>
       <p>© Made with ❤️ by <a href='https://github.com/AquibPy' target='_blank'>Mohd Aquib</a> </p>
@@ -202,47 +200,40 @@ <h1>Chat with LLAMA 3 🦙🦙🦙</h1>
   
   <script>
     async function sendMessage() {
-      const messageInput = document.getElementById("message");
-      const message = messageInput.value.trim();
+      var messageInput = document.getElementById("message");
+      var message = messageInput.value.trim();
   
       if (!message) {
         displayErrorMessage("Please enter a message.");
         return;
       }
   
-      try {
-        const response = await fetch('https://llm-pgc4.onrender.com/stream_chat', {
-          method: 'POST',
-          headers: {
-            'Content-Type': 'application/x-www-form-urlencoded'
-          },
-          body: 'message=' + encodeURIComponent(message)
-        });
-
-        if (!response.ok) {
-          throw new Error('Network response was not ok');
+      var response = await fetch('https://llm-pgc4.onrender.com/stream_chat', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/x-www-form-urlencoded'
+        },
+        body: 'message=' + encodeURIComponent(message)
+      });
+      var reader = response.body.getReader();
+      var decoder = new TextDecoder('utf-8');
+      reader.read().then(function processResult(result) {
+        if (result.done) return;
+        let token = decoder.decode(result.value);
+        if (token.endsWith('.') || token.endsWith('!') || token.endsWith('?')) {
+          document.getElementById("result").innerHTML += token + "<br>";
+        } else {
+          document.getElementById("result").innerHTML += token + ' ';
         }
-        
-        const reader = response.body.getReader();
-        const decoder = new TextDecoder('utf-8');
-        reader.read().then(function processResult(result) {
-          if (result.done) return;
-          let token = decoder.decode(result.value);
-          document.getElementById("result").innerHTML += token.trim() + "<br>";
-          return reader.read().then(processResult);
-        });
-        messageInput.value = '';
-        messageInput.focus();
-      } catch (error) {
-        console.error('Error:', error);
-        displayErrorMessage("Error sending message. Please try again later.");
-      }
+        return reader.read().then(processResult);
+      });
+      messageInput.value = '';
     }
 
     function toggleDarkMode() {
-      const body = document.body;
-      const chatContainer = document.querySelector(".chat-container");
-      const darkModeSlider = document.getElementById("dark-mode");
+      var body = document.body;
+      var chatContainer = document.querySelector(".chat-container");
+      var darkModeSlider = document.getElementById("dark-mode");
 
       if (darkModeSlider.value === "1") {
         body.classList.add("dark-mode");
@@ -252,11 +243,6 @@ <h1>Chat with LLAMA 3 🦙🦙🦙</h1>
         chatContainer.classList.remove("dark-mode");
       }
     }
-
-    function focusInput() {
-      document.getElementById("message").focus();
-    }
-
     function displayErrorMessage(message) {
       const errorDiv = document.createElement('div');
       errorDiv.classList.add('error-message');
@@ -268,4 +254,4 @@ <h1>Chat with LLAMA 3 🦙🦙🦙</h1>
     }
   </script>
 </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/try.html b/try.html
new file mode 100644
index 0000000..8d96ccf
--- /dev/null
+++ b/try.html
@@ -0,0 +1,257 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <style>
+    body {
+      font-family: Arial, sans-serif;
+      margin: 0;
+      padding: 0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      min-height: 100vh;
+      background-color: #f2f2f2;
+      transition: background-color 0.3s ease;
+    }
+
+    .chat-container {
+      border-radius: 15px;
+      background-color: #f9f9f9;
+      padding: 20px;
+      max-width: 500px;
+      width: 90%;
+      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+      transition: background-color 0.3s ease, box-shadow 0.3s ease;
+      animation: fadeIn 0.5s ease forwards;
+    }
+
+    @keyframes fadeIn {
+      from {
+        opacity: 0;
+        transform: translateY(-20px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+
+    #result {
+      height: 300px;
+      overflow-y: auto;
+      border-radius: 10px;
+      border: 1px solid #ccc;
+      padding: 10px;
+      margin-bottom: 20px;
+    }
+
+    #message-container {
+      display: flex;
+      flex-wrap: wrap;
+    }
+
+    #message {
+      width: 65%;
+      padding: 10px;
+      border-radius: 10px;
+      border: 1px solid #ccc;
+      margin-right: 10px;
+    }
+
+    button {
+      padding: 10px 20px;
+      border: none;
+      border-radius: 15px;
+      background-color: #007bff;
+      color: white;
+      transition: background-color 0.3s ease, box-shadow 0.3s ease;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    }
+
+    button:hover {
+      background-color: #0056b3;
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    }
+
+    #mode-switch {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    #dark-mode-label {
+      margin-right: 5px;
+    }
+
+    /* Effect for heading */
+    h1 {
+      font-size: 32px;
+      text-align: center;
+      position: relative;
+      overflow: hidden;
+      color: #007bff;
+      animation: neon 1.5s infinite alternate;
+    }
+
+    @keyframes neon {
+      from {
+        text-shadow: 0 0 5px #007bff, 0 0 10px #007bff, 0 0 20px #007bff, 0 0 30px #007bff, 0 0 40px #007bff, 0 0 55px #007bff, 0 0 75px #007bff;
+      }
+      to {
+        text-shadow: 0 0 10px #007bff, 0 0 20px #007bff, 0 0 30px #007bff, 0 0 40px #007bff, 0 0 55px #007bff, 0 0 75px #007bff, 0 0 100px #007bff;
+      }
+    }
+
+    footer {
+      margin-top: 20px;
+      text-align: center;
+    }
+
+    footer p {
+      font-size: 14px;
+      color: #888;
+    }
+
+    footer a {
+      color: #007bff;
+      text-decoration: none;
+    }
+
+    footer a:hover {
+      text-decoration: underline;
+    }
+
+    @media (max-width: 480px) {
+      #message {
+        width: 100%;
+        margin-right: 0;
+        margin-bottom: 10px;
+      }
+    }
+
+    /* Dark mode styles */
+    body.dark-mode {
+      background-color: #333;
+      color: #fff;
+    }
+
+    body.dark-mode .chat-container {
+      background-color: #444;
+    }
+
+    body.dark-mode input[type="text"],
+    body.dark-mode button {
+      background-color: #555;
+      color: #fff;
+    }
+
+    body.dark-mode #result {
+      border-color: #666;
+    }
+
+    /* Slider styles */
+    .slider {
+      -webkit-appearance: none;
+      width: 60px;
+      height: 34px;
+      background: #ccc;
+      outline: none;
+      opacity: 0.7;
+      transition: opacity 0.2s;
+      border-radius: 34px;
+    }
+
+    .slider::-webkit-slider-thumb {
+      -webkit-appearance: none;
+      appearance: none;
+      width: 26px;
+      height: 26px;
+      background: #4caf50;
+      cursor: pointer;
+      border-radius: 50%;
+    }
+
+    .slider::-moz-range-thumb {
+      width: 26px;
+      height: 26px;
+      background: #4caf50;
+      cursor: pointer;
+      border-radius: 50%;
+    }
+  </style>
+</head>
+<body>
+  <div class="chat-container">
+    <h1>Chat with LLAMA 3 🦙🦙🦙</h1>
+    <div id="result"></div>
+    <div id="message-container">
+      <input type="text" id="message" placeholder="Type your message here" />
+      <button onclick="sendMessage()">Send Message</button>
+    </div>
+    <div id="mode-switch">
+      <label id="dark-mode-label" for="dark-mode">Dark Mode</label>
+      <input type="range" min="0" max="1" value="0" class="slider" id="dark-mode" onchange="toggleDarkMode()">
+    </div>
+    <footer>
+      <p>© Made with ❤️ by <a href='https://github.com/AquibPy' target='_blank'>Mohd Aquib</a> </p>
+    </footer>
+  </div>
+  
+  <script>
+    async function sendMessage() {
+      var messageInput = document.getElementById("message");
+      var message = messageInput.value.trim();
+  
+      if (!message) {
+        displayErrorMessage("Please enter a message.");
+        return;
+      }
+  
+      var response = await fetch('https://llm-pgc4.onrender.com/stream_chat', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/x-www-form-urlencoded'
+        },
+        body: 'message=' + encodeURIComponent(message)
+      });
+      var reader = response.body.getReader();
+      var decoder = new TextDecoder('utf-8');
+      reader.read().then(function processResult(result) {
+        if (result.done) return;
+        let token = decoder.decode(result.value);
+        if (token.endsWith('.') || token.endsWith('!') || token.endsWith('?')) {
+          document.getElementById("result").innerHTML += token + "<br>";
+        } else {
+          document.getElementById("result").innerHTML += token + ' ';
+        }
+        return reader.read().then(processResult);
+      });
+      messageInput.value = '';
+    }
+
+    function toggleDarkMode() {
+      var body = document.body;
+      var chatContainer = document.querySelector(".chat-container");
+      var darkModeSlider = document.getElementById("dark-mode");
+
+      if (darkModeSlider.value === "1") {
+        body.classList.add("dark-mode");
+        chatContainer.classList.add("dark-mode");
+      } else {
+        body.classList.remove("dark-mode");
+        chatContainer.classList.remove("dark-mode");
+      }
+    }
+    function displayErrorMessage(message) {
+      const errorDiv = document.createElement('div');
+      errorDiv.classList.add('error-message');
+      errorDiv.textContent = message;
+      document.getElementById("result").appendChild(errorDiv);
+      setTimeout(() => {
+        errorDiv.remove();
+      }, 3000);
+    }
+  </script>
+</body>
+</html>
\ No newline at end of file
