diff --git a/src/components/DateRange.tsx b/src/components/DateRange.tsx
index ec22390..c0a76f5 100644
--- a/src/components/DateRange.tsx
+++ b/src/components/DateRange.tsx
@@ -91,27 +91,24 @@ function ButtonField(props: ButtonFieldProps) {
 
   return (
     <Box component={'div'} sx={{position: 'relative'}}>
-      <Box component={'div'} sx={{marginTop: '7px'}}>
-        <Button
-          variant="outlined"
-          id={id}
-          disabled={disabled}
-          ref={ref}
-          aria-label={ariaLabel}
-          onClick={() => setOpen?.((prev) => !prev)}
-          sx={{
-            color: theme.palette.text.secondary,
-            borderColor: theme.palette.action.disabled,
-            height: '48.5px',
-            minWidth: '245px',
-            fontSize: '15px',
-            position: 'relative',
-            zIndex: '1',
-            padding: '0 8px',
-          }}>
-          {displayString} <EventIcon sx={{marginLeft: '20px', color: theme.palette.text.secondary}} />
-        </Button>
-      </Box>
+      <Button
+        variant="outlined"
+        size="medium"
+        id={id}
+        disabled={disabled}
+        ref={ref}
+        aria-label={ariaLabel}
+        onClick={() => setOpen?.((prev) => !prev)}
+        sx={{
+          color: theme.palette.text.secondary,
+          borderColor: theme.palette.action.disabled,
+          minWidth: '245px',
+          fontSize: '15px',
+          position: 'relative',
+          zIndex: '1',
+        }}>
+        {displayString} <EventIcon sx={{marginLeft: '20px', color: theme.palette.text.secondary}} />
+      </Button>
       <Typography
         component={'span'}
         sx={{
@@ -125,6 +122,7 @@ function ButtonField(props: ButtonFieldProps) {
           zIndex: '2',
           top: '0.01%',
           left: '1%',
+          transform: 'translateY(-7px)',
         }}>
         Ending Date Range
       </Typography>
diff --git a/src/components/TableTopBar.tsx b/src/components/TableTopBar.tsx
new file mode 100644
index 0000000..1532201
--- /dev/null
+++ b/src/components/TableTopBar.tsx
@@ -0,0 +1,75 @@
+import {Launch} from '@mui/icons-material';
+import {Autocomplete, AutocompleteProps, Box, Grid, IconButton, Stack, TextField, Typography} from '@mui/material';
+
+import * as React from 'react';
+import {useNavigate} from 'react-router-dom';
+
+export function renderUserOption(props: React.HTMLAttributes<HTMLLIElement>, option: any) {
+  const [displayName, email] = option.split(';');
+  return (
+    <li {...props} key={option}>
+      <Grid container alignItems="center">
+        <Grid item>
+          <Box>{displayName}</Box>
+          <Typography variant="body2" color="text.secondary">
+            {email}
+          </Typography>
+        </Grid>
+      </Grid>
+    </li>
+  );
+}
+
+export function TableTopBarAutocomplete({
+  defaultValue,
+  filterOptions = (x) => x,
+  ...restProps
+}: Omit<AutocompleteProps<any, any, any, any>, 'renderInput'>) {
+  return (
+    <Autocomplete
+      key={defaultValue}
+      defaultValue={defaultValue}
+      size="small"
+      sx={{width: 320}}
+      freeSolo
+      filterOptions={filterOptions}
+      renderInput={(params) => <TextField {...params} label="Search" />}
+      {...restProps}
+    />
+  );
+}
+
+interface TableTopBarProps {
+  title: string;
+  link?: string;
+  children?: React.ReactNode;
+}
+
+export default function TableTopBar({title, link, children}: TableTopBarProps) {
+  const navigate = useNavigate();
+  return (
+    <Stack
+      direction="row"
+      paddingTop={2}
+      paddingBottom={1}
+      paddingX={2}
+      gap={4}
+      justifyContent="space-between"
+      flexWrap="wrap"
+      alignItems="flex-end">
+      <Stack direction="row" gap={1} alignItems="center">
+        <Typography component="h5" variant="h5" color="text.accent">
+          {title}
+        </Typography>
+        {link != null && (
+          <IconButton size="small" onClick={() => navigate(link)}>
+            <Launch />
+          </IconButton>
+        )}
+      </Stack>
+      <Stack direction="row" flexWrap="wrap" gap={1} alignItems="center">
+        {children}
+      </Stack>
+    </Stack>
+  );
+}
diff --git a/src/pages/apps/List.tsx b/src/pages/apps/List.tsx
index 8b6f604..6e92f2d 100644
--- a/src/pages/apps/List.tsx
+++ b/src/pages/apps/List.tsx
@@ -24,6 +24,7 @@ import CreateUpdateApp from './CreateUpdate';
 import {perPage} from '../../helpers';
 import {useGetApps} from '../../api/apiComponents';
 import TablePaginationActions from '../../components/actions/TablePaginationActions';
+import TableTopBar, {TableTopBarAutocomplete} from '../../components/TableTopBar';
 
 export default function ListApps() {
   const navigate = useNavigate();
@@ -105,96 +106,70 @@ export default function ListApps() {
   };
 
   return (
-    <React.Fragment>
-      <TableContainer component={Paper}>
-        <Table sx={{minWidth: 650}} size="small" aria-label="apps">
-          <TableHead>
-            <TableRow>
+    <TableContainer component={Paper}>
+      <TableTopBar title="Applications">
+        <Button variant="contained" onClick={() => navigate('/tags/')} endIcon={<TagIcon />}>
+          Tags
+        </Button>
+        <CreateUpdateApp currentUser={currentUser}></CreateUpdateApp>
+        <TableTopBarAutocomplete
+          options={searchRows.map((row) => row.name)}
+          onChange={handleSearchSubmit}
+          onInputChange={(event, newInputValue) => setSearchInput(newInputValue)}
+          defaultValue={searchQuery}
+        />
+      </TableTopBar>
+      <Table sx={{minWidth: 650}} size="small" aria-label="apps">
+        <TableHead>
+          <TableRow>
+            <TableCell>Name</TableCell>
+            <TableCell>Description</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {rows.map((row) => (
+            <TableRow key={row.id}>
               <TableCell>
-                <Typography component="h5" variant="h5" color="text.accent">
-                  Applications
-                </Typography>
+                <Link to={`/apps/${row.name}`} sx={{textDecoration: 'none', color: 'inherit'}} component={RouterLink}>
+                  {row.name}
+                </Link>
               </TableCell>
-              <TableCell align="right">
-                <Box
-                  sx={{
-                    display: 'flex',
-                    justifyContent: 'flex-start',
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                  }}>
-                  <Box>
-                    <Button variant="contained" onClick={() => navigate('/tags/')} endIcon={<TagIcon />}>
-                      Tags
-                    </Button>
-                  </Box>
-                  <Box sx={{mx: 2, width: '200px'}}>
-                    <CreateUpdateApp currentUser={currentUser}></CreateUpdateApp>
-                  </Box>
-                  <Autocomplete
-                    fullWidth
-                    freeSolo
-                    filterOptions={(x) => x}
-                    options={searchRows.map((row) => row.name)}
-                    onChange={handleSearchSubmit}
-                    onInputChange={(event, newInputValue) => setSearchInput(newInputValue)}
-                    defaultValue={searchQuery}
-                    key={searchQuery}
-                    renderInput={(params) => <TextField {...params} label={'Search' as any} />}
-                  />
-                </Box>
+              <TableCell>
+                <Link to={`/apps/${row.name}`} sx={{textDecoration: 'none', color: 'inherit'}} component={RouterLink}>
+                  {(row.description ?? '').length > 115
+                    ? row.description?.substring(0, 114) + '...'
+                    : row.description ?? ''}
+                </Link>
               </TableCell>
             </TableRow>
-            <TableRow>
-              <TableCell>Name</TableCell>
-              <TableCell>Description</TableCell>
-            </TableRow>
-          </TableHead>
-          <TableBody>
-            {rows.map((row) => (
-              <TableRow key={row.id}>
-                <TableCell>
-                  <Link to={`/apps/${row.name}`} sx={{textDecoration: 'none', color: 'inherit'}} component={RouterLink}>
-                    {row.name}
-                  </Link>
-                </TableCell>
-                <TableCell>
-                  <Link to={`/apps/${row.name}`} sx={{textDecoration: 'none', color: 'inherit'}} component={RouterLink}>
-                    {(row.description ?? '').length > 115
-                      ? row.description?.substring(0, 114) + '...'
-                      : row.description ?? ''}
-                  </Link>
-                </TableCell>
-              </TableRow>
-            ))}
-            {emptyRows > 0 && (
-              <TableRow style={{height: 33 * emptyRows}}>
-                <TableCell colSpan={6} />
-              </TableRow>
-            )}
-          </TableBody>
-          <TableFooter>
-            <TableRow>
-              <TablePagination
-                rowsPerPageOptions={perPage}
-                colSpan={3}
-                count={totalRows}
-                rowsPerPage={rowsPerPage}
-                page={page}
-                SelectProps={{
-                  inputProps: {
-                    'aria-label': 'rows per page',
-                  },
-                  native: true,
-                }}
-                onPageChange={handleChangePage}
-                onRowsPerPageChange={handleChangeRowsPerPage}
-                ActionsComponent={TablePaginationActions}
-              />
+          ))}
+          {emptyRows > 0 && (
+            <TableRow style={{height: 33 * emptyRows}}>
+              <TableCell colSpan={6} />
             </TableRow>
-          </TableFooter>
-        </Table>
-      </TableContainer>
-    </React.Fragment>
+          )}
+        </TableBody>
+        <TableFooter>
+          <TableRow>
+            <TablePagination
+              rowsPerPageOptions={perPage}
+              colSpan={3}
+              count={totalRows}
+              rowsPerPage={rowsPerPage}
+              page={page}
+              SelectProps={{
+                inputProps: {
+                  'aria-label': 'rows per page',
+                },
+                native: true,
+              }}
+              onPageChange={handleChangePage}
+              onRowsPerPageChange={handleChangeRowsPerPage}
+              ActionsComponent={TablePaginationActions}
+            />
+          </TableRow>
+        </TableFooter>
+      </Table>
+    </TableContainer>
   );
 }
diff --git a/src/pages/groups/Audit.tsx b/src/pages/groups/Audit.tsx
index 00b1431..4e4369d 100644
--- a/src/pages/groups/Audit.tsx
+++ b/src/pages/groups/Audit.tsx
@@ -34,6 +34,7 @@ import Loading from '../../components/Loading';
 import Started from '../../components/Started';
 import Ending from '../../components/Ending';
 import TablePaginationActions from '../../components/actions/TablePaginationActions';
+import TableTopBar, {renderUserOption, TableTopBarAutocomplete} from '../../components/TableTopBar';
 
 type OrderBy = 'moniker' | 'created_at' | 'ended_at';
 type OrderDirection = 'asc' | 'desc';
@@ -192,251 +193,207 @@ export default function AuditGroup() {
   };
 
   return (
-    <React.Fragment>
-      <TableContainer component={Paper}>
-        <Table sx={{minWidth: 650}} size="small" aria-label="groups">
-          <TableHead>
-            <TableRow>
-              <TableCell colSpan={2}>
-                <Typography component="h5" variant="h5" color="text.accent">
-                  {(group.deleted_at ?? null) != null ? (
-                    <Link
-                      to={`/groups/${group.id}`}
-                      sx={{textDecoration: 'line-through', color: 'inherit'}}
-                      component={RouterLink}>
-                      {group.name}
-                    </Link>
-                  ) : (
-                    <Link
-                      to={`/groups/${group.name}`}
-                      sx={{textDecoration: 'none', color: 'inherit'}}
-                      component={RouterLink}>
-                      {group.name}
-                    </Link>
-                  )}{' '}
-                  Group Audit
-                </Typography>
-              </TableCell>
+    <TableContainer component={Paper}>
+      <TableTopBar
+        title={`Group Audit: ${group.name}`}
+        link={group.deleted_at != null ? `/groups/${group.id}` : `/groups/${group.name}`}>
+        <ToggleButtonGroup size="small" exclusive value={filterOwner} onChange={handleOwnerOrMember}>
+          <ToggleButton value={false}>Member</ToggleButton>
+          <ToggleButton value={true}>Owner</ToggleButton>
+        </ToggleButtonGroup>
+        <ToggleButtonGroup size="small" exclusive value={filterActive} onChange={handleActiveOrInactive}>
+          <ToggleButton value={true}>Active</ToggleButton>
+          <ToggleButton value={false}>Inactive</ToggleButton>
+        </ToggleButtonGroup>
+        <TableTopBarAutocomplete
+          options={searchRows.map((row) => displayUserName(row) + ';' + row.email.toLowerCase())}
+          onChange={handleSearchSubmit}
+          onInputChange={(event, newInputValue) => {
+            setSearchInput(newInputValue?.split(';')[0] ?? '');
+          }}
+          defaultValue={searchQuery}
+          renderOption={renderUserOption}
+        />
+      </TableTopBar>
+      <Table sx={{minWidth: 650}} size="small" aria-label="groups">
+        <TableHead>
+          <TableRow>
+            <TableCell>
+              <TableSortLabel
+                active={orderBy === 'moniker'}
+                direction={orderBy === 'moniker' ? orderDirection : 'desc'}
+                onClick={handleSortChange('moniker')}>
+                User Name
+              </TableSortLabel>
+            </TableCell>
+            <TableCell>User Email</TableCell>
+            <TableCell>Member or Owner</TableCell>
+            <TableCell>Direct or via Role</TableCell>
+            <TableCell>
+              <TableSortLabel
+                active={orderBy === 'created_at'}
+                direction={orderBy === 'created_at' ? orderDirection : 'desc'}
+                onClick={handleSortChange('created_at')}>
+                Started
+              </TableSortLabel>
+            </TableCell>
+            <TableCell>Added by</TableCell>
+            <TableCell>
+              <TableSortLabel
+                active={orderBy === 'ended_at'}
+                direction={orderBy === 'ended_at' ? orderDirection : 'desc'}
+                onClick={handleSortChange('ended_at')}>
+                Ending
+              </TableSortLabel>
+            </TableCell>
+            <TableCell>Removed by</TableCell>
+            <TableCell align="center">Access Request</TableCell>
+            <TableCell align="center">Justification</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {rows.map((row) => (
+            <TableRow
+              key={row.id}
+              sx={{
+                backgroundColor: ({palette}) =>
+                  Object.values(row.ended_at == null || dayjs().isBefore(dayjs(row.ended_at)))
+                    ? palette.highlight.success.main
+                    : palette.highlight.danger.main,
+              }}>
               <TableCell>
-                <ToggleButtonGroup exclusive value={filterOwner} onChange={handleOwnerOrMember}>
-                  <ToggleButton value={false}>Member</ToggleButton>
-                  <ToggleButton value={true}>Owner</ToggleButton>
-                </ToggleButtonGroup>
+                {(row.user?.deleted_at ?? null) != null ? (
+                  <Link
+                    to={`/users/${row.user?.id ?? ''}`}
+                    sx={{textDecoration: 'line-through', color: 'inherit'}}
+                    component={RouterLink}>
+                    {displayUserName(row.user)}
+                  </Link>
+                ) : (
+                  <Link
+                    to={`/users/${(row.user?.email ?? '').toLowerCase()}`}
+                    sx={{textDecoration: 'none', color: 'inherit'}}
+                    component={RouterLink}>
+                    {displayUserName(row.user)}
+                  </Link>
+                )}
               </TableCell>
-              <TableCell colSpan={2}>
-                <ToggleButtonGroup exclusive value={filterActive} onChange={handleActiveOrInactive}>
-                  <ToggleButton value={true}>Active</ToggleButton>
-                  <ToggleButton value={false}>Inactive</ToggleButton>
-                </ToggleButtonGroup>
+              <TableCell>
+                {(row.user?.deleted_at ?? null) != null ? (
+                  <Link
+                    to={`/users/${row.user?.id ?? ''}`}
+                    sx={{textDecoration: 'line-through', color: 'inherit'}}
+                    component={RouterLink}>
+                    {row.user?.email.toLowerCase()}
+                  </Link>
+                ) : (
+                  <Link
+                    to={`/users/${(row.user?.email ?? '').toLowerCase()}`}
+                    sx={{textDecoration: 'none', color: 'inherit'}}
+                    component={RouterLink}>
+                    {row.user?.email.toLowerCase()}
+                  </Link>
+                )}
               </TableCell>
-              <TableCell align="right" colSpan={5}>
-                <Autocomplete
-                  freeSolo
-                  filterOptions={(x) => x}
-                  options={searchRows.map((row) => displayUserName(row) + ';' + row.email.toLowerCase())}
-                  onChange={handleSearchSubmit}
-                  onInputChange={(event, newInputValue) => {
-                    setSearchInput(newInputValue?.split(';')[0] ?? '');
-                  }}
-                  defaultValue={searchQuery}
-                  key={searchQuery}
-                  renderInput={(params) => <TextField {...params} label={'Search' as any} />}
-                  renderOption={(props, option, state) => {
-                    const [displayName, email] = option.split(';');
-                    return (
-                      <li {...props}>
-                        <Grid container alignItems="center">
-                          <Grid item>
-                            <Box>{displayName}</Box>
-                            <Typography variant="body2" color="text.secondary">
-                              {email}
-                            </Typography>
-                          </Grid>
-                        </Grid>
-                      </li>
-                    );
-                  }}
-                />
+              <TableCell>{row.is_owner ? 'Owner' : 'Member'}</TableCell>
+              <TableCell>
+                {row.role_group_mapping == null ? (
+                  <Chip key="direct" label="Direct" color="primary" />
+                ) : (
+                  <Chip
+                    label={row.role_group_mapping?.role_group?.name}
+                    color="primary"
+                    onClick={() => navigate(`/roles/${row.role_group_mapping?.role_group?.name}`)}
+                  />
+                )}
               </TableCell>
-            </TableRow>
-            <TableRow>
               <TableCell>
-                <TableSortLabel
-                  active={orderBy === 'moniker'}
-                  direction={orderBy === 'moniker' ? orderDirection : 'desc'}
-                  onClick={handleSortChange('moniker')}>
-                  User Name
-                </TableSortLabel>
+                <Started memberships={[row]} />
               </TableCell>
-              <TableCell>User Email</TableCell>
-              <TableCell>Member or Owner</TableCell>
-              <TableCell>Direct or via Role</TableCell>
               <TableCell>
-                <TableSortLabel
-                  active={orderBy === 'created_at'}
-                  direction={orderBy === 'created_at' ? orderDirection : 'desc'}
-                  onClick={handleSortChange('created_at')}>
-                  Started
-                </TableSortLabel>
+                {(row.created_actor?.deleted_at ?? null) != null ? (
+                  <Link
+                    to={`/users/${row.created_actor?.id ?? ''}`}
+                    sx={{textDecoration: 'line-through', color: 'inherit'}}
+                    component={RouterLink}>
+                    {displayUserName(row.created_actor)}
+                  </Link>
+                ) : (
+                  <Link
+                    to={`/users/${(row.created_actor?.email ?? '').toLowerCase()}`}
+                    sx={{textDecoration: 'none', color: 'inherit'}}
+                    component={RouterLink}>
+                    {displayUserName(row.created_actor)}
+                  </Link>
+                )}
               </TableCell>
-              <TableCell>Added by</TableCell>
               <TableCell>
-                <TableSortLabel
-                  active={orderBy === 'ended_at'}
-                  direction={orderBy === 'ended_at' ? orderDirection : 'desc'}
-                  onClick={handleSortChange('ended_at')}>
-                  Ending
-                </TableSortLabel>
+                <Ending memberships={[row]} />
               </TableCell>
-              <TableCell>Removed by</TableCell>
-              <TableCell align="center">Access Request</TableCell>
-              <TableCell align="center">Justification</TableCell>
-            </TableRow>
-          </TableHead>
-          <TableBody>
-            {rows.map((row) => (
-              <TableRow
-                key={row.id}
-                sx={{
-                  backgroundColor: ({palette}) =>
-                    Object.values(row.ended_at == null || dayjs().isBefore(dayjs(row.ended_at)))
-                      ? palette.highlight.success.main
-                      : palette.highlight.danger.main,
-                }}>
-                <TableCell>
-                  {(row.user?.deleted_at ?? null) != null ? (
-                    <Link
-                      to={`/users/${row.user?.id ?? ''}`}
-                      sx={{textDecoration: 'line-through', color: 'inherit'}}
-                      component={RouterLink}>
-                      {displayUserName(row.user)}
-                    </Link>
-                  ) : (
-                    <Link
-                      to={`/users/${(row.user?.email ?? '').toLowerCase()}`}
-                      sx={{textDecoration: 'none', color: 'inherit'}}
-                      component={RouterLink}>
-                      {displayUserName(row.user)}
-                    </Link>
-                  )}
-                </TableCell>
-                <TableCell>
-                  {(row.user?.deleted_at ?? null) != null ? (
-                    <Link
-                      to={`/users/${row.user?.id ?? ''}`}
-                      sx={{textDecoration: 'line-through', color: 'inherit'}}
-                      component={RouterLink}>
-                      {row.user?.email.toLowerCase()}
-                    </Link>
-                  ) : (
-                    <Link
-                      to={`/users/${(row.user?.email ?? '').toLowerCase()}`}
-                      sx={{textDecoration: 'none', color: 'inherit'}}
-                      component={RouterLink}>
-                      {row.user?.email.toLowerCase()}
-                    </Link>
-                  )}
-                </TableCell>
-                <TableCell>{row.is_owner ? 'Owner' : 'Member'}</TableCell>
-                <TableCell>
-                  {row.role_group_mapping == null ? (
-                    <Chip key="direct" label="Direct" color="primary" />
-                  ) : (
-                    <Chip
-                      label={row.role_group_mapping?.role_group?.name}
-                      color="primary"
-                      onClick={() => navigate(`/roles/${row.role_group_mapping?.role_group?.name}`)}
-                    />
-                  )}
-                </TableCell>
-                <TableCell>
-                  <Started memberships={[row]} />
-                </TableCell>
-                <TableCell>
-                  {(row.created_actor?.deleted_at ?? null) != null ? (
+              <TableCell>
+                {row.ended_at != null && dayjs().isAfter(dayjs(row.ended_at)) ? (
+                  (row.ended_actor?.deleted_at ?? null) != null ? (
                     <Link
-                      to={`/users/${row.created_actor?.id ?? ''}`}
+                      to={`/users/${row.ended_actor?.id ?? ''}`}
                       sx={{textDecoration: 'line-through', color: 'inherit'}}
                       component={RouterLink}>
-                      {displayUserName(row.created_actor)}
+                      {displayUserName(row.ended_actor)}
                     </Link>
                   ) : (
                     <Link
-                      to={`/users/${(row.created_actor?.email ?? '').toLowerCase()}`}
+                      to={`/users/${(row.ended_actor?.email ?? '').toLowerCase()}`}
                       sx={{textDecoration: 'none', color: 'inherit'}}
                       component={RouterLink}>
-                      {displayUserName(row.created_actor)}
+                      {displayUserName(row.ended_actor)}
                     </Link>
-                  )}
-                </TableCell>
-                <TableCell>
-                  <Ending memberships={[row]} />
-                </TableCell>
-                <TableCell>
-                  {row.ended_at != null && dayjs().isAfter(dayjs(row.ended_at)) ? (
-                    (row.ended_actor?.deleted_at ?? null) != null ? (
-                      <Link
-                        to={`/users/${row.ended_actor?.id ?? ''}`}
-                        sx={{textDecoration: 'line-through', color: 'inherit'}}
-                        component={RouterLink}>
-                        {displayUserName(row.ended_actor)}
-                      </Link>
-                    ) : (
-                      <Link
-                        to={`/users/${(row.ended_actor?.email ?? '').toLowerCase()}`}
-                        sx={{textDecoration: 'none', color: 'inherit'}}
-                        component={RouterLink}>
-                        {displayUserName(row.ended_actor)}
-                      </Link>
-                    )
-                  ) : (
-                    ''
-                  )}
-                </TableCell>
-                <TableCell align="center">
-                  {row.access_request != null ? (
-                    <Button
-                      variant="contained"
-                      size="small"
-                      to={`/requests/${row.access_request?.id ?? ''}`}
-                      component={RouterLink}>
-                      View
-                    </Button>
-                  ) : null}
-                </TableCell>
-                <TableCell align="center">
-                  {row.created_reason ? <CreatedReason created_reason={row.created_reason} /> : null}
-                </TableCell>
-              </TableRow>
-            ))}
-            {emptyRows > 0 && (
-              <TableRow style={{height: 33 * emptyRows}}>
-                <TableCell colSpan={9} />
-              </TableRow>
-            )}
-          </TableBody>
-          <TableFooter>
-            <TableRow>
-              <TablePagination
-                rowsPerPageOptions={[5, 10, 20]}
-                colSpan={9}
-                count={totalRows}
-                rowsPerPage={rowsPerPage}
-                page={page}
-                SelectProps={{
-                  inputProps: {
-                    'aria-label': 'rows per page',
-                  },
-                  native: true,
-                }}
-                onPageChange={handleChangePage}
-                onRowsPerPageChange={handleChangeRowsPerPage}
-                ActionsComponent={TablePaginationActions}
-              />
+                  )
+                ) : (
+                  ''
+                )}
+              </TableCell>
+              <TableCell align="center">
+                {row.access_request != null ? (
+                  <Button
+                    variant="contained"
+                    size="small"
+                    to={`/requests/${row.access_request?.id ?? ''}`}
+                    component={RouterLink}>
+                    View
+                  </Button>
+                ) : null}
+              </TableCell>
+              <TableCell align="center">
+                {row.created_reason ? <CreatedReason created_reason={row.created_reason} /> : null}
+              </TableCell>
+            </TableRow>
+          ))}
+          {emptyRows > 0 && (
+            <TableRow style={{height: 33 * emptyRows}}>
+              <TableCell colSpan={9} />
             </TableRow>
-          </TableFooter>
-        </Table>
-      </TableContainer>
-    </React.Fragment>
+          )}
+        </TableBody>
+        <TableFooter>
+          <TableRow>
+            <TablePagination
+              rowsPerPageOptions={[5, 10, 20]}
+              colSpan={9}
+              count={totalRows}
+              rowsPerPage={rowsPerPage}
+              page={page}
+              SelectProps={{
+                inputProps: {
+                  'aria-label': 'rows per page',
+                },
+                native: true,
+              }}
+              onPageChange={handleChangePage}
+              onRowsPerPageChange={handleChangeRowsPerPage}
+              ActionsComponent={TablePaginationActions}
+            />
+          </TableRow>
+        </TableFooter>
+      </Table>
+    </TableContainer>
   );
 }
diff --git a/src/pages/groups/Expiring.tsx b/src/pages/groups/Expiring.tsx
index 58e665d..3e97b9c 100644
--- a/src/pages/groups/Expiring.tsx
+++ b/src/pages/groups/Expiring.tsx
@@ -34,6 +34,7 @@ import Loading from '../../components/Loading';
 import Started from '../../components/Started';
 import TablePaginationActions from '../../components/actions/TablePaginationActions';
 import {displayUserName, perPage} from '../../helpers';
+import TableTopBar, {renderUserOption, TableTopBarAutocomplete} from '../../components/TableTopBar';
 
 type OrderBy = 'moniker' | 'ended_at';
 type OrderDirection = 'asc' | 'desc';
@@ -205,229 +206,197 @@ export default function ExpiringGroups() {
   };
 
   return (
-    <React.Fragment>
-      <TableContainer component={Paper}>
-        <Table sx={{minWidth: 650}} size="small" aria-label="roles">
-          <TableHead>
-            <TableRow>
+    <TableContainer component={Paper}>
+      <TableTopBar title="Expiring Groups">
+        <BulkRenewal
+          rows={rows.filter((row) => canManageGroup(currentUser, row.group))}
+          ownAccess={userId == '@me' || userId == currentUser.id}
+        />
+        <ToggleButtonGroup
+          size="small"
+          exclusive
+          value={filterActive}
+          onChange={handleActiveOrInactive}
+          defaultValue={'true'}>
+          <ToggleButton value={true}>Active</ToggleButton>
+          <ToggleButton value={false}>Inactive</ToggleButton>
+        </ToggleButtonGroup>
+        <DateRangePicker
+          startDate={startDate}
+          setStartDate={handleSetStartDate}
+          endDate={endDate}
+          setEndDate={handleSetEndDate}
+          datesPicked={datesPicked}
+          setDatesPicked={setDatesPicked}
+          slots={{
+            textField: (textFieldProps) => <TextField {...textFieldProps} />,
+          }}
+        />
+        <TableTopBarAutocomplete
+          options={searchRows.map((row) => displayUserName(row) + ';' + row.email.toLowerCase())}
+          onChange={handleSearchSubmit}
+          onInputChange={(event, newInputValue) => {
+            setSearchInput(newInputValue?.split(';')[0] ?? '');
+          }}
+          defaultValue={searchQuery}
+          renderOption={renderUserOption}
+        />
+      </TableTopBar>
+      <Table sx={{minWidth: 650}} size="small" aria-label="roles">
+        <TableHead>
+          <TableRow>
+            <TableCell>
+              <TableSortLabel
+                active={orderBy === 'moniker'}
+                direction={orderBy === 'moniker' ? orderDirection : 'desc'}
+                onClick={handleSortChange('moniker')}>
+                User Name
+              </TableSortLabel>
+            </TableCell>
+            <TableCell>User Email</TableCell>
+            <TableCell>Group Name</TableCell>
+            <TableCell>Member or Owner</TableCell>
+            <TableCell>
+              <TableSortLabel>Started</TableSortLabel>
+            </TableCell>
+            <TableCell>Added by</TableCell>
+            <TableCell colSpan={2}>
+              <TableSortLabel
+                active={orderBy === 'ended_at'}
+                direction={orderBy === 'ended_at' ? orderDirection : 'asc'}
+                onClick={handleSortChange('ended_at')}>
+                Ending
+              </TableSortLabel>
+            </TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {rows.map((row) => (
+            <TableRow
+              key={row.id}
+              sx={{
+                bgcolor: ({palette: {highlight}}) =>
+                  dayjs(row.ended_at).isAfter(dayjs()) && dayjs(row.ended_at).isBefore(dayjs().add(7, 'day'))
+                    ? highlight.warning.main
+                    : dayjs(row.ended_at).isBefore(dayjs())
+                      ? highlight.danger.main
+                      : null,
+              }}>
               <TableCell>
-                <Typography component="h5" variant="h5" color="text.accent">
-                  Expiring Groups
-                </Typography>
+                {(row.user?.deleted_at ?? null) != null ? (
+                  <Link
+                    to={`/users/${row.user?.id ?? ''}`}
+                    sx={{textDecoration: 'line-through', color: 'inherit'}}
+                    component={RouterLink}>
+                    {displayUserName(row.user)}
+                  </Link>
+                ) : (
+                  <Link
+                    to={`/users/${(row.user?.email ?? '').toLowerCase()}`}
+                    sx={{textDecoration: 'none', color: 'inherit'}}
+                    component={RouterLink}>
+                    {displayUserName(row.user)}
+                  </Link>
+                )}
               </TableCell>
               <TableCell>
-                <BulkRenewal
-                  rows={rows.filter((row) => canManageGroup(currentUser, row.group))}
-                  ownAccess={userId == '@me' || userId == currentUser.id}
-                />
+                {(row.user?.deleted_at ?? null) != null ? (
+                  <Link
+                    to={`/users/${row.user?.id ?? ''}`}
+                    sx={{textDecoration: 'line-through', color: 'inherit'}}
+                    component={RouterLink}>
+                    {row.user?.email.toLowerCase()}
+                  </Link>
+                ) : (
+                  <Link
+                    to={`/users/${(row.user?.email ?? '').toLowerCase()}`}
+                    sx={{textDecoration: 'none', color: 'inherit'}}
+                    component={RouterLink}>
+                    {row.user?.email.toLowerCase()}
+                  </Link>
+                )}
               </TableCell>
               <TableCell>
-                <ToggleButtonGroup
-                  exclusive
-                  value={filterActive}
-                  onChange={handleActiveOrInactive}
-                  defaultValue={'true'}>
-                  <ToggleButton value={true}>Active</ToggleButton>
-                  <ToggleButton value={false}>Inactive</ToggleButton>
-                </ToggleButtonGroup>
-              </TableCell>
-              <TableCell colSpan={2}>
-                <DateRangePicker
-                  startDate={startDate}
-                  setStartDate={handleSetStartDate}
-                  endDate={endDate}
-                  setEndDate={handleSetEndDate}
-                  datesPicked={datesPicked}
-                  setDatesPicked={setDatesPicked}
-                  slots={{
-                    textField: (textFieldProps) => <TextField {...textFieldProps} />,
-                  }}
-                />
-              </TableCell>
-              <TableCell align="right" colSpan={3}>
-                <Autocomplete
-                  freeSolo
-                  filterOptions={(x) => x}
-                  options={searchRows.map((row) => displayUserName(row) + ';' + row.email.toLowerCase())}
-                  onChange={handleSearchSubmit}
-                  onInputChange={(event, newInputValue) => {
-                    setSearchInput(newInputValue?.split(';')[0] ?? '');
-                  }}
-                  defaultValue={searchQuery}
-                  key={searchQuery}
-                  renderInput={(params) => <TextField {...params} label={'Search' as any} />}
-                  renderOption={(props, option, state) => {
-                    const [displayName, email] = option.split(';');
-                    return (
-                      <li {...props}>
-                        <Grid container alignItems="center">
-                          <Grid item>
-                            <Box>{displayName}</Box>
-                            <Typography variant="body2" color="text.secondary">
-                              {email}
-                            </Typography>
-                          </Grid>
-                        </Grid>
-                      </li>
-                    );
-                  }}
-                />
+                {(row.group?.deleted_at ?? null) != null ? (
+                  <Link
+                    to={`/groups/${row.group?.id ?? ''}`}
+                    sx={{textDecoration: 'line-through', color: 'inherit'}}
+                    component={RouterLink}>
+                    {row.group?.name ?? ''}
+                  </Link>
+                ) : (
+                  <Link
+                    to={`/groups/${row.group?.name ?? ''}`}
+                    sx={{textDecoration: 'none', color: 'inherit'}}
+                    component={RouterLink}>
+                    {row.group?.name ?? ''}
+                  </Link>
+                )}
               </TableCell>
-            </TableRow>
-            <TableRow>
+              <TableCell>{row.is_owner ? 'Owner' : 'Member'}</TableCell>
               <TableCell>
-                <TableSortLabel
-                  active={orderBy === 'moniker'}
-                  direction={orderBy === 'moniker' ? orderDirection : 'desc'}
-                  onClick={handleSortChange('moniker')}>
-                  User Name
-                </TableSortLabel>
+                <Started memberships={[row]} />
               </TableCell>
-              <TableCell>User Email</TableCell>
-              <TableCell>Group Name</TableCell>
-              <TableCell>Member or Owner</TableCell>
               <TableCell>
-                <TableSortLabel>Started</TableSortLabel>
+                {(row.created_actor?.deleted_at ?? null) != null ? (
+                  <Link
+                    to={`/users/${row.created_actor?.id ?? ''}`}
+                    sx={{textDecoration: 'line-through', color: 'inherit'}}
+                    component={RouterLink}>
+                    {displayUserName(row.created_actor)}
+                  </Link>
+                ) : (
+                  <Link
+                    to={`/users/${(row.created_actor?.email ?? '').toLowerCase()}`}
+                    sx={{textDecoration: 'none', color: 'inherit'}}
+                    component={RouterLink}>
+                    {displayUserName(row.created_actor)}
+                  </Link>
+                )}
               </TableCell>
-              <TableCell>Added by</TableCell>
-              <TableCell colSpan={2}>
-                <TableSortLabel
-                  active={orderBy === 'ended_at'}
-                  direction={orderBy === 'ended_at' ? orderDirection : 'asc'}
-                  onClick={handleSortChange('ended_at')}>
-                  Ending
-                </TableSortLabel>
+              <TableCell>
+                <Ending memberships={[row]} />
               </TableCell>
-            </TableRow>
-          </TableHead>
-          <TableBody>
-            {rows.map((row) => (
-              <TableRow
-                key={row.id}
-                sx={{
-                  bgcolor: ({palette: {highlight}}) =>
-                    dayjs(row.ended_at).isAfter(dayjs()) && dayjs(row.ended_at).isBefore(dayjs().add(7, 'day'))
-                      ? highlight.warning.main
-                      : dayjs(row.ended_at).isBefore(dayjs())
-                        ? highlight.danger.main
-                        : null,
-                }}>
-                <TableCell>
-                  {(row.user?.deleted_at ?? null) != null ? (
-                    <Link
-                      to={`/users/${row.user?.id ?? ''}`}
-                      sx={{textDecoration: 'line-through', color: 'inherit'}}
-                      component={RouterLink}>
-                      {displayUserName(row.user)}
-                    </Link>
-                  ) : (
-                    <Link
-                      to={`/users/${(row.user?.email ?? '').toLowerCase()}`}
-                      sx={{textDecoration: 'none', color: 'inherit'}}
-                      component={RouterLink}>
-                      {displayUserName(row.user)}
-                    </Link>
-                  )}
-                </TableCell>
-                <TableCell>
-                  {(row.user?.deleted_at ?? null) != null ? (
-                    <Link
-                      to={`/users/${row.user?.id ?? ''}`}
-                      sx={{textDecoration: 'line-through', color: 'inherit'}}
-                      component={RouterLink}>
-                      {row.user?.email.toLowerCase()}
-                    </Link>
-                  ) : (
-                    <Link
-                      to={`/users/${(row.user?.email ?? '').toLowerCase()}`}
-                      sx={{textDecoration: 'none', color: 'inherit'}}
-                      component={RouterLink}>
-                      {row.user?.email.toLowerCase()}
-                    </Link>
-                  )}
-                </TableCell>
-                <TableCell>
-                  {(row.group?.deleted_at ?? null) != null ? (
-                    <Link
-                      to={`/groups/${row.group?.id ?? ''}`}
-                      sx={{textDecoration: 'line-through', color: 'inherit'}}
-                      component={RouterLink}>
-                      {row.group?.name ?? ''}
-                    </Link>
-                  ) : (
-                    <Link
-                      to={`/groups/${row.group?.name ?? ''}`}
-                      sx={{textDecoration: 'none', color: 'inherit'}}
-                      component={RouterLink}>
-                      {row.group?.name ?? ''}
-                    </Link>
-                  )}
+              {userId == '@me' || currentUser.id == row.user.id ? (
+                <TableCell align="center">
+                  <CreateRequest currentUser={row.user} group={row.group} owner={row.is_owner} renew={true} />
                 </TableCell>
-                <TableCell>{row.is_owner ? 'Owner' : 'Member'}</TableCell>
-                <TableCell>
-                  <Started memberships={[row]} />
+              ) : ownerId == '@me' || canManageGroup(currentUser, row.group) ? (
+                <TableCell align="center">
+                  <BulkRenewal rows={rows.filter((row) => canManageGroup(currentUser, row.group))} select={row.id} />
                 </TableCell>
-                <TableCell>
-                  {(row.created_actor?.deleted_at ?? null) != null ? (
-                    <Link
-                      to={`/users/${row.created_actor?.id ?? ''}`}
-                      sx={{textDecoration: 'line-through', color: 'inherit'}}
-                      component={RouterLink}>
-                      {displayUserName(row.created_actor)}
-                    </Link>
-                  ) : (
-                    <Link
-                      to={`/users/${(row.created_actor?.email ?? '').toLowerCase()}`}
-                      sx={{textDecoration: 'none', color: 'inherit'}}
-                      component={RouterLink}>
-                      {displayUserName(row.created_actor)}
-                    </Link>
-                  )}
-                </TableCell>
-                <TableCell>
-                  <Ending memberships={[row]} />
-                </TableCell>
-                {userId == '@me' || currentUser.id == row.user.id ? (
-                  <TableCell align="center">
-                    <CreateRequest currentUser={row.user} group={row.group} owner={row.is_owner} renew={true} />
-                  </TableCell>
-                ) : ownerId == '@me' || canManageGroup(currentUser, row.group) ? (
-                  <TableCell align="center">
-                    <BulkRenewal rows={rows.filter((row) => canManageGroup(currentUser, row.group))} select={row.id} />
-                  </TableCell>
-                ) : (
-                  <TableCell></TableCell>
-                )}
-              </TableRow>
-            ))}
-            {emptyRows > 0 && (
-              <TableRow style={{height: 33 * emptyRows}}>
-                <TableCell colSpan={9} />
-              </TableRow>
-            )}
-          </TableBody>
-          <TableFooter>
-            <TableRow>
-              <TablePagination
-                rowsPerPageOptions={perPage}
-                colSpan={9}
-                count={totalRows}
-                rowsPerPage={rowsPerPage}
-                page={page}
-                SelectProps={{
-                  inputProps: {
-                    'aria-label': 'rows per page',
-                  },
-                  native: true,
-                }}
-                onPageChange={handleChangePage}
-                onRowsPerPageChange={handleChangeRowsPerPage}
-                ActionsComponent={TablePaginationActions}
-              />
+              ) : (
+                <TableCell></TableCell>
+              )}
+            </TableRow>
+          ))}
+          {emptyRows > 0 && (
+            <TableRow style={{height: 33 * emptyRows}}>
+              <TableCell colSpan={9} />
             </TableRow>
-          </TableFooter>
-        </Table>
-      </TableContainer>
-    </React.Fragment>
+          )}
+        </TableBody>
+        <TableFooter>
+          <TableRow>
+            <TablePagination
+              rowsPerPageOptions={perPage}
+              colSpan={9}
+              count={totalRows}
+              rowsPerPage={rowsPerPage}
+              page={page}
+              SelectProps={{
+                inputProps: {
+                  'aria-label': 'rows per page',
+                },
+                native: true,
+              }}
+              onPageChange={handleChangePage}
+              onRowsPerPageChange={handleChangeRowsPerPage}
+              ActionsComponent={TablePaginationActions}
+            />
+          </TableRow>
+        </TableFooter>
+      </Table>
+    </TableContainer>
   );
 }
diff --git a/src/pages/groups/List.tsx b/src/pages/groups/List.tsx
index 2c269b8..131937e 100644
--- a/src/pages/groups/List.tsx
+++ b/src/pages/groups/List.tsx
@@ -16,13 +16,13 @@ import TableHead from '@mui/material/TableHead';
 import TablePagination from '@mui/material/TablePagination';
 import TableRow from '@mui/material/TableRow';
 import TextField from '@mui/material/TextField';
-import Typography from '@mui/material/Typography';
 
 import {useCurrentUser} from '../../authentication';
 import CreateUpdateGroup from './CreateUpdate';
 import {displayGroupType, perPage} from '../../helpers';
 import {useGetGroups} from '../../api/apiComponents';
 import TablePaginationActions from '../../components/actions/TablePaginationActions';
+import TableTopBar, {TableTopBarAutocomplete} from '../../components/TableTopBar';
 
 export default function ListGroups() {
   const navigate = useNavigate();
@@ -104,102 +104,76 @@ export default function ListGroups() {
   };
 
   return (
-    <React.Fragment>
-      <TableContainer component={Paper}>
-        <Table sx={{minWidth: 650}} size="small" aria-label="groups">
-          <TableHead>
-            <TableRow>
+    <TableContainer component={Paper}>
+      <TableTopBar title="Groups">
+        <Button variant="contained" onClick={() => navigate('/tags/')} endIcon={<TagIcon />}>
+          Tags
+        </Button>
+        <CreateUpdateGroup currentUser={currentUser}></CreateUpdateGroup>
+        <TableTopBarAutocomplete
+          options={searchRows.map((row) => row.name)}
+          onChange={handleSearchSubmit}
+          onInputChange={(event, newInputValue) => setSearchInput(newInputValue)}
+          defaultValue={searchQuery}
+        />
+      </TableTopBar>
+      <Table sx={{minWidth: 650}} size="small" aria-label="groups">
+        <TableHead>
+          <TableRow>
+            <TableCell>Name</TableCell>
+            <TableCell>Type</TableCell>
+            <TableCell colSpan={2}>Description</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {rows.map((row) => (
+            <TableRow key={row.id}>
               <TableCell>
-                <Typography component="h5" variant="h5" color="text.accent">
-                  Groups
-                </Typography>
+                <Link to={`/groups/${row.name}`} sx={{textDecoration: 'none', color: 'inherit'}} component={RouterLink}>
+                  {row.name}
+                </Link>
               </TableCell>
               <TableCell>
-                <Button variant="contained" onClick={() => navigate('/tags/')} endIcon={<TagIcon />}>
-                  Tags
-                </Button>
+                <Link to={`/groups/${row.name}`} sx={{textDecoration: 'none', color: 'inherit'}} component={RouterLink}>
+                  {displayGroupType(row)}
+                </Link>
               </TableCell>
-              <TableCell sx={{mx: 2, width: '210px'}}>
-                <CreateUpdateGroup currentUser={currentUser}></CreateUpdateGroup>
+              <TableCell colSpan={2}>
+                <Link to={`/groups/${row.name}`} sx={{textDecoration: 'none', color: 'inherit'}} component={RouterLink}>
+                  {(row.description?.length ?? 0) > 115
+                    ? row.description?.substring(0, 114) + '...' ?? ''
+                    : row.description}
+                </Link>
               </TableCell>
-              <TableCell align="right">
-                <Autocomplete
-                  freeSolo
-                  filterOptions={(x) => x}
-                  options={searchRows.map((row) => row.name)}
-                  onChange={handleSearchSubmit}
-                  onInputChange={(event, newInputValue) => setSearchInput(newInputValue)}
-                  defaultValue={searchQuery}
-                  key={searchQuery}
-                  renderInput={(params) => <TextField {...params} label={'Search' as any} />}
-                />
-              </TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell>Name</TableCell>
-              <TableCell>Type</TableCell>
-              <TableCell colSpan={2}>Description</TableCell>
             </TableRow>
-          </TableHead>
-          <TableBody>
-            {rows.map((row) => (
-              <TableRow key={row.id}>
-                <TableCell>
-                  <Link
-                    to={`/groups/${row.name}`}
-                    sx={{textDecoration: 'none', color: 'inherit'}}
-                    component={RouterLink}>
-                    {row.name}
-                  </Link>
-                </TableCell>
-                <TableCell>
-                  <Link
-                    to={`/groups/${row.name}`}
-                    sx={{textDecoration: 'none', color: 'inherit'}}
-                    component={RouterLink}>
-                    {displayGroupType(row)}
-                  </Link>
-                </TableCell>
-                <TableCell colSpan={2}>
-                  <Link
-                    to={`/groups/${row.name}`}
-                    sx={{textDecoration: 'none', color: 'inherit'}}
-                    component={RouterLink}>
-                    {(row.description?.length ?? 0) > 115
-                      ? row.description?.substring(0, 114) + '...' ?? ''
-                      : row.description}
-                  </Link>
-                </TableCell>
-              </TableRow>
-            ))}
-            {emptyRows > 0 && (
-              <TableRow style={{height: 33 * emptyRows}}>
-                <TableCell colSpan={6} />
-              </TableRow>
-            )}
-          </TableBody>
-          <TableFooter>
-            <TableRow>
-              <TablePagination
-                rowsPerPageOptions={perPage}
-                colSpan={4}
-                count={totalRows}
-                rowsPerPage={rowsPerPage}
-                page={page}
-                SelectProps={{
-                  inputProps: {
-                    'aria-label': 'rows per page',
-                  },
-                  native: true,
-                }}
-                onPageChange={handleChangePage}
-                onRowsPerPageChange={handleChangeRowsPerPage}
-                ActionsComponent={TablePaginationActions}
-              />
+          ))}
+          {emptyRows > 0 && (
+            <TableRow style={{height: 33 * emptyRows}}>
+              <TableCell colSpan={6} />
             </TableRow>
-          </TableFooter>
-        </Table>
-      </TableContainer>
-    </React.Fragment>
+          )}
+        </TableBody>
+        <TableFooter>
+          <TableRow>
+            <TablePagination
+              rowsPerPageOptions={perPage}
+              colSpan={4}
+              count={totalRows}
+              rowsPerPage={rowsPerPage}
+              page={page}
+              SelectProps={{
+                inputProps: {
+                  'aria-label': 'rows per page',
+                },
+                native: true,
+              }}
+              onPageChange={handleChangePage}
+              onRowsPerPageChange={handleChangeRowsPerPage}
+              ActionsComponent={TablePaginationActions}
+            />
+          </TableRow>
+        </TableFooter>
+      </Table>
+    </TableContainer>
   );
 }
diff --git a/src/pages/requests/List.tsx b/src/pages/requests/List.tsx
index e3cddc5..153fedc 100644
--- a/src/pages/requests/List.tsx
+++ b/src/pages/requests/List.tsx
@@ -27,6 +27,7 @@ import CreateRequest from './Create';
 import {useGetRequests} from '../../api/apiComponents';
 import {displayUserName, perPage} from '../../helpers';
 import TablePaginationActions from '../../components/actions/TablePaginationActions';
+import TableTopBar, {TableTopBarAutocomplete} from '../../components/TableTopBar';
 
 dayjs.extend(RelativeTime);
 
@@ -124,189 +125,168 @@ export default function ListRequests() {
   };
 
   return (
-    <React.Fragment>
-      <TableContainer component={Paper}>
-        <Table sx={{minWidth: 650}} size="small" aria-label="roles">
-          <TableHead>
-            <TableRow>
+    <TableContainer component={Paper}>
+      <TableTopBar title="Access Requests">
+        <CreateRequest currentUser={currentUser}></CreateRequest>
+        <TableTopBarAutocomplete
+          options={searchRows.map(
+            (row) =>
+              row.id +
+              ';' +
+              displayUserName(row.requester) +
+              ';' +
+              row.request_ownership +
+              ';' +
+              (row.requested_group?.name ?? '') +
+              ';' +
+              (row.status ?? '') +
+              ';' +
+              displayUserName(row.resolver),
+          )}
+          onChange={handleSearchSubmit}
+          onInputChange={(event, newInputValue) => {
+            setSearchInput(newInputValue?.split(';')[0] ?? '');
+          }}
+          defaultValue={searchQuery}
+          renderOption={(props, option, state) => {
+            const [id, displayName, ownership, group, status, resolver] = option.split(';');
+            return (
+              <li key={id} {...props}>
+                <Grid container alignItems="center">
+                  <Grid item>
+                    <Box>
+                      {displayName} {ownership == 'true' ? 'ownership of' : 'membership to'} {group}
+                    </Box>
+                    <Typography variant="body2" color="text.secondary">
+                      {status} {status == 'PENDING' || resolver == '' ? '' : 'by ' + resolver}
+                    </Typography>
+                  </Grid>
+                </Grid>
+              </li>
+            );
+          }}
+        />
+      </TableTopBar>
+      <Table sx={{minWidth: 650}} size="small" aria-label="roles">
+        <TableHead>
+          <TableRow>
+            <TableCell>Requester</TableCell>
+            <TableCell>Request</TableCell>
+            <TableCell>Resolver</TableCell>
+            <TableCell>Status</TableCell>
+            <TableCell colSpan={2}>Created</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {rows.map((row) => (
+            <TableRow
+              key={row.id}
+              sx={{
+                bgcolor: ({palette: {highlight}}) =>
+                  row.status == 'APPROVED'
+                    ? highlight.success.main
+                    : row.status == 'REJECTED'
+                      ? highlight.danger.main
+                      : 'inherit',
+              }}>
               <TableCell>
-                <Typography component="h5" variant="h5" color="text.accent">
-                  Access Requests
-                </Typography>
+                {(row.requester?.deleted_at ?? null) != null ? (
+                  <Link
+                    to={`/users/${row.requester?.id ?? ''}`}
+                    sx={{textDecoration: 'line-through', color: 'inherit'}}
+                    component={RouterLink}>
+                    {displayUserName(row.requester)}
+                  </Link>
+                ) : (
+                  <Link
+                    to={`/users/${row.requester?.email.toLowerCase() ?? ''}`}
+                    sx={{textDecoration: 'none', color: 'inherit'}}
+                    component={RouterLink}>
+                    {displayUserName(row.requester)}
+                  </Link>
+                )}
               </TableCell>
               <TableCell>
-                <CreateRequest currentUser={currentUser}></CreateRequest>
-              </TableCell>
-              <TableCell colSpan={4} align="right">
-                <Autocomplete
-                  freeSolo
-                  filterOptions={(x) => x}
-                  options={searchRows.map(
-                    (row) =>
-                      row.id +
-                      ';' +
-                      displayUserName(row.requester) +
-                      ';' +
-                      row.request_ownership +
-                      ';' +
-                      (row.requested_group?.name ?? '') +
-                      ';' +
-                      (row.status ?? '') +
-                      ';' +
-                      displayUserName(row.resolver),
-                  )}
-                  onChange={handleSearchSubmit}
-                  onInputChange={(event, newInputValue) => {
-                    setSearchInput(newInputValue?.split(';')[0] ?? '');
-                  }}
-                  defaultValue={searchQuery}
-                  key={searchQuery}
-                  renderInput={(params) => <TextField {...params} label={'Search' as any} />}
-                  renderOption={(props, option, state) => {
-                    const [id, displayName, ownership, group, status, resolver] = option.split(';');
-                    return (
-                      <li key={id} {...props}>
-                        <Grid container alignItems="center">
-                          <Grid item>
-                            <Box>
-                              {displayName} {ownership == 'true' ? 'ownership of' : 'membership to'} {group}
-                            </Box>
-                            <Typography variant="body2" color="text.secondary">
-                              {status} {status == 'PENDING' || resolver == '' ? '' : 'by ' + resolver}
-                            </Typography>
-                          </Grid>
-                        </Grid>
-                      </li>
-                    );
-                  }}
-                />
-              </TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell>Requester</TableCell>
-              <TableCell>Request</TableCell>
-              <TableCell>Resolver</TableCell>
-              <TableCell>Status</TableCell>
-              <TableCell colSpan={2}>Created</TableCell>
-            </TableRow>
-          </TableHead>
-          <TableBody>
-            {rows.map((row) => (
-              <TableRow
-                key={row.id}
-                sx={{
-                  bgcolor: ({palette: {highlight}}) =>
-                    row.status == 'APPROVED'
-                      ? highlight.success.main
-                      : row.status == 'REJECTED'
-                        ? highlight.danger.main
-                        : 'inherit',
-                }}>
-                <TableCell>
-                  {(row.requester?.deleted_at ?? null) != null ? (
-                    <Link
-                      to={`/users/${row.requester?.id ?? ''}`}
-                      sx={{textDecoration: 'line-through', color: 'inherit'}}
-                      component={RouterLink}>
-                      {displayUserName(row.requester)}
-                    </Link>
-                  ) : (
-                    <Link
-                      to={`/users/${row.requester?.email.toLowerCase() ?? ''}`}
-                      sx={{textDecoration: 'none', color: 'inherit'}}
-                      component={RouterLink}>
-                      {displayUserName(row.requester)}
-                    </Link>
-                  )}
-                </TableCell>
-                <TableCell>
-                  {row.request_ownership ? 'Ownership of ' : 'Membership to '}
-                  {(row.requested_group?.deleted_at ?? null) != null ? (
-                    <Link
-                      to={`/groups/${row.requested_group?.id ?? ''}`}
-                      sx={{textDecoration: 'line-through', color: 'inherit'}}
-                      component={RouterLink}>
-                      {row.requested_group?.name ?? ''}
-                    </Link>
-                  ) : (
-                    <Link
-                      to={`/groups/${row.requested_group?.name ?? ''}`}
-                      sx={{textDecoration: 'none', color: 'inherit'}}
-                      component={RouterLink}>
-                      {row.requested_group?.name ?? ''}
-                    </Link>
-                  )}
-                </TableCell>
-                <TableCell>
-                  {row.resolver == null && row.status != 'PENDING' ? (
-                    'Access'
-                  ) : (row.resolver?.deleted_at ?? null) != null ? (
-                    <Link
-                      to={`/users/${row.resolver?.id ?? ''}`}
-                      sx={{textDecoration: 'line-through', color: 'inherit'}}
-                      component={RouterLink}>
-                      {displayUserName(row.resolver)}
-                    </Link>
-                  ) : (
-                    <Link
-                      to={`/users/${row.resolver?.email.toLowerCase() ?? ''}`}
-                      sx={{textDecoration: 'none', color: 'inherit'}}
-                      component={RouterLink}>
-                      {displayUserName(row.resolver)}
-                    </Link>
-                  )}
-                </TableCell>
-                <TableCell>
+                {row.request_ownership ? 'Ownership of ' : 'Membership to '}
+                {(row.requested_group?.deleted_at ?? null) != null ? (
+                  <Link
+                    to={`/groups/${row.requested_group?.id ?? ''}`}
+                    sx={{textDecoration: 'line-through', color: 'inherit'}}
+                    component={RouterLink}>
+                    {row.requested_group?.name ?? ''}
+                  </Link>
+                ) : (
                   <Link
-                    to={`/requests/${row.id}`}
+                    to={`/groups/${row.requested_group?.name ?? ''}`}
                     sx={{textDecoration: 'none', color: 'inherit'}}
                     component={RouterLink}>
-                    {row.status}
+                    {row.requested_group?.name ?? ''}
                   </Link>
-                </TableCell>
-                <TableCell>
+                )}
+              </TableCell>
+              <TableCell>
+                {row.resolver == null && row.status != 'PENDING' ? (
+                  'Access'
+                ) : (row.resolver?.deleted_at ?? null) != null ? (
                   <Link
-                    to={`/requests/${row.id}`}
+                    to={`/users/${row.resolver?.id ?? ''}`}
+                    sx={{textDecoration: 'line-through', color: 'inherit'}}
+                    component={RouterLink}>
+                    {displayUserName(row.resolver)}
+                  </Link>
+                ) : (
+                  <Link
+                    to={`/users/${row.resolver?.email.toLowerCase() ?? ''}`}
                     sx={{textDecoration: 'none', color: 'inherit'}}
                     component={RouterLink}>
-                    <span title={row.created_at}>{dayjs(row.created_at).startOf('second').fromNow()}</span>
+                    {displayUserName(row.resolver)}
                   </Link>
-                </TableCell>
-                <TableCell>
-                  <Button variant="contained" size="small" to={`/requests/${row.id}`} component={RouterLink}>
-                    View
-                  </Button>
-                </TableCell>
-              </TableRow>
-            ))}
-            {emptyRows > 0 && (
-              <TableRow style={{height: 33 * emptyRows}}>
-                <TableCell colSpan={6} />
-              </TableRow>
-            )}
-          </TableBody>
-          <TableFooter>
-            <TableRow>
-              <TablePagination
-                rowsPerPageOptions={perPage}
-                colSpan={6}
-                count={totalRows}
-                rowsPerPage={rowsPerPage}
-                page={page}
-                SelectProps={{
-                  inputProps: {
-                    'aria-label': 'rows per page',
-                  },
-                  native: true,
-                }}
-                onPageChange={handleChangePage}
-                onRowsPerPageChange={handleChangeRowsPerPage}
-                ActionsComponent={TablePaginationActions}
-              />
+                )}
+              </TableCell>
+              <TableCell>
+                <Link to={`/requests/${row.id}`} sx={{textDecoration: 'none', color: 'inherit'}} component={RouterLink}>
+                  {row.status}
+                </Link>
+              </TableCell>
+              <TableCell>
+                <Link to={`/requests/${row.id}`} sx={{textDecoration: 'none', color: 'inherit'}} component={RouterLink}>
+                  <span title={row.created_at}>{dayjs(row.created_at).startOf('second').fromNow()}</span>
+                </Link>
+              </TableCell>
+              <TableCell>
+                <Button variant="contained" size="small" to={`/requests/${row.id}`} component={RouterLink}>
+                  View
+                </Button>
+              </TableCell>
+            </TableRow>
+          ))}
+          {emptyRows > 0 && (
+            <TableRow style={{height: 33 * emptyRows}}>
+              <TableCell colSpan={6} />
             </TableRow>
-          </TableFooter>
-        </Table>
-      </TableContainer>
-    </React.Fragment>
+          )}
+        </TableBody>
+        <TableFooter>
+          <TableRow>
+            <TablePagination
+              rowsPerPageOptions={perPage}
+              colSpan={6}
+              count={totalRows}
+              rowsPerPage={rowsPerPage}
+              page={page}
+              SelectProps={{
+                inputProps: {
+                  'aria-label': 'rows per page',
+                },
+                native: true,
+              }}
+              onPageChange={handleChangePage}
+              onRowsPerPageChange={handleChangeRowsPerPage}
+              ActionsComponent={TablePaginationActions}
+            />
+          </TableRow>
+        </TableFooter>
+      </Table>
+    </TableContainer>
   );
 }
