diff --git a/packages/gamut/src/DataList/Tables/Rows/TableHeaderRow.tsx b/packages/gamut/src/DataList/Tables/Rows/TableHeaderRow.tsx
index 6acc627cb3..eadcef3b36 100644
--- a/packages/gamut/src/DataList/Tables/Rows/TableHeaderRow.tsx
+++ b/packages/gamut/src/DataList/Tables/Rows/TableHeaderRow.tsx
@@ -78,7 +78,7 @@ export const TableHeaderRow: HeaderComponent = ({
               columnHeader
               dataTablePadding={dataTablePadding}
             >
-              <FlexBox alignItems="flex-end" gap={8} width="100%">
+              <FlexBox alignItems="flex-end" gap={8} height="100%" width="100%">
                 {filters && (
                   <FilterControl
                     columnKey={rowProperty}
diff --git a/packages/gamut/src/List/ListRow.tsx b/packages/gamut/src/List/ListRow.tsx
index f55704d9e9..a682da3a11 100644
--- a/packages/gamut/src/List/ListRow.tsx
+++ b/packages/gamut/src/List/ListRow.tsx
@@ -126,7 +126,6 @@ export const ListRow = forwardRef<HTMLLIElement, ListRowProps>(
           c_sm: undefined,
         }}
         isOl={renderNumbering}
-        parentEl
         role={role}
         scrollable={scrollable}
         tabIndex={tabIndex}
diff --git a/packages/gamut/src/List/elements.tsx b/packages/gamut/src/List/elements.tsx
index 9a9afac58b..86d8ee6cb7 100644
--- a/packages/gamut/src/List/elements.tsx
+++ b/packages/gamut/src/List/elements.tsx
@@ -75,10 +75,10 @@ const rowStates = states({
     flexDirection: { _: 'column', c_base: 'row', c_sm: 'column' },
   },
   /**
-   * Only the outermost element needs to inherit the background - otherwise it can stack with semitransparent bg colors and look off.
+   * Overrides the background of the element to transparent.
    */
-  parentEl: {
-    bg: 'inherit',
+  transparentBg: {
+    bg: 'transparent',
   },
 });
 
@@ -120,11 +120,10 @@ const spacingVariants = variant({
 
 const rowVariants = variant({
   prop: 'variant',
-  base: {
-    bg: 'background',
-  },
+  base: {},
   variants: {
     default: {
+      bg: 'background',
       border: 1,
       borderTop: 'none',
       '&:first-of-type': {
@@ -138,10 +137,12 @@ const rowVariants = variant({
       },
     },
     card: {
+      bg: 'background',
       border: 1,
       borderRadius: 'sm',
     },
     block: {
+      bg: 'background',
       border: 'none',
       borderRadius: 'sm',
     },
diff --git a/packages/styleguide/src/lib/Organisms/Lists & Tables/DataTable/DataTable.mdx b/packages/styleguide/src/lib/Organisms/Lists & Tables/DataTable/DataTable.mdx
index d4cea5839f..4809aa0373 100644
--- a/packages/styleguide/src/lib/Organisms/Lists & Tables/DataTable/DataTable.mdx	
+++ b/packages/styleguide/src/lib/Organisms/Lists & Tables/DataTable/DataTable.mdx	
@@ -140,6 +140,29 @@ You can set the `shadow` prop to `true` to add a shadow to the DataTable when it
 
 <Canvas of={DataTableStories.Scrollable} />
 
+## Background colors
+
+DataTable's background is linked to the `current-background` token. You can change the color scheme of a DataTable by wrapping it in a `<Background />` component from `@codecademy/gamut-styles`.
+
+When you wrap a DataTable in `Background`, the component will also automatically adjust its colors to ensure proper contrast and accessibility. For example, using a dark background like `bg="black"` will switch the DataTable to dark mode, making text and UI elements light-colored for better contrast. You can find more information about the `Background` component in the <LinkTo id="Foundations/ColorMode">ColorMode documentation</LinkTo>.
+
+### Usage
+
+```tsx
+import { Background } from '@codecademy/gamut-styles';
+import { DataTable } from '@codecademy/gamut';
+
+const MyDarkDataTable = () => {
+  return (
+    <Background bg="black" p={8}>
+      <DataTable id="dark-table" idKey="id" rows={data} columns={columns} />
+    </Background>
+  );
+};
+```
+
+<Canvas of={DataTableStories.BackgroundColors} />
+
 ## Container Query Control
 
 DataTable inherits container query functionality from the underlying List component. By default, DataTable uses CSS container queries to determine responsive behavior based on the container width rather than viewport width. This ensures optimal display when DataTable is placed in constrained layouts.
diff --git a/packages/styleguide/src/lib/Organisms/Lists & Tables/DataTable/DataTable.stories.tsx b/packages/styleguide/src/lib/Organisms/Lists & Tables/DataTable/DataTable.stories.tsx
index 34c23d9dbd..04859220ab 100644
--- a/packages/styleguide/src/lib/Organisms/Lists & Tables/DataTable/DataTable.stories.tsx	
+++ b/packages/styleguide/src/lib/Organisms/Lists & Tables/DataTable/DataTable.stories.tsx	
@@ -2,6 +2,7 @@
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-nocheck
 import { DataTable } from '@codecademy/gamut';
+import { Background } from '@codecademy/gamut-styles';
 import type { Meta, StoryObj } from '@storybook/react';
 
 import {
@@ -165,6 +166,15 @@ export const Scrollable: Story = {
   },
 };
 
+export const BackgroundColors: Story = {
+  args: {},
+  render: (args) => (
+    <Background bg="paleBlue" p={8}>
+      <DataTable {...args} />
+    </Background>
+  ),
+};
+
 const DataTableDisableContainerQueryExample = () => {
   const defaultComponent = (
     <DataTable