diff --git a/src/components/MesherySchemasCard.js b/src/components/MesherySchemasCard.js
new file mode 100644
index 0000000000000..23808a6f9e76b
--- /dev/null
+++ b/src/components/MesherySchemasCard.js
@@ -0,0 +1,67 @@
+import React from "react";
+
+export const MesherySchemasCard = ({
+  tags = ["AWS", "Azure", "GCP"],
+  title = "Cloud Native Management",
+  description = "Design, optimize and maintain your infrastructure with powerful schema tools.",
+  actionText = "Manage",
+  statusText = "Live",
+  onActionClick,
+}) => {
+  return (
+    <div
+      style={{
+        width: "100%",
+        maxWidth: "340px",
+        background: "#0b132b",
+        borderRadius: "1rem",
+        padding: "1.5rem",
+        border: "1px solid #00b39f",
+        color: "#fff",
+      }}
+    >
+      <div style={{ display: "flex", gap: "0.5rem", marginBottom: "1rem" }}>
+        {tags.map((tag) => (
+          <span
+            key={tag}
+            style={{
+              background: "rgba(0,179,159,0.2)",
+              padding: "0.25rem 0.5rem",
+              borderRadius: "4px",
+              fontSize: "10px",
+              color: "#00b39f",
+            }}
+          >
+            {tag}
+          </span>
+        ))}
+      </div>
+      <h3 style={{ fontSize: "1.1rem", margin: "0 0 0.5rem 0" }}>{title}</h3>
+      <p style={{ fontSize: "0.8rem", color: "#ccc", margin: "0 0 1.5rem 0" }}>
+        {description}
+      </p>
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+        }}
+      >
+        <button
+          onClick={onActionClick}
+          style={{
+            background: "#00b39f",
+            color: "#fff",
+            border: "none",
+            padding: "0.5rem 1rem",
+            borderRadius: "4px",
+            fontSize: "0.8rem",
+          }}
+        >
+          {actionText}
+        </button>
+        <span style={{ fontSize: "0.8rem", color: "#888" }}>{statusText}</span>
+      </div>
+    </div>
+  );
+};
diff --git a/src/sections/Kanvas/FeaturesSection/Design/DesignerFeatures_diagram.js b/src/sections/Kanvas/FeaturesSection/Design/DesignerFeatures_diagram.js
index 7d652f122619b..05f3754828875 100644
--- a/src/sections/Kanvas/FeaturesSection/Design/DesignerFeatures_diagram.js
+++ b/src/sections/Kanvas/FeaturesSection/Design/DesignerFeatures_diagram.js
@@ -1,10 +1,10 @@
 import React from "react";
 import DiagramStyles from "../../diagram/diagram.style";
-import { ReactComponent as RoleBind1 } from "./images/role-binding-1-colorMode.svg";
-import { ReactComponent as RoleBind2 } from "./images/role-binding-2-colorMode.svg";
-import { ReactComponent as RoleBind3 } from "./images/role-binding-3-colorMode.svg";
-import { ReactComponent as RoleBind4 } from "./images/role-binding-4-colorMode.svg";
+import RoleBind2 from "./images/role-binding-2-colorMode.svg";
+import RoleBind3 from "./images/role-binding-3-colorMode.svg";
+import RoleBind4 from "./images/role-binding-4-colorMode.svg";
 import { useInView } from "react-intersection-observer";
+import { MesherySchemasCard } from "../../../../components/MesherySchemasCard";
 
 const DesignerFeaturesDiagram = ({ activeExampleIndex }) => {
   const [ref, inView] = useInView({ threshold: 0.6 });
@@ -12,13 +12,50 @@ const DesignerFeaturesDiagram = ({ activeExampleIndex }) => {
   return (
     <DiagramStyles>
       <div className="root" ref={ref} style={{ minHeight: "25rem" }}>
-        <RoleBind1  className={(inView && activeExampleIndex == 0) ? "show" : "render"} id="design-image1" alt="design-image1"/>
-        <RoleBind2 id="design-image2" className={(activeExampleIndex == 1) ? "show" : "render"} alt="design-image2" />
-        <RoleBind3 id="design-image3" className={(activeExampleIndex == 2) ? "show" : "render"} alt="design-image3" />
-        <RoleBind4 id="design-image4" className={(activeExampleIndex >= 3) ? "show" : "render"} alt="design-image4" />
+        <div
+          id="design-image1"
+          className={inView && activeExampleIndex === 0 ? "show" : "render"}
+          style={{
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            width: "100%",
+            transition: "opacity 0.4s ease-in-out, transform 0.4s ease-in-out",
+          }}
+        >
+          <MesherySchemasCard
+            tags={["AWS", "Azure", "GCP"]}
+            title="Cloud Native Management"
+            description="Design, optimize and maintain your infrastructure with powerful schema tools."
+            actionText="Manage"
+            statusText="Live"
+            onActionClick={() =>
+              console.log("Schema management console active!")
+            }
+          />
+        </div>
+
+        <img
+          id="design-image2"
+          src={RoleBind2}
+          className={activeExampleIndex === 1 ? "show" : "render"}
+          alt="design-image2"
+        />
+        <img
+          id="design-image3"
+          src={RoleBind3}
+          className={activeExampleIndex === 2 ? "show" : "render"}
+          alt="design-image3"
+        />
+        <img
+          id="design-image4"
+          src={RoleBind4}
+          className={activeExampleIndex >= 3 ? "show" : "render"}
+          alt="design-image4"
+        />
       </div>
     </DiagramStyles>
   );
 };
 
-export default DesignerFeaturesDiagram;
\ No newline at end of file
+export default DesignerFeaturesDiagram;