diff --git a/_includes/panel.html b/_includes/panel.html
index 27c7e49..feafb87 100644
--- a/_includes/panel.html
+++ b/_includes/panel.html
@@ -4,7 +4,7 @@
   MIT License
 -->
 
-<div id="panel-wrap" class="col-xl-3 pl-2 topbar-down">
+<div id="panel-wrapper" class="col-xl-3 pl-2 topbar-down">
 
   <div class="access">
   {% assign lastmod_list = "" | split: "" %}
@@ -43,37 +43,18 @@
   {% endif %}
 
     <div id="access-tags">
-
       <h3 data-toc-skip>
         {{- site.data.label.panel.trending_tags -}}
       </h3>
-
       <div class="d-flex flex-wrap mt-3 mb-1 mr-3">
-      {% capture tags_array %}
-        {% for tag in site.tags %}
-          {{ tag[1] | size }}:{{ tag[0] | replace: ' ', '-' }}
-        {% endfor %}
-      {% endcapture %}
+       {% include trending-tags.html %}
+      </div>
+    </div>
 
-      {% assign MAX = 10 %}
-      {% assign count = 0 %}
-      {% assign trends = tags_array | split: " " | sort | reverse %}
-
-      {% for trend in trends %}
-        {% assign count = count | plus: 1 %}
-        {% assign tag = trend | split: ":" | last %}
-        <a class="post-tag" href="{{ site.baseurl }}/tags/{{ tag | downcase | url_encode }}/">{{ tag | replace: '-', ' ' }}</a>
-        {% if count >= MAX %}
-          {% break %}
-        {% endif %}
-      {% endfor %}
-
-      </div> <!-- div.d-flex.flex-wrap -->
-    </div> <!-- #access-tags -->
   </div> <!-- .access -->
 
   {% if page.layout == 'post' and site.toc and page.toc %}
-  <div id="toc-wrap" class="pl-0 pr-4 mb-5">
+  <div id="toc-wrapper" class="pl-0 pr-4 mb-5">
     <h3 data-toc-skip class="pl-3 pt-2">
       {{- site.data.label.panel.toc -}}
     </h3>
@@ -81,4 +62,4 @@
   </div>
   {% endif %}
 
-</div> <!-- #panel-wrap -->
\ No newline at end of file
+</div> <!-- #panel-wrapper -->
diff --git a/_includes/related-posts.html b/_includes/related-posts.html
index 175e122..e5bf055 100644
--- a/_includes/related-posts.html
+++ b/_includes/related-posts.html
@@ -52,7 +52,7 @@
           <div class="card-body">
             <span class="timeago small">
                 {{ post.date | date: POST_DATE }}
-                <i class="hidden">{{ post.date | date_to_xmlschema }}</i>
+                <i class="unloaded">{{ post.date | date_to_xmlschema }}</i>
             </span>
             <h3 class="pt-0 mt-2 mb-3" data-toc-skip>{{ post.title }}</h3>
             <div class="text-muted small">
diff --git a/_includes/search-loader.html b/_includes/search-loader.html
new file mode 100644
index 0000000..c840a06
--- /dev/null
+++ b/_includes/search-loader.html
@@ -0,0 +1,27 @@
+<!--
+  Jekyll Simple Search loader
+  © 2017-2019 Cotes Chung
+  MIT License
+-->
+<script src="https://cdn.jsdelivr.net/npm/simple-jekyll-search@1.7.3/dest/simple-jekyll-search.min.js" integrity="sha256-qcLR00zq6pJk4je3MLgAri8Nn+ZumUlXgTKR2H/xCY0=" crossorigin="anonymous"></script>
+
+{% capture result_elem %}
+<div class="pl-1 pr-1 pl-sm-2 pr-sm-2 pl-lg-4 pr-lg-4 pl-xl-0 pr-xl-0">
+  <a href="{{ site.url }}{url}">{title}</a>
+  <div class="post-meta d-flex flex-column flex-sm-row text-muted mt-1 mb-1">
+    <div class="mr-sm-4"><i class="far fa-folder fa-fw"></i>{categories}</div>
+    <div><i class="fa fa-tag fa-fw"></i>{tags}</div>
+  </div>
+  <p>{snippet}</p>
+</div>
+{% endcapture %}
+
+<script>
+SimpleJekyllSearch({
+  searchInput: document.getElementById('search-input'),
+  resultsContainer: document.getElementById('search-results'),
+  json: '{{ site.baseurl }}/search.json',
+  searchResultTemplate: '{{ result_elem }}',
+  noResultsText: '<p class="mt-5">Oops! No result founds.</p>'
+});
+</script>
\ No newline at end of file
diff --git a/_includes/search-results.html b/_includes/search-results.html
index d9a87f6..d6d6157 100644
--- a/_includes/search-results.html
+++ b/_includes/search-results.html
@@ -3,13 +3,12 @@
   © 2017-2019 Cotes Chung
   MIT License
 -->
-<div id="search-result-wrap">
-  <div class="row justify-content-center bg-white">
-    <div class="col-12 col-md-12 col-lg-11 col-xl-9 pl-xl-5 pr-xl-5 pb-5 mt-3 mb-3">
-      <h2 class="mt-3 pt-3 ml-3 ml-md-5 ml-lg-0" data-toc-skip>Search Results</h2>
-      <div class="post-content ml-1 ml-md-5 ml-lg-0">
-        <ul id="search-results" ></ul>
-      </div>
+<div id="search-result-wrapper" class="d-flex justify-content-center unloaded">
+  <div class="col-12 col-xl-11 post-content">
+    <div id="search-hints">
+      <h4 class="text-muted">Trending Tags</h4>
+      {% include trending-tags.html %}
     </div>
+    <div id="search-results" class="d-flex flex-wrap justify-content-center text-muted mt-3"></div>
   </div>
 </div>
\ No newline at end of file
diff --git a/_includes/search.html b/_includes/search.html
deleted file mode 100644
index 04ee7c3..0000000
--- a/_includes/search.html
+++ /dev/null
@@ -1,13 +0,0 @@
-<!--
-  The Search
-  © 2017-2019 Cotes Chung
-  MIT License
--->
-<script src="{{ site.baseurl }}/assets/lib/simple-jekyll-search-1.7.1.min.js"></script>
-<script>
-SimpleJekyllSearch({
-  searchInput: document.getElementById('search-input'),
-  resultsContainer: document.getElementById('search-results'),
-  json: '{{ site.baseurl }}/search.json'
-})
-</script>
\ No newline at end of file
diff --git a/_includes/sidebar.html b/_includes/sidebar.html
index eb52b06..c0e29aa 100644
--- a/_includes/sidebar.html
+++ b/_includes/sidebar.html
@@ -4,8 +4,8 @@
   MIT License
 -->
 
