diff --git a/package.json b/package.json
index 97bf983..f5f14bf 100644
--- a/package.json
+++ b/package.json
@@ -38,9 +38,9 @@
     "babel-polyfill": "^6.23.0",
     "bulma": "^0.4.0",
     "dexie": "^1.5.1",
-    "inferno": "^1.6.0",
-    "inferno-component": "^1.6.0",
-    "inferno-devtools": "^1.6.0",
+    "inferno": "^3.0.5",
+    "inferno-component": "^3.0.5",
+    "inferno-devtools": "^3.0.5",
     "marked": "^0.3.6",
     "papaparse": "^4.2.0"
   }
diff --git a/src/components/display/DictionaryDetails.jsx b/src/components/display/DictionaryDetails.jsx
index 0a98c82..4445b27 100644
--- a/src/components/display/DictionaryDetails.jsx
+++ b/src/components/display/DictionaryDetails.jsx
@@ -2,14 +2,11 @@ import Inferno from 'inferno';
 import Component from 'inferno-component';
 import marked from 'marked';
 
-import {SearchBox} from '../management/SearchBox';
-
 const DISPLAY = {
   NONE: false
 , DESCRIPTION: 1
 , DETAILS: 2
 , STATS: 3
-, SEARCH: 4
 }
 
 export class DictionaryDetails extends Component {
@@ -124,11 +121,6 @@ export class DictionaryDetails extends Component {
           );
           break;
         }
