diff --git a/components/WebsiteDetails.js b/components/WebsiteDetails.js
index d58923c2..af2a61a9 100644
--- a/components/WebsiteDetails.js
+++ b/components/WebsiteDetails.js
@@ -43,13 +43,41 @@ export default function WebsiteDetails({ websiteId }) {
     {
       render: BackButton,
     },
-    { label: 'Pages', value: 'url', component: PagesTable },
-    { label: 'Referrers', value: 'referrer', component: ReferrersTable },
-    { label: 'Browsers', value: 'browser', component: BrowsersTable },
-    { label: 'Operating system', value: 'os', component: OSTable },
-    { label: 'Devices', value: 'device', component: DevicesTable },
-    { label: 'Countries', value: 'country', component: CountriesTable },
-    { label: 'Events', value: 'event', component: EventsTable },
+    {
+      label: <FormattedMessage id="metrics.pages" defaultMessage="Pages" />,
+      value: 'url',
+      component: PagesTable,
+    },
+    {
+      label: <FormattedMessage id="metrics.browsers" defaultMessage="Browsers" />,
+      value: 'referrer',
+      component: ReferrersTable,
+    },
+    {
+      label: <FormattedMessage id="metrics.referrers" defaultMessage="Referrers" />,
+      value: 'browser',
+      component: BrowsersTable,
+    },
+    {
+      label: <FormattedMessage id="metrics.operating-system" defaultMessage="Operating system" />,
+      value: 'os',
+      component: OSTable,
+    },
+    {
+      label: <FormattedMessage id="metrics.devices" defaultMessage="Devices" />,
+      value: 'device',
+      component: DevicesTable,
+    },
+    {
+      label: <FormattedMessage id="metrics.countries" defaultMessage="Countries" />,
+      value: 'country',
+      component: CountriesTable,
+    },
+    {
+      label: <FormattedMessage id="metrics.events" defaultMessage="Events" />,
+      value: 'event',
+      component: EventsTable,
+    },
   ];
 
   const tableProps = {
diff --git a/components/common/LanguageButton.js b/components/common/LanguageButton.js
index 93a09ec4..4c17caf2 100644
--- a/components/common/LanguageButton.js
+++ b/components/common/LanguageButton.js
@@ -7,17 +7,21 @@ import Menu from './Menu';
 import styles from './LanguageButton.module.css';
 import Button from './Button';
 
+const supportedLanguages = {
+  en: 'EN',
+  'zh-CN': '中文',
+};
+
 const menuOptions = [
   { label: 'English', value: 'en' },
-  { label: '中文 (Chinese)', value: 'zh-CN' },
+  { label: '中文 (Chinese Simplified)', value: 'zh-CN' },
 ];
 
-export default function LanguageButton() {
+export default function LanguageButton({ menuPosition = 'bottom', menuAlign = 'left' }) {
   const dispatch = useDispatch();
   const [showMenu, setShowMenu] = useState(false);
   const locale = useSelector(state => state.app.locale);
   const ref = useRef();
-  const selectedLocale = menuOptions.find(e => e.value === locale)?.label.split(' ')[0];
 
   function handleSelect(value) {
     dispatch(updateApp({ locale: value }));
@@ -34,9 +38,16 @@ export default function LanguageButton() {
   return (
     <div ref={ref} className={styles.container}>
       <Button icon={<Globe />} onClick={() => setShowMenu(true)} size="small">
-        <div>{selectedLocale}</div>
+        <div>{supportedLanguages[locale]}</div>
       </Button>
-      {showMenu && <Menu options={menuOptions} onSelect={handleSelect} float="top" />}
+      {showMenu && (
+        <Menu
+          options={menuOptions}
+          onSelect={handleSelect}
+          float={menuPosition}
+          align={menuAlign}
+        />
+      )}
     </div>
   );
 }
diff --git a/components/layout/Footer.js b/components/layout/Footer.js
index a7957c2a..b246c544 100644
--- a/components/layout/Footer.js
+++ b/components/layout/Footer.js
@@ -3,26 +3,21 @@ import { FormattedMessage } from 'react-intl';
 import Link from 'next/link';
 import classNames from 'classnames';
 import Button from 'components/common/Button';
-import LanguageButton from 'components/common/LanguageButton';
 import Logo from 'assets/logo.svg';
 import styles from './Footer.module.css';
 
 export default function Footer() {
   return (
     <footer className="container">
-      <div className={classNames(styles.footer, 'row')}>
-        <LanguageButton />
-        <div className={styles.center}>
-          <FormattedMessage id="footer.powered-by" defaultMessage="powered by" />
-          <Link href="https://umami.is">
-            <a>
-              <Button icon={<Logo />} size="small">
-                <b>umami</b>
-              </Button>
-            </a>
-          </Link>
-        </div>
-        <div></div>
+      <div className={classNames(styles.footer, 'row justify-content-center')}>
+        <FormattedMessage id="footer.powered-by" defaultMessage="powered by" />
+        <Link href="https://umami.is">
+          <a>
+            <Button className={styles.button} icon={<Logo />} size="small">
+              <b>umami</b>
+            </Button>
+          </a>
+        </Link>
       </div>
     </footer>
   );
diff --git a/components/layout/Footer.module.css b/components/layout/Footer.module.css
index ff5a26bb..45567f87 100644
--- a/components/layout/Footer.module.css
+++ b/components/layout/Footer.module.css
@@ -6,16 +6,10 @@
   min-height: 100px;
 }
 
-.footer .center button {
-  margin-left: 10px;
-}
-
 .footer a {
   text-decoration: none;
 }
 
-.center {
-  display: flex;
-  justify-content: center;
-  align-items: center;
+.button {
+  margin-left: 10px;
 }
diff --git a/components/layout/Header.js b/components/layout/Header.js
index 7ffbaf04..e52d986f 100644
--- a/components/layout/Header.js
+++ b/components/layout/Header.js
@@ -7,6 +7,7 @@ import UserButton from '../common/UserButton';
 import Icon from '../common/Icon';
 import Logo from 'assets/logo.svg';
 import styles from './Header.module.css';
+import LanguageButton from '../common/LanguageButton';
 
 export default function Header() {
   const user = useSelector(state => state.user);
@@ -20,19 +21,24 @@ export default function Header() {
             <Link href={user ? '/' : 'https://umami.is'}>umami</Link>
           </div>
         </div>
-        {user && (
-          <div className="col-12 col-md-6">
-            <div className={styles.nav}>
-              <Link href="/dashboard">
-                <FormattedMessage id="header.nav.dashboard" defaultMessage="Dashboard" />
-              </Link>
-              <Link href="/settings">
-                <FormattedMessage id="header.nav.settings" defaultMessage="Settings" />
-              </Link>
-              <UserButton />
-            </div>
+        <div className="col-12 col-md-6">
+          <div className={styles.nav}>
+            {user ? (
+              <>
+                <Link href="/dashboard">
+                  <FormattedMessage id="header.nav.dashboard" defaultMessage="Dashboard" />
+                </Link>
+                <Link href="/settings">
+                  <FormattedMessage id="header.nav.settings" defaultMessage="Settings" />
+                </Link>
+                <LanguageButton menuAlign="right" />
+                <UserButton />
+              </>
+            ) : (
+              <LanguageButton menuAlign="right" />
+            )}
           </div>
-        )}
+        </div>
       </div>
     </header>
   );
diff --git a/components/layout/Layout.js b/components/layout/Layout.js
index 021745cc..c961ade9 100644
--- a/components/layout/Layout.js
+++ b/components/layout/Layout.js
@@ -13,6 +13,10 @@ export default function Layout({ title, children, header = true, footer = true }
           href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap"
           rel="stylesheet"
         />
+        <link
+          href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap"
+          rel="stylesheet"
+        />
       </Head>
       {header && <Header />}
       <main className="container">{children}</main>
diff --git a/lang/zh-CN.json b/lang/zh-CN.json
index 922db26a..0db0c639 100644
--- a/lang/zh-CN.json
+++ b/lang/zh-CN.json
@@ -1,233 +1,233 @@
 {
   "active-users.message": {
-    "defaultMessage": "xx {x} current {x, plural, one {visitor} other {visitors}}"
+    "defaultMessage": "当前在线 {x} 人"
   },
   "button.add-account": {
-    "defaultMessage": "xx Add account"
+    "defaultMessage": "添加账户"
   },
   "button.add-website": {
-    "defaultMessage": "xx Add website"
+    "defaultMessage": "添加网站"
   },
   "button.back": {
-    "defaultMessage": "xx Back"
+    "defaultMessage": "返回"
   },
   "button.cancel": {
-    "defaultMessage": "xx Cancel"
+    "defaultMessage": "取消"
   },
   "button.change-password": {
-    "defaultMessage": "xx Change password"
+    "defaultMessage": "更新密码"
   },
   "button.copy-to-clipboard": {
-    "defaultMessage": "xx Copy to clipboard"
+    "defaultMessage": "复制"
   },
   "button.delete": {
-    "defaultMessage": "xx Delete"
+    "defaultMessage": "删除"
   },
   "button.edit": {
-    "defaultMessage": "xx Edit"
+    "defaultMessage": "编辑"
   },
   "button.login": {
-    "defaultMessage": "xx Login"
+    "defaultMessage": "登录"
   },
   "button.more": {
-    "defaultMessage": "xx More"
+    "defaultMessage": "更多"
   },
   "button.save": {
-    "defaultMessage": "xx Save"
+    "defaultMessage": "保存"
   },
   "button.view-details": {
-    "defaultMessage": "xx View details"
+    "defaultMessage": "查看更多"
   },
   "footer.powered-by": {
-    "defaultMessage": "xx powered by"
+    "defaultMessage": "运行"
   },
   "header.nav.dashboard": {
-    "defaultMessage": "xx Dashboard"
+    "defaultMessage": "仪表板"
   },
   "header.nav.settings": {
-    "defaultMessage": "xx Settings"
+    "defaultMessage": "设置"
   },
   "label.adminsitrator": {
-    "defaultMessage": "xx Administrator"
+    "defaultMessage": "管理员"
   },
   "label.confirm-password": {
-    "defaultMessage": "xx Confirm password"
+    "defaultMessage": "确认密码"
   },
   "label.current-password": {
-    "defaultMessage": "xx Current password"
+    "defaultMessage": "目前密码"
   },
   "label.domain": {
-    "defaultMessage": "xx Domain"
+    "defaultMessage": "域名"
   },
   "label.enable-share-url": {
-    "defaultMessage": "xx Enable share URL"
+    "defaultMessage": "激活共享链接"
   },
   "label.invalid": {
-    "defaultMessage": "xx Invalid"
+    "defaultMessage": "输入无效"
   },
   "label.invalid-domain": {
-    "defaultMessage": "xx Invalid domain"
+    "defaultMessage": "无效域名"
   },
   "label.last-days": {
-    "defaultMessage": "xx Last {x} days"
+    "defaultMessage": "最近 {x} 天"
   },
   "label.last-hours": {
-    "defaultMessage": "xx Last {x} hours"
+    "defaultMessage": "最近 {x} 小时"
   },
   "label.logged-in-as": {
-    "defaultMessage": "xx Logged in as {username}"
+    "defaultMessage": "登录名: {username}"
   },
   "label.logout": {
-    "defaultMessage": "xx Logout"
+    "defaultMessage": "退出"
   },
   "label.name": {
-    "defaultMessage": "xx Name"
+    "defaultMessage": "名字"
   },
   "label.new-password": {
-    "defaultMessage": "xx New password"
+    "defaultMessage": "新密码"
   },
   "label.password": {
-    "defaultMessage": "xx Password"
+    "defaultMessage": "密码"
   },
   "label.passwords-dont-match": {
-    "defaultMessage": "xx Passwords don't match"
+    "defaultMessage": "密码不一致"
   },
   "label.required": {
-    "defaultMessage": "xx Required"
+    "defaultMessage": "必填"
   },
   "label.this-month": {
-    "defaultMessage": "xx This month"
+    "defaultMessage": "本月"
   },
   "label.this-week": {
-    "defaultMessage": "xx This week"
+    "defaultMessage": "本周"
   },
   "label.this-year": {
-    "defaultMessage": "xx This year"
+    "defaultMessage": "今年"
   },
   "label.today": {
-    "defaultMessage": "xx Today"
+    "defaultMessage": "今天"
   },
   "label.username": {
-    "defaultMessage": "xx Username"
+    "defaultMessage": "用户名"
   },
   "message.confirm-delete": {
-    "defaultMessage": "xx Are your sure you want to delete {target}?"
+    "defaultMessage": "你确定要删除{target}吗?"
   },
   "message.copied": {
-    "defaultMessage": "xx Copied!"
+    "defaultMessage": "复制成功!"
   },
   "message.delete-warning": {
-    "defaultMessage": "xx All associated data will be deleted as well."
+    "defaultMessage": "所有相关数据将会被删除."
   },
   "message.failure": {
-    "defaultMessage": "xx Something went wrong."
+    "defaultMessage": "出现错误."
   },
   "message.save-success": {
-    "defaultMessage": "xx Saved successfully."
+    "defaultMessage": "成功保存."
   },
   "message.share-url": {
-    "defaultMessage": "xx This is the publicly shared URL for {target}."
+    "defaultMessage": "这是 {target} 的共享链接."
   },
   "message.track-stats": {
-    "defaultMessage": "xx To track stats for {target}, place the following code in the {head} section of your website."
+    "defaultMessage": "把以下代码放到你的网站的{head}部分来收集{target}的数据."
   },
   "message.type-delete": {
-    "defaultMessage": "xx Type {delete} in the box below to confirm."
+    "defaultMessage": "在下面空格输入{delete}确认"
   },
   "metrics.actions": {
-    "defaultMessage": "xx Actions"
+    "defaultMessage": "用户行为"
   },
   "metrics.average-visit-time": {
-    "defaultMessage": "xx Average visit time"
+    "defaultMessage": "停留时间"
   },
   "metrics.bounce-rate": {
-    "defaultMessage": "xx Bounce rate"
+    "defaultMessage": "跳出率"
   },
   "metrics.browsers": {
-    "defaultMessage": "xx Browsers"
+    "defaultMessage": "浏览器"
   },
   "metrics.countries": {
-    "defaultMessage": "xx Countries"
+    "defaultMessage": "国家"
   },
   "metrics.devices": {
-    "defaultMessage": "xx Devices"
+    "defaultMessage": "设备"
   },
   "metrics.events": {
-    "defaultMessage": "xx Events"
+    "defaultMessage": "行为类别"
   },
   "metrics.filter.combined": {
-    "defaultMessage": "xx Combined"
+    "defaultMessage": "总和"
   },
   "metrics.filter.domain-only": {
-    "defaultMessage": "xx Domain only"
+    "defaultMessage": "只看域名"
   },
   "metrics.filter.raw": {
-    "defaultMessage": "xx Raw"
+    "defaultMessage": "原始"
   },
   "metrics.operating-system": {
-    "defaultMessage": "xx Operating System"
+    "defaultMessage": "操作系统"
   },
   "metrics.page-views": {
-    "defaultMessage": "xx Page views"
+    "defaultMessage": "访问量"
   },
   "metrics.pages": {
-    "defaultMessage": "xx Pages"
+    "defaultMessage": "网页"
   },
   "metrics.referrers": {
-    "defaultMessage": "xx Referrers"
+    "defaultMessage": "来源"
   },
   "metrics.unique-visitors": {
-    "defaultMessage": "xx Unique visitors"
+    "defaultMessage": "访问者"
   },
   "metrics.views": {
-    "defaultMessage": "xx Views"
+    "defaultMessage": "访问量"
   },
   "metrics.visitors": {
-    "defaultMessage": "xx Visitors"
+    "defaultMessage": "访问者"
   },
   "placeholder.message.go-to-settings": {
-    "defaultMessage": "xx Go to settings"
+    "defaultMessage": "去设置"
   },
   "placeholder.message.no-websites-configured": {
-    "defaultMessage": "xx You don't have any websites configured."
+    "defaultMessage": "你还没有设置任何网站."
   },
   "settings.accounts": {
-    "defaultMessage": "xx Accounts"
+    "defaultMessage": "账户"
   },
   "settings.profile": {
-    "defaultMessage": "xx Profile"
+    "defaultMessage": "个人资料"
   },
   "settings.websites": {
-    "defaultMessage": "xx Websites"
+    "defaultMessage": "网站"
   },
   "title.add-account": {
-    "defaultMessage": "xx Add account"
+    "defaultMessage": "添加账户"
   },
   "title.add-website": {
-    "defaultMessage": "xx Add website"
+    "defaultMessage": "A添加网站"
   },
   "title.delete-account": {
-    "defaultMessage": "xx Delete account"
+    "defaultMessage": "删除账户"
   },
   "title.delete-website": {
-    "defaultMessage": "xx Delete website"
+    "defaultMessage": "删除网站"
   },
   "title.edit-account": {
-    "defaultMessage": "xx Edit account"
+    "defaultMessage": "编辑账户"
   },
   "title.edit-website": {
-    "defaultMessage": "xx Edit website"
+    "defaultMessage": "编辑网站"
   },
   "title.share-url": {
-    "defaultMessage": "xx Share URL"
+    "defaultMessage": "共享链接"
   },
   "title.tracking-code": {
-    "defaultMessage": "xx Tracking code"
+    "defaultMessage": "跟踪代码"
   },
   "tooltip.get-share-url": {
-    "defaultMessage": "xx Get share URL"
+    "defaultMessage": "获得共享链接"
   },
   "tooltip.get-tracking-code": {
-    "defaultMessage": "xx Get tracking code"
+    "defaultMessage": "获得跟踪代码"
   }
 }
\ No newline at end of file
diff --git a/pages/_app.js b/pages/_app.js
index 710a7aa5..cd4c09e0 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -18,6 +18,8 @@ const Intl = ({ children }) => {
   const dispatch = useDispatch();
   const locale = useSelector(state => state.app.locale);
 
+  const Wrapper = ({ children }) => <span className={locale}>{children}</span>;
+
   useEffect(() => {
     const saved = localStorage.getItem('locale');
     if (saved) {
@@ -26,7 +28,7 @@ const Intl = ({ children }) => {
   });
 
   return (
-    <IntlProvider locale={locale} messages={messages[locale]}>
+    <IntlProvider locale={locale} messages={messages[locale]} textComponent={Wrapper}>
       {children}
     </IntlProvider>
   );
diff --git a/styles/index.css b/styles/index.css
index 490f9ea4..79222fde 100644
--- a/styles/index.css
+++ b/styles/index.css
@@ -13,6 +13,10 @@ body {
   background: var(--gray75);
 }
 
+.zh-CN {
+  font-family: 'Noto Sans SC', sans-serif !important;
+}
+
 *,
 *:before,
 *:after {