diff --git a/src/components/Location/LocationSearch.tsx b/src/components/Location/LocationSearch.tsx
index 3e741c7c03f..b1473dccc27 100644
--- a/src/components/Location/LocationSearch.tsx
+++ b/src/components/Location/LocationSearch.tsx
@@ -1,7 +1,10 @@
 import { useQuery } from "@tanstack/react-query";
-import { t } from "i18next";
 import { useState } from "react";
+import { useTranslation } from "react-i18next";
 
+import CareIcon from "@/CAREUI/icons/CareIcon";
+
+import { Button } from "@/components/ui/button";
 import {
   Command,
   CommandEmpty,
@@ -23,7 +26,7 @@ import locationApi from "@/types/location/locationApi";
 interface LocationSearchProps {
   facilityId: string;
   mode?: "kind" | "instance";
-  onSelect: (location: LocationList) => void;
+  onSelect: (location: LocationList | null) => void;
   disabled?: boolean;
   value?: LocationList | null;
 }
@@ -35,6 +38,7 @@ export function LocationSearch({
   disabled,
   value,
 }: LocationSearchProps) {
+  const { t } = useTranslation();
   const [open, setOpen] = useState(false);
   const [search, setSearch] = useState("");
 
@@ -50,14 +54,28 @@ export function LocationSearch({
     <Popover open={open} onOpenChange={setOpen}>
       <PopoverTrigger asChild disabled={disabled}>
         <div
-          className="w-full h-9 px-3 rounded-md border text-sm flex items-center justify-between cursor-pointer"
+          className="w-full h-10 px-3 rounded-lg border border-gray-300 text-sm shadow-sm transition-colors bg-white flex items-center justify-between cursor-pointer text-gray-950"
           role="combobox"
           aria-expanded={open}
         >
-          {stringifyNestedObject(value || { name: "" }) || "Select location..."}
+          {stringifyNestedObject(value || { name: "" }) || (
+            <span className="text-gray-500">Select location...</span>
+          )}
+          {value && (
+            <Button
+              onClick={(e) => {
+                e.stopPropagation();
+                onSelect(null);
+              }}
+              variant="ghost"
+              className="hover:bg-transparent"
+            >
+              <CareIcon icon="l-times" className="h-4 w-4" />
+            </Button>
+          )}
         </div>
       </PopoverTrigger>
-      <PopoverContent className="w-[400px] p-0">
+      <PopoverContent className="min-w-[250px] max-w-[400px] w-full p-0">
         <Command className="pt-1">
           <CommandInput
             placeholder="Search locations..."
diff --git a/src/pages/Facility/settings/devices/DevicesList.tsx b/src/pages/Facility/settings/devices/DevicesList.tsx
index 2eaa341f6b7..5e538f3d71f 100644
--- a/src/pages/Facility/settings/devices/DevicesList.tsx
+++ b/src/pages/Facility/settings/devices/DevicesList.tsx
@@ -7,14 +7,18 @@ import CareIcon from "@/CAREUI/icons/CareIcon";
 
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
 
 import PageTitle from "@/components/Common/PageTitle";
-import Pagination from "@/components/Common/Pagination";
 import { CardGridSkeleton } from "@/components/Common/SkeletonLoading";
+import { LocationSearch } from "@/components/Location/LocationSearch";
+
+import useFilters from "@/hooks/useFilters";
 
 import query from "@/Utils/request/query";
 import DeviceCard from "@/pages/Facility/settings/devices/components/DeviceCard";
 import deviceApi from "@/types/device/deviceApi";
+import { LocationList } from "@/types/location/location";
 
 interface Props {
   facilityId: string;
@@ -22,34 +26,64 @@ interface Props {
 
 export default function DevicesList({ facilityId }: Props) {
   const { t } = useTranslation();
-  const [page, setPage] = useState(1);
+  const [selectedLocation, setSelectedLocation] = useState<LocationList | null>(
+    null,
+  );
 
-  const limit = 12;
+  const { qParams, updateQuery, Pagination, resultsPerPage } = useFilters({
+    limit: 12,
+    cacheBlacklist: ["search_text", "current_location"],
+  });
 
   const { data, isLoading } = useQuery({
-    queryKey: ["devices", facilityId, page, limit],
+    queryKey: ["devices", facilityId, qParams, resultsPerPage],
     queryFn: query.debounced(deviceApi.list, {
       pathParams: { facility_id: facilityId },
       queryParams: {
-        offset: (page - 1) * limit,
-        limit,
+        search_text: qParams.search_text,
+        current_location: qParams.current_location,
+        limit: resultsPerPage,
+        offset: (qParams.page - 1) * resultsPerPage,
       },
     }),
   });
 
   return (
     <div className="space-y-6">
-      <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
+      <div className="flex flex-col sm:flex-row justify-between items-center gap-4 w-full">
         <div className="flex items-center gap-4">
           <PageTitle title={t("devices")} />
         </div>
-
-        <Button variant="primary" asChild>
-          <Link href="/devices/create">
-            <CareIcon icon="l-plus" className="h-4 w-4 mr-2" />
-            {t("add_device")}
-          </Link>
-        </Button>
+        <div className="flex flex-col sm:flex-row w-full sm:w-auto items-center gap-2 sm:gap-4">
+          <div className="w-full sm:w-72">
+            <Input
+              placeholder={t("search_by_name")}
+              value={qParams.search_text}
+              onChange={(e) => {
+                updateQuery({ search_text: e.target.value });
+              }}
+              className="w-full border border-gray-300 rounded-lg px-4 py-2 shadow-sm focus:ring-2 focus:ring-primary focus:border-primary"
+            />
+          </div>
+          <div className="flex items-center gap-2 w-full sm:w-60">
+            <LocationSearch
+              facilityId={facilityId}
+              onSelect={(location: LocationList | null) => {
+                updateQuery({
+                  current_location: location?.id || undefined,
+                });
+                setSelectedLocation(location);
+              }}
+              value={selectedLocation}
+            />
+          </div>
+          <Button variant="primary" asChild>
+            <Link href="/devices/create">
+              <CareIcon icon="l-plus" className="h-4 w-4 mr-2" />
+              {t("add_device")}
+            </Link>
+          </Button>
+        </div>
       </div>
 
       {isLoading ? (
@@ -71,16 +105,7 @@ export default function DevicesList({ facilityId }: Props) {
               </Card>
             )}
           </div>
-          {data && data.count > limit && (
-            <div className="flex justify-center">
-              <Pagination
-                data={{ totalCount: data.count }}
-                onChange={(page, _) => setPage(page)}
-                defaultPerPage={limit}
-                cPage={page}
-              />
-            </div>
-          )}
+          <Pagination totalCount={data?.count ?? 0} />
         </div>
       )}
     </div>