diff --git a/src/pages/roles/Audit.tsx b/src/pages/roles/Audit.tsx
index ab11885..c832f37 100644
--- a/src/pages/roles/Audit.tsx
+++ b/src/pages/roles/Audit.tsx
@@ -31,6 +31,7 @@ import Loading from '../../components/Loading';
 import Started from '../../components/Started';
 import Ending from '../../components/Ending';
 import TablePaginationActions from '../../components/actions/TablePaginationActions';
+import TableTopBar, {TableTopBarAutocomplete} from '../../components/TableTopBar';
 
 type OrderBy = 'moniker' | 'created_at' | 'ended_at';
 type OrderDirection = 'asc' | 'desc';
@@ -187,205 +188,173 @@ export default function AuditRole() {
   };
 
   return (
-    <React.Fragment>
-      <TableContainer component={Paper}>
-        <Table sx={{minWidth: 650}} size="small" aria-label="groups">
-          <TableHead>
-            <TableRow>
+    <TableContainer component={Paper}>
+      <TableTopBar
+        title={`Role Audit: ${role.name}`}
+        link={role.deleted_at != null ? `/roles/${role.id}` : `/roles/${role.name}`}>
+        <ToggleButtonGroup size="small" exclusive value={filterActive} onChange={handleActiveOrInactive}>
+          <ToggleButton value={true}>Active</ToggleButton>
+          <ToggleButton value={false}>Inactive</ToggleButton>
+        </ToggleButtonGroup>
+        <ToggleButtonGroup size="small" exclusive value={filterOwner} onChange={handleOwnerOrMember}>
+          <ToggleButton value={false}>Member</ToggleButton>
+          <ToggleButton value={true}>Owner</ToggleButton>
+        </ToggleButtonGroup>
+        <TableTopBarAutocomplete
+          options={searchRows.map((row) => row.name)}
+          onChange={handleSearchSubmit}
+          onInputChange={(event, newInputValue) => setSearchInput(newInputValue)}
+          defaultValue={searchQuery}
+        />
+      </TableTopBar>
+      <Table sx={{minWidth: 650}} size="small" aria-label="groups">
+        <TableHead>
+          <TableRow>
+            <TableCell>
+              <TableSortLabel
+                active={orderBy === 'moniker'}
+                direction={orderBy === 'moniker' ? orderDirection : 'desc'}
+                onClick={handleSortChange('moniker')}>
+                Group Name
+              </TableSortLabel>
+            </TableCell>
+            <TableCell>Group Type</TableCell>
+            <TableCell>Member or Owner</TableCell>
+            <TableCell>
+              <TableSortLabel
+                active={orderBy === 'created_at'}
+                direction={orderBy === 'created_at' ? orderDirection : 'desc'}
+                onClick={handleSortChange('created_at')}>
+                Started
+              </TableSortLabel>
+            </TableCell>
+            <TableCell>Added by</TableCell>
+            <TableCell>
+              <TableSortLabel
+                active={orderBy === 'ended_at'}
+                direction={orderBy === 'ended_at' ? orderDirection : 'desc'}
+                onClick={handleSortChange('ended_at')}>
+                Ending
+              </TableSortLabel>
+            </TableCell>
+            <TableCell>Removed by</TableCell>
+            <TableCell align="center">Justification</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {rows.map((row) => (
+            <TableRow
+              key={row.id}
+              sx={{
+                bgcolor: ({palette: {highlight}}) =>
+                  row.ended_at == null || dayjs().isBefore(dayjs(row.ended_at))
+                    ? highlight.success.main
+                    : highlight.danger.main,
+              }}>
               <TableCell>
-                <Typography component="h5" variant="h5" color="text.accent">
-                  {(role.deleted_at ?? null) != null ? (
-                    <Link
-                      to={`/roles/${role.id}`}
-                      sx={{textDecoration: 'line-through', color: 'inherit'}}
-                      component={RouterLink}>
-                      {role.name}
-                    </Link>
-                  ) : (
-                    <Link
-                      to={`/roles/${role.name}`}
-                      sx={{textDecoration: 'none', color: 'inherit'}}
-                      component={RouterLink}>
-                      {role.name}
-                    </Link>
-                  )}{' '}
-                  Role Audit
-                </Typography>
+                {(row.group?.deleted_at ?? null) != null ? (
+                  <Link
+                    to={`/groups/${row.group?.id ?? ''}`}
+                    sx={{textDecoration: 'line-through', color: 'inherit'}}
+                    component={RouterLink}>
+                    {row.group?.name ?? ''}
+                  </Link>
+                ) : (
+                  <Link
+                    to={`/groups/${row.group?.name ?? ''}`}
+                    sx={{textDecoration: 'none', color: 'inherit'}}
+                    component={RouterLink}>
+                    {row.group?.name ?? ''}
+                  </Link>
+                )}
               </TableCell>
               <TableCell>
-                <ToggleButtonGroup exclusive value={filterActive} onChange={handleActiveOrInactive}>
-                  <ToggleButton value={true}>Active</ToggleButton>
-                  <ToggleButton value={false}>Inactive</ToggleButton>
-                </ToggleButtonGroup>
-              </TableCell>
-              <TableCell colSpan={2}>
-                <ToggleButtonGroup exclusive value={filterOwner} onChange={handleOwnerOrMember}>
-                  <ToggleButton value={false}>Member</ToggleButton>
-                  <ToggleButton value={true}>Owner</ToggleButton>
-                </ToggleButtonGroup>
+                {(row.group?.deleted_at ?? null) != null ? (
+                  displayGroupType(row.group)
+                ) : (
+                  <Link
+                    to={`/groups/${row.group?.name ?? ''}`}
+                    sx={{textDecoration: 'none', color: 'inherit'}}
+                    component={RouterLink}>
+                    {displayGroupType(row.group)}
+                  </Link>
+                )}
               </TableCell>
-              <TableCell align="right" colSpan={4}>
-                <Autocomplete
-                  freeSolo
-                  filterOptions={(x) => x}
-                  options={searchRows.map((row) => row.name)}
-                  onChange={handleSearchSubmit}
-                  onInputChange={(event, newInputValue) => setSearchInput(newInputValue)}
-                  defaultValue={searchQuery}
-                  key={searchQuery}
-                  renderInput={(params) => <TextField {...params} label={'Search' as any} />}
-                />
-              </TableCell>
-            </TableRow>
-            <TableRow>
+              <TableCell>{row.is_owner ? 'Owner' : 'Member'}</TableCell>
               <TableCell>
-                <TableSortLabel
-                  active={orderBy === 'moniker'}
-                  direction={orderBy === 'moniker' ? orderDirection : 'desc'}
-                  onClick={handleSortChange('moniker')}>
-                  Group Name
-                </TableSortLabel>
+                <Started memberships={[row]} />
               </TableCell>
-              <TableCell>Group Type</TableCell>
-              <TableCell>Member or Owner</TableCell>
               <TableCell>
-                <TableSortLabel
-                  active={orderBy === 'created_at'}
-                  direction={orderBy === 'created_at' ? orderDirection : 'desc'}
-                  onClick={handleSortChange('created_at')}>
-                  Started
-                </TableSortLabel>
+                {(row.created_actor?.deleted_at ?? null) != null ? (
+                  <Link
+                    to={`/users/${row.created_actor?.id ?? ''}`}
+                    sx={{textDecoration: 'line-through', color: 'inherit'}}
+                    component={RouterLink}>
+                    {displayUserName(row.created_actor)}
+                  </Link>
+                ) : (
+                  <Link
+                    to={`/users/${(row.created_actor?.email ?? '').toLowerCase()}`}
+                    sx={{textDecoration: 'none', color: 'inherit'}}
+                    component={RouterLink}>
+                    {displayUserName(row.created_actor)}
+                  </Link>
+                )}
               </TableCell>
-              <TableCell>Added by</TableCell>
               <TableCell>
-                <TableSortLabel
-                  active={orderBy === 'ended_at'}
-                  direction={orderBy === 'ended_at' ? orderDirection : 'desc'}
-                  onClick={handleSortChange('ended_at')}>
-                  Ending
-                </TableSortLabel>
+                <Ending memberships={[row]} />
               </TableCell>
-              <TableCell>Removed by</TableCell>
-              <TableCell align="center">Justification</TableCell>
-            </TableRow>
-          </TableHead>
-          <TableBody>
-            {rows.map((row) => (
-              <TableRow
-                key={row.id}
-                sx={{
-                  bgcolor: ({palette: {highlight}}) =>
-                    row.ended_at == null || dayjs().isBefore(dayjs(row.ended_at))
-                      ? highlight.success.main
-                      : highlight.danger.main,
-                }}>
-                <TableCell>
-                  {(row.group?.deleted_at ?? null) != null ? (
-                    <Link
-                      to={`/groups/${row.group?.id ?? ''}`}
-                      sx={{textDecoration: 'line-through', color: 'inherit'}}
-                      component={RouterLink}>
-                      {row.group?.name ?? ''}
-                    </Link>
-                  ) : (
-                    <Link
-                      to={`/groups/${row.group?.name ?? ''}`}
-                      sx={{textDecoration: 'none', color: 'inherit'}}
-                      component={RouterLink}>
-                      {row.group?.name ?? ''}
-                    </Link>
-                  )}
-                </TableCell>
-                <TableCell>
-                  {(row.group?.deleted_at ?? null) != null ? (
-                    displayGroupType(row.group)
-                  ) : (
-                    <Link
-                      to={`/groups/${row.group?.name ?? ''}`}
-                      sx={{textDecoration: 'none', color: 'inherit'}}
-                      component={RouterLink}>
-                      {displayGroupType(row.group)}
-                    </Link>
-                  )}
-                </TableCell>
-                <TableCell>{row.is_owner ? 'Owner' : 'Member'}</TableCell>
-                <TableCell>
-                  <Started memberships={[row]} />
-                </TableCell>
-                <TableCell>
-                  {(row.created_actor?.deleted_at ?? null) != null ? (
+              <TableCell>
+                {row.ended_at != null && dayjs().isAfter(dayjs(row.ended_at)) ? (
+                  (row.ended_actor?.deleted_at ?? null) != null ? (
                     <Link
-                      to={`/users/${row.created_actor?.id ?? ''}`}
+                      to={`/users/${row.ended_actor?.id ?? ''}`}
                       sx={{textDecoration: 'line-through', color: 'inherit'}}
                       component={RouterLink}>
-                      {displayUserName(row.created_actor)}
+                      {displayUserName(row.ended_actor)}
                     </Link>
                   ) : (
                     <Link
-                      to={`/users/${(row.created_actor?.email ?? '').toLowerCase()}`}
+                      to={`/users/${(row.ended_actor?.email ?? '').toLowerCase()}`}
                       sx={{textDecoration: 'none', color: 'inherit'}}
                       component={RouterLink}>
-                      {displayUserName(row.created_actor)}
+                      {displayUserName(row.ended_actor)}
                     </Link>
-                  )}
-                </TableCell>
-                <TableCell>
-                  <Ending memberships={[row]} />
-                </TableCell>
-                <TableCell>
-                  {row.ended_at != null && dayjs().isAfter(dayjs(row.ended_at)) ? (
-                    (row.ended_actor?.deleted_at ?? null) != null ? (
-                      <Link
-                        to={`/users/${row.ended_actor?.id ?? ''}`}
-                        sx={{textDecoration: 'line-through', color: 'inherit'}}
-                        component={RouterLink}>
-                        {displayUserName(row.ended_actor)}
-                      </Link>
-                    ) : (
-                      <Link
-                        to={`/users/${(row.ended_actor?.email ?? '').toLowerCase()}`}
-                        sx={{textDecoration: 'none', color: 'inherit'}}
-                        component={RouterLink}>
-                        {displayUserName(row.ended_actor)}
-                      </Link>
-                    )
-                  ) : (
-                    ''
-                  )}
-                </TableCell>
-                <TableCell>
-                  {row.created_reason ? <CreatedReason created_reason={row.created_reason} /> : null}
-                </TableCell>
-              </TableRow>
-            ))}
-            {emptyRows > 0 && (
-              <TableRow style={{height: 33 * emptyRows}}>
-                <TableCell colSpan={7} />
-              </TableRow>
-            )}
-          </TableBody>
-          <TableFooter>
-            <TableRow>
-              <TablePagination
-                rowsPerPageOptions={[5, 10, 20]}
-                colSpan={7}
-                count={totalRows}
-                rowsPerPage={rowsPerPage}
-                page={page}
-                SelectProps={{
-                  inputProps: {
-                    'aria-label': 'rows per page',
-                  },
-                  native: true,
-                }}
-                onPageChange={handleChangePage}
-                onRowsPerPageChange={handleChangeRowsPerPage}
-                ActionsComponent={TablePaginationActions}
-              />
+                  )
+                ) : (
+                  ''
+                )}
+              </TableCell>
+              <TableCell>{row.created_reason ? <CreatedReason created_reason={row.created_reason} /> : null}</TableCell>
+            </TableRow>
+          ))}
+          {emptyRows > 0 && (
+            <TableRow style={{height: 33 * emptyRows}}>
+              <TableCell colSpan={7} />
             </TableRow>
-          </TableFooter>
-        </Table>
-      </TableContainer>
-    </React.Fragment>
+          )}
+        </TableBody>
+        <TableFooter>
+          <TableRow>
+            <TablePagination
+              rowsPerPageOptions={[5, 10, 20]}
+              colSpan={7}
+              count={totalRows}
+              rowsPerPage={rowsPerPage}
+              page={page}
+              SelectProps={{
+                inputProps: {
+                  'aria-label': 'rows per page',
+                },
+                native: true,
+              }}
+              onPageChange={handleChangePage}
+              onRowsPerPageChange={handleChangeRowsPerPage}
+              ActionsComponent={TablePaginationActions}
+            />
+          </TableRow>
+        </TableFooter>
+      </Table>
+    </TableContainer>
   );
 }
