diff --git a/src/App.tsx b/src/App.tsx
index ed3c9209..46c75241 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,8 +1,10 @@
 import { CssBaseline } from '@mui/material';
+import { ThemeProvider } from '@mui/material/styles';
 import { Provider } from 'react-redux';
 import { RouterProvider } from 'react-router-dom';
 import { createAppRouter } from './app/router';
 import { createAppRuntime } from './app/runtime';
+import { appTheme } from './app/theme';
 import { appStore } from './state/store';
 
 const appRuntime = createAppRuntime({ store: appStore });
@@ -27,8 +29,10 @@ if (import.meta.hot) {
 function App() {
     return (
         <Provider store={appStore}>
-            <CssBaseline />
-            <RouterProvider router={appRouter} />
+            <ThemeProvider theme={appTheme}>
+                <CssBaseline />
+                <RouterProvider router={appRouter} />
+            </ThemeProvider>
         </Provider>
     );
 }
diff --git a/src/app/ConnectDialog.tsx b/src/app/ConnectDialog.tsx
index 85bf14a8..aa391b4f 100644
--- a/src/app/ConnectDialog.tsx
+++ b/src/app/ConnectDialog.tsx
@@ -7,14 +7,17 @@ import {
     DialogActions,
     DialogContent,
     DialogTitle,
-    Divider,
-    Grid,
+    IconButton,
     Stack,
     TextField,
+    Tooltip,
     Typography,
 } from '@mui/material';
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import RefreshIcon from '@mui/icons-material/Refresh';
 import { useFetcher } from 'react-router-dom';
 import { appConfig, type ConnectionOption } from '../config';
+import { monoValueSx } from './consoleStyles';
 import type { RootActionData } from './routeData';
 import type { SignifyConnectionState } from './runtime';
 
@@ -33,29 +36,6 @@ export interface ConnectDialogProps {
     onClose: () => void;
 }
 
-/**
- * User-facing status label for the typed connection state.
- *
- * Keep this local until another component truly needs the same presentation
- * policy; duplicating a second tiny formatter is preferable to a premature
- * shared status abstraction.
- */
-const connectionStatusLabel = (connection: SignifyConnectionState): string => {
-    if (connection.status === 'idle') {
-        return 'Not Connected';
-    }
-
-    if (connection.status === 'connecting') {
-        return 'Connecting';
-    }
-
-    if (connection.status === 'connected') {
-        return 'Connected';
-    }
-
-    return 'Error';
-};
-
 /**
  * Modal form for selecting a configured KERIA target and passcode.
  *
@@ -73,7 +53,7 @@ export const ConnectDialog = ({
     const [selectedConnection, setSelectedConnection] =
         useState<ConnectionOption>(appConfig.connectionOptions[0]);
     const [draftPasscode, setDraftPasscode] = useState<string | null>(null);
-    const isConnected = connection.status === 'connected';
+    const [copiedPasscode, setCopiedPasscode] = useState(false);
     const isSubmitting =
         connection.status === 'connecting' || connectFetcher.state !== 'idle';
     const isGenerating = passcodeFetcher.state !== 'idle';
@@ -83,6 +63,7 @@ export const ConnectDialog = ({
             ? passcodeFetcher.data.passcode
             : null;
     const passcode = draftPasscode ?? generatedPasscode ?? '';
+    const passcodeReady = passcode.length >= 21;
     const actionError =
         connection.status === 'error'
             ? connection.error.message
@@ -105,9 +86,22 @@ export const ConnectDialog = ({
         const formData = new FormData();
         formData.set('intent', 'generatePasscode');
         setDraftPasscode(null);
+        setCopiedPasscode(false);
         passcodeFetcher.submit(formData, { method: 'post', action: '/' });
     };
 
+    const handleCopyPasscode = () => {
+        if (passcode.length === 0) {
+            return;
+        }
+
+        void globalThis.navigator.clipboard
+            ?.writeText(passcode)
+            .catch(() => undefined);
+        setCopiedPasscode(true);
+        globalThis.setTimeout(() => setCopiedPasscode(false), 1500);
+    };
+
     return (
         <Dialog
             open={open}
@@ -124,31 +118,72 @@ export const ConnectDialog = ({
                 },
             }}
         >
-            <DialogTitle>Connect</DialogTitle>
-            <DialogContent sx={{ px: { xs: 2, sm: 3 } }}>
-                <Stack spacing={3}>
-                    <Autocomplete
-                        id="combo-box-demo"
-                        options={appConfig.connectionOptions}
-                        getOptionLabel={(option) =>
-                            `${option.label} (${option.adminUrl})`
-                        }
-                        isOptionEqualToValue={(option, value) =>
-                            option.adminUrl === value.adminUrl &&
-                            option.bootUrl === value.bootUrl
-                        }
-                        renderInput={(params) => (
-                            <TextField {...params} fullWidth />
-                        )}
-                        value={selectedConnection}
-                        fullWidth
-                        onChange={(_event, newValue) => {
-                            setSelectedConnection(
-                                newValue ?? appConfig.connectionOptions[0]
-                            );
+            <DialogTitle>Connect Wallet</DialogTitle>
+            <DialogContent sx={{ px: { xs: 2, sm: 3 }, py: 3 }}>
+                <Stack spacing={2.5}>
+                    <Box
+                        sx={{
+                            border: 1,
+                            borderColor: passcodeReady
+                                ? 'primary.main'
+                                : 'divider',
+                            borderRadius: 1,
+                            bgcolor: 'rgba(5, 9, 13, 0.62)',
+                            p: { xs: 1.5, sm: 2 },
                         }}
-                    />
-                    <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2}>
+                    >
+                        <Stack
+                            direction={{ xs: 'column', sm: 'row' }}
+                            spacing={1}
+                            sx={{
+                                alignItems: { xs: 'stretch', sm: 'center' },
+                                justifyContent: 'space-between',
+                                mb: 1.25,
+                            }}
+                        >
+                            <Box>
+                                <Typography
+                                    variant="caption"
+                                    color="primary.main"
+                                    sx={{
+                                        display: 'block',
+                                        fontWeight: 700,
+                                        textTransform: 'uppercase',
+                                    }}
+                                >
+                                    Passcode generator
+                                </Typography>
+                                <Typography color="text.secondary">
+                                    Generate a fresh Signify passcode or paste
+                                    an existing one.
+                                </Typography>
+                            </Box>
+                            <Stack direction="row" spacing={1}>
+                                <Tooltip title="Copy passcode">
+                                    <span>
+                                        <IconButton
+                                            aria-label="Copy passcode"
+                                            disabled={passcode.length === 0}
+                                            onClick={handleCopyPasscode}
+                                        >
+                                            <ContentCopyIcon />
+                                        </IconButton>
+                                    </span>
+                                </Tooltip>
+                                <Button
+                                    variant="contained"
+                                    color="primary"
+                                    data-testid="generate-passcode"
+                                    disabled={isSubmitting || isGenerating}
+                                    onClick={handleGeneratePasscode}
+                                    startIcon={<RefreshIcon />}
+                                >
+                                    {isGenerating
+                                        ? 'Generating...'
+                                        : 'Generate'}
+                                </Button>
+                            </Stack>
+                        </Stack>
                         <TextField
                             id="outlined-password-input"
                             label="Passcode"
@@ -156,39 +191,42 @@ export const ConnectDialog = ({
                             autoComplete="current-password"
                             variant="outlined"
                             value={passcode}
-                            onChange={(event) =>
-                                setDraftPasscode(event.target.value)
+                            onChange={(event) => {
+                                setCopiedPasscode(false);
+                                setDraftPasscode(event.target.value);
+                            }}
+                            helperText={
+                                passcodeReady
+                                    ? copiedPasscode
+                                        ? 'Copied to clipboard'
+                                        : 'Ready to connect'
+                                    : 'Passcode must be at least 21 characters'
                             }
-                            helperText="Passcode must be at least 21 characters"
                             fullWidth
-                        />
-                        <Button
-                            variant="contained"
-                            color="primary"
-                            data-testid="generate-passcode"
-                            disabled={isSubmitting || isGenerating}
-                            onClick={handleGeneratePasscode}
-                            sx={{
-                                alignSelf: {
-                                    xs: 'stretch',
-                                    sm: 'flex-start',
+                            slotProps={{
+                                input: {
+                                    sx: {
+                                        ...monoValueSx,
+                                        fontSize: { xs: '1rem', sm: '1.12rem' },
+                                    },
+                                },
+                                inputLabel: {
+                                    shrink: true,
                                 },
-                                minHeight: 40,
-                                mt: { xs: 0, sm: 1 },
                             }}
-                        >
-                            {isGenerating ? 'Creating...' : 'Create'}
-                        </Button>
-                    </Stack>
+                        />
+                    </Box>
 
                     <Button
                         variant="contained"
                         color="primary"
                         data-testid="connect-submit"
                         disabled={
-                            isSubmitting || isGenerating || passcode.length < 21
+                            isSubmitting || isGenerating || !passcodeReady
                         }
                         onClick={handleConnect}
+                        size="large"
+                        fullWidth
                     >
                         {isSubmitting ? 'Connecting...' : 'Connect'}
                     </Button>
@@ -200,40 +238,59 @@ export const ConnectDialog = ({
                             {actionError}
                         </Typography>
                     )}
-                </Stack>
-            </DialogContent>
-            <Box sx={{ mt: 2 }}>
-                <Divider />
-            </Box>
-            <DialogActions sx={{ px: { xs: 2, sm: 3 }, pb: 2 }}>
-                <Grid container spacing={2} sx={{ width: '100%' }}>
-                    <Grid size={12}>
-                        <Button
-                            fullWidth
-                            disabled
-                            data-testid={`connection-status-${connection.status}`}
-                            sx={{
-                                '&.Mui-disabled': {
-                                    background: isConnected ? 'green' : 'red',
-                                    color: 'black',
-                                },
-                            }}
+                    <Box>
+                        <Typography
+                            variant="caption"
+                            color="text.secondary"
+                            sx={{ display: 'block', mb: 0.75, fontWeight: 700 }}
                         >
-                            Status: {connectionStatusLabel(connection)}
-                        </Button>
-                    </Grid>
-
-                    <Grid size={12}>
-                        <Button
-                            onClick={onClose}
-                            color="primary"
+                            KERIA target
+                        </Typography>
+                        <Autocomplete
+                            id="combo-box-demo"
+                            options={appConfig.connectionOptions}
+                            getOptionLabel={(option) =>
+                                `${option.label} (${option.adminUrl})`
+                            }
+                            isOptionEqualToValue={(option, value) =>
+                                option.adminUrl === value.adminUrl &&
+                                option.bootUrl === value.bootUrl
+                            }
+                            renderInput={(params) => (
+                                <TextField
+                                    {...params}
+                                    label="Connection"
+                                    fullWidth
+                                />
+                            )}
+                            value={selectedConnection}
                             fullWidth
-                            data-testid="connect-close"
+                            onChange={(_event, newValue) => {
+                                setSelectedConnection(
+                                    newValue ?? appConfig.connectionOptions[0]
+                                );
+                            }}
+                        />
+                        <Typography
+                            variant="caption"
+                            color="text.secondary"
+                            sx={{ display: 'block', mt: 0.75, ...monoValueSx }}
                         >
-                            Close
-                        </Button>
-                    </Grid>
-                </Grid>
+                            Admin {selectedConnection.adminUrl} | Boot{' '}
+                            {selectedConnection.bootUrl}
+                        </Typography>
+                    </Box>
+                </Stack>
+            </DialogContent>
+            <DialogActions sx={{ px: { xs: 2, sm: 3 }, py: 2 }}>
+                <Button
+                    onClick={onClose}
+                    color="primary"
+                    fullWidth
+                    data-testid="connect-close"
+                >
+                    Close
+                </Button>
             </DialogActions>
         </Dialog>
     );
diff --git a/src/app/ConnectionRequired.tsx b/src/app/ConnectionRequired.tsx
index 97fe553b..d9059e46 100644
--- a/src/app/ConnectionRequired.tsx
+++ b/src/app/ConnectionRequired.tsx
@@ -1,4 +1,5 @@
 import { Box, Typography } from '@mui/material';
+import { ConsolePanel, StatusPill } from './Console';
 
 /**
  * Blocked-state view for routes that need a connected Signify client.
@@ -7,7 +8,15 @@ import { Box, Typography } from '@mui/material';
  * direct URL navigation should be passive until the user chooses to connect.
  */
 export const ConnectionRequired = () => (
-    <Box sx={{ p: 3 }} data-testid="connection-required">
-        <Typography>Connect to KERIA before opening this view.</Typography>
+    <Box sx={{ maxWidth: 720 }} data-testid="connection-required">
+        <ConsolePanel
+            title="KERIA connection required"
+            eyebrow="Access gate"
+            actions={<StatusPill label="offline" tone="error" />}
+        >
+            <Typography color="text.secondary">
+                Connect to KERIA before opening this view.
+            </Typography>
+        </ConsolePanel>
     </Box>
 );
diff --git a/src/app/Console.tsx b/src/app/Console.tsx
new file mode 100644
index 00000000..a818fa52
--- /dev/null
+++ b/src/app/Console.tsx
@@ -0,0 +1,240 @@
+import type { ReactNode } from 'react';
+import { Box, Button, Stack, Typography } from '@mui/material';
+import type { ButtonProps, SxProps, Theme } from '@mui/material';
+import { monoValueSx } from './consoleStyles';
+
+export interface PageHeaderProps {
+    eyebrow?: string;
+    title: string;
+    summary?: string;
+    actions?: ReactNode;
+}
+
+export const PageHeader = ({
+    eyebrow,
+    title,
+    summary,
+    actions,
+}: PageHeaderProps) => (
+    <Stack
+        direction={{ xs: 'column', md: 'row' }}
+        spacing={1.5}
+        sx={{
+            alignItems: { xs: 'stretch', md: 'flex-end' },
+            justifyContent: 'space-between',
+            minWidth: 0,
+        }}
+    >
+        <Box sx={{ minWidth: 0 }}>
+            {eyebrow && (
+                <Typography
+                    variant="caption"
+                    color="primary.main"
+                    sx={{
+                        display: 'block',
+                        fontWeight: 700,
+                        textTransform: 'uppercase',
+                    }}
+                >
+                    {eyebrow}
+                </Typography>
+            )}
+            <Typography variant="h4" component="h1">
+                {title}
+            </Typography>
+            {summary && (
+                <Typography
+                    color="text.secondary"
+                    sx={{ mt: 0.5, maxWidth: 760, overflowWrap: 'anywhere' }}
+                >
+                    {summary}
+                </Typography>
+            )}
+        </Box>
+        {actions && <Box sx={{ flex: '0 0 auto' }}>{actions}</Box>}
+    </Stack>
+);
+
+export interface ConsolePanelProps {
+    children: ReactNode;
+    title?: string;
+    eyebrow?: string;
+    actions?: ReactNode;
+    sx?: SxProps<Theme>;
+}
+
+export const ConsolePanel = ({
+    children,
+    title,
+    eyebrow,
+    actions,
+    sx,
+}: ConsolePanelProps) => (
+    <Box
+        sx={[
+            {
+                position: 'relative',
+                overflow: 'hidden',
+                border: 1,
+                borderColor: 'divider',
+                borderRadius: 1,
+                bgcolor: 'background.paper',
+                boxShadow: '0 18px 42px rgba(0, 0, 0, 0.2)',
+                '&:before': {
+                    content: '""',
+                    position: 'absolute',
+                    inset: 0,
+                    pointerEvents: 'none',
+                    borderTop: '1px solid rgba(118, 232, 255, 0.16)',
+                },
+            },
+            ...(Array.isArray(sx) ? sx : sx ? [sx] : []),
+        ]}
+    >
+        {(title || eyebrow || actions) && (
+            <Stack
+                direction={{ xs: 'column', sm: 'row' }}
+                spacing={1}
+                sx={{
+                    alignItems: { xs: 'stretch', sm: 'center' },
+                    justifyContent: 'space-between',
+                    borderBottom: 1,
+                    borderColor: 'divider',
+                    px: 2,
+                    py: 1.5,
+                }}
+            >
+                <Box sx={{ minWidth: 0 }}>
+                    {eyebrow && (
+                        <Typography
+                            variant="caption"
+                            color="primary.main"
+                            sx={{ fontWeight: 700, textTransform: 'uppercase' }}
+                        >
+                            {eyebrow}
+                        </Typography>
+                    )}
+                    {title && (
+                        <Typography
+                            variant="h6"
+                            sx={{ overflowWrap: 'anywhere' }}
+                        >
+                            {title}
+                        </Typography>
+                    )}
+                </Box>
+                {actions}
+            </Stack>
+        )}
+        <Box sx={{ p: 2 }}>{children}</Box>
+    </Box>
+);
+
+export interface EmptyStateProps {
+    title: string;
+    message: string;
+    action?: ReactNode;
+}
+
+export const EmptyState = ({ title, message, action }: EmptyStateProps) => (
+    <Box
+        sx={{
+            border: 1,
+            borderColor: 'divider',
+            borderRadius: 1,
+            bgcolor: 'rgba(13, 23, 34, 0.72)',
+            px: { xs: 2, sm: 3 },
+            py: { xs: 3, sm: 4 },
+            textAlign: { xs: 'left', sm: 'center' },
+        }}
+    >
+        <Typography variant="h6">{title}</Typography>
+        <Typography color="text.secondary" sx={{ mt: 0.75 }}>
+            {message}
+        </Typography>
+        {action && <Box sx={{ mt: 2 }}>{action}</Box>}
+    </Box>
+);
+
+export interface StatusPillProps {
+    label: string;
+    tone?: 'neutral' | 'success' | 'warning' | 'error' | 'info';
+}
+
+const statusColors = {
+    neutral: { borderColor: 'divider', color: 'text.secondary' },
+    success: { borderColor: 'success.main', color: 'success.main' },
+    warning: { borderColor: 'warning.main', color: 'warning.main' },
+    error: { borderColor: 'error.main', color: 'error.main' },
+    info: { borderColor: 'primary.main', color: 'primary.main' },
+} as const;
+
+export const StatusPill = ({ label, tone = 'neutral' }: StatusPillProps) => (
+    <Box
+        component="span"
+        sx={{
+            ...statusColors[tone],
+            display: 'inline-flex',
+            alignItems: 'center',
+            minHeight: 24,
+            border: 1,
+            borderRadius: 1,
+            px: 1,
+            fontSize: '0.75rem',
+            fontWeight: 700,
+            textTransform: 'uppercase',
+            whiteSpace: 'nowrap',
+        }}
+    >
+        {label}
+    </Box>
+);
+
+export interface TelemetryRowProps {
+    label: string;
+    value: ReactNode;
+    mono?: boolean;
+}
+
+export const TelemetryRow = ({
+    label,
+    value,
+    mono = false,
+}: TelemetryRowProps) => (
+    <Box
+        sx={{
+            display: 'grid',
+            gridTemplateColumns: { xs: '1fr', sm: 'minmax(160px, 0.32fr) 1fr' },
+            gap: { xs: 0.25, sm: 1.5 },
+            alignItems: 'baseline',
+            borderBottom: 1,
+            borderColor: 'divider',
+            py: 1,
+            '&:last-child': {
+                borderBottom: 0,
+            },
+        }}
+    >
+        <Typography
+            variant="body2"
+            color="text.secondary"
+            sx={{ fontWeight: 700 }}
+        >
+            {label}
+        </Typography>
+        <Typography
+            variant="body2"
+            sx={{
+                ...(mono ? monoValueSx : {}),
+                minWidth: 0,
+                color: 'text.primary',
+            }}
+        >
+            {value}
+        </Typography>
+    </Box>
+);
+
+export const CommandButton = (props: ButtonProps) => (
+    <Button variant="contained" color="primary" {...props} />
+);
diff --git a/src/app/LoadingOverlay.tsx b/src/app/LoadingOverlay.tsx
index 8a70a6cf..852ef848 100644
--- a/src/app/LoadingOverlay.tsx
+++ b/src/app/LoadingOverlay.tsx
@@ -26,8 +26,8 @@ export const LoadingOverlay = ({
             data-pending-source={source ?? undefined}
             sx={(theme) => ({
                 zIndex: theme.zIndex.modal + 2,
-                color: 'common.white',
-                bgcolor: 'rgba(0, 0, 0, 0.48)',
+                color: 'text.primary',
+                bgcolor: 'rgba(0, 0, 0, 0.72)',
                 px: 2,
             })}
         >
@@ -42,17 +42,17 @@ export const LoadingOverlay = ({
                     px: 3,
                     py: 2.5,
                     borderRadius: 1,
+                    border: 1,
+                    borderColor: 'primary.main',
                     bgcolor: 'background.paper',
                     color: 'text.primary',
-                    boxShadow: 6,
+                    boxShadow:
+                        '0 20px 56px rgba(0, 0, 0, 0.54), 0 0 28px rgba(39, 215, 255, 0.12)',
                     textAlign: 'center',
                 }}
             >
-                <CircularProgress aria-hidden="true" />
-                <Typography
-                    variant="body1"
-                    sx={{ overflowWrap: 'anywhere' }}
-                >
+                <CircularProgress aria-hidden="true" color="primary" />
+                <Typography variant="body1" sx={{ overflowWrap: 'anywhere' }}>
                     {label}
                 </Typography>
             </Box>
diff --git a/src/app/NavigationDrawer.tsx b/src/app/NavigationDrawer.tsx
index 2a5dc97d..864e86d7 100644
--- a/src/app/NavigationDrawer.tsx
+++ b/src/app/NavigationDrawer.tsx
@@ -1,7 +1,22 @@
 import type { KeyboardEvent } from 'react';
-import { Drawer, List, ListItemButton, ListItemText } from '@mui/material';
-import { useNavigate } from 'react-router-dom';
+import {
+    Box,
+    Drawer,
+    List,
+    ListItemButton,
+    ListItemIcon,
+    ListItemText,
+    Tooltip,
+    Typography,
+} from '@mui/material';
+import BadgeOutlinedIcon from '@mui/icons-material/BadgeOutlined';
+import CreditCardIcon from '@mui/icons-material/CreditCard';
+import ListAltIcon from '@mui/icons-material/ListAlt';
+import NotificationsIcon from '@mui/icons-material/Notifications';
+import TerminalIcon from '@mui/icons-material/Terminal';
+import { useLocation, useNavigate } from 'react-router-dom';
 import { APP_NAV_ITEMS } from './router';
+import type { AppRouteId } from './router';
 
 /**
  * Props for the route navigation drawer.
@@ -13,6 +28,45 @@ export interface NavigationDrawerProps {
     onClose: () => void;
 }
 
+const routeIcon = (routeId: AppRouteId) => {
+    if (routeId === 'identifiers') {
+        return <BadgeOutlinedIcon />;
+    }
+
+    if (routeId === 'credentials') {
+        return <CreditCardIcon />;
+    }
+
+    if (routeId === 'client') {
+        return <TerminalIcon />;
+    }
+
+    if (routeId === 'operations') {
+        return <ListAltIcon />;
+    }
+
+    return <NotificationsIcon />;
+};
+
+const navButtonSx = (active: boolean) => ({
+    mx: 1,
+    my: 0.5,
+    border: 1,
+    borderColor: active ? 'primary.main' : 'transparent',
+    borderRadius: 1,
+    color: active ? 'primary.main' : 'text.secondary',
+    bgcolor: active ? 'action.selected' : 'transparent',
+    '&:hover': {
+        borderColor: 'primary.main',
+        bgcolor: 'action.hover',
+        color: 'text.primary',
+    },
+    '.MuiListItemIcon-root': {
+        color: 'inherit',
+        minWidth: 38,
+    },
+});
+
 /**
  * Drawer generated from data-router route handles.
  *
@@ -22,6 +76,7 @@ export interface NavigationDrawerProps {
  */
 export const NavigationDrawer = ({ open, onClose }: NavigationDrawerProps) => {
     const navigate = useNavigate();
+    const location = useLocation();
 
     const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
         if (event.key === 'Tab' || event.key === 'Shift') {
@@ -39,6 +94,7 @@ export const NavigationDrawer = ({ open, onClose }: NavigationDrawerProps) => {
                 paper: {
                     sx: {
                         width: 'min(80vw, 280px)',
+                        pt: 1,
                     },
                 },
             }}
@@ -53,7 +109,13 @@ export const NavigationDrawer = ({ open, onClose }: NavigationDrawerProps) => {
                                 onClose();
                             }}
                             data-testid={view.testId}
+                            sx={navButtonSx(
+                                location.pathname.startsWith(view.path)
+                            )}
                         >
+                            <ListItemIcon>
+                                {routeIcon(view.routeId)}
+                            </ListItemIcon>
                             <ListItemText primary={view.label} />
                         </ListItemButton>
                     ))}
