diff --git a/docs/theme/components/Table.styles.ts b/docs/theme/components/Table.styles.ts
index 3d289cbbee..9e33dfdd5c 100644
--- a/docs/theme/components/Table.styles.ts
+++ b/docs/theme/components/Table.styles.ts
@@ -1,8 +1,8 @@
 import { ThemeComponent, cva } from '@marigold/system';
 
 export const Table: ThemeComponent<'Table'> = {
-  table: cva('w-full overflow-auto  text-sm'),
-  cell: cva(' mt-4 hyphens-auto px-1 py-2 text-sm'),
-  header: cva('border-b px-1 py-2 text-start'),
+  table: cva('table w-full text-sm'),
+  cell: cva(' mt-4 hyphens-auto px-4 py-2 text-sm'),
+  header: cva('border-b px-4 py-2 text-start'),
   row: cva('hover:bg-bg-hover/50 border-b'),
 };
diff --git a/docs/ui/AppearanceTable.tsx b/docs/ui/AppearanceTable.tsx
index 7ebae79adc..5173c40699 100644
--- a/docs/ui/AppearanceTable.tsx
+++ b/docs/ui/AppearanceTable.tsx
@@ -52,37 +52,47 @@ export const AppearanceTable = ({ component }: AppearanceTableProps) => {
           </Text>
         </Inline>
       ) : (
-        <Table aria-labelledby="appearance table" variant="propsTable">
-          <Table.Header>
-            <Table.Column key={'property'}>Property</Table.Column>
-            <Table.Column key={'type'}>Type</Table.Column>
-            <Table.Column key={'description'}>Description</Table.Column>
-          </Table.Header>
-          <Table.Body>
-            <Table.Row>
-              <Table.Cell>
-                <code>variant</code>
-              </Table.Cell>
-              <Table.Cell>
-                <code>
-                  {appearances.variant ? appearances.variant.join(' | ') : '-'}
-                </code>
-              </Table.Cell>
-              <Table.Cell>The available variants of this component.</Table.Cell>
-            </Table.Row>
-            <Table.Row>
-              <Table.Cell>
-                <code>size</code>
-              </Table.Cell>
-              <Table.Cell>
-                <code>
-                  {appearances.size ? appearances.size.join(' | ') : '-'}
-                </code>
-              </Table.Cell>
-              <Table.Cell>The available sizes of this component.</Table.Cell>
-            </Table.Row>
-          </Table.Body>
-        </Table>
+        <div className="overflow-auto">
+          <Table aria-labelledby="appearance table" variant="propsTable">
+            <Table.Header>
+              <Table.Column key={'property'}>Property</Table.Column>
+              <Table.Column key={'type'}>Type</Table.Column>
+              <Table.Column key={'description'}>Description</Table.Column>
+            </Table.Header>
+            <Table.Body>
+              <Table.Row>
+                <Table.Cell>
+                  <code className="before:content-none after:content-none">
+                    variant
+                  </code>
+                </Table.Cell>
+                <Table.Cell>
+                  <code className="before:content-none after:content-none">
+                    {appearances.variant
+                      ? appearances.variant.join(' | ')
+                      : '-'}
+                  </code>
+                </Table.Cell>
+                <Table.Cell>
+                  The available variants of this component.
+                </Table.Cell>
+              </Table.Row>
+              <Table.Row>
+                <Table.Cell>
+                  <code className="before:content-none after:content-none">
+                    size
+                  </code>
+                </Table.Cell>
+                <Table.Cell>
+                  <code className="before:content-none after:content-none">
+                    {appearances.size ? appearances.size.join(' | ') : '-'}
+                  </code>
+                </Table.Cell>
+                <Table.Cell>The available sizes of this component.</Table.Cell>
+              </Table.Row>
+            </Table.Body>
+          </Table>
+        </div>
       )}
     </Card>
   );
diff --git a/docs/ui/PropsTable.tsx b/docs/ui/PropsTable.tsx
index e60e90eb7d..640102c23b 100644
--- a/docs/ui/PropsTable.tsx
+++ b/docs/ui/PropsTable.tsx
@@ -15,30 +15,38 @@ export const PropsTable = ({ props }: PropsTableProps) => {
           <Text>Sorry! There are currently no props available.</Text>
         </Inline>
       ) : (
-        <Table aria-label="Table with component props" variant="propsTable">
-          <Table.Header>
-            <Table.Column key="property">Property</Table.Column>
-            <Table.Column key="type">Type</Table.Column>
-            <Table.Column key="default">Default</Table.Column>
-            <Table.Column key="description">Description</Table.Column>
-          </Table.Header>
-          <Table.Body items={props}>
-            {item => (
-              <Table.Row key={item.property}>
-                <Table.Cell>
-                  <code>{item.property}</code>
-                </Table.Cell>
-                <Table.Cell>
-                  <code>{item.type}</code>
-                </Table.Cell>
-                <Table.Cell>
-                  <code>{item.default}</code>
-                </Table.Cell>
-                <Table.Cell>{item.description}</Table.Cell>
-              </Table.Row>
-            )}
-          </Table.Body>
-        </Table>
+        <div className="overflow-auto">
+          <Table aria-label="Table with component props" variant="propsTable">
+            <Table.Header>
+              <Table.Column key="property">Property</Table.Column>
+              <Table.Column key="type">Type</Table.Column>
+              <Table.Column key="default">Default</Table.Column>
+              <Table.Column key="description">Description</Table.Column>
+            </Table.Header>
+            <Table.Body items={props}>
+              {item => (
+                <Table.Row key={item.property}>
+                  <Table.Cell>
+                    <code className="before:content-none after:content-none">
+                      {item.property}
+                    </code>
+                  </Table.Cell>
+                  <Table.Cell>
+                    <code className="before:content-none after:content-none">
+                      {item.type}
+                    </code>
+                  </Table.Cell>
+                  <Table.Cell>
+                    <code className="before:content-none after:content-none">
+                      {item.default ? item.default : '-'}
+                    </code>
+                  </Table.Cell>
+                  <Table.Cell>{item.description}</Table.Cell>
+                </Table.Row>
+              )}
+            </Table.Body>
+          </Table>
+        </div>
       )}
     </Card>
   );
diff --git a/docs/ui/mdx.tsx b/docs/ui/mdx.tsx
index 16e6db93cc..2c07f6a894 100644
--- a/docs/ui/mdx.tsx
+++ b/docs/ui/mdx.tsx
@@ -38,7 +38,10 @@ const typography = {
     <blockquote className="mt-6 border-l-2 pl-6 italic" {...props} />
   ),
   code: (props: HTMLAttributes<HTMLElement>) => (
-    <code className="rounded  font-mono text-sm" {...props} />
+    <code
+      className="rounded font-mono text-sm before:content-none after:content-none"
+      {...props}
+    />
   ),
   hr: ({ ...props }: HTMLAttributes<HTMLHRElement>) => (
     <hr className="my-4 md:my-8" {...props} />