diff --git a/src/ui/public/vislib/styles/_legend.less b/src/ui/public/vislib/styles/_legend.less
index 2b2ae6ac0d738..5c20042f49b00 100644
--- a/src/ui/public/vislib/styles/_legend.less
+++ b/src/ui/public/vislib/styles/_legend.less
@@ -77,7 +77,7 @@ visualize-legend {
   &-full {
     white-space: normal;
     word-break: break-all;
-    background-color: @sidebar-bg;
+    background-color: @sidebar-hover-bg;
   }
 
   &-details {
diff --git a/src/ui/public/visualize/visualize_legend.html b/src/ui/public/visualize/visualize_legend.html
index 9b26e703a37cf..4abb1493e4a97 100644
--- a/src/ui/public/visualize/visualize_legend.html
+++ b/src/ui/public/visualize/visualize_legend.html
@@ -19,8 +19,12 @@
           <i class="fa fa-circle" ng-style="{color: getColor(legendData.label)}"></i> {{legendData.label}}
         </div>
 
-
         <div ng-if="showDetails" class="legend-value-details">
+          <div ng-show="canFilter(legendData)">
+            <button class="btn btn-xs filter-button" ng-click="filter(legendData, false)"><i class="fa fa-search-plus"></i></button>
+            <button class="btn btn-xs filter-button" ng-click="filter(legendData, true)"><i class="fa fa-search-minus"></i></button>
+          </div>
+
           <div class="legend-value-color-picker">
             <i ng-repeat="choice in colors"
               ng-click="setColor(legendData.label, choice)"
@@ -29,10 +33,6 @@
             </i>
           </div>
 
-          <div ng-show="canFilter(legendData)">
-            <button class="btn btn-xs filter-button" ng-click="filter(legendData, false)"><i class="fa fa-search-plus"></i></button>
-            <button class="btn btn-xs filter-button" ng-click="filter(legendData, true)"><i class="fa fa-search-minus"></i></button>
-          </div>
         </div>
       </div>