-<div id="nav-wrap">
-  <div id="profile-wrap" class="d-flex flex-column">
+<div id="nav-wrapper">
+  <div id="profile-wrapper" class="d-flex flex-column">
     <div id="avatar" class="d-flex justify-content-center">
       <a href="{{ site.baseurl }}/" alt="avatar">
         {% assign avatar = site.avatar %}
@@ -41,7 +41,7 @@
       {% if item.url == page_urls.last or
         item.name == "Home" and page.layout == "home" %}active{% endif %}">
       <a href="{{ ref }}" class="nav-link d-flex justify-content-center align-items-center w-100">
-        <i class="fa-fw {{ item.icon }} ml-3 mr-4 hidden"></i>
+        <i class="fa-fw {{ item.icon }} ml-3 mr-4 unloaded"></i>
         <span>{{ item.name | upcase }}</span>
       </a>
     </li> <!-- .nav-item -->
@@ -49,7 +49,7 @@
 
   </ul> <!-- ul.nav.flex-column -->
 
-</div><!-- #nav-wrap -->
+</div><!-- #nav-wrapper -->
 
 <div class="contact d-flex justify-content-around mt-4">
   <a href="https://github.com/{{ site.github.username }}" target="_blank">
diff --git a/_includes/topbar.html b/_includes/topbar.html
index a730ba4..8f5b605 100644
--- a/_includes/topbar.html
+++ b/_includes/topbar.html
@@ -3,10 +3,8 @@
   © 2017-2019 Cotes Chung
   MIT License
 -->
-<div id="topbar" class="bg-white row justify-content-center topbar-down">
-
-  <div id="topbar-main" class="d-flex h-100 align-items-center justify-content-between col-12 col-md-12 col-lg-11 col-xl-11 pl-md-2 pr-md-2 pl-lg-2 pr-lg-2">
-
+<div id="topbar-wrapper" class="row justify-content-center bg-white topbar-down">
+  <div id="topbar" class="col-11 d-flex h-100 align-items-center justify-content-between">
     <span id="breadcrumb">
       {% for item in page.breadcrumb %}
         {% if item.url %}
@@ -39,9 +37,10 @@
     </div>
 
     <i id="search-trigger" class="fas fa-search fa-fw"></i>
-    <span id="search-wrap">
+    <span id="search-wrapper" class="align-items-center">
       <i class="fas fa-search fa-fw"></i>
       <input class="form-control" id="search-input" type="search" placeholder="{{ site.data.label.search_hint }}...">
+      <i class="fa fa-times-circle fa-fw" id="search-cleaner"></i>
     </span>
     <a href="javascript:;">Cancel</a>
   </div>
diff --git a/_includes/trending-tags.html b/_includes/trending-tags.html
new file mode 100644
index 0000000..1c48ddb
--- /dev/null
+++ b/_includes/trending-tags.html
@@ -0,0 +1,26 @@
+<!--
+  The trending tags list
+
+  © 2019 Cotes Chung
+  MIT Licensed
+-->
+
+{% assign MAX = 10 %}
+
+{% capture tags_array %}
+  {% for tag in site.tags %}
+    {{ tag[1] | size }}:{{ tag[0] | replace: ' ', '-' }}
+  {% endfor %}
+{% endcapture %}
+
+{% assign trends = tags_array | split: " " | sort | reverse %}
+{% assign count = 0 %}
+
+{% for trend in trends %}
+  {% assign count = count | plus: 1 %}
+  {% assign tag = trend | split: ":" | last  %}
+  <a class="post-tag" href="{{ site.baseurl }}/tags/{{ tag | downcase }}/">{{ tag | replace: '-', ' ' }}</a>
+  {% if count >= MAX %}
+    {% break %}
+  {% endif %}
+{% endfor %}
\ No newline at end of file
diff --git a/_layouts/default.html b/_layouts/default.html
index 68b08a1..c73ef4d 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -14,7 +14,7 @@ layout: compress
     <div id="sidebar" class="d-flex flex-column">
       {% include sidebar.html %}
     </div>
-    <div id="main-wrap" class="bg-white">
+    <div id="main-wrapper" class="bg-white">
       {% include topbar.html %}
       <div id="main">
 
@@ -40,7 +40,7 @@ layout: compress
       {% include google-analytics.html %}
     {% endif %}
 
-    {% include search.html %}
+    {% include search-loader.html %}
 
   </body>
 
diff --git a/_layouts/home.html b/_layouts/home.html
index 0edfe9f..ff005f5 100644
--- a/_layouts/home.html
+++ b/_layouts/home.html
@@ -24,7 +24,7 @@ layout: page
       <i class="far fa-clock fa-fw"></i>
       <span class="timeago" data-toggle="tooltip" title="{{ post.date | date: TOOLTIP_DATE }}">
       {{ post.date | date: POST_DATE }}
-      <i class="hidden">{{ post.date | date_to_xmlschema }}</i>
+      <i class="unloaded">{{ post.date | date_to_xmlschema }}</i>
       </span>
       <!-- page views -->
       {% if site.google_analytics.pv %}
diff --git a/_layouts/post.html b/_layouts/post.html
index 341fd04..60aa600 100644
--- a/_layouts/post.html
+++ b/_layouts/post.html
@@ -8,7 +8,7 @@ layout: default
 <div class="row">
   {% include date-format.html %}
 
-  <div id="post-wrap" class="col-12 col-lg-11 col-xl-8">
+  <div id="post-wrapper" class="col-12 col-lg-11 col-xl-8">
     <div class="post pl-1 pr-1 pl-sm-2 pr-sm-2 pl-md-4 pr-md-4">
       <h1 data-toc-skip>{{ page.title }}</h1>
       <div class="post-meta text-muted d-flex flex-column">
@@ -16,7 +16,7 @@ layout: default
         <div>
           <span class="timeago" data-toggle="tooltip" title="{{ page.date | date: TOOLTIP_DATE }}">
             {{ page.date | date: POST_DATE }}
-            <i class="hidden">{{ page.date | date_to_xmlschema }}</i>
+            <i class="unloaded">{{ page.date | date_to_xmlschema }}</i>
           </span>
           {% if page.categories.size > 0 %}on{% endif %}
           {% for category in page.categories %}
@@ -31,7 +31,7 @@ layout: default
           Updated
           <span class="timeago lastmod" data-toggle="tooltip" title="{{ page.seo.date_modified | date: TOOLTIP_DATE }}">
             {{ page.seo.date_modified | date: POST_DATE }}
