diff --git a/components/Header.vue b/components/Header.vue
index 855ea74..68205ad 100644
--- a/components/Header.vue
+++ b/components/Header.vue
@@ -5,24 +5,23 @@
         <nav class="navbar navbar-expand-md navbar-light bg-white fixed-top">
           <div class="container">
             <NavLink link="/" class="navbar-brand">
-              <img :src="($withBase)($themeConfig.logo)" />
+              <img :src="$withBase($themeConfig.logo)" />
               {{ $site.title }}
             </NavLink>
-            <button
-              class="navbar-toggler"
-              type="button"
-              data-toggle="collapse"
-              data-target="#navbarsExampleDefault"
-              aria-controls="navbarsExampleDefault"
-              aria-expanded="false"
-              aria-label="Toggle navigation"
-            >
-              <span class="navbar-toggler-icon"></span>
-            </button>
-            <div class="collapse navbar-collapse" id="navbarsExampleDefault">
+            <component
+              :is="isOpen ? 'XIcon' : 'MenuIcon'"
+              @click="$emit('toggle-sidebar')"
+            />
+            <div class="collapse navbar-collapse" :class="{ open: isOpen }">
               <ul v-if="$themeConfig.nav" class="navbar-nav ml-auto">
-                <li v-for="item in $themeConfig.nav" :key="item.text" class="nav-item">
-                  <NavLink :link="item.link" class="nav-link">{{ item.text }}</NavLink>
+                <li
+                  v-for="item in $themeConfig.nav"
+                  :key="item.text"
+                  class="nav-item"
+                >
+                  <NavLink :link="item.link" class="nav-link">{{
+                    item.text
+                  }}</NavLink>
                 </li>
                 <SearchBox />
                 <Feed />
@@ -36,21 +35,25 @@
 </template>
 
 <script>
+import { MenuIcon, XIcon } from 'vue-feather-icons'
 import SearchBox from '@SearchBox'
 import Feed from './Feed'
-
 export default {
-  components: { SearchBox, Feed },
+  components: { SearchBox, Feed, MenuIcon, XIcon },
+  props: {
+    isOpen: {
+      type: Boolean,
+      required: true,
+    },
+  },
 }
 </script>
 
 <style lang="stylus">
 @import '~@app/style/config';
 
-// border-bottom 5px solid lighten(#3eaf7c, 50%)
 .header-wrapper {
   .title {
-    /* flex 0 0 200px */
     font-size: 30px;
     margin: 0;
     letter-spacing: 2px;
@@ -117,11 +120,12 @@ export default {
   }
 }
 
-@media (max-width: $MQMobile) {
-  #header {
-    display: none;
-  }
+.collapse.navbar-collapse.open {
+  transition: 0.3s ease;
+  display: block;
+}
 
+@media (max-width: $grid-md) {
   .header-wrapper {
     flex-direction: column;
 
@@ -130,4 +134,37 @@ export default {
     }
   }
 }
+
+.search-box {
+  input {
+    border-color: darken($borderColor, 10%);
+  }
+}
+
+@media (max-width: $grid-md) {
+  .navbar.navbar-expand-md {
+    padding: 1.2rem;
+    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.03), 0 6px 6px rgba(0, 0, 0, 0.05);
+    transition: all 1s cubic-bezier(0.25, 0.8, 0.25, 1);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    overflow: hidden;
+    transition: 0.3s ease;
+  }
+}
+
+#header {
+  .feather-menu {
+    display: block;
+  }
+}
+
+@media (min-width: $grid-md) {
+  #header {
+    .feather-menu {
+      display: none;
+    }
+  }
+}
 </style>
