diff --git a/frontend/pages/hosts/details/HostReportsTab/HostReportsTab.tsx b/frontend/pages/hosts/details/HostReportsTab/HostReportsTab.tsx
index 8c30210129a..a2899dad829 100644
--- a/frontend/pages/hosts/details/HostReportsTab/HostReportsTab.tsx
+++ b/frontend/pages/hosts/details/HostReportsTab/HostReportsTab.tsx
@@ -1,6 +1,7 @@
-import React, { useState, useCallback, useMemo } from "react";
+import React, { useState, useCallback } from "react";
 import { useQuery } from "react-query";
 import { InjectedRouter } from "react-router";
+import { SingleValue } from "react-select-5";
 
 import PATHS from "router/paths";
 import hostReportsAPI, {
@@ -15,8 +16,8 @@ import Spinner from "components/Spinner";
 import DataError from "components/DataError";
 import SearchField from "components/forms/fields/SearchField";
 import Slider from "components/forms/fields/Slider";
-import ActionsDropdown from "components/ActionsDropdown";
-import { IDropdownOption } from "interfaces/dropdownOption";
+import DropdownWrapper from "components/forms/fields/DropdownWrapper";
+import { CustomOptionType } from "components/forms/fields/DropdownWrapper/DropdownWrapper";
 import Pagination from "components/Pagination";
 
 import HostReportCard from "./HostReportCard";
@@ -34,7 +35,7 @@ type SortOption =
 
 const DEFAULT_SORT_OPTION: SortOption = "newest_results";
 
-const SORT_OPTIONS: IDropdownOption[] = [
+const SORT_OPTIONS: CustomOptionType[] = [
   { value: "newest_results", label: "Newest results" },
   { value: "oldest_results", label: "Oldest results" },
   { value: "name_asc", label: "Name A-Z" },
@@ -142,13 +143,17 @@ const HostReportsTab = ({
   );
 
   const onSortChange = useCallback(
-    (value: string) => {
+    (newValue: SingleValue<CustomOptionType>) => {
+      if (!newValue) return;
       router.replace(
         getNextLocationPath({
           pathPrefix: location.pathname,
           queryParams: {
             ...location.query,
-            sort: value === DEFAULT_SORT_OPTION ? undefined : value,
+            sort:
+              newValue.value === DEFAULT_SORT_OPTION
+                ? undefined
+                : newValue.value,
           },
         })
       );
@@ -184,13 +189,6 @@ const HostReportsTab = ({
     [router]
   );
 
-  const sortDropdownOptions = useMemo(() => {
-    return SORT_OPTIONS.map((opt) => ({
-      ...opt,
-      label: opt.value === sortOption ? `Sort: ${opt.label}` : opt.label,
-    }));
-  }, [sortOption]);
-
   if (isLoading) {
     return <Spinner />;
   }
@@ -223,15 +221,13 @@ const HostReportsTab = ({
           )}
         </div>
         <div className={`${baseClass}__controls-right`}>
-          <ActionsDropdown
-            options={sortDropdownOptions}
-            placeholder={`Sort: ${
-              SORT_OPTIONS.find((o) => o.value === sortOption)?.label ?? ""
-            }`}
+          <DropdownWrapper
+            name="sort-reports"
+            options={SORT_OPTIONS}
+            value={sortOption}
             onChange={onSortChange}
             className={`${baseClass}__sort-dropdown`}
-            variant="button"
-            menuAlign="right"
+            variant="table-filter"
           />
           <SearchField
             placeholder="Search by name"
diff --git a/frontend/pages/hosts/details/HostReportsTab/_styles.scss b/frontend/pages/hosts/details/HostReportsTab/_styles.scss
index 82ecfe8300e..2f7fcabfe7d 100644
--- a/frontend/pages/hosts/details/HostReportsTab/_styles.scss
+++ b/frontend/pages/hosts/details/HostReportsTab/_styles.scss
@@ -20,6 +20,30 @@
     display: flex;
     align-items: center;
     gap: $pad-small;
+
+    .input-icon-field .input-with-icon {
+      min-width: 300px;
+    }
+  }
+
+  &__sort-dropdown {
+    min-width: 160px;
+  }
+
+  @media screen and (max-width: $break-md) {
+    &__controls {
+      flex-direction: column-reverse;
+      align-items: stretch;
+      gap: $pad-smedium;
+    }
+
+    &__controls-right &__sort-dropdown {
+      width: auto;
+    }
+
+    &__controls-right .search-field__tooltip-container {
+      flex: 1;
+    }
   }
 
   &__count {
@@ -33,10 +57,6 @@
     width: auto;
   }
 
-  &__sort-dropdown {
-    min-width: 160px;
-  }
-
   &__reports-list {
     display: flex;
     flex-direction: column;