diff --git a/assets/i18next.js b/assets/i18next.js
new file mode 100644
index 0000000..3b23fe0
--- /dev/null
+++ b/assets/i18next.js
@@ -0,0 +1,37 @@
+i18next
+  .use(i18nextXHRBackend)
+  .use(i18nextBrowserLanguageDetector)
+  .init({
+    fallbackLng: 'zh',
+    whitelist: ['en', 'zh'],
+    debug: true,
+    backend: {
+      loadPath: 'https://gist.githubusercontent.com/patcon/1f68d3efd30360048bce81b3a7655c5b/raw/{{lng}}.json',
+      crossDomain: true
+    }
+  }, function(err, t) {
+    translations = [
+      'x-expand',
+      'x-collapse',
+      'x-recent',
+      'x-zoom',
+      'x-help',
+      'add',
+      'edit',
+      'update'
+    ]
+    translations.forEach(function (key) {
+      if (key.startsWith('x-')) {
+        key = key.substring(2)
+        document.getElementById('desktop-'+key).setAttribute("data-content", i18next.t('index.'+key))
+        document.getElementById('mobile-'+key).setAttribute("data-content", i18next.t('index.'+key))
+      } else {
+        document.getElementById(key).setAttribute("data-content", i18next.t('index.'+key))
+      }
+    });
+    document.querySelector('[for=add-only]').innerHTML = i18next.t('index.add-link');
+    document.querySelector('[for=create-add]').innerHTML = i18next.t('index.create-add-hackpad');
+    document.querySelector('[name=new-link-title]').setAttribute('placeholder', i18next.t('index.link-name'));
+    document.querySelector('[name=new-link-url]').setAttribute('placeholder', i18next.t('index.link-url'));
+    document.querySelector('[name=new-pad-name]').setAttribute('placeholder', i18next.t('index.hackpad-name'));
+  });
diff --git a/views/_template.jade b/views/_template.jade
index 024f171..308ea08 100644
--- a/views/_template.jade
+++ b/views/_template.jade
@@ -45,6 +45,12 @@ html
     link(rel="stylesheet",type="text/css",href="/assets/semantic-ui/0.19.0/css/semantic.min.css")
     script(type="text/javascript",src="/assets/semantic-ui/0.19.0/javascript/semantic.min.js")
 
+    // i18next
+    script(src="//unpkg.com/i18next/i18next.js")
+    script(src="//unpkg.com/i18next-xhr-backend/i18nextXHRBackend.js")
+    script(src="//unpkg.com/i18next-browser-languagedetector/i18nextBrowserLanguageDetector.js")
+    script(type="text/javascript",src="/assets/i18next.js")
+
       
     //-meta(http-equiv="X-UA-Compatible",content="IE=edge")
     //-meta(name="description",content="")
diff --git a/views/index.jade b/views/index.jade
index dc156af..83b18f5 100644
--- a/views/index.jade
+++ b/views/index.jade
@@ -10,17 +10,17 @@ block body
       .ui.borderless.menu
         include white_label-shortcuts-nav
         .ui.dropdown.icon.item.history
-          i.icon.time
+          i.icon.time(id="desktop-recent")
           include foldr_history-menu
         .ui.dropdown.icon.item.about
-          i.icon.help
+          i.icon.help(id="desktop-help")
           include help-menu
         a.right.item.expand.button.collapsed.mode.hidden.desktop.only
-          i.icon.arrow.right(data-content="展開")
+          i.icon.arrow.right(id="desktop-expand", data-content="展開")
         a.right.item.collapse.button.expanded.mode.desktop.only
-          i.icon.arrow.left(data-content="收合")
+          i.icon.arrow.left(id="desktop-collapse", data-content="收合")
         .right.icon.item.zoom.ui.dropdown
-          i.icon.zoom.in
+          i.icon.zoom.in(id="desktop-zoom")
           include zoom-menu
 
     //- on mobile / tablet / phone, nav bar content is merged into this bar
@@ -31,15 +31,15 @@ block body
           span.text
         include white_label-shortcuts-topbar
         .ui.dropdown.icon.item.history.tablet.only
-          i.icon.time
+          i.icon.time(id="mobile-recent")
           include foldr_history-menu
         .ui.dropdown.icon.item.about.tablet.only
-          i.icon.help
+          i.icon.help(id="mobile-help")
           include help-menu
         a.right.item.show.nav.button.collapsed.mode.mobile.only
-          i.icon.arrow.down(data-content="展開")
+          i.icon.arrow.down(id="mobile-expand", data-content="展開")
         a.right.item.hide.nav.button.expanded.mode.hidden.mobile.only
-          i.icon.arrow.up(data-content="收合")
+          i.icon.arrow.up(id="mobile-collapse", data-content="收合")
         .right.ui.dropdown.icon.item.meta.phone.only
           i.icon.ellipsis.vertical
           .menu
@@ -55,14 +55,14 @@ block body
               i.icon.help
               include help-menu
         .right.icon.item.zoom.ui.dropdown.tablet.only
-          i.icon.zoom.in
+          i.icon.zoom.in(id="mobile-zoom")
           include zoom-menu
         a.right.icon.item.edit.table(target="iframe")
-          i.icon.pencil(data-content="編輯")
+          i.icon.pencil(id="edit", data-content="編輯")
         a.right.icon.item.refresh.table.hidden
-          i.icon.repeat(data-content="更新")
+          i.icon.repeat(id="update", data-content="更新")
         a.right.icon.item.add.to.list.hidden
-          i.icon.add
+          i.icon.add(id="add")
       .ui.segment.submit.no.margin.hidden.expanded.mode
         .ui.form
           .inline.field