diff --git a/web/src/components/AuthFooter.tsx b/web/src/components/AuthFooter.tsx
new file mode 100644
index 00000000..d0849575
--- /dev/null
+++ b/web/src/components/AuthFooter.tsx
@@ -0,0 +1,28 @@
+import { observer } from "mobx-react-lite";
+import { workspaceStore } from "@/store/v2";
+import { cn } from "@/utils";
+import AppearanceSelect from "./AppearanceSelect";
+import LocaleSelect from "./LocaleSelect";
+
+interface Props {
+  className?: string;
+}
+
+const AuthFooter = observer(({ className }: Props) => {
+  const handleLocaleSelectChange = (locale: Locale) => {
+    workspaceStore.state.setPartial({ locale });
+  };
+
+  const handleAppearanceSelectChange = (appearance: Appearance) => {
+    workspaceStore.state.setPartial({ appearance });
+  };
+
+  return (
+    <div className={cn("mt-4 flex flex-row items-center justify-center w-full gap-2", className)}>
+      <LocaleSelect value={workspaceStore.state.locale} onChange={handleLocaleSelectChange} />
+      <AppearanceSelect value={workspaceStore.state.appearance as Appearance} onChange={handleAppearanceSelectChange} />
+    </div>
+  );
+});
+
+export default AuthFooter;
diff --git a/web/src/components/PasswordSignInForm.tsx b/web/src/components/PasswordSignInForm.tsx
index 99a1296d..eb36ef94 100644
--- a/web/src/components/PasswordSignInForm.tsx
+++ b/web/src/components/PasswordSignInForm.tsx
@@ -2,7 +2,7 @@ import { Button, Checkbox, Input } from "@usememos/mui";
 import { LoaderIcon } from "lucide-react";
 import { observer } from "mobx-react-lite";
 import { ClientError } from "nice-grpc-web";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { toast } from "react-hot-toast";
 import { authServiceClient } from "@/grpcweb";
 import useLoading from "@/hooks/useLoading";
