diff --git a/static/index.html b/static/index.html
new file mode 100644
index 0000000..751f61f
--- /dev/null
+++ b/static/index.html
@@ -0,0 +1,245 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Web3 Login process with MetaMask</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script
+      src="https://cdn.jsdelivr.net/npm/ethers@5.6.4/dist/ethers.umd.min.js"
+      type="application/javascript"
+    ></script>
+    <script>
+      function web3_check_metamask() {
+        if (!window.ethereum) {
+          console.error(
+            "It seems that the MetaMask extension is not detected. Please install MetaMask first.",
+          );
+          alert(
+            "It seems that the MetaMask extension is not detected. Please install MetaMask first.",
+          );
+          return false;
+        } else {
+          alert("✅ MetaMask extension has been detected!");
+          return true;
+        }
+      }
+
+      async function web3_metamask_hash(pubKey) {
+        const z = await (
+          await fetch("http://127.0.0.1:8080/api/auth/challenge", {
+            body: `{  "pubKey": "${pubKey}"\n}`,
+            headers: {
+              Accept: "application/json",
+              "Content-Type": "application/json",
+            },
+            method: "POST",
+          })
+        ).json();
+        return z.message;
+      }
+
+      async function login_api(pubKey, sig) {
+        res = await (await fetch("http://127.0.0.1:8080/api/auth/authenticate", {
+          body: JSON.stringify({ pubKey: pubKey, signature: sig }),
+          headers: {
+            Accept: "application/json",
+            "Content-Type": "application/json",
+          },
+          method: "POST",
+        })).json();
+          updateStatus(JSON.stringify(res), "text-green-600");
+          response = await (await fetch("http://127.0.0.1:8080/api/hello", {
+          headers: {
+            Authorization: `Bearer ${res.authorizationToken}`,
+            Accept: "application/json",
+            "Content-Type": "application/json",
+          },
+          method: "GET",
+        })).json();
+          console.log(response);
+      }
+
+      async function web3_metamask_login() {
+        // Check first if the user has the MetaMask installed
+        if (web3_check_metamask()) {
+          console.log("Initate Login Process");
+          updateStatus("Initiating login process...", "text-blue-600");
+
+          // Get the Ethereum provider
+          const provider = new ethers.providers.Web3Provider(window.ethereum);
+          // Get Ethereum accounts
+          await provider.send("eth_requestAccounts", []);
+          console.log("Connected!!");
+          updateStatus("Connected to MetaMask!", "text-green-600");
+
+          // Get the User Ethereum address
+          const address = await provider.getSigner().getAddress();
+          console.log(address);
+          document.getElementById("address").textContent = address;
+
+          // Get custom message from input or use hashed string
+          const customMessage = document
+            .getElementById("messageInput")
+            .value.trim();
+          const messageToSign = customMessage || await web3_metamask_hash(address);
+          console.log("Message to sign: " + messageToSign);
+
+          // Request the user to sign it
+          updateStatus(
+            "Please sign the message in MetaMask...",
+            "text-orange-600",
+          );
+          const signature = await provider
+            .getSigner()
+            .signMessage(messageToSign);
+          // Got the signature
+          console.log("The signature: " + signature);
+          document.getElementById("signature").textContent = signature;
+          updateStatus("Message signed successfully!", "text-green-600");
+
+          // TODO
+          // you can then send the signature to the webserver for further processing and verification
+          console.log({address, signature})
+          await login_api(address, signature);
+        }
+      }
+
+      function updateStatus(message, className) {
+        const statusEl = document.getElementById("status");
+        statusEl.textContent = message;
+        statusEl.className = `text-sm font-medium ${className}`;
+      }
+    </script>
+  </head>
+  <body class="bg-gradient-to-br from-blue-50 to-indigo-100 min-h-screen">
+    <div class="container mx-auto px-4 py-8 max-w-2xl">
+      <div class="bg-white rounded-xl shadow-lg p-8">
+        <div class="text-center mb-8">
+          <h1 class="text-3xl font-bold text-gray-800 mb-2">
+            Web3 MetaMask Login
+          </h1>
+          <p class="text-gray-600">
+            Connect your wallet and sign messages securely
+          </p>
+        </div>
+
+        <div class="space-y-6">
+          <!-- MetaMask Detection Section -->
+          <div class="bg-gray-50 rounded-lg p-6">
+            <h2 class="text-lg font-semibold text-gray-700 mb-3">
+              1. MetaMask Detection
+            </h2>
+            <button
+              onclick="web3_check_metamask();"
+              class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-6 rounded-lg transition duration-200 ease-in-out transform hover:scale-105"
+            >
+              Detect MetaMask
+            </button>
+          </div>
+
+          <!-- Message Input Section -->
+          <div class="bg-gray-50 rounded-lg p-6">
+            <h2 class="text-lg font-semibold text-gray-700 mb-3">
+              2. Custom Message (Optional)
+            </h2>
+            <div class="mb-4">
+              <label
+                for="messageInput"
+                class="block text-sm font-medium text-gray-600 mb-2"
+              >
+                Enter a custom message to sign (leave empty for random hash):
+              </label>
+              <input
+                type="text"
+                id="messageInput"
+                placeholder="Enter your custom message here..."
+                class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none transition duration-200"
+              />
+            </div>
+          </div>
+
+          <!-- Login Section -->
+          <div class="bg-gray-50 rounded-lg p-6">
+            <h2 class="text-lg font-semibold text-gray-700 mb-3">
+              3. Wallet Login
+            </h2>
+            <button
+              onclick="web3_metamask_login();"
+              class="bg-gradient-to-r from-orange-500 to-red-600 hover:from-orange-600 hover:to-red-700 text-white font-medium py-3 px-8 rounded-lg transition duration-200 ease-in-out transform hover:scale-105 shadow-md"
+            >
+              🦊 Login with MetaMask
+            </button>
+          </div>
+
+          <!-- Status Section -->
+          <div class="bg-white border border-gray-200 rounded-lg p-6">
+            <h3 class="text-lg font-semibold text-gray-700 mb-3">Status</h3>
+            <div id="status" class="text-sm text-gray-500">
+              Ready to connect...
+            </div>
+          </div>
+
+          <!-- Results Section -->
+          <div class="bg-white border border-gray-200 rounded-lg p-6">
+            <h3 class="text-lg font-semibold text-gray-700 mb-4">
+              Connection Details
+            </h3>
+
+            <div class="space-y-4">
+              <div>
+                <label class="block text-sm font-medium text-gray-600 mb-1"
+                  >Wallet Address:</label
+                >
+                <div
+                  id="address"
+                  class="bg-gray-50 p-3 rounded border text-sm font-mono break-all text-gray-700"
+                >
+                  Not connected
+                </div>
+              </div>
+
+              <div>
+                <label class="block text-sm font-medium text-gray-600 mb-1"
+                  >Message Signature:</label
+                >
+                <div
+                  id="signature"
+                  class="bg-gray-50 p-3 rounded border text-sm font-mono break-all text-gray-700 max-h-32 overflow-y-auto"
+                >
+                  No signature yet
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Info Section -->
+          <div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
+            <div class="flex items-start">
+              <div class="flex-shrink-0">
+                <svg
+                  class="h-5 w-5 text-blue-400"
+                  fill="currentColor"
+                  viewBox="0 0 20 20"
+                >
+                  <path
+                    fill-rule="evenodd"
+                    d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
+                    clip-rule="evenodd"
+                  ></path>
+                </svg>
+              </div>
+              <div class="ml-3">
+                <h4 class="text-sm font-medium text-blue-800">How it works</h4>
+                <p class="text-sm text-blue-700 mt-1">
+                  First detect MetaMask, then optionally enter a custom message,
+                  and finally connect your wallet to sign the message securely.
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