diff --git a/src/pages/roles/Expiring.tsx b/src/pages/roles/Expiring.tsx
index 1acbb5b..0005a61 100644
--- a/src/pages/roles/Expiring.tsx
+++ b/src/pages/roles/Expiring.tsx
@@ -32,6 +32,7 @@ import Loading from '../../components/Loading';
 import Started from '../../components/Started';
 import TablePaginationActions from '../../components/actions/TablePaginationActions';
 import {displayUserName, perPage} from '../../helpers';
+import TableTopBar, {TableTopBarAutocomplete} from '../../components/TableTopBar';
 
 type OrderBy = 'moniker' | 'ended_at';
 type OrderDirection = 'asc' | 'desc';
@@ -209,211 +210,192 @@ export default function ExpiringRoless() {
   };
 
   return (
-    <React.Fragment>
-      <TableContainer component={Paper}>
-        <Table sx={{minWidth: 650}} size="small" aria-label="roles">
-          <TableHead>
-            <TableRow>
+    <TableContainer component={Paper}>
+      <TableTopBar title="Expiring Roles">
+        <BulkRenewal rows={rows.filter((row) => canManageGroup(currentUser, row.group))} />
+        <ToggleButtonGroup
+          size="small"
+          exclusive
+          value={filterActive}
+          onChange={handleActiveOrInactive}
+          defaultValue={'true'}>
+          <ToggleButton value={true}>Active</ToggleButton>
+          <ToggleButton value={false}>Inactive</ToggleButton>
+        </ToggleButtonGroup>
+        {ownerId ? (
+          <ToggleButtonGroup
+            size="small"
+            exclusive
+            value={filterAppOwnership}
+            onChange={handleDirectOrViaAppOwnership}
+            defaultValue={'false'}>
+            <ToggleButton value={false}>
+              <Tooltip title="Includes all groups directly owned and owned via app ownership where there are no direct group owners">
+                <span>Default Owner</span>
+              </Tooltip>
+            </ToggleButton>
+            <ToggleButton value={true}>
+              <Tooltip title="All groups owned directly and via app ownership">
+                <span>All Owned</span>
+              </Tooltip>
+            </ToggleButton>
+          </ToggleButtonGroup>
+        ) : null}
+        <DateRangePicker
+          startDate={startDate}
+          setStartDate={handleSetStartDate}
+          endDate={endDate}
+          setEndDate={handleSetEndDate}
+          datesPicked={datesPicked}
+          setDatesPicked={setDatesPicked}
+          slots={{
+            textField: (textFieldProps) => <TextField {...textFieldProps} />,
+          }}
+        />
+        <TableTopBarAutocomplete
+          options={searchRows.map((row) => row.name)}
+          onChange={handleSearchSubmit}
+          onInputChange={(event, newInputValue) => setSearchInput(newInputValue)}
+          defaultValue={searchQuery}
+        />
+      </TableTopBar>
+      <Table sx={{minWidth: 650}} size="small" aria-label="roles">
+        <TableHead>
+          <TableRow>
+            <TableCell>Role Name</TableCell>
+            <TableCell>
+              <TableSortLabel
+                active={orderBy === 'moniker'}
+                direction={orderBy === 'moniker' ? orderDirection : 'desc'}
+                onClick={handleSortChange('moniker')}>
+                Group Name
+              </TableSortLabel>
+            </TableCell>
+            <TableCell>Group Type</TableCell>
+            <TableCell>Member or Owner</TableCell>
+            <TableCell>
+              <TableSortLabel>Started</TableSortLabel>
+            </TableCell>
+            <TableCell>Added by</TableCell>
+            <TableCell colSpan={2}>
+              <TableSortLabel
+                active={orderBy === 'ended_at'}
+                direction={orderBy === 'ended_at' ? orderDirection : 'asc'}
+                onClick={handleSortChange('ended_at')}>
+                Ending
+              </TableSortLabel>
+            </TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {rows.map((row) => (
+            <TableRow
+              key={row.id}
+              sx={{
+                bgcolor: ({palette: {highlight}}) =>
+                  dayjs(row.ended_at).isAfter(dayjs()) && dayjs(row.ended_at).isBefore(dayjs().add(7, 'day'))
+                    ? highlight.warning.main
+                    : dayjs(row.ended_at).isBefore(dayjs())
+                      ? highlight.danger.main
+                      : null,
+              }}>
               <TableCell>
-                <Typography component="h5" variant="h5" color="text.accent">
-                  Expiring Roles
-                </Typography>
+                {(row.group?.deleted_at ?? null) != null ? (
+                  <Link
+                    to={`/roles/${row.role_group?.id ?? ''}`}
+                    sx={{textDecoration: 'line-through', color: 'inherit'}}
+                    component={RouterLink}>
+                    {row.role_group?.name ?? ''}
+                  </Link>
+                ) : (
+                  <Link
+                    to={`/roles/${row.role_group?.name ?? ''}`}
+                    sx={{textDecoration: 'none', color: 'inherit'}}
+                    component={RouterLink}>
+                    {row.role_group?.name ?? ''}
+                  </Link>
+                )}
               </TableCell>
               <TableCell>
-                <BulkRenewal rows={rows.filter((row) => canManageGroup(currentUser, row.group))} />
+                {(row.group?.deleted_at ?? null) != null ? (
+                  <Link
+                    to={`/groups/${row.group?.id ?? ''}`}
+                    sx={{textDecoration: 'line-through', color: 'inherit'}}
+                    component={RouterLink}>
+                    {row.group?.name ?? ''}
+                  </Link>
+                ) : (
+                  <Link
+                    to={`/groups/${row.group?.name ?? ''}`}
+                    sx={{textDecoration: 'none', color: 'inherit'}}
+                    component={RouterLink}>
+                    {row.group?.name ?? ''}
+                  </Link>
+                )}
               </TableCell>
               <TableCell>
-                <ToggleButtonGroup
-                  exclusive
-                  value={filterActive}
-                  onChange={handleActiveOrInactive}
-                  defaultValue={'true'}>
-                  <ToggleButton value={true}>Active</ToggleButton>
-                  <ToggleButton value={false}>Inactive</ToggleButton>
-                </ToggleButtonGroup>
-              </TableCell>
-              {ownerId ? (
-                <TableCell>
-                  <ToggleButtonGroup
-                    exclusive
-                    value={filterAppOwnership}
-                    onChange={handleDirectOrViaAppOwnership}
-                    defaultValue={'false'}>
-                    <ToggleButton value={false}>
-                      <Tooltip title="Includes all groups directly owned and owned via app ownership where there are no direct group owners">
-                        <span>Default Owner</span>
-                      </Tooltip>
-                    </ToggleButton>
-                    <ToggleButton value={true}>
-                      <Tooltip title="All groups owned directly and via app ownership">
-                        <span>All Owned</span>
-                      </Tooltip>
-                    </ToggleButton>
-                  </ToggleButtonGroup>
-                </TableCell>
-              ) : null}
-              <TableCell colSpan={2}>
-                <DateRangePicker
-                  startDate={startDate}
-                  setStartDate={handleSetStartDate}
-                  endDate={endDate}
-                  setEndDate={handleSetEndDate}
-                  datesPicked={datesPicked}
-                  setDatesPicked={setDatesPicked}
-                  slots={{
-                    textField: (textFieldProps) => <TextField {...textFieldProps} />,
-                  }}
-                />
-              </TableCell>
-              <TableCell align="right" colSpan={3}>
-                <Autocomplete
-                  freeSolo
-                  filterOptions={(x) => x}
-                  options={searchRows.map((row) => row.name)}
-                  onChange={handleSearchSubmit}
-                  onInputChange={(event, newInputValue) => setSearchInput(newInputValue)}
-                  defaultValue={searchQuery}
-                  key={searchQuery}
-                  renderInput={(params) => <TextField {...params} label={'Search' as any} />}
-                />
+                {row.group?.type == 'okta_group' ? 'Group' : 'app_group' ? 'App Group' : 'Role Group'}
               </TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell>Role Name</TableCell>
+              <TableCell>{row.is_owner ? 'Owner' : 'Member'}</TableCell>
               <TableCell>
-                <TableSortLabel
-                  active={orderBy === 'moniker'}
-                  direction={orderBy === 'moniker' ? orderDirection : 'desc'}
-                  onClick={handleSortChange('moniker')}>
-                  Group Name
-                </TableSortLabel>
+                <Started memberships={[row]} />
               </TableCell>
-              <TableCell>Group Type</TableCell>
-              <TableCell>Member or Owner</TableCell>
               <TableCell>
-                <TableSortLabel>Started</TableSortLabel>
+                {(row.created_actor?.deleted_at ?? null) != null ? (
+                  <Link
+                    to={`/users/${row.created_actor?.id ?? ''}`}
+                    sx={{textDecoration: 'line-through', color: 'inherit'}}
+                    component={RouterLink}>
+                    {displayUserName(row.created_actor)}
+                  </Link>
+                ) : (
+                  <Link
+                    to={`/users/${(row.created_actor?.email ?? '').toLowerCase()}`}
+                    sx={{textDecoration: 'none', color: 'inherit'}}
+                    component={RouterLink}>
+                    {displayUserName(row.created_actor)}
+                  </Link>
+                )}
               </TableCell>
-              <TableCell>Added by</TableCell>
-              <TableCell colSpan={2}>
-                <TableSortLabel
-                  active={orderBy === 'ended_at'}
-                  direction={orderBy === 'ended_at' ? orderDirection : 'asc'}
-                  onClick={handleSortChange('ended_at')}>
-                  Ending
-                </TableSortLabel>
+              <TableCell>
+                <Ending memberships={[row]} />
               </TableCell>
-            </TableRow>
-          </TableHead>
-          <TableBody>
-            {rows.map((row) => (
-              <TableRow
-                key={row.id}
-                sx={{
-                  bgcolor: ({palette: {highlight}}) =>
-                    dayjs(row.ended_at).isAfter(dayjs()) && dayjs(row.ended_at).isBefore(dayjs().add(7, 'day'))
-                      ? highlight.warning.main
-                      : dayjs(row.ended_at).isBefore(dayjs())
-                        ? highlight.danger.main
-                        : null,
-                }}>
-                <TableCell>
-                  {(row.group?.deleted_at ?? null) != null ? (
-                    <Link
-                      to={`/roles/${row.role_group?.id ?? ''}`}
-                      sx={{textDecoration: 'line-through', color: 'inherit'}}
-                      component={RouterLink}>
-                      {row.role_group?.name ?? ''}
-                    </Link>
-                  ) : (
-                    <Link
-                      to={`/roles/${row.role_group?.name ?? ''}`}
-                      sx={{textDecoration: 'none', color: 'inherit'}}
-                      component={RouterLink}>
-                      {row.role_group?.name ?? ''}
-                    </Link>
-                  )}
-                </TableCell>
-                <TableCell>
-                  {(row.group?.deleted_at ?? null) != null ? (
-                    <Link
-                      to={`/groups/${row.group?.id ?? ''}`}
-                      sx={{textDecoration: 'line-through', color: 'inherit'}}
-                      component={RouterLink}>
-                      {row.group?.name ?? ''}
-                    </Link>
-                  ) : (
-                    <Link
-                      to={`/groups/${row.group?.name ?? ''}`}
-                      sx={{textDecoration: 'none', color: 'inherit'}}
-                      component={RouterLink}>
-                      {row.group?.name ?? ''}
-                    </Link>
-                  )}
-                </TableCell>
-                <TableCell>
-                  {row.group?.type == 'okta_group' ? 'Group' : 'app_group' ? 'App Group' : 'Role Group'}
-                </TableCell>
-                <TableCell>{row.is_owner ? 'Owner' : 'Member'}</TableCell>
-                <TableCell>
-                  <Started memberships={[row]} />
+              {ownerId == '@me' || canManageGroup(currentUser, row.group) ? (
+                <TableCell align="center">
+                  <BulkRenewal rows={rows.filter((row) => canManageGroup(currentUser, row.group))} select={row.id} />
                 </TableCell>
-                <TableCell>
-                  {(row.created_actor?.deleted_at ?? null) != null ? (
-                    <Link
-                      to={`/users/${row.created_actor?.id ?? ''}`}
-                      sx={{textDecoration: 'line-through', color: 'inherit'}}
-                      component={RouterLink}>
-                      {displayUserName(row.created_actor)}
-                    </Link>
-                  ) : (
-                    <Link
-                      to={`/users/${(row.created_actor?.email ?? '').toLowerCase()}`}
-                      sx={{textDecoration: 'none', color: 'inherit'}}
-                      component={RouterLink}>
-                      {displayUserName(row.created_actor)}
-                    </Link>
-                  )}
-                </TableCell>
-                <TableCell>
-                  <Ending memberships={[row]} />
-                </TableCell>
-                {ownerId == '@me' || canManageGroup(currentUser, row.group) ? (
-                  <TableCell align="center">
-                    <BulkRenewal rows={rows.filter((row) => canManageGroup(currentUser, row.group))} select={row.id} />
-                  </TableCell>
-                ) : (
-                  <TableCell></TableCell>
-                )}
-              </TableRow>
-            ))}
-            {emptyRows > 0 && (
-              <TableRow style={{height: 33 * emptyRows}}>
-                <TableCell colSpan={9} />
-              </TableRow>
-            )}
-          </TableBody>
-          <TableFooter>
-            <TableRow>
-              <TablePagination
-                rowsPerPageOptions={perPage}
-                colSpan={9}
-                count={totalRows}
-                rowsPerPage={rowsPerPage}
-                page={page}
-                SelectProps={{
-                  inputProps: {
-                    'aria-label': 'rows per page',
-                  },
-                  native: true,
-                }}
-                onPageChange={handleChangePage}
-                onRowsPerPageChange={handleChangeRowsPerPage}
-                ActionsComponent={TablePaginationActions}
-              />
+              ) : (
+                <TableCell></TableCell>
+              )}
+            </TableRow>
+          ))}
+          {emptyRows > 0 && (
+            <TableRow style={{height: 33 * emptyRows}}>
+              <TableCell colSpan={9} />
             </TableRow>
-          </TableFooter>
-        </Table>
-      </TableContainer>
-    </React.Fragment>
+          )}
+        </TableBody>
+        <TableFooter>
+          <TableRow>
+            <TablePagination
+              rowsPerPageOptions={perPage}
+              colSpan={9}
+              count={totalRows}
+              rowsPerPage={rowsPerPage}
+              page={page}
+              SelectProps={{
+                inputProps: {
+                  'aria-label': 'rows per page',
+                },
+                native: true,
+              }}
+              onPageChange={handleChangePage}
+              onRowsPerPageChange={handleChangeRowsPerPage}
+              ActionsComponent={TablePaginationActions}
+            />
+          </TableRow>
+        </TableFooter>
+      </Table>
+    </TableContainer>
   );
 }