@@ -62,3 +124,69 @@ export const NavigationDrawer = ({ open, onClose }: NavigationDrawerProps) => {
         </Drawer>
     );
 };
+
+export const DesktopNavigationRail = () => {
+    const navigate = useNavigate();
+    const location = useLocation();
+
+    return (
+        <Box
+            component="nav"
+            aria-label="Primary routes"
+            sx={{
+                display: { xs: 'none', md: 'flex' },
+                position: 'fixed',
+                top: 64,
+                bottom: 0,
+                left: 0,
+                zIndex: (theme) => theme.zIndex.appBar - 1,
+                width: 184,
+                flexDirection: 'column',
+                gap: 0.5,
+                borderRight: 1,
+                borderColor: 'divider',
+                bgcolor: 'rgba(7, 13, 20, 0.9)',
+                px: 1,
+                py: 2,
+                backdropFilter: 'blur(10px)',
+            }}
+        >
+            {APP_NAV_ITEMS.map((view) => {
+                const active = location.pathname.startsWith(view.path);
+
+                return (
+                    <Tooltip
+                        key={view.routeId}
+                        title={view.label}
+                        placement="right"
+                    >
+                        <ListItemButton
+                            onClick={() => navigate(view.path)}
+                            data-testid={`rail-${view.testId}`}
+                            selected={active}
+                            sx={{
+                                ...navButtonSx(active),
+                                mx: 0,
+                                minHeight: 48,
+                            }}
+                        >
+                            <ListItemIcon>
+                                {routeIcon(view.routeId)}
+                            </ListItemIcon>
+                            <ListItemText
+                                primary={
+                                    <Typography
+                                        component="span"
+                                        sx={{ fontWeight: active ? 700 : 600 }}
+                                    >
+                                        {view.label}
+                                    </Typography>
+                                }
+                            />
+                        </ListItemButton>
+                    </Tooltip>
+                );
+            })}
+        </Box>
+    );
+};
diff --git a/src/app/RootLayout.tsx b/src/app/RootLayout.tsx
index 1c1c81bd..85e09102 100644
--- a/src/app/RootLayout.tsx
+++ b/src/app/RootLayout.tsx
@@ -7,7 +7,7 @@ import { AppRuntimeProvider } from './runtimeContext';
 import { ConnectDialog } from './ConnectDialog';
 import { derivePendingState } from './pendingState';
 import { LoadingOverlay } from './LoadingOverlay';
