diff --git a/frontend/docs/packages-license.md b/frontend/docs/packages-license.md
index dc9a18e4d..0ac2b28c6 100644
--- a/frontend/docs/packages-license.md
+++ b/frontend/docs/packages-license.md
@@ -1,6 +1,6 @@
 # frontend
 
-As of December  4, 2024  7:24am. 1015 total
+As of December  5, 2024  2:30am. 1015 total
 
 ## Summary
 * 883 MIT
diff --git a/frontend/packages/db-structure/src/index.ts b/frontend/packages/db-structure/src/index.ts
index 698decd29..a695c59a4 100644
--- a/frontend/packages/db-structure/src/index.ts
+++ b/frontend/packages/db-structure/src/index.ts
@@ -1,5 +1,9 @@
 export {
   type DBStructure,
   type Table,
+  type Columns,
+  type Column,
+  type Index,
+  type Indices,
   dbStructureSchema,
 } from './schema/index.js'
diff --git a/frontend/packages/erd-core/package.json b/frontend/packages/erd-core/package.json
index 74474ae7c..b056bb97c 100644
--- a/frontend/packages/erd-core/package.json
+++ b/frontend/packages/erd-core/package.json
@@ -7,6 +7,7 @@
   "dependencies": {
     "@liam-hq/ui": "workspace:*",
     "@xyflow/react": "12.3.5",
+    "clsx": "2.1.1",
     "lucide-react": "0.451.0",
     "react": "18.3.1",
     "valtio": "2.1.2"
diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/Columns/Columns.module.css b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/Columns/Columns.module.css
new file mode 100644
index 000000000..722d7495c
--- /dev/null
+++ b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/Columns/Columns.module.css
@@ -0,0 +1,18 @@
+.wrapper {
+  border-bottom: 1px solid var(--global-border);
+}
+
+.heading {
+  padding: var(--spacing-2);
+  border-bottom: 1px solid var(--global-border);
+  color: var(--global-foreground);
+  font-family: var(--main-font);
+  font-size: var(--font-size-2);
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+}
+
+.itemWrapper {
+  border-bottom: 1px solid var(--global-border);
+}
diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/Columns/Columns.tsx b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/Columns/Columns.tsx
new file mode 100644
index 000000000..8220a2008
--- /dev/null
+++ b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/Columns/Columns.tsx
@@ -0,0 +1,21 @@
+import type { Columns as ColumnsType } from '@liam-hq/db-structure'
+import type { FC } from 'react'
+import styles from './Columns.module.css'
+import { ColumnsItem } from './ColumnsItem'
+
+type Props = {
+  columns: ColumnsType
+}
+
+export const Columns: FC<Props> = ({ columns }) => {
+  return (
+    <div className={styles.wrapper}>
+      <h2 className={styles.heading}>Columns</h2>
+      {Object.entries(columns).map(([key, column]) => (
+        <div className={styles.itemWrapper} key={key}>
+          <ColumnsItem column={column} />
+        </div>
+      ))}
+    </div>
+  )
+}
diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/Columns/ColumnsItem/ColumnsItem.module.css b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/Columns/ColumnsItem/ColumnsItem.module.css
new file mode 100644
index 000000000..a2f7a1f50
--- /dev/null
+++ b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/Columns/ColumnsItem/ColumnsItem.module.css
@@ -0,0 +1,84 @@
+.wrapper {
+  display: grid;
+  gap: var(--spacing-2);
+  padding: var(--spacing-4);
+}
+
+.heading {
+  color: var(--global-foreground);
+  font-family: var(--main-font);
+  font-size: var(--font-size-3);
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+
+.comment {
+  color: var(--color-white-alpha-70);
+  font-family: var(--main-font);
+  font-size: var(--font-size-2);
+  font-style: normal;
+  font-weight: 400;
+  line-height: 150%;
+}
+
+.dl {
+  background-color: var(--pane-muted-background);
+  border: solid 1px var(--global-border);
+  border-collapse: separate;
+  border-spacing: 0;
+  border-radius: var(--border-radius-sm);
+}
+
+.dlItem {
+  display: flex;
+  align-items: center;
+}
+
+.dlItem:not(:last-of-type) {
+  border-bottom: solid 1px var(--global-border);
+}
+
+.dt {
+  width: 5.5625rem;
+  padding: var(--spacing-1) var(--spacing-2);
+  border-right: solid 1px var(--global-border);
+  color: var(--color-white-alpha-70);
+  font-family: var(--main-font);
+  font-size: var(--font-size-2);
+  font-style: normal;
+  font-weight: 400;
+  line-height: 150%;
+}
+
+.dd {
+  display: flex;
+  align-items: center;
+  padding: var(--spacing-1) var(--spacing-2);
+  color: var(--global-foreground);
+  font-family: var(--code-font, 'IBM Plex Mono');
+  font-size: var(--font-size-1);
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+
+.dtWithIcon {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  width: 100%;
+  border-style: none;
+}
+
+.primaryKeyIcon {
+  width: 0.75rem;
+  height: 0.75rem;
+  color: var(--primary-accent);
+}
+
+.diamondIcon {
+  width: 0.75rem;
+  height: 0.75rem;
+  color: var(--overlay-70);
+}
diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/Columns/ColumnsItem/ColumnsItem.tsx b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/Columns/ColumnsItem/ColumnsItem.tsx
new file mode 100644
index 000000000..8037c1125
--- /dev/null
+++ b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/Columns/ColumnsItem/ColumnsItem.tsx
@@ -0,0 +1,53 @@
+import type { Column } from '@liam-hq/db-structure'
+import { DiamondFillIcon, DiamondIcon, KeyRound } from '@liam-hq/ui'
+import { clsx } from 'clsx'
+import type { FC } from 'react'
+import styles from './ColumnsItem.module.css'
+
+type Props = {
+  column: Column
+}
+
+export const ColumnsItem: FC<Props> = ({ column }) => {
+  return (
+    <div className={styles.wrapper}>
+      <h3 className={styles.heading}>{column.name}</h3>
+      {column.comment && <p className={styles.comment}>{column.comment}</p>}
+      <dl className={styles.dl}>
+        <div className={styles.dlItem}>
+          <dt className={styles.dt}>Type</dt>
+          <dd className={styles.dd}>{column.type}</dd>
+        </div>
+        {column.default && (
+          <div className={styles.dlItem}>
+            <dt className={styles.dt}>Default</dt>
+            <dd className={styles.dd}>{column.default}</dd>
+          </div>
+        )}
+        {column.primary && (
+          <div className={styles.dlItem}>
+            <dt className={clsx(styles.dt, styles.dtWithIcon)}>
+              <KeyRound className={styles.primaryKeyIcon} />
+              <span>Primary Key</span>
+            </dt>
+          </div>
+        )}
+        {column.notNull ? (
+          <div className={styles.dlItem}>
+            <dt className={clsx(styles.dt, styles.dtWithIcon)}>
+              <DiamondFillIcon className={styles.diamondIcon} />
+              <span>Not-null</span>
+            </dt>
+          </div>
+        ) : (
+          <div className={styles.dlItem}>
+            <dt className={clsx(styles.dt, styles.dtWithIcon)}>
+              <DiamondIcon className={styles.diamondIcon} />
+              <span>Nullable</span>
+            </dt>
+          </div>
+        )}
+      </dl>
+    </div>
+  )
+}
diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/Columns/ColumnsItem/index.ts b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/Columns/ColumnsItem/index.ts
new file mode 100644
index 000000000..d0425b9a0
--- /dev/null
+++ b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/Columns/ColumnsItem/index.ts
@@ -0,0 +1 @@
+export * from './ColumnsItem'
diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/Columns/index.ts b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/Columns/index.ts
new file mode 100644
index 000000000..565a6fa80
--- /dev/null
+++ b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/Columns/index.ts
@@ -0,0 +1 @@
+export * from './Columns'
diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/Comment/Comment.module.css b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/Comment/Comment.module.css
new file mode 100644
index 000000000..e4084085f
--- /dev/null
+++ b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/Comment/Comment.module.css
@@ -0,0 +1,16 @@
+.wrapper {
+  padding: var(--spacing-4);
+  border-bottom: 1px solid var(--global-border);
+}
+
+.text {
+  padding: var(--spacing-2);
+  border-radius: var(--border-radius-base);
+  background: var(--pane-muted-background);
+  color: var(--color-white-alpha-70);
+  font-family: var(--main-font);
+  font-size: var(--font-size-3);
+  font-style: normal;
+  font-weight: 400;
+  line-height: 150%;
+}
diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/Comment/Comment.tsx b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/Comment/Comment.tsx
new file mode 100644
index 000000000..a8c28cf5e
--- /dev/null
+++ b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/Comment/Comment.tsx
@@ -0,0 +1,14 @@
+import type { FC } from 'react'
+import styles from './Comment.module.css'
+
+type Props = {
+  comment: string
+}
+
+export const Comment: FC<Props> = ({ comment }) => {
+  return (
+    <div className={styles.wrapper}>
+      <p className={styles.text}>{comment}</p>
+    </div>
+  )
+}
diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/Comment/index.ts b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/Comment/index.ts
new file mode 100644
index 000000000..85a5c8201
--- /dev/null
+++ b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/Comment/index.ts
@@ -0,0 +1 @@
+export * from './Comment'
diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/Indices/Indices.module.css b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/Indices/Indices.module.css
new file mode 100644
index 000000000..85232182b
--- /dev/null
+++ b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/Indices/Indices.module.css
@@ -0,0 +1,37 @@
+.wrapper {
+  display: grid;
+  gap: var(--spacing-2);
+  padding: var(--spacing-4);
+  border-bottom: 1px solid var(--global-border);
+}
+
+.heading {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  color: var(--global-foreground);
+  font-family: var(--main-font);
+  font-size: var(--font-size-3);
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+
+.icon {
+  width: 0.75rem;
+  height: 0.75rem;
+  color: var(--overlay-70);
+}
+
+.list {
+  list-style: inside;
+}
+
+.listItem {
+  color: var(--color-white-alpha-70);
+  font-family: var(--main-font);
+  font-size: var(--font-size-2);
+  font-style: normal;
+  font-weight: 400;
+  line-height: 150%;
+}
diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/Indices/Indices.tsx b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/Indices/Indices.tsx
new file mode 100644
index 000000000..8195468ab
--- /dev/null
+++ b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/Indices/Indices.tsx
@@ -0,0 +1,26 @@
+import type { Indices as IndicesType } from '@liam-hq/db-structure'
+import { Hash } from '@liam-hq/ui'
+import type { FC } from 'react'
+import styles from './Indices.module.css'
+
+type Props = {
+  indices: IndicesType
+}
+
+export const Indices: FC<Props> = ({ indices }) => {
+  return (
+    <div className={styles.wrapper}>
+      <h2 className={styles.heading}>
+        <Hash className={styles.icon} />
+        <span>Indexes</span>
+      </h2>
+      <ul className={styles.list}>
+        {Object.entries(indices).map(([key, index]) => (
+          <li key={key} className={styles.listItem}>
+            {index.name}
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}
diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/Indices/index.ts b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/Indices/index.ts
new file mode 100644
index 000000000..545b35003
--- /dev/null
+++ b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/Indices/index.ts
@@ -0,0 +1 @@
+export * from './Indices'
diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/RelatedTables/RelatedTables.module.css b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/RelatedTables/RelatedTables.module.css
new file mode 100644
index 000000000..aae4fb241
--- /dev/null
+++ b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/RelatedTables/RelatedTables.module.css
@@ -0,0 +1,27 @@
+.wrapper {
+  display: grid;
+  gap: var(--spacing-4);
+  padding: var(--spacing-4);
+}
+
+.header {
+  display: grid;
+  grid-auto-flow: column;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.heading {
+  color: var(--global-foreground);
+  font-family: var(--main-font);
+  font-size: var(--font-size-3);
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+
+.contentWrapper {
+  border-radius: var(--border-radius-smbase);
+  border: 1px solid var(--pane-border);
+  background: var(--global-background);
+}
diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/RelatedTables/RelatedTables.tsx b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/RelatedTables/RelatedTables.tsx
new file mode 100644
index 000000000..4c74948f1
--- /dev/null
+++ b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/RelatedTables/RelatedTables.tsx
@@ -0,0 +1,19 @@
+import { GotoIcon, IconButton } from '@liam-hq/ui'
+import type { FC } from 'react'
+import styles from './RelatedTables.module.css'
+import img from './related-table-ex.png'
+
+export const RelatedTables: FC = () => {
+  return (
+    <div className={styles.wrapper}>
+      <div className={styles.header}>
+        <h2 className={styles.heading}>Related tables</h2>
+        <IconButton icon={<GotoIcon />} tooltipContent="Go to Related tables" />
+      </div>
+      <div className={styles.contentWrapper}>
+        {/* TODO: Replace the placeholder image with the actual component */}
+        <img alt="related tables" src={img} width="100%" />
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/RelatedTables/index.ts b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/RelatedTables/index.ts
new file mode 100644
index 000000000..91f84e143
--- /dev/null
+++ b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/RelatedTables/index.ts
@@ -0,0 +1 @@
+export * from './RelatedTables'
diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/RelatedTables/related-table-ex.png b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/RelatedTables/related-table-ex.png
new file mode 100644
index 000000000..77e70f0d2
Binary files /dev/null and b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/RelatedTables/related-table-ex.png differ
diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/TableDetail.module.css b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/TableDetail.module.css
new file mode 100644
index 000000000..287d28f43
--- /dev/null
+++ b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/TableDetail.module.css
@@ -0,0 +1,31 @@
+.wrapper {
+  display: grid;
+  grid-template-rows: auto 1fr;
+  width: 500px;
+  height: 100%;
+  border-left: 1px solid var(--pane-border, #383a3b);
+  background-color: var(--pane-background, #232526);
+  box-shadow: 0px 4px 20px 0px var(--shadow-basic-shadow, #000);
+}
+
+.header {
+  display: grid;
+  grid-auto-flow: column;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--spacing-2);
+  border-bottom: 1px solid var(--global-border);
+}
+
+.heading {
+  color: var(--global-foreground);
+  font-family: var(--main-font);
+  font-size: var(--font-size-2);
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+}
+
+.body {
+  overflow-y: scroll;
+}
diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/TableDetail.tsx b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/TableDetail.tsx
new file mode 100644
index 000000000..53d2a9b98
--- /dev/null
+++ b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/TableDetail.tsx
@@ -0,0 +1,35 @@
+import type { Table } from '@liam-hq/db-structure'
+import { DrawerClose, DrawerTitle, IconButton, XIcon } from '@liam-hq/ui'
+import type { FC } from 'react'
+import { Columns } from './Columns'
+import { Comment } from './Comment'
+import { Indices } from './Indices'
+import { RelatedTables } from './RelatedTables'
+import styles from './TableDetail.module.css'
+import { Unique } from './Unique'
+
+type Props = {
+  table: Table
+}
+
+export const TableDetail: FC<Props> = ({ table }) => {
+  return (
+    <section className={styles.wrapper}>
+      <div className={styles.header}>
+        <DrawerTitle asChild>
+          <h1 className={styles.heading}>Table Name</h1>
+        </DrawerTitle>
+        <DrawerClose>
+          <IconButton icon={<XIcon />} tooltipContent="Close" />
+        </DrawerClose>
+      </div>
+      <div className={styles.body}>
+        {table.comment && <Comment comment={table.comment} />}
+        <Columns columns={table.columns} />
+        <Indices indices={table.indices} />
+        <Unique columns={table.columns} />
+        <RelatedTables />
+      </div>
+    </section>
+  )
+}
diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/Unique/Unique.module.css b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/Unique/Unique.module.css
new file mode 100644
index 000000000..85232182b
--- /dev/null
+++ b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/Unique/Unique.module.css
@@ -0,0 +1,37 @@
+.wrapper {
+  display: grid;
+  gap: var(--spacing-2);
+  padding: var(--spacing-4);
+  border-bottom: 1px solid var(--global-border);
+}
+
+.heading {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  color: var(--global-foreground);
+  font-family: var(--main-font);
+  font-size: var(--font-size-3);
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+
+.icon {
+  width: 0.75rem;
+  height: 0.75rem;
+  color: var(--overlay-70);
+}
+
+.list {
+  list-style: inside;
+}
+
+.listItem {
+  color: var(--color-white-alpha-70);
+  font-family: var(--main-font);
+  font-size: var(--font-size-2);
+  font-style: normal;
+  font-weight: 400;
+  line-height: 150%;
+}
diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/Unique/Unique.tsx b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/Unique/Unique.tsx
new file mode 100644
index 000000000..47735456e
--- /dev/null
+++ b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/Unique/Unique.tsx
@@ -0,0 +1,29 @@
+import type { Columns } from '@liam-hq/db-structure'
+import { Fingerprint } from '@liam-hq/ui'
+import type { FC } from 'react'
+import styles from './Unique.module.css'
+
+type Props = {
+  columns: Columns
+}
+
+export const Unique: FC<Props> = ({ columns }) => {
+  return (
+    <div className={styles.wrapper}>
+      <h2 className={styles.heading}>
+        <Fingerprint className={styles.icon} />
+        <span>Unique</span>
+      </h2>
+      <ul className={styles.list}>
+        {Object.entries(columns).map(([key, column]) => {
+          if (!column.unique) return null
+          return (
+            <li key={key} className={styles.listItem}>
+              {column.name}
+            </li>
+          )
+        })}
+      </ul>
+    </div>
+  )
+}
diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/Unique/index.ts b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/Unique/index.ts
new file mode 100644
index 000000000..8e92e2bc6
--- /dev/null
+++ b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/Unique/index.ts
@@ -0,0 +1 @@
+export * from './Unique'
diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/index.ts b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/index.ts
new file mode 100644
index 000000000..1a728ab2c
--- /dev/null
+++ b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/index.ts
@@ -0,0 +1 @@
+export * from './TableDetail'
diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableNode.module.css b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableNode.module.css
index f76c2d0f7..28ca7b8be 100644
--- a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableNode.module.css
+++ b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableNode.module.css
@@ -55,8 +55,4 @@
   top: var(--default-header-height);
   right: 0;
   bottom: 0;
-
-  /* TODO: delete sample code */
-  border: 1px solid white;
-  color: white;
 }
diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableNode.tsx b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableNode.tsx
index c4b0e7c95..14f390a18 100644
--- a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableNode.tsx
+++ b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableNode.tsx
@@ -2,7 +2,6 @@ import type { Table } from '@liam-hq/db-structure'
 import {
   DiamondFillIcon,
   DiamondIcon,
-  DrawerClose,
   DrawerContent,
   DrawerPortal,
   DrawerRoot,
@@ -11,6 +10,7 @@ import {
 } from '@liam-hq/ui'
 import type { Node, NodeProps } from '@xyflow/react'
 import type { FC } from 'react'
+import { TableDetail } from './TableDetail'
 import { TableHeader } from './TableHeader'
 import styles from './TableNode.module.css'
 
@@ -71,8 +71,7 @@ export const TableNode: FC<Props> = ({ data: { table } }) => {
         </DrawerTrigger>
         <DrawerPortal>
           <DrawerContent className={styles.content}>
-            <DrawerClose>Close</DrawerClose>
-            <div>TODO: Render TableDetail Component</div>
+            <TableDetail table={table} />
           </DrawerContent>
         </DrawerPortal>
       </DrawerRoot>
diff --git a/frontend/packages/erd-core/src/images.d.ts b/frontend/packages/erd-core/src/images.d.ts
new file mode 100644
index 000000000..f93a50877
--- /dev/null
+++ b/frontend/packages/erd-core/src/images.d.ts
@@ -0,0 +1,4 @@
+declare module '*.png' {
+  const value: string
+  export default value
+}
diff --git a/frontend/packages/ui/src/components/Drawer/Drawer.tsx b/frontend/packages/ui/src/components/Drawer/Drawer.tsx
index f93b7397a..21de97b33 100644
--- a/frontend/packages/ui/src/components/Drawer/Drawer.tsx
+++ b/frontend/packages/ui/src/components/Drawer/Drawer.tsx
@@ -27,4 +27,6 @@ export const DrawerContent = forwardRef<
 ))
 DrawerContent.displayName = Drawer.Content.displayName
 
+export const DrawerTitle = Drawer.Title
+
 export const DrawerClose = Drawer.Close
diff --git a/frontend/packages/ui/src/components/IconButton/IconButton.module.css b/frontend/packages/ui/src/components/IconButton/IconButton.module.css
new file mode 100644
index 000000000..0f3a800ae
--- /dev/null
+++ b/frontend/packages/ui/src/components/IconButton/IconButton.module.css
@@ -0,0 +1,32 @@
+.iconWrapper {
+  display: grid;
+  place-content: center;
+  place-items: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  border-radius: var(--border-radius-base);
+  transition: background-color var(--default-hover-animation-duration)
+    var(--default-timing-function);
+}
+
+.iconWrapper:hover {
+  background-color: var(--pane-background-active);
+
+  .icon > svg {
+    color: var(--global-foreground);
+  }
+}
+
+.icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.icon > svg {
+  width: 1rem;
+  height: 1rem;
+  color: var(--overlay-70);
+  transition: color var(--default-hover-animation-duration)
+    var(--default-timing-function);
+}
diff --git a/frontend/packages/ui/src/components/IconButton/IconButton.tsx b/frontend/packages/ui/src/components/IconButton/IconButton.tsx
new file mode 100644
index 000000000..0b3f1041f
--- /dev/null
+++ b/frontend/packages/ui/src/components/IconButton/IconButton.tsx
@@ -0,0 +1,38 @@
+import type { ComponentProps, FC, ReactNode } from 'react'
+import {
+  TooltipContent,
+  TooltipPortal,
+  TooltipProvider,
+  TooltipRoot,
+  TooltipTrigger,
+} from '../Tooltip'
+import styles from './IconButton.module.css'
+
+type Props = {
+  icon: ReactNode
+  tooltipSide?: ComponentProps<typeof TooltipContent>['side']
+  tooltipContent: string
+}
+
+export const IconButton: FC<Props> = ({
+  icon,
+  tooltipSide = 'bottom',
+  tooltipContent,
+}) => {
+  return (
+    <TooltipProvider>
+      <TooltipRoot>
+        <TooltipTrigger asChild>
+          <div className={styles.iconWrapper}>
+            <span className={styles.icon}>{icon}</span>
+          </div>
+        </TooltipTrigger>
+        <TooltipPortal>
+          <TooltipContent side={tooltipSide} sideOffset={4}>
+            {tooltipContent}
+          </TooltipContent>
+        </TooltipPortal>
+      </TooltipRoot>
+    </TooltipProvider>
+  )
+}
diff --git a/frontend/packages/ui/src/components/IconButton/index.ts b/frontend/packages/ui/src/components/IconButton/index.ts
new file mode 100644
index 000000000..a37a7fc4a
--- /dev/null
+++ b/frontend/packages/ui/src/components/IconButton/index.ts
@@ -0,0 +1 @@
+export * from './IconButton'
diff --git a/frontend/packages/ui/src/components/index.ts b/frontend/packages/ui/src/components/index.ts
index 07042f3ee..01d795eba 100644
--- a/frontend/packages/ui/src/components/index.ts
+++ b/frontend/packages/ui/src/components/index.ts
@@ -1,5 +1,6 @@
 export * from './Button'
 export * from './Drawer'
 export * from './DropdownMenu'
+export * from './IconButton'
 export * from './Tooltip'
 export * from './Sidebar'
diff --git a/frontend/packages/ui/src/icons/Fingerprint.tsx b/frontend/packages/ui/src/icons/Fingerprint.tsx
new file mode 100644
index 000000000..eb283a507
--- /dev/null
+++ b/frontend/packages/ui/src/icons/Fingerprint.tsx
@@ -0,0 +1,8 @@
+import { Fingerprint as PrimitiveFingerprint } from 'lucide-react'
+import type { ComponentPropsWithoutRef, FC } from 'react'
+
+type Props = ComponentPropsWithoutRef<typeof PrimitiveFingerprint>
+
+export const Fingerprint: FC<Props> = (props) => (
+  <PrimitiveFingerprint strokeWidth={1.5} {...props} />
+)
diff --git a/frontend/packages/ui/src/icons/GotoIcon.tsx b/frontend/packages/ui/src/icons/GotoIcon.tsx
new file mode 100644
index 000000000..5084d6788
--- /dev/null
+++ b/frontend/packages/ui/src/icons/GotoIcon.tsx
@@ -0,0 +1,26 @@
+import type { ComponentPropsWithoutRef, FC } from 'react'
+
+type Props = ComponentPropsWithoutRef<'svg'>
+
+export const GotoIcon: FC<Props> = (props) => {
+  return (
+    <svg
+      role="img"
+      aria-label="Goto"
+      width={24}
+      height={24}
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M20.7643 3.64185C20.8009 3.73028 20.8212 3.82725 20.8212 3.92894L20.8212 9.58579C20.8212 10 20.4854 10.3358 20.0712 10.3358C19.6569 10.3358 19.3212 10 19.3212 9.58579L19.3212 5.7396L11.4091 13.6517C11.1162 13.9446 10.6413 13.9446 10.3484 13.6517C10.0555 13.3588 10.0555 12.8839 10.3484 12.591L18.2605 4.67894H14.4143C14.0001 4.67894 13.6643 4.34315 13.6643 3.92894C13.6643 3.51473 14.0001 3.17894 14.4143 3.17894L20.0712 3.17894C20.2783 3.17894 20.4658 3.26289 20.6015 3.39861C20.6734 3.47052 20.7277 3.55339 20.7643 3.64185Z"
+        fill="currentColor"
+      />
+      <path
+        d="M7.87357 4.81282C8.16646 5.10572 8.16646 5.58059 7.87357 5.87348L2.21671 11.5303C1.98229 11.7648 1.8506 12.0827 1.8506 12.4142C1.8506 12.7457 1.98229 13.0637 2.21671 13.2981L10.702 21.7834C10.9364 22.0178 11.2544 22.1495 11.5859 22.1495C11.9174 22.1495 12.2353 22.0178 12.4698 21.7834L18.1266 16.1265C18.4195 15.8336 18.8944 15.8336 19.1873 16.1265C19.4802 16.4194 19.4802 16.8943 19.1873 17.1872L13.5304 22.844C13.0147 23.3598 12.3152 23.6495 11.5859 23.6495C10.8565 23.6495 10.1571 23.3598 9.64134 22.844L1.15605 14.3588C0.640329 13.843 0.350599 13.1436 0.3506 12.4142C0.350599 11.6849 0.64033 10.9854 1.15605 10.4697L6.81291 4.81282C7.1058 4.51993 7.58068 4.51993 7.87357 4.81282Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}
diff --git a/frontend/packages/ui/src/icons/XIcon.tsx b/frontend/packages/ui/src/icons/XIcon.tsx
index d4b761b81..306f2df56 100644
--- a/frontend/packages/ui/src/icons/XIcon.tsx
+++ b/frontend/packages/ui/src/icons/XIcon.tsx
@@ -1,30 +1,8 @@
+import { XIcon as PrimitiveXIcon } from 'lucide-react'
 import type { ComponentPropsWithoutRef, FC } from 'react'
 
-type Props = ComponentPropsWithoutRef<'svg'>
+type Props = ComponentPropsWithoutRef<typeof PrimitiveXIcon>
 
-export const XIcon: FC<Props> = (props) => {
-  return (
-    <svg
-      role="img"
-      aria-label="X"
-      width="16"
-      height="16"
-      viewBox="0 0 16 16"
-      {...props}
-    >
-      <g clipPath="url(#clip0_152_9120)">
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M0.5 0.5H5.75L9.48421 5.71053L14 0.5H16L10.3895 6.97368L16.5 15.5H11.25L7.51579 10.2895L3 15.5H1L6.61053 9.02632L0.5 0.5ZM12.0204 14L3.42043 2H4.97957L13.5796 14H12.0204Z"
-          fill="currentColor"
-        />
-      </g>
-      <defs>
-        <clipPath id="clip0_152_9120">
-          <rect width="16" height="16" fill="currentColor" />
-        </clipPath>
-      </defs>
-    </svg>
-  )
-}
+export const XIcon: FC<Props> = (props) => (
+  <PrimitiveXIcon strokeWidth={1.5} {...props} />
+)
diff --git a/frontend/packages/ui/src/icons/index.ts b/frontend/packages/ui/src/icons/index.ts
index 4a9c0a4d9..e3396258b 100644
--- a/frontend/packages/ui/src/icons/index.ts
+++ b/frontend/packages/ui/src/icons/index.ts
@@ -1,9 +1,11 @@
 export * from './InfoIcon'
-export * from './XIcon'
 export * from './FacebookIcon'
-export * from './LinkedInIcon'
 export * from './DiamondIcon'
 export * from './DiamondFillIcon'
+export * from './Fingerprint'
+export * from './GotoIcon'
 export * from './Table2'
 export * from './PanelLeft'
-export { KeyRound } from 'lucide-react'
+export * from './XIcon'
+
+export { KeyRound, Hash } from 'lucide-react'
diff --git a/frontend/packages/ui/src/icons/LinkedInIcon.tsx b/frontend/packages/ui/src/logos/LinkedInLogo.tsx
similarity index 97%
rename from frontend/packages/ui/src/icons/LinkedInIcon.tsx
rename to frontend/packages/ui/src/logos/LinkedInLogo.tsx
index c6e9ca67c..57e5dd0a0 100644
--- a/frontend/packages/ui/src/icons/LinkedInIcon.tsx
+++ b/frontend/packages/ui/src/logos/LinkedInLogo.tsx
@@ -2,7 +2,7 @@ import type { ComponentPropsWithoutRef, FC } from 'react'
 
 type Props = ComponentPropsWithoutRef<'svg'>
 
-export const LinkedInIcon: FC<Props> = (props) => {
+export const LinkedInLogo: FC<Props> = (props) => {
   return (
     <svg
       role="img"
diff --git a/frontend/packages/ui/src/logos/XLogo.tsx b/frontend/packages/ui/src/logos/XLogo.tsx
new file mode 100644
index 000000000..9543a891b
--- /dev/null
+++ b/frontend/packages/ui/src/logos/XLogo.tsx
@@ -0,0 +1,30 @@
+import type { ComponentPropsWithoutRef, FC } from 'react'
+
+type Props = ComponentPropsWithoutRef<'svg'>
+
+export const XLogo: FC<Props> = (props) => {
+  return (
+    <svg
+      role="img"
+      aria-label="X"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      {...props}
+    >
+      <g clipPath="url(#clip0_152_9120)">
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M0.5 0.5H5.75L9.48421 5.71053L14 0.5H16L10.3895 6.97368L16.5 15.5H11.25L7.51579 10.2895L3 15.5H1L6.61053 9.02632L0.5 0.5ZM12.0204 14L3.42043 2H4.97957L13.5796 14H12.0204Z"
+          fill="currentColor"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_152_9120">
+          <rect width="16" height="16" fill="currentColor" />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+}
diff --git a/frontend/packages/ui/src/logos/index.ts b/frontend/packages/ui/src/logos/index.ts
index 04a95a6e2..64f3bccab 100644
--- a/frontend/packages/ui/src/logos/index.ts
+++ b/frontend/packages/ui/src/logos/index.ts
@@ -1,3 +1,5 @@
 export * from './GithubLogo'
 export * from './LiamLogo'
 export * from './LiamLogoMark'
+export * from './LinkedInLogo'
+export * from './XLogo'
diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
index 88932952c..d1063d993 100644
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@@ -188,6 +188,9 @@ importers:
       '@xyflow/react':
         specifier: 12.3.5
         version: 12.3.5(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      clsx:
+        specifier: 2.1.1
+        version: 2.1.1
       lucide-react:
         specifier: 0.451.0
         version: 0.451.0(react@18.3.1)