diff --git a/src/components/InternalResourceForm.tsx b/src/components/InternalResourceForm.tsx
index 2de907079..3f83205a7 100644
--- a/src/components/InternalResourceForm.tsx
+++ b/src/components/InternalResourceForm.tsx
@@ -1063,7 +1063,7 @@ export function InternalResourceForm({
                                                             ]
                                                         )
                                                     }
-                                                    enableAutocomplete={true}
+                                                    enableAutocomplete
                                                     autocompleteOptions={
                                                         allRoles
                                                     }
diff --git a/src/components/machines-selector.tsx b/src/components/machines-selector.tsx
index 9c31a0bd3..99515135e 100644
--- a/src/components/machines-selector.tsx
+++ b/src/components/machines-selector.tsx
@@ -3,18 +3,9 @@ import type { ListClientsResponse } from "@server/routers/client";
 import { useQuery } from "@tanstack/react-query";
 import { useMemo, useState } from "react";
 import { useDebounce } from "use-debounce";
-import {
-    Command,
-    CommandEmpty,
-    CommandGroup,
-    CommandInput,
-    CommandItem,
-    CommandList
-} from "./ui/command";
-import { cn } from "@app/lib/cn";
 
-import { CheckIcon } from "lucide-react";
 import { useTranslations } from "next-intl";
+import { MultiSelectTags } from "./multi-select-tags";
 
 export type SelectedMachine = Pick<
     ListClientsResponse["clients"][number],
@@ -57,52 +48,71 @@ export function MachinesSelector({
         return allMachines;
     }, [machines, selectedMachines, debouncedValue]);
 
-    const selectedMachinesIds = new Set(
-        selectedMachines.map((m) => m.clientId)
-    );
+    // const selectedMachinesIds = new Set(
+    //     selectedMachines.map((m) => m.clientId)
+    // );
 
     return (
-        <Command shouldFilter={false}>
-            <CommandInput
-                placeholder={t("machineSearch")}
-                value={machineSearchQuery}
-                onValueChange={setMachineSearchQuery}
-            />
-            <CommandList>
-                <CommandEmpty>{t("machineNotFound")}</CommandEmpty>
-                <CommandGroup>
-                    {machinesShown.map((m) => (
-                        <CommandItem
-                            value={`${m.name}:${m.clientId}`}
-                            key={m.clientId}
-                            onSelect={() => {
-                                let newMachineClients = [];
-                                if (selectedMachinesIds.has(m.clientId)) {
-                                    newMachineClients = selectedMachines.filter(
-                                        (mc) => mc.clientId !== m.clientId
-                                    );
-                                } else {
-                                    newMachineClients = [
-                                        ...selectedMachines,
-                                        m
-                                    ];
-                                }
-                                onSelectMachines(newMachineClients);
-                            }}
-                        >
-                            <CheckIcon
-                                className={cn(
-                                    "mr-2 h-4 w-4",
-                                    selectedMachinesIds.has(m.clientId)
-                                        ? "opacity-100"
-                                        : "opacity-0"
-                                )}
-                            />
-                            {`${m.name}`}
-                        </CommandItem>
-                    ))}
-                </CommandGroup>
-            </CommandList>
-        </Command>
+        <MultiSelectTags
+            emptyPlaceholder={t("machineNotFound")}
+            searchPlaceholder={t("machineSearch")}
+            value={selectedMachines.map((m) => ({
+                ...m,
+                text: m.name,
+                id: m.clientId.toString()
+            }))}
+            onChange={(values) => {
+                onSelectMachines(values);
+            }}
+            options={machinesShown.map((m) => ({
+                ...m,
+                id: m.clientId.toString(),
+                text: m.name
+            }))}
+            onSearch={setMachineSearchQuery}
+            searchQuery={machineSearchQuery}
+        />
+        // <Command shouldFilter={false}>
+        //     <CommandInput
+        //         placeholder={t("machineSearch")}
+        //         value={machineSearchQuery}
+        //         onValueChange={setMachineSearchQuery}
+        //     />
+        //     <CommandList>
+        //         <CommandEmpty>{t("machineNotFound")}</CommandEmpty>
+        //         <CommandGroup>
+        //             {machinesShown.map((m) => (
+        //                 <CommandItem
+        //                     value={`${m.name}:${m.clientId}`}
+        //                     key={m.clientId}
+        //                     onSelect={() => {
+        //                         let newMachineClients = [];
+        //                         if (selectedMachinesIds.has(m.clientId)) {
+        //                             newMachineClients = selectedMachines.filter(
+        //                                 (mc) => mc.clientId !== m.clientId
+        //                             );
+        //                         } else {
+        //                             newMachineClients = [
+        //                                 ...selectedMachines,
+        //                                 m
+        //                             ];
+        //                         }
+        //                         onSelectMachines(newMachineClients);
+        //                     }}
+        //                 >
+        //                     <CheckIcon
+        //                         className={cn(
+        //                             "mr-2 h-4 w-4",
+        //                             selectedMachinesIds.has(m.clientId)
+        //                                 ? "opacity-100"
+        //                                 : "opacity-0"
+        //                         )}
+        //                     />
+        //                     {`${m.name}`}
+        //                 </CommandItem>
+        //             ))}
+        //         </CommandGroup>
+        //     </CommandList>
+        // </Command>
     );
 }