diff --git a/components/MobileHeader.vue b/components/MobileHeader.vue
deleted file mode 100644
index 0f3d300..0000000
--- a/components/MobileHeader.vue
+++ /dev/null
@@ -1,94 +0,0 @@
-<template>
-  <div id="mobile-header">
-    <div class="mobile-header-bar">
-      <div class="mobile-header-title">
-        <NavLink link="/" class="mobile-home-link navbar-brand"><img :src="($withBase)($themeConfig.logo)"> {{ $site.title }} </NavLink>
-        <component
-          :is="isOpen ? 'XIcon' : 'MenuIcon'"
-          @click="$emit('toggle-sidebar')"
-        />
-      </div>
-      <div class="mobile-menu-wrapper" :class="{ open: isOpen }">
-        <hr class="menu-divider" />
-        <ul v-if="$themeConfig.nav" class="mobile-nav">
-          <li
-            v-for="item in $themeConfig.nav"
-            :key="item.text"
-            class="mobile-nav-item"
-          >
-            <NavLink :link="item.link">{{ item.text }}</NavLink>
-          </li>
-          <li class="mobile-nav-item">
-            <Feed />
-          </li>
-        </ul>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { MenuIcon, XIcon } from 'vue-feather-icons'
-import Feed from './Feed'
-export default {
-  components: {
-    MenuIcon,
-    XIcon,
-    Feed,
-  },
-  props: {
-    isOpen: {
-      type: Boolean,
-      required: true,
-    },
-  },
-}
-</script>
-
-<style lang="stylus">
-.mobile-header-bar
-  z-index 12
-  position fixed
-  top 0
-  width 100vw
-  box-sizing border-box
-  background-color $headerBgColor
-  margin auto
-  box-shadow 0 5px 20px rgba(0, 0, 0, 0.03), 0 6px 6px rgba(0, 0, 0, 0.05)
-  transition all 1s cubic-bezier(0.25, 0.8, 0.25, 1)
-
-#mobile-header
-  .mobile-header-title
-    display flex
-    align-items center
-    justify-content space-between
-    padding 1.2em
-
-    .mobile-home-link
-      text-decoration none
-      color inherit
-
-.mobile-nav-item
-  padding 10px 0
-  list-style none
-
-  a
-    text-decoration none
-
-.menu-divider
-  margin 0
-
-.mobile-menu-wrapper
-  max-height 0
-  overflow hidden
-  transition 0.3s ease
-  background-color $headerBgColor
-
-.mobile-menu-wrapper.open
-  max-height 450px
-  transition 0.3s ease
-
-@media (min-width: $MQMobile)
-  #mobile-header
-    display none
-</style>
diff --git a/layouts/GlobalLayout.vue b/layouts/GlobalLayout.vue
index 288861b..18d6832 100644
--- a/layouts/GlobalLayout.vue
+++ b/layouts/GlobalLayout.vue
@@ -1,7 +1,6 @@
 <template>
   <div id="vuepress-theme-blog__global-layout">
-    <Header />
-    <MobileHeader
+    <Header
       :is-open="isMobileHeaderOpen"
       @toggle-sidebar="isMobileHeaderOpen = !isMobileHeaderOpen"
     />
@@ -15,14 +14,12 @@
 <script>
 import GlobalLayout from '@app/components/GlobalLayout.vue'
 import Header from '@theme/components/Header.vue'
-import MobileHeader from '@theme/components/MobileHeader.vue'
 import Footer from '@theme/components/Footer.vue'
 
 export default {
   components: {
     DefaultGlobalLayout: GlobalLayout,
     Header,
-    MobileHeader,
     Footer,
   },
 
@@ -41,17 +38,25 @@ export default {
 </script>
 
 <style lang="stylus">
-#vuepress-theme-blog__global-layout
-  word-wrap break-word
-
-.content-wrapper
-  padding 160px 15px 80px 15px
-  min-height calc(100vh - 80px - 60px - 160px)
-  max-width $contentWidth
-  margin 0 auto
-
-  @media (max-width: $MQMobile)
-    &
-      padding 100px 15px 20px 15px
-      min-height calc(100vh - 20px - 60px - 100px)
+body {
+  min-width: 320px;
+}
+
+#vuepress-theme-blog__global-layout {
+  word-wrap: break-word;
+}
+
+.content-wrapper {
+  padding: 160px 15px 80px 15px;
+  min-height: calc(100vh - 80px - 60px - 160px);
+  max-width: $contentWidth;
+  margin: 0 auto;
+
+  @media (max-width: $MQMobile) {
+    & {
+      padding: 100px 15px 20px 15px;
+      min-height: calc(100vh - 20px - 60px - 100px);
+    }
+  }
+}
 </style>
diff --git a/styles/mobile.styl b/styles/mobile.styl
index 8ce5f8b..6c70a91 100644
--- a/styles/mobile.styl
+++ b/styles/mobile.styl
@@ -1,8 +1,5 @@
 @require './config'
 
-// narrow desktop / iPad
-// @media (max-width: $MQNarrow)
-
 // wide mobile
 @media (max-width: $MQMobile)
   {$contentClass}:not(.custom) > h1:first-child