diff --git a/frontend/src/components/pages/topics/Tab.Acl/acl-list.test.tsx b/frontend/src/components/pages/topics/Tab.Acl/acl-list.test.tsx
index 2b36dce349..8b45d363dc 100644
--- a/frontend/src/components/pages/topics/Tab.Acl/acl-list.test.tsx
+++ b/frontend/src/components/pages/topics/Tab.Acl/acl-list.test.tsx
@@ -10,8 +10,18 @@
  */
 
 import { render, screen } from '@testing-library/react';
+import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
+import { vi } from 'vitest';
 
 import AclList from './acl-list';
+
+vi.mock('@tanstack/react-router', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@tanstack/react-router')>();
+  return { ...actual, useLocation: () => ({ searchStr: '' }) };
+});
+
+const renderWithAdapter = (ui: React.ReactElement) => render(<NuqsTestingAdapter>{ui}</NuqsTestingAdapter>);
+
 import type {
   AclStrOperation,
   AclStrPermission,
@@ -26,7 +36,7 @@ describe('AclList', () => {
       aclResources: [],
     };
 
-    render(<AclList acl={store} />);
+    renderWithAdapter(<AclList acl={store} />);
     expect(screen.getByText('No data found')).toBeInTheDocument();
   });
 
@@ -50,7 +60,7 @@ describe('AclList', () => {
       ],
     } as GetAclOverviewResponse;
 
-    render(<AclList acl={store} />);
+    renderWithAdapter(<AclList acl={store} />);
 
     expect(screen.getByText('Topic')).toBeInTheDocument();
     expect(screen.getByText('Test Topic')).toBeInTheDocument();
@@ -60,7 +70,7 @@ describe('AclList', () => {
   });
 
   test('informs user about missing permission to view ACLs', () => {
-    render(<AclList acl={null} />);
+    renderWithAdapter(<AclList acl={null} />);
     expect(screen.getByText('You do not have the necessary permissions to view ACLs')).toBeInTheDocument();
   });
 
@@ -70,7 +80,7 @@ describe('AclList', () => {
       aclResources: [],
     };
 
-    render(<AclList acl={store} />);
+    renderWithAdapter(<AclList acl={store} />);
     expect(screen.getByText("There's no authorizer configured in your Kafka cluster")).toBeInTheDocument();
   });
 });
diff --git a/frontend/src/components/pages/topics/Tab.Acl/acl-list.tsx b/frontend/src/components/pages/topics/Tab.Acl/acl-list.tsx
index 547481c74c..fb814ec472 100644
--- a/frontend/src/components/pages/topics/Tab.Acl/acl-list.tsx
+++ b/frontend/src/components/pages/topics/Tab.Acl/acl-list.tsx
@@ -9,8 +9,16 @@
  * by the Apache License, Version 2.0
  */
 
