diff --git a/site/dev.js b/site/dev.js
index 3eb5bfb83..290aada55 100644
--- a/site/dev.js
+++ b/site/dev.js
@@ -3,6 +3,7 @@ import '../components/style.js'
 import './index.less'
 import 'highlight.js/styles/solarized-light.css'
 import Vue from 'vue'
+import VueI18n from 'vue-i18n'
 import VueRouter from 'vue-router'
 import VueClipboard from 'vue-clipboard2'
 import Md from './components/md'
@@ -10,15 +11,25 @@ import Api from './components/api'
 import './components'
 import demoBox from './components/demoBox'
 import demoContainer from './components/demoContainer'
-import Test from '../components/test/index'
-
+import Test from '../components/avatar/demo/index'
+import zhCN from './theme/zh-CN'
+import enUS from './theme/en-US'
 Vue.use(VueClipboard)
 Vue.use(VueRouter)
+Vue.use(VueI18n)
 Vue.component(Md.name, Md)
 Vue.component(Api.name, Api)
 Vue.component('demo-box', demoBox)
 Vue.component('demo-container', demoContainer)
 
+const i18n = new VueI18n({
+  locale: enUS.locale,
+  messages: {
+    [enUS.locale]: { message: enUS.messages },
+    [zhCN.locale]: { message: zhCN.messages },
+  },
+})
+
 const router = new VueRouter({
   mode: 'history',
   routes: [
@@ -27,5 +38,6 @@ const router = new VueRouter({
 })
 new Vue({
   el: '#app',
+  i18n,
   router,
 })