diff --git a/VERSION b/VERSION
index 7dff5b8..f477849 100644
--- a/VERSION
+++ b/VERSION
@@ -1 +1 @@
-0.2.1
\ No newline at end of file
+0.2.2
\ No newline at end of file
diff --git a/public/index.html b/public/index.html
index 3c097e3..55faab2 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,153 +1,161 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>SMS OTP Gateway</title>
-  <style>
-    * {
-      margin: 0;
-      padding: 0;
-      box-sizing: border-box;
-    }
-    body {
-      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-      background: #0a1628;
-      color: #e0e6ed;
-      min-height: 100vh;
-      padding: 20px;
-    }
-    .container {
-      max-width: 900px;
-      margin: 0 auto;
-    }
-    h1 {
-      color: #4a9eff;
-      margin-bottom: 20px;
-      font-weight: 300;
-      border-bottom: 1px solid #1e3a5f;
-      padding-bottom: 10px;
-    }
-    .controls {
-      margin-bottom: 20px;
-      display: flex;
-      gap: 10px;
-    }
-    button {
-      background: #1e3a5f;
-      color: #4a9eff;
-      border: 1px solid #2d4a6f;
-      padding: 10px 20px;
-      cursor: pointer;
-      font-size: 14px;
-      transition: all 0.2s;
-    }
-    button:hover {
-      background: #2d4a6f;
-      border-color: #4a9eff;
-    }
-    button.danger {
-      color: #ff6b6b;
-      border-color: #5f1e1e;
-    }
-    button.danger:hover {
-      background: #3f1e1e;
-      border-color: #ff6b6b;
-    }
-    .messages {
-      background: #0d1f35;
-      border: 1px solid #1e3a5f;
-      padding: 15px;
-      min-height: 400px;
-      max-height: 600px;
-      overflow-y: auto;
-    }
-    .message {
-      padding: 10px;
-      border-bottom: 1px solid #1e3a5f;
-      font-family: monospace;
-      font-size: 13px;
-    }
-    .message:last-child {
-      border-bottom: none;
-    }
-    .message .time {
-      color: #6b8aaa;
-    }
-    .message .phone {
-      color: #4a9eff;
-    }
-    .message .text {
-      color: #7dcea0;
-    }
-    .empty {
-      color: #4a6a8a;
-      text-align: center;
-      padding: 40px;
-    }
-    .status {
-      margin-top: 10px;
-      padding: 10px;
-      font-size: 12px;
-      color: #6b8aaa;
-    }
-  </style>
-</head>
-<body>
-  <div class="container">
-    <h1>SMS OTP Gateway</h1>
-    <div class="controls">
-      <button onclick="loadMessages()">Refresh</button>
-      <button class="danger" onclick="clearMessages()">Clear All</button>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>SMS OTP Gateway</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+        background: #0a1628;
+        color: #e0e6ed;
+        min-height: 100vh;
+        padding: 20px;
+      }
+      .container {
+        max-width: 900px;
+        margin: 0 auto;
+      }
+      h1 {
+        color: #4a9eff;
+        margin-bottom: 20px;
+        font-weight: 300;
+        border-bottom: 1px solid #1e3a5f;
+        padding-bottom: 10px;
+      }
+      .controls {
+        margin-bottom: 20px;
+        display: flex;
+        gap: 10px;
+      }
+      button {
+        background: #1e3a5f;
+        color: #4a9eff;
+        border: 1px solid #2d4a6f;
+        padding: 10px 20px;
+        cursor: pointer;
+        font-size: 14px;
+        transition: all 0.2s;
+      }
+      button:hover {
+        background: #2d4a6f;
+        border-color: #4a9eff;
+      }
+      button.danger {
+        color: #ff6b6b;
+        border-color: #5f1e1e;
+      }
+      button.danger:hover {
+        background: #3f1e1e;
+        border-color: #ff6b6b;
+      }
+      .messages {
+        background: #0d1f35;
+        border: 1px solid #1e3a5f;
+        padding: 15px;
+        min-height: 400px;
+        max-height: 600px;
+        overflow-y: auto;
+      }
+      .message {
+        padding: 10px;
+        border-bottom: 1px solid #1e3a5f;
+        font-family: monospace;
+        font-size: 13px;
+      }
+      .message:last-child {
+        border-bottom: none;
+      }
+      .message .time {
+        color: #6b8aaa;
+      }
+      .message .phone {
+        color: #4a9eff;
+      }
+      .message .text {
+        color: #7dcea0;
+      }
+      .empty {
+        color: #4a6a8a;
+        text-align: center;
+        padding: 40px;
+      }
+      .status {
+        margin-top: 10px;
+        padding: 10px;
+        font-size: 12px;
+        color: #6b8aaa;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <h1>SMS OTP Gateway</h1>
+      <div class="controls">
+        <button onclick="loadMessages()">Refresh</button>
+        <button class="danger" onclick="clearMessages()">Clear All</button>
+      </div>
+      <div class="messages" id="messages">
+        <div class="empty">Loading...</div>
+      </div>
+      <div class="status" id="status"></div>
     </div>
-    <div class="messages" id="messages">
-      <div class="empty">Loading...</div>
-    </div>
-    <div class="status" id="status"></div>
-  </div>
 
-  <script>
-    async function loadMessages() {
-      try {
-        const res = await fetch('/view-all-sms');
-        const data = await res.json();
-        const container = document.getElementById('messages');
+    <script>
+      // Get base path from current URL
+      const basePath = window.location.pathname.replace(/\/$/, "");
 
-        if (data.messages.length === 0) {
-          container.innerHTML = '<div class="empty">No messages yet</div>';
-        } else {
-          container.innerHTML = data.messages.map(m => `
+      async function loadMessages() {
+        try {
+          const res = await fetch(basePath + "/view-all-sms");
+          const data = await res.json();
+          const container = document.getElementById("messages");
+
+          if (data.messages.length === 0) {
+            container.innerHTML = '<div class="empty">No messages yet</div>';
+          } else {
+            container.innerHTML = data.messages
+              .map(
+                (m) => `
             <div class="message">
               <span class="time">[${m.timestamp}]</span>
               <span class="phone">${m.phone}</span>:
               <span class="text">${escapeHtml(m.message)}</span>
             </div>
-          `).join('');
+          `,
+              )
+              .join("");
+          }
+
+          document.getElementById("status").textContent =
+            `Last updated: ${new Date().toLocaleTimeString()} | Total: ${data.messages.length} messages`;
+        } catch (err) {
+          document.getElementById("messages").innerHTML = '<div class="empty">Error loading messages</div>';
         }
-
-        document.getElementById('status').textContent = `Last updated: ${new Date().toLocaleTimeString()} | Total: ${data.messages.length} messages`;
-      } catch (err) {
-        document.getElementById('messages').innerHTML = '<div class="empty">Error loading messages</div>';
       }
-    }
 
-    async function clearMessages() {
-      try {
-        await fetch('/clear-all-sms', { method: 'POST' });
-        loadMessages();
-      } catch (err) {
-        alert('Error clearing messages');
+      async function clearMessages() {
+        try {
+          await fetch(basePath + "/clear-all-sms", { method: "POST" });
+          loadMessages();
+        } catch (err) {
+          alert("Error clearing messages");
+        }
       }
-    }
 
-    function escapeHtml(text) {
-      const div = document.createElement('div');
-      div.textContent = text;
-      return div.innerHTML;
-    }
+      function escapeHtml(text) {
+        const div = document.createElement("div");
+        div.textContent = text;
+        return div.innerHTML;
+      }
 
-    loadMessages();
-    setInterval(loadMessages, 5000);
-  </script>
-</body>
+      loadMessages();
+      setInterval(loadMessages, 5000);
+    </script>
+  </body>
 </html>
