diff --git a/frontend/src/components/pages/acls/PrincipalGroupEditor.tsx b/frontend/src/components/pages/acls/PrincipalGroupEditor.tsx
index 5630ab909..ec721cca0 100644
--- a/frontend/src/components/pages/acls/PrincipalGroupEditor.tsx
+++ b/frontend/src/components/pages/acls/PrincipalGroupEditor.tsx
@@ -11,17 +11,15 @@
 
 import { useState } from 'react';
 import { observer } from 'mobx-react';
-import { AutoComplete, Select } from 'antd';
 import { api } from '../../../state/backendApi';
 import { AclOperation, AclStrOperation, AclStrResourceType } from '../../../state/restInterfaces';
 import { AnimatePresence, animProps_radioOptionGroup, MotionDiv } from '../../../utils/animationProps';
-import { containsIgnoreCase } from '../../../utils/utils';
 import { Code, Label, LabelTooltip } from '../../../utils/tsxUtils';
 import { HiOutlineTrash } from 'react-icons/hi';
 import { AclPrincipalGroup, createEmptyConsumerGroupAcl, createEmptyTopicAcl, createEmptyTransactionalIdAcl, ResourceACLs, unpackPrincipalGroup } from './Models';
 import { Operation } from './Operation';
-import { Button, HStack, Icon, Text, Input, InputGroup, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader, ModalOverlay, useToast, VStack } from '@redpanda-data/ui';
-const { Option } = Select;
+import { Box, Button, HStack, Icon, Input, InputGroup, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader, ModalOverlay, Text, useToast, VStack } from '@redpanda-data/ui';
+import { SingleSelect } from '../../misc/Select';
 
 
 export const AclPrincipalGroupEditor = observer((p: {
@@ -32,8 +30,6 @@ export const AclPrincipalGroupEditor = observer((p: {
     const group = p.principalGroup;
     const toast = useToast()
 
-    const existingPrincipals: string[] = [];
-    const principalOptions = existingPrincipals.map(p => ({ value: p }));
     const [isLoading, setIsLoading] = useState(false);
     const [error, setError] = useState(undefined as string | undefined);
 
@@ -139,28 +135,32 @@ export const AclPrincipalGroupEditor = observer((p: {
                                 }
                             >
                                 <InputGroup>
-                                    <Select
-                                        value={group.principalType}
-                                        onChange={x => (group.principalType = x)}
-                                        disabled
-                                        showArrow={false}
-                                        style={{
-                                            width: '80px',
-                                            background: 'hsl(0deg 0% 98%)',
-                                            cursor: 'default'
-                                        }}
-                                    >
-                                        <Option value="User">User</Option>
-                                        {/* <Option value="Group">Group</Option> */}
-                                    </Select>
-                                    <AutoComplete
-                                        style={{ width: 260 }}
-                                        options={principalOptions}
-                                        filterOption={(inputValue, option) => containsIgnoreCase(option!.value, inputValue)}
+                                    <Box mr={2} minW={150}>
+                                        <SingleSelect<string>
+                                            value={group.principalType}
+                                            options={[
+                                                {
+                                                    label: 'User',
+                                                    value: 'User',
+                                                },
+                                                // {
+                                                //     label: 'Group',
+                                                //     value: 'Group'
+                                                // }
+                                            ]}
+                                            onChange={(value) => {
+                                                group.principalType = value
+                                            }}
+                                        />
+                                    </Box>
+
+                                    <Input
                                         value={group.principalName}
-                                        onChange={v => {
-                                            if (v.includes(':')) return;
-                                            group.principalName = v;
+                                        onChange={(e) => {
+                                            if (e.target.value.includes(':')) {
+                                                return;
+                                            }
+                                            group.principalName = e.target.value;
                                         }}
                                         {...{ spellCheck: false }}
                                     />
diff --git a/frontend/src/components/pages/topics/Tab.Messages/PreviewSettings.tsx b/frontend/src/components/pages/topics/Tab.Messages/PreviewSettings.tsx
index 4acb73129..af6df3e04 100644
--- a/frontend/src/components/pages/topics/Tab.Messages/PreviewSettings.tsx
+++ b/frontend/src/components/pages/topics/Tab.Messages/PreviewSettings.tsx
@@ -9,12 +9,12 @@
  * by the Apache License, Version 2.0
  */
 
-import { AutoComplete, Input } from 'antd';
+import { Input } from 'antd';
 import { arrayMoveMutable } from 'array-move';
 import { computed, makeObservable } from 'mobx';
 import { observer } from 'mobx-react';
 import React, { Component } from 'react';
-import { DragDropContext, Draggable, Droppable, DropResult, ResponderProvided } from 'react-beautiful-dnd';
+import { DragDropContext, Draggable, DraggableProvided, Droppable, DropResult, ResponderProvided } from 'react-beautiful-dnd';
 import { api } from '../../../../state/backendApi';
 import { PreviewTagV2 } from '../../../../state/ui';
 import { uiState } from '../../../../state/uiState';
@@ -23,7 +23,8 @@ import { Code, Label, OptionGroup, toSafeString } from '../../../../utils/tsxUti
 import { CollectedProperty, collectElements2, getAllMessageKeys, randomId } from '../../../../utils/utils';
 import globExampleImg from '../../../../assets/globExample.png';
 import { GearIcon, InfoIcon, ThreeBarsIcon, XIcon } from '@primer/octicons-react';
-import { Button, Checkbox, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader, ModalOverlay, Popover } from '@redpanda-data/ui';
+import { Box, Button, Checkbox, Flex, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader, ModalOverlay, Popover } from '@redpanda-data/ui';
+import { SingleSelect } from '../../../misc/Select';
 
 
 const globHelp = <div>
@@ -166,9 +167,9 @@ export class PreviewSettings extends Component<{ getShowDialog: () => boolean, s
                                             <div
                                                 ref={draggableProvided.innerRef}
                                                 {...draggableProvided.draggableProps}
-                                                {...draggableProvided.dragHandleProps}
                                             >
                                                 <PreviewTagSettings tag={tag} index={index}
+                                                                    draggableProvided={draggableProvided}
                                                     onRemove={() => tags.removeAll(t => t.id == tag.id)}
                                                     allCurrentKeys={currentKeys}
                                                 />
@@ -246,18 +247,14 @@ todo:
 -
  */
 @observer
-class PreviewTagSettings extends Component<{ tag: PreviewTagV2, index: number, onRemove: () => void, allCurrentKeys: string[] }>{
+class PreviewTagSettings extends Component<{ tag: PreviewTagV2, index: number, onRemove: () => void, allCurrentKeys: string[], draggableProvided: DraggableProvided }>{
     render() {
-        const { tag, onRemove, allCurrentKeys } = this.props;
+        const { tag, onRemove, allCurrentKeys, draggableProvided } = this.props;
 
-        return <div style={{
-            display: 'flex', placeItems: 'center', gap: '4px',
-            background: 'hsl(0deg, 0%, 91%)', padding: '4px', borderRadius: '4px',
-            marginBottom: '6px'
-        }}>
+        return <Flex placeItems="center" gap={1} p={1} borderRadius={1} mb={1.5}>
 
             {/* Move Handle */}
-            <span className="moveHandle"><ThreeBarsIcon /></span>
+            <span className="moveHandle" {...draggableProvided.dragHandleProps}><ThreeBarsIcon /></span>
 
             {/* Enabled */}
             <Checkbox isChecked={tag.isActive} onChange={e => tag.isActive = e.target.checked} />
@@ -286,29 +283,20 @@ class PreviewTagSettings extends Component<{ tag: PreviewTagV2, index: number, o
                 <span className="inlineButton" ><GearIcon /></span>
             </Popover>
 
-            {/* Pattern */}
-            <AutoComplete options={allCurrentKeys.map(t => ({ label: t, value: t }))}
-                size="small"
-                style={{ flexGrow: 1, flexBasis: '400px' }}
-
-                defaultActiveFirstOption={true}
-                onSearch={(_value: string) => {
-                    // console.log('onSearch ', value);
-                }}
-                value={tag.pattern}
-
-                onChange={(value: string) => tag.pattern = value}
-                placeholder="Pattern..."
-                filterOption={(inputValue, option) => option?.value.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1}
-
-                notFoundContent="None"
-
-                {...{ spellCheck: 'false' }}
-            />
+            <Box w="full">
+                <SingleSelect<string>
+                    placeholder="Pattern..."
+                    value={tag.pattern}
+                    onChange={(value) => {
+                        tag.pattern = value
+                    }}
+                    options={allCurrentKeys.map(t => ({label: t, value: t}))}
+                />
+            </Box>
 
             {/* Remove */}
             <span className="inlineButton" onClick={onRemove} ><XIcon /></span>
-        </div>;
+        </Flex>;
     }
 }