diff --git a/apps/docs/components/Table.tsx b/apps/docs/components/Table.tsx
index dec8afe8723..4fa967d90b6 100644
--- a/apps/docs/components/Table.tsx
+++ b/apps/docs/components/Table.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import React, { TableHTMLAttributes, useEffect, useRef, useState } from 'react'
 import { cn } from 'ui'
 
diff --git a/apps/docs/content/guides/observability/log-field-reference.mdx b/apps/docs/content/guides/observability/log-field-reference.mdx
index ded838e551b..23bec25e0eb 100644
--- a/apps/docs/content/guides/observability/log-field-reference.mdx
+++ b/apps/docs/content/guides/observability/log-field-reference.mdx
@@ -13,7 +13,7 @@ For example, the schema path `metadata.request.cf.country` is queried as `log_at
     <Tabs scrollable size="small" type="underlined" defaultActiveId="edge_logs" queryGroup="source">
       {logConstants.schemas.map((schema) => (
         <TabPanel id={schema.reference} key={schema.reference} label={schema.name}>
-          <table>
+          <Table>
             <thead>
               <tr>
                 <th className="font-bold">Schema path</th>
@@ -36,7 +36,7 @@ For example, the schema path `metadata.request.cf.country` is queried as `log_at
                   </tr>
                 ))}
             </tbody>
-          </table>
+          </Table>
         </TabPanel>
       ))}
     </Tabs>
diff --git a/apps/docs/features/docs/MdxBase.shared.tsx b/apps/docs/features/docs/MdxBase.shared.tsx
index d3704faeff8..592f8826926 100644
--- a/apps/docs/features/docs/MdxBase.shared.tsx
+++ b/apps/docs/features/docs/MdxBase.shared.tsx
@@ -20,6 +20,7 @@ import { RealtimeLimitsEstimator } from '~/components/RealtimeLimitsEstimator'
 import { RegionsList, SmartRegionsList } from '~/components/RegionsList'
 import { SharedData } from '~/components/SharedData'
 import StepHikeCompact from '~/components/StepHikeCompact'
+import Table from '~/components/Table'
 import { TerraformProviderSchema } from '~/components/TerraformProviderSchema'
 import { WrapperDashboardIntegration } from '~/components/WrapperDashboardIntegration'
 import { CodeSampleDummy, CodeSampleWrapper } from '~/features/directives/CodeSample.client'
@@ -109,6 +110,7 @@ const components = {
   ShowUntil,
   SqlToRest,
   StepHikeCompact,
+  Table,
   Tabs,
   TabPanel,
   TerraformProviderSchema,
@@ -130,6 +132,7 @@ const components = {
     </Heading>
   ),
   pre: Pre,
+  table: Table,
   /**
    * Force inline code tags to go sync, this prevents Heading anchor resolution fail due to
    * our CodeBlock component being async. We need to find a better solution for more future