diff --git a/public/locales/en-US/application.json b/public/locales/en-US/application.json
index d2b9c0a..06c40ac 100644
--- a/public/locales/en-US/application.json
+++ b/public/locales/en-US/application.json
@@ -348,5 +348,58 @@
     "transferring": "Finished, transfer pending in queue",
     "deleteRecord": "Delete record",
     "createdAt": "Created at: "
+  },
+  "setting": {
+    "avatarUpdated": "The avatar has been updated and will take effect after refreshing.",
+    "nickChanged": "Nickname changed and will take effect after refreshing.",
+    "settingSaved": "Setting saved.",
+    "themeColorChanged": "Theme color changed.",
+    "profile": "Profile",
+    "avatar": "Avatar",
+    "uid": "UID",
+    "nickname": "Nickname",
+    "group": "Group",
+    "regTime": "Sign in date",
+    "privacyAndSecurity": "Privacy and security",
+    "profilePage": "Public profile",
+    "accountPassword": "Password",
+    "2fa": "2FA authentication",
+    "enabled": "Enabled",
+    "disabled": "Disabled",
+    "appearance": "Appearance",
+    "themeColor": "Theme color",
+    "darkMode": "Dark mode",
+    "syncWithSystem": "Sync with system",
+    "fileList": "File list",
+    "timeZone": "Timezone",
+    "webdavServer": "Server",
+    "userName": "Username",
+    "manageAccount": "Manage accounts",
+    "uploadImage": "Upload from file",
+    "useGravatar": "Use Gravatar ",
+    "changeNick": "Change nickname",
+    "originalPassword": "Original password",
+    "enable2FA": "Enable 2FA authentication",
+    "disable2FA": "Disable 2FA authentication",
+    "2faDescription": "Please use any 2FA mobile app or password management software that supports 2FA to scan the QR code on the left to add this site. After scanning, please fill in the 6-digit verification code given by the 2FA app to enable 2FA.",
+    "inputCurrent2FACode": "Enter current 2FA verification code.",
+    "timeZoneCode": "IANA timezone code",
+    "authenticatorRemoved": "Authenticator removed.",
+    "authenticatorAdded": "Authenticator added.",
+    "browserNotSupported": "Not supported by current browser or environment.",
+    "removedAuthenticator": "Remove authenticator",
+    "removedAuthenticatorConfirm": "Are you sure to remove this authenticator？",
+    "addNewAuthenticator": "Add a authenticator",
+    "hardwareAuthenticator": "Hardware authenticator",
+    "copied": "Copied to clipboard.",
+    "pleaseManuallyCopy": "Current browser does not support, please copy manually.",
+    "webdavAccounts": "WebDAV Accounts",
+    "webdavHint": "WebDAV server: {{url}}; Username: {{name}} ; The password is the password of the created account below.",
+    "annotation": "Annotation",
+    "rootFolder": "Relative root folder",
+    "createdAt": "Created at",
+    "action": "Action",
+    "listEmpty": "No records.",
+    "createNewAccount": "Create new account"
   }
 }
\ No newline at end of file
diff --git a/public/locales/zh-CN/application.json b/public/locales/zh-CN/application.json
index 2008436..76cc356 100644
--- a/public/locales/zh-CN/application.json
+++ b/public/locales/zh-CN/application.json
@@ -11,7 +11,7 @@
     "usePassword": "使用密码登录",
     "forgetPassword": "忘记密码",
     "2FA": "二步验证",
-    "input2FACode": "请输入六位二步验证代码",
+    "input2FACode": "请输入 6 位二步验证代码",
     "passwordNotMatch": "两次密码输入不一致",
     "findMyPassword": "找回密码",
     "passwordReset": "密码已重设",
@@ -89,9 +89,9 @@
     "newFolder": "创建文件夹",
     "newFile": "创建文件",
     "showFullPath": "显示路径",
-    "listView": "列表展示",
-    "gridViewSmall": "小图标展示",
-    "gridViewLarge": "大图标展示",
+    "listView": "列表",
+    "gridViewSmall": "小图标",
+    "gridViewLarge": "大图标",
     "paginationSize": "分页大小",
     "paginationOption": "{{option}} / 页",
     "noPagination": "不分页",
@@ -338,5 +338,58 @@
     "transferring": "已完成，转存排队中",
     "deleteRecord": "删除记录",
     "createdAt": "创建日期："
+  },
+  "setting": {
+    "avatarUpdated": "头像已更新，刷新后生效",
+    "nickChanged": "昵称已更改，刷新后生效",
+    "settingSaved": "设置已保存",
+    "themeColorChanged": "主题配色已更换",
+    "profile": "个人资料",
+    "avatar": "头像",
+    "uid": "UID",
+    "nickname": "昵称",
+    "group": "用户组",
+    "regTime": "注册时间",
+    "privacyAndSecurity": "安全隐私",
+    "profilePage": "个人主页",
+    "accountPassword": "登录密码",
+    "2fa": "二步验证",
+    "enabled": "已开启",
+    "disabled": "未开启",
+    "appearance": "个性化",
+    "themeColor": "主题配色",
+    "darkMode": "黑暗模式",
+    "syncWithSystem": "跟随系统",
+    "fileList": "文件列表",
+    "timeZone": "时区",
+    "webdavServer": "连接地址",
+    "userName": "用户名",
+    "manageAccount": "账号管理",
+    "uploadImage": "从文件上传",
+    "useGravatar": "使用 Gravatar 头像 ",
+    "changeNick": "修改昵称",
+    "originalPassword": "原密码",
+    "enable2FA": "启用二步验证",
+    "disable2FA": "关闭二步验证",
+    "2faDescription": "请使用任意二步验证APP或者支持二步验证的密码管理软件扫描左侧二维码添加本站。扫描完成后请填写二步验证APP给出的6位验证码以开启二步验证。",
+    "inputCurrent2FACode": "请验证当前二步验证代码。",
+    "timeZoneCode": "IANA 时区名称标识",
+    "authenticatorRemoved": "凭证已删除",
+    "authenticatorAdded": "验证器已添加",
+    "browserNotSupported": "当前浏览器或环境不支持",
+    "removedAuthenticator": "删除凭证",
+    "removedAuthenticatorConfirm": "确定要吊销这个凭证吗？",
+    "addNewAuthenticator": "添加新验证器",
+    "hardwareAuthenticator": "外部认证器",
+    "copied": "已复制到剪切板",
+    "pleaseManuallyCopy": "当前浏览器不支持，请手动复制",
+    "webdavAccounts": "WebDAV 账号管理",
+    "webdavHint": "WebDAV的地址为：{{url}}；登录用户名统一为：{{name}} ；密码为所创建账号的密码。",
+    "annotation": "备注名",
+    "rootFolder": "相对根目录",
+    "createdAt": "创建日期",
+    "action": "操作",
+    "listEmpty": "没有记录",
+    "createNewAccount": "创建新账号"
   }
 }
