diff --git a/website/i18n/zh-Hans/code.json b/website/i18n/zh-Hans/code.json
index 12626b70..f11c1eb8 100644
--- a/website/i18n/zh-Hans/code.json
+++ b/website/i18n/zh-Hans/code.json
@@ -287,5 +287,95 @@
   "theme.docs.sidebar.toggleSidebarButtonAriaLabel": {
     "message": "切换导航栏",
     "description": "The ARIA label for hamburger menu button of mobile navigation"
+  },
+  "Slack": {
+    "message": "Slack"
+  },
+  "Discord": {
+    "message": "Discord"
+  },
+  "Rocket.Chat": {
+    "message": "Rocket.Chat"
+  },
+  "Open Source, Open Platform": {
+    "message": "开放源码, 开放生态"
+  },
+  "Not only Another": {
+    "message": "不仅仅是另一个"
+  },
+  "What is noIM(not only IM)?": {
+    "message": "什么是noIM(not only IM)?"
+  },
+  "Join our Group": {
+    "message": "加入我们"
+  },
+  "Or direct visit Tailchat nightly version": {
+    "message": "或者直接体验 Tailchat 实验版"
+  },
+  "Feature Overview": {
+    "message": "功能概览"
+  },
+  "Messenger": {
+    "message": "消息"
+  },
+  "Basic message support, multi message type like text/link/mention/image/file etc. and support append reaction for anything you want with messages.": {
+    "message": "支持基本信息，支持如文本/链接/提及/图像/文件等多种信息类型，并支持对任何你想要的信息的附加反应。"
+  },
+  "You can join multiple groups, and discuss different topics, perhaps information and notifications, through multiple panels in the group. Not just a simple chat.": {
+    "message": "你可以加入多个小组，并通过小组中的多个面板讨论不同的主题，或是信息和通知。不仅仅是简单的聊天。"
+  },
+  "In the inbox, you can receive anything you need to know, such as mention or plugin notification. Or you can push anything on yourself.": {
+    "message": "在收件箱中，你可以收到任何你需要知道的东西，如提及或插件通知。或者你可以对自己推送任何东西."
+  },
+  "Plugin Center": {
+    "message": "插件中心"
+  },
+  "Tailchat has a complete plugin system. With plugins, you can integrate your apps and projects into your chat app in any form you want. Unlike VSCode, Tailchat has fewer restrictions on the form of expression. I think Tailchat is not only a chat app, but also a platform for integrating different applications. You can start a video conference, listen to music, use online tools and more in Tailchat.": {
+    "message": "Tailchat有一个完整的插件系统。通过插件，你可以把你的应用程序和项目以任何形式整合到你的聊天应用程序中。与VSCode不同，Tailchat对表达形式的限制较少。Tailchat不仅是一个聊天应用程序，也是一个整合不同应用程序的平台。你可以在Tailchat中开始视频会议，听音乐，使用在线工具等等所有你能够想象到的一切事物。"
+  },
+  "At the same time, through plugins, you can further improve the chat experience, such as topic panel, end-to-end encryption, rich text, message notification, online drawing, receiving push from third-party applications, etc.": {
+    "message": "同时，通过插件，您可以进一步改善聊天体验，如话题面板、端到端加密、富文本、消息通知、在线绘画、接收第三方应用推送等。"
+  },
+  "Group Roles": {
+    "message": "身份组管理"
+  },
+  "Tailchat has a builtin RBAC permission management system. Based on the combination of role assignment and permission points, various permission combinations can be matched. At the same time, permission points can be easily integrated by plugins, which are a very flexible design.": {
+    "message": "Tailchat 有一个内置的RBAC权限管理系统。基于角色分配和权限点的组合，可以匹配各种权限组合。同时，权限点可以通过插件轻松整合，这是一个非常灵活的设计。"
+  },
+  "Bot": {
+    "message": "机器人"
+  },
+  "Tailchat has a very simple way to integrate third-party applications with bot like most applications. A simple url request or add openapi app or even create a backend plugin. You can use anyway to connect anything, its free!": {
+    "message": "Tailchat 有一个非常简单的方法来整合第三方应用程序与机器人，就像像大多数拥有开放平台的流行软件一样。形式可以是一个简单的url请求或添加openapi应用程序，甚至创建一个后端插件。你可以使用任何方式来连接任何东西，它是完全自由的!"
+  },
+  "Multi-platform Support": {
+    "message": "多平台支持"
+  },
+  "Tailchat design on HTML, and fit any platform or os, but its still some native support cannot provide in web. So Tailchat also has client to provide os support like mobile notification , desktop screenshot and etc.": {
+    "message": "Tailchat 基于HTML技术开发，作为最流行的跨平台解决方案，Tailchat 天然适合任何平台或操作系统，但它仍然有一些原生支持不能在网络上提供。因此，Tailchat也有客户端，提供原生操作系统的支持，如移动端推送通知，桌面截图等。"
+  },
+  "in Alpha Test, Join us for Early Experience": {
+    "message": "早期测试中，加入我们以抢先体验"
+  },
+  "in Alpha Test": {
+    "message": "早期测试中"
+  },
+  "Join the community": {
+    "message": "加入社区"
+  },
+  "Engage with our ever-growing community to get the latest updates, product support, and more.": {
+    "message": "与我们不断增长的社区互动，以获得最新的更新、产品支持和更多。"
+  },
+  "Join Our Group": {
+    "message": "加入我们"
+  },
+  "Plugin": {
+    "message": "插件"
+  },
+  "Roles": {
+    "message": "身份组"
+  },
+  "Platform": {
+    "message": "开放平台"
   }
 }
