diff --git a/components/JsonToHtml/renderOptions.tsx b/components/JsonToHtml/renderOptions.tsx
index e7ea3a977..e435acbee 100644
--- a/components/JsonToHtml/renderOptions.tsx
+++ b/components/JsonToHtml/renderOptions.tsx
@@ -4,7 +4,7 @@ import { insertResponseToImageVaultAsset } from "@/utils/imageVault"
 
 import ImageContainer from "../ImageContainer"
 import Divider from "../TempDesignSystem/Divider"
-import Table, { TBody, TD, TH, THead, TR } from "../TempDesignSystem/Table"
+import Table from "../TempDesignSystem/Table"
 import BiroScript from "../TempDesignSystem/Text/BiroScript"
 import Body from "../TempDesignSystem/Text/Body"
 import Caption from "../TempDesignSystem/Text/Caption"
@@ -404,9 +404,9 @@ export const renderOptions: RenderOptions = {
     }
     const props = extractPossibleAttributes(node.attrs)
     return (
-      <THead key={node.uid} {...props}>
+      <Table.THead key={node.uid} {...props}>
         {next(node.children, embeds, theadChildPRenderOptions)}
-      </THead>
+      </Table.THead>
     )
   },
 
@@ -418,9 +418,9 @@ export const renderOptions: RenderOptions = {
   ) => {
     const props = extractPossibleAttributes(node.attrs)
     return (
-      <TBody key={node.uid} {...props}>
+      <Table.TBody key={node.uid} {...props}>
         {next(node.children, embeds, fullRenderOptions)}
-      </TBody>
+      </Table.TBody>
     )
   },
 
@@ -455,9 +455,9 @@ export const renderOptions: RenderOptions = {
   ) => {
     const props = extractPossibleAttributes(node.attrs)
     return (
-      <TR key={node.uid} {...props}>
+      <Table.TR key={node.uid} {...props}>
         {next(node.children, embeds, fullRenderOptions)}
-      </TR>
+      </Table.TR>
     )
   },
 
@@ -469,9 +469,9 @@ export const renderOptions: RenderOptions = {
   ) => {
     const props = extractPossibleAttributes(node.attrs)
     return (
-      <TH key={node.uid} {...props}>
+      <Table.TH key={node.uid} {...props}>
         {next(node.children, embeds, fullRenderOptions)}
-      </TH>
+      </Table.TH>
     )
   },
 
@@ -483,9 +483,9 @@ export const renderOptions: RenderOptions = {
   ) => {
     const props = extractPossibleAttributes(node.attrs)
     return (
-      <TD key={node.uid} {...props}>
+      <Table.TD key={node.uid} {...props}>
         {next(node.children, embeds, fullRenderOptions)}
-      </TD>
+      </Table.TD>
     )
   },
 
diff --git a/components/TempDesignSystem/Table/TBody.tsx b/components/TempDesignSystem/Table/TBody.tsx
new file mode 100644
index 000000000..3d6a45dcc
--- /dev/null
+++ b/components/TempDesignSystem/Table/TBody.tsx
@@ -0,0 +1,7 @@
+import styles from "./table.module.css"
+
+function TBody({ children }: React.PropsWithChildren) {
+  return <tbody className={styles.tbody}>{children}</tbody>
+}
+
+export default TBody
diff --git a/components/TempDesignSystem/Table/TD.tsx b/components/TempDesignSystem/Table/TD.tsx
new file mode 100644
index 000000000..3e912e3f2
--- /dev/null
+++ b/components/TempDesignSystem/Table/TD.tsx
@@ -0,0 +1,7 @@
+import styles from "./table.module.css"
+
+function TD({ children }: React.PropsWithChildren) {
+  return <td className={styles.td}>{children}</td>
+}
+
+export default TD
diff --git a/components/TempDesignSystem/Table/TH.tsx b/components/TempDesignSystem/Table/TH.tsx
new file mode 100644
index 000000000..ca2377193
--- /dev/null
+++ b/components/TempDesignSystem/Table/TH.tsx
@@ -0,0 +1,7 @@
+import styles from "./table.module.css"
+
+function TH({ children }: React.PropsWithChildren) {
+  return <th className={styles.th}>{children}</th>
+}
+
+export default TH
diff --git a/components/TempDesignSystem/Table/THead.tsx b/components/TempDesignSystem/Table/THead.tsx
new file mode 100644
index 000000000..f049c168e
--- /dev/null
+++ b/components/TempDesignSystem/Table/THead.tsx
@@ -0,0 +1,7 @@
+import styles from "./table.module.css"
+
+function THead({ children }: React.PropsWithChildren) {
+  return <thead className={styles.thead}>{children}</thead>
+}
+
+export default THead
diff --git a/components/TempDesignSystem/Table/TR.tsx b/components/TempDesignSystem/Table/TR.tsx
new file mode 100644
index 000000000..a48ec8733
--- /dev/null
+++ b/components/TempDesignSystem/Table/TR.tsx
@@ -0,0 +1,7 @@
+import styles from "./table.module.css"
+
+function TR({ children }: React.PropsWithChildren) {
+  return <tr className={styles.tr}>{children}</tr>
+}
+
+export default TR
diff --git a/components/TempDesignSystem/Table/index.tsx b/components/TempDesignSystem/Table/index.tsx
index 867bee1a6..5ba745df5 100644
--- a/components/TempDesignSystem/Table/index.tsx
+++ b/components/TempDesignSystem/Table/index.tsx
@@ -1,27 +1,19 @@
+import TBody from "./TBody"
+import TD from "./TD"
+import TH from "./TH"
+import THead from "./THead"
+import TR from "./TR"
+
 import styles from "./table.module.css"
 
 function Table({ children }: React.PropsWithChildren) {
   return <table className={styles.table}>{children}</table>
 }
 
+Table.THead = THead
+Table.TH = TH
+Table.TBody = TBody
+Table.TD = TD
+Table.TR = TR
+
 export default Table
-
-export function THead({ children }: React.PropsWithChildren) {
-  return <thead className={styles.thead}>{children}</thead>
-}
-
-export function TH({ children }: React.PropsWithChildren) {
-  return <th className={styles.th}>{children}</th>
-}
-
-export function TD({ children }: React.PropsWithChildren) {
-  return <td className={styles.td}>{children}</td>
-}
-
-export function TBody({ children }: React.PropsWithChildren) {
-  return <tbody className={styles.tbody}>{children}</tbody>
-}
-
-export function TR({ children }: React.PropsWithChildren) {
-  return <tr className={styles.tr}>{children}</tr>
-}