diff --git a/web/src/app/lists/CompListItems.tsx b/web/src/app/lists/CompListItems.tsx
index fb3ea30e46..3451d16c3a 100644
--- a/web/src/app/lists/CompListItems.tsx
+++ b/web/src/app/lists/CompListItems.tsx
@@ -12,8 +12,12 @@ import AppLink from '../util/AppLink'
 import { ExpandLess, ExpandMore } from '@mui/icons-material'
 
 export type CompListItemTextProps = {
-  title: React.ReactNode
+  title?: React.ReactNode
   icon?: React.ReactNode
+  /* Set to true to always create space for the icon, even if it is not set */
+  alwaysShowIcon?: boolean
+  highlight?: boolean
+
   subText?: React.ReactNode
   action?: React.ReactNode
   disableTypography?: boolean
@@ -24,8 +28,10 @@ export function CompListItemText(
   props: CompListItemTextProps,
 ): React.ReactNode {
   return (
-    <ListItem>
-      {props.icon && <ListItemIcon tabIndex={-1}>{props.icon}</ListItemIcon>}
+    <ListItem className={props.highlight ? 'Mui-selected' : ''}>
+      {(props.icon || props.alwaysShowIcon) && (
+        <ListItemIcon tabIndex={-1}>{props.icon}</ListItemIcon>
+      )}
       <ListItemText
         disableTypography={props.disableTypography}
         primary={props.title}
@@ -40,13 +46,14 @@ export function CompListItemText(
 
 export type CompListItemNavProps = CompListItemTextProps & {
   url: string
+  newTab?: boolean
 }
 
 /* A list item that links to a URL. */
 export function CompListItemNav(props: CompListItemNavProps): React.ReactNode {
   return (
     <li>
-      <ListItemButton component={AppLink} to={props.url}>
+      <ListItemButton component={AppLink} to={props.url} newTab={props.newTab}>
         {props.icon && <ListItemIcon tabIndex={-1}>{props.icon}</ListItemIcon>}
         <ListItemText primary={props.title} secondary={props.subText} />
         {props.action && (
diff --git a/web/src/app/schedules/ScheduleAssignedToList.tsx b/web/src/app/schedules/ScheduleAssignedToList.tsx
index d2699c27c8..bf925d0365 100644
--- a/web/src/app/schedules/ScheduleAssignedToList.tsx
+++ b/web/src/app/schedules/ScheduleAssignedToList.tsx
@@ -1,9 +1,10 @@
 import React from 'react'
 import { useQuery, gql } from 'urql'
-import FlatList from '../lists/FlatList'
 import Card from '@mui/material/Card'
 import Spinner from '../loading/components/Spinner'
 import { GenericError } from '../error-pages'
+import CompList from '../lists/CompList'
+import { CompListItemNav } from '../lists/CompListItems'
 
 const query = gql`
   query ($id: ID!) {
@@ -36,15 +37,15 @@ export default function ScheduleAssignedToList(props: {
 
   return (
     <Card sx={{ width: '100%' }}>
-      <FlatList
-        items={data.schedule.assignedTo.map(
-          (t: { name: string; id: string }) => ({
-            title: t.name,
-            url: `/escalation-policies/${t.id}`,
-          }),
-        )}
-        emptyMessage='This schedule is not assigned to any escalation policies.'
-      />
+      <CompList emptyMessage='This schedule is not assigned to any escalation policies.'>
+        {data.schedule.assignedTo.map((t: { name: string; id: string }) => (
+          <CompListItemNav
+            key={t.id}
+            title={t.name}
+            url={`/escalation-policies/${t.id}`}
+          />
+        ))}
+      </CompList>
     </Card>
   )
 }
diff --git a/web/src/app/schedules/ScheduleList.tsx b/web/src/app/schedules/ScheduleList.tsx
index ec22f71283..d2046935cf 100644
--- a/web/src/app/schedules/ScheduleList.tsx
+++ b/web/src/app/schedules/ScheduleList.tsx
@@ -5,8 +5,9 @@ import { useURLParam } from '../actions'
 import { ScheduleConnection } from '../../schema'
 import ListPageControls from '../lists/ListPageControls'
 import Search from '../util/Search'
-import FlatList from '../lists/FlatList'
 import { FavoriteIcon } from '../util/SetFavoriteButton'
+import CompList from '../lists/CompList'
+import { CompListItemNav } from '../lists/CompListItems'
 
 const query = gql`
   query schedulesQuery($input: ScheduleSearchOptions) {
@@ -67,17 +68,17 @@ export default function ScheduleList(): JSX.Element {
         slots={{
           search: <Search />,
           list: (
-            <FlatList
-              emptyMessage='No results'
-              items={
-                q.data?.schedules.nodes.map((u) => ({
-                  title: u.name,
-                  subText: u.description,
-                  url: u.id,
-                  secondaryAction: u.isFavorite ? <FavoriteIcon /> : undefined,
-                })) || []
-              }
-            />
+            <CompList emptyMessage='No results'>
+              {q.data?.schedules.nodes.map((u) => (
+                <CompListItemNav
+                  key={u.id}
+                  title={u.name}
+                  subText={u.description}
+                  url={u.id}
+                  action={u.isFavorite ? <FavoriteIcon /> : undefined}
+                />
+              ))}
+            </CompList>
           ),
         }}
       />
diff --git a/web/src/app/schedules/ScheduleOverrideList.jsx b/web/src/app/schedules/ScheduleOverrideList.jsx
index 0c16bbd171..2446889654 100644
--- a/web/src/app/schedules/ScheduleOverrideList.jsx
+++ b/web/src/app/schedules/ScheduleOverrideList.jsx
@@ -19,7 +19,8 @@ import { defaultTempSchedValue } from './temp-sched/sharedUtils'
 import ScheduleOverrideDialog from './ScheduleOverrideDialog'
 import CreateFAB from '../lists/CreateFAB'
 import ListPageControls from '../lists/ListPageControls'
-import FlatList from '../lists/FlatList'
+import CompList from '../lists/CompList'
+import { CompListItemText } from '../lists/CompListItems'
 
 const query = gql`
   query scheduleOverrides($input: UserOverrideSearchOptions) {
@@ -143,35 +144,10 @@ export default function ScheduleOverrideList({ scheduleID }) {
         loading={q.fetching}
         slots={{
           list: (
-            <FlatList
+            <CompList
               emptyMessage='No results'
-              headerNote={note}
-              items={
-                q.data?.userOverrides.nodes.map((n) => ({
-                  title: n.addUser ? n.addUser.name : n.removeUser.name,
-                  subText: subText(n),
-                  icon: (
-                    <UserAvatar
-                      userID={n.addUser ? n.addUser.id : n.removeUser.id}
-                    />
-                  ),
-                  secondaryAction: (
-                    <OtherActions
-                      actions={[
-                        {
-                          label: 'Edit',
-                          onClick: () => setEditID(n.id),
-                        },
-                        {
-                          label: 'Delete',
-                          onClick: () => setDeleteID(n.id),
-                        },
-                      ]}
-                    />
-                  ),
-                })) || []
-              }
-              headerAction={
+              note={note}
+              action={
                 <React.Fragment>
                   <FilterContainer onReset={() => resetFilter()}>
                     <Grid item xs={12}>
@@ -212,7 +188,34 @@ export default function ScheduleOverrideList({ scheduleID }) {
                   )}
                 </React.Fragment>
               }
-            />
+            >
+              {q.data?.userOverrides.nodes.map((n) => (
+                <CompListItemText
+                  key={n.id}
+                  title={n.addUser ? n.addUser.name : n.removeUser.name}
+                  subText={subText(n)}
+                  icon={
+                    <UserAvatar
+                      userID={n.addUser ? n.addUser.id : n.removeUser.id}
+                    />
+                  }
+                  action={
+                    <OtherActions
+                      actions={[
+                        {
+                          label: 'Edit',
+                          onClick: () => setEditID(n.id),
+                        },
+                        {
+                          label: 'Delete',
+                          onClick: () => setDeleteID(n.id),
+                        },
+                      ]}
+                    />
+                  }
+                />
+              ))}
+            </CompList>
           ),
         }}
       />
diff --git a/web/src/app/schedules/ScheduleRuleList.tsx b/web/src/app/schedules/ScheduleRuleList.tsx
index b38b856563..0dec9fbddf 100644
--- a/web/src/app/schedules/ScheduleRuleList.tsx
+++ b/web/src/app/schedules/ScheduleRuleList.tsx
@@ -1,6 +1,5 @@
 import React, { Suspense, useState } from 'react'
 import { useQuery, gql } from 'urql'
-import FlatList, { FlatListListItem } from '../lists/FlatList'
 import { Button, ButtonGroup, Card } from '@mui/material'
 import { GroupAdd, PersonAdd } from '@mui/icons-material'
 import Tooltip from '@mui/material/Tooltip'
@@ -18,6 +17,8 @@ import { DateTime } from 'luxon'
 import { useScheduleTZ } from './useScheduleTZ'
 import { useIsWidthDown } from '../util/useWidth'
 import { ScheduleRule, ScheduleTarget, TargetType } from '../../schema'
+import CompList from '../lists/CompList'
+import { CompListItemNav, CompListItemText } from '../lists/CompListItems'
 
 const query = gql`
   query scheduleRules($id: ID!) {
@@ -99,64 +100,75 @@ export default function ScheduleRuleList(
     targets: ScheduleTarget[],
     timeZone: string,
   ): JSX.Element {
-    const items: FlatListListItem[] = []
+    const items: React.ReactNode[] = []
 
     let lastType: TargetType
     sortBy(targets, ['target.type', 'target.name']).forEach((tgt) => {
       const { name, id, type } = tgt.target
       if (type !== lastType) {
-        items.push({ subHeader: startCase(type + 's') })
+        items.push(
+          <CompListItemText key={type} subText={startCase(type + 's')} />,
+        )
         lastType = type
       }
 
-      items.push({
-        title: name,
-        url: (type === 'rotation' ? '/rotations/' : '/users/') + id,
-        subText: renderSubText(tgt.rules, timeZone),
-        icon:
-          type === 'rotation' ? <RotationAvatar /> : <UserAvatar userID={id} />,
-        secondaryAction: (
-          <OtherActions
-            actions={[
-              {
-                label: 'Edit',
-                onClick: () => setEditTarget({ type, id }),
-              },
-              {
-                label: 'Delete',
-                onClick: () => setDeleteTarget({ type, id }),
-              },
-            ]}
-          />
-        ),
-      })
+      items.push(
+        <CompListItemNav
+          key={id}
+          title={name}
+          newTab
+          url={(type === 'rotation' ? '/rotations/' : '/users/') + id}
+          subText={renderSubText(tgt.rules, timeZone)}
+          icon={
+            type === 'rotation' ? (
+              <RotationAvatar />
+            ) : (
+              <UserAvatar userID={id} />
+            )
+          }
+          action={
+            <OtherActions
+              actions={[
+                {
+                  label: 'Edit',
+                  onClick: () => setEditTarget({ type, id }),
+                },
+                {
+                  label: 'Delete',
+                  onClick: () => setDeleteTarget({ type, id }),
+                },
+              ]}
+            />
+          }
+        />,
+      )
     })
 
     return (
       <React.Fragment>
         <Card style={{ width: '100%', marginBottom: 64 }}>
-          <FlatList
-            headerNote={`Showing times in ${data.schedule.timeZone}.`}
-            items={items}
-            headerAction={
-              !isMobile ? (
-                <ButtonGroup variant='contained'>
-                  <Button
-                    startIcon={<GroupAdd />}
-                    onClick={() => setCreateType('rotation')}
-                  >
-                    Add Rotation
-                  </Button>
-                  <Button
-                    startIcon={<PersonAdd />}
-                    onClick={() => setCreateType('user')}
-                  >
-                    Add User
-                  </Button>
-                </ButtonGroup>
-              ) : undefined
+          <CompList
+            note={`Showing times in ${data.schedule.timeZone}.`}
+            hideActionOnMobile
+            action={
+              <ButtonGroup variant='contained'>
+                <Button
+                  startIcon={<GroupAdd />}
+                  onClick={() => setCreateType('rotation')}
+                >
+                  Add Rotation
+                </Button>
+                <Button
+                  startIcon={<PersonAdd />}
+                  onClick={() => setCreateType('user')}
+                >
+                  Add User
+                </Button>
+              </ButtonGroup>
             }
-          />
+          >
+            {items}
+          </CompList>
         </Card>
 
         {isMobile && (
diff --git a/web/src/app/schedules/ScheduleShiftList.tsx b/web/src/app/schedules/ScheduleShiftList.tsx
index 4ea2f6f7d3..8396b8f759 100644
--- a/web/src/app/schedules/ScheduleShiftList.tsx
+++ b/web/src/app/schedules/ScheduleShiftList.tsx
@@ -14,7 +14,6 @@ import makeStyles from '@mui/styles/makeStyles'
 import { DateTime, DateTimeFormatOptions, Duration, Interval } from 'luxon'
 import React, { Suspense, useCallback, useMemo, useState } from 'react'
 import CreateFAB from '../lists/CreateFAB'
-import FlatList, { FlatListListItem } from '../lists/FlatList'
 import { UserSelect } from '../selection'
 import { UserAvatar } from '../util/avatars'
 import FilterContainer from '../util/FilterContainer'
@@ -31,6 +30,8 @@ import {
   defaultTempSchedValue,
 } from './temp-sched/sharedUtils'
 import TempSchedDialog from './temp-sched/TempSchedDialog'
+import CompList from '../lists/CompList'
+import { CompListItemText } from '../lists/CompListItems'
 
 // query name is important, as it's used for refetching data after mutations
 const query = gql`
@@ -221,7 +222,7 @@ function ScheduleShiftList({
     )
   }
 
-  function items(): FlatListListItem[] {
+  function items(): React.ReactNode[] {
     const _shifts: Shift[] =
       data?.schedule?.shifts?.map((s: Shift) => ({
         ...s,
@@ -251,19 +252,25 @@ function ScheduleShiftList({
       DateTime.fromISO(end).startOf('day'),
     )
 
-    const result: FlatListListItem[] = []
+    const result: React.ReactNode[] = []
     displaySpan.splitBy({ days: 1 }).forEach((day) => {
       const dayShifts = shifts.filter((s) => day.overlaps(s.interval))
       if (!dayShifts.length) return
-      result.push({
-        subHeader: relativeDate(day.start),
-      })
+      result.push(
+        <CompListItemText
+          key={day.toISO()}
+          subText={relativeDate(day.start)}
+        />,
+      )
       dayShifts.forEach((s) => {
-        result.push({
-          title: s.user?.name || '',
-          subText: getShiftDetails(s, day),
-          icon: <UserAvatar userID={s.userID} />,
-        })
+        result.push(
+          <CompListItemText
+            key={s.userID + s.start.toISO()}
+            title={s.user?.name || ''}
+            subText={getShiftDetails(s, day)}
+            icon={<UserAvatar userID={s.userID} />}
+          />,
+        )
       })
     })
 
@@ -333,10 +340,9 @@ function ScheduleShiftList({
       }}
     >
       <Card style={{ width: '100%' }}>
-        <FlatList
-          headerNote={note}
-          items={items()}
-          headerAction={
+        <CompList
+          note={note}
+          action={
             <React.Fragment>
               <FilterContainer
                 onReset={() => {
@@ -396,7 +402,9 @@ function ScheduleShiftList({
               )}
             </React.Fragment>
           }
-        />
+        >
+          {items()}
+        </CompList>
       </Card>
       {isMobile && (
         <CreateFAB
diff --git a/web/src/app/schedules/on-call-notifications/ScheduleOnCallNotificationsList.tsx b/web/src/app/schedules/on-call-notifications/ScheduleOnCallNotificationsList.tsx
index 55f165b474..ceabd5f496 100644
--- a/web/src/app/schedules/on-call-notifications/ScheduleOnCallNotificationsList.tsx
+++ b/web/src/app/schedules/on-call-notifications/ScheduleOnCallNotificationsList.tsx
@@ -1,6 +1,5 @@
 import React, { Suspense, useState } from 'react'
 import { Button, Grid, Card, Typography, Tooltip, Theme } from '@mui/material'
-import FlatList from '../../lists/FlatList'
 import OtherActions from '../../util/OtherActions'
 import { onCallRuleSummary } from './util'
 import ScheduleOnCallNotificationsDeleteDialog from './ScheduleOnCallNotificationsDeleteDialog'
@@ -15,6 +14,8 @@ import { styles as globalStyles } from '../../styles/materialStyles'
 import makeStyles from '@mui/styles/makeStyles'
 import ScheduleOnCallNotificationsCreateDialog from './ScheduleOnCallNotificationsCreateDialog'
 import ScheduleOnCallNotificationsEditDialog from './ScheduleOnCallNotificationsEditDialog'
+import CompList from '../../lists/CompList'
+import { CompListItemText } from '../../lists/CompListItems'
 
 export type ScheduleOnCallNotificationsListProps = {
   scheduleID: string
@@ -70,8 +71,8 @@ export default function ScheduleOnCallNotificationsList({
       <Grid container spacing={2}>
         <Grid item xs={12}>
           <Card>
-            <FlatList
-              headerNote={
+            <CompList
+              note={
                 <Typography
                   component='p'
                   variant='subtitle1'
@@ -86,7 +87,6 @@ export default function ScheduleOnCallNotificationsList({
                   </span>
                 </Typography>
               }
-              items={[]}
             />
           </Card>
         </Grid>
@@ -102,28 +102,59 @@ export default function ScheduleOnCallNotificationsList({
       <Grid container spacing={2}>
         <Grid item xs={12}>
           <Card>
-            <FlatList
-              headerNote={`Showing times for schedule in ${timeZone}.`}
+            <CompList
+              note={`Showing times for schedule in ${timeZone}.`}
               emptyMessage='No notification rules.'
-              headerAction={
-                isMobile ? undefined : (
-                  <Button
-                    variant='contained'
-                    onClick={() => setCreateRule(true)}
-                    startIcon={<Add />}
-                  >
-                    Create Notification Rule
-                  </Button>
-                )
+              hideActionOnMobile
+              action={
+                <Button
+                  variant='contained'
+                  onClick={() => setCreateRule(true)}
+                  startIcon={<Add />}
+                >
+                  Create Notification Rule
+                </Button>
               }
-              items={q.data.schedule.onCallNotificationRules.map((rule) => {
+            >
+              {q.data.schedule.onCallNotificationRules.map((rule) => {
                 const display = rule.dest.displayInfo
                 if ('error' in display) {
-                  return {
-                    icon: <DestinationAvatar error />,
-                    title: `ERROR: ${display.error}`,
-                    subText: 'Notifies ' + onCallRuleSummary(timeZone, rule),
-                    secondaryAction: (
+                  return (
+                    <CompListItemText
+                      key={rule.id}
+                      icon={<DestinationAvatar error />}
+                      title={`ERROR: ${display.error}`}
+                      subText={`Notifies ${onCallRuleSummary(timeZone, rule)}`}
+                      action={
+                        <OtherActions
+                          actions={[
+                            {
+                              label: 'Edit',
+                              onClick: () => setEditRuleID(rule.id),
+                            },
+                            {
+                              label: 'Delete',
+                              onClick: () => setDeleteRuleID(rule.id),
+                            },
+                          ]}
+                        />
+                      }
+                    />
+                  )
+                }
+
+                return (
+                  <CompListItemText
+                    key={rule.id}
+                    icon={
+                      <DestinationAvatar
+                        iconURL={display.iconURL}
+                        iconAltText={display.iconAltText}
+                      />
+                    }
+                    title={display.text}
+                    subText={'Notifies ' + onCallRuleSummary(timeZone, rule)}
+                    action={
                       <OtherActions
                         actions={[
                           {
@@ -136,36 +167,11 @@ export default function ScheduleOnCallNotificationsList({
                           },
                         ]}
                       />
-                    ),
-                  }
-                }
-
-                return {
-                  icon: (
-                    <DestinationAvatar
-                      iconURL={display.iconURL}
-                      iconAltText={display.iconAltText}
-                    />
-                  ),
-                  title: display.text,
-                  subText: 'Notifies ' + onCallRuleSummary(timeZone, rule),
-                  secondaryAction: (
-                    <OtherActions
-                      actions={[
-                        {
-                          label: 'Edit',
-                          onClick: () => setEditRuleID(rule.id),
-                        },
-                        {
-                          label: 'Delete',
-                          onClick: () => setDeleteRuleID(rule.id),
-                        },
-                      ]}
-                    />
-                  ),
-                }
+                    }
+                  />
+                )
               })}
-            />
+            </CompList>
           </Card>
         </Grid>
       </Grid>
diff --git a/web/src/app/users/UserCalendarSubscriptionList.tsx b/web/src/app/users/UserCalendarSubscriptionList.tsx
index 1e1b2ad5c9..ca6ceaad1d 100644
--- a/web/src/app/users/UserCalendarSubscriptionList.tsx
+++ b/web/src/app/users/UserCalendarSubscriptionList.tsx
@@ -1,7 +1,6 @@
 import React, { Suspense, useState } from 'react'
 import { useQuery, gql } from 'urql'
 import { Card, Alert } from '@mui/material'
-import FlatList, { FlatListListItem } from '../lists/FlatList'
 import OtherActions from '../util/OtherActions'
 import CreateFAB from '../lists/CreateFAB'
 import CalendarSubscribeCreateDialog from '../schedules/calendar-subscribe/CalendarSubscribeCreateDialog'
@@ -11,9 +10,10 @@ import CalendarSubscribeEditDialog from '../schedules/calendar-subscribe/Calenda
 import { GenericError, ObjectNotFound } from '../error-pages'
 import _ from 'lodash'
 import { useConfigValue } from '../util/RequireConfig'
-import AppLink from '../util/AppLink'
 import { UserCalendarSubscription } from '../../schema'
 import { Time } from '../util/Time'
+import CompList from '../lists/CompList'
+import { CompListItemNav, CompListItemText } from '../lists/CompListItems'
 
 export const calendarSubscriptionsQuery = gql`
   query calendarSubscriptions($id: ID!) {
@@ -71,7 +71,7 @@ export default function UserCalendarSubscriptionList(props: {
     })
 
   const subheaderDict: { [key: string]: boolean } = {}
-  const items: FlatListListItem[] = []
+  const items: React.ReactNode[] = []
 
   function renderOtherActions(id: string): JSX.Element {
     return (
@@ -94,29 +94,32 @@ export default function UserCalendarSubscriptionList(props: {
   subs.forEach((sub: UserCalendarSubscription) => {
     if (!subheaderDict[sub?.schedule?.name ?? '']) {
       subheaderDict[sub?.schedule?.name ?? ''] = true
-      items.push({
-        subHeader: (
-          <AppLink to={`/schedules/${sub.scheduleID}`}>
-            {sub.schedule?.name}
-          </AppLink>
-        ),
-      })
+      items.push(
+        <CompListItemNav
+          subText={sub.schedule?.name}
+          url={`/schedules/${sub.scheduleID}`}
+        />,
+      )
     }
 
     // push subscriptions under relevant schedule subheaders
-    items.push({
-      title: sub.name,
-      subText: (
-        <Time
-          prefix='Last sync: '
-          time={sub.lastAccess}
-          format='relative'
-          zero='Never'
-        />
-      ),
-      secondaryAction: renderOtherActions(sub.id),
-      icon: sub.disabled ? <Warning message='Disabled' /> : null,
-    })
+    items.push(
+      <CompListItemText
+        title={sub.name}
+        subText={
+          <Time
+            prefix='Last sync: '
+            time={sub.lastAccess}
+            format='relative'
+            zero='Never'
+          />
+        }
+        action={renderOtherActions(sub.id)}
+        alwaysShowIcon
+        icon={sub.disabled ? <Warning message='Disabled' /> : null}
+        key={sub.id}
+      />,
+    )
   })
 
   return (
@@ -131,13 +134,13 @@ export default function UserCalendarSubscriptionList(props: {
         </Alert>
       )}
       <Card>
-        <FlatList
+        <CompList
           data-cy='calendar-subscriptions'
-          headerNote='Showing your current on-call subscriptions for all schedules'
+          note='Showing your current on-call subscriptions for all schedules'
           emptyMessage='You are not subscribed to any schedules.'
-          items={items}
-          inset
-        />
+        >
+          {items}
+        </CompList>
       </Card>
       {!creationDisabled && (
         <CreateFAB
diff --git a/web/src/app/users/UserContactMethodList.tsx b/web/src/app/users/UserContactMethodList.tsx
index 122eda8217..757986b046 100644
--- a/web/src/app/users/UserContactMethodList.tsx
+++ b/web/src/app/users/UserContactMethodList.tsx
@@ -1,6 +1,5 @@
 import React, { useState, ReactNode, Suspense } from 'react'
 import { gql, useQuery } from 'urql'
-import FlatList from '../lists/FlatList'
 import { Button, Card, CardHeader, Grid, IconButton } from '@mui/material'
 import makeStyles from '@mui/styles/makeStyles'
 import { Theme } from '@mui/material/styles'
@@ -18,6 +17,8 @@ import { UserContactMethod } from '../../schema'
 import { useSessionInfo, useContactMethodTypes } from '../util/RequireConfig'
 import UserContactMethodEditDialog from './UserContactMethodEditDialog'
 import UserContactMethodCreateDialog from './UserContactMethodCreateDialog'
+import CompList from '../lists/CompList'
+import { CompListItemText } from '../lists/CompListItems'
 
 const query = gql`
   query cmList($id: ID!) {
@@ -208,25 +209,25 @@ export default function UserContactMethodList(
             ) : null
           }
         />
-        <FlatList
-          data-cy='contact-methods'
-          items={sortContactMethods(contactMethods).map((cm) => {
+        <CompList data-cy='contact-methods' emptyMessage='No contact methods'>
+          {sortContactMethods(contactMethods).map((cm) => {
             const destType = destinationTypes.find(
               (d) => d.type === cm.dest.type,
             )
 
             const label = destType?.name || 'Unknown Type'
 
-            return {
-              id: cm.id,
-              title: `${cm.name} (${label})${cm.disabled ? ' - Disabled' : ''}`,
-              subText: getSubText(cm),
-              secondaryAction: getSecondaryAction(cm),
-              icon: getIcon(cm),
-            }
+            return (
+              <CompListItemText
+                key={cm.id}
+                title={`${cm.name} (${label})${cm.disabled ? ' - Disabled' : ''}`}
+                subText={getSubText(cm)}
+                action={getSecondaryAction(cm)}
+                icon={getIcon(cm)}
+              />
+            )
           })}
-          emptyMessage='No contact methods'
-        />
+        </CompList>
         <Suspense>
           {showAddDialog && (
             <UserContactMethodCreateDialog
diff --git a/web/src/app/users/UserList.tsx b/web/src/app/users/UserList.tsx
index e8863e06a6..050fcfaa80 100644
--- a/web/src/app/users/UserList.tsx
+++ b/web/src/app/users/UserList.tsx
@@ -6,10 +6,11 @@ import UserCreateDialog from './UserCreateDialog'
 import { useSessionInfo } from '../util/RequireConfig'
 import ListPageControls from '../lists/ListPageControls'
 import Search from '../util/Search'
-import FlatList from '../lists/FlatList'
 import { UserConnection } from '../../schema'
 import { useURLParam } from '../actions'
 import { FavoriteIcon } from '../util/SetFavoriteButton'
+import { CompListItemNav } from '../lists/CompListItems'
+import CompList from '../lists/CompList'
 
 const query = gql`
   query usersQuery($input: UserSearchOptions) {
@@ -77,18 +78,18 @@ function UserList(): JSX.Element {
         slots={{
           search: <Search endAdornment={<UserPhoneNumberFilterContainer />} />,
           list: (
-            <FlatList
-              emptyMessage='No results'
-              items={
-                q.data?.users.nodes.map((u) => ({
-                  title: u.name,
-                  subText: u.email,
-                  url: u.id,
-                  secondaryAction: u.isFavorite ? <FavoriteIcon /> : undefined,
-                  icon: <UserAvatar userID={u.id} />,
-                })) || []
-              }
-            />
+            <CompList emptyMessage='No results'>
+              {q.data?.users.nodes.map((u) => (
+                <CompListItemNav
+                  key={u.id}
+                  title={u.name}
+                  subText={u.email}
+                  url={u.id}
+                  action={u.isFavorite ? <FavoriteIcon /> : undefined}
+                  icon={<UserAvatar userID={u.id} />}
+                />
+              ))}
+            </CompList>
           ),
         }}
       />
diff --git a/web/src/app/users/UserNotificationRuleList.tsx b/web/src/app/users/UserNotificationRuleList.tsx
index 9c78206100..57e0d91c0c 100644
--- a/web/src/app/users/UserNotificationRuleList.tsx
+++ b/web/src/app/users/UserNotificationRuleList.tsx
@@ -10,7 +10,6 @@ import {
 } from '@mui/material'
 import makeStyles from '@mui/styles/makeStyles'
 import { Add, Delete } from '@mui/icons-material'
-import FlatList from '../lists/FlatList'
 import { formatNotificationRule, sortNotificationRules } from './util'
 import UserNotificationRuleDeleteDialog from './UserNotificationRuleDeleteDialog'
 import { styles as globalStyles } from '../styles/materialStyles'
@@ -18,6 +17,8 @@ import UserNotificationRuleCreateDialog from './UserNotificationRuleCreateDialog
 import { useIsWidthDown } from '../util/useWidth'
 import { ObjectNotFound, GenericError } from '../error-pages'
 import { User } from '../../schema'
+import CompList from '../lists/CompList'
+import { CompListItemText } from '../lists/CompListItems'
 
 const query = gql`
   query nrList($id: ID!) {
@@ -98,35 +99,39 @@ export default function UserNotificationRuleList(props: {
             ) : null
           }
         />
-        <FlatList
+        <CompList
           data-cy='notification-rules'
-          items={sortNotificationRules(user?.notificationRules ?? []).map(
-            (nr) => {
-              const formattedValue =
-                nr.contactMethod.dest.displayInfo.text || 'Unknown Label'
-              const name = nr.contactMethod.name || 'Unknown User'
-              const type =
-                nr.contactMethod.dest.displayInfo.iconAltText || 'Unknown Type'
-              return {
-                title: formatNotificationRule(nr.delayMinutes, {
+          emptyMessage='No notification rules'
+        >
+          {sortNotificationRules(user?.notificationRules ?? []).map((nr) => {
+            const formattedValue =
+              nr.contactMethod.dest.displayInfo.text || 'Unknown Label'
+            const name = nr.contactMethod.name || 'Unknown User'
+            const type =
+              nr.contactMethod.dest.displayInfo.iconAltText || 'Unknown Type'
+            return (
+              <CompListItemText
+                key={nr.id}
+                title={formatNotificationRule(nr.delayMinutes, {
                   type,
                   name,
                   formattedValue,
-                }),
-                secondaryAction: props.readOnly ? null : (
-                  <IconButton
-                    aria-label='Delete notification rule'
-                    onClick={() => setDeleteID(nr.id)}
-                    color='secondary'
-                  >
-                    <Delete />
-                  </IconButton>
-                ),
-              }
-            },
-          )}
-          emptyMessage='No notification rules'
-        />
+                })}
+                action={
+                  props.readOnly ? null : (
+                    <IconButton
+                      aria-label='Delete notification rule'
+                      onClick={() => setDeleteID(nr.id)}
+                      color='secondary'
+                    >
+                      <Delete />
+                    </IconButton>
+                  )
+                }
+              />
+            )
+          })}
+        </CompList>
       </Card>
       <Suspense>
         {showAddDialog && (
diff --git a/web/src/app/users/UserOnCallAssignmentList.tsx b/web/src/app/users/UserOnCallAssignmentList.tsx
index aa897ecf44..2704185925 100644
--- a/web/src/app/users/UserOnCallAssignmentList.tsx
+++ b/web/src/app/users/UserOnCallAssignmentList.tsx
@@ -1,10 +1,11 @@
 import React from 'react'
 import { gql, useQuery } from 'urql'
 import { Card } from '@mui/material'
-import FlatList from '../lists/FlatList'
 import { sortBy, values } from 'lodash'
 import { GenericError, ObjectNotFound } from '../error-pages'
 import { OnCallServiceAssignment, User } from '../../schema'
+import CompList from '../lists/CompList'
+import { CompListItemNav } from '../lists/CompListItems'
 
 const query = gql`
   query userInfo($id: ID!) {
@@ -76,8 +77,8 @@ export default function UserOnCallAssignmentList(props: {
 
   return (
     <Card>
-      <FlatList
-        headerNote={
+      <CompList
+        note={
           props.currentUser
             ? 'Showing your current on-call assignments.'
             : `Showing current on-call assignments for ${user.name}`
@@ -87,14 +88,18 @@ export default function UserOnCallAssignmentList(props: {
             ? 'You are not currently on-call.'
             : `${user.name} is not currently on-call.`
         }
-        items={services(user.onCallOverview.serviceAssignments).map((svc) => ({
-          title: svc.name,
-          url: '/services/' + svc.id,
-          subText: `${svc.policyName}: ${svc.policySteps
-            .map((n) => `Step ${n + 1}`)
-            .join(', ')}`,
-        }))}
-      />
+      >
+        {services(user.onCallOverview.serviceAssignments).map((svc) => (
+          <CompListItemNav
+            key={svc.id}
+            title={svc.name}
+            url={'/services/' + svc.id}
+            subText={`${svc.policyName}: ${svc.policySteps
+              .map((n) => `Step ${n + 1}`)
+              .join(', ')}`}
+          />
+        ))}
+      </CompList>
     </Card>
   )
 }
diff --git a/web/src/app/users/UserSessionList.tsx b/web/src/app/users/UserSessionList.tsx
index 45771bcaca..abf4b3c65a 100644
--- a/web/src/app/users/UserSessionList.tsx
+++ b/web/src/app/users/UserSessionList.tsx
@@ -1,5 +1,4 @@
 import React, { useState } from 'react'
-import FlatList from '../lists/FlatList'
 import { useMutation, useQuery, CombinedError, gql } from 'urql'
 import { Button, Card, Grid, IconButton } from '@mui/material'
 import DeleteIcon from '@mui/icons-material/Delete'
@@ -9,6 +8,8 @@ import _ from 'lodash'
 import FormDialog from '../dialogs/FormDialog'
 import { nonFieldErrors } from '../util/errutil'
 import { Time } from '../util/Time'
+import CompList from '../lists/CompList'
+import { CompListItemText } from '../lists/CompListItems'
 
 const profileQuery = gql`
   query {
@@ -123,34 +124,38 @@ export default function UserSessionList({
         )}
         <Grid item xs={12}>
           <Card>
-            <FlatList
-              emptyMessage='No active sessions'
-              items={sessions.map((s) => ({
-                title: friendlyUAString(s.userAgent),
-                highlight: s.current,
-                secondaryAction: s.current ? null : (
-                  <IconButton
-                    onClick={() =>
-                      setEndSession({
-                        id: s.id,
-                        userAgent: s.userAgent,
-                      })
-                    }
-                    size='large'
-                  >
-                    <DeleteIcon />
-                  </IconButton>
-                ),
-                subText: (
-                  <Time
-                    format='relative'
-                    time={s.lastAccessAt}
-                    prefix='Last access: '
-                    min={{ minutes: 2 }}
-                  />
-                ),
-              }))}
-            />
+            <CompList emptyMessage='No active sessions'>
+              {sessions.map((s) => (
+                <CompListItemText
+                  key={s.id}
+                  title={friendlyUAString(s.userAgent)}
+                  highlight={s.current}
+                  action={
+                    s.current ? null : (
+                      <IconButton
+                        onClick={() =>
+                          setEndSession({
+                            id: s.id,
+                            userAgent: s.userAgent,
+                          })
+                        }
+                        size='large'
+                      >
+                        <DeleteIcon />
+                      </IconButton>
+                    )
+                  }
+                  subText={
+                    <Time
+                      format='relative'
+                      time={s.lastAccessAt}
+                      prefix='Last access: '
+                      min={{ minutes: 2 }}
+                    />
+                  }
+                />
+              ))}
+            </CompList>
           </Card>
         </Grid>
       </Grid>