diff --git a/src/components/content/mdx-components.tsx b/src/components/content/mdx-components.tsx
index f8295c2..c491b8d 100644
--- a/src/components/content/mdx-components.tsx
+++ b/src/components/content/mdx-components.tsx
@@ -1,8 +1,19 @@
 import { HTMLAttributes } from "react";
 import { Pre } from "@/components/content/pre";
+import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
 
 export const MdxComponents = {
   pre: (props: HTMLAttributes<HTMLPreElement>) => <Pre {...props} />,
-  ol: (props: HTMLAttributes<HTMLOListElement>) => <ol style={{ listStyle: "revert" }} {...props} />,
-  ul: (props: HTMLAttributes<HTMLUListElement>) => <ul style={{ listStyle: "revert" }} {...props} />,
+  ol: (props: HTMLAttributes<HTMLOListElement>) => (
+    <ol style={{ listStyle: "revert" }} {...props} />
+  ),
+  ul: (props: HTMLAttributes<HTMLUListElement>) => (
+    <ul style={{ listStyle: "revert" }} {...props} />
+  ),
+  table: (props: HTMLAttributes<HTMLTableElement>) => (
+    <ScrollArea>
+      <table {...props} />
+      <ScrollBar orientation="horizontal" />
+    </ScrollArea>
+  ),
 };