diff --git a/README.zh-CN.md b/README.zh-CN.md
new file mode 100644
index 00000000..b19693ef
--- /dev/null
+++ b/README.zh-CN.md
@@ -0,0 +1,33 @@
+# Website
+
+该网站是使用现代静态网站生成器 [Docusaurus 2](https://v2.docusaurus.io/) 构建的。
+
+### 自动安装依赖
+
+```
+$ yarn
+```
+
+### 本地开发
+
+```
+$ yarn start
+```
+
+此命令启动本地开发服务器并打开浏览器窗口。大多数更改都会实时反映，无需重新启动服务器。
+
+### 构建
+
+```
+$ yarn build
+```
+
+此命令将静态内容生成到`build`目录中，并且可以使用任何静态内容托管服务提供服务。
+
+### 部署
+
+```
+$ GIT_USER=<您的 GitHub 用户名> USE_SSH=true yarn deploy
+```
+
+如果您使用 GitHub Pages 进行托管，此命令是构建网站并将其推送到 `gh-pages` 分支的便捷方法。
diff --git a/blog/2022-08-03-control-refs.md b/blog/2022-08-03-control-refs.md
index 563da6a6..43e91489 100644
--- a/blog/2022-08-03-control-refs.md
+++ b/blog/2022-08-03-control-refs.md
@@ -12,7 +12,7 @@ Flet controls are objects and to access their properties we need to keep referen
 
 Consider the following example:
 
-```python {6-8,18,19,21}
+```python {6-7,18,19,21}
 import flet as ft
 
 def main(page):
@@ -84,7 +84,7 @@ All Flet controls have `ref` property.
 
 We could re-write our program to use references:
 
-```python {7-9,21-24}
+```python {7-8,21-23}
 import flet as ft
 
 
@@ -117,4 +117,4 @@ Now we can clearly see in `page.add()` the structure of the page and all the con
 
 Yes, the logic becomes a little bit more verbose as you need to add `.current.` to access ref's control, but it's a matter of personal preference :)
 
