diff --git a/internal_packages/search-bar/lib/search-bar.cjsx b/internal_packages/search-bar/lib/search-bar.cjsx
index 861b24880..fa41d2da7 100644
--- a/internal_packages/search-bar/lib/search-bar.cjsx
+++ b/internal_packages/search-bar/lib/search-bar.cjsx
@@ -94,6 +94,8 @@ SearchBar = React.createClass
 
   _onValueChange: (event) ->
     Actions.searchQueryChanged(@_stringToQuery(event.target.value))
+    if (event.target.value is '')
+      @_onClearSearch()
 
   _onSelectSuggestion: (item) ->
     Actions.searchQueryCommitted(item.value)
diff --git a/internal_packages/search-bar/stylesheets/search-bar.less b/internal_packages/search-bar/stylesheets/search-bar.less
index 5d10ba8b4..42e449bf8 100644
--- a/internal_packages/search-bar/stylesheets/search-bar.less
+++ b/internal_packages/search-bar/stylesheets/search-bar.less
@@ -65,7 +65,10 @@
     position: relative;
 
     &.showing-suggestions {
-      .suggestions{ display: inherit; }
+      .suggestions { display: inherit; }
+    }
+    &.showing-query {
+      .clear { display: inherit; }
     }
   }
 
@@ -79,11 +82,10 @@
 
     &.clear {
       position: absolute;
-      top: 0;
+      top: floor(40px - 26px)/2;
+      color: @input-accessory-color;
+      right: @padding-base-horizontal;
       display: none;
-      padding: 17px 19px;
-      line-height: 20px
-      right: 0;
     }
   }
 }