diff --git a/src/pages/roles/List.tsx b/src/pages/roles/List.tsx
index 8fbbbb5..37607a9 100644
--- a/src/pages/roles/List.tsx
+++ b/src/pages/roles/List.tsx
@@ -24,6 +24,7 @@ import CreateUpdateGroup from '../groups/CreateUpdate';
 import {perPage} from '../../helpers';
 import {useGetRoles} from '../../api/apiComponents';
 import TablePaginationActions from '../../components/actions/TablePaginationActions';
+import TableTopBar, {TableTopBarAutocomplete} from '../../components/TableTopBar';
 
 export default function ListRoles() {
   const navigate = useNavigate();
@@ -105,102 +106,70 @@ export default function ListRoles() {
   };
 
   return (
-    <React.Fragment>
-      <TableContainer component={Paper}>
-        <Table sx={{minWidth: 650}} size="small" aria-label="roles">
-          <TableHead>
-            <TableRow>
+    <TableContainer component={Paper}>
+      <TableTopBar title="Roles">
+        <Button variant="contained" onClick={() => navigate('/tags/')} endIcon={<SellIcon />}>
+          Tags
+        </Button>
+        <CreateUpdateGroup defaultGroupType="role_group" currentUser={currentUser}></CreateUpdateGroup>
+        <TableTopBarAutocomplete
+          options={searchRows.map((row) => row.name)}
+          onChange={handleSearchSubmit}
+          onInputChange={(event, newInputValue) => setSearchInput(newInputValue)}
+          defaultValue={searchQuery}
+        />
+      </TableTopBar>
+      <Table sx={{minWidth: 650}} size="small" aria-label="roles">
+        <TableHead>
+          <TableRow>
+            <TableCell>Name</TableCell>
+            <TableCell>Description</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {rows.map((row) => (
+            <TableRow key={row.id}>
               <TableCell>
-                <Typography component="h5" variant="h5" color="text.accent">
-                  Roles
-                </Typography>
+                <Link to={`/roles/${row.name}`} sx={{textDecoration: 'none', color: 'inherit'}} component={RouterLink}>
+                  {row.name}
+                </Link>
               </TableCell>
-              <TableCell align="right">
-                <Box
-                  sx={{
-                    display: 'flex',
-                    justifyContent: 'flex-start',
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                  }}>
-                  <Box>
-                    <Button variant="contained" onClick={() => navigate('/tags/')} endIcon={<SellIcon />}>
-                      Tags
-                    </Button>
-                  </Box>
-                  <Box sx={{mx: 2, width: '210px'}}>
-                    <CreateUpdateGroup defaultGroupType="role_group" currentUser={currentUser}></CreateUpdateGroup>
-                  </Box>
-                  <Autocomplete
-                    fullWidth
-                    freeSolo
-                    filterOptions={(x) => x}
-                    options={searchRows.map((row) => row.name)}
-                    onChange={handleSearchSubmit}
-                    onInputChange={(event, newInputValue) => setSearchInput(newInputValue)}
-                    defaultValue={searchQuery}
-                    key={searchQuery}
-                    renderInput={(params) => <TextField {...params} label={'Search' as any} />}
-                  />
-                </Box>
+              <TableCell>
+                <Link to={`/roles/${row.name}`} sx={{textDecoration: 'none', color: 'inherit'}} component={RouterLink}>
+                  {(row.description?.length ?? 0) > 115
+                    ? row.description?.substring(0, 114) + '...' ?? ''
+                    : row.description}
+                </Link>
               </TableCell>
             </TableRow>
-            <TableRow>
-              <TableCell>Name</TableCell>
-              <TableCell>Description</TableCell>
-            </TableRow>
-          </TableHead>
-          <TableBody>
-            {rows.map((row) => (
-              <TableRow key={row.id}>
-                <TableCell>
-                  <Link
-                    to={`/roles/${row.name}`}
-                    sx={{textDecoration: 'none', color: 'inherit'}}
-                    component={RouterLink}>
-                    {row.name}
-                  </Link>
-                </TableCell>
-                <TableCell>
-                  <Link
-                    to={`/roles/${row.name}`}
-                    sx={{textDecoration: 'none', color: 'inherit'}}
-                    component={RouterLink}>
-                    {(row.description?.length ?? 0) > 115
-                      ? row.description?.substring(0, 114) + '...' ?? ''
-                      : row.description}
-                  </Link>
-                </TableCell>
-              </TableRow>
-            ))}
-            {emptyRows > 0 && (
-              <TableRow style={{height: 33 * emptyRows}}>
-                <TableCell colSpan={2} />
-              </TableRow>
-            )}
-          </TableBody>
-          <TableFooter>
-            <TableRow>
-              <TablePagination
-                rowsPerPageOptions={perPage}
-                colSpan={3}
-                count={totalRows}
-                rowsPerPage={rowsPerPage}
-                page={page}
-                SelectProps={{
-                  inputProps: {
-                    'aria-label': 'rows per page',
-                  },
-                  native: true,
-                }}
-                onPageChange={handleChangePage}
-                onRowsPerPageChange={handleChangeRowsPerPage}
-                ActionsComponent={TablePaginationActions}
-              />
+          ))}
+          {emptyRows > 0 && (
+            <TableRow style={{height: 33 * emptyRows}}>
+              <TableCell colSpan={2} />
             </TableRow>
-          </TableFooter>
-        </Table>
-      </TableContainer>
-    </React.Fragment>
+          )}
+        </TableBody>
+        <TableFooter>
+          <TableRow>
+            <TablePagination
+              rowsPerPageOptions={perPage}
+              colSpan={3}
+              count={totalRows}
+              rowsPerPage={rowsPerPage}
+              page={page}
+              SelectProps={{
+                inputProps: {
+                  'aria-label': 'rows per page',
+                },
+                native: true,
+              }}
+              onPageChange={handleChangePage}
+              onRowsPerPageChange={handleChangeRowsPerPage}
+              ActionsComponent={TablePaginationActions}
+            />
+          </TableRow>
+        </TableFooter>
+      </Table>
+    </TableContainer>
   );
 }
