diff --git a/src/sections/Kanvas/index.js b/src/sections/Kanvas/index.js
index e5df2d5a8e617..5ad957856310c 100644
--- a/src/sections/Kanvas/index.js
+++ b/src/sections/Kanvas/index.js
@@ -1,4 +1,5 @@
 import React from "react";
+import { StaticImage } from "gatsby-plugin-image";
 import KanvasWrapper from "./kanvas.style";
 import { Container } from "../../reusecore/Layout";
 import Features from "../../components/Features-carousel";
@@ -6,8 +7,6 @@ import KanvasModes from "./kanvas-modes";
 import Catalog from "./kanvas-catalog";
 import Platform from "./kanvas-platform";
 import KanvasBanner from "./kanvas_banner";
-import designerImage from "../../assets/images/kanvas/KanvasDesigner.webp";
-import visualizerImage from "../../assets/images/kanvas/KanvasVisualizer.webp";
 import DesignerFeatures from "./FeaturesSection/Design/DesignerFeatures";
 import CollaboratorFeatures from "./FeaturesSection/Collaborate/CollaboratorFeatures";
 import VisualizerFeatures from "./FeaturesSection/Visualize/VisualizerFeatures";
@@ -28,9 +27,6 @@ import { ReactComponent as Collab2 } from "./FeaturesSection/Collaborate/images/
 import { ReactComponent as Collab3 } from "./FeaturesSection/Collaborate/images/collab3-colorMode.svg";
 import { ReactComponent as Collab4 } from "./FeaturesSection/Collaborate/images/collab4-colorMode.svg";
 
-import Avatar1 from "./FeaturesSection/Collaborate/images/avatar1.webp";
-import Avatar2 from "./FeaturesSection/Collaborate/images/avatar2.webp";
-import Avatar3 from "./FeaturesSection/Collaborate/images/avatar3.webp";
 import Kaur from "../../sections/Pricing/reviews/kaur-kallas.webp";
 import Ala from "../../sections/Pricing/reviews/ala-eddine-benhassir.jpeg";
 import Phillip from "../../sections/Pricing/reviews/phillip-ulberg.jpeg";