-            <i class="hidden">{{ page.seo.date_modified | date_to_xmlschema}}</i>
+            <i class="unloaded">{{ page.seo.date_modified | date_to_xmlschema}}</i>
           </span>
         </div>
         {% endif %}
@@ -72,14 +72,14 @@ layout: default
       </div><!-- div.post-tail -->
 
     </div> <!-- .post -->
-  </div> <!-- #post-wrap -->
+  </div> <!-- #post-wrapper -->
 
   {% include panel.html %}
 
 </div> <!-- .row -->
 
 <div class="row">
-  <div id="post-extend-wrap" class="col-12 col-lg-11 col-xl-8">
+  <div id="post-extend-wrapper" class="col-12 col-lg-11 col-xl-8">
 
     <div class="pl-1 pr-1 pl-sm-2 pr-sm-2 pl-md-4 pr-md-4">
       {% include related-posts.html %}
@@ -110,7 +110,7 @@ layout: default
 
     </div> <!-- .pl-1 pr-1 -->
 
-  </div> <!-- wrap -->
+  </div> <!-- #post-extend-wrapper -->
 
 </div> <!-- .row -->
 
diff --git a/assets/css/main.scss b/assets/css/main.scss
index 9055164..db4838e 100644
--- a/assets/css/main.scss
+++ b/assets/css/main.scss
@@ -133,12 +133,12 @@ body {
   }
 }
 
-#nav-wrap {
+#nav-wrapper {
   width: 100%;
   flex-grow: 1;
 }
 
-#profile-wrap {
+#profile-wrapper {
   margin-top: 2rem;
 }
 
@@ -205,20 +205,16 @@ body {
   box-shadow: 4px 0 8px 0 rgba(0, 0, 0, 0.2), 6px 0 20px 0 rgba(0, 0, 0, 0.19) !important;
 }
 
-#search-result-wrap {
+#search-result-wrapper {
   display: none;
   position: fixed;
-  top: 3rem;
+  top: 0;
+  padding-top: 3rem;
   height: 100%;
-  width: calc(100% - 260px);
   overflow: auto;
 }
 
-#search-result-wrap>div.row>div {
-  min-height: calc(100vh - 3rem - 2rem);
-}
-
-#search-result-wrap .post-content {
+#search-result-wrapper .post-content {
   margin-top: 2rem;
 }
 
@@ -237,7 +233,7 @@ body {
 
 /*--- top-bar ---*/
 
-#topbar {
+#topbar-wrapper {
   height: 3rem;
   position: fixed;
   top: 0;
@@ -249,7 +245,7 @@ body {
   box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.05);
 }
 
-#topbar i.fas { // icons
+#topbar i { // icons
   color: #999;
 }
 
@@ -266,32 +262,45 @@ body {
 
 #sidebar-trigger,
 #search-trigger {
-  margin: 0 1rem;
   display: none;
 }
 
-#search-wrap i.fas {
-  position: relative;
-  top: 1rem;
-  left: .5rem;
+#search-wrapper {
+  display: flex;
+  width: 95%;
+  border-radius: 1rem;
+  border: 1px solid #fff;
+  background: #f5f5f5;
+  padding: 0 .5rem;
+  transition: background-color .15s ease-in-out,border-color .15s ease-in-out;
+}
+
+#search-wrapper i {
   z-index: 2;
   font-size: .9rem;
   color: #c2c6cc;
 }
 
+#search-wrapper .fa-times-circle { /* button 'clean up' */
+  visibility: hidden;
+}
+
+#search-wrapper+a { /* 'Cancel' link */
+  color: #2a408e;
+  margin-left: 1rem;
+  display: none;
+}
+
 #search-input {
-  position: relative;
-  top: -.86rem;
-  background: #f5f5f5;
-  border-color: #fff;
-  border-radius: 0.9rem;
-  padding: .18rem .75rem .18rem 2rem;
+  background: center;
+  border: 0;
+  border-radius: 0;
+  padding: .18rem .3rem;
 }
 
 #search-input:focus {
   box-shadow: none;
   background: center;
-  border-color: #e9ecef;
 }
 
 #search-input:focus.form-control::-webkit-input-placeholder { opacity: 0.6; }
@@ -299,6 +308,57 @@ body {
 #search-input:focus.form-control:-ms-input-placeholder { opacity: 0.6; }
 #search-input:focus.form-control::placeholder { opacity: 0.6; }
 
+#search-hints {
+  display: none;
+}
+
+#search-hints .post-tag {
+  display: inline-block;
+  line-height: 1rem;
+  font-size: 1rem;
+  background: #f8f9fa;
+  border: none;
+  padding: .5rem;
+  margin: 0 1rem 1rem 0;
+}
+
+#search-hints .post-tag::before {
+  content: "#";
+  padding-right: .2rem;
+}
+
+#search-results {
+  padding-bottom: 6rem;
+}
+
+#search-results a {
+  font-size: 1.4rem;
+  font-weight: 400;
+  line-height: 2.5rem;
+}
+
+#search-results>div:not(:last-child) {
+  margin-bottom: 1rem;
+}
+
+#search-results>div i { /* icons */
+  color: #818182;
+  margin-right: .15rem;
+  font-size: 80%;
+}
+
+#search-results>div i:not(:first-child) {
+  margin-left: 1rem;
+}
+
+#search-results>div>p{
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+}
+
 #topbar-title {
   display: none;
   font-size: 1.1rem;
@@ -313,11 +373,6 @@ body {
   white-space: nowrap;
 }
 
-#search-wrap+a {
-  color: #2a408e;
-  display: none;
-}
-
 #mask {
   display: none;
   position: fixed;
@@ -336,9 +391,9 @@ body {
   display: block!important;
 }
 
-/*--- main wrap ---*/
+/*--- main wrapper ---*/
 
-#main-wrap {
+#main-wrapper {
   position: relative;
   min-height: 100%;
   padding-bottom: 6rem; /* equals to or greatter than footer's height */
@@ -359,14 +414,14 @@ body {
   min-height: calc(100vh - 3rem - 6rem);
 }
 
-#post-wrap {
+#post-wrapper {
   /* 350px for post extended block  */
   min-height: calc(100vh - 3rem - 6rem - 470px) !important;
 }
 
-#topbar.row,
+#topbar-wrapper.row,
 #main>.row,
-#search-result-wrap>.row {
+#search-result-wrapper>.row {
   margin-left: 0;
   margin-right: 0;
 }
