diff --git a/web/src/components/setting/AccountSection.tsx b/web/src/components/setting/AccountSection.tsx
index 2dc2773..b3242a7 100644
--- a/web/src/components/setting/AccountSection.tsx
+++ b/web/src/components/setting/AccountSection.tsx
@@ -11,10 +11,13 @@ const AccountSection: React.FC = () => {
 
   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">
+      <div className="mx-auto max-w-4xl w-full px-3 py-6 flex flex-col justify-start items-start space-y-2">
+        <p className="text-gray-400 mb-2">Account</p>
+        <p className="flex flex-row justify-start items-center">
+          <span className="mr-3 text-gray-500 font-mono">Nickname: </span>
+          {user.nickname}
+        </p>
+        <p className="flex flex-row justify-start items-center">
           <span className="mr-3 text-gray-500 font-mono">Email: </span>
           {user.email}
         </p>
diff --git a/web/src/components/setting/WorkspaceSection.tsx b/web/src/components/setting/WorkspaceSection.tsx
index ec8c928..f969d54 100644
--- a/web/src/components/setting/WorkspaceSection.tsx
+++ b/web/src/components/setting/WorkspaceSection.tsx
@@ -1,4 +1,4 @@
-import { Switch } from "@mui/joy";
+import { Checkbox } from "@mui/joy";
 import { useEffect, useState } from "react";
 import { getSystemStatus, upsertWorkspaceSetting } from "../../helpers/api";
 
@@ -20,9 +20,14 @@ const WorkspaceSection: React.FC = () => {
     <>
       <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 className="w-full flex flex-col justify-start items-start">
+          <Checkbox
+            className="font-medium"
+            label="Disable self-service signup"
+            checked={disallowSignUp}
+            onChange={(event) => handleDisallowSignUpChange(event.target.checked)}
+          />
+          <p className="mt-2 text-gray-500">Once disabled, other users cannot signup.</p>
         </div>
       </div>
     </>
diff --git a/web/src/pages/Auth.tsx b/web/src/pages/Auth.tsx
index b95459f..940553b 100644
--- a/web/src/pages/Auth.tsx
+++ b/web/src/pages/Auth.tsx
@@ -27,7 +27,7 @@ const Auth: React.FC = () => {
     setPassword(text);
   };
 
-  const handleSigninBtnsClick = async () => {
+  const handleSigninBtnClick = async () => {
     if (actionBtnLoadingState.isLoading) {
       return;
     }
@@ -50,7 +50,7 @@ const Auth: React.FC = () => {
     actionBtnLoadingState.setFinish();
   };
 
-  const handleSignupBtnsClick = async () => {
+  const handleSignupBtnClick = async () => {
     if (actionBtnLoadingState.isLoading) {
       return;
     }
@@ -95,10 +95,10 @@ const Auth: React.FC = () => {
             </div>
           </div>
           <div className="w-full flex flex-row justify-end items-center mt-4 space-x-2">
-            <Button variant="plain" disabled={actionBtnLoadingState.isLoading} onClick={() => handleSignupBtnsClick()}>
+            <Button variant="plain" disabled={actionBtnLoadingState.isLoading} onClick={() => handleSignupBtnClick()}>
               Sign up
             </Button>
-            <Button color="primary" disabled={actionBtnLoadingState.isLoading} onClick={() => handleSigninBtnsClick()}>
+            <Button color="primary" disabled={actionBtnLoadingState.isLoading} onClick={() => handleSigninBtnClick()}>
               Sign in
             </Button>
           </div>