@@ -56,12 +52,10 @@ const Kanvas = (props) => {
                   description:
                     "Drag-and-drop your cloud native infrastructure using a palette of thousands of versioned Kubernetes components and Cloud services. Collaborate wtih teammates using this self-service engineering platform. Using GitOps? Integrate advanced performance analysis into your pipeline.",
                   content: (
-                    <img
-                      src={designerImage}
+                    <StaticImage
+                      src="../../assets/images/kanvas/KanvasDesigner.webp"
                       alt="Designer Mode"
                       className="designer-img modes-image"
-                      width="100%"
-                      height="auto"
                       style={{ aspectRatio: "16/9" }}
                     />
                   ),
@@ -71,12 +65,10 @@ const Kanvas = (props) => {
                   description:
                     "Operator offers an interactive topology of your Kubernetes clusters with live terminal sessions, log streaming and performance testing of your applications. Designs created in Designer mode can be deployed and viewed as running in your environment using Operator.",
                   content: (
-                    <img
-                      src={visualizerImage}
+                    <StaticImage
+                      src="../../assets/images/kanvas/KanvasVisualizer.webp"
                       alt="Operator Mode"
                       className="modes-image"
-                      width="100%"
-                      height="auto"
                       style={{ aspectRatio: "16/9" }}
                     />
                   ),
@@ -165,13 +157,13 @@ const Kanvas = (props) => {
                   description: "Designer and Operator live side-by-side, so all design work, from ideation to operation, can be found in one place.",
                   imgContent: (
                     <>
-                      <img
+                      <StaticImage
                         id="avatar-1"
-                        src={Avatar1}
+                        src="./FeaturesSection/Collaborate/images/avatar1.webp"
                         alt=""
-                        width="48"
-                        height="48"
-                        style={{ objectFit: "cover" }}
+                        width={48}
+                        height={48}
+                        imgStyle={{ objectFit: "cover" }}
                       />
                       <Collab1 id="collaborate-image1" alt="collaborate-image1" />
                     </>
@@ -187,13 +179,13 @@ const Kanvas = (props) => {
                   description: "Build an iterative design flow with live collaboration that keeps you in the loop whether you're working in the office or remotely.",
                   imgContent: (
                     <>
-                      <img
+                      <StaticImage
                         id="avatar-2"
-                        src={Avatar2}
+                        src="./FeaturesSection/Collaborate/images/avatar2.webp"
                         alt="avatar-2"
-                        width="48"
-                        height="48"
-                        style={{ objectFit: "cover" }}
+                        width={48}
+                        height={48}
+                        imgStyle={{ objectFit: "cover" }}
                       />
                       <Collab2 id="collaborate-image2" alt="collaborate-image2" />
                     </>
@@ -204,13 +196,13 @@ const Kanvas = (props) => {
                   description: "Build an iterative design flow with live collaboration that keeps you in the loop whether you're working in the office or remotely.",
                   imgContent: (
                     <>
-                      <img
+                      <StaticImage
                         id="avatar-3"
-                        src={Avatar3}
+                        src="./FeaturesSection/Collaborate/images/avatar3.webp"
                         alt="avatar-3"
-                        width="48"
-                        height="48"
-                        style={{ objectFit: "cover" }}
+                        width={48}
+                        height={48}
+                        imgStyle={{ objectFit: "cover" }}
                       />
                       <Collab3 id="collaborate-image3" alt="collaborate-image3" />
                     </>
@@ -225,13 +217,13 @@ const Kanvas = (props) => {
                   description: "Kanvas is an end-to-end management platform, here to help teams understand problems, explore options, and build solutions—together.",
                   imgContent: (
                     <>
-                      <img
+                      <StaticImage
                         id="avatar-3"
-                        src={Avatar3}
+                        src="./FeaturesSection/Collaborate/images/avatar3.webp"
                         alt="avatar-3"
-                        width="48"
-                        height="48"
-                        style={{ objectFit: "cover" }}
+                        width={48}
+                        height={48}
+                        imgStyle={{ objectFit: "cover" }}
                       />
                       <Collab4 id="collaborate-image4" alt="collaborate-image4" />
                     </>
diff --git a/src/sections/Kanvas/kanvas-catalog.js b/src/sections/Kanvas/kanvas-catalog.js
index 66a15bc18906f..f99138767afe0 100644
--- a/src/sections/Kanvas/kanvas-catalog.js
+++ b/src/sections/Kanvas/kanvas-catalog.js
@@ -1,30 +1,6 @@
 import React from "react";
 import styled from "styled-components";
-import Mutual_tls from "../../assets/images/kanvas/catalog-card-images/mutual-tls.svg";
-import Retries from "../../assets/images/kanvas/catalog-card-images/retries.svg";
-import Traces from "../../assets/images/kanvas/catalog-card-images/traces.svg";
-import Denial from "../../assets/images/kanvas/catalog-card-images/denial.svg";
-import Correlate_event from "../../assets/images/kanvas/catalog-card-images/correlate-event.svg";
-import Only_wagent from "../../assets/images/kanvas/catalog-card-images/only-wagent.svg";
-import Node_agent from "../../assets/images/kanvas/catalog-card-images/node-agent.svg";
-import Single_tenant from "../../assets/images/kanvas/catalog-card-images/single-tenant.svg";
-import Pre_provison from "../../assets/images/kanvas/catalog-card-images/pre-provision.svg";
-import Circuit_breaker from "../../assets/images/kanvas/catalog-card-images/circuit-breaker.svg";
-import Retry_deadline from "../../assets/images/kanvas/catalog-card-images/retry-deadline.svg";
-import Singleton from "../../assets/images/kanvas/catalog-card-images/singleton.svg";
-import Jwt_transformer from "../../assets/images/kanvas/catalog-card-images/jwt.svg";
-import Multicluster from "../../assets/images/kanvas/catalog-card-images/multicluster.svg";
-import Http_metrics from "../../assets/images/kanvas/catalog-card-images/http.svg";
-
-import Design from "../../assets/images/kanvas/icon-only/kanvas-icon-color.svg";
-
-
-
-import Patterns from "../../assets/images/service-mesh-patterns/service-mesh-pattern.svg";
-
-import Models from "../../assets/images/meshery/meshery-logo.svg";
-
-import Opa from "../../assets/images/kanvas/opa.svg";
+import { StaticImage } from "gatsby-plugin-image";
 import { Container } from "../../reusecore/Layout";
 
 const CatalogWrapper = styled.div`
@@ -121,7 +97,7 @@ box-shadow: 0px 6px 5px 0px rgb(0 0 0 / 25%);
   grid-template-columns: repeat(2, 1fr);
   grid-gap: 1em;
   padding: 0.5em;
-  img{
+  .gatsby-image-wrapper{
     max-width:5.6rem;
     display:block;
     margin: 0 auto;
@@ -232,7 +208,7 @@ h3.containerCaption {
 }
 
 #carousel{
-  img{
+  .gatsby-image-wrapper{
     transition: all .5s ease;
   }
 }
@@ -344,7 +320,7 @@ h3.containerCaption {
   @media screen and (max-width: 680px) {
 
     .svg-cont{
-      img {
+      .gatsby-image-wrapper {
         width: 4rem;
       }
       p{
@@ -448,20 +424,20 @@ const Catalog = () => {
           {/* Right Section */}
           <section className="services svg-cont">
             <div>
-              <img alt="Kanvas dashboard showing service retries in Kubernetes visualization" src={Patterns} />
+              <StaticImage alt="Kanvas dashboard showing service retries in Kubernetes visualization" src="../../assets/images/service-mesh-patterns/service-mesh-pattern.svg" placeholder="none" />
               <p>Cloud Native Patterns</p>
             </div>
             <div>
 
-              <img src={Design} alt="Design logo" />
+              <StaticImage src="../../assets/images/kanvas/icon-only/kanvas-icon-color.svg" alt="Design logo" placeholder="none" />
               <p>Design</p>
             </div>
             <div>
-              <img src={Models} alt="Models logo" />
+              <StaticImage src="../../assets/images/meshery/meshery-logo.svg" alt="Models logo" placeholder="none" />
               <p>Models</p>
             </div>
             <div>
-              <img alt="OPA policies management illustration in Kanvas service mesh" src={Opa} />
+              <StaticImage alt="OPA policies management illustration in Kanvas service mesh" src="../../assets/images/kanvas/opa.svg" placeholder="none" />
               <p>OPA Policies</p>
             </div>
           </section>
@@ -473,49 +449,49 @@ const Catalog = () => {
             <div className="container">
               <div id="carousel">
                 <div className="slide one">
-                  <img src={Mutual_tls} alt="Kanvas Mutual TLS security feature for Kubernetes workloads" />
+                  <StaticImage src="../../assets/images/kanvas/catalog-card-images/mutual-tls.svg" alt="Kanvas Mutual TLS security feature for Kubernetes workloads" placeholder="none" />
                 </div>
                 <div className="slide two">
-                  <img src={Retries} alt="Kanvas dashboard showing service retries in Kubernetes visualization" />
+                  <StaticImage src="../../assets/images/kanvas/catalog-card-images/retries.svg" alt="Kanvas dashboard showing service retries in Kubernetes visualization" placeholder="none" />
                 </div>
                 <div className="slide three">
-                  <img src={Traces}  alt="Kanvas tracing visualization for distributed Kubernetes services" />
+                  <StaticImage src="../../assets/images/kanvas/catalog-card-images/traces.svg"  alt="Kanvas tracing visualization for distributed Kubernetes services" placeholder="none" />
                 </div>
                 <div className="slide four">
-                  <img src={Denial} alt="Access denial control feature in Kanvas service mesh" />
+                  <StaticImage src="../../assets/images/kanvas/catalog-card-images/denial.svg" alt="Access denial control feature in Kanvas service mesh" placeholder="none" />
                 </div>
                 <div className="slide five">
-                  <img src={Correlate_event} alt="Event correlation view in Kanvas dashboard" />
+                  <StaticImage src="../../assets/images/kanvas/catalog-card-images/correlate-event.svg" alt="Event correlation view in Kanvas dashboard" placeholder="none" />
                 </div>
                 <div className="slide six">
-                  <img src={Only_wagent} alt="Kanvas only agent monitoring feature for clusters" />
+                  <StaticImage src="../../assets/images/kanvas/catalog-card-images/only-wagent.svg" alt="Kanvas only agent monitoring feature for clusters" placeholder="none" />
                 </div>
                 <div className="slide seven">
-                  <img src={Node_agent} alt="Kanvas node agent metrics visualization for Kubernetes" />
+                  <StaticImage src="../../assets/images/kanvas/catalog-card-images/node-agent.svg" alt="Kanvas node agent metrics visualization for Kubernetes" placeholder="none" />
                 </div>
                 <div className="slide eight">
-                  <img src={Single_tenant} alt="Single tenant Kubernetes deployment dashboard in Kanvas" />
+                  <StaticImage src="../../assets/images/kanvas/catalog-card-images/single-tenant.svg" alt="Single tenant Kubernetes deployment dashboard in Kanvas" placeholder="none" />
                 </div>
                 <div className="slide nine">
-                  <img src={Pre_provison} alt="Kanvas pre-provisioning configuration for Kubernetes clusters" />
+                  <StaticImage src="../../assets/images/kanvas/catalog-card-images/pre-provision.svg" alt="Kanvas pre-provisioning configuration for Kubernetes clusters" placeholder="none" />
                 </div>
                 <div className="slide ten">
-                  <img src={Circuit_breaker}  alt="Circuit breaker monitoring in Kanvas service mesh"/>
+                  <StaticImage src="../../assets/images/kanvas/catalog-card-images/circuit-breaker.svg"  alt="Circuit breaker monitoring in Kanvas service mesh" placeholder="none" />
                 </div>
                 <div className="slide eleven">
-                  <img src={Retry_deadline}  alt="Retry deadline feature in Kanvas observability dashboard" />
+                  <StaticImage src="../../assets/images/kanvas/catalog-card-images/retry-deadline.svg"  alt="Retry deadline feature in Kanvas observability dashboard" placeholder="none" />
                 </div>
                 <div className="slide twelve">
-                  <img src={Singleton} alt="Singleton service pattern visualization in Kanvas" />
+                  <StaticImage src="../../assets/images/kanvas/catalog-card-images/singleton.svg" alt="Singleton service pattern visualization in Kanvas" placeholder="none" />
                 </div>
                 <div className="slide thirteen">
-                  <img src={Jwt_transformer} alt="JWT transformer process view in Kanvas Kubernetes dashboard" />
+                  <StaticImage src="../../assets/images/kanvas/catalog-card-images/jwt.svg" alt="JWT transformer process view in Kanvas Kubernetes dashboard" placeholder="none" />
                 </div>
                 <div className="slide fourteen">
-                  <img src={Multicluster} alt="Multi-cluster management view in Kanvas" />
+                  <StaticImage src="../../assets/images/kanvas/catalog-card-images/multicluster.svg" alt="Multi-cluster management view in Kanvas" placeholder="none" />
                 </div>
                 <div className="slide fifteen">
-                  <img src={Http_metrics} alt="HTTP metrics monitoring dashboard in Kanvas for Kubernetes" />
+                  <StaticImage src="../../assets/images/kanvas/catalog-card-images/http.svg" alt="HTTP metrics monitoring dashboard in Kanvas for Kubernetes" placeholder="none" />
                 </div>
               </div>
             </div>
diff --git a/src/sections/Kanvas/kanvas-modes.js b/src/sections/Kanvas/kanvas-modes.js
index 5387eabfdb26a..81d2f5cacbdba 100644
--- a/src/sections/Kanvas/kanvas-modes.js
+++ b/src/sections/Kanvas/kanvas-modes.js
@@ -1,7 +1,6 @@
 import React, { useState } from "react";
+import { StaticImage } from "gatsby-plugin-image";
 import styled from "styled-components";
-import designerImage from "../../assets/images/kanvas/KanvasDesignerN.webp";
-import visualizerImage from "../../assets/images/kanvas/Kanvas-Operator.webp";
 
 const KanvasModesWrapper = styled.div`
   margin-top: 0.1rem;
@@ -188,7 +187,7 @@ const KanvasModesWrapper = styled.div`
       font-size: 1.44rem;
       font-weight: normal;
     }
-    img{
+    .gatsby-image-wrapper{
         width: 30rem;
         height: auto;
         cursor: pointer;
@@ -270,7 +269,7 @@ const KanvasModes = () => {
           </div>
           <div className="content">
             <h1>Discover and model your cloud native deployments</h1>
-            <img src={designerImage} alt="Kanvas Designer" onClick={() => setDesignerEnlarged(!designerEnlarged)} className={`designer-img ${designerEnlarged ? "big" : "small"}`} />
+            <StaticImage src="../../assets/images/kanvas/KanvasDesignerN.webp" alt="Kanvas Designer" onClick={() => setDesignerEnlarged(!designerEnlarged)} className={`designer-img ${designerEnlarged ? "big" : "small"}`} />
             <p>
               Drag-and-drop your cloud native infrastructure using a palette of thousands of versioned Kubernetes components. Using GitOps? Integrate advanced performance analysis into your pipeline.
             </p>
@@ -283,7 +282,7 @@ const KanvasModes = () => {
           </div>
           <div className="content">
             <h1>Apply patterns and manage many Kubernetes clusters</h1>
-            <img src={visualizerImage} alt="Kanvas Operator" onClick={() => setVizEnlarged(!vizEnlarged)} className={`visualizer-img ${vizEnlarged ? "big" : "small"}`} />
+            <StaticImage src="../../assets/images/kanvas/Kanvas-Operator.webp" alt="Kanvas Operator" onClick={() => setVizEnlarged(!vizEnlarged)} className={`visualizer-img ${vizEnlarged ? "big" : "small"}`} />
             <p>
               Deploy designs, apply patterns, manage and operate your deployments in real-time. Bring all your Kubernetes clusters under a common point of management. Interactively connect to terminal sessions or initiate and search log streams from your containers.
             </p>