-[Give Flet a try](/docs/guides/python/getting-started) and [let us know](https://discord.gg/dzWXP8SHG8) what you think!
\ No newline at end of file
+[Give Flet a try](/docs/guides/python/getting-started) and [let us know](https://discord.gg/dzWXP8SHG8) what you think!
diff --git a/make_lang b/make_lang
new file mode 100755
index 00000000..b5002aa3
--- /dev/null
+++ b/make_lang
@@ -0,0 +1,50 @@
+#!/usr/bin/env bash
+# coding=utf-8
+# Powered by https://github.com/alan3344/website
+# Automatically create translation directory structure, files to be translated,
+# and `React Translate/translate()` tags for the project
+
+lang=$1
+override=$2
+color() {
+    echo "\033[0;$1m${@:2}\033[0m"
+}
+
+if [[ "$@" =~ "-h" ]] || [[ "$@" =~ "--help" ]]; then
+    echo Usage: "$(color 33 ./mkdir_lang) <$(color 32 language)> [$(color 31 --override)]"
+    echo "  $(color 32 language) \t$(color 33 Required)  The language name."
+    echo "  $(color 31 --override) \t$(color 33 Optional)  Override the existing files."
+    echo "  $(color 33 -h --help) \t$(color 33 Optional)  Show this help message."
+    echo
+    echo "$(color 33 Example): $(color 32 ./mkdir_lang) $(color 31 zh-CN)"
+    exit 0
+fi
+
+if [ -z "$lang" ]; then
+    echo "$(color 31 Error): $(color 33 language) is required."
+    echo "Try '$(color 32 ./mkdir_lang --help)' for more information."
+    exit 1
+fi
+
+if [ "$override" = "--override" ]; then
+    override="--override"
+else
+    override=""
+fi
+
+mkdir -p i18n/$lang/docusaurus-plugin-content-blog/
+mkdir -p i18n/$lang/docusaurus-plugin-content-docs/
+mkdir -p i18n/$lang/docusaurus-plugin-content-pages/
+mkdir -p i18n/$lang/docusaurus-theme-classic/
+npx docusaurus write-translations --locale $lang $override
+
+if [ "$override" = "--override" ]; then
+    override=""
+else
+    override="-n"
+fi
+
+cp -r $override blog/* i18n/$lang/docusaurus-plugin-content-blog/
+cp -r $override docs/* i18n/$lang/docusaurus-plugin-content-docs/
+cp -r $override src/pages/* i18n/$lang/docusaurus-plugin-content-pages/
+cp -r $override src/theme/* i18n/$lang/docusaurus-theme-classic/
diff --git a/src/components/signup-form/index.js b/src/components/signup-form/index.js
index 22b53164..a6cb872b 100644
--- a/src/components/signup-form/index.js
+++ b/src/components/signup-form/index.js
@@ -1,77 +1,118 @@
-import React, { useEffect, useRef, useState } from "react";
-import BrowserOnly from '@docusaurus/BrowserOnly';
-import HCaptcha from "@hcaptcha/react-hcaptcha";
-import styles from './styles.module.css';
+import React, { useEffect, useRef, useState } from 'react'
+import BrowserOnly from '@docusaurus/BrowserOnly'
+import HCaptcha from '@hcaptcha/react-hcaptcha'
+import styles from './styles.module.css'
+import Translate, { translate } from '@docusaurus/Translate'
 
 export default function SignupForm() {
-    const [token, setToken] = useState(null);
-    const [email, setEmail] = useState("");
-    const captchaRef = useRef(null);
+  const [token, setToken] = useState(null)
+  const [email, setEmail] = useState('')
+  const captchaRef = useRef(null)
 
-    const onSubmit = (event) => {
-        event.preventDefault();
-        captchaRef.current.execute();
-    };
+  const onSubmit = event => {
+    event.preventDefault()
+    captchaRef.current.execute()
+  }
 
-    const onExpire = () => {
-        console.log("hCaptcha Token Expired");
-    };
+  const onExpire = () => {
+    console.log('hCaptcha Token Expired')
+  }
 
-    const onError = (err) => {
-        console.log(`hCaptcha Error: ${err}`);
-    };
+  const onError = err => {
+    console.log(`hCaptcha Error: ${err}`)
+  }
 
-    useEffect(async () => {
-        if (token) {
-            var data = {
-                email: email,
-                captchaToken: token
-            };
+  useEffect(async () => {
+    if (token) {
+      var data = {
+        email: email,
+        captchaToken: token,
+      }
 
-            // send message
-            const response = await fetch("/api/email-signup", {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify(data),
-            });
-            const results = await response.json();
-            console.log(`Results:`, results);
-        }
-    }, [token, email]);
+      // send message
+      const response = await fetch('/api/email-signup', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(data),
+      })
+      const results = await response.json()
+      console.log(`Results:`, results)
+    }
+  }, [token, email])
 
-    return (
-        <div id="signup" className={styles.signupForm}>
-            <BrowserOnly fallback={<div>Loading...</div>}>
-                {() => {
-                    if (token) {
-                        // signup submitted
-                        return <div>Thank you! You will receive the confirmation email shortly.</div>
-                    } else if (window.location.href.endsWith('?signup-confirmed')) {
-                        // signup confirmed
-                        return <div><span style={{ fontSize: '25px', marginRight: '10px' }}>🎉</span>Congratulations! You have successfully subscribed to Flet newsletter.</div>
-                    } else {
-                        // signup form
-                        return <form onSubmit={onSubmit}>
-                            <h3>Subscribe to Flet newsletter for project updates and tutorials!</h3>
-                            <input
-                                type="email"
-                                value={email}
-                                placeholder="Your email address"
-                                onChange={(evt) => setEmail(evt.target.value)}
-                            />
-                            <input type="submit" value="Submit" />
-                            <HCaptcha
-                                sitekey="db49a301-288d-491b-9746-ebd3354dc5ff"
-                                size="invisible"
-                                onVerify={setToken}
-                                onError={onError}
-                                onExpire={onExpire}
-                                ref={captchaRef}
-                            />
-                        </form>
-                    }
-                }}
-            </BrowserOnly>
-        </div>
-    );
+  return (
+    <div id='signup' className={styles.signupForm}>
+      <BrowserOnly fallback={<div>Loading...</div>}>
+        {() => {
+          if (token) {
+            // signup submitted
+            return (
+              <div>
+                <Translate
+                  id='indexPage.text.sendEmailTip'
+                  description='Send email notification description'>
+                  Thank you! You will receive the confirmation email shortly.
+                </Translate>
+              </div>
+            )
+          } else if (window.location.href.endsWith('?signup-confirmed')) {
+            // signup confirmed
+            return (
+              <div>
+                <span style={{ fontSize: '25px', marginRight: '10px' }}>
+                  🎉
+                </span>
+                <Translate
+                  id='indexPage.text.subscribedTip'
+                  description='Subscription success notification description'>
+                  Congratulations! You have successfully subscribed to Flet
+                  newsletter.
+                </Translate>
+              </div>
+            )
+          } else {
+            // signup form
+            return (
+              <form onSubmit={onSubmit}>
+                <h3>
+                  <Translate
+                    id='indexPage.text.subscribedSuccessTip'
+                    description='Get update notification success description'>
+                    Subscribe to Flet newsletter for project updates and
+                    tutorials!
+                  </Translate>
+                </h3>
+                <input
+                  type='email'
+                  value={email}
+                  placeholder={translate({
+                    id: 'indexPage.input.emailPlaceholder',
+                    message: 'Your email address',
+                    description: 'Email placeholder text description',
+                  })}
+                  onChange={evt => setEmail(evt.target.value)}
+                />
+                <input
+                  type='submit'
+                  value={translate({
+                    id: 'indexPage.input.submit',
+                    message: 'Submit',
+                    description: 'Submit button text description',
+                  })}
+                />
+                <HCaptcha
+                  sitekey='db49a301-288d-491b-9746-ebd3354dc5ff'
+                  size='invisible'
+                  onVerify={setToken}
+                  onError={onError}
+                  onExpire={onExpire}
+                  ref={captchaRef}
+                />
+              </form>
+            )
+          }
+        }}
+      </BrowserOnly>
+    </div>
+  )
 }
diff --git a/src/pages/index.js b/src/pages/index.js
index 173890bd..43c28e4f 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -1,127 +1,268 @@
-import React from 'react';
-import clsx from 'clsx';
-import Layout from '@theme/Layout';
-import Link from '@docusaurus/Link';
-import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import useBaseUrl from '@docusaurus/useBaseUrl';
-import styles from './styles.module.css';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
+import React from 'react'
+import clsx from 'clsx'
+import Layout from '@theme/Layout'
+import Link from '@docusaurus/Link'
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
+import useBaseUrl from '@docusaurus/useBaseUrl'
+import styles from './styles.module.css'
+import Tabs from '@theme/Tabs'
+import TabItem from '@theme/TabItem'
 import SignupForm from '@site/src/components/signup-form'
-import CodeBlock from '@theme/CodeBlock';
+import CodeBlock from '@theme/CodeBlock'
+import Translate, { translate } from '@docusaurus/Translate'
 
 const features = [
   {
-    title: <>From idea to app in minutes</>,
+    title: (
+      <>
+        <Translate
+          id='indexPage.features.label1.title'
+          description='features label1 title'>
+          From idea to app in minutes
+        </Translate>
+      </>
+    ),
     imageUrl: 'img/pages/home/feature-bolt.svg',
     description: (
       <>
-        An internal tool or a dashboard for your team, weekend project, data entry form, kiosk app or high-fidelity prototype
-        - Flet is an ideal framework to quickly hack a great-looking interactive apps to serve a group of users.
+        <Translate
+          id='indexPage.features.label1.content'
+          description='features label1 content'>
+          An internal tool or a dashboard for your team, weekend project, data
+          entry form, kiosk app or high-fidelity prototype - Flet is an ideal
+          framework to quickly hack a great-looking interactive apps to serve a
+          group of users.
+        </Translate>
       </>
     ),
   },
   {
-    title: <>Simple architecture</>,
+    title: (
+      <>
+        <Translate
+          id='indexPage.features.label2.title'
+          description='features label2 title'>
+          Simple architecture
+        </Translate>
+      </>
+    ),
     imageUrl: 'img/pages/home/feature-house.svg',
     description: (
       <>
-        No more complex architecture with JavaScript frontend, REST API backend, database, cache, etc.
-        With Flet you just write a monolith stateful app in Python only and get multi-user, realtime Single-Page Application (SPA).
+        <Translate
+          id='indexPage.features.label2.content'
+          description='features label2 content'>
+          No more complex architecture with JavaScript frontend, REST API
+          backend, database, cache, etc. With Flet you just write a monolith
+          stateful app in Python only and get multi-user, realtime Single-Page
+          Application (SPA).
+        </Translate>
       </>
     ),
   },
   {
-    title: <>Batteries included</>,
+    title: (
+      <>
+        <Translate
+          id='indexPage.features.label3.title'
+          description='features label3 title'>
+          Batteries included
+        </Translate>
+      </>
+    ),
     imageUrl: 'img/pages/home/feature-battery.svg',
     description: (
       <>
-        To start developing with Flet, you just need your favorite IDE or text editor.
-        No SDKs, no thousands of dependencies, no complex tooling - Flet has built-in web server with assets hosting and desktop clients.
+        <Translate
+          id='indexPage.features.label3.content'
+          description='features label3 content'>
+          To start developing with Flet, you just need your favorite IDE or text
+          editor. No SDKs, no thousands of dependencies, no complex tooling -
+          Flet has built-in web server with assets hosting and desktop clients.
+        </Translate>
       </>
     ),
   },
   {
-    title: <>Powered by Flutter</>,
+    title: (
+      <>
+        <Translate
+          id='indexPage.features.label4.title'
+          description='features label4 title'>
+          Powered by Flutter
+        </Translate>
+      </>
+    ),
     imageUrl: 'img/pages/home/feature-flutter.svg',
     description: (
       <>
-        Flet UI is built with <a href="https://flutter.dev">Flutter</a>, so your app looks professional and can be delivered to any platform.
-        Flet simplifies Flutter model by combining smaller "widgets" into ready-to-use "controls" with imperative programming model.
+        <Translate
+          id='indexPage.features.label4.content1'
+          description='features label4 content1'>
+          Flet UI is built with
+        </Translate>{' '}
+        <a href='https://flutter.dev'>Flutter</a>
+        <Translate
+          id='indexPage.features.label4.content2'
+          description='features label4 content2'>
+          , so your app looks professional and can be delivered to any platform.
+          Flet simplifies Flutter model by combining smaller "widgets" into
+          ready-to-use "controls" with imperative programming model.
+        </Translate>
       </>
     ),
   },
   {
-    title: <>Speaks your language</>,
+    title: (
+      <>
+        <Translate
+          id='indexPage.features.label5.title'
+          description='features label5 title'>
+          Speaks your language
+        </Translate>
+      </>
+    ),
     imageUrl: 'img/pages/home/feature-language.svg',
     description: (
       <>
-        Flet is language-agnostic, so anyone on your team could develop Flet apps in their favorite language. <a href="/docs/guides/python/getting-started">Python</a> is already supported, Go, C# and others are <a href="/roadmap">coming next</a>.
+        <Translate
+          id='indexPage.features.label5.content1'
+          description='features label5 content1'>
+          Flet is language-agnostic, so anyone on your team could develop Flet
+          apps in their favorite language.
+        </Translate>{' '}
+        <a href='/docs/guides/python/getting-started'>Python</a>{' '}
+        <Translate
+          id='indexPage.features.label5.content2'
+          description='features label5 content2'>
+          is already supported, Go, C# and others are
+        </Translate>
+        <a href='/roadmap'>
+          {' '}
+          <Translate
+            id='indexPage.features.label5.content3'
+            description='features label5 content3'>
+            coming next.
+          </Translate>
+        </a>
       </>
     ),
   },
   {
-    title: <>Deliver to any device</>,
+    title: (
+      <>
+        <Translate
+          id='indexPage.features.label6.title'
+          description='features label6 title'>
+          Deliver to any device
+        </Translate>
+      </>
+    ),
     imageUrl: 'img/pages/home/feature-mobile.svg',
     description: (
       <>
-        Deploy Flet app as a web app and view it in a browser. Package it as a standalone desktop app for Windows, macOS and Linux.
-        Install it on mobile as <a href="https://web.dev/what-are-pwas/">PWA</a> or view via Flet app for iOS and Android.
+        <Translate
+          id='indexPage.features.label6.content1'
+          description='features label6 content1'>
+          Deploy Flet app as a web app and view it in a browser. Package it as a
+          standalone desktop app for Windows, macOS and Linux. Install it on
+          mobile as
+        </Translate>{' '}
+        <a href='https://web.dev/what-are-pwas/'>PWA</a>{' '}
+        <Translate
+          id='indexPage.features.label6.content2'
+          description='features label6 content2'>
+          or view via Flet app for iOS and Android.
+        </Translate>
       </>
     ),
   },
-];
+]
 
 function Feature({ imageUrl, title, description }) {
-  const imgUrl = useBaseUrl(imageUrl);
+  const imgUrl = useBaseUrl(imageUrl)
   return (
     <div className={clsx('col col--4', styles.feature)}>
       {imgUrl && (
-        <div className="text--center">
+        <div className='text--center'>
           <img className={styles.featureImage} src={imgUrl} alt={title} />
         </div>
       )}
       <h3>{title}</h3>
       <p>{description}</p>
     </div>
-  );
+  )
 }
 
 function Home() {
-  const context = useDocusaurusContext();
-  const { siteConfig = {} } = context;
+  const context = useDocusaurusContext()
+  const { siteConfig = {} } = context
   return (
     <Layout
-      title={`${siteConfig.customFields.heroTitle}`}
-      description={`${siteConfig.tagline}`}>
+      title={translate({
+        id: 'indexPage.title.heroTitle',
+        message: 'The fastest way to build Flutter apps in Python',
+        description: 'the title heroTitle description',
+      })}
+      description={translate({
+        id: 'indexPage.title.description',
+        message:
+          'Build internal web apps quickly in the language you already know.',
+        description: 'the description heroSubTitle description',
+      })}>
       <main>
-        <div className="container margin-bottom--lg">
+        <div className='container margin-bottom--lg'>
           <div className={clsx('flet-hero', styles.heroBanner)}>
-            <div className="row">
-              <div className="col  col--6">
+            <div className='row'>
+              <div className='col  col--6'>
                 {/* <h2>It's amazing how little code you need to get amazing results!</h2> */}
-                <img src="img/pages/home/flet-home.png" style={{ width: '100%' }}></img>
+                <img
+                  src='img/pages/home/flet-home.png'
+                  style={{ width: '100%' }}></img>
               </div>
-              <div className="col col--6">
-                <h1 className="hero__title">{siteConfig.customFields.heroTitle}</h1>
-                <p className="hero__subtitle">{siteConfig.customFields.heroSubTitle}</p>
+              <div className='col col--6'>
+                <h1 className='hero__title'>
+                  <Translate
+                    id='indexPage.heroTitle'
+                    description='the heroTitle description'>
+                    The fastest way to build Flutter apps in Python
+                  </Translate>
+                </h1>
+                <p className='hero__subtitle'>
+                  <Translate
+                    id='indexPage.heroSubTitle'
+                    description='the heroSubTitle description'>
+                    Flet enables developers to easily build realtime web, mobile
+                    and desktop apps in Python. No frontend experience required.
+                  </Translate>
+                </p>
                 <div className={styles.buttons}>
                   <Link
                     className={styles.indexCtasGetStartedButton}
                     to={useBaseUrl('docs/')}>
-                    Get Started
+                    <Translate
+                      id='indexPage.button.getStarted'
+                      description='the getStarted button description'>
+                      Get Started
+                    </Translate>
                   </Link>
                 </div>
               </div>
             </div>
           </div>
         </div>
-        <div className="container text--center">
-          <h2>Main features</h2>
+        <div className='container text--center'>
+          <h2>
+            <Translate
+              id='indexPage.features.title'
+              description='the features title description'>
+              Main features
+            </Translate>
+          </h2>
           {features && features.length > 0 && (
             <section className={styles.features}>
-              <div className="container">
-                <div className="row">
+              <div className='container'>
+                <div className='row'>
                   {features.map((props, idx) => (
                     <Feature key={idx} {...props} />
                   ))}
@@ -133,7 +274,7 @@ function Home() {
         <SignupForm />
       </main>
     </Layout>
-  );
+  )
 }
 
-export default Home;
\ No newline at end of file
+export default Home