diff --git a/index.html b/index.html
new file mode 100644
index 0000000..c6decca
--- /dev/null
+++ b/index.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>My Services Hub</title>
+    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/tailwindcss@4.1.4/index.min.css"
+    />
+  </head>
+  <body
+    class="bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 text-white min-h-screen flex flex-col items-center justify-center font-sans"
+  >
+    <header class="text-center mb-12">
+      <h1 class="text-5xl font-bold mb-4">🌐 My Network Services</h1>
+      <p class="text-gray-400">
+        All services hosted under the same IP, organized for your convenience 💡
+      </p>
+    </header>
+
+    <div
+      id="service-grid"
+      class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8 max-w-5xl w-full px-6"
+    ></div>
+
+    <script>
+      const hostIP = window.location.hostname;
+
+      const services = [
+        {
+          port: 1957,
+          name: "🌦️ Malaysia Weather Radar",
+          desc: "Historical weather radar visualization",
+        },
+        {
+          port: 81,
+          name: "🏠 Personal Homepage",
+          desc: "Work in progress. Stay tuned!",
+        },
+        {
+          port: 1025,
+          name: "🎮 Kenney's Assets",
+          desc: "Open game art & asset collection",
+        },
+        { port: 3000, name: "📁 Gitea", desc: "Self-hosted Git service" },
+        {
+          port: 5230,
+          name: "📝 Memos",
+          desc: "Lightweight self-hosted note-taking",
+        },
+        { port: 40178, name: "📊 JSON Hero", desc: "Visual JSON explorer" },
+        {
+          port: 24680,
+          name: "🛠️ 1Panel Dashboard",
+          desc: "Unified server management panel",
+        },
+      ];
+
+      const container = document.getElementById("service-grid");
+
+      services.forEach((service) => {
+        const card = document.createElement("a");
+        card.href = `http://${hostIP}:${service.port}`;
+        card.className =
+          "bg-gray-800 hover:bg-gray-700 transition rounded-lg p-6 shadow-lg border border-gray-700";
+        card.innerHTML = `
+          <h2 class="text-xl font-semibold mb-2">${service.name}</h2>
+          <p class="text-gray-400">${service.desc}</p>
+          <p class="mt-2 text-sm text-gray-500">Port: ${service.port}</p>
+        `;
+        container.appendChild(card);
+      });
+    </script>
+
+    <footer class="mt-16 text-gray-500 text-sm">
+      &copy; 2024-2025 Xiaomai. All services self-hosted 🧠💻
+    </footer>
+  </body>
+</html>
