diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/_components/filter/Filter.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/_components/filter/Filter.tsx
deleted file mode 100644
index 2c0341c7f..000000000
--- a/apps/webservice/src/app/[workspaceSlug]/(app)/_components/filter/Filter.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-"use client";
-
-import { useCallback, useMemo } from "react";
-import { useRouter, useSearchParams } from "next/navigation";
-import LZString from "lz-string";
-
-export type Filter<K extends string, V> = {
-  key: K;
-  value: V;
-};
-
-export const useFilters = <T extends Filter<string, any>>(
-  defaultFilters?: T[],
-) => {
-  const urlParams = useSearchParams();
-  const router = useRouter();
-
-  const filters = useMemo<T[]>(() => {
-    const filtersJson = urlParams.get("filters");
-    if (filtersJson == null) return defaultFilters ?? [];
-    return filtersJson
-      ? JSON.parse(LZString.decompressFromEncodedURIComponent(filtersJson))
-      : [];
-  }, [defaultFilters, urlParams]);
-
-  const setFilters = useCallback(
-    (v: any) => {
-      console.log(v);
-      const filtersJson = LZString.compressToEncodedURIComponent(
-        JSON.stringify(v),
-      );
-      const query = new URLSearchParams(window.location.search);
-      query.set("filters", filtersJson);
-      router.replace(`?${query.toString()}`);
-    },
-    [router],
-  );
-
-  // const [filters, setFilters] = useState<T[]>(defaultFilters ?? []);
-  const addFilters = (newFilters: T[]) =>
-    setFilters([...filters, ...newFilters]);
-  const removeFilter = (idx: number) =>
-    setFilters(filters.filter((_, i) => i !== idx));
-  const clearFilters = () => setFilters([]);
-  const updateFilter = (idx: number, filter: T) =>
-    setFilters(filters.map((f, i) => (i === idx ? filter : f)));
-  return { filters, addFilters, removeFilter, clearFilters, updateFilter };
-};
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/_components/filter/FilterDropdown.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/_components/filter/FilterDropdown.tsx
deleted file mode 100644
index 619d22c40..000000000
--- a/apps/webservice/src/app/[workspaceSlug]/(app)/_components/filter/FilterDropdown.tsx
+++ /dev/null
@@ -1,126 +0,0 @@
-import type { JSXElementConstructor } from "react";
-import React, { useState } from "react";
-import { IconFilter } from "@tabler/icons-react";
-
-import { Button } from "@ctrlplane/ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@ctrlplane/ui/dropdown-menu";
-
-import type { Filter } from "./Filter";
-import { ContentDialog } from "./FilterDropdownItems";
-
-const dialogs: Array<string | JSXElementConstructor<any>> = [ContentDialog];
-
-const isDialog = (type: string | JSXElementConstructor<any>) =>
-  dialogs.includes(type) || ((type as any).name as string).includes("Dialog");
-
-interface FilterProps<T extends Filter<string, any>> {
-  property: string;
-  options?: string[];
-  children?: React.ReactNode;
-  onChange?: (filter: T) => void;
-}
-
-export const FilterDropdown = <T extends Filter<string, any>>({
-  filters,
-  addFilters,
-  children,
-  className,
-}: {
-  filters: T[];
-  addFilters: (newFilters: T[]) => void;
-  children: React.ReactNode;
-  className: string;
-}) => {
-  const [open, setOpen] = useState(false);
-  const [openContent, setOpenContent] = useState("");
-
-  return (
-    <DropdownMenu
-      open={open}
-      onOpenChange={() => {
-        setOpen(!open);
-        if (!open) setOpenContent("");
-      }}
-    >
-      <DropdownMenuTrigger asChild>
-        {filters.length === 0 ? (
-          <Button
-            variant="ghost"
-            size="sm"
-            className="flex h-7 items-center gap-1"
-          >
-            <IconFilter className="h-4 w-4" /> Filter
-          </Button>
-        ) : (
-          <Button
-            variant="ghost"
-            size="icon"
-            className="flex h-7 w-7 items-center gap-1 text-xs"
-          >
-            <IconFilter className="h-4 w-4" />
-          </Button>
-        )}
-      </DropdownMenuTrigger>
-      <DropdownMenuContent className={className} align="start">
-        {React.Children.map(children, (child) => {
-          if (!React.isValidElement<FilterProps<T>>(child)) return null;
-          if (isDialog(child.type)) return null;
-
-          const { property } = child.props;
-          if (openContent === property)
-            return React.cloneElement(child, {
-              onChange: (filter: T) => {
-                addFilters([filter]);
-                setOpenContent("");
-                setOpen(false);
-              },
-            });
-        })}
-
-        {openContent === "" &&
-          React.Children.map(children, (child) => {
-            if (!React.isValidElement<FilterProps<T>>(child)) return null;
-
-            const { property, children } = child.props;
-
-            const c = children ? (
-              <span className="flex items-center gap-2">{children}</span>
-            ) : (
-              property
-            );
-
-            if (isDialog(child.type))
-              return React.cloneElement(child, {
-                onChange: (filter: T) => {
-                  addFilters([filter]);
-                  setOpenContent("");
-                  setOpen(false);
-                },
-                children: (
-                  <DropdownMenuItem onSelect={(e) => e.preventDefault()}>
-                    {c}
-                  </DropdownMenuItem>
-                ),
-              });
-
-            return (
-              <DropdownMenuItem
-                key={property}
-                onClick={(e) => {
-                  e.preventDefault();
-                  setOpenContent(property);
-                }}
-              >
-                {c}
-              </DropdownMenuItem>
-            );
-          })}
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-};
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/_components/filter/FilterDropdownItems.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/_components/filter/FilterDropdownItems.tsx
deleted file mode 100644
index f35df7546..000000000
--- a/apps/webservice/src/app/[workspaceSlug]/(app)/_components/filter/FilterDropdownItems.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import React, { useState } from "react";
-
-import { Button } from "@ctrlplane/ui/button";
-import {
-  Command,
-  CommandEmpty,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from "@ctrlplane/ui/command";
-import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogTitle,
-  DialogTrigger,
-} from "@ctrlplane/ui/dialog";
-import { Input } from "@ctrlplane/ui/input";
-
-import type { Filter } from "./Filter";
-
-export const ComboboxFilter = <T extends Filter<string, any>>({
-  property,
-  options,
-  onChange,
-}: {
-  property: string;
-  options: string[];
-  onChange?: (filter: T) => void;
-  children?: React.ReactNode;
-}) => {
-  return (
-    <Command className="rounded-lg bg-neutral-900 p-0 shadow-md">
-      <CommandInput placeholder={`Filter ${property}`} />
-      <CommandList>
-        <CommandEmpty>No {property} found</CommandEmpty>
-        {options.map((option) => (
-          <CommandItem
-            key={option}
-            onSelect={() => onChange?.({ key: property, value: option } as T)}
-          >
-            {option}
-          </CommandItem>
-        ))}
-      </CommandList>
-    </Command>
-  );
-};
-
-export const ContentDialog = <T extends Filter<string, any>>({
-  property,
-  onChange,
-  children,
-}: {
-  property: string;
-  onChange?: (filter: T) => void;
-  children?: React.ReactNode;
-}) => {
-  const [value, setValue] = useState("");
-  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    onChange?.({ key: property, value } as T);
-  };
-  return (
-    <Dialog>
-      <DialogTrigger asChild>{children}</DialogTrigger>
-
-      <DialogContent>
-        <form onSubmit={handleSubmit} className="flex flex-col gap-4">
-          <DialogTitle>Filter {property}</DialogTitle>
-          <Input
-            placeholder={`Filter ${property}...`}
-            value={value}
-            onChange={(e) => setValue(e.target.value)}
-          />
-          <DialogFooter>
-            <Button type="submit" disabled={value === ""}>
-              Apply
-            </Button>
-          </DialogFooter>
-        </form>
-      </DialogContent>
-    </Dialog>
-  );
-};
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/SystemFilter.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/SystemFilter.tsx
deleted file mode 100644
index 526d4ca08..000000000
--- a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/SystemFilter.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-import type { Filter } from "../_components/filter/Filter";
-
-export type SystemFilter = Filter<"name" | "slug", string>;
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/SystemsList.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/SystemsList.tsx
index 49b30d73b..aa2e5c40a 100644
--- a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/SystemsList.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/SystemsList.tsx
@@ -1,110 +1,38 @@
 "use client";
 
 import type { Workspace } from "@ctrlplane/db/schema";
