From 3527f0a04d90fb7e633cad2d8867181550d3eaeb Mon Sep 17 00:00:00 2001
From: Polo <nelsonprox92@gmail.com>
Date: Fri, 20 Feb 2026 14:31:02 +0200
Subject: [PATCH 1/4] Minor changes

---
 src/app/globals.css                   |  3 +--
 src/components/layout/DocsLayout.tsx  | 32 +++++++--------------------
 src/components/layout/DocsSidebar.tsx |  2 +-
 3 files changed, 10 insertions(+), 27 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index c6d98b9..e602bc9 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -171,5 +171,4 @@ body {
 ::-webkit-scrollbar { width: 6px; height: 6px; }
 ::-webkit-scrollbar-track { background: transparent; }
 ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
-::-webkit-scrollbar-thumb:hover { background: var(--muted-foreground); }
-
+::-webkit-scrollbar-thumb:hover { background: var(--muted-foreground); }
\ No newline at end of file
diff --git a/src/components/layout/DocsLayout.tsx b/src/components/layout/DocsLayout.tsx
index 6f17519..4eabfb3 100644
--- a/src/components/layout/DocsLayout.tsx
+++ b/src/components/layout/DocsLayout.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useState, useEffect } from "react";
+import React from "react";
 import { DocsSidebar } from "./DocsSidebar";
 import { Breadcrumbs } from "./Breadcrumbs";
 import { DocNavigation } from "./DocNavigation";
