diff --git a/frontend/src/components/layout/header.tsx b/frontend/src/components/layout/header.tsx
index c8ab1d1f37..ffcb00358d 100644
--- a/frontend/src/components/layout/header.tsx
+++ b/frontend/src/components/layout/header.tsx
@@ -44,7 +44,7 @@ function BreadcrumbHeaderRow({ useNewSidebar, breadcrumbItems }: BreadcrumbHeade
         {useNewSidebar ? (
           <>
             <SidebarTrigger />
-            <Separator className="mr-2 h-4" orientation="vertical" />
+            <Separator className="mr-2 h-4 self-center" orientation="vertical" />
           </>
         ) : null}
         {isEmbedded() ? null : (
diff --git a/frontend/src/components/pages/quotas/quotas-list.tsx b/frontend/src/components/pages/quotas/quotas-list.tsx
index b78bf6b226..28914e5e1a 100644
--- a/frontend/src/components/pages/quotas/quotas-list.tsx
+++ b/frontend/src/components/pages/quotas/quotas-list.tsx
@@ -32,7 +32,6 @@ import {
   EmptyHeader,
   EmptyTitle,
 } from 'components/redpanda-ui/components/empty';
-import { ListLayoutPagination } from 'components/redpanda-ui/components/list-layout';
 import { Skeleton } from 'components/redpanda-ui/components/skeleton';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from 'components/redpanda-ui/components/table';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from 'components/redpanda-ui/components/tooltip';
@@ -317,9 +316,7 @@ const QuotasList = () => {
           </TableBody>
         </Table>
 
-        <ListLayoutPagination>
-          <DataTablePagination table={table} />
-        </ListLayoutPagination>
+        <DataTablePagination table={table} />
       </PageContent>
     </TooltipProvider>
   );
diff --git a/frontend/src/components/pages/schemas/schema-context-selector.tsx b/frontend/src/components/pages/schemas/schema-context-selector.tsx
index 656a56830d..cae25fdbab 100644
--- a/frontend/src/components/pages/schemas/schema-context-selector.tsx
+++ b/frontend/src/components/pages/schemas/schema-context-selector.tsx
@@ -9,6 +9,7 @@
  * by the Apache License, Version 2.0
  */
 
+import { Badge } from 'components/redpanda-ui/components/badge';
 import { Button } from 'components/redpanda-ui/components/button';
 import {
   Command,
@@ -18,9 +19,10 @@ import {
   CommandList,
 } from 'components/redpanda-ui/components/command';
 import { Popover, PopoverContent, PopoverTrigger } from 'components/redpanda-ui/components/popover';
+import { Separator } from 'components/redpanda-ui/components/separator';
 import { Tooltip, TooltipContent, TooltipTrigger } from 'components/redpanda-ui/components/tooltip';
 import { cn } from 'components/redpanda-ui/lib/utils';
-import { CheckIcon, ChevronDownIcon, InfoIcon } from 'lucide-react';
+import { CheckIcon, InfoIcon } from 'lucide-react';
 import type { FC } from 'react';
 import { useState } from 'react';
 
@@ -44,32 +46,16 @@ export const SchemaContextSelector: FC<SchemaContextSelectorProps> = ({
   const selectedLabel = contexts.find((c) => c.id === selectedContext)?.label ?? 'All';
 
   return (
-    <div className="mt-2 flex flex-col gap-1.5">
-      <div className="flex items-center gap-1.5">
-        <span className="font-medium text-body-sm">Context</span>
-        <Tooltip>
-          <TooltipTrigger
-            render={
-              <span className="inline-flex cursor-help">
-                <InfoIcon className="size-4 text-muted-foreground" />
-              </span>
-            }
-          />
-          <TooltipContent side="top">
-            Schema Registry contexts allow grouping subjects into isolated namespaces
-          </TooltipContent>
-        </Tooltip>
-      </div>
+    <div className="flex items-center gap-1.5">
       <Popover onOpenChange={setOpen} open={open}>
         <PopoverTrigger
           render={
-            <Button
-              className="w-44 justify-between truncate"
-              data-testid="schema-context-selector"
-              variant="secondary-outline"
-            >
-              <span className="truncate text-body">{selectedLabel}</span>
-              <ChevronDownIcon className="ml-2 size-4 shrink-0 opacity-50" />
+            <Button className="h-8 border-dashed" data-testid="schema-context-selector" size="sm" variant="outline">
+              Context
+              <Separator className="mx-2 h-4 self-center" orientation="vertical" />
+              <Badge className="max-w-32 truncate rounded-sm px-1 font-normal" variant="secondary">
+                {selectedLabel}
+              </Badge>
             </Button>
           }
         />
@@ -101,6 +87,18 @@ export const SchemaContextSelector: FC<SchemaContextSelectorProps> = ({
           </Command>
         </PopoverContent>
       </Popover>
+      <Tooltip>
+        <TooltipTrigger
+          render={
+            <span className="inline-flex cursor-help">
+              <InfoIcon className="size-4 text-muted-foreground" />
+            </span>
+          }
+        />
+        <TooltipContent side="top">
+          Schema Registry contexts allow grouping subjects into isolated namespaces
+        </TooltipContent>
+      </Tooltip>
     </div>
   );
 };
diff --git a/frontend/src/components/pages/schemas/schema-create.tsx b/frontend/src/components/pages/schemas/schema-create.tsx
index 2ecae1ff1e..e73af4d70c 100644
--- a/frontend/src/components/pages/schemas/schema-create.tsx
+++ b/frontend/src/components/pages/schemas/schema-create.tsx
@@ -533,6 +533,8 @@ const SchemaEditor = (p: {
   const [contextWarning, setContextWarning] = useState('');
   const [switchFormatOpen, setSwitchFormatOpen] = useState(false);
   const [pendingFormat, setPendingFormat] = useState<string | null>(null);
+  // Only surface "required" errors after the user has interacted with a field, not on mount.
+  const [touched, setTouched] = useState<{ context: boolean; topic: boolean }>({ context: false, topic: false });
 
   const availableContexts = useMemo(() => {
     if (!(srContextsEnabled && apiContexts && subjects)) return [];
@@ -575,7 +577,7 @@ const SchemaEditor = (p: {
       )}
       <div className="flex max-w-[650px] flex-col gap-8">
         {srContextsEnabled && !isAddVersion && (
-          <Field data-invalid={!state.context || undefined}>
+          <Field data-invalid={(touched.context && !state.context) || undefined}>
             <FieldLabel>Context</FieldLabel>
             <FieldDescription>Select an existing context or type a new name to create one.</FieldDescription>
             <Combobox
@@ -585,6 +587,7 @@ const SchemaEditor = (p: {
               createLabel="context"
               onChange={(value) => {
                 const contextId = contextLabelToId(value);
+                setTouched((t) => ({ ...t, context: true }));
                 setContextWarning('');
                 p.onStateChange((prev) => ({
                   ...prev,
@@ -605,7 +608,7 @@ const SchemaEditor = (p: {
               value={contextIdToLabel(state.context)}
             />
             {contextWarning && <div className="mt-1 text-body text-destructive">{contextWarning}</div>}
-            {!state.context && <FieldError>Context is required</FieldError>}
+            {touched.context && !state.context && <FieldError>Context is required</FieldError>}
           </Field>
         )}
 
@@ -627,6 +630,7 @@ const SchemaEditor = (p: {
               CUSTOM: 'Custom',
             }}
             onValueChange={(e) => {
+              setTouched((t) => ({ ...t, topic: false }));
               p.onStateChange((prev) => ({ ...prev, userInput: '', strategy: e as NamingStrategy }));
             }}
             value={state.strategy}
@@ -644,11 +648,12 @@ const SchemaEditor = (p: {
         </Field>
 
         {showTopicNameInput && (
-          <Field data-invalid={!state.userInput || undefined}>
+          <Field data-invalid={(touched.topic && !state.userInput) || undefined}>
             <FieldLabel>Topic name</FieldLabel>
             <Select
               disabled={isAddVersion}
               onValueChange={(e) => {
+                setTouched((t) => ({ ...t, topic: true }));
                 p.onStateChange((prev) => ({ ...prev, userInput: e }));
               }}
               value={state.userInput}
@@ -664,7 +669,7 @@ const SchemaEditor = (p: {
                 ))}
               </SelectContent>
             </Select>
-            {!state.userInput && <FieldError>Topic name is required</FieldError>}
+            {touched.topic && !state.userInput && <FieldError>Topic name is required</FieldError>}
           </Field>
         )}
 
diff --git a/frontend/src/components/pages/schemas/schema-list.tsx b/frontend/src/components/pages/schemas/schema-list.tsx
index 3ff7fc0f5a..fbbc92cd2f 100644
--- a/frontend/src/components/pages/schemas/schema-list.tsx
+++ b/frontend/src/components/pages/schemas/schema-list.tsx
@@ -12,30 +12,44 @@
 import { Link } from '@tanstack/react-router';
 import {
   type ColumnDef,
+  type ColumnFiltersState,
+  type FilterFn,
   flexRender,
   getCoreRowModel,
+  getFacetedRowModel,
+  getFacetedUniqueValues,
+  getFilteredRowModel,
   getPaginationRowModel,
   getSortedRowModel,
   type PaginationState,
   type Updater,
   useReactTable,
 } from '@tanstack/react-table';
-import { ArchiveIcon, EditIcon, InfoIcon, TrashIcon } from 'components/icons';
+import { ArchiveIcon, EditIcon, MoreHorizontalIcon, TrashIcon } from 'components/icons';
+import { DescriptionWithHelp } from 'components/pages/security/shared/description-with-help';
 import { Alert, AlertTitle } from 'components/redpanda-ui/components/alert';
 import { Badge } from 'components/redpanda-ui/components/badge';
 import { Button } from 'components/redpanda-ui/components/button';
 import { Checkbox } from 'components/redpanda-ui/components/checkbox';
-import { DataTableColumnHeader } from 'components/redpanda-ui/components/data-table';
-import { Drawer, DrawerContent, DrawerHeader, DrawerTitle } from 'components/redpanda-ui/components/drawer';
-import { Input } from 'components/redpanda-ui/components/input';
-import { Label } from 'components/redpanda-ui/components/label';
-import { Separator } from 'components/redpanda-ui/components/separator';
+import {
+  DataTableColumnHeader,
+  DataTableFacetedFilter,
+  DataTablePagination,
+} from 'components/redpanda-ui/components/data-table';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from 'components/redpanda-ui/components/dropdown-menu';
+import { ListLayout, ListLayoutFilters, ListLayoutSearchInput } from 'components/redpanda-ui/components/list-layout';
 import { Skeleton } from 'components/redpanda-ui/components/skeleton';
 import { Spinner } from 'components/redpanda-ui/components/spinner';
+import { Stat, StatGroup } from 'components/redpanda-ui/components/stat';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from 'components/redpanda-ui/components/table';
 import { Tooltip, TooltipContent, TooltipTrigger } from 'components/redpanda-ui/components/tooltip';
-import { ChevronLeftIcon, ChevronRightIcon, ChevronsLeftIcon, ChevronsRightIcon, SearchIcon } from 'lucide-react';
-import { parseAsBoolean, parseAsInteger, parseAsString, useQueryState } from 'nuqs';
+import { SearchIcon } from 'lucide-react';
+import { parseAsArrayOf, parseAsBoolean, parseAsInteger, parseAsString, useQueryState } from 'nuqs';
 import type { FC } from 'react';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { toast } from 'sonner';
@@ -57,21 +71,24 @@ import {
   useDeleteSchemaSubjectMutation,
   useListSchemasQuery,
   useSchemaCompatibilityQuery,
-  useSchemaDetailsQuery,
+  useSchemaDetailsByNameQuery,
   useSchemaModeQuery,
   useSchemaRegistryContextsQuery,
   useSchemaUsagesByIdQuery,
 } from '../../../react-query/api/schema-registry';
 import { appGlobal } from '../../../state/app-global';
 import { api } from '../../../state/backend-api';
-import type { SchemaRegistrySubject } from '../../../state/rest-interfaces';
+import {
+  SchemaRegistryCompatibilityModes,
+  type SchemaRegistrySubject,
+  type SchemaRegistrySubjectDetails,
+  SchemaType,
+} from '../../../state/rest-interfaces';
 import { useSupportedFeaturesStore } from '../../../state/supported-features';
 import { uiSettings } from '../../../state/ui';
 import { setPageHeader } from '../../../state/ui-state';
 import { encodeURIComponentPercents } from '../../../utils/utils';
 import PageContent from '../../misc/page-content';
-import Section from '../../misc/section';
-import { SmallStat } from '../../misc/small-stat';
 
 const RequestErrors: FC<{ requestErrors?: string[] }> = ({ requestErrors }) => {
   if (!requestErrors || requestErrors.length === 0) {
@@ -79,13 +96,13 @@ const RequestErrors: FC<{ requestErrors?: string[] }> = ({ requestErrors }) => {
   }
 
   return (
-    <Section>
+    <div className="flex flex-col gap-2">
       {requestErrors.map((errorMessage) => (
         <Alert className="mt-4" key={errorMessage} variant="destructive">
           <AlertTitle>{errorMessage}</AlertTitle>
         </Alert>
       ))}
-    </Section>
+    </div>
   );
 };
 
@@ -95,9 +112,34 @@ const SCHEMA_TYPE_BADGE_VARIANT: Record<string, string> = {
   JSON: 'warning-inverted',
 };
 
+const SCHEMA_TYPE_FILTER_OPTIONS = [
+  { label: 'Avro', value: SchemaType.AVRO },
+  { label: 'Protobuf', value: SchemaType.PROTOBUF },
+  { label: 'JSON', value: SchemaType.JSON },
+];
+
+const SCHEMA_COMPATIBILITY_FILTER_OPTIONS = Object.values(SchemaRegistryCompatibilityModes).map((mode) => ({
+  label: mode,
+  value: mode,
+}));
+
+// Subject rows enriched with per-subject details so type/compatibility can be filtered list-wide.
+type EnrichedSubject = SchemaRegistrySubject & {
+  details?: SchemaRegistrySubjectDetails;
+  detailsLoading: boolean;
+};
+
+// Faceted filters set an array of selected values; match rows whose column value is one of them.
+const multiSelectFilterFn: FilterFn<EnrichedSubject> = (row, columnId, filterValue) => {
+  const selected = filterValue as string[] | undefined;
+  if (!selected?.length) {
+    return true;
+  }
+  return selected.includes(String(row.getValue(columnId)));
+};
+
 const SchemaList: FC = () => {
   const schemaRegistryContextsSupported = useSupportedFeaturesStore((s) => s.schemaRegistryContexts);
-  const [isHelpSidebarOpen, setIsHelpSidebarOpen] = useState(false);
   const [quickSearch, setQuickSearch] = useQueryState('q', parseAsString.withDefault(''));
 
   const [showSoftDeleted, setShowSoftDeleted] = useQueryStateWithCallback<boolean>(
@@ -119,6 +161,11 @@ const SchemaList: FC = () => {
   const deleteSchemaMutation = useDeleteSchemaSubjectMutation();
   const [deleteTarget, setDeleteTarget] = useState<{ kind: 'soft' | 'permanent'; name: string } | null>(null);
   const [sorting, setSorting] = useQueryState('sort', sortingParser.withDefault([]));
+  const [typeFilter, setTypeFilter] = useQueryState('type', parseAsArrayOf(parseAsString).withDefault([]));
+  const [compatibilityFilter, setCompatibilityFilter] = useQueryState(
+    'compatibility',
+    parseAsArrayOf(parseAsString).withDefault([])
+  );
   const [pageIndex, setPageIndex] = useQueryState('page', parseAsInteger.withDefault(0));
   const [pageSize, setPageSize] = useQueryState('pageSize', parseAsInteger.withDefault(10));
 
@@ -133,6 +180,30 @@ const SchemaList: FC = () => {
     [pagination, setPageIndex, setPageSize]
   );
 
+  // Faceted filter state lives in the URL, one param per column, so a filtered view
+  // survives a reload and can be shared — same as the search, context and page params.
+  const columnFilters = useMemo<ColumnFiltersState>(() => {
+    const filters: ColumnFiltersState = [];
+    if (typeFilter.length > 0) {
+      filters.push({ id: 'type', value: typeFilter });
+    }
+    if (compatibilityFilter.length > 0) {
+      filters.push({ id: 'compatibility', value: compatibilityFilter });
+    }
+    return filters;
+  }, [typeFilter, compatibilityFilter]);
+
+  const handleColumnFiltersChange = useCallback(
+    (updater: Updater<ColumnFiltersState>) => {
+      const next = typeof updater === 'function' ? updater(columnFilters) : updater;
+      const valuesFor = (id: string) => (next.find((filter) => filter.id === id)?.value as string[] | undefined) ?? [];
+      setTypeFilter(valuesFor('type'));
+      setCompatibilityFilter(valuesFor('compatibility'));
+      setPageIndex(0);
+    },
+    [columnFilters, setTypeFilter, setCompatibilityFilter, setPageIndex]
+  );
+
   // Parse schema ID from search query
   const schemaIdSearch = useMemo(() => {
     const trimmedValue = quickSearch.trim();
@@ -142,6 +213,9 @@ const SchemaList: FC = () => {
 
   const { data: schemaUsages, isLoading: isLoadingSchemaVersionMatches } = useSchemaUsagesByIdQuery(schemaIdSearch);
 
+  const subjectNames = useMemo(() => (schemaSubjects ?? []).map((s) => s.name), [schemaSubjects]);
+  const detailsByName = useSchemaDetailsByNameQuery(subjectNames);
+
   const refreshData = useCallback(() => {
     refetchMode();
     refetchCompatibility();
@@ -227,8 +301,17 @@ const SchemaList: FC = () => {
     return subjects;
   }, [schemaSubjects, quickSearch, showSoftDeleted, schemaUsages, schemaRegistryContextsSupported, selectedContext]);
 
-  // biome-ignore lint/correctness/useExhaustiveDependencies: isAllContext and selectedContext drive conditional columns
-  const columns = useMemo<ColumnDef<SchemaRegistrySubject>[]>(
+  const enrichedSubjects = useMemo<EnrichedSubject[]>(
+    () =>
+      filteredSubjects.map((subject) => ({
+        ...subject,
+        details: detailsByName[subject.name]?.data,
+        detailsLoading: detailsByName[subject.name]?.isLoading ?? false,
+      })),
+    [filteredSubjects, detailsByName]
+  );
+
+  const columns = useMemo<ColumnDef<EnrichedSubject>[]>(
     () => [
       {
         accessorKey: 'name',
@@ -249,7 +332,7 @@ const SchemaList: FC = () => {
                   to="/schema-registry/subjects/$subjectName"
                 >
                   {isAllContext && parsed.context !== 'default' && (
-                    <span className="text-gray-400">:.{parsed.context}:</span>
+                    <span className="text-muted-foreground">:.{parsed.context}:</span>
                   )}
                   {isAllContext || isNamedContext(selectedContext) ? parsed.displayName : name}
                 </Link>
@@ -258,7 +341,7 @@ const SchemaList: FC = () => {
                     <TooltipTrigger
                       render={
                         <span aria-label="Soft-deleted" data-testid="schema-list-soft-deleted-icon">
-                          <ArchiveIcon aria-hidden="true" height={16} style={{ color: 'dimgrey' }} width={16} />
+                          <ArchiveIcon aria-hidden="true" className="text-muted-foreground" height={16} width={16} />
                         </span>
                       }
                     />
@@ -278,7 +361,7 @@ const SchemaList: FC = () => {
               header: 'Context',
               id: 'context',
               enableSorting: false,
-              cell: ({ row }: { row: { original: SchemaRegistrySubject } }) => {
+              cell: ({ row }: { row: { original: EnrichedSubject } }) => {
                 const { context } = parseSubjectContext(row.original.name);
                 return (
                   <Badge size="sm" variant="neutral-inverted">
@@ -286,61 +369,109 @@ const SchemaList: FC = () => {
                   </Badge>
                 );
               },
-            } satisfies ColumnDef<SchemaRegistrySubject>,
+            } satisfies ColumnDef<EnrichedSubject>,
           ]
         : []),
       {
-        header: 'Type',
         id: 'type',
+        accessorFn: (subject) => subject.details?.type ?? '',
+        header: 'Type',
         enableSorting: false,
-        cell: ({ row: { original: r } }) => <SchemaTypeColumn name={r.name} />,
+        filterFn: multiSelectFilterFn,
+        cell: ({ row: { original: subject } }) => {
+          if (subject.detailsLoading) {
+            return <Skeleton variant="text" />;
+          }
+          if (!subject.details) {
+            return <span className="text-muted-foreground">—</span>;
+          }
+          const variant = SCHEMA_TYPE_BADGE_VARIANT[subject.details.type] ?? 'neutral-inverted';
+          return (
+            <Badge size="sm" variant={variant as 'info-inverted'}>
+              {subject.details.type}
+            </Badge>
+          );
+        },
       },
       {
-        header: 'Compatibility',
         id: 'compatibility',
+        accessorFn: (subject) => subject.details?.compatibility ?? '',
+        header: 'Compatibility',
         enableSorting: false,
-        cell: ({ row: { original: r } }) => <SchemaCompatibilityColumn name={r.name} />,
+        filterFn: multiSelectFilterFn,
+        cell: ({ row: { original: subject } }) => {
+          if (subject.detailsLoading) {
+            return <Skeleton variant="text" />;
+          }
+          if (!subject.details) {
+            return <span className="text-muted-foreground">—</span>;
+          }
+          return <>{subject.details.compatibility}</>;
+        },
       },
       {
-        header: 'Mode',
         id: 'mode',
+        header: 'Mode',
         enableSorting: false,
-        cell: ({ row: { original: r } }) => <SchemaModeColumn name={r.name} />,
+        cell: ({ row: { original: subject } }) => {
+          if (subject.detailsLoading) {
+            return <Skeleton variant="text" />;
+          }
+          if (!subject.details) {
+            return <span className="text-muted-foreground">—</span>;
+          }
+          return <>{subject.details.mode}</>;
+        },
       },
       {
-        header: 'Latest Version',
         id: 'latestVersion',
+        header: 'Latest Version',
         enableSorting: false,
-        cell: ({ row: { original: r } }) => <LatestVersionColumn name={r.name} />,
+        cell: ({ row: { original: subject } }) => {
+          if (subject.detailsLoading) {
+            return <Skeleton variant="text" />;
+          }
+          if (!subject.details || subject.details.latestActiveVersion < 0) {
+            return <span className="text-muted-foreground">None</span>;
+          }
+          return <>{subject.details.latestActiveVersion}</>;
+        },
       },
       {
         header: '',
         id: 'actions',
         enableSorting: false,
-        cell: ({ row: { original: r } }) => (
-          <Tooltip>
-            <TooltipTrigger
+        meta: { align: 'right' as const },
+        cell: ({ row: { original: subject } }) => (
+          <DropdownMenu>
+            <DropdownMenuTrigger
               render={
                 <Button
-                  aria-label="Delete schema"
-                  data-testid={`schema-list-delete-btn-${r.name}`}
-                  disabled={api.userData?.canDeleteSchemas === false}
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    e.preventDefault();
-                    setDeleteTarget({ kind: r.isSoftDeleted ? 'permanent' : 'soft', name: r.name });
-                  }}
+                  aria-label="Schema actions"
+                  data-testid={`schema-list-actions-trigger-${subject.name}`}
                   size="icon-sm"
-                  variant="secondary-ghost"
+                  variant="ghost"
                 >
-                  <TrashIcon />
+                  <MoreHorizontalIcon className="h-4 w-4" />
                 </Button>
               }
             />
-            {api.userData?.canDeleteSchemas === false && (
-              <TooltipContent side="top">You don't have the 'canDeleteSchemas' permission</TooltipContent>
-            )}
-          </Tooltip>
+            <DropdownMenuContent>
+              <DropdownMenuItem
+                data-testid={`schema-list-delete-btn-${subject.name}`}
+                disabled={api.userData?.canDeleteSchemas === false || undefined}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  e.preventDefault();
+                  setDeleteTarget({ kind: subject.isSoftDeleted ? 'permanent' : 'soft', name: subject.name });
+                }}
+                variant="destructive"
+              >
+                <TrashIcon />
+                {subject.isSoftDeleted ? 'Delete permanently' : 'Delete'}
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
         ),
       },
     ],
@@ -348,17 +479,58 @@ const SchemaList: FC = () => {
   );
 
   const table = useReactTable({
-    data: filteredSubjects,
+    data: enrichedSubjects,
     columns,
-    state: { sorting, pagination },
+    state: { sorting, pagination, columnFilters },
     onSortingChange: setSorting,
     onPaginationChange: handlePaginationChange,
+    onColumnFiltersChange: handleColumnFiltersChange,
     autoResetPageIndex: false,
     getCoreRowModel: getCoreRowModel(),
     getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getFacetedRowModel: getFacetedRowModel(),
+    getFacetedUniqueValues: getFacetedUniqueValues(),
     getPaginationRowModel: getPaginationRowModel(),
   });
 
+  const renderBody = () => {
+    if (isLoading) {
+      return [0, 1, 2, 3, 4].map((rowIdx) => (
+        <TableRow key={rowIdx}>
+          {columns.map((_col, colIdx) => (
+            <TableCell key={colIdx}>
+              <Skeleton variant="text" width="md" />
+            </TableCell>
+          ))}
+        </TableRow>
+      ));
+    }
+
+    if (table.getRowModel().rows.length) {
+      return table.getRowModel().rows.map((row) => (
+        <TableRow className={row.original.isSoftDeleted ? 'text-muted-foreground' : ''} key={row.id}>
+          {row.getVisibleCells().map((cell) => {
+            const meta = cell.column.columnDef.meta as { align?: 'right' } | undefined;
+            return (
+              <TableCell align={meta?.align} key={cell.id}>
+                {flexRender(cell.column.columnDef.cell, cell.getContext())}
+              </TableCell>
+            );
+          })}
+        </TableRow>
+      ));
+    }
+
+    return (
+      <TableRow>
+        <TableCell className="text-center text-muted-foreground" colSpan={columns.length}>
+          No schemas found.
+        </TableCell>
+      </TableRow>
+    );
+  };
+
   if (schemaMode === null) {
     return <SchemaNotConfiguredPage />;
   }
@@ -366,316 +538,222 @@ const SchemaList: FC = () => {
   return (
     <PageContent key="b">
       {/* Statistics Bar */}
-      <div className="flex items-center gap-4" data-testid="schema-list-stats">
-        <SmallStat title={isNamedContext(selectedContext) && schemaRegistryContextsSupported ? 'Context mode' : 'Mode'}>
-          <div className="flex items-center gap-1.5">
-            {displayMode ?? <Skeleton variant="text" width="sm" />}
-            <Tooltip>
-              <TooltipTrigger
-                render={
-                  <Button
-                    aria-label="Edit mode"
-                    data-testid="schema-list-edit-mode-btn"
-                    disabled={api.userData?.canManageSchemaRegistry === false}
-                    onClick={() =>
-                      isNamedContext(selectedContext) && schemaRegistryContextsSupported
-                        ? appGlobal.historyPush(
-                            `/schema-registry/contexts/${encodeURIComponent(selectedContext)}/edit-mode`
-                          )
-                        : appGlobal.historyPush('/schema-registry/edit-mode')
-                    }
-                    size="icon-xs"
-                    variant="secondary-ghost"
-                  >
-                    <EditIcon />
-                  </Button>
-                }
-              />
-              {api.userData?.canManageSchemaRegistry === false && (
-                <TooltipContent side="top">You don't have the 'canManageSchemaRegistry' permission</TooltipContent>
-              )}
-            </Tooltip>
-          </div>
-        </SmallStat>
-        <Separator className="h-[2ch]" orientation="vertical" />
-        <SmallStat
-          title={
+      <StatGroup className="w-fit" columns={2} gap="lg" testId="schema-list-stats">
+        <Stat
+          label={isNamedContext(selectedContext) && schemaRegistryContextsSupported ? 'Context mode' : 'Mode'}
+          testId="schema-list-mode-stat"
+          value={
+            <div className="flex items-center gap-1.5">
+              {displayMode ?? <Skeleton variant="text" width="sm" />}
+              <Tooltip>
+                <TooltipTrigger
+                  render={
+                    <Button
+                      aria-label="Edit mode"
+                      data-testid="schema-list-edit-mode-btn"
+                      disabled={api.userData?.canManageSchemaRegistry === false}
+                      onClick={() =>
+                        isNamedContext(selectedContext) && schemaRegistryContextsSupported
+                          ? appGlobal.historyPush(
+                              `/schema-registry/contexts/${encodeURIComponent(selectedContext)}/edit-mode`
+                            )
+                          : appGlobal.historyPush('/schema-registry/edit-mode')
+                      }
+                      size="icon-xs"
+                      variant="secondary-ghost"
+                    >
+                      <EditIcon />
+                    </Button>
+                  }
+                />
+                {api.userData?.canManageSchemaRegistry === false && (
+                  <TooltipContent side="top">You don't have the 'canManageSchemaRegistry' permission</TooltipContent>
+                )}
+              </Tooltip>
+            </div>
+          }
+        />
+        <Stat
+          label={
             isNamedContext(selectedContext) && schemaRegistryContextsSupported
               ? 'Context compatibility'
               : 'Compatibility'
           }
-        >
-          <div className="flex items-center gap-1.5">
-            {displayCompat ?? <Skeleton variant="text" width="sm" />}
-            <Tooltip>
-              <TooltipTrigger
-                render={
-                  <Button
-                    aria-label="Edit compatibility"
-                    data-testid="schema-list-edit-compatibility-btn"
-                    disabled={api.userData?.canManageSchemaRegistry === false}
-                    onClick={() =>
-                      isNamedContext(selectedContext) && schemaRegistryContextsSupported
-                        ? appGlobal.historyPush(
-                            `/schema-registry/contexts/${encodeURIComponent(selectedContext)}/edit-compatibility`
-                          )
-                        : appGlobal.historyPush('/schema-registry/edit-compatibility')
-                    }
-                    size="icon-xs"
-                    variant="secondary-ghost"
-                  >
-                    <EditIcon />
-                  </Button>
-                }
-              />
-              {api.userData?.canManageSchemaRegistry === false && (
-                <TooltipContent side="top">You don't have the 'canManageSchemaRegistry' permission</TooltipContent>
-              )}
-            </Tooltip>
-          </div>
-        </SmallStat>
-      </div>
-      {schemaRegistryContextsSupported && (
-        <SchemaContextSelector
-          contexts={derivedContexts}
-          onContextChange={(ctx) => {
-            setSelectedContext(ctx);
-            setPageIndex(0);
-          }}
-          selectedContext={selectedContext}
+          testId="schema-list-compatibility-stat"
+          value={
+            <div className="flex items-center gap-1.5">
+              {displayCompat ?? <Skeleton variant="text" width="sm" />}
+              <Tooltip>
+                <TooltipTrigger
+                  render={
+                    <Button
+                      aria-label="Edit compatibility"
+                      data-testid="schema-list-edit-compatibility-btn"
+                      disabled={api.userData?.canManageSchemaRegistry === false}
+                      onClick={() =>
+                        isNamedContext(selectedContext) && schemaRegistryContextsSupported
+                          ? appGlobal.historyPush(
+                              `/schema-registry/contexts/${encodeURIComponent(selectedContext)}/edit-compatibility`
+                            )
+                          : appGlobal.historyPush('/schema-registry/edit-compatibility')
+                      }
+                      size="icon-xs"
+                      variant="secondary-ghost"
+                    >
+                      <EditIcon />
+                    </Button>
+                  }
+                />
+                {api.userData?.canManageSchemaRegistry === false && (
+                  <TooltipContent side="top">You don't have the 'canManageSchemaRegistry' permission</TooltipContent>
+                )}
+              </Tooltip>
+            </div>
+          }
         />
-      )}
-      <div className="my-4 flex items-center gap-2">
-        <Tooltip>
-          <TooltipTrigger
-            render={
-              <Button
-                data-testid="schema-list-create-btn"
-                disabled={api.userData?.canCreateSchemas === false}
-                onClick={() =>
-                  isNamedContext(selectedContext) && schemaRegistryContextsSupported
-                    ? appGlobal.historyPush(`/schema-registry/contexts/${encodeURIComponent(selectedContext)}/create`)
-                    : appGlobal.historyPush('/schema-registry/create')
-                }
-                variant="primary"
-              >
-                Create new schema
-              </Button>
-            }
-          />
-          {api.userData?.canCreateSchemas === false && (
-            <TooltipContent side="top">You don't have the 'canCreateSchemas' permission</TooltipContent>
-          )}
-        </Tooltip>
-      </div>
+      </StatGroup>
       <RequestErrors />
-      <Drawer direction="right" onOpenChange={setIsHelpSidebarOpen} open={isHelpSidebarOpen}>
-        <DrawerContent aria-labelledby="schema-help-title" className="w-[600px] sm:max-w-[600px]" role="dialog">
-          <DrawerHeader className="border-b">
-            <DrawerTitle data-testid="schema-help-title" id="schema-help-title">
-              Schema Search Help
-            </DrawerTitle>
-          </DrawerHeader>
-
-          <div className="space-y-6 p-4">
-            <section aria-labelledby="filtering-heading" className="space-y-3">
-              <h3 className="font-semibold text-gray-900" id="filtering-heading">
-                Filtering schemas
-              </h3>
-              <p className="text-base text-gray-600 leading-relaxed">
-                There are two ways to filter schemas, and they work a little differently.
-              </p>
-            </section>
-
-            <div className="space-y-4 pl-4">
-              <section aria-labelledby="schema-id-heading" className="space-y-2">
-                <h3 className="font-semibold text-base text-gray-900" id="schema-id-heading">
-                  Schema ID
-                </h3>
-                <p className="text-gray-600 text-sm leading-relaxed">
-                  If a number matches a schema ID, the results include all subjects referencing that schema.
-                </p>
-              </section>
-
-              <section aria-labelledby="subject-name-heading" className="space-y-2">
-                <h3 className="font-semibold text-base text-gray-900" id="subject-name-heading">
-                  Subject name
+      {isError ? (
+        <Alert variant="destructive">
+          <AlertTitle>Error loading schemas</AlertTitle>
+        </Alert>
+      ) : (
+        <ListLayout className="my-4" data-testid="schema-list-table">
+          <div className="text-muted-foreground text-sm sm:text-base">
+            <DescriptionWithHelp
+              short="Subjects and versions for the schemas that validate your topic records."
+              testId="schema-search-help"
+              title="Schema search help"
+              titleTestId="schema-help-title"
+            >
+              <section aria-labelledby="filtering-heading" className="space-y-3">
+                <h3 className="text-foreground text-heading-sm" id="filtering-heading">
+                  Filtering schemas
                 </h3>
-                <p className="text-gray-600 text-sm leading-relaxed">
-                  To search subject names, enter that specific name or a regex.
+                <p className="text-body text-muted-foreground">
+                  There are two ways to filter schemas, and they work a little differently.
                 </p>
               </section>
-            </div>
-          </div>
-        </DrawerContent>
-      </Drawer>
-      {(() => {
-        if (isLoading) {
-          return (
-            <Section>
-              <Skeleton size="xl" width="full" />
-            </Section>
-          );
-        }
-
-        if (isError) {
-          return (
-            <Section>
-              <Alert variant="destructive">
-                <AlertTitle>Error loading schemas</AlertTitle>
-              </Alert>
-            </Section>
-          );
-        }
 
-        return (
-          <Section>
-            <div className="flex items-center justify-between pb-3">
-              <div className="flex items-center gap-2">
-                <div className="relative w-[350px]" data-testid="schema-list-search-field">
-                  <SearchIcon
-                    aria-hidden="true"
-                    className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground"
-                  />
-                  <Input
-                    aria-label="Filter by subject name or schema ID"
-                    className="pl-9"
-                    onChange={(e) => {
-                      setQuickSearch(e.target.value);
-                      setPageIndex(0);
-                    }}
-                    placeholder="Filter by subject name or schema ID..."
-                    value={quickSearch ?? ''}
-                  />
-                </div>
-                <Tooltip>
-                  <TooltipTrigger
-                    render={
-                      <button
-                        aria-label="Search help"
-                        className="inline-flex cursor-pointer items-center"
-                        data-testid="schema-search-help"
-                        onClick={() => setIsHelpSidebarOpen(true)}
-                        type="button"
-                      >
-                        <InfoIcon aria-hidden="true" />
-                      </button>
-                    }
-                  />
-                  <TooltipContent side="top">Help with schema search</TooltipContent>
-                </Tooltip>
-                {isLoadingSchemaVersionMatches && <Spinner className="size-5" />}
+              <div className="space-y-4 pl-4">
+                <section aria-labelledby="schema-id-heading" className="space-y-2">
+                  <h3 className="text-foreground text-heading-sm" id="schema-id-heading">
+                    Schema ID
+                  </h3>
+                  <p className="text-body text-muted-foreground">
+                    If a number matches a schema ID, the results include all subjects referencing that schema.
+                  </p>
+                </section>
+
+                <section aria-labelledby="subject-name-heading" className="space-y-2">
+                  <h3 className="text-foreground text-heading-sm" id="subject-name-heading">
+                    Subject name
+                  </h3>
+                  <p className="text-body text-muted-foreground">
+                    To search subject names, enter that specific name or a regex.
+                  </p>
+                </section>
               </div>
-              <div className="flex items-center gap-2">
-                <Checkbox
-                  checked={showSoftDeleted}
-                  id="show-soft-deleted"
-                  onCheckedChange={(checked) => {
-                    setShowSoftDeleted(checked === true);
-                    setPageIndex(0);
-                  }}
-                  testId="schema-list-show-soft-deleted-checkbox"
+            </DescriptionWithHelp>
+          </div>
+          <ListLayoutFilters
+            actions={
+              <Tooltip>
+                <TooltipTrigger
+                  render={
+                    <Button
+                      data-testid="schema-list-create-btn"
+                      disabled={api.userData?.canCreateSchemas === false}
+                      onClick={() =>
+                        isNamedContext(selectedContext) && schemaRegistryContextsSupported
+                          ? appGlobal.historyPush(
+                              `/schema-registry/contexts/${encodeURIComponent(selectedContext)}/create`
+                            )
+                          : appGlobal.historyPush('/schema-registry/create')
+                      }
+                      variant="primary"
+                    >
+                      Create new schema
+                    </Button>
+                  }
                 />
-                <Label htmlFor="show-soft-deleted">Show soft-deleted</Label>
-              </div>
+                {api.userData?.canCreateSchemas === false && (
+                  <TooltipContent side="top">You don't have the 'canCreateSchemas' permission</TooltipContent>
+                )}
+              </Tooltip>
+            }
+          >
+            <div className="relative" data-testid="schema-list-search-field">
+              <SearchIcon
+                aria-hidden="true"
+                className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground"
+              />
+              <ListLayoutSearchInput
+                aria-label="Filter by subject name or schema ID"
+                className="pl-9"
+                onChange={(e) => {
+                  setQuickSearch(e.target.value);
+                  setPageIndex(0);
+                }}
+                placeholder="Filter by subject name or schema ID..."
+                value={quickSearch ?? ''}
+              />
             </div>
-            <Table>
-              <TableHeader>
-                {table.getHeaderGroups().map((headerGroup) => (
-                  <TableRow key={headerGroup.id}>
-                    {headerGroup.headers.map((header) => (
-                      <TableHead key={header.id}>
+            {isLoadingSchemaVersionMatches && <Spinner className="size-5" />}
+            {schemaRegistryContextsSupported && (
+              <SchemaContextSelector
+                contexts={derivedContexts}
+                onContextChange={(ctx) => {
+                  setSelectedContext(ctx);
+                  setPageIndex(0);
+                }}
+                selectedContext={selectedContext}
+              />
+            )}
+            <DataTableFacetedFilter
+              column={table.getColumn('type')}
+              options={SCHEMA_TYPE_FILTER_OPTIONS}
+              testId="schema-list-type-filter"
+              title="Type"
+            />
+            <DataTableFacetedFilter
+              column={table.getColumn('compatibility')}
+              options={SCHEMA_COMPATIBILITY_FILTER_OPTIONS}
+              testId="schema-list-compatibility-filter"
+              title="Compatibility"
+            />
+            <label className="flex cursor-pointer items-center gap-2 text-sm">
+              <Checkbox
+                checked={showSoftDeleted}
+                onCheckedChange={(checked) => {
+                  setShowSoftDeleted(checked === true);
+                  setPageIndex(0);
+                }}
+                testId="schema-list-show-soft-deleted-checkbox"
+              />
+              Show soft-deleted
+            </label>
+          </ListLayoutFilters>
+          <Table>
+            <TableHeader>
+              {table.getHeaderGroups().map((headerGroup) => (
+                <TableRow key={headerGroup.id}>
+                  {headerGroup.headers.map((header) => {
+                    const meta = header.column.columnDef.meta as { align?: 'right' } | undefined;
+                    return (
+                      <TableHead align={meta?.align} key={header.id}>
                         {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
                       </TableHead>
-                    ))}
-                  </TableRow>
-                ))}
-              </TableHeader>
-              <TableBody>
-                {table.getRowModel().rows.length ? (
-                  table.getRowModel().rows.map((row) => (
-                    <TableRow className={row.original.isSoftDeleted ? 'text-gray-400' : ''} key={row.id}>
-                      {row.getVisibleCells().map((cell) => (
-                        <TableCell key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</TableCell>
-                      ))}
-                    </TableRow>
-                  ))
-                ) : (
-                  <TableRow>
-                    <TableCell className="text-center text-muted-foreground" colSpan={columns.length}>
-                      No schemas found.
-                    </TableCell>
-                  </TableRow>
-                )}
-              </TableBody>
-            </Table>
-            <div className="mt-4 flex items-center justify-end px-2">
-              <div className="flex items-center space-x-6 lg:space-x-8">
-                <div className="flex items-center space-x-2">
-                  <span className="font-medium text-sm">Rows per page</span>
-                  <select
-                    aria-label="Rows per page"
-                    className="h-8 w-[70px] rounded-md border bg-transparent px-2 text-sm"
-                    onChange={(e) => table.setPageSize(Number(e.target.value))}
-                    value={table.getState().pagination.pageSize}
-                  >
-                    {[10, 20, 25, 30, 40, 50].map((size) => (
-                      <option key={size} value={size}>
-                        {size}
-                      </option>
-                    ))}
-                  </select>
-                </div>
-                <div className="flex w-[100px] items-center justify-center font-medium text-sm">
-                  Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount()}
-                </div>
-                <div className="flex items-center space-x-2">
-                  <Button
-                    className="hidden size-8 lg:flex"
-                    disabled={!table.getCanPreviousPage()}
-                    onClick={() => table.setPageIndex(0)}
-                    size="icon"
-                    variant="outline"
-                  >
-                    <span className="sr-only">Go to first page</span>
-                    <ChevronsLeftIcon />
-                  </Button>
-                  <Button
-                    className="size-8"
-                    disabled={!table.getCanPreviousPage()}
-                    onClick={() => table.previousPage()}
-                    size="icon"
-                    variant="outline"
-                  >
-                    <span className="sr-only">Go to previous page</span>
-                    <ChevronLeftIcon />
-                  </Button>
-                  <Button
-                    className="size-8"
-                    disabled={!table.getCanNextPage()}
-                    onClick={() => table.nextPage()}
-                    size="icon"
-                    variant="outline"
-                  >
-                    <span className="sr-only">Go to next page</span>
-                    <ChevronRightIcon />
-                  </Button>
-                  <Button
-                    className="hidden size-8 lg:flex"
-                    disabled={!table.getCanNextPage()}
-                    onClick={() => table.setPageIndex(table.getPageCount() - 1)}
-                    size="icon"
-                    variant="outline"
-                  >
-                    <span className="sr-only">Go to last page</span>
-                    <ChevronsRightIcon />
-                  </Button>
-                </div>
-              </div>
-            </div>
-          </Section>
-        );
-      })()}
+                    );
+                  })}
+                </TableRow>
+              ))}
+            </TableHeader>
+            <TableBody>{renderBody()}</TableBody>
+          </Table>
+          <DataTablePagination table={table} />
+        </ListLayout>
+      )}
       <DeleteDialog
         onConfirm={() => {
           if (!deleteTarget) return;
@@ -714,54 +792,4 @@ const SchemaList: FC = () => {
   );
 };
 
-const SchemaTypeColumn: FC<{ name: string }> = ({ name }) => {
-  const { data: details, isLoading } = useSchemaDetailsQuery(name);
-
-  if (isLoading || !details) {
-    return <Skeleton variant="text" />;
-  }
-
-  const variant = SCHEMA_TYPE_BADGE_VARIANT[details.type] ?? 'neutral-inverted';
-
-  return (
-    <Badge size="sm" variant={variant as 'info-inverted'}>
-      {details.type}
-    </Badge>
-  );
-};
-
-const SchemaCompatibilityColumn: FC<{ name: string }> = ({ name }) => {
-  const { data: details, isLoading } = useSchemaDetailsQuery(name);
-
-  if (isLoading || !details) {
-    return <Skeleton variant="text" />;
-  }
-
-  return <>{details.compatibility}</>;
-};
-
-const SchemaModeColumn: FC<{ name: string }> = ({ name }) => {
-  const { data: details, isLoading } = useSchemaDetailsQuery(name);
-
-  if (isLoading || !details) {
-    return <Skeleton variant="text" />;
-  }
-
-  return <>{details.mode}</>;
-};
-
-const LatestVersionColumn: FC<{ name: string }> = ({ name }) => {
-  const { data: details, isLoading } = useSchemaDetailsQuery(name);
-
-  if (isLoading || !details) {
-    return <Skeleton variant="text" />;
-  }
-
-  if (details.latestActiveVersion < 0) {
-    return <span className="text-muted-foreground">None</span>;
-  }
-
-  return <>{details.latestActiveVersion}</>;
-};
-
 export default SchemaList;
diff --git a/frontend/src/components/pages/security/shared/description-with-help.tsx b/frontend/src/components/pages/security/shared/description-with-help.tsx
index 45301f73b9..d9f13f67ba 100644
--- a/frontend/src/components/pages/security/shared/description-with-help.tsx
+++ b/frontend/src/components/pages/security/shared/description-with-help.tsx
@@ -18,9 +18,13 @@ type Props = {
   short: string;
   title: string;
   children: React.ReactNode;
+  /** Optional test id for the info trigger button. */
+  testId?: string;
+  /** Optional test id for the drawer title. */
+  titleTestId?: string;
 };
 
-export function DescriptionWithHelp({ short, title, children }: Props) {
+export function DescriptionWithHelp({ short, title, children, testId, titleTestId }: Props) {
   const [open, setOpen] = useState(false);
 
   return (
@@ -30,6 +34,7 @@ export function DescriptionWithHelp({ short, title, children }: Props) {
         <button
           aria-label="More information"
           className="inline-flex cursor-pointer items-center text-muted-foreground hover:text-foreground"
+          data-testid={testId}
           onClick={() => setOpen(true)}
           type="button"
         >
@@ -39,7 +44,9 @@ export function DescriptionWithHelp({ short, title, children }: Props) {
       <Drawer direction="right" onOpenChange={setOpen} open={open}>
         <DrawerContent aria-labelledby="help-drawer-title" className="w-[520px] sm:max-w-[520px]" role="dialog">
           <DrawerHeader className="border-b">
-            <DrawerTitle id="help-drawer-title">{title}</DrawerTitle>
+            <DrawerTitle data-testid={titleTestId} id="help-drawer-title">
+              {title}
+            </DrawerTitle>
           </DrawerHeader>
           <div className="space-y-4 p-6">{children}</div>
         </DrawerContent>
diff --git a/frontend/src/components/pages/security/tabs/roles-tab-new.tsx b/frontend/src/components/pages/security/tabs/roles-tab-new.tsx
index e96a0e49e2..399f9744dc 100644
--- a/frontend/src/components/pages/security/tabs/roles-tab-new.tsx
+++ b/frontend/src/components/pages/security/tabs/roles-tab-new.tsx
@@ -46,7 +46,6 @@ import {
   ListLayout,
   ListLayoutContent,
   ListLayoutFilters,
-  ListLayoutPagination,
   ListLayoutSearchInput,
 } from 'components/redpanda-ui/components/list-layout';
 import { Skeleton } from 'components/redpanda-ui/components/skeleton';
@@ -328,9 +327,7 @@ export const RolesTabNew: FC = () => {
           </Table>
         </ListLayoutContent>
 
-        <ListLayoutPagination>
-          <DataTablePagination table={table} />
-        </ListLayoutPagination>
+        <DataTablePagination table={table} />
       </ListLayout>
       <RoleCreateDialog onOpenChange={setCreateDialogOpen} open={createDialogOpen} />
     </>
diff --git a/frontend/src/components/pages/security/tabs/users-tab-new.tsx b/frontend/src/components/pages/security/tabs/users-tab-new.tsx
index ed2c88b37b..94e47ed721 100644
--- a/frontend/src/components/pages/security/tabs/users-tab-new.tsx
+++ b/frontend/src/components/pages/security/tabs/users-tab-new.tsx
@@ -40,7 +40,6 @@ import {
   ListLayout,
   ListLayoutContent,
   ListLayoutFilters,
-  ListLayoutPagination,
   ListLayoutSearchInput,
 } from 'components/redpanda-ui/components/list-layout';
 import { KeyRoundIcon, ShieldIcon, Trash2Icon, UsersIcon } from 'lucide-react';
@@ -402,9 +401,7 @@ export const UsersTabNew: FC = () => {
           </Table>
         </ListLayoutContent>
 
-        <ListLayoutPagination>
-          <DataTablePagination table={table} />
-        </ListLayoutPagination>
+        <DataTablePagination table={table} />
       </ListLayout>
     </>
   );
diff --git a/frontend/src/components/pages/topics/topic-list-new.tsx b/frontend/src/components/pages/topics/topic-list-new.tsx
index b339b806bb..a14a6e3ddc 100644
--- a/frontend/src/components/pages/topics/topic-list-new.tsx
+++ b/frontend/src/components/pages/topics/topic-list-new.tsx
@@ -33,12 +33,7 @@ import {
   EmptyMedia,
   EmptyTitle,
 } from 'components/redpanda-ui/components/empty';
-import {
-  ListLayout,
-  ListLayoutFilters,
-  ListLayoutPagination,
-  ListLayoutSearchInput,
-} from 'components/redpanda-ui/components/list-layout';
+import { ListLayout, ListLayoutFilters, ListLayoutSearchInput } from 'components/redpanda-ui/components/list-layout';
 import { AlertCircle, AlertTriangle, DatabaseIcon, EyeOff, Search, X } from 'lucide-react';
 import { parseAsBoolean, parseAsInteger, parseAsString, useQueryState } from 'nuqs';
 import type { FC } from 'react';
@@ -485,9 +480,7 @@ const TopicList: FC = () => {
           <TableBody>{renderBody()}</TableBody>
         </Table>
 
-        <ListLayoutPagination>
-          <DataTablePagination table={table} />
-        </ListLayoutPagination>
+        <DataTablePagination table={table} />
       </ListLayout>
     </>
   );
diff --git a/frontend/src/components/redpanda-ui/components/stat.tsx b/frontend/src/components/redpanda-ui/components/stat.tsx
new file mode 100644
index 0000000000..e5ef70d66c
--- /dev/null
+++ b/frontend/src/components/redpanda-ui/components/stat.tsx
@@ -0,0 +1,170 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+import { ArrowDown, ArrowUp, ArrowUpRight, Minus } from 'lucide-react';
+import React from 'react';
+
+import { cn, type SharedProps } from '../lib/utils';
+
+export const statValueVariants = cva('leading-none', {
+  variants: {
+    size: {
+      sm: 'text-sm',
+      md: 'text-base',
+      lg: 'font-bold text-2xl tracking-tighter',
+    },
+    tone: {
+      default: 'text-foreground',
+      muted: 'text-muted-foreground',
+      success: 'text-success',
+      warning: 'text-warning',
+      destructive: 'text-destructive',
+    },
+    mono: {
+      true: 'font-mono tabular-nums',
+      false: '',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+    tone: 'default',
+    mono: false,
+  },
+});
+
+export type StatDeltaDirection = 'up' | 'down' | 'neutral';
+
+export interface StatDelta {
+  /** Formatted change text, e.g. "+12%" or "-3.2k". */
+  value: string;
+  /** Drives the icon and default color. */
+  direction: StatDeltaDirection;
+  /** Override the semantic tone of the delta. Defaults to direction-based color. */
+  tone?: 'default' | 'muted' | 'success' | 'warning' | 'destructive';
+}
+
+const deltaIcons: Record<StatDeltaDirection, React.ComponentType<{ className?: string }>> = {
+  up: ArrowUp,
+  down: ArrowDown,
+  neutral: Minus,
+};
+
+const deltaToneByDirection: Record<StatDeltaDirection, NonNullable<StatDelta['tone']>> = {
+  up: 'success',
+  down: 'destructive',
+  neutral: 'muted',
+};
+
+const deltaToneClasses: Record<NonNullable<StatDelta['tone']>, string> = {
+  default: 'text-foreground',
+  muted: 'text-muted-foreground',
+  success: 'text-success',
+  warning: 'text-warning',
+  destructive: 'text-destructive',
+};
+
+export interface StatProps
+  extends Omit<React.ComponentProps<'div'>, 'children'>,
+    VariantProps<typeof statValueVariants>,
+    SharedProps {
+  /** Caption rendered above the value, uppercased and muted. */
+  label: string;
+  value: React.ReactNode;
+  /** Secondary line rendered below the value (e.g. "6 partitions"), muted and smaller. */
+  sublabel?: React.ReactNode;
+  delta?: StatDelta;
+  /** Turns the label into a link. Pass a single link element with no children — label text and trailing arrow are injected and link styling merged in. */
+  labelLink?: React.ReactElement<{ className?: string }>;
+}
+
+// Mirrors `labelStrongXSmall` typography so a linked label is visually identical to a plain one.
+const LABEL_LINK_CLASSNAME =
+  'inline-flex items-center gap-1 font-semibold text-body-sm text-muted-foreground uppercase transition-colors hover:text-foreground';
+
+export const Stat = React.forwardRef<HTMLDivElement, StatProps>(
+  ({ className, label, value, sublabel, size, tone, mono, delta, labelLink, testId, ...props }, ref) => {
+    const deltaTone = delta ? (delta.tone ?? deltaToneByDirection[delta.direction]) : undefined;
+    const DeltaIcon = delta ? deltaIcons[delta.direction] : undefined;
+
+    const labelNode = labelLink ? (
+      React.cloneElement(
+        labelLink,
+        { className: cn(LABEL_LINK_CLASSNAME, labelLink.props.className) },
+        <>
+          {label}
+          <ArrowUpRight aria-hidden="true" className="size-3" />
+        </>
+      )
+    ) : (
+      <span className="font-semibold text-body-sm text-muted-foreground uppercase" data-slot="stat-label">
+        {label}
+      </span>
+    );
+
+    return (
+      <div className={cn('flex flex-col gap-1', className)} data-slot="stat" data-testid={testId} ref={ref} {...props}>
+        {labelNode}
+        <div className="flex items-baseline gap-2">
+          <span className={cn(statValueVariants({ size, tone, mono }))} data-slot="stat-value">
+            {value}
+          </span>
+          {delta && DeltaIcon ? (
+            <span
+              className={cn(
+                'inline-flex items-center gap-0.5 font-medium text-xs',
+                deltaToneClasses[deltaTone ?? 'muted']
+              )}
+              data-slot="stat-delta"
+            >
+              <DeltaIcon className="size-3" />
+              {delta.value}
+            </span>
+          ) : null}
+        </div>
+        {sublabel ? (
+          <span className="font-normal text-muted-foreground text-xs" data-slot="stat-sublabel">
+            {sublabel}
+          </span>
+        ) : null}
+      </div>
+    );
+  }
+);
+Stat.displayName = 'Stat';
+
+export const statGroupVariants = cva('grid', {
+  variants: {
+    columns: {
+      2: 'grid-cols-2',
+      3: 'grid-cols-1 sm:grid-cols-3',
+      4: 'grid-cols-2 md:grid-cols-4',
+    },
+    gap: {
+      sm: 'gap-3',
+      md: 'gap-4',
+      lg: 'gap-6',
+    },
+  },
+  defaultVariants: {
+    columns: 4,
+    gap: 'md',
+  },
+});
+
+export interface StatGroupProps
+  extends React.ComponentProps<'div'>,
+    VariantProps<typeof statGroupVariants>,
+    SharedProps {}
+
+export const StatGroup = React.forwardRef<HTMLDivElement, StatGroupProps>(
+  ({ className, columns, gap, testId, children, ...props }, ref) => (
+    <div
+      className={cn(statGroupVariants({ columns, gap }), className)}
+      data-slot="stat-group"
+      data-testid={testId}
+      ref={ref}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+);
+StatGroup.displayName = 'StatGroup';
diff --git a/frontend/src/react-query/api/schema-registry.tsx b/frontend/src/react-query/api/schema-registry.tsx
index 40d92583d7..bdc30491ea 100644
--- a/frontend/src/react-query/api/schema-registry.tsx
+++ b/frontend/src/react-query/api/schema-registry.tsx
@@ -2,6 +2,7 @@ import { ConnectError } from '@connectrpc/connect';
 import {
   useQueryClient,
   useMutation as useTanstackMutation,
+  useQueries as useTanstackQueries,
   useQuery as useTanstackQuery,
 } from '@tanstack/react-query';
 import { config } from 'config';
@@ -130,31 +131,58 @@ export const useSchemaCompatibilityQuery = () =>
     refetchOnMount: true,
   });
 
+const fetchSchemaDetails = async (subjectName: string): Promise<SchemaRegistrySubjectDetails> => {
+  const response = await fetch(
+    `${config.restBasePath}/schema-registry/subjects/${encodeURIComponent(subjectName)}/versions/all`,
+    {
+      method: 'GET',
+      headers: {
+        ...(config.jwt && { Authorization: `Bearer ${config.jwt}` }),
+      },
+    }
+  );
+
+  if (!response.ok) {
+    throw new Error(`Failed to fetch schema details for ${subjectName}`);
+  }
+
+  return response.json();
+};
+
 export const useSchemaDetailsQuery = (subjectName?: string, options?: { enabled?: boolean }) =>
   useTanstackQuery<SchemaRegistrySubjectDetails>({
     queryKey: ['schemaRegistry', 'subjects', subjectName, 'details'],
-    queryFn: async () => {
-      const response = await fetch(
-        `${config.restBasePath}/schema-registry/subjects/${encodeURIComponent(subjectName ?? '')}/versions/all`,
-        {
-          method: 'GET',
-          headers: {
-            ...(config.jwt && { Authorization: `Bearer ${config.jwt}` }),
-          },
-        }
-      );
-
-      if (!response.ok) {
-        throw new Error(`Failed to fetch schema details for ${subjectName}`);
-      }
-
-      return response.json();
-    },
+    queryFn: () => fetchSchemaDetails(subjectName ?? ''),
     staleTime: STALE_TIME_MEDIUM,
     refetchOnMount: true,
     enabled: options?.enabled !== false && subjectName !== '',
   });
 
+/**
+ * Fetches details (type, compatibility, mode, latest version) for many subjects at once.
+ * Shares the same query key/cache as {@link useSchemaDetailsQuery}, so row-level consumers
+ * reuse these entries instead of firing duplicate requests. Enables list-wide filtering by
+ * type/compatibility, which requires every subject's details to be available up front.
+ */
+export const useSchemaDetailsByNameQuery = (subjectNames: string[]) => {
+  const results = useTanstackQueries({
+    queries: subjectNames.map((name) => ({
+      queryKey: ['schemaRegistry', 'subjects', name, 'details'],
+      queryFn: () => fetchSchemaDetails(name),
+      staleTime: STALE_TIME_MEDIUM,
+      enabled: name !== '',
+    })),
+  });
+
+  const detailsByName: Record<string, { data?: SchemaRegistrySubjectDetails; isLoading: boolean }> = {};
+  for (const [index, name] of subjectNames.entries()) {
+    const result = results[index];
+    detailsByName[name] = { data: result?.data, isLoading: result?.isLoading ?? false };
+  }
+
+  return detailsByName;
+};
+
 export type { SchemaRegistryMode, SchemaRegistryModeWithDefault } from 'state/rest-interfaces';
 
 export const SchemaRegistryModes = {
diff --git a/frontend/tests/shared/schema.utils.ts b/frontend/tests/shared/schema.utils.ts
index cddad75229..990c6f225b 100644
--- a/frontend/tests/shared/schema.utils.ts
+++ b/frontend/tests/shared/schema.utils.ts
@@ -64,12 +64,12 @@ export const deleteSchema = async (
   return await test.step(`Delete schema: ${subjectName} (${permanent ? 'permanent' : 'soft'})`, async () => {
     await page.goto('/schema-registry');
 
-    // Find and click delete button for the schema
+    // Find the schema row, open its actions (kebab) menu, then click delete
     const row = page.getByTestId('schema-registry-table-name').filter({ hasText: subjectName });
     await expect(row).toBeVisible();
 
-    const deleteButton = row.locator('..').locator('button[aria-label*="delete"], button:has(svg)').last();
-    await deleteButton.click();
+    await page.getByTestId(`schema-list-actions-trigger-${subjectName}`).click();
+    await page.getByTestId(`schema-list-delete-btn-${subjectName}`).dispatchEvent('click');
 
     // Confirm deletion in modal
     const confirmButton = page.getByRole('button', { name: permanent ? 'Permanently Delete' : 'Delete' });
diff --git a/frontend/tests/test-variant-console/schemas/schema.spec.ts b/frontend/tests/test-variant-console/schemas/schema.spec.ts
index 6d4d653f81..fd63e70f0f 100644
--- a/frontend/tests/test-variant-console/schemas/schema.spec.ts
+++ b/frontend/tests/test-variant-console/schemas/schema.spec.ts
@@ -565,7 +565,7 @@ test.describe('Schema Registry E2E Tests', () => {
       await expect(editButton).toBeVisible();
     });
 
-    test('should show delete buttons in table', async ({ page }) => {
+    test('should show delete action in row actions menu', async ({ page }) => {
       const schemaPage = new SchemaPage(page);
       await schemaPage.goto();
 
@@ -573,6 +573,10 @@ test.describe('Schema Registry E2E Tests', () => {
       const schemaName = await firstSchema.textContent();
 
       if (schemaName) {
+        const actionsTrigger = page.getByTestId(`schema-list-actions-trigger-${schemaName}`);
+        await expect(actionsTrigger).toBeVisible();
+
+        await actionsTrigger.click();
         const deleteButton = page.getByTestId(`schema-list-delete-btn-${schemaName}`);
         await expect(deleteButton).toBeVisible();
       }