diff --git a/packages/table/src/lib/Table.stories.tsx b/packages/table/src/lib/Table.stories.tsx
index 0558895d4..3f4e89a9c 100644
--- a/packages/table/src/lib/Table.stories.tsx
+++ b/packages/table/src/lib/Table.stories.tsx
@@ -4,7 +4,11 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { useMemo, useState } from 'react';
 import Checkbox from '@mui/material/Checkbox';
+import { IconButton } from '@availity/mui-button';
 import { StatusChip, StatusChipProps } from '@availity/mui-chip';
+import { CollapseIcon, ExpandIcon } from '@availity/mui-icon';
+import { Box, Grid } from '@availity/mui-layout';
+import { Collapse } from '@availity/mui-transitions';
 import { Typography } from '@availity/mui-typography';
 import { visuallyHidden } from '@availity/mui-utils';
 import Patients from '../../../../data/patients.json';
@@ -459,3 +463,85 @@ export const _PaginatedTable: StoryObj<typeof Table> = {
     );
   },
 };
+
+export const _ExpandableTable: StoryObj<typeof Table> = {
+  render: (args: TableProps) => {
+    return (
+      <TableContainer>
+        <Typography id="table-title" sx={visuallyHidden}>
+          Table
+        </Typography>
+        <Table aria-labelledby="table-title" {...args}>
+          <TableHead>
+            <TableRow>
+              <TableCell><div style={visuallyHidden}>Expand Row</div></TableCell>
+              <TableCell>Payer</TableCell>
+              <TableCell>Patient First Name</TableCell>
+              <TableCell>Patient Last Name</TableCell>
+              <TableCell>Birth Date</TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {dataRows.map((row) => {
+              const [open, setOpen] = useState(false);
+              return (
+                <>
+                  <TableRow key={`expandableTable-${row.payerName}-${row.birthDate}`}>
+                    <TableCell padding="checkbox">
+                      <IconButton
+                        title="expand row"
+                        size="medium"
+                        onClick={() => setOpen(!open)}
+                      >
+                        {open ? <ExpandIcon /> : <CollapseIcon />}
+                      </IconButton>
+                    </TableCell>
+                    <TableCell>{row.payerName}</TableCell>
+                    <TableCell>{row.firstName}</TableCell>
+                    <TableCell>{row.lastName}</TableCell>
+                    {/* TODO: switch to dayjs */}
+                    <TableCell>{new Date(row.birthDate).toLocaleDateString('en-us')}</TableCell>
+                  </TableRow>
+                  <TableRow key={`expandableTable-expanded-${row.payerName}-${row.birthDate}`} >
+                    <TableCell style={{ padding: 0, paddingLeft: "32px" }} colSpan={12}>
+                      <Collapse in={open} timeout="auto" unmountOnExit>
+                        <Box sx={{ padding: 2 }}>
+                          <Grid container spacing={2}>
+                            <Grid xs>
+                              <Typography variant="body2" sx={{fontWeight: "bold"}}>
+                                Subscriber Member Id
+                              </Typography>
+                              <Typography variant="body2">
+                                {row.subscriberMemberId}
+                              </Typography>
+                            </Grid>
+                            <Grid xs>
+                              <Typography variant="body2" sx={{fontWeight: "bold"}}>
+                                Subscriber Relationship
+                              </Typography>
+                              <Typography variant="body2">
+                                {row.subscriberRelationship}
+                              </Typography>
+                            </Grid>
+                            <Grid xs>
+                              <Typography variant="body2" sx={{fontWeight: "bold"}}>
+                                Subscriber Relationship Code
+                              </Typography>
+                              <Typography variant="body2">
+                                {row.subscriberRelationshipCode}
+                              </Typography>
+                            </Grid>
+                          </Grid>
+                        </Box>
+                      </Collapse>
+                    </TableCell>
+                  </TableRow>
+                </>
+              );
+            })}
+          </TableBody>
+        </Table>
+      </TableContainer>
+    );
+  },
+};
diff --git a/packages/table/src/lib/TableRow.stories.tsx b/packages/table/src/lib/TableRow.stories.tsx
index 7a64ba3da..2436580cd 100644
--- a/packages/table/src/lib/TableRow.stories.tsx
+++ b/packages/table/src/lib/TableRow.stories.tsx
@@ -3,6 +3,12 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { TableRow, TableRowProps } from './TableRow';
 import { TableBody, TableCell } from '..';
