diff --git a/src/sections/Projects/Sistent/identity/typography/code.js b/src/sections/Projects/Sistent/identity/typography/code.js
index 159daa3eeca86..58ddc70a5dc4e 100644
--- a/src/sections/Projects/Sistent/identity/typography/code.js
+++ b/src/sections/Projects/Sistent/identity/typography/code.js
@@ -1,16 +1,371 @@
-import React from "react";
+import React, { useState } from "react";
 import { navigate } from "gatsby";
 import { useLocation } from "@reach/router";
 
-import TypeTable1 from "../../../../../assets/images/app/projects/sistent/type-table-1-light.png";
-import TypeTable1Dark from "../../../../../assets/images/app/projects/sistent/type-table-1-dark.png";
-
-import TypeTable2 from "../../../../../assets/images/app/projects/sistent/type-table-2-light.png";
-import TypeTable2Dark from "../../../../../assets/images/app/projects/sistent/type-table-2-dark.png";
-import { Col, Row } from "../../../../../reusecore/Layout";
-import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
 import { SistentLayout } from "../../sistent-layout";
+import { Col, Row } from "../../../../../reusecore/Layout";
 import Button from "../../../../../reusecore/Button";
+import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
+
+import {
+  styled,
+  Table,
+  TableContainer,
+  TableCell,
+  TableRow,
+  TableHead,
+  TableBody,
+  SistentThemeProvider,
+  CustomTooltip,
+  Box,
+} from "@sistent/sistent";
+import { copyToClipboard } from "../../../../../components/CodeBlock/copy-to-clipboard.js";
+
+// Table data
+const primitiveTokens = [
+  {
+    token: "typeset-1",
+    size: "64px/4rem",
+    lineHeight: "80px/5rem",
+    sample: "Aa",
+  },
+  {
+    token: "typeset-2",
+    size: "52px/3.25rem",
+    lineHeight: "64px/4rem",
+    sample: "Aa",
+  },
+  {
+    token: "typeset-3",
+    size: "32px/2rem",
+    lineHeight: "40px/2.5rem",
+    sample: "Aa",
+  },
+  {
+    token: "typeset-4",
+    size: "24px/1.5rem",
+    lineHeight: "36px/2.25rem",
+    sample: "Aa",
+  },
+  {
+    token: "typeset-5",
+    size: "16px/1rem",
+    lineHeight: "28px/1.75rem",
+    sample: "Aa",
+  },
+  {
+    token: "typeset-6",
+    size: "14px/0.875rem",
+    lineHeight: "24px/1.5rem",
+    sample: "Aa",
+  },
+  {
+    token: "typeset-7",
+    size: "12px/0.75rem",
+    lineHeight: "16px/1rem",
+    sample: "Aa",
+  },
+];
+const semanticTokens = [
+  {
+    token: "text-h1-bold",
+    desktop: {
+      typeface: "Qanelas Soft",
+      size: "52px / 3.25rem",
+      lineHeight: "64px / 4rem",
+      weight: "Bold / 700",
+      category: "Heading",
+      case: "Sentence case",
+    },
+    mobile: {
+      typeface: "Qanelas Soft",
+      size: "32px / 2rem",
+      lineHeight: "40px / 2.5rem",
+      weight: "Bold / 700",
+      category: "Heading",
+      case: "Sentence case",
+    },
+    sample: "Aa",
+  },
+  {
+    token: "text-h2-medium",
+    desktop: {
+      typeface: "Qanelas Soft",
+      size: "32px / 2rem",
+      lineHeight: "40px / 2.5rem",
+      weight: "Medium / 500",
+      category: "Sub-heading",
+      case: "Title case",
+    },
+    mobile: {
+      typeface: "Qanelas Soft",
+      size: "24px / 1.5rem",
+      lineHeight: "36px / 2.25rem",
+      weight: "Medium / 500",
+      category: "Sub-heading",
+      case: "Title case",
+    },
+    sample: "Aa",
+  },
+  {
+    token: "text-h3-medium/bold",
+    desktop: {
+      typeface: "Qanelas Soft",
+      size: "24px / 1.5rem",
+      lineHeight: "36px / 2.25rem",
+      weight: "Medium / 500",
+      category: "Sub-heading",
+      case: "Title case",
+    },
+    mobile: {
+      typeface: "Qanelas Soft",
+      size: "16px / 1rem",
+      lineHeight: "28px / 1.75rem",
+      weight: "Bold / 700",
+      category: "Sub-heading",
+      case: "Sentence case",
+    },
+    sample: "Aa",
+  },
+  {
+    token: "text-b1-regular",
+    desktop: {
+      typeface: "Open Sans",
+      size: "16px / 1rem",
+      lineHeight: "28px / 1.75rem",
+      weight: "Regular / 400",
+      category: "Body",
+      case: "Sentence case",
+    },
+    mobile: {
+      typeface: "Open Sans",
+      size: "16px / 1rem",
+      lineHeight: "28px / 1.75rem",
+      weight: "Regular / 400",
+      category: "Body",
+      case: "Sentence case",
+    },
+    sample: "Aa",
+  },
+  {
+    token: "text-b2-semibold",
+    desktop: {
+      typeface: "Open Sans",
+      size: "16px / 1rem",
+      lineHeight: "28px / 1.75rem",
+      weight: "Semi-bold / 600",
+      category: "Body",
+      case: "Sentence case",
+    },
+    mobile: {
+      typeface: "Open Sans",
+      size: "16px / 1rem",
+      lineHeight: "28px / 1.75rem",
+      weight: "Semi-bold / 600",
+      category: "Body",
+      case: "Sentence case",
+    },
+    sample: "Aa",
+  },
+
+  {
+    token: "text-b3-regular",
+    desktop: {
+      typeface: "Open Sans",
+      size: "14px / 0.875rem",
+      lineHeight: "24px / 1.5rem",
+      weight: "Regular / 400",
+      category: "Body",
+      case: "Sentence case",
+    },
+    mobile: {
+      typeface: "Open Sans",
+      size: "14px / 0.875rem",
+      lineHeight: "24px / 1.5rem",
+      weight: "Regular / 400",
+      category: "Body",
+      case: "Sentence case",
+    },
+    sample: "Aa",
+  },
+  {
+    token: "text-l1-bold",
+    desktop: {
+      typeface: "Qanelas Soft",
+      size: "12px / 0.75rem",
+      lineHeight: "16px / 1rem",
+      weight: "Bold / 700",
+      category: "Label",
+      case: "Sentence case",
+    },
+    mobile: {
+      typeface: "Qanelas Soft",
+      size: "12px / 0.75rem",
+      lineHeight: "16px / 1rem",
+      weight: "Bold / 700",
+      category: "Label",
+      case: "Sentence case",
+    },
+    sample: "Aa",
+  },
+  {
+    token: "text-l2-regular",
+    desktop: {
+      typeface: "Open Sans",
+      size: "12px / 0.75rem",
+      lineHeight: "24px / 1.5rem",
+      weight: "Regular / 400",
+      category: "Label",
+      case: "Sentence case",
+    },
+    mobile: {
+      typeface: "Open Sans",
+      size: "12px / 0.75rem",
+      lineHeight: "24px / 1.5rem",
+      weight: "Regular / 400",
+      category: "Label",
+      case: "Sentence case",
+    },
+    sample: "Aa",
+  },
+  {
+    token: "text-c1-regular",
+    desktop: {
+      typeface: "Consolas",
+      size: "12px / 0.75rem",
+      lineHeight: "24px / 1.5rem",
+      weight: "Regular / 400",
+      category: "Code",
+      case: "Sentence case",
+    },
+    mobile: {
+      typeface: "Consolas",
+      size: "12px / 0.75rem",
+      lineHeight: "24px / 1.5rem",
+      weight: "Regular / 400",
+      category: "Code",
+      case: "Sentence case",
+    },
+    sample: "aa",
+  },
+  {
+    token: "text-c2-regular",
+    desktop: {
+      typeface: "Consolas",
+      size: "16px / 1rem",
+      lineHeight: "28px / 1.75rem",
+      weight: "Regular / 400",
+      category: "Code",
+      case: "Sentence case",
+    },
+    mobile: {
+      typeface: "Consolas",
+      size: "16px / 1rem",
+      lineHeight: "28px / 1.75rem",
+      weight: "Regular / 400",
+      category: "Code",
+      case: "Sentence case",
+    },
+    sample: "aa",
+  },
+];
+
+const CopyCell = ({ value }) => {
+  const [copyText, setCopyText] = useState("Copy");
+
+  const handleCopy = async () => {
+    await copyToClipboard(value);
+    setCopyText("Copied");
+    setTimeout(() => setCopyText("Copy"), 1000);
+  };
+  return (
+    <CustomTooltip
+      title={copyText === "Copied" ? "Copied" : "Copy"}
+      enterDelay={800}
+      leaveDelay={10}
+      placement="right"
+    >
+      <Box
+        sx={{
+          position: "relative",
+          display: "inline-flex",
+          alignItems: "center",
+          cursor: "pointer",
+          padding: "2px 4px",
+          borderRadius: "3px",
+          transition: "background-color 0.2s ease",
+          "&:hover": {
+            backgroundColor: (theme) =>
+              theme.palette.action?.hover || "rgba(0, 0, 0, 0.04)",
+          },
+        }}
+        onClick={handleCopy}
+      >
+        <span>{value}</span>
+      </Box>
+    </CustomTooltip>
+  );
+};
+
+const TypographyPreviewBox = styled("div")(
+  ({ theme, size, lineHeight, weight, caseStyle, typeface }) => ({
+    fontSize: size,
+    lineHeight: lineHeight,
+    fontWeight: weight,
+    fontFamily: typeface || "inherit",
+    textTransform:
+      caseStyle === "uppercase"
+        ? "uppercase"
+        : caseStyle === "lowercase"
+          ? "lowercase"
+          : caseStyle === "capitalize"
+            ? "capitalize"
+            : "none",
+    border: `1px solid ${theme.palette.text.primary}`,
+    borderRadius: "4px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: theme.palette.background.paper,
+    width: "80px",
+    height: "80px",
+    boxSizing: "border-box",
+    overflow: "hidden",
+    color: theme.palette.text.primary,
+    minWidth: "80px",
+    minHeight: "80px",
+  }),
+);
+
+const StyledTableRow = styled(TableRow)(({ theme }) => ({
+  "&:nth-of-type(odd)": {
+    backgroundColor: theme.palette.background.default,
+  },
+  "&:nth-of-type(even)": {
+    backgroundColor: theme.palette.background.secondary,
+  },
+}));
+
+const StyledTableContainer = styled(TableContainer)(() => ({
+  width: "100%",
+  backgroundColor: "transparent",
+  boxShadow: "none",
+  padding: 0,
+}));
+
+const StyledTableCell = styled(TableCell)(({ theme }) => ({
+  color: theme.palette.text.secondary,
+  fontSize: "0.975rem",
+  padding: "0.75rem",
+  borderBottom: `1px solid ${theme.palette.divider}`,
+  borderRadius: "4px",
+  height: "60px",
+  verticalAlign: "middle",
+}));
+
+const StyledHeaderCell = styled(StyledTableCell)(() => ({
+  fontWeight: 600,
+}));
 
 const TypographyCode = () => {
   const location = useLocation();
@@ -81,14 +436,47 @@ const TypographyCode = () => {
             arises, these typesets, serve as the reference size for any new font
             to be created.
           </p>
-          <Row Hcenter className="image-container">
-            <Col md={10} lg={10} sm={12}>
-              <img
-                src={isDark ? TypeTable1Dark : TypeTable1}
-                alt="Type Table"
-              />
-            </Col>
-          </Row>
+
+          <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+            <Row className="table-container" $Hcenter>
+              <Col md={12} sx={{ px: 0 }}>
+                <StyledTableContainer>
+                  <Table size="small">
+                    <TableHead>
+                      <TableRow>
+                        <StyledHeaderCell>Token</StyledHeaderCell>
+                        <StyledHeaderCell>Size</StyledHeaderCell>
+                        <StyledHeaderCell>Line Height</StyledHeaderCell>
+                        <StyledHeaderCell>Preview</StyledHeaderCell>
+                      </TableRow>
+                    </TableHead>
+                    <TableBody>
+                      {primitiveTokens.map((t) => (
+                        <StyledTableRow key={t.token}>
+                          <StyledTableCell>
+                            <CopyCell value={t.token} />
+                          </StyledTableCell>
+                          <StyledTableCell>{t.size}</StyledTableCell>
+                          <StyledTableCell>{t.lineHeight}</StyledTableCell>
+                          <StyledTableCell align="center">
+                            <TypographyPreviewBox
+                              size={t.size.split("/")[0]}
+                              lineHeight={t.lineHeight.split("/")[0]}
+                              weight="500"
+                              typeface="Qanelas Soft"
+                            >
+                              {t.sample}
+                            </TypographyPreviewBox>
+                          </StyledTableCell>
+                        </StyledTableRow>
+                      ))}
+                    </TableBody>
+                  </Table>
+                </StyledTableContainer>
+              </Col>
+            </Row>
+          </SistentThemeProvider>
+
           <a id="Semantic Category">
             <h2>Semantic Category</h2>
           </a>
@@ -97,14 +485,111 @@ const TypographyCode = () => {
             suitable for certain use cases either across all platforms or in any
             given platform.
           </p>
-          <Row Hcenter className="image-container">
-            <Col md={10} lg={10} sm={12}>
-              <img
-                src={isDark ? TypeTable2Dark : TypeTable2}
-                alt="Type Table"
-              />
-            </Col>
-          </Row>
+
+          <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+            <Row className="table-container" $Hcenter>
+              <Col md={12} sx={{ px: 0 }}>
+                <StyledTableContainer>
+                  <Table size="small">
+                    <TableHead>
+                      <TableRow>
+                        <StyledHeaderCell>Token</StyledHeaderCell>
+                        <StyledHeaderCell>Desktop</StyledHeaderCell>
+                        <StyledHeaderCell>Preview</StyledHeaderCell>
+                        <StyledHeaderCell>Mobile</StyledHeaderCell>
+                        <StyledHeaderCell>Preview</StyledHeaderCell>
+                      </TableRow>
+                    </TableHead>
+                    <TableBody>
+                      {semanticTokens.map((t) => (
+                        <StyledTableRow key={t.token}>
+                          <StyledTableCell>
+                            <CopyCell value={t.token} />
+                          </StyledTableCell>
+                          <StyledTableCell>
+                            <strong>Typeface:</strong> {t.desktop.typeface}
+                            <br />
+                            <strong>Size:</strong> {t.desktop.size}
+                            <br />
+                            <strong>Line Height:</strong> {t.desktop.lineHeight}
+                            <br />
+                            <strong>Weight:</strong> {t.desktop.weight}
+                            <br />
+                            <strong>Category:</strong> {t.desktop.category}
+                            <br />
+                            <strong>Case Style:</strong> {t.desktop.case}
+                          </StyledTableCell>
+                          <StyledTableCell align="center">
+                            <TypographyPreviewBox
+                              size={t.desktop.size.split("/")[0]}
+                              lineHeight={t.desktop.lineHeight.split("/")[0]}
+                              weight={
+                                t.desktop.weight.includes("Bold")
+                                  ? "700"
+                                  : t.desktop.weight.includes("Semi-bold")
+                                    ? "600"
+                                    : t.desktop.weight.includes("Medium")
+                                      ? "500"
+                                      : "400"
+                              }
+                              typeface={t.desktop.typeface}
+                              caseStyle={
+                                t.desktop.case
+                                  .toLowerCase()
+                                  .includes("uppercase")
+                                  ? "uppercase"
+                                  : "none"
+                              }
+                            >
+                              {t.sample}
+                            </TypographyPreviewBox>
+                          </StyledTableCell>
+                          <StyledTableCell>
+                            <strong>Typeface:</strong> {t.mobile.typeface}
+                            <br />
+                            <strong>Size:</strong> {t.mobile.size}
+                            <br />
+                            <strong>Line Height:</strong> {t.mobile.lineHeight}
+                            <br />
+                            <strong>Weight:</strong> {t.mobile.weight}
+                            <br />
+                            <strong>Category:</strong> {t.mobile.category}
+                            <br />
+                            <strong>Case Style:</strong> {t.mobile.case}
+                          </StyledTableCell>
+                          <StyledTableCell align="center">
+                            <TypographyPreviewBox
+                              size={t.mobile.size.split("/")[0]}
+                              lineHeight={t.mobile.lineHeight.split("/")[0]}
+                              weight={
+                                t.mobile.weight.includes("Bold")
+                                  ? "700"
+                                  : t.mobile.weight.includes("Semi-bold")
+                                    ? "600"
+                                    : t.mobile.weight.includes("Medium")
+                                      ? "500"
+                                      : "400"
+                              }
+                              typeface={t.mobile.typeface}
+                              caseStyle={
+                                t.mobile.case
+                                  .toLowerCase()
+                                  .includes("uppercase")
+                                  ? "uppercase"
+                                  : "none"
+                              }
+                            >
+                              {t.sample}
+                            </TypographyPreviewBox>
+                          </StyledTableCell>
+                        </StyledTableRow>
+                      ))}
+                    </TableBody>
+                  </Table>
+                </StyledTableContainer>
+              </Col>
+            </Row>
+          </SistentThemeProvider>
         </div>
       </div>
     </SistentLayout>