-import { NavigationDrawer } from './NavigationDrawer';
+import { DesktopNavigationRail, NavigationDrawer } from './NavigationDrawer';
 import { TopBar } from './TopBar';
 import { useAppSelector } from '../state/hooks';
 import {
@@ -65,6 +65,7 @@ const RootLayoutContent = () => {
                 open={drawerOpen}
                 onClose={() => setDrawerOpen(false)}
             />
+            <DesktopNavigationRail />
             <ConnectDialog
                 open={connectDialogOpen}
                 connection={connection}
@@ -81,11 +82,14 @@ const RootLayoutContent = () => {
                     minHeight: '100dvh',
                     overflowX: 'clip',
                     px: { xs: 2, sm: 3 },
+                    ml: { xs: 0, md: '184px' },
                     pt: { xs: 'calc(56px + 16px)', sm: 'calc(64px + 24px)' },
                     pb: {
                         xs: 'calc(88px + env(safe-area-inset-bottom))',
                         sm: 3,
                     },
+                    background:
+                        'linear-gradient(180deg, rgba(39, 215, 255, 0.04) 0%, rgba(5, 9, 13, 0) 220px)',
                 }}
             >
                 <Outlet />
diff --git a/src/app/RouteErrorBoundary.tsx b/src/app/RouteErrorBoundary.tsx
index c76205e9..2d840c9a 100644
--- a/src/app/RouteErrorBoundary.tsx
+++ b/src/app/RouteErrorBoundary.tsx
@@ -1,5 +1,6 @@
 import { Box, Typography } from '@mui/material';
 import { isRouteErrorResponse, useRouteError } from 'react-router-dom';
+import { ConsolePanel, StatusPill } from './Console';
 import { toError } from '../signify/client';
 
 export interface RouteErrorBoundaryProps {
@@ -29,11 +30,16 @@ export const RouteErrorBoundary = ({ title }: RouteErrorBoundaryProps) => {
     const error = useRouteError();
 
     return (
-        <Box sx={{ p: 3 }}>
-            <Typography variant="h6" color="error">
-                {title}
-            </Typography>
-            <Typography color="error">{routeErrorMessage(error)}</Typography>
+        <Box sx={{ maxWidth: 820 }}>
+            <ConsolePanel
+                title={title}
+                eyebrow="Route failure"
+                actions={<StatusPill label="error" tone="error" />}
+            >
+                <Typography color="error">
+                    {routeErrorMessage(error)}
+                </Typography>
+            </ConsolePanel>
         </Box>
     );
 };
diff --git a/src/app/TopBar.tsx b/src/app/TopBar.tsx
index 2cf13232..71c4b191 100644
--- a/src/app/TopBar.tsx
+++ b/src/app/TopBar.tsx
@@ -18,6 +18,7 @@ import CircleIcon from '@mui/icons-material/Circle';
 import MenuIcon from '@mui/icons-material/Menu';
 import NotificationsIcon from '@mui/icons-material/Notifications';
 import { Link as RouterLink } from 'react-router-dom';
+import { StatusPill } from './Console';
 import type { AppNotificationRecord } from '../state/appNotifications.slice';
 import type { OperationRecord } from '../state/operations.slice';
 import { allAppNotificationsRead } from '../state/appNotifications.slice';
@@ -99,6 +100,7 @@ export const TopBar = ({
                     display: 'flex',
                     gap: { xs: 0.5, sm: 1.5 },
                     minWidth: 0,
+                    minHeight: { xs: 56, sm: 64 },
                 }}
             >
                 <IconButton
@@ -107,6 +109,7 @@ export const TopBar = ({
                     aria-label="menu"
                     data-testid="nav-open"
                     onClick={onMenuClick}
+                    sx={{ display: { xs: 'inline-flex', md: 'none' } }}
                 >
                     <MenuIcon />
                 </IconButton>
@@ -116,10 +119,18 @@ export const TopBar = ({
                     sx={{
                         flex: '1 1 auto',
                         minWidth: 0,
+                        color: 'text.primary',
+                        fontWeight: 700,
                     }}
                 >
-                    Signify Client
+                    Signify Ops
                 </Typography>
+                <Box sx={{ display: { xs: 'none', lg: 'block' } }}>
+                    <StatusPill
+                        label={isConnected ? 'KERIA online' : 'KERIA offline'}
+                        tone={isConnected ? 'success' : 'error'}
+                    />
+                </Box>
                 <Tooltip title="Background operations">
                     <IconButton
                         color="inherit"
@@ -128,7 +139,7 @@ export const TopBar = ({
                         onClick={openOperations}
                     >
                         <Badge
-                            color="secondary"
+                            color="primary"
                             badgeContent={activeOperations.length}
                             invisible={activeOperations.length === 0}
                         >
@@ -144,7 +155,7 @@ export const TopBar = ({
                                     sx={{
                                         width: 22,
                                         height: 22,
-                                        borderRadius: '50%',
+                                        borderRadius: 1,
                                         border: 2,
                                         borderColor: 'currentColor',
                                         display: 'block',
@@ -171,27 +182,30 @@ export const TopBar = ({
                     </IconButton>
                 </Tooltip>
                 <Button
-                    color="inherit"
+                    variant={isConnected ? 'outlined' : 'contained'}
+                    color={isConnected ? 'success' : 'primary'}
                     aria-label={isConnected ? 'Connected' : 'Connect'}
                     sx={{
                         flex: '0 0 auto',
-                        minWidth: { xs: 44, sm: 64 },
+                        minWidth: { xs: 44, sm: 92 },
                         px: { xs: 1, sm: 2 },
                         gap: 0.75,
+                        borderColor: isConnected ? 'success.main' : undefined,
                     }}
                     onClick={onConnectClick}
                     data-testid="connect-open"
                 >
                     <CircleIcon
                         sx={{
-                            color: isConnected ? 'green' : 'red',
+                            fontSize: 14,
+                            color: isConnected ? 'success.main' : 'error.main',
                         }}
                     />
                     <Typography
                         component="span"
                         sx={{ display: { xs: 'none', sm: 'inline' } }}
                     >
-                        Connect
+                        {isConnected ? 'Online' : 'Connect'}
                     </Typography>
                 </Button>
             </Toolbar>
@@ -202,7 +216,7 @@ export const TopBar = ({
                 anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
                 transformOrigin={{ vertical: 'top', horizontal: 'right' }}
             >
-                <List sx={{ width: 320, maxWidth: '90vw' }}>
+                <List sx={{ width: 340, maxWidth: '90vw', p: 1 }}>
                     {activeOperations.length === 0 ? (
                         <ListItemText
                             sx={{ px: 2, py: 1 }}
@@ -215,6 +229,12 @@ export const TopBar = ({
                                 component={RouterLink}
                                 to={operation.operationRoute}
                                 onClick={() => setOperationsAnchor(null)}
+                                sx={{
+                                    border: 1,
+                                    borderColor: 'divider',
+                                    borderRadius: 1,
+                                    mb: 0.75,
+                                }}
                             >
                                 <ListItemText
                                     primary={operation.title}
@@ -227,8 +247,9 @@ export const TopBar = ({
                         component={RouterLink}
                         to="/operations"
                         onClick={() => setOperationsAnchor(null)}
+                        sx={{ borderRadius: 1 }}
                     >
-                        <ListItemText primary="All operations" />
+                        <ListItemText primary="Activity console" />
                     </ListItemButton>
                 </List>
             </Popover>
@@ -239,7 +260,7 @@ export const TopBar = ({
                 anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
                 transformOrigin={{ vertical: 'top', horizontal: 'right' }}
             >
-                <List sx={{ width: 340, maxWidth: '90vw' }}>
+                <List sx={{ width: 360, maxWidth: '90vw', p: 1 }}>
                     {recentNotifications.length === 0 ? (
                         <ListItemText
                             sx={{ px: 2, py: 1 }}
@@ -258,9 +279,16 @@ export const TopBar = ({
                                 sx={{
                                     bgcolor:
                                         notification.status === 'unread'
-                                            ? 'common.white'
+                                            ? 'action.selected'
                                             : 'action.hover',
                                     color: 'text.primary',
+                                    border: 1,
+                                    borderColor:
+                                        notification.status === 'unread'
+                                            ? 'primary.main'
+                                            : 'divider',
+                                    borderRadius: 1,
+                                    mb: 0.75,
                                 }}
                             >
                                 <ListItemText
@@ -274,6 +302,7 @@ export const TopBar = ({
                         component={RouterLink}
                         to="/notifications"
                         onClick={() => setNotificationsAnchor(null)}
+                        sx={{ borderRadius: 1 }}
                     >
                         <ListItemText primary="All notifications" />
                     </ListItemButton>
diff --git a/src/app/consoleStyles.ts b/src/app/consoleStyles.ts
new file mode 100644
index 00000000..5382e395
--- /dev/null
+++ b/src/app/consoleStyles.ts
@@ -0,0 +1,6 @@
+export const monoValueSx = {
+    fontFamily: 'var(--app-mono-font)',
+    letterSpacing: 0,
+    overflowWrap: 'anywhere',
+    wordBreak: 'break-word',
+} as const;
diff --git a/src/app/theme.ts b/src/app/theme.ts
new file mode 100644
index 00000000..48dbd62c
--- /dev/null
+++ b/src/app/theme.ts
@@ -0,0 +1,298 @@
+import { createTheme } from '@mui/material/styles';
+
+const graphite = {
+    abyss: '#05090d',
+    deck: '#091018',
+    panel: '#0d1722',
+    panelHigh: '#132334',
+    line: '#234055',
+    lineStrong: '#3a6680',
+    text: '#e7f4ff',
+    muted: '#8aa1b2',
+    dim: '#5f7380',
+    cyan: '#27d7ff',
+    blue: '#2487ff',
+    amber: '#ffb02e',
+    green: '#39d47a',
+    red: '#ff3d4f',
+    violet: '#a778ff',
+};
+
+export const appTheme = createTheme({
+    palette: {
+        mode: 'dark',
+        primary: {
+            main: graphite.cyan,
+            light: '#76e8ff',
+            dark: '#008bb8',
+            contrastText: '#041016',
+        },
+        secondary: {
+            main: graphite.violet,
+            light: '#c5a8ff',
+            dark: '#7450c7',
+            contrastText: '#ffffff',
+        },
+        success: {
+            main: graphite.green,
+            dark: '#18a955',
+            contrastText: '#041016',
+        },
+        warning: {
+            main: graphite.amber,
+            dark: '#c67b00',
+            contrastText: '#05090d',
+        },
+        error: {
+            main: graphite.red,
+            dark: '#ba1628',
+            contrastText: '#ffffff',
+        },
+        info: {
+            main: graphite.blue,
+            dark: '#0063cc',
+            contrastText: '#ffffff',
+        },
+        background: {
+            default: graphite.abyss,
+            paper: graphite.panel,
+        },
+        text: {
+            primary: graphite.text,
+            secondary: graphite.muted,
+            disabled: graphite.dim,
+        },
+        divider: graphite.line,
+        action: {
+            active: graphite.cyan,
+            hover: 'rgba(39, 215, 255, 0.09)',
+            selected: 'rgba(39, 215, 255, 0.16)',
+            disabled: 'rgba(138, 161, 178, 0.38)',
+            disabledBackground: 'rgba(95, 115, 128, 0.18)',
+        },
+    },
+    shape: {
+        borderRadius: 4,
+    },
+    typography: {
+        fontFamily:
+            'var(--app-interface-font), Inter, system-ui, Helvetica, Arial, sans-serif',
+        h1: { fontWeight: 600, letterSpacing: 0 },
+        h2: { fontWeight: 600, letterSpacing: 0 },
+        h3: { fontWeight: 600, letterSpacing: 0 },
+        h4: { fontWeight: 600, letterSpacing: 0 },
+        h5: { fontWeight: 600, letterSpacing: 0 },
+        h6: { fontWeight: 600, letterSpacing: 0 },
+        button: {
+            fontWeight: 700,
+            letterSpacing: 0,
+            textTransform: 'uppercase',
+        },
+        caption: {
+            letterSpacing: 0,
+        },
+    },
+    components: {
+        MuiCssBaseline: {
+            styleOverrides: {
+                body: {
+                    backgroundColor: graphite.abyss,
+                    backgroundImage:
+                        'linear-gradient(rgba(39, 215, 255, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(39, 215, 255, 0.025) 1px, transparent 1px)',
+                    backgroundSize: '48px 48px, 48px 48px',
+                },
+            },
+        },
+        MuiAppBar: {
+            styleOverrides: {
+                root: {
+                    background: 'rgba(6, 13, 20, 0.94)',
+                    borderBottom: `1px solid ${graphite.lineStrong}`,
+                    boxShadow: '0 12px 28px rgba(0, 0, 0, 0.32)',
+                    backdropFilter: 'blur(12px)',
+                },
+            },
+        },
+        MuiPaper: {
+            styleOverrides: {
+                root: {
+                    backgroundImage: 'none',
+                    border: `1px solid ${graphite.line}`,
+                    boxShadow: '0 18px 44px rgba(0, 0, 0, 0.32)',
+                },
+            },
+        },
+        MuiCard: {
+            styleOverrides: {
+                root: {
+                    backgroundImage: 'none',
+                    backgroundColor: graphite.panel,
+                    border: `1px solid ${graphite.line}`,
+                    boxShadow: '0 12px 32px rgba(0, 0, 0, 0.24)',
+                },
+            },
+        },
+        MuiDialog: {
+            styleOverrides: {
+                paper: {
+                    backgroundColor: graphite.deck,
+                    border: `1px solid ${graphite.lineStrong}`,
+                    boxShadow:
+                        '0 24px 70px rgba(0, 0, 0, 0.62), inset 0 1px 0 rgba(118, 232, 255, 0.12)',
+                },
+            },
+        },
+        MuiDialogTitle: {
+            styleOverrides: {
+                root: {
+                    borderBottom: `1px solid ${graphite.line}`,
+                    color: graphite.text,
+                    paddingTop: 20,
+                    paddingBottom: 16,
+                },
+            },
+        },
+        MuiDialogActions: {
+            styleOverrides: {
+                root: {
+                    borderTop: `1px solid ${graphite.line}`,
+                },
+            },
+        },
+        MuiButton: {
+            defaultProps: {
+                disableElevation: true,
+            },
+            variants: [
+                {
+                    props: { variant: 'contained', color: 'primary' },
+                    style: {
+                        background:
+                            'linear-gradient(180deg, #37ddff 0%, #1478c7 100%)',
+                        boxShadow:
+                            'inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 0 18px rgba(39, 215, 255, 0.18)',
+                        '&:hover': {
+                            background:
+                                'linear-gradient(180deg, #78eaff 0%, #198eea 100%)',
+                        },
+                        '&.Mui-disabled': {
+                            background: 'rgba(95, 115, 128, 0.18)',
+                            color: 'rgba(138, 161, 178, 0.38)',
+                            boxShadow: 'none',
+                        },
+                    },
+                },
+            ],
+            styleOverrides: {
+                root: {
+                    borderRadius: 3,
+                    minHeight: 40,
+                },
+                outlined: {
+                    borderColor: graphite.lineStrong,
+                    color: graphite.text,
+                    '&:hover': {
+                        borderColor: graphite.cyan,
+                        backgroundColor: 'rgba(39, 215, 255, 0.08)',
+                    },
+                },
+                text: {
+                    color: graphite.cyan,
+                },
+            },
+        },
+        MuiIconButton: {
+            styleOverrides: {
+                root: {
+                    borderRadius: 3,
+                    '&:hover': {
+                        backgroundColor: 'rgba(39, 215, 255, 0.1)',
+                    },
+                },
+            },
+        },
+        MuiTextField: {
+            defaultProps: {
+                variant: 'outlined',
+            },
+        },
+        MuiOutlinedInput: {
+            styleOverrides: {
+                root: {
+                    backgroundColor: 'rgba(5, 9, 13, 0.68)',
+                    borderRadius: 3,
+                    '& fieldset': {
+                        borderColor: graphite.lineStrong,
+                    },
+                    '&:hover fieldset': {
+                        borderColor: graphite.cyan,
+                    },
+                    '&.Mui-focused fieldset': {
+                        borderColor: graphite.cyan,
+                        boxShadow: '0 0 0 1px rgba(39, 215, 255, 0.24)',
+                    },
+                },
+            },
+        },
+        MuiInputLabel: {
+            styleOverrides: {
+                root: {
+                    color: graphite.muted,
+                    '&.Mui-focused': {
+                        color: graphite.cyan,
+                    },
+                },
+            },
+        },
+        MuiTableCell: {
+            styleOverrides: {
+                root: {
+                    borderBottom: `1px solid ${graphite.line}`,
+                },
+                head: {
+                    color: graphite.muted,
+                    fontSize: '0.76rem',
+                    fontWeight: 700,
+                    textTransform: 'uppercase',
+                },
+            },
+        },
+        MuiChip: {
+            styleOverrides: {
+                root: {
+                    borderRadius: 3,
+                    fontWeight: 700,
+                },
+            },
+        },
+        MuiAccordion: {
+            styleOverrides: {
+                root: {
+                    backgroundColor: graphite.panel,
+                    backgroundImage: 'none',
+                    border: `1px solid ${graphite.line}`,
+                    boxShadow: 'none',
+                    '&:before': {
+                        display: 'none',
+                    },
+                },
+            },
+        },
+        MuiDrawer: {
+            styleOverrides: {
+                paper: {
+                    backgroundColor: '#070d14',
+                    borderRight: `1px solid ${graphite.lineStrong}`,
+                },
+            },
+        },
+        MuiBackdrop: {
+            styleOverrides: {
+                root: {
+                    backgroundColor: 'rgba(0, 0, 0, 0.68)',
+                    backdropFilter: 'blur(2px)',
+                },
+            },
+        },
+    },
+});
diff --git a/src/features/client/AidCard.tsx b/src/features/client/AidCard.tsx
index 4333a28a..e1a76ec4 100644
--- a/src/features/client/AidCard.tsx
+++ b/src/features/client/AidCard.tsx
@@ -1,5 +1,6 @@
-import { Card, CardContent, Divider, Grid, Typography } from '@mui/material';
+import { Stack } from '@mui/material';
 import type { KeyState } from 'signify-ts';
+import { ConsolePanel, TelemetryRow } from '../../app/Console';
 import { keyStateFieldDescriptions } from './keyStateFieldDescriptions';
 
 /**
@@ -17,32 +18,18 @@ export interface AidCardProps {
  * to the raw key. State extraction belongs in `ClientView`.
  */
 export const AidCard = ({ data, text }: AidCardProps) => (
-    <Card sx={{ width: '100%', height: '100%' }}>
-        <CardContent>
-            <Typography variant="h6" component="div" gutterBottom>
-                {text}
-            </Typography>
-            <Divider />
-            <Grid container spacing={2}>
-                {Object.entries(data).map(([key, value]) =>
-                    typeof value === 'string' ? (
-                        <Grid size={12} key={key}>
-                            <Typography
-                                variant="subtitle1"
-                                gutterBottom
-                                align="left"
-                                sx={{ overflowWrap: 'anywhere' }}
-                            >
-                                <strong>
-                                    {keyStateFieldDescriptions[key]?.title ??
-                                        key}
-                                </strong>{' '}
-                                {value}
-                            </Typography>
-                        </Grid>
-                    ) : null
-                )}
-            </Grid>
-        </CardContent>
-    </Card>
+    <ConsolePanel title={text} eyebrow="Key state" sx={{ height: '100%' }}>
+        <Stack spacing={0.25}>
+            {Object.entries(data).map(([key, value]) =>
+                typeof value === 'string' ? (
+                    <TelemetryRow
+                        key={key}
+                        label={keyStateFieldDescriptions[key]?.title ?? key}
+                        value={value}
+                        mono
+                    />
+                ) : null
+            )}
+        </Stack>
+    </ConsolePanel>
 );
diff --git a/src/features/client/ClientView.tsx b/src/features/client/ClientView.tsx
index 58c20668..ed141b20 100644
--- a/src/features/client/ClientView.tsx
+++ b/src/features/client/ClientView.tsx
@@ -1,6 +1,8 @@
-import { Box, Grid, Typography } from '@mui/material';
+import { Box, Grid, Stack } from '@mui/material';
 import { useLoaderData } from 'react-router-dom';
 import { ConnectionRequired } from '../../app/ConnectionRequired';
+import { ConsolePanel, PageHeader, TelemetryRow } from '../../app/Console';
+import { monoValueSx } from '../../app/consoleStyles';
 import type { ClientLoaderData } from '../../app/routeData';
 import { AidCard } from './AidCard';
 
@@ -23,21 +25,40 @@ export const ClientView = () => {
     const controller = summary.state.controller.state;
 
     return (
-        <Box sx={{ display: 'grid', gap: 2 }}>
-            <Box data-testid="client-summary">
-                <Typography
-                    data-testid="controller-aid"
-                    sx={{ overflowWrap: 'anywhere' }}
-                >
-                    Controller AID: {summary.controllerPre}
-                </Typography>
-                <Typography
-                    data-testid="agent-aid"
-                    sx={{ overflowWrap: 'anywhere' }}
-                >
-                    Agent AID: {summary.agentPre}
-                </Typography>
-            </Box>
+        <Box sx={{ display: 'grid', gap: 2.5 }}>
+            <PageHeader
+                eyebrow="Diagnostics"
+                title="Client Console"
+                summary="Controller and agent key-state telemetry for the connected Signify session."
+            />
+            <ConsolePanel title="Session identity" eyebrow="Connected client">
+                <Stack spacing={0.25} data-testid="client-summary">
+                    <TelemetryRow
+                        label="Controller AID"
+                        value={
+                            <Box
+                                component="span"
+                                data-testid="controller-aid"
+                                sx={monoValueSx}
+                            >
+                                {summary.controllerPre}
+                            </Box>
+                        }
+                    />
+                    <TelemetryRow
+                        label="Agent AID"
+                        value={
+                            <Box
+                                component="span"
+                                data-testid="agent-aid"
+                                sx={monoValueSx}
+                            >
+                                {summary.agentPre}
+                            </Box>
+                        }
+                    />
+                </Stack>
+            </ConsolePanel>
             <Grid container spacing={2} sx={{ alignItems: 'stretch' }}>
                 <Grid size={{ xs: 12, md: 6 }}>
                     <AidCard data={agent} text="Agent" />
diff --git a/src/features/credentials/CredentialsView.tsx b/src/features/credentials/CredentialsView.tsx
index 7af1afde..86b5cb80 100644
--- a/src/features/credentials/CredentialsView.tsx
+++ b/src/features/credentials/CredentialsView.tsx
@@ -1,8 +1,34 @@
-import { Box, Typography } from '@mui/material';
+import { Box, Grid, Stack, Typography } from '@mui/material';
 import { useLoaderData } from 'react-router-dom';
 import { ConnectionRequired } from '../../app/ConnectionRequired';
+import { ConsolePanel, PageHeader, StatusPill } from '../../app/Console';
 import type { CredentialsLoaderData } from '../../app/routeData';
 
+const roleCards = [
+    {
+        role: 'Issuer',
+        state: 'Prepare',
+        tone: 'info' as const,
+        summary:
+            'Create registry, issue SEDI voter credential, grant to holder.',
+        steps: ['Registry', 'Credential draft', 'IPEX grant'],
+    },
+    {
+        role: 'Holder',
+        state: 'Receive',
+        tone: 'warning' as const,
+        summary: 'Resolve issuer, admit credential grant, present to verifier.',
+        steps: ['Issuer OOBI', 'Grant admit', 'Presentation'],
+    },
+    {
+        role: 'Verifier',
+        state: 'Validate',
+        tone: 'success' as const,
+        summary: 'Trust issuer/schema, validate presentation, emit result.',
+        steps: ['Trusted issuer', 'TEL state', 'Webhook event'],
+    },
+];
+
 /**
  * Placeholder credentials route.
  *
@@ -18,13 +44,79 @@ export const CredentialsView = () => {
     }
 
     return (
-        <Box sx={{ display: 'grid', gap: 1 }}>
-            <Typography variant="h5" component="h1">
-                Credentials
-            </Typography>
-            <Typography color="text.secondary">
-                Credential workflow placeholder
-            </Typography>
+        <Box sx={{ display: 'grid', gap: 2.5 }}>
+            <PageHeader
+                eyebrow="Credential mission"
+                title="Issuer / Holder / Verifier"
+                summary="The credential flow is staged by role so the demo keeps issuance, possession, presentation, and verification responsibilities explicit."
+            />
+            <Grid container spacing={2}>
+                {roleCards.map((card) => (
+                    <Grid size={{ xs: 12, md: 4 }} key={card.role}>
+                        <ConsolePanel
+                            title={card.role}
+                            eyebrow="Role"
+                            actions={
+                                <StatusPill
+                                    label={card.state}
+                                    tone={card.tone}
+                                />
+                            }
+                            sx={{ height: '100%' }}
+                        >
+                            <Stack spacing={1.5}>
+                                <Typography color="text.secondary">
+                                    {card.summary}
+                                </Typography>
+                                <Stack spacing={1}>
+                                    {card.steps.map((step, index) => (
+                                        <Box
+                                            key={step}
+                                            sx={{
+                                                display: 'flex',
+                                                alignItems: 'center',
+                                                gap: 1,
+                                                border: 1,
+                                                borderColor: 'divider',
+                                                borderRadius: 1,
+                                                px: 1.25,
+                                                py: 1,
+                                                bgcolor:
+                                                    index === 0
+                                                        ? 'action.selected'
+                                                        : 'rgba(5, 9, 13, 0.4)',
+                                            }}
+                                        >
+                                            <Typography
+                                                variant="caption"
+                                                color="primary.main"
+                                                sx={{
+                                                    minWidth: 22,
+                                                    fontWeight: 700,
+                                                }}
+                                            >
+                                                {index + 1}
+                                            </Typography>
+                                            <Typography>{step}</Typography>
+                                        </Box>
+                                    ))}
+                                </Stack>
+                            </Stack>
+                        </ConsolePanel>
+                    </Grid>
+                ))}
+            </Grid>
+            <ConsolePanel
+                title="Next credential build target"
+                eyebrow="Workflow"
+            >
+                <Typography color="text.secondary">
+                    Replace this mission board with live schema resolution,
+                    registry creation, issuer grant, holder admit, holder
+                    presentation, and verifier result panels as those operations
+                    land behind the runtime workflow boundary.
+                </Typography>
+            </ConsolePanel>
         </Box>
     );
 };
diff --git a/src/features/identifiers/IdentifierTable.tsx b/src/features/identifiers/IdentifierTable.tsx
index 8b51c68e..776fc5d2 100644
--- a/src/features/identifiers/IdentifierTable.tsx
+++ b/src/features/identifiers/IdentifierTable.tsx
@@ -122,6 +122,13 @@ export const IdentifierTable = ({
                         key={identifier.name}
                         variant="outlined"
                         data-testid={`identifier-row-${identifier.name}`}
+                        sx={{
+                            bgcolor: 'background.paper',
+                            borderColor: 'divider',
+                            '&:hover': {
+                                borderColor: 'primary.main',
+                            },
+                        }}
                     >
                         <CardContent>
                             <Stack
@@ -164,7 +171,9 @@ export const IdentifierTable = ({
                                     >
                                         PIDX:{' '}
                                         {formatIdentifierMetadata(
-                                            identifierIdentifierIndex(identifier)
+                                            identifierIdentifierIndex(
+                                                identifier
+                                            )
                                         )}
                                     </Typography>
                                 </Stack>
@@ -190,11 +199,20 @@ export const IdentifierTable = ({
             </Stack>
             <TableContainer
                 component={Paper}
-                sx={{ display: { xs: 'none', sm: 'block' } }}
+                sx={{
+                    display: { xs: 'none', sm: 'block' },
+                    bgcolor: 'background.paper',
+                    borderColor: 'divider',
+                    overflowX: 'auto',
+                }}
             >
                 <Table sx={{ minWidth: 800 }} aria-label="identifier table">
                     <TableHead>
-                        <TableRow>
+                        <TableRow
+                            sx={{
+                                bgcolor: 'rgba(39, 215, 255, 0.06)',
+                            }}
+                        >
                             <TableCell>Name</TableCell>
                             <TableCell>AID</TableCell>
                             <TableCell>Type</TableCell>
@@ -209,6 +227,9 @@ export const IdentifierTable = ({
                                 key={identifier.name}
                                 sx={{
                                     cursor: 'pointer',
+                                    '&:hover': {
+                                        bgcolor: 'action.hover',
+                                    },
                                     '&:last-child td, &:last-child th': {
                                         border: 0,
                                     },
diff --git a/src/features/identifiers/IdentifiersView.tsx b/src/features/identifiers/IdentifiersView.tsx
index 20b75048..c3d9d9c8 100644
--- a/src/features/identifiers/IdentifiersView.tsx
+++ b/src/features/identifiers/IdentifiersView.tsx
@@ -1,8 +1,9 @@
 import { useState } from 'react';
-import { Box, Fab, Typography } from '@mui/material';
+import { Box, Button, Fab, Typography } from '@mui/material';
 import AddIcon from '@mui/icons-material/Add';
 import { useFetcher, useLoaderData } from 'react-router-dom';
 import { ConnectionRequired } from '../../app/ConnectionRequired';
+import { EmptyState, PageHeader, StatusPill } from '../../app/Console';
 import type {
     IdentifierActionData,
     IdentifiersLoaderData,
@@ -113,7 +114,9 @@ export const IdentifiersView = () => {
         fetcher.submit(formData, { method: 'post' });
     };
 
-    const handleCreate = async (draft: IdentifierCreateDraft): Promise<void> => {
+    const handleCreate = async (
+        draft: IdentifierCreateDraft
+    ): Promise<void> => {
         const requestId = globalThis.crypto.randomUUID();
         setActiveCreateRequestId(requestId);
         setPendingMessage(`Creating identifier ${draft.name}`);
@@ -126,12 +129,61 @@ export const IdentifiersView = () => {
 
     const isRotateDisabled = (identifierName: string): boolean =>
         activeResourceKeys.has(`identifier:aid:${identifierName}`);
+    const openCreate = () => {
+        setActiveCreateRequestId(null);
+        setCreateOpen(true);
+    };
 
     return (
-        <Box sx={{ display: 'grid', gap: 2 }}>
+        <Box sx={{ display: 'grid', gap: 2.5 }}>
+            <PageHeader
+                eyebrow="Identity console"
+                title="Identifiers"
+                summary="Create, inspect, copy, and rotate local AIDs connected to this Signify client."
+                actions={
+                    <Button
+                        variant="contained"
+                        startIcon={<AddIcon />}
+                        aria-label="create identifier"
+                        onClick={openCreate}
+                        disabled={actionRunning}
+                        sx={{ display: { xs: 'none', sm: 'inline-flex' } }}
+                    >
+                        Create Identifier
+                    </Button>
+                }
+            />
             {actionState.message && (
-                <Box>
+                <Box
+                    sx={{
+                        border: 1,
+                        borderColor:
+                            actionState.status === 'error'
+                                ? 'error.main'
+                                : 'divider',
+                        borderRadius: 1,
+                        bgcolor:
+                            actionState.status === 'error'
+                                ? 'rgba(255, 61, 79, 0.08)'
+                                : 'rgba(39, 215, 255, 0.06)',
+                        px: 2,
+                        py: 1.25,
+                    }}
+                >
+                    <StatusPill
+                        label={actionState.status}
+                        tone={
+                            actionState.status === 'error'
+                                ? 'error'
+                                : actionState.status === 'success'
+                                  ? 'success'
+                                  : actionState.status === 'running'
+                                    ? 'warning'
+                                    : 'neutral'
+                        }
+                    />{' '}
                     <Typography
+                        component="span"
                         color={
                             actionState.status === 'error'
                                 ? 'error'
@@ -143,6 +195,24 @@ export const IdentifiersView = () => {
                     </Typography>
                 </Box>
             )}
+            {identifiers.length === 0 && (
+                <EmptyState
+                    title="No identifiers in local inventory"
+                    message="Create the first AID before running credential flows or client diagnostics."
+                    action={
+                        <Button
+                            variant="outlined"
+                            startIcon={<AddIcon />}
+                            aria-label="add"
+                            onClick={openCreate}
+                            disabled={actionRunning}
+                            sx={{ display: { xs: 'inline-flex', sm: 'none' } }}
+                        >
+                            Create Identifier
+                        </Button>
+                    }
+                />
+            )}
             <IdentifierTable
                 identifiers={identifiers}
                 onSelect={(identifier) =>
@@ -154,7 +224,10 @@ export const IdentifiersView = () => {
                 }
             />
             <IdentifierDetailsModal
-                open={selectedIdentifierName !== null && selectedIdentifier !== null}
+                open={
+                    selectedIdentifierName !== null &&
+                    selectedIdentifier !== null
+                }
                 identifier={selectedIdentifier}
                 actionRunning={
                     selectedIdentifierName === null
@@ -179,11 +252,17 @@ export const IdentifiersView = () => {
                 color="primary"
                 aria-label="add"
                 onClick={() => {
-                    setActiveCreateRequestId(null);
-                    setCreateOpen(true);
+                    openCreate();
                 }}
                 disabled={actionRunning}
                 sx={{
+                    display: {
+                        xs:
+                            createDialogOpen || identifiers.length === 0
+                                ? 'none'
+                                : 'inline-flex',
+                        sm: 'none',
+                    },
                     position: 'fixed',
                     right: { xs: '16px', sm: '24px' },
                     bottom: {
diff --git a/src/features/notifications/AppNotificationsView.tsx b/src/features/notifications/AppNotificationsView.tsx
index be6969ca..cd91e79d 100644
--- a/src/features/notifications/AppNotificationsView.tsx
+++ b/src/features/notifications/AppNotificationsView.tsx
@@ -1,7 +1,6 @@
 import { useEffect } from 'react';
 import {
     Box,
-    Chip,
     Link,
     List,
     ListItem,
@@ -10,6 +9,7 @@ import {
     Typography,
 } from '@mui/material';
 import { Link as RouterLink } from 'react-router-dom';
+import { EmptyState, PageHeader, StatusPill } from '../../app/Console';
 import { useAppDispatch, useAppSelector } from '../../state/hooks';
 import { allAppNotificationsRead } from '../../state/appNotifications.slice';
 import { selectAppNotifications } from '../../state/selectors';
@@ -38,14 +38,17 @@ export const AppNotificationsView = () => {
     }, [dispatch, unreadCount]);
 
     return (
-        <Box sx={{ display: 'grid', gap: 2 }}>
-            <Typography variant="h5" component="h1">
-                Notifications
-            </Typography>
+        <Box sx={{ display: 'grid', gap: 2.5 }}>
+            <PageHeader
+                eyebrow="Activity"
+                title="Notifications"
+                summary="User-facing results emitted by completed background workflows."
+            />
             {notifications.length === 0 ? (
-                <Typography color="text.secondary">
-                    No app notifications yet.
-                </Typography>
+                <EmptyState
+                    title="No notifications"
+                    message="Completed credential, identifier, and contact operations will report outcomes here."
+                />
             ) : (
                 <List disablePadding>
                     {notifications.map((notification) => (
@@ -59,7 +62,7 @@ export const AppNotificationsView = () => {
                                 alignItems: 'flex-start',
                                 bgcolor:
                                     notification.status === 'unread'
-                                        ? 'common.white'
+                                        ? 'action.selected'
                                         : 'action.hover',
                                 opacity:
                                     notification.status === 'unread' ? 1 : 0.72,
@@ -78,16 +81,16 @@ export const AppNotificationsView = () => {
                                         <Typography component="span">
                                             {notification.title}
                                         </Typography>
-                                        <Chip
-                                            size="small"
+                                        <StatusPill
                                             label={notification.severity}
-                                            color={
-                                                notification.severity === 'error'
+                                            tone={
+                                                notification.severity ===
+                                                'error'
                                                     ? 'error'
                                                     : notification.severity ===
                                                         'success'
                                                       ? 'success'
-                                                      : 'default'
+                                                      : 'neutral'
                                             }
                                         />
                                     </Stack>
diff --git a/src/features/operations/OperationDetailView.tsx b/src/features/operations/OperationDetailView.tsx
index 2de7c2f7..80c23f83 100644
--- a/src/features/operations/OperationDetailView.tsx
+++ b/src/features/operations/OperationDetailView.tsx
@@ -1,26 +1,37 @@
-import {
-    Box,
-    Button,
-    Chip,
-    Divider,
-    Link,
-    Stack,
-    Typography,
-} from '@mui/material';
+import { Box, Button, Link, Stack } from '@mui/material';
 import { Link as RouterLink, useParams } from 'react-router-dom';
+import {
+    ConsolePanel,
+    PageHeader,
+    StatusPill,
+    TelemetryRow,
+} from '../../app/Console';
 import { useAppSelector } from '../../state/hooks';
 import { selectOperationById } from '../../state/selectors';
 
-const DetailRow = ({ label, value }: { label: string; value: string | null }) => (
-    <Box>
-        <Typography variant="caption" color="text.secondary">
-            {label}
-        </Typography>
-        <Typography sx={{ overflowWrap: 'anywhere' }}>
-            {value ?? 'None'}
-        </Typography>
-    </Box>
-);
+const DetailRow = ({
+    label,
+    value,
+}: {
+    label: string;
+    value: string | null;
+}) => <TelemetryRow label={label} value={value ?? 'None'} mono />;
+
+const operationTone = (status: string) => {
+    if (status === 'error') {
+        return 'error' as const;
+    }
+
+    if (status === 'success') {
+        return 'success' as const;
+    }
+
+    if (status === 'running') {
+        return 'warning' as const;
+    }
+
+    return 'neutral' as const;
+};
 
 export const OperationDetailView = () => {
     const { requestId = '' } = useParams();
@@ -29,10 +40,16 @@ export const OperationDetailView = () => {
     if (operation === null) {
         return (
             <Box sx={{ display: 'grid', gap: 2 }}>
-                <Typography variant="h5" component="h1">
-                    Operation Not Found
-                </Typography>
-                <Button component={RouterLink} to="/operations" variant="outlined">
+                <PageHeader
+                    eyebrow="Activity"
+                    title="Operation Not Found"
+                    summary="The requested operation record is not available in this browser session."
+                />
+                <Button
+                    component={RouterLink}
+                    to="/operations"
+                    variant="outlined"
+                >
                     Back to Operations
                 </Button>
             </Box>
@@ -40,32 +57,33 @@ export const OperationDetailView = () => {
     }
 
     return (
-        <Box sx={{ display: 'grid', gap: 2, maxWidth: 900 }}>
-            <Stack
-                direction={{ xs: 'column', sm: 'row' }}
-                spacing={1}
-                sx={{ alignItems: { xs: 'flex-start', sm: 'center' } }}
-            >
-                <Typography variant="h5" component="h1">
-                    {operation.title}
-                </Typography>
-                <Chip label={operation.status} />
-            </Stack>
-            {operation.description && (
-                <Typography color="text.secondary">
-                    {operation.description}
-                </Typography>
-            )}
-            <Divider />
-            <Stack spacing={1.5}>
+        <Box sx={{ display: 'grid', gap: 2.5, maxWidth: 980 }}>
+            <PageHeader
+                eyebrow="Operation detail"
+                title={operation.title}
+                summary={operation.description ?? undefined}
+                actions={
+                    <StatusPill
+                        label={operation.status}
+                        tone={operationTone(operation.status)}
+                    />
+                }
+            />
+            <ConsolePanel title="Telemetry" eyebrow={operation.kind}>
                 <DetailRow label="Request ID" value={operation.requestId} />
                 <DetailRow label="Kind" value={operation.kind} />
                 <DetailRow label="Phase" value={operation.phase} />
                 <DetailRow label="Started" value={operation.startedAt} />
                 <DetailRow label="Finished" value={operation.finishedAt} />
-                <DetailRow label="KERIA operation" value={operation.keriaOperationName} />
+                <DetailRow
+                    label="KERIA operation"
+                    value={operation.keriaOperationName}
+                />
                 <DetailRow label="Error" value={operation.error} />
-                <DetailRow label="Canceled reason" value={operation.canceledReason} />
+                <DetailRow
+                    label="Canceled reason"
+                    value={operation.canceledReason}
+                />
                 <DetailRow
                     label="Resource keys"
                     value={
@@ -74,9 +92,13 @@ export const OperationDetailView = () => {
                             : null
                     }
                 />
-            </Stack>
+            </ConsolePanel>
             <Stack direction="row" spacing={1} sx={{ flexWrap: 'wrap' }}>
-                <Button component={RouterLink} to="/operations" variant="outlined">
+                <Button
+                    component={RouterLink}
+                    to="/operations"
+                    variant="outlined"
+                >
                     All Operations
                 </Button>
                 {operation.resultRoute && (
diff --git a/src/features/operations/OperationsView.tsx b/src/features/operations/OperationsView.tsx
index d972a646..5410d02b 100644
--- a/src/features/operations/OperationsView.tsx
+++ b/src/features/operations/OperationsView.tsx
@@ -1,6 +1,5 @@
 import {
     Box,
-    Chip,
     List,
     ListItemButton,
     ListItemText,
@@ -8,21 +7,41 @@ import {
     Typography,
 } from '@mui/material';
 import { Link as RouterLink } from 'react-router-dom';
+import { EmptyState, PageHeader, StatusPill } from '../../app/Console';
 import { useAppSelector } from '../../state/hooks';
 import { selectOperationRecords } from '../../state/selectors';
 
+const operationTone = (status: string) => {
+    if (status === 'error') {
+        return 'error' as const;
+    }
+
+    if (status === 'success') {
+        return 'success' as const;
+    }
+
+    if (status === 'running') {
+        return 'warning' as const;
+    }
+
+    return 'neutral' as const;
+};
+
 export const OperationsView = () => {
     const operations = [...useAppSelector(selectOperationRecords)].reverse();
 
     return (
-        <Box sx={{ display: 'grid', gap: 2 }}>
-            <Typography variant="h5" component="h1">
-                Operations
-            </Typography>
+        <Box sx={{ display: 'grid', gap: 2.5 }}>
+            <PageHeader
+                eyebrow="Activity"
+                title="Operations"
+                summary="Foreground and background KERIA work launched from this browser session."
+            />
             {operations.length === 0 ? (
-                <Typography color="text.secondary">
-                    No operations have run in this browser session.
-                </Typography>
+                <EmptyState
+                    title="No operation records"
+                    message="Identifier, credential, schema, and contact workflows will appear here once launched."
+                />
             ) : (
                 <List disablePadding>
                     {operations.map((operation) => (
@@ -36,6 +55,11 @@ export const OperationsView = () => {
                                 borderRadius: 1,
                                 mb: 1,
                                 alignItems: 'flex-start',
+                                bgcolor: 'background.paper',
+                                '&:hover': {
+                                    borderColor: 'primary.main',
+                                    bgcolor: 'action.hover',
+                                },
                             }}
                         >
                             <ListItemText
@@ -51,17 +75,11 @@ export const OperationsView = () => {
                                         <Typography component="span">
                                             {operation.title}
                                         </Typography>
-                                        <Chip
-                                            size="small"
+                                        <StatusPill
                                             label={operation.status}
-                                            color={
-                                                operation.status === 'error'
-                                                    ? 'error'
-                                                    : operation.status ===
-                                                        'success'
-                                                      ? 'success'
-                                                      : 'default'
-                                            }
+                                            tone={operationTone(
+                                                operation.status
+                                            )}
                                         />
                                     </Stack>
                                 }
diff --git a/src/index.css b/src/index.css
index 9bda864a..f41ae5ba 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,9 +1,12 @@
-@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;500;600&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&family=Source+Code+Pro:wght@400;500;600&display=swap');
 
 :root {
-    font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-    --app-mono-font: 'Source Code Pro', 'Roboto Mono', 'SFMono-Regular',
-        Consolas, 'Liberation Mono', monospace;
+    font-family:
+        Rajdhani, Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+    --app-interface-font: 'Rajdhani';
+    --app-mono-font:
+        'Source Code Pro', 'Roboto Mono', 'SFMono-Regular', Consolas,
+        'Liberation Mono', monospace;
     line-height: 1.5;
     font-weight: 400;