diff --git a/src/pages/tags/List.tsx b/src/pages/tags/List.tsx
index 97a2577..4e9db00 100644
--- a/src/pages/tags/List.tsx
+++ b/src/pages/tags/List.tsx
@@ -22,6 +22,7 @@ import CreateUpdateTag from './CreateUpdate';
 import {perPage} from '../../helpers';
 import {useGetTags} from '../../api/apiComponents';
 import TablePaginationActions from '../../components/actions/TablePaginationActions';
+import TableTopBar, {TableTopBarAutocomplete} from '../../components/TableTopBar';
 
 export default function ListTags() {
   const navigate = useNavigate();
@@ -103,91 +104,67 @@ export default function ListTags() {
   };
 
   return (
-    <React.Fragment>
-      <TableContainer component={Paper}>
-        <Table sx={{minWidth: 650}} size="small" aria-label="apps">
-          <TableHead>
-            <TableRow>
+    <TableContainer component={Paper}>
+      <TableTopBar title="Tags">
+        <CreateUpdateTag currentUser={currentUser}></CreateUpdateTag>
+        <TableTopBarAutocomplete
+          options={searchRows.map((row) => row.name)}
+          onChange={handleSearchSubmit}
+          onInputChange={(event, newInputValue) => setSearchInput(newInputValue)}
+          defaultValue={searchQuery}
+        />
+      </TableTopBar>
+      <Table sx={{minWidth: 650}} size="small" aria-label="apps">
+        <TableHead>
+          <TableRow>
+            <TableCell>Name</TableCell>
+            <TableCell>Description</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {rows.map((row) => (
+            <TableRow key={row.id}>
               <TableCell>
-                <Typography component="h5" variant="h5" color="text.accent">
-                  Tags
-                </Typography>
+                <Link to={`/tags/${row.name}`} sx={{textDecoration: 'none', color: 'inherit'}} component={RouterLink}>
+                  {row.name}
+                </Link>
               </TableCell>
-              <TableCell align="right">
-                <Box
-                  sx={{
-                    display: 'flex',
-                    justifyContent: 'flex-start',
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                  }}>
-                  <Box sx={{marginRight: 2, width: '200px'}}>
-                    <CreateUpdateTag currentUser={currentUser}></CreateUpdateTag>
-                  </Box>
-                  <Autocomplete
-                    fullWidth
-                    freeSolo
-                    filterOptions={(x) => x}
-                    options={searchRows.map((row) => row.name)}
-                    onChange={handleSearchSubmit}
-                    onInputChange={(event, newInputValue) => setSearchInput(newInputValue)}
-                    defaultValue={searchQuery}
-                    key={searchQuery}
-                    renderInput={(params) => <TextField {...params} label={'Search' as any} />}
-                  />
-                </Box>
+              <TableCell>
+                <Link to={`/tags/${row.name}`} sx={{textDecoration: 'none', color: 'inherit'}} component={RouterLink}>
+                  {(row.description ?? '').length > 115
+                    ? row.description?.substring(0, 114) + '...'
+                    : row.description ?? ''}
+                </Link>
               </TableCell>
             </TableRow>
-            <TableRow>
-              <TableCell>Name</TableCell>
-              <TableCell>Description</TableCell>
-            </TableRow>
-          </TableHead>
-          <TableBody>
-            {rows.map((row) => (
-              <TableRow key={row.id}>
-                <TableCell>
-                  <Link to={`/tags/${row.name}`} sx={{textDecoration: 'none', color: 'inherit'}} component={RouterLink}>
-                    {row.name}
-                  </Link>
-                </TableCell>
-                <TableCell>
-                  <Link to={`/tags/${row.name}`} sx={{textDecoration: 'none', color: 'inherit'}} component={RouterLink}>
-                    {(row.description ?? '').length > 115
-                      ? row.description?.substring(0, 114) + '...'
-                      : row.description ?? ''}
-                  </Link>
-                </TableCell>
-              </TableRow>
-            ))}
-            {emptyRows > 0 && (
-              <TableRow style={{height: 33 * emptyRows}}>
-                <TableCell colSpan={6} />
-              </TableRow>
-            )}
-          </TableBody>
-          <TableFooter>
-            <TableRow>
-              <TablePagination
-                rowsPerPageOptions={perPage}
-                colSpan={3}
-                count={totalRows}
-                rowsPerPage={rowsPerPage}
-                page={page}
-                SelectProps={{
-                  inputProps: {
-                    'aria-label': 'rows per page',
-                  },
-                  native: true,
-                }}
-                onPageChange={handleChangePage}
-                onRowsPerPageChange={handleChangeRowsPerPage}
-                ActionsComponent={TablePaginationActions}
-              />
+          ))}
+          {emptyRows > 0 && (
+            <TableRow style={{height: 33 * emptyRows}}>
+              <TableCell colSpan={6} />
             </TableRow>
-          </TableFooter>
-        </Table>
-      </TableContainer>
-    </React.Fragment>
+          )}
+        </TableBody>
+        <TableFooter>
+          <TableRow>
+            <TablePagination
+              rowsPerPageOptions={perPage}
+              colSpan={3}
+              count={totalRows}
+              rowsPerPage={rowsPerPage}
+              page={page}
+              SelectProps={{
+                inputProps: {
+                  'aria-label': 'rows per page',
+                },
+                native: true,
+              }}
+              onPageChange={handleChangePage}
+              onRowsPerPageChange={handleChangeRowsPerPage}
+              ActionsComponent={TablePaginationActions}
+            />
+          </TableRow>
+        </TableFooter>
+      </Table>
+    </TableContainer>
   );
 }