-import { Alert, AlertIcon, DataTable } from '@redpanda-data/ui';
+import {
+  type ColumnDef,
+  flexRender,
+  getCoreRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from '@tanstack/react-table';
 
+import { useUrlTableState } from '../../../../hooks/use-url-table-state';
 import type {
   AclRule,
   AclStrOperation,
@@ -19,91 +27,132 @@ import type {
   AclStrResourceType,
   GetAclOverviewResponse,
 } from '../../../../state/rest-interfaces';
+import { uiSettings } from '../../../../state/ui';
 import { toJson } from '../../../../utils/json-utils';
+import { Alert, AlertDescription } from '../../../redpanda-ui/components/alert';
+import { DataTableColumnHeader, DataTablePagination } from '../../../redpanda-ui/components/data-table';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../../../redpanda-ui/components/table';
 
 type Acls = GetAclOverviewResponse | null | undefined;
 
-type AclListProps = {
-  acl: Acls;
+type AclFlatResource = {
+  eqKey: string;
+  principal: string;
+  host: string;
+  operation: AclStrOperation;
+  permissionType: AclStrPermission;
+  resourceType: AclStrResourceType;
+  resourceName: string;
+  resourcePatternType: AclStrResourcePatternType;
+  acls: AclRule[];
 };
 
-function flatResourceList(store: Acls) {
-  const acls = store;
-  if (!acls || acls.aclResources === null) {
+function flatResourceList(store: Acls): AclFlatResource[] {
+  if (!store || store.aclResources === null) {
     return [];
   }
-  const flatResources = acls.aclResources
+  return store.aclResources
     .flatMap((res) => res.acls.map((rule) => ({ ...res, ...rule })))
     .map((x) => ({ ...x, eqKey: toJson(x) }));
-  return flatResources;
 }
 
-export default ({ acl }: AclListProps) => {
+const columns: ColumnDef<AclFlatResource>[] = [
+  {
+    accessorKey: 'resourceType',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Resource" />,
+  },
+  {
+    accessorKey: 'permissionType',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Permission" />,
+  },
+  {
+    accessorKey: 'principal',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Principal" />,
+  },
+  {
+    accessorKey: 'operation',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Operation" />,
+  },
+  {
+    accessorKey: 'resourcePatternType',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="PatternType" />,
+  },
+  {
+    accessorKey: 'resourceName',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Name" />,
+  },
+  {
+    accessorKey: 'host',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Host" />,
+  },
+];
+
+const AclList = ({ acl }: { acl: Acls }) => {
   const resources = flatResourceList(acl);
 
+  const { sorting, pagination, onSortingChange, onPaginationChange } = useUrlTableState({
+    keyPrefix: 'acl',
+    settings: uiSettings.topicAclList,
+    rowCount: resources.length,
+  });
+
+  const table = useReactTable({
+    data: resources,
+    columns,
+    state: { sorting, pagination },
+    onSortingChange,
+    onPaginationChange,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    autoResetPageIndex: false,
+  });
+
   return (
     <>
-      {acl === null ? (
-        <Alert status="warning" style={{ marginBottom: '1em' }}>
-          <AlertIcon />
-          You do not have the necessary permissions to view ACLs
+      {acl === null && (
+        <Alert className="mb-4" variant="warning">
+          <AlertDescription>You do not have the necessary permissions to view ACLs</AlertDescription>
         </Alert>
-      ) : null}
-      {acl?.isAuthorizerEnabled ? null : (
-        <Alert status="warning" style={{ marginBottom: '1em' }}>
-          <AlertIcon />
-          There's no authorizer configured in your Kafka cluster
+      )}
+      {acl?.isAuthorizerEnabled === false && (
+        <Alert className="mb-4" variant="warning">
+          <AlertDescription>There&apos;s no authorizer configured in your Kafka cluster</AlertDescription>
         </Alert>
       )}
-      <DataTable<{
-        eqKey: string;
-        principal: string;
-        host: string;
-        operation: AclStrOperation;
-        permissionType: AclStrPermission;
-        resourceType: AclStrResourceType;
-        resourceName: string;
-        resourcePatternType: AclStrResourcePatternType;
-        acls: AclRule[];
-      }>
-        columns={[
-          {
-            size: 120,
-            header: 'Resource',
-            accessorKey: 'resourceType',
-          },
-          {
-            size: 120,
-            header: 'Permission',
-            accessorKey: 'permissionType',
-          },
-          {
-            header: 'Principal',
-            accessorKey: 'principal',
-          },
-          {
-            size: 160,
-            header: 'Operation',
-            accessorKey: 'operation',
-          },
-          {
-            header: 'PatternType',
-            accessorKey: 'resourcePatternType',
-          },
-          {
-            header: 'Name',
-            accessorKey: 'resourceName',
-          },
-          {
-            size: 120,
-            header: 'Host',
-            accessorKey: 'host',
-          },
-        ]}
-        data={resources}
-        pagination
-        sorting
-      />
+      <Table>
+        <TableHeader>
+          {table.getHeaderGroups().map((headerGroup) => (
+            <TableRow key={headerGroup.id}>
+              {headerGroup.headers.map((header) => (
+                <TableHead key={header.id}>
+                  {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
+                </TableHead>
+              ))}
+            </TableRow>
+          ))}
+        </TableHeader>
+        <TableBody>
+          {table.getRowModel().rows.length === 0 ? (
+            <TableRow>
+              <TableCell className="text-center" colSpan={columns.length}>
+                No data found
+              </TableCell>
+            </TableRow>
+          ) : (
+            table.getRowModel().rows.map((row) => (
+              <TableRow key={row.id}>
+                {row.getVisibleCells().map((cell) => (
+                  <TableCell key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</TableCell>
+                ))}
+              </TableRow>
+            ))
+          )}
+        </TableBody>
+      </Table>
+      <DataTablePagination table={table} />
     </>
   );
 };
+
+export default AclList;
diff --git a/frontend/src/components/pages/topics/Tab.Messages/common/delete-records-menu-item.tsx b/frontend/src/components/pages/topics/Tab.Messages/common/delete-records-menu-item.tsx
index 2106486e79..36a6eecd7d 100644
--- a/frontend/src/components/pages/topics/Tab.Messages/common/delete-records-menu-item.tsx
+++ b/frontend/src/components/pages/topics/Tab.Messages/common/delete-records-menu-item.tsx
@@ -9,7 +9,8 @@
  * by the Apache License, Version 2.0
  */
 
-import { Button, Tooltip } from '@redpanda-data/ui';
+import { Button } from 'components/redpanda-ui/components/button';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from 'components/redpanda-ui/components/tooltip';
 
 import type { TopicAction } from '../../../../../state/rest-interfaces';
 import { getDeleteErrorText, isDeleteEnabled } from '../helpers';
@@ -22,18 +23,24 @@ export function DeleteRecordsMenuItem(
   const isEnabled = isDeleteEnabled(isCompacted, allowedActions);
   const errorText = getDeleteErrorText(isCompacted, allowedActions);
 
-  let content: JSX.Element | string = 'Delete Records';
+  const button = (
+    <Button disabled={!isEnabled} onClick={onClick} variant="destructive-outline">
+      Delete Records
+    </Button>
+  );
+
   if (errorText) {
-    content = (
-      <Tooltip hasArrow label={errorText} placement="top">
-        {content}
-      </Tooltip>
+    return (
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <span>{button}</span>
+          </TooltipTrigger>
+          <TooltipContent side="top">{errorText}</TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
     );
   }
 
-  return (
-    <Button isDisabled={!isEnabled} onClick={onClick} variant="outline">
-      {content}
-    </Button>
-  );
+  return button;
 }
diff --git a/frontend/src/components/pages/topics/Tab.Messages/common/message-search-filter-bar.tsx b/frontend/src/components/pages/topics/Tab.Messages/common/message-search-filter-bar.tsx
index 3b11ce6985..5603dfde98 100644
--- a/frontend/src/components/pages/topics/Tab.Messages/common/message-search-filter-bar.tsx
+++ b/frontend/src/components/pages/topics/Tab.Messages/common/message-search-filter-bar.tsx
@@ -9,8 +9,8 @@
  * by the Apache License, Version 2.0
  */
 
-import { Box, GridItem, Tag, TagCloseButton, TagLabel } from '@redpanda-data/ui';
-import { SettingsIcon } from 'components/icons';
+import { CloseIcon, SettingsIcon } from 'components/icons';
+import { cn } from 'components/redpanda-ui/lib/utils';
 import type { FC } from 'react';
 
 import type { FilterEntry } from '../../../../../state/ui';
@@ -24,47 +24,49 @@ type MessageSearchFilterBarProps = {
 
 export const MessageSearchFilterBar: FC<MessageSearchFilterBarProps> = ({ filters, onEdit, onToggle, onRemove }) => {
   return (
-    <GridItem data-testid="message-filter-bar" display="flex" gridColumn="-1/1" justifyContent="space-between">
-      <Box columnGap="8px" display="inline-flex" flexWrap="wrap" rowGap="2px" width="calc(100% - 200px)">
+    <div className="col-span-full flex justify-between" data-testid="message-filter-bar">
+      <div className="inline-flex flex-wrap items-center gap-2">
         {/* Existing Tags List  */}
         {filters?.map((e) => (
-          <Tag
-            className={e.isActive ? 'filterTag' : 'filterTag filterTagDisabled'}
+          <div
+            className={cn(
+              'inline-flex select-none items-center rounded-md border bg-card text-sm shadow-sm',
+              !e.isActive && 'bg-muted text-muted-foreground'
+            )}
             data-testid={`message-filter-tag-${e.id}`}
             key={e.id}
-            style={{ userSelect: 'none' }}
           >
-            <SettingsIcon
+            <button
+              aria-label="Edit filter"
+              className="flex items-center px-2 py-1 text-muted-foreground transition-colors hover:text-foreground"
               data-testid={`message-filter-edit-${e.id}`}
               onClick={() => {
                 onEdit(e);
               }}
-              size={14}
-            />
-            <TagLabel
-              alignItems="center"
-              border="0px solid hsl(0 0% 85% / 1)"
-              borderWidth="0px 1px"
+              type="button"
+            >
+              <SettingsIcon size={14} />
+            </button>
+            <button
+              className={cn('border-x px-2 py-1 transition-colors hover:bg-accent', !e.isActive && 'line-through')}
               data-testid={`message-filter-toggle-${e.id}`}
-              display="inline-flex"
-              height="100%"
-              mx="2"
               onClick={() => onToggle(e.id)}
-              px="6px"
-              textDecoration={e.isActive ? '' : 'line-through'}
+              type="button"
             >
               {e.name || e.code || 'New Filter'}
-            </TagLabel>
-            <TagCloseButton
+            </button>
+            <button
+              aria-label="Remove filter"
+              className="flex items-center px-2 py-1 text-muted-foreground transition-colors hover:text-foreground"
               data-testid={`message-filter-remove-${e.id}`}
-              m="0"
               onClick={() => onRemove(e.id)}
-              opacity={1}
-              px="1"
-            />
-          </Tag>
+              type="button"
+            >
+              <CloseIcon size={14} />
+            </button>
+          </div>
         ))}
-      </Box>
-    </GridItem>
+      </div>
+    </div>
   );
 };
diff --git a/frontend/src/components/pages/topics/Tab.Messages/dialogs/save-messages-dialog.tsx b/frontend/src/components/pages/topics/Tab.Messages/dialogs/save-messages-dialog.tsx
index ccf5ab6848..e56eb6ca10 100644
--- a/frontend/src/components/pages/topics/Tab.Messages/dialogs/save-messages-dialog.tsx
+++ b/frontend/src/components/pages/topics/Tab.Messages/dialogs/save-messages-dialog.tsx
@@ -9,18 +9,17 @@
  * by the Apache License, Version 2.0
  */
 
+import { Button } from 'components/redpanda-ui/components/button';
+import { Checkbox } from 'components/redpanda-ui/components/checkbox';
 import {
-  Box,
-  Button,
-  Checkbox,
-  Modal,
-  ModalBody,
-  ModalContent,
-  ModalFooter,
-  ModalHeader,
-  ModalOverlay,
-  RadioGroup,
-} from '@redpanda-data/ui';
+  Dialog,
+  DialogBody,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from 'components/redpanda-ui/components/dialog';
+import { RadioGroup, RadioGroupItem } from 'components/redpanda-ui/components/radio-group';
 import { useState } from 'react';
 
 import type { Payload, TopicMessage } from '../../../../../state/rest-interfaces';
@@ -190,42 +189,48 @@ export const SaveMessagesDialog = ({
   };
 
   return (
-    <Modal isOpen={count > 0} onClose={onClose}>
-      <ModalOverlay />
-      <ModalContent minW="2xl">
-        <ModalHeader>{title}</ModalHeader>
-        <ModalBody display="flex" flexDirection="column" gap="4">
+    <Dialog
+      onOpenChange={(open) => {
+        if (!open) onClose();
+      }}
+      open={count > 0}
+    >
+      <DialogContent className="max-w-2xl">
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+        </DialogHeader>
+        <DialogBody>
           <div>Select the format in which you want to save {count === 1 ? 'the message' : 'all messages'}</div>
-          <Box py={2}>
-            <RadioGroup
-              name="format"
-              onChange={(value) => setFormat(value)}
-              options={[
-                {
-                  value: 'json',
-                  label: 'JSON',
-                },
-                {
-                  value: 'csv',
-                  label: 'CSV',
-                },
-              ]}
-              value={format}
+          <div className="py-2">
+            <RadioGroup onValueChange={(val) => setFormat(val as 'json' | 'csv')} value={format}>
+              <div className="flex items-center gap-2">
+                <RadioGroupItem id="format-json" value="json" />
+                <label htmlFor="format-json">JSON</label>
+              </div>
+              <div className="flex items-center gap-2">
+                <RadioGroupItem id="format-csv" testId="csv_field" value="csv" />
+                <label htmlFor="format-csv">CSV</label>
+              </div>
+            </RadioGroup>
+          </div>
+          <div className="flex items-center gap-2">
+            <Checkbox
+              checked={includeRawContent}
+              id="include-raw"
+              onCheckedChange={(checked) => setIncludeRawContent(checked === true)}
             />
-          </Box>
-          <Checkbox isChecked={includeRawContent} onChange={(e) => setIncludeRawContent(e.target.checked)}>
-            Include raw data
-          </Checkbox>
-        </ModalBody>
-        <ModalFooter gap={2}>
+            <label htmlFor="include-raw">Include raw data</label>
+          </div>
+        </DialogBody>
+        <DialogFooter>
           <Button onClick={onClose} variant="ghost">
             Cancel
           </Button>
-          <Button isDisabled={!messages || messages.length === 0} onClick={() => saveMessages()} variant="solid">
+          <Button disabled={!messages || messages.length === 0} onClick={() => saveMessages()} variant="primary">
             Save Messages
           </Button>
-        </ModalFooter>
-      </ModalContent>
-    </Modal>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
   );
 };
diff --git a/frontend/src/components/pages/topics/Tab.Messages/index.tsx b/frontend/src/components/pages/topics/Tab.Messages/index.tsx
index 1b788f1dce..2442f2f49f 100644
--- a/frontend/src/components/pages/topics/Tab.Messages/index.tsx
+++ b/frontend/src/components/pages/topics/Tab.Messages/index.tsx
@@ -23,28 +23,6 @@ import {
 } from '../../../../state/ui';
 import { uiState } from '../../../../state/ui-state';
 import '../../../../utils/array-extensions';
-import {
-  Alert,
-  AlertDescription,
-  AlertTitle,
-  Badge,
-  Box,
-  Button,
-  Flex,
-  Grid,
-  GridItem,
-  IconButton,
-  Input,
-  Menu,
-  MenuButton,
-  MenuDivider,
-  MenuItem,
-  MenuList,
-  Spinner,
-  Switch,
-  Tooltip,
-  useToast,
-} from '@redpanda-data/ui';
 import type { ColumnDef, SortingState } from '@tanstack/react-table';
 import {
   flexRender,
@@ -55,7 +33,6 @@ import {
   useReactTable,
 } from '@tanstack/react-table';
 import {
-  AlertIcon,
   CalendarIcon,
   CodeIcon,
   DownloadIcon,
@@ -71,19 +48,32 @@ import {
   TabIcon,
   TimerIcon,
 } from 'components/icons';
-import { Button as RegistryButton } from 'components/redpanda-ui/components/button';
+import { Alert, AlertDescription, AlertTitle } from 'components/redpanda-ui/components/alert';
+import { Badge } from 'components/redpanda-ui/components/badge';
+import { Button } from 'components/redpanda-ui/components/button';
 import { DataTablePagination } from 'components/redpanda-ui/components/data-table';
 import {
-  Select as RegistrySelect,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from 'components/redpanda-ui/components/dropdown-menu';
+import { Input } from 'components/redpanda-ui/components/input';
+import {
+  Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
 } from 'components/redpanda-ui/components/select';
+import { Spinner } from 'components/redpanda-ui/components/spinner';
+import { Switch } from 'components/redpanda-ui/components/switch';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from 'components/redpanda-ui/components/table';
-import { Tooltip as RegistryTooltip, TooltipContent, TooltipTrigger } from 'components/redpanda-ui/components/tooltip';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from 'components/redpanda-ui/components/tooltip';
 import { ChevronDown, ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from 'lucide-react';
 import { parseAsBoolean, parseAsInteger, parseAsString, useQueryState } from 'nuqs';
+import { toast } from 'sonner';
 
 import { MessageSearchFilterBar } from './common/message-search-filter-bar';
 import { SaveMessagesDialog } from './dialogs/save-messages-dialog';
@@ -115,7 +105,6 @@ import {
 import { encodeBase64, prettyBytes, prettyMilliseconds } from '../../../../utils/utils';
 import { range } from '../../../misc/common';
 import RemovableFilter from '../../../misc/removable-filter';
-import { SingleSelect } from '../../../misc/select';
 
 const payloadEncodingPairs = [
   { value: PayloadEncoding.UNSPECIFIED, label: 'Automatic' },
@@ -200,56 +189,20 @@ function getPayloadAsString(value: string | Uint8Array | object): string {
   return JSON.stringify(value, null, 4);
 }
 
-const defaultSelectChakraStyles = {
-  control: (provided: Record<string, unknown>) => ({
-    ...provided,
-    minWidth: 'max-content',
-  }),
-  option: (provided: Record<string, unknown>) => ({
-    ...provided,
-    wordBreak: 'keep-all',
-    whiteSpace: 'nowrap',
-  }),
-  menuList: (provided: Record<string, unknown>) => ({
-    ...provided,
-    minWidth: 'min-content',
-  }),
-} as const;
-
-const inlineSelectChakraStyles = {
-  ...defaultSelectChakraStyles,
-  control: (provided: Record<string, unknown>) => ({
-    ...provided,
-    _hover: {
-      borderColor: 'transparent',
-    },
-  }),
-  container: (provided: Record<string, unknown>) => ({
-    ...provided,
-    borderColor: 'transparent',
-  }),
-} as const;
-
-function onCopyValue(original: TopicMessage, toast: ReturnType<typeof useToast>) {
+function onCopyValue(original: TopicMessage) {
   navigator.clipboard
     .writeText(getPayloadAsString((original.value.payload ?? original.value.rawBytes) as string | Uint8Array | object))
     .then(() => {
-      toast({
-        status: 'success',
-        description: 'Value copied to clipboard',
-      });
+      toast.success('Value copied to clipboard');
     })
     .catch(navigatorClipboardErrorHandler);
 }
 
-function onCopyKey(original: TopicMessage, toast: ReturnType<typeof useToast>) {
+function onCopyKey(original: TopicMessage) {
   navigator.clipboard
     .writeText(getPayloadAsString((original.key.payload ?? original.key.rawBytes) as string | Uint8Array | object))
     .then(() => {
-      toast({
-        status: 'success',
-        description: 'Key copied to clipboard',
-      });
+      toast.success('Key copied to clipboard');
     })
     .catch(navigatorClipboardErrorHandler);
 }
@@ -326,12 +279,52 @@ async function loadLargeMessage({
   }
 }
 
+/**
+ * A dropdown menu item for the "Add filter" menu. When `disabledReason` is set the item
+ * renders as a visually-disabled row that shows a tooltip explaining why on hover.
+ *
+ * We deliberately do NOT render a disabled `<DropdownMenuItem>` here: Base UI wraps every
+ * menu item in a `MotionHighlight` layer that keeps intercepting pointer events even when
+ * the item is disabled, so a tooltip attached to a wrapping element never receives hover.
+ * Rendering the disabled state as a plain styled `<span>` (mirroring the menu-item styling)
+ * lets the tooltip trigger receive hover reliably while the row stays non-interactive.
+ */
+const AddFilterMenuItem: FC<{
+  testId: string;
+  disabledReason?: string;
+  onClick: () => void;
+  children: React.ReactNode;
+}> = ({ testId, disabledReason, onClick, children }) => {
+  if (!disabledReason) {
+    return (
+      <DropdownMenuItem data-testid={testId} onClick={onClick}>
+        {children}
+      </DropdownMenuItem>
+    );
+  }
+
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <span
+            aria-disabled
+            className="relative flex cursor-not-allowed select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm opacity-50 [&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:size-4 [&_svg]:shrink-0"
+            data-testid={testId}
+            role="menuitem"
+            tabIndex={-1}
+          >
+            {children}
+          </span>
+        </TooltipTrigger>
+        <TooltipContent side="right">{disabledReason}</TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+};
+
 // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: this is because of the refactoring effort, the scope will be minimised eventually
 export const TopicMessageView: FC<TopicMessageViewProps> = (props) => {
-  const toast = useToast();
-  const toastRef = useRef(toast);
-  toastRef.current = toast;
-
   // Zustand store for topic settings
   const { setSorting, getSorting, setTopicSettings, perTopicSettings, setSearchParams, getSearchParams } =
     useTopicSettingsStore();
@@ -908,13 +901,7 @@ export const TopicMessageView: FC<TopicMessageViewProps> = (props) => {
           (err: unknown) => {
             const shouldReport = isMountedRef.current && !abortController.signal.aborted;
             if (shouldReport) {
-              toastRef.current({
-                title: 'Failed to load more messages',
-                description: (err as Error).message,
-                status: 'error',
-                duration: 5000,
-                isClosable: true,
-              });
+              toast.error('Failed to load more messages', { description: (err as Error).message });
             }
             return { type: 'error' as const, shouldReport };
           }
@@ -1028,8 +1015,8 @@ export const TopicMessageView: FC<TopicMessageViewProps> = (props) => {
   const onSetDownloadMessages = useCallback((nextMessages: TopicMessage[]) => {
     setDownloadMessages(nextMessages);
   }, []);
-  const handleCopyKey = useCallback((msg: TopicMessage) => onCopyKey(msg, toast), [toast]);
-  const handleCopyValue = useCallback((msg: TopicMessage) => onCopyValue(msg, toast), [toast]);
+  const handleCopyKey = useCallback((msg: TopicMessage) => onCopyKey(msg), []);
+  const handleCopyValue = useCallback((msg: TopicMessage) => onCopyValue(msg), []);
 
   const paginationParams = {
     pageIndex: isOnUnloadedPage ? loadedPages - 1 : boundedLocalPageIndex,
@@ -1071,7 +1058,7 @@ export const TopicMessageView: FC<TopicMessageViewProps> = (props) => {
     key: {
       header: () =>
         isKeyDeserializerActive ? (
-          <Flex alignItems="center" display="inline-flex" gap={2}>
+          <div className="inline-flex items-center gap-2">
             Key{' '}
             <button
               onClick={(e) => {
@@ -1082,7 +1069,7 @@ export const TopicMessageView: FC<TopicMessageViewProps> = (props) => {
             >
               <Badge>Deserializer: {PAYLOAD_ENCODING_LABELS[keyDeserializer]}</Badge>
             </button>
-          </Flex>
+          </div>
         ) : (
           'Key'
         ),
@@ -1100,7 +1087,7 @@ export const TopicMessageView: FC<TopicMessageViewProps> = (props) => {
     value: {
       header: () =>
         isValueDeserializerActive ? (
-          <Flex alignItems="center" display="inline-flex" gap={2}>
+          <div className="inline-flex items-center gap-2">
             Value{' '}
             <button
               onClick={(e) => {
@@ -1111,7 +1098,7 @@ export const TopicMessageView: FC<TopicMessageViewProps> = (props) => {
             >
               <Badge>Deserializer: {PAYLOAD_ENCODING_LABELS[valueDeserializer]}</Badge>
             </button>
-          </Flex>
+          </div>
         ) : (
           'Value'
         ),
@@ -1181,56 +1168,52 @@ export const TopicMessageView: FC<TopicMessageViewProps> = (props) => {
       id: 'action',
       size: 0,
       cell: ({ row: { original } }) => (
-        <Menu computePositionOnMount>
-          <MenuButton as={Button} className="iconButton" variant="link">
-            <MoreHorizontalIcon />
-          </MenuButton>
-          <MenuList>
-            <MenuItem
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button className="iconButton" size="icon" variant="ghost">
+              <MoreHorizontalIcon />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent>
+            <DropdownMenuItem
               onClick={() => {
                 navigator.clipboard
                   .writeText(getMessageAsString(original))
                   .then(() => {
-                    toast({
-                      status: 'success',
-                      description: 'Message copied to clipboard',
-                    });
+                    toast.success('Message copied to clipboard');
                   })
                   .catch(navigatorClipboardErrorHandler);
               }}
             >
               Copy Message
-            </MenuItem>
-            <MenuItem isDisabled={original.key.isPayloadNull} onClick={() => onCopyKey(original, toast)}>
+            </DropdownMenuItem>
+            <DropdownMenuItem disabled={original.key.isPayloadNull} onClick={() => onCopyKey(original)}>
               Copy Key
-            </MenuItem>
-            <MenuItem isDisabled={original.value.isPayloadNull} onClick={() => onCopyValue(original, toast)}>
+            </DropdownMenuItem>
+            <DropdownMenuItem disabled={original.value.isPayloadNull} onClick={() => onCopyValue(original)}>
               Copy Value
-            </MenuItem>
-            <MenuItem
+            </DropdownMenuItem>
+            <DropdownMenuItem
               onClick={() => {
                 navigator.clipboard
                   .writeText(original.timestamp.toString())
                   .then(() => {
-                    toast({
-                      status: 'success',
-                      description: 'Epoch Timestamp copied to clipboard',
-                    });
+                    toast.success('Epoch Timestamp copied to clipboard');
                   })
                   .catch(navigatorClipboardErrorHandler);
               }}
             >
               Copy Epoch Timestamp
-            </MenuItem>
-            <MenuItem
+            </DropdownMenuItem>
+            <DropdownMenuItem
               onClick={() => {
                 setDownloadMessages([original]);
               }}
             >
               Save to File
-            </MenuItem>
-          </MenuList>
-        </Menu>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
       ),
     },
   ];
@@ -1241,14 +1224,14 @@ export const TopicMessageView: FC<TopicMessageViewProps> = (props) => {
     enableSorting: false,
     cell: ({ row }) =>
       row.getCanExpand() ? (
-        <RegistryButton
+        <Button
           aria-label={row.getIsExpanded() ? 'Collapse row' : 'Expand row'}
           onClick={row.getToggleExpandedHandler()}
           size="icon-xs"
           variant="ghost"
         >
           {row.getIsExpanded() ? <ChevronDown className="size-4" /> : <ChevronRight className="size-4" />}
-        </RegistryButton>
+        </Button>
       ) : null,
   };
 
@@ -1285,55 +1268,68 @@ export const TopicMessageView: FC<TopicMessageViewProps> = (props) => {
   });
 
   // Search controls derived state
-  const canUseFilters = (topicPermissions?.canUseSearchFilters ?? true) && !isServerless();
+  // Reasons explaining why a filter cannot be added (undefined = enabled).
+  const partitionFilterDisabledReason = dynamicFilters.includes('partition')
+    ? 'Partition filter is already added. Use the existing Partition control to filter, or remove it first.'
+    : undefined;
+  let jsFilterDisabledReason: string | undefined;
+  if (isServerless()) {
+    jsFilterDisabledReason = 'JavaScript filters are not available in Serverless clusters.';
+  } else if (!(topicPermissions?.canUseSearchFilters ?? true)) {
+    jsFilterDisabledReason = "You don't have permission to use search filters on this topic.";
+  } else if (continuousPaginationEnabled) {
+    jsFilterDisabledReason =
+      'JavaScript filters are not available while continuous pagination is enabled. Turn it off to add a filter.';
+  }
+
   const customStartOffsetValid = !Number.isNaN(Number(customStartOffsetValue));
 
   const startOffsetOptions = [
     {
       value: PartitionOffsetOrigin.End,
       label: (
-        <Flex alignItems="center" gap={2}>
+        <div className="flex items-center gap-2">
           <PlayIcon />
           <span data-testid="start-offset-latest-live">Latest / Live</span>
-        </Flex>
+        </div>
       ),
     },
     {
       value: PartitionOffsetOrigin.EndMinusResults,
       label: (
-        <Flex alignItems="center" gap={2}>
+        <div className="flex items-center gap-2">
           <ReplyIcon />
           <span data-testid="start-offset-newest">
             {continuousPaginationEnabled ? 'Newest' : `Newest - ${String(maxResults)}`}
           </span>
-        </Flex>
+        </div>
       ),
     },
     {
       value: PartitionOffsetOrigin.Start,
       label: (
-        <Flex alignItems="center" gap={2}>
+        <div className="flex items-center gap-2">
           <SkipBackIcon />
           <span data-testid="start-offset-beginning">Beginning</span>
-        </Flex>
+        </div>
       ),
     },
     {
       value: PartitionOffsetOrigin.Custom,
       label: (
-        <Flex alignItems="center" gap={2}>
+        <div className="flex items-center gap-2">
           <TabIcon />
           <span data-testid="start-offset-custom">Offset</span>
-        </Flex>
+        </div>
       ),
     },
     {
       value: PartitionOffsetOrigin.Timestamp,
       label: (
-        <Flex alignItems="center" gap={2}>
+        <div className="flex items-center gap-2">
           <CalendarIcon />
           <span data-testid="start-offset-timestamp">Timestamp</span>
-        </Flex>
+        </div>
       ),
     },
   ];
@@ -1349,14 +1345,13 @@ export const TopicMessageView: FC<TopicMessageViewProps> = (props) => {
   // Return JSX for the component
   return (
     <>
-      <Grid gap={3} gridTemplateColumns="auto 1fr" my={4} width="full">
-        <GridItem display="flex" gap={3} gridColumn={{ base: '1/-1', md: '1' }}>
+      <div className="my-4 grid w-full grid-cols-[auto_1fr] gap-3">
+        <div className="col-span-full flex gap-3 md:col-auto">
           <Label text="Start Offset">
-            <Flex gap={3}>
-              <SingleSelect<PartitionOffsetOriginType>
-                chakraStyles={defaultSelectChakraStyles}
-                data-testid="start-offset-dropdown"
-                onChange={(e) => {
+            <div className="flex gap-3">
+              <Select
+                onValueChange={(val) => {
+                  const e = Number(val) as PartitionOffsetOriginType;
                   if (e === PartitionOffsetOrigin.Custom) {
                     if (startOffset < 0) {
                       setStartOffset(0);
@@ -1385,24 +1380,41 @@ export const TopicMessageView: FC<TopicMessageViewProps> = (props) => {
                     setStartTimestamp(null);
                   }
                 }}
-                options={startOffsetOptions}
-                value={currentOffsetOrigin}
-              />
+                value={String(currentOffsetOrigin)}
+              >
+                <SelectTrigger testId="start-offset-dropdown">
+                  <SelectValue>
+                    {(value: unknown) => startOffsetOptions.find((o) => String(o.value) === String(value))?.label}
+                  </SelectValue>
+                </SelectTrigger>
+                <SelectContent>
+                  {startOffsetOptions.map((opt) => (
+                    <SelectItem key={opt.value} value={String(opt.value)}>
+                      {opt.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
               {currentOffsetOrigin === PartitionOffsetOrigin.Custom && (
-                <Tooltip hasArrow isOpen={!customStartOffsetValid} label="Offset must be a number" placement="right">
-                  <Input
-                    isDisabled={currentOffsetOrigin !== PartitionOffsetOrigin.Custom}
-                    maxLength={20}
-                    onChange={(e) => {
-                      setCustomStartOffsetValue(e.target.value);
-                      if (!Number.isNaN(Number(e.target.value))) {
-                        setStartOffset(Number(e.target.value));
-                      }
-                    }}
-                    style={{ width: '7.5em' }}
-                    value={customStartOffsetValue}
-                  />
-                </Tooltip>
+                <TooltipProvider>
+                  <Tooltip open={!customStartOffsetValid}>
+                    <TooltipTrigger asChild>
+                      <Input
+                        disabled={currentOffsetOrigin !== PartitionOffsetOrigin.Custom}
+                        maxLength={20}
+                        onChange={(e) => {
+                          setCustomStartOffsetValue(e.target.value);
+                          if (!Number.isNaN(Number(e.target.value))) {
+                            setStartOffset(Number(e.target.value));
+                          }
+                        }}
+                        style={{ width: '7.5em' }}
+                        value={customStartOffsetValue}
+                      />
+                    </TooltipTrigger>
+                    <TooltipContent side="right">Offset must be a number</TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
               )}
               {currentOffsetOrigin === PartitionOffsetOrigin.Timestamp && (
                 <StartOffsetDateTimePicker
@@ -1411,25 +1423,33 @@ export const TopicMessageView: FC<TopicMessageViewProps> = (props) => {
                   value={startTimestamp}
                 />
               )}
-            </Flex>
+            </div>
           </Label>
 
           <Label text="Max Results">
-            <SingleSelect<number>
+            <Select
               data-testid="max-results-select"
-              onChange={(c) => {
-                setMaxResults(c);
-              }}
-              options={[...[1, 3, 5, 10, 20, 50, 100, 200, 500, 1000, 10_000].map((i) => ({ value: i }))]}
-              value={maxResults}
-            />
+              onValueChange={(val) => setMaxResults(Number(val))}
+              value={String(maxResults)}
+            >
+              <SelectTrigger>
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {[1, 3, 5, 10, 20, 50, 100, 200, 500, 1000, 10_000].map((i) => (
+                  <SelectItem key={i} value={String(i)}>
+                    {i.toLocaleString()}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
           </Label>
 
           <Label
             style={{}}
             text="Continuous Pagination"
             textSuffix={
-              <RegistryTooltip>
+              <Tooltip>
                 <TooltipTrigger asChild>
                   <span style={{ display: 'inline-flex', verticalAlign: 'text-top', cursor: 'pointer' }}>
                     <InfoIcon size={11} />
@@ -1440,15 +1460,15 @@ export const TopicMessageView: FC<TopicMessageViewProps> = (props) => {
                     ? 'Continuous pagination is only available with Newest or Beginning start offsets'
                     : 'Continuously load more messages as you page forward through the topic. Only the most recent pages are kept in memory.'}
                 </TooltipContent>
-              </RegistryTooltip>
+              </Tooltip>
             }
           >
             <div style={{ flex: 1, display: 'flex', alignItems: 'center' }}>
               <Switch
+                checked={continuousPaginationEnabled}
                 data-testid="continuous-pagination-toggle"
-                isChecked={continuousPaginationEnabled}
-                isDisabled={continuousPaginationDisabled}
-                onChange={(e) => setContinuousPaginationEnabled(e.target.checked)}
+                disabled={continuousPaginationDisabled}
+                onCheckedChange={(checked) => setContinuousPaginationEnabled(checked)}
               />
             </div>
           </Label>
@@ -1464,59 +1484,56 @@ export const TopicMessageView: FC<TopicMessageViewProps> = (props) => {
                         setPartitionID(DEFAULT_SEARCH_PARAMS.partitionID);
                       }}
                     >
-                      <SingleSelect<number>
-                        chakraStyles={inlineSelectChakraStyles}
-                        onChange={(c) => {
-                          setPartitionID(c);
-                        }}
-                        options={[
-                          {
-                            value: -1,
-                            label: 'All',
-                          },
-                        ].concat(
-                          range(0, props.topic.partitionCount).map((i) => ({
-                            value: i,
-                            label: String(i),
-                          }))
-                        )}
-                        value={partitionID}
-                      />
+                      <Select onValueChange={(val) => setPartitionID(Number(val))} value={String(partitionID)}>
+                        <SelectTrigger>
+                          <SelectValue>
+                            {(value: unknown) => (String(value) === '-1' ? 'All' : String(value))}
+                          </SelectValue>
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="-1">All</SelectItem>
+                          {range(0, props.topic.partitionCount).map((i) => (
+                            <SelectItem key={i} value={String(i)}>
+                              {i}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
                     </RemovableFilter>
                   </Label>
                 ),
               })[filter]
           )}
 
-          <Flex alignItems="flex-end">
-            <Menu>
-              <MenuButton as={Button} data-testid="add-topic-filter" variant="outline">
-                Add filter
-              </MenuButton>
-              <MenuList>
-                <MenuItem
-                  data-testid="add-topic-filter-partition"
-                  icon={<LayersIcon size="1.5rem" />}
-                  isDisabled={dynamicFilters.includes('partition')}
+          <div className="flex items-end">
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button data-testid="add-topic-filter" variant="outline">
+                  Add filter
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent>
+                <AddFilterMenuItem
+                  disabledReason={partitionFilterDisabledReason}
                   onClick={() => addDynamicFilter('partition')}
+                  testId="add-topic-filter-partition"
                 >
-                  Partition
-                </MenuItem>
-                <MenuDivider />
-                <MenuItem
-                  data-testid="add-topic-filter-javascript"
-                  icon={<CodeIcon size="1.5rem" />}
-                  isDisabled={!canUseFilters}
+                  <LayersIcon size="1.5rem" /> Partition
+                </AddFilterMenuItem>
+                <DropdownMenuSeparator />
+                <AddFilterMenuItem
+                  disabledReason={jsFilterDisabledReason}
                   onClick={() => {
                     const filter = createFilterEntry();
                     setCurrentJSFilter(filter);
                   }}
+                  testId="add-topic-filter-javascript"
                 >
-                  JavaScript Filter
-                </MenuItem>
-              </MenuList>
-            </Menu>
-          </Flex>
+                  <CodeIcon size="1.5rem" /> JavaScript Filter
+                </AddFilterMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
 
           {/* Search Progress Indicator: "Consuming Messages 30/30" */}
           {Boolean(searchPhase && searchPhase.length > 0) && (
@@ -1534,74 +1551,77 @@ export const TopicMessageView: FC<TopicMessageViewProps> = (props) => {
               statusText={searchPhase!}
             />
           )}
-        </GridItem>
-
-        <GridItem alignItems="flex-end" display="flex" gap={3} justifyContent="flex-end">
-          <Menu>
-            <MenuButton
-              as={IconButton}
-              data-testid="message-settings-button"
-              icon={<SettingsIcon size="1.5rem" />}
-              variant="outline"
-            />
-            <MenuList>
-              <MenuItem
+        </div>
+
+        <div className="flex items-end justify-end gap-3">
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button data-testid="message-settings-button" size="icon" variant="outline">
+                <SettingsIcon size="1.5rem" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent>
+              <DropdownMenuItem
                 data-testid="deserialization-settings-menu-item"
-                onClick={() => {
-                  setShowDeserializersModal(true);
-                }}
+                onClick={() => setShowDeserializersModal(true)}
               >
                 Deserialization
-              </MenuItem>
-              <MenuItem
+              </DropdownMenuItem>
+              <DropdownMenuItem
                 data-testid="column-settings-menu-item"
-                onClick={() => {
-                  setShowColumnSettingsModal(true);
-                }}
+                onClick={() => setShowColumnSettingsModal(true)}
               >
                 Column settings
-              </MenuItem>
-              <MenuItem
-                data-testid="preview-fields-menu-item"
-                onClick={() => {
-                  setShowPreviewFieldsModal(true);
-                }}
-              >
+              </DropdownMenuItem>
+              <DropdownMenuItem data-testid="preview-fields-menu-item" onClick={() => setShowPreviewFieldsModal(true)}>
                 Preview fields
-              </MenuItem>
-            </MenuList>
-          </Menu>
-          <Flex alignItems="flex-end">
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+          <div className="flex items-end">
             {/* Refresh Button */}
             {searchPhase === null && (
-              <Tooltip hasArrow label="Repeat current search" placement="top">
-                <IconButton
-                  aria-label="Repeat current search"
-                  data-testid="refresh-messages-button"
-                  icon={<RefreshIcon />}
-                  onClick={() => searchFunc('manual')}
-                  variant="outline"
-                />
-              </Tooltip>
+              <TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button
+                      aria-label="Repeat current search"
+                      data-testid="refresh-messages-button"
+                      onClick={() => searchFunc('manual')}
+                      size="icon"
+                      variant="outline"
+                    >
+                      <RefreshIcon />
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent side="top">Repeat current search</TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
             )}
             {searchPhase !== null && (
-              <Tooltip hasArrow label="Stop searching" placement="top">
-                <IconButton
-                  aria-label="Stop searching"
-                  colorScheme="red"
-                  data-testid="stop-search-button"
-                  icon={<ErrorIcon />}
-                  onClick={() => {
-                    if (abortControllerRef.current) {
-                      abortControllerRef.current.abort();
-                    }
-                  }}
-                  variant="solid"
-                />
-              </Tooltip>
+              <TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button
+                      aria-label="Stop searching"
+                      data-testid="stop-search-button"
+                      onClick={() => {
+                        if (abortControllerRef.current) {
+                          abortControllerRef.current.abort();
+                        }
+                      }}
+                      size="icon"
+                      variant="destructive"
+                    >
+                      <ErrorIcon />
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent side="top">Stop searching</TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
             )}
-          </Flex>
-        </GridItem>
+          </div>
+        </div>
 
         {/* Filter Tags */}
         <MessageSearchFilterBar
@@ -1617,26 +1637,26 @@ export const TopicMessageView: FC<TopicMessageViewProps> = (props) => {
           }}
         />
 
-        <GridItem display="flex" gap={4} gridColumn="1/-1" mt={4}>
+        <div className="col-span-full mt-4 flex gap-4">
           {/* Quick Search */}
           <Input
+            className="px-4"
             data-testid="message-quick-search-input"
             onChange={(x) => {
               setQuickSearch(x.target.value);
             }}
             placeholder="Filter table content ..."
-            px={4}
             value={quickSearch}
           />
-          <Flex alignItems="center" fontSize="sm" gap={2} whiteSpace="nowrap">
+          <div className="flex items-end gap-2 whitespace-nowrap text-sm">
             {searchPhase === null || searchPhase === 'Done' ? (
               <>
-                <Flex alignItems="center" gap={2}>
+                <div className="flex items-center gap-2">
                   <DownloadIcon size={14} /> {prettyBytes(bytesConsumed)}
-                </Flex>
-                <Flex alignItems="center" gap={2}>
+                </div>
+                <div className="flex items-center gap-2">
                   <TimerIcon size={14} /> {elapsedMs ? prettyMilliseconds(elapsedMs) : ''}
-                </Flex>
+                </div>
               </>
             ) : (
               <>
@@ -1644,9 +1664,9 @@ export const TopicMessageView: FC<TopicMessageViewProps> = (props) => {
                 <span className="pulsating">Fetching data...</span>
               </>
             )}
-          </Flex>
-        </GridItem>
-      </Grid>
+          </div>
+        </div>
+      </div>
 
       {currentJSFilter ? (
         <JavascriptFilterModal
@@ -1669,22 +1689,17 @@ export const TopicMessageView: FC<TopicMessageViewProps> = (props) => {
 
       {/* Message Table (or error display) */}
       {fetchError ? (
-        <Alert status="error">
-          <Box alignSelf="flex-start">
-            <AlertIcon />
-          </Box>
-          <Box>
-            <AlertTitle>Backend Error</AlertTitle>
-            <AlertDescription>
-              <Box>Check and modify the request before resubmitting.</Box>
-              <Box mt="4">
-                <div className="codeBox">{(fetchError as Error).message ?? String(fetchError)}</div>
-              </Box>
-              <Button mt="4" onClick={() => executeMessageSearch()}>
-                Retry Search
-              </Button>
-            </AlertDescription>
-          </Box>
+        <Alert icon={<ErrorIcon />} variant="destructive">
+          <AlertTitle>Backend Error</AlertTitle>
+          <AlertDescription>
+            <div>Check and modify the request before resubmitting.</div>
+            <div className="mt-4">
+              <div className="codeBox">{(fetchError as Error).message ?? String(fetchError)}</div>
+            </div>
+            <Button className="mt-4" onClick={() => executeMessageSearch()}>
+              Retry Search
+            </Button>
+          </AlertDescription>
         </Alert>
       ) : (
         <>
@@ -1714,7 +1729,7 @@ export const TopicMessageView: FC<TopicMessageViewProps> = (props) => {
                     return (
                       <TableRow>
                         <TableCell className="py-10 text-center" colSpan={table.getVisibleFlatColumns().length}>
-                          <Spinner size="md" />
+                          <Spinner />
                         </TableCell>
                       </TableRow>
                     );
@@ -1784,7 +1799,7 @@ export const TopicMessageView: FC<TopicMessageViewProps> = (props) => {
                 {/* Rows per page selector */}
                 <div className="flex items-center space-x-2">
                   <p className="font-medium text-sm">Rows per page</p>
-                  <RegistrySelect
+                  <Select
                     onValueChange={(value) => {
                       const newSize = Number(value);
                       uiState.topicSettings.searchParams.pageSize = newSize;
@@ -1802,12 +1817,12 @@ export const TopicMessageView: FC<TopicMessageViewProps> = (props) => {
                         </SelectItem>
                       ))}
                     </SelectContent>
-                  </RegistrySelect>
+                  </Select>
                 </div>
 
                 {/* Navigation buttons */}
                 <div className="flex items-center space-x-2">
-                  <RegistryButton
+                  <Button
                     className="hidden size-8 lg:flex"
                     disabled={pageIndex === 0}
                     onClick={() => setPageIndex(0)}
@@ -1816,9 +1831,9 @@ export const TopicMessageView: FC<TopicMessageViewProps> = (props) => {
                   >
                     <span className="sr-only">Go to first page</span>
                     <ChevronsLeft />
-                  </RegistryButton>
+                  </Button>
 
-                  <RegistryButton
+                  <Button
                     className="size-8"
                     disabled={localPageIndex === 0}
                     onClick={() => setPageIndex(Math.max(0, pageIndex - 1))}
@@ -1827,9 +1842,9 @@ export const TopicMessageView: FC<TopicMessageViewProps> = (props) => {
                   >
                     <span className="sr-only">Go to previous page</span>
                     <ChevronLeft />
-                  </RegistryButton>
+                  </Button>
 
-                  <RegistryButton
+                  <Button
                     className="size-8"
                     disabled={boundedLocalPageIndex >= loadedPages - 1 && !hasMoreData}
                     onClick={() => setPageIndex((prev) => (prev ?? 0) + 1)}
@@ -1838,12 +1853,12 @@ export const TopicMessageView: FC<TopicMessageViewProps> = (props) => {
                   >
                     <span className="sr-only">Go to next page</span>
                     <ChevronRight />
-                  </RegistryButton>
+                  </Button>
 
-                  <RegistryButton className="hidden size-8 lg:flex" disabled size="icon" variant="outline">
+                  <Button className="hidden size-8 lg:flex" disabled size="icon" variant="outline">
                     <span className="sr-only">Go to last page</span>
                     <ChevronsRight />
-                  </RegistryButton>
+                  </Button>
                 </div>
               </div>
             </div>
@@ -1851,19 +1866,18 @@ export const TopicMessageView: FC<TopicMessageViewProps> = (props) => {
 
           {/* Virtual page indicator for continuous pagination mode */}
           {continuousPaginationEnabled && messages.length > 0 && (
-            <Flex align="center" className="text-muted-foreground text-sm" gap={2} justify="center" mt={2}>
+            <div className="mt-2 flex items-center justify-center gap-2 text-muted-foreground text-sm">
               <span>
                 Loaded messages {virtualStartIndex + 1}-{virtualStartIndex + messages.length}
                 {` (pages ${windowStartPage + 1}–${windowStartPage + loadedPages} in memory)`}
                 {messageSearch?.nextPageToken ? ' · more available' : ''}
               </span>
-            </Flex>
+            </div>
           )}
 
           {/* Warning when filters are active with continuous pagination */}
           {continuousPaginationEnabled && filters.length > 0 && messages.length > 0 && (
-            <Alert mt={4} status="info">
-              <AlertIcon />
+            <Alert className="mt-4">
               <AlertDescription>
                 Auto-pagination is disabled when filters are active. Remove filters to enable automatic loading.
               </AlertDescription>
@@ -1874,14 +1888,14 @@ export const TopicMessageView: FC<TopicMessageViewProps> = (props) => {
           <div
             className={`mt-4 flex h-6 items-center justify-center ${continuousPaginationEnabled && showLoadingIndicator ? 'visible' : 'invisible'}`}
           >
-            <Spinner mr={2} size="sm" />
+            <Spinner className="mr-2" />
             <span>Loading more messages...</span>
           </div>
 
           <Button
+            className="mt-4"
             data-testid="save-messages-button"
-            isDisabled={messages.length === 0}
-            mt={4}
+            disabled={messages.length === 0}
             onClick={() => {
               setDownloadMessages(messages);
             }}
diff --git a/frontend/src/components/pages/topics/Tab.Messages/javascript-filter-modal.tsx b/frontend/src/components/pages/topics/Tab.Messages/javascript-filter-modal.tsx
index 8b01d9ddad..31613323a9 100644
--- a/frontend/src/components/pages/topics/Tab.Messages/javascript-filter-modal.tsx
+++ b/frontend/src/components/pages/topics/Tab.Messages/javascript-filter-modal.tsx
@@ -1,22 +1,26 @@
+/**
+ * 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 'components/redpanda-ui/components/button';
 import {
-  Box,
-  Button,
-  Code,
-  FormField,
-  Grid,
-  GridItem,
-  Heading,
-  Input,
-  ListItem,
-  Modal,
-  ModalBody,
-  ModalContent,
-  ModalFooter,
-  ModalHeader,
-  ModalOverlay,
-  Text,
-  UnorderedList,
-} from '@redpanda-data/ui';
+  Dialog,
+  DialogBody,
+  DialogContent,
+  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 { Heading, InlineCode, List, ListItem, Text } from 'components/redpanda-ui/components/typography';
 import type { FC } from 'react';
 import { useState } from 'react';
 
@@ -31,82 +35,94 @@ const JavascriptFilterModal: FC<{
   const [filter, setFilter] = useState<FilterEntry>({ ...currentFilter });
 
   return (
-    <Modal isOpen onClose={onClose}>
-      <ModalOverlay />
-      <ModalContent minW="4xl">
-        <ModalHeader>JavaScript filtering</ModalHeader>
-        <ModalBody>
-          <Text mb={4}>Write JavaScript code to filter your records.</Text>
-          <Grid gap={6} templateColumns={{ base: '1fr', md: '3fr 2fr' }}>
-            <GridItem>
-              <FormField label="Filter display name">
-                <Input
-                  data-testid="add-javascript-filter-name"
-                  onChange={(e) => {
-                    setFilter((prev) => ({ ...prev, name: e.target.value }));
+    <Dialog
+      onOpenChange={(open) => {
+        if (!open) {
+          onClose();
+        }
+      }}
+      open
+    >
+      <DialogContent size="xl">
+        <DialogHeader>
+          <DialogTitle>JavaScript filtering</DialogTitle>
+        </DialogHeader>
+        <DialogBody spacing="lg">
+          <Text variant="muted">Write JavaScript code to filter your records.</Text>
+
+          <div className="flex flex-col gap-1.5">
+            <Label htmlFor="add-javascript-filter-name">Filter display name</Label>
+            <Input
+              data-testid="add-javascript-filter-name"
+              id="add-javascript-filter-name"
+              onChange={(e) => {
+                setFilter((prev) => ({ ...prev, name: e.target.value }));
+              }}
+              placeholder="This name will appear in the filter bar"
+              value={filter.name}
+            />
+          </div>
+
+          <div className="grid grid-cols-1 gap-6 md:grid-cols-[3fr_2fr]">
+            <div className="flex flex-col gap-3">
+              <Label htmlFor="add-javascript-filter-code">Filter code</Label>
+              <div className="overflow-hidden rounded-md border">
+                <FilterEditor
+                  data-testid="add-javascript-filter-code"
+                  onValueChange={(code, transpiled) => {
+                    setFilter((prev) => ({ ...prev, code, transpiledCode: transpiled }));
                   }}
-                  placeholder="This name will appear in the filter bar"
-                  value={filter.name}
+                  value={filter.code}
                 />
-              </FormField>
-            </GridItem>
-            <GridItem />
-            <GridItem display="flex" flexDirection="column" gap={4}>
-              <FormField label="Filter code">
-                <Box borderRadius={20}>
-                  <FilterEditor
-                    data-testid="add-javascript-filter-code"
-                    onValueChange={(code, transpiled) => {
-                      setFilter((prev) => ({ ...prev, code, transpiledCode: transpiled }));
-                    }}
-                    value={filter.code}
-                  />
-                </Box>
-              </FormField>
+              </div>
 
-              <UnorderedList>
-                <ListItem>return true allows messages, return false discards them.</ListItem>
+              <List>
                 <ListItem>
-                  Available params are <Code>offset</Code>, <Code>partitionID</Code> (number), <Code>key</Code> (any),{' '}
-                  <Code>value</Code> (any), and <Code>headers</Code> (object), <Code>keySchemaID</Code> (number) and{' '}
-                  <Code>valueSchemaID</Code> (number)
+                  <InlineCode>return true</InlineCode> allows messages, <InlineCode>return false</InlineCode> discards
+                  them.
+                </ListItem>
+                <ListItem>
+                  Available params are <InlineCode>offset</InlineCode>, <InlineCode>partitionID</InlineCode> (number),{' '}
+                  <InlineCode>key</InlineCode> (any), <InlineCode>value</InlineCode> (any),{' '}
+                  <InlineCode>headers</InlineCode> (object), <InlineCode>keySchemaID</InlineCode> (number) and{' '}
+                  <InlineCode>valueSchemaID</InlineCode> (number).
                 </ListItem>
                 <ListItem>Multiple active filters are combined with 'and'.</ListItem>
-              </UnorderedList>
-            </GridItem>
-            <GridItem>
-              <Heading mb={6}>Examples</Heading>
-              <UnorderedList margin={0} spacing={4} styleType="none">
+              </List>
+            </div>
+
+            <div className="flex flex-col gap-3">
+              <Heading as="h3" level={4}>
+                Examples
+              </Heading>
+              <List>
                 <ListItem>
-                  <Code>value != null</Code> skips records without value
+                  <InlineCode>value != null</InlineCode> skips records without value.
                 </ListItem>
                 <ListItem>
-                  <Code>if (key == 'example') return true</Code>
-                  only returns messages where keys equal <Code>'example'</Code> in their string presentation (after
-                  decoding)
+                  <InlineCode>if (key == 'example') return true</InlineCode> only returns messages where keys equal{' '}
+                  <InlineCode>'example'</InlineCode> in their string presentation (after decoding).
                 </ListItem>
-              </UnorderedList>
-            </GridItem>
-          </Grid>
-        </ModalBody>
-        <ModalFooter>
-          <Box alignItems="center" display="flex" gap={2} justifyContent="flex-end">
-            <Button data-testid="add-javascript-filter-close" onClick={() => onClose()} variant="outline">
-              Close
-            </Button>
-            <Button
-              data-testid="add-javascript-filter-save"
-              onClick={() => {
-                onSave(filter);
-                onClose();
-              }}
-            >
-              Save
-            </Button>
-          </Box>
-        </ModalFooter>
-      </ModalContent>
-    </Modal>
+              </List>
+            </div>
+          </div>
+        </DialogBody>
+        <DialogFooter>
+          <Button data-testid="add-javascript-filter-close" onClick={() => onClose()} variant="outline">
+            Close
+          </Button>
+          <Button
+            data-testid="add-javascript-filter-save"
+            onClick={() => {
+              onSave(filter);
+              onClose();
+            }}
+          >
+            Save
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
   );
 };
 
diff --git a/frontend/src/components/pages/topics/Tab.Messages/message-display/expanded-message.tsx b/frontend/src/components/pages/topics/Tab.Messages/message-display/expanded-message.tsx
index 40411b0dab..50793d651f 100644
--- a/frontend/src/components/pages/topics/Tab.Messages/message-display/expanded-message.tsx
+++ b/frontend/src/components/pages/topics/Tab.Messages/message-display/expanded-message.tsx
@@ -9,7 +9,6 @@
  * by the Apache License, Version 2.0
  */
 
-import { Box, Button, Flex, Tabs as RpTabs, useColorModeValue } from '@redpanda-data/ui';
 import React, { type FC, type ReactNode, useCallback } from 'react';
 
 import { MessageHeaders } from './message-headers';
@@ -18,19 +17,21 @@ import { PayloadComponent } from './payload-component';
 import { TroubleshootReportViewer } from './troubleshoot-report-viewer';
 import type { TopicMessage } from '../../../../../state/rest-interfaces';
 import { prettyBytes } from '../../../../../utils/utils';
+import { Button } from '../../../../redpanda-ui/components/button';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '../../../../redpanda-ui/components/tabs';
 
 const ExpandedMessageFooter: FC<{ children?: ReactNode; onDownloadRecord?: () => void }> = ({
   children,
   onDownloadRecord,
 }) => (
-  <Flex gap={2} my={4} style={{ justifyContent: 'flex-end' }}>
+  <div className="my-4 flex justify-end gap-2">
     {children}
     {Boolean(onDownloadRecord) && (
       <Button onClick={onDownloadRecord} variant="outline">
         Download Record
       </Button>
     )}
-  </Flex>
+  </div>
 );
 
 type ExpandedMessageProps = {
@@ -55,7 +56,6 @@ export const ExpandedMessage: FC<ExpandedMessageProps> = React.memo(
     onCopyKey,
     onCopyValue,
   }) => {
-    const bg = useColorModeValue('gray.50', 'gray.600');
     const handleLoadLargeMessage = useCallback(
       () =>
         onLoadLargeMessage && topicName !== undefined
@@ -78,74 +78,50 @@ export const ExpandedMessage: FC<ExpandedMessageProps> = React.memo(
     }, [msg, onCopyValue]);
 
     return (
-      <Box bg={bg} px={10} py={6}>
+      <div className="bg-muted/30 px-10 py-6">
         <MessageMetaData msg={msg} />
-        <RpTabs
-          defaultIndex={1}
-          isFitted
-          items={[
-            {
-              key: 'key',
-              name: (
-                <Box minWidth="6rem">
-                  {msg.key === null || msg.key.size === 0 ? 'Key' : `Key (${prettyBytes(msg.key.size)})`}
-                </Box>
-              ),
-              isDisabled: msg.key === null || msg.key.size === 0,
-              component: (
-                <Box>
-                  <TroubleshootReportViewer payload={msg.key} />
-                  <PayloadComponent loadLargeMessage={handleLoadLargeMessage} payload={msg.key} />
-                  <ExpandedMessageFooter onDownloadRecord={handleDownloadRecord}>
-                    {onCopyKey ? (
-                      <Button isDisabled={msg.key.isPayloadNull} onClick={handleCopyKey} variant="outline">
-                        Copy Key
-                      </Button>
-                    ) : null}
-                  </ExpandedMessageFooter>
-                </Box>
-              ),
-            },
-            {
-              key: 'value',
-              name: (
-                <Box minWidth="6rem">
-                  {msg.value === null || msg.value.size === 0 ? 'Value' : `Value (${prettyBytes(msg.value.size)})`}
-                </Box>
-              ),
-              component: (
-                <Box>
-                  <TroubleshootReportViewer payload={msg.value} />
-                  <PayloadComponent loadLargeMessage={handleLoadLargeMessage} payload={msg.value} />
-                  <ExpandedMessageFooter onDownloadRecord={handleDownloadRecord}>
-                    {onCopyValue ? (
-                      <Button isDisabled={msg.value.isPayloadNull} onClick={handleCopyValue} variant="outline">
-                        Copy Value
-                      </Button>
-                    ) : null}
-                  </ExpandedMessageFooter>
-                </Box>
-              ),
-            },
-            {
-              key: 'headers',
-              name: (
-                <Box minWidth="6rem">{msg.headers.length === 0 ? 'Headers' : `Headers (${msg.headers.length})`}</Box>
-              ),
-              isDisabled: msg.headers.length === 0,
-              component: (
-                <Box>
-                  <MessageHeaders msg={msg} />
-                  {onSetDownloadMessages || onDownloadRecord ? (
-                    <ExpandedMessageFooter onDownloadRecord={handleDownloadRecord} />
-                  ) : null}
-                </Box>
-              ),
-            },
-          ]}
-          variant="fitted"
-        />
-      </Box>
+        <Tabs defaultValue="value">
+          <TabsList className="w-full" columns={3} layout="equal">
+            <TabsTrigger disabled={msg.key === null || msg.key.size === 0} value="key">
+              {msg.key === null || msg.key.size === 0 ? 'Key' : `Key (${prettyBytes(msg.key.size)})`}
+            </TabsTrigger>
+            <TabsTrigger value="value">
+              {msg.value === null || msg.value.size === 0 ? 'Value' : `Value (${prettyBytes(msg.value.size)})`}
+            </TabsTrigger>
+            <TabsTrigger disabled={msg.headers.length === 0} value="headers">
+              {msg.headers.length === 0 ? 'Headers' : `Headers (${msg.headers.length})`}
+            </TabsTrigger>
+          </TabsList>
+          <TabsContent value="key">
+            <TroubleshootReportViewer payload={msg.key} />
+            <PayloadComponent loadLargeMessage={handleLoadLargeMessage} payload={msg.key} />
+            <ExpandedMessageFooter onDownloadRecord={handleDownloadRecord}>
+              {onCopyKey ? (
+                <Button disabled={msg.key.isPayloadNull} onClick={handleCopyKey} variant="outline">
+                  Copy Key
+                </Button>
+              ) : null}
+            </ExpandedMessageFooter>
+          </TabsContent>
+          <TabsContent value="value">
+            <TroubleshootReportViewer payload={msg.value} />
+            <PayloadComponent loadLargeMessage={handleLoadLargeMessage} payload={msg.value} />
+            <ExpandedMessageFooter onDownloadRecord={handleDownloadRecord}>
+              {onCopyValue ? (
+                <Button disabled={msg.value.isPayloadNull} onClick={handleCopyValue} variant="outline">
+                  Copy Value
+                </Button>
+              ) : null}
+            </ExpandedMessageFooter>
+          </TabsContent>
+          <TabsContent value="headers">
+            <MessageHeaders msg={msg} />
+            {onSetDownloadMessages || onDownloadRecord ? (
+              <ExpandedMessageFooter onDownloadRecord={handleDownloadRecord} />
+            ) : null}
+          </TabsContent>
+        </Tabs>
+      </div>
     );
   }
 );
diff --git a/frontend/src/components/pages/topics/Tab.Messages/message-display/message-headers.tsx b/frontend/src/components/pages/topics/Tab.Messages/message-display/message-headers.tsx
index 1403a16a6e..fc74075518 100644
--- a/frontend/src/components/pages/topics/Tab.Messages/message-display/message-headers.tsx
+++ b/frontend/src/components/pages/topics/Tab.Messages/message-display/message-headers.tsx
@@ -9,11 +9,10 @@
  * by the Apache License, Version 2.0
  */
 
-import { Box, DataTable } from '@redpanda-data/ui';
-
 import type { Payload, TopicMessage } from '../../../../../state/rest-interfaces';
 import { Ellipsis, toSafeString } from '../../../../../utils/tsx-utils';
 import { KowlJsonView } from '../../../../misc/kowl-json-view';
+import { DataTable } from '../../../../redpanda-ui/components/data-table';
 import { renderEmptyIcon } from '../common/empty-icon';
 
 export const MessageHeaders = (props: { msg: TopicMessage }) => {
@@ -78,7 +77,7 @@ export const MessageHeaders = (props: { msg: TopicMessage }) => {
           pagination
           sorting
           subComponent={({ row: { original: header } }) => (
-            <Box px={10} py={6}>
+            <div className="px-10 py-6">
               {typeof header.value?.payload !== 'object' ? (
                 <div className="codeBox" style={{ margin: '0', width: '100%' }}>
                   {toSafeString(header.value.payload)}
@@ -86,7 +85,7 @@ export const MessageHeaders = (props: { msg: TopicMessage }) => {
               ) : (
                 <KowlJsonView srcObj={header.value.payload as object} style={{ margin: '2em 0' }} />
               )}
-            </Box>
+            </div>
           )}
         />
       </div>
diff --git a/frontend/src/components/pages/topics/Tab.Messages/message-display/message-meta-data.tsx b/frontend/src/components/pages/topics/Tab.Messages/message-display/message-meta-data.tsx
index 1c3813051b..b6e4de8854 100644
--- a/frontend/src/components/pages/topics/Tab.Messages/message-display/message-meta-data.tsx
+++ b/frontend/src/components/pages/topics/Tab.Messages/message-display/message-meta-data.tsx
@@ -9,13 +9,13 @@
  * by the Apache License, Version 2.0
  */
 
-import { Flex, Text } from '@redpanda-data/ui';
-import React from 'react';
+import type React from 'react';
 
 import { MessageSchema } from './message-schema';
 import type { TopicMessage } from '../../../../../state/rest-interfaces';
 import { numberToThousandsString } from '../../../../../utils/tsx-utils';
 import { prettyBytes, titleCase } from '../../../../../utils/utils';
+import { Text } from '../../../../redpanda-ui/components/typography';
 
 export const MessageMetaData = (props: { msg: TopicMessage }) => {
   const msg = props.msg;
@@ -36,17 +36,13 @@ export const MessageMetaData = (props: { msg: TopicMessage }) => {
   }
 
   return (
-    <Flex gap={10} my={6}>
+    <div className="my-6 flex gap-10">
       {Object.entries(data).map(([k, v]) => (
-        <Flex direction="column" key={k} rowGap=".4em">
-          <Text fontSize="md" fontWeight="600">
-            {k}
-          </Text>
-          <Text color="" fontSize="sm">
-            {v}
-          </Text>
-        </Flex>
+        <div className="flex flex-col gap-[0.4em]" key={k}>
+          <Text className="font-semibold text-base">{k}</Text>
+          <Text className="text-sm">{v}</Text>
+        </div>
       ))}
-    </Flex>
+    </div>
   );
 };
diff --git a/frontend/src/components/pages/topics/Tab.Messages/message-display/payload-component.tsx b/frontend/src/components/pages/topics/Tab.Messages/message-display/payload-component.tsx
index a270f0e48e..d5bcb46ee7 100644
--- a/frontend/src/components/pages/topics/Tab.Messages/message-display/payload-component.tsx
+++ b/frontend/src/components/pages/topics/Tab.Messages/message-display/payload-component.tsx
@@ -9,12 +9,13 @@
  * by the Apache License, Version 2.0
  */
 
-import { Button, Flex, useToast } from '@redpanda-data/ui';
 import type { ReactNode } from 'react';
 import { useMemo, useState } from 'react';
+import { toast } from 'sonner';
 
 import type { Payload } from '../../../../../state/rest-interfaces';
 import { KowlJsonView } from '../../../../misc/kowl-json-view';
+import { Button } from '../../../../redpanda-ui/components/button';
 import { getControlCharacterName } from '../helpers';
 
 // Regex for checking printable ASCII characters
@@ -64,6 +65,7 @@ type PayloadRenderData =
   | { type: 'json'; content: string | object | null | undefined }
   | { type: 'error'; content: string };
 
+// biome-ignore lint/complexity/noExcessiveCognitiveComplexity: complex payload parsing
 function preparePayloadData(payload: Payload): PayloadRenderData {
   try {
     if (payload === null || payload === undefined || payload.payload === null || payload.payload === undefined) {
@@ -120,41 +122,33 @@ function preparePayloadData(payload: Payload): PayloadRenderData {
   }
 }
 
-// biome-ignore lint/complexity/noExcessiveCognitiveComplexity: complex business logic
 export const PayloadComponent = (p: { payload: Payload; loadLargeMessage: () => Promise<void> }) => {
   const { payload, loadLargeMessage } = p;
-  const toast = useToast();
   const [isLoadingLargeMessage, setLoadingLargeMessage] = useState(false);
   const renderData = useMemo(() => preparePayloadData(payload), [payload]);
 
   if (payload.isPayloadTooLarge) {
     return (
-      <Flex flexDirection="column" gap="4">
-        <Flex alignItems="center" gap="2">
+      <div className="flex flex-col gap-4">
+        <div className="flex items-center gap-2">
           Because this message size exceeds the display limit, loading it could cause performance degradation.
-        </Flex>
+        </div>
         <Button
+          className="w-40"
           data-testid="load-anyway-button"
           isLoading={isLoadingLargeMessage}
-          loadingText="Loading..."
           onClick={() => {
             setLoadingLargeMessage(true);
             loadLargeMessage()
-              .catch((err) =>
-                toast({
-                  status: 'error',
-                  description: err instanceof Error ? err.message : String(err),
-                })
-              )
+              .catch((err) => toast.error(err instanceof Error ? err.message : String(err)))
               .finally(() => setLoadingLargeMessage(false));
           }}
-          size="small"
+          size="sm"
           variant="outline"
-          width="10rem"
         >
           Load anyway
         </Button>
-      </Flex>
+      </div>
     );
   }
 
diff --git a/frontend/src/components/pages/topics/Tab.Messages/message-display/troubleshoot-report-viewer.tsx b/frontend/src/components/pages/topics/Tab.Messages/message-display/troubleshoot-report-viewer.tsx
index 53a59c6052..280d291607 100644
--- a/frontend/src/components/pages/topics/Tab.Messages/message-display/troubleshoot-report-viewer.tsx
+++ b/frontend/src/components/pages/topics/Tab.Messages/message-display/troubleshoot-report-viewer.tsx
@@ -9,10 +9,12 @@
  * by the Apache License, Version 2.0
  */
 
-import { Alert, AlertDescription, AlertIcon, AlertTitle, Box, Grid, GridItem, Heading } from '@redpanda-data/ui';
-import { useState } from 'react';
+import { AlertTriangle } from 'lucide-react';
+import { Fragment, useState } from 'react';
 
 import type { Payload } from '../../../../../state/rest-interfaces';
+import { Alert, AlertDescription, AlertTitle } from '../../../../redpanda-ui/components/alert';
+import { Heading } from '../../../../redpanda-ui/components/typography';
 
 export const TroubleshootReportViewer = (props: { payload: Payload }) => {
   const report = props.payload.troubleshootReport;
@@ -26,18 +28,11 @@ export const TroubleshootReportViewer = (props: { payload: Payload }) => {
   }
 
   return (
-    <Box mb="4" mt="4">
+    <div className="my-4">
       <Heading as="h4">Deserialization Troubleshoot Report</Heading>
-      <Alert background="red.50" flexDirection="column" my={4} status="error" variant="subtle">
-        <AlertTitle
-          alignItems="center"
-          alignSelf="flex-start"
-          display="flex"
-          flexDirection="row"
-          fontWeight="normal"
-          pb="4"
-        >
-          <AlertIcon /> Errors were encountered when deserializing this message
+      <Alert className="mt-4" icon={<AlertTriangle />} variant="destructive">
+        <AlertTitle className="flex items-center font-normal [&]:line-clamp-none">
+          Errors were encountered when deserializing this message
           <button
             className="cursor-pointer border-none bg-transparent pl-2 font-medium text-primary underline underline-offset-4"
             onClick={() => setShow(!show)}
@@ -46,36 +41,19 @@ export const TroubleshootReportViewer = (props: { payload: Payload }) => {
             {show ? 'Hide' : 'Show'}
           </button>
         </AlertTitle>
-        <AlertDescription display={show ? undefined : 'none'} whiteSpace="pre-wrap">
-          <Grid columnGap="4" rowGap="1" templateColumns="auto 1fr">
-            {report.map((e) => (
-              <>
-                <GridItem
-                  fontWeight="bold"
-                  key={`${e.serdeName}-name`}
-                  pl="8"
-                  px="5"
-                  py="2"
-                  textTransform="capitalize"
-                  w="100%"
-                >
-                  {e.serdeName}
-                </GridItem>
-                <GridItem
-                  background="red.100"
-                  fontFamily="monospace"
-                  key={`${e.serdeName}-message`}
-                  px="5"
-                  py="2"
-                  w="100%"
-                >
-                  {e.message}
-                </GridItem>
-              </>
-            ))}
-          </Grid>
-        </AlertDescription>
+        {show ? (
+          <AlertDescription className="whitespace-pre-wrap">
+            <div className="grid grid-cols-[auto_1fr] gap-x-4 gap-y-1">
+              {report.map((e) => (
+                <Fragment key={e.serdeName}>
+                  <div className="w-full px-5 py-2 pl-8 font-bold capitalize">{e.serdeName}</div>
+                  <div className="w-full bg-red-100 px-5 py-2 font-mono">{e.message}</div>
+                </Fragment>
+              ))}
+            </div>
+          </AlertDescription>
+        ) : null}
       </Alert>
-    </Box>
+    </div>
   );
 };
diff --git a/frontend/src/components/pages/topics/Tab.Messages/modals/deserializers-modal.tsx b/frontend/src/components/pages/topics/Tab.Messages/modals/deserializers-modal.tsx
index 3e26fad6ab..19396f001e 100644
--- a/frontend/src/components/pages/topics/Tab.Messages/modals/deserializers-modal.tsx
+++ b/frontend/src/components/pages/topics/Tab.Messages/modals/deserializers-modal.tsx
@@ -9,23 +9,26 @@
  * by the Apache License, Version 2.0
  */
 
+import { Button } from 'components/redpanda-ui/components/button';
 import {
-  Box,
-  Button,
-  Modal,
-  ModalBody,
-  ModalCloseButton,
-  ModalContent,
-  ModalFooter,
-  ModalHeader,
-  ModalOverlay,
-  Text,
-} from '@redpanda-data/ui';
+  Dialog,
+  DialogBody,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from 'components/redpanda-ui/components/dialog';
+import { Label } from 'components/redpanda-ui/components/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from 'components/redpanda-ui/components/select';
 import type { FC } from 'react';
 
 import { PayloadEncoding } from '../../../../../protogen/redpanda/api/console/v1alpha1/common_pb';
-import { Label } from '../../../../../utils/tsx-utils';
-import { SingleSelect } from '../../../../misc/select';
 
 const payloadEncodingPairs = [
   { value: PayloadEncoding.UNSPECIFIED, label: 'Automatic' },
@@ -61,47 +64,67 @@ export const DeserializersModal: FC<{
   setKeyDeserializer,
   setValueDeserializer,
 }) => (
-  <Modal
-    isOpen={getShowDialog()}
-    onClose={() => {
-      setShowDialog(false);
-    }}
-  >
-    <ModalOverlay />
-    <ModalContent minW="xl">
-      <ModalHeader>Deserialize</ModalHeader>
-      <ModalCloseButton />
-      <ModalBody display="flex" flexDirection="column" gap={4}>
-        <Text>
-          Redpanda attempts to automatically detect a deserialization strategy. You can choose one manually here.
-        </Text>
-        <Box>
-          <Label text="Key Deserializer">
-            <SingleSelect<PayloadEncoding>
-              onChange={setKeyDeserializer}
-              options={payloadEncodingPairs}
-              value={keyDeserializer}
-            />
-          </Label>
-        </Box>
-        <Label text="Value Deserializer">
-          <SingleSelect<PayloadEncoding>
-            onChange={setValueDeserializer}
-            options={payloadEncodingPairs}
-            value={valueDeserializer}
-          />
-        </Label>
-      </ModalBody>
-      <ModalFooter gap={2}>
-        <Button
-          colorScheme="red"
-          onClick={() => {
-            setShowDialog(false);
-          }}
-        >
+  <Dialog onOpenChange={setShowDialog} open={getShowDialog()}>
+    <DialogContent>
+      <DialogHeader>
+        <DialogTitle>Deserialize</DialogTitle>
+      </DialogHeader>
+      <DialogBody>
+        <p>Redpanda attempts to automatically detect a deserialization strategy. You can choose one manually here.</p>
+        <div className="flex flex-col gap-1.5">
+          <Label htmlFor="key-deserializer">Key Deserializer</Label>
+          <Select
+            onValueChange={(val) => setKeyDeserializer(Number(val) as PayloadEncoding)}
+            value={
+              payloadEncodingPairs.some((p) => p.value === keyDeserializer)
+                ? String(keyDeserializer)
+                : String(payloadEncodingPairs[0].value)
+            }
+          >
+            <SelectTrigger id="key-deserializer">
+              <SelectValue>
+                {(value: unknown) => payloadEncodingPairs.find((p) => String(p.value) === String(value))?.label}
+              </SelectValue>
+            </SelectTrigger>
+            <SelectContent>
+              {payloadEncodingPairs.map((pair) => (
+                <SelectItem key={pair.value} value={String(pair.value)}>
+                  {pair.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+        <div className="flex flex-col gap-1.5">
+          <Label htmlFor="value-deserializer">Value Deserializer</Label>
+          <Select
+            onValueChange={(val) => setValueDeserializer(Number(val) as PayloadEncoding)}
+            value={
+              payloadEncodingPairs.some((p) => p.value === valueDeserializer)
+                ? String(valueDeserializer)
+                : String(payloadEncodingPairs[0].value)
+            }
+          >
+            <SelectTrigger id="value-deserializer">
+              <SelectValue>
+                {(value: unknown) => payloadEncodingPairs.find((p) => String(p.value) === String(value))?.label}
+              </SelectValue>
+            </SelectTrigger>
+            <SelectContent>
+              {payloadEncodingPairs.map((pair) => (
+                <SelectItem key={pair.value} value={String(pair.value)}>
+                  {pair.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+      </DialogBody>
+      <DialogFooter>
+        <Button onClick={() => setShowDialog(false)} variant="secondary">
           Close
         </Button>
-      </ModalFooter>
-    </ModalContent>
-  </Modal>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
 );
diff --git a/frontend/src/components/pages/topics/TopicConfiguration.scss b/frontend/src/components/pages/topics/TopicConfiguration.scss
deleted file mode 100644
index 63247cb980..0000000000
--- a/frontend/src/components/pages/topics/TopicConfiguration.scss
+++ /dev/null
@@ -1,65 +0,0 @@
-.configGroupTable {
-    width: 100%;
-
-    display: grid;
-    /* columns:            name, value, isEdited, buttons  */
-    grid-template-columns: minmax(300px, auto) auto auto 1fr;
-    align-items: center;
-    gap: 12px;
-
-    .searchBar {
-        grid-column-start: span 4;
-        margin-bottom: 1em;
-    }
-
-    .configGroupSpacer {
-        grid-column-start: span 4;
-        margin: 1em 0em;
-        height: 1px;
-        background: hsl(0deg, 0%, 80%);
-
-        &:first-of-type {
-            display: none;
-        }
-    }
-
-    .configGroupTitle {
-        grid-column-start: span 4;
-        font-size: 1.5em;
-        font-weight: 600;
-    }
-
-    .isEditted {
-        opacity: .5;
-        margin-left: 20px;
-        margin-right: 20px;
-    }
-
-    .configButtons {
-        display: inline-flex;
-        align-items: center;
-        gap: 12px;
-        font-size: 18px;
-        color: hsl(0deg 0% 35%);
-
-        .btnEdit {
-            display: inline-flex;
-            font-size: 21px;
-            padding: 1px;
-            border-radius: 3px;
-            cursor: pointer;
-
-            &:not(.disabled):hover {
-                color: var(--ant-primary-color);
-                background: rgb(239 239 239);
-            }
-
-            &.disabled {
-                cursor: default;
-                svg {
-                    opacity: 0.5;
-                }
-            }
-        }
-    }
-}
diff --git a/frontend/src/components/pages/topics/tab-config.tsx b/frontend/src/components/pages/topics/tab-config.tsx
index 336baea853..5ee27f533e 100644
--- a/frontend/src/components/pages/topics/tab-config.tsx
+++ b/frontend/src/components/pages/topics/tab-config.tsx
@@ -9,7 +9,9 @@
  * by the Apache License, Version 2.0
  */
 
-import { Box, Button, Code, CodeBlock, Empty, Flex, Result } from '@redpanda-data/ui';
+import { Button } from 'components/redpanda-ui/components/button';
+import { CodeBlock, Pre } from 'components/redpanda-ui/components/code-block';
+import { Empty, EmptyDescription } from 'components/redpanda-ui/components/empty';
 
 import TopicConfigurationEditor from './topic-configuration';
 import { appGlobal } from '../../../state/app-global';
@@ -33,7 +35,11 @@ export function TopicConfiguration(props: { topic: Topic }) {
     return renderKafkaError(props.topic.topicName, config.error);
   }
   if (config === null || config.configEntries.length === 0) {
-    return <Empty description="No config entries" />;
+    return (
+      <Empty>
+        <EmptyDescription>No config entries</EmptyDescription>
+      </Empty>
+    );
   }
 
   const entries = config.configEntries;
@@ -51,30 +57,26 @@ export function TopicConfiguration(props: { topic: Topic }) {
 
 function renderKafkaError(topicName: string, error: KafkaError) {
   return (
-    <Flex alignItems="center" flexDirection="column" my={8}>
-      <Flex flexDirection="column" maxWidth="4xl">
-        <Result
-          status="error"
-          subTitle={
-            <>
-              Redpanda Console received the following error while fetching the configuration for topic{' '}
-              <Code p={1}>{topicName}</Code> from Kafka:
-            </>
-          }
-          title="Kafka Error"
-        />
-        <Box m={8}>
-          <CodeBlock codeString={toJson(error, 4)} language="raw" />
-        </Box>
-        <Button
-          onClick={() => appGlobal.onRefresh()}
-          size="lg"
-          style={{ width: '12em', margin: '0', alignSelf: 'center' }}
-          variant="solid"
-        >
+    <div className="my-8 flex flex-col items-center">
+      <div className="flex w-full max-w-4xl flex-col">
+        <div className="flex flex-col items-center gap-2 text-center">
+          <h2 className="font-semibold text-destructive text-xl">Kafka Error</h2>
+          <p className="text-muted-foreground">
+            Redpanda Console received the following error while fetching the configuration for topic{' '}
+            <code className="rounded bg-muted px-1 py-0.5 text-sm">{topicName}</code> from Kafka:
+          </p>
+        </div>
+        <div className="m-8">
+          <CodeBlock width="full">
+            <Pre>
+              <code>{toJson(error, 4)}</code>
+            </Pre>
+          </CodeBlock>
+        </div>
+        <Button className="w-48 self-center" onClick={() => appGlobal.onRefresh()} size="lg">
           Retry
         </Button>
-      </Flex>
-    </Flex>
+      </div>
+    </div>
   );
 }
diff --git a/frontend/src/components/pages/topics/tab-consumers.tsx b/frontend/src/components/pages/topics/tab-consumers.tsx
index 519608cf50..5121c2d1c6 100644
--- a/frontend/src/components/pages/topics/tab-consumers.tsx
+++ b/frontend/src/components/pages/topics/tab-consumers.tsx
@@ -9,21 +9,24 @@
  * by the Apache License, Version 2.0
  */
 
+import { Link } from '@tanstack/react-router';
+import {
+  type ColumnDef,
+  flexRender,
+  getCoreRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from '@tanstack/react-table';
 import { type FC, useEffect } from 'react';
 
-import type { Topic, TopicConsumer } from '../../../state/rest-interfaces';
-
-import '../../../utils/array-extensions';
-
-import { DataTable } from '@redpanda-data/ui';
-
-import usePaginationParams from '../../../hooks/use-pagination-params';
-import { appGlobal } from '../../../state/app-global';
+import { useUrlTableState } from '../../../hooks/use-url-table-state';
 import { api, useApiStoreHook } from '../../../state/backend-api';
-import { uiState } from '../../../state/ui-state';
-import { onPaginationChange } from '../../../utils/pagination';
-import { editQuery } from '../../../utils/query-helper';
+import type { Topic, TopicConsumer } from '../../../state/rest-interfaces';
+import { uiSettings } from '../../../state/ui';
 import { DefaultSkeleton } from '../../../utils/tsx-utils';
+import { DataTableColumnHeader, DataTablePagination } from '../../redpanda-ui/components/data-table';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../../redpanda-ui/components/table';
 
 type TopicConsumersProps = { topic: Topic };
 
@@ -34,34 +37,85 @@ export const TopicConsumers: FC<TopicConsumersProps> = ({ topic }) => {
 
   const rawConsumers = useApiStoreHook((s) => s.topicConsumers.get(topic.topicName));
   const isLoading = rawConsumers === undefined;
-
   const consumers = rawConsumers ?? [];
 
-  const paginationParams = usePaginationParams(consumers.length, uiState.topicSettings.consumerPageSize);
+  const { sorting, pagination, onSortingChange, onPaginationChange } = useUrlTableState({
+    keyPrefix: 'consumer',
+    settings: uiSettings.topicConsumersList,
+    rowCount: consumers.length,
+    enabled: !isLoading,
+  });
+
+  const columns: ColumnDef<TopicConsumer>[] = [
+    {
+      accessorKey: 'groupId',
+      header: ({ column }) => <DataTableColumnHeader column={column} title="Group" />,
+      cell: ({ row: { original } }) => (
+        <Link
+          className="text-inherit no-underline hover:no-underline"
+          params={{ groupId: encodeURIComponent(original.groupId) }}
+          search={{} as never}
+          to="/groups/$groupId"
+        >
+          {original.groupId}
+        </Link>
+      ),
+    },
+    {
+      accessorKey: 'summedLag',
+      header: ({ column }) => <DataTableColumnHeader column={column} title="Lag" />,
+    },
+  ];
+
+  const table = useReactTable({
+    data: consumers,
+    columns,
+    state: { sorting, pagination },
+    onSortingChange,
+    onPaginationChange,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    autoResetPageIndex: false,
+  });
 
   if (isLoading) {
     return DefaultSkeleton;
   }
 
   return (
-    <DataTable<TopicConsumer>
-      columns={[
-        { size: 1, header: 'Group', accessorKey: 'groupId' },
-        { header: 'Lag', accessorKey: 'summedLag' },
-      ]}
-      data={consumers}
-      onPaginationChange={onPaginationChange(paginationParams, ({ pageSize, pageIndex }) => {
-        Object.assign(uiState.topicSettings, { consumerPageSize: pageSize });
-        editQuery((query) => {
-          query.page = String(pageIndex);
-          query.pageSize = String(pageSize);
-        });
-      })}
-      onRow={(row) => {
-        appGlobal.historyPush(`/groups/${encodeURIComponent(row.original.groupId)}`);
-      }}
-      pagination={paginationParams}
-      sorting
-    />
+    <>
+      <Table>
+        <TableHeader>
+          {table.getHeaderGroups().map((headerGroup) => (
+            <TableRow key={headerGroup.id}>
+              {headerGroup.headers.map((header) => (
+                <TableHead key={header.id}>
+                  {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
+                </TableHead>
+              ))}
+            </TableRow>
+          ))}
+        </TableHeader>
+        <TableBody>
+          {table.getRowModel().rows.length === 0 ? (
+            <TableRow>
+              <TableCell className="text-center" colSpan={columns.length}>
+                No data found
+              </TableCell>
+            </TableRow>
+          ) : (
+            table.getRowModel().rows.map((row) => (
+              <TableRow key={row.id}>
+                {row.getVisibleCells().map((cell) => (
+                  <TableCell key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</TableCell>
+                ))}
+              </TableRow>
+            ))
+          )}
+        </TableBody>
+      </Table>
+      <DataTablePagination table={table} />
+    </>
   );
 };
diff --git a/frontend/src/components/pages/topics/tab-partitions.tsx b/frontend/src/components/pages/topics/tab-partitions.tsx
index eff41e41eb..d8758d98f4 100644
--- a/frontend/src/components/pages/topics/tab-partitions.tsx
+++ b/frontend/src/components/pages/topics/tab-partitions.tsx
@@ -9,135 +9,151 @@
  * by the Apache License, Version 2.0
  */
 
+import {
+  type ColumnDef,
+  flexRender,
+  getCoreRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from '@tanstack/react-table';
+import { AlertTriangle } from 'lucide-react';
 import type { FC } from 'react';
 
-import type { Partition, Topic } from '../../../state/rest-interfaces';
 import '../../../utils/array-extensions';
-import { Alert, AlertIcon, Box, DataTable, Flex, Popover, Text } from '@redpanda-data/ui';
-import { WarningIcon } from 'components/icons';
-import { Badge } from 'components/redpanda-ui/components/badge';
 
-import usePaginationParams from '../../../hooks/use-pagination-params';
+import { useUrlTableState } from '../../../hooks/use-url-table-state';
 import { useApiStoreHook } from '../../../state/backend-api';
-import { uiState } from '../../../state/ui-state';
-import { onPaginationChange } from '../../../utils/pagination';
-import { editQuery } from '../../../utils/query-helper';
-import { DefaultSkeleton, InfoText, numberToThousandsString } from '../../../utils/tsx-utils';
+import type { Partition, Topic } from '../../../state/rest-interfaces';
+import { uiSettings } from '../../../state/ui';
+import { DefaultSkeleton, numberToThousandsString } from '../../../utils/tsx-utils';
 import { BrokerList } from '../../misc/broker-list';
+import { Alert, AlertDescription } from '../../redpanda-ui/components/alert';
+import { Badge } from '../../redpanda-ui/components/badge';
+import { Button } from '../../redpanda-ui/components/button';
+import { DataTableColumnHeader, DataTablePagination } from '../../redpanda-ui/components/data-table';
+import { Popover, PopoverContent, PopoverTrigger } from '../../redpanda-ui/components/popover';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../../redpanda-ui/components/table';
 
-type TopicPartitionsProps = {
-  topic: Topic;
-};
-
-const persistPartitionPageSize = (pageSize: number) => {
-  uiState.topicSettings.partitionPageSize = pageSize;
-};
+type TopicPartitionsProps = { topic: Topic };
 
 export const TopicPartitions: FC<TopicPartitionsProps> = ({ topic }) => {
   const partitions = useApiStoreHook((s) => s.topicPartitions.get(topic.topicName));
   const clusterHealth = useApiStoreHook((s) => s.clusterHealth);
-  const paginationParams = usePaginationParams(partitions?.length ?? 0, uiState.topicSettings.partitionPageSize);
+
+  // Kept above the early returns so the hook order stays stable; clamping no-ops until partitions load.
+  const { sorting, pagination, onSortingChange, onPaginationChange } = useUrlTableState({
+    keyPrefix: 'partition',
+    settings: uiSettings.topicPartitionsList,
+    rowCount: Array.isArray(partitions) ? partitions.length : 0,
+    enabled: Array.isArray(partitions),
+  });
 
   if (partitions === undefined) {
     return DefaultSkeleton;
   }
   if (partitions === null) {
-    return <div />; // todo: show the error (if one was reported);
+    return <div />;
   }
 
-  const leaderLessPartitions = (clusterHealth?.leaderlessPartitions ?? []).find(
+  const leaderlessPartitions = (clusterHealth?.leaderlessPartitions ?? []).find(
     ({ topicName }) => topicName === topic.topicName
   )?.partitionIds;
+
   const underReplicatedPartitions = (clusterHealth?.underReplicatedPartitions ?? []).find(
     ({ topicName }) => topicName === topic.topicName
   )?.partitionIds;
 
-  let warning: JSX.Element = <></>;
-  if (topic.cleanupPolicy.toLowerCase() === 'compact') {
-    warning = (
-      <Alert marginBottom="1em" status="warning">
-        <AlertIcon />
-        Topic cleanupPolicy is 'compact'. Message Count is an estimate!
-      </Alert>
-    );
-  }
+  const columns: ColumnDef<Partition>[] = [
+    {
+      accessorKey: 'id',
+      header: ({ column }) => <DataTableColumnHeader column={column} title="Partition ID" />,
+      cell: ({ row: { original: partition } }) => (
+        <div className="flex items-center gap-2">
+          <span>{partition.id}</span>
+          {partition.hasErrors && <PartitionError partition={partition} />}
+          {leaderlessPartitions?.includes(partition.id) && <Badge variant="destructive-inverted">Leaderless</Badge>}
+          {underReplicatedPartitions?.includes(partition.id) && (
+            <Badge variant="warning-inverted">Under-replicated</Badge>
+          )}
+        </div>
+      ),
+    },
+    {
+      accessorKey: 'waterMarkLow',
+      header: ({ column }) => <DataTableColumnHeader column={column} title="Low Water Mark" />,
+      cell: ({ row: { original: partition } }) => numberToThousandsString(partition.waterMarkLow),
+    },
+    {
+      accessorKey: 'waterMarkHigh',
+      header: ({ column }) => <DataTableColumnHeader column={column} title="High Water Mark" />,
+      cell: ({ row: { original: partition } }) => numberToThousandsString(partition.waterMarkHigh),
+    },
+    {
+      id: 'messages',
+      accessorFn: (partition) => (partition.hasErrors ? null : partition.waterMarkHigh - partition.waterMarkLow),
+      header: ({ column }) => <DataTableColumnHeader column={column} title="Messages" />,
+      cell: ({ row: { original: partition } }) =>
+        partition.hasErrors ? null : numberToThousandsString(partition.waterMarkHigh - partition.waterMarkLow),
+    },
+    {
+      id: 'brokers',
+      header: 'Brokers',
+      enableSorting: false,
+      cell: ({ row: { original: partition } }) => <BrokerList partition={partition} />,
+    },
+  ];
+
+  const table = useReactTable({
+    data: partitions,
+    columns,
+    state: { sorting, pagination },
+    onSortingChange,
+    onPaginationChange,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    autoResetPageIndex: false,
+  });
 
   return (
     <>
-      {warning}
-      <DataTable<Partition>
-        columns={[
-          {
-            header: 'Partition ID',
-            accessorKey: 'id',
-            cell: ({ row: { original: partition } }) => {
-              const header = partition.hasErrors ? (
-                <Flex justifyContent="space-between">
-                  <Text>{partition.id}</Text>
-                  <Box>
-                    <PartitionError partition={partition} />
-                  </Box>
-                </Flex>
-              ) : (
-                partition.id
-              );
-
-              return (
-                <Flex alignItems="center" gap={2}>
-                  {header}
-                  {leaderLessPartitions?.includes(partition.id) && (
-                    <Badge variant="destructive-inverted">Leaderless</Badge>
-                  )}
-                  {underReplicatedPartitions?.includes(partition.id) && (
-                    <Badge variant="warning-inverted">Under-replicated</Badge>
-                  )}
-                </Flex>
-              );
-            },
-          },
-          {
-            id: 'waterMarkLow',
-            header: () => (
-              <InfoText tooltip="Low Water Mark" tooltipOverText>
-                Low
-              </InfoText>
-            ),
-            accessorKey: 'waterMarkLow',
-            cell: ({ row: { original: partition } }) => numberToThousandsString(partition.waterMarkLow),
-          },
-          {
-            id: 'waterMarkHigh',
-            header: () => (
-              <InfoText tooltip="High Water Mark" tooltipOverText>
-                High
-              </InfoText>
-            ),
-            accessorKey: 'waterMarkHigh',
-            cell: ({ row: { original: partition } }) => numberToThousandsString(partition.waterMarkHigh),
-          },
-          {
-            header: 'Messages',
-            cell: ({ row: { original: partition } }) =>
-              !partition.hasErrors && numberToThousandsString(partition.waterMarkHigh - partition.waterMarkLow),
-          },
-          {
-            header: 'Brokers',
-            cell: ({ row: { original: partition } }) => <BrokerList partition={partition} />,
-          },
-        ]}
-        data={partitions}
-        // @ts-expect-error - we need to get rid of this enum in DataTable
-        defaultPageSize={uiState.topicSettings.partitionPageSize}
-        onPaginationChange={onPaginationChange(paginationParams, ({ pageSize, pageIndex }) => {
-          persistPartitionPageSize(pageSize);
-          editQuery((query) => {
-            query.page = String(pageIndex);
-            query.pageSize = String(pageSize);
-          });
-        })}
-        pagination={paginationParams}
-        sorting
-      />
+      {topic.cleanupPolicy.toLowerCase() === 'compact' && (
+        <Alert className="mb-4" variant="warning">
+          <AlertDescription>Topic cleanupPolicy is &apos;compact&apos;. Message Count is an estimate!</AlertDescription>
+        </Alert>
+      )}
+      <Table>
+        <TableHeader>
+          {table.getHeaderGroups().map((headerGroup) => (
+            <TableRow key={headerGroup.id}>
+              {headerGroup.headers.map((header) => (
+                <TableHead key={header.id}>
+                  {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
+                </TableHead>
+              ))}
+            </TableRow>
+          ))}
+        </TableHeader>
+        <TableBody>
+          {table.getRowModel().rows.length === 0 ? (
+            <TableRow>
+              <TableCell className="text-center" colSpan={columns.length}>
+                No data found
+              </TableCell>
+            </TableRow>
+          ) : (
+            table.getRowModel().rows.map((row) => (
+              <TableRow key={row.id}>
+                {row.getVisibleCells().map((cell) => (
+                  <TableCell key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</TableCell>
+                ))}
+              </TableRow>
+            ))
+          )}
+        </TableBody>
+      </Table>
+      <DataTablePagination table={table} />
     </>
   );
 };
@@ -148,21 +164,19 @@ const PartitionError: FC<{ partition: Partition }> = ({ partition }) => {
   }
 
   return (
-    <Popover
-      content={
-        <Flex flexDirection="column" gap={2} maxWidth={500} whiteSpace="pre-wrap">
-          {Boolean(partition.partitionError) && <Text>{partition.partitionError}</Text>}
-          {Boolean(partition.waterMarksError) && <Text>{partition.waterMarksError}</Text>}
-        </Flex>
-      }
-      hideCloseButton
-      placement="right-start"
-      size="auto"
-      title="Partition Error"
-    >
-      <Box>
-        <WarningIcon color="orange" size={20} />
-      </Box>
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button aria-label="Show partition error details" size="icon-sm" type="button" variant="ghost">
+          <AlertTriangle className="text-orange-500" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent align="start" className="max-w-[500px]" side="right">
+        <p className="mb-2 font-medium">Partition Error</p>
+        <div className="flex flex-col gap-2 whitespace-pre-wrap text-sm">
+          {Boolean(partition.partitionError) && <p>{partition.partitionError}</p>}
+          {Boolean(partition.waterMarksError) && <p>{partition.waterMarksError}</p>}
+        </div>
+      </PopoverContent>
     </Popover>
   );
 };
diff --git a/frontend/src/components/pages/topics/topic-configuration.test.tsx b/frontend/src/components/pages/topics/topic-configuration.test.tsx
index 55b9574a4b..45f680073c 100644
--- a/frontend/src/components/pages/topics/topic-configuration.test.tsx
+++ b/frontend/src/components/pages/topics/topic-configuration.test.tsx
@@ -1,62 +1,131 @@
-import { render, screen } from '@testing-library/react';
+import { render, screen, within } from '@testing-library/react';
+import { vi } from 'vitest';
 
 import ConfigurationEditor from './topic-configuration';
+
+vi.mock('@tanstack/react-router', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@tanstack/react-router')>();
+  return {
+    ...actual,
+    useSearch: () => ({}),
+    useNavigate: () => vi.fn(),
+  };
+});
+
+const mockIsFeatureFlagEnabled = vi.fn<(flag: string) => boolean>();
+vi.mock('../../../config', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('../../../config')>();
+  return {
+    ...actual,
+    isServerless: () => false,
+    isFeatureFlagEnabled: (flag: string) => mockIsFeatureFlagEnabled(flag),
+  };
+});
+
 import type { ConfigEntryExtended } from '../../../state/rest-interfaces';
 
+const makeEntry = (overrides: Partial<ConfigEntryExtended> & { category: string }): ConfigEntryExtended => ({
+  name: 'test.option',
+  value: '',
+  source: '',
+  type: 'STRING',
+  isExplicitlySet: false,
+  isDefaultValue: false,
+  isReadOnly: false,
+  isSensitive: false,
+  synonyms: [],
+  currentValue: '',
+  ...overrides,
+});
+
 describe('TopicConfiguration', () => {
-  test('renders groups in the correct order', () => {
-    // Generate an out of order set of test options
-    const entries: ConfigEntryExtended[] = [
-      'Retention',
-      'Tiered Storage',
-      'Storage Internals',
-      'Compression',
-      'Compaction',
-      'Replication',
-      'Iceberg',
-      '', // unknown options should appear at the end as 'Other'
-      'Message Handling',
-      'Write Caching',
-      'Schema Registry and Validation',
-    ].map((category) => ({
-      name: 'test.option',
-      category,
-      value: '',
-      source: '',
-      type: 'STRING',
-      isExplicitlySet: false,
-      isDefaultValue: false,
-      isReadOnly: false,
-      isSensitive: false,
-      synonyms: [],
-      currentValue: '',
-    }));
-
-    const { container } = render(
-      <ConfigurationEditor
-        entries={entries}
-        onForceRefresh={() => {
-          // no op - test callback
-        }}
-        targetTopic=""
-      />
-    );
-    expect(screen.getByTestId('config-group-table')).toBeVisible();
-
-    const groups = container.querySelectorAll('.configGroupTitle');
-
-    expect([
-      'Retention',
-      'Compaction',
-      'Replication',
-      'Tiered Storage',
-      'Write Caching',
-      'Iceberg',
-      'Schema Registry and Validation',
-      'Message Handling',
-      'Compression',
-      'Storage Internals',
-      'Other',
-    ]).toEqual(Array.from(groups).map((g) => g.textContent));
+  describe('legacy layout (enableNewTopicPage off)', () => {
+    beforeEach(() => mockIsFeatureFlagEnabled.mockReturnValue(false));
+
+    test('renders groups in the correct order', () => {
+      // Generate an out of order set of test options
+      const entries: ConfigEntryExtended[] = [
+        'Retention',
+        'Tiered Storage',
+        'Storage Internals',
+        'Compression',
+        'Compaction',
+        'Replication',
+        'Iceberg',
+        '', // unknown options should appear at the end as 'Other'
+        'Message Handling',
+        'Write Caching',
+        'Schema Registry and Validation',
+      ].map((category) => makeEntry({ category }));
+
+      const { container } = render(
+        <ConfigurationEditor
+          entries={entries}
+          onForceRefresh={() => {
+            // no op - test callback
+          }}
+          targetTopic=""
+        />
+      );
+      expect(screen.getByTestId('config-group-table')).toBeVisible();
+
+      const groups = container.querySelectorAll('.configGroupTitle');
+
+      expect(Array.from(groups).map((g) => g.textContent)).toEqual([
+        'Retention',
+        'Compaction',
+        'Replication',
+        'Tiered Storage',
+        'Write Caching',
+        'Iceberg',
+        'Schema Registry and Validation',
+        'Message Handling',
+        'Compression',
+        'Storage Internals',
+        'Other',
+      ]);
+    });
+  });
+
+  describe('grouped layout (enableNewTopicPage on)', () => {
+    beforeEach(() => mockIsFeatureFlagEnabled.mockReturnValue(true));
+
+    test('renders a sidebar and titled sections, preserving backend categories and collapsing only unmapped ones into Other', () => {
+      const entries: ConfigEntryExtended[] = [
+        makeEntry({ name: 'retention.ms', category: 'Retention', isExplicitlySet: true }),
+        makeEntry({ name: 'cleanup.policy', category: 'Compaction' }),
+        makeEntry({ name: 'redpanda.iceberg.mode', category: 'Iceberg' }),
+        makeEntry({ name: 'some.unknown.option', category: 'Totally Unknown' }),
+      ];
+
+      render(
+        <ConfigurationEditor
+          entries={entries}
+          onForceRefresh={() => {
+            // no op - test callback
+          }}
+          targetTopic="my-topic"
+        />
+      );
+
+      // Sidebar lists each visible category; known backend categories like 'Iceberg' are
+      // preserved, and only genuinely unmapped categories collapse into 'Other'.
+      const nav = screen.getByRole('navigation', { name: 'Configuration categories' });
+      expect(within(nav).getByText('Retention')).toBeVisible();
+      expect(within(nav).getByText('Compaction')).toBeVisible();
+      expect(within(nav).getByText('Iceberg')).toBeVisible();
+      expect(within(nav).getByText('Other')).toBeVisible();
+
+      // Each visible category renders as a titled section.
+      const retentionSection = screen.getByRole('heading', { name: 'Retention' }).closest('section') as HTMLElement;
+      expect(retentionSection).toBeVisible();
+
+      // Only modified rows get a badge; the explicitly-set retention.ms row shows 'Modified',
+      // and the default cleanup.policy row shows no badge.
+      expect(within(retentionSection).getByText('Modified')).toBeVisible();
+      const compactionSection = screen.getByRole('heading', { name: 'Compaction' }).closest('section') as HTMLElement;
+      expect(within(compactionSection).queryByText('Modified')).not.toBeInTheDocument();
+      expect(within(compactionSection).queryByText('Default')).not.toBeInTheDocument();
+    });
   });
 });
diff --git a/frontend/src/components/pages/topics/topic-configuration.tsx b/frontend/src/components/pages/topics/topic-configuration.tsx
index c3e0dc708f..a135af1b30 100644
--- a/frontend/src/components/pages/topics/topic-configuration.tsx
+++ b/frontend/src/components/pages/topics/topic-configuration.tsx
@@ -1,43 +1,50 @@
+import { useNavigate, useSearch } from '@tanstack/react-router';
+import { Alert, AlertDescription } from 'components/redpanda-ui/components/alert';
+import { Badge } from 'components/redpanda-ui/components/badge';
+import { Button } from 'components/redpanda-ui/components/button';
 import {
-  Alert,
-  AlertIcon,
-  Box,
-  Button,
-  Flex,
-  FormField,
-  Icon,
-  Input,
-  Modal,
-  ModalBody,
-  ModalContent,
-  ModalFooter,
-  ModalHeader,
-  ModalOverlay,
-  PasswordInput,
-  Popover,
-  RadioGroup,
-  SearchField,
-  Text,
-  Tooltip,
-  useToast,
-} from '@redpanda-data/ui';
-import { EditIcon, InfoIcon } from 'components/icons';
-import type { FC } from 'react';
-import { useState } from 'react';
+  Dialog,
+  DialogBody,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from 'components/redpanda-ui/components/dialog';
+import { Empty, EmptyDescription } from 'components/redpanda-ui/components/empty';
+import { Input } from 'components/redpanda-ui/components/input';
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+} from 'components/redpanda-ui/components/input-group';
+import { Label } from 'components/redpanda-ui/components/label';
+import { Popover, PopoverContent, PopoverTrigger } from 'components/redpanda-ui/components/popover';
+import { RadioGroup, RadioGroupItem } from 'components/redpanda-ui/components/radio-group';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from 'components/redpanda-ui/components/select';
+import { Slider } from 'components/redpanda-ui/components/slider';
+import { ToggleGroup, ToggleGroupItem } from 'components/redpanda-ui/components/toggle-group';
+import { Tooltip, TooltipContent, TooltipTrigger } from 'components/redpanda-ui/components/tooltip';
+import { Pencil as EditIcon, Info as InfoIcon, Search, X as XIcon } from 'lucide-react';
+import type { FC, ReactNode } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { Controller, type SubmitHandler, useForm, useWatch } from 'react-hook-form';
+import { toast } from 'sonner';
 
-import { DataSizeSelect, DurationSelect, NumInput, RatioInput } from './CreateTopicModal/create-topic-modal';
-import type { ConfigEntryExtended } from '../../../state/rest-interfaces';
+import { isFeatureFlagEnabled, isServerless } from '../../../config';
+import { api, useApiStoreHook } from '../../../state/backend-api';
+import type { ConfigEntryExtended, ConfigEntrySynonym } from '../../../state/rest-interfaces';
 import {
   entryHasInfiniteValue,
   formatConfigValue,
   getInfiniteValueForEntry,
 } from '../../../utils/formatters/config-value-formatter';
-import './TopicConfiguration.scss';
-
-import { isServerless } from '../../../config';
-import { api, useApiStoreHook } from '../../../state/backend-api';
-import { SingleSelect } from '../../misc/select';
 
 type ConfigurationEditorProps = {
   targetTopic: string; // topic name, or null if default configs
@@ -50,13 +57,67 @@ type Inputs = {
   customValue: string | number | undefined | null;
 };
 
+// ── Shared config helpers ───────────────────────────────────────────────────────
+
+const SOURCE_PRIORITY_ORDER = [
+  'DYNAMIC_TOPIC_CONFIG',
+  'DYNAMIC_BROKER_CONFIG',
+  'DYNAMIC_DEFAULT_BROKER_CONFIG',
+  'STATIC_BROKER_CONFIG',
+  'DEFAULT_CONFIG',
+];
+
+/** Highest-priority synonym that represents the inherited (non topic-level) default. */
+function getDefaultConfigSynonym(entry: ConfigEntryExtended): ConfigEntrySynonym | undefined {
+  return entry.synonyms
+    ?.filter(({ source }) => source !== 'DYNAMIC_TOPIC_CONFIG')
+    .sort((a, b) => SOURCE_PRIORITY_ORDER.indexOf(a.source) - SOURCE_PRIORITY_ORDER.indexOf(b.source))[0];
+}
+
+/** A config is "modified" when this topic explicitly overrides the cluster/broker default. */
+function isConfigModified(entry: ConfigEntryExtended): boolean {
+  return entry.isExplicitlySet;
+}
+
+/** First option for enum-style editors, used as the fallback when there's no value. */
+function getFirstSelectOption(entry: ConfigEntryExtended): string | undefined {
+  if (entry.frontendFormat === 'BOOLEAN') {
+    return 'false';
+  }
+  if (entry.frontendFormat === 'SELECT') {
+    return entry.enumValues?.[0];
+  }
+  return;
+}
+
+// Curated categories + order for the grouped layout. Anything the backend tags
+// with a category outside this set falls back to "Other".
+const CONFIG_CATEGORIES = [
+  { name: 'Retention', blurb: 'How long and how much data this topic retains.' },
+  { name: 'Compaction', blurb: 'Log cleanup and key-based compaction behavior.' },
+  { name: 'Replication', blurb: 'Durability and in-sync replica requirements.' },
+  { name: 'Tiered Storage', blurb: 'Offloading topic data to object storage.' },
+  { name: 'Write Caching', blurb: 'Write acknowledgement and caching behavior.' },
+  { name: 'Iceberg', blurb: 'Apache Iceberg table integration for this topic.' },
+  { name: 'Schema Registry and Validation', blurb: 'Schema ID validation for keys and values.' },
+  { name: 'Message Handling', blurb: 'Message size, timestamps, and conversion behavior.' },
+  { name: 'Compression', blurb: 'Message compression behavior.' },
+  { name: 'Storage Internals', blurb: 'Low-level segment and index storage settings.' },
+  { name: 'Other', blurb: 'Additional topic configuration.' },
+] as const;
+
+const ALLOWED_CATEGORIES = new Set<string>(CONFIG_CATEGORIES.map((c) => c.name));
+
+function categoryForEntry(entry: ConfigEntryExtended): string {
+  return entry.category && ALLOWED_CATEGORIES.has(entry.category) ? entry.category : 'Other';
+}
+
 const ConfigEditorForm: FC<{
   editedEntry: ConfigEntryExtended;
   onClose: () => void;
   onSuccess: () => void;
   targetTopic: string;
 }> = ({ editedEntry, onClose, targetTopic, onSuccess }) => {
-  const toast = useToast();
   const [globalError, setGlobalError] = useState<string | null>(null);
 
   const defaultValueType = (() => {
@@ -65,12 +126,20 @@ const ConfigEditorForm: FC<{
     }
     return entryHasInfiniteValue(editedEntry) ? 'infinite' : 'custom';
   })();
-  const defaultCustomValue =
+  const defaultConfigSynonym = getDefaultConfigSynonym(editedEntry);
+  const explicitCustomValue =
     editedEntry.isExplicitlySet && !entryHasInfiniteValue(editedEntry) ? editedEntry.value : '';
+  // Seed Custom from the resolved/inherited value (explicit override → current effective
+  // value → inherited default) so opening Custom and saving without touching the control
+  // doesn't silently overwrite a non-default BOOLEAN/SELECT value. Only fall back to the
+  // first enum option when nothing is resolved, so the dropdown still shows a concrete choice.
+  const resolvedValue = explicitCustomValue || editedEntry.value || defaultConfigSynonym?.value || '';
+  const defaultCustomValue = resolvedValue || getFirstSelectOption(editedEntry) || '';
 
   const {
     control,
     handleSubmit,
+    setValue,
     formState: { isSubmitting },
   } = useForm<Inputs>({
     defaultValues: {
@@ -121,14 +190,7 @@ const ConfigEditorForm: FC<{
           value: configValue,
         },
       ]);
-      toast({
-        status: 'success',
-        description: (
-          <span>
-            Config <code>{editedEntry.name}</code> updated
-          </span>
-        ),
-      });
+      toast.success(`Config ${editedEntry.name} updated`);
       onSuccess();
       onClose();
     } catch (err) {
@@ -140,40 +202,52 @@ const ConfigEditorForm: FC<{
 
   const valueType = useWatch({ control, name: 'valueType' });
 
-  const SOURCE_PRIORITY_ORDER = [
-    'DYNAMIC_TOPIC_CONFIG',
-    'DYNAMIC_BROKER_CONFIG',
-    'DYNAMIC_DEFAULT_BROKER_CONFIG',
-    'STATIC_BROKER_CONFIG',
-    'DEFAULT_CONFIG',
-  ];
-
-  const defaultConfigSynonym = editedEntry.synonyms
-    ?.filter(({ source }) => source !== 'DYNAMIC_TOPIC_CONFIG')
-    .sort((a, b) => SOURCE_PRIORITY_ORDER.indexOf(a.source) - SOURCE_PRIORITY_ORDER.indexOf(b.source))[0];
+  // Route "Reset to default" through the normal submit path (which DELETEs for the
+  // 'default' value type) instead of firing an out-of-band DELETE. This shares the
+  // single pending/disabled state with Save/Cancel, so reset can't race a concurrent
+  // Save and the buttons disable together while the mutation is in flight.
+  const handleReset = () => {
+    setValue('valueType', 'default');
+    void handleSubmit(onSubmit)();
+  };
 
   return (
-    <Modal isOpen onClose={onClose}>
-      <form onSubmit={handleSubmit(onSubmit)}>
-        <ModalOverlay />
-        <ModalContent minW="2xl">
-          <ModalHeader>{`Edit ${editedEntry.name}`}</ModalHeader>
-          <ModalBody>
-            <Text mb={6}>{editedEntry.documentation}</Text>
-
-            <Flex flexDirection="column" gap={4}>
-              <FormField label={editedEntry.name}>
+    <Dialog
+      onOpenChange={(open) => {
+        if (!open) onClose();
+      }}
+      open
+    >
+      <DialogContent size="lg">
+        <form className="contents" onSubmit={handleSubmit(onSubmit)}>
+          <DialogHeader>
+            <DialogTitle>{`Edit ${editedEntry.name}`}</DialogTitle>
+          </DialogHeader>
+          <DialogBody>
+            <p className="mb-6">{editedEntry.documentation}</p>
+
+            <div className="flex flex-col gap-4">
+              <div className="flex flex-col gap-1.5">
+                <Label>{editedEntry.name}</Label>
                 <Controller
                   control={control}
                   name="valueType"
                   render={({ field: { onChange, value } }) => (
-                    <RadioGroup name="valueType" onChange={onChange} options={valueTypeOptions} value={value} />
+                    <RadioGroup onValueChange={onChange} value={value}>
+                      {valueTypeOptions.map((opt) => (
+                        <div className="flex items-center gap-2" key={opt.value}>
+                          <RadioGroupItem id={`value-type-${opt.value}`} value={opt.value} />
+                          <Label htmlFor={`value-type-${opt.value}`}>{opt.label}</Label>
+                        </div>
+                      ))}
+                    </RadioGroup>
                   )}
                 />
-              </FormField>
+              </div>
               {valueType === 'custom' && (
-                <FormField label={`Set a custom ${editedEntry.name} value for this topic`}>
-                  <Box maxW="fit-content">
+                <div className="flex flex-col gap-1.5">
+                  <Label>{`Set a custom ${editedEntry.name} value for this topic`}</Label>
+                  <div className="w-fit">
                     <Controller
                       control={control}
                       name="customValue"
@@ -181,53 +255,59 @@ const ConfigEditorForm: FC<{
                         <ConfigEntryEditorController entry={editedEntry} onChange={onChange} value={value} />
                       )}
                     />
-                  </Box>
-                </FormField>
+                  </div>
+                </div>
               )}
-              {/*It's not possible to show default value until we get it always from the BE.*/}
-              {/*Currently we only retrieve the current value and not default if it's set to custom/infinite*/}
               {valueType === 'default' && defaultConfigSynonym && (
-                <Box>
+                <div>
                   The default value is{' '}
-                  <Text display="inline" fontWeight="bold">
-                    {/*{JSON.stringify(editedEntry)}*/}
-                    {formatConfigValue(editedEntry.name, defaultConfigSynonym.value, 'friendly')}
-                  </Text>
-                  . This is inherited from {defaultConfigSynonym.source}.
-                </Box>
+                  <strong>{formatConfigValue(editedEntry.name, defaultConfigSynonym.value, 'friendly')}</strong>. This
+                  is inherited from {defaultConfigSynonym.source}.
+                </div>
               )}
-            </Flex>
+            </div>
             {Boolean(globalError) && (
-              <Alert my={2} status="error">
-                <AlertIcon />
-                {globalError}
+              <Alert className="mt-2" variant="destructive">
+                <AlertDescription>{globalError}</AlertDescription>
               </Alert>
             )}
-          </ModalBody>
-          <ModalFooter display="flex" gap={2}>
+          </DialogBody>
+          <DialogFooter>
+            {editedEntry.isExplicitlySet ? (
+              <Button className="mr-auto" disabled={isSubmitting} onClick={handleReset} type="button" variant="ghost">
+                Reset to default
+              </Button>
+            ) : null}
             <Button
+              disabled={isSubmitting}
               onClick={() => {
                 onClose();
               }}
+              type="button"
               variant="ghost"
             >
               Cancel
             </Button>
-            <Button isDisabled={isSubmitting} type="submit" variant="solid">
+            <Button disabled={isSubmitting} type="submit">
               Save changes
             </Button>
-          </ModalFooter>
-        </ModalContent>
-      </form>
-    </Modal>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
   );
 };
 
-const ConfigurationEditor: FC<ConfigurationEditorProps> = (props) => {
-  const [filter, setFilter] = useState<string>('');
+const ConfigurationEditorLegacy: FC<ConfigurationEditorProps> = (props) => {
+  const navigate = useNavigate({ from: '/topics/$topicName/' });
+  const { configFilter = '' } = useSearch({ from: '/topics/$topicName/' });
   const [editedEntry, setEditedEntry] = useState<ConfigEntryExtended | null>(null);
   const topicPermissions = useApiStoreHook((s) => s.topicPermissions.get(props.targetTopic));
 
+  const setFilter = (value: string) => {
+    navigate({ search: (prev) => ({ ...prev, configFilter: value || undefined }), replace: true });
+  };
+
   const editConfig = (configEntry: ConfigEntryExtended) => {
     setEditedEntry(configEntry);
   };
@@ -236,8 +316,11 @@ const ConfigurationEditor: FC<ConfigurationEditorProps> = (props) => {
   const hasEditPermissions = topic ? (topicPermissions?.canEditTopicConfig ?? true) : true;
 
   let entries = props.entries;
-  if (filter) {
-    entries = entries.filter((x) => x.name.includes(filter) || (x.value ?? '').includes(filter));
+  if (configFilter) {
+    // Match name/documentation only — never config values. `configFilter` is URL-backed,
+    // so matching `x.value` would leak sensitive/internal values into browser history and
+    // shareable links.
+    entries = entries.filter((x) => x.name.includes(configFilter) || (x.documentation ?? '').includes(configFilter));
   }
 
   const entryOrder = {
@@ -281,7 +364,7 @@ const ConfigurationEditor: FC<ConfigurationEditorProps> = (props) => {
   categories.sort((a, b) => displayOrder.indexOf(a.key ?? '') - displayOrder.indexOf(b.key ?? ''));
 
   return (
-    <Box pt={4}>
+    <div>
       {editedEntry !== null && (
         <ConfigEditorForm
           editedEntry={editedEntry}
@@ -294,8 +377,18 @@ const ConfigurationEditor: FC<ConfigurationEditorProps> = (props) => {
           targetTopic={props.targetTopic}
         />
       )}
-      <div className="configGroupTable" data-testid="config-group-table">
-        <SearchField icon="filter" placeholderText="Filter" searchText={filter} setSearchText={setFilter} />
+      <div
+        className="grid w-full grid-cols-[minmax(300px,auto)_auto_auto_1fr] items-center gap-3"
+        data-testid="config-group-table"
+      >
+        <div className="col-span-4 mb-4">
+          <InputGroup>
+            <InputGroupAddon>
+              <Search className="size-4" />
+            </InputGroupAddon>
+            <InputGroupInput onChange={(e) => setFilter(e.target.value)} placeholder="Filter" value={configFilter} />
+          </InputGroup>
+        </div>
         {categories.map((x) => (
           <ConfigGroup
             entries={x.items}
@@ -306,10 +399,321 @@ const ConfigurationEditor: FC<ConfigurationEditorProps> = (props) => {
           />
         ))}
       </div>
-    </Box>
+    </div>
+  );
+};
+
+// ── Grouped, navigable layout (behind the `enableNewTopicPage` feature flag) ─────
+
+type ConfigSection = {
+  name: string;
+  blurb: string;
+  rows: ConfigEntryExtended[];
+  modifiedCount: number;
+};
+
+const ConfigurationEditorGrouped: FC<ConfigurationEditorProps> = (props) => {
+  const navigate = useNavigate({ from: '/topics/$topicName/' });
+  const { configFilter = '', configScope = 'all' } = useSearch({ from: '/topics/$topicName/' });
+  const scope = configScope;
+  const [editedEntry, setEditedEntry] = useState<ConfigEntryExtended | null>(null);
+  const [activeCategory, setActiveCategory] = useState<string | null>(null);
+  const topicPermissions = useApiStoreHook((s) => s.topicPermissions.get(props.targetTopic));
+
+  // The sections render in their own scroll container; clicking a sidebar category
+  // scrolls to its section *within this panel* (not by filtering, and without
+  // scrolling the whole page).
+  const sectionsContainerRef = useRef<HTMLDivElement>(null);
+  const sectionRefs = useRef<Record<string, HTMLElement | null>>({});
+
+  const scrollToCategory = (name: string) => {
+    const container = sectionsContainerRef.current;
+    const section = sectionRefs.current[name];
+    if (!(container && section)) {
+      return;
+    }
+    const top = section.getBoundingClientRect().top - container.getBoundingClientRect().top + container.scrollTop;
+    container.scrollTo({ top, behavior: 'smooth' });
+    setActiveCategory(name);
+  };
+
+  const topic = props.targetTopic;
+  const hasEditPermissions = topic ? (topicPermissions?.canEditTopicConfig ?? true) : true;
+
+  const setFilter = (value: string) => {
+    navigate({ search: (prev) => ({ ...prev, configFilter: value || undefined }), replace: true });
+  };
+
+  const setScope = (value: 'all' | 'modified') => {
+    navigate({ search: (prev) => ({ ...prev, configScope: value === 'all' ? undefined : value }), replace: true });
+  };
+
+  const query = configFilter.toLowerCase();
+  const totalModifiedCount = useMemo(() => props.entries.filter(isConfigModified).length, [props.entries]);
+
+  const sections = useMemo<ConfigSection[]>(() => {
+    const matchesQuery = (e: ConfigEntryExtended) =>
+      !query || e.name.toLowerCase().includes(query) || (e.documentation ?? '').toLowerCase().includes(query);
+
+    return CONFIG_CATEGORIES.map(({ name, blurb }) => {
+      const rows = props.entries.filter(
+        (e) => categoryForEntry(e) === name && matchesQuery(e) && (scope === 'all' || isConfigModified(e))
+      );
+      return { name, blurb, rows, modifiedCount: rows.filter(isConfigModified).length };
+    }).filter((s) => s.rows.length > 0);
+  }, [props.entries, query, scope]);
+
+  // Sidebar is a stable index of the topic's categories — not subject to the
+  // search/scope filter, so it never reflows as you type or toggle Modified.
+  const sidebarCategories = useMemo(
+    () =>
+      CONFIG_CATEGORIES.map(({ name }) => {
+        const categoryEntries = props.entries.filter((e) => categoryForEntry(e) === name);
+        return { name, count: categoryEntries.length, modifiedCount: categoryEntries.filter(isConfigModified).length };
+      }).filter((c) => c.count > 0),
+    [props.entries]
+  );
+
+  // Scroll-spy: highlight the sidebar category whose section is at the top of the
+  // scroll container as the user scrolls. Re-attaches whenever the rendered section
+  // set changes so the observer always tracks the current section elements.
+  // biome-ignore lint/correctness/useExhaustiveDependencies: re-run on section set change
+  useEffect(() => {
+    const container = sectionsContainerRef.current;
+    if (!container) {
+      return;
+    }
+    const observer = new IntersectionObserver(
+      (observed) => {
+        const topmost = observed
+          .filter((e) => e.isIntersecting)
+          .sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top)[0];
+        if (topmost) {
+          setActiveCategory(topmost.target.getAttribute('data-category'));
+        }
+      },
+      { root: container, rootMargin: '0px 0px -70% 0px', threshold: 0 }
+    );
+    for (const el of Object.values(sectionRefs.current)) {
+      if (el) {
+        observer.observe(el);
+      }
+    }
+    return () => observer.disconnect();
+  }, [sections]);
+
+  return (
+    <div className="grid grid-cols-[240px_1fr] gap-6" data-testid="config-group-table">
+      {editedEntry !== null && (
+        <ConfigEditorForm
+          editedEntry={editedEntry}
+          onClose={() => setEditedEntry(null)}
+          onSuccess={() => props.onForceRefresh()}
+          targetTopic={props.targetTopic}
+        />
+      )}
+
+      <aside className="sticky top-4 self-start">
+        <nav aria-label="Configuration categories" className="flex flex-col gap-1">
+          {sidebarCategories.map((c) => {
+            const active = c.name === activeCategory;
+            return (
+              <button
+                aria-current={active ? 'true' : undefined}
+                className={`flex items-center justify-between gap-2 rounded-md px-3 py-2 text-left text-sm transition-colors ${
+                  active ? 'bg-muted font-medium' : 'hover:bg-muted/50'
+                }`}
+                key={c.name}
+                onClick={() => scrollToCategory(c.name)}
+                type="button"
+              >
+                <span className="min-w-0 truncate">{c.name}</span>
+                {c.modifiedCount > 0 ? (
+                  <Badge aria-label={`${c.modifiedCount} modified`} size="sm" variant="info-inverted">
+                    {c.modifiedCount}
+                  </Badge>
+                ) : (
+                  <Badge size="sm" variant="neutral-outline">
+                    {c.count}
+                  </Badge>
+                )}
+              </button>
+            );
+          })}
+        </nav>
+      </aside>
+
+      <div className="flex min-w-0 flex-col gap-4">
+        <div className="flex flex-wrap items-center gap-3">
+          <div className="min-w-[240px] flex-1">
+            <InputGroup>
+              <InputGroupAddon>
+                <Search className="size-4" />
+              </InputGroupAddon>
+              <InputGroupInput
+                aria-label="Filter configuration"
+                onChange={(e) => setFilter(e.target.value)}
+                placeholder="Filter"
+                value={configFilter}
+              />
+              {configFilter ? (
+                <InputGroupAddon align="inline-end">
+                  <InputGroupButton aria-label="Clear filter" onClick={() => setFilter('')} size="icon-xs">
+                    <XIcon className="size-4" />
+                  </InputGroupButton>
+                </InputGroupAddon>
+              ) : null}
+            </InputGroup>
+          </div>
+          <ToggleGroup
+            onValueChange={(v) => {
+              if (v) {
+                setScope(v as 'all' | 'modified');
+              }
+            }}
+            type="single"
+            value={scope}
+          >
+            <ToggleGroupItem value="all">All</ToggleGroupItem>
+            <ToggleGroupItem value="modified">
+              Modified
+              {totalModifiedCount > 0 && (
+                <Badge className="ml-2" size="sm" variant="info-inverted">
+                  {totalModifiedCount}
+                </Badge>
+              )}
+            </ToggleGroupItem>
+          </ToggleGroup>
+        </div>
+
+        <div className="flex max-h-[calc(100vh-16rem)] flex-col gap-6 overflow-y-auto pr-1" ref={sectionsContainerRef}>
+          {sections.length === 0 ? (
+            <Empty>
+              <EmptyDescription>No configuration entries match your filters</EmptyDescription>
+            </Empty>
+          ) : (
+            sections.map((s) => (
+              <section
+                aria-labelledby={`config-section-${s.name}`}
+                data-category={s.name}
+                key={s.name}
+                ref={(el) => {
+                  sectionRefs.current[s.name] = el;
+                }}
+              >
+                <div className="mb-3 flex flex-col">
+                  <h3 className="font-semibold text-lg" id={`config-section-${s.name}`}>
+                    {s.name}
+                  </h3>
+                  <p className="text-muted-foreground text-sm">{s.blurb}</p>
+                </div>
+                <div className="divide-y rounded-lg border">
+                  {s.rows.map((entry) => (
+                    <ConfigRow
+                      entry={entry}
+                      hasEditPermissions={hasEditPermissions}
+                      key={entry.name}
+                      onEditEntry={setEditedEntry}
+                    />
+                  ))}
+                </div>
+              </section>
+            ))
+          )}
+        </div>
+      </div>
+    </div>
   );
 };
 
+const ConfigRow: FC<{
+  entry: ConfigEntryExtended;
+  hasEditPermissions: boolean;
+  onEditEntry: (entry: ConfigEntryExtended) => void;
+}> = ({ entry, hasEditPermissions, onEditEntry }) => {
+  const { canEdit, reason: nonEdittableReason } = isTopicConfigEdittable(entry, hasEditPermissions);
+  const modified = isConfigModified(entry);
+  const friendlyValue = formatConfigValue(entry.name, entry.value, 'friendly');
+  const defaultSynonym = getDefaultConfigSynonym(entry);
+  const defaultValue = defaultSynonym ? formatConfigValue(entry.name, defaultSynonym.value, 'friendly') : null;
+
+  const valueButton = (
+    <button
+      className={
+        canEdit
+          ? 'inline-flex cursor-pointer items-center gap-1.5 rounded-sm px-1.5 py-0.5 hover:bg-muted hover:text-primary'
+          : 'inline-flex cursor-default items-center gap-1.5 rounded-sm px-1.5 py-0.5 [&_svg]:opacity-50'
+      }
+      onClick={() => {
+        if (canEdit) {
+          onEditEntry(entry);
+        }
+      }}
+      type="button"
+    >
+      <span className="font-mono text-sm">{friendlyValue}</span>
+      <EditIcon className="size-4" />
+    </button>
+  );
+
+  return (
+    <div className={`flex items-start justify-between gap-4 px-4 py-3 ${modified ? 'bg-muted/30' : ''}`}>
+      <div className="flex min-w-0 flex-col gap-1">
+        <div className="flex flex-wrap items-center gap-2">
+          {entry.documentation ? (
+            <Popover>
+              <PopoverTrigger asChild>
+                <button
+                  className="cursor-pointer font-mono text-sm underline decoration-dotted underline-offset-4 hover:text-primary"
+                  type="button"
+                >
+                  {entry.name}
+                </button>
+              </PopoverTrigger>
+              <PopoverContent className="w-80">
+                <div className="flex flex-col gap-2">
+                  <p className="font-bold">{entry.name}</p>
+                  <p className="text-sm">{entry.documentation}</p>
+                  <p className="text-muted-foreground text-sm">{getConfigDescription(entry.source)}</p>
+                </div>
+              </PopoverContent>
+            </Popover>
+          ) : (
+            <span className="font-mono text-sm">{entry.name}</span>
+          )}
+          {modified ? (
+            <Badge size="sm" variant="info-inverted">
+              Modified
+            </Badge>
+          ) : null}
+        </div>
+        {modified && defaultValue !== null && (
+          <p className="text-muted-foreground text-xs">
+            Default: <span className="font-mono">{defaultValue}</span>
+          </p>
+        )}
+      </div>
+      <div className="flex shrink-0 items-center gap-1">
+        {canEdit ? (
+          valueButton
+        ) : (
+          <Tooltip>
+            <TooltipTrigger asChild>{valueButton}</TooltipTrigger>
+            <TooltipContent side="left">{nonEdittableReason}</TooltipContent>
+          </Tooltip>
+        )}
+      </div>
+    </div>
+  );
+};
+
+const ConfigurationEditor: FC<ConfigurationEditorProps> = (props) =>
+  isFeatureFlagEnabled('enableNewTopicPage') ? (
+    <ConfigurationEditorGrouped {...props} />
+  ) : (
+    <ConfigurationEditorLegacy {...props} />
+  );
+
 export default ConfigurationEditor;
 
 const ConfigGroup = (p: {
@@ -319,8 +723,8 @@ const ConfigGroup = (p: {
   hasEditPermissions: boolean;
 }) => (
   <>
-    <div className="configGroupSpacer" />
-    {Boolean(p.groupName) && <div className="configGroupTitle">{p.groupName}</div>}
+    <div className="col-span-4 my-4 h-px bg-border first:hidden" />
+    {Boolean(p.groupName) && <div className="configGroupTitle col-span-4 font-semibold text-2xl">{p.groupName}</div>}
     {p.entries.map((e) => (
       <ConfigEntryComponent
         entry={e}
@@ -342,47 +746,55 @@ const ConfigEntryComponent = (p: {
   const entry = p.entry;
   const friendlyValue = formatConfigValue(entry.name, entry.value, 'friendly');
 
+  const editButton = (
+    <button
+      className={
+        canEdit
+          ? 'inline-flex cursor-pointer rounded-sm p-0.5 hover:bg-muted hover:text-primary'
+          : 'inline-flex cursor-default rounded-sm p-0.5 [&_svg]:opacity-50'
+      }
+      onClick={() => {
+        if (canEdit) {
+          p.onEditEntry(p.entry);
+        }
+      }}
+      type="button"
+    >
+      <EditIcon className="size-[21px]" />
+    </button>
+  );
+
   return (
     <>
-      <Flex direction="column">
-        <Text fontWeight="600">{p.entry.name}</Text>
-      </Flex>
+      <div className="flex flex-col">
+        <span className="font-semibold">{p.entry.name}</span>
+      </div>
 
-      <Text>{friendlyValue}</Text>
+      <span>{friendlyValue}</span>
 
-      <span className="isEditted">{Boolean(entry.isExplicitlySet) && 'Custom'}</span>
+      <span className="mx-5 opacity-50">{Boolean(entry.isExplicitlySet) && 'Custom'}</span>
 
-      <span className="configButtons">
-        <Tooltip hasArrow isDisabled={canEdit} label={nonEdittableReason} placement="left">
-          <button
-            className={`btnEdit${canEdit ? '' : 'disabled'}`}
-            onClick={() => {
-              if (canEdit) {
-                p.onEditEntry(p.entry);
-              }
-            }}
-            type="button"
-          >
-            <Icon as={EditIcon} />
-          </button>
-        </Tooltip>
+      <span className="inline-flex items-center gap-3 text-[hsl(0_0%_35%)]">
+        {canEdit ? (
+          editButton
+        ) : (
+          <Tooltip>
+            <TooltipTrigger asChild>{editButton}</TooltipTrigger>
+            <TooltipContent side="left">{nonEdittableReason}</TooltipContent>
+          </Tooltip>
+        )}
         {Boolean(entry.documentation) && (
-          <Popover
-            content={
-              <Flex flexDirection="column" gap={2}>
-                <Text fontSize="lg" fontWeight="bold">
-                  {entry.name}
-                </Text>
-                <Text fontSize="sm">{entry.documentation}</Text>
-                <Text fontSize="sm">{getConfigDescription(entry.source)}</Text>
-              </Flex>
-            }
-            hideCloseButton
-            size="lg"
-          >
-            <Box>
-              <Icon as={InfoIcon} />
-            </Box>
+          <Popover>
+            <PopoverTrigger className="inline-flex cursor-pointer rounded-sm p-0.5 hover:bg-muted">
+              <InfoIcon className="size-[18px]" />
+            </PopoverTrigger>
+            <PopoverContent className="w-80">
+              <div className="flex flex-col gap-2">
+                <p className="font-bold text-lg">{entry.name}</p>
+                <p className="text-sm">{entry.documentation}</p>
+                <p className="text-sm">{getConfigDescription(entry.source)}</p>
+              </div>
+            </PopoverContent>
           </Popover>
         )}
       </span>
@@ -429,51 +841,41 @@ export const ConfigEntryEditorController = <T extends string | number>(p: {
   switch (entry.frontendFormat) {
     case 'BOOLEAN':
       return (
-        <SingleSelect<T>
-          onChange={onChange}
-          options={[
-            { value: 'false' as T, label: 'False' },
-            { value: 'true' as T, label: 'True' },
-          ]}
-          value={value}
-        />
+        <Select onValueChange={(v) => onChange(v as T)} value={String(value)}>
+          <SelectTrigger>
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="false">False</SelectItem>
+            <SelectItem value="true">True</SelectItem>
+          </SelectContent>
+        </Select>
       );
 
     case 'SELECT':
       return (
-        <SingleSelect
-          chakraStyles={{ container: (base) => ({ ...base, minWidth: '240px' }) }}
-          className={p.className}
-          onChange={onChange}
-          options={
-            entry.enumValues?.map((enumValue) => ({
-              value: enumValue as T,
-              label: enumValue,
-            })) ?? []
-          }
-          value={value}
-        />
+        <Select onValueChange={(v) => onChange(v as T)} value={String(value)}>
+          <SelectTrigger className={p.className}>
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {(entry.enumValues ?? []).map((v) => (
+              <SelectItem key={v} value={v}>
+                {v}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
       );
 
     case 'BYTE_SIZE':
-      return (
-        <DataSizeSelect
-          allowInfinite={false}
-          onChange={(e) => onChange(Math.round(e) as T)}
-          valueBytes={Number(value ?? 0)}
-        />
-      );
+      return <DataSizeSelect onChange={(e) => onChange(Math.round(e) as T)} valueBytes={Number(value ?? 0)} />;
+
     case 'DURATION':
-      return (
-        <DurationSelect
-          allowInfinite={false}
-          onChange={(e) => onChange(Math.round(e) as T)}
-          valueMilliseconds={Number(value ?? 0)}
-        />
-      );
+      return <DurationSelect onChange={(e) => onChange(Math.round(e) as T)} valueMilliseconds={Number(value ?? 0)} />;
 
     case 'PASSWORD':
-      return <PasswordInput onChange={(x) => onChange(x.target.value as T)} value={value ?? ''} />;
+      return <Input onChange={(x) => onChange(x.target.value as T)} type="password" value={String(value ?? '')} />;
 
     case 'RATIO':
       return <RatioInput onChange={(x) => onChange(x as T)} value={Number(value || entry.value)} />;
@@ -483,6 +885,7 @@ export const ConfigEntryEditorController = <T extends string | number>(p: {
 
     case 'DECIMAL':
       return <NumInput onChange={(e) => onChange(e as T)} value={Number(value)} />;
+
     default:
       return <Input onChange={(e) => onChange(e.target.value as T)} value={String(value)} />;
   }
@@ -501,3 +904,176 @@ function getConfigDescription(source: string): string {
       return '';
   }
 }
+
+// ── Local input helpers ────────────────────────────────────────────────────────
+
+function NumInput(p: {
+  value: number | undefined;
+  onChange: (n: number | undefined) => void;
+  placeholder?: string;
+  min?: number;
+  max?: number;
+  disabled?: boolean;
+  addonAfter?: ReactNode;
+}) {
+  const [editValue, setEditValue] = useState(p.value === undefined ? undefined : String(p.value));
+  useEffect(() => setEditValue(p.value === undefined ? undefined : String(p.value)), [p.value]);
+
+  const commit = (x: number | undefined) => {
+    if (p.disabled) return;
+    let v = x;
+    if (v !== undefined && p.min !== undefined && v < p.min) v = p.min;
+    if (v !== undefined && p.max !== undefined && v > p.max) v = p.max;
+    setEditValue(v === undefined ? undefined : String(v));
+    p.onChange?.(v);
+  };
+
+  const input = (
+    <Input
+      className={p.addonAfter ? 'flex-1 rounded-r-none border-r-0' : undefined}
+      disabled={p.disabled}
+      onBlur={() => {
+        if (!editValue) {
+          commit(undefined);
+          setEditValue('');
+          return;
+        }
+        const n = Number(editValue);
+        if (!Number.isFinite(n)) {
+          commit(undefined);
+          setEditValue('');
+          return;
+        }
+        commit(n);
+      }}
+      onChange={(e) => {
+        setEditValue(e.target.value);
+        const n = Number(e.target.value);
+        if (e.target.value !== '' && !Number.isNaN(n)) p.onChange?.(n);
+        else p.onChange?.(undefined);
+      }}
+      onWheel={(e) => commit(Math.round((p.value ?? 0) - Math.sign(e.deltaY)))}
+      placeholder={p.placeholder}
+      spellCheck={false}
+      value={p.disabled && p.placeholder && p.value === undefined ? '' : (editValue ?? '')}
+    />
+  );
+
+  if (!p.addonAfter) return input;
+  return (
+    <div className="flex">
+      {input}
+      {p.addonAfter}
+    </div>
+  );
+}
+
+function UnitInput<U extends string>({
+  baseValue,
+  unitFactors,
+  onChange,
+}: {
+  baseValue: number;
+  unitFactors: Readonly<Record<U, number>>;
+  onChange: (v: number) => void;
+}) {
+  const getInitialUnit = (): U => {
+    const pairs = (Object.entries(unitFactors) as [U, number][])
+      .map(([unit, factor]) => ({ unit, text: String(baseValue / factor) }))
+      .sort((a, b) => a.text.length - b.text.length);
+    return pairs[0].unit;
+  };
+
+  const [unit, setUnit] = useState<U>(getInitialUnit);
+  const unitValue = baseValue / unitFactors[unit];
+
+  return (
+    <NumInput
+      addonAfter={
+        <Select onValueChange={(u) => setUnit(u as U)} value={unit}>
+          <SelectTrigger className="w-[100px] rounded-l-none">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {(Object.keys(unitFactors) as U[]).map((u) => (
+              <SelectItem key={u} value={u}>
+                {u}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      }
+      min={0}
+      onChange={(x) => onChange((x ?? 0) * unitFactors[unit])}
+      value={unitValue}
+    />
+  );
+}
+
+const dataSizeFactors = {
+  Bytes: 1,
+  KiB: 1024,
+  MiB: 1024 * 1024,
+  GiB: 1024 * 1024 * 1024,
+  TiB: 1024 * 1024 * 1024 * 1024,
+} as const;
+
+const durationFactors = {
+  ms: 1,
+  seconds: 1000,
+  minutes: 60_000,
+  hours: 3_600_000,
+  days: 86_400_000,
+} as const;
+
+function DataSizeSelect(p: { valueBytes: number; onChange: (v: number) => void }) {
+  return <UnitInput baseValue={p.valueBytes} onChange={p.onChange} unitFactors={dataSizeFactors} />;
+}
+
+function DurationSelect(p: { valueMilliseconds: number; onChange: (v: number) => void }) {
+  return <UnitInput baseValue={p.valueMilliseconds} onChange={p.onChange} unitFactors={durationFactors} />;
+}
+
+function RatioInput(p: { value: number; onChange: (ratio: number) => void }) {
+  const pct = Math.round(p.value * 100);
+  return (
+    <div className="space-y-3">
+      <div className="space-y-2">
+        <Label className="font-medium text-muted-foreground text-sm">Percentage ({pct}%)</Label>
+        <Slider
+          aria-label="Percentage slider"
+          className="w-full"
+          max={100}
+          min={0}
+          onValueChange={(values) => p.onChange(values[0] / 100)}
+          step={1}
+          value={[pct]}
+        />
+      </div>
+      <div className="flex items-center gap-2">
+        <Label className="whitespace-nowrap font-medium text-sm" htmlFor="ratio-input">
+          Precise value:
+        </Label>
+        <div className="relative flex-shrink-0">
+          <Input
+            aria-label="Percentage input"
+            className="w-20 pr-6 text-right"
+            id="ratio-input"
+            max={100}
+            min={0}
+            onChange={(e) => {
+              if (e.target.value === '') return;
+              const n = Number(e.target.value);
+              if (!Number.isNaN(n) && n >= 0 && n <= 100) p.onChange(n / 100);
+            }}
+            type="number"
+            value={pct}
+          />
+          <span className="pointer-events-none absolute top-1/2 right-2 -translate-y-1/2 text-muted-foreground text-sm">
+            %
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/components/pages/topics/topic-details.tsx b/frontend/src/components/pages/topics/topic-details.tsx
index 8e23c5c500..bf53dfbd4a 100644
--- a/frontend/src/components/pages/topics/topic-details.tsx
+++ b/frontend/src/components/pages/topics/topic-details.tsx
@@ -17,8 +17,19 @@ import type { ConfigEntry, Topic, TopicAction } from '../../../state/rest-interf
 import { uiSettings } from '../../../state/ui';
 import { uiState } from '../../../state/ui-state';
 import '../../../utils/array-extensions';
-import { Box, Button, Code, Flex, Popover, Result, Tooltip } from '@redpanda-data/ui';
 import { ErrorIcon, LockIcon, WarningIcon } from 'components/icons';
+import { Badge } from 'components/redpanda-ui/components/badge';
+import { Button } from 'components/redpanda-ui/components/button';
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyTitle,
+} from 'components/redpanda-ui/components/empty';
+import { Popover, PopoverContent, PopoverTrigger } from 'components/redpanda-ui/components/popover';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from 'components/redpanda-ui/components/tabs';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from 'components/redpanda-ui/components/tooltip';
 
 import DeleteRecordsModal from './DeleteRecordsModal/delete-records-modal';
 import { TopicQuickInfoStatistic } from './quick-info';
@@ -34,104 +45,87 @@ import { isServerless } from '../../../config';
 import { AppFeatures } from '../../../utils/env';
 import { DefaultSkeleton } from '../../../utils/tsx-utils';
 import PageContent from '../../misc/page-content';
-import Section from '../../misc/section';
-import Tabs from '../../misc/tabs/tabs';
 import { PageComponent, type PageInitHelper } from '../page';
 
 const TopicTabIds = ['messages', 'consumers', 'partitions', 'configuration', 'documentation', 'topicacl'] as const;
 export type TopicTabId = (typeof TopicTabIds)[number];
 
-// A tab (specifying title+content) that disable/lock itself if the user doesn't have some required permissions.
-class TopicTab {
-  readonly topicGetter: () => Topic | undefined | null;
+type TopicTabProps = {
+  topic: Topic;
   id: TopicTabId;
-  private readonly requiredPermission: TopicAction;
+  requiredPermission: TopicAction;
   titleText: React.ReactNode;
-  private readonly contentFunc: (topic: Topic) => React.ReactNode;
-  private readonly disableHooks?: ((topic: Topic) => React.ReactNode | undefined)[];
-
-  // biome-ignore lint/nursery/useMaxParams: Legacy class with many constructor parameters
-  constructor(
-    topicGetter: () => Topic | undefined | null,
-    id: TopicTabId,
-    requiredPermission: TopicAction,
-    titleText: React.ReactNode,
-    contentFunc: (topic: Topic) => React.ReactNode,
-    disableHooks?: ((topic: Topic) => React.ReactNode | undefined)[]
-  ) {
-    this.topicGetter = topicGetter;
-    this.id = id;
-    this.requiredPermission = requiredPermission;
-    this.titleText = titleText;
-    this.contentFunc = contentFunc;
-    this.disableHooks = disableHooks;
-  }
-
-  get isEnabled(): boolean {
-    const topic = this.topicGetter();
+  disableHooks?: ((topic: Topic) => React.ReactNode | undefined)[];
+  children: (topic: Topic) => React.ReactNode;
+};
 
-    if (topic && this.disableHooks) {
-      for (const h of this.disableHooks) {
-        if (h(topic)) {
-          return false;
-        }
+// Context controls whether TopicTab renders its trigger or its content panel.
+// The same <TopicTab> elements are rendered twice — once inside <TabsList> and
+// once outside — so each instance only renders the relevant part.
+const TopicTabModeCtx = React.createContext<'trigger' | 'content'>('content');
+
+const TopicTab: React.FC<TopicTabProps> = ({ topic, id, requiredPermission, titleText, disableHooks, children }) => {
+  const mode = React.useContext(TopicTabModeCtx);
+
+  let customTitle: React.ReactNode | undefined;
+  if (disableHooks) {
+    for (const h of disableHooks) {
+      const result = h(topic);
+      if (result) {
+        customTitle = result;
+        break;
       }
     }
-
-    if (!topic) {
-      return true; // no data yet
-    }
-    if (!topic.allowedActions || topic.allowedActions[0] === 'all') {
-      return true; // Redpanda Console free version
-    }
-
-    return topic.allowedActions.includes(this.requiredPermission);
-  }
-
-  get isDisabled(): boolean {
-    return !this.isEnabled;
   }
 
-  get title(): React.ReactNode {
-    if (this.isEnabled) {
-      return this.titleText;
-    }
-
-    const topic = this.topicGetter();
-    if (topic && this.disableHooks) {
-      for (const h of this.disableHooks) {
-        const replacementTitle = h(topic);
-        if (replacementTitle) {
-          return replacementTitle;
-        }
-      }
-    }
+  const hasPermission =
+    !topic.allowedActions || topic.allowedActions[0] === 'all' || topic.allowedActions.includes(requiredPermission);
+  const isDisabled = !!customTitle || !hasPermission;
+
+  const title =
+    customTitle ??
+    (hasPermission ? (
+      titleText
+    ) : (
+      <Popover>
+        <PopoverTrigger asChild>
+          <div>
+            <LockIcon size={16} /> {titleText}
+          </div>
+        </PopoverTrigger>
+        <PopoverContent>{`You're missing the required permission '${requiredPermission}' to view this tab`}</PopoverContent>
+      </Popover>
+    ));
 
+  if (mode === 'trigger') {
     return (
-      <Popover
-        content={`You're missing the required permission '${this.requiredPermission}' to view this tab`}
-        hideCloseButton={true}
+      <TabsTrigger
+        className="text-base aria-disabled:cursor-not-allowed aria-disabled:opacity-50 data-[state=active]:text-foreground"
+        disabled={isDisabled}
+        value={id}
+        variant="underline"
       >
-        <div>
-          <LockIcon size={16} /> {this.titleText}
-        </div>
-      </Popover>
+        {title}
+      </TabsTrigger>
     );
   }
 
-  get content(): React.ReactNode {
-    const topic = this.topicGetter();
-    if (topic) {
-      return this.contentFunc(topic);
-    }
-    return null;
-  }
-}
+  return (
+    <TabsContent className="mt-4" tabIndex={-1} value={id}>
+      {children(topic)}
+    </TabsContent>
+  );
+};
 
 const mkDocuTip = (text: string, icon?: JSX.Element) => (
-  <Tooltip hasArrow label={text} placement="left">
-    <span>{icon ?? null}Documentation</span>
-  </Tooltip>
+  <TooltipProvider>
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <span>{icon ?? null}Documentation</span>
+      </TooltipTrigger>
+      <TooltipContent side="left">{text}</TooltipContent>
+    </Tooltip>
+  </TooltipProvider>
 );
 const warnIcon = (
   <span style={{ fontSize: '15px', marginRight: '5px', transform: 'translateY(1px)', display: 'inline-block' }}>
@@ -220,6 +214,8 @@ const TopicDetailsContent = ({ topic, topicName }: { topic: Topic; topicName: st
 
   setTimeout(() => topicConfig && addBaseFavs(topicConfig));
 
+  const modifiedConfigCount = topicConfig?.filter((e) => e.isExplicitlySet).length ?? 0;
+
   const leaderLessPartitionIds = (api.clusterHealth?.leaderlessPartitions ?? []).find(
     ({ topicName: tn }) => tn === topicName
   )?.partitionIds;
@@ -227,117 +223,147 @@ const TopicDetailsContent = ({ topic, topicName }: { topic: Topic; topicName: st
     ({ topicName: tn }) => tn === topicName
   )?.partitionIds;
 
-  const topicTabs: TopicTab[] = [
-    new TopicTab(
-      () => topic,
-      'messages',
-      'viewMessages',
-      'Messages',
-      (t) => <TopicMessageView refreshTopicData={(force: boolean) => refreshTopicData(topicName, force)} topic={t} />
-    ),
-    new TopicTab(
-      () => topic,
-      'consumers',
-      'viewConsumers',
-      'Consumers',
-      (t) => <TopicConsumers topic={t} />
-    ),
-    new TopicTab(
-      () => topic,
-      'partitions',
-      'viewPartitions',
-      <Flex gap={1} key="partitions-title">
-        Partitions
-        {!!leaderLessPartitionIds && (
-          <Tooltip
-            hasArrow
-            label={`This topic has ${leaderLessPartitionIds.length} ${leaderLessPartitionIds.length === 1 ? 'a leaderless partition' : 'leaderless partitions'}`}
-            placement="top"
-          >
-            <Box>
-              <ErrorIcon color={colors.brandError} size={18} />
-            </Box>
-          </Tooltip>
-        )}
-        {!!underReplicatedPartitionIds && (
-          <Tooltip
-            hasArrow
-            label={`This topic has ${underReplicatedPartitionIds.length} ${underReplicatedPartitionIds.length === 1 ? 'an under-replicated partition' : 'under-replicated partitions'}`}
-            placement="top"
-          >
-            <Box>
-              <WarningIcon color={colors.brandWarning} size={18} />
-            </Box>
-          </Tooltip>
-        )}
-      </Flex>,
-      (t) => <TopicPartitions topic={t} />
-    ),
-    new TopicTab(
-      () => topic,
-      'configuration',
-      'viewConfig',
-      'Configuration',
-      (t) => <TopicConfiguration topic={t} />
-    ),
-    new TopicTab(
-      () => topic,
-      'topicacl',
-      'seeTopic',
-      'ACL',
-      () => <AclList acl={topicAcls} />,
-      [
-        () => {
-          if (
-            AppFeatures.SINGLE_SIGN_ON &&
-            api.userData !== null &&
-            api.userData !== undefined &&
-            !api.userData.canListAcls
-          ) {
-            return (
-              <Popover content={"You need the cluster-permission 'viewAcl' to view this tab"} hideCloseButton={true}>
-                <div>
-                  {' '}
-                  <LockIcon size={16} /> ACL
-                </div>
-              </Popover>
-            );
-          }
-          return;
-        },
-      ]
-    ),
-    new TopicTab(
-      () => topic,
-      'documentation',
-      'seeTopic',
-      'Documentation',
-      (t) => <TopicDocumentation topic={t} />,
-      [
-        (t) => (t.documentation === 'NOT_CONFIGURED' ? mkDocuTip('Topic documentation is not configured') : null),
-        (t) =>
-          t.documentation === 'NOT_EXISTENT'
-            ? mkDocuTip('Documentation for this topic was not found in the configured repository', warnIcon)
-            : null,
-      ]
-    ),
+  const aclDisableHooks: ((topic: Topic) => React.ReactNode | undefined)[] = [
+    () => {
+      if (
+        AppFeatures.SINGLE_SIGN_ON &&
+        api.userData !== null &&
+        api.userData !== undefined &&
+        !api.userData.canListAcls
+      ) {
+        return (
+          <Popover>
+            <PopoverTrigger asChild>
+              <div>
+                <LockIcon size={16} /> ACL
+              </div>
+            </PopoverTrigger>
+            <PopoverContent>You need the cluster-permission &apos;viewAcl&apos; to view this tab</PopoverContent>
+          </Popover>
+        );
+      }
+    },
   ];
 
-  if (isServerless()) {
-    topicTabs.splice(
-      topicTabs.findIndex((t) => t.id === 'documentation'),
-      1
-    );
-  }
+  const docuDisableHooks: ((topic: Topic) => React.ReactNode | undefined)[] = [
+    (t) => (t.documentation === 'NOT_CONFIGURED' ? mkDocuTip('Topic documentation is not configured') : null),
+    (t) =>
+      t.documentation === 'NOT_EXISTENT'
+        ? mkDocuTip('Documentation for this topic was not found in the configured repository', warnIcon)
+        : null,
+  ];
 
-  const selectedTabId = getSelectedTabId(topicTabs);
+  const enabledTabIds = new Set<TopicTabId>(
+    [
+      isTopicTabEnabled(topic, 'viewMessages') && 'messages',
+      isTopicTabEnabled(topic, 'viewConsumers') && 'consumers',
+      isTopicTabEnabled(topic, 'viewPartitions') && 'partitions',
+      isTopicTabEnabled(topic, 'viewConfig') && 'configuration',
+      isTopicTabEnabled(topic, 'seeTopic', aclDisableHooks) && 'topicacl',
+      !isServerless() && isTopicTabEnabled(topic, 'seeTopic', docuDisableHooks) && 'documentation',
+    ].filter(Boolean) as TopicTabId[]
+  );
+
+  const selectedTabId = getSelectedTabId(enabledTabIds);
+
+  const tabElements = (
+    <>
+      <TopicTab id="messages" requiredPermission="viewMessages" titleText="Messages" topic={topic}>
+        {(t) => (
+          <TopicMessageView refreshTopicData={(force: boolean) => refreshTopicData(topicName, force)} topic={t} />
+        )}
+      </TopicTab>
+      <TopicTab id="consumers" requiredPermission="viewConsumers" titleText="Consumers" topic={topic}>
+        {(t) => <TopicConsumers topic={t} />}
+      </TopicTab>
+      <TopicTab
+        id="partitions"
+        requiredPermission="viewPartitions"
+        titleText={
+          <div className="flex gap-1" key="partitions-title">
+            Partitions
+            {!!leaderLessPartitionIds && (
+              <TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <div>
+                      <ErrorIcon color={colors.brandError} size={18} />
+                    </div>
+                  </TooltipTrigger>
+                  <TooltipContent side="top">
+                    {`This topic has ${leaderLessPartitionIds.length} ${leaderLessPartitionIds.length === 1 ? 'a leaderless partition' : 'leaderless partitions'}`}
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+            )}
+            {!!underReplicatedPartitionIds && (
+              <TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <div>
+                      <WarningIcon color={colors.brandWarning} size={18} />
+                    </div>
+                  </TooltipTrigger>
+                  <TooltipContent side="top">
+                    {`This topic has ${underReplicatedPartitionIds.length} ${underReplicatedPartitionIds.length === 1 ? 'an under-replicated partition' : 'under-replicated partitions'}`}
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+            )}
+          </div>
+        }
+        topic={topic}
+      >
+        {(t) => <TopicPartitions topic={t} />}
+      </TopicTab>
+      <TopicTab
+        id="configuration"
+        requiredPermission="viewConfig"
+        titleText={
+          <span className="inline-flex items-center gap-2">
+            Configuration
+            {modifiedConfigCount > 0 ? (
+              <Badge aria-label={`${modifiedConfigCount} modified`} size="sm" variant="info-inverted">
+                {modifiedConfigCount}
+              </Badge>
+            ) : null}
+          </span>
+        }
+        topic={topic}
+      >
+        {(t) => <TopicConfiguration topic={t} />}
+      </TopicTab>
+      <TopicTab
+        disableHooks={aclDisableHooks}
+        id="topicacl"
+        requiredPermission="seeTopic"
+        titleText="ACL"
+        topic={topic}
+      >
+        {() => <AclList acl={topicAcls} />}
+      </TopicTab>
+      {!isServerless() && (
+        <TopicTab
+          disableHooks={docuDisableHooks}
+          id="documentation"
+          requiredPermission="seeTopic"
+          titleText="Documentation"
+          topic={topic}
+        >
+          {(t) => <TopicDocumentation topic={t} />}
+        </TopicTab>
+      )}
+    </>
+  );
 
   const setTabPage = (activeKey: string): void => {
     uiSettings.topicDetailsActiveTabKey = activeKey as TopicTabId;
 
     const loc = appGlobal.location;
     loc.hash = String(activeKey);
-    appGlobal.historyReplace(`${loc.pathname}#${loc.hash}`);
+    // Preserve the search string so URL-backed tab state (e.g. Configuration's
+    // configFilter/configScope) survives switching tabs and coming back.
+    appGlobal.historyReplace(`${loc.pathname}${loc.searchStr}#${loc.hash}`);
 
     refreshTopicData(topicName, false);
   };
@@ -345,38 +371,32 @@ const TopicDetailsContent = ({ topic, topicName }: { topic: Topic; topicName: st
   return (
     <>
       <PageContent key={'b'}>
-        {Boolean(uiSettings.topicDetailsShowStatisticsBar) && <TopicQuickInfoStatistic topic={topic} />}
-
-        <Flex gap={2} mb={4}>
-          <Button
-            data-testid="produce-record-button"
-            onClick={() => {
-              appGlobal.historyPush(`/topics/${encodeURIComponent(topic.topicName)}/produce-record`);
-            }}
-            variant="outline"
-          >
-            Produce Record
-          </Button>
-          {DeleteRecordsMenuItem(topic.cleanupPolicy === 'compact', topic.allowedActions, () => {
-            setDeleteRecordsModalAlive(true);
-          })}
-        </Flex>
-
-        {/* Tabs:  Messages, Configuration */}
-        <Section>
-          <Tabs
-            data-testid="topic-details-tabs"
-            isFitted
-            onChange={setTabPage}
-            selectedTabKey={selectedTabId}
-            tabs={topicTabs.map(({ id, title, content, isDisabled }) => ({
-              key: id,
-              disabled: isDisabled,
-              title,
-              content,
-            }))}
-          />
-        </Section>
+        <div className="mb-4 flex flex-col gap-2 md:flex-row md:items-center">
+          {Boolean(uiSettings.topicDetailsShowStatisticsBar) && <TopicQuickInfoStatistic topic={topic} />}
+          <div className="flex shrink-0 items-center gap-2 md:ml-auto">
+            <Button
+              data-testid="produce-record-button"
+              onClick={() => {
+                appGlobal.historyPush(`/topics/${encodeURIComponent(topic.topicName)}/produce-record`);
+              }}
+              variant="outline"
+            >
+              Produce Record
+            </Button>
+            {DeleteRecordsMenuItem(topic.cleanupPolicy === 'compact', topic.allowedActions, () => {
+              setDeleteRecordsModalAlive(true);
+            })}
+          </div>
+        </div>
+
+        <Tabs data-testid="topic-details-tabs" onValueChange={setTabPage} value={selectedTabId}>
+          <TopicTabModeCtx.Provider value="trigger">
+            <TabsList activeClassName="after:bg-foreground" className="w-fit" variant="underline">
+              {tabElements}
+            </TabsList>
+          </TopicTabModeCtx.Provider>
+          <TopicTabModeCtx.Provider value="content">{tabElements}</TopicTabModeCtx.Provider>
+        </Tabs>
       </PageContent>
       {Boolean(deleteRecordsModalAlive) && (
         <DeleteRecordsModal
@@ -419,7 +439,22 @@ function addBaseFavs(topicConfig: ConfigEntry[]): void {
   }
 }
 
-function getSelectedTabId(topicTabs: TopicTab[]): TopicTabId {
+function isTopicTabEnabled(
+  topic: Topic,
+  requiredPermission: TopicAction,
+  disableHooks?: ((topic: Topic) => React.ReactNode | undefined)[]
+): boolean {
+  if (disableHooks) {
+    for (const h of disableHooks) {
+      if (h(topic)) return false;
+    }
+  }
+  return (
+    !topic.allowedActions || topic.allowedActions[0] === 'all' || topic.allowedActions.includes(requiredPermission)
+  );
+}
+
+function getSelectedTabId(enabledTabIds: Set<TopicTabId>): TopicTabId {
   function computeTabId() {
     // use url anchor if possible
     let key = appGlobal.location.hash.replace('#', '');
@@ -434,33 +469,31 @@ function getSelectedTabId(topicTabs: TopicTab[]): TopicTabId {
       return key as TopicTabId;
     }
 
-    // default to partitions
     return 'messages';
   }
 
   const id = computeTabId();
-  if (topicTabs.first((t) => t.id === id)?.isEnabled) {
+  if (enabledTabIds.has(id)) {
     return id;
   }
-  return topicTabs.first((t) => t?.isEnabled)?.id ?? 'messages';
+  return TopicTabIds.find((t) => enabledTabIds.has(t)) ?? 'messages';
 }
 
 function topicNotFound(name: string) {
   return (
-    <Result
-      extra={
-        <Button onClick={() => appGlobal.historyPush('/topics')} variant="solid">
+    <Empty>
+      <EmptyHeader>
+        <EmptyTitle>404</EmptyTitle>
+        <EmptyDescription>
+          The topic <code className="font-mono">{name}</code> does not exist.
+        </EmptyDescription>
+      </EmptyHeader>
+      <EmptyContent>
+        <Button onClick={() => appGlobal.historyPush('/topics')} variant="primary">
           Go Back
         </Button>
-      }
-      status={404}
-      title="404"
-      userMessage={
-        <div>
-          The topic <Code>{name}</Code> does not exist.
-        </div>
-      }
-    />
+      </EmptyContent>
+    </Empty>
   );
 }
 
diff --git a/frontend/src/components/redpanda-ui/components/data-table/index.tsx b/frontend/src/components/redpanda-ui/components/data-table/index.tsx
index 54eed39cbb..687898c300 100644
--- a/frontend/src/components/redpanda-ui/components/data-table/index.tsx
+++ b/frontend/src/components/redpanda-ui/components/data-table/index.tsx
@@ -219,7 +219,7 @@ export function DataTablePagination<TData>({
   pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS,
 }: DataTablePaginationProps<TData>) {
   return (
-    <div className="flex items-center justify-between px-2" data-testid={testId}>
+    <div className="flex w-full items-center justify-between px-2" data-testid={testId}>
       <div className="flex-1 text-muted-foreground text-sm">
         {table.getFilteredSelectedRowModel().rows.length} of {table.getFilteredRowModel().rows.length} row(s) selected.
       </div>
diff --git a/frontend/src/hooks/use-url-table-state.ts b/frontend/src/hooks/use-url-table-state.ts
new file mode 100644
index 0000000000..be0947d29e
--- /dev/null
+++ b/frontend/src/hooks/use-url-table-state.ts
@@ -0,0 +1,126 @@
+import type { OnChangeFn, PaginationState, SortingState, Updater } from '@tanstack/react-table';
+import { DEFAULT_TABLE_PAGE_SIZE } from 'components/constants';
+import { parseAsBoolean, parseAsInteger, parseAsString, useQueryState } from 'nuqs';
+import { useEffect } from 'react';
+
+import { useQueryStateWithCallback } from './use-query-state-with-callback';
+
+/**
+ * Shape of the per-list ui settings slice this hook reads defaults from and
+ * writes back to (e.g. `uiSettings.topicPartitionsList`).
+ */
+type TableSettings = {
+  pageSize: number;
+  sortId: string;
+  sortDesc: boolean;
+};
+
+type UseUrlTableStateParams = {
+  /** Prefix for the URL query params (e.g. `consumer` -> `consumerPage`, `consumerPageSize`, ...). */
+  keyPrefix: string;
+  /** ui settings slice used for default page size / sorting and synced on change. */
+  settings: TableSettings;
+  /** Total number of rows; used to clamp a stale `pageIndex` back into range. */
+  rowCount: number;
+  /**
+   * Whether clamping is active. Pass `false` while data is still loading so a
+   * transient `rowCount` of 0 does not reset the page index. Defaults to `true`.
+   */
+  enabled?: boolean;
+};
+
+type UseUrlTableStateResult = {
+  sorting: SortingState;
+  pagination: PaginationState;
+  onSortingChange: OnChangeFn<SortingState>;
+  onPaginationChange: OnChangeFn<PaginationState>;
+};
+
+/**
+ * URL-backed sorting + pagination state for TanStack Table tables.
+ *
+ * Keeps page index, page size and sorting in the URL search query (prefixed by
+ * `keyPrefix`) so the view is shareable and survives reloads, while syncing page
+ * size and sorting back to the provided ui settings slice.
+ *
+ * Because tables are configured with `autoResetPageIndex: false`, a stale
+ * `?{prefix}Page=` from a shared link can point past the last page and render an
+ * empty table even when rows exist. This hook clamps the effective page index
+ * into range and repairs the URL once data is available (`enabled`).
+ */
+export function useUrlTableState({
+  keyPrefix,
+  settings,
+  rowCount,
+  enabled = true,
+}: UseUrlTableStateParams): UseUrlTableStateResult {
+  const [pageIndex, setPageIndex] = useQueryState(`${keyPrefix}Page`, parseAsInteger.withDefault(0));
+
+  const [pageSize, setPageSize] = useQueryStateWithCallback<number>(
+    {
+      onUpdate: (val) => {
+        settings.pageSize = val;
+      },
+      getDefaultValue: () => settings.pageSize,
+    },
+    `${keyPrefix}PageSize`,
+    parseAsInteger.withDefault(settings.pageSize || DEFAULT_TABLE_PAGE_SIZE)
+  );
+
+  const [sortId, setSortId] = useQueryStateWithCallback<string>(
+    {
+      onUpdate: (val) => {
+        settings.sortId = val;
+      },
+      getDefaultValue: () => settings.sortId,
+    },
+    `${keyPrefix}SortId`,
+    parseAsString.withDefault(settings.sortId ?? '')
+  );
+
+  const [sortDesc, setSortDesc] = useQueryStateWithCallback<boolean>(
+    {
+      onUpdate: (val) => {
+        settings.sortDesc = val;
+      },
+      getDefaultValue: () => settings.sortDesc,
+    },
+    `${keyPrefix}SortDesc`,
+    parseAsBoolean.withDefault(settings.sortDesc ?? false)
+  );
+
+  // Clamp a stale/out-of-range page index into a valid range. Effective value is
+  // used for rendering immediately; the effect below repairs the URL.
+  const lastPageIndex = enabled && rowCount > 0 ? Math.ceil(rowCount / pageSize) - 1 : 0;
+  const clampedPageIndex = enabled ? Math.max(0, Math.min(pageIndex, lastPageIndex)) : pageIndex;
+
+  useEffect(() => {
+    if (enabled && clampedPageIndex !== pageIndex) {
+      setPageIndex(clampedPageIndex);
+    }
+  }, [enabled, clampedPageIndex, pageIndex, setPageIndex]);
+
+  const sorting: SortingState = sortId ? [{ id: sortId, desc: sortDesc }] : [];
+
+  const onSortingChange: OnChangeFn<SortingState> = (updater: Updater<SortingState>) => {
+    const next = typeof updater === 'function' ? updater(sorting) : updater;
+    if (next.length > 0) {
+      setSortId(next[0].id);
+      setSortDesc(next[0].desc);
+    } else {
+      setSortId('');
+      setSortDesc(false);
+    }
+    setPageIndex(0);
+  };
+
+  const pagination: PaginationState = { pageIndex: clampedPageIndex, pageSize };
+
+  const onPaginationChange: OnChangeFn<PaginationState> = (updater: Updater<PaginationState>) => {
+    const next = typeof updater === 'function' ? updater(pagination) : updater;
+    setPageIndex(next.pageIndex);
+    setPageSize(next.pageSize);
+  };
+
+  return { sorting, pagination, onSortingChange, onPaginationChange };
+}
diff --git a/frontend/src/routes/topics/$topicName/index.tsx b/frontend/src/routes/topics/$topicName/index.tsx
index 9763eabd3c..e74a7a3533 100644
--- a/frontend/src/routes/topics/$topicName/index.tsx
+++ b/frontend/src/routes/topics/$topicName/index.tsx
@@ -19,6 +19,8 @@ import TopicDetails from '../../../components/pages/topics/topic-details';
 const searchSchema = z.object({
   pageSize: fallback(z.number().int().positive().optional(), DEFAULT_TABLE_PAGE_SIZE),
   page: fallback(z.number().int().nonnegative().optional(), 0),
+  configFilter: fallback(z.string().optional(), undefined),
+  configScope: fallback(z.enum(['all', 'modified']).optional(), undefined),
 });
 
 export const Route = createFileRoute('/topics/$topicName/')({
diff --git a/frontend/src/state/ui.ts b/frontend/src/state/ui.ts
index 36995f80ce..a9fb2fe465 100644
--- a/frontend/src/state/ui.ts
+++ b/frontend/src/state/ui.ts
@@ -264,6 +264,24 @@ type UISettings = {
     configViewType: 'structured' | 'table';
   };
 
+  topicConsumersList: {
+    pageSize: number;
+    sortId: string;
+    sortDesc: boolean;
+  };
+
+  topicPartitionsList: {
+    pageSize: number;
+    sortId: string;
+    sortDesc: boolean;
+  };
+
+  topicAclList: {
+    pageSize: number;
+    sortId: string;
+    sortDesc: boolean;
+  };
+
   clusterOverview: {
     connectorsList: {
       quickSearch: string;
@@ -443,6 +461,24 @@ const defaultUiSettings: UISettings = {
     configViewType: 'structured' as 'structured' | 'table',
   },
 
+  topicConsumersList: {
+    pageSize: 20,
+    sortId: '',
+    sortDesc: false,
+  },
+
+  topicPartitionsList: {
+    pageSize: 20,
+    sortId: '',
+    sortDesc: false,
+  },
+
+  topicAclList: {
+    pageSize: 20,
+    sortId: '',
+    sortDesc: false,
+  },
+
   clusterOverview: {
     connectorsList: {
       quickSearch: '',
diff --git a/frontend/tests/test-variant-console/topics/topic-navigation.spec.ts b/frontend/tests/test-variant-console/topics/topic-navigation.spec.ts
index bac2463416..32932b9610 100644
--- a/frontend/tests/test-variant-console/topics/topic-navigation.spec.ts
+++ b/frontend/tests/test-variant-console/topics/topic-navigation.spec.ts
@@ -86,16 +86,17 @@ test.describe('Topic Details - Navigation and Tabs', () => {
       await expect(page.getByRole('tablist')).toBeVisible({ timeout: 10_000 });
       await expect(page.getByTestId('config-group-table')).toBeVisible({ timeout: 15_000 });
 
-      // Verify that configuration groups are present
-      // Note: This test is flexible and will pass even if new groups are added
-      const configGroups = page.locator('.configGroupTitle');
-      const groupCount = await configGroups.count();
+      // The grouped layout shows a category sidebar plus titled sections.
+      // Note: This test is flexible and will pass even if new categories are added.
+      const sidebar = page.getByRole('navigation', { name: 'Configuration categories' });
+      await expect(sidebar).toBeVisible();
+      const categoryCount = await sidebar.getByRole('button').count();
 
-      // At least some configuration groups should be visible
-      expect(groupCount).toBeGreaterThan(0);
+      // At least some configuration categories should be visible
+      expect(categoryCount).toBeGreaterThan(0);
 
       // Verify Retention group is present (a core group that should always exist)
-      await expect(page.locator('.configGroupTitle').filter({ hasText: 'Retention' })).toBeVisible();
+      await expect(page.getByRole('heading', { name: 'Retention' })).toBeVisible();
     });
 
     await topicPage.deleteTopic(topicName);
diff --git a/frontend/tests/test-variant-console/utils/topic-page.ts b/frontend/tests/test-variant-console/utils/topic-page.ts
index dd2c4285e9..bce394065e 100644
--- a/frontend/tests/test-variant-console/utils/topic-page.ts
+++ b/frontend/tests/test-variant-console/utils/topic-page.ts
@@ -177,11 +177,14 @@ export class TopicPage {
   }
 
   async verifyConfigurationGroup(groupName: string) {
-    await expect(this.page.locator('.configGroupTitle').filter({ hasText: groupName })).toBeVisible();
+    await expect(this.page.getByRole('heading', { name: groupName })).toBeVisible();
   }
 
   async getConfigurationGroups(): Promise<string[]> {
-    return await this.page.locator('.configGroupTitle').allTextContents();
+    return await this.page
+      .getByRole('navigation', { name: 'Configuration categories' })
+      .getByRole('button')
+      .allTextContents();
   }
 
   /**