diff --git a/infra/staff/src/App.css b/infra/staff/src/App.css
index 38580a25684..2cc6d55418f 100644
--- a/infra/staff/src/App.css
+++ b/infra/staff/src/App.css
@@ -1,43 +1,20 @@
 .container {
-    position: relative; /* Ensure the parent is relatively positioned */
-    height: 100vh; /* Full viewport height */
-    width: 100vw; /* Full viewport width */
-    display: flex;
-    justify-content: center;
+    max-width: 1200px;
+    height: auto;
     align-items: center;
+    margin: 0 auto;
 }
 
 .center-table {
     display: table;
 }
 
-.input-form {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-}
-
-.horizontal-group {
-    position: absolute; /* Use absolute positioning */
-    top: 32px; /* 32px below the top of the page */
-    left: 32px; /* 32px from the leftmost edge of the page */
-    right: 32px;
-    display: flex;
-    align-items: center; /* Align items vertically centered */
-    gap: 20px; /* Adjust the gap between elements as needed */
-    background-color: #fafafa;
-    height: 104px;
-    width: 1375px;
-    border-radius: 10px;
-}
-
 .fetch-button-container button {
     background-color: #00b33c;
     color: white;
     border: none;
     width: 199px;
     height: 56px;
-    margin-left: 20px;
 }
 
 .fetch-button-container button:hover {
@@ -52,15 +29,9 @@
     color: inherit; /* Inherit color from parent */
     font-weight: bold; /* Make the text bold */
     font-size: 40px;
+    margin-bottom: 25px;
 }
 
-.text-field-token {
-    margin-left: 70px !important; /* Adjust margin for Token field */
-}
-
-.text-field-email {
-    margin-left: 20px !important; /* Adjust margin for Email field */
-}
 .duckie-container {
     position: absolute;
     top: 50%;
@@ -85,32 +56,31 @@
     justify-content: center;
     align-items: center;
 }
-.container {
-    position: relative; /* Ensure the parent is relatively positioned */
-    height: 100vh; /* Full viewport height */
-    width: 100vw; /* Full viewport width */
-    display: flex;
-    flex-direction: column; /* Add this */
-    justify-content: center; /* Center vertically */
-    align-items: center; /* Center horizontally */
-}
 
 .input-form {
     display: flex;
     flex-direction: column;
     align-items: center;
-    z-index: 1; /* Ensure form is on top */
+    justify-content: space-around;
+    marign: 20px;
 }
 
 .horizontal-group {
     display: flex;
     align-items: center;
-    gap: 20px; /* Adjust the gap between elements as needed */
-    background-color: #fafafa;
+    background-color: #fcfcfc;
     padding: 20px; /* Add padding around content */
     border-radius: 10px;
+    margin-top: 90px;
+    width: 1200px;
+    justify-content: space-around;
 }
 
+.text-fields {
+    display: flex;
+    justify-content: row;
+    gap: 20px;
+}
 .fetch-button-container button {
     background-color: #00b33c;
     color: white;
@@ -123,24 +93,6 @@
     background-color: #007c6c;
 }
 
-.link-text {
-    display: flex;
-    align-items: center;
-    padding: 0 16px; /* Add padding for better appearance */
-    text-decoration: none; /* Remove underline */
-    color: inherit; /* Inherit color from parent */
-    font-weight: bold; /* Make the text bold */
-    font-size: 40px;
-}
-
-.text-field-token {
-    margin-left: 70px !important; /* Adjust margin for Token field */
-}
-
-.text-field-email {
-    margin-left: 50px !important; /* Adjust margin for Email field */
-}
-
 .center-content {
     display: flex;
     justify-content: center;
@@ -157,44 +109,11 @@
     align-items: center;
 }
 
