diff --git a/app/web/src/render/ed/panel/popup/api/api-db.tsx b/app/web/src/render/ed/panel/popup/api/api-db.tsx
new file mode 100644
index 00000000..d3b1dd2d
--- /dev/null
+++ b/app/web/src/render/ed/panel/popup/api/api-db.tsx
@@ -0,0 +1,3 @@
+export const EdApiDB = ({ db }: { db: string }) => {
+  return <div>DB</div>;
+};
diff --git a/app/web/src/render/ed/panel/popup/api/api-server.tsx b/app/web/src/render/ed/panel/popup/api/api-server.tsx
index 49a10d2e..27be908c 100644
--- a/app/web/src/render/ed/panel/popup/api/api-server.tsx
+++ b/app/web/src/render/ed/panel/popup/api/api-server.tsx
@@ -2,6 +2,7 @@ import { forwardRef } from "react";
 import { useGlobal, useLocal } from "web-utils";
 import { EDGlobal } from "../../../logic/ed-global";
 import { apiUrl, checkAPI, dev } from "./api-utils";
+import { EdApiDB } from "./api-db";
 
 export const EdApiServer = forwardRef<
   HTMLDivElement,
@@ -13,8 +14,9 @@ export const EdApiServer = forwardRef<
   const local = useLocal(
     {
       api_url: p.site.config.api_url,
-      status: "offline" as "online" | "offline" | "checking",
+      status: "checking" as "online" | "error" | "offline" | "checking",
       deployable: false,
+      db: "",
       hasDB: false,
     },
     () => {
@@ -33,18 +35,19 @@ export const EdApiServer = forwardRef<
 
   const url = apiUrl(p);
 
-  const check = () => {
-    local.status = "checking";
+  const check = async () => {
     local.render();
-    const res = checkAPI(p);
-    if (res) {
+    const res = await checkAPI(p);
+    if (typeof res === "object") {
+      local.db = res.db;
       local.hasDB = res.hasDB;
       local.status = "online";
       local.deployable = res.deployable;
       local.render();
     } else {
+      local.db = "";
       local.hasDB = false;
-      local.status = "offline";
+      local.status = res;
       local.deployable = false;
       local.render();
     }
@@ -73,6 +76,9 @@ export const EdApiServer = forwardRef<
             {local.status === "offline" && (
               <div className="text-white px-2 bg-slate-500">OFFLINE</div>
             )}
+            {local.status === "error" && (
+              <div className="text-white px-2 bg-red-500">SERVER ERROR</div>
+            )}
             {local.status === "checking" && (
               <div className="text-blue-500">Checking...</div>
             )}
@@ -160,7 +166,7 @@ export const EdApiServer = forwardRef<
       </div>
       {local.status === "online" && (
         <>
-          {!local.deployable && !local.hasDB && (
+          {!local.deployable && !local.db && (
             <div className="h-[50px] flex items-center justify-center text-slate-400 text-center">
               This server is not deployable <br />
               and do not have DB
@@ -168,6 +174,7 @@ export const EdApiServer = forwardRef<
           )}
         </>
       )}
+      {local.hasDB && <EdApiDB db={local.db} />}
     </div>
   );
 });
diff --git a/app/web/src/render/ed/panel/popup/api/api-utils.ts b/app/web/src/render/ed/panel/popup/api/api-utils.ts
index 16402127..15c0b4e3 100644
--- a/app/web/src/render/ed/panel/popup/api/api-utils.ts
+++ b/app/web/src/render/ed/panel/popup/api/api-utils.ts
@@ -1,3 +1,4 @@
+import { createAPI, initApi } from "../../../../../utils/script/init-api";
 import { PG } from "../../../logic/ed-global";
 
 export const dev = JSON.parse(localStorage.getItem("prasi-dev") || "{}") as {
@@ -33,9 +34,33 @@ export const apiUrl = function (p: PG): string {
   return "";
 };
 
-export const checkAPI = (p: PG) => {
-  const url = apiUrl(p);
-  if (!url) return null;
+const apiDef = {} as any;
 
-  return { deployable: false, hasDB: false };
+export const checkAPI = async (p: PG) => {
+  const url = apiUrl(p);
+  if (!url) return "offline";
+
+  try {
+    if (!apiDef[url]) {
+      await initApi({ api_url: url }, "dev");
+      apiDef[url] = createAPI(url);
+    }
+    const capi = apiDef[url];
+    let res = await capi._deploy({
+      type: "check",
+      id_site: p.site.id,
+    });
+    if (!res) {
+      return { deployable: false, db: "", hasDB: false };
+    } else {
+      if (res.db && res.now) {
+        return { deployable: false, db: res.db, hasDB: true };
+      }
+    }
+  } catch (e) {
+    console.error(e);
+    return "error";
+  }
+
+  return { deployable: false, db: "", hasDB: false };
 };
diff --git a/app/web/src/utils/script/init-api.ts b/app/web/src/utils/script/init-api.ts
index 70d4c2e7..b523f3a4 100644
--- a/app/web/src/utils/script/init-api.ts
+++ b/app/web/src/utils/script/init-api.ts
@@ -22,6 +22,7 @@ export const createAPI = (url: string) => {
   if (!url) {
     throw new Error("No URL provided");
   }
+
   return w.apiClient(w.prasiApi[url]?.apiEntry, url);
 };
 
diff --git a/pkgs/web-utils/src/client-api.ts b/pkgs/web-utils/src/client-api.ts
index 90b5336b..46cf42f8 100644
--- a/pkgs/web-utils/src/client-api.ts
+++ b/pkgs/web-utils/src/client-api.ts
@@ -17,11 +17,17 @@ export const apiClient = (
                   _apiURL = this.apiUrl;
                 }
 
-                if (!api || !api[actionName]) {
-                  resolve(null);
-                  console.error(
+                if (!api) {
+                  reject(
+                    new Error(`API Definition for ${_apiURL} is not loaded.`)
+                  );
+                  return;
+                }
+
+                if (api && !api[actionName]) {
+                  reject(
                     `API ${actionName.toString()} not found, existing API: \n   - ${Object.keys(
-                      api
+                      api || {}
                     ).join("\n   - ")}`
                   );
                   return;