-
-        case DISPLAY.SEARCH : {
-          displayJSX = <SearchBox />;
-          break;
-        }
       }
 
       return (
@@ -154,46 +146,35 @@ export class DictionaryDetails extends Component {
 
           <div className='level-right'>
             <div className='level-item'>
-              <div className='field is-grouped'>
-                <div className='control'>
-                  <a className='button' onClick={this.toggleDisplay.bind(this, DISPLAY.SEARCH)}>
-                    Search
-                  </a>
-                </div>
-                <div className='control'>
+              <div className='field'>
+                <p className='control'>
                   <a className='button'>
                     Edit Dictionary
                   </a>
-                </div>
+                </p>
               </div>
             </div>
           </div>
         </div>
 
-        <div className='level'>
-          <div className='level-left'>
-            <div className='level-item'>
-              <div className='tabs is-toggle'>
-                <ul>
-                  <li className={(this.state.currentDisplay === DISPLAY.DESCRIPTION) ? 'is-active' : null}>
-                    <a onClick={this.toggleDisplay.bind(this, DISPLAY.DESCRIPTION)}>
-                      <span>Description</span>
-                    </a>
-                  </li>
-                  <li className={(this.state.currentDisplay === DISPLAY.DETAILS) ? 'is-active' : null}>
-                    <a onClick={this.toggleDisplay.bind(this, DISPLAY.DETAILS)}>
-                      <span>Details</span>
-                    </a>
-                  </li>
-                  <li className={(this.state.currentDisplay === DISPLAY.STATS) ? 'is-active' : null}>
-                    <a onClick={this.toggleDisplay.bind(this, DISPLAY.STATS)}>
-                      <span>Stats</span>
-                    </a>
-                  </li>
-                </ul>
-              </div>
-            </div>
-          </div>
+        <div className='tabs is-toggle'>
+          <ul>
+            <li className={(this.state.currentDisplay === DISPLAY.DESCRIPTION) ? 'is-active' : null}>
+              <a onClick={this.toggleDisplay.bind(this, DISPLAY.DESCRIPTION)}>
+                <span>Description</span>
+              </a>
+            </li>
+            <li className={(this.state.currentDisplay === DISPLAY.DETAILS) ? 'is-active' : null}>
+              <a onClick={this.toggleDisplay.bind(this, DISPLAY.DETAILS)}>
+                <span>Details</span>
+              </a>
+            </li>
+            <li className={(this.state.currentDisplay === DISPLAY.STATS) ? 'is-active' : null}>
+              <a onClick={this.toggleDisplay.bind(this, DISPLAY.STATS)}>
+                <span>Stats</span>
+              </a>
+            </li>
+          </ul>
         </div>
 
         {this.displayInfo()}
diff --git a/src/components/management/SearchBox.jsx b/src/components/management/SearchBox.jsx
index a66183d..5be56df 100644
--- a/src/components/management/SearchBox.jsx
+++ b/src/components/management/SearchBox.jsx
@@ -4,77 +4,158 @@ import Component from 'inferno-component';
 export class SearchBox extends Component {
   constructor (props) {
     super(props);
+
+    this.state = {
+      searchingIn: 'name'
+    , searchTerm: ''
+    , showHeader: false
+    , showAdvanced: false
+    };
+  }
+
+  displaySearchHeader () {
+    if (this.state.showHeader) {
+      return (
+        <header className='search-bar is-small'>
+          <div className='search-body'>
+            <div className='search-background'
+              onClick={() => this.hideHeader()} />
+
+            <div className='container'>
+              <div className='box'>
+                <div className='columns is-mobile'>
+
+                  <div className='column'>
+                    <div className='field has-addons'>
+                      <p className='control'>
+                        <span className='select'>
+                          <select value={this.state.searchingIn}
+                            onChange={event => {
+                              console.log(event);
+                              this.setState({searchingIn: event.target.value});
+                            }}>
+                            <option value='name'>Word</option>
+                            <option value='definition'>Definition</option>
+                            <option value='details'>Details</option>
+                          </select>
+                        </span>
+                      </p>
+                      <p className='control is-expanded'>
+                        <input className='input' type='text' placeholder='Search Term'
+                          value={this.state.searchTerm}
+                          onChange={event => {
+                            console.log(event);
+                            this.setState({searchTerm: event.target.value});
+                          }} />
+                      </p>
+                    </div>
+
+                    {this.showFilterOptions()}
+                    
+                  </div>
+
+                  <div className='column is-narrow'>
+                    <div className='field has-addons'>
+                      <a className='delete'
+                        onClick={() => this.hideHeader()} />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </header>
+      );
+    }
   }
 
   showFilterOptions () {
     if (this.props.hasOwnProperty('partsOfSpeech')
         && this.props.partsOfSpeech.length > 0) {
-      let filterOptionsJSX = this.props.partsOfSpeech.map((partOfSpeech) => {
-        return (
-          <label key={'filterPartOfSpeech' + Date.now()}
-            className='checkbox'>
-            <input type='checkbox' />
-            {partOfSpeech}
-          </label>
-        );
-      });
+      let filterSectionJSX = (
+        <div className='field is-horizontal'>
+          <div className='field-label is-normal'>
+            <label className='label'>Filter</label>
+          </div>
+          <div className='field-body'>
+            <div className='field is-grouped'>
+            {this.props.partsOfSpeech.map((partOfSpeech) => {
+              return (
+                <p className='control'>
+                  <label key={'filterPartOfSpeech' + Date.now()}
+                    className='checkbox'>
+                    <input type='checkbox' checked={true} />
+                    {partOfSpeech}
+                  </label>
+                </p>
+              );
+            })}
+            </div>
+          </div>
+        </div>
+      );
+
+      let advancedSectionJSX = (
+        <div className='column'>
+          <div className='box'>
+            {filterSectionJSX}
+          </div>
+        </div>
+      );
 
       return (
-        <div className='field'>
-          <label>Filter</label>
-          <p className='control'>
-            {filterOptionsJSX}
-          </p>
+        <div class='columns'>
+          <div class='column is-narrow'>
+            <div className='field'>
+              <p className='control'>
+                <a className='button is-link is-small'
+                  onClick={() => this.setState({showAdvanced: !this.state.showAdvanced})}>
+                  Advanced
+                </a>
+              </p>
+            </div>
+          </div>
+          {this.state.showAdvanced ? advancedSectionJSX : null}
         </div>
       );
     }
   }
 
+  showHeader () {
+    this.setState({
+      showHeader: true
+    });
+  }
+
+  hideHeader () {
+    this.setState({
+      showHeader: false
+    });
+  }
+
   render () {
     return (
-      <div className='message'>
-        <div class="message-header">
-          <span>
-            Search
-          </span>
-          <button class="delete"></button>
+      <div>
+        <div className='field has-addons is-hidden-touch'>
+          <p className='control'>
+            <input className='input' type='text' readonly={true}
+              value={this.state.searchTerm}
+              onClick={() => this.showHeader()} />
+          </p>
+          <p className='control'>
+            <a className='button is-link'
+              onClick={() => this.showHeader()}>
+              Search
+            </a>
+          </p>
         </div>
-        <div class="message-body">
-          <div className='field'>
-            <div className='control'>
-              <input className='input' type='text' placeholder='Search Term' />
-            </div>
-          </div>
-          
-          <div className='field is-horizontal'>
-            <div className='field-label'>
-              <label className='label'>
-                Search In
-              </label>
-            </div>
-            <div className='field-body'>
-              <div className='field is-narrow'>
-                <div className='control'>
-                  <label className='radio'>
-                    <input type='radio' name='member' value='Word' checked />
-                    Word
-                  </label>
-                  <label className='radio'>
-                    <input type='radio' name='member' />
-                    Definition
-                  </label>
-                  <label className='radio'>
-                    <input type='radio' name='member' />
-                    Details
-                  </label>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        
-        {this.showFilterOptions()}
 
+        <a className='button is-hidden-desktop'
+          onClick={() => this.showHeader()}>
+          S
+        </a>
+
+        {this.displaySearchHeader()}
       </div>
     );
   }
diff --git a/src/components/structure/Header.jsx b/src/components/structure/Header.jsx
index 7eb6228..fd4605f 100644
--- a/src/components/structure/Header.jsx
+++ b/src/components/structure/Header.jsx
@@ -1,6 +1,8 @@
 import Inferno from 'inferno';
 import Component from 'inferno-component';
 
+import {SearchBox} from '../management/SearchBox';
+
 export class Header extends Component {
   constructor (props) {
     super(props);
@@ -15,7 +17,14 @@ export class Header extends Component {
           </a>
         </div>
 
-        <span class="nav-toggle">
+        <div className='nav-center'>
+          <div className='nav-item'>
+            <SearchBox
+              partsOfSpeech={['Noun','Adjective','Verb']} />
+          </div>
+        </div>
+
+        <span class='nav-toggle'>
           <span></span>
           <span></span>
           <span></span>
diff --git a/src/sass/_styles.scss b/src/sass/_styles.scss
new file mode 100644
index 0000000..e07f7b9
--- /dev/null
+++ b/src/sass/_styles.scss
@@ -0,0 +1,29 @@
+@import 'variables';
+@import '../../node_modules/bulma/bulma';
+
+.input {
+  &[readonly] {
+    &.is-clickable {
+      cursor: pointer;
+    }
+  }
+}
+
+.search-bar {
+	@extend .hero;
+  background: transparent;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 100;
+
+  .search-body {
+    @extend .hero-body;
+    @extend .is-paddingless;
+
+    .search-background {
+      @extend .modal-background;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/sass/_variables.scss b/src/sass/_variables.scss
index 8ccb402..c9dfbfb 100644
--- a/src/sass/_variables.scss
+++ b/src/sass/_variables.scss
@@ -1,2 +1,127 @@
+////////////////////////////////////////////////
+////////////////////////////////////////////////
+// 1. Initial variables
+
+// Colors
+$black:        hsl(0, 0%, 4%);
+$black-bis:    hsl(0, 0%, 7%);
+$black-ter:    hsl(0, 0%, 14%);
+
+$grey-darker:  hsl(0, 0%, 21%);
+$grey-dark:    hsl(0, 0%, 29%);
+$grey:         hsl(0, 0%, 48%);
+$grey-light:   hsl(0, 0%, 71%);
+$grey-lighter: hsl(0, 0%, 86%);
+
+$white-ter:    hsl(0, 0%, 96%);
+$white-bis:    hsl(0, 0%, 98%);
+$white:        hsl(0, 0%, 100%);
+
+$orange:       hsl(14,  100%, 53%);
+$yellow:       hsl(48,  100%, 67%);
+$green:        hsl(141, 71%,  48%);
+$turquoise:    hsl(171, 100%, 41%);
+$blue:         hsl(217, 71%,  53%);
+$purple:       hsl(271, 100%, 71%);
+$red:          hsl(348, 100%, 61%);
+
+// Typography
+$family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+$family-monospace: monospace;
+
+$size-1: 3rem;
+$size-2: 2.5rem;
+$size-3: 2rem;
+$size-4: 1.5rem;
+$size-5: 1.25rem;
+$size-6: 1rem;
+$size-7: 0.75rem;
+
+$weight-light: 300;
+$weight-normal: 400;
+$weight-semibold: 500;
+$weight-bold: 700;
+
+// Body
+$body-background: $white;
+$body-size: 16px;
+
+// Responsiveness
+// 960, 1152, and 1344 have been chosen because
+// they are divisible by both 12 and 16
+$tablet: 769px;
+// 960px container + 40px
+$desktop: 1000px;
+// 1152px container + 40
+$widescreen: 1192px;
+// 1344px container + 40
+$fullhd: 1384px;
+
+// Miscellaneous
+$easing: ease-out;
+// $radius-small: 2px;
+// $radius: 3px;
+// $radius-large: 5px;
+$radius-small: 0;
 $radius: 0;
 $radius-large: 0;
+$speed: 86ms;
+
+////////////////////////////////////////////////
+////////////////////////////////////////////////
+// 2. Primary colors
+
+$primary: $turquoise;
+
+$info: $blue;
+$success: $green;
+$warning: $yellow;
+$danger: $red;
+
+$light: $white-ter;
+$dark: $grey-darker;
+
+////////////////////////////////////////////////
+////////////////////////////////////////////////
+// 3. Applied variables
+
+// General colors
+$background: $white-ter;
+
+$border: $grey-lighter;
+$border-hover: $grey-light;
+
+// Text colors
+$text: $grey-dark;
+$text-light: $grey;
+$text-strong: $grey-darker;
+
+// Code colors
+$code: $red;
+$code-background: $background;
+
+$pre: $text;
+$pre-background: $background;
+
+// Link colors
+$link: $primary;
+$link-visited: $purple;
+
+$link-hover: $grey-darker;
+$link-hover-border: $grey-light;
+
+$link-focus: $grey-darker;
+$link-focus-border: $primary;
+
+$link-active: $grey-darker;
+$link-active-border: $grey-dark;
+
+// Typography
+$family-primary: $family-sans-serif;
+$family-code: $family-monospace;
+
+$size-small: $size-7;
+$size-normal: $size-6;
+$size-medium: $size-5;
+$size-large: $size-4;
+
diff --git a/src/sass/main.scss b/src/sass/main.scss
index 07cc46b..3ca3320 100644
--- a/src/sass/main.scss
+++ b/src/sass/main.scss
@@ -1,2 +1,3 @@
 @import 'variables';
 @import '../../node_modules/bulma/bulma';
+@import 'styles';
diff --git a/yarn.lock b/yarn.lock
index dca7cfc..2fc350f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1381,41 +1381,41 @@ indexof@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/indexof/-/indexof-0.0.1.tgz#82dc336d232b9062179d05ab3293a66059fd435d"
 
-inferno-component@^1.6.0:
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/inferno-component/-/inferno-component-1.6.0.tgz#ba5c4f04d3508950cd4c602d5c8df823b9628495"
+inferno-component@3.0.5, inferno-component@^3.0.5:
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/inferno-component/-/inferno-component-3.0.5.tgz#f39584dbdd8e43167fbbfcfa8d2bc5509dac5c33"
   dependencies:
-    inferno "^1.6.0"
-    inferno-shared "^1.6.0"
-    inferno-vnode-flags "^1.6.0"
+    inferno "3.0.5"
+    inferno-shared "^3.0.0"
+    inferno-vnode-flags "^3.0.0"
 
-inferno-devtools@^1.6.0:
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/inferno-devtools/-/inferno-devtools-1.6.0.tgz#869953c1d5a85fa899f9ee8405e5d93d470629d0"
+inferno-devtools@^3.0.5:
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/inferno-devtools/-/inferno-devtools-3.0.5.tgz#19669dcb900c5416dcc73225f84b6b53e7234942"
   dependencies:
-    inferno "^1.6.0"
-    inferno-component "^1.6.0"
-    inferno-shared "^1.6.0"
-    inferno-vnode-flags "^1.6.0"
+    inferno "3.0.5"
+    inferno-component "3.0.5"
+    inferno-shared "^3.0.0"
+    inferno-vnode-flags "^3.0.0"
 
-inferno-shared@^1.6.0:
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/inferno-shared/-/inferno-shared-1.6.0.tgz#8b85ec17c7140a2fe1320e556df05accc4af7145"
+inferno-shared@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/inferno-shared/-/inferno-shared-3.0.0.tgz#daaeaf1b52803ab0572c7765ccfcfb925cfe8272"
 
 inferno-vnode-flags@1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/inferno-vnode-flags/-/inferno-vnode-flags-1.5.1.tgz#3b1b54ee5e9f167863b89e6bee1b19fd3941329f"
 
-inferno-vnode-flags@^1.6.0:
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/inferno-vnode-flags/-/inferno-vnode-flags-1.6.0.tgz#a4937aad290aec2abe743db8221af57531b3c941"
+inferno-vnode-flags@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/inferno-vnode-flags/-/inferno-vnode-flags-3.0.0.tgz#f396390f3dafae3b76eea04d04eed6cf2004473b"
 
-inferno@^1.6.0:
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/inferno/-/inferno-1.6.0.tgz#e5cb246dab5fee58738513fe0a9e4d725d65fb4b"
+inferno@3.0.5, inferno@^3.0.5:
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/inferno/-/inferno-3.0.5.tgz#e827b8db339e5e91bae25a14a1537ebd1f7b89df"
   dependencies:
-    inferno-shared "^1.6.0"
-    inferno-vnode-flags "^1.6.0"
+    inferno-shared "^3.0.0"
+    inferno-vnode-flags "^3.0.0"
 
 inflight@^1.0.4:
   version "1.0.6"