@@ -16,24 +16,8 @@ interface DocsLayoutProps {
 }
 
 export function DocsLayout({ children }: DocsLayoutProps) {
-  const [isSearchOpen, setIsSearchOpen] = useState(false);
   const tocItems = useTableOfContents();
 
-  useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if ((event.metaKey || event.ctrlKey) && event.key === "k") {
-        event.preventDefault();
-        setIsSearchOpen(true);
-      }
-      if (event.key === "Escape") {
-        setIsSearchOpen(false);
-      }
-    };
-
-    document.addEventListener("keydown", handleKeyDown);
-    return () => document.removeEventListener("keydown", handleKeyDown);
-  }, []);
-
   return (
     <>
       <div className="container mx-auto px-4">
@@ -45,14 +29,14 @@ export function DocsLayout({ children }: DocsLayoutProps) {
           <VersionSelector />
         </div>
 
-        <div className="flex-1 items-start md:grid md:grid-cols-[240px_minmax(0,1fr)] md:gap-8 lg:grid-cols-[260px_minmax(0,1fr)_220px] lg:gap-10">
-          {/* Sidebar */}
-          <aside aria-label="Documentation navigation">
+        <div className="flex flex-col md:flex-row gap-8 lg:gap-10">
+          {/* Sidebar - Fixed positioning */}
+          <div className="hidden md:block md:w-64 lg:w-65 shrink-0">
             <DocsSidebar />
-          </aside>
+          </div>
 
-          {/* Main content */}
-          <main id="main-content" className="relative py-8 min-w-0" role="main" aria-label="Main content">
+          {/* Main content - Takes remaining space */}
+          <main id="main-content" className="flex-1 relative py-8 min-w-0" role="main" aria-label="Main content">
             <Breadcrumbs />
             <article className="prose-doc max-w-none">{children}</article>
 
@@ -67,7 +51,7 @@ export function DocsLayout({ children }: DocsLayoutProps) {
           </main>
 
           {/* Right TOC column */}
-          <aside className="hidden lg:block" aria-label="Table of contents">
+          <aside className="hidden lg:block w-56 shrink-0" aria-label="Table of contents">
             <div className="sticky top-20 py-8">
               <TableOfContents items={tocItems} />
             </div>
diff --git a/src/components/layout/DocsSidebar.tsx b/src/components/layout/DocsSidebar.tsx
index e49fd93..56a4f2e 100644
--- a/src/components/layout/DocsSidebar.tsx
+++ b/src/components/layout/DocsSidebar.tsx
@@ -12,7 +12,7 @@ export function DocsSidebar() {
   const docsConfig = getDocsConfig(currentVersion?.value);
 
   return (
-    <aside className="fixed top-14 z-30 -ml-2 hidden h-[calc(100vh-3.5rem)] w-full shrink-0 md:sticky md:block">
+    <aside className="fixed top-14 left-0 z-30 hidden h-[calc(100vh-3.5rem)] w-64 shrink-0 md:sticky md:block md:left-auto">
       <div className="h-full overflow-y-auto py-6 pr-6 lg:py-8">
         <div className="flex flex-col gap-6">
           {docsConfig.sidebarNav.map((item, index) => (

From 84ba40019267660f345cb12c15fe7b5814c0b719 Mon Sep 17 00:00:00 2001
From: Polo <nelsonprox92@gmail.com>
Date: Fri, 20 Feb 2026 14:54:59 +0200
Subject: [PATCH 2/4] Add Table component and improve TableOfContents key
 generation

---
 src/components/ui/Table.tsx           | 140 ++++++++++++++++++++++++++
 src/components/ui/TableOfContents.tsx |   4 +-
 src/hooks/useTableOfContents.ts       |   6 +-
 3 files changed, 145 insertions(+), 5 deletions(-)
 create mode 100644 src/components/ui/Table.tsx

diff --git a/src/components/ui/Table.tsx b/src/components/ui/Table.tsx
new file mode 100644
index 0000000..d2dae2b
--- /dev/null
+++ b/src/components/ui/Table.tsx
@@ -0,0 +1,140 @@
+"use client";
+
+import React from "react";
+import { cn } from "@/lib/utils";
+
+interface TableProps extends React.TableHTMLAttributes<HTMLTableElement> {
+  children: React.ReactNode;
+}
+
+interface TableHeaderProps extends React.HTMLAttributes<HTMLTableSectionElement> {
+  children: React.ReactNode;
+}
+
+interface TableBodyProps extends React.HTMLAttributes<HTMLTableSectionElement> {
+  children: React.ReactNode;
+}
+
+interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {
+  children: React.ReactNode;
+}
+
+interface TableCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
+  children: React.ReactNode;
+  isHeader?: boolean;
+  isFirst?: boolean;
+}
+
+export function Table({ className, children, ...props }: TableProps) {
+  return (
+    <div className="overflow-x-auto rounded-lg border border-border">
+      <table
+        className={cn(
+          "w-full border-collapse bg-background",
+          "text-sm",
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </table>
+    </div>
+  );
+}
+
+export function TableHeader({ className, children, ...props }: TableHeaderProps) {
+  return (
+    <thead
+      className={cn(
+        "border-b border-border bg-muted",
+        "[&_tr]:border-b",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </thead>
+  );
+}
+
+export function TableBody({ className, children, ...props }: TableBodyProps) {
+  return (
+    <tbody
+      className={cn(
+        "[&_tr:last-child]:border-0",
+        "[&_tr:hover]:bg-muted/50",
+        "[&_tr]:transition-colors",
+        "[&_tr]:border-b",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </tbody>
+  );
+}
+
+export function TableRow({ className, children, ...props }: TableRowProps) {
+  return (
+    <tr
+      className={cn(
+        "border-b border-border transition-colors hover:bg-muted/50",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </tr>
+  );
+}
+
+export function TableCell({ 
+  className, 
+  children, 
+  isHeader = false, 
+  isFirst = false, 
+  ...props 
+}: TableCellProps) {
+  const Component = isHeader ? "th" : "td";
+  
+  return (
+    <Component
+      className={cn(
+        "px-4 py-3 align-middle",
+        isFirst && "font-medium text-primary bg-muted/50",
+        "[&:has([role=checkbox])]:pr-0",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </Component>
+  );
+}
+
+export function TableHead({ className, children, ...props }: TableCellProps) {
+  return (
+    <TableCell
+      isHeader={true}
+      className={cn(
+        "font-semibold text-foreground bg-muted",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </TableCell>
+  );
+}
+
+export function TableCaption({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLTableCaptionElement>) {
+  return (
+    <caption
+      className={cn("mt-4 text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  );
+}
diff --git a/src/components/ui/TableOfContents.tsx b/src/components/ui/TableOfContents.tsx
index 28a21da..eb40352 100644
--- a/src/components/ui/TableOfContents.tsx
+++ b/src/components/ui/TableOfContents.tsx
@@ -44,9 +44,9 @@ export function TableOfContents({ items }: TableOfContentsProps) {
       >
         On This Page
       </p>
-      {items.map((item) => (
+      {items.map((item, index) => (
         <a
-          key={item.id}
+          key={`${item.id}-${index}`}
           href={`#${item.id}`}
           className={cn(
             "block py-1 text-sm transition-colors",
diff --git a/src/hooks/useTableOfContents.ts b/src/hooks/useTableOfContents.ts
index a4466df..8d033c2 100644
--- a/src/hooks/useTableOfContents.ts
+++ b/src/hooks/useTableOfContents.ts
@@ -17,14 +17,14 @@ export function useTableOfContents() {
         "#main-content h2, #main-content h3"
       );
 
-      const tocItems: TocItem[] = Array.from(headings).map((heading) => {
+      const tocItems: TocItem[] = Array.from(headings).map((heading, index) => {
         // Ensure heading has an ID
         if (!heading.id) {
-          const id = heading.textContent
+          const baseId = heading.textContent
             ?.toLowerCase()
             .replace(/[^a-z0-9]+/g, "-")
             .replace(/(^-|-$)/g, "") || "";
-          heading.id = id;
+          heading.id = `${baseId}-${index}`;
         }
 
         return {

From 29cb1d1971170a37f33774d1bbefc025557b7edc Mon Sep 17 00:00:00 2001
From: Polo <nelsonprox92@gmail.com>
Date: Fri, 20 Feb 2026 14:55:20 +0200
Subject: [PATCH 3/4] Enhance table styling and version selector layout

---
 src/app/globals.css                       | 49 +++++++++++++++++++++--
 src/components/layout/DocsLayout.tsx      |  2 +-
 src/components/layout/VersionSelector.tsx | 20 ++++-----
 src/mdx-components.tsx                    | 46 +++++++++++----------
 4 files changed, 80 insertions(+), 37 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index e602bc9..384aeda 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -130,23 +130,29 @@ body {
   margin: 1.5rem 0;
   font-size: 0.875rem;
   line-height: 1.5;
+  border-radius: var(--radius);
+  overflow: hidden;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 }
 
 .prose-doc table thead {
-  border-bottom: 1px solid var(--border);
+  border-bottom: 2px solid var(--border);
 }
 
 .prose-doc table th {
   font-weight: 600;
   text-align: left;
-  padding: 0.75rem 1rem;
+  padding: 0.875rem 1rem;
   border-bottom: 1px solid var(--border);
   background-color: var(--muted);
+  position: sticky;
+  top: 0;
+  z-index: 10;
 }
 
 .prose-doc table tbody tr {
   border-bottom: 1px solid var(--border);
-  transition: background-color 0.2s ease;
+  transition: all 0.2s ease;
 }
 
 .prose-doc table tbody tr:last-child {
@@ -155,16 +161,51 @@ body {
 
 .prose-doc table tbody tr:hover {
   background-color: var(--muted);
+  transform: translateX(2px);
 }
 
 .prose-doc table td {
-  padding: 0.75rem 1rem;
+  padding: 0.875rem 1rem;
   vertical-align: top;
+  border-right: 1px solid var(--border);
+}
+
+.prose-doc table td:last-child {
+  border-right: none;
 }
 
 .prose-doc table td:first-child {
   font-weight: 500;
   color: var(--primary);
+  background-color: var(--muted);
+}
+
+.prose-doc table code {
+  background-color: var(--accent);
+  padding: 0.125rem 0.25rem;
+  border-radius: var(--radius-sm);
+  font-size: 0.875em;
+  font-weight: 500;
+}
+
+.prose-doc table blockquote {
+  margin: 1rem 0;
+  padding: 0.5rem 1rem;
+  border-left: 4px solid var(--primary);
+  background-color: var(--muted);
+  border-radius: 0 var(--radius) var(--radius) 0;
+}
+
+/* Responsive table improvements */
+@media (max-width: 768px) {
+  .prose-doc table {
+    font-size: 0.75rem;
+  }
+  
+  .prose-doc table th,
+  .prose-doc table td {
+    padding: 0.5rem 0.75rem;
+  }
 }
 
 /* Sidebar scrollbar */
diff --git a/src/components/layout/DocsLayout.tsx b/src/components/layout/DocsLayout.tsx
index 4eabfb3..fb5457e 100644
--- a/src/components/layout/DocsLayout.tsx
+++ b/src/components/layout/DocsLayout.tsx
@@ -25,7 +25,7 @@ export function DocsLayout({ children }: DocsLayoutProps) {
         <DeprecationNotice className="mb-6" />
         
         {/* Version selector and page header */}
-        <div className="flex items-center justify-between py-4 border-b mb-6" style={{ borderColor: "var(--border)" }}>
+        <div className="flex items-center justify-end py-4 border-b mb-6" style={{ borderColor: "var(--border)" }}>
           <VersionSelector />
         </div>
 
diff --git a/src/components/layout/VersionSelector.tsx b/src/components/layout/VersionSelector.tsx
index 216c623..5b59250 100644
--- a/src/components/layout/VersionSelector.tsx
+++ b/src/components/layout/VersionSelector.tsx
@@ -18,7 +18,7 @@ export function VersionSelector() {
       <button
         onClick={() => setIsOpen(!isOpen)}
         className={cn(
-          "flex items-center gap-2 px-3 py-1.5 text-sm rounded-md",
+          "flex items-center justify-end gap-1 px-8 py-1.5 text-sm rounded-md",
           "border transition-colors",
           "hover:bg-accent/10 hover:border-primary/50",
           "focus:outline-none focus:ring-2 focus:ring-primary/20"
@@ -31,7 +31,7 @@ export function VersionSelector() {
       >
         <span className="font-medium">{currentVersion.label}</span>
         {currentVersion.deprecated && (
-          <AlertTriangle className="h-3 w-3 text-amber-500" />
+          <AlertTriangle className="h-3 w-3 text-amber-400" />
         )}
         <ChevronDown 
           className={cn(
@@ -45,14 +45,14 @@ export function VersionSelector() {
         <>
           {/* Backdrop */}
           <div 
-            className="fixed inset-0 z-10" 
+            className="fixed inset-0 z-40" 
             onClick={() => setIsOpen(false)}
           />
           
           {/* Dropdown */}
           <div className={cn(
-            "absolute top-full left-0 mt-1 min-w-[250px]",
-            "bg-background/95 backdrop-blur-sm border rounded-md shadow-lg z-20",
+            "absolute top-full left-0 mt-1 min-w-[220px]",
+            "bg-background/95 backdrop-blur-md border rounded-md shadow-lg z-20",
             "py-1"
           )} style={{ borderColor: "var(--border)" }}>
             {versions.map((version) => (
@@ -65,8 +65,8 @@ export function VersionSelector() {
                   router.push(currentPath);
                 }}
                 className={cn(
-                  "w-full px-3 py-2 text-left text-sm cursor-pointer",
-                  "hover:bg-accent/10 transition-colors flex items-center justify-between",
+                  "w-full px-3 py-2 text-left text-sm cursor-pointer flex items-center justify-between",
+                  "hover:bg-accent/10 transition-colors",
                   version.current && "text-primary font-medium",
                   version.deprecated && "text-muted-foreground"
                 )}
@@ -77,14 +77,14 @@ export function VersionSelector() {
                     <AlertTriangle className="h-3 w-3 text-amber-500" />
                   )}
                 </div>
-                <div className="flex items-center gap-2">
+                <div className="flex items-center gap-2 text-xs ">
                   {version.current && (
-                    <span className="text-xs text-muted-foreground">
+                    <span className="text-muted-foreground">
                       (current)
                     </span>
                   )}
                   {version.stable && !version.current && (
-                    <span className="text-xs text-green-600">
+                    <span className="text-green-600">
                       (stable)
                     </span>
                   )}
diff --git a/src/mdx-components.tsx b/src/mdx-components.tsx
index dcb8294..7e79ba0 100644
--- a/src/mdx-components.tsx
+++ b/src/mdx-components.tsx
@@ -2,6 +2,15 @@ import type { MDXComponents } from "mdx/types";
 import { Callout } from "@/components/ui/Callout";
 import { Card, Cards } from "@/components/ui/Card";
 import { CodeBlock } from "@/components/ui/CodeBlock";
+import { 
+  Table, 
+  TableHeader, 
+  TableBody, 
+  TableRow, 
+  TableCell, 
+  TableHead, 
+  TableCaption 
+} from "@/components/ui/Table";
 
 export function useMDXComponents(components: MDXComponents): MDXComponents {
   return {
@@ -126,41 +135,34 @@ export function useMDXComponents(components: MDXComponents): MDXComponents {
       </pre>
     ),
     table: ({ children, ...props }) => (
-      <div
-        className="my-4 w-full overflow-x-auto rounded-lg border"
-        style={{ borderColor: "var(--border)" }}
-      >
-        <table className="w-full text-sm" {...props}>
+      <div className="my-4 w-full overflow-x-auto rounded-lg border border-border">
+        <table className="w-full text-sm border-collapse" {...props}>
           {children}
         </table>
       </div>
     ),
     thead: ({ children, ...props }) => (
-      <thead style={{ background: "rgba(120,252,214,0.05)" }} {...props}>
+      <thead className="border-b border-border bg-muted" {...props}>
         {children}
       </thead>
     ),
+    tbody: ({ children, ...props }) => (
+      <tbody className="[&_tr:last-child]:border-0 [&_tr:hover]:bg-muted/50 [&_tr]:transition-colors [&_tr]:border-b" {...props}>
+        {children}
+      </tbody>
+    ),
+    tr: ({ children, ...props }) => (
+      <tr className="border-b border-border transition-colors hover:bg-muted/50" {...props}>
+        {children}
+      </tr>
+    ),
     th: ({ children, ...props }) => (
-      <th
-        className="px-4 py-3 text-left font-semibold"
-        style={{
-          color: "var(--foreground)",
-          borderBottom: "1px solid var(--border)",
-        }}
-        {...props}
-      >
+      <th className="px-4 py-3 text-left font-semibold" {...props}>
         {children}
       </th>
     ),
     td: ({ children, ...props }) => (
-      <td
-        className="px-4 py-3"
-        style={{
-          color: "var(--foreground)",
-          borderBottom: "1px solid var(--border)",
-        }}
-        {...props}
-      >
+      <td className="px-4 py-3 [&:has([role=checkbox])]:pr-0" {...props}>
         {children}
       </td>
     ),

From f4f5a7c247e99cfd26c742ead311a462068fecc5 Mon Sep 17 00:00:00 2001
From: Polo <nelsonprox92@gmail.com>
Date: Fri, 20 Feb 2026 15:03:15 +0200
Subject: [PATCH 4/4] rReplace Table component with MDXTable for MDX
 compatibility

---
 src/components/ui/MDXTable.tsx               |  96 +++++++++++++
 src/components/ui/Table.tsx                  | 140 -------------------
 src/content/getting-started/introduction.mdx |  27 +++-
 src/mdx-components.tsx                       |  21 +--
 4 files changed, 131 insertions(+), 153 deletions(-)
 create mode 100644 src/components/ui/MDXTable.tsx
 delete mode 100644 src/components/ui/Table.tsx

diff --git a/src/components/ui/MDXTable.tsx b/src/components/ui/MDXTable.tsx
new file mode 100644
index 0000000..b35e834
--- /dev/null
+++ b/src/components/ui/MDXTable.tsx
@@ -0,0 +1,96 @@
+import React from "react";
+import { cn } from "@/lib/utils";
+
+interface MDXTableProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+interface MDXTableHeaderProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+interface MDXTableBodyProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+interface MDXTableRowProps {
+  children: React.ReactNode;
+  className?: string;
+  isFirst?: boolean;
+}
+
+interface MDXTableCellProps {
+  children: React.ReactNode;
+  className?: string;
+  isHeader?: boolean;
+  isFirst?: boolean;
+}
+
+export function MDXTable({ children, className }: MDXTableProps) {
+  return (
+    <div className="my-4 w-full overflow-x-auto rounded-lg border border-border">
+      <table className={cn("w-full text-sm border-collapse", className)}>
+        {children}
+      </table>
+    </div>
+  );
+}
+
+export function MDXTableHeader({ children, className }: MDXTableHeaderProps) {
+  return (
+    <thead className={cn("border-b border-border bg-muted", className)}>
+      {children}
+    </thead>
+  );
+}
+
+export function MDXTableBody({ children, className }: MDXTableBodyProps) {
+  return (
+    <tbody className={cn("[&_tr:last-child]:border-0 [&_tr:hover]:bg-muted/50 [&_tr]:transition-colors [&_tr]:border-b", className)}>
+      {children}
+    </tbody>
+  );
+}
+
+export function MDXTableRow({ children, className, isFirst }: MDXTableRowProps) {
+  return (
+    <tr className={cn(
+      "border-b border-border transition-colors hover:bg-muted/50",
+      isFirst && "font-medium text-primary bg-muted/50",
+      className
+    )}>
+      {children}
+    </tr>
+  );
+}
+
+export function MDXTableCell({ children, className, isHeader, isFirst }: MDXTableCellProps) {
+  const Component = isHeader ? "th" : "td";
+  
+  return (
+    <Component 
+      className={cn(
+        "px-4 py-3 align-middle",
+        isFirst && "font-medium text-primary bg-muted/50",
+        "[&:has([role=checkbox])]:pr-0",
+        className
+      )}
+    >
+      {children}
+    </Component>
+  );
+}
+
+export function MDXTableHead({ children, className }: MDXTableCellProps) {
+  return (
+    <th className={cn(
+      "px-4 py-3 text-left font-semibold bg-muted",
+      className
+    )}>
+      {children}
+    </th>
+  );
+}
diff --git a/src/components/ui/Table.tsx b/src/components/ui/Table.tsx
deleted file mode 100644
index d2dae2b..0000000
--- a/src/components/ui/Table.tsx
+++ /dev/null
@@ -1,140 +0,0 @@
-"use client";
-
-import React from "react";
-import { cn } from "@/lib/utils";
-
-interface TableProps extends React.TableHTMLAttributes<HTMLTableElement> {
-  children: React.ReactNode;
-}
-
-interface TableHeaderProps extends React.HTMLAttributes<HTMLTableSectionElement> {
-  children: React.ReactNode;
-}
-
-interface TableBodyProps extends React.HTMLAttributes<HTMLTableSectionElement> {
-  children: React.ReactNode;
-}
-
-interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {
-  children: React.ReactNode;
-}
-
-interface TableCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
-  children: React.ReactNode;
-  isHeader?: boolean;
-  isFirst?: boolean;
-}
-
-export function Table({ className, children, ...props }: TableProps) {
-  return (
-    <div className="overflow-x-auto rounded-lg border border-border">
-      <table
-        className={cn(
-          "w-full border-collapse bg-background",
-          "text-sm",
-          className
-        )}
-        {...props}
-      >
-        {children}
-      </table>
-    </div>
-  );
-}
-
-export function TableHeader({ className, children, ...props }: TableHeaderProps) {
-  return (
-    <thead
-      className={cn(
-        "border-b border-border bg-muted",
-        "[&_tr]:border-b",
-        className
-      )}
-      {...props}
-    >
-      {children}
-    </thead>
-  );
-}
-
-export function TableBody({ className, children, ...props }: TableBodyProps) {
-  return (
-    <tbody
-      className={cn(
-        "[&_tr:last-child]:border-0",
-        "[&_tr:hover]:bg-muted/50",
-        "[&_tr]:transition-colors",
-        "[&_tr]:border-b",
-        className
-      )}
-      {...props}
-    >
-      {children}
-    </tbody>
-  );
-}
-
-export function TableRow({ className, children, ...props }: TableRowProps) {
-  return (
-    <tr
-      className={cn(
-        "border-b border-border transition-colors hover:bg-muted/50",
-        className
-      )}
-      {...props}
-    >
-      {children}
-    </tr>
-  );
-}
-
-export function TableCell({ 
-  className, 
-  children, 
-  isHeader = false, 
-  isFirst = false, 
-  ...props 
-}: TableCellProps) {
-  const Component = isHeader ? "th" : "td";
-  
-  return (
-    <Component
-      className={cn(
-        "px-4 py-3 align-middle",
-        isFirst && "font-medium text-primary bg-muted/50",
-        "[&:has([role=checkbox])]:pr-0",
-        className
-      )}
-      {...props}
-    >
-      {children}
-    </Component>
-  );
-}
-
-export function TableHead({ className, children, ...props }: TableCellProps) {
-  return (
-    <TableCell
-      isHeader={true}
-      className={cn(
-        "font-semibold text-foreground bg-muted",
-        className
-      )}
-      {...props}
-    >
-      {children}
-    </TableCell>
-  );
-}
-
-export function TableCaption({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLTableCaptionElement>) {
-  return (
-    <caption
-      className={cn("mt-4 text-sm text-muted-foreground", className)}
-      {...props}
-    />
-  );
-}
diff --git a/src/content/getting-started/introduction.mdx b/src/content/getting-started/introduction.mdx
index 47b3bbb..e03aeed 100644
--- a/src/content/getting-started/introduction.mdx
+++ b/src/content/getting-started/introduction.mdx
@@ -19,11 +19,28 @@ At its core, Xether AI gives you:
 
 ## Who Is It For?
 
-| Role                | How Xether AI Helps                                                          |
-| ------------------- | ---------------------------------------------------------------------------- |
-| Data Engineers      | Build and schedule pipelines without writing boilerplate infrastructure code |
-| ML Engineers       | Get clean, versioned datasets with full lineage for reproducible training    |
-| Data Scientists    | Explore dataset versions and generate synthetic data for experimentation     |
+<MDXTable>
+  <MDXTableHeader>
+    <MDXTableRow>
+      <MDXTableHead>Role</MDXTableHead>
+      <MDXTableHead>How Xether AI Helps</MDXTableHead>
+    </MDXTableRow>
+  </MDXTableHeader>
+  <MDXTableBody>
+    <MDXTableRow>
+      <MDXTableCell isFirst>Data Engineers</MDXTableCell>
+      <MDXTableCell>Build and schedule pipelines without writing boilerplate infrastructure code</MDXTableCell>
+    </MDXTableRow>
+    <MDXTableRow>
+      <MDXTableCell isFirst>ML Engineers</MDXTableCell>
+      <MDXTableCell>Get clean, versioned datasets with full lineage for reproducible training</MDXTableCell>
+    </MDXTableRow>
+    <MDXTableRow>
+      <MDXTableCell isFirst>Data Scientists</MDXTableCell>
+      <MDXTableCell>Explore dataset versions and generate synthetic data for experimentation</MDXTableCell>
+    </MDXTableRow>
+  </MDXTableBody>
+</MDXTable>
 
 ## Core Concepts
 
diff --git a/src/mdx-components.tsx b/src/mdx-components.tsx
index 7e79ba0..3ec2ee5 100644
--- a/src/mdx-components.tsx
+++ b/src/mdx-components.tsx
@@ -3,14 +3,13 @@ import { Callout } from "@/components/ui/Callout";
 import { Card, Cards } from "@/components/ui/Card";
 import { CodeBlock } from "@/components/ui/CodeBlock";
 import { 
-  Table, 
-  TableHeader, 
-  TableBody, 
-  TableRow, 
-  TableCell, 
-  TableHead, 
-  TableCaption 
-} from "@/components/ui/Table";
+  MDXTable, 
+  MDXTableHeader, 
+  MDXTableBody, 
+  MDXTableRow, 
+  MDXTableCell, 
+  MDXTableHead 
+} from "@/components/ui/MDXTable";
 
 export function useMDXComponents(components: MDXComponents): MDXComponents {
   return {
@@ -19,6 +18,12 @@ export function useMDXComponents(components: MDXComponents): MDXComponents {
     Card,
     Cards,
     CodeBlock,
+    MDXTable,
+    MDXTableHeader,
+    MDXTableBody,
+    MDXTableRow,
+    MDXTableCell,
+    MDXTableHead,
 
     // Override default HTML elements for consistent styling
     h1: ({ children, ...props }) => (