\ No newline at end of file
diff --git a/src/App.js b/src/App.js
index b83265c..26bee65 100644
--- a/src/App.js
+++ b/src/App.js
@@ -69,6 +69,11 @@ export default function App() {
                         textTransform: "none",
                     },
                 },
+                MuiTab: {
+                    root: {
+                        textTransform: "none",
+                    },
+                },
             },
         });
         changeThemeColor(
@@ -232,11 +237,13 @@ export default function App() {
                             </Route>
 
                             <Route path="*">
-                                <NotFound  msg={t("pageNotFound", { ns: "common" })} />
+                                <NotFound
+                                    msg={t("pageNotFound", { ns: "common" })}
+                                />
                             </Route>
                         </Switch>
                     </main>
-                    <MusicPlayer/>
+                    <MusicPlayer />
                 </div>
             </ThemeProvider>
         </React.Fragment>
diff --git a/src/component/Modals/CreateWebDAVAccount.js b/src/component/Modals/CreateWebDAVAccount.js
index 8d64402..a82d136 100644
--- a/src/component/Modals/CreateWebDAVAccount.js
+++ b/src/component/Modals/CreateWebDAVAccount.js
@@ -1,12 +1,13 @@
 import React, { useState } from "react";
-import { makeStyles } from "@material-ui/core";
-import { Dialog } from "@material-ui/core";
+import { Dialog, makeStyles } from "@material-ui/core";
 import DialogTitle from "@material-ui/core/DialogTitle";
 import DialogActions from "@material-ui/core/DialogActions";
 import Button from "@material-ui/core/Button";
 import TextField from "@material-ui/core/TextField";
 import { FolderOpenOutlined, LabelOutlined } from "@material-ui/icons";
 import PathSelector from "../FileManager/PathSelector";
+import { useTranslation } from "react-i18next";
+
 const useStyles = makeStyles((theme) => ({
     formGroup: {
         display: "flex",
@@ -32,6 +33,7 @@ const useStyles = makeStyles((theme) => ({
 }));
 
 export default function CreateWebDAVAccount(props) {
+    const { t } = useTranslation();
     const [value, setValue] = useState({
         name: "",
         path: "/",
@@ -77,7 +79,9 @@ export default function CreateWebDAVAccount(props) {
                 onClose={() => setPathSelectDialog(false)}
                 aria-labelledby="form-dialog-title"
             >
-                <DialogTitle id="form-dialog-title">选择目录</DialogTitle>
+                <DialogTitle id="form-dialog-title">
+                    {t("navbar.addTagDialog.selectFolder")}
+                </DialogTitle>
                 <PathSelector
                     presentPath="/"
                     selected={[]}
@@ -86,14 +90,14 @@ export default function CreateWebDAVAccount(props) {
 
                 <DialogActions>
                     <Button onClick={() => setPathSelectDialog(false)}>
-                        取消
+                        {t("cancel", { ns: "common" })}
                     </Button>
                     <Button
                         onClick={selectPath}
                         color="primary"
                         disabled={selectedPath === ""}
                     >
-                        确定
+                        {t("ok", { ns: "common" })}
                     </Button>
                 </DialogActions>
             </Dialog>
@@ -108,7 +112,7 @@ export default function CreateWebDAVAccount(props) {
                             className={classes.input}
                             value={value.name}
                             onChange={handleInputChange("name")}
-                            label="备注名"
+                            label={t("setting.annotation")}
                         />
                     </div>
                     <div className={classes.formGroup}>
@@ -120,7 +124,7 @@ export default function CreateWebDAVAccount(props) {
                                 value={value.path}
                                 onChange={handleInputChange("path")}
                                 className={classes.input}
-                                label="相对根目录"
+                                label={t("setting.rootFolder")}
                             />
                             <br />
                             <Button
@@ -128,20 +132,22 @@ export default function CreateWebDAVAccount(props) {
                                 color="primary"
                                 onClick={() => setPathSelectDialog(true)}
                             >
-                                选择目录
+                                {t("navbar.addTagDialog.selectFolder")}
                             </Button>
                         </div>
                     </div>
                 </div>
             </div>
             <DialogActions>
-                <Button onClick={props.onClose}>取消</Button>
+                <Button onClick={props.onClose}>
+                    {t("cancel", { ns: "common" })}
+                </Button>
                 <Button
                     disabled={value.path === "" || value.name === ""}
                     color="primary"
                     onClick={() => props.callback(value)}
                 >
-                    确定
+                    {t("ok", { ns: "common" })}
                 </Button>
             </DialogActions>
         </Dialog>
diff --git a/src/component/Modals/TimeZone.js b/src/component/Modals/TimeZone.js
index dbb5a13..2459f85 100644
--- a/src/component/Modals/TimeZone.js
+++ b/src/component/Modals/TimeZone.js
@@ -1,20 +1,15 @@
-import React, { useState, useCallback, useEffect } from "react";
-import { FormLabel, makeStyles } from "@material-ui/core";
+import React, { useCallback, useState } from "react";
 import {
     Button,
+    CircularProgress,
     Dialog,
     DialogActions,
     DialogContent,
     DialogTitle,
-    DialogContentText,
-    CircularProgress,
+    makeStyles,
 } from "@material-ui/core";
-import PathSelector from "../FileManager/PathSelector";
 import { useDispatch } from "react-redux";
-import API from "../../middleware/Api";
 import TextField from "@material-ui/core/TextField";
-import Select from "@material-ui/core/Select";
-import MenuItem from "@material-ui/core/MenuItem";
 import {
     refreshTimeZone,
     timeZone,
@@ -22,11 +17,13 @@ import {
 } from "../../utils/datetime";
 import FormControl from "@material-ui/core/FormControl";
 import Auth from "../../middleware/Auth";
-import { setModalsLoading, toggleSnackbar } from "../../redux/explorer";
+import { toggleSnackbar } from "../../redux/explorer";
+import { useTranslation } from "react-i18next";
 
 const useStyles = makeStyles((theme) => ({}));
 
 export default function TimeZoneDialog(props) {
+    const { t } = useTranslation();
     const [timeZoneValue, setTimeZoneValue] = useState(timeZone);
     const dispatch = useDispatch();
     const ToggleSnackbar = useCallback(
@@ -53,12 +50,14 @@ export default function TimeZoneDialog(props) {
             onClose={props.onClose}
             aria-labelledby="form-dialog-title"
         >
-            <DialogTitle id="form-dialog-title">更改时区</DialogTitle>
+            <DialogTitle id="form-dialog-title">
+                {t("setting.timeZone")}
+            </DialogTitle>
 
             <DialogContent>
                 <FormControl>
                     <TextField
-                        label={"IANA 时区名称标识"}
+                        label={t("setting.timeZoneCode")}
                         value={timeZoneValue}
                         onChange={(e) => setTimeZoneValue(e.target.value)}
                     />
@@ -66,14 +65,16 @@ export default function TimeZoneDialog(props) {
             </DialogContent>
 
             <DialogActions>
-                <Button onClick={props.onClose}>取消</Button>
+                <Button onClick={props.onClose}>
+                    {t("cancel", { ns: "common" })}
+                </Button>
                 <div className={classes.wrapper}>
                     <Button
                         color="primary"
                         disabled={timeZoneValue === ""}
                         onClick={() => saveZoneInfo()}
                     >
-                        确定
+                        {t("ok", { ns: "common" })}
                         {props.modalsLoading && (
                             <CircularProgress
                                 size={24}
diff --git a/src/component/Setting/Authn.js b/src/component/Setting/Authn.js
index 8120939..9f9e942 100644
--- a/src/component/Setting/Authn.js
+++ b/src/component/Setting/Authn.js
@@ -1,4 +1,4 @@
-import React, { useState, useCallback } from "react";
+import React, { useCallback, useState } from "react";
 import {
     Button,
     Dialog,
@@ -21,6 +21,7 @@ import { Add, Fingerprint, HighlightOff } from "@material-ui/icons";
 import API from "../../middleware/Api";
 import { bufferDecode, bufferEncode } from "../../utils";
 import { toggleSnackbar } from "../../redux/explorer";
+import { useTranslation } from "react-i18next";
 
 const useStyles = makeStyles((theme) => ({
     sectionTitle: {
@@ -47,6 +48,7 @@ const useStyles = makeStyles((theme) => ({
 }));
 
 export default function Authn(props) {
+    const { t } = useTranslation();
     const [selected, setSelected] = useState("");
     const [confirm, setConfirm] = useState(false);
     const dispatch = useDispatch();
@@ -61,7 +63,12 @@ export default function Authn(props) {
             id: id,
         })
             .then(() => {
-                ToggleSnackbar("top", "right", "凭证已删除", "success");
+                ToggleSnackbar(
+                    "top",
+                    "right",
+                    t("setting.authenticatorRemoved"),
+                    "success"
+                );
                 props.remove(id);
             })
             .catch((error) => {
@@ -76,7 +83,12 @@ export default function Authn(props) {
 
     const addCredential = () => {
         if (!navigator.credentials) {
-            ToggleSnackbar("top", "right", "当前浏览器或环境不支持", "warning");
+            ToggleSnackbar(
+                "top",
+                "right",
+                t("setting.browserNotSupported"),
+                "warning"
+            );
 
             return;
         }
@@ -129,7 +141,12 @@ export default function Authn(props) {
             })
             .then((response) => {
                 props.add(response.data);
-                ToggleSnackbar("top", "right", "验证器已添加", "success");
+                ToggleSnackbar(
+                    "top",
+                    "right",
+                    t("setting.authenticatorAdded"),
+                    "success"
+                );
                 return;
             })
             .catch((error) => {
@@ -141,23 +158,25 @@ export default function Authn(props) {
     return (
         <div>
             <Dialog open={confirm} onClose={() => setConfirm(false)}>
-                <DialogTitle>删除凭证</DialogTitle>
-                <DialogContent>确定要吊销这个凭证吗？</DialogContent>
+                <DialogTitle>{t("setting.removedAuthenticator")}</DialogTitle>
+                <DialogContent>
+                    {t("setting.removedAuthenticatorConfirm")}
+                </DialogContent>
                 <DialogActions>
                     <Button onClick={() => setConfirm(false)} color="default">
-                        取消
+                        {t("cancel", { ns: "common" })}
                     </Button>
                     <Button
                         onClick={() => deleteCredential(selected)}
                         color="primary"
                     >
-                        确定
+                        {t("ok", { ns: "common" })}
                     </Button>
                 </DialogActions>
             </Dialog>
 
             <Typography className={classes.sectionTitle} variant="subtitle2">
-                外部认证器
+                {t("setting.hardwareAuthenticator")}
             </Typography>
             <Paper>
                 <List className={classes.desenList}>
@@ -194,7 +213,9 @@ export default function Authn(props) {
                         <ListItemIcon className={classes.iconFix}>
                             <Add />
                         </ListItemIcon>
-                        <ListItemText primary="添加新验证器" />
+                        <ListItemText
+                            primary={t("setting.addNewAuthenticator")}
+                        />
 
                         <ListItemSecondaryAction
                             className={classes.flexContainer}
diff --git a/src/component/Setting/UserSetting.js b/src/component/Setting/UserSetting.js
index 37a7950..9689e56 100644
--- a/src/component/Setting/UserSetting.js
+++ b/src/component/Setting/UserSetting.js
@@ -59,6 +59,7 @@ import {
     toggleDaylightMode,
     toggleSnackbar,
 } from "../../redux/explorer";
+import { Trans, withTranslation } from "react-i18next";
 
 const styles = (theme) => ({
     layout: {
@@ -94,10 +95,22 @@ const styles = (theme) => ({
     },
     infoText: {
         marginRight: "17px",
+        [theme.breakpoints.down("xs")]: {
+            maxWidth: 100,
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap",
+            overflow: "hidden",
+        },
     },
     infoTextWithIcon: {
         marginRight: "17px",
         marginTop: "1px",
+        [theme.breakpoints.down("xs")]: {
+            maxWidth: 100,
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap",
+            overflow: "hidden",
+        },
     },
     rightIconWithText: {
         marginTop: "0px",
@@ -285,7 +298,7 @@ class UserSettingCompoment extends Component {
                 this.props.toggleSnackbar(
                     "top",
                     "right",
-                    "头像已更新，刷新后生效",
+                    this.props.t("setting.avatarUpdated"),
                     "success"
                 );
                 this.setState({
@@ -316,7 +329,7 @@ class UserSettingCompoment extends Component {
                 this.props.toggleSnackbar(
                     "top",
                     "right",
-                    "昵称已更改，刷新后生效",
+                    this.props.t("nickChanged"),
                     "success"
                 );
                 this.setState({
@@ -352,7 +365,7 @@ class UserSettingCompoment extends Component {
                 this.props.toggleSnackbar(
                     "top",
                     "right",
-                    "头像已更新，刷新后生效",
+                    this.props.t("setting.avatarUpdated"),
                     "success"
                 );
                 this.setState({
@@ -380,7 +393,7 @@ class UserSettingCompoment extends Component {
                 this.props.toggleSnackbar(
                     "top",
                     "right",
-                    "设置已保存",
+                    this.props.t("setting.settingSaved"),
                     "success"
                 );
                 this.setState({
@@ -405,7 +418,7 @@ class UserSettingCompoment extends Component {
             this.props.toggleSnackbar(
                 "top",
                 "right",
-                "两次密码输入不一致",
+                this.props.t("login.passwordNotMatch"),
                 "warning"
             );
             return;
@@ -421,7 +434,7 @@ class UserSettingCompoment extends Component {
                 this.props.toggleSnackbar(
                     "top",
                     "right",
-                    "密码已更新",
+                    this.props.t("login.passwordReset"),
                     "success"
                 );
                 this.setState({
@@ -453,7 +466,7 @@ class UserSettingCompoment extends Component {
                 this.props.toggleSnackbar(
                     "top",
                     "right",
-                    "主题配色已更换",
+                    this.props.t("setting.themeColorChanged"),
                     "success"
                 );
                 this.props.applyThemes(this.state.chosenTheme);
@@ -552,7 +565,7 @@ class UserSettingCompoment extends Component {
                 this.props.toggleSnackbar(
                     "top",
                     "right",
-                    "设定已保存",
+                    this.props.t("setting.settingSaved"),
                     "success"
                 );
                 this.setState({
@@ -591,7 +604,7 @@ class UserSettingCompoment extends Component {
     };
 
     render() {
-        const { classes } = this.props;
+        const { classes, t } = this.props;
         const user = Auth.GetUser();
         const dark = Auth.GetPreference("theme_mode");
 
@@ -602,7 +615,7 @@ class UserSettingCompoment extends Component {
                         className={classes.sectionTitle}
                         variant="subtitle2"
                     >
-                        个人资料
+                        {t("setting.profile")}
                     </Typography>
                     <Paper>
                         <List className={classes.desenList}>
@@ -621,7 +634,7 @@ class UserSettingCompoment extends Component {
                                         }
                                     />
                                 </ListItemAvatar>
-                                <ListItemText primary="头像" />
+                                <ListItemText primary={t("setting.avatar")} />
                                 <ListItemSecondaryAction>
                                     <RightIcon className={classes.rightIcon} />
                                 </ListItemSecondaryAction>
@@ -631,7 +644,7 @@ class UserSettingCompoment extends Component {
                                 <ListItemIcon className={classes.iconFix}>
                                     <PermContactCalendar />
                                 </ListItemIcon>
-                                <ListItemText primary="UID" />
+                                <ListItemText primary={t("setting.uid")} />
 
                                 <ListItemSecondaryAction>
                                     <Typography
@@ -652,7 +665,7 @@ class UserSettingCompoment extends Component {
                                 <ListItemIcon className={classes.iconFix}>
                                     <NickIcon />
                                 </ListItemIcon>
-                                <ListItemText primary="昵称" />
+                                <ListItemText primary={t("setting.nickname")} />
 
                                 <ListItemSecondaryAction
                                     onClick={() =>
@@ -676,7 +689,7 @@ class UserSettingCompoment extends Component {
                                 <ListItemIcon className={classes.iconFix}>
                                     <EmailIcon />
                                 </ListItemIcon>
-                                <ListItemText primary="Email" />
+                                <ListItemText primary={t("login.email")} />
 
                                 <ListItemSecondaryAction>
                                     <Typography
@@ -692,7 +705,7 @@ class UserSettingCompoment extends Component {
                                 <ListItemIcon className={classes.iconFix}>
                                     <GroupIcon />
                                 </ListItemIcon>
-                                <ListItemText primary="用户组" />
+                                <ListItemText primary={t("setting.group")} />
 
                                 <ListItemSecondaryAction>
                                     <Typography
@@ -708,7 +721,7 @@ class UserSettingCompoment extends Component {
                                 <ListItemIcon className={classes.iconFix}>
                                     <DateIcon />
                                 </ListItemIcon>
-                                <ListItemText primary="注册时间" />
+                                <ListItemText primary={t("setting.regTime")} />
 
                                 <ListItemSecondaryAction>
                                     <Typography
@@ -725,7 +738,7 @@ class UserSettingCompoment extends Component {
                         className={classes.sectionTitle}
                         variant="subtitle2"
                     >
-                        安全隐私
+                        {t("setting.privacyAndSecurity")}
                     </Typography>
                     <Paper>
                         <List className={classes.desenList}>
@@ -733,7 +746,9 @@ class UserSettingCompoment extends Component {
                                 <ListItemIcon className={classes.iconFix}>
                                     <HomeIcon />
                                 </ListItemIcon>
-                                <ListItemText primary="个人主页" />
+                                <ListItemText
+                                    primary={t("setting.profilePage")}
+                                />
 
                                 <ListItemSecondaryAction>
                                     <Switch
@@ -752,7 +767,9 @@ class UserSettingCompoment extends Component {
                                 <ListItemIcon className={classes.iconFix}>
                                     <LockIcon />
                                 </ListItemIcon>
-                                <ListItemText primary="登录密码" />
+                                <ListItemText
+                                    primary={t("setting.accountPassword")}
+                                />
 
                                 <ListItemSecondaryAction
                                     className={classes.flexContainer}
@@ -765,7 +782,7 @@ class UserSettingCompoment extends Component {
                                 <ListItemIcon className={classes.iconFix}>
                                     <VerifyIcon />
                                 </ListItemIcon>
-                                <ListItemText primary="二步验证" />
+                                <ListItemText primary={t("setting.2fa")} />
 
                                 <ListItemSecondaryAction
                                     className={classes.flexContainer}
@@ -775,8 +792,8 @@ class UserSettingCompoment extends Component {
                                         color="textSecondary"
                                     >
                                         {!this.state.settings.two_factor
-                                            ? "未开启"
-                                            : "已开启"}
+                                            ? t("setting.disabled")
+                                            : t("setting.enabled")}
                                     </Typography>
                                     <RightIcon
                                         className={classes.rightIconWithText}
@@ -817,7 +834,7 @@ class UserSettingCompoment extends Component {
                         className={classes.sectionTitle}
                         variant="subtitle2"
                     >
-                        个性化
+                        {t("setting.appearance")}
                     </Typography>
                     <Paper>
                         <List className={classes.desenList}>
@@ -830,13 +847,15 @@ class UserSettingCompoment extends Component {
                                 <ListItemIcon className={classes.iconFix}>
                                     <ColorIcon />
                                 </ListItemIcon>
-                                <ListItemText primary="主题配色" />
+                                <ListItemText
+                                    primary={t("setting.themeColor")}
+                                />
 
                                 <ListItemSecondaryAction
                                     className={classes.flexContainer}
                                 >
-                                    <div className={classes.firstColor}></div>
-                                    <div className={classes.secondColor}></div>
+                                    <div className={classes.firstColor} />
+                                    <div className={classes.secondColor} />
                                 </ListItemSecondaryAction>
                             </ListItem>
                             <Divider />
@@ -847,7 +866,7 @@ class UserSettingCompoment extends Component {
                                 <ListItemIcon className={classes.iconFix}>
                                     <Brightness3 />
                                 </ListItemIcon>
-                                <ListItemText primary="黑暗模式" />
+                                <ListItemText primary={t("setting.darkMode")} />
 
                                 <ListItemSecondaryAction
                                     className={classes.flexContainer}
@@ -858,9 +877,10 @@ class UserSettingCompoment extends Component {
                                     >
                                         {dark &&
                                             (dark === "dark"
-                                                ? "偏好开启"
-                                                : "偏好关闭")}
-                                        {dark === null && "跟随系统"}
+                                                ? t("setting.enabled")
+                                                : t("setting.disabled"))}
+                                        {dark === null &&
+                                            t("setting.syncWithSystem")}
                                     </Typography>
                                     <RightIcon
                                         className={classes.rightIconWithText}
@@ -875,7 +895,7 @@ class UserSettingCompoment extends Component {
                                 <ListItemIcon className={classes.iconFix}>
                                     <ListAlt />
                                 </ListItemIcon>
-                                <ListItemText primary="文件列表" />
+                                <ListItemText primary={t("setting.fileList")} />
 
                                 <ListItemSecondaryAction
                                     className={classes.flexContainer}
@@ -885,11 +905,12 @@ class UserSettingCompoment extends Component {
                                         color="textSecondary"
                                     >
                                         {this.props.viewMethod === "icon" &&
-                                            "大图标"}
+                                            t("fileManager.gridViewLarge")}
                                         {this.props.viewMethod === "list" &&
-                                            "列表"}
+                                            t("fileManager.listView")}
                                         {this.props.viewMethod ===
-                                            "smallIcon" && "小图标"}
+                                            "smallIcon" &&
+                                            t("fileManager.gridViewSmall")}
                                     </Typography>
                                     <RightIcon
                                         className={classes.rightIconWithText}
@@ -906,7 +927,7 @@ class UserSettingCompoment extends Component {
                                 <ListItemIcon className={classes.iconFix}>
                                     <Schedule />
                                 </ListItemIcon>
-                                <ListItemText primary="时区" />
+                                <ListItemText primary={t("setting.timeZone")} />
 
                                 <ListItemSecondaryAction
                                     className={classes.flexContainer}
@@ -947,7 +968,9 @@ class UserSettingCompoment extends Component {
                                         >
                                             <LinkIcon />
                                         </ListItemIcon>
-                                        <ListItemText primary="连接地址" />
+                                        <ListItemText
+                                            primary={t("setting.webdavServer")}
+                                        />
 
                                         <ListItemSecondaryAction
                                             className={classes.flexContainer}
@@ -971,7 +994,9 @@ class UserSettingCompoment extends Component {
                                         >
                                             <InputIcon />
                                         </ListItemIcon>
-                                        <ListItemText primary="用户名" />
+                                        <ListItemText
+                                            primary={t("setting.userName")}
+                                        />
 
                                         <ListItemSecondaryAction
                                             className={classes.flexContainer}
@@ -993,7 +1018,9 @@ class UserSettingCompoment extends Component {
                                         >
                                             <SecurityIcon />
                                         </ListItemIcon>
-                                        <ListItemText primary="账号管理" />
+                                        <ListItemText
+                                            primary={t("setting.manageAccount")}
+                                        />
 
                                         <ListItemSecondaryAction
                                             className={classes.flexContainer}
@@ -1060,7 +1087,7 @@ class UserSettingCompoment extends Component {
                         </List>
                     </Paper>
 
-                    <div className={classes.paddingBottom}></div>
+                    <div className={classes.paddingBottom} />
                 </div>
                 <TimeZoneDialog
                     onClose={() => this.setState({ changeTimeZone: false })}
@@ -1070,7 +1097,7 @@ class UserSettingCompoment extends Component {
                     open={this.state.avatarModal}
                     onClose={this.handleClose}
                 >
-                    <DialogTitle>修改头像</DialogTitle>
+                    <DialogTitle>{t("setting.avatar")}</DialogTitle>
                     <List>
                         <ListItem
                             button
@@ -1089,7 +1116,7 @@ class UserSettingCompoment extends Component {
                                     <PhotoIcon />
                                 </Avatar>
                             </ListItemAvatar>
-                            <ListItemText primary="从文件上传" />
+                            <ListItemText primary={t("setting.uploadImage")} />
                         </ListItem>
                         <ListItem
                             button
@@ -1103,22 +1130,22 @@ class UserSettingCompoment extends Component {
                             </ListItemAvatar>
                             <ListItemText
                                 className={classes.paddingText}
-                                primary="使用 Gravatar 头像 "
+                                primary={t("setting.useGravatar")}
                             />
                         </ListItem>
                     </List>
                     <DialogActions>
                         <Button onClick={this.handleClose} color="primary">
-                            取消
+                            {t("cancel", { ns: "common" })}
                         </Button>
                     </DialogActions>
                 </Dialog>
                 <Dialog open={this.state.nickModal} onClose={this.handleClose}>
-                    <DialogTitle>修改昵称</DialogTitle>
+                    <DialogTitle>{t("setting.changeNick")}</DialogTitle>
                     <DialogContent>
                         <TextField
                             id="standard-name"
-                            label="昵称"
+                            label={t("setting.nickname")}
                             className={classes.textField}
                             value={this.state.nick}
                             onChange={this.handleChange("nick")}
@@ -1128,7 +1155,7 @@ class UserSettingCompoment extends Component {
                     </DialogContent>
                     <DialogActions>
                         <Button onClick={this.handleClose} color="default">
-                            取消
+                            {t("cancel", { ns: "common" })}
                         </Button>
                         <Button
                             onClick={this.changeNick}
@@ -1138,7 +1165,7 @@ class UserSettingCompoment extends Component {
                                 this.state.nick === ""
                             }
                         >
-                            保存
+                            {t("ok", { ns: "common" })}
                         </Button>
                     </DialogActions>
                 </Dialog>
@@ -1146,12 +1173,12 @@ class UserSettingCompoment extends Component {
                     open={this.state.changePassword}
                     onClose={this.handleClose}
                 >
-                    <DialogTitle>修改登录密码</DialogTitle>
+                    <DialogTitle>{t("login.resetPassword")}</DialogTitle>
                     <DialogContent>
                         <div>
                             <TextField
                                 id="standard-name"
-                                label="原密码"
+                                label={t("setting.originalPassword")}
                                 type="password"
                                 className={classes.textField}
                                 value={this.state.oldPwd}
@@ -1163,7 +1190,7 @@ class UserSettingCompoment extends Component {
                         <div>
                             <TextField
                                 id="standard-name"
-                                label="新密码"
+                                label={t("login.newPassword")}
                                 type="password"
                                 className={classes.textField}
                                 value={this.state.newPwd}
@@ -1174,7 +1201,7 @@ class UserSettingCompoment extends Component {
                         <div>
                             <TextField
                                 id="standard-name"
-                                label="确认新密码"
+                                label={t("login.repeatNewPassword")}
                                 type="password"
                                 className={classes.textField}
                                 value={this.state.newPwdRepeat}
@@ -1185,7 +1212,7 @@ class UserSettingCompoment extends Component {
                     </DialogContent>
                     <DialogActions>
                         <Button onClick={this.handleClose} color="default">
-                            取消
+                            {t("cancel", { ns: "common" })}
                         </Button>
                         <Button
                             onClick={this.changhePwd}
@@ -1197,14 +1224,15 @@ class UserSettingCompoment extends Component {
                                 this.state.newPwd === ""
                             }
                         >
-                            保存
+                            {t("ok", { ns: "common" })}
                         </Button>
                     </DialogActions>
                 </Dialog>
                 <Dialog open={this.state.twoFactor} onClose={this.handleClose}>
                     <DialogTitle>
-                        {this.state.settings.two_factor ? "关闭" : "启用"}
-                        二步验证
+                        {this.state.settings.two_factor
+                            ? t("setting.disable2FA")
+                            : t("setting.enable2FA")}
                     </DialogTitle>
                     <DialogContent>
                         <div className={classes.flexContainerResponse}>
@@ -1224,17 +1252,17 @@ class UserSettingCompoment extends Component {
                             <div className={classes.desText}>
                                 {!this.state.settings.two_factor && (
                                     <Typography>
-                                        请使用任意二步验证APP或者支持二步验证的密码管理软件扫描左侧二维码添加本站。扫描完成后请填写二步验证APP给出的6位验证码以开启二步验证。
+                                        {t("setting.2faDescription")}
                                     </Typography>
                                 )}
                                 {this.state.settings.two_factor && (
                                     <Typography>
-                                        请验证当前二步验证代码。
+                                        {t("setting.inputCurrent2FACode")}
                                     </Typography>
                                 )}
                                 <TextField
                                     id="standard-name"
-                                    label="6位验证码"
+                                    label={t("login.input2FACode")}
                                     type="number"
                                     className={classes.textField}
                                     value={this.state.authCode}
@@ -1248,7 +1276,7 @@ class UserSettingCompoment extends Component {
                     </DialogContent>
                     <DialogActions>
                         <Button onClick={this.handleClose} color="default">
-                            取消
+                            {t("cancel", { ns: "common" })}
                         </Button>
                         <Button
                             onClick={this.twoFactor}
@@ -1258,8 +1286,9 @@ class UserSettingCompoment extends Component {
                                 this.state.authCode === ""
                             }
                         >
-                            {this.state.settings.two_factor ? "关闭" : "启用"}
-                            二步验证
+                            {this.state.settings.two_factor
+                                ? t("setting.disable2FA")
+                                : t("setting.enable2FA")}
                         </Button>
                     </DialogActions>
                 </Dialog>
@@ -1267,7 +1296,7 @@ class UserSettingCompoment extends Component {
                     open={this.state.changeTheme}
                     onClose={this.handleClose}
                 >
-                    <DialogTitle>更改主题配色</DialogTitle>
+                    <DialogTitle>{t("setting.themeColor")}</DialogTitle>
                     <DialogContent>
                         <ToggleButtonGroup
                             value={this.state.chosenTheme}
@@ -1288,7 +1317,7 @@ class UserSettingCompoment extends Component {
                     </DialogContent>
                     <DialogActions>
                         <Button onClick={this.handleClose} color="default">
-                            取消
+                            {t("cancel", { ns: "common" })}
                         </Button>
                         <Button
                             onClick={this.changeTheme}
@@ -1298,7 +1327,7 @@ class UserSettingCompoment extends Component {
                                 this.state.chosenTheme === null
                             }
                         >
-                            保存
+                            {t("ok", { ns: "common" })}
                         </Button>
                     </DialogActions>
                 </Dialog>
@@ -1306,7 +1335,7 @@ class UserSettingCompoment extends Component {
                     open={this.state.showWebDavUrl}
                     onClose={this.handleClose}
                 >
-                    <DialogTitle>WebDAV连接地址</DialogTitle>
+                    <DialogTitle>{t("setting.webdavServer")}</DialogTitle>
                     <DialogContent>
                         <TextField
                             id="standard-name"
@@ -1318,7 +1347,7 @@ class UserSettingCompoment extends Component {
                     </DialogContent>
                     <DialogActions>
                         <Button onClick={this.handleClose} color="default">
-                            关闭
+                            {t("close", { ns: "common" })}
                         </Button>
                     </DialogActions>
                 </Dialog>
@@ -1326,7 +1355,7 @@ class UserSettingCompoment extends Component {
                     open={this.state.showWebDavUserName}
                     onClose={this.handleClose}
                 >
-                    <DialogTitle>WebDAV用户名</DialogTitle>
+                    <DialogTitle>{t("setting.userName")}</DialogTitle>
                     <DialogContent>
                         <TextField
                             id="standard-name"
@@ -1338,7 +1367,7 @@ class UserSettingCompoment extends Component {
                     </DialogContent>
                     <DialogActions>
                         <Button onClick={this.handleClose} color="default">
-                            关闭
+                            {t("close", { ns: "common" })}
                         </Button>
                     </DialogActions>
                 </Dialog>
@@ -1350,6 +1379,6 @@ class UserSettingCompoment extends Component {
 const UserSetting = connect(
     mapStateToProps,
     mapDispatchToProps
-)(withStyles(styles)(withRouter(UserSettingCompoment)));
+)(withStyles(styles)(withRouter(withTranslation()(UserSettingCompoment))));
 
 export default UserSetting;
diff --git a/src/component/Setting/WebDAV.js b/src/component/Setting/WebDAV.js
index fe44c60..c76547e 100644
--- a/src/component/Setting/WebDAV.js
+++ b/src/component/Setting/WebDAV.js
@@ -21,6 +21,7 @@ import TimeAgo from "timeago-react";
 import Link from "@material-ui/core/Link";
 import { toggleSnackbar } from "../../redux/explorer";
 import Nothing from "../Placeholder/Nothing";
+import { useTranslation } from "react-i18next";
 
 const useStyles = makeStyles((theme) => ({
     layout: {
@@ -53,6 +54,7 @@ const useStyles = makeStyles((theme) => ({
 }));
 
 export default function WebDAV() {
+    const { t } = useTranslation();
     const [tab, setTab] = useState(0);
     const [create, setCreate] = useState(false);
     const [accounts, setAccounts] = useState([]);
@@ -67,12 +69,12 @@ export default function WebDAV() {
     const copyToClipboard = (text) => {
         if (navigator.clipboard) {
             navigator.clipboard.writeText(text);
-            ToggleSnackbar("top", "center", "已复制到剪切板", "success");
+            ToggleSnackbar("top", "center", t("setting.copied"), "success");
         } else {
             ToggleSnackbar(
                 "top",
                 "center",
-                "当前浏览器不支持，请手动复制",
+                t("setting.pleaseManuallyCopy"),
                 "warning"
             );
         }
@@ -141,7 +143,7 @@ export default function WebDAV() {
                 onClose={() => setCreate(false)}
             />
             <Typography color="textSecondary" variant="h4">
-                WebDAV
+                {t("navbar.connect")}
             </Typography>
             <Paper elevation={3} className={classes.content}>
                 <Tabs
@@ -151,16 +153,16 @@ export default function WebDAV() {
                     onChange={(event, newValue) => setTab(newValue)}
                     aria-label="disabled tabs example"
                 >
-                    <Tab label="账号管理" />
+                    <Tab label={t("setting.webdavAccounts")} />
                 </Tabs>
                 <div className={classes.cardContent}>
                     {tab === 0 && (
                         <div>
                             <Alert severity="info">
-                                WebDAV的地址为：
-                                {window.location.origin + "/dav"}
-                                ；登录用户名统一为：{user.user_name}{" "}
-                                ；密码为所创建账号的密码。
+                                {t("setting.webdavHint", {
+                                    url: window.location.origin + "/dav",
+                                    name: user.user_name,
+                                })}
                             </Alert>
                             <TableContainer className={classes.tableContainer}>
                                 <Table
@@ -169,16 +171,20 @@ export default function WebDAV() {
                                 >
                                     <TableHead>
                                         <TableRow>
-                                            <TableCell>备注名</TableCell>
-                                            <TableCell>密码</TableCell>
-                                            <TableCell align="right">
-                                                根目录
+                                            <TableCell>
+                                                {t("setting.annotation")}
+                                            </TableCell>
+                                            <TableCell>
+                                                {t("login.password")}
                                             </TableCell>
                                             <TableCell align="right">
-                                                创建日期
+                                                {t("setting.rootFolder")}
                                             </TableCell>
                                             <TableCell align="right">
-                                                操作
+                                                {t("setting.createdAt")}
+                                            </TableCell>
+                                            <TableCell align="right">
+                                                {t("setting.action")}
                                             </TableCell>
                                         </TableRow>
                                     </TableHead>
@@ -202,7 +208,9 @@ export default function WebDAV() {
                                                         }
                                                         href={"javascript:void"}
                                                     >
-                                                        复制
+                                                        {t("copy", {
+                                                            ns: "common",
+                                                        })}
                                                     </Link>
                                                 </TableCell>
                                                 <TableCell align="right">
@@ -229,7 +237,7 @@ export default function WebDAV() {
                                     </TableBody>
                                 </Table>
                                 {accounts.length === 0 && (
-                                    <Nothing primary={"没有记录"} />
+                                    <Nothing primary={t("setting.listEmpty")} />
                                 )}
                             </TableContainer>
                             <Button
@@ -238,7 +246,7 @@ export default function WebDAV() {
                                 variant="contained"
                                 color="secondary"
                             >
-                                创建新账号
+                                {t("setting.createNewAccount")}
                             </Button>
                         </div>
                     )}
diff --git a/src/utils/datetime.js b/src/utils/datetime.js
index 1fa60ea..c751362 100644
--- a/src/utils/datetime.js
+++ b/src/utils/datetime.js
@@ -7,13 +7,23 @@ import i18next from "../i18n";
 dayjs.extend(utc);
 dayjs.extend(timezone);
 
-const defaultTimeZone = "Asia/Shanghai";
+let userTimezone = "";
+try {
+    userTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+} catch (e) {
+    console.log(e);
+}
+
+if (!userTimezone) {
+    userTimezone = "Asia/Shanghai";
+}
+
 const preferTimeZone = Auth.GetPreference("timeZone");
-export let timeZone = preferTimeZone ? preferTimeZone : defaultTimeZone;
+export let timeZone = preferTimeZone ? preferTimeZone : userTimezone;
 
 export function refreshTimeZone() {
     timeZone = Auth.GetPreference("timeZone");
-    timeZone = timeZone ? timeZone : defaultTimeZone;
+    timeZone = timeZone ? timeZone : userTimezone;
 }
 
 export function formatLocalTime(time) {