diff --git a/content/assets/scripts/search.coffee b/content/assets/scripts/search.coffee
new file mode 100644
index 0000000..dce58ed
--- /dev/null
+++ b/content/assets/scripts/search.coffee
@@ -0,0 +1,6 @@
+$ ->
+  $('#tipue_search_input_field').focusin ->
+    $('#tipue_search_input').addClass("focused")
+
+  $('#tipue_search_input_field').focusout ->
+    $('#tipue_search_input').removeClass("focused")
diff --git a/content/assets/stylesheets/includes/general.scss b/content/assets/stylesheets/includes/general.scss
index 93e12ab..c38264d 100644
--- a/content/assets/stylesheets/includes/general.scss
+++ b/content/assets/stylesheets/includes/general.scss
@@ -96,9 +96,16 @@ footer.footer {
   font: inherit;
   color: inherit;
 
+  width: 40px;
+
+  border-color: rgba(0, 0, 0, 0);
+
   display: flex;
   flex-direction: row;
 
+  transition: all 0.5s;
+
+
   input {
     background: none;
     border: none;
@@ -111,6 +118,11 @@ footer.footer {
     color: inherit;
   }
 
+  &:hover, &:focus, &.focused {
+    width: 170px;
+    border: 1px solid #e2e2e2;
+  }
+
   &::before {
     font: normal normal normal 14px/1 FontAwesome;
     content: "\f002 ";
diff --git a/layouts/default.erb b/layouts/default.erb
index 9ecec65..ec8e71f 100644
--- a/layouts/default.erb
+++ b/layouts/default.erb
@@ -25,6 +25,7 @@
     <link href="https://cdnjs.cloudflare.com/ajax/libs/Tipue-Search/5.0.0/tipuesearch.css" rel="stylesheet">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/Tipue-Search/5.0.0/tipuesearch_set.js"></script>
     <%= asset :js, :tipuesearch %>
+    <%= asset :js, :search %>
 
     <!-- Place this tag in your head or just before your close body tag. -->
     <script async defer src="https://buttons.github.io/buttons.js"></script>