@@ -374,7 +429,7 @@ body {
 footer {
   position: absolute;
   bottom: 0;
-  height: 6rem; /* see the height of #main-wrap */
+  height: 6rem; /* see the height of #main-wrapper */
   padding: 1rem;
   font-size: 0.8rem;
   color: #7a7b7d;
@@ -602,11 +657,6 @@ a.reversefootnote {
   border-bottom: 1px dotted #c2c6cc;
 }
 
-#search-results a {
-  font-size: 1.1rem;
-  line-height: 2.5rem;
-}
-
 p>a, span>a,
 .post-preview a,
 .categories a,
@@ -638,7 +688,7 @@ p>a, span>a,
 .post-content a:hover,
 .post a:hover code,
 footer a:hover,
-#post-wrap .post-content a:hover,
+#post-wrapper .post-content a:hover,
 #page .post-content a:hover,
 #access-lastmod a:hover {
   color: #d2603a;
@@ -732,12 +782,24 @@ table tbody td {
 
 /* --- Effects classes --- */
 
-.hidden {
-  display: none!important;
+.loaded {
+  display: block !important;
 }
 
-.shown {
-  display: block!important;
+.d-flex.loaded {
+  display: flex !important;
+}
+
+.unloaded {
+  display: none !important;
+}
+
+.visable {
+  visibility: visible !important;
+}
+
+.hidden {
+  visibility: hidden !important;
 }
 
 .no-scroll {
@@ -777,12 +839,17 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
   border-bottom: none!important;
 }
 
+.input-focus {
+  box-shadow: none;
+  border-color: #e9ecef !important;
+  background: center !important;
+}
 
 /*--- Responsive Design ---*/
 
 @media all and (max-width: 576px) {
 
-  #main-wrap {
+  #main-wrapper {
     padding-bottom: 10rem; /* footer height */
   }
 
@@ -790,7 +857,7 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
     min-height: calc(100vh - 3rem - 10rem); /* topbar is 3rem and footer is 10rem */
   }
 
-  #post-wrap {
+  #post-wrapper {
     min-height: calc(100vh - 3rem - 10rem - 470px) !important;
   }
 
@@ -804,7 +871,7 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
     margin-right: 1.8rem;
   }
 
-  #post-wrap h1 {
+  #post-wrapper h1 {
     margin-top: 2.2rem;
     font-size: 1.55rem;
   }
@@ -820,7 +887,7 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
     word-wrap: break-word;
   }
 
-  /* footer and #main-wrap expand vertical */
+  /* footer and #main-wrapper expand vertical */
   footer {
     height: 10rem;
   }
@@ -841,7 +908,13 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
 }
 
 
+/* Sidebar is visibal */
 @media all and (min-width: 831px) {
+  #search-wrapper {
+    width: 22%;
+    min-width: 150px;
+  }
+
   /* button 'back-to-Top' position */
   #back-to-top {
     bottom: 9.2rem;
@@ -864,7 +937,7 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
 
 /* iPad 9.7" horizontal */
 @media all and (min-width: 992px) and (max-width: 1024px) {
-  #main-wrap .col-lg-11 {
+  #main-wrapper .col-lg-11 {
     -webkit-box-flex: 0;
     -ms-flex: 0 0 96%;
     flex: 0 0 96%;
@@ -880,7 +953,7 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
     transform: translateX(0) !important;
   }
 
-  .sidebar-expand~#main-wrap {
+  .sidebar-expand~#main-wrapper {
     transform: translateX(260px) !important;
   }
 
@@ -895,12 +968,12 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
     transition: none;
   }
 
-  #main-wrap {
+  #main-wrapper {
     margin-left: 0;
   }
 
-  #search-result-wrap {
-    width: 100%
+  #search-result-wrapper {
+    width: 100%;
   }
 
   #page h1.dynamic-title {
@@ -912,11 +985,11 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
   }
 
   #breadcrumb,
-  #search-wrap {
+  #search-wrapper {
     display: none;
   }
 
-  #topbar {
+  #topbar-wrapper {
     position: -webkit-sticky;
     position: sticky;
     left: 0;
@@ -937,12 +1010,12 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
     display: block;
   }
 
-  #search-wrap.shown {
-    padding-left: 1rem;
+  #search-wrapper.loaded~a {
+    margin-right: 1rem;
   }
 
-  #search-wrap.shown~a {
-    padding-right: 1rem;
+  #search-wrapper .fa-times-circle {
+    right: 5.2rem;
   }
 
   #search-input {
@@ -950,10 +1023,15 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
     width: 95%;
   }
 
-  #search-result-wrap .post-content {
+  #search-result-wrapper .post-content {
     letter-spacing: 0;
   }
 
+  #search-hints {
+    display: block;
+    padding: 0 1rem;
+  }
+
   #tags {
     -webkit-box-pack: center!important;
     -ms-flex-pack: center!important;
@@ -981,11 +1059,11 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
     width: 210px;
   }
 
-  #topbar {
+  #topbar-wrapper {
     left: 210px;
   }
 
-  #search-result-wrap {
+  #search-result-wrapper {
     width: calc(100% - 210px);
   }
 
@@ -1004,7 +1082,7 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
     padding: 0 0.6rem;
   }
 
-  #main-wrap {
+  #main-wrapper {
     margin-left: 210px;
   }
 
@@ -1020,11 +1098,11 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
 
 /* Pannel hidden */
 @media all and (max-width: 1199px) {
-  #panel-wrap {
+  #panel-wrapper {
     display: none;
   }
 
-  #topbar-main {
+  #topbar {
     padding: 0;
   }
 
@@ -1033,6 +1111,10 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
     -ms-flex-pack: center!important;
     justify-content: center!important;
   }
+
+  #search-results>div {
+    max-width: 700px;
+  }
 }
 
 
@@ -1048,12 +1130,13 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
     padding-left: 3%;
   }
 
-  #panel-wrap {
-    max-width: 300px;
+  #topbar {
+    padding: 0;
+    max-width: 1070px;
   }
 
-  #topbar-main {
-    padding: 0 calc((100% - 1150px) / 2)!important;
+  #panel-wrapper {
+    max-width: 300px;
   }
 
   #back-to-top {
@@ -1061,17 +1144,32 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
     right: 4.3rem;
   }
 
-  #search-wrap {
-    width: 22%;
-    margin-right: 1rem;
-  }
-
   #search-input {
-    width: 100%;
     -webkit-transition: all .3s ease-in-out;
     transition: all .3s ease-in-out;
   }
 
+  #search-result-wrapper {
+    width: calc(100% - 260px);
+  }
+
+  #search-results>div {
+    max-width: 46%;
+  }
+
+  #search-results>div:nth-child(odd) {
+    margin-right: 1.5rem;
+  }
+
+  #search-results>div:nth-child(even) {
+    margin-left: 1.5rem;
+  }
+
+  #search-results>div:last-child:nth-child(odd) {
+    position: relative;
+    right: 24.3%;
+  }
+
 }
 
 @media all and (min-width: 1400px) {
@@ -1084,6 +1182,24 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
     max-width: 850px;
   }
 
