diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index 700f07a89..8e81f9bba 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -22,6 +22,7 @@ const preview: Preview = {
           ['Colors', 'Typography', 'Icons', 'Errors', 'Loading'],
           'Candidate Components',
           'Design Templates',
+          ['Table', ['Documentation', 'Filters'], 'Observability', 'Directory'],
           'Contributing',
           ['Introduction', 'Commits', 'Testing in the platforms', 'Release Process', 'Maintainers'],
         ],
diff --git a/docs/Design Templates/Cell-link.dmx b/docs/Design Templates/Table/Cell Badge.mdx
similarity index 100%
rename from docs/Design Templates/Cell-link.dmx
rename to docs/Design Templates/Table/Cell Badge.mdx
diff --git a/docs/Design Templates/Table/Cell Link.mdx b/docs/Design Templates/Table/Cell Link.mdx
new file mode 100644
index 000000000..ad9acf92a
--- /dev/null
+++ b/docs/Design Templates/Table/Cell Link.mdx	
@@ -0,0 +1 @@
+![](../../assets/test.png)
diff --git a/docs/Design Templates/cell-more-actions.mdx b/docs/Design Templates/Table/Cell More Actions.mdx
similarity index 100%
rename from docs/Design Templates/cell-more-actions.mdx
rename to docs/Design Templates/Table/Cell More Actions.mdx
diff --git a/docs/Design Templates/cell-badge b/docs/Design Templates/Table/Cell Tag.mdx
similarity index 100%
rename from docs/Design Templates/cell-badge
rename to docs/Design Templates/Table/Cell Tag.mdx
diff --git a/docs/Design Templates/Filters.mdx b/docs/Design Templates/Table/Filters.mdx
similarity index 99%
rename from docs/Design Templates/Filters.mdx
rename to docs/Design Templates/Table/Filters.mdx
index c40aa5d2d..a975af459 100644
--- a/docs/Design Templates/Filters.mdx	
+++ b/docs/Design Templates/Table/Filters.mdx	
@@ -1,4 +1,4 @@
-### Filters
+# Filters
 
 *Note: This section covers filters specifically for tables. For query-related filters, please refer to the [Analytics Filters - Coming Soon](#coming).*
 
diff --git a/docs/Design Templates/Table.mdx b/docs/Design Templates/Table/Table.mdx
similarity index 99%
rename from docs/Design Templates/Table.mdx
rename to docs/Design Templates/Table/Table.mdx
index e204b75e4..9d737df2a 100644
--- a/docs/Design Templates/Table.mdx	
+++ b/docs/Design Templates/Table/Table.mdx	
@@ -1,4 +1,5 @@
-### Table 
+# Table 
+
 #### Overview
 Tables present and organize data in a structured, readable format, ranging from basic displays to complex interfaces that support queries and data manipulation.
 #### Filter Bar
diff --git a/docs/Design Templates/tags.mdx b/docs/Design Templates/Table/Tags.mdx
similarity index 100%
rename from docs/Design Templates/tags.mdx
rename to docs/Design Templates/Table/Tags.mdx
diff --git a/docs/Design Templates/cell-tag b/docs/Design Templates/cell-tag
deleted file mode 100644
index 8b1378917..000000000
--- a/docs/Design Templates/cell-tag	
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/docs/Foundations/Icons.mdx b/docs/Foundations/Icons.mdx
index 7a772608a..fe4438d4f 100644
--- a/docs/Foundations/Icons.mdx
+++ b/docs/Foundations/Icons.mdx
@@ -82,8 +82,6 @@ bash
 
 ### FAQ
 
-### Q&A
-
 **Q:** What if an icon in Figma has a FontAwesome name or doesn't follow the standard naming format? Should I name it myself?  
 **A:** Please contact the design team. They'll provide the correct name and make sure the icon is properly reflected in the design library.
 
diff --git a/docs/components/data-display/Tag/Documentation.mdx b/docs/components/data-display/Tag/Documentation.mdx
new file mode 100644
index 000000000..6d845f901
--- /dev/null
+++ b/docs/components/data-display/Tag/Documentation.mdx
@@ -0,0 +1,9 @@
+import { Meta } from '@storybook/blocks';
+
+import * as TagStories from '../../../../src/components/data-display/Tag/Tag.stories';
+
+<Meta of={TagStories} />
+
+# Tag
+
+This is the documentation for the tags component
\ No newline at end of file
diff --git a/src/components/data-display/Table/Table.stories.tsx b/src/components/data-display/Table/Table.stories.tsx
index 745a3e1e4..3fb878cb3 100644
--- a/src/components/data-display/Table/Table.stories.tsx
+++ b/src/components/data-display/Table/Table.stories.tsx
@@ -1,5 +1,7 @@
 import { type Meta, type StoryObj } from '@storybook/react'
 import { Table } from 'src/components/data-display/Table/Table'
+import { Space, Tag } from 'antd'
+import type { TableProps } from 'antd'
 
 const meta: Meta<typeof Table> = {
   title: 'Components/Data Display/Table',
@@ -11,4 +13,91 @@ export default meta
 
 type Story = StoryObj<typeof Table>
 
-export const Primary: Story = {}
+// export const Primary: Story = {}
+
+const columns: TableProps<DataType>['columns'] = [
+  {
+    title: 'Name',
+    dataIndex: 'name',
+    key: 'name',
+    render: text => <a>{text}</a>,
+  },
+  {
+    title: 'Age',
+    dataIndex: 'age',
+    key: 'age',
+  },
+  {
+    title: 'Address',
+    dataIndex: 'address',
+    key: 'address',
+  },
+  {
+    title: 'Tags',
+    key: 'tags',
+    dataIndex: 'tags',
+    render: (_, { tags }) => (
+      <>
+        {tags.map(tag => {
+          let color = tag.length > 5 ? 'geekblue' : 'green'
+          if (tag === 'loser') {
+            color = 'volcano'
+          }
+          return (
+            <Tag color={color} key={tag}>
+              {tag.toUpperCase()}
+            </Tag>
+          )
+        })}
+      </>
+    ),
+  },
+  {
+    title: 'Action',
+    key: 'action',
+    render: (_, record) => (
+      <Space size="middle">
+        <a>Invite {record.name}</a>
+        <a>Delete</a>
+      </Space>
+    ),
+  },
+]
+
+const data: DataType[] = [
+  {
+    key: '1',
+    name: 'John Brown',
+    age: 32,
+    address: 'New York No. 1 Lake Park',
+    tags: ['nice', 'developer'],
+  },
+  {
+    key: '2',
+    name: 'Jim Green',
+    age: 42,
+    address: 'London No. 1 Lake Park',
+    tags: ['loser'],
+  },
+  {
+    key: '3',
+    name: 'Joe Black',
+    age: 32,
+    address: 'Sydney No. 1 Lake Park',
+    tags: ['cool', 'teacher'],
+  },
+]
+
+export const Secondary: Story = {
+  render: () => {
+    return <Table<DataType> columns={columns} dataSource={data} />
+  },
+}
+
+interface DataType {
+  key: string
+  name: string
+  age: number
+  address: string
+  tags: string[]
+}