diff --git a/src/_locales/options/messages.json b/src/_locales/options/messages.json
index 55d7bed2d..e7d2a7d2e 100644
--- a/src/_locales/options/messages.json
+++ b/src/_locales/options/messages.json
@@ -2,13 +2,18 @@
   "storage_updated": {
     "zh_CN": "设置已更新",
     "zh_TW": "設定已更新",
-    "en": "Options updated"
+    "en": "Settings updated"
   },
   "reset": {
     "zh_CN": "重置",
     "zh_TW": "重置",
     "en": "Reset"
   },
+  "language": {
+    "zh_CN": "界面语言",
+    "zh_TW": "介面語言",
+    "en": "App Language"
+  },
   "none": {
     "zh_CN": "无",
     "zh_TW": "無",
@@ -17,12 +22,12 @@
   "reset_modal_title": {
     "zh_CN": "重置设定",
     "zh_TW": "重設設定",
-    "en": "Reset Config"
+    "en": "Reset Settings"
   },
   "reset_modal_content": {
     "zh_CN": "所有设定将还原到默认值，确定？",
     "zh_TW": "所有設定將還原到還原點，確定？",
-    "en": "Reset to default config. Confirm？"
+    "en": "Reset to default settings. Confirm？"
   },
   "title": {
     "zh_CN": "Saladict 设置",
@@ -41,19 +46,44 @@
   },
   "app_active": {
     "zh_CN": "启用划词翻译",
-    "zh_TW": "啟用劃詞翻譯",
-    "en": "Enable inline translator"
+    "zh_TW": "啟用滑鼠劃字翻譯",
+    "en": "Enable Inline Translator"
   },
   "pdf_sniff": {
     "zh_CN": "默认用本扩展浏览 PDF",
-    "zh_TW": "確認用本延伸視窗介面擴展瀏覽 PDF 功能",
-    "en": "Default PDF Viewer"
+    "zh_TW": "使用本應用程式瀏覽 PDF",
+    "en": "Enable PDF Viewer"
   },
   "app_active_description": {
     "zh_CN": "关闭后划词翻译功能将关闭，快捷查词功能依然可用。开启默认 PDF 浏览所有 PDF 链接将自动跳转到本扩展打开（包括本地）。",
     "zh_TW": "關閉後，滑鼠劃字和句子翻譯功能將關閉，迅速查單字和句子的功能依然可以用。開啟確認鍵後， PDF 瀏覽功能可以運作使用。所有 PDF 鏈接，將自動跳轉到本延伸擴展視窗介面，打開後，可以查看（包括本地）。",
     "en": "Quick Search is still available even if Inline translation is turned off. PDF links will be automatically captured if the sniffer is turned on."
   },
+  "dict_panel_title": {
+    "zh_CN": "查词面板",
+    "zh_TW": "查字典介面",
+    "en": "Dict Panel"
+  },
+  "dict_panel_description": {
+    "zh_CN": "查词面板相关设置",
+    "zh_TW": "查字典介面相關設置",
+    "en": "Dictionary Panel settings"
+  },
+  "dict_panel_width": {
+    "zh_CN": "查词面板宽度",
+    "zh_TW": "查字典介面寬度",
+    "en": "Panel width"
+  },
+  "dict_panel_height_ratio": {
+    "zh_CN": "查词面板最高占屏幕比例",
+    "zh_TW": "查字典介面最高占螢幕高度比例",
+    "en": "Panel max height ratio"
+  },
+  "dict_panel_font_size": {
+    "zh_CN": "词典内容字体大小",
+    "zh_TW": "字典内容字體大小",
+    "en": "Font size for search reasults"
+  },
   "word_list_title": {
     "zh_CN": "单词列表",
     "zh_TW": "單字和例句列表",
@@ -62,7 +92,7 @@
   "word_list_history": {
     "zh_CN": "记录查词历史",
     "zh_TW": "記錄查字歷史",
-    "en": "Track search history"
+    "en": "Keep search history"
   },
   "word_list_description": {
     "zh_CN": "关闭记录查词历史后先前的记录依然保留，可在查词历史页面手动清空。",
@@ -112,7 +142,7 @@
   "pinmode_title": {
     "zh_CN": "钉住查词",
     "zh_TW": "釘住查字",
-    "en": "Pinned Search Mode"
+    "en": "Pinned Mode"
   },
   "pinmode_description": {
     "zh_CN": "当面板被钉住时的查词模式。",
@@ -121,7 +151,7 @@
   },
   "preload": {
     "zh_CN": "预先加载",
-    "zh_TW": "預先加載",
+    "zh_TW": "預先下載",
     "en": "Preload"
   },
   "preload_clipboard": {
@@ -201,8 +231,8 @@
   },
   "triple_ctrl_description": {
     "zh_CN": "连续按三次<kbd>Ctrl</kbd>或者<kbd>Command ⌘</kbd>键将弹出词典界面。选择预先加载内容会显示在输入框里。启动自动查词将在面板出现之后自动开始查词。",
-    "zh_TW": "連續按滑鼠三次<kbd>Ctrl</kbd>或者<kbd>Command ⌘</kbd>鍵，將會彈出字典視窗介面。選擇預先下載的內容，會顯示在輸入框裡。啟動自動查字功能，字典視窗介面會出現，此時，會自動開始查尋單字。",
-    "en": "Press <kbd>Ctrl</kbd> or <kbd>Command ⌘</kbd> key three times summons the dictionary panel. Preloaded content will be inserted into input box. Enable auto search to search as soon as the panel shows up."
+    "zh_TW": "連續按三次<kbd>Ctrl</kbd>或者<kbd>Command ⌘</kbd>鍵，將會彈出字典視窗介面。選擇預先下載的內容，會顯示在輸入框裡。啟動自動查字功能，字典視窗介面會出現，此時，會自動開始查尋單字。",
+    "en": "Press <kbd>Ctrl</kbd> or <kbd>Command ⌘</kbd> key three times to summon the dictionary panel. Preloaded content will be inserted into input box. Enable auto search to search as soon as the panel shows up."
   },
   "popup_title": {
     "zh_CN": "右上弹框",
@@ -216,7 +246,7 @@
   },
   "language_title": {
     "zh_CN": "语言支持",
-    "zh_TW": "語言支持",
+    "zh_TW": "語言支援",
     "en": "Language"
   },
   "language_chinese": {
@@ -262,7 +292,7 @@
   "autopron_description": {
     "zh_CN": "下拉列表的项目为支持自动发音的词典，开启功能还必须启用词典，见下方“词典配置”。“默认展开”与相应的语言显示须要勾选。",
     "zh_TW": "下拉列表的選項項目為支持自動發音的字典。開啟功能，還必須啟動字典。見下方「字典配置設定」。「確認展開」與相對應的語言顯示，須要勾選。",
-    "en": "To fully enable auto pronunciation, selected the dicts that are needed to be activated. \"Default Unfold\" and language match should be checked. See below."
+    "en": "To fully enable auto pronunciation, selected the dicts that are needed to be activated. \"Default Unfold\" and language match should be checked accordingly. See below."
   },
   "dicts_title": {
     "zh_CN": "词典设置",
@@ -286,12 +316,12 @@
   },
   "dict_default_height": {
     "zh_CN": "默认高度",
-    "zh_TW": "確認高度",
+    "zh_TW": "預設高度",
     "en": "Default height"
   },
   "dict_default_unfold": {
     "zh_CN": "默认展开",
-    "zh_TW": "確認展開",
+    "zh_TW": "自動展開",
     "en": "Default Unfold"
   },
   "dict_show_when_chs": {
@@ -317,7 +347,7 @@
   "context_description": {
     "zh_CN": "选择单词之后可以通过右键查找或者搜索。拖动标题可以进行排序。",
     "zh_TW": "選擇單字和句子後可以按滑鼠右鍵查尋或者搜尋。使用滑鼠拖動標題可以進行排列。",
-    "en": "Context menu when right click a text selection. Drag to sort."
+    "en": "Context menu shows up when right clicking a text selection. Drag items to sort."
   },
   "contact_author": {
     "zh_CN": "联系作者",
@@ -336,8 +366,8 @@
   },
   "buy_me_a_coffee": {
     "zh_CN": "觉得好用的话欢迎支持一下我买杯咖啡哦~",
-    "zh_TW": "覺得好用的話，歡迎支持我一下。買杯咖啡送給我哦！謝謝！~",
-    "en": "Enjoy the Extension? Buy me a coffee~"
+    "zh_TW": "覺得好用的話，歡迎支持我一下買杯咖啡哦！謝謝！~",
+    "en": "Enjoying the extension? Care to oblige me with a cup of coffee?"
   },
   "wechat": {
     "zh_CN": "微信",
diff --git a/src/options/Coffee.vue b/src/options/Coffee.vue
index f9de2dfe7..b5e5da5c6 100644
--- a/src/options/Coffee.vue
+++ b/src/options/Coffee.vue
@@ -25,9 +25,9 @@
         </ul>
         <div>
           <p class="coffee-social-media-wrap">
-            <a href="mailto:straybugs@gmail.com" @mouseover="isShowSocial = true" @click.prevent="void 0">{{ $t('opt:contact_author') }}</a>
+            <a href="mailto:straybugs@gmail.com" @mouseenter="showSocialMedia(true)" @mouseleave="showSocialMedia(false)" @click.prevent="void 0">{{ $t('opt:contact_author') }}</a>
             <transition name="fade">
-              <div class="coffee-social-media" v-if="isShowSocial" @mouseleave="isShowSocial = false">
+              <div class="coffee-social-media" v-if="isShowSocial" @mouseenter="showSocialMedia(true)" @mouseleave="showSocialMedia(false)">
                 <social-media />
               </div>
             </transition>
@@ -80,6 +80,16 @@ export default {
     }
   },
   methods: {
+    showSocialMedia (flag) {
+      clearTimeout(this.__showSocialMediaTimeout)
+      if (flag) {
+        this.isShowSocial = true
+      } else {
+        this.__showSocialMediaTimeout = setTimeout(() => {
+          this.isShowSocial = false
+        }, 400)
+      }
+    },
     coffeeMouseover () {
       this.showPayment = true
     },
diff --git a/src/options/OptDictPanel.vue b/src/options/OptDictPanel.vue
new file mode 100644
index 000000000..39fe9d72f
--- /dev/null
+++ b/src/options/OptDictPanel.vue
@@ -0,0 +1,73 @@
+<template>
+  <div class="opt-item"><!-- 查词面板 -->
+    <div class="opt-item__header">
+      <strong>{{ $t('opt:dict_panel_title') }}</strong>
+    </div>
+    <div class="opt-item__body">
+      <div class="checkbox">
+        <div class="input-group">
+          <div class="input-group-addon">{{ $t('opt:dict_panel_height_ratio') }}</div>
+          <input type="number" step="1" min="10" max="90" class="form-control"
+            @change="handleRatioChange('panelMaxHeightRatio', 10, 90, $event.target.value)"
+            :value="panelMaxHeightRatio * 100"
+          >
+          <div class="input-group-addon">%</div>
+        </div>
+      </div>
+      <div class="checkbox">
+        <div class="input-group">
+          <div class="input-group-addon">{{ $t('opt:dict_panel_width') }}</div>
+          <input type="number" step="1" min="50" max="1000" class="form-control"
+            @change="handleNumChange('panelWidth', 50, 1000, $event.target.value)"
+            :value="panelWidth"
+          >
+          <div class="input-group-addon">px</div>
+        </div>
+      </div>
+      <div class="checkbox">
+        <div class="input-group">
+          <div class="input-group-addon">{{ $t('opt:dict_panel_font_size') }}</div>
+          <input type="number" step="1" min="12" max="20" class="form-control"
+            @change="handleNumChange('fontSize', 12, 20, $event.target.value)"
+            :value="fontSize"
+          >
+          <div class="input-group-addon">px</div>
+        </div>
+      </div>
+    </div>
+    <div class="opt-item__description-wrap">
+      <p class="opt-item__description" v-html="$t('opt:dict_panel_description')"></p>
+    </div>
+  </div><!-- 查词面板 -->
+</template>
+
+<script>
+export default {
+  store: {
+    panelWidth: 'config.panelWidth',
+    panelMaxHeightRatio: 'config.panelMaxHeightRatio',
+    fontSize: 'config.fontSize',
+  },
+  methods: {
+    handleNumChange (target, min, max, value) {
+      value = Math.floor(Number(value))
+      // trigger update
+      this[target] = value
+
+      if (value < min) {
+        this[target] = min
+      } else if (value > max) {
+        this[target] = max
+      }
+    },
+    handleRatioChange (target, min, max, value) {
+      return this.handleNumChange(
+        target,
+        min / 100,
+        max / 100,
+        Number(value) / 100,
+      )
+    }
+  },
+}
+</script>
diff --git a/src/options/OptDicts.vue b/src/options/OptDicts.vue
index 82b47076a..1b8504fa9 100644
--- a/src/options/OptDicts.vue
+++ b/src/options/OptDicts.vue
@@ -67,7 +67,7 @@
                   <!--词典默认高度选项-->
                   <div class="input-group">
                     <div class="input-group-addon">{{ $t('opt:dict_default_height') }}</div>
-                    <input type="number" min="1" class="form-control" v-model.number="allDicts[id].preferredHeight">
+                    <input type="number" min="1" class="form-control" v-model.number.lazy="allDicts[id].preferredHeight">
                     <div class="input-group-addon">px</div>
                   </div><!--词典默认高度选项-->
 
@@ -77,7 +77,7 @@
                       <div class="checkbox" v-if="typeof allDicts[id].options[optKey] !== 'boolean'">
                         <div class="input-group">
                           <div class="input-group-addon">{{ $t(`dict:${id}_${optKey}`) }}</div>
-                          <input type="number" min="1" class="form-control" v-model.number="allDicts[id].options[optKey]">
+                          <input type="number" min="1" class="form-control" v-model.number.lazy="allDicts[id].options[optKey]">
                           <div class="input-group-addon">{{ $t(`dict:${id}_${optKey}_unit`)  }}</div>
                         </div>
                       </div>
@@ -104,7 +104,7 @@
 
 <script>
 import Draggable from 'vuedraggable'
-import AppConfig from '@/app-config'
+import appConfigFactory from '@/app-config'
 
 export default {
   store: {
@@ -114,7 +114,7 @@ export default {
   },
   data () {
     const dictsPanelInfo = {}
-    Object.keys(new AppConfig().dicts.all).forEach(id => {
+    Object.keys(appConfigFactory().dicts.all).forEach(id => {
       dictsPanelInfo[id] = {
         favicon: browser.runtime.getURL(`assets/dicts/${id}.png`),
         height: 0
diff --git a/src/options/OptLanguage.vue b/src/options/OptLanguage.vue
index b594801ac..b64488d2d 100644
--- a/src/options/OptLanguage.vue
+++ b/src/options/OptLanguage.vue
@@ -4,7 +4,15 @@
       <strong>{{ $t('opt:language_title') }}</strong>
     </div>
     <div class="opt-item__body">
-      <div class="checkbox">
+      <div class="select-box-container">
+        <label class="select-box">
+          <span class="select-label">{{ $t('opt:language') }}</span>
+          <select class="form-control" v-model="langCode">
+            <option value="zh_CN">简体中文</option>
+            <option value="zh_TW">繁體中文</option>
+            <option value="en">English</option>
+          </select>
+        </label>
         <label class="checkbox-inline">
           <input type="checkbox" v-model="chinese"> {{ $t('opt:language_chinese') }}
         </label>
@@ -24,6 +32,7 @@ export default {
   store: {
     chinese: 'config.language.chinese',
     english: 'config.language.english',
+    langCode: 'config.langCode',
   }
 }
 </script>
diff --git a/src/options/Options.vue b/src/options/Options.vue
index 7b6d566c2..3e9fc59e4 100644
--- a/src/options/Options.vue
+++ b/src/options/Options.vue
@@ -13,9 +13,9 @@
       <div class="page-header-info">
         <p><a href="https://github.com/crimx/crx-saladict/wiki" target="_blank" rel="noopener">{{ $t('opt:instructions') }}</a></p>
         <p class="page-header-social-media-wrap">
-          <a href="mailto:straybugs@gmail.com" @mouseover="isShowSocial = true" @click.prevent="void 0">{{ $t('opt:contact_author') }}</a>
+          <a href="mailto:straybugs@gmail.com" @mouseenter="showSocialMedia(true)" @mouseleave="showSocialMedia(false)" @click.prevent="void 0">{{ $t('opt:contact_author') }}</a>
           <transition name="fade">
-            <div class="page-header-social-media" v-if="isShowSocial" @mouseleave="isShowSocial = false">
+            <div class="page-header-social-media" v-if="isShowSocial" @mouseenter="showSocialMedia(true)"  @mouseleave="showSocialMedia(false)">
               <social-media />
             </div>
           </transition>
@@ -25,10 +25,11 @@
       </div>
     </div>
     <opt-app-active />
+    <opt-language />
+    <opt-dict-panel />
     <opt-word-list />
     <opt-mode />
     <opt-pin-mode />
-    <opt-language />
     <opt-popup />
     <opt-triple-ctrl />
     <opt-autopron />
@@ -39,12 +40,12 @@
   <!--查词面板-->
   <transition appear name="popup">
     <div class="frame-container">
-      <iframe class="saladict-frame"
+      <!-- <iframe class="saladict-frame"
         name="saladict-frame"
         frameBorder="0"
         :src="frameSource"
         :style="{height: panelHeight + 'px'}"
-      ></iframe>
+      ></iframe> -->
     </div>
   </transition><!--查词面板-->
 
@@ -58,12 +59,13 @@
 
 <script>
 import {storage, message} from '@/_helpers/browser-api'
-import AppConfig from '@/app-config'
+import appConfigFactory from '@/app-config'
 import Coffee from './Coffee'
 import SocialMedia from './SocialMedia'
 import AlertModal from '@/components/AlertModal'
 
 import OptAppActive from './OptAppActive'
+import OptDictPanel from './OptDictPanel'
 import OptWordList from './OptWordList'
 import OptMode from './OptMode'
 import OptPinMode from './OptPinMode'
@@ -80,12 +82,22 @@ export default {
   data () {
     return {
       text: 'salad',
-      frameSource: browser.runtime.getURL('panel.html'),
+      frameSource: 'https://baidu.com',
       isShowConfigUpdated: false,
       isShowSocial: false
     }
   },
   methods: {
+    showSocialMedia (flag) {
+      clearTimeout(this.__showSocialMediaTimeout)
+      if (flag) {
+        this.isShowSocial = true
+      } else {
+        this.__showSocialMediaTimeout = setTimeout(() => {
+          this.isShowSocial = false
+        }, 400)
+      }
+    },
     searchText () {
       clearTimeout(this.searchTextTimeout)
       this.searchTextTimeout = setTimeout(() => {
@@ -108,14 +120,14 @@ export default {
         title: this.$t('opt:reset_modal_title'),
         content: this.$t('opt:reset_modal_content'),
         onConfirm: () => {
-          storage.sync.set({config: new AppConfig()})
+          storage.sync.set({config: appConfigFactory()})
             .then(() => storage.sync.get('config'))
             .then(({config}) => {
               if (config) {
                 this.config = config
               } else {
                 // something wrong with the sync storage, use default config without syncing
-                const defaultConfig = new AppConfig()
+                const defaultConfig = appConfigFactory()
                 storage.sync.set({config: defaultConfig})
                 this.config = defaultConfig
               }
@@ -164,6 +176,7 @@ export default {
   },
   components: {
     OptAppActive,
+    OptDictPanel,
     OptWordList,
     OptMode,
     OptPinMode,
@@ -286,7 +299,7 @@ kbd {
 
 .opt-container {
   min-width: 800px;
-  margin-right: 500px;
+  margin-right: 470px;
   padding: 0 15px;
 }
 
@@ -328,11 +341,13 @@ kbd {
 
 .opt-item__header {
   @extend .col-xs-2;
+  width: percentage(2/12);
   text-align: right;
 }
 
 .opt-item__body {
   @extend .col-xs-6;
+  width: percentage(6.5/12);
   background-color: #fafafa;
 
   &:hover + .opt-item__description-wrap {
@@ -343,6 +358,7 @@ kbd {
 
 .opt-item__description-wrap {
   @extend .col-xs-4;
+   width: percentage(3.5/12);
   position: absolute;
   z-index: -1;
   right: 0;
@@ -368,7 +384,7 @@ kbd {
   top: 0;
   right: 0;
   height: 100%;
-  width: 500px;
+  width: 470px;
 }
 
 .saladict-frame {
diff --git a/src/options/SocialMedia.vue b/src/options/SocialMedia.vue
index 56be7cad2..641338877 100644
--- a/src/options/SocialMedia.vue
+++ b/src/options/SocialMedia.vue
@@ -3,7 +3,7 @@
     <li class="social-media__icon" v-for="media in socialMedia">
       <a :href="media.url" :title="media.title" target="_blank" rel="noopener"></a>
       <svg>
-        <use :xlink:href="'./assets/symbol-defs.svg#' + media.icon" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
+        <use :xlink:href="'./static/symbol-defs.svg#' + media.icon" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
       </svg>
     </li>
   </ul>
@@ -26,7 +26,7 @@ export default {
       }, {
         title: '网易云音乐',
         icon: 'icon-netease-music-circle',
-        url: 'https://music.163.com/djradio/3480003'
+        url: 'https://music.163.com/#/user/home?id=44711994'
       }, {
         title: '知乎',
         icon: 'icon-zhihu-circle',