+  #search-result-wrapper {
+    padding-right: 2rem;
+  }
+
+  #search-wrapper .fa-times-circle {
+    right: 2.6rem;
+  }
+
+  #search-result-wrapper>div {
+    max-width: 1110px;
+  }
+
+}
+
+@media all and (min-width: 1400px) and (max-width: 1650px) {
+  #topbar {
+    padding-right: 2rem;
+  }
 }
 
 @media all and (min-width: 1650px) {
@@ -1101,23 +1217,23 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
     padding-right: 1.9rem !important;
   }
 
-  #main-wrap {
+  #main-wrapper {
     margin-left: 350px;
   }
 
-  #panel-wrap {
+  #panel-wrapper {
     margin-left: calc((100% - 1150px) / 10);
   }
 
-  #topbar {
+  #topbar-wrapper {
     left: 350px;
   }
 
-  #topbar-main {
-    padding: 0 calc((100% - 1150px - 8%) / 2) !important;
+  #topbar {
+    max-width: 1150px;
   }
 
-  #search-wrap {
+  #search-wrapper {
     margin-right: 3%;
   }
 
@@ -1125,7 +1241,7 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
     width: 350px;
   }
 
-  #profile-wrap {
+  #profile-wrapper {
     margin-top: 4rem;
     margin-bottom: 5rem;
     -ms-flex-direction: column!important;
@@ -1218,15 +1334,19 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
     max-width: 1130px;
   }
 
+  #search-result-wrapper {
+    width: calc(100% - 350px); // 350px is the with of sidebar
+  }
+
+  #search-result-wrapper>div {
+    max-width: 1150px;
+  }
+
 }
 
 @media all and (min-width: 1700px) {
 
-  #topbar-main {
-    padding: 0 calc((100% - 1150px - 10%) / 2) !important;
-  }
-
-  #topbar {
+  #topbar-wrapper {
     padding-right: calc(100% - 350px - 1570px) /* 100% - 350px - (1920px - 350px); */
   }
 
@@ -1234,7 +1354,7 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
     padding-left: calc((100% - 1150px - 2%) / 2);
   }
 
-  #panel-wrap {
+  #panel-wrapper {
     margin-left: 3%;
   }
 
@@ -1258,7 +1378,11 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
     padding-left: 190px;
   }
 
-  #panel-wrap {
+  #search-result-wrapper {
+    padding-right: calc(100% - 350px - 1530px);
+  }
+
+  #panel-wrapper {
     margin-left: 41px;
   }
-}
\ No newline at end of file
+}
diff --git a/assets/css/post.scss b/assets/css/post.scss
index 9a5114a..2f9204f 100644
--- a/assets/css/post.scss
+++ b/assets/css/post.scss
@@ -56,7 +56,7 @@
   }
 }
 
-#toc-wrap {
+#toc-wrapper {
   border-left: 1px solid rgba(158, 158, 158, 0.17);
   position: -webkit-sticky;
   position: sticky;
@@ -65,11 +65,11 @@
   animation: fade-up .8s;
 }
 
-#toc-wrap.topbar-down {
+#toc-wrapper.topbar-down {
   top: 6rem;
 }
 
-#toc-wrap>h3 {
+#toc-wrapper>h3 {
   font-size: 1rem;
   font-family: 'Oswald', sans-serif;
   color: gray;
@@ -144,7 +144,7 @@
   right: 1rem;
 }
 
-#post-extend-wrap {
+#post-extend-wrapper {
   min-height: 2rem;
 }
 
@@ -190,28 +190,28 @@
 }
 
 /*
-  The following resposive design aim to make #post-extend-wrap margin-right same as pannel's width
+  The following resposive design aim to make #post-extend-wrapper margin-right same as pannel's width
 */
 @media all and (min-width: 1200px) {
-  #post-extend-wrap {
+  #post-extend-wrapper {
     margin-right: 25%;
   }
 }
 
 @media all and (min-width: 1460px) {
-  #post-extend-wrap {
+  #post-extend-wrapper {
     margin-right: 300px;
   }
 }
 
 @media all and (min-width: 1650px) {
-  #post-extend-wrap {
+  #post-extend-wrapper {
     margin-right: calc((100% - 1150px) / 10 + 300px);
   }
 }
 
 @media all and (min-width: 1700px) {
-  #post-extend-wrap {
+  #post-extend-wrapper {
     margin-right: calc((100% - 1150px) / 8 + 300px);
   }
 }