-/* Example CSS to maintain tabs fixed position */
-.tabs-container {
-    position: sticky;
-    top: 20px; /* Adjust as needed */
-    z-index: 1000; /* Ensure tabs are above other content */
-}
-.container {
-    position: relative; /* Ensure the parent is relatively positioned */
-    height: 100vh; /* Full viewport height */
-    width: 100vw; /* Full viewport width */
-    display: flex;
-    flex-direction: column; /* Ensure children stack vertically */
-    justify-content: center; /* Center vertically */
-    align-items: center; /* Center horizontally */
-}
-
-.input-form {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    z-index: 1; /* Ensure form is on top */
-    margin-bottom: 20px; /* Add space between form and tabs */
-}
-
-.horizontal-group {
-    display: flex;
-    align-items: center;
-    gap: 20px; /* Adjust the gap between elements as needed */
-    background-color: #fafafa;
-    padding: 20px; /* Add padding around content */
-    border-radius: 10px;
-}
-
 .fetch-button-container button {
     background-color: #00b33c;
     color: white;
     border: none;
-    width: 199px;
+    width: 150px;
     height: 56px;
 }
 
@@ -202,24 +121,6 @@
     background-color: #007c6c;
 }
 
-.link-text {
-    display: flex;
-    align-items: center;
-    padding: 0 16px; /* Add padding for better appearance */
-    text-decoration: none; /* Remove underline */
-    color: inherit; /* Inherit color from parent */
-    font-weight: bold; /* Make the text bold */
-    font-size: 40px;
-}
-
-.text-field-token {
-    margin-left: 70px !important; /* Adjust margin for Token field */
-}
-
-.text-field-email {
-    margin-left: 50px !important; /* Adjust margin for Email field */
-}
-
 .center-content {
     display: flex;
     justify-content: center;
@@ -236,14 +137,6 @@
     align-items: center;
 }
 
-.tabs-container {
-    position: sticky; /* Make the tabs sticky */
-    top: 0; /* Stick to the top of the viewport */
-    z-index: 1000; /* Ensure tabs are above other content */
-    background-color: #fafafa; /* Optional: Add background color to tabs */
-    padding: 10px 20px; /* Optional: Add padding for better appearance */
-    border-bottom: 1px solid #ccc; /* Optional: Add bottom border */
-}
 .dialog-popup-container {
     /* Styles for the overlay/background */
     position: fixed;
@@ -313,21 +206,12 @@
     min-height: 100vh;
 }
 
-.input-form {
-    margin-bottom: 16px;
-}
-
 .content-container {
     display: flex;
     flex-direction: column;
     align-items: center;
+    gap: 25px;
     width: 100%;
-    margin-top: 150px;
-}
-
-.horizontal-group {
-    display: flex;
-    align-items: center;
 }
 
 .fetch-button-container {
@@ -335,13 +219,52 @@
     margin-left: 10px;
 }
 
-.text-field-token,
-.text-field-email {
-    margin: 0 8px;
-}
-
 .error-message {
     color: red;
     font-weight: bold;
     margin-top: 16px;
 }
