diff --git a/docs/index.html b/docs/index.html
new file mode 100644
index 00000000..0b0bd000
--- /dev/null
+++ b/docs/index.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>AI Teacher (WebLLM)</title>
+  <script src="https://mlc.ai/web-llm/dist/webllm.min.js"></script>
+  <style>
+    body {
+      font-family: Arial, sans-serif;
+      background: #e9f0ff;
+      text-align: center;
+      padding: 20px;
+    }
+    #chat {
+      width: 90%;
+      max-width: 700px;
+      margin: auto;
+      background: #fff;
+      padding: 20px;
+      border-radius: 12px;
+      box-shadow: 0 0 10px #ccc;
+    }
+    #output {
+      border: 1px solid #ccc;
+      min-height: 150px;
+      padding: 10px;
+      text-align: left;
+      margin-top: 20px;
+      border-radius: 10px;
+      white-space: pre-wrap;
+    }
+    input, button {
+      padding: 10px;
+      margin-top: 10px;
+      width: 70%;
+      border-radius: 6px;
+    }
+  </style>
+</head>
+<body>
+  <h2>👩‍🏫 Ask Your AI Teacher (Offline Web)</h2>
+  <div id="chat">
+    <input type="text" id="question" placeholder="Ask a Class 10 question..." />
+    <br/>
+    <button onclick="askTeacher()">Ask</button>
+    <div id="output">Model is loading, please wait...</div>
+  </div>
+
+  <script>
+    let chat = null;
+
+    // Load the model (only runs once)
+    window.onload = async () => {
+      chat = new window.webllm.ChatModule();
+      await chat.reload("RedPajama-INCITE-Chat-3B-v1"); // 3B model
+      document.getElementById("output").innerHTML = "✅ Model ready! Ask your question.";
+    };
+
+    async function askTeacher() {
+      const question = document.getElementById("question").value;
+      const output = document.getElementById("output");
+      output.innerHTML = "🧠 Thinking...";
+
+      const reply = await chat.chat(question);
+      output.innerHTML = reply;
+    }
+  </script>
+</body>
+</html>
diff --git a/docs/index.rst b/docs/index.rst
deleted file mode 100644
index 28b0ed70..00000000
--- a/docs/index.rst
+++ /dev/null
@@ -1,35 +0,0 @@
-👋 Welcome to WebLLM
-====================
-
-`GitHub <https://github.com/mlc-ai/web-llm>`_ | `WebLLM Chat <https://chat.webllm.ai/>`_ | `NPM <https://www.npmjs.com/package/@mlc-ai/web-llm>`_ | `Discord <https://discord.gg/9Xpy2HGBuD>`_
-
-WebLLM is a high-performance in-browser language model inference engine that brings large language models (LLMs) to web browsers with hardware acceleration. With WebGPU support, it allows developers to build AI-powered applications directly within the browser environment, removing the need for server-side processing and ensuring privacy.
-
-It provides a specialized runtime for the web backend of MLCEngine, leverages
-`WebGPU <https://www.w3.org/TR/webgpu/>`_ for local acceleration, offers OpenAI-compatible API,
-and provides built-in support for web workers to separate heavy computation from the UI flow.
-
-Key Features
-------------
-- 🌐 In-Browser Inference: Run LLMs directly in the browser
-- 🚀 WebGPU Acceleration: Leverage hardware acceleration for optimal performance
-- 🔄 OpenAI API Compatibility: Seamless integration with standard AI workflows
-- 📦 Multiple Model Support: Works with Llama, Phi, Gemma, Mistral, and more
-
-Start exploring WebLLM by `chatting with WebLLM Chat <https://chat.webllm.ai/>`_, and start building webapps with high-performance local LLM inference with the following guides and tutorials.
-
-.. toctree::
-   :maxdepth: 2
-   :caption: User Guide
-
-   user/get_started.rst
-   user/basic_usage.rst
-   user/advanced_usage.rst
-   user/api_reference.rst
-
-.. toctree::
-   :maxdepth: 2
-   :caption: Developer Guide
-
-   developer/building_from_source.rst
-   developer/add_models.rst
