diff --git a/feature_data.json b/feature_data.json
index 7f01ed823eb7..a4b503056adb 100644
--- a/feature_data.json
+++ b/feature_data.json
@@ -951,6 +951,149 @@
       "Theme (also: Keychain Name)": "Support and Deployment"
     }
   },
+  {
+    "pricing_page": "true",
+    "entire_row": {
+      "Category": "Pattern Support: Istio",
+      "Documented?": "",
+      "Feature": "VirtualService",
+      "Function": "VirtualService",
+      "Pricing page?": "X",
+      "Subscription Tier": "Free",
+      "Tech": "Adapter",
+      "Theme (also: Keychain Name)": "Configuration Management"
+    }
+  },
+  {
+    "pricing_page": "true",
+    "entire_row": {
+      "Category": "Pattern Support: Istio",
+      "Documented?": "",
+      "Feature": "DestinationRule",
+      "Function": "DestinationRule",
+      "Pricing page?": "X",
+      "Subscription Tier": "Free",
+      "Tech": "Adapter",
+      "Theme (also: Keychain Name)": "Configuration Management"
+    }
+  },
+  {
+    "pricing_page": "true",
+    "entire_row": {
+      "Category": "Pattern Support: Istio",
+      "Documented?": "",
+      "Feature": "mTLS (PeerAuthentication)",
+      "Function": "mTLS (PeerAuthentication)",
+      "Pricing page?": "X",
+      "Subscription Tier": "Free",
+      "Tech": "Adapter",
+      "Theme (also: Keychain Name)": "Configuration Management"
+    }
+  },
+  {
+    "pricing_page": "true",
+    "entire_row": {
+      "Category": "Pattern Support: Istio",
+      "Documented?": "",
+      "Feature": "AuthorizationPolicy",
+      "Function": "AuthorizationPolicy",
+      "Pricing page?": "X",
+      "Subscription Tier": "Free",
+      "Tech": "Adapter",
+      "Theme (also: Keychain Name)": "Configuration Management"
+    }
+  },
+  {
+    "pricing_page": "true",
+    "entire_row": {
+      "Category": "Pattern Support: Istio",
+      "Documented?": "",
+      "Feature": "EnvoyFilters",
+      "Function": "EnvoyFilters",
+      "Pricing page?": "X",
+      "Subscription Tier": "Free",
+      "Tech": "Adapter",
+      "Theme (also: Keychain Name)": "Configuration Management"
+    }
+  },
+  {
+    "pricing_page": "true",
+    "entire_row": {
+      "Category": "Pattern Support: Istio",
+      "Documented?": "",
+      "Feature": "Istio Operator",
+      "Function": "Istio Operator",
+      "Pricing page?": "X",
+      "Subscription Tier": "Free",
+      "Tech": "Adapter",
+      "Theme (also: Keychain Name)": "Configuration Management"
+    }
+  },
+  {
+    "pricing_page": "true",
+    "entire_row": {
+      "Category": "Pattern Support: Istio",
+      "Documented?": "",
+      "Feature": "Ingress Gateway (Gateways)",
+      "Function": "Ingress Gateway (Gateways)",
+      "Pricing page?": "X",
+      "Subscription Tier": "Free",
+      "Tech": "Adapter",
+      "Theme (also: Keychain Name)": "Configuration Management"
+    }
+  },
+  {
+    "pricing_page": "true",
+    "entire_row": {
+      "Category": "Pattern Support: Istio",
+      "Documented?": "",
+      "Feature": "Egress Gateway (Gateways)",
+      "Function": "Egress Gateway (Gateways)",
+      "Pricing page?": "X",
+      "Subscription Tier": "Free",
+      "Tech": "Adapter",
+      "Theme (also: Keychain Name)": "Configuration Management"
+    }
+  },
+  {
+    "pricing_page": "true",
+    "entire_row": {
+      "Category": "Pattern Support: Istio",
+      "Documented?": "",
+      "Feature": "Custom Configuration",
+      "Function": "Custom Configuration",
+      "Pricing page?": "X",
+      "Subscription Tier": "Free",
+      "Tech": "Adapter",
+      "Theme (also: Keychain Name)": "Configuration Management"
+    }
+  },
+  {
+    "pricing_page": "true",
+    "entire_row": {
+      "Category": "Pattern Support: Kubernetes",
+      "Documented?": "",
+      "Feature": "Ingress",
+      "Function": "Ingress",
+      "Pricing page?": "X",
+      "Subscription Tier": "Free",
+      "Tech": "Adapter",
+      "Theme (also: Keychain Name)": "Configuration Management"
+    }
+  },
+  {
+    "pricing_page": "true",
+    "entire_row": {
+      "Category": "Multi-Mesh",
+      "Documented?": "",
+      "Feature": "Canary Rollout",
+      "Function": "Canary Rollout",
+      "Pricing page?": "X",
+      "Subscription Tier": "Free",
+      "Tech": "Adapter",
+      "Theme (also: Keychain Name)": "Configuration Management"
+    }
+  },
   {
     "pricing_page": "true",
     "entire_row": {
diff --git a/src/pages/projects/sistent/components/list/code.js b/src/pages/projects/sistent/components/list/code.js
new file mode 100644
index 000000000000..2e687c01408f
--- /dev/null
+++ b/src/pages/projects/sistent/components/list/code.js
@@ -0,0 +1,8 @@
+import React from "react";
+import { ListCode } from "../../../../../sections/Projects/Sistent/components/list/code";
+
+const ListCodePage = () => {
+  return <ListCode />;
+};
+
+export default ListCodePage;
diff --git a/src/pages/projects/sistent/components/list/guidance.js b/src/pages/projects/sistent/components/list/guidance.js
new file mode 100644
index 000000000000..ad55c97baa0b
--- /dev/null
+++ b/src/pages/projects/sistent/components/list/guidance.js
@@ -0,0 +1,7 @@
+import React from "react";
+import {  ListGuidance } from "../../../../../sections/Projects/Sistent/components/list/guidance";
+
+const ListGuidancePage = () => {
+  return <ListGuidance />;
+};
+export default ListGuidancePage;
\ No newline at end of file
diff --git a/src/pages/projects/sistent/components/list/index.js b/src/pages/projects/sistent/components/list/index.js
new file mode 100644
index 000000000000..756a1910554a
--- /dev/null
+++ b/src/pages/projects/sistent/components/list/index.js
@@ -0,0 +1,6 @@
+import React from "react";
+import SistentList from "../../../../../sections/Projects/Sistent/components/list";
+const SistentListPage = () => {
+  return <SistentList/>;
+};
+export default SistentListPage;
\ No newline at end of file
diff --git a/src/sections/Projects/Sistent/components/index.js b/src/sections/Projects/Sistent/components/index.js
index 2c5e401325b8..918733ba6086 100644
--- a/src/sections/Projects/Sistent/components/index.js
+++ b/src/sections/Projects/Sistent/components/index.js
@@ -79,6 +79,13 @@ const componentsData = [
       "Box is used as a flexible container for layout and styling, allowing quick customization and responsive design adjustments.",
     url: "/projects/sistent/components/box",
   },
+  {
+    id: 11,
+    name: "List",
+    description:
+      "Lists are essential UI elements that allow items to be organized sequentially in a structured and readable way. They help users view, select, and interact with multiple items conveniently.",
+    url: "/projects/sistent/components/list",
+  },
 ];
 
 const SistentComponents = () => {
diff --git a/src/sections/Projects/Sistent/components/list/code-block.js b/src/sections/Projects/Sistent/components/list/code-block.js
new file mode 100644
index 000000000000..901a5d9c4748
--- /dev/null
+++ b/src/sections/Projects/Sistent/components/list/code-block.js
@@ -0,0 +1,21 @@
+import React, { useState } from "react";
+import Code from "../../../../../components/CodeBlock";
+
+export const CodeBlock = ({ name, code }) => {
+  const [showCode, setShowCode] = useState(false);
+  const onChange = () => {
+    setShowCode((prev) => !prev);
+  };
+
+  return (
+    <div className="show-code">
+      <input type="checkbox" name={name} id={name} onChange={onChange} />
+      <label htmlFor={name} className="label">
+        Show Code
+      </label>
+      {showCode && (
+        <Code codeString={code} language="javascript" />
+      )}
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/src/sections/Projects/Sistent/components/list/code.js b/src/sections/Projects/Sistent/components/list/code.js
new file mode 100644
index 000000000000..f3ce5ef2979a
--- /dev/null
+++ b/src/sections/Projects/Sistent/components/list/code.js
@@ -0,0 +1,199 @@
+import React from "react";
+import { navigate } from "gatsby";
+import { useLocation } from "@reach/router";
+import { List, ListItemIcon, ListItemAvatar, ListItemText,ListItem,ListSubheader, ListItemButton, SistentThemeProvider, Divider } from "@layer5/sistent";
+import { CodeBlock } from "./code-block";
+import { SistentLayout } from "../../sistent-layout";
+//import { FaArrowRight,FaUser, FaFolder, FaFile } from "react-icons/fa";
+import TabButton from "../../../../../reusecore/Button";
+import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
+
+const codes = [
+  // Basic List with List Items
+  `  <SistentThemeProvider>
+       <List>
+         <ListItem><ListItemText primary="Layer5 Sistent 1" /></ListItem> 
+         <ListItem><ListItemText primary="Layer5 Sistent 2" /></ListItem> 
+         <ListItem><ListItemText primary="Layer5 Sistent 3" /></ListItem> 
+       </List>
+  </SistentThemeProvider>`,
+
+  // List with Icons in List Items
+  `  <SistentThemeProvider>
+       <List>
+        <ListItem><ListItemIcon>🌟</ListItemIcon><ListItemText primary="Layer5 Sistent Starred" /></ListItem>
+        <ListItem><ListItemIcon>📅</ListItemIcon><ListItemText primary="Layer5 Sistent Calender" /></ListItem>
+        <ListItem><ListItemIcon>🔔</ListItemIcon><ListItemText primary="Layer5 Sistent Notification" /></ListItem>
+       </List>
+  </SistentThemeProvider>`,
+
+  // List with Avatars
+  `  <SistentThemeProvider>
+       <List>
+        <ListItem><ListItemAvatar>👤</ListItemAvatar><ListItemText primary="Layer5 Sistent User 1" /></ListItem>
+        <ListItem><ListItemAvatar>👩‍💻</ListItemAvatar><ListItemText primary="Layer5 Sistent User 2" /></ListItem>
+        <ListItem><ListItemAvatar>👤</ListItemAvatar><ListItemText primary="Layer5 Sistent User 3" /></ListItem>
+       </List>
+  </SistentThemeProvider>`,
+
+  // List with Subheader
+  `  <SistentThemeProvider>
+       <List>
+        <ListSubheader>Section 1</ListSubheader>
+        <ListItem><ListItemText primary="Layer5 Sistent A" /></ListItem>
+        <ListItem><ListItemText primary="Layer5 Sistent B" /></ListItem>      
+        <ListSubheader>Section 2</ListSubheader>
+        <ListItem><ListItemText primary="Layer5 Sistent C" /></ListItem>
+        <ListItem><ListItemText primary="Layer5 Sistent D" /></ListItem>
+       </List>
+  </SistentThemeProvider>`,
+
+  // List with Action Buttons
+  `  <SistentThemeProvider>
+       <List>
+        <ListItemButton onClick={() => alert("Clicked!")}> Layer5 Sistent Action 1</ListItemButton>
+        <ListItemButton onClick={() => alert("Clicked!")}>Layer5 Sistent Action 2</ListItemButton>
+       </List>
+  </SistentThemeProvider>`,
+];
+
+export const ListCode = () => {
+  const location = useLocation();
+  const { isDark } = useStyledDarkMode();
+
+  return (
+    <SistentLayout title="List">
+      <div className="content">
+        <a id="Identity"><h2>List</h2></a>
+        <p>
+          The List component displays a list of items in a structured and
+          accessible manner. Variants include simple lists, lists with icons,
+          lists with avatars, and lists with action buttons.
+        </p>
+
+        <div className="filterBtns">
+          <TabButton
+            className={location.pathname === "/projects/sistent/components/list" ? "active" : ""}
+            onClick={() => navigate("/projects/sistent/components/list")}
+            title="Overview"
+          />
+          <TabButton
+            className={location.pathname === "/projects/sistent/components/list/guidance" ? "active" : ""}
+            onClick={() => navigate("/projects/sistent/components/list/guidance")}
+            title="Guidance"
+          />
+          <TabButton
+            className={location.pathname === "/projects/sistent/components/list/code" ? "active" : ""}
+            onClick={() => navigate("/projects/sistent/components/list/code")}
+            title="Code"
+          />
+        </div>
+        <div className="main-content">
+          {/* Simple List */}
+          <a id="Simple List"><h3>Simple List</h3></a>
+          <p>This is a basic list with plain text items.</p>
+          <div className="showcase">
+            <div className="items">
+
+              <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+                <List>
+                  <ListItem><ListItemText primary="Layer5 Sistent Item 1" /></ListItem>
+                  <ListItem><ListItemText primary="Layer5 Sistent Item 2" /></ListItem>
+                  <ListItem><ListItemText primary="Layer5 Sistent Item 3" /></ListItem>
+                </List>
+              </SistentThemeProvider>
+
+            </div>
+            <CodeBlock name="simple-list" code={codes[0]} />
+          </div>
+
+          {/* List with Icons */}
+          <a id="List With Icons"><h3>List with Icons</h3></a>
+          <p>List items can be paired with icons to add visual cues.</p>
+          <div className="showcase">
+            <div className="items">
+              <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+                <List>
+                  <ListItem>
+                    <ListItemIcon>🌟</ListItemIcon>
+                    <ListItemText primary="Layer5 Sistent Starred" />
+                  </ListItem>
+                  <ListItem>
+                    <ListItemIcon>📅</ListItemIcon>
+                    <ListItemText primary="Layer5 Sistent Calendar" />
+                  </ListItem>
+                  <ListItem>
+                    <ListItemIcon>🔔</ListItemIcon>
+                    <ListItemText primary="Layer5 Sistent Notification" />
+                  </ListItem>
+                </List>
+              </SistentThemeProvider>
+            </div>
+            <CodeBlock name="icon-list" code={codes[1]} />
+          </div>
+
+          {/* List with Avatars */}
+          <a id="List With Avatars"><h3>List with Avatars</h3></a>
+          <p>Use avatars for list items representing people or entities.</p>
+          <div className="showcase">
+            <div className="items">
+              <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+                <List>
+                  <ListItem><ListItemAvatar>👤</ListItemAvatar><ListItemText primary="Layer5 Sistent User 1" /></ListItem>
+                  <ListItem><ListItemAvatar>👩‍💻</ListItemAvatar><ListItemText primary="Layer5 Sistent User 2" /></ListItem>
+                  <ListItem><ListItemAvatar>👩‍💻</ListItemAvatar><ListItemText primary="Layer5 Sistent User 3" /></ListItem>
+                </List>
+              </SistentThemeProvider>
+            </div>
+            <CodeBlock name="avatar-list" code={codes[2]} />
+          </div>
+
+          {/* List with Subheader */}
+          <a id="List With Subheader"><h3>List with Subheader</h3></a>
+          <p>Organize list items under different subheaders for better grouping.</p>
+          <div className="showcase">
+            <div className="items">
+              <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+                <List>
+                  <ListSubheader>Section 1</ListSubheader>
+                  <ListItem>
+                    <ListItemText primary="Layer5 Sistent Item A" />
+                  </ListItem>
+                  <ListItem>
+                    <ListItemText primary="Layer5 Sistent Item B" />
+                  </ListItem>
+                  <Divider />
+                  <ListSubheader>Section 2</ListSubheader>
+                  <ListItem>
+                    <ListItemText primary="Layer5 Sistent Item C" />
+                  </ListItem>
+                  <ListItem>
+                    <ListItemText primary="Layer5 Sistent Item D" />
+                  </ListItem>
+                </List>
+              </SistentThemeProvider>
+            </div>
+            <CodeBlock name="subheader-list" code={codes[3]} />
+          </div>
+
+          {/* List with Action Buttons */}
+          <a id="List With ActionButtons"><h3>List with Action Buttons</h3></a>
+          <p>Lists can also have action buttons for added interactivity.</p>
+          <div className="showcase">
+            <div className="items">
+              <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+                <List>
+                  {/* <ListItem text="Action Item 1" secondaryAction={<button>Action</button>} />
+                  <ListItem text="Action Item 2" secondaryAction={<button>More</button>} /> */}
+                  <ListItemButton onClick={() => alert("Clicked!")}> Layer5 Sistent Action Item 1</ListItemButton>
+                  <ListItemButton onClick={() => alert("Clicked!")}>Layer5 Sistent Action Item 2</ListItemButton>
+                </List>
+              </SistentThemeProvider>
+            </div>
+            <CodeBlock name="button-list" code={codes[4]} />
+          </div>
+        </div>
+      </div>
+    </SistentLayout>
+  );
+};
\ No newline at end of file
diff --git a/src/sections/Projects/Sistent/components/list/guidance.js b/src/sections/Projects/Sistent/components/list/guidance.js
new file mode 100644
index 000000000000..b8ef1f87345c
--- /dev/null
+++ b/src/sections/Projects/Sistent/components/list/guidance.js
@@ -0,0 +1,147 @@
+import React from "react";
+import { navigate } from "gatsby";
+import { useLocation } from "@reach/router";
+//import { Row } from "../../../../../reusecore/Layout";
+//import { List,  ListItemText,ListItem,SistentThemeProvider } from "@layer5/sistent";
+import { SistentLayout } from "../../sistent-layout";
+
+import TabButton from "../../../../../reusecore/Button";
+//import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
+
+
+export const ListGuidance = () => {
+  const location = useLocation();
+  //const { isDark } = useStyledDarkMode();
+
+  return (
+    <SistentLayout title="List">
+      <div className="content">
+        <a id="Identity">
+          <h2>List</h2>
+        </a>
+        <p>
+          Lists are essential UI elements that allow items to be organized sequentially in a structured and readable way. They help users view, select, and interact with multiple items conveniently.
+        </p>
+
+        <div className="filterBtns">
+          <TabButton
+            className={location.pathname === "/projects/sistent/components/list" ? "active" : ""}
+            onClick={() => navigate("/projects/sistent/components/list")}
+            title="Overview"
+          />
+          <TabButton
+            className={location.pathname === "/projects/sistent/components/list/guidance" ? "active" : ""}
+            onClick={() => navigate("/projects/sistent/components/list/guidance")}
+            title="Guidance"
+          />
+          <TabButton
+            className={location.pathname === "/projects/sistent/components/list/code" ? "active" : ""}
+            onClick={() => navigate("/projects/sistent/components/list/code")}
+            title="Code"
+          />
+        </div>
+
+        <div className="main-content">
+          <p>
+            Lists can be used for various purposes, including displaying items, navigational menus, or highlighting features. The List component provides a flexible container for organizing related items in a vertical layout. It can be customized to display items with icons, buttons, avatars, and other interactive elements. This component is essential for organizing content in a structured, accessible format.
+          </p>
+
+          <a id="Usage Scenarios">
+            <h2>Usage Scenarios</h2>
+          </a>
+          <ul>
+            <li>Data Display : Present structured data like files, tasks, or messages using Lists.</li>
+            <li>Navigational Menus : Combine List Items with Buttons or Links for intuitive menus.</li>
+            <li>Interactive Content : Add action buttons to List Items for task management or settings. </li>
+          </ul>
+
+          <a id="Design Guidelines">
+            <h2>Design Guidelines</h2>
+          </a>
+
+          <p>Consistency</p>
+          <ul>
+            <li>Maintain a uniform structure across all List Items.</li>
+            <li>Use consistent padding and alignment for easy readability.</li>
+          </ul>
+          <p>Interactive Elements</p>
+          <ul>
+            <li>Use ListItemButton for click actions.</li>
+            <li> Ensure hover states and focus indicators are visually prominent.</li>
+          </ul>
+          <p>Accessibility</p>
+          <ul>
+            <li>Provide descriptive labels for screen readers.</li>
+            <li>Ensure all items are navigable via keyboard.</li>
+          </ul>
+
+          <a id="General Guidelines">
+            <h2>General Guidelines</h2>
+          </a>
+
+          <p>1. Purpose & Context</p>
+          <ul>
+            <li>Clearly define the purpose of the List (e.g., data grouping, navigation, task management).</li>
+            <li>Use Lists where a vertical layout enhances user understanding or accessibility.</li>
+          </ul>
+          <p>2. Spacing & Alignment</p>
+          <ul>
+            <li>Maintain consistent vertical spacing between items.</li>
+            <li>Align text, icons, and avatars for a clean, organized appearance.</li>
+            <li>Consistent spacing and alignment ensure list items are visually pleasing and easy to scan. Items should be aligned to the left, with adequate padding between elements.</li>
+          </ul>
+          <p>3. Interactive Design</p>
+          <ul>
+            <li>For interactive Lists, use actionable items like ListItemButton and ensure buttons or links have proper visual cues (hover/focus states).</li>
+            <li>Add affordances like icons or colors to signify item state (e.g., completed, active, or disabled).</li>
+          </ul>
+          <p>4. Accessibility</p>
+          <ul>
+            <li>Label all List Items using aria-label or aria-labelledby attributes for screen readers.</li>
+            <li>Ensure all interactive elements within a List are keyboard-navigable and have clear focus indicators.</li>
+          </ul>
+
+
+          <a id="Component-Specific Guidance">
+            <h2>Component-Specific Guidance</h2>
+          </a>
+          <p>1. List</p>
+          <ul>
+            <li>Use the List component as a wrapper for items, ensuring adequate padding and structure.</li>
+            <li>Keep Lists concise; avoid excessive scrolling by grouping items with ListSubheader.</li>
+          </ul>
+          <p>2. List Item</p>
+          <ul>
+            <li>Limit content to 1-2 lines of text for readability.</li>
+            <li>Use secondary text sparingly to avoid visual clutter.</li>
+          </ul>
+          <p>3. List Item Button</p>
+          <ul>
+            <li>Ensure actionable buttons have a clear purpose, communicated via labels or icons.</li>
+            <li>Avoid excessive buttons in a single List to prevent overwhelming users.</li>
+          </ul>
+          <p>4. List Item Icon</p>
+          <ul>
+            <li>Icons should be meaningful and contextually relevant (e.g., ✅ for completed tasks, 🔔 for notifications).</li>
+            <li>Align and size icons appropriately relative to the text.</li>
+          </ul>
+          <p>5. List Item Avatar</p>
+          <ul>
+            <li>Use avatars to represent users or entities visually</li>
+            <li>Provide accessible alternatives (e.g., initials or placeholders) when images are unavailable.</li>
+          </ul>
+          <p>6. List Item Text</p>
+          <ul>
+            <li>Maintain a clear hierarchy between primaryText (main content) and secondaryText (supporting details).</li>
+            <li>Ensure text is legible and does not dominate the layout.</li>
+          </ul>
+          <p>7. List Subheader</p>
+          <ul>
+            <li>Subheaders should describe the group of items succinctly.</li>
+            <li>Avoid excessive nesting of subheaders to prevent user confusion.</li>
+          </ul>
+        </div>
+      </div>
+    </SistentLayout>
+  );
+};
\ No newline at end of file
diff --git a/src/sections/Projects/Sistent/components/list/index.js b/src/sections/Projects/Sistent/components/list/index.js
new file mode 100644
index 000000000000..11ccde3e8856
--- /dev/null
+++ b/src/sections/Projects/Sistent/components/list/index.js
@@ -0,0 +1,211 @@
+import React from "react";
+import { navigate } from "gatsby";
+import { useLocation } from "@reach/router";
+
+import { SistentThemeProvider, List, ListItem, ListItemText, ListSubheader,ListItemButton, ListItemIcon, ListItemAvatar, Divider } from "@layer5/sistent";
+import TabButton from "../../../../../reusecore/Button";
+import { SistentLayout } from "../../sistent-layout";
+import {  Row } from "../../../../../reusecore/Layout";
+import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
+
+const SistentList = () => {
+  const location = useLocation();
+  const { isDark } = useStyledDarkMode();
+
+  return (
+    <SistentLayout title="List">
+      <div className="content">
+        <a id="Identity">
+          <h2>List</h2>
+        </a>
+        <p>
+          Lists are essential UI elements that allow items to be organized sequentially in a structured and readable way. They help users view, select, and interact with multiple items conveniently.
+        </p>
+        <div className="filterBtns">
+          <TabButton
+            className={location.pathname === "/projects/sistent/components/list" ? "active" : ""}
+            onClick={() => navigate("/projects/sistent/components/list")}
+            title="Overview"
+          />
+          <TabButton
+            className={location.pathname === "/projects/sistent/components/list/guidance" ? "active" : ""}
+            onClick={() => navigate("/projects/sistent/components/list/guidance")}
+            title="Guidance"
+          />
+          <TabButton
+            className={location.pathname === "/projects/sistent/components/list/code" ? "active" : ""}
+            onClick={() => navigate("/projects/sistent/components/list/code")}
+            title="Code"
+          />
+        </div>
+        <div className="main-content">
+          <a id="List Components">
+          </a>
+          <p>The List component is a flexible and structured container for organizing content in vertical layouts. It supports various child components, such as List Items, Icons, Avatars, Buttons, and Subheaders, making it ideal for creating navigational menus, data displays, or interactive content groups.</p>
+          <p>
+            The List component is designed to:
+          </p>
+          <ul>
+            <li><strong>Organize Content:</strong> Provides a structured vertical layout for related items.</li>
+            <li><strong>Interactive Elements:</strong> Add actionable buttons and components to enhance user interaction.</li>
+            <li><strong>Customizable Design:</strong> Offers size variations, dense modes, and alignment options.</li>
+            <li><strong>Accessibility:</strong> Ensures keyboard navigation and visual feedback for enhanced usability.</li>
+          </ul>
+          <a id="Components Overview">
+          </a>
+          <p>
+            Components Overview:
+          </p>
+
+          <ul>
+            <li>List Item: Represents an individual item within the list.</li>
+            <li>List Item Button: A clickable button within a list item.</li>
+            <li>List Item Icon: Displays an icon associated with a list item.</li>
+            <li>List Item Avatar: Adds an avatar for visual representation within the list item.</li>
+            <li>List Item Text: Contains the primary and secondary text within a list item.</li>
+            <li>List Subheader: Provides a labeled header for grouping related list items.</li>
+
+          </ul>
+          <a id="Types of List component">
+          </a>
+          <p><h3> Types of List component </h3></p>
+          <a id="List"></a>
+          <h4>1. List</h4>
+          <p>The base container for organizing related content in vertical layouts.</p>
+          <p><strong>Basic Usage:</strong></p>
+          <Row $Hcenter className="image-container">
+            <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+
+              <List>
+                <ListItem>
+                  <ListItemText primary="Layer5 Sistent Item 1" />
+                </ListItem>
+                <ListItem>
+                  <ListItemText primary="Layer5 Sistent Item 2" />
+                </ListItem>
+                <ListItem>
+                  <ListItemText primary="Layer5 Sistent Item 3" />
+                </ListItem>
+              </List>
+
+            </SistentThemeProvider>
+          </Row>
+
+          <a id="List Item"></a>
+          <h4>2. List Item</h4>
+          <p>
+            Represents an individual entry in a list. Includes primary and optional secondary text.
+          </p>
+          <Row $Hcenter className="image-container">
+            <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+              <List>
+                <ListItem>
+                  <ListItemText primary="Layer5 Sistent Primary Item" secondary="Layer5 Sistent Supporting text" />
+                </ListItem>
+                <ListItem>
+                  <ListItemText primary="Layer5 Sistent Another Item" />
+                </ListItem>
+              </List>
+            </SistentThemeProvider>
+          </Row>
+          <a id="List Item Button"></a>
+          <h4>3. List Item Button</h4>
+          <p>
+            Adds interactivity to list items, making them actionable.
+          </p>
+          <Row $Hcenter className="image-container">
+            <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+              <List>
+                <ListItemButton onClick={() => alert("Clicked!")}>
+                Layer5 Sistent Action Item 1
+                </ListItemButton>
+                <ListItemButton onClick={() => alert("Clicked!")}>
+                Layer5 Sistent Action Item2
+                </ListItemButton>
+              </List>
+            </SistentThemeProvider>
+          </Row>
+
+          <a id="List with Icons"></a>
+          <h4>4. List with Icons</h4>
+          <p>
+            Icons can be added to list items to enhance visual interest and provide additional meaning for each item. Enhances list items with visual elements for better context.
+          </p>
+          <Row $Hcenter className="image-container">
+            <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+              <List>
+                <ListItem>
+                  <ListItemIcon>🌟</ListItemIcon>
+                  <ListItemText primary="Layer5 Sistent Starred" />
+                </ListItem>
+                <ListItem>
+                  <ListItemIcon>📅</ListItemIcon>
+                  <ListItemText primary="Layer5 Sistent Calendar" />
+                </ListItem>
+                <ListItem>
+                  <ListItemIcon>🔔</ListItemIcon>
+                  <ListItemText primary="Layer5 Sistent Notification" />
+                </ListItem>
+                <ListItem>
+                  <ListItemIcon>✅</ListItemIcon>
+                  <ListItemText primary="Layer5 Sistent Completed Task" />
+                </ListItem>
+                <ListItem>
+                  <ListItemIcon>❌</ListItemIcon>
+                  <ListItemText primary="Layer5 Sistent Incomplete Task" />
+                </ListItem>
+              </List>
+            </SistentThemeProvider>
+          </Row>
+          <a id="List with Avatars"></a>
+          <h4>List with Avatars</h4>
+          <p>
+            Avatars can be added to list items, which is particularly useful for representing people or items visually. Visually represents items with avatars for a user-friendly interface.
+          </p>
+          <Row $Hcenter className="image-container">
+            <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+              <List>
+                <ListItem>
+                  <ListItemAvatar>👤</ListItemAvatar>
+                  <ListItemText primary="Layer5 Sistent User 1" />
+                </ListItem>
+                <ListItem>
+                  <ListItemAvatar>👩‍💻</ListItemAvatar>
+                  <ListItemText primary="Layer5 Sistent User 2" />
+                </ListItem>
+              </List>
+            </SistentThemeProvider>
+          </Row>
+          <a id="List Subheader"></a>
+          <h4>6. List Subheader</h4>
+          <p>
+            Subheaders provide a way to label groups within a list, adding clarity and helping users navigate content. Groups and labels items within a list for better navigation and organization.
+          </p>
+          <Row $Hcenter className="image-container">
+            <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+              <List>
+                <ListSubheader>Section 1</ListSubheader>
+                <ListItem>
+                  <ListItemText primary="Layer5 Sistent Item A" />
+                </ListItem>
+                <ListItem>
+                  <ListItemText primary="Layer5 Sistent Item B" />
+                </ListItem>
+                <Divider />
+                <ListSubheader>Section 2</ListSubheader>
+                <ListItem>
+                  <ListItemText primary="Layer5 Sistent Item C" />
+                </ListItem>
+                <ListItem>
+                  <ListItemText primary="Layer5 Sistent Item D" />
+                </ListItem>
+              </List>
+            </SistentThemeProvider>
+          </Row>
+        </div>
+      </div>
+    </SistentLayout>
+  );
+};
+export default SistentList;
+