+
+/* MUi Component Custom CSS */
+css-1t8l2tu-MuiInputBase-input-MuiOutlinedInput-input {
+    padding: none;
+    margin: none;
+}
+
+/* Mobile */
+@media screen and (max-width: 475px) {
+    .link-text {
+        font-size: 30px;
+        text-align: center;
+    }
+    .input-form {
+        max-width: 400px;
+        align-items: center;
+        gap: 20px;
+        flex-direction: row;
+    }
+    .horizontal-group {
+        width: 500px;
+        flex-direction: column;
+        gap: 25px;
+    }
+    .text-fields {
+        width: fit-content;
+        flex-direction: column;
+        gap: 20px;
+        justify-content: center;
+    }
+    .text-fields label {
+        padding: 0;
+        margin: none;
+    }
+}
+
+@media screen and (max-width: 576px) {
+}
+
+@media screen and (max-width: 900px) {
+}
+
+@media screen and (max-width: 1200px) {
+}
diff --git a/infra/staff/src/App.tsx b/infra/staff/src/App.tsx
index c610ac9aa48..00a3c448fdc 100644
--- a/infra/staff/src/App.tsx
+++ b/infra/staff/src/App.tsx
@@ -1,3 +1,4 @@
+import { Link } from "@mui/material";
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import CircularProgress from "@mui/material/CircularProgress";
@@ -227,68 +228,116 @@ const App: React.FC = () => {
 
     const handleTabChange = (
         _event: React.SyntheticEvent,
+
         newValue: number,
     ) => {
         setTabValue(newValue);
     };
 
+    useEffect(() => {
+        const searchParam = new URLSearchParams(window.location.search);
+        const userToken = searchParam.get("token");
+
+        if (userToken) {
+            setLocalToken(userToken);
+            setToken(userToken);
+
+            const editToken = document.getElementById(":r1:");
+            if (editToken instanceof HTMLInputElement) {
+                editToken.readOnly = true;
+            }
+        }
+    }, []);
+
+    const updateToken = () => {
+        const editToken = document.getElementById(":r1:");
+        if (editToken instanceof HTMLInputElement) {
+            editToken.readOnly = false;
+            // Change focus to token field
+            editToken.focus();
+        }
+    };
+
     return (
         <div className="container">
-            <form className="input-form" onKeyPress={handleKeyPress}>
-                <div className="horizontal-group">
-                    <a
-                        href="https://staff.ente.sh"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="link-text"
-                    >
-                        staff.ente.sh
-                    </a>
-
-                    <TextField
-                        label="Token"
-                        value={localToken}
-                        onChange={(e) => {
-                            setLocalToken(e.target.value);
-                            setToken(e.target.value);
-                        }}
-                        size="medium"
-                        className="text-field-token"
-                        style={{ width: "350px" }}
-                    />
-                    <TextField
-                        label="Email"
-                        value={localEmail}
-                        onChange={(e) => {
-                            setLocalEmail(e.target.value);
-                            setEmail(e.target.value);
-                        }}
-                        size="medium"
-                        className="text-field-email"
-                        style={{ width: "350px" }}
-                    />
-                    <div className="fetch-button-container">
-                        <Button
-                            variant="contained"
-                            onClick={() => {
-                                fetchData().catch((error: unknown) =>
-                                    console.error("Fetch data error:", error),
-                                );
-                            }}
-                            className="fetch-button"
-                            style={{
-                                padding: "0 16px",
-                            }}
+            <div>
+                <form className="input-form" onKeyPress={handleKeyPress}>
+                    <div className="horizontal-group">
+                        <a
+                            href="https://staff.ente.sh"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="link-text"
                         >
-                            FETCH
-                        </Button>
+                            staff.ente.io
+                        </a>
+                        <div className="text-fields">
+                            <div
+                                style={{
+                                    display: "flex",
+                                    flexDirection: "column",
+                                }}
+                            >
+                                <TextField
+                                    label="Token"
+                                    value={localToken}
+                                    onChange={(e) => {
+                                        setLocalToken(e.target.value);
+                                        setToken(e.target.value);
+                                    }}
+                                    size="medium"
+                                    className="text-field-token"
+                                    style={{ maxWidth: "parent" }}
+                                />
+                                <Link
+                                    style={{ textAlign: "left" }}
+                                    onClick={updateToken}
+                                >
+                                    Update Token?
+                                </Link>
+                            </div>
+                            <TextField
+                                label="Email"
+                                value={localEmail}
+                                onChange={(e) => {
+                                    setLocalEmail(e.target.value);
+                                    setEmail(e.target.value);
+                                }}
+                                size="medium"
+                                className="text-field-email"
+                                style={{ width: "parent" }}
+                            />
+                        </div>
+                        <div className="fetch-button-container">
+                            <Button
+                                variant="contained"
+                                onClick={() => {
+                                    fetchData().catch((error: unknown) =>
+                                        console.error(
+                                            "Fetch data error:",
+                                            error,
+                                        ),
+                                    );
+                                }}
+                                className="fetch-button"
+                                style={{
+                                    padding: "0 16px",
+                                }}
+                            >
+                                FETCH
+                            </Button>
+                        </div>
                     </div>
-                </div>
-            </form>
+                </form>
+            </div>
             <div className="content-container">
                 {loading ? (
                     <CircularProgress
-                        sx={{ color: "black", marginTop: "200px" }}
+                        sx={{
+                            color: "black",
+                            top: "200px",
+                            position: "fixed",
+                        }}
                     />
                 ) : error ? (
                     <div className="error-message">{error}</div>