-import { IconTarget, IconX } from "@tabler/icons-react";
-import { capitalCase } from "change-case";
+import { useState } from "react";
 import _ from "lodash";
+import { useDebounce } from "react-use";
 
-import { Badge } from "@ctrlplane/ui/badge";
-import { Button } from "@ctrlplane/ui/button";
-import {
-  HoverCard,
-  HoverCardContent,
-  HoverCardTrigger,
-} from "@ctrlplane/ui/hover-card";
 import { Skeleton } from "@ctrlplane/ui/skeleton";
 
-import type { SystemFilter } from "./SystemFilter";
 import { api } from "~/trpc/react";
-import { useFilters } from "../_components/filter/Filter";
-import { FilterDropdown } from "../_components/filter/FilterDropdown";
-import { ContentDialog } from "../_components/filter/FilterDropdownItems";
-import { NoFilterMatch } from "../_components/filter/NoFilterMatch";
+import { SearchInput } from "../(targets)/targets/TargetPageContent";
 import { SystemsTable } from "./SystemsTable";
 
 export const SystemsList: React.FC<{
   workspace: Workspace;
   systemsCount: number;
-}> = ({ workspace, systemsCount }) => {
-  const { filters, addFilters, removeFilter, clearFilters } =
-    useFilters<SystemFilter>();
-
-  const systems = api.system.list.useQuery({
-    workspaceId: workspace.id,
-    filters,
-  });
-  return (
-    <div className="h-full">
-      <div className="flex items-center justify-between border-b border-neutral-800 p-1 px-2">
-        <div className="flex flex-wrap items-center gap-1">
-          {filters.map((f, idx) => (
-            <Badge
-              key={idx}
-              variant="outline"
-              className="text-sx h-7 gap-1.5 bg-neutral-900 pl-2 pr-1 font-normal"
-            >
-              <span>{capitalCase(f.key)}</span>
-              <span className="text-muted-foreground">
-                {f.key === "name" && "contains"}
-                {f.key === "slug" && "contains"}
-              </span>
-              <span>
-                {typeof f.value === "string" ? (
-                  f.value
-                ) : (
-                  <HoverCard>
-                    <HoverCardTrigger>
-                      {Object.entries(f.value).length} metadata
-                    </HoverCardTrigger>
-                    <HoverCardContent className="p-2" align="start">
-                      {Object.entries(f.value).map(([key, value]) => (
-                        <div key={key}>
-                          <span className="text-red-400">{key}:</span>{" "}
-                          <span className="text-green-400">
-                            {value as string}
-                          </span>
-                        </div>
-                      ))}
-                    </HoverCardContent>
-                  </HoverCard>
-                )}
-              </span>
-
-              <Button
-                variant="ghost"
-                size="icon"
-                className="h-5 w-5 text-xs text-muted-foreground"
-                onClick={() => removeFilter(idx)}
-              >
-                <IconX className="h-4 w-4" />
-              </Button>
-            </Badge>
-          ))}
+}> = ({ workspace }) => {
+  const [query, setQuery] = useState<string | undefined>(undefined);
+  const [debouncedQuery, setDebouncedQuery] = useState<string | undefined>(
+    undefined,
+  );
 
-          <FilterDropdown<SystemFilter>
-            filters={filters}
-            addFilters={addFilters}
-            className="min-w-[200px] bg-neutral-900 p-1"
-          >
-            <ContentDialog<SystemFilter> property="name">
-              <IconTarget className="h-4 w-4" /> Name
-            </ContentDialog>
-          </FilterDropdown>
-        </div>
+  useDebounce(() => setDebouncedQuery(query == "" ? undefined : query), 500, [
+    query,
+  ]);
 
-        {systems.data?.total != null && (
-          <div className="flex items-center gap-2 rounded-lg border border-neutral-800/50 px-2 py-1 text-sm text-muted-foreground">
-            Total:
-            <Badge
-              variant="outline"
-              className="rounded-full border-neutral-800 text-inherit"
-            >
-              {systems.data.total}
-            </Badge>
-          </div>
-        )}
+  const systems = api.system.list.useQuery(
+    { workspaceId: workspace.id, query: debouncedQuery },
+    { placeholderData: (prev) => prev },
+  );
+  return (
+    <div>
+      <div className="border-b border-neutral-800/50 px-2 py-1 text-sm">
+        <SearchInput value={query ?? ""} onChange={setQuery} />
       </div>
-
       {systems.isLoading && (
         <div className="space-y-2 p-4">
           {_.range(10).map((i) => (
@@ -117,16 +45,8 @@ export const SystemsList: React.FC<{
         </div>
       )}
 
-      {systems.isSuccess && systems.data.total === 0 && (
-        <NoFilterMatch
-          numItems={systemsCount}
-          itemType="system"
-          onClear={clearFilters}
-        />
-      )}
-
       {systems.data != null && systems.data.total > 0 && (
-        <div className="scrollbar-thin scrollbar-thumb-neutral-800 scrollbar-track-neutral-900 h-[calc(100vh-90px)] overflow-auto">
+        <div className="scrollbar-thin scrollbar-thumb-neutral-800 scrollbar-track-neutral-900 h-[calc(100vh-390px)] overflow-auto">
           <SystemsTable
             systems={systems.data.items}
             workspaceSlug={workspace.slug}
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/SystemsTable.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/SystemsTable.tsx
index f20406f17..ba3221c77 100644
--- a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/SystemsTable.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/SystemsTable.tsx
@@ -1,92 +1,45 @@
 "use client";
 
 import type { Environment, System } from "@ctrlplane/db/schema";
-import type { ColumnDef } from "@tanstack/react-table";
-import { Fragment } from "react";
 import { useRouter } from "next/navigation";
 import { IconDotsVertical } from "@tabler/icons-react";
-import {
-  flexRender,
-  getCoreRowModel,
-  useReactTable,
-} from "@tanstack/react-table";
 
 import { Button } from "@ctrlplane/ui/button";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@ctrlplane/ui/table";
+import { Table, TableBody, TableCell, TableRow } from "@ctrlplane/ui/table";
 
 import { SystemActionsDropdown } from "./SystemActionsDropdown";
 
-const columns: ColumnDef<System & { environments: Environment[] }>[] = [
-  {
-    id: "name",
-    header: "Name",
-    accessorKey: "name",
-    cell: (info) => info.getValue(),
-  },
-];
-
 export const SystemsTable: React.FC<{
   systems: (System & { environments: Environment[] })[];
   workspaceSlug: string;
 }> = ({ systems, workspaceSlug }) => {
   const router = useRouter();
-  const table = useReactTable({
-    data: systems,
-    columns,
-    getCoreRowModel: getCoreRowModel(),
-  });
-
   return (
-    <Table>
-      <TableHeader>
-        {table.getHeaderGroups().map((headerGroup) => (
-          <TableRow key={headerGroup.id}>
-            {headerGroup.headers.map((header) => (
-              <TableHead key={header.id}>
-                {header.isPlaceholder
-                  ? null
-                  : flexRender(
-                      header.column.columnDef.header,
-                      header.getContext(),
-                    )}
-              </TableHead>
-            ))}
-          </TableRow>
-        ))}
-      </TableHeader>
+    <Table className="table-fixed">
       <TableBody>
-        {table.getRowModel().rows.map((row) => (
+        {systems.map((system) => (
           <TableRow
-            className="flex cursor-pointer items-center justify-between border-b-neutral-800/50 hover:bg-inherit"
-            key={row.id}
+            className="cursor-pointer border-b-neutral-800/50"
+            key={system.id}
           >
-            {row.getVisibleCells().map((cell) => (
-              <Fragment key={cell.id}>
-                <TableCell
-                  onClick={() =>
-                    router.push(
-                      `/${workspaceSlug}/systems/${row.original.slug}/deployments`,
-                    )
-                  }
-                >
-                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                </TableCell>
-                <TableCell>
-                  <SystemActionsDropdown system={cell.row.original}>
-                    <Button variant="ghost" size="icon" className="h-6 w-6">
-                      <IconDotsVertical className="h-3 w-3" />
-                    </Button>
-                  </SystemActionsDropdown>
-                </TableCell>
-              </Fragment>
-            ))}
+            <TableCell
+              onClick={() =>
+                router.push(
+                  `/${workspaceSlug}/systems/${system.slug}/deployments`,
+                )
+              }
+            >
+              {system.name}
+            </TableCell>
+            <TableCell>
+              <div className="flex justify-end">
+                <SystemActionsDropdown system={system}>
+                  <Button variant="ghost" size="icon" className="h-6 w-6">
+                    <IconDotsVertical className="h-3 w-3" />
+                  </Button>
+                </SystemActionsDropdown>
+              </div>
+            </TableCell>
           </TableRow>
         ))}
       </TableBody>
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/page.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/page.tsx
index dde74eea2..46de489c8 100644
--- a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/page.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/page.tsx
@@ -36,12 +36,7 @@ export default async function SystemsPage({
         <>
           <JobHistoryChart workspace={workspace} />
           <Separator />
-          <div className="scrollbar-thin scrollbar-thumb-neutral-800 scrollbar-track-neutral-900 h-[calc(100vh-110px)] overflow-auto">
-            <SystemsList
-              workspace={workspace}
-              systemsCount={systemsAll.total}
-            />
-          </div>
+          <SystemsList workspace={workspace} systemsCount={systemsAll.total} />
         </>
       )}
     </>
diff --git a/packages/api/src/router/system.ts b/packages/api/src/router/system.ts
index 9035b68eb..e11901c62 100644
--- a/packages/api/src/router/system.ts
+++ b/packages/api/src/router/system.ts
@@ -2,7 +2,7 @@ import _ from "lodash";
 import { isPresent } from "ts-is-present";
 import { z } from "zod";
 
-import { and, asc, count, eq, like, or, takeFirst } from "@ctrlplane/db";
+import { and, asc, count, eq, like, takeFirst } from "@ctrlplane/db";
 import {
   createSystem,
   environment,
@@ -26,32 +26,17 @@ export const systemRouter = createTRPCRouter({
     .input(
       z.object({
         workspaceId: z.string().uuid(),
-        filters: z
-          .array(
-            z.object({
-              key: z.enum(["name", "slug"]),
-              value: z.string(),
-            }),
-          )
-          .optional(),
+        query: z.string().optional(),
         limit: z.number().default(500),
         offset: z.number().default(0),
       }),
     )
     .query(({ ctx, input }) => {
       const workspaceIdCheck = eq(system.workspaceId, input.workspaceId);
-      const nameFilters = (input.filters ?? [])
-        .filter((f) => f.key === "name")
-        .map((f) => like(system.name, `%${f.value}%`));
-
-      const slugFilters = (input.filters ?? [])
-        .filter((f) => f.key === "slug")
-        .map((f) => like(system.slug, `%${f.value}%`));
 
       const checks = and(
         workspaceIdCheck,
-        or(...nameFilters),
-        or(...slugFilters),
+        input.query ? like(system.name, `%${input.query}%`) : undefined,
       );
 
       const items = ctx.db