diff --git a/index.html b/index.html
index e6c9476..7276345 100644
--- a/index.html
+++ b/index.html
@@ -9,22 +9,47 @@
       rel="stylesheet"
       href="https://cdn.jsdelivr.net/npm/tailwindcss@4.1.4/index.min.css"
     />
+    <style>
+      body {
+        background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
+        background-size: 400% 400%;
+        animation: gradientShift 15s ease infinite;
+      }
+
+      @keyframes gradientShift {
+        0% {
+          background-position: 0% 50%;
+        }
+        50% {
+          background-position: 100% 50%;
+        }
+        100% {
+          background-position: 0% 50%;
+        }
+      }
+    </style>
   </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"
+    class="min-h-screen flex flex-col items-center justify-center text-white font-sans tracking-wide"
   >
     <header class="text-center mb-12">
       <h1 class="text-5xl font-bold mb-4">🌐 My Network Services</h1>
-      <p class="text-gray-400">
+      <p class="text-gray-300 text-lg">
         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"
+      class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 max-w-7xl w-full px-6"
     ></div>
 
+    <footer class="mt-16 text-gray-400 text-sm text-center">
+      &copy; 2024-2025 Xiaomai. All services self-hosted 🧠💻<br />
+      Powered by TailwindCSS · Script-enhanced · Inspired by Productivity ⚙️
+    </footer>
+
     <script>
       const hostIP = window.location.hostname;
 
@@ -33,64 +58,113 @@
           port: 81,
           name: "🏠 Personal Homepage",
           desc: "Work in progress. Stay tuned!",
+          tags: ["Web"],
         },
         {
           port: 40069,
           name: "☁ Nextcloud",
           desc: "Self-hosted cloud storage",
           secured: true,
+          tags: ["Cloud", "Storage"],
         },
         {
           port: 1957,
           name: "🌦️ Malaysia Weather Radar",
           desc: "Historical weather radar visualization",
+          tags: ["Data", "Weather"],
         },
         {
           port: 1025,
           name: "🎮 Kenney's Assets",
           desc: "Open game art & asset collection",
+          tags: ["Assets", "Games"],
+        },
+        {
+          port: 1031,
+          name: "🌐 Itch io Godot pck Downloader",
+          desc: "Download Godot pck files from itch.io",
+          tags: ["Games", "Tools"],
         },
         {
           port: 3000,
           name: "📁 Gitea",
           desc: "Self-hosted Git service",
+          tags: ["Code", "Git"],
         },
         {
           port: 5230,
           name: "📝 Memos",
           desc: "Lightweight self-hosted note-taking",
+          tags: ["Notes", "Productivity"],
         },
         {
           port: 40178,
           name: "📊 JSON Hero",
           desc: "Visual JSON explorer",
+          tags: ["Tools", "JSON"],
         },
         {
           port: 24680,
           name: "🛠️ 1Panel Dashboard",
           desc: "Unified server management panel",
+          tags: ["Admin", "Dashboard"],
         },
       ];
 
       const container = document.getElementById("service-grid");
 
-      services.forEach((service) => {
-        const card = document.createElement("a");
-        card.href = `${service.secured ? "https" : "http"}://${hostIP}:${service.port}`;
-        card.target = "_blank";
-        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>
+      async function checkStatus(service) {
+        try {
+          // Using fetch HEAD mode may be blocked due to CORS;
+          // For local/internal services, this is mostly illustrative.
+          const res = await fetch(
+            `${service.secured ? "https" : "http"}://${hostIP}:${service.port}`,
+            { method: "HEAD", mode: "no-cors" }
+          );
+          return true;
+        } catch {
+          return false;
+        }
+      }
 
-    <footer class="mt-16 text-gray-500 text-sm">
-      &copy; 2024-2025 Xiaomai. All services self-hosted 🧠💻
-    </footer>
+      (async () => {
+        for (const service of services) {
+          const online = await checkStatus(service);
+
+          const card = document.createElement("a");
+          card.href = `${service.secured ? "https" : "http"}://${hostIP}:${
+            service.port
+          }`;
+          card.target = "_blank";
+          card.rel = "noopener noreferrer";
+          card.className =
+            "rounded-xl overflow-hidden p-6 backdrop-blur-md bg-white/10 hover:bg-white/20 transition duration-300 border border-white/20 shadow-xl transform hover:scale-[1.03]";
+
+          card.innerHTML = `
+            <div class="flex flex-col h-full">
+              <h2 class="text-2xl font-bold mb-2">${service.name}</h2>
+              <p class="text-gray-300 flex-grow">${service.desc}</p>
+              <div class="mt-4 flex flex-wrap items-center justify-between text-sm">
+                <div class="text-gray-400">Port: ${service.port}</div>
+                <div class="${
+                  online ? "bg-green-600" : "bg-red-600"
+                } text-white px-2 py-1 rounded-full text-xs">
+                  ${online ? "🟢 Online" : "🔴 Offline"}
+                </div>
+              </div>
+              <div class="mt-3 flex flex-wrap gap-2">
+                ${(service.tags || [])
+                  .map(
+                    (tag) =>
+                      `<span class="bg-blue-800 text-white text-xs px-2 py-1 rounded-full">${tag}</span>`
+                  )
+                  .join("")}
+              </div>
+            </div>
+          `;
+          container.appendChild(card);
+        }
+      })();
+    </script>
   </body>
 </html>
