diff --git a/workspaces/website/src/components/Card/GridCard.tsx b/workspaces/website/src/components/Card/GridCard.tsx
index 74ffb412a6..4626f7f38b 100644
--- a/workspaces/website/src/components/Card/GridCard.tsx
+++ b/workspaces/website/src/components/Card/GridCard.tsx
@@ -74,7 +74,7 @@ type ImageProps = {
 const Image = ({ url, imageAlt, type }: ImageProps) => {
   const size = useBreakpointValue({ base: '581', md: '430px', xl: '320px' });
   const cloudflareImage = `https://starknet.io/cdn-cgi/image/width=${size},height=auto,format=auto${url}`;
-  const isProd  = import.meta.env.VITE_ALGOLIA_INDEX === "production";
+  const isProd = import.meta.env.VITE_ALGOLIA_INDEX === "production";
   const renderImage = () => {
     switch (type) {
       case "github":
diff --git a/workspaces/website/src/components/Card/ListCard.tsx b/workspaces/website/src/components/Card/ListCard.tsx
index 7acbc0ffc4..7a84b5e1e2 100644
--- a/workspaces/website/src/components/Card/ListCard.tsx
+++ b/workspaces/website/src/components/Card/ListCard.tsx
@@ -49,6 +49,9 @@ type Props = {
 } & BoxProps;
 
 export const ListCard = (props: Props) => {
+  const cloudflareImage = `https://starknet.io/cdn-cgi/image/width=80px,height=auto,format=auto${props.image}`;
+  const isProd  = import.meta.env.VITE_ALGOLIA_INDEX === "production";
+  
   return (
     <Box maxW="5xl">
       <LinkBox
@@ -83,7 +86,7 @@ export const ListCard = (props: Props) => {
                   <Img
                     width="full"
                     height="full"
-                    src={props.image}
+                    src={isProd ? cloudflareImage : props.image}
                     title={props.title}
                     objectFit="contain"
                   />
diff --git a/workspaces/website/src/components/Card/components/ImageIconBox.tsx b/workspaces/website/src/components/Card/components/ImageIconBox.tsx
index 987cdb1800..e55f5b6726 100644
--- a/workspaces/website/src/components/Card/components/ImageIconBox.tsx
+++ b/workspaces/website/src/components/Card/components/ImageIconBox.tsx
@@ -1,5 +1,5 @@
 import {
-  Box
+  Box, useBreakpointValue
 } from "@chakra-ui/react";
 import "../style.css";
 import {
@@ -105,6 +105,9 @@ export const ImageIconBox = ({
   title
 }: Props) => {
   let ComponentToRender;
+  const featuredImageSize = useBreakpointValue({ base: '430px', sm: '464px' });
+  const cloudflareImage = `https://starknet.io/cdn-cgi/image/width=${featuredImageSize},height=auto,format=auto${icon}`;
+  const isProd  = import.meta.env.VITE_ALGOLIA_INDEX === "production";
   const iconProps: CardIconProps = {
     gradientColor1: colors[color]?.iconGradientColor1,
     gradientColor2: colors[color]?.iconGradientColor2,
@@ -112,7 +115,7 @@ export const ImageIconBox = ({
     borderRadius: variant === "dapp" ? "28.0494px" : "0px",
     imagePadding: variant === "large_card" ? "0px" : "40px 0 0 32px",
     communityCardPadding: {base: "0", md: "24px 0px 24px 36px"},
-    icon: icon ?? '',
+    icon: icon ? (isProd ? cloudflareImage : icon) : '',
     alt: title ?? ''
   }
   switch (icon) {