diff --git a/package.json b/package.json
index 9fba9e7c..8c8a5e55 100644
--- a/package.json
+++ b/package.json
@@ -83,7 +83,7 @@
     "codemirror": "^5.28.0",
     "codemirror-emmet": "^1.0.0",
     "debounce": "^1.0.2",
-    "element-ui": "^2.0.11",
+    "element-ui": "^2.9.2",
     "is-electron": "^2.1.0",
     "loadjs": "^3.5.1",
     "marked3": "^0.5.1",
diff --git a/src/components/App.vue b/src/components/App.vue
index 8c6d5230..3f4f4f2a 100644
--- a/src/components/App.vue
+++ b/src/components/App.vue
@@ -21,14 +21,49 @@ html, body, #app, .page
   height: 100%
 
 body
+  font-family: Tahoma, Verdana, Arial, sans-serif !important
   background-color: #f9f9f9
   margin: 0
   font-size: 14px
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif
 
 *
   box-sizing: border-box
 
+.el-checkbox__label
+.el-badge
+  font-size: 1em !important
+
+.el-button
+.el-checkbox
+  box-shadow: 0 0 1px rgba(0,0,0,0.15) inset
+  font-family: Tahoma, Verdana, Arial, sans-serif !important
+  font-size: 14px !important
+  border-radius: 0 !important
+  border: none !important
+  line-height: 40px
+  padding: 10px !important
+  height: 40px !important
+  margin: 0 !important
+
+  i + span:not(:empty)
+    margin-left: 5px !important
+
+.home-header
+  i[class*=" el-icon-"]
+  i[class^="el-icon-"]
+    font-size: 1.5em !important
+    vertical-align: middle
+    margin-top: -1px 
+    margin-bottom: 1px
+
+.el-checkbox__inner
+  width: 15px !important
+  height: 15px !important
+
+.el-checkbox__inner::after
+  height: 8px !important
+  width: 4px !important
+
 pre
   padding: 16px
   overflow: auto
@@ -82,4 +117,16 @@ pre > code
 
 .notie-overlay
   z-index: 9900
+
+@media screen and (max-width: 768px)
+  .home-header-block
+    .el-button
+      span
+        display: none !important
+
+  .el-message-box
+    max-width: 100%
+
+  .el-dropdown-menu
+    z-index: 9999
 </style>
diff --git a/src/components/HomeHeader.vue b/src/components/HomeHeader.vue
index 1f127ca0..288d9dbf 100644
--- a/src/components/HomeHeader.vue
+++ b/src/components/HomeHeader.vue
@@ -26,7 +26,6 @@
       <el-button
         v-if="!inIframe"
         class="home-header-left-item"
-        style="margin-right:0"
         icon="el-icon-plus"
         @click="promptLibrary"
         size="mini">
@@ -106,9 +105,7 @@
         trigger="click">
         <el-button
           :icon="isLoggedIn ? '' : 'el-icon-more'"
-          size="mini">
-          {{ isLoggedIn ? username : '' }}
-        </el-button>
+          size="mini">{{ isLoggedIn ? username : '' }}</el-button>
         <el-dropdown-menu slot="dropdown">
           <el-dropdown-item command="github-login">
             <div class="fake-anchor">
@@ -197,7 +194,7 @@
           case 'error':
             return 'el-icon-warning'
           default:
-            return 'el-icon-refresh'
+            return 'el-icon-caret-right'
         }
       },
       saveButtonTitle() {
@@ -329,42 +326,46 @@
 
 <style lang="stylus" scoped>
 .home-header
-  height: 40px;
+  font-family: Tahoma, Verdana, Arial, sans-serif !important
   border-bottom: 1px solid #bfbfbf
   background-color: white
   display: flex
   align-items: center
-  padding: 0 10px
+  padding: 0
   justify-content: space-between
 
+.home-header-middle
+  height: 40px
+
 .home-header-block
   flex: 1
-  width: 0
 
 .home-header-left
   display: flex
-  justify-content: flex-start
-  .home-header-left-item
-    margin-right: 10px
 
 .home-header-right
   display: flex
   justify-content: flex-end
   align-items: center
-  .home-header-right-item
-    margin-left: 10px
 
 .changelog-indicator
   display: flex
   align-items: center
-  height: 28px
+  height: 40px
+
+.changelog-indicator:not(:empty)
+  padding: 0 5px
+
+.changelog-indicator > span
+    height: 40px !important
+    vertical-align: top
 
 .pan-toggles
   display: flex
   justify-content: center
-  height: 100%
 
   .pan-toggle
+    box-shadow: 0 0 1px rgba(0,0,0,0.15) inset
     display: flex
     align-items: center
     height: 100%
@@ -399,8 +400,15 @@
     height: @width
 
 @media screen and (max-width: 768px)
-  .home-header-left
-    display: none
+  body
+    font-size: 12px
+
+  .home-header
+    flex-wrap: wrap
+
+    .home-header-block
+      justify-content: center !important
+
   .pan-toggles
     justify-content: left
 </style>
diff --git a/yarn.lock b/yarn.lock
index 14020af2..d2115aac 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -342,8 +342,9 @@ async-limiter@~1.0.0:
   resolved "https://registry.yarnpkg.com/async-limiter/-/async-limiter-1.0.0.tgz#78faed8c3d074ab81f22b4e985d79e8738f720f8"
 
 async-validator@~1.8.1:
-  version "1.8.2"
-  resolved "https://registry.yarnpkg.com/async-validator/-/async-validator-1.8.2.tgz#b77597226e96242f8d531c0d46ae295f62422ba4"
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/async-validator/-/async-validator-1.8.5.tgz#dc3e08ec1fd0dddb67e60842f02c0cd1cec6d7f0"
+  integrity sha512-tXBM+1m056MAX0E8TL2iCjg8WvSyXu0Zc8LNtYqrVeyoL3+esHRZ4SieE9fKQyyU09uONjnMEjrNBMqT0mbvmA==
   dependencies:
     babel-runtime "6.x"
 
@@ -2554,13 +2555,16 @@ electron-to-chromium@^1.2.7, electron-to-chromium@^1.3.28:
   dependencies:
     electron-releases "^2.1.0"
 
-element-ui@^2.0.11:
-  version "2.0.11"
-  resolved "https://registry.yarnpkg.com/element-ui/-/element-ui-2.0.11.tgz#efc19d10270c13aa2b235f65bcb6ced3226550b8"
+element-ui@^2.9.2:
+  version "2.9.2"
+  resolved "https://registry.yarnpkg.com/element-ui/-/element-ui-2.9.2.tgz#f02b6b1dfb937044addbf204eaa15860d544ad84"
+  integrity sha512-HU5DDKivv2UFZghVWiP3I74IbTzSW8VXc070fM787i1X/u9f43olDuu3S6Pe9z87Z1oNjXt06ZmBlLYtySJMCw==
   dependencies:
     async-validator "~1.8.1"
     babel-helper-vue-jsx-merge-props "^2.0.0"
     deepmerge "^1.2.0"
+    normalize-wheel "^1.0.1"
+    resize-observer-polyfill "^1.5.0"
     throttle-debounce "^1.0.1"
 
 elliptic@^6.0.0:
@@ -4855,6 +4859,11 @@ normalize-url@^1.4.0:
     query-string "^4.1.0"
     sort-keys "^1.0.0"
 
+normalize-wheel@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/normalize-wheel/-/normalize-wheel-1.0.1.tgz#aec886affdb045070d856447df62ecf86146ec45"
+  integrity sha1-rsiGr/2wRQcNhWRH32Ls+GFG7EU=
+
 notie@^4.3.1:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/notie/-/notie-4.3.1.tgz#0d199de15130242e21675507aba63c6929e0adda"
@@ -6147,6 +6156,11 @@ requires-port@1.0.x, requires-port@1.x.x, requires-port@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
 
+resize-observer-polyfill@^1.5.0:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
+  integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==
+
 resolve-cwd@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-1.0.0.tgz#4eaeea41ed040d1702457df64a42b2b07d246f9f"
@@ -6789,8 +6803,9 @@ thenify-all@^1.0.0:
     any-promise "^1.0.0"
 
 throttle-debounce@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/throttle-debounce/-/throttle-debounce-1.0.1.tgz#dad0fe130f9daf3719fdea33dc36a8e6ba7f30b5"
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/throttle-debounce/-/throttle-debounce-1.1.0.tgz#51853da37be68a155cb6e827b3514a3c422e89cd"
+  integrity sha512-XH8UiPCQcWNuk2LYePibW/4qL97+ZQ1AN3FNXwZRBNPPowo/NRU5fAlDCSNBJIYCKbioZfuYtMhG4quqoJhVzg==
 
 through2@^2.0.0:
   version "2.0.3"