diff --git a/src/pages/projects/sistent/components/Table/index.js b/src/pages/projects/sistent/components/Table/index.js
new file mode 100644
index 000000000000..9f05cc826e5c
--- /dev/null
+++ b/src/pages/projects/sistent/components/Table/index.js
@@ -0,0 +1,9 @@
+import React from "react";
+import { DataTable } from "../../../../../sections/Projects/Sistent/components/Table";
+
+
+const SistentModalPage = () => {
+  return <DataTable />;
+};
+
+export default SistentModalPage;
\ No newline at end of file
diff --git a/src/sections/Projects/Sistent/components/Table/code.js b/src/sections/Projects/Sistent/components/Table/code.js
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/src/sections/Projects/Sistent/components/Table/guidance.js b/src/sections/Projects/Sistent/components/Table/guidance.js
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/src/sections/Projects/Sistent/components/Table/index.js b/src/sections/Projects/Sistent/components/Table/index.js
new file mode 100644
index 000000000000..25be7ea8fa86
--- /dev/null
+++ b/src/sections/Projects/Sistent/components/Table/index.js
@@ -0,0 +1,90 @@
+
+import React from "react";
+import { SistentLayout } from "../../sistent-layout";
+import TabButton from "../../../../../reusecore/Button";
+import { navigate } from "gatsby";
+import { ResponsiveDataTable, SistentThemeProviderWithoutBaseLine } from "@layer5/sistent";
+import { basicColumns, basicData, basicOptions, customColumns, customData, options } from "./table-column";
+
+export const DataTable = () => {
+
+  return (
+    <SistentLayout title="Table">
+      <div className="content">
+        <a id="Identity">
+          <h2>Table</h2>
+        </a>
+        <p>
+            Datatables is a responsive datatables component. It comes with features like filtering, resizable columns, view/hide columns, draggable columns, search, export to CSV download, printing, selectable rows, expandable rows, pagination, and sorting. On top of the ability to customize styling on most views, there are three responsive modes "vertical", "standard", and "simple" for mobile/tablet devices.
+        </p>
+        <div className="filterBtns">
+          <TabButton
+            className={
+              location.pathname === "/projects/sistent/components/table"
+                ? "active"
+                : ""
+            }
+            onClick={() => navigate("/projects/sistent/components/table")}
+            title="Overview"
+          />
+          {/* <TabButton
+            className={
+              location.pathname ===
+              "/projects/sistent/components/modal/guidance"
+                ? "active"
+                : ""
+            }
+            onClick={() =>
+              navigate("/projects/sistent/components/modal/guidance")
+            }
+            title="Guidance"
+          /> */}
+          <TabButton
+            className={
+              location.pathname === "/projects/sistent/components/table/code"
+                ? "active"
+                : ""
+            }
+            onClick={() => navigate("/projects/sistent/components/table/code")}
+            title="Code"
+          />
+        </div>
+        <div className="main-content">
+          <p>
+            Tables display information in a way that's easy to scan, so that users can look for patterns and insights. They can be embedded in primary content, such as cards. They can include:
+
+            - A corresponding visualization
+            - Tools to query and manipulate data
+            - Controls for adjusting the visualization
+
+          </p>
+          <h3>Basic</h3>
+          <p>
+            A simple example of a table with three columns: Name, Type, and Description.
+          </p>
+          <SistentThemeProviderWithoutBaseLine>
+            <ResponsiveDataTable
+              columns={basicColumns}
+              data={basicData}
+              options={basicOptions}
+            />
+          </SistentThemeProviderWithoutBaseLine>
+
+          <h3>With customized columns</h3>
+          <p>
+            A table with customized columns. Here data can be sorted and filtered.
+          </p>
+          <SistentThemeProviderWithoutBaseLine>
+            <ResponsiveDataTable
+              columns={customColumns}
+              data={customData}
+              options={options}
+            />
+          </SistentThemeProviderWithoutBaseLine>
+
+        </div>
+      </div>
+    </SistentLayout>
+  );
+};
+
diff --git a/src/sections/Projects/Sistent/components/Table/table-column.js b/src/sections/Projects/Sistent/components/Table/table-column.js
new file mode 100644
index 000000000000..74d141cfd4cc
--- /dev/null
+++ b/src/sections/Projects/Sistent/components/Table/table-column.js
@@ -0,0 +1,54 @@
+export const basicColumns = ["Name", "Company", "City", "State"];
+
+export const basicData = [
+  ["Joe James", "Test Corp", "Yonkers", "NY"],
+  ["John Walsh", "Test Corp", "Hartford", "CT"],
+  ["Bob Herm", "Test Corp", "Tampa", "FL"],
+  ["James Houston", "Test Corp", "Dallas", "TX"],
+];
+
+export const basicOptions = {
+  filterType: "checkbox",
+};
+
+export const customColumns = [
+  {
+    name: "Name",
+    options: {
+      filter: true,
+      sort: true,
+    },
+  },
+  {
+    name: "Company",
+    options: {
+      filter: true,
+      sort: false,
+    },
+  },
+  {
+    name: "City",
+    options: {
+      filter: true,
+      sort: false,
+    },
+  },
+  {
+    name: "State",
+    options: {
+      filter: true,
+      sort: false,
+    },
+  },
+];
+
+export const customData = [
+  { name: "Joe James", company: "Test Corp", city: "Yonkers", state: "NY" },
+  { name: "John Walsh", company: "Test Corp", city: "Hartford", state: "CT" },
+  { name: "Bob Herm", company: "Test Corp", city: "Tampa", state: "FL" },   { name: "James Houston", company: "Test Corp", city: "Dallas", state: "TX" },
+];
+
+export const options = {
+  filterType: "checkbox",
+};
+
diff --git a/src/sections/Projects/Sistent/components/index.js b/src/sections/Projects/Sistent/components/index.js
index 8bb294655b0f..77f856537981 100644
--- a/src/sections/Projects/Sistent/components/index.js
+++ b/src/sections/Projects/Sistent/components/index.js
@@ -30,6 +30,13 @@ const componentsData = [
       "A text input is made up of multiple elements that combine to form a component that helps users to read, write, and edit text in an interface.",
     url: "/projects/sistent/components/modal",
   },
+  {
+    id: 4,
+    name: "Data Table",
+    description:
+      "A select input is a form element that allows users to select one option from a list of options.",
+    url: "/projects/sistent/components/table",
+  }
 ];
 
 const SistentComponents = () => {