diff --git a/src/components/SistentNavigation/content.js b/src/components/SistentNavigation/content.js
new file mode 100644
index 000000000000..4f6ce67f484b
--- /dev/null
+++ b/src/components/SistentNavigation/content.js
@@ -0,0 +1,5 @@
+export const content = [
+  { id: 0, link: "/projects/sistent/about", text: "About Sistent" },
+  { id: 1, link: "/projects/sistent/identity", text: "Identity" },
+  { id: 2, link: "/projects/sistent/components", text: "Components" },
+];
diff --git a/src/components/SistentNavigation/index.js b/src/components/SistentNavigation/index.js
new file mode 100644
index 000000000000..9ee2c4df1b69
--- /dev/null
+++ b/src/components/SistentNavigation/index.js
@@ -0,0 +1,58 @@
+import React, { useState } from "react";
+import { HiOutlineChevronLeft } from "@react-icons/all-files/hi/HiOutlineChevronLeft";
+import { Link } from "gatsby";
+import { IoMdClose } from "@react-icons/all-files/io/IoMdClose";
+import { IoIosArrowDropdownCircle } from "@react-icons/all-files/io/IoIosArrowDropdownCircle";
+
+import { content } from "./content";
+
+import TOCWrapper from "../handbook-navigation/toc.style";
+
+const TOC = () => {
+  const [expand, setExpand] = useState(false);
+  return (
+    <TOCWrapper>
+      <div className="go-back">
+        <Link to="/projects/sistent">
+          <HiOutlineChevronLeft />
+          <h4>Table of Contents</h4>
+        </Link>
+        <div className="toc-toggle-btn">
+          {expand ? (
+            <IoMdClose
+              className="toc-menu-icon"
+              onClick={function () {
+                setExpand(!expand);
+              }}
+            />
+          ) : (
+            <IoIosArrowDropdownCircle
+              className="toc-menu-icon"
+              onClick={function () {
+                setExpand(!expand);
+              }}
+            />
+          )}
+        </div>
+      </div>
+      <div className="toc-list">
+        <ul className={`toc-ul ${expand ? "toc-ul-open" : ""}`}>
+          {content.map((x) => (
+            <li key={x.id}>
+              <Link
+                to={x.link}
+                key={x.id}
+                className="toc-sub-heading toc-sub-inline"
+                activeClassName="active"
+              >
+                {x.text}
+              </Link>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </TOCWrapper>
+  );
+};
+
+export default TOC;
diff --git a/src/components/SistentNavigation/toc.style.js b/src/components/SistentNavigation/toc.style.js
new file mode 100644
index 000000000000..b2a235faa256
--- /dev/null
+++ b/src/components/SistentNavigation/toc.style.js
@@ -0,0 +1,125 @@
+import styled from "styled-components";
+
+const TOCWrapper = styled.div`
+  position: sticky;
+  top: 10rem;
+  left: 0rem;
+  margin-left: 3rem;
+  margin-top: 3rem;
+  width: 15rem;
+  padding-bottom: 2rem;
+  @media screen and (min-width: 1280px) and (max-width: 1350px) {
+    margin-left: 0.2rem;
+  }
+
+  .go-back {
+    margin-left: 1rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    a {
+      display: inline-flex;
+      svg {
+        align-self: center;
+        font-size: 1.5rem;
+        color: rgb(177, 182, 184);
+        width: 100%;
+        max-width: 1.5rem;
+      }
+      h4 {
+        font-weight: 500;
+        text-transform: capitalize;
+        font-size: 1.25rem;
+        white-space: nowrap;
+      }
+      &:hover {
+        svg,
+        h4 {
+          color: #3c494f;
+        }
+      }
+    }
+    margin-bottom: 1rem;
+  }
+
+  .toc-sub-heading {
+    color: ${(props) => props.theme.text};
+    transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
+    margin-top: 1rem;
+    font-weight: 300;
+    font-size: 1.15rem;
+  }
+
+  .toc-sub-inline {
+    display: inline-block;
+  }
+
+  .active {
+    font-weight: 500;
+    color: ${(props) => props.theme.secondaryColor};
+  }
+
+  ul {
+    display: flex;
+    flex-direction: column;
+    white-space: nowrap;
+  }
+
+  .toc-ul {
+    display: flex;
+    flex-direction: column;
+    margin-top: 0rem;
+    list-style: none;
+  }
+
+  .toc-toggle-btn {
+    display: none;
+  }
+
+  .toc-ul-open {
+    display: flex;
+    flex-direction: column;
+    margin-top: 0rem;
+    list-style: none;
+    height: auto !important;
+    opacity: 1 !important;
+    margin-bottom: 2rem;
+    transition: all 0.4s !important;
+  }
+
+  .toc-menu-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+    cursor: pointer;
+    fill: ${(props) => props.theme.menuColor};
+  }
+
+  .toc-sub-heading:hover {
+    color: ${(props) => props.theme.secondaryColor};
+  }
+
+  @media only screen and (max-width: 750px) {
+    position: initial;
+    margin-right: 3rem;
+    width: auto;
+    .toc-toggle-btn {
+      display: inline-block;
+    }
+    .go-back {
+      margin-left: 0;
+    }
+
+    .toc-ul {
+      opacity: 0;
+      height: 0;
+      transition: none;
+      visibility: hidden;
+    }
+
+    .toc-ul-open {
+      visibility: visible;
+    }
+  }
+`;
+
+export default TOCWrapper;
diff --git a/src/pages/projects/sistent/about.js b/src/pages/projects/sistent/about.js
index af9feca7d17a..ca244873d926 100644
--- a/src/pages/projects/sistent/about.js
+++ b/src/pages/projects/sistent/about.js
@@ -1,7 +1,8 @@
 import React from "react";
+import SistentAbout from "../../../sections/Projects/Sistent/about";
 
-const SistentAbout = () => {
-  return <div>SistentAbout</div>;
+const SistentAboutPage = () => {
+  return <SistentAbout />;
 };
 
-export default SistentAbout;
+export default SistentAboutPage;
diff --git a/src/pages/projects/sistent/components.js b/src/pages/projects/sistent/components.js
index a10b902ca1e6..3b4aed86f480 100644
--- a/src/pages/projects/sistent/components.js
+++ b/src/pages/projects/sistent/components.js
@@ -1,7 +1,8 @@
 import React from "react";
+import SistentComponents from "../../../sections/Projects/Sistent/components";
 
-const SistentComponents = () => {
-  return <div>SistentComponents</div>;
+const SistentComponentsPage = () => {
+  return <SistentComponents />;
 };
 
-export default SistentComponents;
+export default SistentComponentsPage;
diff --git a/src/pages/projects/sistent/identity.js b/src/pages/projects/sistent/identity.js
index d83d73b75b8a..ec72306e8663 100644
--- a/src/pages/projects/sistent/identity.js
+++ b/src/pages/projects/sistent/identity.js
@@ -1,7 +1,8 @@
 import React from "react";
+import SistentIdentity from "../../../sections/Projects/Sistent/identity";
 
-const SistentIdentity = () => {
-  return <div>SistentIdentity</div>;
+const SistentIdentityPage = () => {
+  return <SistentIdentity />;
 };
 
-export default SistentIdentity;
+export default SistentIdentityPage;
diff --git a/src/sections/Projects/Sistent/about.js b/src/sections/Projects/Sistent/about.js
new file mode 100644
index 000000000000..4e301f965d52
--- /dev/null
+++ b/src/sections/Projects/Sistent/about.js
@@ -0,0 +1,33 @@
+import React from "react";
+import { Container } from "../../../reusecore/Layout";
+import SistentWrapper from "./sistent.style";
+import TOC from "../../../components/SistentNavigation";
+import IntraPage from "../../../components/handbook-navigation/intra-page";
+// import TocPagination from "../../../components/handbook-navigation/TocPagination";
+
+const contents = [{ id: 0, link: "#About Sistent", text: "About Sistent" }];
+
+const SistentAbout = () => {
+  return (
+    <SistentWrapper>
+      <div className="page-header-section">
+        <h1>About Sistent</h1>
+      </div>
+      <TOC />
+      <div className="page-section">
+        <Container>
+          <div className="content">
+            <a id="About Sistent">
+              <h2>About Sistent</h2>
+            </a>
+            <p>Hello !</p>
+          </div>
+          {/* <TocPagination /> */}
+        </Container>
+        <IntraPage contents={contents} />
+      </div>
+    </SistentWrapper>
+  );
+};
+
+export default SistentAbout;
diff --git a/src/sections/Projects/Sistent/components.js b/src/sections/Projects/Sistent/components.js
new file mode 100644
index 000000000000..007352ba5854
--- /dev/null
+++ b/src/sections/Projects/Sistent/components.js
@@ -0,0 +1,30 @@
+import React from "react";
+import { Container } from "../../../reusecore/Layout";
+import SistentWrapper from "./sistent.style";
+import TOC from "../../../components/SistentNavigation";
+import IntraPage from "../../../components/handbook-navigation/intra-page";
+
+const contents = [{ id: 0, link: "#About", text: "" }];
+
+const SistentComponents = () => {
+  return (
+    <SistentWrapper>
+      <div className="page-header-section">
+        <h1>Components</h1>
+      </div>
+      <TOC />
+      <div className="page-section">
+        <Container>
+          <div className="content">
+            <a id="Identity">
+              <h2>Components</h2>
+            </a>
+          </div>
+        </Container>
+        <IntraPage contents={contents} />
+      </div>
+    </SistentWrapper>
+  );
+};
+
+export default SistentComponents;
diff --git a/src/sections/Projects/Sistent/identity.js b/src/sections/Projects/Sistent/identity.js
new file mode 100644
index 000000000000..4ac453f451c6
--- /dev/null
+++ b/src/sections/Projects/Sistent/identity.js
@@ -0,0 +1,30 @@
+import React from "react";
+import { Container } from "../../../reusecore/Layout";
+import SistentWrapper from "./sistent.style";
+import TOC from "../../../components/SistentNavigation";
+import IntraPage from "../../../components/handbook-navigation/intra-page";
+
+const contents = [{ id: 0, link: "#About Sistent", text: "About Sistent" }];
+
+const SistentIdentity = () => {
+  return (
+    <SistentWrapper>
+      <div className="page-header-section">
+        <h1>Identity</h1>
+      </div>
+      <TOC />
+      <div className="page-section">
+        <Container>
+          <div className="content">
+            <a id="Identity">
+              <h2>Identity</h2>
+            </a>
+          </div>
+        </Container>
+        <IntraPage contents={contents} />
+      </div>
+    </SistentWrapper>
+  );
+};
+
+export default SistentIdentity;
diff --git a/src/sections/Projects/Sistent/index.js b/src/sections/Projects/Sistent/index.js
index 9624d01cb771..6996e9b87359 100644
--- a/src/sections/Projects/Sistent/index.js
+++ b/src/sections/Projects/Sistent/index.js
@@ -27,11 +27,6 @@ const SistentHome = () => {
           description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris."
           to="/projects/sistent/components"
         />
-        <HandbookCard
-          title="Patterns & Templates"
-          description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris."
-          to="/projects/sistent/patterns"
-        />
       </div>
     </SistentWrapper>
   );
diff --git a/src/sections/Projects/Sistent/sistent.style.js b/src/sections/Projects/Sistent/sistent.style.js
index 89776698038b..bd2e9f8f0b3f 100644
--- a/src/sections/Projects/Sistent/sistent.style.js
+++ b/src/sections/Projects/Sistent/sistent.style.js
@@ -45,7 +45,6 @@ const SistentWrapper = styled.div`
       padding-top: 7rem;
       margin-top: -7rem;
     }
-    margin-top: -36rem;
     margin-left: 20rem;
     display: flex;
     @media screen and (min-width: 1280px) and (max-width: 1350px) {