diff --git a/css/styles.css b/css/styles.css
index 9e6fa07..d1ee715 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -91,11 +91,12 @@
   margin: 0;
 }
 
-#searchButton {
+#search {
   position: absolute;
   right: 10px;
   bottom: 110px;
   z-index: 100;
+  display: none;
 }
 
 #zoomin {
@@ -112,6 +113,128 @@
   z-index: 100;
 }
 
+/**
+  * MD search box
+  */
+.md-google-search__metacontainer {
+  position: absolute;
+  top: 10px;
+  height: 48px;
+  width: 100%;
+  z-index: 100;
+}
+
+.md-google-search__container {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  height: 48px;
+  width: Calc(100% - 66px);
+  max-width: 720px;
+  white-space: nowrap;
+}
+
+.md-google-search {
+  height: 48px;
+  background-color: rgba(245,245,245,1);
+  border: 1px solid rgba(0,0,0,0);
+  -webkit-border-radius: 4px;
+  border-radius: 4px;
+  max-width: 720px;
+  position: relative;
+  -webkit-transition: background-color 100ms ease-in,width 100ms ease-out;
+  transition: background-color 100ms ease-in,width 100ms ease-out;
+}
+
+.md-google-search:focus-within {
+  border: 1px solid rgba(0,0,0,0.45);
+  background-color: rgba(255,255,255,1);
+  -webkit-box-shadow: 0 1px 1px rgba(255,255,255,.5);
+  box-shadow: 0 1px 1px rgba(255,255,255,.5);
+}
+
+.md-google-search__search-btn {
+  float: left;
+  background: none;
+  border: none;
+  opacity: .54;
+  outline: none;
+  padding: 0 4px;
+  line-height: 0;
+  color: #212121;
+}
+
+.md-google-search__search-btn svg, .md-google-search__empty-btn svg {
+  padding: 7px;
+  margin: 4px;
+}
+
+.md-google-search__field-container {
+  height: 46px;
+  padding: 0 11px;
+  margin-right: 48px;
+}
+
+.md-google-search__field {
+  border: none;
+  font: normal 16px Roboto,sans-serif;
+  height: 24px;
+  outline: none;
+  padding: 11px 0 11px 16px;
+  width: 100%;
+  background: transparent;
+}
+
+.md-google-search__empty-btn {
+  position: absolute;
+  right: 0;
+  top: 0;
+  background: none;
+  border: none;
+  opacity: .54;
+  outline: none;
+  padding: 0 4px;
+  line-height: 0;
+  color: #212121;
+  cursor: pointer;
+}
+
+/**
+  * Search Box Autocomplete
+  */
+
+.autocomplete-container{
+  z-index: 110;
+  position: absolute;
+  top: 60px;
+  width: 100%;
+}
+
+.autocomplete-items {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  width: Calc(100% - 66px);
+  max-width: 720px;
+  background-color: white;
+  color: black;
+  box-shadow: 0 2px 5px 0 rgba(255,255,255,0.258824),0 2px 10px 0 rgba(255,255,255,0.156863) !important;
+}
+
+.autocomplete-item {
+  font-size: 16px;
+  padding: 12px 14px;
+  cursor: pointer;
+}
+
+.autocomplete-item:hover, .autocomplete-active {
+  background: #eee;
+}
+
+.autocomplete-year {
+  color: #222;
+}
+
 @media (max-width: 700px) {
   #dialog {
     width: Calc(100% - 32px)!important;
@@ -126,4 +249,8 @@
   #min-dialog {
     display: block!important;
   }
+
+  #search {
+    display: block!important;
+  }
 }