diff --git a/src/sections/Community/Handbook/repository.js b/src/sections/Community/Handbook/repository.js
index 353a8eff9716..68c12b8ee88a 100644
--- a/src/sections/Community/Handbook/repository.js
+++ b/src/sections/Community/Handbook/repository.js
@@ -200,11 +200,11 @@ const Repository = () => {
                   <table key={category}>
                     <thead>
                       <tr>
-                        <th>{category}</th>
-                        <th>Language</th>
-                        <th>Description</th>
-                        <th>Maintainers</th>
-                        <th className="linkscol">Repo</th>
+                        <th className="table-container-head">{category}</th>
+                        <th className="table-container-head">Language</th>
+                        <th className="table-container-head">Description</th>
+                        <th className="table-container-head">Maintainers</th>
+                        <th className="linkscol table-container-head">Repo</th>
                       </tr>
                     </thead>
                     {backendProject.subdata.map((subdata) => {
@@ -212,7 +212,7 @@ const Repository = () => {
                       const smpClass = project === "SMP Action";
                       const siteIconClasses = smpClass ? "site-icon inline smp-action" : "site-icon inline";
                       return (
-                        <tbody key={project}>
+                        <tbody className="table-container-body" key={project}>
                           <tr>
                             <td>
                               <img className={siteIconClasses} src={image} alt="project" />&nbsp;{project} </td>
diff --git a/src/sections/Projects/Sistent/identity/color/code.js b/src/sections/Projects/Sistent/identity/color/code.js
index 070d0eab6e2a..9085b521f8d8 100644
--- a/src/sections/Projects/Sistent/identity/color/code.js
+++ b/src/sections/Projects/Sistent/identity/color/code.js
@@ -26,6 +26,83 @@ import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
 const ColorCode = () => {
   const { isDark } = useStyledDarkMode();
   const location = useLocation();
+  const colorColumns = ["Token", "Value"];
+  const colorData = [
+    { token: "keppel-70", value: { name: "Keppel", hex: "#daf3eb", swatchClass: "keppel-70" } },
+    { token: "keppel-60", value: { name: "Keppel", hex: "#93E6D1", swatchClass: "keppel-60" } },
+    { token: "keppel-50", value: { name: "Keppel", hex: "#41CCB3", swatchClass: "keppel-50" } },
+    { token: "keppel-40", value: { name: "Keppel", hex: "#00B39F", swatchClass: "keppel-40" } },
+    { token: "keppel-30", value: { name: "Keppel", hex: "#007763", swatchClass: "keppel-30" } },
+    { token: "keppel-20", value: { name: "Keppel", hex: "#006661", swatchClass: "keppel-20" } },
+    { token: "keppel-10", value: { name: "Keppel", hex: "#00403F", swatchClass: "keppel-10" } },
+    { token: "caribbean-70", value: { name: "Caribbean", hex: "#E6FFF6", swatchClass: "caribbean-70" } },
+    { token: "caribbean-60", value: { name: "Caribbean", hex: "#A3FFE0", swatchClass: "caribbean-60" } },
+    { token: "caribbean-50", value: { name: "Caribbean", hex: "#78FAD3", swatchClass: "caribbean-50" } },
+    { token: "caribbean-40", value: { name: "Caribbean", hex: "#00D3A9", swatchClass: "caribbean-40" } },
+    { token: "caribbean-30", value: { name: "Caribbean", hex: "#00AD90", swatchClass: "caribbean-30" } },
+    { token: "caribbean-20", value: { name: "Caribbean", hex: "#006157", swatchClass: "caribbean-20" } },
+    { token: "caribbean-10", value: { name: "Caribbean", hex: "#003B37", swatchClass: "caribbean-10" } },
+    { token: "Saffron-70", value: { name: "Saffron", hex: "#FFFEE6", swatchClass: "Saffron-70" } },
+    { token: "Saffron-60", value: { name: "Saffron", hex: "#FFFBBD", swatchClass: "Saffron-60" } },
+    { token: "Saffron-50", value: { name: "Saffron", hex: "#FFEB6B", swatchClass: "Saffron-50" } },
+    { token: "Saffron-40", value: { name: "Saffron", hex: "#EBC017", swatchClass: "Saffron-40" } },
+    { token: "Saffron-30", value: { name: "Saffron", hex: "#C4990A", swatchClass: "Saffron-30" } },
+    { token: "Saffron-20", value: { name: "Saffron", hex: "#785400", swatchClass: "Saffron-20" } },
+    { token: "Saffron-10", value: { name: "Saffron", hex: "#523600", swatchClass: "Saffron-10" } }
+  ];
+  const GreyscaleColorData = [
+    { token: "charcoal-100", value: { name: "Charcoal", hex: "#fdfdfd", swatchClass: "charcoal-100" } },
+    { token: "charcoal-90", value: { name: "Charcoal", hex: "#EAEDEE", swatchClass: "charcoal-90" } },
+    { token: "charcoal-80", value: { name: "Charcoal", hex: "#D2D8DA", swatchClass: "charcoal-80" } },
+    { token: "charcoal-70", value: { name: "Charcoal", hex: "#B1B9BC", swatchClass: "charcoal-70" } },
+    { token: "charcoal-60", value: { name: "Charcoal", hex: "#8C999E", swatchClass: "charcoal-60" } },
+    { token: "charcoal-50", value: { name: "Charcoal", hex: "#647176", swatchClass: "charcoal-50" } },
+    { token: "charcoal-40", value: { name: "Charcoal", hex: "#3C494E", swatchClass: "charcoal-40" } },
+    { token: "charcoal-30", value: { name: "Charcoal", hex: "#28353A", swatchClass: "charcoal-30" } },
+    { token: "charcoal-20", value: { name: "Charcoal", hex: "#142126", swatchClass: "charcoal-20" } },
+    { token: "charcoal-10", value: { name: "Charcoal", hex: "#000D12", swatchClass: "charcoal-10" } },
+    { token: "accent_grey-90", value: { name: "Accent Grey", hex: "#E7EFF3", swatchClass: "accent_grey-90" } },
+    { token: "accent_grey-80", value: { name: "Accent Grey", hex: "#ABBDC5", swatchClass: "accent_grey-80" } },
+    { token: "accent_grey-70", value: { name: "Accent Grey", hex: "#ABBDC5", swatchClass: "accent_grey-70" } },
+    { token: "accent_grey-60", value: { name: "Accent Grey", hex: "#8D9FA7", swatchClass: "accent_grey-60" } },
+    { token: "accent_grey-50", value: { name: "Accent Grey", hex: "#6F8189", swatchClass: "accent_grey-50" } },
+    { token: "accent_grey-40", value: { name: "Accent Grey", hex: "#51636B", swatchClass: "accent_grey-40" } },
+    { token: "accent_grey-30", value: { name: "Accent Grey", hex: "#3D4F57", swatchClass: "accent_grey-30" } },
+    { token: "accent_grey-20", value: { name: "Accent Grey", hex: "#293B43", swatchClass: "accent_grey-20" } },
+    { token: "accent_grey-10", value: { name: "Accent Grey", hex: "#15272F", swatchClass: "accent_grey-10" } },
+    
+  ];
+  const FunctionColorData = [
+    { token: "blue-70", value: { name: "Blue", hex: "#F0FBFF", swatchClass: "blue-70" } },
+    { token: "blue-60", value: { name: "Blue", hex: "#9EDDFF", swatchClass: "blue-60" } },
+    { token: "blue-50", value: { name: "Blue", hex: "#75CAFF", swatchClass: "blue-50" } },
+    { token: "blue-40", value: { name: "Blue", hex: "#2196F3", swatchClass: "blue-40" } },
+    { token: "blue-30", value: { name: "Blue", hex: "#1272CC", swatchClass: "blue-30" } },
+    { token: "blue-20", value: { name: "Blue", hex: "#0754A6", swatchClass: "blue-20" } },
+    { token: "blue-10", value: { name: "Blue", hex: "#003980", swatchClass: "blue-10" } },
+    { token: "green-70", value: { name: "Green", hex: "#EFFCED", swatchClass: "green-70" } },
+    { token: "green-60", value: { name: "Green", hex: "#B2E3AF", swatchClass: "green-60" } },
+    { token: "green-50", value: { name: "Green", hex: "#5BC95B", swatchClass: "green-50" } },
+    { token: "green-40", value: { name: "Green", hex: "#36BC3B", swatchClass: "green-40" } },
+    { token: "green-30", value: { name: "Green", hex: "#15701E", swatchClass: "green-30" } },
+    { token: "green-20", value: { name: "Green", hex: "#0A4A13", swatchClass: "green-20" } },
+    { token: "green-10", value: { name: "Green", hex: "#05240A", swatchClass: "green-10" } },
+    { token: "yellow-70", value: { name: "Yellow", hex: "#FFFBE6", swatchClass: "yellow-70" } },
+    { token: "yellow-60", value: { name: "Yellow", hex: "#FFEFA6", swatchClass: "yellow-60" } },
+    { token: "yellow-50", value: { name: "Yellow", hex: "#FFE37D", swatchClass: "yellow-50" } },
+    { token: "yellow-40", value: { name: "Yellow", hex: "#F0D053", swatchClass: "yellow-40" } },
+    { token: "yellow-30", value: { name: "Yellow", hex: "#F0A303", swatchClass: "yellow-30" } },
+    { token: "yellow-20", value: { name: "Yellow", hex: "#C98300", swatchClass: "yellow-20" } },
+    { token: "yellow-10", value: { name: "Yellow", hex: "#A36500", swatchClass: "yellow-10" } },
+    { token: "red-70", value: { name: "Red", hex: "#F2E3DA", swatchClass: "red-70" } },
+    { token: "red-60", value: { name: "Red", hex: "#E6B093", swatchClass: "red-60" } },
+    { token: "red-50", value: { name: "Red", hex: "#BF471F", swatchClass: "red-50" } },
+    { token: "red-40", value: { name: "Red", hex: "#F91313", swatchClass: "red-40" } },
+    { token: "red-30", value: { name: "Red", hex: "#B32700", swatchClass: "red-30" } },
+    { token: "red-20", value: { name: "Red", hex: "#8C1A00", swatchClass: "red-20" } },
+    { token: "red-10", value: { name: "Red", hex: "#660F00", swatchClass: "red-10" } },
+  ];
+
   return (
     <SistentLayout title="Color">
       <div className="content">
@@ -89,35 +166,104 @@ const ColorCode = () => {
             not have any role descriptions.
           </p>
           <h3>Brand Colors</h3>
-          <Row className="image-container" Hcenter>
-            <Col md={8} lg={8} sm={12}>
-              <img
-                width="100%"
-                src={isDark ? BrandColorsDark : BrandColors}
-                alt="Brand colors"
-              />
-            </Col>
-          </Row>
+      <div className="color-table">
+          <table >
+      <thead>
+        <tr>
+          {colorColumns.map((column, index) => (
+            <th className="color-th" key={index}><div className="color-col">{column}</div></th>
+          ))}
+        </tr>
+      </thead>
+      <tbody>
+        {colorData.map((row, index) => (
+          <tr key={index} className={index % 2 === 0 ? "shades" : "light"}>
+            <td>
+              <div className="key">
+                <div className="token-col">{row.token}</div>
+                <div className="token-col2">{row.token}</div>
+              </div>
+            </td>
+            <td>
+              <div className="value">
+                <div className="hex-color">
+                  <div className="color1">Name - {row.value.name}</div>
+                  <div className="color2">Hex Code - {row.value.hex}</div>
+                </div>
+                <div className={`swatch ${row.value.swatchClass}`}></div>
+              </div>
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+    </div>
           <h3>Greyscale Colors</h3>
-          <Row className="image-container" Hcenter>
-            <Col md={8} lg={8} sm={12}>
-              <img
-                width="100%"
-                src={isDark ? GreyscaleColorsDark : GreyscaleColors}
-                alt="Greyscale colors"
-              />
-            </Col>
-          </Row>
+          <div className="color-table">
+          <table >
+      <thead className="color-head">
+        <tr className="color-row">
+          {colorColumns.map((column, index) => (
+            <th className="color-th" key={index}><div className="color-col">{column}</div></th>
+          ))}
+        </tr>
+      </thead>
+      <tbody>
+        {GreyscaleColorData.map((row, index) => (
+          <tr key={index} className={index % 2 === 0 ? "shades" : "light"}>
+            <td>
+              <div className="key">
+                <div className="token-col">{row.token}</div>
+                <div className="token-col2">{row.token}</div>
+              </div>
+            </td>
+            <td>
+              <div className="value">
+                <div className="hex-color">
+                  <div className="color1">Name - {row.value.name}</div>
+                  <div className="color2">Hex Code - {row.value.hex}</div>
+                </div>
+                <div className={`swatch ${row.value.swatchClass}`}></div>
+              </div>
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+    </div>
           <h3>Function Colors</h3>
-          <Row className="image-container" Hcenter>
-            <Col md={8} lg={8} sm={12}>
-              <img
-                width="100%"
-                src={isDark ? FunctionColorsDark : FunctionColors}
-                alt="Function colors"
-              />
-            </Col>
-          </Row>
+          <div className="color-table">
+          <table >
+      <thead className="color-head">
+        <tr className="color-row">
+          {colorColumns.map((column, index) => (
+            <th className="color-th" key={index}><div className="color-col">{column}</div></th>
+          ))}
+        </tr>
+      </thead>
+      <tbody>
+        {FunctionColorData.map((row, index) => (
+          <tr key={index} className={index % 2 === 0 ? "shades" : "light"}>
+            <td>
+              <div className="key">
+                <div className="token-col">{row.token}</div>
+                <div className="token-col2">{row.token}</div>
+              </div>
+            </td>
+            <td>
+              <div className="value">
+                <div className="hex-color">
+                  <div className="color1">Name - {row.value.name}</div>
+                  <div className="color2">Hex Code - {row.value.hex}</div>
+                </div>
+                <div className={`swatch ${row.value.swatchClass}`}></div>
+              </div>
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+    </div>
           <a id="Semantic Category">
             <h2>Semantic Category</h2>
           </a>
diff --git a/src/sections/Projects/Sistent/sistent.style.js b/src/sections/Projects/Sistent/sistent.style.js
index 0d4b43ba8f25..35c741527e25 100644
--- a/src/sections/Projects/Sistent/sistent.style.js
+++ b/src/sections/Projects/Sistent/sistent.style.js
@@ -116,7 +116,7 @@ const SistentWrapper = styled.div`
     padding-bottom: 4rem;
   }
 
-  table {
+  .table-container table {
     border-collapse: collapse;
     width: 98%;
     margin: 1rem 0 2rem 0;
@@ -144,8 +144,8 @@ const SistentWrapper = styled.div`
     }
   }
 
-  td,
-  th {
+  .table-container td,
+  th .table-container-head{
     border: 0.05rem solid ${(props) => props.theme.primaryLightColor};
     text-align: left;
     padding: 0.5rem;
@@ -157,8 +157,8 @@ const SistentWrapper = styled.div`
     width: 8%;
   }
 
-  tbody:nth-child(even) {
-    background-color: ${(props) => props.theme.secondaryLightColorTwo};
+  tbody:nth-child(even) .table-container-body{
+     background-color: ${(props) => props.theme.secondaryLightColorTwo};
     transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
   }
 
@@ -823,6 +823,345 @@ const SistentWrapper = styled.div`
       overflow: auto;
     }
   }
+
+
+  .color-table{
+  width :100%;
+        
+
+  }
+
+
+
+   .color-col{
+   margin: auto;
+             
+             
+             font-family: Qanelas Soft;
+             font-size: 16px;
+             font-weight: 700;
+             line-height: 28px;
+             text-align: left;
+
+
+  }
+             .color-th{
+             width : 50%;
+             padding-top:1rem;
+             padding-bottom: 1rem;
+             }
+ 
+      .color-col{
+                 width: 86.5%;
+                 margin: auto;
+               }
+    
+    .token-col2{
+               visibility:hidden;
+               height: 50%;
+            }
+  
+  .color-table{
+    table {
+    
+    
+     border: 1px solid #C9DBE3 !important;
+     border-radius: 16px!important;
+     margin: auto!important;
+      border-spacing: 0px;
+            width: 66.6%;
+             border: 1px solid red;
+          
+     
+     
+     tbody{
+       tr{
+         td{
+           
+          .key{
+          
+            padding-top: 1rem;
+            padding-bottom: 1rem;
+            margin-left: 2rem;
+            margin-right: 2rem;
+            
+            .token-col{
+              width: 100%;
+              margin: auto;
+              height: 50%;
+              font-family: Consolas;
+              font-size: 12px;
+              font-weight: 400;
+              line-height: 24px;
+              text-align: left;
+              color: #000D12;
+            }
+            
+          }
+          }
+           .value{
+            
+            display: flex;
+           width: 86.5%;
+              margin: auto;
+            .hex-color{
+              width: 100%;
+              .color1{
+                font-family: Open Sans;
+                font-size: 12px;
+                font-weight: 400;
+                line-height: 24px;
+               
+
+              }
+              .color2{
+              font-family: Open Sans;
+                font-size: 12px;
+                font-weight: 400;
+                line-height: 24px;
+              }
+            }
+            .swatch {
+              margin: auto;
+              width: 32px;
+              height: 32px;
+              border-radius: 4px;
+              border: 1px solid #51636B;
+            }
+           
+          
+        }
+         
+      }
+       
+    }  
+           
+   }
+    
+  }
+
+             .keppel-70{
+              background-color: #DAF2EB;
+            }
+               .keppel-60{
+               background-color: #93E6D1;
+              }
+             .keppel-50{
+                  background-color: #41CCB3;
+                 }
+            .keppel-40{
+            background-color: #00B39F;
+            }
+           .keppel-30{
+             background-color: #007763;
+            }
+            .keppel-20{
+             background-color: #006661;
+             }
+            .keppel-10{
+              background-color: #00403F;
+            }
+            .caribbean-70{
+             background-color: #E6FFF6;
+             }
+           .caribbean-60{
+             background-color: #A3FFE0;
+             }
+           .caribbean-50{
+            background-color: #78FAD3;
+            }
+           .caribbean-40{
+            background-color: #00D3A9;
+            }
+           .caribbean-30{
+             background-color: #00AD90;
+            }
+           .caribbean-20{
+            background-color: #006157;
+            }
+           .caribbean-10{
+             background-color: #003B37;
+            }
+            .Saffron-70{
+              background-color: #FFFEE6;
+            }
+            .Saffron-60{
+              background-color: #FFFBBD;
+            }
+            .Saffron-50{
+              background-color: #FFEB6B;
+            }
+            .Saffron-40{
+              background-color: #EBC017;
+            }
+            .Saffron-30{
+              background-color: #C4990A;
+            }
+            .Saffron-20{
+              background-color: #785400;
+            }
+            .Saffron-10{
+              background-color: #523600;
+            }
+              .charcoal-100{
+             background-color: #fdfdfd;
+             }
+            .charcoal-90{
+             background-color: #EAEDEE;
+             }
+            .charcoal-80{
+              background-color: #D2D8DA;
+            }
+            .charcoal-70{
+             background-color: #B1B9BC;
+             }
+           .charcoal-60{
+             background-color: #8C999E;
+             }
+           .charcoal-50{
+            background-color: #647176;
+            }
+           .charcoal-40{
+            background-color: #3C494E;
+            }
+           .charcoal-30{
+             background-color: #28353A;
+            }
+           .charcoal-20{
+            background-color: #142126;
+            }
+           .charcoal-10{
+             background-color: #000D12;
+            }
+             .accent_grey-90{
+              background-color: #E7EFF3;
+            }
+              .accent_grey-80{
+              background-color: #ABBDC5;
+            }
+            .accent_grey-70{
+              background-color: #ABBDC5;
+            }
+            .accent_grey-60{
+              background-color: #8D9FA7;
+            }
+            .accent_grey-50{
+              background-color: #6F8189;
+            }
+            .accent_grey-40{
+              background-color: #51636B;
+            }
+            .accent_grey-30{
+              background-color: #3D4F57;
+            }
+            .accent_grey-20{
+              background-color: #293B43;
+            }
+            .accent_grey-10{
+              background-color: #15272F;
+            }
+                .blue-70{
+              background-color: #F0FBFF;
+            }
+               .blue-60{
+               background-color: #9EDDFF;
+              }
+             .blue-50{
+                  background-color: #75CAFF;
+                 }
+            .blue-40{
+            background-color: #2196F3;
+            }
+           .blue-30{
+             background-color: #1272CC;
+            }
+            .blue-20{
+             background-color: #0754A6;
+             }
+            .blue-10{
+              background-color: #003980;
+            }
+            .green-70{
+             background-color: #EFFCED;
+             }
+           .green-60{
+             background-color: #B2E3AF;
+             }
+           .green-50{
+            background-color: #5BC95B;
+            }
+           .green-40{
+            background-color: #36BC3B;
+            }
+           .green-30{
+             background-color: #15701E;
+            }
+           .green-20{
+            background-color: #0A4A13;
+            }
+           .green-10{
+             background-color: #05240A;
+            }
+            .yellow-70{
+              background-color: #FFFBE6;
+            }
+            .yellow-60{
+              background-color: #FFEFA6;
+            }
+            .yellow-50{
+              background-color: #FFE37D;
+            }
+            .yellow-40{
+              background-color: #F0D053;
+            }
+            .yellow-30{
+              background-color: #F0A303;
+            }
+            .yellow-20{
+              background-color: #785400;
+            }
+            .yellow-10{
+              background-color: #A36500;
+            }
+               .red-70{
+              background-color: #F2E3DA;
+            }
+            .red-60{
+              background-color: #E6B093;
+            }
+            .red-50{
+              background-color: #BF471F;
+            }
+            .red-40{
+              background-color: #F91313;
+            }
+            .red-30{
+              background-color: #B32700;
+            }
+            .red-20{
+              background-color: #8C1A00;
+            }
+            .red-10{
+              background-color: #660F00;
+            }
+            tr.shades {
+             background-color: #E7EFF3 !important;
+            }
+            tr.light{
+            background-color: none;
+            }
+
+            tbody tr:last-child td:first-child {
+             border-bottom-left-radius: 16px; 
+            }
+
+            tbody tr:last-child td:last-child {
+              border-bottom-right-radius: 16px; 
+            }
+
+         
+
+     
 `;
 
 export default SistentWrapper;