diff --git a/frontend/src/components/layout/header.tsx b/frontend/src/components/layout/header.tsx
index 524cee46da..d7ee3c664f 100644
--- a/frontend/src/components/layout/header.tsx
+++ b/frontend/src/components/layout/header.tsx
@@ -166,18 +166,6 @@ function useShouldShowRefresh() {
   const connectWizardPagesMatch = matchRoute({ to: '/rp-connect/wizard' });
   const getStartedApiMatch = matchRoute({ to: '/get-started/api' });
 
-  // matches acls
-  const aclCreateMatch = matchRoute({ to: '/security/acls/create' });
-  const aclUpdateMatch = matchRoute({ to: '/security/acls/$aclName/update' });
-  const aclDetailMatch = matchRoute({ to: '/security/acls/$aclName/details' });
-  const isACLRelated = aclCreateMatch || aclUpdateMatch || aclDetailMatch;
-
-  // matches roles
-  const roleCreateMatch = matchRoute({ to: '/security/roles/create' });
-  const roleUpdateMatch = matchRoute({ to: '/security/roles/$roleName/update' });
-  const roleDetailMatch = matchRoute({ to: '/security/roles/$roleName/details' });
-  const isRoleRelated = roleCreateMatch || roleUpdateMatch || roleDetailMatch;
-
   if (connectClusterMatch && connectClusterMatch.connector === 'create-connector') {
     return false;
   }
@@ -190,12 +178,6 @@ function useShouldShowRefresh() {
   if (secretsMatch) {
     return false;
   }
-  if (isACLRelated) {
-    return false;
-  }
-  if (isRoleRelated) {
-    return false;
-  }
   if (connectWizardPagesMatch) {
     return false;
   }
diff --git a/frontend/src/components/pages/acls/acl-list.roles.test.tsx b/frontend/src/components/pages/acls/acl-list.roles.test.tsx
deleted file mode 100644
index 6606ffcd6c..0000000000
--- a/frontend/src/components/pages/acls/acl-list.roles.test.tsx
+++ /dev/null
@@ -1,411 +0,0 @@
-/**
- * Copyright 2026 Redpanda Data, Inc.
- *
- * Use of this software is governed by the Business Source License
- * included in the file https://github.com/redpanda-data/redpanda/blob/dev/licenses/bsl.md
- *
- * As of the Change Date specified in that file, in accordance with
- * the Business Source License, use of this software will be governed
- * by the Apache License, Version 2.0
- */
-
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import type { ReactNode } from 'react';
-import { beforeEach, describe, expect, test, vi } from 'vitest';
-
-const { historyPushMock, refreshRoleMembersMock, refreshRolesMock, deleteRoleMutationMock } = vi.hoisted(() => ({
-  historyPushMock: vi.fn(),
-  refreshRoleMembersMock: vi.fn().mockResolvedValue(undefined),
-  refreshRolesMock: vi.fn().mockResolvedValue(undefined),
-  deleteRoleMutationMock: vi.fn().mockResolvedValue(undefined),
-}));
-
-vi.mock('@redpanda-data/ui', () => {
-  const Div = ({
-    children,
-    flexDirection: _flexDirection,
-    ...props
-  }: {
-    children?: ReactNode;
-    flexDirection?: unknown;
-    [key: string]: unknown;
-  }) => <div {...props}>{children}</div>;
-
-  return {
-    Alert: Div,
-    AlertDescription: Div,
-    AlertIcon: () => <span />,
-    AlertTitle: Div,
-    Badge: Div,
-    Box: Div,
-    Button: ({
-      children,
-      isDisabled,
-      onClick,
-      tooltip: _tooltip,
-      ...props
-    }: {
-      children?: ReactNode;
-      isDisabled?: boolean;
-      onClick?: () => void;
-      tooltip?: unknown;
-      [key: string]: unknown;
-    }) => (
-      <button disabled={isDisabled} onClick={onClick} {...props}>
-        {children}
-      </button>
-    ),
-    CloseButton: ({
-      children,
-      onClick,
-      ...props
-    }: {
-      children?: ReactNode;
-      onClick?: () => void;
-      [key: string]: unknown;
-    }) => (
-      <button onClick={onClick} {...props}>
-        {children}
-      </button>
-    ),
-    createStandaloneToast: () => ({
-      ToastContainer: () => null,
-      toast: vi.fn(),
-    }),
-    DataTable: ({
-      columns,
-      data,
-      emptyAction,
-      emptyText,
-    }: {
-      columns: Array<{
-        cell?: (ctx: { row: { original: Record<string, unknown> } }) => ReactNode;
-        header?: ReactNode;
-        id: string;
-      }>;
-      data: Record<string, unknown>[];
-      emptyAction?: ReactNode;
-      emptyText?: ReactNode;
-    }) =>
-      data.length > 0 ? (
-        <table>
-          <tbody>
-            {data.map((row, rowIndex) => (
-              <tr key={String(row.name ?? rowIndex)}>
-                {columns.map((column) => (
-                  <td key={column.id}>{column.cell?.({ row: { original: row } }) ?? null}</td>
-                ))}
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      ) : (
-        <div>
-          <div>{emptyText}</div>
-          {emptyAction}
-        </div>
-      ),
-    Flex: Div,
-    Icon: () => <span />,
-    Link: ({
-      as: Component,
-      children,
-      ...props
-    }: {
-      as?: ((props: Record<string, unknown>) => ReactNode) | string;
-      children?: ReactNode;
-      [key: string]: unknown;
-    }) =>
-      Component && typeof Component !== 'string' ? (
-        <Component {...props}>{children}</Component>
-      ) : (
-        <a {...props}>{children}</a>
-      ),
-    Menu: Div,
-    MenuButton: ({
-      children,
-      onClick,
-      ...props
-    }: {
-      children?: ReactNode;
-      onClick?: () => void;
-      [key: string]: unknown;
-    }) => (
-      <button onClick={onClick} {...props}>
-        {children}
-      </button>
-    ),
-    MenuItem: ({
-      children,
-      onClick,
-      ...props
-    }: {
-      children?: ReactNode;
-      onClick?: () => void;
-      [key: string]: unknown;
-    }) => (
-      <button onClick={onClick} {...props}>
-        {children}
-      </button>
-    ),
-    MenuList: Div,
-    redpandaTheme: {},
-    redpandaToastOptions: {
-      defaultOptions: {},
-    },
-    SearchField: ({
-      placeholderText,
-      searchText,
-      setSearchText,
-      ...props
-    }: {
-      placeholderText?: string;
-      searchText?: string;
-      setSearchText?: (value: string) => void;
-      [key: string]: unknown;
-    }) => (
-      <input
-        onChange={(e) => setSearchText?.(e.target.value)}
-        placeholder={placeholderText}
-        value={searchText ?? ''}
-        {...props}
-      />
-    ),
-    Skeleton: Div,
-    Tabs: ({ index = 0, items }: { index?: number; items: Array<{ component: ReactNode }> }) => (
-      <div>{items[index]?.component ?? null}</div>
-    ),
-    Text: Div,
-    Tooltip: ({ children }: { children?: ReactNode }) => <>{children}</>,
-  };
-});
-
-vi.mock('@tanstack/react-router', async (importOriginal) => {
-  const actual = await importOriginal<typeof import('@tanstack/react-router')>();
-
-  return {
-    ...actual,
-    Link: ({
-      children,
-      params: _params,
-      search: _search,
-      to,
-      ...props
-    }: {
-      children: ReactNode;
-      params?: unknown;
-      search?: unknown;
-      to?: string;
-      [key: string]: unknown;
-    }) => (
-      <a href={to ?? ''} {...props}>
-        {children}
-      </a>
-    ),
-    useNavigate: () => vi.fn(),
-  };
-});
-
-vi.mock('config', async (importOriginal) => {
-  const actual = await importOriginal<typeof import('config')>();
-
-  return {
-    ...actual,
-    isServerless: () => false,
-  };
-});
-
-vi.mock('./delete-role-confirm-modal', () => ({
-  DeleteRoleConfirmModal: ({
-    buttonEl,
-    onConfirm,
-    roleName,
-  }: {
-    buttonEl: ReactNode;
-    onConfirm: () => Promise<void> | void;
-    roleName: string;
-  }) => (
-    <div>
-      {buttonEl}
-      <button data-testid={`mock-confirm-delete-${roleName}`} onClick={() => onConfirm()}>
-        Confirm delete
-      </button>
-    </div>
-  ),
-}));
-
-vi.mock('./delete-user-confirm-modal', () => ({
-  DeleteUserConfirmModal: ({ buttonEl }: { buttonEl: ReactNode }) => <>{buttonEl}</>,
-}));
-
-vi.mock('./models', () => ({
-  principalGroupsView: {
-    principalGroups: [],
-  },
-}));
-
-vi.mock('./user-edit-modals', () => ({
-  ChangePasswordModal: () => null,
-  ChangeRolesModal: () => null,
-}));
-
-vi.mock('./user-permission-assignments', () => ({
-  UserRoleTags: () => null,
-}));
-
-vi.mock('../../../components/misc/error-result', () => ({
-  default: () => null,
-}));
-
-vi.mock('../../../state/app-global', () => ({
-  appGlobal: {
-    historyPush: historyPushMock,
-    onRefresh: null,
-  },
-}));
-
-vi.mock('../../../state/backend-api', () => {
-  const store = {
-    ACLs: { isAuthorizerEnabled: true },
-    userData: {
-      canCreateRoles: true,
-      canListAcls: true,
-      canManageUsers: true,
-      canViewPermissionsList: true,
-    },
-    enterpriseFeaturesUsed: [] as { name: string; enabled: boolean }[],
-    serviceAccounts: null as null | { users: string[] },
-    isAdminApiConfigured: false,
-  };
-  return {
-    api: {
-      ...store,
-      refreshClusterOverview: vi.fn().mockResolvedValue(undefined),
-      refreshUserData: vi.fn().mockResolvedValue(undefined),
-    },
-    useApiStoreHook: <T,>(selector: (s: typeof store) => T) => selector(store),
-    rolesApi: {
-      deleteRole: vi.fn().mockResolvedValue(undefined),
-      refreshRoleMembers: refreshRoleMembersMock,
-      refreshRoles: refreshRolesMock,
-      roleMembers: new Map([['topic reader/qa', [{ name: 'alice', principalType: 'User' }]]]),
-      roles: ['topic reader/qa'],
-      rolesError: null,
-    },
-  };
-});
-
-vi.mock('../../../state/supported-features', async (importOriginal) => {
-  const actual = await importOriginal<typeof import('../../../state/supported-features')>();
-
-  return {
-    ...actual,
-    Features: {
-      ...actual.Features,
-      createUser: true,
-      rolesApi: true,
-    },
-  };
-});
-
-vi.mock('../../../state/ui-state', () => ({
-  uiState: {
-    pageBreadcrumbs: [],
-    pageTitle: '',
-  },
-}));
-
-vi.mock('../../license/feature-license-notification', () => ({
-  FeatureLicenseNotification: () => null,
-}));
-
-vi.mock('../../misc/null-fallback-boundary', () => ({
-  NullFallbackBoundary: ({ children }: { children?: ReactNode }) => <>{children}</>,
-}));
-
-vi.mock('../../misc/page-content', () => ({
-  default: ({ children }: { children?: ReactNode }) => <div>{children}</div>,
-}));
-
-vi.mock('../../misc/section', () => ({
-  default: ({ children }: { children?: ReactNode }) => <section>{children}</section>,
-}));
-
-vi.mock('react-query/api/cluster-status', () => ({
-  useGetRedpandaInfoQuery: () => ({
-    data: {},
-    isSuccess: true,
-  }),
-}));
-
-vi.mock('react-query/api/user', () => ({
-  useInvalidateUsersCache: () => vi.fn(),
-  useLegacyListUsersQuery: () => ({
-    data: {
-      users: [],
-    },
-    isLoading: false,
-  }),
-}));
-
-vi.mock('react-query/api/acl', () => ({
-  useDeleteAclMutation: () => ({
-    mutateAsync: vi.fn(),
-  }),
-  useListACLAsPrincipalGroups: () => ({
-    data: [],
-    error: null,
-    isError: false,
-    isLoading: false,
-  }),
-}));
-
-vi.mock('react-query/api/security', () => ({
-  useDeleteRoleMutation: () => ({
-    mutateAsync: deleteRoleMutationMock,
-  }),
-  useListRolesQuery: () => ({
-    data: {
-      roles: [{ name: 'topic reader/qa' }],
-    },
-    error: null,
-    isError: false,
-  }),
-}));
-
-import AclList from './acl-list';
-
-describe('AclList role navigation', () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  test('navigates role edit actions to the encoded update route', async () => {
-    const user = userEvent.setup();
-
-    render(<AclList tab="roles" />);
-
-    await user.click(await screen.findByLabelText('Edit role topic reader/qa'));
-
-    expect(historyPushMock).toHaveBeenCalledWith('/security/roles/topic%20reader%2Fqa/update');
-  });
-
-  test('renders role list from useListRolesQuery', async () => {
-    render(<AclList tab="roles" />);
-
-    await expect(screen.findByTestId('role-list-item-topic reader/qa')).resolves.toBeInTheDocument();
-  });
-
-  test('delete role calls deleteRoleMutation with correct arguments', async () => {
-    const user = userEvent.setup();
-
-    render(<AclList tab="roles" />);
-
-    await user.click(await screen.findByTestId('mock-confirm-delete-topic reader/qa'));
-
-    expect(deleteRoleMutationMock).toHaveBeenCalledWith(
-      expect.objectContaining({ roleName: 'topic reader/qa', deleteAcls: true })
-    );
-  });
-});
diff --git a/frontend/src/components/pages/acls/acl-list.tsx b/frontend/src/components/pages/acls/acl-list.tsx
deleted file mode 100644
index f432df0da8..0000000000
--- a/frontend/src/components/pages/acls/acl-list.tsx
+++ /dev/null
@@ -1,1089 +0,0 @@
-/**
- * Copyright 2022 Redpanda Data, Inc.
- *
- * Use of this software is governed by the Business Source License
- * included in the file https://github.com/redpanda-data/redpanda/blob/dev/licenses/bsl.md
- *
- * As of the Change Date specified in that file, in accordance with
- * the Business Source License, use of this software will be governed
- * by the Apache License, Version 2.0
- */
-
-import { create } from '@bufbuild/protobuf';
-import { DataTable, SearchField, Tabs } from '@redpanda-data/ui';
-import type { TabsItemProps } from '@redpanda-data/ui/dist/components/Tabs/Tabs';
-import { Link, useNavigate } from '@tanstack/react-router';
-import { EditIcon, MoreHorizontalIcon, TrashIcon } from 'components/icons';
-import { isServerless } from 'config';
-import { InfoIcon, X } from 'lucide-react';
-import { parseAsString } from 'nuqs';
-import {
-  ACL_Operation,
-  ACL_PermissionType,
-  ACL_ResourcePatternType,
-  ACL_ResourceType,
-  type DeleteACLsRequest,
-  DeleteACLsRequestSchema,
-} from 'protogen/redpanda/api/dataplane/v1/acl_pb';
-import { DeleteRoleRequestSchema } from 'protogen/redpanda/api/dataplane/v1/security_pb';
-import { type FC, useEffect, useRef, useState } from 'react';
-import { toast } from 'sonner';
-
-import { DeleteRoleConfirmModal } from './delete-role-confirm-modal';
-import { DeleteUserConfirmModal } from './delete-user-confirm-modal';
-import type { AclPrincipalGroup } from './models';
-import { principalGroupsView } from './models';
-import { ChangePasswordModal, ChangeRolesModal } from './user-edit-modals';
-import { UserRoleTags } from './user-permission-assignments';
-import ErrorResult from '../../../components/misc/error-result';
-import { useQueryStateWithCallback } from '../../../hooks/use-query-state-with-callback';
-import { useDeleteAclMutation, useListACLAsPrincipalGroups } from '../../../react-query/api/acl';
-import { useGetRedpandaInfoQuery } from '../../../react-query/api/cluster-status';
-import { useDeleteRoleMutation, useListRolesQuery } from '../../../react-query/api/security';
-import { useInvalidateUsersCache, useLegacyListUsersQuery } from '../../../react-query/api/user';
-import { appGlobal } from '../../../state/app-global';
-import { api, rolesApi, useApiStoreHook } from '../../../state/backend-api';
-import { AclRequestDefault } from '../../../state/rest-interfaces';
-import { useSupportedFeaturesStore } from '../../../state/supported-features';
-import { uiState } from '../../../state/ui-state';
-import { Code as CodeEl, DefaultSkeleton } from '../../../utils/tsx-utils';
-import { FeatureLicenseNotification } from '../../license/feature-license-notification';
-import { NullFallbackBoundary } from '../../misc/null-fallback-boundary';
-import PageContent from '../../misc/page-content';
-import Section from '../../misc/section';
-import { Alert, AlertDescription, AlertTitle } from '../../redpanda-ui/components/alert';
-import { Badge } from '../../redpanda-ui/components/badge';
-import { Button } from '../../redpanda-ui/components/button';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '../../redpanda-ui/components/dropdown-menu';
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../../redpanda-ui/components/tooltip';
-
-// TODO - once AclList is migrated to FC, we could should move this code to use useToast()
-/** Filters items by name using a case-insensitive regex match (falls back to substring if the query is an invalid regex). Returns all items if the query is empty. */
-function filterByName<T>(items: T[], query: string, getName: (item: T) => string): T[] {
-  if (!query) {
-    return items;
-  }
-  try {
-    const re = new RegExp(query, 'i'); // nosemgrep: detect-non-literal-regexp -- client-side UI filter, user only affects their own session
-    return items.filter((item) => re.test(getName(item)));
-  } catch {
-    const lowerQuery = query.toLowerCase();
-    return items.filter((item) => getName(item).toLowerCase().includes(lowerQuery));
-  }
-}
-
-export type AclListTab = 'users' | 'roles' | 'acls' | 'permissions-list';
-
-const getCreateUserButtonProps = (
-  isAdminApiConfigured: boolean,
-  featureCreateUser: boolean,
-  canManageUsers: boolean | undefined
-) => {
-  const hasRBAC = canManageUsers !== undefined;
-
-  return {
-    disabled: !(isAdminApiConfigured && featureCreateUser) || (hasRBAC && canManageUsers === false),
-    tooltip: [
-      !isAdminApiConfigured && 'The Redpanda Admin API is not configured.',
-      !featureCreateUser && "Your cluster doesn't support this feature.",
-      hasRBAC && canManageUsers === false && 'You need RedpandaCapability.MANAGE_REDPANDA_USERS permission.',
-    ]
-      .filter(Boolean)
-      .join(' '),
-  };
-};
-
-// biome-ignore lint/complexity/noExcessiveCognitiveComplexity: ACL list has complex conditional rendering
-const AclList: FC<{ tab?: AclListTab }> = ({ tab }) => {
-  // Check if Redpanda Admin API is configured using React Query
-  const { data: redpandaInfo, isSuccess: isRedpandaInfoSuccess } = useGetRedpandaInfoQuery();
-  // Admin API is configured if the query succeeded and returned data (even if it's an empty object)
-  // This matches the MobX logic where api.isAdminApiConfigured checks if clusterOverview.redpanda !== null
-  const isAdminApiConfigured = isRedpandaInfoSuccess && Boolean(redpandaInfo);
-
-  const featureRolesApi = useSupportedFeaturesStore((s) => s.rolesApi);
-  const featureCreateUser = useSupportedFeaturesStore((s) => s.createUser);
-  const userData = useApiStoreHook((s) => s.userData);
-  const acls = useApiStoreHook((s) => s.ACLs);
-
-  const { data: usersData, isLoading: isUsersLoading } = useLegacyListUsersQuery(undefined, {
-    enabled: isAdminApiConfigured,
-  });
-
-  // Set up page title and breadcrumbs
-  useEffect(() => {
-    uiState.pageBreadcrumbs = [];
-    uiState.pageTitle = 'Access Control';
-    uiState.pageBreadcrumbs.push({ title: 'Access Control', linkTo: '/security' });
-
-    // Set up refresh handler
-    const refreshData = async () => {
-      await Promise.allSettled([api.refreshClusterOverview(), rolesApi.refreshRoles(), api.refreshUserData()]);
-      await rolesApi.refreshRoleMembers();
-    };
-
-    appGlobal.onRefresh = async () => {
-      await refreshData();
-    };
-
-    // Initial data load
-    refreshData().catch(() => {
-      // Fail silently for now
-    });
-  }, []);
-
-  // Note: Redirect from /security/ to /security/users is now handled at route level
-  // in src/routes/security/index.tsx using beforeLoad to prevent navigation loops
-  // in embedded mode where shell and console routers can conflict.
-
-  if (isUsersLoading && !usersData?.users?.length) {
-    return DefaultSkeleton;
-  }
-
-  const warning =
-    acls === null ? (
-      <Alert className="mb-4" variant="warning">
-        <AlertDescription>You do not have the necessary permissions to view ACLs</AlertDescription>
-      </Alert>
-    ) : null;
-
-  const noAclAuthorizer =
-    acls?.isAuthorizerEnabled === false ? (
-      <Alert className="mb-4" variant="warning">
-        <AlertDescription>There's no authorizer configured in your Kafka cluster</AlertDescription>
-      </Alert>
-    ) : null;
-
-  const tabs = [
-    {
-      key: 'users' as AclListTab,
-      name: 'Users',
-      component: <UsersTab data-testid="users-tab" isAdminApiConfigured={isAdminApiConfigured} />,
-      isDisabled:
-        (!isAdminApiConfigured && 'The Redpanda Admin API is not configured.') ||
-        (!featureCreateUser && "Your cluster doesn't support this feature.") ||
-        (userData?.canManageUsers !== undefined &&
-          userData?.canManageUsers === false &&
-          'You need RedpandaCapability.MANAGE_REDPANDA_USERS permission.'),
-    },
-    isServerless()
-      ? null
-      : {
-          key: 'roles' as AclListTab,
-          name: 'Roles',
-          component: <RolesTab data-testid="roles-tab" />,
-          isDisabled:
-            (!featureRolesApi && "Your cluster doesn't support this feature.") ||
-            (userData?.canManageUsers === false && 'You need RedpandaCapability.MANAGE_REDPANDA_USERS permission.'),
-        },
-    {
-      key: 'acls' as AclListTab,
-      name: 'ACLs',
-      component: <AclsTab data-testid="acls-tab" principalGroups={principalGroupsView.principalGroups} />,
-      isDisabled: userData?.canListAcls ? false : 'You do not have the necessary permissions to view ACLs.',
-    },
-    {
-      key: 'permissions-list' as AclListTab,
-      name: 'Permissions List',
-      component: <PermissionsListTab data-testid="permissions-list-tab" />,
-      isDisabled: userData?.canViewPermissionsList
-        ? false
-        : 'You need (KafkaAclOperation.DESCRIBE and RedpandaCapability.MANAGE_REDPANDA_USERS permissions.',
-    },
-  ].filter((x) => x !== null) as TabsItemProps[];
-
-  const activeTab = tabs.findIndex((x) => x.key === tab);
-
-  return (
-    <>
-      {warning}
-      {noAclAuthorizer}
-
-      <PageContent>
-        <Tabs
-          index={activeTab >= 0 ? activeTab : 0}
-          items={tabs}
-          onChange={(_, key) => {
-            appGlobal.historyPush(`/security/${key}`);
-          }}
-        />
-      </PageContent>
-    </>
-  );
-};
-
-export default AclList;
-
-type UsersEntry = { name: string; type: 'SERVICE_ACCOUNT' | 'PRINCIPAL' };
-
-const PermissionsListActions = ({
-  entry,
-  canDeleteUser,
-  onDelete,
-}: {
-  entry: UsersEntry;
-  canDeleteUser: boolean;
-  onDelete: (entry: UsersEntry, deleteUser: boolean, deleteAcls: boolean) => Promise<void>;
-}) => {
-  const [pendingAction, setPendingAction] = useState<'user-and-acls' | 'user-only' | null>(null);
-
-  return (
-    <>
-      <DeleteUserConfirmModal
-        onConfirm={async () => {
-          if (pendingAction === 'user-and-acls') await onDelete(entry, true, true);
-          if (pendingAction === 'user-only') await onDelete(entry, true, false);
-        }}
-        onOpenChange={(open) => {
-          if (!open) setPendingAction(null);
-        }}
-        open={pendingAction !== null}
-        userName={entry.name}
-      />
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button size="icon-sm" variant="destructive-ghost">
-            <TrashIcon className="h-4 w-4" />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent>
-          <DropdownMenuItem
-            disabled={!canDeleteUser}
-            onClick={(e) => {
-              e.stopPropagation();
-              setPendingAction('user-and-acls');
-            }}
-          >
-            Delete (User and ACLs)
-          </DropdownMenuItem>
-          <DropdownMenuItem
-            disabled={!canDeleteUser}
-            onClick={(e) => {
-              e.stopPropagation();
-              setPendingAction('user-only');
-            }}
-          >
-            Delete (User only)
-          </DropdownMenuItem>
-          <DropdownMenuItem
-            onClick={(e) => {
-              e.stopPropagation();
-              onDelete(entry, false, true).catch(() => {});
-            }}
-          >
-            Delete (ACLs only)
-          </DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-    </>
-  );
-};
-
-// biome-ignore lint/complexity/noExcessiveCognitiveComplexity: permissions list has complex conditional rendering
-const PermissionsListTab = () => {
-  const [searchQuery, setSearchQuery] = useState('');
-  const [aclFailed, setAclFailed] = useState<{ err: unknown } | null>(null);
-  const featureCreateUser = useSupportedFeaturesStore((s) => s.createUser);
-  const featureDeleteUser = useSupportedFeaturesStore((s) => s.deleteUser);
-  const userData = useApiStoreHook((s) => s.userData);
-  const { mutateAsync: deleteACLMutation } = useDeleteAclMutation();
-  const invalidateUsersCache = useInvalidateUsersCache();
-
-  // Check if Redpanda Admin API is configured using React Query
-  const { data: redpandaInfo, isSuccess: isRedpandaInfoSuccess } = useGetRedpandaInfoQuery();
-  const isAdminApiConfigured = isRedpandaInfoSuccess && Boolean(redpandaInfo);
-
-  const {
-    data: usersData,
-    isError: isUsersError,
-    error: usersError,
-  } = useLegacyListUsersQuery(undefined, {
-    enabled: isAdminApiConfigured,
-  });
-
-  const { data: principalGroupsData, isError: isAclsError, error: aclsError } = useListACLAsPrincipalGroups();
-
-  const deleteACLsForPrincipal = async (principalName: string) => {
-    const deleteRequest = create(DeleteACLsRequestSchema, {
-      filter: {
-        principal: `User:${principalName}`,
-        resourceType: ACL_ResourceType.ANY,
-        resourceName: undefined,
-        host: undefined,
-        operation: ACL_Operation.ANY,
-        permissionType: ACL_PermissionType.ANY,
-        resourcePatternType: ACL_ResourcePatternType.ANY,
-      },
-    });
-    await deleteACLMutation(deleteRequest);
-    toast.success(
-      <span>
-        Deleted ACLs for <CodeEl>{principalName}</CodeEl>
-      </span>
-    );
-  };
-
-  const onDelete = async (entry: UsersEntry, deleteUser: boolean, deleteAcls: boolean) => {
-    if (deleteAcls) {
-      try {
-        await deleteACLsForPrincipal(entry.name);
-      } catch (err: unknown) {
-        setAclFailed({ err });
-      }
-    }
-    if (deleteUser) {
-      try {
-        await api.deleteServiceAccount(entry.name);
-        toast.success(
-          <span>
-            Deleted user <CodeEl>{entry.name}</CodeEl>
-          </span>
-        );
-      } catch (err: unknown) {
-        setAclFailed({ err });
-      }
-    }
-    await Promise.allSettled([api.refreshAcls(AclRequestDefault, true), invalidateUsersCache()]);
-  };
-
-  // Check for errors from both queries
-  if (isUsersError && usersError) {
-    return (
-      <Alert variant="destructive">
-        <AlertTitle>Failed to load users</AlertTitle>
-        <AlertDescription>{usersError.message}</AlertDescription>
-      </Alert>
-    );
-  }
-
-  if (isAclsError && aclsError) {
-    return <ErrorResult error={aclsError} />;
-  }
-
-  const users: UsersEntry[] = (usersData?.users ?? []).map((u) => ({
-    name: u.name,
-    type: 'SERVICE_ACCOUNT',
-  }));
-
-  // In addition, find all principals that are referenced by roles, or acls, that are not service accounts
-  for (const g of principalGroupsData ?? []) {
-    if (g.principalType === 'User' && !g.principalName.includes('*') && !users.any((u) => u.name === g.principalName)) {
-      // is it a user that is being referenced?
-      // is the user already listed as a service account?
-      users.push({ name: g.principalName, type: 'PRINCIPAL' });
-    }
-  }
-
-  for (const [_, roleMembers] of rolesApi.roleMembers ?? []) {
-    for (const roleMember of roleMembers) {
-      if (!users.any((u) => u.name === roleMember.name)) {
-        // make sure that user isn't already in the list
-        users.push({ name: roleMember.name, type: 'PRINCIPAL' });
-      }
-    }
-  }
-
-  const usersFiltered = filterByName(users, searchQuery, (u) => u.name);
-
-  return (
-    <div className="flex flex-col gap-4">
-      <div>
-        This page provides a detailed overview of all effective permissions for each principal, including those derived
-        from assigned roles. While the ACLs tab shows permissions directly granted to principals, this tab also
-        incorporates roles that may assign additional permissions to a principal. This gives you a complete picture of
-        what each principal can do within your cluster.
-      </div>
-
-      <SearchField
-        placeholderText="Filter by name"
-        searchText={searchQuery}
-        setSearchText={setSearchQuery}
-        width="300px"
-      />
-
-      <Section>
-        <AlertDeleteFailed aclFailed={aclFailed} onClose={() => setAclFailed(null)} />
-        <div className="my-4">
-          <DataTable<UsersEntry>
-            columns={[
-              {
-                id: 'name',
-                size: Number.POSITIVE_INFINITY,
-                header: 'Principal',
-                cell: (ctx) => {
-                  const entry = ctx.row.original;
-                  return (
-                    <Link
-                      className="text-inherit no-underline hover:no-underline"
-                      params={{ userName: entry.name }}
-                      to="/security/users/$userName/details"
-                    >
-                      {entry.name}
-                    </Link>
-                  );
-                },
-              },
-              {
-                id: 'assignedRoles',
-                header: 'Permissions',
-                cell: (ctx) => {
-                  const entry = ctx.row.original;
-                  return <UserRoleTags showMaxItems={2} userName={entry.name} />;
-                },
-              },
-              {
-                size: 60,
-                id: 'menu',
-                header: '',
-                cell: ({ row: { original: entry } }) => (
-                  <PermissionsListActions
-                    canDeleteUser={Boolean(featureDeleteUser)}
-                    entry={entry}
-                    onDelete={onDelete}
-                  />
-                ),
-              },
-            ]}
-            data={usersFiltered}
-            emptyAction={(() => {
-              const { disabled, tooltip } = getCreateUserButtonProps(
-                isAdminApiConfigured,
-                featureCreateUser,
-                userData?.canManageUsers
-              );
-              return (
-                <TooltipProvider>
-                  <Tooltip>
-                    <TooltipTrigger asChild>
-                      <Button
-                        disabled={disabled}
-                        onClick={() => appGlobal.historyPush('/security/users/create')}
-                        variant="outline"
-                      >
-                        Create user
-                      </Button>
-                    </TooltipTrigger>
-                    {tooltip && <TooltipContent>{tooltip}</TooltipContent>}
-                  </Tooltip>
-                </TooltipProvider>
-              );
-            })()}
-            emptyText="No principals yet"
-            pagination
-            sorting
-          />
-        </div>
-      </Section>
-    </div>
-  );
-};
-
-const UsersTab = ({ isAdminApiConfigured }: { isAdminApiConfigured: boolean }) => {
-  const featureCreateUser = useSupportedFeaturesStore((s) => s.createUser);
-  const userData = useApiStoreHook((s) => s.userData);
-  const [searchQuery, setSearchQuery] = useQueryStateWithCallback<string>(
-    {
-      onUpdate: () => {
-        // Query state is managed by the URL
-      },
-      getDefaultValue: () => '',
-    },
-    'q',
-    parseAsString.withDefault('')
-  );
-  const {
-    data: usersData,
-    isError,
-    error,
-  } = useLegacyListUsersQuery(undefined, {
-    enabled: isAdminApiConfigured,
-  });
-
-  const users: UsersEntry[] = (usersData?.users ?? []).map((u) => ({
-    name: u.name,
-    type: 'SERVICE_ACCOUNT',
-  }));
-
-  const usersFiltered = filterByName(users, searchQuery, (u) => u.name);
-
-  if (isError && error) {
-    return (
-      <Alert variant="destructive">
-        <AlertTitle>Failed to load users</AlertTitle>
-        <AlertDescription>{error.message}</AlertDescription>
-      </Alert>
-    );
-  }
-
-  const { disabled: createDisabled, tooltip: createTooltip } = getCreateUserButtonProps(
-    isAdminApiConfigured,
-    featureCreateUser,
-    userData?.canManageUsers
-  );
-
-  return (
-    <div className="flex flex-col gap-4">
-      <div>
-        These users are SASL-SCRAM users managed by your cluster. View permissions for other authentication identities
-        (for example, OIDC, mTLS) on the Permissions List page.
-      </div>
-
-      <SearchField
-        data-testid="search-field-input"
-        placeholderText="Filter by name"
-        searchText={searchQuery ?? ''}
-        setSearchText={(x) => setSearchQuery(x)}
-        width="300px"
-      />
-
-      <Section>
-        <TooltipProvider>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button
-                data-testid="create-user-button"
-                disabled={createDisabled}
-                onClick={() => appGlobal.historyPush('/security/users/create')}
-              >
-                Create user
-              </Button>
-            </TooltipTrigger>
-            {createTooltip && <TooltipContent>{createTooltip}</TooltipContent>}
-          </Tooltip>
-        </TooltipProvider>
-
-        <div className="my-4">
-          <DataTable<UsersEntry>
-            columns={[
-              {
-                id: 'name',
-                size: Number.POSITIVE_INFINITY,
-                header: 'User',
-                cell: (ctx) => {
-                  const entry = ctx.row.original;
-                  return (
-                    <Link
-                      className="text-inherit no-underline hover:no-underline"
-                      params={{ userName: entry.name }}
-                      to="/security/users/$userName/details"
-                    >
-                      {entry.name}
-                    </Link>
-                  );
-                },
-              },
-              {
-                id: 'assignedRoles',
-                header: 'Permissions',
-                cell: (ctx) => {
-                  const entry = ctx.row.original;
-                  return <UserRoleTags showMaxItems={2} userName={entry.name} />;
-                },
-              },
-              {
-                size: 60,
-                id: 'menu',
-                header: '',
-                cell: (ctx) => {
-                  const entry = ctx.row.original;
-                  return <UserActions isAdminApiConfigured={isAdminApiConfigured} user={entry} />;
-                },
-              },
-            ]}
-            data={usersFiltered}
-            emptyAction={
-              <Button
-                disabled={createDisabled}
-                onClick={() => appGlobal.historyPush('/security/users/create')}
-                variant="outline"
-              >
-                Create user
-              </Button>
-            }
-            emptyText="No users yet"
-            pagination
-            sorting
-          />
-        </div>
-      </Section>
-    </div>
-  );
-};
-
-const UserActions = ({ user, isAdminApiConfigured }: { user: UsersEntry; isAdminApiConfigured: boolean }) => {
-  const featureRolesApi = useSupportedFeaturesStore((s) => s.rolesApi);
-  const [isChangePasswordModalOpen, setIsChangePasswordModalOpen] = useState(false);
-  const [isChangeRolesModalOpen, setIsChangeRolesModalOpen] = useState(false);
-  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
-  const invalidateUsersCache = useInvalidateUsersCache();
-
-  const onConfirmDelete = async () => {
-    await api.deleteServiceAccount(user.name);
-
-    // Remove user from all its roles
-    const promises: Promise<unknown>[] = [];
-    for (const [roleName, members] of rolesApi.roleMembers) {
-      if (members.any((m) => m.name === user.name)) {
-        // is this user part of this role?
-        // then remove it
-        promises.push(rolesApi.updateRoleMembership(roleName, [], [{ name: user.name, principalType: 'User' }]));
-      }
-    }
-
-    await Promise.allSettled(promises);
-    await Promise.all([rolesApi.refreshRoleMembers(), invalidateUsersCache()]);
-  };
-
-  return (
-    <>
-      {Boolean(isAdminApiConfigured) && !isServerless() && (
-        <ChangePasswordModal
-          isOpen={isChangePasswordModalOpen}
-          setIsOpen={setIsChangePasswordModalOpen}
-          userName={user.name}
-        />
-      )}
-      {Boolean(featureRolesApi) && (
-        <ChangeRolesModal isOpen={isChangeRolesModalOpen} setIsOpen={setIsChangeRolesModalOpen} userName={user.name} />
-      )}
-      <DeleteUserConfirmModal
-        onConfirm={onConfirmDelete}
-        onOpenChange={setIsDeleteModalOpen}
-        open={isDeleteModalOpen}
-        userName={user.name}
-      />
-
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button className="deleteButton" size="icon-sm" variant="ghost">
-            <MoreHorizontalIcon className="h-4 w-4" />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent>
-          {Boolean(isAdminApiConfigured) && !isServerless() && (
-            <DropdownMenuItem
-              onClick={(e) => {
-                e.stopPropagation();
-                setIsChangePasswordModalOpen(true);
-              }}
-            >
-              Change password
-            </DropdownMenuItem>
-          )}
-          {Boolean(featureRolesApi) && (
-            <DropdownMenuItem
-              onClick={(e) => {
-                e.stopPropagation();
-                setIsChangeRolesModalOpen(true);
-              }}
-            >
-              Change roles
-            </DropdownMenuItem>
-          )}
-          <DropdownMenuItem
-            onClick={(e) => {
-              e.stopPropagation();
-              setIsDeleteModalOpen(true);
-            }}
-          >
-            Delete
-          </DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-    </>
-  );
-};
-
-const RolesTab = () => {
-  const featureRolesApi = useSupportedFeaturesStore((s) => s.rolesApi);
-  const userData = useApiStoreHook((s) => s.userData);
-  const [searchQuery, setSearchQuery] = useState('');
-  const { data: rolesData, isError: rolesIsError, error: rolesError } = useListRolesQuery();
-  const { mutateAsync: deleteRoleMutation } = useDeleteRoleMutation();
-
-  const roles = filterByName(rolesData?.roles ?? [], searchQuery, (r) => r.name);
-
-  const rolesWithMembers = roles.map((r) => {
-    const members = rolesApi.roleMembers.get(r.name) ?? [];
-    return { name: r.name, members };
-  });
-
-  if (rolesIsError) {
-    return <ErrorResult error={rolesError} />;
-  }
-
-  const createRoleDisabled = userData?.canCreateRoles === false || !featureRolesApi;
-  const createRoleTooltip = [
-    userData?.canCreateRoles === false &&
-      'You need KafkaAclOperation.KAFKA_ACL_OPERATION_ALTER and RedpandaCapability.MANAGE_RBAC permissions.',
-    !featureRolesApi && 'This feature is not enabled.',
-  ]
-    .filter(Boolean)
-    .join(' ');
-
-  return (
-    <div className="flex flex-col gap-4">
-      <div>
-        This tab displays all roles. Roles are groups of access control lists (ACLs) that can be assigned to principals.
-        A principal represents any entity that can be authenticated, such as a user, service, or system (for example, a
-        SASL-SCRAM user, OIDC identity, or mTLS client).
-      </div>
-      <NullFallbackBoundary>
-        <FeatureLicenseNotification featureName="rbac" />
-      </NullFallbackBoundary>
-      <SearchField
-        placeholderText="Filter by name"
-        searchText={searchQuery}
-        setSearchText={setSearchQuery}
-        width="300px"
-      />
-      <Section>
-        <TooltipProvider>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button
-                data-testid="create-role-button"
-                disabled={createRoleDisabled}
-                onClick={() => appGlobal.historyPush('/security/roles/create')}
-                variant="outline"
-              >
-                Create role
-              </Button>
-            </TooltipTrigger>
-            {createRoleTooltip && <TooltipContent>{createRoleTooltip}</TooltipContent>}
-          </Tooltip>
-        </TooltipProvider>
-
-        <div className="my-4">
-          <DataTable
-            columns={[
-              {
-                id: 'name',
-                size: Number.POSITIVE_INFINITY,
-                header: 'Role name',
-                cell: (ctx) => {
-                  const entry = ctx.row.original;
-                  return (
-                    <Link
-                      className="text-inherit no-underline hover:no-underline"
-                      data-testid={`role-list-item-${entry.name}`}
-                      params={{ roleName: encodeURIComponent(entry.name) }}
-                      to="/security/roles/$roleName/details"
-                    >
-                      {entry.name}
-                    </Link>
-                  );
-                },
-              },
-              {
-                id: 'assignedPrincipals',
-                header: 'Assigned principals',
-                cell: (ctx) => <>{ctx.row.original.members.length}</>,
-              },
-              {
-                size: 60,
-                id: 'menu',
-                header: '',
-                cell: (ctx) => {
-                  const entry = ctx.row.original;
-                  return (
-                    <div className="flex flex-row gap-4">
-                      <Button
-                        aria-label={`Edit role ${entry.name}`}
-                        data-testid={`edit-role-button-${entry.name}`}
-                        onClick={() => {
-                          appGlobal.historyPush(`/security/roles/${encodeURIComponent(entry.name)}/update`);
-                        }}
-                        size="icon-sm"
-                        variant="secondary-ghost"
-                      >
-                        <EditIcon className="h-4 w-4" />
-                      </Button>
-                      <DeleteRoleConfirmModal
-                        buttonEl={
-                          <Button
-                            aria-label={`Delete role ${entry.name}`}
-                            data-testid={`delete-role-button-${entry.name}`}
-                            size="icon-sm"
-                            variant="destructive-ghost"
-                          >
-                            <TrashIcon className="h-4 w-4" />
-                          </Button>
-                        }
-                        numberOfPrincipals={entry.members.length}
-                        onConfirm={async () => {
-                          await deleteRoleMutation(
-                            create(DeleteRoleRequestSchema, { roleName: entry.name, deleteAcls: true })
-                          );
-                        }}
-                        roleName={entry.name}
-                      />
-                    </div>
-                  );
-                },
-              },
-            ]}
-            data={rolesWithMembers}
-            pagination
-            sorting
-          />
-        </div>
-      </Section>
-    </div>
-  );
-};
-
-const AclsTab = (_: { principalGroups: AclPrincipalGroup[] }) => {
-  const featureRolesApi = useSupportedFeaturesStore((s) => s.rolesApi);
-  const featureDeleteUser = useSupportedFeaturesStore((s) => s.deleteUser);
-  const enterpriseFeaturesUsed = useApiStoreHook((s) => s.enterpriseFeaturesUsed);
-  const { data: redpandaInfo, isSuccess: isRedpandaInfoSuccess } = useGetRedpandaInfoQuery();
-  const isAdminApiConfigured = isRedpandaInfoSuccess && Boolean(redpandaInfo);
-  const { data: usersData } = useLegacyListUsersQuery(undefined, { enabled: isAdminApiConfigured });
-  const { data: principalGroups, isLoading, isError, error } = useListACLAsPrincipalGroups();
-  const { mutateAsync: deleteACLMutation } = useDeleteAclMutation();
-  const invalidateUsersCache = useInvalidateUsersCache();
-
-  const [aclFailed, setAclFailed] = useState<{ err: unknown } | null>(null);
-  const [searchQuery, setSearchQuery] = useState('');
-
-  const navigate = useNavigate();
-
-  const deleteACLsForPrincipal = async (principal: string, host: string) => {
-    const deleteRequest: DeleteACLsRequest = create(DeleteACLsRequestSchema, {
-      filter: {
-        principal,
-        resourceType: ACL_ResourceType.ANY,
-        resourceName: undefined,
-        host,
-        operation: ACL_Operation.ANY,
-        permissionType: ACL_PermissionType.ANY,
-        resourcePatternType: ACL_ResourcePatternType.ANY,
-      },
-    });
-    await deleteACLMutation(deleteRequest);
-    toast.success(
-      <span>
-        Deleted ACLs for <CodeEl>{principal}</CodeEl>
-      </span>
-    );
-  };
-
-  const gbacEnabled = enterpriseFeaturesUsed.some((f) => f.name === 'gbac' && f.enabled);
-
-  const aclPrincipalGroups =
-    principalGroups?.filter((g) => g.principalType === 'User' || (gbacEnabled && g.principalType === 'Group')) || [];
-  const groups = filterByName(aclPrincipalGroups, searchQuery, (g) => g.principalName);
-
-  if (isError && error) {
-    return <ErrorResult error={error} />;
-  }
-
-  if (isLoading || !principalGroups) {
-    return DefaultSkeleton;
-  }
-
-  return (
-    <div className="flex flex-col gap-4">
-      <div>
-        This tab displays all access control lists (ACLs), grouped by principal and host. A principal represents any
-        entity that can be authenticated, such as a user, service, or system (for example, a SASL-SCRAM user, OIDC
-        identity, or mTLS client). The ACLs tab shows only the permissions directly granted to each principal. For a
-        complete view of all permissions, including permissions granted through roles, see the Permissions List tab.
-      </div>
-      {Boolean(featureRolesApi) && (
-        <Alert icon={<InfoIcon />} variant="warning">
-          <AlertDescription>
-            Roles are a more flexible and efficient way to manage user permissions, especially with complex
-            organizational hierarchies or large numbers of users.
-          </AlertDescription>
-        </Alert>
-      )}
-      <SearchField
-        placeholderText="Filter by name"
-        searchText={searchQuery}
-        setSearchText={setSearchQuery}
-        width="300px"
-      />
-      <Section>
-        <AlertDeleteFailed aclFailed={aclFailed} onClose={() => setAclFailed(null)} />
-
-        <Button
-          data-testid="create-acls"
-          onClick={() => {
-            navigate({
-              to: '/security/acls/create',
-              search: { principalType: undefined, principalName: undefined },
-            });
-          }}
-        >
-          Create ACLs
-        </Button>
-
-        <div className="py-4">
-          <DataTable<{
-            principal: string;
-            host: string;
-            principalType: string;
-            principalName: string;
-          }>
-            columns={[
-              {
-                size: Number.POSITIVE_INFINITY,
-                header: 'Principal',
-                accessorKey: 'principal',
-                cell: ({ row: { original: record } }) => (
-                  <Link
-                    className="cursor-pointer no-underline hover:text-primary"
-                    params={{ aclName: record.principalType === 'User' ? record.principalName : record.principal }}
-                    search={(prev) => ({ ...prev, host: record.host })}
-                    to="/security/acls/$aclName/details"
-                  >
-                    <span className="flex items-center gap-1">
-                      <span
-                        className="whitespace-normal break-words"
-                        data-testid={`acl-list-item-${record.principalName}-${record.host}`}
-                      >
-                        {record.principalName}
-                      </span>
-                      {record.principalType === 'Group' && <Badge variant="neutral">Group</Badge>}
-                    </span>
-                  </Link>
-                ),
-              },
-              {
-                header: 'Host',
-                accessorKey: 'host',
-                cell: ({
-                  row: {
-                    original: { host },
-                  },
-                }) => (!host || host === '*' ? <Badge variant="neutral">Any</Badge> : host),
-              },
-              {
-                size: 60,
-                id: 'menu',
-                header: '',
-                cell: ({ row: { original: record } }) => {
-                  const userExists = usersData?.users?.some((u) => u.name === record.principalName) ?? false;
-
-                  const onDelete = async (user: boolean, acls: boolean) => {
-                    if (acls) {
-                      try {
-                        await deleteACLsForPrincipal(record.principal, record.host);
-                      } catch (err: unknown) {
-                        // biome-ignore lint/suspicious/noConsole: error logging
-                        console.error('failed to delete acls', { error: err });
-                        setAclFailed({ err });
-                      }
-                    }
-
-                    if (user) {
-                      try {
-                        await api.deleteServiceAccount(record.principalName);
-                        toast.success(
-                          <span>
-                            Deleted user <CodeEl>{record.principalName}</CodeEl>
-                          </span>
-                        );
-                      } catch (err: unknown) {
-                        // biome-ignore lint/suspicious/noConsole: error logging
-                        console.error('failed to delete acls', { error: err });
-                        setAclFailed({ err });
-                      }
-                    }
-
-                    await Promise.allSettled([api.refreshAcls(AclRequestDefault, true), invalidateUsersCache()]);
-                  };
-
-                  return (
-                    <DropdownMenu>
-                      <DropdownMenuTrigger asChild>
-                        <Button className="deleteButton" size="icon-sm" variant="destructive-ghost">
-                          <TrashIcon className="h-4 w-4" />
-                        </Button>
-                      </DropdownMenuTrigger>
-                      <DropdownMenuContent>
-                        <DropdownMenuItem
-                          disabled={!(userExists && featureDeleteUser)}
-                          onClick={(e) => {
-                            onDelete(true, true).catch(() => {
-                              // Error handling managed by API layer
-                            });
-                            e.stopPropagation();
-                          }}
-                        >
-                          Delete (User and ACLs)
-                        </DropdownMenuItem>
-                        <DropdownMenuItem
-                          disabled={!(userExists && featureDeleteUser)}
-                          onClick={(e) => {
-                            onDelete(true, false).catch(() => {
-                              // Error handling managed by API layer
-                            });
-                            e.stopPropagation();
-                          }}
-                        >
-                          Delete (User only)
-                        </DropdownMenuItem>
-                        <DropdownMenuItem
-                          onClick={(e) => {
-                            onDelete(false, true).catch(() => {
-                              // Error handling managed by API layer
-                            });
-                            e.stopPropagation();
-                          }}
-                        >
-                          Delete (ACLs only)
-                        </DropdownMenuItem>
-                      </DropdownMenuContent>
-                    </DropdownMenu>
-                  );
-                },
-              },
-            ]}
-            data={groups}
-            pagination
-            sorting
-          />
-        </div>
-      </Section>
-    </div>
-  );
-};
-
-const AlertDeleteFailed: FC<{
-  aclFailed: { err: unknown } | null;
-  onClose: () => void;
-}> = ({ aclFailed, onClose }) => {
-  const ref = useRef(null);
-
-  if (!aclFailed) {
-    return null;
-  }
-
-  return (
-    <Alert className="relative mb-4" ref={ref} variant="destructive">
-      <AlertTitle>Failed to delete</AlertTitle>
-      <AlertDescription>
-        {(() => {
-          if (aclFailed.err instanceof Error) {
-            return aclFailed.err.message;
-          }
-          if (typeof aclFailed.err === 'string') {
-            return aclFailed.err;
-          }
-          return 'Unknown error';
-        })()}
-      </AlertDescription>
-      <Button className="absolute top-2 right-2" onClick={onClose} size="icon-sm" variant="ghost">
-        <X className="h-4 w-4" />
-      </Button>
-    </Alert>
-  );
-};
diff --git a/frontend/src/components/pages/acls/delete-role-confirm-modal.tsx b/frontend/src/components/pages/acls/delete-role-confirm-modal.tsx
deleted file mode 100644
index c5c70f815a..0000000000
--- a/frontend/src/components/pages/acls/delete-role-confirm-modal.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-/**
- * Copyright 2022 Redpanda Data, Inc.
- *
- * Use of this software is governed by the Business Source License
- * included in the file https://github.com/redpanda-data/redpanda/blob/dev/licenses/bsl.md
- *
- * As of the Change Date specified in that file, in accordance with
- * the Business Source License, use of this software will be governed
- * by the Apache License, Version 2.0
- */
-
-import type { FC } from 'react';
-import { useState } from 'react';
-
-import { Button } from '../../redpanda-ui/components/button';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '../../redpanda-ui/components/dialog';
-import { Input } from '../../redpanda-ui/components/input';
-
-export const DeleteRoleConfirmModal: FC<{
-  roleName: string;
-  numberOfPrincipals: number;
-  onConfirm: () => Promise<void> | void;
-  buttonEl: React.ReactElement;
-}> = ({ roleName, numberOfPrincipals, onConfirm, buttonEl }) => {
-  const [open, setOpen] = useState(false);
-  const [confirmText, setConfirmText] = useState('');
-
-  const handleOpenChange = (o: boolean) => {
-    setOpen(o);
-    if (!o) setConfirmText('');
-  };
-
-  const handleConfirm = async () => {
-    await onConfirm();
-    handleOpenChange(false);
-  };
-
-  return (
-    <Dialog onOpenChange={handleOpenChange} open={open}>
-      <DialogTrigger asChild>{buttonEl}</DialogTrigger>
-      <DialogContent variant="destructive">
-        <DialogHeader>
-          <DialogTitle>Delete role {roleName}</DialogTitle>
-        </DialogHeader>
-        <DialogDescription>
-          This role is assigned to {numberOfPrincipals} {numberOfPrincipals === 1 ? 'principal' : 'principals'}.
-          Deleting it will remove it from these principals and take those permissions away. The ACLs will all be
-          deleted. To restore the permissions, the role will need to be recreated and reassigned to these principals. To
-          confirm, type the role name in the confirmation box below.
-        </DialogDescription>
-        <Input onChange={(e) => setConfirmText(e.target.value)} placeholder={roleName} value={confirmText} />
-        <DialogFooter>
-          <Button onClick={() => handleOpenChange(false)} variant="outline">
-            Cancel
-          </Button>
-          <Button
-            data-testid="confirm-role-delete-button"
-            disabled={confirmText !== roleName}
-            onClick={handleConfirm}
-            variant="destructive"
-          >
-            Delete
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-};
diff --git a/frontend/src/components/pages/acls/delete-user-confirm-modal.tsx b/frontend/src/components/pages/acls/delete-user-confirm-modal.tsx
deleted file mode 100644
index a74ed8a5f1..0000000000
--- a/frontend/src/components/pages/acls/delete-user-confirm-modal.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-/**
- * Copyright 2022 Redpanda Data, Inc.
- *
- * Use of this software is governed by the Business Source License
- * included in the file https://github.com/redpanda-data/redpanda/blob/dev/licenses/bsl.md
- *
- * As of the Change Date specified in that file, in accordance with
- * the Business Source License, use of this software will be governed
- * by the Apache License, Version 2.0
- */
-
-import type { FC } from 'react';
-import { useState } from 'react';
-
-import { Button } from '../../redpanda-ui/components/button';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '../../redpanda-ui/components/dialog';
-import { Input } from '../../redpanda-ui/components/input';
-
-type DeleteUserConfirmModalProps = {
-  userName: string;
-  onConfirm: () => Promise<void> | void;
-} & (
-  | { buttonEl: React.ReactElement; open?: never; onOpenChange?: never }
-  | { buttonEl?: never; open: boolean; onOpenChange: (open: boolean) => void }
-);
-
-export const DeleteUserConfirmModal: FC<DeleteUserConfirmModalProps> = ({
-  userName,
-  onConfirm,
-  buttonEl,
-  open: controlledOpen,
-  onOpenChange,
-}) => {
-  const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
-  const [confirmText, setConfirmText] = useState('');
-
-  const isControlled = controlledOpen !== undefined;
-  const open = isControlled ? controlledOpen : uncontrolledOpen;
-  const setOpen = isControlled ? onOpenChange! : setUncontrolledOpen;
-
-  const handleOpenChange = (o: boolean) => {
-    setOpen(o);
-    if (!o) setConfirmText('');
-  };
-
-  const handleConfirm = async () => {
-    await onConfirm();
-    handleOpenChange(false);
-  };
-
-  return (
-    <Dialog onOpenChange={handleOpenChange} open={open}>
-      {buttonEl && <DialogTrigger asChild>{buttonEl}</DialogTrigger>}
-      <DialogContent variant="destructive">
-        <DialogHeader>
-          <DialogTitle>Delete user {userName}</DialogTitle>
-        </DialogHeader>
-        <DialogDescription>
-          This user has roles and ACLs assigned to it. Those roles and ACLs will not be deleted, but the user will need
-          to be recreated and reassigned to them to be used again. To confirm, type the user name in the box below.
-        </DialogDescription>
-        <Input
-          onChange={(e) => setConfirmText(e.target.value)}
-          placeholder={`Type "${userName}" to confirm`}
-          testId="txt-confirmation-delete"
-          value={confirmText}
-        />
-        <DialogFooter>
-          <Button onClick={() => handleOpenChange(false)} variant="outline">
-            Cancel
-          </Button>
-          <Button
-            disabled={confirmText !== userName}
-            onClick={handleConfirm}
-            testId="test-delete-item"
-            variant="destructive"
-          >
-            Delete
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-};
diff --git a/frontend/src/components/pages/acls/models.ts b/frontend/src/components/pages/acls/models.ts
deleted file mode 100644
index 712474ab21..0000000000
--- a/frontend/src/components/pages/acls/models.ts
+++ /dev/null
@@ -1,660 +0,0 @@
-/**
- * Copyright 2022 Redpanda Data, Inc.
- *
- * Use of this software is governed by the Business Source License
- * included in the file https://github.com/redpanda-data/redpanda/blob/dev/licenses/bsl.md
- *
- * As of the Change Date specified in that file, in accordance with
- * the Business Source License, use of this software will be governed
- * by the Apache License, Version 2.0
- */
-
-import { api } from '../../../state/backend-api';
-import type {
-  AclStrOperation,
-  AclStrPermission,
-  AclStrResourcePatternType,
-  AclStrResourceType,
-} from '../../../state/rest-interfaces';
-
-export type PrincipalType = 'User' | 'RedpandaRole' | 'Group';
-export type AclFlat = {
-  // AclResource
-  resourceType: AclStrResourceType;
-  resourceName: string;
-  resourcePatternType: AclStrResourcePatternType;
-
-  // AclRule
-  principal: string;
-  host: string;
-  operation: AclStrOperation;
-  permissionType: AclStrPermission;
-};
-
-export type AclPrincipalGroup = {
-  principalType: PrincipalType;
-  // This can only ever be a literal, or match anything (star in that case). No prefix or postfix matching
-  principalName: string | '*';
-
-  host: string;
-
-  topicAcls: TopicACLs[];
-  consumerGroupAcls: ConsumerGroupACLs[];
-  transactionalIdAcls: TransactionalIdACLs[];
-  clusterAcls: ClusterACLs;
-
-  sourceEntries: AclFlat[];
-};
-
-export type TopicACLs = {
-  /** Stable unique key for React list rendering */
-  _key: string;
-  patternType: AclStrResourcePatternType;
-  selector: string;
-  all: AclStrPermission;
-
-  permissions: {
-    Alter: AclStrPermission;
-    AlterConfigs: AclStrPermission;
-    Create: AclStrPermission;
-    Delete: AclStrPermission;
-    Describe: AclStrPermission;
-    DescribeConfigs: AclStrPermission;
-    Read: AclStrPermission;
-    Write: AclStrPermission;
-  };
-};
-
-export type ConsumerGroupACLs = {
-  /** Stable unique key for React list rendering */
-  _key: string;
-  patternType: AclStrResourcePatternType;
-  selector: string;
-  all: AclStrPermission;
-
-  permissions: {
-    Delete: AclStrPermission;
-    Describe: AclStrPermission;
-    Read: AclStrPermission;
-  };
-};
-
-export type TransactionalIdACLs = {
-  /** Stable unique key for React list rendering */
-  _key: string;
-  patternType: AclStrResourcePatternType;
-  selector: string;
-  all: AclStrPermission;
-
-  permissions: {
-    Describe: AclStrPermission;
-    Write: AclStrPermission;
-  };
-};
-
-export type ClusterACLs = {
-  all: AclStrPermission;
-
-  permissions: {
-    Alter: AclStrPermission;
-    AlterConfigs: AclStrPermission;
-    ClusterAction: AclStrPermission;
-    Create: AclStrPermission;
-    Describe: AclStrPermission;
-    DescribeConfigs: AclStrPermission;
-  };
-};
-
-export type ResourceACLs = TopicACLs | ConsumerGroupACLs | TransactionalIdACLs | ClusterACLs;
-
-export function createEmptyTopicAcl(): TopicACLs {
-  return {
-    _key: crypto.randomUUID(),
-    selector: '*',
-    patternType: 'Any',
-    all: 'Any',
-    permissions: {
-      Alter: 'Any',
-      AlterConfigs: 'Any',
-      Create: 'Any',
-      DescribeConfigs: 'Any',
-      Write: 'Any',
-      Read: 'Any',
-      Delete: 'Any',
-      Describe: 'Any',
-    },
-  };
-}
-
-export function createEmptyConsumerGroupAcl(): ConsumerGroupACLs {
-  return {
-    _key: crypto.randomUUID(),
-    selector: '*',
-    patternType: 'Any',
-    all: 'Any',
-    permissions: {
-      Read: 'Any',
-      Delete: 'Any',
-      Describe: 'Any',
-    },
-  };
-}
-
-export function createEmptyTransactionalIdAcl(): TransactionalIdACLs {
-  return {
-    _key: crypto.randomUUID(),
-    selector: '*',
-    patternType: 'Any',
-    all: 'Any',
-    permissions: {
-      Describe: 'Any',
-      Write: 'Any',
-    },
-  };
-}
-
-export function createEmptyClusterAcl(): ClusterACLs {
-  return {
-    all: 'Any',
-    permissions: {
-      Alter: 'Any',
-      AlterConfigs: 'Any',
-      ClusterAction: 'Any',
-      Create: 'Any',
-      Describe: 'Any',
-      DescribeConfigs: 'Any',
-    },
-  };
-}
-
-function modelPatternTypeToUIType(resourcePatternType: AclStrResourcePatternType, resourceName: string) {
-  if (resourcePatternType === 'Literal' && resourceName === '*') {
-    return 'Any';
-  }
-
-  return resourcePatternType;
-}
-
-function collectTopicAcls(acls: AclFlat[]): TopicACLs[] {
-  const topics = acls
-    .filter((x) => x.resourceType === 'Topic')
-    .groupInto((x) => `${x.resourcePatternType}: ${x.resourceName}`);
-
-  const topicAcls: TopicACLs[] = [];
-  for (const { items } of topics) {
-    const first = items[0];
-    const selector = first.resourceName;
-
-    const topicOperations = [
-      'Alter',
-      'AlterConfigs',
-      'Create',
-      'Delete',
-      'Describe',
-      'DescribeConfigs',
-      'Read',
-      'Write',
-    ] as const;
-
-    const topicPermissions: { [key in (typeof topicOperations)[number]]: AclStrPermission } = {
-      Alter: 'Any',
-      AlterConfigs: 'Any',
-      Create: 'Any',
-      Delete: 'Any',
-      Describe: 'Any',
-      DescribeConfigs: 'Any',
-      Read: 'Any',
-      Write: 'Any',
-    };
-
-    for (const op of topicOperations) {
-      const entryForOp = items.find((x) => x.operation === op);
-      if (entryForOp) {
-        topicPermissions[op] = entryForOp.permissionType;
-      }
-    }
-
-    let all: AclStrPermission = 'Any';
-    const allEntry = items.find((x) => x.operation === 'All');
-    if (allEntry && allEntry.permissionType === 'Allow') {
-      all = 'Allow';
-    }
-    if (allEntry && allEntry.permissionType === 'Deny') {
-      all = 'Deny';
-    }
-
-    const topicAcl: TopicACLs = {
-      _key: crypto.randomUUID(),
-      patternType: modelPatternTypeToUIType(first.resourcePatternType, selector),
-      selector,
-      permissions: topicPermissions,
-      all,
-    };
-
-    topicAcls.push(topicAcl);
-  }
-
-  return topicAcls;
-}
-
-function collectConsumerGroupAcls(acls: AclFlat[]): ConsumerGroupACLs[] {
-  const consumerGroups = acls
-    .filter((x) => x.resourceType === 'Group')
-    .groupInto((x) => `${x.resourcePatternType}: ${x.resourceName}`);
-
-  const consumerGroupAcls: ConsumerGroupACLs[] = [];
-  for (const { items } of consumerGroups) {
-    const first = items[0];
-    const selector = first.resourceName;
-
-    const groupOperations = ['Delete', 'Describe', 'Read'] as const;
-
-    const groupPermissions: { [key in (typeof groupOperations)[number]]: AclStrPermission } = {
-      Delete: 'Any',
-      Describe: 'Any',
-      Read: 'Any',
-    };
-
-    for (const op of groupOperations) {
-      const entryForOp = items.find((x) => x.operation === op);
-      if (entryForOp) {
-        groupPermissions[op] = entryForOp.permissionType;
-      }
-    }
-
-    let all: AclStrPermission = 'Any';
-    const allEntry = items.find((x) => x.operation === 'All');
-    if (allEntry && allEntry.permissionType === 'Allow') {
-      all = 'Allow';
-    }
-    if (allEntry && allEntry.permissionType === 'Deny') {
-      all = 'Deny';
-    }
-
-    const groupAcl: ConsumerGroupACLs = {
-      _key: crypto.randomUUID(),
-      patternType: modelPatternTypeToUIType(first.resourcePatternType, selector),
-      selector,
-      permissions: groupPermissions,
-      all,
-    };
-
-    consumerGroupAcls.push(groupAcl);
-  }
-
-  return consumerGroupAcls;
-}
-
-function collectTransactionalIdAcls(acls: AclFlat[]): TransactionalIdACLs[] {
-  const transactionalIds = acls
-    .filter((x) => x.resourceType === 'TransactionalID')
-    .groupInto((x) => `${x.resourcePatternType}: ${x.resourceName}`);
-
-  const transactionalIdAcls: TransactionalIdACLs[] = [];
-  for (const { items } of transactionalIds) {
-    const first = items[0];
-    const selector = first.resourceName;
-
-    const transactionalIdOperations = ['Describe', 'Write'] as const;
-
-    const transactionalIdPermissions: { [key in (typeof transactionalIdOperations)[number]]: AclStrPermission } = {
-      Describe: 'Any',
-      Write: 'Any',
-    };
-
-    for (const op of transactionalIdOperations) {
-      const entryForOp = items.find((x) => x.operation === op);
-      if (entryForOp) {
-        transactionalIdPermissions[op] = entryForOp.permissionType;
-      }
-    }
-
-    let all: AclStrPermission = 'Any';
-    const allEntry = items.find((x) => x.operation === 'All');
-    if (allEntry && allEntry.permissionType === 'Allow') {
-      all = 'Allow';
-    }
-    if (allEntry && allEntry.permissionType === 'Deny') {
-      all = 'Deny';
-    }
-
-    const groupAcl: TransactionalIdACLs = {
-      _key: crypto.randomUUID(),
-      patternType: modelPatternTypeToUIType(first.resourcePatternType, selector),
-      selector,
-      permissions: transactionalIdPermissions,
-      all,
-    };
-
-    transactionalIdAcls.push(groupAcl);
-  }
-
-  return transactionalIdAcls;
-}
-
-function collectClusterAcls(acls: AclFlat[]): ClusterACLs {
-  const flatClusterAcls = acls.filter((x) => x.resourceType === 'Cluster');
-
-  const clusterOperations = [
-    'Alter',
-    'AlterConfigs',
-    'ClusterAction',
-    'Create',
-    'Describe',
-    'DescribeConfigs',
-  ] as const;
-
-  const clusterPermissions: { [key in (typeof clusterOperations)[number]]: AclStrPermission } = {
-    Alter: 'Any',
-    AlterConfigs: 'Any',
-    ClusterAction: 'Any',
-    Create: 'Any',
-    Describe: 'Any',
-    DescribeConfigs: 'Any',
-  };
-
-  for (const op of clusterOperations) {
-    const entryForOp = flatClusterAcls.find((x) => x.operation === op);
-    if (entryForOp) {
-      clusterPermissions[op] = entryForOp.permissionType;
-    }
-  }
-
-  let all: AclStrPermission = 'Any';
-  const allEntry = flatClusterAcls.find((x) => x.operation === 'All');
-  if (allEntry && allEntry.permissionType === 'Allow') {
-    all = 'Allow';
-  }
-  if (allEntry && allEntry.permissionType === 'Deny') {
-    all = 'Deny';
-  }
-
-  const clusterAcls: ClusterACLs = {
-    permissions: clusterPermissions,
-    all,
-  };
-
-  return clusterAcls;
-}
-
-export const principalGroupsView = {
-  get flatAcls() {
-    const acls = api.ACLs;
-    if (!acls?.aclResources || acls.aclResources.length === 0) {
-      return [];
-    }
-
-    const flattened: AclFlat[] = [];
-    for (const res of acls.aclResources) {
-      for (const rule of res.acls) {
-        const flattenedEntry: AclFlat = {
-          resourceType: res.resourceType,
-          resourceName: res.resourceName,
-          resourcePatternType: res.resourcePatternType,
-
-          principal: rule.principal,
-          host: rule.host,
-          operation: rule.operation,
-          permissionType: rule.permissionType,
-        };
-
-        flattened.push(flattenedEntry);
-      }
-    }
-
-    return flattened;
-  },
-
-  get principalGroups(): AclPrincipalGroup[] {
-    const flat = this.flatAcls;
-
-    const g = flat.groupInto((f) => {
-      const groupingKey = `${f.principal ?? 'Any'} ${f.host ?? 'Any'}`;
-      return groupingKey;
-    });
-
-    const result: AclPrincipalGroup[] = [];
-
-    for (const { items } of g) {
-      const { principal, host } = items[0];
-
-      let principalType: PrincipalType;
-      let principalName: string;
-      if (principal?.includes(':')) {
-        const split = principal.split(':', 2);
-        principalType = split[0] as PrincipalType;
-        principalName = split[1];
-      } else {
-        principalType = 'User';
-        principalName = principal;
-      }
-
-      const principalGroup: AclPrincipalGroup = {
-        principalType,
-        principalName,
-        host,
-
-        topicAcls: collectTopicAcls(items),
-        consumerGroupAcls: collectConsumerGroupAcls(items),
-        clusterAcls: collectClusterAcls(items),
-        transactionalIdAcls: collectTransactionalIdAcls(items),
-
-        sourceEntries: items,
-      };
-      result.push(principalGroup);
-    }
-
-    // Add service accounts that exist but have no associated acl rules
-    const serviceAccounts = api.serviceAccounts?.users;
-    if (serviceAccounts) {
-      for (const acc of serviceAccounts) {
-        if (!result.any((group) => group.principalName === acc)) {
-          // Doesn't have a group yet, create one
-          result.push({
-            principalType: 'User',
-            host: '',
-            principalName: acc,
-            topicAcls: [createEmptyTopicAcl()],
-            consumerGroupAcls: [createEmptyConsumerGroupAcl()],
-            transactionalIdAcls: [createEmptyTransactionalIdAcl()],
-            clusterAcls: createEmptyClusterAcl(),
-            sourceEntries: [],
-          });
-        }
-      }
-    }
-
-    return result;
-  },
-};
-
-/*
- Sooner or later you want to go back from an 'AclPrincipalGroup' to flat ACLs.
- Why? Because you'll need to call the remove/create acl apis and those only work with flat acls.
- Use this method to convert your principal group back to a list of flat acls.
-*/
-// biome-ignore lint/complexity/noExcessiveCognitiveComplexity: complexity 52, refactor later
-export function unpackPrincipalGroup(group: AclPrincipalGroup): AclFlat[] {
-  const flat: AclFlat[] = [];
-
-  const principal = `${group.principalType}:${group.principalName}`;
-  const host = group.host || '*';
-
-  for (const topic of group.topicAcls) {
-    if (!topic.selector) {
-      continue;
-    }
-
-    // If the user selects 'Any' in the ui, we need to submit pattern type "Literal" and "*" as resourceName
-    const resourcePatternType = topic.patternType === 'Any' ? 'Literal' : topic.patternType;
-    const resourceName = topic.selector;
-
-    if (topic.all === 'Allow' || topic.all === 'Deny') {
-      const e: AclFlat = {
-        principal,
-        host,
-
-        resourceType: 'Topic',
-        resourcePatternType,
-        resourceName,
-
-        operation: 'All',
-        permissionType: topic.all,
-      };
-      flat.push(e);
-      continue;
-    }
-
-    for (const [key, permission] of Object.entries(topic.permissions)) {
-      const operation = key as AclStrOperation;
-
-      if (permission !== 'Allow' && permission !== 'Deny') {
-        continue;
-      }
-
-      const e: AclFlat = {
-        principal,
-        host,
-
-        resourceType: 'Topic',
-        resourceName,
-        resourcePatternType,
-
-        operation,
-        permissionType: permission,
-      };
-      flat.push(e);
-    }
-  }
-
-  for (const consumerGroup of group.consumerGroupAcls) {
-    if (!consumerGroup.selector) {
-      continue;
-    }
-
-    // If the user selects 'Any' in the ui, we need to submit pattern type "Literal" and "*" as resourceName
-    const resourcePatternType = consumerGroup.patternType === 'Any' ? 'Literal' : consumerGroup.patternType;
-    const resourceName = consumerGroup.selector;
-
-    if (consumerGroup.all === 'Allow' || consumerGroup.all === 'Deny') {
-      const e: AclFlat = {
-        principal,
-        host,
-
-        resourceType: 'Group',
-        resourcePatternType,
-        resourceName,
-
-        operation: 'All',
-        permissionType: consumerGroup.all,
-      };
-      flat.push(e);
-      continue;
-    }
-
-    for (const [key, permission] of Object.entries(consumerGroup.permissions)) {
-      const operation = key as AclStrOperation;
-
-      if (permission !== 'Allow' && permission !== 'Deny') {
-        continue;
-      }
-
-      const e: AclFlat = {
-        principal,
-        host,
-
-        resourceType: 'Group',
-        resourceName,
-        resourcePatternType,
-
-        operation,
-        permissionType: permission,
-      };
-      flat.push(e);
-    }
-  }
-
-  for (const transactionalId of group.transactionalIdAcls) {
-    if (!transactionalId.selector) {
-      continue;
-    }
-
-    // If the user selects 'Any' in the ui, we need to submit pattern type "Literal" and "*" as resourceName
-    const resourcePatternType = transactionalId.patternType === 'Any' ? 'Literal' : transactionalId.patternType;
-    const resourceName = transactionalId.selector;
-
-    if (transactionalId.all === 'Allow' || transactionalId.all === 'Deny') {
-      const e: AclFlat = {
-        principal,
-        host,
-
-        resourceType: 'TransactionalID',
-        resourcePatternType,
-        resourceName,
-
-        operation: 'All',
-        permissionType: transactionalId.all,
-      };
-      flat.push(e);
-      continue;
-    }
-
-    for (const [key, permission] of Object.entries(transactionalId.permissions)) {
-      const operation = key as AclStrOperation;
-
-      if (permission !== 'Allow' && permission !== 'Deny') {
-        continue;
-      }
-
-      const e: AclFlat = {
-        principal,
-        host,
-
-        resourceType: 'TransactionalID',
-        resourceName,
-        resourcePatternType,
-
-        operation,
-        permissionType: permission,
-      };
-      flat.push(e);
-    }
-  }
-
-  if (group.clusterAcls.all === 'Allow' || group.clusterAcls.all === 'Deny') {
-    const e: AclFlat = {
-      principal,
-      host,
-
-      resourceType: 'Cluster',
-      resourceName: 'kafka-cluster',
-      resourcePatternType: 'Literal',
-
-      operation: 'All',
-      permissionType: group.clusterAcls.all,
-    };
-    flat.push(e);
-  } else {
-    for (const [key, permission] of Object.entries(group.clusterAcls.permissions)) {
-      const operation = key as AclStrOperation;
-      if (permission !== 'Allow' && permission !== 'Deny') {
-        continue;
-      }
-
-      const e: AclFlat = {
-        principal,
-        host,
-
-        resourceType: 'Cluster',
-        resourceName: 'kafka-cluster',
-        resourcePatternType: 'Literal',
-
-        operation,
-        permissionType: permission,
-      };
-      flat.push(e);
-    }
-  }
-
-  return flat;
-}
diff --git a/frontend/src/components/pages/acls/new-acl/acl-create-page.tsx b/frontend/src/components/pages/acls/new-acl/acl-create-page.tsx
deleted file mode 100644
index 48fb28a0d1..0000000000
--- a/frontend/src/components/pages/acls/new-acl/acl-create-page.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-/**
- * Copyright 2022 Redpanda Data, Inc.
- *
- * Use of this software is governed by the Business Source License
- * included in the file https://github.com/redpanda-data/redpanda/blob/dev/licenses/bsl.md
- *
- * As of the Change Date specified in that file, in accordance with
- * the Business Source License, use of this software will be governed
- * by the Apache License, Version 2.0
- */
-
-import { getRouteApi, useNavigate } from '@tanstack/react-router';
-
-const routeApi = getRouteApi('/security/acls/create');
-
-import {
-  convertRulesToCreateACLRequests,
-  handleResponses,
-  type PrincipalType,
-  PrincipalTypeGroup,
-  PrincipalTypeRedpandaRole,
-  PrincipalTypeUser,
-  type Rule,
-} from 'components/pages/acls/new-acl/acl.model';
-import CreateACL from 'components/pages/acls/new-acl/create-acl';
-import { parsePrincipalFromParam } from 'components/pages/acls/new-acl/principal-utils';
-import { useEffect } from 'react';
-import { uiState } from 'state/ui-state';
-
-import { useCreateAcls } from '../../../../react-query/api/acl';
-import PageContent from '../../../misc/page-content';
-
-const principalTypeMap: Record<string, PrincipalType> = {
-  redpandarole: PrincipalTypeRedpandaRole,
-  user: PrincipalTypeUser,
-  group: PrincipalTypeGroup,
-};
-
-const AclCreatePage = () => {
-  const navigate = useNavigate({ from: '/security/acls/create' });
-  const search = routeApi.useSearch();
-
-  const principalTypeParam = search.principalType?.toLowerCase();
-  const principalName = search.principalName;
-  const principalType = principalTypeParam ? principalTypeMap[principalTypeParam] : undefined;
-
-  const sharedConfig =
-    principalName && principalType ? { principal: `${principalType}${principalName}`, host: '*' } : undefined;
-
-  useEffect(() => {
-    uiState.pageBreadcrumbs = [
-      { title: 'Security', linkTo: '/security' },
-      { title: 'ACLs', linkTo: '/security/acls' },
-      { title: 'Create ACL', linkTo: '' },
-    ];
-  }, []);
-
-  const { createAcls } = useCreateAcls();
-
-  const createAclMutation = async (principal: string, host: string, rules: Rule[]) => {
-    const result = convertRulesToCreateACLRequests(rules, principal, host);
-    const applyResult = await createAcls(result);
-    handleResponses(applyResult.errors, applyResult.created);
-
-    const { principalType, principalName } = parsePrincipalFromParam(principal);
-    const aclName = principalType === 'User' ? principalName : principal;
-    navigate({
-      to: '/security/acls/$aclName/details',
-      params: { aclName },
-      search: { host: undefined },
-    });
-  };
-
-  return (
-    <PageContent>
-      <CreateACL
-        edit={false}
-        onCancel={() => navigate({ to: '/security/$tab', params: { tab: 'acls' } })}
-        onSubmit={createAclMutation}
-        principalType={principalType}
-        sharedConfig={sharedConfig}
-      />
-    </PageContent>
-  );
-};
-
-export default AclCreatePage;
diff --git a/frontend/src/components/pages/acls/new-acl/acl-detail-page.test.tsx b/frontend/src/components/pages/acls/new-acl/acl-detail-page.test.tsx
deleted file mode 100644
index 4a53415545..0000000000
--- a/frontend/src/components/pages/acls/new-acl/acl-detail-page.test.tsx
+++ /dev/null
@@ -1,139 +0,0 @@
-/**
- * Copyright 2026 Redpanda Data, Inc.
- *
- * Use of this software is governed by the Business Source License
- * included in the file https://github.com/redpanda-data/redpanda/blob/dev/licenses/bsl.md
- *
- * As of the Change Date specified in that file, in accordance with
- * the Business Source License, use of this software will be governed
- * by the Apache License, Version 2.0
- */
-
-import { render, screen, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { beforeEach, describe, expect, test, vi } from 'vitest';
-
-import type { AclDetail } from './acl.model';
-
-// ---------------------------------------------------------------------------
-// Mocks
-// ---------------------------------------------------------------------------
-
-const { mockUseGetAclsByPrincipal, mockNavigate } = vi.hoisted(() => ({
-  mockUseGetAclsByPrincipal: vi.fn(),
-  mockNavigate: vi.fn(),
-}));
-
-vi.mock('react-query/api/acl', async (importOriginal) => {
-  const actual = await importOriginal<typeof import('react-query/api/acl')>();
-  return { ...actual, useGetAclsByPrincipal: mockUseGetAclsByPrincipal };
-});
-
-// Control params/search per-test via module-level variables
-let currentAclName = '';
-let currentHost: string | undefined;
-
-vi.mock('@tanstack/react-router', async (importOriginal) => {
-  const actual = await importOriginal<typeof import('@tanstack/react-router')>();
-  return {
-    ...actual,
-    getRouteApi: () => ({
-      useParams: () => ({ aclName: currentAclName }),
-      useSearch: () => ({ host: currentHost }),
-    }),
-    useNavigate: () => mockNavigate,
-  };
-});
-
-vi.mock('state/ui-state', () => ({
-  uiState: { pageBreadcrumbs: [] },
-}));
-
-vi.mock('./acl-details', () => ({
-  ACLDetails: () => <div data-testid="acl-details" />,
-}));
-
-// ---------------------------------------------------------------------------
-// Helpers
-// ---------------------------------------------------------------------------
-
-const singleHostAclDetail = (principal: string): AclDetail => ({
-  sharedConfig: { principal, host: '*' },
-  rules: [],
-});
-
-/** Return value that shows the detail view (single host, no HostSelector). */
-const aclDetailResult = (principal: string) => ({
-  data: [singleHostAclDetail(principal)],
-  isLoading: false,
-});
-
-/** Return value that keeps the component in "loading" state — useful when we
- *  only care about the call arguments, not what gets rendered. */
-const loadingResult = { data: undefined, isLoading: true };
-
-// ---------------------------------------------------------------------------
-// Tests
-// ---------------------------------------------------------------------------
-
-describe('AclDetailPage — principal URL encoding', () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-    mockUseGetAclsByPrincipal.mockReturnValue(loadingResult);
-  });
-
-  test('Group principal in URL is passed to the API as-is', async () => {
-    currentAclName = 'Group:mygroup';
-    currentHost = '*';
-
-    const { default: AclDetailPage } = await import('./acl-detail-page');
-    render(<AclDetailPage />);
-
-    await waitFor(() => {
-      expect(mockUseGetAclsByPrincipal).toHaveBeenCalledWith('Group:mygroup', '*');
-    });
-  });
-
-  test('bare User name (no prefix) defaults to User: principal type', async () => {
-    currentAclName = 'alice';
-    currentHost = '*';
-
-    const { default: AclDetailPage } = await import('./acl-detail-page');
-    render(<AclDetailPage />);
-
-    await waitFor(() => {
-      expect(mockUseGetAclsByPrincipal).toHaveBeenCalledWith('User:alice', '*');
-    });
-  });
-
-  test('explicit User: prefix is preserved correctly', async () => {
-    currentAclName = 'User:alice';
-    currentHost = '*';
-
-    const { default: AclDetailPage } = await import('./acl-detail-page');
-    render(<AclDetailPage />);
-
-    await waitFor(() => {
-      expect(mockUseGetAclsByPrincipal).toHaveBeenCalledWith('User:alice', '*');
-    });
-  });
-
-  test('Edit button navigates to update page preserving aclName and host for Group principal', async () => {
-    currentAclName = 'Group:mygroup';
-    currentHost = '*';
-    mockUseGetAclsByPrincipal.mockReturnValue(aclDetailResult('Group:mygroup'));
-
-    const { default: AclDetailPage } = await import('./acl-detail-page');
-    render(<AclDetailPage />);
-
-    const editButton = await screen.findByTestId('update-acl-button');
-    await userEvent.click(editButton);
-
-    await waitFor(() => {
-      expect(mockNavigate).toHaveBeenCalledWith({
-        to: '/security/acls/Group:mygroup/update',
-        search: { host: '*' },
-      });
-    });
-  });
-});
diff --git a/frontend/src/components/pages/acls/new-acl/acl-detail-page.tsx b/frontend/src/components/pages/acls/new-acl/acl-detail-page.tsx
deleted file mode 100644
index fe0ef2e774..0000000000
--- a/frontend/src/components/pages/acls/new-acl/acl-detail-page.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-/**
- * Copyright 2022 Redpanda Data, Inc.
- *
- * Use of this software is governed by the Business Source License
- * included in the file https://github.com/redpanda-data/redpanda/blob/dev/licenses/bsl.md
- *
- * As of the Change Date specified in that file, in accordance with
- * the Business Source License, use of this software will be governed
- * by the Apache License, Version 2.0
- */
-
-import { getRouteApi, useNavigate } from '@tanstack/react-router';
-
-const routeApi = getRouteApi('/security/acls/$aclName/details');
-
-import { Pencil } from 'lucide-react';
-import { useEffect } from 'react';
-import { uiState } from 'state/ui-state';
-
-import { ACLDetails } from './acl-details';
-import { HostSelector } from './host-selector';
-import { parsePrincipalFromParam } from './principal-utils';
-import { useGetAclsByPrincipal } from '../../../../react-query/api/acl';
-import { Button } from '../../../redpanda-ui/components/button';
-import { Text } from '../../../redpanda-ui/components/typography';
-
-const AclDetailPage = () => {
-  const { aclName } = routeApi.useParams();
-  const navigate = useNavigate({ from: '/security/acls/$aclName/details' });
-  const search = routeApi.useSearch();
-  const host = search.host || undefined;
-
-  const { principalType, principalName } = parsePrincipalFromParam(aclName);
-  const { data, isLoading } = useGetAclsByPrincipal(`${principalType}:${principalName}`, host);
-
-  const [acls, ...hosts] = data || [];
-
-  useEffect(() => {
-    uiState.pageBreadcrumbs = [
-      { title: 'Security', linkTo: '/security' },
-      { title: 'ACLs', linkTo: '/security/acls' },
-      { title: principalName, linkTo: `/security/acls/${aclName}/details` },
-      { title: 'ACL Configuration Details', linkTo: '', heading: '' },
-    ];
-  }, [aclName, principalName]);
-
-  if (isLoading) {
-    return <div>Loading...</div>;
-  }
-
-  if (!(acls && data)) {
-    return <div>No ACL data found</div>;
-  }
-
-  if (hosts.length > 0) {
-    return <HostSelector baseUrl={`/security/acls/${aclName}/details`} hosts={data} principalName={principalName} />;
-  }
-
-  return (
-    <div className="flex flex-col gap-4">
-      <div className="flex items-center justify-between">
-        <Text>
-          ACL Configuration Details for <strong>{principalName}</strong>
-        </Text>
-        <Button
-          data-testid="update-acl-button"
-          onClick={() =>
-            navigate({
-              to: `/security/acls/${aclName}/update`,
-              search: { host },
-            })
-          }
-          variant="outline"
-        >
-          <Pencil className="mr-2 h-4 w-4" />
-          Edit
-        </Button>
-      </div>
-      <ACLDetails isSimpleView={false} rules={acls.rules} sharedConfig={acls.sharedConfig} />
-    </div>
-  );
-};
-
-export default AclDetailPage;
diff --git a/frontend/src/components/pages/acls/new-acl/acl-details.tsx b/frontend/src/components/pages/acls/new-acl/acl-details.tsx
deleted file mode 100644
index b4320e1f32..0000000000
--- a/frontend/src/components/pages/acls/new-acl/acl-details.tsx
+++ /dev/null
@@ -1,118 +0,0 @@
-/**
- * Copyright 2022 Redpanda Data, Inc.
- *
- * Use of this software is governed by the Business Source License
- * included in the file https://github.com/redpanda-data/redpanda/blob/dev/licenses/bsl.md
- *
- * As of the Change Date specified in that file, in accordance with
- * the Business Source License, use of this software will be governed
- * by the Apache License, Version 2.0
- */
-
-import { useNavigate } from '@tanstack/react-router';
-import { Button } from 'components/redpanda-ui/components/button';
-import { Card, CardContent, CardHeader, CardTitle } from 'components/redpanda-ui/components/card';
-
-import { getRuleDataTestId, parsePrincipal, type Rule, type SharedConfig } from './acl.model';
-import { OperationsBadge } from './operations-badge';
-
-type ACLDetailsProps = {
-  sharedConfig: {
-    principal: string;
-    host: string;
-  };
-  rules: Rule[];
-  isSimpleView?: boolean; // this prop show SharedConfig, this is used for emmbedded this component on legacy user page
-};
-
-export function ACLDetails({ sharedConfig, rules, isSimpleView = false }: ACLDetailsProps) {
-  const navigate = useNavigate();
-
-  const getGoTo = (sc: SharedConfig) => {
-    if (sc.principal.startsWith('User:')) {
-      return `/security/acls/${parsePrincipal(sc.principal).name}/details`;
-    }
-    if (sc.principal.startsWith('RedpandaRole:')) {
-      return `/security/roles/${parsePrincipal(sc.principal).name}/details`;
-    }
-    return '';
-  };
-
-  const data = {
-    sharedConfig,
-    rules,
-    principalType: parsePrincipal(sharedConfig.principal).type,
-    hostType: sharedConfig.host === '*' ? 'Allow all hosts' : 'Specific host',
-  };
-
-  return (
-    <div>
-      {/* Main Content */}
-      <main>
-        <div className="mx-auto">
-          <div className="grid grid-cols-1 gap-8">
-            {/* Left Column - Configuration Details */}
-            <div className="space-y-6">
-              {/* Shared Configuration */}
-              <Card className={`${isSimpleView ? 'hidden' : ''}`} size="full">
-                <CardHeader className="pb-4">
-                  <CardTitle className="font-medium text-gray-900 text-lg" data-testid={'share-config-title'}>
-                    Shared configuration
-                  </CardTitle>
-                </CardHeader>
-                <CardContent className="space-y-4">
-                  <div className="grid grid-cols-2 gap-6">
-                    <div>
-                      <div className="mb-1 font-medium text-gray-700 text-sm">Principal</div>
-                      <div className="text-gray-900 text-sm">
-                        <span className="text-gray-600">{data.principalType}:</span>{' '}
-                        <span>{parsePrincipal(data.sharedConfig.principal).name}</span>
-                      </div>
-                    </div>
-                    <div>
-                      <div className="mb-1 font-medium text-gray-700 text-sm">Host</div>
-                      <div className="text-gray-900 text-sm">
-                        <span className="text-gray-600">{data.hostType}:</span>{' '}
-                        <span className="font-mono">{data.sharedConfig.host}</span>
-                      </div>
-                    </div>
-                  </div>
-                </CardContent>
-              </Card>
-
-              {/* Rules */}
-              <Card className="border-gray-200" size="full" variant={isSimpleView ? 'elevated' : undefined}>
-                <CardHeader>
-                  <CardTitle className="font-medium text-gray-900 text-lg" data-testid={'acl-rules-length'}>
-                    {isSimpleView ? (
-                      <Button onClick={() => navigate({ to: getGoTo(sharedConfig) })} variant="link">
-                        {sharedConfig.principal}
-                      </Button>
-                    ) : (
-                      `ACL rules (${data.rules.length})`
-                    )}
-                  </CardTitle>
-                </CardHeader>
-                <CardContent className="space-y-4">
-                  {data.rules.length === 0 ? (
-                    <div className="py-8 text-center text-gray-500">No permissions configured</div>
-                  ) : (
-                    data.rules.map((rule: Rule) => (
-                      <div
-                        className="rounded-lg border border-gray-200 p-4"
-                        data-testid={`summary-card-${getRuleDataTestId(rule)}`}
-                        key={rule.id}
-                      >
-                        <OperationsBadge rule={rule} />
-                      </div>
-                    ))
-                  )}
-                </CardContent>
-              </Card>
-            </div>
-          </div>
-        </div>
-      </main>
-    </div>
-  );
-}
diff --git a/frontend/src/components/pages/acls/new-acl/acl-update-page.tsx b/frontend/src/components/pages/acls/new-acl/acl-update-page.tsx
deleted file mode 100644
index 31307ef586..0000000000
--- a/frontend/src/components/pages/acls/new-acl/acl-update-page.tsx
+++ /dev/null
@@ -1,147 +0,0 @@
-/**
- * Copyright 2025 Redpanda Data, Inc.
- *
- * Use of this software is governed by the Business Source License
- * included in the file https://github.com/redpanda-data/redpanda/blob/dev/licenses/bsl.md
- *
- * As of the Change Date specified in that file, in accordance with
- * the Business Source License, use of this software will be governed
- * by the Apache License, Version 2.0
- */
-
-import { getRouteApi, useNavigate } from '@tanstack/react-router';
-
-const routeApi = getRouteApi('/security/acls/$aclName/update');
-
-import {
-  getOperationsForResourceType,
-  handleResponses,
-  ModeAllowAll,
-  ModeDenyAll,
-  OperationTypeAllow,
-  OperationTypeDeny,
-  type PrincipalType,
-  PrincipalTypeGroup,
-  PrincipalTypeRedpandaRole,
-  PrincipalTypeUser,
-  type Rule,
-} from 'components/pages/acls/new-acl/acl.model';
-import CreateACL from 'components/pages/acls/new-acl/create-acl';
-import { HostSelector } from 'components/pages/acls/new-acl/host-selector';
-import { useEffect } from 'react';
-
-import { parsePrincipalFromParam } from './principal-utils';
-import { useGetAclsByPrincipal, useUpdateAclMutation } from '../../../../react-query/api/acl';
-import { uiState } from '../../../../state/ui-state';
-import PageContent from '../../../misc/page-content';
-
-const VALID_PRINCIPAL_TYPES: Record<string, PrincipalType> = {
-  User: PrincipalTypeUser,
-  Group: PrincipalTypeGroup,
-  RedpandaRole: PrincipalTypeRedpandaRole,
-};
-
-const AclUpdatePage = () => {
-  const navigate = useNavigate({ from: '/security/acls/$aclName/update' });
-  const { aclName } = routeApi.useParams();
-  const search = routeApi.useSearch();
-  const host = search.host ?? undefined;
-
-  const { principalType, principalName } = parsePrincipalFromParam(aclName);
-
-  useEffect(() => {
-    uiState.pageBreadcrumbs = [
-      { title: 'Security', linkTo: '/security' },
-      { title: 'ACLs', linkTo: '/security/acls' },
-      { title: principalName, linkTo: `/security/acls/${aclName}/details` },
-      { title: 'Update ACL', linkTo: '', heading: '' },
-    ];
-  }, [aclName, principalName]);
-
-  // Fetch existing ACL data
-  const { data, isLoading } = useGetAclsByPrincipal(`${principalType}:${principalName}`, host);
-
-  const { applyUpdates } = useUpdateAclMutation();
-
-  const [acls, ...hosts] = data || [];
-
-  const handleUpdate = async (_principal: string, _host: string, rules: Rule[]) => {
-    if (!acls) {
-      return;
-    }
-    const applyResult = await applyUpdates(acls.rules, acls.sharedConfig, rules);
-    handleResponses(applyResult.errors, applyResult.created);
-
-    navigate({
-      to: `/security/acls/${aclName}/details`,
-      search: { host },
-    });
-  };
-
-  if (isLoading) {
-    return (
-      <PageContent>
-        <div className="flex h-96 items-center justify-center">
-          <div className="text-gray-500">Loading ACL configuration...</div>
-        </div>
-      </PageContent>
-    );
-  }
-
-  if (!(acls && data)) {
-    return <div>No ACL data found</div>;
-  }
-
-  if (hosts.length > 1) {
-    return (
-      <PageContent>
-        <HostSelector baseUrl={`/security/acls/${aclName}/update`} hosts={data} principalName={principalName} />
-      </PageContent>
-    );
-  }
-
-  // Ensure all operations are present for each rule
-  const rulesWithAllOperations = acls.rules.map((rule) => {
-    const allOperations = getOperationsForResourceType(rule.resourceType);
-    let mergedOperations = { ...allOperations };
-
-    // If mode is AllowAll or DenyAll, set all operations accordingly
-    if (rule.mode === ModeAllowAll) {
-      mergedOperations = Object.fromEntries(Object.keys(allOperations).map((op) => [op, OperationTypeAllow]));
-    } else if (rule.mode === ModeDenyAll) {
-      mergedOperations = Object.fromEntries(Object.keys(allOperations).map((op) => [op, OperationTypeDeny]));
-    } else {
-      // For custom mode, override with the actual values from the fetched rule
-      for (const [op, value] of Object.entries(rule.operations)) {
-        if (op in mergedOperations) {
-          mergedOperations[op] = value;
-        }
-      }
-    }
-
-    return {
-      ...rule,
-      operations: mergedOperations,
-    };
-  });
-
-  return (
-    <PageContent>
-      <CreateACL
-        edit
-        onCancel={() =>
-          navigate({
-            to: `/security/acls/${aclName}/details`,
-            search: { host },
-          })
-        }
-        onSubmit={handleUpdate}
-        principalType={VALID_PRINCIPAL_TYPES[principalType] ?? PrincipalTypeUser}
-        rules={rulesWithAllOperations}
-        sharedConfig={acls.sharedConfig}
-      />
-    </PageContent>
-  );
-};
-
-export default AclUpdatePage;
diff --git a/frontend/src/components/pages/acls/new-acl/autocomplete-input.tsx b/frontend/src/components/pages/acls/new-acl/autocomplete-input.tsx
deleted file mode 100644
index 394143f039..0000000000
--- a/frontend/src/components/pages/acls/new-acl/autocomplete-input.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import { Command, CommandGroup, CommandItem, CommandList } from 'components/redpanda-ui/components/command';
-import { Input } from 'components/redpanda-ui/components/input';
-import { type ChangeEvent, useState } from 'react';
-
-const EMPTY_SUGGESTIONS: string[] = [];
-
-type AutocompleteInputProps = {
-  value: string;
-  onChange: (value: string) => void;
-  placeholder?: string;
-  className?: string;
-  suggestions?: string[];
-  'data-testid'?: string;
-};
-
-export function AutocompleteInput({
-  value,
-  onChange,
-  placeholder,
-  className,
-  suggestions = EMPTY_SUGGESTIONS,
-  'data-testid': dataTestId,
-}: AutocompleteInputProps) {
-  const [filteredSuggestions, setFilteredSuggestions] = useState<string[]>([]);
-  const [showSuggestions, setShowSuggestions] = useState(false);
-
-  const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
-    const newValue = e.target.value;
-    onChange(newValue);
-
-    if (newValue.length > 0 && suggestions.length > 0) {
-      const filtered = suggestions.filter((suggestion) => suggestion.toLowerCase().includes(newValue.toLowerCase()));
-      setFilteredSuggestions(filtered);
-      setShowSuggestions(filtered.length > 0);
-    } else {
-      setShowSuggestions(false);
-    }
-  };
-
-  const handleSelectSuggestion = (suggestion: string) => {
-    onChange(suggestion);
-    setShowSuggestions(false);
-  };
-
-  return (
-    <div className="relative flex-1">
-      <Input
-        className={className}
-        onBlur={() => setTimeout(() => setShowSuggestions(false), 200)}
-        onChange={handleInputChange}
-        onFocus={() => {
-          if (value.length > 0 && suggestions.length > 0) {
-            const filtered = suggestions.filter((suggestion) => suggestion.toLowerCase().includes(value.toLowerCase()));
-            setFilteredSuggestions(filtered);
-            setShowSuggestions(filtered.length > 0);
-          }
-        }}
-        placeholder={placeholder}
-        testId={dataTestId}
-        type="text"
-        value={value}
-      />
-
-      {showSuggestions && filteredSuggestions.length > 0 && (
-        <div className="absolute top-full right-0 left-0 z-50 mt-1">
-          <Command className="rounded-lg border bg-white shadow-md">
-            <CommandList>
-              <CommandGroup>
-                {filteredSuggestions.map((suggestion) => (
-                  <CommandItem
-                    className="cursor-pointer"
-                    key={suggestion}
-                    onSelect={() => handleSelectSuggestion(suggestion)}
-                  >
-                    {suggestion}
-                  </CommandItem>
-                ))}
-              </CommandGroup>
-            </CommandList>
-          </Command>
-        </div>
-      )}
-    </div>
-  );
-}
diff --git a/frontend/src/components/pages/acls/new-acl/create-acl.tsx b/frontend/src/components/pages/acls/new-acl/create-acl.tsx
deleted file mode 100644
index a71e714961..0000000000
--- a/frontend/src/components/pages/acls/new-acl/create-acl.tsx
+++ /dev/null
@@ -1,1131 +0,0 @@
-/** biome-ignore-all lint/correctness/useUniqueElementIds: this is intentional for form usage */
-
-'use no memo';
-
-import { Button } from 'components/redpanda-ui/components/button';
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardField,
-  CardForm,
-  CardHeader,
-  CardTitle,
-} from 'components/redpanda-ui/components/card';
-import { Input } from 'components/redpanda-ui/components/input';
-import { Label } from 'components/redpanda-ui/components/label';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from 'components/redpanda-ui/components/select';
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from 'components/redpanda-ui/components/tooltip';
-import { Check, Circle, HelpCircle, Plus, Trash2, X } from 'lucide-react';
-import { useEffect, useRef, useState } from 'react';
-import { useApiStoreHook } from 'state/backend-api';
-import { useSupportedFeaturesStore } from 'state/supported-features';
-
-import {
-  type AclRulesProps,
-  getIdFromRule,
-  getOperationsForResourceType,
-  getRuleDataTestId,
-  type HostType,
-  HostTypeAllowAllHosts,
-  HostTypeSpecificHost,
-  ModeAllowAll,
-  ModeCustom,
-  ModeDenyAll,
-  type ModeType,
-  type OperationType,
-  OperationTypeAllow,
-  OperationTypeDeny,
-  OperationTypeNotSet,
-  type PrincipalType,
-  parsePrincipal,
-  type ResourcePatternType,
-  ResourcePatternTypeAny,
-  ResourcePatternTypeLiteral,
-  ResourcePatternTypePrefix,
-  type ResourceType,
-  ResourceTypeCluster,
-  ResourceTypeConsumerGroup,
-  ResourceTypeSchemaRegistry,
-  type ResourceTypeSelectionProps,
-  ResourceTypeSubject,
-  ResourceTypeTopic,
-  ResourceTypeTransactionalId,
-  RoleTypeGroup,
-  RoleTypeRedpandaRole,
-  RoleTypeUser,
-  type Rule,
-  type SharedConfig,
-  type SharedConfigProps,
-  type SummaryProps,
-} from './acl.model';
-
-const UNDERSCORE_REGEX = /_/g;
-const FIRST_CHAR_REGEX = /^\w/;
-const COLON_REGEX = /:/;
-const PRINCIPAL_PREFIX_REGEX = /^[^:]+:/;
-
-// Helper function to convert UPPER_CASE strings to sentence case ex: ALTER => Alter ALTER_CONFIG => Alter config
-export const formatLabel = (text: string): string => {
-  return text
-    .replace(UNDERSCORE_REGEX, ' ')
-    .toLowerCase()
-    .replace(FIRST_CHAR_REGEX, (c) => c.toUpperCase())
-    .replace('id', 'ID'); // transactional ids => transactional IDs
-};
-
-// Helper function to format summary labels, keeping certain words capitalized
-export const formatSummaryLabel = (text: string): string => {
-  return text.replace('id', 'ID'); // transactional ids => transactional IDs
-};
-
-// Helper function to get resource name for selector label
-const getResourceName = (resourceType: ResourceType): string => {
-  const resourceNames: Record<string, string> = {
-    [ResourceTypeTopic]: 'Topic',
-    [ResourceTypeConsumerGroup]: 'Consumer group',
-    [ResourceTypeTransactionalId]: 'Transactional ID',
-    [ResourceTypeSubject]: 'Subject',
-    [ResourceTypeSchemaRegistry]: 'Schema registry',
-  };
-  return resourceNames[resourceType] || resourceType;
-};
-
-// Helper function to get plural resource name
-const getPluralResourceName = (resourceType: ResourceType): string => {
-  const pluralNames: Record<string, string> = {
-    [ResourceTypeCluster]: 'clusters',
-    [ResourceTypeTopic]: 'topics',
-    [ResourceTypeConsumerGroup]: 'consumer groups',
-    [ResourceTypeTransactionalId]: 'transactional IDs',
-    [ResourceTypeSubject]: 'subjects',
-    [ResourceTypeSchemaRegistry]: 'schema registries',
-  };
-  return pluralNames[resourceType] || resourceType;
-};
-
-function stringToHostType(h: string): HostType {
-  switch (h) {
-    case '*':
-    case '':
-      return HostTypeAllowAllHosts;
-    default:
-      return HostTypeSpecificHost;
-  }
-}
-
-const ResourceTypeSelection = ({
-  rule,
-  handleResourceTypeChange,
-  isClusterDisabledForRule,
-  isSchemaRegistryDisabledForRule,
-  isSchemaRegistryEnabled,
-  ruleIndex,
-  getSchemaRegistryTooltipText,
-  getSubjectTooltipText,
-}: ResourceTypeSelectionProps) => {
-  const buttons = [
-    {
-      name: 'Cluster',
-      resourceType: ResourceTypeCluster,
-      disabled: isClusterDisabledForRule(rule.id),
-      tooltipText: 'Only one cluster rule is allowed. A cluster rule already exists.',
-    },
-    {
-      name: 'Topic',
-      resourceType: ResourceTypeTopic,
-    },
-    {
-      name: 'Consumer Group',
-      resourceType: ResourceTypeConsumerGroup,
-    },
-    {
-      name: 'Transactional ID',
-      resourceType: ResourceTypeTransactionalId,
-    },
-    {
-      name: 'Subject',
-      resourceType: ResourceTypeSubject,
-      disabled: !isSchemaRegistryEnabled,
-      tooltipText: getSubjectTooltipText(),
-    },
-    {
-      name: 'Schema Registry',
-      resourceType: ResourceTypeSchemaRegistry,
-      disabled: !isSchemaRegistryEnabled || isSchemaRegistryDisabledForRule(rule.id),
-      tooltipText: getSchemaRegistryTooltipText(),
-    },
-  ];
-
-  return (
-    <span className="h-10 items-center justify-center rounded-md bg-gray-100 p-1 text-gray-600 md:inline-flex">
-      {/*TODO: Add tooltip with <p>Only one cluster rule is allowed. A cluster rule already exists.</p>*/}
-      {buttons.map(({ name, resourceType, disabled, tooltipText }) => (
-        <TooltipProvider key={`rt-${resourceType}-tooltip-${ruleIndex}`}>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button
-                className={
-                  rule.resourceType === resourceType
-                    ? 'bg-gray-900 text-white shadow-sm hover:bg-gray-800'
-                    : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900'
-                }
-                data-testid={`rt-${resourceType}-button-${ruleIndex}`}
-                disabled={disabled}
-                key={`rt-${resourceType}-button-${ruleIndex}`}
-                onClick={() => handleResourceTypeChange(rule.id, resourceType)}
-                size="sm"
-                variant={rule.resourceType === resourceType ? 'primary' : 'ghost'}
-              >
-                {name}
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent hidden={!disabled}>
-              <p className="max-w-xs">{tooltipText}</p>
-            </TooltipContent>
-          </Tooltip>
-        </TooltipProvider>
-      ))}
-    </span>
-  );
-};
-
-const Summary = ({ sharedConfig, rules }: SummaryProps) => {
-  return (
-    <Card className="bg-slate-100" size="full">
-      <CardHeader>
-        <h3>Summary</h3>
-      </CardHeader>
-      <CardContent>
-        {/* Shared Configuration Summary */}
-        <div>
-          <div className="rounded-lg border-0">
-            <div className="flex items-center justify-between text-sm">
-              <span className="text-gray-600">Principal:</span>
-              <span className="font-medium text-gray-900">{sharedConfig.principal.replace(COLON_REGEX, ': ')}</span>
-            </div>
-            <div className="flex items-center justify-between text-sm">
-              <span className="text-gray-600">Host:</span>
-              <span className="font-medium text-gray-900">
-                {sharedConfig.host === '*' ? 'All hosts' : sharedConfig.host}
-              </span>
-            </div>
-          </div>
-        </div>
-
-        {/* Rules Summary */}
-        <div className="space-y-3">
-          {/** biome-ignore lint/complexity/noExcessiveCognitiveComplexity: complex business logic */}
-          {rules.map((rule) => {
-            const ops = Object.entries(rule.operations);
-            // Filter out operations that are not set
-            const enabledOperations = ops
-              .filter(([_, operationValue]) => operationValue !== OperationTypeNotSet)
-              .map(([op, operationValue]) => ({
-                name: formatLabel(op),
-                value: operationValue,
-                originalOperationName: op,
-              }));
-
-            // Check if all operations have the same permission
-            const allAllow =
-              enabledOperations.length > 0 &&
-              enabledOperations.length === ops.length &&
-              enabledOperations.every((op) => op.value === OperationTypeAllow);
-            const allDeny =
-              enabledOperations.length > 0 &&
-              enabledOperations.length === ops.length &&
-              enabledOperations.every((op) => op.value === OperationTypeDeny);
-            const showSummary = allAllow || allDeny;
-
-            return (
-              <div
-                className="space-y-2 rounded-lg border border-gray-200 bg-white/40 p-3"
-                data-testid={`summary-card-${getRuleDataTestId(rule)}`}
-                key={rule.id}
-              >
-                {/* Combined Resource and Selector */}
-                <p
-                  className="text-gray-600 text-xs first-letter:uppercase"
-                  data-testid={`${getRuleDataTestId(rule)}-title`}
-                >
-                  {(() => {
-                    let text: string;
-                    if (rule.resourceType === ResourceTypeCluster || rule.resourceType === ResourceTypeSchemaRegistry) {
-                      text = getResourceName(rule.resourceType);
-                    } else if (rule.selectorType === ResourcePatternTypeAny) {
-                      text = `All ${getPluralResourceName(rule.resourceType)}`;
-                    } else {
-                      const matchType = rule.selectorType === ResourcePatternTypeLiteral ? 'matching' : 'starting with';
-                      text = `${getPluralResourceName(rule.resourceType)} ${matchType}: "${rule.selectorValue}"`;
-                    }
-                    return formatSummaryLabel(text);
-                  })()}
-                </p>
-
-                {/* Operations */}
-                <div>
-                  {enabledOperations.length > 0 ? (
-                    <div className="flex flex-wrap gap-1">
-                      {showSummary ? (
-                        <span
-                          className={`inline-flex items-center rounded-full px-2 py-1 font-medium text-xs ${
-                            allAllow ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
-                          }`}
-                        >
-                          {allAllow ? 'Allow all' : 'Deny all'}
-                        </span>
-                      ) : (
-                        enabledOperations.map((op) => (
-                          <span
-                            className={`inline-flex items-center rounded-full px-2 py-1 font-medium text-xs ${
-                              op.value === OperationTypeAllow
-                                ? 'bg-green-100 text-green-800'
-                                : 'bg-red-100 text-red-800'
-                            }`}
-                            data-testid={`${getRuleDataTestId(rule)}-op-${op.originalOperationName}`}
-                            key={op.name}
-                          >
-                            {op.name}: {op.value}
-                          </span>
-                        ))
-                      )}
-                    </div>
-                  ) : (
-                    <span className="text-gray-400 text-xs italic">No operations configured</span>
-                  )}
-                </div>
-              </div>
-            );
-          })}
-        </div>
-      </CardContent>
-    </Card>
-  );
-};
-
-const AclRules = ({
-  rules,
-  addRule,
-  addAllowAllOperations,
-  removeRule,
-  updateRule,
-  handleResourceTypeChange,
-  isClusterDisabledForRule,
-  isSchemaRegistryDisabledForRule,
-  isSubjectDisabledForRule,
-  getSchemaRegistryTooltipText,
-  getSubjectTooltipText,
-  handlePermissionModeChange,
-  handleOperationChange,
-  getPermissionIcon,
-  getPermissionDescription,
-  schemaRegistryEnabled,
-}: AclRulesProps) => {
-  return (
-    <Card size={'full'}>
-      <CardHeader>
-        <div className="flex items-center justify-between">
-          <div>
-            <CardTitle className="font-medium text-gray-900 text-lg">ACL rules</CardTitle>
-            <CardDescription className="text-gray-600">
-              Configure permissions for different resource types.
-            </CardDescription>
-          </div>
-          <Button data-testid="add-allow-all-operations-button" onClick={addAllowAllOperations} variant="outline">
-            Allow all operations
-          </Button>
-        </div>
-      </CardHeader>
-      <CardContent>
-        {rules.map((rule, index) => (
-          <Card
-            className={`card-content-rule-${index} px-10`}
-            data-testid={`card-content-rule-${getRuleDataTestId(rule)}`}
-            key={rule.id}
-            size={'full'}
-            variant={'elevated'}
-          >
-            <CardContent>
-              {/* Resource Type Selection */}
-              <div className="flex items-center justify-between">
-                <span>
-                  <Label className="mb-1.5 block font-medium text-gray-700 text-sm">Select a resource type</Label>
-                  <ResourceTypeSelection
-                    getSchemaRegistryTooltipText={getSchemaRegistryTooltipText}
-                    getSubjectTooltipText={getSubjectTooltipText}
-                    handleResourceTypeChange={handleResourceTypeChange}
-                    isClusterDisabledForRule={isClusterDisabledForRule}
-                    isSchemaRegistryDisabledForRule={isSchemaRegistryDisabledForRule}
-                    isSchemaRegistryEnabled={schemaRegistryEnabled}
-                    isSubjectDisabledForRule={isSubjectDisabledForRule}
-                    rule={rule}
-                    ruleIndex={index}
-                  />
-                </span>
-                <Button
-                  data-testid={`remove-rule-button-${getRuleDataTestId(rule)}`}
-                  onClick={() => removeRule(rule.id)}
-                  size="icon"
-                  variant="destructive-ghost"
-                >
-                  <Trash2 />
-                </Button>
-              </div>
-
-              {/* Resource Name Selector */}
-              {/* Show selector if resource type is not Cluster or SchemaRegistry */}
-              {!(rule.resourceType === ResourceTypeCluster || rule.resourceType === ResourceTypeSchemaRegistry) && (
-                <div className="mb-6 space-y-2">
-                  <Label className="font-medium text-gray-700 text-sm">Selector</Label>
-                  <div className="grid grid-cols-4 gap-3">
-                    <Select
-                      onValueChange={(value) =>
-                        updateRule(rule.id, {
-                          selectorType: value as ResourcePatternType,
-                          selectorValue: value === ResourcePatternTypeAny ? '' : rule.selectorValue,
-                        })
-                      }
-                      value={rule.selectorType}
-                    >
-                      <SelectTrigger testId={`selector-type-select-${index}`}>
-                        <SelectValue />
-                      </SelectTrigger>
-                      <SelectContent>
-                        <SelectItem value={ResourcePatternTypeAny}>
-                          All {getPluralResourceName(rule.resourceType)}
-                        </SelectItem>
-                        <SelectItem value={ResourcePatternTypeLiteral}>
-                          {getResourceName(rule.resourceType)} names matching
-                        </SelectItem>
-                        <SelectItem value={ResourcePatternTypePrefix}>
-                          {getResourceName(rule.resourceType)} names starting with
-                        </SelectItem>
-                      </SelectContent>
-                    </Select>
-                    {(rule.selectorType === ResourcePatternTypeLiteral ||
-                      rule.selectorType === ResourcePatternTypePrefix) && (
-                      <div className="col-span-3">
-                        <Input
-                          className="flex-1 border-gray-300 focus:border-gray-500 focus:ring-gray-500"
-                          onChange={(e) =>
-                            updateRule(rule.id, {
-                              selectorValue: e.target.value,
-                            })
-                          }
-                          placeholder={`Enter ${rule.selectorType} match`}
-                          testId={`selector-value-input-${index}`}
-                          value={rule.selectorValue}
-                        />
-                        <p
-                          className={`text-red-600 text-sm ${!!rule.selectorValue.length && 'hidden'}`}
-                          data-testid={`selector-value-error-${index}`}
-                        >
-                          {rule.selectorType === ResourcePatternTypeLiteral
-                            ? 'Literal match cannot be empty'
-                            : 'Prefix match cannot be empty'}
-                        </p>
-                      </div>
-                    )}
-                  </div>
-                </div>
-              )}
-
-              {/* Permission Mode */}
-              <div className="mb-3">
-                <div className="flex items-center justify-between">
-                  <Label className="font-medium text-gray-700 text-sm">Operations</Label>
-                  <div className="inline-flex h-10 items-center justify-center rounded-md bg-gray-100 p-1 text-gray-600">
-                    <button
-                      className={`inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 font-medium text-sm ring-offset-white transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-400 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 ${
-                        rule.mode === ModeCustom
-                          ? 'bg-white text-gray-900 shadow-sm'
-                          : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900'
-                      }`}
-                      data-testid={`mode-custom-button-${index}`}
-                      onClick={() => handlePermissionModeChange(rule.id, ModeCustom)}
-                      type="button"
-                    >
-                      Custom
-                    </button>
-                    <button
-                      className={`inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 font-medium text-sm ring-offset-white transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-400 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 ${
-                        rule.mode === ModeAllowAll
-                          ? 'bg-white text-gray-900 shadow-sm'
-                          : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900'
-                      }`}
-                      data-testid={`mode-allow-all-button-${index}`}
-                      onClick={() => handlePermissionModeChange(rule.id, ModeAllowAll)}
-                      type="button"
-                    >
-                      Allow all
-                    </button>
-                    <button
-                      className={`inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 font-medium text-sm ring-offset-white transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-400 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 ${
-                        rule.mode === ModeDenyAll
-                          ? 'bg-white text-gray-900 shadow-sm'
-                          : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900'
-                      }`}
-                      data-testid={`mode-deny-all-button-${index}`}
-                      onClick={() => handlePermissionModeChange(rule.id, ModeDenyAll)}
-                      type="button"
-                    >
-                      Deny all
-                    </button>
-                  </div>
-                </div>
-              </div>
-
-              {/* Operations */}
-              <div className="grid gap-3 sm:grid-cols-2 md:grid-cols-3">
-                {Object.entries(rule.operations).map(([operation, operationValue]) => (
-                  <div className="flex items-center gap-1" key={operation}>
-                    <Select
-                      onValueChange={(value) => handleOperationChange(rule.id, operation, value)}
-                      value={operationValue}
-                    >
-                      <SelectTrigger
-                        className="h-10 flex-1 justify-between border-gray-300 focus:border-gray-500 focus:ring-gray-500/20"
-                        data-testid={`operation-select-${operation}`}
-                      >
-                        <div className="flex items-center space-x-2">
-                          {getPermissionIcon(operationValue)}
-                          <span
-                            className={`font-medium text-sm ${operationValue === OperationTypeNotSet ? 'text-gray-400' : 'text-gray-900'}`}
-                          >
-                            {formatLabel(operation)}
-                          </span>
-                        </div>
-                      </SelectTrigger>
-                      <SelectContent>
-                        <SelectItem
-                          data-testid={`ro-${getIdFromRule(rule, operation, OperationTypeNotSet)}`}
-                          value={OperationTypeNotSet}
-                        >
-                          <div className="flex items-center space-x-2">
-                            <Circle className="h-4 w-4 text-gray-400" />
-                            <span>Not set</span>
-                          </div>
-                        </SelectItem>
-                        <SelectItem
-                          data-testid={`ro-${getIdFromRule(rule, operation, OperationTypeAllow)}`}
-                          value={OperationTypeAllow}
-                        >
-                          <div className="flex items-center space-x-2">
-                            <Check className="h-4 w-4 text-green-600" />
-                            <span>Allow</span>
-                          </div>
-                        </SelectItem>
-                        <SelectItem
-                          data-testid={`ro-${getIdFromRule(rule, operation, OperationTypeDeny)}`}
-                          value={OperationTypeDeny}
-                        >
-                          <div className="flex items-center space-x-2">
-                            <X className="h-4 w-4 text-red-600" />
-                            <span>Deny</span>
-                          </div>
-                        </SelectItem>
-                      </SelectContent>
-                    </Select>
-                    <TooltipProvider>
-                      <Tooltip>
-                        <TooltipTrigger asChild>
-                          <HelpCircle className="h-4 w-4 cursor-help text-gray-400" />
-                        </TooltipTrigger>
-                        <TooltipContent>
-                          <p className="max-w-xs">{getPermissionDescription(operation, rule.resourceType)}</p>
-                        </TooltipContent>
-                      </Tooltip>
-                    </TooltipProvider>
-                  </div>
-                ))}
-              </div>
-            </CardContent>
-          </Card>
-        ))}
-
-        {/* Add Rule Button */}
-        <div className="mt-6">
-          <Button className="w-full" data-testid="add-acl-rule-button" onClick={addRule} variant="outline">
-            <Plus className="h-4 w-4" />
-            Add rule
-          </Button>
-        </div>
-      </CardContent>
-    </Card>
-  );
-};
-
-const SharedConfiguration = ({
-  sharedConfig,
-  setSharedConfig,
-  edit,
-  principalType: propPrincipalType,
-  principalError,
-}: SharedConfigProps & { principalType?: PrincipalType; principalError?: string }) => {
-  const [principalType, setPrincipalType] = useState(
-    propPrincipalType ? propPrincipalType.replace(':', '') : parsePrincipal(sharedConfig.principal).type || RoleTypeUser
-  );
-  const [hostType, setHostType] = useState<HostType>(() => stringToHostType(sharedConfig.host));
-  const enterpriseFeaturesUsed = useApiStoreHook((s) => s.enterpriseFeaturesUsed);
-  const gbacEnabled = enterpriseFeaturesUsed.some((f) => f.name === 'gbac' && f.enabled);
-
-  return (
-    <Card size={'full'}>
-      <CardHeader className="pb-4">
-        <CardTitle className="font-medium text-gray-900 text-lg">Shared configuration</CardTitle>
-        <CardDescription className="text-gray-600">These settings apply to all rules.</CardDescription>
-      </CardHeader>
-      <CardContent>
-        <CardForm>
-          <CardField>
-            <div className="flex items-center gap-1">
-              <Label className="font-medium text-gray-700 text-sm" htmlFor="principal">
-                {principalType === RoleTypeRedpandaRole ? 'Role name' : 'User / principal'}
-              </Label>
-              <TooltipProvider>
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <HelpCircle className="h-4 w-4 cursor-help text-gray-400" />
-                  </TooltipTrigger>
-                  <TooltipContent className="max-w-xs">
-                    <div>
-                      <p>
-                        The user getting permissions granted or denied. In Kafka, this user is known as the principal.
-                      </p>
-                      <ul className="mt-2 space-y-1 text-sm">
-                        <li>• Use the wildcard * to target all users.</li>
-                        <li>• Do not include the prefix. For example, use my-user instead of User:my-user.</li>
-                      </ul>
-                    </div>
-                  </TooltipContent>
-                </Tooltip>
-              </TooltipProvider>
-            </div>
-            <div className="grid grid-cols-4 gap-3">
-              <Select
-                disabled={edit}
-                onValueChange={(value) => {
-                  setPrincipalType(value);
-                  // Update the principal to include the new type
-                  const currentValue = parsePrincipal(sharedConfig.principal).name || '';
-                  setSharedConfig({
-                    ...sharedConfig,
-                    principal: `${value}:${currentValue}`,
-                  });
-                }}
-                value={principalType}
-              >
-                <SelectTrigger testId="shared-principal-type-select">
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value={RoleTypeUser}>User</SelectItem>
-                  {gbacEnabled && <SelectItem value={RoleTypeGroup}>Group</SelectItem>}
-                  <SelectItem value={RoleTypeRedpandaRole}>Redpanda role</SelectItem>
-                </SelectContent>
-              </Select>
-              <div className="col-span-3 gap-1">
-                <Input
-                  disabled={edit}
-                  id="principal"
-                  onChange={(e) =>
-                    setSharedConfig({
-                      ...sharedConfig,
-                      principal: `${principalType}:${e.target.value}`,
-                    })
-                  }
-                  placeholder="analytics-writer"
-                  testId="shared-principal-input"
-                  value={sharedConfig.principal.replace(PRINCIPAL_PREFIX_REGEX, '')}
-                />
-                {Boolean(principalError) && (
-                  <p className="text-red-600 text-sm" data-testid="principal-error">
-                    {principalError}
-                  </p>
-                )}
-              </div>
-            </div>
-          </CardField>
-        </CardForm>
-        <br />
-
-        <div className="space-y-6">
-          <div className="space-y-2">
-            <div className="flex items-center gap-1">
-              <Label className="font-medium text-gray-700 text-sm" htmlFor="host">
-                Host
-              </Label>
-              <TooltipProvider>
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <HelpCircle className="h-4 w-4 cursor-help text-gray-400" />
-                  </TooltipTrigger>
-                  <TooltipContent className="max-w-xs">
-                    <p>
-                      The IP address or hostname from which the user is allowed or denied access. Use * to allow from
-                      any host.
-                    </p>
-                  </TooltipContent>
-                </Tooltip>
-              </TooltipProvider>
-            </div>
-            <div className="flex gap-3">
-              <Select
-                disabled={edit}
-                onValueChange={(value) => {
-                  setHostType(value as HostType);
-                  if (value === HostTypeAllowAllHosts) {
-                    setSharedConfig({
-                      ...sharedConfig,
-                      host: '*',
-                    });
-                  }
-                }}
-                value={hostType}
-              >
-                <SelectTrigger
-                  className="w-48 focus:border-gray-500 focus:ring-gray-500/20"
-                  data-testid="shared-host-button"
-                >
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value={HostTypeAllowAllHosts}>Allow all hosts</SelectItem>
-                  <SelectItem value={HostTypeSpecificHost}>Specific IP addresses</SelectItem>
-                </SelectContent>
-              </Select>
-              {hostType === HostTypeSpecificHost && (
-                <Input
-                  className="flex-1 border-gray-300 focus:border-gray-500 focus:ring-gray-500"
-                  disabled={edit}
-                  id="host"
-                  onChange={(e) =>
-                    setSharedConfig({
-                      ...sharedConfig,
-                      host: e.target.value,
-                    })
-                  }
-                  placeholder="1.1.1.1"
-                  testId="shared-host-input"
-                  value={sharedConfig.host === '*' ? '' : sharedConfig.host}
-                />
-              )}
-            </div>
-          </div>
-        </div>
-      </CardContent>
-    </Card>
-  );
-};
-
-type CreateACLProps = {
-  onSubmit?: (principal: string, host: string, rules: Rule[]) => Promise<void>;
-  onCancel: () => void;
-  rules?: Rule[];
-  sharedConfig?: SharedConfig;
-  edit: boolean;
-  principalType?: PrincipalType;
-};
-
-export default function CreateACL({
-  onSubmit,
-  onCancel,
-  rules: propRules,
-  sharedConfig: propSharedConfig,
-  edit,
-  principalType,
-}: CreateACLProps) {
-  const schemaRegistryEnabled = useSupportedFeaturesStore((s) => s.schemaRegistryACLApi);
-  const [principalError, setPrincipalError] = useState<string>('');
-  const [sharedConfig, setSharedConfig] = useState({
-    principal: propSharedConfig?.principal ?? (principalType ? `${principalType}` : 'User:'),
-    host: propSharedConfig?.host ?? '*',
-  });
-
-  const ruleIdCounter = useRef(2);
-  const [rules, setRules] = useState<Rule[]>(
-    propRules ?? [
-      {
-        id: 1,
-        resourceType: ResourceTypeCluster,
-        mode: ModeCustom,
-        selectorType: ResourcePatternTypeAny,
-        selectorValue: '',
-        operations: {
-          ALTER: OperationTypeNotSet,
-          ALTER_CONFIGS: OperationTypeNotSet,
-          CLUSTER_ACTION: OperationTypeNotSet,
-          CREATE: OperationTypeNotSet,
-          DESCRIBE: OperationTypeNotSet,
-          DESCRIBE_CONFIGS: OperationTypeNotSet,
-          IDEMPOTENT_WRITE: OperationTypeNotSet,
-        },
-      },
-    ]
-  );
-
-  const isValidRule = rules.find((r) => Object.entries(r.operations).some(([, o]) => o !== OperationTypeNotSet));
-
-  useEffect(() => {
-    if (parsePrincipal(sharedConfig.principal).type) {
-      queueMicrotask(() => setPrincipalError(''));
-    }
-  }, [sharedConfig.principal]);
-
-  const addRule = () => {
-    // Determine the default resource type for new rules
-    let defaultResourceType = ResourceTypeCluster;
-    if (hasClusterRule()) {
-      defaultResourceType = ResourceTypeTopic;
-    }
-
-    const newRule = {
-      id: ruleIdCounter.current++,
-      resourceType: defaultResourceType as ResourceType,
-      mode: ModeCustom,
-      selectorType: ResourcePatternTypeAny,
-      selectorValue: '',
-      operations: getOperationsForResourceType(defaultResourceType),
-    };
-    setRules([...rules, newRule]);
-  };
-
-  const addAllowAllOperations = () => {
-    const resourceTypes = [
-      ResourceTypeCluster,
-      ResourceTypeTopic,
-      ResourceTypeConsumerGroup,
-      ResourceTypeTransactionalId,
-    ];
-
-    if (schemaRegistryEnabled) {
-      resourceTypes.push(ResourceTypeSubject, ResourceTypeSchemaRegistry);
-    }
-
-    const newRules: Rule[] = [];
-
-    resourceTypes.forEach((resourceType, index) => {
-      const operations = getOperationsForResourceType(resourceType);
-      const allowAllOperations = Object.fromEntries(Object.entries(operations).map(([op]) => [op, OperationTypeAllow]));
-
-      newRules.push({
-        id: Date.now() + index,
-        resourceType,
-        mode: ModeAllowAll,
-        selectorType: ResourcePatternTypeAny,
-        selectorValue: '',
-        operations: {
-          ...allowAllOperations,
-        },
-      });
-    });
-
-    setRules(newRules);
-  };
-
-  const removeRule = (id: number) => {
-    setRules(rules.filter((rule) => rule.id !== id));
-  };
-
-  const updateRule = (id: number, updates: Partial<Rule>) => {
-    setRules(rules.map((rule) => (rule.id === id ? { ...rule, ...updates } : rule)));
-  };
-
-  const handleResourceTypeChange = (ruleId: number, resourceType: ResourceType) => {
-    updateRule(ruleId, {
-      resourceType,
-      selectorType: ResourcePatternTypeAny,
-      selectorValue: '',
-      operations: getOperationsForResourceType(resourceType),
-      mode: ModeCustom,
-    } as Rule);
-  };
-
-  const hasClusterRule = () => rules.some((rule) => rule.resourceType === ResourceTypeCluster);
-
-  const isClusterDisabledForRule = (ruleId: number) => {
-    const currentRule = rules.find((rule) => rule.id === ruleId);
-    if (!currentRule) {
-      return false;
-    }
-
-    // If current rule is already cluster, don't disable it
-    if (currentRule.resourceType === ResourceTypeCluster) {
-      return false;
-    }
-
-    // If there's already a cluster rule, disable cluster for this rule
-    return hasClusterRule();
-  };
-
-  const hasSubjectRule = () => rules.some((rule) => rule.resourceType === ResourceTypeSubject);
-
-  const hasSchemaRegistryRule = () => rules.some((rule) => rule.resourceType === ResourceTypeSchemaRegistry);
-
-  const isSchemaRegistryDisabledForRule = (ruleId: number) => {
-    const currentRule = rules.find((rule) => rule.id === ruleId);
-    if (!currentRule) {
-      return false;
-    }
-
-    // If Schema Registry is not enabled, disable it for all rules except existing schema registry rules
-    if (!schemaRegistryEnabled && currentRule.resourceType !== ResourceTypeSchemaRegistry) {
-      return true;
-    }
-
-    // If current rule is already schemaRegistry, don't disable it
-    if (currentRule.resourceType === ResourceTypeSchemaRegistry) {
-      return false;
-    }
-
-    // If there's already a schemaRegistry rule, disable schemaRegistry for this rule
-    return hasSchemaRegistryRule();
-  };
-
-  const getSchemaRegistryTooltipText = () => {
-    if (!schemaRegistryEnabled) {
-      return 'Schema Registry is not enabled.';
-    }
-    return 'Only one schema registry rule is allowed. A schema registry rule already exists.';
-  };
-
-  const getSubjectTooltipText = () => {
-    if (!schemaRegistryEnabled) {
-      return 'Schema Registry is not enabled.';
-    }
-    return 'Only one subject rule is allowed. A subject rule already exists.';
-  };
-
-  const isSubjectDisabledForRule = (ruleId: number) => {
-    const currentRule = rules.find((rule) => rule.id === ruleId);
-    if (!currentRule) {
-      return false;
-    }
-
-    // If current rule is already subject, don't disable it
-    if (currentRule.resourceType === ResourceTypeSubject) {
-      return false;
-    }
-
-    // If schema registry is not enabled, disable subject
-    if (!schemaRegistryEnabled) {
-      return true;
-    }
-
-    // If there's already a subject rule, disable subject for this rule
-    return hasSubjectRule();
-  };
-
-  const handlePermissionModeChange = (ruleId: number, mode: string) => {
-    const rule = rules.find((r) => r.id === ruleId);
-    if (!rule) {
-      return;
-    }
-
-    const updatedOperations = Object.fromEntries(
-      Object.entries(rule.operations).map(([op, operationValue]) => {
-        let newValue: OperationType;
-        if (mode === ModeAllowAll) {
-          newValue = OperationTypeAllow;
-        } else if (mode === ModeDenyAll) {
-          newValue = OperationTypeDeny;
-        } else {
-          newValue = operationValue;
-        }
-        return [op, newValue];
-      })
-    ) as Record<string, OperationType>;
-
-    updateRule(ruleId, { mode: mode as ModeType, operations: updatedOperations });
-  };
-
-  const handleOperationChange = (ruleId: number, operation: string, value: string) => {
-    const rule = rules.find((r) => r.id === ruleId);
-    if (!rule) {
-      return;
-    }
-
-    const updatedOperations = {
-      ...rule.operations,
-      [operation]: value as OperationType,
-    };
-
-    // Check if the current mode should be switched to custom
-    let newMode = rule.mode;
-    if (rule.mode === ModeAllowAll && value !== OperationTypeAllow) {
-      newMode = ModeCustom;
-    } else if (rule.mode === ModeDenyAll && value !== OperationTypeDeny) {
-      newMode = ModeCustom;
-    }
-
-    updateRule(ruleId, {
-      operations: updatedOperations,
-      mode: newMode,
-    });
-  };
-
-  const getPermissionIcon = (value: string) => {
-    switch (value) {
-      case OperationTypeAllow:
-        return <Check className="h-4 w-4 text-green-600" />;
-      case OperationTypeDeny:
-        return <X className="h-4 w-4 text-red-600" />;
-      default:
-        return <Circle className="h-4 w-4 text-gray-400" />;
-    }
-  };
-
-  const getPermissionDescription = (operation: string, resourceType: string) => {
-    const descriptions: Record<string, Record<string, string>> = {
-      cluster: {
-        ALTER: 'Edit cluster-level configuration properties.\nAPIs: AlterConfigs, IncrementalAlterConfigs',
-        ALTER_CONFIGS: 'Edit cluster configuration properties.\nAPIs: AlterConfigs, IncrementalAlterConfigs',
-        CLUSTER_ACTION:
-          'Perform administrative operations on the cluster.\nAPIs: ControlledShutdown, LeaderAndIsr, UpdateMetadata, StopReplica, etc.',
-        CREATE: 'Create new topics and cluster-level resources.\nAPIs: CreateTopics, CreateAcls',
-        DESCRIBE: 'View cluster information and metadata.\nAPIs: DescribeCluster, DescribeConfigs',
-        DESCRIBE_CONFIGS: 'View cluster configuration properties.\nAPIs: DescribeConfigs',
-        IDEMPOTENT_WRITE:
-          'Perform idempotent write operations to ensure exactly-once delivery.\nAPIs: Produce (with idempotence)',
-      },
-      topic: {
-        ALTER: 'Edit topic configuration properties.\nAPIs: AlterConfigs, IncrementalAlterConfigs',
-        ALTER_CONFIGS: 'Edit topic configuration properties.\nAPIs: AlterConfigs, IncrementalAlterConfigs',
-        CREATE: 'Create new topics.\nAPIs: CreateTopics',
-        DELETE: 'Delete topics and their data.\nAPIs: DeleteTopics',
-        DESCRIBE: 'View topic metadata and information.\nAPIs: Metadata, ListOffsets, DescribeConfigs',
-        DESCRIBE_CONFIGS: 'View topic configuration properties.\nAPIs: DescribeConfigs',
-        READ: 'View messages from topics.\nAPIs: Fetch, OffsetFetch, ListOffsets',
-        WRITE: 'Produce messages to topics.\nAPIs: Produce',
-      },
-      consumerGroup: {
-        DELETE: 'Delete consumer groups.\nAPIs: DeleteGroups',
-        DESCRIBE: 'View consumer group information and metadata.\nAPIs: DescribeGroups, ListGroups',
-        READ: 'Join consumer groups and view messages.\nAPIs: JoinGroup, SyncGroup, Heartbeat, OffsetCommit, OffsetFetch',
-      },
-      transactionalId: {
-        DESCRIBE: 'View transactional ID information.\nAPIs: DescribeTransactions',
-        WRITE: 'Use transactional ID for exactly-once processing.\nAPIs: InitProducerId, AddPartitionsToTxn, EndTxn',
-      },
-      subject: {
-        READ: 'View schema subjects and their versions.\nAPIs: GET /subjects, GET /subjects/{subject}/versions',
-        WRITE: 'Create and update schema subjects.\nAPIs: POST /subjects/{subject}/versions',
-        REMOVE:
-          'Delete schema subjects and their versions.\nAPIs: DELETE /subjects/{subject}, DELETE /subjects/{subject}/versions/{version}',
-        DESCRIBE_CONFIGS: 'View subject-level configuration properties.\nAPIs: GET /config/{subject}',
-        ALTER_CONFIGS: 'Edit subject-level configuration properties.\nAPIs: PUT /config/{subject}',
-      },
-      schemaRegistry: {
-        DESCRIBE_CONFIGS: 'View Schema Registry configuration properties.\nAPIs: GET /config',
-        ALTER_CONFIGS: 'Edit Schema Registry configuration properties.\nAPIs: PUT /config',
-        DESCRIBE: 'View Schema Registry information and metadata.\nAPIs: GET /subjects, GET /schemas',
-        READ: 'View schemas from the Schema Registry.\nAPIs: GET /schemas/ids/{id}, GET /subjects/{subject}/versions/{version}/schema',
-      },
-    };
-
-    // Render newlines as <br /> in tooltips
-    const desc = descriptions[resourceType]?.[operation];
-    if (!desc) {
-      return 'Permission description not available';
-    }
-    return (
-      <>
-        {desc.split('\n').map((line) => (
-          <span key={line}>
-            {line}
-            <br />
-          </span>
-        ))}
-      </>
-    );
-  };
-
-  // Track open state for each matching section per rule and section type
-  const [openMatchingSections, setOpenMatchingSections] = useState<Record<string, boolean>>({});
-
-  // Helper to get a unique key for each rule and section type
-  const getSectionKey = (ruleId: number, section: string) => `${ruleId}-${section}`;
-
-  return (
-    <div className="relative min-h-screen pb-20">
-      {/* Page Header - Sticky */}
-
-      {/* Main Content */}
-      <main className="pb-6">
-        <div className="mx-auto">
-          <div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
-            {/* Left Column - Main Form */}
-            <div className="space-y-6 lg:col-span-2">
-              <p className="h-12 text-gray-600 text-sm">Configure access control rules for your Kafka resources.</p>
-
-              <SharedConfiguration
-                edit={edit}
-                getSectionKey={getSectionKey}
-                openMatchingSections={openMatchingSections}
-                principalError={principalError}
-                principalType={principalType}
-                setOpenMatchingSections={setOpenMatchingSections}
-                setSharedConfig={setSharedConfig}
-                sharedConfig={sharedConfig}
-              />
-
-              <AclRules
-                addAllowAllOperations={addAllowAllOperations}
-                addRule={addRule}
-                getPermissionDescription={getPermissionDescription}
-                getPermissionIcon={getPermissionIcon}
-                getSchemaRegistryTooltipText={getSchemaRegistryTooltipText}
-                getSectionKey={getSectionKey}
-                getSubjectTooltipText={getSubjectTooltipText}
-                handleOperationChange={handleOperationChange}
-                handlePermissionModeChange={handlePermissionModeChange}
-                handleResourceTypeChange={handleResourceTypeChange}
-                isClusterDisabledForRule={isClusterDisabledForRule}
-                isSchemaRegistryDisabledForRule={isSchemaRegistryDisabledForRule}
-                isSubjectDisabledForRule={isSubjectDisabledForRule}
-                openMatchingSections={openMatchingSections}
-                removeRule={removeRule}
-                rules={rules}
-                schemaRegistryEnabled={schemaRegistryEnabled}
-                setOpenMatchingSections={setOpenMatchingSections}
-                updateRule={updateRule}
-              />
-            </div>
-
-            {/* Right Column - Summary Card */}
-            <div className="lg:col-span-1">
-              <div className="sticky top-20">
-                <Summary rules={rules} sharedConfig={sharedConfig} />
-                <div className="mt-4 flex items-center gap-2">
-                  <Button
-                    data-testid="submit-acl-button"
-                    disabled={!!principalError || !isValidRule}
-                    onClick={() => {
-                      if (parsePrincipal(sharedConfig.principal).name) {
-                        onSubmit?.(sharedConfig.principal, sharedConfig.host, rules);
-                      } else {
-                        setPrincipalError('Principal is required');
-                      }
-                    }}
-                  >
-                    {edit ? 'Save' : 'Create'}
-                  </Button>
-                  <Button onClick={onCancel} variant="secondary-ghost">
-                    Cancel
-                  </Button>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </main>
-    </div>
-  );
-}
diff --git a/frontend/src/components/pages/acls/new-acl/host-selector.test.tsx b/frontend/src/components/pages/acls/new-acl/host-selector.test.tsx
deleted file mode 100644
index 9f9210ca7d..0000000000
--- a/frontend/src/components/pages/acls/new-acl/host-selector.test.tsx
+++ /dev/null
@@ -1,182 +0,0 @@
-/**
- * Copyright 2025 Redpanda Data, Inc.
- *
- * Use of this software is governed by the Business Source License
- * included in the file https://github.com/redpanda-data/redpanda/blob/dev/licenses/bsl.md
- *
- * As of the Change Date specified in that file, in accordance with
- * the Business Source License, use of this software will be governed
- * by the Apache License, Version 2.0
- */
-
-import { fireEvent, renderWithFileRoutes, screen, waitFor } from 'test-utils';
-
-import { HostSelector } from './host-selector';
-
-const MULTIPLE_HOSTS_PATTERN = /principal has ACLs configured for multiple hosts/i;
-
-describe('HostSelector', () => {
-  const defaultProps = {
-    principalName: 'test-user',
-    hosts: [
-      { sharedConfig: { principal: 'test-user', host: '192.168.1.1' }, rules: [] },
-      { sharedConfig: { principal: 'test-user', host: '192.168.1.2' }, rules: [] },
-      { sharedConfig: { principal: 'test-user', host: '192.168.1.3' }, rules: [] },
-    ],
-    baseUrl: '/security/acls/test-user/details',
-  };
-
-  describe('Rendering', () => {
-    test('should render card with title, description, and all host rows', () => {
-      renderWithFileRoutes(<HostSelector {...defaultProps} />);
-
-      // Verify title
-      expect(screen.getByText('Multiple hosts found')).toBeVisible();
-
-      // Verify principal name and description
-      expect(screen.getByTestId('host-selector-principal-name')).toBeVisible();
-      expect(screen.getByTestId('host-selector-principal-name')).toHaveTextContent('test-user');
-      expect(screen.getByTestId('host-selector-description')).toBeVisible();
-      expect(screen.getByTestId('host-selector-description')).toHaveTextContent(MULTIPLE_HOSTS_PATTERN);
-
-      // Verify all host values are visible
-      expect(screen.getByText('192.168.1.1')).toBeVisible();
-      expect(screen.getByText('192.168.1.2')).toBeVisible();
-      expect(screen.getByText('192.168.1.3')).toBeVisible();
-
-      // Verify each host has a row using testIds
-      expect(screen.getByTestId('host-selector-row-192.168.1.1')).toBeVisible();
-      expect(screen.getByTestId('host-selector-row-192.168.1.2')).toBeVisible();
-      expect(screen.getByTestId('host-selector-row-192.168.1.3')).toBeVisible();
-    });
-  });
-
-  describe('Table structure', () => {
-    test('should render table headers and display principal name and host value in each row', () => {
-      renderWithFileRoutes(<HostSelector {...defaultProps} />);
-
-      // Verify table headers
-      expect(screen.getByText('Principal')).toBeVisible();
-      expect(screen.getByText('Host')).toBeVisible();
-
-      // Check that each host has a corresponding principal name and host value with testIds
-      for (const host of defaultProps.hosts) {
-        const hostValue = host.sharedConfig.host;
-        expect(screen.getByTestId(`host-selector-principal-${hostValue}`)).toBeVisible();
-        expect(screen.getByTestId(`host-selector-principal-${hostValue}`)).toHaveTextContent('test-user');
-        expect(screen.getByTestId(`host-selector-host-${hostValue}`)).toBeVisible();
-        expect(screen.getByTestId(`host-selector-host-${hostValue}`)).toHaveTextContent(hostValue);
-      }
-    });
-  });
-
-  describe('Navigation', () => {
-    test('should navigate with correct query parameter when clicking a host row', async () => {
-      const { router } = renderWithFileRoutes(<HostSelector {...defaultProps} />);
-
-      const firstRow = screen.getByTestId('host-selector-row-192.168.1.1');
-      fireEvent.click(firstRow);
-
-      await waitFor(() => {
-        expect(router.state.location.pathname).toBe('/security/acls/test-user/details');
-        expect(router.state.location.search).toEqual({ host: '192.168.1.1' });
-      });
-    });
-
-    test('should navigate to different URLs when clicking different hosts', async () => {
-      const { router } = renderWithFileRoutes(<HostSelector {...defaultProps} />);
-
-      // Click first host
-      const firstRow = screen.getByTestId('host-selector-row-192.168.1.1');
-      fireEvent.click(firstRow);
-
-      await waitFor(() => {
-        expect(router.state.location.pathname).toBe('/security/acls/test-user/details');
-        expect(router.state.location.search).toEqual({ host: '192.168.1.1' });
-      });
-
-      // Click second host
-      const secondRow = screen.getByTestId('host-selector-row-192.168.1.2');
-      fireEvent.click(secondRow);
-
-      await waitFor(() => {
-        expect(router.state.location.pathname).toBe('/security/acls/test-user/details');
-        expect(router.state.location.search).toEqual({ host: '192.168.1.2' });
-      });
-    });
-
-    test('should properly handle host values with special characters', async () => {
-      const propsWithSpecialChars = {
-        ...defaultProps,
-        hosts: [
-          { sharedConfig: { principal: 'test-user', host: 'host@example.com' }, rules: [] },
-          { sharedConfig: { principal: 'test-user', host: '*.domain.com' }, rules: [] },
-          { sharedConfig: { principal: 'test-user', host: 'host with spaces' }, rules: [] },
-        ],
-      };
-
-      const { router } = renderWithFileRoutes(<HostSelector {...propsWithSpecialChars} />);
-
-      const row = screen.getByTestId('host-selector-row-host@example.com');
-      fireEvent.click(row);
-
-      await waitFor(() => {
-        expect(router.state.location.pathname).toBe('/security/acls/test-user/details');
-        expect(router.state.location.search).toEqual({ host: 'host@example.com' });
-      });
-    });
-
-    test('should use provided baseUrl correctly', async () => {
-      const customBaseUrl = '/security/roles/my-role/details';
-      const customProps = {
-        ...defaultProps,
-        baseUrl: customBaseUrl,
-      };
-
-      const { router } = renderWithFileRoutes(<HostSelector {...customProps} />);
-
-      const row = screen.getByTestId('host-selector-row-192.168.1.1');
-      fireEvent.click(row);
-
-      await waitFor(() => {
-        expect(router.state.location.pathname).toBe('/security/roles/my-role/details');
-        expect(router.state.location.search).toEqual({ host: '192.168.1.1' });
-      });
-    });
-  });
-
-  describe('Edge cases', () => {
-    test('should render with single host', () => {
-      const singleHostProps = {
-        ...defaultProps,
-        hosts: [{ sharedConfig: { principal: 'test-user', host: '192.168.1.1' }, rules: [] }],
-      };
-
-      renderWithFileRoutes(<HostSelector {...singleHostProps} />);
-
-      expect(screen.getByTestId('host-selector-row-192.168.1.1')).toBeVisible();
-      expect(screen.getByTestId('host-selector-host-192.168.1.1')).toHaveTextContent('192.168.1.1');
-    });
-
-    test('should render with many hosts', () => {
-      const manyHostsProps = {
-        ...defaultProps,
-        hosts: Array.from({ length: 10 }, (_, i) => ({
-          sharedConfig: { principal: 'test-user', host: `192.168.1.${i + 1}` },
-          rules: [],
-        })),
-      };
-
-      renderWithFileRoutes(<HostSelector {...manyHostsProps} />);
-
-      // Verify first and last host are present
-      expect(screen.getByTestId('host-selector-row-192.168.1.1')).toBeVisible();
-      expect(screen.getByTestId('host-selector-row-192.168.1.10')).toBeVisible();
-
-      // Verify all 10 rows exist
-      for (let i = 1; i <= 10; i++) {
-        expect(screen.getByTestId(`host-selector-row-192.168.1.${i}`)).toBeVisible();
-      }
-    });
-  });
-});
diff --git a/frontend/src/components/pages/acls/new-acl/host-selector.tsx b/frontend/src/components/pages/acls/new-acl/host-selector.tsx
deleted file mode 100644
index 20b78f8ad0..0000000000
--- a/frontend/src/components/pages/acls/new-acl/host-selector.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-/**
- * Copyright 2022 Redpanda Data, Inc.
- *
- * Use of this software is governed by the Business Source License
- * included in the file https://github.com/redpanda-data/redpanda/blob/dev/licenses/bsl.md
- *
- * As of the Change Date specified in that file, in accordance with
- * the Business Source License, use of this software will be governed
- * by the Apache License, Version 2.0
- */
-
-import { useNavigate } from '@tanstack/react-router';
-
-import type { AclDetail } from './acl.model';
-import { Card, CardContent, CardHeader, CardTitle } from '../../../redpanda-ui/components/card';
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../../../redpanda-ui/components/table';
-import { Text } from '../../../redpanda-ui/components/typography';
-
-type HostSelectorProps = {
-  principalName: string;
-  hosts: AclDetail[];
-  baseUrl: string;
-};
-
-export const HostSelector = ({ principalName, hosts, baseUrl }: HostSelectorProps) => {
-  const navigate = useNavigate();
-
-  return (
-    <div className="flex w-2/3 items-center">
-      <Card size={'full'}>
-        <CardHeader>
-          <CardTitle>Multiple hosts found</CardTitle>
-        </CardHeader>
-        <CardContent className={'flex flex-col gap-2'}>
-          <Text className="mb-4 text-gray-600" data-testid="host-selector-description">
-            This{' '}
-            <Text as="span" className={'font-bold'} data-testid="host-selector-principal-name">
-              {principalName}
-            </Text>{' '}
-            principal has ACLs configured for multiple hosts. Select a host to view its ACL configuration.
-          </Text>
-          <Table>
-            <TableHeader>
-              <TableRow>
-                <TableHead>Principal</TableHead>
-                <TableHead>Host</TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {hosts.map(({ sharedConfig: { host: hostValue } }) => (
-                <TableRow
-                  className="cursor-pointer hover:bg-gray-50"
-                  key={hostValue}
-                  onClick={() => {
-                    navigate({ to: baseUrl, search: { host: hostValue } });
-                  }}
-                  testId={`host-selector-row-${hostValue}`}
-                >
-                  <TableCell className="font-medium" testId={`host-selector-principal-${hostValue}`}>
-                    {principalName}
-                  </TableCell>
-                  <TableCell className="font-medium" testId={`host-selector-host-${hostValue}`}>
-                    {hostValue}
-                  </TableCell>
-                </TableRow>
-              ))}
-            </TableBody>
-          </Table>
-        </CardContent>
-      </Card>
-    </div>
-  );
-};
diff --git a/frontend/src/components/pages/acls/new-acl/operations-badge.tsx b/frontend/src/components/pages/acls/new-acl/operations-badge.tsx
deleted file mode 100644
index 9cb8b4fd33..0000000000
--- a/frontend/src/components/pages/acls/new-acl/operations-badge.tsx
+++ /dev/null
@@ -1,106 +0,0 @@
-/**
- * Copyright 2025 Redpanda Data, Inc.
- *
- * Use of this software is governed by the Business Source License
- * included in the file https://github.com/redpanda-data/redpanda/blob/dev/licenses/bsl.md
- *
- * As of the Change Date specified in that file, in accordance with
- * the Business Source License, use of this software will be governed
- * by the Apache License, Version 2.0
- */
-
-import {
-  formatLabel,
-  getIdFromRule,
-  getOperationsForResourceType,
-  getPluralResourceName,
-  getResourceName,
-  type OperationType,
-  type Rule,
-} from './acl.model';
-
-type OperationsBadgesProps = {
-  rule: Rule;
-  showResourceDescription?: boolean;
-};
-
-type PermissionBadgeProps = {
-  isAllow: boolean;
-  children: React.ReactNode;
-  testId?: string;
-};
-
-const PermissionBadge = ({ isAllow, children, testId }: PermissionBadgeProps) => {
-  const colorClasses = isAllow ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800';
-
-  return (
-    <span
-      className={`inline-flex items-center rounded-full px-2 py-1 font-medium text-xs ${colorClasses}`}
-      data-testid={testId}
-    >
-      {children}
-    </span>
-  );
-};
-
-// biome-ignore lint/complexity/noExcessiveCognitiveComplexity: complex business logic
-export const OperationsBadge = ({ rule, showResourceDescription = true }: OperationsBadgesProps) => {
-  const enabledOperations = Object.entries(rule.operations).map(([op, value]: [string, OperationType]) => ({
-    name: formatLabel(op),
-    originName: op,
-    value,
-  }));
-
-  // Check if all operations have the same permission
-  const availableRules = Object.entries(getOperationsForResourceType(rule.resourceType)).length;
-  const allAllow =
-    enabledOperations.length > 0 &&
-    availableRules === enabledOperations.length &&
-    enabledOperations.every((op) => op.value === 'allow');
-  const allDeny =
-    enabledOperations.length > 0 &&
-    availableRules === enabledOperations.length &&
-    enabledOperations.every((op) => op.value === 'deny');
-  const showSummary = allAllow || allDeny;
-
-  // Generate resource description text
-  let resourceText = '';
-  if (showResourceDescription) {
-    if (rule.resourceType === 'cluster' || rule.resourceType === 'schemaRegistry') {
-      resourceText = getResourceName(rule.resourceType);
-    } else if (rule.selectorType === 'any') {
-      resourceText = `All ${getPluralResourceName(rule.resourceType)}`;
-    } else {
-      const matchType = rule.selectorType === 'literal' ? 'matching' : 'starting with';
-      resourceText = `${getPluralResourceName(rule.resourceType)} ${matchType}: "${rule.selectorValue}"`;
-    }
-    resourceText = resourceText.charAt(0).toUpperCase() + resourceText.slice(1);
-  }
-
-  return (
-    <div className="space-y-3">
-      {Boolean(showResourceDescription) && <div className="font-medium text-gray-900">{resourceText}</div>}
-      <div>
-        {enabledOperations.length === 0 ? (
-          <span className="text-gray-400 text-xs italic">No operations configured</span>
-        ) : (
-          <div className="flex flex-wrap gap-2">
-            {showSummary ? (
-              <PermissionBadge isAllow={allAllow}>{allAllow ? 'Allow all' : 'Deny all'}</PermissionBadge>
-            ) : (
-              enabledOperations.map((op) => (
-                <PermissionBadge
-                  isAllow={op.value === 'allow'}
-                  key={op.name}
-                  testId={`detail-item-op-${getIdFromRule(rule, op.originName, op.value)}`}
-                >
-                  {op.name}: {op.value}
-                </PermissionBadge>
-              ))
-            )}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};
diff --git a/frontend/src/components/pages/acls/new-acl/principal-utils.test.ts b/frontend/src/components/pages/acls/new-acl/principal-utils.test.ts
deleted file mode 100644
index 7389048063..0000000000
--- a/frontend/src/components/pages/acls/new-acl/principal-utils.test.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-/**
- * Copyright 2026 Redpanda Data, Inc.
- *
- * Use of this software is governed by the Business Source License
- * included in the file https://github.com/redpanda-data/redpanda/blob/dev/licenses/bsl.md
- *
- * As of the Change Date specified in that file, in accordance with
- * the Business Source License, use of this software will be governed
- * by the Apache License, Version 2.0
- */
-
-import { describe, expect, test } from 'vitest';
-
-import { parsePrincipalFromParam } from './principal-utils';
-
-describe('parsePrincipalFromParam', () => {
-  test('bare name defaults to User principal type', () => {
-    expect(parsePrincipalFromParam('alice')).toEqual({ principalType: 'User', principalName: 'alice' });
-  });
-
-  test('User: prefix is parsed correctly', () => {
-    expect(parsePrincipalFromParam('User:alice')).toEqual({ principalType: 'User', principalName: 'alice' });
-  });
-
-  test('Group: prefix is parsed correctly', () => {
-    expect(parsePrincipalFromParam('Group:mygroup')).toEqual({ principalType: 'Group', principalName: 'mygroup' });
-  });
-
-  test('RedpandaRole: prefix is parsed correctly', () => {
-    expect(parsePrincipalFromParam('RedpandaRole:some-role')).toEqual({
-      principalType: 'RedpandaRole',
-      principalName: 'some-role',
-    });
-  });
-
-  test('only the first colon is used as the separator', () => {
-    expect(parsePrincipalFromParam('User:alice:with:colons')).toEqual({
-      principalType: 'User',
-      principalName: 'alice:with:colons',
-    });
-  });
-
-  test('Group with colon in name uses first colon as separator', () => {
-    expect(parsePrincipalFromParam('Group:team:a')).toEqual({ principalType: 'Group', principalName: 'team:a' });
-  });
-});
diff --git a/frontend/src/components/pages/acls/new-acl/principal-utils.ts b/frontend/src/components/pages/acls/new-acl/principal-utils.ts
deleted file mode 100644
index 381b317f89..0000000000
--- a/frontend/src/components/pages/acls/new-acl/principal-utils.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-/**
- * Copyright 2026 Redpanda Data, Inc.
- *
- * Use of this software is governed by the Business Source License
- * included in the file https://github.com/redpanda-data/redpanda/blob/dev/licenses/bsl.md
- *
- * As of the Change Date specified in that file, in accordance with
- * the Business Source License, use of this software will be governed
- * by the Apache License, Version 2.0
- */
-
-/**
- * Parses a principal from a route parameter.
- * aclName may be a full principal like "Group:mygroup" or just a bare name (defaults to User).
- */
-export function parsePrincipalFromParam(aclName: string): { principalType: string; principalName: string } {
-  const colonIdx = aclName.indexOf(':');
-  if (colonIdx >= 0) {
-    return { principalType: aclName.slice(0, colonIdx), principalName: aclName.slice(colonIdx + 1) };
-  }
-  return { principalType: 'User', principalName: aclName };
-}
diff --git a/frontend/src/components/pages/acls/operation.tsx b/frontend/src/components/pages/acls/operation.tsx
deleted file mode 100644
index 5fa62b850f..0000000000
--- a/frontend/src/components/pages/acls/operation.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-/**
- * Copyright 2022 Redpanda Data, Inc.
- *
- * Use of this software is governed by the Business Source License
- * included in the file https://github.com/redpanda-data/redpanda/blob/dev/licenses/bsl.md
- *
- * As of the Change Date specified in that file, in accordance with
- * the Business Source License, use of this software will be governed
- * by the Apache License, Version 2.0
- */
-
-import { Flex } from '@redpanda-data/ui';
-import { CheckIcon, CloseIcon, MinusIcon } from 'components/icons';
-import type { CSSProperties, FC, ReactElement, ReactNode } from 'react';
-
-import { AclOperation, type AclOperationType, type AclStrPermission } from '../../../state/rest-interfaces';
-import { Label } from '../../../utils/tsx-utils';
-import { SingleSelect } from '../../misc/select';
-
-const icons = {
-  minus: <MinusIcon color="grey" />,
-  check: <CheckIcon color="green" />,
-  cross: <CloseIcon color="red" />,
-};
-
-const OptionContent: FC<{
-  children: ReactNode;
-  icon: ReactElement;
-}> = ({ children, icon }) => (
-  <Flex alignItems="center" gap={2} pointerEvents="none">
-    {icon}
-    <span>{children}</span>
-  </Flex>
-);
-
-export const Operation = (p: {
-  operation: string | AclOperationType;
-  value: AclStrPermission;
-  disabled?: boolean;
-  onChange: (v: AclStrPermission) => void;
-  style?: CSSProperties;
-}) => {
-  const disabled = p.disabled ?? false;
-
-  const operationName =
-    typeof p.operation === 'string'
-      ? p.operation
-      : Object.keys(AclOperation).find((key) => AclOperation[key as keyof typeof AclOperation] === p.operation) ||
-        'Unknown';
-
-  return (
-    <Label text={operationName}>
-      <SingleSelect<AclStrPermission>
-        components={{
-          DropdownIndicator: null,
-        }}
-        isDisabled={disabled}
-        onChange={p.onChange}
-        options={[
-          {
-            value: 'Any',
-            label: <OptionContent icon={icons.minus}>Not set</OptionContent>,
-          },
-          {
-            value: 'Allow',
-            label: <OptionContent icon={icons.check}>Allow</OptionContent>,
-          },
-          {
-            value: 'Deny',
-            label: <OptionContent icon={icons.cross}>Deny</OptionContent>,
-          },
-        ]}
-        value={p.value}
-      />
-    </Label>
-  );
-};
diff --git a/frontend/src/components/pages/acls/principal-group-editor.tsx b/frontend/src/components/pages/acls/principal-group-editor.tsx
deleted file mode 100644
index 79339f7ce2..0000000000
--- a/frontend/src/components/pages/acls/principal-group-editor.tsx
+++ /dev/null
@@ -1,150 +0,0 @@
-/**
- * Copyright 2022 Redpanda Data, Inc.
- *
- * Use of this software is governed by the Business Source License
- * included in the file https://github.com/redpanda-data/redpanda/blob/dev/licenses/bsl.md
- *
- * As of the Change Date specified in that file, in accordance with
- * the Business Source License, use of this software will be governed
- * by the Apache License, Version 2.0
- */
-
-'use no memo';
-
-import { Box, Button, Flex, FormField, Grid, Icon, Input, InputGroup, InputLeftAddon, Text } from '@redpanda-data/ui';
-import { TrashIcon } from 'components/icons';
-
-import type { ResourceACLs } from './models';
-import { Operation } from './operation';
-import { AclOperation, type AclStrResourceType } from '../../../state/rest-interfaces';
-import { Label } from '../../../utils/tsx-utils';
-import { SingleSelect } from '../../misc/select';
-
-export const ResourceACLsEditor = (p: {
-  resource: ResourceACLs;
-  resourceType: AclStrResourceType;
-  setIsFormValid: (isValid: boolean) => void;
-  onDelete?: () => void;
-  onChange: (resource: ResourceACLs) => void;
-}) => {
-  const res = p.resource;
-  if (!res) {
-    // Happens for clusterAcls?
-    return null;
-  }
-
-  const isCluster = !('selector' in res);
-  const isAllSet = res.all === 'Allow' || res.all === 'Deny';
-
-  let resourceName = 'Cluster';
-  if (p.resourceType === 'Topic') {
-    resourceName = 'Topic';
-  }
-  if (p.resourceType === 'Group') {
-    resourceName = 'Consumer Group';
-  }
-  if (p.resourceType === 'TransactionalID') {
-    resourceName = 'Transactional ID';
-  }
-
-  const isInvalid =
-    (!isCluster && res.patternType === 'Literal' && res.selector === '') ||
-    (!isCluster && res.patternType === 'Prefixed' && res.selector === '');
-
-  const errorText = 'Selector cannot be empty';
-  p.setIsFormValid(!isInvalid);
-
-  return (
-    <Flex
-      border="1px solid"
-      borderColor="gray.300"
-      borderRadius="md"
-      boxShadow="0px 1px 2px 0px #0000000F"
-      flexDirection="row"
-      gap={5}
-    >
-      <Flex flexDirection="column" flexGrow={1} gap={10} p={6}>
-        {isCluster ? (
-          <Text fontWeight={600} whiteSpace="nowrap">
-            Applies to whole cluster
-          </Text>
-        ) : (
-          <FormField errorText={errorText} isInvalid={isInvalid} label={`Selector (${resourceName} Name)`}>
-            <InputGroup data-testid={`${resourceName}-input-group`} zIndex={1}>
-              <InputLeftAddon padding="0px" width="124px">
-                <SingleSelect<'Any' | 'Literal' | 'Prefixed'>
-                  chakraStyles={{
-                    container: () => ({
-                      flexGrow: 1,
-                      marginLeft: '-1px',
-                      marginRight: '-1px',
-                      cursor: 'pointer',
-                    }),
-                  }}
-                  isSearchable={false}
-                  onChange={(e) => {
-                    p.onChange({ ...res, patternType: e, selector: e === 'Any' ? '*' : '' } as ResourceACLs);
-                  }}
-                  options={[
-                    { value: 'Any', label: 'Any' },
-                    { value: 'Literal', label: 'Literal' },
-                    { value: 'Prefixed', label: 'Prefixed' },
-                  ]}
-                  value={res.patternType as 'Any' | 'Literal' | 'Prefixed'}
-                />
-              </InputLeftAddon>
-              <Input
-                data-testid={`${resourceName}-selector`}
-                isDisabled={res.patternType === 'Any'}
-                onChange={(e) => {
-                  p.onChange({ ...res, selector: e.target.value } as ResourceACLs);
-                }}
-                spellCheck={false}
-                value={res.selector}
-              />
-            </InputGroup>
-          </FormField>
-        )}
-
-        <Label style={{ width: '100%' }} text="Operations">
-          <Grid gap={6} templateColumns="repeat(auto-fill, minmax(125px, 1fr))" width="full">
-            <Operation
-              onChange={(perm) => {
-                p.onChange({ ...res, all: perm });
-              }}
-              operation={AclOperation.All}
-              value={res.all}
-            />
-
-            {Object.entries(res.permissions)
-              .sort(([op1], [op2]) => op1.localeCompare(op2))
-              .map(([operation, permission]) => (
-                <Operation
-                  data-testid={`${resourceName}-${operation}`}
-                  disabled={isAllSet}
-                  key={operation}
-                  onChange={(perm) => {
-                    p.onChange({
-                      ...res,
-                      permissions: { ...(res.permissions as Record<string, unknown>), [operation]: perm },
-                    } as ResourceACLs);
-                  }}
-                  operation={operation}
-                  value={isAllSet ? res.all : permission}
-                />
-              ))}
-          </Grid>
-        </Label>
-      </Flex>
-
-      {Boolean(p.onDelete) && (
-        <Flex>
-          <Box alignSelf="center" bg="gray.300" height="80%" width="1px" />
-          <Button alignSelf="center" mx={2} onClick={p.onDelete} variant="destructive-ghost">
-            <Icon as={TrashIcon} fontSize="22px" />
-          </Button>
-        </Flex>
-      )}
-    </Flex>
-  );
-};
diff --git a/frontend/src/components/pages/acls/role-create.tsx b/frontend/src/components/pages/acls/role-create.tsx
deleted file mode 100644
index 240ffab751..0000000000
--- a/frontend/src/components/pages/acls/role-create.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-/**
- * Copyright 2022 Redpanda Data, Inc.
- *
- * Use of this software is governed by the Business Source License
- * included in the file https://github.com/redpanda-data/redpanda/blob/dev/licenses/bsl.md
- *
- * As of the Change Date specified in that file, in accordance with
- * the Business Source License, use of this software will be governed
- * by the Apache License, Version 2.0
- */
-
-import { Text } from '@redpanda-data/ui';
-
-import { RoleForm } from './role-form';
-import { appGlobal } from '../../../state/app-global';
-import { api, rolesApi } from '../../../state/backend-api';
-import { DefaultSkeleton } from '../../../utils/tsx-utils';
-import PageContent from '../../misc/page-content';
-import { PageComponent, type PageInitHelper } from '../page';
-
-class RoleCreatePage extends PageComponent {
-  initPage(p: PageInitHelper): void {
-    p.title = 'Create role';
-    p.addBreadcrumb('Access Control', '/security');
-    p.addBreadcrumb('Roles', '/security/roles');
-    p.addBreadcrumb('Create role', '/security/roles/create');
-
-    // biome-ignore lint/suspicious/noConsole: error logging for unhandled promise rejections
-    this.refreshData().catch(console.error);
-    // biome-ignore lint/suspicious/noConsole: error logging for unhandled promise rejections
-    appGlobal.onRefresh = () => this.refreshData().catch(console.error);
-  }
-
-  async refreshData() {
-    await Promise.allSettled([api.refreshServiceAccounts(), rolesApi.refreshRoles()]);
-  }
-
-  render() {
-    if (!api.serviceAccounts?.users) {
-      return DefaultSkeleton;
-    }
-
-    return (
-      <PageContent>
-        <Text my={4}>
-          A role is a named collection of ACLs which may have users (security principals) assigned to it. You can assign
-          any number of roles to a given user.
-        </Text>
-        <RoleForm />
-      </PageContent>
-    );
-  }
-}
-
-export default RoleCreatePage;
diff --git a/frontend/src/components/pages/acls/role-edit-page.tsx b/frontend/src/components/pages/acls/role-edit-page.tsx
deleted file mode 100644
index dd68fc73d8..0000000000
--- a/frontend/src/components/pages/acls/role-edit-page.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-/**
- * Copyright 2022 Redpanda Data, Inc.
- *
- * Use of this software is governed by the Business Source License
- * included in the file https://github.com/redpanda-data/redpanda/blob/dev/licenses/bsl.md
- *
- * As of the Change Date specified in that file, in accordance with
- * the Business Source License, use of this software will be governed
- * by the Apache License, Version 2.0
- */
-
-import { useEffect, useState } from 'react';
-
-import { principalGroupsView } from './models';
-import { RoleForm } from './role-form';
-import { appGlobal } from '../../../state/app-global';
-import { api, rolesApi } from '../../../state/backend-api';
-import { AclRequestDefault } from '../../../state/rest-interfaces';
-import { DefaultSkeleton } from '../../../utils/tsx-utils';
-import PageContent from '../../misc/page-content';
-import { PageComponent, type PageInitHelper } from '../page';
-
-async function refreshEditData(force: boolean) {
-  if (api.userData !== null && api.userData !== undefined && !api.userData.canListAcls) {
-    return;
-  }
-
-  await Promise.allSettled([
-    api.refreshAcls(AclRequestDefault, force),
-    api.refreshServiceAccounts(),
-    rolesApi.refreshRoles(),
-    rolesApi.refreshRoleMembers(),
-  ]);
-}
-
-class RoleEditPage extends PageComponent<{ roleName: string }> {
-  initPage(p: PageInitHelper): void {
-    const roleName = decodeURIComponent(this.props.roleName);
-    p.title = 'Edit role';
-    p.addBreadcrumb('Access Control', '/security');
-    p.addBreadcrumb('Roles', '/security/roles');
-    p.addBreadcrumb(roleName, `/security/roles/${encodeURIComponent(this.props.roleName)}`);
-
-    // biome-ignore lint/suspicious/noConsole: error logging for unhandled promise rejections
-    refreshEditData(true).catch(console.error);
-    // biome-ignore lint/suspicious/noConsole: error logging for unhandled promise rejections
-    appGlobal.onRefresh = () => refreshEditData(true).catch(console.error);
-  }
-
-  render() {
-    return <RoleEditPageContent roleName={this.props.roleName} />;
-  }
-}
-
-const RoleEditPageContent = ({ roleName: encodedRoleName }: { roleName: string }) => {
-  const roleName = decodeURIComponent(encodedRoleName);
-  const [allDataLoaded, setAllDataLoaded] = useState(false);
-
-  useEffect(() => {
-    refreshEditData(true)
-      .then(() => setAllDataLoaded(true))
-      // biome-ignore lint/suspicious/noConsole: error logging for unhandled promise rejections
-      .catch(console.error);
-  }, []);
-
-  if (!allDataLoaded) {
-    return DefaultSkeleton;
-  }
-
-  const aclPrincipalGroup = principalGroupsView.principalGroups.find(
-    ({ principalType, principalName }) => principalType === 'RedpandaRole' && principalName === roleName
-  );
-
-  const principals = rolesApi.roleMembers.get(roleName);
-
-  return (
-    <PageContent>
-      <RoleForm
-        initialData={{
-          roleName,
-          topicACLs: aclPrincipalGroup?.topicAcls ?? [],
-          consumerGroupsACLs: aclPrincipalGroup?.consumerGroupAcls ?? [],
-          clusterACLs: aclPrincipalGroup?.clusterAcls,
-          transactionalIDACLs: aclPrincipalGroup?.transactionalIdAcls ?? [],
-          host: aclPrincipalGroup?.host ?? '',
-          principals: principals ?? [],
-        }}
-      />
-    </PageContent>
-  );
-};
-
-export default RoleEditPage;
diff --git a/frontend/src/components/pages/acls/role-form.tsx b/frontend/src/components/pages/acls/role-form.tsx
deleted file mode 100644
index b56c10413e..0000000000
--- a/frontend/src/components/pages/acls/role-form.tsx
+++ /dev/null
@@ -1,494 +0,0 @@
-/**
- * Copyright 2022 Redpanda Data, Inc.
- *
- * Use of this software is governed by the Business Source License
- * included in the file https://github.com/redpanda-data/redpanda/blob/dev/licenses/bsl.md
- *
- * As of the Change Date specified in that file, in accordance with
- * the Business Source License, use of this software will be governed
- * by the Apache License, Version 2.0
- */
-
-'use no memo';
-
-import { useNavigate } from '@tanstack/react-router';
-import { Button } from 'components/redpanda-ui/components/button';
-import { Combobox } from 'components/redpanda-ui/components/combobox';
-import { Field, FieldDescription, FieldError, FieldLabel } from 'components/redpanda-ui/components/field';
-import { Input } from 'components/redpanda-ui/components/input';
-import { Heading } from 'components/redpanda-ui/components/typography';
-import { X } from 'lucide-react';
-import { useEffect, useMemo, useState } from 'react';
-import { toast } from 'sonner';
-
-import {
-  type AclPrincipalGroup,
-  type ClusterACLs,
-  type ConsumerGroupACLs,
-  createEmptyClusterAcl,
-  createEmptyConsumerGroupAcl,
-  createEmptyTopicAcl,
-  createEmptyTransactionalIdAcl,
-  principalGroupsView,
-  type TopicACLs,
-  type TransactionalIdACLs,
-  unpackPrincipalGroup,
-} from './models';
-import { ResourceACLsEditor } from './principal-group-editor';
-import { appGlobal } from '../../../state/app-global';
-import { api, type RolePrincipal, rolesApi, useApiStoreHook } from '../../../state/backend-api';
-import type { AclStrOperation, AclStrResourceType } from '../../../state/rest-interfaces';
-
-type CreateRoleFormState = {
-  roleName: string;
-  allowAllOperations: boolean;
-  host: string;
-  topicACLs: TopicACLs[];
-  consumerGroupsACLs: ConsumerGroupACLs[];
-  transactionalIDACLs: TransactionalIdACLs[];
-  clusterACLs: ClusterACLs;
-  principals: RolePrincipal[];
-};
-
-type RoleFormProps = {
-  initialData?: Partial<CreateRoleFormState>;
-};
-
-export const RoleForm = ({ initialData }: RoleFormProps) => {
-  const navigate = useNavigate();
-  const [formState, setFormState] = useState<CreateRoleFormState>(() => {
-    const initial: CreateRoleFormState = {
-      roleName: '',
-      allowAllOperations: false,
-      host: '',
-      topicACLs: [createEmptyTopicAcl()],
-      consumerGroupsACLs: [createEmptyConsumerGroupAcl()],
-      transactionalIDACLs: [createEmptyTransactionalIdAcl()],
-      clusterACLs: createEmptyClusterAcl(),
-      principals: [],
-      ...initialData,
-    };
-    if (!initial.clusterACLs) {
-      initial.clusterACLs = createEmptyClusterAcl();
-    }
-    return initial;
-  });
-
-  const [isFormValid, setIsFormValid] = useState(true);
-  const [isLoading, setIsLoading] = useState(false);
-
-  const originalPrincipals = useMemo(() => initialData?.principals ?? [], [initialData?.principals]);
-  const editMode: boolean = Boolean(initialData?.roleName);
-
-  const roleNameAlreadyExist = rolesApi.roles.includes(formState.roleName) && !editMode;
-
-  const handleSubmit = async () => {
-    setIsLoading(true);
-    const principalsToRemove = originalPrincipals.filter(
-      (op) => !formState.principals.some((cp) => cp.principalType === op.principalType && cp.name === op.name)
-    );
-    const principalType: AclStrResourceType = 'RedpandaRole';
-    const isEditMode = editMode;
-    const roleName = formState.roleName;
-    const aclPrincipalGroup: AclPrincipalGroup = {
-      principalType: 'RedpandaRole',
-      principalName: roleName,
-      host: formState.host,
-      topicAcls: formState.topicACLs,
-      consumerGroupAcls: formState.consumerGroupsACLs,
-      transactionalIdAcls: formState.transactionalIDACLs,
-      clusterAcls: formState.clusterACLs,
-      sourceEntries: [],
-    };
-    const deleteAclsArgs = isEditMode
-      ? {
-          resourceType: 'Any' as const,
-          resourceName: undefined,
-          principal: `${principalType}:${roleName}`,
-          resourcePatternType: 'Any' as const,
-          operation: 'Any' as const,
-          permissionType: 'Any' as const,
-        }
-      : null;
-    const actionLabel = isEditMode ? 'updated' : 'created';
-    const deleteAclsPromise = deleteAclsArgs ? api.deleteACLs(deleteAclsArgs) : Promise.resolve();
-    let newRoleResult: Awaited<ReturnType<typeof rolesApi.updateRoleMembership>> | null = null;
-    try {
-      await deleteAclsPromise;
-      newRoleResult = await rolesApi.updateRoleMembership(roleName, formState.principals, principalsToRemove, true);
-    } catch (err) {
-      toast.error(`Failed to update role ${formState.roleName}`, { description: String(err) });
-      setIsLoading(false);
-      return;
-    }
-
-    const roleResponse = newRoleResult ? newRoleResult.response : null;
-    if (roleResponse) {
-      const unpackedPrincipalGroup = unpackPrincipalGroup(aclPrincipalGroup);
-      const aclCreatePromises = unpackedPrincipalGroup.map((aclFlat) =>
-        api.createACL({
-          host: aclFlat.host,
-          principal: aclFlat.principal,
-          resourceType: aclFlat.resourceType,
-          resourceName: aclFlat.resourceName,
-          resourcePatternType: aclFlat.resourcePatternType as unknown as 'Literal' | 'Prefixed',
-          operation: aclFlat.operation as unknown as Exclude<AclStrOperation, 'Unknown' | 'Any'>,
-          permissionType: aclFlat.permissionType as unknown as 'Allow' | 'Deny',
-        })
-      );
-      try {
-        await Promise.all(aclCreatePromises);
-      } catch (err) {
-        toast.error(`Failed to update role ${formState.roleName}`, { description: String(err) });
-        setIsLoading(false);
-        return;
-      }
-      setIsLoading(false);
-      toast.success(`Role ${roleResponse.roleName} successfully ${actionLabel}`);
-      navigate({ to: `/security/roles/${encodeURIComponent(roleResponse.roleName)}/details` });
-    }
-  };
-
-  return (
-    <div>
-      <div>
-        <div className="flex flex-col gap-10">
-          <div className="flex flex-row gap-20">
-            <div>
-              <Field>
-                <FieldLabel>Role name</FieldLabel>
-                <Input
-                  className="w-[300px]"
-                  data-testid="create-role__role-name"
-                  disabled={editMode}
-                  onChange={(v) => {
-                    setFormState((prev) => ({ ...prev, roleName: v.target.value }));
-                  }}
-                  pattern="^[^,=]+$"
-                  required
-                  title="Please avoid using commas or equal signs."
-                  value={formState.roleName}
-                />
-                {roleNameAlreadyExist && <FieldError>Role name already exist</FieldError>}
-              </Field>
-            </div>
-
-            <Button
-              className="self-end"
-              data-testid="roles-allow-all-operations"
-              onClick={() => {
-                setFormState((prev) => {
-                  const topicACLs = prev.topicACLs.length === 0 ? [createEmptyTopicAcl()] : [...prev.topicACLs];
-                  topicACLs[0] = { ...topicACLs[0], selector: '*', all: 'Allow' };
-
-                  const consumerGroupsACLs =
-                    prev.consumerGroupsACLs.length === 0
-                      ? [createEmptyConsumerGroupAcl()]
-                      : [...prev.consumerGroupsACLs];
-                  consumerGroupsACLs[0] = { ...consumerGroupsACLs[0], selector: '*', all: 'Allow' };
-
-                  const transactionalIDACLs =
-                    prev.transactionalIDACLs.length === 0
-                      ? [createEmptyTransactionalIdAcl()]
-                      : [...prev.transactionalIDACLs];
-                  transactionalIDACLs[0] = { ...transactionalIDACLs[0], selector: '*', all: 'Allow' };
-
-                  return {
-                    ...prev,
-                    topicACLs,
-                    consumerGroupsACLs,
-                    transactionalIDACLs,
-                    clusterACLs: { ...prev.clusterACLs, all: 'Allow' },
-                  };
-                });
-              }}
-              variant="outline"
-            >
-              Allow all operations
-            </Button>
-          </div>
-
-          <Field>
-            <FieldLabel>Host</FieldLabel>
-            <FieldDescription>
-              The host the user needs to connect from in order for the permissions to apply.
-            </FieldDescription>
-            <Input
-              className="w-[600px]"
-              onChange={(v) => {
-                setFormState((prev) => ({ ...prev, host: v.target.value }));
-              }}
-              value={formState.host}
-            />
-          </Field>
-
-          <div className="flex flex-col gap-4" data-testid="create-role-topics-section">
-            <Heading level={3}>Topics</Heading>
-            {formState.topicACLs.map((topicACL, index) => (
-              <ResourceACLsEditor
-                key={topicACL._key}
-                onChange={(updated) =>
-                  setFormState((prev) => ({
-                    ...prev,
-                    topicACLs: prev.topicACLs.map((t, i) => (i === index ? (updated as TopicACLs) : t)),
-                  }))
-                }
-                onDelete={() => {
-                  setFormState((prev) => ({
-                    ...prev,
-                    topicACLs: prev.topicACLs.filter((_, i) => i !== index),
-                  }));
-                }}
-                resource={topicACL}
-                resourceType="Topic"
-                setIsFormValid={setIsFormValid}
-              />
-            ))}
-
-            <div>
-              <Button
-                onClick={() => {
-                  setFormState((prev) => ({ ...prev, topicACLs: [...prev.topicACLs, createEmptyTopicAcl()] }));
-                }}
-                variant="outline"
-              >
-                Add Topic ACL
-              </Button>
-            </div>
-          </div>
-
-          <div className="flex flex-col gap-4" data-testid="create-role-consumer-groups-section">
-            <Heading level={3}>Consumer Groups</Heading>
-            {formState.consumerGroupsACLs.map((acl, index) => (
-              <ResourceACLsEditor
-                key={acl._key}
-                onChange={(updated) =>
-                  setFormState((prev) => ({
-                    ...prev,
-                    consumerGroupsACLs: prev.consumerGroupsACLs.map((t, i) =>
-                      i === index ? (updated as ConsumerGroupACLs) : t
-                    ),
-                  }))
-                }
-                onDelete={() => {
-                  setFormState((prev) => ({
-                    ...prev,
-                    consumerGroupsACLs: prev.consumerGroupsACLs.filter((_, i) => i !== index),
-                  }));
-                }}
-                resource={acl}
-                resourceType="Group"
-                setIsFormValid={setIsFormValid}
-              />
-            ))}
-
-            <div>
-              <Button
-                onClick={() => {
-                  setFormState((prev) => ({
-                    ...prev,
-                    consumerGroupsACLs: [...prev.consumerGroupsACLs, createEmptyConsumerGroupAcl()],
-                  }));
-                }}
-                variant="outline"
-              >
-                Add consumer group ACL
-              </Button>
-            </div>
-          </div>
-
-          <div className="flex flex-col gap-4" data-testid="create-role-transactional-ids-section">
-            <Heading level={3}>Transactional IDs</Heading>
-            {formState.transactionalIDACLs.map((acl, index) => (
-              <ResourceACLsEditor
-                key={acl._key}
-                onChange={(updated) =>
-                  setFormState((prev) => ({
-                    ...prev,
-                    transactionalIDACLs: prev.transactionalIDACLs.map((t, i) =>
-                      i === index ? (updated as TransactionalIdACLs) : t
-                    ),
-                  }))
-                }
-                onDelete={() => {
-                  setFormState((prev) => ({
-                    ...prev,
-                    transactionalIDACLs: prev.transactionalIDACLs.filter((_, i) => i !== index),
-                  }));
-                }}
-                resource={acl}
-                resourceType="TransactionalID"
-                setIsFormValid={setIsFormValid}
-              />
-            ))}
-
-            <div>
-              <Button
-                onClick={() => {
-                  setFormState((prev) => ({
-                    ...prev,
-                    transactionalIDACLs: [...prev.transactionalIDACLs, createEmptyTransactionalIdAcl()],
-                  }));
-                }}
-                variant="outline"
-              >
-                Add Transactional ID ACL
-              </Button>
-            </div>
-          </div>
-
-          <div className="flex flex-col gap-4" data-testid="create-role-cluster-section">
-            <Heading level={3}>Cluster</Heading>
-            <div className="flex items-center">
-              <div className="flex-grow">
-                <ResourceACLsEditor
-                  onChange={(updated) => setFormState((prev) => ({ ...prev, clusterACLs: updated as ClusterACLs }))}
-                  resource={formState.clusterACLs}
-                  resourceType="Cluster"
-                  setIsFormValid={setIsFormValid}
-                />
-              </div>
-            </div>
-          </div>
-
-          <div className="flex flex-col gap-4">
-            <Heading level={3}>Principals</Heading>
-            <Field>
-              <FieldLabel>Assign this role to principals</FieldLabel>
-              <FieldDescription>This can be edited later</FieldDescription>
-              <PrincipalSelector
-                onPrincipalsChange={(principals) => setFormState((prev) => ({ ...prev, principals }))}
-                principals={formState.principals}
-              />
-            </Field>
-          </div>
-        </div>
-
-        <div className="mt-8 flex gap-4">
-          <Button disabled={isLoading || roleNameAlreadyExist || !isFormValid} onClick={handleSubmit} type="button">
-            {isLoading ? (editMode ? 'Editing...' : 'Creating...') : editMode ? 'Update' : 'Create'}
-          </Button>
-          <Button
-            onClick={() => {
-              const path = editMode
-                ? `/security/roles/${encodeURIComponent(initialData?.roleName as string)}/details`
-                : '/security/roles/';
-              appGlobal.historyPush(path);
-            }}
-            variant="link"
-          >
-            Go back
-          </Button>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-const PrincipalSelector = (p: {
-  principals: RolePrincipal[];
-  onPrincipalsChange: (principals: RolePrincipal[]) => void;
-}) => {
-  const enterpriseFeaturesUsed = useApiStoreHook((s) => s.enterpriseFeaturesUsed);
-  const gbacEnabled = enterpriseFeaturesUsed.some((f) => f.name === 'gbac' && f.enabled);
-
-  useEffect(() => {
-    api.refreshServiceAccounts().catch(() => {
-      // Error handling managed by API layer
-    });
-  }, []);
-
-  const { principals, onPrincipalsChange } = p;
-
-  const availableUsers =
-    api.serviceAccounts?.users.map((u) => ({
-      value: u,
-    })) ?? [];
-
-  // Add all inferred users
-  // In addition, find all principals that are referenced by roles, or acls, that are not service accounts
-  for (const g of principalGroupsView.principalGroups) {
-    if (
-      g.principalType === 'User' &&
-      !g.principalName.includes('*') &&
-      !availableUsers.any((u) => u.value === g.principalName)
-    ) {
-      // is it a user that is being referenced?
-      // is the user already listed as a service account?
-      availableUsers.push({ value: g.principalName });
-    }
-  }
-
-  for (const [_, roleMembers] of rolesApi.roleMembers) {
-    for (const roleMember of roleMembers) {
-      if (roleMember.principalType === 'User' && !availableUsers.any((u) => u.value === roleMember.name)) {
-        availableUsers.push({ value: roleMember.name });
-      }
-    }
-  }
-
-  const availableGroups: { value: string }[] = [];
-  for (const [_, roleMembers] of rolesApi.roleMembers) {
-    for (const roleMember of roleMembers) {
-      if (roleMember.principalType === 'Group' && !availableGroups.any((g) => g.value === roleMember.name)) {
-        availableGroups.push({ value: roleMember.name });
-      }
-    }
-  }
-
-  const addPrincipal = (name: string, principalType: RolePrincipal['principalType']) => {
-    if (name && !principals.some((p) => p.name === name && p.principalType === principalType)) {
-      onPrincipalsChange([...principals, { name, principalType }]);
-    }
-  };
-
-  return (
-    <div className="flex flex-col gap-4">
-      <div className="flex flex-col gap-2">
-        <div className="w-[300px]">
-          <Combobox
-            creatable
-            onChange={(val) => {
-              if (val) addPrincipal(val, 'User');
-            }}
-            options={availableUsers.map((u) => ({ value: u.value, label: u.value }))}
-            placeholder="Add user"
-          />
-        </div>
-        {gbacEnabled && (
-          <div className="w-[300px]">
-            <Combobox
-              creatable
-              onChange={(val) => {
-                if (val) addPrincipal(val, 'Group');
-              }}
-              options={availableGroups.map((g) => ({ value: g.value, label: g.value }))}
-              placeholder="Add group"
-            />
-          </div>
-        )}
-      </div>
-
-      <div className="flex flex-wrap gap-2">
-        {principals.map((principal) => (
-          <span
-            className="inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-xs"
-            key={`${principal.principalType}:${principal.name}`}
-          >
-            <span>
-              {principal.principalType}: {principal.name}
-            </span>
-            <Button
-              className="h-auto p-0"
-              onClick={() => onPrincipalsChange(principals.filter((pr) => pr !== principal))}
-              size="icon-xs"
-              variant="ghost"
-            >
-              <X className="h-3 w-3" />
-            </Button>
-          </span>
-        ))}
-      </div>
-    </div>
-  );
-};
diff --git a/frontend/src/components/pages/acls/user-create.tsx b/frontend/src/components/pages/acls/user-create.tsx
deleted file mode 100644
index 674aba38fe..0000000000
--- a/frontend/src/components/pages/acls/user-create.tsx
+++ /dev/null
@@ -1,498 +0,0 @@
-/**
- * Copyright 2022 Redpanda Data, Inc.
- *
- * Use of this software is governed by the Business Source License
- * included in the file https://github.com/redpanda-data/redpanda/blob/dev/licenses/bsl.md
- *
- * As of the Change Date specified in that file, in accordance with
- * the Business Source License, use of this software will be governed
- * by the Apache License, Version 2.0
- */
-
-'use no memo';
-
-import {
-  Alert,
-  AlertIcon,
-  Box,
-  Button,
-  Checkbox,
-  CopyButton,
-  createStandaloneToast,
-  Flex,
-  FormField,
-  Grid,
-  Heading,
-  IconButton,
-  Input,
-  isMultiValue,
-  PasswordInput,
-  redpandaTheme,
-  redpandaToastOptions,
-  Select,
-  Text,
-  Tooltip,
-} from '@redpanda-data/ui';
-import { Link } from '@tanstack/react-router';
-import { RotateCwIcon } from 'components/icons';
-import { useCallback, useEffect, useMemo, useState } from 'react';
-
-import { useListRolesQuery } from '../../../react-query/api/security';
-import { invalidateUsersCache, useLegacyListUsersQuery } from '../../../react-query/api/user';
-import { appGlobal } from '../../../state/app-global';
-import { api, rolesApi } from '../../../state/backend-api';
-import { AclRequestDefault } from '../../../state/rest-interfaces';
-import { useSupportedFeaturesStore } from '../../../state/supported-features';
-import { uiState } from '../../../state/ui-state';
-import {
-  PASSWORD_MAX_LENGTH,
-  PASSWORD_MIN_LENGTH,
-  SASL_MECHANISMS,
-  type SaslMechanism,
-  validatePassword,
-  validateUsername,
-} from '../../../utils/user';
-import PageContent from '../../misc/page-content';
-import { SingleSelect } from '../../misc/select';
-
-const { ToastContainer, toast } = createStandaloneToast({
-  theme: redpandaTheme,
-  defaultOptions: {
-    ...redpandaToastOptions.defaultOptions,
-    isClosable: false,
-    duration: 2000,
-  },
-});
-
-const UserCreatePage = () => {
-  const [formState, setFormState] = useState({
-    username: '',
-    password: generatePassword(30, false),
-    mechanism: 'SCRAM-SHA-256' as SaslMechanism,
-    generateWithSpecialChars: false,
-    selectedRoles: [] as string[],
-  });
-  const [step, setStep] = useState<'CREATE_USER' | 'CREATE_USER_CONFIRMATION'>('CREATE_USER');
-  const [isCreating, setIsCreating] = useState(false);
-
-  const { username, password, mechanism, generateWithSpecialChars, selectedRoles } = formState;
-  const setUsername = (v: string) => setFormState((prev) => ({ ...prev, username: v }));
-  const setPassword = (v: string) => setFormState((prev) => ({ ...prev, password: v }));
-  const setMechanism = (v: SaslMechanism) => setFormState((prev) => ({ ...prev, mechanism: v }));
-  const setGenerateWithSpecialChars = (v: boolean) =>
-    setFormState((prev) => ({ ...prev, generateWithSpecialChars: v }));
-  const setSelectedRoles = (v: string[]) => setFormState((prev) => ({ ...prev, selectedRoles: v }));
-
-  const { data: usersData } = useLegacyListUsersQuery();
-  const users = usersData?.users?.map((u) => u.name) ?? [];
-
-  const isValidUsername = validateUsername(username);
-  const isValidPassword = validatePassword(password);
-
-  useEffect(() => {
-    uiState.pageTitle = 'Create user';
-    uiState.pageBreadcrumbs = [];
-    uiState.pageBreadcrumbs.push({ title: 'Access Control', linkTo: '/security' });
-    uiState.pageBreadcrumbs.push({ title: 'Create user', linkTo: '/security/users/create' });
-
-    const refreshData = async () => {
-      if (api.userData !== null && api.userData !== undefined && !api.userData.canListAcls) {
-        return;
-      }
-      await Promise.allSettled([api.refreshAcls(AclRequestDefault, true), api.refreshServiceAccounts()]);
-    };
-
-    refreshData().catch(() => {
-      // Silently ignore refresh errors
-    });
-    appGlobal.onRefresh = () =>
-      refreshData().catch(() => {
-        // Silently ignore refresh errors
-      });
-  }, []);
-
-  const onCreateUser = useCallback(async (): Promise<boolean> => {
-    setIsCreating(true);
-    let success = false;
-    try {
-      await api.createServiceAccount({
-        username,
-        password,
-        mechanism,
-      });
-    } catch (err) {
-      toast({
-        status: 'error',
-        duration: null,
-        isClosable: true,
-        title: 'Failed to create user',
-        description: String(err),
-      });
-      setIsCreating(false);
-      return false;
-    }
-
-    const userData = api.userData;
-    if (userData) {
-      const cannotListAcls = !userData.canListAcls;
-      if (cannotListAcls) {
-        setIsCreating(false);
-        return false;
-      }
-    }
-
-    const roleAddPromises: Promise<unknown>[] = selectedRoles.map((r) =>
-      rolesApi.updateRoleMembership(r, [{ name: username, principalType: 'User' }], [], false)
-    );
-
-    try {
-      await Promise.allSettled([api.refreshAcls(AclRequestDefault, true), invalidateUsersCache()]);
-      await Promise.allSettled(roleAddPromises);
-      setStep('CREATE_USER_CONFIRMATION');
-      success = true;
-    } catch (err) {
-      toast({
-        status: 'error',
-        duration: null,
-        isClosable: true,
-        title: 'Failed to create user',
-        description: String(err),
-      });
-    }
-    setIsCreating(false);
-    return success;
-  }, [username, password, mechanism, selectedRoles]);
-
-  const onCancel = () => appGlobal.historyPush('/security/users');
-
-  const state = {
-    username,
-    setUsername,
-    password,
-    setPassword,
-    mechanism,
-    setMechanism,
-    generateWithSpecialChars,
-    setGenerateWithSpecialChars,
-    isCreating,
-    isValidUsername,
-    isValidPassword,
-    selectedRoles,
-    setSelectedRoles,
-    users,
-  };
-
-  return (
-    <>
-      <ToastContainer />
-
-      <PageContent>
-        <Box>
-          {step === 'CREATE_USER' ? (
-            <CreateUserModal onCancel={onCancel} onCreateUser={onCreateUser} state={state} />
-          ) : (
-            <CreateUserConfirmationModal
-              closeModal={onCancel}
-              mechanism={mechanism}
-              password={password}
-              username={username}
-            />
-          )}
-        </Box>
-      </PageContent>
-    </>
-  );
-};
-
-export default UserCreatePage;
-
-type CreateUserModalProps = {
-  state: {
-    username: string;
-    setUsername: (v: string) => void;
-    password: string;
-    setPassword: (v: string) => void;
-    mechanism: SaslMechanism;
-    setMechanism: (v: SaslMechanism) => void;
-    generateWithSpecialChars: boolean;
-    setGenerateWithSpecialChars: (v: boolean) => void;
-    isCreating: boolean;
-    isValidUsername: boolean;
-    isValidPassword: boolean;
-    selectedRoles: string[];
-    setSelectedRoles: (v: string[]) => void;
-    users: string[];
-  };
-  onCreateUser: () => Promise<boolean>;
-  onCancel: () => void;
-};
-
-const CreateUserModal = ({ state, onCreateUser, onCancel }: CreateUserModalProps) => {
-  const featureRolesApi = useSupportedFeaturesStore((s) => s.rolesApi);
-  const userAlreadyExists = state.users.includes(state.username);
-
-  const errorText = useMemo(() => {
-    if (!state.isValidUsername) {
-      return 'The username contains invalid characters. Use only letters, numbers, dots, underscores, at symbols, and hyphens.';
-    }
-
-    if (userAlreadyExists) {
-      return 'User already exists';
-    }
-  }, [state.isValidUsername, userAlreadyExists]);
-
-  return (
-    <Box maxWidth="460px">
-      <Flex direction="column" gap="2em">
-        <FormField
-          description="Must not contain any whitespace. Dots, hyphens and underscores may be used."
-          errorText={errorText}
-          isInvalid={(!state.isValidUsername || userAlreadyExists) && state.username.length > 0}
-          label="Username"
-          showRequiredIndicator
-        >
-          <Input
-            autoComplete="off"
-            data-testid="create-user-name"
-            onChange={(v) => {
-              state.setUsername(v.target.value);
-            }}
-            placeholder="Username"
-            spellCheck={false}
-            value={state.username}
-            width="100%"
-          />
-        </FormField>
-
-        <FormField
-          data-testid="create-user-password"
-          description={`Must be at least ${PASSWORD_MIN_LENGTH} characters and should not exceed ${PASSWORD_MAX_LENGTH} characters.`}
-          label="Password"
-          showRequiredIndicator={true}
-        >
-          <Flex direction="column" gap="2">
-            <Flex alignItems="center" gap="2">
-              <PasswordInput
-                isInvalid={!state.isValidPassword}
-                name="test"
-                onChange={(e) => {
-                  state.setPassword(e.target.value);
-                }}
-                value={state.password}
-              />
-
-              <Tooltip hasArrow label={'Generate new random password'} placement="top">
-                <IconButton
-                  aria-label="Refresh"
-                  display="inline-flex"
-                  icon={<RotateCwIcon size={16} />}
-                  onClick={() => {
-                    state.setPassword(generatePassword(30, state.generateWithSpecialChars));
-                  }}
-                  variant="ghost"
-                />
-              </Tooltip>
-              <Tooltip hasArrow label={'Copy password'} placement="top">
-                {/* Wrapper needed: CopyButton doesn't forward refs, so Chakra Tooltip can't position itself without a DOM element to measure */}
-                <Box as="span" display="inline-flex">
-                  <CopyButton content={state.password} variant="ghost" />
-                </Box>
-              </Tooltip>
-            </Flex>
-            <Checkbox
-              isChecked={state.generateWithSpecialChars}
-              onChange={(e) => {
-                state.setGenerateWithSpecialChars(e.target.checked);
-                state.setPassword(generatePassword(30, e.target.checked));
-              }}
-            >
-              Generate with special characters
-            </Checkbox>
-          </Flex>
-        </FormField>
-
-        <FormField label="SASL mechanism" showRequiredIndicator>
-          <SingleSelect<SaslMechanism>
-            onChange={(e) => {
-              state.setMechanism(e);
-            }}
-            options={SASL_MECHANISMS.map((mechanism) => ({
-              value: mechanism,
-              label: mechanism,
-            }))}
-            value={state.mechanism}
-          />
-        </FormField>
-
-        {Boolean(featureRolesApi) && (
-          <FormField
-            description="Assign roles to this user. This is optional and can be changed later."
-            isDisabled={!featureRolesApi}
-            label="Assign roles"
-          >
-            <StateRoleSelector roles={state.selectedRoles} setRoles={state.setSelectedRoles} />
-          </FormField>
-        )}
-      </Flex>
-
-      <Flex gap={4} mt={8}>
-        <Button
-          isDisabled={state.isCreating || !state.isValidUsername || !state.isValidPassword || userAlreadyExists}
-          isLoading={state.isCreating}
-          loadingText="Creating..."
-          onClick={onCreateUser}
-        >
-          Create
-        </Button>
-        <Button isDisabled={state.isCreating} onClick={onCancel} variant="link">
-          Cancel
-        </Button>
-      </Flex>
-    </Box>
-  );
-};
-
-type CreateUserConfirmationModalProps = {
-  username: string;
-  password: string;
-  mechanism: SaslMechanism;
-  closeModal: () => void;
-};
-
-const CreateUserConfirmationModal = ({
-  username,
-  password,
-  mechanism,
-  closeModal,
-}: CreateUserConfirmationModalProps) => (
-  <>
-    <Heading as="h1" data-testid="user-created-successfully" mb={8} mt={4}>
-      <Flex alignItems="center">User created successfully</Flex>
-    </Heading>
-
-    <Alert mb={4} mt={4} status="info">
-      <AlertIcon />
-      You will not be able to view this password again. Make sure that it is copied and saved.
-    </Alert>
-
-    <Grid alignItems="center" gridColumnGap={6} gridRowGap={2} maxWidth="460px" templateColumns="max-content 1fr">
-      <Box data-testid="username" fontWeight="bold">
-        Username
-      </Box>
-      <Box>
-        <Flex alignItems="center" gap={2}>
-          <Text overflow="hidden" wordBreak="break-all">
-            {username}
-          </Text>
-
-          <Tooltip hasArrow label={'Copy username'} placement="top">
-            <CopyButton content={username} variant="ghost" />
-          </Tooltip>
-        </Flex>
-      </Box>
-
-      <Box data-testid="password" fontWeight="bold">
-        Password
-      </Box>
-      <Box>
-        <Flex alignItems="center" gap={2}>
-          <PasswordInput isDisabled={true} isReadOnly={true} name="test" value={password} />
-
-          <Tooltip hasArrow label={'Copy password'} placement="top">
-            {/* Wrapper needed: CopyButton doesn't forward refs, so Chakra Tooltip can't position itself without a DOM element to measure */}
-            <Box as="span" display="inline-flex">
-              <CopyButton content={password} variant="ghost" />
-            </Box>
-          </Tooltip>
-        </Flex>
-      </Box>
-
-      <Box data-testid="mechanism" fontWeight="bold">
-        Mechanism
-      </Box>
-      <Box>
-        <Text isTruncated={true} overflow="hidden" textOverflow="ellipsis" whiteSpace="nowrap">
-          {mechanism}
-        </Text>
-      </Box>
-    </Grid>
-
-    <Flex gap={4} mt={8}>
-      <Button onClick={closeModal}>Done</Button>
-      <Button
-        as={Link}
-        to={`/security/acls/create?principalType=User&principalName=${encodeURIComponent(username)}`}
-        variant="link"
-      >
-        Create ACLs
-      </Button>
-    </Flex>
-  </>
-);
-
-export const StateRoleSelector = ({ roles, setRoles }: { roles: string[]; setRoles: (roles: string[]) => void }) => {
-  const [searchValue, setSearchValue] = useState('');
-  const {
-    data: { roles: allRoles },
-  } = useListRolesQuery();
-  const availableRoles = (allRoles ?? [])
-    .filter((r: { name: string }) => !roles.includes(r.name))
-    .map((r: { name: string }) => ({ value: r.name }));
-
-  return (
-    <Flex direction="column" gap={4}>
-      <Box w="280px">
-        <Select<string>
-          inputValue={searchValue}
-          isMulti={true}
-          noOptionsMessage={() => 'No roles found'}
-          onChange={(val) => {
-            if (val && isMultiValue(val)) {
-              setRoles([...val.map((selectedRole) => selectedRole.value)]);
-              setSearchValue('');
-            }
-          }}
-          onInputChange={setSearchValue}
-          options={availableRoles}
-          // TODO: Selecting an entry triggers onChange properly.
-          //       But there is no way to prevent the component from showing no value as intended
-          //       Seems to be a bug with the component.
-          //       On 'undefined' it should handle selection on its own (this works properly)
-          //       On 'null' the component should NOT show any selection after a selection has been made (does not work!)
-          //       The override doesn't work either (isOptionSelected={()=>false})
-          placeholder="Select roles..."
-          value={roles.map((r) => ({ value: r }))}
-        />
-      </Box>
-    </Flex>
-  );
-};
-
-export function generatePassword(length: number, allowSpecialChars: boolean): string {
-  if (length <= 0) {
-    return '';
-  }
-
-  const lowercase = 'abcdefghijklmnopqrstuvwxyz';
-  const uppercase = lowercase.toUpperCase();
-  const numbers = '0123456789';
-  const special = '.,&_+|[]/-()';
-
-  let alphabet = lowercase + uppercase + numbers;
-  if (allowSpecialChars) {
-    alphabet += special;
-  }
-
-  const randomValues = new Uint32Array(length);
-  crypto.getRandomValues(randomValues);
-
-  let result = '';
-  for (const n of randomValues) {
-    const index = n % alphabet.length;
-    const sym = alphabet[index];
-
-    result += sym;
-  }
-
-  return result;
-}
diff --git a/frontend/src/components/pages/acls/user-details.tsx b/frontend/src/components/pages/acls/user-details.tsx
deleted file mode 100644
index 2b1f0cbde2..0000000000
--- a/frontend/src/components/pages/acls/user-details.tsx
+++ /dev/null
@@ -1,361 +0,0 @@
-/**
- * Copyright 2022 Redpanda Data, Inc.
- *
- * Use of this software is governed by the Business Source License
- * included in the file https://github.com/redpanda-data/redpanda/blob/dev/licenses/bsl.md
- *
- * As of the Change Date specified in that file, in accordance with
- * the Business Source License, use of this software will be governed
- * by the Apache License, Version 2.0
- */
-
-import { Box, DataTable, Text } from '@redpanda-data/ui';
-import { UserAclsCard } from 'components/pages/roles/user-acls-card';
-import { UserInformationCard } from 'components/pages/roles/user-information-card';
-import { UserRolesCard } from 'components/pages/roles/user-roles-card';
-import { Button } from 'components/redpanda-ui/components/button';
-import { isServerless } from 'config';
-import type { UpdateRoleMembershipResponse } from 'protogen/redpanda/api/console/v1alpha1/security_pb';
-import { useEffect, useState } from 'react';
-
-import { DeleteUserConfirmModal } from './delete-user-confirm-modal';
-import type { AclPrincipalGroup } from './models';
-import { ChangePasswordModal, ChangeRolesModal } from './user-edit-modals';
-import { useGetAclsByPrincipal } from '../../../react-query/api/acl';
-import { useListRolesQuery } from '../../../react-query/api/security';
-import { invalidateUsersCache, useLegacyListUsersQuery } from '../../../react-query/api/user';
-import { appGlobal } from '../../../state/app-global';
-import { api, rolesApi } from '../../../state/backend-api';
-import { AclRequestDefault } from '../../../state/rest-interfaces';
-import { useSupportedFeaturesStore } from '../../../state/supported-features';
-import { uiState } from '../../../state/ui-state';
-import { DefaultSkeleton } from '../../../utils/tsx-utils';
-import PageContent from '../../misc/page-content';
-
-type UserDetailsPageProps = {
-  userName: string;
-};
-
-const UserDetailsPage = ({ userName }: UserDetailsPageProps) => {
-  const [isChangePasswordModalOpen, setIsChangePasswordModalOpen] = useState(false);
-  const [isChangeRolesModalOpen, setIsChangeRolesModalOpen] = useState(false);
-  const featureRolesApi = useSupportedFeaturesStore((s) => s.rolesApi);
-
-  const { data: usersData, isLoading: isUsersLoading } = useLegacyListUsersQuery();
-  const users = usersData?.users?.map((u) => u.name) ?? [];
-
-  useEffect(() => {
-    uiState.pageTitle = 'User details';
-    uiState.pageBreadcrumbs = [];
-    uiState.pageBreadcrumbs.push({ title: 'Access Control', linkTo: '/security' });
-    uiState.pageBreadcrumbs.push({ title: 'Users', linkTo: '/security/users' });
-    uiState.pageBreadcrumbs.push({ title: userName, linkTo: `/security/users/${userName}` });
-
-    const refreshData = async () => {
-      if (api.userData !== null && api.userData !== undefined && !api.userData.canListAcls) {
-        return;
-      }
-      await Promise.allSettled([
-        api.refreshAcls(AclRequestDefault, true),
-        api.refreshServiceAccounts(),
-        rolesApi.refreshRoles(),
-      ]);
-      await rolesApi.refreshRoleMembers();
-    };
-
-    // biome-ignore lint/suspicious/noConsole: error logging for unhandled promise rejections
-    refreshData().catch(console.error);
-    appGlobal.onRefresh = () =>
-      // biome-ignore lint/suspicious/noConsole: error logging for unhandled promise rejections
-      refreshData().catch(console.error);
-  }, [userName]);
-
-  if (isUsersLoading) {
-    return DefaultSkeleton;
-  }
-
-  const isServiceAccount = users.includes(userName);
-
-  return (
-    <PageContent>
-      <div className="flex flex-col gap-4">
-        <UserInformationCard
-          onEditPassword={
-            api.isAdminApiConfigured && !isServerless()
-              ? () => {
-                  setIsChangePasswordModalOpen(true);
-                }
-              : undefined
-          }
-          username={userName}
-        />
-        <UserPermissionDetailsContent
-          onChangeRoles={
-            featureRolesApi
-              ? () => {
-                  setIsChangeRolesModalOpen(true);
-                }
-              : undefined
-          }
-          userName={userName}
-        />
-        <div>
-          {Boolean(isServiceAccount) && (
-            <DeleteUserConfirmModal
-              buttonEl={
-                <Button disabled={!isServiceAccount} variant="destructive">
-                  Delete user
-                </Button>
-              }
-              onConfirm={async () => {
-                await api.deleteServiceAccount(userName);
-
-                // Remove user from all its roles
-                const promises: Promise<UpdateRoleMembershipResponse>[] = [];
-                for (const [roleName, members] of rolesApi.roleMembers) {
-                  if (members.any((m) => m.name === userName)) {
-                    promises.push(
-                      rolesApi.updateRoleMembership(roleName, [], [{ name: userName, principalType: 'User' }])
-                    );
-                  }
-                }
-                await Promise.allSettled(promises);
-                await Promise.all([invalidateUsersCache(), rolesApi.refreshRoleMembers()]);
-                appGlobal.historyPush('/security/users/');
-              }}
-              userName={userName}
-            />
-          )}
-        </div>
-
-        {Boolean(api.isAdminApiConfigured) && !isServerless() && (
-          <ChangePasswordModal
-            isOpen={isChangePasswordModalOpen}
-            setIsOpen={setIsChangePasswordModalOpen}
-            userName={userName}
-          />
-        )}
-
-        {Boolean(featureRolesApi) && (
-          <ChangeRolesModal isOpen={isChangeRolesModalOpen} setIsOpen={setIsChangeRolesModalOpen} userName={userName} />
-        )}
-      </div>
-    </PageContent>
-  );
-};
-
-export default UserDetailsPage;
-
-const UserPermissionDetailsContent = ({
-  userName,
-  onChangeRoles,
-}: {
-  userName: string;
-  onChangeRoles?: () => void;
-}) => {
-  const featureRolesApi = useSupportedFeaturesStore((s) => s.rolesApi);
-  const { data: rolesData } = useListRolesQuery({ filter: { principal: userName } });
-  const { data: acls } = useGetAclsByPrincipal(`User:${userName}`);
-
-  const roles = featureRolesApi
-    ? (rolesData?.roles ?? []).map((r) => ({
-        principalType: 'RedpandaRole',
-        principalName: r.name,
-      }))
-    : [];
-
-  return (
-    <div className="flex flex-col gap-4">
-      <UserRolesCard onChangeRoles={onChangeRoles} roles={roles} />
-      <UserAclsCard acls={acls} />
-    </div>
-  );
-};
-
-// TODO: remove this component when we update RoleDetails
-// biome-ignore lint/complexity/noExcessiveCognitiveComplexity: complexity 70, refactor later
-export const AclPrincipalGroupPermissionsTable = ({ group }: { group: AclPrincipalGroup }) => {
-  const entries: {
-    type: string;
-    selector: string;
-    operations: {
-      allow: string[];
-      deny: string[];
-    };
-  }[] = [];
-
-  // Convert all entries of the group into a table row
-  for (const topicAcl of group.topicAcls) {
-    const allow: string[] = [];
-    const deny: string[] = [];
-
-    if (topicAcl.all === 'Allow') {
-      allow.push('All');
-    } else if (topicAcl.all === 'Deny') {
-      deny.push('All');
-    } else {
-      for (const [permName, value] of Object.entries(topicAcl.permissions)) {
-        if (value === 'Allow') {
-          allow.push(permName);
-        }
-        if (value === 'Deny') {
-          deny.push(permName);
-        }
-      }
-    }
-
-    if (allow.length === 0 && deny.length === 0) {
-      continue;
-    }
-
-    entries.push({
-      type: 'Topic',
-      selector: topicAcl.selector,
-      operations: { allow, deny },
-    });
-  }
-
-  for (const groupAcl of group.consumerGroupAcls) {
-    const allow: string[] = [];
-    const deny: string[] = [];
-
-    if (groupAcl.all === 'Allow') {
-      allow.push('All');
-    } else if (groupAcl.all === 'Deny') {
-      deny.push('All');
-    } else {
-      for (const [permName, value] of Object.entries(groupAcl.permissions)) {
-        if (value === 'Allow') {
-          allow.push(permName);
-        }
-        if (value === 'Deny') {
-          deny.push(permName);
-        }
-      }
-    }
-
-    if (allow.length === 0 && deny.length === 0) {
-      continue;
-    }
-
-    entries.push({
-      type: 'ConsumerGroup',
-      selector: groupAcl.selector,
-      operations: { allow, deny },
-    });
-  }
-
-  for (const transactId of group.transactionalIdAcls) {
-    const allow: string[] = [];
-    const deny: string[] = [];
-
-    if (transactId.all === 'Allow') {
-      allow.push('All');
-    } else if (transactId.all === 'Deny') {
-      deny.push('All');
-    } else {
-      for (const [permName, value] of Object.entries(transactId.permissions)) {
-        if (value === 'Allow') {
-          allow.push(permName);
-        }
-        if (value === 'Deny') {
-          deny.push(permName);
-        }
-      }
-    }
-
-    if (allow.length === 0 && deny.length === 0) {
-      continue;
-    }
-
-    entries.push({
-      type: 'TransactionalID',
-      selector: transactId.selector,
-      operations: { allow, deny },
-    });
-  }
-
-  // Cluster
-  {
-    const clusterAcls = group.clusterAcls;
-
-    const allow: string[] = [];
-    const deny: string[] = [];
-
-    if (clusterAcls.all === 'Allow') {
-      allow.push('All');
-    } else if (clusterAcls.all === 'Deny') {
-      deny.push('All');
-    } else {
-      for (const [permName, value] of Object.entries(clusterAcls.permissions)) {
-        if (value === 'Allow') {
-          allow.push(permName);
-        }
-        if (value === 'Deny') {
-          deny.push(permName);
-        }
-      }
-    }
-
-    // Cluster only appears once, so it won't be filtered automatically,
-    // we need to manually skip this entry if there isn't any content
-    if (allow.length + deny.length > 0) {
-      entries.push({
-        type: 'Cluster',
-        selector: '',
-        operations: { allow, deny },
-      });
-    }
-  }
-
-  if (entries.length === 0) {
-    return 'No permissions assigned';
-  }
-
-  return (
-    <DataTable
-      columns={[
-        {
-          header: 'Type',
-          accessorKey: 'type',
-          size: 150,
-        },
-        {
-          header: 'Selector',
-          accessorKey: 'selector',
-          size: 300,
-        },
-        {
-          header: 'Operations',
-          size: Number.POSITIVE_INFINITY,
-          cell: ({ row: { original: record } }) => {
-            const allow = record.operations.allow;
-            const deny = record.operations.deny;
-
-            return (
-              <Box>
-                {allow.length > 0 && (
-                  <Box whiteSpace="pre">
-                    <Text as="span" fontWeight="semibold">
-                      Allow:{' '}
-                    </Text>
-                    <Text as="span">{allow.join(', ')}</Text>
-                  </Box>
-                )}
-                {deny.length > 0 && (
-                  <Box>
-                    <Text as="span" fontWeight="semibold">
-                      Deny:{' '}
-                    </Text>
-                    <Text as="span">{deny.join(', ')}</Text>
-                  </Box>
-                )}
-              </Box>
-            );
-          },
-        },
-      ]}
-      data={entries}
-    />
-  );
-};
diff --git a/frontend/src/components/pages/acls/user-edit-modals.tsx b/frontend/src/components/pages/acls/user-edit-modals.tsx
deleted file mode 100644
index f9ff585c24..0000000000
--- a/frontend/src/components/pages/acls/user-edit-modals.tsx
+++ /dev/null
@@ -1,294 +0,0 @@
-'use no memo';
-
-import { create } from '@bufbuild/protobuf';
-import { ConnectError } from '@connectrpc/connect';
-import {
-  Box,
-  Button,
-  Checkbox,
-  CopyButton,
-  Flex,
-  FormField,
-  IconButton,
-  Modal,
-  ModalBody,
-  ModalContent,
-  ModalFooter,
-  ModalHeader,
-  ModalOverlay,
-  PasswordInput,
-  Tooltip,
-  useToast,
-} from '@redpanda-data/ui';
-import { RotateCwIcon } from 'components/icons';
-import {
-  UpdateRoleMembershipRequestSchema,
-  type UpdateRoleMembershipResponse,
-} from 'protogen/redpanda/api/dataplane/v1/security_pb';
-import { SASLMechanism, UpdateUserRequestSchema } from 'protogen/redpanda/api/dataplane/v1/user_pb';
-import { useEffect, useState } from 'react';
-
-import { generatePassword, StateRoleSelector } from './user-create';
-import { useListRolesQuery, useUpdateRoleMembershipMutation } from '../../../react-query/api/security';
-import { useUpdateUserMutationWithToast } from '../../../react-query/api/user';
-import { rolesApi } from '../../../state/backend-api';
-import { useSupportedFeaturesStore } from '../../../state/supported-features';
-import { formatToastErrorMessageGRPC, showToast } from '../../../utils/toast.utils';
-import { SingleSelect } from '../../misc/select';
-
-type ChangePasswordModalProps = {
-  userName: string;
-  isOpen: boolean;
-  setIsOpen: (isOpen: boolean) => void;
-};
-
-export const ChangePasswordModal = ({ userName, isOpen, setIsOpen }: ChangePasswordModalProps) => {
-  const toast = useToast();
-  const [password, setPassword] = useState(() => generatePassword(30, false));
-  const [mechanism, setMechanism] = useState<SASLMechanism>();
-  const [generateWithSpecialChars, setGenerateWithSpecialChars] = useState(false);
-  const isValidPassword = password && password.length >= 4 && password.length <= 64;
-  const { mutateAsync: updateUser, isPending: isUpdateUserPending } = useUpdateUserMutationWithToast();
-
-  const onSavePassword = async () => {
-    const updateRequest = create(UpdateUserRequestSchema, {
-      user: {
-        name: userName,
-        mechanism,
-        password,
-      },
-    });
-    try {
-      await updateUser(updateRequest);
-      toast({
-        status: 'success',
-        title: `Password for user ${userName} updated`,
-      });
-      setIsOpen(false);
-    } catch (error) {
-      showToast({
-        title: formatToastErrorMessageGRPC({
-          error: ConnectError.from(error),
-          action: 'update',
-          entity: 'user',
-        }),
-        status: 'error',
-      });
-    }
-  };
-
-  return (
-    <Modal
-      isOpen={isOpen}
-      onClose={() => {
-        if (isUpdateUserPending) {
-          setIsOpen(false);
-        }
-      }}
-    >
-      <ModalOverlay />
-      <ModalContent minW="2xl">
-        <ModalHeader>{`Change ${userName} password`}</ModalHeader>
-        <ModalBody>
-          <Flex flexDirection="column" gap={4}>
-            <FormField
-              data-testid="create-user-password"
-              description="Must be at least 4 characters and should not exceed 64 characters."
-              label="Password"
-              showRequiredIndicator={true}
-            >
-              <Flex direction="column" gap="2">
-                <Flex alignItems="center" gap="2">
-                  <PasswordInput
-                    isInvalid={!isValidPassword}
-                    name="test"
-                    onChange={(e) => setPassword(e.target.value)}
-                    value={password}
-                  />
-
-                  <Tooltip hasArrow label={'Generate new random password'} placement="top">
-                    <IconButton
-                      aria-label="Refresh"
-                      display="inline-flex"
-                      icon={<RotateCwIcon size={16} />}
-                      onClick={() => setPassword(generatePassword(30, generateWithSpecialChars))}
-                      variant="ghost"
-                    />
-                  </Tooltip>
-                  <Tooltip hasArrow label={'Copy password'} placement="top">
-                    {/* Wrapper needed: CopyButton doesn't forward refs, so Chakra Tooltip can't position itself without a DOM element to measure */}
-                    <Box as="span" display="inline-flex">
-                      <CopyButton content={password} variant="ghost" />
-                    </Box>
-                  </Tooltip>
-                </Flex>
-                <Checkbox
-                  isChecked={generateWithSpecialChars}
-                  onChange={(e) => {
-                    setGenerateWithSpecialChars(e.target.checked);
-                    setPassword(generatePassword(30, e.target.checked));
-                  }}
-                >
-                  Generate with special characters
-                </Checkbox>
-              </Flex>
-            </FormField>
-            <FormField label="SASL mechanism" showRequiredIndicator>
-              <SingleSelect<SASLMechanism | undefined>
-                onChange={(e) => {
-                  setMechanism(e);
-                }}
-                options={[
-                  {
-                    value: SASLMechanism.SASL_MECHANISM_SCRAM_SHA_256,
-                    label: 'SCRAM-SHA-256',
-                  },
-                  {
-                    value: SASLMechanism.SASL_MECHANISM_SCRAM_SHA_512,
-                    label: 'SCRAM-SHA-512',
-                  },
-                ]}
-                value={mechanism}
-              />
-            </FormField>
-          </Flex>
-        </ModalBody>
-        <ModalFooter display="flex" gap={2}>
-          <Button
-            isDisabled={isUpdateUserPending}
-            onClick={() => {
-              setIsOpen(false);
-            }}
-            variant="ghost"
-          >
-            Cancel
-          </Button>
-          <Button
-            isDisabled={!isValidPassword || mechanism === undefined || isUpdateUserPending}
-            onClick={onSavePassword}
-            type="submit"
-            variant="solid"
-          >
-            Save changes
-          </Button>
-        </ModalFooter>
-      </ModalContent>
-    </Modal>
-  );
-};
-
-type ChangeRolesModalProps = {
-  userName: string;
-  isOpen: boolean;
-  setIsOpen: (isOpen: boolean) => void;
-};
-
-export const ChangeRolesModal = ({ userName, isOpen, setIsOpen }: ChangeRolesModalProps) => {
-  const featureRolesApi = useSupportedFeaturesStore((s) => s.rolesApi);
-  const toast = useToast();
-  const [selectedRoles, setSelectedRoles] = useState<string[] | undefined>(undefined);
-  const { mutateAsync: updateRoleMembership, isPending: isUpdateMembershipPending } = useUpdateRoleMembershipMutation();
-  const { data, isLoading } = useListRolesQuery({ filter: { principal: userName } });
-  const originalRoles = data.roles.map((r) => r.name);
-
-  useEffect(() => {
-    if (!isLoading && selectedRoles === undefined) {
-      queueMicrotask(() => setSelectedRoles([...originalRoles]));
-    }
-  }, [originalRoles, isLoading, selectedRoles]);
-
-  const onSaveRoles = async () => {
-    if (!featureRolesApi) {
-      return;
-    }
-    let formattedSelectedRoles: string[] = [];
-    if (selectedRoles) {
-      formattedSelectedRoles = selectedRoles;
-    }
-    const addedRoles = formattedSelectedRoles.except(originalRoles);
-    const removedRoles = originalRoles.except(formattedSelectedRoles);
-    const promises: Promise<UpdateRoleMembershipResponse>[] = [];
-
-    // Remove user from "removedRoles"
-    for (const r of removedRoles) {
-      const membership = create(UpdateRoleMembershipRequestSchema, {
-        roleName: r,
-        remove: [{ principal: userName }],
-      });
-      promises.push(updateRoleMembership(membership));
-    }
-    // Add to newly selected roles
-    for (const r of addedRoles) {
-      const membership = create(UpdateRoleMembershipRequestSchema, {
-        roleName: r,
-        add: [{ principal: userName }],
-      });
-      promises.push(updateRoleMembership(membership));
-    }
-
-    try {
-      await Promise.allSettled(promises);
-      // TODO: Until we haven't migrated everything from mobx is better to not remove this
-      await Promise.all([rolesApi.refreshRoles(), rolesApi.refreshRoleMembers()]);
-
-      toast({
-        status: 'success',
-        title: `${addedRoles.length} roles added, ${removedRoles.length} removed from user ${userName}`,
-      });
-      setIsOpen(false);
-    } catch (error) {
-      showToast({
-        title: formatToastErrorMessageGRPC({
-          error: ConnectError.from(error),
-          action: 'update',
-          entity: 'role',
-        }),
-        status: 'error',
-      });
-    }
-  };
-  return (
-    <Modal
-      isOpen={isOpen}
-      onClose={() => {
-        if (isUpdateMembershipPending) {
-          setIsOpen(false);
-        }
-      }}
-    >
-      <ModalOverlay />
-      <ModalContent minW="2xl">
-        <ModalHeader>{`Change ${userName} roles`}</ModalHeader>
-        <ModalBody>
-          <FormField
-            description="Assign roles to this user. This is optional and can be changed later."
-            isDisabled={!featureRolesApi}
-            label="Assign roles"
-          >
-            <StateRoleSelector roles={selectedRoles || []} setRoles={setSelectedRoles} />
-          </FormField>
-        </ModalBody>
-        <ModalFooter display="flex" gap={2}>
-          <Button
-            isDisabled={isUpdateMembershipPending}
-            onClick={() => {
-              setIsOpen(false);
-            }}
-            variant="secondary-ghost"
-          >
-            Cancel
-          </Button>
-          <Button
-            isDisabled={isUpdateMembershipPending}
-            isLoading={isUpdateMembershipPending}
-            onClick={onSaveRoles}
-            type="submit"
-            variant="solid"
-          >
-            Save changes
-          </Button>
-        </ModalFooter>
-      </ModalContent>
-    </Modal>
-  );
-};
diff --git a/frontend/src/components/pages/acls/user-permission-assignments.tsx b/frontend/src/components/pages/acls/user-permission-assignments.tsx
deleted file mode 100644
index 69e73cee08..0000000000
--- a/frontend/src/components/pages/acls/user-permission-assignments.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-/**
- * Copyright 2022 Redpanda Data, Inc.
- *
- * Use of this software is governed by the Business Source License
- * included in the file https://github.com/redpanda-data/redpanda/blob/dev/licenses/bsl.md
- *
- * As of the Change Date specified in that file, in accordance with
- * the Business Source License, use of this software will be governed
- * by the Apache License, Version 2.0
- */
-
-import { useQuery } from '@connectrpc/connect-query';
-import { useNavigate } from '@tanstack/react-router';
-import { TagsValue } from 'components/redpanda-ui/components/tags';
-
-import type { ListACLsRequest } from '../../../protogen/redpanda/api/dataplane/v1/acl_pb';
-import { listACLs } from '../../../protogen/redpanda/api/dataplane/v1/acl-ACLService_connectquery';
-import { rolesApi } from '../../../state/backend-api';
-import { useSupportedFeaturesStore } from '../../../state/supported-features';
-
-// biome-ignore lint/complexity/noExcessiveCognitiveComplexity: complex business logic
-export const UserRoleTags = ({
-  userName,
-  showMaxItems = Number.POSITIVE_INFINITY,
-  verticalView = true,
-}: {
-  userName: string;
-  showMaxItems?: number;
-  verticalView?: boolean;
-}) => {
-  const elements: JSX.Element[] = [];
-  let numberOfVisibleElements = 0;
-  let numberOfHiddenElements = 0;
-
-  const featureRolesApi = useSupportedFeaturesStore((s) => s.rolesApi);
-  const navigate = useNavigate();
-
-  const { data: hasAcls } = useQuery(
-    listACLs,
-    {
-      filter: {
-        principal: `User:${userName}`,
-      },
-    } as ListACLsRequest,
-    {
-      enabled: !!userName,
-      select: (response) => response.resources.length > 0,
-    }
-  );
-
-  if (hasAcls) {
-    elements.push(
-      <TagsValue onClick={() => navigate({ to: `/security/acls/${userName}/details` })}>{`User:${userName}`}</TagsValue>
-    );
-  }
-
-  if (featureRolesApi) {
-    // Get all roles, and ACL sets that apply to this user
-    const roles: string[] = [];
-    for (const [roleName, members] of rolesApi.roleMembers) {
-      if (!members.any((m) => m.name === userName)) {
-        continue; // this role doesn't contain our user
-      }
-      roles.push(roleName);
-    }
-
-    numberOfVisibleElements = Math.min(roles.length, showMaxItems);
-    numberOfHiddenElements = showMaxItems === Number.POSITIVE_INFINITY ? 0 : Math.max(0, roles.length - showMaxItems);
-
-    for (let i = 0; i < numberOfVisibleElements; i++) {
-      const r = roles[i];
-      elements.push(
-        <div>
-          <TagsValue
-            key={r}
-            onClick={() => navigate({ to: `/security/roles/${r}/details` })}
-          >{`RedpandaRole:${r}`}</TagsValue>
-        </div>
-      );
-    }
-
-    if (elements.length === 0) {
-      elements.push(<p>No roles</p>);
-    }
-    if (numberOfHiddenElements > 0) {
-      elements.push(<p>{`+${numberOfHiddenElements} more`}</p>);
-    }
-  }
-
-  return <div className={verticalView ? 'flex' : ''}>{elements}</div>;
-};
diff --git a/frontend/src/components/pages/roles/matching-users-card.tsx b/frontend/src/components/pages/roles/matching-users-card.tsx
deleted file mode 100644
index 4dc5dc6336..0000000000
--- a/frontend/src/components/pages/roles/matching-users-card.tsx
+++ /dev/null
@@ -1,273 +0,0 @@
-/**
- * Copyright 2022 Redpanda Data, Inc.
- *
- * Use of this software is governed by the Business Source License
- * included in the file https://github.com/redpanda-data/redpanda/blob/dev/licenses/bsl.md
- *
- * As of the Change Date specified in that file, in accordance with
- * the Business Source License, use of this software will be governed
- * by the Apache License, Version 2.0
- */
-
-import { create } from '@bufbuild/protobuf';
-import { parsePrincipal } from 'components/pages/acls/new-acl/acl.model';
-import { Button } from 'components/redpanda-ui/components/button';
-import { Card, CardContent, CardHeader } from 'components/redpanda-ui/components/card';
-import { Empty, EmptyTitle } from 'components/redpanda-ui/components/empty';
-import { Input } from 'components/redpanda-ui/components/input';
-import { Text } from 'components/redpanda-ui/components/typography';
-import { Check, Plus, Trash2, X } from 'lucide-react';
-import {
-  ListRoleMembersRequestSchema,
-  UpdateRoleMembershipRequestSchema,
-} from 'protogen/redpanda/api/dataplane/v1/security_pb';
-import { ListUsersRequestSchema } from 'protogen/redpanda/api/dataplane/v1/user_pb';
-import { useState } from 'react';
-import { toast } from 'sonner';
-
-import { useListRoleMembersQuery, useUpdateRoleMembershipMutation } from '../../../react-query/api/security';
-import { useListUsersQuery } from '../../../react-query/api/user';
-import { useApiStoreHook } from '../../../state/backend-api';
-import { AutocompleteInput } from '../acls/new-acl/autocomplete-input';
-
-type MatchingUsersCardProps = {
-  principalType: string;
-  principal: string;
-};
-
-export function MatchingUsersCard({ principalType, principal }: MatchingUsersCardProps) {
-  const roleName = principalType === 'RedpandaRole' ? parsePrincipal(principal).name : '';
-
-  const [isAddingUser, setIsAddingUser] = useState(false);
-  const [newUserName, setNewUserName] = useState('');
-  const [principalTypeToAdd, setPrincipalTypeToAdd] = useState<'User' | 'Group'>('User');
-  const [deletingPrincipal, setDeletingPrincipal] = useState<string | null>(null);
-
-  const enterpriseFeaturesUsed = useApiStoreHook((s) => s.enterpriseFeaturesUsed);
-  const gbacEnabled = enterpriseFeaturesUsed.some((f) => f.name === 'gbac' && f.enabled);
-
-  const { data: membersData, isLoading } = useListRoleMembersQuery(create(ListRoleMembersRequestSchema, { roleName }));
-
-  const { data: usersData } = useListUsersQuery(create(ListUsersRequestSchema));
-
-  const { mutateAsync: updateMembership, isPending: isSubmitting } = useUpdateRoleMembershipMutation();
-
-  const userMembers = membersData?.members?.filter((m) => parsePrincipal(m.principal).type === 'User') ?? [];
-  const groupMembers = membersData?.members?.filter((m) => parsePrincipal(m.principal).type === 'Group') ?? [];
-
-  const handleAddMember = async () => {
-    if (!newUserName.trim()) {
-      toast.error(`Please enter a ${principalTypeToAdd === 'Group' ? 'group name' : 'username'}`);
-      return;
-    }
-
-    try {
-      await updateMembership(
-        create(UpdateRoleMembershipRequestSchema, {
-          roleName,
-          add: [{ principal: `${principalTypeToAdd}:${newUserName.trim()}` }],
-          remove: [],
-          create: true,
-        })
-      );
-      toast.success(`${principalTypeToAdd} "${newUserName}" added to role successfully`);
-      setNewUserName('');
-      setIsAddingUser(false);
-      setPrincipalTypeToAdd('User');
-    } catch (_error) {
-      // Error handling is done in onError callback
-    }
-  };
-
-  const handleRemoveMember = async (memberPrincipal: string) => {
-    setDeletingPrincipal(memberPrincipal);
-    try {
-      await updateMembership(
-        create(UpdateRoleMembershipRequestSchema, {
-          roleName,
-          add: [],
-          remove: [{ principal: memberPrincipal }],
-          create: false,
-        })
-      );
-      toast.success('Member removed from role successfully');
-      setDeletingPrincipal(null);
-    } catch (_error) {
-      // Error handling is done in onError callback
-    }
-  };
-
-  const handleCancel = () => {
-    setNewUserName('');
-    setIsAddingUser(false);
-    setPrincipalTypeToAdd('User');
-  };
-
-  const membersCount =
-    principalType === 'RedpandaRole' ? userMembers.length + (gbacEnabled ? groupMembers.length : 0) : 3;
-
-  const renderMemberRow = (memberPrincipal: string, displayName: string, testIdPrefix: string) => {
-    const isDeleting = deletingPrincipal === memberPrincipal;
-    return (
-      <div
-        className="group flex items-center justify-between gap-2 rounded-lg border border-gray-200 bg-white/40 px-[10px] py-2 font-normal text-gray-900 text-sm transition-colors hover:bg-white/60"
-        key={memberPrincipal}
-      >
-        <span className="flex-1 text-left">{displayName}</span>
-        <Button
-          className="h-auto p-1 opacity-100 transition-opacity"
-          data-testid={`remove-${testIdPrefix}-${displayName}-button`}
-          disabled={isDeleting}
-          onClick={() => handleRemoveMember(memberPrincipal)}
-          size="sm"
-          variant="destructive-ghost"
-        >
-          <Trash2 className="h-4 w-4" />
-        </Button>
-      </div>
-    );
-  };
-
-  return (
-    <div className="lg:col-span-1">
-      <Card className="bg-slate-100" size="full">
-        <CardHeader>
-          <h3>Matching users / principals ({membersCount})</h3>
-        </CardHeader>
-        <CardContent className="space-y-4">
-          <div className="flex flex-col gap-1">
-            {isLoading && principalType === 'RedpandaRole' && (
-              <div className="text-gray-500 text-sm italic">Loading members...</div>
-            )}
-
-            {principalType === 'RedpandaRole' && !isLoading && (
-              <>
-                {/* Users section */}
-                <Text as="span" className="text-gray-700 uppercase tracking-wide" variant="labelStrongXSmall">
-                  Users
-                </Text>
-                {userMembers.length > 0 ? (
-                  userMembers.map((member) => {
-                    const name = parsePrincipal(member.principal).name || member.principal;
-                    return renderMemberRow(member.principal, name, 'user');
-                  })
-                ) : (
-                  <Empty>
-                    <EmptyTitle>No user members</EmptyTitle>
-                  </Empty>
-                )}
-
-                {/* Groups section — only when GBAC is enabled */}
-                {gbacEnabled && (
-                  <>
-                    <Text as="span" className="mt-2 text-gray-700 uppercase tracking-wide" variant="labelStrongXSmall">
-                      Groups
-                    </Text>
-                    {groupMembers.length > 0 ? (
-                      groupMembers.map((member) => {
-                        const name = parsePrincipal(member.principal).name || member.principal;
-                        return renderMemberRow(member.principal, name, 'group');
-                      })
-                    ) : (
-                      <Empty>
-                        <EmptyTitle>No group members</EmptyTitle>
-                      </Empty>
-                    )}
-                  </>
-                )}
-              </>
-            )}
-          </div>
-
-          {/* Add member — only for RedpandaRole */}
-          {principalType === 'RedpandaRole' && (
-            <div className="border-gray-200 border-t pt-2">
-              {isAddingUser ? (
-                <div className="flex flex-col gap-2">
-                  {gbacEnabled && (
-                    <div className="flex gap-1">
-                      <Button
-                        className="flex-1"
-                        onClick={() => setPrincipalTypeToAdd('User')}
-                        size="sm"
-                        variant={principalTypeToAdd === 'User' ? 'outline' : 'ghost'}
-                      >
-                        User
-                      </Button>
-                      <Button
-                        className="flex-1"
-                        onClick={() => setPrincipalTypeToAdd('Group')}
-                        size="sm"
-                        variant={principalTypeToAdd === 'Group' ? 'outline' : 'ghost'}
-                      >
-                        Group
-                      </Button>
-                    </div>
-                  )}
-                  <div className="flex gap-2">
-                    {principalTypeToAdd === 'User' ? (
-                      <AutocompleteInput
-                        className="flex-1 text-sm"
-                        data-testid="add-user-input"
-                        onChange={setNewUserName}
-                        placeholder="Select or enter username..."
-                        suggestions={
-                          usersData?.users
-                            ?.filter((user) => {
-                              const userPrincipal = `User:${user.name}`;
-                              return !membersData?.members?.some((member) => member.principal === userPrincipal);
-                            })
-                            .map((user) => user.name) || []
-                        }
-                        value={newUserName}
-                      />
-                    ) : (
-                      <Input
-                        containerClassName="flex-1"
-                        data-testid="add-group-input"
-                        onChange={(e) => setNewUserName(e.target.value)}
-                        placeholder="Enter group name..."
-                        size="sm"
-                        value={newUserName}
-                      />
-                    )}
-                    <Button
-                      className="px-2"
-                      data-testid="confirm-add-user-button"
-                      disabled={isSubmitting || !newUserName.trim()}
-                      onClick={handleAddMember}
-                      size="sm"
-                      variant="ghost"
-                    >
-                      <Check className="h-4 w-4 text-green-600" />
-                    </Button>
-                    <Button
-                      className="px-2"
-                      disabled={isSubmitting}
-                      onClick={handleCancel}
-                      size="sm"
-                      variant="destructive-ghost"
-                    >
-                      <X className="h-4 w-4" />
-                    </Button>
-                  </div>
-                </div>
-              ) : (
-                <Button
-                  className="w-full justify-start text-gray-600 hover:bg-white/60 hover:text-gray-900"
-                  data-testid="add-user-principal-button"
-                  onClick={() => setIsAddingUser(true)}
-                  size="sm"
-                  variant="ghost"
-                >
-                  <Plus className="mr-2 h-4 w-4" />
-                  Add user/principal
-                </Button>
-              )}
-            </div>
-          )}
-        </CardContent>
-      </Card>
-    </div>
-  );
-}
diff --git a/frontend/src/components/pages/roles/role-create-page.tsx b/frontend/src/components/pages/roles/role-create-page.tsx
deleted file mode 100644
index 990435e8d4..0000000000
--- a/frontend/src/components/pages/roles/role-create-page.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-/**
- * Copyright 2025 Redpanda Data, Inc.
- *
- * Use of this software is governed by the Business Source License
- * included in the file https://github.com/redpanda-data/redpanda/blob/dev/licenses/bsl.md
- *
- * As of the Change Date specified in that file, in accordance with
- * the Business Source License, use of this software will be governed
- * by the Apache License, Version 2.0
- */
-
-import { create } from '@bufbuild/protobuf';
-import { useNavigate } from '@tanstack/react-router';
-import {
-  convertRulesToCreateACLRequests,
-  handleResponses,
-  PrincipalTypeRedpandaRole,
-  parsePrincipal,
-  type Rule,
-} from 'components/pages/acls/new-acl/acl.model';
-import CreateACL from 'components/pages/acls/new-acl/create-acl';
-import { CreateRoleRequestSchema } from 'protogen/redpanda/api/dataplane/v1/security_pb';
-import { useEffect } from 'react';
-import { toast } from 'sonner';
-
-import { useCreateAcls } from '../../../react-query/api/acl';
-import { useCreateRoleMutation } from '../../../react-query/api/security';
-import { uiState } from '../../../state/ui-state';
-import PageContent from '../../misc/page-content';
-
-const RoleCreatePage = () => {
-  const navigate = useNavigate();
-
-  useEffect(() => {
-    uiState.pageBreadcrumbs = [
-      { title: 'Security', linkTo: '/security' },
-      { title: 'Roles', linkTo: '/security/roles' },
-      { title: 'Create Role', linkTo: '' },
-    ];
-  }, []);
-
-  const { createAcls } = useCreateAcls();
-  const { mutateAsync: createRole } = useCreateRoleMutation();
-
-  const createRoleAclMutation = async (principal: string, host: string, rules: Rule[]) => {
-    // Extract the role name from the principal (format: "RedpandaRole:roleName")
-    const roleName = parsePrincipal(principal).name;
-
-    if (!roleName || roleName.trim() === '') {
-      toast.error('Please enter a role name');
-      return;
-    }
-
-    try {
-      // First create the role
-      await createRole(
-        create(CreateRoleRequestSchema, {
-          role: {
-            name: roleName,
-          },
-        })
-      );
-
-      toast.success(`Role "${roleName}" created successfully`);
-
-      // Then create the ACLs for the role
-      const result = convertRulesToCreateACLRequests(rules, principal, host);
-      const applyResult = await createAcls(result);
-      handleResponses(applyResult.errors, applyResult.created);
-
-      navigate({ to: `/security/roles/${roleName}/details` });
-    } catch (error) {
-      toast.error(`Failed to create role: ${error}`);
-    }
-  };
-
-  return (
-    <PageContent>
-      <CreateACL
-        edit={false}
-        onCancel={() => navigate({ to: '/security/$tab', params: { tab: 'roles' } })}
-        onSubmit={createRoleAclMutation}
-        principalType={PrincipalTypeRedpandaRole}
-      />
-    </PageContent>
-  );
-};
-
-export default RoleCreatePage;
diff --git a/frontend/src/components/pages/roles/role-detail-page.tsx b/frontend/src/components/pages/roles/role-detail-page.tsx
deleted file mode 100644
index 988f72b671..0000000000
--- a/frontend/src/components/pages/roles/role-detail-page.tsx
+++ /dev/null
@@ -1,181 +0,0 @@
-/**
- * Copyright 2025 Redpanda Data, Inc.
- *
- * Use of this software is governed by the Business Source License
- * included in the file https://github.com/redpanda-data/redpanda/blob/dev/licenses/bsl.md
- *
- * As of the Change Date specified in that file, in accordance with
- * the Business Source License, use of this software will be governed
- * by the Apache License, Version 2.0
- */
-
-import { getRouteApi, useNavigate } from '@tanstack/react-router';
-
-const routeApi = getRouteApi('/security/roles/$roleName/details');
-
-import { Eye, Pencil } from 'lucide-react';
-import { useEffect, useMemo } from 'react';
-import { uiState } from 'state/ui-state';
-
-import { MatchingUsersCard } from './matching-users-card';
-import { useGetAclsByPrincipal } from '../../../react-query/api/acl';
-import PageContent from '../../misc/page-content';
-import { Button } from '../../redpanda-ui/components/button';
-import { Card, CardContent, CardHeader } from '../../redpanda-ui/components/card';
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../../redpanda-ui/components/table';
-import { Text } from '../../redpanda-ui/components/typography';
-import type { AclDetail } from '../acls/new-acl/acl.model';
-import { ACLDetails } from '../acls/new-acl/acl-details';
-
-type SecurityAclRulesTableProps = {
-  data: AclDetail[];
-  roleName: string;
-};
-
-// Table to display multiple ACL rules for a role
-const SecurityAclRulesTable = ({ data, roleName }: SecurityAclRulesTableProps) => {
-  const navigate = useNavigate();
-
-  return (
-    <Card size="full">
-      <CardHeader>
-        <h2 className="font-medium text-lg">Security ACL rules</h2>
-      </CardHeader>
-      <CardContent>
-        <Table>
-          <TableHeader>
-            <TableRow>
-              <TableHead>Principal</TableHead>
-              <TableHead>Host</TableHead>
-              <TableHead>ACLs count</TableHead>
-              <TableHead>{''}</TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {data.map((aclData) => (
-              <TableRow
-                data-testid={`role-acl-table-row-${aclData.sharedConfig.host}`}
-                key={`table-item-${aclData.sharedConfig.principal}-${aclData.sharedConfig.host}`}
-              >
-                <TableCell testId={`role-acl-principal-${aclData.sharedConfig.host}`}>
-                  {aclData.sharedConfig.principal}
-                </TableCell>
-                <TableCell testId={`role-acl-host-${aclData.sharedConfig.host}`}>{aclData.sharedConfig.host}</TableCell>
-                <TableCell testId={`role-acl-count-${aclData.sharedConfig.host}`}>{aclData.rules.length}</TableCell>
-                <TableCell>
-                  <div className="flex justify-end gap-2">
-                    <Button
-                      onClick={() => {
-                        navigate({
-                          to: `/security/roles/${roleName}/details`,
-                          search: { host: aclData.sharedConfig.host },
-                        });
-                      }}
-                      size="sm"
-                      testId={`view-role-acl-${aclData.sharedConfig.host}`}
-                      variant="outline"
-                    >
-                      <Eye className="h-4 w-4" />
-                    </Button>
-                    <Button
-                      onClick={() => {
-                        navigate({
-                          to: `/security/roles/${roleName}/update`,
-                          search: { host: aclData.sharedConfig.host },
-                        });
-                      }}
-                      size="sm"
-                      testId={`edit-role-acl-${aclData.sharedConfig.host}`}
-                      variant="outline"
-                    >
-                      <Pencil className="h-4 w-4" />
-                    </Button>
-                  </div>
-                </TableCell>
-              </TableRow>
-            ))}
-          </TableBody>
-        </Table>
-      </CardContent>
-    </Card>
-  );
-};
-
-const RoleDetailPage = () => {
-  const { roleName } = routeApi.useParams();
-  const navigate = useNavigate({ from: '/security/roles/$roleName/details' });
-  const search = routeApi.useSearch();
-  const host = search.host ?? undefined;
-
-  useEffect(() => {
-    uiState.pageBreadcrumbs = [
-      { title: 'Security', linkTo: '/security' },
-      { title: 'Roles', linkTo: '/security/roles' },
-      { title: roleName, linkTo: `/security/roles/${roleName}/details` },
-      { title: 'Role Configuration Details', linkTo: '' },
-    ];
-  }, [roleName]);
-
-  // Fetch ACLs for the role
-  const { data, isLoading } = useGetAclsByPrincipal(`RedpandaRole:${roleName}`, host);
-
-  const renderACLInformation = useMemo(() => {
-    if (!data || data.length === 0) {
-      return (
-        <div className="flex h-96 items-center justify-center">
-          <div className="text-gray-500">No Role data found.</div>
-        </div>
-      );
-    }
-
-    if (data.length === 1) {
-      const acl = data[0];
-      return <ACLDetails rules={acl.rules} sharedConfig={acl.sharedConfig} />;
-    }
-    return <SecurityAclRulesTable data={data} roleName={roleName} />;
-  }, [data, roleName]);
-
-  if (isLoading) {
-    return (
-      <PageContent>
-        <div className="flex h-96 items-center justify-center">
-          <div className="text-gray-500">Loading role details...</div>
-        </div>
-      </PageContent>
-    );
-  }
-
-  return (
-    <PageContent>
-      <div className="flex items-center justify-between">
-        <Text>
-          Configuration for role: <Text as="span">{roleName}</Text>
-        </Text>
-        {(!!host || data?.length === 1) && (
-          <div>
-            <Button
-              data-testid="update-acl-button"
-              onClick={() =>
-                navigate({
-                  to: `/security/roles/${roleName}/update`,
-                  search: { host },
-                })
-              }
-              variant="primary"
-            >
-              <Pencil className="mr-2 h-4 w-4" />
-              Edit ACL
-            </Button>
-          </div>
-        )}
-      </div>
-
-      <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
-        <div className="col-span-2 w-full">{renderACLInformation}</div>
-        <MatchingUsersCard principal={`Redpanda:${roleName}`} principalType="RedpandaRole" />
-      </div>
-    </PageContent>
-  );
-};
-
-export default RoleDetailPage;
diff --git a/frontend/src/components/pages/roles/role-update-page.tsx b/frontend/src/components/pages/roles/role-update-page.tsx
deleted file mode 100644
index f3884b0ccc..0000000000
--- a/frontend/src/components/pages/roles/role-update-page.tsx
+++ /dev/null
@@ -1,133 +0,0 @@
-/**
- * Copyright 2025 Redpanda Data, Inc.
- *
- * Use of this software is governed by the Business Source License
- * included in the file https://github.com/redpanda-data/redpanda/blob/dev/licenses/bsl.md
- *
- * As of the Change Date specified in that file, in accordance with
- * the Business Source License, use of this software will be governed
- * by the Apache License, Version 2.0
- */
-
-import { getRouteApi, useNavigate } from '@tanstack/react-router';
-
-const routeApi = getRouteApi('/security/roles/$roleName/update');
-
-import {
-  getOperationsForResourceType,
-  handleResponses,
-  ModeAllowAll,
-  ModeDenyAll,
-  OperationTypeAllow,
-  OperationTypeDeny,
-  PrincipalTypeRedpandaRole,
-  type Rule,
-  type SharedConfig,
-} from 'components/pages/acls/new-acl/acl.model';
-import CreateACL from 'components/pages/acls/new-acl/create-acl';
-import { HostSelector } from 'components/pages/acls/new-acl/host-selector';
-import { useEffect } from 'react';
-
-import { useGetAclsByPrincipal, useUpdateAclMutation } from '../../../react-query/api/acl';
-import { uiState } from '../../../state/ui-state';
-import PageContent from '../../misc/page-content';
-
-const RoleUpdatePage = () => {
-  const navigate = useNavigate({ from: '/security/roles/$roleName/update' });
-  const { roleName } = routeApi.useParams();
-  const search = routeApi.useSearch();
-  const host = search.host ?? undefined;
-
-  const { applyUpdates } = useUpdateAclMutation();
-
-  useEffect(() => {
-    uiState.pageBreadcrumbs = [
-      { title: 'Security', linkTo: '/security' },
-      { title: 'Roles', linkTo: '/security/roles' },
-      { title: roleName, linkTo: `/security/roles/${roleName}/details` },
-      { title: 'Update Role', linkTo: '', heading: '' },
-    ];
-  }, [roleName]);
-
-  // Fetch existing ACL data for the role
-  const { data, isLoading } = useGetAclsByPrincipal(`RedpandaRole:${roleName}`, host);
-
-  const updateRoleAclMutation =
-    (actualRules: Rule[], sharedConfig: SharedConfig) => async (_: string, _2: string, rules: Rule[]) => {
-      const applyResult = await applyUpdates(actualRules, sharedConfig, rules);
-      handleResponses(applyResult.errors, applyResult.created);
-
-      navigate({
-        to: `/security/roles/${roleName}/details`,
-        search: { host },
-      });
-    };
-
-  if (isLoading) {
-    return (
-      <PageContent>
-        <div className="flex h-96 items-center justify-center">
-          <div className="text-gray-500">Loading role configuration...</div>
-        </div>
-      </PageContent>
-    );
-  }
-
-  // If multiple hosts exist and no host is selected, show host selector
-  if (data && data.length > 1 && !host) {
-    return (
-      <PageContent>
-        <HostSelector baseUrl={`/security/roles/${roleName}/update`} hosts={data} principalName={roleName} />
-      </PageContent>
-    );
-  }
-
-  const acl = data && data.length > 0 ? (host ? data.find((d) => d.sharedConfig.host === host) : data[0]) : null;
-
-  const emptySharedConfig = { principal: `${PrincipalTypeRedpandaRole}${roleName}`, host: host ?? '*' };
-
-  // Ensure all operations are present for each rule
-  const rulesWithAllOperations = (acl?.rules ?? []).map((rule) => {
-    const allOperations = getOperationsForResourceType(rule.resourceType);
-    let mergedOperations = { ...allOperations };
-
-    // If mode is AllowAll or DenyAll, set all operations accordingly
-    if (rule.mode === ModeAllowAll) {
-      mergedOperations = Object.fromEntries(Object.keys(allOperations).map((op) => [op, OperationTypeAllow]));
-    } else if (rule.mode === ModeDenyAll) {
-      mergedOperations = Object.fromEntries(Object.keys(allOperations).map((op) => [op, OperationTypeDeny]));
-    } else {
-      // For custom mode, override with the actual values from the fetched rule
-      for (const [op, value] of Object.entries(rule.operations)) {
-        if (op in mergedOperations) {
-          mergedOperations[op] = value;
-        }
-      }
-    }
-
-    return {
-      ...rule,
-      operations: mergedOperations,
-    };
-  });
-
-  return (
-    <PageContent>
-      <CreateACL
-        edit={true}
-        onCancel={() =>
-          navigate({
-            to: `/security/roles/${roleName}/details`,
-            search: { host },
-          })
-        }
-        onSubmit={updateRoleAclMutation(acl?.rules ?? [], acl?.sharedConfig ?? emptySharedConfig)}
-        principalType={PrincipalTypeRedpandaRole}
-        rules={rulesWithAllOperations.length > 0 ? rulesWithAllOperations : undefined}
-        sharedConfig={acl?.sharedConfig ?? emptySharedConfig}
-      />
-    </PageContent>
-  );
-};
-
-export default RoleUpdatePage;
diff --git a/frontend/src/components/pages/roles/user-acls-card.test.tsx b/frontend/src/components/pages/roles/user-acls-card.test.tsx
deleted file mode 100644
index 40676d876b..0000000000
--- a/frontend/src/components/pages/roles/user-acls-card.test.tsx
+++ /dev/null
@@ -1,108 +0,0 @@
-/**
- * Copyright 2025 Redpanda Data, Inc.
- *
- * Use of this software is governed by the Business Source License
- * included in the file https://github.com/redpanda-data/redpanda/blob/dev/licenses/bsl.md
- *
- * As of the Change Date specified in that file, in accordance with
- * the Business Source License, use of this software will be governed
- * by the Apache License, Version 2.0
- */
-
-import { renderWithFileRoutes, screen } from 'test-utils';
-
-import { UserAclsCard } from './user-acls-card';
-import type { AclDetail } from '../acls/new-acl/acl.model';
-
-const mockAcls: AclDetail[] = [
-  {
-    sharedConfig: {
-      principal: 'User:test-user',
-      host: '*',
-    },
-    rules: [
-      {
-        id: 1,
-        resourceType: 'topic',
-        mode: 'custom',
-        selectorType: 'literal',
-        selectorValue: 'test-topic',
-        operations: {
-          READ: 'allow',
-          WRITE: 'allow',
-        },
-      },
-    ],
-  },
-  {
-    sharedConfig: {
-      principal: 'User:test-user',
-      host: '192.168.1.1',
-    },
-    rules: [
-      {
-        id: 2,
-        resourceType: 'cluster',
-        mode: 'custom',
-        selectorType: 'any',
-        selectorValue: '',
-        operations: {
-          DESCRIBE: 'allow',
-        },
-      },
-    ],
-  },
-];
-
-describe('UserAclsCard', () => {
-  test('should render empty state when no ACLs provided', () => {
-    renderWithFileRoutes(<UserAclsCard acls={[]} />);
-
-    expect(screen.getByText('ACLs (0)')).toBeInTheDocument();
-    expect(screen.getByText('No ACLs assigned to this user.')).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: 'Create ACL' })).toBeInTheDocument();
-  });
-
-  test('should render empty state when acls is undefined', () => {
-    renderWithFileRoutes(<UserAclsCard acls={undefined} />);
-
-    expect(screen.getByText('ACLs (0)')).toBeInTheDocument();
-    expect(screen.getByText('No ACLs assigned to this user.')).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: 'Create ACL' })).toBeInTheDocument();
-  });
-
-  test('should render ACL table with correct count', () => {
-    renderWithFileRoutes(<UserAclsCard acls={mockAcls} />);
-
-    expect(screen.getByText('ACLs (2)')).toBeInTheDocument();
-  });
-
-  test('should render ACL rows with principal and host', () => {
-    renderWithFileRoutes(<UserAclsCard acls={mockAcls} />);
-
-    expect(screen.getByTestId('acl-principal-User:test-user-*')).toHaveTextContent('User:test-user');
-    expect(screen.getByTestId('acl-principal-User:test-user-192.168.1.1')).toHaveTextContent('User:test-user');
-    expect(screen.getByTestId('acl-host-*')).toHaveTextContent('*');
-    expect(screen.getByTestId('acl-host-192.168.1.1')).toHaveTextContent('192.168.1.1');
-  });
-
-  test('should render action buttons for each ACL', () => {
-    renderWithFileRoutes(<UserAclsCard acls={mockAcls} />);
-
-    // Check toggle buttons
-    expect(screen.getByTestId('toggle-acl-User:test-user-*')).toBeInTheDocument();
-    expect(screen.getByTestId('toggle-acl-User:test-user-192.168.1.1')).toBeInTheDocument();
-
-    // Check edit buttons
-    expect(screen.getByTestId('edit-acl-User:test-user-*')).toBeInTheDocument();
-    expect(screen.getByTestId('edit-acl-User:test-user-192.168.1.1')).toBeInTheDocument();
-  });
-
-  test('should render table headers', () => {
-    renderWithFileRoutes(<UserAclsCard acls={mockAcls} />);
-
-    expect(screen.getByText('Name')).toBeInTheDocument();
-    expect(screen.getByText('Hosts')).toBeInTheDocument();
-    expect(screen.getByText('Actions')).toBeInTheDocument();
-  });
-});
diff --git a/frontend/src/components/pages/roles/user-acls-card.tsx b/frontend/src/components/pages/roles/user-acls-card.tsx
deleted file mode 100644
index 0510f02832..0000000000
--- a/frontend/src/components/pages/roles/user-acls-card.tsx
+++ /dev/null
@@ -1,159 +0,0 @@
-/**
- * Copyright 2025 Redpanda Data, Inc.
- *
- * Use of this software is governed by the Business Source License
- * included in the file https://github.com/redpanda-data/redpanda/blob/dev/licenses/bsl.md
- *
- * As of the Change Date specified in that file, in accordance with
- * the Business Source License, use of this software will be governed
- * by the Apache License, Version 2.0
- */
-
-import { useNavigate } from '@tanstack/react-router';
-import { Eye, EyeOff, Pencil } from 'lucide-react';
-import { useState } from 'react';
-
-import { Button } from '../../redpanda-ui/components/button';
-import { Card, CardAction, CardContent, CardHeader, CardTitle } from '../../redpanda-ui/components/card';
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../../redpanda-ui/components/table';
-import { type AclDetail, getRuleDataTestId, parsePrincipal } from '../acls/new-acl/acl.model';
-import { OperationsBadge } from '../acls/new-acl/operations-badge';
-
-type UserAclsCardProps = {
-  acls?: AclDetail[];
-};
-
-type AclTableRowProps = {
-  acl: AclDetail;
-  isExpanded: boolean;
-  onToggle: () => void;
-};
-
-const AclTableRow = ({ acl, isExpanded, onToggle }: AclTableRowProps) => {
-  const rowKey = `${acl.sharedConfig.principal}-${acl.sharedConfig.host}`;
-  const navigate = useNavigate();
-
-  return [
-    <TableRow className="hover:bg-gray-50" key={`acl-${rowKey}`}>
-      <TableCell testId={`acl-principal-${rowKey}`}>{acl.sharedConfig.principal}</TableCell>
-      <TableCell testId={`acl-host-${acl.sharedConfig.host}`}>{acl.sharedConfig.host}</TableCell>
-      <TableCell align="right">
-        <div className="flex items-center justify-end gap-2">
-          <Button onClick={onToggle} size="sm" testId={`toggle-acl-${rowKey}`} variant="outline">
-            {isExpanded ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
-          </Button>
-          <Button
-            onClick={(e) => {
-              e.stopPropagation();
-              navigate({
-                to: `/security/acls/${parsePrincipal(acl.sharedConfig.principal).name}/details`,
-                search: { host: acl.sharedConfig.host },
-              });
-            }}
-            size="sm"
-            testId={`edit-acl-${rowKey}`}
-            variant="outline"
-          >
-            <Pencil className="h-4 w-4" />
-          </Button>
-        </div>
-      </TableCell>
-    </TableRow>,
-    isExpanded && (
-      <TableRow key={`acl-${rowKey}-expanded`}>
-        <TableCell className="bg-gray-50 p-6" colSpan={3}>
-          <div className="space-y-4">
-            <div className="font-semibold text-gray-700 text-sm">ACL Rules ({acl.rules.length})</div>
-            {acl.rules.map((rule) => (
-              <div
-                className="rounded-lg border border-gray-200 bg-white p-4"
-                data-testid={`rule-${getRuleDataTestId(rule)}`}
-                key={rule.id}
-              >
-                <OperationsBadge rule={rule} />
-              </div>
-            ))}
-          </div>
-        </TableCell>
-      </TableRow>
-    ),
-  ];
-};
-
-export const UserAclsCard = ({ acls }: UserAclsCardProps) => {
-  const navigate = useNavigate();
-  const [expandedRows, setExpandedRows] = useState<Set<string>>(new Set());
-
-  const toggleRow = (key: string) => {
-    setExpandedRows((prev) => {
-      const next = new Set(prev);
-      if (next.has(key)) {
-        next.delete(key);
-      } else {
-        next.add(key);
-      }
-      return next;
-    });
-  };
-
-  if (!acls || acls.length === 0) {
-    return (
-      <Card size="full">
-        <CardHeader className="flex items-center justify-between">
-          <CardTitle>ACLs (0)</CardTitle>
-          <CardAction>
-            <Button
-              onClick={() => {
-                navigate({
-                  to: '/security/acls/create',
-                  search: { principalType: undefined, principalName: undefined },
-                });
-              }}
-              testId="create-acl-button"
-              variant="outline"
-            >
-              Create ACL
-            </Button>
-          </CardAction>
-        </CardHeader>
-        <CardContent>
-          <p>No ACLs assigned to this user.</p>
-        </CardContent>
-      </Card>
-    );
-  }
-
-  return (
-    <Card size="full">
-      <CardHeader className="flex items-center justify-between">
-        <CardTitle>ACLs ({acls.length})</CardTitle>
-      </CardHeader>
-      <CardContent>
-        <Table>
-          <TableHeader>
-            <TableRow>
-              <TableHead>Name</TableHead>
-              <TableHead>Hosts</TableHead>
-              <TableHead align="right">Actions</TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {acls.flatMap((acl) => {
-              const rowKey = `${acl.sharedConfig.principal}-${acl.sharedConfig.host}`;
-              const isExpanded = expandedRows.has(rowKey);
-
-              return (
-                <AclTableRow
-                  acl={acl}
-                  isExpanded={isExpanded}
-                  key={`acl-${rowKey}`}
-                  onToggle={() => toggleRow(rowKey)}
-                />
-              );
-            })}
-          </TableBody>
-        </Table>
-      </CardContent>
-    </Card>
-  );
-};
diff --git a/frontend/src/components/pages/roles/user-information-card.tsx b/frontend/src/components/pages/roles/user-information-card.tsx
deleted file mode 100644
index 29ec6f0d41..0000000000
--- a/frontend/src/components/pages/roles/user-information-card.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-/**
- * Copyright 2025 Redpanda Data, Inc.
- *
- * Use of this software is governed by the Business Source License
- * included in the file https://github.com/redpanda-data/redpanda/blob/dev/licenses/bsl.md
- *
- * As of the Change Date specified in that file, in accordance with
- * the Business Source License, use of this software will be governed
- * by the Apache License, Version 2.0
- */
-
-import { Button } from '../../redpanda-ui/components/button';
-import { Card, CardContent, CardHeader, CardTitle } from '../../redpanda-ui/components/card';
-import { Separator } from '../../redpanda-ui/components/separator';
-import { Text } from '../../redpanda-ui/components/typography';
-
-type UserInformationCardProps = {
-  username: string;
-  onEditPassword?: () => void;
-};
-
-export const UserInformationCard = ({ username, onEditPassword }: UserInformationCardProps) => {
-  return (
-    <Card size="full">
-      <CardHeader>
-        <CardTitle>User information</CardTitle>
-      </CardHeader>
-      <CardContent className="space-y-4">
-        {/* Username Row */}
-        <div className="grid grid-cols-3 items-center gap-4 py-2">
-          <Text variant="label">Username</Text>
-          <Text>{username}</Text>
-        </div>
-
-        <Separator />
-
-        {/* Password Row */}
-        <div className="grid grid-cols-3 items-center gap-4 py-2">
-          <Text variant="label">Password</Text>
-          <Text variant="muted">Passwords cannot be viewed</Text>
-          <div className="flex justify-end">
-            {Boolean(onEditPassword) && (
-              <Button onClick={onEditPassword} size="sm" variant="outline">
-                Edit
-              </Button>
-            )}
-          </div>
-        </div>
-      </CardContent>
-    </Card>
-  );
-};
diff --git a/frontend/src/components/pages/roles/user-roles-card.test.tsx b/frontend/src/components/pages/roles/user-roles-card.test.tsx
deleted file mode 100644
index 821950d09f..0000000000
--- a/frontend/src/components/pages/roles/user-roles-card.test.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-/**
- * Copyright 2025 Redpanda Data, Inc.
- *
- * Use of this software is governed by the Business Source License
- * included in the file https://github.com/redpanda-data/redpanda/blob/dev/licenses/bsl.md
- *
- * As of the Change Date specified in that file, in accordance with
- * the Business Source License, use of this software will be governed
- * by the Apache License, Version 2.0
- */
-
-import { renderWithFileRoutes, screen } from 'test-utils';
-
-import { UserRolesCard } from './user-roles-card';
-
-const mockRoles = [
-  {
-    principalType: 'RedpandaRole',
-    principalName: 'admin',
-  },
-  {
-    principalType: 'RedpandaRole',
-    principalName: 'viewer',
-  },
-];
-
-describe('UserRolesCard', () => {
-  test('should render empty state when no roles provided', () => {
-    renderWithFileRoutes(<UserRolesCard roles={[]} />);
-
-    expect(screen.getByText('Roles')).toBeInTheDocument();
-    expect(screen.getByText('No permissions assigned to this user.')).toBeInTheDocument();
-  });
-
-  test('should render Assign Role button in empty state when onChangeRoles is provided', () => {
-    const mockOnChangeRoles = vi.fn();
-    renderWithFileRoutes(<UserRolesCard onChangeRoles={mockOnChangeRoles} roles={[]} />);
-
-    expect(screen.getByTestId('assign-role-button')).toBeInTheDocument();
-  });
-
-  test('should not render Assign Role button in empty state when onChangeRoles is not provided', () => {
-    renderWithFileRoutes(<UserRolesCard roles={[]} />);
-
-    expect(screen.queryByTestId('assign-role-button')).not.toBeInTheDocument();
-  });
-
-  test('should render roles table with role names', () => {
-    renderWithFileRoutes(<UserRolesCard roles={mockRoles} />);
-
-    expect(screen.getByTestId('role-name-admin')).toHaveTextContent('admin');
-    expect(screen.getByTestId('role-name-viewer')).toHaveTextContent('viewer');
-  });
-
-  test('should render action buttons for each role', () => {
-    renderWithFileRoutes(<UserRolesCard roles={mockRoles} />);
-
-    expect(screen.getByTestId('view-role-admin')).toBeInTheDocument();
-    expect(screen.getByTestId('view-role-viewer')).toBeInTheDocument();
-  });
-
-  test('should render table headers', () => {
-    renderWithFileRoutes(<UserRolesCard roles={mockRoles} />);
-
-    expect(screen.getByText('Name')).toBeInTheDocument();
-    expect(screen.getByText('Actions')).toBeInTheDocument();
-  });
-
-  test('should render Change Role button when roles exist and onChangeRoles is provided', () => {
-    const mockOnChangeRoles = vi.fn();
-    renderWithFileRoutes(<UserRolesCard onChangeRoles={mockOnChangeRoles} roles={mockRoles} />);
-
-    expect(screen.getByTestId('change-role-button')).toBeInTheDocument();
-  });
-});
diff --git a/frontend/src/components/pages/roles/user-roles-card.tsx b/frontend/src/components/pages/roles/user-roles-card.tsx
deleted file mode 100644
index b3d206ffac..0000000000
--- a/frontend/src/components/pages/roles/user-roles-card.tsx
+++ /dev/null
@@ -1,187 +0,0 @@
-/**
- * Copyright 2025 Redpanda Data, Inc.
- *
- * Use of this software is governed by the Business Source License
- * included in the file https://github.com/redpanda-data/redpanda/blob/dev/licenses/bsl.md
- *
- * As of the Change Date specified in that file, in accordance with
- * the Business Source License, use of this software will be governed
- * by the Apache License, Version 2.0
- */
-
-import { useNavigate } from '@tanstack/react-router';
-import { Eye, EyeOff, Pencil } from 'lucide-react';
-import { useState } from 'react';
-
-import { useGetAclsByPrincipal } from '../../../react-query/api/acl';
-import { Button } from '../../redpanda-ui/components/button';
-import { Card, CardAction, CardContent, CardHeader, CardTitle } from '../../redpanda-ui/components/card';
-import { Skeleton } from '../../redpanda-ui/components/skeleton';
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../../redpanda-ui/components/table';
-import type { AclDetail } from '../acls/new-acl/acl.model';
-import { getRuleDataTestId } from '../acls/new-acl/acl.model';
-import { OperationsBadge } from '../acls/new-acl/operations-badge';
-
-type Role = {
-  principalType: string;
-  principalName: string;
-};
-
-type UserRolesCardProps = {
-  roles: Role[];
-  onChangeRoles?: () => void;
-};
-
-type RoleTableRowProps = {
-  role: Role;
-  isExpanded: boolean;
-  onToggle: () => void;
-};
-
-const RoleTableRow = ({ role, isExpanded, onToggle }: RoleTableRowProps) => {
-  const navigate = useNavigate();
-  const { data: acls, isLoading } = useGetAclsByPrincipal<AclDetail[]>(
-    `RedpandaRole:${role.principalName}`,
-    undefined,
-    undefined,
-    {
-      enabled: isExpanded,
-    }
-  );
-  const rowKey = role.principalName;
-
-  return [
-    <TableRow className="hover:bg-gray-50" key={`role-${rowKey}`}>
-      <TableCell testId={`role-name-${rowKey}`}>{role.principalName}</TableCell>
-      <TableCell align="right">
-        <div className="flex items-center justify-end gap-2">
-          <Button onClick={onToggle} size="sm" testId={`toggle-role-${rowKey}`} variant="outline">
-            {isExpanded ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
-          </Button>
-          <Button
-            onClick={(e) => {
-              e.stopPropagation();
-              navigate({ to: `/security/roles/${role.principalName}/details` });
-            }}
-            size="sm"
-            testId={`view-role-${rowKey}`}
-            variant="outline"
-          >
-            <Pencil className="h-4 w-4" />
-          </Button>
-        </div>
-      </TableCell>
-    </TableRow>,
-    isLoading && (
-      <TableRow key={`role-${rowKey}-loading`}>
-        <TableCell>
-          <Skeleton />
-        </TableCell>
-        <TableCell>
-          <Skeleton />
-        </TableCell>
-      </TableRow>
-    ),
-    !isLoading && isExpanded && acls && acls.length > 0 && (
-      <TableRow key={`role-${rowKey}-expanded`}>
-        <TableCell className="bg-gray-50 p-6" colSpan={2}>
-          <div className="space-y-4">
-            <div className="font-semibold text-gray-700 text-sm">
-              ACL Rules ({acls.reduce((sum: number, acl: AclDetail) => sum + acl.rules.length, 0)})
-            </div>
-            {acls.map((acl: AclDetail) => (
-              <div key={`${acl.sharedConfig.principal}-${acl.sharedConfig.host}`}>
-                <div className="mb-2 text-gray-600 text-xs">Host: {acl.sharedConfig.host}</div>
-                {acl.rules.map((rule) => (
-                  <div
-                    className="rounded-lg border border-gray-200 bg-white p-4"
-                    data-testid={`rule-${getRuleDataTestId(rule)}`}
-                    key={rule.id}
-                  >
-                    <OperationsBadge rule={rule} />
-                  </div>
-                ))}
-              </div>
-            ))}
-          </div>
-        </TableCell>
-      </TableRow>
-    ),
-  ];
-};
-
-export const UserRolesCard = ({ roles, onChangeRoles }: UserRolesCardProps) => {
-  const [expandedRows, setExpandedRows] = useState<Set<string>>(new Set());
-
-  const toggleRow = (key: string) => {
-    setExpandedRows((prev) => {
-      const next = new Set(prev);
-      if (next.has(key)) {
-        next.delete(key);
-      } else {
-        next.add(key);
-      }
-      return next;
-    });
-  };
-
-  if (roles.length === 0) {
-    return (
-      <Card size="full">
-        <CardHeader className="flex items-center justify-between">
-          <CardTitle>Roles</CardTitle>
-          <CardAction>
-            {Boolean(onChangeRoles) && (
-              <Button onClick={onChangeRoles} testId="assign-role-button" variant="outline">
-                Assign role
-              </Button>
-            )}
-          </CardAction>
-        </CardHeader>
-        <CardContent>
-          <p>No permissions assigned to this user.</p>
-        </CardContent>
-      </Card>
-    );
-  }
-
-  return (
-    <Card size="full">
-      <CardHeader className="flex items-center justify-between">
-        <CardTitle>Roles</CardTitle>
-        <CardAction>
-          {Boolean(onChangeRoles) && (
-            <Button onClick={onChangeRoles} testId="change-role-button" variant="outline">
-              Change Role
-            </Button>
-          )}
-        </CardAction>
-      </CardHeader>
-      <CardContent>
-        <Table>
-          <TableHeader>
-            <TableRow>
-              <TableHead>Name</TableHead>
-              <TableHead align="right">Actions</TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {roles.flatMap((r) => {
-              const rowKey = r.principalName;
-              const isExpanded = expandedRows.has(rowKey);
-
-              return (
-                <RoleTableRow
-                  isExpanded={isExpanded}
-                  key={`role-${rowKey}`}
-                  onToggle={() => toggleRow(rowKey)}
-                  role={r}
-                />
-              );
-            })}
-          </TableBody>
-        </Table>
-      </CardContent>
-    </Card>
-  );
-};
diff --git a/frontend/src/components/pages/rp-connect/onboarding/add-user-step.tsx b/frontend/src/components/pages/rp-connect/onboarding/add-user-step.tsx
index af1e50bffd..66cab4d057 100644
--- a/frontend/src/components/pages/rp-connect/onboarding/add-user-step.tsx
+++ b/frontend/src/components/pages/rp-connect/onboarding/add-user-step.tsx
@@ -5,7 +5,7 @@ import { createConnectQueryKey } from '@connectrpc/connect-query';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useQueryClient } from '@tanstack/react-query';
 import { Link as TanStackRouterLink } from '@tanstack/react-router';
-import { generatePassword } from 'components/pages/acls/user-create';
+import { generatePassword } from 'components/pages/security/create-user-dialog';
 import { Alert, AlertDescription, AlertTitle } from 'components/redpanda-ui/components/alert';
 import { Button } from 'components/redpanda-ui/components/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from 'components/redpanda-ui/components/card';
@@ -544,8 +544,8 @@ export const AddUserStep = forwardRef<UserStepRef, AddUserStepProps & MotionProp
                                 Edit the user's{' '}
                                 <TanStackRouterLink
                                   className="text-blue-800"
-                                  params={{ userName: existingUserSelected.name }}
-                                  to="/security/users/$userName/details"
+                                  params={{ userName: encodeURIComponent(existingUserSelected.name) }}
+                                  to="/security/users/$userName"
                                 >
                                   ACLs
                                 </TanStackRouterLink>{' '}
diff --git a/frontend/src/components/pages/security/acl-editor.tsx b/frontend/src/components/pages/security/acl-editor.tsx
new file mode 100644
index 0000000000..a67cad634d
--- /dev/null
+++ b/frontend/src/components/pages/security/acl-editor.tsx
@@ -0,0 +1,600 @@
+/**
+ * Copyright 2026 Redpanda Data, Inc.
+ *
+ * Use of this software is governed by the Business Source License
+ * included in the file https://github.com/redpanda-data/redpanda/blob/dev/licenses/bsl.md
+ *
+ * As of the Change Date specified in that file, in accordance with
+ * the Business Source License, use of this software will be governed
+ * by the Apache License, Version 2.0
+ */
+
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from 'components/redpanda-ui/components/alert-dialog';
+import { Badge } from 'components/redpanda-ui/components/badge';
+import { Button } from 'components/redpanda-ui/components/button';
+import { Combobox, type ComboboxOption } from 'components/redpanda-ui/components/combobox';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from 'components/redpanda-ui/components/dialog';
+import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from 'components/redpanda-ui/components/empty';
+import { Input } from 'components/redpanda-ui/components/input';
+import { Label } from 'components/redpanda-ui/components/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from 'components/redpanda-ui/components/select';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from 'components/redpanda-ui/components/table';
+import { Text } from 'components/redpanda-ui/components/typography';
+import { Info, Plus, Shield, Trash2 } from 'lucide-react';
+import { ACL_ResourcePatternType } from 'protogen/redpanda/api/dataplane/v1/acl_pb';
+import { useEffect, useState } from 'react';
+
+// ─── Shared helpers ─────────────────────────────────────────────────────────
+
+export function truncateText(text: string, maxLen: number): string {
+  if (text.length <= maxLen) {
+    return text;
+  }
+  return `${text.slice(0, maxLen)}\u2026`;
+}
+
+export const RESOURCE_NAME_MAX = 64;
+export const PRINCIPAL_MAX = 60;
+
+export function getPatternTypeLabel(type?: number): string | null {
+  if (type === ACL_ResourcePatternType.PREFIXED) {
+    return 'Prefixed';
+  }
+  return null;
+}
+
+// ─── Shared ACL types & constants ────────────────────────────────────────────
+
+export interface ACLEntry {
+  resourceType: string;
+  resourceName: string;
+  operation: string;
+  permission: string;
+  host: string;
+  resourcePatternType?: number;
+}
+
+const resourceTypes: readonly string[] = ['Topic', 'Group', 'Cluster', 'TransactionalId'];
+
+const operationsByResourceType: Record<string, string[]> = {
+  Topic: ['All', 'Read', 'Write', 'Describe', 'Create', 'Delete', 'Alter', 'DescribeConfigs', 'AlterConfigs'],
+  Group: ['All', 'Read', 'Describe', 'Delete'],
+  Cluster: [
+    'All',
+    'Create',
+    'Describe',
+    'Alter',
+    'ClusterAction',
+    'DescribeConfigs',
+    'AlterConfigs',
+    'IdempotentWrite',
+  ],
+  TransactionalId: ['All', 'Describe', 'Write'],
+};
+
+const permissions: readonly string[] = ['Allow', 'Deny'];
+
+type PatternType = 'Literal' | 'Prefixed' | 'Any';
+
+function validateHost(host: string): string | null {
+  const trimmed = host.trim();
+  if (!trimmed) {
+    return 'Host is required';
+  }
+  if (trimmed === '*') {
+    return null;
+  }
+  if (trimmed.includes('/')) {
+    return 'CIDR notation is not supported. The Kafka ACL API only accepts a single IP address or * for all hosts.';
+  }
+  const ipv4 = /^(\d{1,3})\.(\d{1,3})\.(\d{1,3})\.(\d{1,3})$/;
+  const ipv6 = /^[0-9a-fA-F:]+$/;
+  if (ipv4.test(trimmed)) {
+    const parts = trimmed.split('.').map(Number);
+    if (parts.every((p) => p >= 0 && p <= 255)) {
+      return null;
+    }
+    return 'Invalid IPv4 address';
+  }
+  if (ipv6.test(trimmed) && trimmed.includes(':')) {
+    return null;
+  }
+  return 'Host must be * (all hosts) or a valid IP address. CIDR notation is not supported.';
+}
+
+// ─── ACL Dialog (create) ─────────────────────────────────────────────────────
+
+interface ACLDialogProps {
+  open: boolean;
+  context?: 'role' | 'user';
+  onSave: (acl: ACLEntry) => void;
+  onClose: () => void;
+  resourceOptionsByType?: Partial<Record<'Cluster' | 'Group' | 'Topic' | 'TransactionalId', ComboboxOption[]>>;
+}
+
+export function ACLDialog({ open, context = 'role', onSave, onClose, resourceOptionsByType = {} }: ACLDialogProps) {
+  const [resourceType, setResourceType] = useState('Topic');
+  const [resourceName, setResourceName] = useState('');
+  const [operation, setOperation] = useState('All');
+  const [permission, setPermission] = useState('Allow');
+  const [host, setHost] = useState('*');
+  const [patternType, setPatternType] = useState<PatternType>('Literal');
+  const [error, setError] = useState<string | null>(null);
+
+  const resourceOptions = resourceOptionsByType[resourceType as keyof typeof resourceOptionsByType] ?? [];
+
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+    setResourceType('Topic');
+    setResourceName('');
+    setOperation('All');
+    setPermission('Allow');
+    setHost('*');
+    setPatternType('Literal');
+    setError(null);
+  }, [open]);
+
+  const handleSave = () => {
+    let resolvedResourceName = '';
+    if (resourceType === 'Cluster') {
+      resolvedResourceName = 'kafka-cluster';
+    } else if (patternType === 'Any') {
+      resolvedResourceName = '*';
+    } else {
+      if (!resourceName.trim()) {
+        setError('Resource name is required');
+        return;
+      }
+      resolvedResourceName = resourceName.trim();
+    }
+    const hostError = validateHost(host);
+    if (hostError) {
+      setError(hostError);
+      return;
+    }
+    const patternTypeMap: Record<PatternType, ACL_ResourcePatternType> = {
+      Literal: ACL_ResourcePatternType.LITERAL,
+      Prefixed: ACL_ResourcePatternType.PREFIXED,
+      Any: ACL_ResourcePatternType.LITERAL,
+    };
+
+    onSave({
+      resourceType,
+      resourceName: resolvedResourceName,
+      operation,
+      permission,
+      host: host.trim(),
+      resourcePatternType: patternTypeMap[patternType],
+    });
+  };
+
+  const entityLabel = context === 'user' ? 'user' : 'role';
+
+  return (
+    <Dialog onOpenChange={(o) => !o && onClose()} open={open}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader spacing="loose">
+          <DialogTitle>Add ACL</DialogTitle>
+          <DialogDescription>Define a new access control rule for this {entityLabel}.</DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4">
+          {/* Resource Type */}
+          <div className="space-y-1">
+            <Label>Resource Type</Label>
+            <Select
+              onValueChange={(v) => {
+                setResourceType(v);
+                setResourceName('');
+                const ops = operationsByResourceType[v] || [];
+                if (!ops.includes(operation)) {
+                  setOperation(ops[0] || 'All');
+                }
+                if (v === 'Cluster') {
+                  setResourceName('');
+                  setPatternType('Literal');
+                }
+                setError(null);
+              }}
+              value={resourceType}
+            >
+              <SelectTrigger>
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {resourceTypes.map((t) => (
+                  <SelectItem key={t} value={t}>
+                    {t}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          {/* Pattern Type — hidden for Cluster */}
+          {resourceType !== 'Cluster' && (
+            <div className="space-y-1">
+              <Label>Pattern Type</Label>
+              <div className="flex gap-1 rounded-lg border p-1">
+                {(['Literal', 'Prefixed', 'Any'] as const).map((pt) => (
+                  <button
+                    className={`flex-1 rounded-md px-3 py-1.5 text-sm transition-colors ${
+                      patternType === pt
+                        ? 'bg-foreground text-background shadow-sm'
+                        : 'text-muted-foreground hover:text-foreground'
+                    }`}
+                    key={pt}
+                    onClick={() => {
+                      setPatternType(pt);
+                      if (pt === 'Any') {
+                        setResourceName('');
+                      }
+                      setError(null);
+                    }}
+                    type="button"
+                  >
+                    {pt}
+                  </button>
+                ))}
+              </div>
+              <p className="text-muted-foreground text-sm">
+                {patternType === 'Literal' && 'Matches the exact resource name.'}
+                {patternType === 'Prefixed' && 'Matches any resource whose name starts with this prefix.'}
+                {patternType === 'Any' && 'Matches all resources of this type (wildcard).'}
+              </p>
+            </div>
+          )}
+
+          {resourceType === 'Cluster' && (
+            <div className="flex items-start gap-2 rounded-lg border bg-muted/30 px-3 py-2.5">
+              <Info className="mt-0.5 size-3.5 shrink-0 text-muted-foreground" />
+              <p className="text-muted-foreground text-sm">
+                Cluster ACLs apply to the entire Kafka cluster. No resource name is needed.
+              </p>
+            </div>
+          )}
+
+          {/* Resource Name — hidden for Cluster and "Any" pattern */}
+          {resourceType !== 'Cluster' && patternType !== 'Any' && (
+            <div className="space-y-1">
+              <Label htmlFor="acl-resource-name">
+                {patternType === 'Prefixed' ? 'Resource Name Prefix' : 'Resource Name'}
+              </Label>
+              <Combobox
+                autocomplete
+                className="font-mono"
+                creatable
+                onChange={(value) => {
+                  setResourceName(value);
+                  setError(null);
+                }}
+                options={resourceOptions}
+                placeholder={patternType === 'Prefixed' ? 'e.g. com.company.events' : 'e.g. my-topic'}
+                value={resourceName}
+              />
+            </div>
+          )}
+
+          {/* Operation */}
+          <div className="space-y-1">
+            <Label>Operation</Label>
+            <Select onValueChange={setOperation} value={operation}>
+              <SelectTrigger>
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {(operationsByResourceType[resourceType] || []).map((op) => (
+                  <SelectItem key={op} value={op}>
+                    {op}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          {/* Permission */}
+          <div className="space-y-1">
+            <Label>Permission</Label>
+            <Select onValueChange={setPermission} value={permission}>
+              <SelectTrigger>
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {permissions.map((p) => (
+                  <SelectItem key={p} value={p}>
+                    <span className={p === 'Allow' ? 'text-emerald-600' : 'text-destructive'}>{p}</span>
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          {/* Host */}
+          <div className="space-y-3">
+            <div className="space-y-1">
+              <Label htmlFor="acl-host">Host</Label>
+              <p className="text-muted-foreground text-sm">
+                Use <code className="rounded bg-muted px-1 font-mono">*</code> for all hosts, or an exact IP address.
+                CIDR ranges are not supported by the Kafka API.
+              </p>
+            </div>
+            <Input
+              className="font-mono"
+              id="acl-host"
+              onChange={(e) => {
+                setHost(e.target.value);
+                setError(null);
+              }}
+              placeholder="*"
+              type="text"
+              value={host}
+            />
+          </div>
+
+          {Boolean(error) && <p className="text-destructive text-sm">{error}</p>}
+        </div>
+
+        <DialogFooter>
+          <Button onClick={onClose} variant="outline">
+            Cancel
+          </Button>
+          <Button onClick={handleSave}>Add ACL</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+// ─── ACL Remove Confirmation Dialog ──────────────────────────────────────────
+
+interface ACLRemoveDialogProps {
+  open: boolean;
+  acl: ACLEntry | null;
+  context?: 'role' | 'user';
+  onConfirm: () => void;
+  onClose: () => void;
+}
+
+export function ACLRemoveDialog({ open, acl, context = 'role', onConfirm, onClose }: ACLRemoveDialogProps) {
+  return (
+    <AlertDialog onOpenChange={(o) => !o && onClose()} open={open}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Remove ACL?</AlertDialogTitle>
+          <AlertDialogDescription>
+            {context === 'user'
+              ? 'Remove this access control rule from the user?'
+              : 'Remove this access control rule from the role? Principals assigned to this role will lose this permission.'}
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        {acl && (
+          <div className="rounded-lg border bg-muted/30 px-3 py-2.5 text-sm">
+            <div className="flex items-center gap-1.5">
+              <Badge className="font-normal text-sm" variant="outline">
+                {acl.resourceType}
+              </Badge>
+              <span className="font-mono">{acl.resourceName}</span>
+            </div>
+            <p className="mt-1 text-muted-foreground text-sm">
+              {acl.operation} / {acl.permission} / Host: {acl.host}
+            </p>
+          </div>
+        )}
+        <AlertDialogFooter>
+          <AlertDialogCancel asChild>
+            <Button variant="outline">Cancel</Button>
+          </AlertDialogCancel>
+          <AlertDialogAction asChild onClick={onConfirm}>
+            <Button variant="destructive">Remove</Button>
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}
+
+// ─── ACL Table with actions ──────────────────────────────────────────────────
+
+interface ACLTableSectionProps {
+  acls: ACLEntry[];
+  context?: 'role' | 'user';
+  onAdd: () => void;
+  onRemove: (index: number) => void;
+}
+
+export function ACLTableSection({ acls, context = 'role', onAdd, onRemove }: ACLTableSectionProps) {
+  return (
+    <div>
+      <div className="mb-4 flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <Shield className="size-4 text-muted-foreground" />
+          <Text as="span" className="font-semibold text-base">
+            ACLs
+          </Text>
+          <Text as="span" variant="muted">
+            {acls.length} {acls.length === 1 ? 'rule' : 'rules'}
+          </Text>
+        </div>
+        {acls.length > 0 && (
+          <Button onClick={onAdd}>
+            <Plus className="size-4" />
+            Add ACL
+          </Button>
+        )}
+      </div>
+      <div className="overflow-hidden rounded-lg border">
+        {acls.length > 0 ? (
+          <Table className="table-fixed" size="lg">
+            <TableHeader>
+              <TableRow className="hover:bg-transparent">
+                <TableHead className="w-[14%]">Resource Type</TableHead>
+                <TableHead className="w-auto">Resource Name</TableHead>
+                <TableHead className="w-[12%]">Operation</TableHead>
+                <TableHead className="w-[10%]">Permission</TableHead>
+                <TableHead className="w-[10%]">Host</TableHead>
+                <TableHead className="w-16">
+                  <span className="sr-only">Actions</span>
+                </TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {acls.map((acl, idx) => (
+                <TableRow key={`${acl.resourceType}-${acl.resourceName}-${acl.operation}-${idx}`}>
+                  <TableCell className="py-1.5">
+                    <Badge className="font-normal text-sm" variant="outline">
+                      {acl.resourceType}
+                    </Badge>
+                  </TableCell>
+                  <TableCell className="max-w-0 py-1.5">
+                    <span className="flex items-center gap-1.5">
+                      <span className="truncate font-mono text-base" title={acl.resourceName}>
+                        {truncateText(acl.resourceName, RESOURCE_NAME_MAX)}
+                      </span>
+                      {Boolean(getPatternTypeLabel(acl.resourcePatternType)) && (
+                        <Badge className="shrink-0 font-normal text-xs" variant="secondary">
+                          {getPatternTypeLabel(acl.resourcePatternType)}
+                        </Badge>
+                      )}
+                    </span>
+                  </TableCell>
+                  <TableCell className="py-1.5 text-base">{acl.operation}</TableCell>
+                  <TableCell className="py-1.5">
+                    <span
+                      className={`font-medium text-base ${acl.permission === 'Allow' ? 'text-emerald-600' : 'text-destructive'}`}
+                    >
+                      {acl.permission}
+                    </span>
+                  </TableCell>
+                  <TableCell className="py-1.5 font-mono text-base">{acl.host}</TableCell>
+                  <TableCell className="py-1.5">
+                    <Button
+                      className="size-8 text-muted-foreground hover:text-destructive"
+                      onClick={() => onRemove(idx)}
+                      size="icon"
+                      variant="ghost"
+                    >
+                      <Trash2 className="size-4" />
+                      <span className="sr-only">Remove ACL</span>
+                    </Button>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        ) : (
+          <Empty className="py-12">
+            <EmptyMedia variant="icon">
+              <Shield className="size-6" />
+            </EmptyMedia>
+            <EmptyHeader>
+              <EmptyTitle>No ACLs defined</EmptyTitle>
+              <EmptyDescription>
+                {context === 'user'
+                  ? 'This user has no direct ACLs. Permissions may be inherited through assigned roles.'
+                  : 'Add ACLs to define what this role can access.'}
+              </EmptyDescription>
+            </EmptyHeader>
+            <Button onClick={onAdd}>
+              <Plus className="size-4" />
+              Add ACL
+            </Button>
+          </Empty>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// ─── Principal step dialog (used by permissions tab) ─────────────────────────
+
+interface PrincipalStepDialogProps {
+  options: ComboboxOption[];
+  value: string;
+  onChange: (v: string) => void;
+  onContinue: () => void;
+  onClose: () => void;
+}
+
+export function PrincipalStepDialog({ options, value, onChange, onContinue, onClose }: PrincipalStepDialogProps) {
+  const [error, setError] = useState<string | null>(null);
+
+  const handleSubmit = () => {
+    const trimmed = value.trim();
+    if (!trimmed) {
+      setError('Principal is required');
+      return;
+    }
+    if (!trimmed.includes(':')) {
+      setError('Principal must include a type prefix (e.g. User:name)');
+      return;
+    }
+    onContinue();
+  };
+
+  return (
+    <Dialog onOpenChange={(o) => !o && onClose()} open>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader spacing="loose">
+          <DialogTitle>Create ACL</DialogTitle>
+          <DialogDescription>
+            Enter the principal this ACL will apply to, then define the access rule.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="space-y-4">
+          <div className="space-y-3">
+            <div className="space-y-1">
+              <Label htmlFor="principal-input">Principal</Label>
+              <p className="text-muted-foreground text-sm">
+                Type a principal in the format <code className="rounded bg-muted px-1 font-mono">Type:name</code>.
+                Supported types: User, Group, RedpandaRole.
+              </p>
+            </div>
+            <Combobox
+              autocomplete
+              className="font-mono"
+              creatable
+              onChange={(nextValue) => {
+                onChange(nextValue);
+                setError(null);
+              }}
+              options={options}
+              placeholder="e.g. User:ben or Group:my-team"
+              value={value}
+            />
+            {Boolean(error) && <p className="text-destructive text-sm">{error}</p>}
+          </div>
+        </div>
+        <DialogFooter>
+          <Button onClick={onClose} variant="outline">
+            Cancel
+          </Button>
+          <Button onClick={handleSubmit}>Continue</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/frontend/src/components/pages/security/change-password-dialog.tsx b/frontend/src/components/pages/security/change-password-dialog.tsx
new file mode 100644
index 0000000000..7d1d67ee88
--- /dev/null
+++ b/frontend/src/components/pages/security/change-password-dialog.tsx
@@ -0,0 +1,233 @@
+/**
+ * Copyright 2026 Redpanda Data, Inc.
+ *
+ * Use of this software is governed by the Business Source License
+ * included in the file https://github.com/redpanda-data/redpanda/blob/dev/licenses/bsl.md
+ *
+ * As of the Change Date specified in that file, in accordance with
+ * the Business Source License, use of this software will be governed
+ * by the Apache License, Version 2.0
+ */
+
+import { create } from '@bufbuild/protobuf';
+import { Button } from 'components/redpanda-ui/components/button';
+import { Checkbox } from 'components/redpanda-ui/components/checkbox';
+import { CopyButton } from 'components/redpanda-ui/components/copy-button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from 'components/redpanda-ui/components/dialog';
+import { Input } from 'components/redpanda-ui/components/input';
+import { Label } from 'components/redpanda-ui/components/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from 'components/redpanda-ui/components/select';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from 'components/redpanda-ui/components/tooltip';
+import { Text } from 'components/redpanda-ui/components/typography';
+import { RefreshCw } from 'lucide-react';
+import { UpdateUserRequest_UserSchema, UpdateUserRequestSchema } from 'protogen/redpanda/api/dataplane/v1/user_pb';
+import { useEffect, useState } from 'react';
+import { getSASLMechanism, useUpdateUserMutationWithToast } from 'react-query/api/user';
+import { toast } from 'sonner';
+
+import { generatePassword } from './create-user-dialog';
+
+const saslMechanisms = [
+  { id: 'SCRAM-SHA-256', name: 'SCRAM-SHA-256', description: 'Salted Challenge Response with SHA-256' },
+  { id: 'SCRAM-SHA-512', name: 'SCRAM-SHA-512', description: 'Salted Challenge Response with SHA-512 (recommended)' },
+] as const;
+
+interface ChangePasswordDialogProps {
+  open: boolean;
+  userName: string;
+  currentMechanism?: string | null;
+  onClose: () => void;
+}
+
+export function ChangePasswordDialog({ open, userName, currentMechanism, onClose }: ChangePasswordDialogProps) {
+  const [newPassword, setNewPassword] = useState(() => generatePassword(24, true));
+  const [selectedMechanism, setSelectedMechanism] = useState<'SCRAM-SHA-256' | 'SCRAM-SHA-512'>(
+    currentMechanism === 'SCRAM-SHA-256' || currentMechanism === 'SCRAM-SHA-512' ? currentMechanism : 'SCRAM-SHA-512'
+  );
+  const [error, setError] = useState<string | null>(null);
+  const [includeSpecialChars, setIncludeSpecialChars] = useState(true);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const { mutateAsync: updateUser } = useUpdateUserMutationWithToast();
+
+  const resetForm = () => {
+    setNewPassword(generatePassword(24, true));
+    setSelectedMechanism(
+      currentMechanism === 'SCRAM-SHA-256' || currentMechanism === 'SCRAM-SHA-512' ? currentMechanism : 'SCRAM-SHA-512'
+    );
+    setError(null);
+    setIncludeSpecialChars(true);
+    setIsSubmitting(false);
+  };
+
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+    setNewPassword(generatePassword(24, true));
+    setSelectedMechanism(
+      currentMechanism === 'SCRAM-SHA-256' || currentMechanism === 'SCRAM-SHA-512' ? currentMechanism : 'SCRAM-SHA-512'
+    );
+    setError(null);
+    setIncludeSpecialChars(true);
+    setIsSubmitting(false);
+  }, [currentMechanism, open]);
+
+  const handleClose = () => {
+    resetForm();
+    onClose();
+  };
+
+  const handleGenerate = () => {
+    const pwd = generatePassword(24, includeSpecialChars);
+    setNewPassword(pwd);
+    setError(null);
+  };
+
+  const handleSubmit = async () => {
+    if (!newPassword) {
+      setError('Password is required');
+      return;
+    }
+    if (newPassword.length < 8) {
+      setError('Password must be at least 8 characters');
+      return;
+    }
+    if (newPassword.length > 64) {
+      setError('Password should not exceed 64 characters');
+      return;
+    }
+    setError(null);
+    setIsSubmitting(true);
+
+    try {
+      await updateUser(
+        create(UpdateUserRequestSchema, {
+          user: create(UpdateUserRequest_UserSchema, {
+            name: userName,
+            password: newPassword,
+            mechanism: getSASLMechanism(selectedMechanism),
+          }),
+        })
+      );
+      toast.success('Password updated successfully');
+      handleClose();
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'Failed to update password';
+      toast.error(message);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <Dialog onOpenChange={(o) => !o && handleClose()} open={open}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader spacing="loose">
+          <DialogTitle>Change Password</DialogTitle>
+          <DialogDescription asChild>
+            <div className="space-y-1">
+              <p>Set a new password for this user.</p>
+              <p className="font-mono text-base text-foreground">{userName}</p>
+            </div>
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4">
+          {/* Mechanism Selection */}
+          <div className="space-y-3">
+            <Label htmlFor="mechanism">SASL Mechanism</Label>
+            <Select
+              onValueChange={(v) => setSelectedMechanism(v as 'SCRAM-SHA-256' | 'SCRAM-SHA-512')}
+              value={selectedMechanism}
+            >
+              <SelectTrigger id="mechanism">
+                <SelectValue>
+                  <span className="font-mono">{selectedMechanism}</span>
+                </SelectValue>
+              </SelectTrigger>
+              <SelectContent>
+                {saslMechanisms.map((mech) => (
+                  <SelectItem className="py-2.5" key={mech.id} value={mech.id}>
+                    <div className="flex flex-col gap-0.5">
+                      <span className="font-mono text-base">{mech.name}</span>
+                      <span className="text-base text-muted-foreground leading-6">{mech.description}</span>
+                    </div>
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          {/* New Password */}
+          <div className="space-y-3">
+            <div className="space-y-1">
+              <Label htmlFor="new-password">New Password</Label>
+              <Text variant="muted">Must be at least 8 characters and should not exceed 64 characters.</Text>
+            </div>
+            <div className="flex gap-1.5">
+              <Input
+                autoComplete="new-password"
+                className="font-mono"
+                id="new-password"
+                onChange={(e) => {
+                  setNewPassword(e.target.value);
+                  setError(null);
+                }}
+                placeholder="Enter new password"
+                type="password"
+                value={newPassword}
+              />
+              <TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button className="size-9" onClick={handleGenerate} size="icon" type="button" variant="outline">
+                      <RefreshCw className="size-4" />
+                      <span className="sr-only">Generate password</span>
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent>Generate password</TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+              <CopyButton content={newPassword} disabled={!newPassword} size="icon" variant="outline" />
+            </div>
+            <div className="flex items-center gap-2">
+              <Checkbox
+                checked={includeSpecialChars}
+                id="special-chars"
+                onCheckedChange={(checked) => setIncludeSpecialChars(checked === true)}
+              />
+              <Label className="font-normal text-base" htmlFor="special-chars">
+                Generate with special characters
+              </Label>
+            </div>
+          </div>
+
+          {Boolean(error) && <p className="text-base text-destructive leading-6">{error}</p>}
+        </div>
+
+        <DialogFooter>
+          <Button onClick={handleClose} variant="outline">
+            Cancel
+          </Button>
+          <Button disabled={isSubmitting} onClick={handleSubmit}>
+            {isSubmitting ? 'Updating...' : 'Update Password'}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/frontend/src/components/pages/security/create-user-dialog.tsx b/frontend/src/components/pages/security/create-user-dialog.tsx
new file mode 100644
index 0000000000..51dd7bea1c
--- /dev/null
+++ b/frontend/src/components/pages/security/create-user-dialog.tsx
@@ -0,0 +1,359 @@
+/**
+ * Copyright 2026 Redpanda Data, Inc.
+ *
+ * Use of this software is governed by the Business Source License
+ * included in the file https://github.com/redpanda-data/redpanda/blob/dev/licenses/bsl.md
+ *
+ * As of the Change Date specified in that file, in accordance with
+ * the Business Source License, use of this software will be governed
+ * by the Apache License, Version 2.0
+ */
+
+import { create } from '@bufbuild/protobuf';
+import { Alert, AlertDescription } from 'components/redpanda-ui/components/alert';
+import { Button } from 'components/redpanda-ui/components/button';
+import { Checkbox } from 'components/redpanda-ui/components/checkbox';
+import { CopyButton } from 'components/redpanda-ui/components/copy-button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from 'components/redpanda-ui/components/dialog';
+import { Input } from 'components/redpanda-ui/components/input';
+import { Label } from 'components/redpanda-ui/components/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from 'components/redpanda-ui/components/select';
+import { Separator } from 'components/redpanda-ui/components/separator';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from 'components/redpanda-ui/components/tooltip';
+import { Text } from 'components/redpanda-ui/components/typography';
+import { Info, RefreshCw, Shield, UserCog } from 'lucide-react';
+import { CreateUserRequest_UserSchema, CreateUserRequestSchema } from 'protogen/redpanda/api/dataplane/v1/user_pb';
+import { useState } from 'react';
+import { getSASLMechanism, useCreateUserMutation } from 'react-query/api/user';
+import { toast } from 'sonner';
+
+const saslMechanisms = [
+  { id: 'SCRAM-SHA-256', name: 'SCRAM-SHA-256', description: 'Salted Challenge Response with SHA-256' },
+  { id: 'SCRAM-SHA-512', name: 'SCRAM-SHA-512', description: 'Salted Challenge Response with SHA-512 (recommended)' },
+] as const;
+
+export function generatePassword(length: number, includeSpecial: boolean): string {
+  const lowercase = 'abcdefghijklmnopqrstuvwxyz';
+  const uppercase = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
+  const numbers = '0123456789';
+  const special = '!@#$%^&*()_+-=[]{}|;:,.<>?';
+  let chars = lowercase + uppercase + numbers;
+  if (includeSpecial) {
+    chars += special;
+  }
+  let pwd = '';
+  for (let i = 0; i < length; i++) {
+    pwd += chars.charAt(Math.floor(Math.random() * chars.length));
+  }
+  return pwd;
+}
+
+function createGeneratedPassword(includeSpecial: boolean): string {
+  return generatePassword(24, includeSpecial);
+}
+
+interface CreateUserDialogProps {
+  open: boolean;
+  onClose: () => void;
+  onNavigateToTab: (tab: string) => void;
+}
+
+export function CreateUserDialog({ open, onClose, onNavigateToTab }: CreateUserDialogProps) {
+  const [step, setStep] = useState<'form' | 'success'>('form');
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState(() => createGeneratedPassword(true));
+  const [mechanism, setMechanism] = useState<'SCRAM-SHA-256' | 'SCRAM-SHA-512'>('SCRAM-SHA-256');
+  const [error, setError] = useState<string | null>(null);
+  const [includeSpecial, setIncludeSpecial] = useState(true);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const { mutateAsync: createUserMutation } = useCreateUserMutation();
+
+  const resetForm = () => {
+    setStep('form');
+    setUsername('');
+    setPassword(createGeneratedPassword(true));
+    setMechanism('SCRAM-SHA-256');
+    setError(null);
+    setIncludeSpecial(true);
+    setIsSubmitting(false);
+  };
+
+  const handleClose = () => {
+    resetForm();
+    onClose();
+  };
+
+  const handleGeneratePassword = () => {
+    const pwd = createGeneratedPassword(includeSpecial);
+    setPassword(pwd);
+    setError(null);
+  };
+
+  const handleCreate = async () => {
+    if (!username.trim()) {
+      setError('Username is required');
+      return;
+    }
+    if (/\s/.test(username)) {
+      setError('Username must not contain whitespace');
+      return;
+    }
+    if (!/^[a-zA-Z0-9._-]+$/.test(username)) {
+      setError('Only letters, numbers, dots, hyphens, and underscores are allowed');
+      return;
+    }
+    if (!password) {
+      setError('Password is required');
+      return;
+    }
+    if (password.length < 4) {
+      setError('Password must be at least 4 characters');
+      return;
+    }
+    if (password.length > 64) {
+      setError('Password should not exceed 64 characters');
+      return;
+    }
+    setError(null);
+    setIsSubmitting(true);
+
+    try {
+      await createUserMutation(
+        create(CreateUserRequestSchema, {
+          user: create(CreateUserRequest_UserSchema, {
+            name: username.trim(),
+            password,
+            mechanism: getSASLMechanism(mechanism),
+          }),
+        })
+      );
+      setStep('success');
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'Failed to create user';
+      toast.error(message);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <Dialog onOpenChange={(o) => !o && handleClose()} open={open}>
+      <DialogContent className="sm:max-w-md">
+        {step === 'form' ? (
+          <>
+            <DialogHeader spacing="loose">
+              <DialogTitle>Create User</DialogTitle>
+              <DialogDescription>Create a new SASL-SCRAM user for your cluster.</DialogDescription>
+            </DialogHeader>
+
+            <div className="space-y-4">
+              {/* Username */}
+              <div className="space-y-3">
+                <div className="space-y-1">
+                  <Label htmlFor="create-username">Username</Label>
+                  <Text variant="muted">
+                    Must not contain any whitespace. Dots, hyphens, and underscores may be used.
+                  </Text>
+                </div>
+                <Input
+                  autoComplete="off"
+                  id="create-username"
+                  onChange={(e) => {
+                    setUsername(e.target.value);
+                    setError(null);
+                  }}
+                  placeholder="Username"
+                  type="text"
+                  value={username}
+                />
+              </div>
+
+              {/* Password */}
+              <div className="space-y-3">
+                <div className="space-y-1">
+                  <Label htmlFor="create-password">Password</Label>
+                  <Text variant="muted">Must be at least 4 characters and should not exceed 64 characters.</Text>
+                </div>
+                <div className="flex gap-1.5">
+                  <Input
+                    autoComplete="new-password"
+                    className="font-mono"
+                    id="create-password"
+                    onChange={(e) => {
+                      setPassword(e.target.value);
+                      setError(null);
+                    }}
+                    placeholder="Enter password"
+                    type="password"
+                    value={password}
+                  />
+                  <TooltipProvider>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <Button
+                          className="size-9"
+                          onClick={handleGeneratePassword}
+                          size="icon"
+                          type="button"
+                          variant="outline"
+                        >
+                          <RefreshCw className="size-4" />
+                          <span className="sr-only">Generate password</span>
+                        </Button>
+                      </TooltipTrigger>
+                      <TooltipContent>Generate password</TooltipContent>
+                    </Tooltip>
+                  </TooltipProvider>
+                  <CopyButton content={password} disabled={!password} size="icon" variant="outline" />
+                </div>
+                <div className="flex items-center gap-2">
+                  <Checkbox
+                    checked={includeSpecial}
+                    id="create-special-chars"
+                    onCheckedChange={(checked) => setIncludeSpecial(checked === true)}
+                  />
+                  <Label className="font-normal text-base" htmlFor="create-special-chars">
+                    Generate with special characters
+                  </Label>
+                </div>
+              </div>
+
+              {/* SASL Mechanism */}
+              <div className="space-y-3">
+                <Label htmlFor="create-mechanism">SASL Mechanism</Label>
+                <Select onValueChange={(v) => setMechanism(v as 'SCRAM-SHA-256' | 'SCRAM-SHA-512')} value={mechanism}>
+                  <SelectTrigger id="create-mechanism">
+                    <SelectValue>
+                      <span className="font-mono">{mechanism}</span>
+                    </SelectValue>
+                  </SelectTrigger>
+                  <SelectContent>
+                    {saslMechanisms.map((mech) => (
+                      <SelectItem className="py-2.5" key={mech.id} value={mech.id}>
+                        <div className="flex flex-col gap-0.5">
+                          <span className="font-mono text-base">{mech.name}</span>
+                          <span className="text-base text-muted-foreground leading-6">{mech.description}</span>
+                        </div>
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+
+              {Boolean(error) && <p className="text-base text-destructive leading-6">{error}</p>}
+            </div>
+
+            <DialogFooter>
+              <Button onClick={handleClose} variant="outline">
+                Cancel
+              </Button>
+              <Button disabled={isSubmitting} onClick={handleCreate}>
+                {isSubmitting ? 'Creating...' : 'Create'}
+              </Button>
+            </DialogFooter>
+          </>
+        ) : (
+          <>
+            <DialogHeader spacing="loose">
+              <DialogTitle>User Created</DialogTitle>
+              <DialogDescription>The user has been created. Make sure to save the credentials below.</DialogDescription>
+            </DialogHeader>
+
+            <div className="space-y-4">
+              <Alert>
+                <Info className="size-4" />
+                <AlertDescription>
+                  You will not be able to view this password again. Make sure that it is copied and saved.
+                </AlertDescription>
+              </Alert>
+
+              {/* Username */}
+              <div className="space-y-1">
+                <Text className="font-medium" variant="bodyLarge">
+                  Username
+                </Text>
+                <div className="flex items-center gap-2">
+                  <code className="flex-1 break-all rounded-md bg-muted px-3 py-2 font-mono text-base">{username}</code>
+                  <CopyButton content={username} size="icon" variant="outline" />
+                </div>
+              </div>
+
+              {/* Password */}
+              <div className="space-y-1">
+                <Text className="font-medium" variant="bodyLarge">
+                  Password
+                </Text>
+                <div className="flex items-center gap-2">
+                  <Input className="flex-1 font-mono" readOnly type="password" value={password} />
+                  <CopyButton content={password} size="icon" variant="outline" />
+                </div>
+              </div>
+
+              {/* Mechanism */}
+              <div className="space-y-1">
+                <Text className="font-medium" variant="bodyLarge">
+                  Mechanism
+                </Text>
+                <p className="font-mono text-base">{mechanism}</p>
+              </div>
+
+              <Separator />
+
+              {/* Next steps hint */}
+              <div className="rounded-lg border border-dashed p-4">
+                <Text className="font-medium" variant="bodyLarge">
+                  What's next?
+                </Text>
+                <p className="mt-1 text-base text-muted-foreground leading-6">
+                  This user has no permissions yet. Assign roles or create ACLs to grant access to cluster resources.
+                </p>
+                <div className="mt-3 flex gap-2">
+                  <Button
+                    onClick={() => {
+                      handleClose();
+                      onNavigateToTab('permissions');
+                    }}
+                    size="sm"
+                    variant="outline"
+                  >
+                    <Shield className="size-4" />
+                    Create ACLs
+                  </Button>
+                  <Button
+                    onClick={() => {
+                      handleClose();
+                      onNavigateToTab('roles');
+                    }}
+                    size="sm"
+                    variant="outline"
+                  >
+                    <UserCog className="size-4" />
+                    Assign Roles
+                  </Button>
+                </div>
+              </div>
+            </div>
+
+            <DialogFooter>
+              <Button onClick={handleClose}>Done</Button>
+            </DialogFooter>
+          </>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/frontend/src/components/pages/security/permissions-tab.tsx b/frontend/src/components/pages/security/permissions-tab.tsx
new file mode 100644
index 0000000000..147c7dcdbb
--- /dev/null
+++ b/frontend/src/components/pages/security/permissions-tab.tsx
@@ -0,0 +1,794 @@
+/**
+ * Copyright 2026 Redpanda Data, Inc.
+ *
+ * Use of this software is governed by the Business Source License
+ * included in the file https://github.com/redpanda-data/redpanda/blob/dev/licenses/bsl.md
+ *
+ * As of the Change Date specified in that file, in accordance with
+ * the Business Source License, use of this software will be governed
+ * by the Apache License, Version 2.0
+ */
+
+import { create } from '@bufbuild/protobuf';
+import { createQueryOptions, useTransport } from '@connectrpc/connect-query';
+import { useQueries } from '@tanstack/react-query';
+import { Link } from '@tanstack/react-router';
+import { getAclFromAclListResponse } from 'components/pages/acls/new-acl/acl.model';
+import { Badge } from 'components/redpanda-ui/components/badge';
+import { Button } from 'components/redpanda-ui/components/button';
+import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from 'components/redpanda-ui/components/empty';
+import { Input } from 'components/redpanda-ui/components/input';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from 'components/redpanda-ui/components/tooltip';
+import { Text } from 'components/redpanda-ui/components/typography';
+import { ChevronDown, ChevronRight, ExternalLink, Lock, Plus, Search, Shield, Trash2, X } from 'lucide-react';
+import {
+  ACL_Operation,
+  ACL_PermissionType,
+  ACL_ResourcePatternType,
+  ACL_ResourceType,
+  CreateACLRequestSchema,
+  DeleteACLsRequestSchema,
+  type ListACLsResponse,
+} from 'protogen/redpanda/api/dataplane/v1/acl_pb';
+import { listACLs } from 'protogen/redpanda/api/dataplane/v1/acl-ACLService_connectquery';
+import { getRole } from 'protogen/redpanda/api/dataplane/v1/security-SecurityService_connectquery';
+import { useMemo, useState } from 'react';
+import {
+  getACLOperation,
+  useDeleteAclMutation,
+  useLegacyCreateACLMutation,
+  useListACLsQuery,
+} from 'react-query/api/acl';
+import { useListRolesQuery } from 'react-query/api/security';
+import { useLegacyListUsersQuery } from 'react-query/api/user';
+import { toast } from 'sonner';
+
+import {
+  ACLDialog,
+  type ACLEntry,
+  ACLRemoveDialog,
+  getPatternTypeLabel,
+  PRINCIPAL_MAX,
+  PrincipalStepDialog,
+  RESOURCE_NAME_MAX,
+  truncateText,
+} from './acl-editor';
+import {
+  buildPrincipalAutocompleteOptions,
+  buildResourceOptionsByType,
+  flattenAclDetails,
+  getAclResourceTypeLabel,
+  sortAclEntries,
+  sortByName,
+  sortByPrincipal,
+} from './security-acl-utils';
+
+// ─── Types ───────────────────────────────────────────────────────────────────
+
+type DirectACL = ACLEntry & {
+  principal: string;
+  resourcePatternType: number;
+};
+
+type InheritedACL = ACLEntry & {
+  roleName: string;
+};
+
+type PrincipalGroup = {
+  principal: string;
+  isBrokerManaged: boolean;
+  assignedRoles: { name: string }[];
+  directAcls: DirectACL[];
+  inheritedAcls: InheritedACL[];
+  denyCount: number;
+};
+
+// ─── Helpers ────────────────────────────────────────────────────────────────
+
+function parsePrincipal(principal: string): { type: string; name: string } {
+  const colonIndex = principal.indexOf(':');
+  if (colonIndex === -1) {
+    return { type: 'User', name: principal };
+  }
+  return {
+    type: principal.substring(0, colonIndex),
+    name: principal.substring(colonIndex + 1),
+  };
+}
+
+function getOperationStr(op: ACL_Operation): string {
+  return getACLOperation(op);
+}
+
+function getPermissionStr(pt: ACL_PermissionType): string {
+  switch (pt) {
+    case ACL_PermissionType.ALLOW:
+      return 'Allow';
+    case ACL_PermissionType.DENY:
+      return 'Deny';
+    default:
+      return 'Allow';
+  }
+}
+
+function getAclSummaryText(directCount: number, inheritedCount: number): string {
+  const directLabel = `${directCount} direct ${directCount === 1 ? 'ACL' : 'ACLs'}`;
+  const inheritedLabel = `${inheritedCount} ${inheritedCount === 1 ? 'ACL' : 'ACLs'} inherited from roles`;
+
+  if (directCount > 0 && inheritedCount > 0) {
+    return `${directLabel}, ${inheritedLabel}`;
+  }
+  if (inheritedCount > 0) {
+    return inheritedLabel;
+  }
+  return directLabel;
+}
+
+function getPermissionColorClass(permission: string, inherited: boolean): string {
+  if (inherited) {
+    return permission === 'Allow' ? 'text-emerald-600/50' : 'text-destructive/50';
+  }
+  return permission === 'Allow' ? 'text-emerald-600' : 'text-destructive';
+}
+
+// ─── Component ──────────────────────────────────────────────────────────────
+
+export function PermissionsTab() {
+  const [searchQuery, setSearchQuery] = useState('');
+  const [collapsed, setCollapsed] = useState<Record<string, boolean>>({});
+
+  // Dialog state
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [removeTarget, setRemoveTarget] = useState<DirectACL | null>(null);
+  const [createPrincipal, setCreatePrincipal] = useState('');
+  const [createStep, setCreateStep] = useState<'principal' | 'acl'>('principal');
+
+  // Fetch data
+  const { data: usersData } = useLegacyListUsersQuery();
+  const { data: aclsData } = useListACLsQuery();
+  const { data: rolesData } = useListRolesQuery();
+
+  const users = useMemo(() => sortByName(usersData?.users ?? []), [usersData]);
+  const aclResources = useMemo(() => aclsData?.aclResources ?? [], [aclsData]);
+  const roles = useMemo(() => sortByName(rolesData?.roles ?? []), [rolesData]);
+  const resourceOptionsByType = useMemo(() => buildResourceOptionsByType(aclResources), [aclResources]);
+  const { mutateAsync: createACL } = useLegacyCreateACLMutation();
+  const { mutateAsync: deleteACL } = useDeleteAclMutation();
+  const transport = useTransport();
+
+  const roleDetailQueries = useQueries({
+    queries: roles.map((role) =>
+      createQueryOptions(
+        getRole,
+        {
+          roleName: role.name,
+        },
+        { transport }
+      )
+    ),
+  });
+
+  const roleAclQueries = useQueries({
+    queries: roles.map((role) => ({
+      ...createQueryOptions(
+        listACLs,
+        {
+          filter: {
+            principal: `RedpandaRole:${role.name}`,
+          },
+        },
+        { transport }
+      ),
+      select: (aclList: ListACLsResponse) => flattenAclDetails(getAclFromAclListResponse(aclList)),
+    })),
+  });
+
+  const principalOptions = useMemo(() => {
+    const aclPrincipals = aclResources
+      .flatMap((resource) => resource.acls.map((acl) => acl.principal || ''))
+      .filter(Boolean);
+    const roleMembershipPrincipals = roleDetailQueries.flatMap((query) =>
+      (query.data?.members ?? []).map((member) => member.principal || '').filter(Boolean)
+    );
+
+    return buildPrincipalAutocompleteOptions({
+      principals: [...aclPrincipals, ...roleMembershipPrincipals],
+      roles: roles.map((role) => role.name),
+      users: users.map((user) => user.name),
+    });
+  }, [aclResources, roleDetailQueries, roles, users]);
+
+  // Build principal groups from ACL data
+  const allGroups = useMemo(() => {
+    const map = new Map<string, PrincipalGroup>();
+    const userNames = new Set(users.map((u) => u.name));
+
+    const getOrCreate = (principal: string): PrincipalGroup => {
+      let group = map.get(principal);
+      if (!group) {
+        const parsed = parsePrincipal(principal);
+        const isBrokerManaged = parsed.type === 'User' && userNames.has(parsed.name);
+        group = {
+          principal,
+          isBrokerManaged,
+          assignedRoles: [],
+          directAcls: [],
+          inheritedAcls: [],
+          denyCount: 0,
+        };
+        map.set(principal, group);
+      }
+      return group;
+    };
+
+    // Add direct ACLs from the ACL list response
+    for (const resource of aclResources) {
+      for (const acl of resource.acls) {
+        const principal = acl.principal || '';
+        if (!principal) {
+          continue;
+        }
+        const group = getOrCreate(principal);
+        group.directAcls.push({
+          principal,
+          resourceType: getAclResourceTypeLabel(resource.resourceType) ?? 'Unknown',
+          resourceName: resource.resourceName,
+          operation: getOperationStr(acl.operation),
+          permission: getPermissionStr(acl.permissionType),
+          host: acl.host || '*',
+          resourcePatternType: resource.resourcePatternType,
+        });
+      }
+    }
+
+    for (const [index, role] of roles.entries()) {
+      const members = roleDetailQueries[index]?.data?.members ?? [];
+      const inheritedAcls = roleAclQueries[index]?.data ?? [];
+
+      for (const member of members) {
+        const principal = member.principal;
+        if (!principal) {
+          continue;
+        }
+
+        const group = getOrCreate(principal);
+        if (!group.assignedRoles.some((assignedRole) => assignedRole.name === role.name)) {
+          group.assignedRoles.push({ name: role.name });
+        }
+
+        for (const acl of inheritedAcls) {
+          group.inheritedAcls.push({
+            ...acl,
+            roleName: role.name,
+          });
+        }
+      }
+    }
+
+    // Compute deny counts
+    for (const group of map.values()) {
+      group.assignedRoles = sortByName(group.assignedRoles);
+      group.directAcls = sortAclEntries(group.directAcls);
+      group.inheritedAcls = sortAclEntries(group.inheritedAcls);
+      group.denyCount =
+        group.directAcls.filter((a) => a.permission === 'Deny').length +
+        group.inheritedAcls.filter((a) => a.permission === 'Deny').length;
+    }
+
+    return sortByPrincipal(Array.from(map.values()));
+  }, [aclResources, roleAclQueries, roleDetailQueries, roles, users]);
+
+  // Filter groups
+  const groups = useMemo(() => {
+    if (!searchQuery) {
+      return allGroups;
+    }
+    const q = searchQuery.toLowerCase();
+    return allGroups
+      .map((group) => {
+        const principalMatch = group.principal.toLowerCase().includes(q);
+        const roleMatch = group.assignedRoles.some((r) => r.name.toLowerCase().includes(q));
+        const matchingDirect = group.directAcls.filter(
+          (a) =>
+            a.resourceName.toLowerCase().includes(q) ||
+            a.operation.toLowerCase().includes(q) ||
+            a.resourceType.toLowerCase().includes(q) ||
+            a.host.toLowerCase().includes(q)
+        );
+        const matchingInherited = group.inheritedAcls.filter(
+          (a) =>
+            a.resourceName.toLowerCase().includes(q) ||
+            a.operation.toLowerCase().includes(q) ||
+            a.resourceType.toLowerCase().includes(q) ||
+            a.host.toLowerCase().includes(q) ||
+            a.roleName.toLowerCase().includes(q)
+        );
+
+        if (principalMatch || roleMatch) {
+          return group;
+        }
+        if (matchingDirect.length > 0 || matchingInherited.length > 0) {
+          return { ...group, directAcls: matchingDirect, inheritedAcls: matchingInherited };
+        }
+        return null;
+      })
+      .filter(Boolean) as PrincipalGroup[];
+  }, [allGroups, searchQuery]);
+
+  const toggleGroup = (principal: string) => {
+    setCollapsed((prev) => ({ ...prev, [principal]: !(prev[principal] ?? false) }));
+  };
+
+  // ─── CRUD handlers ──────────────────────────────────────────────────────
+
+  const handleCreate = (preselectedPrincipal?: string) => {
+    if (preselectedPrincipal) {
+      setCreatePrincipal(preselectedPrincipal);
+      setCreateStep('acl');
+    } else {
+      setCreatePrincipal('');
+      setCreateStep('principal');
+    }
+    setDialogOpen(true);
+  };
+
+  const handleSave = async (entry: ACLEntry) => {
+    const principal = createPrincipal;
+
+    try {
+      // Map string values back to proto enums for the API call
+      const resourceTypeMap: Record<string, ACL_ResourceType> = {
+        Topic: ACL_ResourceType.TOPIC,
+        Group: ACL_ResourceType.GROUP,
+        Cluster: ACL_ResourceType.CLUSTER,
+        TransactionalId: ACL_ResourceType.TRANSACTIONAL_ID,
+      };
+
+      const operationMap: Record<string, ACL_Operation> = {
+        All: ACL_Operation.ALL,
+        Read: ACL_Operation.READ,
+        Write: ACL_Operation.WRITE,
+        Create: ACL_Operation.CREATE,
+        Delete: ACL_Operation.DELETE,
+        Alter: ACL_Operation.ALTER,
+        Describe: ACL_Operation.DESCRIBE,
+        ClusterAction: ACL_Operation.CLUSTER_ACTION,
+        DescribeConfigs: ACL_Operation.DESCRIBE_CONFIGS,
+        AlterConfigs: ACL_Operation.ALTER_CONFIGS,
+        IdempotentWrite: ACL_Operation.IDEMPOTENT_WRITE,
+      };
+
+      const permissionMap: Record<string, ACL_PermissionType> = {
+        Allow: ACL_PermissionType.ALLOW,
+        Deny: ACL_PermissionType.DENY,
+      };
+
+      await createACL(
+        create(CreateACLRequestSchema, {
+          resourceType: resourceTypeMap[entry.resourceType] ?? ACL_ResourceType.TOPIC,
+          resourceName: entry.resourceName,
+          resourcePatternType: entry.resourcePatternType ?? ACL_ResourcePatternType.LITERAL,
+          principal,
+          host: entry.host,
+          operation: operationMap[entry.operation] ?? ACL_Operation.ALL,
+          permissionType: permissionMap[entry.permission] ?? ACL_PermissionType.ALLOW,
+        })
+      );
+      toast.success('ACL created');
+      setDialogOpen(false);
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'Failed to create ACL';
+      toast.error(message);
+    }
+  };
+
+  const handleRemove = async () => {
+    if (!removeTarget) {
+      return;
+    }
+
+    try {
+      const resourceTypeMap: Record<string, ACL_ResourceType> = {
+        Topic: ACL_ResourceType.TOPIC,
+        Group: ACL_ResourceType.GROUP,
+        Cluster: ACL_ResourceType.CLUSTER,
+        TransactionalId: ACL_ResourceType.TRANSACTIONAL_ID,
+      };
+
+      const operationMap: Record<string, ACL_Operation> = {
+        All: ACL_Operation.ALL,
+        Read: ACL_Operation.READ,
+        Write: ACL_Operation.WRITE,
+        Create: ACL_Operation.CREATE,
+        Delete: ACL_Operation.DELETE,
+        Alter: ACL_Operation.ALTER,
+        Describe: ACL_Operation.DESCRIBE,
+        ClusterAction: ACL_Operation.CLUSTER_ACTION,
+        DescribeConfigs: ACL_Operation.DESCRIBE_CONFIGS,
+        AlterConfigs: ACL_Operation.ALTER_CONFIGS,
+        IdempotentWrite: ACL_Operation.IDEMPOTENT_WRITE,
+      };
+
+      const permissionMap: Record<string, ACL_PermissionType> = {
+        Allow: ACL_PermissionType.ALLOW,
+        Deny: ACL_PermissionType.DENY,
+      };
+
+      await deleteACL(
+        create(DeleteACLsRequestSchema, {
+          filter: {
+            principal: removeTarget.principal,
+            resourceType: resourceTypeMap[removeTarget.resourceType] ?? ACL_ResourceType.TOPIC,
+            resourceName: removeTarget.resourceName,
+            host: removeTarget.host,
+            operation: operationMap[removeTarget.operation] ?? ACL_Operation.ALL,
+            permissionType: permissionMap[removeTarget.permission] ?? ACL_PermissionType.ALLOW,
+            resourcePatternType: removeTarget.resourcePatternType || ACL_ResourcePatternType.LITERAL,
+          },
+        })
+      );
+      toast.success('ACL removed');
+      setRemoveTarget(null);
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'Failed to remove ACL';
+      toast.error(message);
+    }
+  };
+
+  return (
+    <div aria-labelledby="permissions-tab" id="permissions-panel" role="tabpanel">
+      <Text className="max-w-3xl pb-2 text-base leading-6" variant="muted">
+        A unified view of all principal permissions across your cluster, including direct ACLs and those inherited from
+        role bindings. Inherited ACLs are read-only here and must be edited on the respective role page.
+      </Text>
+
+      {/* Toolbar */}
+      <div className="mb-4 flex items-center gap-3">
+        <div className="relative max-w-xs flex-1">
+          <Search className="absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground" />
+          <Input
+            aria-label="Search principals"
+            className="pl-9"
+            onChange={(e) => setSearchQuery(e.target.value)}
+            placeholder="Search principals, resources, roles..."
+            type="text"
+            value={searchQuery}
+          />
+        </div>
+        {Boolean(searchQuery) && (
+          <Button
+            className="h-9 gap-1 text-muted-foreground"
+            onClick={() => setSearchQuery('')}
+            size="sm"
+            variant="ghost"
+          >
+            <X className="size-3.5" />
+            Clear
+          </Button>
+        )}
+        <Button className="ml-auto" onClick={() => handleCreate()}>
+          <Plus className="size-4" />
+          Create ACL
+        </Button>
+      </div>
+
+      {/* Grouped list */}
+      {groups.length > 0 ? (
+        <div className="space-y-8">
+          {groups.map((group) => (
+            <PrincipalGroupCard
+              collapsed={collapsed[group.principal] ?? false}
+              group={group}
+              key={group.principal}
+              onCreate={handleCreate}
+              onRemove={setRemoveTarget}
+              onToggle={() => toggleGroup(group.principal)}
+            />
+          ))}
+        </div>
+      ) : (
+        <Empty className="py-16">
+          <EmptyMedia variant="icon">
+            <Shield className="size-6" />
+          </EmptyMedia>
+          {allGroups.length === 0 ? (
+            <>
+              <EmptyHeader>
+                <EmptyTitle>No principals found</EmptyTitle>
+                <EmptyDescription>Create ACLs or assign roles to principals to see them here.</EmptyDescription>
+              </EmptyHeader>
+              <Button onClick={() => handleCreate()}>
+                <Plus className="size-4" />
+                Create ACL
+              </Button>
+            </>
+          ) : (
+            <>
+              <EmptyHeader>
+                <EmptyTitle>No matching principals</EmptyTitle>
+                <EmptyDescription>Try a different search query.</EmptyDescription>
+              </EmptyHeader>
+              <Button onClick={() => setSearchQuery('')} variant="outline">
+                Clear search
+              </Button>
+            </>
+          )}
+        </Empty>
+      )}
+
+      {/* Table Footer */}
+      {groups.length > 0 && (
+        <div className="mt-4 text-muted-foreground text-sm">
+          {searchQuery
+            ? `${groups.length} of ${allGroups.length} ${allGroups.length === 1 ? 'principal' : 'principals'}`
+            : `${allGroups.length} ${allGroups.length === 1 ? 'principal' : 'principals'}`}
+        </div>
+      )}
+
+      {/* Create ACL — principal step */}
+      {dialogOpen && createStep === 'principal' && (
+        <PrincipalStepDialog
+          onChange={setCreatePrincipal}
+          onClose={() => setDialogOpen(false)}
+          onContinue={() => setCreateStep('acl')}
+          options={principalOptions}
+          value={createPrincipal}
+        />
+      )}
+
+      {/* Create ACL — ACL fields step */}
+      {dialogOpen && createStep === 'acl' && (
+        <ACLDialog
+          context="user"
+          onClose={() => setDialogOpen(false)}
+          onSave={handleSave}
+          open
+          resourceOptionsByType={resourceOptionsByType}
+        />
+      )}
+
+      {/* Remove confirmation */}
+      <ACLRemoveDialog
+        acl={removeTarget}
+        context="user"
+        onClose={() => setRemoveTarget(null)}
+        onConfirm={handleRemove}
+        open={removeTarget !== null}
+      />
+    </div>
+  );
+}
+
+// ─── Principal Group Card ─────────────────────────────────────────────────────
+
+function PrincipalGroupCard({
+  group,
+  collapsed,
+  onToggle,
+  onCreate,
+  onRemove,
+}: {
+  group: PrincipalGroup;
+  collapsed: boolean;
+  onToggle: () => void;
+  onCreate: (principal: string) => void;
+  onRemove: (acl: DirectACL) => void;
+}) {
+  const parsed = parsePrincipal(group.principal);
+  const hasAcls = group.directAcls.length > 0 || group.inheritedAcls.length > 0;
+
+  return (
+    <div className="overflow-hidden rounded-lg border">
+      {/* Group header */}
+      <button
+        className="flex w-full cursor-pointer items-center gap-3 px-4 py-3 text-left transition-colors hover:bg-muted/30"
+        onClick={onToggle}
+        style={{ minWidth: 0 }}
+        type="button"
+      >
+        {collapsed ? (
+          <ChevronRight className="size-4 shrink-0 text-muted-foreground" />
+        ) : (
+          <ChevronDown className="size-4 shrink-0 text-muted-foreground" />
+        )}
+        <div className="min-w-0">
+          <span className="block font-mono font-semibold text-base" title={group.principal}>
+            {truncateText(group.principal, PRINCIPAL_MAX)}
+          </span>
+          <span className="block text-muted-foreground text-sm">
+            {getAclSummaryText(group.directAcls.length, group.inheritedAcls.length)}
+          </span>
+        </div>
+        {group.denyCount > 0 && (
+          <Badge className="shrink-0 font-normal text-sm tabular-nums" variant="destructive">
+            {group.denyCount} deny
+          </Badge>
+        )}
+        <div className="ml-auto flex shrink-0 items-center gap-1">
+          <Button
+            onClick={(e) => {
+              e.stopPropagation();
+              onCreate(group.principal);
+            }}
+            variant="ghost"
+          >
+            <Plus className="size-4" />
+            ACL
+          </Button>
+          {Boolean(group.isBrokerManaged) && (
+            <Button asChild variant="ghost">
+              <Link
+                onClick={(e) => e.stopPropagation()}
+                params={{ userName: encodeURIComponent(parsed.name) }}
+                to="/security/users/$userName"
+              >
+                <ExternalLink className="size-4" />
+                View user
+              </Link>
+            </Button>
+          )}
+        </div>
+      </button>
+
+      {/* Group body */}
+      {!collapsed && (
+        <div className="border-t">
+          {hasAcls ? (
+            <table className="w-full table-fixed">
+              <thead>
+                <tr className="text-left font-medium text-muted-foreground/70 text-sm uppercase tracking-wider">
+                  <th className="w-[14%] px-4 py-1.5">Type</th>
+                  <th className="w-auto px-4 py-1.5">Resource</th>
+                  <th className="w-[11%] px-4 py-1.5">Operation</th>
+                  <th className="w-[10%] px-4 py-1.5">Permission</th>
+                  <th className="w-[9%] px-4 py-1.5">Host</th>
+                  <th className="w-[44px] px-2 py-1.5">
+                    <span className="sr-only">Actions</span>
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                {group.directAcls.map((acl, idx) => (
+                  <ACLRow
+                    acl={acl}
+                    key={`direct-${acl.resourceType}-${acl.resourceName}-${idx}`}
+                    onRemove={() => onRemove(acl)}
+                  />
+                ))}
+
+                {group.inheritedAcls.length > 0 && (
+                  <tr>
+                    <td className="p-0" colSpan={6}>
+                      <div className="flex items-center gap-2 bg-muted/50 px-4 py-1.5">
+                        <Lock className="size-3 shrink-0 text-muted-foreground/70" />
+                        <span className="font-medium text-muted-foreground/70 text-sm uppercase tracking-wider">
+                          Via {group.assignedRoles.length === 1 ? 'role' : 'roles'}
+                        </span>
+                        {group.assignedRoles.slice(0, 3).map((role) => (
+                          <Link
+                            key={role.name}
+                            onClick={(e) => e.stopPropagation()}
+                            params={{ roleName: encodeURIComponent(role.name) }}
+                            to="/security/roles/$roleName"
+                          >
+                            <Badge
+                              className="font-normal text-sm transition-colors hover:bg-accent-foreground/25"
+                              variant="secondary"
+                            >
+                              {role.name}
+                            </Badge>
+                          </Link>
+                        ))}
+                        {group.assignedRoles.length > 3 && (
+                          <span className="text-muted-foreground text-sm">+{group.assignedRoles.length - 3} more</span>
+                        )}
+                      </div>
+                    </td>
+                  </tr>
+                )}
+
+                {group.inheritedAcls.map((acl, idx) => (
+                  <ACLRow acl={acl} inherited key={`inherited-${acl.roleName}-${idx}`} />
+                ))}
+              </tbody>
+            </table>
+          ) : (
+            <Empty className="py-8">
+              <EmptyMedia variant="icon">
+                <Shield className="size-6" />
+              </EmptyMedia>
+              <EmptyHeader>
+                <EmptyTitle>No ACLs defined</EmptyTitle>
+                <EmptyDescription>No ACLs defined for this principal.</EmptyDescription>
+              </EmptyHeader>
+              <Button onClick={() => onCreate(group.principal)}>
+                <Plus className="size-4" />
+                Add ACL
+              </Button>
+            </Empty>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ─── Shared ACL Row ─────────────────────────────────────────────────────────
+
+function ACLRow({
+  acl,
+  inherited,
+  onRemove,
+}: {
+  acl: {
+    resourceType: string;
+    resourceName: string;
+    operation: string;
+    permission: string;
+    host: string;
+    resourcePatternType?: number;
+  };
+  inherited?: boolean;
+  onRemove?: () => void;
+}) {
+  return (
+    <tr className={`border-b last:border-0 ${inherited ? 'bg-muted/10' : ''}`}>
+      <td className="px-4 py-1.5">
+        <Badge
+          className={`font-normal text-sm ${inherited ? 'border-muted-foreground/20 text-muted-foreground' : ''}`}
+          variant="outline"
+        >
+          {acl.resourceType}
+        </Badge>
+      </td>
+      <td className="max-w-0 px-4 py-1.5">
+        <span className="flex items-center gap-1.5">
+          <span
+            className={`truncate font-mono text-base ${inherited ? 'text-muted-foreground' : ''}`}
+            title={acl.resourceName}
+          >
+            {truncateText(acl.resourceName, RESOURCE_NAME_MAX)}
+          </span>
+          {Boolean(getPatternTypeLabel(acl.resourcePatternType)) && (
+            <Badge className={`shrink-0 font-normal text-xs ${inherited ? 'opacity-50' : ''}`} variant="secondary">
+              {getPatternTypeLabel(acl.resourcePatternType)}
+            </Badge>
+          )}
+        </span>
+      </td>
+      <td className={`px-4 py-1.5 text-base ${inherited ? 'text-muted-foreground' : ''}`}>{acl.operation}</td>
+      <td className="px-4 py-1.5">
+        <span className={`font-medium text-base ${getPermissionColorClass(acl.permission, Boolean(inherited))}`}>
+          {acl.permission}
+        </span>
+      </td>
+      <td className={`px-4 py-1.5 font-mono text-base ${inherited ? 'text-muted-foreground' : ''}`}>{acl.host}</td>
+      <td className="px-2 py-1.5">
+        {inherited ? (
+          <TooltipProvider delayDuration={300}>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <div className="flex size-7 items-center justify-center">
+                  <Lock className="size-3 text-muted-foreground/30" />
+                </div>
+              </TooltipTrigger>
+              <TooltipContent side="left">
+                <p className="text-sm">Inherited from a role. Edit on the role page.</p>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        ) : (
+          <Button
+            className="size-7 text-muted-foreground hover:text-destructive"
+            onClick={onRemove}
+            size="icon"
+            variant="ghost"
+          >
+            <Trash2 className="size-4" />
+            <span className="sr-only">Remove ACL</span>
+          </Button>
+        )}
+      </td>
+    </tr>
+  );
+}
diff --git a/frontend/src/components/pages/security/role-detail-page.tsx b/frontend/src/components/pages/security/role-detail-page.tsx
new file mode 100644
index 0000000000..49e530d550
--- /dev/null
+++ b/frontend/src/components/pages/security/role-detail-page.tsx
@@ -0,0 +1,515 @@
+/**
+ * Copyright 2026 Redpanda Data, Inc.
+ *
+ * Use of this software is governed by the Business Source License
+ * included in the file https://github.com/redpanda-data/redpanda/blob/dev/licenses/bsl.md
+ *
+ * As of the Change Date specified in that file, in accordance with
+ * the Business Source License, use of this software will be governed
+ * by the Apache License, Version 2.0
+ */
+
+import { create } from '@bufbuild/protobuf';
+import { Link } from '@tanstack/react-router';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from 'components/redpanda-ui/components/alert-dialog';
+import { Badge } from 'components/redpanda-ui/components/badge';
+import { Button } from 'components/redpanda-ui/components/button';
+import { Combobox } from 'components/redpanda-ui/components/combobox';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from 'components/redpanda-ui/components/dialog';
+import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from 'components/redpanda-ui/components/empty';
+import { Input } from 'components/redpanda-ui/components/input';
+import { Text } from 'components/redpanda-ui/components/typography';
+import { ArrowLeft, Plus, Search, Trash2, Users } from 'lucide-react';
+import {
+  ACL_Operation,
+  ACL_PermissionType,
+  ACL_ResourcePatternType,
+  ACL_ResourceType,
+  CreateACLRequestSchema,
+  DeleteACLsRequestSchema,
+} from 'protogen/redpanda/api/dataplane/v1/acl_pb';
+import {
+  RoleMembershipSchema,
+  UpdateRoleMembershipRequestSchema,
+} from 'protogen/redpanda/api/dataplane/v1/security_pb';
+import { useEffect, useMemo, useState } from 'react';
+import {
+  useDeleteAclMutation,
+  useGetAclsByPrincipal,
+  useLegacyCreateACLMutation,
+  useListACLsQuery,
+} from 'react-query/api/acl';
+import { useGetRoleQuery, useListRolesQuery, useUpdateRoleMembershipMutation } from 'react-query/api/security';
+import { useLegacyListUsersQuery } from 'react-query/api/user';
+import { toast } from 'sonner';
+import { uiState } from 'state/ui-state';
+
+import { ACLDialog, type ACLEntry, ACLRemoveDialog, ACLTableSection } from './acl-editor';
+import {
+  buildPrincipalAutocompleteOptions,
+  buildResourceOptionsByType,
+  flattenAclDetails,
+  sortByPrincipal,
+} from './security-acl-utils';
+
+const PRINCIPAL_SEARCH_THRESHOLD = 5;
+
+interface RoleDetailPageProps {
+  roleName: string;
+}
+
+export function RoleDetailPage({ roleName }: RoleDetailPageProps) {
+  // ACL dialog state
+  const [aclDialogOpen, setAclDialogOpen] = useState(false);
+  const [aclRemoveIndex, setAclRemoveIndex] = useState<number | null>(null);
+
+  // Principal management state
+  const [addPrincipalDialogOpen, setAddPrincipalDialogOpen] = useState(false);
+  const [newPrincipal, setNewPrincipal] = useState('');
+  const [principalError, setPrincipalError] = useState<string | null>(null);
+  const [isAddingPrincipal, setIsAddingPrincipal] = useState(false);
+  const [removePrincipal, setRemovePrincipal] = useState<string | null>(null);
+  const [isRemovingPrincipal, setIsRemovingPrincipal] = useState(false);
+  const [principalSearch, setPrincipalSearch] = useState('');
+
+  // Fetch role data
+  const { data: roleData } = useGetRoleQuery({ roleName });
+  const members = useMemo(() => sortByPrincipal(roleData?.members ?? []), [roleData]);
+  const { data: usersData } = useLegacyListUsersQuery();
+  const { data: rolesData } = useListRolesQuery();
+  const { data: allAclsData } = useListACLsQuery();
+
+  // Fetch ACLs for this role
+  const { data: aclsData } = useGetAclsByPrincipal(`RedpandaRole:${roleName}`);
+
+  // Mutations
+  const { mutateAsync: updateMembership } = useUpdateRoleMembershipMutation();
+  const { mutateAsync: createACLMutation } = useLegacyCreateACLMutation();
+  const { mutateAsync: deleteACLMutation } = useDeleteAclMutation();
+
+  // Transform ACLs to display format
+  const acls: ACLEntry[] = useMemo(() => flattenAclDetails(aclsData), [aclsData]);
+  const principalOptions = useMemo(
+    () =>
+      buildPrincipalAutocompleteOptions({
+        excludePrincipals: members.map((member) => member.principal),
+        principals: [
+          ...members.map((member) => member.principal),
+          ...((allAclsData?.aclResources ?? []).flatMap((resource) =>
+            resource.acls.map((acl) => acl.principal || '').filter(Boolean)
+          ) ?? []),
+        ],
+        roles: rolesData?.roles?.map((role) => role.name) ?? [],
+        users: usersData?.users?.map((user) => user.name) ?? [],
+      }),
+    [allAclsData, members, rolesData, usersData]
+  );
+  const resourceOptionsByType = useMemo(
+    () => buildResourceOptionsByType(allAclsData?.aclResources ?? []),
+    [allAclsData]
+  );
+
+  // Filter members by search
+  const filteredMembers = useMemo(() => {
+    if (!principalSearch) {
+      return members;
+    }
+    const q = principalSearch.toLowerCase();
+    return members.filter((m) => m.principal.toLowerCase().includes(q));
+  }, [members, principalSearch]);
+
+  useEffect(() => {
+    uiState.pageTitle = roleName;
+    uiState.pageBreadcrumbs = [
+      { title: 'Security', linkTo: '/security' },
+      { title: 'Roles', linkTo: '/security/roles' },
+      {
+        title: roleName,
+        linkTo: `/security/roles/${encodeURIComponent(roleName)}`,
+        options: { canBeTruncated: true, canBeCopied: true },
+      },
+    ];
+  }, [roleName]);
+
+  // ─── Principal handlers ───────────────────────────────────────────────
+
+  const handleAddPrincipal = async () => {
+    const trimmed = newPrincipal.trim();
+    if (!trimmed) {
+      setPrincipalError('Principal is required');
+      return;
+    }
+    if (!trimmed.includes(':')) {
+      setPrincipalError('Principal must include a type prefix (e.g. User:name)');
+      return;
+    }
+    if (members.some((m) => m.principal === trimmed)) {
+      setPrincipalError('This principal is already assigned to this role');
+      return;
+    }
+
+    setIsAddingPrincipal(true);
+    try {
+      await updateMembership(
+        create(UpdateRoleMembershipRequestSchema, {
+          roleName,
+          create: false,
+          add: [create(RoleMembershipSchema, { principal: trimmed })],
+          remove: [],
+        })
+      );
+      toast.success(`Added "${trimmed}" to role`);
+      setAddPrincipalDialogOpen(false);
+      setNewPrincipal('');
+      setPrincipalError(null);
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'Failed to add principal';
+      toast.error(message);
+    } finally {
+      setIsAddingPrincipal(false);
+    }
+  };
+
+  const handleRemovePrincipal = async () => {
+    if (!removePrincipal) {
+      return;
+    }
+    setIsRemovingPrincipal(true);
+    try {
+      await updateMembership(
+        create(UpdateRoleMembershipRequestSchema, {
+          roleName,
+          create: false,
+          add: [],
+          remove: [create(RoleMembershipSchema, { principal: removePrincipal })],
+        })
+      );
+      toast.success(`Removed "${removePrincipal}" from role`);
+      setRemovePrincipal(null);
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'Failed to remove principal';
+      toast.error(message);
+    } finally {
+      setIsRemovingPrincipal(false);
+    }
+  };
+
+  // ─── ACL handlers ─────────────────────────────────────────────────────
+
+  const resourceTypeMap: Record<string, ACL_ResourceType> = {
+    Topic: ACL_ResourceType.TOPIC,
+    Group: ACL_ResourceType.GROUP,
+    Cluster: ACL_ResourceType.CLUSTER,
+    TransactionalId: ACL_ResourceType.TRANSACTIONAL_ID,
+  };
+  const operationMap: Record<string, ACL_Operation> = {
+    All: ACL_Operation.ALL,
+    Read: ACL_Operation.READ,
+    Write: ACL_Operation.WRITE,
+    Create: ACL_Operation.CREATE,
+    Delete: ACL_Operation.DELETE,
+    Alter: ACL_Operation.ALTER,
+    Describe: ACL_Operation.DESCRIBE,
+    ClusterAction: ACL_Operation.CLUSTER_ACTION,
+    DescribeConfigs: ACL_Operation.DESCRIBE_CONFIGS,
+    AlterConfigs: ACL_Operation.ALTER_CONFIGS,
+    IdempotentWrite: ACL_Operation.IDEMPOTENT_WRITE,
+  };
+  const permissionMap: Record<string, ACL_PermissionType> = {
+    Allow: ACL_PermissionType.ALLOW,
+    Deny: ACL_PermissionType.DENY,
+  };
+
+  const handleSaveAcl = async (entry: ACLEntry) => {
+    try {
+      await createACLMutation(
+        create(CreateACLRequestSchema, {
+          resourceType: resourceTypeMap[entry.resourceType] ?? ACL_ResourceType.TOPIC,
+          resourceName: entry.resourceName,
+          resourcePatternType: entry.resourcePatternType ?? ACL_ResourcePatternType.LITERAL,
+          principal: `RedpandaRole:${roleName}`,
+          host: entry.host,
+          operation: operationMap[entry.operation] ?? ACL_Operation.ALL,
+          permissionType: permissionMap[entry.permission] ?? ACL_PermissionType.ALLOW,
+        })
+      );
+      toast.success('ACL created');
+      setAclDialogOpen(false);
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'Failed to create ACL';
+      toast.error(message);
+    }
+  };
+
+  const handleRemoveAcl = (idx: number) => {
+    setAclRemoveIndex(idx);
+  };
+
+  const confirmRemoveAcl = async () => {
+    if (aclRemoveIndex === null) {
+      return;
+    }
+    const acl = acls[aclRemoveIndex];
+    if (!acl) {
+      return;
+    }
+
+    try {
+      await deleteACLMutation(
+        create(DeleteACLsRequestSchema, {
+          filter: {
+            principal: `RedpandaRole:${roleName}`,
+            resourceType: resourceTypeMap[acl.resourceType] ?? ACL_ResourceType.TOPIC,
+            resourceName: acl.resourceName,
+            host: acl.host,
+            operation: operationMap[acl.operation] ?? ACL_Operation.ALL,
+            permissionType: permissionMap[acl.permission] ?? ACL_PermissionType.ALLOW,
+            resourcePatternType: acl.resourcePatternType ?? ACL_ResourcePatternType.LITERAL,
+          },
+        })
+      );
+      toast.success('ACL removed');
+      setAclRemoveIndex(null);
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'Failed to remove ACL';
+      toast.error(message);
+    }
+  };
+
+  if (!roleData) {
+    return (
+      <div className="flex flex-col items-center justify-center gap-4 py-12">
+        <Text variant="muted">Role not found.</Text>
+        <Button asChild variant="outline">
+          <Link params={{ tab: 'roles' }} to="/security/$tab">
+            Back to Security
+          </Link>
+        </Button>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <div className="flex flex-col gap-8 pt-2">
+        {/* Page Header */}
+        <div>
+          <Button asChild className="mb-4 -ml-3 text-muted-foreground" variant="ghost">
+            <Link params={{ tab: 'roles' }} to="/security/$tab">
+              <ArrowLeft className="size-4" />
+              Roles
+            </Link>
+          </Button>
+          <h1 className="min-w-0 truncate font-semibold text-2xl tracking-tight" title={roleName}>
+            {roleName}
+          </h1>
+          <p className="mt-1 text-muted-foreground text-sm">Manage the ACLs and principals assigned to this role.</p>
+        </div>
+
+        {/* ACLs Section */}
+        <ACLTableSection acls={acls} context="role" onAdd={() => setAclDialogOpen(true)} onRemove={handleRemoveAcl} />
+
+        {/* Principals Section */}
+        <div>
+          <div className="mb-3 flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <Users className="size-4 text-muted-foreground" />
+              <Text as="span" className="font-semibold text-base">
+                Principals
+              </Text>
+              <Text as="span" variant="muted">
+                {members.length} {members.length === 1 ? 'principal' : 'principals'}
+              </Text>
+            </div>
+            {members.length > 0 && (
+              <Button
+                onClick={() => {
+                  setAddPrincipalDialogOpen(true);
+                  setNewPrincipal('');
+                  setPrincipalError(null);
+                }}
+              >
+                <Plus className="size-4" />
+                Add Principal
+              </Button>
+            )}
+          </div>
+
+          {/* Principal search (shown when > threshold) */}
+          {members.length > PRINCIPAL_SEARCH_THRESHOLD && (
+            <div className="relative mb-3 w-full max-w-sm">
+              <Search className="absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground" />
+              <Input
+                aria-label="Search principals"
+                className="pl-9"
+                onChange={(e) => setPrincipalSearch(e.target.value)}
+                placeholder="Search principals..."
+                type="text"
+                value={principalSearch}
+              />
+            </div>
+          )}
+
+          <div className="overflow-hidden rounded-lg border">
+            {filteredMembers.length > 0 ? (
+              <div>
+                {filteredMembers.map((member, idx) => (
+                  <div
+                    className={`flex items-center justify-between px-4 py-3 ${idx < filteredMembers.length - 1 ? 'border-b' : ''}`}
+                    key={member.principal}
+                  >
+                    <div className="flex min-w-0 items-center gap-3">
+                      <Badge className="shrink-0 font-normal text-sm" variant="outline">
+                        {member.principal.split(':')[0] || 'User'}
+                      </Badge>
+                      <span className="truncate font-mono text-base" title={member.principal}>
+                        {member.principal.includes(':')
+                          ? member.principal.split(':').slice(1).join(':')
+                          : member.principal}
+                      </span>
+                    </div>
+                    <Button
+                      className="size-8 shrink-0 text-muted-foreground hover:text-destructive"
+                      onClick={() => setRemovePrincipal(member.principal)}
+                      size="icon"
+                      variant="ghost"
+                    >
+                      <Trash2 className="size-4" />
+                      <span className="sr-only">Remove {member.principal}</span>
+                    </Button>
+                  </div>
+                ))}
+              </div>
+            ) : (
+              <Empty className="py-12">
+                <EmptyMedia variant="icon">
+                  <Users className="size-6" />
+                </EmptyMedia>
+                <EmptyHeader>
+                  <EmptyTitle>{principalSearch ? 'No principals found' : 'No principals assigned'}</EmptyTitle>
+                  <EmptyDescription>
+                    {principalSearch
+                      ? 'Try adjusting your search query.'
+                      : 'Add principals to grant them the permissions defined by this role.'}
+                  </EmptyDescription>
+                </EmptyHeader>
+                {!principalSearch && (
+                  <Button
+                    onClick={() => {
+                      setAddPrincipalDialogOpen(true);
+                      setNewPrincipal('');
+                      setPrincipalError(null);
+                    }}
+                  >
+                    <Plus className="size-4" />
+                    Add Principal
+                  </Button>
+                )}
+              </Empty>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* ACL Create Dialog */}
+      <ACLDialog
+        context="role"
+        onClose={() => setAclDialogOpen(false)}
+        onSave={handleSaveAcl}
+        open={aclDialogOpen}
+        resourceOptionsByType={resourceOptionsByType}
+      />
+
+      {/* ACL Remove Confirmation */}
+      <ACLRemoveDialog
+        acl={aclRemoveIndex !== null ? (acls[aclRemoveIndex] ?? null) : null}
+        context="role"
+        onClose={() => setAclRemoveIndex(null)}
+        onConfirm={confirmRemoveAcl}
+        open={aclRemoveIndex !== null}
+      />
+
+      {/* Add Principal Dialog */}
+      <Dialog onOpenChange={(open) => !open && setAddPrincipalDialogOpen(false)} open={addPrincipalDialogOpen}>
+        <DialogContent className="sm:max-w-sm">
+          <DialogHeader spacing="loose">
+            <DialogTitle>Add Principal</DialogTitle>
+            <DialogDescription>Add a principal to this role to grant them its permissions.</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4">
+            <div className="space-y-2">
+              <Combobox
+                autocomplete
+                className="font-mono"
+                creatable
+                onChange={(value) => {
+                  setNewPrincipal(value);
+                  setPrincipalError(null);
+                }}
+                options={principalOptions}
+                placeholder="e.g. User:alice"
+                value={newPrincipal}
+              />
+              <p className="text-base text-muted-foreground leading-6">
+                Enter a principal in the format <code className="rounded bg-muted px-1 font-mono">Type:name</code> (e.g.
+                User:alice, Group:my-team).
+              </p>
+              {Boolean(principalError) && <p className="text-base text-destructive leading-6">{principalError}</p>}
+            </div>
+          </div>
+          <DialogFooter>
+            <Button onClick={() => setAddPrincipalDialogOpen(false)} variant="outline">
+              Cancel
+            </Button>
+            <Button disabled={isAddingPrincipal} onClick={handleAddPrincipal}>
+              {isAddingPrincipal ? 'Adding...' : 'Add'}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* Remove Principal Confirmation Dialog */}
+      <AlertDialog
+        onOpenChange={(open) => {
+          if (!open) {
+            setRemovePrincipal(null);
+          }
+        }}
+        open={Boolean(removePrincipal)}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Remove principal "{removePrincipal}"?</AlertDialogTitle>
+            <AlertDialogDescription>
+              This principal will lose all permissions granted by this role. This action cannot be undone.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel asChild>
+              <Button variant="outline">Cancel</Button>
+            </AlertDialogCancel>
+            <AlertDialogAction asChild disabled={isRemovingPrincipal} onClick={handleRemovePrincipal}>
+              <Button variant="destructive">{isRemovingPrincipal ? 'Removing...' : 'Remove'}</Button>
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  );
+}
diff --git a/frontend/src/components/pages/security/roles-tab.tsx b/frontend/src/components/pages/security/roles-tab.tsx
new file mode 100644
index 0000000000..0f016e4197
--- /dev/null
+++ b/frontend/src/components/pages/security/roles-tab.tsx
@@ -0,0 +1,346 @@
+/**
+ * Copyright 2026 Redpanda Data, Inc.
+ *
+ * Use of this software is governed by the Business Source License
+ * included in the file https://github.com/redpanda-data/redpanda/blob/dev/licenses/bsl.md
+ *
+ * As of the Change Date specified in that file, in accordance with
+ * the Business Source License, use of this software will be governed
+ * by the Apache License, Version 2.0
+ */
+
+import { create } from '@bufbuild/protobuf';
+import { createQueryOptions, useTransport } from '@connectrpc/connect-query';
+import { useQueries } from '@tanstack/react-query';
+import { useNavigate } from '@tanstack/react-router';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from 'components/redpanda-ui/components/alert-dialog';
+import { Button } from 'components/redpanda-ui/components/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from 'components/redpanda-ui/components/dialog';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from 'components/redpanda-ui/components/dropdown-menu';
+import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from 'components/redpanda-ui/components/empty';
+import { Input } from 'components/redpanda-ui/components/input';
+import { Label } from 'components/redpanda-ui/components/label';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from 'components/redpanda-ui/components/table';
+import { Text } from 'components/redpanda-ui/components/typography';
+import { MoreHorizontal, Pencil, Plus, Search, Shield, Trash2, Users } from 'lucide-react';
+import { CreateRoleRequestSchema } from 'protogen/redpanda/api/dataplane/v1/security_pb';
+import { getRole } from 'protogen/redpanda/api/dataplane/v1/security-SecurityService_connectquery';
+import { useMemo, useState } from 'react';
+import { useCreateRoleMutation, useDeleteRoleMutation, useListRolesQuery } from 'react-query/api/security';
+import { toast } from 'sonner';
+
+import { sortByName } from './security-acl-utils';
+
+export function RolesTab() {
+  const navigate = useNavigate();
+  const [searchQuery, setSearchQuery] = useState('');
+  const [deleteConfirmRole, setDeleteConfirmRole] = useState<{ name: string; memberCount: number } | null>(null);
+  const [createDialogOpen, setCreateDialogOpen] = useState(false);
+  const [newRoleName, setNewRoleName] = useState('');
+  const [createError, setCreateError] = useState<string | null>(null);
+  const [isCreating, setIsCreating] = useState(false);
+  const [isDeleting, setIsDeleting] = useState(false);
+
+  const { data: rolesData } = useListRolesQuery();
+  const { mutateAsync: createRole } = useCreateRoleMutation();
+  const { mutateAsync: deleteRole } = useDeleteRoleMutation();
+
+  const roles = useMemo(() => sortByName(rolesData?.roles ?? []), [rolesData]);
+  const transport = useTransport();
+  const roleDetailsQueries = useQueries({
+    queries: roles.map((role) =>
+      createQueryOptions(
+        getRole,
+        {
+          roleName: role.name,
+        },
+        { transport }
+      )
+    ),
+  });
+
+  const filteredRoles = useMemo(() => {
+    if (!searchQuery) {
+      return roles;
+    }
+    const q = searchQuery.toLowerCase();
+    return roles.filter((role) => role.name.toLowerCase().includes(q));
+  }, [roles, searchQuery]);
+  const memberCountByRole = useMemo(
+    () => new Map(roles.map((role, index) => [role.name, roleDetailsQueries[index]?.data?.members?.length ?? 0])),
+    [roleDetailsQueries, roles]
+  );
+
+  const handleCreateRole = async () => {
+    const name = newRoleName.trim();
+    if (!name) {
+      setCreateError('Role name is required');
+      return;
+    }
+    if (roles.some((r) => r.name === name)) {
+      setCreateError('A role with this name already exists');
+      return;
+    }
+
+    setIsCreating(true);
+    try {
+      await createRole(create(CreateRoleRequestSchema, { role: { name } }));
+      toast.success(`Role "${name}" created`);
+      setCreateDialogOpen(false);
+      setNewRoleName('');
+      setCreateError(null);
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'Failed to create role';
+      toast.error(message);
+    } finally {
+      setIsCreating(false);
+    }
+  };
+
+  const handleDeleteRole = async () => {
+    if (!deleteConfirmRole) {
+      return;
+    }
+    setIsDeleting(true);
+    try {
+      await deleteRole({ deleteAcls: true, roleName: deleteConfirmRole.name });
+      toast.success(`Role "${deleteConfirmRole.name}" deleted`);
+      setDeleteConfirmRole(null);
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'Failed to delete role';
+      toast.error(message);
+    } finally {
+      setIsDeleting(false);
+    }
+  };
+
+  const navigateToRole = (roleName: string) => {
+    navigate({ to: '/security/roles/$roleName', params: { roleName: encodeURIComponent(roleName) } });
+  };
+
+  return (
+    <div aria-labelledby="roles-tab" id="roles-panel" role="tabpanel">
+      <Text className="max-w-3xl pb-2 text-base leading-6" variant="muted">
+        Roles are groups of access control lists (ACLs) that can be assigned to principals. A principal represents any
+        entity that can be authenticated, such as a user, service, or system (for example, a SASL-SCRAM user, OIDC
+        identity, or mTLS client).
+      </Text>
+
+      {/* Toolbar */}
+      <div className="mb-4 flex items-center justify-between gap-4">
+        <div className="relative w-full max-w-sm">
+          <Search className="absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground" />
+          <Input
+            aria-label="Search roles"
+            className="pl-9"
+            onChange={(e) => setSearchQuery(e.target.value)}
+            placeholder="Search by name..."
+            type="text"
+            value={searchQuery}
+          />
+        </div>
+        <Button
+          onClick={() => {
+            setCreateDialogOpen(true);
+            setNewRoleName('');
+            setCreateError(null);
+          }}
+        >
+          <Plus className="size-4" />
+          Create role
+        </Button>
+      </div>
+
+      {/* Roles Table */}
+      <div className="rounded-lg border">
+        {filteredRoles.length > 0 ? (
+          <Table size="lg">
+            <TableHeader>
+              <TableRow className="hover:bg-transparent">
+                <TableHead>Role name</TableHead>
+                <TableHead className="w-[160px]">Assigned principals</TableHead>
+                <TableHead className="w-12">
+                  <span className="sr-only">Actions</span>
+                </TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {filteredRoles.map((role) => (
+                <TableRow className="cursor-pointer" key={role.name} onClick={() => navigateToRole(role.name)}>
+                  <TableCell className="py-1.5">
+                    <span className="font-medium">{role.name}</span>
+                  </TableCell>
+                  <TableCell className="py-1.5">
+                    <div className="flex items-center gap-1.5">
+                      <Users className="size-3.5 text-muted-foreground" />
+                      <span className="tabular-nums">{memberCountByRole.get(role.name) ?? 0}</span>
+                    </div>
+                  </TableCell>
+                  <TableCell className="py-1.5" onClick={(e) => e.stopPropagation()}>
+                    <DropdownMenu>
+                      <DropdownMenuTrigger asChild>
+                        <Button className="size-8" size="icon" variant="ghost">
+                          <MoreHorizontal className="size-4" />
+                          <span className="sr-only">Actions for {role.name}</span>
+                        </Button>
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent align="end" className="w-48">
+                        <DropdownMenuItem onClick={() => navigateToRole(role.name)}>
+                          <Pencil className="size-4" />
+                          Edit role
+                        </DropdownMenuItem>
+                        <DropdownMenuSeparator />
+                        <DropdownMenuItem
+                          className="text-destructive focus:text-destructive"
+                          onClick={() =>
+                            setDeleteConfirmRole({
+                              memberCount: memberCountByRole.get(role.name) ?? 0,
+                              name: role.name,
+                            })
+                          }
+                        >
+                          <Trash2 className="size-4" />
+                          Delete role
+                        </DropdownMenuItem>
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        ) : (
+          <Empty className="py-16">
+            <EmptyMedia variant="icon">
+              <Shield className="size-6" />
+            </EmptyMedia>
+            <EmptyHeader>
+              <EmptyTitle>{searchQuery ? 'No roles found' : 'No roles yet'}</EmptyTitle>
+              <EmptyDescription>
+                {searchQuery
+                  ? 'Try adjusting your search query.'
+                  : 'Create your first role to group ACLs and assign them to principals.'}
+              </EmptyDescription>
+            </EmptyHeader>
+            {!searchQuery && (
+              <Button
+                onClick={() => {
+                  setCreateDialogOpen(true);
+                  setNewRoleName('');
+                  setCreateError(null);
+                }}
+              >
+                <Plus className="size-4" />
+                Create role
+              </Button>
+            )}
+          </Empty>
+        )}
+      </div>
+
+      {filteredRoles.length > 0 && (
+        <div className="mt-4 text-muted-foreground text-sm">
+          {filteredRoles.length} {filteredRoles.length === 1 ? 'role' : 'roles'}
+        </div>
+      )}
+
+      {/* Create Role Dialog */}
+      <Dialog onOpenChange={(open) => !open && setCreateDialogOpen(false)} open={createDialogOpen}>
+        <DialogContent className="sm:max-w-sm">
+          <DialogHeader spacing="loose">
+            <DialogTitle>Create Role</DialogTitle>
+            <DialogDescription>Create a new role to group ACLs.</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4">
+            <div className="space-y-3">
+              <div className="space-y-1">
+                <Label htmlFor="role-name">Role Name</Label>
+                <Text variant="muted">Must not contain whitespace or special characters.</Text>
+              </div>
+              <Input
+                autoComplete="off"
+                id="role-name"
+                onChange={(e) => {
+                  setNewRoleName(e.target.value);
+                  setCreateError(null);
+                }}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter') {
+                    e.preventDefault();
+                    handleCreateRole();
+                  }
+                }}
+                placeholder="e.g. producer, consumer, admin"
+                type="text"
+                value={newRoleName}
+              />
+              {Boolean(createError) && <p className="text-destructive text-sm">{createError}</p>}
+            </div>
+          </div>
+          <DialogFooter>
+            <Button onClick={() => setCreateDialogOpen(false)} variant="outline">
+              Cancel
+            </Button>
+            <Button disabled={isCreating} onClick={handleCreateRole}>
+              {isCreating ? 'Creating...' : 'Create'}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* Delete Confirmation Dialog */}
+      <AlertDialog
+        onOpenChange={(open) => {
+          if (!open) {
+            setDeleteConfirmRole(null);
+          }
+        }}
+        open={Boolean(deleteConfirmRole)}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Delete role "{deleteConfirmRole?.name}"?</AlertDialogTitle>
+            <AlertDialogDescription>
+              This will permanently delete the role and remove all its ACL bindings.
+              {Boolean(deleteConfirmRole && deleteConfirmRole.memberCount > 0) &&
+                ` ${deleteConfirmRole?.memberCount} assigned ${
+                  deleteConfirmRole?.memberCount === 1 ? 'principal' : 'principals'
+                } will lose the permissions granted by this role.`}{' '}
+              This action cannot be undone.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel asChild>
+              <Button variant="outline">Cancel</Button>
+            </AlertDialogCancel>
+            <AlertDialogAction asChild disabled={isDeleting} onClick={handleDeleteRole}>
+              <Button variant="destructive">{isDeleting ? 'Deleting...' : 'Delete Role'}</Button>
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  );
+}
diff --git a/frontend/src/components/pages/security/security-acl-utils.test.ts b/frontend/src/components/pages/security/security-acl-utils.test.ts
new file mode 100644
index 0000000000..26e8f1c2d3
--- /dev/null
+++ b/frontend/src/components/pages/security/security-acl-utils.test.ts
@@ -0,0 +1,218 @@
+import type { AclDetail } from 'components/pages/acls/new-acl/acl.model';
+import { ACL_ResourcePatternType, ACL_ResourceType } from 'protogen/redpanda/api/dataplane/v1/acl_pb';
+import { describe, expect, it } from 'vitest';
+
+import {
+  buildPrincipalAutocompleteOptions,
+  buildResourceOptionsByType,
+  compareDisplayText,
+  flattenAclDetails,
+  sortAclEntries,
+  sortByName,
+  sortByPrincipal,
+} from './security-acl-utils';
+
+describe('security-acl-utils sorting', () => {
+  it('sorts display text case-insensitively and numerically', () => {
+    const values = ['role-10', 'Role-2', 'role-1'];
+
+    expect([...values].sort(compareDisplayText)).toEqual(['role-1', 'Role-2', 'role-10']);
+  });
+
+  it('uses a raw-string fallback when visible labels compare equally', () => {
+    const values = ['alice', 'ALICE', 'Alice'];
+
+    expect([...values].sort(compareDisplayText)).toEqual(['ALICE', 'Alice', 'alice']);
+  });
+
+  it('sorts name-based collections alphabetically', () => {
+    const roles = [{ name: 'role-10' }, { name: 'Role-2' }, { name: 'role-1' }];
+
+    expect(sortByName(roles).map((role) => role.name)).toEqual(['role-1', 'Role-2', 'role-10']);
+  });
+
+  it('sorts principal-based collections alphabetically', () => {
+    const principals = [{ principal: 'User:zeta' }, { principal: 'OIDC:alpha' }, { principal: 'User:beta' }];
+
+    expect(sortByPrincipal(principals).map((principal) => principal.principal)).toEqual([
+      'OIDC:alpha',
+      'User:beta',
+      'User:zeta',
+    ]);
+  });
+
+  it('preserves resourcePatternType for literal, prefix, and any selector types', () => {
+    const details: AclDetail[] = [
+      {
+        sharedConfig: { principal: 'User:test', host: '*' },
+        rules: [
+          {
+            id: 1,
+            resourceType: 'topic',
+            mode: 'custom',
+            selectorType: 'literal',
+            selectorValue: 'my-topic',
+            operations: { READ: 'allow' },
+          },
+          {
+            id: 2,
+            resourceType: 'topic',
+            mode: 'custom',
+            selectorType: 'prefix',
+            selectorValue: 'events.',
+            operations: { WRITE: 'allow' },
+          },
+          {
+            id: 3,
+            resourceType: 'consumerGroup',
+            mode: 'custom',
+            selectorType: 'any',
+            selectorValue: '*',
+            operations: { READ: 'allow' },
+          },
+        ],
+      },
+    ];
+
+    const entries = flattenAclDetails(details);
+
+    expect(entries).toHaveLength(3);
+
+    const literal = entries.find((e) => e.resourceName === 'my-topic');
+    expect(literal?.resourcePatternType).toBe(ACL_ResourcePatternType.LITERAL);
+
+    const prefixed = entries.find((e) => e.resourceName === 'events.');
+    expect(prefixed?.resourcePatternType).toBe(ACL_ResourcePatternType.PREFIXED);
+
+    const any = entries.find((e) => e.resourceType === 'Group');
+    expect(any?.resourcePatternType).toBe(ACL_ResourcePatternType.LITERAL);
+  });
+
+  it('sorts ACL rows by the displayed tuple, including wildcard and inherited metadata', () => {
+    const entries = [
+      {
+        host: '*',
+        operation: 'Read',
+        permission: 'Allow',
+        principal: 'User:zeta',
+        resourceName: 'topic-10',
+        resourceType: 'Topic',
+      },
+      {
+        host: '*',
+        operation: 'All',
+        permission: 'Allow',
+        resourceName: 'kafka-cluster',
+        resourceType: 'Cluster',
+      },
+      {
+        host: '*',
+        operation: 'Read',
+        permission: 'Allow',
+        roleName: 'role-10',
+        resourceName: '*',
+        resourceType: 'Group',
+      },
+      {
+        host: '*',
+        operation: 'Read',
+        permission: 'Allow',
+        roleName: 'role-2',
+        resourceName: '*',
+        resourceType: 'Group',
+      },
+      {
+        host: '*',
+        operation: 'Read',
+        permission: 'Allow',
+        principal: 'User:alpha',
+        resourceName: 'topic-2',
+        resourceType: 'Topic',
+      },
+    ];
+
+    expect(
+      sortAclEntries(entries).map((entry) => ({
+        principal: entry.principal,
+        resourceName: entry.resourceName,
+        resourceType: entry.resourceType,
+        roleName: entry.roleName,
+      }))
+    ).toEqual([
+      {
+        principal: undefined,
+        resourceName: 'kafka-cluster',
+        resourceType: 'Cluster',
+        roleName: undefined,
+      },
+      {
+        principal: undefined,
+        resourceName: '*',
+        resourceType: 'Group',
+        roleName: 'role-2',
+      },
+      {
+        principal: undefined,
+        resourceName: '*',
+        resourceType: 'Group',
+        roleName: 'role-10',
+      },
+      {
+        principal: 'User:alpha',
+        resourceName: 'topic-2',
+        resourceType: 'Topic',
+        roleName: undefined,
+      },
+      {
+        principal: 'User:zeta',
+        resourceName: 'topic-10',
+        resourceType: 'Topic',
+        roleName: undefined,
+      },
+    ]);
+  });
+
+  it('builds principal autocomplete options from users, roles, live principals, and the User: helper', () => {
+    expect(
+      buildPrincipalAutocompleteOptions({
+        principals: ['Group:team-a', 'User:zoe', 'Group:team-a'],
+        roles: ['role-10', 'role-2'],
+        users: ['bob', 'alice'],
+      }).map((option) => option.value)
+    ).toEqual([
+      'Group:team-a',
+      'RedpandaRole:role-2',
+      'RedpandaRole:role-10',
+      'User:',
+      'User:alice',
+      'User:bob',
+      'User:zoe',
+    ]);
+  });
+
+  it('excludes already assigned principals from principal autocomplete options', () => {
+    expect(
+      buildPrincipalAutocompleteOptions({
+        excludePrincipals: ['User:alice', 'Group:team-a'],
+        principals: ['User:alice', 'Group:team-a', 'Group:team-b'],
+        users: ['alice', 'bob'],
+      }).map((option) => option.value)
+    ).toEqual(['Group:team-b', 'User:', 'User:bob']);
+  });
+
+  it('groups resource autocomplete options by displayed resource type', () => {
+    const optionsByType = buildResourceOptionsByType([
+      { resourceName: 'topic-2', resourceType: ACL_ResourceType.TOPIC },
+      { resourceName: 'topic-10', resourceType: ACL_ResourceType.TOPIC },
+      { resourceName: 'group-a', resourceType: ACL_ResourceType.GROUP },
+      { resourceName: 'txn-1', resourceType: ACL_ResourceType.TRANSACTIONAL_ID },
+      { resourceName: 'kafka-cluster', resourceType: ACL_ResourceType.CLUSTER },
+      { resourceName: 'topic-2', resourceType: ACL_ResourceType.TOPIC },
+    ]);
+
+    expect(optionsByType.Topic?.map((option) => option.value)).toEqual(['topic-2', 'topic-10']);
+    expect(optionsByType.Group?.map((option) => option.value)).toEqual(['group-a']);
+    expect(optionsByType.TransactionalId?.map((option) => option.value)).toEqual(['txn-1']);
+    expect(optionsByType.Cluster?.map((option) => option.value)).toEqual(['kafka-cluster']);
+  });
+});
diff --git a/frontend/src/components/pages/security/security-acl-utils.ts b/frontend/src/components/pages/security/security-acl-utils.ts
new file mode 100644
index 0000000000..b274dc54e9
--- /dev/null
+++ b/frontend/src/components/pages/security/security-acl-utils.ts
@@ -0,0 +1,224 @@
+import {
+  type AclDetail,
+  getGRPCResourcePatternType,
+  getResourceNameValue,
+} from 'components/pages/acls/new-acl/acl.model';
+import type { ComboboxOption } from 'components/redpanda-ui/components/combobox';
+import { ACL_ResourcePatternType, ACL_ResourceType } from 'protogen/redpanda/api/dataplane/v1/acl_pb';
+
+import type { ACLEntry } from './acl-editor';
+
+const displayTextCollator = new Intl.Collator(undefined, {
+  numeric: true,
+  sensitivity: 'base',
+  usage: 'sort',
+});
+
+const resourceTypeLabels: Record<string, string> = {
+  cluster: 'Cluster',
+  consumerGroup: 'Group',
+  schemaRegistry: 'SchemaRegistry',
+  subject: 'Subject',
+  topic: 'Topic',
+  transactionalId: 'TransactionalId',
+};
+
+const operationLabels: Record<string, string> = {
+  ALTER: 'Alter',
+  ALTER_CONFIGS: 'AlterConfigs',
+  ALL: 'All',
+  CLUSTER_ACTION: 'ClusterAction',
+  CREATE: 'Create',
+  DELETE: 'Delete',
+  DESCRIBE: 'Describe',
+  DESCRIBE_CONFIGS: 'DescribeConfigs',
+  IDEMPOTENT_WRITE: 'IdempotentWrite',
+  READ: 'Read',
+  WRITE: 'Write',
+};
+
+type NamedItem = { name: string };
+type PrincipalItem = { principal: string };
+type SortableAclEntry = Pick<ACLEntry, 'operation' | 'permission' | 'resourceName' | 'resourceType'> & {
+  host?: string;
+  principal?: string;
+  roleName?: string;
+};
+type ResourceOptionSource = {
+  resourceName?: string;
+  resourceType?: ACL_ResourceType | string;
+};
+
+export type ResourceOptionsByType = Partial<
+  Record<'Cluster' | 'Group' | 'Topic' | 'TransactionalId', ComboboxOption[]>
+>;
+
+export function compareDisplayText(a: string, b: string): number {
+  const displayComparison = displayTextCollator.compare(a, b);
+  if (displayComparison !== 0) {
+    return displayComparison;
+  }
+  if (a === b) {
+    return 0;
+  }
+  return a < b ? -1 : 1;
+}
+
+export function sortByName<T extends NamedItem>(items: readonly T[]): T[] {
+  return [...items].sort((a, b) => compareDisplayText(a.name, b.name));
+}
+
+export function sortByPrincipal<T extends PrincipalItem>(items: readonly T[]): T[] {
+  return [...items].sort((a, b) => compareDisplayText(a.principal, b.principal));
+}
+
+export function sortAclEntries<T extends SortableAclEntry>(entries: readonly T[]): T[] {
+  return [...entries].sort((a, b) => {
+    const comparisons = [
+      compareDisplayText(a.resourceType, b.resourceType),
+      compareDisplayText(a.resourceName, b.resourceName),
+      compareDisplayText(a.operation, b.operation),
+      compareDisplayText(a.permission, b.permission),
+      compareDisplayText(a.host ?? '', b.host ?? ''),
+      compareDisplayText(a.roleName ?? '', b.roleName ?? ''),
+      compareDisplayText(a.principal ?? '', b.principal ?? ''),
+    ];
+
+    return comparisons.find((result) => result !== 0) ?? 0;
+  });
+}
+
+function toComboboxOptions(values: Iterable<string>): ComboboxOption[] {
+  return [...values].sort(compareDisplayText).map((value) => ({
+    label: value,
+    value,
+  }));
+}
+
+export function getAclResourceTypeLabel(resourceType: ACL_ResourceType | string | undefined): string | undefined {
+  if (resourceType === undefined) {
+    return;
+  }
+
+  switch (resourceType) {
+    case ACL_ResourceType.TOPIC:
+    case 'topic':
+      return 'Topic';
+    case ACL_ResourceType.GROUP:
+    case 'consumerGroup':
+      return 'Group';
+    case ACL_ResourceType.CLUSTER:
+    case 'cluster':
+      return 'Cluster';
+    case ACL_ResourceType.TRANSACTIONAL_ID:
+    case 'transactionalId':
+      return 'TransactionalId';
+    default:
+      return;
+  }
+}
+
+export function buildPrincipalAutocompleteOptions({
+  excludePrincipals = [],
+  includeUserPrefix = true,
+  principals = [],
+  roles = [],
+  users = [],
+}: {
+  excludePrincipals?: readonly string[];
+  includeUserPrefix?: boolean;
+  principals?: readonly string[];
+  roles?: readonly string[];
+  users?: readonly string[];
+}): ComboboxOption[] {
+  const values = new Set<string>();
+  const excluded = new Set(excludePrincipals);
+
+  if (includeUserPrefix) {
+    values.add('User:');
+  }
+
+  for (const user of users) {
+    if (user) {
+      values.add(`User:${user}`);
+    }
+  }
+
+  for (const role of roles) {
+    if (role) {
+      values.add(`RedpandaRole:${role}`);
+    }
+  }
+
+  for (const principal of principals) {
+    if (principal) {
+      values.add(principal);
+    }
+  }
+
+  for (const principal of excluded) {
+    values.delete(principal);
+  }
+
+  return toComboboxOptions(values);
+}
+
+export function buildResourceOptionsByType(resources: readonly ResourceOptionSource[]): ResourceOptionsByType {
+  const valuesByType = new Map<keyof ResourceOptionsByType, Set<string>>();
+
+  for (const resource of resources) {
+    const label = getAclResourceTypeLabel(resource.resourceType);
+    if (!(label && resource.resourceName)) {
+      continue;
+    }
+
+    const existing = valuesByType.get(label as keyof ResourceOptionsByType) ?? new Set<string>();
+    existing.add(resource.resourceName);
+    valuesByType.set(label as keyof ResourceOptionsByType, existing);
+  }
+
+  return {
+    Cluster: toComboboxOptions(valuesByType.get('Cluster') ?? []),
+    Group: toComboboxOptions(valuesByType.get('Group') ?? []),
+    Topic: toComboboxOptions(valuesByType.get('Topic') ?? []),
+    TransactionalId: toComboboxOptions(valuesByType.get('TransactionalId') ?? []),
+  };
+}
+
+export function flattenAclDetails(details?: AclDetail[]): ACLEntry[] {
+  if (!(details && Array.isArray(details))) {
+    return [];
+  }
+
+  const entries: ACLEntry[] = [];
+
+  for (const detail of details) {
+    const host = detail.sharedConfig?.host || '*';
+
+    for (const rule of detail.rules ?? []) {
+      for (const [operation, permission] of Object.entries(rule.operations ?? {})) {
+        if (permission === 'not-set') {
+          continue;
+        }
+
+        entries.push({
+          resourceType:
+            getAclResourceTypeLabel(rule.resourceType) ??
+            resourceTypeLabels[rule.resourceType] ??
+            rule.resourceType ??
+            'Unknown',
+          resourceName: getResourceNameValue(rule),
+          operation: operationLabels[operation] ?? operation,
+          permission: permission === 'allow' ? 'Allow' : 'Deny',
+          host,
+          resourcePatternType:
+            rule.selectorType === 'any'
+              ? ACL_ResourcePatternType.LITERAL
+              : getGRPCResourcePatternType(rule.selectorType),
+        });
+      }
+    }
+  }
+
+  return sortAclEntries(entries);
+}
diff --git a/frontend/src/components/pages/security/security-page.tsx b/frontend/src/components/pages/security/security-page.tsx
new file mode 100644
index 0000000000..d0b928e497
--- /dev/null
+++ b/frontend/src/components/pages/security/security-page.tsx
@@ -0,0 +1,80 @@
+/**
+ * Copyright 2026 Redpanda Data, Inc.
+ *
+ * Use of this software is governed by the Business Source License
+ * included in the file https://github.com/redpanda-data/redpanda/blob/dev/licenses/bsl.md
+ *
+ * As of the Change Date specified in that file, in accordance with
+ * the Business Source License, use of this software will be governed
+ * by the Apache License, Version 2.0
+ */
+
+import { useNavigate } from '@tanstack/react-router';
+import { Tabs, TabsContent, TabsContents, TabsList, TabsTrigger } from 'components/redpanda-ui/components/tabs';
+import { useEffect } from 'react';
+import { Features } from 'state/supported-features';
+import { uiState } from 'state/ui-state';
+
+import { PermissionsTab } from './permissions-tab';
+import { RolesTab } from './roles-tab';
+import { UsersTab } from './users-tab';
+
+export type SecurityTab = 'users' | 'roles' | 'permissions';
+
+const tabs: { id: SecurityTab; label: string; requiresFeature?: () => boolean }[] = [
+  { id: 'users', label: 'Users' },
+  { id: 'roles', label: 'Roles', requiresFeature: () => Boolean(Features.rolesApi) },
+  { id: 'permissions', label: 'Permissions' },
+];
+
+interface SecurityPageProps {
+  tab: SecurityTab;
+}
+
+export function SecurityPage({ tab }: SecurityPageProps) {
+  const navigate = useNavigate();
+
+  // Validate tab — fall back to 'users' if invalid
+  const validTabs: SecurityTab[] = ['users', 'roles', 'permissions'];
+  const activeTab = validTabs.includes(tab) ? tab : 'users';
+
+  const activeTabLabel = tabs.find((t) => t.id === activeTab)?.label ?? 'Users';
+
+  useEffect(() => {
+    uiState.pageTitle = 'Security';
+    uiState.pageBreadcrumbs = [
+      { title: 'Security', linkTo: `/security/${activeTab}` },
+      { title: activeTabLabel, linkTo: `/security/${activeTab}` },
+    ];
+  }, [activeTab, activeTabLabel]);
+
+  const setActiveTab = (newTab: SecurityTab) => {
+    navigate({ to: '/security/$tab', params: { tab: newTab }, replace: true });
+  };
+
+  const visibleTabs = tabs.filter((t) => !t.requiresFeature || t.requiresFeature());
+
+  return (
+    <Tabs className="gap-6" onValueChange={(v) => setActiveTab(v as SecurityTab)} value={activeTab}>
+      <TabsList className="h-11 [&>*]:w-auto" variant="underline">
+        {visibleTabs.map((t) => (
+          <TabsTrigger className="w-auto text-base" key={t.id} value={t.id} variant="underline">
+            {t.label}
+          </TabsTrigger>
+        ))}
+      </TabsList>
+
+      <TabsContents>
+        <TabsContent value="users">
+          <UsersTab onNavigateToTab={(tab: string) => setActiveTab(tab as SecurityTab)} />
+        </TabsContent>
+        <TabsContent value="roles">
+          <RolesTab />
+        </TabsContent>
+        <TabsContent value="permissions">
+          <PermissionsTab />
+        </TabsContent>
+      </TabsContents>
+    </Tabs>
+  );
+}
diff --git a/frontend/src/components/pages/security/user-detail-page.tsx b/frontend/src/components/pages/security/user-detail-page.tsx
new file mode 100644
index 0000000000..7cd0257fcc
--- /dev/null
+++ b/frontend/src/components/pages/security/user-detail-page.tsx
@@ -0,0 +1,548 @@
+/**
+ * Copyright 2026 Redpanda Data, Inc.
+ *
+ * Use of this software is governed by the Business Source License
+ * included in the file https://github.com/redpanda-data/redpanda/blob/dev/licenses/bsl.md
+ *
+ * As of the Change Date specified in that file, in accordance with
+ * the Business Source License, use of this software will be governed
+ * by the Apache License, Version 2.0
+ */
+
+import { create } from '@bufbuild/protobuf';
+import { Link, useNavigate } from '@tanstack/react-router';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from 'components/redpanda-ui/components/alert-dialog';
+import { Badge } from 'components/redpanda-ui/components/badge';
+import { Button } from 'components/redpanda-ui/components/button';
+import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from 'components/redpanda-ui/components/empty';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from 'components/redpanda-ui/components/select';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from 'components/redpanda-ui/components/tooltip';
+import { Text } from 'components/redpanda-ui/components/typography';
+import { ArrowLeft, Check, ChevronRight, Copy, Key, Shield, Trash2 } from 'lucide-react';
+import {
+  ACL_Operation,
+  ACL_PermissionType,
+  ACL_ResourcePatternType,
+  ACL_ResourceType,
+  CreateACLRequestSchema,
+  DeleteACLsRequestSchema,
+} from 'protogen/redpanda/api/dataplane/v1/acl_pb';
+import {
+  RoleMembershipSchema,
+  UpdateRoleMembershipRequestSchema,
+} from 'protogen/redpanda/api/dataplane/v1/security_pb';
+import { SASLMechanism } from 'protogen/redpanda/api/dataplane/v1/user_pb';
+import { useEffect, useMemo, useState } from 'react';
+import {
+  useDeleteAclMutation,
+  useGetAclsByPrincipal,
+  useLegacyCreateACLMutation,
+  useListACLsQuery,
+} from 'react-query/api/acl';
+import { useListRolesQuery, useUpdateRoleMembershipMutation } from 'react-query/api/security';
+import { useDeleteUserMutation, useLegacyListUsersQuery } from 'react-query/api/user';
+import { toast } from 'sonner';
+import { Features } from 'state/supported-features';
+import { uiState } from 'state/ui-state';
+
+import { ACLDialog, type ACLEntry, ACLRemoveDialog, ACLTableSection } from './acl-editor';
+import { ChangePasswordDialog } from './change-password-dialog';
+import { buildResourceOptionsByType, compareDisplayText, flattenAclDetails, sortByName } from './security-acl-utils';
+
+function getMechanismLabel(mechanism?: SASLMechanism): string {
+  switch (mechanism) {
+    case SASLMechanism.SASL_MECHANISM_SCRAM_SHA_256:
+      return 'SCRAM-SHA-256';
+    case SASLMechanism.SASL_MECHANISM_SCRAM_SHA_512:
+      return 'SCRAM-SHA-512';
+    default:
+      return 'SCRAM';
+  }
+}
+
+function PrincipalCopyField({ value }: { value: string }) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = () => {
+    navigator.clipboard.writeText(value);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  return (
+    <button
+      className="group inline-flex min-w-0 max-w-full items-center gap-1.5 rounded-md border bg-muted/50 px-2 py-1 text-xs transition-colors hover:bg-muted"
+      onClick={handleCopy}
+      title={copied ? 'Copied!' : `Copy: ${value}`}
+      type="button"
+    >
+      <span className="truncate font-mono text-muted-foreground">{value}</span>
+      {copied ? (
+        <Check className="size-3 shrink-0 text-emerald-600" />
+      ) : (
+        <Copy className="size-3 shrink-0 text-muted-foreground/50 transition-colors group-hover:text-muted-foreground" />
+      )}
+    </button>
+  );
+}
+
+interface UserDetailPageProps {
+  userName: string;
+}
+
+export function UserDetailPage({ userName }: UserDetailPageProps) {
+  const navigate = useNavigate();
+  const [passwordDialogOpen, setPasswordDialogOpen] = useState(false);
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+
+  // ACL dialog state
+  const [aclDialogOpen, setAclDialogOpen] = useState(false);
+  const [aclRemoveIndex, setAclRemoveIndex] = useState<number | null>(null);
+
+  // Fetch user data
+  const { data: usersData } = useLegacyListUsersQuery();
+  const user = useMemo(() => usersData?.users?.find((u) => u.name === userName), [usersData, userName]);
+
+  // Fetch roles
+  const { data: rolesData } = useListRolesQuery(undefined, { enabled: Boolean(Features.rolesApi) });
+  const allRoles = useMemo(() => sortByName(rolesData?.roles ?? []), [rolesData]);
+  const { data: assignedRolesData } = useListRolesQuery(
+    {
+      filter: {
+        principal: `User:${userName}`,
+      },
+    },
+    { enabled: Boolean(Features.rolesApi) }
+  );
+
+  // Fetch ACLs for this user
+  const { data: aclsData } = useGetAclsByPrincipal(`User:${userName}`);
+  const { data: allAclsData } = useListACLsQuery();
+
+  // Mutations
+  const { mutateAsync: updateMembership } = useUpdateRoleMembershipMutation();
+  const { mutateAsync: createACLMutation } = useLegacyCreateACLMutation();
+  const { mutateAsync: deleteACLMutation } = useDeleteAclMutation();
+  const { mutateAsync: deleteUserMutation, isPending: isDeletingUser } = useDeleteUserMutation();
+
+  const acls: ACLEntry[] = useMemo(() => flattenAclDetails(aclsData), [aclsData]);
+  const resourceOptionsByType = useMemo(
+    () => buildResourceOptionsByType(allAclsData?.aclResources ?? []),
+    [allAclsData]
+  );
+  const userRoles = useMemo(
+    () => [...(assignedRolesData?.roles?.map((role) => role.name) ?? [])].sort(compareDisplayText),
+    [assignedRolesData]
+  );
+
+  const mechanismLabel = getMechanismLabel(user?.mechanism);
+
+  useEffect(() => {
+    uiState.pageTitle = userName;
+    uiState.pageBreadcrumbs = [
+      { title: 'Security', linkTo: '/security' },
+      { title: 'Users', linkTo: '/security/users' },
+      {
+        title: userName,
+        linkTo: `/security/users/${encodeURIComponent(userName)}`,
+        options: { canBeTruncated: true, canBeCopied: true },
+      },
+    ];
+  }, [userName]);
+
+  const availableToAssign = useMemo(() => allRoles.filter((r) => !userRoles.includes(r.name)), [allRoles, userRoles]);
+
+  const handleAssignRole = async (roleName: string) => {
+    try {
+      await updateMembership(
+        create(UpdateRoleMembershipRequestSchema, {
+          roleName,
+          create: false,
+          add: [create(RoleMembershipSchema, { principal: `User:${userName}` })],
+          remove: [],
+        })
+      );
+      toast.success(`Assigned role "${roleName}"`);
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'Failed to assign role';
+      toast.error(message);
+    }
+  };
+
+  const handleRemoveRole = async (roleName: string) => {
+    try {
+      await updateMembership(
+        create(UpdateRoleMembershipRequestSchema, {
+          roleName,
+          create: false,
+          add: [],
+          remove: [create(RoleMembershipSchema, { principal: `User:${userName}` })],
+        })
+      );
+      toast.success(`Removed role "${roleName}"`);
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'Failed to remove role';
+      toast.error(message);
+    }
+  };
+
+  const handleSaveAcl = async (entry: ACLEntry) => {
+    const resourceTypeMap: Record<string, ACL_ResourceType> = {
+      Topic: ACL_ResourceType.TOPIC,
+      Group: ACL_ResourceType.GROUP,
+      Cluster: ACL_ResourceType.CLUSTER,
+      TransactionalId: ACL_ResourceType.TRANSACTIONAL_ID,
+    };
+    const operationMap: Record<string, ACL_Operation> = {
+      All: ACL_Operation.ALL,
+      Read: ACL_Operation.READ,
+      Write: ACL_Operation.WRITE,
+      Create: ACL_Operation.CREATE,
+      Delete: ACL_Operation.DELETE,
+      Alter: ACL_Operation.ALTER,
+      Describe: ACL_Operation.DESCRIBE,
+      ClusterAction: ACL_Operation.CLUSTER_ACTION,
+      DescribeConfigs: ACL_Operation.DESCRIBE_CONFIGS,
+      AlterConfigs: ACL_Operation.ALTER_CONFIGS,
+      IdempotentWrite: ACL_Operation.IDEMPOTENT_WRITE,
+    };
+    const permissionMap: Record<string, ACL_PermissionType> = {
+      Allow: ACL_PermissionType.ALLOW,
+      Deny: ACL_PermissionType.DENY,
+    };
+
+    try {
+      await createACLMutation(
+        create(CreateACLRequestSchema, {
+          resourceType: resourceTypeMap[entry.resourceType] ?? ACL_ResourceType.TOPIC,
+          resourceName: entry.resourceName,
+          resourcePatternType: entry.resourcePatternType ?? ACL_ResourcePatternType.LITERAL,
+          principal: `User:${userName}`,
+          host: entry.host,
+          operation: operationMap[entry.operation] ?? ACL_Operation.ALL,
+          permissionType: permissionMap[entry.permission] ?? ACL_PermissionType.ALLOW,
+        })
+      );
+      toast.success('ACL created');
+      setAclDialogOpen(false);
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'Failed to create ACL';
+      toast.error(message);
+    }
+  };
+
+  const handleRemoveAcl = async (idx: number) => {
+    const acl = acls[idx];
+    if (!acl) {
+      return;
+    }
+    // The actual deletion would use deleteACL mutation
+    // For now, trigger the confirm dialog
+    setAclRemoveIndex(idx);
+  };
+
+  const confirmRemoveAcl = async () => {
+    if (aclRemoveIndex === null) {
+      return;
+    }
+    const acl = acls[aclRemoveIndex];
+    if (!acl) {
+      return;
+    }
+
+    const resourceTypeMap: Record<string, ACL_ResourceType> = {
+      Topic: ACL_ResourceType.TOPIC,
+      Group: ACL_ResourceType.GROUP,
+      Cluster: ACL_ResourceType.CLUSTER,
+      TransactionalId: ACL_ResourceType.TRANSACTIONAL_ID,
+    };
+    const operationMap: Record<string, ACL_Operation> = {
+      All: ACL_Operation.ALL,
+      Read: ACL_Operation.READ,
+      Write: ACL_Operation.WRITE,
+      Create: ACL_Operation.CREATE,
+      Delete: ACL_Operation.DELETE,
+      Alter: ACL_Operation.ALTER,
+      Describe: ACL_Operation.DESCRIBE,
+      ClusterAction: ACL_Operation.CLUSTER_ACTION,
+      DescribeConfigs: ACL_Operation.DESCRIBE_CONFIGS,
+      AlterConfigs: ACL_Operation.ALTER_CONFIGS,
+      IdempotentWrite: ACL_Operation.IDEMPOTENT_WRITE,
+    };
+    const permissionMap: Record<string, ACL_PermissionType> = {
+      Allow: ACL_PermissionType.ALLOW,
+      Deny: ACL_PermissionType.DENY,
+    };
+
+    try {
+      await deleteACLMutation(
+        create(DeleteACLsRequestSchema, {
+          filter: {
+            principal: `User:${userName}`,
+            resourceType: resourceTypeMap[acl.resourceType] ?? ACL_ResourceType.TOPIC,
+            resourceName: acl.resourceName,
+            host: acl.host,
+            operation: operationMap[acl.operation] ?? ACL_Operation.ALL,
+            permissionType: permissionMap[acl.permission] ?? ACL_PermissionType.ALLOW,
+            resourcePatternType: acl.resourcePatternType ?? ACL_ResourcePatternType.LITERAL,
+          },
+        })
+      );
+      toast.success('ACL removed');
+      setAclRemoveIndex(null);
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'Failed to remove ACL';
+      toast.error(message);
+    }
+  };
+
+  const handleDeleteUser = async () => {
+    try {
+      await deleteUserMutation({ name: userName });
+      toast.success(`User "${userName}" deleted`);
+      navigate({ to: '/security/$tab', params: { tab: 'users' } });
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'Failed to delete user';
+      toast.error(message);
+    }
+  };
+
+  if (!user) {
+    return (
+      <div className="flex flex-col items-center justify-center gap-4 py-12">
+        <Text variant="muted">User not found.</Text>
+        <Button asChild variant="outline">
+          <Link params={{ tab: 'users' }} to="/security/$tab">
+            Back to Security
+          </Link>
+        </Button>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <div className="flex flex-col gap-8 pt-2">
+        {/* Page Header */}
+        <div>
+          <Button asChild className="mb-4 -ml-3 text-muted-foreground" variant="ghost">
+            <Link params={{ tab: 'users' }} to="/security/$tab">
+              <ArrowLeft className="size-4" />
+              Users
+            </Link>
+          </Button>
+          <div className="flex items-center gap-4">
+            <h1 className="min-w-0 flex-1 truncate font-semibold text-2xl tracking-tight" title={userName}>
+              {userName}
+            </h1>
+            <div className="flex shrink-0 items-center gap-2">
+              <Button onClick={() => setPasswordDialogOpen(true)} variant="outline">
+                <Key className="size-4" />
+                Change Password
+              </Button>
+              {Boolean(Features.deleteUser) && (
+                <Button
+                  className="text-destructive hover:text-destructive"
+                  onClick={() => setDeleteDialogOpen(true)}
+                  variant="outline"
+                >
+                  <Trash2 className="size-4" />
+                  Delete User
+                </Button>
+              )}
+            </div>
+          </div>
+          <div className="mt-3 flex flex-wrap items-center gap-x-4 gap-y-2">
+            <div className="flex items-center gap-2">
+              <span className="text-muted-foreground text-sm">Principal</span>
+              <PrincipalCopyField value={`User:${userName}`} />
+            </div>
+            <div className="flex items-center gap-2">
+              <span className="text-muted-foreground text-sm">Mechanism</span>
+              <Badge className="font-mono font-normal text-sm" variant="outline">
+                {mechanismLabel}
+              </Badge>
+            </div>
+          </div>
+        </div>
+
+        {/* Roles Section */}
+        {Boolean(Features.rolesApi) && (
+          <div>
+            <div className="mb-4 flex items-center justify-between">
+              <div className="flex items-center gap-2">
+                <Shield className="size-4 text-muted-foreground" />
+                <Text as="span" className="font-semibold text-base">
+                  Roles
+                </Text>
+                <Text as="span" variant="muted">
+                  {userRoles.length} assigned
+                </Text>
+              </div>
+              {userRoles.length > 0 &&
+                (availableToAssign.length > 0 ? (
+                  <Select onValueChange={handleAssignRole} value="">
+                    <SelectTrigger className="w-[200px]">
+                      <SelectValue placeholder="Assign a role..." />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {availableToAssign.map((role) => (
+                        <SelectItem key={role.name} value={role.name}>
+                          {role.name}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                ) : (
+                  <TooltipProvider>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <div>
+                          <Select disabled value="">
+                            <SelectTrigger className="w-[200px]">
+                              <SelectValue placeholder="Assign a role..." />
+                            </SelectTrigger>
+                          </Select>
+                        </div>
+                      </TooltipTrigger>
+                      <TooltipContent>
+                        {allRoles.length === 0
+                          ? 'No roles available. Create a role first.'
+                          : 'All roles are already assigned to this user.'}
+                      </TooltipContent>
+                    </Tooltip>
+                  </TooltipProvider>
+                ))}
+            </div>
+
+            {userRoles.length === 0 ? (
+              <div className="overflow-hidden rounded-lg border">
+                <Empty className="py-8">
+                  <EmptyMedia variant="icon">
+                    <Shield className="size-6" />
+                  </EmptyMedia>
+                  <EmptyHeader>
+                    <EmptyTitle>No roles assigned</EmptyTitle>
+                    <EmptyDescription>Assign roles to grant this user predefined sets of permissions.</EmptyDescription>
+                  </EmptyHeader>
+                  {availableToAssign.length > 0 && (
+                    <Select onValueChange={handleAssignRole} value="">
+                      <SelectTrigger className="w-[200px]">
+                        <SelectValue placeholder="Assign a role..." />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {availableToAssign.map((role) => (
+                          <SelectItem key={role.name} value={role.name}>
+                            {role.name}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  )}
+                </Empty>
+              </div>
+            ) : (
+              <div className="rounded-lg border">
+                {userRoles.map((role, idx) => (
+                  <div
+                    className={`flex items-center justify-between px-4 py-3 ${idx < userRoles.length - 1 ? 'border-b' : ''}`}
+                    key={role}
+                  >
+                    <div className="flex items-center gap-3">
+                      <Shield className="size-4 text-muted-foreground" />
+                      <Link
+                        className="font-medium text-base hover:underline"
+                        params={{ roleName: encodeURIComponent(role) }}
+                        to="/security/roles/$roleName"
+                      >
+                        {role}
+                      </Link>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <Button
+                        className="size-8 text-muted-foreground hover:text-destructive"
+                        onClick={() => handleRemoveRole(role)}
+                        size="icon"
+                        variant="ghost"
+                      >
+                        <Trash2 className="size-4" />
+                        <span className="sr-only">Remove {role}</span>
+                      </Button>
+                      <Link params={{ roleName: encodeURIComponent(role) }} to="/security/roles/$roleName">
+                        <ChevronRight className="size-4 text-muted-foreground" />
+                      </Link>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* ACLs Section */}
+        <ACLTableSection acls={acls} context="user" onAdd={() => setAclDialogOpen(true)} onRemove={handleRemoveAcl} />
+      </div>
+
+      {/* ACL Create Dialog */}
+      <ACLDialog
+        context="user"
+        onClose={() => setAclDialogOpen(false)}
+        onSave={handleSaveAcl}
+        open={aclDialogOpen}
+        resourceOptionsByType={resourceOptionsByType}
+      />
+
+      {/* ACL Remove Confirmation */}
+      <ACLRemoveDialog
+        acl={aclRemoveIndex !== null ? (acls[aclRemoveIndex] ?? null) : null}
+        context="user"
+        onClose={() => setAclRemoveIndex(null)}
+        onConfirm={confirmRemoveAcl}
+        open={aclRemoveIndex !== null}
+      />
+
+      {/* Change Password Dialog */}
+      <ChangePasswordDialog
+        currentMechanism={mechanismLabel}
+        onClose={() => setPasswordDialogOpen(false)}
+        open={passwordDialogOpen}
+        userName={userName}
+      />
+
+      {/* Delete User Confirmation */}
+      <AlertDialog onOpenChange={setDeleteDialogOpen} open={deleteDialogOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Delete user "{userName}"?</AlertDialogTitle>
+            <AlertDialogDescription>
+              This will permanently delete the user and revoke their credentials. This action cannot be undone.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel asChild>
+              <Button variant="outline">Cancel</Button>
+            </AlertDialogCancel>
+            <AlertDialogAction asChild disabled={isDeletingUser} onClick={handleDeleteUser}>
+              <Button variant="destructive">{isDeletingUser ? 'Deleting...' : 'Delete User'}</Button>
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  );
+}
diff --git a/frontend/src/components/pages/security/users-tab.tsx b/frontend/src/components/pages/security/users-tab.tsx
new file mode 100644
index 0000000000..6202127715
--- /dev/null
+++ b/frontend/src/components/pages/security/users-tab.tsx
@@ -0,0 +1,444 @@
+/**
+ * Copyright 2026 Redpanda Data, Inc.
+ *
+ * Use of this software is governed by the Business Source License
+ * included in the file https://github.com/redpanda-data/redpanda/blob/dev/licenses/bsl.md
+ *
+ * As of the Change Date specified in that file, in accordance with
+ * the Business Source License, use of this software will be governed
+ * by the Apache License, Version 2.0
+ */
+
+import { useNavigate } from '@tanstack/react-router';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from 'components/redpanda-ui/components/alert-dialog';
+import { Badge } from 'components/redpanda-ui/components/badge';
+import { Button } from 'components/redpanda-ui/components/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from 'components/redpanda-ui/components/dropdown-menu';
+import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from 'components/redpanda-ui/components/empty';
+import { HoverCard, HoverCardContent, HoverCardTrigger } from 'components/redpanda-ui/components/hover-card';
+import { Input } from 'components/redpanda-ui/components/input';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from 'components/redpanda-ui/components/table';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from 'components/redpanda-ui/components/tooltip';
+import { Text } from 'components/redpanda-ui/components/typography';
+import { Key, MoreHorizontal, Plus, Search, Trash2, UserCog, Users } from 'lucide-react';
+import { SASLMechanism } from 'protogen/redpanda/api/dataplane/v1/user_pb';
+import { useMemo, useState } from 'react';
+import { useListACLsQuery } from 'react-query/api/acl';
+import { useDeleteUserMutation, useLegacyListUsersQuery } from 'react-query/api/user';
+import { toast } from 'sonner';
+import { Features } from 'state/supported-features';
+
+import { ChangePasswordDialog } from './change-password-dialog';
+import { CreateUserDialog } from './create-user-dialog';
+import { sortAclEntries, sortByName } from './security-acl-utils';
+
+const ACL_HOVER_LIMIT = 8;
+
+function getMechanismLabel(mechanism?: SASLMechanism): string | null {
+  switch (mechanism) {
+    case SASLMechanism.SASL_MECHANISM_SCRAM_SHA_256:
+      return 'SCRAM-SHA-256';
+    case SASLMechanism.SASL_MECHANISM_SCRAM_SHA_512:
+      return 'SCRAM-SHA-512';
+    default:
+      return null;
+  }
+}
+
+interface UserAcl {
+  resourceType: string;
+  resourceName: string;
+  operation: string;
+  permission: string;
+}
+
+interface UsersTabProps {
+  onNavigateToTab: (tab: string) => void;
+}
+
+export function UsersTab({ onNavigateToTab }: UsersTabProps) {
+  const navigate = useNavigate();
+  const [searchQuery, setSearchQuery] = useState('');
+  const [createDialogOpen, setCreateDialogOpen] = useState(false);
+  const [passwordDialogUser, setPasswordDialogUser] = useState<{
+    name: string;
+    mechanism: string | null;
+  } | null>(null);
+  const [deleteUserName, setDeleteUserName] = useState<string | null>(null);
+  const { mutateAsync: deleteUserMutation, isPending: isDeletingUser } = useDeleteUserMutation();
+
+  // Fetch data
+  const { data: usersData } = useLegacyListUsersQuery();
+  const { data: aclsData } = useListACLsQuery();
+
+  const users = useMemo(() => sortByName(usersData?.users ?? []), [usersData]);
+
+  // Build a map of user -> ACLs from the ACL list
+  const userAclsMap = useMemo(() => {
+    const map = new Map<string, UserAcl[]>();
+    const resources = aclsData?.aclResources ?? [];
+    for (const resource of resources) {
+      for (const acl of resource.acls) {
+        const principal = acl.principal || '';
+        // ACL principals are in format "User:name"
+        if (principal.startsWith('User:')) {
+          const userName = principal.substring(5);
+          if (!map.has(userName)) {
+            map.set(userName, []);
+          }
+          map.get(userName)?.push({
+            resourceType: getResourceTypeLabel(resource.resourceType),
+            resourceName: resource.resourceName,
+            operation: getOperationLabel(acl.operation),
+            permission: getPermissionLabel(acl.permissionType),
+          });
+        }
+      }
+    }
+    for (const [userName, acls] of map.entries()) {
+      map.set(userName, sortAclEntries(acls));
+    }
+    return map;
+  }, [aclsData]);
+
+  // Filter users
+  const filteredUsers = useMemo(() => {
+    if (!searchQuery) {
+      return users;
+    }
+    const q = searchQuery.toLowerCase();
+    return users.filter((user) => user.name.toLowerCase().includes(q));
+  }, [users, searchQuery]);
+
+  const handleDeleteUser = async () => {
+    if (!deleteUserName) {
+      return;
+    }
+    try {
+      await deleteUserMutation({ name: deleteUserName });
+      toast.success(`User "${deleteUserName}" deleted`);
+      setDeleteUserName(null);
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'Failed to delete user';
+      toast.error(message);
+    }
+  };
+
+  const navigateToUser = (userName: string) => {
+    navigate({ to: '/security/users/$userName', params: { userName: encodeURIComponent(userName) } });
+  };
+
+  return (
+    <div aria-labelledby="users-tab" id="users-panel" role="tabpanel">
+      <Text className="max-w-3xl pb-2 text-base leading-6" variant="muted">
+        These users are SASL-SCRAM users managed by your cluster. View the full permissions picture for all identities
+        (including OIDC and mTLS) on the Permissions tab.
+      </Text>
+
+      {/* Toolbar */}
+      <div className="mb-4 flex items-center justify-between gap-4">
+        <div className="relative w-full max-w-sm">
+          <Search className="absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground" />
+          <Input
+            aria-label="Search users"
+            className="pl-9"
+            onChange={(e) => setSearchQuery(e.target.value)}
+            placeholder="Search by name..."
+            type="text"
+            value={searchQuery}
+          />
+        </div>
+        {Boolean(Features.createUser) && (
+          <Button onClick={() => setCreateDialogOpen(true)}>
+            <Plus className="size-4" />
+            Create user
+          </Button>
+        )}
+      </div>
+
+      {/* Users Table */}
+      <div className="rounded-lg border">
+        {filteredUsers.length > 0 ? (
+          <Table className="table-fixed" size="lg">
+            <TableHeader>
+              <TableRow className="hover:bg-transparent">
+                <TableHead className="w-auto">User</TableHead>
+                <TableHead className="w-[140px]">Mechanism</TableHead>
+                <TableHead className="w-[100px]">ACLs</TableHead>
+                <TableHead className="w-16">
+                  <span className="sr-only">Actions</span>
+                </TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {filteredUsers.map((user) => {
+                const mechanismLabel = getMechanismLabel(user.mechanism);
+                const userAcls = userAclsMap.get(user.name) ?? [];
+
+                return (
+                  <TableRow className="cursor-pointer" key={user.name} onClick={() => navigateToUser(user.name)}>
+                    <TableCell className="max-w-[280px] py-1.5">
+                      <TooltipProvider>
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <span className="block truncate font-medium">{user.name}</span>
+                          </TooltipTrigger>
+                          <TooltipContent className="max-w-sm" side="top">
+                            <p className="break-all font-mono text-sm">{user.name}</p>
+                          </TooltipContent>
+                        </Tooltip>
+                      </TooltipProvider>
+                    </TableCell>
+                    <TableCell className="py-1.5">
+                      {mechanismLabel ? (
+                        <Badge className="font-mono font-normal text-sm" variant="outline">
+                          {mechanismLabel}
+                        </Badge>
+                      ) : (
+                        <span className="text-muted-foreground text-sm">Unknown</span>
+                      )}
+                    </TableCell>
+                    <TableCell className="py-1.5" onClick={(e) => e.stopPropagation()}>
+                      <ACLSummary
+                        acls={userAcls}
+                        onViewAll={() => onNavigateToTab('permissions')}
+                        principal={user.name}
+                      />
+                    </TableCell>
+                    <TableCell className="py-1.5" onClick={(e) => e.stopPropagation()}>
+                      <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                          <Button className="size-8" size="icon" variant="ghost">
+                            <MoreHorizontal className="size-4" />
+                            <span className="sr-only">Actions for {user.name}</span>
+                          </Button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="end" className="w-48">
+                          <DropdownMenuItem
+                            onClick={() => setPasswordDialogUser({ name: user.name, mechanism: mechanismLabel })}
+                          >
+                            <Key className="size-4" />
+                            Change password
+                          </DropdownMenuItem>
+                          <DropdownMenuItem onClick={() => navigateToUser(user.name)}>
+                            <UserCog className="size-4" />
+                            View details
+                          </DropdownMenuItem>
+                          {Boolean(Features.deleteUser) && (
+                            <>
+                              <DropdownMenuSeparator />
+                              <DropdownMenuItem
+                                className="text-destructive focus:text-destructive"
+                                onClick={() => setDeleteUserName(user.name)}
+                              >
+                                <Trash2 className="size-4" />
+                                Delete user
+                              </DropdownMenuItem>
+                            </>
+                          )}
+                        </DropdownMenuContent>
+                      </DropdownMenu>
+                    </TableCell>
+                  </TableRow>
+                );
+              })}
+            </TableBody>
+          </Table>
+        ) : (
+          <Empty className="py-16">
+            <EmptyMedia variant="icon">
+              <Users className="size-6" />
+            </EmptyMedia>
+            <EmptyHeader>
+              <EmptyTitle>No users found</EmptyTitle>
+              <EmptyDescription>
+                {searchQuery
+                  ? `No users matching "${searchQuery}". Try adjusting your search.`
+                  : 'Get started by creating your first SASL-SCRAM user.'}
+              </EmptyDescription>
+            </EmptyHeader>
+            {!searchQuery && Boolean(Features.createUser) && (
+              <Button onClick={() => setCreateDialogOpen(true)}>
+                <Plus className="size-4" />
+                Create user
+              </Button>
+            )}
+          </Empty>
+        )}
+      </div>
+
+      {filteredUsers.length > 0 && (
+        <div className="mt-4 text-muted-foreground text-sm">
+          {filteredUsers.length} {filteredUsers.length === 1 ? 'user' : 'users'}
+        </div>
+      )}
+
+      {/* Create User Dialog */}
+      <CreateUserDialog
+        onClose={() => setCreateDialogOpen(false)}
+        onNavigateToTab={onNavigateToTab}
+        open={createDialogOpen}
+      />
+
+      {/* Change Password Dialog */}
+      {passwordDialogUser !== null && (
+        <ChangePasswordDialog
+          currentMechanism={passwordDialogUser.mechanism}
+          onClose={() => setPasswordDialogUser(null)}
+          open
+          userName={passwordDialogUser.name}
+        />
+      )}
+
+      {/* Delete User Confirmation */}
+      <AlertDialog
+        onOpenChange={(open) => {
+          if (!open) {
+            setDeleteUserName(null);
+          }
+        }}
+        open={Boolean(deleteUserName)}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Delete user "{deleteUserName}"?</AlertDialogTitle>
+            <AlertDialogDescription>
+              This will permanently delete the user and revoke their credentials. This action cannot be undone.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel asChild>
+              <Button variant="outline">Cancel</Button>
+            </AlertDialogCancel>
+            <AlertDialogAction asChild disabled={isDeletingUser} onClick={handleDeleteUser}>
+              <Button variant="destructive">{isDeletingUser ? 'Deleting...' : 'Delete User'}</Button>
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  );
+}
+
+// ─── Helper components ────────────────────────────────────────────────────
+
+function ACLSummary({ acls, principal, onViewAll }: { acls: UserAcl[]; principal: string; onViewAll?: () => void }) {
+  if (acls.length === 0) {
+    return (
+      <Text as="span" variant="muted">
+        No ACLs
+      </Text>
+    );
+  }
+
+  const visibleAcls = acls.slice(0, ACL_HOVER_LIMIT);
+  const remaining = acls.length - ACL_HOVER_LIMIT;
+
+  return (
+    <HoverCard>
+      <HoverCardTrigger asChild>
+        <Badge className="cursor-pointer font-normal text-sm tabular-nums" variant="outline">
+          {acls.length} {acls.length === 1 ? 'ACL' : 'ACLs'}
+        </Badge>
+      </HoverCardTrigger>
+      <HoverCardContent align="start" className="w-[420px] p-0">
+        <div className="border-b px-3 py-2">
+          <p className="text-muted-foreground text-sm">Principal</p>
+          <p className="truncate font-medium font-mono text-base" title={`User:${principal}`}>
+            User:{principal}
+          </p>
+        </div>
+        <table className="w-full text-sm">
+          <thead>
+            <tr className="border-b bg-muted/50 text-left">
+              <th className="w-[200px] px-3 py-1.5 font-medium">Resource</th>
+              <th className="w-[80px] px-3 py-1.5 font-medium">Operation</th>
+              <th className="w-[70px] px-3 py-1.5 font-medium">Permission</th>
+            </tr>
+          </thead>
+          <tbody>
+            {visibleAcls.map((acl, idx) => (
+              <tr className="border-b last:border-0" key={`${acl.resourceType}-${acl.resourceName}-${idx}`}>
+                <td className="max-w-[200px] px-3 py-1.5">
+                  <div className="flex items-center gap-1 overflow-hidden">
+                    <span className="shrink-0 text-muted-foreground">{acl.resourceType}:</span>
+                    <span className="truncate font-medium" title={acl.resourceName}>
+                      {acl.resourceName}
+                    </span>
+                  </div>
+                </td>
+                <td className="px-3 py-1.5">{acl.operation}</td>
+                <td className="px-3 py-1.5">
+                  <span className={acl.permission === 'Allow' ? 'text-emerald-600' : 'text-destructive'}>
+                    {acl.permission}
+                  </span>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+        {remaining > 0 && (
+          <div className="border-t bg-muted/30 px-3 py-2 text-center">
+            <button className="text-muted-foreground text-sm hover:text-foreground" onClick={onViewAll} type="button">
+              Showing {ACL_HOVER_LIMIT} of {acls.length} ACLs. View all in the Permissions tab.
+            </button>
+          </div>
+        )}
+      </HoverCardContent>
+    </HoverCard>
+  );
+}
+
+// ─── ACL data helpers ────────────────────────────────────────────────────
+
+function getResourceTypeLabel(resourceType: number): string {
+  // These map to ACL_ResourceType enum values
+  const labels: Record<number, string> = {
+    1: 'Any',
+    2: 'Topic',
+    3: 'Group',
+    4: 'Cluster',
+    5: 'TransactionalId',
+    6: 'DelegationToken',
+    7: 'RedpandaRole',
+  };
+  return labels[resourceType] ?? 'Unknown';
+}
+
+function getOperationLabel(operation: number): string {
+  const labels: Record<number, string> = {
+    1: 'Any',
+    2: 'All',
+    3: 'Read',
+    4: 'Write',
+    5: 'Create',
+    6: 'Delete',
+    7: 'Alter',
+    8: 'Describe',
+    9: 'ClusterAction',
+    10: 'DescribeConfigs',
+    11: 'AlterConfigs',
+    12: 'IdempotentWrite',
+  };
+  return labels[operation] ?? 'Unknown';
+}
+
+function getPermissionLabel(permissionType: number): string {
+  // ACL_PermissionType: DENY=2, ALLOW=3
+  return permissionType === 2 ? 'Deny' : 'Allow';
+}
diff --git a/frontend/src/components/redpanda-ui/components/copy-button.tsx b/frontend/src/components/redpanda-ui/components/copy-button.tsx
index 0e900743ed..fa7c3c1f7f 100644
--- a/frontend/src/components/redpanda-ui/components/copy-button.tsx
+++ b/frontend/src/components/redpanda-ui/components/copy-button.tsx
@@ -8,7 +8,7 @@ import React from 'react';
 import { cn } from '../lib/utils';
 
 const buttonVariants = cva(
-  "inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md font-medium text-sm outline-none transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  "inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md font-medium text-sm outline-none transition-all focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
   {
     variants: {
       variant: {
@@ -16,7 +16,7 @@ const buttonVariants = cva(
         destructive:
           'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40',
         outline:
-          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50',
+          '!border-outline-primary border text-primary-inverse shadow-xs hover:border-outline-primary-hover hover:bg-primary-alpha-subtle active:border-outline-primary-pressed active:bg-primary-alpha-subtle-default disabled:border-outline-inverse-disabled disabled:text-disabled',
         secondary: 'bg-primary text-inverse shadow-xs hover:bg-primary/90',
         ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
       },
@@ -103,8 +103,6 @@ function CopyButton({
       data-slot="copy-button"
       data-testid={testId}
       onClick={handleCopy}
-      whileHover={{ scale: 1.05 }}
-      whileTap={{ scale: 0.95 }}
       {...props}
     >
       <AnimatePresence mode="wait">
diff --git a/frontend/src/components/redpanda-ui/components/input.tsx b/frontend/src/components/redpanda-ui/components/input.tsx
index b993cd4b41..59fbdeb64b 100644
--- a/frontend/src/components/redpanda-ui/components/input.tsx
+++ b/frontend/src/components/redpanda-ui/components/input.tsx
@@ -47,7 +47,7 @@ const inputContainerVariants = cva('', {
   variants: {
     layout: {
       standard: 'relative flex items-center',
-      password: 'relative flex flex-1',
+      password: 'relative flex w-full flex-1',
       number: 'flex items-center gap-2',
     },
   },
@@ -130,6 +130,10 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
 
     const { increment, decrement, handleInputChange } = useNumberInputHandlers(value, setValue, step, props.onChange);
 
+    // Map input size to a button icon size that fits comfortably inside the input
+    // sm (h-8/32px) → icon-xs (24px), md (h-9/36px) → icon-sm (32px), lg (h-10/40px) → icon-sm (32px)
+    const passwordToggleSize = size === 'sm' ? 'icon-xs' as const : 'icon-sm' as const;
+
     let positionClasses = 'rounded-md';
     if (attached && groupPosition === 'first') {
       positionClasses = 'rounded-r-none rounded-l-md border-r-0';
@@ -194,6 +198,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
               <Button
                 disabled={props.disabled || readOnly}
                 onClick={() => setShowPassword(!showPassword)}
+                size={passwordToggleSize}
                 type="button"
                 variant="ghost"
               >
@@ -229,7 +234,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
   }
 );
 
-const inputEndClassNames = 'absolute top-1/2 -translate-y-1/2 z-10 pointer-events-none right-2';
+const inputEndClassNames = 'absolute inset-y-0 right-2 z-10 flex items-center pointer-events-none';
 
 const InputContext = createContext<{
   setStartWidth: (width: number) => void;
@@ -265,7 +270,7 @@ const InputStart = ({ children, className, ...props }: { children: React.ReactNo
 
   return (
     <span
-      className={cn('pointer-events-none absolute top-1/2 left-2 z-10 -translate-y-1/2', className)}
+      className={cn('pointer-events-none absolute inset-y-0 left-2 z-10 flex items-center', className)}
       ref={startRef}
       {...props}
     >
diff --git a/frontend/src/react-query/api/acl.tsx b/frontend/src/react-query/api/acl.tsx
index b1eff08ad0..268251066a 100644
--- a/frontend/src/react-query/api/acl.tsx
+++ b/frontend/src/react-query/api/acl.tsx
@@ -168,7 +168,7 @@ export const useLegacyListACLsQuery = (
   });
 
   const allRetrievedACLs =
-    legacyListACLsResult.data?.aclResources.map((aclResource) =>
+    legacyListACLsResult.data?.aclResources?.map((aclResource) =>
       create(ListACLsResponse_ResourceSchema, {
         resourceType: getACLResourceTypeLegacy(aclResource.resourceType),
         resourceName: aclResource.resourceName,
@@ -329,6 +329,7 @@ export const useLegacyCreateACLMutation = () => {
   const queryClient = useQueryClient();
 
   return useTanstackMutation({
+    retry: false,
     mutationFn: async (request: CreateACLRequest) => {
       const legacyRequestBody = {
         resourceType: getACLResourceType(request.resourceType),
@@ -362,6 +363,13 @@ export const useLegacyCreateACLMutation = () => {
         }),
         exact: false,
       });
+      await queryClient.invalidateQueries({
+        queryKey: createConnectQueryKey({
+          schema: ACLService.method.listACLs,
+          cardinality: 'finite',
+        }),
+        exact: false,
+      });
 
       return data;
     },
@@ -373,6 +381,13 @@ export const useLegacyCreateACLMutation = () => {
         }),
         exact: false,
       });
+      await queryClient.invalidateQueries({
+        queryKey: createConnectQueryKey({
+          schema: ACLService.method.listACLs,
+          cardinality: 'finite',
+        }),
+        exact: false,
+      });
     },
     onError: (error) => {
       const connectError = ConnectError.from(error);
@@ -392,12 +407,21 @@ export const useCreateACLMutation = () => {
   const queryClient = useQueryClient();
 
   return useMutation(createACL, {
+    retry: false,
     onSuccess: async () => {
       await queryClient.invalidateQueries({
         queryKey: createConnectQueryKey({
           schema: ACLService.method.listACLs,
           cardinality: 'infinite',
         }),
+        exact: false,
+      });
+      await queryClient.invalidateQueries({
+        queryKey: createConnectQueryKey({
+          schema: ACLService.method.listACLs,
+          cardinality: 'finite',
+        }),
+        exact: false,
       });
     },
     onError: (error) =>
@@ -457,6 +481,14 @@ const useInvalidateAclsList = () => {
         schema: ACLService.method.listACLs,
         cardinality: 'finite',
       }),
+      exact: false,
+    });
+    await queryClient.invalidateQueries({
+      queryKey: createConnectQueryKey({
+        schema: ACLService.method.listACLs,
+        cardinality: 'infinite',
+      }),
+      exact: false,
     });
   };
 
@@ -470,6 +502,7 @@ export const useDeleteAclMutation = (
 ) => {
   const { invalid } = useInvalidateAclsList();
   return useMutation(deleteACLs, {
+    retry: false,
     onSettled: async (_, error) => {
       if (!error) {
         await invalid();
diff --git a/frontend/src/react-query/api/security.tsx b/frontend/src/react-query/api/security.tsx
index 2050b754fa..72b58e4bc6 100644
--- a/frontend/src/react-query/api/security.tsx
+++ b/frontend/src/react-query/api/security.tsx
@@ -3,6 +3,7 @@ import type { GenMessage } from '@bufbuild/protobuf/codegenv1';
 import { createConnectQueryKey, useMutation, useQuery } from '@connectrpc/connect-query';
 import type { InfiniteData } from '@tanstack/react-query';
 import { useQueryClient } from '@tanstack/react-query';
+import { ACLService } from 'protogen/redpanda/api/dataplane/v1/acl_pb';
 import {
   type GetRoleRequest,
   GetRoleRequestSchema,
@@ -28,6 +29,53 @@ import { MAX_PAGE_SIZE, type MessageInit, type QueryOptions } from 'react-query/
 import { useInfiniteQueryWithAllPages } from 'react-query/use-infinite-query-with-all-pages';
 import { formatToastErrorMessageGRPC } from 'utils/toast.utils';
 
+const invalidateRolesQueries = async (queryClient: ReturnType<typeof useQueryClient>) => {
+  await queryClient.invalidateQueries({
+    queryKey: createConnectQueryKey({
+      schema: SecurityService.method.listRoles,
+      cardinality: 'infinite',
+    }),
+    exact: false,
+  });
+};
+
+const invalidateRoleMembersQueries = async (queryClient: ReturnType<typeof useQueryClient>) => {
+  await queryClient.invalidateQueries({
+    queryKey: createConnectQueryKey({
+      schema: SecurityService.method.listRoleMembers,
+      cardinality: 'infinite',
+    }),
+    exact: false,
+  });
+};
+
+const invalidateRoleDetailQueries = async (queryClient: ReturnType<typeof useQueryClient>) => {
+  await queryClient.invalidateQueries({
+    queryKey: createConnectQueryKey({
+      schema: SecurityService.method.getRole,
+      cardinality: 'finite',
+    }),
+    exact: false,
+  });
+};
+
+const invalidateAclQueries = async (queryClient: ReturnType<typeof useQueryClient>) => {
+  await queryClient.invalidateQueries({
+    queryKey: createConnectQueryKey({
+      schema: ACLService.method.listACLs,
+      cardinality: 'finite',
+    }),
+    exact: false,
+  });
+  await queryClient.invalidateQueries({
+    queryKey: createConnectQueryKey({
+      schema: ACLService.method.listACLs,
+      cardinality: 'infinite',
+    }),
+    exact: false,
+  });
+};
+
 export const useListRolesQuery = (
   input?: MessageInit<ListRolesRequest>,
   options?: QueryOptions<GenMessage<ListRolesRequest>, ListRolesResponse>
@@ -84,14 +132,9 @@ export const useCreateRoleMutation = () => {
   const queryClient = useQueryClient();
 
   return useMutation(createRole, {
+    retry: false,
     onSuccess: async () => {
-      await queryClient.invalidateQueries({
-        queryKey: createConnectQueryKey({
-          schema: SecurityService.method.listRoles,
-          cardinality: 'infinite',
-        }),
-        exact: false,
-      });
+      await invalidateRolesQueries(queryClient);
     },
     onError: (error) =>
       formatToastErrorMessageGRPC({
@@ -117,14 +160,12 @@ export const useDeleteRoleMutation = () => {
   const queryClient = useQueryClient();
 
   return useMutation(deleteRole, {
+    retry: false,
     onSuccess: async () => {
-      await queryClient.invalidateQueries({
-        queryKey: createConnectQueryKey({
-          schema: SecurityService.method.listRoles,
-          cardinality: 'infinite',
-        }),
-        exact: false,
-      });
+      await invalidateRolesQueries(queryClient);
+      await invalidateRoleMembersQueries(queryClient);
+      await invalidateRoleDetailQueries(queryClient);
+      await invalidateAclQueries(queryClient);
     },
     onError: (error) =>
       formatToastErrorMessageGRPC({
@@ -147,6 +188,7 @@ export const useUpdateRoleMembershipMutation = () => {
   } as const;
 
   return useMutation(updateRoleMembership, {
+    retry: false,
     onMutate: async (variables) => {
       // Cancel in-flight fetches so they don't overwrite the optimistic data
       await queryClient.cancelQueries(listRoleMembersQueryFilter);
@@ -177,17 +219,12 @@ export const useUpdateRoleMembershipMutation = () => {
     },
 
     onSuccess: async () => {
-      // Only invalidate the roles list (to refresh member counts).
+      // Invalidate the roles list (to refresh member counts) and role detail.
       // The listRoleMembers cache already reflects the correct state via the
       // optimistic update in onMutate — invalidating it here would trigger a
       // refetch that may return stale data before the backend catches up.
-      await queryClient.invalidateQueries({
-        queryKey: createConnectQueryKey({
-          schema: SecurityService.method.listRoles,
-          cardinality: 'infinite',
-        }),
-        exact: false,
-      });
+      await invalidateRolesQueries(queryClient);
+      await invalidateRoleDetailQueries(queryClient);
     },
 
     onError: (error, _variables, context) => {
diff --git a/frontend/src/react-query/api/user.tsx b/frontend/src/react-query/api/user.tsx
index 88d3804d3c..38deffbcca 100644
--- a/frontend/src/react-query/api/user.tsx
+++ b/frontend/src/react-query/api/user.tsx
@@ -12,7 +12,12 @@ import {
   SASLMechanism,
   UserService,
 } from 'protogen/redpanda/api/dataplane/v1/user_pb';
-import { createUser, listUsers, updateUser } from 'protogen/redpanda/api/dataplane/v1/user-UserService_connectquery';
+import {
+  createUser,
+  deleteUser,
+  listUsers,
+  updateUser,
+} from 'protogen/redpanda/api/dataplane/v1/user-UserService_connectquery';
 import queryClient from 'query-client';
 import { MAX_PAGE_SIZE, type MessageInit, type QueryOptions } from 'react-query/react-query.utils';
 import { useInfiniteQueryWithAllPages } from 'react-query/use-infinite-query-with-all-pages';
@@ -122,6 +127,7 @@ export const useCreateUserMutation = () => {
   const qc = useQueryClient();
 
   return useMutation(createUser, {
+    retry: false,
     onSuccess: async () => {
       await qc.invalidateQueries({
         queryKey: createConnectQueryKey({
@@ -140,10 +146,34 @@ export const useCreateUserMutation = () => {
   });
 };
 
+export const useDeleteUserMutation = () => {
+  const qc = useQueryClient();
+
+  return useMutation(deleteUser, {
+    retry: false,
+    onSuccess: async () => {
+      await qc.invalidateQueries({
+        queryKey: createConnectQueryKey({
+          schema: UserService.method.listUsers,
+          cardinality: 'infinite',
+        }),
+        exact: false,
+      });
+    },
+    onError: (error) =>
+      formatToastErrorMessageGRPC({
+        error,
+        action: 'delete',
+        entity: 'user',
+      }),
+  });
+};
+
 export const useUpdateUserMutationWithToast = () => {
   const qc = useQueryClient();
 
   return useMutation(updateUser, {
+    retry: false,
     onSuccess: async () => {
       await qc.invalidateQueries({
         queryKey: createConnectQueryKey({
diff --git a/frontend/src/routeTree.gen.ts b/frontend/src/routeTree.gen.ts
index 33654969fe..b30a777bd3 100644
--- a/frontend/src/routeTree.gen.ts
+++ b/frontend/src/routeTree.gen.ts
@@ -55,9 +55,8 @@ import { Route as ConnectClustersClusterNameIndexRouteImport } from './routes/co
 import { Route as AgentsIdIndexRouteImport } from './routes/agents/$id/index';
 import { Route as TopicsTopicNameProduceRecordRouteImport } from './routes/topics/$topicName/produce-record';
 import { Route as ShadowlinksNameEditRouteImport } from './routes/shadowlinks/$name/edit';
-import { Route as SecurityUsersCreateRouteImport } from './routes/security/users/create';
-import { Route as SecurityRolesCreateRouteImport } from './routes/security/roles/create';
-import { Route as SecurityAclsCreateRouteImport } from './routes/security/acls/create';
+import { Route as SecurityUsersUserNameRouteImport } from './routes/security/users/$userName';
+import { Route as SecurityRolesRoleNameRouteImport } from './routes/security/roles/$roleName';
 import { Route as SecretsIdEditRouteImport } from './routes/secrets/$id/edit';
 import { Route as RpConnectSecretsCreateRouteImport } from './routes/rp-connect/secrets/create';
 import { Route as RpConnectPipelineIdEditRouteImport } from './routes/rp-connect/$pipelineId/edit';
@@ -66,12 +65,6 @@ import { Route as DebugBundleProgressJobIdRouteImport } from './routes/debug-bun
 import { Route as ConnectClustersClusterNameCreateConnectorRouteImport } from './routes/connect-clusters/$clusterName/create-connector';
 import { Route as ConnectClustersClusterNameConnectorRouteImport } from './routes/connect-clusters/$clusterName/$connector';
 import { Route as SchemaRegistrySubjectsSubjectNameIndexRouteImport } from './routes/schema-registry/subjects/$subjectName/index';
-import { Route as SecurityUsersUserNameDetailsRouteImport } from './routes/security/users/$userName/details';
-import { Route as SecurityRolesRoleNameUpdateRouteImport } from './routes/security/roles/$roleName/update';
-import { Route as SecurityRolesRoleNameEditRouteImport } from './routes/security/roles/$roleName/edit';
-import { Route as SecurityRolesRoleNameDetailsRouteImport } from './routes/security/roles/$roleName/details';
-import { Route as SecurityAclsAclNameUpdateRouteImport } from './routes/security/acls/$aclName/update';
-import { Route as SecurityAclsAclNameDetailsRouteImport } from './routes/security/acls/$aclName/details';
 import { Route as SchemaRegistrySubjectsSubjectNameEditModeRouteImport } from './routes/schema-registry/subjects/$subjectName/edit-mode';
 import { Route as SchemaRegistrySubjectsSubjectNameEditCompatibilityRouteImport } from './routes/schema-registry/subjects/$subjectName/edit-compatibility';
 import { Route as SchemaRegistrySubjectsSubjectNameAddVersionRouteImport } from './routes/schema-registry/subjects/$subjectName/add-version';
@@ -317,19 +310,14 @@ const ShadowlinksNameEditRoute = ShadowlinksNameEditRouteImport.update({
   path: '/shadowlinks/$name/edit',
   getParentRoute: () => rootRouteImport,
 } as any);
-const SecurityUsersCreateRoute = SecurityUsersCreateRouteImport.update({
-  id: '/security/users/create',
-  path: '/security/users/create',
+const SecurityUsersUserNameRoute = SecurityUsersUserNameRouteImport.update({
+  id: '/security/users/$userName',
+  path: '/security/users/$userName',
   getParentRoute: () => rootRouteImport,
 } as any);
-const SecurityRolesCreateRoute = SecurityRolesCreateRouteImport.update({
-  id: '/security/roles/create',
-  path: '/security/roles/create',
-  getParentRoute: () => rootRouteImport,
-} as any);
-const SecurityAclsCreateRoute = SecurityAclsCreateRouteImport.update({
-  id: '/security/acls/create',
-  path: '/security/acls/create',
+const SecurityRolesRoleNameRoute = SecurityRolesRoleNameRouteImport.update({
+  id: '/security/roles/$roleName',
+  path: '/security/roles/$roleName',
   getParentRoute: () => rootRouteImport,
 } as any);
 const SecretsIdEditRoute = SecretsIdEditRouteImport.update({
@@ -376,42 +364,6 @@ const SchemaRegistrySubjectsSubjectNameIndexRoute =
     path: '/schema-registry/subjects/$subjectName/',
     getParentRoute: () => rootRouteImport,
   } as any);
-const SecurityUsersUserNameDetailsRoute =
-  SecurityUsersUserNameDetailsRouteImport.update({
-    id: '/security/users/$userName/details',
-    path: '/security/users/$userName/details',
-    getParentRoute: () => rootRouteImport,
-  } as any);
-const SecurityRolesRoleNameUpdateRoute =
-  SecurityRolesRoleNameUpdateRouteImport.update({
-    id: '/security/roles/$roleName/update',
-    path: '/security/roles/$roleName/update',
-    getParentRoute: () => rootRouteImport,
-  } as any);
-const SecurityRolesRoleNameEditRoute =
-  SecurityRolesRoleNameEditRouteImport.update({
-    id: '/security/roles/$roleName/edit',
-    path: '/security/roles/$roleName/edit',
-    getParentRoute: () => rootRouteImport,
-  } as any);
-const SecurityRolesRoleNameDetailsRoute =
-  SecurityRolesRoleNameDetailsRouteImport.update({
-    id: '/security/roles/$roleName/details',
-    path: '/security/roles/$roleName/details',
-    getParentRoute: () => rootRouteImport,
-  } as any);
-const SecurityAclsAclNameUpdateRoute =
-  SecurityAclsAclNameUpdateRouteImport.update({
-    id: '/security/acls/$aclName/update',
-    path: '/security/acls/$aclName/update',
-    getParentRoute: () => rootRouteImport,
-  } as any);
-const SecurityAclsAclNameDetailsRoute =
-  SecurityAclsAclNameDetailsRouteImport.update({
-    id: '/security/acls/$aclName/details',
-    path: '/security/acls/$aclName/details',
-    getParentRoute: () => rootRouteImport,
-  } as any);
 const SchemaRegistrySubjectsSubjectNameEditModeRoute =
   SchemaRegistrySubjectsSubjectNameEditModeRouteImport.update({
     id: '/schema-registry/subjects/$subjectName/edit-mode',
@@ -513,9 +465,8 @@ export interface FileRoutesByFullPath {
   '/rp-connect/$pipelineId/edit': typeof RpConnectPipelineIdEditRoute;
   '/rp-connect/secrets/create': typeof RpConnectSecretsCreateRoute;
   '/secrets/$id/edit': typeof SecretsIdEditRoute;
-  '/security/acls/create': typeof SecurityAclsCreateRoute;
-  '/security/roles/create': typeof SecurityRolesCreateRoute;
-  '/security/users/create': typeof SecurityUsersCreateRoute;
+  '/security/roles/$roleName': typeof SecurityRolesRoleNameRoute;
+  '/security/users/$userName': typeof SecurityUsersUserNameRoute;
   '/shadowlinks/$name/edit': typeof ShadowlinksNameEditRoute;
   '/topics/$topicName/produce-record': typeof TopicsTopicNameProduceRecordRoute;
   '/agents/$id/': typeof AgentsIdIndexRoute;
@@ -533,12 +484,6 @@ export interface FileRoutesByFullPath {
   '/schema-registry/subjects/$subjectName/add-version': typeof SchemaRegistrySubjectsSubjectNameAddVersionRoute;
   '/schema-registry/subjects/$subjectName/edit-compatibility': typeof SchemaRegistrySubjectsSubjectNameEditCompatibilityRoute;
   '/schema-registry/subjects/$subjectName/edit-mode': typeof SchemaRegistrySubjectsSubjectNameEditModeRoute;
-  '/security/acls/$aclName/details': typeof SecurityAclsAclNameDetailsRoute;
-  '/security/acls/$aclName/update': typeof SecurityAclsAclNameUpdateRoute;
-  '/security/roles/$roleName/details': typeof SecurityRolesRoleNameDetailsRoute;
-  '/security/roles/$roleName/edit': typeof SecurityRolesRoleNameEditRoute;
-  '/security/roles/$roleName/update': typeof SecurityRolesRoleNameUpdateRoute;
-  '/security/users/$userName/details': typeof SecurityUsersUserNameDetailsRoute;
   '/schema-registry/subjects/$subjectName/': typeof SchemaRegistrySubjectsSubjectNameIndexRoute;
 }
 export interface FileRoutesByTo {
@@ -587,9 +532,8 @@ export interface FileRoutesByTo {
   '/rp-connect/$pipelineId/edit': typeof RpConnectPipelineIdEditRoute;
   '/rp-connect/secrets/create': typeof RpConnectSecretsCreateRoute;
   '/secrets/$id/edit': typeof SecretsIdEditRoute;
-  '/security/acls/create': typeof SecurityAclsCreateRoute;
-  '/security/roles/create': typeof SecurityRolesCreateRoute;
-  '/security/users/create': typeof SecurityUsersCreateRoute;
+  '/security/roles/$roleName': typeof SecurityRolesRoleNameRoute;
+  '/security/users/$userName': typeof SecurityUsersUserNameRoute;
   '/shadowlinks/$name/edit': typeof ShadowlinksNameEditRoute;
   '/topics/$topicName/produce-record': typeof TopicsTopicNameProduceRecordRoute;
   '/agents/$id': typeof AgentsIdIndexRoute;
@@ -607,12 +551,6 @@ export interface FileRoutesByTo {
   '/schema-registry/subjects/$subjectName/add-version': typeof SchemaRegistrySubjectsSubjectNameAddVersionRoute;
   '/schema-registry/subjects/$subjectName/edit-compatibility': typeof SchemaRegistrySubjectsSubjectNameEditCompatibilityRoute;
   '/schema-registry/subjects/$subjectName/edit-mode': typeof SchemaRegistrySubjectsSubjectNameEditModeRoute;
-  '/security/acls/$aclName/details': typeof SecurityAclsAclNameDetailsRoute;
-  '/security/acls/$aclName/update': typeof SecurityAclsAclNameUpdateRoute;
-  '/security/roles/$roleName/details': typeof SecurityRolesRoleNameDetailsRoute;
-  '/security/roles/$roleName/edit': typeof SecurityRolesRoleNameEditRoute;
-  '/security/roles/$roleName/update': typeof SecurityRolesRoleNameUpdateRoute;
-  '/security/users/$userName/details': typeof SecurityUsersUserNameDetailsRoute;
   '/schema-registry/subjects/$subjectName': typeof SchemaRegistrySubjectsSubjectNameIndexRoute;
 }
 export interface FileRoutesById {
@@ -662,9 +600,8 @@ export interface FileRoutesById {
   '/rp-connect/$pipelineId/edit': typeof RpConnectPipelineIdEditRoute;
   '/rp-connect/secrets/create': typeof RpConnectSecretsCreateRoute;
   '/secrets/$id/edit': typeof SecretsIdEditRoute;
-  '/security/acls/create': typeof SecurityAclsCreateRoute;
-  '/security/roles/create': typeof SecurityRolesCreateRoute;
-  '/security/users/create': typeof SecurityUsersCreateRoute;
+  '/security/roles/$roleName': typeof SecurityRolesRoleNameRoute;
+  '/security/users/$userName': typeof SecurityUsersUserNameRoute;
   '/shadowlinks/$name/edit': typeof ShadowlinksNameEditRoute;
   '/topics/$topicName/produce-record': typeof TopicsTopicNameProduceRecordRoute;
   '/agents/$id/': typeof AgentsIdIndexRoute;
@@ -682,12 +619,6 @@ export interface FileRoutesById {
   '/schema-registry/subjects/$subjectName/add-version': typeof SchemaRegistrySubjectsSubjectNameAddVersionRoute;
   '/schema-registry/subjects/$subjectName/edit-compatibility': typeof SchemaRegistrySubjectsSubjectNameEditCompatibilityRoute;
   '/schema-registry/subjects/$subjectName/edit-mode': typeof SchemaRegistrySubjectsSubjectNameEditModeRoute;
-  '/security/acls/$aclName/details': typeof SecurityAclsAclNameDetailsRoute;
-  '/security/acls/$aclName/update': typeof SecurityAclsAclNameUpdateRoute;
-  '/security/roles/$roleName/details': typeof SecurityRolesRoleNameDetailsRoute;
-  '/security/roles/$roleName/edit': typeof SecurityRolesRoleNameEditRoute;
-  '/security/roles/$roleName/update': typeof SecurityRolesRoleNameUpdateRoute;
-  '/security/users/$userName/details': typeof SecurityUsersUserNameDetailsRoute;
   '/schema-registry/subjects/$subjectName/': typeof SchemaRegistrySubjectsSubjectNameIndexRoute;
 }
 export interface FileRouteTypes {
@@ -738,9 +669,8 @@ export interface FileRouteTypes {
     | '/rp-connect/$pipelineId/edit'
     | '/rp-connect/secrets/create'
     | '/secrets/$id/edit'
-    | '/security/acls/create'
-    | '/security/roles/create'
-    | '/security/users/create'
+    | '/security/roles/$roleName'
+    | '/security/users/$userName'
     | '/shadowlinks/$name/edit'
     | '/topics/$topicName/produce-record'
     | '/agents/$id/'
@@ -758,12 +688,6 @@ export interface FileRouteTypes {
     | '/schema-registry/subjects/$subjectName/add-version'
     | '/schema-registry/subjects/$subjectName/edit-compatibility'
     | '/schema-registry/subjects/$subjectName/edit-mode'
-    | '/security/acls/$aclName/details'
-    | '/security/acls/$aclName/update'
-    | '/security/roles/$roleName/details'
-    | '/security/roles/$roleName/edit'
-    | '/security/roles/$roleName/update'
-    | '/security/users/$userName/details'
     | '/schema-registry/subjects/$subjectName/';
   fileRoutesByTo: FileRoutesByTo;
   to:
@@ -812,9 +736,8 @@ export interface FileRouteTypes {
     | '/rp-connect/$pipelineId/edit'
     | '/rp-connect/secrets/create'
     | '/secrets/$id/edit'
-    | '/security/acls/create'
-    | '/security/roles/create'
-    | '/security/users/create'
+    | '/security/roles/$roleName'
+    | '/security/users/$userName'
     | '/shadowlinks/$name/edit'
     | '/topics/$topicName/produce-record'
     | '/agents/$id'
@@ -832,12 +755,6 @@ export interface FileRouteTypes {
     | '/schema-registry/subjects/$subjectName/add-version'
     | '/schema-registry/subjects/$subjectName/edit-compatibility'
     | '/schema-registry/subjects/$subjectName/edit-mode'
-    | '/security/acls/$aclName/details'
-    | '/security/acls/$aclName/update'
-    | '/security/roles/$roleName/details'
-    | '/security/roles/$roleName/edit'
-    | '/security/roles/$roleName/update'
-    | '/security/users/$userName/details'
     | '/schema-registry/subjects/$subjectName';
   id:
     | '__root__'
@@ -886,9 +803,8 @@ export interface FileRouteTypes {
     | '/rp-connect/$pipelineId/edit'
     | '/rp-connect/secrets/create'
     | '/secrets/$id/edit'
-    | '/security/acls/create'
-    | '/security/roles/create'
-    | '/security/users/create'
+    | '/security/roles/$roleName'
+    | '/security/users/$userName'
     | '/shadowlinks/$name/edit'
     | '/topics/$topicName/produce-record'
     | '/agents/$id/'
@@ -906,12 +822,6 @@ export interface FileRouteTypes {
     | '/schema-registry/subjects/$subjectName/add-version'
     | '/schema-registry/subjects/$subjectName/edit-compatibility'
     | '/schema-registry/subjects/$subjectName/edit-mode'
-    | '/security/acls/$aclName/details'
-    | '/security/acls/$aclName/update'
-    | '/security/roles/$roleName/details'
-    | '/security/roles/$roleName/edit'
-    | '/security/roles/$roleName/update'
-    | '/security/users/$userName/details'
     | '/schema-registry/subjects/$subjectName/';
   fileRoutesById: FileRoutesById;
 }
@@ -961,9 +871,8 @@ export interface RootRouteChildren {
   RpConnectPipelineIdEditRoute: typeof RpConnectPipelineIdEditRoute;
   RpConnectSecretsCreateRoute: typeof RpConnectSecretsCreateRoute;
   SecretsIdEditRoute: typeof SecretsIdEditRoute;
-  SecurityAclsCreateRoute: typeof SecurityAclsCreateRoute;
-  SecurityRolesCreateRoute: typeof SecurityRolesCreateRoute;
-  SecurityUsersCreateRoute: typeof SecurityUsersCreateRoute;
+  SecurityRolesRoleNameRoute: typeof SecurityRolesRoleNameRoute;
+  SecurityUsersUserNameRoute: typeof SecurityUsersUserNameRoute;
   ShadowlinksNameEditRoute: typeof ShadowlinksNameEditRoute;
   TopicsTopicNameProduceRecordRoute: typeof TopicsTopicNameProduceRecordRoute;
   AgentsIdIndexRoute: typeof AgentsIdIndexRoute;
@@ -981,12 +890,6 @@ export interface RootRouteChildren {
   SchemaRegistrySubjectsSubjectNameAddVersionRoute: typeof SchemaRegistrySubjectsSubjectNameAddVersionRoute;
   SchemaRegistrySubjectsSubjectNameEditCompatibilityRoute: typeof SchemaRegistrySubjectsSubjectNameEditCompatibilityRoute;
   SchemaRegistrySubjectsSubjectNameEditModeRoute: typeof SchemaRegistrySubjectsSubjectNameEditModeRoute;
-  SecurityAclsAclNameDetailsRoute: typeof SecurityAclsAclNameDetailsRoute;
-  SecurityAclsAclNameUpdateRoute: typeof SecurityAclsAclNameUpdateRoute;
-  SecurityRolesRoleNameDetailsRoute: typeof SecurityRolesRoleNameDetailsRoute;
-  SecurityRolesRoleNameEditRoute: typeof SecurityRolesRoleNameEditRoute;
-  SecurityRolesRoleNameUpdateRoute: typeof SecurityRolesRoleNameUpdateRoute;
-  SecurityUsersUserNameDetailsRoute: typeof SecurityUsersUserNameDetailsRoute;
   SchemaRegistrySubjectsSubjectNameIndexRoute: typeof SchemaRegistrySubjectsSubjectNameIndexRoute;
 }
 
@@ -1314,25 +1217,18 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof ShadowlinksNameEditRouteImport;
       parentRoute: typeof rootRouteImport;
     };
-    '/security/users/create': {
-      id: '/security/users/create';
-      path: '/security/users/create';
-      fullPath: '/security/users/create';
-      preLoaderRoute: typeof SecurityUsersCreateRouteImport;
+    '/security/users/$userName': {
+      id: '/security/users/$userName';
+      path: '/security/users/$userName';
+      fullPath: '/security/users/$userName';
+      preLoaderRoute: typeof SecurityUsersUserNameRouteImport;
       parentRoute: typeof rootRouteImport;
     };
-    '/security/roles/create': {
-      id: '/security/roles/create';
-      path: '/security/roles/create';
-      fullPath: '/security/roles/create';
-      preLoaderRoute: typeof SecurityRolesCreateRouteImport;
-      parentRoute: typeof rootRouteImport;
-    };
-    '/security/acls/create': {
-      id: '/security/acls/create';
-      path: '/security/acls/create';
-      fullPath: '/security/acls/create';
-      preLoaderRoute: typeof SecurityAclsCreateRouteImport;
+    '/security/roles/$roleName': {
+      id: '/security/roles/$roleName';
+      path: '/security/roles/$roleName';
+      fullPath: '/security/roles/$roleName';
+      preLoaderRoute: typeof SecurityRolesRoleNameRouteImport;
       parentRoute: typeof rootRouteImport;
     };
     '/secrets/$id/edit': {
@@ -1391,48 +1287,6 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof SchemaRegistrySubjectsSubjectNameIndexRouteImport;
       parentRoute: typeof rootRouteImport;
     };
-    '/security/users/$userName/details': {
-      id: '/security/users/$userName/details';
-      path: '/security/users/$userName/details';
-      fullPath: '/security/users/$userName/details';
-      preLoaderRoute: typeof SecurityUsersUserNameDetailsRouteImport;
-      parentRoute: typeof rootRouteImport;
-    };
-    '/security/roles/$roleName/update': {
-      id: '/security/roles/$roleName/update';
-      path: '/security/roles/$roleName/update';
-      fullPath: '/security/roles/$roleName/update';
-      preLoaderRoute: typeof SecurityRolesRoleNameUpdateRouteImport;
-      parentRoute: typeof rootRouteImport;
-    };
-    '/security/roles/$roleName/edit': {
-      id: '/security/roles/$roleName/edit';
-      path: '/security/roles/$roleName/edit';
-      fullPath: '/security/roles/$roleName/edit';
-      preLoaderRoute: typeof SecurityRolesRoleNameEditRouteImport;
-      parentRoute: typeof rootRouteImport;
-    };
-    '/security/roles/$roleName/details': {
-      id: '/security/roles/$roleName/details';
-      path: '/security/roles/$roleName/details';
-      fullPath: '/security/roles/$roleName/details';
-      preLoaderRoute: typeof SecurityRolesRoleNameDetailsRouteImport;
-      parentRoute: typeof rootRouteImport;
-    };
-    '/security/acls/$aclName/update': {
-      id: '/security/acls/$aclName/update';
-      path: '/security/acls/$aclName/update';
-      fullPath: '/security/acls/$aclName/update';
-      preLoaderRoute: typeof SecurityAclsAclNameUpdateRouteImport;
-      parentRoute: typeof rootRouteImport;
-    };
-    '/security/acls/$aclName/details': {
-      id: '/security/acls/$aclName/details';
-      path: '/security/acls/$aclName/details';
-      fullPath: '/security/acls/$aclName/details';
-      preLoaderRoute: typeof SecurityAclsAclNameDetailsRouteImport;
-      parentRoute: typeof rootRouteImport;
-    };
     '/schema-registry/subjects/$subjectName/edit-mode': {
       id: '/schema-registry/subjects/$subjectName/edit-mode';
       path: '/schema-registry/subjects/$subjectName/edit-mode';
@@ -1547,9 +1401,8 @@ const rootRouteChildren: RootRouteChildren = {
   RpConnectPipelineIdEditRoute: RpConnectPipelineIdEditRoute,
   RpConnectSecretsCreateRoute: RpConnectSecretsCreateRoute,
   SecretsIdEditRoute: SecretsIdEditRoute,
-  SecurityAclsCreateRoute: SecurityAclsCreateRoute,
-  SecurityRolesCreateRoute: SecurityRolesCreateRoute,
-  SecurityUsersCreateRoute: SecurityUsersCreateRoute,
+  SecurityRolesRoleNameRoute: SecurityRolesRoleNameRoute,
+  SecurityUsersUserNameRoute: SecurityUsersUserNameRoute,
   ShadowlinksNameEditRoute: ShadowlinksNameEditRoute,
   TopicsTopicNameProduceRecordRoute: TopicsTopicNameProduceRecordRoute,
   AgentsIdIndexRoute: AgentsIdIndexRoute,
@@ -1576,12 +1429,6 @@ const rootRouteChildren: RootRouteChildren = {
     SchemaRegistrySubjectsSubjectNameEditCompatibilityRoute,
   SchemaRegistrySubjectsSubjectNameEditModeRoute:
     SchemaRegistrySubjectsSubjectNameEditModeRoute,
-  SecurityAclsAclNameDetailsRoute: SecurityAclsAclNameDetailsRoute,
-  SecurityAclsAclNameUpdateRoute: SecurityAclsAclNameUpdateRoute,
-  SecurityRolesRoleNameDetailsRoute: SecurityRolesRoleNameDetailsRoute,
-  SecurityRolesRoleNameEditRoute: SecurityRolesRoleNameEditRoute,
-  SecurityRolesRoleNameUpdateRoute: SecurityRolesRoleNameUpdateRoute,
-  SecurityUsersUserNameDetailsRoute: SecurityUsersUserNameDetailsRoute,
   SchemaRegistrySubjectsSubjectNameIndexRoute:
     SchemaRegistrySubjectsSubjectNameIndexRoute,
 };
diff --git a/frontend/src/routes/security/$tab.tsx b/frontend/src/routes/security/$tab.tsx
index 456b5942e2..a0b64ad34c 100644
--- a/frontend/src/routes/security/$tab.tsx
+++ b/frontend/src/routes/security/$tab.tsx
@@ -10,8 +10,7 @@
  */
 
 import { createFileRoute, useParams } from '@tanstack/react-router';
-
-import AclList, { type AclListTab } from '../../components/pages/acls/acl-list';
+import { SecurityPage, type SecurityTab } from 'components/pages/security/security-page';
 
 export const Route = createFileRoute('/security/$tab')({
   staticData: {
@@ -22,5 +21,5 @@ export const Route = createFileRoute('/security/$tab')({
 
 function SecurityTabWrapper() {
   const { tab } = useParams({ from: '/security/$tab' });
-  return <AclList tab={tab as AclListTab} />;
+  return <SecurityPage tab={tab as SecurityTab} />;
 }
diff --git a/frontend/src/routes/security/acls/$aclName/details.tsx b/frontend/src/routes/security/acls/$aclName/details.tsx
deleted file mode 100644
index 9cd8864913..0000000000
--- a/frontend/src/routes/security/acls/$aclName/details.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-/**
- * Copyright 2026 Redpanda Data, Inc.
- *
- * Use of this software is governed by the Business Source License
- * included in the file https://github.com/redpanda-data/redpanda/blob/dev/licenses/bsl.md
- *
- * As of the Change Date specified in that file, in accordance with
- * the Business Source License, use of this software will be governed
- * by the Apache License, Version 2.0
- */
-
-import { createFileRoute } from '@tanstack/react-router';
-import { fallback, zodValidator } from '@tanstack/zod-adapter';
-import { z } from 'zod';
-
-import AclDetailPage from '../../../../components/pages/acls/new-acl/acl-detail-page';
-
-const searchSchema = z.object({
-  host: fallback(z.string().optional(), undefined),
-});
-
-export const Route = createFileRoute('/security/acls/$aclName/details')({
-  staticData: {
-    title: 'ACL Details',
-  },
-  validateSearch: zodValidator(searchSchema),
-  component: AclDetailPage,
-});
diff --git a/frontend/src/routes/security/acls/$aclName/update.tsx b/frontend/src/routes/security/acls/$aclName/update.tsx
deleted file mode 100644
index 11e043156d..0000000000
--- a/frontend/src/routes/security/acls/$aclName/update.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-/**
- * Copyright 2026 Redpanda Data, Inc.
- *
- * Use of this software is governed by the Business Source License
- * included in the file https://github.com/redpanda-data/redpanda/blob/dev/licenses/bsl.md
- *
- * As of the Change Date specified in that file, in accordance with
- * the Business Source License, use of this software will be governed
- * by the Apache License, Version 2.0
- */
-
-import { createFileRoute } from '@tanstack/react-router';
-import { fallback, zodValidator } from '@tanstack/zod-adapter';
-import { z } from 'zod';
-
-import AclUpdatePage from '../../../../components/pages/acls/new-acl/acl-update-page';
-
-const searchSchema = z.object({
-  host: fallback(z.string().optional(), undefined),
-});
-
-export const Route = createFileRoute('/security/acls/$aclName/update')({
-  staticData: {
-    title: 'Update ACL',
-  },
-  validateSearch: zodValidator(searchSchema),
-  component: AclUpdatePage,
-});
diff --git a/frontend/src/routes/security/acls/create.tsx b/frontend/src/routes/security/acls/create.tsx
deleted file mode 100644
index 962ee9bafc..0000000000
--- a/frontend/src/routes/security/acls/create.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-/**
- * Copyright 2026 Redpanda Data, Inc.
- *
- * Use of this software is governed by the Business Source License
- * included in the file https://github.com/redpanda-data/redpanda/blob/dev/licenses/bsl.md
- *
- * As of the Change Date specified in that file, in accordance with
- * the Business Source License, use of this software will be governed
- * by the Apache License, Version 2.0
- */
-
-import { createFileRoute } from '@tanstack/react-router';
-import { fallback, zodValidator } from '@tanstack/zod-adapter';
-import { z } from 'zod';
-
-import AclCreatePage from '../../../components/pages/acls/new-acl/acl-create-page';
-
-const searchSchema = z.object({
-  principalType: fallback(z.string().optional(), undefined),
-  principalName: fallback(z.string().optional(), undefined),
-});
-
-export const Route = createFileRoute('/security/acls/create')({
-  staticData: {
-    title: 'Create ACL',
-  },
-  validateSearch: zodValidator(searchSchema),
-  component: AclCreatePage,
-});
diff --git a/frontend/src/routes/security/index.tsx b/frontend/src/routes/security/index.tsx
index 570478270c..d53a2ef9f2 100644
--- a/frontend/src/routes/security/index.tsx
+++ b/frontend/src/routes/security/index.tsx
@@ -18,13 +18,12 @@ export const Route = createFileRoute('/security/')({
     icon: ShieldCheckIcon,
   },
   beforeLoad: () => {
-    // Redirect /security/ to /security/acls at router level.
+    // Redirect /security/ to /security/users at router level.
     // This prevents the component-level useEffect redirect which can cause
     // navigation loops in embedded mode where shell and console routers conflict.
-    // ACLs tab is always available regardless of admin API or serverless mode.
     throw redirect({
       to: '/security/$tab',
-      params: { tab: 'acls' },
+      params: { tab: 'users' },
       replace: true,
     });
   },
diff --git a/frontend/src/routes/security/roles/$roleName.tsx b/frontend/src/routes/security/roles/$roleName.tsx
new file mode 100644
index 0000000000..c96a10d757
--- /dev/null
+++ b/frontend/src/routes/security/roles/$roleName.tsx
@@ -0,0 +1,25 @@
+/**
+ * Copyright 2026 Redpanda Data, Inc.
+ *
+ * Use of this software is governed by the Business Source License
+ * included in the file https://github.com/redpanda-data/redpanda/blob/dev/licenses/bsl.md
+ *
+ * As of the Change Date specified in that file, in accordance with
+ * the Business Source License, use of this software will be governed
+ * by the Apache License, Version 2.0
+ */
+
+import { createFileRoute, useParams } from '@tanstack/react-router';
+import { RoleDetailPage } from 'components/pages/security/role-detail-page';
+
+export const Route = createFileRoute('/security/roles/$roleName')({
+  staticData: {
+    title: 'Role Details',
+  },
+  component: RoleDetailWrapper,
+});
+
+function RoleDetailWrapper() {
+  const { roleName } = useParams({ from: '/security/roles/$roleName' });
+  return <RoleDetailPage roleName={decodeURIComponent(roleName)} />;
+}
diff --git a/frontend/src/routes/security/roles/$roleName/details.tsx b/frontend/src/routes/security/roles/$roleName/details.tsx
deleted file mode 100644
index 18e44eed86..0000000000
--- a/frontend/src/routes/security/roles/$roleName/details.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-/**
- * Copyright 2026 Redpanda Data, Inc.
- *
- * Use of this software is governed by the Business Source License
- * included in the file https://github.com/redpanda-data/redpanda/blob/dev/licenses/bsl.md
- *
- * As of the Change Date specified in that file, in accordance with
- * the Business Source License, use of this software will be governed
- * by the Apache License, Version 2.0
- */
-
-import { createFileRoute } from '@tanstack/react-router';
-import { fallback, zodValidator } from '@tanstack/zod-adapter';
-import { z } from 'zod';
-
-import RoleDetailPage from '../../../../components/pages/roles/role-detail-page';
-
-const searchSchema = z.object({
-  host: fallback(z.string().optional(), undefined),
-});
-
-export const Route = createFileRoute('/security/roles/$roleName/details')({
-  staticData: {
-    title: 'Role Details',
-  },
-  validateSearch: zodValidator(searchSchema),
-  component: RoleDetailPage,
-});
diff --git a/frontend/src/routes/security/roles/$roleName/edit.tsx b/frontend/src/routes/security/roles/$roleName/edit.tsx
deleted file mode 100644
index 4329b8c412..0000000000
--- a/frontend/src/routes/security/roles/$roleName/edit.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-/**
- * Copyright 2026 Redpanda Data, Inc.
- *
- * Use of this software is governed by the Business Source License
- * included in the file https://github.com/redpanda-data/redpanda/blob/dev/licenses/bsl.md
- *
- * As of the Change Date specified in that file, in accordance with
- * the Business Source License, use of this software will be governed
- * by the Apache License, Version 2.0
- */
-
-import { createFileRoute, redirect } from '@tanstack/react-router';
-import { fallback, zodValidator } from '@tanstack/zod-adapter';
-import { z } from 'zod';
-
-const searchSchema = z.object({
-  host: fallback(z.string().optional(), undefined),
-});
-
-export const Route = createFileRoute('/security/roles/$roleName/edit')({
-  validateSearch: zodValidator(searchSchema),
-  beforeLoad: ({ params, search }) => {
-    // Backward-compatibility shim — navigate to /update directly in new code.
-    throw redirect({
-      to: '/security/roles/$roleName/update',
-      params,
-      search,
-      replace: true,
-    });
-  },
-});
diff --git a/frontend/src/routes/security/roles/$roleName/update.tsx b/frontend/src/routes/security/roles/$roleName/update.tsx
deleted file mode 100644
index 399cf01172..0000000000
--- a/frontend/src/routes/security/roles/$roleName/update.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-/**
- * Copyright 2026 Redpanda Data, Inc.
- *
- * Use of this software is governed by the Business Source License
- * included in the file https://github.com/redpanda-data/redpanda/blob/dev/licenses/bsl.md
- *
- * As of the Change Date specified in that file, in accordance with
- * the Business Source License, use of this software will be governed
- * by the Apache License, Version 2.0
- */
-
-import { createFileRoute } from '@tanstack/react-router';
-import { fallback, zodValidator } from '@tanstack/zod-adapter';
-import { z } from 'zod';
-
-import RoleUpdatePage from '../../../../components/pages/roles/role-update-page';
-
-const searchSchema = z.object({
-  host: fallback(z.string().optional(), undefined),
-});
-
-export const Route = createFileRoute('/security/roles/$roleName/update')({
-  staticData: {
-    title: 'Update Role',
-  },
-  validateSearch: zodValidator(searchSchema),
-  component: RoleUpdatePage,
-});
diff --git a/frontend/src/routes/security/roles/create.tsx b/frontend/src/routes/security/roles/create.tsx
deleted file mode 100644
index fc1e0ca1f9..0000000000
--- a/frontend/src/routes/security/roles/create.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * Copyright 2026 Redpanda Data, Inc.
- *
- * Use of this software is governed by the Business Source License
- * included in the file https://github.com/redpanda-data/redpanda/blob/dev/licenses/bsl.md
- *
- * As of the Change Date specified in that file, in accordance with
- * the Business Source License, use of this software will be governed
- * by the Apache License, Version 2.0
- */
-
-import { createFileRoute } from '@tanstack/react-router';
-
-import RoleCreatePage from '../../../components/pages/roles/role-create-page';
-
-export const Route = createFileRoute('/security/roles/create')({
-  staticData: {
-    title: 'Create Role',
-  },
-  component: RoleCreatePage,
-});
diff --git a/frontend/src/routes/security/users/$userName/details.tsx b/frontend/src/routes/security/users/$userName.tsx
similarity index 66%
rename from frontend/src/routes/security/users/$userName/details.tsx
rename to frontend/src/routes/security/users/$userName.tsx
index ebdffafe5c..3eb199f36d 100644
--- a/frontend/src/routes/security/users/$userName/details.tsx
+++ b/frontend/src/routes/security/users/$userName.tsx
@@ -10,17 +10,16 @@
  */
 
 import { createFileRoute, useParams } from '@tanstack/react-router';
+import { UserDetailPage } from 'components/pages/security/user-detail-page';
 
-import UserDetailsPage from '../../../../components/pages/acls/user-details';
-
-export const Route = createFileRoute('/security/users/$userName/details')({
+export const Route = createFileRoute('/security/users/$userName')({
   staticData: {
     title: 'User Details',
   },
-  component: UserDetailsWrapper,
+  component: UserDetailWrapper,
 });
 
-function UserDetailsWrapper() {
-  const { userName } = useParams({ from: '/security/users/$userName/details' });
-  return <UserDetailsPage userName={userName} />;
+function UserDetailWrapper() {
+  const { userName } = useParams({ from: '/security/users/$userName' });
+  return <UserDetailPage userName={decodeURIComponent(userName)} />;
 }
diff --git a/frontend/src/routes/security/users/create.tsx b/frontend/src/routes/security/users/create.tsx
deleted file mode 100644
index ba2ea288b3..0000000000
--- a/frontend/src/routes/security/users/create.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-/**
- * Copyright 2026 Redpanda Data, Inc.
- *
- * Use of this software is governed by the Business Source License
- * included in the file https://github.com/redpanda-data/redpanda/blob/dev/licenses/bsl.md
- *
- * As of the Change Date specified in that file, in accordance with
- * the Business Source License, use of this software will be governed
- * by the Apache License, Version 2.0
- */
-
-import { createFileRoute } from '@tanstack/react-router';
-
-import UserCreatePage from '../../../components/pages/acls/user-create';
-
-export const Route = createFileRoute('/security/users/create')({
-  staticData: {
-    title: 'Create User',
-  },
-  component: UserCreateWrapper,
-});
-
-function UserCreateWrapper() {
-  return <UserCreatePage />;
-}