diff --git a/.vscode/settings.json b/.vscode/settings.json
index 8ec9748c..7701e083 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -25,5 +25,6 @@
   "emmet.triggerExpansionOnTab": true,
   "[javascript]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
-  }
+  },
+  "cSpell.words": ["btns", "rustchat"]
 }
diff --git a/package.json b/package.json
index 9e48f4d0..6ec85659 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rustchat-web",
-  "version": "0.2.14",
+  "version": "0.3.0",
   "private": true,
   "homepage": "https://privoce.rustchat.com",
   "dependencies": {
diff --git a/src/app/config.ts b/src/app/config.ts
index 449fc5b2..e8bbef97 100644
--- a/src/app/config.ts
+++ b/src/app/config.ts
@@ -1,6 +1,6 @@
 // const BASE_URL = `${location.origin}/api`;
 const BASE_URL = `https://dev.rustchat.com/api`;
-export const CACHE_VERSION = `0.2.17`;
+export const CACHE_VERSION = `0.3.0`;
 export const ContentTypes = {
   text: "text/plain",
   markdown: "text/markdown",
diff --git a/src/app/services/auth.ts b/src/app/services/auth.ts
index 357ee71f..10cc1fbf 100644
--- a/src/app/services/auth.ts
+++ b/src/app/services/auth.ts
@@ -135,6 +135,11 @@ export const authApi = createApi({
         url: `/token/metamask/nonce?public_address=${address}`
       })
     }),
+    checkEmail: builder.query({
+      query: (email) => ({
+        url: `/user/check_email?email=${encodeURIComponent(email)}`
+      })
+    }),
     getCredentials: builder.query({
       query: () => ({ url: "/token/credentials" })
     }),
