diff --git a/gatsby-node.js b/gatsby-node.js
index 1fd9d3eb694b9..bf96eed7e0d2f 100644
--- a/gatsby-node.js
+++ b/gatsby-node.js
@@ -727,10 +727,6 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
   });
 
   const components = componentsData.map((component) => component.src.replace("/", ""));
-
-
-
-
   const createComponentPages = (createPage, components) => {
     const pageTypes = [
       { suffix: "", file: "index.js" },
diff --git a/src/components/handbook-navigation/TocPagination.js b/src/components/handbook-navigation/TocPagination.js
index f70d04bf7477a..953f70412b3cd 100644
--- a/src/components/handbook-navigation/TocPagination.js
+++ b/src/components/handbook-navigation/TocPagination.js
@@ -22,7 +22,7 @@ const TocPagination = () => {
       ) : null}
 
       {currentPage < content.length - 1 ? (
-        <Button $primary $url={content[currentPage + 1]?.link}>
+        <Button $primary $url={content[currentPage + 1]?.link} onClick={() => console.log("button is clicked")}>
           Next &rarr;
         </Button>
       ) : null}
diff --git a/src/sections/Projects/Sistent/components/content.js b/src/sections/Projects/Sistent/components/content.js
index d9356ad7b29df..ca8d04d14ab43 100644
--- a/src/sections/Projects/Sistent/components/content.js
+++ b/src/sections/Projects/Sistent/components/content.js
@@ -19,7 +19,7 @@ const componentsData = [
     id: 3,
     name: "Modal",
     description:
-        "A modal is a dialog box/popup that is displayed over the main content to present information or collect input.",
+        "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",
     src: "/modal",
   },
diff --git a/src/sections/Projects/Sistent/components/toggle-button/code.js b/src/sections/Projects/Sistent/components/toggle-button/code.js
index c30eac52cf2dc..bacbae0df92b7 100644
--- a/src/sections/Projects/Sistent/components/toggle-button/code.js
+++ b/src/sections/Projects/Sistent/components/toggle-button/code.js
@@ -13,64 +13,87 @@ import TabButton from "../../../../../reusecore/Button";
 import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
 
 const codes = [
-  `<SistentThemeProvider>
-    <ToggleButton value="toggle1" selected={true}>
-      Toggle On
-    </ToggleButton>
-  </SistentThemeProvider>`,
-  `<SistentThemeProvider>
+  // For exclusive selection
+  `
     <ToggleButtonGroup
-      value="option1"
+      value="left"
       exclusive
-      onChange={(event, value) => console.log(value)}
     >
-      <ToggleButton value="option1">Option 1</ToggleButton>
-      <ToggleButton value="option2">Option 2</ToggleButton>
+      <ToggleButton value="left">Left</ToggleButton>
+      <ToggleButton value="center">Center</ToggleButton>
+      <ToggleButton value="right">Right</ToggleButton>
     </ToggleButtonGroup>
-  </SistentThemeProvider>`,
-  `<SistentThemeProvider>
+  `,
+  // For multiple selection
+  `
     <ToggleButtonGroup
-      value={["option1", "option3"]}
-      onChange={(event, value) => console.log(value)}
+      value={["bold", "italic"]}
     >
-      <ToggleButton value="option1">Option 1</ToggleButton>
-      <ToggleButton value="option2">Option 2</ToggleButton>
-      <ToggleButton value="option3">Option 3</ToggleButton>
+      <ToggleButton value="bold">Bold</ToggleButton>
+      <ToggleButton value="italic">Italic</ToggleButton>
+      <ToggleButton value="underline">Underline</ToggleButton>
     </ToggleButtonGroup>
-  </SistentThemeProvider>`,
-  `<SistentThemeProvider>
+  `,
+  // For size
+  `
     <ToggleButtonGroup value="option1" exclusive size="small">
       <ToggleButton value="option1">Small</ToggleButton>
       <ToggleButton value="option2">Small</ToggleButton>
     </ToggleButtonGroup>
-  </SistentThemeProvider>`,
-  `<SistentThemeProvider>
+    <ToggleButtonGroup value="option1" exclusive size="medium">
+      <ToggleButton value="option1">Medium</ToggleButton>
+      <ToggleButton value="option2">Medium</ToggleButton>
+    </ToggleButtonGroup>
     <ToggleButtonGroup value="option1" exclusive size="large">
       <ToggleButton value="option1">Large</ToggleButton>
       <ToggleButton value="option2">Large</ToggleButton>
     </ToggleButtonGroup>
-  </SistentThemeProvider>`,
-  `<SistentThemeProvider>
-    <ToggleButtonGroup value="option1" exclusive color="primary">
-      <ToggleButton value="option1">Primary</ToggleButton>
-      <ToggleButton value="option2">Secondary</ToggleButton>
+  `,
+  // For color
+  `
+    <ToggleButtonGroup value="primary" exclusive color="primary">
+      <ToggleButton value="primary">Primary</ToggleButton>
+      <ToggleButton value="secondary">Secondary</ToggleButton>
+    </ToggleButtonGroup>
+  `,
+  // For vertical
+  `
+    <ToggleButtonGroup
+      orientation="vertical"
+      value="option1"
+      exclusive
+    >
+      <ToggleButton value="option1">Vertical 1</ToggleButton>
+      <ToggleButton value="option2">Vertical 2</ToggleButton>
+      <ToggleButton value="option3">Vertical 3</ToggleButton>
     </ToggleButtonGroup>
-  </SistentThemeProvider>`,
+  `,
 ];
 
 const ToggleButtonCode = () => {
   const { isDark } = useStyledDarkMode();
   const location = useLocation();
-  const [selected, setSelected] = useState("option1");
-  const [multiSelected, setMultiSelected] = useState(["option1"]);
-
-  const handleSingleToggle = (event, value) => {
-    setSelected(value);
+  const [exclusiveSelected, setExclusiveSelected] = useState("left");
+  const [multiSelected, setMultiSelected] = useState(["bold"]);
+  const [sizeSelected, setSizeSelected] = useState("small");
+  const [colorSelected, setColorSelected] = useState("primary");
+  const [verticalSelected, setVerticalSelected] = useState("left");
+  const handleExclusiveToggle = (event, value) => {
+    setExclusiveSelected(value);
   };
 
   const handleMultiToggle = (event, value) => {
     setMultiSelected(value);
   };
+  const handleSizeToggle = (event, value) => {
+    setSizeSelected(value);
+  };
+  const handleColorToggle = (event, value) => {
+    setColorSelected(value);
+  };
+  const handleVerticalToggle = (event, value) => {
+    setVerticalSelected(value);
+  };
 
   return (
     <SistentLayout title="ToggleButton">
@@ -124,56 +147,29 @@ const ToggleButtonCode = () => {
           />
         </div>
         <div className="main-content">
-          <a id="Single ToggleButton">
-            <h3>Single ToggleButton</h3>
-          </a>
-          <p>
-            A single `ToggleButton` is used to toggle between two states. Here
-            is an example:
-          </p>
-          <div className="showcase">
-            <div className="items">
-              <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
-                <ToggleButton value="toggle1" selected={true}>
-                  Toggle On
-                </ToggleButton>
-              </SistentThemeProvider>
-            </div>
-            <CodeBlock name="single-toggle" code={codes[0]} />
-          </div>
-
-          <a id="Grouped ToggleButtons (Single Selection)">
-            <h3>Grouped ToggleButtons (Single Selection)</h3>
+          <a id="Exclusive Selection">
+            <h3>Exclusive Selection</h3>
           </a>
-          <p>
-            Use a `ToggleButtonGroup` to group related buttons for single
-            selection. The `exclusive` prop ensures that only one button can be
-            selected at a time.
-          </p>
           <div className="showcase">
             <div className="items">
               <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
                 <ToggleButtonGroup
-                  value={selected}
+                  value={exclusiveSelected}
                   exclusive
-                  onChange={handleSingleToggle}
+                  onChange={handleExclusiveToggle}
                 >
-                  <ToggleButton value="option1">Option 1</ToggleButton>
-                  <ToggleButton value="option2">Option 2</ToggleButton>
+                  <ToggleButton value="left">Left</ToggleButton>
+                  <ToggleButton value="center">Center</ToggleButton>
+                  <ToggleButton value="right">Right</ToggleButton>
                 </ToggleButtonGroup>
               </SistentThemeProvider>
             </div>
-            <CodeBlock name="grouped-single-selection" code={codes[1]} />
+            <CodeBlock name="exclusive-selection" code={codes[0]} />
           </div>
 
-          <a id="Grouped ToggleButtons (Multiple Selection)">
-            <h3>Grouped ToggleButtons (Multiple Selection)</h3>
+          <a id="Multiple Selection">
+            <h3>Multiple Selection</h3>
           </a>
-          <p>
-            Use `ToggleButtonGroup` without the `exclusive` prop to allow users
-            to select multiple options within a group. This approach is useful
-            when enabling combinations of settings.
-          </p>
           <div className="showcase">
             <div className="items">
               <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
@@ -181,55 +177,76 @@ const ToggleButtonCode = () => {
                   value={multiSelected}
                   onChange={handleMultiToggle}
                 >
-                  <ToggleButton value="option1">Option 1</ToggleButton>
-                  <ToggleButton value="option2">Option 2</ToggleButton>
-                  <ToggleButton value="option3">Option 3</ToggleButton>
+                  <ToggleButton value="bold">Bold</ToggleButton>
+                  <ToggleButton value="italic">Italic</ToggleButton>
+                  <ToggleButton value="underline">Underline</ToggleButton>
                 </ToggleButtonGroup>
               </SistentThemeProvider>
             </div>
-            <CodeBlock name="grouped-multiple-selection" code={codes[2]} />
+            <CodeBlock name="multiple-selection" code={codes[1]} />
           </div>
 
-          <a id="ToggleButton Sizes">
+          <a id="Sizes">
             <h3>ToggleButton Sizes</h3>
           </a>
           <p>
-            Adjust the size of the `ToggleButton` using the `size` prop. Supported values include
-            `small`, `medium`, and `large`.
+            Adjust the size of the `ToggleButton` using the `size` prop.
+            Supported values include `small`, `medium`, and `large`.
           </p>
           <div className="showcase">
             <div className="items">
               <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
-                <ToggleButtonGroup value="option1" exclusive size="small">
+                <ToggleButtonGroup value={sizeSelected} onChange={handleSizeToggle} exclusive size="small">
                   <ToggleButton value="option1">Small</ToggleButton>
                   <ToggleButton value="option2">Small</ToggleButton>
                 </ToggleButtonGroup>
-                <ToggleButtonGroup value="option1" exclusive size="large">
+                <ToggleButtonGroup value={sizeSelected}  onChange={handleSizeToggle} exclusive size="medium">
+                  <ToggleButton value="option1">Medium</ToggleButton>
+                  <ToggleButton value="option2">Medium</ToggleButton>
+                </ToggleButtonGroup>
+                <ToggleButtonGroup value={sizeSelected} onChange={handleSizeToggle} exclusive size="large">
                   <ToggleButton value="option1">Large</ToggleButton>
                   <ToggleButton value="option2">Large</ToggleButton>
                 </ToggleButtonGroup>
               </SistentThemeProvider>
             </div>
-            <CodeBlock name="toggle-button-sizes" code={codes[3]} />
+            <CodeBlock name="toggle-button-sizes" code={codes[2]} />
           </div>
 
-          <a id="ToggleButton Colors">
+          <a id="Colors">
             <h3>ToggleButton Colors</h3>
           </a>
-          <p>
-            Use the `color` prop to set the color scheme for the `ToggleButton`. Common values include
-            `primary`, `secondary`, and `default`.
-          </p>
           <div className="showcase">
             <div className="items">
               <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
-                <ToggleButtonGroup value="option1" exclusive color="primary">
-                  <ToggleButton value="option1">Primary</ToggleButton>
-                  <ToggleButton value="option2">Secondary</ToggleButton>
+                <ToggleButtonGroup  value={colorSelected} onChange={handleColorToggle} exclusive color="primary">
+                  <ToggleButton value="primary">Primary</ToggleButton>
+                  <ToggleButton value="secondary">Secondary</ToggleButton>
+                </ToggleButtonGroup>
+              </SistentThemeProvider>
+            </div>
+            <CodeBlock name="toggle-button-colors" code={codes[3]} />
+          </div>
+
+          <a id="Vertical Buttons">
+            <h3>Vertical Buttons</h3>
+          </a>
+          <div className="showcase">
+            <div className="items">
+              <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+                <ToggleButtonGroup
+                  orientation="vertical"
+                  value={verticalSelected}
+                  onChange={handleVerticalToggle}
+                  exclusive
+                >
+                  <ToggleButton value="option1">Vertical 1</ToggleButton>
+                  <ToggleButton value="option2">Vertical 2</ToggleButton>
+                  <ToggleButton value="option3">Vertical 3</ToggleButton>
                 </ToggleButtonGroup>
               </SistentThemeProvider>
             </div>
-            <CodeBlock name="toggle-button-colors" code={codes[5]} />
+            <CodeBlock name="vertical-toggle-buttons" code={codes[4]} />
           </div>
         </div>
       </div>
diff --git a/src/sections/Projects/Sistent/components/toggle-button/guidance.js b/src/sections/Projects/Sistent/components/toggle-button/guidance.js
index 05dc4985ab15c..736fe7b5f240f 100644
--- a/src/sections/Projects/Sistent/components/toggle-button/guidance.js
+++ b/src/sections/Projects/Sistent/components/toggle-button/guidance.js
@@ -2,9 +2,12 @@ import React from "react";
 import { navigate } from "gatsby";
 import { useLocation } from "@reach/router";
 import { Row } from "../../../../../reusecore/Layout";
-import { ToggleButton, ToggleButtonGroup, SistentThemeProvider } from "@layer5/sistent";
+import {
+  ToggleButton,
+  ToggleButtonGroup,
+  SistentThemeProvider,
+} from "@layer5/sistent";
 import { SistentLayout } from "../../sistent-layout";
-
 import TabButton from "../../../../../reusecore/Button";
 import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
 
@@ -33,12 +36,15 @@ const ToggleButtonGuidance = () => {
                 ? "active"
                 : ""
             }
-            onClick={() => navigate("/projects/sistent/components/toggle-button")}
+            onClick={() =>
+              navigate("/projects/sistent/components/toggle-button")
+            }
             title="Overview"
           />
           <TabButton
             className={
-              location.pathname === "/projects/sistent/components/toggle-button/guidance"
+              location.pathname ===
+              "/projects/sistent/components/toggle-button/guidance"
                 ? "active"
                 : ""
             }
@@ -49,106 +55,115 @@ const ToggleButtonGuidance = () => {
           />
           <TabButton
             className={
-              location.pathname === "/projects/sistent/components/toggle-button/code"
+              location.pathname ===
+              "/projects/sistent/components/toggle-button/code"
                 ? "active"
                 : ""
             }
-            onClick={() => navigate("/projects/sistent/components/toggle-button/code")}
+            onClick={() =>
+              navigate("/projects/sistent/components/toggle-button/code")
+            }
             title="Code"
           />
         </div>
         <div className="main-content">
-          <a id="Function">
+          <a id="Functionality">
             <h2>Functionality</h2>
           </a>
           <p>
-            The purpose of `ToggleButton` and `ToggleButtonGroup` components is
-            to streamline user interactions where toggling between states or
-            selecting options is necessary. Below are some of their most common
-            applications:
+            The `ToggleButton` and `ToggleButtonGroup` components provide an
+            efficient way to handle user interactions for toggling states or
+            selecting one or multiple options. Below are some common use cases.
           </p>
-          <h3>Single Toggle</h3>
+          <h3>Exclusive Selection</h3>
           <p>
-            A single `ToggleButton` is used to represent a binary choice, such
-            as enabling or disabling a feature. For example, a toggle button can
-            be used to switch between "Dark Mode" and "Light Mode" or enable/disable notifications.
+            Use an exclusive `ToggleButtonGroup` when only one selection is
+            allowed at a time. This is useful for scenarios like aligning text
+            to the left, center, or right.
           </p>
           <Row $Hcenter className="image-container">
             <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
-              <ToggleButton value="darkMode" selected>
-                Dark Mode
-              </ToggleButton>
-            </SistentThemeProvider>
-          </Row>
-          <h3>Grouped Toggle Buttons (Single Selection)</h3>
-          <p>
-            Use a `ToggleButtonGroup` to group multiple related options when only one
-            selection is allowed at a time. For instance, allowing a user to select a view type,
-            such as "Grid View" or "List View."
-          </p>
-          <Row $Hcenter className="image-container">
-            <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
-              <ToggleButtonGroup value={["listView"]}>
-                <ToggleButton value="gridView">Grid View</ToggleButton>
-                <ToggleButton value="listView">List View</ToggleButton>
+              <ToggleButtonGroup value="left" exclusive>
+                <ToggleButton value="left">Left</ToggleButton>
+                <ToggleButton value="center">Center</ToggleButton>
+                <ToggleButton value="right">Right</ToggleButton>
               </ToggleButtonGroup>
             </SistentThemeProvider>
           </Row>
-          <h3>Grouped Toggle Buttons (Multiple Selection)</h3>
+
+          <h3>Multiple Selection</h3>
           <p>
-            Enable multi-selection by using the `allowMultiple` prop in a `ToggleButtonGroup`.
-            This is particularly useful for scenarios where users need to select multiple
-            options simultaneously, such as filtering categories or choosing multiple features to enable.
+            Enable multiple selections within a `ToggleButtonGroup` for cases
+            where users need to toggle multiple options, such as enabling bold,
+            italic, and underline text styling simultaneously.
           </p>
           <Row $Hcenter className="image-container">
             <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
-              <ToggleButtonGroup value={["feature1", "feature3"]} allowMultiple>
-                <ToggleButton value="feature1">Feature 1</ToggleButton>
-                <ToggleButton value="feature2">Feature 2</ToggleButton>
-                <ToggleButton value="feature3">Feature 3</ToggleButton>
+              <ToggleButtonGroup value={["bold", "italic"]}>
+                <ToggleButton value="bold">Bold</ToggleButton>
+                <ToggleButton value="italic">Italic</ToggleButton>
+                <ToggleButton value="underline">Underline</ToggleButton>
               </ToggleButtonGroup>
             </SistentThemeProvider>
           </Row>
 
-          <a id="Styling">
-            <h2>Styling Guidelines</h2>
-          </a>
-          <h3>Colors</h3>
+          <h3>Sizes</h3>
           <p>
-            Always use the pre-defined theme styles for colors, such as `primary` or `secondary`.
-            This ensures consistency across the application and makes it easy to switch between
-            light and dark themes without additional effort.
+            Adjust the size of the `ToggleButton` using the `size` prop. This
+            property supports `small`, `medium`, and `large` values to suit
+            various design requirements.
           </p>
-          <h3>Size</h3>
+          <div className="showcase">
+            <div className="items">
+              <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+                <ToggleButtonGroup value="option1" exclusive size="small">
+                  <ToggleButton value="option1">Small</ToggleButton>
+                  <ToggleButton value="option2">Small</ToggleButton>
+                </ToggleButtonGroup>
+                <ToggleButtonGroup value="option1" exclusive size="medium">
+                  <ToggleButton value="option1">Medium</ToggleButton>
+                  <ToggleButton value="option2">Medium</ToggleButton>
+                </ToggleButtonGroup>
+                <ToggleButtonGroup value="option1" exclusive size="large">
+                  <ToggleButton value="option1">Large</ToggleButton>
+                  <ToggleButton value="option2">Large</ToggleButton>
+                </ToggleButtonGroup>
+              </SistentThemeProvider>
+            </div>
+          </div>
+
+          <h3>Colors</h3>
           <p>
-            The size of the `ToggleButton` can be adjusted using the `size` prop to fit
-            different screen sizes and contexts. Use `small`, `medium`, or `large` as
-            values for this property.
+            Use the `color` prop to style the `ToggleButtonGroup` with
+            pre-defined theme colors, such as `primary` or `secondary`. This
+            ensures consistency across the application.
           </p>
           <Row $Hcenter className="image-container">
             <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
-              <ToggleButton value="smallSize" size="small">
-                Small
-              </ToggleButton>
-              <ToggleButton value="mediumSize" size="medium">
-                Medium
-              </ToggleButton>
-              <ToggleButton value="largeSize" size="large">
-                Large
-              </ToggleButton>
+              <ToggleButtonGroup value="primary" exclusive color="primary">
+                <ToggleButton value="primary">Primary</ToggleButton>
+                <ToggleButton value="secondary">Secondary</ToggleButton>
+              </ToggleButtonGroup>
             </SistentThemeProvider>
           </Row>
-          <h3>Icon Integration</h3>
+
+          <h3>Vertical Orientation</h3>
           <p>
-            Toggle buttons can include icons to make their purpose clearer. Icons
-            should complement the label text and not replace it entirely. For example,
-            a grid icon can visually reinforce the "Grid View" label in a toggle button.
+            The `orientation` prop allows you to arrange toggle buttons
+            vertically instead of horizontally. This is ideal for menus or
+            options requiring more vertical space.
           </p>
           <Row $Hcenter className="image-container">
             <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
-              <ToggleButton value="gridView" startIcon={<i className="icon-grid" />}>
-                Grid View
-              </ToggleButton>
+              <ToggleButtonGroup
+                orientation="vertical"
+                value="option1"
+                exclusive
+              >
+                <ToggleButton value="option1">Vertical 1</ToggleButton>
+                <ToggleButton value="option2">Vertical 2</ToggleButton>
+                <ToggleButton value="option3">Vertical 3</ToggleButton>
+              </ToggleButtonGroup>
             </SistentThemeProvider>
           </Row>
         </div>
diff --git a/src/sections/Projects/Sistent/components/toggle-button/index.js b/src/sections/Projects/Sistent/components/toggle-button/index.js
index 94488daf1c0a7..c8670520a0471 100644
--- a/src/sections/Projects/Sistent/components/toggle-button/index.js
+++ b/src/sections/Projects/Sistent/components/toggle-button/index.js
@@ -29,10 +29,10 @@ const SistentToggleButton = () => {
   };
 
   return (
-    <SistentLayout title="Toggle Button">
+    <SistentLayout title="ToggleButton">
       <div className="content">
         <a id="Identity">
-          <h2>Toggle Button</h2>
+          <h2>ToggleButton</h2>
         </a>
         <p>
         The `ToggleButton` and `ToggleButtonGroup` are versatile components