diff --git a/src/pages/users/Audit.tsx b/src/pages/users/Audit.tsx
index f3339e0..595fdca 100644
--- a/src/pages/users/Audit.tsx
+++ b/src/pages/users/Audit.tsx
@@ -32,6 +32,7 @@ import Loading from '../../components/Loading';
 import Started from '../../components/Started';
 import Ending from '../../components/Ending';
 import TablePaginationActions from '../../components/actions/TablePaginationActions';
+import TableTopBar, {TableTopBarAutocomplete} from '../../components/TableTopBar';
 
 type OrderBy = 'moniker' | 'created_at' | 'ended_at';
 type OrderDirection = 'asc' | 'desc';
@@ -189,229 +190,199 @@ export default function AuditUser() {
   };
 
   return (
-    <React.Fragment>
-      <TableContainer component={Paper}>
-        <Table sx={{minWidth: 650}} size="small" aria-label="groups">
-          <TableHead>
-            <TableRow>
-              <TableCell colSpan={2}>
-                <Typography component="h5" variant="h5" color="text.accent">
-                  {(user.deleted_at ?? null) != null ? (
-                    <Link
-                      to={`/users/${user.id}`}
-                      sx={{textDecoration: 'line-through', color: 'inherit'}}
-                      component={RouterLink}>
-                      {displayUserName(user)}
-                    </Link>
-                  ) : (
-                    <Link
-                      to={`/users/${user.email.toLowerCase()}`}
-                      sx={{textDecoration: 'none', color: 'inherit'}}
-                      component={RouterLink}>
-                      {displayUserName(user)}
-                    </Link>
-                  )}{' '}
-                  Audit
-                </Typography>
-              </TableCell>
+    <TableContainer component={Paper}>
+      <TableTopBar
+        title={`User Audit: ${displayUserName(user)}`}
+        link={user.deleted_at != null ? `/users/${user.id}` : `/users/${user.email.toLowerCase()}`}>
+        <ToggleButtonGroup size="small" exclusive value={filterOwner} onChange={handleOwnerOrMember}>
+          <ToggleButton value={false}>Member</ToggleButton>
+          <ToggleButton value={true}>Owner</ToggleButton>
+        </ToggleButtonGroup>
+        <ToggleButtonGroup size="small" exclusive value={filterActive} onChange={handleActiveOrInactive}>
+          <ToggleButton value={true}>Active</ToggleButton>
+          <ToggleButton value={false}>Inactive</ToggleButton>
+        </ToggleButtonGroup>
+        <TableTopBarAutocomplete
+          options={searchRows.map((row) => row.name)}
+          onChange={handleSearchSubmit}
+          onInputChange={(event, newInputValue) => setSearchInput(newInputValue)}
+          defaultValue={searchQuery}
+        />
+      </TableTopBar>
+      <Table sx={{minWidth: 650}} size="small" aria-label="groups">
+        <TableHead>
+          <TableRow>
+            <TableCell>
+              <TableSortLabel
+                active={orderBy === 'moniker'}
+                direction={orderBy === 'moniker' ? orderDirection : 'desc'}
+                onClick={handleSortChange('moniker')}>
+                Group Name
+              </TableSortLabel>
+            </TableCell>
+            <TableCell>Group Type</TableCell>
+            <TableCell>Member or Owner</TableCell>
+            <TableCell>Direct or via Role</TableCell>
+            <TableCell>
+              <TableSortLabel
+                active={orderBy === 'created_at'}
+                direction={orderBy === 'created_at' ? orderDirection : 'desc'}
+                onClick={handleSortChange('created_at')}>
+                Started
+              </TableSortLabel>
+            </TableCell>
+            <TableCell>Added by</TableCell>
+            <TableCell>
+              <TableSortLabel
+                active={orderBy === 'ended_at'}
+                direction={orderBy === 'ended_at' ? orderDirection : 'desc'}
+                onClick={handleSortChange('ended_at')}>
+                Ending
+              </TableSortLabel>
+            </TableCell>
+            <TableCell>Removed by</TableCell>
+            <TableCell align="center">Access Request</TableCell>
+            <TableCell align="center">Justification</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {rows.map((row) => (
+            <TableRow
+              key={row.id}
+              sx={{
+                bgcolor: ({palette: {highlight}}) =>
+                  row.ended_at == null || dayjs().isBefore(dayjs(row.ended_at))
+                    ? highlight.success.main
+                    : highlight.danger.main,
+              }}>
               <TableCell>
-                <ToggleButtonGroup exclusive value={filterOwner} onChange={handleOwnerOrMember}>
-                  <ToggleButton value={false}>Member</ToggleButton>
-                  <ToggleButton value={true}>Owner</ToggleButton>
-                </ToggleButtonGroup>
+                {(row.group?.deleted_at ?? null) != null ? (
+                  <Link
+                    to={`/groups/${row.group?.id ?? ''}`}
+                    sx={{textDecoration: 'line-through', color: 'inherit'}}
+                    component={RouterLink}>
+                    {row.group?.name ?? ''}
+                  </Link>
+                ) : (
+                  <Link
+                    to={`/groups/${row.group?.name ?? ''}`}
+                    sx={{textDecoration: 'none', color: 'inherit'}}
+                    component={RouterLink}>
+                    {row.group?.name ?? ''}
+                  </Link>
+                )}
               </TableCell>
-              <TableCell colSpan={2}>
-                <ToggleButtonGroup exclusive value={filterActive} onChange={handleActiveOrInactive}>
-                  <ToggleButton value={true}>Active</ToggleButton>
-                  <ToggleButton value={false}>Inactive</ToggleButton>
-                </ToggleButtonGroup>
+              <TableCell>
+                {(row.group?.deleted_at ?? null) != null ? (
+                  displayGroupType(row.group)
+                ) : (
+                  <Link
+                    to={`/groups/${row.group?.name ?? ''}`}
+                    sx={{textDecoration: 'none', color: 'inherit'}}
+                    component={RouterLink}>
+                    {displayGroupType(row.group)}
+                  </Link>
+                )}
               </TableCell>
-              <TableCell align="right" colSpan={5}>
-                <Autocomplete
-                  freeSolo
-                  filterOptions={(x) => x}
-                  options={searchRows.map((row) => row.name)}
-                  onChange={handleSearchSubmit}
-                  onInputChange={(event, newInputValue) => setSearchInput(newInputValue)}
-                  defaultValue={searchQuery}
-                  key={searchQuery}
-                  renderInput={(params) => <TextField {...params} label={'Search' as any} />}
-                />
+              <TableCell>{row.is_owner ? 'Owner' : 'Member'}</TableCell>
+              <TableCell>
+                {row.role_group_mapping == null ? (
+                  <Chip key="direct" label="Direct" color="primary" />
+                ) : (
+                  <Chip
+                    label={row.role_group_mapping?.role_group?.name}
+                    color="primary"
+                    onClick={() => navigate(`/roles/${row.role_group_mapping?.role_group?.name}`)}
+                  />
+                )}
               </TableCell>
-            </TableRow>
-            <TableRow>
               <TableCell>
-                <TableSortLabel
-                  active={orderBy === 'moniker'}
-                  direction={orderBy === 'moniker' ? orderDirection : 'desc'}
-                  onClick={handleSortChange('moniker')}>
-                  Group Name
-                </TableSortLabel>
+                <Started memberships={[row]} />
               </TableCell>
-              <TableCell>Group Type</TableCell>
-              <TableCell>Member or Owner</TableCell>
-              <TableCell>Direct or via Role</TableCell>
               <TableCell>
-                <TableSortLabel
-                  active={orderBy === 'created_at'}
-                  direction={orderBy === 'created_at' ? orderDirection : 'desc'}
-                  onClick={handleSortChange('created_at')}>
-                  Started
-                </TableSortLabel>
+                {(row.created_actor?.deleted_at ?? null) != null ? (
+                  <Link
+                    to={`/users/${row.created_actor?.id ?? ''}`}
+                    sx={{textDecoration: 'line-through', color: 'inherit'}}
+                    component={RouterLink}>
+                    {displayUserName(row.created_actor)}
+                  </Link>
+                ) : (
+                  <Link
+                    to={`/users/${(row.created_actor?.email ?? '').toLowerCase()}`}
+                    sx={{textDecoration: 'none', color: 'inherit'}}
+                    component={RouterLink}>
+                    {displayUserName(row.created_actor)}
+                  </Link>
+                )}
               </TableCell>
-              <TableCell>Added by</TableCell>
               <TableCell>
-                <TableSortLabel
-                  active={orderBy === 'ended_at'}
-                  direction={orderBy === 'ended_at' ? orderDirection : 'desc'}
-                  onClick={handleSortChange('ended_at')}>
-                  Ending
-                </TableSortLabel>
+                <Ending memberships={[row]} />
               </TableCell>
-              <TableCell>Removed by</TableCell>
-              <TableCell align="center">Access Request</TableCell>
-              <TableCell align="center">Justification</TableCell>
-            </TableRow>
-          </TableHead>
-          <TableBody>
-            {rows.map((row) => (
-              <TableRow
-                key={row.id}
-                sx={{
-                  bgcolor: ({palette: {highlight}}) =>
-                    row.ended_at == null || dayjs().isBefore(dayjs(row.ended_at))
-                      ? highlight.success.main
-                      : highlight.danger.main,
-                }}>
-                <TableCell>
-                  {(row.group?.deleted_at ?? null) != null ? (
-                    <Link
-                      to={`/groups/${row.group?.id ?? ''}`}
-                      sx={{textDecoration: 'line-through', color: 'inherit'}}
-                      component={RouterLink}>
-                      {row.group?.name ?? ''}
-                    </Link>
-                  ) : (
-                    <Link
-                      to={`/groups/${row.group?.name ?? ''}`}
-                      sx={{textDecoration: 'none', color: 'inherit'}}
-                      component={RouterLink}>
-                      {row.group?.name ?? ''}
-                    </Link>
-                  )}
-                </TableCell>
-                <TableCell>
-                  {(row.group?.deleted_at ?? null) != null ? (
-                    displayGroupType(row.group)
-                  ) : (
-                    <Link
-                      to={`/groups/${row.group?.name ?? ''}`}
-                      sx={{textDecoration: 'none', color: 'inherit'}}
-                      component={RouterLink}>
-                      {displayGroupType(row.group)}
-                    </Link>
-                  )}
-                </TableCell>
-                <TableCell>{row.is_owner ? 'Owner' : 'Member'}</TableCell>
-                <TableCell>
-                  {row.role_group_mapping == null ? (
-                    <Chip key="direct" label="Direct" color="primary" />
-                  ) : (
-                    <Chip
-                      label={row.role_group_mapping?.role_group?.name}
-                      color="primary"
-                      onClick={() => navigate(`/roles/${row.role_group_mapping?.role_group?.name}`)}
-                    />
-                  )}
-                </TableCell>
-                <TableCell>
-                  <Started memberships={[row]} />
-                </TableCell>
-                <TableCell>
-                  {(row.created_actor?.deleted_at ?? null) != null ? (
+              <TableCell>
+                {row.ended_at != null && dayjs().isAfter(dayjs(row.ended_at)) ? (
+                  (row.ended_actor?.deleted_at ?? null) != null ? (
                     <Link
-                      to={`/users/${row.created_actor?.id ?? ''}`}
+                      to={`/users/${row.ended_actor?.id ?? ''}`}
                       sx={{textDecoration: 'line-through', color: 'inherit'}}
                       component={RouterLink}>
-                      {displayUserName(row.created_actor)}
+                      {displayUserName(row.ended_actor)}
                     </Link>
                   ) : (
                     <Link
-                      to={`/users/${(row.created_actor?.email ?? '').toLowerCase()}`}
+                      to={`/users/${(row.ended_actor?.email ?? '').toLowerCase()}`}
                       sx={{textDecoration: 'none', color: 'inherit'}}
                       component={RouterLink}>
-                      {displayUserName(row.created_actor)}
+                      {displayUserName(row.ended_actor)}
                     </Link>
-                  )}
-                </TableCell>
-                <TableCell>
-                  <Ending memberships={[row]} />
-                </TableCell>
-                <TableCell>
-                  {row.ended_at != null && dayjs().isAfter(dayjs(row.ended_at)) ? (
-                    (row.ended_actor?.deleted_at ?? null) != null ? (
-                      <Link
-                        to={`/users/${row.ended_actor?.id ?? ''}`}
-                        sx={{textDecoration: 'line-through', color: 'inherit'}}
-                        component={RouterLink}>
-                        {displayUserName(row.ended_actor)}
-                      </Link>
-                    ) : (
-                      <Link
-                        to={`/users/${(row.ended_actor?.email ?? '').toLowerCase()}`}
-                        sx={{textDecoration: 'none', color: 'inherit'}}
-                        component={RouterLink}>
-                        {displayUserName(row.ended_actor)}
-                      </Link>
-                    )
-                  ) : (
-                    ''
-                  )}
-                </TableCell>
-                <TableCell align="center">
-                  {row.access_request != null ? (
-                    <Button
-                      variant="contained"
-                      size="small"
-                      to={`/requests/${row.access_request?.id ?? ''}`}
-                      component={RouterLink}>
-                      View
-                    </Button>
-                  ) : null}
-                </TableCell>
-                <TableCell align="center">
-                  {row.created_reason ? <CreatedReason created_reason={row.created_reason} /> : null}
-                </TableCell>
-              </TableRow>
-            ))}
-            {emptyRows > 0 && (
-              <TableRow style={{height: 33 * emptyRows}}>
-                <TableCell colSpan={9} />
-              </TableRow>
-            )}
-          </TableBody>
-          <TableFooter>
-            <TableRow>
-              <TablePagination
-                rowsPerPageOptions={[5, 10, 20]}
-                colSpan={9}
-                count={totalRows}
-                rowsPerPage={rowsPerPage}
-                page={page}
-                SelectProps={{
-                  inputProps: {
-                    'aria-label': 'rows per page',
-                  },
-                  native: true,
-                }}
-                onPageChange={handleChangePage}
-                onRowsPerPageChange={handleChangeRowsPerPage}
-                ActionsComponent={TablePaginationActions}
-              />
+                  )
+                ) : (
+                  ''
+                )}
+              </TableCell>
+              <TableCell align="center">
+                {row.access_request != null ? (
+                  <Button
+                    variant="contained"
+                    size="small"
+                    to={`/requests/${row.access_request?.id ?? ''}`}
+                    component={RouterLink}>
+                    View
+                  </Button>
+                ) : null}
+              </TableCell>
+              <TableCell align="center">
+                {row.created_reason ? <CreatedReason created_reason={row.created_reason} /> : null}
+              </TableCell>
+            </TableRow>
+          ))}
+          {emptyRows > 0 && (
+            <TableRow style={{height: 33 * emptyRows}}>
+              <TableCell colSpan={9} />
             </TableRow>
-          </TableFooter>
-        </Table>
-      </TableContainer>
-    </React.Fragment>
+          )}
+        </TableBody>
+        <TableFooter>
+          <TableRow>
+            <TablePagination
+              rowsPerPageOptions={[5, 10, 20]}
+              colSpan={9}
+              count={totalRows}
+              rowsPerPage={rowsPerPage}
+              page={page}
+              SelectProps={{
+                inputProps: {
+                  'aria-label': 'rows per page',
+                },
+                native: true,
+              }}
+              onPageChange={handleChangePage}
+              onRowsPerPageChange={handleChangeRowsPerPage}
+              ActionsComponent={TablePaginationActions}
+            />
+          </TableRow>
+        </TableFooter>
+      </Table>
+    </TableContainer>
   );
 }