@@ -164,6 +169,7 @@ export const authApi = createApi({
 });
 
 export const {
+  useLazyCheckEmailQuery,
   useGetInitializedQuery,
   useSendLoginMagicLinkMutation,
   useSendRegMagicLinkMutation,
diff --git a/src/app/services/base.query.ts b/src/app/services/base.query.ts
index 1e860575..8d65560f 100644
--- a/src/app/services/base.query.ts
+++ b/src/app/services/base.query.ts
@@ -9,6 +9,7 @@ const whiteList = [
   "register",
   "sendLoginMagicLink",
   "sendRegMagicLink",
+  "checkEmail",
   "checkMagicTokenValid",
   "getGoogleAuthConfig",
   "getGithubAuthConfig",
diff --git a/src/common/component/Manifest/index.tsx b/src/common/component/Manifest/index.tsx
index 379430a3..b771f060 100644
--- a/src/common/component/Manifest/index.tsx
+++ b/src/common/component/Manifest/index.tsx
@@ -3,7 +3,7 @@ import Prompt from "./Prompt";
 import usePrompt from "./usePrompt";
 
 export default function Manifest() {
-  const { setCanneled, prompted } = usePrompt();
+  const { setCanceled: setCanceled, prompted } = usePrompt();
   const deferredPromptRef = useRef(null);
   const [popup, setPopup] = useState(false);
   // const { data, isSuccess } = useGetServerQuery();
@@ -57,7 +57,7 @@ export default function Manifest() {
     deferredPromptRef.current = null;
   };
   const handleClose = async () => {
-    setCanneled();
+    setCanceled();
     setPopup(false);
   };
   if (!popup || prompted) return null;
diff --git a/src/common/component/Manifest/usePrompt.tsx b/src/common/component/Manifest/usePrompt.tsx
index 0278c069..6aeab206 100644
--- a/src/common/component/Manifest/usePrompt.tsx
+++ b/src/common/component/Manifest/usePrompt.tsx
@@ -10,7 +10,7 @@ export default function usePrompt() {
   };
 
   return {
-    setCanneled: setPrompt,
+    setCanceled: setPrompt,
     prompted: !!localStorage.getItem(KEY_PWA_INSTALLED),
     resetPrompt
   };
diff --git a/src/routes/reg/RegWithUsername.tsx b/src/routes/reg/RegWithUsername.tsx
index 126bcfa4..7221778c 100644
--- a/src/routes/reg/RegWithUsername.tsx
+++ b/src/routes/reg/RegWithUsername.tsx
@@ -14,10 +14,14 @@ import { useRegisterMutation } from "../../app/services/auth";
 export default function RegWithUsername() {
   const [checkTokenInvalid, { data: isTokenValid, isLoading: checkingToken }] =
     useCheckMagicTokenValidMutation();
-  const [login, { isLoading: loginLoading, error, isSuccess: loginSuccess, data: loginData }] =
-    useLoginMutation();
-  const [register, { isLoading: regLoading, isSuccess: regSuccess, data: regData }] =
-    useRegisterMutation();
+  const [
+    login,
+    { isLoading: loginLoading, error: loginError, isSuccess: loginSuccess, data: loginData }
+  ] = useLoginMutation();
+  const [
+    register,
+    { isLoading: regLoading, isSuccess: regSuccess, data: regData, error: regError }
+  ] = useRegisterMutation();
   // const navigateTo = useNavigate();
   const { from = "reg" } = useParams();
   const dispatch = useDispatch();
@@ -32,8 +36,7 @@ export default function RegWithUsername() {
   }, [token]);
 
   useEffect(() => {
-    console.log("errr", error);
-    switch (error?.status) {
+    switch (loginError?.status) {
       case 401:
         toast.error("Invalided Token");
         break;
@@ -41,7 +44,17 @@ export default function RegWithUsername() {
       default:
         break;
     }
-  }, [error]);
+  }, [loginError]);
+  useEffect(() => {
+    switch (regError?.status) {
+      case 409:
+        toast.error("Something Conflicted!");
+        break;
+
+      default:
+        break;
+    }
+  }, [regError]);
   useEffect(() => {
     const isSuccess = loginSuccess || regSuccess;
     const data = loginData || regData;
@@ -74,6 +87,7 @@ export default function RegWithUsername() {
     const { value } = evt.target;
     setUsername(value);
   };
+  console.log("ffff", from);
   if (!token) return "No Token";
   if (checkingToken) return "Checking Magic Link...";
   if (!isTokenValid) return <ExpiredTip />;
diff --git a/src/routes/reg/Register.tsx b/src/routes/reg/Register.tsx
index 8d42dcfa..8f6c64a0 100644
--- a/src/routes/reg/Register.tsx
+++ b/src/routes/reg/Register.tsx
@@ -1,13 +1,23 @@
-import { useState, useEffect, FormEvent, ChangeEvent } from "react";
-import { useNavigate } from "react-router-dom";
+import { useState, useEffect } from "react";
+import toast from "react-hot-toast";
+// import { useNavigate } from "react-router-dom";
+import BASE_URL from "../../app/config";
 import Input from "../../common/component/styled/Input";
 import Button from "../../common/component/styled/Button";
-import { useSendRegMagicLinkMutation } from "../../app/services/auth";
+import { useLazyCheckEmailQuery, useSendRegMagicLinkMutation } from "../../app/services/auth";
 import EmailNextTip from "./EmailNextStepTip";
+import SignInLink from "./SignInLink";
+import { useGetLoginConfigQuery } from "../../app/services/server";
+import useGithubAuthConfig from "../../common/hook/useGithubAuthConfig";
+import useGoogleAuthConfig from "../../common/hook/useGoogleAuthConfig";
+import GoogleLoginButton from "../../common/component/GoogleLoginButton";
+import GithubLoginButton from "../../common/component/GithubLoginButton";
 
 export default function Reg() {
-  const [sendRegMagicLink, { isLoading, data, isSuccess }] = useSendRegMagicLinkMutation();
-  const navigateTo = useNavigate();
+  const [sendRegMagicLink, { isLoading: signingUp, data, isSuccess }] =
+    useSendRegMagicLinkMutation();
+  const [checkEmail, { isLoading: checkingEmail }] = useLazyCheckEmailQuery();
+  // const navigateTo = useNavigate();
   const [magicToken, setMagicToken] = useState("");
   const [input, setInput] = useState({
     email: "",
@@ -29,23 +39,39 @@ export default function Reg() {
       const { new_magic_token, mail_is_sent } = data;
       if (!mail_is_sent && new_magic_token) {
         // 直接进入set_name流程
-        navigateTo(`?magic_token=${new_magic_token}#/register/set_name`);
+        location.href = `?magic_token=${new_magic_token}#/register/set_name`;
+        // navigateTo(`/register/set_name?magic_token=${new_magic_token}`);
       }
     }
   }, [isSuccess, data]);
 
-  const handleReg = (evt: FormEvent<HTMLFormElement>) => {
+  const handleReg = async (evt) => {
     evt.preventDefault();
-    const { email, password } = input;
-    sendRegMagicLink({
-      magic_token: magicToken,
-      email,
-      password
-    });
+    const { email, password, confirmPassword } = input;
+    if (password !== confirmPassword) {
+      toast.error("Not Same Password!");
+      return;
+    }
+    const { data: canReg } = await checkEmail(email);
+    console.log("can reg", canReg);
+    if (canReg) {
+      sendRegMagicLink({
+        magic_token: magicToken,
+        email,
+        password
+      });
+    } else {
+      toast.error("Email already registered!");
+    }
     // sendMagicLink(email);
   };
-
-  const handleInput = (evt: ChangeEvent<HTMLInputElement>) => {
+  const handleCompare = () => {
+    const { password, confirmPassword } = input;
+    if (password !== confirmPassword) {
+      toast.error("Not Same Password!");
+    }
+  };
+  const handleInput = (evt) => {
     const { type } = evt.target.dataset;
     const { value } = evt.target;
     // console.log(type, value);
@@ -54,33 +80,67 @@ export default function Reg() {
       return { ...prev };
     });
   };
-
-  const { email, password } = input;
+  const { clientId } = useGoogleAuthConfig();
+  const { config: githubAuthConfig } = useGithubAuthConfig();
+  const { data: loginConfig, isSuccess: loginConfigSuccess } = useGetLoginConfigQuery();
+  if (!loginConfigSuccess) return null;
+  const {
+    github: enableGithubLogin,
+    google: enableGoogleLogin,
+    who_can_sign_up: whoCanSignUp
+  } = loginConfig;
+  const googleLogin = enableGoogleLogin && clientId;
+  // 没有开放注册
+  if (whoCanSignUp !== "EveryOne") return `Open Register is Closed!`;
+  const { email, password, confirmPassword } = input;
   if (data?.mail_is_sent) return <EmailNextTip />;
+  const isLoading = signingUp || checkingEmail;
   return (
-    <form onSubmit={handleReg}>
-      <Input
-        className="large"
-        name="email"
-        value={email}
-        required
-        placeholder="Enter your email"
-        data-type="email"
-        onChange={handleInput}
-      />
-      <Input
-        className="large"
-        type="password"
-        value={password}
-        name="password"
-        required
-        data-type="password"
-        onChange={handleInput}
-        placeholder="Enter your password"
-      />
-      <Button type="submit" disabled={isLoading}>
-        {isLoading ? "Signing Up" : `Sign Up`}
-      </Button>
-    </form>
+    <>
+      <div className="tips">
+        <img src={`${BASE_URL}/resource/organization/logo`} alt="logo" className="logo" />
+        <h2 className="title">Sign Up to Rustchat</h2>
+        <span className="desc">Please enter your details.</span>
+      </div>
+
+      <form onSubmit={handleReg} autoSave={"false"} autoComplete={"true"}>
+        <Input
+          className="large"
+          name="email"
+          value={email}
+          required
+          placeholder="Enter email"
+          data-type="email"
+          onChange={handleInput}
+        />
+        <Input
+          className="large"
+          type="password"
+          value={password}
+          name="password"
+          required
+          data-type="password"
+          onChange={handleInput}
+          placeholder="Enter password"
+        />
+        <Input
+          required
+          onBlur={handleCompare}
+          type="password"
+          name={"confirmPassword"}
+          value={confirmPassword}
+          data-type="confirmPassword"
+          onChange={handleInput}
+          placeholder="Confirm Password"
+        ></Input>
+        <Button type="submit" disabled={isLoading}>
+          {isLoading ? "Signing Up" : `Sign Up`}
+        </Button>
+      </form>
+      <hr className="or" />
+      {googleLogin && <GoogleLoginButton clientId={clientId} />}
+      {enableGithubLogin && <GithubLoginButton config={githubAuthConfig} />}
+      <SignInLink />
+    </>
   );
 }
diff --git a/src/routes/reg/index.tsx b/src/routes/reg/index.tsx
index 2e80dcfe..e7f7bf37 100644
--- a/src/routes/reg/index.tsx
+++ b/src/routes/reg/index.tsx
@@ -1,49 +1,15 @@
 import { Outlet } from "react-router-dom";
-import { useMatch } from "react-router-dom";
-import BASE_URL from "../../app/config";
-import SignInLink from "./SignInLink";
-import { useGetLoginConfigQuery } from "../../app/services/server";
-import useGithubAuthConfig from "../../common/hook/useGithubAuthConfig";
-import useGoogleAuthConfig from "../../common/hook/useGoogleAuthConfig";
-import GoogleLoginButton from "../../common/component/GoogleLoginButton";
-import GithubLoginButton from "../../common/component/GithubLoginButton";
+// import { useMatch } from "react-router-dom";
+
 import StyledWrapper from "./styled";
 
-export default function Reg() {
-  const isRegHome = useMatch(`/register`);
-  const { clientId } = useGoogleAuthConfig();
-  const { config: githubAuthConfig } = useGithubAuthConfig();
-  const { data: loginConfig, isSuccess: loginConfigSuccess } = useGetLoginConfigQuery();
-  if (!loginConfigSuccess) return null;
-  const {
-    github: enableGithubLogin,
-    google: enableGoogleLogin,
-    who_can_sign_up: whoCanSignUp
-  } = loginConfig;
-  const googleLogin = enableGoogleLogin && clientId;
-  // 没有开放注册
-  if (whoCanSignUp !== "EveryOne") return `Open Register is Closed!`;
+export default function RegContainer() {
+  // const isRegHome = useMatch(`/register`);
+
   return (
     <StyledWrapper>
       <div className="form">
-        {isRegHome && (
-          <>
-            <div className="tips">
-              <img src={`${BASE_URL}/resource/organization/logo`} alt="logo" className="logo" />
-              <h2 className="title">Sign Up to Rustchat</h2>
-              <span className="desc">Please enter your details.</span>
-            </div>
-          </>
-        )}
         <Outlet />
-        {isRegHome && (
-          <>
-            <hr className="or" />
-            {googleLogin && <GoogleLoginButton clientId={clientId} />}
-            {enableGithubLogin && <GithubLoginButton config={githubAuthConfig} />}
-            <SignInLink />
-          </>
-        )}
       </div>
     </StyledWrapper>
   );
diff --git a/src/routes/resources/index.tsx b/src/routes/resources/index.tsx
index ffd6d248..1f39a21e 100644
--- a/src/routes/resources/index.tsx
+++ b/src/routes/resources/index.tsx
@@ -35,7 +35,7 @@ const checkFilter = (data, filter, channelMessage) => {
   return selected;
 };
 
-let msnry = null;
+let msnry: typeof Masonry | null;
 function ResourceManagement({ fileMessages }) {
   const listContainerRef = useRef(null);
   const [filter, setFilter] = useState({});