diff --git a/components/nav/productSection.tsx b/components/nav/productSection.tsx
index ecd0ae07..89a0b715 100644
--- a/components/nav/productSection.tsx
+++ b/components/nav/productSection.tsx
@@ -12,6 +12,7 @@ import AutomaticMocking from "@/public/images/navBarIcons/AutomaticMocking";
 import CICD from "@/public/images/navBarIcons/CICD";
 import MultiPurposeMocks from "@/public/images/navBarIcons/MultiPurposeMocks";
 import MemoizedImage from "@/public/images/navBarIcons/EnterPrice";
+import Image from "next/image";
 
 export default function Product() {
   const [openDropdown, setShowDropdown] = useState(false);
@@ -50,16 +51,21 @@ export default function Product() {
       url: "https://keploy.io/docs/concepts/what-are-keploy-features/#%EF%B8%8F-multi-purpose-mocks",
     },
   ];
-  const aboutProductLinks = [
-    {
-      icon: <img
-      src={"/images/keploylogo.png"}
-      alt="What is Keploy Icon"
-      style={{ height: "24px", width: "24px" }}
-    />,
-      title: "What is Keploy?",
-      url: "https://keploy.io/docs/concepts/what-is-keploy/#heading",
-    },
+
+ const aboutProductLinks = [
+  {
+    icon: (
+      <Image
+        src={`${process.env.NEXT_PUBLIC_ASSET_PREFIX || ""}/images/keploylogo.png`}
+        alt="What is Keploy Icon"
+        width={24}
+        height={24}
+        priority
+      />
+    ),
+    title: "What is Keploy?",
+    url: "https://keploy.io/docs/concepts/what-is-keploy/#heading",
+  },
     {
       icon: <WhyUseKeploy />,
       title: "Why use Keploy?",
@@ -206,4 +212,4 @@ export default function Product() {
       )}
     </div>
   );
-}
+}
\ No newline at end of file