diff --git a/frontend/pages/hosts/ManageHostsPage/components/CustomLabelGroupHeading/CustomLabelGroupHeading.tsx b/frontend/pages/hosts/ManageHostsPage/components/CustomLabelGroupHeading/CustomLabelGroupHeading.tsx
index 5ddf98e242..f6e564b216 100644
--- a/frontend/pages/hosts/ManageHostsPage/components/CustomLabelGroupHeading/CustomLabelGroupHeading.tsx
+++ b/frontend/pages/hosts/ManageHostsPage/components/CustomLabelGroupHeading/CustomLabelGroupHeading.tsx
@@ -61,7 +61,6 @@ const CustomLabelGroupHeading = (
         </div>
       </div>
       <div className={`${baseClass}__field`}>
-        <Icon name="search" />
         <input
           className={`${baseClass}__input`}
           ref={inputRef}
@@ -77,6 +76,7 @@ const CustomLabelGroupHeading = (
           onClick={handleInputClick}
           onBlur={onBlurLabelSearchInput}
         />
+        <Icon name="search" />
       </div>
     </components.GroupHeading>
   );
diff --git a/frontend/pages/hosts/ManageHostsPage/components/CustomLabelGroupHeading/_styles.scss b/frontend/pages/hosts/ManageHostsPage/components/CustomLabelGroupHeading/_styles.scss
index e4d6a12bf0..38a1599708 100644
--- a/frontend/pages/hosts/ManageHostsPage/components/CustomLabelGroupHeading/_styles.scss
+++ b/frontend/pages/hosts/ManageHostsPage/components/CustomLabelGroupHeading/_styles.scss
@@ -48,9 +48,18 @@
       color: $ui-fleet-black-50;
     }
 
-    &:focus {
+    &:focus,
+    &:hover {
       outline: none;
       border-color: $core-vibrant-blue;
+
+      + .icon {
+        svg {
+          path {
+            fill: $core-vibrant-blue;
+          }
+        }
+      }
     }
 
     &--disabled {