diff --git a/src/components/multi-select-tags.tsx b/src/components/multi-select-tags.tsx
new file mode 100644
index 000000000..2fb9b097d
--- /dev/null
+++ b/src/components/multi-select-tags.tsx
@@ -0,0 +1,77 @@
+import type { Ref } from "react";
+import {
+    Command,
+    CommandEmpty,
+    CommandGroup,
+    CommandInput,
+    CommandItem,
+    CommandList
+} from "./ui/command";
+import { cn } from "@app/lib/cn";
+import { CheckIcon } from "lucide-react";
+
+export type TagValue = { text: string; id: string };
+
+export type MultiSelectTagsProps<T extends TagValue> = {
+    emptyPlaceholder: string;
+    searchPlaceholder: string;
+    searchQuery?: string;
+    options: Array<T>;
+    value: Array<T>;
+    onChange: (newValue: Array<T>) => void;
+    onSearch: (query: string) => void;
+    ref?: Ref<HTMLButtonElement>;
+};
+
+export function MultiSelectTags<T extends TagValue>({
+    emptyPlaceholder,
+    searchPlaceholder,
+    searchQuery,
+    value,
+    options,
+    onSearch,
+    onChange
+}: MultiSelectTagsProps<T>) {
+    const selectedValues = new Set(value.map((v) => v.id));
+    return (
+        <Command shouldFilter={false}>
+            <CommandInput
+                placeholder={searchPlaceholder}
+                value={searchQuery}
+                onValueChange={onSearch}
+            />
+            <CommandList>
+                <CommandEmpty>{emptyPlaceholder}</CommandEmpty>
+                <CommandGroup>
+                    {options.map((option) => (
+                        <CommandItem
+                            value={option.id}
+                            key={option.id}
+                            onSelect={() => {
+                                let newValues = [];
+                                if (selectedValues.has(option.id)) {
+                                    newValues = value.filter(
+                                        (v) => v.id !== option.id
+                                    );
+                                } else {
+                                    newValues = [...value, option];
+                                }
+                                onChange(newValues);
+                            }}
+                        >
+                            <CheckIcon
+                                className={cn(
+                                    "mr-2 h-4 w-4",
+                                    selectedValues.has(option.id)
+                                        ? "opacity-100"
+                                        : "opacity-0"
+                                )}
+                            />
+                            {`${option.text}`}
+                        </CommandItem>
+                    ))}
+                </CommandGroup>
+            </CommandList>
+        </Command>
+    );
+}
diff --git a/src/components/tags/tag-input.tsx b/src/components/tags/tag-input.tsx
index 36a173911..fafd2144f 100644
--- a/src/components/tags/tag-input.tsx
+++ b/src/components/tags/tag-input.tsx
@@ -522,7 +522,7 @@ export function TagInput({ ref, ...props }: TagInputProps) {
                                     onBlur={handleInputBlur}
                                     {...inputProps}
                                     className={cn(
-                                        "border-0 h-5 bg-transparent focus-visible:ring-0 focus-visible:ring-transparent focus-visible:ring-offset-0 flex-1 w-fit shadow-none inset-shadow-none",
+                                        "border-0 px-0 h-5 bg-transparent focus-visible:ring-0 focus-visible:ring-transparent focus-visible:ring-offset-0 flex-1 w-fit shadow-none inset-shadow-none",
                                         // className,
                                         styleClasses?.input
                                     )}
@@ -692,7 +692,7 @@ export function TagInput({ ref, ...props }: TagInputProps) {
                                         onBlur={handleInputBlur}
                                         {...inputProps}
                                         className={cn(
-                                            "border-0 h-5 bg-transparent focus-visible:ring-0 focus-visible:ring-transparent focus-visible:ring-offset-0 flex-1 w-fit shadow-none inset-shadow-none",
+                                            "border-0 px-0 h-5 bg-transparent focus-visible:ring-0 focus-visible:ring-transparent focus-visible:ring-offset-0 flex-1 w-fit shadow-none inset-shadow-none",
                                             // className,
                                             styleClasses?.input
                                         )}
@@ -770,7 +770,7 @@ export function TagInput({ ref, ...props }: TagInputProps) {
                                     onBlur={handleInputBlur}
                                     {...inputProps}
                                     className={cn(
-                                        "border-0 h-5 bg-transparent focus-visible:ring-0 focus-visible:ring-transparent focus-visible:ring-offset-0 flex-1 w-fit shadow-none inset-shadow-none",
+                                        "border-0 px-0 h-5 bg-transparent focus-visible:ring-0 focus-visible:ring-transparent focus-visible:ring-offset-0 flex-1 w-fit shadow-none inset-shadow-none",
                                         // className,
                                         styleClasses?.input
                                     )}