diff --git a/src/design-system/composites/DataTable/DataTable.module.css b/src/design-system/composites/DataTable/DataTable.module.css
index d9ecae3..8182f97 100644
--- a/src/design-system/composites/DataTable/DataTable.module.css
+++ b/src/design-system/composites/DataTable/DataTable.module.css
@@ -6,6 +6,12 @@
   overflow: hidden;
 }
 
+.flush {
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
+}
+
 .scroll {
   overflow-x: auto;
 }
diff --git a/src/design-system/composites/DataTable/DataTable.tsx b/src/design-system/composites/DataTable/DataTable.tsx
index fcc2c22..3021bb6 100644
--- a/src/design-system/composites/DataTable/DataTable.tsx
+++ b/src/design-system/composites/DataTable/DataTable.tsx
@@ -23,6 +23,7 @@ export function DataTable<T extends { id: string }>({
   pageSizeOptions = [10, 25, 50, 100],
   rowAccent,
   expandedContent,
+  flush = false,
 }: DataTableProps<T>) {
   const [sortKey, setSortKey] = useState<string | null>(null)
   const [sortDir, setSortDir] = useState<SortDir>('asc')
@@ -73,7 +74,7 @@ export function DataTable<T extends { id: string }>({
   }))
 
   return (
-    <div className={styles.wrapper}>
+    <div className={`${styles.wrapper} ${flush ? styles.flush : ''}`}>
       <div className={styles.scroll}>
         <table className={styles.table}>
           <thead>
diff --git a/src/design-system/composites/DataTable/types.ts b/src/design-system/composites/DataTable/types.ts
index e9de1b6..a358d89 100644
--- a/src/design-system/composites/DataTable/types.ts
+++ b/src/design-system/composites/DataTable/types.ts
@@ -18,4 +18,6 @@ export interface DataTableProps<T extends { id: string }> {
   pageSizeOptions?: number[]
   rowAccent?: (row: T) => 'error' | 'warning' | undefined
   expandedContent?: (row: T) => ReactNode | null
+  /** Strip border, radius, and shadow so the table sits flush inside a parent container. */
+  flush?: boolean
 }
diff --git a/src/pages/Dashboard/Dashboard.tsx b/src/pages/Dashboard/Dashboard.tsx
index 42e5847..c02c0b6 100644
--- a/src/pages/Dashboard/Dashboard.tsx
+++ b/src/pages/Dashboard/Dashboard.tsx
@@ -346,6 +346,7 @@ export function Dashboard() {
             onRowClick={handleRowClick}
             selectedId={selectedId}
             sortable
+            flush
             rowAccent={handleRowAccent}
             expandedContent={(row) =>
               row.errorMessage ? (
diff --git a/src/pages/RouteDetail/RouteDetail.tsx b/src/pages/RouteDetail/RouteDetail.tsx
index 5dda52d..e743568 100644
--- a/src/pages/RouteDetail/RouteDetail.tsx
+++ b/src/pages/RouteDetail/RouteDetail.tsx
@@ -328,6 +328,7 @@ export function RouteDetail() {
             columns={EXCHANGE_COLUMNS}
             data={routeExchanges}
             sortable
+            flush
             rowAccent={(row) => {
               if (row.status === 'failed') return 'error'
               if (row.status === 'warning') return 'warning'