diff --git a/wowchemy/assets/scss/wowchemy/_docs.scss b/wowchemy/assets/scss/wowchemy/_book.scss
similarity index 97%
rename from wowchemy/assets/scss/wowchemy/_docs.scss
rename to wowchemy/assets/scss/wowchemy/_book.scss
index 693469b3..d2c6fb21 100644
--- a/wowchemy/assets/scss/wowchemy/_docs.scss
+++ b/wowchemy/assets/scss/wowchemy/_book.scss
@@ -94,7 +94,7 @@
 
 /* Hide sidebar in printouts. */
 
-@media print {    
+@media print {
   .docs-sidebar {
     display: none;
   }
@@ -240,10 +240,15 @@ ul.toc-top {
 .toc-top li a {
   display: block;
   padding: .125rem 1.5rem;
-  color: #99979c;
+  color: rgba(0,0,0,.65);
   font-size: 0.7rem;
 }
 
+.dark #TableOfContents li a,
+.dark .toc-top li a {
+  color: rgba(255,255,255,.65);
+}
+
 #TableOfContents li a:hover,
 .toc-top li a:hover {
   color: $sta-primary;
diff --git a/wowchemy/assets/scss/wowchemy/_search.scss b/wowchemy/assets/scss/wowchemy/_search.scss
index 27c0f9e3..990463a4 100644
--- a/wowchemy/assets/scss/wowchemy/_search.scss
+++ b/wowchemy/assets/scss/wowchemy/_search.scss
@@ -2,7 +2,9 @@
  *  Search
  **************************************************/
 
-.search-results {
+// Search modal
+
+.search-modal {
   transform: scale(0);
   -webkit-transform: scale(0);
   background-color: $sta-background;
@@ -16,15 +18,16 @@
   z-index: -99;
 }
 
-.dark .search-results {
+.dark .search-modal {
   background-color: $sta-dark-background;
 }
 
+// Hide body scrollbars whilst searching in modal
 .searching {
   overflow: hidden;
 }
 
-.searching .search-results {
+.searching .search-modal {
   transform: scale(1);
   -webkit-transform: scale(1);
   visibility: visible;
@@ -35,15 +38,17 @@
   width: 100%;
 }
 
-.search-results > .container {
+.search-modal > .container {
   padding-top: 70px;  /* Navbar height. */
 }
 @media screen and (max-width: 1200px) {
-  .search-results > .container {
+  .search-modal > .container {
     padding-top: 50px;  /* Navbar height. */
   }
 }
 
+// Search modal header
+
 .search-header {
   position: -webkit-sticky;
   position: sticky;
@@ -51,6 +56,11 @@
   background-color: $sta-background;
   padding-top: 2rem;
   padding-bottom: 1rem;
+
+  // Reduce top padding on mobile
+  @include media-breakpoint-down(md) {
+    padding-top: 0;
+  }
 }
 
 .dark .search-header {
@@ -72,6 +82,8 @@
   line-height: 1;
 }
 
+// Search box in modal
+
 #search-box {
   position: relative; /* Required for search icon positioning. */
   margin-bottom: 0.5rem;
@@ -100,6 +112,17 @@
   font-size: 0.8rem;
 }
 
+.dark #search-query {
+  background-color: $sta-dark-background;;
+}
+
+.form-control:focus {
+  border-color: $sta-primary;
+  box-shadow: 0 0 0 .2rem $sta-primary-light;
+}
+
+// Search result items
+
 .search-hit em {
   font-style: normal;
   background-color: #FFE0B2;
@@ -121,9 +144,41 @@
   display: none;
 }
 
-.form-control:focus {
-  border-color: $sta-primary;
-  box-shadow: 0 0 0 .2rem $sta-primary-light;
+// Search button in Book sidebar
+
+.sidebar-search {
+  place-self: center start;
+  display: flex;
+  align-items: center;
+}
+
+.sidebar-search:hover {
+  color: rgba(0,0,0,.8);
+  box-shadow: inset 0 0 0 1px rgba(0,0,0,.1);
+}
+
+.dark .sidebar-search:hover {
+  color: rgba(255,255,255,.8);
+  box-shadow: inset 0 0 0 1px rgba(255,255,255,.9);
+}
+
+.sidebar-search-text {
+  flex-grow: 1;
+  text-align: left;
+}
+
+.sidebar-search-shortcut {
+  box-shadow: 0 1px 1px rgba(12,13,14,0.15), inset 0 1px 0 0 #fff;
+  flex-shrink: 0;
+  padding: 1px 8px;
+  margin: 0 0 0 10px;
+  color: rgba(0,0,0,.6);
+  font-size: 1.2rem;
+  letter-spacing: 1px;
+  background: rgb(228, 230, 232);
+  border-radius: 5px;
+  border: 1px solid rgb(159, 166, 173);
+  line-height: 1.2;
 }
 
 // Common queries
@@ -148,13 +203,8 @@
   color: rgb(248, 248, 242);
 }
 
-/* DARK themed components. */
+// Algolia dark-themed search input
 
-/* Algolia search input */
 .dark .ais-search-box--input {
   background-color: $sta-dark-background;;
 }
-
-.dark #search-query {
-  background-color: $sta-dark-background;;
-}
diff --git a/wowchemy/assets/scss/wowchemy/wowchemy.scss b/wowchemy/assets/scss/wowchemy/wowchemy.scss
index f9402a33..b271ca68 100644
--- a/wowchemy/assets/scss/wowchemy/wowchemy.scss
+++ b/wowchemy/assets/scss/wowchemy/wowchemy.scss
@@ -16,7 +16,7 @@
 @import "content";
 @import "listings";
 @import "widgets";
-@import "docs";
+@import "book";
 @import "dark";
 @import "integrations";
 @import "rtl";
diff --git a/wowchemy/layouts/partials/book_sidebar.html b/wowchemy/layouts/partials/book_sidebar.html
index 96ec6e46..4bf01edc 100644
--- a/wowchemy/layouts/partials/book_sidebar.html
+++ b/wowchemy/layouts/partials/book_sidebar.html
@@ -4,7 +4,11 @@
   </button>
 
   {{ if eq site.Params.search.engine 1 }}
-  <input name="q" type="search" class="form-control" placeholder="{{ i18n "search_placeholder" }}" autocomplete="off">
+  <button class="form-control sidebar-search js-search">
+    <i class="fas fa-search pr-2"></i>
+    <span class="sidebar-search-text">{{ i18n "search_placeholder" }}</span>
+    <span class="sidebar-search-shortcut">/</span>
+  </button>
   {{ end }}
 </form>
 
diff --git a/wowchemy/layouts/partials/search.html b/wowchemy/layouts/partials/search.html
index 5dc8dbc9..d88a910c 100644
--- a/wowchemy/layouts/partials/search.html
+++ b/wowchemy/layouts/partials/search.html
@@ -1,6 +1,6 @@
 {{/* Partial for built-in search and Algolia search. */}}
 {{ if eq site.Params.search.engine 1 | or (eq site.Params.search.engine 2) }}
-<aside class="search-results" id="search">
+<aside class="search-modal" id="search">
   <div class="container">
     <section class="search-header">