@@ -15,17 +15,10 @@ const PasswordSignInForm = observer(() => {
   const t = useTranslate();
   const navigateTo = useNavigateTo();
   const actionBtnLoadingState = useLoading(false);
-  const [username, setUsername] = useState("");
-  const [password, setPassword] = useState("");
+  const [username, setUsername] = useState(workspaceStore.state.profile.mode === "demo" ? "yourselfhosted" : "");
+  const [password, setPassword] = useState(workspaceStore.state.profile.mode === "demo" ? "yourselfhosted" : "");
   const [remember, setRemember] = useState(true);
 
-  useEffect(() => {
-    if (workspaceStore.state.profile.mode === "demo") {
-      setUsername("yourselfhosted");
-      setPassword("yourselfhosted");
-    }
-  }, [workspaceStore.state.profile.mode]);
-
   const handleUsernameInputChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
     const text = e.target.value as string;
     setUsername(text);
diff --git a/web/src/components/UpdateAccountDialog.tsx b/web/src/components/UpdateAccountDialog.tsx
index 818a03d1..1eaa2fd1 100644
--- a/web/src/components/UpdateAccountDialog.tsx
+++ b/web/src/components/UpdateAccountDialog.tsx
@@ -22,7 +22,7 @@ interface State {
   description: string;
 }
 
-const UpdateAccountDialog: React.FC<Props> = ({ destroy }: Props) => {
+const UpdateAccountDialog = ({ destroy }: Props) => {
   const t = useTranslate();
   const currentUser = useCurrentUser();
   const [state, setState] = useState<State>({
diff --git a/web/src/components/UpdateCustomizedProfileDialog.tsx b/web/src/components/UpdateCustomizedProfileDialog.tsx
index 347b7e7f..64989e75 100644
--- a/web/src/components/UpdateCustomizedProfileDialog.tsx
+++ b/web/src/components/UpdateCustomizedProfileDialog.tsx
@@ -14,7 +14,7 @@ import LocaleSelect from "./LocaleSelect";
 
 type Props = DialogProps;
 
-const UpdateCustomizedProfileDialog: React.FC<Props> = ({ destroy }: Props) => {
+const UpdateCustomizedProfileDialog = ({ destroy }: Props) => {
   const t = useTranslate();
   const workspaceGeneralSetting = workspaceStore.state.generalSetting;
   const [customProfile, setCustomProfile] = useState<WorkspaceCustomProfile>(
diff --git a/web/src/pages/AdminSignIn.tsx b/web/src/pages/AdminSignIn.tsx
index 16093f85..25e64643 100644
--- a/web/src/pages/AdminSignIn.tsx
+++ b/web/src/pages/AdminSignIn.tsx
@@ -1,20 +1,10 @@
-import { observer } from "mobx-react-lite";
-import AppearanceSelect from "@/components/AppearanceSelect";
-import LocaleSelect from "@/components/LocaleSelect";
+import AuthFooter from "@/components/AuthFooter";
 import PasswordSignInForm from "@/components/PasswordSignInForm";
 import { workspaceStore } from "@/store/v2";
 
-const AdminSignIn = observer(() => {
+const AdminSignIn = () => {
   const workspaceGeneralSetting = workspaceStore.state.generalSetting;
 
-  const handleLocaleSelectChange = (locale: Locale) => {
-    workspaceStore.state.setPartial({ locale });
-  };
-
-  const handleAppearanceSelectChange = (appearance: Appearance) => {
-    workspaceStore.state.setPartial({ appearance });
-  };
-
   return (
     <div className="py-4 sm:py-8 w-80 max-w-full min-h-[100svh] mx-auto flex flex-col justify-start items-center">
       <div className="w-full py-4 grow flex flex-col justify-center items-center">
@@ -27,12 +17,9 @@ const AdminSignIn = observer(() => {
         <p className="w-full text-xl font-medium dark:text-gray-500">Sign in with admin accounts</p>
         <PasswordSignInForm />
       </div>
-      <div className="mt-4 flex flex-row items-center justify-center w-full gap-2">
-        <LocaleSelect value={workspaceStore.state.locale} onChange={handleLocaleSelectChange} />
-        <AppearanceSelect value={workspaceStore.state.appearance as Appearance} onChange={handleAppearanceSelectChange} />
-      </div>
+      <AuthFooter />
     </div>
   );
-});
+};
 
 export default AdminSignIn;
diff --git a/web/src/pages/SignIn.tsx b/web/src/pages/SignIn.tsx
index cffb52ec..ca5ff437 100644
--- a/web/src/pages/SignIn.tsx
+++ b/web/src/pages/SignIn.tsx
@@ -1,11 +1,9 @@
 import { Divider } from "@mui/joy";
 import { Button } from "@usememos/mui";
-import { observer } from "mobx-react-lite";
 import { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
 import { Link } from "react-router-dom";
-import AppearanceSelect from "@/components/AppearanceSelect";
-import LocaleSelect from "@/components/LocaleSelect";
+import AuthFooter from "@/components/AuthFooter";
 import PasswordSignInForm from "@/components/PasswordSignInForm";
 import { identityProviderServiceClient } from "@/grpcweb";
 import { absolutifyLink } from "@/helpers/utils";
@@ -16,7 +14,7 @@ import { workspaceStore } from "@/store/v2";
 import { IdentityProvider, IdentityProvider_Type } from "@/types/proto/api/v1/idp_service";
 import { useTranslate } from "@/utils/i18n";
 
-const SignIn = observer(() => {
+const SignIn = () => {
   const t = useTranslate();
   const currentUser = useCurrentUser();
   const [identityProviderList, setIdentityProviderList] = useState<IdentityProvider[]>([]);
@@ -38,14 +36,6 @@ const SignIn = observer(() => {
     fetchIdentityProviderList();
   }, []);
 
-  const handleLocaleSelectChange = (locale: Locale) => {
-    workspaceStore.state.setPartial({ locale });
-  };
-
-  const handleAppearanceSelectChange = (appearance: Appearance) => {
-    workspaceStore.state.setPartial({ appearance });
-  };
-
   const handleSignInWithIdentityProvider = async (identityProvider: IdentityProvider) => {
     const stateQueryParameter = `auth.signin.${identityProvider.title}-${extractIdentityProviderIdFromName(identityProvider.name)}`;
     if (identityProvider.type === IdentityProvider_Type.OAUTH2) {
@@ -105,12 +95,9 @@ const SignIn = observer(() => {
           </>
         )}
       </div>
-      <div className="mt-4 flex flex-row items-center justify-center w-full gap-2">
-        <LocaleSelect value={workspaceStore.state.locale} onChange={handleLocaleSelectChange} />
-        <AppearanceSelect value={workspaceStore.state.appearance as Appearance} onChange={handleAppearanceSelectChange} />
-      </div>
+      <AuthFooter />
     </div>
   );
-});
+};
 
 export default SignIn;
diff --git a/web/src/pages/SignUp.tsx b/web/src/pages/SignUp.tsx
index 19c05016..6f697af0 100644
--- a/web/src/pages/SignUp.tsx
+++ b/web/src/pages/SignUp.tsx
@@ -1,12 +1,10 @@
 import { Button, Input } from "@usememos/mui";
 import { LoaderIcon } from "lucide-react";
-import { observer } from "mobx-react-lite";
 import { ClientError } from "nice-grpc-web";
 import { useState } from "react";
 import { toast } from "react-hot-toast";
 import { Link } from "react-router-dom";
-import AppearanceSelect from "@/components/AppearanceSelect";
-import LocaleSelect from "@/components/LocaleSelect";
+import AuthFooter from "@/components/AuthFooter";
 import { authServiceClient } from "@/grpcweb";
 import useLoading from "@/hooks/useLoading";
 import useNavigateTo from "@/hooks/useNavigateTo";
@@ -14,7 +12,7 @@ import { workspaceStore } from "@/store/v2";
 import { initialUserStore } from "@/store/v2/user";
 import { useTranslate } from "@/utils/i18n";
 
-const SignUp = observer(() => {
+const SignUp = () => {
   const t = useTranslate();
   const navigateTo = useNavigateTo();
   const actionBtnLoadingState = useLoading(false);
@@ -32,14 +30,6 @@ const SignUp = observer(() => {
     setPassword(text);
   };
 
-  const handleLocaleSelectChange = (locale: Locale) => {
-    workspaceStore.state.setPartial({ locale });
-  };
-
-  const handleAppearanceSelectChange = (appearance: Appearance) => {
-    workspaceStore.state.setPartial({ appearance });
-  };
-
   const handleFormSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     handleSignUpButtonClick();
@@ -142,12 +132,9 @@ const SignUp = observer(() => {
           </p>
         )}
       </div>
-      <div className="mt-4 flex flex-row items-center justify-center w-full gap-2">
-        <LocaleSelect value={workspaceStore.state.locale} onChange={handleLocaleSelectChange} />
-        <AppearanceSelect value={workspaceStore.state.appearance as Appearance} onChange={handleAppearanceSelectChange} />
-      </div>
+      <AuthFooter />
     </div>
   );
-});
+};
 
 export default SignUp;