+import { useState } from 'react';
+import { IconButton } from '@availity/mui-button';
+import { CollapseIcon, ExpandIcon } from '@availity/mui-icon';
+import { Box, Grid } from '@availity/mui-layout';
+import { Collapse } from '@availity/mui-transitions';
+import { Typography } from '@availity/mui-typography';
 
 const meta: Meta<typeof TableRow> = {
   title: 'Components/Table/TableRow',
@@ -26,3 +32,87 @@ export const _TableRow: StoryObj<typeof TableRow> = {
     </TableBody>
   ),
 };
+
+export const _CollapsibleRow: StoryObj<typeof TableRow> = {
+  render: (args: TableRowProps) => {
+    const [open, setOpen] = useState(false);
+
+    return (
+    <TableBody>
+      <TableRow {...args}>
+        <TableCell padding="checkbox">
+          <IconButton
+            title="expand row"
+            size="medium"
+            onClick={() => setOpen(!open)}
+          >
+            {open ? <ExpandIcon /> : <CollapseIcon />}
+          </IconButton>
+        </TableCell>
+        <TableCell>Cell 1</TableCell>
+        <TableCell>Cell 2</TableCell>
+        <TableCell>Cell 3</TableCell>
+      </TableRow>
+      <TableRow {...args}>
+        <TableCell style={{ padding: 0, paddingLeft: "32px" }} colSpan={12} >
+          <Collapse in={open} timeout="auto" unmountOnExit>
+            <Box sx={{ padding: 2 }}>
+              <Grid container spacing={2} wrap="wrap">
+                <Grid xs>
+                  <Typography variant="body2" sx={{fontWeight: "bold"}}>
+                    Extra Data 1
+                  </Typography>
+                  <Typography variant="body2">
+                    Lorem Ipsum
+                  </Typography>
+                </Grid>
+                <Grid xs>
+                  <Typography variant="body2" sx={{fontWeight: "bold"}}>
+                    Extra Data 2
+                  </Typography>
+                  <Typography variant="body2">
+                    Lorem Ipsum
+                  </Typography>
+                </Grid>
+                <Grid xs>
+                  <Typography variant="body2" sx={{fontWeight: "bold"}}>
+                    Extra Data 3
+                  </Typography>
+                  <Typography variant="body2">
+                    Lorem Ipsum
+                  </Typography>
+                </Grid>
+              </Grid>
+              <Grid container spacing={2} wrap="wrap">
+                <Grid xs>
+                  <Typography variant="body2" sx={{fontWeight: "bold"}}>
+                    Extra Data 4
+                  </Typography>
+                  <Typography variant="body2">
+                    Lorem Ipsum
+                  </Typography>
+                </Grid>
+                <Grid xs>
+                  <Typography variant="body2" sx={{fontWeight: "bold"}}>
+                    Extra Data 5
+                  </Typography>
+                  <Typography variant="body2">
+                    Lorem Ipsum
+                  </Typography>
+                </Grid>
+                <Grid xs>
+                  <Typography variant="body2" sx={{fontWeight: "bold"}}>
+                    Extra Data 6
+                  </Typography>
+                  <Typography variant="body2">
+                    Lorem Ipsum
+                  </Typography>
+                </Grid>
+              </Grid>
+            </Box>
+          </Collapse>
+        </TableCell>
+      </TableRow>
+    </TableBody>
+  )},
+};