diff --git a/src/app/[orgId]/settings/access/users/[userId]/access-controls/page.tsx b/src/app/[orgId]/settings/access/users/[userId]/access-controls/page.tsx
index 9ab9e93fa..717d7f211 100644
--- a/src/app/[orgId]/settings/access/users/[userId]/access-controls/page.tsx
+++ b/src/app/[orgId]/settings/access/users/[userId]/access-controls/page.tsx
@@ -1,44 +1,40 @@
 "use client";
 
+import IdpTypeBadge from "@app/components/IdpTypeBadge";
+import OrgRolesTagField from "@app/components/OrgRolesTagField";
+import {
+    SettingsContainer,
+    SettingsSection,
+    SettingsSectionBody,
+    SettingsSectionDescription,
+    SettingsSectionFooter,
+    SettingsSectionForm,
+    SettingsSectionHeader,
+    SettingsSectionTitle
+} from "@app/components/Settings";
+import { Button } from "@app/components/ui/button";
+import { Checkbox } from "@app/components/ui/checkbox";
 import {
     Form,
     FormControl,
     FormField,
     FormItem,
-    FormLabel,
-    FormMessage
+    FormLabel
 } from "@app/components/ui/form";
-import { Checkbox } from "@app/components/ui/checkbox";
-import OrgRolesTagField from "@app/components/OrgRolesTagField";
+import { useEnvContext } from "@app/hooks/useEnvContext";
+import { userOrgUserContext } from "@app/hooks/useOrgUserContext";
+import { usePaidStatus } from "@app/hooks/usePaidStatus";
 import { toast } from "@app/hooks/useToast";
+import { createApiClient, formatAxiosError } from "@app/lib/api";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { AxiosResponse } from "axios";
-import { useEffect, useState } from "react";
+import { build } from "@server/build";
+import { tierMatrix } from "@server/lib/billing/tierMatrix";
+import { UserType } from "@server/types/UserTypes";
+import { useTranslations } from "next-intl";
+import { useParams } from "next/navigation";
+import { useActionState, useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
-import { ListRolesResponse } from "@server/routers/role";
-import { userOrgUserContext } from "@app/hooks/useOrgUserContext";
-import { useParams } from "next/navigation";
-import { Button } from "@app/components/ui/button";
-import {
-    SettingsContainer,
-    SettingsSection,
-    SettingsSectionHeader,
-    SettingsSectionTitle,
-    SettingsSectionDescription,
-    SettingsSectionBody,
-    SettingsSectionForm,
-    SettingsSectionFooter
-} from "@app/components/Settings";
-import { formatAxiosError } from "@app/lib/api";
-import { createApiClient } from "@app/lib/api";
-import { useEnvContext } from "@app/hooks/useEnvContext";
-import { useTranslations } from "next-intl";
-import IdpTypeBadge from "@app/components/IdpTypeBadge";
-import { UserType } from "@server/types/UserTypes";
-import { usePaidStatus } from "@app/hooks/usePaidStatus";
-import { tierMatrix } from "@server/lib/billing/tierMatrix";
-import { build } from "@server/build";
 
 const accessControlsFormSchema = z.object({
     username: z.string(),
@@ -59,12 +55,6 @@ export default function AccessControlsPage() {
 
     const { orgId } = useParams();
 
-    const [loading, setLoading] = useState(false);
-    const [roles, setRoles] = useState<{ roleId: number; name: string }[]>([]);
-    const [activeRoleTagIndex, setActiveRoleTagIndex] = useState<number | null>(
-        null
-    );
-
     const t = useTranslations();
     const { isPaidUser } = usePaidStatus();
     const isPaid = isPaidUser(tierMatrix.fullRbac);
@@ -97,44 +87,21 @@ export default function AccessControlsPage() {
                 text: r.name
             }))
         );
-    }, [user.userId, currentRoleIds.join(",")]);
-
-    useEffect(() => {
-        async function fetchRoles() {
-            const res = await api
-                .get<AxiosResponse<ListRolesResponse>>(`/org/${orgId}/roles`)
-                .catch((e) => {
-                    console.error(e);
-                    toast({
-                        variant: "destructive",
-                        title: t("accessRoleErrorFetch"),
-                        description: formatAxiosError(
-                            e,
-                            t("accessRoleErrorFetchDescription")
-                        )
-                    });
-                });
-
-            if (res?.status === 200) {
-                setRoles(res.data.data.roles);
-            }
-        }
-
-        fetchRoles();
         form.setValue("autoProvisioned", user.autoProvisioned || false);
-    }, []);
-
-    const allRoleOptions = roles.map((role) => ({
-        id: role.roleId.toString(),
-        text: role.name
-    }));
+    }, [user.userId, user.autoProvisioned, currentRoleIds.join(",")]);
 
     const paywallMessage =
         build === "saas"
             ? t("singleRolePerUserPlanNotice")
             : t("singleRolePerUserEditionNotice");
 
