diff --git a/.github/ISSUE_TEMPLATE/community_member_profile.md b/.github/ISSUE_TEMPLATE/community_member_profile.md
index 57b9a8c1740b..a9efdd451cdc 100644
--- a/.github/ISSUE_TEMPLATE/community_member_profile.md
+++ b/.github/ISSUE_TEMPLATE/community_member_profile.md
@@ -16,7 +16,7 @@ Let's recognize <@github-username> as a contributor and community member by crea
 - GitHub: <!-- username only -->
 - Twitter: <!-- handle only -->
 - LinkedIn: <!-- <profilename> only https://www.linkedin.com/in/<profilename> -->
-- Layer5 Cloud: <!-- <user ID> only UUID https://meshery.layer5.io/user/<uuid> -->
+- Layer5 Cloud: <!-- <user ID> only UUID https://cloud.layer5.io/user/<uuid> -->
 - Link to profile picture:
 
 A detailed explanation on how to set up a community member profile can be found in the [CONTRIBUTING.md](https://github.com/layer5io/layer5/blob/master/CONTRIBUTING.md)
diff --git a/.github/build/features-to-json.js b/.github/build/features-to-json.js
new file mode 100755
index 000000000000..b4667d5979b9
--- /dev/null
+++ b/.github/build/features-to-json.js
@@ -0,0 +1,119 @@
+#!/usr/bin/env node
+
+const fs = require("fs").promises; // Use fs.promises
+const csv = require("csvtojson");
+const [major, minor, patch] = process.versions.node.split(".").map(Number);
+console.log(`Using Node.js version: ${major}.${minor}.${patch}`);
+
+const headers = [
+  "Theme",
+  "Category Order",
+  "Category",
+  "Function Order",
+  "Function",
+  "Feature",
+  "Subscription Tier",
+  "Free",
+  "Team Designer",
+  "Team Operator",
+  "Enterprise",
+  "Exclude",
+  "Docs",
+];
+
+
+async function processCSV() {
+  try {
+    const csvFilePath = process.argv[2] || ".github/build/spreadsheet.csv";
+      if (process.argv[2]) {
+        console.log("Downloading features to: " + process.argv[2]);
+      }
+    const rows = await csv({
+      noheader: true,
+      headers: headers,
+      output: "json",
+    }).fromFile(csvFilePath);
+
+    const filteredData = rows.map(row => {
+      try {
+        const exclude = row["Exclude"]?.toLowerCase();
+        const hasXTier = [
+          "Free",
+          "Team Designer",
+          "Team Operator",
+          "Enterprise"]
+          .some(tier => row[tier]?.trim().toLowerCase() === "x");
+        // const includeRow = hasXTier && !(exclude && ["x", "X"].includes(exclude.toLowerCase()));
+
+        // if (!includeRow) return null;
+        if (!exclude) {
+          return {
+            theme: row["Theme"],
+            categoryOrder: row["Category Order"],
+            category: row["Category"],
+            functionOrder: row["Function Order"],
+            function: row["Function"],
+            feature: row["Feature"],
+            subscription_tier: row["Subscription Tier"],
+            comparison_tiers: {
+              free: row["Free"],
+              teamDesigner: row["Team Designer"],
+              teamOperator: row["Team Operator"],
+              enterprise: row["Enterprise"],
+            },
+            docs: row["Docs"]
+          };
+        }
+      } catch (error) {
+        console.error("Error processing row:", row, error);
+        return null;
+      }
+    }).filter(Boolean);
+    
+    // Read existing JSON data
+    // const featuresFile = process.env.FEATURES_FILE;
+  
+    const featuresFile = process.argv[3] || "src/sections/Pricing/feature_data.json";
+    if (process.argv[3]) {
+      console.log("Converting CSV to JSON in: " + process.argv[3]);
+    }
+    // const featuresFile = "src/sections/Pricing/feature_data.json";
+
+
+    if (await fs.access(featuresFile).then(() => true, () => false)) {
+      existingData = JSON.parse(await fs.readFile(featuresFile, "utf8"));
+    }
+
+    // Identify new updates
+    const newUpdates = filteredData.filter(
+      newRow =>
+        !existingData.some(
+          existingRow =>
+            existingRow.function === newRow.function &&
+            existingRow.feature === newRow.feature
+        )
+    );
+
+    // Set output for has-updates
+    // if (newUpdates.length > 0) {
+    //   fs.appendFileSync(process.env.GITHUB_ENV, "has-updates=true\n");
+    // } else {
+    //   fs.appendFileSync(process.env.GITHUB_ENV, "has-updates=false\n");
+    // }
+
+    // Merge new updates into existing data
+    const updatedData = [...existingData, ...newUpdates];
+
+    // Write updated data to file
+    try {
+      await fs.writeFile(featuresFile, JSON.stringify(filteredData, null, 2));
+    } catch (error) {
+      console.error("Error writing to feature_data.json:", error);
+    }
+  } catch (error) {
+    console.error("Error processing CSV:", error);
+    process.exit(1);
+  }
+}
+
+processCSV();
diff --git a/.github/workflows/build-and-deploy-site.yml b/.github/workflows/build-and-deploy-site.yml
index 727f240826be..012b9df68484 100644
--- a/.github/workflows/build-and-deploy-site.yml
+++ b/.github/workflows/build-and-deploy-site.yml
@@ -2,7 +2,9 @@ name: Build and Deploy Site
 on:
   push:
     branches: [master]
-
+  workflow_dispatch:
+  workflow_call:
+    
 jobs:
   build-and-deploy:
     runs-on: ubuntu-latest
diff --git a/.github/workflows/build-and-preview-site.yml b/.github/workflows/build-and-preview-site.yml
index 75adc4c8cf5b..3544064837b7 100644
--- a/.github/workflows/build-and-preview-site.yml
+++ b/.github/workflows/build-and-preview-site.yml
@@ -28,5 +28,5 @@ jobs:
           name: public-dir
           path: ./public-dir.zip
           retention-days: 1
-      - name: Triger Inner workflow
-        run: echo "trigering inner workflow"
+      - name: Trigger Inner workflow
+        run: echo "triggering inner workflow"
diff --git a/.github/workflows/feature-list.yml b/.github/workflows/feature-list.yml
new file mode 100644
index 000000000000..e392bfb6bc5d
--- /dev/null
+++ b/.github/workflows/feature-list.yml
@@ -0,0 +1,58 @@
+name: Feature List
+
+on:
+  workflow_dispatch:
+  schedule:
+    - cron: '0 0 * * *'
+
+permissions:
+  contents: write
+  actions: read
+
+jobs:
+  trigger-feature-list:
+    runs-on: ubuntu-latest
+    env:
+      FEATURES_FILE: 'src/sections/Pricing/feature_data.json'
+      SPREADSHEET_URL: 'https://docs.google.com/spreadsheets/d/e/2PACX-1vQwzrUSKfuSRcpkp7sJTw1cSB63s4HCjYLJeGPWECsvqn222hjaaONQlN4X8auKvlaB0es3BqV5rQyz/pub?gid=1153419764&single=true&output=csv'
+
+    steps:
+      - name: Checkout current repository
+        uses: actions/checkout@v4
+
+      - name: Install Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 18
+
+      - name: Install dependencies
+        run: |
+          npm install csvtojson --legacy-peer-deps
+
+      - name: Fetch spreadsheet and process updates
+        run: |
+          # Download the spreadsheet
+          curl -L $SPREADSHEET_URL -o .github/build/spreadsheet.csv
+          ls -al
+
+          # Process the CSV, filter data, and append to feature_data.json
+          node .github/build/features-to-json.js
+
+      - name: Commit changes
+        id: commit-changes
+        uses: stefanzweifel/git-auto-commit-action@v5
+        with:
+          commit_message: "Updated feature data from spreadsheet"
+          file_pattern: ${{ env.FEATURES_FILE }}
+          branch: master
+          commit_options: "--signoff"
+          commit_user_name: l5io
+          commit_user_email: ci@layer5.io
+          commit_author: 'l5io <l5io@users.noreply.github.com>'
+
+  call-build-and-deploy--workflow:
+    needs:
+      - trigger-feature-list
+    name: Build and Deploy Site
+    uses: layer5io/layer5/.github/workflows/build-and-deploy-site.yml@master
+    secrets: inherit
diff --git a/.gitignore b/.gitignore
index 31910386afcd..9b05645d49be 100644
--- a/.gitignore
+++ b/.gitignore
@@ -91,4 +91,7 @@ default.profraw
 
 # Lighthouse CI
 .lighthouseci/
-.gitpod.yml
\ No newline at end of file
+.gitpod.yml
+
+# Temporary files
+spreadsheet.csv
\ No newline at end of file
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index f6b43c067294..ffce62888d59 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -5,6 +5,7 @@ We are beyond excited to see that you want to contribute! We would love to accep
 - [Before You Get Started](#before-you-get-started)
 - [Contributing to Layer5 Projects](#contributing-to-layer5-projects)
 - [Contributing to Layer5's Blogs](#contributing-to-layer5s-blogs)
+- [Contributing to Layer5's Sistent](#contributing-to-layer5s-sistent)
 - [How to Contribute](#how-to-contribute)
   - [Prerequisites](#prerequisites)
   - [Set up your Local Development Environment](#set-up-your-local-development-environment)
@@ -129,6 +130,37 @@ If you'd like to contribute a post to layer5.io/blog, please open an Issue and s
 3. Follow the instructions included in the news template and name the new file after the title of the news article.
 4. Entries will be listed in chronological order automatically.
 
+# Contributing to Layer5's Sistent
+
+If you'd like to contribute to Sistent, start by selecting the project/sistent label in the [#GitHub issue tracker](https://github.com/layer5io/layer5/labels/project%2Fsistent).
+
+### General Contribution Guidelines
+
+1. Select the [project/sistent](https://github.com/layer5io/layer5/labels/project%2Fsistent) label in the GitHub issue tracker.
+1. Navigate to the relevant directory, such as:
+   ```
+   src/sections/Projects/Sistent
+   ```
+    > Note: For other parts of the project, the file path may vary. Ensure you're working in the correct file associated with the area you're contributing to.
+1. Add or update content. The system dynamically generates pages and routes to maintain consistency.
+
+### Adding Sistent Component
+
+We've streamlined the process by introducing a dynamic page creation workflow, simplifying the addition of new pages and ensuring a consistent structure for all contributions.
+
+1. Navigate to the relevant directory, such as:
+   ```
+   src/sections/Projects/Sistent
+   ``` 
+1. To add a new page, simply update this `content.js` file with the necessary details. All content is managed in a centralized file:
+   ```
+   src/sections/Projects/Sistent/components/content.js
+   ```
+1. The system will dynamically generate pages based on this content and handle routing automatically.
+
+### Example
+Refer to the [**Button component**](https://layer5.io/projects/sistent/components/button) in the Sistent Library for an example of how to structure the content.
+
 # Common Types of Site Contributions
 
 The following list of instructions pertains to commonplace site updates by contributors.
diff --git a/Makefile b/Makefile
index 1a9186fb26b3..3a5aa5fecf05 100644
--- a/Makefile
+++ b/Makefile
@@ -41,4 +41,10 @@ clean:
 lint:
 	npm run lint
 
-.PHONY: setup build site clean site-fast lint
+## Prepare a list of features for the pricing page.
+features: 
+	curl -L https://docs.google.com/spreadsheets/d/e/2PACX-1vQwzrUSKfuSRcpkp7sJTw1cSB63s4HCjYLJeGPWECsvqn222hjaaONQlN4X8auKvlaB0es3BqV5rQyz/pub\?gid\=1153419764\&single\=true\&output\=csv -o .github/build/spreadsheet.csv
+	node .github/build/features-to-json.js .github/build/spreadsheet.csv src/sections/Pricing/feature_data.json
+	rm .github/build/spreadsheet.csv
+
+.PHONY: setup build site clean site-fast lint features
diff --git a/README.md b/README.md
index 392449261e19..c0ed2af83be7 100644
--- a/README.md
+++ b/README.md
@@ -147,7 +147,7 @@ alt="Nighthawk" align="left" />
 
 
 <p style="clear:both;">
-<h2><a href="https://meshery.layer5.io/catalog">Meshery Catalog</a></h2>
+<h2><a href="https://cloud.layer5.io/catalog">Meshery Catalog</a></h2>
 <a href="">
   <img src=".github/assets/images/catalog/catalog.svg"
 style="float:left;margin:10px;" width="125px"
diff --git a/gatsby-browser.js b/gatsby-browser.js
index b8de40d7000f..d0ebcb45e806 100644
--- a/gatsby-browser.js
+++ b/gatsby-browser.js
@@ -1,5 +1,4 @@
 import "./fonts.css";
-import posthog from "posthog-js";
 
 document.addEventListener("DOMContentLoaded", () => {
   /** init gtm after 3500 seconds - this could be adjusted */
@@ -29,19 +28,5 @@ function initGTM() {
   document.head.appendChild(script);
 }
 
-export const onClientEntry = () => {
-  if (process.env.NODE_ENV === "production") {
-    posthog.init("phc_Yynjz2lAiQDJFqTWeGT0FJrt50hl53WBx8do3eKImgX",
-      {
-        api_host: "https://us.i.posthog.com",
-        person_profiles: "always",
-        autocapture: {
-          url_ignorelist: ["community/newcomers", "/calendar", "/newcomers"]
-        }
-      }
-    );
-  }
-};
-
 export { wrapRootElement } from "./root-wrapper";
 export { wrapPageElement } from "./page-wrapper";
diff --git a/gatsby-config.js b/gatsby-config.js
index f52a4b0a6082..7f59da1f9a50 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -17,6 +17,7 @@ module.exports = {
   },
   trailingSlash: "never",
   plugins: [
+    "@mediacurrent/gatsby-plugin-silence-css-order-warning",
     {
       resolve: "gatsby-plugin-webpack-bundle-analyser-v2",
       options: {
@@ -545,7 +546,7 @@ module.exports = {
       resolve: "gatsby-plugin-robots-txt",
       options: {
         host: "https://layer5.io",
-        sitemap: "https://layer5.io/sitemap/sitemap-index.xml",
+        sitemap: "https://layer5.io/sitemap-index.xml",
         policy: [{ userAgent: "*", allow: "/" }],
       }
     },
diff --git a/gatsby-node.js b/gatsby-node.js
index c70a2ca99181..7f8a6cb95605 100644
--- a/gatsby-node.js
+++ b/gatsby-node.js
@@ -9,7 +9,11 @@ const path = require("path");
 const slugify = require("./src/utils/slugify");
 const { paginate } = require("gatsby-awesome-pagination");
 const { createFilePath } = require("gatsby-source-filesystem");
+const FilterWarningsPlugin = require("webpack-filter-warnings-plugin");
 const config = require("./gatsby-config");
+const {
+  componentsData,
+} = require("./src/sections/Projects/Sistent/components/content");
 
 if (process.env.CI === "true") {
   // All process.env.CI conditionals in this file are in place for GitHub Pages, if webhost changes in the future, code may need to be modified or removed.
@@ -389,84 +393,99 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
   const resourcePostTemplate = path.resolve("src/templates/resource-single.js");
   const integrationTemplate = path.resolve("src/templates/integrations.js");
 
-  const res = await graphql(`{
-  allPosts: allMdx(filter: {frontmatter: {published: {eq: true}}}) {
-    nodes {
-      frontmatter {
-        program
-        programSlug
-      }
-      fields {
-        collection
-        slug
-      }
-    }
-  }
-  blogTags: allMdx(
-    filter: {fields: {collection: {eq: "blog"}}, frontmatter: {published: {eq: true}}}
-  ) {
-    group(field: {frontmatter: {tags: SELECT}}) {
-      nodes {
-        id
+  const res = await graphql(`
+    {
+      allPosts: allMdx(filter: { frontmatter: { published: { eq: true } } }) {
+        nodes {
+          frontmatter {
+            program
+            programSlug
+          }
+          fields {
+            collection
+            slug
+          }
+        }
       }
-      fieldValue
-    }
-  }
-  blogCategory: allMdx(
-    filter: {fields: {collection: {eq: "blog"}}, frontmatter: {published: {eq: true}}}
-  ) {
-    group(field: {frontmatter: {category: SELECT}}) {
-      nodes {
-        id
+      blogTags: allMdx(
+        filter: {
+          fields: { collection: { eq: "blog" } }
+          frontmatter: { published: { eq: true } }
+        }
+      ) {
+        group(field: { frontmatter: { tags: SELECT } }) {
+          nodes {
+            id
+          }
+          fieldValue
+        }
       }
-      fieldValue
-    }
-  }
-  memberBio: allMdx(
-    filter: {fields: {collection: {eq: "members"}}, frontmatter: {published: {eq: true}, executive_bio: {eq: true}}}
-  ) {
-    nodes {
-      frontmatter {
-        name
+      blogCategory: allMdx(
+        filter: {
+          fields: { collection: { eq: "blog" } }
+          frontmatter: { published: { eq: true } }
+        }
+      ) {
+        group(field: { frontmatter: { category: SELECT } }) {
+          nodes {
+            id
+          }
+          fieldValue
+        }
       }
-      fields {
-        slug
-        collection
+      memberBio: allMdx(
+        filter: {
+          fields: { collection: { eq: "members" } }
+          frontmatter: { published: { eq: true }, executive_bio: { eq: true } }
+        }
+      ) {
+        nodes {
+          frontmatter {
+            name
+          }
+          fields {
+            slug
+            collection
+          }
+        }
       }
-    }
-  }
-  singleWorkshop: allMdx(
-    filter: {fields: {collection: {eq: "service-mesh-workshops"}}}
-  ) {
-    nodes {
-      fields {
-        slug
-        collection
+      singleWorkshop: allMdx(
+        filter: { fields: { collection: { eq: "service-mesh-workshops" } } }
+      ) {
+        nodes {
+          fields {
+            slug
+            collection
+          }
+        }
       }
-    }
-  }
-  labs: allMdx(filter: {fields: {collection: {eq: "service-mesh-labs"}}}) {
-    nodes {
-      fields {
-        slug
-        collection
+      labs: allMdx(
+        filter: { fields: { collection: { eq: "service-mesh-labs" } } }
+      ) {
+        nodes {
+          fields {
+            slug
+            collection
+          }
+        }
       }
-    }
-  }
-  learncontent: allMdx(filter: {fields: {collection: {eq: "content-learn"}}}) {
-    nodes {
-      fields {
-        learnpath
-        slug
-        course
-        section
-        chapter
-        pageType
-        collection
+      learncontent: allMdx(
+        filter: { fields: { collection: { eq: "content-learn" } } }
+      ) {
+        nodes {
+          fields {
+            learnpath
+            slug
+            course
+            section
+            chapter
+            pageType
+            collection
+          }
+        }
       }
     }
-  }
-}`);
+  `);
 
   // handle errors
   if (res.errors) {
@@ -707,6 +726,33 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
       }
     }
   });
+
+  const components = componentsData.map((component) => component.src.replace("/", ""));
+
+  const createComponentPages = (createPage, components) => {
+    const pageTypes = [
+      { suffix: "", file: "index.js" },
+      { suffix: "/guidance", file: "guidance.js" },
+      { suffix: "/code", file: "code.js" },
+    ];
+
+    components.forEach((name) => {
+      pageTypes.forEach(({ suffix, file }) => {
+        const path = `/projects/sistent/components/${name}${suffix}`;
+        const componentPath = `./src/sections/Projects/Sistent/components/${name}/${file}`;
+        try {
+          createPage({
+            path,
+            component: require.resolve(componentPath),
+          });
+        } catch (error) {
+          console.error(`Error creating page for ${path}:`, error);
+        }
+      });
+    });
+  };
+
+  createComponentPages(createPage, components);
 };
 
 // slug starts and ends with '/' so parts[0] and parts[-1] will be empty
@@ -932,7 +978,7 @@ const createSectionPage = ({ envCreatePage, node }) => {
   });
 };
 
-exports.onCreateWebpackConfig = ({ actions }) => {
+exports.onCreateWebpackConfig = ({ actions, stage, getConfig }) => {
   actions.setWebpackConfig({
     resolve: {
       fallback: {
@@ -942,7 +988,29 @@ exports.onCreateWebpackConfig = ({ actions }) => {
       },
     },
   });
+  actions.setWebpackConfig({
+    plugins: [
+      new FilterWarningsPlugin({
+        exclude:
+          /mini-css-extract-plugin[^]*Conflicting order. Following module has been added:/,
+      }),
+    ],
+  });
+
+  if (stage === "build-javascript") {
+    const config = getConfig();
+    const miniCssExtractPlugin = config.plugins.find(
+      (plugin) => plugin.constructor.name === "MiniCssExtractPlugin"
+    );
+
+    if (miniCssExtractPlugin) {
+      miniCssExtractPlugin.options.ignoreOrder = true;
+    }
+
+    actions.replaceWebpackConfig(config);
+  }
 };
+
 exports.createSchemaCustomization = ({ actions }) => {
   const { createTypes } = actions;
   const typeDefs = `
diff --git a/package-lock.json b/package-lock.json
index 54426d7a5db9..fa954b791b47 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,7 @@
       "dependencies": {
         "@emotion/is-prop-valid": "^1.2.1",
         "@emotion/react": "^11.11.4",
-        "@emotion/styled": "^11.11.0",
+        "@emotion/styled": "^11.14.0",
         "@fullcalendar/core": "^6.1.8",
         "@fullcalendar/daygrid": "^6.1.8",
         "@fullcalendar/google-calendar": "^6.0.2",
@@ -21,6 +21,7 @@
         "@loadable/component": "^5.16.4",
         "@mdx-js/mdx": "1.6.22",
         "@mdx-js/react": "1.6.22",
+        "@mediacurrent/gatsby-plugin-silence-css-order-warning": "^1.0.0",
         "@mui/icons-material": "^5.16.4",
         "@mui/material": "^5.15.11",
         "@react-icons/all-files": "^4.1.0",
@@ -54,16 +55,16 @@
         "gatsby-plugin-styled-components": "^6.11.0",
         "gatsby-plugin-svgr": "^3.0.0-beta.0",
         "gatsby-redirect-from": "1.0.4",
-        "gatsby-source-filesystem": "^5.11.0",
+        "gatsby-source-filesystem": "^5.14.0",
         "gatsby-transformer-sharp": "^5.11.0",
         "gbimage-bridge": "^0.2.2",
         "gsap": "^3.12.2",
         "joi": "^17.10.2",
         "js-search": "^2.0.0",
         "lodash": "^4.17.21",
+        "mini-css-extract-plugin": "^2.9.2",
         "mui-datatables": "^4.3.0",
         "path-browserify": "^1.0.1",
-        "posthog-js": "^1.161.6",
         "prism-react-renderer": "^2.0.6",
         "process": "^0.11.10",
         "prop-types": "^15.7.2",
@@ -94,8 +95,9 @@
         "simple-react-lightbox": "^3.6.9-0",
         "slick-carousel": "^1.8.1",
         "styled-components": "^6.0.5",
-        "swiper": "^10.0.4",
+        "swiper": "^11.1.15",
         "url": "^0.11.3",
+        "webpack-filter-warnings-plugin": "^1.2.1",
         "xstate": "^5.13.0"
       },
       "devDependencies": {
@@ -106,7 +108,7 @@
         "cpx": "^1.5.0",
         "env-cmd": "^10.1.0",
         "eslint": "^8.46.0",
-        "eslint-plugin-react": "^7.34.2",
+        "eslint-plugin-react": "^7.37.3",
         "gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.30",
         "gh-pages": "^6.0.0",
         "husky": "^8.0.3",
@@ -2171,15 +2173,15 @@
       }
     },
     "node_modules/@emotion/babel-plugin": {
-      "version": "11.12.0",
-      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.12.0.tgz",
-      "integrity": "sha512-y2WQb+oP8Jqvvclh8Q55gLUyb7UFvgv7eJfsj7td5TToBrIUtPay2kMrZi4xjq9qw2vD0ZR5fSho0yqoFgX7Rw==",
+      "version": "11.13.5",
+      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.13.5.tgz",
+      "integrity": "sha512-pxHCpT2ex+0q+HH91/zsdHkw/lXd468DIN2zvfvLtPKLLMo6gQj7oLObq8PhkrxOZb/gGCq03S3Z7PDhS8pduQ==",
       "dependencies": {
         "@babel/helper-module-imports": "^7.16.7",
         "@babel/runtime": "^7.18.3",
         "@emotion/hash": "^0.9.2",
         "@emotion/memoize": "^0.9.0",
-        "@emotion/serialize": "^1.2.0",
+        "@emotion/serialize": "^1.3.3",
         "babel-plugin-macros": "^3.1.0",
         "convert-source-map": "^1.5.0",
         "escape-string-regexp": "^4.0.0",
@@ -2247,14 +2249,14 @@
       }
     },
     "node_modules/@emotion/serialize": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.3.2.tgz",
-      "integrity": "sha512-grVnMvVPK9yUVE6rkKfAJlYZgo0cu3l9iMC77V7DW6E1DUIrU68pSEXRmFZFOFB1QFo57TncmOcvcbMDWsL4yA==",
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.3.3.tgz",
+      "integrity": "sha512-EISGqt7sSNWHGI76hC7x1CksiXPahbxEOrC5RjmFRJTqLyEK9/9hZvBbiYn70dw4wuwMKiEMCUlR6ZXTSWQqxA==",
       "dependencies": {
         "@emotion/hash": "^0.9.2",
         "@emotion/memoize": "^0.9.0",
         "@emotion/unitless": "^0.10.0",
-        "@emotion/utils": "^1.4.1",
+        "@emotion/utils": "^1.4.2",
         "csstype": "^3.0.2"
       }
     },
@@ -2264,16 +2266,16 @@
       "integrity": "sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg=="
     },
     "node_modules/@emotion/styled": {
-      "version": "11.13.0",
-      "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.13.0.tgz",
-      "integrity": "sha512-tkzkY7nQhW/zC4hztlwucpT8QEZ6eUzpXDRhww/Eej4tFfO0FxQYWRyg/c5CCXa4d/f174kqeXYjuQRnhzf6dA==",
+      "version": "11.14.0",
+      "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.14.0.tgz",
+      "integrity": "sha512-XxfOnXFffatap2IyCeJyNov3kiDQWoR08gPUQxvbL7fxKryGBKUZUkG6Hz48DZwVrJSVh9sJboyV1Ds4OW6SgA==",
       "dependencies": {
         "@babel/runtime": "^7.18.3",
-        "@emotion/babel-plugin": "^11.12.0",
+        "@emotion/babel-plugin": "^11.13.5",
         "@emotion/is-prop-valid": "^1.3.0",
-        "@emotion/serialize": "^1.3.0",
-        "@emotion/use-insertion-effect-with-fallbacks": "^1.1.0",
-        "@emotion/utils": "^1.4.0"
+        "@emotion/serialize": "^1.3.3",
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.2.0",
+        "@emotion/utils": "^1.4.2"
       },
       "peerDependencies": {
         "@emotion/react": "^11.0.0-rc.0",
@@ -2291,17 +2293,17 @@
       "integrity": "sha512-dFoMUuQA20zvtVTuxZww6OHoJYgrzfKM1t52mVySDJnMSEa08ruEvdYQbhvyu6soU+NeLVd3yKfTfT0NeV6qGg=="
     },
     "node_modules/@emotion/use-insertion-effect-with-fallbacks": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.1.0.tgz",
-      "integrity": "sha512-+wBOcIV5snwGgI2ya3u99D7/FJquOIniQT1IKyDsBmEgwvpxMNeS65Oib7OnE2d2aY+3BU4OiH+0Wchf8yk3Hw==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.2.0.tgz",
+      "integrity": "sha512-yJMtVdH59sxi/aVJBpk9FQq+OR8ll5GT8oWd57UpeaKEVGab41JWaCFA7FRLoMLloOZF/c/wsPoe+bfGmRKgDg==",
       "peerDependencies": {
         "react": ">=16.8.0"
       }
     },
     "node_modules/@emotion/utils": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.4.1.tgz",
-      "integrity": "sha512-BymCXzCG3r72VKJxaYVwOXATqXIZ85cuvg0YOUDxMGNrKc1DJRZk8MgV5wyXRyEayIMd4FuXJIUgTBXvDNW5cA=="
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.4.2.tgz",
+      "integrity": "sha512-3vLclRofFziIa3J2wDh9jjbkUz9qk5Vi3IZ/FSTKViB0k+ef0fPV7dYrUIugbgupYDx7v9ud/SjrtEP8Y4xLoA=="
     },
     "node_modules/@emotion/weak-memoize": {
       "version": "0.4.0",
@@ -3834,6 +3836,12 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/@mediacurrent/gatsby-plugin-silence-css-order-warning": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@mediacurrent/gatsby-plugin-silence-css-order-warning/-/gatsby-plugin-silence-css-order-warning-1.0.0.tgz",
+      "integrity": "sha512-TiBIncOzH5JtjHxZ43D4KmsZcjaKaGtl4p9+9HbhdDSNC5DcS3KpIJWT0nS0qnSd2QlbDRx44XAkrl4GZpIwTA==",
+      "license": "MIT"
+    },
     "node_modules/@mischnic/json-sourcemap": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/@mischnic/json-sourcemap/-/json-sourcemap-0.1.1.tgz",
@@ -7101,12 +7109,12 @@
       }
     },
     "node_modules/array-buffer-byte-length": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.1.tgz",
-      "integrity": "sha512-ahC5W1xgou+KTXix4sAO8Ki12Q+jf4i0+tmk3sC+zgcynshkHxzpXdImBehiUYKKKDwvfFiJl1tZt6ewscS1Mg==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.2.tgz",
+      "integrity": "sha512-LHE+8BuR7RYGDKvnrmcuSq3tDcKv9OFEXQt/HpbZhY7V6h0zlUXutnAD82GiFx9rdieCMjkvtcsPqBwgUl1Iiw==",
       "dependencies": {
-        "call-bind": "^1.0.5",
-        "is-array-buffer": "^3.0.4"
+        "call-bound": "^1.0.3",
+        "is-array-buffer": "^3.0.5"
       },
       "engines": {
         "node": ">= 0.4"
@@ -7230,14 +7238,14 @@
       }
     },
     "node_modules/array.prototype.flatmap": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.3.2.tgz",
-      "integrity": "sha512-Ewyx0c9PmpcsByhSW4r+9zDU7sGjFc86qf/kKtuSCRdhfbk0SNLLkaT5qvcHnRGgc5NP/ly/y+qkXkqONX54CQ==",
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.3.3.tgz",
+      "integrity": "sha512-Y7Wt51eKJSyi80hFrJCePGGNo5ktJCslFuboqJsbf57CCPcm5zztluPlc4/aD8sWsKvlwatezpV4U1efk8kpjg==",
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.2.0",
-        "es-abstract": "^1.22.1",
-        "es-shim-unscopables": "^1.0.0"
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.5",
+        "es-shim-unscopables": "^1.0.2"
       },
       "engines": {
         "node": ">= 0.4"
@@ -7262,18 +7270,17 @@
       }
     },
     "node_modules/arraybuffer.prototype.slice": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.3.tgz",
-      "integrity": "sha512-bMxMKAjg13EBSVscxTaYA4mRc5t1UAXa2kXiGTNfZ079HIWXEkKmkgFrh/nJqamaLSrXO5H4WFFkPEaLJWbs3A==",
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.4.tgz",
+      "integrity": "sha512-BNoCY6SXXPQ7gF2opIP4GBE+Xw7U+pHMYKuzjgCN3GwiaIR09UUeKfheyIry77QtrCBlC0KK0q5/TER/tYh3PQ==",
       "dependencies": {
         "array-buffer-byte-length": "^1.0.1",
-        "call-bind": "^1.0.5",
+        "call-bind": "^1.0.8",
         "define-properties": "^1.2.1",
-        "es-abstract": "^1.22.3",
-        "es-errors": "^1.2.1",
-        "get-intrinsic": "^1.2.3",
-        "is-array-buffer": "^3.0.4",
-        "is-shared-array-buffer": "^1.0.2"
+        "es-abstract": "^1.23.5",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6",
+        "is-array-buffer": "^3.0.4"
       },
       "engines": {
         "node": ">= 0.4"
@@ -8398,15 +8405,41 @@
       }
     },
     "node_modules/call-bind": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz",
-      "integrity": "sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==",
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.8.tgz",
+      "integrity": "sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==",
       "dependencies": {
+        "call-bind-apply-helpers": "^1.0.0",
         "es-define-property": "^1.0.0",
-        "es-errors": "^1.3.0",
-        "function-bind": "^1.1.2",
         "get-intrinsic": "^1.2.4",
-        "set-function-length": "^1.2.1"
+        "set-function-length": "^1.2.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/call-bind-apply-helpers": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.1.tgz",
+      "integrity": "sha512-BhYE+WDaywFg2TBWYNXAE+8B1ATnThNBqXHP5nQu0jWJdVvY2hvkpyB3qOmtmDePiS5/BDQ8wASEWGMWRG148g==",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/call-bound": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.3.tgz",
+      "integrity": "sha512-YTd+6wGlNlPxSuri7Y6X8tY2dmm12UMH66RpKMhiX6rsk5wXXnYgbUcOt8kiS31/AjfoTOvCsE+w8nZQLQnzHA==",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.1",
+        "get-intrinsic": "^1.2.6"
       },
       "engines": {
         "node": ">= 0.4"
@@ -10422,13 +10455,13 @@
       "integrity": "sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA=="
     },
     "node_modules/data-view-buffer": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/data-view-buffer/-/data-view-buffer-1.0.1.tgz",
-      "integrity": "sha512-0lht7OugA5x3iJLOWFhWK/5ehONdprk0ISXqVFn/NFrDu+cuc8iADFrGQz5BnRK7LLU3JmkbXSxaqX+/mXYtUA==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/data-view-buffer/-/data-view-buffer-1.0.2.tgz",
+      "integrity": "sha512-EmKO5V3OLXh1rtK2wgXRansaK1/mtVdTUEiEI0W8RkvgT05kfxaH29PliLnpLP73yYO6142Q72QNa8Wx/A5CqQ==",
       "dependencies": {
-        "call-bind": "^1.0.6",
+        "call-bound": "^1.0.3",
         "es-errors": "^1.3.0",
-        "is-data-view": "^1.0.1"
+        "is-data-view": "^1.0.2"
       },
       "engines": {
         "node": ">= 0.4"
@@ -10438,27 +10471,27 @@
       }
     },
     "node_modules/data-view-byte-length": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/data-view-byte-length/-/data-view-byte-length-1.0.1.tgz",
-      "integrity": "sha512-4J7wRJD3ABAzr8wP+OcIcqq2dlUKp4DVflx++hs5h5ZKydWMI6/D/fAot+yh6g2tHh8fLFTvNOaVN357NvSrOQ==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/data-view-byte-length/-/data-view-byte-length-1.0.2.tgz",
+      "integrity": "sha512-tuhGbE6CfTM9+5ANGf+oQb72Ky/0+s3xKUpHvShfiz2RxMFgFPjsXuRLBVMtvMs15awe45SRb83D6wH4ew6wlQ==",
       "dependencies": {
-        "call-bind": "^1.0.7",
+        "call-bound": "^1.0.3",
         "es-errors": "^1.3.0",
-        "is-data-view": "^1.0.1"
+        "is-data-view": "^1.0.2"
       },
       "engines": {
         "node": ">= 0.4"
       },
       "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+        "url": "https://github.com/sponsors/inspect-js"
       }
     },
     "node_modules/data-view-byte-offset": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/data-view-byte-offset/-/data-view-byte-offset-1.0.0.tgz",
-      "integrity": "sha512-t/Ygsytq+R995EJ5PZlD4Cu56sWa8InXySaViRzw9apusqsOO2bQP+SbYzAhR0pFKoB+43lYy8rWban9JSuXnA==",
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/data-view-byte-offset/-/data-view-byte-offset-1.0.1.tgz",
+      "integrity": "sha512-BS8PfmtDGnrgYdOonGZQdLZslWIeCGFP9tpan0hi1Co2Zr2NKADsvGYA8XxuG/4UWgJ6Cjtv+YJnB6MM69QGlQ==",
       "dependencies": {
-        "call-bind": "^1.0.6",
+        "call-bound": "^1.0.2",
         "es-errors": "^1.3.0",
         "is-data-view": "^1.0.1"
       },
@@ -11019,6 +11052,19 @@
       "resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-5.1.0.tgz",
       "integrity": "sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA=="
     },
+    "node_modules/dunder-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
+      "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/duplexer": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
@@ -11261,56 +11307,59 @@
       }
     },
     "node_modules/es-abstract": {
-      "version": "1.23.3",
-      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.23.3.tgz",
-      "integrity": "sha512-e+HfNH61Bj1X9/jLc5v1owaLYuHdeHHSQlkhCBiTK8rBvKaULl/beGMxwrMXjpYrv4pz22BlY570vVePA2ho4A==",
+      "version": "1.23.8",
+      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.23.8.tgz",
+      "integrity": "sha512-lfab8IzDn6EpI1ibZakcgS6WsfEBiB+43cuJo+wgylx1xKXf+Sp+YR3vFuQwC/u3sxYwV8Cxe3B0DpVUu/WiJQ==",
       "dependencies": {
-        "array-buffer-byte-length": "^1.0.1",
-        "arraybuffer.prototype.slice": "^1.0.3",
+        "array-buffer-byte-length": "^1.0.2",
+        "arraybuffer.prototype.slice": "^1.0.4",
         "available-typed-arrays": "^1.0.7",
-        "call-bind": "^1.0.7",
-        "data-view-buffer": "^1.0.1",
-        "data-view-byte-length": "^1.0.1",
-        "data-view-byte-offset": "^1.0.0",
-        "es-define-property": "^1.0.0",
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "data-view-buffer": "^1.0.2",
+        "data-view-byte-length": "^1.0.2",
+        "data-view-byte-offset": "^1.0.1",
+        "es-define-property": "^1.0.1",
         "es-errors": "^1.3.0",
         "es-object-atoms": "^1.0.0",
         "es-set-tostringtag": "^2.0.3",
-        "es-to-primitive": "^1.2.1",
-        "function.prototype.name": "^1.1.6",
-        "get-intrinsic": "^1.2.4",
-        "get-symbol-description": "^1.0.2",
-        "globalthis": "^1.0.3",
-        "gopd": "^1.0.1",
+        "es-to-primitive": "^1.3.0",
+        "function.prototype.name": "^1.1.8",
+        "get-intrinsic": "^1.2.6",
+        "get-symbol-description": "^1.1.0",
+        "globalthis": "^1.0.4",
+        "gopd": "^1.2.0",
         "has-property-descriptors": "^1.0.2",
-        "has-proto": "^1.0.3",
-        "has-symbols": "^1.0.3",
+        "has-proto": "^1.2.0",
+        "has-symbols": "^1.1.0",
         "hasown": "^2.0.2",
-        "internal-slot": "^1.0.7",
-        "is-array-buffer": "^3.0.4",
+        "internal-slot": "^1.1.0",
+        "is-array-buffer": "^3.0.5",
         "is-callable": "^1.2.7",
-        "is-data-view": "^1.0.1",
-        "is-negative-zero": "^2.0.3",
-        "is-regex": "^1.1.4",
-        "is-shared-array-buffer": "^1.0.3",
-        "is-string": "^1.0.7",
-        "is-typed-array": "^1.1.13",
-        "is-weakref": "^1.0.2",
-        "object-inspect": "^1.13.1",
+        "is-data-view": "^1.0.2",
+        "is-regex": "^1.2.1",
+        "is-shared-array-buffer": "^1.0.4",
+        "is-string": "^1.1.1",
+        "is-typed-array": "^1.1.15",
+        "is-weakref": "^1.1.0",
+        "math-intrinsics": "^1.1.0",
+        "object-inspect": "^1.13.3",
         "object-keys": "^1.1.1",
-        "object.assign": "^4.1.5",
-        "regexp.prototype.flags": "^1.5.2",
-        "safe-array-concat": "^1.1.2",
-        "safe-regex-test": "^1.0.3",
-        "string.prototype.trim": "^1.2.9",
-        "string.prototype.trimend": "^1.0.8",
+        "object.assign": "^4.1.7",
+        "own-keys": "^1.0.0",
+        "regexp.prototype.flags": "^1.5.3",
+        "safe-array-concat": "^1.1.3",
+        "safe-push-apply": "^1.0.0",
+        "safe-regex-test": "^1.1.0",
+        "string.prototype.trim": "^1.2.10",
+        "string.prototype.trimend": "^1.0.9",
         "string.prototype.trimstart": "^1.0.8",
-        "typed-array-buffer": "^1.0.2",
-        "typed-array-byte-length": "^1.0.1",
-        "typed-array-byte-offset": "^1.0.2",
-        "typed-array-length": "^1.0.6",
-        "unbox-primitive": "^1.0.2",
-        "which-typed-array": "^1.1.15"
+        "typed-array-buffer": "^1.0.3",
+        "typed-array-byte-length": "^1.0.3",
+        "typed-array-byte-offset": "^1.0.4",
+        "typed-array-length": "^1.0.7",
+        "unbox-primitive": "^1.1.0",
+        "which-typed-array": "^1.1.18"
       },
       "engines": {
         "node": ">= 0.4"
@@ -11320,12 +11369,9 @@
       }
     },
     "node_modules/es-define-property": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.0.tgz",
-      "integrity": "sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==",
-      "dependencies": {
-        "get-intrinsic": "^1.2.4"
-      },
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
+      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
       "engines": {
         "node": ">= 0.4"
       }
@@ -11358,24 +11404,26 @@
       }
     },
     "node_modules/es-iterator-helpers": {
-      "version": "1.0.19",
-      "resolved": "https://registry.npmjs.org/es-iterator-helpers/-/es-iterator-helpers-1.0.19.tgz",
-      "integrity": "sha512-zoMwbCcH5hwUkKJkT8kDIBZSz9I6mVG//+lDCinLCGov4+r7NIy0ld8o03M0cJxl2spVf6ESYVS6/gpIfq1FFw==",
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/es-iterator-helpers/-/es-iterator-helpers-1.2.1.tgz",
+      "integrity": "sha512-uDn+FE1yrDzyC0pCo961B2IHbdM8y/ACZsKD4dG6WqrjV53BADjwa7D+1aom2rsNVfLyDgU/eigvlJGJ08OQ4w==",
       "dependencies": {
-        "call-bind": "^1.0.7",
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
         "define-properties": "^1.2.1",
-        "es-abstract": "^1.23.3",
+        "es-abstract": "^1.23.6",
         "es-errors": "^1.3.0",
         "es-set-tostringtag": "^2.0.3",
         "function-bind": "^1.1.2",
-        "get-intrinsic": "^1.2.4",
-        "globalthis": "^1.0.3",
+        "get-intrinsic": "^1.2.6",
+        "globalthis": "^1.0.4",
+        "gopd": "^1.2.0",
         "has-property-descriptors": "^1.0.2",
-        "has-proto": "^1.0.3",
-        "has-symbols": "^1.0.3",
-        "internal-slot": "^1.0.7",
-        "iterator.prototype": "^1.1.2",
-        "safe-array-concat": "^1.1.2"
+        "has-proto": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "internal-slot": "^1.1.0",
+        "iterator.prototype": "^1.1.4",
+        "safe-array-concat": "^1.1.3"
       },
       "engines": {
         "node": ">= 0.4"
@@ -11419,13 +11467,13 @@
       }
     },
     "node_modules/es-to-primitive": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz",
-      "integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==",
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.3.0.tgz",
+      "integrity": "sha512-w+5mJ3GuFL+NjVtJlvydShqE1eN3h3PbI7/5LAsYJP/2qtuMXjfL2LpHSRqo4b4eSF5K/DH1JXKUAHSB2UW50g==",
       "dependencies": {
-        "is-callable": "^1.1.4",
-        "is-date-object": "^1.0.1",
-        "is-symbol": "^1.0.2"
+        "is-callable": "^1.2.7",
+        "is-date-object": "^1.0.5",
+        "is-symbol": "^1.0.4"
       },
       "engines": {
         "node": ">= 0.4"
@@ -11734,27 +11782,27 @@
       }
     },
     "node_modules/eslint-plugin-react": {
-      "version": "7.36.1",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.36.1.tgz",
-      "integrity": "sha512-/qwbqNXZoq+VP30s1d4Nc1C5GTxjJQjk4Jzs4Wq2qzxFM7dSmuG2UkIjg2USMLh3A/aVcUNrK7v0J5U1XEGGwA==",
+      "version": "7.37.3",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.37.3.tgz",
+      "integrity": "sha512-DomWuTQPFYZwF/7c9W2fkKkStqZmBd3uugfqBYLdkZ3Hii23WzZuOLUskGxB8qkSKqftxEeGL1TB2kMhrce0jA==",
       "dependencies": {
         "array-includes": "^3.1.8",
         "array.prototype.findlast": "^1.2.5",
-        "array.prototype.flatmap": "^1.3.2",
+        "array.prototype.flatmap": "^1.3.3",
         "array.prototype.tosorted": "^1.1.4",
         "doctrine": "^2.1.0",
-        "es-iterator-helpers": "^1.0.19",
+        "es-iterator-helpers": "^1.2.1",
         "estraverse": "^5.3.0",
         "hasown": "^2.0.2",
         "jsx-ast-utils": "^2.4.1 || ^3.0.0",
         "minimatch": "^3.1.2",
         "object.entries": "^1.1.8",
         "object.fromentries": "^2.0.8",
-        "object.values": "^1.2.0",
+        "object.values": "^1.2.1",
         "prop-types": "^15.8.1",
         "resolve": "^2.0.0-next.5",
         "semver": "^6.3.1",
-        "string.prototype.matchall": "^4.0.11",
+        "string.prototype.matchall": "^4.0.12",
         "string.prototype.repeat": "^1.0.0"
       },
       "engines": {
@@ -12699,11 +12747,6 @@
         "pend": "~1.2.0"
       }
     },
-    "node_modules/fflate": {
-      "version": "0.4.8",
-      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.4.8.tgz",
-      "integrity": "sha512-FJqqoDBR00Mdj9ppamLa/Y7vxm+PRmNWA67N846RvsoYVMKB4q3y/de5PA7gUmRMYK/8CMz2GDZQmCRN1wBcWA=="
-    },
     "node_modules/figures": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/figures/-/figures-3.2.0.tgz",
@@ -13495,14 +13538,16 @@
       }
     },
     "node_modules/function.prototype.name": {
-      "version": "1.1.6",
-      "resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.6.tgz",
-      "integrity": "sha512-Z5kx79swU5P27WEayXM1tBi5Ze/lbIyiNgU3qyXUOf9b2rgXYyF9Dy9Cx+IQv/Lc8WCG6L82zwUPpSS9hGehIg==",
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.8.tgz",
+      "integrity": "sha512-e5iwyodOHhbMr/yNrc7fDYG4qlbIvI5gajyzPnb5TCwyhjApznQh1BMFou9b30SevY43gCJKXycoCBjMbsuW0Q==",
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.2.0",
-        "es-abstract": "^1.22.1",
-        "functions-have-names": "^1.2.3"
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "define-properties": "^1.2.1",
+        "functions-have-names": "^1.2.3",
+        "hasown": "^2.0.2",
+        "is-callable": "^1.2.7"
       },
       "engines": {
         "node": ">= 0.4"
@@ -13872,18 +13917,18 @@
       }
     },
     "node_modules/gatsby-core-utils": {
-      "version": "4.13.1",
-      "resolved": "https://registry.npmjs.org/gatsby-core-utils/-/gatsby-core-utils-4.13.1.tgz",
-      "integrity": "sha512-w7G6SsQr8T2q+AJ1MxvRNGocCt+wjc22MiRLj2Zi3Ijpjszbr818JxwI4+aPt8WOSHlKT5SYCHICnEvcYPm9gg==",
+      "version": "4.14.0",
+      "resolved": "https://registry.npmjs.org/gatsby-core-utils/-/gatsby-core-utils-4.14.0.tgz",
+      "integrity": "sha512-h0v20gB213PmhKjioCJ93SrUb7Hihnqxd6X6Iur4u1eiWTUDsGeV9g1bkquiuDl2qovUnjj7mOoHdWiu/Ax/9Q==",
       "dependencies": {
         "@babel/runtime": "^7.20.13",
         "ci-info": "2.0.0",
         "configstore": "^5.0.1",
         "fastq": "^1.15.0",
         "file-type": "^16.5.4",
-        "fs-extra": "^11.1.1",
+        "fs-extra": "^11.2.0",
         "got": "^11.8.6",
-        "hash-wasm": "^4.9.0",
+        "hash-wasm": "^4.11.0",
         "import-from": "^4.0.0",
         "lmdb": "2.5.3",
         "lock": "^1.1.0",
@@ -15004,15 +15049,15 @@
       }
     },
     "node_modules/gatsby-source-filesystem": {
-      "version": "5.13.1",
-      "resolved": "https://registry.npmjs.org/gatsby-source-filesystem/-/gatsby-source-filesystem-5.13.1.tgz",
-      "integrity": "sha512-nFWzOBpi84nDeVNeO7bpKL9mVYMl1tfjJmE5l868YATFShGzZnA6qMd200XCsf78PexZHAiV/P1MlsyKqjJduA==",
+      "version": "5.14.0",
+      "resolved": "https://registry.npmjs.org/gatsby-source-filesystem/-/gatsby-source-filesystem-5.14.0.tgz",
+      "integrity": "sha512-uewEJaHvdxZlN6DOtZCIUuI7X5v9MRk5IVpCYy9SIZCDbnUA5siEd2A4SC+kcXxJM6AUbdvkfayqpVJrm5JaZA==",
       "dependencies": {
         "@babel/runtime": "^7.20.13",
         "chokidar": "^3.5.3",
         "file-type": "^16.5.4",
-        "fs-extra": "^11.1.1",
-        "gatsby-core-utils": "^4.13.1",
+        "fs-extra": "^11.2.0",
+        "gatsby-core-utils": "^4.14.0",
         "mime": "^3.0.0",
         "pretty-bytes": "^5.6.0",
         "valid-url": "^1.0.9",
@@ -15375,6 +15420,15 @@
         "url": "https://github.com/sponsors/epoberezkin"
       }
     },
+    "node_modules/gatsby/node_modules/ajv-keywords": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "ajv": "^6.9.1"
+      }
+    },
     "node_modules/gatsby/node_modules/ansi-styles": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
@@ -15568,6 +15622,45 @@
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
       "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
     },
+    "node_modules/gatsby/node_modules/mini-css-extract-plugin": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-1.6.2.tgz",
+      "integrity": "sha512-WhDvO3SjGm40oV5y26GjMJYjd2UMqrLAGKy5YS2/3QKJy2F7jgynuHTir/tgUUOiNQu5saXHdc8reo7YuhhT4Q==",
+      "license": "MIT",
+      "dependencies": {
+        "loader-utils": "^2.0.0",
+        "schema-utils": "^3.0.0",
+        "webpack-sources": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^4.4.0 || ^5.0.0"
+      }
+    },
+    "node_modules/gatsby/node_modules/schema-utils": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz",
+      "integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/json-schema": "^7.0.8",
+        "ajv": "^6.12.5",
+        "ajv-keywords": "^3.5.2"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
     "node_modules/gatsby/node_modules/semver": {
       "version": "7.6.3",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
@@ -15689,15 +15782,20 @@
       }
     },
     "node_modules/get-intrinsic": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz",
-      "integrity": "sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==",
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.6.tgz",
+      "integrity": "sha512-qxsEs+9A+u85HhllWJJFicJfPDhRmjzoYdl64aMWW9yRIJmSyxdn8IEkuIM530/7T+lv0TIHd8L6Q/ra0tEoeA==",
       "dependencies": {
+        "call-bind-apply-helpers": "^1.0.1",
+        "dunder-proto": "^1.0.0",
+        "es-define-property": "^1.0.1",
         "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
         "function-bind": "^1.1.2",
-        "has-proto": "^1.0.1",
-        "has-symbols": "^1.0.3",
-        "hasown": "^2.0.0"
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "math-intrinsics": "^1.0.0"
       },
       "engines": {
         "node": ">= 0.4"
@@ -15726,13 +15824,13 @@
       }
     },
     "node_modules/get-symbol-description": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.0.2.tgz",
-      "integrity": "sha512-g0QYk1dZBxGwk+Ngc+ltRH2IBp2f7zBkBMBJZCDerh6EhlhSR6+9irMCuT/09zD6qkarHUSn529sK/yL4S27mg==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.1.0.tgz",
+      "integrity": "sha512-w9UMqWwJxHNOvoNzSJ2oPF5wvYcvP7jUvYzhp67yEhTi17ZDBBC1z9pTdGuzjD+EFIqLSYRweZjqfiPzQ06Ebg==",
       "dependencies": {
-        "call-bind": "^1.0.5",
+        "call-bound": "^1.0.3",
         "es-errors": "^1.3.0",
-        "get-intrinsic": "^1.2.4"
+        "get-intrinsic": "^1.2.6"
       },
       "engines": {
         "node": ">= 0.4"
@@ -16029,11 +16127,11 @@
       }
     },
     "node_modules/gopd": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
-      "integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==",
-      "dependencies": {
-        "get-intrinsic": "^1.1.3"
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
+      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -16241,9 +16339,12 @@
       }
     },
     "node_modules/has-proto": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.3.tgz",
-      "integrity": "sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.2.0.tgz",
+      "integrity": "sha512-KIL7eQPfHQRC8+XluaIw7BHUwwqL19bQn4hzNgdr+1wXoU0KKj6rufu47lhY7KbJR2C6T6+PfyN0Ea7wkSS+qQ==",
+      "dependencies": {
+        "dunder-proto": "^1.0.0"
+      },
       "engines": {
         "node": ">= 0.4"
       },
@@ -16252,9 +16353,9 @@
       }
     },
     "node_modules/has-symbols": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
-      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
+      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
       "engines": {
         "node": ">= 0.4"
       },
@@ -16931,13 +17032,13 @@
       }
     },
     "node_modules/internal-slot": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.7.tgz",
-      "integrity": "sha512-NGnrKwXzSms2qUUih/ILZ5JBqNTSa1+ZmP6flaIp6KmSElgE9qdndzS3cqjrDovwFdmwsGsLdeFgB6suw+1e9g==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.1.0.tgz",
+      "integrity": "sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==",
       "dependencies": {
         "es-errors": "^1.3.0",
-        "hasown": "^2.0.0",
-        "side-channel": "^1.0.4"
+        "hasown": "^2.0.2",
+        "side-channel": "^1.1.0"
       },
       "engines": {
         "node": ">= 0.4"
@@ -17054,12 +17155,13 @@
       }
     },
     "node_modules/is-array-buffer": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.4.tgz",
-      "integrity": "sha512-wcjaerHw0ydZwfhiKbXJWLDY8A7yV7KhjQOpb83hGgGfId/aQa4TOvwyzn2PuswW2gPCYEL/nEAiSVpdOj1lXw==",
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.5.tgz",
+      "integrity": "sha512-DDfANUiiG2wC1qawP66qlTugJeL5HyzMpfr8lLK+jMQirGzNod0B12cFB/9q838Ru27sBwfw78/rdoU7RERz6A==",
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "get-intrinsic": "^1.2.1"
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "get-intrinsic": "^1.2.6"
       },
       "engines": {
         "node": ">= 0.4"
@@ -17088,11 +17190,14 @@
       }
     },
     "node_modules/is-bigint": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.0.4.tgz",
-      "integrity": "sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.1.0.tgz",
+      "integrity": "sha512-n4ZT37wG78iz03xPRKJrHTdZbe3IicyucEtdRsV5yglwc3GyUfbAfpSeD0FJ41NbUNSt5wbhqfp1fS+BgnvDFQ==",
       "dependencies": {
-        "has-bigints": "^1.0.1"
+        "has-bigints": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -17110,12 +17215,12 @@
       }
     },
     "node_modules/is-boolean-object": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.1.2.tgz",
-      "integrity": "sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==",
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.2.1.tgz",
+      "integrity": "sha512-l9qO6eFlUETHtuihLcYOaLKByJ1f+N4kthcU9YjHy3N+B3hWv0y/2Nd0mu/7lTFnRQHTrSdXF50HQ3bl5fEnng==",
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "has-tostringtag": "^1.0.0"
+        "call-bound": "^1.0.2",
+        "has-tostringtag": "^1.0.2"
       },
       "engines": {
         "node": ">= 0.4"
@@ -17195,10 +17300,12 @@
       }
     },
     "node_modules/is-data-view": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/is-data-view/-/is-data-view-1.0.1.tgz",
-      "integrity": "sha512-AHkaJrsUVW6wq6JS8y3JnM/GJF/9cf+k20+iDzlSaJrinEo5+7vRiteOSwBhHRiAyQATN1AmY4hwzxJKPmYf+w==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-data-view/-/is-data-view-1.0.2.tgz",
+      "integrity": "sha512-RKtWF8pGmS87i2D6gqQu/l7EYRlVdfzemCJN/P3UOs//x1QE7mfhvzHIApBTRf7axvT6DMGwSwBXYCT0nfB9xw==",
       "dependencies": {
+        "call-bound": "^1.0.2",
+        "get-intrinsic": "^1.2.6",
         "is-typed-array": "^1.1.13"
       },
       "engines": {
@@ -17209,11 +17316,12 @@
       }
     },
     "node_modules/is-date-object": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.5.tgz",
-      "integrity": "sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.1.0.tgz",
+      "integrity": "sha512-PwwhEakHVKTdRNVOw+/Gyh0+MzlCl4R6qKvkhuvLtPMggI1WAHt9sOwZxQLSGpUaDnrdyDsomoRgNnCfKNSXXg==",
       "dependencies": {
-        "has-tostringtag": "^1.0.0"
+        "call-bound": "^1.0.2",
+        "has-tostringtag": "^1.0.2"
       },
       "engines": {
         "node": ">= 0.4"
@@ -17296,11 +17404,14 @@
       }
     },
     "node_modules/is-finalizationregistry": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/is-finalizationregistry/-/is-finalizationregistry-1.0.2.tgz",
-      "integrity": "sha512-0by5vtUJs8iFQb5TYUHHPudOR+qXYIMKtiUzvLIZITZUjknFmziyBJuLhVRc+Ds0dREFlskDNJKYIdIzu/9pfw==",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-finalizationregistry/-/is-finalizationregistry-1.1.1.tgz",
+      "integrity": "sha512-1pC6N8qWJbWoPtEjgcL2xyhQOP491EQjeUo3qTKcmV8YSDDJrOepfG8pcC7h/QgnQHYSv0mJ3Z/ZWxmatVrysg==",
       "dependencies": {
-        "call-bind": "^1.0.2"
+        "call-bound": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -17428,17 +17539,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/is-negative-zero": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.3.tgz",
-      "integrity": "sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==",
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/is-number": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
@@ -17448,11 +17548,12 @@
       }
     },
     "node_modules/is-number-object": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.0.7.tgz",
-      "integrity": "sha512-k1U0IRzLMo7ZlYIfzRu23Oh6MiIFasgpb9X76eqfFZAqwH44UI4KTBvBYIZ1dSL9ZzChTB9ShHfLkR4pdW5krQ==",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.1.1.tgz",
+      "integrity": "sha512-lZhclumE1G6VYD8VHe35wFaIif+CTy5SJIi5+3y4psDgWu4wPDoBhF8NxUOinEc7pHgiTsT6MaBb92rKhhD+Xw==",
       "dependencies": {
-        "has-tostringtag": "^1.0.0"
+        "call-bound": "^1.0.3",
+        "has-tostringtag": "^1.0.2"
       },
       "engines": {
         "node": ">= 0.4"
@@ -17520,12 +17621,14 @@
       "integrity": "sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ=="
     },
     "node_modules/is-regex": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
-      "integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.2.1.tgz",
+      "integrity": "sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==",
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "has-tostringtag": "^1.0.0"
+        "call-bound": "^1.0.2",
+        "gopd": "^1.2.0",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.2"
       },
       "engines": {
         "node": ">= 0.4"
@@ -17576,11 +17679,11 @@
       }
     },
     "node_modules/is-shared-array-buffer": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.3.tgz",
-      "integrity": "sha512-nA2hv5XIhLR3uVzDDfCIknerhx8XUKnstuOERPNNIinXG7v9u+ohXF67vxm4TPTEPU6lm61ZkwP3c9PCB97rhg==",
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.4.tgz",
+      "integrity": "sha512-ISWac8drv4ZGfwKl5slpHG9OwPNty4jOWPRIhBpxOoD+hqITiwuipOQ2bNthAzwA3B4fIjO4Nln74N0S9byq8A==",
       "dependencies": {
-        "call-bind": "^1.0.7"
+        "call-bound": "^1.0.3"
       },
       "engines": {
         "node": ">= 0.4"
@@ -17609,11 +17712,12 @@
       }
     },
     "node_modules/is-string": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.0.7.tgz",
-      "integrity": "sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.1.1.tgz",
+      "integrity": "sha512-BtEeSsoaQjlSPBemMQIrY1MY0uM6vnS1g5fmufYOtnxLGUZM2178PKbhsk7Ffv58IX+ZtcvoGwccYsh0PglkAA==",
       "dependencies": {
-        "has-tostringtag": "^1.0.0"
+        "call-bound": "^1.0.3",
+        "has-tostringtag": "^1.0.2"
       },
       "engines": {
         "node": ">= 0.4"
@@ -17623,11 +17727,13 @@
       }
     },
     "node_modules/is-symbol": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.4.tgz",
-      "integrity": "sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.1.1.tgz",
+      "integrity": "sha512-9gGx6GTtCQM73BgmHQXfDmLtfjjTUDSyoxTCbp5WtoixAhfgsDirWIcVQ/IHpvI5Vgd5i/J5F7B9cN/WlVbC/w==",
       "dependencies": {
-        "has-symbols": "^1.0.2"
+        "call-bound": "^1.0.2",
+        "has-symbols": "^1.1.0",
+        "safe-regex-test": "^1.1.0"
       },
       "engines": {
         "node": ">= 0.4"
@@ -17637,11 +17743,11 @@
       }
     },
     "node_modules/is-typed-array": {
-      "version": "1.1.13",
-      "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.13.tgz",
-      "integrity": "sha512-uZ25/bUAlUY5fR4OKT4rZQEBrzQWYV9ZJYGGsUmEJ6thodVJ1HX64ePQ6Z0qPWP+m+Uq6e9UugrE38jeYsDSMw==",
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.15.tgz",
+      "integrity": "sha512-p3EcsicXjit7SaskXHs1hA91QxgTw46Fv6EFKKGS5DRFLD8yKnohjF3hxoju94b/OcMZoQukzpPpBE9uLVKzgQ==",
       "dependencies": {
-        "which-typed-array": "^1.1.14"
+        "which-typed-array": "^1.1.16"
       },
       "engines": {
         "node": ">= 0.4"
@@ -17705,11 +17811,14 @@
       }
     },
     "node_modules/is-weakref": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.0.2.tgz",
-      "integrity": "sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.1.0.tgz",
+      "integrity": "sha512-SXM8Nwyys6nT5WP6pltOwKytLV7FqQ4UiibxVmW+EIosHcmCqkkjViTb5SNssDlkCiEYRP1/pdWUKVvZBmsR2Q==",
       "dependencies": {
-        "call-bind": "^1.0.2"
+        "call-bound": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -17803,15 +17912,19 @@
       }
     },
     "node_modules/iterator.prototype": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/iterator.prototype/-/iterator.prototype-1.1.2.tgz",
-      "integrity": "sha512-DR33HMMr8EzwuRL8Y9D3u2BMj8+RqSE850jfGu59kS7tbmPLzGkZmVSfyCFSDxuZiEY6Rzt3T2NA/qU+NwVj1w==",
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/iterator.prototype/-/iterator.prototype-1.1.4.tgz",
+      "integrity": "sha512-x4WH0BWmrMmg4oHHl+duwubhrvczGlyuGAZu3nvrf0UXOfPu8IhZObFEr7DE/iv01YgVZrsOiRcqw2srkKEDIA==",
       "dependencies": {
-        "define-properties": "^1.2.1",
-        "get-intrinsic": "^1.2.1",
-        "has-symbols": "^1.0.3",
-        "reflect.getprototypeof": "^1.0.4",
-        "set-function-name": "^2.0.1"
+        "define-data-property": "^1.1.4",
+        "es-object-atoms": "^1.0.0",
+        "get-intrinsic": "^1.2.6",
+        "has-symbols": "^1.1.0",
+        "reflect.getprototypeof": "^1.0.8",
+        "set-function-name": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
       }
     },
     "node_modules/jackspeak": {
@@ -18487,6 +18600,14 @@
       "resolved": "https://registry.npmjs.org/markdown-table/-/markdown-table-1.1.3.tgz",
       "integrity": "sha512-1RUZVgQlpJSPWYbFSpmudq5nHY1doEIv89gBtF0s4gW1GF2XorxcA/70M5vq7rLv0a6mhOUccRsqkwhwLCIQ2Q=="
     },
+    "node_modules/math-intrinsics": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/math-random": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/math-random/-/math-random-1.0.4.tgz",
@@ -18874,68 +18995,23 @@
       }
     },
     "node_modules/mini-css-extract-plugin": {
-      "version": "1.6.2",
-      "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-1.6.2.tgz",
-      "integrity": "sha512-WhDvO3SjGm40oV5y26GjMJYjd2UMqrLAGKy5YS2/3QKJy2F7jgynuHTir/tgUUOiNQu5saXHdc8reo7YuhhT4Q==",
+      "version": "2.9.2",
+      "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-2.9.2.tgz",
+      "integrity": "sha512-GJuACcS//jtq4kCtd5ii/M0SZf7OZRH+BxdqXZHaJfb8TJiVl+NgQRPwiYt2EuqeSkNydn/7vP+bcE27C5mb9w==",
+      "license": "MIT",
       "dependencies": {
-        "loader-utils": "^2.0.0",
-        "schema-utils": "^3.0.0",
-        "webpack-sources": "^1.1.0"
+        "schema-utils": "^4.0.0",
+        "tapable": "^2.2.1"
       },
       "engines": {
-        "node": ">= 10.13.0"
+        "node": ">= 12.13.0"
       },
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/webpack"
       },
       "peerDependencies": {
-        "webpack": "^4.4.0 || ^5.0.0"
-      }
-    },
-    "node_modules/mini-css-extract-plugin/node_modules/ajv": {
-      "version": "6.12.6",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
-      "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "fast-json-stable-stringify": "^2.0.0",
-        "json-schema-traverse": "^0.4.1",
-        "uri-js": "^4.2.2"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/epoberezkin"
-      }
-    },
-    "node_modules/mini-css-extract-plugin/node_modules/ajv-keywords": {
-      "version": "3.5.2",
-      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
-      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-      "peerDependencies": {
-        "ajv": "^6.9.1"
-      }
-    },
-    "node_modules/mini-css-extract-plugin/node_modules/json-schema-traverse": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
-      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
-    },
-    "node_modules/mini-css-extract-plugin/node_modules/schema-utils": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz",
-      "integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==",
-      "dependencies": {
-        "@types/json-schema": "^7.0.8",
-        "ajv": "^6.12.5",
-        "ajv-keywords": "^3.5.2"
-      },
-      "engines": {
-        "node": ">= 10.13.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/webpack"
+        "webpack": "^5.0.0"
       }
     },
     "node_modules/minimatch": {
@@ -19648,9 +19724,9 @@
       }
     },
     "node_modules/object-inspect": {
-      "version": "1.13.2",
-      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.2.tgz",
-      "integrity": "sha512-IRZSRuzJiynemAXPYtPe5BoI/RESNYR7TYm50MC5Mqbd3Jmw5y790sErYw3V6SryFJD64b74qQQs9wn5Bg/k3g==",
+      "version": "1.13.3",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.3.tgz",
+      "integrity": "sha512-kDCGIbxkDSXE3euJZZXzc6to7fCrKHNI/hSRQnRuQ+BWjFNzZwiFF8fj/6o2t2G9/jTj8PSIYTfCLelLZEeRpA==",
       "engines": {
         "node": ">= 0.4"
       },
@@ -19694,13 +19770,15 @@
       }
     },
     "node_modules/object.assign": {
-      "version": "4.1.5",
-      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.5.tgz",
-      "integrity": "sha512-byy+U7gp+FVwmyzKPYhW2h5l3crpmGsxl7X2s8y43IgxvG4g3QZ6CffDtsNQy1WsmZpQbO+ybo0AlW7TY6DcBQ==",
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.7.tgz",
+      "integrity": "sha512-nK28WOo+QIjBkDduTINE4JkF/UJJKyf2EJxvJKfblDpyg0Q+pkOHNTL0Qwy6NP6FhE/EnzV73BxxqcJaXY9anw==",
       "dependencies": {
-        "call-bind": "^1.0.5",
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
         "define-properties": "^1.2.1",
-        "has-symbols": "^1.0.3",
+        "es-object-atoms": "^1.0.0",
+        "has-symbols": "^1.1.0",
         "object-keys": "^1.1.1"
       },
       "engines": {
@@ -19779,11 +19857,12 @@
       }
     },
     "node_modules/object.values": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.2.0.tgz",
-      "integrity": "sha512-yBYjY9QX2hnRmZHAjG/f13MzmBzxzYgQhFrke06TTyKY5zSTEqkOeukBzIdVA3j3ulu8Qa3MbVFShV7T2RmGtQ==",
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.2.1.tgz",
+      "integrity": "sha512-gXah6aZrcUxjWg2zR2MwouP2eHlCBzdV4pygudehaKXSGW4v2AsRQUK+lwwXhii6KFZcunEnmSUoYp5CXibxtA==",
       "dependencies": {
-        "call-bind": "^1.0.7",
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
         "define-properties": "^1.2.1",
         "es-object-atoms": "^1.0.0"
       },
@@ -19912,6 +19991,22 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/own-keys": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/own-keys/-/own-keys-1.0.1.tgz",
+      "integrity": "sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg==",
+      "dependencies": {
+        "get-intrinsic": "^1.2.6",
+        "object-keys": "^1.1.1",
+        "safe-push-apply": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/p-cancelable": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/p-cancelable/-/p-cancelable-2.1.1.tgz",
@@ -21267,25 +21362,6 @@
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
     },
-    "node_modules/posthog-js": {
-      "version": "1.165.0",
-      "resolved": "https://registry.npmjs.org/posthog-js/-/posthog-js-1.165.0.tgz",
-      "integrity": "sha512-rUfRJobvOz3Q9Er+zwb32Eq2qs+ToBe/B4k4IoKzmyszI7240Rf4xVWRB0ky8LvmdZfCeYX5knS2Uv3pnn/d5A==",
-      "dependencies": {
-        "fflate": "^0.4.8",
-        "preact": "^10.19.3",
-        "web-vitals": "^4.0.1"
-      }
-    },
-    "node_modules/posthog-js/node_modules/preact": {
-      "version": "10.24.1",
-      "resolved": "https://registry.npmjs.org/preact/-/preact-10.24.1.tgz",
-      "integrity": "sha512-PnBAwFI3Yjxxcxw75n6VId/5TFxNW/81zexzWD9jn1+eSrOP84NdsS38H5IkF/UH3frqRPT+MvuCoVHjTDTnDw==",
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/preact"
-      }
-    },
     "node_modules/preact": {
       "version": "10.12.1",
       "resolved": "https://registry.npmjs.org/preact/-/preact-10.12.1.tgz",
@@ -22702,17 +22778,18 @@
       }
     },
     "node_modules/reflect.getprototypeof": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.6.tgz",
-      "integrity": "sha512-fmfw4XgoDke3kdI6h4xcUz1dG8uaiv5q9gcEwLS4Pnth2kxT+GZ7YehS1JTMGBQmtV7Y4GFGbs2re2NqhdozUg==",
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.9.tgz",
+      "integrity": "sha512-r0Ay04Snci87djAsI4U+WNRcSw5S4pOH7qFjd/veA5gC7TbqESR3tcj28ia95L/fYUDw11JKP7uqUKUAfVvV5Q==",
       "dependencies": {
-        "call-bind": "^1.0.7",
+        "call-bind": "^1.0.8",
         "define-properties": "^1.2.1",
-        "es-abstract": "^1.23.1",
+        "dunder-proto": "^1.0.1",
+        "es-abstract": "^1.23.6",
         "es-errors": "^1.3.0",
-        "get-intrinsic": "^1.2.4",
-        "globalthis": "^1.0.3",
-        "which-builtin-type": "^1.1.3"
+        "get-intrinsic": "^1.2.6",
+        "gopd": "^1.2.0",
+        "which-builtin-type": "^1.2.1"
       },
       "engines": {
         "node": ">= 0.4"
@@ -22801,14 +22878,14 @@
       }
     },
     "node_modules/regexp.prototype.flags": {
-      "version": "1.5.2",
-      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.2.tgz",
-      "integrity": "sha512-NcDiDkTLuPR+++OCKB0nWafEmhg/Da8aUPLPMQbK+bxKKCm1/S5he+AqYa4PlMCVBalb4/yxIRub6qkEx5yJbw==",
+      "version": "1.5.3",
+      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.3.tgz",
+      "integrity": "sha512-vqlC04+RQoFalODCbCumG2xIOvapzVMHwsyIGM/SIE8fRhFFsXeH8/QQ+s0T0kDAhKc4k30s73/0ydkHQz6HlQ==",
       "dependencies": {
-        "call-bind": "^1.0.6",
+        "call-bind": "^1.0.7",
         "define-properties": "^1.2.1",
         "es-errors": "^1.3.0",
-        "set-function-name": "^2.0.1"
+        "set-function-name": "^2.0.2"
       },
       "engines": {
         "node": ">= 0.4"
@@ -23588,13 +23665,14 @@
       "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
     },
     "node_modules/safe-array-concat": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.1.2.tgz",
-      "integrity": "sha512-vj6RsCsWBCf19jIeHEfkRMw8DPiBb+DMXklQ/1SGDHOMlHdPUkZXFQ2YdplS23zESTijAcurb1aSgJA3AgMu1Q==",
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.1.3.tgz",
+      "integrity": "sha512-AURm5f0jYEOydBj7VQlVvDrjeFgthDdEF5H1dP+6mNpoXOMo1quQqJ4wvJDyRZ9+pO3kGWoOdmV08cSv2aJV6Q==",
       "dependencies": {
-        "call-bind": "^1.0.7",
-        "get-intrinsic": "^1.2.4",
-        "has-symbols": "^1.0.3",
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.2",
+        "get-intrinsic": "^1.2.6",
+        "has-symbols": "^1.1.0",
         "isarray": "^2.0.5"
       },
       "engines": {
@@ -23623,6 +23701,21 @@
         }
       ]
     },
+    "node_modules/safe-push-apply": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/safe-push-apply/-/safe-push-apply-1.0.0.tgz",
+      "integrity": "sha512-iKE9w/Z7xCzUMIZqdBsp6pEQvwuEebH4vdpjcDWnyzaI6yl6O9FHvVpmGelvEHNsoY6wGblkxR6Zty/h00WiSA==",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "isarray": "^2.0.5"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/safe-regex": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/safe-regex/-/safe-regex-1.1.0.tgz",
@@ -23633,13 +23726,13 @@
       }
     },
     "node_modules/safe-regex-test": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.0.3.tgz",
-      "integrity": "sha512-CdASjNJPvRa7roO6Ra/gLYBTzYzzPyyBXxIMdGW3USQLyjWEls2RgW5UBTXaQVp+OrpeCK3bLem8smtmheoRuw==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.1.0.tgz",
+      "integrity": "sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==",
       "dependencies": {
-        "call-bind": "^1.0.6",
+        "call-bound": "^1.0.2",
         "es-errors": "^1.3.0",
-        "is-regex": "^1.1.4"
+        "is-regex": "^1.2.1"
       },
       "engines": {
         "node": ">= 0.4"
@@ -23996,14 +24089,65 @@
       }
     },
     "node_modules/side-channel": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.6.tgz",
-      "integrity": "sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz",
+      "integrity": "sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==",
       "dependencies": {
-        "call-bind": "^1.0.7",
         "es-errors": "^1.3.0",
-        "get-intrinsic": "^1.2.4",
-        "object-inspect": "^1.13.1"
+        "object-inspect": "^1.13.3",
+        "side-channel-list": "^1.0.0",
+        "side-channel-map": "^1.0.1",
+        "side-channel-weakmap": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-list": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.0.tgz",
+      "integrity": "sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-map": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/side-channel-map/-/side-channel-map-1.0.1.tgz",
+      "integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-weakmap": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz",
+      "integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3",
+        "side-channel-map": "^1.0.1"
       },
       "engines": {
         "node": ">= 0.4"
@@ -24430,7 +24574,8 @@
     "node_modules/source-list-map": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz",
-      "integrity": "sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw=="
+      "integrity": "sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw==",
+      "license": "MIT"
     },
     "node_modules/source-map": {
       "version": "0.5.7",
@@ -24868,22 +25013,23 @@
       }
     },
     "node_modules/string.prototype.matchall": {
-      "version": "4.0.11",
-      "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.11.tgz",
-      "integrity": "sha512-NUdh0aDavY2og7IbBPenWqR9exH+E26Sv8e0/eTe1tltDGZL+GtBkDAnnyBtmekfK6/Dq3MkcGtzXFEd1LQrtg==",
+      "version": "4.0.12",
+      "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.12.tgz",
+      "integrity": "sha512-6CC9uyBL+/48dYizRf7H7VAYCMCNTBeM78x/VTUe9bFEaxBepPJDa1Ow99LqI/1yF7kuy7Q3cQsYMrcjGUcskA==",
       "dependencies": {
-        "call-bind": "^1.0.7",
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
         "define-properties": "^1.2.1",
-        "es-abstract": "^1.23.2",
+        "es-abstract": "^1.23.6",
         "es-errors": "^1.3.0",
         "es-object-atoms": "^1.0.0",
-        "get-intrinsic": "^1.2.4",
-        "gopd": "^1.0.1",
-        "has-symbols": "^1.0.3",
-        "internal-slot": "^1.0.7",
-        "regexp.prototype.flags": "^1.5.2",
+        "get-intrinsic": "^1.2.6",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "internal-slot": "^1.1.0",
+        "regexp.prototype.flags": "^1.5.3",
         "set-function-name": "^2.0.2",
-        "side-channel": "^1.0.6"
+        "side-channel": "^1.1.0"
       },
       "engines": {
         "node": ">= 0.4"
@@ -24902,14 +25048,17 @@
       }
     },
     "node_modules/string.prototype.trim": {
-      "version": "1.2.9",
-      "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.9.tgz",
-      "integrity": "sha512-klHuCNxiMZ8MlsOihJhJEBJAiMVqU3Z2nEXWfWnIqjN0gEFS9J9+IxKozWWtQGcgoa1WUZzLjKPTr4ZHNFTFxw==",
+      "version": "1.2.10",
+      "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.10.tgz",
+      "integrity": "sha512-Rs66F0P/1kedk5lyYyH9uBzuiI/kNRmwJAR9quK6VOtIpZ2G+hMZd+HQbbv25MgCA6gEffoMZYxlTod4WcdrKA==",
       "dependencies": {
-        "call-bind": "^1.0.7",
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.2",
+        "define-data-property": "^1.1.4",
         "define-properties": "^1.2.1",
-        "es-abstract": "^1.23.0",
-        "es-object-atoms": "^1.0.0"
+        "es-abstract": "^1.23.5",
+        "es-object-atoms": "^1.0.0",
+        "has-property-descriptors": "^1.0.2"
       },
       "engines": {
         "node": ">= 0.4"
@@ -24919,14 +25068,18 @@
       }
     },
     "node_modules/string.prototype.trimend": {
-      "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.8.tgz",
-      "integrity": "sha512-p73uL5VCHCO2BZZ6krwwQE3kCzM7NKmis8S//xEC6fQonchbum4eP6kR4DLEjQFO3Wnj3Fuo8NM0kOSjVdHjZQ==",
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.9.tgz",
+      "integrity": "sha512-G7Ok5C6E/j4SGfyLCloXTrngQIQU3PWtXGst3yM7Bea9FRURf1S42ZHlZZtsNque2FN2PoUhfZXYLNWwEr4dLQ==",
       "dependencies": {
-        "call-bind": "^1.0.7",
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.2",
         "define-properties": "^1.2.1",
         "es-object-atoms": "^1.0.0"
       },
+      "engines": {
+        "node": ">= 0.4"
+      },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -25405,9 +25558,9 @@
       }
     },
     "node_modules/swiper": {
-      "version": "10.3.1",
-      "resolved": "https://registry.npmjs.org/swiper/-/swiper-10.3.1.tgz",
-      "integrity": "sha512-24Wk3YUdZHxjc9faID97GTu6xnLNia+adMt6qMTZG/HgdSUt4fS0REsGUXJOgpTED0Amh/j+gRGQxsLayJUlBQ==",
+      "version": "11.1.15",
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-11.1.15.tgz",
+      "integrity": "sha512-IzWeU34WwC7gbhjKsjkImTuCRf+lRbO6cnxMGs88iVNKDwV+xQpBCJxZ4bNH6gSrIbbyVJ1kuGzo3JTtz//CBw==",
       "funding": [
         {
           "type": "patreon",
@@ -26033,28 +26186,28 @@
       "integrity": "sha512-39wxbwHdQ2sTiBB8wAzKfQ9GN+om8w+sjNWzr+vZJR5AMD5J+J7Yc8AtXnU9r/r2c8XiDZ/smxutDmZehX/qpQ=="
     },
     "node_modules/typed-array-buffer": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/typed-array-buffer/-/typed-array-buffer-1.0.2.tgz",
-      "integrity": "sha512-gEymJYKZtKXzzBzM4jqa9w6Q1Jjm7x2d+sh19AdsD4wqnMPDYyvwpsIc2Q/835kHuo3BEQ7CjelGhfTsoBb2MQ==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/typed-array-buffer/-/typed-array-buffer-1.0.3.tgz",
+      "integrity": "sha512-nAYYwfY3qnzX30IkA6AQZjVbtK6duGontcQm1WSG1MD94YLqK0515GNApXkoxKOWMusVssAHWLh9SeaoefYFGw==",
       "dependencies": {
-        "call-bind": "^1.0.7",
+        "call-bound": "^1.0.3",
         "es-errors": "^1.3.0",
-        "is-typed-array": "^1.1.13"
+        "is-typed-array": "^1.1.14"
       },
       "engines": {
         "node": ">= 0.4"
       }
     },
     "node_modules/typed-array-byte-length": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/typed-array-byte-length/-/typed-array-byte-length-1.0.1.tgz",
-      "integrity": "sha512-3iMJ9q0ao7WE9tWcaYKIptkNBuOIcZCCT0d4MRvuuH88fEoEH62IuQe0OtraD3ebQEoTRk8XCBoknUNc1Y67pw==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/typed-array-byte-length/-/typed-array-byte-length-1.0.3.tgz",
+      "integrity": "sha512-BaXgOuIxz8n8pIq3e7Atg/7s+DpiYrxn4vdot3w9KbnBhcRQq6o3xemQdIfynqSeXeDrF32x+WvfzmOjPiY9lg==",
       "dependencies": {
-        "call-bind": "^1.0.7",
+        "call-bind": "^1.0.8",
         "for-each": "^0.3.3",
-        "gopd": "^1.0.1",
-        "has-proto": "^1.0.3",
-        "is-typed-array": "^1.1.13"
+        "gopd": "^1.2.0",
+        "has-proto": "^1.2.0",
+        "is-typed-array": "^1.1.14"
       },
       "engines": {
         "node": ">= 0.4"
@@ -26064,16 +26217,17 @@
       }
     },
     "node_modules/typed-array-byte-offset": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/typed-array-byte-offset/-/typed-array-byte-offset-1.0.2.tgz",
-      "integrity": "sha512-Ous0vodHa56FviZucS2E63zkgtgrACj7omjwd/8lTEMEPFFyjfixMZ1ZXenpgCFBBt4EC1J2XsyVS2gkG0eTFA==",
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/typed-array-byte-offset/-/typed-array-byte-offset-1.0.4.tgz",
+      "integrity": "sha512-bTlAFB/FBYMcuX81gbL4OcpH5PmlFHqlCCpAl8AlEzMz5k53oNDvN8p1PNOWLEmI2x4orp3raOFB51tv9X+MFQ==",
       "dependencies": {
         "available-typed-arrays": "^1.0.7",
-        "call-bind": "^1.0.7",
+        "call-bind": "^1.0.8",
         "for-each": "^0.3.3",
-        "gopd": "^1.0.1",
-        "has-proto": "^1.0.3",
-        "is-typed-array": "^1.1.13"
+        "gopd": "^1.2.0",
+        "has-proto": "^1.2.0",
+        "is-typed-array": "^1.1.15",
+        "reflect.getprototypeof": "^1.0.9"
       },
       "engines": {
         "node": ">= 0.4"
@@ -26083,16 +26237,16 @@
       }
     },
     "node_modules/typed-array-length": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/typed-array-length/-/typed-array-length-1.0.6.tgz",
-      "integrity": "sha512-/OxDN6OtAk5KBpGb28T+HZc2M+ADtvRxXrKKbUwtsLgdoxgX13hyy7ek6bFRl5+aBs2yZzB0c4CnQfAtVypW/g==",
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/typed-array-length/-/typed-array-length-1.0.7.tgz",
+      "integrity": "sha512-3KS2b+kL7fsuk/eJZ7EQdnEmQoaho/r6KUef7hxvltNA5DR8NAUM+8wJMbJyZ4G9/7i3v5zPBIMN5aybAh2/Jg==",
       "dependencies": {
         "call-bind": "^1.0.7",
         "for-each": "^0.3.3",
         "gopd": "^1.0.1",
-        "has-proto": "^1.0.3",
         "is-typed-array": "^1.1.13",
-        "possible-typed-array-names": "^1.0.0"
+        "possible-typed-array-names": "^1.0.0",
+        "reflect.getprototypeof": "^1.0.6"
       },
       "engines": {
         "node": ">= 0.4"
@@ -26115,9 +26269,9 @@
       }
     },
     "node_modules/typescript": {
-      "version": "5.6.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.6.3.tgz",
-      "integrity": "sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==",
+      "version": "5.7.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.7.2.tgz",
+      "integrity": "sha512-i5t66RHxDvVN40HfDd1PsEThGNnlMCMT3jMUuoh9/0TaqWevNontacunWyN02LA9/fIbEWlcHZcgTKb9QoaLfg==",
       "peer": true,
       "bin": {
         "tsc": "bin/tsc",
@@ -26153,14 +26307,17 @@
       }
     },
     "node_modules/unbox-primitive": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
-      "integrity": "sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.1.0.tgz",
+      "integrity": "sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw==",
       "dependencies": {
-        "call-bind": "^1.0.2",
+        "call-bound": "^1.0.3",
         "has-bigints": "^1.0.2",
-        "has-symbols": "^1.0.3",
-        "which-boxed-primitive": "^1.0.2"
+        "has-symbols": "^1.1.0",
+        "which-boxed-primitive": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -26717,12 +26874,12 @@
       }
     },
     "node_modules/use-sync-external-store": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.2.tgz",
-      "integrity": "sha512-PElTlVMwpblvbNqQ82d2n6RjStvdSoNe9FG28kNfz3WiXilJm4DdNkEzRhCZuIDwY8U08WVihhGR5iRqAwfDiw==",
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.4.0.tgz",
+      "integrity": "sha512-9WXSPC5fMv61vaupRkCKCxsPxBocVnwakBEkMIHHpkTTg6icbJtg6jzgtLDm4bl3cSHAca52rYWih0k4K3PfHw==",
       "peer": true,
       "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
     "node_modules/util-deprecate": {
@@ -26865,11 +27022,6 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
-    "node_modules/web-vitals": {
-      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-4.2.3.tgz",
-      "integrity": "sha512-/CFAm1mNxSmOj6i0Co+iGFJ58OS4NRGVP+AWS/l509uIK5a1bSoIVaHz/ZumpHTfHSZBpgrJ+wjfpAOrTHok5Q=="
-    },
     "node_modules/webidl-conversions": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
@@ -27082,6 +27234,18 @@
         "url": "https://opencollective.com/webpack"
       }
     },
+    "node_modules/webpack-filter-warnings-plugin": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/webpack-filter-warnings-plugin/-/webpack-filter-warnings-plugin-1.2.1.tgz",
+      "integrity": "sha512-Ez6ytc9IseDMLPo0qCuNNYzgtUl8NovOqjIq4uAU8LTD4uoa1w1KpZyyzFtLTEMZpkkOkLfL9eN+KGYdk1Qtwg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4.3 < 5.0.0 || >= 5.10"
+      },
+      "peerDependencies": {
+        "webpack": "^2.0.0 || ^3.0.0 || ^4.0.0"
+      }
+    },
     "node_modules/webpack-merge": {
       "version": "5.10.0",
       "resolved": "https://registry.npmjs.org/webpack-merge/-/webpack-merge-5.10.0.tgz",
@@ -27099,6 +27263,7 @@
       "version": "1.4.3",
       "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-1.4.3.tgz",
       "integrity": "sha512-lgTS3Xhv1lCOKo7SA5TjKXMjpSM4sBjNV5+q2bqesbSPs5FjGmU6jjtBSkX9b4qW87vDIsCIlUPOEhbZrMdjeQ==",
+      "license": "MIT",
       "dependencies": {
         "source-list-map": "^2.0.0",
         "source-map": "~0.6.1"
@@ -27108,6 +27273,7 @@
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
       "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.10.0"
       }
@@ -27204,37 +27370,41 @@
       }
     },
     "node_modules/which-boxed-primitive": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz",
-      "integrity": "sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.1.1.tgz",
+      "integrity": "sha512-TbX3mj8n0odCBFVlY8AxkqcHASw3L60jIuF8jFP78az3C2YhmGvqbHBpAjTRH2/xqYunrJ9g1jSyjCjpoWzIAA==",
       "dependencies": {
-        "is-bigint": "^1.0.1",
-        "is-boolean-object": "^1.1.0",
-        "is-number-object": "^1.0.4",
-        "is-string": "^1.0.5",
-        "is-symbol": "^1.0.3"
+        "is-bigint": "^1.1.0",
+        "is-boolean-object": "^1.2.1",
+        "is-number-object": "^1.1.1",
+        "is-string": "^1.1.1",
+        "is-symbol": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/which-builtin-type": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/which-builtin-type/-/which-builtin-type-1.1.4.tgz",
-      "integrity": "sha512-bppkmBSsHFmIMSl8BO9TbsyzsvGjVoppt8xUiGzwiu/bhDCGxnpOKCxgqj6GuyHE0mINMDecBFPlOm2hzY084w==",
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/which-builtin-type/-/which-builtin-type-1.2.1.tgz",
+      "integrity": "sha512-6iBczoX+kDQ7a3+YJBnh3T+KZRxM/iYNPXicqk66/Qfm1b93iu+yOImkg0zHbj5LNOcNv1TEADiZ0xa34B4q6Q==",
       "dependencies": {
+        "call-bound": "^1.0.2",
         "function.prototype.name": "^1.1.6",
         "has-tostringtag": "^1.0.2",
         "is-async-function": "^2.0.0",
-        "is-date-object": "^1.0.5",
-        "is-finalizationregistry": "^1.0.2",
+        "is-date-object": "^1.1.0",
+        "is-finalizationregistry": "^1.1.0",
         "is-generator-function": "^1.0.10",
-        "is-regex": "^1.1.4",
+        "is-regex": "^1.2.1",
         "is-weakref": "^1.0.2",
         "isarray": "^2.0.5",
-        "which-boxed-primitive": "^1.0.2",
+        "which-boxed-primitive": "^1.1.0",
         "which-collection": "^1.0.2",
-        "which-typed-array": "^1.1.15"
+        "which-typed-array": "^1.1.16"
       },
       "engines": {
         "node": ">= 0.4"
@@ -27266,14 +27436,15 @@
       "integrity": "sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ=="
     },
     "node_modules/which-typed-array": {
-      "version": "1.1.15",
-      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.15.tgz",
-      "integrity": "sha512-oV0jmFtUky6CXfkqehVvBP/LSWJ2sy4vWMioiENyJLePrBO/yKyV9OyJySfAKosh+RYkIl5zJCNZ8/4JncrpdA==",
+      "version": "1.1.18",
+      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.18.tgz",
+      "integrity": "sha512-qEcY+KJYlWyLH9vNbsr6/5j59AXk5ni5aakf8ldzBvGde6Iz4sxZGkJyWSAueTG7QhOvNRYb1lDdFmL5Td0QKA==",
       "dependencies": {
         "available-typed-arrays": "^1.0.7",
-        "call-bind": "^1.0.7",
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
         "for-each": "^0.3.3",
-        "gopd": "^1.0.1",
+        "gopd": "^1.2.0",
         "has-tostringtag": "^1.0.2"
       },
       "engines": {
diff --git a/package.json b/package.json
index 11fc528e5674..8e691fea64a2 100644
--- a/package.json
+++ b/package.json
@@ -27,7 +27,7 @@
   "dependencies": {
     "@emotion/is-prop-valid": "^1.2.1",
     "@emotion/react": "^11.11.4",
-    "@emotion/styled": "^11.11.0",
+    "@emotion/styled": "^11.14.0",
     "@fullcalendar/core": "^6.1.8",
     "@fullcalendar/daygrid": "^6.1.8",
     "@fullcalendar/google-calendar": "^6.0.2",
@@ -38,6 +38,7 @@
     "@loadable/component": "^5.16.4",
     "@mdx-js/mdx": "1.6.22",
     "@mdx-js/react": "1.6.22",
+    "@mediacurrent/gatsby-plugin-silence-css-order-warning": "^1.0.0",
     "@mui/icons-material": "^5.16.4",
     "@mui/material": "^5.15.11",
     "@react-icons/all-files": "^4.1.0",
@@ -71,16 +72,16 @@
     "gatsby-plugin-styled-components": "^6.11.0",
     "gatsby-plugin-svgr": "^3.0.0-beta.0",
     "gatsby-redirect-from": "1.0.4",
-    "gatsby-source-filesystem": "^5.11.0",
+    "gatsby-source-filesystem": "^5.14.0",
     "gatsby-transformer-sharp": "^5.11.0",
     "gbimage-bridge": "^0.2.2",
     "gsap": "^3.12.2",
     "joi": "^17.10.2",
     "js-search": "^2.0.0",
     "lodash": "^4.17.21",
+    "mini-css-extract-plugin": "^2.9.2",
     "mui-datatables": "^4.3.0",
     "path-browserify": "^1.0.1",
-    "posthog-js": "^1.161.6",
     "prism-react-renderer": "^2.0.6",
     "process": "^0.11.10",
     "prop-types": "^15.7.2",
@@ -111,8 +112,9 @@
     "simple-react-lightbox": "^3.6.9-0",
     "slick-carousel": "^1.8.1",
     "styled-components": "^6.0.5",
-    "swiper": "^10.0.4",
+    "swiper": "^11.1.15",
     "url": "^0.11.3",
+    "webpack-filter-warnings-plugin": "^1.2.1",
     "xstate": "^5.13.0"
   },
   "devDependencies": {
@@ -123,7 +125,7 @@
     "cpx": "^1.5.0",
     "env-cmd": "^10.1.0",
     "eslint": "^8.46.0",
-    "eslint-plugin-react": "^7.34.2",
+    "eslint-plugin-react": "^7.37.3",
     "gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.30",
     "gh-pages": "^6.0.0",
     "husky": "^8.0.3",
diff --git a/src/assets/images/sistent/horizontal/sistent-horizontal-color.png b/src/assets/images/sistent/horizontal/sistent-horizontal-color.png
new file mode 100644
index 000000000000..5446c74242a6
Binary files /dev/null and b/src/assets/images/sistent/horizontal/sistent-horizontal-color.png differ
diff --git a/src/assets/images/sistent/horizontal/sistent-horizontal-color.svg b/src/assets/images/sistent/horizontal/sistent-horizontal-color.svg
new file mode 100644
index 000000000000..02b3169fd5d8
--- /dev/null
+++ b/src/assets/images/sistent/horizontal/sistent-horizontal-color.svg
@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2540 500">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #00b39f;
+      }
+
+      .cls-2 {
+        fill: #00d3a9;
+      }
+
+      .cls-3 {
+        fill: #3c494f;
+      }
+    </style>
+  </defs>
+  <g>
+    <path class="cls-1" d="M231.04,328.22c11.05,6.32,20.98,11.95,30.68,18.04,4.51,2.93,8.12,2.71,12.86,0,38.8-22.33,77.59-44.21,116.39-66.09,4.51-2.48,5.86-5.64,5.86-10.6-.23-54.58-.23-109.17-.9-163.98,0-3.16-2.71-7.89-5.41-9.47-41.5-24.59-83.46-48.49-125.63-72.63-2.03-1.13-5.41-1.8-6.99-.9-11.28,6.09-22.33,12.41-34.28,19.4,3.83,2.26,6.32,4.06,9.02,5.64,39.7,22.78,79.4,45.79,119.09,68.34,5.19,2.93,7.44,6.09,7.22,12.41,0,39.47.23,78.72.68,118.19,0,6.32-1.8,9.92-7.44,13.08-24.13,13.31-48.04,27.07-72.18,40.6-16.01,9.02-31.8,18.27-48.95,27.97Z"/>
+    <path class="cls-2" d="M327.35,378.75c40.15-22.56,80.07-45.56,119.99-68.57,2.71-1.58,5.19-5.64,5.19-8.57,0-55.26-.23-110.3-.45-165.56,0-2.71-1.8-6.54-3.83-7.89-10.38-6.54-20.98-12.63-33.38-19.85v9.7c.23,52.55.23,105.11.68,157.66,0,7.44-1.8,11.5-8.57,15.11-24.13,13.31-48.04,27.07-71.95,40.83-16.24,9.25-32.48,18.72-49.4,28.42l41.73,18.72Z"/>
+    <path class="cls-1" d="M337.27,232.81c0-12.86.45-24.59-.23-36.09-.23-3.38-2.71-7.89-5.41-9.47-39.25-23.23-78.72-46.24-117.96-68.79-2.48-1.35-6.99-1.58-9.47-.23-48.27,27.29-96.31,54.81-144.35,82.78-2.48,1.58-4.96,5.86-4.96,8.8-.23,47.82,0,95.63.45,143.68,0,2.48.45,6.09,2.03,6.99,11.05,6.99,22.56,13.31,34.96,20.53v-10.6c-.23-45.79-.23-91.57-.68-137.36,0-5.19,1.13-8.57,6.09-11.28,34.96-19.85,69.47-39.7,103.98-59.77,4.74-2.71,8.57-3.16,13.53-.23,25.26,15.11,50.52,29.55,76.01,44.43,14.89,8.8,30,17.37,46.01,26.62Z"/>
+    <path class="cls-1" d="M453.43,326.19c-5.41,2.93-8.57,4.96-11.95,6.77-39.02,22.33-77.82,44.66-116.84,67.22-4.51,2.71-7.89,3.16-12.63.23-34.96-20.53-70.15-40.6-105.33-60.67-4.96-2.71-6.09-6.09-6.09-11.28.23-43.53,0-86.84,0-130.37,0-2.71-.23-5.64-.45-9.7-10.83,6.32-20.53,12.18-30.68,17.37-4.96,2.48-6.32,6.09-6.32,11.28.23,44.66,0,89.32.45,133.75,0,3.16,2.71,7.89,5.41,9.47,47.82,27.97,95.86,55.71,144.13,83.23,2.48,1.58,7.44,1.35,10.15,0,41.73-23.46,83-47.37,124.51-71.5,2.26-1.35,5.19-4.06,5.19-6.09.68-12.41.45-25.04.45-39.7Z"/>
+    <path class="cls-2" d="M337.5,169.88c0-12.86-.23-24.13,0-35.64.23-4.96-1.58-7.89-6.09-10.38-39.7-22.78-79.17-45.79-119.09-68.34-2.71-1.58-8.12-1.58-10.83,0-47.59,26.84-95.18,54.13-142.78,81.65-2.03,1.13-4.96,2.93-4.96,4.51-.45,13.08-.23,26.39-.23,40.83,3.83-2.03,5.86-2.93,7.89-4.06,46.69-26.62,93.15-53.23,139.84-80.07,4.29-2.48,7.44-2.71,11.73-.23,33.83,19.85,68.12,39.47,102.18,59.1,6.99,4.06,13.98,7.89,22.33,12.63Z"/>
+    <path class="cls-2" d="M300.73,457.91c-3.38-2.26-5.41-3.61-7.44-4.74-46.46-26.84-92.93-53.68-139.62-80.3-5.19-2.93-7.44-6.09-7.22-12.18.23-43.76,0-87.52-.23-131.27,0-2.93-.23-6.09-.45-10.15-11.95,6.77-22.33,12.63-32.48,18.95-2.26,1.35-3.83,5.19-3.83,7.67,0,46.01,0,92.25.45,138.26,0,2.93,2.48,7.22,5.19,8.8,47.59,27.97,95.63,55.49,143.68,83.23,2.26,1.35,5.86,2.26,7.89,1.13,11.28-5.86,21.88-12.41,34.06-19.4Z"/>
+  </g>
+  <g>
+    <path class="cls-3" d="M844.57,312.05c0,9.36-1.79,18.15-5.37,26.35-3.58,8.32-8.49,15.55-14.73,21.66-6.25,6.14-13.47,10.99-21.67,14.57-8.32,3.58-17.16,5.37-26.52,5.37h-243.35v-54.77h243.35c3.7,0,6.82-1.28,9.36-3.82,2.54-2.54,3.81-5.66,3.81-9.36v-21.14c0-3.7-1.26-6.82-3.81-9.36-2.54-2.54-5.66-3.81-9.36-3.81h-175.07c-9.35,0-18.13-1.79-26.34-5.37-8.32-3.58-15.61-8.5-21.84-14.73-6.25-6.25-11.15-13.53-14.73-21.84-3.58-8.22-5.37-16.99-5.37-26.35v-21.14c0-9.36,1.79-18.21,5.37-26.52,3.58-8.22,8.49-15.43,14.73-21.67,6.23-6.25,13.51-11.15,21.84-14.73,8.2-3.58,16.99-5.37,26.34-5.37h243.37v55.11h-243.37c-3.69,0-6.82,1.28-9.35,3.82-2.54,2.54-3.82,5.66-3.82,9.36v21.14c0,3.7,1.28,6.82,3.82,9.36,2.53,2.54,5.66,3.81,9.35,3.81h175.07c9.36,0,18.2,1.79,26.52,5.37,8.2,3.58,15.43,8.5,21.67,14.73,6.25,6.25,11.15,13.47,14.73,21.67,3.58,8.32,5.37,17.16,5.37,26.52v21.14Z"/>
+    <rect class="cls-3" x="894.28" y="120" width="57.22" height="260"/>
+    <polygon class="cls-3" points="1631.82 160.95 1631.82 172 1631.82 224 1631.82 287.42 1631.82 380 1878.3 380 1878.3 328 1683.82 328 1683.82 287.42 1683.82 276 1833.23 276 1833.23 224 1683.82 224 1683.82 172 1878.3 172 1878.3 120 1631.82 120 1631.82 160.95"/>
+    <path class="cls-3" d="M1312.87,312.05c0,9.36-1.79,18.15-5.37,26.35-3.58,8.32-8.49,15.55-14.73,21.66-6.25,6.14-13.47,10.99-21.67,14.57-8.32,3.58-17.16,5.37-26.52,5.37h-243.35v-54.77h243.35c3.7,0,6.82-1.28,9.36-3.82,2.54-2.54,3.81-5.66,3.81-9.36v-21.14c0-3.7-1.26-6.82-3.81-9.36-2.54-2.54-5.66-3.81-9.36-3.81h-175.07c-9.35,0-18.13-1.79-26.34-5.37-8.32-3.58-15.61-8.5-21.84-14.73-6.25-6.25-11.15-13.53-14.73-21.84-3.58-8.22-5.37-16.99-5.37-26.35v-21.14c0-9.36,1.79-18.21,5.37-26.52,3.58-8.22,8.49-15.43,14.73-21.67,6.23-6.25,13.51-11.15,21.84-14.73,8.2-3.58,16.99-5.37,26.34-5.37h243.37v55.11h-243.37c-3.69,0-6.82,1.28-9.35,3.82-2.54,2.54-3.82,5.66-3.82,9.36v21.14c0,3.7,1.28,6.82,3.82,9.36,2.53,2.54,5.66,3.81,9.35,3.81h175.07c9.36,0,18.2,1.79,26.52,5.37,8.2,3.58,15.43,8.5,21.67,14.73,6.25,6.25,11.15,13.47,14.73,21.67,3.58,8.32,5.37,17.16,5.37,26.52v21.14Z"/>
+    <path class="cls-3" d="M2198.29,380h-52.57v-187.38c0-2.08-.34-4.04-1.01-5.9-.67-1.85-1.58-3.46-2.73-4.85-1.16-1.39-2.5-2.48-4.04-3.3-1.54-.81-3.17-1.21-4.9-1.21h-209.54v-57.37h216.29c7.98,0,15.51,1.85,22.62,5.54,7.1,3.7,13.35,8.72,18.73,15.08,5.28,6.47,9.45,13.98,12.53,22.54,3.07,8.55,4.61,17.62,4.61,27.21v189.63ZM1995.87,380h-52.57v-185.01h52.57v185.01Z"/>
+    <g>
+      <path class="cls-3" d="M1497.49,120h102.64v55.12h-260.07v-55.12h157.44"/>
+      <rect class="cls-3" x="1442.52" y="198.2" width="55.14" height="181.8"/>
+    </g>
+    <g>
+      <path class="cls-3" d="M2382.92,120h102.64v55.12h-260.07v-55.12h157.44"/>
+      <rect class="cls-3" x="2327.95" y="198.2" width="55.14" height="181.8"/>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/images/sistent/horizontal/sistent-horizontal-partial-color.png b/src/assets/images/sistent/horizontal/sistent-horizontal-partial-color.png
new file mode 100644
index 000000000000..28895c3b8146
Binary files /dev/null and b/src/assets/images/sistent/horizontal/sistent-horizontal-partial-color.png differ
diff --git a/src/assets/images/sistent/horizontal/sistent-horizontal-partial-color.svg b/src/assets/images/sistent/horizontal/sistent-horizontal-partial-color.svg
new file mode 100644
index 000000000000..3c1c6c35baae
--- /dev/null
+++ b/src/assets/images/sistent/horizontal/sistent-horizontal-partial-color.svg
@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2540 500">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #00b39f;
+      }
+
+      .cls-2 {
+        fill: #00d3a9;
+      }
+
+      .cls-3 {
+        fill: #fff;
+      }
+    </style>
+  </defs>
+  <g>
+    <path class="cls-1" d="M237.54,328.22c11.05,6.32,20.98,11.95,30.68,18.04,4.51,2.93,8.12,2.71,12.86,0,38.8-22.33,77.59-44.21,116.39-66.09,4.51-2.48,5.86-5.64,5.86-10.6-.23-54.58-.23-109.17-.9-163.98,0-3.16-2.71-7.89-5.41-9.47-41.5-24.59-83.46-48.49-125.63-72.63-2.03-1.13-5.41-1.8-6.99-.9-11.28,6.09-22.33,12.41-34.28,19.4,3.83,2.26,6.32,4.06,9.02,5.64,39.7,22.78,79.4,45.79,119.09,68.34,5.19,2.93,7.44,6.09,7.22,12.41,0,39.47.23,78.72.68,118.19,0,6.32-1.8,9.92-7.44,13.08-24.13,13.31-48.04,27.07-72.18,40.6-16.01,9.02-31.8,18.27-48.95,27.97Z"/>
+    <path class="cls-2" d="M333.85,378.75c40.15-22.56,80.07-45.56,119.99-68.57,2.71-1.58,5.19-5.64,5.19-8.57,0-55.26-.23-110.3-.45-165.56,0-2.71-1.8-6.54-3.83-7.89-10.38-6.54-20.98-12.63-33.38-19.85v9.7c.23,52.55.23,105.11.68,157.66,0,7.44-1.8,11.5-8.57,15.11-24.13,13.31-48.04,27.07-71.95,40.83-16.24,9.25-32.48,18.72-49.4,28.42l41.73,18.72Z"/>
+    <path class="cls-1" d="M343.77,232.81c0-12.86.45-24.59-.23-36.09-.23-3.38-2.71-7.89-5.41-9.47-39.25-23.23-78.72-46.24-117.96-68.79-2.48-1.35-6.99-1.58-9.47-.23-48.27,27.29-96.31,54.81-144.35,82.78-2.48,1.58-4.96,5.86-4.96,8.8-.23,47.82,0,95.63.45,143.68,0,2.48.45,6.09,2.03,6.99,11.05,6.99,22.56,13.31,34.96,20.53v-10.6c-.23-45.79-.23-91.57-.68-137.36,0-5.19,1.13-8.57,6.09-11.28,34.96-19.85,69.47-39.7,103.98-59.77,4.74-2.71,8.57-3.16,13.53-.23,25.26,15.11,50.52,29.55,76.01,44.43,14.89,8.8,30,17.37,46.01,26.62Z"/>
+    <path class="cls-1" d="M459.93,326.19c-5.41,2.93-8.57,4.96-11.95,6.77-39.02,22.33-77.82,44.66-116.84,67.22-4.51,2.71-7.89,3.16-12.63.23-34.96-20.53-70.15-40.6-105.33-60.67-4.96-2.71-6.09-6.09-6.09-11.28.23-43.53,0-86.84,0-130.37,0-2.71-.23-5.64-.45-9.7-10.83,6.32-20.53,12.18-30.68,17.37-4.96,2.48-6.32,6.09-6.32,11.28.23,44.66,0,89.32.45,133.75,0,3.16,2.71,7.89,5.41,9.47,47.82,27.97,95.86,55.71,144.13,83.23,2.48,1.58,7.44,1.35,10.15,0,41.73-23.46,83-47.37,124.51-71.5,2.26-1.35,5.19-4.06,5.19-6.09.68-12.41.45-25.04.45-39.7Z"/>
+    <path class="cls-2" d="M344,169.88c0-12.86-.23-24.13,0-35.64.23-4.96-1.58-7.89-6.09-10.38-39.7-22.78-79.17-45.79-119.09-68.34-2.71-1.58-8.12-1.58-10.83,0-47.59,26.84-95.18,54.13-142.78,81.65-2.03,1.13-4.96,2.93-4.96,4.51-.45,13.08-.23,26.39-.23,40.83,3.83-2.03,5.86-2.93,7.89-4.06,46.69-26.62,93.15-53.23,139.84-80.07,4.29-2.48,7.44-2.71,11.73-.23,33.83,19.85,68.12,39.47,102.18,59.1,6.99,4.06,13.98,7.89,22.33,12.63Z"/>
+    <path class="cls-2" d="M307.23,457.91c-3.38-2.26-5.41-3.61-7.44-4.74-46.46-26.84-92.93-53.68-139.62-80.3-5.19-2.93-7.44-6.09-7.22-12.18.23-43.76,0-87.52-.23-131.27,0-2.93-.23-6.09-.45-10.15-11.95,6.77-22.33,12.63-32.48,18.95-2.26,1.35-3.83,5.19-3.83,7.67,0,46.01,0,92.25.45,138.26,0,2.93,2.48,7.22,5.19,8.8,47.59,27.97,95.63,55.49,143.68,83.23,2.26,1.35,5.86,2.26,7.89,1.13,11.28-5.86,21.88-12.41,34.06-19.4Z"/>
+  </g>
+  <g>
+    <path class="cls-3" d="M843.66,312.05c0,9.36-1.79,18.15-5.37,26.35-3.58,8.32-8.49,15.55-14.73,21.66-6.25,6.14-13.47,10.99-21.67,14.57-8.32,3.58-17.16,5.37-26.52,5.37h-243.35v-54.77h243.35c3.7,0,6.82-1.28,9.36-3.82,2.54-2.54,3.81-5.66,3.81-9.36v-21.14c0-3.7-1.26-6.82-3.81-9.36-2.54-2.54-5.66-3.81-9.36-3.81h-175.07c-9.35,0-18.13-1.79-26.34-5.37-8.32-3.58-15.61-8.5-21.84-14.73-6.25-6.25-11.15-13.53-14.73-21.84-3.58-8.22-5.37-16.99-5.37-26.35v-21.14c0-9.36,1.79-18.21,5.37-26.52,3.58-8.22,8.49-15.43,14.73-21.67,6.23-6.25,13.51-11.15,21.84-14.73,8.2-3.58,16.99-5.37,26.34-5.37h243.37v55.11h-243.37c-3.69,0-6.82,1.28-9.35,3.82-2.54,2.54-3.82,5.66-3.82,9.36v21.14c0,3.7,1.28,6.82,3.82,9.36,2.53,2.54,5.66,3.81,9.35,3.81h175.07c9.36,0,18.2,1.79,26.52,5.37,8.2,3.58,15.43,8.5,21.67,14.73,6.25,6.25,11.15,13.47,14.73,21.67,3.58,8.32,5.37,17.16,5.37,26.52v21.14Z"/>
+    <rect class="cls-3" x="893.37" y="120" width="57.22" height="260"/>
+    <polygon class="cls-3" points="1630.91 160.95 1630.91 172 1630.91 224 1630.91 287.42 1630.91 380 1877.38 380 1877.38 328 1682.91 328 1682.91 287.42 1682.91 276 1832.32 276 1832.32 224 1682.91 224 1682.91 172 1877.38 172 1877.38 120 1630.91 120 1630.91 160.95"/>
+    <path class="cls-3" d="M1311.95,312.05c0,9.36-1.79,18.15-5.37,26.35-3.58,8.32-8.49,15.55-14.73,21.66-6.25,6.14-13.47,10.99-21.67,14.57-8.32,3.58-17.16,5.37-26.52,5.37h-243.35v-54.77h243.35c3.7,0,6.82-1.28,9.36-3.82,2.54-2.54,3.81-5.66,3.81-9.36v-21.14c0-3.7-1.26-6.82-3.81-9.36-2.54-2.54-5.66-3.81-9.36-3.81h-175.07c-9.35,0-18.13-1.79-26.34-5.37-8.32-3.58-15.61-8.5-21.84-14.73-6.25-6.25-11.15-13.53-14.73-21.84-3.58-8.22-5.37-16.99-5.37-26.35v-21.14c0-9.36,1.79-18.21,5.37-26.52,3.58-8.22,8.49-15.43,14.73-21.67,6.23-6.25,13.51-11.15,21.84-14.73,8.2-3.58,16.99-5.37,26.34-5.37h243.37v55.11h-243.37c-3.69,0-6.82,1.28-9.35,3.82-2.54,2.54-3.82,5.66-3.82,9.36v21.14c0,3.7,1.28,6.82,3.82,9.36,2.53,2.54,5.66,3.81,9.35,3.81h175.07c9.36,0,18.2,1.79,26.52,5.37,8.2,3.58,15.43,8.5,21.67,14.73,6.25,6.25,11.15,13.47,14.73,21.67,3.58,8.32,5.37,17.16,5.37,26.52v21.14Z"/>
+    <path class="cls-3" d="M2197.38,380h-52.57v-187.38c0-2.08-.34-4.04-1.01-5.9-.67-1.85-1.58-3.46-2.73-4.85-1.16-1.39-2.5-2.48-4.04-3.3-1.54-.81-3.17-1.21-4.9-1.21h-209.54v-57.37h216.29c7.98,0,15.51,1.85,22.62,5.54,7.1,3.7,13.35,8.72,18.73,15.08,5.28,6.47,9.45,13.98,12.53,22.54,3.07,8.55,4.61,17.62,4.61,27.21v189.63ZM1994.96,380h-52.57v-185.01h52.57v185.01Z"/>
+    <g>
+      <path class="cls-3" d="M1496.58,120h102.64v55.12h-260.07v-55.12h157.44"/>
+      <rect class="cls-3" x="1441.61" y="198.2" width="55.14" height="181.8"/>
+    </g>
+    <g>
+      <path class="cls-3" d="M2382.01,120h102.64v55.12h-260.07v-55.12h157.44"/>
+      <rect class="cls-3" x="2327.04" y="198.2" width="55.14" height="181.8"/>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/images/sistent/horizontal/sistent-horizontal-white.png b/src/assets/images/sistent/horizontal/sistent-horizontal-white.png
new file mode 100644
index 000000000000..86a3ac9cd3b0
Binary files /dev/null and b/src/assets/images/sistent/horizontal/sistent-horizontal-white.png differ
diff --git a/src/assets/images/sistent/horizontal/sistent-horizontal-white.svg b/src/assets/images/sistent/horizontal/sistent-horizontal-white.svg
new file mode 100644
index 000000000000..122f0e1838ed
--- /dev/null
+++ b/src/assets/images/sistent/horizontal/sistent-horizontal-white.svg
@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2540 500">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #fff;
+      }
+
+      .cls-2 {
+        opacity: .8;
+      }
+    </style>
+  </defs>
+  <g>
+    <g class="cls-2">
+      <path class="cls-1" d="M232.57,328.22c11.05,6.32,20.98,11.95,30.68,18.04,4.51,2.93,8.12,2.71,12.86,0,38.8-22.33,77.59-44.21,116.39-66.09,4.51-2.48,5.86-5.64,5.86-10.6-.23-54.58-.23-109.17-.9-163.98,0-3.16-2.71-7.89-5.41-9.47-41.5-24.59-83.46-48.49-125.63-72.63-2.03-1.13-5.41-1.8-6.99-.9-11.28,6.09-22.33,12.41-34.28,19.4,3.83,2.26,6.32,4.06,9.02,5.64,39.7,22.78,79.4,45.79,119.09,68.34,5.19,2.93,7.44,6.09,7.22,12.41,0,39.47.23,78.72.68,118.19,0,6.32-1.8,9.92-7.44,13.08-24.13,13.31-48.04,27.07-72.18,40.6-16.01,9.02-31.8,18.27-48.95,27.97Z"/>
+    </g>
+    <path class="cls-1" d="M328.88,378.75c40.15-22.56,80.07-45.56,119.99-68.57,2.71-1.58,5.19-5.64,5.19-8.57,0-55.26-.23-110.3-.45-165.56,0-2.71-1.8-6.54-3.83-7.89-10.38-6.54-20.98-12.63-33.38-19.85v9.7c.23,52.55.23,105.11.68,157.66,0,7.44-1.8,11.5-8.57,15.11-24.13,13.31-48.04,27.07-71.95,40.83-16.24,9.25-32.48,18.72-49.4,28.42l41.73,18.72Z"/>
+    <g class="cls-2">
+      <path class="cls-1" d="M338.81,232.81c0-12.86.45-24.59-.23-36.09-.23-3.38-2.71-7.89-5.41-9.47-39.25-23.23-78.72-46.24-117.96-68.79-2.48-1.35-6.99-1.58-9.47-.23-48.27,27.29-96.31,54.81-144.35,82.78-2.48,1.58-4.96,5.86-4.96,8.8-.23,47.82,0,95.63.45,143.68,0,2.48.45,6.09,2.03,6.99,11.05,6.99,22.56,13.31,34.96,20.53v-10.6c-.23-45.79-.23-91.57-.68-137.36,0-5.19,1.13-8.57,6.09-11.28,34.96-19.85,69.47-39.7,103.98-59.77,4.74-2.71,8.57-3.16,13.53-.23,25.26,15.11,50.52,29.55,76.01,44.43,14.89,8.8,30,17.37,46.01,26.62Z"/>
+    </g>
+    <g class="cls-2">
+      <path class="cls-1" d="M454.97,326.19c-5.41,2.93-8.57,4.96-11.95,6.77-39.02,22.33-77.82,44.66-116.84,67.22-4.51,2.71-7.89,3.16-12.63.23-34.96-20.53-70.15-40.6-105.33-60.67-4.96-2.71-6.09-6.09-6.09-11.28.23-43.53,0-86.84,0-130.37,0-2.71-.23-5.64-.45-9.7-10.83,6.32-20.53,12.18-30.68,17.37-4.96,2.48-6.32,6.09-6.32,11.28.23,44.66,0,89.32.45,133.75,0,3.16,2.71,7.89,5.41,9.47,47.82,27.97,95.86,55.71,144.13,83.23,2.48,1.58,7.44,1.35,10.15,0,41.73-23.46,83-47.37,124.51-71.5,2.26-1.35,5.19-4.06,5.19-6.09.68-12.41.45-25.04.45-39.7Z"/>
+    </g>
+    <path class="cls-1" d="M339.03,169.88c0-12.86-.23-24.13,0-35.64.23-4.96-1.58-7.89-6.09-10.38-39.7-22.78-79.17-45.79-119.09-68.34-2.71-1.58-8.12-1.58-10.83,0-47.59,26.84-95.18,54.13-142.78,81.65-2.03,1.13-4.96,2.93-4.96,4.51-.45,13.08-.23,26.39-.23,40.83,3.83-2.03,5.86-2.93,7.89-4.06,46.69-26.62,93.15-53.23,139.84-80.07,4.29-2.48,7.44-2.71,11.73-.23,33.83,19.85,68.12,39.47,102.18,59.1,6.99,4.06,13.98,7.89,22.33,12.63Z"/>
+    <path class="cls-1" d="M302.27,457.91c-3.38-2.26-5.41-3.61-7.44-4.74-46.46-26.84-92.93-53.68-139.62-80.3-5.19-2.93-7.44-6.09-7.22-12.18.23-43.76,0-87.52-.23-131.27,0-2.93-.23-6.09-.45-10.15-11.95,6.77-22.33,12.63-32.48,18.95-2.26,1.35-3.83,5.19-3.83,7.67,0,46.01,0,92.25.45,138.26,0,2.93,2.48,7.22,5.19,8.8,47.59,27.97,95.63,55.49,143.68,83.23,2.26,1.35,5.86,2.26,7.89,1.13,11.28-5.86,21.88-12.41,34.06-19.4Z"/>
+  </g>
+  <g>
+    <path class="cls-1" d="M836.16,312.05c0,9.36-1.79,18.15-5.37,26.35-3.58,8.32-8.49,15.55-14.73,21.66-6.25,6.14-13.47,10.99-21.67,14.57-8.32,3.58-17.16,5.37-26.52,5.37h-243.35v-54.77h243.35c3.7,0,6.82-1.28,9.36-3.82,2.54-2.54,3.81-5.66,3.81-9.36v-21.14c0-3.7-1.26-6.82-3.81-9.36-2.54-2.54-5.66-3.81-9.36-3.81h-175.07c-9.35,0-18.13-1.79-26.34-5.37-8.32-3.58-15.61-8.5-21.84-14.73-6.25-6.25-11.15-13.53-14.73-21.84-3.58-8.22-5.37-16.99-5.37-26.35v-21.14c0-9.36,1.79-18.21,5.37-26.52,3.58-8.22,8.49-15.43,14.73-21.67,6.23-6.25,13.51-11.15,21.84-14.73,8.2-3.58,16.99-5.37,26.34-5.37h243.37v55.11h-243.37c-3.69,0-6.82,1.28-9.35,3.82-2.54,2.54-3.82,5.66-3.82,9.36v21.14c0,3.7,1.28,6.82,3.82,9.36,2.53,2.54,5.66,3.81,9.35,3.81h175.07c9.36,0,18.2,1.79,26.52,5.37,8.2,3.58,15.43,8.5,21.67,14.73,6.25,6.25,11.15,13.47,14.73,21.67,3.58,8.32,5.37,17.16,5.37,26.52v21.14Z"/>
+    <rect class="cls-1" x="885.87" y="120" width="57.22" height="260"/>
+    <polygon class="cls-1" points="1623.41 160.95 1623.41 172 1623.41 224 1623.41 287.42 1623.41 380 1869.88 380 1869.88 328 1675.41 328 1675.41 287.42 1675.41 276 1824.82 276 1824.82 224 1675.41 224 1675.41 172 1869.88 172 1869.88 120 1623.41 120 1623.41 160.95"/>
+    <path class="cls-1" d="M1304.45,312.05c0,9.36-1.79,18.15-5.37,26.35-3.58,8.32-8.49,15.55-14.73,21.66-6.25,6.14-13.47,10.99-21.67,14.57-8.32,3.58-17.16,5.37-26.52,5.37h-243.35v-54.77h243.35c3.7,0,6.82-1.28,9.36-3.82,2.54-2.54,3.81-5.66,3.81-9.36v-21.14c0-3.7-1.26-6.82-3.81-9.36-2.54-2.54-5.66-3.81-9.36-3.81h-175.07c-9.35,0-18.13-1.79-26.34-5.37-8.32-3.58-15.61-8.5-21.84-14.73-6.25-6.25-11.15-13.53-14.73-21.84-3.58-8.22-5.37-16.99-5.37-26.35v-21.14c0-9.36,1.79-18.21,5.37-26.52,3.58-8.22,8.49-15.43,14.73-21.67,6.23-6.25,13.51-11.15,21.84-14.73,8.2-3.58,16.99-5.37,26.34-5.37h243.37v55.11h-243.37c-3.69,0-6.82,1.28-9.35,3.82-2.54,2.54-3.82,5.66-3.82,9.36v21.14c0,3.7,1.28,6.82,3.82,9.36,2.53,2.54,5.66,3.81,9.35,3.81h175.07c9.36,0,18.2,1.79,26.52,5.37,8.2,3.58,15.43,8.5,21.67,14.73,6.25,6.25,11.15,13.47,14.73,21.67,3.58,8.32,5.37,17.16,5.37,26.52v21.14Z"/>
+    <path class="cls-1" d="M2189.88,380h-52.57v-187.38c0-2.08-.34-4.04-1.01-5.9-.67-1.85-1.58-3.46-2.73-4.85-1.16-1.39-2.5-2.48-4.04-3.3-1.54-.81-3.17-1.21-4.9-1.21h-209.54v-57.37h216.29c7.98,0,15.51,1.85,22.62,5.54,7.1,3.7,13.35,8.72,18.73,15.08,5.28,6.47,9.45,13.98,12.53,22.54,3.07,8.55,4.61,17.62,4.61,27.21v189.63ZM1987.46,380h-52.57v-185.01h52.57v185.01Z"/>
+    <g>
+      <path class="cls-1" d="M1489.08,120h102.64v55.12h-260.07v-55.12h157.44"/>
+      <rect class="cls-1" x="1434.11" y="198.2" width="55.14" height="181.8"/>
+    </g>
+    <g>
+      <path class="cls-1" d="M2374.51,120h102.64v55.12h-260.07v-55.12h157.44"/>
+      <rect class="cls-1" x="2319.54" y="198.2" width="55.14" height="181.8"/>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/images/sistent/icon-only/sistent-icon-color.png b/src/assets/images/sistent/icon-only/sistent-icon-color.png
new file mode 100644
index 000000000000..0af8e24264b7
Binary files /dev/null and b/src/assets/images/sistent/icon-only/sistent-icon-color.png differ
diff --git a/src/assets/images/sistent/icon-only/sistent-icon-color.svg b/src/assets/images/sistent/icon-only/sistent-icon-color.svg
new file mode 100644
index 000000000000..1e72c03b8703
--- /dev/null
+++ b/src/assets/images/sistent/icon-only/sistent-icon-color.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #00b39f;
+      }
+
+      .cls-2 {
+        fill: #00d3a9;
+      }
+    </style>
+  </defs>
+  <path class="cls-1" d="M227.57,328.22c11.05,6.32,20.98,11.95,30.68,18.04,4.51,2.93,8.12,2.71,12.86,0,38.8-22.33,77.59-44.21,116.39-66.09,4.51-2.48,5.86-5.64,5.86-10.6-.23-54.58-.23-109.17-.9-163.98,0-3.16-2.71-7.89-5.41-9.47-41.5-24.59-83.46-48.49-125.63-72.63-2.03-1.13-5.41-1.8-6.99-.9-11.28,6.09-22.33,12.41-34.28,19.4,3.83,2.26,6.32,4.06,9.02,5.64,39.7,22.78,79.4,45.79,119.09,68.34,5.19,2.93,7.44,6.09,7.22,12.41,0,39.47.23,78.72.68,118.19,0,6.32-1.8,9.92-7.44,13.08-24.13,13.31-48.04,27.07-72.18,40.6-16.01,9.02-31.8,18.27-48.95,27.97Z"/>
+  <path class="cls-2" d="M323.88,378.75c40.15-22.56,80.07-45.56,119.99-68.57,2.71-1.58,5.19-5.64,5.19-8.57,0-55.26-.23-110.3-.45-165.56,0-2.71-1.8-6.54-3.83-7.89-10.38-6.54-20.98-12.63-33.38-19.85v9.7c.23,52.55.23,105.11.68,157.66,0,7.44-1.8,11.5-8.57,15.11-24.13,13.31-48.04,27.07-71.95,40.83-16.24,9.25-32.48,18.72-49.4,28.42l41.73,18.72Z"/>
+  <path class="cls-1" d="M333.8,232.81c0-12.86.45-24.59-.23-36.09-.23-3.38-2.71-7.89-5.41-9.47-39.25-23.23-78.72-46.24-117.96-68.79-2.48-1.35-6.99-1.58-9.47-.23-48.27,27.29-96.31,54.81-144.35,82.78-2.48,1.58-4.96,5.86-4.96,8.8-.23,47.82,0,95.63.45,143.68,0,2.48.45,6.09,2.03,6.99,11.05,6.99,22.56,13.31,34.96,20.53v-10.6c-.23-45.79-.23-91.57-.68-137.36,0-5.19,1.13-8.57,6.09-11.28,34.96-19.85,69.47-39.7,103.98-59.77,4.74-2.71,8.57-3.16,13.53-.23,25.26,15.11,50.52,29.55,76.01,44.43,14.89,8.8,30,17.37,46.01,26.62Z"/>
+  <path class="cls-1" d="M449.96,326.19c-5.41,2.93-8.57,4.96-11.95,6.77-39.02,22.33-77.82,44.66-116.84,67.22-4.51,2.71-7.89,3.16-12.63.23-34.96-20.53-70.15-40.6-105.33-60.67-4.96-2.71-6.09-6.09-6.09-11.28.23-43.53,0-86.84,0-130.37,0-2.71-.23-5.64-.45-9.7-10.83,6.32-20.53,12.18-30.68,17.37-4.96,2.48-6.32,6.09-6.32,11.28.23,44.66,0,89.32.45,133.75,0,3.16,2.71,7.89,5.41,9.47,47.82,27.97,95.86,55.71,144.13,83.23,2.48,1.58,7.44,1.35,10.15,0,41.73-23.46,83-47.37,124.51-71.5,2.26-1.35,5.19-4.06,5.19-6.09.68-12.41.45-25.04.45-39.7Z"/>
+  <path class="cls-2" d="M334.03,169.88c0-12.86-.23-24.13,0-35.64.23-4.96-1.58-7.89-6.09-10.38-39.7-22.78-79.17-45.79-119.09-68.34-2.71-1.58-8.12-1.58-10.83,0-47.59,26.84-95.18,54.13-142.78,81.65-2.03,1.13-4.96,2.93-4.96,4.51-.45,13.08-.23,26.39-.23,40.83,3.83-2.03,5.86-2.93,7.89-4.06,46.69-26.62,93.15-53.23,139.84-80.07,4.29-2.48,7.44-2.71,11.73-.23,33.83,19.85,68.12,39.47,102.18,59.1,6.99,4.06,13.98,7.89,22.33,12.63Z"/>
+  <path class="cls-2" d="M297.26,457.91c-3.38-2.26-5.41-3.61-7.44-4.74-46.46-26.84-92.93-53.68-139.62-80.3-5.19-2.93-7.44-6.09-7.22-12.18.23-43.76,0-87.52-.23-131.27,0-2.93-.23-6.09-.45-10.15-11.95,6.77-22.33,12.63-32.48,18.95-2.26,1.35-3.83,5.19-3.83,7.67,0,46.01,0,92.25.45,138.26,0,2.93,2.48,7.22,5.19,8.8,47.59,27.97,95.63,55.49,143.68,83.23,2.26,1.35,5.86,2.26,7.89,1.13,11.28-5.86,21.88-12.41,34.06-19.4Z"/>
+</svg>
\ No newline at end of file
diff --git a/src/assets/images/sistent/icon-only/sistent-icon-white.png b/src/assets/images/sistent/icon-only/sistent-icon-white.png
new file mode 100644
index 000000000000..1c58f44e9dfa
Binary files /dev/null and b/src/assets/images/sistent/icon-only/sistent-icon-white.png differ
diff --git a/src/assets/images/sistent/icon-only/sistent-icon-white.svg b/src/assets/images/sistent/icon-only/sistent-icon-white.svg
new file mode 100644
index 000000000000..2ef3ac6c2be4
--- /dev/null
+++ b/src/assets/images/sistent/icon-only/sistent-icon-white.svg
@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #fff;
+      }
+
+      .cls-2 {
+        opacity: .8;
+      }
+    </style>
+  </defs>
+  <g class="cls-2">
+    <path class="cls-1" d="M227.57,328.22c11.05,6.32,20.98,11.95,30.68,18.04,4.51,2.93,8.12,2.71,12.86,0,38.8-22.33,77.59-44.21,116.39-66.09,4.51-2.48,5.86-5.64,5.86-10.6-.23-54.58-.23-109.17-.9-163.98,0-3.16-2.71-7.89-5.41-9.47-41.5-24.59-83.46-48.49-125.63-72.63-2.03-1.13-5.41-1.8-6.99-.9-11.28,6.09-22.33,12.41-34.28,19.4,3.83,2.26,6.32,4.06,9.02,5.64,39.7,22.78,79.4,45.79,119.09,68.34,5.19,2.93,7.44,6.09,7.22,12.41,0,39.47.23,78.72.68,118.19,0,6.32-1.8,9.92-7.44,13.08-24.13,13.31-48.04,27.07-72.18,40.6-16.01,9.02-31.8,18.27-48.95,27.97Z"/>
+  </g>
+  <path class="cls-1" d="M323.88,378.75c40.15-22.56,80.07-45.56,119.99-68.57,2.71-1.58,5.19-5.64,5.19-8.57,0-55.26-.23-110.3-.45-165.56,0-2.71-1.8-6.54-3.83-7.89-10.38-6.54-20.98-12.63-33.38-19.85v9.7c.23,52.55.23,105.11.68,157.66,0,7.44-1.8,11.5-8.57,15.11-24.13,13.31-48.04,27.07-71.95,40.83-16.24,9.25-32.48,18.72-49.4,28.42l41.73,18.72Z"/>
+  <g class="cls-2">
+    <path class="cls-1" d="M333.8,232.81c0-12.86.45-24.59-.23-36.09-.23-3.38-2.71-7.89-5.41-9.47-39.25-23.23-78.72-46.24-117.96-68.79-2.48-1.35-6.99-1.58-9.47-.23-48.27,27.29-96.31,54.81-144.35,82.78-2.48,1.58-4.96,5.86-4.96,8.8-.23,47.82,0,95.63.45,143.68,0,2.48.45,6.09,2.03,6.99,11.05,6.99,22.56,13.31,34.96,20.53v-10.6c-.23-45.79-.23-91.57-.68-137.36,0-5.19,1.13-8.57,6.09-11.28,34.96-19.85,69.47-39.7,103.98-59.77,4.74-2.71,8.57-3.16,13.53-.23,25.26,15.11,50.52,29.55,76.01,44.43,14.89,8.8,30,17.37,46.01,26.62Z"/>
+  </g>
+  <g class="cls-2">
+    <path class="cls-1" d="M449.96,326.19c-5.41,2.93-8.57,4.96-11.95,6.77-39.02,22.33-77.82,44.66-116.84,67.22-4.51,2.71-7.89,3.16-12.63.23-34.96-20.53-70.15-40.6-105.33-60.67-4.96-2.71-6.09-6.09-6.09-11.28.23-43.53,0-86.84,0-130.37,0-2.71-.23-5.64-.45-9.7-10.83,6.32-20.53,12.18-30.68,17.37-4.96,2.48-6.32,6.09-6.32,11.28.23,44.66,0,89.32.45,133.75,0,3.16,2.71,7.89,5.41,9.47,47.82,27.97,95.86,55.71,144.13,83.23,2.48,1.58,7.44,1.35,10.15,0,41.73-23.46,83-47.37,124.51-71.5,2.26-1.35,5.19-4.06,5.19-6.09.68-12.41.45-25.04.45-39.7Z"/>
+  </g>
+  <path class="cls-1" d="M334.03,169.88c0-12.86-.23-24.13,0-35.64.23-4.96-1.58-7.89-6.09-10.38-39.7-22.78-79.17-45.79-119.09-68.34-2.71-1.58-8.12-1.58-10.83,0-47.59,26.84-95.18,54.13-142.78,81.65-2.03,1.13-4.96,2.93-4.96,4.51-.45,13.08-.23,26.39-.23,40.83,3.83-2.03,5.86-2.93,7.89-4.06,46.69-26.62,93.15-53.23,139.84-80.07,4.29-2.48,7.44-2.71,11.73-.23,33.83,19.85,68.12,39.47,102.18,59.1,6.99,4.06,13.98,7.89,22.33,12.63Z"/>
+  <path class="cls-1" d="M297.26,457.91c-3.38-2.26-5.41-3.61-7.44-4.74-46.46-26.84-92.93-53.68-139.62-80.3-5.19-2.93-7.44-6.09-7.22-12.18.23-43.76,0-87.52-.23-131.27,0-2.93-.23-6.09-.45-10.15-11.95,6.77-22.33,12.63-32.48,18.95-2.26,1.35-3.83,5.19-3.83,7.67,0,46.01,0,92.25.45,138.26,0,2.93,2.48,7.22,5.19,8.8,47.59,27.97,95.63,55.49,143.68,83.23,2.26,1.35,5.86,2.26,7.89,1.13,11.28-5.86,21.88-12.41,34.06-19.4Z"/>
+</svg>
\ No newline at end of file
diff --git a/src/assets/images/sistent/stacked/sistent-stacked-color.png b/src/assets/images/sistent/stacked/sistent-stacked-color.png
new file mode 100644
index 000000000000..5614c28b04ff
Binary files /dev/null and b/src/assets/images/sistent/stacked/sistent-stacked-color.png differ
diff --git a/src/assets/images/sistent/stacked/sistent-stacked-color.svg b/src/assets/images/sistent/stacked/sistent-stacked-color.svg
new file mode 100644
index 000000000000..b32f7b0a3ba5
--- /dev/null
+++ b/src/assets/images/sistent/stacked/sistent-stacked-color.svg
@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 700">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #00b39f;
+      }
+
+      .cls-2 {
+        fill: #00d3a9;
+      }
+
+      .cls-3 {
+        fill: #3c494f;
+      }
+    </style>
+  </defs>
+  <g>
+    <path class="cls-1" d="M327.57,358.22c11.05,6.32,20.98,11.95,30.68,18.04,4.51,2.93,8.12,2.71,12.86,0,38.8-22.33,77.59-44.21,116.39-66.09,4.51-2.48,5.86-5.64,5.86-10.6-.23-54.58-.23-109.17-.9-163.98,0-3.16-2.71-7.89-5.41-9.47-41.5-24.59-83.46-48.49-125.63-72.63-2.03-1.13-5.41-1.8-6.99-.9-11.28,6.09-22.33,12.41-34.28,19.4,3.83,2.26,6.32,4.06,9.02,5.64,39.7,22.78,79.4,45.79,119.09,68.34,5.19,2.93,7.44,6.09,7.22,12.41,0,39.47.23,78.72.68,118.19,0,6.32-1.8,9.92-7.44,13.08-24.13,13.31-48.04,27.07-72.18,40.6-16.01,9.02-31.8,18.27-48.95,27.97Z"/>
+    <path class="cls-2" d="M423.88,408.75c40.15-22.56,80.07-45.56,119.99-68.57,2.71-1.58,5.19-5.64,5.19-8.57,0-55.26-.23-110.3-.45-165.56,0-2.71-1.8-6.54-3.83-7.89-10.38-6.54-20.98-12.63-33.38-19.85v9.7c.23,52.55.23,105.11.68,157.66,0,7.44-1.8,11.5-8.57,15.11-24.13,13.31-48.04,27.07-71.95,40.83-16.24,9.25-32.48,18.72-49.4,28.42l41.73,18.72Z"/>
+    <path class="cls-1" d="M433.8,262.81c0-12.86.45-24.59-.23-36.09-.23-3.38-2.71-7.89-5.41-9.47-39.25-23.23-78.72-46.24-117.96-68.79-2.48-1.35-6.99-1.58-9.47-.23-48.27,27.29-96.31,54.81-144.35,82.78-2.48,1.58-4.96,5.86-4.96,8.8-.23,47.82,0,95.63.45,143.68,0,2.48.45,6.09,2.03,6.99,11.05,6.99,22.56,13.31,34.96,20.53v-10.6c-.23-45.79-.23-91.57-.68-137.36,0-5.19,1.13-8.57,6.09-11.28,34.96-19.85,69.47-39.7,103.98-59.77,4.74-2.71,8.57-3.16,13.53-.23,25.26,15.11,50.52,29.55,76.01,44.43,14.89,8.8,30,17.37,46.01,26.62Z"/>
+    <path class="cls-1" d="M549.96,356.19c-5.41,2.93-8.57,4.96-11.95,6.77-39.02,22.33-77.82,44.66-116.84,67.22-4.51,2.71-7.89,3.16-12.63.23-34.96-20.53-70.15-40.6-105.33-60.67-4.96-2.71-6.09-6.09-6.09-11.28.23-43.53,0-86.84,0-130.37,0-2.71-.23-5.64-.45-9.7-10.83,6.32-20.53,12.18-30.68,17.37-4.96,2.48-6.32,6.09-6.32,11.28.23,44.66,0,89.32.45,133.75,0,3.16,2.71,7.89,5.41,9.47,47.82,27.97,95.86,55.71,144.13,83.23,2.48,1.58,7.44,1.35,10.15,0,41.73-23.46,83-47.37,124.51-71.5,2.26-1.35,5.19-4.06,5.19-6.09.68-12.41.45-25.04.45-39.7Z"/>
+    <path class="cls-2" d="M434.03,199.88c0-12.86-.23-24.13,0-35.64.23-4.96-1.58-7.89-6.09-10.38-39.7-22.78-79.17-45.79-119.09-68.34-2.71-1.58-8.12-1.58-10.83,0-47.59,26.84-95.18,54.13-142.78,81.65-2.03,1.13-4.96,2.93-4.96,4.51-.45,13.08-.23,26.39-.23,40.83,3.83-2.03,5.86-2.93,7.89-4.06,46.69-26.62,93.15-53.23,139.84-80.07,4.29-2.48,7.44-2.71,11.73-.23,33.83,19.85,68.12,39.47,102.18,59.1,6.99,4.06,13.98,7.89,22.33,12.63Z"/>
+    <path class="cls-2" d="M397.26,487.91c-3.38-2.26-5.41-3.61-7.44-4.74-46.46-26.84-92.93-53.68-139.62-80.3-5.19-2.93-7.44-6.09-7.22-12.18.23-43.76,0-87.52-.23-131.27,0-2.93-.23-6.09-.45-10.15-11.95,6.77-22.33,12.63-32.48,18.95-2.26,1.35-3.83,5.19-3.83,7.67,0,46.01,0,92.25.45,138.26,0,2.93,2.48,7.22,5.19,8.8,47.59,27.97,95.63,55.49,143.68,83.23,2.26,1.35,5.86,2.26,7.89,1.13,11.28-5.86,21.88-12.41,34.06-19.4Z"/>
+  </g>
+  <g>
+    <path class="cls-3" d="M171.05,631.71c0,2.52-.48,4.89-1.45,7.09-.96,2.24-2.29,4.19-3.97,5.83-1.68,1.65-3.63,2.96-5.83,3.92-2.24.96-4.62,1.45-7.14,1.45h-65.52v-14.74h65.52c1,0,1.84-.34,2.52-1.03.68-.68,1.03-1.52,1.03-2.52v-5.69c0-1-.34-1.84-1.03-2.52s-1.52-1.03-2.52-1.03h-47.14c-2.52,0-4.88-.48-7.09-1.45-2.24-.96-4.2-2.29-5.88-3.97-1.68-1.68-3-3.64-3.97-5.88-.96-2.21-1.45-4.57-1.45-7.09v-5.69c0-2.52.48-4.9,1.45-7.14.96-2.21,2.29-4.15,3.97-5.83,1.68-1.68,3.64-3,5.88-3.97,2.21-.96,4.57-1.45,7.09-1.45h65.52v14.84h-65.52c-.99,0-1.84.34-2.52,1.03-.68.68-1.03,1.52-1.03,2.52v5.69c0,1,.34,1.84,1.03,2.52.68.68,1.52,1.03,2.52,1.03h47.14c2.52,0,4.9.48,7.14,1.45,2.21.96,4.15,2.29,5.83,3.97,1.68,1.68,3,3.63,3.97,5.83.96,2.24,1.45,4.62,1.45,7.14v5.69Z"/>
+    <rect class="cls-3" x="184.44" y="580" width="15.41" height="70"/>
+    <polygon class="cls-3" points="383 591.02 383 594 383 608 383 625.08 383 650 449.36 650 449.36 636 397 636 397 625.08 397 622 437.23 622 437.23 608 397 608 397 594 449.36 594 449.36 580 383 580 383 591.02"/>
+    <path class="cls-3" d="M297.13,631.71c0,2.52-.48,4.89-1.45,7.09-.96,2.24-2.29,4.19-3.97,5.83-1.68,1.65-3.63,2.96-5.83,3.92-2.24.96-4.62,1.45-7.14,1.45h-65.52v-14.74h65.52c1,0,1.84-.34,2.52-1.03.68-.68,1.03-1.52,1.03-2.52v-5.69c0-1-.34-1.84-1.03-2.52-.68-.68-1.52-1.03-2.52-1.03h-47.14c-2.52,0-4.88-.48-7.09-1.45-2.24-.96-4.2-2.29-5.88-3.97-1.68-1.68-3-3.64-3.97-5.88-.96-2.21-1.45-4.57-1.45-7.09v-5.69c0-2.52.48-4.9,1.45-7.14.96-2.21,2.29-4.15,3.97-5.83,1.68-1.68,3.64-3,5.88-3.97,2.21-.96,4.57-1.45,7.09-1.45h65.52v14.84h-65.52c-.99,0-1.84.34-2.52,1.03-.68.68-1.03,1.52-1.03,2.52v5.69c0,1,.34,1.84,1.03,2.52.68.68,1.52,1.03,2.52,1.03h47.14c2.52,0,4.9.48,7.14,1.45,2.21.96,4.15,2.29,5.83,3.97,1.68,1.68,3,3.63,3.97,5.83.96,2.24,1.45,4.62,1.45,7.14v5.69Z"/>
+    <path class="cls-3" d="M535.51,650h-14.15v-50.45c0-.56-.09-1.09-.27-1.59-.18-.5-.43-.93-.74-1.31s-.67-.67-1.09-.89c-.41-.22-.85-.33-1.32-.33h-56.41v-15.45h58.23c2.15,0,4.18.5,6.09,1.49,1.91,1,3.59,2.35,5.04,4.06,1.42,1.74,2.55,3.76,3.37,6.07.83,2.3,1.24,4.74,1.24,7.33v51.05ZM481.02,650h-14.15v-49.81h14.15v49.81Z"/>
+    <g>
+      <path class="cls-3" d="M346.84,580h27.63v14.84h-70.02v-14.84h42.39"/>
+      <rect class="cls-3" x="332.04" y="601.05" width="14.84" height="48.95"/>
+    </g>
+    <g>
+      <path class="cls-3" d="M585.22,580h27.63v14.84h-70.02v-14.84h42.39"/>
+      <rect class="cls-3" x="570.42" y="601.05" width="14.84" height="48.95"/>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/images/sistent/stacked/sistent-stacked-partial-color.png b/src/assets/images/sistent/stacked/sistent-stacked-partial-color.png
new file mode 100644
index 000000000000..cf0e5907782e
Binary files /dev/null and b/src/assets/images/sistent/stacked/sistent-stacked-partial-color.png differ
diff --git a/src/assets/images/sistent/stacked/sistent-stacked-partial-color.svg b/src/assets/images/sistent/stacked/sistent-stacked-partial-color.svg
new file mode 100644
index 000000000000..9be9b1f2db95
--- /dev/null
+++ b/src/assets/images/sistent/stacked/sistent-stacked-partial-color.svg
@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 700">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #00b39f;
+      }
+
+      .cls-2 {
+        fill: #00d3a9;
+      }
+
+      .cls-3 {
+        fill: #fff;
+      }
+    </style>
+  </defs>
+  <g>
+    <path class="cls-1" d="M327.57,368.22c11.05,6.32,20.98,11.95,30.68,18.04,4.51,2.93,8.12,2.71,12.86,0,38.8-22.33,77.59-44.21,116.39-66.09,4.51-2.48,5.86-5.64,5.86-10.6-.23-54.58-.23-109.17-.9-163.98,0-3.16-2.71-7.89-5.41-9.47-41.5-24.59-83.46-48.49-125.63-72.63-2.03-1.13-5.41-1.8-6.99-.9-11.28,6.09-22.33,12.41-34.28,19.4,3.83,2.26,6.32,4.06,9.02,5.64,39.7,22.78,79.4,45.79,119.09,68.34,5.19,2.93,7.44,6.09,7.22,12.41,0,39.47.23,78.72.68,118.19,0,6.32-1.8,9.92-7.44,13.08-24.13,13.31-48.04,27.07-72.18,40.6-16.01,9.02-31.8,18.27-48.95,27.97Z"/>
+    <path class="cls-2" d="M423.88,418.75c40.15-22.56,80.07-45.56,119.99-68.57,2.71-1.58,5.19-5.64,5.19-8.57,0-55.26-.23-110.3-.45-165.56,0-2.71-1.8-6.54-3.83-7.89-10.38-6.54-20.98-12.63-33.38-19.85v9.7c.23,52.55.23,105.11.68,157.66,0,7.44-1.8,11.5-8.57,15.11-24.13,13.31-48.04,27.07-71.95,40.83-16.24,9.25-32.48,18.72-49.4,28.42l41.73,18.72Z"/>
+    <path class="cls-1" d="M433.8,272.81c0-12.86.45-24.59-.23-36.09-.23-3.38-2.71-7.89-5.41-9.47-39.25-23.23-78.72-46.24-117.96-68.79-2.48-1.35-6.99-1.58-9.47-.23-48.27,27.29-96.31,54.81-144.35,82.78-2.48,1.58-4.96,5.86-4.96,8.8-.23,47.82,0,95.63.45,143.68,0,2.48.45,6.09,2.03,6.99,11.05,6.99,22.56,13.31,34.96,20.53v-10.6c-.23-45.79-.23-91.57-.68-137.36,0-5.19,1.13-8.57,6.09-11.28,34.96-19.85,69.47-39.7,103.98-59.77,4.74-2.71,8.57-3.16,13.53-.23,25.26,15.11,50.52,29.55,76.01,44.43,14.89,8.8,30,17.37,46.01,26.62Z"/>
+    <path class="cls-1" d="M549.96,366.19c-5.41,2.93-8.57,4.96-11.95,6.77-39.02,22.33-77.82,44.66-116.84,67.22-4.51,2.71-7.89,3.16-12.63.23-34.96-20.53-70.15-40.6-105.33-60.67-4.96-2.71-6.09-6.09-6.09-11.28.23-43.53,0-86.84,0-130.37,0-2.71-.23-5.64-.45-9.7-10.83,6.32-20.53,12.18-30.68,17.37-4.96,2.48-6.32,6.09-6.32,11.28.23,44.66,0,89.32.45,133.75,0,3.16,2.71,7.89,5.41,9.47,47.82,27.97,95.86,55.71,144.13,83.23,2.48,1.58,7.44,1.35,10.15,0,41.73-23.46,83-47.37,124.51-71.5,2.26-1.35,5.19-4.06,5.19-6.09.68-12.41.45-25.04.45-39.7Z"/>
+    <path class="cls-2" d="M434.03,209.88c0-12.86-.23-24.13,0-35.64.23-4.96-1.58-7.89-6.09-10.38-39.7-22.78-79.17-45.79-119.09-68.34-2.71-1.58-8.12-1.58-10.83,0-47.59,26.84-95.18,54.13-142.78,81.65-2.03,1.13-4.96,2.93-4.96,4.51-.45,13.08-.23,26.39-.23,40.83,3.83-2.03,5.86-2.93,7.89-4.06,46.69-26.62,93.15-53.23,139.84-80.07,4.29-2.48,7.44-2.71,11.73-.23,33.83,19.85,68.12,39.47,102.18,59.1,6.99,4.06,13.98,7.89,22.33,12.63Z"/>
+    <path class="cls-2" d="M397.26,497.91c-3.38-2.26-5.41-3.61-7.44-4.74-46.46-26.84-92.93-53.68-139.62-80.3-5.19-2.93-7.44-6.09-7.22-12.18.23-43.76,0-87.52-.23-131.27,0-2.93-.23-6.09-.45-10.15-11.95,6.77-22.33,12.63-32.48,18.95-2.26,1.35-3.83,5.19-3.83,7.67,0,46.01,0,92.25.45,138.26,0,2.93,2.48,7.22,5.19,8.8,47.59,27.97,95.63,55.49,143.68,83.23,2.26,1.35,5.86,2.26,7.89,1.13,11.28-5.86,21.88-12.41,34.06-19.4Z"/>
+  </g>
+  <g>
+    <path class="cls-3" d="M171.05,631.71c0,2.52-.48,4.89-1.45,7.09-.96,2.24-2.29,4.19-3.97,5.83-1.68,1.65-3.63,2.96-5.83,3.92-2.24.96-4.62,1.45-7.14,1.45h-65.52v-14.74h65.52c1,0,1.84-.34,2.52-1.03.68-.68,1.03-1.52,1.03-2.52v-5.69c0-1-.34-1.84-1.03-2.52s-1.52-1.03-2.52-1.03h-47.14c-2.52,0-4.88-.48-7.09-1.45-2.24-.96-4.2-2.29-5.88-3.97-1.68-1.68-3-3.64-3.97-5.88-.96-2.21-1.45-4.57-1.45-7.09v-5.69c0-2.52.48-4.9,1.45-7.14.96-2.21,2.29-4.15,3.97-5.83,1.68-1.68,3.64-3,5.88-3.97,2.21-.96,4.57-1.45,7.09-1.45h65.52v14.84h-65.52c-.99,0-1.84.34-2.52,1.03-.68.68-1.03,1.52-1.03,2.52v5.69c0,1,.34,1.84,1.03,2.52.68.68,1.52,1.03,2.52,1.03h47.14c2.52,0,4.9.48,7.14,1.45,2.21.96,4.15,2.29,5.83,3.97,1.68,1.68,3,3.63,3.97,5.83.96,2.24,1.45,4.62,1.45,7.14v5.69Z"/>
+    <rect class="cls-3" x="184.44" y="580" width="15.41" height="70"/>
+    <polygon class="cls-3" points="383 591.02 383 594 383 608 383 625.08 383 650 449.36 650 449.36 636 397 636 397 625.08 397 622 437.23 622 437.23 608 397 608 397 594 449.36 594 449.36 580 383 580 383 591.02"/>
+    <path class="cls-3" d="M297.13,631.71c0,2.52-.48,4.89-1.45,7.09-.96,2.24-2.29,4.19-3.97,5.83-1.68,1.65-3.63,2.96-5.83,3.92-2.24.96-4.62,1.45-7.14,1.45h-65.52v-14.74h65.52c1,0,1.84-.34,2.52-1.03.68-.68,1.03-1.52,1.03-2.52v-5.69c0-1-.34-1.84-1.03-2.52-.68-.68-1.52-1.03-2.52-1.03h-47.14c-2.52,0-4.88-.48-7.09-1.45-2.24-.96-4.2-2.29-5.88-3.97-1.68-1.68-3-3.64-3.97-5.88-.96-2.21-1.45-4.57-1.45-7.09v-5.69c0-2.52.48-4.9,1.45-7.14.96-2.21,2.29-4.15,3.97-5.83,1.68-1.68,3.64-3,5.88-3.97,2.21-.96,4.57-1.45,7.09-1.45h65.52v14.84h-65.52c-.99,0-1.84.34-2.52,1.03-.68.68-1.03,1.52-1.03,2.52v5.69c0,1,.34,1.84,1.03,2.52.68.68,1.52,1.03,2.52,1.03h47.14c2.52,0,4.9.48,7.14,1.45,2.21.96,4.15,2.29,5.83,3.97,1.68,1.68,3,3.63,3.97,5.83.96,2.24,1.45,4.62,1.45,7.14v5.69Z"/>
+    <path class="cls-3" d="M535.51,650h-14.15v-50.45c0-.56-.09-1.09-.27-1.59-.18-.5-.43-.93-.74-1.31s-.67-.67-1.09-.89c-.41-.22-.85-.33-1.32-.33h-56.41v-15.45h58.23c2.15,0,4.18.5,6.09,1.49,1.91,1,3.59,2.35,5.04,4.06,1.42,1.74,2.55,3.76,3.37,6.07.83,2.3,1.24,4.74,1.24,7.33v51.05ZM481.02,650h-14.15v-49.81h14.15v49.81Z"/>
+    <g>
+      <path class="cls-3" d="M346.84,580h27.63v14.84h-70.02v-14.84h42.39"/>
+      <rect class="cls-3" x="332.04" y="601.05" width="14.84" height="48.95"/>
+    </g>
+    <g>
+      <path class="cls-3" d="M585.22,580h27.63v14.84h-70.02v-14.84h42.39"/>
+      <rect class="cls-3" x="570.42" y="601.05" width="14.84" height="48.95"/>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/images/sistent/stacked/sistent-stacked-white.png b/src/assets/images/sistent/stacked/sistent-stacked-white.png
new file mode 100644
index 000000000000..99af0863a685
Binary files /dev/null and b/src/assets/images/sistent/stacked/sistent-stacked-white.png differ
diff --git a/src/assets/images/sistent/stacked/sistent-stacked-white.svg b/src/assets/images/sistent/stacked/sistent-stacked-white.svg
new file mode 100644
index 000000000000..d13a1f2840b0
--- /dev/null
+++ b/src/assets/images/sistent/stacked/sistent-stacked-white.svg
@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 700">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #fff;
+      }
+
+      .cls-2 {
+        opacity: .8;
+      }
+    </style>
+  </defs>
+  <g>
+    <g class="cls-2">
+      <path class="cls-1" d="M327.57,368.22c11.05,6.32,20.98,11.95,30.68,18.04,4.51,2.93,8.12,2.71,12.86,0,38.8-22.33,77.59-44.21,116.39-66.09,4.51-2.48,5.86-5.64,5.86-10.6-.23-54.58-.23-109.17-.9-163.98,0-3.16-2.71-7.89-5.41-9.47-41.5-24.59-83.46-48.49-125.63-72.63-2.03-1.13-5.41-1.8-6.99-.9-11.28,6.09-22.33,12.41-34.28,19.4,3.83,2.26,6.32,4.06,9.02,5.64,39.7,22.78,79.4,45.79,119.09,68.34,5.19,2.93,7.44,6.09,7.22,12.41,0,39.47.23,78.72.68,118.19,0,6.32-1.8,9.92-7.44,13.08-24.13,13.31-48.04,27.07-72.18,40.6-16.01,9.02-31.8,18.27-48.95,27.97Z"/>
+    </g>
+    <path class="cls-1" d="M423.88,418.75c40.15-22.56,80.07-45.56,119.99-68.57,2.71-1.58,5.19-5.64,5.19-8.57,0-55.26-.23-110.3-.45-165.56,0-2.71-1.8-6.54-3.83-7.89-10.38-6.54-20.98-12.63-33.38-19.85v9.7c.23,52.55.23,105.11.68,157.66,0,7.44-1.8,11.5-8.57,15.11-24.13,13.31-48.04,27.07-71.95,40.83-16.24,9.25-32.48,18.72-49.4,28.42l41.73,18.72Z"/>
+    <g class="cls-2">
+      <path class="cls-1" d="M433.8,272.81c0-12.86.45-24.59-.23-36.09-.23-3.38-2.71-7.89-5.41-9.47-39.25-23.23-78.72-46.24-117.96-68.79-2.48-1.35-6.99-1.58-9.47-.23-48.27,27.29-96.31,54.81-144.35,82.78-2.48,1.58-4.96,5.86-4.96,8.8-.23,47.82,0,95.63.45,143.68,0,2.48.45,6.09,2.03,6.99,11.05,6.99,22.56,13.31,34.96,20.53v-10.6c-.23-45.79-.23-91.57-.68-137.36,0-5.19,1.13-8.57,6.09-11.28,34.96-19.85,69.47-39.7,103.98-59.77,4.74-2.71,8.57-3.16,13.53-.23,25.26,15.11,50.52,29.55,76.01,44.43,14.89,8.8,30,17.37,46.01,26.62Z"/>
+    </g>
+    <g class="cls-2">
+      <path class="cls-1" d="M549.96,366.19c-5.41,2.93-8.57,4.96-11.95,6.77-39.02,22.33-77.82,44.66-116.84,67.22-4.51,2.71-7.89,3.16-12.63.23-34.96-20.53-70.15-40.6-105.33-60.67-4.96-2.71-6.09-6.09-6.09-11.28.23-43.53,0-86.84,0-130.37,0-2.71-.23-5.64-.45-9.7-10.83,6.32-20.53,12.18-30.68,17.37-4.96,2.48-6.32,6.09-6.32,11.28.23,44.66,0,89.32.45,133.75,0,3.16,2.71,7.89,5.41,9.47,47.82,27.97,95.86,55.71,144.13,83.23,2.48,1.58,7.44,1.35,10.15,0,41.73-23.46,83-47.37,124.51-71.5,2.26-1.35,5.19-4.06,5.19-6.09.68-12.41.45-25.04.45-39.7Z"/>
+    </g>
+    <path class="cls-1" d="M434.03,209.88c0-12.86-.23-24.13,0-35.64.23-4.96-1.58-7.89-6.09-10.38-39.7-22.78-79.17-45.79-119.09-68.34-2.71-1.58-8.12-1.58-10.83,0-47.59,26.84-95.18,54.13-142.78,81.65-2.03,1.13-4.96,2.93-4.96,4.51-.45,13.08-.23,26.39-.23,40.83,3.83-2.03,5.86-2.93,7.89-4.06,46.69-26.62,93.15-53.23,139.84-80.07,4.29-2.48,7.44-2.71,11.73-.23,33.83,19.85,68.12,39.47,102.18,59.1,6.99,4.06,13.98,7.89,22.33,12.63Z"/>
+    <path class="cls-1" d="M397.26,497.91c-3.38-2.26-5.41-3.61-7.44-4.74-46.46-26.84-92.93-53.68-139.62-80.3-5.19-2.93-7.44-6.09-7.22-12.18.23-43.76,0-87.52-.23-131.27,0-2.93-.23-6.09-.45-10.15-11.95,6.77-22.33,12.63-32.48,18.95-2.26,1.35-3.83,5.19-3.83,7.67,0,46.01,0,92.25.45,138.26,0,2.93,2.48,7.22,5.19,8.8,47.59,27.97,95.63,55.49,143.68,83.23,2.26,1.35,5.86,2.26,7.89,1.13,11.28-5.86,21.88-12.41,34.06-19.4Z"/>
+  </g>
+  <g>
+    <path class="cls-1" d="M171.05,631.71c0,2.52-.48,4.89-1.45,7.09-.96,2.24-2.29,4.19-3.97,5.83-1.68,1.65-3.63,2.96-5.83,3.92-2.24.96-4.62,1.45-7.14,1.45h-65.52v-14.74h65.52c1,0,1.84-.34,2.52-1.03.68-.68,1.03-1.52,1.03-2.52v-5.69c0-1-.34-1.84-1.03-2.52s-1.52-1.03-2.52-1.03h-47.14c-2.52,0-4.88-.48-7.09-1.45-2.24-.96-4.2-2.29-5.88-3.97-1.68-1.68-3-3.64-3.97-5.88-.96-2.21-1.45-4.57-1.45-7.09v-5.69c0-2.52.48-4.9,1.45-7.14.96-2.21,2.29-4.15,3.97-5.83,1.68-1.68,3.64-3,5.88-3.97,2.21-.96,4.57-1.45,7.09-1.45h65.52v14.84h-65.52c-.99,0-1.84.34-2.52,1.03-.68.68-1.03,1.52-1.03,2.52v5.69c0,1,.34,1.84,1.03,2.52.68.68,1.52,1.03,2.52,1.03h47.14c2.52,0,4.9.48,7.14,1.45,2.21.96,4.15,2.29,5.83,3.97,1.68,1.68,3,3.63,3.97,5.83.96,2.24,1.45,4.62,1.45,7.14v5.69Z"/>
+    <rect class="cls-1" x="184.44" y="580" width="15.41" height="70"/>
+    <polygon class="cls-1" points="383 591.02 383 594 383 608 383 625.08 383 650 449.36 650 449.36 636 397 636 397 625.08 397 622 437.23 622 437.23 608 397 608 397 594 449.36 594 449.36 580 383 580 383 591.02"/>
+    <path class="cls-1" d="M297.13,631.71c0,2.52-.48,4.89-1.45,7.09-.96,2.24-2.29,4.19-3.97,5.83-1.68,1.65-3.63,2.96-5.83,3.92-2.24.96-4.62,1.45-7.14,1.45h-65.52v-14.74h65.52c1,0,1.84-.34,2.52-1.03.68-.68,1.03-1.52,1.03-2.52v-5.69c0-1-.34-1.84-1.03-2.52s-1.52-1.03-2.52-1.03h-47.14c-2.52,0-4.88-.48-7.09-1.45-2.24-.96-4.2-2.29-5.88-3.97-1.68-1.68-3-3.64-3.97-5.88-.96-2.21-1.45-4.57-1.45-7.09v-5.69c0-2.52.48-4.9,1.45-7.14.96-2.21,2.29-4.15,3.97-5.83,1.68-1.68,3.64-3,5.88-3.97,2.21-.96,4.57-1.45,7.09-1.45h65.52v14.84h-65.52c-.99,0-1.84.34-2.52,1.03-.68.68-1.03,1.52-1.03,2.52v5.69c0,1,.34,1.84,1.03,2.52.68.68,1.52,1.03,2.52,1.03h47.14c2.52,0,4.9.48,7.14,1.45,2.21.96,4.15,2.29,5.83,3.97,1.68,1.68,3,3.63,3.97,5.83.96,2.24,1.45,4.62,1.45,7.14v5.69Z"/>
+    <path class="cls-1" d="M535.51,650h-14.15v-50.45c0-.56-.09-1.09-.27-1.59-.18-.5-.43-.93-.74-1.31s-.67-.67-1.09-.89c-.41-.22-.85-.33-1.32-.33h-56.41v-15.45h58.23c2.15,0,4.18.5,6.09,1.49,1.91,1,3.59,2.35,5.04,4.06,1.42,1.74,2.55,3.76,3.37,6.07.83,2.3,1.24,4.74,1.24,7.33v51.05ZM481.02,650h-14.15v-49.81h14.15v49.81Z"/>
+    <g>
+      <path class="cls-1" d="M346.84,580h27.63v14.84h-70.02v-14.84h42.39"/>
+      <rect class="cls-1" x="332.04" y="601.05" width="14.84" height="48.95"/>
+    </g>
+    <g>
+      <path class="cls-1" d="M585.22,580h27.63v14.84h-70.02v-14.84h42.39"/>
+      <rect class="cls-1" x="570.42" y="601.05" width="14.84" height="48.95"/>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/images/sistent/text-only/sistent-text-color.png b/src/assets/images/sistent/text-only/sistent-text-color.png
new file mode 100644
index 000000000000..4cb815785fa2
Binary files /dev/null and b/src/assets/images/sistent/text-only/sistent-text-color.png differ
diff --git a/src/assets/images/sistent/text-only/sistent-text-color.svg b/src/assets/images/sistent/text-only/sistent-text-color.svg
new file mode 100644
index 000000000000..ebc04fdc1f48
--- /dev/null
+++ b/src/assets/images/sistent/text-only/sistent-text-color.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2031.87 370.33">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #3c494f;
+      }
+    </style>
+  </defs>
+  <path class="cls-1" d="M347.11,246.89c0,9.36-1.79,18.15-5.37,26.35-3.58,8.32-8.49,15.55-14.73,21.66-6.25,6.14-13.47,10.99-21.67,14.57-8.32,3.58-17.16,5.37-26.52,5.37H35.46v-54.77h243.35c3.7,0,6.82-1.28,9.36-3.82,2.54-2.54,3.81-5.66,3.81-9.36v-21.14c0-3.7-1.26-6.82-3.81-9.36-2.54-2.54-5.66-3.81-9.36-3.81H103.74c-9.35,0-18.13-1.79-26.34-5.37-8.32-3.58-15.61-8.5-21.84-14.73-6.25-6.25-11.15-13.53-14.73-21.84-3.58-8.22-5.37-16.99-5.37-26.35v-21.14c0-9.36,1.79-18.21,5.37-26.52,3.58-8.22,8.49-15.43,14.73-21.67,6.23-6.25,13.51-11.15,21.84-14.73,8.2-3.58,16.99-5.37,26.34-5.37h243.37v55.11H103.74c-3.69,0-6.82,1.28-9.35,3.82-2.54,2.54-3.82,5.66-3.82,9.36v21.14c0,3.7,1.28,6.82,3.82,9.36,2.53,2.54,5.66,3.81,9.35,3.81h175.07c9.36,0,18.2,1.79,26.52,5.37,8.2,3.58,15.43,8.5,21.67,14.73,6.25,6.25,11.15,13.47,14.73,21.67,3.58,8.32,5.37,17.16,5.37,26.52v21.14Z"/>
+  <rect class="cls-1" x="396.82" y="54.84" width="57.22" height="260"/>
+  <polygon class="cls-1" points="1134.35 95.78 1134.35 106.84 1134.35 158.84 1134.35 222.26 1134.35 314.84 1380.83 314.84 1380.83 262.84 1186.35 262.84 1186.35 222.26 1186.35 210.84 1335.76 210.84 1335.76 158.84 1186.35 158.84 1186.35 106.84 1380.83 106.84 1380.83 54.84 1134.35 54.84 1134.35 95.78"/>
+  <path class="cls-1" d="M815.4,246.89c0,9.36-1.79,18.15-5.37,26.35-3.58,8.32-8.49,15.55-14.73,21.66-6.25,6.14-13.47,10.99-21.67,14.57-8.32,3.58-17.16,5.37-26.52,5.37h-243.35v-54.77h243.35c3.7,0,6.82-1.28,9.36-3.82,2.54-2.54,3.81-5.66,3.81-9.36v-21.14c0-3.7-1.26-6.82-3.81-9.36-2.54-2.54-5.66-3.81-9.36-3.81h-175.07c-9.35,0-18.13-1.79-26.34-5.37-8.32-3.58-15.61-8.5-21.84-14.73-6.25-6.25-11.15-13.53-14.73-21.84-3.58-8.22-5.37-16.99-5.37-26.35v-21.14c0-9.36,1.79-18.21,5.37-26.52,3.58-8.22,8.49-15.43,14.73-21.67,6.23-6.25,13.51-11.15,21.84-14.73,8.2-3.58,16.99-5.37,26.34-5.37h243.37v55.11h-243.37c-3.69,0-6.82,1.28-9.35,3.82-2.54,2.54-3.82,5.66-3.82,9.36v21.14c0,3.7,1.28,6.82,3.82,9.36,2.53,2.54,5.66,3.81,9.35,3.81h175.07c9.36,0,18.2,1.79,26.52,5.37,8.2,3.58,15.43,8.5,21.67,14.73,6.25,6.25,11.15,13.47,14.73,21.67,3.58,8.32,5.37,17.16,5.37,26.52v21.14Z"/>
+  <path class="cls-1" d="M1700.83,314.84h-52.57V127.46c0-2.08-.34-4.04-1.01-5.9-.67-1.85-1.58-3.46-2.73-4.85-1.16-1.39-2.5-2.48-4.04-3.3-1.54-.81-3.17-1.21-4.9-1.21h-209.54v-57.37h216.29c7.98,0,15.51,1.85,22.62,5.54,7.1,3.7,13.35,8.72,18.73,15.08,5.28,6.47,9.45,13.98,12.53,22.54,3.07,8.55,4.61,17.62,4.61,27.21v189.63ZM1498.4,314.84h-52.57v-185.01h52.57v185.01Z"/>
+  <g>
+    <path class="cls-1" d="M1000.02,54.84h102.64v55.12h-260.07v-55.12h157.44"/>
+    <rect class="cls-1" x="945.06" y="133.04" width="55.14" height="181.8"/>
+  </g>
+  <g>
+    <path class="cls-1" d="M1885.45,54.84h102.64v55.12h-260.07v-55.12h157.44"/>
+    <rect class="cls-1" x="1830.49" y="133.04" width="55.14" height="181.8"/>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/images/sistent/text-only/sistent-text-white.png b/src/assets/images/sistent/text-only/sistent-text-white.png
new file mode 100644
index 000000000000..2ed56ca87fab
Binary files /dev/null and b/src/assets/images/sistent/text-only/sistent-text-white.png differ
diff --git a/src/assets/images/sistent/text-only/sistent-text-white.svg b/src/assets/images/sistent/text-only/sistent-text-white.svg
new file mode 100644
index 000000000000..857f62a10890
--- /dev/null
+++ b/src/assets/images/sistent/text-only/sistent-text-white.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2031.87 370.33">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #fff;
+      }
+    </style>
+  </defs>
+  <path class="cls-1" d="M347.11,246.89c0,9.36-1.79,18.15-5.37,26.35-3.58,8.32-8.49,15.55-14.73,21.66-6.25,6.14-13.47,10.99-21.67,14.57-8.32,3.58-17.16,5.37-26.52,5.37H35.46v-54.77h243.35c3.7,0,6.82-1.28,9.36-3.82,2.54-2.54,3.81-5.66,3.81-9.36v-21.14c0-3.7-1.26-6.82-3.81-9.36-2.54-2.54-5.66-3.81-9.36-3.81H103.74c-9.35,0-18.13-1.79-26.34-5.37-8.32-3.58-15.61-8.5-21.84-14.73-6.25-6.25-11.15-13.53-14.73-21.84-3.58-8.22-5.37-16.99-5.37-26.35v-21.14c0-9.36,1.79-18.21,5.37-26.52,3.58-8.22,8.49-15.43,14.73-21.67,6.23-6.25,13.51-11.15,21.84-14.73,8.2-3.58,16.99-5.37,26.34-5.37h243.37v55.11H103.74c-3.69,0-6.82,1.28-9.35,3.82-2.54,2.54-3.82,5.66-3.82,9.36v21.14c0,3.7,1.28,6.82,3.82,9.36,2.53,2.54,5.66,3.81,9.35,3.81h175.07c9.36,0,18.2,1.79,26.52,5.37,8.2,3.58,15.43,8.5,21.67,14.73,6.25,6.25,11.15,13.47,14.73,21.67,3.58,8.32,5.37,17.16,5.37,26.52v21.14Z"/>
+  <rect class="cls-1" x="396.82" y="54.84" width="57.22" height="260"/>
+  <polygon class="cls-1" points="1134.35 95.78 1134.35 106.84 1134.35 158.84 1134.35 222.26 1134.35 314.84 1380.83 314.84 1380.83 262.84 1186.35 262.84 1186.35 222.26 1186.35 210.84 1335.76 210.84 1335.76 158.84 1186.35 158.84 1186.35 106.84 1380.83 106.84 1380.83 54.84 1134.35 54.84 1134.35 95.78"/>
+  <path class="cls-1" d="M815.4,246.89c0,9.36-1.79,18.15-5.37,26.35-3.58,8.32-8.49,15.55-14.73,21.66-6.25,6.14-13.47,10.99-21.67,14.57-8.32,3.58-17.16,5.37-26.52,5.37h-243.35v-54.77h243.35c3.7,0,6.82-1.28,9.36-3.82,2.54-2.54,3.81-5.66,3.81-9.36v-21.14c0-3.7-1.26-6.82-3.81-9.36-2.54-2.54-5.66-3.81-9.36-3.81h-175.07c-9.35,0-18.13-1.79-26.34-5.37-8.32-3.58-15.61-8.5-21.84-14.73-6.25-6.25-11.15-13.53-14.73-21.84-3.58-8.22-5.37-16.99-5.37-26.35v-21.14c0-9.36,1.79-18.21,5.37-26.52,3.58-8.22,8.49-15.43,14.73-21.67,6.23-6.25,13.51-11.15,21.84-14.73,8.2-3.58,16.99-5.37,26.34-5.37h243.37v55.11h-243.37c-3.69,0-6.82,1.28-9.35,3.82-2.54,2.54-3.82,5.66-3.82,9.36v21.14c0,3.7,1.28,6.82,3.82,9.36,2.53,2.54,5.66,3.81,9.35,3.81h175.07c9.36,0,18.2,1.79,26.52,5.37,8.2,3.58,15.43,8.5,21.67,14.73,6.25,6.25,11.15,13.47,14.73,21.67,3.58,8.32,5.37,17.16,5.37,26.52v21.14Z"/>
+  <path class="cls-1" d="M1700.83,314.84h-52.57V127.46c0-2.08-.34-4.04-1.01-5.9-.67-1.85-1.58-3.46-2.73-4.85-1.16-1.39-2.5-2.48-4.04-3.3-1.54-.81-3.17-1.21-4.9-1.21h-209.54v-57.37h216.29c7.98,0,15.51,1.85,22.62,5.54,7.1,3.7,13.35,8.72,18.73,15.08,5.28,6.47,9.45,13.98,12.53,22.54,3.07,8.55,4.61,17.62,4.61,27.21v189.63ZM1498.4,314.84h-52.57v-185.01h52.57v185.01Z"/>
+  <g>
+    <path class="cls-1" d="M1000.02,54.84h102.64v55.12h-260.07v-55.12h157.44"/>
+    <rect class="cls-1" x="945.06" y="133.04" width="55.14" height="181.8"/>
+  </g>
+  <g>
+    <path class="cls-1" d="M1885.45,54.84h102.64v55.12h-260.07v-55.12h157.44"/>
+    <rect class="cls-1" x="1830.49" y="133.04" width="55.14" height="181.8"/>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/src/collections/blog/2021/2021-02-07-meshkit-and-meshery-adapter-library/index.mdx b/src/collections/blog/2021/2021-02-07-meshkit-and-meshery-adapter-library/index.mdx
index 0e4792e186ba..f5810c35b758 100644
--- a/src/collections/blog/2021/2021-02-07-meshkit-and-meshery-adapter-library/index.mdx
+++ b/src/collections/blog/2021/2021-02-07-meshkit-and-meshery-adapter-library/index.mdx
@@ -1,6 +1,6 @@
 ---
 title: "Introducing Meshkit and the Meshery Adapter Library"
-subtitle: "Making the DX of service mesh management easy."
+subtitle: "Making the DX of cloud native infrastructure management easy."
 date: 2021-02-07 12:12:12 +0002
 author: Michael Gfeller
 thumbnail: ./meshery-adapter-library-overview.webp
@@ -28,18 +28,18 @@ import malOverview from "./meshery-adapter-library-overview.webp";
 
 <div class="intro"><p>The Meshery v0.5.0 release includes two new libraries: <span>MeshKit</span> and <span>Meshery Adapter Library</span>.
 
-These two libraries improve contributor experience and development speed by reducing the burden of sustaining the plethora of Meshery adapters, allowing contributors to focus on exposing a service mesh's differentiated value,
-instead of having to redundantly implement plumbing for managing service meshes.
+These two libraries improve contributor experience and development speed by reducing the burden of sustaining the plethora of Meshery adapters, allowing contributors to focus on exposing any given infrastructure component's differentiated value,
+instead of having to redundantly implement plumbing for managing cloud native infrastructure.
 
 </p></div>
 
 ## MeshKit
 
-MeshKit was formerly named `gokit` and was renamed recently to align with the other Meshery components' names (and avoid confusion with the `go-kit` project). MeshKit can be considered a derivative of `go-kit` with specific focus on service mesh management.
+MeshKit was formerly named `gokit` and was renamed recently to align with the other Meshery components' names (and avoid confusion with the `go-kit` project). MeshKit can be considered a derivative of `go-kit` with specific focus on cloud native management.
 
 In the Meshery v0.5.0 release, MeshKit has been enhanced and expanded substantially. Considering that the MeshKit library provides broadly useful functionality, it is used in a growing number of Meshery components. It is intended to be one of the top level libraries in the Meshery ecosystem. <div class="fact">Meshkit provides functionality useful across all Meshery components.</div>
 
-MeshKit is a toolkit for Layer5’s microservices, and is positioned to become Layer5’s middleware component for Layer5’s microservices, leveraging other libraries like `go-kit/kit`. In complement to functionality provided by a service mesh, its purpose is to provide implementations for common cross-cutting concerns like error handling, logging, and tracing. Uniform error handling and logging across all Meshery components helps to implement efficient tooling for observability, monitoring and troubleshooting. The library provides some common data models for Meshery, notably for <Link to="/smi">Service Mesh Interface conformance testing</Link>, and Kubernetes' `kubeconfig`.
+MeshKit is a toolkit for Layer5’s microservices, and is positioned to become Layer5’s middleware component for Layer5’s microservices, leveraging other libraries like `go-kit/kit`. In complement to functionality provided by any given cloud native infrastructure component, its purpose is to provide implementations for common cross-cutting concerns like error handling, logging, and tracing. Uniform error handling and logging across all Meshery components helps to implement efficient tooling for observability, monitoring and troubleshooting. The library provides some common data models for Meshery and Meshery's <a href="https://meshery.io/extensions">ecosystem of extensions</a>.
 
 Another central component in Meshkit is the `utils` package.
 
@@ -130,7 +130,7 @@ spec:
 
 ## Meshery Adapters
 
-Meshery adapters are management plane components and manage the lifecycle of service meshes. This includes installation and deletion, configuration, and verification that an installation follows recommended practices. In addition, Meshery adapters can assess to what extent a service mesh complies to the <Link to="/blog/announcements/a-standard-interface-for-service-meshes">Service Mesh Interface standard</Link>. Meshery adapters support management of multiple versions of their respective service mesh and also come bundled with sample applications that can be deployed for easy and quick exploration of service mesh capabilities. <div class="fact">Meshery adapters manage the lifecycle of service meshes.</div>
+Meshery adapters are management plane components and manage the lifecycle of cloud native infra. This includes installation and deletion, configuration, and verification that an installation follows recommended practices. As example use of Meshery adapters is for purposes of compliance verification, actively attesting whether whether infrastructure complies to an open standard, like that of <Link to="/blog/announcements/a-standard-interface-for-service-meshes">Service Mesh Interface</Link>. Meshery adapters support management of multiple versions of their respective capabilites and also come bundled with sample applications that can be deployed for easy and quick exploration of infrastructure (or other) capabilities. <div class="fact">Meshery adapters extend Meshery's core functionality housed within Meshery Server, often deepening Meshery's ability to manage the lifecycle infratructure, but not limited to those use cases. Adapters have been known to act as engineering workflow facilititors, providing gate reviews, sending emails, and so on.</div>
 
 A Meshery adapter is a gRPC server that exposes the `MeshServiceServer` interface:
 
@@ -145,15 +145,15 @@ type MeshServiceServer interface {
 }
 ```
 
-- `CreateMeshInstance` sets up the Kubernetes client. It does not, as the name might imply, create an instance of a service mesh.
-- `MeshName` returns the name of the mesh, configured in the adapter.
-- `SupportedOperations` returns all supported operations, configured in the adapter. An operation is e.g. the installation of a service mesh.
+- `CreateInstance` sets up the Kubernetes client. It does not, as the name might imply, create an instance of an infrastructure component.
+- `Name` returns the name of the infrastructure component, configured in the adapter.
+- `SupportedOperations` returns all supported operations, configured in the adapter. An operation is e.g. the installation of any given cloud native infrastructure component or service.
 - `ApplyOperation` executes the operation specified in the request. It is one of the supported operations.
 - `StreamEvents` allows sending events from the server to the client.
 
-This API is one of the extension points of Meshery, making it easy to add support for new service meshes to Meshery. Meshery adapters abstract away differences in installation and configuration of the various service meshes.<div class="fact">Adapters allow Meshery to interface with the different service meshes, exposing their differentiated value to users.</div>
+This API is one of the extension points of Meshery, making it easy to add support for new cloud native technologies to Meshery. Meshery adapters abstract away differences in installation and configuration of the various technologies. Various cloud native technologies are installed and configured in their own way. For instance, some projects have their own installer, like `istioctl` for Istio, while others use Helm charts, like Consul. One of the purposes of Meshery adapters is to abstract these differences away. <div class="fact">It's important to note, however, that Meshery Adapters allow Meshery to interface with each managed system uniquely, and not treat those systems uniformly by only offering the lowest common denominator of functionality, but instead by exposing that system's differentiated value to users.</div>
+
 
-In general, the various service mesh implementations are installed and configured in their own way. For instance, some service meshes have their own installer, like `istioctl` for Istio, while others use Helm charts, like Consul. One of the purposes of Meshery adapters is to abstract these differences away.
 
 ## Meshery Adapter Library
 
@@ -168,7 +168,7 @@ Also, it means new adapters can be implemented quickly, as only configuration an
 <div class="fact">
   The Meshery Adapter Library provides a common and consistent set of
   functionality that Meshery adapters use for managing the lifecycle of
-  service meshes and their workloads.
+  cloud infrastructure and their workloads.
 </div>
 
 The initial commit was submitted on October 6th, 2020 based on a refactoring effort in the adapter for the Kuma service mesh. Within a few months, several adapters have been refactored or implemented from scratch based on the Meshery Adapter Library.
@@ -224,7 +224,7 @@ The `service` is a struct that holds all the parameters that specify an adapter
 Extracting common code from adapters to the two new libraries has proven to be a worthwhile investment. It led to cleaner code as well as cleaner application architecture, shortened implementation time for new adapters considerably, and upleveled the quality of Meshery's adapters through consistency of implementation.
 
 
-<div class="intro"><p>P.S. If these topics excite you and you want to explore the beautiful realm of service meshes, come and say "Hi" on the community <Link to="http://slack.layer5.io">Slack</Link> and you are sure to be warmly welcomed. <span>😀</span></p></div>
+<div class="intro"><p>P.S. If these topics excite you and you want to explore the beautiful realm of cloud native infrastructure, come and say "Hi" on the community <Link to="http://slack.layer5.io">Slack</Link> and you are sure to be warmly welcomed. <span>😀</span></p></div>
 
 </MeshkitMesheryAdapterLib>
 </BlogWrapper>
diff --git a/src/collections/blog/2022/2022-06-08-experience-lfx-pranav-singh/index.mdx b/src/collections/blog/2022/2022-06-08-experience-lfx-pranav-singh/index.mdx
index ffec6abb20f9..5c188d25e8ce 100644
--- a/src/collections/blog/2022/2022-06-08-experience-lfx-pranav-singh/index.mdx
+++ b/src/collections/blog/2022/2022-06-08-experience-lfx-pranav-singh/index.mdx
@@ -30,7 +30,7 @@ more excited by the enthusiasm and energy of each community members welcoming me
 learned about the project through the demos/updates from fellow contributors. Slowly and gradually, I started contributing too, then delivering updates in the 
 community calls, and consequently started climbing the contributor ladder.
 
-When I realised that I would be working on [Layer5 Cloud](https://meshery.layer5.io) and <Link to="/cloud-native-management/meshery">Meshery</Link> as an LFX intern at Layer5, then I couldn't control my excitement. 
+When I realised that I would be working on [Layer5 Cloud](https://cloud.layer5.io) and <Link to="/cloud-native-management/meshery">Meshery</Link> as an LFX intern at Layer5, then I couldn't control my excitement. 
 That excitement was to ship more impactful features for the Layer5 projects, work and engage more deeply with the engineering team at Layer5 and have an overall 
 upliftment of my development skills.  Throughout my internship I worked on several features. Few on the top of the list are as follows, expanding 
 [Meshery extension points](https://docs.meshery.io/extensibility), exposing node details of the K8s clusters on which Meshery runs <Link to="/projects/cloud-native-performance">performance tests</Link>, 
diff --git a/src/collections/blog/2023/2023-09-05-unlocking-the-power-of-webassembly-in-service-mesh-management/index.mdx b/src/collections/blog/2023/2023-09-05-unlocking-the-power-of-webassembly-in-service-mesh-management/index.mdx
index 7d44ff951180..03b94ee34678 100644
--- a/src/collections/blog/2023/2023-09-05-unlocking-the-power-of-webassembly-in-service-mesh-management/index.mdx
+++ b/src/collections/blog/2023/2023-09-05-unlocking-the-power-of-webassembly-in-service-mesh-management/index.mdx
@@ -32,7 +32,7 @@ With this collaboration, we're introducing powerful features that simplify the m
 ### Meshery UI and CLI Integration
 - **Import WASM Envoy Filters**: Easily import your WebAssembly Envoy filters into Meshery using the intuitive UI or the command-line interface ([CLI](https://docs.meshery.io/reference/mesheryctl#data-plane-intelligence)).
 - **Publish and Clone Filters**: Share your filters with the community by publishing them in the [Meshery Catalog](https://meshery.io/catalog) and make it effortless for others to clone them.
-- **Download WASM Binaries**: Access and download WebAssembly binaries directly from [Meshery Cloud](https://meshery.layer5.io/).
+- **Download WASM Binaries**: Access and download WebAssembly binaries directly from [Meshery Cloud](https://cloud.layer5.io/).
 - **Efficient Data Plane Design**: Seamlessly design and deploy Istio and Envoy data planes using [MeshMap](https://layer5.io/cloud-native-management/meshmap).
 - **Contribute to Open Source**: Get involved with the service mesh community by contributing to any of the 7 open-source [wasm-filters](https://github.com/layer5io/wasm-filters) developed by Layer5.
 
diff --git a/src/collections/blog/2024/09-27-meet-the-maintainer-aisuko-li/aisuko-li-layer5-maintainer.png b/src/collections/blog/2024/09-27-meet-the-maintainer-aisuko-li/aisuko-li-layer5-maintainer.png
new file mode 100644
index 000000000000..cbbd6a1ef086
Binary files /dev/null and b/src/collections/blog/2024/09-27-meet-the-maintainer-aisuko-li/aisuko-li-layer5-maintainer.png differ
diff --git a/src/collections/blog/2024/09-27-meet-the-maintainer-aisuko-li/post.mdx b/src/collections/blog/2024/09-27-meet-the-maintainer-aisuko-li/post.mdx
new file mode 100644
index 000000000000..1d07776600b4
--- /dev/null
+++ b/src/collections/blog/2024/09-27-meet-the-maintainer-aisuko-li/post.mdx
@@ -0,0 +1,279 @@
+---
+title: "Meet the Maintainer: Aisuko Li"
+subtitle: "An interview series with open source maintainers"
+date: 2024-09-27 10:30:05 -0530
+author: Anita Ihuman
+thumbnail: ./aisuko-li-layer5-maintainer.png
+darkthumbnail: ./aisuko-li-layer5-maintainer.png
+description: Meet the Maintainer series with open source maintainer, Aisuko Li
+type: Blog
+category: Open Source
+tags:
+  - Open Source
+featured: false
+published: true
+---
+
+import { BlogWrapper } from "../../Blog.style.js";
+import img from "./aisuko-li-layer5-maintainer.png";
+import { MeetTheMaintainer } from "../../MeetTheMaintainer.style.js";
+import { Link } from "gatsby";
+import ForkLift from "../../../../assets/images/app/hero/forklift.svg";
+
+<BlogWrapper>
+<MeetTheMaintainer>
+
+<div class="intro">
+  <p>
+    Continuing in our Meet the Maintainer series, we have{" "}
+    <Link to="/community/members/aisuko-li">Aisuko Li</Link>. Aisuko is a
+    maintainer of the{" "}
+    <Link to="/cloud-native-management/meshery"> Meshery Adapters</Link>{" "}
+    project. In this interview, we get to know Aisuko a little better and learn
+    about his journey as an open source project maintainer and with Layer5
+    community.
+  </p>
+</div>
+
+<div class="interviewer">
+  <span>Anita:</span>
+  <p>
+    Aisuko, thank you for joining me today. Many people inside and outside of
+    the Layer5 Community have seen the effects of your contributions, but may
+    not know the backstory as to who Aisuko is and how you arrived at your
+    maintainer role. Indulge us. How did you discover the Layer5 community? What
+    made you stay?
+  </p>
+</div>
+
+<div class="interviewee">
+  <span>Aisuko:</span>
+  <p>
+    Thanks for having me here. Actually, Aisuko is my code name. My real name is Bowen Li. I love both of 
+    I used to work for RancherLabs for a while, and I worked to maintain the official Helm (a third-party management tool for Kubernetes manifests) charts repo. These experiences helped me contribute to creating and maintaining Meshery Helm charts.
+    <br />
+    I like open source software, and I love contributing to the community.
+    The more you contribute, the more permission you get to help the
+    community grow and improve.
+    <br />
+    The Layer5 community is a true open source community. Everyone here can find
+    a comfortable role. I have been here since 2019 (a long time ago). I’ve seen
+    new members join and some leave. It's great to see people work together without
+    any other conditions. This is one of the ways I have fun.
+  </p>
+</div>
+
+<div class="interviewer">
+  <span>Anita:</span>
+  <p>
+    You’ve been consistently contributing to a large number of Layer5 projects
+    (Meshery adapters, mesheryctl, SMI, SMP). Layer5 has a large collection of
+    active projects. Which one are you currently focusing on? <i>Psst.</i> Also,
+    which one’s your favorite? I won’t tell.
+  </p>
+</div>
+
+<div class="interviewee">
+  <span>Aisuko:</span>
+  <p>
+    Actually, the Meshery project in 2021-2022 has changed a lot. More skilled and
+    talented contributors joined the community. They are so professional and
+    active, and their hard work has made Meshery more powerful than before. For
+    instance, projects like `meshkit` and `meshsync` have grown significantly.
+    It’s great to have such a strong team working together.
+    <br />
+    Right now, I am primarily focusing on the `meshery-operator` project and
+    `meshery-linkerd`, along with fixing bugs across all the projects. I always
+    aim to make all the projects more controllable and maintain high code quality.
+  </p>
+</div>
+
+<div class="interviewer">
+  <span>Anita:</span>
+  <p>
+    Have you worked with any other open source projects? How does Layer5 compare?
+  </p>
+</div>
+
+<div class="interviewee">
+  <span>Aisuko:</span>
+  <p>
+    I was active in the Rancher community and the Helm charts project, where I owned
+    three charts. I’m also still a maintainer of the GNU Hurd. Recently, I’ve been
+    working on contributions to Kubernetes community projects as well.
+    <br />
+    Compared to the Layer5 community, the Kubernetes community is much larger. 
+    Many members are not very active, so it can be difficult to get feedback 
+    on PRs and issues from inactive members.
+    <br />
+    The GNU Hurd project is unique, so there’s no need to compare it with others.
+    In the Layer5 community, we have a warm welcome for new contributors, and most
+    projects have active reviewers who provide feedback quickly.
+  </p>
+</div>
+
+<div class="interviewer">
+  <span>Anita:</span>
+  <p>Fascinating. Why did you pick service meshes specifically, though?</p>
+</div>
+
+<div class="interviewee">
+  <span>Aisuko:</span>
+  <p>
+    I have worked with many middle- and small-sized companies that wanted to migrate
+    to the cloud. It’s easy to move to Kubernetes, but it’s hard to ensure everything
+    runs smoothly. You have limited visibility into what’s happening in the cluster,
+    and service mesh solves that problem by showing real-time traffic.
+    <br />
+    Service mesh provides direct insights into traffic flows, which is its most useful feature.
+  </p>
+</div>
+
+<div class="interviewer">
+  <span>Anita:</span>
+  <p>
+    Haha. Leading on from that, what should Meshery dream about next? What can we hope
+    to contribute to the service mesh landscape in your opinion?
+  </p>
+</div>
+
+<div class="interviewee">
+  <span>Aisuko:</span>
+  <p>
+    I once talked to Lee, the founder of Layer5. Due to time zone differences, we don’t
+    get many chances to discuss things directly. But I believe we don’t need to create
+    a new service mesh.
+    <br />
+    What we should do is provide third-party performance tools for existing service
+    mesh projects. We should give the choice back to the users, letting them pick the
+    service mesh that best suits their needs.
+    <br />
+    We should contribute to SMI and CNCF projects, helping to define performance standards
+    for the cloud-native industry. That’s why I’m keen on joining these communities.
+  </p>
+</div>
+
+<div class="interviewer">
+  <span>Anita:</span>
+  <p>
+    Interesting. Do expand on that. What do you think Meshery could offer, in addition to what it already does?
+  </p>
+</div>
+
+<div class="interviewee">
+  <span>Aisuko:</span>
+  <p>
+    I believe we can offer a CNCF-standard performance tool for all service mesh
+    applications. We can collaborate with service mesh maintainers to define these
+    standards, which would be beneficial for end-users. It’s similar to what we did
+    with SMI.
+  </p>
+</div>
+
+<div class="interviewer">
+  <span>Anita:</span>
+  <p>What are today's challenges when working with service meshes?</p>
+</div>
+
+<div class="interviewee">
+  <span>Aisuko:</span>
+  <p>
+    Even though service mesh has many features, it's still not always stable in production.
+    I remember that even Istio (v1.1x) couldn’t be upgraded to newer versions easily.
+    <br />
+    Additionally, we don’t often get test results from real production environments.
+    Right now, the focus is on multi-cluster service mesh capabilities, which brings
+    new challenges.
+  </p>
+</div>
+
+<div class="interviewer">
+  <span>Anita:</span>
+  <p>
+    That’s good to hear. What do you think we should look forward to with respect to service mesh development?
+  </p>
+</div>
+
+<div class="interviewee">
+  <span>Aisuko:</span>
+  <p>
+    I’ve worked with service mesh applications like Linkerd2, Istio, and OSM in development environments. OSM is my preference because it’s modular and has a simpler architecture compared to others.
+    <br />
+    From my experience, I believe that not all environments need all the features of a service mesh. Some middle or small companies may only need visibility into traffic flows without complex features like mTLS.
+    <br />
+    So, we should focus on simple architecture and features. For example, integrating traffic visualization with Ingress, so users don’t need to create new custom resources to track traffic.
+  </p>
+</div>
+
+<div class="interviewer">
+  <span>Anita:</span>
+  <p>
+    Ah, while I have you here, let me get more reading recommendations lined up.
+    Cloud Native and especially the field of service meshes is evolving
+    exceptionally fast. Keeping up with all the developments can be challenging.
+    Which resources do you use to stay up-to-date?
+  </p>
+</div>
+
+<div class="interviewee">
+  <span>Aisuko:</span>
+  <p>
+    People are always interested in new technology, but we are limited by time. I believe
+    that continuing to contribute to the service mesh open source community is the best way
+    to stay updated.
+    <br />
+    Articles and news may include the author’s personal opinions, and we don't always know
+    if they have strong relationships with the community. We should maintain critical thinking
+    and focus on solving real-world problems. The best way to learn is through hands-on experience.
+  </p>
+</div>
+
+<div class="interviewer">
+  <span>Anita:</span>
+  <p>
+    What does being a Meshery maintainer mean to you? How has being a maintainer impacted your full-time role?
+  </p>
+</div>
+
+<div class="interviewee">
+  <span>Aisuko:</span>
+  <p>
+    It’s an honor to be a maintainer of the Meshery community. The membership
+    is a reward for contributing to the community. Being a maintainer has made me
+    more enthusiastic about contributing to open source projects. It has also given
+    me confidence to contribute to other projects.
+  </p>
+</div>
+
+<div class="interviewer">
+  <span>Anita:</span>
+  <p>
+    Do you have any advice for individuals hoping to become Layer5 contributors
+    or potentially maintainers?
+  </p>
+</div>
+
+<div class="interviewee">
+  <span>Aisuko:</span>
+  <p>
+    The Layer5 and Meshery communities are always welcoming to everyone.
+    New features are great, but there’s more to contributing than just code.
+    For example, writing unit tests and code comments is just as important as
+    adding new features.
+    <br />
+    One of our goals is to provide an opportunity for everyone who wants to contribute
+    to open source projects, so we need to maintain a high level of code quality.
+  </p>
+</div>
+
+<div class="note">
+  <img src={ForkLift} height="100px" />
+  <p>
+    The Meshery project moves at an impressive pace thanks to maintainers like
+    Aisuko. Be like Aisuko. Join the{" "}
+    <a href="https://slack.layer5.io">Layer5 Slack</a> and say “hi".
+  </p>
+</div>
+
+</MeetTheMaintainer>
+</BlogWrapper>
diff --git a/src/collections/blog/2024/10-22-meet-the-maintainer-aadhitya-amarendiran/aadhitya-amarendiran-layer5-maintainer.png b/src/collections/blog/2024/10-22-meet-the-maintainer-aadhitya-amarendiran/aadhitya-amarendiran-layer5-maintainer.png
new file mode 100644
index 000000000000..8fa9efbe6df3
Binary files /dev/null and b/src/collections/blog/2024/10-22-meet-the-maintainer-aadhitya-amarendiran/aadhitya-amarendiran-layer5-maintainer.png differ
diff --git a/src/collections/blog/2024/10-22-meet-the-maintainer-aadhitya-amarendiran/post.mdx b/src/collections/blog/2024/10-22-meet-the-maintainer-aadhitya-amarendiran/post.mdx
new file mode 100644
index 000000000000..4c1d851741be
--- /dev/null
+++ b/src/collections/blog/2024/10-22-meet-the-maintainer-aadhitya-amarendiran/post.mdx
@@ -0,0 +1,197 @@
+---
+title: "Meet the Maintainer: Aadhitya Amarendiran"
+subtitle: "An interview series with open source maintainers"
+date: 2024-09-08 10:30:05 -0530
+author: Vivek Vishal
+thumbnail: ./aadhitya-amarendiran-layer5-maintainer.png
+darkthumbnail: ./aadhitya-amarendiran-layer5-maintainer.png
+description: Meet the Maintainer series with open source maintainer, Aadhitya Amarendiran
+type: Blog
+category: Open Source
+tags:
+  - Open Source
+featured: false
+published: true
+---
+
+import { BlogWrapper } from "../../Blog.style.js";
+import img from "./aadhitya-amarendiran-layer5-maintainer.png";
+import { MeetTheMaintainer } from "../../MeetTheMaintainer.style.js";
+import { Link } from "gatsby";
+import ForkLift from "../../../../assets/images/app/hero/forklift.svg";
+
+<BlogWrapper>
+<MeetTheMaintainer>
+
+<div class="intro">
+  <p>
+    Continuing in our Meet the Maintainer series, we have{" "}
+    <Link to="/community/members/aadhitya-amarendiran">Aadhitya Amarendiran</Link>. Aadhitya
+    is a maintainer of the{" "}
+    <Link to="/cloud-native-management/meshery"> Meshery CLI</Link> project. In
+    this interview, we get to know Aadhitya a little better and learn about his
+    journey as an open source project maintainer and with Layer5 community.
+  </p>
+</div>
+
+<div class="interviewer">
+  <span>Vivek:</span>
+  <p>
+    Aadhitya, thank you for joining me today. Many people inside and outside of the Layer5 Community have seen the effects of your contributions, but may not know the backstory as to who Aadhitya is and how you arrived at your maintainer role. Indulge us. How did you discover the Layer5 community? What made you stay?
+  </p>
+</div>
+
+<div class="interviewee">
+  <span>Aadhitya:</span>
+  <p>
+    It was around the year 2020 when I was a sophomore and explored many things in the field of open source. I got to know about Meshery via the LFX program and tried applying for it, though I was a newcomer at that time. Later, I learned more about Layer5, started attending the community call, and met the community. The community members helped me a lot wherever I got stuck as a newcomer, which made me learn new things and involve myself in the project, which later helped me grow. Oh, of course, great learning sessions from Lee during development and community calls.
+  </p>
+</div>
+
+<div class="interviewer">
+  <span>Vivek:</span>
+  <p>
+    You’re a Meshery Maintainer and have been for some long time now. What does
+    being a Meshery maintainer mean to you?
+  </p>
+</div>
+
+<div class="interviewee">
+  <span>Aadhitya:</span>
+  <p>
+    Three things come into my mind: Learning lots of new things, Challenging yourself to your limits and being a helpful navigator for contributors. During my time as a newcomer, I started out with a simple readme fix PR in the Meshery project, which I thought would cause less impact. But the maintainers accepted my PR though it’s a very small one. That instilled a feeling in me that I should give back to the community by helping newcomers and contributors whenever they are stuck in work.
+  </p>
+</div>
+
+<div class="interviewer">
+  <span>Vivek:</span>
+  <p>Have you worked with any other open source project? How does Layer5 compare?</p>
+</div>
+
+<div class="interviewee">
+  <span>Aadhitya:</span>
+  <p>
+    Not a lot, but I worked on quite a few open source projects. Layer5 is one of the best places to start if you are new to open source. By being involved in the community, you will feel and understand the spirit of open source.
+  </p>
+</div>
+
+<div class="interviewer">
+  <span>Vivek:</span>
+  <p>
+    <Link to="/projects">Layer5 projects</Link> have a number of active, open
+    source projects. You’ve been consistently contributing to a few of them.
+    Which one(s) are you currently focusing on?
+  </p>
+</div>
+
+<div class="interviewee">
+  <span>Aadhitya:</span>
+  <p>
+    I currently work on Meshery, as it piqued my interest during my initial days. I also work on the Meshery-SMP GitHub action project as well.
+  </p>
+</div>
+
+<div class="interviewer">
+  <span>Vivek:</span>
+  <p>What’s the coolest Meshery demo you have done/seen?</p>
+</div>
+
+<div class="interviewee">
+  <span>Aadhitya:</span>
+  <p>
+   I’ve seen a lot of demos but the coolest one for me is the Meshery Docker extension where you can start and use Meshery right from DockerHub!
+  </p>
+</div>
+
+<div class="interviewer">
+  <span>Vivek:</span>
+  <p>
+    What is your favorite Meshery CLI Command?
+  </p>
+</div>
+
+<div class="interviewee">
+  <span>Aadhitya:</span>
+  <p>Oof! That’s a tricky one. But my favorite one is definitely <code>mesheryctl perf</code></p>
+</div>
+
+<div class="interviewer">
+  <span>Vivek:</span>
+  <p>What is your hot tip for working with Meshery that others may not know?</p>
+</div>
+
+<div class="interviewee">
+  <span>Aadhitya:</span>
+  <p>
+    If you’re starting out with Meshery, make sure to use the Meshery Playground if you want to get hands-on for the first time without the need to deploy Meshery in your system. After you get the basics right, install Meshery and log in to your deployed instance. You’ll see that your designs, performance test results and configurations remain intact in your instance as if they are present exactly the same in the Playground. There’s no need to start from scratch. Just continue where you left off!
+  </p>
+</div>
+
+<div class="interviewer">
+  <span>Vivek:</span>
+  <p>
+    Where do you see opportunities for contributors to get involved within Meshery and Layer5 community?
+  </p>
+</div>
+
+<div class="interviewee">
+  <span>Aadhitya:</span>
+  <p>Considering the fact that Meshery is now a part of CNCF (especially the fact that we are aiming for the Incubation status as well!), I feel that Meshery has a wide range of scope for contributors to be involved in. Whether you’re an expert or a newbie, Meshery has lots of subdomains to contribute. Documentation, Frontend, Backend, Adapters… the list goes on.</p>
+</div>
+
+<div class="interviewer">
+  <span>Vivek:</span>
+  <p>
+    Your most often used emoji? Your preference: movie or book? Morning person
+    or night owl? What have you worked on in the past six months that you’re
+    particularly proud of?
+  </p>
+</div>
+
+<div class="interviewee">
+  <span>Aadhitya:</span>
+  <p>
+   Most used emoji: 😎. I’m a morning person usually and sleep early, but sometimes I’m a night owl when it comes to intense work. I’d prefer movies compared to books as for some they clearly adapt from books. I’ve worked on refactoring the <code>mesheryctl pattern</code> command to <code>mesheryctl design</code> without losing the core features present. This took me a bit of time as I had to balance my current work as well which caused a bit of inactivity. But I managed to complete it, and I’m proud of doing such great work!
+  </p>
+</div>
+
+<div class="interviewer">
+  <span>Vivek:</span>
+  <p>
+    Do you have any advice for individuals hopeful to become Layer5 contributors
+    or potentially maintainers?
+  </p>
+</div>
+
+<div class="interviewee">
+  <span>Aadhitya:</span>
+  <p>
+    Make your presence stand out from the crowd even if you are a beginner, and learn as much as you can. Seek MeshMates and maintainers if you get stuck in something. Ask questions during meets or in Slack, and get feedback on your PRs, doesn’t matter if it’s big or small. Incorporate feedback and improvise. Remember, communication is the key, and be active!
+  </p>
+</div>
+
+<div class="interviewer">
+  <span>Vivek:</span>
+  <p>
+    In other words, whether your contribution is big or small, it sounds like aiming for high-quality contributions that add value to the projects is key.
+  </p>
+</div>
+
+<div class="interviewee">
+  <span>Aadhitya:</span>
+  <p>
+    Yes, you got it right! Even the smallest contribution which creates a good impact in a project becomes a great factor in Open source. All that matters is perseverance, challenging yourself to limits and learning. Do these things right and you’ll find yourself growing in the community.
+  </p>
+</div>
+
+<div class="note">
+  <img src={ForkLift} height="100px" />
+  <p>
+    The Meshery project moves at an impressive pace thanks to maintainers like
+    Aadhitya. Be like Aadhitya. Join the{" "}
+    <a href="https://slack.layer5.io">Layer5 Slack</a> and say “hi".
+  </p>
+</div>
+
+</MeetTheMaintainer>
+</BlogWrapper>
diff --git a/src/collections/blog/2024/11-05-what-is-the-kanvas-catalog/post.mdx b/src/collections/blog/2024/11-05-what-is-the-kanvas-catalog/post.mdx
index 3264a6af7d6f..1f53b04f9ee0 100644
--- a/src/collections/blog/2024/11-05-what-is-the-kanvas-catalog/post.mdx
+++ b/src/collections/blog/2024/11-05-what-is-the-kanvas-catalog/post.mdx
@@ -24,7 +24,7 @@ import { Link } from "gatsby";
 
 <Link to="/cloud-native-management/catalog">Kanvas Catalog</Link> is a hub for sharing and discovering best practices, reusable templates, and operational patterns for Kubernetes and cloud-native infrastructure. It's like a marketplace where you can find and contribute pre-built infrastructure configurations and operational views. The Catalog is a part of the Kanvas platform, which is a comprehensive suite of tools for managing cloud-native infrastructure.
 
-<div className="note"> <a href="https://meshery.layer5.io/catalog">Explore the catalog</a></div>
+<div className="note"> <a href="https://cloud.layer5.io/catalog">Explore the catalog</a></div>
 
 ### What can you find in the Catalog?
 
diff --git a/src/collections/integrations/antrea/index.mdx b/src/collections/integrations/antrea/index.mdx
index 16456c8e0a7d..cf138d411dc3 100644
--- a/src/collections/integrations/antrea/index.mdx
+++ b/src/collections/integrations/antrea/index.mdx
@@ -115,7 +115,7 @@ components: [
 "name": "packet-capture",
 "colorIcon": "icons/components/packet-capture/icons/color/packet-capture-color.svg",
 "whiteIcon": "icons/components/packet-capture/icons/white/packet-capture-white.svg",
-"description": "#00c1d5",
+"description": "",
 }]
 featureList: [
   "Network policy enforcement",
diff --git a/src/collections/integrations/cloudnative-pg/icons/components/database/icons/color/database-color.svg b/src/collections/integrations/cloudnative-pg/icons/components/database/icons/color/database-color.svg
new file mode 100644
index 000000000000..0d48a57cc865
--- /dev/null
+++ b/src/collections/integrations/cloudnative-pg/icons/components/database/icons/color/database-color.svg
@@ -0,0 +1,22 @@
+<svg width="415" height="435" viewBox="0 0 415 435" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M378.818 394.575C374.687 384.53 371.638 374.017 368.542 363.583C365.018 351.693 362.1 339.626 358.615 327.73C357.587 324.226 355.842 320.82 353.833 317.75C351.837 314.694 349.762 315.162 348.708 318.607C345.869 327.855 343.452 337.241 340.29 346.371C334.572 362.845 326.78 378.173 316.115 392.191C310.793 399.186 304.838 405.668 298.679 411.925C295.597 415.054 292.461 418.13 289.313 421.2C286.559 423.888 283.674 426.707 285.617 430.784C287.126 433.946 290.479 434.249 293.588 434.236C294.036 434.236 294.477 434.223 294.912 434.216C310.819 433.953 326.727 434.387 342.628 434.572C353.734 434.697 364.846 435.151 375.946 434.901C380.629 434.796 385.767 434.947 389.581 431.107C393.862 426.792 394.554 423.505 391.471 418.242C386.939 410.529 382.203 402.809 378.818 394.575Z" fill="url(#paint0_radial_248_90)"/>
+<path d="M409.948 262.887C407.879 262.38 405.857 261.826 403.894 261.188C383.527 254.68 369.45 241.453 353.964 226.559C351.599 224.274 350.829 221.672 350.994 218.405C351.87 203.189 350.038 188.157 347.357 173.231C343.583 152.409 337.345 132.279 328.848 112.867C326.938 108.513 324.388 104.659 323.058 100.042C322.926 99.5347 322.821 98.9551 323.163 98.5533C323.532 98.1054 324.276 98.2107 324.836 98.4215C329.777 100.437 337.635 122.774 343.985 117.063C345.342 115.844 345.842 113.98 346.192 112.202C351.58 85.5899 344.782 44.5856 321.016 28.1246C310.101 20.556 298.126 13.1983 285.031 10.2539C278.338 8.76522 271.06 8.84424 264.901 11.8743C261.844 13.363 259.084 15.563 255.765 16.3601C249.843 17.8224 243.947 14.5025 238.105 12.724C231.017 10.5964 223.284 10.7018 216.275 13.0665C210.643 14.9504 205.018 18.2967 199.175 17.2098C191.073 15.6948 185.23 6.34776 176.839 3.48239C166.774 0.0307768 155.595 0.0307897 145.287 2.34284C115.704 8.98259 87.9265 29.7516 67.2366 51.1265C44.531 74.5764 35.5002 105.595 55.5775 133.906C62.7508 144.024 73.2901 151.908 85.3181 155.017C87.6565 155.63 90.1266 156.104 92.0632 157.54C99.7108 163.225 83.5659 178.441 80.1143 183.381C72.6775 194.085 65.7479 205.184 60.5969 217.186C51.0391 239.417 46.8695 261.774 43.5232 285.573C37.7332 326.735 29.9802 369.044 10.7263 406.221C7.61722 412.196 3.74404 418.144 1.30024 424.415C0.713994 425.903 0.529556 427.655 1.30024 429.039C1.75475 429.836 2.49251 430.448 3.28954 430.87C7.59089 433.261 14.1252 432.727 18.8811 432.754C33.2211 432.806 47.5611 432.859 61.9274 432.885C69.2325 432.912 76.5309 432.938 83.836 432.938C89.0924 432.938 96.8256 434.269 101.601 431.739C104.684 430.119 106.383 426.667 107.233 423.268C108.478 418.275 109.275 413.151 110.606 408.158C114.696 392.889 120.513 378.358 127.976 364.393C139.819 342.215 152.196 317.151 130.209 296.909C124.419 291.6 117.753 287.378 111.541 282.595C110.349 281.667 109.176 279.783 110.428 278.933C110.909 278.59 111.567 278.67 112.18 278.801C136.163 283.821 158.335 309.583 156.847 334.251C156.05 347.129 150.872 358.682 146.94 370.631C142.955 382.771 138.285 394.773 137.165 407.677C136.71 412.775 136.183 417.926 136.131 423.051C136.052 429.691 138.548 433.116 146.09 433.142C173.683 433.195 201.276 433.623 228.87 433.887C235.878 433.966 250.278 436.278 253.09 427.221C254.124 423.874 252.8 420.291 251.075 417.261C249.349 414.231 247.142 411.392 246.213 408.019C244.514 401.992 247.168 395.642 249.988 390.043C253.255 383.562 257.319 377.482 260.56 371C264.361 364.15 268.82 357.773 272.245 350.686C275.855 343.275 278.78 335.549 281.197 327.69C284.464 317.144 286.829 306.335 288.687 295.473C289.082 293.121 289.339 290.75 289.622 288.379C289.767 287.187 289.912 285.994 290.083 284.809C290.274 283.478 290.57 281.897 292.296 282.022C302.592 282.747 287.139 341.675 285.788 345.271C282.626 353.716 278.832 361.923 274.366 369.782C268.761 379.636 258.459 388.581 260.981 401.037C261.884 405.444 262.944 411.767 266.93 414.554C272.397 418.407 279.438 412.005 283.318 408.527C289.424 403.026 294.338 396.472 299.489 390.096C313.671 372.568 324.586 352.622 332.523 331.564C341.152 308.568 345.006 285.698 348.029 261.477C348.214 260.094 348.51 258.526 349.676 257.789C351.007 256.939 352.732 257.578 354.162 258.217C371.69 265.97 390.628 272.241 409.691 270.403C412.029 270.166 414.947 269.184 415 266.846C415.046 264.534 412.207 263.414 409.948 262.887ZM316.708 250.912C316.523 251.577 316.016 252.157 315.43 252.532C314.317 253.224 312.828 253.408 311.55 253.54C303.053 254.416 294.687 251.814 287.04 248.363C285.821 247.829 284.596 247.276 283.377 246.663C271.718 240.873 260.883 232.613 251.931 223.161C244.336 215.137 238.335 205.632 234.218 195.383C233.342 193.203 232.308 190.871 231.801 188.559C231.373 186.596 231.643 184.284 233.158 182.927C234.113 182.077 235.417 181.761 236.662 181.491C240.832 180.667 245.265 180.213 249.487 180.588C251.213 180.694 253.018 181.148 254.243 182.341C255.33 183.375 255.863 184.837 256.344 186.273C258.413 192.485 260.145 198.887 263.089 204.783C266.067 210.757 269.993 216.363 274.083 221.619C275.572 223.529 277.113 225.387 278.707 227.225C286.592 236.282 296.953 244.384 309.06 246.689C309.541 246.795 310.015 246.874 310.523 246.953C312.196 247.19 313.948 247.355 315.384 248.283C316.076 248.738 316.688 249.449 316.767 250.273C316.761 250.484 316.761 250.694 316.708 250.912Z" fill="url(#paint1_radial_248_90)"/>
+<defs>
+<radialGradient id="paint0_radial_248_90" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(-404.314 -402.661) scale(1393.49)">
+<stop stop-color="#732DD9"/>
+<stop offset="0.1185" stop-color="#6A2BCB"/>
+<stop offset="0.3434" stop-color="#5125A5"/>
+<stop offset="0.6486" stop-color="#291C69"/>
+<stop offset="0.8139" stop-color="#121646"/>
+<stop offset="1" stop-color="#121646"/>
+</radialGradient>
+<radialGradient id="paint1_radial_248_90" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(-404.315 -402.661) scale(1393.49)">
+<stop stop-color="#732DD9"/>
+<stop offset="0.1185" stop-color="#6A2BCB"/>
+<stop offset="0.3434" stop-color="#5125A5"/>
+<stop offset="0.6486" stop-color="#291C69"/>
+<stop offset="0.8139" stop-color="#121646"/>
+<stop offset="1" stop-color="#121646"/>
+</radialGradient>
+</defs>
+</svg>
\ No newline at end of file
diff --git a/src/collections/integrations/cloudnative-pg/icons/components/database/icons/white/database-white.svg b/src/collections/integrations/cloudnative-pg/icons/components/database/icons/white/database-white.svg
new file mode 100644
index 000000000000..85acca51dd85
--- /dev/null
+++ b/src/collections/integrations/cloudnative-pg/icons/components/database/icons/white/database-white.svg
@@ -0,0 +1,22 @@
+<svg width="415" height="435" viewBox="0 0 415 435" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M378.818 394.575C374.687 384.53 371.638 374.017 368.542 363.583C365.018 351.693 362.1 339.626 358.615 327.73C357.587 324.226 355.842 320.82 353.833 317.75C351.837 314.694 349.762 315.162 348.708 318.607C345.869 327.855 343.452 337.241 340.29 346.371C334.572 362.845 326.78 378.173 316.115 392.191C310.793 399.186 304.838 405.668 298.679 411.925C295.597 415.054 292.461 418.13 289.313 421.2C286.559 423.888 283.674 426.707 285.617 430.784C287.126 433.946 290.479 434.249 293.588 434.236C294.036 434.236 294.477 434.223 294.912 434.216C310.819 433.953 326.727 434.387 342.628 434.572C353.734 434.697 364.846 435.151 375.946 434.901C380.629 434.796 385.767 434.947 389.581 431.107C393.862 426.792 394.554 423.505 391.471 418.242C386.939 410.529 382.203 402.809 378.818 394.575Z" fill="url(#paint0_radial_248_90"/>
+<path d="M409.948 262.887C407.879 262.38 405.857 261.826 403.894 261.188C383.527 254.68 369.45 241.453 353.964 226.559C351.599 224.274 350.829 221.672 350.994 218.405C351.87 203.189 350.038 188.157 347.357 173.231C343.583 152.409 337.345 132.279 328.848 112.867C326.938 108.513 324.388 104.659 323.058 100.042C322.926 99.5347 322.821 98.9551 323.163 98.5533C323.532 98.1054 324.276 98.2107 324.836 98.4215C329.777 100.437 337.635 122.774 343.985 117.063C345.342 115.844 345.842 113.98 346.192 112.202C351.58 85.5899 344.782 44.5856 321.016 28.1246C310.101 20.556 298.126 13.1983 285.031 10.2539C278.338 8.76522 271.06 8.84424 264.901 11.8743C261.844 13.363 259.084 15.563 255.765 16.3601C249.843 17.8224 243.947 14.5025 238.105 12.724C231.017 10.5964 223.284 10.7018 216.275 13.0665C210.643 14.9504 205.018 18.2967 199.175 17.2098C191.073 15.6948 185.23 6.34776 176.839 3.48239C166.774 0.0307768 155.595 0.0307897 145.287 2.34284C115.704 8.98259 87.9265 29.7516 67.2366 51.1265C44.531 74.5764 35.5002 105.595 55.5775 133.906C62.7508 144.024 73.2901 151.908 85.3181 155.017C87.6565 155.63 90.1266 156.104 92.0632 157.54C99.7108 163.225 83.5659 178.441 80.1143 183.381C72.6775 194.085 65.7479 205.184 60.5969 217.186C51.0391 239.417 46.8695 261.774 43.5232 285.573C37.7332 326.735 29.9802 369.044 10.7263 406.221C7.61722 412.196 3.74404 418.144 1.30024 424.415C0.713994 425.903 0.529556 427.655 1.30024 429.039C1.75475 429.836 2.49251 430.448 3.28954 430.87C7.59089 433.261 14.1252 432.727 18.8811 432.754C33.2211 432.806 47.5611 432.859 61.9274 432.885C69.2325 432.912 76.5309 432.938 83.836 432.938C89.0924 432.938 96.8256 434.269 101.601 431.739C104.684 430.119 106.383 426.667 107.233 423.268C108.478 418.275 109.275 413.151 110.606 408.158C114.696 392.889 120.513 378.358 127.976 364.393C139.819 342.215 152.196 317.151 130.209 296.909C124.419 291.6 117.753 287.378 111.541 282.595C110.349 281.667 109.176 279.783 110.428 278.933C110.909 278.59 111.567 278.67 112.18 278.801C136.163 283.821 158.335 309.583 156.847 334.251C156.05 347.129 150.872 358.682 146.94 370.631C142.955 382.771 138.285 394.773 137.165 407.677C136.71 412.775 136.183 417.926 136.131 423.051C136.052 429.691 138.548 433.116 146.09 433.142C173.683 433.195 201.276 433.623 228.87 433.887C235.878 433.966 250.278 436.278 253.09 427.221C254.124 423.874 252.8 420.291 251.075 417.261C249.349 414.231 247.142 411.392 246.213 408.019C244.514 401.992 247.168 395.642 249.988 390.043C253.255 383.562 257.319 377.482 260.56 371C264.361 364.15 268.82 357.773 272.245 350.686C275.855 343.275 278.78 335.549 281.197 327.69C284.464 317.144 286.829 306.335 288.687 295.473C289.082 293.121 289.339 290.75 289.622 288.379C289.767 287.187 289.912 285.994 290.083 284.809C290.274 283.478 290.57 281.897 292.296 282.022C302.592 282.747 287.139 341.675 285.788 345.271C282.626 353.716 278.832 361.923 274.366 369.782C268.761 379.636 258.459 388.581 260.981 401.037C261.884 405.444 262.944 411.767 266.93 414.554C272.397 418.407 279.438 412.005 283.318 408.527C289.424 403.026 294.338 396.472 299.489 390.096C313.671 372.568 324.586 352.622 332.523 331.564C341.152 308.568 345.006 285.698 348.029 261.477C348.214 260.094 348.51 258.526 349.676 257.789C351.007 256.939 352.732 257.578 354.162 258.217C371.69 265.97 390.628 272.241 409.691 270.403C412.029 270.166 414.947 269.184 415 266.846C415.046 264.534 412.207 263.414 409.948 262.887ZM316.708 250.912C316.523 251.577 316.016 252.157 315.43 252.532C314.317 253.224 312.828 253.408 311.55 253.54C303.053 254.416 294.687 251.814 287.04 248.363C285.821 247.829 284.596 247.276 283.377 246.663C271.718 240.873 260.883 232.613 251.931 223.161C244.336 215.137 238.335 205.632 234.218 195.383C233.342 193.203 232.308 190.871 231.801 188.559C231.373 186.596 231.643 184.284 233.158 182.927C234.113 182.077 235.417 181.761 236.662 181.491C240.832 180.667 245.265 180.213 249.487 180.588C251.213 180.694 253.018 181.148 254.243 182.341C255.33 183.375 255.863 184.837 256.344 186.273C258.413 192.485 260.145 198.887 263.089 204.783C266.067 210.757 269.993 216.363 274.083 221.619C275.572 223.529 277.113 225.387 278.707 227.225C286.592 236.282 296.953 244.384 309.06 246.689C309.541 246.795 310.015 246.874 310.523 246.953C312.196 247.19 313.948 247.355 315.384 248.283C316.076 248.738 316.688 249.449 316.767 250.273C316.761 250.484 316.761 250.694 316.708 250.912Z" fill="url(#paint1_radial_248_90)"/>
+<defs>
+<radialGradient id="paint0_radial_248_90" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(-404.314 -402.661) scale(1393.49)">
+<stop stop-color="#fff"/>
+<stop offset="0.1185" stop-color="#fff"/>
+<stop offset="0.3434" stop-color="#fff"/>
+<stop offset="0.6486" stop-color="#fff"/>
+<stop offset="0.8139" stop-color="#fff"/>
+<stop offset="1" stop-color="#fff"/>
+</radialGradient>
+<radialGradient id="paint1_radial_248_90" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(-404.315 -402.661) scale(1393.49)">
+<stop stop-color="#fff"/>
+<stop offset="0.1185" stop-color="#fff"/>
+<stop offset="0.3434" stop-color="#fff"/>
+<stop offset="0.6486" stop-color="#fff"/>
+<stop offset="0.8139" stop-color="#fff"/>
+<stop offset="1" stop-color="#fff"/>
+</radialGradient>
+</defs>
+</svg>
diff --git a/src/collections/integrations/cloudnative-pg/icons/components/publication/icons/color/publication-color.svg b/src/collections/integrations/cloudnative-pg/icons/components/publication/icons/color/publication-color.svg
new file mode 100644
index 000000000000..0d48a57cc865
--- /dev/null
+++ b/src/collections/integrations/cloudnative-pg/icons/components/publication/icons/color/publication-color.svg
@@ -0,0 +1,22 @@
+<svg width="415" height="435" viewBox="0 0 415 435" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M378.818 394.575C374.687 384.53 371.638 374.017 368.542 363.583C365.018 351.693 362.1 339.626 358.615 327.73C357.587 324.226 355.842 320.82 353.833 317.75C351.837 314.694 349.762 315.162 348.708 318.607C345.869 327.855 343.452 337.241 340.29 346.371C334.572 362.845 326.78 378.173 316.115 392.191C310.793 399.186 304.838 405.668 298.679 411.925C295.597 415.054 292.461 418.13 289.313 421.2C286.559 423.888 283.674 426.707 285.617 430.784C287.126 433.946 290.479 434.249 293.588 434.236C294.036 434.236 294.477 434.223 294.912 434.216C310.819 433.953 326.727 434.387 342.628 434.572C353.734 434.697 364.846 435.151 375.946 434.901C380.629 434.796 385.767 434.947 389.581 431.107C393.862 426.792 394.554 423.505 391.471 418.242C386.939 410.529 382.203 402.809 378.818 394.575Z" fill="url(#paint0_radial_248_90)"/>
+<path d="M409.948 262.887C407.879 262.38 405.857 261.826 403.894 261.188C383.527 254.68 369.45 241.453 353.964 226.559C351.599 224.274 350.829 221.672 350.994 218.405C351.87 203.189 350.038 188.157 347.357 173.231C343.583 152.409 337.345 132.279 328.848 112.867C326.938 108.513 324.388 104.659 323.058 100.042C322.926 99.5347 322.821 98.9551 323.163 98.5533C323.532 98.1054 324.276 98.2107 324.836 98.4215C329.777 100.437 337.635 122.774 343.985 117.063C345.342 115.844 345.842 113.98 346.192 112.202C351.58 85.5899 344.782 44.5856 321.016 28.1246C310.101 20.556 298.126 13.1983 285.031 10.2539C278.338 8.76522 271.06 8.84424 264.901 11.8743C261.844 13.363 259.084 15.563 255.765 16.3601C249.843 17.8224 243.947 14.5025 238.105 12.724C231.017 10.5964 223.284 10.7018 216.275 13.0665C210.643 14.9504 205.018 18.2967 199.175 17.2098C191.073 15.6948 185.23 6.34776 176.839 3.48239C166.774 0.0307768 155.595 0.0307897 145.287 2.34284C115.704 8.98259 87.9265 29.7516 67.2366 51.1265C44.531 74.5764 35.5002 105.595 55.5775 133.906C62.7508 144.024 73.2901 151.908 85.3181 155.017C87.6565 155.63 90.1266 156.104 92.0632 157.54C99.7108 163.225 83.5659 178.441 80.1143 183.381C72.6775 194.085 65.7479 205.184 60.5969 217.186C51.0391 239.417 46.8695 261.774 43.5232 285.573C37.7332 326.735 29.9802 369.044 10.7263 406.221C7.61722 412.196 3.74404 418.144 1.30024 424.415C0.713994 425.903 0.529556 427.655 1.30024 429.039C1.75475 429.836 2.49251 430.448 3.28954 430.87C7.59089 433.261 14.1252 432.727 18.8811 432.754C33.2211 432.806 47.5611 432.859 61.9274 432.885C69.2325 432.912 76.5309 432.938 83.836 432.938C89.0924 432.938 96.8256 434.269 101.601 431.739C104.684 430.119 106.383 426.667 107.233 423.268C108.478 418.275 109.275 413.151 110.606 408.158C114.696 392.889 120.513 378.358 127.976 364.393C139.819 342.215 152.196 317.151 130.209 296.909C124.419 291.6 117.753 287.378 111.541 282.595C110.349 281.667 109.176 279.783 110.428 278.933C110.909 278.59 111.567 278.67 112.18 278.801C136.163 283.821 158.335 309.583 156.847 334.251C156.05 347.129 150.872 358.682 146.94 370.631C142.955 382.771 138.285 394.773 137.165 407.677C136.71 412.775 136.183 417.926 136.131 423.051C136.052 429.691 138.548 433.116 146.09 433.142C173.683 433.195 201.276 433.623 228.87 433.887C235.878 433.966 250.278 436.278 253.09 427.221C254.124 423.874 252.8 420.291 251.075 417.261C249.349 414.231 247.142 411.392 246.213 408.019C244.514 401.992 247.168 395.642 249.988 390.043C253.255 383.562 257.319 377.482 260.56 371C264.361 364.15 268.82 357.773 272.245 350.686C275.855 343.275 278.78 335.549 281.197 327.69C284.464 317.144 286.829 306.335 288.687 295.473C289.082 293.121 289.339 290.75 289.622 288.379C289.767 287.187 289.912 285.994 290.083 284.809C290.274 283.478 290.57 281.897 292.296 282.022C302.592 282.747 287.139 341.675 285.788 345.271C282.626 353.716 278.832 361.923 274.366 369.782C268.761 379.636 258.459 388.581 260.981 401.037C261.884 405.444 262.944 411.767 266.93 414.554C272.397 418.407 279.438 412.005 283.318 408.527C289.424 403.026 294.338 396.472 299.489 390.096C313.671 372.568 324.586 352.622 332.523 331.564C341.152 308.568 345.006 285.698 348.029 261.477C348.214 260.094 348.51 258.526 349.676 257.789C351.007 256.939 352.732 257.578 354.162 258.217C371.69 265.97 390.628 272.241 409.691 270.403C412.029 270.166 414.947 269.184 415 266.846C415.046 264.534 412.207 263.414 409.948 262.887ZM316.708 250.912C316.523 251.577 316.016 252.157 315.43 252.532C314.317 253.224 312.828 253.408 311.55 253.54C303.053 254.416 294.687 251.814 287.04 248.363C285.821 247.829 284.596 247.276 283.377 246.663C271.718 240.873 260.883 232.613 251.931 223.161C244.336 215.137 238.335 205.632 234.218 195.383C233.342 193.203 232.308 190.871 231.801 188.559C231.373 186.596 231.643 184.284 233.158 182.927C234.113 182.077 235.417 181.761 236.662 181.491C240.832 180.667 245.265 180.213 249.487 180.588C251.213 180.694 253.018 181.148 254.243 182.341C255.33 183.375 255.863 184.837 256.344 186.273C258.413 192.485 260.145 198.887 263.089 204.783C266.067 210.757 269.993 216.363 274.083 221.619C275.572 223.529 277.113 225.387 278.707 227.225C286.592 236.282 296.953 244.384 309.06 246.689C309.541 246.795 310.015 246.874 310.523 246.953C312.196 247.19 313.948 247.355 315.384 248.283C316.076 248.738 316.688 249.449 316.767 250.273C316.761 250.484 316.761 250.694 316.708 250.912Z" fill="url(#paint1_radial_248_90)"/>
+<defs>
+<radialGradient id="paint0_radial_248_90" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(-404.314 -402.661) scale(1393.49)">
+<stop stop-color="#732DD9"/>
+<stop offset="0.1185" stop-color="#6A2BCB"/>
+<stop offset="0.3434" stop-color="#5125A5"/>
+<stop offset="0.6486" stop-color="#291C69"/>
+<stop offset="0.8139" stop-color="#121646"/>
+<stop offset="1" stop-color="#121646"/>
+</radialGradient>
+<radialGradient id="paint1_radial_248_90" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(-404.315 -402.661) scale(1393.49)">
+<stop stop-color="#732DD9"/>
+<stop offset="0.1185" stop-color="#6A2BCB"/>
+<stop offset="0.3434" stop-color="#5125A5"/>
+<stop offset="0.6486" stop-color="#291C69"/>
+<stop offset="0.8139" stop-color="#121646"/>
+<stop offset="1" stop-color="#121646"/>
+</radialGradient>
+</defs>
+</svg>
\ No newline at end of file
diff --git a/src/collections/integrations/cloudnative-pg/icons/components/publication/icons/white/publication-white.svg b/src/collections/integrations/cloudnative-pg/icons/components/publication/icons/white/publication-white.svg
new file mode 100644
index 000000000000..85acca51dd85
--- /dev/null
+++ b/src/collections/integrations/cloudnative-pg/icons/components/publication/icons/white/publication-white.svg
@@ -0,0 +1,22 @@
+<svg width="415" height="435" viewBox="0 0 415 435" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M378.818 394.575C374.687 384.53 371.638 374.017 368.542 363.583C365.018 351.693 362.1 339.626 358.615 327.73C357.587 324.226 355.842 320.82 353.833 317.75C351.837 314.694 349.762 315.162 348.708 318.607C345.869 327.855 343.452 337.241 340.29 346.371C334.572 362.845 326.78 378.173 316.115 392.191C310.793 399.186 304.838 405.668 298.679 411.925C295.597 415.054 292.461 418.13 289.313 421.2C286.559 423.888 283.674 426.707 285.617 430.784C287.126 433.946 290.479 434.249 293.588 434.236C294.036 434.236 294.477 434.223 294.912 434.216C310.819 433.953 326.727 434.387 342.628 434.572C353.734 434.697 364.846 435.151 375.946 434.901C380.629 434.796 385.767 434.947 389.581 431.107C393.862 426.792 394.554 423.505 391.471 418.242C386.939 410.529 382.203 402.809 378.818 394.575Z" fill="url(#paint0_radial_248_90"/>
+<path d="M409.948 262.887C407.879 262.38 405.857 261.826 403.894 261.188C383.527 254.68 369.45 241.453 353.964 226.559C351.599 224.274 350.829 221.672 350.994 218.405C351.87 203.189 350.038 188.157 347.357 173.231C343.583 152.409 337.345 132.279 328.848 112.867C326.938 108.513 324.388 104.659 323.058 100.042C322.926 99.5347 322.821 98.9551 323.163 98.5533C323.532 98.1054 324.276 98.2107 324.836 98.4215C329.777 100.437 337.635 122.774 343.985 117.063C345.342 115.844 345.842 113.98 346.192 112.202C351.58 85.5899 344.782 44.5856 321.016 28.1246C310.101 20.556 298.126 13.1983 285.031 10.2539C278.338 8.76522 271.06 8.84424 264.901 11.8743C261.844 13.363 259.084 15.563 255.765 16.3601C249.843 17.8224 243.947 14.5025 238.105 12.724C231.017 10.5964 223.284 10.7018 216.275 13.0665C210.643 14.9504 205.018 18.2967 199.175 17.2098C191.073 15.6948 185.23 6.34776 176.839 3.48239C166.774 0.0307768 155.595 0.0307897 145.287 2.34284C115.704 8.98259 87.9265 29.7516 67.2366 51.1265C44.531 74.5764 35.5002 105.595 55.5775 133.906C62.7508 144.024 73.2901 151.908 85.3181 155.017C87.6565 155.63 90.1266 156.104 92.0632 157.54C99.7108 163.225 83.5659 178.441 80.1143 183.381C72.6775 194.085 65.7479 205.184 60.5969 217.186C51.0391 239.417 46.8695 261.774 43.5232 285.573C37.7332 326.735 29.9802 369.044 10.7263 406.221C7.61722 412.196 3.74404 418.144 1.30024 424.415C0.713994 425.903 0.529556 427.655 1.30024 429.039C1.75475 429.836 2.49251 430.448 3.28954 430.87C7.59089 433.261 14.1252 432.727 18.8811 432.754C33.2211 432.806 47.5611 432.859 61.9274 432.885C69.2325 432.912 76.5309 432.938 83.836 432.938C89.0924 432.938 96.8256 434.269 101.601 431.739C104.684 430.119 106.383 426.667 107.233 423.268C108.478 418.275 109.275 413.151 110.606 408.158C114.696 392.889 120.513 378.358 127.976 364.393C139.819 342.215 152.196 317.151 130.209 296.909C124.419 291.6 117.753 287.378 111.541 282.595C110.349 281.667 109.176 279.783 110.428 278.933C110.909 278.59 111.567 278.67 112.18 278.801C136.163 283.821 158.335 309.583 156.847 334.251C156.05 347.129 150.872 358.682 146.94 370.631C142.955 382.771 138.285 394.773 137.165 407.677C136.71 412.775 136.183 417.926 136.131 423.051C136.052 429.691 138.548 433.116 146.09 433.142C173.683 433.195 201.276 433.623 228.87 433.887C235.878 433.966 250.278 436.278 253.09 427.221C254.124 423.874 252.8 420.291 251.075 417.261C249.349 414.231 247.142 411.392 246.213 408.019C244.514 401.992 247.168 395.642 249.988 390.043C253.255 383.562 257.319 377.482 260.56 371C264.361 364.15 268.82 357.773 272.245 350.686C275.855 343.275 278.78 335.549 281.197 327.69C284.464 317.144 286.829 306.335 288.687 295.473C289.082 293.121 289.339 290.75 289.622 288.379C289.767 287.187 289.912 285.994 290.083 284.809C290.274 283.478 290.57 281.897 292.296 282.022C302.592 282.747 287.139 341.675 285.788 345.271C282.626 353.716 278.832 361.923 274.366 369.782C268.761 379.636 258.459 388.581 260.981 401.037C261.884 405.444 262.944 411.767 266.93 414.554C272.397 418.407 279.438 412.005 283.318 408.527C289.424 403.026 294.338 396.472 299.489 390.096C313.671 372.568 324.586 352.622 332.523 331.564C341.152 308.568 345.006 285.698 348.029 261.477C348.214 260.094 348.51 258.526 349.676 257.789C351.007 256.939 352.732 257.578 354.162 258.217C371.69 265.97 390.628 272.241 409.691 270.403C412.029 270.166 414.947 269.184 415 266.846C415.046 264.534 412.207 263.414 409.948 262.887ZM316.708 250.912C316.523 251.577 316.016 252.157 315.43 252.532C314.317 253.224 312.828 253.408 311.55 253.54C303.053 254.416 294.687 251.814 287.04 248.363C285.821 247.829 284.596 247.276 283.377 246.663C271.718 240.873 260.883 232.613 251.931 223.161C244.336 215.137 238.335 205.632 234.218 195.383C233.342 193.203 232.308 190.871 231.801 188.559C231.373 186.596 231.643 184.284 233.158 182.927C234.113 182.077 235.417 181.761 236.662 181.491C240.832 180.667 245.265 180.213 249.487 180.588C251.213 180.694 253.018 181.148 254.243 182.341C255.33 183.375 255.863 184.837 256.344 186.273C258.413 192.485 260.145 198.887 263.089 204.783C266.067 210.757 269.993 216.363 274.083 221.619C275.572 223.529 277.113 225.387 278.707 227.225C286.592 236.282 296.953 244.384 309.06 246.689C309.541 246.795 310.015 246.874 310.523 246.953C312.196 247.19 313.948 247.355 315.384 248.283C316.076 248.738 316.688 249.449 316.767 250.273C316.761 250.484 316.761 250.694 316.708 250.912Z" fill="url(#paint1_radial_248_90)"/>
+<defs>
+<radialGradient id="paint0_radial_248_90" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(-404.314 -402.661) scale(1393.49)">
+<stop stop-color="#fff"/>
+<stop offset="0.1185" stop-color="#fff"/>
+<stop offset="0.3434" stop-color="#fff"/>
+<stop offset="0.6486" stop-color="#fff"/>
+<stop offset="0.8139" stop-color="#fff"/>
+<stop offset="1" stop-color="#fff"/>
+</radialGradient>
+<radialGradient id="paint1_radial_248_90" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(-404.315 -402.661) scale(1393.49)">
+<stop stop-color="#fff"/>
+<stop offset="0.1185" stop-color="#fff"/>
+<stop offset="0.3434" stop-color="#fff"/>
+<stop offset="0.6486" stop-color="#fff"/>
+<stop offset="0.8139" stop-color="#fff"/>
+<stop offset="1" stop-color="#fff"/>
+</radialGradient>
+</defs>
+</svg>
diff --git a/src/collections/integrations/cloudnative-pg/icons/components/subscription/icons/color/subscription-color.svg b/src/collections/integrations/cloudnative-pg/icons/components/subscription/icons/color/subscription-color.svg
new file mode 100644
index 000000000000..0d48a57cc865
--- /dev/null
+++ b/src/collections/integrations/cloudnative-pg/icons/components/subscription/icons/color/subscription-color.svg
@@ -0,0 +1,22 @@
+<svg width="415" height="435" viewBox="0 0 415 435" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M378.818 394.575C374.687 384.53 371.638 374.017 368.542 363.583C365.018 351.693 362.1 339.626 358.615 327.73C357.587 324.226 355.842 320.82 353.833 317.75C351.837 314.694 349.762 315.162 348.708 318.607C345.869 327.855 343.452 337.241 340.29 346.371C334.572 362.845 326.78 378.173 316.115 392.191C310.793 399.186 304.838 405.668 298.679 411.925C295.597 415.054 292.461 418.13 289.313 421.2C286.559 423.888 283.674 426.707 285.617 430.784C287.126 433.946 290.479 434.249 293.588 434.236C294.036 434.236 294.477 434.223 294.912 434.216C310.819 433.953 326.727 434.387 342.628 434.572C353.734 434.697 364.846 435.151 375.946 434.901C380.629 434.796 385.767 434.947 389.581 431.107C393.862 426.792 394.554 423.505 391.471 418.242C386.939 410.529 382.203 402.809 378.818 394.575Z" fill="url(#paint0_radial_248_90)"/>
+<path d="M409.948 262.887C407.879 262.38 405.857 261.826 403.894 261.188C383.527 254.68 369.45 241.453 353.964 226.559C351.599 224.274 350.829 221.672 350.994 218.405C351.87 203.189 350.038 188.157 347.357 173.231C343.583 152.409 337.345 132.279 328.848 112.867C326.938 108.513 324.388 104.659 323.058 100.042C322.926 99.5347 322.821 98.9551 323.163 98.5533C323.532 98.1054 324.276 98.2107 324.836 98.4215C329.777 100.437 337.635 122.774 343.985 117.063C345.342 115.844 345.842 113.98 346.192 112.202C351.58 85.5899 344.782 44.5856 321.016 28.1246C310.101 20.556 298.126 13.1983 285.031 10.2539C278.338 8.76522 271.06 8.84424 264.901 11.8743C261.844 13.363 259.084 15.563 255.765 16.3601C249.843 17.8224 243.947 14.5025 238.105 12.724C231.017 10.5964 223.284 10.7018 216.275 13.0665C210.643 14.9504 205.018 18.2967 199.175 17.2098C191.073 15.6948 185.23 6.34776 176.839 3.48239C166.774 0.0307768 155.595 0.0307897 145.287 2.34284C115.704 8.98259 87.9265 29.7516 67.2366 51.1265C44.531 74.5764 35.5002 105.595 55.5775 133.906C62.7508 144.024 73.2901 151.908 85.3181 155.017C87.6565 155.63 90.1266 156.104 92.0632 157.54C99.7108 163.225 83.5659 178.441 80.1143 183.381C72.6775 194.085 65.7479 205.184 60.5969 217.186C51.0391 239.417 46.8695 261.774 43.5232 285.573C37.7332 326.735 29.9802 369.044 10.7263 406.221C7.61722 412.196 3.74404 418.144 1.30024 424.415C0.713994 425.903 0.529556 427.655 1.30024 429.039C1.75475 429.836 2.49251 430.448 3.28954 430.87C7.59089 433.261 14.1252 432.727 18.8811 432.754C33.2211 432.806 47.5611 432.859 61.9274 432.885C69.2325 432.912 76.5309 432.938 83.836 432.938C89.0924 432.938 96.8256 434.269 101.601 431.739C104.684 430.119 106.383 426.667 107.233 423.268C108.478 418.275 109.275 413.151 110.606 408.158C114.696 392.889 120.513 378.358 127.976 364.393C139.819 342.215 152.196 317.151 130.209 296.909C124.419 291.6 117.753 287.378 111.541 282.595C110.349 281.667 109.176 279.783 110.428 278.933C110.909 278.59 111.567 278.67 112.18 278.801C136.163 283.821 158.335 309.583 156.847 334.251C156.05 347.129 150.872 358.682 146.94 370.631C142.955 382.771 138.285 394.773 137.165 407.677C136.71 412.775 136.183 417.926 136.131 423.051C136.052 429.691 138.548 433.116 146.09 433.142C173.683 433.195 201.276 433.623 228.87 433.887C235.878 433.966 250.278 436.278 253.09 427.221C254.124 423.874 252.8 420.291 251.075 417.261C249.349 414.231 247.142 411.392 246.213 408.019C244.514 401.992 247.168 395.642 249.988 390.043C253.255 383.562 257.319 377.482 260.56 371C264.361 364.15 268.82 357.773 272.245 350.686C275.855 343.275 278.78 335.549 281.197 327.69C284.464 317.144 286.829 306.335 288.687 295.473C289.082 293.121 289.339 290.75 289.622 288.379C289.767 287.187 289.912 285.994 290.083 284.809C290.274 283.478 290.57 281.897 292.296 282.022C302.592 282.747 287.139 341.675 285.788 345.271C282.626 353.716 278.832 361.923 274.366 369.782C268.761 379.636 258.459 388.581 260.981 401.037C261.884 405.444 262.944 411.767 266.93 414.554C272.397 418.407 279.438 412.005 283.318 408.527C289.424 403.026 294.338 396.472 299.489 390.096C313.671 372.568 324.586 352.622 332.523 331.564C341.152 308.568 345.006 285.698 348.029 261.477C348.214 260.094 348.51 258.526 349.676 257.789C351.007 256.939 352.732 257.578 354.162 258.217C371.69 265.97 390.628 272.241 409.691 270.403C412.029 270.166 414.947 269.184 415 266.846C415.046 264.534 412.207 263.414 409.948 262.887ZM316.708 250.912C316.523 251.577 316.016 252.157 315.43 252.532C314.317 253.224 312.828 253.408 311.55 253.54C303.053 254.416 294.687 251.814 287.04 248.363C285.821 247.829 284.596 247.276 283.377 246.663C271.718 240.873 260.883 232.613 251.931 223.161C244.336 215.137 238.335 205.632 234.218 195.383C233.342 193.203 232.308 190.871 231.801 188.559C231.373 186.596 231.643 184.284 233.158 182.927C234.113 182.077 235.417 181.761 236.662 181.491C240.832 180.667 245.265 180.213 249.487 180.588C251.213 180.694 253.018 181.148 254.243 182.341C255.33 183.375 255.863 184.837 256.344 186.273C258.413 192.485 260.145 198.887 263.089 204.783C266.067 210.757 269.993 216.363 274.083 221.619C275.572 223.529 277.113 225.387 278.707 227.225C286.592 236.282 296.953 244.384 309.06 246.689C309.541 246.795 310.015 246.874 310.523 246.953C312.196 247.19 313.948 247.355 315.384 248.283C316.076 248.738 316.688 249.449 316.767 250.273C316.761 250.484 316.761 250.694 316.708 250.912Z" fill="url(#paint1_radial_248_90)"/>
+<defs>
+<radialGradient id="paint0_radial_248_90" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(-404.314 -402.661) scale(1393.49)">
+<stop stop-color="#732DD9"/>
+<stop offset="0.1185" stop-color="#6A2BCB"/>
+<stop offset="0.3434" stop-color="#5125A5"/>
+<stop offset="0.6486" stop-color="#291C69"/>
+<stop offset="0.8139" stop-color="#121646"/>
+<stop offset="1" stop-color="#121646"/>
+</radialGradient>
+<radialGradient id="paint1_radial_248_90" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(-404.315 -402.661) scale(1393.49)">
+<stop stop-color="#732DD9"/>
+<stop offset="0.1185" stop-color="#6A2BCB"/>
+<stop offset="0.3434" stop-color="#5125A5"/>
+<stop offset="0.6486" stop-color="#291C69"/>
+<stop offset="0.8139" stop-color="#121646"/>
+<stop offset="1" stop-color="#121646"/>
+</radialGradient>
+</defs>
+</svg>
\ No newline at end of file
diff --git a/src/collections/integrations/cloudnative-pg/icons/components/subscription/icons/white/subscription-white.svg b/src/collections/integrations/cloudnative-pg/icons/components/subscription/icons/white/subscription-white.svg
new file mode 100644
index 000000000000..85acca51dd85
--- /dev/null
+++ b/src/collections/integrations/cloudnative-pg/icons/components/subscription/icons/white/subscription-white.svg
@@ -0,0 +1,22 @@
+<svg width="415" height="435" viewBox="0 0 415 435" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M378.818 394.575C374.687 384.53 371.638 374.017 368.542 363.583C365.018 351.693 362.1 339.626 358.615 327.73C357.587 324.226 355.842 320.82 353.833 317.75C351.837 314.694 349.762 315.162 348.708 318.607C345.869 327.855 343.452 337.241 340.29 346.371C334.572 362.845 326.78 378.173 316.115 392.191C310.793 399.186 304.838 405.668 298.679 411.925C295.597 415.054 292.461 418.13 289.313 421.2C286.559 423.888 283.674 426.707 285.617 430.784C287.126 433.946 290.479 434.249 293.588 434.236C294.036 434.236 294.477 434.223 294.912 434.216C310.819 433.953 326.727 434.387 342.628 434.572C353.734 434.697 364.846 435.151 375.946 434.901C380.629 434.796 385.767 434.947 389.581 431.107C393.862 426.792 394.554 423.505 391.471 418.242C386.939 410.529 382.203 402.809 378.818 394.575Z" fill="url(#paint0_radial_248_90"/>
+<path d="M409.948 262.887C407.879 262.38 405.857 261.826 403.894 261.188C383.527 254.68 369.45 241.453 353.964 226.559C351.599 224.274 350.829 221.672 350.994 218.405C351.87 203.189 350.038 188.157 347.357 173.231C343.583 152.409 337.345 132.279 328.848 112.867C326.938 108.513 324.388 104.659 323.058 100.042C322.926 99.5347 322.821 98.9551 323.163 98.5533C323.532 98.1054 324.276 98.2107 324.836 98.4215C329.777 100.437 337.635 122.774 343.985 117.063C345.342 115.844 345.842 113.98 346.192 112.202C351.58 85.5899 344.782 44.5856 321.016 28.1246C310.101 20.556 298.126 13.1983 285.031 10.2539C278.338 8.76522 271.06 8.84424 264.901 11.8743C261.844 13.363 259.084 15.563 255.765 16.3601C249.843 17.8224 243.947 14.5025 238.105 12.724C231.017 10.5964 223.284 10.7018 216.275 13.0665C210.643 14.9504 205.018 18.2967 199.175 17.2098C191.073 15.6948 185.23 6.34776 176.839 3.48239C166.774 0.0307768 155.595 0.0307897 145.287 2.34284C115.704 8.98259 87.9265 29.7516 67.2366 51.1265C44.531 74.5764 35.5002 105.595 55.5775 133.906C62.7508 144.024 73.2901 151.908 85.3181 155.017C87.6565 155.63 90.1266 156.104 92.0632 157.54C99.7108 163.225 83.5659 178.441 80.1143 183.381C72.6775 194.085 65.7479 205.184 60.5969 217.186C51.0391 239.417 46.8695 261.774 43.5232 285.573C37.7332 326.735 29.9802 369.044 10.7263 406.221C7.61722 412.196 3.74404 418.144 1.30024 424.415C0.713994 425.903 0.529556 427.655 1.30024 429.039C1.75475 429.836 2.49251 430.448 3.28954 430.87C7.59089 433.261 14.1252 432.727 18.8811 432.754C33.2211 432.806 47.5611 432.859 61.9274 432.885C69.2325 432.912 76.5309 432.938 83.836 432.938C89.0924 432.938 96.8256 434.269 101.601 431.739C104.684 430.119 106.383 426.667 107.233 423.268C108.478 418.275 109.275 413.151 110.606 408.158C114.696 392.889 120.513 378.358 127.976 364.393C139.819 342.215 152.196 317.151 130.209 296.909C124.419 291.6 117.753 287.378 111.541 282.595C110.349 281.667 109.176 279.783 110.428 278.933C110.909 278.59 111.567 278.67 112.18 278.801C136.163 283.821 158.335 309.583 156.847 334.251C156.05 347.129 150.872 358.682 146.94 370.631C142.955 382.771 138.285 394.773 137.165 407.677C136.71 412.775 136.183 417.926 136.131 423.051C136.052 429.691 138.548 433.116 146.09 433.142C173.683 433.195 201.276 433.623 228.87 433.887C235.878 433.966 250.278 436.278 253.09 427.221C254.124 423.874 252.8 420.291 251.075 417.261C249.349 414.231 247.142 411.392 246.213 408.019C244.514 401.992 247.168 395.642 249.988 390.043C253.255 383.562 257.319 377.482 260.56 371C264.361 364.15 268.82 357.773 272.245 350.686C275.855 343.275 278.78 335.549 281.197 327.69C284.464 317.144 286.829 306.335 288.687 295.473C289.082 293.121 289.339 290.75 289.622 288.379C289.767 287.187 289.912 285.994 290.083 284.809C290.274 283.478 290.57 281.897 292.296 282.022C302.592 282.747 287.139 341.675 285.788 345.271C282.626 353.716 278.832 361.923 274.366 369.782C268.761 379.636 258.459 388.581 260.981 401.037C261.884 405.444 262.944 411.767 266.93 414.554C272.397 418.407 279.438 412.005 283.318 408.527C289.424 403.026 294.338 396.472 299.489 390.096C313.671 372.568 324.586 352.622 332.523 331.564C341.152 308.568 345.006 285.698 348.029 261.477C348.214 260.094 348.51 258.526 349.676 257.789C351.007 256.939 352.732 257.578 354.162 258.217C371.69 265.97 390.628 272.241 409.691 270.403C412.029 270.166 414.947 269.184 415 266.846C415.046 264.534 412.207 263.414 409.948 262.887ZM316.708 250.912C316.523 251.577 316.016 252.157 315.43 252.532C314.317 253.224 312.828 253.408 311.55 253.54C303.053 254.416 294.687 251.814 287.04 248.363C285.821 247.829 284.596 247.276 283.377 246.663C271.718 240.873 260.883 232.613 251.931 223.161C244.336 215.137 238.335 205.632 234.218 195.383C233.342 193.203 232.308 190.871 231.801 188.559C231.373 186.596 231.643 184.284 233.158 182.927C234.113 182.077 235.417 181.761 236.662 181.491C240.832 180.667 245.265 180.213 249.487 180.588C251.213 180.694 253.018 181.148 254.243 182.341C255.33 183.375 255.863 184.837 256.344 186.273C258.413 192.485 260.145 198.887 263.089 204.783C266.067 210.757 269.993 216.363 274.083 221.619C275.572 223.529 277.113 225.387 278.707 227.225C286.592 236.282 296.953 244.384 309.06 246.689C309.541 246.795 310.015 246.874 310.523 246.953C312.196 247.19 313.948 247.355 315.384 248.283C316.076 248.738 316.688 249.449 316.767 250.273C316.761 250.484 316.761 250.694 316.708 250.912Z" fill="url(#paint1_radial_248_90)"/>
+<defs>
+<radialGradient id="paint0_radial_248_90" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(-404.314 -402.661) scale(1393.49)">
+<stop stop-color="#fff"/>
+<stop offset="0.1185" stop-color="#fff"/>
+<stop offset="0.3434" stop-color="#fff"/>
+<stop offset="0.6486" stop-color="#fff"/>
+<stop offset="0.8139" stop-color="#fff"/>
+<stop offset="1" stop-color="#fff"/>
+</radialGradient>
+<radialGradient id="paint1_radial_248_90" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(-404.315 -402.661) scale(1393.49)">
+<stop stop-color="#fff"/>
+<stop offset="0.1185" stop-color="#fff"/>
+<stop offset="0.3434" stop-color="#fff"/>
+<stop offset="0.6486" stop-color="#fff"/>
+<stop offset="0.8139" stop-color="#fff"/>
+<stop offset="1" stop-color="#fff"/>
+</radialGradient>
+</defs>
+</svg>
diff --git a/src/collections/integrations/cloudnative-pg/index.mdx b/src/collections/integrations/cloudnative-pg/index.mdx
index 18694957d280..9eae4cdf2f1d 100644
--- a/src/collections/integrations/cloudnative-pg/index.mdx
+++ b/src/collections/integrations/cloudnative-pg/index.mdx
@@ -44,6 +44,24 @@ components: [
 "colorIcon": "icons/components/scheduled-backup/icons/color/scheduled-backup-color.svg",
 "whiteIcon": "icons/components/scheduled-backup/icons/white/scheduled-backup-white.svg",
 "description": "",
+},
+{
+"name": "database",
+"colorIcon": "icons/components/database/icons/color/database-color.svg",
+"whiteIcon": "icons/components/database/icons/white/database-white.svg",
+"description": "",
+},
+{
+"name": "publication",
+"colorIcon": "icons/components/publication/icons/color/publication-color.svg",
+"whiteIcon": "icons/components/publication/icons/white/publication-white.svg",
+"description": "",
+},
+{
+"name": "subscription",
+"colorIcon": "icons/components/subscription/icons/color/subscription-color.svg",
+"whiteIcon": "icons/components/subscription/icons/white/subscription-white.svg",
+"description": "",
 }]
 featureList: [
   "Automates PostgreSQL deployment and management",
diff --git a/src/collections/integrations/gatekeeper/icons/components/config-pod-status/icons/color/config-pod-status-color.svg b/src/collections/integrations/gatekeeper/icons/components/config-pod-status/icons/color/config-pod-status-color.svg
new file mode 100644
index 000000000000..fd8cf702971f
--- /dev/null
+++ b/src/collections/integrations/gatekeeper/icons/components/config-pod-status/icons/color/config-pod-status-color.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="16.37 -1.63 395.51 435.76"><style>svg {enable-background:new 0 0 432 434}</style><path fill="#bfbfbf" d="M71 214.5c7.5-26.7 20.9-50.1 38.4-68.8-5.9-4.4-29.3-22.6-30.4-36.9C77.3 85.4 100.7 6.7 100.7 6.7S30 92.8 25.1 127.6c-3.9 27.3 40.8 81.5 45.5 87v-.1h.4zm287.7-1.4v.2c0 .1.1.2.1.3 7.8-9.4 48.3-59.9 44.6-86-4.9-34.8-75.6-120.9-75.6-120.9s23.4 78.7 21.7 102.1c-1 13.7-22.3 30.8-29.4 36.2 17.5 18.4 31 41.6 38.6 68.1z"/><path fill="#566366" d="M358.7 213.2v-.2c-7.6-26.4-21.1-49.6-38.6-68.1-27.5-29-64.9-46.4-105.2-46.4v93h.1c9.9.1 17.9 8.2 17.9 18.1 0 1.2-.1 2.3-.3 3.4-1.6 8.3-8.8 14.6-17.6 14.7h-.3v34.5l-.2 163.4h3.5s38-55 58.5-70.7c24-18.4 82.2-41.2 82.2-41.2v-99.4l.3-.1c-.1-.2-.1-.5-.2-.7 0-.1 0-.2-.1-.3z"/><path fill="#7d9199" d="M214.7 262.3v-34.5c-8.3-.1-15.2-5.7-17.3-13.3-.4-1.5-.7-3.1-.7-4.8 0-10 8.1-18.1 18.1-18.1h.1V98.9c-40.5 0-78 17.5-105.5 46.8-17.5 18.6-30.9 42.1-38.4 68.8h-.3v100.7s58.2 22.8 82.2 41.2c19.9 15.3 58.3 69.4 58.3 69.4h3.6v-.1h-.2l.1-163.4z"/><path fill="#fff" d="M196.7 209.7c0 1.7.2 3.3.7 4.8 2.1 7.6 9 13.2 17.3 13.3h.3c8.7-.1 16-6.4 17.6-14.7.2-1.1.3-2.2.3-3.4 0-9.9-8-18-17.9-18.1h-.2c-10 0-18.1 8.1-18.1 18.1z"/></svg>
\ No newline at end of file
diff --git a/src/collections/integrations/gatekeeper/icons/components/config-pod-status/icons/white/config-pod-status-white.svg b/src/collections/integrations/gatekeeper/icons/components/config-pod-status/icons/white/config-pod-status-white.svg
new file mode 100644
index 000000000000..a2f8cc72d50d
--- /dev/null
+++ b/src/collections/integrations/gatekeeper/icons/components/config-pod-status/icons/white/config-pod-status-white.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="16.62 -1.63 395.51 435.76"><style>svg {enable-background:new 0 0 432 434}</style><g fill="#fff"><path d="M71.1 214.5c7.5-26.7 20.9-50.1 38.4-68.8-5.9-4.4-29.3-22.6-30.4-36.9C77.5 85.4 100.9 6.7 100.9 6.7S30.2 92.8 25.3 127.6c-3.9 27.3 40.8 81.5 45.5 87v-.1h.3zm287.8-1.4v.2c0 .1.1.2.1.3 7.8-9.4 48.3-59.9 44.6-86C398.7 92.8 328 6.7 328 6.7s23.4 78.7 21.7 102.1c-1 13.7-22.3 30.8-29.4 36.2 17.5 18.5 30.9 41.7 38.6 68.1z" opacity=".64"/><path d="M358.9 213.3v-.2c-7.6-26.4-21.1-49.6-38.6-68.1-27.5-29-64.9-46.4-105.2-46.4v93h.1c9.9.1 17.9 8.2 17.9 18.1 0 1.2-.1 2.3-.3 3.4-1.6 8.3-8.8 14.6-17.6 14.7h-.3v34.5l-.2 163.4h3.5s38-55 58.5-70.7c24-18.4 82.2-41.2 82.2-41.2v-99.4l.3-.1c-.1-.2-.1-.5-.2-.7 0-.1-.1-.2-.1-.3z" opacity=".85"/><path d="M214.9 262.3v-34.5c-8.3-.1-15.2-5.7-17.3-13.3-.4-1.5-.7-3.1-.7-4.8 0-10 8.1-18.1 18.1-18.1h.1V98.9c-40.5 0-78 17.5-105.5 46.8-17.5 18.6-30.9 42.1-38.4 68.8h-.3v100.7s58.2 22.8 82.2 41.2c19.9 15.3 58.3 69.4 58.3 69.4h3.6v-.1h-.2l.1-163.4z" opacity=".75"/></g></svg>
\ No newline at end of file
diff --git a/src/collections/integrations/gatekeeper/index.mdx b/src/collections/integrations/gatekeeper/index.mdx
index d9f70378ba35..a6ce516b6b8a 100644
--- a/src/collections/integrations/gatekeeper/index.mdx
+++ b/src/collections/integrations/gatekeeper/index.mdx
@@ -86,6 +86,12 @@ components: [
 "colorIcon": "icons/components/sync-set/icons/color/sync-set-color.svg",
 "whiteIcon": "icons/components/sync-set/icons/white/sync-set-white.svg",
 "description": "",
+},
+{
+"name": "config-pod-status",
+"colorIcon": "icons/components/config-pod-status/icons/color/config-pod-status-color.svg",
+"whiteIcon": "icons/components/config-pod-status/icons/white/config-pod-status-white.svg",
+"description": "",
 }]
 featureList: [
   "Native Kubernetes CRDs for instantiating the policy library (aka constraints)",
diff --git a/src/collections/integrations/k8s-config-connector/icons/components/discovery-engine-data-store/icons/color/discovery-engine-data-store-color.svg b/src/collections/integrations/k8s-config-connector/icons/components/discovery-engine-data-store/icons/color/discovery-engine-data-store-color.svg
new file mode 100644
index 000000000000..3a66f9c1117e
--- /dev/null
+++ b/src/collections/integrations/k8s-config-connector/icons/components/discovery-engine-data-store/icons/color/discovery-engine-data-store-color.svg
@@ -0,0 +1,5 @@
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M10.1893938,2 C10.3728304,2.00077434 10.5258338,2.13095973 10.5618102,2.30439506 L10.5698113,2.38112124 L10.5698113,4.33245019 L12.6188242,4.33245019 L12.6185298,2.38171121 C12.6190451,2.19767714 12.7494087,2.04435844 12.9226324,2.00831145 L12.9992416,2.00029499 L13.6211004,2 C13.8047946,2.00077434 13.9578302,2.13118557 13.9936134,2.30467737 L14.0015178,2.38141623 L14.0015178,4.33245019 L16.0505308,4.33245019 L16.0502364,2.38171121 C16.0510093,2.19767714 16.1814051,2.04458429 16.3544356,2.00859376 L16.4309482,2.00058997 L17.0525126,2.00029499 C17.2362068,2.00106932 17.3892424,2.13125471 17.42542,2.30469004 L17.4335189,2.38141623 L17.4332244,4.33245019 L19.2543403,4.33245019 C19.46215,4.33349903 19.6348304,4.48348275 19.6714654,4.68150582 L19.6786294,4.75781925 L19.6786294,6.5749298 L21.6189937,6.5749298 C21.8026879,6.57544603 21.9559489,6.70605085 21.9919857,6.87979269 L22,6.95664102 L22,7.57876539 C21.9994847,7.76305757 21.8688957,7.91663439 21.6956156,7.95254426 L21.6189937,7.9604766 L19.6786294,7.9604766 L19.6786294,10.0129856 L21.6189937,10.0129856 C21.8029455,10.0135018 21.9564642,10.1441066 21.9921668,10.3180461 L22,10.3949918 L22,11.0168212 C21.9994847,11.2008552 21.8688957,11.3543998 21.6956156,11.390108 L21.6189937,11.3979424 L19.6786294,11.3982374 L19.6786294,13.4510413 L21.6189937,13.4510413 C21.8029455,13.4515576 21.9564642,13.5823882 21.9921668,13.7559889 L22,13.8327525 L22,14.4548769 C21.9994847,14.638911 21.8688957,14.7924555 21.6956156,14.8281638 L21.6189937,14.8359982 L19.6786294,14.8362931 L19.6783349,16.6539937 C19.6775497,16.8624501 19.5276394,17.0357122 19.3299336,17.0722629 L19.2537514,17.0793627 L17.4335189,17.0793627 L17.4332244,19.0295117 C17.4329668,19.2138039 17.3024099,19.3676066 17.1289366,19.4035729 L17.0522181,19.4115179 L16.4315371,19.4115179 C16.2475853,19.4110017 16.0940666,19.280171 16.058364,19.1063727 L16.0505308,19.0295117 L16.0502364,17.0793627 L14.0015178,17.0793627 L14.0012234,19.0295117 C14.0009658,19.2138039 13.8706343,19.3673807 13.6974146,19.4034882 L13.620806,19.4115179 L12.9995361,19.4115179 C12.8155842,19.4110017 12.662291,19.280171 12.6266447,19.1063727 L12.6188242,19.0295117 L12.6182353,17.0793627 L11.606,17.079 L11.6075624,17.1291822 C11.6075624,19.7465558 9.57152078,21.8817501 7.01776046,21.9952542 L6.80378122,22 C4.15072611,22 2,19.8192606 2,17.1291822 C2,14.4391039 4.15072611,12.2583645 6.80378122,12.2583645 C6.85035544,12.2583645 6.89677486,12.2590365 6.94303054,12.2603716 L6.94200715,11.3982374 L5.00193724,11.3982374 C4.81824304,11.3977212 4.66498204,11.2671163 4.62933976,11.0935721 L4.62151983,11.0168212 L4.62122539,10.3944018 C4.62174066,10.2103677 4.75187886,10.057049 4.92504623,10.021002 L5.0016428,10.0129856 L6.94200715,10.0132806 L6.94171271,7.9604766 L5.00193724,7.9604766 C4.81824304,7.95970227 4.66520747,7.82929103 4.6294243,7.65599685 L4.62151983,7.57935536 L4.62093095,6.95605104 C4.62170386,6.77227509 4.75187426,6.61898865 4.92484841,6.58274807 L5.00134836,6.57463482 L6.94171271,6.57463482 L6.94171271,4.75752426 C6.94249788,4.54906786 7.09264084,4.37603884 7.29039837,4.33953996 L7.36659066,4.33245019 L9.18711763,4.33245019 L9.18682319,2.38171121 C9.1875961,2.19767714 9.3177665,2.04435844 9.4909379,2.00831145 L9.56753504,2.00029499 L10.1893938,2 Z M6.72943699,14.4904938 L6.00155422,15.2285341 L7.54520096,16.7942708 L4.07020096,16.7941541 L4.07020096,17.8379007 L7.54520096,17.8382708 L6.00155422,19.4020024 L6.72921198,20.1402708 L9.51619567,17.3161415 L6.72943699,14.4904938 Z M18.2467641,5.76017991 L8.37416681,5.7604749 L8.37494037,12.5248503 C9.8017631,13.0253356 10.9235874,14.1884603 11.3824464,15.6512622 L18.2458808,15.651043 L18.2467641,5.76017991 Z M15.3046241,8.28260075 C15.5126956,8.28312517 15.6856377,8.43351678 15.7219141,8.63163695 L15.7289132,8.70796981 L15.7289132,12.7038431 C15.728128,12.9122995 15.5782177,13.0857947 15.3803051,13.1223972 L15.3040353,13.1295072 L11.3158357,13.1295072 C11.1077643,13.1284583 10.9348221,12.9782415 10.898339,12.7801667 L10.8912522,12.7038431 L10.8909577,8.70796981 C10.8917429,8.4995134 11.0416532,8.32625131 11.2393591,8.28990781 L11.3155413,8.28289573 L15.3046241,8.28260075 Z" fill="#4285F4"></path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/collections/integrations/k8s-config-connector/icons/components/discovery-engine-data-store/icons/white/discovery-engine-data-store-white.svg b/src/collections/integrations/k8s-config-connector/icons/components/discovery-engine-data-store/icons/white/discovery-engine-data-store-white.svg
new file mode 100644
index 000000000000..941c48f8914b
--- /dev/null
+++ b/src/collections/integrations/k8s-config-connector/icons/components/discovery-engine-data-store/icons/white/discovery-engine-data-store-white.svg
@@ -0,0 +1,3 @@
+<svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.1894 2C10.3728 2.00077 10.5258 2.13096 10.5618 2.30439L10.5698 2.38112V4.33245H12.6188L12.6185 2.38171C12.619 2.19768 12.7494 2.04436 12.9226 2.00831L12.9992 2.00029L13.6211 2C13.8048 2.00077 13.9578 2.13119 13.9936 2.30468L14.0015 2.38142V4.33245H16.0505L16.0502 2.38171C16.051 2.19768 16.1814 2.04458 16.3544 2.00859L16.4309 2.00059L17.0525 2.00029C17.2362 2.00107 17.3892 2.13125 17.4254 2.30469L17.4335 2.38142L17.4332 4.33245H19.2543C19.4622 4.3335 19.6348 4.48348 19.6715 4.68151L19.6786 4.75782V6.57493H21.619C21.8027 6.57545 21.9559 6.70605 21.992 6.87979L22 6.95664V7.57877C21.9995 7.76306 21.8689 7.91663 21.6956 7.95254L21.619 7.96048H19.6786V10.013H21.619C21.8029 10.0135 21.9565 10.1441 21.9922 10.318L22 10.395V11.0168C21.9995 11.2009 21.8689 11.3544 21.6956 11.3901L21.619 11.3979L19.6786 11.3982V13.451H21.619C21.8029 13.4516 21.9565 13.5824 21.9922 13.756L22 13.8328V14.4549C21.9995 14.6389 21.8689 14.7925 21.6956 14.8282L21.619 14.836L19.6786 14.8363L19.6783 16.654C19.6775 16.8625 19.5276 17.0357 19.3299 17.0723L19.2538 17.0794H17.4335L17.4332 19.0295C17.433 19.2138 17.3024 19.3676 17.1289 19.4036L17.0522 19.4115H16.4315C16.2476 19.411 16.0941 19.2802 16.0584 19.1064L16.0505 19.0295L16.0502 17.0794H14.0015L14.0012 19.0295C14.001 19.2138 13.8706 19.3674 13.6974 19.4035L13.6208 19.4115H12.9995C12.8156 19.411 12.6623 19.2802 12.6266 19.1064L12.6188 19.0295L12.6182 17.0794L11.606 17.079L11.6076 17.1292C11.6076 19.7466 9.57152 21.8818 7.01776 21.9953L6.80378 22C4.15073 22 2 19.8193 2 17.1292C2 14.4391 4.15073 12.2584 6.80378 12.2584C6.85036 12.2584 6.89677 12.259 6.94303 12.2604L6.94201 11.3982H5.00194C4.81824 11.3977 4.66498 11.2671 4.62934 11.0936L4.62152 11.0168L4.62123 10.3944C4.62174 10.2104 4.75188 10.057 4.92505 10.021L5.00164 10.013L6.94201 10.0133L6.94171 7.96048H5.00194C4.81824 7.9597 4.66521 7.82929 4.62942 7.656L4.62152 7.57936L4.62093 6.95605C4.6217 6.77227 4.75187 6.61899 4.92485 6.58275L5.00135 6.57464H6.94171V4.75752C6.9425 4.54907 7.09264 4.37604 7.2904 4.33954L7.36659 4.33245H9.18712L9.18682 2.38171C9.1876 2.19768 9.31777 2.04436 9.49094 2.00831L9.56754 2.00029L10.1894 2ZM6.72944 14.4905L6.00155 15.2285L7.5452 16.7943L4.0702 16.7942V17.8379L7.5452 17.8383L6.00155 19.402L6.72921 20.1403L9.5162 17.3161L6.72944 14.4905ZM18.2468 5.76018L8.37417 5.76047L8.37494 12.5248C9.80176 13.0253 10.9236 14.1885 11.3824 15.6513L18.2459 15.651L18.2468 5.76018ZM15.3046 8.2826C15.5127 8.28312 15.6856 8.43352 15.7219 8.63164L15.7289 8.70797V12.7038C15.7281 12.9123 15.5782 13.0858 15.3803 13.1224L15.304 13.1295H11.3158C11.1078 13.1285 10.9348 12.9782 10.8983 12.7802L10.8913 12.7038L10.891 8.70797C10.8917 8.49951 11.0417 8.32625 11.2394 8.28991L11.3155 8.2829L15.3046 8.2826Z" fill="white"/>
+</svg>
diff --git a/src/collections/integrations/k8s-config-connector/icons/components/kms-autokey-config/icons/color/kms-autokey-config-color.svg b/src/collections/integrations/k8s-config-connector/icons/components/kms-autokey-config/icons/color/kms-autokey-config-color.svg
new file mode 100644
index 000000000000..3a66f9c1117e
--- /dev/null
+++ b/src/collections/integrations/k8s-config-connector/icons/components/kms-autokey-config/icons/color/kms-autokey-config-color.svg
@@ -0,0 +1,5 @@
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M10.1893938,2 C10.3728304,2.00077434 10.5258338,2.13095973 10.5618102,2.30439506 L10.5698113,2.38112124 L10.5698113,4.33245019 L12.6188242,4.33245019 L12.6185298,2.38171121 C12.6190451,2.19767714 12.7494087,2.04435844 12.9226324,2.00831145 L12.9992416,2.00029499 L13.6211004,2 C13.8047946,2.00077434 13.9578302,2.13118557 13.9936134,2.30467737 L14.0015178,2.38141623 L14.0015178,4.33245019 L16.0505308,4.33245019 L16.0502364,2.38171121 C16.0510093,2.19767714 16.1814051,2.04458429 16.3544356,2.00859376 L16.4309482,2.00058997 L17.0525126,2.00029499 C17.2362068,2.00106932 17.3892424,2.13125471 17.42542,2.30469004 L17.4335189,2.38141623 L17.4332244,4.33245019 L19.2543403,4.33245019 C19.46215,4.33349903 19.6348304,4.48348275 19.6714654,4.68150582 L19.6786294,4.75781925 L19.6786294,6.5749298 L21.6189937,6.5749298 C21.8026879,6.57544603 21.9559489,6.70605085 21.9919857,6.87979269 L22,6.95664102 L22,7.57876539 C21.9994847,7.76305757 21.8688957,7.91663439 21.6956156,7.95254426 L21.6189937,7.9604766 L19.6786294,7.9604766 L19.6786294,10.0129856 L21.6189937,10.0129856 C21.8029455,10.0135018 21.9564642,10.1441066 21.9921668,10.3180461 L22,10.3949918 L22,11.0168212 C21.9994847,11.2008552 21.8688957,11.3543998 21.6956156,11.390108 L21.6189937,11.3979424 L19.6786294,11.3982374 L19.6786294,13.4510413 L21.6189937,13.4510413 C21.8029455,13.4515576 21.9564642,13.5823882 21.9921668,13.7559889 L22,13.8327525 L22,14.4548769 C21.9994847,14.638911 21.8688957,14.7924555 21.6956156,14.8281638 L21.6189937,14.8359982 L19.6786294,14.8362931 L19.6783349,16.6539937 C19.6775497,16.8624501 19.5276394,17.0357122 19.3299336,17.0722629 L19.2537514,17.0793627 L17.4335189,17.0793627 L17.4332244,19.0295117 C17.4329668,19.2138039 17.3024099,19.3676066 17.1289366,19.4035729 L17.0522181,19.4115179 L16.4315371,19.4115179 C16.2475853,19.4110017 16.0940666,19.280171 16.058364,19.1063727 L16.0505308,19.0295117 L16.0502364,17.0793627 L14.0015178,17.0793627 L14.0012234,19.0295117 C14.0009658,19.2138039 13.8706343,19.3673807 13.6974146,19.4034882 L13.620806,19.4115179 L12.9995361,19.4115179 C12.8155842,19.4110017 12.662291,19.280171 12.6266447,19.1063727 L12.6188242,19.0295117 L12.6182353,17.0793627 L11.606,17.079 L11.6075624,17.1291822 C11.6075624,19.7465558 9.57152078,21.8817501 7.01776046,21.9952542 L6.80378122,22 C4.15072611,22 2,19.8192606 2,17.1291822 C2,14.4391039 4.15072611,12.2583645 6.80378122,12.2583645 C6.85035544,12.2583645 6.89677486,12.2590365 6.94303054,12.2603716 L6.94200715,11.3982374 L5.00193724,11.3982374 C4.81824304,11.3977212 4.66498204,11.2671163 4.62933976,11.0935721 L4.62151983,11.0168212 L4.62122539,10.3944018 C4.62174066,10.2103677 4.75187886,10.057049 4.92504623,10.021002 L5.0016428,10.0129856 L6.94200715,10.0132806 L6.94171271,7.9604766 L5.00193724,7.9604766 C4.81824304,7.95970227 4.66520747,7.82929103 4.6294243,7.65599685 L4.62151983,7.57935536 L4.62093095,6.95605104 C4.62170386,6.77227509 4.75187426,6.61898865 4.92484841,6.58274807 L5.00134836,6.57463482 L6.94171271,6.57463482 L6.94171271,4.75752426 C6.94249788,4.54906786 7.09264084,4.37603884 7.29039837,4.33953996 L7.36659066,4.33245019 L9.18711763,4.33245019 L9.18682319,2.38171121 C9.1875961,2.19767714 9.3177665,2.04435844 9.4909379,2.00831145 L9.56753504,2.00029499 L10.1893938,2 Z M6.72943699,14.4904938 L6.00155422,15.2285341 L7.54520096,16.7942708 L4.07020096,16.7941541 L4.07020096,17.8379007 L7.54520096,17.8382708 L6.00155422,19.4020024 L6.72921198,20.1402708 L9.51619567,17.3161415 L6.72943699,14.4904938 Z M18.2467641,5.76017991 L8.37416681,5.7604749 L8.37494037,12.5248503 C9.8017631,13.0253356 10.9235874,14.1884603 11.3824464,15.6512622 L18.2458808,15.651043 L18.2467641,5.76017991 Z M15.3046241,8.28260075 C15.5126956,8.28312517 15.6856377,8.43351678 15.7219141,8.63163695 L15.7289132,8.70796981 L15.7289132,12.7038431 C15.728128,12.9122995 15.5782177,13.0857947 15.3803051,13.1223972 L15.3040353,13.1295072 L11.3158357,13.1295072 C11.1077643,13.1284583 10.9348221,12.9782415 10.898339,12.7801667 L10.8912522,12.7038431 L10.8909577,8.70796981 C10.8917429,8.4995134 11.0416532,8.32625131 11.2393591,8.28990781 L11.3155413,8.28289573 L15.3046241,8.28260075 Z" fill="#4285F4"></path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/collections/integrations/k8s-config-connector/icons/components/kms-autokey-config/icons/white/kms-autokey-config-white.svg b/src/collections/integrations/k8s-config-connector/icons/components/kms-autokey-config/icons/white/kms-autokey-config-white.svg
new file mode 100644
index 000000000000..941c48f8914b
--- /dev/null
+++ b/src/collections/integrations/k8s-config-connector/icons/components/kms-autokey-config/icons/white/kms-autokey-config-white.svg
@@ -0,0 +1,3 @@
+<svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.1894 2C10.3728 2.00077 10.5258 2.13096 10.5618 2.30439L10.5698 2.38112V4.33245H12.6188L12.6185 2.38171C12.619 2.19768 12.7494 2.04436 12.9226 2.00831L12.9992 2.00029L13.6211 2C13.8048 2.00077 13.9578 2.13119 13.9936 2.30468L14.0015 2.38142V4.33245H16.0505L16.0502 2.38171C16.051 2.19768 16.1814 2.04458 16.3544 2.00859L16.4309 2.00059L17.0525 2.00029C17.2362 2.00107 17.3892 2.13125 17.4254 2.30469L17.4335 2.38142L17.4332 4.33245H19.2543C19.4622 4.3335 19.6348 4.48348 19.6715 4.68151L19.6786 4.75782V6.57493H21.619C21.8027 6.57545 21.9559 6.70605 21.992 6.87979L22 6.95664V7.57877C21.9995 7.76306 21.8689 7.91663 21.6956 7.95254L21.619 7.96048H19.6786V10.013H21.619C21.8029 10.0135 21.9565 10.1441 21.9922 10.318L22 10.395V11.0168C21.9995 11.2009 21.8689 11.3544 21.6956 11.3901L21.619 11.3979L19.6786 11.3982V13.451H21.619C21.8029 13.4516 21.9565 13.5824 21.9922 13.756L22 13.8328V14.4549C21.9995 14.6389 21.8689 14.7925 21.6956 14.8282L21.619 14.836L19.6786 14.8363L19.6783 16.654C19.6775 16.8625 19.5276 17.0357 19.3299 17.0723L19.2538 17.0794H17.4335L17.4332 19.0295C17.433 19.2138 17.3024 19.3676 17.1289 19.4036L17.0522 19.4115H16.4315C16.2476 19.411 16.0941 19.2802 16.0584 19.1064L16.0505 19.0295L16.0502 17.0794H14.0015L14.0012 19.0295C14.001 19.2138 13.8706 19.3674 13.6974 19.4035L13.6208 19.4115H12.9995C12.8156 19.411 12.6623 19.2802 12.6266 19.1064L12.6188 19.0295L12.6182 17.0794L11.606 17.079L11.6076 17.1292C11.6076 19.7466 9.57152 21.8818 7.01776 21.9953L6.80378 22C4.15073 22 2 19.8193 2 17.1292C2 14.4391 4.15073 12.2584 6.80378 12.2584C6.85036 12.2584 6.89677 12.259 6.94303 12.2604L6.94201 11.3982H5.00194C4.81824 11.3977 4.66498 11.2671 4.62934 11.0936L4.62152 11.0168L4.62123 10.3944C4.62174 10.2104 4.75188 10.057 4.92505 10.021L5.00164 10.013L6.94201 10.0133L6.94171 7.96048H5.00194C4.81824 7.9597 4.66521 7.82929 4.62942 7.656L4.62152 7.57936L4.62093 6.95605C4.6217 6.77227 4.75187 6.61899 4.92485 6.58275L5.00135 6.57464H6.94171V4.75752C6.9425 4.54907 7.09264 4.37604 7.2904 4.33954L7.36659 4.33245H9.18712L9.18682 2.38171C9.1876 2.19768 9.31777 2.04436 9.49094 2.00831L9.56754 2.00029L10.1894 2ZM6.72944 14.4905L6.00155 15.2285L7.5452 16.7943L4.0702 16.7942V17.8379L7.5452 17.8383L6.00155 19.402L6.72921 20.1403L9.5162 17.3161L6.72944 14.4905ZM18.2468 5.76018L8.37417 5.76047L8.37494 12.5248C9.80176 13.0253 10.9236 14.1885 11.3824 15.6513L18.2459 15.651L18.2468 5.76018ZM15.3046 8.2826C15.5127 8.28312 15.6856 8.43352 15.7219 8.63164L15.7289 8.70797V12.7038C15.7281 12.9123 15.5782 13.0858 15.3803 13.1224L15.304 13.1295H11.3158C11.1078 13.1285 10.9348 12.9782 10.8983 12.7802L10.8913 12.7038L10.891 8.70797C10.8917 8.49951 11.0417 8.32625 11.2394 8.28991L11.3155 8.2829L15.3046 8.2826Z" fill="white"/>
+</svg>
diff --git a/src/collections/integrations/k8s-config-connector/icons/components/kms-key-handle/icons/color/kms-key-handle-color.svg b/src/collections/integrations/k8s-config-connector/icons/components/kms-key-handle/icons/color/kms-key-handle-color.svg
new file mode 100644
index 000000000000..3a66f9c1117e
--- /dev/null
+++ b/src/collections/integrations/k8s-config-connector/icons/components/kms-key-handle/icons/color/kms-key-handle-color.svg
@@ -0,0 +1,5 @@
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M10.1893938,2 C10.3728304,2.00077434 10.5258338,2.13095973 10.5618102,2.30439506 L10.5698113,2.38112124 L10.5698113,4.33245019 L12.6188242,4.33245019 L12.6185298,2.38171121 C12.6190451,2.19767714 12.7494087,2.04435844 12.9226324,2.00831145 L12.9992416,2.00029499 L13.6211004,2 C13.8047946,2.00077434 13.9578302,2.13118557 13.9936134,2.30467737 L14.0015178,2.38141623 L14.0015178,4.33245019 L16.0505308,4.33245019 L16.0502364,2.38171121 C16.0510093,2.19767714 16.1814051,2.04458429 16.3544356,2.00859376 L16.4309482,2.00058997 L17.0525126,2.00029499 C17.2362068,2.00106932 17.3892424,2.13125471 17.42542,2.30469004 L17.4335189,2.38141623 L17.4332244,4.33245019 L19.2543403,4.33245019 C19.46215,4.33349903 19.6348304,4.48348275 19.6714654,4.68150582 L19.6786294,4.75781925 L19.6786294,6.5749298 L21.6189937,6.5749298 C21.8026879,6.57544603 21.9559489,6.70605085 21.9919857,6.87979269 L22,6.95664102 L22,7.57876539 C21.9994847,7.76305757 21.8688957,7.91663439 21.6956156,7.95254426 L21.6189937,7.9604766 L19.6786294,7.9604766 L19.6786294,10.0129856 L21.6189937,10.0129856 C21.8029455,10.0135018 21.9564642,10.1441066 21.9921668,10.3180461 L22,10.3949918 L22,11.0168212 C21.9994847,11.2008552 21.8688957,11.3543998 21.6956156,11.390108 L21.6189937,11.3979424 L19.6786294,11.3982374 L19.6786294,13.4510413 L21.6189937,13.4510413 C21.8029455,13.4515576 21.9564642,13.5823882 21.9921668,13.7559889 L22,13.8327525 L22,14.4548769 C21.9994847,14.638911 21.8688957,14.7924555 21.6956156,14.8281638 L21.6189937,14.8359982 L19.6786294,14.8362931 L19.6783349,16.6539937 C19.6775497,16.8624501 19.5276394,17.0357122 19.3299336,17.0722629 L19.2537514,17.0793627 L17.4335189,17.0793627 L17.4332244,19.0295117 C17.4329668,19.2138039 17.3024099,19.3676066 17.1289366,19.4035729 L17.0522181,19.4115179 L16.4315371,19.4115179 C16.2475853,19.4110017 16.0940666,19.280171 16.058364,19.1063727 L16.0505308,19.0295117 L16.0502364,17.0793627 L14.0015178,17.0793627 L14.0012234,19.0295117 C14.0009658,19.2138039 13.8706343,19.3673807 13.6974146,19.4034882 L13.620806,19.4115179 L12.9995361,19.4115179 C12.8155842,19.4110017 12.662291,19.280171 12.6266447,19.1063727 L12.6188242,19.0295117 L12.6182353,17.0793627 L11.606,17.079 L11.6075624,17.1291822 C11.6075624,19.7465558 9.57152078,21.8817501 7.01776046,21.9952542 L6.80378122,22 C4.15072611,22 2,19.8192606 2,17.1291822 C2,14.4391039 4.15072611,12.2583645 6.80378122,12.2583645 C6.85035544,12.2583645 6.89677486,12.2590365 6.94303054,12.2603716 L6.94200715,11.3982374 L5.00193724,11.3982374 C4.81824304,11.3977212 4.66498204,11.2671163 4.62933976,11.0935721 L4.62151983,11.0168212 L4.62122539,10.3944018 C4.62174066,10.2103677 4.75187886,10.057049 4.92504623,10.021002 L5.0016428,10.0129856 L6.94200715,10.0132806 L6.94171271,7.9604766 L5.00193724,7.9604766 C4.81824304,7.95970227 4.66520747,7.82929103 4.6294243,7.65599685 L4.62151983,7.57935536 L4.62093095,6.95605104 C4.62170386,6.77227509 4.75187426,6.61898865 4.92484841,6.58274807 L5.00134836,6.57463482 L6.94171271,6.57463482 L6.94171271,4.75752426 C6.94249788,4.54906786 7.09264084,4.37603884 7.29039837,4.33953996 L7.36659066,4.33245019 L9.18711763,4.33245019 L9.18682319,2.38171121 C9.1875961,2.19767714 9.3177665,2.04435844 9.4909379,2.00831145 L9.56753504,2.00029499 L10.1893938,2 Z M6.72943699,14.4904938 L6.00155422,15.2285341 L7.54520096,16.7942708 L4.07020096,16.7941541 L4.07020096,17.8379007 L7.54520096,17.8382708 L6.00155422,19.4020024 L6.72921198,20.1402708 L9.51619567,17.3161415 L6.72943699,14.4904938 Z M18.2467641,5.76017991 L8.37416681,5.7604749 L8.37494037,12.5248503 C9.8017631,13.0253356 10.9235874,14.1884603 11.3824464,15.6512622 L18.2458808,15.651043 L18.2467641,5.76017991 Z M15.3046241,8.28260075 C15.5126956,8.28312517 15.6856377,8.43351678 15.7219141,8.63163695 L15.7289132,8.70796981 L15.7289132,12.7038431 C15.728128,12.9122995 15.5782177,13.0857947 15.3803051,13.1223972 L15.3040353,13.1295072 L11.3158357,13.1295072 C11.1077643,13.1284583 10.9348221,12.9782415 10.898339,12.7801667 L10.8912522,12.7038431 L10.8909577,8.70796981 C10.8917429,8.4995134 11.0416532,8.32625131 11.2393591,8.28990781 L11.3155413,8.28289573 L15.3046241,8.28260075 Z" fill="#4285F4"></path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/collections/integrations/k8s-config-connector/icons/components/kms-key-handle/icons/white/kms-key-handle-white.svg b/src/collections/integrations/k8s-config-connector/icons/components/kms-key-handle/icons/white/kms-key-handle-white.svg
new file mode 100644
index 000000000000..941c48f8914b
--- /dev/null
+++ b/src/collections/integrations/k8s-config-connector/icons/components/kms-key-handle/icons/white/kms-key-handle-white.svg
@@ -0,0 +1,3 @@
+<svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.1894 2C10.3728 2.00077 10.5258 2.13096 10.5618 2.30439L10.5698 2.38112V4.33245H12.6188L12.6185 2.38171C12.619 2.19768 12.7494 2.04436 12.9226 2.00831L12.9992 2.00029L13.6211 2C13.8048 2.00077 13.9578 2.13119 13.9936 2.30468L14.0015 2.38142V4.33245H16.0505L16.0502 2.38171C16.051 2.19768 16.1814 2.04458 16.3544 2.00859L16.4309 2.00059L17.0525 2.00029C17.2362 2.00107 17.3892 2.13125 17.4254 2.30469L17.4335 2.38142L17.4332 4.33245H19.2543C19.4622 4.3335 19.6348 4.48348 19.6715 4.68151L19.6786 4.75782V6.57493H21.619C21.8027 6.57545 21.9559 6.70605 21.992 6.87979L22 6.95664V7.57877C21.9995 7.76306 21.8689 7.91663 21.6956 7.95254L21.619 7.96048H19.6786V10.013H21.619C21.8029 10.0135 21.9565 10.1441 21.9922 10.318L22 10.395V11.0168C21.9995 11.2009 21.8689 11.3544 21.6956 11.3901L21.619 11.3979L19.6786 11.3982V13.451H21.619C21.8029 13.4516 21.9565 13.5824 21.9922 13.756L22 13.8328V14.4549C21.9995 14.6389 21.8689 14.7925 21.6956 14.8282L21.619 14.836L19.6786 14.8363L19.6783 16.654C19.6775 16.8625 19.5276 17.0357 19.3299 17.0723L19.2538 17.0794H17.4335L17.4332 19.0295C17.433 19.2138 17.3024 19.3676 17.1289 19.4036L17.0522 19.4115H16.4315C16.2476 19.411 16.0941 19.2802 16.0584 19.1064L16.0505 19.0295L16.0502 17.0794H14.0015L14.0012 19.0295C14.001 19.2138 13.8706 19.3674 13.6974 19.4035L13.6208 19.4115H12.9995C12.8156 19.411 12.6623 19.2802 12.6266 19.1064L12.6188 19.0295L12.6182 17.0794L11.606 17.079L11.6076 17.1292C11.6076 19.7466 9.57152 21.8818 7.01776 21.9953L6.80378 22C4.15073 22 2 19.8193 2 17.1292C2 14.4391 4.15073 12.2584 6.80378 12.2584C6.85036 12.2584 6.89677 12.259 6.94303 12.2604L6.94201 11.3982H5.00194C4.81824 11.3977 4.66498 11.2671 4.62934 11.0936L4.62152 11.0168L4.62123 10.3944C4.62174 10.2104 4.75188 10.057 4.92505 10.021L5.00164 10.013L6.94201 10.0133L6.94171 7.96048H5.00194C4.81824 7.9597 4.66521 7.82929 4.62942 7.656L4.62152 7.57936L4.62093 6.95605C4.6217 6.77227 4.75187 6.61899 4.92485 6.58275L5.00135 6.57464H6.94171V4.75752C6.9425 4.54907 7.09264 4.37604 7.2904 4.33954L7.36659 4.33245H9.18712L9.18682 2.38171C9.1876 2.19768 9.31777 2.04436 9.49094 2.00831L9.56754 2.00029L10.1894 2ZM6.72944 14.4905L6.00155 15.2285L7.5452 16.7943L4.0702 16.7942V17.8379L7.5452 17.8383L6.00155 19.402L6.72921 20.1403L9.5162 17.3161L6.72944 14.4905ZM18.2468 5.76018L8.37417 5.76047L8.37494 12.5248C9.80176 13.0253 10.9236 14.1885 11.3824 15.6513L18.2459 15.651L18.2468 5.76018ZM15.3046 8.2826C15.5127 8.28312 15.6856 8.43352 15.7219 8.63164L15.7289 8.70797V12.7038C15.7281 12.9123 15.5782 13.0858 15.3803 13.1224L15.304 13.1295H11.3158C11.1078 13.1285 10.9348 12.9782 10.8983 12.7802L10.8913 12.7038L10.891 8.70797C10.8917 8.49951 11.0417 8.32625 11.2394 8.28991L11.3155 8.2829L15.3046 8.2826Z" fill="white"/>
+</svg>
diff --git a/src/collections/integrations/k8s-config-connector/icons/components/privileged-access-manager-entitlement/icons/color/privileged-access-manager-entitlement-color.svg b/src/collections/integrations/k8s-config-connector/icons/components/privileged-access-manager-entitlement/icons/color/privileged-access-manager-entitlement-color.svg
new file mode 100644
index 000000000000..3a66f9c1117e
--- /dev/null
+++ b/src/collections/integrations/k8s-config-connector/icons/components/privileged-access-manager-entitlement/icons/color/privileged-access-manager-entitlement-color.svg
@@ -0,0 +1,5 @@
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M10.1893938,2 C10.3728304,2.00077434 10.5258338,2.13095973 10.5618102,2.30439506 L10.5698113,2.38112124 L10.5698113,4.33245019 L12.6188242,4.33245019 L12.6185298,2.38171121 C12.6190451,2.19767714 12.7494087,2.04435844 12.9226324,2.00831145 L12.9992416,2.00029499 L13.6211004,2 C13.8047946,2.00077434 13.9578302,2.13118557 13.9936134,2.30467737 L14.0015178,2.38141623 L14.0015178,4.33245019 L16.0505308,4.33245019 L16.0502364,2.38171121 C16.0510093,2.19767714 16.1814051,2.04458429 16.3544356,2.00859376 L16.4309482,2.00058997 L17.0525126,2.00029499 C17.2362068,2.00106932 17.3892424,2.13125471 17.42542,2.30469004 L17.4335189,2.38141623 L17.4332244,4.33245019 L19.2543403,4.33245019 C19.46215,4.33349903 19.6348304,4.48348275 19.6714654,4.68150582 L19.6786294,4.75781925 L19.6786294,6.5749298 L21.6189937,6.5749298 C21.8026879,6.57544603 21.9559489,6.70605085 21.9919857,6.87979269 L22,6.95664102 L22,7.57876539 C21.9994847,7.76305757 21.8688957,7.91663439 21.6956156,7.95254426 L21.6189937,7.9604766 L19.6786294,7.9604766 L19.6786294,10.0129856 L21.6189937,10.0129856 C21.8029455,10.0135018 21.9564642,10.1441066 21.9921668,10.3180461 L22,10.3949918 L22,11.0168212 C21.9994847,11.2008552 21.8688957,11.3543998 21.6956156,11.390108 L21.6189937,11.3979424 L19.6786294,11.3982374 L19.6786294,13.4510413 L21.6189937,13.4510413 C21.8029455,13.4515576 21.9564642,13.5823882 21.9921668,13.7559889 L22,13.8327525 L22,14.4548769 C21.9994847,14.638911 21.8688957,14.7924555 21.6956156,14.8281638 L21.6189937,14.8359982 L19.6786294,14.8362931 L19.6783349,16.6539937 C19.6775497,16.8624501 19.5276394,17.0357122 19.3299336,17.0722629 L19.2537514,17.0793627 L17.4335189,17.0793627 L17.4332244,19.0295117 C17.4329668,19.2138039 17.3024099,19.3676066 17.1289366,19.4035729 L17.0522181,19.4115179 L16.4315371,19.4115179 C16.2475853,19.4110017 16.0940666,19.280171 16.058364,19.1063727 L16.0505308,19.0295117 L16.0502364,17.0793627 L14.0015178,17.0793627 L14.0012234,19.0295117 C14.0009658,19.2138039 13.8706343,19.3673807 13.6974146,19.4034882 L13.620806,19.4115179 L12.9995361,19.4115179 C12.8155842,19.4110017 12.662291,19.280171 12.6266447,19.1063727 L12.6188242,19.0295117 L12.6182353,17.0793627 L11.606,17.079 L11.6075624,17.1291822 C11.6075624,19.7465558 9.57152078,21.8817501 7.01776046,21.9952542 L6.80378122,22 C4.15072611,22 2,19.8192606 2,17.1291822 C2,14.4391039 4.15072611,12.2583645 6.80378122,12.2583645 C6.85035544,12.2583645 6.89677486,12.2590365 6.94303054,12.2603716 L6.94200715,11.3982374 L5.00193724,11.3982374 C4.81824304,11.3977212 4.66498204,11.2671163 4.62933976,11.0935721 L4.62151983,11.0168212 L4.62122539,10.3944018 C4.62174066,10.2103677 4.75187886,10.057049 4.92504623,10.021002 L5.0016428,10.0129856 L6.94200715,10.0132806 L6.94171271,7.9604766 L5.00193724,7.9604766 C4.81824304,7.95970227 4.66520747,7.82929103 4.6294243,7.65599685 L4.62151983,7.57935536 L4.62093095,6.95605104 C4.62170386,6.77227509 4.75187426,6.61898865 4.92484841,6.58274807 L5.00134836,6.57463482 L6.94171271,6.57463482 L6.94171271,4.75752426 C6.94249788,4.54906786 7.09264084,4.37603884 7.29039837,4.33953996 L7.36659066,4.33245019 L9.18711763,4.33245019 L9.18682319,2.38171121 C9.1875961,2.19767714 9.3177665,2.04435844 9.4909379,2.00831145 L9.56753504,2.00029499 L10.1893938,2 Z M6.72943699,14.4904938 L6.00155422,15.2285341 L7.54520096,16.7942708 L4.07020096,16.7941541 L4.07020096,17.8379007 L7.54520096,17.8382708 L6.00155422,19.4020024 L6.72921198,20.1402708 L9.51619567,17.3161415 L6.72943699,14.4904938 Z M18.2467641,5.76017991 L8.37416681,5.7604749 L8.37494037,12.5248503 C9.8017631,13.0253356 10.9235874,14.1884603 11.3824464,15.6512622 L18.2458808,15.651043 L18.2467641,5.76017991 Z M15.3046241,8.28260075 C15.5126956,8.28312517 15.6856377,8.43351678 15.7219141,8.63163695 L15.7289132,8.70796981 L15.7289132,12.7038431 C15.728128,12.9122995 15.5782177,13.0857947 15.3803051,13.1223972 L15.3040353,13.1295072 L11.3158357,13.1295072 C11.1077643,13.1284583 10.9348221,12.9782415 10.898339,12.7801667 L10.8912522,12.7038431 L10.8909577,8.70796981 C10.8917429,8.4995134 11.0416532,8.32625131 11.2393591,8.28990781 L11.3155413,8.28289573 L15.3046241,8.28260075 Z" fill="#4285F4"></path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/collections/integrations/k8s-config-connector/icons/components/privileged-access-manager-entitlement/icons/white/privileged-access-manager-entitlement-white.svg b/src/collections/integrations/k8s-config-connector/icons/components/privileged-access-manager-entitlement/icons/white/privileged-access-manager-entitlement-white.svg
new file mode 100644
index 000000000000..d2a4a09d44fa
--- /dev/null
+++ b/src/collections/integrations/k8s-config-connector/icons/components/privileged-access-manager-entitlement/icons/white/privileged-access-manager-entitlement-white.svg
@@ -0,0 +1,3 @@
+<svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.1894 2C10.3728 2.00077 10.5258 2.13096 10.5618 2.30439L10.5698 2.38112V4.33245H12.6188L12.6185 2.38171C12.619 2.19768 12.7494 2.04436 12.9226 2.00831L12.9992 2.00029L13.6211 2C13.8048 2.00077 13.9578 2.13119 13.9936 2.30468L14.0015 2.38142V4.33245H16.0505L16.0502 2.38171C16.051 2.19768 16.1814 2.04458 16.3544 2.00859L16.4309 2.00059L17.0525 2.00029C17.2362 2.00107 17.3892 2.13125 17.4254 2.30469L17.4335 2.38142L17.4332 4.33245H19.2543C19.4622 4.3335 19.6348 4.48348 19.6715 4.68151L19.6786 4.75782V6.57493H21.619C21.8027 6.57545 21.9559 6.70605 21.992 6.87979L22 6.95664V7.57877C21.9995 7.76306 21.8689 7.91663 21.6956 7.95254L21.619 7.96048H19.6786V10.013H21.619C21.8029 10.0135 21.9565 10.1441 21.9922 10.318L22 10.395V11.0168C21.9995 11.2009 21.8689 11.3544 21.6956 11.3901L21.619 11.3979L19.6786 11.3982V13.451H21.619C21.8029 13.4516 21.9565 13.5824 21.9922 13.756L22 13.8328V14.4549C21.9995 14.6389 21.8689 14.7925 21.6956 14.8282L21.619 14.836L19.6786 14.8363L19.6783 16.654C19.6775 16.8625 19.5276 17.0357 19.3299 17.0723L19.2538 17.0794H17.4335L17.4332 19.0295C17.433 19.2138 17.3024 19.3676 17.1289 19.4036L17.0522 19.4115H16.4315C16.2476 19.411 16.0941 19.2802 16.0584 19.1064L16.0505 19.0295L16.0502 17.0794H14.0015L14.0012 19.0295C14.001 19.2138 13.8706 19.3674 13.6974 19.4035L13.6208 19.4115H12.9995C12.8156 19.411 12.6623 19.2802 12.6266 19.1064L12.6188 19.0295L12.6182 17.0794L11.606 17.079L11.6076 17.1292C11.6076 19.7466 9.57152 21.8818 7.01776 21.9953L6.80378 22C4.15073 22 2 19.8193 2 17.1292C2 14.4391 4.15073 12.2584 6.80378 12.2584C6.85036 12.2584 6.89677 12.259 6.94303 12.2604L6.94201 11.3982H5.00194C4.81824 11.3977 4.66498 11.2671 4.62934 11.0936L4.62152 11.0168L4.62123 10.3944C4.62174 10.2104 4.75188 10.057 4.92505 10.021L5.00164 10.013L6.94201 10.0133L6.94171 7.96048H5.00194C4.81824 7.9597 4.66521 7.82929 4.62942 7.656L4.62152 7.57936L4.62093 6.95605C4.6217 6.77227 4.75187 6.61899 4.92485 6.58275L5.00135 6.57464H6.94171V4.75752C6.9425 4.54907 7.09264 4.37604 7.2904 4.33954L7.36659 4.33245H9.18712L9.18682 2.38171C9.1876 2.19768 9.31777 2.04436 9.49094 2.00831L9.56754 2.00029L10.1894 2ZM6.72944 14.4905L6.00155 15.2285L7.5452 16.7943L4.0702 16.7942V17.8379L7.5452 17.8383L6.00155 19.402L6.72921 20.1403L9.5162 17.3161L6.72944 14.4905ZM18.2468 5.76018L8.37417 5.76047L8.37494 12.5248C9.80176 13.0253 10.9236 14.1885 11.3824 15.6513L18.2459 15.651L18.2468 5.76018ZM15.3046 8.2826C15.5127 8.28312 15.6856 8.43352 15.7219 8.63164L15.7289 8.70797V12.7038C15.7281 12.9123 15.5782 13.0858 15.3803 13.1224L15.304 13.1295H11.3158C11.1078 13.1285 10.9348 12.9782 10.8983 12.7802L10.8913 12.7038L10.891 8.70797C10.8917 8.49951 11.0417 8.32625 11.2394 8.28991L11.3155 8.2829L15.3046 8.2826Z" fill="white"/>
+</svg>
\ No newline at end of file
diff --git a/src/collections/integrations/k8s-config-connector/icons/components/secure-source-manager-repository/icons/color/secure-source-manager-repository-color.svg b/src/collections/integrations/k8s-config-connector/icons/components/secure-source-manager-repository/icons/color/secure-source-manager-repository-color.svg
new file mode 100644
index 000000000000..3a66f9c1117e
--- /dev/null
+++ b/src/collections/integrations/k8s-config-connector/icons/components/secure-source-manager-repository/icons/color/secure-source-manager-repository-color.svg
@@ -0,0 +1,5 @@
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M10.1893938,2 C10.3728304,2.00077434 10.5258338,2.13095973 10.5618102,2.30439506 L10.5698113,2.38112124 L10.5698113,4.33245019 L12.6188242,4.33245019 L12.6185298,2.38171121 C12.6190451,2.19767714 12.7494087,2.04435844 12.9226324,2.00831145 L12.9992416,2.00029499 L13.6211004,2 C13.8047946,2.00077434 13.9578302,2.13118557 13.9936134,2.30467737 L14.0015178,2.38141623 L14.0015178,4.33245019 L16.0505308,4.33245019 L16.0502364,2.38171121 C16.0510093,2.19767714 16.1814051,2.04458429 16.3544356,2.00859376 L16.4309482,2.00058997 L17.0525126,2.00029499 C17.2362068,2.00106932 17.3892424,2.13125471 17.42542,2.30469004 L17.4335189,2.38141623 L17.4332244,4.33245019 L19.2543403,4.33245019 C19.46215,4.33349903 19.6348304,4.48348275 19.6714654,4.68150582 L19.6786294,4.75781925 L19.6786294,6.5749298 L21.6189937,6.5749298 C21.8026879,6.57544603 21.9559489,6.70605085 21.9919857,6.87979269 L22,6.95664102 L22,7.57876539 C21.9994847,7.76305757 21.8688957,7.91663439 21.6956156,7.95254426 L21.6189937,7.9604766 L19.6786294,7.9604766 L19.6786294,10.0129856 L21.6189937,10.0129856 C21.8029455,10.0135018 21.9564642,10.1441066 21.9921668,10.3180461 L22,10.3949918 L22,11.0168212 C21.9994847,11.2008552 21.8688957,11.3543998 21.6956156,11.390108 L21.6189937,11.3979424 L19.6786294,11.3982374 L19.6786294,13.4510413 L21.6189937,13.4510413 C21.8029455,13.4515576 21.9564642,13.5823882 21.9921668,13.7559889 L22,13.8327525 L22,14.4548769 C21.9994847,14.638911 21.8688957,14.7924555 21.6956156,14.8281638 L21.6189937,14.8359982 L19.6786294,14.8362931 L19.6783349,16.6539937 C19.6775497,16.8624501 19.5276394,17.0357122 19.3299336,17.0722629 L19.2537514,17.0793627 L17.4335189,17.0793627 L17.4332244,19.0295117 C17.4329668,19.2138039 17.3024099,19.3676066 17.1289366,19.4035729 L17.0522181,19.4115179 L16.4315371,19.4115179 C16.2475853,19.4110017 16.0940666,19.280171 16.058364,19.1063727 L16.0505308,19.0295117 L16.0502364,17.0793627 L14.0015178,17.0793627 L14.0012234,19.0295117 C14.0009658,19.2138039 13.8706343,19.3673807 13.6974146,19.4034882 L13.620806,19.4115179 L12.9995361,19.4115179 C12.8155842,19.4110017 12.662291,19.280171 12.6266447,19.1063727 L12.6188242,19.0295117 L12.6182353,17.0793627 L11.606,17.079 L11.6075624,17.1291822 C11.6075624,19.7465558 9.57152078,21.8817501 7.01776046,21.9952542 L6.80378122,22 C4.15072611,22 2,19.8192606 2,17.1291822 C2,14.4391039 4.15072611,12.2583645 6.80378122,12.2583645 C6.85035544,12.2583645 6.89677486,12.2590365 6.94303054,12.2603716 L6.94200715,11.3982374 L5.00193724,11.3982374 C4.81824304,11.3977212 4.66498204,11.2671163 4.62933976,11.0935721 L4.62151983,11.0168212 L4.62122539,10.3944018 C4.62174066,10.2103677 4.75187886,10.057049 4.92504623,10.021002 L5.0016428,10.0129856 L6.94200715,10.0132806 L6.94171271,7.9604766 L5.00193724,7.9604766 C4.81824304,7.95970227 4.66520747,7.82929103 4.6294243,7.65599685 L4.62151983,7.57935536 L4.62093095,6.95605104 C4.62170386,6.77227509 4.75187426,6.61898865 4.92484841,6.58274807 L5.00134836,6.57463482 L6.94171271,6.57463482 L6.94171271,4.75752426 C6.94249788,4.54906786 7.09264084,4.37603884 7.29039837,4.33953996 L7.36659066,4.33245019 L9.18711763,4.33245019 L9.18682319,2.38171121 C9.1875961,2.19767714 9.3177665,2.04435844 9.4909379,2.00831145 L9.56753504,2.00029499 L10.1893938,2 Z M6.72943699,14.4904938 L6.00155422,15.2285341 L7.54520096,16.7942708 L4.07020096,16.7941541 L4.07020096,17.8379007 L7.54520096,17.8382708 L6.00155422,19.4020024 L6.72921198,20.1402708 L9.51619567,17.3161415 L6.72943699,14.4904938 Z M18.2467641,5.76017991 L8.37416681,5.7604749 L8.37494037,12.5248503 C9.8017631,13.0253356 10.9235874,14.1884603 11.3824464,15.6512622 L18.2458808,15.651043 L18.2467641,5.76017991 Z M15.3046241,8.28260075 C15.5126956,8.28312517 15.6856377,8.43351678 15.7219141,8.63163695 L15.7289132,8.70796981 L15.7289132,12.7038431 C15.728128,12.9122995 15.5782177,13.0857947 15.3803051,13.1223972 L15.3040353,13.1295072 L11.3158357,13.1295072 C11.1077643,13.1284583 10.9348221,12.9782415 10.898339,12.7801667 L10.8912522,12.7038431 L10.8909577,8.70796981 C10.8917429,8.4995134 11.0416532,8.32625131 11.2393591,8.28990781 L11.3155413,8.28289573 L15.3046241,8.28260075 Z" fill="#4285F4"></path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/collections/integrations/k8s-config-connector/icons/components/secure-source-manager-repository/icons/white/secure-source-manager-repository-white.svg b/src/collections/integrations/k8s-config-connector/icons/components/secure-source-manager-repository/icons/white/secure-source-manager-repository-white.svg
new file mode 100644
index 000000000000..941c48f8914b
--- /dev/null
+++ b/src/collections/integrations/k8s-config-connector/icons/components/secure-source-manager-repository/icons/white/secure-source-manager-repository-white.svg
@@ -0,0 +1,3 @@
+<svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.1894 2C10.3728 2.00077 10.5258 2.13096 10.5618 2.30439L10.5698 2.38112V4.33245H12.6188L12.6185 2.38171C12.619 2.19768 12.7494 2.04436 12.9226 2.00831L12.9992 2.00029L13.6211 2C13.8048 2.00077 13.9578 2.13119 13.9936 2.30468L14.0015 2.38142V4.33245H16.0505L16.0502 2.38171C16.051 2.19768 16.1814 2.04458 16.3544 2.00859L16.4309 2.00059L17.0525 2.00029C17.2362 2.00107 17.3892 2.13125 17.4254 2.30469L17.4335 2.38142L17.4332 4.33245H19.2543C19.4622 4.3335 19.6348 4.48348 19.6715 4.68151L19.6786 4.75782V6.57493H21.619C21.8027 6.57545 21.9559 6.70605 21.992 6.87979L22 6.95664V7.57877C21.9995 7.76306 21.8689 7.91663 21.6956 7.95254L21.619 7.96048H19.6786V10.013H21.619C21.8029 10.0135 21.9565 10.1441 21.9922 10.318L22 10.395V11.0168C21.9995 11.2009 21.8689 11.3544 21.6956 11.3901L21.619 11.3979L19.6786 11.3982V13.451H21.619C21.8029 13.4516 21.9565 13.5824 21.9922 13.756L22 13.8328V14.4549C21.9995 14.6389 21.8689 14.7925 21.6956 14.8282L21.619 14.836L19.6786 14.8363L19.6783 16.654C19.6775 16.8625 19.5276 17.0357 19.3299 17.0723L19.2538 17.0794H17.4335L17.4332 19.0295C17.433 19.2138 17.3024 19.3676 17.1289 19.4036L17.0522 19.4115H16.4315C16.2476 19.411 16.0941 19.2802 16.0584 19.1064L16.0505 19.0295L16.0502 17.0794H14.0015L14.0012 19.0295C14.001 19.2138 13.8706 19.3674 13.6974 19.4035L13.6208 19.4115H12.9995C12.8156 19.411 12.6623 19.2802 12.6266 19.1064L12.6188 19.0295L12.6182 17.0794L11.606 17.079L11.6076 17.1292C11.6076 19.7466 9.57152 21.8818 7.01776 21.9953L6.80378 22C4.15073 22 2 19.8193 2 17.1292C2 14.4391 4.15073 12.2584 6.80378 12.2584C6.85036 12.2584 6.89677 12.259 6.94303 12.2604L6.94201 11.3982H5.00194C4.81824 11.3977 4.66498 11.2671 4.62934 11.0936L4.62152 11.0168L4.62123 10.3944C4.62174 10.2104 4.75188 10.057 4.92505 10.021L5.00164 10.013L6.94201 10.0133L6.94171 7.96048H5.00194C4.81824 7.9597 4.66521 7.82929 4.62942 7.656L4.62152 7.57936L4.62093 6.95605C4.6217 6.77227 4.75187 6.61899 4.92485 6.58275L5.00135 6.57464H6.94171V4.75752C6.9425 4.54907 7.09264 4.37604 7.2904 4.33954L7.36659 4.33245H9.18712L9.18682 2.38171C9.1876 2.19768 9.31777 2.04436 9.49094 2.00831L9.56754 2.00029L10.1894 2ZM6.72944 14.4905L6.00155 15.2285L7.5452 16.7943L4.0702 16.7942V17.8379L7.5452 17.8383L6.00155 19.402L6.72921 20.1403L9.5162 17.3161L6.72944 14.4905ZM18.2468 5.76018L8.37417 5.76047L8.37494 12.5248C9.80176 13.0253 10.9236 14.1885 11.3824 15.6513L18.2459 15.651L18.2468 5.76018ZM15.3046 8.2826C15.5127 8.28312 15.6856 8.43352 15.7219 8.63164L15.7289 8.70797V12.7038C15.7281 12.9123 15.5782 13.0858 15.3803 13.1224L15.304 13.1295H11.3158C11.1078 13.1285 10.9348 12.9782 10.8983 12.7802L10.8913 12.7038L10.891 8.70797C10.8917 8.49951 11.0417 8.32625 11.2394 8.28991L11.3155 8.2829L15.3046 8.2826Z" fill="white"/>
+</svg>
diff --git a/src/collections/integrations/k8s-config-connector/icons/components/workstation-cluster/icons/color/workstation-cluster-color.svg b/src/collections/integrations/k8s-config-connector/icons/components/workstation-cluster/icons/color/workstation-cluster-color.svg
new file mode 100644
index 000000000000..3a66f9c1117e
--- /dev/null
+++ b/src/collections/integrations/k8s-config-connector/icons/components/workstation-cluster/icons/color/workstation-cluster-color.svg
@@ -0,0 +1,5 @@
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M10.1893938,2 C10.3728304,2.00077434 10.5258338,2.13095973 10.5618102,2.30439506 L10.5698113,2.38112124 L10.5698113,4.33245019 L12.6188242,4.33245019 L12.6185298,2.38171121 C12.6190451,2.19767714 12.7494087,2.04435844 12.9226324,2.00831145 L12.9992416,2.00029499 L13.6211004,2 C13.8047946,2.00077434 13.9578302,2.13118557 13.9936134,2.30467737 L14.0015178,2.38141623 L14.0015178,4.33245019 L16.0505308,4.33245019 L16.0502364,2.38171121 C16.0510093,2.19767714 16.1814051,2.04458429 16.3544356,2.00859376 L16.4309482,2.00058997 L17.0525126,2.00029499 C17.2362068,2.00106932 17.3892424,2.13125471 17.42542,2.30469004 L17.4335189,2.38141623 L17.4332244,4.33245019 L19.2543403,4.33245019 C19.46215,4.33349903 19.6348304,4.48348275 19.6714654,4.68150582 L19.6786294,4.75781925 L19.6786294,6.5749298 L21.6189937,6.5749298 C21.8026879,6.57544603 21.9559489,6.70605085 21.9919857,6.87979269 L22,6.95664102 L22,7.57876539 C21.9994847,7.76305757 21.8688957,7.91663439 21.6956156,7.95254426 L21.6189937,7.9604766 L19.6786294,7.9604766 L19.6786294,10.0129856 L21.6189937,10.0129856 C21.8029455,10.0135018 21.9564642,10.1441066 21.9921668,10.3180461 L22,10.3949918 L22,11.0168212 C21.9994847,11.2008552 21.8688957,11.3543998 21.6956156,11.390108 L21.6189937,11.3979424 L19.6786294,11.3982374 L19.6786294,13.4510413 L21.6189937,13.4510413 C21.8029455,13.4515576 21.9564642,13.5823882 21.9921668,13.7559889 L22,13.8327525 L22,14.4548769 C21.9994847,14.638911 21.8688957,14.7924555 21.6956156,14.8281638 L21.6189937,14.8359982 L19.6786294,14.8362931 L19.6783349,16.6539937 C19.6775497,16.8624501 19.5276394,17.0357122 19.3299336,17.0722629 L19.2537514,17.0793627 L17.4335189,17.0793627 L17.4332244,19.0295117 C17.4329668,19.2138039 17.3024099,19.3676066 17.1289366,19.4035729 L17.0522181,19.4115179 L16.4315371,19.4115179 C16.2475853,19.4110017 16.0940666,19.280171 16.058364,19.1063727 L16.0505308,19.0295117 L16.0502364,17.0793627 L14.0015178,17.0793627 L14.0012234,19.0295117 C14.0009658,19.2138039 13.8706343,19.3673807 13.6974146,19.4034882 L13.620806,19.4115179 L12.9995361,19.4115179 C12.8155842,19.4110017 12.662291,19.280171 12.6266447,19.1063727 L12.6188242,19.0295117 L12.6182353,17.0793627 L11.606,17.079 L11.6075624,17.1291822 C11.6075624,19.7465558 9.57152078,21.8817501 7.01776046,21.9952542 L6.80378122,22 C4.15072611,22 2,19.8192606 2,17.1291822 C2,14.4391039 4.15072611,12.2583645 6.80378122,12.2583645 C6.85035544,12.2583645 6.89677486,12.2590365 6.94303054,12.2603716 L6.94200715,11.3982374 L5.00193724,11.3982374 C4.81824304,11.3977212 4.66498204,11.2671163 4.62933976,11.0935721 L4.62151983,11.0168212 L4.62122539,10.3944018 C4.62174066,10.2103677 4.75187886,10.057049 4.92504623,10.021002 L5.0016428,10.0129856 L6.94200715,10.0132806 L6.94171271,7.9604766 L5.00193724,7.9604766 C4.81824304,7.95970227 4.66520747,7.82929103 4.6294243,7.65599685 L4.62151983,7.57935536 L4.62093095,6.95605104 C4.62170386,6.77227509 4.75187426,6.61898865 4.92484841,6.58274807 L5.00134836,6.57463482 L6.94171271,6.57463482 L6.94171271,4.75752426 C6.94249788,4.54906786 7.09264084,4.37603884 7.29039837,4.33953996 L7.36659066,4.33245019 L9.18711763,4.33245019 L9.18682319,2.38171121 C9.1875961,2.19767714 9.3177665,2.04435844 9.4909379,2.00831145 L9.56753504,2.00029499 L10.1893938,2 Z M6.72943699,14.4904938 L6.00155422,15.2285341 L7.54520096,16.7942708 L4.07020096,16.7941541 L4.07020096,17.8379007 L7.54520096,17.8382708 L6.00155422,19.4020024 L6.72921198,20.1402708 L9.51619567,17.3161415 L6.72943699,14.4904938 Z M18.2467641,5.76017991 L8.37416681,5.7604749 L8.37494037,12.5248503 C9.8017631,13.0253356 10.9235874,14.1884603 11.3824464,15.6512622 L18.2458808,15.651043 L18.2467641,5.76017991 Z M15.3046241,8.28260075 C15.5126956,8.28312517 15.6856377,8.43351678 15.7219141,8.63163695 L15.7289132,8.70796981 L15.7289132,12.7038431 C15.728128,12.9122995 15.5782177,13.0857947 15.3803051,13.1223972 L15.3040353,13.1295072 L11.3158357,13.1295072 C11.1077643,13.1284583 10.9348221,12.9782415 10.898339,12.7801667 L10.8912522,12.7038431 L10.8909577,8.70796981 C10.8917429,8.4995134 11.0416532,8.32625131 11.2393591,8.28990781 L11.3155413,8.28289573 L15.3046241,8.28260075 Z" fill="#4285F4"></path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/collections/integrations/k8s-config-connector/icons/components/workstation-cluster/icons/white/workstation-cluster-white.svg b/src/collections/integrations/k8s-config-connector/icons/components/workstation-cluster/icons/white/workstation-cluster-white.svg
new file mode 100644
index 000000000000..941c48f8914b
--- /dev/null
+++ b/src/collections/integrations/k8s-config-connector/icons/components/workstation-cluster/icons/white/workstation-cluster-white.svg
@@ -0,0 +1,3 @@
+<svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.1894 2C10.3728 2.00077 10.5258 2.13096 10.5618 2.30439L10.5698 2.38112V4.33245H12.6188L12.6185 2.38171C12.619 2.19768 12.7494 2.04436 12.9226 2.00831L12.9992 2.00029L13.6211 2C13.8048 2.00077 13.9578 2.13119 13.9936 2.30468L14.0015 2.38142V4.33245H16.0505L16.0502 2.38171C16.051 2.19768 16.1814 2.04458 16.3544 2.00859L16.4309 2.00059L17.0525 2.00029C17.2362 2.00107 17.3892 2.13125 17.4254 2.30469L17.4335 2.38142L17.4332 4.33245H19.2543C19.4622 4.3335 19.6348 4.48348 19.6715 4.68151L19.6786 4.75782V6.57493H21.619C21.8027 6.57545 21.9559 6.70605 21.992 6.87979L22 6.95664V7.57877C21.9995 7.76306 21.8689 7.91663 21.6956 7.95254L21.619 7.96048H19.6786V10.013H21.619C21.8029 10.0135 21.9565 10.1441 21.9922 10.318L22 10.395V11.0168C21.9995 11.2009 21.8689 11.3544 21.6956 11.3901L21.619 11.3979L19.6786 11.3982V13.451H21.619C21.8029 13.4516 21.9565 13.5824 21.9922 13.756L22 13.8328V14.4549C21.9995 14.6389 21.8689 14.7925 21.6956 14.8282L21.619 14.836L19.6786 14.8363L19.6783 16.654C19.6775 16.8625 19.5276 17.0357 19.3299 17.0723L19.2538 17.0794H17.4335L17.4332 19.0295C17.433 19.2138 17.3024 19.3676 17.1289 19.4036L17.0522 19.4115H16.4315C16.2476 19.411 16.0941 19.2802 16.0584 19.1064L16.0505 19.0295L16.0502 17.0794H14.0015L14.0012 19.0295C14.001 19.2138 13.8706 19.3674 13.6974 19.4035L13.6208 19.4115H12.9995C12.8156 19.411 12.6623 19.2802 12.6266 19.1064L12.6188 19.0295L12.6182 17.0794L11.606 17.079L11.6076 17.1292C11.6076 19.7466 9.57152 21.8818 7.01776 21.9953L6.80378 22C4.15073 22 2 19.8193 2 17.1292C2 14.4391 4.15073 12.2584 6.80378 12.2584C6.85036 12.2584 6.89677 12.259 6.94303 12.2604L6.94201 11.3982H5.00194C4.81824 11.3977 4.66498 11.2671 4.62934 11.0936L4.62152 11.0168L4.62123 10.3944C4.62174 10.2104 4.75188 10.057 4.92505 10.021L5.00164 10.013L6.94201 10.0133L6.94171 7.96048H5.00194C4.81824 7.9597 4.66521 7.82929 4.62942 7.656L4.62152 7.57936L4.62093 6.95605C4.6217 6.77227 4.75187 6.61899 4.92485 6.58275L5.00135 6.57464H6.94171V4.75752C6.9425 4.54907 7.09264 4.37604 7.2904 4.33954L7.36659 4.33245H9.18712L9.18682 2.38171C9.1876 2.19768 9.31777 2.04436 9.49094 2.00831L9.56754 2.00029L10.1894 2ZM6.72944 14.4905L6.00155 15.2285L7.5452 16.7943L4.0702 16.7942V17.8379L7.5452 17.8383L6.00155 19.402L6.72921 20.1403L9.5162 17.3161L6.72944 14.4905ZM18.2468 5.76018L8.37417 5.76047L8.37494 12.5248C9.80176 13.0253 10.9236 14.1885 11.3824 15.6513L18.2459 15.651L18.2468 5.76018ZM15.3046 8.2826C15.5127 8.28312 15.6856 8.43352 15.7219 8.63164L15.7289 8.70797V12.7038C15.7281 12.9123 15.5782 13.0858 15.3803 13.1224L15.304 13.1295H11.3158C11.1078 13.1285 10.9348 12.9782 10.8983 12.7802L10.8913 12.7038L10.891 8.70797C10.8917 8.49951 11.0417 8.32625 11.2394 8.28991L11.3155 8.2829L15.3046 8.2826Z" fill="white"/>
+</svg>
diff --git a/src/collections/integrations/k8s-config-connector/index.mdx b/src/collections/integrations/k8s-config-connector/index.mdx
index adc4d4305ff9..9256cedddc2c 100644
--- a/src/collections/integrations/k8s-config-connector/index.mdx
+++ b/src/collections/integrations/k8s-config-connector/index.mdx
@@ -2096,6 +2096,42 @@ components: [
 "colorIcon": "icons/components/gke-hub-feature/icons/color/gke-hub-feature-color.svg",
 "whiteIcon": "icons/components/gke-hub-feature/icons/white/gke-hub-feature-white.svg",
 "description": "",
+},
+{
+"name": "privileged-access-manager-entitlement",
+"colorIcon": "icons/components/privileged-access-manager-entitlement/icons/color/privileged-access-manager-entitlement-color.svg",
+"whiteIcon": "icons/components/privileged-access-manager-entitlement/icons/white/privileged-access-manager-entitlement-white.svg",
+"description": "",
+},
+{
+"name": "workstation-cluster",
+"colorIcon": "icons/components/workstation-cluster/icons/color/workstation-cluster-color.svg",
+"whiteIcon": "icons/components/workstation-cluster/icons/white/workstation-cluster-white.svg",
+"description": "",
+},
+{
+"name": "discovery-engine-data-store",
+"colorIcon": "icons/components/discovery-engine-data-store/icons/color/discovery-engine-data-store-color.svg",
+"whiteIcon": "icons/components/discovery-engine-data-store/icons/white/discovery-engine-data-store-white.svg",
+"description": "",
+},
+{
+"name": "kms-autokey-config",
+"colorIcon": "icons/components/kms-autokey-config/icons/color/kms-autokey-config-color.svg",
+"whiteIcon": "icons/components/kms-autokey-config/icons/white/kms-autokey-config-white.svg",
+"description": "",
+},
+{
+"name": "kms-key-handle",
+"colorIcon": "icons/components/kms-key-handle/icons/color/kms-key-handle-color.svg",
+"whiteIcon": "icons/components/kms-key-handle/icons/white/kms-key-handle-white.svg",
+"description": "",
+},
+{
+"name": "secure-source-manager-repository",
+"colorIcon": "icons/components/secure-source-manager-repository/icons/color/secure-source-manager-repository-color.svg",
+"whiteIcon": "icons/components/secure-source-manager-repository/icons/white/secure-source-manager-repository-white.svg",
+"description": "",
 }]
 featureList: [
   "Provides a wide range of cloud services",
diff --git a/src/collections/integrations/keda/index.mdx b/src/collections/integrations/keda/index.mdx
index a9cc3be78bef..8d7a268a2d4d 100644
--- a/src/collections/integrations/keda/index.mdx
+++ b/src/collections/integrations/keda/index.mdx
@@ -49,7 +49,7 @@ components: [
 "name": "cluster-cloud-event-source",
 "colorIcon": "icons/components/cluster-cloud-event-source/icons/color/cluster-cloud-event-source-color.svg",
 "whiteIcon": "icons/components/cluster-cloud-event-source/icons/white/cluster-cloud-event-source-white.svg",
-"description": "#326de6",
+"description": "",
 }]
 featureList: [
   "Scales applications based on various metrics",
diff --git a/src/collections/integrations/knative/icons/components/cluster-ingress/icons/color/cluster-ingress-color.svg b/src/collections/integrations/knative/icons/components/cluster-ingress/icons/color/cluster-ingress-color.svg
new file mode 100644
index 000000000000..64c3ec97e09a
--- /dev/null
+++ b/src/collections/integrations/knative/icons/components/cluster-ingress/icons/color/cluster-ingress-color.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 735 593.5" xmlns="http://www.w3.org/2000/svg"><path fill="#0865ad" d="M297.496 1.488 65.749 113.096a15.035 15.035 0 0 0-8.135 10.194L.377 374.065a15.02 15.02 0 0 0 2.902 12.711l160.376 201.108a15.038 15.038 0 0 0 11.747 5.657H432.63c4.571 0 8.895-2.085 11.747-5.657l160.376-201.108a15.023 15.023 0 0 0 2.903-12.711L550.418 123.29a15.019 15.019 0 0 0-8.135-10.194L310.536 1.488a15.022 15.022 0 0 0-13.04 0"/><path fill="#fff" d="M221.845 210.533h51.054v100.764h1.017c5.072-8.798 10.48-16.907 15.552-25.023l51.736-75.741h63.225l-75.398 97.039 79.455 130.856h-60.18l-55.792-98.394-19.615 24.005v74.389h-51.054V210.533Z"/><path fill="#6695ca" d="m585.328 1.307-91.112 33.16a7.521 7.521 0 0 0-3.935 3.306l-48.478 83.964a7.513 7.513 0 0 0-.892 5.066l16.835 95.483a7.495 7.495 0 0 0 2.568 4.453l74.277 62.319a7.507 7.507 0 0 0 4.828 1.76h96.957a7.515 7.515 0 0 0 4.831-1.76l74.274-62.319a7.508 7.508 0 0 0 2.567-4.453l16.839-95.483a7.538 7.538 0 0 0-.896-5.066l-48.474-83.964a7.526 7.526 0 0 0-3.939-3.306l-91.112-33.16a7.5 7.5 0 0 0-5.138 0"/><path fill="#fff" d="M570.231 111.865a59.358 59.358 0 0 1 5.654-4.821 37.76 37.76 0 0 1 6.228-3.773c2.192-1.052 4.559-1.866 7.101-2.452 2.542-.585 5.301-.876 8.281-.876 4.91 0 9.265.848 13.063 2.542 3.801 1.694 7.001 4.067 9.603 7.101 2.602 3.04 4.558 6.663 5.873 10.871 1.316 4.205 1.976 8.826 1.976 13.851v57.423h-24.115v-57.423c0-5.025-1.168-8.929-3.5-11.706-2.342-2.775-5.786-4.162-10.351-4.162-3.385 0-6.569.73-9.556 2.192-2.981 1.462-5.814 3.504-8.498 6.137v64.962h-24.202v-90.389h14.903c3.04 0 5.057 1.403 6.056 4.211l1.484 6.312Z"/></svg>
\ No newline at end of file
diff --git a/src/collections/integrations/knative/icons/components/cluster-ingress/icons/white/cluster-ingress-white.svg b/src/collections/integrations/knative/icons/components/cluster-ingress/icons/white/cluster-ingress-white.svg
new file mode 100644
index 000000000000..96eda4b47c97
--- /dev/null
+++ b/src/collections/integrations/knative/icons/components/cluster-ingress/icons/white/cluster-ingress-white.svg
@@ -0,0 +1,19 @@
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 735 593.5" style="enable-background:new 0 0 735 593.5;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+	.st1{opacity:0.8;fill:#FFFFFF;}
+</style>
+<path class="st0" d="M297.5,1.5L65.7,113.1c-4.1,2-7.1,5.7-8.1,10.2L0.4,374.1c-1,4.5,0.1,9.1,2.9,12.7l160.4,201.1
+	c2.9,3.6,7.2,5.7,11.7,5.7h257.2c4.6,0,8.9-2.1,11.7-5.7l160.4-201.1c2.9-3.6,3.9-8.3,2.9-12.7l-57.2-250.8c-1-4.5-4-8.2-8.1-10.2
+	L310.5,1.5C306.4-0.5,301.6-0.5,297.5,1.5"/>
+<path d="M221.8,210.5h51.1v100.8h1c5.1-8.8,10.5-16.9,15.6-25l51.7-75.7h63.2l-75.4,97l79.5,130.9h-60.2L292.5,340l-19.6,24v74.4
+	h-51.1L221.8,210.5L221.8,210.5z"/>
+<path class="st1" d="M585.3,1.3l-91.1,33.2c-1.7,0.6-3.1,1.8-3.9,3.3l-48.5,84c-0.9,1.5-1.2,3.3-0.9,5.1l16.8,95.5
+	c0.3,1.7,1.2,3.3,2.6,4.5l74.3,62.3c1.4,1.1,3.1,1.8,4.8,1.8h97c1.8,0,3.5-0.6,4.8-1.8l74.3-62.3c1.4-1.1,2.3-2.7,2.6-4.5l16.8-95.5
+	c0.3-1.7,0-3.5-0.9-5.1l-48.5-84c-0.9-1.5-2.3-2.7-3.9-3.3L590.5,1.3C588.8,0.7,587,0.7,585.3,1.3"/>
+<path d="M570.2,111.9c1.8-1.7,3.7-3.3,5.7-4.8c1.9-1.5,4-2.7,6.2-3.8c2.2-1.1,4.6-1.9,7.1-2.5c2.5-0.6,5.3-0.9,8.3-0.9
+	c4.9,0,9.3,0.8,13.1,2.5c3.8,1.7,7,4.1,9.6,7.1c2.6,3,4.6,6.7,5.9,10.9c1.3,4.2,2,8.8,2,13.9v57.4h-24.1v-57.4c0-5-1.2-8.9-3.5-11.7
+	c-2.3-2.8-5.8-4.2-10.4-4.2c-3.4,0-6.6,0.7-9.6,2.2c-3,1.5-5.8,3.5-8.5,6.1v65h-24.2v-90.4h14.9c3,0,5.1,1.4,6.1,4.2L570.2,111.9
+	L570.2,111.9z"/>
+</svg>
\ No newline at end of file
diff --git a/src/collections/integrations/knative/icons/components/configuration/icons/color/configuration-color.svg b/src/collections/integrations/knative/icons/components/configuration/icons/color/configuration-color.svg
new file mode 100644
index 000000000000..64c3ec97e09a
--- /dev/null
+++ b/src/collections/integrations/knative/icons/components/configuration/icons/color/configuration-color.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 735 593.5" xmlns="http://www.w3.org/2000/svg"><path fill="#0865ad" d="M297.496 1.488 65.749 113.096a15.035 15.035 0 0 0-8.135 10.194L.377 374.065a15.02 15.02 0 0 0 2.902 12.711l160.376 201.108a15.038 15.038 0 0 0 11.747 5.657H432.63c4.571 0 8.895-2.085 11.747-5.657l160.376-201.108a15.023 15.023 0 0 0 2.903-12.711L550.418 123.29a15.019 15.019 0 0 0-8.135-10.194L310.536 1.488a15.022 15.022 0 0 0-13.04 0"/><path fill="#fff" d="M221.845 210.533h51.054v100.764h1.017c5.072-8.798 10.48-16.907 15.552-25.023l51.736-75.741h63.225l-75.398 97.039 79.455 130.856h-60.18l-55.792-98.394-19.615 24.005v74.389h-51.054V210.533Z"/><path fill="#6695ca" d="m585.328 1.307-91.112 33.16a7.521 7.521 0 0 0-3.935 3.306l-48.478 83.964a7.513 7.513 0 0 0-.892 5.066l16.835 95.483a7.495 7.495 0 0 0 2.568 4.453l74.277 62.319a7.507 7.507 0 0 0 4.828 1.76h96.957a7.515 7.515 0 0 0 4.831-1.76l74.274-62.319a7.508 7.508 0 0 0 2.567-4.453l16.839-95.483a7.538 7.538 0 0 0-.896-5.066l-48.474-83.964a7.526 7.526 0 0 0-3.939-3.306l-91.112-33.16a7.5 7.5 0 0 0-5.138 0"/><path fill="#fff" d="M570.231 111.865a59.358 59.358 0 0 1 5.654-4.821 37.76 37.76 0 0 1 6.228-3.773c2.192-1.052 4.559-1.866 7.101-2.452 2.542-.585 5.301-.876 8.281-.876 4.91 0 9.265.848 13.063 2.542 3.801 1.694 7.001 4.067 9.603 7.101 2.602 3.04 4.558 6.663 5.873 10.871 1.316 4.205 1.976 8.826 1.976 13.851v57.423h-24.115v-57.423c0-5.025-1.168-8.929-3.5-11.706-2.342-2.775-5.786-4.162-10.351-4.162-3.385 0-6.569.73-9.556 2.192-2.981 1.462-5.814 3.504-8.498 6.137v64.962h-24.202v-90.389h14.903c3.04 0 5.057 1.403 6.056 4.211l1.484 6.312Z"/></svg>
\ No newline at end of file
diff --git a/src/collections/integrations/knative/icons/components/configuration/icons/white/configuration-white.svg b/src/collections/integrations/knative/icons/components/configuration/icons/white/configuration-white.svg
new file mode 100644
index 000000000000..96eda4b47c97
--- /dev/null
+++ b/src/collections/integrations/knative/icons/components/configuration/icons/white/configuration-white.svg
@@ -0,0 +1,19 @@
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 735 593.5" style="enable-background:new 0 0 735 593.5;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+	.st1{opacity:0.8;fill:#FFFFFF;}
+</style>
+<path class="st0" d="M297.5,1.5L65.7,113.1c-4.1,2-7.1,5.7-8.1,10.2L0.4,374.1c-1,4.5,0.1,9.1,2.9,12.7l160.4,201.1
+	c2.9,3.6,7.2,5.7,11.7,5.7h257.2c4.6,0,8.9-2.1,11.7-5.7l160.4-201.1c2.9-3.6,3.9-8.3,2.9-12.7l-57.2-250.8c-1-4.5-4-8.2-8.1-10.2
+	L310.5,1.5C306.4-0.5,301.6-0.5,297.5,1.5"/>
+<path d="M221.8,210.5h51.1v100.8h1c5.1-8.8,10.5-16.9,15.6-25l51.7-75.7h63.2l-75.4,97l79.5,130.9h-60.2L292.5,340l-19.6,24v74.4
+	h-51.1L221.8,210.5L221.8,210.5z"/>
+<path class="st1" d="M585.3,1.3l-91.1,33.2c-1.7,0.6-3.1,1.8-3.9,3.3l-48.5,84c-0.9,1.5-1.2,3.3-0.9,5.1l16.8,95.5
+	c0.3,1.7,1.2,3.3,2.6,4.5l74.3,62.3c1.4,1.1,3.1,1.8,4.8,1.8h97c1.8,0,3.5-0.6,4.8-1.8l74.3-62.3c1.4-1.1,2.3-2.7,2.6-4.5l16.8-95.5
+	c0.3-1.7,0-3.5-0.9-5.1l-48.5-84c-0.9-1.5-2.3-2.7-3.9-3.3L590.5,1.3C588.8,0.7,587,0.7,585.3,1.3"/>
+<path d="M570.2,111.9c1.8-1.7,3.7-3.3,5.7-4.8c1.9-1.5,4-2.7,6.2-3.8c2.2-1.1,4.6-1.9,7.1-2.5c2.5-0.6,5.3-0.9,8.3-0.9
+	c4.9,0,9.3,0.8,13.1,2.5c3.8,1.7,7,4.1,9.6,7.1c2.6,3,4.6,6.7,5.9,10.9c1.3,4.2,2,8.8,2,13.9v57.4h-24.1v-57.4c0-5-1.2-8.9-3.5-11.7
+	c-2.3-2.8-5.8-4.2-10.4-4.2c-3.4,0-6.6,0.7-9.6,2.2c-3,1.5-5.8,3.5-8.5,6.1v65h-24.2v-90.4h14.9c3,0,5.1,1.4,6.1,4.2L570.2,111.9
+	L570.2,111.9z"/>
+</svg>
\ No newline at end of file
diff --git a/src/collections/integrations/knative/icons/components/ingress/icons/color/ingress-color.svg b/src/collections/integrations/knative/icons/components/ingress/icons/color/ingress-color.svg
new file mode 100644
index 000000000000..64c3ec97e09a
--- /dev/null
+++ b/src/collections/integrations/knative/icons/components/ingress/icons/color/ingress-color.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 735 593.5" xmlns="http://www.w3.org/2000/svg"><path fill="#0865ad" d="M297.496 1.488 65.749 113.096a15.035 15.035 0 0 0-8.135 10.194L.377 374.065a15.02 15.02 0 0 0 2.902 12.711l160.376 201.108a15.038 15.038 0 0 0 11.747 5.657H432.63c4.571 0 8.895-2.085 11.747-5.657l160.376-201.108a15.023 15.023 0 0 0 2.903-12.711L550.418 123.29a15.019 15.019 0 0 0-8.135-10.194L310.536 1.488a15.022 15.022 0 0 0-13.04 0"/><path fill="#fff" d="M221.845 210.533h51.054v100.764h1.017c5.072-8.798 10.48-16.907 15.552-25.023l51.736-75.741h63.225l-75.398 97.039 79.455 130.856h-60.18l-55.792-98.394-19.615 24.005v74.389h-51.054V210.533Z"/><path fill="#6695ca" d="m585.328 1.307-91.112 33.16a7.521 7.521 0 0 0-3.935 3.306l-48.478 83.964a7.513 7.513 0 0 0-.892 5.066l16.835 95.483a7.495 7.495 0 0 0 2.568 4.453l74.277 62.319a7.507 7.507 0 0 0 4.828 1.76h96.957a7.515 7.515 0 0 0 4.831-1.76l74.274-62.319a7.508 7.508 0 0 0 2.567-4.453l16.839-95.483a7.538 7.538 0 0 0-.896-5.066l-48.474-83.964a7.526 7.526 0 0 0-3.939-3.306l-91.112-33.16a7.5 7.5 0 0 0-5.138 0"/><path fill="#fff" d="M570.231 111.865a59.358 59.358 0 0 1 5.654-4.821 37.76 37.76 0 0 1 6.228-3.773c2.192-1.052 4.559-1.866 7.101-2.452 2.542-.585 5.301-.876 8.281-.876 4.91 0 9.265.848 13.063 2.542 3.801 1.694 7.001 4.067 9.603 7.101 2.602 3.04 4.558 6.663 5.873 10.871 1.316 4.205 1.976 8.826 1.976 13.851v57.423h-24.115v-57.423c0-5.025-1.168-8.929-3.5-11.706-2.342-2.775-5.786-4.162-10.351-4.162-3.385 0-6.569.73-9.556 2.192-2.981 1.462-5.814 3.504-8.498 6.137v64.962h-24.202v-90.389h14.903c3.04 0 5.057 1.403 6.056 4.211l1.484 6.312Z"/></svg>
\ No newline at end of file
diff --git a/src/collections/integrations/knative/icons/components/ingress/icons/white/ingress-white.svg b/src/collections/integrations/knative/icons/components/ingress/icons/white/ingress-white.svg
new file mode 100644
index 000000000000..96eda4b47c97
--- /dev/null
+++ b/src/collections/integrations/knative/icons/components/ingress/icons/white/ingress-white.svg
@@ -0,0 +1,19 @@
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 735 593.5" style="enable-background:new 0 0 735 593.5;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+	.st1{opacity:0.8;fill:#FFFFFF;}
+</style>
+<path class="st0" d="M297.5,1.5L65.7,113.1c-4.1,2-7.1,5.7-8.1,10.2L0.4,374.1c-1,4.5,0.1,9.1,2.9,12.7l160.4,201.1
+	c2.9,3.6,7.2,5.7,11.7,5.7h257.2c4.6,0,8.9-2.1,11.7-5.7l160.4-201.1c2.9-3.6,3.9-8.3,2.9-12.7l-57.2-250.8c-1-4.5-4-8.2-8.1-10.2
+	L310.5,1.5C306.4-0.5,301.6-0.5,297.5,1.5"/>
+<path d="M221.8,210.5h51.1v100.8h1c5.1-8.8,10.5-16.9,15.6-25l51.7-75.7h63.2l-75.4,97l79.5,130.9h-60.2L292.5,340l-19.6,24v74.4
+	h-51.1L221.8,210.5L221.8,210.5z"/>
+<path class="st1" d="M585.3,1.3l-91.1,33.2c-1.7,0.6-3.1,1.8-3.9,3.3l-48.5,84c-0.9,1.5-1.2,3.3-0.9,5.1l16.8,95.5
+	c0.3,1.7,1.2,3.3,2.6,4.5l74.3,62.3c1.4,1.1,3.1,1.8,4.8,1.8h97c1.8,0,3.5-0.6,4.8-1.8l74.3-62.3c1.4-1.1,2.3-2.7,2.6-4.5l16.8-95.5
+	c0.3-1.7,0-3.5-0.9-5.1l-48.5-84c-0.9-1.5-2.3-2.7-3.9-3.3L590.5,1.3C588.8,0.7,587,0.7,585.3,1.3"/>
+<path d="M570.2,111.9c1.8-1.7,3.7-3.3,5.7-4.8c1.9-1.5,4-2.7,6.2-3.8c2.2-1.1,4.6-1.9,7.1-2.5c2.5-0.6,5.3-0.9,8.3-0.9
+	c4.9,0,9.3,0.8,13.1,2.5c3.8,1.7,7,4.1,9.6,7.1c2.6,3,4.6,6.7,5.9,10.9c1.3,4.2,2,8.8,2,13.9v57.4h-24.1v-57.4c0-5-1.2-8.9-3.5-11.7
+	c-2.3-2.8-5.8-4.2-10.4-4.2c-3.4,0-6.6,0.7-9.6,2.2c-3,1.5-5.8,3.5-8.5,6.1v65h-24.2v-90.4h14.9c3,0,5.1,1.4,6.1,4.2L570.2,111.9
+	L570.2,111.9z"/>
+</svg>
\ No newline at end of file
diff --git a/src/collections/integrations/knative/icons/components/pod-autoscaler/icons/color/pod-autoscaler-color.svg b/src/collections/integrations/knative/icons/components/pod-autoscaler/icons/color/pod-autoscaler-color.svg
new file mode 100644
index 000000000000..64c3ec97e09a
--- /dev/null
+++ b/src/collections/integrations/knative/icons/components/pod-autoscaler/icons/color/pod-autoscaler-color.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 735 593.5" xmlns="http://www.w3.org/2000/svg"><path fill="#0865ad" d="M297.496 1.488 65.749 113.096a15.035 15.035 0 0 0-8.135 10.194L.377 374.065a15.02 15.02 0 0 0 2.902 12.711l160.376 201.108a15.038 15.038 0 0 0 11.747 5.657H432.63c4.571 0 8.895-2.085 11.747-5.657l160.376-201.108a15.023 15.023 0 0 0 2.903-12.711L550.418 123.29a15.019 15.019 0 0 0-8.135-10.194L310.536 1.488a15.022 15.022 0 0 0-13.04 0"/><path fill="#fff" d="M221.845 210.533h51.054v100.764h1.017c5.072-8.798 10.48-16.907 15.552-25.023l51.736-75.741h63.225l-75.398 97.039 79.455 130.856h-60.18l-55.792-98.394-19.615 24.005v74.389h-51.054V210.533Z"/><path fill="#6695ca" d="m585.328 1.307-91.112 33.16a7.521 7.521 0 0 0-3.935 3.306l-48.478 83.964a7.513 7.513 0 0 0-.892 5.066l16.835 95.483a7.495 7.495 0 0 0 2.568 4.453l74.277 62.319a7.507 7.507 0 0 0 4.828 1.76h96.957a7.515 7.515 0 0 0 4.831-1.76l74.274-62.319a7.508 7.508 0 0 0 2.567-4.453l16.839-95.483a7.538 7.538 0 0 0-.896-5.066l-48.474-83.964a7.526 7.526 0 0 0-3.939-3.306l-91.112-33.16a7.5 7.5 0 0 0-5.138 0"/><path fill="#fff" d="M570.231 111.865a59.358 59.358 0 0 1 5.654-4.821 37.76 37.76 0 0 1 6.228-3.773c2.192-1.052 4.559-1.866 7.101-2.452 2.542-.585 5.301-.876 8.281-.876 4.91 0 9.265.848 13.063 2.542 3.801 1.694 7.001 4.067 9.603 7.101 2.602 3.04 4.558 6.663 5.873 10.871 1.316 4.205 1.976 8.826 1.976 13.851v57.423h-24.115v-57.423c0-5.025-1.168-8.929-3.5-11.706-2.342-2.775-5.786-4.162-10.351-4.162-3.385 0-6.569.73-9.556 2.192-2.981 1.462-5.814 3.504-8.498 6.137v64.962h-24.202v-90.389h14.903c3.04 0 5.057 1.403 6.056 4.211l1.484 6.312Z"/></svg>
\ No newline at end of file
diff --git a/src/collections/integrations/knative/icons/components/pod-autoscaler/icons/white/pod-autoscaler-white.svg b/src/collections/integrations/knative/icons/components/pod-autoscaler/icons/white/pod-autoscaler-white.svg
new file mode 100644
index 000000000000..96eda4b47c97
--- /dev/null
+++ b/src/collections/integrations/knative/icons/components/pod-autoscaler/icons/white/pod-autoscaler-white.svg
@@ -0,0 +1,19 @@
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 735 593.5" style="enable-background:new 0 0 735 593.5;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+	.st1{opacity:0.8;fill:#FFFFFF;}
+</style>
+<path class="st0" d="M297.5,1.5L65.7,113.1c-4.1,2-7.1,5.7-8.1,10.2L0.4,374.1c-1,4.5,0.1,9.1,2.9,12.7l160.4,201.1
+	c2.9,3.6,7.2,5.7,11.7,5.7h257.2c4.6,0,8.9-2.1,11.7-5.7l160.4-201.1c2.9-3.6,3.9-8.3,2.9-12.7l-57.2-250.8c-1-4.5-4-8.2-8.1-10.2
+	L310.5,1.5C306.4-0.5,301.6-0.5,297.5,1.5"/>
+<path d="M221.8,210.5h51.1v100.8h1c5.1-8.8,10.5-16.9,15.6-25l51.7-75.7h63.2l-75.4,97l79.5,130.9h-60.2L292.5,340l-19.6,24v74.4
+	h-51.1L221.8,210.5L221.8,210.5z"/>
+<path class="st1" d="M585.3,1.3l-91.1,33.2c-1.7,0.6-3.1,1.8-3.9,3.3l-48.5,84c-0.9,1.5-1.2,3.3-0.9,5.1l16.8,95.5
+	c0.3,1.7,1.2,3.3,2.6,4.5l74.3,62.3c1.4,1.1,3.1,1.8,4.8,1.8h97c1.8,0,3.5-0.6,4.8-1.8l74.3-62.3c1.4-1.1,2.3-2.7,2.6-4.5l16.8-95.5
+	c0.3-1.7,0-3.5-0.9-5.1l-48.5-84c-0.9-1.5-2.3-2.7-3.9-3.3L590.5,1.3C588.8,0.7,587,0.7,585.3,1.3"/>
+<path d="M570.2,111.9c1.8-1.7,3.7-3.3,5.7-4.8c1.9-1.5,4-2.7,6.2-3.8c2.2-1.1,4.6-1.9,7.1-2.5c2.5-0.6,5.3-0.9,8.3-0.9
+	c4.9,0,9.3,0.8,13.1,2.5c3.8,1.7,7,4.1,9.6,7.1c2.6,3,4.6,6.7,5.9,10.9c1.3,4.2,2,8.8,2,13.9v57.4h-24.1v-57.4c0-5-1.2-8.9-3.5-11.7
+	c-2.3-2.8-5.8-4.2-10.4-4.2c-3.4,0-6.6,0.7-9.6,2.2c-3,1.5-5.8,3.5-8.5,6.1v65h-24.2v-90.4h14.9c3,0,5.1,1.4,6.1,4.2L570.2,111.9
+	L570.2,111.9z"/>
+</svg>
\ No newline at end of file
diff --git a/src/collections/integrations/knative/icons/components/revision/icons/color/revision-color.svg b/src/collections/integrations/knative/icons/components/revision/icons/color/revision-color.svg
new file mode 100644
index 000000000000..64c3ec97e09a
--- /dev/null
+++ b/src/collections/integrations/knative/icons/components/revision/icons/color/revision-color.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 735 593.5" xmlns="http://www.w3.org/2000/svg"><path fill="#0865ad" d="M297.496 1.488 65.749 113.096a15.035 15.035 0 0 0-8.135 10.194L.377 374.065a15.02 15.02 0 0 0 2.902 12.711l160.376 201.108a15.038 15.038 0 0 0 11.747 5.657H432.63c4.571 0 8.895-2.085 11.747-5.657l160.376-201.108a15.023 15.023 0 0 0 2.903-12.711L550.418 123.29a15.019 15.019 0 0 0-8.135-10.194L310.536 1.488a15.022 15.022 0 0 0-13.04 0"/><path fill="#fff" d="M221.845 210.533h51.054v100.764h1.017c5.072-8.798 10.48-16.907 15.552-25.023l51.736-75.741h63.225l-75.398 97.039 79.455 130.856h-60.18l-55.792-98.394-19.615 24.005v74.389h-51.054V210.533Z"/><path fill="#6695ca" d="m585.328 1.307-91.112 33.16a7.521 7.521 0 0 0-3.935 3.306l-48.478 83.964a7.513 7.513 0 0 0-.892 5.066l16.835 95.483a7.495 7.495 0 0 0 2.568 4.453l74.277 62.319a7.507 7.507 0 0 0 4.828 1.76h96.957a7.515 7.515 0 0 0 4.831-1.76l74.274-62.319a7.508 7.508 0 0 0 2.567-4.453l16.839-95.483a7.538 7.538 0 0 0-.896-5.066l-48.474-83.964a7.526 7.526 0 0 0-3.939-3.306l-91.112-33.16a7.5 7.5 0 0 0-5.138 0"/><path fill="#fff" d="M570.231 111.865a59.358 59.358 0 0 1 5.654-4.821 37.76 37.76 0 0 1 6.228-3.773c2.192-1.052 4.559-1.866 7.101-2.452 2.542-.585 5.301-.876 8.281-.876 4.91 0 9.265.848 13.063 2.542 3.801 1.694 7.001 4.067 9.603 7.101 2.602 3.04 4.558 6.663 5.873 10.871 1.316 4.205 1.976 8.826 1.976 13.851v57.423h-24.115v-57.423c0-5.025-1.168-8.929-3.5-11.706-2.342-2.775-5.786-4.162-10.351-4.162-3.385 0-6.569.73-9.556 2.192-2.981 1.462-5.814 3.504-8.498 6.137v64.962h-24.202v-90.389h14.903c3.04 0 5.057 1.403 6.056 4.211l1.484 6.312Z"/></svg>
\ No newline at end of file
diff --git a/src/collections/integrations/knative/icons/components/revision/icons/white/revision-white.svg b/src/collections/integrations/knative/icons/components/revision/icons/white/revision-white.svg
new file mode 100644
index 000000000000..96eda4b47c97
--- /dev/null
+++ b/src/collections/integrations/knative/icons/components/revision/icons/white/revision-white.svg
@@ -0,0 +1,19 @@
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 735 593.5" style="enable-background:new 0 0 735 593.5;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+	.st1{opacity:0.8;fill:#FFFFFF;}
+</style>
+<path class="st0" d="M297.5,1.5L65.7,113.1c-4.1,2-7.1,5.7-8.1,10.2L0.4,374.1c-1,4.5,0.1,9.1,2.9,12.7l160.4,201.1
+	c2.9,3.6,7.2,5.7,11.7,5.7h257.2c4.6,0,8.9-2.1,11.7-5.7l160.4-201.1c2.9-3.6,3.9-8.3,2.9-12.7l-57.2-250.8c-1-4.5-4-8.2-8.1-10.2
+	L310.5,1.5C306.4-0.5,301.6-0.5,297.5,1.5"/>
+<path d="M221.8,210.5h51.1v100.8h1c5.1-8.8,10.5-16.9,15.6-25l51.7-75.7h63.2l-75.4,97l79.5,130.9h-60.2L292.5,340l-19.6,24v74.4
+	h-51.1L221.8,210.5L221.8,210.5z"/>
+<path class="st1" d="M585.3,1.3l-91.1,33.2c-1.7,0.6-3.1,1.8-3.9,3.3l-48.5,84c-0.9,1.5-1.2,3.3-0.9,5.1l16.8,95.5
+	c0.3,1.7,1.2,3.3,2.6,4.5l74.3,62.3c1.4,1.1,3.1,1.8,4.8,1.8h97c1.8,0,3.5-0.6,4.8-1.8l74.3-62.3c1.4-1.1,2.3-2.7,2.6-4.5l16.8-95.5
+	c0.3-1.7,0-3.5-0.9-5.1l-48.5-84c-0.9-1.5-2.3-2.7-3.9-3.3L590.5,1.3C588.8,0.7,587,0.7,585.3,1.3"/>
+<path d="M570.2,111.9c1.8-1.7,3.7-3.3,5.7-4.8c1.9-1.5,4-2.7,6.2-3.8c2.2-1.1,4.6-1.9,7.1-2.5c2.5-0.6,5.3-0.9,8.3-0.9
+	c4.9,0,9.3,0.8,13.1,2.5c3.8,1.7,7,4.1,9.6,7.1c2.6,3,4.6,6.7,5.9,10.9c1.3,4.2,2,8.8,2,13.9v57.4h-24.1v-57.4c0-5-1.2-8.9-3.5-11.7
+	c-2.3-2.8-5.8-4.2-10.4-4.2c-3.4,0-6.6,0.7-9.6,2.2c-3,1.5-5.8,3.5-8.5,6.1v65h-24.2v-90.4h14.9c3,0,5.1,1.4,6.1,4.2L570.2,111.9
+	L570.2,111.9z"/>
+</svg>
\ No newline at end of file
diff --git a/src/collections/integrations/knative/icons/components/route/icons/color/route-color.svg b/src/collections/integrations/knative/icons/components/route/icons/color/route-color.svg
new file mode 100644
index 000000000000..64c3ec97e09a
--- /dev/null
+++ b/src/collections/integrations/knative/icons/components/route/icons/color/route-color.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 735 593.5" xmlns="http://www.w3.org/2000/svg"><path fill="#0865ad" d="M297.496 1.488 65.749 113.096a15.035 15.035 0 0 0-8.135 10.194L.377 374.065a15.02 15.02 0 0 0 2.902 12.711l160.376 201.108a15.038 15.038 0 0 0 11.747 5.657H432.63c4.571 0 8.895-2.085 11.747-5.657l160.376-201.108a15.023 15.023 0 0 0 2.903-12.711L550.418 123.29a15.019 15.019 0 0 0-8.135-10.194L310.536 1.488a15.022 15.022 0 0 0-13.04 0"/><path fill="#fff" d="M221.845 210.533h51.054v100.764h1.017c5.072-8.798 10.48-16.907 15.552-25.023l51.736-75.741h63.225l-75.398 97.039 79.455 130.856h-60.18l-55.792-98.394-19.615 24.005v74.389h-51.054V210.533Z"/><path fill="#6695ca" d="m585.328 1.307-91.112 33.16a7.521 7.521 0 0 0-3.935 3.306l-48.478 83.964a7.513 7.513 0 0 0-.892 5.066l16.835 95.483a7.495 7.495 0 0 0 2.568 4.453l74.277 62.319a7.507 7.507 0 0 0 4.828 1.76h96.957a7.515 7.515 0 0 0 4.831-1.76l74.274-62.319a7.508 7.508 0 0 0 2.567-4.453l16.839-95.483a7.538 7.538 0 0 0-.896-5.066l-48.474-83.964a7.526 7.526 0 0 0-3.939-3.306l-91.112-33.16a7.5 7.5 0 0 0-5.138 0"/><path fill="#fff" d="M570.231 111.865a59.358 59.358 0 0 1 5.654-4.821 37.76 37.76 0 0 1 6.228-3.773c2.192-1.052 4.559-1.866 7.101-2.452 2.542-.585 5.301-.876 8.281-.876 4.91 0 9.265.848 13.063 2.542 3.801 1.694 7.001 4.067 9.603 7.101 2.602 3.04 4.558 6.663 5.873 10.871 1.316 4.205 1.976 8.826 1.976 13.851v57.423h-24.115v-57.423c0-5.025-1.168-8.929-3.5-11.706-2.342-2.775-5.786-4.162-10.351-4.162-3.385 0-6.569.73-9.556 2.192-2.981 1.462-5.814 3.504-8.498 6.137v64.962h-24.202v-90.389h14.903c3.04 0 5.057 1.403 6.056 4.211l1.484 6.312Z"/></svg>
\ No newline at end of file
diff --git a/src/collections/integrations/knative/icons/components/route/icons/white/route-white.svg b/src/collections/integrations/knative/icons/components/route/icons/white/route-white.svg
new file mode 100644
index 000000000000..96eda4b47c97
--- /dev/null
+++ b/src/collections/integrations/knative/icons/components/route/icons/white/route-white.svg
@@ -0,0 +1,19 @@
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 735 593.5" style="enable-background:new 0 0 735 593.5;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+	.st1{opacity:0.8;fill:#FFFFFF;}
+</style>
+<path class="st0" d="M297.5,1.5L65.7,113.1c-4.1,2-7.1,5.7-8.1,10.2L0.4,374.1c-1,4.5,0.1,9.1,2.9,12.7l160.4,201.1
+	c2.9,3.6,7.2,5.7,11.7,5.7h257.2c4.6,0,8.9-2.1,11.7-5.7l160.4-201.1c2.9-3.6,3.9-8.3,2.9-12.7l-57.2-250.8c-1-4.5-4-8.2-8.1-10.2
+	L310.5,1.5C306.4-0.5,301.6-0.5,297.5,1.5"/>
+<path d="M221.8,210.5h51.1v100.8h1c5.1-8.8,10.5-16.9,15.6-25l51.7-75.7h63.2l-75.4,97l79.5,130.9h-60.2L292.5,340l-19.6,24v74.4
+	h-51.1L221.8,210.5L221.8,210.5z"/>
+<path class="st1" d="M585.3,1.3l-91.1,33.2c-1.7,0.6-3.1,1.8-3.9,3.3l-48.5,84c-0.9,1.5-1.2,3.3-0.9,5.1l16.8,95.5
+	c0.3,1.7,1.2,3.3,2.6,4.5l74.3,62.3c1.4,1.1,3.1,1.8,4.8,1.8h97c1.8,0,3.5-0.6,4.8-1.8l74.3-62.3c1.4-1.1,2.3-2.7,2.6-4.5l16.8-95.5
+	c0.3-1.7,0-3.5-0.9-5.1l-48.5-84c-0.9-1.5-2.3-2.7-3.9-3.3L590.5,1.3C588.8,0.7,587,0.7,585.3,1.3"/>
+<path d="M570.2,111.9c1.8-1.7,3.7-3.3,5.7-4.8c1.9-1.5,4-2.7,6.2-3.8c2.2-1.1,4.6-1.9,7.1-2.5c2.5-0.6,5.3-0.9,8.3-0.9
+	c4.9,0,9.3,0.8,13.1,2.5c3.8,1.7,7,4.1,9.6,7.1c2.6,3,4.6,6.7,5.9,10.9c1.3,4.2,2,8.8,2,13.9v57.4h-24.1v-57.4c0-5-1.2-8.9-3.5-11.7
+	c-2.3-2.8-5.8-4.2-10.4-4.2c-3.4,0-6.6,0.7-9.6,2.2c-3,1.5-5.8,3.5-8.5,6.1v65h-24.2v-90.4h14.9c3,0,5.1,1.4,6.1,4.2L570.2,111.9
+	L570.2,111.9z"/>
+</svg>
\ No newline at end of file
diff --git a/src/collections/integrations/knative/icons/components/serverless-service/icons/color/serverless-service-color.svg b/src/collections/integrations/knative/icons/components/serverless-service/icons/color/serverless-service-color.svg
new file mode 100644
index 000000000000..64c3ec97e09a
--- /dev/null
+++ b/src/collections/integrations/knative/icons/components/serverless-service/icons/color/serverless-service-color.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 735 593.5" xmlns="http://www.w3.org/2000/svg"><path fill="#0865ad" d="M297.496 1.488 65.749 113.096a15.035 15.035 0 0 0-8.135 10.194L.377 374.065a15.02 15.02 0 0 0 2.902 12.711l160.376 201.108a15.038 15.038 0 0 0 11.747 5.657H432.63c4.571 0 8.895-2.085 11.747-5.657l160.376-201.108a15.023 15.023 0 0 0 2.903-12.711L550.418 123.29a15.019 15.019 0 0 0-8.135-10.194L310.536 1.488a15.022 15.022 0 0 0-13.04 0"/><path fill="#fff" d="M221.845 210.533h51.054v100.764h1.017c5.072-8.798 10.48-16.907 15.552-25.023l51.736-75.741h63.225l-75.398 97.039 79.455 130.856h-60.18l-55.792-98.394-19.615 24.005v74.389h-51.054V210.533Z"/><path fill="#6695ca" d="m585.328 1.307-91.112 33.16a7.521 7.521 0 0 0-3.935 3.306l-48.478 83.964a7.513 7.513 0 0 0-.892 5.066l16.835 95.483a7.495 7.495 0 0 0 2.568 4.453l74.277 62.319a7.507 7.507 0 0 0 4.828 1.76h96.957a7.515 7.515 0 0 0 4.831-1.76l74.274-62.319a7.508 7.508 0 0 0 2.567-4.453l16.839-95.483a7.538 7.538 0 0 0-.896-5.066l-48.474-83.964a7.526 7.526 0 0 0-3.939-3.306l-91.112-33.16a7.5 7.5 0 0 0-5.138 0"/><path fill="#fff" d="M570.231 111.865a59.358 59.358 0 0 1 5.654-4.821 37.76 37.76 0 0 1 6.228-3.773c2.192-1.052 4.559-1.866 7.101-2.452 2.542-.585 5.301-.876 8.281-.876 4.91 0 9.265.848 13.063 2.542 3.801 1.694 7.001 4.067 9.603 7.101 2.602 3.04 4.558 6.663 5.873 10.871 1.316 4.205 1.976 8.826 1.976 13.851v57.423h-24.115v-57.423c0-5.025-1.168-8.929-3.5-11.706-2.342-2.775-5.786-4.162-10.351-4.162-3.385 0-6.569.73-9.556 2.192-2.981 1.462-5.814 3.504-8.498 6.137v64.962h-24.202v-90.389h14.903c3.04 0 5.057 1.403 6.056 4.211l1.484 6.312Z"/></svg>
\ No newline at end of file
diff --git a/src/collections/integrations/knative/icons/components/serverless-service/icons/white/serverless-service-white.svg b/src/collections/integrations/knative/icons/components/serverless-service/icons/white/serverless-service-white.svg
new file mode 100644
index 000000000000..96eda4b47c97
--- /dev/null
+++ b/src/collections/integrations/knative/icons/components/serverless-service/icons/white/serverless-service-white.svg
@@ -0,0 +1,19 @@
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 735 593.5" style="enable-background:new 0 0 735 593.5;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+	.st1{opacity:0.8;fill:#FFFFFF;}
+</style>
+<path class="st0" d="M297.5,1.5L65.7,113.1c-4.1,2-7.1,5.7-8.1,10.2L0.4,374.1c-1,4.5,0.1,9.1,2.9,12.7l160.4,201.1
+	c2.9,3.6,7.2,5.7,11.7,5.7h257.2c4.6,0,8.9-2.1,11.7-5.7l160.4-201.1c2.9-3.6,3.9-8.3,2.9-12.7l-57.2-250.8c-1-4.5-4-8.2-8.1-10.2
+	L310.5,1.5C306.4-0.5,301.6-0.5,297.5,1.5"/>
+<path d="M221.8,210.5h51.1v100.8h1c5.1-8.8,10.5-16.9,15.6-25l51.7-75.7h63.2l-75.4,97l79.5,130.9h-60.2L292.5,340l-19.6,24v74.4
+	h-51.1L221.8,210.5L221.8,210.5z"/>
+<path class="st1" d="M585.3,1.3l-91.1,33.2c-1.7,0.6-3.1,1.8-3.9,3.3l-48.5,84c-0.9,1.5-1.2,3.3-0.9,5.1l16.8,95.5
+	c0.3,1.7,1.2,3.3,2.6,4.5l74.3,62.3c1.4,1.1,3.1,1.8,4.8,1.8h97c1.8,0,3.5-0.6,4.8-1.8l74.3-62.3c1.4-1.1,2.3-2.7,2.6-4.5l16.8-95.5
+	c0.3-1.7,0-3.5-0.9-5.1l-48.5-84c-0.9-1.5-2.3-2.7-3.9-3.3L590.5,1.3C588.8,0.7,587,0.7,585.3,1.3"/>
+<path d="M570.2,111.9c1.8-1.7,3.7-3.3,5.7-4.8c1.9-1.5,4-2.7,6.2-3.8c2.2-1.1,4.6-1.9,7.1-2.5c2.5-0.6,5.3-0.9,8.3-0.9
+	c4.9,0,9.3,0.8,13.1,2.5c3.8,1.7,7,4.1,9.6,7.1c2.6,3,4.6,6.7,5.9,10.9c1.3,4.2,2,8.8,2,13.9v57.4h-24.1v-57.4c0-5-1.2-8.9-3.5-11.7
+	c-2.3-2.8-5.8-4.2-10.4-4.2c-3.4,0-6.6,0.7-9.6,2.2c-3,1.5-5.8,3.5-8.5,6.1v65h-24.2v-90.4h14.9c3,0,5.1,1.4,6.1,4.2L570.2,111.9
+	L570.2,111.9z"/>
+</svg>
\ No newline at end of file
diff --git a/src/collections/integrations/knative/icons/components/service/icons/color/service-color.svg b/src/collections/integrations/knative/icons/components/service/icons/color/service-color.svg
new file mode 100644
index 000000000000..64c3ec97e09a
--- /dev/null
+++ b/src/collections/integrations/knative/icons/components/service/icons/color/service-color.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 735 593.5" xmlns="http://www.w3.org/2000/svg"><path fill="#0865ad" d="M297.496 1.488 65.749 113.096a15.035 15.035 0 0 0-8.135 10.194L.377 374.065a15.02 15.02 0 0 0 2.902 12.711l160.376 201.108a15.038 15.038 0 0 0 11.747 5.657H432.63c4.571 0 8.895-2.085 11.747-5.657l160.376-201.108a15.023 15.023 0 0 0 2.903-12.711L550.418 123.29a15.019 15.019 0 0 0-8.135-10.194L310.536 1.488a15.022 15.022 0 0 0-13.04 0"/><path fill="#fff" d="M221.845 210.533h51.054v100.764h1.017c5.072-8.798 10.48-16.907 15.552-25.023l51.736-75.741h63.225l-75.398 97.039 79.455 130.856h-60.18l-55.792-98.394-19.615 24.005v74.389h-51.054V210.533Z"/><path fill="#6695ca" d="m585.328 1.307-91.112 33.16a7.521 7.521 0 0 0-3.935 3.306l-48.478 83.964a7.513 7.513 0 0 0-.892 5.066l16.835 95.483a7.495 7.495 0 0 0 2.568 4.453l74.277 62.319a7.507 7.507 0 0 0 4.828 1.76h96.957a7.515 7.515 0 0 0 4.831-1.76l74.274-62.319a7.508 7.508 0 0 0 2.567-4.453l16.839-95.483a7.538 7.538 0 0 0-.896-5.066l-48.474-83.964a7.526 7.526 0 0 0-3.939-3.306l-91.112-33.16a7.5 7.5 0 0 0-5.138 0"/><path fill="#fff" d="M570.231 111.865a59.358 59.358 0 0 1 5.654-4.821 37.76 37.76 0 0 1 6.228-3.773c2.192-1.052 4.559-1.866 7.101-2.452 2.542-.585 5.301-.876 8.281-.876 4.91 0 9.265.848 13.063 2.542 3.801 1.694 7.001 4.067 9.603 7.101 2.602 3.04 4.558 6.663 5.873 10.871 1.316 4.205 1.976 8.826 1.976 13.851v57.423h-24.115v-57.423c0-5.025-1.168-8.929-3.5-11.706-2.342-2.775-5.786-4.162-10.351-4.162-3.385 0-6.569.73-9.556 2.192-2.981 1.462-5.814 3.504-8.498 6.137v64.962h-24.202v-90.389h14.903c3.04 0 5.057 1.403 6.056 4.211l1.484 6.312Z"/></svg>
\ No newline at end of file
diff --git a/src/collections/integrations/knative/icons/components/service/icons/white/service-white.svg b/src/collections/integrations/knative/icons/components/service/icons/white/service-white.svg
new file mode 100644
index 000000000000..96eda4b47c97
--- /dev/null
+++ b/src/collections/integrations/knative/icons/components/service/icons/white/service-white.svg
@@ -0,0 +1,19 @@
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 735 593.5" style="enable-background:new 0 0 735 593.5;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+	.st1{opacity:0.8;fill:#FFFFFF;}
+</style>
+<path class="st0" d="M297.5,1.5L65.7,113.1c-4.1,2-7.1,5.7-8.1,10.2L0.4,374.1c-1,4.5,0.1,9.1,2.9,12.7l160.4,201.1
+	c2.9,3.6,7.2,5.7,11.7,5.7h257.2c4.6,0,8.9-2.1,11.7-5.7l160.4-201.1c2.9-3.6,3.9-8.3,2.9-12.7l-57.2-250.8c-1-4.5-4-8.2-8.1-10.2
+	L310.5,1.5C306.4-0.5,301.6-0.5,297.5,1.5"/>
+<path d="M221.8,210.5h51.1v100.8h1c5.1-8.8,10.5-16.9,15.6-25l51.7-75.7h63.2l-75.4,97l79.5,130.9h-60.2L292.5,340l-19.6,24v74.4
+	h-51.1L221.8,210.5L221.8,210.5z"/>
+<path class="st1" d="M585.3,1.3l-91.1,33.2c-1.7,0.6-3.1,1.8-3.9,3.3l-48.5,84c-0.9,1.5-1.2,3.3-0.9,5.1l16.8,95.5
+	c0.3,1.7,1.2,3.3,2.6,4.5l74.3,62.3c1.4,1.1,3.1,1.8,4.8,1.8h97c1.8,0,3.5-0.6,4.8-1.8l74.3-62.3c1.4-1.1,2.3-2.7,2.6-4.5l16.8-95.5
+	c0.3-1.7,0-3.5-0.9-5.1l-48.5-84c-0.9-1.5-2.3-2.7-3.9-3.3L590.5,1.3C588.8,0.7,587,0.7,585.3,1.3"/>
+<path d="M570.2,111.9c1.8-1.7,3.7-3.3,5.7-4.8c1.9-1.5,4-2.7,6.2-3.8c2.2-1.1,4.6-1.9,7.1-2.5c2.5-0.6,5.3-0.9,8.3-0.9
+	c4.9,0,9.3,0.8,13.1,2.5c3.8,1.7,7,4.1,9.6,7.1c2.6,3,4.6,6.7,5.9,10.9c1.3,4.2,2,8.8,2,13.9v57.4h-24.1v-57.4c0-5-1.2-8.9-3.5-11.7
+	c-2.3-2.8-5.8-4.2-10.4-4.2c-3.4,0-6.6,0.7-9.6,2.2c-3,1.5-5.8,3.5-8.5,6.1v65h-24.2v-90.4h14.9c3,0,5.1,1.4,6.1,4.2L570.2,111.9
+	L570.2,111.9z"/>
+</svg>
\ No newline at end of file
diff --git a/src/collections/integrations/knative/index.mdx b/src/collections/integrations/knative/index.mdx
index ef3935ca8431..8492bdb00dfb 100644
--- a/src/collections/integrations/knative/index.mdx
+++ b/src/collections/integrations/knative/index.mdx
@@ -74,6 +74,54 @@ components: [
 "colorIcon": "icons/components/trigger/icons/color/trigger-color.svg",
 "whiteIcon": "icons/components/trigger/icons/white/trigger-white.svg",
 "description": "",
+},
+{
+"name": "cluster-ingress",
+"colorIcon": "icons/components/cluster-ingress/icons/color/cluster-ingress-color.svg",
+"whiteIcon": "icons/components/cluster-ingress/icons/white/cluster-ingress-white.svg",
+"description": "",
+},
+{
+"name": "ingress",
+"colorIcon": "icons/components/ingress/icons/color/ingress-color.svg",
+"whiteIcon": "icons/components/ingress/icons/white/ingress-white.svg",
+"description": "",
+},
+{
+"name": "pod-autoscaler",
+"colorIcon": "icons/components/pod-autoscaler/icons/color/pod-autoscaler-color.svg",
+"whiteIcon": "icons/components/pod-autoscaler/icons/white/pod-autoscaler-white.svg",
+"description": "",
+},
+{
+"name": "serverless-service",
+"colorIcon": "icons/components/serverless-service/icons/color/serverless-service-color.svg",
+"whiteIcon": "icons/components/serverless-service/icons/white/serverless-service-white.svg",
+"description": "",
+},
+{
+"name": "configuration",
+"colorIcon": "icons/components/configuration/icons/color/configuration-color.svg",
+"whiteIcon": "icons/components/configuration/icons/white/configuration-white.svg",
+"description": "",
+},
+{
+"name": "revision",
+"colorIcon": "icons/components/revision/icons/color/revision-color.svg",
+"whiteIcon": "icons/components/revision/icons/white/revision-white.svg",
+"description": "",
+},
+{
+"name": "route",
+"colorIcon": "icons/components/route/icons/color/route-color.svg",
+"whiteIcon": "icons/components/route/icons/white/route-white.svg",
+"description": "",
+},
+{
+"name": "service",
+"colorIcon": "icons/components/service/icons/color/service-color.svg",
+"whiteIcon": "icons/components/service/icons/white/service-white.svg",
+"description": "",
 }]
 featureList: [
   "Provides building blocks for serverless",
diff --git a/src/collections/integrations/kube-ui-server/icons/components/resource-outline-filter/icons/color/resource-outline-filter-color.svg b/src/collections/integrations/kube-ui-server/icons/components/resource-outline-filter/icons/color/resource-outline-filter-color.svg
new file mode 100644
index 000000000000..b96151ed1c2c
--- /dev/null
+++ b/src/collections/integrations/kube-ui-server/icons/components/resource-outline-filter/icons/color/resource-outline-filter-color.svg
@@ -0,0 +1 @@
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 80 80" style="enable-background:new 0 0 80 80" xml:space="preserve"><style>.st1{fill:#fff}.st2{fill:#00a651}</style><path d="M80 73.8c0 1.6-.7 3.2-1.8 4.4-1.2 1.1-2.7 1.8-4.4 1.8H6.2c-1.6 0-3.2-.7-4.4-1.8C.7 77 0 75.5 0 73.8V6.2C0 4.5.7 3 1.8 1.8S4.5 0 6.2 0h67.7c1.6 0 3.2.7 4.4 1.8C79.3 3 80 4.5 80 6.2v67.6z" style="fill:#193d4b"/><path class="st1" d="M70 50.6c.1-3.4-3-4.1-4.8-3.8-3.5.6-3.2 3.8-3.2 3.8 0 3.2-.7 5.5-2.3 7-1.6 1.7-3.8 2.4-6.7 2.4-6.1 0-9-3.1-9-9.4 0 5.2-1.4 9-4 11.7l.6.6c3.1 2.7 7.2 3.9 12.4 3.9s9.4-1.3 12.4-3.9c3.1-2.6 4.6-6.7 4.6-12.3z"/><path class="st1" d="M53 69.7c-5.9 0-10.6-1.6-14.3-4.6-.3-.2-.5-.5-.8-.7l-2-2.1 2-2c2.1-2 3.2-5.3 3.2-9.7h5.6c0 4.8 1.7 6.6 6.3 6.6 2.1 0 3.7-.5 4.7-1.5s1.5-2.7 1.5-5c-.2-2.3 1.2-6 5.5-6.7.4-.1.8-.1 1.3-.1.9 0 1.9.2 2.8.5.9.3 1.7.9 2.4 1.5 1.1 1.1 1.7 2.6 1.7 4.2v.5c0 6.4-1.9 11.3-5.6 14.5-3.7 3-8.5 4.6-14.3 4.6zm-9.2-7.8c2.3 1.5 5.4 2.2 9.1 2.2 4.5 0 8.1-1.1 10.6-3.3 2.3-2 3.6-5.2 3.6-9.7v-.5c0-.2 0-.5-.1-.6-.2-.1-.4-.2-.7-.3-.2-.1-.5-.1-.7 0-.4.1-.8.1-.8.7v.3c0 3.9-1.1 7-3.2 9-2.1 2.1-5 3.2-8.6 3.2-3.4 0-6.2-1-8.2-2.7-.3.6-.7 1.1-1 1.7zM62 29.4c0-3.2-.7-5.5-2.3-7-1.6-1.7-3.8-2.4-6.7-2.4-6 0-9 3.1-9 9.3 0-5.2-1.3-9-3.9-11.7.2-.2.4-.3.5-.5 3.1-2.7 7.2-3.9 12.4-3.9s9.4 1.3 12.4 3.9c3.1 2.7 4.7 6.7 4.7 12.3.1.9-.2 1.9-.8 2.6-.6.7-1.5 1.2-2.4 1.3-1.9.3-5-.5-4.9-3.9z"/><path class="st1" d="M66.1 36.2c-.9 0-1.9-.2-2.8-.5-.9-.3-1.7-.9-2.4-1.5-.8-.8-1.8-2.3-1.7-4.8 0-2.2-.5-3.9-1.5-5-1.1-1.1-2.6-1.5-4.7-1.5-4.5 0-6.4 1.8-6.4 6.5h-5.5c0-4.4-1.1-7.7-3.2-9.7l-2-2.1 2-2c.2-.2.5-.5.7-.6 3.6-3.1 8.4-4.6 14.3-4.6S63.5 12 67.2 15c3.7 3.2 5.6 8 5.6 14.4.2 2.3-1.2 6-5.5 6.7-.4 0-.8 0-1.2.1zM53 17.2c3.6 0 6.6 1.1 8.6 3.2 2.1 2.1 3.2 5.1 3.2 9 0 .3 0 .5.1.7.2.1.4.2.7.3.2.1.5.1.7 0 .3 0 1-.1.8-.8v-.3c0-4.8-1.2-8.1-3.6-10.2-2.6-2.1-6.2-3.3-10.6-3.3-3.6 0-6.7.7-9 2.1.3.5.6 1.1 1 1.7 1.9-1.5 4.7-2.4 8.1-2.4z"/><path class="st2" d="M33.6 57.6c-1.6 1.6-3.8 2.3-6.7 2.3-6.1 0-9-3.1-9-9.4V29.4c0-6.3 3-9.4 9-9.4 2.9 0 5.1.7 6.7 2.3 1.6 1.6 2.3 3.9 2.3 7 0-5.2 1.4-9 4-11.7l-.5-.6c-3.1-2.7-7.2-3.9-12.4-3.9s-9.4 1.3-12.4 3.9S10 23.7 10 29.3v21.2c0 5.6 1.5 9.7 4.6 12.3s7.2 3.9 12.4 3.9 9.4-1.3 12.4-3.9c.2-.2.4-.3.5-.5-2.7-2.7-3.9-6.5-3.9-11.7 0 3.1-.9 5.5-2.4 7z"/><path class="st2" d="M26.8 69.6C21 69.6 16.2 68 12.6 65 8.8 61.8 7 57 7 50.5V29.4c0-6.4 1.9-11.3 5.5-14.5 3.6-3.1 8.4-4.6 14.3-4.6 5.8 0 10.6 1.6 14.3 4.6.3.2.5.5.8.7l1.7 2.1-1.7 1.9c-2.1 2-3.2 5.3-3.2 9.7h-5.6c0-2.3-.5-4-1.5-5.1-1.1-1.1-2.6-1.5-4.7-1.5-4.5 0-6.3 1.8-6.3 6.6v21.2c0 4.8 1.7 6.6 6.3 6.6 2.1 0 3.7-.5 4.7-1.5s1.5-2.7 1.5-5h5.6c0 4.4 1.1 7.7 3.1 9.7l2 2-2 2c-.2.2-.5.5-.7.6-3.5 3.1-8.3 4.7-14.3 4.7zm0-53.7c-4.5 0-8.1 1.1-10.6 3.3-2.4 2.1-3.6 5.4-3.6 10.2v21.2c0 4.8 1.2 8.1 3.6 10.2 2.6 2.1 6.1 3.3 10.6 3.3 3.6 0 6.7-.7 9-2.1-.3-.5-.6-1.2-1-1.7-2 1.7-4.8 2.7-8.1 2.7-7.6 0-11.8-4.5-11.8-12.2V29.4c0-7.8 4.4-12.2 11.8-12.2 3.4 0 6.1.8 8.2 2.7.3-.6.6-1.2 1-1.7-2.3-1.6-5.4-2.3-9.1-2.3z"/><path class="st2" d="M36 29.4v21.3c0 5.2 1.3 9 3.9 11.7 2.7-2.7 4-6.5 4-11.7V29.3c0-5.2-1.3-9-3.9-11.7-2.8 2.6-4 6.5-4 11.8z"/><path class="st2" d="m39.8 65.9-1.9-1.5c-3.2-3.2-4.8-7.8-4.8-13.7V29.4c0-6 1.7-10.5 4.9-13.7l1.6-1.6 2.3 1.6c3.2 3.2 4.8 7.8 4.8 13.7v21.3c0 6-1.7 10.5-4.9 13.7l-2 1.5zm.1-43.3c-.8 2.2-1.2 4.5-1.2 6.8v21.2c-.1 2.3.3 4.6 1.2 6.8.8-1.8 1.2-4.1 1.2-6.8V29.4c.1-2.4-.3-4.7-1.2-6.8z"/><path class="st2" d="M36 51.3s-.3 6.5 3.9 11.1c1.7 1.9 4.3 3.4 7.9 4 2.8.5 4.8-4.8 1.9-6.7-.3-.1-5.7-1.9-5.7-9l-8 .6z"/><path class="st2" d="M48.1 69.1c-.3 0-.6 0-.8-.1-3.9-.7-7-2.3-9.4-4.9-5-5.3-4.7-12.8-4.7-13.1l.1-2.4 13.2-1.1.3 3.1c-.1 4.9 3.3 6.2 3.7 6.3l.5.1.3.2c1.1.8 1.9 2 2.3 3.3.4 1.3.4 2.7-.1 4-.8 2.8-3.1 4.6-5.4 4.6zm-9.2-15.3c.3 1.9 1.1 4.6 3 6.6 1.5 1.6 3.4 2.6 6 3.1.2-.3.3-.7.3-1.1 0-.1 0-.3-.1-.3-1.7-.7-3.3-1.9-4.4-3.4-1.2-1.5-2-3.2-2.4-5l-2.4.1z"/></svg>
\ No newline at end of file
diff --git a/src/collections/integrations/kube-ui-server/icons/components/resource-outline-filter/icons/white/resource-outline-filter-white.svg b/src/collections/integrations/kube-ui-server/icons/components/resource-outline-filter/icons/white/resource-outline-filter-white.svg
new file mode 100644
index 000000000000..c506b44faa1a
--- /dev/null
+++ b/src/collections/integrations/kube-ui-server/icons/components/resource-outline-filter/icons/white/resource-outline-filter-white.svg
@@ -0,0 +1 @@
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 80 80" style="enable-background:new 0 0 80 80" xml:space="preserve"><style>.st1{fill:#fff}</style><path d="M80 73.8c0 1.6-.7 3.2-1.8 4.4-1.2 1.1-2.7 1.8-4.4 1.8H6.2c-1.6 0-3.2-.7-4.4-1.8C.7 77 0 75.5 0 73.8V6.2C0 4.5.7 3 1.8 1.8S4.5 0 6.2 0h67.7c1.6 0 3.2.7 4.4 1.8C79.3 3 80 4.5 80 6.2v67.6z" style="fill:#2d2d2d"/><path class="st1" d="M70 50.6c.1-3.4-3-4.1-4.8-3.8-3.5.6-3.2 3.8-3.2 3.8 0 3.2-.7 5.5-2.3 7-1.6 1.7-3.8 2.4-6.7 2.4-6.1 0-9-3.1-9-9.4 0 5.2-1.4 9-4 11.7l.6.6c3.1 2.7 7.2 3.9 12.4 3.9s9.4-1.3 12.4-3.9c3.1-2.6 4.6-6.7 4.6-12.3z"/><path class="st1" d="M53 69.7c-5.9 0-10.6-1.6-14.3-4.6-.3-.2-.5-.5-.8-.7l-2-2.1 2-2c2.1-2 3.2-5.3 3.2-9.7h5.6c0 4.8 1.7 6.6 6.3 6.6 2.1 0 3.7-.5 4.7-1.5s1.5-2.7 1.5-5c-.2-2.3 1.2-6 5.5-6.7.4-.1.8-.1 1.3-.1.9 0 1.9.2 2.8.5.9.3 1.7.9 2.4 1.5 1.1 1.1 1.7 2.6 1.7 4.2v.5c0 6.4-1.9 11.3-5.6 14.5-3.7 3-8.5 4.6-14.3 4.6zm-9.2-7.8c2.3 1.5 5.4 2.2 9.1 2.2 4.5 0 8.1-1.1 10.6-3.3 2.3-2 3.6-5.2 3.6-9.7v-.5c0-.2 0-.5-.1-.6-.2-.1-.4-.2-.7-.3-.2-.1-.5-.1-.7 0-.4.1-.8.1-.8.7v.3c0 3.9-1.1 7-3.2 9-2.1 2.1-5 3.2-8.6 3.2-3.4 0-6.2-1-8.2-2.7-.3.6-.7 1.1-1 1.7zM62 29.4c0-3.2-.7-5.5-2.3-7-1.6-1.7-3.8-2.4-6.7-2.4-6 0-9 3.1-9 9.3 0-5.2-1.3-9-3.9-11.7.2-.2.4-.3.5-.5 3.1-2.7 7.2-3.9 12.4-3.9s9.4 1.3 12.4 3.9c3.1 2.7 4.7 6.7 4.7 12.3.1.9-.2 1.9-.8 2.6-.6.7-1.5 1.2-2.4 1.3-1.9.3-5-.5-4.9-3.9z"/><path class="st1" d="M66.1 36.2c-.9 0-1.9-.2-2.8-.5-.9-.3-1.7-.9-2.4-1.5-.8-.8-1.8-2.3-1.7-4.8 0-2.2-.5-3.9-1.5-5-1.1-1.1-2.6-1.5-4.7-1.5-4.5 0-6.4 1.8-6.4 6.5h-5.5c0-4.4-1.1-7.7-3.2-9.7l-2-2.1 2-2c.2-.2.5-.5.7-.6 3.6-3.1 8.4-4.6 14.3-4.6S63.5 12 67.2 15c3.7 3.2 5.6 8 5.6 14.4.2 2.3-1.2 6-5.5 6.7-.4 0-.8 0-1.2.1zM53 17.2c3.6 0 6.6 1.1 8.6 3.2 2.1 2.1 3.2 5.1 3.2 9 0 .3 0 .5.1.7.2.1.4.2.7.3.2.1.5.1.7 0 .3 0 1-.1.8-.8v-.3c0-4.8-1.2-8.1-3.6-10.2-2.6-2.1-6.2-3.3-10.6-3.3-3.6 0-6.7.7-9 2.1.3.5.6 1.1 1 1.7 1.9-1.5 4.7-2.4 8.1-2.4z"/><path d="M33.6 57.6c-1.6 1.6-3.8 2.3-6.7 2.3-6.1 0-9-3.1-9-9.4V29.4c0-6.3 3-9.4 9-9.4 2.9 0 5.1.7 6.7 2.3 1.6 1.6 2.3 3.9 2.3 7 0-5.2 1.4-9 4-11.7l-.5-.6c-3.1-2.7-7.2-3.9-12.4-3.9s-9.4 1.3-12.4 3.9S10 23.7 10 29.3v21.2c0 5.6 1.5 9.7 4.6 12.3s7.2 3.9 12.4 3.9 9.4-1.3 12.4-3.9c.2-.2.4-.3.5-.5-2.7-2.7-3.9-6.5-3.9-11.7 0 3.1-.9 5.5-2.4 7z"/><path d="M26.8 69.6C21 69.6 16.2 68 12.6 65 8.8 61.8 7 57 7 50.5V29.4c0-6.4 1.9-11.3 5.5-14.5 3.6-3.1 8.4-4.6 14.3-4.6 5.8 0 10.6 1.6 14.3 4.6.3.2.5.5.8.7l1.7 2.1-1.7 1.9c-2.1 2-3.2 5.3-3.2 9.7h-5.6c0-2.3-.5-4-1.5-5.1-1.1-1.1-2.6-1.5-4.7-1.5-4.5 0-6.3 1.8-6.3 6.6v21.2c0 4.8 1.7 6.6 6.3 6.6 2.1 0 3.7-.5 4.7-1.5s1.5-2.7 1.5-5h5.6c0 4.4 1.1 7.7 3.1 9.7l2 2-2 2c-.2.2-.5.5-.7.6-3.5 3.1-8.3 4.7-14.3 4.7zm0-53.7c-4.5 0-8.1 1.1-10.6 3.3-2.4 2.1-3.6 5.4-3.6 10.2v21.2c0 4.8 1.2 8.1 3.6 10.2 2.6 2.1 6.1 3.3 10.6 3.3 3.6 0 6.7-.7 9-2.1-.3-.5-.6-1.2-1-1.7-2 1.7-4.8 2.7-8.1 2.7-7.6 0-11.8-4.5-11.8-12.2V29.4c0-7.8 4.4-12.2 11.8-12.2 3.4 0 6.1.8 8.2 2.7.3-.6.6-1.2 1-1.7-2.3-1.6-5.4-2.3-9.1-2.3z"/><path d="M36 29.4v21.3c0 5.2 1.3 9 3.9 11.7 2.7-2.7 4-6.5 4-11.7V29.3c0-5.2-1.3-9-3.9-11.7-2.8 2.6-4 6.5-4 11.8z"/><path d="M36 51.3s-.3 6.5 3.9 11.1c1.7 1.9 4.3 3.4 7.9 4 2.8.5 4.8-4.8 1.9-6.7-.3-.1-5.7-1.9-5.7-9l-8 .6z"/><path d="M48.1 69.1c-.3 0-.6 0-.8-.1-3.9-.7-7-2.3-9.4-4.9-5-5.3-4.7-12.8-4.7-13.1l.1-2.4 13.2-1.1.3 3.1c-.1 4.9 3.3 6.2 3.7 6.3l.5.1.3.2c1.1.8 1.9 2 2.3 3.3.4 1.3.4 2.7-.1 4-.8 2.8-3.1 4.6-5.4 4.6zm-9.2-15.3c.3 1.9 1.1 4.6 3 6.6 1.5 1.6 3.4 2.6 6 3.1.2-.3.3-.7.3-1.1 0-.1 0-.3-.1-.3-1.7-.7-3.3-1.9-4.4-3.4-1.2-1.5-2-3.2-2.4-5l-2.4.1z"/><path d="m39.4 65.9-1.9-1.5c-3.2-3.2-4.8-7.8-4.8-13.7V29.5c0-6 1.7-10.5 4.9-13.7l1.6-1.6 2.3 1.6c3.2 3.2 4.8 7.8 4.8 13.7v21.3c0 6-1.7 10.5-4.9 13.7l-2 1.4zm.1-43.3c-.8 2.2-1.2 4.5-1.2 6.8v21.2c-.1 2.3.3 4.6 1.2 6.8.8-1.8 1.2-4.1 1.2-6.8V29.5c.1-2.4-.3-4.7-1.2-6.9z"/></svg>
\ No newline at end of file
diff --git a/src/collections/integrations/kube-ui-server/index.mdx b/src/collections/integrations/kube-ui-server/index.mdx
index 6ac76f97e6a5..4fd512f5d9ae 100644
--- a/src/collections/integrations/kube-ui-server/index.mdx
+++ b/src/collections/integrations/kube-ui-server/index.mdx
@@ -80,6 +80,12 @@ components: [
 "colorIcon": "icons/components/cluster-profile/icons/color/cluster-profile-color.svg",
 "whiteIcon": "icons/components/cluster-profile/icons/white/cluster-profile-white.svg",
 "description": "",
+},
+{
+"name": "resource-outline-filter",
+"colorIcon": "icons/components/resource-outline-filter/icons/color/resource-outline-filter-color.svg",
+"whiteIcon": "icons/components/resource-outline-filter/icons/white/resource-outline-filter-white.svg",
+"description": "",
 }]
 featureList: [
   "WhoAmI service returns the user info of the user making the api call.",
diff --git a/src/collections/integrations/kubernetes/icons/components/limit-range/icons/color/limit-range-color.svg b/src/collections/integrations/kubernetes/icons/components/limit-range/icons/color/limit-range-color.svg
index fca385123ecb..56f4608a0b5c 100644
--- a/src/collections/integrations/kubernetes/icons/components/limit-range/icons/color/limit-range-color.svg
+++ b/src/collections/integrations/kubernetes/icons/components/limit-range/icons/color/limit-range-color.svg
@@ -1,3 +1,3 @@
-<svg width="90" height="90" viewBox="0 0 90 90" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="90" height="90" viewBox="0 0 90 90" fill="none"  id="limit-range"  xmlns="http://www.w3.org/2000/svg">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M5.5 6.5H13.4V8V9.5H6.5V15.8H5H3.5V8.5C3.5 7.39543 4.39543 6.5 5.5 6.5ZM3.5 81.5V81.5003C3.5 82.6048 4.39543 83.5003 5.5 83.5003H54.3464C55.451 83.5003 56.3464 82.6048 56.3464 81.5003V36.4438C56.3464 35.3392 55.451 34.4438 54.3464 34.4438H5.5C4.39543 34.4438 3.5 35.3392 3.5 36.4438V37.7V52.3V55.95V70.55V74.2V81.5ZM5 34.05H3.5V19.45H5H6.5V34.05H5ZM17.35 8V6.5H33.15V8V9.5H17.35V8ZM37.1 8V6.5H52.9V8V9.5H37.1V8ZM56.85 8V6.5H72.65V8V9.5H56.85V8ZM76.6 8V6.5H84.5C85.6046 6.5 86.5 7.39543 86.5 8.5V15.8H85H83.5V9.5H76.6V8ZM85 19.45H86.5V34.05H85H83.5V19.45H85ZM85 37.7H86.5V52.3H85H83.5V37.7H85ZM85 55.95H86.5V70.55H85H83.5V55.95H85ZM85 74.2H86.5V81.5C86.5 82.6046 85.6046 83.5 84.5 83.5H76.6V82V80.5H83.5V74.2H85ZM72.65 82V83.5H56.85V82V80.5H72.65V82Z" fill="#326CE5"/>
 </svg>
diff --git a/src/collections/integrations/kubernetes/icons/components/limit-range/icons/white/limit-range-white.svg b/src/collections/integrations/kubernetes/icons/components/limit-range/icons/white/limit-range-white.svg
index 8fcf9c9f8f58..670b24782e27 100644
--- a/src/collections/integrations/kubernetes/icons/components/limit-range/icons/white/limit-range-white.svg
+++ b/src/collections/integrations/kubernetes/icons/components/limit-range/icons/white/limit-range-white.svg
@@ -1,3 +1,3 @@
-<svg width="90" height="90" viewBox="0 0 90 90" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="90" height="90" id="limit-range"  viewBox="0 0 90 90" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M5.5 6.5H13.4V8V9.5H6.5V15.8H5H3.5V8.5C3.5 7.39543 4.39543 6.5 5.5 6.5ZM3.5 81.5V81.5003C3.5 82.6048 4.39543 83.5003 5.5 83.5003H54.3464C55.451 83.5003 56.3464 82.6048 56.3464 81.5003V36.4438C56.3464 35.3392 55.451 34.4438 54.3464 34.4438H5.5C4.39543 34.4438 3.5 35.3392 3.5 36.4438V37.7V52.3V55.95V70.55V74.2V81.5ZM5 34.05H3.5V19.45H5H6.5V34.05H5ZM17.35 8V6.5H33.15V8V9.5H17.35V8ZM37.1 8V6.5H52.9V8V9.5H37.1V8ZM56.85 8V6.5H72.65V8V9.5H56.85V8ZM76.6 8V6.5H84.5C85.6046 6.5 86.5 7.39543 86.5 8.5V15.8H85H83.5V9.5H76.6V8ZM85 19.45H86.5V34.05H85H83.5V19.45H85ZM85 37.7H86.5V52.3H85H83.5V37.7H85ZM85 55.95H86.5V70.55H85H83.5V55.95H85ZM85 74.2H86.5V81.5C86.5 82.6046 85.6046 83.5 84.5 83.5H76.6V82V80.5H83.5V74.2H85ZM72.65 82V83.5H56.85V82V80.5H72.65V82Z" fill="white"/>
 </svg>
diff --git a/src/collections/integrations/open-policy-agent-(opa)/icons/components/config-pod-status/icons/color/config-pod-status-color.svg b/src/collections/integrations/open-policy-agent-(opa)/icons/components/config-pod-status/icons/color/config-pod-status-color.svg
new file mode 100644
index 000000000000..fd8cf702971f
--- /dev/null
+++ b/src/collections/integrations/open-policy-agent-(opa)/icons/components/config-pod-status/icons/color/config-pod-status-color.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="16.37 -1.63 395.51 435.76"><style>svg {enable-background:new 0 0 432 434}</style><path fill="#bfbfbf" d="M71 214.5c7.5-26.7 20.9-50.1 38.4-68.8-5.9-4.4-29.3-22.6-30.4-36.9C77.3 85.4 100.7 6.7 100.7 6.7S30 92.8 25.1 127.6c-3.9 27.3 40.8 81.5 45.5 87v-.1h.4zm287.7-1.4v.2c0 .1.1.2.1.3 7.8-9.4 48.3-59.9 44.6-86-4.9-34.8-75.6-120.9-75.6-120.9s23.4 78.7 21.7 102.1c-1 13.7-22.3 30.8-29.4 36.2 17.5 18.4 31 41.6 38.6 68.1z"/><path fill="#566366" d="M358.7 213.2v-.2c-7.6-26.4-21.1-49.6-38.6-68.1-27.5-29-64.9-46.4-105.2-46.4v93h.1c9.9.1 17.9 8.2 17.9 18.1 0 1.2-.1 2.3-.3 3.4-1.6 8.3-8.8 14.6-17.6 14.7h-.3v34.5l-.2 163.4h3.5s38-55 58.5-70.7c24-18.4 82.2-41.2 82.2-41.2v-99.4l.3-.1c-.1-.2-.1-.5-.2-.7 0-.1 0-.2-.1-.3z"/><path fill="#7d9199" d="M214.7 262.3v-34.5c-8.3-.1-15.2-5.7-17.3-13.3-.4-1.5-.7-3.1-.7-4.8 0-10 8.1-18.1 18.1-18.1h.1V98.9c-40.5 0-78 17.5-105.5 46.8-17.5 18.6-30.9 42.1-38.4 68.8h-.3v100.7s58.2 22.8 82.2 41.2c19.9 15.3 58.3 69.4 58.3 69.4h3.6v-.1h-.2l.1-163.4z"/><path fill="#fff" d="M196.7 209.7c0 1.7.2 3.3.7 4.8 2.1 7.6 9 13.2 17.3 13.3h.3c8.7-.1 16-6.4 17.6-14.7.2-1.1.3-2.2.3-3.4 0-9.9-8-18-17.9-18.1h-.2c-10 0-18.1 8.1-18.1 18.1z"/></svg>
\ No newline at end of file
diff --git a/src/collections/integrations/open-policy-agent-(opa)/icons/components/config-pod-status/icons/white/config-pod-status-white.svg b/src/collections/integrations/open-policy-agent-(opa)/icons/components/config-pod-status/icons/white/config-pod-status-white.svg
new file mode 100644
index 000000000000..a2f8cc72d50d
--- /dev/null
+++ b/src/collections/integrations/open-policy-agent-(opa)/icons/components/config-pod-status/icons/white/config-pod-status-white.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="16.62 -1.63 395.51 435.76"><style>svg {enable-background:new 0 0 432 434}</style><g fill="#fff"><path d="M71.1 214.5c7.5-26.7 20.9-50.1 38.4-68.8-5.9-4.4-29.3-22.6-30.4-36.9C77.5 85.4 100.9 6.7 100.9 6.7S30.2 92.8 25.3 127.6c-3.9 27.3 40.8 81.5 45.5 87v-.1h.3zm287.8-1.4v.2c0 .1.1.2.1.3 7.8-9.4 48.3-59.9 44.6-86C398.7 92.8 328 6.7 328 6.7s23.4 78.7 21.7 102.1c-1 13.7-22.3 30.8-29.4 36.2 17.5 18.5 30.9 41.7 38.6 68.1z" opacity=".64"/><path d="M358.9 213.3v-.2c-7.6-26.4-21.1-49.6-38.6-68.1-27.5-29-64.9-46.4-105.2-46.4v93h.1c9.9.1 17.9 8.2 17.9 18.1 0 1.2-.1 2.3-.3 3.4-1.6 8.3-8.8 14.6-17.6 14.7h-.3v34.5l-.2 163.4h3.5s38-55 58.5-70.7c24-18.4 82.2-41.2 82.2-41.2v-99.4l.3-.1c-.1-.2-.1-.5-.2-.7 0-.1-.1-.2-.1-.3z" opacity=".85"/><path d="M214.9 262.3v-34.5c-8.3-.1-15.2-5.7-17.3-13.3-.4-1.5-.7-3.1-.7-4.8 0-10 8.1-18.1 18.1-18.1h.1V98.9c-40.5 0-78 17.5-105.5 46.8-17.5 18.6-30.9 42.1-38.4 68.8h-.3v100.7s58.2 22.8 82.2 41.2c19.9 15.3 58.3 69.4 58.3 69.4h3.6v-.1h-.2l.1-163.4z" opacity=".75"/></g></svg>
\ No newline at end of file
diff --git a/src/collections/integrations/open-policy-agent-(opa)/index.mdx b/src/collections/integrations/open-policy-agent-(opa)/index.mdx
index 6a5b756e61f0..f5d60b147144 100644
--- a/src/collections/integrations/open-policy-agent-(opa)/index.mdx
+++ b/src/collections/integrations/open-policy-agent-(opa)/index.mdx
@@ -86,6 +86,18 @@ components: [
 "colorIcon": "icons/components/sync-set/icons/color/sync-set-color.svg",
 "whiteIcon": "icons/components/sync-set/icons/white/sync-set-white.svg",
 "description": "",
+},
+{
+"name": "config-pod-status",
+"colorIcon": "icons/components/config-pod-status/icons/color/config-pod-status-color.svg",
+"whiteIcon": "icons/components/config-pod-status/icons/white/config-pod-status-white.svg",
+"description": "",
+},
+{
+"name": "config-pod-status",
+"colorIcon": "icons/components/config-pod-status/icons/color/config-pod-status-color.svg",
+"whiteIcon": "icons/components/config-pod-status/icons/white/config-pod-status-white.svg",
+"description": "",
 }]
 featureList: [
   "Policy-based control for Kubernetes",
diff --git a/src/collections/integrations/pulsar-resources-operator/icons/components/pulsar-ns-isolation-policy/icons/color/pulsar-ns-isolation-policy-color.svg b/src/collections/integrations/pulsar-resources-operator/icons/components/pulsar-ns-isolation-policy/icons/color/pulsar-ns-isolation-policy-color.svg
new file mode 100644
index 000000000000..75cf18514507
--- /dev/null
+++ b/src/collections/integrations/pulsar-resources-operator/icons/components/pulsar-ns-isolation-policy/icons/color/pulsar-ns-isolation-policy-color.svg
@@ -0,0 +1,11 @@
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 800 565.1" style="enable-background:new 0 0 800 565.1;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#448FF7;}
+</style>
+<path class="st0" d="M800,180.1H604.5C551.6,78.7,495.7,0,419.7,0c-99,0-145.6,86.4-190.6,170.5l-3.9,7.3H0v50h131.1
+	c46.3,0,55.8,15.6,55.8,15.6c-36.3,56.4-80,112.1-152.8,112.1H0V408h34.3c141.1,0,202.8-114.5,252.2-206.4
+	c45.4-84.7,77-136,133.1-136c58.2,0,119.5,126.7,173.4,238.6c7.9,16.3,15.9,32.9,24,49.4c-206.7,6.6-305.2,55-385.3,94.4
+	c-58.6,28.9-104.9,64.7-181.1,64.7H0v52.5h50.2c91.8,0,149-28.3,209.8-58.4c84.3-41.4,179.9-88.4,405.2-88.4h130.2v-52.5H722
+	c-12.3,0.9-24.2-3.9-32.4-13.1c-13.1-25.6-25.6-51.4-37.8-77.4l-17-34.9c0,0,12.2-13.1,46-13.1H800V180.1z"/>
+</svg>
diff --git a/src/collections/integrations/pulsar-resources-operator/icons/components/pulsar-ns-isolation-policy/icons/white/pulsar-ns-isolation-policy-white.svg b/src/collections/integrations/pulsar-resources-operator/icons/components/pulsar-ns-isolation-policy/icons/white/pulsar-ns-isolation-policy-white.svg
new file mode 100644
index 000000000000..3b03e21f66f6
--- /dev/null
+++ b/src/collections/integrations/pulsar-resources-operator/icons/components/pulsar-ns-isolation-policy/icons/white/pulsar-ns-isolation-policy-white.svg
@@ -0,0 +1,11 @@
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 800 565.1" style="enable-background:new 0 0 800 565.1;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<path class="st0" d="M800,180.1H604.5C551.6,78.7,495.7,0,419.7,0c-99,0-145.6,86.4-190.6,170.5l-3.9,7.3H0v50h131.1
+	c46.3,0,55.8,15.6,55.8,15.6c-36.3,56.4-80,112.1-152.8,112.1H0V408h34.3c141.1,0,202.8-114.5,252.2-206.4
+	c45.4-84.7,77-136,133.1-136c58.2,0,119.5,126.7,173.4,238.6c7.9,16.3,15.9,32.9,24,49.4c-206.7,6.6-305.2,55-385.3,94.4
+	c-58.6,28.9-104.9,64.7-181.1,64.7H0v52.5h50.2c91.8,0,149-28.3,209.8-58.4c84.3-41.4,179.9-88.4,405.2-88.4h130.2v-52.5H722
+	c-12.3,0.9-24.2-3.9-32.4-13.1c-13.1-25.6-25.6-51.4-37.8-77.4l-17-34.9c0,0,12.2-13.1,46-13.1H800V180.1z"/>
+</svg>
\ No newline at end of file
diff --git a/src/collections/integrations/pulsar-resources-operator/index.mdx b/src/collections/integrations/pulsar-resources-operator/index.mdx
index 3d761ec5f4b1..f7b434d39ce7 100644
--- a/src/collections/integrations/pulsar-resources-operator/index.mdx
+++ b/src/collections/integrations/pulsar-resources-operator/index.mdx
@@ -74,6 +74,18 @@ components: [
 "colorIcon": "icons/components/pulsar-source/icons/color/pulsar-source-color.svg",
 "whiteIcon": "icons/components/pulsar-source/icons/white/pulsar-source-white.svg",
 "description": "",
+},
+{
+"name": "pulsar-ns-isolation-policy",
+"colorIcon": "icons/components/pulsar-ns-isolation-policy/icons/color/pulsar-ns-isolation-policy-color.svg",
+"whiteIcon": "icons/components/pulsar-ns-isolation-policy/icons/white/pulsar-ns-isolation-policy-white.svg",
+"description": "",
+},
+{
+"name": "pulsar-ns-isolation-policy",
+"colorIcon": "icons/components/pulsar-ns-isolation-policy/icons/color/pulsar-ns-isolation-policy-color.svg",
+"whiteIcon": "icons/components/pulsar-ns-isolation-policy/icons/white/pulsar-ns-isolation-policy-white.svg",
+"description": "",
 }]
 featureList: [
   "Automates Pulsar resource management",
diff --git a/src/collections/members/Hargun-Kaur/index.mdx b/src/collections/members/Hargun-Kaur/index.mdx
index 5713b0e040fc..863782637a06 100644
--- a/src/collections/members/Hargun-Kaur/index.mdx
+++ b/src/collections/members/Hargun-Kaur/index.mdx
@@ -12,6 +12,6 @@ badges:
  - community
  - docs
 community_manager: yes
-status: Active
+status: Inactive
 published: true
 ---
diff --git a/src/collections/members/Muhammad-Moinuddin/index.mdx b/src/collections/members/Muhammad-Moinuddin/index.mdx
index 71c95517796d..930778c71946 100644
--- a/src/collections/members/Muhammad-Moinuddin/index.mdx
+++ b/src/collections/members/Muhammad-Moinuddin/index.mdx
@@ -10,6 +10,6 @@ location: Karachi, Pakistan
 bio: |
   Software Engineer - Computer Science - UoK.
   Passionate about web apps, cloud native and open source, eager to learn and innovate.
-status: Active
+status: Inactive
 published: true
 ---
\ No newline at end of file
diff --git a/src/collections/members/_member-profile-template/index.mdx b/src/collections/members/_member-profile-template/index.mdx
index 8bfbfa25a84e..a250b8b4ab05 100644
--- a/src/collections/members/_member-profile-template/index.mdx
+++ b/src/collections/members/_member-profile-template/index.mdx
@@ -5,7 +5,7 @@ image_path: ./display-picture.webp
 github: # just the user handle (e.g. vinayaksh42)
 twitter: # just the user handle (e.g. Vinayak47427793)
 linkedin: # last portion of https://www.linkedin.com/in/<profile-name> (e.g. vinayak-sharma-141096193)
-layer5: # Layer5 Cloud user ID; last portion of https://meshery.layer5.io/user/<uuid>
+layer5: # Layer5 Cloud user ID; last portion of https://cloud.layer5.io/user/<uuid>
 location: # City, Country
 bio: # One or two paragraphs about the community member, enclosed in quotation marks.
 badges: # List of badges that this member carries. 
diff --git a/src/collections/members/ahmed-hendawy/ahmed-hendawy.webp b/src/collections/members/ahmed-hendawy/ahmed-hendawy.webp
new file mode 100644
index 000000000000..2aa2a3087504
Binary files /dev/null and b/src/collections/members/ahmed-hendawy/ahmed-hendawy.webp differ
diff --git a/src/collections/members/ahmed-hendawy/index.mdx b/src/collections/members/ahmed-hendawy/index.mdx
new file mode 100644
index 000000000000..00f204eac28a
--- /dev/null
+++ b/src/collections/members/ahmed-hendawy/index.mdx
@@ -0,0 +1,15 @@
+---
+name: Ahmed Hendawy 
+position: Contributor
+image_path: ./ahmed-hendawy.webp
+github: devhindo
+twitter: devhindo
+linkedin: devhindo
+layer5: c667a565-930a-4f7f-a29e-0a11ba392111
+location: Egypt
+bio: "devhindo is a Software Engineer with a specialized focus on Backend and Cloud Development. He is highly proficient in Golang, Python, and JavaScript, languages he uses to architect and develop scalable, cloud-native applications. His expertise extends to distributed systems and now includes blockchain technologies, allowing him to tackle intricate software challenges with ease. devhindo is passionate about contributing to open source projects, sharing his knowledge and giving back to the community. Additionally, he excels in problem-solving and has a deep understanding of algorithms, which he applies to optimize and innovate within the tech ecosystem. His love for technology drives him to continuously learn and adapt to new frameworks and methodologies in the ever-evolving world of software engineering."
+badges: 
+  - meshery
+status: Active
+published: true
+---
diff --git a/src/collections/members/aviral-asthana/index.mdx b/src/collections/members/aviral-asthana/index.mdx
index 4d05f99b8145..81133b9ddc1d 100644
--- a/src/collections/members/aviral-asthana/index.mdx
+++ b/src/collections/members/aviral-asthana/index.mdx
@@ -7,6 +7,6 @@ linkedin: aviral-asthana-02b70824b
 layer5: 3f770688-e487-45c2-943b-c94b950d3d69
 location: Ghaziabad, India
 bio: Aviral Asthana is a Computer Science student with a passion for full-stack web development. Proficient in the MERN stack, Aviral has hands-on experience in building robust applications and is keenly interested in Golang, Docker, and Kubernetes. He is dedicated to continuous improvement through contributions to open-source projects and actively engaging with the developer community.
-status: Active
+status: Inactive
 published: true
 ---
\ No newline at end of file
diff --git a/src/collections/members/rex-joshua/index.mdx b/src/collections/members/rex-joshua/index.mdx
index d1d6c5e50fc9..b06fa1cbe0af 100644
--- a/src/collections/members/rex-joshua/index.mdx
+++ b/src/collections/members/rex-joshua/index.mdx
@@ -10,6 +10,6 @@ location: Lagos State, Nigeria.
 bio: I am a digital product designer passionate about the interaction between humans and technology. I am also a curious, adaptable, and effective person, capable of analyzing and understanding new concepts quickly and applying them when needed. I use my skills to improve user flows in order to help them achieve their objectives and, as much as possible, align them with business goals to ensure an optimized experience and productivity. When I'm not designing and proposing solutions, I enjoy listening to music, watching football and movies, or playing video games.
 badges:
  - ui-ux
-status : Active
+status : Inactive
 published: true
 ---
diff --git a/src/collections/members/rhoda-michael/index.mdx b/src/collections/members/rhoda-michael/index.mdx
index b917539d5eda..3c0cb5e011a9 100644
--- a/src/collections/members/rhoda-michael/index.mdx
+++ b/src/collections/members/rhoda-michael/index.mdx
@@ -10,6 +10,6 @@ location: Jos, Nigeria
 bio: " I'm Rhoda Michael, a User Experience Designer/Researcher based in Nigeria I focus on accessibility and inclusion for users. I enjoy writing and reading."
 badges:
   - ui-ux
-status: Active
+status: Inactive
 published: true
 ---
\ No newline at end of file
diff --git a/src/collections/members/sangram-rath/index.mdx b/src/collections/members/sangram-rath/index.mdx
index 4a2576198b89..4885e7e64659 100644
--- a/src/collections/members/sangram-rath/index.mdx
+++ b/src/collections/members/sangram-rath/index.mdx
@@ -1,6 +1,6 @@
 ---
 name: Sangram Rath
-position: Contributor
+position: Maintainer
 image_path: ./sangram-rath.webp
 github: sangramrath
 twitter: mr_sangramrath
@@ -9,7 +9,7 @@ layer5: 7dde79fb-2778-4a66-9ce5-6772bafe8df8
 location: Bhubaneswar, Odisha, India
 bio: Sangram Rath is a seasoned technology professional working as a Cloud Architect, mostly designing and implementing solutions on cloud and cloud native technologies such as Kubernetes, OpenShift etc., and has a background going back to datacenters and virtualization. A large part of his experience has been designing and deploying open source applications on cloud.
 badges:
-  - ui-ux
+  - meshery
 status: Active
 published: true
 ---
diff --git a/src/collections/members/shlok-mishra/index.mdx b/src/collections/members/shlok-mishra/index.mdx
index 5597e7fc3958..70df72fb73a9 100644
--- a/src/collections/members/shlok-mishra/index.mdx
+++ b/src/collections/members/shlok-mishra/index.mdx
@@ -12,6 +12,6 @@ My journey in the realm of technology has been an exciting exploration of creati
 Proficient in Java, Python, C#, Docker, Kubernetes, Unity, Unreal, Blender, and Flask. Skilled in Linux, macOS, and Windows OS. Ready to excel in tech roles."
 badges: 
   - meshery
-status: Active 
+status: Inactive 
 published: true 
----
\ No newline at end of file
+---
diff --git a/src/collections/members/vidit-kushwaha/index.mdx b/src/collections/members/vidit-kushwaha/index.mdx
new file mode 100644
index 000000000000..4f7141d329ed
--- /dev/null
+++ b/src/collections/members/vidit-kushwaha/index.mdx
@@ -0,0 +1,16 @@
+---
+name: Vidit Kushwaha
+position: Contributor
+image_path: ./vidit-kushwaha.webp
+github: Vidit-Kushwaha
+twitter: helloVidit
+linkedin: viditkushwaha
+layer5: 1bc7144f-a34f-4bfa-9b08-3a4dbf22e1e8
+location: Uttar Pradesh, India
+bio: "I'm Vidit Kushwaha, a final-year student doing my bachelor's of technology from the National Institute of Technology (NIT), Rourkela, and I'm a tech enthusiast, and I love creating applications that stay on the internet.
+I'm a self-taught developer and always looking for new ways to improve my skills and stay up-to-date with the latest technologies. I am passionate about creating clean and efficient code and love working on projects that challenge me."
+badges: 
+  - meshery
+status: Active
+published: true
+---
diff --git a/src/collections/members/vidit-kushwaha/vidit-kushwaha.webp b/src/collections/members/vidit-kushwaha/vidit-kushwaha.webp
new file mode 100644
index 000000000000..5d15da749372
Binary files /dev/null and b/src/collections/members/vidit-kushwaha/vidit-kushwaha.webp differ
diff --git a/src/collections/members/vivek-vishal/index.mdx b/src/collections/members/vivek-vishal/index.mdx
index bd9bf5b019cc..4c5a5e65a561 100644
--- a/src/collections/members/vivek-vishal/index.mdx
+++ b/src/collections/members/vivek-vishal/index.mdx
@@ -8,7 +8,7 @@ linkedin: vishalvivekm
 location: Punjab, India
 layer5: 878488d5-c394-4b04-91b4-fd2f9e67ffaf 
 bio: Vivek Vishal is a passionate CS undergrad from India who loves to explore new technologies and contribute to Open-Source projects. With proficiency in various programming languages, including Java, C++, C, Bash, and JavaScript, he possesses a profound understanding of SQL, Git, and Command-line tools. Vivek has a strong inclination towards Maths and a keen interest in Machine Learning, constantly expanding his knowledge and skillset. As an active member of the Layer5 community, he eagerly participates in community events and discussions, both to learn and to assist others in getting started with Layer5 projects or other Open-Source endeavors. Don't hesitate to connect with him on his socials below
-status: Active
+status: Inactive
 badges:
  - community
  - docs
diff --git a/src/collections/news/2024/2024-11-12-layer5-launches-kanvas-a-collaborative-platform-for-cloud-native-infrastructure/index.mdx b/src/collections/news/2024/2024-11-12-layer5-launches-kanvas-a-collaborative-platform-for-cloud-native-infrastructure/index.mdx
new file mode 100644
index 000000000000..6deb429fd4e0
--- /dev/null
+++ b/src/collections/news/2024/2024-11-12-layer5-launches-kanvas-a-collaborative-platform-for-cloud-native-infrastructure/index.mdx
@@ -0,0 +1,114 @@
+---
+title: "Layer5 Launches Kanvas: A Collaborative Platform for Cloud Native Infrastructure"
+subtitle: "Enabling teams to collaboratively design, deploy, and manage cloud native infrastructure without finger-pointing"
+date: 2024-11-15 08:00:00 -0530
+author: The Newsroom
+thumbnail: ../../../../assets/images/kanvas/stacked/kanvas-stacked-color.svg
+darkthumbnail: ../../../../assets/images/kanvas/stacked/kanvas-stacked-partial-color.svg
+category: "Press Release"
+description: "Layer5 announces Kanvas, a collaboration platform for engineering teams managing cloud native infrastructure. Built on Meshery, Kanvas provides an intuitive design suite for engineers to visualize, manage, and collaboratively design multi-cloud and Kubernetes-native infrastructure."
+tags:
+ - Announcements
+ - Kanvas
+type: News
+presskit: ""
+resource: false
+published: true
+---
+import { Link } from "gatsby";
+import Kanvas from "./kanvas-icon-color.svg";
+import KanvasScreenshot from "./layer5-kanvas-designer.webp";
+import { NewsWrapper } from "../../News.style.js";
+import Blockquote from "../../../../reusecore/Blockquote";
+import BlockquoteAlt from "../../../../reusecore/Blockquote/Blockquote-alt-style";
+
+<NewsWrapper>
+<p>
+[Salt Lake City, UT] [KubeCon + CloudNativeCon] - November 14th, 2024 – <Link to="/">Layer5</Link>, the open source company behind the popular <a href="https://meshery.io">Meshery</a> project, announces Kanvas, a new collaboration platform that is like Google Workspace, but designed for engineering teams.
+</p>
+
+<a href={KanvasScreenshot}><img src={KanvasScreenshot} alt="Layer5 Kanvas Designer" width="100%" className="block-display align-center" /></a>
+
+<p><a href="https://kanvas.new/">Kanvas</a> is a multi-modal collaboration suite built atop one of the Cloud Native Computing Foundation’s highest velocity open source projects: Meshery. Kanvas’s two modes, Designer and Operator, offer declarative and imperative DevOps workflows, respectively. Both modes provide a visual interface for creating and managing complex cloud native infrastructure, expediting collaborative problem-solving, brainstorming and innovation, engineer onboarding, and auto-documented infrastructure. Importantly, Kanvas helps teams avoid finger-pointing and the blame-game by allowing them to be on the same page - literally.</p>
+
+<BlockquoteAlt 
+  quote="Partnering on Dapr’s integration with Meshery has been eye-opening. Kanvas promotes collaboration in the design and discussion of cloud native applications, eliminating misunderstandings between teams. It is a game-changer for how we navigate the complexities of relationships between system components"
+  person="Mauricio Salatino"
+  title="Software Engineer at Diagrid and author of Platform Engineering on Kubernetes"
+  />
+
+<p>
+As an extensible, self-service engineering platform with hundreds of technology integrations, supporting multi-cloud and Kubernetes native infrastructure, Meshery is the ideal management platform upon which to build Kanvas’ novel collaboration experience. Meshery has thousands of pre-built components supporting Kubernetes and Cloud services and with over 2,000 contributors, Meshery is the 9th fastest growing CNCF (out of 200+ projects).
+</p>
+
+
+<Blockquote
+  quote="Internal developer platforms, like Meshery, are rising in popularity, because engineering teams remain siloed with disparate tooling, inconsistent workflow, lack of collaboration and shared process. A lack of collaboration plagues engineering teams with 83% of IT organizations implementing DevOps practices. 62% of organizations are stuck mid-DevOps evolution, teams tightly coupled and responsibilities diffused. Engineering teams desperately need to collaborate, but lack tooling specifically designed for cloud native infrastructure."
+  person="Lee Calcote"
+  title="Layer5 founder" 
+  />
+
+<p>
+Like Figma for engineers, Kanvas users can access Kanvas from any computer with an internet connection and a web browser.
+</p>
+
+#### Feature Highlights:
+<ul>
+  <li><strong>Infrastructure as Design</strong>: Intuitive drag-and-drop interface for designing and visualizing cloud native infrastructure and general architecture diagrams. Supports Kubernetes and multi-cloud services.</li>
+  <li><strong>Self-Service DevOps</strong>: Empowers engineers to create, share, and manage their own environments on demand.</li>
+  <li><strong>Greenfields and Brownfield Infrastructure</strong>: Import existing cloud environments to visualize current infrastructure or create a new design from scratch.</li>
+  <li><strong>GitOps Integration</strong>: Pull request integration for infrastructure design reviews.</li>
+  <li><strong>Model-Driven</strong> characterization of both semantic and non-semantic infrastructure as design components.</li>
+  <li><strong>Policy-driven intelligent inference</strong> of infrastructure components and their relationships.</li>
+  <li><strong>Real-Time Collaboration</strong>: Work with others on your designs in real-time, making it easier to collaborate and share ideas, while all changes are saved automatically. </li>
+  <li><strong>Design Patterns</strong>: A catalog full of ready-made blueprints for common infrastructure and application architectures.</li>
+  <li><strong>Kanvas Spaces</strong>: provide a collaborative environment similar to Google Shared Drive, but specifically tailored for cloud-native infrastructure management.</li>
+  <li><strong>Design Reviews</strong>: Collaboratively review and provide feedback on designs and prototypes.</li>
+</ul>
+
+<div>
+<iframe width="100%" height="315" style="margin-right: 1.5rem;margin-left:1.5rem;" src="https://www.youtube.com/embed/4WcofErPTx4?si=UfouUV7mhADg3zkk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+<p style="font-style:italic;font-size:1rem;margin-left:1rem;">Birth of Kanvas from Meshery</p>
+</div>
+#### Kanvas caters to a wide range of users, including:
+<ul>
+  <li>Teams and engineering managers for brainstorming, diagramming, wireframing, and interviewing.</li>
+  <li>Platform engineers for underpinning self-service and developer empowerment.</li>
+  <li>Site reliability engineers for curating a catalog of design patterns as a center of excellence.</li>
+  <li>Operators for managing and visualizing infrastructure components.</li>
+  <li>Solution architects designing infrastructure across multiple cloud providers from a single canvas.</li>
+  <li>Developer advocates and educators for facilitating real-time exploration and asynchronous study of any cloud native technology.</li>
+  <li>Developers and product engineers for ease of understanding and design of their application infrastructure.</li>
+  <li>System integrators and consultants for a service provider-grade organization hierarchy, multi-tenant, white-labelable, highly extensible delivery platform.</li>
+</ul>
+
+<BlockquoteAlt 
+  quote="Layer5 Kanvas is revolutionizing our approach to infrastructure design. With its collaborative environment, we're seeing significant gains in efficiency and cost-effectiveness, streamlining our workflows and fostering a shared understanding between our customers and partners. Any team that needs a shared space to collaborate and visualize ideas can benefit from using Kanvas."
+  person="Yogi Porla"
+  title=" CTO of Deeplineage"
+  />
+
+<p>Kanvas Designer is available now in beta as a service or self-hosted solution. Kanvas Operator will be available early next year. Try dragging and dropping your Kubernetes manifest into <a href="https://kanvas.new">https://kanvas.new</a> today.</p>
+
+
+
+#### Resources
+<ul>
+<li>Kanvas application: <a href="https://kanvas.new">https://kanvas.new</a>.</li>
+<li>Design Catalog: <a href="https://cloud.layer5.io/catalog">https://cloud.layer5.io/catalog</a>.</li>
+<li>Kanvas website: <Link to="/cloud-native-management/kanvas">https://layer5.io/cloud-native-management/kanvas</Link>.</li>
+<li>Kanvas documentation: <a href="https://docs.layer5.io/kanvas/">https://docs.layer5.io/kanvas/</a>.</li>
+<li>Attend <a href="https://layer5.io/community/events/kubecon-cloudnativecon-na-salt-lake-city-utah-2024">KubeCon NA 2024 Session: Visualizing Kubernetes Resource Relationships with Meshery</a>.</li>
+</ul>
+
+##### About Layer5, Inc.
+<p style="font-size:1rem">
+Our open source and commercial products empower organizations to embrace the power of cloud native with confidence. Layer5's mission is to simplify the adoption and operation of cloud native infrastructure, enabling organizations to innovate faster and engineers to do so collaboratively. 
+Layer5’s award-winning open source community has over 10,000 members. For more information, visit <Link to="/">https://layer5.io</Link></p>
+
+##### About Kanvas
+<p style="font-size:1rem">
+Kanvas is a web-based collaboration tool that allows you to create, review, and operate highly-detailed  architecture diagrams of your cloud and cloud infrastructure using a drag-and-drop interface. Kanvas is popular with site reliability engineers, platform engineers, architects, operators, and developers as an enabler of productive, collaborative infrastructure management. Try Kanvas at <a href="https://kanvas.new">https://kanvas.new</a>.</p>
+
+
+</NewsWrapper>
\ No newline at end of file
diff --git a/src/collections/news/2024/2024-11-12-layer5-launches-kanvas-a-collaborative-platform-for-cloud-native-infrastructure/kanvas-icon-color.svg b/src/collections/news/2024/2024-11-12-layer5-launches-kanvas-a-collaborative-platform-for-cloud-native-infrastructure/kanvas-icon-color.svg
new file mode 100644
index 000000000000..80226d79285b
--- /dev/null
+++ b/src/collections/news/2024/2024-11-12-layer5-launches-kanvas-a-collaborative-platform-for-cloud-native-infrastructure/kanvas-icon-color.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #00b39f;
+      }
+
+      .cls-2 {
+        fill: #00d3a9;
+      }
+    </style>
+  </defs>
+  <polygon class="cls-2" points="261.82 30.1 261.82 228.75 433.99 129.07 261.82 30.1"/>
+  <polygon class="cls-2" points="261.82 270.3 261.82 469.9 435.56 370.56 261.82 270.3"/>
+  <polygon class="cls-1" points="237.03 227.38 237.03 31.77 66.97 129.25 237.03 227.38"/>
+  <polygon class="cls-1" points="237.03 468.98 237.03 271.74 66.56 370.43 237.03 468.98"/>
+  <polygon class="cls-1" points="447.37 348.75 447.37 149.97 275.4 249.52 447.37 348.75"/>
+  <polygon class="cls-2" points="52.63 149.59 52.63 349.85 225.87 249.56 52.63 149.59"/>
+</svg>
\ No newline at end of file
diff --git a/src/collections/news/2024/2024-11-12-layer5-launches-kanvas-a-collaborative-platform-for-cloud-native-infrastructure/kanvas-icon-white.svg b/src/collections/news/2024/2024-11-12-layer5-launches-kanvas-a-collaborative-platform-for-cloud-native-infrastructure/kanvas-icon-white.svg
new file mode 100644
index 000000000000..29c4be1f481b
--- /dev/null
+++ b/src/collections/news/2024/2024-11-12-layer5-launches-kanvas-a-collaborative-platform-for-cloud-native-infrastructure/kanvas-icon-white.svg
@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #fff;
+      }
+
+      .cls-2 {
+        opacity: .8;
+      }
+    </style>
+  </defs>
+  <polygon class="cls-1" points="261.82 30.1 261.82 228.75 433.99 129.07 261.82 30.1"/>
+  <polygon class="cls-1" points="261.82 270.3 261.82 469.9 435.56 370.56 261.82 270.3"/>
+  <g class="cls-2">
+    <polygon class="cls-1" points="237.03 227.38 237.03 31.77 66.97 129.25 237.03 227.38"/>
+  </g>
+  <g class="cls-2">
+    <polygon class="cls-1" points="237.03 468.98 237.03 271.74 66.56 370.43 237.03 468.98"/>
+  </g>
+  <g class="cls-2">
+    <polygon class="cls-1" points="447.37 348.75 447.37 149.97 275.4 249.52 447.37 348.75"/>
+  </g>
+  <polygon class="cls-1" points="52.63 149.59 52.63 349.85 225.87 249.56 52.63 149.59"/>
+</svg>
\ No newline at end of file
diff --git a/src/collections/news/2024/2024-11-12-layer5-launches-kanvas-a-collaborative-platform-for-cloud-native-infrastructure/layer5-kanvas-designer.png b/src/collections/news/2024/2024-11-12-layer5-launches-kanvas-a-collaborative-platform-for-cloud-native-infrastructure/layer5-kanvas-designer.png
new file mode 100644
index 000000000000..5f003679a602
Binary files /dev/null and b/src/collections/news/2024/2024-11-12-layer5-launches-kanvas-a-collaborative-platform-for-cloud-native-infrastructure/layer5-kanvas-designer.png differ
diff --git a/src/collections/news/2024/2024-11-12-layer5-launches-kanvas-a-collaborative-platform-for-cloud-native-infrastructure/layer5-kanvas-designer.webp b/src/collections/news/2024/2024-11-12-layer5-launches-kanvas-a-collaborative-platform-for-cloud-native-infrastructure/layer5-kanvas-designer.webp
new file mode 100644
index 000000000000..0bc9841f6f11
Binary files /dev/null and b/src/collections/news/2024/2024-11-12-layer5-launches-kanvas-a-collaborative-platform-for-cloud-native-infrastructure/layer5-kanvas-designer.webp differ
diff --git a/src/collections/news/News.style.js b/src/collections/news/News.style.js
index da6604f3540a..945d178711c9 100644
--- a/src/collections/news/News.style.js
+++ b/src/collections/news/News.style.js
@@ -19,6 +19,9 @@ export const NewsWrapper = styled.div`
     .block-display {
         display: block;
     }
+    .align-center {
+        text-align: center;
+    }
 
 
 @media screen and (max-width: 768px) {
diff --git a/src/collections/service-mesh-books/service-mesh-patterns/index.mdx b/src/collections/service-mesh-books/service-mesh-patterns/index.mdx
index e67e23191878..306cc41ebae8 100644
--- a/src/collections/service-mesh-books/service-mesh-patterns/index.mdx
+++ b/src/collections/service-mesh-books/service-mesh-patterns/index.mdx
@@ -14,28 +14,17 @@ redirect_from:
 import { BookWrapper } from "../Book.style.js";
 import Table from "../../../components/service-mesh-patterns-Table/Table.js";
 import { Link } from "gatsby";
-import Button from "../../../reusecore/Button";
 import service_mesh_pattern_book from "./service-mesh-patterns.webp";
 
 <BookWrapper>
 
 <div className="book">
-  <a href="https://www.oreilly.com/library/view/service-mesh-patterns/9781492086444/">
     <img
       className="card"
       width="300px"
       src={service_mesh_pattern_book}
       align="center"
     />
-  </a>
-  <div>&nbsp;</div>
-  <Button
-    $primary
-    className="banner-btn one pa-8"
-    title="Get the Book"
-    $url="https://www.oreilly.com/library/view/service-mesh-patterns/9781492086444/"
-    $external={true}
-  />
 </div>
 
 <p></p>
diff --git a/src/components/Learn-Components/what-await-section/index.js b/src/components/Learn-Components/what-await-section/index.js
index 016c12fd22ab..8ed297465a53 100644
--- a/src/components/Learn-Components/what-await-section/index.js
+++ b/src/components/Learn-Components/what-await-section/index.js
@@ -15,7 +15,7 @@ const WhatAwaitsSection = () => {
             <p>Cloud Native patterns help you get the most out of any cloud native. Each pattern can be used as a template and is customizable.
             </p>
             <p style={{ "justifyContent": "center", "textAlign": "center" }}>
-              <Button $primary title="Visit Cloud Native Patterns catalog" $url="https://meshery.layer5.io/catalog" $external={true} style={{ "margin": "1rem" }}/>
+              <Button $primary title="Visit Cloud Native Patterns catalog" $url="https://cloud.layer5.io/catalog" $external={true} style={{ "margin": "1rem" }}/>
               <Button $secondary title="Visit Service Mesh Patterns website" $url="https://service-mesh-patterns.github.io/service-mesh-patterns/" $external={true} />
             </p>
           </div>
diff --git a/src/components/PlanCard/collapsible-details.js b/src/components/PlanCard/collapsible-details.js
index e1cf0d9e15e9..5deedb574edb 100644
--- a/src/components/PlanCard/collapsible-details.js
+++ b/src/components/PlanCard/collapsible-details.js
@@ -4,77 +4,97 @@ import { MdExpandMore } from "@react-icons/all-files/md/MdExpandMore";
 import { RiArrowRightSLine } from "@react-icons/all-files/ri/RiArrowRightSLine";
 
 const FeatureDetailsWrapper = styled.div`
-display: inline;
-cursor: pointer;
-.open{
+  display: inline;
+  cursor: pointer;
+
+  .open {
     margin: 0rem;
     list-style: none;
-    height:auto !important;
-    opacity:1 !important;
-    margin-bottom: 2rem;
-    transition:all .4s !important;
-   }
-   .toggle-icon{
-    width: 1.2rem; 
-    height: 1.2rem; 
-    fill: ${props => props.theme.primaryColor};
+    height: auto !important;
+    opacity: 1 !important;
+    margin-bottom: 1rem;
+    transition: all 0.4s !important;
+  }
+
+  .toggle-icon {
+    width: 1.2rem;
+    height: 1.2rem;
+    fill: ${(props) => props.theme.primaryColor};
     transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
   }
-p{
+
+  p {
     font-size: 0.9rem;
-    color: ${props => props.theme.greyC1C1C1ToGreyB3B3B3}; 
-    transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); 
-}
-.toggle-btn{
-    display:inline-block;
+    margin: 0.5rem;
+    color: ${(props) => props.theme.greyC1C1C1ToGreyB3B3B3};
+    transition: 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
+  }
+
+  .toggle-btn {
+    display: inline-block;
     float: left;
-    vertical-align: middle;;
-   }
-   .closed{
-    opacity:1;
-    height:0;
-    transition:none;
-    visibility:hidden;
-   }
-   .open{
-    visibility:visible;
-   }
- h5{
-   display: inline-block;
-   vertical-align: middle;
- }
+    vertical-align: middle;
+  }
+
+  .closed {
+    opacity: 1;
+    height: 0;
+    transition: none;
+    visibility: hidden;
+  }
+
+  .open {
+    visibility: visible;
+  }
+
+  h5 {
+    display: inline-block;
+    vertical-align: middle;
+  }
+
+  .beta-tag {
+    display: inline-block;
+    background-color: #ffd700;
+    color: #000000;
+    font-size: 0.7rem;
+    padding: 2px 6px;
+    border-radius: 4px;
+    margin-left: 8px;
+    font-weight: bold;
+    vertical-align: middle;
+  }
 `;
 
-const FeatureDetails = (props) => {
+const FeatureDetails = ({ category, description, tier }) => {
   const [expand, setExpand] = React.useState(false);
 
+  const BetaTag = () => <span className="beta-tag">Coming Soon</span>;
+
   return (
     <FeatureDetailsWrapper>
-      <div onClick={function () {
-        setExpand(!expand);
-      }}>
-        {props.description ?
+      <div onClick={() => setExpand(!expand)}>
+        {description && (
           <div className="toggle-btn">
             {expand ? (
               <MdExpandMore
                 className="toggle-icon"
-                onClick={function () {
-                  setExpand(!expand);
-                }}
+                onClick={() => setExpand(!expand)}
               />
             ) : (
               <RiArrowRightSLine
                 className="toggle-icon"
-                onClick={function () {
-                  setExpand(!expand);
-                }}
+                onClick={() => setExpand(!expand)}
               />
             )}
-          </div> : ""}
-        <h5>{props.category}</h5>
+          </div>
+        )}
+        <h5>
+          {category}
+          {tier === "Team-Beta" && <BetaTag />}
+        </h5>
         <div className="details">
-          <p className={`closed ${expand ? "open" : ""}`}>
-            {props.description}
+          <p className={`closed ${expand ? "open" : ""}`}
+            dangerouslySetInnerHTML={{ __html: description }}>
           </p>
         </div>
       </div>
diff --git a/src/components/PlanCard/index.js b/src/components/PlanCard/index.js
index 29726d2edd78..b3b8cca35533 100644
--- a/src/components/PlanCard/index.js
+++ b/src/components/PlanCard/index.js
@@ -4,38 +4,72 @@ import { Col, Row, Container } from "../../reusecore/Layout";
 import PlanCardWrapper from "./planCard.style";
 import FeatureDetails from "./collapsible-details";
 
-const PlanCard = (props) => {
-  return (
+const PlanCard = ({ planData , isYearly }) => {
+  if (!planData || !Array.isArray(planData) || planData.length === 0) {
+    return <div>No plan data available</div>;
+  }
 
+  return (
     <PlanCardWrapper>
       <Container>
-        <Row $Hcenter={true}>
-          {props.planData.map((x) => (
-            <Col lg={4} md={6} key={x.tier}>
-              <div
-                className={`${x.featured ? "featured" : ""} pricing-table`}
-              >
-                {x.featured ? (
-                  <div className="pricing-label">Free Forever</div>
-                ) : (
-                  ""
+        <Row $Hcenter>
+          {planData.map((x) => (
+            // <Col $xl={4} $lg={2} $md={1} $sm={1} key={x.tier}>
+            <Col key={x.tier}>
+              <div className={`${x.featured ? "featured" : ""} pricing-table`}>
+
+                {x.tier === "Personal" ? <div className="pricing-label">Free Forever</div> : null}
+
+                {x.tier === "Team Designer" ? <div className="featured-label">Most Popular</div> : null}
+
+                {x.pricing_coming_soon && (
+                  <div className="pricing_coming_soon">
+                    {x.pricing_coming_soon}
+                  </div>
                 )}
-                <div className="pricing_coming_soon">
-                  {x.pricing_coming_soon}
-                </div>
+
                 <h2>{x.tier}</h2>
                 <h5 className="byline">{x.byline}</h5>
-                <div className="pricing-features">
-                  {x.summary.map((t) => (
-                    <div className="feature" key={t.id}>
-                      <FeatureDetails
-                        category={t.category}
-                        description={t.description}
-                      />
-                    </div>
-                  ))}
+
+                <div className="price-container">
+                  {isYearly ? (
+                    x.yearlyprice !== undefined ? (
+                      <div className="price">
+                        <span className="price-amount"><sup>$</sup>
+                          {x.yearlyprice === 0
+                            ? "0"
+                            : x.yearlyprice.toFixed(0)}
+                        </span>
+                        <span className="currency">USD</span>
+                        <span className="price-per">per user/year</span>
+                      </div>
+                    ) : (
+                      <div className="pricing_coming_soon">
+                        {x.pricing_coming_soon}
+                      </div>
+                    )
+                  ) : (
+                    x.monthlyprice !== undefined ? (
+                      <div className="price">
+                        <span className="price-amount"><sup>$</sup>
+                          {x.monthlyprice === 0
+                            ? "0"
+                            : x.monthlyprice.toFixed(0)}
+                        </span>
+                        <span className="currency">USD</span>
+                        <span className="price-per">per user/month</span>
+                      </div>
+                    ) : (
+                      <div className="pricing_coming_soon">
+                        {x.pricing_coming_soon}
+                      </div>
+                    )
+                  )}
                 </div>
+
+
                 <Button
+                  // disabled={x.tier === "Team Operator"}
                   $primary
                   className={
                     x.button[0] === "Coming Soon"
@@ -46,14 +80,29 @@ const PlanCard = (props) => {
                 >
                   {x.button[0]}
                 </Button>
+
+                <h6>{x.byline2}</h6>
+
+                <div className="pricing-features">
+                  {x.summary &&
+                    x.summary.map((t) => (
+                      <div className="feature" key={t.id}>
+                        <FeatureDetails
+                          category={t.category}
+                          description={t.description}
+                          tier={t.tier}
+                        />
+                      </div>
+                    ))}
+                </div>
+
               </div>
             </Col>
           ))}
-
         </Row>
       </Container>
     </PlanCardWrapper>
   );
 };
 
-export default PlanCard;
\ No newline at end of file
+export default PlanCard;
diff --git a/src/components/PlanCard/planCard.style.js b/src/components/PlanCard/planCard.style.js
index ec2268195750..ce29e37d37da 100644
--- a/src/components/PlanCard/planCard.style.js
+++ b/src/components/PlanCard/planCard.style.js
@@ -1,157 +1,216 @@
 import styled from "styled-components";
 
 const PlanCardWrapper = styled.section`
-
-  
-   .pricing-table {
+  margin: 0 auto;
+
+  .pricing-card {
+    display: flex;
+    text-align: left; /* Align all content to the left */
+    padding: 20px;
+    width: 100%;
+    border: 1px solid #ccc;
+    border-radius: 10px;
+    background-color: #f9f9f9;
+    gap: 22rem;
+  }
+  .price-container {  
+    transform: scale(1.15);
+    align-items: baseline;
+    .price {
+      display: flex;
+      align-items: baseline;
+      font-weight: bold;
+      color: ${(props) => props.theme.whiteToBlack}; 
+      white-space: nowrap; /* Prevent line breaks in price text */
+      justify-content: center;
+    }
+    .currency-symbol {
+      font-size: 1rem;
+      align-self: flex-start;
+      font-weight: thin;
+      color: ${(props) => props.theme.primaryColor}; 
+    }
+    .price-amount {
+      font-size: 3rem; 
+      color: ${(props) => props.theme.primaryColor};
+      > sup {
+        font-weight: 200;
+        font-size: 1rem;
+      }
+    }
+    .currency {
+      font-size: .65rem;
+      font-weight: normal;
+      color: ${(props) => props.theme.primaryColor}; 
+      align-content: baseline;
+    }
+    .price-per {
+      margin-left: .25rem;
+      align-self: center;
+      font-weight: 200;
+      font-size: .75rem;
+      letter-spacing: -.025rem;
+      color: ${(props) => props.theme.primaryColor}; 
+    }
+  }
+  .pricing-button {
+    padding: 10px 20px;
+    font-size: 1em;
+    border: none;
+    border-radius: 5px;
+    background-color: #007bff;
+    color: white;
+    cursor: pointer;
+    &:hover {background-color: #0056b3;}
+  }
+  .pricing-table {
+    width: 100%;
+    min-width: 300px;
     background-color: ${(props) => props.theme.grey212121ToWhite};
-    border-top: 3px solid #00b39f;
     box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.1);
-    padding: 2rem;
+    padding: 2rem 1rem;
     border-radius: 4px;
     transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
-
-    @media (max-width: 992px) {
-      margin: 1.5rem 1rem;
+    margin-bottom: 2rem;
+    flex: 1 1 calc(25% - 20px); /* 4 columns */
+    &:hover {
+      box-shadow: 0px 1px 10px -4px rgba(0, 0, 0, 0.15);
     }
-  }
-
-  .featured {
-    transform: scale(1.05);
-    background-color: ${(props) => props.theme.grey212121ToWhite};
-    box-shadow: 0px 2px 12px 0px rgb(0, 179, 158, 0.7);
-    transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
-  }
-  .pricing-table:hover {
-    box-shadow: 0px 1px 10px -4px rgba(0, 0, 0, 0.15);
-  }
-  .featured:hover {
-    box-shadow: 0px 2px 16px rgb(0, 179, 158, 0.9);
-  }
-
-  .pricing-table {
     .pricing-label {
-      border-radius: 2px;
-      background-color: rgb(235, 192, 23);
-      padding: 0.25rem 0.5rem;
-      display: block;
-      position: relative;
-      float: right;
-      justify-content: flex-end;
-      align-content: flex-end;
+      border-radius: 0px 4px;
+      background: ${(props) => props.theme.grey0E0E0EToGreen3C494F};
+      padding: 0.125rem 0.5rem;
+      position: absolute;
       width: fit-content;
       font-size: 0.75rem;
       font-weight: 500;
-      margin-top: -1rem;
-      margin-right: -1rem;
-      margin-bottom: 1rem;
+      top: 0rem;
+      right: .9rem;
+      color: #eee;
+      transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
     }
-
-    h2 {
+    .featured-label {
+      border-radius: 0px 4px;
+      background: ${(props) => props.theme.saffronColor};
+      padding: 0.125rem 0.5rem;
+      position: absolute;
+      width: fit-content;
+      font-size: 0.75rem;
+      font-weight: 500;
+      top: 0rem;
+      right: .9rem;
+      color: #111;
+      transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
+    }
+    h6 {
+      font-size: .9rem;
       margin-top: 1rem;
+      color: ${(props) => props.theme.tealBlue};
+    }
+    h2 {
       margin-bottom: 1rem;
-
       color: ${(props) => props.theme.greyDCDCDCToGrey3B3B3B};
-      font-size: 24px;
+      font-size: 1.5rem;
       font-weight: 600;
-      margin-left: 1rem;
-      transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
-    }
-
-    .byline {
-      color: ${(props) => props.theme.greyC8C8C8ToGreen3C494F};
-      font-size: 16px;
-      font-weight: 400;
+      text-align: center;
       transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
     }
-
-    .pricing-features {
-      margin-top: 2rem;
-    }
-
-    .pricing-features .feature {
-      margin: 0.75rem 0rem;
+  }
+  .featured {
+    /* transform: scale(1.05); */
+    /* border: .5rem solid ${(props) => props.theme.whiteToBlack}; */
+    background-color: ${(props) => props.theme.grey212121ToWhite};
+    box-shadow: 0px 2px 12px 0px rgb(0, 179, 159, 0.7);
+    transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
+    &:hover { box-shadow: 0px 2px 16px rgb(235, 192, 23, 0.9); }
+  }
+  .byline {
+    /* color: ${(props) => props.theme.greyC8C8C8ToGreen3C494F}; */
+    color: ${(props) => props.theme.blueE0FFFCToBlue477E96};
+    margin-top: -.5rem;
+    margin-bottom: 2.5rem;
+    font-size: .9rem;
+    font-weight: 400;
+    transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
+    justify-content: center;
+    text-align: center;
+  }
+  .pricing-features {
+    margin-top: 2rem;
+    line-height: 1rem;
+    .feature {
+      margin: 0rem 0rem;
+      line-height: 1rem;
+      font-weight: bold;
       .details {
-        display: flex;
-        margin: 0.5rem 0;
+        display: block;
+        height: auto;
+        p {
+          color: ${(props) => props.theme.greyD3D7DBToGreen1E2117};
+          background-color: ${(props) => props.theme.grey1D1817ToGreyE6E6E6};
+          padding: 0.5rem;
+          line-height: 1rem;
+          margin-top: 0.5rem;
+          font-size: 0.85rem;
+          border-radius: 0.25rem;
+        }
       }
       h5 {
-        color: ${(props) => props.theme.greyAAAAAAToGrey7A848E};
+        color: ${(props) => props.theme.greyD3D7DBToGreen1E2117};
         display: block;
-        font-size: 16px;
-        font-weight: 400;
-        /* vertical-align: text-top; */
+        font-size: 1rem;
+        font-weight: bold;
         transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
       }
-      .check {
-        padding-right: 0.2rem;
-        vertical-align: middle;
-        color: ${(props) => props.theme.secondaryColor};
+        .check {
+          padding-right: 0.2rem;
+          vertical-align: middle;
+          color: ${(props) => props.theme.secondaryColor};
+        }
       }
-    }
-
-    .price-tag {
-      margin-top: 2rem;
-      text-align: center;
-      font-weight: 500;
-    }
-
-    .price-tag .symbol {
+  }
+  .price-tag {
+    margin-top: 2rem;
+    text-align: center;
+    font-weight: 500;
+    color: ${(props) => props.theme.secondaryColor};
+    &.symbol {
       font-size: 24px;
     }
-
-    .price-tag .amount {
+    &.amount {
       letter-spacing: -2px;
       font-size: 3rem;
-      @media screen and (max-width: 992px) and (min-width: 768px) {
-        font-size: 1.5rem;
-      }
-      @media screen and (max-width: 400px) {
-        font-size: 2rem;
-      }
     }
-
-    .price-tag .free {
+    &.free {
       font-size: 40px;
     }
-
-    .price-tag .after {
-      color: #3b3b3b;
-      font-weight: 500;
-    }
-
-    .price-button-disabled,
-    .price-button-link {
-      color: #fff;
-      display: block;
-      margin: 2rem auto 0;
-      padding: 1rem 2rem;
-      width: 100%;
-      text-align: center;
-      font-weight: 500;
-      transition: 0.3s;
-      background: ${(props) => props.theme.secondaryColor};
-    }
-
-    .price-button-disabled {
-      background: rgb(0, 179, 158, 0.6);
+    &.after {
+    color: #3b3b3b;
+    font-weight: 500;
     }
-    .price-button-disabled:hover {
-      cursor: default;
+  }
+.price-button-disabled {
+    width: 100%;
+    background: rgb(0, 179, 158, 0.6);
+    display: block;
+    margin: 2rem auto 0;
+    transition: 0.3s;
+    &:hover {
+      cursor: not-allowed;
       box-shadow: none;
     }
-
-    .pricing-label {
-      background: rgb(235, 192, 23);
-      color: #000;
-      transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
-    }
-
-    .price-tag {
-      color: ${(props) => props.theme.secondaryColor};
-    }
   }
-
+.price-button-link {
+  color: #fff;
+  display: block;
+  margin: 2rem auto 0;
+  padding: 1rem 2rem;
+  width: 100%;
+  text-align: center;
+  font-weight: 500;
+  transition: 0.3s;
+  background: ${(props) => props.theme.secondaryColor};
+}
 `;
 
 export default PlanCardWrapper;
\ No newline at end of file
diff --git a/src/components/Related-Posts/index.js b/src/components/Related-Posts/index.js
index 95e09e8fd8ca..040e38a34c98 100644
--- a/src/components/Related-Posts/index.js
+++ b/src/components/Related-Posts/index.js
@@ -1,3 +1,5 @@
+import "slick-carousel/slick/slick.css";
+import "slick-carousel/slick/slick-theme.css";
 import React from "react";
 import { Link } from "gatsby";
 import { IoIosArrowRoundForward } from "@react-icons/all-files/io/IoIosArrowRoundForward";
@@ -5,8 +7,6 @@ import Card from "../Card";
 import RelatedPostsWrapper from "./relatedPosts.style";
 import { Col } from "../../reusecore/Layout";
 import Slider from "react-slick";
-import "slick-carousel/slick/slick.css";
-import "slick-carousel/slick/slick-theme.css";
 import useHasMounted from "../../utils/useHasMounted";
 
 const RelatedPosts = props => {
diff --git a/src/components/Related-Resources/index.js b/src/components/Related-Resources/index.js
index 2f717aa5c847..8739581a4d4b 100644
--- a/src/components/Related-Resources/index.js
+++ b/src/components/Related-Resources/index.js
@@ -1,3 +1,5 @@
+import "slick-carousel/slick/slick.css";
+import "slick-carousel/slick/slick-theme.css";
 import React from "react";
 import { Link } from "gatsby";
 import { IoIosArrowRoundForward } from "@react-icons/all-files/io/IoIosArrowRoundForward";
@@ -5,8 +7,6 @@ import Card from "../Card";
 import RelatedResourcesWrapper from "./relatedResources.style";
 import { Col } from "../../reusecore/Layout";
 import Slider from "react-slick";
-import "slick-carousel/slick/slick.css";
-import "slick-carousel/slick/slick-theme.css";
 import useHasMounted from "../../utils/useHasMounted";
 
 const RelatedResources = props => {
diff --git a/src/components/SistentNavigation/content.js b/src/components/SistentNavigation/content.js
index 77069a489955..894618748416 100644
--- a/src/components/SistentNavigation/content.js
+++ b/src/components/SistentNavigation/content.js
@@ -103,4 +103,19 @@ export const content = [
     link: "/projects/sistent/components/button-group/code",
     text: "Button Group",
   },
+  {
+    id: 27,
+    link: "/projects/sistent/components/tooltip",
+    text: "Tooltip",
+  },
+  {
+    id: 25,
+    link: "/projects/sistent/components/tooltip/guidance",
+    text: "Tooltip",
+  },
+  {
+    id: 26,
+    link: "/projects/sistent/components/tooltip/code",
+    text: "Tooltip",
+  },
 ];
diff --git a/src/components/SistentNavigation/index.js b/src/components/SistentNavigation/index.js
index 8ee22aa50654..e5e1eb54dcad 100644
--- a/src/components/SistentNavigation/index.js
+++ b/src/components/SistentNavigation/index.js
@@ -3,6 +3,7 @@ import { HiOutlineChevronLeft } from "@react-icons/all-files/hi/HiOutlineChevron
 import { Link } from "gatsby";
 import { IoMdClose } from "@react-icons/all-files/io/IoMdClose";
 import { IoIosArrowDropdownCircle } from "@react-icons/all-files/io/IoIosArrowDropdownCircle";
+import { componentsData } from "../../sections/Projects/Sistent/components/content";
 
 import TOCWrapper from "./toc.style";
 import { IoIosArrowDown } from "@react-icons/all-files/io/IoIosArrowDown";
@@ -16,6 +17,9 @@ const TOC = () => {
   const [expandIdenity, setExpandIdentity] = useState(
     location.pathname.includes("/identity")
   );
+  const [expandComponent, setExpandComponent] = useState(
+    location.pathname.includes("/components")
+  );
 
   return (
     <TOCWrapper>
@@ -114,13 +118,36 @@ const TOC = () => {
             </div>
           </li>
           <li>
-            <Link
-              to="/projects/sistent/components"
-              activeClassName="active"
-              className="toc-sub-heading toc-sub-inline"
-            >
-              Components
-            </Link>
+            <div>
+              <li
+                className="toc-sub-heading components"
+                onClick={() => setExpandComponent((prev) => !prev)}
+              >
+                Components
+                {expandComponent ? <IoIosArrowUp /> : <IoIosArrowDown />}
+              </li>
+              {expandComponent && (
+                <div className="components-sublinks">
+                  <li>
+                    {componentsData.map((component) => (
+                      <li key={component.id}>
+                        <Link
+                          to={component.url}
+                          className={`toc-sub-heading toc-sub-inline components-item ${
+                            location.pathname.includes(component.url)
+                              ? "active"
+                              : ""
+                          }`}
+                          activeClassName="active"
+                        >
+                          {component.name}
+                        </Link>
+                      </li>
+                    ))}
+                  </li>
+                </div>
+              )}
+            </div>
           </li>
         </ul>
       </div>
diff --git a/src/components/SistentNavigation/toc.style.js b/src/components/SistentNavigation/toc.style.js
index e2698f350cea..b3763fa1ee6d 100644
--- a/src/components/SistentNavigation/toc.style.js
+++ b/src/components/SistentNavigation/toc.style.js
@@ -125,7 +125,7 @@ const TOCWrapper = styled.div`
     background-color: transparent;
   }
 
-  .identity {
+  .identity, .components {
     display: flex;
     width: 100%;
     justify-content: space-between;
@@ -138,10 +138,10 @@ const TOCWrapper = styled.div`
     }
   }
 
-  .identity-sublinks {
+  .identity-sublinks, .components-sublinks {
     padding-left: 0.56rem;
 
-    .identity-item {
+    .identity-item, .components-item {
       font-size: 1.05rem;
       margin-top: 0.45rem;
     }
diff --git a/src/pages/projects/sistent/components/button-group/code.js b/src/pages/projects/sistent/components/button-group/code.js
deleted file mode 100644
index dff80d0676aa..000000000000
--- a/src/pages/projects/sistent/components/button-group/code.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import React from "react";
-import ButtonGroupCode from "../../../../../sections/Projects/Sistent/components/button-group/code";
-
-const ButtonGroupCodePage = () => {
-  return <ButtonGroupCode />;
-};
-
-export default ButtonGroupCodePage;
diff --git a/src/pages/projects/sistent/components/button-group/guidance.js b/src/pages/projects/sistent/components/button-group/guidance.js
deleted file mode 100644
index c36d2d6d33f6..000000000000
--- a/src/pages/projects/sistent/components/button-group/guidance.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import React from "react";
-import ButtonGroupGuidance from "../../../../../sections/Projects/Sistent/components/button-group/guidance";
-
-const ButtonGuidancePage = () => {
-  return <ButtonGroupGuidance />;
-};
-
-export default ButtonGuidancePage;
diff --git a/src/pages/projects/sistent/components/button-group/index.js b/src/pages/projects/sistent/components/button-group/index.js
deleted file mode 100644
index af543fb3279c..000000000000
--- a/src/pages/projects/sistent/components/button-group/index.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import React from "react";
-import SistentButtonGroup from "../../../../../sections/Projects/Sistent/components/button-group";
-
-const SistentButtonGroupPage = () => {
-  return <SistentButtonGroup />;
-};
-
-export default SistentButtonGroupPage;
diff --git a/src/pages/projects/sistent/components/button/code.js b/src/pages/projects/sistent/components/button/code.js
deleted file mode 100644
index 87944a938565..000000000000
--- a/src/pages/projects/sistent/components/button/code.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import React from "react";
-import { ButtonCode } from "../../../../../sections/Projects/Sistent/components/button/code";
-
-const ButtonCodePage = () => {
-  return <ButtonCode />;
-};
-
-export default ButtonCodePage;
diff --git a/src/pages/projects/sistent/components/button/guidance.js b/src/pages/projects/sistent/components/button/guidance.js
deleted file mode 100644
index a155ae7ec5dc..000000000000
--- a/src/pages/projects/sistent/components/button/guidance.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import React from "react";
-import { ButtonGuidance } from "../../../../../sections/Projects/Sistent/components/button/guidance";
-
-const ButtonGuidancePage = () => {
-  return <ButtonGuidance />;
-};
-
-export default ButtonGuidancePage;
diff --git a/src/pages/projects/sistent/components/button/index.js b/src/pages/projects/sistent/components/button/index.js
deleted file mode 100644
index 3e56948174d2..000000000000
--- a/src/pages/projects/sistent/components/button/index.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import React from "react";
-import SistentButton from "../../../../../sections/Projects/Sistent/components/button";
-
-const SistentButtonPage = () => {
-  return <SistentButton />;
-};
-
-export default SistentButtonPage;
diff --git a/src/pages/projects/sistent/components/container/code.js b/src/pages/projects/sistent/components/container/code.js
deleted file mode 100644
index ee5f12f95992..000000000000
--- a/src/pages/projects/sistent/components/container/code.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import React from "react";
-import { ContainerCode } from "../../../../../sections/Projects/Sistent/components/container/code";
-
-const ContainerCodePage = () => {
-  return <ContainerCode />;
-};
-
-export default ContainerCodePage;
diff --git a/src/pages/projects/sistent/components/container/guidance.js b/src/pages/projects/sistent/components/container/guidance.js
deleted file mode 100644
index 763ec456f972..000000000000
--- a/src/pages/projects/sistent/components/container/guidance.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import React from "react";
-import { ContainerGuidancePage } from "../../../../../sections/Projects/Sistent/components/container/guidance";
-
-const LinkGuidance = () => {
-  return <ContainerGuidancePage />;
-};
-
-export default LinkGuidance;
diff --git a/src/pages/projects/sistent/components/container/index.js b/src/pages/projects/sistent/components/container/index.js
deleted file mode 100644
index a7bcf30afd1f..000000000000
--- a/src/pages/projects/sistent/components/container/index.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import React from "react";
-import SistentContainer from "../../../../../sections/Projects/Sistent/components/container/index";
-
-const SistentContainerPage = () => {
-  return <SistentContainer />;
-};
-
-export default SistentContainerPage;
diff --git a/src/pages/projects/sistent/components/link/code.js b/src/pages/projects/sistent/components/link/code.js
deleted file mode 100644
index 06eae83ec9a3..000000000000
--- a/src/pages/projects/sistent/components/link/code.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import React from "react";
-import { LinkCode } from "../../../../../sections/Projects/Sistent/components/link/code";
-
-const LinkCodePage = () => {
-  return <LinkCode />;
-};
-
-export default LinkCodePage;
\ No newline at end of file
diff --git a/src/pages/projects/sistent/components/link/guidance.js b/src/pages/projects/sistent/components/link/guidance.js
deleted file mode 100644
index b9efe9988519..000000000000
--- a/src/pages/projects/sistent/components/link/guidance.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import React from "react";
-import { LinkGuidancePage } from "../../../../../sections/Projects/Sistent/components/link/guidance";
-
-const LinkGuidance = () => {
-  return <LinkGuidancePage />;
-};
-
-export default LinkGuidance;
\ No newline at end of file
diff --git a/src/pages/projects/sistent/components/link/index.js b/src/pages/projects/sistent/components/link/index.js
deleted file mode 100644
index 2e2f14e7f001..000000000000
--- a/src/pages/projects/sistent/components/link/index.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import React from "react";
-import SistentLink from "../../../../../sections/Projects/Sistent/components/link/index";
-
-const SistentButtonPage = () => {
-  return <SistentLink />;
-};
-
-export default SistentButtonPage;
\ No newline at end of file
diff --git a/src/pages/projects/sistent/components/modal/code.js b/src/pages/projects/sistent/components/modal/code.js
deleted file mode 100644
index bd7e2753bd8f..000000000000
--- a/src/pages/projects/sistent/components/modal/code.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from "react";
-import ModalCode from "../../../../../sections/Projects/Sistent/components/modal/code";
-
-
-const ModalCodePage = () => {
-  return <ModalCode />;
-};
-
-export default ModalCodePage;
\ No newline at end of file
diff --git a/src/pages/projects/sistent/components/modal/guidance.js b/src/pages/projects/sistent/components/modal/guidance.js
deleted file mode 100644
index f57411c3ff93..000000000000
--- a/src/pages/projects/sistent/components/modal/guidance.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from "react";
-import ModalGuidance from "../../../../../sections/Projects/Sistent/components/modal/guidance";
-
-
-const ModalGuidancePage = () => {
-  return <ModalGuidance />;
-};
-
-export default ModalGuidancePage;
\ No newline at end of file
diff --git a/src/pages/projects/sistent/components/modal/index.js b/src/pages/projects/sistent/components/modal/index.js
deleted file mode 100644
index 4be1ef984ac0..000000000000
--- a/src/pages/projects/sistent/components/modal/index.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from "react";
-import SistentModal from "../../../../../sections/Projects/Sistent/components/modal";
-
-
-const SistentModalPage = () => {
-  return <SistentModal />;
-};
-
-export default SistentModalPage;
\ No newline at end of file
diff --git a/src/pages/projects/sistent/components/paper/code.js b/src/pages/projects/sistent/components/paper/code.js
deleted file mode 100644
index aebd216c36dc..000000000000
--- a/src/pages/projects/sistent/components/paper/code.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import React from "react";
-import PaperCode from "../../../../../sections/Projects/Sistent/components/paper/code";
-
-const PaperCodePage = () => {
-  return <PaperCode />;
-};
-
-export default PaperCodePage;
\ No newline at end of file
diff --git a/src/pages/projects/sistent/components/paper/guidance.js b/src/pages/projects/sistent/components/paper/guidance.js
deleted file mode 100644
index a0ae573e7c1d..000000000000
--- a/src/pages/projects/sistent/components/paper/guidance.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import React from "react";
-import PaperGuidance from "../../../../../sections/Projects/Sistent/components/paper/guidance";
-
-const PaperGuidancePage = () => {
-  return <PaperGuidance />;
-};
-
-export default PaperGuidancePage;
diff --git a/src/pages/projects/sistent/components/paper/index.js b/src/pages/projects/sistent/components/paper/index.js
deleted file mode 100644
index cac37c7bd2c0..000000000000
--- a/src/pages/projects/sistent/components/paper/index.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from "react";
-import SistentPaper from "../../../../../sections/Projects/Sistent/components/paper";
-
-
-const SistentPaperPage = () => {
-  return <SistentPaper />;
-};
-
-export default SistentPaperPage;
\ No newline at end of file
diff --git a/src/pages/projects/sistent/components/popper/code.js b/src/pages/projects/sistent/components/popper/code.js
deleted file mode 100644
index 9327a30755d0..000000000000
--- a/src/pages/projects/sistent/components/popper/code.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import React from "react";
-import { PooperCode } from "../../../../../sections/Projects/Sistent/components/popper/code";
-
-const PopperCodePage = () => {
-  return <PooperCode />;
-};
-
-export default PopperCodePage;
diff --git a/src/pages/projects/sistent/components/popper/guidance.js b/src/pages/projects/sistent/components/popper/guidance.js
deleted file mode 100644
index 70cde98837c0..000000000000
--- a/src/pages/projects/sistent/components/popper/guidance.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import React from "react";
-import { PopperGuidance } from "../../../../../sections/Projects/Sistent/components/popper/guidance";
-
-const PopperGuidancePage = () => {
-  return <PopperGuidance />;
-};
-
-export default PopperGuidancePage;
diff --git a/src/pages/projects/sistent/components/popper/index.js b/src/pages/projects/sistent/components/popper/index.js
deleted file mode 100644
index e75d22655e5f..000000000000
--- a/src/pages/projects/sistent/components/popper/index.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import React from "react";
-import { SistentPopper } from "../../../../../sections/Projects/Sistent/components/popper";
-
-const SistentPopperPage = () => {
-  return <SistentPopper />;
-};
-
-export default SistentPopperPage;
diff --git a/src/pages/projects/sistent/components/text-field/code.js b/src/pages/projects/sistent/components/text-field/code.js
deleted file mode 100644
index ec4056851b3e..000000000000
--- a/src/pages/projects/sistent/components/text-field/code.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import React from "react";
-import { TextFieldCode } from "../../../../../sections/Projects/Sistent/components/text-field/code";
-
-const TextFieldCodePage = () => {
-  return <TextFieldCode />;
-};
-
-export default TextFieldCodePage;
diff --git a/src/pages/projects/sistent/components/text-field/guidance.js b/src/pages/projects/sistent/components/text-field/guidance.js
deleted file mode 100644
index a18f55ebb86b..000000000000
--- a/src/pages/projects/sistent/components/text-field/guidance.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import React from "react";
-import { TextFieldGuidance } from "../../../../../sections/Projects/Sistent/components/text-field/guidance";
-
-const TextFieldGuidancePage = () => {
-  return <TextFieldGuidance />;
-};
-
-export default TextFieldGuidancePage;
diff --git a/src/pages/projects/sistent/components/text-field/index.js b/src/pages/projects/sistent/components/text-field/index.js
deleted file mode 100644
index 4031dd295f6d..000000000000
--- a/src/pages/projects/sistent/components/text-field/index.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import React from "react";
-import SistentTextField from "../../../../../sections/Projects/Sistent/components/text-field";
-
-const SistentTextFieldPage = () => {
-  return <SistentTextField />;
-};
-
-export default SistentTextFieldPage;
diff --git a/src/pages/projects/sistent/components/text-input/code.js b/src/pages/projects/sistent/components/text-input/code.js
deleted file mode 100644
index b5664ac8dbf6..000000000000
--- a/src/pages/projects/sistent/components/text-input/code.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import React from "react";
-import { TextInputCode } from "../../../../../sections/Projects/Sistent/components/text-input/code";
-
-const TextInputCodePage = () => {
-  return <TextInputCode />;
-};
-
-export default TextInputCodePage;
diff --git a/src/pages/projects/sistent/components/text-input/guidance.js b/src/pages/projects/sistent/components/text-input/guidance.js
deleted file mode 100644
index 9b99306618ee..000000000000
--- a/src/pages/projects/sistent/components/text-input/guidance.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import React from "react";
-import { TextInputGuidance } from "../../../../../sections/Projects/Sistent/components/text-input/guidance";
-
-const TextInputGuidancePage = () => {
-  return <TextInputGuidance />;
-};
-
-export default TextInputGuidancePage;
diff --git a/src/pages/projects/sistent/components/text-input/index.js b/src/pages/projects/sistent/components/text-input/index.js
deleted file mode 100644
index dfbb28313e00..000000000000
--- a/src/pages/projects/sistent/components/text-input/index.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import React from "react";
-import SistentTextInput from "../../../../../sections/Projects/Sistent/components/text-input";
-
-const SistentTextInputPage = () => {
-  return <SistentTextInput />;
-};
-
-export default SistentTextInputPage;
diff --git a/src/sections/Careers/Career-single/CareerSingle.style.js b/src/sections/Careers/Career-single/CareerSingle.style.js
index 974038ab538f..29a4a996548c 100644
--- a/src/sections/Careers/Career-single/CareerSingle.style.js
+++ b/src/sections/Careers/Career-single/CareerSingle.style.js
@@ -46,6 +46,10 @@ const CareerPageWrapper = styled.div`
         }
     }
 
+    .job-details-row {
+        flex-wrap: wrap;
+    }
+
     .layer5-logo {
         width: 15rem;
         margin: auto;
diff --git a/src/sections/Careers/Career-single/index.js b/src/sections/Careers/Career-single/index.js
index a44d059797fb..3eb6ad643ad3 100644
--- a/src/sections/Careers/Career-single/index.js
+++ b/src/sections/Careers/Career-single/index.js
@@ -20,7 +20,7 @@ const CareerSingle = ({ data }) => {
         <Container>
           <Row className="job-header-row">
             <Col $xs={12} $md={7} $xl={8} className="job-details">
-              <Row>
+              <Row className="job-details-row">
                 <Col $xs={6} className="job-details-col">
                   <h5> <FaPlay /> Start Date</h5>
                   <p>{frontmatter.start_date}</p>
diff --git a/src/sections/Cloud-Native-Catalog/new-catalog.js b/src/sections/Cloud-Native-Catalog/new-catalog.js
index 789042459978..08c3162cbb9a 100644
--- a/src/sections/Cloud-Native-Catalog/new-catalog.js
+++ b/src/sections/Cloud-Native-Catalog/new-catalog.js
@@ -52,7 +52,7 @@ const NewCatalog = () => {
           CREATE AND SHARE YOUR OWN BEST PRACTICES
         </p>
         <div className="new-catalog__button_section">
-          <Button $primary $external={true} title="Publish Your Own Design" $url="https://meshery.layer5.io/catalog" />
+          <Button $primary $external={true} title="Publish Your Own Design" $url="https://cloud.layer5.io/catalog" />
         </div>
       </Container>
     </NewCatalogWrapper>
diff --git a/src/sections/Community/Handbook/recognition.js b/src/sections/Community/Handbook/recognition.js
index fe372dc4580c..8b21be642c5d 100644
--- a/src/sections/Community/Handbook/recognition.js
+++ b/src/sections/Community/Handbook/recognition.js
@@ -235,7 +235,7 @@ const RecognitionPage = () => {
               Each badge is tied to specific activities. Here are some ways you can earn Layer5 Badges:
             </p>
             <p>
-              For users, badges for activities such as using our projects, talking about the projects, sharing your successes and what you like about them. For contributors, badges include activities such as submitting code, reviewing Pull Requests, assisting with documentation, participating in community events, and more. As you accumulate contributions in various areas, you'll begin to unlock badges that showcase your multifaceted involvement. These badges will be prominently displayed on your <a href="https://meshery.layer5.io">Layer5 Cloud</a> profile, visually representing your journey. Not only does this serve as a source of personal pride, but it also helps others in the community recognize your expertise and dedication.
+              For users, badges for activities such as using our projects, talking about the projects, sharing your successes and what you like about them. For contributors, badges include activities such as submitting code, reviewing Pull Requests, assisting with documentation, participating in community events, and more. As you accumulate contributions in various areas, you'll begin to unlock badges that showcase your multifaceted involvement. These badges will be prominently displayed on your <a href="https://cloud.layer5.io">Layer5 Cloud</a> profile, visually representing your journey. Not only does this serve as a source of personal pride, but it also helps others in the community recognize your expertise and dedication.
               <ul>
                 <li>
                   Activity Badges are the badges that are assigned when a user completes a task like sharing a design, creating a design for the first time, etc.
@@ -258,7 +258,7 @@ const RecognitionPage = () => {
             <ul>
               <li>
                 Visit your{" "}
-                <a href="https://meshery.layer5.io">Layer5 Cloud</a>{" "}
+                <a href="https://cloud.layer5.io">Layer5 Cloud</a>{" "}
                 Profile to see the badges
               </li>
               <li>Click on the badge, which you wanted to display</li>
diff --git a/src/sections/Community/Handbook/repo-data.js b/src/sections/Community/Handbook/repo-data.js
index a2a5c33fc1b5..91d6e7eb3d81 100644
--- a/src/sections/Community/Handbook/repo-data.js
+++ b/src/sections/Community/Handbook/repo-data.js
@@ -126,7 +126,7 @@ export const repo_data = [
       {
         project: "Layer5 Cloud",
         image: meshery,
-        site: "https://meshery.layer5.io/",
+        site: "https://cloud.layer5.io/",
         language: "React.js",
         maintainers_name: ["Yash Sharma"],
         link: ["https://layer5.io/community/members/yash-sharma"],
diff --git a/src/sections/Community/Member-single/index.js b/src/sections/Community/Member-single/index.js
index 31ab829daea4..7a7db30255cf 100644
--- a/src/sections/Community/Member-single/index.js
+++ b/src/sections/Community/Member-single/index.js
@@ -375,7 +375,7 @@ const MemberSingle = ({ frontmatter }) => {
                   )}
                   {layer5 && (
                     <li className="tooltip">
-                      <a href={`https://meshery.layer5.io/user/${layer5}`}>
+                      <a href={`https://cloud.layer5.io/user/${layer5}`}>
                         <img src={mesheryLogo} alt="meshery-icon"></img>
                         <span className="tooltiptext">Meshery</span>
                       </a>
diff --git a/src/sections/Community/slider.js b/src/sections/Community/slider.js
index 862ef223b348..859f323122b9 100644
--- a/src/sections/Community/slider.js
+++ b/src/sections/Community/slider.js
@@ -1,8 +1,8 @@
+import "slick-carousel/slick/slick.css";
+import "slick-carousel/slick/slick-theme.css";
 import React from "react";
 import Slider from "react-slick";
 import styled from "styled-components";
-import "slick-carousel/slick/slick.css";
-import "slick-carousel/slick/slick-theme.css";
 
 import { useStaticQuery, graphql } from "gatsby";
 
diff --git a/src/sections/Company/Brand/Brand-components/catalog.js b/src/sections/Company/Brand/Brand-components/catalog.js
index abad4d3ee11d..1a839917ad15 100644
--- a/src/sections/Company/Brand/Brand-components/catalog.js
+++ b/src/sections/Company/Brand/Brand-components/catalog.js
@@ -123,7 +123,9 @@ const Catalog = () => {
               white when using project colors as the background.
             </p>
           </Col>
-          <Row className="color-code-wrapper">
+          <Row style={{
+            flexWrap: "wrap"
+          }} className="color-code-wrapper">
             <ColorBox name="Keppel" R="0" G="179" B="159" colorCode="#00B39F" />
             <ColorBox
               name="Caribbean Green"
diff --git a/src/sections/Company/Brand/Brand-components/community.js b/src/sections/Company/Brand/Brand-components/community.js
index dea3e2b08c31..67106dae5dde 100644
--- a/src/sections/Company/Brand/Brand-components/community.js
+++ b/src/sections/Company/Brand/Brand-components/community.js
@@ -79,7 +79,9 @@ const CommunityBrand = () => {
             monochrome tonal when using a color background.
           </p>
         </Col>
-        <Row className="color-code-wrapper">
+        <Row style={{
+          flexWrap: "wrap"
+        }} className="color-code-wrapper">
           <ColorBox name="Keppel" R="0" G="179" B="159" colorCode="#00B39F" />
           <ColorBox name="Caribbean Green" R="0" G="211" B="169" colorCode="#00D3A9" />
           <ColorBox name="Casper" R="177" G="182" B="184" colorCode="#B1B6B8" />
diff --git a/src/sections/Company/Brand/Brand-components/layer5.js b/src/sections/Company/Brand/Brand-components/layer5.js
index 23ffc4730ba7..1d3562118057 100644
--- a/src/sections/Company/Brand/Brand-components/layer5.js
+++ b/src/sections/Company/Brand/Brand-components/layer5.js
@@ -85,7 +85,9 @@ const Layer5Brand = () => {
               when using project colors as the background.
             </p>
           </Col>
-          <Row className="color-code-wrapper">
+          <Row style={{
+            flexWrap: "wrap"
+          }} className="color-code-wrapper">
             <ColorBox name="Keppel" R="0" G="179" B="159" colorCode="#00B39F" />
             <ColorBox name="Caribbean Green" R="0" G="211" B="169" colorCode="#00D3A9" />
             <ColorBox name="Saffron" R="235" G="192" B="23" colorCode="#EBC017" />
diff --git a/src/sections/Company/Brand/Brand-components/meshery-operator.js b/src/sections/Company/Brand/Brand-components/meshery-operator.js
index 824e335d041f..7ebb4c05049f 100644
--- a/src/sections/Company/Brand/Brand-components/meshery-operator.js
+++ b/src/sections/Company/Brand/Brand-components/meshery-operator.js
@@ -78,7 +78,9 @@ const MesheryOperatorBrand = () => {
               monochrome tonal when using a color background.
             </p>
           </Col>
-          <Row className="color-code-wrapper">
+          <Row style={{
+            flexWrap: "wrap"
+          }} className="color-code-wrapper">
             <ColorBox name="Charcoal" R="60" G="73" B="79" colorCode="#3C494F" />
             <ColorBox name="Keppel" R="0" G="179" B="159" colorCode="#00B39F" />
             <ColorBox name="Caribbean Green" R="0" G="211" B="169" colorCode="#00D3A9" />
diff --git a/src/sections/Company/Brand/Brand-components/meshmark.js b/src/sections/Company/Brand/Brand-components/meshmark.js
index 02d3d4c4370d..65032c23f677 100644
--- a/src/sections/Company/Brand/Brand-components/meshmark.js
+++ b/src/sections/Company/Brand/Brand-components/meshmark.js
@@ -118,7 +118,9 @@ const MeshMarkBrand = () => {
               using project colors as the background.
             </p>
           </Col>
-          <Row className="color-code-wrapper">
+          <Row style={{
+            flexWrap: "wrap"
+          }} className="color-code-wrapper">
             <ColorBox name="Charcoal" R="60" G="73" B="79" colorCode="#3C494F" />
             <ColorBox name="Keppel" R="0" G="179" B="159" colorCode="#00B39F" />
             <ColorBox name="Caribbean Green" R="0" G="211" B="169" colorCode="#00D3A9" />
diff --git a/src/sections/Company/Brand/Brand-components/meshsync.js b/src/sections/Company/Brand/Brand-components/meshsync.js
index 54ebd4daa10f..a37f09e1f5f6 100644
--- a/src/sections/Company/Brand/Brand-components/meshsync.js
+++ b/src/sections/Company/Brand/Brand-components/meshsync.js
@@ -78,7 +78,9 @@ const MeshSyncBrand = () => {
               monochrome tonal when using a color background.
             </p>
           </Col>
-          <Row className="color-code-wrapper">
+          <Row style={{
+            flexWrap: "wrap"
+          }} className="color-code-wrapper">
             <ColorBox name="Keppel" R="0" G="179" B="159" colorCode="#00B39F" />
             <ColorBox name="Caribbean Green" R="0" G="211" B="169" colorCode="#00D3A9" />
             <ColorBox name="Casper" R="177" G="182" B="184" colorCode="#B1B6B8" />
diff --git a/src/sections/Company/Brand/Brand-components/servicemeshpatterns.js b/src/sections/Company/Brand/Brand-components/servicemeshpatterns.js
index 7e37c24b9587..a0b29c5fa7bb 100644
--- a/src/sections/Company/Brand/Brand-components/servicemeshpatterns.js
+++ b/src/sections/Company/Brand/Brand-components/servicemeshpatterns.js
@@ -78,7 +78,9 @@ const ServiceMeshPatterns = () => {
             using project colors as the background.
           </p>
         </Col>
-        <Row className="color-code-wrapper">
+        <Row style={{
+          flexWrap: "wrap"
+        }} className="color-code-wrapper">
           <ColorBox name="Charcoal" R="60" G="73" B="79" colorCode="#3C494F" />
           <ColorBox name="Keppel" R="0" G="179" B="159" colorCode="#00B39F" />
           <ColorBox name="Caribbean Green" R="0" G="211" B="169" colorCode="#00D3A9" />
diff --git a/src/sections/Company/Brand/Brand-components/smp.js b/src/sections/Company/Brand/Brand-components/smp.js
index eeac312a412c..2bc2ed53be15 100644
--- a/src/sections/Company/Brand/Brand-components/smp.js
+++ b/src/sections/Company/Brand/Brand-components/smp.js
@@ -104,7 +104,9 @@ const SMPBrand = () => {
               using project colors as the background.
             </p>
           </Col>
-          <Row className="color-code-wrapper">
+          <Row style={{
+            flexWrap: "wrap"
+          }} className="color-code-wrapper">
             <ColorBox name="Charcoal" R="60" G="73" B="79" colorCode="#3C494F" />
             <ColorBox name="Keppel" R="0" G="179" B="159" colorCode="#00B39F" />
             <ColorBox name="Caribbean Green" R="0" G="211" B="169" colorCode="#00D3A9" />
diff --git a/src/sections/Company/Brand/Brand-components/stickfigures.js b/src/sections/Company/Brand/Brand-components/stickfigures.js
index 01b6f608ed1d..e6eeb69a2a98 100644
--- a/src/sections/Company/Brand/Brand-components/stickfigures.js
+++ b/src/sections/Company/Brand/Brand-components/stickfigures.js
@@ -6,25 +6,25 @@ import SFL from "../../../../assets/images/five/SVG/stick-figures.svg";
 import teamOfFives from "../../../../assets/images/five/SVG/team-of-fives.svg";
 import resourcesSign from "../../../../assets/images/five/SVG/resources-sign.svg";
 import mesheryWorship from "../../../../assets/images/five/meshery-worship.png";
-import f1 from "../../../../assets/images/five/SVG/1.svg";
-import f2 from "../../../../assets/images/five/SVG/2.svg";
-import f3 from "../../../../assets/images/five/SVG/3.svg";
-import f4 from "../../../../assets/images/five/SVG/4.svg";
-import f5 from "../../../../assets/images/five/SVG/5.svg";
-import f6 from "../../../../assets/images/five/SVG/6.svg";
-import f7 from "../../../../assets/images/five/SVG/7.svg";
-import f8 from "../../../../assets/images/five/SVG/8.svg";
-import f9 from "../../../../assets/images/five/SVG/9.svg";
-import f10 from "../../../../assets/images/five/SVG/10.svg";
-import f11 from "../../../../assets/images/five/SVG/11.svg";
-import f12 from "../../../../assets/images/five/SVG/12.svg";
-import f13 from "../../../../assets/images/five/SVG/13.svg";
-import f14 from "../../../../assets/images/five/SVG/14.svg";
-import f15 from "../../../../assets/images/five/SVG/15.svg";
-import f16 from "../../../../assets/images/five/SVG/16.svg";
-import f17 from "../../../../assets/images/five/SVG/17.svg";
-import f18 from "../../../../assets/images/five/SVG/18.svg";
-import f19 from "../../../../assets/images/five/SVG/19.svg";
+// import f1 from "../../../../assets/images/five/SVG/1.svg";
+// import f2 from "../../../../assets/images/five/SVG/2.svg";
+// import f3 from "../../../../assets/images/five/SVG/3.svg";
+// import f4 from "../../../../assets/images/five/SVG/4.svg";
+// import f5 from "../../../../assets/images/five/SVG/5.svg";
+// import f6 from "../../../../assets/images/five/SVG/6.svg";
+// import f7 from "../../../../assets/images/five/SVG/7.svg";
+// import f8 from "../../../../assets/images/five/SVG/8.svg";
+// import f9 from "../../../../assets/images/five/SVG/9.svg";
+// import f10 from "../../../../assets/images/five/SVG/10.svg";
+// import f11 from "../../../../assets/images/five/SVG/11.svg";
+// import f12 from "../../../../assets/images/five/SVG/12.svg";
+// import f13 from "../../../../assets/images/five/SVG/13.svg";
+// import f14 from "../../../../assets/images/five/SVG/14.svg";
+// import f15 from "../../../../assets/images/five/SVG/15.svg";
+// import f16 from "../../../../assets/images/five/SVG/16.svg";
+// import f17 from "../../../../assets/images/five/SVG/17.svg";
+// import f18 from "../../../../assets/images/five/SVG/18.svg";
+// import f19 from "../../../../assets/images/five/SVG/19.svg";
 
 const StickFigures = () => {
   return (
diff --git a/src/sections/Company/Legal/terms-of-service/index.js b/src/sections/Company/Legal/terms-of-service/index.js
index c88f9b0abb53..a4e89da9958b 100644
--- a/src/sections/Company/Legal/terms-of-service/index.js
+++ b/src/sections/Company/Legal/terms-of-service/index.js
@@ -15,7 +15,7 @@ const Conduct = () => {
             <div className="conduct_heading">
               <h2>Agreement between User and Layer5, Inc.</h2>
             </div>
-            <p>Welcome to meshery.layer5.io. The meshery.layer5.io website (the “Site”) is comprised of various web pages operated by Layer5.io, Inc (“Layer5”). meshery.layer5.io is offered to you conditioned on your acceptance without modification of the terms, conditions, and notices contained herein (the “Terms”). Your use of meshery.layer5.io constitutes your agreement to all such Terms. Please read these terms carefully, and keep a copy of them for your reference.
+            <p>Welcome to cloud.layer5.io. The cloud.layer5.io website (the “Site”) is comprised of various web pages operated by Layer5.io, Inc (“Layer5”). cloud.layer5.io is offered to you conditioned on your acceptance without modification of the terms, conditions, and notices contained herein (the “Terms”). Your use of cloud.layer5.io constitutes your agreement to all such Terms. Please read these terms carefully, and keep a copy of them for your reference.
             </p>
 
             <p>layer5.io is a Software Product and Services Site.</p>
@@ -29,7 +29,7 @@ const Conduct = () => {
               <h2>Electronic Communications</h2>
             </div>
             <p>
-              Visiting meshery.layer5.io or sending emails to Layer5 constitutes electronic communications. You consent to receive electronic communications and you agree that all agreements, notices, disclosures and other communications that we provide to you electronically, via email and on the Site, satisfy any legal requirement that such communications be in writing.
+              Visiting cloud.layer5.io or sending emails to Layer5 constitutes electronic communications. You consent to receive electronic communications and you agree that all agreements, notices, disclosures and other communications that we provide to you electronically, via email and on the Site, satisfy any legal requirement that such communications be in writing.
             </p>
           </Col>
         </Row>
@@ -39,7 +39,7 @@ const Conduct = () => {
               <h2>Children Under Thirteen</h2>
             </div>
             <h5 className="black-text"></h5>
-Layer5 does not knowingly collect, either online or offline, personal information from persons under the age of thirteen. If you are under 18, you may use meshery.layer5.io only with permission of a parent or guardian.
+Layer5 does not knowingly collect, either online or offline, personal information from persons under the age of thirteen. If you are under 18, you may use cloud.layer5.io only with permission of a parent or guardian.
           </Col>
         </Row>
         <Row>
@@ -48,9 +48,9 @@ Layer5 does not knowingly collect, either online or offline, personal informatio
               <h2>No Unlawful or Prohibited Use/Intellectual Property</h2>
             </div>
             <h5 className="black-text">Links to Third Party Sites/Third Party Services</h5>
-meshery.layer5.io may contain links to other websites ("Linked Sites"). The Linked Sites are not under the control of Layer5 and Layer5 is not responsible for the contents of any Linked Site, including without limitation any link contained in a Linked Site, or any changes or updates to a Linked Site. Layer5 is providing these links to you only as a convenience, and the inclusion of any link does not imply endorsement by Layer5 of the site or any association with its operators.
+            cloud.layer5.io may contain links to other websites ("Linked Sites"). The Linked Sites are not under the control of Layer5 and Layer5 is not responsible for the contents of any Linked Site, including without limitation any link contained in a Linked Site, or any changes or updates to a Linked Site. Layer5 is providing these links to you only as a convenience, and the inclusion of any link does not imply endorsement by Layer5 of the site or any association with its operators.
 
-            <p>Certain services made available via meshery.layer5.io are delivered by third party sites and organizations. By using any product, service or functionality originating from the meshery.layer5.io domain, you hereby acknowledge and consent that Layer5 may share such information and data with any third party with whom Layer5 has a contractual relationship to provide the requested product, service or functionality on behalf of meshery.layer5.io users and customers.</p>
+            <p>Certain services made available via cloud.layer5.io are delivered by third party sites and organizations. By using any product, service or functionality originating from the cloud.layer5.io domain, you hereby acknowledge and consent that Layer5 may share such information and data with any third party with whom Layer5 has a contractual relationship to provide the requested product, service or functionality on behalf of cloud.layer5.io users and customers.</p>
           </Col>
         </Row>
         <Row>
@@ -59,7 +59,7 @@ meshery.layer5.io may contain links to other websites ("Linked Sites"). The Link
               <h2>No Unlawful or Prohibited Use/Intellectual Property</h2>
             </div>
 
-            <p>You are granted a non-exclusive, non-transferable, revocable license to access and use meshery.layer5.io strictly in accordance with these terms of use. As a condition of your use of the Site, you warrant to Layer5 that you will not use the Site for any purpose that is unlawful or prohibited by these Terms. You may not use the Site in any manner which could damage, disable, overburden, or impair the Site or interfere with any other party's use and enjoyment of the Site.</p>
+            <p>You are granted a non-exclusive, non-transferable, revocable license to access and use cloud.layer5.io strictly in accordance with these terms of use. As a condition of your use of the Site, you warrant to Layer5 that you will not use the Site for any purpose that is unlawful or prohibited by these Terms. You may not use the Site in any manner which could damage, disable, overburden, or impair the Site or interfere with any other party's use and enjoyment of the Site.</p>
 
             <p>You may not obtain or attempt to obtain any materials or information through any means not intentionally made available or provided for through the Site.</p>
 
@@ -74,7 +74,7 @@ meshery.layer5.io may contain links to other websites ("Linked Sites"). The Link
               <h2>International Users</h2>
             </div>
             <p>
-              The Service is controlled, operated and administered by Layer5 from our offices within the USA. If you access the Service from a location outside the USA, you are responsible for compliance with all local laws. You agree that you will not use the Layer5 Content accessed through meshery.layer5.io in any country or in any manner prohibited by any applicable laws, restrictions or regulations.
+              The Service is controlled, operated and administered by Layer5 from our offices within the USA. If you access the Service from a location outside the USA, you are responsible for compliance with all local laws. You agree that you will not use the Layer5 Content accessed through cloud.layer5.io in any country or in any manner prohibited by any applicable laws, restrictions or regulations.
             </p>
           </Col>
         </Row>
@@ -128,7 +128,7 @@ meshery.layer5.io may contain links to other websites ("Linked Sites"). The Link
               <h2>Changes to Terms</h2>
             </div>
             <p>
-              Layer5 reserves the right, in its sole discretion, to change the Terms under which meshery.layer5.io is offered. The most current version of the Terms will supersede all previous versions. Layer5 encourages you to periodically review the Terms to stay informed of our updates.
+              Layer5 reserves the right, in its sole discretion, to change the Terms under which cloud.layer5.io is offered. The most current version of the Terms will supersede all previous versions. Layer5 encourages you to periodically review the Terms to stay informed of our updates.
             </p>
           </Col>
         </Row>
diff --git a/src/sections/Company/News-single/index.js b/src/sections/Company/News-single/index.js
index e549695db4f0..2bb787049db8 100644
--- a/src/sections/Company/News-single/index.js
+++ b/src/sections/Company/News-single/index.js
@@ -8,8 +8,10 @@ import NewsSidebar from "./Sidebar";
 
 import NewsPageWrapper from "./NewsSingle.style.js";
 import RelatedPosts from "../../../components/Related-Posts";
+import { useStyledDarkMode } from "../../../theme/app/useStyledDarkMode";
 
 const NewsSingle = ({ data }) => {
+  const { isDark } = useStyledDarkMode();
   const { frontmatter, body, fields } = data.mdx;
   const newsData = useStaticQuery(
     graphql`query relatedNewsPosts {
@@ -54,7 +56,8 @@ const NewsSingle = ({ data }) => {
         subtitle={frontmatter.subtitle}
         category={frontmatter.category}
         author={{ name: frontmatter.author }}
-        thumbnail={frontmatter.thumbnail}
+        thumbnail={ isDark && frontmatter.darkthumbnail && frontmatter.darkthumbnail.publicURL !== frontmatter.thumbnail.publicURL
+          ? frontmatter.darkthumbnail : frontmatter.thumbnail}
         date={frontmatter.date}
       />
       <div className="single-post-wrapper">
diff --git a/src/sections/Counters/index.js b/src/sections/Counters/index.js
index 996065b41063..7f90f142f3e0 100644
--- a/src/sections/Counters/index.js
+++ b/src/sections/Counters/index.js
@@ -5,7 +5,7 @@ import Counter from "../../reusecore/Counter";
 
 import CounterSectionWrapper from "./counterSection.style";
 
-export const URL = "https://meshery.layer5.io/api/performance/results/total";
+export const URL = "https://cloud.layer5.io/api/performance/results/total";
 
 const Counters = () => {
   const [performanceCount, setPerformanceCount] = useState(0);
diff --git a/src/sections/FeatureHero/index.js b/src/sections/FeatureHero/index.js
index 9272e37b96d1..c1081b43df92 100644
--- a/src/sections/FeatureHero/index.js
+++ b/src/sections/FeatureHero/index.js
@@ -36,7 +36,7 @@ const FeatureHero = (props) => {
           <Button
             $primary
             title="Try Now!"
-            $url="https://meshery.layer5.io"
+            $url="https://cloud.layer5.io"
             $external={true}
           />
         </div>
diff --git a/src/sections/GCP-Diagram/diagram.js b/src/sections/GCP-Diagram/diagram.js
index e84703e10a10..35ab063a0559 100644
--- a/src/sections/GCP-Diagram/diagram.js
+++ b/src/sections/GCP-Diagram/diagram.js
@@ -176,7 +176,7 @@ const Gcp = () => {
         </Row>
         <Row className="catalog">
           <Col md={4} className="diagram-detail">
-            <h2 className="heading">Extensive GCP Icon Library</h2>
+            <h2 className="heading">Extensive GCP component library</h2>
             <p className="caption">
               Utilize a vast and continually expanding collection of GCP icons designed for both diagramming and orchestration scenarios. Craft globally comprehensible diagrams that are not only authentic but also aligned with the latest industry standards.
             </p>
diff --git a/src/sections/GCP-Diagram/index.js b/src/sections/GCP-Diagram/index.js
index fcf310317ea5..d80ee016860b 100644
--- a/src/sections/GCP-Diagram/index.js
+++ b/src/sections/GCP-Diagram/index.js
@@ -11,7 +11,7 @@ const GcpDiagramPage = () => {
   const { isDark } = useStyledDarkMode();
   let data = {
     heading: "GCP Orchestration and Diagramming Software",
-    sub_heading: "Orchestrate and design Google Cloud Platform architecture diagrams easily with predefined templates and symbols designed for professionals.",
+    sub_heading: "Orchestrate and design Google Cloud Platform architecture diagrams easily with predefined templates designed for professionals.",
     image: isDark ? GCPDiagramDark : GCPDiagramDark
   };
   return (
diff --git a/src/sections/General/Navigation/index.js b/src/sections/General/Navigation/index.js
index ca80dcadc0ce..3962b78a94b3 100644
--- a/src/sections/General/Navigation/index.js
+++ b/src/sections/General/Navigation/index.js
@@ -21,7 +21,7 @@ import CloudIcon from "./utility/CloudIcon.js";
 import LogoutIcon from "./utility/LogoutIcon.js";
 // import LogoutIcon from "./utility/LogoutIcon.js";
 import KanvasIcon from "./utility/KanvasIcon.js";
-import posthog from "posthog-js";
+
 const Navigation = () => {
   let data = useStaticQuery(
     graphql`{
@@ -183,7 +183,7 @@ const Navigation = () => {
   }
   useEffect(() => {
     const CLOUD_USER_API =
-      "https://meshery.layer5.io/api/identity/users/profile";
+      "https://cloud.layer5.io/api/identity/users/profile";
     const fetchData = async () => {
       try {
         const token = getCookieValue("provider_token");
@@ -198,14 +198,6 @@ const Navigation = () => {
         }
 
         const data = response.data;
-        if (data){
-          posthog.identify(
-            data?.id,
-            {
-              email: data?.email
-            }
-          );
-        }
         setUserData(data);
       } catch (error) {
         console.error("There was a problem with your fetch operation:", error);
@@ -347,7 +339,7 @@ const Navigation = () => {
                           $secondary
                           className="banner-btn two"
                           title="Get Started"
-                          $url="https://meshery.layer5.io/login"
+                          $url="https://cloud.layer5.io/login"
                           $external={true}
                         />
                       </li>
@@ -396,7 +388,7 @@ const Navigation = () => {
                   rel="noreferrer"
                   target="_blank"
                   className="drop-item"
-                  href={`https://meshery.layer5.io/user/${userData.id}`}
+                  href={`https://cloud.layer5.io/user/${userData.id}`}
                 >
                   <div className="drop-item-icon">
                     <CloudIcon />
@@ -429,7 +421,7 @@ const Navigation = () => {
                   onClick={() => {
                     removeCookie("provider_token");
                     // Open logout API link in a new tab
-                    window.open("https://meshery.layer5.io/logout", "_blank");
+                    window.open("https://cloud.layer5.io/logout", "_blank");
 
                     // Refresh the current page
                     window.location.reload();
@@ -453,7 +445,7 @@ const Navigation = () => {
               $external={true}
               title="Get Started"
               alt="Signup for Layer5 Cloud"
-              $url="https://meshery.layer5.io/registration"
+              $url="https://cloud.layer5.io/registration"
             />
           )}
           {/* <Button id="book-a-demo" aria-label="Book a demo" secondary className="banner-btn book-a-demo" external={true} title="Book a demo" alt="Book a demo" url="https://calendar.google.com/calendar/appointments/schedules/AcZssZ3pmcApaDP4xd8hvG5fy8ylxuFxD3akIRc5vpWJ60q-HemQi80SFFAVftbiIsq9pgiA2o8yvU56?gv=true" /> */}
diff --git a/src/sections/General/Navigation/navigation.style.js b/src/sections/General/Navigation/navigation.style.js
index 9a73d434887d..fcb16b31b09b 100644
--- a/src/sections/General/Navigation/navigation.style.js
+++ b/src/sections/General/Navigation/navigation.style.js
@@ -1,7 +1,6 @@
 import styled from "styled-components";
 
 const NavigationWrap = styled.header`
-  position: sticky;
   width: 100vw;
   z-index: 9999;
   top: 0;
@@ -17,6 +16,7 @@ const NavigationWrap = styled.header`
     }
   }
   .meshery-cta {
+    z-index: 999;
     position: relative;
     display: flex;
     align-items: center;
@@ -618,6 +618,14 @@ const NavigationWrap = styled.header`
     }
     .mobile-nav-item {
       padding: 1px;
+      ul:after {
+        content: "";
+        display: block;
+        height: 1px;
+        width: 40%;
+        margin: 10px;
+        background: ${(props) => props.theme.greyC1C1C1ToGreyB3B3B3};
+      }
       .menu-item {
         font-size: 16px;
         font-weight: 600;
@@ -750,7 +758,8 @@ const NavigationWrap = styled.header`
   }
   .dark-theme-toggle {
     /* margin-left: 2rem; */
-    visibility: ${(props) => typeof props.theme.DarkTheme === "boolean" ? "visible" : "hidden"};
+    visibility: ${(props) =>
+  typeof props.theme.DarkTheme === "boolean" ? "visible" : "hidden"};
   }
 
   .toggle {
diff --git a/src/sections/Home/Banner-4/index.js b/src/sections/Home/Banner-4/index.js
index b58967ed531b..0f9336571c13 100644
--- a/src/sections/Home/Banner-4/index.js
+++ b/src/sections/Home/Banner-4/index.js
@@ -71,7 +71,7 @@ const Banner1 = (props) => {
                   <Button $primary className="banner-btn one" title="Learn about Kanvas" $url="/cloud-native-management/kanvas">
                     <FaMapMarkedAlt size={21} className="icon-left" />
                   </Button>
-                  <Button $secondary className="banner-btn two" title="Open in Playground" $url="https://play.meshery.io" $external={true}>
+                  <Button $secondary className="banner-btn two" title="Open in Playground" $url="https://kanvas.new/" $external={true}>
                     <BsArrowUpRight size={21} className="icon-left" />
                   </Button>
                 </VintageBox>
diff --git a/src/sections/Home/FeaturesContainer/index.js b/src/sections/Home/FeaturesContainer/index.js
index 95a2602ff268..73c7bc8549cc 100644
--- a/src/sections/Home/FeaturesContainer/index.js
+++ b/src/sections/Home/FeaturesContainer/index.js
@@ -41,7 +41,7 @@ const FeaturesContainer = () => {
       redirectLink: "",
       desc: (
         <span>
-          Incorporate AWS <i>and</i>{" "} GCP components into Meshery designs for
+          Incorporate AWS <i>and</i>{" "} GCP components into Kanvas designs for
           comprehensive <i>and</i>{" "} intuitive system mapping, documentation, <i>and</i>{" "}
           orchestration.
         </span>
diff --git a/src/sections/Home/Partners-home/index.js b/src/sections/Home/Partners-home/index.js
index abf636babcdc..b91262a93dc3 100644
--- a/src/sections/Home/Partners-home/index.js
+++ b/src/sections/Home/Partners-home/index.js
@@ -1,3 +1,5 @@
+import "slick-carousel/slick/slick.css";
+import "slick-carousel/slick/slick-theme.css";
 import React from "react";
 import { Container, Row } from "../../../reusecore/Layout";
 import SectionTitle from "../../../reusecore/SectionTitle";
@@ -5,8 +7,6 @@ import PartnerItemWrapper from "./partnerSection.style";
 import { Link } from "gatsby";
 import { partners } from "./partners-home-data";
 import Slider from "react-slick";
-import "slick-carousel/slick/slick.css";
-import "slick-carousel/slick/slick-theme.css";
 
 const settings = {
   initialSlide: 1,
diff --git a/src/sections/Home/So-Special-Section/index.js b/src/sections/Home/So-Special-Section/index.js
index 92f87301128d..0474474f4749 100644
--- a/src/sections/Home/So-Special-Section/index.js
+++ b/src/sections/Home/So-Special-Section/index.js
@@ -1,7 +1,7 @@
-import React from "react";
-import Slider from "react-slick";
 import "slick-carousel/slick/slick.css";
 import "slick-carousel/slick/slick-theme.css";
+import React from "react";
+import Slider from "react-slick";
 import SoSpecialWrapper from "./so-special-style";
 
 import Button from "../../../reusecore/Button";
diff --git a/src/sections/Kanvas/Kanvas-visualize/kanvas-visualize-banner.js b/src/sections/Kanvas/Kanvas-visualize/kanvas-visualize-banner.js
index 4547ee727622..23d20fabd611 100644
--- a/src/sections/Kanvas/Kanvas-visualize/kanvas-visualize-banner.js
+++ b/src/sections/Kanvas/Kanvas-visualize/kanvas-visualize-banner.js
@@ -1,6 +1,6 @@
 import React from "react";
 import styled from "styled-components";
-import Button from "../../../reusecore/Button";
+// import Button from "../../../reusecore/Button";
 import KanvasBtn from "../kanvas-buttons";
 
 const VisualizeBannerWrapper = styled.div`
diff --git a/src/sections/Kanvas/kanvas_banner.js b/src/sections/Kanvas/kanvas_banner.js
index 4900923cf757..2da3a46e963f 100644
--- a/src/sections/Kanvas/kanvas_banner.js
+++ b/src/sections/Kanvas/kanvas_banner.js
@@ -4,18 +4,21 @@ import KanvasIcon from "./kanvas-icon.svg";
 
 const BannerSectionWrapper = styled.div`
 
-    display: flex;
-    background: #000000;
-    border-radius: 0% 85% 0% 0% / 0% 80% 0% 0% ;
-    -webkit-box-shadow: 5px -5px 15px 5px rgba(0,0,0,0.33);
-    box-shadow: 1px -5px 5px 1px rgba(235,192,23,.5);
-
-    padding: 8rem 6rem 3rem 6rem;
-    max-width: 1140px;
-    width: 100%;
-    margin: auto;
-    min-height: 25rem;
-
+  display: flex;
+  flex-wrap: nowrap;
+  background: #000000;
+  border-radius: 0% 85% 0% 0% / 0% 80% 0% 0% ;
+  -webkit-box-shadow: 5px -5px 15px 5px rgba(0,0,0,0.33);
+  box-shadow: 1px -5px 5px 1px rgba(235,192,23,.5);
+  gap: 5rem;
+  padding: 6rem 6rem 6rem 6rem;
+  max-width: 1140px;
+  width: 100%;
+  margin: auto;
+  min-height: 25rem;
+  align-content: end;
+
+  div.banner-text {
     h1 {
         /* background-color: ${props => props.theme.black}; */
         font-weight: 500;
@@ -35,7 +38,7 @@ const BannerSectionWrapper = styled.div`
         }
         @media screen and (max-width: 448px) {
             font-size: 38px;
-            span{
+            span {
                 font-size: 48px;
             }
         }
@@ -44,63 +47,58 @@ const BannerSectionWrapper = styled.div`
             margin: 1.5rem 0;
         }
     }
-    h2 {
-        margin-bottom: 1rem;
-        font-size: 1.95rem;
-        font-weight: 400;
-        color: ${props => props.theme.white};
-        font-style: italic;
-        span {
+        h2 {
+            margin-bottom: 1rem;
+            font-size: 1.95rem;
+            font-weight: 400;
+            color: ${props => props.theme.white};
+            font-style: italic;
+            span {
+                font-style: normal;
+            }
+        }
+        h2.readyPlayer {
+            margin: 2rem 0rem 0rem 0rem;
+            background-color: black;
+            position: absolute;
+            z-index: 1;
+            padding: 1.5rem;
+            color: white;
             font-style: normal;
+            text-transform: uppercase ;
+            font-size: 2.5rem;
+            text-align: center;
         }
-    }
-    h2.readyPlayer {
-        margin: 2rem 0rem 0rem 0rem;
-        background-color: black;
-        position: absolute;
-        z-index: 1;
-        padding: 1.5rem;
-        color: white;
-        font-style: normal;
-        text-transform: uppercase ;
-        font-size: 2.5rem;
-        text-align: center;
-    }
-
-    }
-    .banner-text p {
-        color: ${props => props.theme.saffronColor};
-        margin-bottom: .5rem;
-        font-weight: 400;
-        font-size: 1.75rem;
-        font-style: italic;
-        min-width: 18rem;
-        font-family: "Qanelas Soft";
-        span {
+        p {
             color: ${props => props.theme.saffronColor};
+            margin-bottom: .5rem;
+            font-weight: 400;
+            font-size: 1.75rem;
+            font-style: italic;
+            min-width: 18rem;
+            font-family: "Qanelas Soft";
+            span {
+                color: ${props => props.theme.saffronColor};
+            }
         }
-    }
-    h4 {
-        text-transform: uppercase;
-        padding-left: 1rem;
-        font-style: italic;
-        font-size: 1.25rem;
-        color: ${props => props.theme.white};
-        span {
+        h4 {
+            text-transform: uppercase;
             padding-left: 1rem;
+            font-style: italic;
+            font-size: 1.25rem;
+            color: ${props => props.theme.white};
+            span {
+                padding-left: 1rem;
+            }
         }
     }
-
     .kanvas-logo {
         width: 14rem;
         overflow: hidden;
-        margin-top: -7rem;
-        position: relative;
-        left: 10%;
-        margin-top: -8rem;
-        z-index: 0;
-
-    }
+        display: flex;
+        align-self: center;
+        flex-wrap: nowrap;
+      }
     div.accent-bubble {
         width: 50%;
         height: 100%;
@@ -118,9 +116,7 @@ const BannerSectionWrapper = styled.div`
 
     @media screen and (max-width: 1700px) {
         .kanvas-logo {
-            width: 20rem;
-            left: 21%;
-            margin-top: -7rem;
+            width: 12rem;
         }
         .para {
             margin-top: -3rem;
@@ -128,37 +124,39 @@ const BannerSectionWrapper = styled.div`
     }
     @media screen and (max-width: 1200px) {
         .kanvas-logo {
-            width: 18rem;
-            left: 18%;
-            margin-top: -6rem;
+            width: 10rem;
         }
-        /* border-radius: 0% 85% 0% 0% / 0% 60% 0% 0% ; */
+        border-radius: 0% 85% 0% 0% / 0% 60% 0% 0% ;
     }
     @media screen and (max-width: 992px) {
         .kanvas-logo {
             width: 8rem;
-            margin-top: -2rem;
-            left: 15%;
         }
+        .banner-text {
+          margin-left: 0rem;
+          margin-bottom: 0rem;
+          h1 { font-size: 50px; } 
+          h2 { font-size: 1.25rem; }
+          h4 { font-size: 1rem; }
+          p { font-size: 1.25rem; }
+        }
+        gap: 2.5rem;
+        min-height: 12rem;
+        padding: 6rem 2rem 2rem 2rem;
         border-radius: 0% 85% 0% 0% / 0% 60% 0% 0% ;
     }
 
     @media screen and (max-width: 768px) {
         padding: 8rem 2rem 3rem;
         .kanvas-logo {
-            margin-top: -5rem;
-            margin-right: 2rem;
-            left: 7%;
-            min-width: 5rem;
+            min-width: 6rem;
             }
         border-radius: 0% 85% 0% 0% / 0% 40% 0% 0% ;
         }
     @media screen and (max-width: 500px) {
         .kanvas-logo {
-            margin-top: -5rem;
-            margin-right: 2rem;
-            left: 0%;
-            min-width: 3rem;
+            
+            /* min-width: 3rem; */
             }
         border-radius: 0% 85% 0% 0% / 0% 40% 0% 0% ;
         }
@@ -202,4 +200,4 @@ const BannerSection = () => {
   );
 };
 
-export default BannerSection;
+export default BannerSection;
\ No newline at end of file
diff --git a/src/sections/Landscape/smi.js b/src/sections/Landscape/smi.js
index 4cbd74187cf0..ee097268120d 100644
--- a/src/sections/Landscape/smi.js
+++ b/src/sections/Landscape/smi.js
@@ -37,7 +37,7 @@ function SMI_Compatibility() {
   const [smiData, setSmiData] = useState(0);
 
   useEffect(() => {
-    fetch("https://meshery.layer5.io/api/smi/results/public")
+    fetch("https://cloud.layer5.io/api/smi/results/public")
       .then(response => response.json())
       // Group by SMI-spec version
       .then(results => {
diff --git a/src/sections/Learn/Books-grid/index.js b/src/sections/Learn/Books-grid/index.js
index d898f3c0e208..10f8313a8488 100644
--- a/src/sections/Learn/Books-grid/index.js
+++ b/src/sections/Learn/Books-grid/index.js
@@ -1,10 +1,10 @@
+import "slick-carousel/slick/slick.css";
+import "slick-carousel/slick/slick-theme.css";
 import React from "react";
 import { graphql, useStaticQuery } from "gatsby";
 import PageHeader from "../../../reusecore/PageHeader";
 import { Link } from "gatsby";
 import Slider from "react-slick";
-import "slick-carousel/slick/slick.css";
-import "slick-carousel/slick/slick-theme.css";
 import { BooksPageWrapper } from "./BooksGrid.style";
 
 const BooksPage = ({ hide_path }) => {
diff --git a/src/sections/Learn/LearnPage-Sections/workshops.js b/src/sections/Learn/LearnPage-Sections/workshops.js
index af7175e20091..e7b8e90a0974 100644
--- a/src/sections/Learn/LearnPage-Sections/workshops.js
+++ b/src/sections/Learn/LearnPage-Sections/workshops.js
@@ -1,11 +1,11 @@
+import "slick-carousel/slick/slick.css";
+import "slick-carousel/slick/slick-theme.css";
 import React from "react";
 import { graphql, useStaticQuery, Link } from "gatsby";
 import { Row, Col } from "../../../reusecore/Layout";
 import Button from "../../../reusecore/Button";
 import { feedbackData } from "./feedbackData";
 import Slider from "react-slick";
-import "slick-carousel/slick/slick.css";
-import "slick-carousel/slick/slick-theme.css";
 import { FiArrowRight } from "@react-icons/all-files/fi/FiArrowRight";
 import { FiArrowLeft } from "@react-icons/all-files/fi/FiArrowLeft";
 import styled from "styled-components";
diff --git a/src/sections/Meshery/Features-Col/index.js b/src/sections/Meshery/Features-Col/index.js
index eeec9fb67718..850ea68f4d76 100644
--- a/src/sections/Meshery/Features-Col/index.js
+++ b/src/sections/Meshery/Features-Col/index.js
@@ -60,7 +60,7 @@ function getFeatureBlock(feature, index, performanceCount) {
 
 const Features = () => {
   const [performanceCount, setPerformanceCount] = useState(0);
-  const performanceCountEndpoint = "https://meshery.layer5.io/api/performance/results/total";
+  const performanceCountEndpoint = "https://cloud.layer5.io/api/performance/results/total";
 
   useEffect(() => {
     fetch(performanceCountEndpoint)
diff --git a/src/sections/Meshery/Features-section/index.js b/src/sections/Meshery/Features-section/index.js
index 5f8f33648442..00c9744d426b 100644
--- a/src/sections/Meshery/Features-section/index.js
+++ b/src/sections/Meshery/Features-section/index.js
@@ -1,9 +1,9 @@
+import "slick-carousel/slick/slick.css";
+import "slick-carousel/slick/slick-theme.css";
 import React from "react";
 import { Row, Col } from "../../../reusecore/Layout";
 import Button from "../../../reusecore/Button";
 import Slider from "react-slick";
-import "slick-carousel/slick/slick.css";
-import "slick-carousel/slick/slick-theme.css";
 import Slide1 from "../images/service mesh performance example.gif";
 import Slide2 from "../images/meshery_benchmark_screen.webp";
 import Slide3 from "../images/meshery-configuration-management.webp";
diff --git a/src/sections/Meshery/How-meshery-works/howitworks.style.js b/src/sections/Meshery/How-meshery-works/howitworks.style.js
index 1fa527c79528..54b027752651 100644
--- a/src/sections/Meshery/How-meshery-works/howitworks.style.js
+++ b/src/sections/Meshery/How-meshery-works/howitworks.style.js
@@ -71,6 +71,7 @@ h2 {
   }
   
   .diagram {
+    margin-bottom:150px;
     width: 591px;
     max-width: 100%;
     position: sticky;
diff --git a/src/sections/Meshery/Meshery-integrations/Individual-Integrations/CatalogGrid.js b/src/sections/Meshery/Meshery-integrations/Individual-Integrations/CatalogGrid.js
index 27a1f1ad114a..2ddb301c232d 100644
--- a/src/sections/Meshery/Meshery-integrations/Individual-Integrations/CatalogGrid.js
+++ b/src/sections/Meshery/Meshery-integrations/Individual-Integrations/CatalogGrid.js
@@ -13,7 +13,7 @@ const CatalogGrid = ({ frontmatter }) => {
   const { isDark } = useStyledDarkMode();
 
   useEffect(() => {
-    const CLOUD_FETCH_DESIGN = `https://meshery.layer5.io/api/catalog/content/pattern?technology=${
+    const CLOUD_FETCH_DESIGN = `https://cloud.layer5.io/api/catalog/content/pattern?technology=${
       technology[technology.length - 1]
     }&page=0&pagesize=${designSize}&search=&order=&metrics=true`;
     const fetchData = async () => {
@@ -52,7 +52,7 @@ const CatalogGrid = ({ frontmatter }) => {
             return (
               <CatalogCard
                 key={index}
-                cardLink={`https://meshery.layer5.io/catalog/content/catalog/${item?.id}`}
+                cardLink={`https://cloud.layer5.io/catalog/content/catalog/${item?.id}`}
                 cardHeight="20rem"
                 cardWidth="16rem"
                 pattern={item}
diff --git a/src/sections/Meshery/Meshery-integrations/Individual-Integrations/index.js b/src/sections/Meshery/Meshery-integrations/Individual-Integrations/index.js
index a6c11a8b5c45..6496b6ada812 100644
--- a/src/sections/Meshery/Meshery-integrations/Individual-Integrations/index.js
+++ b/src/sections/Meshery/Meshery-integrations/Individual-Integrations/index.js
@@ -114,7 +114,7 @@ const IndividualIntegrations = ({ data }) => {
         ) : isGcpItem ? (
           <HowMesheryWorksSpecs
             title="GCP Orchestration and Diagramming Softwarel"
-            desc="Orchestrate and design Google Cloud Platform architecture diagrams easily with predefined templates and symbols designed for professionals."
+            desc="Orchestrate and design Google Cloud Platform architecture diagrams easily with predefined templates designed for professionals."
             btnUrl="/cloud-native-management/generate-gcp-architecture-diagram"
           />
         ) : (
diff --git a/src/sections/Meshery/Meshery-integrations/Integration.style.js b/src/sections/Meshery/Meshery-integrations/Integration.style.js
index 7c7ee84326d2..60b595b5be5e 100755
--- a/src/sections/Meshery/Meshery-integrations/Integration.style.js
+++ b/src/sections/Meshery/Meshery-integrations/Integration.style.js
@@ -1,7 +1,7 @@
-import styled from "styled-components";
-import Slider from "react-slick";
 import "slick-carousel/slick/slick.css";
 import "slick-carousel/slick/slick-theme.css";
+import styled from "styled-components";
+import Slider from "react-slick";
 
 export const HoneycombGrid = styled.div`
   .heading {
diff --git a/src/sections/Meshery/meshery-operator/index.js b/src/sections/Meshery/meshery-operator/index.js
index 13617d323278..3ef3a3c5bc81 100644
--- a/src/sections/Meshery/meshery-operator/index.js
+++ b/src/sections/Meshery/meshery-operator/index.js
@@ -1,12 +1,12 @@
-import React from "react";
+
+import "slick-carousel/slick/slick.css";
+import "slick-carousel/slick/slick-theme.css";import React from "react";
 import { StaticImage } from "gatsby-plugin-image";
 
 
 import MesheryOperatorWrapper from "./mesheryoperator.style";
 import { Container, Row, Col } from "../../../reusecore/Layout";
 import Slider from "react-slick";
-import "slick-carousel/slick/slick.css";
-import "slick-carousel/slick/slick-theme.css";
 
 import SubscribeSection from "../../../sections/subscribe/subscribe";
 import Deployment from "./deployment.svg";
diff --git a/src/sections/Pricing/data.js b/src/sections/Pricing/archived/data.js
similarity index 99%
rename from src/sections/Pricing/data.js
rename to src/sections/Pricing/archived/data.js
index 90838de228b1..731ab10e2e8c 100644
--- a/src/sections/Pricing/data.js
+++ b/src/sections/Pricing/archived/data.js
@@ -434,7 +434,7 @@ export const options = [
     monthlyprice: 0,
     yearlyprice: 0,
     byline: "Open Source features, plus:",
-    button: ["Join for Free", "https://meshery.layer5.io"],
+    button: ["Join for Free", "https://cloud.layer5.io"],
     summary: [
       { id: 0, category: "Cloud Native Design Patterns", description: "Import and export your designs using your local filesystem or remote URL." },
       { id: 1, category: "Multiple Kubernetes Clusters", description: "Ongoing synchronization of Kubernetes configuration, workloads and cloud native infrastructure changes across any number of Kubernetes clusters." },
diff --git a/src/sections/Pricing/comparison.js b/src/sections/Pricing/comparison.js
index 3d4e735ea0d6..5081e3181f40 100644
--- a/src/sections/Pricing/comparison.js
+++ b/src/sections/Pricing/comparison.js
@@ -1,6 +1,6 @@
 import React from "react";
 import styled from "styled-components";
-import { details } from "./data";
+import details  from "./generateDetails";
 import { Container } from "../../reusecore/Layout";
 // import FeatureDetails from "./collapsible-details";
 import FeatureDetails from "../../components/PlanCard/collapsible-details";
@@ -40,7 +40,7 @@ h2, h5{
     vertical-align: middle;
     transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
 
-    h5{
+    h5 {
       display: flex;
       text-align: left;
       padding-top: 1rem;
@@ -49,7 +49,9 @@ h2, h5{
 }
 .price-table tr td:first-child {
     border-left: 0 none;
-    width: 45%;
+    width: 100%;
+    justify-content: flex-start;
+    text-align: left;
 }
 .price-table tr td:not(:first-child) {
     text-align: center;
@@ -70,22 +72,21 @@ h2, h5{
 
 /* Highlighted column */
 
-.price-table tr td:nth-child(2) {
+.price-table tr td:nth-child(3) {
     background: rgba(0,179,159,0.1);
     padding: 8px 48px;
 }
 
 .price-table tr.price-table-head td {
-    font-size: 16px;
+    font-size: 1.15rem;
+    line-height: 1.5rem;
     font-weight: 600;
+    padding: .5rem;
     text-transform: uppercase;
 }
 .price-table tr.price-table-head {
-    background-color: #00b39f;
+    background-color:${props => props.theme.secondaryColor};
     color: #FFFFFF;
-    td{
-    padding: 1rem 0;
-    }
 }
 .price-table td.price {
     padding: 16px 24px;
@@ -101,59 +102,93 @@ h2, h5{
     display: inline-block;
     border-radius: 64px;
 }
-.price-table td.price-table-popular {
+.price-table th.price-table-popular {
     border-top: 3px solid #00b39f;
-    color: #00b39f;
+    color:${props => props.theme.saffronColor};
+    background-color:rgba(0,179,159,0.1);
     text-transform: uppercase;
     font-size: 12px;
     padding: 12px 48px;
     font-weight: 700;
 }
 .price-table .price-blank {
-    background-color: ${props => props.theme.grey191919ToGreyFAFAFA};
+    background-color: ${props => props.theme.secondaryDarkColor};
     border: 0 none;
     transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
 }
 
-.category{
+.category {
   display: inline-block;
   margin: 0 1rem;
 }
 
-.icon{
+.icon {
     height: 4rem;
     width: auto;
     fill: #00b39f;
     display: inline-block;
 }
-.no-icon{
+.no-icon {
   height: 1.5rem;
   width: auto;
   fill: red;
 }
-.yes-icon{
+.yes-icon {
   height: 1.5rem;
   width: auto;
   fill: #00b39f;
 }
-.toggle-btn{
+.toggle-btn {
   margin-top: 1rem;
 }
-.details{
-  p{
+.details {
+  p {
     color: #7A848E;
     margin-left: 1.1rem;
   }
 }
-.category-icon{
-  margin: 0rem auto;
+.category-icon {
+  
+}
+.categories {
+  display: flex;
+  width: 100%;
+  text-align: left;
+  align-items: center;
+  margin: 1rem auto;
+}
+.docs {
+  width:1rem;
+  height:1rem;
+}
+
+td.feature {
+  padding: auto;
+  margin: 0px;
 }
-.categories{
+.feature-link-container {
   display: flex;
   align-items: center;
-  margin: 1rem 0;
+  justify-content: space-between;
+}
+
+.feature-name {
+  margin-right: 0.5rem; 
 }
 
+.feature-link {
+  color: #00b39f;
+  text-decoration: none;
+  font-size: 0.9rem;
+}
+.feature-link > svg {
+    &:hover { 
+      opacity:.5;
+    }
+  }
+.feature-link:hover {
+  text-decoration: underline;
+}
 `;
 
 const Comparison = () => {
@@ -166,34 +201,34 @@ const Comparison = () => {
           <table className="price-table">
             <tbody>
               <tr>
-                <td className="price-blank"></td>
-                <td className="price-table-popular">Most popular</td>
-                <td className="price-blank"></td>
-                <td className="price-blank"></td>
+                <th className="price-blank"></th>
+                <th className="price-blank"></th>
+                <th className="price-table-popular">Most popular</th>
+                <th className="price-blank"></th>
+                <th className="price-blank"></th>
               </tr>
               <tr className="price-table-head">
                 <td></td>
                 <td>Free</td>
-                <td>Team</td>
+                <td>Team Designer</td>
+                <td>Team Operator</td>
                 <td>Enterprise</td>
               </tr>
 
               {details.map((x) => (
                 <>
                   <tr key={x.id} >
-                    <td className="categories" >
-                      <img src={x.icon} height={45} className="category-icon" alt={x.category} />
+                    <td className="categories" colSpan="5">
+                      <img src={x.icon} height={32} className="category-icon" alt={x.category} />
                       <h3 className="category">{x.category}</h3></td>
-                    <td></td>
-                    <td></td>
-                    <td></td>
                   </tr>
                   {x.features.map((f) => (
                     <tr key={f.feature}>
                       <td><FeatureDetails category={f.feature} description={f.description} /></td>
-                      <td>{f.free}</td>
-                      <td>{f.team}</td>
-                      <td>{f.enterprise}</td>
+                      <td className="feature">{f.free}</td>
+                      <td className="feature">{f.teamDesigner}</td>
+                      <td className="feature">{f.teamOperator}</td>
+                      <td className="feature">{f.enterprise}</td>
                     </tr>
                   ))}
                 </>
diff --git a/src/sections/Pricing/feature_data.json b/src/sections/Pricing/feature_data.json
new file mode 100644
index 000000000000..a6710a672626
--- /dev/null
+++ b/src/sections/Pricing/feature_data.json
@@ -0,0 +1,1186 @@
+[
+  {
+    "theme": "This sheet is for purposes of classifying and itemizing the features and their subscription tiers for publishing on layer5.io/pricing and cloud.layer5.io.",
+    "categoryOrder": "",
+    "category": "",
+    "functionOrder": "",
+    "function": "",
+    "feature": "",
+    "subscription_tier": "1st section of webpage",
+    "comparison_tiers": {
+      "free": "2nd section of webpage",
+      "teamDesigner": "",
+      "teamOperator": "",
+      "enterprise": ""
+    },
+    "docs": ""
+  },
+  {
+    "theme": "",
+    "categoryOrder": "0",
+    "category": "Configuration Management",
+    "functionOrder": "1",
+    "function": "Infrastructure as Design",
+    "feature": "Drag-n-drop cloud native infrastructure designer to configure, model, and deploy your workloads",
+    "subscription_tier": "Free",
+    "comparison_tiers": {
+      "free": "x",
+      "teamDesigner": "x",
+      "teamOperator": "x",
+      "enterprise": "x"
+    },
+    "docs": ""
+  },
+  {
+    "theme": "",
+    "categoryOrder": "0",
+    "category": "Configuration Management",
+    "functionOrder": "2",
+    "function": "Export Designs",
+    "feature": "Export a latest version of design in any supported format: Kubernetes Manifest, Helm Chart, Docker Compose, Artifact Hub and as any OCI, YAML, or JSON.",
+    "subscription_tier": "",
+    "comparison_tiers": {
+      "free": "x",
+      "teamDesigner": "x",
+      "teamOperator": "x",
+      "enterprise": "x"
+    },
+    "docs": "https://docs.layer5.io/kanvas/designer/export-designs/#exporting-as-a-design-file"
+  },
+  {
+    "theme": "",
+    "categoryOrder": "0",
+    "category": "Configuration Management",
+    "functionOrder": "3",
+    "function": "350 Built-in Models",
+    "feature": "Thousands of standardized components to represent complex systems, providing logical architecture of your infrastructure.",
+    "subscription_tier": "Free",
+    "comparison_tiers": {
+      "free": "x",
+      "teamDesigner": "x",
+      "teamOperator": "x",
+      "enterprise": "x"
+    },
+    "docs": "https://docs.meshery.io/concepts/logical/models"
+  },
+  {
+    "theme": "",
+    "categoryOrder": "0",
+    "category": "Configuration Management",
+    "functionOrder": "4",
+    "function": "Custom Models",
+    "feature": "Define new components, relationships, and policies as needed. Import/export your custom models as OCI images.",
+    "subscription_tier": "Free",
+    "comparison_tiers": {
+      "free": "x",
+      "teamDesigner": "x",
+      "teamOperator": "x",
+      "enterprise": "x"
+    },
+    "docs": "https://docs.meshery.io/guides/configuration-management/importing-models"
+  },
+  {
+    "theme": "",
+    "categoryOrder": "0",
+    "category": "Configuration Management",
+    "functionOrder": "5",
+    "function": "Import your IaC",
+    "feature": "Import a design from Kubernetes Manifest, Helm Chart, Docker Compose or Artifact Hub.",
+    "subscription_tier": "",
+    "comparison_tiers": {
+      "free": "x",
+      "teamDesigner": "x",
+      "teamOperator": "",
+      "enterprise": "x"
+    },
+    "docs": "https://docs.meshery.io/extensions/importing-a-design"
+  },
+  {
+    "theme": "",
+    "categoryOrder": "0",
+    "category": "Configuration Management",
+    "functionOrder": "6",
+    "function": "Design Review Notifications",
+    "feature": "In-line commenting. Threaded discussions. Notifications w/user mentions. Silence notifications. Resolve and reopen comments. Comment history.",
+    "subscription_tier": "",
+    "comparison_tiers": {
+      "free": "",
+      "teamDesigner": "x",
+      "teamOperator": "",
+      "enterprise": "x"
+    },
+    "docs": ""
+  },
+  {
+    "theme": "",
+    "categoryOrder": "0",
+    "category": "Configuration Management",
+    "functionOrder": "7",
+    "function": "Bulk Import IaC",
+    "feature": "Bulk import of your existing infrastructure as code from GitHub repositories.",
+    "subscription_tier": "",
+    "comparison_tiers": {
+      "free": "",
+      "teamDesigner": "",
+      "teamOperator": "",
+      "enterprise": "x"
+    },
+    "docs": "https://docs.layer5.io/cloud/getting-started/github-integration/"
+  },
+  {
+    "theme": "",
+    "categoryOrder": "0",
+    "category": "Configuration Management",
+    "functionOrder": "8",
+    "function": "Validate Infrastructure Configuration",
+    "feature": "Static validation of configured parameters for design completeness and accuracy.",
+    "subscription_tier": "TeamDesigner",
+    "comparison_tiers": {
+      "free": "",
+      "teamDesigner": "x",
+      "teamOperator": "",
+      "enterprise": ""
+    },
+    "docs": "https://docs.layer5.io/kanvas/tasks/designs/validating-designs/"
+  },
+  {
+    "theme": "",
+    "categoryOrder": "",
+    "category": "",
+    "functionOrder": "",
+    "function": "",
+    "feature": "",
+    "subscription_tier": "no",
+    "comparison_tiers": {
+      "free": "",
+      "teamDesigner": "",
+      "teamOperator": "",
+      "enterprise": ""
+    },
+    "docs": ""
+  },
+  {
+    "theme": "",
+    "categoryOrder": "",
+    "category": "",
+    "functionOrder": "",
+    "function": "",
+    "feature": "",
+    "subscription_tier": "",
+    "comparison_tiers": {
+      "free": "",
+      "teamDesigner": "",
+      "teamOperator": "",
+      "enterprise": ""
+    },
+    "docs": ""
+  },
+  {
+    "theme": "",
+    "categoryOrder": "1",
+    "category": "Lifecycle Management",
+    "functionOrder": "101",
+    "function": "Discovery of existing infrastructure",
+    "feature": "Discover clusters and/or import existing Kubernetes applications. Visualize their architecture, and gain a clear understanding of how different components interact.",
+    "subscription_tier": "Free",
+    "comparison_tiers": {
+      "free": "x",
+      "teamDesigner": "x",
+      "teamOperator": "x",
+      "enterprise": "x"
+    },
+    "docs": ""
+  },
+  {
+    "theme": "",
+    "categoryOrder": "1",
+    "category": "Lifecycle Management",
+    "functionOrder": "102",
+    "function": "Robust CLI",
+    "feature": "Seamlessly manage your configurations, deployments, and interactions through our intuitive and powerful command-line interface: mesheryctl",
+    "subscription_tier": "Free",
+    "comparison_tiers": {
+      "free": "x",
+      "teamDesigner": "x",
+      "teamOperator": "x",
+      "enterprise": "x"
+    },
+    "docs": "https://docs.meshery.io/reference/mesheryctl"
+  },
+  {
+    "theme": "",
+    "categoryOrder": "1",
+    "category": "Lifecycle Management",
+    "functionOrder": "103",
+    "function": "Environments, Deployments, & Dry-runs",
+    "feature": "Operational control of infrastructure and applications by group. Deploy to multiple Environments. Test and verify configuration changes prior to deployment.",
+    "subscription_tier": "TeamOperator",
+    "comparison_tiers": {
+      "free": "",
+      "teamDesigner": "",
+      "teamOperator": "x",
+      "enterprise": "x"
+    },
+    "docs": ""
+  },
+  {
+    "theme": "",
+    "categoryOrder": "1",
+    "category": "Lifecycle Management",
+    "functionOrder": "104",
+    "function": "Web-based Terminal",
+    "feature": "Direct terminal access to one ore more pods/containers simultaneously. Integrated experience.",
+    "subscription_tier": "TeamOperator",
+    "comparison_tiers": {
+      "free": "",
+      "teamDesigner": "",
+      "teamOperator": "x",
+      "enterprise": "x"
+    },
+    "docs": "https://docs.layer5.io/kanvas/tasks/designs/deploying-designs/"
+  },
+  {
+    "theme": "",
+    "categoryOrder": "1",
+    "category": "Lifecycle Management",
+    "functionOrder": "105",
+    "function": "Standard Metrics",
+    "feature": "Real-time resource metrics for managed workloads.",
+    "subscription_tier": "",
+    "comparison_tiers": {
+      "free": "",
+      "teamDesigner": "",
+      "teamOperator": "x",
+      "enterprise": "x"
+    },
+    "docs": "https://docs.layer5.io/kanvas/operator/operator-views/"
+  },
+  {
+    "theme": "",
+    "categoryOrder": "1",
+    "category": "Lifecycle Management",
+    "functionOrder": "107",
+    "function": "Assign Views to Workspace",
+    "feature": "Add new views to workspace",
+    "subscription_tier": "",
+    "comparison_tiers": {
+      "free": "",
+      "teamDesigner": "",
+      "teamOperator": "x",
+      "enterprise": "x"
+    },
+    "docs": ""
+  },
+  {
+    "theme": "",
+    "categoryOrder": "1",
+    "category": "Lifecycle Management",
+    "functionOrder": "108",
+    "function": "Export views",
+    "feature": "Export views to JSON format",
+    "subscription_tier": "",
+    "comparison_tiers": {
+      "free": "",
+      "teamDesigner": "",
+      "teamOperator": "x",
+      "enterprise": "x"
+    },
+    "docs": "https://docs.layer5.io/kanvas/operator/operator-views/#5-export-a-view"
+  },
+  {
+    "theme": "",
+    "categoryOrder": "1",
+    "category": "Lifecycle Management",
+    "functionOrder": "109",
+    "function": "Share Views",
+    "feature": "Share views with anyone within your organization, and make your design easily accessible to all relevant team members.",
+    "subscription_tier": "",
+    "comparison_tiers": {
+      "free": "",
+      "teamDesigner": "",
+      "teamOperator": "x",
+      "enterprise": "x"
+    },
+    "docs": "https://docs.layer5.io/kanvas/operator/operator-views/#3-share-a-view"
+  },
+  {
+    "theme": "",
+    "categoryOrder": "1",
+    "category": "Lifecycle Management",
+    "functionOrder": "110",
+    "function": "Stream Container Logs",
+    "feature": "Stream and search logs from one or more pod/container simultaneously to observe application behavior and identify issues in real time.",
+    "subscription_tier": "TeamOperator",
+    "comparison_tiers": {
+      "free": "",
+      "teamDesigner": "",
+      "teamOperator": "x",
+      "enterprise": "x"
+    },
+    "docs": ""
+  },
+  {
+    "theme": "",
+    "categoryOrder": "1",
+    "category": "Lifecycle Management",
+    "functionOrder": "112",
+    "function": "Multiple Kubernetes Clusters",
+    "feature": "Management and ongoing synchronization of cloud native infrastructure across any number of Clouds and Kubernetes clusters.",
+    "subscription_tier": "TeamOperator",
+    "comparison_tiers": {
+      "free": "",
+      "teamDesigner": "",
+      "teamOperator": "x",
+      "enterprise": "x"
+    },
+    "docs": ""
+  },
+  {
+    "theme": "",
+    "categoryOrder": "1",
+    "category": "Lifecycle Management",
+    "functionOrder": "113",
+    "function": "Multi-Cloud Integration",
+    "feature": "Management and ongoing synchronization of AWS and GCP services, workloads and changes across any number of accounts.",
+    "subscription_tier": "TeamOperator",
+    "comparison_tiers": {
+      "free": "",
+      "teamDesigner": "",
+      "teamOperator": "x",
+      "enterprise": "x"
+    },
+    "docs": ""
+  },
+  {
+    "theme": "",
+    "categoryOrder": "",
+    "category": "",
+    "functionOrder": "",
+    "function": "",
+    "feature": "",
+    "subscription_tier": "",
+    "comparison_tiers": {
+      "free": "",
+      "teamDesigner": "",
+      "teamOperator": "",
+      "enterprise": ""
+    },
+    "docs": ""
+  },
+  {
+    "theme": "",
+    "categoryOrder": "1",
+    "category": "Lifecycle Management",
+    "functionOrder": "115",
+    "function": "Orchestration: Provisioning / Deprovisioning",
+    "feature": "Provision and deprovision cloud native infrastructure using your designs.",
+    "subscription_tier": "",
+    "comparison_tiers": {
+      "free": "",
+      "teamDesigner": "",
+      "teamOperator": "x",
+      "enterprise": "x"
+    },
+    "docs": "https://docs.layer5.io/kanvas/tasks/designs/undeploying-designs/"
+  },
+  {
+    "theme": "",
+    "categoryOrder": "",
+    "category": "",
+    "functionOrder": "",
+    "function": "",
+    "feature": "",
+    "subscription_tier": "",
+    "comparison_tiers": {
+      "free": "",
+      "teamDesigner": "",
+      "teamOperator": "",
+      "enterprise": ""
+    },
+    "docs": ""
+  },
+  {
+    "theme": "",
+    "categoryOrder": "2",
+    "category": "Kanvas",
+    "functionOrder": "201",
+    "function": "Whiteboarding",
+    "feature": "Pencil for freeform drawing of any shapes",
+    "subscription_tier": "Free",
+    "comparison_tiers": {
+      "free": "x",
+      "teamDesigner": "x",
+      "teamOperator": "x",
+      "enterprise": "x"
+    },
+    "docs": "https://docs.layer5.io/kanvas/designer/whiteboarding/"
+  },
+  {
+    "theme": "",
+    "categoryOrder": "2",
+    "category": "Kanvas",
+    "functionOrder": "202",
+    "function": "500 Built-in Shapes, Pen and Pencil",
+    "feature": "Draw shapes, lines, text, customize style, drag and drop images and text files to represent the components and relationships of between your infrastructure components.",
+    "subscription_tier": "",
+    "comparison_tiers": {
+      "free": "x",
+      "teamDesigner": "x",
+      "teamOperator": "x",
+      "enterprise": "x"
+    },
+    "docs": ""
+  },
+  {
+    "theme": "",
+    "categoryOrder": "2",
+    "category": "Kanvas",
+    "functionOrder": "203",
+    "function": "Layers",
+    "feature": "Use layers to show, hide, and group objects on the same board—perfect for building detailed diagrams or revealing project phases.",
+    "subscription_tier": "",
+    "comparison_tiers": {
+      "free": "x",
+      "teamDesigner": "x",
+      "teamOperator": "x",
+      "enterprise": "x"
+    },
+    "docs": ""
+  },
+  {
+    "theme": "",
+    "categoryOrder": "",
+    "category": "",
+    "functionOrder": "",
+    "function": "",
+    "feature": "",
+    "subscription_tier": "",
+    "comparison_tiers": {
+      "free": "",
+      "teamDesigner": "",
+      "teamOperator": "",
+      "enterprise": ""
+    },
+    "docs": ""
+  },
+  {
+    "theme": "",
+    "categoryOrder": "3",
+    "category": "Performance Management",
+    "functionOrder": "301",
+    "function": "Load Generation and Performance Testing",
+    "feature": "Continuous visibility across all of your clusters and workloads. Single or multiple results in standardized format.",
+    "subscription_tier": "Free",
+    "comparison_tiers": {
+      "free": "x",
+      "teamDesigner": "x",
+      "teamOperator": "x",
+      "enterprise": "x"
+    },
+    "docs": "https://docs.meshery.io/guides/performance-management/performance-management"
+  },
+  {
+    "theme": "",
+    "categoryOrder": "3",
+    "category": "Performance Management",
+    "functionOrder": "302",
+    "function": "Performance Profiles",
+    "feature": "Define, name, and save performance profiles. Share performance profiles and test results with individual users or teams.",
+    "subscription_tier": "TeamOperator",
+    "comparison_tiers": {
+      "free": "",
+      "teamDesigner": "",
+      "teamOperator": "x",
+      "enterprise": "x"
+    },
+    "docs": ""
+  },
+  {
+    "theme": "",
+    "categoryOrder": "3",
+    "category": "Performance Management",
+    "functionOrder": "303",
+    "function": "Comparative Testing",
+    "feature": "Visual comparison of performance test results.",
+    "subscription_tier": "",
+    "comparison_tiers": {
+      "free": "",
+      "teamDesigner": "",
+      "teamOperator": "x",
+      "enterprise": "x"
+    },
+    "docs": ""
+  },
+  {
+    "theme": "",
+    "categoryOrder": "3",
+    "category": "Performance Management",
+    "functionOrder": "304",
+    "function": "Capacity, soak, and burst testing",
+    "feature": "Protocols: HTTP, HTTPS, TCP, gRPC with configuration duration, concurrency",
+    "subscription_tier": "",
+    "comparison_tiers": {
+      "free": "",
+      "teamDesigner": "",
+      "teamOperator": "x",
+      "enterprise": "x"
+    },
+    "docs": ""
+  },
+  {
+    "theme": "",
+    "categoryOrder": "",
+    "category": "",
+    "functionOrder": "",
+    "function": "",
+    "feature": "",
+    "subscription_tier": "",
+    "comparison_tiers": {
+      "free": "",
+      "teamDesigner": "",
+      "teamOperator": "",
+      "enterprise": ""
+    },
+    "docs": ""
+  },
+  {
+    "theme": "",
+    "categoryOrder": "4",
+    "category": "Collaboration",
+    "functionOrder": "401",
+    "function": "Team Design Review",
+    "feature": "Multiple users to simultaneously edit a document, leave comments directly on specific text sections, and track changes made by others, enabling efficient collaboration and feedback loops during the review process.",
+    "subscription_tier": "TeamDesigner",
+    "comparison_tiers": {
+      "free": "",
+      "teamDesigner": "x",
+      "teamOperator": "",
+      "enterprise": "x"
+    },
+    "docs": "https://docs.layer5.io/kanvas/designer/comments/"
+  },
+  {
+    "theme": "",
+    "categoryOrder": "4",
+    "category": "Collaboration",
+    "functionOrder": "402",
+    "function": "Collaborative Infrastructure Design",
+    "feature": "Create and collaborate in online designs in real-time.",
+    "subscription_tier": "TeamDesigner",
+    "comparison_tiers": {
+      "free": "",
+      "teamDesigner": "x",
+      "teamOperator": "",
+      "enterprise": "x"
+    },
+    "docs": ""
+  },
+  {
+    "theme": "",
+    "categoryOrder": "4",
+    "category": "Collaboration",
+    "functionOrder": "403",
+    "function": "Public and Private Designs",
+    "feature": "Invite any user to collaborate on your public or private designs.",
+    "subscription_tier": "TeamDesigner",
+    "comparison_tiers": {
+      "free": "",
+      "teamDesigner": "x",
+      "teamOperator": "",
+      "enterprise": "x"
+    },
+    "docs": ""
+  },
+  {
+    "theme": "",
+    "categoryOrder": "4",
+    "category": "Collaboration",
+    "functionOrder": "404",
+    "function": "Collaborative Infrastructure Views",
+    "feature": "Simultaneously manage your infrastructure using shared views in real-time. See the status of your deployments, monitor performance, and troubleshoot issues. Views provide tools for interacting with your cluster, such as terminal access and log streaming.",
+    "subscription_tier": "TeamOperator",
+    "comparison_tiers": {
+      "free": "",
+      "teamDesigner": "",
+      "teamOperator": "x",
+      "enterprise": "x"
+    },
+    "docs": ""
+  },
+  {
+    "theme": "",
+    "categoryOrder": "4",
+    "category": "Collaboration",
+    "functionOrder": "405",
+    "function": "Public and Private Views",
+    "feature": "Invite any user to collaborate on your public or private views.",
+    "subscription_tier": "TeamOperator",
+    "comparison_tiers": {
+      "free": "",
+      "teamDesigner": "",
+      "teamOperator": "x",
+      "enterprise": "x"
+    },
+    "docs": "https://docs.layer5.io/kanvas/operator/operator-views/"
+  },
+  {
+    "theme": "",
+    "categoryOrder": "",
+    "category": "",
+    "functionOrder": "",
+    "function": "",
+    "feature": "",
+    "subscription_tier": "",
+    "comparison_tiers": {
+      "free": "",
+      "teamDesigner": "",
+      "teamOperator": "",
+      "enterprise": ""
+    },
+    "docs": ""
+  },
+  {
+    "theme": "",
+    "categoryOrder": "",
+    "category": "",
+    "functionOrder": "",
+    "function": "",
+    "feature": "",
+    "subscription_tier": "",
+    "comparison_tiers": {
+      "free": "",
+      "teamDesigner": "",
+      "teamOperator": "",
+      "enterprise": ""
+    },
+    "docs": ""
+  },
+  {
+    "theme": "",
+    "categoryOrder": "5",
+    "category": "Identity & Access Management",
+    "functionOrder": "501",
+    "function": "Built-in Roles",
+    "feature": "Predefined user roles: Organization Admin, Team Admin, Workspace Admin",
+    "subscription_tier": "Free",
+    "comparison_tiers": {
+      "free": "x",
+      "teamDesigner": "x",
+      "teamOperator": "x",
+      "enterprise": "x"
+    },
+    "docs": "https://docs.layer5.io/cloud/security/roles/"
+  },
+  {
+    "theme": "",
+    "categoryOrder": "5",
+    "category": "Identity & Access Management",
+    "functionOrder": "502",
+    "function": "Identity through OAuth",
+    "feature": "Use third-party identity providers, Google and GitHub, to manage the identities of your organization's members.",
+    "subscription_tier": "",
+    "comparison_tiers": {
+      "free": "x",
+      "teamDesigner": "x",
+      "teamOperator": "x",
+      "enterprise": "x"
+    },
+    "docs": ""
+  },
+  {
+    "theme": "",
+    "categoryOrder": "5",
+    "category": "Identity & Access Management",
+    "functionOrder": "503",
+    "function": "Teams",
+    "feature": "Establish new team for organizing groups of users and resource access. Single organization, multiple teams.",
+    "subscription_tier": "TeamDesigner|TeamOperator",
+    "comparison_tiers": {
+      "free": "",
+      "teamDesigner": "x",
+      "teamOperator": "x",
+      "enterprise": "x"
+    },
+    "docs": "https://docs.layer5.io/cloud/identity/teams/"
+  },
+  {
+    "theme": "",
+    "categoryOrder": "5",
+    "category": "Identity & Access Management",
+    "functionOrder": "504",
+    "function": "Custom Roles",
+    "feature": "Assign User Roles, Assign Keychains to Roles",
+    "subscription_tier": "Enterprise",
+    "comparison_tiers": {
+      "free": "",
+      "teamDesigner": "",
+      "teamOperator": "x",
+      "enterprise": "x"
+    },
+    "docs": "https://docs.layer5.io/cloud/security/roles/"
+  },
+  {
+    "theme": "",
+    "categoryOrder": "5",
+    "category": "Identity & Access Management",
+    "functionOrder": "508",
+    "function": "Cloud as an IDP",
+    "feature": "Own and control the user accounts of your enterprise members with Layer5 Cloud your identity provider (IdP).",
+    "subscription_tier": "",
+    "comparison_tiers": {
+      "free": "",
+      "teamDesigner": "",
+      "teamOperator": "",
+      "enterprise": "x"
+    },
+    "docs": ""
+  },
+  {
+    "theme": "",
+    "categoryOrder": "5",
+    "category": "Identity & Access Management",
+    "functionOrder": "509",
+    "function": "Organizations",
+    "feature": "Particpate as a member of multiple organizations each with their own accounting and billing structure. Multiple organizations, multiple teams.",
+    "subscription_tier": "Enterprise",
+    "comparison_tiers": {
+      "free": "",
+      "teamDesigner": "",
+      "teamOperator": "",
+      "enterprise": "x"
+    },
+    "docs": "https://docs.layer5.io/cloud/identity/organizations/"
+  },
+  {
+    "theme": "",
+    "categoryOrder": "",
+    "category": "",
+    "functionOrder": "",
+    "function": "",
+    "feature": "",
+    "subscription_tier": "",
+    "comparison_tiers": {
+      "free": "",
+      "teamDesigner": "",
+      "teamOperator": "",
+      "enterprise": ""
+    },
+    "docs": ""
+  },
+  {
+    "theme": "",
+    "categoryOrder": "6",
+    "category": "Workspaces",
+    "functionOrder": "601",
+    "function": "My Workspace",
+    "feature": "My Workspace is your always available, primary space for storing designs, views, and models that you own.",
+    "subscription_tier": "Free",
+    "comparison_tiers": {
+      "free": "x",
+      "teamDesigner": "x",
+      "teamOperator": "x",
+      "enterprise": "x"
+    },
+    "docs": ""
+  },
+  {
+    "theme": "",
+    "categoryOrder": "6",
+    "category": "Workspaces",
+    "functionOrder": "605",
+    "function": "Manage Workspace Team and Environment Access",
+    "feature": "Assign designs, views, users, and environments to shared workspaces.",
+    "subscription_tier": "",
+    "comparison_tiers": {
+      "free": "",
+      "teamDesigner": "x",
+      "teamOperator": "x",
+      "enterprise": "x"
+    },
+    "docs": ""
+  },
+  {
+    "theme": "",
+    "categoryOrder": "6",
+    "category": "Workspaces",
+    "functionOrder": "602",
+    "function": "Shared Workspaces",
+    "feature": "Shared Workspaces are collaborative spaces that you can use to store and collaborate on files within and between teams. Easily share files with customizable permissions (edit, comment, view). Create up to 10 shared workspaces per organization.",
+    "subscription_tier": "TeamDesigner|TeamOperator",
+    "comparison_tiers": {
+      "free": "",
+      "teamDesigner": "x",
+      "teamOperator": "x",
+      "enterprise": "x"
+    },
+    "docs": ""
+  },
+  {
+    "theme": "",
+    "categoryOrder": "6",
+    "category": "Workspaces",
+    "functionOrder": "603",
+    "function": "GitOps Snapshots",
+    "feature": "Visual insights in your pull requests in GitHub. Verify your workload designs and Kubernetes cluster configurations prior to accepting and merging pull requests.",
+    "subscription_tier": "TeamDesigner",
+    "comparison_tiers": {
+      "free": "",
+      "teamDesigner": "x",
+      "teamOperator": "",
+      "enterprise": "x"
+    },
+    "docs": "https://docs.layer5.io/cloud/tutorials/gitops-snapshots/"
+  },
+  {
+    "theme": "",
+    "categoryOrder": "6",
+    "category": "Workspaces",
+    "functionOrder": "604",
+    "function": "GitOps Integrations",
+    "feature": "Initiate deployment with creation of pull request, ArgoEvents, Flux sync, or webhook.",
+    "subscription_tier": "Enterprise",
+    "comparison_tiers": {
+      "free": "",
+      "teamDesigner": "",
+      "teamOperator": "",
+      "enterprise": "x"
+    },
+    "docs": ""
+  },
+  {
+    "theme": "",
+    "categoryOrder": "",
+    "category": "",
+    "functionOrder": "",
+    "function": "",
+    "feature": "",
+    "subscription_tier": "",
+    "comparison_tiers": {
+      "free": "",
+      "teamDesigner": "",
+      "teamOperator": "",
+      "enterprise": ""
+    },
+    "docs": ""
+  },
+  {
+    "theme": "",
+    "categoryOrder": "7",
+    "category": "Catalog",
+    "functionOrder": "701",
+    "function": "Public Catalog: 400 Cloud Native Patterns",
+    "feature": "A library of pre-built design patterns and operational templates for common deployment scenarios, simplifying the configuration process and ensuring best practices.",
+    "subscription_tier": "Free",
+    "comparison_tiers": {
+      "free": "x",
+      "teamDesigner": "x",
+      "teamOperator": "x",
+      "enterprise": "x"
+    },
+    "docs": "https://cloud.layer5.io/catalog"
+  },
+  {
+    "theme": "",
+    "categoryOrder": "7",
+    "category": "Catalog",
+    "functionOrder": "702",
+    "function": "Organization Private Catalog",
+    "feature": "Privately publish and share reusable design patterns and operational templates within your organization.",
+    "subscription_tier": "Enterprise",
+    "comparison_tiers": {
+      "free": "",
+      "teamDesigner": "",
+      "teamOperator": "",
+      "enterprise": "x"
+    },
+    "docs": "https://docs.layer5.io/cloud/catalog/"
+  },
+  {
+    "theme": "",
+    "categoryOrder": "7",
+    "category": "Catalog",
+    "functionOrder": "703",
+    "function": "Share Design",
+    "feature": "Share design with anyone within your organization, and make your design easily accessible to all relevant team members.",
+    "subscription_tier": "",
+    "comparison_tiers": {
+      "free": "x",
+      "teamDesigner": "x",
+      "teamOperator": "",
+      "enterprise": "x"
+    },
+    "docs": "https://docs.layer5.io/kanvas/designer/share-resource/"
+  },
+  {
+    "theme": "",
+    "categoryOrder": "7",
+    "category": "Catalog",
+    "functionOrder": "704",
+    "function": "Clone Design",
+    "feature": "Clone any published design to customise it according to your use cases",
+    "subscription_tier": "",
+    "comparison_tiers": {
+      "free": "x",
+      "teamDesigner": "x",
+      "teamOperator": "",
+      "enterprise": "x"
+    },
+    "docs": "https://docs.layer5.io/kanvas/tasks/designs/cloning-a-design/"
+  },
+  {
+    "theme": "",
+    "categoryOrder": "7",
+    "category": "Catalog",
+    "functionOrder": "707",
+    "function": "View Filters",
+    "feature": "View all public and published filters of other team members and private of signed-in user",
+    "subscription_tier": "",
+    "comparison_tiers": {
+      "free": "",
+      "teamDesigner": "",
+      "teamOperator": "",
+      "enterprise": ""
+    },
+    "docs": ""
+  },
+  {
+    "theme": "",
+    "categoryOrder": "7",
+    "category": "Catalog",
+    "functionOrder": "708",
+    "function": "Approve Catalog Request",
+    "feature": "Change management for the curation of content published in the catalog.",
+    "subscription_tier": "Enterprise",
+    "comparison_tiers": {
+      "free": "",
+      "teamDesigner": "",
+      "teamOperator": "",
+      "enterprise": "x"
+    },
+    "docs": "https://docs.layer5.io/cloud/catalog/"
+  },
+  {
+    "theme": "",
+    "categoryOrder": "",
+    "category": "",
+    "functionOrder": "",
+    "function": "",
+    "feature": "",
+    "subscription_tier": "",
+    "comparison_tiers": {
+      "free": "",
+      "teamDesigner": "",
+      "teamOperator": "",
+      "enterprise": ""
+    },
+    "docs": ""
+  },
+  {
+    "theme": "",
+    "categoryOrder": "8",
+    "category": "Security",
+    "functionOrder": "802",
+    "function": "Event Audit Trail",
+    "feature": "Detailed accounting of user activity. Historical record or each action taken.",
+    "subscription_tier": "Enterprise",
+    "comparison_tiers": {
+      "free": "",
+      "teamDesigner": "",
+      "teamOperator": "",
+      "enterprise": "x"
+    },
+    "docs": "https://docs.layer5.io/cloud/security/"
+  },
+  {
+    "theme": "",
+    "categoryOrder": "8",
+    "category": "Security",
+    "functionOrder": "803",
+    "function": "Customizable Permissions: Keys, Keychains and Roles",
+    "feature": "Highly flexible permissioning. Organize keys into custom keychains and assign to existing or custom roles that you define.",
+    "subscription_tier": "Enterprise",
+    "comparison_tiers": {
+      "free": "",
+      "teamDesigner": "",
+      "teamOperator": "",
+      "enterprise": "x"
+    },
+    "docs": "https://docs.layer5.io/cloud/security/"
+  },
+  {
+    "theme": "",
+    "categoryOrder": "8",
+    "category": "Security",
+    "functionOrder": "805",
+    "function": "User Session and API Token Oversight",
+    "feature": "Expiring and non-expiring API tokens. Visibility into active and expired user sessions.",
+    "subscription_tier": "Enterprise",
+    "comparison_tiers": {
+      "free": "",
+      "teamDesigner": "",
+      "teamOperator": "",
+      "enterprise": "x"
+    },
+    "docs": "https://docs.layer5.io/cloud/security/tokens/"
+  },
+  {
+    "theme": "",
+    "categoryOrder": "",
+    "category": "",
+    "functionOrder": "",
+    "function": "",
+    "feature": "",
+    "subscription_tier": "",
+    "comparison_tiers": {
+      "free": "",
+      "teamDesigner": "",
+      "teamOperator": "",
+      "enterprise": ""
+    },
+    "docs": ""
+  },
+  {
+    "theme": "",
+    "categoryOrder": "9",
+    "category": "Managed Service Provider",
+    "functionOrder": "902",
+    "function": "Public Profiles for Users",
+    "feature": "See public user profile details, public activities and public resources.",
+    "subscription_tier": "",
+    "comparison_tiers": {
+      "free": "",
+      "teamDesigner": "",
+      "teamOperator": "",
+      "enterprise": "x"
+    },
+    "docs": ""
+  },
+  {
+    "theme": "",
+    "categoryOrder": "9",
+    "category": "Managed Service Provider",
+    "functionOrder": "903",
+    "function": "Recognition Program Badges",
+    "feature": "Badges are visual indicators of achievements or milestones that users can earn in order to recognizing activity milestones, encouraging positive behavior, mark progress, and gamifying platform experience.",
+    "subscription_tier": "",
+    "comparison_tiers": {
+      "free": "",
+      "teamDesigner": "",
+      "teamOperator": "",
+      "enterprise": "x"
+    },
+    "docs": ""
+  },
+  {
+    "theme": "",
+    "categoryOrder": "9",
+    "category": "Managed Service Provider",
+    "functionOrder": "904",
+    "function": "Self-service User Accounts",
+    "feature": "New user sign-up verification. Self-service password recovery.",
+    "subscription_tier": "",
+    "comparison_tiers": {
+      "free": "",
+      "teamDesigner": "",
+      "teamOperator": "",
+      "enterprise": "x"
+    },
+    "docs": "https://docs.layer5.io/cloud/getting-started/getting-started-with-layer5-account/#7-viewing-your-layer5-profile"
+  },
+  {
+    "theme": "",
+    "categoryOrder": "10",
+    "category": "Support and Deployment",
+    "functionOrder": "1001",
+    "function": "Community Support",
+    "feature": "Get help with most of your questions and issues in our Community Forum.",
+    "subscription_tier": "Free",
+    "comparison_tiers": {
+      "free": "x",
+      "teamDesigner": "x",
+      "teamOperator": "x",
+      "enterprise": "x"
+    },
+    "docs": ""
+  },
+  {
+    "theme": "",
+    "categoryOrder": "10",
+    "category": "Support and Deployment",
+    "functionOrder": "1002",
+    "function": "Standard Support",
+    "feature": "Layer5 Support can help you troubleshoot issues you run into. Get support via email.",
+    "subscription_tier": "TeamDesigner|TeamOperator",
+    "comparison_tiers": {
+      "free": "",
+      "teamDesigner": "x",
+      "teamOperator": "x",
+      "enterprise": "x"
+    },
+    "docs": ""
+  },
+  {
+    "theme": "",
+    "categoryOrder": "10",
+    "category": "Support and Deployment",
+    "functionOrder": "1003",
+    "function": "Managed Service Provider",
+    "feature": "White Label: Customize the appearance and branding of your engineering platform powered by Layer5 Cloud. \n<br /><br />Multi-tenancy: Hierarchical organizations, teams, users and customizable permissioning.",
+    "subscription_tier": "Enterprise",
+    "comparison_tiers": {
+      "free": "",
+      "teamDesigner": "",
+      "teamOperator": "",
+      "enterprise": "x"
+    },
+    "docs": ""
+  },
+  {
+    "theme": "",
+    "categoryOrder": "10",
+    "category": "Support and Deployment",
+    "functionOrder": "1004",
+    "function": "Premium Support",
+    "feature": "With Premium, get a 2-hour SLA and 24/7 web and phone support.",
+    "subscription_tier": "Enterprise",
+    "comparison_tiers": {
+      "free": "",
+      "teamDesigner": "",
+      "teamOperator": "",
+      "enterprise": "x"
+    },
+    "docs": ""
+  },
+  {
+    "theme": "",
+    "categoryOrder": "",
+    "category": "",
+    "functionOrder": "",
+    "function": "",
+    "feature": "",
+    "subscription_tier": "",
+    "comparison_tiers": {
+      "free": "",
+      "teamDesigner": "",
+      "teamOperator": "",
+      "enterprise": ""
+    },
+    "docs": ""
+  },
+  {
+    "theme": "",
+    "categoryOrder": "",
+    "category": "",
+    "functionOrder": "",
+    "function": "",
+    "feature": "",
+    "subscription_tier": "",
+    "comparison_tiers": {
+      "free": "",
+      "teamDesigner": "",
+      "teamOperator": "",
+      "enterprise": ""
+    },
+    "docs": ""
+  }
+]
\ No newline at end of file
diff --git a/src/sections/Pricing/generateDetails.js b/src/sections/Pricing/generateDetails.js
new file mode 100644
index 000000000000..498fec33f2d9
--- /dev/null
+++ b/src/sections/Pricing/generateDetails.js
@@ -0,0 +1,101 @@
+import React from "react";
+import { GiCheckMark } from "@react-icons/all-files/gi/GiCheckMark";
+import { MdClose } from "@react-icons/all-files/md/MdClose";
+import featureData from "./feature_data.json";
+import Configuration from "./icons/configuration.svg";
+import Lifecycle from "./icons/lifecycle.svg";
+import Kanvas from "./icons/kanvas-icon.svg";
+import Perforamance from "./icons/perf.svg";
+import Collab from "./icons/collaboration.svg";
+import Spaces from "./icons/spaces.svg";
+import Identity from "./icons/identity.svg";
+// import Notification from "./icons/notification.svg";
+import Support from "./icons/support.svg";
+import Catalog from "./icons/catalog.svg";
+import Security from "./icons/security.svg";
+import Docs from "./icons/docs.js";
+
+function generateDetails(data) {
+  const categories = [
+    { id: 0, name: "Configuration Management", icon: Configuration },
+    { id: 1, name: "Lifecycle Management", icon: Lifecycle },
+    { id: 2, name: "Kanvas", icon: Kanvas },
+    { id: 3, name: "Performance Management", icon: Perforamance },
+    { id: 4, name: "Collaboration", icon: Collab },
+    { id: 5, name: "Identity & Access Management", icon: Identity },
+    { id: 6, name: "Workspaces", icon: Spaces },
+    // { id: 6, name: "Incident Management", icon: Notification },
+    { id: 7, name: "Catalog", icon: Catalog },
+    { id: 8, name: "Security", icon: Security },
+    { id: 9, name: "Managed Service Provider", icon: Support },
+    { id: 10, name: "Support and Deployment", icon: Support },
+    // { id: 11, name: "Support and Deployment", icon: Support },
+  ];
+
+  return categories.map(category => {
+    const features = data
+      .filter(
+        item =>
+          item.category === category.name)
+      .map(item => {
+        const featureName = item.function;
+        const description = item.feature;
+        const documentedLink = item.docs;
+        const featureWithLink = documentedLink ? (
+          <div className="feature-link-container">
+            <span className="feature-name">{featureName}{" "}</span>
+            <a
+              href={documentedLink}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="feature-link"
+            >
+              <Docs className="docs"/>
+            </a>
+          </div>
+        ) : (
+          featureName
+        );
+
+        return {
+          feature: featureWithLink,
+          description,
+          free:
+            item.comparison_tiers.free === "X" || item.comparison_tiers.free === "x" ? (
+              <GiCheckMark className="yes-icon" />
+            ) : (
+              <MdClose className="no-icon" />
+            ),
+          teamDesigner:
+            item.comparison_tiers.teamDesigner === "X" || item.comparison_tiers.teamDesigner === "x" ? (
+              <GiCheckMark className = "yes-icon" />
+            ) : (
+              <MdClose className="no-icon" />
+            ),
+          teamOperator:
+            item.comparison_tiers.teamOperator === "X" || item.comparison_tiers.teamOperator === "x" ? (
+              <GiCheckMark className="yes-icon" />
+            ) : (
+              <MdClose className="no-icon" />
+            ),
+          enterprise:
+          item.comparison_tiers.enterprise === "X" || item.comparison_tiers.enterprise === "x" ? (
+            <GiCheckMark className="yes-icon" />
+          ) : (
+            <MdClose className="no-icon" />
+          ),
+        };
+      });
+
+    return {
+      id: category.id,
+      category: category.name,
+      icon: category.icon,
+      features: features,
+    };
+  });
+}
+
+const details = generateDetails(featureData);
+
+export default details;
\ No newline at end of file
diff --git a/src/sections/Pricing/generatePlans.js b/src/sections/Pricing/generatePlans.js
new file mode 100644
index 000000000000..a819f58e67fa
--- /dev/null
+++ b/src/sections/Pricing/generatePlans.js
@@ -0,0 +1,86 @@
+import featureData from "./feature_data.json";
+import comingSoon from "./icons/coming-soon.webp";
+import React from "react";
+
+function generatePlans(data) {
+
+  const tiers = {
+    "Free": {
+      tier: "Personal",
+      featured: false,
+      monthlyprice: 0,
+      yearlyprice: 0,
+      byline: "The basics for individuals and organizations",
+      byline2: " Everything from Open Source, plus...",
+      button: ["Join for Free", "https://cloud.layer5.io"]
+    },
+    "TeamDesigner": {
+      tier: "Team Designer",
+      featured: true,
+      monthlyprice: 8,
+      yearlyprice: 68,
+      byline: "Advanced collaboration for declarative DevOps",
+      byline2: "← Everything included in Free, plus...",
+      button: ["Start Free Trial", "https://cloud.layer5.io"],
+    },
+    "TeamOperator": {
+      tier: "Team Operator",
+      featured: false,
+      monthlyprice: 8,
+      yearlyprice: 68,
+      // pricing_coming_soon: <img src={comingSoon} alt="Coming Soon" />,
+      byline: "Advanced collaboration for imperative DevOps",
+      byline2: "← Everything included in Free, plus...",
+      button: ["Start Free Trial", "https://cloud.layer5.io"],
+    },
+    "Enterprise": {
+      tier: "Enterprise",
+      featured: false,
+      monthlyprice: 22,
+      yearlyprice: 248,
+      pricing_coming_soon: <img src={comingSoon} alt="Coming Soon" />,
+      byline: "Flexible deployment, and MSP multi-tenancy.",
+      byline2: "← Everything included in Team, plus...",
+      button: ["Contact Sales", "https://us15.list-manage.com/contact-form?u=6b50be5aea3dfe1fd4c041d80&form_id=d0ffe17c92d8014ede6b721aa16096e8"],
+    },
+  };
+
+  const plans = Object.entries(tiers).map(([tierName, tierInfo]) => {
+
+    const summary = data
+      .flatMap((item) => {
+        const tiers = item.subscription_tier.split("|");
+        return tiers.map((tier) => ({
+          ...item,
+          subscription_tier: tier.trim()
+        }));
+      })
+      .filter((item) => {
+        const matches =
+          item.subscription_tier === tierName; //&& !item.exclude === "x";
+        return matches;
+      })
+      .map((item, index) => {
+        const mappedItem = {
+          id: index,
+          categoryOrder: item.categoryOrder,
+          category: item.function,
+          functionOrder: item.functionOrder,
+          description: item.feature,
+          tier: item.subscription_tier,
+        };
+
+        return mappedItem;
+      })
+      .sort((a, b) => a.categoryOrder - b.categoryOrder || a.functionOrder - b.functionOrder);
+    return {
+      ...tierInfo,
+      summary: summary.length > 0 ? summary : [],
+    };
+  });
+  return plans;
+}
+
+const plans = generatePlans(featureData);
+
+export default plans;
diff --git a/src/sections/Pricing/icons/catalog.svg b/src/sections/Pricing/icons/catalog.svg
new file mode 100644
index 000000000000..6f073f051a58
--- /dev/null
+++ b/src/sections/Pricing/icons/catalog.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="18" viewBox="0 0 18 16" width="18"><g clip-path="url(#clip0_12369_35348)"><path d="M9.00867 16C6.48449 16 3.96031 16 1.43613 16C0.76592 16 0.261084 15.6472 0.0695947 15.0474C0.0260744 14.8975 -3.77779e-05 14.7299 -3.77779e-05 14.5711C-3.77779e-05 12.0309 -0.00874184 9.48181 -3.77779e-05 6.94157C-3.77779e-05 6.72988 0.0347785 6.51819 0.0957069 6.31533C0.731103 4.33958 1.3665 2.37266 2.0019 0.405733C2.12375 0.0352812 2.17598 0 2.56766 0C6.81524 0 11.0628 0 15.3191 0C15.7021 0 15.7543 0.0352812 15.8675 0.388093C16.468 2.18743 17.0599 3.99559 17.6605 5.79493C17.7127 5.95369 17.7998 6.10364 17.852 6.2624C17.9129 6.47409 18 6.68578 18 6.89746C18.0087 9.47299 18.0087 12.0573 18 14.6329C18 15.3914 17.3907 15.9912 16.6247 15.9912C14.0831 16 11.5503 16 9.00867 16ZM11.5851 5.50386C13.3433 5.50386 15.0928 5.50386 16.8597 5.50386C16.8423 5.42448 16.8336 5.38038 16.8162 5.32745C16.3201 3.828 15.8239 2.33738 15.3365 0.837927C15.2843 0.670342 15.1798 0.652701 15.0406 0.652701C10.9758 0.652701 6.90228 0.652701 2.83749 0.652701C2.6634 0.652701 2.58507 0.714443 2.53284 0.882029C2.06282 2.36384 1.5841 3.84564 1.10538 5.31863C1.08797 5.38037 1.07056 5.44212 1.05315 5.51268C2.85489 5.51268 4.63923 5.51268 6.41486 5.51268C6.5019 6.19184 6.69339 6.36825 7.3636 6.36825C8.46031 6.36825 9.55702 6.36825 10.645 6.36825C11.2978 6.37707 11.5154 6.19184 11.5851 5.50386ZM6.53671 11.1665C6.59764 10.946 6.65857 10.7431 6.71079 10.5402C6.81524 10.1345 6.61505 9.75524 6.24948 9.64939C5.8665 9.54355 5.50963 9.74642 5.38778 10.1522C5.23981 10.6461 5.09184 11.1488 4.95257 11.6516C4.81331 12.1544 5.12665 12.5689 5.64019 12.5689C7.95547 12.5689 10.2621 12.5689 12.5773 12.5689C13.0299 12.5689 13.3694 12.1632 13.2475 11.7222C13.0822 11.1488 12.8907 10.5932 12.6905 10.0287C12.586 9.7376 12.3162 9.60529 12.0116 9.62293C11.733 9.64057 11.4806 9.8258 11.4197 10.0992C11.3849 10.2668 11.411 10.4432 11.4371 10.6196C11.4719 10.8049 11.5415 10.9724 11.6112 11.1665C9.89648 11.1665 8.234 11.1665 6.53671 11.1665Z" fill="#51636B"></path><path d="M8.93926 4.13678C11.0108 4.13678 13.0911 4.13678 15.1627 4.13678C15.2584 4.13678 15.389 4.13678 15.4499 4.1897C15.5282 4.26909 15.6066 4.41021 15.5979 4.51605C15.5892 4.69246 15.4499 4.78066 15.2845 4.78066C14.9451 4.78948 14.6056 4.78066 14.2661 4.78066C10.419 4.78066 6.58046 4.78066 2.73327 4.78066C2.68975 4.78066 2.64623 4.78066 2.60271 4.78066C2.3677 4.77184 2.21973 4.64836 2.21973 4.44549C2.21973 4.25144 2.3677 4.11914 2.61141 4.11914C3.6559 4.11914 4.70038 4.11914 5.74487 4.11914C6.80677 4.13678 7.86866 4.13678 8.93926 4.13678Z" fill="#00B39F"></path><path d="M8.91315 2.76074C10.8455 2.76074 12.7865 2.76074 14.7188 2.76074C14.8058 2.76074 14.8928 2.76074 14.9799 2.76956C15.154 2.79602 15.2584 2.89305 15.2671 3.07827C15.2758 3.2635 15.1714 3.37816 14.9886 3.42226C14.919 3.4399 14.8406 3.43108 14.771 3.43108C10.8455 3.43108 6.92863 3.43108 3.0031 3.43108C2.91606 3.43108 2.8029 3.4399 2.75068 3.3958C2.66364 3.3076 2.55919 3.16648 2.56789 3.06945C2.5766 2.96361 2.71586 2.86659 2.82031 2.7872C2.87253 2.75192 2.97698 2.76956 3.05532 2.76956C5.01373 2.76074 6.96344 2.76074 8.91315 2.76074Z" fill="#00B39F"></path><path d="M8.91261 2.04611C7.11957 2.04611 5.33524 2.04611 3.5422 2.04611C3.48127 2.04611 3.41164 2.05493 3.35071 2.03729C3.17663 2.00201 3.06348 1.88735 3.06348 1.70212C3.06348 1.5169 3.17663 1.41105 3.35941 1.37577C3.41164 1.36695 3.47257 1.36695 3.5335 1.36695C7.11957 1.36695 10.7056 1.36695 14.2917 1.36695C14.3526 1.36695 14.4049 1.35813 14.4658 1.37577C14.6399 1.41105 14.753 1.5169 14.7617 1.70212C14.7704 1.86089 14.6312 2.01965 14.4484 2.04611C14.3875 2.05493 14.3352 2.04611 14.2743 2.04611C12.4987 2.04611 10.7056 2.04611 8.91261 2.04611Z" fill="#00B39F"></path></g><defs><clipPath id="clip0_12369_35348"><rect width="18" height="16" fill="white"></rect></clipPath></defs></svg>
\ No newline at end of file
diff --git a/src/sections/Pricing/icons/docs.js b/src/sections/Pricing/icons/docs.js
new file mode 100644
index 000000000000..01640ee2ee19
--- /dev/null
+++ b/src/sections/Pricing/icons/docs.js
@@ -0,0 +1,22 @@
+import React from "react";
+
+const docsIcon = ({
+  width = "20px",
+  height = "20px",
+  fill = "currentColor",
+  style = {}
+}) => (
+  <svg
+    width={width}
+    height={height}
+    fill={fill}
+    viewBox="0 0 256 256"
+    style={style}
+    strokeWidth="0"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M44,120H212.07a4,4,0,0,0,4-4V88a8,8,0,0,0-2.34-5.66l-56-56A8,8,0,0,0,152.05,24H56A16,16,0,0,0,40,40v76A4,4,0,0,0,44,120Zm108-76,44,44h-44ZM52,144H36a8,8,0,0,0-8,8v56a8,8,0,0,0,8,8H51.33C71,216,87.55,200.52,88,180.87A36,36,0,0,0,52,144Zm-.49,56H44V160h8a20,20,0,0,1,20,20.77C71.59,191.59,62.35,200,51.52,200Zm170.67-4.28a8.26,8.26,0,0,1-.73,11.09,30,30,0,0,1-21.4,9.19c-17.65,0-32-16.15-32-36s14.36-36,32-36a30,30,0,0,1,21.4,9.19,8.26,8.26,0,0,1,.73,11.09,8,8,0,0,1-11.9.38A14.21,14.21,0,0,0,200.06,160c-8.82,0-16,9-16,20s7.18,20,16,20a14.25,14.25,0,0,0,10.23-4.66A8,8,0,0,1,222.19,195.72ZM128,144c-17.65,0-32,16.15-32,36s14.37,36,32,36,32-16.15,32-36S145.69,144,128,144Zm0,56c-8.83,0-16-9-16-20s7.18-20,16-20,16,9,16,20S136.86,200,128,200Z"></path>
+  </svg>
+);
+
+export default docsIcon;
\ No newline at end of file
diff --git a/src/sections/Pricing/icons/security.svg b/src/sections/Pricing/icons/security.svg
new file mode 100644
index 000000000000..69a39a29f8e9
--- /dev/null
+++ b/src/sections/Pricing/icons/security.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="18" viewBox="0 0 15 19" width="18"><g><polygon fill="none;" points="7.4,9 1.6,9 1.6,9 7.4,9 13.1,9 13.1,9 	"></polygon><polygon fill="#00B39F" points="7.4,9 13.1,9 13.1,9 13.1,9 13.1,4.3 7.4,1.8 	"></polygon><path fill="#00B39F" d="M1.6,9c0.4,3.4,2.7,6.4,5.7,7.3V9H1.6z"></path><path d="M2.1,14.4C1.8,14,1.5,13.5,1.2,13C1.5,13.5,1.8,14,2.1,14.4z"></path><path d="M7.4,0L0,3.3v4.9c0,1.7,0.4,3.4,1.2,4.8c0.3,0.5,0.6,1,0.9,1.4c0.7,0.9,1.4,1.6,2.3,2.3 c0.7,0.5,1.4,0.8,2.2,1.1c0.3,0.1,0.5,0.2,0.8,0.2c0.3-0.1,0.5-0.1,0.8-0.2c0.8-0.3,1.5-0.6,2.2-1.1c0.9-0.6,1.7-1.4,2.3-2.3 c0.3-0.4,0.6-0.9,0.9-1.4c0.8-1.5,1.2-3.1,1.2-4.8V3.3L7.4,0z M13.1,9L13.1,9c-0.4,3.4-2.7,6.4-5.7,7.3c-3-0.9-5.3-3.9-5.7-7.3h0 V4.3l5.7-2.5l5.7,2.5V9z"></path></g></svg>
\ No newline at end of file
diff --git a/src/sections/Pricing/icons/spaces.svg b/src/sections/Pricing/icons/spaces.svg
new file mode 100644
index 000000000000..c7d35448ba54
--- /dev/null
+++ b/src/sections/Pricing/icons/spaces.svg
@@ -0,0 +1 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="#51636B" xmlns="http://www.w3.org/2000/svg"><path d="M2.25 1.625C1.65326 1.625 1.08097 1.88434 0.65901 2.34597C0.237053 2.8076 0 3.4337 0 4.08654L0 15.7788C0 16.2685 0.17779 16.7381 0.494257 17.0843C0.810725 17.4305 1.23995 17.625 1.6875 17.625H2.42213C3.62138 16.8045 4.25021 15.9756 3.62138 15.1635H1.125V4.08654C1.125 3.76012 1.24353 3.44707 1.4545 3.21625C1.66548 2.98544 1.95163 2.85577 2.25 2.85577H15.75C16.0484 2.85577 16.3345 2.98544 16.5455 3.21625C16.7565 3.44707 16.875 3.76012 16.875 4.08654V15.1635H3.62138C4.24463 15.9684 2.22413 16.8533 2.42213 17.625H16.3125C16.7601 17.625 17.1893 17.4305 17.5057 17.0843C17.8222 16.7381 18 16.2685 18 15.7788V4.08654C18 3.4337 17.7629 2.8076 17.341 2.34597C16.919 1.88434 16.3467 1.625 15.75 1.625H2.25Z" fill="#51636B"></path><path d="M12.1537 7.45312C12.2728 7.64612 12.3844 7.83168 12.5034 8.00241C12.5407 8.05437 12.6225 8.08406 12.6895 8.09148C12.8607 8.10633 13.0318 8.10633 13.2104 8.0989C13.27 8.0989 13.3518 8.06179 13.3816 8.01725C13.5081 7.83911 13.6197 7.65354 13.7388 7.46055C13.9397 7.5422 14.1407 7.61642 14.3267 7.7055C14.3639 7.72034 14.3937 7.80942 14.3863 7.86138C14.3565 8.03952 14.3044 8.21024 14.2746 8.38839C14.2672 8.44777 14.297 8.522 14.3342 8.56654C14.4383 8.6853 14.5723 8.77437 14.6616 8.89314C14.7509 9.01932 14.8477 9.01932 14.9742 8.98963C15.1528 8.9451 15.3388 8.90798 15.5398 8.86345C15.6291 9.08613 15.7258 9.30881 15.8225 9.53892C15.6365 9.65768 15.4653 9.76902 15.2867 9.88036C15.2049 9.93232 15.1677 9.98428 15.1751 10.0882C15.19 10.2589 15.1677 10.4371 15.1825 10.6078C15.19 10.6672 15.2272 10.7488 15.2718 10.7785C15.443 10.8973 15.6216 11.0086 15.8225 11.1348C15.7332 11.3352 15.6514 11.5431 15.5621 11.7435C15.5472 11.7732 15.4951 11.7806 15.4653 11.7954C15.4504 11.8029 15.4281 11.788 15.4132 11.788C15.1974 11.7435 14.9593 11.6321 14.7732 11.6841C14.5946 11.736 14.4532 11.9662 14.3118 12.122C14.2746 12.1591 14.2597 12.2408 14.2746 12.3002C14.3118 12.508 14.3639 12.7084 14.416 12.9311C14.1928 13.0276 13.9695 13.1167 13.7388 13.2132C13.6272 13.0424 13.5156 12.8791 13.4262 12.7084C13.3593 12.5897 13.2923 12.5377 13.1509 12.5674C13.0244 12.5897 12.8904 12.5971 12.7639 12.5748C12.6002 12.5377 12.5183 12.6045 12.4439 12.7381C12.3621 12.894 12.2504 13.0424 12.1462 13.2057C11.923 13.1167 11.6997 13.0276 11.469 12.9311C11.5137 12.7307 11.5509 12.5377 11.603 12.3447C11.6402 12.2259 11.6327 12.1443 11.5137 12.0626C11.3946 11.9736 11.2904 11.8622 11.2011 11.7435C11.1267 11.647 11.0597 11.6321 10.9481 11.6618C10.7546 11.7138 10.5537 11.7509 10.3453 11.7954C10.2485 11.5727 10.1592 11.3575 10.0625 11.12C10.2485 11.0012 10.4272 10.8824 10.6132 10.7785C10.6951 10.7266 10.7323 10.682 10.7174 10.5707C10.6951 10.4148 10.7025 10.2515 10.7174 10.0882C10.7323 9.97686 10.7025 9.91747 10.6058 9.86552C10.4272 9.7616 10.2634 9.65026 10.0699 9.53149C10.1518 9.32366 10.2337 9.11582 10.323 8.92283C10.3379 8.89314 10.4272 8.87087 10.4718 8.87829C10.6281 8.90798 10.7844 8.9451 10.9406 8.98963C11.0597 9.02675 11.1341 9.0119 11.2086 8.90798C11.2904 8.79664 11.3946 8.6853 11.5062 8.60365C11.6402 8.51458 11.6402 8.4255 11.6104 8.29189C11.5658 8.10633 11.4616 7.88364 11.5286 7.74261C11.5881 7.61642 11.8411 7.58673 12.0123 7.51251C12.0495 7.49766 12.0941 7.47539 12.1537 7.45312ZM14.1035 10.3183C14.1035 9.67995 13.5751 9.16036 12.9276 9.16036C12.2951 9.16036 11.7593 9.69479 11.7593 10.3331C11.7593 10.9715 12.2876 11.5059 12.9276 11.4985C13.59 11.4985 14.1035 10.9789 14.1035 10.3183Z" fill="#51636B"></path><path d="M7.06269 4.90123C7.21901 4.7445 7.35188 4.61911 7.49256 4.48588C7.57072 4.54074 7.66451 4.61127 7.75049 4.67396C7.8052 4.71315 7.85209 4.75233 7.9068 4.79152C8.00059 4.84637 8.50862 4.5956 8.53207 4.48588C8.56333 4.32915 8.58678 4.18025 8.61804 4C8.71965 4 8.81344 4 8.90723 4C8.9932 4 9.08699 4 9.18078 4C9.21205 4.17241 9.22768 4.32915 9.27457 4.47804C9.29021 4.54074 9.36055 4.57992 9.40744 4.63478C9.42307 4.65045 9.44652 4.64262 9.46215 4.65829C9.76697 4.89339 10.0171 4.76801 10.2516 4.54074C10.2672 4.52507 10.2984 4.51723 10.3297 4.49372C10.4626 4.62694 10.5876 4.76017 10.7283 4.90123C10.7127 4.92474 10.7049 4.95609 10.6814 4.9796C10.3766 5.24605 10.4157 5.54385 10.5954 5.84948C10.6267 5.90434 10.7049 5.94353 10.7752 5.9592C11.2285 6.03757 11.2285 6.03757 11.2129 6.4921C11.2129 6.52345 11.2051 6.5548 11.2051 6.60182C11.166 6.60965 11.1191 6.63316 11.08 6.63316C10.7518 6.63316 10.5486 6.76639 10.4626 7.10337C10.4313 7.22876 10.4079 7.31497 10.5017 7.41684C10.5876 7.51872 10.658 7.62844 10.7439 7.74599C10.6033 7.87138 10.4626 7.99677 10.3063 8.12999C10.3141 8.13783 10.2906 8.12999 10.275 8.10648C10.0171 7.8557 9.74352 7.76166 9.42307 7.98893C9.36055 8.02811 9.29802 8.09081 9.28239 8.16134C9.23549 8.3024 9.21986 8.4513 9.19642 8.60804C9.00884 8.60804 8.82907 8.60804 8.62586 8.60804C8.60241 8.45914 8.57896 8.31024 8.53989 8.16134C8.51644 8.09864 8.4461 8.04379 8.3992 7.98893C8.39138 7.97326 8.36012 7.98109 8.34449 7.97326C8.0553 7.73815 7.81301 7.87138 7.58635 8.08297C7.56291 8.10648 7.53164 8.12216 7.49256 8.14567C7.36751 8.01244 7.23464 7.87921 7.09396 7.72248C7.17212 7.61276 7.27372 7.48737 7.35188 7.35415C7.38314 7.29929 7.39096 7.20525 7.36751 7.15039C7.30498 6.99366 7.25809 6.7899 7.13304 6.70369C7.00798 6.60965 6.79695 6.63316 6.60938 6.60182C6.60938 6.41373 6.60938 6.23349 6.60938 6.02973C6.75788 6.00622 6.91419 5.98271 7.07051 5.94353C7.13304 5.92785 7.18775 5.86516 7.22683 5.8103C7.46912 5.45764 7.37533 5.15985 7.06269 4.90123ZM8.89941 5.39495C8.3992 5.39495 7.99278 5.8103 8.00059 6.30402C8.00841 6.80557 8.40702 7.21309 8.90723 7.21309C9.40744 7.21309 9.83731 6.7899 9.82168 6.31186C9.80605 5.79463 9.39963 5.39495 8.89941 5.39495Z" fill="#51636B"></path><path d="M2.80409 8.85581C2.76765 8.95346 2.74089 9.0538 2.72378 9.15553C2.63606 9.67703 2.80196 10.2345 3.21991 10.6409C3.72154 11.1287 4.44696 11.2636 5.06371 11.0428L7.20517 13.1253C7.23648 13.1558 7.26985 13.1829 7.30489 13.2067C7.58878 13.4 7.97948 13.3762 8.2292 13.1335C8.50971 12.8609 8.50604 12.4151 8.221 12.1379L6.07552 10.0515C6.29619 9.45461 6.15611 8.75559 5.65791 8.27114C5.11861 7.74664 4.32057 7.6302 3.67708 7.92503L4.84528 9.06106C5.07331 9.28283 5.07626 9.63942 4.85183 9.85754C4.6274 10.0757 4.26063 10.0727 4.0326 9.85096L2.86438 8.71493C2.84197 8.76114 2.82187 8.80816 2.80409 8.85581Z" fill="#00B39F"></path></svg>
\ No newline at end of file
diff --git a/src/sections/Pricing/index.js b/src/sections/Pricing/index.js
index c93cb0c8ff9e..d7e6f852ef80 100644
--- a/src/sections/Pricing/index.js
+++ b/src/sections/Pricing/index.js
@@ -1,21 +1,41 @@
-import React from "react";
+import React, { useState } from "react";
 import PricingWrapper from "./pricing.style";
 import Comparison from "./comparison";
 import FAQ from "../General/Faq";
 import Reviews from "./review-slider";
-import { options } from "./data";
+import options from "./generatePlans";
 import PlanCard from "../../components/PlanCard";
 
 const Pricing = () => {
-
   // const [monthly, setMonthly] = useState(false);
+  const [isYearly, setIsYearly] = useState(false);
+
+  const handleToggle = () => {
+    setIsYearly((prev) => !prev);
+  };
 
   return (
     <PricingWrapper>
-
       <div className="headers">
         <h1 className="header-heading">Plans For Every Team Size</h1>
 
+        <div className="toggle-container">
+          <div className="toggle">
+            <span
+              className={!isYearly ? "active" : ""}
+              onClick={() => handleToggle(false)} // Call handleToggle
+            >
+              Monthly
+            </span>
+            <span
+              className={isYearly ? "active" : ""}
+              onClick={() => handleToggle(true)} // Call handleToggle
+            >
+              Yearly
+            </span>
+          </div>
+        </div>
+
         {/* <svg className="header-svg" aria-hidden="true" role="presentation" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none">
           <polygon fill="white" points="0,100 100,0 100,100"/>
       <polygon fill="rgba(0,179,159,0.2)" points="50,50 100,0 100,100"/>
@@ -23,7 +43,7 @@ const Pricing = () => {
       </div>
 
       <div className="wrapper">
-        <PlanCard planData={options}/>
+        <PlanCard planData={options} isYearly={isYearly}/>
       </div>
       <Comparison />
       <Reviews />
diff --git a/src/sections/Pricing/pricing.style.js b/src/sections/Pricing/pricing.style.js
index c74766e32bd1..c4ed2a12b473 100644
--- a/src/sections/Pricing/pricing.style.js
+++ b/src/sections/Pricing/pricing.style.js
@@ -31,11 +31,44 @@ const PricingWrapper = styled.section`
     height: 12vw;
   }
   .header-heading {
+    margin-top: 2rem;
     color: white;
     text-align: center;
   }
 }
 
+.toggle-container {
+  display: flex;
+  justify-content: end;
+  align-items: center;
+  margin: 2rem 0;
+  font-size: .9rem;
+  gap: 10px;
+  width: 85%;
+}
+
+.toggle {
+  border: 2px solid ${props => props.theme.shadowLightColor};
+  padding: .4rem;
+ border-radius: .5rem;
+}
+
+.toggle-container span {
+  cursor: pointer;
+  padding: .5rem 1rem;
+  color: #fff;
+  border-radius: .5rem;
+  transition: background-color 0.3s, color 0.3s;
+}
+
+.toggle-container .active {
+  background-color: ${props => props.theme.secondaryColor};
+  color: #fff;
+  font-weight: 600;
+  border-color: ${props => props.theme.secondaryColor};
+}
+
+
 .subscription-duration {
     margin-top: 2rem;
     margin-bottom: 4rem;
@@ -78,26 +111,29 @@ const PricingWrapper = styled.section`
 
 .inactive {
   background-color: ${props => props.theme.primaryLightColor};
-  padding: 0.2rem;
+  padding: 0.rem;
   transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
   }
 }
 
 .wrapper{
-  max-width: 1090px;
+  max-width: 1600px;
   position: relative;
   width: 100%;
   padding: 0 2rem;
-  margin: -2rem auto;
+  margin: -6rem auto;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
+  /* @media (max-width: 1200px) {
+        margin: -6rem auto;
+    }
   @media (min-width: 1400px) {
-    margin: -8rem auto 0;
+    margin: -6rem auto;
   }
   @media (min-width: 2048px) {
-    margin: -10rem auto;
-  }
+    margin: -6rem auto;
+  } */
 }
 
 .accordion__item {
@@ -106,13 +142,13 @@ const PricingWrapper = styled.section`
   }
 }
 
-.pricing_coming_soon{
-  width : 150px;
-  position : relative ;
-  float : right;
+.pricing_coming_soon {
+  width: 80px;
+  position: relative ;
+  float: right;
   z-index:2;
-  margin-top:-2rem;
-  margin-right:-5.4rem;
+  margin-top: -1.4rem;
+  margin-right: -2.4rem;
   -webkit-transform: translateY(0%) translateX(0%) rotate(14deg);
 }
 
diff --git a/src/sections/Pricing/review-slider.js b/src/sections/Pricing/review-slider.js
index 5acb8d09d61c..58f2a76e84f2 100644
--- a/src/sections/Pricing/review-slider.js
+++ b/src/sections/Pricing/review-slider.js
@@ -1,9 +1,9 @@
+import "slick-carousel/slick/slick.css";
+import "slick-carousel/slick/slick-theme.css";
 import React from "react";
 import styled from "styled-components";
 import Customers from "../../reusecore/Blockquote/Blockquote-image";
 import Slider from "react-slick";
-import "slick-carousel/slick/slick.css";
-import "slick-carousel/slick/slick-theme.css";
 import Maxi from "../../collections/members/maximiliano-churichi/Maximiliano-Churichi.webp";
 import Otto from "../../collections/members/otto-van-der-schaaf/otto-van-der-schaaf.webp";
 import Nic from "../../collections/members/nicholas-jackson/nic-jackson.webp";
diff --git a/src/sections/Products/index.js b/src/sections/Products/index.js
index 656fa5b706bf..40caa00cad8a 100644
--- a/src/sections/Products/index.js
+++ b/src/sections/Products/index.js
@@ -24,7 +24,7 @@ const options = [
     monthlyprice: 0,
     yearlyprice: 0,
     byline: "Open Source features, plus:",
-    button: ["Join for Free", "https://meshery.layer5.io"],
+    button: ["Join for Free", "https://cloud.layer5.io"],
     summary: [
       {
         id: 0,
@@ -212,7 +212,7 @@ const index = () => {
                 flexibility, elevating operations to new efficiencies.{" "}
               </p>
               <div className="btn">
-                <Button secondary className="banner-btn two" $external={true} title="Explore Now" alt="" $url="https://meshery.layer5.io/"/>
+                <Button secondary className="banner-btn two" $external={true} title="Explore Now" alt="" $url="https://cloud.layer5.io/"/>
                 <Button id="book-a-demo" aria-label="Book a demo" primary className="banner-btn book-a-demo" $external={true} title="Book a demo" alt="Book a demo" $url="https://calendar.google.com/calendar/appointments/schedules/AcZssZ3pmcApaDP4xd8hvG5fy8ylxuFxD3akIRc5vpWJ60q-HemQi80SFFAVftbiIsq9pgiA2o8yvU56?gv=true" />
               </div>
             </div>
diff --git a/src/sections/Projects/Image-Hub/index.js b/src/sections/Projects/Image-Hub/index.js
index 197da9b1642d..7ccdcc359a30 100644
--- a/src/sections/Projects/Image-Hub/index.js
+++ b/src/sections/Projects/Image-Hub/index.js
@@ -1,3 +1,5 @@
+import "slick-carousel/slick/slick.css";
+import "slick-carousel/slick/slick-theme.css";
 import React from "react";
 
 
@@ -6,8 +8,6 @@ import ImageHubWrapper from "./imageHub.style";
 import { Container } from "../../../reusecore/Layout";
 import Button from "../../../reusecore/Button";
 import Slider from "react-slick";
-import "slick-carousel/slick/slick.css";
-import "slick-carousel/slick/slick-theme.css";
 import VintageBox from "../../../reusecore/VintageBox";
 
 
diff --git a/src/sections/Projects/Sistent/components/backdrop/code.js b/src/sections/Projects/Sistent/components/backdrop/code.js
new file mode 100644
index 000000000000..85c395f42cb0
--- /dev/null
+++ b/src/sections/Projects/Sistent/components/backdrop/code.js
@@ -0,0 +1,126 @@
+import { useLocation } from "@reach/router";
+import { navigate } from "gatsby";
+import React from "react";
+
+import { Container, SistentThemeProvider } from "@layer5/sistent";
+import { SistentLayout } from "../../sistent-layout";
+import { CodeBlock } from "../button/code-block";
+
+import TabButton from "../../../../../reusecore/Button";
+import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
+
+import { Backdrop, Button, CircularProgress } from "@layer5/sistent";
+
+const codes = [
+  `
+  import { Backdrop, Button, CircularProgress } from "@layer5/sistent";
+
+  // declare states and functions to handle open and close operation
+
+  /*
+  const [open, setOpen] = React.useState(false);
+  const handleClose = () => setOpen(false);
+  const handleOpen = () => setOpen(true);
+  */
+  <div>
+    <Button onClick={handleOpen}>Show backdrop</Button>
+    <Backdrop
+      sx={(theme) => ({
+        color: "#fff",
+        zIndex: theme.zIndex.drawer + 1,
+      })}
+      open={open}
+      onClick={handleClose}
+    >
+      <CircularProgress color="inherit" />
+    </Backdrop>
+</div>`,
+];
+
+const BackdropCode = () => {
+  const location = useLocation();
+  const { isDark } = useStyledDarkMode();
+
+  const [open, setOpen] = React.useState(false);
+  const handleClose = () => setOpen(false);
+  const handleOpen = () => setOpen(true);
+
+  return (
+    <SistentLayout title="Backdrop">
+      <div className="content">
+        <a id="Identity">
+          <h2>Backdrop</h2>
+        </a>
+        <p></p>
+        <div className="filterBtns">
+          <TabButton
+            className={
+              location.pathname === "/projects/sistent/components/backdrop"
+                ? "active"
+                : ""
+            }
+            onClick={() => navigate("/projects/sistent/components/backdrop")}
+            title="Overview"
+          />
+          <TabButton
+            className={
+              location.pathname ===
+              "/projects/sistent/components/backdrop/guidance"
+                ? "active"
+                : ""
+            }
+            onClick={() =>
+              navigate("/projects/sistent/components/backdrop/guidance")
+            }
+            title="Guidance"
+          />
+          <TabButton
+            className={
+              location.pathname === "/projects/sistent/components/backdrop/code"
+                ? "active"
+                : ""
+            }
+            onClick={() =>
+              navigate("/projects/sistent/components/backdrop/code")
+            }
+            title="Code"
+          />
+        </div>
+        <div className="main-content">
+          <p>
+            The Backdrop component overlays a dimmed background across the
+            screen to direct focus to specific content in the foreground, like
+            loading indicators, modals, or dialogs. It visually signals that the
+            background content is temporarily inaccessible. The Backdrop can be
+            closed when clicked, depending on the close action set in its props.
+          </p>
+          <a id="Backdrop">
+            <h2>Backdrop Example</h2>
+          </a>
+          <div className="showcase">
+            <div className="items">
+              <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+                <Container maxWidth="sm">
+                  <Button onClick={handleOpen}>Show backdrop</Button>
+                  <Backdrop
+                    sx={(theme) => ({
+                      color: "#fff",
+                      zIndex: theme.zIndex.drawer + 1,
+                    })}
+                    open={open}
+                    onClick={handleClose}
+                  >
+                    <CircularProgress color="inherit" />
+                  </Backdrop>
+                </Container>
+              </SistentThemeProvider>
+            </div>
+            <CodeBlock name="container-fluid-sm" code={codes[0]} />
+          </div>
+        </div>
+      </div>
+    </SistentLayout>
+  );
+};
+
+export default BackdropCode;
\ No newline at end of file
diff --git a/src/sections/Projects/Sistent/components/backdrop/guidance.js b/src/sections/Projects/Sistent/components/backdrop/guidance.js
new file mode 100644
index 000000000000..a4c9d8c770ea
--- /dev/null
+++ b/src/sections/Projects/Sistent/components/backdrop/guidance.js
@@ -0,0 +1,313 @@
+import React from "react";
+import { navigate } from "gatsby";
+import { useLocation } from "@reach/router";
+import { SistentLayout } from "../../sistent-layout";
+import TabButton from "../../../../../reusecore/Button";
+
+const BackdropGuidance = () => {
+  const location = useLocation();
+
+  return (
+    <SistentLayout title="Backdrop">
+      <div className="content">
+        <a id="Identity">
+          <h2>Backdrop</h2>
+        </a>
+        <p>
+          The Backdrop component is used to overlay a dimmed background across
+          the screen, drawing attention to content in the foreground, such as
+          modals, dialogs, or loading indicators. The backdrop signals that the
+          background content is temporarily inaccessible.
+        </p>
+        <div className="filterBtns">
+          <TabButton
+            className={
+              location.pathname === "/projects/sistent/components/backdrop"
+                ? "active"
+                : ""
+            }
+            onClick={() => navigate("/projects/sistent/components/backdrop")}
+            title="Overview"
+          />
+          <TabButton
+            className={
+              location.pathname ===
+              "/projects/sistent/components/backdrop/guidance"
+                ? "active"
+                : ""
+            }
+            onClick={() =>
+              navigate("/projects/sistent/components/backdrop/guidance")
+            }
+            title="Guidance"
+          />
+          <TabButton
+            className={
+              location.pathname === "/projects/sistent/components/backdrop/code"
+                ? "active"
+                : ""
+            }
+            onClick={() =>
+              navigate("/projects/sistent/components/backdrop/code")
+            }
+            title="Code"
+          />
+        </div>
+        <div className="main-content">
+          <p>
+            The Backdrop component provides a clean and efficient way to overlay
+            a backdrop layer to indicate that the background content is
+            temporarily inactive or inaccessible. This component is primarily
+            used in conjunction with modals, loading indicators, or popovers.
+          </p>
+
+          <a id="Function">
+            <h2>Function</h2>
+          </a>
+
+          <p>The Backdrop component helps achieve the following functions:</p>
+          <ul>
+            <li>
+              <strong>Modal Backdrop:</strong> Provides a visual overlay when a
+              modal is open, dimming the background and focusing attention on
+              the modal.
+            </li>
+            <li>
+              <strong>Loading Indicator:</strong> Can be used with a loading
+              spinner or indicator to notify users that content is being
+              processed.
+            </li>
+            <li>
+              <strong>Popover or Custom Select:</strong> Useful for making a
+              popover or custom select component more noticeable by blocking
+              interaction with the background.
+            </li>
+          </ul>
+
+          <a id="Props">
+            <h2>Props</h2>
+          </a>
+          <p>Props of the Fade component are also available.</p>
+
+          <table>
+            <thead>
+              <tr style={{ backgroundColor: "#121212" }}>
+                <th>Name</th>
+                <th>Type</th>
+                <th>Default</th>
+                <th>Description</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr style={{ backgroundColor: "#121212" }}>
+                <td>
+                  <code>open*</code>
+                </td>
+                <td>
+                  <code>bool</code>
+                </td>
+                <td>-</td>
+                <td>
+                  If <code>true</code>, the component is shown.
+                </td>
+              </tr>
+              <tr style={{ backgroundColor: "#121212" }}>
+                <td>
+                  <code>children</code>
+                </td>
+                <td>
+                  <code>node</code>
+                </td>
+                <td>-</td>
+                <td>The content of the component.</td>
+              </tr>
+              <tr style={{ backgroundColor: "#121212" }}>
+                <td>
+                  <code>classes</code>
+                </td>
+                <td>
+                  <code>object</code>
+                </td>
+                <td>-</td>
+                <td>
+                  Override or extend the styles applied to the component. See
+                  CSS classes API below for more details.
+                </td>
+              </tr>
+              <tr style={{ backgroundColor: "#121212" }}>
+                <td>
+                  <code>component</code>
+                </td>
+                <td>
+                  <code>elementType</code>
+                </td>
+                <td>-</td>
+                <td>
+                  The component used for the root node. Either a string to use
+                  an HTML element or a component.
+                </td>
+              </tr>
+              <tr style={{ backgroundColor: "#121212" }}>
+                <td>
+                  <code>components</code>
+                </td>
+                <td>
+                  <code>Root?: elementType </code>
+                </td>
+                <td>
+                  <code>{}</code>
+                </td>
+                <td>
+                  The components used for each slot inside.
+                  <strong>Deprecated</strong> — Use the <code>slots</code> prop
+                  instead. This prop will be removed in v7. See Migrating from
+                  deprecated APIs for more details.
+                </td>
+              </tr>
+              <tr style={{ backgroundColor: "#121212" }}>
+                <td>
+                  <code>componentsProps</code>
+                </td>
+                <td>
+                  <code>root?: object </code>
+                </td>
+                <td>
+                  <code>{}</code>
+                </td>
+                <td>
+                  The extra props for the slot components. You can override the
+                  existing props or add new ones.
+                  <strong>Deprecated</strong> — Use the <code>slotProps</code>{" "}
+                  prop instead. This prop will be removed in v7.
+                </td>
+              </tr>
+              <tr style={{ backgroundColor: "#121212" }}>
+                <td>
+                  <code>invisible</code>
+                </td>
+                <td>
+                  <code>bool</code>
+                </td>
+                <td>
+                  <code>false</code>
+                </td>
+                <td>
+                  If <code>true</code>, the backdrop is invisible, useful for
+                  popovers or custom selects.
+                </td>
+              </tr>
+              <tr style={{ backgroundColor: "#121212" }}>
+                <td>
+                  <code>slotProps</code>
+                </td>
+                <td>
+                  <code>root?: func | object, transition?: func | object</code>
+                </td>
+                <td>
+                  <code>{}</code>
+                </td>
+                <td>The props used for each slot inside the component.</td>
+              </tr>
+              <tr style={{ backgroundColor: "#121212" }}>
+                <td>
+                  <code>slots</code>
+                </td>
+                <td>
+                  <code>root?: elementType, transition?: elementType</code>
+                </td>
+                <td>
+                  <code>{}</code>
+                </td>
+                <td>The components used for each slot inside.</td>
+              </tr>
+              <tr style={{ backgroundColor: "#121212" }}>
+                <td>
+                  <code>sx</code>
+                </td>
+                <td>
+                  <code>Array&lt;func | object | bool&gt; | func | object</code>
+                </td>
+                <td>-</td>
+                <td>
+                  The system prop for defining system overrides and additional
+                  CSS styles. See the{" "}
+                  <a href="https://mui.com/system/sx/">sx page</a> for more
+                  details.
+                </td>
+              </tr>
+              <tr style={{ backgroundColor: "#121212" }}>
+                <td>
+                  <code>TransitionComponent</code>
+                </td>
+                <td>
+                  <code>elementType</code>
+                </td>
+                <td>
+                  <code>Fade</code>
+                </td>
+                <td>
+                  The component used for the transition. Refer to the guide for
+                  component requirements.
+                </td>
+              </tr>
+              <tr style={{ backgroundColor: "#121212" }}>
+                <td>
+                  <code>transitionDuration</code>
+                </td>
+                <td>
+                  <code>
+                    number | appear?: number, enter?: number, exit?: number{" "}
+                  </code>
+                </td>
+                <td>-</td>
+                <td>
+                  Duration for the transition, in milliseconds. Specify a single
+                  timeout or individual times.
+                </td>
+              </tr>
+            </tbody>
+          </table>
+
+          <a id="Labeling">
+            <h2>Labeling</h2>
+          </a>
+
+          <p>
+            The Backdrop component provides a clear visual indication that
+            content is temporarily inaccessible. It is typically used for
+            displaying temporary UI elements, such as dialogs or loading
+            indicators. It's important to ensure that the backdrop is not
+            intrusive and is used in the appropriate context.
+          </p>
+
+          <p>
+            It is also essential to consider accessibility and usability when
+            implementing a backdrop. Ensure that users can interact with the
+            content behind the backdrop when it is dismissed or closed, and
+            ensure proper keyboard and screen reader support.
+          </p>
+
+          <a id="Responsive">
+            <h2>Responsive Design</h2>
+          </a>
+
+          <p>
+            The Backdrop component can be easily integrated into responsive
+            designs, ensuring that it adapts to different screen sizes and
+            layouts. It should be used in a way that works well on mobile
+            devices, tablets, and desktops. Consider the size of the overlay and
+            how it impacts the user experience across devices.
+          </p>
+
+          <p>
+            You can adjust the backdrop's visibility, duration, and animation to
+            suit different screen sizes and provide a smooth user experience on
+            all devices.
+          </p>
+        </div>
+      </div>
+    </SistentLayout>
+  );
+};
+
+export default BackdropGuidance;
\ No newline at end of file
diff --git a/src/sections/Projects/Sistent/components/backdrop/index.js b/src/sections/Projects/Sistent/components/backdrop/index.js
new file mode 100644
index 000000000000..fae98c2eeec3
--- /dev/null
+++ b/src/sections/Projects/Sistent/components/backdrop/index.js
@@ -0,0 +1,119 @@
+import React from "react";
+import { navigate } from "gatsby";
+import { useLocation } from "@reach/router";
+
+import {
+  SistentThemeProvider,
+  Button,
+  Backdrop,
+  CircularProgress,
+} 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 SistentBackdrop = () => {
+  const location = useLocation();
+  const { isDark } = useStyledDarkMode();
+
+  const [open, setOpen] = React.useState(false);
+  const handleClose = () => setOpen(false);
+  const handleOpen = () => setOpen(true);
+
+  return (
+    <SistentLayout title="Backdrop">
+      <div className="content">
+        <a id="Identity">
+          <h2>Backdrop</h2>
+        </a>
+        <p>
+          The Backdrop component overlays a dimmed background across the screen
+          to direct focus to specific content in the foreground, like loading
+          indicators, modals, or dialogs. It visually signals that the
+          background content is temporarily inaccessible. The Backdrop can be
+          closed when clicked, depending on the close action set in its props.
+        </p>
+        <div className="filterBtns">
+          <TabButton
+            className={
+              location.pathname === "/projects/sistent/components/backdrop"
+                ? "active"
+                : ""
+            }
+            onClick={() => navigate("/projects/sistent/components/backdrop")}
+            title="Overview"
+          />
+          <TabButton
+            className={
+              location.pathname ===
+              "/projects/sistent/components/backdrop/guidance"
+                ? "active"
+                : ""
+            }
+            onClick={() =>
+              navigate("/projects/sistent/components/backdrop/guidance")
+            }
+            title="Guidance"
+          />
+          <TabButton
+            className={
+              location.pathname === "/projects/sistent/components/backdrop/code"
+                ? "active"
+                : ""
+            }
+            onClick={() =>
+              navigate("/projects/sistent/components/backdrop/code")
+            }
+            title="Code"
+          />
+        </div>
+        <div className="main-content">
+          <p>
+            The Backdrop component in React is used to overlay a dimmed
+            background across the entire screen, guiding the user's focus to a
+            specific element or content in the foreground. This component is
+            often utilized for scenarios that require a change in the
+            application’s state, such as showing loading indicators, modals,
+            dialogs, or other focused content.
+          </p>
+          <p>
+            In its simplest use, a Backdrop dims the background, enhancing the
+            visibility of what’s in the foreground while signaling that the
+            underlying content is temporarily inaccessible. When Backdrop is
+            open, users can click on it to close it, depending on how the close
+            action is handled in the component’s props.
+          </p>
+          <a id="Usage">
+            <h2>How to use</h2>
+          </a>
+          <p>
+            The demo below shows a basic Backdrop with a Circular Progress
+            component in the foreground to indicate a loading state. After
+            clicking Show Backdrop, you can click anywhere on the page to close
+            it.
+          </p>
+          <Row $Hcenter className="image-container">
+            <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+              <div>
+                <Button onClick={handleOpen}>Show backdrop</Button>
+                <Backdrop
+                  sx={(theme) => ({
+                    color: "#fff",
+                    zIndex: theme.zIndex.drawer + 1,
+                  })}
+                  open={open}
+                  onClick={handleClose}
+                >
+                  <CircularProgress color="inherit" />
+                </Backdrop>
+              </div>
+            </SistentThemeProvider>
+          </Row>
+        </div>
+      </div>
+    </SistentLayout>
+  );
+};
+
+export default SistentBackdrop;
diff --git a/src/sections/Projects/Sistent/components/box/code.js b/src/sections/Projects/Sistent/components/box/code.js
new file mode 100644
index 000000000000..7dd3032bc2c1
--- /dev/null
+++ b/src/sections/Projects/Sistent/components/box/code.js
@@ -0,0 +1,210 @@
+import React from "react";
+import { navigate } from "gatsby";
+import { useLocation } from "@reach/router";
+
+import { SistentThemeProvider, Box } from "@layer5/sistent";
+import { CodeBlock } from "../button/code-block";
+import { SistentLayout } from "../../sistent-layout";
+
+import TabButton from "../../../../../reusecore/Button";
+import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
+
+const codes = [
+  `<Box sx={{ bgcolor: "#ffeb3b", padding: 4, height: "50vh" }}>
+    <p>
+      This is a Box component with custom background and padding.
+    </p>
+</Box>`,
+  `<Box
+    sx={{
+      bgcolor: { xs: "#cfe8fc", md: "#ffeb3b" },
+      padding: { xs: 2, md: 4 },
+      height: "50vh",
+    }}
+  >
+    <p style={{ color: "black" }}>
+      This Box is responsive, changing style based on screen size.
+    </p>
+</Box>`,
+  `<Box
+    sx={{
+      bgcolor: { xs: "#cfe8fc", md: "#ffeb3b" },
+      padding: { xs: 2, md: 4 },
+      height: "50vh",
+    }}
+    >
+    <p style={{ color: "black" }}>
+      This Box is responsive, changing style based on screen size.
+    </p>
+</Box>`,
+  `<Box
+    sx={{
+      bgcolor: "#cfe8fc",
+      height: "50vh",
+      padding: 4,
+      transition: "0.3s",
+      "&:hover": {
+        bgcolor: "#ffeb3b",
+        cursor: "pointer",
+      },
+    }}
+    >
+      <p style={{ color: "black" }}>Hover over this Box to see the interactive effect.</p>
+</Box>`,
+];
+
+const BoxCode = () => {
+  const location = useLocation();
+  const { isDark } = useStyledDarkMode();
+
+  return (
+    <SistentLayout title="Box">
+      <div className="content">
+        <a id="Identity">
+          <h2>Box</h2>
+        </a>
+        <div className="filterBtns">
+          <TabButton
+            className={
+              location.pathname === "/projects/sistent/components/box"
+                ? "active"
+                : ""
+            }
+            onClick={() => navigate("/projects/sistent/components/box")}
+            title="Overview"
+          />
+          <TabButton
+            className={
+              location.pathname === "/projects/sistent/components/box/guidance"
+                ? "active"
+                : ""
+            }
+            onClick={() =>
+              navigate("/projects/sistent/components/box/guidance")
+            }
+            title="Guidance"
+          />
+          <TabButton
+            className={
+              location.pathname === "/projects/sistent/components/box/code"
+                ? "active"
+                : ""
+            }
+            onClick={() => navigate("/projects/sistent/components/box/code")}
+            title="Code"
+          />
+        </div>
+        <div className="main-content">
+          <p>
+            The <code>Box</code> component is a flexible and foundational
+            container in Sistent, designed to structure and style content. It
+            provides quick access to the theme and CSS utilities, allowing for
+            easy customization and responsive design. Using the sx prop,
+            developers can apply CSS styles directly with theme-aware
+            properties, making Box ideal for layouts, spacing, and other UI
+            adjustments. It can render as any HTML element using the component
+            prop, offering high versatility in both structure and styling.
+          </p>
+          <a id="Basic Box">
+            <h2>Basic Box Example</h2>
+          </a>
+          <p>
+            A simple Box component can be used to contain and structure other
+            elements. Here, the Box serves as a basic container without any
+            styling applied.
+          </p>
+          <div className="showcase">
+            <div className="items">
+              <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+                <Box>
+                  <p>This is a basic Box component.</p>
+                </Box>
+              </SistentThemeProvider>
+            </div>
+            <CodeBlock name="box-basic" code={codes[0]} />
+          </div>
+          <a id="Styled Box">
+            <h2>Styled Box Example</h2>
+          </a>
+          <p>
+            You can add custom styles to a Box component by applying{" "}
+            <code>sx</code>
+            properties. In this example, the Box has a background color,
+            padding, and a defined height.
+          </p>
+          <div className="showcase">
+            <div className="items">
+              <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+                <Box sx={{ bgcolor: "#ffeb3b", padding: 4, height: "50vh" }}>
+                  <p style={{ color: "black" }}>
+                    This is a Box component with custom background and padding.
+                  </p>
+                </Box>
+              </SistentThemeProvider>
+            </div>
+            <CodeBlock name="box-styled" code={codes[1]} />
+          </div>
+          <a id="Responsive Box">
+            <h2>Responsive Box Example</h2>
+          </a>
+          <p>
+            The Box component also supports responsive styling using the{" "}
+            <code>sx</code> prop. In this example, the Box adjusts its padding
+            and background color based on screen size.
+          </p>
+          <div className="showcase">
+            <div className="items">
+              <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+                <Box
+                  sx={{
+                    bgcolor: { xs: "#cfe8fc", md: "#ffeb3b" },
+                    padding: { xs: 2, md: 4 },
+                    height: "50vh",
+                  }}
+                >
+                  <p style={{ color: "black" }}>
+                    This Box is responsive, changing style based on screen size.
+                  </p>
+                </Box>
+              </SistentThemeProvider>
+            </div>
+            <CodeBlock name="box-responsive" code={codes[2]} />
+          </div>
+          <a id="Interactive Box">
+            <h2>Interactive Box Example</h2>
+          </a>
+          <p>
+            Here’s an example where the Box component includes hover effects to
+            create a more interactive experience. This is useful for buttons,
+            cards, and other clickable elements.
+          </p>
+          <div className="showcase">
+            <div className="items">
+              <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+                <Box
+                  sx={{
+                    bgcolor: "#cfe8fc",
+                    height: "50vh",
+                    padding: 4,
+                    transition: "0.3s",
+                    "&:hover": {
+                      bgcolor: "#ffeb3b",
+                      cursor: "pointer",
+                    },
+                  }}
+                >
+                  <p style={{ color: "black" }}>
+                    Hover over this Box to see the interactive effect.
+                  </p>
+                </Box>
+              </SistentThemeProvider>
+            </div>
+            <CodeBlock name="box-interactive" code={codes[3]} />
+          </div>
+        </div>
+      </div>
+    </SistentLayout>
+  );
+};
+
+export default BoxCode;
\ No newline at end of file
diff --git a/src/sections/Projects/Sistent/components/box/guidance.js b/src/sections/Projects/Sistent/components/box/guidance.js
new file mode 100644
index 000000000000..e692d982a680
--- /dev/null
+++ b/src/sections/Projects/Sistent/components/box/guidance.js
@@ -0,0 +1,181 @@
+import React from "react";
+import { navigate } from "gatsby";
+import { useLocation } from "@reach/router";
+import { Row } from "../../../../../reusecore/Layout";
+import { SistentThemeProvider, Box } from "@layer5/sistent";
+import { SistentLayout } from "../../sistent-layout";
+
+import TabButton from "../../../../../reusecore/Button";
+import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
+
+const BoxGuidance = () => {
+  const location = useLocation();
+  const { isDark } = useStyledDarkMode();
+
+  return (
+    <SistentLayout title="Box">
+      <div className="content">
+        <a id="Identity">
+          <h2>Box</h2>
+        </a>
+        <p>
+          The Box component is a flexible, theme-aware container that adapts
+          seamlessly across various layouts. It provides a convenient way to
+          apply styles, positioning, and responsive adjustments to content,
+          making it ideal for any layout needs.
+        </p>
+        <div className="filterBtns">
+          <TabButton
+            className={
+              location.pathname === "/projects/sistent/components/box"
+                ? "active"
+                : ""
+            }
+            onClick={() => navigate("/projects/sistent/components/box")}
+            title="Overview"
+          />
+          <TabButton
+            className={
+              location.pathname === "/projects/sistent/components/box/guidance"
+                ? "active"
+                : ""
+            }
+            onClick={() =>
+              navigate("/projects/sistent/components/box/guidance")
+            }
+            title="Guidance"
+          />
+          <TabButton
+            className={
+              location.pathname === "/projects/sistent/components/box/code"
+                ? "active"
+                : ""
+            }
+            onClick={() => navigate("/projects/sistent/components/box/code")}
+            title="Code"
+          />
+        </div>
+
+        <div className="main-content">
+          <p>
+            The Box component is a highly versatile tool that can be used for
+            layout management, spacing, styling, and more. With full support for
+            responsive design, Box is an essential part of any well-structured
+            application, allowing developers to customize and style elements
+            while keeping the theme consistent.
+          </p>
+
+          <a id="Function">
+            <h2>Function</h2>
+          </a>
+
+          <p>The Box component serves several functions:</p>
+
+          <h3>Responsive Styling</h3>
+          <p>
+            The <code>sx</code> prop makes it easy to apply responsive styles
+            directly within the component, allowing for adaptive design that
+            looks great across all screen sizes.
+          </p>
+          <Row $Hcenter className="image-container">
+            <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+              <Box
+                sx={{
+                  bgcolor: "primary.main",
+                  padding: 3,
+                  borderRadius: 2,
+                  "&:hover": { bgcolor: "primary.light" },
+                }}
+              >
+                <p style={{ color: "black" }}>
+                  This is a responsive Box component.
+                </p>
+              </Box>
+            </SistentThemeProvider>
+          </Row>
+
+          <h3>Flexible Layout Control</h3>
+          <p>
+            Box can serve as a container for organizing other elements, whether
+            it's aligning text, images, or interactive components. The
+            flexibility of the Box component allows it to adapt to a wide range
+            of layout needs, from card-style containers to more complex nested
+            structures.
+          </p>
+
+          <h3>Customizable Appearance</h3>
+          <p>
+            The Box component’s customization options allow you to adjust
+            colors, borders, shadows, and more through the <code>sx</code> prop,
+            ensuring that components blend well with your app's overall theme.
+          </p>
+          <Row $Hcenter className="image-container">
+            <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+              <Box
+                sx={{
+                  bgcolor: "secondary.main",
+                  padding: 2,
+                  boxShadow: 3,
+                  borderRadius: 4,
+                }}
+              >
+                <p style={{ color: "black" }}>
+                  Customized Box with shadow and color.
+                </p>
+              </Box>
+            </SistentThemeProvider>
+          </Row>
+
+          <a id="UseCases">
+            <h2>Use Cases</h2>
+          </a>
+
+          <h3>Nested Layouts</h3>
+          <p>
+            Use Box to create nested layouts by embedding one Box within
+            another, each with distinct styling. This setup enables the creation
+            of structured and multi-layered designs.
+          </p>
+          <Row $Hcenter className="image-container">
+            <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+              <Box
+                sx={{
+                  padding: 3,
+                  bgcolor: "background.paper",
+                  borderRadius: 2,
+                }}
+              >
+                <Box sx={{ bgcolor: "info.main", padding: 2 }}>
+                  <p style={{ color: "black" }}>Nested Box layout example.</p>
+                </Box>
+              </Box>
+            </SistentThemeProvider>
+          </Row>
+
+          <h3>Utility for Spacing and Margin</h3>
+          <p>
+            Leveraging Box for margin and padding adjustments offers
+            fine-grained control over spacing between components, making it
+            useful in complex layouts where alignment and spacing are crucial.
+          </p>
+
+          <h3>Event Handling and State Management</h3>
+          <p>
+            Box can also be used as an interactive element, handling events and
+            managing state. This makes it ideal for use cases that require
+            dynamic behavior or user interaction.
+          </p>
+
+          <h3>Responsive Design</h3>
+          <p>
+            The Box component seamlessly integrates with Sistent’s responsive
+            design principles, providing a cohesive experience across various
+            screen sizes by leveraging breakpoints in the <code>sx</code> prop.
+          </p>
+        </div>
+      </div>
+    </SistentLayout>
+  );
+};
+
+export default BoxGuidance;
diff --git a/src/sections/Projects/Sistent/components/box/index.js b/src/sections/Projects/Sistent/components/box/index.js
new file mode 100644
index 000000000000..bb02738c6122
--- /dev/null
+++ b/src/sections/Projects/Sistent/components/box/index.js
@@ -0,0 +1,133 @@
+import React from "react";
+import { navigate } from "gatsby";
+import { useLocation } from "@reach/router";
+
+import { SistentThemeProvider, Box } 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 SistentBox = () => {
+  const location = useLocation();
+  const { isDark } = useStyledDarkMode();
+
+  return (
+    <SistentLayout title="Box">
+      <div className="content">
+        <a id="Identity">
+          <h2>Box</h2>
+        </a>
+        <p>
+          The <code>Box</code> component is a versatile, theme-aware container
+          in Sistent, ideal for styling and layout customization. It supports
+          the sx prop for easy, responsive styling and can render as any HTML
+          element.
+        </p>
+        <div className="filterBtns">
+          <TabButton
+            className={
+              location.pathname === "/projects/sistent/components/box"
+                ? "active"
+                : ""
+            }
+            onClick={() => navigate("/projects/sistent/components/box")}
+            title="Overview"
+          />
+          <TabButton
+            className={
+              location.pathname === "/projects/sistent/components/box/guidance"
+                ? "active"
+                : ""
+            }
+            onClick={() =>
+              navigate("/projects/sistent/components/box/guidance")
+            }
+            title="Guidance"
+          />
+          <TabButton
+            className={
+              location.pathname === "/projects/sistent/components/box/code"
+                ? "active"
+                : ""
+            }
+            onClick={() => navigate("/projects/sistent/components/box/code")}
+            title="Code"
+          />
+        </div>
+        <div className="main-content">
+          <p>
+            The <code>Box</code> component is a flexible and foundational
+            container in Sistent, designed to structure and style content. It
+            provides quick access to the theme and CSS utilities, allowing for
+            easy customization and responsive design. Using the sx prop,
+            developers can apply CSS styles directly with theme-aware
+            properties, making Box ideal for layouts, spacing, and other UI
+            adjustments. It can render as any HTML element using the component
+            prop, offering high versatility in both structure and styling.
+          </p>
+          <a id="Usage">
+            <h2>Usage</h2>
+          </a>
+          <p>
+            The Box component differs from other containers available in Sistent
+            in that its usage is intended to be multipurpose and open-ended,
+            just like a <code>`div`</code>. Components like Container, Stack and
+            Paper, by contrast, feature usage-specific props that make them
+            ideal for certain use cases: Container for main layout orientation,
+            Stack for one-dimensional layouts, and Paper for elevated surfaces.
+          </p>
+          <h3>Box component</h3>
+          <p>
+            The Box component renders as a <code>`div`</code> by default, but
+            you can swap in any other valid HTML tag or React component using
+            the component prop. The demo below replaces the <code>`div`</code>
+            with a <code>`section`</code> element:
+          </p>
+          <Row $Hcenter className="image-container">
+            <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+              <Box component="section" sx={{ p: 2, border: "1px dashed grey" }}>
+                This Box renders as an HTML section element.
+              </Box>
+            </SistentThemeProvider>
+          </Row>
+
+          <a id="Customization">
+            <h2>Customization</h2>
+          </a>
+          <p>
+            The Box component can be styled flexibly with Sistent
+            <code>sx</code>prop and custom themes. The sx prop allows quick
+            application of CSS styles that are theme-aware, enabling responsive
+            and consistent design.
+          </p>
+
+          <h3>Using the sx Prop</h3>
+          <p>
+            The sx prop supports a wide range of style properties, including
+            colors, spacing, and responsive adjustments. It directly accesses
+            theme values, allowing you to apply theme-based styles to a Box with
+            minimal code.
+          </p>
+          <Row $Hcenter className="image-container">
+            <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+              <Box
+                sx={{
+                  width: 100,
+                  height: 100,
+                  borderRadius: 1,
+                  bgcolor: "primary.main",
+                  "&:hover": {
+                    bgcolor: "primary.dark",
+                  },
+                }}
+              />
+            </SistentThemeProvider>
+          </Row>
+        </div>
+      </div>
+    </SistentLayout>
+  );
+};
+
+export default SistentBox;
diff --git a/src/sections/Projects/Sistent/components/button/code.js b/src/sections/Projects/Sistent/components/button/code.js
index 89363d64a8c9..a8d4903d1978 100644
--- a/src/sections/Projects/Sistent/components/button/code.js
+++ b/src/sections/Projects/Sistent/components/button/code.js
@@ -35,12 +35,12 @@ const codes = [
   </SistentThemeProvider>`,
 ];
 
-export const ButtonCode = () => {
+const ButtonCode = () => {
   const location = useLocation();
   const { isDark } = useStyledDarkMode();
 
   return (
-    <SistentLayout title="Button" >
+    <SistentLayout title="Button">
       <div className="content">
         <a id="Identity">
           <h2>Button</h2>
@@ -177,3 +177,5 @@ export const ButtonCode = () => {
     </SistentLayout>
   );
 };
+
+export default ButtonCode;
diff --git a/src/sections/Projects/Sistent/components/button/guidance.js b/src/sections/Projects/Sistent/components/button/guidance.js
index 7c82855fb74d..8fafed9689b5 100644
--- a/src/sections/Projects/Sistent/components/button/guidance.js
+++ b/src/sections/Projects/Sistent/components/button/guidance.js
@@ -8,7 +8,7 @@ import { SistentLayout } from "../../sistent-layout";
 import TabButton from "../../../../../reusecore/Button";
 import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
 
-export const ButtonGuidance = () => {
+const ButtonGuidance = () => {
   const location = useLocation();
   const { isDark } = useStyledDarkMode();
 
@@ -195,3 +195,5 @@ export const ButtonGuidance = () => {
     </SistentLayout>
   );
 };
+
+export default ButtonGuidance;
diff --git a/src/sections/Projects/Sistent/components/container/code.js b/src/sections/Projects/Sistent/components/container/code.js
index dc55461dd067..5dc8eb3b9634 100644
--- a/src/sections/Projects/Sistent/components/container/code.js
+++ b/src/sections/Projects/Sistent/components/container/code.js
@@ -44,7 +44,7 @@ const codes = [
 `,
 ];
 
-export const ContainerCode = () => {
+const ContainerCode = () => {
   const location = useLocation();
   const { isDark } = useStyledDarkMode();
 
@@ -217,3 +217,5 @@ export const ContainerCode = () => {
     </SistentLayout>
   );
 };
+
+export default ContainerCode;
diff --git a/src/sections/Projects/Sistent/components/container/guidance.js b/src/sections/Projects/Sistent/components/container/guidance.js
index 6578572a29f9..b1a8a0b963e6 100644
--- a/src/sections/Projects/Sistent/components/container/guidance.js
+++ b/src/sections/Projects/Sistent/components/container/guidance.js
@@ -8,7 +8,7 @@ import { SistentLayout } from "../../sistent-layout";
 import TabButton from "../../../../../reusecore/Button";
 import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
 
-export const ContainerGuidancePage = () => {
+const ContainerGuidancePage = () => {
   const location = useLocation();
   const { isDark } = useStyledDarkMode();
 
@@ -162,3 +162,5 @@ export const ContainerGuidancePage = () => {
     </SistentLayout>
   );
 };
+
+export default ContainerGuidancePage;
diff --git a/src/sections/Projects/Sistent/components/content.js b/src/sections/Projects/Sistent/components/content.js
new file mode 100644
index 000000000000..388e34486f06
--- /dev/null
+++ b/src/sections/Projects/Sistent/components/content.js
@@ -0,0 +1,100 @@
+const componentsData = [
+  {
+    id: 1,
+    name: "Button",
+    description:
+        "A button is an interactive element that triggers a specific action and also lets users know what will happen next.",
+    url: "/projects/sistent/components/button",
+    src: "/button",
+  },
+  {
+    id: 2,
+    name: "Text Input",
+    description:
+        "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/text-input",
+    src: "/text-input",
+  },
+  {
+    id: 3,
+    name: "Modal",
+    description:
+        "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",
+  },
+  {
+    id: 4,
+    name: "Paper",
+    description:
+        "The Paper component offers an elevated surface with shadow effects, following Material Design’s elevation system.",
+    url: "/projects/sistent/components/paper",
+    src: "/paper",
+  },
+  {
+    id: 5,
+    name: "Popper",
+    description:
+        "A popper is a tooltip that appears when a user interacts with an element.",
+    url: "/projects/sistent/components/popper",
+    src: "/popper",
+  },
+  {
+    id: 6,
+    name: "Text Field",
+    description:
+        "The TextField component is a versatile input field used to capture user input in forms and user interfaces.",
+    url: "/projects/sistent/components/text-field",
+    src: "/text-field",
+  },
+  {
+    id: 7,
+    name: "Link",
+    description:
+        "Links are essential and integral components of an interface. They are primarily used for navigation, guiding users to the next step in a journey or redirecting them to relevant sections or pages.",
+    url: "/projects/sistent/components/link",
+    src: "/link",
+  },
+  {
+    id: 8,
+    name: "Container",
+    description:
+        "Containers align and center content, providing responsive layout options for different screen sizes.",
+    url: "/projects/sistent/components/container",
+    src: "/container",
+  },
+  {
+    id: 9,
+    name: "ButtonGroup",
+    description:
+        "ButtonGroup is a component that groups multiple buttons together.",
+    url: "/projects/sistent/components/button-group",
+    src: "/button-group",
+  },
+  {
+    id: 10,
+    name: "Box",
+    description:
+        "Box is used as a flexible container for layout and styling, allowing quick customization and responsive design adjustments.",
+    url: "/projects/sistent/components/box",
+    src: "/box",
+  },
+  {
+    id: 11,
+    name: "Tooltip",
+    description:
+        "The Tooltip component is a small pop-up box that appears when a user hovers over an element.",
+    url: "/projects/sistent/components/tooltip",
+    src: "/tooltip",
+  },
+  {
+    id: 12,
+    name: "Backdrop",
+    description:
+        "Backdrop component overlays a dimmed screen to focus attention on foreground content.",
+    url: "/projects/sistent/components/backdrop",
+    src: "/backdrop",
+  },
+];
+
+module.exports = { componentsData };
\ 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 749fb2c5e34e..3988ff1670cc 100644
--- a/src/sections/Projects/Sistent/components/index.js
+++ b/src/sections/Projects/Sistent/components/index.js
@@ -7,72 +7,8 @@ import SearchBox from "../../../../reusecore/Search";
 import useDataList from "../../../../utils/usedataList";
 import { FaArrowRight } from "@react-icons/all-files/fa/FaArrowRight";
 import { Link } from "gatsby";
+import { componentsData } from "./content";
 
-const componentsData = [
-  {
-    id: 1,
-    name: "Button",
-    description:
-      "A button is an interactive element that triggers a specific action and also lets users know what will happen next.",
-    url: "/projects/sistent/components/button",
-  },
-  {
-    id: 2,
-    name: "Text Input",
-    description:
-      "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/text-input",
-  },
-  {
-    id: 3,
-    name: "Modal",
-    description:
-      "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",
-  },
-  {
-    id: 4,
-    name: "Paper",
-    description:
-      "The Paper component offers an elevated surface with shadow effects, following Material Design’s elevation system.",
-    url: "/projects/sistent/components/paper",
-  },
-  {
-    id: 5,
-    name: "Popper",
-    description:
-      "A popper is a tooltip that appears when a user interacts with an element.",
-    url: "/projects/sistent/components/popper",
-  },
-  {
-    id: 6,
-    name: "Text Field",
-    description:
-      "The TextField component is a versatile input field used to capture user input in forms and user interfaces.",
-    url: "/projects/sistent/components/text-field",
-  },
-  {
-    id: 7,
-    name: "Link",
-    description:
-      "Links are essential and integral components of an interface. They are primarily used for navigation, guiding users to the next step in a journey or redirecting them to relevant sections or pages.",
-    url: "/projects/sistent/components/link",
-  },
-  {
-    id: 8,
-    name: "Container",
-    description:
-      "Containers align and center content, providing responsive layout options for different screen sizes.",
-    url: "/projects/sistent/components/container",
-  },
-  {
-    id: 9,
-    name: "ButtonGroup",
-    description:
-      "ButtonGroup is a component that groups multiple buttons together.",
-    url: "/projects/sistent/components/button-group",
-  },
-];
 
 const SistentComponents = () => {
   const [searchQuery, setSearchQuery] = useState("");
diff --git a/src/sections/Projects/Sistent/components/link/code.js b/src/sections/Projects/Sistent/components/link/code.js
index 2096cd6fd8f8..6e8b91eefff3 100644
--- a/src/sections/Projects/Sistent/components/link/code.js
+++ b/src/sections/Projects/Sistent/components/link/code.js
@@ -68,7 +68,7 @@ const codes = [
       </Link>
     </SistentThemeProvider>`,
 
-    ` <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+  ` <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
       <Link
         href="https://your-link.com" 
         target="_blank"
@@ -81,21 +81,20 @@ const codes = [
       >
         Visit Secure Link
       </Link>
-    </SistentThemeProvider>`
+    </SistentThemeProvider>`,
 ];
 
-export const LinkCode = () => {
+const LinkCode = () => {
   const location = useLocation();
   const { isDark } = useStyledDarkMode();
 
   return (
-    <SistentLayout title="Link" >
+    <SistentLayout title="Link">
       <div className="content">
         <a id="Identity">
           <h2>Link</h2>
         </a>
-        <p>
-        </p>
+        <p></p>
         <div className="filterBtns">
           <TabButton
             className={
@@ -108,8 +107,7 @@ export const LinkCode = () => {
           />
           <TabButton
             className={
-              location.pathname ===
-              "/projects/sistent/components/link/guidance"
+              location.pathname === "/projects/sistent/components/link/guidance"
                 ? "active"
                 : ""
             }
@@ -130,12 +128,20 @@ export const LinkCode = () => {
         </div>
         <div className="main-content">
           <p>
-          Links are fundamental components in web navigation, allowing users to move between different pages or resources. Their design and implementation are crucial for creating a seamless browsing experience.
+            Links are fundamental components in web navigation, allowing users
+            to move between different pages or resources. Their design and
+            implementation are crucial for creating a seamless browsing
+            experience.
           </p>
           <a id="Simple Link">
             <h2>Simple Link</h2>
           </a>
-          <p>The link can be presented in a simple format, primarily as underlined text that serves as a gateway to navigate users to other pages or resources, without any prominent styling or buttons attached to it.</p>
+          <p>
+            The link can be presented in a simple format, primarily as
+            underlined text that serves as a gateway to navigate users to other
+            pages or resources, without any prominent styling or buttons
+            attached to it.
+          </p>
           <div className="showcase">
             <div className="items">
               <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
@@ -157,17 +163,23 @@ export const LinkCode = () => {
             <h2>Customized Links</h2>
           </a>
           <p>
-          Customized Links enhance user experience by adapting their design and behavior to match the app’s theme. They can include personalized styles, hover effects, or icons, ensuring both visual consistency and improved usability across the website.
+            Customized Links enhance user experience by adapting their design
+            and behavior to match the app’s theme. They can include personalized
+            styles, hover effects, or icons, ensuring both visual consistency
+            and improved usability across the website.
           </p>
 
           <h3>Colored Link</h3>
           <p>
-          Colored Links can help draw attention to key areas of a page. They are styled with custom colors to stand out and indicate their importance, enhancing navigation and usability.
+            Colored Links can help draw attention to key areas of a page. They
+            are styled with custom colors to stand out and indicate their
+            importance, enhancing navigation and usability.
           </p>
           <div className="showcase">
             <div className="items">
               <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
-                <Link href="Your Path"
+                <Link
+                  href="Your Path"
                   style={{
                     textDecoration: "none",
                     color: "blue",
@@ -184,7 +196,10 @@ export const LinkCode = () => {
 
           <h3>Underlined Link</h3>
           <p>
-            Underlined Links, often referred to as ghost buttons, are styled primarily with text without any fills or borders. They utilize specific text styling and color to signify different states, making them easily identifiable and enhancing user navigation.
+            Underlined Links, often referred to as ghost buttons, are styled
+            primarily with text without any fills or borders. They utilize
+            specific text styling and color to signify different states, making
+            them easily identifiable and enhancing user navigation.
           </p>
           <div className="showcase">
             <div className="items">
@@ -197,7 +212,7 @@ export const LinkCode = () => {
                     marginLeft: "10px",
                   }}
                 >
-                 Underlined Link
+                  Underlined Link
                 </Link>
               </SistentThemeProvider>
             </div>
@@ -206,7 +221,10 @@ export const LinkCode = () => {
 
           <h3>Customized Link </h3>
           <p>
-            Customized Links allow for distinct text styles and presentations that can enhance the user experience. By leveraging different styling properties, these links can be tailored to fit the design aesthetics of your application while maintaining functionality.
+            Customized Links allow for distinct text styles and presentations
+            that can enhance the user experience. By leveraging different
+            styling properties, these links can be tailored to fit the design
+            aesthetics of your application while maintaining functionality.
           </p>
           <div className="showcase">
             <div className="items">
@@ -233,7 +251,9 @@ export const LinkCode = () => {
             <h2>Security Considerations</h2>
           </a>
           <p>
-          When utilizing links we should use them with the target="_blank" attribute, it's essential to implement rel="noopener" or rel="noreferrer" to enhance security and user privacy
+            When utilizing links we should use them with the target="_blank"
+            attribute, it's essential to implement rel="noopener" or
+            rel="noreferrer" to enhance security and user privacy
           </p>
           <div className="showcase">
             <div className="items">
@@ -259,3 +279,4 @@ export const LinkCode = () => {
     </SistentLayout>
   );
 };
+export default LinkCode;
diff --git a/src/sections/Projects/Sistent/components/link/guidance.js b/src/sections/Projects/Sistent/components/link/guidance.js
index e07030a91889..48ae032caa14 100644
--- a/src/sections/Projects/Sistent/components/link/guidance.js
+++ b/src/sections/Projects/Sistent/components/link/guidance.js
@@ -6,10 +6,10 @@ import { SistentThemeProvider, Link, ExternalLinkIcon } from "@layer5/sistent";
 import { SistentLayout } from "../../sistent-layout";
 
 import TabButton from "../../../../../reusecore/Button";
-import StyledButton  from "../../../../../reusecore/Button";
+import StyledButton from "../../../../../reusecore/Button";
 import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
 
-export const LinkGuidancePage = () => {
+const LinkGuidancePage = () => {
   const location = useLocation();
   const { isDark } = useStyledDarkMode();
 
@@ -20,7 +20,8 @@ export const LinkGuidancePage = () => {
           <h2>Link</h2>
         </a>
         <p>
-        A link component is a navigational element that directs users to another page or section within an application.
+          A link component is a navigational element that directs users to
+          another page or section within an application.
         </p>
         <div className="filterBtns">
           <TabButton
@@ -34,8 +35,7 @@ export const LinkGuidancePage = () => {
           />
           <TabButton
             className={
-              location.pathname ===
-              "/projects/sistent/components/link/guidance"
+              location.pathname === "/projects/sistent/components/link/guidance"
                 ? "active"
                 : ""
             }
@@ -56,17 +56,20 @@ export const LinkGuidancePage = () => {
         </div>
         <div className="main-content">
           <p>
-          Links are fundamental components in web navigation, allowing users to move between different pages or resources. Their design and implementation are crucial for creating a seamless browsing experience.
+            Links are fundamental components in web navigation, allowing users
+            to move between different pages or resources. Their design and
+            implementation are crucial for creating a seamless browsing
+            experience.
           </p>
           <a id="Function">
             <h2>Function</h2>
           </a>
-          <p>
-            Links too have a lot many functions as:
-          </p>
+          <p>Links too have a lot many functions as:</p>
           <h3>Navigation Links</h3>
           <p>
-          These links help users navigate through a website, directing them to important sections or related content. They should be easily accessible and clearly labeled to enhance usability.
+            These links help users navigate through a website, directing them to
+            important sections or related content. They should be easily
+            accessible and clearly labeled to enhance usability.
           </p>
           <Row $Hcenter className="image-container">
             <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
@@ -85,11 +88,18 @@ export const LinkGuidancePage = () => {
           </Row>
           <h3>Call to Action (CTA) Links</h3>
           <p>
-          CTA links encourage users to take specific actions, such as signing up for a newsletter or downloading a resource. They should stand out visually to attract user attention and drive engagement.
+            CTA links encourage users to take specific actions, such as signing
+            up for a newsletter or downloading a resource. They should stand out
+            visually to attract user attention and drive engagement.
           </p>
           <Row $Hcenter className="image-container">
             <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
-              <StyledButton  $primary $url="" className="button" $external={false}>
+              <StyledButton
+                $primary
+                $url=""
+                className="button"
+                $external={false}
+              >
                 <Link
                   href="https://layer5.io/projects/sistent/components/link/guidance" // Specify the path you want to navigate to
                   style={{
@@ -105,7 +115,10 @@ export const LinkGuidancePage = () => {
           </Row>
           <h3>External Links</h3>
           <p>
-          These links direct users to external websites. It’s important to provide clear indicators (like icons or different styles) that these links lead to external content, which helps users manage their navigation expectations.
+            These links direct users to external websites. It’s important to
+            provide clear indicators (like icons or different styles) that these
+            links lead to external content, which helps users manage their
+            navigation expectations.
           </p>
           <Row $Hcenter className="image-container">
             <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
@@ -121,7 +134,9 @@ export const LinkGuidancePage = () => {
                   display: "inline-flex",
                   alignItems: "center",
                 }}
-                onMouseEnter={(e) => (e.target.style.textDecoration = "underline")}
+                onMouseEnter={(e) =>
+                  (e.target.style.textDecoration = "underline")
+                }
                 onMouseLeave={(e) => (e.target.style.textDecoration = "none")}
               >
                 Visit External Resource <ExternalLinkIcon />
@@ -133,22 +148,37 @@ export const LinkGuidancePage = () => {
             <h2>Labeling</h2>
           </a>
           <p>
-          Link labels are vital for communicating the action associated with the link. Labels should be concise, informative, and use action-oriented language (e.g., "Download Report," "Learn More") to guide users effectively.
+            Link labels are vital for communicating the action associated with
+            the link. Labels should be concise, informative, and use
+            action-oriented language (e.g., "Download Report," "Learn More") to
+            guide users effectively.
           </p>
           <h3>Case Style</h3>
           <p>
-          Consistency in the case style of link text improves readability and enhances the overall aesthetic of the website. Using a uniform style, such as sentence case or title case, contributes to a more professional appearance.
+            Consistency in the case style of link text improves readability and
+            enhances the overall aesthetic of the website. Using a uniform
+            style, such as sentence case or title case, contributes to a more
+            professional appearance.
           </p>
           <h3>Font Weight</h3>
           <p>
-          The weight of the font in link text can signify importance and attract user attention. A bolder font can indicate a primary action, while a lighter font may denote secondary options. Legibility is essential for ensuring that links are easy to read.
+            The weight of the font in link text can signify importance and
+            attract user attention. A bolder font can indicate a primary action,
+            while a lighter font may denote secondary options. Legibility is
+            essential for ensuring that links are easy to read.
           </p>
           <h3>Text Decoration</h3>
           <p>
-          Links typically use underlines to distinguish them from regular text. However, it’s important to maintain the underline for accessibility and usability, as users often associate underlined text with clickable links. Consider hover effects to provide visual feedback.
+            Links typically use underlines to distinguish them from regular
+            text. However, it’s important to maintain the underline for
+            accessibility and usability, as users often associate underlined
+            text with clickable links. Consider hover effects to provide visual
+            feedback.
           </p>
         </div>
       </div>
     </SistentLayout>
   );
 };
+
+export default LinkGuidancePage;
diff --git a/src/sections/Projects/Sistent/components/modal/code.js b/src/sections/Projects/Sistent/components/modal/code.js
index b71e2b8962bb..174e1c8b7e5d 100644
--- a/src/sections/Projects/Sistent/components/modal/code.js
+++ b/src/sections/Projects/Sistent/components/modal/code.js
@@ -80,7 +80,7 @@ const codes = [
     </Modal>`,
 ];
 
-export const ModalCode = () => {
+const ModalCode = () => {
   const [open, setOpen] = useState(false);
   const [actionOpen, setActionOpen] = useState(false);
   const location = useLocation();
diff --git a/src/sections/Projects/Sistent/components/modal/guidance.js b/src/sections/Projects/Sistent/components/modal/guidance.js
index 99dba2bd4dd7..fdb7e0bf197c 100644
--- a/src/sections/Projects/Sistent/components/modal/guidance.js
+++ b/src/sections/Projects/Sistent/components/modal/guidance.js
@@ -4,7 +4,7 @@ import TabButton from "../../../../../reusecore/Button";
 import { navigate } from "gatsby";
 import { useLocation } from "@reach/router";
 
-export const ModalGuidance = () => {
+const ModalGuidance = () => {
   const location = useLocation();
   return (
     <SistentLayout title="Modal">
diff --git a/src/sections/Projects/Sistent/components/modal/index.js b/src/sections/Projects/Sistent/components/modal/index.js
index f89f2e129bc7..dd7b698b98b2 100644
--- a/src/sections/Projects/Sistent/components/modal/index.js
+++ b/src/sections/Projects/Sistent/components/modal/index.js
@@ -8,7 +8,7 @@ import ConfirmationDarkBg from "../../../../../assets/images/app/projects/sisten
 import { Col, Row } from "../../../../../reusecore/Layout";
 import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
 
-export const SistentModal = () => {
+const SistentModal = () => {
   const location = useLocation();
   const { isDark } = useStyledDarkMode();
   return (
diff --git a/src/sections/Projects/Sistent/components/paper/index.js b/src/sections/Projects/Sistent/components/paper/index.js
index 34ed637986af..519525e0d48c 100644
--- a/src/sections/Projects/Sistent/components/paper/index.js
+++ b/src/sections/Projects/Sistent/components/paper/index.js
@@ -6,7 +6,7 @@ import { useLocation } from "@reach/router";
 import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
 import { Paper, SistentThemeProvider } from "@layer5/sistent";
 
-export const SistentPaper = () => {
+const SistentPaper = () => {
   const location = useLocation();
   const { isDark } = useStyledDarkMode();
   return (
diff --git a/src/sections/Projects/Sistent/components/popper/code.js b/src/sections/Projects/Sistent/components/popper/code.js
index 7983121f6aeb..d34899bdf4e1 100644
--- a/src/sections/Projects/Sistent/components/popper/code.js
+++ b/src/sections/Projects/Sistent/components/popper/code.js
@@ -138,7 +138,7 @@ const codes = [
   </Box>`,
 ];
 
-export const PooperCode = () => {
+const PooperCode = () => {
   const { isDark } = useStyledDarkMode();
   const location = useLocation();
 
@@ -345,3 +345,5 @@ export const PooperCode = () => {
     </SistentLayout>
   );
 };
+
+export default PooperCode;
diff --git a/src/sections/Projects/Sistent/components/popper/guidance.js b/src/sections/Projects/Sistent/components/popper/guidance.js
index 8a9e4a4c9dab..f08720d6a236 100644
--- a/src/sections/Projects/Sistent/components/popper/guidance.js
+++ b/src/sections/Projects/Sistent/components/popper/guidance.js
@@ -7,7 +7,7 @@ import { Row } from "../../../../../reusecore/Layout";
 import TabButton from "../../../../../reusecore/Button";
 import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
 
-export const PopperGuidance = () => {
+const PopperGuidance = () => {
   const { isDark } = useStyledDarkMode();
   const location = useLocation();
   const [open, setOpen] = useState(false);
@@ -43,7 +43,7 @@ export const PopperGuidance = () => {
           <TabButton
             className={
               location.pathname ===
-                "/projects/sistent/components/popper/guidance"
+              "/projects/sistent/components/popper/guidance"
                 ? "active"
                 : ""
             }
@@ -170,3 +170,5 @@ export const PopperGuidance = () => {
     </SistentLayout>
   );
 };
+
+export default PopperGuidance;
diff --git a/src/sections/Projects/Sistent/components/popper/index.js b/src/sections/Projects/Sistent/components/popper/index.js
index 9931d3a4381b..6f2400d02c26 100644
--- a/src/sections/Projects/Sistent/components/popper/index.js
+++ b/src/sections/Projects/Sistent/components/popper/index.js
@@ -7,7 +7,7 @@ import { SistentLayout } from "../../sistent-layout";
 import { Row } from "../../../../../reusecore/Layout";
 import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
 
-export const SistentPopper = () => {
+const SistentPopper = () => {
   const location = useLocation();
   const { isDark } = useStyledDarkMode();
 
@@ -46,7 +46,7 @@ export const SistentPopper = () => {
           <TabButton
             className={
               location.pathname ===
-                "/projects/sistent/components/popper/guidance"
+              "/projects/sistent/components/popper/guidance"
                 ? "active"
                 : ""
             }
@@ -139,3 +139,5 @@ export const SistentPopper = () => {
     </SistentLayout>
   );
 };
+
+export default SistentPopper;
diff --git a/src/sections/Projects/Sistent/components/text-field/code.js b/src/sections/Projects/Sistent/components/text-field/code.js
index f1dd658f7469..ead9a2f449fc 100644
--- a/src/sections/Projects/Sistent/components/text-field/code.js
+++ b/src/sections/Projects/Sistent/components/text-field/code.js
@@ -316,18 +316,21 @@ const codes = [
   </Box>`,
 ];
 
-export const TextFieldCode = () => {
+const TextFieldCode = () => {
   const location = useLocation();
   const { isDark } = useStyledDarkMode();
 
   return (
-    <SistentLayout title="TextField" >
+    <SistentLayout title="TextField">
       <div className="content">
         <a id="Identity">
           <h2>Text Field</h2>
         </a>
         <p>
-          The TextField component is a versatile input field used to capture user input in forms and user interfaces. It can handle a variety of input types, such as text, numbers, emails, and passwords, and offers built-in styling and validation features.
+          The TextField component is a versatile input field used to capture
+          user input in forms and user interfaces. It can handle a variety of
+          input types, such as text, numbers, emails, and passwords, and offers
+          built-in styling and validation features.
         </p>
         <div className="filterBtns">
           <TabButton
@@ -342,7 +345,7 @@ export const TextFieldCode = () => {
           <TabButton
             className={
               location.pathname ===
-                "/projects/sistent/components/text-field/guidance"
+              "/projects/sistent/components/text-field/guidance"
                 ? "active"
                 : ""
             }
@@ -353,7 +356,8 @@ export const TextFieldCode = () => {
           />
           <TabButton
             className={
-              location.pathname === "/projects/sistent/components/text-field/code"
+              location.pathname ===
+              "/projects/sistent/components/text-field/code"
                 ? "active"
                 : ""
             }
@@ -363,16 +367,17 @@ export const TextFieldCode = () => {
         </div>
         <div className="main-content">
           <p>
-            A TextField allow user to enter and edit any text. It mostly present in Forms or dialogue box in UI.
-            TextField are crucial and integral elements in an interface. It allows to get data from enetered user.
+            A TextField allow user to enter and edit any text. It mostly present
+            in Forms or dialogue box in UI. TextField are crucial and integral
+            elements in an interface. It allows to get data from enetered user.
           </p>
           <a id="Form Props">
             <h2>Form Props</h2>
           </a>
           <p>
-            Standard form attributes are supported, for example required, disabled, type, etc.
-            HelperText attributes is used to give context about a field's input,
-            such as how the input will be used.
+            Standard form attributes are supported, for example required,
+            disabled, type, etc. HelperText attributes is used to give context
+            about a field's input, such as how the input will be used.
           </p>
           <div className="showcase">
             <div className="tf-items">
@@ -407,7 +412,11 @@ export const TextFieldCode = () => {
                       label="Number"
                       type="number"
                     />
-                    <TextField id="outlined-search" label="Search field" type="search" />
+                    <TextField
+                      id="outlined-search"
+                      label="Search field"
+                      type="search"
+                    />
                     <TextField
                       id="outlined-helperText"
                       label="Helper text"
@@ -508,7 +517,10 @@ export const TextFieldCode = () => {
             <h2>Validation</h2>
           </a>
           <p>
-            The error property toggles the error state. The helperText prop can then be used to provide feedback to the user about the error. As shown below it can be used with variant such as outlined (default), filled, and standard.
+            The error property toggles the error state. The helperText prop can
+            then be used to provide feedback to the user about the error. As
+            shown below it can be used with variant such as outlined (default),
+            filled, and standard.
           </p>
           <div className="showcase">
             <div className="tf-items">
@@ -577,7 +589,10 @@ export const TextFieldCode = () => {
             <h2>Multiline</h2>
           </a>
           <p>
-            The multiline prop transforms the text field into a TextareaAutosize element. Unless the rows prop is set, the height of the text field dynamically matches its content (using TextareaAutosize). You can use the minRows and maxRows props to bound it.
+            The multiline prop transforms the text field into a TextareaAutosize
+            element. Unless the rows prop is set, the height of the text field
+            dynamically matches its content (using TextareaAutosize). You can
+            use the minRows and maxRows props to bound it.
           </p>
           <div className="showcase">
             <div className="tf-items">
@@ -666,7 +681,8 @@ export const TextFieldCode = () => {
             <h2>Sizes</h2>
           </a>
           <p>
-            TextField can have small or normal field sizes. According the requirement it can be adjusted.
+            TextField can have small or normal field sizes. According the
+            requirement it can be adjusted.
           </p>
           <div className="showcase">
             <div className="tf-items">
@@ -684,7 +700,11 @@ export const TextFieldCode = () => {
                       defaultValue="Small"
                       size="small"
                     />
-                    <TextField label="Size" id="outlined-size-normal" defaultValue="Normal" />
+                    <TextField
+                      label="Size"
+                      id="outlined-size-normal"
+                      defaultValue="Normal"
+                    />
                   </div>
                   <div>
                     <TextField
@@ -725,7 +745,8 @@ export const TextFieldCode = () => {
             <h2>Full Width</h2>
           </a>
           <p>
-            FullWidth attribute can be used to make the input take up the full width of its container.
+            FullWidth attribute can be used to make the input take up the full
+            width of its container.
           </p>
           <div className="showcase">
             <div className="tf-items">
@@ -744,4 +765,4 @@ export const TextFieldCode = () => {
   );
 };
 
-
+export default TextFieldCode;
diff --git a/src/sections/Projects/Sistent/components/text-field/guidance.js b/src/sections/Projects/Sistent/components/text-field/guidance.js
index 7f07899f1fc8..bfb5cf9ef39f 100644
--- a/src/sections/Projects/Sistent/components/text-field/guidance.js
+++ b/src/sections/Projects/Sistent/components/text-field/guidance.js
@@ -7,7 +7,7 @@ import { SistentLayout } from "../../sistent-layout";
 import TabButton from "../../../../../reusecore/Button";
 import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
 
-export const TextFieldGuidance = () => {
+const TextFieldGuidance = () => {
   const location = useLocation();
   const { isDark } = useStyledDarkMode();
 
@@ -18,7 +18,10 @@ export const TextFieldGuidance = () => {
           <h2>Text Field</h2>
         </a>
         <p>
-          The TextField component is a versatile input field used to capture user input in forms and user interfaces. It can handle a variety of input types, such as text, numbers, emails, and passwords, and offers built-in styling and validation features.
+          The TextField component is a versatile input field used to capture
+          user input in forms and user interfaces. It can handle a variety of
+          input types, such as text, numbers, emails, and passwords, and offers
+          built-in styling and validation features.
         </p>
         <div className="filterBtns">
           <TabButton
@@ -33,7 +36,7 @@ export const TextFieldGuidance = () => {
           <TabButton
             className={
               location.pathname ===
-                "/projects/sistent/components/text-field/guidance"
+              "/projects/sistent/components/text-field/guidance"
                 ? "active"
                 : ""
             }
@@ -44,25 +47,31 @@ export const TextFieldGuidance = () => {
           />
           <TabButton
             className={
-              location.pathname === "/projects/sistent/components/text-field/code"
+              location.pathname ===
+              "/projects/sistent/components/text-field/code"
                 ? "active"
                 : ""
             }
-            onClick={() => navigate("/projects/sistent/components/text-field/code")}
+            onClick={() =>
+              navigate("/projects/sistent/components/text-field/code")
+            }
             title="Code"
           />
         </div>
         <div className="main-content">
           <p>
             For proper application, these TextField can be used for different
-            purposes. It can be effectively used in any project to increase User Interaction.
-            Lets see how can we use TextField effectively in our project.
+            purposes. It can be effectively used in any project to increase User
+            Interaction. Lets see how can we use TextField effectively in our
+            project.
           </p>
           <a id="Basic TextField">
             <h2>Basic TextField</h2>
           </a>
           <p>
-            The TextField wrapper component is a complete form control including a label, variant, helper text etc. TextField comes with three variants: outlined (default), filled, and standard.
+            The TextField wrapper component is a complete form control including
+            a label, variant, helper text etc. TextField comes with three
+            variants: outlined (default), filled, and standard.
           </p>
           <h3>Outlined (default)</h3>
           <p>
@@ -79,15 +88,19 @@ export const TextFieldGuidance = () => {
               noValidate
               autoComplete="off"
             >
-              <TextField id="outlined-basic" label="Outlined" variant="outlined" />
+              <TextField
+                id="outlined-basic"
+                label="Outlined"
+                variant="outlined"
+              />
             </Box>
           </SistentThemeProvider>
           <h3>Filled</h3>
           <p>
-            Filled TextField are TextField that consist a background color fill and
-            a text in it. Depending on the theme or intended action, the color
-            fill can range from a primary brand color to any other applicable
-            color in a brand’s color palette.
+            Filled TextField are TextField that consist a background color fill
+            and a text in it. Depending on the theme or intended action, the
+            color fill can range from a primary brand color to any other
+            applicable color in a brand’s color palette.
           </p>
           <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
             <Box
@@ -101,9 +114,9 @@ export const TextFieldGuidance = () => {
           </SistentThemeProvider>
           <h3>Standard</h3>
           <p>
-            Standard TextField are TextField that do not have background color fill and
-            a text in it. Colors can also be used to style these buttons in order to fit
-            into the theme align with brand guidelines.
+            Standard TextField are TextField that do not have background color
+            fill and a text in it. Colors can also be used to style these
+            buttons in order to fit into the theme align with brand guidelines.
           </p>
           <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
             <Box
@@ -112,19 +125,23 @@ export const TextFieldGuidance = () => {
               noValidate
               autoComplete="off"
             >
-              <TextField id="standard-basic" label="Standard" variant="standard" />
+              <TextField
+                id="standard-basic"
+                label="Standard"
+                variant="standard"
+              />
             </Box>
           </SistentThemeProvider>
           <a id="When to use different properties?">
             <h2>When to use different properties?</h2>
           </a>
           <p>
-            You might come across in a situation you needed some helper text, field with number, disabled field etc. Let's see different properties availble for TextField.
+            You might come across in a situation you needed some helper text,
+            field with number, disabled field etc. Let's see different
+            properties availble for TextField.
           </p>
           <h3>Type prop</h3>
-          <p>
-            Type prop can have a value such as password, number or text.
-          </p>
+          <p>Type prop can have a value such as password, number or text.</p>
           <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
             <Box
               component="form"
@@ -139,22 +156,15 @@ export const TextFieldGuidance = () => {
                   type="password"
                   autoComplete="current-password"
                 />
-                <TextField
-                  id="outlined-number"
-                  label="Number"
-                  type="number"
-                />
-                <TextField
-                  id="outlined-text"
-                  label="Text"
-                  type="text"
-                />
+                <TextField id="outlined-number" label="Number" type="number" />
+                <TextField id="outlined-text" label="Text" type="text" />
               </div>
             </Box>
           </SistentThemeProvider>
           <h3>Helper Text</h3>
           <p>
-            Helper text also very effective for your form or for better understanding.
+            Helper text also very effective for your form or for better
+            understanding.
           </p>
           <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
             <Box
@@ -175,7 +185,10 @@ export const TextFieldGuidance = () => {
           </SistentThemeProvider>
           <h3>Error</h3>
           <p>
-            Error handling is very important for UI. User might come in sitatution where they enter invalid value or forget to enter any data in TextField. Here come error prop helps to indicate partucular field are required or user have entered invalid value.
+            Error handling is very important for UI. User might come in
+            sitatution where they enter invalid value or forget to enter any
+            data in TextField. Here come error prop helps to indicate partucular
+            field are required or user have entered invalid value.
           </p>
           <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
             <Box
@@ -199,3 +212,5 @@ export const TextFieldGuidance = () => {
     </SistentLayout>
   );
 };
+
+export default TextFieldGuidance;
diff --git a/src/sections/Projects/Sistent/components/text-input/code.js b/src/sections/Projects/Sistent/components/text-input/code.js
index 3d2c35a33d90..7749ec23e2c0 100644
--- a/src/sections/Projects/Sistent/components/text-input/code.js
+++ b/src/sections/Projects/Sistent/components/text-input/code.js
@@ -5,7 +5,7 @@ import { SistentLayout } from "../../sistent-layout";
 
 import TabButton from "../../../../../reusecore/Button";
 
-export const TextInputCode = () => {
+const TextInputCode = () => {
   const location = useLocation();
 
   return (
@@ -61,3 +61,5 @@ export const TextInputCode = () => {
     </SistentLayout>
   );
 };
+
+export default TextInputCode;
diff --git a/src/sections/Projects/Sistent/components/text-input/guidance.js b/src/sections/Projects/Sistent/components/text-input/guidance.js
index 09c455fe260d..f501f68590d0 100644
--- a/src/sections/Projects/Sistent/components/text-input/guidance.js
+++ b/src/sections/Projects/Sistent/components/text-input/guidance.js
@@ -8,7 +8,7 @@ import { SistentLayout } from "../../sistent-layout";
 
 import TabButton from "../../../../../reusecore/Button";
 import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
-export const TextInputGuidance = () => {
+const TextInputGuidance = () => {
   const location = useLocation();
   const { isDark } = useStyledDarkMode();
 
@@ -126,3 +126,5 @@ export const TextInputGuidance = () => {
     </SistentLayout>
   );
 };
+
+export default TextInputGuidance;
diff --git a/src/sections/Projects/Sistent/components/tooltip/code.js b/src/sections/Projects/Sistent/components/tooltip/code.js
new file mode 100644
index 000000000000..a537bf3e9590
--- /dev/null
+++ b/src/sections/Projects/Sistent/components/tooltip/code.js
@@ -0,0 +1,463 @@
+import React from "react";
+import { navigate } from "gatsby";
+import { useLocation } from "@reach/router";
+import {
+  SistentThemeProvider,
+  Button,
+  Box,
+  Grid,
+  CustomTooltip,
+} from "@layer5/sistent";
+import { SistentLayout } from "../../sistent-layout";
+import { CodeBlock } from "../button/code-block";
+import TabButton from "../../../../../reusecore/Button";
+import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
+
+const codes = [
+  `<CustomTooltip title="Submit">
+  <span>
+    <Button variant="contained" label="Submit" size="medium" />
+  </span>
+</CustomTooltip>`,
+  `<Box sx={{ width: 500 }}>
+  <Grid container sx={{ justifyContent: "center" }}>
+    <Grid item>
+      <CustomTooltip title="Add" placement="top-start">
+        <span>
+          <Button>top-start</Button>
+        </span>
+      </CustomTooltip>
+      <CustomTooltip title="Add" placement="top">
+        <span>
+          <Button>top</Button>
+        </span>
+      </CustomTooltip>
+      <CustomTooltip title="Add" placement="top-end">
+        <span>
+          <Button>top-end</Button>
+        </span>
+      </CustomTooltip>
+    </Grid>
+  </Grid>
+  <Grid container sx={{ justifyContent: "center" }}>
+    <Grid item xs={6}>
+      <CustomTooltip title="Add" placement="left-start">
+        <span>
+          <Button>left-start</Button>
+        </span>
+      </CustomTooltip>
+      <br />
+      <CustomTooltip title="Add" placement="left">
+        <span>
+          <Button>left</Button>
+        </span>
+      </CustomTooltip>
+      <br />
+      <CustomTooltip title="Add" placement="left-end">
+        <span>
+          <Button>left-end</Button>
+        </span>
+      </CustomTooltip>
+    </Grid>
+    <Grid
+      item
+      container
+      xs={6}
+      direction="column"
+      sx={{ alignItems: "flex-end" }}
+    >
+      <Grid item>
+        <CustomTooltip title="Add" placement="right-start">
+          <span>
+            <Button>right-start</Button>
+          </span>
+        </CustomTooltip>
+      </Grid>
+      <Grid item>
+        <CustomTooltip title="Add" placement="right">
+          <span>
+            <Button>right</Button>
+          </span>
+        </CustomTooltip>
+      </Grid>
+      <Grid item>
+        <CustomTooltip title="Add" placement="right-end">
+          <span>
+            <Button>right-end</Button>
+          </span>
+        </CustomTooltip>
+      </Grid>
+    </Grid>
+  </Grid>
+  <Grid container sx={{ justifyContent: "center" }}>
+    <Grid item>
+      <CustomTooltip title="Add" placement="bottom-start">
+        <span>
+          <Button>bottom-start</Button>
+        </span>
+      </CustomTooltip>
+      <CustomTooltip title="Add" placement="bottom">
+        <span>
+          <Button>bottom</Button>
+        </span>
+      </CustomTooltip>
+      <CustomTooltip title="Add" placement="bottom-end">
+        <span>
+          <Button>bottom-end</Button>
+        </span>
+      </CustomTooltip>
+    </Grid>
+  </Grid>
+</Box>`,
+  `<CustomTooltip
+  title="Add"
+  slotProps={{
+    popper: {
+      modifiers: [
+        {
+          name: "offset",
+          options: {
+            offset: [0, -14],
+          },
+        },
+      ],
+    },
+  }}
+>
+  <span>
+    <Button variant="contained" size="medium">  
+      Offset
+    </Button>
+  </span>
+</CustomTooltip>`,
+  `<CustomTooltip title="Add" variant="standard">
+  <span>
+    <Button variant="contained" size="medium">
+      standard
+    </Button>
+  </span>
+</CustomTooltip>
+<CustomTooltip title="Add" variant="small">
+  <span>
+    <Button variant="contained" size="medium">
+      small
+    </Button>
+  </span>
+</CustomTooltip>`,
+  `<CustomTooltip title="Follow Cursor" followCursor>
+  <span>
+    <Button variant="contained" size="medium">
+      Button
+    </Button>
+  </span>
+</CustomTooltip>`,
+  `<CustomTooltip title="Add" enterDelay={500} leaveDelay={200}>
+  <span>
+    <Button variant="text" size="medium">
+      [500MS, 200MS]
+    </Button>
+  </span>
+</CustomTooltip>`,
+];
+
+const TooltipCode = () => {
+  const { isDark } = useStyledDarkMode();
+  const location = useLocation();
+
+  return (
+    <SistentLayout title="Tooltip">
+      <div className="content">
+        <a id="Identity">
+          <h2>Tooltip</h2>
+        </a>
+        <p>
+          The Tooltip component displays informative text when users hover over,
+          focus on, or tap an element. Tooltips are designed to enhance
+          accessibility and user understanding of interface elements.
+        </p>
+        <div className="filterBtns">
+          <TabButton
+            className={
+              location.pathname === "/projects/sistent/components/tooltip"
+                ? "active"
+                : ""
+            }
+            onClick={() =>
+              navigate("/projects/sistent/components/tooltip")
+            }
+            title="Overview"
+          />
+          <TabButton
+            className={
+              location.pathname ===
+              "/projects/sistent/components/tooltip/guidance"
+                ? "active"
+                : ""
+            }
+            onClick={() =>
+              navigate("/projects/sistent/components/tooltip/guidance")
+            }
+            title="Guidance"
+          />
+          <TabButton
+            className={
+              location.pathname ===
+              "/projects/sistent/components/tooltip/code"
+                ? "active"
+                : ""
+            }
+            onClick={() =>
+              navigate("/projects/sistent/components/tooltip/code")
+            }
+            title="Code"
+          />
+        </div>
+        <div className="main-content">
+          <p>
+            The Tooltip component displays informative text when users hover
+            over, focus on, or tap an element. Tooltips are designed to enhance
+            accessibility and user understanding of interface elements.
+          </p>
+          <a id="Basic Tooltip">
+            <h3>Basic Tooltip</h3>
+          </a>
+          <div className="showcase">
+            <div className="items">
+              <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+                <CustomTooltip title="Submit">
+                  <span>
+                    <Button variant="contained" label="Submit" size="medium" />
+                  </span>
+                </CustomTooltip>
+              </SistentThemeProvider>
+            </div>
+            <CodeBlock name="basic-Tooltip" code={codes[0]} />
+          </div>
+          <a id="Positioned Example">
+            <h3>Positioned Example</h3>
+          </a>
+          <p>
+            You can specify the position of the Popper using the{" "}
+            <code>placement</code> prop. Here's an example of a Tooltip
+            positioned above its anchor:
+          </p>
+          <div className="showcase">
+            <div className="items">
+              <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+                <Box sx={{ width: 500 }}>
+                  <Grid container sx={{ justifyContent: "center" }}>
+                    <Grid item>
+                      <CustomTooltip title="Add" placement="top-start">
+                        <span>
+                          <Button>top-start</Button>
+                        </span>
+                      </CustomTooltip>
+                      <CustomTooltip title="Add" placement="top">
+                        <span>
+                          <Button>top</Button>
+                        </span>
+                      </CustomTooltip>
+                      <CustomTooltip title="Add" placement="top-end">
+                        <span>
+                          <Button>top-end</Button>
+                        </span>
+                      </CustomTooltip>
+                    </Grid>
+                  </Grid>
+                  <Grid container sx={{ justifyContent: "center" }}>
+                    <Grid item xs={6}>
+                      <CustomTooltip title="Add" placement="left-start">
+                        <span>
+                          <Button>left-start</Button>
+                        </span>
+                      </CustomTooltip>
+                      <br />
+                      <CustomTooltip title="Add" placement="left">
+                        <span>
+                          <Button>left</Button>
+                        </span>
+                      </CustomTooltip>
+                      <br />
+                      <CustomTooltip title="Add" placement="left-end">
+                        <span>
+                          <Button>left-end</Button>
+                        </span>
+                      </CustomTooltip>
+                    </Grid>
+                    <Grid
+                      item
+                      container
+                      xs={6}
+                      direction="column"
+                      sx={{ alignItems: "flex-end" }}
+                    >
+                      <Grid item>
+                        <CustomTooltip title="Add" placement="right-start">
+                          <span>
+                            <Button>right-start</Button>
+                          </span>
+                        </CustomTooltip>
+                      </Grid>
+                      <Grid item>
+                        <CustomTooltip title="Add" placement="right">
+                          <span>
+                            <Button>right</Button>
+                          </span>
+                        </CustomTooltip>
+                      </Grid>
+                      <Grid item>
+                        <CustomTooltip title="Add" placement="right-end">
+                          <span>
+                            <Button>right-end</Button>
+                          </span>
+                        </CustomTooltip>
+                      </Grid>
+                    </Grid>
+                  </Grid>
+                  <Grid container sx={{ justifyContent: "center" }}>
+                    <Grid item>
+                      <CustomTooltip title="Add" placement="bottom-start">
+                        <span>
+                          <Button>bottom-start</Button>
+                        </span>
+                      </CustomTooltip>
+                      <CustomTooltip title="Add" placement="bottom">
+                        <span>
+                          <Button>bottom</Button>
+                        </span>
+                      </CustomTooltip>
+                      <CustomTooltip title="Add" placement="bottom-end">
+                        <span>
+                          <Button>bottom-end</Button>
+                        </span>
+                      </CustomTooltip>
+                    </Grid>
+                  </Grid>
+                </Box>
+              </SistentThemeProvider>
+            </div>
+            <CodeBlock name="positioned-example" code={codes[1]} />
+          </div>
+          <a id="Distance from anchor">
+            <h3>Distance from anchor</h3>
+          </a>
+          <p>
+            To adjust the distance between the tooltip and its anchor, you can
+            use the slotProps prop to modify the offset of the popper.
+          </p>
+          <div className="showcase">
+            <div className="items">
+              <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+                <CustomTooltip
+                  title="Add"
+                  slotProps={{
+                    popper: {
+                      modifiers: [
+                        {
+                          name: "offset",
+                          options: {
+                            offset: [0, -14],
+                          },
+                        },
+                      ],
+                    },
+                  }}
+                >
+                  <span>
+                    <Button variant="contained" size="medium">
+                      Offset
+                    </Button>
+                  </span>
+                </CustomTooltip>
+              </SistentThemeProvider>
+            </div>
+            <CodeBlock name="distance-anchor" code={codes[2]} />
+          </div>
+          <a id="Variable width">
+            <h3>Variable width</h3>
+          </a>
+          <p>
+            The variant prop in Tooltip allows you to control the tooltips size
+            with predefined styles (standard or small). This makes it easier to
+            adjust the tooltip to fit various UI requirements quickly and
+            consistently.
+          </p>
+          <div className="showcase">
+            <div className="items">
+              <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+                <Box
+                  sx={{
+                    display: "flex",
+                    "& > *": {
+                      m: 1,
+                    },
+                  }}
+                >
+                  <CustomTooltip title="Add" variant="standard">
+                    <span>
+                      <Button variant="contained" size="medium">
+                        standard
+                      </Button>
+                    </span>
+                  </CustomTooltip>
+                  <CustomTooltip title="Add" variant="small">
+                    <span>
+                      <Button variant="contained" size="medium">
+                        small
+                      </Button>
+                    </span>
+                  </CustomTooltip>
+                </Box>
+              </SistentThemeProvider>
+            </div>
+            <CodeBlock name="variable-width" code={codes[3]} />
+          </div>
+          <a id="Follow cursor">
+            <h3>Follow Cursor</h3>
+          </a>
+          <p>
+            Tooltips can be configured to follow the cursor, making it easier to
+            read the content.
+          </p>
+          <div className="showcase">
+            <div className="items">
+              <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+                <CustomTooltip title="Follow Cursor" followCursor>
+                  <span>
+                    <Button variant="contained" size="medium">
+                      Button
+                    </Button>
+                  </span>
+                </CustomTooltip>
+              </SistentThemeProvider>
+            </div>
+            <CodeBlock name="follow-cursor" code={codes[4]} />
+          </div>
+          <a id="Showing and hiding">
+            <h3>Showing and Hiding</h3>
+          </a>
+          <p>
+            A delay in showing or hiding the tooltip can be added through the{" "}
+            <code>enterDelay</code> and <code>leaveDelay</code> props.
+          </p>
+          <div className="showcase">
+            <div className="items">
+              <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+                <CustomTooltip title="Add" enterDelay={500} leaveDelay={200}>
+                  <span>
+                    <Button variant="text" size="medium">
+                      [500MS, 200MS]
+                    </Button>
+                  </span>
+                </CustomTooltip>
+              </SistentThemeProvider>
+            </div>
+            <CodeBlock name="show-hide" code={codes[5]} />
+          </div>
+        </div>
+      </div>
+    </SistentLayout>
+  );
+};
+
+export default TooltipCode;
diff --git a/src/sections/Projects/Sistent/components/tooltip/guidance.js b/src/sections/Projects/Sistent/components/tooltip/guidance.js
new file mode 100644
index 000000000000..cd3071eda652
--- /dev/null
+++ b/src/sections/Projects/Sistent/components/tooltip/guidance.js
@@ -0,0 +1,270 @@
+import React from "react";
+import { navigate } from "gatsby";
+import { useLocation } from "@reach/router";
+import { SistentLayout } from "../../sistent-layout";
+import {
+  SistentThemeProvider,
+  Button,
+  Typography,
+  CustomTooltip,
+  Grid,
+} from "@layer5/sistent";
+import { Row } from "../../../../../reusecore/Layout";
+import TabButton from "../../../../../reusecore/Button";
+import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
+
+const TooltipGuidance = () => {
+  const { isDark } = useStyledDarkMode();
+  const location = useLocation();
+
+  return (
+    <SistentLayout title="Tooltip">
+      <div className="content">
+        <a id="Identity">
+          <h2>Tooltip</h2>
+        </a>
+        <p>
+          The Tooltip component displays informative text when users hover over,
+          focus on, or tap an element. Tooltips are designed to enhance
+          accessibility and user understanding of interface elements.
+        </p>
+        <div className="filterBtns">
+          <TabButton
+            className={
+              location.pathname === "/projects/sistent/components/tooltip"
+                ? "active"
+                : ""
+            }
+            onClick={() => navigate("/projects/sistent/components/tooltip")}
+            title="Overview"
+          />
+          <TabButton
+            className={
+              location.pathname ===
+              "/projects/sistent/components/tooltip/guidance"
+                ? "active"
+                : ""
+            }
+            onClick={() =>
+              navigate("/projects/sistent/components/tooltip/guidance")
+            }
+            title="Guidance"
+          />
+          <TabButton
+            className={
+              location.pathname === "/projects/sistent/components/tooltip/code"
+                ? "active"
+                : ""
+            }
+            onClick={() =>
+              navigate("/projects/sistent/components/tooltip/code")
+            }
+            title="Code"
+          />
+        </div>
+        <div className="main-content">
+          <p>
+            The Tooltip component displays informative text when users hover
+            over, focus on, or tap an element. Tooltips are designed to enhance
+            accessibility and user understanding of interface elements.
+          </p>
+
+          <a id="Positioning">
+            <h2>Positioning</h2>
+          </a>
+          <p>
+            The positioning of the Tooltip is critical for usability. Use the
+            `placement` prop to control where the Tooltip appears relative to
+            its anchor element. Options include:
+          </p>
+          <ul>
+            <li>top</li>
+            <li>bottom</li>
+            <li>left</li>
+            <li>right</li>
+            <li>top-start</li>
+            <li>top-end</li>
+            <li>bottom-start</li>
+            <li>bottom-end</li>
+            <li>left-start</li>
+            <li>left-end</li>
+            <li>right-start</li>
+            <li>right-end</li>
+          </ul>
+          <p>
+            Choosing the right position helps to prevent overlap with other
+            interface elements and improves readability.
+          </p>
+
+          <a id="Styling">
+            <h2>Styling</h2>
+          </a>
+          <p>
+            The Tooltip component inherits styles from the Sistent theme. You
+            can customize the appearance by applying styles to the content
+            inside the Tooltip. For instance:
+          </p>
+          <Row $Hcenter className="image-container">
+            <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+              <CustomTooltip
+                title={<Typography color="GrayText">Custom Tooltip</Typography>}
+              >
+                <span>
+                  <Button variant="text" label="Button" size="medium" />
+                </span>
+              </CustomTooltip>
+            </SistentThemeProvider>
+          </Row>
+
+          <h3>HTML Support</h3>
+          <p>
+            The Tooltip component supports HTML content, allowing you to include
+            rich text, links, and other elements inside the tooltip. By passing
+            HTML content as the title prop, you can create more engaging and
+            informative tooltips.
+          </p>
+          <Row $Hcenter className="image-container">
+            <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+              <CustomTooltip
+                title={
+                  <React.Fragment>
+                    <Typography color="inherit">
+                      Tooltip with HTML Support
+                    </Typography>
+                    <em>{"And here's"}</em> <b>{"some"}</b>{" "}
+                    <a href="#">{"amazing content"}</a>. {"It's very engaging. Right?"}
+                  </React.Fragment>
+                }
+              >
+                <span>
+                  <Button variant="text" label="Customize" size="medium" />
+                </span>
+              </CustomTooltip>
+            </SistentThemeProvider>
+          </Row>
+
+          <h3>Markdown Support</h3>
+          <p>
+            The Tooltip component supports Markdown content, allowing you to
+            include rich text, links, and other elements inside the tooltip. By
+            passing Markdown content as the title prop, you can create more
+            engaging and informative tooltips.
+          </p>
+          <Row $Hcenter className="image-container">
+            <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+              <CustomTooltip
+                title={`### Tooltip with Markdown 
+*And here's* **some** [amazing content](#) 
+It's very engaging. Right?`}
+              >
+                <span>
+                  <Button variant="text" label="Customize" size="medium" />
+                </span>
+              </CustomTooltip>
+            </SistentThemeProvider>
+          </Row>
+
+          <h2>Triggers</h2>
+          <p>
+            The Tooltip component can be triggered by various user actions,
+            including hover, focus, and click. By default, the Tooltip appears
+            when the user hovers over the anchor element. You can customize the
+            trigger behavior using the following props:
+          </p>
+          <ul>
+            <li>
+              <code>disableHoverListener</code>: Disables the hover trigger.
+            </li>
+            <li>
+              <code>disableFocusListener</code>: Disables the focus trigger.
+            </li>
+            <li>
+              <code>disableTouchListener</code>: Disables the touch trigger.
+            </li>
+          </ul>
+          <Row $Hcenter className="image-container">
+            <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+              <Grid container sx={{ justifyContent: "space-evenly" }}>
+                <Grid item>
+                  <CustomTooltip disableFocusListener title="Add">
+                    <span>
+                      <Button variant="contained" size="medium">
+                        Hover or touch
+                      </Button>
+                    </span>
+                  </CustomTooltip>
+                </Grid>
+                <Grid item>
+                  <CustomTooltip disableHoverListener title="Add">
+                    <span>
+                      <Button variant="contained" size="medium">
+                        Focus or touch
+                      </Button>
+                    </span>
+                  </CustomTooltip>
+                </Grid>
+                <Grid item>
+                  <CustomTooltip disableTouchListener title="Add">
+                    <span>
+                      <Button variant="contained" size="medium">
+                        Hover or Focus
+                      </Button>
+                    </span>
+                  </CustomTooltip>
+                </Grid>
+              </Grid>
+            </SistentThemeProvider>
+          </Row>
+
+          <a id="Accessibility">
+            <h2>Accessibility</h2>
+          </a>
+          <p>
+            It’s important to ensure that the Tooltip component is accessible to
+            all users. Here are some key considerations:
+          </p>
+          <ul>
+            <li>
+              By default, tooltips are designed to label their child element
+              rather than describe it. This differs from the <code>title</code>{" "}
+              attribute, which can either label or describe the child element
+              based on whether it already has an accessible label.
+            </li>
+            <li>
+              Using <code>describeChild</code> : When you want the tooltip to
+              act as an accessible description (adding additional context), you
+              can enable the describeChild prop. Use describeChild only if the
+              tooltip provides supplementary information and the child element
+              already has an accessible label.
+            </li>
+            <li>
+              Avoiding Accessibility Violations: Do not use describeChild if the
+              tooltip is the only visible label for the child element, as this
+              would prevent the child from having an accessible name.
+            </li>
+          </ul>
+
+          <a id="Performance">
+            <h2>Performance Tips</h2>
+          </a>
+          <p>
+            When using the Tooltip component, consider the following to optimize
+            performance:
+          </p>
+          <ul>
+            <li>
+              Use the `placement` prop to control the position of the Tooltip
+              and prevent overlap with other interface elements.
+            </li>
+            <li>
+              Ensure that the Tooltip is keyboard navigable, allowing users to
+              open/close it using keyboard shortcuts.
+            </li>
+          </ul>
+        </div>
+      </div>
+    </SistentLayout>
+  );
+};
+
+export default TooltipGuidance;
diff --git a/src/sections/Projects/Sistent/components/tooltip/index.js b/src/sections/Projects/Sistent/components/tooltip/index.js
new file mode 100644
index 000000000000..97d9606f46a4
--- /dev/null
+++ b/src/sections/Projects/Sistent/components/tooltip/index.js
@@ -0,0 +1,238 @@
+import React from "react";
+import { navigate } from "gatsby";
+import { useLocation } from "@reach/router";
+import {
+  SistentThemeProvider,
+  Button,
+  CustomTooltip,
+  Box,
+} 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 SistentTooltip = () => {
+  const location = useLocation();
+  const { isDark } = useStyledDarkMode();
+
+  return (
+    <SistentLayout title="Tooltip">
+      <div className="content">
+        <a id="Identity">
+          <h2>Tooltip</h2>
+        </a>
+        <p>
+          The Tooltip component displays informative text when users hover over,
+          focus on, or tap an element. Tooltips are designed to enhance
+          accessibility and user understanding of interface elements.
+        </p>
+        <div className="filterBtns">
+          <TabButton
+            className={
+              location.pathname === "/projects/sistent/components/tooltip"
+                ? "active"
+                : ""
+            }
+            onClick={() => navigate("/projects/sistent/components/tooltip")}
+            title="Overview"
+          />
+          <TabButton
+            className={
+              location.pathname ===
+              "/projects/sistent/components/tooltip/guidance"
+                ? "active"
+                : ""
+            }
+            onClick={() =>
+              navigate("/projects/sistent/components/tooltip/guidance")
+            }
+            title="Guidance"
+          />
+          <TabButton
+            className={
+              location.pathname === "/projects/sistent/components/tooltip/code"
+                ? "active"
+                : ""
+            }
+            onClick={() =>
+              navigate("/projects/sistent/components/tooltip/code")
+            }
+            title="Code"
+          />
+        </div>
+        <div className="main-content">
+          <p>
+            The Tooltip component displays informative text when users hover
+            over, focus on, or tap an element. Tooltips are designed to enhance
+            accessibility and user understanding of interface elements.
+          </p>
+          <a id="Basic Tooltip">
+            <h2>Basic Tooltip</h2>
+          </a>
+          <p>
+            A simple tooltip that displays helpful information when hovering
+            over an icon button.
+          </p>
+          <Row $Hcenter className="image-container">
+            <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+              <CustomTooltip title="Submit">
+                <span>
+                  <Button variant="contained" label="Submit" size="medium" />
+                </span>
+              </CustomTooltip>
+            </SistentThemeProvider>
+          </Row>
+          <h3>Custom Position</h3>
+          <p>
+            Tooltips support different placements, allowing flexibility
+            depending on your layout requirements.
+          </p>
+          <Row $Hcenter className="image-container">
+            <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+              <CustomTooltip title="Top Tooltip" placement="top">
+                <span>
+                  <Button variant="contained" size="medium">
+                    Delete
+                  </Button>
+                </span>
+              </CustomTooltip>
+            </SistentThemeProvider>
+          </Row>
+
+          <h3>Disabled Elements</h3>
+          <p>
+            By default disabled elements like button do not trigger user
+            interactions so a <code>Tooltip</code> will not activate on normal
+            events like hover. To accommodate disabled elements, add a simple
+            wrapper element, such as a <code>span</code>.
+          </p>
+          <Row $Hcenter className="image-container">
+            <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+              <CustomTooltip title="Disabled Tooltip">
+                <span>
+                  <Button variant="text" size="medium" disabled>
+                    Disabled Button
+                  </Button>
+                </span>
+              </CustomTooltip>
+            </SistentThemeProvider>
+          </Row>
+
+          <a id="Distance from anchor">
+            <h2>Distance from anchor</h2>
+          </a>
+          <p>
+            To adjust the distance between the tooltip and its anchor, you can
+            use the slotProps prop to modify the offset of the popper.
+          </p>
+          <Row $Hcenter className="image-container">
+            <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+              <CustomTooltip
+                title="Add"
+                slotProps={{
+                  popper: {
+                    modifiers: [
+                      {
+                        name: "offset",
+                        options: {
+                          offset: [0, -14],
+                        },
+                      },
+                    ],
+                  },
+                }}
+              >
+                <span>
+                  <Button variant="contained" size="medium">
+                    Offset
+                  </Button>
+                </span>
+              </CustomTooltip>
+            </SistentThemeProvider>
+          </Row>
+
+          <a id="Variable width">
+            <h2>Variable width</h2>
+          </a>
+          <p>
+            The variant prop in Tooltip allows you to control the tooltips size
+            with predefined styles (standard or small). This makes it easier to
+            adjust the tooltip to fit various UI requirements quickly and
+            consistently.
+          </p>
+          <Row $Hcenter className="image-container">
+            <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+              <Box
+                sx={{
+                  display: "flex",
+                  "& > *": {
+                    m: 1,
+                  },
+                }}
+              >
+                <CustomTooltip title="Add" variant="standard">
+                  <span>
+                    <Button variant="contained" size="medium">
+                      standard
+                    </Button>
+                  </span>
+                </CustomTooltip>
+                <CustomTooltip title="Add" variant="small">
+                  <span>
+                    <Button variant="contained" size="medium">
+                      small
+                    </Button>
+                  </span>
+                </CustomTooltip>
+              </Box>
+            </SistentThemeProvider>
+          </Row>
+
+          <a id="Follow cursor">
+            <h2>Follow Cursor</h2>
+          </a>
+          <p>
+            Tooltips can be configured to follow the cursor, making it easier to
+            read the content.
+          </p>
+          <Row $Hcenter className="image-container">
+            <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+              <CustomTooltip title="Follow Cursor" followCursor>
+                <span>
+                  <Button variant="contained" size="medium">
+                    Button
+                  </Button>
+                </span>
+              </CustomTooltip>
+            </SistentThemeProvider>
+          </Row>
+
+          <a id="Showing and hiding">
+            <h2>Showing and Hiding</h2>
+          </a>
+          <p>
+            The Tooltip is normally shown immediately when the user's mouse
+            hovers over the element, and hides immediately when the user's mouse
+            leaves. A delay in showing or hiding the tooltip can be added
+            through the <code>enterDelay</code> and <code>leaveDelay</code>{" "}
+            props.
+          </p>
+          <Row $Hcenter className="image-container">
+            <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+              <CustomTooltip title="Add" enterDelay={500} leaveDelay={200}>
+                <span>
+                  <Button variant="text" size="medium">
+                    [500MS, 200MS]
+                  </Button>
+                </span>
+              </CustomTooltip>
+            </SistentThemeProvider>
+          </Row>
+        </div>
+      </div>
+    </SistentLayout>
+  );
+};
+
+export default SistentTooltip;
diff --git a/src/sections/Projects/Sistent/index.js b/src/sections/Projects/Sistent/index.js
index 9c9684df1960..d2c3b5030f66 100644
--- a/src/sections/Projects/Sistent/index.js
+++ b/src/sections/Projects/Sistent/index.js
@@ -1,12 +1,13 @@
 import React from "react";
 import SistentWrapper from "./sistent.style";
 import HandbookCard from "../../../components/HandbookCard";
+import SistentLogo from "../../../assets/images/sistent/horizontal/sistent-horizontal-white.svg";
 
 const SistentHome = () => {
   return (
     <SistentWrapper>
       <div className="page-header-section">
-        <h1>Sistent</h1>
+        <img src={SistentLogo} alt="Sistent Logo" />
       </div>
       <div className="community-home-subtitle">
         <h3>Design system for Layer5 projects</h3>
diff --git a/src/sections/Projects/Sistent/sistent.style.js b/src/sections/Projects/Sistent/sistent.style.js
index 57ef8e728ca4..4f69e1fabe2f 100644
--- a/src/sections/Projects/Sistent/sistent.style.js
+++ b/src/sections/Projects/Sistent/sistent.style.js
@@ -101,6 +101,8 @@ const SistentWrapper = styled.div`
   .page-header-section {
     height: 10rem;
     text-align: center;
+    display: flex;
+    justify-content: center;
     background: rgb(71, 126, 150);
     background: linear-gradient(
       250deg,
@@ -108,10 +110,15 @@ const SistentWrapper = styled.div`
       rgba(0, 179, 159, 1) 35%,
       rgba(60, 73, 79, 1) 100%
     );
+    padding: 0 1.5rem;
     h1 {
       line-height: 10rem;
       color: white;
     }
+    img {
+      max-width: 500px;
+      width: 100%;
+    }
   }
 
   .community-home-subtitle {
diff --git a/src/sections/app.style.js b/src/sections/app.style.js
index dbff856e861e..1a1a644524fc 100644
--- a/src/sections/app.style.js
+++ b/src/sections/app.style.js
@@ -64,7 +64,6 @@ body {
   transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
 
   font-family: "Qanelas Soft", "Open Sans", sans-serif;
-  overflow-x: hidden !important;
   font-weight: 400 !important;
   margin: 0;
   padding: 0;
diff --git a/src/sections/gitops/PerformanceManagementPage.js b/src/sections/gitops/PerformanceManagementPage.js
index a4d03c38cbca..37b2a336dcda 100644
--- a/src/sections/gitops/PerformanceManagementPage.js
+++ b/src/sections/gitops/PerformanceManagementPage.js
@@ -25,7 +25,7 @@ const PerformanceManagementPage = () => {
             <Description>
                Test your Kubernetes cluster and service mesh implementation for conformance with the SMI specification
             </Description>
-            <Button primary className="learn-more-btn" title="Go to Documentation" url="https://meshery.layer5.io/connect/github/new"/>
+            <Button primary className="learn-more-btn" title="Go to Documentation" url="https://cloud.layer5.io/connect/github/new"/>
           </TextColumn>
           <ColumnContainer>
             <SmpLogo className="stack-logo" />
diff --git a/src/sections/gitops/SnapshotPage.js b/src/sections/gitops/SnapshotPage.js
index 97faea593cbb..0141ee6a7dc3 100644
--- a/src/sections/gitops/SnapshotPage.js
+++ b/src/sections/gitops/SnapshotPage.js
@@ -22,7 +22,7 @@ const SnapshotPage = () => {
             <Description>
                Verify your workload designs and Kubernetes cluster configurations prior to accepting and merging pull requests.
             </Description>
-            <Button primary className="learn-more-btn" title="INSTALL" $url="https://meshery.layer5.io/connect/github/new"/>
+            <Button primary className="learn-more-btn" title="INSTALL" $url="https://cloud.layer5.io/connect/github/new"/>
           </TextColumn>
           <ColumnContainer>
             <KanvasStack className="stack-logo" />
diff --git a/src/sections/gitops/index.js b/src/sections/gitops/index.js
index a3281ad6729b..524171b45378 100644
--- a/src/sections/gitops/index.js
+++ b/src/sections/gitops/index.js
@@ -80,7 +80,7 @@ const GitOpsPage = () => {
             <SquarePoint>Connect Kanvas to your GitHub repo and see changes pull request-to-pull request</SquarePoint>
             <SquarePoint>Get snapshots of your infrastructure directly in your PRs</SquarePoint>
             <div className="buttons-container">
-              <Button $primary className="learn-more-btn" title="Install" $url="https://meshery.layer5.io/connect/github/new"/>
+              <Button $primary className="learn-more-btn" title="Install" $url="https://cloud.layer5.io/connect/github/new"/>
               <Button $secondary className="learn-more-btn" title="Learn More" $url="/solutions/gitops/snapshot"/>
             </div>
           </Col>
diff --git a/src/templates/news-single.js b/src/templates/news-single.js
index ed520e6efb6a..2a18df86558f 100644
--- a/src/templates/news-single.js
+++ b/src/templates/news-single.js
@@ -24,6 +24,13 @@ export const query = graphql`
           extension
           publicURL
         }
+        darkthumbnail {
+          childImageSharp {
+            gatsbyImageData(width: 500, layout: CONSTRAINED)
+          }
+          extension
+          publicURL
+        }
       }
       fields {
         slug
diff --git a/src/theme/app/themeStyles.js b/src/theme/app/themeStyles.js
index aff46ff5d86f..cb13e86d0fd5 100644
--- a/src/theme/app/themeStyles.js
+++ b/src/theme/app/themeStyles.js
@@ -34,7 +34,7 @@ const lighttheme = {
   darkJungleGreenHalfColor: "rgba(30, 33, 23, .5)",
 
   // Teal Blue
-  tertiaryColorTwo: "#477E96",
+  tealBlue: "#477E96",
 
   headingColor: "#111111",
 
@@ -99,6 +99,7 @@ const lighttheme = {
   blackToWhite: "#FFFFFF",
   blue477E96ToGreen00B39F: "#00B39F",
   blueE0FFFCToBlue477E96: "#477E96",
+  blue6eb0ccToBlue477E96: "#477E96",
   boxShadowBlue477E96: "-0.25rem 0.25rem 1.25rem #477e96",
   boxShadowGreen00D3A9: "-0.25rem 0.25rem 3rem #00D3A9",
   boxShadowGreen00D3A9ToBlackTwoFive: "rgb(0 0 0 / 0.25) 0px 0px 10px",
@@ -266,7 +267,7 @@ export const darktheme = {
   darkJungleGreenHalfColor: "rgba(30, 33, 23, .5)",
 
   // Teal Blue
-  tertiaryColorTwo: "#477E96",
+  tealBlue: "#477E96",
 
   headingColor: "#000000",
 
@@ -333,6 +334,7 @@ export const darktheme = {
   blackToWhite: "#000000",
   blue477E96ToGreen00B39F: "#477E96",
   blueE0FFFCToBlue477E96: "#E0FFFC",
+  blue6eb0ccToBlue477E96: "#6eb0cc",
   boxShadowBlue477E96: "0rem 0.25rem 1.25rem #477e96",
   boxShadowGreen00D3A9: "0rem 0.25rem 3rem #00D3A9",
   boxShadowGreen00D3A9ToBlackTwoFive: "#00D3A9 0px 0px 10px",
diff --git a/src/theme/blog/themeStyles.js b/src/theme/blog/themeStyles.js
deleted file mode 100644
index b420abb322c8..000000000000
--- a/src/theme/blog/themeStyles.js
+++ /dev/null
@@ -1,50 +0,0 @@
-const theme = {
-  black: "#000000",
-  white: "#ffffff",
-
-  // charcoal
-  primaryColor: "#3c494f",
-
-  // silver chalice (light gray)
-  primaryLightColor: "#b3b3b3",
-
-  // keppel (dark green)
-  primaryLightColorTwo: "#00d3a9",
-  keppelColor: "#00d3a9",
-
-  // caribbean green (light green)
-  secondaryColor: "#00b39f",
-  caribbeanGreenColor: "#00d3a9",
-  secondaryLightColorTwo: "#F3FFFD",
-
-  // lavender blush (light pink)
-  secondaryLightColor: "#FFEBEC",
-
-  // dark jungle green
-  tertiaryColor: "#1e2117",
-
-  headingColor: "#111111",
-
-  // light slate gray (medium gray)
-  textColor: "#000000",
-  shadowColor: "rgba(0, 0, 0, 0.05)",
-
-  // platinum (light gray)
-  shadowLightColor: "#E6E6E6",
-
-  // charcoal
-  menuColor: "#3c494f",
-
-  // caribbean green (light green)
-  menuHoverColor: "#00b39f",
-  linkColor: "#111111",
-
-  // saffron (dark yellow)
-  highlightColor: "#EBC017",
-
-  // flax (light yellow)
-  highlightLightColor: "#EAD07D",
-  saffronLightColor: "#EAD07D",
-};
-export default theme;
-
diff --git a/src/theme/classic/themeStyles.js b/src/theme/classic/themeStyles.js
deleted file mode 100644
index ad2eb14d059e..000000000000
--- a/src/theme/classic/themeStyles.js
+++ /dev/null
@@ -1,19 +0,0 @@
-
-
-const theme = {
-  black: "#000000",
-  white: "#ffffff",
-  primaryColor: "#52DE97",
-  primaryLightColor: "#e0f5ea",
-  primaryLightColorTwo: "#f8f5fd",
-  secondaryColor: "#00B39F",
-  secondaryLightColor: "#FFEBEC",
-  shadowColor: "rgba(0, 0, 0, 0.15)",
-  headingColor: "#3c494f",
-  textColor: "#7A848E",
-  shadowLightColor: "#E6E6E6",
-  menuHoverColor: "#00B39F"
-};
-
-export default theme;
-
diff --git a/src/theme/hosting/themeStyles.js b/src/theme/hosting/themeStyles.js
deleted file mode 100644
index bbc33e7979e6..000000000000
--- a/src/theme/hosting/themeStyles.js
+++ /dev/null
@@ -1,20 +0,0 @@
-
-
-const theme = {
-  black: "#000000",
-  white: "#ffffff",
-  primaryColor: "#A29BFE",
-  primaryLightColor: "#EDEBFC",
-  primaryLightColorTwo: "#EDEBFC",
-  secondaryColor: "#00B39F",
-  secondaryLightColor: "#FFEBEC",
-  shadowColor: "rgba(0, 0, 0, 0.15)",
-  headingColor: "#3c494f",
-  textColor: "#7A848E",
-  shadowLightColor: "#E6E6E6",
-  tetriaryColor: "#00B39F",
-  menuHoverColor: "#00B39F"
-};
-
-export default theme;
-
diff --git a/src/theme/modern/themeStyles.js b/src/theme/modern/themeStyles.js
deleted file mode 100644
index e1dc487022a5..000000000000
--- a/src/theme/modern/themeStyles.js
+++ /dev/null
@@ -1,19 +0,0 @@
-const theme = {
-  black: "#000000",
-  white: "#ffffff",
-  primaryColor: "#8A57DE",
-  primaryLightColor: "#EEE6FA",
-  primaryLightColorTwo: "#f8f5fd",
-  secondaryColor: "#00B39F",
-  secondaryLightColor: "#FFEBEC",
-  tetriaryColor: "#E281CE",
-  headingColor: "#3c494f",
-  textColor: "#7A848E",
-  shadowColor: "rgba(138, 87, 222, 0.15)",
-  shadowLightColor: "#E6E6E6",
-  menuColor: "#ffffff",
-  menuHoverColor: "#00B39F"
-};
-export default theme;
-
-
diff --git a/static/brand/sistent-brand-kit.zip b/static/brand/sistent-brand-kit.zip
new file mode 100644
index 000000000000..7fd46639e7bc
Binary files /dev/null and b/static/brand/sistent-brand-kit.zip differ
diff --git a/static/mail/2023/feature-friday.html b/static/mail/2023/feature-friday.html
index 13feb8255f2c..f2c11b30836b 100644
--- a/static/mail/2023/feature-friday.html
+++ b/static/mail/2023/feature-friday.html
@@ -493,7 +493,7 @@ <h4 style="font-size: 1.75rem;font-style: italic;color: #7A848E;text-align: cent
 <ul data-border="0" data-indent="0" data-stringify-type="unordered-list">
 	<li data-stringify-border="0" data-stringify-indent="0" style="text-align: left;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">Import your WASM Envoy filters into Meshery using the&nbsp;UI or <a href="https://docs.meshery.io/reference/mesheryctl#data-plane-intelligence" target="_blank" style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #00d3a9;font-weight: normal;text-decoration: none;"><span style="color:#00D3A9">CLI</span></a>.</li>
 	<li data-stringify-border="0" data-stringify-indent="0" style="text-align: left;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">Publish and clone your WASM Envoy filters in&nbsp;the <a href="https://meshery.io/catalog" target="_blank" style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #00d3a9;font-weight: normal;text-decoration: none;"><span style="color:#00D3A9">Meshery Catalog</span></a>.&nbsp;</li>
-	<li data-stringify-border="0" data-stringify-indent="0" style="text-align: left;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">Download WASM binaries from <a href="https://meshery.layer5.io/" target="_blank" style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #00d3a9;font-weight: normal;text-decoration: none;"><span style="color:#00D3A9">Layer5 Cloud</span></a>.</li>
+	<li data-stringify-border="0" data-stringify-indent="0" style="text-align: left;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">Download WASM binaries from <a href="https://cloud.layer5.io/" target="_blank" style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #00d3a9;font-weight: normal;text-decoration: none;"><span style="color:#00D3A9">Layer5 Cloud</span></a>.</li>
 	<li data-stringify-border="0" data-stringify-indent="0" style="text-align: left;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">Design and deploy Istio and Envoy dataplanes in <a href="https://layer5.io/cloud-native-management/kanvas" target="_blank" style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #00d3a9;font-weight: normal;text-decoration: none;"><span style="color:#00D3A9">Kanvas</span></a>.</li>
 	<li data-stringify-border="0" data-stringify-indent="0" style="text-align: left;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">Contribute to any of the 7 open source&nbsp;<a href="https://github.com/layer5io/wasm-filters" target="_blank" style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #00d3a9;font-weight: normal;text-decoration: none;"><font color="#00d3a9">wasm-filters</font></a>.</li>
 </ul>