diff --git a/src/pages/users/List.tsx b/src/pages/users/List.tsx
index fb13120..20a04c3 100644
--- a/src/pages/users/List.tsx
+++ b/src/pages/users/List.tsx
@@ -22,6 +22,8 @@ import {useGetUsers} from '../../api/apiComponents';
 import TablePaginationActions from '../../components/actions/TablePaginationActions';
 import UserAvatar from './UserAvatar';
 import {displayUserName, perPage} from '../../helpers';
+import {Stack} from '@mui/material';
+import TableTopBar, {renderUserOption, TableTopBarAutocomplete} from '../../components/TableTopBar';
 
 export default function ListUsers() {
   const navigate = useNavigate();
@@ -102,110 +104,83 @@ export default function ListUsers() {
   };
 
   return (
-    <React.Fragment>
-      <TableContainer component={Paper}>
-        <Table sx={{minWidth: 650}} size="small" aria-label="users">
-          <TableHead>
-            <TableRow>
+    <TableContainer component={Paper}>
+      <TableTopBar title="Users">
+        <TableTopBarAutocomplete
+          options={searchRows.map((row) => displayUserName(row) + ';' + row.email.toLowerCase())}
+          onInputChange={(event, newInputValue) => {
+            setSearchInput(newInputValue?.split(';')[0] ?? '');
+          }}
+          onChange={handleSearchSubmit}
+          defaultValue={searchQuery}
+          key={searchQuery}
+          renderOption={renderUserOption}
+        />
+      </TableTopBar>
+      <Table sx={{minWidth: 650}} size="small" aria-label="users">
+        <TableHead>
+          <TableRow>
+            <TableCell></TableCell>
+            <TableCell>Name</TableCell>
+            <TableCell>Email</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {rows.map((row) => (
+            <TableRow key={row.id}>
               <TableCell>
-                <Typography component="h5" variant="h5" color="text.accent">
-                  Users
-                </Typography>
+                <Link
+                  to={`/users/${row.email.toLowerCase()}`}
+                  sx={{textDecoration: 'none', color: 'inherit'}}
+                  component={RouterLink}>
+                  <UserAvatar name={displayUserName(row)} size={24} variant={'body1'} />
+                </Link>
               </TableCell>
-              <TableCell></TableCell>
-              <TableCell align="right">
-                <Autocomplete
-                  freeSolo
-                  filterOptions={(x) => x}
-                  options={searchRows.map((row) => displayUserName(row) + ';' + row.email.toLowerCase())}
-                  onInputChange={(event, newInputValue) => {
-                    setSearchInput(newInputValue?.split(';')[0] ?? '');
-                  }}
-                  onChange={handleSearchSubmit}
-                  defaultValue={searchQuery}
-                  key={searchQuery}
-                  renderInput={(params) => <TextField {...params} label={'Search' as any} />}
-                  renderOption={(props, option, state) => {
-                    const [displayName, email] = option.split(';');
-                    return (
-                      <li {...props}>
-                        <Grid container alignItems="center">
-                          <Grid item>
-                            <Box>{displayName}</Box>
-                            <Typography variant="body2" color="text.secondary">
-                              {email}
-                            </Typography>
-                          </Grid>
-                        </Grid>
-                      </li>
-                    );
-                  }}
-                />
+              <TableCell>
+                <Link
+                  to={`/users/${row.email.toLowerCase()}`}
+                  sx={{textDecoration: 'none', color: 'inherit'}}
+                  component={RouterLink}>
+                  {displayUserName(row)}
+                </Link>
+              </TableCell>
+              <TableCell>
+                <Link
+                  to={`/users/${row.email.toLowerCase()}`}
+                  sx={{textDecoration: 'none', color: 'inherit'}}
+                  component={RouterLink}>
+                  {row.email.toLowerCase()}
+                </Link>
               </TableCell>
             </TableRow>
-            <TableRow>
-              <TableCell></TableCell>
-              <TableCell>Name</TableCell>
-              <TableCell>Email</TableCell>
-            </TableRow>
-          </TableHead>
-          <TableBody>
-            {rows.map((row) => (
-              <TableRow key={row.id}>
-                <TableCell>
-                  <Link
-                    to={`/users/${row.email.toLowerCase()}`}
-                    sx={{textDecoration: 'none', color: 'inherit'}}
-                    component={RouterLink}>
-                    <UserAvatar name={displayUserName(row)} size={24} variant={'body1'} />
-                  </Link>
-                </TableCell>
-                <TableCell>
-                  <Link
-                    to={`/users/${row.email.toLowerCase()}`}
-                    sx={{textDecoration: 'none', color: 'inherit'}}
-                    component={RouterLink}>
-                    {displayUserName(row)}
-                  </Link>
-                </TableCell>
-                <TableCell>
-                  <Link
-                    to={`/users/${row.email.toLowerCase()}`}
-                    sx={{textDecoration: 'none', color: 'inherit'}}
-                    component={RouterLink}>
-                    {row.email.toLowerCase()}
-                  </Link>
-                </TableCell>
-              </TableRow>
-            ))}
-            {emptyRows > 0 && (
-              <TableRow style={{height: 37 * emptyRows}}>
-                <TableCell colSpan={6} />
-              </TableRow>
-            )}
-          </TableBody>
-          <TableFooter>
-            <TableRow>
-              <TablePagination
-                rowsPerPageOptions={perPage}
-                colSpan={3}
-                count={totalRows}
-                rowsPerPage={rowsPerPage}
-                page={page}
-                SelectProps={{
-                  inputProps: {
-                    'aria-label': 'rows per page',
-                  },
-                  native: true,
-                }}
-                onPageChange={handleChangePage}
-                onRowsPerPageChange={handleChangeRowsPerPage}
-                ActionsComponent={TablePaginationActions}
-              />
+          ))}
+          {emptyRows > 0 && (
+            <TableRow style={{height: 37 * emptyRows}}>
+              <TableCell colSpan={6} />
             </TableRow>
-          </TableFooter>
-        </Table>
-      </TableContainer>
-    </React.Fragment>
+          )}
+        </TableBody>
+        <TableFooter>
+          <TableRow>
+            <TablePagination
+              rowsPerPageOptions={perPage}
+              colSpan={3}
+              count={totalRows}
+              rowsPerPage={rowsPerPage}
+              page={page}
+              SelectProps={{
+                inputProps: {
+                  'aria-label': 'rows per page',
+                },
+                native: true,
+              }}
+              onPageChange={handleChangePage}
+              onRowsPerPageChange={handleChangeRowsPerPage}
+              ActionsComponent={TablePaginationActions}
+            />
+          </TableRow>
+        </TableFooter>
+      </Table>
+    </TableContainer>
   );
 }