-    async function onSubmit(values: z.infer<typeof accessControlsFormSchema>) {
+    const [, action, isSubmitting] = useActionState(onSubmit, null);
+    async function onSubmit() {
+        const isValid = await form.trigger();
+        if (!isValid) return;
+
+        const values = form.getValues();
+
         if (values.roles.length === 0) {
             toast({
                 variant: "destructive",
@@ -144,7 +111,6 @@ export default function AccessControlsPage() {
             return;
         }
 
-        setLoading(true);
         try {
             const roleIds = values.roles.map((r) => parseInt(r.id, 10));
             const updateRoleRequest = supportsMultipleRolesPerUser
@@ -184,7 +150,6 @@ export default function AccessControlsPage() {
                 )
             });
         }
-        setLoading(false);
     }
 
     return (
@@ -203,7 +168,7 @@ export default function AccessControlsPage() {
                     <SettingsSectionForm>
                         <Form {...form}>
                             <form
-                                onSubmit={form.handleSubmit(onSubmit)}
+                                action={action}
                                 className="space-y-4"
                                 id="access-controls-form"
                             >
@@ -226,9 +191,7 @@ export default function AccessControlsPage() {
                                 <OrgRolesTagField
                                     form={form}
                                     name="roles"
-                                    label={t("roles")}
-                                    placeholder={t("accessRoleSelect2")}
-                                    allRoleOptions={allRoleOptions}
+                                    orgId={orgId as string}
                                     supportsMultipleRolesPerUser={
                                         supportsMultipleRolesPerUser
                                     }
@@ -236,9 +199,6 @@ export default function AccessControlsPage() {
                                         showMultiRolePaywallMessage
                                     }
                                     paywallMessage={paywallMessage}
-                                    loading={loading}
-                                    activeTagIndex={activeRoleTagIndex}
-                                    setActiveTagIndex={setActiveRoleTagIndex}
                                 />
 
                                 {user.idpAutoProvision && (
@@ -277,8 +237,8 @@ export default function AccessControlsPage() {
                 <SettingsSectionFooter>
                     <Button
                         type="submit"
-                        loading={loading}
-                        disabled={loading}
+                        loading={isSubmitting}
+                        disabled={isSubmitting}
                         form="access-controls-form"
                     >
                         {t("accessControlsSubmit")}
diff --git a/src/app/[orgId]/settings/access/users/create/page.tsx b/src/app/[orgId]/settings/access/users/create/page.tsx
index cec399a32..0443cd8ed 100644
--- a/src/app/[orgId]/settings/access/users/create/page.tsx
+++ b/src/app/[orgId]/settings/access/users/create/page.tsx
@@ -13,7 +13,7 @@ import { StrategyOption, StrategySelect } from "@app/components/StrategySelect";
 import HeaderTitle from "@app/components/SettingsSectionTitle";
 import { Button } from "@app/components/ui/button";
 import { useParams, useRouter } from "next/navigation";
-import { useState } from "react";
+import { useActionState, useState } from "react";
 import {
     Form,
     FormControl,
@@ -91,7 +91,7 @@ export default function Page() {
         "internal"
     );
     const [inviteLink, setInviteLink] = useState<string | null>(null);
-    const [loading, setLoading] = useState(false);
+
     const [expiresInDays, setExpiresInDays] = useState(1);
     const [roles, setRoles] = useState<{ roleId: number; name: string }[]>([]);
     const [idps, setIdps] = useState<IdpOption[]>([]);
@@ -311,10 +311,29 @@ export default function Page() {
         setUserOptions(options);
     }, [idps, t]);
 
-    async function onSubmitInternal(
-        values: z.infer<typeof internalFormSchema>
-    ) {
-        setLoading(true);
+    const [, submitInternalAction, isSubmittingInternal] = useActionState(
+        onSubmitInternal,
+        null
+    );
+    const [, submitGoogleAzureAction, isSubmittingGoogleAzure] = useActionState(
+        onSubmitGoogleAzure,
+        null
+    );
+    const [, submitGenericOidcAction, isSubmittingGenericOidc] = useActionState(
+        onSubmitGenericOidc,
+        null
+    );
+
+    const loading =
+        isSubmittingInternal ||
+        isSubmittingGoogleAzure ||
+        isSubmittingGenericOidc;
+
+    async function onSubmitInternal() {
+        const isValid = await internalForm.trigger();
+        if (!isValid) return;
+
+        const values = internalForm.getValues();
 
         const roleIds = values.roles.map((r) => parseInt(r.id, 10));
 
@@ -357,25 +376,24 @@ export default function Page() {
 
             setExpiresInDays(parseInt(values.validForHours) / 24);
         }
-
-        setLoading(false);
     }
 
-    async function onSubmitGoogleAzure(
-        values: z.infer<typeof googleAzureFormSchema>
-    ) {
+    async function onSubmitGoogleAzure() {
+        const isValid = await googleAzureForm.trigger();
+        if (!isValid) return;
+
+        const values = googleAzureForm.getValues();
+
         const selectedUserOption = userOptions.find(
             (opt) => opt.id === selectedOption
         );
         if (!selectedUserOption?.idpId) return;
 
-        setLoading(true);
-
         const roleIds = values.roles.map((r) => parseInt(r.id, 10));
 
         const res = await api
             .put(`/org/${orgId}/user`, {
-                username: values.email, // Use email as username for Google/Azure
+                username: values.email,
                 email: values.email || undefined,
                 name: values.name,
                 type: "oidc",
@@ -401,20 +419,19 @@ export default function Page() {
             });
             router.push(`/${orgId}/settings/access/users`);
         }
-
-        setLoading(false);
     }
 
-    async function onSubmitGenericOidc(
-        values: z.infer<typeof genericOidcFormSchema>
-    ) {
+    async function onSubmitGenericOidc() {
+        const isValid = await genericOidcForm.trigger();
+        if (!isValid) return;
+
+        const values = genericOidcForm.getValues();
+
         const selectedUserOption = userOptions.find(
             (opt) => opt.id === selectedOption
         );
         if (!selectedUserOption?.idpId) return;
 
-        setLoading(true);
-
         const roleIds = values.roles.map((r) => parseInt(r.id, 10));
 
         const res = await api
@@ -445,8 +462,6 @@ export default function Page() {
             });
             router.push(`/${orgId}/settings/access/users`);
         }
-
-        setLoading(false);
     }
 
     return (
@@ -513,9 +528,9 @@ export default function Page() {
                                         <SettingsSectionForm>
                                             <Form {...internalForm}>
                                                 <form
-                                                    onSubmit={internalForm.handleSubmit(
-                                                        onSubmitInternal
-                                                    )}
+                                                    action={
+                                                        submitInternalAction
+                                                    }
                                                     className="space-y-4"
                                                     id="create-user-form"
                                                 >
@@ -595,13 +610,7 @@ export default function Page() {
                                                     <OrgRolesTagField
                                                         form={internalForm}
                                                         name="roles"
-                                                        label={t("roles")}
-                                                        placeholder={t(
-                                                            "accessRoleSelect2"
-                                                        )}
-                                                        allRoleOptions={
-                                                            allRoleOptions
-                                                        }
+                                                        orgId={orgId as string}
                                                         supportsMultipleRolesPerUser={
                                                             supportsMultipleRolesPerUser
                                                         }
@@ -611,13 +620,6 @@ export default function Page() {
                                                         paywallMessage={
                                                             invitePaywallMessage
                                                         }
-                                                        loading={loading}
-                                                        activeTagIndex={
-                                                            activeInviteRoleTagIndex
-                                                        }
-                                                        setActiveTagIndex={
-                                                            setActiveInviteRoleTagIndex
-                                                        }
                                                     />
 
                                                     {env.email.emailEnabled && (
@@ -712,9 +714,9 @@ export default function Page() {
                                         })() && (
                                             <Form {...googleAzureForm}>
                                                 <form
-                                                    onSubmit={googleAzureForm.handleSubmit(
-                                                        onSubmitGoogleAzure
-                                                    )}
+                                                    action={
+                                                        submitGoogleAzureAction
+                                                    }
                                                     className="space-y-4"
                                                     id="create-user-form"
                                                 >
@@ -763,13 +765,7 @@ export default function Page() {
                                                     <OrgRolesTagField
                                                         form={googleAzureForm}
                                                         name="roles"
-                                                        label={t("roles")}
-                                                        placeholder={t(
-                                                            "accessRoleSelect2"
-                                                        )}
-                                                        allRoleOptions={
-                                                            allRoleOptions
-                                                        }
+                                                        orgId={orgId as string}
                                                         supportsMultipleRolesPerUser={
                                                             supportsMultipleRolesPerUser
                                                         }
@@ -779,13 +775,6 @@ export default function Page() {
                                                         paywallMessage={
                                                             invitePaywallMessage
                                                         }
-                                                        loading={loading}
-                                                        activeTagIndex={
-                                                            activeOidcRoleTagIndex
-                                                        }
-                                                        setActiveTagIndex={
-                                                            setActiveOidcRoleTagIndex
-                                                        }
                                                     />
                                                 </form>
                                             </Form>
@@ -808,9 +797,9 @@ export default function Page() {
                                         })() && (
                                             <Form {...genericOidcForm}>
                                                 <form
-                                                    onSubmit={genericOidcForm.handleSubmit(
-                                                        onSubmitGenericOidc
-                                                    )}
+                                                    action={
+                                                        submitGenericOidcAction
+                                                    }
                                                     className="space-y-4"
                                                     id="create-user-form"
                                                 >
@@ -888,13 +877,7 @@ export default function Page() {
                                                     <OrgRolesTagField
                                                         form={genericOidcForm}
                                                         name="roles"
-                                                        label={t("roles")}
-                                                        placeholder={t(
-                                                            "accessRoleSelect2"
-                                                        )}
-                                                        allRoleOptions={
-                                                            allRoleOptions
-                                                        }
+                                                        orgId={orgId as string}
                                                         supportsMultipleRolesPerUser={
                                                             supportsMultipleRolesPerUser
                                                         }
@@ -904,13 +887,6 @@ export default function Page() {
                                                         paywallMessage={
                                                             invitePaywallMessage
                                                         }
-                                                        loading={loading}
-                                                        activeTagIndex={
-                                                            activeOidcRoleTagIndex
-                                                        }
-                                                        setActiveTagIndex={
-                                                            setActiveOidcRoleTagIndex
-                                                        }
                                                     />
                                                 </form>
                                             </Form>
diff --git a/src/components/Credenza.tsx b/src/components/Credenza.tsx
index 8fad43836..e6f8236b7 100644
--- a/src/components/Credenza.tsx
+++ b/src/components/Credenza.tsx
@@ -84,7 +84,7 @@ const CredenzaContent = ({ className, children, ...props }: CredenzaProps) => {
     return (
         <CredenzaContent
             className={cn(
-                "flex min-h-0 max-h-[100dvh] flex-col overflow-hidden md:top-[clamp(1.5rem,12vh,200px)] md:max-h-[calc(100vh-clamp(3rem,24vh,400px))] md:translate-y-0",
+                "flex min-h-0 max-h-[100dvh] flex-col overflow-y-auto md:top-[clamp(1.5rem,12vh,200px)] md:max-h-[calc(100vh-clamp(3rem,24vh,400px))] md:translate-y-0",
                 className
             )}
             {...props}
diff --git a/src/components/InternalResourceForm.tsx b/src/components/InternalResourceForm.tsx
index af3841818..fd0455b70 100644
--- a/src/components/InternalResourceForm.tsx
+++ b/src/components/InternalResourceForm.tsx
@@ -61,6 +61,7 @@ import DomainPicker from "@app/components/DomainPicker";
 import { SwitchInput } from "@app/components/SwitchInput";
 import CertificateStatus from "@app/components/CertificateStatus";
 import { UsersSelector } from "./users-selector";
+import { RolesSelector } from "./roles-selector";
 
 // --- Helpers (shared) ---
 
@@ -1477,40 +1478,22 @@ export function InternalResourceForm({
                                         <FormItem className="flex flex-col items-start">
                                             <FormLabel>{t("roles")}</FormLabel>
                                             <FormControl>
-                                                <TagInput
-                                                    {...field}
-                                                    activeTagIndex={
-                                                        activeRolesTagIndex
+                                                <RolesSelector
+                                                    selectedRoles={
+                                                        field.value ?? []
                                                     }
-                                                    setActiveTagIndex={
-                                                        setActiveRolesTagIndex
-                                                    }
-                                                    placeholder={t(
-                                                        "accessRoleSelect2"
-                                                    )}
-                                                    size="sm"
-                                                    tags={
-                                                        form.getValues()
-                                                            .roles ?? []
-                                                    }
-                                                    setTags={(newRoles) =>
+                                                    orgId={orgId}
+                                                    onSelectRoles={(
+                                                        newUsers
+                                                    ) => {
                                                         form.setValue(
                                                             "roles",
-                                                            newRoles as [
+                                                            newUsers as [
                                                                 Tag,
                                                                 ...Tag[]
                                                             ]
-                                                        )
-                                                    }
-                                                    enableAutocomplete
-                                                    autocompleteOptions={
-                                                        allRoles
-                                                    }
-                                                    allowDuplicates={false}
-                                                    restrictTagsToAutocompleteOptions={
-                                                        true
-                                                    }
-                                                    sortTags={true}
+                                                        );
+                                                    }}
                                                 />
                                             </FormControl>
                                             <FormMessage />
@@ -1523,45 +1506,7 @@ export function InternalResourceForm({
                                     render={({ field }) => (
                                         <FormItem className="flex flex-col items-start">
                                             <FormLabel>{t("users")}</FormLabel>
-                                            {/* <FormControl>
-                                                <TagInput
-                                                    {...field}
-                                                    activeTagIndex={
-                                                        activeUsersTagIndex
-                                                    }
-                                                    setActiveTagIndex={
-                                                        setActiveUsersTagIndex
-                                                    }
-                                                    placeholder={t(
-                                                        "accessUserSelect"
-                                                    )}
-                                                    tags={
-                                                        form.getValues()
-                                                            .users ?? []
-                                                    }
-                                                    size="sm"
-                                                    setTags={(newUsers) =>
-                                                        form.setValue(
-                                                            "users",
-                                                            newUsers as [
-                                                                Tag,
-                                                                ...Tag[]
-                                                            ]
-                                                        )
-                                                    }
-                                                    enableAutocomplete={true}
-                                                    autocompleteOptions={
-                                                        allUsers
-                                                    }
-                                                    allowDuplicates={false}
-                                                    restrictTagsToAutocompleteOptions={
-                                                        true
-                                                    }
-                                                    sortTags={true}
-                                                />
-                                            </FormControl> */}
                                             <UsersSelector
-                                                {...field}
                                                 selectedUsers={
                                                     field.value ?? []
                                                 }
@@ -1590,7 +1535,6 @@ export function InternalResourceForm({
                                                     {t("machineClients")}
                                                 </FormLabel>
                                                 <MachinesSelector
-                                                    {...field}
                                                     selectedMachines={
                                                         field.value ?? []
                                                     }
@@ -1604,73 +1548,6 @@ export function InternalResourceForm({
                                                         );
                                                     }}
                                                 />
-                                                {/* <Popover>
-                                                    <PopoverTrigger asChild>
-                                                        <FormControl>
-                                                            <Button
-                                                                variant="outline"
-                                                                role="combobox"
-                                                                className={cn(
-                                                                    "justify-between w-full",
-                                                                    "text-muted-foreground pl-1.5 cursor-text"
-                                                                )}
-                                                            >
-                                                                <span
-                                                                    className={cn(
-                                                                        "inline-flex items-center gap-1",
-                                                                        "overflow-x-auto"
-                                                                    )}
-                                                                >
-                                                                    {(
-                                                                        field.value ??
-                                                                        []
-                                                                    ).map(
-                                                                        (
-                                                                            client
-                                                                        ) => (
-                                                                            <span
-                                                                                key={
-                                                                                    client.clientId
-                                                                                }
-                                                                                className={cn(
-                                                                                    "bg-muted-foreground/20 font-normal text-foreground rounded-sm",
-                                                                                    "py-1 px-1.5 text-xs"
-                                                                                )}
-                                                                            >
-                                                                                {
-                                                                                    client.name
-                                                                                }
-                                                                            </span>
-                                                                        )
-                                                                    )}
-                                                                    <span className="pl-1 font-normal">
-                                                                        {t(
-                                                                            "accessClientSelect"
-                                                                        )}
-                                                                    </span>
-                                                                </span>
-                                                                <ChevronDownIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-                                                            </Button>
-                                                        </FormControl>
-                                                    </PopoverTrigger>
-                                                    <PopoverContent className="p-0">
-                                                        <MachinesSelector
-                                                            selectedMachines={
-                                                                field.value ??
-                                                                []
-                                                            }
-                                                            orgId={orgId}
-                                                            onSelectMachines={(
-                                                                machines
-                                                            ) => {
-                                                                form.setValue(
-                                                                    "clients",
-                                                                    machines
-                                                                );
-                                                            }}
-                                                        />
-                                                    </PopoverContent>
-                                                </Popover> */}
                                                 <FormMessage />
                                             </FormItem>
                                         )}
diff --git a/src/components/OrgRolesTagField.tsx b/src/components/OrgRolesTagField.tsx
index dcd679663..bc8e5a0b5 100644
--- a/src/components/OrgRolesTagField.tsx
+++ b/src/components/OrgRolesTagField.tsx
@@ -8,51 +8,42 @@ import {
     FormLabel,
     FormMessage
 } from "@app/components/ui/form";
-import { Tag, TagInput } from "@app/components/tags/tag-input";
+
 import { toast } from "@app/hooks/useToast";
 import { useTranslations } from "next-intl";
-import type { Dispatch, SetStateAction } from "react";
-import type { FieldValues, Path, UseFormReturn } from "react-hook-form";
 
-export type RoleTag = {
-    id: string;
-    text: string;
-};
+import type { FieldValues, Path, UseFormReturn } from "react-hook-form";
+import { RolesSelector, type SelectedRole } from "./roles-selector";
 
 type OrgRolesTagFieldProps<TFieldValues extends FieldValues> = {
-    form: Pick<UseFormReturn<TFieldValues>, "control" | "getValues" | "setValue">;
+    form: Pick<
+        UseFormReturn<TFieldValues>,
+        "control" | "getValues" | "setValue"
+    >;
+    orgId: string;
     /** Field in the form that holds Tag[] (role tags). Default: `"roles"`. */
     name?: Path<TFieldValues>;
-    label: string;
-    placeholder: string;
-    allRoleOptions: Tag[];
+    label?: string;
     supportsMultipleRolesPerUser: boolean;
     showMultiRolePaywallMessage: boolean;
     paywallMessage: string;
-    loading?: boolean;
-    activeTagIndex: number | null;
-    setActiveTagIndex: Dispatch<SetStateAction<number | null>>;
+    disabled?: boolean;
 };
 
 export default function OrgRolesTagField<TFieldValues extends FieldValues>({
     form,
     name = "roles" as Path<TFieldValues>,
     label,
-    placeholder,
-    allRoleOptions,
+    orgId,
     supportsMultipleRolesPerUser,
     showMultiRolePaywallMessage,
     paywallMessage,
-    loading = false,
-    activeTagIndex,
-    setActiveTagIndex
+    disabled
 }: OrgRolesTagFieldProps<TFieldValues>) {
     const t = useTranslations();
 
-    function setRoleTags(updater: Tag[] | ((prev: Tag[]) => Tag[])) {
-        const prev = form.getValues(name) as Tag[];
-        const nextValue =
-            typeof updater === "function" ? updater(prev) : updater;
+    function setRoleTags(nextValue: SelectedRole[]) {
+        const prev = form.getValues(name) as SelectedRole[];
         const next = supportsMultipleRolesPerUser
             ? nextValue
             : nextValue.length > 1
@@ -88,22 +79,13 @@ export default function OrgRolesTagField<TFieldValues extends FieldValues>({
             name={name}
             render={({ field }) => (
                 <FormItem className="flex flex-col items-start">
-                    <FormLabel>{label}</FormLabel>
+                    <FormLabel>{label ?? t("roles")}</FormLabel>
                     <FormControl>
-                        <TagInput
-                            {...field}
-                            activeTagIndex={activeTagIndex}
-                            setActiveTagIndex={setActiveTagIndex}
-                            placeholder={placeholder}
-                            size="sm"
-                            tags={field.value}
-                            setTags={setRoleTags}
-                            enableAutocomplete={true}
-                            autocompleteOptions={allRoleOptions}
-                            allowDuplicates={false}
-                            restrictTagsToAutocompleteOptions={true}
-                            sortTags={true}
-                            disabled={loading}
+                        <RolesSelector
+                            orgId={orgId}
+                            selectedRoles={field.value ?? []}
+                            onSelectRoles={setRoleTags}
+                            disabled={disabled}
                         />
                     </FormControl>
                     {showMultiRolePaywallMessage && (
diff --git a/src/components/multi-select/multi-select-content.tsx b/src/components/multi-select/multi-select-content.tsx
index 00a1cf870..0ea54d897 100644
--- a/src/components/multi-select/multi-select-content.tsx
+++ b/src/components/multi-select/multi-select-content.tsx
@@ -21,6 +21,7 @@ export type MultiSelectTagsProps<T extends TagValue> = {
     onChange: (newValue: Array<T>) => void;
     onSearch: (query: string) => void;
     ref?: Ref<HTMLButtonElement>;
+    disabled?: boolean;
 };
 
 export function MultiSelectContent<T extends TagValue>({
@@ -40,8 +41,7 @@ export function MultiSelectContent<T extends TagValue>({
                 value={searchQuery}
                 onValueChange={onSearch}
             />
-            {/* FIXME: why isn't this list scrolling ????? */}
-            <CommandList className="scroll-py-0 max-h-20">
+            <CommandList>
                 <CommandEmpty>{emptyPlaceholder}</CommandEmpty>
                 <CommandGroup>
                     {options.map((option) => (
diff --git a/src/components/multi-select/multi-select-tag-input.tsx b/src/components/multi-select/multi-select-tag-input.tsx
index dfca035a7..6b3e0fb0f 100644
--- a/src/components/multi-select/multi-select-tag-input.tsx
+++ b/src/components/multi-select/multi-select-tag-input.tsx
@@ -1,17 +1,16 @@
+import { buttonVariants } from "@app/components/ui/button";
 import {
     Popover,
     PopoverContent,
     PopoverTrigger
 } from "@app/components/ui/popover";
-import { Button, buttonVariants } from "@app/components/ui/button";
 import { cn } from "@app/lib/cn";
 import { ChevronDownIcon, XIcon } from "lucide-react";
 import {
-    type TagValue,
     type MultiSelectTagsProps,
+    type TagValue,
     MultiSelectContent
 } from "./multi-select-content";
-import { useState } from "react";
 
 export interface MultiSelectInputProps<
     T extends TagValue
@@ -36,7 +35,8 @@ export function MultiSelectTagInput<T extends TagValue>({
                         }),
                         "justify-between w-full inline-flex",
                         "text-muted-foreground pl-1.5 cursor-text",
-                        "hover:bg-transparent hover:text-muted-foreground"
+                        "hover:bg-transparent hover:text-muted-foreground",
+                        props.disabled && "pointer-events-none opacity-50"
                     )}
                 >
                     <span
@@ -57,6 +57,7 @@ export function MultiSelectTagInput<T extends TagValue>({
                                 {option.text}
                                 <button
                                     className="p-0.5 flex-none cursor-pointer"
+                                    type="button"
                                     onClick={(e) => {
                                         e.stopPropagation();
                                         let newValues = [];
diff --git a/src/components/roles-selector.tsx b/src/components/roles-selector.tsx
index 70b786d12..4063ad1bd 100644
--- a/src/components/roles-selector.tsx
+++ b/src/components/roles-selector.tsx
@@ -1 +1,64 @@
-// TODO
+import { orgQueries } from "@app/lib/queries";
+import { useQuery } from "@tanstack/react-query";
+import { useMemo, useState } from "react";
+import { useDebounce } from "use-debounce";
+
+import { useTranslations } from "next-intl";
+import { MultiSelectTagInput } from "./multi-select/multi-select-tag-input";
+
+export type SelectedRole = { id: string; text: string };
+
+export type RolesSelectorProps = {
+    orgId: string;
+    selectedRoles?: SelectedRole[];
+    onSelectRoles: (roles: SelectedRole[]) => void;
+    disabled?: boolean 
+};
+
+export function RolesSelector({
+    orgId,
+    selectedRoles = [],
+    onSelectRoles,
+    disabled
+}: RolesSelectorProps) {
+    const t = useTranslations();
+    const [roleSearchQuery, setRoleSearchQuery] = useState("");
+
+    const [debouncedValue] = useDebounce(roleSearchQuery, 150);
+
+    const perPage = 7;
+
+    const { data: roles = [] } = useQuery(
+        orgQueries.roles({ orgId, perPage, query: debouncedValue })
+    );
+
+    // always include the selected roles in the list (if the user isn't searching)
+    const rolesShown = useMemo(() => {
+        const allRoles: Array<SelectedRole> = roles.map((r) => ({
+            id: r.roleId.toString(),
+            text: r.name
+        }));
+        if (debouncedValue.trim().length === 0) {
+            for (const role of selectedRoles) {
+                if (!allRoles.find((r) => r.id === role.id)) {
+                    allRoles.unshift(role);
+                }
+            }
+        }
+        return allRoles;
+    }, [roles, selectedRoles, debouncedValue]);
+
+    return (
+        <MultiSelectTagInput
+            buttonText={t("selectRole")}
+            searchPlaceholder={t("search")}
+            emptyPlaceholder={t("roles")}
+            searchQuery={roleSearchQuery}
+            onSearch={setRoleSearchQuery}
+            options={rolesShown}
+            value={selectedRoles}
+            onChange={onSelectRoles}
+            disabled={disabled}
+        />
+    );
+}
diff --git a/src/components/ui/command.tsx b/src/components/ui/command.tsx
index 67cffeec3..b3d6fa868 100644
--- a/src/components/ui/command.tsx
+++ b/src/components/ui/command.tsx
@@ -115,7 +115,7 @@ function CommandGroup({
         <CommandPrimitive.Group
             data-slot="command-group"
             className={cn(
-                "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
+                "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-y-auto p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
                 className
             )}
             {...props}
diff --git a/src/components/users-selector.tsx b/src/components/users-selector.tsx
index 89b0bd4c1..a1ebb2ae9 100644
--- a/src/components/users-selector.tsx
+++ b/src/components/users-selector.tsx
@@ -26,8 +26,7 @@ export function UsersSelector({
 
     const [debouncedValue] = useDebounce(userSearchQuery, 150);
 
-    // TODO: switch back to 7 items
-    const perPage = 1;
+    const perPage = 7;
 
     const { data: users = [] } = useQuery(
         orgQueries.users({ orgId, perPage, query: debouncedValue })
diff --git a/src/lib/queries.ts b/src/lib/queries.ts
index ab22b5b57..e58a5d471 100644
--- a/src/lib/queries.ts
+++ b/src/lib/queries.ts
@@ -152,13 +152,29 @@ export const orgQueries = {
                 return res.data.data.users;
             }
         }),
-    roles: ({ orgId }: { orgId: string }) =>
+    roles: ({
+        orgId,
+        query,
+        perPage = 10_000
+    }: {
+        orgId: string;
+        query?: string;
+        perPage?: number;
+    }) =>
         queryOptions({
-            queryKey: ["ORG", orgId, "ROLES"] as const,
+            queryKey: ["ORG", orgId, "ROLES", { query, perPage }] as const,
             queryFn: async ({ signal, meta }) => {
+                const sp = new URLSearchParams({
+                    pageSize: perPage.toString()
+                });
+
+                if (query?.trim()) {
+                    sp.set("query", query);
+                }
+
                 const res = await meta!.api.get<
                     AxiosResponse<ListRolesResponse>
-                >(`/org/${orgId}/roles`, { signal });
+                >(`/org/${orgId}/roles?${sp.toString()}`, { signal });
 
                 return res.data.data.roles;
             }