diff --git a/src/sections/General/Navigation/index.js b/src/sections/General/Navigation/index.js
index 808523911eee..936f2c359070 100644
--- a/src/sections/General/Navigation/index.js
+++ b/src/sections/General/Navigation/index.js
@@ -9,7 +9,8 @@ import { useStyledDarkMode } from "../../../theme/app/useStyledDarkMode";
 import axios from "axios";
 // import smp_dark_text from "../../../assets/images/service-mesh-performance/stacked/smp-dark-text.svg";
 // import smp_light_text from "../../../assets/images/service-mesh-performance/stacked/smp-light-text.svg";
-import kanvas_dark from "../../../assets/images/kanvas/icon-only/kanvas-icon-white.svg";
+// import kanvas_dark from "../../../assets/images/kanvas/icon-only/kanvas-icon-white.svg";
+import kanvas_color from "../../../assets/images/kanvas/icon-only/kanvas-icon-color.svg";
 import meshery from "../../../assets/images/meshery/icon-only/meshery-logo-light.svg";
 import Data from "./utility/menu-items.js";
 import ScrollspyMenu from "./utility/ScrollspyMenu.js";
@@ -144,7 +145,7 @@ const Navigation = () => {
       {
         frontmatter: {
           thumbnail: {
-            img: kanvas_dark,
+            img: kanvas_color,
           },
           title: "Kanvas, collaborative infrastructure management",
         },