diff --git a/.eslintignore b/.eslintignore
new file mode 100644
index 00000000..397720bc
--- /dev/null
+++ b/.eslintignore
@@ -0,0 +1,4 @@
+src/locales/*.json
+node_modules/
+dist/
+build/
\ No newline at end of file
diff --git a/package.json b/package.json
index 591f31f8..96fa5455 100644
--- a/package.json
+++ b/package.json
@@ -72,11 +72,14 @@
     "css-doodle": "^0.7.6",
     "events": "^3.0.0",
     "file-saver": "^2.0.2",
+    "i18next": "^25.2.1",
+    "i18next-browser-languagedetector": "^8.1.0",
     "lodash": "^4.17.15",
     "mark.js": "^8.11.1",
     "nprogress": "^0.2.0",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
+    "react-i18next": "^15.5.2",
     "react-router-dom": "^5.1.2",
     "semantic-ui-css": "^2.4.1",
     "semantic-ui-react": "^0.88.1",
diff --git a/src/App.js b/src/App.js
index 3d9cb4f3..6004752c 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,5 +1,6 @@
 import 'whatwg-fetch';
 import ReactDOM from 'react-dom';
+import './i18n'; // Initialize i18n
 import MainContainer from './containers/MainContainer';
 // import CopybookContainer from './containers/CopybookContainer';
 import NoticeContainer from './containers/NoticeContainer';
diff --git a/src/components/LanguageSwitch.js b/src/components/LanguageSwitch.js
new file mode 100644
index 00000000..ab6a3af9
--- /dev/null
+++ b/src/components/LanguageSwitch.js
@@ -0,0 +1,37 @@
+import React from 'react';
+import { Dropdown, Icon } from 'semantic-ui-react';
+import { useTranslation } from 'react-i18next';
+
+const languages = [
+  { key: 'en', text: 'English', value: 'en', flag: 'us' },
+  { key: 'zh', text: '中文', value: 'zh', flag: 'cn' },
+  { key: 'de', text: 'Deutsch', value: 'de', flag: 'de' },
+  { key: 'fr', text: 'Français', value: 'fr', flag: 'fr' }
+];
+
+export default function LanguageSwitch() {
+  const { i18n } = useTranslation();
+
+  const handleLanguageChange = (e, { value }) => {
+    i18n.changeLanguage(value);
+  };
+
+  const currentLanguage = languages.find(lang => lang.value === i18n.language) || languages[0];
+
+  return (
+    <Dropdown
+      trigger={
+        <span className="language-switch">
+          <Icon name="world" />
+          {currentLanguage.text}
+        </span>
+      }
+      options={languages}
+      pointing="top right"
+      icon={null}
+      value={i18n.language}
+      onChange={handleLanguageChange}
+      selectOnBlur={false}
+    />
+  );
+}
\ No newline at end of file
diff --git a/src/components/SearchBar.js b/src/components/SearchBar.js
index ec64d966..e13f7cdd 100644
--- a/src/components/SearchBar.js
+++ b/src/components/SearchBar.js
@@ -1,5 +1,6 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { Dropdown, Icon, Input } from 'semantic-ui-react';
+import { useTranslation } from 'react-i18next';
 
 // http://githut.info/
 const topProgramLan = [
@@ -29,6 +30,7 @@ const topProgramLan = [
 ];
 
 export default function SearchBar(props) {
+  const { t } = useTranslation();
   const inputEl = useRef(null);
   const inputSize = useInputSize('huge');
   const [state, setState] = useState({
@@ -78,16 +80,16 @@ export default function SearchBar(props) {
   return (
     <div className='search-bar'>
       <div className='search-bar__desc'>
-        Search over GitHub, Bitbucket, GitLab to find real-world usage variable names
+        {t('searchBar.description')}
       </div>
       <form action="javascript:void(0);">
         <Input ref={inputEl}
           onChange={() => updateState({ valChanged: true })}
           className='search-bar__input'
-          icon fluid placeholder={props.placeholder} size={inputSize}>
+          icon fluid placeholder={t('searchBar.placeholder')} size={inputSize}>
           <Dropdown floating text='' icon='filter' className='search-bar__dropdown'>
             <Dropdown.Menu>
-              <Dropdown.Item icon='undo' text='All 90 Languages (Reset)' onClick={handleRestLang} />
+              <Dropdown.Item icon='undo' text={t('searchBar.allLanguages')} onClick={handleRestLang} />
               <Dropdown.Menu scrolling className='fix-dropdown-menu'>
                 {langItems}
               </Dropdown.Menu>
@@ -106,7 +108,7 @@ export default function SearchBar(props) {
         </Input>
       </form>
       <div className='search-bar__plugins'>
-        Extensions:&nbsp;
+        {t('searchBar.extensions')}&nbsp;
         <a href='https://github.com/unbug/codelf#codelf-for-vs-code'
           target='_blank' rel='noopener noreferrer'>VS Code</a>,&nbsp;
         <a className='text-muted' href='https://atom.io/packages/codelf'
diff --git a/src/components/SearchError.js b/src/components/SearchError.js
index 1abe1ee2..7f48eb0d 100644
--- a/src/components/SearchError.js
+++ b/src/components/SearchError.js
@@ -1,13 +1,17 @@
 import React from 'react';
 import { Label } from 'semantic-ui-react';
+import { useTranslation } from 'react-i18next';
 
 export default function SearchError() {
+  const { t } = useTranslation();
+  
   return (
     <div className='search-error'>
-      <div>Nothing found, please try  <Label color='grey' size='mini'>Quick Search</Label> or come back later :)</div>
-      <div>You can also get help from <a href='https://github.com/unbug/codelf/issues'
-        target='_blank'
-        rel="noopener noreferrer" >https://github.com/unbug/codelf/issues</a>.
+      <div>
+        Nothing found, please try <Label color='grey' size='mini'>{t('search.quickSearch')}</Label> or come back later :)
+      </div>
+      <div>
+        {t('search.helpText')}
       </div>
     </div>
   );
diff --git a/src/components/SourceCode.js b/src/components/SourceCode.js
index 2f22ed11..456deba0 100644
--- a/src/components/SourceCode.js
+++ b/src/components/SourceCode.js
@@ -1,10 +1,12 @@
 import React from 'react';
 import { Modal, Button, Dropdown, Label } from 'semantic-ui-react';
+import { useTranslation } from 'react-i18next';
 import * as Tools from '../utils/Tools';
 import Loading from "./Loading";
 import useCodeHighlighting from './hooks/useCodeHighlighting';
 
 export default function SourceCode(props) {
+  const { t } = useTranslation();
   const codeEl = useCodeHighlighting([props.sourceCode, props.sourceCodeVisible], props.sourceCodeVariable ?.keyword);
 
   function handleClose() {
@@ -14,15 +16,15 @@ export default function SourceCode(props) {
   if (!props.sourceCodeVariable || !props.sourceCodeRepo) { return null; }
   const sourceCodeVariable = props.sourceCodeVariable;
   const dropText = (
-    <div>All Codes <Label size='mini' circular color={sourceCodeVariable.color}>
+    <div>{t('variable.codes')} <Label size='mini' circular color={sourceCodeVariable.color}>
       {sourceCodeVariable.repoList.length}
     </Label></div>
   );
   const dropdownItems = props.sourceCodeVariable && props.sourceCodeVariable.repoList.map(repo => {
     return (
       <Dropdown.Item key={Tools.uuid()}>
-        <Button size='mini' onClick={() => props.onRequestSourceCode(repo)}>Codes</Button>
-        <Button size='mini' as='a' href={repo.repo} target='_blank'>Repo</Button>
+        <Button size='mini' onClick={() => props.onRequestSourceCode(repo)}>{t('variable.codes')}</Button>
+        <Button size='mini' as='a' href={repo.repo} target='_blank'>{t('variable.repo')}</Button>
         <Label size='mini' circular color={Tools.randomLabelColor()}>{repo.language}</Label>
       </Dropdown.Item>
     )
@@ -39,7 +41,7 @@ export default function SourceCode(props) {
             </Dropdown.Menu>
           </Dropdown.Menu>
         </Dropdown>
-        <Button size='mini' as='a' href={props.sourceCodeRepo.repo} target='_blank'>Repo</Button>
+        <Button size='mini' as='a' href={props.sourceCodeRepo.repo} target='_blank'>{t('variable.repo')}</Button>
       </Modal.Header>
       <Modal.Content>
         {props.sourceCodeRequesting ? <Loading /> : ''}
diff --git a/src/components/Suggestion.js b/src/components/Suggestion.js
index 1305c70a..e01c4821 100644
--- a/src/components/Suggestion.js
+++ b/src/components/Suggestion.js
@@ -1,14 +1,17 @@
 import React from 'react';
 import { Label } from 'semantic-ui-react';
+import { useTranslation } from 'react-i18next';
 
 export default function Suggestion(props) {
+  const { t } = useTranslation();
+  
   if (!props.suggestion || !props.suggestion.length) { return null; }
   const list = props.suggestion.map((item, i) => {
     return <Label key={i} circular size='mini' color='grey' as='a' href={`#${item}`}>{item}</Label>
   });
   return (
     <div className='suggestion'>
-      <Label color='grey' size='mini'>Quick Search:</Label> {list}
+      <Label color='grey' size='mini'>{t('search.quickSearch')}:</Label> {list}
     </div>
   )
 }
diff --git a/src/components/VariableItem.js b/src/components/VariableItem.js
index a0d0b2d0..feb59c2e 100644
--- a/src/components/VariableItem.js
+++ b/src/components/VariableItem.js
@@ -1,13 +1,16 @@
 import React from 'react';
 import { Button, Label, Popup } from 'semantic-ui-react';
+import { useTranslation } from 'react-i18next';
 import * as Tools from '../utils/Tools';
 
 export default function VariableItem(props) {
+  const { t } = useTranslation();
   const clipboardId = `clipboardId-${Tools.uuid()}`;
   const variable = props.variable;
   let clipboard = null;
 
   function handlePopOnMount() {
+    /* global ClipboardJS */
     clipboard = new ClipboardJS(`#${clipboardId}`);
   }
 
