diff --git a/README.md b/README.md
index 46f5780..a2380ec 100644
--- a/README.md
+++ b/README.md
@@ -34,6 +34,8 @@ Reusable custom GUI class components live in the **`dashgui`** package
 so source imports are reflected instantly.
 
 - `dashgui/panels` — `PanelTile`, `PanelTileGrid`, `EditablePanelTile`, layout helpers
+- `dashgui/lists` — `RecordList`, the generic presentational list used by the
+  Lieferungen / Angebote / Bestellungen / Kunden list pages
 - `dashgui/tiles` — base `Tile` (extended by `src/components/tiles/*`)
 - `dashgui/SingleLineTextEdit`, `dashgui/ElevatedPill`
 
diff --git a/src/components/manifest/ManifestList.jsx b/src/components/manifest/ManifestList.jsx
index 8ab3e12..9c0c313 100644
--- a/src/components/manifest/ManifestList.jsx
+++ b/src/components/manifest/ManifestList.jsx
@@ -1,21 +1,7 @@
 import { PureComponent } from 'react';
-import Box from '@mui/material/Box';
-import Button from '@mui/material/Button';
-import CircularProgress from '@mui/material/CircularProgress';
-import IconButton from '@mui/material/IconButton';
-import Stack from '@mui/material/Stack';
-import Table from '@mui/material/Table';
-import TableBody from '@mui/material/TableBody';
-import TableCell from '@mui/material/TableCell';
-import TableContainer from '@mui/material/TableContainer';
-import TableHead from '@mui/material/TableHead';
-import TableRow from '@mui/material/TableRow';
-import Typography from '@mui/material/Typography';
-import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';
-import EditOutlinedIcon from '@mui/icons-material/EditOutlined';
 import { enqueueSnackbar } from 'notistack';
 import BackendError from '../BackendError';
-import { PanelTile, PanelTileGrid } from 'dashgui/panels';
+import { RecordList } from 'dashgui/lists';
 import { StorageManagerContext } from '../../api/storageManagerContext';
 import { backendErrorFrom } from '../../utils/backendError';
 import { notifyError } from '../../utils/notify';
