diff --git a/docs/src/data/links.ts b/docs/src/data/links.ts
index 3e5ab874642..bd220d0ac59 100644
--- a/docs/src/data/links.ts
+++ b/docs/src/data/links.ts
@@ -152,7 +152,11 @@ export const layoutComponents = [
     body: `A layout container using Flexbox.`,
   },
   { href: '/components/grid', label: 'Grid', body: `` },
-  { href: '/components/table', label: 'Table', body: `` },
+  {
+    href: '/components/table',
+    label: 'Table',
+    body: `The Table primitive provides users with a styled and customizable table element.`,
+  },
   {
     href: '/components/expander',
     label: 'Expander',
diff --git a/docs/src/components/TablePropControls.tsx b/docs/src/pages/components/table/TablePropControls.tsx
similarity index 55%
rename from docs/src/components/TablePropControls.tsx
rename to docs/src/pages/components/table/TablePropControls.tsx
index ebd681662d7..1b9dbcf111c 100644
--- a/docs/src/components/TablePropControls.tsx
+++ b/docs/src/pages/components/table/TablePropControls.tsx
@@ -2,14 +2,12 @@ import * as React from 'react';
 
 import {
   CheckboxField,
+  Flex,
   SelectField,
   TableProps,
   TextField,
 } from '@aws-amplify/ui-react';
 
-import { DemoBox } from './DemoBox';
-import { FieldLabeler } from './FieldLabeler';
-
 export interface TablePropControlsProps extends TableProps {
   setCaption: (value: React.SetStateAction<TableProps['caption']>) => void;
   setHighlightOnHover: (
@@ -32,7 +30,7 @@ export const TablePropControls: TablePropControlsInterface = ({
   size,
   variation,
 }) => (
-  <DemoBox primitiveName="Table">
+  <Flex direction="column">
     <TextField
       id="caption-control"
       label="caption"
@@ -49,35 +47,27 @@ export const TablePropControls: TablePropControlsInterface = ({
       label="highlightOnHover"
       onChange={(e) => setHighlightOnHover(e.target.checked)}
     />
-    <FieldLabeler id="size">
-      <SelectField
-        id="size"
-        name="size"
-        label="size"
-        labelHidden
-        placeholder="(default)"
-        value={size}
-        onChange={(e) => setSize(e.target.value as TableProps['size'])}
-      >
-        <option value="small">small</option>
-        <option value="large">large</option>
-      </SelectField>
-    </FieldLabeler>
-    <FieldLabeler id="variation">
-      <SelectField
-        id="variation"
-        name="variation"
-        label="variation"
-        labelHidden
-        placeholder="(default)"
-        value={variation}
-        onChange={(e) =>
-          setVariation(e.target.value as TableProps['variation'])
-        }
-      >
-        <option value="bordered">bordered</option>
-        <option value="striped">striped</option>
-      </SelectField>
-    </FieldLabeler>
-  </DemoBox>
+    <SelectField
+      id="size"
+      name="size"
+      label="size"
+      placeholder="(default)"
+      value={size}
+      onChange={(e) => setSize(e.target.value as TableProps['size'])}
+    >
+      <option value="small">small</option>
+      <option value="large">large</option>
+    </SelectField>
+    <SelectField
+      id="variation"
+      name="variation"
+      label="variation"
+      placeholder="(default)"
+      value={variation}
+      onChange={(e) => setVariation(e.target.value as TableProps['variation'])}
+    >
+      <option value="bordered">bordered</option>
+      <option value="striped">striped</option>
+    </SelectField>
+  </Flex>
 );
diff --git a/docs/src/pages/components/table/demo.tsx b/docs/src/pages/components/table/demo.tsx
index 4b117908532..e64e8588bb0 100644
--- a/docs/src/pages/components/table/demo.tsx
+++ b/docs/src/pages/components/table/demo.tsx
@@ -1,26 +1,67 @@
 import * as React from 'react';
 
-import { Flex } from '@aws-amplify/ui-react';
+import { Demo } from '@/components/Demo';
 
-import { Example } from '@/components/Example';
-import { TablePropControls } from '@/components/TablePropControls';
-import { useTableProps } from '@/components/useTableProps';
+import { TablePropControls } from './TablePropControls';
+import { useTableProps } from './useTableProps';
 import { BasicExample } from './examples';
 
+const propsToCode = (props) => {
+  const { caption, highlightOnHover, size, variation } = props;
+  return `
+<Table
+  caption={${caption}}
+  highlightOnHover={${highlightOnHover}}
+  size={${size}}
+  variation={${variation}}
+  >
+  <TableHead>
+    <TableRow>
+      <TableCell as="th">Citrus</TableCell>
+      <TableCell as="th">Stone Fruit</TableCell>
+      <TableCell as="th">Berry</TableCell>
+    </TableRow>
+  </TableHead>
+  <TableBody>
+    <TableRow>
+      <TableCell>Orange</TableCell>
+      <TableCell>Nectarine</TableCell>
+      <TableCell>Raspberry</TableCell>
+    </TableRow>
+    <TableRow>
+      <TableCell>Grapefruit</TableCell>
+      <TableCell>Apricot</TableCell>
+      <TableCell>Blueberry</TableCell>
+    </TableRow>
+    <TableRow>
+      <TableCell>Lime</TableCell>
+      <TableCell>Peach</TableCell>
+      <TableCell>Strawberry</TableCell>
+    </TableRow>
+  </TableBody>
+</Table>
+  `;
+};
+
+const initialValues = {
+  caption: '',
+  highlightOnHover: false,
+};
+
 export const TableDemo = () => {
-  const tableProps = useTableProps({});
+  const tableProps = useTableProps(initialValues);
 
   return (
-    <Flex direction="column" gap="0.5rem">
-      <TablePropControls {...tableProps} />
-      <Example>
-        <BasicExample
-          caption={tableProps.caption}
-          highlightOnHover={tableProps.highlightOnHover}
-          size={tableProps.size}
-          variation={tableProps.variation}
-        />
-      </Example>
-    </Flex>
+    <Demo
+      code={propsToCode(tableProps)}
+      propControls={<TablePropControls {...tableProps} />}
+    >
+      <BasicExample
+        caption={tableProps.caption}
+        highlightOnHover={tableProps.highlightOnHover}
+        size={tableProps.size}
+        variation={tableProps.variation}
+      />
+    </Demo>
   );
 };
diff --git a/docs/src/pages/components/table/examples/basicExample.tsx b/docs/src/pages/components/table/examples/BasicExample.tsx
similarity index 100%
rename from docs/src/pages/components/table/examples/basicExample.tsx
rename to docs/src/pages/components/table/examples/BasicExample.tsx
diff --git a/docs/src/pages/components/table/examples/highlightExample.tsx b/docs/src/pages/components/table/examples/HighlightExample.tsx
similarity index 100%
rename from docs/src/pages/components/table/examples/highlightExample.tsx
rename to docs/src/pages/components/table/examples/HighlightExample.tsx
diff --git a/docs/src/pages/components/table/examples/sizeExample.tsx b/docs/src/pages/components/table/examples/SizeExample.tsx
similarity index 100%
rename from docs/src/pages/components/table/examples/sizeExample.tsx
rename to docs/src/pages/components/table/examples/SizeExample.tsx
diff --git a/docs/src/pages/components/table/examples/spanExample.tsx b/docs/src/pages/components/table/examples/SpanExample.tsx
similarity index 100%
rename from docs/src/pages/components/table/examples/spanExample.tsx
rename to docs/src/pages/components/table/examples/SpanExample.tsx
diff --git a/docs/src/pages/components/table/examples/TableFontSizePropExample.tsx b/docs/src/pages/components/table/examples/TableFontSizePropExample.tsx
new file mode 100644
index 00000000000..f663904dd65
--- /dev/null
+++ b/docs/src/pages/components/table/examples/TableFontSizePropExample.tsx
@@ -0,0 +1,25 @@
+import {
+  Table,
+  TableBody,
+  TableRow,
+  TableCell,
+  useTheme,
+} from '@aws-amplify/ui-react';
+
+export const TableFontSizePropExample = () => {
+  const { tokens } = useTheme();
+  return (
+    <Table>
+      <TableBody>
+        <TableRow>
+          <TableCell fontSize={`${tokens.fontSizes.xs}`}>
+            Smaller Text
+          </TableCell>
+          <TableCell fontSize={`${tokens.fontSizes.xs}`}>
+            Smaller Text
+          </TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  );
+};
diff --git a/docs/src/pages/components/table/examples/TableStylePropExample.tsx b/docs/src/pages/components/table/examples/TableStylePropExample.tsx
new file mode 100644
index 00000000000..da2d5010c43
--- /dev/null
+++ b/docs/src/pages/components/table/examples/TableStylePropExample.tsx
@@ -0,0 +1,25 @@
+import {
+  Table,
+  TableBody,
+  TableRow,
+  TableCell,
+  useTheme,
+} from '@aws-amplify/ui-react';
+
+export const TableStylePropExample = () => {
+  const { tokens } = useTheme();
+  return (
+    <Table>
+      <TableBody>
+        <TableRow>
+          <TableCell style={{ fontSize: `${tokens.fontSizes.xs}` }}>
+            Smaller Text
+          </TableCell>
+          <TableCell style={{ fontSize: `${tokens.fontSizes.xs}` }}>
+            Smaller Text
+          </TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  );
+};
diff --git a/docs/src/pages/components/table/examples/variationExample.tsx b/docs/src/pages/components/table/examples/VariationExample.tsx
similarity index 100%
rename from docs/src/pages/components/table/examples/variationExample.tsx
rename to docs/src/pages/components/table/examples/VariationExample.tsx
diff --git a/docs/src/pages/components/table/examples/index.ts b/docs/src/pages/components/table/examples/index.ts
index 91628a5da8c..2128e5fb081 100644
--- a/docs/src/pages/components/table/examples/index.ts
+++ b/docs/src/pages/components/table/examples/index.ts
@@ -1,5 +1,7 @@
-export { BasicExample } from './basicExample';
-export { HighlightExample } from './highlightExample';
-export { SizeExample } from './sizeExample';
-export { SpanExample } from './spanExample';
-export { VariationExample } from './variationExample';
+export { BasicExample } from './BasicExample';
+export { HighlightExample } from './HighlightExample';
+export { SizeExample } from './SizeExample';
+export { SpanExample } from './SpanExample';
+export { TableFontSizePropExample } from './TableFontSizePropExample';
+export { TableStylePropExample } from './TableStylePropExample';
+export { VariationExample } from './VariationExample';
diff --git a/docs/src/pages/components/table/react.mdx b/docs/src/pages/components/table/react.mdx
index 6bc7d57bb32..1168aa01fd2 100644
--- a/docs/src/pages/components/table/react.mdx
+++ b/docs/src/pages/components/table/react.mdx
@@ -4,6 +4,7 @@ import {
   TableCell,
   TableHead,
   TableRow,
+  View,
 } from '@aws-amplify/ui-react';
 
 import { TableDemo } from './demo';
@@ -12,9 +13,10 @@ import {
   HighlightExample,
   SizeExample,
   SpanExample,
+  TableStylePropExample,
   VariationExample,
 } from './examples';
-import { Example } from '@/components/Example';
+import { Example, ExampleCode } from '@/components/Example';
 import { Fragment } from '@/components/Fragment';
 
 The `Table` primitive provides users with a styled and customizable table element.
@@ -28,44 +30,55 @@ The `Table` primitive provides users with a styled and customizable table elemen
 The `Table` primitive and its various components can be used similiarly to how the
 HTML `table`, `tbody`, `td`, `tfoot`, `th`, `thead`, and `tr` elements are used.
 
-```tsx file=./examples/basicExample.tsx
+<Example>
+  <ExampleCode>
+    ```tsx file=./examples/BasicExample.tsx
+
+    ````
 
-```
+  </ExampleCode>
+</Example>
 
 ### Size
 
 Control the cell height and font size of a Table using the `size` prop. Available options are `small`, none (default), and `large`.
 
-```tsx file=./examples/sizeExample.tsx
-
-```
-
 <Example>
   <SizeExample />
+  <ExampleCode>
+    ```tsx file=./examples/SizeExample.tsx
+
+    ```
+
+  </ExampleCode>
 </Example>
 
 ### Variation
 
 The `variation` prop can be used to make all cells `bordered` or rows `striped`. Note that the `striped` variation doesn't apply to rows in a `TableHead` tag.
 
-```tsx file=./examples/variationExample.tsx
-
-```
-
 <Example>
   <VariationExample />
+  <ExampleCode>
+    ```tsx file=./examples/VariationExample.tsx
+
+    ```
+
+  </ExampleCode>
 </Example>
 
 ### Highlight on Hover
 
 The `highlightOnHover` prop can be used to change the background color of table rows upon mouse hover. Note that rows in a `TableHead` tag are not highlighted.
 
-```tsx file=./examples/highlightExample.tsx
-
-```
-
 <Example>
   <HighlightExample />
+  <ExampleCode>
+    ```tsx file=./examples/HighlightExample.tsx
+
+    ```
+
+  </ExampleCode>
 </Example>
 
 ### TableCell
@@ -75,9 +88,11 @@ The `highlightOnHover` prop can be used to change the background color of table
 The `TableCell` is used for all data presented in a table. If a cell is intended to be a heading for a row or column,
 it's recommended to set the cell as a `th` element using the `as` property:
 
-```jsx
-<TableCell as="th">Column Header</TableCell>
-```
+<Example>
+  ```jsx
+  <TableCell as="th">Column Header</TableCell>
+  ```
+</Example>
 
 By default, the `TableCell` is rendered as a `td` element.
 
@@ -86,12 +101,14 @@ By default, the `TableCell` is rendered as a `td` element.
 The `TableCell` component can be made to span multiple columns or rows using the `colspan` or `rowspan` properties,
 respectively. This is similar to how the HTML native `th` and `td` elements are made to span multiple columns and rows.
 
-```tsx file=./examples/spanExample.tsx
-
-```
-
 <Example>
   <SpanExample />
+  <ExampleCode>
+    ```tsx file=./examples/SpanExample.tsx
+
+    ```
+
+  </ExampleCode>
 </Example>
 
 ## CSS Styling
@@ -114,118 +131,126 @@ respectively. This is similar to how the HTML native `th` and `td` elements are
 Each component related to the `Table` primitive has its own class name which
 may be used to override styling with custom CSS.
 
-```css
-/* styles.css */
-.amplify-table__th {
-  background-color: var(--amplify-colors-background-tertiary);
-}
-
-.amplify-table__th:first-child {
-  text-align: right;
-}
-
-.amplify-table__row:not(:first-child) .amplify-table__th {
-  border-top: none;
-}
-
-.amplify-table__row:not(:last-child) .amplify-table__th {
-  border-bottom: none;
-}
-
-.amplify-table__caption {
-  caption-side: top;
-  text-align: right;
-}
-
-.table-summary {
-  color: var(--amplify-colors-font-secondary);
-  font-style: italic;
-}
-```
-
-```jsx
-import { Table, TableBody, TableCell, TableRow } from '@aws-amplify/ui-react';
-import '@aws-amplify/ui-react/styles.css';
-
-import './styles.css';
-
-<Table
-  className="global-styling-table"
-  caption={
-    <>
-      Table Title
-      <br />
-      <span class="table-summary">A short table description</span>
-    </>
-  }
->
-  <TableBody>
-    <TableRow>
-      <TableCell as="th" />
-      <TableCell as="th">A</TableCell>
-      <TableCell as="th">B</TableCell>
-      <TableCell as="th">C</TableCell>
-    </TableRow>
-    <TableRow>
-      <TableCell as="th">1</TableCell>
-      <TableCell>A1</TableCell>
-      <TableCell>B1</TableCell>
-      <TableCell>C1</TableCell>
-    </TableRow>
-    <TableRow>
-      <TableCell as="th">2</TableCell>
-      <TableCell>A2</TableCell>
-      <TableCell>B2</TableCell>
-      <TableCell>C2</TableCell>
-    </TableRow>
-    <TableRow>
-      <TableCell as="th">3</TableCell>
-      <TableCell>A3</TableCell>
-      <TableCell>B3</TableCell>
-      <TableCell>C3</TableCell>
-    </TableRow>
-  </TableBody>
-</Table>;
-```
-
 <Example>
-  <Table
-    className="global-styling-table"
-    caption={
-      <>
-        Table Title
-        <br />
-        <span class="table-summary">A short table description</span>
-      </>
+  <View>
+    <Table
+      className="global-styling-table"
+      caption={
+        <>
+          Table Title
+          <br />
+          <span class="table-summary">A short table description</span>
+        </>
+      }
+    >
+      <TableBody>
+        <TableRow>
+          <TableCell as="th" />
+          <TableCell as="th">A</TableCell>
+          <TableCell as="th">B</TableCell>
+          <TableCell as="th">C</TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell as="th">1</TableCell>
+          <TableCell>A1</TableCell>
+          <TableCell>B1</TableCell>
+          <TableCell>C1</TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell as="th">2</TableCell>
+          <TableCell>A2</TableCell>
+          <TableCell>B2</TableCell>
+          <TableCell>C2</TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell as="th">3</TableCell>
+          <TableCell>A3</TableCell>
+          <TableCell>B3</TableCell>
+          <TableCell>C3</TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  </View>
+
+  <ExampleCode>
+    ```css
+    /* styles.css */
+    .amplify-table__th {
+      background-color: var(--amplify-colors-background-tertiary);
+    }
+
+    .amplify-table__th:first-child {
+      text-align: right;
+    }
+
+    .amplify-table__row:not(:first-child) .amplify-table__th {
+      border-top: none;
     }
-  >
-    <TableBody>
-      <TableRow>
-        <TableCell as="th" />
-        <TableCell as="th">A</TableCell>
-        <TableCell as="th">B</TableCell>
-        <TableCell as="th">C</TableCell>
-      </TableRow>
-      <TableRow>
-        <TableCell as="th">1</TableCell>
-        <TableCell>A1</TableCell>
-        <TableCell>B1</TableCell>
-        <TableCell>C1</TableCell>
-      </TableRow>
-      <TableRow>
-        <TableCell as="th">2</TableCell>
-        <TableCell>A2</TableCell>
-        <TableCell>B2</TableCell>
-        <TableCell>C2</TableCell>
-      </TableRow>
-      <TableRow>
-        <TableCell as="th">3</TableCell>
-        <TableCell>A3</TableCell>
-        <TableCell>B3</TableCell>
-        <TableCell>C3</TableCell>
-      </TableRow>
-    </TableBody>
-  </Table>
+
+    .amplify-table__row:not(:last-child) .amplify-table__th {
+      border-bottom: none;
+    }
+
+    .amplify-table__caption {
+      caption-side: top;
+      text-align: right;
+    }
+
+    .table-summary {
+      color: var(--amplify-colors-font-secondary);
+      font-style: italic;
+    }
+    ```
+
+  </ExampleCode>
+
+  <ExampleCode>
+    ```jsx
+    import { Table, TableBody, TableCell, TableRow } from '@aws-amplify/ui-react';
+    import '@aws-amplify/ui-react/styles.css';
+
+    import './styles.css';
+
+    <Table
+      className="global-styling-table"
+      caption={
+        <>
+          Table Title
+          <br />
+          <span class="table-summary">A short table description</span>
+        </>
+      }
+    >
+      <TableBody>
+        <TableRow>
+          <TableCell as="th" />
+          <TableCell as="th">A</TableCell>
+          <TableCell as="th">B</TableCell>
+          <TableCell as="th">C</TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell as="th">1</TableCell>
+          <TableCell>A1</TableCell>
+          <TableCell>B1</TableCell>
+          <TableCell>C1</TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell as="th">2</TableCell>
+          <TableCell>A2</TableCell>
+          <TableCell>B2</TableCell>
+          <TableCell>C2</TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell as="th">3</TableCell>
+          <TableCell>A3</TableCell>
+          <TableCell>B3</TableCell>
+          <TableCell>C3</TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>;
+    ```
+
+  </ExampleCode>
 </Example>
 
 ### Local Styling
@@ -235,106 +260,106 @@ selector, data attributes, or style props.
 
 _Using a class selector:_
 
-```css
-/* styles.css */
-.my-custom-table .amplify-table__td {
-  font-size: 0.75rem;
-}
-
-.my-custom-table .amplify-table__row {
-  background-color: gray;
-}
-```
-
-```jsx
-import './styles.css';
-
-<Table className="my-custom-table">
-  <TableBody>
-    <TableRow>
-      <TableCell>Smaller Text</TableCell>
-      <TableCell>Smaller Text</TableCell>
-    </TableRow>
-  </TableBody>
-</Table>;
-```
-
 <Example>
-  <Table className="my-custom-table">
-    <TableBody>
-      <TableRow>
-        <TableCell>Smaller Text</TableCell>
-        <TableCell>Smaller Text</TableCell>
-      </TableRow>
-    </TableBody>
-  </Table>
+  <View>
+    <Table className="my-custom-table">
+      <TableBody>
+        <TableRow>
+          <TableCell>Smaller Text</TableCell>
+          <TableCell>Smaller Text</TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  </View>
+  <ExampleCode>
+    ```css
+    /* styles.css */
+    .my-custom-table .amplify-table__td {
+      font-size: var(--amplify-font-sizes-xs);
+    }
+
+    .my-custom-table .amplify-table__row {
+      background-color: var(--amplify-colors-neutral-60);
+    }
+    ```
+
+  </ExampleCode>
+
+  <ExampleCode>
+    ```jsx
+    import './styles.css';
+
+    <Table className="my-custom-table">
+      <TableBody>
+        <TableRow>
+          <TableCell>Smaller Text</TableCell>
+          <TableCell>Smaller Text</TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>;
+    ```
+
+  </ExampleCode>
 </Example>
 
 _Using data attributes:_
 
-```css
-/* styles.css */
-/* Override only large size styles */
-.amplify-table[data-size='large'] .amplify-table__td {
-  font-size: 2.5rem;
-}
-```
-
-```jsx
-import './styles.css';
-
-<Table size="large">
-  <TableBody>
-    <TableRow>
-      <TableCell>Larger Text</TableCell>
-      <TableCell>Larger Text</TableCell>
-    </TableRow>
-  </TableBody>
-</Table>;
-```
-
 <Example>
-  <Table className="custom-data-styling" size="large">
-    <TableBody>
-      <TableRow>
-        <TableCell>Larger Text</TableCell>
-        <TableCell>Larger Text</TableCell>
-      </TableRow>
-    </TableBody>
-  </Table>
+  <View>
+    <Table className="custom-data-styling" size="large">
+      <TableBody>
+        <TableRow>
+          <TableCell>Larger Text</TableCell>
+          <TableCell>Larger Text</TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  </View>
+  
+  <ExampleCode>
+    ```css
+    /* styles.css */
+    /* Override only large size styles */
+    .amplify-table[data-size='large'] .amplify-table__td {
+      font-size: var(--amplify-font-sizes-xxxl);
+    }
+    ```
+  </ExampleCode>
+
+  <ExampleCode>
+    ```jsx
+    import './styles.css';
+
+    <Table size="large">
+      <TableBody>
+        <TableRow>
+          <TableCell>Larger Text</TableCell>
+          <TableCell>Larger Text</TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>;
+    ```
+
+  </ExampleCode>
+
 </Example>
 
 _Using style props:_
 
-```jsx
-<Table>
-  <TableBody>
-    <TableRow>
-      <TableCell style={{ fontSize: '0.75rem' }}>Smaller Text</TableCell>
-      <TableCell style={{ fontSize: '0.75rem' }}>Smaller Text</TableCell>
-    </TableRow>
-  </TableBody>
-</Table>;
-{
-  /* OR */
-}
-<Table>
-  <TableBody>
-    <TableRow>
-      <TableCell fontSize={'0.75rem'}>Smaller Text</TableCell>
-      <TableCell fontSize={'0.75rem'}>Smaller Text</TableCell>
-    </TableRow>
-  </TableBody>
-</Table>;
-```
-
 <Example>
-  <Table>
-    <TableBody>
-      <TableRow>
-        <TableCell fontSize={'0.75rem'}>Smaller Text</TableCell>
-        <TableCell fontSize={'0.75rem'}>Smaller Text</TableCell>
-      </TableRow>
-    </TableBody>
-  </Table>
+  <TableStylePropExample />
+
+  <ExampleCode>
+    ```jsx file=./examples/TableStylePropExample.tsx
+
+    ```
+
+  </ExampleCode>
+    /* OR */
+  <ExampleCode>
+    ```jsx file=./examples/TableFontSizePropExample.tsx
+
+    ```
+
+  </ExampleCode>
 </Example>
diff --git a/docs/src/components/useTableProps.tsx b/docs/src/pages/components/table/useTableProps.tsx
similarity index 100%
rename from docs/src/components/useTableProps.tsx
rename to docs/src/pages/components/table/useTableProps.tsx
diff --git a/docs/src/styles/primitives/tableStyles.css b/docs/src/styles/primitives/tableStyles.css
index 42b8a69262b..db3f996381f 100644
--- a/docs/src/styles/primitives/tableStyles.css
+++ b/docs/src/styles/primitives/tableStyles.css
@@ -25,13 +25,13 @@
 }
 
 .my-custom-table .amplify-table__td {
-  font-size: 0.75rem;
+  font-size: var(--amplify-font-sizes-xs);
 }
 
 .my-custom-table .amplify-table__row {
-  background-color: gray;
+  background-color: var(--amplify-colors-neutral-60);
 }
 
 .custom-data-styling.amplify-table[data-size='large'] .amplify-table__td {
-  font-size: 2.5rem;
+  font-size: var(--amplify-font-sizes-xxxl);
 }