diff --git a/website/src/components/FeatureSection.less b/website/src/components/FeatureSection.less
index d51138ed..7f5746bb 100644
--- a/website/src/components/FeatureSection.less
+++ b/website/src/components/FeatureSection.less
@@ -84,6 +84,7 @@
             font-size: .875rem;
             line-height: 1.25rem;
             border-radius: .375rem;
+            white-space: nowrap;
 
             &.active {
               background-color: var(--ifm-color-primary);
diff --git a/website/src/components/FeatureSection.tsx b/website/src/components/FeatureSection.tsx
index 5e73e30c..2ae9208b 100644
--- a/website/src/components/FeatureSection.tsx
+++ b/website/src/components/FeatureSection.tsx
@@ -3,6 +3,7 @@ import clsx from 'clsx';
 import React, { useEffect, useState } from 'react';
 import Head from '@docusaurus/Head';
 import Link from '@docusaurus/Link';
+import Translate from '@docusaurus/Translate';
 import { nightlyUrl } from '../utils/consts';
 import './FeatureSection.less';
 
@@ -37,21 +38,17 @@ export const FeatureSection: React.FC = React.memo(() => {
     };
   }, []);
 
-  function Pill({ section }) {
+  function Pill({ id, label }) {
     return (
       <div
-        className={clsx(
-          'pill',
-          'flex-1 cursor-pointer rounded-md py-2 px-6 text-center font-jakarta text-sm font-semibold',
-          { active: visibleSection === section }
-        )}
+        className={clsx('pill', { active: visibleSection === id })}
         onClick={() => {
           document
-            .getElementById(section)
+            .getElementById(id)
             ?.scrollIntoView({ behavior: 'smooth', block: 'center' });
         }}
       >
-        {`${section[0].toUpperCase()}${section.substring(1)}`}
+        {label}
       </div>
     );
   }
@@ -68,15 +65,17 @@ export const FeatureSection: React.FC = React.memo(() => {
       </Head>
       <div className="main">
         <div className="title">
-          <h2 className="left">Feature Overview</h2>
+          <h2 className="left">
+            <Translate>Feature Overview</Translate>
+          </h2>
 
           <div className="right">
             <div className="right-body">
-              <Pill section="messenger" />
-              <Pill section="plugin" />
-              <Pill section="roles" />
-              <Pill section="bot" />
-              <Pill section="platform" />
+              <Pill id="messenger" label={<Translate>Messenger</Translate>} />
+              <Pill id="plugin" label={<Translate>Plugin</Translate>} />
+              <Pill id="roles" label={<Translate>Roles</Translate>} />
+              <Pill id="bot" label={<Translate>Bot</Translate>} />
+              <Pill id="platform" label={<Translate>Platform</Translate>} />
             </div>
           </div>
         </div>
@@ -84,21 +83,29 @@ export const FeatureSection: React.FC = React.memo(() => {
         <div className="body">
           <div className="item" id="messenger">
             <div className="left">
-              <h3>Messenger</h3>
+              <h3>
+                <Translate>Messenger</Translate>
+              </h3>
               <p>
-                Basic message support, multi message type like
-                text/link/mention/image/file etc. and support append reaction
-                for anything you want with messages.
+                <Translate>
+                  Basic message support, multi message type like
+                  text/link/mention/image/file etc. and support append reaction
+                  for anything you want with messages.
+                </Translate>
               </p>
               <p>
-                You can join multiple groups, and discuss different topics,
-                perhaps information and notifications, through multiple panels
-                in the group. Not just a simple chat.
+                <Translate>
+                  You can join multiple groups, and discuss different topics,
+                  perhaps information and notifications, through multiple panels
+                  in the group. Not just a simple chat.
+                </Translate>
               </p>
               <p>
-                In the inbox, you can receive anything you need to know, such as
-                mention or plugin notification. Or you can push anything on
-                yourself.
+                <Translate>
+                  In the inbox, you can receive anything you need to know, such
+                  as mention or plugin notification. Or you can push anything on
+                  yourself.
+                </Translate>
               </p>
             </div>
             <div className="right">
@@ -108,21 +115,27 @@ export const FeatureSection: React.FC = React.memo(() => {
 
           <div className="item reverse" id="plugin">
             <div className="left">
-              <h3>Plugin Center</h3>
+              <h3>
+                <Translate>Plugin Center</Translate>
+              </h3>
               <p>
-                Tailchat has a complete plugin system. With plugins, you can
-                integrate your apps and projects into your chat app in any form
-                you want. Unlike VSCode, Tailchat has fewer restrictions on the
-                form of expression. I think Tailchat is not only a chat app, but
-                also a platform for integrating different applications. You can
-                start a video conference, listen to music, use online tools and
-                more in Tailchat.
+                <Translate>
+                  Tailchat has a complete plugin system. With plugins, you can
+                  integrate your apps and projects into your chat app in any
+                  form you want. Unlike VSCode, Tailchat has fewer restrictions
+                  on the form of expression. I think Tailchat is not only a chat
+                  app, but also a platform for integrating different
+                  applications. You can start a video conference, listen to
+                  music, use online tools and more in Tailchat.
+                </Translate>
               </p>
               <p>
-                At the same time, through plugins, you can further improve the
-                chat experience, such as topic panel, end-to-end encryption,
-                rich text, message notification, online drawing, receiving push
-                from third-party applications, etc.
+                <Translate>
+                  At the same time, through plugins, you can further improve the
+                  chat experience, such as topic panel, end-to-end encryption,
+                  rich text, message notification, online drawing, receiving
+                  push from third-party applications, etc.
+                </Translate>
               </p>
             </div>
 
@@ -133,19 +146,23 @@ export const FeatureSection: React.FC = React.memo(() => {
 
           <div className="item" id="roles">
             <div className="left">
-              <h3>Group Roles</h3>
+              <h3>
+                <Translate>Group Roles</Translate>
+              </h3>
               <p>
-                Tailchat has a builtin RBAC permission management system. Based
-                on the combination of role assignment and permission points,
-                various permission combinations can be matched. At the same
-                time, permission points can be easily integrated by plugins,
-                which are a very flexible design.
+                <Translate>
+                  Tailchat has a builtin RBAC permission management system.
+                  Based on the combination of role assignment and permission
+                  points, various permission combinations can be matched. At the
+                  same time, permission points can be easily integrated by
+                  plugins, which are a very flexible design.
+                </Translate>
               </p>
               <Link
                 className="button button--link"
                 to="/docs/contribution/dev/role"
               >
-                Learn More
+                <Translate>Learn More</Translate>
               </Link>
             </div>
             <div className="right">
@@ -155,12 +172,16 @@ export const FeatureSection: React.FC = React.memo(() => {
 
           <div className="item reverse" id="bot">
             <div className="left">
-              <h3>Bot</h3>
+              <h3>
+                <Translate>Bot</Translate>
+              </h3>
               <p>
-                Tailchat has a very simple way to integrate third-party
-                applications with bot like most applications. A simple url
-                request or add openapi app or even create a backend plugin. You
-                can use anyway to connect anything, its free!
+                <Translate>
+                  Tailchat has a very simple way to integrate third-party
+                  applications with bot like most applications. A simple url
+                  request or add openapi app or even create a backend plugin.
+                  You can use anyway to connect anything, its free!
+                </Translate>
               </p>
             </div>
 
@@ -171,22 +192,30 @@ export const FeatureSection: React.FC = React.memo(() => {
 
           <div className="item" id="platform">
             <div className="left">
-              <h3>Multi-platform Support</h3>
+              <h3>
+                <Translate>Multi-platform Support</Translate>
+              </h3>
               <p>
-                Tailchat design on HTML, and fit any platform or os, but its
-                still some native support cannot provide in web. So Tailchat
-                also has client to provide os support like mobile notification ,
-                desktop screenshot and etc.
+                <Translate>
+                  Tailchat design on HTML, and fit any platform or os, but its
+                  still some native support cannot provide in web. So Tailchat
+                  also has client to provide os support like mobile notification
+                  , desktop screenshot and etc.
+                </Translate>
               </p>
               <div className="btns">
                 <Link className="button button--primary" to={nightlyUrl}>
                   Web
                 </Link>
                 <Link className="button button--secondary disabled">
-                  Mobile (in Alpha Test)
+                  Mobile (
+                  <Translate>
+                    in Alpha Test, Join us for Early Experience
+                  </Translate>
+                  )
                 </Link>
                 <Link className="button button--secondary disabled">
-                  Desktop (in Alpha Test)
+                  Desktop (<Translate>in Alpha Test</Translate>)
                 </Link>
               </div>
             </div>
diff --git a/website/src/components/HomepageHeader.tsx b/website/src/components/HomepageHeader.tsx
index 7b63742b..4828ad54 100644
--- a/website/src/components/HomepageHeader.tsx
+++ b/website/src/components/HomepageHeader.tsx
@@ -7,7 +7,11 @@ import { useColorMode } from '@docusaurus/theme-common';
 import { inviteLink, nightlyUrl } from '../utils/consts';
 import './HomepageHeader.less';
 
-const alternative = ['Slack', 'Discord', 'Rocket.Chat'];
+const alternative = [
+  <Translate key="slack">Slack</Translate>,
+  <Translate key="discord">Discord</Translate>,
+  <Translate key="rocket.chat">Rocket.Chat</Translate>,
+];
 
 export function getRandomAlternative() {
   return alternative[Math.floor(Math.random() * alternative.length)];
@@ -33,9 +37,11 @@ export const HomepageHeader: React.FC = React.memo(() => {
       </div>
 
       <div className="header">
-        <h1 className="title">Open Source, Open Platform</h1>
+        <h1 className="title">
+          <Translate>Open Source, Open Platform</Translate>
+        </h1>
         <h3 className="title">
-          Not only Another{' '}
+          <Translate>Not only Another</Translate>{' '}
           <strong onClick={updateAlternative}>
             {alternative[alternativeIndex]}
           </strong>
@@ -45,7 +51,7 @@ export const HomepageHeader: React.FC = React.memo(() => {
           Tailchat: {siteConfig.tagline}
           <small>
             <Link href="/blog/2023/03/01/the-era-of-noIM">
-              What is noIM(not only IM)?
+              <Translate>What is noIM(not only IM)?</Translate>
             </Link>
           </small>
         </p>
diff --git a/website/src/components/JoinCommunity.tsx b/website/src/components/JoinCommunity.tsx
index 3a12f0fb..dd34cc7e 100644
--- a/website/src/components/JoinCommunity.tsx
+++ b/website/src/components/JoinCommunity.tsx
@@ -1,18 +1,23 @@
 import React from 'react';
 import { inviteLink } from '../utils/consts';
 import Link from '@docusaurus/Link';
+import Translate from '@docusaurus/Translate';
 import './JoinCommunity.less';
 
 export const JoinCommunity: React.FC = React.memo(() => {
   return (
     <div className="join-community">
-      <h3>Join the community</h3>
+      <h3>
+        <Translate>Join the community</Translate>
+      </h3>
       <p>
-        Engage with our ever-growing community to get the latest updates,
-        product support, and more.
+        <Translate>
+          Engage with our ever-growing community to get the latest updates,
+          product support, and more.
+        </Translate>
       </p>
       <Link className="button button--primary button--lg" href={inviteLink}>
-        Join Our Group
+        <Translate>Join Our Group</Translate>
       </Link>
 
       <div className="producthunt">