@@ -133,98 +119,43 @@ class ManifestList extends PureComponent {
     const cfg = this.cfg;
     const partyField = cfg.partyField;
 
-    if (status === 'loading') {
-      return (
-        <Box sx={{ display: 'flex', justifyContent: 'center', py: 6 }}>
-          <CircularProgress />
-        </Box>
-      );
-    }
-
-    if (status === 'failed') {
-      return <BackendError error={error} onRetry={this.handleRetry} />;
+    const columns = [{ key: 'number', label: 'Nummer' }];
+    if (cfg.externalNumber) {
+      columns.push({
+        key: 'externalNumber',
+        label: 'Referenz',
+        render: (row) => numberDisplay(row.externalNumber),
+      });
     }
+    columns.push(
+      {
+        key: 'date',
+        label: cfg.dateLabel,
+        render: (row) => formatDate(row.date),
+      },
+      {
+        key: partyField,
+        label: cfg.partyLabel,
+        render: (row) => this.partyName(row[partyField]),
+      },
+    );
 
     return (
-      <PanelTileGrid>
-        <PanelTile wide={3} minHeight={240} color={cfg.listColor}>
-          <Stack spacing={2}>
-            <Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>
-              <Button
-                type="button"
-                variant="contained"
-                size="small"
-                onClick={this.handleCreate}
-              >
-                {cfg.createButton}
-              </Button>
-            </Box>
-
-            {docs.length === 0 ? (
-              <Typography variant="body2" color="text.secondary">
-                {cfg.emptyList}
-              </Typography>
-            ) : (
-              <TableContainer>
-                <Table size="small">
-                  <TableHead>
-                    <TableRow>
-                      <TableCell>Nummer</TableCell>
-                      {cfg.externalNumber ? (
-                        <TableCell>Referenz</TableCell>
-                      ) : null}
-                      <TableCell>{cfg.dateLabel}</TableCell>
-                      <TableCell>{cfg.partyLabel}</TableCell>
-                      <TableCell padding="checkbox" />
-                    </TableRow>
-                  </TableHead>
-                  <TableBody>
-                    {docs.map((row) => (
-                      <TableRow
-                        key={row.id}
-                        hover
-                        sx={{ cursor: 'pointer' }}
-                        onClick={() => this.handleEdit(row)}
-                      >
-                        <TableCell>{row.number}</TableCell>
-                        {cfg.externalNumber ? (
-                          <TableCell>
-                            {numberDisplay(row.externalNumber)}
-                          </TableCell>
-                        ) : null}
-                        <TableCell>{formatDate(row.date)}</TableCell>
-                        <TableCell>{this.partyName(row[partyField])}</TableCell>
-                        <TableCell
-                          padding="checkbox"
-                          onClick={(e) => e.stopPropagation()}
-                        >
-                          <IconButton
-                            type="button"
-                            size="small"
-                            aria-label={`„${row.number}“ bearbeiten`}
-                            onClick={() => this.handleEdit(row)}
-                          >
-                            <EditOutlinedIcon fontSize="small" />
-                          </IconButton>
-                          <IconButton
-                            type="button"
-                            size="small"
-                            aria-label={`„${row.number}“ löschen`}
-                            disabled={busyId != null}
-                            onClick={() => void this.handleDelete(row)}
-                          >
-                            <DeleteOutlinedIcon fontSize="small" />
-                          </IconButton>
-                        </TableCell>
-                      </TableRow>
-                    ))}
-                  </TableBody>
-                </Table>
-              </TableContainer>
-            )}
-          </Stack>
-        </PanelTile>
-      </PanelTileGrid>
+      <RecordList
+        status={status}
+        error={<BackendError error={error} onRetry={this.handleRetry} />}
+        rows={docs}
+        columns={columns}
+        createLabel={cfg.createButton}
+        onCreate={this.handleCreate}
+        onEdit={this.handleEdit}
+        onDelete={this.handleDelete}
+        deleteDisabled={busyId != null}
+        emptyMessage={cfg.emptyList}
+        color={cfg.listColor}
+        getEditLabel={(row) => `„${row.number}“ bearbeiten`}
+        getDeleteLabel={(row) => `„${row.number}“ löschen`}
+      />
     );
   }
 }
diff --git a/src/pages/kunde/index.jsx b/src/pages/kunde/index.jsx
index 211f360..3532249 100644
--- a/src/pages/kunde/index.jsx
+++ b/src/pages/kunde/index.jsx
@@ -1,21 +1,7 @@
 import { PureComponent } from 'react';
-import Box from '@mui/material/Box';
-import Button from '@mui/material/Button';
-import CircularProgress from '@mui/material/CircularProgress';
-import IconButton from '@mui/material/IconButton';
-import Stack from '@mui/material/Stack';
-import Table from '@mui/material/Table';
-import TableBody from '@mui/material/TableBody';
-import TableCell from '@mui/material/TableCell';
-import TableContainer from '@mui/material/TableContainer';
-import TableHead from '@mui/material/TableHead';
-import TableRow from '@mui/material/TableRow';
-import Typography from '@mui/material/Typography';
-import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';
-import EditOutlinedIcon from '@mui/icons-material/EditOutlined';
 import { enqueueSnackbar } from 'notistack';
 import BackendError from '../../components/BackendError';
-import { PanelTile, PanelTileGrid } from 'dashgui/panels';
+import { RecordList } from 'dashgui/lists';
 import { StorageManagerContext } from '../../api/storageManagerContext';
 import { router } from '../../appRouter';
 import { backendErrorFrom } from '../../utils/backendError';
