diff --git a/frontend/app/components/shared/FilterDropdown/filterDropdown.css b/frontend/app/components/shared/FilterDropdown/filterDropdown.css
index 976a0d233..5ebcbcb65 100644
--- a/frontend/app/components/shared/FilterDropdown/filterDropdown.css
+++ b/frontend/app/components/shared/FilterDropdown/filterDropdown.css
@@ -3,6 +3,10 @@
   padding: 0 10px;
   &:hover {
     background-color: $gray-light;
+    color: white;
+    & svg {
+      fill: white;
+    }
   }
 }
 
diff --git a/frontend/app/components/shared/MetricsFilters/FilterItem/FilterItem.js b/frontend/app/components/shared/MetricsFilters/FilterItem/FilterItem.js
index aa235f2fe..249eb6ae6 100644
--- a/frontend/app/components/shared/MetricsFilters/FilterItem/FilterItem.js
+++ b/frontend/app/components/shared/MetricsFilters/FilterItem/FilterItem.js
@@ -55,7 +55,7 @@ const FilterItem = props => {
           <div className="bg-white rounded-full p-1 px-3 mr-2">
             <div className="flex items-center">
               <span className="mr-2 color-gray-darkest">{f.text || f.value}</span>
-              <Icon className="cursor-pointer" size="18" name="close" onClick={() => props.removeFilter(f)} />
+              <Icon className="cursor-pointer" size="12" name="close" onClick={() => props.removeFilter(f)} />
             </div>
           </div>
         ))}