\ No newline at end of file
diff --git a/assets/js/_src/_commons/search-display.js b/assets/js/_src/_commons/search-display.js
index 7db0751..7882417 100644
--- a/assets/js/_src/_commons/search-display.js
+++ b/assets/js/_src/_commons/search-display.js
@@ -1,88 +1,154 @@
 /*
-* This script make #search-result-wrap switch to hidden or shown automatically.
+* This script make #search-result-wrapper switch to unloaded or shown automatically.
 * © 2018-2019 Cotes Chung
 * MIT License
 */
 
 $(function() {
 
-  var offset = 0;
-
-  var btnCancel = $('#search-wrap + a');
   var btnSbTrigger = $('#sidebar-trigger');
   var btnSearchTrigger = $('#search-trigger');
-  var btnCloseSearch = $('#search-wrap + a');
-  var topbarTitle = $('#topbar-title');
-  var searchWrap = $('#search-wrap');
+  var btnCancel = $('#search-wrapper + a');
+  var btnClear = $('#search-cleaner');
 
-  /*--- Actions in small screens ---*/
+  var main = $('#main');
+  var topbarTitle = $('#topbar-title');
+  var searchWrapper = $('#search-wrapper');
+  var resultWrapper = $('#search-result-wrapper');
+  var results = $('#search-results');
+  var input = $('#search-input');
+  var hints = $('#search-hints');
+
+
+  /*--- Actions in small screens (Sidebar unloaded) ---*/
+
+  var scrollBlocker = (function() {
+    var offset = 0;
+    return {
+      block: function() {
+        offset = $(window).scrollTop();
+        $('body').addClass('no-scroll');
+      },
+      release: function() {
+        $('body').removeClass('no-scroll');
+        $('html,body').scrollTop(offset);
+      },
+      getOffset: function() {
+        return offset;
+      }
+    }
+  })();
+
+  var mobileSearchBar = (function() {
+    return {
+      on: function() {
+        btnSbTrigger.addClass('unloaded');
+        topbarTitle.addClass('unloaded');
+        btnSearchTrigger.addClass('unloaded');
+        searchWrapper.addClass('d-flex');
+        btnCancel.addClass('loaded');
+      },
+      off: function() {
+        btnCancel.removeClass('loaded');
+        searchWrapper.removeClass('d-flex');
+        btnSbTrigger.removeClass('unloaded');
+        topbarTitle.removeClass('unloaded');
+        btnSearchTrigger.removeClass('unloaded');
+      }
+    }
+  })();
+
+  var resultSwitch = (function() {
+    var visable = false;
+
+    return {
+      on: function() {
+        if (!visable) {
+          resultWrapper.removeClass('unloaded');
+          main.addClass('hidden');
+
+          visable = true;
+          scrollBlocker.block();
+        }
+      },
+      off: function() {
+        if (visable) {
+          results.empty();
+          if (hints.hasClass('unloaded')) {
+            hints.removeClass('unloaded');
+          }
+          resultWrapper.addClass('unloaded');
+          btnClear.removeClass('visable');
+          main.removeClass('hidden');
+
+          input.val('');
+          visable = false;
+
+          scrollBlocker.release();
+        }
+      },
+      isVisable: function() {
+        return visable;
+      }
+    }
+  })();
+
+
+  function isMobileView() {
+    return btnCancel.hasClass('loaded');
+  }
 
   btnSearchTrigger.click(function() {
-
-    offset = $(window).scrollTop();
-
-    $('body').addClass('no-scroll');
-    // $('body').css('top', -offset + 'px');
-    // $('html,body').addClass('input-focus');
-
-    btnSbTrigger.addClass('hidden');
-    topbarTitle.addClass('hidden');
-    btnSearchTrigger.addClass('hidden');
-
-    searchWrap.addClass('shown flex-grow-1');
-    btnCancel.addClass('shown');
-
-    $('#main').addClass('hidden');
-    $('#search-result-wrap').addClass('shown');
-    $('#search-input').focus();
-
+    mobileSearchBar.on();
+    resultSwitch.on();
+    input.focus();
   });
 
   btnCancel.click(function() {
-
-    btnCancel.removeClass('shown');
-
-    $('#search-input').val('');
-    $('#search-results').empty();
-
-    searchWrap.removeClass('shown flex-grow-1');
-
-    btnSbTrigger.removeClass('hidden');
-    topbarTitle.removeClass('hidden');
-    btnSearchTrigger.removeClass('hidden');
-
-    $('#main').removeClass('hidden');
-    $('#search-result-wrap').removeClass('shown');
-
-    $('body').removeClass('no-scroll');
-    // $('html,body').removeClass('input-focus');
-
-    $('html,body').scrollTop(offset);
-
+    mobileSearchBar.off();
+    resultSwitch.off();
   });
 
-  /*--- Actions in large screens. ---*/
+  input.focus(function() {
+    searchWrapper.addClass('input-focus');
+  });
 
-  var isShown = false;
+  input.focusout(function() {
+    searchWrapper.removeClass('input-focus');
+  });
 
-  $('#search-input').on('input', function(){
-    if (isShown == false) {
-      offset = $(window).scrollTop();
-      $('body,html').scrollTop(0);
-      $('#search-result-wrap').addClass('shown');
-      $('#main').addClass('hidden');
-      isShown = true;
+  input.on('keyup', function(e) {
+    if (e.keyCode == 8 && input.val() == '') {
+      if (!isMobileView()) {
+        resultSwitch.off();
+      } else {
+        hints.removeClass('unloaded');
+      }
+    } else {
+      if (input.val() != '') {
+        resultSwitch.on();
+
+        if (!btnClear.hasClass('visible')) {
+          btnClear.addClass('visable');
+        }
+
+        if (isMobileView()) {
+          hints.addClass('unloaded');
+        }
+      }
     }
   });
 
-  $('#search-input').on('keyup', function(e){
-    var input = $('#search-input').val();
-    if (e.keyCode == 8 && input == '' && btnCloseSearch.css('display') == 'none') {
-      $('#main').removeClass('hidden');
-      $('#search-result-wrap').removeClass('shown');
-      $('body,html').scrollTop(offset);
-      isShown = false;
+  btnClear.on('click', function() {
+    input.val('');
+    if (isMobileView()) {
+      hints.removeClass('unloaded');
+      results.empty();
+    } else {
+      resultSwitch.off();
     }
+    input.focus();
+    btnClear.removeClass('visable');
   });
 
-});
+});
\ No newline at end of file
diff --git a/assets/js/_src/_commons/topbar-switch.js b/assets/js/_src/_commons/topbar-switch.js
index dee9701..7bc99db 100644
--- a/assets/js/_src/_commons/topbar-switch.js
+++ b/assets/js/_src/_commons/topbar-switch.js
@@ -8,7 +8,7 @@ $(function() {
   var didScroll;
   var lastScrollTop = 0;
   var delta = 5;
-  var topbarHeight = $('#topbar').outerHeight();
+  var topbarHeight = $('#topbar-wrapper').outerHeight();
 
   $(window).scroll(function(event) {
     if ($("#topbar-title").is(":hidden")) { // Not in small screens
@@ -32,10 +32,10 @@ $(function() {
 
     if (st > lastScrollTop && st > topbarHeight) {
       // Scroll Down
-      $('#topbar').removeClass('topbar-down').addClass('topbar-up');
+      $('#topbar-wrapper').removeClass('topbar-down').addClass('topbar-up');
 
-      if ( $('#toc-wrap').length > 0) {
-        $('#toc-wrap').removeClass('topbar-down');
+      if ( $('#toc-wrapper').length > 0) {
+        $('#toc-wrapper').removeClass('topbar-down');
       }
 
       if ( $('.access').length > 0) {
@@ -49,9 +49,9 @@ $(function() {
     } else {
       // Scroll Up
       if (st + $(window).height() < $(document).height()) {
-        $('#topbar').removeClass('topbar-up').addClass('topbar-down');
-        if ( $('#toc-wrap').length > 0) {
-          $('#toc-wrap').addClass('topbar-down');
+        $('#topbar-wrapper').removeClass('topbar-up').addClass('topbar-down');
+        if ( $('#toc-wrapper').length > 0) {
+          $('#toc-wrapper').addClass('topbar-down');
         }
         if ( $('.access').length > 0) {
           $('.access').addClass('topbar-down');
diff --git a/assets/js/_src/toc.js b/assets/js/_src/toc.js
index 2d3d765..c6f1a9f 100644
--- a/assets/js/_src/toc.js
+++ b/assets/js/_src/toc.js
@@ -6,8 +6,8 @@
  */
 
 $(function() {
-  if ($("#post-wrap .post-content h1").length == 0
-      && $("#post-wrap .post-content h2").length == 0) {
-    $("#toc-wrap").addClass("hidden");
+  if ($("#post-wrapper .post-content h1").length == 0
+      && $("#post-wrapper .post-content h2").length == 0) {
+    $("#toc-wrapper").addClass("unloaded");
   }
 });
\ No newline at end of file
diff --git a/assets/js/dist/_commons/search-display.min.js b/assets/js/dist/_commons/search-display.min.js
index a7f3ea2..8d789e1 100644
--- a/assets/js/dist/_commons/search-display.min.js
+++ b/assets/js/dist/_commons/search-display.min.js
@@ -1 +1 @@
-$(function(){var g=0;var e=$("#search-wrap + a");var c=$("#sidebar-trigger");var h=$("#search-trigger");var d=$("#search-wrap + a");var a=$("#topbar-title");var b=$("#search-wrap");h.click(function(){g=$(window).scrollTop();$("body").addClass("no-scroll");c.addClass("hidden");a.addClass("hidden");h.addClass("hidden");b.addClass("shown flex-grow-1");e.addClass("shown");$("#main").addClass("hidden");$("#search-result-wrap").addClass("shown");$("#search-input").focus()});e.click(function(){e.removeClass("shown");$("#search-input").val("");$("#search-results").empty();b.removeClass("shown flex-grow-1");c.removeClass("hidden");a.removeClass("hidden");h.removeClass("hidden");$("#main").removeClass("hidden");$("#search-result-wrap").removeClass("shown");$("body").removeClass("no-scroll");$("html,body").scrollTop(g)});var f=false;$("#search-input").on("input",function(){if(f==false){g=$(window).scrollTop();$("body,html").scrollTop(0);$("#search-result-wrap").addClass("shown");$("#main").addClass("hidden");f=true}});$("#search-input").on("keyup",function(j){var i=$("#search-input").val();if(j.keyCode==8&&i==""&&d.css("display")=="none"){$("#main").removeClass("hidden");$("#search-result-wrap").removeClass("shown");$("body,html").scrollTop(g);f=false}})});
\ No newline at end of file
+$(function(){var j=$("#sidebar-trigger");var o=$("#search-trigger");var h=$("#search-wrapper + a");var b=$("#search-cleaner");var e=$("#main");var c=$("#topbar-title");var k=$("#search-wrapper");var i=$("#search-result-wrapper");var g=$("#search-results");var l=$("#search-input");var a=$("#search-hints");var d=(function(){var p=0;return{block:function(){p=$(window).scrollTop();$("body").addClass("no-scroll")},release:function(){$("body").removeClass("no-scroll");$("html,body").scrollTop(p)},getOffset:function(){return p}}})();var m=(function(){return{on:function(){j.addClass("unloaded");c.addClass("unloaded");o.addClass("unloaded");k.addClass("d-flex");h.addClass("loaded")},off:function(){h.removeClass("loaded");k.removeClass("d-flex");j.removeClass("unloaded");c.removeClass("unloaded");o.removeClass("unloaded")}}})();var n=(function(){var p=false;return{on:function(){if(!p){i.removeClass("unloaded");e.addClass("hidden");p=true;d.block()}},off:function(){if(p){g.empty();if(a.hasClass("unloaded")){a.removeClass("unloaded")}i.addClass("unloaded");b.removeClass("visable");e.removeClass("hidden");l.val("");p=false;d.release()}},isVisable:function(){return p}}})();function f(){return h.hasClass("loaded")}o.click(function(){m.on();n.on();l.focus()});h.click(function(){m.off();n.off()});l.focus(function(){k.addClass("input-focus")});l.focusout(function(){k.removeClass("input-focus")});l.on("keyup",function(p){if(p.keyCode==8&&l.val()==""){if(!f()){n.off()}else{a.removeClass("unloaded")}}else{if(l.val()!=""){n.on();if(!b.hasClass("visible")){b.addClass("visable")}if(f()){a.addClass("unloaded")}}}});b.on("click",function(){l.val("");if(f()){a.removeClass("unloaded");g.empty()}else{n.off()}l.focus();b.removeClass("visable")})});
\ No newline at end of file
diff --git a/assets/js/dist/_commons/topbar-switch.min.js b/assets/js/dist/_commons/topbar-switch.min.js
index 619c911..5af585c 100644
--- a/assets/js/dist/_commons/topbar-switch.min.js
+++ b/assets/js/dist/_commons/topbar-switch.min.js
@@ -1 +1 @@
-$(function(){var d;var c=0;var e=5;var b=$("#topbar").outerHeight();$(window).scroll(function(f){if($("#topbar-title").is(":hidden")){d=true}});setInterval(function(){if(d){a();d=false}},250);function a(){var f=$(this).scrollTop();if(Math.abs(c-f)<=e){return}if(f>c&&f>b){$("#topbar").removeClass("topbar-down").addClass("topbar-up");if($("#toc-wrap").length>0){$("#toc-wrap").removeClass("topbar-down")}if($(".access").length>0){$(".access").removeClass("topbar-down")}if($("#search-input").is(":focus")){$("#search-input").blur()}}else{if(f+$(window).height()<$(document).height()){$("#topbar").removeClass("topbar-up").addClass("topbar-down");if($("#toc-wrap").length>0){$("#toc-wrap").addClass("topbar-down")}if($(".access").length>0){$(".access").addClass("topbar-down")}}}c=f}});
\ No newline at end of file
+$(function(){var d;var c=0;var e=5;var b=$("#topbar-wrapper").outerHeight();$(window).scroll(function(f){if($("#topbar-title").is(":hidden")){d=true}});setInterval(function(){if(d){a();d=false}},250);function a(){var f=$(this).scrollTop();if(Math.abs(c-f)<=e){return}if(f>c&&f>b){$("#topbar-wrapper").removeClass("topbar-down").addClass("topbar-up");if($("#toc-wrapper").length>0){$("#toc-wrapper").removeClass("topbar-down")}if($(".access").length>0){$(".access").removeClass("topbar-down")}if($("#search-input").is(":focus")){$("#search-input").blur()}}else{if(f+$(window).height()<$(document).height()){$("#topbar-wrapper").removeClass("topbar-up").addClass("topbar-down");if($("#toc-wrapper").length>0){$("#toc-wrapper").addClass("topbar-down")}if($(".access").length>0){$(".access").addClass("topbar-down")}}}c=f}});
\ No newline at end of file
diff --git a/assets/js/dist/toc.min.js b/assets/js/dist/toc.min.js
index 56f77f2..2a2dd0b 100644
--- a/assets/js/dist/toc.min.js
+++ b/assets/js/dist/toc.min.js
@@ -1 +1 @@
-$(function(){if($("#post-wrap .post-content h1").length==0&&$("#post-wrap .post-content h2").length==0){$("#toc-wrap").addClass("hidden")}});
\ No newline at end of file
+$(function(){if($("#post-wrapper .post-content h1").length==0&&$("#post-wrapper .post-content h2").length==0){$("#toc-wrapper").addClass("unloaded")}});
\ No newline at end of file
diff --git a/assets/lib/simple-jekyll-search-1.7.1.min.js b/assets/lib/simple-jekyll-search-1.7.1.min.js
deleted file mode 100644
index 8ba4f9f..0000000
--- a/assets/lib/simple-jekyll-search-1.7.1.min.js
+++ /dev/null
@@ -1,6 +0,0 @@
-/*!
-  * Simple-Jekyll-Search v1.7.1 (https://github.com/christian-fei/Simple-Jekyll-Search)
-  * Copyright 2015-2018, Christian Fei
-  * Licensed under the MIT License.
-  */
-!function(){"use strict";var f={load:function(t,e){var n=window.XMLHttpRequest?new window.XMLHttpRequest:new ActiveXObject("Microsoft.XMLHTTP");n.open("GET",t,!0),n.onreadystatechange=(r=n,i=e,function(){if(4===r.readyState&&200===r.status)try{i(null,JSON.parse(r.responseText))}catch(t){i(t,null)}}),n.send();var r,i}};var n=function(t,e){var n=e.length,r=t.length;if(n<r)return!1;if(r===n)return t===e;t:for(var i=0,o=0;i<r;i++){for(var u=t.charCodeAt(i);o<n;)if(e.charCodeAt(o++)===u)continue t;return!1}return!0},e=new function(){this.matches=function(t,e){return n(e.toLowerCase(),t.toLowerCase())}};var r=new function(){this.matches=function(e,t){return!!e&&(e=e.trim().toLowerCase(),0<(t=t.toLowerCase()).split(" ").filter(function(t){return 0<=e.indexOf(t)}).length)}};var l={put:function(t){if(s(t))return c(t);if(e=t,Boolean(e)&&"[object Array]"===Object.prototype.toString.call(e))return function(t){var e=[];a();for(var n=0,r=t.length;n<r;n++)s(t[n])&&e.push(c(t[n]));return e}(t);var e;return undefined},clear:a,search:function(t){if(!t)return[];return function(t,e,n,r){for(var i=[],o=0;o<t.length&&i.length<r.limit;o++){var u=p(t[o],e,n,r);u&&i.push(u)}return i}(o,t,u.searchStrategy,u).sort(u.sort)},setOptions:function(t){(u=t||{}).fuzzy=t.fuzzy||!1,u.limit=t.limit||10,u.searchStrategy=t.fuzzy?e:r,u.sort=t.sort||i}};function i(){return 0}var o=[],u={};function a(){return o.length=0,o}function s(t){return Boolean(t)&&"[object Object]"===Object.prototype.toString.call(t)}function c(t){return o.push(t),o}function p(t,e,n,r){for(var i in t)if(!d(t[i],r.exclude)&&n.matches(t[i],e))return t}function d(t,e){for(var n=!1,r=0,i=(e=e||[]).length;r<i;r++){var o=e[r];!n&&new RegExp(t).test(o)&&(n=!0)}return n}u.fuzzy=!1,u.limit=10,u.searchStrategy=u.fuzzy?e:r,u.sort=i;var h={compile:function(r){return v.template.replace(v.pattern,function(t,e){var n=v.middleware(e,r[e],v.template);return void 0!==n?n:r[e]||t})},setOptions:function(t){v.pattern=t.pattern||v.pattern,v.template=t.template||v.template,"function"==typeof t.middleware&&(v.middleware=t.middleware)}},v={};v.pattern=/\{(.*?)\}/g,v.template="",v.middleware=function(){};var m={merge:function(t,e){var n={};for(var r in t)n[r]=t[r],"undefined"!=typeof e[r]&&(n[r]=e[r]);return n},isJSON:function(t){try{return!!(t instanceof Object&&JSON.parse(JSON.stringify(t)))}catch(e){return!1}}};!function(e){var r={searchInput:null,resultsContainer:null,json:[],success:Function.prototype,searchResultTemplate:'<li><a href="{url}" title="{desc}">{title}</a></li>',templateMiddleware:Function.prototype,sortMiddleware:function(){return 0},noResultsText:"No results found",limit:10,fuzzy:!1,exclude:[]},i=["searchInput","resultsContainer","json"],o=function t(e){if(n=e,!(n&&"undefined"!=typeof n.required&&n.required instanceof Array))throw new Error("-- OptionsValidator: required options missing");var n;if(!(this instanceof t))return new t(e);var r=e.required;this.getRequiredOptions=function(){return r},this.validate=function(e){var n=[];return r.forEach(function(t){"undefined"==typeof e[t]&&n.push(t)}),n}}({required:i});function u(t){r.success(t),l.put(t),r.searchInput.addEventListener("keyup",function(t){var e;e=t.which,-1===[13,16,20,37,38,39,40,91].indexOf(e)&&(n(),s(t.target.value))})}function n(){r.resultsContainer.innerHTML=""}function a(t){r.resultsContainer.innerHTML+=t}function s(t){var e;(e=t)&&0<e.length&&(n(),function(t){var e=t.length;if(0===e)return a(r.noResultsText);for(var n=0;n<e;n++)a(h.compile(t[n]))}(l.search(t)))}function c(t){throw new Error("SimpleJekyllSearch --- "+t)}e.SimpleJekyllSearch=function(t){var n;return 0<o.validate(t).length&&c("You must specify the following required options: "+i),r=m.merge(r,t),h.setOptions({template:r.searchResultTemplate,middleware:r.templateMiddleware}),l.setOptions({fuzzy:r.fuzzy,limit:r.limit,sort:r.sortMiddleware}),m.isJSON(r.json)?u(r.json):(n=r.json,f.load(n,function(t,e){t&&c("failed to get JSON ("+n+")"),u(e)})),{search:s}}}(window)}();
\ No newline at end of file
diff --git a/search.json b/search.json
index 76a6d6f..6ae087f 100644
--- a/search.json
+++ b/search.json
@@ -1,6 +1,7 @@
 ---
 layout: compress
 ---
+
 [
   {% for post in site.posts %}
   {
@@ -8,7 +9,8 @@ layout: compress
     "url": "{{ site.baseurl }}{{ post.url }}",
     "categories": "{{ post.categories | join: ', '}}",
     "tags": "{{ post.tags | join: ', ' }}",
-    "date": "{{ post.date }}"
+    "date": "{{ post.date }}",
+    "snippet": "{{ post.content | strip_html | strip_newlines | remove_chars | escape | truncate: 300 }}"
   }{% unless forloop.last %},{% endunless %}
   {% endfor %}
 ]