diff --git a/web/src/App.tsx b/web/src/App.tsx
index 63f253a..9401f55 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -7,7 +7,7 @@ function App() {
   return (
     <CssVarsProvider>
       <RouterProvider router={router} />
-      <Toaster position="top-right" />
+      <Toaster position="top-center" />
     </CssVarsProvider>
   );
 }
diff --git a/web/src/components/Header.tsx b/web/src/components/Header.tsx
index 2201de9..47090e9 100644
--- a/web/src/components/Header.tsx
+++ b/web/src/components/Header.tsx
@@ -32,10 +32,10 @@ const Header: React.FC = () => {
             actions={
               <>
                 <Link
-                  to="/account"
+                  to="/setting"
                   className="w-full flex flex-row justify-start items-center px-3 leading-10 text-left cursor-pointer rounded whitespace-nowrap hover:bg-gray-100"
                 >
-                  <Icon.User className="w-4 h-auto mr-2" /> My Account
+                  <Icon.Settings className="w-4 h-auto mr-2" /> Setting
                 </Link>
                 <button
                   className="w-full flex flex-row justify-start items-center px-3 leading-10 text-left cursor-pointer rounded whitespace-nowrap hover:bg-gray-100"
diff --git a/web/src/components/setting/AccountSection.tsx b/web/src/components/setting/AccountSection.tsx
new file mode 100644
index 0000000..2dc2773
--- /dev/null
+++ b/web/src/components/setting/AccountSection.tsx
@@ -0,0 +1,38 @@
+import { Button } from "@mui/joy";
+import { useState } from "react";
+import { useAppSelector } from "../../stores";
+import ChangePasswordDialog from "../ChangePasswordDialog";
+import EditUserinfoDialog from "../EditUserinfoDialog";
+
+const AccountSection: React.FC = () => {
+  const user = useAppSelector((state) => state.user).user as User;
+  const [showEditUserinfoDialog, setShowEditUserinfoDialog] = useState<boolean>(false);
+  const [showChangePasswordDialog, setShowChangePasswordDialog] = useState<boolean>(false);
+
+  return (
+    <>
+      <div className="mx-auto max-w-4xl w-full px-3 py-6 flex flex-col justify-start items-start space-y-4">
+        <p className="text-gray-400">Account</p>
+        <p className="text-3xl my-2">{user.nickname}</p>
+        <p className="leading-8 flex flex-row justify-start items-center">
+          <span className="mr-3 text-gray-500 font-mono">Email: </span>
+          {user.email}
+        </p>
+        <div className="flex flex-row justify-start items-center gap-2">
+          <Button variant="outlined" color="neutral" onClick={() => setShowEditUserinfoDialog(true)}>
+            Edit
+          </Button>
+          <Button variant="outlined" color="neutral" onClick={() => setShowChangePasswordDialog(true)}>
+            Change password
+          </Button>
+        </div>
+      </div>
+
+      {showEditUserinfoDialog && <EditUserinfoDialog onClose={() => setShowEditUserinfoDialog(false)} />}
+
+      {showChangePasswordDialog && <ChangePasswordDialog onClose={() => setShowChangePasswordDialog(false)} />}
+    </>
+  );
+};
+
+export default AccountSection;
diff --git a/web/src/components/setting/WorkspaceSection.tsx b/web/src/components/setting/WorkspaceSection.tsx
new file mode 100644
index 0000000..ec8c928
--- /dev/null
+++ b/web/src/components/setting/WorkspaceSection.tsx
@@ -0,0 +1,32 @@
+import { Switch } from "@mui/joy";
+import { useEffect, useState } from "react";
+import { getSystemStatus, upsertWorkspaceSetting } from "../../helpers/api";
+
+const WorkspaceSection: React.FC = () => {
+  const [disallowSignUp, setDisallowSignUp] = useState<boolean>(false);
+
+  useEffect(() => {
+    getSystemStatus().then(({ data }) => {
+      setDisallowSignUp(data.disallowSignUp);
+    });
+  }, []);
+
+  const handleDisallowSignUpChange = async (value: boolean) => {
+    await upsertWorkspaceSetting("disallow-signup", JSON.stringify(value));
+    setDisallowSignUp(value);
+  };
+
+  return (
+    <>
+      <div className="mx-auto max-w-4xl w-full px-3 py-6 flex flex-col justify-start items-start space-y-4">
+        <p className="text-gray-400">Workspace settings</p>
+        <div className="w-full flex flex-row justify-between items-center">
+          <span>Allow sign up</span>
+          <Switch checked={disallowSignUp} onChange={(event) => handleDisallowSignUpChange(event.target.checked)} />
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default WorkspaceSection;
diff --git a/web/src/helpers/api.ts b/web/src/helpers/api.ts
index 8fcd0d0..50adfca 100644
--- a/web/src/helpers/api.ts
+++ b/web/src/helpers/api.ts
@@ -64,3 +64,10 @@ export function patchShortcut(shortcutPatch: ShortcutPatch) {
 export function deleteShortcutById(shortcutId: ShortcutId) {
   return axios.delete(`/api/v1/shortcut/${shortcutId}`);
 }
+
+export function upsertWorkspaceSetting(key: string, value: string) {
+  return axios.post(`/api/v1/workspace/setting`, {
+    key,
+    value,
+  });
+}
diff --git a/web/src/pages/Setting.tsx b/web/src/pages/Setting.tsx
new file mode 100644
index 0000000..76fd4bb
--- /dev/null
+++ b/web/src/pages/Setting.tsx
@@ -0,0 +1,17 @@
+import { useAppSelector } from "../stores";
+import AccountSection from "../components/setting/AccountSection";
+import WorkspaceSection from "../components/setting/WorkspaceSection";
+
+const Setting: React.FC = () => {
+  const user = useAppSelector((state) => state.user).user as User;
+  const isAdmin = user.role === "ADMIN";
+
+  return (
+    <div className="mx-auto max-w-4xl w-full px-3 py-6 flex flex-col justify-start items-start space-y-4">
+      <AccountSection />
+      {isAdmin && <WorkspaceSection />}
+    </div>
+  );
+};
+
+export default Setting;
diff --git a/web/src/routers/index.tsx b/web/src/routers/index.tsx
index 3210fc1..65b68f0 100644
--- a/web/src/routers/index.tsx
+++ b/web/src/routers/index.tsx
@@ -4,7 +4,7 @@ import { userService } from "../services";
 import Root from "../layouts/Root";
 import Auth from "../pages/Auth";
 import Home from "../pages/Home";
-import Account from "../pages/Account";
+import Setting from "../pages/Setting";
 
 const router = createBrowserRouter([
   {
@@ -33,8 +33,8 @@ const router = createBrowserRouter([
         },
       },
       {
-        path: "/account",
-        element: <Account />,
+        path: "/setting",
+        element: <Setting />,
         loader: async () => {
           try {
             await userService.initialState();
diff --git a/web/src/types/modules/system.d.ts b/web/src/types/modules/system.d.ts
index a48b06c..bc16037 100644
--- a/web/src/types/modules/system.d.ts
+++ b/web/src/types/modules/system.d.ts
@@ -5,4 +5,5 @@ interface Profile {
 
 interface SystemStatus {
   profile: Profile;
+  disallowSignUp: boolean;
 }