@@ -26,11 +29,11 @@ export default function VariableItem(props) {
       onUnmount={handlePopUnmount}
       hoverable={true}>
       <Button.Group vertical basic style={{ border: 0 }}>
-        <Button compact as='a' href={`#${variable.keyword}`}>Search</Button>
-        <Button compact as='a' href={variable.repoLink} target='_blank'>Repo</Button>
-        <Button compact data-clipboard-text={variable.keyword} id={clipboardId}>Copy</Button>
+        <Button compact as='a' href={`#${variable.keyword}`}>{t('variable.search')}</Button>
+        <Button compact as='a' href={variable.repoLink} target='_blank'>{t('variable.repo')}</Button>
+        <Button compact data-clipboard-text={variable.keyword} id={clipboardId}>{t('variable.copy')}</Button>
         <Button compact onClick={() => props.onOpenSourceCode(variable)}>
-          [{variable.repoLang}] Codes <Label size='mini' circular color={variable.color}>{variable.repoList.length}</Label>
+          [{variable.repoLang}] {t('variable.codes')} <Label size='mini' circular color={variable.color}>{variable.repoList.length}</Label>
         </Button>
       </Button.Group>
     </Popup>
diff --git a/src/containers/MainContainer.js b/src/containers/MainContainer.js
index 8c3cbe7b..75765bbf 100644
--- a/src/containers/MainContainer.js
+++ b/src/containers/MainContainer.js
@@ -1,5 +1,6 @@
 import React, { useEffect, useReducer, useCallback } from 'react';
 import { Container } from 'semantic-ui-react';
+import { useTranslation } from 'react-i18next';
 import SearchBar from '../components/SearchBar';
 import TitleLogo from '../components/TitleLogo';
 import SearchCodeModel from '../models/SearchCodeModel';
@@ -48,6 +49,7 @@ function reducer(state, action) {
 
 
 export default function MainContainer(props) {
+  const { t } = useTranslation();
   const [state, dispatch] = useReducer(reducer, initState);
 
   useEffect(() => {
@@ -191,7 +193,7 @@ export default function MainContainer(props) {
   return (
     <Container className='main-container'>
       <TitleLogo />
-      <SearchBar placeholder='AI 人工智能' {...state} onSearch={handleSearch} />
+      <SearchBar placeholder={t('searchBar.placeholder')} {...state} onSearch={handleSearch} />
       <Suggestion {...state} />
       {state.variableRequesting ? <Loading /> : (state.isError ? <SearchError /> : '')}
       {renderSloganImage()}
diff --git a/src/containers/NavBarContainer.js b/src/containers/NavBarContainer.js
index b06d9499..dfd34840 100644
--- a/src/containers/NavBarContainer.js
+++ b/src/containers/NavBarContainer.js
@@ -1,11 +1,11 @@
 import React from 'react';
-import { Container, Icon, Popup } from 'semantic-ui-react';
+import { Container, Icon } from 'semantic-ui-react';
+import { useTranslation } from 'react-i18next';
+import LanguageSwitch from '../components/LanguageSwitch';
 // import CopybookModel from '../models/CopybookModel';
 
 export default function NavBarContainer() {
-  function handleOpenCopybook() {
-    // CopybookModel.update({ visible: true });
-  }
+  const { t } = useTranslation();
 
   return (
     <Container className='nav-bar-container'>
@@ -29,13 +29,14 @@ export default function NavBarContainer() {
           Sorry, GitHub stars organize tool currently is not available, <a href="https://github.com/unbug/codelf/projects/2" target='_blank' rel='noopener noreferrer'>new version</a> is coming soon :)
         </Popup>
         */}
+        <LanguageSwitch />
         <a href='https://unbug.github.io' className='bookmark-btn animated fadeInDown'
-          title='一分钟读论文'
+          title={t('navbar.bookmark')}
           target='_blank' rel='noopener noreferrer'>
           <Icon name='bookmark' />
         </a>
         <a href='https://github.com/unbug/codelf' className='github-corner animated fadeInDown'
-          title='Star me on GitHub'
+          title={t('navbar.starMe')}
           target='_blank' rel='noopener noreferrer'>
           <Icon name='github square' />
         </a>
diff --git a/src/containers/NoticeContainer.js b/src/containers/NoticeContainer.js
index 1bec2df6..b42f2039 100644
--- a/src/containers/NoticeContainer.js
+++ b/src/containers/NoticeContainer.js
@@ -1,29 +1,31 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { Icon, Popup } from 'semantic-ui-react';
+import { useTranslation } from 'react-i18next';
 
 export default function NoticeContainer() {
+  const { t } = useTranslation();
   const listEl = useRef(null);
-  const [activeIndex, setDisable] = useSliderEffect(listEl);
+  const [, setDisable] = useSliderEffect(listEl);
 
   return (
     <div className='notice-container' ref={listEl} onMouseEnter={() => setDisable(true)} onMouseLeave={() => setDisable(false)}>
       <a className='animated fadeIn show' target='_blank' rel='noopener noreferrer'
         href='https://unbug.github.io'>
-        <Icon name='newspaper' /> [Micropaper]一分钟读懂一篇论文
+        <Icon name='newspaper' /> {t('notices.micropaper')}
       </a>
       <a className='animated fadeIn' target='_blank' rel='noopener noreferrer'
         href='https://github.com/unbug/snts'>
-        <Icon name='heartbeat' /> SAY NO TO SUICIDE PUBLIC LICENSE
+        <Icon name='heartbeat' /> {t('notices.suicide')}
       </a>
       <a className='animated fadeIn' target='_blank' rel='noopener noreferrer' href='//mihtool.com/'>
-        <Icon name='code' /> [MIHTool] iOS 上调试和优化页面的工具
+        <Icon name='code' /> {t('notices.mihtool')}
       </a>
       <a className='animated fadeIn' target='_blank' rel='noopener noreferrer' href='https://www.wasmrocks.com/'>
-        <Icon name='hand rock' /> WebAssembly Rocks
+        <Icon name='hand rock' /> {t('notices.wasmRocks')}
       </a>
       <a className='animated fadeIn' target='_blank' rel='noopener noreferrer'
         href='https://github.com/unbug/react-native-train/blob/master/README.md'>
-        <Icon name='video' /> [开源] React Native 开发培训资料和视频
+        <Icon name='video' /> {t('notices.reactNative')}
       </a>
       <a className='animated fadeIn' target='_blank' rel='noopener noreferrer'
         href='https://job.toutiao.com/s/gKn4Ea'>
@@ -55,7 +57,7 @@ export default function NoticeContainer() {
             </div>
           }
           trigger={
-            <span><Icon name='send' />[内推]字节跳动中国/美国/新加坡社招/校招/实习</span>
+            <span><Icon name='send' />{t('notices.bytedance')}</span>
           } />
       </a>
     </div>
diff --git a/src/i18n.js b/src/i18n.js
new file mode 100644
index 00000000..23786c7b
--- /dev/null
+++ b/src/i18n.js
@@ -0,0 +1,64 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
+
+import en from './locales/en.json';
+import zh from './locales/zh.json';
+import de from './locales/de.json';
+import fr from './locales/fr.json';
+
+i18n
+  .use(LanguageDetector)
+  .use(initReactI18next)
+  .init({
+    fallbackLng: 'en',
+    lng: undefined, // Let language detector determine the language
+    debug: false,
+    
+    // Language detection options
+    detection: {
+      order: ['localStorage', 'navigator', 'htmlTag'],
+      caches: ['localStorage'],
+      lookupLocalStorage: 'codelf-language',
+      convertDetectedLanguage: (lng) => {
+        // Convert Chinese variants to 'zh'
+        if (lng.startsWith('zh')) {
+          return 'zh';
+        }
+        // Convert English variants to 'en'
+        if (lng.startsWith('en')) {
+          return 'en';
+        }
+        // Convert German variants to 'de'
+        if (lng.startsWith('de')) {
+          return 'de';
+        }
+        // Convert French variants to 'fr'
+        if (lng.startsWith('fr')) {
+          return 'fr';
+        }
+        return lng;
+      }
+    },
+
+    interpolation: {
+      escapeValue: false,
+    },
+
+    resources: {
+      en: {
+        translation: en
+      },
+      zh: {
+        translation: zh
+      },
+      de: {
+        translation: de
+      },
+      fr: {
+        translation: fr
+      }
+    }
+  });
+
+export default i18n;
\ No newline at end of file
diff --git a/src/locales/de.json b/src/locales/de.json
new file mode 100644
index 00000000..a1d3d551
--- /dev/null
+++ b/src/locales/de.json
@@ -0,0 +1,47 @@
+{
+  "searchBar": {
+    "description": "Durchsuche GitHub, Bitbucket, GitLab um echte Verwendungen von Variablennamen zu finden",
+    "placeholder": "KI Künstliche Intelligenz",
+    "allLanguages": "Alle 90 Sprachen (Zurücksetzen)",
+    "extensions": "Erweiterungen:",
+    "filter": "Sprachen filtern"
+  },
+  "search": {
+    "button": "Suchen",
+    "loading": "Suche läuft...",
+    "noResults": "Nichts gefunden, bitte versuche Schnellsuche oder komm später wieder :)",
+    "quickSearch": "Schnellsuche",
+    "helpText": "Du kannst auch Hilfe unter https://github.com/unbug/codelf/issues finden."
+  },
+  "variable": {
+    "search": "Suchen",
+    "repo": "Repo",
+    "copy": "Kopieren",
+    "codes": "Code"
+  },
+  "navbar": {
+    "starMe": "Markiere mich auf GitHub",
+    "bookmark": "一分钟读论文",
+    "language": "Sprache"
+  },
+  "notices": {
+    "micropaper": "[Micropaper]一分钟读懂一篇论文",
+    "suicide": "SAG NEIN ZUR SUICIDE PUBLIC LICENSE",
+    "mihtool": "[MIHTool] iOS Tool zum Debuggen und Optimieren von Seiten",
+    "wasmRocks": "WebAssembly ist großartig",
+    "reactNative": "[Open Source] React Native Entwicklungsschulungsmaterialien und Videos",
+    "bytedance": "[Empfehlung]ByteDance China/USA/Singapur Stellenausschreibung/Campus-Rekrutierung/Praktikum"
+  },
+  "donate": {
+    "title": "Spendier mir einen Kaffee",
+    "description": "Wenn dir dieses Projekt geholfen hat, ziehe bitte eine Spende in Betracht, um es zu unterstützen."
+  },
+  "sourceCode": {
+    "title": "Quellcode",
+    "close": "Schließen",
+    "repository": "Repository"
+  },
+  "suggestion": {
+    "title": "Vorschläge"
+  }
+}
\ No newline at end of file
diff --git a/src/locales/en.json b/src/locales/en.json
new file mode 100644
index 00000000..1503ea5c
--- /dev/null
+++ b/src/locales/en.json
@@ -0,0 +1,47 @@
+{
+  "searchBar": {
+    "description": "Search over GitHub, Bitbucket, GitLab to find real-world usage variable names",
+    "placeholder": "AI Artificial Intelligence",
+    "allLanguages": "All 90 Languages (Reset)",
+    "extensions": "Extensions:",
+    "filter": "Filter languages"
+  },
+  "search": {
+    "button": "Search",
+    "loading": "Searching...",
+    "noResults": "Nothing found, please try Quick Search or come back later :)",
+    "quickSearch": "Quick Search",
+    "helpText": "You can also get help from https://github.com/unbug/codelf/issues."
+  },
+  "variable": {
+    "search": "Search",
+    "repo": "Repo",
+    "copy": "Copy",
+    "codes": "Codes"
+  },
+  "navbar": {
+    "starMe": "Star me on GitHub",
+    "bookmark": "一分钟读论文",
+    "language": "Language"
+  },
+  "notices": {
+    "micropaper": "[Micropaper]一分钟读懂一篇论文",
+    "suicide": "SAY NO TO SUICIDE PUBLIC LICENSE",
+    "mihtool": "[MIHTool] iOS 上调试和优化页面的工具",
+    "wasmRocks": "WebAssembly Rocks",
+    "reactNative": "[开源] React Native 开发培训资料和视频",
+    "bytedance": "[内推]字节跳动中国/美国/新加坡社招/校招/实习"
+  },
+  "donate": {
+    "title": "Buy me a coffee",
+    "description": "If this project helped you, please consider donating to support it."
+  },
+  "sourceCode": {
+    "title": "Source Code",
+    "close": "Close",
+    "repository": "Repository"
+  },
+  "suggestion": {
+    "title": "Suggestions"
+  }
+}
\ No newline at end of file
diff --git a/src/locales/fr.json b/src/locales/fr.json
new file mode 100644
index 00000000..79bfcbcc
--- /dev/null
+++ b/src/locales/fr.json
@@ -0,0 +1,47 @@
+{
+  "searchBar": {
+    "description": "Rechercher sur GitHub, Bitbucket, GitLab pour trouver des usages réels de noms de variables",
+    "placeholder": "IA Intelligence Artificielle",
+    "allLanguages": "Tous les 90 langages (Réinitialiser)",
+    "extensions": "Extensions:",
+    "filter": "Filtrer les langages"
+  },
+  "search": {
+    "button": "Rechercher",
+    "loading": "Recherche en cours...",
+    "noResults": "Rien trouvé, veuillez essayer la recherche rapide ou revenir plus tard :)",
+    "quickSearch": "Recherche rapide",
+    "helpText": "Vous pouvez également obtenir de l'aide sur https://github.com/unbug/codelf/issues."
+  },
+  "variable": {
+    "search": "Rechercher",
+    "repo": "Dépôt",
+    "copy": "Copier",
+    "codes": "Codes"
+  },
+  "navbar": {
+    "starMe": "Étoile-moi sur GitHub",
+    "bookmark": "一分钟读论文",
+    "language": "Langue"
+  },
+  "notices": {
+    "micropaper": "[Micropaper]一分钟读懂一篇论文",
+    "suicide": "DITES NON À LA SUICIDE PUBLIC LICENSE",
+    "mihtool": "[MIHTool] Outil iOS pour déboguer et optimiser les pages",
+    "wasmRocks": "WebAssembly est génial",
+    "reactNative": "[Open Source] Matériels de formation et vidéos pour le développement React Native",
+    "bytedance": "[Recommandation]ByteDance Chine/États-Unis/Singapour recrutement social/campus/stage"
+  },
+  "donate": {
+    "title": "Offrez-moi un café",
+    "description": "Si ce projet vous a aidé, veuillez envisager de faire un don pour le soutenir."
+  },
+  "sourceCode": {
+    "title": "Code source",
+    "close": "Fermer",
+    "repository": "Dépôt"
+  },
+  "suggestion": {
+    "title": "Suggestions"
+  }
+}
\ No newline at end of file
diff --git a/src/locales/zh.json b/src/locales/zh.json
new file mode 100644
index 00000000..e2fa91c7
--- /dev/null
+++ b/src/locales/zh.json
@@ -0,0 +1,47 @@
+{
+  "searchBar": {
+    "description": "搜索 GitHub、Bitbucket、GitLab 项目，寻找现实世界中变量名的使用",
+    "placeholder": "AI 人工智能",
+    "allLanguages": "全部 90 种语言（重置）",
+    "extensions": "扩展插件：",
+    "filter": "筛选语言"
+  },
+  "search": {
+    "button": "搜索",
+    "loading": "搜索中...",
+    "noResults": "没有找到结果，请尝试快速搜索或稍后再试 :)",
+    "quickSearch": "快速搜索",
+    "helpText": "您也可以从 https://github.com/unbug/codelf/issues 获得帮助。"
+  },
+  "variable": {
+    "search": "搜索",
+    "repo": "代码库",
+    "copy": "复制",
+    "codes": "代码"
+  },
+  "navbar": {
+    "starMe": "在 GitHub 上为我加星",
+    "bookmark": "一分钟读论文",
+    "language": "语言"
+  },
+  "notices": {
+    "micropaper": "[微论文] 一分钟读懂一篇论文",
+    "suicide": "拒绝自杀公共许可证",
+    "mihtool": "[MIHTool] iOS 上调试和优化页面的工具",
+    "wasmRocks": "WebAssembly 优秀",
+    "reactNative": "[开源] React Native 开发培训资料和视频",
+    "bytedance": "[内推] 字节跳动中国/美国/新加坡社招/校招/实习"
+  },
+  "donate": {
+    "title": "请我喝杯咖啡",
+    "description": "如果这个项目对您有帮助，请考虑捐赠以支持它。"
+  },
+  "sourceCode": {
+    "title": "源代码",
+    "close": "关闭",
+    "repository": "代码库"
+  },
+  "suggestion": {
+    "title": "建议"
+  }
+}
\ No newline at end of file
diff --git a/styles/_nav-bar-container.scss b/styles/_nav-bar-container.scss
index e1d6fcc4..484e8e88 100755
--- a/styles/_nav-bar-container.scss
+++ b/styles/_nav-bar-container.scss
@@ -36,9 +36,22 @@
     .copybook-btn {
       display: none;
     }
+    // Language switcher styles
+    .language-switch {
+      color: #70B7FD;
+      font-size: 0.9rem;
+      margin-top: 0.5rem;
+      &:hover {
+        color: #59AAF9;
+      }
+      i {
+        font-size: 1.2rem !important;
+        margin-right: 0.3rem !important;
+      }
+    }
     $anim-delay: 150ms;
     $anim-duration: 500ms;
-    @for $i from 1 through 5 {
+    @for $i from 1 through 6 {
       >*:nth-child(#{$i}) {
         animation-duration: $anim-duration;
         animation-delay: 500 + $anim-delay*($i - 1);
@@ -62,6 +75,13 @@
           font-size: 3.3rem;
         }
       }
+      .language-switch {
+        margin-top: 1rem;
+        font-size: 1rem;
+        i {
+          font-size: 1.5rem !important;
+        }
+      }
     }
   }
 }