diff --git a/infra/staff/src/App.tsx b/infra/staff/src/App.tsx
index 01d79b18cc6..e9e38636bd6 100644
--- a/infra/staff/src/App.tsx
+++ b/infra/staff/src/App.tsx
@@ -1,28 +1,227 @@
-import React from "react";
-import { getUserDetails } from "./services/support-service";
+import React, { useEffect, useState } from "react";
 import S from "./utils/strings";
 
 export const App: React.FC = () => {
-    const handleClick = () => {
-        const authToken = "xxx";
-        getUserDetails(authToken)
-            .then((userDetails) => {
-                console.log("Fetched user details", userDetails);
-            })
-            .catch((e: unknown) => {
-                console.error("Failed to fetch user details", e);
-            });
+    const [serverUrl /*, setServerUrl */] = useState(
+        import.meta.env.VITE_ENTE_ENDPOINT || "",
+    );
+    const [token, setToken] = useState("");
+    const [email, setEmail] = useState("");
+    const [userData, setUserData] = useState<any>(null);
+    const [error, setError] = useState<string | null>(null);
+
+    useEffect(() => {
+        const storedToken = localStorage.getItem("token");
+        if (storedToken) {
+            setToken(storedToken);
+        }
+        console.log(import.meta.env.VITE_ENTE_ENDPOINT);
+    }, []);
+
+    useEffect(() => {
+        if (token) {
+            localStorage.setItem("token", token);
+        } else {
+            localStorage.removeItem("token");
+        }
+    }, [token]);
+
+    const fetchData = async () => {
+        try {
+            const url = `${serverUrl}/admin/user?email=${email}&token=${token}`;
+            const response = await fetch(url);
+            if (!response.ok) {
+                throw new Error("Network response was not ok");
+            }
+            const userData = await response.json();
+            console.log("API Response:", userData);
+            setUserData(userData);
+            setError(null);
+        } catch (error) {
+            console.error("Error fetching data:", error);
+            setError((error as Error).message);
+        }
+    };
+
+    const renderAttributes = (data: any) => {
+        if (!data) return null;
+
+        let nullAttributes: string[] = [];
+
+        const rows = Object.entries(data).map(([key, value]) => {
+            console.log("Processing key:", key, "value:", value);
+
+            if (
+                typeof value === "object" &&
+                value !== null &&
+                !Array.isArray(value)
+            ) {
+                return (
+                    <React.Fragment key={key}>
+                        <tr>
+                            <td
+                                colSpan={2}
+                                style={{
+                                    fontWeight: "bold",
+                                    backgroundColor: "#f1f1f1",
+                                    padding: "10px",
+                                }}
+                            >
+                                {key.toUpperCase()}
+                            </td>
+                        </tr>
+                        {renderAttributes(value)}
+                    </React.Fragment>
+                );
+            } else {
+                if (value === null) {
+                    nullAttributes.push(key);
+                }
+
+                let displayValue: React.ReactNode;
+                if (key === "expiryTime" && typeof value === "number") {
+                    displayValue = new Date(value / 1000).toLocaleString();
+                } else if (
+                    key === "creationTime" &&
+                    typeof value === "number"
+                ) {
+                    displayValue = new Date(value / 1000).toLocaleString();
+                } else if (key === "storage" && typeof value === "number") {
+                    displayValue = `${(value / 1024 ** 3).toFixed(2)} GB`;
+                } else if (typeof value === "string") {
+                    try {
+                        const parsedValue = JSON.parse(value);
+                        displayValue = parsedValue;
+                    } catch (error) {
+                        displayValue = value;
+                    }
+                } else if (value === null) {
+                    displayValue = "null";
+                } else if (typeof value !== "undefined") {
+                    displayValue = value.toString();
+                } else {
+                    displayValue = "undefined";
+                }
+
+                return (
+                    <tr key={key}>
+                        <td
+                            style={{
+                                padding: "10px",
+                                border: "1px solid #ddd",
+                            }}
+                        >
+                            {key}
+                        </td>
+                        <td
+                            style={{
+                                padding: "10px",
+                                border: "1px solid #ddd",
+                            }}
+                        >
+                            {displayValue}
+                        </td>
+                    </tr>
+                );
+            }
+        });
+
+        console.log("Attributes with null values:", nullAttributes);
+
+        return rows;
     };
 
     return (
-        <div>
+        <div className="container center-table">
             <h1>{S.hello}</h1>
-            <p>
-                <a href="https://help.ente.io">help.ente.io</a>
-            </p>
-            <p>
-                <button onClick={handleClick}>Do something</button>
-            </p>
+
+            <form className="input-form">
+                <div className="input-group">
+                    <label>
+                        Token:
+                        <input
+                            type="text"
+                            value={token}
+                            onChange={(e) => setToken(e.target.value)}
+                            style={{
+                                padding: "10px",
+                                margin: "10px",
+                                width: "100%",
+                            }}
+                        />
+                    </label>
+                </div>
+                <div className="input-group">
+                    <label>
+                        Email id:
+                        <input
+                            type="text"
+                            value={email}
+                            onChange={(e) => setEmail(e.target.value)}
+                            style={{
+                                padding: "10px",
+                                margin: "10px",
+                                width: "100%",
+                            }}
+                        />
+                    </label>
+                </div>
+            </form>
+            <div className="fetch-button">
+                <button
+                    onClick={fetchData}
+                    style={{
+                        padding: "10px 20px",
+                        fontSize: "16px",
+                        cursor: "pointer",
+                        backgroundColor: "#009879",
+                        color: "white",
+                        border: "none",
+                        borderRadius: "5px",
+                    }}
+                >
+                    FETCH
+                </button>
+            </div>
+            <br />
+            {error && <p style={{ color: "red" }}>{`Error: ${error}`}</p>}
+            {userData && (
+                <table
+                    style={{
+                        width: "100%",
+                        borderCollapse: "collapse",
+                        margin: "20px 0",
+                        fontSize: "1em",
+                        minWidth: "400px",
+                        boxShadow: "0 0 20px rgba(0, 0, 0, 0.15)",
+                    }}
+                >
+                    <tbody>
+                        {Object.keys(userData).map((category) => (
+                            <React.Fragment key={category}>
+                                <tr>
+                                    <td
+                                        colSpan={2}
+                                        style={{
+                                            fontWeight: "bold",
+                                            backgroundColor: "#f1f1f1",
+                                            padding: "10px",
+                                        }}
+                                    >
+                                        {category.toUpperCase()}
+                                    </td>
+                                </tr>
+                                {renderAttributes(userData[category])}
+                            </React.Fragment>
+                        ))}
+                    </tbody>
+                </table>
+            )}
+            <footer className="footer">
+                <p>
+                    <a href="https://help.ente.io">help.ente.io</a>
+                </p>
+            </footer>
         </div>
     );
 };