@@ -119,86 +105,47 @@ class KundeListePage extends PureComponent {
   }
 
   render() {
-    const { status, error, entities, busyId } = this.state;
-
-    if (status === 'loading') {
-      return (
-        <Box sx={{ display: 'flex', justifyContent: 'center', py: 6 }}>
-          <CircularProgress />
-        </Box>
-      );
-    }
+    const { status, error, entities, groupsById, busyId } = this.state;
 
     if (status === 'failed') {
       return <BackendError error={error} onRetry={this.handleRetry} />;
     }
 
-    return (
-      <PanelTileGrid>
-        <PanelTile wide={3} minHeight={240} color="#bfdbfe">
-          <Stack spacing={2}>
-            <Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>
-              <Button variant="contained" size="small" onClick={this.handleCreate}>
-                Neuer Kunde
-              </Button>
-            </Box>
+    const columns = [
+      { key: 'number', label: 'Kundennummer' },
+      { key: 'name', label: 'Name' },
+      { key: 'firstName', label: 'Vorname' },
+      {
+        key: 'customergroupId',
+        label: 'Gruppe',
+        render: (row) => this.groupName(row.customergroupId),
+      },
+      {
+        key: 'createdAt',
+        label: 'Erstellt am',
+        render: (row) => formatDate(row.createdAt),
+      },
+    ];
 
-            {entities.length === 0 ? (
-              <Typography variant="body2" color="text.secondary">
-                Noch keine Kunden.
-              </Typography>
-            ) : (
-              <TableContainer>
-                <Table size="small">
-                  <TableHead>
-                    <TableRow>
-                      <TableCell>Kundennummer</TableCell>
-                      <TableCell>Name</TableCell>
-                      <TableCell>Vorname</TableCell>
-                      <TableCell>Gruppe</TableCell>
-                      <TableCell>Erstellt am</TableCell>
-                      <TableCell padding="checkbox" />
-                    </TableRow>
-                  </TableHead>
-                  <TableBody>
-                    {entities.map((row) => (
-                      <TableRow
-                        key={row.id}
-                        hover
-                        sx={{ cursor: 'pointer' }}
-                        onClick={() => this.handleEdit(row)}
-                      >
-                        <TableCell>{row.number}</TableCell>
-                        <TableCell>{row.name}</TableCell>
-                        <TableCell>{row.firstName}</TableCell>
-                        <TableCell>{this.groupName(row.customergroupId)}</TableCell>
-                        <TableCell>{formatDate(row.createdAt)}</TableCell>
-                        <TableCell padding="checkbox" onClick={(e) => e.stopPropagation()}>
-                          <IconButton
-                            size="small"
-                            aria-label={`„${row.name}“ bearbeiten`}
-                            onClick={() => this.handleEdit(row)}
-                          >
-                            <EditOutlinedIcon fontSize="small" />
-                          </IconButton>
-                          <IconButton
-                            size="small"
-                            aria-label={`„${row.name}“ löschen`}
-                            disabled={busyId != null}
-                            onClick={() => void this.handleDelete(row)}
-                          >
-                            <DeleteOutlinedIcon fontSize="small" />
-                          </IconButton>
-                        </TableCell>
-                      </TableRow>
-                    ))}
-                  </TableBody>
-                </Table>
-              </TableContainer>
-            )}
-          </Stack>
-        </PanelTile>
-      </PanelTileGrid>
+    const label = (row) =>
+      [row.firstName, row.name].filter(Boolean).join(' ') || String(row.number);
+
+    return (
+      <RecordList
+        status={status}
+        error={<BackendError error={error} onRetry={this.handleRetry} />}
+        rows={entities}
+        columns={columns}
+        createLabel="Neuer Kunde"
+        onCreate={this.handleCreate}
+        onEdit={this.handleEdit}
+        onDelete={this.handleDelete}
+        deleteDisabled={busyId != null}
+        emptyMessage="Noch keine Kunden."
+        color="#bfdbfe"
+        getEditLabel={(row) => `„${label(row)}“ bearbeiten`}
+        getDeleteLabel={(row) => `„${label(row)}“ löschen`}
+      />
     );
   }
 }